@bendyline/squisq-editor-react 2.5.0 → 2.7.0

package/dist/{chunk-DCMJXDQY.js → chunk-NJ2VKEQF.js}

@@ -15,7 +15,7 @@ import {
 import {
   RecorderPanel,
   useModalDialog
-} from "./chunk-ZSQN6IO7.js";
+} from "./chunk-JUAQQTJE.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,
@@ -10108,7 +10111,15 @@ function MermaidDiagramTypeThumbnail({ preview }) {
 }
 
 // src/Toolbar.tsx
-import { useCallback as useCallback29, useEffect as useEffect24, useMemo as useMemo24, useReducer, useRef as useRef28, useState as useState31 } from "react";
+import {
+  useCallback as useCallback29,
+  useEffect as useEffect24,
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo24,
+  useReducer,
+  useRef as useRef28,
+  useState as useState31
+} from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS2 } from "@bendyline/squisq/schemas";
 import { DEFAULT_THEME, flattenBlocks } from "@bendyline/squisq/doc";
 import {
@@ -10286,8 +10297,8 @@ function RecorderEntry({ open, onOpenChange, showTrigger = true } = {}) {
   const handleSave = useCallback16(
     (result) => {
       bumpMediaRevision();
-      if (result.source === "mic") {
-        if (activeView === "raw" && monacoEditor) {
+      if (result.mediaKind === "audio") {
+        if (result.source === "mic" && activeView === "raw" && monacoEditor) {
           annotateMonacoHeading(monacoEditor, result.filename);
         }
         const audioTag = `<audio src="${result.relativePath}" controls></audio>`;
@@ -16824,6 +16835,8 @@ function Toolbar({
   slotAfterActions,
   slotRight,
   showPlayTab = true,
+  showFormattingControls = true,
+  showInsertControls = true,
   hostMode = "document"
 }) {
   const {
@@ -16915,9 +16928,8 @@ function Toolbar({
   const codeSnippetMenuRef = useRef28(null);
   const mermaidTypeMenuRef = useRef28(null);
   const chartTypeMenuRef = useRef28(null);
-  const [insertMenuAnchor, setInsertMenuAnchor] = useState31(
-    null
-  );
+  const insertMenuTriggerRectRef = useRef28(null);
+  const [insertMenuAnchor, setInsertMenuAnchor] = useState31(null);
   const [codeSnippetMenuAnchor, setCodeSnippetMenuAnchor] = useState31(null);
   const [mermaidTypeMenuAnchor, setMermaidTypeMenuAnchor] = useState31(null);
   const [chartTypeMenuAnchor, setChartTypeMenuAnchor] = useState31(null);
@@ -16933,7 +16945,8 @@ function Toolbar({
     if (left + INSERT_MENU_WIDTH + margin > vw) {
       left = Math.max(margin, rect.right - INSERT_MENU_WIDTH);
     }
-    setInsertMenuAnchor({ top: rect.bottom + gap, left });
+    insertMenuTriggerRectRef.current = rect;
+    setInsertMenuAnchor({ top: rect.bottom + gap, left, placement: "down" });
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
     setChartTypeMenuAnchor(null);
@@ -16987,6 +17000,7 @@ function Toolbar({
     setMermaidTypeMenuAnchor(null);
   }, []);
   const closeInsertMenu = useCallback29(() => {
+    insertMenuTriggerRectRef.current = null;
     setInsertMenuAnchor(null);
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
@@ -17080,6 +17094,28 @@ function Toolbar({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [insertMenuAnchor, closeInsertMenu]);
+  const insertMenuOpen = insertMenuAnchor !== null;
+  useLayoutEffect4(() => {
+    if (!insertMenuOpen) return;
+    const menu = insertMenuRef.current;
+    const triggerRect = insertMenuTriggerRectRef.current;
+    if (!menu || !triggerRect) return;
+    const gap = 4;
+    const margin = 8;
+    const spaceBelow = Math.max(0, window.innerHeight - triggerRect.bottom - gap - margin);
+    const spaceAbove = Math.max(0, triggerRect.top - gap - margin);
+    const naturalHeight = Math.max(menu.scrollHeight, menu.getBoundingClientRect().height);
+    const placement = naturalHeight > spaceBelow && spaceAbove > spaceBelow ? "up" : "down";
+    const maxHeight = placement === "up" ? spaceAbove : spaceBelow;
+    const visibleHeight = Math.min(naturalHeight, maxHeight);
+    const top = placement === "up" ? Math.max(margin, triggerRect.top - gap - visibleHeight) : triggerRect.bottom + gap;
+    setInsertMenuAnchor((current) => {
+      if (!current || current.top === top && current.maxHeight === maxHeight && current.placement === placement) {
+        return current;
+      }
+      return { ...current, top, maxHeight, placement };
+    });
+  }, [insertMenuOpen]);
   const [overflowPlacement, setOverflowPlacement] = useState31("down");
   useEffect24(() => {
     if (!showOverflow || !overflowRef.current) return;
@@ -17806,7 +17842,7 @@ ${TASK_LIST_MARKDOWN}
     return Number(m[1]) <= visibleHeadingMax;
   };
   const hasVisibleMediaButtons = MEDIA_BUTTONS.some((b) => isButtonVisible(b.id));
-  const showInsertInOverflow = overflowIndex !== null && overflowIndex <= FIRST_MEDIA_INDEX && hasVisibleMediaButtons;
+  const showInsertInOverflow = showInsertControls && overflowIndex !== null && overflowIndex <= FIRST_MEDIA_INDEX && hasVisibleMediaButtons;
   const isInTable = isWysiwyg ? tiptapEditor.isActive("table") : false;
   const wysiwygTemplate = isWysiwyg ? tiptapEditor.isActive("heading") ? tiptapEditor.getAttributes("heading")?.dataTemplate ?? "" : null : null;
   const isRawView = activeView === "raw";
@@ -18026,17 +18062,17 @@ ${TASK_LIST_MARKDOWN}
       dataTemplateParams: updated.templateParams
     }).run();
   };
-  const showTemplateInOverflow = currentTemplate !== null && clippedContextual.has("template");
-  const showTransitionInOverflow = currentTransition !== null && clippedContextual.has("transition");
+  const showTemplateInOverflow = showFormattingControls && currentTemplate !== null && clippedContextual.has("template");
+  const showTransitionInOverflow = showFormattingControls && currentTransition !== null && clippedContextual.has("transition");
   const showBlockSectionInOverflow = showTemplateInOverflow || showTransitionInOverflow;
   const overflowBlockLabel = currentTemplate ? templateLabel(currentTemplate) : "Heading";
-  const showToolbarOverflow = !findMode && !isPreview && !isCodeMode && (overflowIndex !== null || clippedContextual.size > 0);
+  const showToolbarOverflow = !findMode && !isPreview && !isCodeMode && (showFormattingControls && (overflowIndex !== null || clippedContextual.size > 0) || showInsertInOverflow);
   return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: `squisq-toolbar${findMode ? " squisq-toolbar--find" : ""} ${className || ""}`,
       role: "toolbar",
-      "aria-label": findMode ? "Find toolbar" : "Formatting toolbar",
+      "aria-label": findMode ? "Find toolbar" : showFormattingControls ? "Formatting toolbar" : "Editor toolbar",
       children: [
         /* @__PURE__ */ jsx41(
           "input",
@@ -18107,8 +18143,8 @@ ${TASK_LIST_MARKDOWN}
           );
         }) }),
         findMode ? /* @__PURE__ */ jsx41(FindToolbar, { onClose: () => setFindMode(false) }) : slotAfterTabs,
-        !findMode && !isPreview && !isCodeMode && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
+        !findMode && !isPreview && !isCodeMode && (showFormattingControls || showInsertControls) && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
+          showFormattingControls && groups.map((group, gi) => /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
             gi > 0 && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
             BUTTONS.filter((b) => b.group === group && isButtonVisible(b.id)).map((btn) => {
               const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
@@ -18130,8 +18166,8 @@ ${TASK_LIST_MARKDOWN}
               );
             })
           ] }, group)),
-          /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
-            /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
+          showInsertControls && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
+            showFormattingControls && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
             /* @__PURE__ */ jsx41(
               "button",
               {
@@ -18147,7 +18183,7 @@ ${TASK_LIST_MARKDOWN}
               }
             )
           ] }),
-          currentTemplate !== null && /* @__PURE__ */ jsxs31(
+          showFormattingControls && currentTemplate !== null && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-template-picker${clippedContextual.has("template") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -18167,7 +18203,7 @@ ${TASK_LIST_MARKDOWN}
               ]
             }
           ),
-          currentTransition !== null && /* @__PURE__ */ jsxs31(
+          showFormattingControls && currentTransition !== null && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-transition-picker-group${clippedContextual.has("transition") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -18186,7 +18222,7 @@ ${TASK_LIST_MARKDOWN}
               ]
             }
           ),
-          isInTable && /* @__PURE__ */ jsxs31(
+          showFormattingControls && isInTable && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-table-controls${clippedContextual.has("table") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -18386,6 +18422,7 @@ ${TASK_LIST_MARKDOWN}
             }
           )
         ] }),
