@bendyline/squisq-editor-react 2.7.1 → 2.7.2

package/dist/{chunk-BYXVO34Z.js → chunk-7K4LSSNL.js}

@@ -22616,8 +22616,71 @@ function mermaidErrorMessage(error) {
   return message || "Unknown Mermaid rendering error.";
 }
 
+// src/mermaid/mermaidSurfaceTheme.ts
+import { useEffect as useEffect27, useMemo as useMemo29, useState as useState36 } from "react";
+import { relativeLuminance } from "@bendyline/squisq/schemas";
+var EDITOR_SURFACE = {
+  light: {
+    background: "#ffffff",
+    backgroundLight: "#f5f5f5",
+    text: "#1f2937",
+    textMuted: "#6b7280"
+  },
+  dark: {
+    background: "#111827",
+    backgroundLight: "#1f2937",
+    text: "#e5e7eb",
+    textMuted: "#9ca3af"
+  }
+};
+function mermaidSurfaceScheme(theme) {
+  return relativeLuminance(theme.colors.background) < 0.5 ? "dark" : "light";
+}
+function adaptThemeToSurface(theme, scheme) {
+  return { ...theme, colors: { ...theme.colors, ...EDITOR_SURFACE[scheme] } };
+}
+function readHostSurface(host) {
+  const inheritance = host?.closest("[data-theme-inheritance]")?.dataset.themeInheritance;
+  return {
+    scheme: host?.closest("[data-theme]")?.dataset.theme === "dark" ? "dark" : "light",
+    inheritsThemeColors: inheritance === "fonts-colors"
+  };
+}
+function applyHostSurface(surface, theme) {
+  return surface.inheritsThemeColors ? theme : adaptThemeToSurface(theme, surface.scheme);
+}
+function resolveMermaidSurfaceTheme(host, theme) {
+  return applyHostSurface(readHostSurface(host), theme);
+}
+function useMermaidSurfaceTheme(host, theme) {
+  const [surface, setSurface] = useState36(() => readHostSurface(host));
+  useEffect27(() => {
+    const sync = () => setSurface((current) => {
+      const next = readHostSurface(host);
+      return current.scheme === next.scheme && current.inheritsThemeColors === next.inheritsThemeColors ? current : next;
+    });
+    sync();
+    if (typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(sync);
+    const ancestors = new Set(
+      [
+        host?.closest("[data-theme]"),
+        host?.closest("[data-theme-inheritance]")
+      ].filter((element) => Boolean(element))
+    );
+    for (const ancestor of ancestors) {
+      observer.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["data-theme", "data-theme-inheritance"]
+      });
+    }
+    return () => observer.disconnect();
+  }, [host]);
+  return useMemo29(() => applyHostSurface(surface, theme), [surface, theme]);
+}
+
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback33, useEffect as useEffect27, useId as useId12, useLayoutEffect as useLayoutEffect5, useRef as useRef32, useState as useState36 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect28, useId as useId12, useLayoutEffect as useLayoutEffect5, useRef as useRef32, useState as useState37 } from "react";
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -22681,20 +22744,20 @@ function MermaidDiagramCanvas({
   const renameInputRef = useRef32(null);
   const panDragRef = useRef32(null);
   const renameHintId = useId12();
-  const [svg, setSvg] = useState36("");
-  const [model2, setModel] = useState36(null);
-  const [diagramType, setDiagramType] = useState36("mermaid");
-  const [error, setError] = useState36("");
-  const [rendering, setRendering] = useState36(true);
-  const [zoom, setZoom] = useState36(1);
-  const [viewMode, setViewMode] = useState36("fit");
-  const [contentSize, setContentSize] = useState36(null);
-  const [canvasSize, setCanvasSize] = useState36(null);
-  const [pan, setPan] = useState36({ x: 0, y: 0 });
-  const [panning, setPanning] = useState36(false);
-  const [selectionAnchor, setSelectionAnchor] = useState36(null);
-  const [renameValue, setRenameValue] = useState36("");
-  useEffect27(() => {
+  const [svg, setSvg] = useState37("");
+  const [model2, setModel] = useState37(null);
+  const [diagramType, setDiagramType] = useState37("mermaid");
+  const [error, setError] = useState37("");
+  const [rendering, setRendering] = useState37(true);
+  const [zoom, setZoom] = useState37(1);
+  const [viewMode, setViewMode] = useState37("fit");
+  const [contentSize, setContentSize] = useState37(null);
+  const [canvasSize, setCanvasSize] = useState37(null);
+  const [pan, setPan] = useState37({ x: 0, y: 0 });
+  const [panning, setPanning] = useState37(false);
+  const [selectionAnchor, setSelectionAnchor] = useState37(null);
+  const [renameValue, setRenameValue] = useState37("");
+  useEffect28(() => {
     if (!panning) return;
     const finish = () => {
       panDragRef.current = null;
@@ -22722,7 +22785,7 @@ function MermaidDiagramCanvas({
       window.removeEventListener("blur", finish);
     };
   }, [panning]);
-  useEffect27(() => {
+  useEffect28(() => {
     let current = true;
     const id = `squisq-mermaid-svg-${++renderSequence}`;
     setRendering(true);
@@ -22993,7 +23056,7 @@ function MermaidDiagramCanvas({
     updateSelectionAnchor,
     zoom
   ]);
-  useEffect27(() => {
+  useEffect28(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const update = () => updateSelectionAnchor();
@@ -23130,6 +23193,7 @@ function MermaidDiagramCanvas({
     {
       className: "squisq-mermaid-canvas",
       "aria-label": `${diagramType} diagram editor`,
+      "data-surface": mermaidSurfaceScheme(theme),
       style: { background: theme.colors.backgroundLight, color: theme.colors.text },
       children: [
         /* @__PURE__ */ jsx46(
@@ -23397,7 +23461,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useMemo as useMemo29, useRef as useRef33, useState as useState37 } from "react";
+import { useEffect as useEffect29, useLayoutEffect as useLayoutEffect6, useMemo as useMemo30, useRef as useRef33, useState as useState38 } from "react";
 import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -23405,10 +23469,10 @@ var PALETTE_MAX_HEIGHT = 520;
 var PALETTE_GAP = 6;
 var VIEWPORT_GUTTER = 8;
 function MermaidShapePalette({ selected, onPick, onClose }) {
-  const [query, setQuery] = useState37("");
-  const [position, setPosition] = useState37(null);
+  const [query, setQuery] = useState38("");
+  const [position, setPosition] = useState38(null);
   const ref = useRef33(null);
-  useEffect28(() => {
+  useEffect29(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -23424,7 +23488,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [onClose]);
-  const sections = useMemo29(() => {
+  const sections = useMemo30(() => {
     const normalized = query.trim().toLowerCase();
     return CATEGORIES.map((category) => ({
       category,
@@ -23579,7 +23643,7 @@ function MermaidShapeThumb({ shape }) {
 }
 
 // src/mermaid/mermaidData.ts
-import { useEffect as useEffect30, useMemo as useMemo30, useState as useState39 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo31, useState as useState40 } from "react";
 
 // src/mermaid/MermaidDiagramExtension.ts
 import { Extension as Extension5 } from "@tiptap/core";
@@ -23591,10 +23655,10 @@ import { createRoot as createRoot3 } from "react-dom/client";
 // src/mermaid/MermaidDiagramWidget.tsx
 import {
   useCallback as useCallback34,
-  useEffect as useEffect29,
+  useEffect as useEffect30,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef34,
-  useState as useState38,
+  useState as useState39,
   useSyncExternalStore
 } from "react";
 
@@ -23957,21 +24021,22 @@ function MermaidDiagramWidget({
   themeStore
 }) {
   const data = useMermaidDiagramData(editor, blockId);
-  const theme = useSyncExternalStore(
+  const docTheme = useSyncExternalStore(
     themeStore?.subscribe ?? subscribeToDefaultTheme,
     themeStore?.getSnapshot ?? getDefaultTheme,
     themeStore?.getSnapshot ?? getDefaultTheme
   );
-  const [model2, setModel] = useState38(null);
-  const [selection, setSelection] = useState38(null);
-  const [renaming, setRenaming] = useState38(null);
-  const [connecting, setConnecting] = useState38(false);
-  const [connectSourceId, setConnectSourceId] = useState38(null);
-  const [openPopover, setOpenPopover] = useState38(null);
-  const [editNotice, setEditNotice] = useState38("");
-  const [maximized, setMaximized] = useState38(false);
-  const [height, setHeight] = useState38(null);
-  const [dragHeight, setDragHeight] = useState38(null);
+  const theme = useMermaidSurfaceTheme(host, docTheme);
+  const [model2, setModel] = useState39(null);
+  const [selection, setSelection] = useState39(null);
+  const [renaming, setRenaming] = useState39(null);
+  const [connecting, setConnecting] = useState39(false);
+  const [connectSourceId, setConnectSourceId] = useState39(null);
+  const [openPopover, setOpenPopover] = useState39(null);
+  const [editNotice, setEditNotice] = useState39("");
+  const [maximized, setMaximized] = useState39(false);
+  const [height, setHeight] = useState39(null);
+  const [dragHeight, setDragHeight] = useState39(null);
   const inlineRef = useRef34(null);
   const effectiveHeight = dragHeight ?? height;
   const onModelChange = useCallback34((next) => {
@@ -24230,7 +24295,7 @@ function MermaidDiagramWidget({
     },
     [effectiveHeight]
   );
-  useEffect29(() => {
+  useEffect30(() => {
     if (!editNotice) return;
     const timeout = window.setTimeout(() => setEditNotice(""), 7e3);
     return () => window.clearTimeout(timeout);
@@ -24467,7 +24532,7 @@ function MermaidDiagramWidget({
   ] });
 }
 function useDismissibleMermaidPopover(ref, onClose) {
-  useEffect29(() => {
+  useEffect30(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -24485,7 +24550,7 @@ function useDismissibleMermaidPopover(ref, onClose) {
   }, [onClose, ref]);
 }
 function useClampedMermaidPopoverPosition(ref, preferredWidth, preferredMaxHeight) {
-  const [position, setPosition] = useState38(null);
+  const [position, setPosition] = useState39(null);
   useLayoutEffect7(() => {
     const picker = ref.current;
     const anchor = picker?.parentElement;
@@ -24551,7 +24616,7 @@ function MermaidPropertiesPalette({
   onApply,
   onClose
 }) {
-  const [values, setValues] = useState38(
+  const [values, setValues] = useState39(
     () => Object.fromEntries(properties.map((property) => [property.id, property.value]))
   );
   const ref = useRef34(null);
@@ -24845,15 +24910,15 @@ var MermaidDiagramExtension = Extension5.create({
 
 // src/mermaid/mermaidData.ts
 function useMermaidDiagramData(editor, blockId) {
-  const [version, setVersion] = useState39(0);
-  useEffect30(() => {
+  const [version, setVersion] = useState40(0);
+  useEffect31(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
       editor.off("transaction", onTransaction);
     };
   }, [editor]);
-  return useMemo30(() => {
+  return useMemo31(() => {
     const pos = findMermaidDiagramBlockPos(editor, blockId);
     if (pos === null) return null;
     const node2 = editor.state.doc.nodeAt(pos);
@@ -24870,20 +24935,20 @@ import { createElement as createElement10 } from "react";
 import { createRoot as createRoot4 } from "react-dom/client";
 
 // src/codeSnippet/CodeSnippetWidget.tsx
-import { useCallback as useCallback35, useEffect as useEffect32, useState as useState41 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect33, useState as useState42 } from "react";
 
 // src/codeSnippet/codeSnippetData.ts
-import { useEffect as useEffect31, useMemo as useMemo31, useState as useState40 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo32, useState as useState41 } from "react";
 function useCodeSnippetData(editor, blockId) {
-  const [version, setVersion] = useState40(0);
-  useEffect31(() => {
+  const [version, setVersion] = useState41(0);
+  useEffect32(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
       editor.off("transaction", onTransaction);
     };
   }, [editor]);
-  return useMemo31(() => {
+  return useMemo32(() => {
     const pos = findCodeSnippetBlockPos(editor, blockId);
     if (pos === null) return null;
     const node2 = editor.state.doc.nodeAt(pos);
@@ -24921,8 +24986,17 @@ function schemeFromHost(host) {
   return host?.closest("[data-theme]")?.dataset.theme === "dark" ? "dark" : "light";
 }
 function useHostColorScheme(host) {
-  const [scheme, setScheme] = useState41(() => schemeFromHost(host));
-  useEffect32(() => {
+  const [scheme, setScheme] = useState42(
+    () => host != null && !host.isConnected ? null : schemeFromHost(host)
+  );
+  useEffect33(() => {
+    if (host != null && !host.isConnected) {
+      setScheme(null);
+      const raf = requestAnimationFrame(() => {
+        if (host.isConnected) setScheme(schemeFromHost(host));
+      });
+      return () => cancelAnimationFrame(raf);
+    }
     const themedAncestor = host?.closest("[data-theme]");
     setScheme(schemeFromHost(host));
     if (!themedAncestor || typeof MutationObserver === "undefined") return;
@@ -24933,8 +25007,8 @@ function useHostColorScheme(host) {
   return scheme;
 }
 function useEditorEditable(editor) {
-  const [editable, setEditable] = useState41(editor.isEditable);
-  useEffect32(() => {
+  const [editable, setEditable] = useState42(editor.isEditable);
+  useEffect33(() => {
     const sync = () => setEditable(editor.isEditable);
     editor.on("update", sync);
     editor.on("transaction", sync);
@@ -24955,7 +25029,7 @@ function CodeSnippetWidget({
   const { ready } = useMonacoLoader(data?.monacoLanguage);
   const colorScheme = useHostColorScheme(host);
   const editable = useEditorEditable(editor);
-  const [modelInstanceId] = useState41(allocateCodeSnippetModelInstanceId);
+  const [modelInstanceId] = useState42(allocateCodeSnippetModelInstanceId);
   const handleChange = useCallback35(
     (value) => {
       if (!editable) return;
@@ -24985,7 +25059,7 @@ function CodeSnippetWidget({
           /* @__PURE__ */ jsx49(Icon, { icon: "fa-solid fa-file-code" }),
           /* @__PURE__ */ jsx49("span", { children: data.label })
         ] }) }),
-        /* @__PURE__ */ jsx49("div", { className: "squisq-code-snippet-editor", "aria-label": `${data.label} code editor`, children: ready ? /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx49("div", { className: "squisq-code-snippet-editor", "aria-label": `${data.label} code editor`, children: ready && colorScheme !== null ? /* @__PURE__ */ jsx49(
           Ft,
           {
             path: `inmemory://squisq/code-snippet/${modelInstanceId}/${blockId}.${modelSuffix || "txt"}`,
@@ -25178,7 +25252,7 @@ import { createRoot as createRoot5 } from "react-dom/client";
 import { createElement as createElement11 } from "react";
 
 // src/fenceWidgets/HostFenceWidget.tsx
-import { Component, useEffect as useEffect33, useMemo as useMemo32, useState as useState42 } from "react";
+import { Component, useEffect as useEffect34, useMemo as useMemo33, useState as useState43 } from "react";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var HostFenceErrorBoundary = class extends Component {
   constructor() {
@@ -25193,15 +25267,15 @@ var HostFenceErrorBoundary = class extends Component {
   }
 };
 function HostFenceWidget({ editor, blockId, getRenderers, getTheme }) {
-  const [version, setVersion] = useState42(0);
-  useEffect33(() => {
+  const [version, setVersion] = useState43(0);
+  useEffect34(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
       editor.off("transaction", onUpdate);
     };
   }, [editor]);
-  const current = useMemo32(() => {
+  const current = useMemo33(() => {
     const pos = findHostFenceBlockPos(editor, blockId);
     if (pos === null) return null;
     const node2 = editor.state.doc.nodeAt(pos);
@@ -25344,7 +25418,7 @@ var HostFenceExtension = Extension7.create({
 });
 
 // src/treeview/treeViewData.ts
-import { useEffect as useEffect34, useMemo as useMemo33, useState as useState44 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo34, useState as useState45 } from "react";
 
 // src/treeview/TreeViewExtension.ts
 import { Extension as Extension8 } from "@tiptap/core";
@@ -25361,7 +25435,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/treeview/TreeOutlineWidget.tsx
-import { useCallback as useCallback36, useRef as useRef35, useState as useState43 } from "react";
+import { useCallback as useCallback36, useRef as useRef35, useState as useState44 } from "react";
 
 // src/treeview/treeViewCommands.ts
 import { parseTree, renderTree } from "@bendyline/squisq/doc";
@@ -25598,10 +25672,10 @@ function dropPositionForPointer(event) {
 }
 function TreeOutlineWidget({ editor, blockId }) {
   const view = useTreeViewData(editor, blockId);
-  const [collapsed, setCollapsed] = useState43(() => /* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = useState44(() => /* @__PURE__ */ new Set());
   const activeDragRef = useRef35(null);
-  const [draggedId, setDraggedId] = useState43(null);
-  const [dropTarget, setDropTarget] = useState43(null);
+  const [draggedId, setDraggedId] = useState44(null);
+  const [dropTarget, setDropTarget] = useState44(null);
   const dispatch = useCallback36(
     (cmd) => applyTreeCommand(editor, blockId, cmd),
     [editor, blockId]
@@ -25748,7 +25822,7 @@ function TreeRowView({
   const hasChildren = node2.children.length > 0;
   const isCollapsed = collapsed.has(node2.id);
   const isDir = node2.isDir || hasChildren;
-  const [draft, setDraft] = useState43(node2.label);
+  const [draft, setDraft] = useState44(node2.label);
   const dropPosition = dropTarget?.id === node2.id ? dropTarget.position : null;
   const itemClassName = [
     "squisq-tree-item",
@@ -26052,15 +26126,15 @@ var TreeViewExtension = Extension8.create({
 
 // src/treeview/treeViewData.ts
 function useTreeViewData(editor, blockId) {
-  const [version, setVersion] = useState44(0);
-  useEffect34(() => {
+  const [version, setVersion] = useState45(0);
+  useEffect35(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
       editor.off("transaction", onUpdate);
     };
   }, [editor]);
-  return useMemo33(() => {
+  return useMemo34(() => {
     const pos = findTreeBlockPos(editor, blockId);
     if (pos === null) return null;
     const node2 = editor.state.doc.nodeAt(pos);
@@ -26079,7 +26153,7 @@ function shouldPasteAsTreeFence(text) {
 }
 
 // src/timeline/timelineData.ts
-import { useEffect as useEffect36, useMemo as useMemo35, useRef as useRef37, useState as useState46 } from "react";
+import { useEffect as useEffect37, useMemo as useMemo36, useRef as useRef37, useState as useState47 } from "react";
 
 // src/timeline/TimelineViewExtension.ts
 import { Extension as Extension9 } from "@tiptap/core";
@@ -26094,7 +26168,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/timeline/TimelineEditorWidget.tsx
-import { useCallback as useCallback37, useEffect as useEffect35, useMemo as useMemo34, useRef as useRef36, useState as useState45 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect36, useMemo as useMemo35, useRef as useRef36, useState as useState46 } from "react";
 import {
   asciiTimelineToTemplateData
 } from "@bendyline/squisq/doc";
@@ -26578,13 +26652,13 @@ import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs40 } from "react/jsx-
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 function TimelineEditorWidget({ editor, blockId }) {
   const view = useTimelineData(editor, blockId);
-  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 [selectedEventId, setSelectedEventId] = useState46(null);
+  const [addingTrackId, setAddingTrackId] = useState46(null);
+  const [editingTrackId, setEditingTrackId] = useState46(null);
+  const [hover, setHover] = useState46(null);
+  const [dragged, setDragged] = useState46(null);
   const suppressClickEventId = useRef36(null);
-  const [announcement, setAnnouncement] = useState45("");
+  const [announcement, setAnnouncement] = useState46("");
   const dispatch = useCallback37(
     (command) => {
       const result = applyTimelineCommand(editor, blockId, command);
@@ -26598,7 +26672,7 @@ function TimelineEditorWidget({ editor, blockId }) {
   );
   const sourceText2 = view?.text;
   const sourceTimeline = view?.timeline;
-  const sourceSafe = useMemo34(
+  const sourceSafe = useMemo35(
     () => sourceText2 && sourceTimeline ? isTimelineSourceSafeForSemanticEdit(sourceText2, sourceTimeline) : false,
     // `useTimelineData` publishes on every editor transaction so read-only
     // changes are observed. Unrelated transactions retain both primitive/model
@@ -26608,7 +26682,7 @@ function TimelineEditorWidget({ editor, blockId }) {
   );
   const editorEditable = editor.isEditable;
   const editable = editorEditable && sourceSafe;
-  const positioned = useMemo34(() => {
+  const positioned = useMemo35(() => {
     if (!view) return [];
     const normalized = asciiTimelineToTemplateData(view.timeline).tracks;
     return view.timeline.tracks.flatMap((track, trackIndex) => {
@@ -26623,17 +26697,17 @@ function TimelineEditorWidget({ editor, blockId }) {
       );
     });
   }, [view]);
-  const displayedPositioned = useMemo34(
+  const displayedPositioned = useMemo35(
     () => dragged ? positioned.map(
       (point) => point.event.id === dragged.eventId ? { ...point, position: dragged.position } : point
     ) : positioned,
     [dragged, positioned]
   );
-  const positionById = useMemo34(
+  const positionById = useMemo35(
     () => new Map(displayedPositioned.map((point) => [point.event.id, point.position])),
     [displayedPositioned]
   );
-  const selected = useMemo34(() => {
+  const selected = useMemo35(() => {
     if (!view || !selectedEventId) return null;
     for (const track of view.timeline.tracks) {
       const event = track.events.find((candidate) => candidate.id === selectedEventId);
@@ -26647,7 +26721,7 @@ function TimelineEditorWidget({ editor, blockId }) {
     }
     return null;
   }, [selectedEventId, view]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!view) return;
     const ids = new Set(
       view.timeline.tracks.flatMap((track) => track.events.map((event) => event.id))
@@ -26655,13 +26729,13 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (selectedEventId && ids.has(selectedEventId)) return;
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (editable) return;
     setAddingTrackId(null);
     setEditingTrackId(null);
     setHover(null);
   }, [editable]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
       return;
     }
@@ -27067,8 +27141,8 @@ function InlineTrackLabel({
   onStart,
   onFinish
 }) {
-  const [draft, setDraft] = useState45(label);
-  useEffect35(() => {
+  const [draft, setDraft] = useState46(label);
+  useEffect36(() => {
     if (editing) setDraft(label);
   }, [editing, label]);
   const commitLabel = () => {
@@ -27125,10 +27199,10 @@ function EventInspector({
   onDelete
 }) {
   const { event } = selected;
-  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 [label, setLabel] = useState46(event.label);
+  const [description, setDescription] = useState46(event.description ?? "");
+  useEffect36(() => setLabel(event.label), [event.label]);
+  useEffect36(() => setDescription(event.description ?? ""), [event.description]);
   const update = (patch) => dispatch(patch);
   const commitLabel = () => {
     const next = label.trim();
@@ -27433,9 +27507,9 @@ var TimelineViewExtension = Extension9.create({
 
 // src/timeline/timelineData.ts
 function useTimelineData(editor, blockId) {
-  const [version, setVersion] = useState46(0);
+  const [version, setVersion] = useState47(0);
   const dataCache = useRef37(null);
-  useEffect36(() => {
+  useEffect37(() => {
     const onEditorChange = () => setVersion((value) => value + 1);
     editor.on("transaction", onEditorChange);
     editor.on("update", onEditorChange);
@@ -27444,7 +27518,7 @@ function useTimelineData(editor, blockId) {
       editor.off("update", onEditorChange);
     };
   }, [editor]);
-  return useMemo35(() => {
+  return useMemo36(() => {
     const pos = findTimelineBlockPos(editor, blockId);
     if (pos === null) return null;
     const node2 = editor.state.doc.nodeAt(pos);
@@ -27470,7 +27544,7 @@ function shouldPasteAsTimelineFence(text) {
 }
 
 // src/BlockPropertiesPopover.tsx
-import { useEffect as useEffect37, useId as useId13, useRef as useRef38, useState as useState47 } from "react";
+import { useEffect as useEffect38, useId as useId13, useRef as useRef38, useState as useState48 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT = ".squisq-transition-flyout";
@@ -27486,13 +27560,13 @@ function BlockPropertiesPopover({
 }) {
   const panelRef = useRef38(null);
   const panelId = `squisq-block-props-portal-${useId13().replace(/:/g, "")}`;
-  const [inner, setInner] = useState47(blockAttrs);
-  const [templateInner, setTemplateInner] = useState47(templateParams);
-  const [style, setStyle] = useState47(() => computeStyle(anchorRect));
-  useEffect37(() => {
+  const [inner, setInner] = useState48(blockAttrs);
+  const [templateInner, setTemplateInner] = useState48(templateParams);
+  const [style, setStyle] = useState48(() => computeStyle(anchorRect));
+  useEffect38(() => {
     requestAnimationFrame(() => setStyle(computeStyle(anchorRect, panelRef.current)));
   }, [anchorRect]);
-  useEffect37(() => {
+  useEffect38(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -27654,7 +27728,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback38, useEffect as useEffect41, useMemo as useMemo36, useRef as useRef40, useState as useState51 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect42, useMemo as useMemo37, useRef as useRef40, useState as useState52 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection } from "@tiptap/pm/state";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -27890,7 +27964,7 @@ var InlineIcon = Node2.create({
 });
 
 // src/ImageNodeView.tsx
-import { useEffect as useEffect38, useRef as useRef39, useState as useState48 } from "react";
+import { useEffect as useEffect39, useRef as useRef39, useState as useState49 } from "react";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import Image from "@tiptap/extension-image";
 
@@ -27910,16 +27984,16 @@ import { Fragment as Fragment16, jsx as jsx54, jsxs as jsxs42 } from "react/jsx-
 function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
   const { src, alt, title, width } = node2.attrs;
   const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
-  const [resolvedSrc, setResolvedSrc] = useState48(src);
-  const [hovered, setHovered] = useState48(false);
+  const [resolvedSrc, setResolvedSrc] = useState49(src);
+  const [hovered, setHovered] = useState49(false);
   const imgRef = useRef39(null);
-  const [previewWidth, setPreviewWidth] = useState48(null);
+  const [previewWidth, setPreviewWidth] = useState49(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);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!mediaProvider || !resolveAs) {
       setResolvedSrc(src);
       return;
@@ -28098,15 +28172,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";
+import { useEffect as useEffect41, useState as useState51 } from "react";
 
 // src/tiptap/useResolvedMediaSrc.ts
-import { useEffect as useEffect39, useState as useState49 } from "react";
+import { useEffect as useEffect40, useState as useState50 } from "react";
 function useResolvedMediaSrc(src) {
   const { mediaProvider, mediaRevision } = useEditorContext();
-  const [resolved, setResolved] = useState49(src);
+  const [resolved, setResolved] = useState50(src);
   const isRelative = !!src && !src.startsWith("blob:") && !src.startsWith("http:") && !src.startsWith("https:") && !src.startsWith("data:") && !src.startsWith("/");
-  useEffect39(() => {
+  useEffect40(() => {
     if (!mediaProvider || !isRelative) {
       setResolved(src);
       return;
@@ -28157,9 +28231,9 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
   const placement = normalizeVideoPlacement(rawPlacement);
   const lockToBlock = normalizeLockToBlock(rawLockToBlock);
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
-  const [audioOnly, setAudioOnly] = useState50(false);
+  const [audioOnly, setAudioOnly] = useState51(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
-  useEffect40(() => {
+  useEffect41(() => {
     setAudioOnly(false);
   }, [resolvedSrc]);
   const handleLoadedMetadata = (event) => {
@@ -28826,11 +28900,11 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect41(() => {
+  useEffect42(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const [designerState, setDesignerState] = useState51(
+  const [designerState, setDesignerState] = useState52(
     null
   );
   const handleDesignerSave = useCallback38(
@@ -28846,23 +28920,23 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef40(mentionProvider);
-  useEffect41(() => {
+  useEffect42(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const fenceRenderersRef = useRef40(fenceRenderers);
-  useEffect41(() => {
+  useEffect42(() => {
     fenceRenderersRef.current = fenceRenderers;
   }, [fenceRenderers]);
   const activeThemeRef = useRef40(activeTheme);
-  useEffect41(() => {
+  useEffect42(() => {
     activeThemeRef.current = activeTheme;
   }, [activeTheme]);
-  const resolvedPlaceholder = useMemo36(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
+  const resolvedPlaceholder = useMemo37(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
   const isExternalUpdate = useRef40(false);
   const lastSourceRef = useRef40(editorSource);
   const pendingLocalSourcesRef = useRef40([]);
   const mediaProviderRef = useRef40(mediaProvider);
-  useEffect41(() => {
+  useEffect42(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const frontmatterRef = useRef40(stripFrontmatter(editorSource).frontmatter);
@@ -28879,7 +28953,7 @@ function WysiwygEditor({
     }
   }
   const submitOnEnterRef = useRef40(submitOnEnter);
-  useEffect41(() => {
+  useEffect42(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -29067,25 +29141,25 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect41(() => {
+  useEffect42(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef40(null);
-  const [badgeMenu, setBadgeMenu] = useState51(null);
-  const [propsMenu, setPropsMenu] = useState51(null);
+  const [badgeMenu, setBadgeMenu] = useState52(null);
+  const [propsMenu, setPropsMenu] = useState52(null);
   const closeBadgeMenu = useCallback38(() => {
     setBadgeMenu(null);
     requestAnimationFrame(() => {
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -29141,7 +29215,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!editor) return;
     const pendingIndex = pendingLocalSourcesRef.current.lastIndexOf(editorSource);
     if (pendingIndex >= 0) {
@@ -29173,7 +29247,7 @@ function WysiwygEditor({
     lastSourceRef.current = editorSource;
     isExternalUpdate.current = false;
   }, [editorSource, editor, wrapPolicyEnabled]);
-  const badgePreviewSource = useMemo36(() => {
+  const badgePreviewSource = useMemo37(() => {
     if (!badgeMenu) return void 0;
     try {
       const previewDoc = markdownToDoc2(parseMarkdown6(editorSource), { autoTemplates: false });
@@ -29198,7 +29272,7 @@ function WysiwygEditor({
     previewSettings?.activeTheme,
     previewSettings?.activeViewport
   ]);
-  const themeStyle = useMemo36(() => {
+  const themeStyle = useMemo37(() => {
     if (!activeTheme) return {};
     const out = {
       "--squisq-block-props-accent": activeTheme.colors.primary
@@ -29398,7 +29472,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo38, useRef as useRef41, useState as useState53 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo39, useRef as useRef41, useState as useState54 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -29410,14 +29484,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 useEffect42, useMemo as useMemo37, useState as useState52 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect43, useMemo as useMemo38, useState as useState53 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
-  const flatBlocks = useMemo37(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
-  const [entries, setEntries] = useState52([]);
-  const [pageEdges, setPageEdges] = useState52(null);
-  useEffect42(() => {
+  const flatBlocks = useMemo38(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
+  const [entries, setEntries] = useState53([]);
+  const [pageEdges, setPageEdges] = useState53(null);
+  useEffect43(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -29485,7 +29559,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -29546,7 +29620,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect42(() => {
+  useEffect43(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -29778,7 +29852,7 @@ function InlinePreviewGutter({
   const { entries: headingEntries, scrollToBlock } = useHeadingLayout(gutterRef);
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme ?? DEFAULT_THEME5;
-  const items = useMemo38(() => {
+  const items = useMemo39(() => {
     if (!doc || !doc.blocks.length) return [];
     const flat = flattenBlocks4(doc.blocks);
     const totalBlocks = flat.length;
@@ -29835,12 +29909,12 @@ function InlinePreviewGutter({
     });
     return result;
   }, [doc, viewport, activeTheme]);
-  const connectorTops = useMemo38(() => {
+  const connectorTops = useMemo39(() => {
     const m = /* @__PURE__ */ new Map();
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState53(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState54(/* @__PURE__ */ new Map());
   useLayoutEffect8(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
@@ -30030,10 +30104,10 @@ import {
 // src/OutlinePanel.tsx
 import {
   useCallback as useCallback40,
-  useEffect as useEffect43,
-  useMemo as useMemo39,
+  useEffect as useEffect44,
+  useMemo as useMemo40,
   useRef as useRef42,
-  useState as useState54
+  useState as useState55
 } from "react";
 import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate2 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText4 } from "@bendyline/squisq/markdown";
@@ -30136,7 +30210,7 @@ function splitTrailingLineGap(value) {
 
 // src/OutlinePanel.tsx
 import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
-var OUTLINE_RESPONSIVE_WIDTH = "clamp(260px, 30vw, 460px)";
+var OUTLINE_RESPONSIVE_WIDTH = "clamp(180px, 15vw, 260px)";
 var OUTLINE_DRAG_MIME = "application/x-squisq-outline-section";
 function OutlinePanel({ width, className, readOnly = false }) {
   const {
@@ -30152,9 +30226,9 @@ function OutlinePanel({ width, className, readOnly = false }) {
   const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef42(null);
-  const [draggedBlockId, setDraggedBlockId] = useState54(null);
-  const [dropTarget, setDropTarget] = useState54(null);
-  const blockModeActiveId = useMemo39(() => {
+  const [draggedBlockId, setDraggedBlockId] = useState55(null);
+  const [dropTarget, setDropTarget] = useState55(null);
+  const blockModeActiveId = useMemo40(() => {
     if (layoutMode !== "block" || activeBlockStartLine == null || !doc) return null;
     const match = flattenBlocks5(doc.blocks).find(
       (b) => b.sourceHeading?.position?.start.line === activeBlockStartLine
@@ -30419,12 +30493,12 @@ function OutlineNode({
 }
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
-  const flatBlocks = useMemo39(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
-  const [activeId, setActiveId] = useState54(null);
-  useEffect43(() => {
+  const flatBlocks = useMemo40(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
+  const [activeId, setActiveId] = useState55(null);
+  useEffect44(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -30446,7 +30520,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, flatBlocks]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -30497,7 +30571,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback42, useEffect as useEffect45, useMemo as useMemo41, useRef as useRef44, useState as useState55 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect46, useMemo as useMemo42, useRef as useRef44, useState as useState56 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -30621,7 +30695,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback41, useEffect as useEffect44, useMemo as useMemo40, useRef as useRef43 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect45, useMemo as useMemo41, useRef as useRef43 } from "react";
 import { jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -30633,15 +30707,15 @@ function CodeContextSectionView({
   onMeasure
 }) {
   const rootRef = useRef43(null);
-  const stripNodes = useMemo40(
+  const stripNodes = useMemo41(
     () => parseMarkdown8(section.summaryMarkdown).children,
     [section.summaryMarkdown]
   );
-  const bodyNodes = useMemo40(
+  const bodyNodes = useMemo41(
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect44(() => {
+  useEffect45(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -30713,11 +30787,11 @@ function CodeContextSectionView({
 import { Fragment as Fragment18, jsx as jsx61 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState55(null);
-  const [, setZonesVersion] = useState55(0);
-  const [expandedById, setExpandedById] = useState55({});
+  const [manager, setManager] = useState56(null);
+  const [, setZonesVersion] = useState56(0);
+  const [expandedById, setExpandedById] = useState56({});
   const seenIds = useRef44(/* @__PURE__ */ new Set());
-  useEffect45(() => {
+  useEffect46(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -30730,7 +30804,7 @@ function CodeContextZones({ options }) {
   }, [monacoEditor]);
   const fileTop = options.fileTop;
   const sections = options.sections;
-  const resolved = useMemo41(() => {
+  const resolved = useMemo42(() => {
     const out = [];
     if (fileTop) {
       out.push({ spec: { id: fileTop.id, line: 0, ordinal: 0 }, section: fileTop });
@@ -30740,7 +30814,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -31176,7 +31250,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback44, useEffect as useEffect48, useMemo as useMemo42, useRef as useRef47, useState as useState58 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect49, useMemo as useMemo43, useRef as useRef47, useState as useState59 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -31335,7 +31409,7 @@ function resolveBlockVisual(doc, block, theme, viewport) {
 }
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback43, useEffect as useEffect46, useRef as useRef45, useState as useState56 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect47, useRef as useRef45, useState as useState57 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -31355,8 +31429,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState56(0);
-  const [isPlaying, setIsPlaying] = useState56(false);
+  const [currentTime, setCurrentTime] = useState57(0);
+  const [isPlaying, setIsPlaying] = useState57(false);
   const rafRef = useRef45(null);
   const lastRef = useRef45(0);
   const currentTimeRef = useRef45(0);
@@ -31364,10 +31438,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef45(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect46(() => {
+  useEffect47(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -31429,7 +31503,7 @@ function timelineMediaLabel(src, kind) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect47, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState57 } from "react";
+import { useEffect as useEffect48, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState58 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Fragment as Fragment19, jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -31444,7 +31518,7 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef46(null);
-  const [style, setStyle] = useState57(() => menuStyle(anchor));
+  const [style, setStyle] = useState58(() => menuStyle(anchor));
   useLayoutEffect9(() => {
     const panel = panelRef.current;
     if (!panel) return;
@@ -31458,7 +31532,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect47(() => {
+  useEffect48(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -31518,12 +31592,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState57(target.explicitDuration);
-  const [duration, setDuration] = useState57(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState57(
+  const [explicitDuration, setExplicitDuration] = useState58(target.explicitDuration);
+  const [duration, setDuration] = useState58(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState58(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState57(target.transition);
+  const [transition, setTransition] = useState58(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -31595,11 +31669,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  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 [placement, setPlacement] = useState58(target.placement);
+  const [locked, setLocked] = useState58(target.lockToBlock);
+  const [pipSize, setPipSize] = useState58(target.pipSize ?? "");
+  const [pipShape, setPipShape] = useState58(target.pipShape ?? "");
+  const [pipPosition, setPipPosition] = useState58(target.pipPosition ?? "");
   const placed = placement === "picture-in-picture" || placement === "overlay";
   const placementOptions = [
     target.canUseContentPlacement ? { value: "content", label: "In layout" } : { value: "default", label: "Default" },
@@ -31869,14 +31943,14 @@ function TimelineTrack({
     colorScheme
   } = useEditorContext();
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState58(null);
-  const [itemMenu, setItemMenu] = useState58(null);
-  const [pxPerSecond, setPxPerSecond] = useState58(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = useState59(null);
+  const [itemMenu, setItemMenu] = useState59(null);
+  const [pxPerSecond, setPxPerSecond] = useState59(DEFAULT_PX_PER_SECOND);
   const scrollRef = useRef47(null);
-  const blocks = useMemo42(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
+  const blocks = useMemo43(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
   const previewTheme = previewSettings?.activeTheme ?? DEFAULT_THEME6;
-  const visualByBlock = useMemo42(() => {
+  const visualByBlock = useMemo43(() => {
     const map = /* @__PURE__ */ new Map();
     if (doc) {
       for (const b of blocks) {
@@ -31886,16 +31960,16 @@ function TimelineTrack({
     }
     return map;
   }, [doc, blocks, previewTheme]);
-  const derivedClips = useMemo42(
+  const derivedClips = useMemo43(
     () => doc ? resolveMediaSchedule2(doc) : [],
     [doc]
   );
   const clips = schedule ?? derivedClips;
-  const playbackClips = useMemo42(
+  const playbackClips = useMemo43(
     () => doc ? collectTimelinePlaybackSchedule(doc, clips) : clips,
     [clips, doc]
   );
-  const total = useMemo42(() => doc ? getDocPlaybackDuration(doc) : 0, [doc]);
+  const total = useMemo43(() => doc ? getDocPlaybackDuration(doc) : 0, [doc]);
   const width = Math.max(total * pxPerSecond, 200);
   const internalClock = useTimelineClock(total);
   const activeClock = clock ?? internalClock;
@@ -31904,8 +31978,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState58(false);
-  useEffect48(() => {
+  const [scrubbing, setScrubbing] = useState59(false);
+  useEffect49(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -31922,7 +31996,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [scrubbing, pxPerSecond, seek]);
-  const rawClipById = useMemo42(() => {
+  const rawClipById = useMemo43(() => {
     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);
@@ -31943,7 +32017,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef47(null);
-  useEffect48(() => {
+  useEffect49(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -31954,7 +32028,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -32002,8 +32076,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] = useState58(0);
-  useEffect48(() => {
+  const [viewportWidth, setViewportWidth] = useState59(0);
+  useEffect49(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -32017,7 +32091,7 @@ function TimelineTrack({
   const dragRef = useRef47(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect48(() => {
+  useEffect49(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -32048,7 +32122,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback44(
@@ -32584,7 +32658,7 @@ function formatDur(seconds) {
 }
 
 // src/TimelineVideoPanel.tsx
-import { useMemo as useMemo43 } from "react";
+import { useMemo as useMemo44 } from "react";
 import { MediaClipLayer as MediaClipLayer2 } from "@bendyline/squisq-react";
 import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
 function TimelineVideoPanel({
@@ -32594,7 +32668,7 @@ function TimelineVideoPanel({
   basePath = "/",
   onClose
 }) {
-  const videos = useMemo43(() => schedule.filter((clip) => clip.kind === "video"), [schedule]);
+  const videos = useMemo44(() => schedule.filter((clip) => clip.kind === "video"), [schedule]);
   const activeVideos = videos.filter(
     (clip) => currentTime >= clip.absoluteStart && currentTime < clip.absoluteEnd
   );
@@ -32648,12 +32722,12 @@ function formatClock3(seconds) {
 }
 
 // src/TimelineCompositionPanel.tsx
-import { useMemo as useMemo44 } from "react";
+import { useMemo as useMemo45 } 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 useEffect49, useState as useState59 } from "react";
+import { useEffect as useEffect50, useState as useState60 } from "react";
 import { resolveAudioMapping } from "@bendyline/squisq/doc";
 import { applyTransform } from "@bendyline/squisq/transform";
 function hasEquivalentAudio(left, right) {
@@ -32673,8 +32747,8 @@ function preserveEquivalentAudio(previous, next) {
   };
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2) {
-  const [projection, setProjection] = useState59(null);
-  useEffect49(() => {
+  const [projection, setProjection] = useState60(null);
+  useEffect50(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -32740,11 +32814,11 @@ function TimelineCompositionPanel({
   );
   const contentDoc = projection?.contentDoc ?? null;
   const playerDoc = projection?.playerDoc ?? null;
-  const totalDuration = useMemo44(
+  const totalDuration = useMemo45(
     () => playerDoc ? getDocPlaybackDuration2(playerDoc) : 0,
     [playerDoc]
   );
-  const effectiveVideoPresentation = useMemo44(() => {
+  const effectiveVideoPresentation = useMemo45(() => {
     if (!playerDoc) return activeVideoPresentation;
     const activeVideo = resolveMediaSchedule3(playerDoc).find(
       (clip) => clip.kind === "video" && clock.currentTime >= clip.absoluteStart && clock.currentTime < clip.absoluteEnd
@@ -32753,7 +32827,7 @@ function TimelineCompositionPanel({
     if (activeVideo?.placement === "overlay") return "full-frame";
     return activeVideoPresentation;
   }, [activeVideoPresentation, clock.currentTime, playerDoc]);
-  const audioController = useMemo44(
+  const audioController = useMemo45(
     () => ({
       currentTime: clock.currentTime,
       isPlaying: clock.isPlaying,
@@ -32934,7 +33008,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback45, useEffect as useEffect50, useMemo as useMemo45, useRef as useRef48, useState as useState60 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect51, useMemo as useMemo46, useRef as useRef48, useState as useState61 } from "react";
 import { parseMarkdown as parseMarkdown9 } from "@bendyline/squisq/markdown";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -33014,9 +33088,9 @@ function PlainHtmlPreview({
     },
     [onFrameChange]
   );
-  const mdDoc = useMemo45(() => parseMarkdown9(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState60(null);
-  useEffect50(() => {
+  const mdDoc = useMemo46(() => parseMarkdown9(markdown), [markdown]);
+  const [resolvedImages, setResolvedImages] = useState61(null);
+  useEffect51(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -33044,16 +33118,16 @@ function PlainHtmlPreview({
       cancelled = true;
     };
   }, [mdDoc, mediaProvider, mediaRevision]);
-  const mergedImages = useMemo45(() => {
+  const mergedImages = useMemo46(() => {
     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 = useMemo45(() => collectInlineFontAwesomeCss(), []);
-  const [renderFn, setRenderFn] = useState60(() => cachedRender);
-  useEffect50(() => {
+  const iconsCss = useMemo46(() => collectInlineFontAwesomeCss(), []);
+  const [renderFn, setRenderFn] = useState61(() => cachedRender);
+  useEffect51(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -33063,7 +33137,7 @@ function PlainHtmlPreview({
       cancelled = true;
     };
   }, [renderFn]);
-  const html = useMemo45(
+  const html = useMemo46(
     () => renderFn ? renderFn(mdDoc, { title, images: mergedImages, theme, iconsCss }) : "",
     [renderFn, mdDoc, title, mergedImages, theme, iconsCss]
   );
@@ -33086,7 +33160,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect50(() => {
+  useEffect51(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -33182,11 +33256,11 @@ function PlainHtmlPreview({
       style2.remove();
     };
   }, [onCopyCode, showCodeCopyButton]);
-  useEffect50(() => {
+  useEffect51(() => {
     installFrameCodeCopyControls();
     return () => removeFrameCodeCopyControlsRef.current();
   }, [html, installFrameCodeCopyControls]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -33265,7 +33339,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState63, useEffect as useEffect54, useMemo as useMemo49, useCallback as useCallback49, useRef as useRef52 } from "react";
+import { useState as useState64, useEffect as useEffect55, useMemo as useMemo50, 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";
@@ -33404,12 +33478,12 @@ import {
   createContext as createContext5,
   useCallback as useCallback46,
   useContext as useContext5,
-  useEffect as useEffect51,
+  useEffect as useEffect52,
   useId as useId14,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo46,
+  useMemo as useMemo47,
   useRef as useRef49,
-  useState as useState61
+  useState as useState62
 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 import { jsx as jsx70, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -33511,10 +33585,10 @@ function PresentationModeProvider({
   const { activeView, colorScheme, doc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
   const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
-  const [selectedTarget, setSelectedTarget] = useState61("control");
-  const [activeTarget, setActiveTarget] = useState61(null);
-  const [popupRoot, setPopupRoot] = useState61(null);
-  const [error, setError] = useState61(null);
+  const [selectedTarget, setSelectedTarget] = useState62("control");
+  const [activeTarget, setActiveTarget] = useState62(null);
+  const [popupRoot, setPopupRoot] = useState62(null);
+  const [error, setError] = useState62(null);
   const activeTargetRef = useRef49(activeTarget);
   activeTargetRef.current = activeTarget;
   const previousActiveTargetRef = useRef49(null);
@@ -33522,7 +33596,7 @@ function PresentationModeProvider({
   const popupRef = useRef49(null);
   const popupCleanupRef = useRef49(null);
   const fullscreenSupported = typeof document !== "undefined" && typeof document.documentElement.requestFullscreen === "function";
-  const availableTargets = useMemo46(
+  const availableTargets = useMemo47(
     () => [
       "control",
       ...allowWindow ? ["window"] : [],
@@ -33662,12 +33736,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect51(() => {
+  useEffect52(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect51(() => {
+  useEffect52(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -33679,7 +33753,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect51(() => {
+  useEffect52(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -33688,10 +33762,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect51(() => {
+  useEffect52(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -33699,7 +33773,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -33711,12 +33785,12 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useEffect51(
+  useEffect52(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -33729,7 +33803,7 @@ function PresentationModeProvider({
     },
     [rootRef]
   );
-  const value = useMemo46(
+  const value = useMemo47(
     () => ({
       selectedTarget,
       activeTarget,
@@ -33819,8 +33893,8 @@ function PresentationModeControl() {
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef49(null);
   const menuRef = useRef49(null);
-  const [open, setOpen] = useState61(false);
-  const [anchor, setAnchor] = useState61(null);
+  const [open, setOpen] = useState62(false);
+  const [anchor, setAnchor] = useState62(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(() => {
@@ -33845,7 +33919,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -33988,10 +34062,10 @@ import {
   createContext as createContext6,
   useCallback as useCallback47,
   useContext as useContext6,
-  useEffect as useEffect52,
-  useMemo as useMemo47,
+  useEffect as useEffect53,
+  useMemo as useMemo48,
   useRef as useRef50,
-  useState as useState62
+  useState as useState63
 } from "react";
 import { jsx as jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
 var PrintModeContext = createContext6(null);
@@ -34006,8 +34080,8 @@ function usePrintModeOptional() {
 function PrintModeProvider({ rootRef, children }) {
   const { activeView } = useEditorContext();
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
-  const [active, setActive] = useState62(false);
-  const [slidesPerPage, setSlidesPerPage] = useState62(1);
+  const [active, setActive] = useState63(false);
+  const [slidesPerPage, setSlidesPerPage] = useState63(1);
   const customPrintHandlerRef = useRef50(null);
   const printAncestorsRef = useRef50([]);
   const unmarkPrinting = useCallback47(() => {
@@ -34058,7 +34132,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect52(() => {
+  useEffect53(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -34067,10 +34141,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -34092,7 +34166,7 @@ function PrintModeProvider({ rootRef, children }) {
       handleAfterPrint();
     };
   }, [active, close, markPrinting, rootRef, unmarkPrinting]);
-  const value = useMemo47(
+  const value = useMemo48(
     () => ({
       active,
       slidesPerPage,
@@ -34161,7 +34235,7 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback48, useEffect as useEffect53, useMemo as useMemo48, useRef as useRef51 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect54, useMemo as useMemo49, useRef as useRef51 } from "react";
 import {
   BlockRenderer as BlockRenderer5,
   LinearDocView,
@@ -34200,7 +34274,7 @@ function PrintPreview({
     documentFrameRef.current = frame;
   }, []);
   const { blocks } = useDocPlayback(previewDoc, 0, { viewport, theme });
-  const coverBlock = useMemo48(() => {
+  const coverBlock = useMemo49(() => {
     if (!showCover || !previewDoc?.startBlock) return null;
     const context = createTemplateContext2(theme, 0, 1, viewport);
     return {
@@ -34212,7 +34286,7 @@ function PrintPreview({
     };
   }, [previewDoc?.startBlock, showCover, theme, viewport]);
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect53(() => {
+  useEffect54(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -34339,7 +34413,7 @@ function PreviewPanel({
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
-  const [playbackState, setPlaybackState] = useState63(null);
+  const [playbackState, setPlaybackState] = useState64(null);
   const handlePlaybackStateChange = useCallback49((next) => {
     setPlaybackState(next);
   }, []);
@@ -34351,7 +34425,7 @@ function PreviewPanel({
   );
   const previewDoc = previewProjection?.playerDoc ?? null;
   const contentDoc = previewProjection?.contentDoc ?? null;
-  const followerAudioController = useMemo49(() => {
+  const followerAudioController = useMemo50(() => {
     if (!playbackState || !previewDoc) return null;
     const noOp = () => Promise.resolve();
     return {
@@ -34370,18 +34444,18 @@ function PreviewPanel({
       restart: noOp
     };
   }, [playbackState, previewDoc]);
-  const documentMarkdown = useMemo49(
+  const documentMarkdown = useMemo50(
     () => activeTransformStyle && contentDoc ? buildDocumentPreviewMarkdown(contentDoc) : markdownSource,
     [activeTransformStyle, contentDoc, markdownSource]
   );
   const isDocumentMode = activeDisplayMode === "page";
   const isPageMode = activeDisplayMode === "linear";
   const isNarrateMode = activeDisplayMode === "narrate";
-  useEffect54(() => {
+  useEffect55(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -34615,7 +34689,7 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState64, useEffect as useEffect55, useRef as useRef53, useCallback as useCallback50 } from "react";
+import { useState as useState65, useEffect as useEffect56, 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`;
@@ -34680,12 +34754,12 @@ function MediaBin({
   isRecorderOpen = false,
   allowBinaryDownloads = true
 }) {
-  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 [entries, setEntries] = useState65([]);
+  const [thumbUrls, setThumbUrls] = useState65({});
+  const [loading, setLoading] = useState65(false);
+  const [isDropActive, setIsDropActive] = useState65(false);
+  const [downloadingPath, setDownloadingPath] = useState65(null);
+  const [contextMenu, setContextMenu] = useState65(null);
   const fileInputRef = useRef53(null);
   const contextMenuRef = useRef53(null);
   const dropDepthRef = useRef53(0);
@@ -34707,7 +34781,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect55(() => {
+  useEffect56(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -34728,7 +34802,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -35070,7 +35144,7 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState65 } from "react";
+import { useState as useState66 } from "react";
 import { Fragment as Fragment21, jsx as jsx75, jsxs as jsxs59 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
@@ -35127,7 +35201,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState65(false);
+  const [isHovering, setIsHovering] = useState66(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -35171,7 +35245,7 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect56, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState66 } from "react";
+import { useEffect as useEffect57, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState67 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -35187,7 +35261,7 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 import { jsx as jsx76 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState66(null);
+  const [state, setState3] = useState67(null);
   const tooltipRef = useRef54(null);
   const timerRef = useRef54(null);
   const currentTargetRef = useRef54(null);
@@ -35203,7 +35277,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect56(() => {
+  useEffect57(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -35289,10 +35363,10 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect57, useRef as useRef55, useState as useState67, useCallback as useCallback51, useMemo as useMemo51 } from "react";
+import { useEffect as useEffect58, useRef as useRef55, useState as useState68, useCallback as useCallback51, useMemo as useMemo52 } from "react";
 
 // src/BlockPreviewPanel.tsx
-import { useMemo as useMemo50 } from "react";
+import { useMemo as useMemo51 } 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 jsx77 } from "react/jsx-runtime";
@@ -35301,13 +35375,13 @@ function BlockPreviewPanel({ basePath = "/" }) {
   const previewSettings = usePreviewSettingsOptional();
   const theme = previewSettings?.activeTheme ?? DEFAULT_THEME7;
   const viewport = previewSettings?.activeViewport ?? VIEWPORT_PRESETS7.landscape;
-  const block = useMemo50(() => {
+  const block = useMemo51(() => {
     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 = useMemo50(
+  const visual = useMemo51(
     () => doc && block ? resolveBlockVisual(doc, block, theme, viewport) : null,
     [doc, block, theme, viewport]
   );
@@ -35645,7 +35719,7 @@ function EditorShell({
   themeOverride = null
 }) {
   const effectiveContainer = workspaceContainer ?? null;
-  const effectiveMediaProvider = useMemo51(() => {
+  const effectiveMediaProvider = useMemo52(() => {
     if (mediaProvider !== void 0) return mediaProvider;
     if (effectiveContainer) return createMediaProviderFromContainer(effectiveContainer);
     return void 0;
@@ -35847,7 +35921,7 @@ function EditorShellInner({
     workspaceContainer
   );
   const timelineDoc = timelineProjection?.contentDoc ?? doc;
-  const timelineRawSchedule = useMemo51(
+  const timelineRawSchedule = useMemo52(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc) : [],
     [timelineDoc]
   );
@@ -35856,19 +35930,19 @@ function EditorShellInner({
     basePath,
     mediaProvider ?? null
   );
-  const timelineDuration = useMemo51(
+  const timelineDuration = useMemo52(
     () => timelineDoc ? getDocPlaybackDuration3(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src)
     }) : 0,
     [timelineDoc, timelineClipDurations]
   );
-  const timelineSchedule = useMemo51(
+  const timelineSchedule = useMemo52(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src)
     }) : [],
     [timelineDoc, timelineClipDurations]
   );
-  const timelineVideoSchedule = useMemo51(
+  const timelineVideoSchedule = useMemo52(
     () => timelineDoc ? [
       ...timelineSchedule.filter((clip) => clip.kind === "video"),
       ...collectEmbeddedVideoSchedule(timelineDoc)
@@ -35877,15 +35951,15 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState67(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState67(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState68(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState68(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState67(false);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState67(0);
-  const [mediaCount, setMediaCount] = useState67(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState67(false);
+  const [showFiles, setShowFiles] = useState68(false);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState68(0);
+  const [mediaCount, setMediaCount] = useState68(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState68(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
-  const usedMediaPaths = useMemo51(
+  const usedMediaPaths = useMemo52(
     () => collectMediaReferencesFromMarkdown(markdownSource),
     [markdownSource]
   );
@@ -35895,13 +35969,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect57(() => {
+  useEffect58(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect57(() => {
+  useEffect58(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect57(() => {
+  useEffect58(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -36010,7 +36084,7 @@ ${snippet}` : snippet);
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect57(() => {
+  useEffect58(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback51(
@@ -36365,7 +36439,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 = useMemo51(() => {
+  const sidecar = useMemo52(() => {
     const sanitized = relativePath.replace(/[^a-zA-Z0-9._-]+/g, "_");
     let hash = 2166136261;
     for (let i = 0; i < relativePath.length; i++) {
@@ -36376,9 +36450,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState67(null);
-  const [resolveError, setResolveError] = useState67(null);
-  useEffect57(() => {
+  const [initialSrc, setInitialSrc] = useState68(null);
+  const [resolveError, setResolveError] = useState68(null);
+  useEffect58(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -36583,6 +36657,10 @@ export {
   renderMermaidDiagram,
   inspectMermaidSource,
   mermaidErrorMessage,
+  mermaidSurfaceScheme,
+  adaptThemeToSurface,
+  resolveMermaidSurfaceTheme,
+  useMermaidSurfaceTheme,
   MermaidDiagramCanvas,
   MermaidShapePalette,
   useMermaidDiagramData,