npm - @bendyline/squisq-editor-react - Versions diffs - 2.6.0 → 2.7.1 - Mend

@bendyline/squisq-editor-react 2.6.0 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/{chunk-WH3DL6TG.js → chunk-AZ5ME4XG.js} +1 -1
package/dist/{chunk-5FG3NAPH.js → chunk-BYXVO34Z.js} +886 -980
package/dist/{chunk-JUAQQTJE.js → chunk-V3J5S7X6.js} +284 -128
package/dist/index.d.ts +126 -46
package/dist/index.js +27 -3
package/dist/recorder/index.d.ts +1 -1
package/dist/recorder/index.js +12 -2
package/dist/{recorder-xL-5Vfbu.d.ts → recorder-DFP0Dw4v.d.ts} +100 -1
package/dist/shell/index.d.ts +2 -1
package/dist/shell/index.js +2 -2
package/dist/{shell-BXG_NlvR.d.ts → shell-595XbANu.d.ts} +24 -2
package/dist/styles/index.css +8 -0
package/package.json +5 -5

package/dist/{chunk-5FG3NAPH.js → chunk-BYXVO34Z.js} RENAMED Viewed

@@ -15,7 +15,7 @@ import {
 import {
   RecorderPanel,
   useModalDialog
-} from "./chunk-JUAQQTJE.js";
+} from "./chunk-V3J5S7X6.js";
 import {
   Icon
 } from "./chunk-GS7QWYFT.js";