+        !findMode && !isPreview && !isCodeMode && !showFormattingControls && !showInsertControls && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-actions" }),
         showToolbarOverflow && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-overflow", ref: overflowRef, children: [
           /* @__PURE__ */ jsx41(
             "button",
@@ -18404,7 +18441,7 @@ ${TASK_LIST_MARKDOWN}
             {
               className: `squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`,
               children: [
-                BUTTONS.slice(overflowIndex ?? BUTTONS.length).filter((b) => isButtonVisible(b.id)).filter((b) => b.group !== "media").map((btn) => {
+                showFormattingControls && BUTTONS.slice(overflowIndex ?? BUTTONS.length).filter((b) => isButtonVisible(b.id)).filter((b) => b.group !== "media").map((btn) => {
                   const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
                   const disabled = btn.id === "image" && !mediaProvider || !buttonAllowed(btn.id);
                   return /* @__PURE__ */ jsxs31(
@@ -18480,7 +18517,7 @@ ${TASK_LIST_MARKDOWN}
                     accentColor: previewSettings?.activeTheme.colors.primary
                   }
                 ) }),
-                isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs31(Fragment13, { children: [
+                showFormattingControls && isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs31(Fragment13, { children: [
                   /* @__PURE__ */ jsx41(
                     "div",
                     {
@@ -18608,7 +18645,13 @@ ${TASK_LIST_MARKDOWN}
               ref: insertMenuRef,
               className: "squisq-insert-menu",
               "data-theme": colorScheme,
-              style: { position: "fixed", top: insertMenuAnchor.top, left: insertMenuAnchor.left },
+              "data-placement": insertMenuAnchor.placement,
+              style: {
+                position: "fixed",
+                top: insertMenuAnchor.top,
+                left: insertMenuAnchor.left,
+                maxHeight: insertMenuAnchor.maxHeight
+              },
               role: "menu",
               children: [
                 showConvertActions && /* @__PURE__ */ jsxs31(Fragment13, { children: [
@@ -22574,7 +22617,7 @@ function mermaidErrorMessage(error) {
 }
 
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback33, useEffect as useEffect27, useId as useId12, useLayoutEffect as useLayoutEffect4, useRef as useRef32, useState as useState36 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect27, useId as useId12, useLayoutEffect as useLayoutEffect5, useRef as useRef32, useState as useState36 } from "react";
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -22704,7 +22747,7 @@ function MermaidDiagramCanvas({
       current = false;
     };
   }, [source, onModelChange, theme]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const measure = () => {
@@ -22725,7 +22768,7 @@ function MermaidDiagramCanvas({
     observer.observe(scroll);
     return () => observer.disconnect();
   }, []);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     setContentSize(readSvgViewBox(svgRootRef.current));
   }, [svg]);
   const fitZoom = contentSize && canvasSize ? calculateFitScale(contentSize, canvasSize) : 1;
@@ -22734,7 +22777,7 @@ function MermaidDiagramCanvas({
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
   }, [fitZoom]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (viewMode !== "fit") return;
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
@@ -22801,7 +22844,7 @@ function MermaidDiagramCanvas({
     selectedNodeId,
     selectedTextId
   ]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const node2 = renamingNodeId ? model2?.nodes.find((candidate) => candidate.id === renamingNodeId) : null;
     const edge2 = renamingEdgeId ? model2?.edges.find((candidate) => candidate.id === renamingEdgeId) : null;
     const text = renamingTextId ? model2 && mermaidEditableTexts(model2).find((candidate) => candidate.id === renamingTextId) : null;
@@ -22814,7 +22857,7 @@ function MermaidDiagramCanvas({
     });
     return () => window.cancelAnimationFrame(frame);
   }, [model2, renamingEdgeId, renamingNodeId, renamingTextId]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const root = svgRootRef.current;
     if (!root || !model2) {
       setSelectionAnchor(null);
@@ -23354,7 +23397,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect5, useMemo as useMemo29, useRef as useRef33, useState as useState37 } from "react";
+import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useMemo as useMemo29, useRef as useRef33, useState as useState37 } from "react";
 import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -23390,7 +23433,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
       )
     })).filter((section) => section.shapes.length > 0);
   }, [query]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const palette = ref.current;
     const anchor = palette?.parentElement;
     if (!palette || !anchor) return;
@@ -23549,7 +23592,7 @@ import { createRoot as createRoot3 } from "react-dom/client";
 import {
   useCallback as useCallback34,
   useEffect as useEffect29,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useRef as useRef34,
   useState as useState38,
   useSyncExternalStore
@@ -24443,7 +24486,7 @@ function useDismissibleMermaidPopover(ref, onClose) {
 }
 function useClampedMermaidPopoverPosition(ref, preferredWidth, preferredMaxHeight) {
   const [position, setPosition] = useState38(null);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const picker = ref.current;
     const anchor = picker?.parentElement;
     if (!picker || !anchor) return;
@@ -24975,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"
@@ -25029,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) {
@@ -25052,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({
@@ -25078,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,
@@ -25087,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;
             });
@@ -25095,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) {
@@ -25124,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.tsx
 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";
+import { Component, createElement as createElement11, useEffect as useEffect33, useMemo as useMemo32, useState as useState42 } from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
+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);
+}
+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);
+    }
+  }) });
+}
+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,
@@ -25142,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";
@@ -25352,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) {
@@ -25379,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]
@@ -25464,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"
           ]
         }
@@ -25483,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,
@@ -25529,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",
@@ -25549,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",
@@ -25593,7 +25812,7 @@ function TreeRowView({
             }
           ),
           /* @__PURE__ */ jsxs39("span", { className: "squisq-tree-controls", children: [
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(
               "span",
               {
                 className: "squisq-tree-drag-handle",
@@ -25602,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,
@@ -25685,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) {
@@ -25731,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,
@@ -25775,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;
@@ -25790,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 };
@@ -25801,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) => {
@@ -25816,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;
           }
         }
       })
@@ -25833,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);
@@ -25860,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,
@@ -25875,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";
@@ -26355,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);
@@ -26379,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
@@ -26389,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) => {
@@ -26404,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);
@@ -26428,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))
@@ -26436,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;
     }
@@ -26509,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
           ] })
