@bendyline/squisq-editor-react 2.13.13 → 2.13.15

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

@@ -19,7 +19,7 @@ import {
   useDictationState,
   useEditorContext,
   useEditorContextOptional
-} from "./chunk-D2QFSFG2.js";
+} from "./chunk-UQUYPT5P.js";
 import {
   monacoLanguageRequestKey,
   monacoLanguagesForDocument,
@@ -9741,10 +9741,24 @@ async function storeCopy(provider, path, file, clipboardImage) {
     mimeType: clipboardImage.type || "image/png"
   } : null);
   if (!copied) return null;
-  const existing = await readStoredFile(provider, path);
-  if (existing && await sameBytes(existing.data, copied.data)) return path;
+  const stored = await storedCopyOf(provider, path, copied.data);
+  if (stored) return stored;
   return provider.addMedia(await unusedName(provider, copied.name), copied.data, copied.mimeType);
 }
+async function storedCopyOf(provider, path, data) {
+  let entries;
+  try {
+    entries = await provider.listMedia();
+  } catch {
+    return null;
+  }
+  const candidates = entries.filter((entry) => entry.size === data.size).sort((a, b) => Number(b.name === path) - Number(a.name === path));
+  for (const { name } of candidates) {
+    const existing = await readStoredFile(provider, name);
+    if (existing && await sameBytes(existing.data, data)) return name;
+  }
+  return null;
+}
 async function sameBytes(a, b) {
   if (a.size !== b.size) return false;
   const [left, right] = await Promise.all([a.arrayBuffer(), b.arrayBuffer()]);
@@ -24645,10 +24659,38 @@ function renameNodeOp(diagram, nodeId, label) {
   if (!node2) return diagram;
   const clean = sanitizeAsciiLabel(label);
   if (clean.length === 0 || clean === node2.label) return diagram;
-  return {
+  const renamed = {
     ...diagram,
     nodes: diagram.nodes.map((n) => n.id === nodeId ? { ...n, label: clean } : n)
   };
+  const isContainer = diagram.nodes.some((n) => n.containerId === nodeId);
+  const oldW = Math.max(node2.wCols, labelBoxWidth(node2.label, isContainer));
+  const newW = Math.max(node2.wCols, labelBoxWidth(clean, isContainer));
+  return makeRoomToTheRight(renamed, node2, oldW, newW);
+}
+var SIBLING_GAP = 1;
+function labelBoxWidth(label, isContainer) {
+  const lines2 = label.split("\n");
+  const widest = (ls) => ls.reduce((w, l2) => Math.max(w, Array.from(l2).length), 0);
+  if (!isContainer) return widest(lines2) + 4;
+  return Math.max(widest(lines2.slice(0, 1)) + 6, widest(lines2.slice(1)) + 4);
+}
+function makeRoomToTheRight(diagram, node2, oldW, newW) {
+  if (newW <= oldW) return diagram;
+  const drawnRight = node2.col + node2.wCols - 1;
+  const newRight = node2.col + newW - 1;
+  const r0 = node2.row - SIBLING_GAP;
+  const r1 = node2.row + node2.hRows - 1 + SIBLING_GAP;
+  let shift = 0;
+  for (const n of diagram.nodes) {
+    if (n.col <= drawnRight || n.row > r1 || n.row + n.hRows - 1 < r0) continue;
+    shift = Math.max(shift, newRight + SIBLING_GAP + 1 - n.col);
+  }
+  if (shift === 0) return diagram;
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((n) => n.col > drawnRight ? { ...n, col: n.col + shift } : n)
+  };
 }
 function addNodeOp(diagram, opts) {
   let label = opts.label;
@@ -24695,7 +24737,7 @@ function removeNodeOp(diagram, nodeId) {
 }
 
 // src/asciiDiagram/asciiDiagramData.ts
-import { useEffect as useEffect35, useMemo as useMemo29, useState as useState45 } from "react";
+import { useEffect as useEffect36, useMemo as useMemo29, useState as useState45 } from "react";
 import {
   asciiCellToCanvas,
   asciiDiagramToTemplateData,
@@ -24716,7 +24758,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/asciiDiagram/AsciiDiagramWidget.tsx
-import { useCallback as useCallback35, useMemo as useMemo28, useRef as useRef39, useState as useState44 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect35, useMemo as useMemo28, useRef as useRef39, useState as useState44 } from "react";
 
 // src/asciiDiagram/asciiDiagramCommands.ts
 import {
@@ -24901,7 +24943,7 @@ function applyRepairCommand(editor, blockId) {
   if (!repaired) return false;
   return replaceAsciiFenceText(editor, pos, repaired.art, "diagram");
 }
-function applyOp(editor, blockId, op, diagramOffset) {
+function applyOp(editor, blockId, op, { diagramOffset, onRejected }) {
   const pos = findAsciiDiagramBlockPos(editor, blockId);
   if (pos === null) return false;
   const node2 = editor.state.doc.nodeAt(pos);
@@ -24913,12 +24955,15 @@ function applyOp(editor, blockId, op, diagramOffset) {
   if (next === diagram && diagram === sourceDiagram) return false;
   const rendered = renderAsciiDiagram(next);
   const verification = parseAsciiDiagram(rendered);
-  if (verification.nodes.length !== next.nodes.length) return false;
+  if (verification.nodes.length !== next.nodes.length || verification.edges.length !== next.edges.length) {
+    onRejected?.();
+    return false;
+  }
   return replaceAsciiFenceText(editor, pos, rendered, "diagram");
 }
 function applyAsciiDiagramCommand(editor, blockId, cmd, options = {}) {
   if (!editor.isEditable) return false;
-  const apply = (op) => applyOp(editor, blockId, op, options.diagramOffset);
+  const apply = (op) => applyOp(editor, blockId, op, options);
   switch (cmd.kind) {
     case "moveNode": {
       const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
@@ -24960,6 +25005,8 @@ function applyAsciiDiagramCommand(editor, blockId, cmd, options = {}) {
 import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
 var MIN_DIAGRAM_HEIGHT = 160;
 var DEFAULT_DIAGRAM_HEIGHT = 420;
+var REJECTED_NOTICE_MS = 6e3;
+var REJECTED_EDIT_MESSAGE = "That change wasn't applied: the diagram couldn't be redrawn without losing a box or connection. Try giving the boxes more room, or edit the ASCII source.";
 function AsciiDiagramWidget({
   editor,
   blockId,
@@ -24982,12 +25029,20 @@ function AsciiDiagramWidget({
     const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
     return asciiDiagramToCanvas(offsetAsciiDiagram(view.diagram, offset));
   }, [view, canvasOffsetVersion]);
+  const [rejectedAt, setRejectedAt] = useState44(null);
+  useEffect35(() => {
+    if (rejectedAt === null) return;
+    const timer = setTimeout(() => setRejectedAt(null), REJECTED_NOTICE_MS);
+    return () => clearTimeout(timer);
+  }, [rejectedAt]);
   const dispatch = useCallback35(
     (cmd) => {
       const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
       const applied = applyAsciiDiagramCommand(editor, blockId, cmd, {
-        diagramOffset: offset
+        diagramOffset: offset,
+        onRejected: () => setRejectedAt(Date.now())
       });
+      if (applied) setRejectedAt(null);
       if (applied && (offset.col !== 0 || offset.row !== 0)) {
         canvasOffsetRef.current = { col: 0, row: 0 };
         setCanvasOffsetVersion((version) => version + 1);
@@ -25086,6 +25141,7 @@ function AsciiDiagramWidget({
     ] }),
     /* @__PURE__ */ jsx54("ul", { children: view.warnings.map((w, i) => /* @__PURE__ */ jsx54("li", { children: w }, i)) })
   ] }) : null;
+  const notice = /* @__PURE__ */ jsx54("div", { className: "squisq-ascii-diagram-notice", role: "status", "aria-live": "polite", children: rejectedAt !== null && REJECTED_EDIT_MESSAGE });
   const canvas = /* @__PURE__ */ jsx54(
     DiagramCanvas,
     {
@@ -25109,7 +25165,8 @@ function AsciiDiagramWidget({
         style: effectiveHeight != null ? { height: effectiveHeight } : void 0,
         children: /* @__PURE__ */ jsx54(DiagramMaximizedOverlay, { host: host ?? null, onClose: () => setMaximized(false), children: /* @__PURE__ */ jsxs42("div", { className: "squisq-scene-block-max", children: [
           canvas,
-          /* @__PURE__ */ jsx54("div", { className: "squisq-scene-side-toolbar", children: toolbar })
+          /* @__PURE__ */ jsx54("div", { className: "squisq-scene-side-toolbar", children: toolbar }),
+          notice
         ] }) })
       }
     );
@@ -25139,6 +25196,7 @@ function AsciiDiagramWidget({
         ]
       }
     ),
+    notice,
     warnings
   ] });
 }
@@ -25407,7 +25465,7 @@ function asciiDiagramToCanvas(diagram) {
 }
 function useAsciiDiagramData(editor, blockId) {
   const [version, setVersion] = useState45(0);
-  useEffect35(() => {
+  useEffect36(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -27253,7 +27311,7 @@ function mermaidErrorMessage(error) {
 }
 
 // src/mermaid/mermaidSurfaceTheme.ts
-import { useEffect as useEffect36, useMemo as useMemo30, useState as useState46 } from "react";
+import { useEffect as useEffect37, useMemo as useMemo30, useState as useState46 } from "react";
 import { relativeLuminance } from "@bendyline/squisq/schemas";
 var EDITOR_SURFACE = {
   light: {
@@ -27290,7 +27348,7 @@ function resolveMermaidSurfaceTheme(host, theme) {
 }
 function useMermaidSurfaceTheme(host, theme) {
   const [surface, setSurface] = useState46(() => readHostSurface(host));
-  useEffect36(() => {
+  useEffect37(() => {
     const sync = () => setSurface((current) => {
       const next = readHostSurface(host);
       return current.scheme === next.scheme && current.inheritsThemeColors === next.inheritsThemeColors ? current : next;
@@ -27316,7 +27374,7 @@ function useMermaidSurfaceTheme(host, theme) {
 }
 
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback36, useEffect as useEffect37, useId as useId12, useLayoutEffect as useLayoutEffect10, useRef as useRef40, useState as useState47 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect38, useId as useId12, useLayoutEffect as useLayoutEffect10, useRef as useRef40, useState as useState47 } from "react";
 import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -27393,7 +27451,7 @@ function MermaidDiagramCanvas({
   const [panning, setPanning] = useState47(false);
   const [selectionAnchor, setSelectionAnchor] = useState47(null);
   const [renameValue, setRenameValue] = useState47("");
-  useEffect37(() => {
+  useEffect38(() => {
     if (!panning) return;
     const finish = () => {
       panDragRef.current = null;
@@ -27421,7 +27479,7 @@ function MermaidDiagramCanvas({
       window.removeEventListener("blur", finish);
     };
   }, [panning]);
-  useEffect37(() => {
+  useEffect38(() => {
     let current = true;
     const id = `squisq-mermaid-svg-${++renderSequence}`;
     setRendering(true);
@@ -27692,7 +27750,7 @@ function MermaidDiagramCanvas({
     updateSelectionAnchor,
     zoom
   ]);
-  useEffect37(() => {
+  useEffect38(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const update = () => updateSelectionAnchor();
@@ -28097,7 +28155,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect38, useLayoutEffect as useLayoutEffect11, useMemo as useMemo31, useRef as useRef41, useState as useState48 } from "react";
+import { useEffect as useEffect39, useLayoutEffect as useLayoutEffect11, useMemo as useMemo31, useRef as useRef41, useState as useState48 } from "react";
 import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -28108,7 +28166,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
   const [query, setQuery] = useState48("");
   const [position, setPosition] = useState48(null);
   const ref = useRef41(null);
-  useEffect38(() => {
+  useEffect39(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -28279,7 +28337,7 @@ function MermaidShapeThumb({ shape }) {
 }
 
 // src/mermaid/mermaidData.ts
-import { useEffect as useEffect40, useMemo as useMemo32, useState as useState50 } from "react";
+import { useEffect as useEffect41, useMemo as useMemo32, useState as useState50 } from "react";
 
 // src/mermaid/MermaidDiagramExtension.ts
 import { Extension as Extension7 } from "@tiptap/core";
@@ -28290,7 +28348,7 @@ import { createElement as createElement10 } from "react";
 // src/mermaid/MermaidDiagramWidget.tsx
 import {
   useCallback as useCallback37,
-  useEffect as useEffect39,
+  useEffect as useEffect40,
   useLayoutEffect as useLayoutEffect12,
   useRef as useRef42,
   useState as useState49,
@@ -28930,7 +28988,7 @@ function MermaidDiagramWidget({
     },
     [effectiveHeight]
   );
-  useEffect39(() => {
+  useEffect40(() => {
     if (!editNotice) return;
     const timeout = window.setTimeout(() => setEditNotice(""), 7e3);
     return () => window.clearTimeout(timeout);
@@ -29167,7 +29225,7 @@ function MermaidDiagramWidget({
   ] });
 }
 function useDismissibleMermaidPopover(ref, onClose) {
-  useEffect39(() => {
+  useEffect40(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -29547,7 +29605,7 @@ var MermaidDiagramExtension = Extension7.create({
 // src/mermaid/mermaidData.ts
 function useMermaidDiagramData(editor, blockId) {
   const [version, setVersion] = useState50(0);
-  useEffect40(() => {
+  useEffect41(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -29572,7 +29630,7 @@ function describeSvgIslandRemovals(diagnostics) {
 }
 
 // src/svgIsland/SvgIslandWidget.tsx
-import { useEffect as useEffect42, useMemo as useMemo33, useState as useState52 } from "react";
+import { useEffect as useEffect43, useMemo as useMemo33, useState as useState52 } from "react";
 import { parseSvgIsland } from "@bendyline/squisq/markdown";
 import { SvgIslandImage } from "@bendyline/squisq-react";
 
@@ -29628,7 +29686,7 @@ function FenceMonacoEditor({
 }
 
 // src/codeSnippet/fenceEditorHooks.ts
-import { useEffect as useEffect41, useState as useState51 } from "react";
+import { useEffect as useEffect42, useState as useState51 } from "react";
 function schemeFromHost(host) {
   return host?.closest("[data-theme]")?.dataset.theme === "dark" ? "dark" : "light";
 }
@@ -29636,7 +29694,7 @@ function useHostColorScheme(host) {
   const [scheme, setScheme] = useState51(
     () => host != null && !host.isConnected ? null : schemeFromHost(host)
   );
-  useEffect41(() => {
+  useEffect42(() => {
     if (host != null && !host.isConnected) {
       setScheme(null);
       const raf = requestAnimationFrame(() => {
@@ -29655,7 +29713,7 @@ function useHostColorScheme(host) {
 }
 function useEditorEditable(editor) {
   const [editable, setEditable] = useState51(editor.isEditable);
-  useEffect41(() => {
+  useEffect42(() => {
     const sync = () => setEditable(editor.isEditable);
     editor.on("update", sync);
     editor.on("transaction", sync);
@@ -29818,7 +29876,7 @@ import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
 var nextModelInstanceId = 0;
 function useSvgIslandView(editor, blockId) {
   const [version, setVersion] = useState52(0);
-  useEffect42(() => {
+  useEffect43(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -29920,13 +29978,13 @@ import { Decoration as Decoration8, DecorationSet as DecorationSet8 } from "@tip
 import { createElement as createElement12 } from "react";
 
 // src/codeSnippet/CodeSnippetWidget.tsx
-import { useCallback as useCallback38, useEffect as useEffect44, useRef as useRef43, useState as useState54 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect45, useRef as useRef43, useState as useState54 } from "react";
 
 // src/codeSnippet/codeSnippetData.ts
-import { useEffect as useEffect43, useMemo as useMemo34, useState as useState53 } from "react";
+import { useEffect as useEffect44, useMemo as useMemo34, useState as useState53 } from "react";
 function useCodeSnippetData(editor, blockId) {
   const [version, setVersion] = useState53(0);
-  useEffect43(() => {
+  useEffect44(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -29993,7 +30051,7 @@ function CodeSnippetWidget({
   sourceRef.current = data?.source ?? "";
   const languageRef = useRef43("");
   languageRef.current = data?.fenceLanguage ?? "";
-  useEffect44(
+  useEffect45(
     () => () => {
       if (copyResetTimer.current !== void 0) clearTimeout(copyResetTimer.current);
     },
@@ -30238,7 +30296,7 @@ import { Decoration as Decoration9, DecorationSet as DecorationSet9 } from "@tip
 import { createElement as createElement13 } from "react";
 
 // src/fenceWidgets/HostFenceWidget.tsx
-import { Component as Component2, useEffect as useEffect45, useMemo as useMemo35, useState as useState55 } from "react";
+import { Component as Component2, useEffect as useEffect46, useMemo as useMemo35, useState as useState55 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var HostFenceErrorBoundary = class extends Component2 {
   constructor() {
@@ -30254,7 +30312,7 @@ var HostFenceErrorBoundary = class extends Component2 {
 };
 function HostFenceWidget({ editor, blockId, getRenderers, getTheme }) {
   const [version, setVersion] = useState55(0);
-  useEffect45(() => {
+  useEffect46(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -30727,7 +30785,7 @@ import { createElement as createElement14 } from "react";
 import { isDataFilePath } from "@bendyline/squisq/doc";
 
 // src/dataCard/DataCardWidget.tsx
-import { useCallback as useCallback39, useEffect as useEffect46, useMemo as useMemo36, useRef as useRef44, useState as useState56 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect47, useMemo as useMemo36, useRef as useRef44, useState as useState56 } from "react";
 import { EMPTY_TABLE_VIEW_STATE } from "@bendyline/squisq/table";
 
 // src/dataCard/gridSave.ts
@@ -31131,7 +31189,7 @@ var XLSX_SESSION_LOCKED_REASON = "Date cells and shared-formula masters stay loc
 var pendingFormulas = /* @__PURE__ */ new WeakMap();
 function useCardLink(editor, blockId) {
   const [version, setVersion] = useState56(0);
-  useEffect46(() => {
+  useEffect47(() => {
     const bump = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", bump);
     return () => {
@@ -31151,7 +31209,7 @@ function useCardLink(editor, blockId) {
 }
 function useMediaRevision(getMediaRevision) {
   const [revision, setRevision] = useState56(() => getMediaRevision());
-  useEffect46(() => {
+  useEffect47(() => {
     const timer = window.setInterval(() => {
       const next = getMediaRevision();
       setRevision((prev) => prev === next ? prev : next);
@@ -31195,7 +31253,7 @@ function DataCardWidget({
     regionParams.anchor,
     regionParams.headerRow
   ]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!href || cardPos === null) return;
     const provider = activeProvider;
     if (!provider) {
@@ -31357,7 +31415,7 @@ function DataCardWidget({
       cancelled = true;
     };
   }, [href, revision, activeProvider, activeContainer, regionIdentity, editor]);
-  useEffect46(
+  useEffect47(
     () => () => {
       gridRef.current?.formulaSession?.dispose();
       gridRef.current?.provider.dispose();
@@ -32094,7 +32152,7 @@ function pasteVideoEmbedCode(view, text) {
 }
 
 // src/treeview/treeViewData.ts
-import { useEffect as useEffect47, useMemo as useMemo37, useState as useState58 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo37, useState as useState58 } from "react";
 
 // src/treeview/TreeViewExtension.ts
 import { Extension as Extension15 } from "@tiptap/core";
@@ -32803,7 +32861,7 @@ var TreeViewExtension = Extension15.create({
 // src/treeview/treeViewData.ts
 function useTreeViewData(editor, blockId) {
   const [version, setVersion] = useState58(0);
-  useEffect47(() => {
+  useEffect48(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -32829,7 +32887,7 @@ function shouldPasteAsTreeFence(text) {
 }
 
 // src/timeline/timelineData.ts
-import { useEffect as useEffect49, useMemo as useMemo39, useRef as useRef47, useState as useState60 } from "react";
+import { useEffect as useEffect50, useMemo as useMemo39, useRef as useRef47, useState as useState60 } from "react";
 
 // src/timeline/TimelineViewExtension.ts
 import { Extension as Extension16 } from "@tiptap/core";
@@ -32843,7 +32901,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/timeline/TimelineEditorWidget.tsx
-import { useCallback as useCallback41, useEffect as useEffect48, useMemo as useMemo38, useRef as useRef46, useState as useState59 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect49, useMemo as useMemo38, useRef as useRef46, useState as useState59 } from "react";
 import {
   asciiTimelineToTemplateData
 } from "@bendyline/squisq/doc";
@@ -33394,7 +33452,7 @@ function TimelineEditorWidget({ editor, blockId }) {
     }
     return null;
   }, [selectedEventId, view]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (!view) return;
     const ids = new Set(
       view.timeline.tracks.flatMap((track) => track.events.map((event) => event.id))
@@ -33402,13 +33460,13 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (selectedEventId && ids.has(selectedEventId)) return;
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (editable) return;
     setAddingTrackId(null);
     setEditingTrackId(null);
     setHover(null);
   }, [editable]);
-  useEffect48(() => {
+  useEffect49(() => {
     if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
       return;
     }
@@ -33815,7 +33873,7 @@ function InlineTrackLabel({
   onFinish
 }) {
   const [draft, setDraft] = useState59(label);
-  useEffect48(() => {
+  useEffect49(() => {
     if (editing) setDraft(label);
   }, [editing, label]);
   const commitLabel = () => {
@@ -33874,8 +33932,8 @@ function EventInspector({
   const { event } = selected;
   const [label, setLabel] = useState59(event.label);
   const [description, setDescription] = useState59(event.description ?? "");
-  useEffect48(() => setLabel(event.label), [event.label]);
-  useEffect48(() => setDescription(event.description ?? ""), [event.description]);
+  useEffect49(() => setLabel(event.label), [event.label]);
+  useEffect49(() => setDescription(event.description ?? ""), [event.description]);
   const update = (patch) => dispatch(patch);
   const commitLabel = () => {
     const next = label.trim();
@@ -34185,7 +34243,7 @@ var TimelineViewExtension = Extension16.create({
 function useTimelineData(editor, blockId) {
   const [version, setVersion] = useState60(0);
   const dataCache = useRef47(null);
-  useEffect49(() => {
+  useEffect50(() => {
     const onEditorChange = () => setVersion((value) => value + 1);
     editor.on("transaction", onEditorChange);
     editor.on("update", onEditorChange);
@@ -34220,7 +34278,7 @@ function shouldPasteAsTimelineFence(text) {
 }
 
 // src/BlockPropertiesPopover.tsx
-import { useEffect as useEffect50, useId as useId13, useRef as useRef48, useState as useState61 } from "react";
+import { useEffect as useEffect51, useId as useId13, useRef as useRef48, useState as useState61 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 import { Fragment as Fragment22, jsx as jsx65, jsxs as jsxs51 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT = ".squisq-transition-flyout";
@@ -34239,10 +34297,10 @@ function BlockPropertiesPopover({
   const [inner, setInner] = useState61(blockAttrs);
   const [templateInner, setTemplateInner] = useState61(templateParams);
   const [style, setStyle] = useState61(() => computeStyle3(anchorRect));
-  useEffect50(() => {
+  useEffect51(() => {
     requestAnimationFrame(() => setStyle(computeStyle3(anchorRect, panelRef.current)));
   }, [anchorRect]);
-  useEffect50(() => {
+  useEffect51(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -34493,7 +34551,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback43, useEffect as useEffect55, useMemo as useMemo42, useRef as useRef51, useState as useState67 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect56, useMemo as useMemo42, useRef as useRef51, useState as useState67 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection as Selection2 } from "@tiptap/pm/state";
 import { Extension as Extension18, getHTMLFromFragment } from "@tiptap/core";
@@ -34538,7 +34596,7 @@ import Link2 from "@tiptap/extension-link";
 // src/WikiLink.tsx
 import { Node as Node2, InputRule } from "@tiptap/core";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
-import { useEffect as useEffect51, useState as useState62 } from "react";
+import { useEffect as useEffect52, useState as useState62 } from "react";
 import { wikiLinkPath as wikiLinkPath3, parseWikiLink as parseWikiLink3 } from "@bendyline/squisq/markdown";
 
 // src/wikiSuggestionPlugin.ts
@@ -34711,7 +34769,7 @@ function WikiLinkView({ node: node2, editor }) {
   const [exists, setExists] = useState62(null);
   const [error, setError] = useState62("");
   const [busy, setBusy] = useState62(false);
-  useEffect51(() => {
+  useEffect52(() => {
     let cancelled = false;
     setExists(null);
     setError("");
@@ -34906,7 +34964,7 @@ var InlineIcon = Node3.create({
 });
 
 // src/ImageNodeView.tsx
-import { useEffect as useEffect52, useRef as useRef49, useState as useState63 } from "react";
+import { useEffect as useEffect53, useRef as useRef49, useState as useState63 } from "react";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 import Image from "@tiptap/extension-image";
 import { mergeAttributes as mergeAttributes3 } from "@tiptap/core";
@@ -34940,7 +34998,7 @@ function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
   const sanitizedSvg = useSanitizedSvgImage(loadedSrc, isSvg);
   const resolvedSrc = sanitizedSvg ?? "";
   const resolutionFailed = needsResolution && currentResolution?.url === null || sanitizedSvg === null;
-  useEffect52(() => {
+  useEffect53(() => {
     if (isUploading || !mediaProvider || !resolveAs) return;
     setImageLoad(null);
     let cancelled = false;
@@ -35279,15 +35337,15 @@ function MediaEditButton({ src, kind, fx, className }) {
 
 // src/tiptap/TiptapVideo.tsx
 import { NodeViewWrapper as NodeViewWrapper3, ReactNodeViewRenderer as ReactNodeViewRenderer3 } from "@tiptap/react";
-import { useEffect as useEffect54, useState as useState65 } from "react";
+import { useEffect as useEffect55, useState as useState65 } from "react";
 
 // src/tiptap/useResolvedMediaSrc.ts
-import { useEffect as useEffect53, useState as useState64 } from "react";
+import { useEffect as useEffect54, useState as useState64 } from "react";
 function useResolvedMediaSrc(src) {
   const { mediaProvider, mediaRevision } = useEditorContext();
   const isRelative = !!src && !src.startsWith("blob:") && !src.startsWith("http:") && !src.startsWith("https:") && !src.startsWith("data:") && !src.startsWith("/");
   const [resolved, setResolved] = useState64(isRelative && mediaProvider ? "" : src);
-  useEffect53(() => {
+  useEffect54(() => {
     if (!mediaProvider || !isRelative) {
       setResolved(src);
       return;
@@ -35346,7 +35404,7 @@ function VideoMedia({
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
   const [audioOnly, setAudioOnly] = useState65(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
-  useEffect54(() => {
+  useEffect55(() => {
     setAudioOnly(false);
   }, [resolvedSrc]);
   const handleLoadedMetadata = (event) => {
@@ -36653,7 +36711,7 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect55(() => {
+  useEffect56(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
@@ -36673,19 +36731,19 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef51(mentionProvider);
-  useEffect55(() => {
+  useEffect56(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const fenceRenderersRef = useRef51(fenceRenderers);
-  useEffect55(() => {
+  useEffect56(() => {
     fenceRenderersRef.current = fenceRenderers;
   }, [fenceRenderers]);
   const onCopyCodeRef = useRef51(onCopyCode);
-  useEffect55(() => {
+  useEffect56(() => {
     onCopyCodeRef.current = onCopyCode;
   }, [onCopyCode]);
   const activeThemeRef = useRef51(activeTheme);
-  useEffect55(() => {
+  useEffect56(() => {
     activeThemeRef.current = activeTheme;
   }, [activeTheme]);
   const resolvedPlaceholder = useMemo42(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
@@ -36696,30 +36754,30 @@ function WysiwygEditor({
   const pendingLocalSourcesRef = useRef51([]);
   const mediaProviderRef = useRef51(mediaProvider);
   const mediaRevisionRef = useRef51(mediaRevision);
-  useEffect55(() => {
+  useEffect56(() => {
     mediaRevisionRef.current = mediaRevision;
   }, [mediaRevision]);
   const onOpenFilesPanelRef = useRef51(onOpenFilesPanel);
-  useEffect55(() => {
+  useEffect56(() => {
     onOpenFilesPanelRef.current = onOpenFilesPanel;
   }, [onOpenFilesPanel]);
   const calcEngineFactoryRef = useRef51(calcEngineFactory);
-  useEffect55(() => {
+  useEffect56(() => {
     calcEngineFactoryRef.current = calcEngineFactory;
   }, [calcEngineFactory]);
   const workspaceContainerRef = useRef51(workspaceContainer);
-  useEffect55(() => {
+  useEffect56(() => {
     workspaceContainerRef.current = workspaceContainer;
   }, [workspaceContainer]);
   const bumpMediaRevisionRef = useRef51(bumpMediaRevision);
-  useEffect55(() => {
+  useEffect56(() => {
     bumpMediaRevisionRef.current = bumpMediaRevision;
   }, [bumpMediaRevision]);
-  useEffect55(() => {
+  useEffect56(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const [accessoryPaths, setAccessoryPaths] = useState67(() => /* @__PURE__ */ new Set());
-  useEffect55(() => {
+  useEffect56(() => {
     if (!mediaProvider) {
       setAccessoryPaths(/* @__PURE__ */ new Set());
       return;
@@ -36759,7 +36817,7 @@ function WysiwygEditor({
     initialContentRef.current = markdownToTiptap(initialDisplayBodyRef.current);
   }
   const submitOnEnterRef = useRef51(submitOnEnter);
-  useEffect55(() => {
+  useEffect56(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -36991,7 +37049,7 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect55(() => {
+  useEffect56(() => {
     let cancelled = false;
     queueMicrotask(() => {
       if (!cancelled && editor && !editor.isDestroyed)
@@ -37001,13 +37059,13 @@ function WysiwygEditor({
       cancelled = true;
     };
   }, [editor, wikiLinks]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!editor) return;
     const syncPlaceholders = () => {
       syncAccessoryFileLinkPlaceholders(editor.view.dom, accessoryPaths);
@@ -37018,7 +37076,7 @@ function WysiwygEditor({
       editor.off("update", syncPlaceholders);
     };
   }, [accessoryPaths, editor]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef51(null);
@@ -37030,7 +37088,7 @@ function WysiwygEditor({
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -37086,7 +37144,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!editor) return;
     const previousLayout = sourceLayoutRef.current;
     const layoutChanged = previousLayout !== layoutMode;
@@ -37197,7 +37255,7 @@ function WysiwygEditor({
     }
     return out;
   }, [activeTheme, themeInheritance]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!editor || editor.isDestroyed) return;
     editor.view.dispatch(editor.state.tr.setMeta(DOCUMENT_TRAY_KEY, layoutMode === "document"));
   }, [editor, layoutMode]);
@@ -37436,14 +37494,14 @@ import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
-import { useCallback as useCallback44, useEffect as useEffect56, useMemo as useMemo43, useState as useState68 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect57, useMemo as useMemo43, useState as useState68 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
   const flatBlocks = useMemo43(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
   const [entries, setEntries] = useState68([]);
   const [pageEdges, setPageEdges] = useState68(null);
-  useEffect56(() => {
+  useEffect57(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -37511,7 +37569,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -37572,7 +37630,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect56(() => {
+  useEffect57(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -37656,7 +37714,7 @@ import { flattenRenderableBlocks, DEFAULT_THEME as DEFAULT_THEME5 } from "@bendy
 import { extractPlainText as extractPlainText3 } from "@bendyline/squisq/markdown";
 
 // src/usePreviewProjection.ts
-import { useEffect as useEffect57, useState as useState69 } from "react";
+import { useEffect as useEffect58, useState as useState69 } from "react";
 import {
   resolveAudioMapping,
   resolveDataReferences
@@ -37703,7 +37761,7 @@ function preserveEquivalentAudio(previous, next) {
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2, mediaRevision) {
   const [projection, setProjection] = useState69(null);
-  useEffect57(() => {
+  useEffect58(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -37982,7 +38040,7 @@ function InlinePreviewGutter({
 import {
   memo,
   useCallback as useCallback45,
-  useEffect as useEffect58,
+  useEffect as useEffect59,
   useMemo as useMemo46,
   useRef as useRef53,
   useState as useState71
@@ -38455,10 +38513,10 @@ function useActiveOutlineBlockId() {
   flatBlocksRef.current = flatBlocks;
   const headingLocations = flatBlocks.map((block) => `${block.id}:${block.sourceHeading?.position?.start.line ?? ""}`).join("\0");
   const [activeId, setActiveId] = useState71(null);
-  useEffect58(() => {
+  useEffect59(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -38480,7 +38538,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, headingLocations]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -38567,7 +38625,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback47, useEffect as useEffect60, useMemo as useMemo48, useRef as useRef55, useState as useState72 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect61, useMemo as useMemo48, useRef as useRef55, useState as useState72 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -38691,7 +38749,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback46, useEffect as useEffect59, useMemo as useMemo47, useRef as useRef54 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect60, useMemo as useMemo47, useRef as useRef54 } from "react";
 import { jsx as jsx75, jsxs as jsxs61 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -38711,7 +38769,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect59(() => {
+  useEffect60(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -38787,7 +38845,7 @@ function CodeContextZones({ options }) {
   const [, setZonesVersion] = useState72(0);
   const [expandedById, setExpandedById] = useState72({});
   const seenIds = useRef55(/* @__PURE__ */ new Set());
-  useEffect60(() => {
+  useEffect61(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -38810,7 +38868,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -39276,7 +39334,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback49, useEffect as useEffect63, useMemo as useMemo49, useRef as useRef58, useState as useState75 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect64, useMemo as useMemo49, useRef as useRef58, useState as useState75 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -39289,7 +39347,7 @@ import { useProcessedAudio as useProcessedAudio2 } from "@bendyline/squisq-video
 import { MediaClipLayer, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback48, useEffect as useEffect61, useRef as useRef56, useState as useState73 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect62, useRef as useRef56, useState as useState73 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -39318,10 +39376,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef56(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect61(() => {
+  useEffect62(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -39419,7 +39477,7 @@ function timelineBars(clips) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect62, useLayoutEffect as useLayoutEffect14, useRef as useRef57, useState as useState74 } from "react";
+import { useEffect as useEffect63, useLayoutEffect as useLayoutEffect14, useRef as useRef57, useState as useState74 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
 import { Fragment as Fragment27, jsx as jsx78, jsxs as jsxs63 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -39450,7 +39508,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect62(() => {
+  useEffect63(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -39938,7 +39996,7 @@ function TimelineTrack({
     play();
   }, [play]);
   const [scrubbing, setScrubbing] = useState75(false);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -39976,7 +40034,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef58(null);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -39987,7 +40045,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -40036,7 +40094,7 @@ function TimelineTrack({
   const zoomIn = useCallback49(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback49(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
   const [viewportWidth, setViewportWidth] = useState75(0);
-  useEffect63(() => {
+  useEffect64(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -40050,7 +40108,7 @@ function TimelineTrack({
   const dragRef = useRef58(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect63(() => {
+  useEffect64(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -40081,7 +40139,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback49(
@@ -40943,7 +41001,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback50, useEffect as useEffect64, useMemo as useMemo52, useRef as useRef59, useState as useState76 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect65, useMemo as useMemo52, useRef as useRef59, useState as useState76 } from "react";
 import {
   isSvgImageSource as isSvgImageSource2,
   parseMarkdown as parseMarkdown9,
@@ -41003,13 +41061,15 @@ function loadRenderFn() {
 var preparationPromise = null;
 function loadPreparation() {
   preparationPromise ?? (preparationPromise = Promise.all([
-    import("@bendyline/squisq-formats/html"),
+    import("@bendyline/squisq-formats/html-prepare"),
+    import("@bendyline/squisq-formats/html-icons"),
     import("@bendyline/squisq-formats/diagrams"),
     import("@bendyline/squisq-react/diagram-pictures")
-  ]).then(([html, diagrams, pictures]) => ({
-    needs: html.needsPlainHtmlPreparation,
-    prepare: html.prepareMarkdownDocForPlainHtml,
-    renderDiagram: diagrams.cachingDiagramRasterizer(pictures.createDiagramPictureRenderer())
+  ]).then(([prep, icons, diagrams, pictures]) => ({
+    needs: prep.needsPlainHtmlPreparation,
+    prepare: prep.prepareMarkdownDocForPlainHtml,
+    renderDiagram: diagrams.cachingDiagramRasterizer(pictures.createDiagramPictureRenderer()),
+    outlineIcons: icons.plainHtmlIcons
   })));
   return preparationPromise;
 }
@@ -41051,7 +41111,7 @@ function PlainHtmlPreview({
   const parsedDoc = useMemo52(() => parseMarkdown9(markdown), [markdown]);
   const [wikiProjection, setWikiProjection] = useState76(null);
   const mdDoc = wikiProjection?.source === parsedDoc && wikiProjection.support === wikiLinks ? wikiProjection.doc : parsedDoc;
-  useEffect64(() => {
+  useEffect65(() => {
     if (!wikiLinks) return;
     let cancelled = false;
     void resolveWikiLinks(
@@ -41070,7 +41130,7 @@ function PlainHtmlPreview({
     };
   }, [parsedDoc, wikiLinks]);
   const [resolvedImages, setResolvedImages] = useState76(null);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -41107,7 +41167,7 @@ function PlainHtmlPreview({
   }, [resolvedImages, images]);
   const iconsCss = useMemo52(() => collectInlineFontAwesomeCss(), []);
   const [preparation, setPreparation] = useState76(null);
-  useEffect64(() => {
+  useEffect65(() => {
     let cancelled = false;
     loadPreparation().then(
       (loaded) => {
@@ -41125,17 +41185,22 @@ function PlainHtmlPreview({
     [container, mediaRevision]
   );
   const needsPreparation = useMemo52(
-    () => preparation?.needs(mdDoc, { renderDiagram: preparation.renderDiagram, container }) ?? false,
+    () => preparation?.needs(mdDoc, {
+      renderDiagram: preparation.renderDiagram,
+      outlineIcons: preparation.outlineIcons,
+      container
+    }) ?? false,
     [preparation, mdDoc, container]
   );
   const [prepared, setPrepared] = useState76(null);
   const preparedOnceRef = useRef59(false);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!preparation || !needsPreparation) return;
     let cancelled = false;
     const prepare = () => {
       preparation.prepare(mdDoc, {
         renderDiagram: preparation.renderDiagram,
+        outlineIcons: preparation.outlineIcons,
         container,
         dataTableCache
       }).then(
@@ -41157,7 +41222,7 @@ function PlainHtmlPreview({
   }, [preparation, needsPreparation, mdDoc, container, dataTableCache]);
   const view = needsPreparation ? prepared : null;
   const [renderFn, setRenderFn] = useState76(() => cachedRender);
-  useEffect64(() => {
+  useEffect65(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -41198,7 +41263,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect64(() => {
+  useEffect65(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -41294,11 +41359,11 @@ function PlainHtmlPreview({
       style2.remove();
     };
   }, [onCopyCode, showCodeCopyButton]);
-  useEffect64(() => {
+  useEffect65(() => {
     installFrameCodeCopyControls();
     return () => removeFrameCodeCopyControlsRef.current();
   }, [html, installFrameCodeCopyControls]);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -41383,7 +41448,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState80, useEffect as useEffect69, useMemo as useMemo57, useCallback as useCallback54, useRef as useRef63 } from "react";
+import { useState as useState80, useEffect as useEffect70, useMemo as useMemo57, useCallback as useCallback54, useRef as useRef63 } from "react";
 import { createPortal as createPortal18 } from "react-dom";
 import {
   DashboardView,
@@ -41528,7 +41593,7 @@ import {
   createContext as createContext7,
   useCallback as useCallback51,
   useContext as useContext7,
-  useEffect as useEffect65,
+  useEffect as useEffect66,
   useId as useId15,
   useLayoutEffect as useLayoutEffect15,
   useMemo as useMemo53,
@@ -41795,12 +41860,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect65(() => {
+  useEffect66(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect65(() => {
+  useEffect66(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -41812,7 +41877,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect65(() => {
+  useEffect66(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -41821,10 +41886,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect65(() => {
+  useEffect66(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -41832,7 +41897,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -41844,7 +41909,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
@@ -41879,7 +41944,7 @@ function PresentationModeProvider({
       window.removeEventListener("resize", updatePosition);
     };
   }, [activeTarget, rootRef]);
-  useEffect65(
+  useEffect66(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -42008,7 +42073,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -42153,7 +42218,7 @@ import {
   createContext as createContext8,
   useCallback as useCallback52,
   useContext as useContext8,
-  useEffect as useEffect66,
+  useEffect as useEffect67,
   useMemo as useMemo54,
   useRef as useRef61,
   useState as useState78
@@ -42223,7 +42288,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect66(() => {
+  useEffect67(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -42232,10 +42297,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -42326,7 +42391,7 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback53, useEffect as useEffect67, useMemo as useMemo55, useRef as useRef62 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect68, useMemo as useMemo55, useRef as useRef62 } from "react";
 import {
   BlockRenderer as BlockRenderer4,
   FlashcardFaceView,
@@ -42383,7 +42448,7 @@ function PrintPreview({
     [contentDoc]
   );
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect67(() => {
+  useEffect68(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -42522,7 +42587,7 @@ function PrintPreview({
 import {
   createContext as createContext9,
   useContext as useContext9,
-  useEffect as useEffect68,
+  useEffect as useEffect69,
   useMemo as useMemo56,
   useState as useState79
 } from "react";
@@ -42629,7 +42694,7 @@ function SlideshowDataGridRenderer({
   const activeSourceKey = sourceKey(source);
   const [remote, setRemote] = useState79({ key: "", status: "idle" });
   const [gridModule, setGridModule] = useState79(null);
-  useEffect68(() => {
+  useEffect69(() => {
     let active = true;
     void loadGridModule().then((module) => {
       if (active) setGridModule(module);
@@ -42638,7 +42703,7 @@ function SlideshowDataGridRenderer({
       active = false;
     };
   }, []);
-  useEffect68(() => {
+  useEffect69(() => {
     if (!container || !source || !gridModule) {
       setRemote({ key: activeSourceKey, status: "idle" });
       return;
@@ -42689,13 +42754,13 @@ function SlideshowDataGridRenderer({
     () => useLocalGrid && gridModule ? new gridModule.TableStoreClient({ headers: previewHeaders, cells: previewRows }) : null,
     [previewHeaders, previewRows, useLocalGrid, gridModule]
   );
-  useEffect68(() => () => localProvider?.dispose(), [localProvider]);
+  useEffect69(() => () => localProvider?.dispose(), [localProvider]);
   const ready = currentRemote?.status === "ready" ? currentRemote : void 0;
   const provider = ready?.provider ?? localProvider;
   const ingest = ready?.ingest ?? (localProvider ? { headers: previewHeaders, cells: previewRows } : void 0);
   const initialView = ready?.initialView ?? EMPTY_VIEW;
   const [view, setView] = useState79(initialView);
-  useEffect68(() => setView(initialView), [initialView, provider]);
+  useEffect69(() => setView(initialView), [initialView, provider]);
   if (!provider || !ingest || !gridModule) return /* @__PURE__ */ jsx87(Fragment28, { children: fallback });
   const { style } = layer.content;
   const rowHeight = Math.max(32, style.fontSize * 2.1);
@@ -42832,11 +42897,11 @@ function PreviewPanel({
   const isNarrateMode = activeDisplayMode === "narrate";
   const isDashboardMode = activeDisplayMode === "dashboard";
   const isFlashcardsMode = activeDisplayMode === "flashcards";
-  useEffect69(() => {
+  useEffect70(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect69(() => {
+  useEffect70(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -43113,10 +43178,98 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState81, useEffect as useEffect70, useRef as useRef64, useCallback as useCallback55 } from "react";
+import { useState as useState82, useEffect as useEffect72, useRef as useRef65, useCallback as useCallback55 } from "react";
 import { isSvgImageSource as isSvgImageSource3 } from "@bendyline/squisq/markdown";
 import { sanitizedSvgImageUrl as sanitizedSvgImageUrl2 } from "@bendyline/squisq-react";
+
+// src/MediaPreviewDialog.tsx
+import { useEffect as useEffect71, useId as useId16, useRef as useRef64, useState as useState81 } from "react";
 import { jsx as jsx89, jsxs as jsxs72 } from "react/jsx-runtime";
+function MediaPreviewDialog({
+  kind,
+  name,
+  detail,
+  src,
+  failed = false,
+  isDark,
+  onClose
+}) {
+  const overlayRef = useRef64(null);
+  const dialogRef = useRef64(null);
+  const titleId = useId16();
+  const [playbackFailed, setPlaybackFailed] = useState81(false);
+  useModalDialog({ rootRef: overlayRef, dialogRef, onClose });
+  useEffect71(() => setPlaybackFailed(false), [src]);
+  let body;
+  if (failed || playbackFailed || src === "") {
+    body = /* @__PURE__ */ jsx89("div", { className: "squisq-media-preview-message", children: "This file can\u2019t be previewed." });
+  } else if (src === null) {
+    body = /* @__PURE__ */ jsx89("div", { className: "squisq-media-preview-message", children: "Loading\u2026" });
+  } else if (kind === "image") {
+    body = /* @__PURE__ */ jsx89(ImageViewer, { src, alt: name, theme: isDark ? "dark" : "light" });
+  } else if (kind === "video") {
+    body = /* @__PURE__ */ jsx89(
+      "video",
+      {
+        className: "squisq-media-preview-video",
+        src,
+        controls: true,
+        autoPlay: true,
+        playsInline: true,
+        onError: () => setPlaybackFailed(true)
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsxs72("div", { className: "squisq-media-preview-audio", children: [
+      /* @__PURE__ */ jsx89("span", { className: "squisq-media-preview-audio-icon", "aria-hidden": "true", children: "\u{1F50A}" }),
+      /* @__PURE__ */ jsx89("audio", { src, controls: true, autoPlay: true, onError: () => setPlaybackFailed(true) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx89(
+    "div",
+    {
+      ref: overlayRef,
+      className: "squisq-media-preview",
+      "data-theme": isDark ? "dark" : "light",
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      ...ownsContextMenuProps,
+      children: /* @__PURE__ */ jsxs72(
+        "div",
+        {
+          ref: dialogRef,
+          className: `squisq-media-preview-surface squisq-media-preview-surface--${kind}`,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          tabIndex: -1,
+          "data-testid": "media-preview-dialog",
+          children: [
+            /* @__PURE__ */ jsxs72("header", { className: "squisq-media-preview-header", children: [
+              /* @__PURE__ */ jsx89("span", { id: titleId, className: "squisq-media-preview-title", title: name, children: name }),
+              /* @__PURE__ */ jsx89("span", { className: "squisq-media-preview-detail", children: detail }),
+              /* @__PURE__ */ jsx89(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-media-preview-close",
+                  onClick: onClose,
+                  "aria-label": "Close",
+                  children: "\xD7"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx89("div", { className: "squisq-media-preview-body", children: body })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/MediaBin.tsx
+import { Fragment as Fragment29, jsx as jsx90, jsxs as jsxs73 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -43188,23 +43341,24 @@ function MediaBin({
   allowBinaryDownloads = true,
   highlightPath = null
 }) {
-  const [entries, setEntries] = useState81([]);
-  const listRef = useRef64(null);
-  useEffect70(() => {
+  const [entries, setEntries] = useState82([]);
+  const listRef = useRef65(null);
+  useEffect72(() => {
     if (!highlightPath || !listRef.current) return;
     const item = listRef.current.querySelector(`[data-media-path="${CSS.escape(highlightPath)}"]`);
     if (item instanceof HTMLElement) {
       item.scrollIntoView({ block: "nearest" });
     }
   }, [highlightPath, entries]);
-  const [thumbUrls, setThumbUrls] = useState81({});
-  const [loading, setLoading] = useState81(false);
-  const [isDropActive, setIsDropActive] = useState81(false);
-  const [downloadingPath, setDownloadingPath] = useState81(null);
-  const [contextMenu, setContextMenu] = useState81(null);
-  const fileInputRef = useRef64(null);
-  const contextMenuRef = useRef64(null);
-  const dropDepthRef = useRef64(0);
+  const [thumbUrls, setThumbUrls] = useState82({});
+  const [loading, setLoading] = useState82(false);
+  const [isDropActive, setIsDropActive] = useState82(false);
+  const [downloadingPath, setDownloadingPath] = useState82(null);
+  const [contextMenu, setContextMenu] = useState82(null);
+  const [preview, setPreview] = useState82(null);
+  const fileInputRef = useRef65(null);
+  const contextMenuRef = useRef65(null);
+  const dropDepthRef = useRef65(0);
   const updateEntries = useCallback55(
     async (provider) => {
       const list = sortMediaEntries(filterVisibleMediaEntries(await provider.listMedia()));
@@ -43223,7 +43377,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect70(() => {
+  useEffect72(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -43244,7 +43398,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect70(() => {
+  useEffect72(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -43401,6 +43555,27 @@ function MediaBin({
   const openContextMenu = useCallback55((entry, x, y) => {
     setContextMenu({ entry, x, y });
   }, []);
+  useEffect72(() => {
+    setPreview(null);
+  }, [mediaProvider]);
+  const openPreview = useCallback55(
+    async (entry) => {
+      if (!mediaProvider || squisqMediaKind(entry.mimeType) === "file") return;
+      const thumb = thumbUrls[entry.name];
+      setPreview({ entry, src: thumb ?? null, failed: false });
+      if (thumb !== void 0) return;
+      let src = null;
+      try {
+        src = isImageMime(entry.mimeType) ? await resolveThumbnailUrl(mediaProvider, entry.name) : await mediaProvider.resolveUrl(entry.name);
+      } catch {
+      }
+      setPreview(
+        (current) => current?.entry.name === entry.name ? { entry, src, failed: src === null } : current
+      );
+    },
+    [mediaProvider, thumbUrls]
+  );
+  const closePreview = useCallback55(() => setPreview(null), []);
   const removeLabel = contextMenu ? isImageMime(contextMenu.entry.mimeType) ? "Remove image" : "Remove file" : "Remove file";
   const menuLeft = contextMenu ? Math.min(contextMenu.x, Math.max(8, window.innerWidth - 168)) : 0;
   const menuTop = contextMenu ? Math.min(contextMenu.y, Math.max(8, window.innerHeight - 48)) : 0;
@@ -43410,189 +43585,217 @@ function MediaBin({
   };
   const handleItemKeyDown = useCallback55(
     (entry, event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        if (event.target !== event.currentTarget) return;
+        if (squisqMediaKind(entry.mimeType) === "file") return;
+        event.preventDefault();
+        void openPreview(entry);
+        return;
+      }
       if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
       event.preventDefault();
       const rect = event.currentTarget.getBoundingClientRect();
       openContextMenu(entry, rect.left + 16, rect.top + 16);
     },
-    [openContextMenu]
+    [openContextMenu, openPreview]
   );
-  return /* @__PURE__ */ jsxs72(
-    "div",
-    {
-      className: [
-        "squisq-media-bin",
-        isDark ? "squisq-media-bin--dark" : "",
-        isDropActive ? "squisq-media-bin--drop-active" : ""
-      ].filter(Boolean).join(" "),
-      onDragEnter: handleDragEnter,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-      "aria-busy": loading,
-      ...ownsContextMenuProps,
-      children: [
-        /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-header", children: [
-          /* @__PURE__ */ jsxs72("span", { className: "squisq-media-bin-title", children: [
-            "Attachments ",
-            entries.length > 0 && `(${entries.length})`
-          ] }),
-          /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-actions", children: [
-            onRecord && /* @__PURE__ */ jsxs72(
-              "button",
-              {
-                type: "button",
-                className: "squisq-media-bin-record",
-                onClick: onRecord,
-                disabled: !mediaProvider,
-                title: mediaProvider ? "Record media" : "Load a content zip or select a storage slot first",
-                "aria-label": "Record media",
-                "aria-haspopup": "dialog",
-                "aria-expanded": isRecorderOpen,
-                children: [
-                  /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-action-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-record-dot" }) }),
-                  /* @__PURE__ */ jsx89("span", { children: "Record" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs72(
-              "button",
-              {
-                type: "button",
-                className: "squisq-media-bin-upload",
-                onClick: handleUploadClick,
-                disabled: !mediaProvider || loading,
-                title: mediaProvider ? "Upload files" : "Load a content zip or select a storage slot first",
-                children: [
-                  /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-action-icon", children: "+" }),
-                  /* @__PURE__ */ jsx89("span", { children: "Upload" })
-                ]
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-list", ref: listRef, children: [
-          !mediaProvider && /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-empty", children: [
-            "No media context.",
-            /* @__PURE__ */ jsx89("br", {}),
-            "Load a content zip or select a storage slot."
+  const previewKind = preview ? squisqMediaKind(preview.entry.mimeType) : "file";
+  return /* @__PURE__ */ jsxs73(Fragment29, { children: [
+    /* @__PURE__ */ jsxs73(
+      "div",
+      {
+        className: [
+          "squisq-media-bin",
+          isDark ? "squisq-media-bin--dark" : "",
+          isDropActive ? "squisq-media-bin--drop-active" : ""
+        ].filter(Boolean).join(" "),
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        "aria-busy": loading,
+        ...ownsContextMenuProps,
+        children: [
+          /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-header", children: [
+            /* @__PURE__ */ jsxs73("span", { className: "squisq-media-bin-title", children: [
+              "Attachments ",
+              entries.length > 0 && `(${entries.length})`
+            ] }),
+            /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-actions", children: [
+              onRecord && /* @__PURE__ */ jsxs73(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-media-bin-record",
+                  onClick: onRecord,
+                  disabled: !mediaProvider,
+                  title: mediaProvider ? "Record media" : "Load a content zip or select a storage slot first",
+                  "aria-label": "Record media",
+                  "aria-haspopup": "dialog",
+                  "aria-expanded": isRecorderOpen,
+                  children: [
+                    /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-action-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-record-dot" }) }),
+                    /* @__PURE__ */ jsx90("span", { children: "Record" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs73(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-media-bin-upload",
+                  onClick: handleUploadClick,
+                  disabled: !mediaProvider || loading,
+                  title: mediaProvider ? "Upload files" : "Load a content zip or select a storage slot first",
+                  children: [
+                    /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-action-icon", children: "+" }),
+                    /* @__PURE__ */ jsx90("span", { children: "Upload" })
+                  ]
+                }
+              )
+            ] })
           ] }),
-          mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx89("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
-          entries.map((entry) => {
-            const thumb = thumbUrls[entry.name];
-            const basename = basenameForPath(entry.name);
-            const altText = basename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " ");
-            const isUnused = !!usedMediaPaths && !usedMediaPaths.has(entry.name);
-            const handleDragStart = (e2) => {
-              const payload = {
-                name: entry.name,
-                mimeType: entry.mimeType,
-                alt: altText
+          /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-list", ref: listRef, children: [
+            !mediaProvider && /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-empty", children: [
+              "No media context.",
+              /* @__PURE__ */ jsx90("br", {}),
+              "Load a content zip or select a storage slot."
+            ] }),
+            mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx90("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
+            entries.map((entry) => {
+              const thumb = thumbUrls[entry.name];
+              const basename = basenameForPath(entry.name);
+              const altText = basename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " ");
+              const isUnused = !!usedMediaPaths && !usedMediaPaths.has(entry.name);
+              const isPreviewable = squisqMediaKind(entry.mimeType) !== "file";
+              const handleDragStart = (e2) => {
+                const payload = {
+                  name: entry.name,
+                  mimeType: entry.mimeType,
+                  alt: altText
+                };
+                e2.dataTransfer.setData(SQUISQ_MEDIA_MIME, JSON.stringify(payload));
+                e2.dataTransfer.setData("text/plain", buildSquisqMediaReference(payload));
+                e2.dataTransfer.effectAllowed = "copy";
               };
-              e2.dataTransfer.setData(SQUISQ_MEDIA_MIME, JSON.stringify(payload));
-              e2.dataTransfer.setData("text/plain", buildSquisqMediaReference(payload));
-              e2.dataTransfer.effectAllowed = "copy";
-            };
-            return /* @__PURE__ */ jsxs72(
-              "div",
-              {
-                "data-media-path": entry.name,
-                className: entry.name === highlightPath ? "squisq-media-bin-item squisq-media-bin-item--highlight" : "squisq-media-bin-item",
-                title: `${entry.name}
+              return /* @__PURE__ */ jsxs73(
+                "div",
+                {
+                  "data-media-path": entry.name,
+                  className: [
+                    "squisq-media-bin-item",
+                    isPreviewable ? "squisq-media-bin-item--previewable" : "",
+                    entry.name === highlightPath ? "squisq-media-bin-item--highlight" : ""
+                  ].filter(Boolean).join(" "),
+                  title: `${entry.name}
 ${entry.mimeType}
 ${formatSize(entry.size)}`,
-                draggable: true,
-                tabIndex: 0,
-                onContextMenu: (e2) => {
-                  e2.preventDefault();
-                  openContextMenu(entry, e2.clientX, e2.clientY);
+                  draggable: true,
+                  tabIndex: 0,
+                  onClick: isPreviewable ? () => void openPreview(entry) : void 0,
+                  onContextMenu: (e2) => {
+                    e2.preventDefault();
+                    openContextMenu(entry, e2.clientX, e2.clientY);
+                  },
+                  onDragStart: handleDragStart,
+                  onKeyDown: (e2) => handleItemKeyDown(entry, e2),
+                  children: [
+                    thumb ? /* @__PURE__ */ jsx90(
+                      "img",
+                      {
+                        src: thumb,
+                        alt: basename,
+                        className: "squisq-media-bin-thumb",
+                        draggable: false
+                      }
+                    ) : /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
+                    /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-meta", children: [
+                      /* @__PURE__ */ jsx90("div", { className: "squisq-media-bin-name", children: basename }),
+                      /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-detail-row", children: [
+                        /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
+                        isUnused && /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
+                      ] })
+                    ] }),
+                    allowBinaryDownloads && /* @__PURE__ */ jsx90(
+                      "button",
+                      {
+                        type: "button",
+                        className: "squisq-media-bin-download",
+                        title: `Download ${basename}`,
+                        "aria-label": `Download ${basename}`,
+                        disabled: !mediaProvider || downloadingPath !== null,
+                        draggable: false,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          void handleDownloadEntry(entry);
+                        },
+                        onDragStart: (event) => event.preventDefault(),
+                        children: /* @__PURE__ */ jsx90("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
+                      }
+                    )
+                  ]
                 },
-                onDragStart: handleDragStart,
-                onKeyDown: (e2) => handleItemKeyDown(entry, e2),
-                children: [
-                  thumb ? /* @__PURE__ */ jsx89(
-                    "img",
-                    {
-                      src: thumb,
-                      alt: basename,
-                      className: "squisq-media-bin-thumb",
-                      draggable: false
-                    }
-                  ) : /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
-                  /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-meta", children: [
-                    /* @__PURE__ */ jsx89("div", { className: "squisq-media-bin-name", children: basename }),
-                    /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-detail-row", children: [
-                      /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
-                      isUnused && /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
-                    ] })
-                  ] }),
-                  allowBinaryDownloads && /* @__PURE__ */ jsx89(
-                    "button",
-                    {
-                      type: "button",
-                      className: "squisq-media-bin-download",
-                      title: `Download ${basename}`,
-                      "aria-label": `Download ${basename}`,
-                      disabled: !mediaProvider || downloadingPath !== null,
-                      draggable: false,
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        void handleDownloadEntry(entry);
-                      },
-                      onDragStart: (event) => event.preventDefault(),
-                      children: /* @__PURE__ */ jsx89("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
-                    }
-                  )
-                ]
-              },
-              entry.name
-            );
-          })
-        ] }),
-        isDropActive && /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-drop-target", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
-          /* @__PURE__ */ jsx89("strong", { children: "Drop media here" }),
-          /* @__PURE__ */ jsx89("span", { children: "Attach to this document" })
-        ] }),
-        contextMenu && /* @__PURE__ */ jsx89(
-          "div",
-          {
-            ref: contextMenuRef,
-            className: "squisq-media-bin-context-menu",
-            role: "menu",
-            "aria-label": `${contextMenu.entry.name} actions`,
-            style: contextMenuStyle,
-            children: /* @__PURE__ */ jsx89(
-              "button",
-              {
-                type: "button",
-                role: "menuitem",
-                className: "squisq-media-bin-context-menu-item squisq-media-bin-context-menu-item--danger",
-                onClick: () => handleRemoveEntry(contextMenu.entry),
-                disabled: !mediaProvider || loading,
-                children: removeLabel
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx89(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            multiple: true,
-            style: { display: "none" },
-            onChange: handleFileChange
-          }
-        )
-      ]
-    }
-  );
+                entry.name
+              );
+            })
+          ] }),
+          isDropActive && /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-drop-target", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx90("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
+            /* @__PURE__ */ jsx90("strong", { children: "Drop media here" }),
+            /* @__PURE__ */ jsx90("span", { children: "Attach to this document" })
+          ] }),
+          contextMenu && /* @__PURE__ */ jsx90(
+            "div",
+            {
+              ref: contextMenuRef,
+              className: "squisq-media-bin-context-menu",
+              role: "menu",
+              "aria-label": `${contextMenu.entry.name} actions`,
+              style: contextMenuStyle,
+              children: /* @__PURE__ */ jsx90(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "squisq-media-bin-context-menu-item squisq-media-bin-context-menu-item--danger",
+                  onClick: () => handleRemoveEntry(contextMenu.entry),
+                  disabled: !mediaProvider || loading,
+                  children: removeLabel
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx90(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              style: { display: "none" },
+              onChange: handleFileChange
+            }
+          )
+        ]
+      }
+    ),
+    preview && previewKind !== "file" && /* @__PURE__ */ jsx90(
+      MediaPreviewDialog,
+      {
+        kind: previewKind,
+        name: basenameForPath(preview.entry.name),
+        detail: `${formatSize(preview.entry.size)} \xB7 ${preview.entry.mimeType}`,
+        src: preview.src,
+        failed: preview.failed,
+        isDark,
+        onClose: closePreview
+      }
+    )
+  ] });
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState82 } from "react";
-import { Fragment as Fragment29, jsx as jsx90, jsxs as jsxs73 } from "react/jsx-runtime";
+import { useState as useState83 } from "react";
+import { Fragment as Fragment30, jsx as jsx91, jsxs as jsxs74 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
   zoneProps,
@@ -43600,8 +43803,8 @@ function DropZoneOverlay({
 }) {
   const showMedia = dragContentType === "media" || dragContentType === "mixed";
   const showText = dragContentType === "text" || dragContentType === "mixed";
-  return /* @__PURE__ */ jsx90("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs73("div", { className: "squisq-drop-overlay-inner", children: [
-    showMedia && /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs74("div", { className: "squisq-drop-overlay-inner", children: [
+    showMedia && /* @__PURE__ */ jsx91(
       DropZone,
       {
         target: "media",
@@ -43613,8 +43816,8 @@ function DropZoneOverlay({
         variant: "media"
       }
     ),
-    showText && /* @__PURE__ */ jsxs73(Fragment29, { children: [
-      /* @__PURE__ */ jsx90(
+    showText && /* @__PURE__ */ jsxs74(Fragment30, { children: [
+      /* @__PURE__ */ jsx91(
         DropZone,
         {
           target: "insert",
@@ -43625,7 +43828,7 @@ function DropZoneOverlay({
           variant: "insert"
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         DropZone,
         {
           target: "replace",
@@ -43648,9 +43851,9 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState82(false);
+  const [isHovering, setIsHovering] = useState83(false);
   const props = zoneProps(target);
-  return /* @__PURE__ */ jsxs73(
+  return /* @__PURE__ */ jsxs74(
     "div",
     {
       className: [
@@ -43683,16 +43886,16 @@ function DropZone({
         props.onDrop(e2);
       },
       children: [
-        /* @__PURE__ */ jsx90("span", { className: "squisq-drop-zone-icon", children: icon }),
-        /* @__PURE__ */ jsx90("span", { className: "squisq-drop-zone-label", children: label }),
-        /* @__PURE__ */ jsx90("span", { className: "squisq-drop-zone-desc", children: description })
+        /* @__PURE__ */ jsx91("span", { className: "squisq-drop-zone-icon", children: icon }),
+        /* @__PURE__ */ jsx91("span", { className: "squisq-drop-zone-label", children: label }),
+        /* @__PURE__ */ jsx91("span", { className: "squisq-drop-zone-desc", children: description })
       ]
     }
   );
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect71, useLayoutEffect as useLayoutEffect16, useRef as useRef65, useState as useState83 } from "react";
+import { useEffect as useEffect73, useLayoutEffect as useLayoutEffect16, useRef as useRef66, useState as useState84 } from "react";
 import { createPortal as createPortal19 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -43705,16 +43908,16 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState83(null);
-  const tooltipRef = useRef65(null);
-  const timerRef = useRef65(null);
-  const currentTargetRef = useRef65(null);
-  const visibleRef = useRef65(false);
-  const pressedTargetRef = useRef65(null);
-  const lastPointerWasTouchRef = useRef65(false);
+  const [state, setState3] = useState84(null);
+  const tooltipRef = useRef66(null);
+  const timerRef = useRef66(null);
+  const currentTargetRef = useRef66(null);
+  const visibleRef = useRef66(false);
+  const pressedTargetRef = useRef66(null);
+  const lastPointerWasTouchRef = useRef66(false);
   useLayoutEffect16(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
@@ -43726,7 +43929,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect71(() => {
+  useEffect73(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -43808,7 +44011,7 @@ function TooltipLayer() {
   }, []);
   if (!state) return null;
   return createPortal19(
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx92(
       "div",
       {
         role: "tooltip",
@@ -43828,13 +44031,13 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect78, useRef as useRef74, useState as useState90, useCallback as useCallback63, useMemo as useMemo62 } from "react";
+import { useEffect as useEffect80, useRef as useRef75, useState as useState91, useCallback as useCallback63, useMemo as useMemo62 } from "react";
 
 // src/BlockPreviewPanel.tsx
 import { useMemo as useMemo58 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS7 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks6, DEFAULT_THEME as DEFAULT_THEME7 } from "@bendyline/squisq/doc";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 function BlockPreviewPanel({ basePath = "/" }) {
   const { doc, activeBlockStartLine, mediaProvider, workspaceContainer, fileName, mediaRevision } = useEditorContext();
   const previewSettings = usePreviewSettingsOptional();
@@ -43853,12 +44056,12 @@ function BlockPreviewPanel({ basePath = "/" }) {
     [previewDoc, block, theme, viewport]
   );
   if (!visual) return null;
-  return /* @__PURE__ */ jsx92("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx93("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx93(
     "div",
     {
       className: "squisq-block-preview-frame",
       style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-      children: /* @__PURE__ */ jsx92(
+      children: /* @__PURE__ */ jsx93(
         BlockThumbnail,
         {
           visual,
@@ -43872,14 +44075,14 @@ function BlockPreviewPanel({ basePath = "/" }) {
 }
 
 // src/NavigationSheet.tsx
-import { useCallback as useCallback57, useEffect as useEffect73, useId as useId16, useRef as useRef68, useState as useState84 } from "react";
+import { useCallback as useCallback57, useEffect as useEffect75, useId as useId17, useRef as useRef69, useState as useState85 } from "react";
 
 // src/BlockPreviewList.tsx
-import { useCallback as useCallback56, useRef as useRef66 } from "react";
+import { useCallback as useCallback56, useRef as useRef67 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS8 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks7 } from "@bendyline/squisq/doc";
 import { BlockRenderer as BlockRenderer5, MediaContext as MediaContext6 } from "@bendyline/squisq-react";
-import { Fragment as Fragment30, jsx as jsx93, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx94, jsxs as jsxs75 } from "react/jsx-runtime";
 function BlockPreviewList({
   basePath = "/",
   viewport = VIEWPORT_PRESETS8.landscape,
@@ -43888,7 +44091,7 @@ function BlockPreviewList({
 }) {
   const { doc, activeView, layoutMode, goToBlockByLine, monacoEditor } = useEditorContext();
   const items = useBlockPreviewItems(viewport);
-  const listRef = useRef66(null);
+  const listRef = useRef67(null);
   const handleSelect = useCallback56(
     (item) => {
       const line = blockStartLine(item.sourceBlock);
@@ -43915,9 +44118,9 @@ function BlockPreviewList({
     [activeView, doc, goToBlockByLine, layoutMode, monacoEditor, onNavigate]
   );
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx93("div", { className: "squisq-preview-list-empty", children: /* @__PURE__ */ jsx93("p", { children: "Add some content to see block previews." }) });
+    return /* @__PURE__ */ jsx94("div", { className: "squisq-preview-list-empty", children: /* @__PURE__ */ jsx94("p", { children: "Add some content to see block previews." }) });
   }
-  return /* @__PURE__ */ jsx93(MediaContext6.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx93("ul", { ref: listRef, className: "squisq-preview-list", "aria-label": "Block previews", children: items.map((item) => /* @__PURE__ */ jsx93("li", { children: /* @__PURE__ */ jsxs74(
+  return /* @__PURE__ */ jsx94(MediaContext6.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx94("ul", { ref: listRef, className: "squisq-preview-list", "aria-label": "Block previews", children: items.map((item) => /* @__PURE__ */ jsx94("li", { children: /* @__PURE__ */ jsxs75(
     "button",
     {
       type: "button",
@@ -43925,20 +44128,20 @@ function BlockPreviewList({
       "data-template": item.template,
       onClick: () => handleSelect(item),
       children: [
-        /* @__PURE__ */ jsxs74("span", { className: "squisq-inline-preview-card-label", children: [
-          /* @__PURE__ */ jsx93("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
-          item.headingText && /* @__PURE__ */ jsxs74(Fragment30, { children: [
-            /* @__PURE__ */ jsx93("span", { className: "squisq-inline-preview-card-sep", "aria-hidden": "true", children: "\u2014" }),
-            /* @__PURE__ */ jsx93("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
+        /* @__PURE__ */ jsxs75("span", { className: "squisq-inline-preview-card-label", children: [
+          /* @__PURE__ */ jsx94("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
+          item.headingText && /* @__PURE__ */ jsxs75(Fragment31, { children: [
+            /* @__PURE__ */ jsx94("span", { className: "squisq-inline-preview-card-sep", "aria-hidden": "true", children: "\u2014" }),
+            /* @__PURE__ */ jsx94("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
           ] })
         ] }),
-        /* @__PURE__ */ jsx93(
+        /* @__PURE__ */ jsx94(
           "span",
           {
             className: "squisq-inline-preview-card-svg",
             "aria-hidden": "true",
             style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-            children: /* @__PURE__ */ jsx93(
+            children: /* @__PURE__ */ jsx94(
               BlockRenderer5,
               {
                 block: item.block,
@@ -43956,7 +44159,7 @@ function BlockPreviewList({
 }
 
 // src/useNavigationSheetSwipe.ts
-import { useEffect as useEffect72, useRef as useRef67 } from "react";
+import { useEffect as useEffect74, useRef as useRef68 } from "react";
 var NAVIGATION_SHEET_MAX_BODY_WIDTH = 720;
 var EDGE_ZONE_PX = 24;
 var AXIS_LOCK_PX = 10;
@@ -43971,9 +44174,9 @@ function useNavigationSheetSwipe({
   onOpen,
   onClose
 }) {
-  const callbacksRef = useRef67({ onDragStart, onOpen, onClose });
+  const callbacksRef = useRef68({ onDragStart, onOpen, onClose });
   callbacksRef.current = { onDragStart, onOpen, onClose };
-  useEffect72(() => {
+  useEffect74(() => {
     const sheet = sheetRef.current;
     const surface = sheet?.parentElement;
     if (!sheet || !surface) return;
@@ -44079,7 +44282,7 @@ function useNavigationSheetSwipe({
 }
 
 // src/NavigationSheet.tsx
-import { Fragment as Fragment31, jsx as jsx94, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx95, jsxs as jsxs76 } from "react/jsx-runtime";
 var PANEL_LABELS = {
   outline: "Outline",
   previews: "Block previews"
@@ -44097,17 +44300,17 @@ function NavigationSheet({
   basePath,
   mediaProvider
 }) {
-  const sheetRef = useRef68(null);
-  const panelRef = useRef68(null);
-  const scrimRef = useRef68(null);
-  const tabIdPrefix = useId16();
-  const [dragPanel, setDragPanel] = useState84(null);
+  const sheetRef = useRef69(null);
+  const panelRef = useRef69(null);
+  const scrimRef = useRef69(null);
+  const tabIdPrefix = useId17();
+  const [dragPanel, setDragPanel] = useState85(null);
   const open = panel !== null;
   const shown = panel ?? dragPanel;
-  const [lastShown, setLastShown] = useState84(shown);
+  const [lastShown, setLastShown] = useState85(shown);
   if (shown && shown !== lastShown) setLastShown(shown);
   const content = shown ?? lastShown;
-  useEffect73(() => {
+  useEffect75(() => {
     if (shown || !lastShown) return;
     const timer = setTimeout(() => setLastShown(null), CLOSE_LINGER_MS);
     return () => clearTimeout(timer);
@@ -44132,14 +44335,14 @@ function NavigationSheet({
     onClose: close
   });
   useEscapeDismissal(open, close);
-  useEffect73(() => {
+  useEffect75(() => {
     const scrim = scrimRef.current;
     if (!scrim) return;
     const stop = (event) => event.stopPropagation();
     scrim.addEventListener("pointerdown", stop);
     return () => scrim.removeEventListener("pointerdown", stop);
   }, []);
-  useEffect73(() => {
+  useEffect75(() => {
     const sheet = sheetRef.current;
     const surface = sheet?.parentElement;
     if (!open || !sheet || !surface) return;
@@ -44152,7 +44355,7 @@ function NavigationSheet({
       for (const sibling of siblings) sibling.inert = false;
     };
   }, [open]);
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs76(
     "div",
     {
       ref: sheetRef,
@@ -44160,8 +44363,8 @@ function NavigationSheet({
       "data-state": open ? "open" : dragPanel ? "dragging" : "closed",
       "data-testid": "navigation-sheet",
       children: [
-        /* @__PURE__ */ jsx94("div", { ref: scrimRef, className: "squisq-navigation-sheet-scrim", onClick: close }),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95("div", { ref: scrimRef, className: "squisq-navigation-sheet-scrim", onClick: close }),
+        /* @__PURE__ */ jsx95(
           "div",
           {
             ref: panelRef,
@@ -44169,9 +44372,9 @@ function NavigationSheet({
             role: "dialog",
             "aria-label": content ? PANEL_LABELS[content] : "Document navigation",
             tabIndex: -1,
-            children: content && /* @__PURE__ */ jsxs75(Fragment31, { children: [
-              /* @__PURE__ */ jsxs75("div", { className: "squisq-navigation-sheet-header", children: [
-                /* @__PURE__ */ jsx94("div", { className: "squisq-navigation-sheet-tabs", role: "tablist", children: PANELS.map((option) => /* @__PURE__ */ jsx94(
+            children: content && /* @__PURE__ */ jsxs76(Fragment32, { children: [
+              /* @__PURE__ */ jsxs76("div", { className: "squisq-navigation-sheet-header", children: [
+                /* @__PURE__ */ jsx95("div", { className: "squisq-navigation-sheet-tabs", role: "tablist", children: PANELS.map((option) => /* @__PURE__ */ jsx95(
                   "button",
                   {
                     type: "button",
@@ -44185,25 +44388,25 @@ function NavigationSheet({
                   },
                   option
                 )) }),
-                /* @__PURE__ */ jsx94(
+                /* @__PURE__ */ jsx95(
                   "button",
                   {
                     type: "button",
                     className: "squisq-navigation-sheet-close",
                     "aria-label": "Close",
                     onClick: close,
-                    children: /* @__PURE__ */ jsx94(Icon, { icon: "xmark" })
+                    children: /* @__PURE__ */ jsx95(Icon, { icon: "xmark" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx94(
+              /* @__PURE__ */ jsx95(
                 "div",
                 {
                   id: `${tabIdPrefix}-body`,
                   className: "squisq-navigation-sheet-body",
                   role: "tabpanel",
                   "aria-labelledby": `${tabIdPrefix}-${content}`,
-                  children: content === "outline" ? /* @__PURE__ */ jsx94(OutlinePanel, { presentation: "sheet", readOnly, onNavigate: close }) : /* @__PURE__ */ jsx94(
+                  children: content === "outline" ? /* @__PURE__ */ jsx95(OutlinePanel, { presentation: "sheet", readOnly, onNavigate: close }) : /* @__PURE__ */ jsx95(
                     BlockPreviewList,
                     {
                       basePath,
@@ -44222,7 +44425,7 @@ function NavigationSheet({
 }
 
 // src/proofing/ProofingPanel.tsx
-import { jsx as jsx95, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs77 } from "react/jsx-runtime";
 var CATEGORY_LABELS = {
   spelling: "Spelling",
   grammar: "Grammar",
@@ -44232,14 +44435,14 @@ function ProofingPanel() {
   const state = useProofingState();
   if (!state || !state.panelVisible || !state.enabled) return null;
   const { findings, activeFindingId } = state;
-  return /* @__PURE__ */ jsxs76("aside", { className: "squisq-proof-panel", "aria-label": "Proofing findings", children: [
-    /* @__PURE__ */ jsxs76("div", { className: "squisq-proof-panel-header", children: [
-      /* @__PURE__ */ jsxs76("span", { className: "squisq-proof-panel-title", children: [
+  return /* @__PURE__ */ jsxs77("aside", { className: "squisq-proof-panel", "aria-label": "Proofing findings", children: [
+    /* @__PURE__ */ jsxs77("div", { className: "squisq-proof-panel-header", children: [
+      /* @__PURE__ */ jsxs77("span", { className: "squisq-proof-panel-title", children: [
         "Proofing",
-        /* @__PURE__ */ jsx95("span", { className: "squisq-proof-panel-count", children: findings.length })
+        /* @__PURE__ */ jsx96("span", { className: "squisq-proof-panel-count", children: findings.length })
       ] }),
-      /* @__PURE__ */ jsxs76("span", { className: "squisq-proof-panel-actions", children: [
-        /* @__PURE__ */ jsx95(
+      /* @__PURE__ */ jsxs77("span", { className: "squisq-proof-panel-actions", children: [
+        /* @__PURE__ */ jsx96(
           "button",
           {
             type: "button",
@@ -44251,7 +44454,7 @@ function ProofingPanel() {
             children: "\u2191"
           }
         ),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx96(
           "button",
           {
             type: "button",
@@ -44263,7 +44466,7 @@ function ProofingPanel() {
             children: "\u2193"
           }
         ),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx96(
           "button",
           {
             type: "button",
@@ -44276,20 +44479,20 @@ function ProofingPanel() {
         )
       ] })
     ] }),
-    state.status === "loading" && /* @__PURE__ */ jsx95("div", { className: "squisq-proof-panel-empty", children: "Loading proofing engine\u2026" }),
-    state.status === "error" && /* @__PURE__ */ jsxs76("div", { className: "squisq-proof-panel-empty", children: [
+    state.status === "loading" && /* @__PURE__ */ jsx96("div", { className: "squisq-proof-panel-empty", children: "Loading proofing engine\u2026" }),
+    state.status === "error" && /* @__PURE__ */ jsxs77("div", { className: "squisq-proof-panel-empty", children: [
       "Proofing failed to load.",
-      /* @__PURE__ */ jsx95("button", { type: "button", className: "squisq-proof-panel-retry", onClick: state.retrySetup, children: "Retry" })
+      /* @__PURE__ */ jsx96("button", { type: "button", className: "squisq-proof-panel-retry", onClick: state.retrySetup, children: "Retry" })
     ] }),
-    state.status === "ready" && findings.length === 0 && /* @__PURE__ */ jsx95("div", { className: "squisq-proof-panel-empty", children: "No issues found." }),
-    /* @__PURE__ */ jsx95("ul", { className: "squisq-proof-panel-list", children: findings.map((finding) => /* @__PURE__ */ jsx95("li", { children: /* @__PURE__ */ jsxs76(
+    state.status === "ready" && findings.length === 0 && /* @__PURE__ */ jsx96("div", { className: "squisq-proof-panel-empty", children: "No issues found." }),
+    /* @__PURE__ */ jsx96("ul", { className: "squisq-proof-panel-list", children: findings.map((finding) => /* @__PURE__ */ jsx96("li", { children: /* @__PURE__ */ jsxs77(
       "button",
       {
         type: "button",
         className: finding.id === activeFindingId ? "squisq-proof-panel-row squisq-proof-panel-row--active" : "squisq-proof-panel-row",
         onClick: () => state.selectFinding(finding.id),
         children: [
-          /* @__PURE__ */ jsx95(
+          /* @__PURE__ */ jsx96(
             "span",
             {
               className: `squisq-proof-dot squisq-proof-dot--${finding.category}`,
@@ -44297,9 +44500,9 @@ function ProofingPanel() {
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ jsxs76("span", { className: "squisq-proof-panel-row-body", children: [
-            /* @__PURE__ */ jsx95("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
-            /* @__PURE__ */ jsx95("span", { className: "squisq-proof-panel-message", children: proofMessageText(finding) })
+          /* @__PURE__ */ jsxs77("span", { className: "squisq-proof-panel-row-body", children: [
+            /* @__PURE__ */ jsx96("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
+            /* @__PURE__ */ jsx96("span", { className: "squisq-proof-panel-message", children: proofMessageText(finding) })
           ] })
         ]
       }
@@ -44308,13 +44511,13 @@ function ProofingPanel() {
 }
 
 // src/imageEditor/ImageEditModal.tsx
-import { useCallback as useCallback58, useEffect as useEffect74, useMemo as useMemo59, useRef as useRef69, useState as useState85 } from "react";
+import { useCallback as useCallback58, useEffect as useEffect76, useMemo as useMemo59, useRef as useRef70, useState as useState86 } from "react";
 import { DARK_SURFACE, LIGHT_SURFACE } from "@bendyline/squisq/schemas";
 import {
   MemoryContentContainer,
   scopeContainer
 } from "@bendyline/squisq/storage";
-import { jsx as jsx96, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs78 } from "react/jsx-runtime";
 function ImageEditModal({
   relativePath,
   container,
@@ -44325,8 +44528,8 @@ function ImageEditModal({
   versioningAutoSaveIdleMs,
   shellTheme
 }) {
-  const modalRef = useRef69(null);
-  const surfaceRef = useRef69(null);
+  const modalRef = useRef70(null);
+  const surfaceRef = useRef70(null);
   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;
@@ -44341,9 +44544,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState85(null);
-  const [resolveError, setResolveError] = useState85(null);
-  useEffect74(() => {
+  const [initialSrc, setInitialSrc] = useState86(null);
+  const [resolveError, setResolveError] = useState86(null);
+  useEffect76(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -44373,7 +44576,7 @@ function ImageEditModal({
     },
     [mediaProvider, relativePath, onSaved]
   );
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx97(
     "div",
     {
       ref: modalRef,
@@ -44385,11 +44588,11 @@ function ImageEditModal({
       onClick: (e2) => {
         if (e2.target === e2.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs77("div", { ref: surfaceRef, className: "squisq-image-edit-modal__surface", children: [
-        /* @__PURE__ */ jsxs77("header", { className: "squisq-image-edit-modal__header", children: [
-          /* @__PURE__ */ jsx96("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
-          /* @__PURE__ */ jsx96("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
-          /* @__PURE__ */ jsx96(
+      children: /* @__PURE__ */ jsxs78("div", { ref: surfaceRef, className: "squisq-image-edit-modal__surface", children: [
+        /* @__PURE__ */ jsxs78("header", { className: "squisq-image-edit-modal__header", children: [
+          /* @__PURE__ */ jsx97("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
+          /* @__PURE__ */ jsx97("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
+          /* @__PURE__ */ jsx97(
             "button",
             {
               type: "button",
@@ -44401,10 +44604,10 @@ function ImageEditModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx96("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs77("div", { className: "squisq-image-edit-modal__error", children: [
+        /* @__PURE__ */ jsx97("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs78("div", { className: "squisq-image-edit-modal__error", children: [
           "Failed to load image: ",
           resolveError
-        ] }) : !saveFormat ? /* @__PURE__ */ jsx96("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx96("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx96(
+        ] }) : !saveFormat ? /* @__PURE__ */ jsx97("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx97("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx97(
           ImageEditor,
           {
             filesContainer: sidecar,
@@ -44465,18 +44668,18 @@ function MediaEditContextMenuItems() {
 // src/mediaEdit/MediaEditModal.tsx
 import {
   useCallback as useCallback62,
-  useEffect as useEffect77,
-  useId as useId17,
+  useEffect as useEffect79,
+  useId as useId18,
   useMemo as useMemo61,
-  useRef as useRef73,
-  useState as useState89
+  useRef as useRef74,
+  useState as useState90
 } from "react";
 import {
   useMediaEditStatus as useMediaEditStatus2
 } from "@bendyline/squisq-video-react/media-edit";
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { useCallback as useCallback59, useEffect as useEffect75, useRef as useRef70, useState as useState86 } from "react";
+import { useCallback as useCallback59, useEffect as useEffect77, useRef as useRef71, useState as useState87 } from "react";
 import { MEDIA_FX_SPECS as MEDIA_FX_SPECS2, serializeMediaFx } from "@bendyline/squisq/mediaEdit";
 
 // src/mediaEdit/mediaEditDraft.ts
@@ -44575,7 +44778,7 @@ function centeredCrop(ratio, frameWidth, frameHeight) {
 }
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { Fragment as Fragment32, jsx as jsx97, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx98, jsxs as jsxs79 } from "react/jsx-runtime";
 var STAGES = [
   {
     id: "highpass",
@@ -44629,8 +44832,8 @@ var LOUDNESS_PRESETS = [
 ];
 var PREVIEW_SECONDS = 10;
 function useMediaDuration(url) {
-  const [duration, setDuration] = useState86(null);
-  useEffect75(() => {
+  const [duration, setDuration] = useState87(null);
+  useEffect77(() => {
     setDuration(null);
     if (!url || typeof Audio === "undefined") return;
     const probe = new Audio();
@@ -44647,12 +44850,12 @@ function useMediaDuration(url) {
   return duration;
 }
 function usePreviewPlayer(preview) {
-  const ctxRef = useRef70(null);
-  const sourceRef = useRef70(null);
-  const startedRef = useRef70(null);
-  const [playing, setPlaying] = useState86(null);
-  const cueRef = useRef70(0);
-  const [position, setPosition] = useState86(0);
+  const ctxRef = useRef71(null);
+  const sourceRef = useRef71(null);
+  const startedRef = useRef71(null);
+  const [playing, setPlaying] = useState87(null);
+  const cueRef = useRef71(0);
+  const [position, setPosition] = useState87(0);
   const frames = preview?.original[0]?.length ?? 0;
   const duration = preview && frames > 0 ? frames / preview.sampleRate : 0;
   const currentOffset = useCallback59(() => {
@@ -44670,8 +44873,8 @@ function usePreviewPlayer(preview) {
     setPosition(0);
     setPlaying(null);
   }, []);
-  useEffect75(() => stop, [preview, stop]);
-  useEffect75(
+  useEffect77(() => stop, [preview, stop]);
+  useEffect77(
     () => () => {
       void ctxRef.current?.close();
       ctxRef.current = null;
@@ -44710,7 +44913,7 @@ function usePreviewPlayer(preview) {
     },
     [duration, playing, play]
   );
-  useEffect75(() => {
+  useEffect77(() => {
     if (!playing) return;
     let frame = requestAnimationFrame(function tick() {
       setPosition(currentOffset());
@@ -44721,26 +44924,26 @@ function usePreviewPlayer(preview) {
   return { playing, play, stop, seek, position, duration };
 }
 function PlayIcon() {
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx98(
     "svg",
     {
       className: "squisq-media-edit-icon",
       viewBox: "0 0 10 10",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ jsx97("path", { d: "M2 1 9 5 2 9Z" })
+      children: /* @__PURE__ */ jsx98("path", { d: "M2 1 9 5 2 9Z" })
     }
   );
 }
 function StopIcon() {
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx98(
     "svg",
     {
       className: "squisq-media-edit-icon",
       viewBox: "0 0 10 10",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ jsx97("rect", { x: "1.5", y: "1.5", width: "7", height: "7", rx: "1" })
+      children: /* @__PURE__ */ jsx98("rect", { x: "1.5", y: "1.5", width: "7", height: "7", rx: "1" })
     }
   );
 }
@@ -44758,14 +44961,14 @@ function MediaEditAudioSection({
   const duration = useMediaDuration(resolvedSrc);
   const windowMin = item.clipStart ?? 0;
   const windowMax = Math.max(windowMin, (item.clipEnd ?? duration ?? windowMin) - 1);
-  const [previewFrom, setPreviewFrom] = useState86(windowMin);
-  const [preview, setPreview] = useState86(null);
-  const [previewedFx, setPreviewedFx] = useState86(null);
-  const [previewing, setPreviewing] = useState86(false);
-  const [previewError, setPreviewError] = useState86(null);
-  const previewAbort = useRef70(null);
+  const [previewFrom, setPreviewFrom] = useState87(windowMin);
+  const [preview, setPreview] = useState87(null);
+  const [previewedFx, setPreviewedFx] = useState87(null);
+  const [previewing, setPreviewing] = useState87(false);
+  const [previewError, setPreviewError] = useState87(null);
+  const previewAbort = useRef71(null);
   const player = usePreviewPlayer(preview);
-  useEffect75(() => () => previewAbort.current?.abort(), []);
+  useEffect77(() => () => previewAbort.current?.abort(), []);
   const runPreview = useCallback59(async () => {
     if (draftFx.ops.length === 0) return;
     previewAbort.current?.abort();
@@ -44790,23 +44993,23 @@ function MediaEditAudioSection({
       setPreviewing(false);
     }
   }, [draftFx.ops.length, manager, item.src, knownFx, previewFrom]);
-  return /* @__PURE__ */ jsxs78("div", { className: "squisq-media-edit-section", children: [
-    /* @__PURE__ */ jsxs78("div", { className: "squisq-media-edit-presets", role: "group", "aria-label": "Presets", children: [
-      /* @__PURE__ */ jsx97("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("voice") }), children: "Clean up voice" }),
-      /* @__PURE__ */ jsx97("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("levels") }), children: "Levels only" }),
-      /* @__PURE__ */ jsx97("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("none") }), children: "None" })
+  return /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-section", children: [
+    /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-presets", role: "group", "aria-label": "Presets", children: [
+      /* @__PURE__ */ jsx98("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("voice") }), children: "Clean up voice" }),
+      /* @__PURE__ */ jsx98("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("levels") }), children: "Levels only" }),
+      /* @__PURE__ */ jsx98("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("none") }), children: "None" })
     ] }),
-    /* @__PURE__ */ jsx97("ul", { className: "squisq-media-edit-stages", children: STAGES.map((stage) => {
+    /* @__PURE__ */ jsx98("ul", { className: "squisq-media-edit-stages", children: STAGES.map((stage) => {
       const s = draft.fx[stage.id];
       const inputId = `${idPrefix}-${stage.id}`;
-      return /* @__PURE__ */ jsxs78(
+      return /* @__PURE__ */ jsxs79(
         "li",
         {
           className: "squisq-media-edit-stage",
           "data-enabled": s.enabled ? "true" : "false",
           children: [
-            /* @__PURE__ */ jsxs78("label", { className: "squisq-media-edit-stage__toggle", children: [
-              /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsxs79("label", { className: "squisq-media-edit-stage__toggle", children: [
+              /* @__PURE__ */ jsx98(
                 "input",
                 {
                   type: "checkbox",
@@ -44814,9 +45017,9 @@ function MediaEditAudioSection({
                   onChange: (e2) => setStage(stage.id, { enabled: e2.target.checked })
                 }
               ),
-              /* @__PURE__ */ jsx97("span", { className: "squisq-media-edit-stage__label", children: stage.label })
+              /* @__PURE__ */ jsx98("span", { className: "squisq-media-edit-stage__label", children: stage.label })
             ] }),
-            /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsx98(
               "input",
               {
                 id: inputId,
@@ -44832,9 +45035,9 @@ function MediaEditAudioSection({
                 onChange: (e2) => setStage(stage.id, { value: stage.toValue(Number(e2.target.value)) })
               }
             ),
-            /* @__PURE__ */ jsx97("output", { className: "squisq-media-edit-stage__value", htmlFor: inputId, children: stage.format(s.value) }),
-            /* @__PURE__ */ jsx97("p", { className: "squisq-media-edit-stage__hint", children: stage.hint }),
-            stage.id === "loudness" && s.enabled && /* @__PURE__ */ jsx97("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Targets", children: LOUDNESS_PRESETS.map((preset) => /* @__PURE__ */ jsxs78(
+            /* @__PURE__ */ jsx98("output", { className: "squisq-media-edit-stage__value", htmlFor: inputId, children: stage.format(s.value) }),
+            /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-stage__hint", children: stage.hint }),
+            stage.id === "loudness" && s.enabled && /* @__PURE__ */ jsx98("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Targets", children: LOUDNESS_PRESETS.map((preset) => /* @__PURE__ */ jsxs79(
               "button",
               {
                 type: "button",
@@ -44854,14 +45057,14 @@ function MediaEditAudioSection({
         stage.id
       );
     }) }),
-    /* @__PURE__ */ jsxs78("div", { className: "squisq-media-edit-preview", "aria-label": "Preview", children: [
-      duration != null && windowMax > windowMin && /* @__PURE__ */ jsxs78("label", { className: "squisq-media-edit-preview__from", children: [
-        /* @__PURE__ */ jsxs78("span", { children: [
+    /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-preview", "aria-label": "Preview", children: [
+      duration != null && windowMax > windowMin && /* @__PURE__ */ jsxs79("label", { className: "squisq-media-edit-preview__from", children: [
+        /* @__PURE__ */ jsxs79("span", { children: [
           "Preview from ",
           previewFrom.toFixed(0),
           " s"
         ] }),
-        /* @__PURE__ */ jsx97(
+        /* @__PURE__ */ jsx98(
           "input",
           {
             type: "range",
@@ -44873,7 +45076,7 @@ function MediaEditAudioSection({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx97("div", { className: "squisq-media-edit-preview__actions", children: /* @__PURE__ */ jsx97(
+      /* @__PURE__ */ jsx98("div", { className: "squisq-media-edit-preview__actions", children: /* @__PURE__ */ jsx98(
         "button",
         {
           type: "button",
@@ -44882,10 +45085,10 @@ function MediaEditAudioSection({
           children: previewing ? "Rendering preview\u2026" : preview ? "Update preview" : "Create preview"
         }
       ) }),
-      preview != null && player.duration > 0 && /* @__PURE__ */ jsxs78(Fragment32, { children: [
-        /* @__PURE__ */ jsxs78("div", { className: "squisq-media-edit-playback", "data-playing": player.playing ?? void 0, children: [
-          /* @__PURE__ */ jsx97("span", { className: "squisq-media-edit-playback__label", children: player.playing ? `${player.playing === "original" ? "Original" : "Processed"} from ${Math.round(preview.startSec)} s` : "Stopped" }),
-          /* @__PURE__ */ jsx97(
+      preview != null && player.duration > 0 && /* @__PURE__ */ jsxs79(Fragment33, { children: [
+        /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-playback", "data-playing": player.playing ?? void 0, children: [
+          /* @__PURE__ */ jsx98("span", { className: "squisq-media-edit-playback__label", children: player.playing ? `${player.playing === "original" ? "Original" : "Processed"} from ${Math.round(preview.startSec)} s` : "Stopped" }),
+          /* @__PURE__ */ jsx98(
             "input",
             {
               type: "range",
@@ -44899,14 +45102,14 @@ function MediaEditAudioSection({
               onChange: (e2) => player.seek(Number(e2.target.value))
             }
           ),
-          /* @__PURE__ */ jsxs78("span", { className: "squisq-media-edit-playback__time", children: [
+          /* @__PURE__ */ jsxs79("span", { className: "squisq-media-edit-playback__time", children: [
             formatClock6(player.position),
             " / ",
             formatClock6(player.duration)
           ] })
         ] }),
-        /* @__PURE__ */ jsxs78("div", { className: "squisq-media-edit-preview__actions", children: [
-          /* @__PURE__ */ jsxs78(
+        /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-preview__actions", children: [
+          /* @__PURE__ */ jsxs79(
             "button",
             {
               type: "button",
@@ -44914,12 +45117,12 @@ function MediaEditAudioSection({
               disabled: previewing,
               onClick: () => player.play("original"),
               children: [
-                /* @__PURE__ */ jsx97(PlayIcon, {}),
+                /* @__PURE__ */ jsx98(PlayIcon, {}),
                 "Original"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs78(
+          /* @__PURE__ */ jsxs79(
             "button",
             {
               type: "button",
@@ -44927,26 +45130,26 @@ function MediaEditAudioSection({
               disabled: previewing,
               onClick: () => player.play("processed"),
               children: [
-                /* @__PURE__ */ jsx97(PlayIcon, {}),
+                /* @__PURE__ */ jsx98(PlayIcon, {}),
                 "Processed"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs78("button", { type: "button", disabled: !player.playing, onClick: player.stop, children: [
-            /* @__PURE__ */ jsx97(StopIcon, {}),
+          /* @__PURE__ */ jsxs79("button", { type: "button", disabled: !player.playing, onClick: player.stop, children: [
+            /* @__PURE__ */ jsx98(StopIcon, {}),
             "Stop"
           ] })
         ] })
       ] }),
-      preview != null && previewedFx !== knownFx && /* @__PURE__ */ jsx97("p", { className: "squisq-media-edit-note", children: "Settings changed \u2014 update the preview to hear them." }),
-      previewError && /* @__PURE__ */ jsx97("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: previewError })
+      preview != null && previewedFx !== knownFx && /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-note", children: "Settings changed \u2014 update the preview to hear them." }),
+      previewError && /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: previewError })
     ] })
   ] });
 }
 
 // src/mediaEdit/MediaEditTimingSection.tsx
-import { useCallback as useCallback60, useEffect as useEffect76, useRef as useRef71, useState as useState87 } from "react";
-import { jsx as jsx98, jsxs as jsxs79 } from "react/jsx-runtime";
+import { useCallback as useCallback60, useEffect as useEffect78, useRef as useRef72, useState as useState88 } from "react";
+import { jsx as jsx99, jsxs as jsxs80 } from "react/jsx-runtime";
 var DEFAULT_MAX_PAUSE = 0.8;
 function formatDb(value) {
   if (value === 0) return "0 dB";
@@ -44959,11 +45162,11 @@ function MediaEditTimingSection({
   manager,
   idPrefix
 }) {
-  const [maxPause, setMaxPause] = useState87(DEFAULT_MAX_PAUSE);
-  const [finding, setFinding] = useState87(false);
-  const [error, setError] = useState87(null);
-  const abortRef = useRef71(null);
-  useEffect76(() => () => abortRef.current?.abort(), []);
+  const [maxPause, setMaxPause] = useState88(DEFAULT_MAX_PAUSE);
+  const [finding, setFinding] = useState88(false);
+  const [error, setError] = useState88(null);
+  const abortRef = useRef72(null);
+  useEffect78(() => () => abortRef.current?.abort(), []);
   const findPauses = useCallback60(async () => {
     abortRef.current?.abort();
     const controller = new AbortController();
@@ -44987,10 +45190,10 @@ function MediaEditTimingSection({
     }
   }, [manager, item.src, maxPause, draft, onChange]);
   const saved = cutSeconds(draft.cuts);
-  return /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-section", children: [
-    /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-row", children: [
-      /* @__PURE__ */ jsx98("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-pause`, children: "Shorten pauses longer than" }),
-      /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-section", children: [
+    /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-row", children: [
+      /* @__PURE__ */ jsx99("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-pause`, children: "Shorten pauses longer than" }),
+      /* @__PURE__ */ jsx99(
         "input",
         {
           id: `${idPrefix}-pause`,
@@ -45003,14 +45206,14 @@ function MediaEditTimingSection({
           onChange: (e2) => setMaxPause(Number(e2.target.value))
         }
       ),
-      /* @__PURE__ */ jsxs79("output", { htmlFor: `${idPrefix}-pause`, children: [
+      /* @__PURE__ */ jsxs80("output", { htmlFor: `${idPrefix}-pause`, children: [
         maxPause.toFixed(1),
         " s"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-preview__actions", children: [
-      /* @__PURE__ */ jsx98("button", { type: "button", onClick: findPauses, disabled: finding, children: finding ? "Finding pauses\u2026" : "Find pauses" }),
-      /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-preview__actions", children: [
+      /* @__PURE__ */ jsx99("button", { type: "button", onClick: findPauses, disabled: finding, children: finding ? "Finding pauses\u2026" : "Find pauses" }),
+      /* @__PURE__ */ jsx99(
         "button",
         {
           type: "button",
@@ -45020,11 +45223,11 @@ function MediaEditTimingSection({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-note", role: "status", "aria-live": "polite", children: draft.cuts.length === 0 ? "No pauses shortened." : `${draft.cuts.length} ${draft.cuts.length === 1 ? "pause" : "pauses"} shortened, saving ${formatClock6(saved)}.` }),
-    error && /* @__PURE__ */ jsx98("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: error }),
-    /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-row", children: [
-      /* @__PURE__ */ jsx98("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-gain`, children: "Volume" }),
-      /* @__PURE__ */ jsx98(
+    /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-note", role: "status", "aria-live": "polite", children: draft.cuts.length === 0 ? "No pauses shortened." : `${draft.cuts.length} ${draft.cuts.length === 1 ? "pause" : "pauses"} shortened, saving ${formatClock6(saved)}.` }),
+    error && /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-note squisq-media-edit-note--error", role: "alert", children: error }),
+    /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-row", children: [
+      /* @__PURE__ */ jsx99("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-gain`, children: "Volume" }),
+      /* @__PURE__ */ jsx99(
         "input",
         {
           id: `${idPrefix}-gain`,
@@ -45037,11 +45240,11 @@ function MediaEditTimingSection({
           onChange: (e2) => onChange({ ...draft, gain: Number(e2.target.value) })
         }
       ),
-      /* @__PURE__ */ jsx98("output", { htmlFor: `${idPrefix}-gain`, children: formatDb(draft.gain) })
+      /* @__PURE__ */ jsx99("output", { htmlFor: `${idPrefix}-gain`, children: formatDb(draft.gain) })
     ] }),
-    ["fadeIn", "fadeOut"].map((key) => /* @__PURE__ */ jsxs79("div", { className: "squisq-media-edit-row", children: [
-      /* @__PURE__ */ jsx98("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-${key}`, children: key === "fadeIn" ? "Fade in" : "Fade out" }),
-      /* @__PURE__ */ jsx98(
+    ["fadeIn", "fadeOut"].map((key) => /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-row", children: [
+      /* @__PURE__ */ jsx99("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-${key}`, children: key === "fadeIn" ? "Fade in" : "Fade out" }),
+      /* @__PURE__ */ jsx99(
         "input",
         {
           id: `${idPrefix}-${key}`,
@@ -45054,7 +45257,7 @@ function MediaEditTimingSection({
           onChange: (e2) => onChange({ ...draft, [key]: Number(e2.target.value) })
         }
       ),
-      /* @__PURE__ */ jsx98("output", { htmlFor: `${idPrefix}-${key}`, children: draft[key] === 0 ? "Off" : `${draft[key].toFixed(1)} s` })
+      /* @__PURE__ */ jsx99("output", { htmlFor: `${idPrefix}-${key}`, children: draft[key] === 0 ? "Off" : `${draft[key].toFixed(1)} s` })
     ] }, key))
   ] });
 }
@@ -45062,11 +45265,11 @@ function MediaEditTimingSection({
 // src/mediaEdit/MediaEditFrameSection.tsx
 import {
   useCallback as useCallback61,
-  useRef as useRef72,
-  useState as useState88
+  useRef as useRef73,
+  useState as useState89
 } from "react";
 import { normalizeMediaCrop } from "@bendyline/squisq/mediaEdit";
-import { jsx as jsx99, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs81 } from "react/jsx-runtime";
 var FULL = { x: 0, y: 0, w: 1, h: 1 };
 var MIN_EDGE = 0.05;
 var NUDGE = 0.01;
@@ -45089,9 +45292,9 @@ function clampCrop(crop) {
 }
 function MediaEditFrameSection({ item, draft, onChange }) {
   const src = useResolvedMediaSrc(item.src);
-  const [frame, setFrame] = useState88(null);
-  const [aspect, setAspect] = useState88(null);
-  const stageRef = useRef72(null);
+  const [frame, setFrame] = useState89(null);
+  const [aspect, setAspect] = useState89(null);
+  const stageRef = useRef73(null);
   const crop = draft.crop ?? FULL;
   const setCrop = useCallback61(
     (next) => onChange({ ...draft, crop: normalizeMediaCrop(clampCrop(next)) }),
@@ -45146,9 +45349,9 @@ function MediaEditFrameSection({ item, draft, onChange }) {
     );
   };
   const pct = (n) => `${(n * 100).toFixed(2)}%`;
-  return /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-section", children: [
-    /* @__PURE__ */ jsxs80("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Crop aspect", children: [
-      ASPECTS.map((option) => /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsxs81("div", { className: "squisq-media-edit-section", children: [
+    /* @__PURE__ */ jsxs81("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Crop aspect", children: [
+      ASPECTS.map((option) => /* @__PURE__ */ jsx100(
         "button",
         {
           type: "button",
@@ -45163,7 +45366,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
         },
         option.label
       )),
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx100(
         "button",
         {
           type: "button",
@@ -45176,14 +45379,14 @@ function MediaEditFrameSection({ item, draft, onChange }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs80(
+    /* @__PURE__ */ jsxs81(
       "div",
       {
         ref: stageRef,
         className: "squisq-media-edit-crop",
         style: frame ? { aspectRatio: `${frame.w} / ${frame.h}` } : void 0,
         children: [
-          src && /* @__PURE__ */ jsx99(
+          src && /* @__PURE__ */ jsx100(
             "video",
             {
               src,
@@ -45199,7 +45402,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx99(
+          /* @__PURE__ */ jsx100(
             "div",
             {
               className: "squisq-media-edit-crop__rect",
@@ -45210,7 +45413,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
               style: { left: pct(crop.x), top: pct(crop.y), width: pct(crop.w), height: pct(crop.h) },
               onPointerDown: startDrag("move"),
               onKeyDown,
-              children: ["nw", "ne", "sw", "se"].map((handle) => /* @__PURE__ */ jsx99(
+              children: ["nw", "ne", "sw", "se"].map((handle) => /* @__PURE__ */ jsx100(
                 "span",
                 {
                   className: `squisq-media-edit-crop__handle squisq-media-edit-crop__handle--${handle}`,
@@ -45223,12 +45426,12 @@ function MediaEditFrameSection({ item, draft, onChange }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-note", children: draft.crop ? "Only the framed area is shown and exported." : "Drag the corners or pick an aspect to crop." })
+    /* @__PURE__ */ jsx100("p", { className: "squisq-media-edit-note", children: draft.crop ? "Only the framed area is shown and exported." : "Drag the corners or pick an aspect to crop." })
   ] });
 }
 
 // src/mediaEdit/MediaEditModal.tsx
-import { Fragment as Fragment33, jsx as jsx100, jsxs as jsxs81 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx101, jsxs as jsxs82 } from "react/jsx-runtime";
 var TABS = [
   { id: "audio", label: "Audio cleanup" },
   { id: "timing", label: "Timing" },
@@ -45250,7 +45453,7 @@ function useRenderStatus(item, manager) {
 }
 var percent = (status) => `${Math.round((status.progress ?? 0) * 100)}%`;
 function RenderStatusBadge({ status }) {
-  return /* @__PURE__ */ jsxs81("span", { className: "squisq-media-edit-badge", "data-state": status.state, children: [
+  return /* @__PURE__ */ jsxs82("span", { className: "squisq-media-edit-badge", "data-state": status.state, children: [
     status.state === "ready" && "Processed",
     status.state === "queued" && "Queued",
     status.state === "rendering" && `Processing ${percent(status)}`,
@@ -45263,43 +45466,43 @@ function RenderStatusText({
 }) {
   switch (status.state) {
     case "ready":
-      return /* @__PURE__ */ jsx100(Fragment33, { children: "Processed audio is in use." });
+      return /* @__PURE__ */ jsx101(Fragment34, { children: "Processed audio is in use." });
     case "queued":
-      return /* @__PURE__ */ jsx100(Fragment33, { children: "Waiting to process\u2026" });
+      return /* @__PURE__ */ jsx101(Fragment34, { children: "Waiting to process\u2026" });
     case "rendering":
-      return /* @__PURE__ */ jsxs81(Fragment33, { children: [
+      return /* @__PURE__ */ jsxs82(Fragment34, { children: [
         "Processing\u2026 ",
         percent(status)
       ] });
     case "failed":
-      return /* @__PURE__ */ jsxs81(Fragment33, { children: [
+      return /* @__PURE__ */ jsxs82(Fragment34, { children: [
         "Processing failed: ",
         status.error,
         " ",
-        /* @__PURE__ */ jsx100("button", { type: "button", onClick: onRetry, children: "Retry" })
+        /* @__PURE__ */ jsx101("button", { type: "button", onClick: onRetry, children: "Retry" })
       ] });
   }
 }
 function MediaEditModal({ target, onClose }) {
   const { doc, markdownSource, setMarkdownSource, mediaEditRenders } = useEditorContext();
-  const modalRef = useRef73(null);
-  const surfaceRef = useRef73(null);
-  const titleId = useId17();
+  const modalRef = useRef74(null);
+  const surfaceRef = useRef74(null);
+  const titleId = useId18();
   useModalDialog({ rootRef: modalRef, dialogRef: surfaceRef, onClose });
   const item = useMemo61(() => doc ? findEditableMedia(doc, target) : null, [doc, target]);
   const companions = useMemo61(() => doc && item ? groupCompanions(doc, item) : [], [doc, item]);
   const renderStatus = useRenderStatus(item, mediaEditRenders);
-  const [draft, setDraft] = useState89(() => draftFromEdits(item?.edits));
+  const [draft, setDraft] = useState90(() => draftFromEdits(item?.edits));
   const seedKey = item ? `${item.sourceLine}|${editsSignature(item.edits)}` : null;
-  const seededRef = useRef73(null);
-  useEffect77(() => {
+  const seededRef = useRef74(null);
+  useEffect79(() => {
     if (seedKey === null || seededRef.current === seedKey) return;
     seededRef.current = seedKey;
     setDraft(draftFromEdits(item?.edits));
   }, [seedKey]);
   const tabs = TABS.filter((t) => t.id !== "frame" || item?.kind === "video");
-  const [activeTab, setActiveTab] = useState89("audio");
-  const tabRefs = useRef73(/* @__PURE__ */ new Map());
+  const [activeTab, setActiveTab] = useState90("audio");
+  const tabRefs = useRef74(/* @__PURE__ */ new Map());
   const onTabKeyDown = (event, index2) => {
     const next = event.key === "ArrowRight" ? (index2 + 1) % tabs.length : event.key === "ArrowLeft" ? (index2 - 1 + tabs.length) % tabs.length : event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : null;
     if (next == null) return;
@@ -45327,7 +45530,7 @@ function MediaEditModal({ target, onClose }) {
   const tabbed = item != null && mediaEditRenders != null;
   const tabId = (tab) => `${titleId}-tab-${tab}`;
   const panelId = (tab) => `${titleId}-panel-${tab}`;
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx101(
     "div",
     {
       ref: modalRef,
@@ -45336,7 +45539,7 @@ function MediaEditModal({ target, onClose }) {
       onClick: (e2) => {
         if (e2.target === e2.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs81(
+      children: /* @__PURE__ */ jsxs82(
         "div",
         {
           ref: surfaceRef,
@@ -45345,11 +45548,11 @@ function MediaEditModal({ target, onClose }) {
           "aria-modal": "true",
           "aria-labelledby": titleId,
           children: [
-            /* @__PURE__ */ jsxs81("header", { className: "squisq-media-edit-modal__header", children: [
-              /* @__PURE__ */ jsx100("span", { id: titleId, className: "squisq-media-edit-modal__title", children: title }),
-              /* @__PURE__ */ jsx100("span", { className: "squisq-media-edit-modal__path", children: target.src }),
-              renderStatus && /* @__PURE__ */ jsx100(RenderStatusBadge, { status: renderStatus }),
-              /* @__PURE__ */ jsx100(
+            /* @__PURE__ */ jsxs82("header", { className: "squisq-media-edit-modal__header", children: [
+              /* @__PURE__ */ jsx101("span", { id: titleId, className: "squisq-media-edit-modal__title", children: title }),
+              /* @__PURE__ */ jsx101("span", { className: "squisq-media-edit-modal__path", children: target.src }),
+              renderStatus && /* @__PURE__ */ jsx101(RenderStatusBadge, { status: renderStatus }),
+              /* @__PURE__ */ jsx101(
                 "button",
                 {
                   type: "button",
@@ -45360,11 +45563,11 @@ function MediaEditModal({ target, onClose }) {
                 }
               )
             ] }),
-            !item ? /* @__PURE__ */ jsx100("p", { className: "squisq-media-edit-modal__empty", children: "This clip is no longer in the document." }) : !mediaEditRenders ? /* @__PURE__ */ jsx100("p", { className: "squisq-media-edit-modal__empty", children: "Media editing needs a media folder for this document." }) : /* @__PURE__ */ jsxs81(Fragment33, { children: [
-              /* @__PURE__ */ jsx100("div", { className: "squisq-media-edit-tabs", role: "tablist", "aria-label": "Edit sections", children: tabs.map((tab, index2) => {
+            !item ? /* @__PURE__ */ jsx101("p", { className: "squisq-media-edit-modal__empty", children: "This clip is no longer in the document." }) : !mediaEditRenders ? /* @__PURE__ */ jsx101("p", { className: "squisq-media-edit-modal__empty", children: "Media editing needs a media folder for this document." }) : /* @__PURE__ */ jsxs82(Fragment34, { children: [
+              /* @__PURE__ */ jsx101("div", { className: "squisq-media-edit-tabs", role: "tablist", "aria-label": "Edit sections", children: tabs.map((tab, index2) => {
                 const selected = tab.id === activeTab;
                 const edited = tabHasEdits(tab.id, draft);
-                return /* @__PURE__ */ jsxs81(
+                return /* @__PURE__ */ jsxs82(
                   "button",
                   {
                     ref: (el) => {
@@ -45383,21 +45586,21 @@ function MediaEditModal({ target, onClose }) {
                     onKeyDown: (e2) => onTabKeyDown(e2, index2),
                     children: [
                       tab.label,
-                      edited && /* @__PURE__ */ jsx100("span", { className: "squisq-sr-only", children: " (edited)" })
+                      edited && /* @__PURE__ */ jsx101("span", { className: "squisq-sr-only", children: " (edited)" })
                     ]
                   },
                   tab.id
                 );
               }) }),
-              /* @__PURE__ */ jsxs81("div", { className: "squisq-media-edit-modal__body", children: [
-                /* @__PURE__ */ jsx100(
+              /* @__PURE__ */ jsxs82("div", { className: "squisq-media-edit-modal__body", children: [
+                /* @__PURE__ */ jsx101(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("audio"),
                     "aria-labelledby": tabId("audio"),
                     hidden: activeTab !== "audio",
-                    children: /* @__PURE__ */ jsx100(
+                    children: /* @__PURE__ */ jsx101(
                       MediaEditAudioSection,
                       {
                         item,
@@ -45409,14 +45612,14 @@ function MediaEditModal({ target, onClose }) {
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx100(
+                /* @__PURE__ */ jsx101(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("timing"),
                     "aria-labelledby": tabId("timing"),
                     hidden: activeTab !== "timing",
-                    children: /* @__PURE__ */ jsx100(
+                    children: /* @__PURE__ */ jsx101(
                       MediaEditTimingSection,
                       {
                         item,
@@ -45428,17 +45631,17 @@ function MediaEditModal({ target, onClose }) {
                     )
                   }
                 ),
-                item.kind === "video" && /* @__PURE__ */ jsx100(
+                item.kind === "video" && /* @__PURE__ */ jsx101(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("frame"),
                     "aria-labelledby": tabId("frame"),
                     hidden: activeTab !== "frame",
-                    children: /* @__PURE__ */ jsx100(MediaEditFrameSection, { item, draft, onChange: setDraft })
+                    children: /* @__PURE__ */ jsx101(MediaEditFrameSection, { item, draft, onChange: setDraft })
                   }
                 ),
-                companions.length > 0 && /* @__PURE__ */ jsxs81("p", { className: "squisq-media-edit-note", children: [
+                companions.length > 0 && /* @__PURE__ */ jsxs82("p", { className: "squisq-media-edit-note", children: [
                   "Cleanup and pause cuts also apply to ",
                   companions.length,
                   " linked",
@@ -45448,16 +45651,16 @@ function MediaEditModal({ target, onClose }) {
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs81("footer", { className: "squisq-media-edit-modal__footer", children: [
-              /* @__PURE__ */ jsx100("p", { className: "squisq-media-edit-status", role: "status", "data-state": renderStatus?.state, children: renderStatus && item && mediaEditRenders && /* @__PURE__ */ jsx100(
+            /* @__PURE__ */ jsxs82("footer", { className: "squisq-media-edit-modal__footer", children: [
+              /* @__PURE__ */ jsx101("p", { className: "squisq-media-edit-status", role: "status", "data-state": renderStatus?.state, children: renderStatus && item && mediaEditRenders && /* @__PURE__ */ jsx101(
                 RenderStatusText,
                 {
                   status: renderStatus,
                   onRetry: () => mediaEditRenders.retry(item.clip)
                 }
               ) }),
-              /* @__PURE__ */ jsx100("button", { type: "button", onClick: onClose, children: "Cancel" }),
-              /* @__PURE__ */ jsx100(
+              /* @__PURE__ */ jsx101("button", { type: "button", onClick: onClose, children: "Cancel" }),
+              /* @__PURE__ */ jsx101(
                 "button",
                 {
                   type: "button",
@@ -45722,7 +45925,7 @@ import {
   createMediaEditRenderManager,
   useProcessedAudio as useProcessedAudio4
 } from "@bendyline/squisq-video-react/media-edit";
-import { Fragment as Fragment34, jsx as jsx101, jsxs as jsxs82 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx102, jsxs as jsxs83 } from "react/jsx-runtime";
 function EditorShell({
   ariaLabel,
   initialMarkdown = "",
@@ -45828,11 +46031,11 @@ function EditorShell({
     () => mediaEditRenders === void 0 && effectiveMediaProvider ? createMediaEditRenderManager({ mediaProvider: effectiveMediaProvider }) : null,
     [mediaEditRenders, effectiveMediaProvider]
   );
-  useEffect78(() => () => ownedMediaEditRenders?.dispose(), [ownedMediaEditRenders]);
+  useEffect80(() => () => ownedMediaEditRenders?.dispose(), [ownedMediaEditRenders]);
   const effectiveMediaEditRenders = mediaEditRenders === void 0 ? ownedMediaEditRenders : mediaEditRenders;
   const filesToggleEnabled = showFilesToggle ?? effectiveMediaProvider !== void 0;
   const effectiveInitialView = hostMode === "chat" || !showPlayTab && initialView === "preview" ? "wysiwyg" : initialView;
-  return /* @__PURE__ */ jsx101(MediaContext7.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(MediaContext7.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx102(
     EditorProvider,
     {
       initialMarkdown,
@@ -45878,7 +46081,7 @@ function EditorShell({
       themeInheritance,
       viewPreferences,
       onViewPreferencesChange,
-      children: /* @__PURE__ */ jsx101(ProofingRoot, { children: /* @__PURE__ */ jsx101(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx101(PageTemplateContext.Provider, { value: pageTemplates, children: /* @__PURE__ */ jsx101(
+      children: /* @__PURE__ */ jsx102(ProofingRoot, { children: /* @__PURE__ */ jsx102(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx102(PageTemplateContext.Provider, { value: pageTemplates, children: /* @__PURE__ */ jsx102(
         EditorShellInner,
         {
           ariaLabel: ariaLabel ?? (hostMode === "chat" ? "Message" : fileName ? `Edit ${fileName}` : "Document editor"),
@@ -45944,11 +46147,11 @@ function UseModeToolbarControls({
   summarizationDesigner
 }) {
   const printMode = usePrintMode();
-  if (printMode.active) return /* @__PURE__ */ jsx101(PrintPreviewToolbar, {});
-  return /* @__PURE__ */ jsxs82(Fragment34, { children: [
-    /* @__PURE__ */ jsx101(PreviewToolbarControls, { summarizationDesigner }),
-    /* @__PURE__ */ jsx101(PresentationModeControl, {}),
-    allowPrint && /* @__PURE__ */ jsx101(PrintModeControl, {})
+  if (printMode.active) return /* @__PURE__ */ jsx102(PrintPreviewToolbar, {});
+  return /* @__PURE__ */ jsxs83(Fragment35, { children: [
+    /* @__PURE__ */ jsx102(PreviewToolbarControls, { summarizationDesigner }),
+    /* @__PURE__ */ jsx102(PresentationModeControl, {}),
+    allowPrint && /* @__PURE__ */ jsx102(PrintModeControl, {})
   ] });
 }
 function UseModeProviders({
@@ -45957,13 +46160,13 @@ function UseModeProviders({
   allowPresentationWindow,
   allowPresentationFullscreen
 }) {
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(
     PresentationModeProvider,
     {
       rootRef,
       allowWindow: allowPresentationWindow,
       allowFullscreen: allowPresentationFullscreen,
-      children: /* @__PURE__ */ jsx101(PrintModeProvider, { rootRef, children })
+      children: /* @__PURE__ */ jsx102(PrintModeProvider, { rootRef, children })
     }
   );
 }
@@ -46022,8 +46225,8 @@ function EditorShellInner({
   defaultThemeId,
   defaultThemeLabel
 }) {
-  const shellRef = useRef74(null);
-  const [uncontrolledNavigationSheet, setUncontrolledNavigationSheet] = useState90(null);
+  const shellRef = useRef75(null);
+  const [uncontrolledNavigationSheet, setUncontrolledNavigationSheet] = useState91(null);
   const navigationSheetPanel = navigationSheet === void 0 ? uncontrolledNavigationSheet : navigationSheet;
   const handleNavigationSheetChange = useCallback63(
     (panel) => {
@@ -46062,8 +46265,8 @@ function EditorShellInner({
   } = useEditorContext();
   const processedAudio = useProcessedAudio4(mediaEditRenders);
   const { docThemes, onDocThemesChange } = useDocCustomThemes();
-  const lastEditingView = useRef74(activeView === "raw" ? "raw" : "wysiwyg");
-  useEffect78(() => {
+  const lastEditingView = useRef75(activeView === "raw" ? "raw" : "wysiwyg");
+  useEffect80(() => {
     if (activeView !== "preview") lastEditingView.current = activeView;
   }, [activeView]);
   const editingView = activeView === "preview" ? lastEditingView.current : activeView;
@@ -46110,32 +46313,32 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState90(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState90(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState91(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState91(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState90(false);
-  const [filesFocusPath, setFilesFocusPath] = useState90(null);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState90(0);
-  const [mediaCount, setMediaCount] = useState90(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState90(false);
+  const [showFiles, setShowFiles] = useState91(false);
+  const [filesFocusPath, setFilesFocusPath] = useState91(null);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState91(0);
+  const [mediaCount, setMediaCount] = useState91(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState91(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
   const usedMediaPaths = useMemo62(
     () => collectMediaReferencesFromMarkdown(markdownSource),
     [markdownSource]
   );
-  const imageEditFallbackContainerRef = useRef74(null);
+  const imageEditFallbackContainerRef = useRef75(null);
   if (imageEditFallbackContainerRef.current === null) {
     imageEditFallbackContainerRef.current = new MemoryContentContainer2();
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect78(() => {
+  useEffect80(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect78(() => {
+  useEffect80(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect78(() => {
+  useEffect80(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -46159,7 +46362,7 @@ function EditorShellInner({
       cancelled = true;
     };
   }, [mediaProvider, mediaListRefreshKey]);
-  useEffect78(() => {
+  useEffect80(() => {
     if (showFilesWhenNotEmpty && mediaCount > 0) setShowFiles(true);
   }, [mediaCount, showFilesWhenNotEmpty]);
   const handleToggleFiles = useCallback63(() => {
@@ -46178,8 +46381,8 @@ function EditorShellInner({
     },
     [insertionTarget]
   );
-  const docBasenameRef = useRef74("document");
-  useEffect78(() => {
+  const docBasenameRef = useRef75("document");
+  useEffect80(() => {
     let cancelled = false;
     docBasenameRef.current = "document";
     void resolveDocBasename(workspaceContainer).then((base) => {
@@ -46262,7 +46465,7 @@ function EditorShellInner({
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect78(() => {
+  useEffect80(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback63((e2) => {
@@ -46318,7 +46521,7 @@ function EditorShellInner({
     anchor.removeAttribute("data-squisq-link-title");
   }, []);
   const autoGrow = minHeight !== void 0 || maxHeight !== void 0;
-  const shell = /* @__PURE__ */ jsxs82(
+  const shell = /* @__PURE__ */ jsxs83(
     "div",
     {
       ref: shellRef,
@@ -46357,7 +46560,7 @@ function EditorShellInner({
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsx101(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx102(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx102(
           PreviewSettingsProvider,
           {
             doc,
@@ -46365,25 +46568,25 @@ function EditorShellInner({
             themeOverride,
             defaultThemeId,
             defaultThemeLabel,
-            children: /* @__PURE__ */ jsxs82(
+            children: /* @__PURE__ */ jsxs83(
               UseModeProviders,
               {
                 rootRef: shellRef,
                 allowPresentationWindow,
                 allowPresentationFullscreen,
                 children: [
-                  isImageMode ? (toolbarSlotLeft || toolbarSlotRight) && /* @__PURE__ */ jsxs82("div", { className: "squisq-editor-header squisq-editor-header--image", children: [
+                  isImageMode ? (toolbarSlotLeft || toolbarSlotRight) && /* @__PURE__ */ jsxs83("div", { className: "squisq-editor-header squisq-editor-header--image", children: [
                     toolbarSlotLeft,
-                    /* @__PURE__ */ jsx101("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ jsx102("div", { style: { flex: 1 } }),
                     toolbarSlotRight
-                  ] }) : /* @__PURE__ */ jsx101("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx101(
+                  ] }) : /* @__PURE__ */ jsx102("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx102(
                     Toolbar,
                     {
                       showFiles,
                       fileCount: mediaCount,
                       onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
                       slotLeft: toolbarSlotLeft,
-                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx101(
+                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx102(
                         UseModeToolbarControls,
                         {
                           allowPrint,
@@ -46400,7 +46603,7 @@ function EditorShellInner({
                       findShortcut
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs82(
+                  /* @__PURE__ */ jsxs83(
                     "div",
                     {
                       className: "squisq-editor-content",
@@ -46414,7 +46617,7 @@ function EditorShellInner({
                         display: "flex"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs82(
+                        /* @__PURE__ */ jsxs83(
                           "div",
                           {
                             className: "squisq-editor-primary",
@@ -46425,7 +46628,7 @@ function EditorShellInner({
                               position: "relative"
                             },
                             children: [
-                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx101(
+                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx102(
                                 ImageEditor,
                                 {
                                   filesContainer: imageEditorContainer,
@@ -46435,16 +46638,16 @@ function EditorShellInner({
                                   onExport: onImageExport,
                                   surface: colorScheme === "dark" ? DARK_SURFACE2 : LIGHT_SURFACE2
                                 }
-                              ) : /* @__PURE__ */ jsx101(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
-                              !isImageMode && editingView === "raw" && /* @__PURE__ */ jsxs82(
+                              ) : /* @__PURE__ */ jsx102(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
+                              !isImageMode && editingView === "raw" && /* @__PURE__ */ jsxs83(
                                 "div",
                                 {
                                   className: "squisq-editor-with-gutter",
                                   hidden: isPreview,
                                   style: isPreview ? { display: "none" } : void 0,
                                   children: [
-                                    isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx101(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                    /* @__PURE__ */ jsx101(
+                                    isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx102(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                    /* @__PURE__ */ jsx102(
                                       BlockCardView,
                                       {
                                         active: isCardMode,
@@ -46453,7 +46656,7 @@ function EditorShellInner({
                                         onPrev: prevBlock,
                                         onNext: nextBlock,
                                         onAdd: addBlock,
-                                        children: /* @__PURE__ */ jsx101("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx101(
+                                        children: /* @__PURE__ */ jsx102("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx102(
                                           RawEditor,
                                           {
                                             ariaLabel: `${ariaLabel} \u2014 source`,
@@ -46465,9 +46668,9 @@ function EditorShellInner({
                                       },
                                       "raw-frame"
                                     ),
-                                    isCodeMode && codeContext && /* @__PURE__ */ jsx101(CodeContextZones, { options: codeContext }, "code-context"),
-                                    isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx101(BlockPreviewPanel, { basePath }, "block-preview"),
-                                    isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx101(
+                                    isCodeMode && codeContext && /* @__PURE__ */ jsx102(CodeContextZones, { options: codeContext }, "code-context"),
+                                    isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(BlockPreviewPanel, { basePath }, "block-preview"),
+                                    isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(
                                       InlinePreviewGutter,
                                       {
                                         width: inlinePreviewWidth,
@@ -46476,7 +46679,7 @@ function EditorShellInner({
                                       },
                                       "inline"
                                     ),
-                                    isMarkdownMode && /* @__PURE__ */ jsx101(
+                                    isMarkdownMode && /* @__PURE__ */ jsx102(
                                       NavigationSheet,
                                       {
                                         panel: navigationSheetPanel,
@@ -46491,15 +46694,15 @@ function EditorShellInner({
                                 },
                                 "raw-shell"
                               ),
-                              isMarkdownMode && editingView === "wysiwyg" && /* @__PURE__ */ jsxs82(
+                              isMarkdownMode && editingView === "wysiwyg" && /* @__PURE__ */ jsxs83(
                                 "div",
                                 {
                                   className: "squisq-editor-with-gutter",
                                   hidden: isPreview,
                                   style: isPreview ? { display: "none" } : void 0,
                                   children: [
-                                    outlineVisible && /* @__PURE__ */ jsx101(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                    /* @__PURE__ */ jsx101(
+                                    outlineVisible && /* @__PURE__ */ jsx102(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                    /* @__PURE__ */ jsx102(
                                       BlockCardView,
                                       {
                                         active: isCardMode,
@@ -46508,7 +46711,7 @@ function EditorShellInner({
                                         onPrev: prevBlock,
                                         onNext: nextBlock,
                                         onAdd: addBlock,
-                                        children: /* @__PURE__ */ jsx101(
+                                        children: /* @__PURE__ */ jsx102(
                                           WysiwygEditor,
                                           {
                                             ariaLabel,
@@ -46526,8 +46729,8 @@ function EditorShellInner({
                                       },
                                       "wysiwyg-frame"
                                     ),
-                                    isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx101(BlockPreviewPanel, { basePath }, "block-preview"),
-                                    !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx101(
+                                    isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(BlockPreviewPanel, { basePath }, "block-preview"),
+                                    !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx102(
                                       InlinePreviewGutter,
                                       {
                                         width: inlinePreviewWidth,
@@ -46536,7 +46739,7 @@ function EditorShellInner({
                                       },
                                       "inline"
                                     ),
-                                    /* @__PURE__ */ jsx101(
+                                    /* @__PURE__ */ jsx102(
                                       NavigationSheet,
                                       {
                                         panel: navigationSheetPanel,
@@ -46551,7 +46754,7 @@ function EditorShellInner({
                                 },
                                 "wysiwyg-shell"
                               ),
-                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx101(
+                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx102(
                                 PreviewPanel,
                                 {
                                   basePath,
@@ -46564,7 +46767,7 @@ function EditorShellInner({
                             ]
                           }
                         ),
-                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx101(
+                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx102(
                           TimelineVideoPanel,
                           {
                             schedule: timelineVideoSchedule,
@@ -46574,7 +46777,7 @@ function EditorShellInner({
                             onClose: () => setTimelineVideoVisible(false)
                           }
                         ),
-                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx101(
+                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx102(
                           TimelineCompositionPanel,
                           {
                             doc,
@@ -46584,7 +46787,7 @@ function EditorShellInner({
                             onClose: () => setTimelineCompositionVisible(false)
                           }
                         ),
-                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx101(
+                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx102(
                           MediaBin,
                           {
                             mediaProvider,
@@ -46600,11 +46803,11 @@ function EditorShellInner({
                             highlightPath: filesFocusPath
                           }
                         ),
-                        isMarkdownMode && /* @__PURE__ */ jsx101(ProofingPanel, {}),
-                        isMarkdownMode && /* @__PURE__ */ jsx101(ReviewPanel, {}),
+                        isMarkdownMode && /* @__PURE__ */ jsx102(ProofingPanel, {}),
+                        isMarkdownMode && /* @__PURE__ */ jsx102(ReviewPanel, {}),
                         isMarkdownMode && sidePanelSlot,
-                        isMarkdownMode && /* @__PURE__ */ jsx101(ThemeDesignerDock, {}),
-                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx101(
+                        isMarkdownMode && /* @__PURE__ */ jsx102(ThemeDesignerDock, {}),
+                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx102(
                           DropZoneOverlay,
                           {
                             dragContentType,
@@ -46615,7 +46818,7 @@ function EditorShellInner({
                       ]
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx101(
+                  isTimelineMode && /* @__PURE__ */ jsx102(
                     TimelineToolbar,
                     {
                       literalVideoVisible: timelineVideoVisible,
@@ -46626,7 +46829,7 @@ function EditorShellInner({
                       onToggleComposition: () => setTimelineCompositionVisible((visible) => !visible)
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx101(
+                  isTimelineMode && /* @__PURE__ */ jsx102(
                     TimelineTrack,
                     {
                       doc: timelineDoc,
@@ -46635,8 +46838,8 @@ function EditorShellInner({
                       basePath
                     }
                   ),
-                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx101(StatusBar, { slotRight: statusBarSlotRight }),
-                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx101(
+                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx102(StatusBar, { slotRight: statusBarSlotRight }),
+                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx102(
                     RecorderEntry,
                     {
                       open: mediaBinRecorderOpen,
@@ -46649,8 +46852,8 @@ function EditorShellInner({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx101(TooltipLayer, {}),
-        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx102(TooltipLayer, {}),
+        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx102(
           ImageEditModal,
           {
             relativePath: imageEditTarget,
@@ -46666,12 +46869,12 @@ function EditorShellInner({
             shellTheme: colorScheme
           }
         ),
-        mediaEditTarget !== null && /* @__PURE__ */ jsx101(MediaEditModal, { target: mediaEditTarget, onClose: closeMediaEdit })
+        mediaEditTarget !== null && /* @__PURE__ */ jsx102(MediaEditModal, { target: mediaEditTarget, onClose: closeMediaEdit })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs82(EditorContextMenuProvider, { rootRef: shellRef, readOnly, children: [
-    /* @__PURE__ */ jsx101(MediaEditContextMenuItems, {}),
+  return /* @__PURE__ */ jsxs83(EditorContextMenuProvider, { rootRef: shellRef, readOnly, children: [
+    /* @__PURE__ */ jsx102(MediaEditContextMenuItems, {}),
     shell
   ] });
 }