@@ -378,6 +378,7 @@ function EditorProvider({
   imageDisplayMode = "inline",
   mentionProvider = null,
   documentLinkProvider = null,
+  fenceRenderers = null,
   linkSchemes,
   allowRecording = true,
   allowNarrate = true,
@@ -865,6 +866,7 @@ function EditorProvider({
       imageDisplayMode,
       mentionProvider,
       documentLinkProvider,
+      fenceRenderers,
       linkSchemes,
       fileName,
       setMarkdownSource,
@@ -926,6 +928,7 @@ function EditorProvider({
       imageDisplayMode,
       mentionProvider,
       documentLinkProvider,
+      fenceRenderers,
       linkSchemes,
       fileName,
       setMarkdownSource,
@@ -25015,19 +25018,21 @@ function CodeSnippetWidget({
 // src/codeSnippet/CodeSnippetExtension.ts
 var CODE_SNIPPET_KEY = new PluginKey6("squisq-code-snippet");
-function isCodeSnippetNode(node2) {
+function isCodeSnippetNode(node2, reserved) {
   const language = node2.attrs.language;
-  return node2.type.name === "codeBlock" && isCodeSnippetFenceLanguage(typeof language === "string" ? language : null);
+  const lang = typeof language === "string" ? language : null;
+  if (node2.type.name !== "codeBlock" || !isCodeSnippetFenceLanguage(lang)) return false;
+  return !reserved || !reserved.has(codeSnippetFenceLanguageToken(lang));
 }
 function findCodeSnippetBlockPos(editor, blockId) {
   const state = CODE_SNIPPET_KEY.getState(editor.state);
   return state?.entries.find((entry) => entry.id === blockId)?.pos ?? null;
 }
-function buildDecorations5(doc, entries, editor, focusBlockId = null) {
+function buildDecorations5(doc, entries, editor, focusBlockId = null, reserved) {
   const decorations = [];
   for (const entry of entries) {
     const node2 = doc.nodeAt(entry.pos);
-    if (!node2 || !isCodeSnippetNode(node2)) continue;
+    if (!node2 || !isCodeSnippetNode(node2, reserved)) continue;
     decorations.push(
       Decoration6.node(entry.pos, entry.pos + node2.nodeSize, {
         class: "squisq-code-snippet-fence-hidden"
@@ -25069,7 +25074,7 @@ function buildDecorations5(doc, entries, editor, focusBlockId = null) {
   }
   return DecorationSet6.create(doc, decorations);
 }
-function remapEntries2(tr, previous, doc) {
+function remapEntries2(tr, previous, doc, reserved) {
   const mapped = /* @__PURE__ */ new Map();
   const claimed = /* @__PURE__ */ new Set();
   for (const entry of previous.entries) {
@@ -25092,22 +25097,22 @@ function remapEntries2(tr, previous, doc) {
   const entries = [];
   doc.descendants((node2, pos) => {
     if (node2.type.name !== "codeBlock") return;
-    if (!isCodeSnippetNode(node2)) return false;
+    if (!isCodeSnippetNode(node2, reserved)) return false;
     entries.push({ id: mapped.get(pos) ?? `code-snippet-${++seq}`, pos });
     return false;
   });
   return { entries, seq };
 }
-function applyState4(tr, previous, editor, doc) {
+function applyState4(tr, previous, editor, doc, reserved) {
   if (!tr.docChanged) return previous;
-  const { entries, seq } = remapEntries2(tr, previous, doc);
+  const { entries, seq } = remapEntries2(tr, previous, doc, reserved);
   const requestedFocusPos = tr.getMeta(CODE_SNIPPET_FOCUS_INSERTED_META);
   const focusBlockId = typeof requestedFocusPos === "number" ? entries.find((entry) => entry.pos === requestedFocusPos)?.id ?? null : null;
   return {
     entries,
     seq,
     focusBlockId,
-    decorations: buildDecorations5(doc, entries, editor, focusBlockId)
+    decorations: buildDecorations5(doc, entries, editor, focusBlockId, reserved)
   };
 }
 var CodeSnippetExtension = Extension6.create({
@@ -25118,6 +25123,7 @@ var CodeSnippetExtension = Extension6.create({
   addProseMirrorPlugins() {
     if (this.options.enabled === false) return [];
     const editor = this.editor;
+    const reserved = this.options.reservedLanguages && this.options.reservedLanguages.length > 0 ? new Set(this.options.reservedLanguages.map((lang) => codeSnippetFenceLanguageToken(lang))) : void 0;
     return [
       new Plugin6({
         key: CODE_SNIPPET_KEY,
@@ -25127,7 +25133,7 @@ var CodeSnippetExtension = Extension6.create({
             const entries = [];
             state.doc.descendants((node2, pos) => {
               if (node2.type.name !== "codeBlock") return;
-              if (!isCodeSnippetNode(node2)) return false;
+              if (!isCodeSnippetNode(node2, reserved)) return false;
               entries.push({ id: `code-snippet-${++seq}`, pos });
               return false;
             });
@@ -25135,10 +25141,10 @@ var CodeSnippetExtension = Extension6.create({
               entries,
               seq,
               focusBlockId: null,
-              decorations: buildDecorations5(state.doc, entries, editor)
+              decorations: buildDecorations5(state.doc, entries, editor, null, reserved)
             };
           },
-          apply: (tr, previous, _oldState, newState) => applyState4(tr, previous, editor, newState.doc)
+          apply: (tr, previous, _oldState, newState) => applyState4(tr, previous, editor, newState.doc, reserved)
         },
         props: {
           decorations(state) {
@@ -25164,15 +25170,188 @@ function replaceCodeSnippetText(editor, blockId, nextText) {
   return true;
 }
-// src/treeview/treeViewData.ts
-import { useEffect as useEffect33, useMemo as useMemo32, useState as useState43 } from "react";
-// src/treeview/TreeViewExtension.ts
+// src/fenceWidgets/HostFenceExtension.ts
 import { Extension as Extension7 } from "@tiptap/core";
 import { Plugin as Plugin7, PluginKey as PluginKey7 } from "@tiptap/pm/state";
 import { Decoration as Decoration7, DecorationSet as DecorationSet7 } from "@tiptap/pm/view";
 import { createRoot as createRoot5 } from "react-dom/client";
 import { createElement as createElement11 } from "react";
+// src/fenceWidgets/HostFenceWidget.tsx
+import { Component, useEffect as useEffect33, useMemo as useMemo32, useState as useState42 } from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var HostFenceErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function HostFenceWidget({ editor, blockId, getRenderers, getTheme }) {
+  const [version, setVersion] = useState42(0);
+  useEffect33(() => {
+    const onUpdate = () => setVersion((v2) => v2 + 1);
+    editor.on("transaction", onUpdate);
+    return () => {
+      editor.off("transaction", onUpdate);
+    };
+  }, [editor]);
+  const current = useMemo32(() => {
+    const pos = findHostFenceBlockPos(editor, blockId);
+    if (pos === null) return null;
+    const node2 = editor.state.doc.nodeAt(pos);
+    if (!node2 || node2.type.name !== "codeBlock") return null;
+    return { lang: fenceLangToken(node2), value: node2.textContent };
+  }, [editor, blockId, version]);
+  if (!current) return null;
+  const renderer = getRenderers()?.[current.lang];
+  const rawFallback = /* @__PURE__ */ jsx50("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx50("code", { children: current.value }) });
+  if (!renderer) return rawFallback;
+  const theme = getTheme();
+  return /* @__PURE__ */ jsx50(HostFenceErrorBoundary, { fallback: rawFallback, children: renderer({
+    lang: current.lang,
+    value: current.value,
+    ...theme ? { theme } : {},
+    mode: "edit",
+    replaceValue: (next) => {
+      replaceHostFenceText(editor, blockId, next);
+    }
+  }) });
+}
+// src/fenceWidgets/HostFenceExtension.ts
+var HOST_FENCE_KEY = new PluginKey7("squisq-host-fence");
+function fenceLangToken(node2) {
+  const lang = node2.attrs.language;
+  if (typeof lang !== "string") return "";
+  return lang.trim().split(/\s+/, 1)[0]?.toLowerCase() ?? "";
+}
+function findHostFenceBlockPos(editor, blockId) {
+  return HOST_FENCE_KEY.getState(editor.state)?.entries.find((e2) => e2.id === blockId)?.pos ?? null;
+}
+function replaceHostFenceText(editor, blockId, next) {
+  const pos = findHostFenceBlockPos(editor, blockId);
+  if (pos === null) return false;
+  return replaceAsciiFenceText(editor, pos, next);
+}
+function buildDecorations6(doc, entries, editor, options) {
+  const decos = [];
+  for (const entry of entries) {
+    const node2 = doc.nodeAt(entry.pos);
+    if (!node2 || node2.type.name !== "codeBlock") continue;
+    decos.push(
+      Decoration7.node(entry.pos, entry.pos + node2.nodeSize, {
+        class: "squisq-host-fence-hidden"
+      })
+    );
+    const blockId = entry.id;
+    decos.push(
+      Decoration7.widget(
+        entry.pos + node2.nodeSize,
+        () => {
+          const container = document.createElement("div");
+          container.className = "squisq-host-fence-widget-host";
+          container.contentEditable = "false";
+          containFenceWidgetEvents(container);
+          const root = createRoot5(container);
+          root.render(
+            createElement11(HostFenceWidget, {
+              editor,
+              blockId,
+              getRenderers: () => options.renderers?.(),
+              getTheme: () => options.theme?.()
+            })
+          );
+          container.__squisqHostFenceRoot = { root };
+          return container;
+        },
+        {
+          destroy: (dom) => {
+            const ref = dom.__squisqHostFenceRoot;
+            if (ref) setTimeout(() => ref.root.unmount(), 0);
+          },
+          side: 1,
+          ignoreSelection: true,
+          key: `squisq-host-fence-${entry.id}`
+        }
+      )
+    );
+  }
+  return DecorationSet7.create(doc, decos);
+}
+function claims(node2, options) {
+  if (node2.type.name !== "codeBlock") return false;
+  const lang = fenceLangToken(node2);
+  if (!lang) return false;
+  return Boolean(options.renderers?.()?.[lang]);
+}
+function applyState5(tr, prev, editor, doc, options) {
+  if (!tr.docChanged) return prev;
+  const mapped = mapFenceEntries(tr, prev.entries, doc);
+  let seq = prev.seq;
+  const entries = [];
+  doc.descendants((node2, pos) => {
+    if (node2.type.name !== "codeBlock") return;
+    if (!claims(node2, options)) return false;
+    entries.push({ id: mapped.get(pos) ?? `host-fence-${++seq}`, pos });
+    return false;
+  });
+  return { entries, seq, decorations: buildDecorations6(doc, entries, editor, options) };
+}
+var HostFenceExtension = Extension7.create({
+  name: "squisqHostFence",
+  addOptions() {
+    return { enabled: true };
+  },
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    const options = this.options;
+    if (options.enabled === false || !options.renderers) return [];
+    return [
+      new Plugin7({
+        key: HOST_FENCE_KEY,
+        state: {
+          init: (_config, state) => {
+            let seq = 0;
+            const entries = [];
+            state.doc.descendants((node2, pos) => {
+              if (node2.type.name !== "codeBlock") return;
+              if (!claims(node2, options)) return false;
+              entries.push({ id: `host-fence-${++seq}`, pos });
+              return false;
+            });
+            return {
+              entries,
+              seq,
+              decorations: buildDecorations6(state.doc, entries, editor, options)
+            };
+          },
+          apply: (tr, prev, _oldState, newState) => applyState5(tr, prev, editor, newState.doc, options)
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorations ?? DecorationSet7.empty;
+          }
+        }
+      })
+    ];
+  }
+});
+// src/treeview/treeViewData.ts
+import { useEffect as useEffect34, useMemo as useMemo33, useState as useState44 } from "react";
+// src/treeview/TreeViewExtension.ts
+import { Extension as Extension8 } from "@tiptap/core";
+import { Plugin as Plugin8, PluginKey as PluginKey8 } from "@tiptap/pm/state";
+import { Decoration as Decoration8, DecorationSet as DecorationSet8 } from "@tiptap/pm/view";
+import { createRoot as createRoot6 } from "react-dom/client";
+import { createElement as createElement12 } from "react";
 import {
   detectTree,
   isEligibleTreeFenceLang,
@@ -25182,7 +25361,7 @@ import {
 } from "@bendyline/squisq/doc";
 // src/treeview/TreeOutlineWidget.tsx
-import { useCallback as useCallback36, useRef as useRef35, useState as useState42 } from "react";
+import { useCallback as useCallback36, useRef as useRef35, useState as useState43 } from "react";
 // src/treeview/treeViewCommands.ts
 import { parseTree, renderTree } from "@bendyline/squisq/doc";
@@ -25392,7 +25571,7 @@ function applyTreeCommand(editor, blockId, cmd) {
 }
 // src/treeview/TreeOutlineWidget.tsx
-import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var TREE_DRAG_MIME = "application/x-squisq-tree-node";
 function findNode(nodes, id) {
   for (const node2 of nodes) {
@@ -25419,10 +25598,10 @@ function dropPositionForPointer(event) {
 }
 function TreeOutlineWidget({ editor, blockId }) {
   const view = useTreeViewData(editor, blockId);
-  const [collapsed, setCollapsed] = useState42(() => /* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = useState43(() => /* @__PURE__ */ new Set());
   const activeDragRef = useRef35(null);
-  const [draggedId, setDraggedId] = useState42(null);
-  const [dropTarget, setDropTarget] = useState42(null);
+  const [draggedId, setDraggedId] = useState43(null);
+  const [dropTarget, setDropTarget] = useState43(null);
   const dispatch = useCallback36(
     (cmd) => applyTreeCommand(editor, blockId, cmd),
     [editor, blockId]
@@ -25504,7 +25683,7 @@ function TreeOutlineWidget({ editor, blockId }) {
           disabled: !firstRootId,
           onClick: () => firstRootId ? dispatch({ kind: "addItem", targetId: firstRootId, position: "siblingAfter" }) : void 0,
           children: [
-            /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-plus" }),
+            /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-plus" }),
             " Item"
           ]
         }
@@ -25523,13 +25702,13 @@ function TreeOutlineWidget({ editor, blockId }) {
             isDir: true
           }) : void 0,
           children: [
-            /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-folder-plus" }),
+            /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-folder-plus" }),
             " Folder"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx50("ul", { className: "squisq-tree-rows", role: "tree", children: roots.map((node2) => /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51("ul", { className: "squisq-tree-rows", role: "tree", children: roots.map((node2) => /* @__PURE__ */ jsx51(
       TreeRowView,
       {
         node: node2,
@@ -25569,7 +25748,7 @@ function TreeRowView({
   const hasChildren = node2.children.length > 0;
   const isCollapsed = collapsed.has(node2.id);
   const isDir = node2.isDir || hasChildren;
-  const [draft, setDraft] = useState42(node2.label);
+  const [draft, setDraft] = useState43(node2.label);
   const dropPosition = dropTarget?.id === node2.id ? dropTarget.position : null;
   const itemClassName = [
     "squisq-tree-item",
@@ -25589,27 +25768,27 @@ function TreeRowView({
         onDragOver: (event) => onDragOver(event, node2.id),
         onDrop: (event) => onDrop(event, node2.id),
         children: [
-          hasChildren ? /* @__PURE__ */ jsx50(
+          hasChildren ? /* @__PURE__ */ jsx51(
             "button",
             {
               type: "button",
               className: "squisq-tree-chevron",
               "aria-label": isCollapsed ? "Expand" : "Collapse",
               onClick: () => toggleCollapse(node2.id),
-              children: /* @__PURE__ */ jsx50(Icon, { icon: `fa-solid ${isCollapsed ? "fa-chevron-right" : "fa-chevron-down"}` })
+              children: /* @__PURE__ */ jsx51(Icon, { icon: `fa-solid ${isCollapsed ? "fa-chevron-right" : "fa-chevron-down"}` })
             }
-          ) : /* @__PURE__ */ jsx50("span", { className: "squisq-tree-chevron squisq-tree-chevron--empty" }),
-          /* @__PURE__ */ jsx50(
+          ) : /* @__PURE__ */ jsx51("span", { className: "squisq-tree-chevron squisq-tree-chevron--empty" }),
+          /* @__PURE__ */ jsx51(
             "button",
             {
               type: "button",
               className: "squisq-tree-icon",
               title: isDir ? "Make a file" : "Make a folder",
               onClick: () => dispatch({ kind: "toggleDir", id: node2.id }),
-              children: /* @__PURE__ */ jsx50(Icon, { icon: `fa-solid ${isDir ? "fa-folder" : "fa-file"}` })
+              children: /* @__PURE__ */ jsx51(Icon, { icon: `fa-solid ${isDir ? "fa-folder" : "fa-file"}` })
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             "input",
             {
               className: "squisq-tree-label",
@@ -25633,7 +25812,7 @@ function TreeRowView({
             }
           ),
           /* @__PURE__ */ jsxs39("span", { className: "squisq-tree-controls", children: [
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "span",
               {
                 className: "squisq-tree-drag-handle",
@@ -25642,69 +25821,69 @@ function TreeRowView({
                 title: `Drag ${node2.label} to move`,
                 onDragStart: (event) => onDragStart(event, node2.id),
                 onDragEnd,
-                children: /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-grip-vertical" })
+                children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-grip-vertical" })
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "button",
               {
                 type: "button",
                 title: "Add child",
                 onClick: () => dispatch({ kind: "addItem", targetId: node2.id, position: "child" }),
-                children: /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-plus" })
+                children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-plus" })
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "button",
               {
                 type: "button",
                 title: "Outdent",
                 onClick: () => dispatch({ kind: "outdentItem", id: node2.id }),
-                children: /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-outdent" })
+                children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-outdent" })
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "button",
               {
                 type: "button",
                 title: "Indent",
                 onClick: () => dispatch({ kind: "indentItem", id: node2.id }),
-                children: /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-indent" })
+                children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-indent" })
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "button",
               {
                 type: "button",
                 title: "Move up",
                 onClick: () => dispatch({ kind: "moveItemUp", id: node2.id }),
-                children: /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-arrow-up" })
+                children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-arrow-up" })
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "button",
               {
                 type: "button",
                 title: "Move down",
                 onClick: () => dispatch({ kind: "moveItemDown", id: node2.id }),
-                children: /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-arrow-down" })
+                children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-arrow-down" })
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "button",
               {
                 type: "button",
                 title: "Delete",
                 className: "squisq-tree-delete",
                 onClick: () => dispatch({ kind: "removeItem", id: node2.id }),
-                children: /* @__PURE__ */ jsx50(Icon, { icon: "fa-solid fa-trash" })
+                children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-trash" })
               }
             )
           ] })
         ]
       }
     ),
-    hasChildren && !isCollapsed ? /* @__PURE__ */ jsx50("ul", { className: "squisq-tree-rows", role: "group", children: node2.children.map((child) => /* @__PURE__ */ jsx50(
+    hasChildren && !isCollapsed ? /* @__PURE__ */ jsx51("ul", { className: "squisq-tree-rows", role: "group", children: node2.children.map((child) => /* @__PURE__ */ jsx51(
       TreeRowView,
       {
         node: child,
@@ -25725,7 +25904,7 @@ function TreeRowView({
 }
 // src/treeview/TreeViewExtension.ts
-var TREEVIEW_KEY = new PluginKey7("squisq-treeview");
+var TREEVIEW_KEY = new PluginKey8("squisq-treeview");
 var detectCache2 = /* @__PURE__ */ new WeakMap();
 var parseCache2 = /* @__PURE__ */ new WeakMap();
 function fenceLangOf3(node2) {
@@ -25771,27 +25950,27 @@ function parseTreeForNode(node2) {
 function findTreeBlockPos(editor, blockId) {
   return TREEVIEW_KEY.getState(editor.state)?.entries.find((e2) => e2.id === blockId)?.pos ?? null;
 }
-function buildDecorations6(doc, entries, editor) {
+function buildDecorations7(doc, entries, editor) {
   const decos = [];
   for (const entry of entries) {
     const node2 = doc.nodeAt(entry.pos);
     if (!node2 || node2.type.name !== "codeBlock") continue;
     decos.push(
-      Decoration7.node(entry.pos, entry.pos + node2.nodeSize, { class: "squisq-tree-fence-hidden" })
+      Decoration8.node(entry.pos, entry.pos + node2.nodeSize, { class: "squisq-tree-fence-hidden" })
     );
     const blockId = entry.id;
     const fallbackPos = entry.pos;
     decos.push(
-      Decoration7.widget(
+      Decoration8.widget(
         entry.pos + node2.nodeSize,
         (view) => {
           const container = document.createElement("div");
           container.className = "squisq-tree-widget-host";
           container.contentEditable = "false";
           containFenceWidgetEvents(container);
-          const root = createRoot5(container);
+          const root = createRoot6(container);
           root.render(
-            createElement11(TreeOutlineWidget, {
+            createElement12(TreeOutlineWidget, {
               editor,
               blockId,
               fallbackPos,
@@ -25815,9 +25994,9 @@ function buildDecorations6(doc, entries, editor) {
       )
     );
   }
-  return DecorationSet7.create(doc, decos);
+  return DecorationSet8.create(doc, decos);
 }
-function applyState5(tr, prev, editor, doc) {
+function applyState6(tr, prev, editor, doc) {
   if (!tr.docChanged) return prev;
   const mapped = mapFenceEntries(tr, prev.entries, doc);
   let seq = prev.seq;
@@ -25830,9 +26009,9 @@ function applyState5(tr, prev, editor, doc) {
     entries.push({ id: knownId ?? `tree-${++seq}`, pos });
     return false;
   });
-  return { entries, seq, decorations: buildDecorations6(doc, entries, editor) };
+  return { entries, seq, decorations: buildDecorations7(doc, entries, editor) };
 }
-var TreeViewExtension = Extension7.create({
+var TreeViewExtension = Extension8.create({
   name: "squisqTreeView",
   addOptions() {
     return { enabled: true };
@@ -25841,7 +26020,7 @@ var TreeViewExtension = Extension7.create({
     const editor = this.editor;
     if (this.options.enabled === false) return [];
     return [
-      new Plugin7({
+      new Plugin8({
         key: TREEVIEW_KEY,
         state: {
           init: (_config, state) => {
@@ -25856,14 +26035,14 @@ var TreeViewExtension = Extension7.create({
             return {
               entries,
               seq,
-              decorations: buildDecorations6(state.doc, entries, editor)
+              decorations: buildDecorations7(state.doc, entries, editor)
             };
           },
-          apply: (tr, prev, _oldState, newState) => applyState5(tr, prev, editor, newState.doc)
+          apply: (tr, prev, _oldState, newState) => applyState6(tr, prev, editor, newState.doc)
         },
         props: {
           decorations(state) {
-            return this.getState(state)?.decorations ?? DecorationSet7.empty;
+            return this.getState(state)?.decorations ?? DecorationSet8.empty;
           }
         }
       })
@@ -25873,15 +26052,15 @@ var TreeViewExtension = Extension7.create({
 // src/treeview/treeViewData.ts
 function useTreeViewData(editor, blockId) {
-  const [version, setVersion] = useState43(0);
-  useEffect33(() => {
+  const [version, setVersion] = useState44(0);
+  useEffect34(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
       editor.off("transaction", onUpdate);
     };
   }, [editor]);
-  return useMemo32(() => {
+  return useMemo33(() => {
     const pos = findTreeBlockPos(editor, blockId);
     if (pos === null) return null;
     const node2 = editor.state.doc.nodeAt(pos);
@@ -25900,14 +26079,14 @@ function shouldPasteAsTreeFence(text) {
 }
 // src/timeline/timelineData.ts
-import { useEffect as useEffect35, useMemo as useMemo34, useRef as useRef37, useState as useState45 } from "react";
+import { useEffect as useEffect36, useMemo as useMemo35, useRef as useRef37, useState as useState46 } from "react";
 // src/timeline/TimelineViewExtension.ts
-import { Extension as Extension8 } from "@tiptap/core";
-import { Plugin as Plugin8, PluginKey as PluginKey8 } from "@tiptap/pm/state";
-import { Decoration as Decoration8, DecorationSet as DecorationSet8 } from "@tiptap/pm/view";
-import { createElement as createElement12 } from "react";
-import { createRoot as createRoot6 } from "react-dom/client";
+import { Extension as Extension9 } from "@tiptap/core";
+import { Plugin as Plugin9, PluginKey as PluginKey9 } from "@tiptap/pm/state";
+import { Decoration as Decoration9, DecorationSet as DecorationSet9 } from "@tiptap/pm/view";
+import { createElement as createElement13 } from "react";
+import { createRoot as createRoot7 } from "react-dom/client";
 import {
   detectAsciiTimeline,
   isEligibleAsciiTimelineFenceLang,
@@ -25915,7 +26094,7 @@ import {
 } from "@bendyline/squisq/doc";
 // src/timeline/TimelineEditorWidget.tsx
-import { useCallback as useCallback37, useEffect as useEffect34, useMemo as useMemo33, useRef as useRef36, useState as useState44 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect35, useMemo as useMemo34, useRef as useRef36, useState as useState45 } from "react";
 import {
   asciiTimelineToTemplateData
 } from "@bendyline/squisq/doc";
@@ -26395,17 +26574,17 @@ function applyTimelineCommand(editor, blockId, command) {
 }
 // src/timeline/TimelineEditorWidget.tsx
-import { Fragment as Fragment15, jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 function TimelineEditorWidget({ editor, blockId }) {
   const view = useTimelineData(editor, blockId);
-  const [selectedEventId, setSelectedEventId] = useState44(null);
-  const [addingTrackId, setAddingTrackId] = useState44(null);
-  const [editingTrackId, setEditingTrackId] = useState44(null);
-  const [hover, setHover] = useState44(null);
-  const [dragged, setDragged] = useState44(null);
+  const [selectedEventId, setSelectedEventId] = useState45(null);
+  const [addingTrackId, setAddingTrackId] = useState45(null);
+  const [editingTrackId, setEditingTrackId] = useState45(null);
+  const [hover, setHover] = useState45(null);
+  const [dragged, setDragged] = useState45(null);
   const suppressClickEventId = useRef36(null);
-  const [announcement, setAnnouncement] = useState44("");
+  const [announcement, setAnnouncement] = useState45("");
   const dispatch = useCallback37(
     (command) => {
       const result = applyTimelineCommand(editor, blockId, command);
@@ -26419,7 +26598,7 @@ function TimelineEditorWidget({ editor, blockId }) {
   );
   const sourceText2 = view?.text;
   const sourceTimeline = view?.timeline;
-  const sourceSafe = useMemo33(
+  const sourceSafe = useMemo34(
     () => sourceText2 && sourceTimeline ? isTimelineSourceSafeForSemanticEdit(sourceText2, sourceTimeline) : false,
     // `useTimelineData` publishes on every editor transaction so read-only
     // changes are observed. Unrelated transactions retain both primitive/model
@@ -26429,7 +26608,7 @@ function TimelineEditorWidget({ editor, blockId }) {
   );
   const editorEditable = editor.isEditable;
   const editable = editorEditable && sourceSafe;
-  const positioned = useMemo33(() => {
+  const positioned = useMemo34(() => {
     if (!view) return [];
     const normalized = asciiTimelineToTemplateData(view.timeline).tracks;
     return view.timeline.tracks.flatMap((track, trackIndex) => {
@@ -26444,17 +26623,17 @@ function TimelineEditorWidget({ editor, blockId }) {
       );
     });
   }, [view]);
-  const displayedPositioned = useMemo33(
+  const displayedPositioned = useMemo34(
     () => dragged ? positioned.map(
       (point) => point.event.id === dragged.eventId ? { ...point, position: dragged.position } : point
     ) : positioned,
     [dragged, positioned]
   );
-  const positionById = useMemo33(
+  const positionById = useMemo34(
     () => new Map(displayedPositioned.map((point) => [point.event.id, point.position])),
     [displayedPositioned]
   );
-  const selected = useMemo33(() => {
+  const selected = useMemo34(() => {
     if (!view || !selectedEventId) return null;
     for (const track of view.timeline.tracks) {
       const event = track.events.find((candidate) => candidate.id === selectedEventId);
@@ -26468,7 +26647,7 @@ function TimelineEditorWidget({ editor, blockId }) {
     }
     return null;
   }, [selectedEventId, view]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (!view) return;
     const ids = new Set(
       view.timeline.tracks.flatMap((track) => track.events.map((event) => event.id))
@@ -26476,13 +26655,13 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (selectedEventId && ids.has(selectedEventId)) return;
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (editable) return;
     setAddingTrackId(null);
     setEditingTrackId(null);
     setHover(null);
   }, [editable]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
       return;
     }
@@ -26549,13 +26728,13 @@ function TimelineEditorWidget({ editor, blockId }) {
       children: [
         /* @__PURE__ */ jsxs40("header", { className: "squisq-ascii-timeline-header", children: [
           /* @__PURE__ */ jsxs40("span", { children: [
-            /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-timeline" }),
+            /* @__PURE__ */ jsx52(Icon, { icon: "fa-solid fa-timeline" }),
             " Timeline"
           ] }),
           /* @__PURE__ */ jsxs40("div", { className: "squisq-ascii-timeline-header-actions", children: [
-            editable && addingTrackId ? /* @__PURE__ */ jsx51("small", { children: "Click the line to add a point \xB7 Esc to cancel" }) : editable ? /* @__PURE__ */ jsx51("small", { children: "Use + to add a point \xB7 Drag dots to move" }) : editorEditable ? /* @__PURE__ */ jsx51("small", { children: "Source repair needed" }) : /* @__PURE__ */ jsx51("small", { children: "Read only" }),
+            editable && addingTrackId ? /* @__PURE__ */ jsx52("small", { children: "Click the line to add a point \xB7 Esc to cancel" }) : editable ? /* @__PURE__ */ jsx52("small", { children: "Use + to add a point \xB7 Drag dots to move" }) : editorEditable ? /* @__PURE__ */ jsx52("small", { children: "Source repair needed" }) : /* @__PURE__ */ jsx52("small", { children: "Read only" }),
             editable ? /* @__PURE__ */ jsxs40("button", { type: "button", onClick: addTrack, children: [
-              /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-plus" }),
+              /* @__PURE__ */ jsx52(Icon, { icon: "fa-solid fa-plus" }),
               " Add line"
             ] }) : null
           ] })
@@ -26566,7 +26745,7 @@ function TimelineEditorWidget({ editor, blockId }) {
             className: "squisq-ascii-timeline-canvas",
             style: { "--squisq-ascii-timeline-track-count": view.timeline.tracks.length },
             children: [
-              view.timeline.links.length > 0 ? /* @__PURE__ */ jsx51(
+              view.timeline.links.length > 0 ? /* @__PURE__ */ jsx52(
                 "svg",
                 {
                   className: "squisq-ascii-timeline-branches",
@@ -26583,7 +26762,7 @@ function TimelineEditorWidget({ editor, blockId }) {
                     const ty = target.trackIndex * 96 + 48;
                     const sameTrack = source.trackIndex === target.trackIndex;
                     const controlY = sameTrack ? sy + (source.event.side === "below" ? -30 : 30) : (sy + ty) / 2;
-                    return /* @__PURE__ */ jsx51(
+                    return /* @__PURE__ */ jsx52(
                       "path",
                       {
                         d: `M ${sx} ${sy} C ${sx} ${controlY}, ${tx} ${controlY}, ${tx} ${ty}`,
@@ -26602,7 +26781,7 @@ function TimelineEditorWidget({ editor, blockId }) {
                 const addingPoint = editable && addingTrackId === track.id;
                 return /* @__PURE__ */ jsxs40("div", { className: "squisq-ascii-timeline-track", children: [
                   /* @__PURE__ */ jsxs40("div", { className: "squisq-ascii-timeline-track-label", children: [
-                    /* @__PURE__ */ jsx51(
+                    /* @__PURE__ */ jsx52(
                       InlineTrackLabel,
                       {
                         trackId: track.id,
@@ -26619,7 +26798,7 @@ function TimelineEditorWidget({ editor, blockId }) {
                       }
                     ),
                     editable ? /* @__PURE__ */ jsxs40(Fragment15, { children: [
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(
                         "button",
                         {
                           type: "button",
@@ -26628,10 +26807,10 @@ function TimelineEditorWidget({ editor, blockId }) {
                           disabled: view.timeline.tracks.length <= 1,
                           title: view.timeline.tracks.length > 1 ? `Delete ${trackLabel} line and all of its points` : "A timeline needs one line",
                           onClick: () => deleteTrack(track.id, trackLabel),
-                          children: /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-trash" })
+                          children: /* @__PURE__ */ jsx52(Icon, { icon: "fa-solid fa-trash" })
                         }
                       ),
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(
                         "button",
                         {
                           type: "button",
@@ -26676,8 +26855,8 @@ function TimelineEditorWidget({ editor, blockId }) {
                         addEvent(track.id, (event.clientX - rect.left) / rect.width);
                       },
                       children: [
-                        /* @__PURE__ */ jsx51("span", { className: "squisq-ascii-timeline-rail-line", "aria-hidden": "true" }),
-                        addingPoint && hover?.trackId === track.id && !dragged ? /* @__PURE__ */ jsx51(
+                        /* @__PURE__ */ jsx52("span", { className: "squisq-ascii-timeline-rail-line", "aria-hidden": "true" }),
+                        addingPoint && hover?.trackId === track.id && !dragged ? /* @__PURE__ */ jsx52(
                           "span",
                           {
                             className: "squisq-ascii-timeline-add-ghost",
@@ -26686,7 +26865,7 @@ function TimelineEditorWidget({ editor, blockId }) {
                             children: "+"
                           }
                         ) : null,
-                        addingPoint && !dragged ? gaps.map((position) => /* @__PURE__ */ jsx51(
+                        addingPoint && !dragged ? gaps.map((position) => /* @__PURE__ */ jsx52(
                           "button",
                           {
                             type: "button",
@@ -26713,21 +26892,21 @@ function TimelineEditorWidget({ editor, blockId }) {
                               className: `squisq-ascii-timeline-point squisq-ascii-timeline-point--${side}${draggedPoint ? " squisq-ascii-timeline-point--dragging" : ""}`,
                               style: { left: `${position * 100}%` },
                               children: [
-                                event.callout !== false ? /* @__PURE__ */ jsx51(
+                                event.callout !== false ? /* @__PURE__ */ jsx52(
                                   "span",
                                   {
                                     className: `squisq-ascii-timeline-callout squisq-ascii-timeline-callout--${side}`,
                                     children: event.label
                                   }
                                 ) : null,
-                                event.callout !== false && event.description ? /* @__PURE__ */ jsx51(
+                                event.callout !== false && event.description ? /* @__PURE__ */ jsx52(
                                   "span",
                                   {
                                     className: `squisq-ascii-timeline-description squisq-ascii-timeline-description--${descriptionSide}`,
                                     children: event.description
                                   }
                                 ) : null,
-                                /* @__PURE__ */ jsx51(
+                                /* @__PURE__ */ jsx52(
                                   "button",
                                   {
                                     type: "button",
@@ -26837,7 +27016,7 @@ function TimelineEditorWidget({ editor, blockId }) {
                             event.id
                           );
                         }),
-                        track.endLabel ? /* @__PURE__ */ jsx51("span", { className: "squisq-ascii-timeline-end-label", children: track.endLabel }) : null
+                        track.endLabel ? /* @__PURE__ */ jsx52("span", { className: "squisq-ascii-timeline-end-label", children: track.endLabel }) : null
                       ]
                     }
                   )
@@ -26846,13 +27025,13 @@ function TimelineEditorWidget({ editor, blockId }) {
             ]
           }
         ),
-        view.timeline.links.length > 0 ? /* @__PURE__ */ jsx51("ul", { className: "squisq-ascii-timeline-link-list", "aria-label": "Timeline branches", children: view.timeline.links.map((link, index2) => /* @__PURE__ */ jsxs40("li", { children: [
+        view.timeline.links.length > 0 ? /* @__PURE__ */ jsx52("ul", { className: "squisq-ascii-timeline-link-list", "aria-label": "Timeline branches", children: view.timeline.links.map((link, index2) => /* @__PURE__ */ jsxs40("li", { children: [
           link.source,
           " \u2192 ",
           link.target,
           link.label ? `: ${link.label}` : ""
         ] }, `${link.source}-${link.target}-${index2}`)) }) : null,
-        selected ? /* @__PURE__ */ jsx51(
+        selected ? /* @__PURE__ */ jsx52(
           EventInspector,
           {
             selected,
@@ -26874,7 +27053,7 @@ function TimelineEditorWidget({ editor, blockId }) {
           "Visual editing paused: this timeline contains source the canvas cannot safely rewrite. Repair it in Source view first.",
           view.warnings.length > 0 ? ` (${view.warnings.length} parser note${view.warnings.length === 1 ? "" : "s"})` : ""
         ] }) : null,
-        /* @__PURE__ */ jsx51("div", { className: "squisq-sr-only", "aria-live": "polite", children: announcement })
+        /* @__PURE__ */ jsx52("div", { className: "squisq-sr-only", "aria-live": "polite", children: announcement })
       ]
     }
   );
@@ -26888,8 +27067,8 @@ function InlineTrackLabel({
   onStart,
   onFinish
 }) {
-  const [draft, setDraft] = useState44(label);
-  useEffect34(() => {
+  const [draft, setDraft] = useState45(label);
+  useEffect35(() => {
     if (editing) setDraft(label);
   }, [editing, label]);
   const commitLabel = () => {
@@ -26902,8 +27081,8 @@ function InlineTrackLabel({
     }
     onFinish();
   };
-  if (!editable) return /* @__PURE__ */ jsx51("span", { className: "squisq-ascii-timeline-track-name", children: label });
-  return editing ? /* @__PURE__ */ jsx51(
+  if (!editable) return /* @__PURE__ */ jsx52("span", { className: "squisq-ascii-timeline-track-name", children: label });
+  return editing ? /* @__PURE__ */ jsx52(
     "input",
     {
       className: "squisq-ascii-timeline-track-name-input",
@@ -26926,7 +27105,7 @@ function InlineTrackLabel({
         }
       }
     }
-  ) : /* @__PURE__ */ jsx51(
+  ) : /* @__PURE__ */ jsx52(
     "button",
     {
       type: "button",
@@ -26946,10 +27125,10 @@ function EventInspector({
   onDelete
 }) {
   const { event } = selected;
-  const [label, setLabel] = useState44(event.label);
-  const [description, setDescription] = useState44(event.description ?? "");
-  useEffect34(() => setLabel(event.label), [event.label]);
-  useEffect34(() => setDescription(event.description ?? ""), [event.description]);
+  const [label, setLabel] = useState45(event.label);
+  const [description, setDescription] = useState45(event.description ?? "");
+  useEffect35(() => setLabel(event.label), [event.label]);
+  useEffect35(() => setDescription(event.description ?? ""), [event.description]);
   const update = (patch) => dispatch(patch);
   const commitLabel = () => {
     const next = label.trim();
@@ -26976,11 +27155,11 @@ function EventInspector({
   return /* @__PURE__ */ jsxs40("fieldset", { className: "squisq-ascii-timeline-inspector", disabled: !editable, children: [
     /* @__PURE__ */ jsxs40("legend", { children: [
       "Edit point ",
-      /* @__PURE__ */ jsx51("span", { children: selected.trackLabel })
+      /* @__PURE__ */ jsx52("span", { children: selected.trackLabel })
     ] }),
     /* @__PURE__ */ jsxs40("label", { children: [
-      /* @__PURE__ */ jsx51("span", { children: "Label" }),
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52("span", { children: "Label" }),
+      /* @__PURE__ */ jsx52(
         "input",
         {
           value: label,
@@ -27000,8 +27179,8 @@ function EventInspector({
       )
     ] }),
     /* @__PURE__ */ jsxs40("label", { className: "squisq-ascii-timeline-inspector-description", children: [
-      /* @__PURE__ */ jsx51("span", { children: "Callout text" }),
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52("span", { children: "Callout text" }),
+      /* @__PURE__ */ jsx52(
         "textarea",
         {
           rows: 2,
@@ -27022,7 +27201,7 @@ function EventInspector({
       )
     ] }),
     /* @__PURE__ */ jsxs40("label", { children: [
-      /* @__PURE__ */ jsx51("span", { children: "Label side" }),
+      /* @__PURE__ */ jsx52("span", { children: "Label side" }),
       /* @__PURE__ */ jsxs40(
         "select",
         {
@@ -27033,14 +27212,14 @@ function EventInspector({
             patch: { side: event_.target.value }
           }),
           children: [
-            /* @__PURE__ */ jsx51("option", { value: "above", children: "Above" }),
-            /* @__PURE__ */ jsx51("option", { value: "below", children: "Below" })
+            /* @__PURE__ */ jsx52("option", { value: "above", children: "Above" }),
+            /* @__PURE__ */ jsx52("option", { value: "below", children: "Below" })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxs40("label", { children: [
-      /* @__PURE__ */ jsx51("span", { children: "Marker" }),
+      /* @__PURE__ */ jsx52("span", { children: "Marker" }),
       /* @__PURE__ */ jsxs40(
         "select",
         {
@@ -27051,15 +27230,15 @@ function EventInspector({
             patch: { marker: event_.target.value }
           }),
           children: [
-            /* @__PURE__ */ jsx51("option", { value: "filled", children: "Filled dot" }),
-            /* @__PURE__ */ jsx51("option", { value: "hollow", children: "Hollow dot" }),
-            /* @__PURE__ */ jsx51("option", { value: "diamond", children: "Diamond" })
+            /* @__PURE__ */ jsx52("option", { value: "filled", children: "Filled dot" }),
+            /* @__PURE__ */ jsx52("option", { value: "hollow", children: "Hollow dot" }),
+            /* @__PURE__ */ jsx52("option", { value: "diamond", children: "Diamond" })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxs40("label", { className: "squisq-ascii-timeline-checkbox", children: [
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(
         "input",
         {
           type: "checkbox",
@@ -27071,7 +27250,7 @@ function EventInspector({
           })
         }
       ),
-      /* @__PURE__ */ jsx51("span", { children: "Show callout" })
+      /* @__PURE__ */ jsx52("span", { children: "Show callout" })
     ] }),
     /* @__PURE__ */ jsxs40(
       "button",
@@ -27082,7 +27261,7 @@ function EventInspector({
         title: canDelete ? "Delete point" : "A timeline needs at least one point",
         onClick: onDelete,
         children: [
-          /* @__PURE__ */ jsx51(Icon, { icon: "fa-solid fa-trash" }),
+          /* @__PURE__ */ jsx52(Icon, { icon: "fa-solid fa-trash" }),
           " Delete point"
         ]
       }
@@ -27116,7 +27295,7 @@ function navigateTrackPoints(event) {
 }
 // src/timeline/TimelineViewExtension.ts
-var TIMELINE_VIEW_KEY = new PluginKey8("squisq-timeline-view");
+var TIMELINE_VIEW_KEY = new PluginKey9("squisq-timeline-view");
 var detectCache3 = /* @__PURE__ */ new WeakMap();
 var parseCache3 = /* @__PURE__ */ new WeakMap();
 function fenceLangOf4(node2) {
@@ -27161,26 +27340,26 @@ function parseTimelineForNode(node2) {
 function findTimelineBlockPos(editor, blockId) {
   return TIMELINE_VIEW_KEY.getState(editor.state)?.entries.find((entry) => entry.id === blockId)?.pos ?? null;
 }
-function buildDecorations7(doc, entries, editor) {
+function buildDecorations8(doc, entries, editor) {
   const decorations = [];
   for (const entry of entries) {
     const node2 = doc.nodeAt(entry.pos);
     if (!node2 || node2.type.name !== "codeBlock") continue;
     decorations.push(
-      Decoration8.node(entry.pos, entry.pos + node2.nodeSize, {
+      Decoration9.node(entry.pos, entry.pos + node2.nodeSize, {
         class: "squisq-ascii-timeline-fence-hidden"
       })
     );
     decorations.push(
-      Decoration8.widget(
+      Decoration9.widget(
         entry.pos + node2.nodeSize,
         () => {
           const container = document.createElement("div");
           container.className = "squisq-ascii-timeline-widget-host";
           container.contentEditable = "false";
           containFenceWidgetEvents(container);
-          const root = createRoot6(container);
-          root.render(createElement12(TimelineEditorWidget, { editor, blockId: entry.id }));
+          const root = createRoot7(container);
+          root.render(createElement13(TimelineEditorWidget, { editor, blockId: entry.id }));
           container.__squisqTimelineRoot = root;
           return container;
         },
@@ -27196,9 +27375,9 @@ function buildDecorations7(doc, entries, editor) {
       )
     );
   }
-  return DecorationSet8.create(doc, decorations);
+  return DecorationSet9.create(doc, decorations);
 }
-function applyState6(tr, previous, editor, doc) {
+function applyState7(tr, previous, editor, doc) {
   if (!tr.docChanged) return previous;
   const mapped = mapFenceEntries(tr, previous.entries, doc);
   let seq = previous.seq;
@@ -27211,9 +27390,9 @@ function applyState6(tr, previous, editor, doc) {
     entries.push({ id: knownId ?? `timeline-${++seq}`, pos });
     return false;
   });
-  return { entries, seq, decorations: buildDecorations7(doc, entries, editor) };
+  return { entries, seq, decorations: buildDecorations8(doc, entries, editor) };
 }
-var TimelineViewExtension = Extension8.create({
+var TimelineViewExtension = Extension9.create({
   name: "squisqTimelineView",
   addOptions() {
     return { enabled: true };
@@ -27222,7 +27401,7 @@ var TimelineViewExtension = Extension8.create({
     const editor = this.editor;
     if (this.options.enabled === false) return [];
     return [
-      new Plugin8({
+      new Plugin9({
         key: TIMELINE_VIEW_KEY,
         state: {
           init: (_config, state) => {
@@ -27237,14 +27416,14 @@ var TimelineViewExtension = Extension8.create({
             return {
               entries,
               seq,
-              decorations: buildDecorations7(state.doc, entries, editor)
+              decorations: buildDecorations8(state.doc, entries, editor)
             };
           },
-          apply: (tr, previous, _oldState, newState) => applyState6(tr, previous, editor, newState.doc)
+          apply: (tr, previous, _oldState, newState) => applyState7(tr, previous, editor, newState.doc)
         },
         props: {
           decorations(state) {
-            return this.getState(state)?.decorations ?? DecorationSet8.empty;
+            return this.getState(state)?.decorations ?? DecorationSet9.empty;
           }
         }
       })
@@ -27254,9 +27433,9 @@ var TimelineViewExtension = Extension8.create({
 // src/timeline/timelineData.ts
 function useTimelineData(editor, blockId) {
-  const [version, setVersion] = useState45(0);
+  const [version, setVersion] = useState46(0);
   const dataCache = useRef37(null);
-  useEffect35(() => {
+  useEffect36(() => {
     const onEditorChange = () => setVersion((value) => value + 1);
     editor.on("transaction", onEditorChange);
     editor.on("update", onEditorChange);
@@ -27265,7 +27444,7 @@ function useTimelineData(editor, blockId) {
       editor.off("update", onEditorChange);
     };
   }, [editor]);
-  return useMemo34(() => {
+  return useMemo35(() => {
     const pos = findTimelineBlockPos(editor, blockId);
     if (pos === null) return null;
     const node2 = editor.state.doc.nodeAt(pos);
@@ -27291,9 +27470,9 @@ function shouldPasteAsTimelineFence(text) {
 }
 // src/BlockPropertiesPopover.tsx
-import { useEffect as useEffect36, useId as useId13, useRef as useRef38, useState as useState46 } from "react";
+import { useEffect as useEffect37, useId as useId13, useRef as useRef38, useState as useState47 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
-import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT = ".squisq-transition-flyout";
 function BlockPropertiesPopover({
   anchorRect,
@@ -27307,13 +27486,13 @@ function BlockPropertiesPopover({
 }) {
   const panelRef = useRef38(null);
   const panelId = `squisq-block-props-portal-${useId13().replace(/:/g, "")}`;
-  const [inner, setInner] = useState46(blockAttrs);
-  const [templateInner, setTemplateInner] = useState46(templateParams);
-  const [style, setStyle] = useState46(() => computeStyle(anchorRect));
-  useEffect36(() => {
+  const [inner, setInner] = useState47(blockAttrs);
+  const [templateInner, setTemplateInner] = useState47(templateParams);
+  const [style, setStyle] = useState47(() => computeStyle(anchorRect));
+  useEffect37(() => {
     requestAnimationFrame(() => setStyle(computeStyle(anchorRect, panelRef.current)));
   }, [anchorRect]);
-  useEffect36(() => {
+  useEffect37(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -27359,8 +27538,8 @@ function BlockPropertiesPopover({
         style: { ...style, ...blockAccentStyle2(accentColor) },
         children: [
           /* @__PURE__ */ jsxs41("div", { className: "squisq-block-props-row", children: [
-            /* @__PURE__ */ jsx52("span", { className: "squisq-block-props-label", children: "Transition" }),
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx53("span", { className: "squisq-block-props-label", children: "Transition" }),
+            /* @__PURE__ */ jsx53(
               TransitionPicker,
               {
                 value: transition,
@@ -27371,8 +27550,8 @@ function BlockPropertiesPopover({
             )
           ] }),
           /* @__PURE__ */ jsxs41("div", { className: "squisq-block-props-row", children: [
-            /* @__PURE__ */ jsx52("span", { className: "squisq-block-props-label", children: "Duration" }),
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx53("span", { className: "squisq-block-props-label", children: "Duration" }),
+            /* @__PURE__ */ jsx53(
               NumberField,
               {
                 value: duration,
@@ -27384,8 +27563,8 @@ function BlockPropertiesPopover({
             )
           ] }),
           /* @__PURE__ */ jsxs41("div", { className: "squisq-block-props-row", children: [
-            /* @__PURE__ */ jsx52("span", { className: "squisq-block-props-label", children: "Start time" }),
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx53("span", { className: "squisq-block-props-label", children: "Start time" }),
+            /* @__PURE__ */ jsx53(
               NumberField,
               {
                 value: startTime,
@@ -27413,7 +27592,7 @@ function NumberField({
   onChange
 }) {
   return /* @__PURE__ */ jsxs41("div", { className: "squisq-block-props-numfield", children: [
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53(
       "input",
       {
         type: "number",
@@ -27426,7 +27605,7 @@ function NumberField({
         "aria-label": ariaLabel
       }
     ),
-    /* @__PURE__ */ jsx52("span", { className: "squisq-block-props-unit", children: unit })
+    /* @__PURE__ */ jsx53("span", { className: "squisq-block-props-unit", children: unit })
   ] });
 }
 function computeStyle(rect, element) {
@@ -27475,7 +27654,7 @@ function persistFromWrite(bodyMd, state) {
 }
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback38, useEffect as useEffect40, useMemo as useMemo35, useRef as useRef40, useState as useState50 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect41, useMemo as useMemo36, useRef as useRef40, useState as useState51 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection } from "@tiptap/pm/state";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -27509,13 +27688,16 @@ function createMermaidThemeStore(initialTheme) {
   };
 }
+// src/WysiwygEditor.tsx
+import { fenceRendererLangs } from "@bendyline/squisq/fence";
 // src/blockTagActivity.ts
-import { Extension as Extension9 } from "@tiptap/core";
-import { Plugin as Plugin9, PluginKey as PluginKey9 } from "@tiptap/pm/state";
-import { Decoration as Decoration9, DecorationSet as DecorationSet9 } from "@tiptap/pm/view";
+import { Extension as Extension10 } from "@tiptap/core";
+import { Plugin as Plugin10, PluginKey as PluginKey10 } 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";
-var BLOCK_TAG_ACTIVITY_KEY = new PluginKey9(
+var BLOCK_TAG_ACTIVITY_KEY = new PluginKey10(
   "squisq-block-tag-activity"
 );
 function isHeadingElement(element) {
@@ -27565,7 +27747,7 @@ function validHeadingPosition(doc, position) {
   if (position === null) return null;
   return doc.nodeAt(position)?.type.name === "heading" ? position : null;
 }
-function buildDecorations8(doc, selectedPosition, hoveredPosition) {
+function buildDecorations9(doc, selectedPosition, hoveredPosition) {
   const classesByPosition = /* @__PURE__ */ new Map();
   if (selectedPosition !== null) {
     classesByPosition.set(selectedPosition, [BLOCK_TAG_SELECTED_CLASS]);
@@ -27580,10 +27762,10 @@ function buildDecorations8(doc, selectedPosition, hoveredPosition) {
     const node2 = doc.nodeAt(position);
     if (!node2 || node2.type.name !== "heading") continue;
     decorations.push(
-      Decoration9.node(position, position + node2.nodeSize, { class: classes.join(" ") })
+      Decoration10.node(position, position + node2.nodeSize, { class: classes.join(" ") })
     );
   }
-  return decorations.length > 0 ? DecorationSet9.create(doc, decorations) : DecorationSet9.empty;
+  return decorations.length > 0 ? DecorationSet10.create(doc, decorations) : DecorationSet10.empty;
 }
 function createPluginState(doc, selectionFrom, hoveredPosition) {
   const selectedPosition = findOwningHeadingPosition(doc, selectionFrom);
@@ -27591,7 +27773,7 @@ function createPluginState(doc, selectionFrom, hoveredPosition) {
   return {
     selectedPosition,
     hoveredPosition: validHoveredPosition,
-    decorations: buildDecorations8(doc, selectedPosition, validHoveredPosition)
+    decorations: buildDecorations9(doc, selectedPosition, validHoveredPosition)
   };
 }
 function nextHoveredPosition(transaction, previousPosition, doc) {
@@ -27618,11 +27800,11 @@ function setHoveredPosition(view, hoveredPosition) {
     view.state.tr.setMeta(BLOCK_TAG_ACTIVITY_KEY, { hoveredPosition }).setMeta("addToHistory", false)
   );
 }
-var BlockTagActivityExtension = Extension9.create({
+var BlockTagActivityExtension = Extension10.create({
   name: "squisqBlockTagActivity",
   addProseMirrorPlugins() {
     return [
-      new Plugin9({
+      new Plugin10({
         key: BLOCK_TAG_ACTIVITY_KEY,
         state: {
           init: (_config, state) => createPluginState(state.doc, state.selection.from, null),
@@ -27634,7 +27816,7 @@ var BlockTagActivityExtension = Extension9.create({
         },
         props: {
           decorations(state) {
-            return this.getState(state)?.decorations ?? DecorationSet9.empty;
+            return this.getState(state)?.decorations ?? DecorationSet10.empty;
           },
           handleDOMEvents: {
             mouseover(view, event) {
@@ -27708,7 +27890,7 @@ var InlineIcon = Node2.create({
 });
 // src/ImageNodeView.tsx
-import { useEffect as useEffect37, useRef as useRef39, useState as useState47 } from "react";
+import { useEffect as useEffect38, useRef as useRef39, useState as useState48 } from "react";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import Image from "@tiptap/extension-image";
@@ -27724,20 +27906,20 @@ function normalizeMalformedAssetUrl(src) {
 }
 // src/ImageNodeView.tsx
-import { Fragment as Fragment16, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
 function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
   const { src, alt, title, width } = node2.attrs;
   const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
-  const [resolvedSrc, setResolvedSrc] = useState47(src);
-  const [hovered, setHovered] = useState47(false);
+  const [resolvedSrc, setResolvedSrc] = useState48(src);
+  const [hovered, setHovered] = useState48(false);
   const imgRef = useRef39(null);
-  const [previewWidth, setPreviewWidth] = useState47(null);
+  const [previewWidth, setPreviewWidth] = useState48(null);
   const isThumbnail = imageDisplayMode === "thumbnail";
   const isEditable = editor?.isEditable ?? true;
   const normalizedRelativePath = normalizeMalformedAssetUrl(src);
   const isRelative = src && !src.startsWith("blob:") && !src.startsWith("http") && !src.startsWith("data:") && !src.startsWith("/");
   const resolveAs = normalizedRelativePath ?? (isRelative ? src : null);
-  useEffect37(() => {
+  useEffect38(() => {
     if (!mediaProvider || !resolveAs) {
       setResolvedSrc(src);
       return;
@@ -27818,7 +28000,7 @@ function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "img",
           {
             ref: imgRef,
@@ -27847,13 +28029,13 @@ function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
             title: "Edit image",
             "aria-label": `Edit image ${alt || src}`,
             children: [
-              /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", style: { fontSize: "0.95em", lineHeight: 1 }, children: "\u270E" }),
-              /* @__PURE__ */ jsx53("span", { children: "Edit" })
+              /* @__PURE__ */ jsx54("span", { "aria-hidden": "true", style: { fontSize: "0.95em", lineHeight: 1 }, children: "\u270E" }),
+              /* @__PURE__ */ jsx54("span", { children: "Edit" })
             ]
           }
         ),
         showResize && /* @__PURE__ */ jsxs42(Fragment16, { children: [
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             "span",
             {
               className: "squisq-image-resize-handle",
@@ -27916,15 +28098,15 @@ var ImageWithMediaProvider = Image.extend({
 // src/tiptap/TiptapVideo.tsx
 import { Node as Node3, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
-import { useEffect as useEffect39, useState as useState49 } from "react";
+import { useEffect as useEffect40, useState as useState50 } from "react";
 // src/tiptap/useResolvedMediaSrc.ts
-import { useEffect as useEffect38, useState as useState48 } from "react";
+import { useEffect as useEffect39, useState as useState49 } from "react";
 function useResolvedMediaSrc(src) {
   const { mediaProvider, mediaRevision } = useEditorContext();
-  const [resolved, setResolved] = useState48(src);
+  const [resolved, setResolved] = useState49(src);
   const isRelative = !!src && !src.startsWith("blob:") && !src.startsWith("http:") && !src.startsWith("https:") && !src.startsWith("data:") && !src.startsWith("/");
-  useEffect38(() => {
+  useEffect39(() => {
     if (!mediaProvider || !isRelative) {
       setResolved(src);
       return;
@@ -27946,7 +28128,7 @@ function useResolvedMediaSrc(src) {
 }
 // src/tiptap/TiptapVideo.tsx
-import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
 var PLACEMENT_OPTIONS = [
   { value: "content", label: "In layout", title: "Participate in the block content layout" },
   {
@@ -27975,9 +28157,9 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
   const placement = normalizeVideoPlacement(rawPlacement);
   const lockToBlock = normalizeLockToBlock(rawLockToBlock);
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
-  const [audioOnly, setAudioOnly] = useState49(false);
+  const [audioOnly, setAudioOnly] = useState50(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
-  useEffect39(() => {
+  useEffect40(() => {
     setAudioOnly(false);
   }, [resolvedSrc]);
   const handleLoadedMetadata = (event) => {
@@ -27999,8 +28181,8 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             "aria-label": "Video placement",
             contentEditable: false,
             children: [
-              /* @__PURE__ */ jsx54("span", { className: "squisq-video-placement-label", children: "Video" }),
-              PLACEMENT_OPTIONS.map((option) => /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx55("span", { className: "squisq-video-placement-label", children: "Video" }),
+              PLACEMENT_OPTIONS.map((option) => /* @__PURE__ */ jsx55(
                 "button",
                 {
                   type: "button",
@@ -28013,7 +28195,7 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
                 },
                 option.value
               )),
-              placement !== "content" && /* @__PURE__ */ jsx54(
+              placement !== "content" && /* @__PURE__ */ jsx55(
                 "button",
                 {
                   type: "button",
@@ -28029,7 +28211,7 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             ]
           }
         ),
-        audioOnly ? /* @__PURE__ */ jsx54(
+        audioOnly ? /* @__PURE__ */ jsx55(
           "audio",
           {
             "data-drag-handle": true,
@@ -28038,7 +28220,7 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             controls,
             preload: "metadata"
           }
-        ) : /* @__PURE__ */ jsx54(
+        ) : /* @__PURE__ */ jsx55(
           "video",
           {
             "data-drag-handle": true,
@@ -28157,11 +28339,11 @@ var TiptapVideo = Node3.create({
 // src/tiptap/TiptapAudio.tsx
 import { Node as Node4, mergeAttributes as mergeAttributes3 } from "@tiptap/core";
 import { NodeViewWrapper as NodeViewWrapper3, ReactNodeViewRenderer as ReactNodeViewRenderer3 } from "@tiptap/react";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function AudioNodeView({ node: node2 }) {
   const { src, controls } = node2.attrs;
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
-  return /* @__PURE__ */ jsx55(NodeViewWrapper3, { as: "span", className: "squisq-inline-audio-player", "data-drag-handle": true, draggable: true, children: /* @__PURE__ */ jsx55("audio", { src: resolvedSrc || void 0, controls, preload: "metadata" }) });
+  return /* @__PURE__ */ jsx56(NodeViewWrapper3, { as: "span", className: "squisq-inline-audio-player", "data-drag-handle": true, draggable: true, children: /* @__PURE__ */ jsx56("audio", { src: resolvedSrc || void 0, controls, preload: "metadata" }) });
 }
 var TiptapAudio = Node4.create({
   name: "audio",
@@ -28222,7 +28404,7 @@ import { profileBlockContents as profileBlockContents2, recommendTemplatesForBlo
 // src/MentionExtension.tsx
 import Mention from "@tiptap/extension-mention";
-import { PluginKey as PluginKey10 } from "@tiptap/pm/state";
+import { PluginKey as PluginKey11 } from "@tiptap/pm/state";
 var FALLBACK_KIND = "mention";
 function buildMentionExtension(getProvider) {
   return Mention.configure({
@@ -28278,7 +28460,7 @@ function buildMentionExtension(getProvider) {
           char: "@",
           // Custom plugin key so the mention suggestion doesn't collide
           // with any future `:` or `/` popovers.
-          pluginKey: new PluginKey10("mentionSuggestion"),
+          pluginKey: new PluginKey11("mentionSuggestion"),
           command: ({
             editor,
             range,
@@ -28585,7 +28767,7 @@ function safeFontFamily(value) {
 // src/WysiwygEditor.tsx
 import { useEditor as useEditor3 } from "@tiptap/react";
-import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 var LinkWithTitle = Link2.extend({
   addAttributes() {
     return {
@@ -28625,6 +28807,7 @@ function WysiwygEditor({
     setTiptapEditor,
     mediaProvider,
     mentionProvider,
+    fenceRenderers,
     blockTagVisibility,
     themeInheritance,
     colorScheme,
@@ -28643,11 +28826,11 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect40(() => {
+  useEffect41(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const [designerState, setDesignerState] = useState50(
+  const [designerState, setDesignerState] = useState51(
     null
   );
   const handleDesignerSave = useCallback38(
@@ -28663,15 +28846,23 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef40(mentionProvider);
-  useEffect40(() => {
+  useEffect41(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
-  const resolvedPlaceholder = useMemo35(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
+  const fenceRenderersRef = useRef40(fenceRenderers);
+  useEffect41(() => {
+    fenceRenderersRef.current = fenceRenderers;
+  }, [fenceRenderers]);
+  const activeThemeRef = useRef40(activeTheme);
+  useEffect41(() => {
+    activeThemeRef.current = activeTheme;
+  }, [activeTheme]);
+  const resolvedPlaceholder = useMemo36(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
   const isExternalUpdate = useRef40(false);
   const lastSourceRef = useRef40(editorSource);
   const pendingLocalSourcesRef = useRef40([]);
   const mediaProviderRef = useRef40(mediaProvider);
-  useEffect40(() => {
+  useEffect41(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const frontmatterRef = useRef40(stripFrontmatter(editorSource).frontmatter);
@@ -28688,7 +28879,7 @@ function WysiwygEditor({
     }
   }
   const submitOnEnterRef = useRef40(submitOnEnter);
-  useEffect40(() => {
+  useEffect41(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -28705,7 +28896,13 @@ function WysiwygEditor({
       BlockTagActivityExtension,
       AsciiDiagramExtension.configure({ textChannel: sceneTextChannel }),
       MermaidDiagramExtension.configure({ themeStore: mermaidThemeStore }),
-      CodeSnippetExtension,
+      CodeSnippetExtension.configure({
+        reservedLanguages: fenceRendererLangs(fenceRenderers ?? void 0)
+      }),
+      HostFenceExtension.configure({
+        renderers: () => fenceRenderersRef.current ?? void 0,
+        theme: () => activeThemeRef.current ?? void 0
+      }),
       RepairableDiagramExtension.configure({ onRepair: applyRepairCommand }),
       TimelineViewExtension,
       TreeViewExtension,
@@ -28870,25 +29067,25 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect40(() => {
+  useEffect41(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef40(null);
-  const [badgeMenu, setBadgeMenu] = useState50(null);
-  const [propsMenu, setPropsMenu] = useState50(null);
+  const [badgeMenu, setBadgeMenu] = useState51(null);
+  const [propsMenu, setPropsMenu] = useState51(null);
   const closeBadgeMenu = useCallback38(() => {
     setBadgeMenu(null);
     requestAnimationFrame(() => {
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -28944,7 +29141,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!editor) return;
     const pendingIndex = pendingLocalSourcesRef.current.lastIndexOf(editorSource);
     if (pendingIndex >= 0) {
@@ -28976,7 +29173,7 @@ function WysiwygEditor({
     lastSourceRef.current = editorSource;
     isExternalUpdate.current = false;
   }, [editorSource, editor, wrapPolicyEnabled]);
-  const badgePreviewSource = useMemo35(() => {
+  const badgePreviewSource = useMemo36(() => {
     if (!badgeMenu) return void 0;
     try {
       const previewDoc = markdownToDoc2(parseMarkdown6(editorSource), { autoTemplates: false });
@@ -29001,7 +29198,7 @@ function WysiwygEditor({
     previewSettings?.activeTheme,
     previewSettings?.activeViewport
   ]);
-  const themeStyle = useMemo35(() => {
+  const themeStyle = useMemo36(() => {
     if (!activeTheme) return {};
     const out = {
       "--squisq-block-props-accent": activeTheme.colors.primary
@@ -29027,7 +29224,7 @@ function WysiwygEditor({
     }
     return out;
   }, [activeTheme, themeInheritance]);
-  return /* @__PURE__ */ jsx56(CustomTemplateProvider, { docTemplates, onDocTemplatesChange, children: /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsx57(CustomTemplateProvider, { docTemplates, onDocTemplatesChange, children: /* @__PURE__ */ jsxs44(
     "div",
     {
       className: `squisq-wysiwyg-container${className ? ` ${className}` : ""}`,
@@ -29043,8 +29240,8 @@ function WysiwygEditor({
       "data-theme-inheritance": themeInheritance,
       ref: containerRef,
       children: [
-        /* @__PURE__ */ jsx56(EditorContent2, { editor, style: { height: "100%" } }),
-        badgeMenu && /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx57(EditorContent2, { editor, style: { height: "100%" } }),
+        badgeMenu && /* @__PURE__ */ jsx57(
           TemplateBadgePopover,
           {
             anchorRect: badgeMenu.rect,
@@ -29072,7 +29269,7 @@ function WysiwygEditor({
             onClose: closeBadgeMenu
           }
         ),
-        propsMenu && /* @__PURE__ */ jsx56(
+        propsMenu && /* @__PURE__ */ jsx57(
           BlockPropertiesPopover,
           {
             anchorRect: propsMenu.rect,
@@ -29104,7 +29301,7 @@ function WysiwygEditor({
             onClose: () => setPropsMenu(null)
           }
         ),
-        designerState && /* @__PURE__ */ jsx56(
+        designerState && /* @__PURE__ */ jsx57(
           TemplateDesigner,
           {
             initial: designerState.initial,
@@ -29201,7 +29398,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo37, useRef as useRef41, useState as useState52 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo38, useRef as useRef41, useState as useState53 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -29213,14 +29410,14 @@ import { extractPlainText as extractPlainText3, getChildren } from "@bendyline/s
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 // src/useHeadingLayout.ts
-import { useCallback as useCallback39, useEffect as useEffect41, useMemo as useMemo36, useState as useState51 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect42, useMemo as useMemo37, useState as useState52 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
-  const flatBlocks = useMemo36(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
-  const [entries, setEntries] = useState51([]);
-  const [pageEdges, setPageEdges] = useState51(null);
-  useEffect41(() => {
+  const flatBlocks = useMemo37(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
+  const [entries, setEntries] = useState52([]);
+  const [pageEdges, setPageEdges] = useState52(null);
+  useEffect42(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -29288,7 +29485,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -29349,7 +29546,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect41(() => {
+  useEffect42(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -29411,7 +29608,7 @@ function sameEntries(a, b) {
 }
 // src/InlinePreviewGutter.tsx
-import { Fragment as Fragment17, jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
 function isAnnotated(block) {
   const annotation = block.sourceHeading?.templateAnnotation;
   if (!annotation) return false;
@@ -29581,7 +29778,7 @@ function InlinePreviewGutter({
   const { entries: headingEntries, scrollToBlock } = useHeadingLayout(gutterRef);
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme ?? DEFAULT_THEME5;
-  const items = useMemo37(() => {
+  const items = useMemo38(() => {
     if (!doc || !doc.blocks.length) return [];
     const flat = flattenBlocks4(doc.blocks);
     const totalBlocks = flat.length;
@@ -29638,12 +29835,12 @@ function InlinePreviewGutter({
     });
     return result;
   }, [doc, viewport, activeTheme]);
-  const connectorTops = useMemo37(() => {
+  const connectorTops = useMemo38(() => {
     const m = /* @__PURE__ */ new Map();
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState52(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState53(/* @__PURE__ */ new Map());
   useLayoutEffect8(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
@@ -29698,7 +29895,7 @@ function InlinePreviewGutter({
       "data-testid": "inline-preview-gutter",
       "aria-label": "Block previews",
       children: [
-        headingEntries.length > 0 && /* @__PURE__ */ jsx57(
+        headingEntries.length > 0 && /* @__PURE__ */ jsx58(
           "div",
           {
             className: "squisq-inline-preview-connectors",
@@ -29715,7 +29912,7 @@ function InlinePreviewGutter({
             children: headingEntries.map((ex, i) => {
               const EXTENT_GAP = 6;
               const height = Math.max(2, ex.bottom - ex.top - EXTENT_GAP);
-              return /* @__PURE__ */ jsx57(
+              return /* @__PURE__ */ jsx58(
                 "div",
                 {
                   className: `squisq-inline-preview-extent${ex.annotated ? "" : " squisq-inline-preview-extent--untagged"}`,
@@ -29731,7 +29928,7 @@ function InlinePreviewGutter({
             })
           }
         ),
-        items.length > 0 && /* @__PURE__ */ jsx57(
+        items.length > 0 && /* @__PURE__ */ jsx58(
           "svg",
           {
             className: "squisq-inline-preview-connector-svg",
@@ -29754,7 +29951,7 @@ function InlinePreviewGutter({
               const x2 = connectorWidth + CARD_LEFT_INSET;
               const y2 = cardTop + CARD_LABEL_OFFSET;
               return /* @__PURE__ */ jsxs45("g", { children: [
-                /* @__PURE__ */ jsx57(
+                /* @__PURE__ */ jsx58(
                   "line",
                   {
                     x1,
@@ -29766,13 +29963,13 @@ function InlinePreviewGutter({
                     strokeLinecap: "round"
                   }
                 ),
-                /* @__PURE__ */ jsx57("circle", { cx: x1, cy: y1, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" }),
-                /* @__PURE__ */ jsx57("circle", { cx: x2, cy: y2, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" })
+                /* @__PURE__ */ jsx58("circle", { cx: x1, cy: y1, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" }),
+                /* @__PURE__ */ jsx58("circle", { cx: x2, cy: y2, r: "4", fill: "#6366f1", stroke: "#ffffff", strokeWidth: "2" })
               ] }, item.id);
             })
           }
         ),
-        /* @__PURE__ */ jsx57(MediaContext4.Provider, { value: mediaProvider ?? null, children: items.map((item) => {
+        /* @__PURE__ */ jsx58(MediaContext4.Provider, { value: mediaProvider ?? null, children: items.map((item) => {
           const top = positions.get(item.id);
           const hidden = top == null;
           return /* @__PURE__ */ jsxs45(
@@ -29790,20 +29987,20 @@ function InlinePreviewGutter({
               onClick: () => scrollToBlock(item.block),
               children: [
                 /* @__PURE__ */ jsxs45("div", { className: "squisq-inline-preview-card-label", children: [
-                  /* @__PURE__ */ jsx57("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
+                  /* @__PURE__ */ jsx58("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
                   item.headingText && /* @__PURE__ */ jsxs45(Fragment17, { children: [
-                    /* @__PURE__ */ jsx57("span", { className: "squisq-inline-preview-card-sep", children: "\u2014" }),
-                    /* @__PURE__ */ jsx57("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
+                    /* @__PURE__ */ jsx58("span", { className: "squisq-inline-preview-card-sep", children: "\u2014" }),
+                    /* @__PURE__ */ jsx58("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx57(
+                /* @__PURE__ */ jsx58(
                   "div",
                   {
                     className: "squisq-inline-preview-card-svg",
                     style: {
                       aspectRatio: `${viewport.width} / ${viewport.height}`
                     },
-                    children: /* @__PURE__ */ jsx57(
+                    children: /* @__PURE__ */ jsx58(
                       BlockRenderer3,
                       {
                         block: item.block,
@@ -29826,346 +30023,20 @@ function InlinePreviewGutter({
 // src/buildPreviewDoc.ts
 import {
-  coerceTemplateParams,
-  deriveTemplateInputs as deriveTemplateInputs3,
-  flattenRenderableBlocks,
-  hasTemplate as hasTemplate2
+  buildPreviewDoc,
+  documentTitleFromFileName
 } from "@bendyline/squisq/doc";
-import { extractPlainText as extractPlainText4, KNOWN_BLOCK_META_KEYS as KNOWN_BLOCK_META_KEYS2 } from "@bendyline/squisq/markdown";
-import { getChildren as getChildren2 } from "@bendyline/squisq/markdown";
-import { iconMarker } from "@bendyline/squisq/icon-marker";
-function extractRichText(node2) {
-  if (node2.type === "inlineIcon") {
-    const icon = node2;
-    return iconMarker(icon.family, icon.name);
-  }
-  if ("value" in node2 && typeof node2.value === "string") {
-    return node2.value;
-  }
-  const children = getChildren2(node2);
-  const separator = node2.type === "list" || node2.type === "listItem" ? "\n" : "";
-  return children.map(extractRichText).join(separator);
-}
-function extractBodyText(contents) {
-  if (!contents || contents.length === 0) return "";
-  const parts = [];
-  for (const node2 of contents) {
-    if (node2.type === "code" && node2.lang?.trim().toLowerCase() === "mermaid") continue;
-    parts.push(extractRichText(node2));
-  }
-  return parts.join("\n").trim();
-}
-function parseDim2(raw) {
-  if (raw === void 0) return void 0;
-  const n = parseFloat(raw);
-  return Number.isFinite(n) && n > 0 ? n : void 0;
-}
-function extractBlockImages2(contents) {
-  if (!contents || contents.length === 0) return [];
-  const images = [];
-  function walkHtml(node2) {
-    if (!node2 || typeof node2 !== "object") return;
-    const n = node2;
-    if (n.type === "htmlElement" && n.tagName.toLowerCase() === "img") {
-      const attrs = n.attributes;
-      const src = attrs?.src;
-      if (typeof src === "string" && src) {
-        images.push({
-          src,
-          alt: typeof attrs?.alt === "string" ? attrs.alt : "",
-          width: parseDim2(attrs?.width),
-          height: parseDim2(attrs?.height)
-        });
-      }
-    }
-    if (Array.isArray(n.children)) {
-      for (const child of n.children) walkHtml(child);
-    }
-  }
-  function walk(node2) {
-    if ("type" in node2 && node2.type === "image" && "url" in node2) {
-      const img = node2;
-      if (img.url) {
-        images.push({ src: img.url, alt: img.alt ?? "" });
-      }
-    }
-    if ("type" in node2 && (node2.type === "htmlBlock" || node2.type === "htmlInline")) {
-      const html = node2;
-      for (const child of html.htmlChildren ?? []) walkHtml(child);
-    }
-    for (const child of getChildren2(node2)) {
-      walk(child);
-    }
-  }
-  for (const node2 of contents) {
-    walk(node2);
-  }
-  return images;
-}
-function collectAllDocImages(blocks) {
-  const seen = /* @__PURE__ */ new Set();
-  const images = [];
-  function walkBlocks(blockList) {
-    for (const block of blockList) {
-      for (const img of extractBlockImages2(block.contents)) {
-        if (!seen.has(img.src)) {
-          seen.add(img.src);
-          images.push(img);
-        }
-      }
-      if (block.children) {
-        walkBlocks(block.children);
-      }
-    }
-  }
-  walkBlocks(blocks);
-  return images;
-}
-function extractListItems3(contents) {
-  if (!contents) return [];
-  const items = [];
-  for (const node2 of contents) {
-    if (node2.type === "list") {
-      for (const item of node2.children) {
-        const text = extractPlainText4(item).trim();
-        if (text) items.push(text);
-      }
-    }
-  }
-  return items;
-}
-function getTemplateDefaults2(templateName, headingText2, block) {
-  const body = extractBodyText(block.contents);
-  switch (templateName) {
-    case "statHighlight":
-      return deriveTemplateInputs3(templateName, headingText2, block.contents) ?? {
-        stat: headingText2,
-        description: body || headingText2
-      };
-    case "quote":
-    case "fullBleedQuote":
-    case "pullQuote":
-      return { quote: body || headingText2 };
-    case "factCard":
-      return { fact: headingText2, explanation: body || headingText2 };
-    case "comparisonBar":
-      return { leftLabel: "A", leftValue: 60, rightLabel: "B", rightValue: 40 };
-    case "list": {
-      const items = extractListItems3(block.contents);
-      return { items: items.length > 0 ? items : ["Item 1", "Item 2", "Item 3"] };
-    }
-    case "definitionCard":
-      return { term: headingText2, definition: body || headingText2 };
-    case "dateEvent":
-      return { date: headingText2, description: body || headingText2 };
-    case "leftFeature":
-    case "rightFeature": {
-      const images = extractBlockImages2(block.contents);
-      const img = images[0];
-      return {
-        imageSrc: img?.src ?? "",
-        imageAlt: img?.alt || headingText2,
-        imageWidth: img?.width,
-        imageHeight: img?.height,
-        title: headingText2,
-        body: body || headingText2
-      };
-    }
-    default:
-      return {};
-  }
-}
-function blockToSlide(block, index2, knownTemplates, documentTitle2) {
-  const headingText2 = block.sourceHeading ? extractPlainText4(block.sourceHeading) : block.title || documentTitle2 || "";
-  const implicitSectionHeader = block.template === "sectionHeader" && block.autoTemplate !== true && !!block.sourceHeading && !block.sourceHeading.templateAnnotation?.template;
-  const requestedTemplate = implicitSectionHeader ? "content" : block.template ?? "content";
-  const isCustomTemplate = knownTemplates?.has(requestedTemplate) ?? false;
-  const recognized = hasTemplate2(requestedTemplate) || isCustomTemplate;
-  const template = recognized ? requestedTemplate : "sectionHeader";
-  const defaults = getTemplateDefaults2(template, headingText2, block);
-  const templateOverrides = omitStringBlockMeta(block.templateOverrides);
-  const coercedTemplateOverrides = templateOverrides ? coerceTemplateParams(template, templateOverrides).input : void 0;
-  const {
-    id: _id,
-    startTime: _st,
-    duration: _d,
-    audioSegment: _as,
-    layers: _l,
-    transition: _tr,
-    template: _t,
-    title: _ti,
-    children: _c,
-    contents: _co,
-    sourceHeading: _sh,
-    templateOverrides: _to,
-    templateData: _td,
-    ...extraFields
-  } = block;
-  return {
-    id: block.id,
-    template,
-    duration: block.duration,
-    audioSegment: 0,
-    // Respect the block's authored transition (set via the toolbar / on-canvas
-    // properties palette → `{…}` block attrs). Only fall back to a default fade
-    // for blocks past the first when the author hasn't chosen one; the first
-    // block has no previous slide to transition in from.
-    transition: block.transition ?? (index2 > 0 ? { type: "fade", duration: 0.5 } : void 0),
-    title: headingText2,
-    // Preserve body nodes on every slide. Built-in templates ignore this
-    // structural field, while the canonical materializer uses it to retain
-    // authored rich elements (Mermaid fences today; other media can follow)
-    // independently of the selected visual template.
-    ...block.contents ? { contents: block.contents } : {},
-    // Custom templates additionally consume child blocks through tokens.
-    ...isCustomTemplate && block.children ? { children: block.children } : {},
-    ...defaults,
-    ...extraFields,
-    // Structured body data (```json data fences, GFM tables for dataTable)
-    // carries typed values; `{[…]}` string overrides win last so an explicit
-    // annotation param can still pin any field.
-    //
-    // Block-meta keys (transition, startTime, duration, …) are the exception:
-    // they were already coerced to typed block fields above (e.g.
-    // `block.transition` → `{ type, duration, direction }`). Their raw string
-    // form also rides along in `templateData`/`templateOverrides` because the
-    // author wrote them inside `{[…]}`; left un-stripped, that string would
-    // spread back over the typed value here and clobber it — turning
-    // `transition=vortex` into the string `"vortex"`, which the player can't
-    // animate. Omit them from the content spreads so the typed fields win.
-    ...omitBlockMeta(block.templateData),
-    ...coercedTemplateOverrides
-  };
-}
-var BLOCK_META_KEYS2 = new Set(Object.keys(KNOWN_BLOCK_META_KEYS2));
-function omitBlockMeta(data) {
-  if (!data) return data;
-  let hit = false;
-  const out = {};
-  for (const key of Object.keys(data)) {
-    if (BLOCK_META_KEYS2.has(key)) {
-      hit = true;
-      continue;
-    }
-    out[key] = data[key];
-  }
-  return hit ? out : data;
-}
-function omitStringBlockMeta(data) {
-  if (!data) return data;
-  let hit = false;
-  const out = {};
-  for (const key of Object.keys(data)) {
-    if (BLOCK_META_KEYS2.has(key)) {
-      hit = true;
-      continue;
-    }
-    out[key] = data[key];
-  }
-  return hit ? out : data;
-}
-var IMAGE_MOTIONS = [
-  "zoomIn",
-  "zoomOut",
-  "panLeft",
-  "panRight"
-];
-function documentTitleFromFileName(fileName) {
-  if (!fileName) return "";
-  const base = fileName.split(/[\\/]/).pop() ?? "";
-  return base.replace(/\.[^.]+$/, "").trim();
-}
-function resolveDocumentTitle(doc, provided) {
-  const frontmatterTitle = doc.frontmatter?.title;
-  if (typeof frontmatterTitle === "string" && frontmatterTitle.trim()) {
-    return frontmatterTitle.trim();
-  }
-  return provided?.trim() ?? "";
-}
-function buildPreviewDoc(doc, options) {
-  const flat = flattenRenderableBlocks(doc.blocks);
-  const allImages = collectAllDocImages(doc.blocks);
-  const usedImageSrcs = /* @__PURE__ */ new Set();
-  const knownTemplates = doc.customTemplates ? new Set(doc.customTemplates.map((d) => d.name)) : void 0;
-  const documentTitle2 = resolveDocumentTitle(doc, options?.documentTitle);
-  const slides = [];
-  let motionIndex = 0;
-  for (let i = 0; i < flat.length; i++) {
-    const block = flat[i];
-    const blockImages = extractBlockImages2(block.contents);
-    const slide = blockToSlide(block, i, knownTemplates, documentTitle2);
-    if (blockImages.length > 0 && slide.template === "sectionHeader") {
-      const img = blockImages[0];
-      usedImageSrcs.add(img.src);
-      slide.template = "imageWithCaption";
-      slide.imageSrc = img.src;
-      slide.imageAlt = img.alt;
-      slide.caption = slide.title;
-      slide.captionPosition = "bottom";
-      slide.ambientMotion = IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length];
-    } else if (blockImages.length > 0) {
-      const img = blockImages[0];
-      usedImageSrcs.add(img.src);
-      if (!slide.accentImage) {
-        slide.accentImage = {
-          src: img.src,
-          alt: img.alt,
-          position: "left-strip",
-          ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length]
-        };
-      }
-    }
-    slides.push(slide);
-  }
-  const unusedImages = allImages.filter((img) => !usedImageSrcs.has(img.src));
-  if (unusedImages.length > 0 && slides.length > 0) {
-    const interval = Math.max(2, Math.floor(slides.length / (unusedImages.length + 1)));
-    let insertOffset = 0;
-    for (let imgIdx = 0; imgIdx < unusedImages.length; imgIdx++) {
-      const insertAt = Math.min((imgIdx + 1) * interval + insertOffset, slides.length);
-      const img = unusedImages[imgIdx];
-      slides.splice(insertAt, 0, {
-        id: `img-interleave-${imgIdx}`,
-        template: "imageWithCaption",
-        duration: 5,
-        audioSegment: 0,
-        imageSrc: img.src,
-        imageAlt: img.alt,
-        ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length],
-        transition: { type: "fade", duration: 0.5 }
-      });
-      insertOffset++;
-    }
-  }
-  let t = 0;
-  for (const slide of slides) {
-    slide.startTime = t;
-    t += slide.duration;
-  }
-  const audio = doc.audio?.segments?.length > 0 ? doc.audio : {
-    segments: t > 0 ? [{ src: "", name: "preview", duration: t, startTime: 0 }] : []
-  };
-  return {
-    // Preserve document-wide capabilities (custom themes, persistent layers,
-    // scheduled media, frontmatter, captions, and future schema fields).
-    // Preview preparation should replace only the slide/timing projection.
-    ...doc,
-    duration: t,
-    blocks: slides,
-    audio
-  };
-}
 // src/OutlinePanel.tsx
 import {
   useCallback as useCallback40,
-  useEffect as useEffect42,
-  useMemo as useMemo38,
+  useEffect as useEffect43,
+  useMemo as useMemo39,
   useRef as useRef42,
-  useState as useState53
+  useState as useState54
 } from "react";
-import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate3 } from "@bendyline/squisq/doc";
-import { extractPlainText as extractPlainText5 } from "@bendyline/squisq/markdown";
+import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate2 } from "@bendyline/squisq/doc";
+import { extractPlainText as extractPlainText4 } from "@bendyline/squisq/markdown";
 // src/outlineSource.ts
 import { parseMarkdown as parseMarkdown7 } from "@bendyline/squisq/markdown";
@@ -30264,7 +30135,7 @@ function splitTrailingLineGap(value) {
 }
 // src/OutlinePanel.tsx
-import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
 var OUTLINE_RESPONSIVE_WIDTH = "clamp(260px, 30vw, 460px)";
 var OUTLINE_DRAG_MIME = "application/x-squisq-outline-section";
 function OutlinePanel({ width, className, readOnly = false }) {
@@ -30281,9 +30152,9 @@ function OutlinePanel({ width, className, readOnly = false }) {
   const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef42(null);
-  const [draggedBlockId, setDraggedBlockId] = useState53(null);
-  const [dropTarget, setDropTarget] = useState53(null);
-  const blockModeActiveId = useMemo38(() => {
+  const [draggedBlockId, setDraggedBlockId] = useState54(null);
+  const [dropTarget, setDropTarget] = useState54(null);
+  const blockModeActiveId = useMemo39(() => {
     if (layoutMode !== "block" || activeBlockStartLine == null || !doc) return null;
     const match = flattenBlocks5(doc.blocks).find(
       (b) => b.sourceHeading?.position?.start.line === activeBlockStartLine
@@ -30382,7 +30253,7 @@ function OutlinePanel({ width, className, readOnly = false }) {
     overflow: "auto",
     ...accentColor ? { ["--squisq-outline-accent"]: accentColor } : {}
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "aside",
     {
       ref: paneRef,
@@ -30390,7 +30261,7 @@ function OutlinePanel({ width, className, readOnly = false }) {
       style: paneStyle,
       "data-testid": "outline-panel",
       "aria-label": "Document outline",
-      children: isEmpty2 ? /* @__PURE__ */ jsx58("div", { className: "squisq-outline-empty", children: /* @__PURE__ */ jsx58("p", { children: "Add a heading to populate the outline." }) }) : /* @__PURE__ */ jsx58("ul", { className: "squisq-outline-tree", role: "tree", children: doc.blocks.map((b) => /* @__PURE__ */ jsx58(
+      children: isEmpty2 ? /* @__PURE__ */ jsx59("div", { className: "squisq-outline-empty", children: /* @__PURE__ */ jsx59("p", { children: "Add a heading to populate the outline." }) }) : /* @__PURE__ */ jsx59("ul", { className: "squisq-outline-tree", role: "tree", children: doc.blocks.map((b) => /* @__PURE__ */ jsx59(
         OutlineNode,
         {
           block: b,
@@ -30428,10 +30299,10 @@ function OutlineNode({
   const heading = block.sourceHeading;
   const depth = heading?.depth ?? 1;
   const headingLine2 = heading?.position?.start.line;
-  const text = heading ? extractPlainText5(heading).trim() : "";
+  const text = heading ? extractPlainText4(heading).trim() : "";
   const annotation = heading?.templateAnnotation;
   const tplName = annotation?.template;
-  const showChip = tplName && hasTemplate3(tplName);
+  const showChip = tplName && hasTemplate2(tplName);
   const isActive = block.id === activeBlockId;
   const canPromote = !!heading && depth > 1;
   const canDemote = !!heading && depth < 6;
@@ -30464,21 +30335,21 @@ function OutlineNode({
               onDragEnd,
               title: text || "(empty heading)",
               children: [
-                canDrag && /* @__PURE__ */ jsx58("span", { className: "squisq-outline-drag-handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxs46("svg", { width: "8", height: "12", viewBox: "0 0 8 12", children: [
-                  /* @__PURE__ */ jsx58("circle", { cx: "2", cy: "2", r: "1", fill: "currentColor" }),
-                  /* @__PURE__ */ jsx58("circle", { cx: "6", cy: "2", r: "1", fill: "currentColor" }),
-                  /* @__PURE__ */ jsx58("circle", { cx: "2", cy: "6", r: "1", fill: "currentColor" }),
-                  /* @__PURE__ */ jsx58("circle", { cx: "6", cy: "6", r: "1", fill: "currentColor" }),
-                  /* @__PURE__ */ jsx58("circle", { cx: "2", cy: "10", r: "1", fill: "currentColor" }),
-                  /* @__PURE__ */ jsx58("circle", { cx: "6", cy: "10", r: "1", fill: "currentColor" })
+                canDrag && /* @__PURE__ */ jsx59("span", { className: "squisq-outline-drag-handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxs46("svg", { width: "8", height: "12", viewBox: "0 0 8 12", children: [
+                  /* @__PURE__ */ jsx59("circle", { cx: "2", cy: "2", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx59("circle", { cx: "6", cy: "2", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx59("circle", { cx: "2", cy: "6", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx59("circle", { cx: "6", cy: "6", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx59("circle", { cx: "2", cy: "10", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx59("circle", { cx: "6", cy: "10", r: "1", fill: "currentColor" })
                 ] }) }),
-                /* @__PURE__ */ jsx58("span", { className: "squisq-outline-row-text", children: text || "(untitled)" }),
-                showChip && /* @__PURE__ */ jsx58("span", { className: "squisq-outline-template-chip", children: templateLabel(tplName) })
+                /* @__PURE__ */ jsx59("span", { className: "squisq-outline-row-text", children: text || "(untitled)" }),
+                showChip && /* @__PURE__ */ jsx59("span", { className: "squisq-outline-template-chip", children: templateLabel(tplName) })
               ]
             }
           ),
           heading && /* @__PURE__ */ jsxs46("span", { className: "squisq-outline-row-actions", children: [
-            /* @__PURE__ */ jsx58(
+            /* @__PURE__ */ jsx59(
               "button",
               {
                 type: "button",
@@ -30487,7 +30358,7 @@ function OutlineNode({
                 title: "Promote heading",
                 disabled: mutationsDisabled || !canPromote,
                 onClick: () => onChangeLevel(block, -1),
-                children: /* @__PURE__ */ jsx58("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx58(
+                children: /* @__PURE__ */ jsx59("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx59(
                   "path",
                   {
                     d: "M6.5 2.5 L3 5 L6.5 7.5",
@@ -30500,7 +30371,7 @@ function OutlineNode({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx58(
+            /* @__PURE__ */ jsx59(
               "button",
               {
                 type: "button",
@@ -30509,7 +30380,7 @@ function OutlineNode({
                 title: "Demote heading",
                 disabled: mutationsDisabled || !canDemote,
                 onClick: () => onChangeLevel(block, 1),
-                children: /* @__PURE__ */ jsx58("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx58(
+                children: /* @__PURE__ */ jsx59("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx59(
                   "path",
                   {
                     d: "M3.5 2.5 L7 5 L3.5 7.5",
@@ -30526,7 +30397,7 @@ function OutlineNode({
         ]
       }
     ),
-    block.children && block.children.length > 0 && /* @__PURE__ */ jsx58("ul", { className: "squisq-outline-tree", children: block.children.map((child) => /* @__PURE__ */ jsx58(
+    block.children && block.children.length > 0 && /* @__PURE__ */ jsx59("ul", { className: "squisq-outline-tree", children: block.children.map((child) => /* @__PURE__ */ jsx59(
       OutlineNode,
       {
         block: child,
@@ -30548,12 +30419,12 @@ function OutlineNode({
 }
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
-  const flatBlocks = useMemo38(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
-  const [activeId, setActiveId] = useState53(null);
-  useEffect42(() => {
+  const flatBlocks = useMemo39(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
+  const [activeId, setActiveId] = useState54(null);
+  useEffect43(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -30575,7 +30446,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, flatBlocks]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -30626,7 +30497,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback42, useEffect as useEffect44, useMemo as useMemo40, useRef as useRef44, useState as useState54 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect45, useMemo as useMemo41, useRef as useRef44, useState as useState55 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 // src/codeContext/diffContextSections.ts
@@ -30750,8 +30621,8 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback41, useEffect as useEffect43, useMemo as useMemo39, useRef as useRef43 } from "react";
-import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
+import { useCallback as useCallback41, useEffect as useEffect44, useMemo as useMemo40, useRef as useRef43 } from "react";
+import { jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
   expanded,
@@ -30762,15 +30633,15 @@ function CodeContextSectionView({
   onMeasure
 }) {
   const rootRef = useRef43(null);
-  const stripNodes = useMemo39(
+  const stripNodes = useMemo40(
     () => parseMarkdown8(section.summaryMarkdown).children,
     [section.summaryMarkdown]
   );
-  const bodyNodes = useMemo39(
+  const bodyNodes = useMemo40(
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect43(() => {
+  useEffect44(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -30826,12 +30697,12 @@ function CodeContextSectionView({
               "aria-expanded": expanded,
               onClick: () => onToggle(section.id),
               children: [
-                /* @__PURE__ */ jsx59("span", { className: "squisq-ccx-chevron", "aria-hidden": "true", children: expanded ? "\u25BE" : "\u25B8" }),
-                /* @__PURE__ */ jsx59("span", { className: "squisq-ccx-strip-text", children: /* @__PURE__ */ jsx59(MarkdownRenderer, { nodes: stripNodes, ...linkSchemes ? { linkSchemes } : {} }) })
+                /* @__PURE__ */ jsx60("span", { className: "squisq-ccx-chevron", "aria-hidden": "true", children: expanded ? "\u25BE" : "\u25B8" }),
+                /* @__PURE__ */ jsx60("span", { className: "squisq-ccx-strip-text", children: /* @__PURE__ */ jsx60(MarkdownRenderer, { nodes: stripNodes, ...linkSchemes ? { linkSchemes } : {} }) })
               ]
             }
           ),
-          expanded && (bodyNodes ? /* @__PURE__ */ jsx59("div", { className: "squisq-ccx-body", children: /* @__PURE__ */ jsx59(MarkdownRenderer, { nodes: bodyNodes, ...linkSchemes ? { linkSchemes } : {} }) }) : /* @__PURE__ */ jsx59("div", { className: "squisq-ccx-body squisq-ccx-body--loading", children: "Loading\u2026" }))
+          expanded && (bodyNodes ? /* @__PURE__ */ jsx60("div", { className: "squisq-ccx-body", children: /* @__PURE__ */ jsx60(MarkdownRenderer, { nodes: bodyNodes, ...linkSchemes ? { linkSchemes } : {} }) }) : /* @__PURE__ */ jsx60("div", { className: "squisq-ccx-body squisq-ccx-body--loading", children: "Loading\u2026" }))
         ]
       }
     )
@@ -30839,14 +30710,14 @@ function CodeContextSectionView({
 }
 // src/codeContext/CodeContextZones.tsx
-import { Fragment as Fragment18, jsx as jsx60 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx61 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState54(null);
-  const [, setZonesVersion] = useState54(0);
-  const [expandedById, setExpandedById] = useState54({});
+  const [manager, setManager] = useState55(null);
+  const [, setZonesVersion] = useState55(0);
+  const [expandedById, setExpandedById] = useState55({});
   const seenIds = useRef44(/* @__PURE__ */ new Set());
-  useEffect44(() => {
+  useEffect45(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -30859,7 +30730,7 @@ function CodeContextZones({ options }) {
   }, [monacoEditor]);
   const fileTop = options.fileTop;
   const sections = options.sections;
-  const resolved = useMemo40(() => {
+  const resolved = useMemo41(() => {
     const out = [];
     if (fileTop) {
       out.push({ spec: { id: fileTop.id, line: 0, ordinal: 0 }, section: fileTop });
@@ -30869,7 +30740,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect44(() => {
+  useEffect45(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -30908,11 +30779,11 @@ function CodeContextZones({ options }) {
     [monacoEditor]
   );
   if (!manager) return null;
-  return /* @__PURE__ */ jsx60(Fragment18, { children: resolved.map(({ section }) => {
+  return /* @__PURE__ */ jsx61(Fragment18, { children: resolved.map(({ section }) => {
     const domNode = manager.getDomNode(section.id);
     if (!domNode) return null;
     return createPortal10(
-      /* @__PURE__ */ jsx60(
+      /* @__PURE__ */ jsx61(
         CodeContextSectionView,
         {
           section,
@@ -30932,7 +30803,7 @@ function CodeContextZones({ options }) {
 }
 // src/BlockCardView.tsx
-import { jsx as jsx61, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs48 } from "react/jsx-runtime";
 function BlockCardView({
   active = true,
   blockCount,
@@ -30953,7 +30824,7 @@ function BlockCardView({
       className: `squisq-block-card-frame${active ? " squisq-block-card" : ""}${className ? ` ${className}` : ""}`,
       "data-testid": active ? "block-card-view" : void 0,
       children: [
-        /* @__PURE__ */ jsx61("div", { className: `squisq-block-card-frame-body${active ? " squisq-block-card-body" : ""}`, children }),
+        /* @__PURE__ */ jsx62("div", { className: `squisq-block-card-frame-body${active ? " squisq-block-card-body" : ""}`, children }),
         active && /* @__PURE__ */ jsxs48("div", { className: "squisq-block-card-nav", role: "toolbar", "aria-label": "Block navigation", children: [
           /* @__PURE__ */ jsxs48(
             "button",
@@ -30965,7 +30836,7 @@ function BlockCardView({
               "aria-label": "Previous block",
               "data-tooltip": "Previous block",
               children: [
-                /* @__PURE__ */ jsx61("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx61(
+                /* @__PURE__ */ jsx62("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx62(
                   "path",
                   {
                     d: "M9 2.5 L4.5 7 L9 11.5",
@@ -30976,7 +30847,7 @@ function BlockCardView({
                     fill: "none"
                   }
                 ) }),
-                /* @__PURE__ */ jsx61("span", { children: "Previous" })
+                /* @__PURE__ */ jsx62("span", { children: "Previous" })
               ]
             }
           ),
@@ -30996,8 +30867,8 @@ function BlockCardView({
               "aria-label": "Next block",
               "data-tooltip": "Next block",
               children: [
-                /* @__PURE__ */ jsx61("span", { children: "Next" }),
-                /* @__PURE__ */ jsx61("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx61(
+                /* @__PURE__ */ jsx62("span", { children: "Next" }),
+                /* @__PURE__ */ jsx62("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx62(
                   "path",
                   {
                     d: "M5 2.5 L9.5 7 L5 11.5",
@@ -31020,7 +30891,7 @@ function BlockCardView({
               "aria-label": "Add block",
               "data-tooltip": "Add block after this one",
               children: [
-                /* @__PURE__ */ jsx61("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx61(
+                /* @__PURE__ */ jsx62("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: /* @__PURE__ */ jsx62(
                   "path",
                   {
                     d: "M7 3 L7 11 M3 7 L11 7",
@@ -31030,7 +30901,7 @@ function BlockCardView({
                     fill: "none"
                   }
                 ) }),
-                /* @__PURE__ */ jsx61("span", { children: "Add block" })
+                /* @__PURE__ */ jsx62("span", { children: "Add block" })
               ]
             }
           )
@@ -31305,7 +31176,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 // src/TimelineTrack.tsx
-import { useCallback as useCallback44, useEffect as useEffect47, useMemo as useMemo41, useRef as useRef47, useState as useState57 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect48, useMemo as useMemo42, useRef as useRef47, useState as useState58 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -31433,14 +31304,14 @@ function collectTimelinePlaybackSchedule(doc, scheduled) {
 import { memo } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
 import { BlockRenderer as BlockRenderer4, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var BlockThumbnail = memo(function BlockThumbnail2({
   visual,
   viewport = VIEWPORT_PRESETS5.landscape,
   basePath = "/",
   mediaProvider = null
 }) {
-  return /* @__PURE__ */ jsx62(MediaContext5.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx62(BlockRenderer4, { block: visual, blockTime: 0, basePath, viewport }) });
+  return /* @__PURE__ */ jsx63(MediaContext5.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx63(BlockRenderer4, { block: visual, blockTime: 0, basePath, viewport }) });
 });
 // src/resolveBlockVisual.ts
@@ -31464,7 +31335,7 @@ function resolveBlockVisual(doc, block, theme, viewport) {
 }
 // src/useTimelineClock.ts
-import { useCallback as useCallback43, useEffect as useEffect45, useRef as useRef45, useState as useState55 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect46, useRef as useRef45, useState as useState56 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -31484,8 +31355,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState55(0);
-  const [isPlaying, setIsPlaying] = useState55(false);
+  const [currentTime, setCurrentTime] = useState56(0);
+  const [isPlaying, setIsPlaying] = useState56(false);
   const rafRef = useRef45(null);
   const lastRef = useRef45(0);
   const currentTimeRef = useRef45(0);
@@ -31493,10 +31364,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef45(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect45(() => {
+  useEffect46(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -31558,9 +31429,9 @@ function timelineMediaLabel(src, kind) {
 }
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect46, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState56 } from "react";
+import { useEffect as useEffect47, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState57 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
-import { Fragment as Fragment19, jsx as jsx63, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
 function TimelineItemMenu({
   anchor,
   target,
@@ -31573,7 +31444,7 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef46(null);
-  const [style, setStyle] = useState56(() => menuStyle(anchor));
+  const [style, setStyle] = useState57(() => menuStyle(anchor));
   useLayoutEffect9(() => {
     const panel = panelRef.current;
     if (!panel) return;
@@ -31587,7 +31458,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect46(() => {
+  useEffect47(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -31619,10 +31490,10 @@ function TimelineItemMenu({
         style: { ...style, ...accentStyle(accentColor) },
         children: [
           /* @__PURE__ */ jsxs49("div", { className: "squisq-timeline-item-menu-header", children: [
-            /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-kind", children: target.kind === "block" ? "Block" : "Video" }),
-            /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-title", title: target.title, children: target.title })
+            /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-kind", children: target.kind === "block" ? "Block" : "Video" }),
+            /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-title", title: target.title, children: target.title })
           ] }),
-          target.kind === "block" ? /* @__PURE__ */ jsx63(
+          target.kind === "block" ? /* @__PURE__ */ jsx64(
             BlockMenu,
             {
               target,
@@ -31632,7 +31503,7 @@ function TimelineItemMenu({
               onStartTime: onBlockStartTime,
               onTransition: onBlockTransition
             }
-          ) : /* @__PURE__ */ jsx63(VideoMenu, { target, onPatch: onVideoPatch })
+          ) : /* @__PURE__ */ jsx64(VideoMenu, { target, onPatch: onVideoPatch })
         ]
       }
     ),
@@ -31647,12 +31518,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState56(target.explicitDuration);
-  const [duration, setDuration] = useState56(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState56(
+  const [explicitDuration, setExplicitDuration] = useState57(target.explicitDuration);
+  const [duration, setDuration] = useState57(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState57(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState56(target.transition);
+  const [transition, setTransition] = useState57(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -31665,7 +31536,7 @@ function BlockMenu({
   };
   return /* @__PURE__ */ jsxs49("div", { className: "squisq-timeline-item-menu-body", children: [
     /* @__PURE__ */ jsxs49("label", { className: "squisq-timeline-item-menu-check", children: [
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx64(
         "input",
         {
           type: "checkbox",
@@ -31673,10 +31544,10 @@ function BlockMenu({
           onChange: (event) => toggleAutotime(event.target.checked)
         }
       ),
-      /* @__PURE__ */ jsx63("span", { children: "Autotime block" })
+      /* @__PURE__ */ jsx64("span", { children: "Autotime block" })
     ] }),
-    /* @__PURE__ */ jsx63("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx64("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
+    /* @__PURE__ */ jsx64(
       MenuNumberField,
       {
         label: "Duration",
@@ -31690,7 +31561,7 @@ function BlockMenu({
         }
       }
     ),
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx64(
       MenuNumberField,
       {
         label: "Start time",
@@ -31704,8 +31575,8 @@ function BlockMenu({
       }
     ),
     /* @__PURE__ */ jsxs49("div", { className: "squisq-timeline-item-menu-row", children: [
-      /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-label", children: "Transition" }),
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-label", children: "Transition" }),
+      /* @__PURE__ */ jsx64(
         TransitionPicker,
         {
           value: transition,
@@ -31724,11 +31595,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  const [placement, setPlacement] = useState56(target.placement);
-  const [locked, setLocked] = useState56(target.lockToBlock);
-  const [pipSize, setPipSize] = useState56(target.pipSize ?? "");
-  const [pipShape, setPipShape] = useState56(target.pipShape ?? "");
-  const [pipPosition, setPipPosition] = useState56(target.pipPosition ?? "");
+  const [placement, setPlacement] = useState57(target.placement);
+  const [locked, setLocked] = useState57(target.lockToBlock);
+  const [pipSize, setPipSize] = useState57(target.pipSize ?? "");
+  const [pipShape, setPipShape] = useState57(target.pipShape ?? "");
+  const [pipPosition, setPipPosition] = useState57(target.pipPosition ?? "");
   const placed = placement === "picture-in-picture" || placement === "overlay";
   const placementOptions = [
     target.canUseContentPlacement ? { value: "content", label: "In layout" } : { value: "default", label: "Default" },
@@ -31737,14 +31608,14 @@ function VideoMenu({
   ];
   return /* @__PURE__ */ jsxs49("div", { className: "squisq-timeline-item-menu-body", children: [
     /* @__PURE__ */ jsxs49("div", { className: "squisq-timeline-item-menu-field", children: [
-      /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-label", children: "Placement" }),
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-label", children: "Placement" }),
+      /* @__PURE__ */ jsx64(
         "div",
         {
           className: "squisq-timeline-item-menu-segments",
           role: "group",
           "aria-label": "Video placement",
-          children: placementOptions.map((option) => /* @__PURE__ */ jsx63(
+          children: placementOptions.map((option) => /* @__PURE__ */ jsx64(
             "button",
             {
               type: "button",
@@ -31766,7 +31637,7 @@ function VideoMenu({
     ] }),
     placed && /* @__PURE__ */ jsxs49(Fragment19, { children: [
       /* @__PURE__ */ jsxs49("label", { className: "squisq-timeline-item-menu-check", children: [
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx64(
           "input",
           {
             type: "checkbox",
@@ -31780,11 +31651,11 @@ function VideoMenu({
             }
           }
         ),
-        /* @__PURE__ */ jsx63("span", { children: "Lock to block" })
+        /* @__PURE__ */ jsx64("span", { children: "Lock to block" })
       ] }),
       placement === "picture-in-picture" && /* @__PURE__ */ jsxs49(Fragment19, { children: [
         /* @__PURE__ */ jsxs49("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-label", children: "PIP size" }),
+          /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-label", children: "PIP size" }),
           /* @__PURE__ */ jsxs49(
             "select",
             {
@@ -31801,14 +31672,14 @@ function VideoMenu({
                   titleCase(target.defaultPipSize),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx63("option", { value: "small", children: "Small" }),
-                /* @__PURE__ */ jsx63("option", { value: "large", children: "Large" })
+                /* @__PURE__ */ jsx64("option", { value: "small", children: "Small" }),
+                /* @__PURE__ */ jsx64("option", { value: "large", children: "Large" })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs49("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-label", children: "PIP shape" }),
+          /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-label", children: "PIP shape" }),
           /* @__PURE__ */ jsxs49(
             "select",
             {
@@ -31825,14 +31696,14 @@ function VideoMenu({
                   titleCase(target.defaultPipShape),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx63("option", { value: "square", children: "Square" }),
-                /* @__PURE__ */ jsx63("option", { value: "wide", children: "Wide (16:9)" })
+                /* @__PURE__ */ jsx64("option", { value: "square", children: "Square" }),
+                /* @__PURE__ */ jsx64("option", { value: "wide", children: "Wide (16:9)" })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs49("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-label", children: "PIP position" }),
+          /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-label", children: "PIP position" }),
           /* @__PURE__ */ jsxs49(
             "select",
             {
@@ -31849,10 +31720,10 @@ function VideoMenu({
                   positionLabel(target.defaultPipPosition),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx63("option", { value: "top-left", children: "Top left" }),
-                /* @__PURE__ */ jsx63("option", { value: "top-right", children: "Top right" }),
-                /* @__PURE__ */ jsx63("option", { value: "bottom-left", children: "Bottom left" }),
-                /* @__PURE__ */ jsx63("option", { value: "bottom-right", children: "Bottom right" })
+                /* @__PURE__ */ jsx64("option", { value: "top-left", children: "Top left" }),
+                /* @__PURE__ */ jsx64("option", { value: "top-right", children: "Top right" }),
+                /* @__PURE__ */ jsx64("option", { value: "bottom-left", children: "Bottom left" }),
+                /* @__PURE__ */ jsx64("option", { value: "bottom-right", children: "Bottom right" })
               ]
             }
           )
@@ -31870,9 +31741,9 @@ function MenuNumberField({
   onChange
 }) {
   return /* @__PURE__ */ jsxs49("label", { className: "squisq-timeline-item-menu-field", children: [
-    /* @__PURE__ */ jsx63("span", { className: "squisq-timeline-item-menu-label", children: label }),
+    /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-item-menu-label", children: label }),
     /* @__PURE__ */ jsxs49("span", { className: "squisq-timeline-item-menu-number", children: [
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx64(
         "input",
         {
           type: "number",
@@ -31885,7 +31756,7 @@ function MenuNumberField({
           onChange: (event) => onChange(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx63("span", { children: "sec" })
+      /* @__PURE__ */ jsx64("span", { children: "sec" })
     ] })
   ] });
 }
@@ -31930,7 +31801,7 @@ function menuStyle(anchor, element) {
 }
 // src/TimelineTrack.tsx
-import { jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
 var PREVIEW_VIEWPORT = VIEWPORT_PRESETS6.landscape;
 var DEFAULT_PX_PER_SECOND = 18;
 var ZOOM_MIN = 4;
@@ -31953,9 +31824,9 @@ function TimelineVideoFilmstrip({
     FILMSTRIP_MAX_FRAMES,
     Math.max(1, Math.ceil(width / FILMSTRIP_FRAME_WIDTH))
   );
-  return /* @__PURE__ */ jsx64("div", { className: "squisq-timeline-video-filmstrip", "aria-hidden": "true", children: Array.from({ length: frameCount }, (_2, index2) => {
+  return /* @__PURE__ */ jsx65("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__ */ jsx64(
+    return /* @__PURE__ */ jsx65(
       "video",
       {
         src: resolvedSrc,
@@ -31998,14 +31869,14 @@ function TimelineTrack({
     colorScheme
   } = useEditorContext();
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState57(null);
-  const [itemMenu, setItemMenu] = useState57(null);
-  const [pxPerSecond, setPxPerSecond] = useState57(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = useState58(null);
+  const [itemMenu, setItemMenu] = useState58(null);
+  const [pxPerSecond, setPxPerSecond] = useState58(DEFAULT_PX_PER_SECOND);
   const scrollRef = useRef47(null);
-  const blocks = useMemo41(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
+  const blocks = useMemo42(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
   const previewTheme = previewSettings?.activeTheme ?? DEFAULT_THEME6;
-  const visualByBlock = useMemo41(() => {
+  const visualByBlock = useMemo42(() => {
     const map = /* @__PURE__ */ new Map();
     if (doc) {
       for (const b of blocks) {
@@ -32015,16 +31886,16 @@ function TimelineTrack({
     }
     return map;
   }, [doc, blocks, previewTheme]);
-  const derivedClips = useMemo41(
+  const derivedClips = useMemo42(
     () => doc ? resolveMediaSchedule2(doc) : [],
     [doc]
   );
   const clips = schedule ?? derivedClips;
-  const playbackClips = useMemo41(
+  const playbackClips = useMemo42(
     () => doc ? collectTimelinePlaybackSchedule(doc, clips) : clips,
     [clips, doc]
   );
-  const total = useMemo41(() => doc ? getDocPlaybackDuration(doc) : 0, [doc]);
+  const total = useMemo42(() => doc ? getDocPlaybackDuration(doc) : 0, [doc]);
   const width = Math.max(total * pxPerSecond, 200);
   const internalClock = useTimelineClock(total);
   const activeClock = clock ?? internalClock;
@@ -32033,8 +31904,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState57(false);
-  useEffect47(() => {
+  const [scrubbing, setScrubbing] = useState58(false);
+  useEffect48(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -32051,7 +31922,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [scrubbing, pxPerSecond, seek]);
-  const rawClipById = useMemo41(() => {
+  const rawClipById = useMemo42(() => {
     const map = /* @__PURE__ */ new Map();
     if (doc) {
       for (const b of flattenBlocks6(doc.blocks)) for (const m of b.media ?? []) map.set(m.id, m);
@@ -32072,7 +31943,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef47(null);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -32083,7 +31954,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -32131,8 +32002,8 @@ function TimelineTrack({
   );
   const zoomIn = useCallback44(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback44(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
-  const [viewportWidth, setViewportWidth] = useState57(0);
-  useEffect47(() => {
+  const [viewportWidth, setViewportWidth] = useState58(0);
+  useEffect48(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -32146,7 +32017,7 @@ function TimelineTrack({
   const dragRef = useRef47(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect47(() => {
+  useEffect48(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -32177,7 +32048,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback44(
@@ -32260,7 +32131,7 @@ function TimelineTrack({
   for (let t = 0; t <= rulerEnd + 1e-3 && ticks.length < 1e3; t += tickSeconds) ticks.push(t);
   return /* @__PURE__ */ jsxs50("div", { className: "squisq-timeline", style: { height }, "data-testid": "timeline-track", children: [
     /* @__PURE__ */ jsxs50("div", { className: "squisq-timeline-controls", children: [
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "button",
         {
           type: "button",
@@ -32277,7 +32148,7 @@ function TimelineTrack({
         " / ",
         formatClock2(total)
       ] }),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "button",
         {
           type: "button",
@@ -32289,7 +32160,7 @@ function TimelineTrack({
           children: "\u2212"
         }
       ),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "button",
         {
           type: "button",
@@ -32302,8 +32173,8 @@ function TimelineTrack({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx64("div", { className: "squisq-timeline-scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs50("div", { className: "squisq-timeline-inner", style: { width }, children: [
-      /* @__PURE__ */ jsx64("div", { className: "squisq-timeline-row squisq-timeline-row--blocks", children: blocks.map((b, i) => {
+    /* @__PURE__ */ jsx65("div", { className: "squisq-timeline-scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs50("div", { className: "squisq-timeline-inner", style: { width }, children: [
+      /* @__PURE__ */ jsx65("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);
@@ -32320,7 +32191,7 @@ function TimelineTrack({
               if (line != null) goToBlockByLine(line);
             },
             children: [
-              visualByBlock.has(b.id) && /* @__PURE__ */ jsx64("div", { className: "squisq-timeline-block-thumb", "aria-hidden": true, children: /* @__PURE__ */ jsx64(
+              visualByBlock.has(b.id) && /* @__PURE__ */ jsx65("div", { className: "squisq-timeline-block-thumb", "aria-hidden": true, children: /* @__PURE__ */ jsx65(
                 BlockThumbnail,
                 {
                   visual: visualByBlock.get(b.id),
@@ -32328,7 +32199,7 @@ function TimelineTrack({
                   mediaProvider
                 }
               ) }),
-              prev && headingLine(prev) != null && /* @__PURE__ */ jsx64(
+              prev && headingLine(prev) != null && /* @__PURE__ */ jsx65(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--left",
@@ -32349,8 +32220,8 @@ function TimelineTrack({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-block-label", children: b.title ?? b.id }),
-              line != null && /* @__PURE__ */ jsx64(
+              /* @__PURE__ */ jsx65("span", { className: "squisq-timeline-block-label", children: b.title ?? b.id }),
+              line != null && /* @__PURE__ */ jsx65(
                 "button",
                 {
                   type: "button",
@@ -32372,7 +32243,7 @@ function TimelineTrack({
                   children: "\u2026"
                 }
               ),
-              line != null && /* @__PURE__ */ jsx64(
+              line != null && /* @__PURE__ */ jsx65(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -32420,7 +32291,7 @@ function TimelineTrack({
               spillover: raw.spillover
             } : { kind: c.kind, src: c.src, clipStart: c.sourceIn };
           };
-          return /* @__PURE__ */ jsx64(
+          return /* @__PURE__ */ jsx65(
             "div",
             {
               className: "squisq-timeline-row squisq-timeline-row--media",
@@ -32457,7 +32328,7 @@ function TimelineTrack({
                     if (next) setMarkdownSource(next);
                   },
                   children: [
-                    c.kind === "video" && /* @__PURE__ */ jsx64(
+                    c.kind === "video" && /* @__PURE__ */ jsx65(
                       TimelineVideoFilmstrip,
                       {
                         src: c.src,
@@ -32466,8 +32337,8 @@ function TimelineTrack({
                         width: clipWidth
                       }
                     ),
-                    /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(c.src, c.kind) }),
-                    c.kind === "video" && c.sourceLine != null && /* @__PURE__ */ jsx64(
+                    /* @__PURE__ */ jsx65("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(c.src, c.kind) }),
+                    c.kind === "video" && c.sourceLine != null && /* @__PURE__ */ jsx65(
                       "button",
                       {
                         type: "button",
@@ -32493,7 +32364,7 @@ function TimelineTrack({
                         children: "\u2026"
                       }
                     ),
-                    editable && /* @__PURE__ */ jsx64(
+                    editable && /* @__PURE__ */ jsx65(
                       "span",
                       {
                         className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -32538,7 +32409,7 @@ function TimelineTrack({
               ...m.clipStart != null ? { clipStart: m.clipStart } : {},
               ...m.clipEnd != null ? { clipEnd: m.clipEnd } : {}
             };
-            return /* @__PURE__ */ jsx64(
+            return /* @__PURE__ */ jsx65(
               "div",
               {
                 className: "squisq-timeline-row squisq-timeline-row--media",
@@ -32565,7 +32436,7 @@ function TimelineTrack({
                       { onClick: () => selectClipAt(b.startTime, b.id) }
                     ),
                     children: [
-                      m.kind === "video" && /* @__PURE__ */ jsx64(
+                      m.kind === "video" && /* @__PURE__ */ jsx65(
                         TimelineVideoFilmstrip,
                         {
                           src: m.src,
@@ -32574,8 +32445,8 @@ function TimelineTrack({
                           width: clipWidth
                         }
                       ),
-                      /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(m.src, m.kind) }),
-                      m.kind === "video" && m.sourceLine != null && /* @__PURE__ */ jsx64(
+                      /* @__PURE__ */ jsx65("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(m.src, m.kind) }),
+                      m.kind === "video" && m.sourceLine != null && /* @__PURE__ */ jsx65(
                         "button",
                         {
                           type: "button",
@@ -32600,7 +32471,7 @@ function TimelineTrack({
                           children: "\u2026"
                         }
                       ),
-                      m.sourceLine != null && /* @__PURE__ */ jsx64(
+                      m.sourceLine != null && /* @__PURE__ */ jsx65(
                         "span",
                         {
                           className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -32622,7 +32493,7 @@ function TimelineTrack({
           })
         )
       ] }),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "div",
         {
           className: "squisq-timeline-row squisq-timeline-row--ruler",
@@ -32630,10 +32501,10 @@ function TimelineTrack({
             const rect = e2.currentTarget.getBoundingClientRect();
             seek((e2.clientX - rect.left) / pxPerSecond);
           },
-          children: ticks.map((t) => /* @__PURE__ */ jsx64("div", { className: "squisq-timeline-tick", style: { left: t * pxPerSecond }, children: /* @__PURE__ */ jsx64("span", { className: "squisq-timeline-tick-label", children: formatDur(t) }) }, t))
+          children: ticks.map((t) => /* @__PURE__ */ jsx65("div", { className: "squisq-timeline-tick", style: { left: t * pxPerSecond }, children: /* @__PURE__ */ jsx65("span", { className: "squisq-timeline-tick-label", children: formatDur(t) }) }, t))
         }
       ),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "div",
         {
           className: "squisq-timeline-playhead",
@@ -32645,11 +32516,11 @@ function TimelineTrack({
             pause();
             setScrubbing(true);
           },
-          children: /* @__PURE__ */ jsx64("div", { className: "squisq-timeline-playhead-knob" })
+          children: /* @__PURE__ */ jsx65("div", { className: "squisq-timeline-playhead-knob" })
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx64("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx64(MediaContext6.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx65("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx65(MediaContext6.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx65(
       MediaClipLayer,
       {
         schedule: playbackClips,
@@ -32658,7 +32529,7 @@ function TimelineTrack({
         basePath
       }
     ) }) }),
-    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx64(
+    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx65(
       TimelineItemMenu,
       {
         anchor: itemMenu.anchor,
@@ -32713,9 +32584,9 @@ function formatDur(seconds) {
 }
 // src/TimelineVideoPanel.tsx
-import { useMemo as useMemo42 } from "react";
+import { useMemo as useMemo43 } from "react";
 import { MediaClipLayer as MediaClipLayer2 } from "@bendyline/squisq-react";
-import { jsx as jsx65, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
 function TimelineVideoPanel({
   schedule,
   currentTime,
@@ -32723,7 +32594,7 @@ function TimelineVideoPanel({
   basePath = "/",
   onClose
 }) {
-  const videos = useMemo42(() => schedule.filter((clip) => clip.kind === "video"), [schedule]);
+  const videos = useMemo43(() => schedule.filter((clip) => clip.kind === "video"), [schedule]);
   const activeVideos = videos.filter(
     (clip) => currentTime >= clip.absoluteStart && currentTime < clip.absoluteEnd
   );
@@ -32736,10 +32607,10 @@ function TimelineVideoPanel({
       "aria-label": "Timeline video preview",
       children: [
         /* @__PURE__ */ jsxs51("header", { className: "squisq-timeline-video-header", children: [
-          /* @__PURE__ */ jsx65("span", { className: "squisq-timeline-video-title", children: "Video monitor" }),
-          /* @__PURE__ */ jsx65("span", { className: "squisq-timeline-video-label", title: activeLabel, children: activeLabel }),
-          /* @__PURE__ */ jsx65("span", { className: "squisq-timeline-video-time", children: formatClock3(currentTime) }),
-          onClose && /* @__PURE__ */ jsx65(
+          /* @__PURE__ */ jsx66("span", { className: "squisq-timeline-video-title", children: "Video monitor" }),
+          /* @__PURE__ */ jsx66("span", { className: "squisq-timeline-video-label", title: activeLabel, children: activeLabel }),
+          /* @__PURE__ */ jsx66("span", { className: "squisq-timeline-video-time", children: formatClock3(currentTime) }),
+          onClose && /* @__PURE__ */ jsx66(
             "button",
             {
               type: "button",
@@ -32751,8 +32622,8 @@ function TimelineVideoPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx65("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsxs51("div", { className: "squisq-timeline-video-stage", children: [
-          /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx66("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsxs51("div", { className: "squisq-timeline-video-stage", children: [
+          /* @__PURE__ */ jsx66(
             MediaClipLayer2,
             {
               schedule: videos,
@@ -32764,7 +32635,7 @@ function TimelineVideoPanel({
               muted: true
             }
           ),
-          activeVideos.length === 0 && /* @__PURE__ */ jsx65("div", { className: "squisq-timeline-video-empty", children: "Move the playhead onto a video clip" })
+          activeVideos.length === 0 && /* @__PURE__ */ jsx66("div", { className: "squisq-timeline-video-empty", children: "Move the playhead onto a video clip" })
         ] }) })
       ]
     }
@@ -32777,12 +32648,12 @@ function formatClock3(seconds) {
 }
 // src/TimelineCompositionPanel.tsx
-import { useMemo as useMemo43 } from "react";
+import { useMemo as useMemo44 } from "react";
 import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule as resolveMediaSchedule3 } from "@bendyline/squisq/schemas";
 import { DocPlayer } from "@bendyline/squisq-react";
 // src/usePreviewProjection.ts
-import { useEffect as useEffect48, useState as useState58 } from "react";
+import { useEffect as useEffect49, useState as useState59 } from "react";
 import { resolveAudioMapping } from "@bendyline/squisq/doc";
 import { applyTransform } from "@bendyline/squisq/transform";
 function hasEquivalentAudio(left, right) {
@@ -32802,8 +32673,8 @@ function preserveEquivalentAudio(previous, next) {
   };
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2) {
-  const [projection, setProjection] = useState58(null);
-  useEffect48(() => {
+  const [projection, setProjection] = useState59(null);
+  useEffect49(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -32837,7 +32708,7 @@ function usePreviewProjection(doc, transformStyle, workspaceContainer, documentT
 }
 // src/TimelineCompositionPanel.tsx
-import { jsx as jsx66, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
 function TimelineCompositionPanel({
   doc,
   clock,
@@ -32869,11 +32740,11 @@ function TimelineCompositionPanel({
   );
   const contentDoc = projection?.contentDoc ?? null;
   const playerDoc = projection?.playerDoc ?? null;
-  const totalDuration = useMemo43(
+  const totalDuration = useMemo44(
     () => playerDoc ? getDocPlaybackDuration2(playerDoc) : 0,
     [playerDoc]
   );
-  const effectiveVideoPresentation = useMemo43(() => {
+  const effectiveVideoPresentation = useMemo44(() => {
     if (!playerDoc) return activeVideoPresentation;
     const activeVideo = resolveMediaSchedule3(playerDoc).find(
       (clip) => clip.kind === "video" && clock.currentTime >= clip.absoluteStart && clock.currentTime < clip.absoluteEnd
@@ -32882,7 +32753,7 @@ function TimelineCompositionPanel({
     if (activeVideo?.placement === "overlay") return "full-frame";
     return activeVideoPresentation;
   }, [activeVideoPresentation, clock.currentTime, playerDoc]);
-  const audioController = useMemo43(
+  const audioController = useMemo44(
     () => ({
       currentTime: clock.currentTime,
       isPlaying: clock.isPlaying,
@@ -32908,11 +32779,11 @@ function TimelineCompositionPanel({
       "aria-label": "Timeline video composition preview",
       children: [
         /* @__PURE__ */ jsxs52("header", { className: "squisq-timeline-video-header", children: [
-          /* @__PURE__ */ jsx66("span", { className: "squisq-timeline-video-title", children: "Video composition" }),
-          /* @__PURE__ */ jsx66("span", { className: "squisq-timeline-video-label", children: formatPresentation(effectiveVideoPresentation) }),
-          /* @__PURE__ */ jsx66(PreviewToolbarControls, { displayMode: "video" }),
-          /* @__PURE__ */ jsx66("span", { className: "squisq-timeline-video-time", children: formatClock4(clock.currentTime) }),
-          onClose && /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx67("span", { className: "squisq-timeline-video-title", children: "Video composition" }),
+          /* @__PURE__ */ jsx67("span", { className: "squisq-timeline-video-label", children: formatPresentation(effectiveVideoPresentation) }),
+          /* @__PURE__ */ jsx67(PreviewToolbarControls, { displayMode: "video" }),
+          /* @__PURE__ */ jsx67("span", { className: "squisq-timeline-video-time", children: formatClock4(clock.currentTime) }),
+          onClose && /* @__PURE__ */ jsx67(
             "button",
             {
               type: "button",
@@ -32924,7 +32795,7 @@ function TimelineCompositionPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx66("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsx66("div", { className: "squisq-timeline-composition-stage", children: playerDoc ? /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsx67("div", { className: "squisq-timeline-composition-stage", children: playerDoc ? /* @__PURE__ */ jsx67(
           DocPlayer,
           {
             doc: playerDoc,
@@ -32950,7 +32821,7 @@ function TimelineCompositionPanel({
             enableSwipe: false,
             globalKeyboardShortcuts: false
           }
-        ) : /* @__PURE__ */ jsx66("div", { className: "squisq-timeline-video-empty", children: "Preparing video composition\u2026" }) }) })
+        ) : /* @__PURE__ */ jsx67("div", { className: "squisq-timeline-video-empty", children: "Preparing video composition\u2026" }) }) })
       ]
     }
   );
@@ -32967,7 +32838,7 @@ function formatPresentation(presentation) {
 }
 // src/TimelineToolbar.tsx
-import { jsx as jsx67, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs53 } from "react/jsx-runtime";
 function TimelineToolbar({
   literalVideoVisible,
   compositionVisible,
@@ -32984,7 +32855,7 @@ function TimelineToolbar({
       "aria-label": "Timeline view controls",
       "data-testid": "timeline-toolbar",
       children: [
-        /* @__PURE__ */ jsx67("span", { className: "squisq-timeline-toolbar-title", children: "Preview panes" }),
+        /* @__PURE__ */ jsx68("span", { className: "squisq-timeline-toolbar-title", children: "Preview panes" }),
         /* @__PURE__ */ jsxs53(
           "button",
           {
@@ -32997,7 +32868,7 @@ function TimelineToolbar({
             "data-tooltip": literalVideoVisible ? "Hide literal video" : "Show literal video",
             children: [
               /* @__PURE__ */ jsxs53("svg", { width: "15", height: "15", viewBox: "0 0 15 15", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx67(
+                /* @__PURE__ */ jsx68(
                   "rect",
                   {
                     x: "1.5",
@@ -33010,7 +32881,7 @@ function TimelineToolbar({
                     strokeWidth: "1.4"
                   }
                 ),
-                /* @__PURE__ */ jsx67(
+                /* @__PURE__ */ jsx68(
                   "path",
                   {
                     d: "M10 5.5 13.5 4v7L10 9.5z",
@@ -33021,7 +32892,7 @@ function TimelineToolbar({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx67("span", { children: "Video monitor" })
+              /* @__PURE__ */ jsx68("span", { children: "Video monitor" })
             ]
           }
         ),
@@ -33037,7 +32908,7 @@ function TimelineToolbar({
             "data-tooltip": compositionVisible ? "Hide video composition" : "Show video composition",
             children: [
               /* @__PURE__ */ jsxs53("svg", { width: "15", height: "15", viewBox: "0 0 15 15", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx67(
+                /* @__PURE__ */ jsx68(
                   "rect",
                   {
                     x: "1.5",
@@ -33050,10 +32921,10 @@ function TimelineToolbar({
                     strokeWidth: "1.4"
                   }
                 ),
-                /* @__PURE__ */ jsx67("path", { d: "M5 13h5M7.5 11v2", stroke: "currentColor", strokeWidth: "1.4" }),
-                /* @__PURE__ */ jsx67("path", { d: "m6.3 5 3 1.5-3 1.5z", fill: "currentColor" })
+                /* @__PURE__ */ jsx68("path", { d: "M5 13h5M7.5 11v2", stroke: "currentColor", strokeWidth: "1.4" }),
+                /* @__PURE__ */ jsx68("path", { d: "m6.3 5 3 1.5-3 1.5z", fill: "currentColor" })
               ] }),
-              /* @__PURE__ */ jsx67("span", { children: "Video composition" })
+              /* @__PURE__ */ jsx68("span", { children: "Video composition" })
             ]
           }
         )
@@ -33063,7 +32934,7 @@ function TimelineToolbar({
 }
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback45, useEffect as useEffect49, useMemo as useMemo44, useRef as useRef48, useState as useState59 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect50, useMemo as useMemo45, useRef as useRef48, useState as useState60 } from "react";
 import { parseMarkdown as parseMarkdown9 } from "@bendyline/squisq/markdown";
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -33098,7 +32969,7 @@ function isFontAwesomeRule(rule) {
 }
 // src/PlainHtmlPreview.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var cachedRender = null;
 var cachedRenderPromise = null;
 function loadRenderFn() {
@@ -33143,9 +33014,9 @@ function PlainHtmlPreview({
     },
     [onFrameChange]
   );
-  const mdDoc = useMemo44(() => parseMarkdown9(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState59(null);
-  useEffect49(() => {
+  const mdDoc = useMemo45(() => parseMarkdown9(markdown), [markdown]);
+  const [resolvedImages, setResolvedImages] = useState60(null);
+  useEffect50(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -33173,16 +33044,16 @@ function PlainHtmlPreview({
       cancelled = true;
     };
   }, [mdDoc, mediaProvider, mediaRevision]);
-  const mergedImages = useMemo44(() => {
+  const mergedImages = useMemo45(() => {
     if (!resolvedImages && !images) return void 0;
     const merged = /* @__PURE__ */ new Map();
     if (resolvedImages) for (const [k2, v2] of resolvedImages) merged.set(k2, v2);
     if (images) for (const [k2, v2] of images) merged.set(k2, v2);
     return merged;
   }, [resolvedImages, images]);
-  const iconsCss = useMemo44(() => collectInlineFontAwesomeCss(), []);
-  const [renderFn, setRenderFn] = useState59(() => cachedRender);
-  useEffect49(() => {
+  const iconsCss = useMemo45(() => collectInlineFontAwesomeCss(), []);
+  const [renderFn, setRenderFn] = useState60(() => cachedRender);
+  useEffect50(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -33192,7 +33063,7 @@ function PlainHtmlPreview({
       cancelled = true;
     };
   }, [renderFn]);
-  const html = useMemo44(
+  const html = useMemo45(
     () => renderFn ? renderFn(mdDoc, { title, images: mergedImages, theme, iconsCss }) : "",
     [renderFn, mdDoc, title, mergedImages, theme, iconsCss]
   );
@@ -33215,7 +33086,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect49(() => {
+  useEffect50(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -33311,11 +33182,11 @@ function PlainHtmlPreview({
       style2.remove();
     };
   }, [onCopyCode, showCodeCopyButton]);
-  useEffect49(() => {
+  useEffect50(() => {
     installFrameCodeCopyControls();
     return () => removeFrameCodeCopyControlsRef.current();
   }, [html, installFrameCodeCopyControls]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -33339,7 +33210,7 @@ function PlainHtmlPreview({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [globalKeyboardShortcuts]);
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "iframe",
     {
       ref: setIframeRef,
@@ -33394,7 +33265,7 @@ function collectImageRefs(doc) {
 }
 // src/PreviewPanel.tsx
-import { useState as useState62, useEffect as useEffect53, useMemo as useMemo48, useCallback as useCallback49, useRef as useRef52 } from "react";
+import { useState as useState63, useEffect as useEffect54, useMemo as useMemo49, useCallback as useCallback49, useRef as useRef52 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
 import { DocPlayer as DocPlayer2, LinearDocView as LinearDocView2, useMediaProvider as useMediaProvider2 } from "@bendyline/squisq-react";
 import { resolveTransformStyle as resolveTransformStyle2 } from "@bendyline/squisq/transform";
@@ -33533,15 +33404,15 @@ import {
   createContext as createContext5,
   useCallback as useCallback46,
   useContext as useContext5,
-  useEffect as useEffect50,
+  useEffect as useEffect51,
   useId as useId14,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo45,
+  useMemo as useMemo46,
   useRef as useRef49,
-  useState as useState60
+  useState as useState61
 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
-import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs54 } from "react/jsx-runtime";
 var PresentationModeContext = createContext5(null);
 function usePresentationMode() {
   const value = useContext5(PresentationModeContext);
@@ -33555,6 +33426,25 @@ function usePresentationModeOptional() {
 }
 var POPUP_WIDTH = 1280;
 var POPUP_HEIGHT = 720;
+var FULLSCREEN_RELEASE_TIMEOUT_MS = 4e3;
+function waitForFullscreenRelease(ownerDocument, root, timeoutMs) {
+  if (ownerDocument.fullscreenElement !== root) return Promise.resolve(true);
+  return new Promise((resolve) => {
+    const settle = (released) => {
+      ownerDocument.removeEventListener("fullscreenchange", handleChange);
+      window.clearTimeout(timer);
+      resolve(released);
+    };
+    const handleChange = () => {
+      if (ownerDocument.fullscreenElement !== root) settle(true);
+    };
+    const timer = window.setTimeout(
+      () => settle(ownerDocument.fullscreenElement !== root),
+      timeoutMs
+    );
+    ownerDocument.addEventListener("fullscreenchange", handleChange);
+  });
+}
 function copyDocumentStyles(source, target) {
   for (const sheet of Array.from(source.styleSheets)) {
     if (sheet.href) {
@@ -33621,10 +33511,10 @@ function PresentationModeProvider({
   const { activeView, colorScheme, doc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
   const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
-  const [selectedTarget, setSelectedTarget] = useState60("control");
-  const [activeTarget, setActiveTarget] = useState60(null);
-  const [popupRoot, setPopupRoot] = useState60(null);
-  const [error, setError] = useState60(null);
+  const [selectedTarget, setSelectedTarget] = useState61("control");
+  const [activeTarget, setActiveTarget] = useState61(null);
+  const [popupRoot, setPopupRoot] = useState61(null);
+  const [error, setError] = useState61(null);
   const activeTargetRef = useRef49(activeTarget);
   activeTargetRef.current = activeTarget;
   const previousActiveTargetRef = useRef49(null);
@@ -33632,7 +33522,7 @@ function PresentationModeProvider({
   const popupRef = useRef49(null);
   const popupCleanupRef = useRef49(null);
   const fullscreenSupported = typeof document !== "undefined" && typeof document.documentElement.requestFullscreen === "function";
-  const availableTargets = useMemo45(
+  const availableTargets = useMemo46(
     () => [
       "control",
       ...allowWindow ? ["window"] : [],
@@ -33672,7 +33562,12 @@ function PresentationModeProvider({
             return;
           }
         }
-        if (ownerDocument.fullscreenElement === root) {
+        const released = await waitForFullscreenRelease(
+          ownerDocument,
+          root,
+          FULLSCREEN_RELEASE_TIMEOUT_MS
+        );
+        if (!released) {
           setError("Still in full screen. Press Escape to leave it.");
           return;
         }
@@ -33767,12 +33662,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect50(() => {
+  useEffect51(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect50(() => {
+  useEffect51(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -33784,7 +33679,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect50(() => {
+  useEffect51(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -33793,10 +33688,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect50(() => {
+  useEffect51(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -33804,7 +33699,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -33816,12 +33711,12 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useEffect50(
+  useEffect51(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -33834,7 +33729,7 @@ function PresentationModeProvider({
     },
     [rootRef]
   );
-  const value = useMemo45(
+  const value = useMemo46(
     () => ({
       selectedTarget,
       activeTarget,
@@ -33873,8 +33768,8 @@ function PresentationModeProvider({
       "aria-label": "Exit presentation mode",
       title: "Exit presentation mode (Esc)",
       children: [
-        /* @__PURE__ */ jsx69(Icon, { icon: "fa-solid fa-compress" }),
-        /* @__PURE__ */ jsx69("span", { children: "Exit presentation" })
+        /* @__PURE__ */ jsx70(Icon, { icon: "fa-solid fa-compress" }),
+        /* @__PURE__ */ jsx70("span", { children: "Exit presentation" })
       ]
     }
   ) : null;
@@ -33883,7 +33778,7 @@ function PresentationModeProvider({
     (activeTarget === "control" || activeTarget === "fullscreen") && exitButton,
     activeTarget === "window" && popupRoot && exitButton ? createPortal12(exitButton, popupRoot) : null,
     error && typeof document !== "undefined" ? createPortal12(
-      /* @__PURE__ */ jsx69("div", { className: "squisq-presentation-error", "data-theme": colorScheme, role: "alert", children: error }),
+      /* @__PURE__ */ jsx70("div", { className: "squisq-presentation-error", "data-theme": colorScheme, role: "alert", children: error }),
       document.body
     ) : null
   ] });
@@ -33924,8 +33819,8 @@ function PresentationModeControl() {
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef49(null);
   const menuRef = useRef49(null);
-  const [open, setOpen] = useState60(false);
-  const [anchor, setAnchor] = useState60(null);
+  const [open, setOpen] = useState61(false);
+  const [anchor, setAnchor] = useState61(null);
   const options = PRESENTATION_OPTIONS.filter((option) => availableTargets.includes(option.target));
   const selected = options.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
   const updatePosition = useCallback46(() => {
@@ -33950,7 +33845,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -33980,7 +33875,7 @@ function PresentationModeControl() {
     (checked ?? first)?.focus();
   }, [anchor, open]);
   return /* @__PURE__ */ jsxs54("div", { className: "squisq-presentation-control", children: [
-    /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70(
       "button",
       {
         type: "button",
@@ -33989,10 +33884,10 @@ function PresentationModeControl() {
         "aria-pressed": activeTarget !== null,
         "data-tooltip": activeTarget ? "Exit presentation" : `Present: ${selected.label}`,
         onClick: () => void (activeTarget ? stop() : start()),
-        children: /* @__PURE__ */ jsx69(Icon, { icon: "fa-solid fa-display" })
+        children: /* @__PURE__ */ jsx70(Icon, { icon: "fa-solid fa-display" })
       }
     ),
-    options.length > 1 && /* @__PURE__ */ jsx69(
+    options.length > 1 && /* @__PURE__ */ jsx70(
       "button",
       {
         ref: triggerRef,
@@ -34008,11 +33903,11 @@ function PresentationModeControl() {
           event.preventDefault();
           openMenu();
         },
-        children: /* @__PURE__ */ jsx69("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx69("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
+        children: /* @__PURE__ */ jsx70("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx70("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
       }
     ),
     open && anchor ? createPortal12(
-      /* @__PURE__ */ jsx69(
+      /* @__PURE__ */ jsx70(
         "div",
         {
           ref: menuRef,
@@ -34056,24 +33951,24 @@ function PresentationModeControl() {
                   closeMenu(true);
                 },
                 children: [
-                  /* @__PURE__ */ jsx69(
+                  /* @__PURE__ */ jsx70(
                     "span",
                     {
                       className: "squisq-use-mode-menu-icon squisq-presentation-menu-icon",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsx69(Icon, { icon: option.icon })
+                      children: /* @__PURE__ */ jsx70(Icon, { icon: option.icon })
                     }
                   ),
                   /* @__PURE__ */ jsxs54("span", { className: "squisq-use-mode-menu-copy squisq-presentation-menu-copy", children: [
-                    /* @__PURE__ */ jsx69("span", { className: "squisq-use-mode-menu-label squisq-presentation-menu-label", children: option.label }),
-                    /* @__PURE__ */ jsx69("span", { className: "squisq-use-mode-menu-summary squisq-presentation-menu-summary", children: disabled ? "Full screen is unavailable." : option.summary })
+                    /* @__PURE__ */ jsx70("span", { className: "squisq-use-mode-menu-label squisq-presentation-menu-label", children: option.label }),
+                    /* @__PURE__ */ jsx70("span", { className: "squisq-use-mode-menu-summary squisq-presentation-menu-summary", children: disabled ? "Full screen is unavailable." : option.summary })
                   ] }),
-                  /* @__PURE__ */ jsx69(
+                  /* @__PURE__ */ jsx70(
                     "span",
                     {
                       className: "squisq-use-mode-menu-check squisq-presentation-menu-check",
                       "aria-hidden": "true",
-                      children: isSelected && /* @__PURE__ */ jsx69(Icon, { icon: "fa-solid fa-check" })
+                      children: isSelected && /* @__PURE__ */ jsx70(Icon, { icon: "fa-solid fa-check" })
                     }
                   )
                 ]
@@ -34093,12 +33988,12 @@ import {
   createContext as createContext6,
   useCallback as useCallback47,
   useContext as useContext6,
-  useEffect as useEffect51,
-  useMemo as useMemo46,
+  useEffect as useEffect52,
+  useMemo as useMemo47,
   useRef as useRef50,
-  useState as useState61
+  useState as useState62
 } from "react";
-import { jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
 var PrintModeContext = createContext6(null);
 function usePrintMode() {
   const value = useContext6(PrintModeContext);
@@ -34111,8 +34006,8 @@ function usePrintModeOptional() {
 function PrintModeProvider({ rootRef, children }) {
   const { activeView } = useEditorContext();
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
-  const [active, setActive] = useState61(false);
-  const [slidesPerPage, setSlidesPerPage] = useState61(1);
+  const [active, setActive] = useState62(false);
+  const [slidesPerPage, setSlidesPerPage] = useState62(1);
   const customPrintHandlerRef = useRef50(null);
   const printAncestorsRef = useRef50([]);
   const unmarkPrinting = useCallback47(() => {
@@ -34163,7 +34058,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect51(() => {
+  useEffect52(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -34172,10 +34067,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -34197,7 +34092,7 @@ function PrintModeProvider({ rootRef, children }) {
       handleAfterPrint();
     };
   }, [active, close, markPrinting, rootRef, unmarkPrinting]);
-  const value = useMemo46(
+  const value = useMemo47(
     () => ({
       active,
       slidesPerPage,
@@ -34209,7 +34104,7 @@ function PrintModeProvider({ rootRef, children }) {
     }),
     [active, close, open, print, registerPrintHandler, slidesPerPage]
   );
-  return /* @__PURE__ */ jsx70(PrintModeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx71(PrintModeContext.Provider, { value, children });
 }
 function PrintModeControl() {
   const { open } = usePrintMode();
@@ -34222,8 +34117,8 @@ function PrintModeControl() {
       "aria-label": "Print",
       "data-tooltip": "Print",
       children: [
-        /* @__PURE__ */ jsx70(Icon, { icon: "fa-solid fa-print" }),
-        /* @__PURE__ */ jsx70("span", { children: "Print" })
+        /* @__PURE__ */ jsx71(Icon, { icon: "fa-solid fa-print" }),
+        /* @__PURE__ */ jsx71("span", { children: "Print" })
       ]
     }
   );
@@ -34233,8 +34128,8 @@ function PrintPreviewToolbar() {
   const { activeDisplayMode } = usePreviewSettings();
   const { slidesPerPage, setSlidesPerPage, print, close } = usePrintMode();
   return /* @__PURE__ */ jsxs55("div", { className: "squisq-print-toolbar", "aria-label": "Print preview controls", children: [
-    /* @__PURE__ */ jsx70("span", { className: "squisq-print-toolbar-title", children: "Print preview" }),
-    activeDisplayMode === "slideshow" && /* @__PURE__ */ jsx70("div", { className: "squisq-print-density", role: "group", "aria-label": "Slides per page", children: SLIDES_PER_PAGE_OPTIONS.map((value) => /* @__PURE__ */ jsxs55(
+    /* @__PURE__ */ jsx71("span", { className: "squisq-print-toolbar-title", children: "Print preview" }),
+    activeDisplayMode === "slideshow" && /* @__PURE__ */ jsx71("div", { className: "squisq-print-density", role: "group", "aria-label": "Slides per page", children: SLIDES_PER_PAGE_OPTIONS.map((value) => /* @__PURE__ */ jsxs55(
       "button",
       {
         type: "button",
@@ -34243,7 +34138,7 @@ function PrintPreviewToolbar() {
         "aria-label": `${value} ${value === 1 ? "slide" : "slides"} per page`,
         onClick: () => setSlidesPerPage(value),
         children: [
-          /* @__PURE__ */ jsx70("span", { children: value }),
+          /* @__PURE__ */ jsx71("span", { children: value }),
           /* @__PURE__ */ jsxs55("span", { className: "squisq-print-density-label", children: [
             " ",
             value === 1 ? "slide" : "slides",
@@ -34253,20 +34148,20 @@ function PrintPreviewToolbar() {
       },
       value
     )) }),
-    /* @__PURE__ */ jsx70("div", { className: "squisq-print-toolbar-spacer" }),
+    /* @__PURE__ */ jsx71("div", { className: "squisq-print-toolbar-spacer" }),
     /* @__PURE__ */ jsxs55("button", { type: "button", className: "squisq-print-action", onClick: print, children: [
-      /* @__PURE__ */ jsx70(Icon, { icon: "fa-solid fa-print" }),
-      /* @__PURE__ */ jsx70("span", { children: "Print" })
+      /* @__PURE__ */ jsx71(Icon, { icon: "fa-solid fa-print" }),
+      /* @__PURE__ */ jsx71("span", { children: "Print" })
     ] }),
     /* @__PURE__ */ jsxs55("button", { type: "button", className: "squisq-print-close", onClick: close, children: [
-      /* @__PURE__ */ jsx70(Icon, { icon: "fa-solid fa-xmark" }),
-      /* @__PURE__ */ jsx70("span", { children: "Close" })
+      /* @__PURE__ */ jsx71(Icon, { icon: "fa-solid fa-xmark" }),
+      /* @__PURE__ */ jsx71("span", { children: "Close" })
     ] })
   ] });
 }
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback48, useEffect as useEffect52, useMemo as useMemo47, useRef as useRef51 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect53, useMemo as useMemo48, useRef as useRef51 } from "react";
 import {
   BlockRenderer as BlockRenderer5,
   LinearDocView,
@@ -34278,7 +34173,7 @@ import {
 } from "@bendyline/squisq/schemas";
 import { expandCoverBlock as expandCoverBlock2 } from "@bendyline/squisq/doc";
 import { resolveTransformStyle } from "@bendyline/squisq/transform";
-import { jsx as jsx71, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs56 } from "react/jsx-runtime";
 function chunk(values, size) {
   const groups = [];
   for (let index2 = 0; index2 < values.length; index2 += size) {
@@ -34305,7 +34200,7 @@ function PrintPreview({
     documentFrameRef.current = frame;
   }, []);
   const { blocks } = useDocPlayback(previewDoc, 0, { viewport, theme });
-  const coverBlock = useMemo47(() => {
+  const coverBlock = useMemo48(() => {
     if (!showCover || !previewDoc?.startBlock) return null;
     const context = createTemplateContext2(theme, 0, 1, viewport);
     return {
@@ -34317,7 +34212,7 @@ function PrintPreview({
     };
   }, [previewDoc?.startBlock, showCover, theme, viewport]);
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect52(() => {
+  useEffect53(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -34327,7 +34222,7 @@ function PrintPreview({
   }, [isTextDocument, registerPrintHandler]);
   const title = contentDoc?.frontmatter?.title ?? contentDoc?.startBlock?.title ?? void 0;
   if (isTextDocument) {
-    return /* @__PURE__ */ jsx71("div", { className: "squisq-print-preview squisq-print-preview--document", children: /* @__PURE__ */ jsx71("div", { className: "squisq-print-document-paper", children: /* @__PURE__ */ jsx71(
+    return /* @__PURE__ */ jsx72("div", { className: "squisq-print-preview squisq-print-preview--document", children: /* @__PURE__ */ jsx72("div", { className: "squisq-print-document-paper", children: /* @__PURE__ */ jsx72(
       PlainHtmlPreview,
       {
         markdown: documentMarkdown,
@@ -34341,8 +34236,8 @@ function PrintPreview({
   }
   if (displayMode === "linear") {
     return /* @__PURE__ */ jsxs56("div", { className: "squisq-print-preview squisq-print-preview--page", children: [
-      /* @__PURE__ */ jsx71("style", { children: "@page { margin: 0; }" }),
-      /* @__PURE__ */ jsx71("div", { className: "squisq-print-page-paper", children: /* @__PURE__ */ jsx71(
+      /* @__PURE__ */ jsx72("style", { children: "@page { margin: 0; }" }),
+      /* @__PURE__ */ jsx72("div", { className: "squisq-print-page-paper", children: /* @__PURE__ */ jsx72(
         LinearDocView,
         {
           className: "squisq-print-linear",
@@ -34372,14 +34267,14 @@ function PrintPreview({
       "data-slides-per-page": density,
       style: previewStyle,
       children: [
-        /* @__PURE__ */ jsx71("style", { children: `@page { size: ${orientation}; margin: 0; }` }),
-        sheets.map((sheet, pageIndex) => /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsx72("style", { children: `@page { size: ${orientation}; margin: 0; }` }),
+        sheets.map((sheet, pageIndex) => /* @__PURE__ */ jsx72(
           "div",
           {
             className: "squisq-print-sheet",
             "data-slides-per-page": density,
             "aria-label": `Print page ${pageIndex + 1}`,
-            children: sheet.map((block) => /* @__PURE__ */ jsx71("div", { className: "squisq-print-slide-cell", children: /* @__PURE__ */ jsx71("div", { className: "squisq-print-slide-frame", children: /* @__PURE__ */ jsx71(
+            children: sheet.map((block) => /* @__PURE__ */ jsx72("div", { className: "squisq-print-slide-cell", children: /* @__PURE__ */ jsx72("div", { className: "squisq-print-slide-frame", children: /* @__PURE__ */ jsx72(
               BlockRenderer5,
               {
                 block,
@@ -34393,14 +34288,14 @@ function PrintPreview({
           },
           `${density}-${pageIndex}`
         )),
-        sheets.length === 0 && /* @__PURE__ */ jsx71("p", { className: "squisq-print-empty", children: "Nothing to print." })
+        sheets.length === 0 && /* @__PURE__ */ jsx72("p", { className: "squisq-print-empty", children: "Nothing to print." })
       ]
     }
   );
 }
 // src/PreviewPanel.tsx
-import { Fragment as Fragment20, jsx as jsx72, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx73, jsxs as jsxs57 } from "react/jsx-runtime";
 function PreviewPanel({
   basePath = "/",
   className,
@@ -34419,7 +34314,8 @@ function PreviewPanel({
     bumpMediaRevision,
     allowRecording,
     colorScheme,
-    fileName
+    fileName,
+    fenceRenderers
   } = useEditorContext();
   const mediaProvider = useMediaProvider2();
   const presentation = usePresentationModeOptional();
@@ -34443,7 +34339,7 @@ function PreviewPanel({
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
-  const [playbackState, setPlaybackState] = useState62(null);
+  const [playbackState, setPlaybackState] = useState63(null);
   const handlePlaybackStateChange = useCallback49((next) => {
     setPlaybackState(next);
   }, []);
@@ -34455,7 +34351,7 @@ function PreviewPanel({
   );
   const previewDoc = previewProjection?.playerDoc ?? null;
   const contentDoc = previewProjection?.contentDoc ?? null;
-  const followerAudioController = useMemo48(() => {
+  const followerAudioController = useMemo49(() => {
     if (!playbackState || !previewDoc) return null;
     const noOp = () => Promise.resolve();
     return {
@@ -34474,18 +34370,18 @@ function PreviewPanel({
       restart: noOp
     };
   }, [playbackState, previewDoc]);
-  const documentMarkdown = useMemo48(
+  const documentMarkdown = useMemo49(
     () => activeTransformStyle && contentDoc ? buildDocumentPreviewMarkdown(contentDoc) : markdownSource,
     [activeTransformStyle, contentDoc, markdownSource]
   );
   const isDocumentMode = activeDisplayMode === "page";
   const isPageMode = activeDisplayMode === "linear";
   const isNarrateMode = activeDisplayMode === "narrate";
-  useEffect53(() => {
+  useEffect54(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect53(() => {
+  useEffect54(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -34548,22 +34444,22 @@ function PreviewPanel({
     presentation?.popupRoot
   ]);
   if (isParsing && !isNarrateMode && !previewDoc) {
-    return /* @__PURE__ */ jsx72("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx72("p", { children: "Parsing\u2026" }) });
+    return /* @__PURE__ */ jsx73("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx73("p", { children: "Parsing\u2026" }) });
   }
   if (parseError && !isNarrateMode) {
     return /* @__PURE__ */ jsxs57("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: [
-      /* @__PURE__ */ jsx72("h3", { children: "Parse Error" }),
-      /* @__PURE__ */ jsx72("pre", { children: parseError })
+      /* @__PURE__ */ jsx73("h3", { children: "Parse Error" }),
+      /* @__PURE__ */ jsx73("pre", { children: parseError })
     ] });
   }
   if (!previewDoc && !isDocumentMode && !isNarrateMode) {
-    return /* @__PURE__ */ jsx72("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx72("p", { children: "No content to preview. Start typing in the editor." }) });
+    return /* @__PURE__ */ jsx73("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx73("p", { children: "No content to preview. Start typing in the editor." }) });
   }
   const fillsContainer = printMode?.active || isDocumentMode || isPageMode || isNarrateMode ? "stretch" : "center";
   const audienceWindowOpen = presentation?.activeTarget === "window";
   const renderSurface = (audience) => {
     if (!audience && printMode?.active) {
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx73(
         PrintPreview,
         {
           displayMode: activeDisplayMode,
@@ -34580,7 +34476,7 @@ function PreviewPanel({
       );
     }
     if (isDocumentMode) {
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx73(
         PlainHtmlPreview,
         {
           markdown: documentMarkdown,
@@ -34597,7 +34493,7 @@ function PreviewPanel({
     }
     if (isNarrateMode) {
       if (audience) return null;
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx73(
         TeleprompterView,
         {
           doc,
@@ -34616,7 +34512,7 @@ function PreviewPanel({
       );
     }
     if (isPageMode) {
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx73(
         LinearDocView2,
         {
           doc: contentDoc ?? doc,
@@ -34627,15 +34523,16 @@ function PreviewPanel({
           showCover: activeCoverSlide,
           transformPage: activeTransformStyle ? resolveTransformStyle2(activeTransformStyle).page : void 0,
           showCodeCopyButton,
-          onCopyCode
+          onCopyCode,
+          fenceRenderers: fenceRenderers ?? void 0
         }
       );
     }
     if (audience && !followerAudioController) {
-      return /* @__PURE__ */ jsx72("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
+      return /* @__PURE__ */ jsx73("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
     }
     const audienceCaptionMode = playbackState?.captionMode;
-    return /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsx73(
       DocPlayer2,
       {
         doc: previewDoc,
@@ -34678,7 +34575,7 @@ function PreviewPanel({
     background: presentation?.activeTarget ? activeTheme.colors.background : void 0
   };
   return /* @__PURE__ */ jsxs57(Fragment20, { children: [
-    /* @__PURE__ */ jsx72(
+    /* @__PURE__ */ jsx73(
       "div",
       {
         className: `squisq-preview-container ${className || ""}`,
@@ -34691,16 +34588,16 @@ function PreviewPanel({
           overflow: "hidden",
           background: "var(--squisq-bg, #f5f5f5)"
         },
-        children: /* @__PURE__ */ jsx72("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
+        children: /* @__PURE__ */ jsx73("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
       }
     ),
     audienceWindowOpen && presentation?.popupRoot && !isNarrateMode ? createPortal13(
-      /* @__PURE__ */ jsx72(
+      /* @__PURE__ */ jsx73(
         "div",
         {
           className: "squisq-editor-shell squisq-presentation-window",
           "data-theme": colorScheme,
-          children: /* @__PURE__ */ jsx72("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx72(
+          children: /* @__PURE__ */ jsx73("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx73(
             "div",
             {
               ref: popupSurfaceRef,
@@ -34718,8 +34615,8 @@ function PreviewPanel({
 }
 // src/MediaBin.tsx
-import { useState as useState63, useEffect as useEffect54, useRef as useRef53, useCallback as useCallback50 } from "react";
-import { jsx as jsx73, jsxs as jsxs58 } from "react/jsx-runtime";
+import { useState as useState64, useEffect as useEffect55, useRef as useRef53, useCallback as useCallback50 } from "react";
+import { jsx as jsx74, jsxs as jsxs58 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -34783,12 +34680,12 @@ function MediaBin({
   isRecorderOpen = false,
   allowBinaryDownloads = true
 }) {
-  const [entries, setEntries] = useState63([]);
-  const [thumbUrls, setThumbUrls] = useState63({});
-  const [loading, setLoading] = useState63(false);
-  const [isDropActive, setIsDropActive] = useState63(false);
-  const [downloadingPath, setDownloadingPath] = useState63(null);
-  const [contextMenu, setContextMenu] = useState63(null);
+  const [entries, setEntries] = useState64([]);
+  const [thumbUrls, setThumbUrls] = useState64({});
+  const [loading, setLoading] = useState64(false);
+  const [isDropActive, setIsDropActive] = useState64(false);
+  const [downloadingPath, setDownloadingPath] = useState64(null);
+  const [contextMenu, setContextMenu] = useState64(null);
   const fileInputRef = useRef53(null);
   const contextMenuRef = useRef53(null);
   const dropDepthRef = useRef53(0);
@@ -34810,7 +34707,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect54(() => {
+  useEffect55(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -34831,7 +34728,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -35036,12 +34933,12 @@ function MediaBin({
                 "aria-haspopup": "dialog",
                 "aria-expanded": isRecorderOpen,
                 children: [
-                  /* @__PURE__ */ jsx73("span", { className: "squisq-media-bin-record-dot", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx74("span", { className: "squisq-media-bin-record-dot", "aria-hidden": "true" }),
                   "Record"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx73(
+            /* @__PURE__ */ jsx74(
               "button",
               {
                 type: "button",
@@ -35057,10 +34954,10 @@ function MediaBin({
         /* @__PURE__ */ jsxs58("div", { className: "squisq-media-bin-list", children: [
           !mediaProvider && /* @__PURE__ */ jsxs58("div", { className: "squisq-media-bin-empty", children: [
             "No media context.",
-            /* @__PURE__ */ jsx73("br", {}),
+            /* @__PURE__ */ jsx74("br", {}),
             "Load a content zip or select a storage slot."
           ] }),
-          mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx73("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
+          mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx74("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
           entries.map((entry) => {
             const thumb = thumbUrls[entry.name];
             const basename = basenameForPath(entry.name);
@@ -35092,7 +34989,7 @@ ${formatSize(entry.size)}`,
                 onDragStart: handleDragStart,
                 onKeyDown: (e2) => handleItemKeyDown(entry, e2),
                 children: [
-                  thumb ? /* @__PURE__ */ jsx73(
+                  thumb ? /* @__PURE__ */ jsx74(
                     "img",
                     {
                       src: thumb,
@@ -35100,15 +34997,15 @@ ${formatSize(entry.size)}`,
                       className: "squisq-media-bin-thumb",
                       draggable: false
                     }
-                  ) : /* @__PURE__ */ jsx73("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
+                  ) : /* @__PURE__ */ jsx74("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
                   /* @__PURE__ */ jsxs58("div", { className: "squisq-media-bin-meta", children: [
-                    /* @__PURE__ */ jsx73("div", { className: "squisq-media-bin-name", children: basename }),
+                    /* @__PURE__ */ jsx74("div", { className: "squisq-media-bin-name", children: basename }),
                     /* @__PURE__ */ jsxs58("div", { className: "squisq-media-bin-detail-row", children: [
-                      /* @__PURE__ */ jsx73("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
-                      isUnused && /* @__PURE__ */ jsx73("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
+                      /* @__PURE__ */ jsx74("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
+                      isUnused && /* @__PURE__ */ jsx74("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
                     ] })
                   ] }),
-                  allowBinaryDownloads && /* @__PURE__ */ jsx73(
+                  allowBinaryDownloads && /* @__PURE__ */ jsx74(
                     "button",
                     {
                       type: "button",
@@ -35122,7 +35019,7 @@ ${formatSize(entry.size)}`,
                         void handleDownloadEntry(entry);
                       },
                       onDragStart: (event) => event.preventDefault(),
-                      children: /* @__PURE__ */ jsx73("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
+                      children: /* @__PURE__ */ jsx74("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
                     }
                   )
                 ]
@@ -35132,11 +35029,11 @@ ${formatSize(entry.size)}`,
           })
         ] }),
         isDropActive && /* @__PURE__ */ jsxs58("div", { className: "squisq-media-bin-drop-target", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx73("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
-          /* @__PURE__ */ jsx73("strong", { children: "Drop images here" }),
-          /* @__PURE__ */ jsx73("span", { children: "Add to Files" })
+          /* @__PURE__ */ jsx74("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
+          /* @__PURE__ */ jsx74("strong", { children: "Drop images here" }),
+          /* @__PURE__ */ jsx74("span", { children: "Add to Files" })
         ] }),
-        contextMenu && /* @__PURE__ */ jsx73(
+        contextMenu && /* @__PURE__ */ jsx74(
           "div",
           {
             ref: contextMenuRef,
@@ -35144,7 +35041,7 @@ ${formatSize(entry.size)}`,
             role: "menu",
             "aria-label": `${contextMenu.entry.name} actions`,
             style: contextMenuStyle,
-            children: /* @__PURE__ */ jsx73(
+            children: /* @__PURE__ */ jsx74(
               "button",
               {
                 type: "button",
@@ -35157,7 +35054,7 @@ ${formatSize(entry.size)}`,
             )
           }
         ),
-        /* @__PURE__ */ jsx73(
+        /* @__PURE__ */ jsx74(
           "input",
           {
             ref: fileInputRef,
@@ -35173,8 +35070,8 @@ ${formatSize(entry.size)}`,
 }
 // src/DropZoneOverlay.tsx
-import { useState as useState64 } from "react";
-import { Fragment as Fragment21, jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
+import { useState as useState65 } from "react";
+import { Fragment as Fragment21, jsx as jsx75, jsxs as jsxs59 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
   zoneProps,
@@ -35182,8 +35079,8 @@ function DropZoneOverlay({
 }) {
   const showMedia = dragContentType === "media" || dragContentType === "mixed";
   const showText = dragContentType === "text" || dragContentType === "mixed";
-  return /* @__PURE__ */ jsx74("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs59("div", { className: "squisq-drop-overlay-inner", children: [
-    showMedia && /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs59("div", { className: "squisq-drop-overlay-inner", children: [
+    showMedia && /* @__PURE__ */ jsx75(
       DropZone,
       {
         target: "media",
@@ -35196,7 +35093,7 @@ function DropZoneOverlay({
       }
     ),
     showText && /* @__PURE__ */ jsxs59(Fragment21, { children: [
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx75(
         DropZone,
         {
           target: "insert",
@@ -35207,7 +35104,7 @@ function DropZoneOverlay({
           variant: "insert"
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx75(
         DropZone,
         {
           target: "replace",
@@ -35230,7 +35127,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState64(false);
+  const [isHovering, setIsHovering] = useState65(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -35265,16 +35162,16 @@ function DropZone({
         props.onDrop(e2);
       },
       children: [
-        /* @__PURE__ */ jsx74("span", { className: "squisq-drop-zone-icon", children: icon }),
-        /* @__PURE__ */ jsx74("span", { className: "squisq-drop-zone-label", children: label }),
-        /* @__PURE__ */ jsx74("span", { className: "squisq-drop-zone-desc", children: description })
+        /* @__PURE__ */ jsx75("span", { className: "squisq-drop-zone-icon", children: icon }),
+        /* @__PURE__ */ jsx75("span", { className: "squisq-drop-zone-label", children: label }),
+        /* @__PURE__ */ jsx75("span", { className: "squisq-drop-zone-desc", children: description })
       ]
     }
   );
 }
 // src/Tooltip.tsx
-import { useEffect as useEffect55, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState65 } from "react";
+import { useEffect as useEffect56, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState66 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 // src/tooltipPlacement.ts
@@ -35287,10 +35184,10 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 }
 // src/Tooltip.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState65(null);
+  const [state, setState3] = useState66(null);
   const tooltipRef = useRef54(null);
   const timerRef = useRef54(null);
   const currentTargetRef = useRef54(null);
@@ -35306,7 +35203,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect55(() => {
+  useEffect56(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -35372,7 +35269,7 @@ function TooltipLayer() {
   }, []);
   if (!state) return null;
   return createPortal14(
-    /* @__PURE__ */ jsx75(
+    /* @__PURE__ */ jsx76(
       "div",
       {
         role: "tooltip",
@@ -35392,35 +35289,35 @@ function TooltipLayer() {
 }
 // src/EditorShell.tsx
-import { useEffect as useEffect56, useRef as useRef55, useState as useState66, useCallback as useCallback51, useMemo as useMemo50 } from "react";
+import { useEffect as useEffect57, useRef as useRef55, useState as useState67, useCallback as useCallback51, useMemo as useMemo51 } from "react";
 // src/BlockPreviewPanel.tsx
-import { useMemo as useMemo49 } from "react";
+import { useMemo as useMemo50 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS7 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks7, DEFAULT_THEME as DEFAULT_THEME7 } from "@bendyline/squisq/doc";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 function BlockPreviewPanel({ basePath = "/" }) {
   const { doc, activeBlockStartLine, mediaProvider } = useEditorContext();
   const previewSettings = usePreviewSettingsOptional();
   const theme = previewSettings?.activeTheme ?? DEFAULT_THEME7;
   const viewport = previewSettings?.activeViewport ?? VIEWPORT_PRESETS7.landscape;
-  const block = useMemo49(() => {
+  const block = useMemo50(() => {
     if (!doc) return null;
     const blocks = flattenBlocks7(doc.blocks);
     if (blocks.length === 0) return null;
     return blocks.find((b) => b.sourceHeading?.position?.start.line === activeBlockStartLine) ?? blocks[0];
   }, [doc, activeBlockStartLine]);
-  const visual = useMemo49(
+  const visual = useMemo50(
     () => doc && block ? resolveBlockVisual(doc, block, theme, viewport) : null,
     [doc, block, theme, viewport]
   );
   if (!visual) return null;
-  return /* @__PURE__ */ jsx76("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx77(
     "div",
     {
       className: "squisq-block-preview-frame",
       style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-      children: /* @__PURE__ */ jsx76(
+      children: /* @__PURE__ */ jsx77(
         BlockThumbnail,
         {
           visual,
@@ -35674,7 +35571,7 @@ import {
   createMediaProviderFromContainer
 } from "@bendyline/squisq/storage";
 import { MediaContext as MediaContext7, useMediaClipDurations } from "@bendyline/squisq-react";
-import { Fragment as Fragment22, jsx as jsx77, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx78, jsxs as jsxs60 } from "react/jsx-runtime";
 function EditorShell({
   initialMarkdown = "",
   initialView = "wysiwyg",
@@ -35724,6 +35621,7 @@ function EditorShell({
   onFindModeChange,
   mentionProvider,
   documentLinkProvider,
+  fenceRenderers,
   linkSchemes,
   allowRecording = true,
   allowNarrate = true,
@@ -35747,14 +35645,14 @@ function EditorShell({
   themeOverride = null
 }) {
   const effectiveContainer = workspaceContainer ?? null;
-  const effectiveMediaProvider = useMemo50(() => {
+  const effectiveMediaProvider = useMemo51(() => {
     if (mediaProvider !== void 0) return mediaProvider;
     if (effectiveContainer) return createMediaProviderFromContainer(effectiveContainer);
     return void 0;
   }, [mediaProvider, effectiveContainer]);
   const filesToggleEnabled = showFilesToggle ?? effectiveMediaProvider !== void 0;
   const effectiveInitialView = hostMode === "chat" || !showPlayTab && initialView === "preview" ? "wysiwyg" : initialView;
-  return /* @__PURE__ */ jsx77(MediaContext7.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(MediaContext7.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx78(
     EditorProvider,
     {
       initialMarkdown,
@@ -35771,6 +35669,7 @@ function EditorShell({
       imageDisplayMode,
       mentionProvider,
       documentLinkProvider,
+      fenceRenderers,
       linkSchemes,
       allowRecording,
       allowNarrate,
@@ -35787,7 +35686,7 @@ function EditorShell({
       themeInheritance,
       viewPreferences,
       onViewPreferencesChange,
-      children: /* @__PURE__ */ jsx77(
+      children: /* @__PURE__ */ jsx78(
         EditorShellInner,
         {
           basePath,
@@ -35840,11 +35739,11 @@ function EditorShell({
 }
 function UseModeToolbarControls({ allowPrint }) {
   const printMode = usePrintMode();
-  if (printMode.active) return /* @__PURE__ */ jsx77(PrintPreviewToolbar, {});
+  if (printMode.active) return /* @__PURE__ */ jsx78(PrintPreviewToolbar, {});
   return /* @__PURE__ */ jsxs60(Fragment22, { children: [
-    /* @__PURE__ */ jsx77(PreviewToolbarControls, {}),
-    /* @__PURE__ */ jsx77(PresentationModeControl, {}),
-    allowPrint && /* @__PURE__ */ jsx77(PrintModeControl, {})
+    /* @__PURE__ */ jsx78(PreviewToolbarControls, {}),
+    /* @__PURE__ */ jsx78(PresentationModeControl, {}),
+    allowPrint && /* @__PURE__ */ jsx78(PrintModeControl, {})
   ] });
 }
 function UseModeProviders({
@@ -35853,13 +35752,13 @@ function UseModeProviders({
   allowPresentationWindow,
   allowPresentationFullscreen
 }) {
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     PresentationModeProvider,
     {
       rootRef,
       allowWindow: allowPresentationWindow,
       allowFullscreen: allowPresentationFullscreen,
-      children: /* @__PURE__ */ jsx77(PrintModeProvider, { rootRef, children })
+      children: /* @__PURE__ */ jsx78(PrintModeProvider, { rootRef, children })
     }
   );
 }
@@ -35948,7 +35847,7 @@ function EditorShellInner({
     workspaceContainer
   );
   const timelineDoc = timelineProjection?.contentDoc ?? doc;
-  const timelineRawSchedule = useMemo50(
+  const timelineRawSchedule = useMemo51(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc) : [],
     [timelineDoc]
   );
@@ -35957,19 +35856,19 @@ function EditorShellInner({
     basePath,
     mediaProvider ?? null
   );
-  const timelineDuration = useMemo50(
+  const timelineDuration = useMemo51(
     () => timelineDoc ? getDocPlaybackDuration3(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src)
     }) : 0,
     [timelineDoc, timelineClipDurations]
   );
-  const timelineSchedule = useMemo50(
+  const timelineSchedule = useMemo51(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src)
     }) : [],
     [timelineDoc, timelineClipDurations]
   );
-  const timelineVideoSchedule = useMemo50(
+  const timelineVideoSchedule = useMemo51(
     () => timelineDoc ? [
       ...timelineSchedule.filter((clip) => clip.kind === "video"),
       ...collectEmbeddedVideoSchedule(timelineDoc)
@@ -35978,15 +35877,15 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState66(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState66(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState67(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState67(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState66(false);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState66(0);
-  const [mediaCount, setMediaCount] = useState66(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState66(false);
+  const [showFiles, setShowFiles] = useState67(false);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState67(0);
+  const [mediaCount, setMediaCount] = useState67(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState67(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
-  const usedMediaPaths = useMemo50(
+  const usedMediaPaths = useMemo51(
     () => collectMediaReferencesFromMarkdown(markdownSource),
     [markdownSource]
   );
@@ -35996,13 +35895,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect56(() => {
+  useEffect57(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -36111,7 +36010,7 @@ ${snippet}` : snippet);
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect56(() => {
+  useEffect57(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback51(
@@ -36199,7 +36098,7 @@ ${snippet}` : snippet);
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsx77(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx78(
           PreviewSettingsProvider,
           {
             doc,
@@ -36214,16 +36113,16 @@ ${snippet}` : snippet);
                 children: [
                   isImageMode ? (toolbarSlotLeft || toolbarSlotRight) && /* @__PURE__ */ jsxs60("div", { className: "squisq-editor-header squisq-editor-header--image", children: [
                     toolbarSlotLeft,
-                    /* @__PURE__ */ jsx77("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ jsx78("div", { style: { flex: 1 } }),
                     toolbarSlotRight
-                  ] }) : /* @__PURE__ */ jsx77("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx77(
+                  ] }) : /* @__PURE__ */ jsx78("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx78(
                     Toolbar,
                     {
                       showFiles,
                       fileCount: mediaCount,
                       onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
                       slotLeft: toolbarSlotLeft,
-                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx77(UseModeToolbarControls, { allowPrint }),
+                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx78(UseModeToolbarControls, { allowPrint }),
                       slotAfterActions: toolbarSlotAfterActions,
                       slotRight: toolbarSlotRight,
                       showPlayTab,
@@ -36257,7 +36156,7 @@ ${snippet}` : snippet);
                               position: "relative"
                             },
                             children: [
-                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx77(
+                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx78(
                                 ImageEditor,
                                 {
                                   filesContainer: imageEditorContainer,
@@ -36267,10 +36166,10 @@ ${snippet}` : snippet);
                                   onExport: onImageExport,
                                   surface: colorScheme === "dark" ? DARK_SURFACE : LIGHT_SURFACE
                                 }
-                              ) : /* @__PURE__ */ jsx77(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
+                              ) : /* @__PURE__ */ jsx78(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
                               !isImageMode && activeView === "raw" && /* @__PURE__ */ jsxs60("div", { className: "squisq-editor-with-gutter", children: [
-                                isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx77(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                /* @__PURE__ */ jsx77(
+                                isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx78(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                /* @__PURE__ */ jsx78(
                                   BlockCardView,
                                   {
                                     active: isCardMode,
@@ -36279,7 +36178,7 @@ ${snippet}` : snippet);
                                     onPrev: prevBlock,
                                     onNext: nextBlock,
                                     onAdd: addBlock,
-                                    children: /* @__PURE__ */ jsx77("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx77(
+                                    children: /* @__PURE__ */ jsx78("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx78(
                                       RawEditor,
                                       {
                                         monacoTheme: colorScheme === "dark" ? "vs-dark" : "vs",
@@ -36290,9 +36189,9 @@ ${snippet}` : snippet);
                                   },
                                   "raw-frame"
                                 ),
-                                isCodeMode && codeContext && /* @__PURE__ */ jsx77(CodeContextZones, { options: codeContext }, "code-context"),
-                                isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx77(BlockPreviewPanel, { basePath }, "block-preview"),
-                                isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx77(
+                                isCodeMode && codeContext && /* @__PURE__ */ jsx78(CodeContextZones, { options: codeContext }, "code-context"),
+                                isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx78(BlockPreviewPanel, { basePath }, "block-preview"),
+                                isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx78(
                                   InlinePreviewGutter,
                                   {
                                     width: inlinePreviewWidth,
@@ -36303,8 +36202,8 @@ ${snippet}` : snippet);
                                 )
                               ] }, "raw-shell"),
                               isMarkdownMode && activeView === "wysiwyg" && /* @__PURE__ */ jsxs60("div", { className: "squisq-editor-with-gutter", children: [
-                                outlineVisible && /* @__PURE__ */ jsx77(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                /* @__PURE__ */ jsx77(
+                                outlineVisible && /* @__PURE__ */ jsx78(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                /* @__PURE__ */ jsx78(
                                   BlockCardView,
                                   {
                                     active: isCardMode,
@@ -36313,7 +36212,7 @@ ${snippet}` : snippet);
                                     onPrev: prevBlock,
                                     onNext: nextBlock,
                                     onAdd: addBlock,
-                                    children: /* @__PURE__ */ jsx77(
+                                    children: /* @__PURE__ */ jsx78(
                                       WysiwygEditor,
                                       {
                                         submitOnEnter,
@@ -36325,8 +36224,8 @@ ${snippet}` : snippet);
                                   },
                                   "wysiwyg-frame"
                                 ),
-                                isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx77(BlockPreviewPanel, { basePath }, "block-preview"),
-                                !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx77(
+                                isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx78(BlockPreviewPanel, { basePath }, "block-preview"),
+                                !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx78(
                                   InlinePreviewGutter,
                                   {
                                     width: inlinePreviewWidth,
@@ -36336,7 +36235,7 @@ ${snippet}` : snippet);
                                   "inline"
                                 )
                               ] }, "wysiwyg-shell"),
-                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx77(
+                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx78(
                                 PreviewPanel,
                                 {
                                   basePath,
@@ -36349,7 +36248,7 @@ ${snippet}` : snippet);
                             ]
                           }
                         ),
-                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx77(
+                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx78(
                           TimelineVideoPanel,
                           {
                             schedule: timelineVideoSchedule,
@@ -36359,7 +36258,7 @@ ${snippet}` : snippet);
                             onClose: () => setTimelineVideoVisible(false)
                           }
                         ),
-                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx77(
+                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx78(
                           TimelineCompositionPanel,
                           {
                             doc,
@@ -36369,7 +36268,7 @@ ${snippet}` : snippet);
                             onClose: () => setTimelineCompositionVisible(false)
                           }
                         ),
-                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx77(
+                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx78(
                           MediaBin,
                           {
                             mediaProvider,
@@ -36384,8 +36283,8 @@ ${snippet}` : snippet);
                             isRecorderOpen: mediaBinRecorderOpen
                           }
                         ),
-                        isMarkdownMode && /* @__PURE__ */ jsx77(ThemeDesignerDock, {}),
-                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx77(
+                        isMarkdownMode && /* @__PURE__ */ jsx78(ThemeDesignerDock, {}),
+                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx78(
                           DropZoneOverlay,
                           {
                             dragContentType,
@@ -36396,7 +36295,7 @@ ${snippet}` : snippet);
                       ]
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx77(
+                  isTimelineMode && /* @__PURE__ */ jsx78(
                     TimelineToolbar,
                     {
                       literalVideoVisible: timelineVideoVisible,
@@ -36407,7 +36306,7 @@ ${snippet}` : snippet);
                       onToggleComposition: () => setTimelineCompositionVisible((visible) => !visible)
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx77(
+                  isTimelineMode && /* @__PURE__ */ jsx78(
                     TimelineTrack,
                     {
                       doc: timelineDoc,
@@ -36416,8 +36315,8 @@ ${snippet}` : snippet);
                       basePath
                     }
                   ),
-                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx77(StatusBar, { slotRight: statusBarSlotRight }),
-                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx77(
+                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx78(StatusBar, { slotRight: statusBarSlotRight }),
+                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx78(
                     RecorderEntry,
                     {
                       open: mediaBinRecorderOpen,
@@ -36430,8 +36329,8 @@ ${snippet}` : snippet);
             )
           }
         ) }),
-        /* @__PURE__ */ jsx77(TooltipLayer, {}),
-        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(TooltipLayer, {}),
+        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx78(
           ImageEditModal,
           {
             relativePath: imageEditTarget,
@@ -36466,7 +36365,7 @@ function ImageEditModal({
   useModalDialog({ rootRef: modalRef, dialogRef: surfaceRef, onClose });
   const extension = relativePath.split(/[?#]/, 1)[0]?.split(".").pop()?.toLowerCase();
   const saveFormat = extension === "png" ? "png" : extension === "jpg" || extension === "jpeg" ? "jpeg" : extension === "webp" ? "webp" : null;
-  const sidecar = useMemo50(() => {
+  const sidecar = useMemo51(() => {
     const sanitized = relativePath.replace(/[^a-zA-Z0-9._-]+/g, "_");
     let hash = 2166136261;
     for (let i = 0; i < relativePath.length; i++) {
@@ -36477,9 +36376,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState66(null);
-  const [resolveError, setResolveError] = useState66(null);
-  useEffect56(() => {
+  const [initialSrc, setInitialSrc] = useState67(null);
+  const [resolveError, setResolveError] = useState67(null);
+  useEffect57(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -36509,7 +36408,7 @@ function ImageEditModal({
     },
     [mediaProvider, relativePath, onSaved]
   );
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       ref: modalRef,
@@ -36523,9 +36422,9 @@ function ImageEditModal({
       },
       children: /* @__PURE__ */ jsxs60("div", { ref: surfaceRef, className: "squisq-image-edit-modal__surface", children: [
         /* @__PURE__ */ jsxs60("header", { className: "squisq-image-edit-modal__header", children: [
-          /* @__PURE__ */ jsx77("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
-          /* @__PURE__ */ jsx77("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
-          /* @__PURE__ */ jsx77(
+          /* @__PURE__ */ jsx78("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
+          /* @__PURE__ */ jsx78("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
+          /* @__PURE__ */ jsx78(
             "button",
             {
               type: "button",
@@ -36537,10 +36436,10 @@ function ImageEditModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx77("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs60("div", { className: "squisq-image-edit-modal__error", children: [
+        /* @__PURE__ */ jsx78("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs60("div", { className: "squisq-image-edit-modal__error", children: [
           "Failed to load image: ",
           resolveError
-        ] }) : !saveFormat ? /* @__PURE__ */ jsx77("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx77("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx77(
+        ] }) : !saveFormat ? /* @__PURE__ */ jsx78("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx78("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx78(
           ImageEditor,
           {
             filesContainer: sidecar,
@@ -36659,6 +36558,7 @@ export {
   removeNodeOp,
   asciiDiagramToCanvas,
   useAsciiDiagramData,
+  mapFenceEntries,
   REPAIRABLE_KEY,
   isRepairableFence,
   findRepairableBlockPos,
@@ -36667,6 +36567,8 @@ export {
   applyRepairCommand,
   applyAsciiDiagramCommand,
   AsciiDiagramWidget,
+  FENCE_WIDGET_CONTAINED_EVENTS,
+  containFenceWidgetEvents,
   findAsciiDiagramBlockPos,
   isAsciiSourceVisible,
   toggleAsciiSource,
@@ -36698,6 +36600,10 @@ export {
   isCodeSnippetNode,
   findCodeSnippetBlockPos,
   CodeSnippetExtension,
+  HOST_FENCE_KEY,
+  findHostFenceBlockPos,
+  replaceHostFenceText,
+  HostFenceExtension,
   useTreeViewData,
   sanitizeTreeLabel,
   renameItemOp,
@@ -36733,8 +36639,8 @@ export {
   persistFromWrite,
   WysiwygEditor,
   InlinePreviewGutter,
-  documentTitleFromFileName,
   buildPreviewDoc,
+  documentTitleFromFileName,
   OutlinePanel,
   CodeContextZones,
   BlockCardView,