@@ -26526,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",
@@ -26543,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}`,
@@ -26562,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,
@@ -26579,7 +26798,7 @@ function TimelineEditorWidget({ editor, blockId }) {
                       }
                     ),
                     editable ? /* @__PURE__ */ jsxs40(Fragment15, { children: [
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx52(
                         "button",
                         {
                           type: "button",
@@ -26588,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",
@@ -26636,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",
@@ -26646,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",
@@ -26673,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",
@@ -26797,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
                       ]
                     }
                   )
@@ -26806,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,
@@ -26834,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 })
       ]
     }
   );
@@ -26848,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 = () => {
@@ -26862,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",
@@ -26886,7 +27105,7 @@ function InlineTrackLabel({
         }
       }
     }
-  ) : /* @__PURE__ */ jsx51(
+  ) : /* @__PURE__ */ jsx52(
     "button",
     {
       type: "button",
@@ -26906,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();
@@ -26936,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,
@@ -26960,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,
@@ -26982,7 +27201,7 @@ function EventInspector({
       )
     ] }),
     /* @__PURE__ */ jsxs40("label", { children: [
-      /* @__PURE__ */ jsx51("span", { children: "Label side" }),
+      /* @__PURE__ */ jsx52("span", { children: "Label side" }),
       /* @__PURE__ */ jsxs40(
         "select",
         {
@@ -26993,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",
         {
@@ -27011,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",
@@ -27031,7 +27250,7 @@ function EventInspector({
           })
         }
       ),
-      /* @__PURE__ */ jsx51("span", { children: "Show callout" })
+      /* @__PURE__ */ jsx52("span", { children: "Show callout" })
     ] }),
     /* @__PURE__ */ jsxs40(
       "button",
@@ -27042,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"
         ]
       }
@@ -27076,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) {
@@ -27121,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;
         },
@@ -27156,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;
@@ -27171,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 };
@@ -27182,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) => {
@@ -27197,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;
           }
         }
       })
@@ -27214,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);
@@ -27225,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);
@@ -27251,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,
@@ -27267,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();
     };
@@ -27319,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,
@@ -27331,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,
@@ -27344,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,
@@ -27373,7 +27592,7 @@ function NumberField({
   onChange
 }) {
   return /* @__PURE__ */ jsxs41("div", { className: "squisq-block-props-numfield", children: [
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53(
       "input",
       {
         type: "number",
@@ -27386,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) {
@@ -27435,7 +27654,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback38, useEffect as useEffect39, useMemo as useMemo35, useRef as useRef40, useState as useState49 } from "react";
+import { useCallback as useCallback38, useEffect as 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";
@@ -27469,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) {
@@ -27525,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]);
@@ -27540,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);
@@ -27551,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) {
@@ -27578,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),
@@ -27594,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) {
@@ -27668,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";
 
@@ -27684,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;
@@ -27778,7 +28000,7 @@ function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "img",
           {
             ref: imgRef,
@@ -27807,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",
@@ -27876,14 +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 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;
@@ -27905,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" },
   {
@@ -27934,15 +28157,23 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
   const placement = normalizeVideoPlacement(rawPlacement);
   const lockToBlock = normalizeLockToBlock(rawLockToBlock);
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
+  const [audioOnly, setAudioOnly] = useState50(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
+  useEffect40(() => {
+    setAudioOnly(false);
+  }, [resolvedSrc]);
+  const handleLoadedMetadata = (event) => {
+    const video = event.currentTarget;
+    setAudioOnly(video.videoWidth <= 0 && video.videoHeight <= 0);
+  };
   return /* @__PURE__ */ jsxs43(
     NodeViewWrapper2,
     {
       as: "div",
-      className: `squisq-inline-video-player squisq-video-node${selected ? " squisq-video-node--selected" : ""}`,
+      className: `${audioOnly ? "squisq-inline-audio-player squisq-video-node--audio-only" : "squisq-inline-video-player"} squisq-video-node${selected ? " squisq-video-node--selected" : ""}`,
       "data-video-placement": placement,
       children: [
-        /* @__PURE__ */ jsxs43(
+        !audioOnly && /* @__PURE__ */ jsxs43(
           "div",
           {
             className: "squisq-video-placement-toolbar",
@@ -27950,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",
@@ -27964,7 +28195,7 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
                 },
                 option.value
               )),
-              placement !== "content" && /* @__PURE__ */ jsx54(
+              placement !== "content" && /* @__PURE__ */ jsx55(
                 "button",
                 {
                   type: "button",
@@ -27980,7 +28211,16 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx54(
+        audioOnly ? /* @__PURE__ */ jsx55(
+          "audio",
+          {
+            "data-drag-handle": true,
+            draggable: true,
+            src: resolvedSrc || void 0,
+            controls,
+            preload: "metadata"
+          }
+        ) : /* @__PURE__ */ jsx55(
           "video",
           {
             "data-drag-handle": true,
@@ -27991,7 +28231,8 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             playsInline: true,
             preload: "metadata",
             width: width ?? void 0,
-            height: height ?? void 0
+            height: height ?? void 0,
+            onLoadedMetadata: handleLoadedMetadata
           }
         )
       ]
@@ -28098,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",
@@ -28163,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({
@@ -28219,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,
@@ -28526,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 {
@@ -28566,6 +28807,7 @@ function WysiwygEditor({
     setTiptapEditor,
     mediaProvider,
     mentionProvider,
+    fenceRenderers,
     blockTagVisibility,
     themeInheritance,
     colorScheme,
@@ -28584,11 +28826,11 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect39(() => {
+  useEffect41(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const [designerState, setDesignerState] = useState49(
+  const [designerState, setDesignerState] = useState51(
     null
   );
   const handleDesignerSave = useCallback38(
@@ -28604,15 +28846,23 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef40(mentionProvider);
-  useEffect39(() => {
+  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);
-  useEffect39(() => {
+  useEffect41(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const frontmatterRef = useRef40(stripFrontmatter(editorSource).frontmatter);
@@ -28629,7 +28879,7 @@ function WysiwygEditor({
     }
   }
   const submitOnEnterRef = useRef40(submitOnEnter);
-  useEffect39(() => {
+  useEffect41(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -28646,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,
@@ -28811,25 +29067,25 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect39(() => {
+  useEffect41(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect39(() => {
+  useEffect41(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef40(null);
-  const [badgeMenu, setBadgeMenu] = useState49(null);
-  const [propsMenu, setPropsMenu] = useState49(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]);
-  useEffect39(() => {
+  useEffect41(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -28885,7 +29141,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect39(() => {
+  useEffect41(() => {
     if (!editor) return;
     const pendingIndex = pendingLocalSourcesRef.current.lastIndexOf(editorSource);
     if (pendingIndex >= 0) {
@@ -28917,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 });
@@ -28942,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
@@ -28968,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}` : ""}`,
@@ -28984,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,
@@ -29013,7 +29269,7 @@ function WysiwygEditor({
             onClose: closeBadgeMenu
           }
         ),
-        propsMenu && /* @__PURE__ */ jsx56(
+        propsMenu && /* @__PURE__ */ jsx57(
           BlockPropertiesPopover,
           {
             anchorRect: propsMenu.rect,
@@ -29045,7 +29301,7 @@ function WysiwygEditor({
             onClose: () => setPropsMenu(null)
           }
         ),
-        designerState && /* @__PURE__ */ jsx56(
+        designerState && /* @__PURE__ */ jsx57(
           TemplateDesigner,
           {
             initial: designerState.initial,
@@ -29142,7 +29398,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect7, useMemo as useMemo37, useRef as useRef41, useState as useState51 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo38, useRef as useRef41, useState as useState53 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -29154,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 useEffect40, useMemo as useMemo36, useState as useState50 } 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] = useState50([]);
-  const [pageEdges, setPageEdges] = useState50(null);
-  useEffect40(() => {
+  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;
@@ -29229,7 +29485,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect40(() => {
+  useEffect42(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -29290,7 +29546,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect40(() => {
+  useEffect42(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -29352,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;
@@ -29522,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;
@@ -29579,13 +29835,13 @@ 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] = useState51(/* @__PURE__ */ new Map());
-  useLayoutEffect7(() => {
+  const [positions, setPositions] = useState53(/* @__PURE__ */ new Map());
+  useLayoutEffect8(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
       return;
@@ -29639,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",
@@ -29656,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"}`,
@@ -29672,7 +29928,7 @@ function InlinePreviewGutter({
             })
           }
         ),
-        items.length > 0 && /* @__PURE__ */ jsx57(
+        items.length > 0 && /* @__PURE__ */ jsx58(
           "svg",
           {
             className: "squisq-inline-preview-connector-svg",
@@ -29695,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,
@@ -29707,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(
@@ -29731,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,
@@ -30100,10 +30356,10 @@ function buildPreviewDoc(doc, options) {
 // src/OutlinePanel.tsx
 import {
   useCallback as useCallback40,
-  useEffect as useEffect41,
-  useMemo as useMemo38,
+  useEffect as useEffect43,
+  useMemo as useMemo39,
   useRef as useRef42,
-  useState as useState52
+  useState as useState54
 } from "react";
 import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate3 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText5 } from "@bendyline/squisq/markdown";
@@ -30205,7 +30461,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 }) {
@@ -30222,9 +30478,9 @@ function OutlinePanel({ width, className, readOnly = false }) {
   const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef42(null);
-  const [draggedBlockId, setDraggedBlockId] = useState52(null);
-  const [dropTarget, setDropTarget] = useState52(null);
-  const 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
@@ -30323,7 +30579,7 @@ function OutlinePanel({ width, className, readOnly = false }) {
     overflow: "auto",
     ...accentColor ? { ["--squisq-outline-accent"]: accentColor } : {}
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "aside",
     {
       ref: paneRef,
@@ -30331,7 +30587,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,
@@ -30405,21 +30661,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",
@@ -30428,7 +30684,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",
@@ -30441,7 +30697,7 @@ function OutlineNode({
                 ) })
               }
             ),
-            /* @__PURE__ */ jsx58(
+            /* @__PURE__ */ jsx59(
               "button",
               {
                 type: "button",
@@ -30450,7 +30706,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",
@@ -30467,7 +30723,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,
@@ -30489,12 +30745,12 @@ function OutlineNode({
 }
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
-  const flatBlocks = useMemo38(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
-  const [activeId, setActiveId] = useState52(null);
-  useEffect41(() => {
+  const flatBlocks = useMemo39(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
+  const [activeId, setActiveId] = useState54(null);
+  useEffect43(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect41(() => {
+  useEffect43(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -30516,7 +30772,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, flatBlocks]);
-  useEffect41(() => {
+  useEffect43(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -30567,7 +30823,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback42, useEffect as useEffect43, useMemo as useMemo40, useRef as useRef44, useState as useState53 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect45, useMemo as useMemo41, useRef as useRef44, useState as useState55 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -30691,8 +30947,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 useEffect42, 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,
@@ -30703,15 +30959,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]
   );
-  useEffect42(() => {
+  useEffect44(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -30767,12 +31023,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" }))
         ]
       }
     )
@@ -30780,14 +31036,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] = useState53(null);
-  const [, setZonesVersion] = useState53(0);
-  const [expandedById, setExpandedById] = useState53({});
+  const [manager, setManager] = useState55(null);
+  const [, setZonesVersion] = useState55(0);
+  const [expandedById, setExpandedById] = useState55({});
   const seenIds = useRef44(/* @__PURE__ */ new Set());
-  useEffect43(() => {
+  useEffect45(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -30800,7 +31056,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 });
@@ -30810,7 +31066,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect43(() => {
+  useEffect45(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -30849,11 +31105,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,
@@ -30873,7 +31129,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,
@@ -30894,7 +31150,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",
@@ -30906,7 +31162,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",
@@ -30917,7 +31173,7 @@ function BlockCardView({
                     fill: "none"
                   }
                 ) }),
-                /* @__PURE__ */ jsx61("span", { children: "Previous" })
+                /* @__PURE__ */ jsx62("span", { children: "Previous" })
               ]
             }
           ),
@@ -30937,8 +31193,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",
@@ -30961,7 +31217,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",
@@ -30971,7 +31227,7 @@ function BlockCardView({
                     fill: "none"
                   }
                 ) }),
-                /* @__PURE__ */ jsx61("span", { children: "Add block" })
+                /* @__PURE__ */ jsx62("span", { children: "Add block" })
               ]
             }
           )
@@ -31246,7 +31502,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback44, useEffect as useEffect46, useMemo as useMemo41, useRef as useRef47, useState as useState56 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect48, useMemo as useMemo42, useRef as useRef47, useState as useState58 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -31374,14 +31630,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
@@ -31405,7 +31661,7 @@ function resolveBlockVisual(doc, block, theme, viewport) {
 }
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback43, useEffect as useEffect44, useRef as useRef45, useState as useState54 } from "react";
+import { useCallback as useCallback43, useEffect as 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));
@@ -31425,8 +31681,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState54(0);
-  const [isPlaying, setIsPlaying] = useState54(false);
+  const [currentTime, setCurrentTime] = useState56(0);
+  const [isPlaying, setIsPlaying] = useState56(false);
   const rafRef = useRef45(null);
   const lastRef = useRef45(0);
   const currentTimeRef = useRef45(0);
@@ -31434,10 +31690,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef45(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect44(() => {
+  useEffect46(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect44(() => {
+  useEffect46(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -31499,9 +31755,9 @@ function timelineMediaLabel(src, kind) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect45, useLayoutEffect as useLayoutEffect8, useRef as useRef46, useState as useState55 } from "react";
+import { useEffect as 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,
@@ -31514,8 +31770,8 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef46(null);
-  const [style, setStyle] = useState55(() => menuStyle(anchor));
-  useLayoutEffect8(() => {
+  const [style, setStyle] = useState57(() => menuStyle(anchor));
+  useLayoutEffect9(() => {
     const panel = panelRef.current;
     if (!panel) return;
     const updatePosition = () => setStyle(menuStyle(anchor, panel));
@@ -31528,7 +31784,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect45(() => {
+  useEffect47(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -31560,10 +31816,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,
@@ -31573,7 +31829,7 @@ function TimelineItemMenu({
               onStartTime: onBlockStartTime,
               onTransition: onBlockTransition
             }
-          ) : /* @__PURE__ */ jsx63(VideoMenu, { target, onPatch: onVideoPatch })
+          ) : /* @__PURE__ */ jsx64(VideoMenu, { target, onPatch: onVideoPatch })
         ]
       }
     ),
@@ -31588,12 +31844,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState55(target.explicitDuration);
-  const [duration, setDuration] = useState55(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState55(
+  const [explicitDuration, setExplicitDuration] = useState57(target.explicitDuration);
+  const [duration, setDuration] = useState57(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState57(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState55(target.transition);
+  const [transition, setTransition] = useState57(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -31606,7 +31862,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",
@@ -31614,10 +31870,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",
@@ -31631,7 +31887,7 @@ function BlockMenu({
         }
       }
     ),
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx64(
       MenuNumberField,
       {
         label: "Start time",
@@ -31645,8 +31901,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,
@@ -31665,11 +31921,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  const [placement, setPlacement] = useState55(target.placement);
-  const [locked, setLocked] = useState55(target.lockToBlock);
-  const [pipSize, setPipSize] = useState55(target.pipSize ?? "");
-  const [pipShape, setPipShape] = useState55(target.pipShape ?? "");
-  const [pipPosition, setPipPosition] = useState55(target.pipPosition ?? "");
+  const [placement, setPlacement] = 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" },
@@ -31678,14 +31934,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",
@@ -31707,7 +31963,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",
@@ -31721,11 +31977,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",
             {
@@ -31742,14 +31998,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",
             {
@@ -31766,14 +32022,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",
             {
@@ -31790,10 +32046,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" })
               ]
             }
           )
@@ -31811,9 +32067,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",
@@ -31826,7 +32082,7 @@ function MenuNumberField({
           onChange: (event) => onChange(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx63("span", { children: "sec" })
+      /* @__PURE__ */ jsx64("span", { children: "sec" })
     ] })
   ] });
 }
@@ -31871,7 +32127,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;
@@ -31894,9 +32150,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,
@@ -31939,14 +32195,14 @@ function TimelineTrack({
     colorScheme
   } = useEditorContext();
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState56(null);
-  const [itemMenu, setItemMenu] = useState56(null);
-  const [pxPerSecond, setPxPerSecond] = useState56(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = 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) {
@@ -31956,16 +32212,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;
@@ -31974,8 +32230,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState56(false);
-  useEffect46(() => {
+  const [scrubbing, setScrubbing] = useState58(false);
+  useEffect48(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -31992,7 +32248,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);
@@ -32013,7 +32269,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef47(null);
-  useEffect46(() => {
+  useEffect48(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -32024,7 +32280,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect46(() => {
+  useEffect48(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -32072,8 +32328,8 @@ function TimelineTrack({
   );
   const zoomIn = useCallback44(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback44(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
-  const [viewportWidth, setViewportWidth] = useState56(0);
-  useEffect46(() => {
+  const [viewportWidth, setViewportWidth] = useState58(0);
+  useEffect48(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -32087,7 +32343,7 @@ function TimelineTrack({
   const dragRef = useRef47(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect46(() => {
+  useEffect48(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -32118,7 +32374,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect46(() => {
+  useEffect48(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback44(
@@ -32201,7 +32457,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",
@@ -32218,7 +32474,7 @@ function TimelineTrack({
         " / ",
         formatClock2(total)
       ] }),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "button",
         {
           type: "button",
@@ -32230,7 +32486,7 @@ function TimelineTrack({
           children: "\u2212"
         }
       ),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "button",
         {
           type: "button",
@@ -32243,8 +32499,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);
@@ -32261,7 +32517,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),
@@ -32269,7 +32525,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",
@@ -32290,8 +32546,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",
@@ -32313,7 +32569,7 @@ function TimelineTrack({
                   children: "\u2026"
                 }
               ),
-              line != null && /* @__PURE__ */ jsx64(
+              line != null && /* @__PURE__ */ jsx65(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -32361,7 +32617,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",
@@ -32398,7 +32654,7 @@ function TimelineTrack({
                     if (next) setMarkdownSource(next);
                   },
                   children: [
-                    c.kind === "video" && /* @__PURE__ */ jsx64(
+                    c.kind === "video" && /* @__PURE__ */ jsx65(
                       TimelineVideoFilmstrip,
                       {
                         src: c.src,
@@ -32407,8 +32663,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",
@@ -32434,7 +32690,7 @@ function TimelineTrack({
                         children: "\u2026"
                       }
                     ),
-                    editable && /* @__PURE__ */ jsx64(
+                    editable && /* @__PURE__ */ jsx65(
                       "span",
                       {
                         className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -32479,7 +32735,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",
@@ -32506,7 +32762,7 @@ function TimelineTrack({
                       { onClick: () => selectClipAt(b.startTime, b.id) }
                     ),
                     children: [
-                      m.kind === "video" && /* @__PURE__ */ jsx64(
+                      m.kind === "video" && /* @__PURE__ */ jsx65(
                         TimelineVideoFilmstrip,
                         {
                           src: m.src,
@@ -32515,8 +32771,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",
@@ -32541,7 +32797,7 @@ function TimelineTrack({
                           children: "\u2026"
                         }
                       ),
-                      m.sourceLine != null && /* @__PURE__ */ jsx64(
+                      m.sourceLine != null && /* @__PURE__ */ jsx65(
                         "span",
                         {
                           className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -32563,7 +32819,7 @@ function TimelineTrack({
           })
         )
       ] }),
-      /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx65(
         "div",
         {
           className: "squisq-timeline-row squisq-timeline-row--ruler",
@@ -32571,10 +32827,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",
@@ -32586,11 +32842,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,
@@ -32599,7 +32855,7 @@ function TimelineTrack({
         basePath
       }
     ) }) }),
-    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx64(
+    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx65(
       TimelineItemMenu,
       {
         anchor: itemMenu.anchor,
@@ -32654,9 +32910,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,
@@ -32664,7 +32920,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
   );
@@ -32677,10 +32933,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",
@@ -32692,8 +32948,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,
@@ -32705,7 +32961,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" })
         ] }) })
       ]
     }
@@ -32718,12 +32974,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 useEffect47, useState as useState57 } 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) {
@@ -32743,8 +32999,8 @@ function preserveEquivalentAudio(previous, next) {
   };
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2) {
-  const [projection, setProjection] = useState57(null);
-  useEffect47(() => {
+  const [projection, setProjection] = useState59(null);
+  useEffect49(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -32778,7 +33034,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,
@@ -32810,11 +33066,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
@@ -32823,7 +33079,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,
@@ -32849,11 +33105,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",
@@ -32865,7 +33121,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,
@@ -32891,7 +33147,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" }) }) })
       ]
     }
   );
@@ -32908,7 +33164,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,
@@ -32925,7 +33181,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",
           {
@@ -32938,7 +33194,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",
@@ -32951,7 +33207,7 @@ function TimelineToolbar({
                     strokeWidth: "1.4"
                   }
                 ),
-                /* @__PURE__ */ jsx67(
+                /* @__PURE__ */ jsx68(
                   "path",
                   {
                     d: "M10 5.5 13.5 4v7L10 9.5z",
@@ -32962,7 +33218,7 @@ function TimelineToolbar({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx67("span", { children: "Video monitor" })
+              /* @__PURE__ */ jsx68("span", { children: "Video monitor" })
             ]
           }
         ),
@@ -32978,7 +33234,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",
@@ -32991,10 +33247,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" })
             ]
           }
         )
@@ -33004,7 +33260,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback45, useEffect as useEffect48, useMemo as useMemo44, useRef as useRef48, useState as useState58 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect50, useMemo as useMemo45, useRef as useRef48, useState as useState60 } from "react";
 import { parseMarkdown as parseMarkdown9 } from "@bendyline/squisq/markdown";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -33039,7 +33295,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() {
@@ -33070,10 +33326,13 @@ function PlainHtmlPreview({
   style,
   globalKeyboardShortcuts = false,
   onFrameChange,
-  onLinkClick
+  onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode
 }) {
   const iframeRef = useRef48(null);
   const removeFrameLinkHandlerRef = useRef48(() => void 0);
+  const removeFrameCodeCopyControlsRef = useRef48(() => void 0);
   const setIframeRef = useCallback45(
     (frame) => {
       iframeRef.current = frame;
@@ -33081,9 +33340,9 @@ function PlainHtmlPreview({
     },
     [onFrameChange]
   );
-  const mdDoc = useMemo44(() => parseMarkdown9(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState58(null);
-  useEffect48(() => {
+  const mdDoc = useMemo45(() => parseMarkdown9(markdown), [markdown]);
+  const [resolvedImages, setResolvedImages] = useState60(null);
+  useEffect50(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -33111,16 +33370,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] = useState58(() => cachedRender);
-  useEffect48(() => {
+  const iconsCss = useMemo45(() => collectInlineFontAwesomeCss(), []);
+  const [renderFn, setRenderFn] = useState60(() => cachedRender);
+  useEffect50(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -33130,7 +33389,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]
   );
@@ -33153,11 +33412,107 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect48(() => {
+  useEffect50(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
-  useEffect48(() => {
+  const installFrameCodeCopyControls = useCallback45(() => {
+    removeFrameCodeCopyControlsRef.current();
+    removeFrameCodeCopyControlsRef.current = () => void 0;
+    const frameDocument = iframeRef.current?.contentDocument;
+    if (!frameDocument || !showCodeCopyButton) return;
+    const style2 = frameDocument.createElement("style");
+    style2.dataset.squisqCodeCopy = "";
+    style2.textContent = `
+      .squisq-preview-code-copy-frame { position: relative; margin: 1em 0; }
+      .squisq-preview-code-copy-frame > pre { margin: 0; padding-right: 5rem; }
+      .squisq-preview-code-copy {
+        position: absolute; z-index: 1; top: .55rem; right: .55rem;
+        min-width: 3.7rem; padding: .28rem .5rem;
+        border: 1px solid color-mix(in srgb, var(--plain-text) 20%, transparent);
+        border-radius: 5px;
+        background: color-mix(in srgb, var(--plain-bg) 90%, transparent);
+        color: inherit; font: 500 .72rem/1.2 system-ui, sans-serif;
+        cursor: pointer; opacity: .58;
+        transition: opacity 120ms ease, background-color 120ms ease;
+      }
+      .squisq-preview-code-copy-frame:hover > .squisq-preview-code-copy,
+      .squisq-preview-code-copy:focus-visible,
+      .squisq-preview-code-copy[data-copy-state="copied"],
+      .squisq-preview-code-copy[data-copy-state="failed"] { opacity: 1; }
+      .squisq-preview-code-copy:hover { background: var(--plain-bg); }
+      .squisq-preview-code-copy:disabled { cursor: wait; }
+    `;
+    frameDocument.head.append(style2);
+    const cleanups = [];
+    const wrappers = [];
+    const timers = /* @__PURE__ */ new Set();
+    for (const code of frameDocument.querySelectorAll(
+      "pre.squisq-code-block > code"
+    )) {
+      const pre = code.parentElement;
+      if (!pre?.parentElement) continue;
+      const wrapper = frameDocument.createElement("div");
+      wrapper.className = "squisq-preview-code-copy-frame";
+      pre.replaceWith(wrapper);
+      wrapper.append(pre);
+      wrappers.push(wrapper);
+      const button = frameDocument.createElement("button");
+      button.type = "button";
+      button.className = "squisq-preview-code-copy";
+      button.dataset.copyState = "idle";
+      button.textContent = "Copy";
+      button.setAttribute("aria-label", "Copy code to clipboard");
+      wrapper.append(button);
+      const languageClass = Array.from(code.classList).find((name) => name.startsWith("language-"));
+      const language = languageClass?.slice("language-".length) || void 0;
+      const handleCopy = async () => {
+        if (button.dataset.copyState === "copying") return;
+        button.dataset.copyState = "copying";
+        button.textContent = "Copying\u2026";
+        button.disabled = true;
+        try {
+          if (onCopyCode) {
+            await onCopyCode(code.textContent ?? "", language === void 0 ? {} : { language });
+          } else {
+            const clipboard = frameDocument.defaultView?.navigator.clipboard ?? (typeof navigator === "undefined" ? void 0 : navigator.clipboard);
+            if (!clipboard?.writeText) throw new Error("Clipboard access is unavailable");
+            await clipboard.writeText(code.textContent ?? "");
+          }
+          button.dataset.copyState = "copied";
+          button.textContent = "Copied";
+        } catch {
+          button.dataset.copyState = "failed";
+          button.textContent = "Copy failed";
+        } finally {
+          button.disabled = false;
+          const timer = setTimeout(() => {
+            timers.delete(timer);
+            button.dataset.copyState = "idle";
+            button.textContent = "Copy";
+          }, 1600);
+          timers.add(timer);
+        }
+      };
+      button.addEventListener("click", handleCopy);
+      cleanups.push(() => button.removeEventListener("click", handleCopy));
+    }
+    removeFrameCodeCopyControlsRef.current = () => {
+      for (const cleanup of cleanups) cleanup();
+      for (const timer of timers) clearTimeout(timer);
+      timers.clear();
+      for (const wrapper of wrappers) {
+        const pre = wrapper.firstElementChild;
+        if (pre && wrapper.parentElement) wrapper.replaceWith(pre);
+      }
+      style2.remove();
+    };
+  }, [onCopyCode, showCodeCopyButton]);
+  useEffect50(() => {
+    installFrameCodeCopyControls();
+    return () => removeFrameCodeCopyControlsRef.current();
+  }, [html, installFrameCodeCopyControls]);
+  useEffect50(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -33181,7 +33536,7 @@ function PlainHtmlPreview({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [globalKeyboardShortcuts]);
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "iframe",
     {
       ref: setIframeRef,
@@ -33189,7 +33544,10 @@ function PlainHtmlPreview({
       "data-testid": "plain-html-preview",
       title: title ?? "HTML preview",
       srcDoc: html,
-      onLoad: installFrameLinkHandler,
+      onLoad: () => {
+        installFrameLinkHandler();
+        installFrameCodeCopyControls();
+      },
       sandbox: "allow-same-origin",
       style: { ...IFRAME_STYLE, ...style }
     }
@@ -33233,7 +33591,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState61, useEffect as useEffect52, useMemo as useMemo48, useCallback as useCallback49, useRef as useRef52 } from "react";
+import { useState as 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";
@@ -33372,15 +33730,15 @@ import {
   createContext as createContext5,
   useCallback as useCallback46,
   useContext as useContext5,
-  useEffect as useEffect49,
+  useEffect as useEffect51,
   useId as useId14,
-  useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo45,
+  useLayoutEffect as useLayoutEffect10,
+  useMemo as useMemo46,
   useRef as useRef49,
-  useState as useState59
+  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);
@@ -33460,10 +33818,10 @@ function PresentationModeProvider({
   const { activeView, colorScheme, doc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
   const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
-  const [selectedTarget, setSelectedTarget] = useState59("control");
-  const [activeTarget, setActiveTarget] = useState59(null);
-  const [popupRoot, setPopupRoot] = useState59(null);
-  const [error, setError] = useState59(null);
+  const [selectedTarget, setSelectedTarget] = 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);
@@ -33471,7 +33829,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"] : [],
@@ -33606,12 +33964,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect49(() => {
+  useEffect51(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect49(() => {
+  useEffect51(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -33623,7 +33981,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect49(() => {
+  useEffect51(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -33632,10 +33990,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect49(() => {
+  useEffect51(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect49(() => {
+  useEffect51(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -33643,7 +34001,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect49(() => {
+  useEffect51(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -33655,12 +34013,12 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect49(() => {
+  useEffect51(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useEffect49(
+  useEffect51(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -33673,7 +34031,7 @@ function PresentationModeProvider({
     },
     [rootRef]
   );
-  const value = useMemo45(
+  const value = useMemo46(
     () => ({
       selectedTarget,
       activeTarget,
@@ -33712,8 +34070,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;
@@ -33722,7 +34080,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
   ] });
@@ -33763,8 +34121,8 @@ function PresentationModeControl() {
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef49(null);
   const menuRef = useRef49(null);
-  const [open, setOpen] = useState59(false);
-  const [anchor, setAnchor] = useState59(null);
+  const [open, setOpen] = 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(() => {
@@ -33789,7 +34147,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect49(() => {
+  useEffect51(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -33812,14 +34170,14 @@ function PresentationModeControl() {
       window.removeEventListener("scroll", updatePosition, true);
     };
   }, [closeMenu, open, updatePosition]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!open || !anchor) return;
     const checked = menuRef.current?.querySelector('[aria-checked="true"]');
     const first = menuRef.current?.querySelector('[role="menuitemradio"]');
     (checked ?? first)?.focus();
   }, [anchor, open]);
   return /* @__PURE__ */ jsxs54("div", { className: "squisq-presentation-control", children: [
-    /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsx70(
       "button",
       {
         type: "button",
@@ -33828,10 +34186,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,
@@ -33847,11 +34205,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,
@@ -33895,24 +34253,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" })
                     }
                   )
                 ]
@@ -33932,12 +34290,12 @@ import {
   createContext as createContext6,
   useCallback as useCallback47,
   useContext as useContext6,
-  useEffect as useEffect50,
-  useMemo as useMemo46,
+  useEffect as useEffect52,
+  useMemo as useMemo47,
   useRef as useRef50,
-  useState as useState60
+  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);
@@ -33950,8 +34308,8 @@ function usePrintModeOptional() {
 function PrintModeProvider({ rootRef, children }) {
   const { activeView } = useEditorContext();
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
-  const [active, setActive] = useState60(false);
-  const [slidesPerPage, setSlidesPerPage] = useState60(1);
+  const [active, setActive] = useState62(false);
+  const [slidesPerPage, setSlidesPerPage] = useState62(1);
   const customPrintHandlerRef = useRef50(null);
   const printAncestorsRef = useRef50([]);
   const unmarkPrinting = useCallback47(() => {
@@ -34002,7 +34360,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect50(() => {
+  useEffect52(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -34011,10 +34369,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect50(() => {
+  useEffect52(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect50(() => {
+  useEffect52(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -34036,7 +34394,7 @@ function PrintModeProvider({ rootRef, children }) {
       handleAfterPrint();
     };
   }, [active, close, markPrinting, rootRef, unmarkPrinting]);
-  const value = useMemo46(
+  const value = useMemo47(
     () => ({
       active,
       slidesPerPage,
@@ -34048,7 +34406,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();
@@ -34061,8 +34419,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" })
       ]
     }
   );
@@ -34072,8 +34430,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",
@@ -34082,7 +34440,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",
@@ -34092,20 +34450,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 useEffect51, 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,
@@ -34117,7 +34475,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) {
@@ -34144,7 +34502,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 {
@@ -34156,7 +34514,7 @@ function PrintPreview({
     };
   }, [previewDoc?.startBlock, showCover, theme, viewport]);
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect51(() => {
+  useEffect53(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -34166,7 +34524,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,
@@ -34180,8 +34538,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",
@@ -34211,14 +34569,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,
@@ -34232,19 +34590,21 @@ 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,
   workspaceContainer,
-  onLinkClick
+  onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode
 }) {
   const {
     doc,
@@ -34256,7 +34616,8 @@ function PreviewPanel({
     bumpMediaRevision,
     allowRecording,
     colorScheme,
-    fileName
+    fileName,
+    fenceRenderers
   } = useEditorContext();
   const mediaProvider = useMediaProvider2();
   const presentation = usePresentationModeOptional();
@@ -34280,7 +34641,7 @@ function PreviewPanel({
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
-  const [playbackState, setPlaybackState] = useState61(null);
+  const [playbackState, setPlaybackState] = useState63(null);
   const handlePlaybackStateChange = useCallback49((next) => {
     setPlaybackState(next);
   }, []);
@@ -34292,7 +34653,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 {
@@ -34311,18 +34672,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";
-  useEffect52(() => {
+  useEffect54(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect52(() => {
+  useEffect54(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -34385,22 +34746,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,
@@ -34417,7 +34778,7 @@ function PreviewPanel({
       );
     }
     if (isDocumentMode) {
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx73(
         PlainHtmlPreview,
         {
           markdown: documentMarkdown,
@@ -34426,13 +34787,15 @@ function PreviewPanel({
           mediaRevision,
           theme: activeTheme,
           globalKeyboardShortcuts: !audience,
-          onLinkClick
+          onLinkClick,
+          showCodeCopyButton,
+          onCopyCode
         }
       );
     }
     if (isNarrateMode) {
       if (audience) return null;
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx73(
         TeleprompterView,
         {
           doc,
@@ -34451,7 +34814,7 @@ function PreviewPanel({
       );
     }
     if (isPageMode) {
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx73(
         LinearDocView2,
         {
           doc: contentDoc ?? doc,
@@ -34460,15 +34823,18 @@ function PreviewPanel({
           theme: activeTheme,
           globalKeyboardShortcuts: !audience,
           showCover: activeCoverSlide,
-          transformPage: activeTransformStyle ? resolveTransformStyle2(activeTransformStyle).page : void 0
+          transformPage: activeTransformStyle ? resolveTransformStyle2(activeTransformStyle).page : void 0,
+          showCodeCopyButton,
+          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,
@@ -34494,6 +34860,8 @@ function PreviewPanel({
         audioController: audience ? followerAudioController : void 0,
         enableSwipe: !audience,
         globalKeyboardShortcuts: !audience,
+        showCodeCopyButton,
+        onCopyCode,
         onPlaybackStateChange: !audience && audienceWindowOpen ? handlePlaybackStateChange : void 0
       },
       `${audience ? "audience" : "primary"}-${activeTransformStyle || "none"}`
@@ -34509,7 +34877,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 || ""}`,
@@ -34522,16 +34890,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,
@@ -34549,8 +34917,8 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState62, useEffect as useEffect53, 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`;
@@ -34614,12 +34982,12 @@ function MediaBin({
   isRecorderOpen = false,
   allowBinaryDownloads = true
 }) {
-  const [entries, setEntries] = useState62([]);
-  const [thumbUrls, setThumbUrls] = useState62({});
-  const [loading, setLoading] = useState62(false);
-  const [isDropActive, setIsDropActive] = useState62(false);
-  const [downloadingPath, setDownloadingPath] = useState62(null);
-  const [contextMenu, setContextMenu] = useState62(null);
+  const [entries, setEntries] = 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);
@@ -34641,7 +35009,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect53(() => {
+  useEffect55(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -34662,7 +35030,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect53(() => {
+  useEffect55(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -34867,12 +35235,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",
@@ -34888,10 +35256,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);
@@ -34923,7 +35291,7 @@ ${formatSize(entry.size)}`,
                 onDragStart: handleDragStart,
                 onKeyDown: (e2) => handleItemKeyDown(entry, e2),
                 children: [
-                  thumb ? /* @__PURE__ */ jsx73(
+                  thumb ? /* @__PURE__ */ jsx74(
                     "img",
                     {
                       src: thumb,
@@ -34931,15 +35299,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",
@@ -34953,7 +35321,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" })
                     }
                   )
                 ]
@@ -34963,11 +35331,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,
@@ -34975,7 +35343,7 @@ ${formatSize(entry.size)}`,
             role: "menu",
             "aria-label": `${contextMenu.entry.name} actions`,
             style: contextMenuStyle,
-            children: /* @__PURE__ */ jsx73(
+            children: /* @__PURE__ */ jsx74(
               "button",
               {
                 type: "button",
@@ -34988,7 +35356,7 @@ ${formatSize(entry.size)}`,
             )
           }
         ),
-        /* @__PURE__ */ jsx73(
+        /* @__PURE__ */ jsx74(
           "input",
           {
             ref: fileInputRef,
@@ -35004,8 +35372,8 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState63 } 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,
@@ -35013,8 +35381,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",
@@ -35027,7 +35395,7 @@ function DropZoneOverlay({
       }
     ),
     showText && /* @__PURE__ */ jsxs59(Fragment21, { children: [
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx75(
         DropZone,
         {
           target: "insert",
@@ -35038,7 +35406,7 @@ function DropZoneOverlay({
           variant: "insert"
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx75(
         DropZone,
         {
           target: "replace",
@@ -35061,7 +35429,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState63(false);
+  const [isHovering, setIsHovering] = useState65(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -35096,16 +35464,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 useEffect54, useLayoutEffect as useLayoutEffect10, useRef as useRef54, useState as useState64 } 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
@@ -35118,15 +35486,15 @@ 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] = useState64(null);
+  const [state, setState3] = useState66(null);
   const tooltipRef = useRef54(null);
   const timerRef = useRef54(null);
   const currentTargetRef = useRef54(null);
   const visibleRef = useRef54(false);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
     if (!node2) return;
@@ -35137,7 +35505,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect54(() => {
+  useEffect56(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -35203,7 +35571,7 @@ function TooltipLayer() {
   }, []);
   if (!state) return null;
   return createPortal14(
-    /* @__PURE__ */ jsx75(
+    /* @__PURE__ */ jsx76(
       "div",
       {
         role: "tooltip",
@@ -35223,35 +35591,35 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect55, useRef as useRef55, useState as useState65, useCallback as useCallback51, useMemo as useMemo50 } from "react";
+import { useEffect as 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,
@@ -35505,7 +35873,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",
@@ -35515,6 +35883,8 @@ function EditorShell({
   basePath = "/",
   onChange,
   onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode,
   colorScheme = "light",
   className,
   height = "100vh",
@@ -35528,6 +35898,8 @@ function EditorShell({
   versioningAutoSaveIdleMs,
   onSaveVersion,
   showFilesToggle,
+  showFormattingControls = hostMode !== "chat",
+  showInsertControls = true,
   allowBinaryDownloads = true,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
@@ -35551,6 +35923,7 @@ function EditorShell({
   onFindModeChange,
   mentionProvider,
   documentLinkProvider,
+  fenceRenderers,
   linkSchemes,
   allowRecording = true,
   allowNarrate = true,
@@ -35574,14 +35947,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,
@@ -35598,6 +35971,7 @@ function EditorShell({
       imageDisplayMode,
       mentionProvider,
       documentLinkProvider,
+      fenceRenderers,
       linkSchemes,
       allowRecording,
       allowNarrate,
@@ -35614,13 +35988,15 @@ function EditorShell({
       themeInheritance,
       viewPreferences,
       onViewPreferencesChange,
-      children: /* @__PURE__ */ jsx77(
+      children: /* @__PURE__ */ jsx78(
         EditorShellInner,
         {
           basePath,
           defaultViewportPreset,
           onChange,
           onLinkClick,
+          showCodeCopyButton,
+          onCopyCode,
           className,
           height,
           minHeight,
@@ -35629,6 +36005,8 @@ function EditorShell({
           mediaProvider: effectiveMediaProvider ?? null,
           workspaceContainer: effectiveContainer,
           filesToggleEnabled,
+          showFormattingControls,
+          showInsertControls,
           allowBinaryDownloads,
           toolbarSlotLeft,
           toolbarSlotAfterActions,
@@ -35663,11 +36041,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({
@@ -35676,13 +36054,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 })
     }
   );
 }
@@ -35691,6 +36069,8 @@ function EditorShellInner({
   defaultViewportPreset,
   onChange,
   onLinkClick,
+  showCodeCopyButton,
+  onCopyCode,
   className,
   height,
   minHeight,
@@ -35699,6 +36079,8 @@ function EditorShellInner({
   mediaProvider,
   workspaceContainer,
   filesToggleEnabled,
+  showFormattingControls,
+  showInsertControls,
   allowBinaryDownloads,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
@@ -35767,7 +36149,7 @@ function EditorShellInner({
     workspaceContainer
   );
   const timelineDoc = timelineProjection?.contentDoc ?? doc;
-  const timelineRawSchedule = useMemo50(
+  const timelineRawSchedule = useMemo51(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc) : [],
     [timelineDoc]
   );
@@ -35776,19 +36158,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)
@@ -35797,15 +36179,15 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState65(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState65(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState67(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState67(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState65(false);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState65(0);
-  const [mediaCount, setMediaCount] = useState65(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState65(false);
+  const [showFiles, setShowFiles] = 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]
   );
@@ -35815,13 +36197,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect55(() => {
+  useEffect57(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect55(() => {
+  useEffect57(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect55(() => {
+  useEffect57(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -35930,7 +36312,7 @@ ${snippet}` : snippet);
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect55(() => {
+  useEffect57(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback51(
@@ -36018,7 +36400,7 @@ ${snippet}` : snippet);
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsx77(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx78(
           PreviewSettingsProvider,
           {
             doc,
@@ -36033,19 +36415,21 @@ ${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,
+                      showFormattingControls,
+                      showInsertControls,
                       hostMode
                     }
                   ) }),
@@ -36074,7 +36458,7 @@ ${snippet}` : snippet);
                               position: "relative"
                             },
                             children: [
-                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx77(
+                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx78(
                                 ImageEditor,
                                 {
                                   filesContainer: imageEditorContainer,
@@ -36084,10 +36468,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,
@@ -36096,7 +36480,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",
@@ -36107,9 +36491,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,
@@ -36120,8 +36504,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,
@@ -36130,7 +36514,7 @@ ${snippet}` : snippet);
                                     onPrev: prevBlock,
                                     onNext: nextBlock,
                                     onAdd: addBlock,
-                                    children: /* @__PURE__ */ jsx77(
+                                    children: /* @__PURE__ */ jsx78(
                                       WysiwygEditor,
                                       {
                                         submitOnEnter,
@@ -36142,8 +36526,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,
@@ -36153,18 +36537,20 @@ ${snippet}` : snippet);
                                   "inline"
                                 )
                               ] }, "wysiwyg-shell"),
-                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx77(
+                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx78(
                                 PreviewPanel,
                                 {
                                   basePath,
                                   workspaceContainer,
-                                  onLinkClick
+                                  onLinkClick,
+                                  showCodeCopyButton,
+                                  onCopyCode
                                 }
                               )
                             ]
                           }
                         ),
-                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx77(
+                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx78(
                           TimelineVideoPanel,
                           {
                             schedule: timelineVideoSchedule,
@@ -36174,7 +36560,7 @@ ${snippet}` : snippet);
                             onClose: () => setTimelineVideoVisible(false)
                           }
                         ),
-                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx77(
+                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx78(
                           TimelineCompositionPanel,
                           {
                             doc,
@@ -36184,7 +36570,7 @@ ${snippet}` : snippet);
                             onClose: () => setTimelineCompositionVisible(false)
                           }
                         ),
-                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx77(
+                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx78(
                           MediaBin,
                           {
                             mediaProvider,
@@ -36199,8 +36585,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,
@@ -36211,7 +36597,7 @@ ${snippet}` : snippet);
                       ]
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx77(
+                  isTimelineMode && /* @__PURE__ */ jsx78(
                     TimelineToolbar,
                     {
                       literalVideoVisible: timelineVideoVisible,
@@ -36222,7 +36608,7 @@ ${snippet}` : snippet);
                       onToggleComposition: () => setTimelineCompositionVisible((visible) => !visible)
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx77(
+                  isTimelineMode && /* @__PURE__ */ jsx78(
                     TimelineTrack,
                     {
                       doc: timelineDoc,
@@ -36231,8 +36617,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,
@@ -36245,8 +36631,8 @@ ${snippet}` : snippet);
             )
           }
         ) }),
-        /* @__PURE__ */ jsx77(TooltipLayer, {}),
-        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(TooltipLayer, {}),
+        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx78(
           ImageEditModal,
           {
             relativePath: imageEditTarget,
@@ -36281,7 +36667,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++) {
@@ -36292,9 +36678,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState65(null);
-  const [resolveError, setResolveError] = useState65(null);
-  useEffect55(() => {
+  const [initialSrc, setInitialSrc] = useState67(null);
+  const [resolveError, setResolveError] = useState67(null);
+  useEffect57(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -36324,7 +36710,7 @@ function ImageEditModal({
     },
     [mediaProvider, relativePath, onSaved]
   );
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       ref: modalRef,
@@ -36338,9 +36724,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",
@@ -36352,10 +36738,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,
@@ -36474,6 +36860,7 @@ export {
   removeNodeOp,
   asciiDiagramToCanvas,
   useAsciiDiagramData,
+  mapFenceEntries,
   REPAIRABLE_KEY,
   isRepairableFence,
   findRepairableBlockPos,
@@ -36482,6 +36869,8 @@ export {
   applyRepairCommand,
   applyAsciiDiagramCommand,
   AsciiDiagramWidget,
+  FENCE_WIDGET_CONTAINED_EVENTS,
+  containFenceWidgetEvents,
   findAsciiDiagramBlockPos,
   isAsciiSourceVisible,
   toggleAsciiSource,
@@ -36513,6 +36902,10 @@ export {
   isCodeSnippetNode,
   findCodeSnippetBlockPos,
   CodeSnippetExtension,
+  HOST_FENCE_KEY,
+  findHostFenceBlockPos,
+  replaceHostFenceText,
+  HostFenceExtension,
   useTreeViewData,
   sanitizeTreeLabel,
   renameItemOp,