@bendyline/squisq-editor-react 2.13.14 → 2.13.16

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

@@ -19,7 +19,7 @@ import {
   useDictationState,
   useEditorContext,
   useEditorContextOptional
-} from "./chunk-D2QFSFG2.js";
+} from "./chunk-UQUYPT5P.js";
 import {
   monacoLanguageRequestKey,
   monacoLanguagesForDocument,
@@ -46,13 +46,12 @@ import {
   ShapePalette
 } from "./chunk-HLU6ZBS7.js";
 import {
-  BlockThumbnail,
   RecorderPanel,
   buildPreviewDoc,
   documentTitleFromFileName,
   resolveBlockVisual,
   useModalDialog
-} from "./chunk-FOKUOC7E.js";
+} from "./chunk-ECS2FFXA.js";
 import {
   Icon
 } from "./chunk-UYB5CPRE.js";
@@ -9741,10 +9740,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 +24658,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 +24736,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 +24757,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 +24942,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 +24954,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 +25004,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 +25028,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 +25140,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 +25164,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 +25195,7 @@ function AsciiDiagramWidget({
         ]
       }
     ),
+    notice,
     warnings
   ] });
 }
@@ -25407,7 +25464,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 +27310,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 +27347,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 +27373,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 +27450,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 +27478,7 @@ function MermaidDiagramCanvas({
       window.removeEventListener("blur", finish);
     };
   }, [panning]);
-  useEffect37(() => {
+  useEffect38(() => {
     let current = true;
     const id = `squisq-mermaid-svg-${++renderSequence}`;
     setRendering(true);
@@ -27692,7 +27749,7 @@ function MermaidDiagramCanvas({
     updateSelectionAnchor,
     zoom
   ]);
-  useEffect37(() => {
+  useEffect38(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const update = () => updateSelectionAnchor();
@@ -28097,7 +28154,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 +28165,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 +28336,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 +28347,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 +28987,7 @@ function MermaidDiagramWidget({
     },
     [effectiveHeight]
   );
-  useEffect39(() => {
+  useEffect40(() => {
     if (!editNotice) return;
     const timeout = window.setTimeout(() => setEditNotice(""), 7e3);
     return () => window.clearTimeout(timeout);
@@ -29167,7 +29224,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 +29604,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 +29629,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 +29685,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 +29693,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 +29712,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 +29875,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 +29977,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 +30050,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 +30295,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 +30311,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 +30784,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 +31188,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 +31208,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 +31252,7 @@ function DataCardWidget({
     regionParams.anchor,
     regionParams.headerRow
   ]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!href || cardPos === null) return;
     const provider = activeProvider;
     if (!provider) {
@@ -31357,7 +31414,7 @@ function DataCardWidget({
       cancelled = true;
     };
   }, [href, revision, activeProvider, activeContainer, regionIdentity, editor]);
-  useEffect46(
+  useEffect47(
     () => () => {
       gridRef.current?.formulaSession?.dispose();
       gridRef.current?.provider.dispose();
@@ -32094,7 +32151,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 +32860,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 +32886,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 +32900,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 +33451,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 +33459,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 +33872,7 @@ function InlineTrackLabel({
   onFinish
 }) {
   const [draft, setDraft] = useState59(label);
-  useEffect48(() => {
+  useEffect49(() => {
     if (editing) setDraft(label);
   }, [editing, label]);
   const commitLabel = () => {
@@ -33874,8 +33931,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 +34242,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 +34277,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 +34296,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 +34550,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 +34595,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 +34768,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 +34963,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 +34997,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 +35336,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 +35403,7 @@ function VideoMedia({
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
   const [audioOnly, setAudioOnly] = useState65(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
-  useEffect54(() => {
+  useEffect55(() => {
     setAudioOnly(false);
   }, [resolvedSrc]);
   const handleLoadedMetadata = (event) => {
@@ -35674,7 +35731,7 @@ function startNarrationTimingJob(input) {
     else jobs.delete(input.src);
     notify();
   };
-  import("./narrationTimingsFromAudio-ICMDSWPI.js").then(
+  import("./narrationTimingsFromAudio-O67QKISS.js").then(
     ({ updateNarrationTimingsFromAudio }) => updateNarrationTimingsFromAudio({
       ...input,
       signal: job.abort.signal,
@@ -36653,7 +36710,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 +36730,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 +36753,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 +36816,7 @@ function WysiwygEditor({
     initialContentRef.current = markdownToTiptap(initialDisplayBodyRef.current);
   }
   const submitOnEnterRef = useRef51(submitOnEnter);
-  useEffect55(() => {
+  useEffect56(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -36991,7 +37048,7 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect55(() => {
+  useEffect56(() => {
     let cancelled = false;
     queueMicrotask(() => {
       if (!cancelled && editor && !editor.isDestroyed)
@@ -37001,13 +37058,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 +37075,7 @@ function WysiwygEditor({
       editor.off("update", syncPlaceholders);
     };
   }, [accessoryPaths, editor]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef51(null);
@@ -37030,7 +37087,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 +37143,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 +37254,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 +37493,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 +37568,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 +37629,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect56(() => {
+  useEffect57(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -37656,7 +37713,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 +37760,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 +38039,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 +38512,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 +38537,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 +38624,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 +38748,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 +38768,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 +38844,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 +38867,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -39276,20 +39333,44 @@ 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,
-  VIEWPORT_PRESETS as VIEWPORT_PRESETS6
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS7
 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks5, DEFAULT_THEME as DEFAULT_THEME6, getPinnedBlockMeta } from "@bendyline/squisq/doc";
 import { createMediaTimeMap } from "@bendyline/squisq/mediaEdit";
 import { usesDynamicPresentation } from "@bendyline/squisq/transform";
 import { useProcessedAudio as useProcessedAudio2 } from "@bendyline/squisq-video-react/media-edit";
-import { MediaClipLayer, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
+import { MediaClipLayer, MediaContext as MediaContext6 } from "@bendyline/squisq-react";
+
+// src/TimelineBlockPreview.tsx
+import { memo as memo2 } from "react";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS6 } from "@bendyline/squisq/schemas";
+import { BlockRenderer as BlockRenderer4, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
+import { jsx as jsx78 } from "react/jsx-runtime";
+var BlockThumbnail = memo2(function BlockThumbnail2({
+  visual,
+  buildPlayback = "all",
+  viewport = VIEWPORT_PRESETS6.landscape,
+  basePath = "/",
+  mediaProvider = null
+}) {
+  return /* @__PURE__ */ jsx78(MediaContext5.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx78(
+    BlockRenderer4,
+    {
+      buildPlayback,
+      block: visual,
+      blockTime: 0,
+      basePath,
+      viewport
+    }
+  ) });
+});
 
 // 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 +39399,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,9 +39500,9 @@ 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";
+import { Fragment as Fragment27, jsx as jsx79, jsxs as jsxs63 } from "react/jsx-runtime";
 function TimelineItemMenu({
   anchor,
   target,
@@ -39450,7 +39531,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect62(() => {
+  useEffect63(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -39482,10 +39563,10 @@ function TimelineItemMenu({
         style: { ...style, ...accentStyle(accentColor) },
         children: [
           /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-header", children: [
-            /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-kind", children: target.kind === "block" ? "Block" : "Video" }),
-            /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-title", title: target.title, children: target.title })
+            /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-kind", children: target.kind === "block" ? "Block" : "Video" }),
+            /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-title", title: target.title, children: target.title })
           ] }),
-          target.kind === "block" ? /* @__PURE__ */ jsx78(
+          target.kind === "block" ? /* @__PURE__ */ jsx79(
             BlockMenu,
             {
               target,
@@ -39497,8 +39578,8 @@ function TimelineItemMenu({
               onTransition: onBlockTransition
             }
           ) : /* @__PURE__ */ jsxs63(Fragment27, { children: [
-            /* @__PURE__ */ jsx78(VideoMenu, { target, onPatch: onVideoPatch }),
-            onEditMedia && /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx79(VideoMenu, { target, onPatch: onVideoPatch }),
+            onEditMedia && /* @__PURE__ */ jsx79(
               "button",
               {
                 type: "button",
@@ -39549,7 +39630,7 @@ function BlockMenu({
         "Dynamic slides time each slide from the narration or reading pace, so this section's length and start can't be pinned.",
         pinned && " A pinned time here stops a narrated deck from playing."
       ] }),
-      pinned && onClearTiming && /* @__PURE__ */ jsx78(
+      pinned && onClearTiming && /* @__PURE__ */ jsx79(
         "button",
         {
           type: "button",
@@ -39564,7 +39645,7 @@ function BlockMenu({
       )
     ] }) : /* @__PURE__ */ jsxs63(Fragment27, { children: [
       /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-check", children: [
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx79(
           "input",
           {
             type: "checkbox",
@@ -39572,10 +39653,10 @@ function BlockMenu({
             onChange: (event) => toggleAutotime(event.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx78("span", { children: "Autotime block" })
+        /* @__PURE__ */ jsx79("span", { children: "Autotime block" })
       ] }),
-      /* @__PURE__ */ jsx78("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
+      /* @__PURE__ */ jsx79(
         MenuNumberField,
         {
           label: "Duration",
@@ -39589,7 +39670,7 @@ function BlockMenu({
           }
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79(
         MenuNumberField,
         {
           label: "Start time",
@@ -39604,8 +39685,8 @@ function BlockMenu({
       )
     ] }),
     /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-row", children: [
-      /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "Transition" }),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "Transition" }),
+      /* @__PURE__ */ jsx79(
         TransitionPicker,
         {
           value: transition,
@@ -39637,14 +39718,14 @@ function VideoMenu({
   ];
   return /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-body", children: [
     /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-field", children: [
-      /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "Placement" }),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "Placement" }),
+      /* @__PURE__ */ jsx79(
         "div",
         {
           className: "squisq-timeline-item-menu-segments",
           role: "group",
           "aria-label": "Video placement",
-          children: placementOptions.map((option) => /* @__PURE__ */ jsx78(
+          children: placementOptions.map((option) => /* @__PURE__ */ jsx79(
             "button",
             {
               type: "button",
@@ -39666,7 +39747,7 @@ function VideoMenu({
     ] }),
     placed && /* @__PURE__ */ jsxs63(Fragment27, { children: [
       /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-check", children: [
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx79(
           "input",
           {
             type: "checkbox",
@@ -39680,11 +39761,11 @@ function VideoMenu({
             }
           }
         ),
-        /* @__PURE__ */ jsx78("span", { children: "Lock to block" })
+        /* @__PURE__ */ jsx79("span", { children: "Lock to block" })
       ] }),
       placement === "picture-in-picture" && /* @__PURE__ */ jsxs63(Fragment27, { children: [
         /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "PIP size" }),
+          /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "PIP size" }),
           /* @__PURE__ */ jsxs63(
             "select",
             {
@@ -39701,14 +39782,14 @@ function VideoMenu({
                   titleCase(target.defaultPipSize),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx78("option", { value: "small", children: "Small" }),
-                /* @__PURE__ */ jsx78("option", { value: "large", children: "Large" })
+                /* @__PURE__ */ jsx79("option", { value: "small", children: "Small" }),
+                /* @__PURE__ */ jsx79("option", { value: "large", children: "Large" })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "PIP shape" }),
+          /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "PIP shape" }),
           /* @__PURE__ */ jsxs63(
             "select",
             {
@@ -39725,14 +39806,14 @@ function VideoMenu({
                   titleCase(target.defaultPipShape),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx78("option", { value: "square", children: "Square" }),
-                /* @__PURE__ */ jsx78("option", { value: "wide", children: "Wide (16:9)" })
+                /* @__PURE__ */ jsx79("option", { value: "square", children: "Square" }),
+                /* @__PURE__ */ jsx79("option", { value: "wide", children: "Wide (16:9)" })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-          /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "PIP position" }),
+          /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: "PIP position" }),
           /* @__PURE__ */ jsxs63(
             "select",
             {
@@ -39749,10 +39830,10 @@ function VideoMenu({
                   positionLabel(target.defaultPipPosition),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx78("option", { value: "top-left", children: "Top left" }),
-                /* @__PURE__ */ jsx78("option", { value: "top-right", children: "Top right" }),
-                /* @__PURE__ */ jsx78("option", { value: "bottom-left", children: "Bottom left" }),
-                /* @__PURE__ */ jsx78("option", { value: "bottom-right", children: "Bottom right" })
+                /* @__PURE__ */ jsx79("option", { value: "top-left", children: "Top left" }),
+                /* @__PURE__ */ jsx79("option", { value: "top-right", children: "Top right" }),
+                /* @__PURE__ */ jsx79("option", { value: "bottom-left", children: "Bottom left" }),
+                /* @__PURE__ */ jsx79("option", { value: "bottom-right", children: "Bottom right" })
               ]
             }
           )
@@ -39770,9 +39851,9 @@ function MenuNumberField({
   onChange
 }) {
   return /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-field", children: [
-    /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: label }),
+    /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-item-menu-label", children: label }),
     /* @__PURE__ */ jsxs63("span", { className: "squisq-timeline-item-menu-number", children: [
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79(
         "input",
         {
           type: "number",
@@ -39785,7 +39866,7 @@ function MenuNumberField({
           onChange: (event) => onChange(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx78("span", { children: "sec" })
+      /* @__PURE__ */ jsx79("span", { children: "sec" })
     ] })
   ] });
 }
@@ -39830,8 +39911,8 @@ function menuStyle(anchor, element) {
 }
 
 // src/TimelineTrack.tsx
-import { jsx as jsx79, jsxs as jsxs64 } from "react/jsx-runtime";
-var PREVIEW_VIEWPORT = VIEWPORT_PRESETS6.landscape;
+import { jsx as jsx80, jsxs as jsxs64 } from "react/jsx-runtime";
+var PREVIEW_VIEWPORT = VIEWPORT_PRESETS7.landscape;
 var DEFAULT_PX_PER_SECOND = 18;
 var ZOOM_MIN = 4;
 var ZOOM_MAX = 160;
@@ -39853,9 +39934,9 @@ function TimelineVideoFilmstrip({
     FILMSTRIP_MAX_FRAMES,
     Math.max(1, Math.ceil(width / FILMSTRIP_FRAME_WIDTH))
   );
-  return /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-video-filmstrip", "aria-hidden": "true", children: Array.from({ length: frameCount }, (_2, index2) => {
+  return /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-video-filmstrip", "aria-hidden": "true", children: Array.from({ length: frameCount }, (_2, index2) => {
     const sampleTime = Math.max(0, sourceStart) + Math.max(0, sourceLength) * ((index2 + 0.5) / frameCount);
-    return /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsx80(
       "video",
       {
         src: resolvedSrc,
@@ -39938,7 +40019,7 @@ function TimelineTrack({
     play();
   }, [play]);
   const [scrubbing, setScrubbing] = useState75(false);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -39976,7 +40057,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef58(null);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -39987,7 +40068,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 +40117,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 +40131,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 +40162,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback49(
@@ -40167,7 +40248,7 @@ function TimelineTrack({
   for (let t = 0; t <= rulerEnd + 1e-3 && ticks.length < 1e3; t += tickSeconds) ticks.push(t);
   return /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline", style: { height }, "data-testid": "timeline-track", children: [
     /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline-controls", children: [
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "button",
         {
           type: "button",
@@ -40184,7 +40265,7 @@ function TimelineTrack({
         " / ",
         formatClock3(total)
       ] }),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "button",
         {
           type: "button",
@@ -40196,7 +40277,7 @@ function TimelineTrack({
           children: "\u2212"
         }
       ),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "button",
         {
           type: "button",
@@ -40209,8 +40290,8 @@ function TimelineTrack({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline-inner", style: { width }, children: [
-      /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-row squisq-timeline-row--blocks", children: blocks.map((b, i) => {
+    /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-scroll", ref: scrollRef, children: /* @__PURE__ */ jsxs64("div", { className: "squisq-timeline-inner", style: { width }, children: [
+      /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-row squisq-timeline-row--blocks", children: blocks.map((b, i) => {
         const line = headingLine(b);
         const isActive = line != null && line === activeBlockStartLine;
         const left = previewLeft(i);
@@ -40227,7 +40308,7 @@ function TimelineTrack({
               if (line != null) goToBlockByLine(line);
             },
             children: [
-              visualByBlock.has(b.id) && /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-block-thumb", "aria-hidden": true, children: /* @__PURE__ */ jsx79(
+              visualByBlock.has(b.id) && /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-block-thumb", "aria-hidden": true, children: /* @__PURE__ */ jsx80(
                 BlockThumbnail,
                 {
                   visual: visualByBlock.get(b.id),
@@ -40235,7 +40316,7 @@ function TimelineTrack({
                   mediaProvider
                 }
               ) }),
-              !timingLocked && prev && headingLine(prev) != null && /* @__PURE__ */ jsx79(
+              !timingLocked && prev && headingLine(prev) != null && /* @__PURE__ */ jsx80(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--left",
@@ -40256,8 +40337,8 @@ function TimelineTrack({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-block-label", children: b.title ?? b.id }),
-              line != null && /* @__PURE__ */ jsx79(
+              /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-block-label", children: b.title ?? b.id }),
+              line != null && /* @__PURE__ */ jsx80(
                 "button",
                 {
                   type: "button",
@@ -40279,7 +40360,7 @@ function TimelineTrack({
                   children: "\u2026"
                 }
               ),
-              !timingLocked && line != null && /* @__PURE__ */ jsx79(
+              !timingLocked && line != null && /* @__PURE__ */ jsx80(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -40328,7 +40409,7 @@ function TimelineTrack({
               ...raw.edits ? { edits: raw.edits } : {}
             } : { kind: c.kind, src: c.src, clipStart: c.sourceIn };
           };
-          return /* @__PURE__ */ jsx79(
+          return /* @__PURE__ */ jsx80(
             "div",
             {
               className: "squisq-timeline-row squisq-timeline-row--media",
@@ -40365,7 +40446,7 @@ function TimelineTrack({
                     if (next) setMarkdownSource(next);
                   },
                   children: [
-                    c.kind === "video" && /* @__PURE__ */ jsx79(
+                    c.kind === "video" && /* @__PURE__ */ jsx80(
                       TimelineVideoFilmstrip,
                       {
                         src: c.src,
@@ -40374,8 +40455,8 @@ function TimelineTrack({
                         width: clipWidth
                       }
                     ),
-                    /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(c.src, c.kind) }),
-                    cutMarks.map((at2) => /* @__PURE__ */ jsx79(
+                    /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(c.src, c.kind) }),
+                    cutMarks.map((at2) => /* @__PURE__ */ jsx80(
                       "span",
                       {
                         className: "squisq-timeline-cut-mark",
@@ -40384,7 +40465,7 @@ function TimelineTrack({
                       },
                       at2
                     )),
-                    c.kind === "video" && c.sourceLine != null && /* @__PURE__ */ jsx79(
+                    c.kind === "video" && c.sourceLine != null && /* @__PURE__ */ jsx80(
                       "button",
                       {
                         type: "button",
@@ -40410,7 +40491,7 @@ function TimelineTrack({
                         children: "\u2026"
                       }
                     ),
-                    editable && /* @__PURE__ */ jsx79(
+                    editable && /* @__PURE__ */ jsx80(
                       "span",
                       {
                         className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -40460,7 +40541,7 @@ function TimelineTrack({
               ...m.clipStart != null ? { clipStart: m.clipStart } : {},
               ...m.clipEnd != null ? { clipEnd: m.clipEnd } : {}
             };
-            return /* @__PURE__ */ jsx79(
+            return /* @__PURE__ */ jsx80(
               "div",
               {
                 className: "squisq-timeline-row squisq-timeline-row--media",
@@ -40487,7 +40568,7 @@ function TimelineTrack({
                       { onClick: () => selectClipAt(b.startTime, b.id) }
                     ),
                     children: [
-                      m.kind === "video" && /* @__PURE__ */ jsx79(
+                      m.kind === "video" && /* @__PURE__ */ jsx80(
                         TimelineVideoFilmstrip,
                         {
                           src: m.src,
@@ -40496,8 +40577,8 @@ function TimelineTrack({
                           width: clipWidth
                         }
                       ),
-                      /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(m.src, m.kind) }),
-                      m.kind === "video" && m.sourceLine != null && /* @__PURE__ */ jsx79(
+                      /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-clip-label", children: timelineMediaLabel(m.src, m.kind) }),
+                      m.kind === "video" && m.sourceLine != null && /* @__PURE__ */ jsx80(
                         "button",
                         {
                           type: "button",
@@ -40522,7 +40603,7 @@ function TimelineTrack({
                           children: "\u2026"
                         }
                       ),
-                      m.sourceLine != null && /* @__PURE__ */ jsx79(
+                      m.sourceLine != null && /* @__PURE__ */ jsx80(
                         "span",
                         {
                           className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -40544,7 +40625,7 @@ function TimelineTrack({
           })
         )
       ] }),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "div",
         {
           className: "squisq-timeline-row squisq-timeline-row--ruler",
@@ -40552,10 +40633,10 @@ function TimelineTrack({
             const rect = e2.currentTarget.getBoundingClientRect();
             seek((e2.clientX - rect.left) / pxPerSecond);
           },
-          children: ticks.map((t) => /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-tick", style: { left: t * pxPerSecond }, children: /* @__PURE__ */ jsx79("span", { className: "squisq-timeline-tick-label", children: formatDur(t) }) }, t))
+          children: ticks.map((t) => /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-tick", style: { left: t * pxPerSecond }, children: /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-tick-label", children: formatDur(t) }) }, t))
         }
       ),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "div",
         {
           className: "squisq-timeline-playhead",
@@ -40567,11 +40648,11 @@ function TimelineTrack({
             pause();
             setScrubbing(true);
           },
-          children: /* @__PURE__ */ jsx79("div", { className: "squisq-timeline-playhead-knob" })
+          children: /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-playhead-knob" })
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx79("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx79(MediaContext5.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80("div", { ref: activeClock.registerMediaHost, className: "squisq-timeline-media-host", "aria-hidden": true, children: /* @__PURE__ */ jsx80(MediaContext6.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsx80(
       MediaClipLayer,
       {
         schedule: playbackClips,
@@ -40580,7 +40661,7 @@ function TimelineTrack({
         basePath
       }
     ) }) }),
-    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx79(
+    itemMenu && itemMenuTarget && /* @__PURE__ */ jsx80(
       TimelineItemMenu,
       {
         anchor: itemMenu.anchor,
@@ -40651,7 +40732,7 @@ function formatDur(seconds) {
 // src/TimelineVideoPanel.tsx
 import { useMemo as useMemo50 } from "react";
 import { MediaClipLayer as MediaClipLayer2 } from "@bendyline/squisq-react";
-import { jsx as jsx80, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs65 } from "react/jsx-runtime";
 function TimelineVideoPanel({
   schedule,
   currentTime,
@@ -40672,10 +40753,10 @@ function TimelineVideoPanel({
       "aria-label": "Timeline video preview",
       children: [
         /* @__PURE__ */ jsxs65("header", { className: "squisq-timeline-video-header", children: [
-          /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-video-title", children: "Video monitor" }),
-          /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-video-label", title: activeLabel, children: activeLabel }),
-          /* @__PURE__ */ jsx80("span", { className: "squisq-timeline-video-time", children: formatClock4(currentTime) }),
-          onClose && /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-title", children: "Video monitor" }),
+          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-label", title: activeLabel, children: activeLabel }),
+          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-time", children: formatClock4(currentTime) }),
+          onClose && /* @__PURE__ */ jsx81(
             "button",
             {
               type: "button",
@@ -40687,8 +40768,8 @@ function TimelineVideoPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsxs65("div", { className: "squisq-timeline-video-stage", children: [
-          /* @__PURE__ */ jsx80(
+        /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsxs65("div", { className: "squisq-timeline-video-stage", children: [
+          /* @__PURE__ */ jsx81(
             MediaClipLayer2,
             {
               schedule: videos,
@@ -40700,7 +40781,7 @@ function TimelineVideoPanel({
               muted: true
             }
           ),
-          activeVideos.length === 0 && /* @__PURE__ */ jsx80("div", { className: "squisq-timeline-video-empty", children: "Move the playhead onto a video clip" })
+          activeVideos.length === 0 && /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-empty", children: "Move the playhead onto a video clip" })
         ] }) })
       ]
     }
@@ -40716,7 +40797,7 @@ function formatClock4(seconds) {
 import { useMemo as useMemo51 } from "react";
 import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule as resolveMediaSchedule3 } from "@bendyline/squisq/schemas";
 import { DocPlayer } from "@bendyline/squisq-react";
-import { jsx as jsx81, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs66 } from "react/jsx-runtime";
 function TimelineCompositionPanel({
   doc,
   clock,
@@ -40788,11 +40869,11 @@ function TimelineCompositionPanel({
       "aria-label": "Timeline video composition preview",
       children: [
         /* @__PURE__ */ jsxs66("header", { className: "squisq-timeline-video-header", children: [
-          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-title", children: "Video composition" }),
-          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-label", children: formatPresentation(effectiveVideoPresentation) }),
-          /* @__PURE__ */ jsx81(PreviewToolbarControls, { displayMode: "video" }),
-          /* @__PURE__ */ jsx81("span", { className: "squisq-timeline-video-time", children: formatClock5(clock.currentTime) }),
-          onClose && /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-video-title", children: "Video composition" }),
+          /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-video-label", children: formatPresentation(effectiveVideoPresentation) }),
+          /* @__PURE__ */ jsx82(PreviewToolbarControls, { displayMode: "video" }),
+          /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-video-time", children: formatClock5(clock.currentTime) }),
+          onClose && /* @__PURE__ */ jsx82(
             "button",
             {
               type: "button",
@@ -40804,7 +40885,7 @@ function TimelineCompositionPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-composition-stage", children: playerDoc ? /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82("div", { className: "squisq-timeline-video-body", children: /* @__PURE__ */ jsx82("div", { className: "squisq-timeline-composition-stage", children: playerDoc ? /* @__PURE__ */ jsx82(
           DocPlayer,
           {
             doc: playerDoc,
@@ -40830,7 +40911,7 @@ function TimelineCompositionPanel({
             enableSwipe: false,
             globalKeyboardShortcuts: false
           }
-        ) : /* @__PURE__ */ jsx81("div", { className: "squisq-timeline-video-empty", children: "Preparing video composition\u2026" }) }) })
+        ) : /* @__PURE__ */ jsx82("div", { className: "squisq-timeline-video-empty", children: "Preparing video composition\u2026" }) }) })
       ]
     }
   );
@@ -40847,7 +40928,7 @@ function formatPresentation(presentation) {
 }
 
 // src/TimelineToolbar.tsx
-import { jsx as jsx82, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs67 } from "react/jsx-runtime";
 function TimelineToolbar({
   literalVideoVisible,
   compositionVisible,
@@ -40864,7 +40945,7 @@ function TimelineToolbar({
       "aria-label": "Timeline view controls",
       "data-testid": "timeline-toolbar",
       children: [
-        /* @__PURE__ */ jsx82("span", { className: "squisq-timeline-toolbar-title", children: "Preview panes" }),
+        /* @__PURE__ */ jsx83("span", { className: "squisq-timeline-toolbar-title", children: "Preview panes" }),
         /* @__PURE__ */ jsxs67(
           "button",
           {
@@ -40877,7 +40958,7 @@ function TimelineToolbar({
             "data-tooltip": literalVideoVisible ? "Hide literal video" : "Show literal video",
             children: [
               /* @__PURE__ */ jsxs67("svg", { width: "15", height: "15", viewBox: "0 0 15 15", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx82(
+                /* @__PURE__ */ jsx83(
                   "rect",
                   {
                     x: "1.5",
@@ -40890,7 +40971,7 @@ function TimelineToolbar({
                     strokeWidth: "1.4"
                   }
                 ),
-                /* @__PURE__ */ jsx82(
+                /* @__PURE__ */ jsx83(
                   "path",
                   {
                     d: "M10 5.5 13.5 4v7L10 9.5z",
@@ -40901,7 +40982,7 @@ function TimelineToolbar({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx82("span", { children: "Video monitor" })
+              /* @__PURE__ */ jsx83("span", { children: "Video monitor" })
             ]
           }
         ),
@@ -40917,7 +40998,7 @@ function TimelineToolbar({
             "data-tooltip": compositionVisible ? "Hide video composition" : "Show video composition",
             children: [
               /* @__PURE__ */ jsxs67("svg", { width: "15", height: "15", viewBox: "0 0 15 15", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx82(
+                /* @__PURE__ */ jsx83(
                   "rect",
                   {
                     x: "1.5",
@@ -40930,10 +41011,10 @@ function TimelineToolbar({
                     strokeWidth: "1.4"
                   }
                 ),
-                /* @__PURE__ */ jsx82("path", { d: "M5 13h5M7.5 11v2", stroke: "currentColor", strokeWidth: "1.4" }),
-                /* @__PURE__ */ jsx82("path", { d: "m6.3 5 3 1.5-3 1.5z", fill: "currentColor" })
+                /* @__PURE__ */ jsx83("path", { d: "M5 13h5M7.5 11v2", stroke: "currentColor", strokeWidth: "1.4" }),
+                /* @__PURE__ */ jsx83("path", { d: "m6.3 5 3 1.5-3 1.5z", fill: "currentColor" })
               ] }),
-              /* @__PURE__ */ jsx82("span", { children: "Video composition" })
+              /* @__PURE__ */ jsx83("span", { children: "Video composition" })
             ]
           }
         )
@@ -40943,7 +41024,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,
@@ -40987,7 +41068,7 @@ function isFontAwesomeRule(rule) {
 }
 
 // src/PlainHtmlPreview.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var cachedRender = null;
 var cachedRenderPromise = null;
 function loadRenderFn() {
@@ -41053,7 +41134,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(
@@ -41072,7 +41153,7 @@ function PlainHtmlPreview({
     };
   }, [parsedDoc, wikiLinks]);
   const [resolvedImages, setResolvedImages] = useState76(null);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -41109,7 +41190,7 @@ function PlainHtmlPreview({
   }, [resolvedImages, images]);
   const iconsCss = useMemo52(() => collectInlineFontAwesomeCss(), []);
   const [preparation, setPreparation] = useState76(null);
-  useEffect64(() => {
+  useEffect65(() => {
     let cancelled = false;
     loadPreparation().then(
       (loaded) => {
@@ -41136,7 +41217,7 @@ function PlainHtmlPreview({
   );
   const [prepared, setPrepared] = useState76(null);
   const preparedOnceRef = useRef59(false);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!preparation || !needsPreparation) return;
     let cancelled = false;
     const prepare = () => {
@@ -41164,7 +41245,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) => {
@@ -41205,7 +41286,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect64(() => {
+  useEffect65(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -41301,11 +41382,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") {
@@ -41329,7 +41410,7 @@ function PlainHtmlPreview({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [globalKeyboardShortcuts]);
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "iframe",
     {
       ref: setIframeRef,
@@ -41390,7 +41471,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,
@@ -41535,7 +41616,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,
@@ -41544,7 +41625,7 @@ import {
 } from "react";
 import { createPortal as createPortal17 } from "react-dom";
 import { inferDocumentTitle as inferDocumentTitle2 } from "@bendyline/squisq/markdown";
-import { jsx as jsx84, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs68 } from "react/jsx-runtime";
 var PresentationModeContext = createContext7(null);
 function usePresentationMode() {
   const value = useContext7(PresentationModeContext);
@@ -41802,12 +41883,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;
@@ -41819,7 +41900,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;
@@ -41828,10 +41909,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;
@@ -41839,7 +41920,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;
@@ -41851,7 +41932,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);
@@ -41886,7 +41967,7 @@ function PresentationModeProvider({
       window.removeEventListener("resize", updatePosition);
     };
   }, [activeTarget, rootRef]);
-  useEffect65(
+  useEffect66(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -41938,8 +42019,8 @@ function PresentationModeProvider({
       "aria-label": "Exit presentation mode",
       title: "Exit presentation mode (Esc)",
       children: [
-        /* @__PURE__ */ jsx84(Icon, { icon: "fa-solid fa-compress" }),
-        /* @__PURE__ */ jsx84("span", { children: "Exit presentation" })
+        /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-compress" }),
+        /* @__PURE__ */ jsx85("span", { children: "Exit presentation" })
       ]
     }
   ) : null;
@@ -41948,7 +42029,7 @@ function PresentationModeProvider({
     (activeTarget === "control" || activeTarget === "fullscreen") && exitButton,
     activeTarget === "window" && popupRoot && exitButton ? createPortal17(exitButton, popupRoot) : null,
     error && typeof document !== "undefined" ? createPortal17(
-      /* @__PURE__ */ jsx84("div", { className: "squisq-presentation-error", "data-theme": colorScheme, role: "alert", children: error }),
+      /* @__PURE__ */ jsx85("div", { className: "squisq-presentation-error", "data-theme": colorScheme, role: "alert", children: error }),
       document.body
     ) : null
   ] });
@@ -42015,7 +42096,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -42045,7 +42126,7 @@ function PresentationModeControl() {
     (checked ?? first)?.focus();
   }, [anchor, open]);
   return /* @__PURE__ */ jsxs68("div", { className: "squisq-presentation-control", children: [
-    /* @__PURE__ */ jsx84(
+    /* @__PURE__ */ jsx85(
       "button",
       {
         type: "button",
@@ -42054,10 +42135,10 @@ function PresentationModeControl() {
         "aria-pressed": activeTarget !== null,
         "data-tooltip": activeTarget ? "Exit presentation" : `Present: ${selected.label}`,
         onClick: () => void (activeTarget ? stop() : start()),
-        children: /* @__PURE__ */ jsx84(Icon, { icon: "fa-solid fa-display" })
+        children: /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-display" })
       }
     ),
-    options.length > 1 && /* @__PURE__ */ jsx84(
+    options.length > 1 && /* @__PURE__ */ jsx85(
       "button",
       {
         ref: triggerRef,
@@ -42073,11 +42154,11 @@ function PresentationModeControl() {
           event.preventDefault();
           openMenu();
         },
-        children: /* @__PURE__ */ jsx84("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx84("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
+        children: /* @__PURE__ */ jsx85("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx85("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
       }
     ),
     open && anchor ? createPortal17(
-      /* @__PURE__ */ jsx84(
+      /* @__PURE__ */ jsx85(
         "div",
         {
           ref: menuRef,
@@ -42123,24 +42204,24 @@ function PresentationModeControl() {
                   if (!alreadyThere) void start(option.target);
                 },
                 children: [
-                  /* @__PURE__ */ jsx84(
+                  /* @__PURE__ */ jsx85(
                     "span",
                     {
                       className: "squisq-use-mode-menu-icon squisq-presentation-menu-icon",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsx84(Icon, { icon: option.icon })
+                      children: /* @__PURE__ */ jsx85(Icon, { icon: option.icon })
                     }
                   ),
                   /* @__PURE__ */ jsxs68("span", { className: "squisq-use-mode-menu-copy squisq-presentation-menu-copy", children: [
-                    /* @__PURE__ */ jsx84("span", { className: "squisq-use-mode-menu-label squisq-presentation-menu-label", children: option.label }),
-                    /* @__PURE__ */ jsx84("span", { className: "squisq-use-mode-menu-summary squisq-presentation-menu-summary", children: disabled ? "Full screen is unavailable." : option.summary })
+                    /* @__PURE__ */ jsx85("span", { className: "squisq-use-mode-menu-label squisq-presentation-menu-label", children: option.label }),
+                    /* @__PURE__ */ jsx85("span", { className: "squisq-use-mode-menu-summary squisq-presentation-menu-summary", children: disabled ? "Full screen is unavailable." : option.summary })
                   ] }),
-                  /* @__PURE__ */ jsx84(
+                  /* @__PURE__ */ jsx85(
                     "span",
                     {
                       className: "squisq-use-mode-menu-check squisq-presentation-menu-check",
                       "aria-hidden": "true",
-                      children: isSelected && /* @__PURE__ */ jsx84(Icon, { icon: "fa-solid fa-check" })
+                      children: isSelected && /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-check" })
                     }
                   )
                 ]
@@ -42160,12 +42241,12 @@ 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
 } from "react";
-import { jsx as jsx85, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs69 } from "react/jsx-runtime";
 var PrintModeContext = createContext8(null);
 function usePrintMode() {
   const value = useContext8(PrintModeContext);
@@ -42230,7 +42311,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";
@@ -42239,10 +42320,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;
@@ -42276,7 +42357,7 @@ function PrintModeProvider({ rootRef, children }) {
     }),
     [active, close, open, print, registerPrintHandler, slidesPerPage]
   );
-  return /* @__PURE__ */ jsx85(PrintModeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx86(PrintModeContext.Provider, { value, children });
 }
 function PrintModeControl() {
   const { open } = usePrintMode();
@@ -42289,8 +42370,8 @@ function PrintModeControl() {
       "aria-label": "Print",
       "data-tooltip": "Print",
       children: [
-        /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-print" }),
-        /* @__PURE__ */ jsx85("span", { children: "Print" })
+        /* @__PURE__ */ jsx86(Icon, { icon: "fa-solid fa-print" }),
+        /* @__PURE__ */ jsx86("span", { children: "Print" })
       ]
     }
   );
@@ -42300,8 +42381,8 @@ function PrintPreviewToolbar() {
   const { activeDisplayMode } = usePreviewSettings();
   const { slidesPerPage, setSlidesPerPage, print, close } = usePrintMode();
   return /* @__PURE__ */ jsxs69("div", { className: "squisq-print-toolbar", "aria-label": "Print preview controls", children: [
-    /* @__PURE__ */ jsx85("span", { className: "squisq-print-toolbar-title", children: "Print preview" }),
-    activeDisplayMode === "slideshow" && /* @__PURE__ */ jsx85("div", { className: "squisq-print-density", role: "group", "aria-label": "Slides per page", children: SLIDES_PER_PAGE_OPTIONS.map((value) => /* @__PURE__ */ jsxs69(
+    /* @__PURE__ */ jsx86("span", { className: "squisq-print-toolbar-title", children: "Print preview" }),
+    activeDisplayMode === "slideshow" && /* @__PURE__ */ jsx86("div", { className: "squisq-print-density", role: "group", "aria-label": "Slides per page", children: SLIDES_PER_PAGE_OPTIONS.map((value) => /* @__PURE__ */ jsxs69(
       "button",
       {
         type: "button",
@@ -42310,7 +42391,7 @@ function PrintPreviewToolbar() {
         "aria-label": `${value} ${value === 1 ? "slide" : "slides"} per page`,
         onClick: () => setSlidesPerPage(value),
         children: [
-          /* @__PURE__ */ jsx85("span", { children: value }),
+          /* @__PURE__ */ jsx86("span", { children: value }),
           /* @__PURE__ */ jsxs69("span", { className: "squisq-print-density-label", children: [
             " ",
             value === 1 ? "slide" : "slides",
@@ -42320,22 +42401,22 @@ function PrintPreviewToolbar() {
       },
       value
     )) }),
-    /* @__PURE__ */ jsx85("div", { className: "squisq-print-toolbar-spacer" }),
+    /* @__PURE__ */ jsx86("div", { className: "squisq-print-toolbar-spacer" }),
     /* @__PURE__ */ jsxs69("button", { type: "button", className: "squisq-print-action", onClick: print, children: [
-      /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-print" }),
-      /* @__PURE__ */ jsx85("span", { children: "Print" })
+      /* @__PURE__ */ jsx86(Icon, { icon: "fa-solid fa-print" }),
+      /* @__PURE__ */ jsx86("span", { children: "Print" })
     ] }),
     /* @__PURE__ */ jsxs69("button", { type: "button", className: "squisq-print-close", onClick: close, children: [
-      /* @__PURE__ */ jsx85(Icon, { icon: "fa-solid fa-xmark" }),
-      /* @__PURE__ */ jsx85("span", { children: "Close" })
+      /* @__PURE__ */ jsx86(Icon, { icon: "fa-solid fa-xmark" }),
+      /* @__PURE__ */ jsx86("span", { children: "Close" })
     ] })
   ] });
 }
 
 // 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,
+  BlockRenderer as BlockRenderer5,
   FlashcardFaceView,
   LinearDocView,
   useDocPlayback,
@@ -42346,7 +42427,7 @@ import {
 } from "@bendyline/squisq/schemas";
 import { expandCoverBlock as expandCoverBlock2, materializeFlashcards } from "@bendyline/squisq/doc";
 import { resolveTransformStyle } from "@bendyline/squisq/transform";
-import { jsx as jsx86, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs70 } from "react/jsx-runtime";
 function chunk(values, size) {
   const groups = [];
   for (let index2 = 0; index2 < values.length; index2 += size) {
@@ -42390,7 +42471,7 @@ function PrintPreview({
     [contentDoc]
   );
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect67(() => {
+  useEffect68(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -42400,7 +42481,7 @@ function PrintPreview({
   }, [isTextDocument, registerPrintHandler]);
   const title = contentDoc?.frontmatter?.title ?? contentDoc?.startBlock?.title ?? void 0;
   if (isTextDocument) {
-    return /* @__PURE__ */ jsx86("div", { className: "squisq-print-preview squisq-print-preview--document", children: /* @__PURE__ */ jsx86("div", { className: "squisq-print-document-paper", children: /* @__PURE__ */ jsx86(
+    return /* @__PURE__ */ jsx87("div", { className: "squisq-print-preview squisq-print-preview--document", children: /* @__PURE__ */ jsx87("div", { className: "squisq-print-document-paper", children: /* @__PURE__ */ jsx87(
       PlainHtmlPreview,
       {
         markdown: documentMarkdown,
@@ -42415,8 +42496,8 @@ function PrintPreview({
   }
   if (displayMode === "linear") {
     return /* @__PURE__ */ jsxs70("div", { className: "squisq-print-preview squisq-print-preview--page", children: [
-      /* @__PURE__ */ jsx86("style", { children: "@page { margin: 0; }" }),
-      /* @__PURE__ */ jsx86("div", { className: "squisq-print-page-paper", children: /* @__PURE__ */ jsx86(
+      /* @__PURE__ */ jsx87("style", { children: "@page { margin: 0; }" }),
+      /* @__PURE__ */ jsx87("div", { className: "squisq-print-page-paper", children: /* @__PURE__ */ jsx87(
         LinearDocView,
         {
           className: "squisq-print-linear",
@@ -42451,7 +42532,7 @@ function PrintPreview({
           "--squisq-print-flashcard-surface": theme.colors.backgroundLight
         },
         children: [
-          /* @__PURE__ */ jsx86("style", { children: "@page { size: landscape; margin: 0; }" }),
+          /* @__PURE__ */ jsx87("style", { children: "@page { size: landscape; margin: 0; }" }),
           flashcardDeck?.cards.map((card, index2) => /* @__PURE__ */ jsxs70("article", { className: "squisq-print-flashcard-sheet", children: [
             /* @__PURE__ */ jsxs70("header", { children: [
               /* @__PURE__ */ jsxs70("span", { children: [
@@ -42460,25 +42541,25 @@ function PrintPreview({
                 " of ",
                 flashcardDeck.cards.length
               ] }),
-              card.label && /* @__PURE__ */ jsx86("strong", { children: card.label })
+              card.label && /* @__PURE__ */ jsx87("strong", { children: card.label })
             ] }),
             /* @__PURE__ */ jsxs70("div", { className: "squisq-print-flashcard-pair", children: [
               /* @__PURE__ */ jsxs70("section", { className: "squisq-print-flashcard-face", "aria-label": "Question side", children: [
-                /* @__PURE__ */ jsx86("small", { children: "Front" }),
-                /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: card.front }),
-                card.kind === "multiple-choice" && /* @__PURE__ */ jsx86("ol", { className: "squisq-print-flashcard-choices", children: card.choices?.map((choice) => /* @__PURE__ */ jsx86("li", { children: /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: choice.content }) }, choice.id)) })
+                /* @__PURE__ */ jsx87("small", { children: "Front" }),
+                /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: card.front }),
+                card.kind === "multiple-choice" && /* @__PURE__ */ jsx87("ol", { className: "squisq-print-flashcard-choices", children: card.choices?.map((choice) => /* @__PURE__ */ jsx87("li", { children: /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: choice.content }) }, choice.id)) })
               ] }),
               /* @__PURE__ */ jsxs70("section", { className: "squisq-print-flashcard-face", "aria-label": "Answer side", children: [
-                /* @__PURE__ */ jsx86("small", { children: "Back" }),
-                /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: card.back }),
+                /* @__PURE__ */ jsx87("small", { children: "Back" }),
+                /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: card.back }),
                 card.explanation && /* @__PURE__ */ jsxs70("div", { className: "squisq-print-flashcard-explanation", children: [
-                  /* @__PURE__ */ jsx86("small", { children: "Explanation" }),
-                  /* @__PURE__ */ jsx86(FlashcardFaceView, { ...faceProps, face: card.explanation })
+                  /* @__PURE__ */ jsx87("small", { children: "Explanation" }),
+                  /* @__PURE__ */ jsx87(FlashcardFaceView, { ...faceProps, face: card.explanation })
                 ] })
               ] })
             ] })
           ] }, card.id)),
-          (!flashcardDeck || flashcardDeck.cards.length === 0) && /* @__PURE__ */ jsx86("p", { className: "squisq-print-empty", children: "Nothing to print." })
+          (!flashcardDeck || flashcardDeck.cards.length === 0) && /* @__PURE__ */ jsx87("p", { className: "squisq-print-empty", children: "Nothing to print." })
         ]
       }
     );
@@ -42498,15 +42579,15 @@ function PrintPreview({
       "data-slides-per-page": density,
       style: previewStyle,
       children: [
-        /* @__PURE__ */ jsx86("style", { children: `@page { size: ${orientation}; margin: 0; }` }),
-        sheets.map((sheet, pageIndex) => /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx87("style", { children: `@page { size: ${orientation}; margin: 0; }` }),
+        sheets.map((sheet, pageIndex) => /* @__PURE__ */ jsx87(
           "div",
           {
             className: "squisq-print-sheet",
             "data-slides-per-page": density,
             "aria-label": `Print page ${pageIndex + 1}`,
-            children: sheet.map((block) => /* @__PURE__ */ jsx86("div", { className: "squisq-print-slide-cell", children: /* @__PURE__ */ jsx86("div", { className: "squisq-print-slide-frame", children: /* @__PURE__ */ jsx86(
-              BlockRenderer4,
+            children: sheet.map((block) => /* @__PURE__ */ jsx87("div", { className: "squisq-print-slide-cell", children: /* @__PURE__ */ jsx87("div", { className: "squisq-print-slide-frame", children: /* @__PURE__ */ jsx87(
+              BlockRenderer5,
               {
                 block,
                 blockTime: Math.max(0, block.duration),
@@ -42519,7 +42600,7 @@ function PrintPreview({
           },
           `${density}-${pageIndex}`
         )),
-        sheets.length === 0 && /* @__PURE__ */ jsx86("p", { className: "squisq-print-empty", children: "Nothing to print." })
+        sheets.length === 0 && /* @__PURE__ */ jsx87("p", { className: "squisq-print-empty", children: "Nothing to print." })
       ]
     }
   );
@@ -42529,7 +42610,7 @@ function PrintPreview({
 import {
   createContext as createContext9,
   useContext as useContext9,
-  useEffect as useEffect68,
+  useEffect as useEffect69,
   useMemo as useMemo56,
   useState as useState79
 } from "react";
@@ -42573,7 +42654,7 @@ function collectSlideshowDataSources(doc) {
 }
 
 // src/slideshow/SlideshowDataGrid.tsx
-import { Fragment as Fragment28, jsx as jsx87 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx88 } from "react/jsx-runtime";
 var EMPTY_CONTEXT = {
   container: null,
   mediaRevision: 0,
@@ -42591,7 +42672,7 @@ function SlideshowDataGridProvider({
     () => ({ container: container ?? null, mediaRevision, sources }),
     [container, mediaRevision, sources]
   );
-  return /* @__PURE__ */ jsx87(SlideshowDataGridContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx88(SlideshowDataGridContext.Provider, { value, children });
 }
 var EMPTY_VIEW = { sort: [], filter: [] };
 function sourceKey(source) {
@@ -42636,7 +42717,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);
@@ -42645,7 +42726,7 @@ function SlideshowDataGridRenderer({
       active = false;
     };
   }, []);
-  useEffect68(() => {
+  useEffect69(() => {
     if (!container || !source || !gridModule) {
       setRemote({ key: activeSourceKey, status: "idle" });
       return;
@@ -42696,14 +42777,14 @@ 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]);
-  if (!provider || !ingest || !gridModule) return /* @__PURE__ */ jsx87(Fragment28, { children: fallback });
+  useEffect69(() => setView(initialView), [initialView, provider]);
+  if (!provider || !ingest || !gridModule) return /* @__PURE__ */ jsx88(Fragment28, { children: fallback });
   const { style } = layer.content;
   const rowHeight = Math.max(32, style.fontSize * 2.1);
   const footerHeight = Math.max(28, style.fontSize * 1.5);
@@ -42732,7 +42813,7 @@ function SlideshowDataGridRenderer({
     "--squisq-grid-accent": style.headerBackground,
     "--squisq-grid-resize-handle": style.headerBackground
   };
-  return /* @__PURE__ */ jsx87("div", { className: "squisq-slideshow-data-grid", style: gridStyle, children: /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88("div", { className: "squisq-slideshow-data-grid", style: gridStyle, children: /* @__PURE__ */ jsx88(
     gridModule.DataGrid,
     {
       provider,
@@ -42748,7 +42829,7 @@ function SlideshowDataGridRenderer({
 
 // src/PreviewPanel.tsx
 import { useProcessedAudio as useProcessedAudio3 } from "@bendyline/squisq-video-react/media-edit";
-import { jsx as jsx88, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs71 } from "react/jsx-runtime";
 function PreviewPanel({
   basePath = "/",
   className,
@@ -42839,11 +42920,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;
@@ -42906,22 +42987,22 @@ function PreviewPanel({
     presentation?.popupRoot
   ]);
   if (isParsing && !isNarrateMode && !previewDoc) {
-    return /* @__PURE__ */ jsx88("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx88("p", { children: "Parsing\u2026" }) });
+    return /* @__PURE__ */ jsx89("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx89("p", { children: "Parsing\u2026" }) });
   }
   if (parseError && !isNarrateMode) {
     return /* @__PURE__ */ jsxs71("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: [
-      /* @__PURE__ */ jsx88("h3", { children: "Parse Error" }),
-      /* @__PURE__ */ jsx88("pre", { children: parseError })
+      /* @__PURE__ */ jsx89("h3", { children: "Parse Error" }),
+      /* @__PURE__ */ jsx89("pre", { children: parseError })
     ] });
   }
   if (!previewDoc && !isDocumentMode && !isNarrateMode) {
-    return /* @__PURE__ */ jsx88("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx88("p", { children: "No content to preview. Start typing in the editor." }) });
+    return /* @__PURE__ */ jsx89("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx89("p", { children: "No content to preview. Start typing in the editor." }) });
   }
   const fillsContainer = printMode?.active || isDocumentMode || isPageMode || isNarrateMode || isFlashcardsMode ? "stretch" : "center";
   const audienceWindowOpen = presentation?.activeTarget === "window";
   const renderSurface = (audience) => {
     if (!audience && printMode?.active) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         PrintPreview,
         {
           displayMode: activeDisplayMode,
@@ -42939,7 +43020,7 @@ function PreviewPanel({
       );
     }
     if (isDocumentMode) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         PlainHtmlPreview,
         {
           markdown: documentMarkdown,
@@ -42958,7 +43039,7 @@ function PreviewPanel({
     }
     if (isNarrateMode) {
       if (audience) return null;
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         TeleprompterView,
         {
           doc,
@@ -42977,7 +43058,7 @@ function PreviewPanel({
       );
     }
     if (isPageMode) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         LinearDocView2,
         {
           doc: contentDoc ?? doc,
@@ -42994,7 +43075,7 @@ function PreviewPanel({
       );
     }
     if (isFlashcardsMode) {
-      return /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89(
         FlashcardView,
         {
           doc: contentDoc ?? doc,
@@ -43009,7 +43090,7 @@ function PreviewPanel({
       );
     }
     if (isDashboardMode) {
-      return /* @__PURE__ */ jsx88("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx88(
+      return /* @__PURE__ */ jsx89("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx89(
         DashboardView,
         {
           doc: contentDoc ?? doc,
@@ -43024,10 +43105,10 @@ function PreviewPanel({
       ) });
     }
     if (audience && !followerAudioController) {
-      return /* @__PURE__ */ jsx88("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
+      return /* @__PURE__ */ jsx89("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
     }
     const audienceCaptionMode = playbackState?.captionMode;
-    return /* @__PURE__ */ jsx88(
+    return /* @__PURE__ */ jsx89(
       DocPlayer2,
       {
         doc: previewDoc,
@@ -43078,7 +43159,7 @@ function PreviewPanel({
       container: workspaceContainer,
       mediaRevision,
       children: [
-        /* @__PURE__ */ jsx88(
+        /* @__PURE__ */ jsx89(
           "div",
           {
             className: `squisq-preview-container ${className || ""}`,
@@ -43091,16 +43172,16 @@ function PreviewPanel({
               overflow: "hidden",
               background: "var(--squisq-bg)"
             },
-            children: /* @__PURE__ */ jsx88("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
+            children: /* @__PURE__ */ jsx89("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
           }
         ),
         audienceWindowOpen && presentation?.popupRoot && !isNarrateMode ? createPortal18(
-          /* @__PURE__ */ jsx88(
+          /* @__PURE__ */ jsx89(
             "div",
             {
               className: "squisq-editor-shell squisq-presentation-window",
               "data-theme": colorScheme,
-              children: /* @__PURE__ */ jsx88("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx88(
+              children: /* @__PURE__ */ jsx89("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx89(
                 "div",
                 {
                   ref: popupSurfaceRef,
@@ -43120,10 +43201,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";
-import { jsx as jsx89, jsxs as jsxs72 } from "react/jsx-runtime";
+
+// src/MediaPreviewDialog.tsx
+import { useEffect as useEffect71, useId as useId16, useRef as useRef64, useState as useState81 } from "react";
+import { jsx as jsx90, jsxs as jsxs72 } from "react/jsx-runtime";
+function MediaPreviewDialog({
+  kind,
+  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__ */ jsx90("div", { className: "squisq-media-preview-message", children: "This file can\u2019t be previewed." });
+  } else if (src === null) {
+    body = /* @__PURE__ */ jsx90("div", { className: "squisq-media-preview-message", children: "Loading\u2026" });
+  } else if (kind === "image") {
+    body = /* @__PURE__ */ jsx90(ImageViewer, { src, alt: name, theme: isDark ? "dark" : "light" });
+  } else if (kind === "video") {
+    body = /* @__PURE__ */ jsx90(
+      "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__ */ jsx90("span", { className: "squisq-media-preview-audio-icon", "aria-hidden": "true", children: "\u{1F50A}" }),
+      /* @__PURE__ */ jsx90("audio", { src, controls: true, autoPlay: true, onError: () => setPlaybackFailed(true) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx90(
+    "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__ */ jsx90("span", { id: titleId, className: "squisq-media-preview-title", title: name, children: name }),
+              /* @__PURE__ */ jsx90("span", { className: "squisq-media-preview-detail", children: detail }),
+              /* @__PURE__ */ jsx90(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-media-preview-close",
+                  onClick: onClose,
+                  "aria-label": "Close",
+                  children: "\xD7"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx90("div", { className: "squisq-media-preview-body", children: body })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/MediaBin.tsx
+import { Fragment as Fragment29, jsx as jsx91, jsxs as jsxs73 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -43195,23 +43364,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()));
@@ -43230,7 +43400,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect70(() => {
+  useEffect72(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -43251,7 +43421,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect70(() => {
+  useEffect72(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -43408,6 +43578,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;
@@ -43417,189 +43608,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__ */ jsx91("span", { className: "squisq-media-bin-action-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-record-dot" }) }),
+                    /* @__PURE__ */ jsx91("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__ */ jsx91("span", { className: "squisq-media-bin-action-icon", children: "+" }),
+                    /* @__PURE__ */ jsx91("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__ */ jsx91("br", {}),
+              "Load a content zip or select a storage slot."
+            ] }),
+            mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx91("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__ */ jsx91(
+                      "img",
+                      {
+                        src: thumb,
+                        alt: basename,
+                        className: "squisq-media-bin-thumb",
+                        draggable: false
+                      }
+                    ) : /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
+                    /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-meta", children: [
+                      /* @__PURE__ */ jsx91("div", { className: "squisq-media-bin-name", children: basename }),
+                      /* @__PURE__ */ jsxs73("div", { className: "squisq-media-bin-detail-row", children: [
+                        /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
+                        isUnused && /* @__PURE__ */ jsx91("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
+                      ] })
+                    ] }),
+                    allowBinaryDownloads && /* @__PURE__ */ jsx91(
+                      "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__ */ jsx91("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__ */ jsx91("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
+            /* @__PURE__ */ jsx91("strong", { children: "Drop media here" }),
+            /* @__PURE__ */ jsx91("span", { children: "Attach to this document" })
+          ] }),
+          contextMenu && /* @__PURE__ */ jsx91(
+            "div",
+            {
+              ref: contextMenuRef,
+              className: "squisq-media-bin-context-menu",
+              role: "menu",
+              "aria-label": `${contextMenu.entry.name} actions`,
+              style: contextMenuStyle,
+              children: /* @__PURE__ */ jsx91(
+                "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__ */ jsx91(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              style: { display: "none" },
+              onChange: handleFileChange
+            }
+          )
+        ]
+      }
+    ),
+    preview && previewKind !== "file" && /* @__PURE__ */ jsx91(
+      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 jsx92, jsxs as jsxs74 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
   zoneProps,
@@ -43607,8 +43826,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__ */ jsx92("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs74("div", { className: "squisq-drop-overlay-inner", children: [
+    showMedia && /* @__PURE__ */ jsx92(
       DropZone,
       {
         target: "media",
@@ -43620,8 +43839,8 @@ function DropZoneOverlay({
         variant: "media"
       }
     ),
-    showText && /* @__PURE__ */ jsxs73(Fragment29, { children: [
-      /* @__PURE__ */ jsx90(
+    showText && /* @__PURE__ */ jsxs74(Fragment30, { children: [
+      /* @__PURE__ */ jsx92(
         DropZone,
         {
           target: "insert",
@@ -43632,7 +43851,7 @@ function DropZoneOverlay({
           variant: "insert"
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx92(
         DropZone,
         {
           target: "replace",
@@ -43655,9 +43874,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: [
@@ -43690,16 +43909,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__ */ jsx92("span", { className: "squisq-drop-zone-icon", children: icon }),
+        /* @__PURE__ */ jsx92("span", { className: "squisq-drop-zone-label", children: label }),
+        /* @__PURE__ */ jsx92("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
@@ -43712,16 +43931,16 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx93 } 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;
@@ -43733,7 +43952,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect71(() => {
+  useEffect73(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -43815,7 +44034,7 @@ function TooltipLayer() {
   }, []);
   if (!state) return null;
   return createPortal19(
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx93(
       "div",
       {
         role: "tooltip",
@@ -43835,18 +44054,18 @@ 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 { VIEWPORT_PRESETS as VIEWPORT_PRESETS8 } 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 jsx94 } from "react/jsx-runtime";
 function BlockPreviewPanel({ basePath = "/" }) {
   const { doc, activeBlockStartLine, mediaProvider, workspaceContainer, fileName, mediaRevision } = useEditorContext();
   const previewSettings = usePreviewSettingsOptional();
   const theme = previewSettings?.activeTheme ?? DEFAULT_THEME7;
-  const viewport = previewSettings?.activeViewport ?? VIEWPORT_PRESETS7.landscape;
+  const viewport = previewSettings?.activeViewport ?? VIEWPORT_PRESETS8.landscape;
   const projection = usePreviewProjection(doc, "", workspaceContainer, fileName, mediaRevision);
   const previewDoc = projection?.contentDoc ?? doc;
   const block = useMemo58(() => {
@@ -43860,12 +44079,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__ */ jsx94("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx94(
     "div",
     {
       className: "squisq-block-preview-frame",
       style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-      children: /* @__PURE__ */ jsx92(
+      children: /* @__PURE__ */ jsx94(
         BlockThumbnail,
         {
           visual,
@@ -43879,23 +44098,23 @@ 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 { VIEWPORT_PRESETS as VIEWPORT_PRESETS8 } from "@bendyline/squisq/schemas";
+import { useCallback as useCallback56, useRef as useRef67 } from "react";
+import { VIEWPORT_PRESETS as VIEWPORT_PRESETS9 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks7 } from "@bendyline/squisq/doc";
-import { BlockRenderer as BlockRenderer5, MediaContext as MediaContext6 } from "@bendyline/squisq-react";
-import { Fragment as Fragment30, jsx as jsx93, jsxs as jsxs74 } from "react/jsx-runtime";
+import { BlockRenderer as BlockRenderer6, MediaContext as MediaContext7 } from "@bendyline/squisq-react";
+import { Fragment as Fragment31, jsx as jsx95, jsxs as jsxs75 } from "react/jsx-runtime";
 function BlockPreviewList({
   basePath = "/",
-  viewport = VIEWPORT_PRESETS8.landscape,
+  viewport = VIEWPORT_PRESETS9.landscape,
   mediaProvider = null,
   onNavigate
 }) {
   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);
@@ -43922,9 +44141,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__ */ jsx95("div", { className: "squisq-preview-list-empty", children: /* @__PURE__ */ jsx95("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__ */ jsx95(MediaContext7.Provider, { value: mediaProvider, children: /* @__PURE__ */ jsx95("ul", { ref: listRef, className: "squisq-preview-list", "aria-label": "Block previews", children: items.map((item) => /* @__PURE__ */ jsx95("li", { children: /* @__PURE__ */ jsxs75(
     "button",
     {
       type: "button",
@@ -43932,21 +44151,21 @@ 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__ */ jsx95("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
+          item.headingText && /* @__PURE__ */ jsxs75(Fragment31, { children: [
+            /* @__PURE__ */ jsx95("span", { className: "squisq-inline-preview-card-sep", "aria-hidden": "true", children: "\u2014" }),
+            /* @__PURE__ */ jsx95("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
           ] })
         ] }),
-        /* @__PURE__ */ jsx93(
+        /* @__PURE__ */ jsx95(
           "span",
           {
             className: "squisq-inline-preview-card-svg",
             "aria-hidden": "true",
             style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-            children: /* @__PURE__ */ jsx93(
-              BlockRenderer5,
+            children: /* @__PURE__ */ jsx95(
+              BlockRenderer6,
               {
                 block: item.block,
                 buildPlayback: "all",
@@ -43963,7 +44182,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;
@@ -43978,9 +44197,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;
@@ -44086,7 +44305,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 jsx96, jsxs as jsxs76 } from "react/jsx-runtime";
 var PANEL_LABELS = {
   outline: "Outline",
   previews: "Block previews"
@@ -44104,17 +44323,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);
@@ -44139,14 +44358,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;
@@ -44159,7 +44378,7 @@ function NavigationSheet({
       for (const sibling of siblings) sibling.inert = false;
     };
   }, [open]);
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs76(
     "div",
     {
       ref: sheetRef,
@@ -44167,8 +44386,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__ */ jsx96("div", { ref: scrimRef, className: "squisq-navigation-sheet-scrim", onClick: close }),
+        /* @__PURE__ */ jsx96(
           "div",
           {
             ref: panelRef,
@@ -44176,9 +44395,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__ */ jsx96("div", { className: "squisq-navigation-sheet-tabs", role: "tablist", children: PANELS.map((option) => /* @__PURE__ */ jsx96(
                   "button",
                   {
                     type: "button",
@@ -44192,25 +44411,25 @@ function NavigationSheet({
                   },
                   option
                 )) }),
-                /* @__PURE__ */ jsx94(
+                /* @__PURE__ */ jsx96(
                   "button",
                   {
                     type: "button",
                     className: "squisq-navigation-sheet-close",
                     "aria-label": "Close",
                     onClick: close,
-                    children: /* @__PURE__ */ jsx94(Icon, { icon: "xmark" })
+                    children: /* @__PURE__ */ jsx96(Icon, { icon: "xmark" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx94(
+              /* @__PURE__ */ jsx96(
                 "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__ */ jsx96(OutlinePanel, { presentation: "sheet", readOnly, onNavigate: close }) : /* @__PURE__ */ jsx96(
                     BlockPreviewList,
                     {
                       basePath,
@@ -44229,7 +44448,7 @@ function NavigationSheet({
 }
 
 // src/proofing/ProofingPanel.tsx
-import { jsx as jsx95, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs77 } from "react/jsx-runtime";
 var CATEGORY_LABELS = {
   spelling: "Spelling",
   grammar: "Grammar",
@@ -44239,14 +44458,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__ */ jsx97("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__ */ jsx97(
           "button",
           {
             type: "button",
@@ -44258,7 +44477,7 @@ function ProofingPanel() {
             children: "\u2191"
           }
         ),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx97(
           "button",
           {
             type: "button",
@@ -44270,7 +44489,7 @@ function ProofingPanel() {
             children: "\u2193"
           }
         ),
-        /* @__PURE__ */ jsx95(
+        /* @__PURE__ */ jsx97(
           "button",
           {
             type: "button",
@@ -44283,20 +44502,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__ */ jsx97("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__ */ jsx97("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__ */ jsx97("div", { className: "squisq-proof-panel-empty", children: "No issues found." }),
+    /* @__PURE__ */ jsx97("ul", { className: "squisq-proof-panel-list", children: findings.map((finding) => /* @__PURE__ */ jsx97("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__ */ jsx97(
             "span",
             {
               className: `squisq-proof-dot squisq-proof-dot--${finding.category}`,
@@ -44304,9 +44523,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__ */ jsx97("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
+            /* @__PURE__ */ jsx97("span", { className: "squisq-proof-panel-message", children: proofMessageText(finding) })
           ] })
         ]
       }
@@ -44315,13 +44534,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 jsx98, jsxs as jsxs78 } from "react/jsx-runtime";
 function ImageEditModal({
   relativePath,
   container,
@@ -44332,8 +44551,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;
@@ -44348,9 +44567,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);
@@ -44380,7 +44599,7 @@ function ImageEditModal({
     },
     [mediaProvider, relativePath, onSaved]
   );
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx98(
     "div",
     {
       ref: modalRef,
@@ -44392,11 +44611,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__ */ jsx98("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
+          /* @__PURE__ */ jsx98("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
+          /* @__PURE__ */ jsx98(
             "button",
             {
               type: "button",
@@ -44408,10 +44627,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__ */ jsx98("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__ */ jsx98("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx98("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx98(
           ImageEditor,
           {
             filesContainer: sidecar,
@@ -44472,18 +44691,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
@@ -44582,7 +44801,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 jsx99, jsxs as jsxs79 } from "react/jsx-runtime";
 var STAGES = [
   {
     id: "highpass",
@@ -44636,8 +44855,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();
@@ -44654,12 +44873,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(() => {
@@ -44677,8 +44896,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;
@@ -44717,7 +44936,7 @@ function usePreviewPlayer(preview) {
     },
     [duration, playing, play]
   );
-  useEffect75(() => {
+  useEffect77(() => {
     if (!playing) return;
     let frame = requestAnimationFrame(function tick() {
       setPosition(currentOffset());
@@ -44728,26 +44947,26 @@ function usePreviewPlayer(preview) {
   return { playing, play, stop, seek, position, duration };
 }
 function PlayIcon() {
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx99(
     "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__ */ jsx99("path", { d: "M2 1 9 5 2 9Z" })
     }
   );
 }
 function StopIcon() {
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx99(
     "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__ */ jsx99("rect", { x: "1.5", y: "1.5", width: "7", height: "7", rx: "1" })
     }
   );
 }
@@ -44765,14 +44984,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();
@@ -44797,23 +45016,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__ */ jsx99("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("voice") }), children: "Clean up voice" }),
+      /* @__PURE__ */ jsx99("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("levels") }), children: "Levels only" }),
+      /* @__PURE__ */ jsx99("button", { type: "button", onClick: () => onChange({ ...draft, fx: presetFx("none") }), children: "None" })
     ] }),
-    /* @__PURE__ */ jsx97("ul", { className: "squisq-media-edit-stages", children: STAGES.map((stage) => {
+    /* @__PURE__ */ jsx99("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__ */ jsx99(
                 "input",
                 {
                   type: "checkbox",
@@ -44821,9 +45040,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__ */ jsx99("span", { className: "squisq-media-edit-stage__label", children: stage.label })
             ] }),
-            /* @__PURE__ */ jsx97(
+            /* @__PURE__ */ jsx99(
               "input",
               {
                 id: inputId,
@@ -44839,9 +45058,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__ */ jsx99("output", { className: "squisq-media-edit-stage__value", htmlFor: inputId, children: stage.format(s.value) }),
+            /* @__PURE__ */ jsx99("p", { className: "squisq-media-edit-stage__hint", children: stage.hint }),
+            stage.id === "loudness" && s.enabled && /* @__PURE__ */ jsx99("div", { className: "squisq-media-edit-chips", role: "group", "aria-label": "Targets", children: LOUDNESS_PRESETS.map((preset) => /* @__PURE__ */ jsxs79(
               "button",
               {
                 type: "button",
@@ -44861,14 +45080,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__ */ jsx99(
           "input",
           {
             type: "range",
@@ -44880,7 +45099,7 @@ function MediaEditAudioSection({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx97("div", { className: "squisq-media-edit-preview__actions", children: /* @__PURE__ */ jsx97(
+      /* @__PURE__ */ jsx99("div", { className: "squisq-media-edit-preview__actions", children: /* @__PURE__ */ jsx99(
         "button",
         {
           type: "button",
@@ -44889,10 +45108,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__ */ jsx99("span", { className: "squisq-media-edit-playback__label", children: player.playing ? `${player.playing === "original" ? "Original" : "Processed"} from ${Math.round(preview.startSec)} s` : "Stopped" }),
+          /* @__PURE__ */ jsx99(
             "input",
             {
               type: "range",
@@ -44906,14 +45125,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",
@@ -44921,12 +45140,12 @@ function MediaEditAudioSection({
               disabled: previewing,
               onClick: () => player.play("original"),
               children: [
-                /* @__PURE__ */ jsx97(PlayIcon, {}),
+                /* @__PURE__ */ jsx99(PlayIcon, {}),
                 "Original"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs78(
+          /* @__PURE__ */ jsxs79(
             "button",
             {
               type: "button",
@@ -44934,26 +45153,26 @@ function MediaEditAudioSection({
               disabled: previewing,
               onClick: () => player.play("processed"),
               children: [
-                /* @__PURE__ */ jsx97(PlayIcon, {}),
+                /* @__PURE__ */ jsx99(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__ */ jsx99(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__ */ jsx99("p", { className: "squisq-media-edit-note", children: "Settings changed \u2014 update the preview to hear them." }),
+      previewError && /* @__PURE__ */ jsx99("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 jsx100, jsxs as jsxs80 } from "react/jsx-runtime";
 var DEFAULT_MAX_PAUSE = 0.8;
 function formatDb(value) {
   if (value === 0) return "0 dB";
@@ -44966,11 +45185,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();
@@ -44994,10 +45213,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__ */ jsx100("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-pause`, children: "Shorten pauses longer than" }),
+      /* @__PURE__ */ jsx100(
         "input",
         {
           id: `${idPrefix}-pause`,
@@ -45010,14 +45229,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__ */ jsx100("button", { type: "button", onClick: findPauses, disabled: finding, children: finding ? "Finding pauses\u2026" : "Find pauses" }),
+      /* @__PURE__ */ jsx100(
         "button",
         {
           type: "button",
@@ -45027,11 +45246,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__ */ jsx100("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__ */ jsx100("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__ */ jsx100("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-gain`, children: "Volume" }),
+      /* @__PURE__ */ jsx100(
         "input",
         {
           id: `${idPrefix}-gain`,
@@ -45044,11 +45263,11 @@ function MediaEditTimingSection({
           onChange: (e2) => onChange({ ...draft, gain: Number(e2.target.value) })
         }
       ),
-      /* @__PURE__ */ jsx98("output", { htmlFor: `${idPrefix}-gain`, children: formatDb(draft.gain) })
+      /* @__PURE__ */ jsx100("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__ */ jsx100("label", { className: "squisq-media-edit-row__label", htmlFor: `${idPrefix}-${key}`, children: key === "fadeIn" ? "Fade in" : "Fade out" }),
+      /* @__PURE__ */ jsx100(
         "input",
         {
           id: `${idPrefix}-${key}`,
@@ -45061,7 +45280,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__ */ jsx100("output", { htmlFor: `${idPrefix}-${key}`, children: draft[key] === 0 ? "Off" : `${draft[key].toFixed(1)} s` })
     ] }, key))
   ] });
 }
@@ -45069,11 +45288,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 jsx101, 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;
@@ -45096,9 +45315,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)) }),
@@ -45153,9 +45372,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__ */ jsx101(
         "button",
         {
           type: "button",
@@ -45170,7 +45389,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
         },
         option.label
       )),
-      /* @__PURE__ */ jsx99(
+      /* @__PURE__ */ jsx101(
         "button",
         {
           type: "button",
@@ -45183,14 +45402,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__ */ jsx101(
             "video",
             {
               src,
@@ -45206,7 +45425,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx99(
+          /* @__PURE__ */ jsx101(
             "div",
             {
               className: "squisq-media-edit-crop__rect",
@@ -45217,7 +45436,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__ */ jsx101(
                 "span",
                 {
                   className: `squisq-media-edit-crop__handle squisq-media-edit-crop__handle--${handle}`,
@@ -45230,12 +45449,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__ */ jsx101("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 jsx102, jsxs as jsxs82 } from "react/jsx-runtime";
 var TABS = [
   { id: "audio", label: "Audio cleanup" },
   { id: "timing", label: "Timing" },
@@ -45257,7 +45476,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)}`,
@@ -45270,43 +45489,43 @@ function RenderStatusText({
 }) {
   switch (status.state) {
     case "ready":
-      return /* @__PURE__ */ jsx100(Fragment33, { children: "Processed audio is in use." });
+      return /* @__PURE__ */ jsx102(Fragment34, { children: "Processed audio is in use." });
     case "queued":
-      return /* @__PURE__ */ jsx100(Fragment33, { children: "Waiting to process\u2026" });
+      return /* @__PURE__ */ jsx102(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__ */ jsx102("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;
@@ -45334,7 +45553,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__ */ jsx102(
     "div",
     {
       ref: modalRef,
@@ -45343,7 +45562,7 @@ function MediaEditModal({ target, onClose }) {
       onClick: (e2) => {
         if (e2.target === e2.currentTarget) onClose();
       },
-      children: /* @__PURE__ */ jsxs81(
+      children: /* @__PURE__ */ jsxs82(
         "div",
         {
           ref: surfaceRef,
@@ -45352,11 +45571,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__ */ jsx102("span", { id: titleId, className: "squisq-media-edit-modal__title", children: title }),
+              /* @__PURE__ */ jsx102("span", { className: "squisq-media-edit-modal__path", children: target.src }),
+              renderStatus && /* @__PURE__ */ jsx102(RenderStatusBadge, { status: renderStatus }),
+              /* @__PURE__ */ jsx102(
                 "button",
                 {
                   type: "button",
@@ -45367,11 +45586,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__ */ jsx102("p", { className: "squisq-media-edit-modal__empty", children: "This clip is no longer in the document." }) : !mediaEditRenders ? /* @__PURE__ */ jsx102("p", { className: "squisq-media-edit-modal__empty", children: "Media editing needs a media folder for this document." }) : /* @__PURE__ */ jsxs82(Fragment34, { children: [
+              /* @__PURE__ */ jsx102("div", { className: "squisq-media-edit-tabs", role: "tablist", "aria-label": "Edit sections", children: tabs.map((tab, index2) => {
                 const selected = tab.id === activeTab;
                 const edited = tabHasEdits(tab.id, draft);
-                return /* @__PURE__ */ jsxs81(
+                return /* @__PURE__ */ jsxs82(
                   "button",
                   {
                     ref: (el) => {
@@ -45390,21 +45609,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__ */ jsx102("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__ */ jsx102(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("audio"),
                     "aria-labelledby": tabId("audio"),
                     hidden: activeTab !== "audio",
-                    children: /* @__PURE__ */ jsx100(
+                    children: /* @__PURE__ */ jsx102(
                       MediaEditAudioSection,
                       {
                         item,
@@ -45416,14 +45635,14 @@ function MediaEditModal({ target, onClose }) {
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx100(
+                /* @__PURE__ */ jsx102(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("timing"),
                     "aria-labelledby": tabId("timing"),
                     hidden: activeTab !== "timing",
-                    children: /* @__PURE__ */ jsx100(
+                    children: /* @__PURE__ */ jsx102(
                       MediaEditTimingSection,
                       {
                         item,
@@ -45435,17 +45654,17 @@ function MediaEditModal({ target, onClose }) {
                     )
                   }
                 ),
-                item.kind === "video" && /* @__PURE__ */ jsx100(
+                item.kind === "video" && /* @__PURE__ */ jsx102(
                   "div",
                   {
                     role: "tabpanel",
                     id: panelId("frame"),
                     "aria-labelledby": tabId("frame"),
                     hidden: activeTab !== "frame",
-                    children: /* @__PURE__ */ jsx100(MediaEditFrameSection, { item, draft, onChange: setDraft })
+                    children: /* @__PURE__ */ jsx102(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",
@@ -45455,16 +45674,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__ */ jsx102("p", { className: "squisq-media-edit-status", role: "status", "data-state": renderStatus?.state, children: renderStatus && item && mediaEditRenders && /* @__PURE__ */ jsx102(
                 RenderStatusText,
                 {
                   status: renderStatus,
                   onRetry: () => mediaEditRenders.retry(item.clip)
                 }
               ) }),
-              /* @__PURE__ */ jsx100("button", { type: "button", onClick: onClose, children: "Cancel" }),
-              /* @__PURE__ */ jsx100(
+              /* @__PURE__ */ jsx102("button", { type: "button", onClick: onClose, children: "Cancel" }),
+              /* @__PURE__ */ jsx102(
                 "button",
                 {
                   type: "button",
@@ -45724,12 +45943,12 @@ import {
   MemoryContentContainer as MemoryContentContainer2,
   createMediaProviderFromContainer
 } from "@bendyline/squisq/storage";
-import { MediaContext as MediaContext7, useMediaClipDurations } from "@bendyline/squisq-react";
+import { MediaContext as MediaContext8, useMediaClipDurations } from "@bendyline/squisq-react";
 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 jsx103, jsxs as jsxs83 } from "react/jsx-runtime";
 function EditorShell({
   ariaLabel,
   initialMarkdown = "",
@@ -45835,11 +46054,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__ */ jsx103(MediaContext8.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx103(
     EditorProvider,
     {
       initialMarkdown,
@@ -45885,7 +46104,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__ */ jsx103(ProofingRoot, { children: /* @__PURE__ */ jsx103(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx103(PageTemplateContext.Provider, { value: pageTemplates, children: /* @__PURE__ */ jsx103(
         EditorShellInner,
         {
           ariaLabel: ariaLabel ?? (hostMode === "chat" ? "Message" : fileName ? `Edit ${fileName}` : "Document editor"),
@@ -45951,11 +46170,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__ */ jsx103(PrintPreviewToolbar, {});
+  return /* @__PURE__ */ jsxs83(Fragment35, { children: [
+    /* @__PURE__ */ jsx103(PreviewToolbarControls, { summarizationDesigner }),
+    /* @__PURE__ */ jsx103(PresentationModeControl, {}),
+    allowPrint && /* @__PURE__ */ jsx103(PrintModeControl, {})
   ] });
 }
 function UseModeProviders({
@@ -45964,13 +46183,13 @@ function UseModeProviders({
   allowPresentationWindow,
   allowPresentationFullscreen
 }) {
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx103(
     PresentationModeProvider,
     {
       rootRef,
       allowWindow: allowPresentationWindow,
       allowFullscreen: allowPresentationFullscreen,
-      children: /* @__PURE__ */ jsx101(PrintModeProvider, { rootRef, children })
+      children: /* @__PURE__ */ jsx103(PrintModeProvider, { rootRef, children })
     }
   );
 }
@@ -46029,8 +46248,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) => {
@@ -46069,8 +46288,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;
@@ -46117,32 +46336,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;
@@ -46166,7 +46385,7 @@ function EditorShellInner({
       cancelled = true;
     };
   }, [mediaProvider, mediaListRefreshKey]);
-  useEffect78(() => {
+  useEffect80(() => {
     if (showFilesWhenNotEmpty && mediaCount > 0) setShowFiles(true);
   }, [mediaCount, showFilesWhenNotEmpty]);
   const handleToggleFiles = useCallback63(() => {
@@ -46185,8 +46404,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) => {
@@ -46269,7 +46488,7 @@ function EditorShellInner({
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect78(() => {
+  useEffect80(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback63((e2) => {
@@ -46325,7 +46544,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,
@@ -46364,7 +46583,7 @@ function EditorShellInner({
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsx101(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx103(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx103(
           PreviewSettingsProvider,
           {
             doc,
@@ -46372,25 +46591,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__ */ jsx103("div", { style: { flex: 1 } }),
                     toolbarSlotRight
-                  ] }) : /* @__PURE__ */ jsx101("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx101(
+                  ] }) : /* @__PURE__ */ jsx103("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx103(
                     Toolbar,
                     {
                       showFiles,
                       fileCount: mediaCount,
                       onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
                       slotLeft: toolbarSlotLeft,
-                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx101(
+                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx103(
                         UseModeToolbarControls,
                         {
                           allowPrint,
@@ -46407,7 +46626,7 @@ function EditorShellInner({
                       findShortcut
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs82(
+                  /* @__PURE__ */ jsxs83(
                     "div",
                     {
                       className: "squisq-editor-content",
@@ -46421,7 +46640,7 @@ function EditorShellInner({
                         display: "flex"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs82(
+                        /* @__PURE__ */ jsxs83(
                           "div",
                           {
                             className: "squisq-editor-primary",
@@ -46432,7 +46651,7 @@ function EditorShellInner({
                               position: "relative"
                             },
                             children: [
-                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx101(
+                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx103(
                                 ImageEditor,
                                 {
                                   filesContainer: imageEditorContainer,
@@ -46442,16 +46661,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__ */ jsx103(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__ */ jsx103(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                    /* @__PURE__ */ jsx103(
                                       BlockCardView,
                                       {
                                         active: isCardMode,
@@ -46460,7 +46679,7 @@ function EditorShellInner({
                                         onPrev: prevBlock,
                                         onNext: nextBlock,
                                         onAdd: addBlock,
-                                        children: /* @__PURE__ */ jsx101("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx101(
+                                        children: /* @__PURE__ */ jsx103("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx103(
                                           RawEditor,
                                           {
                                             ariaLabel: `${ariaLabel} \u2014 source`,
@@ -46472,9 +46691,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__ */ jsx103(CodeContextZones, { options: codeContext }, "code-context"),
+                                    isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(BlockPreviewPanel, { basePath }, "block-preview"),
+                                    isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(
                                       InlinePreviewGutter,
                                       {
                                         width: inlinePreviewWidth,
@@ -46483,7 +46702,7 @@ function EditorShellInner({
                                       },
                                       "inline"
                                     ),
-                                    isMarkdownMode && /* @__PURE__ */ jsx101(
+                                    isMarkdownMode && /* @__PURE__ */ jsx103(
                                       NavigationSheet,
                                       {
                                         panel: navigationSheetPanel,
@@ -46498,15 +46717,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__ */ jsx103(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                    /* @__PURE__ */ jsx103(
                                       BlockCardView,
                                       {
                                         active: isCardMode,
@@ -46515,7 +46734,7 @@ function EditorShellInner({
                                         onPrev: prevBlock,
                                         onNext: nextBlock,
                                         onAdd: addBlock,
-                                        children: /* @__PURE__ */ jsx101(
+                                        children: /* @__PURE__ */ jsx103(
                                           WysiwygEditor,
                                           {
                                             ariaLabel,
@@ -46533,8 +46752,8 @@ function EditorShellInner({
                                       },
                                       "wysiwyg-frame"
                                     ),
-                                    isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx101(BlockPreviewPanel, { basePath }, "block-preview"),
-                                    !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx101(
+                                    isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(BlockPreviewPanel, { basePath }, "block-preview"),
+                                    !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx103(
                                       InlinePreviewGutter,
                                       {
                                         width: inlinePreviewWidth,
@@ -46543,7 +46762,7 @@ function EditorShellInner({
                                       },
                                       "inline"
                                     ),
-                                    /* @__PURE__ */ jsx101(
+                                    /* @__PURE__ */ jsx103(
                                       NavigationSheet,
                                       {
                                         panel: navigationSheetPanel,
@@ -46558,7 +46777,7 @@ function EditorShellInner({
                                 },
                                 "wysiwyg-shell"
                               ),
-                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx101(
+                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx103(
                                 PreviewPanel,
                                 {
                                   basePath,
@@ -46571,7 +46790,7 @@ function EditorShellInner({
                             ]
                           }
                         ),
-                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx101(
+                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx103(
                           TimelineVideoPanel,
                           {
                             schedule: timelineVideoSchedule,
@@ -46581,7 +46800,7 @@ function EditorShellInner({
                             onClose: () => setTimelineVideoVisible(false)
                           }
                         ),
-                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx101(
+                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx103(
                           TimelineCompositionPanel,
                           {
                             doc,
@@ -46591,7 +46810,7 @@ function EditorShellInner({
                             onClose: () => setTimelineCompositionVisible(false)
                           }
                         ),
-                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx101(
+                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx103(
                           MediaBin,
                           {
                             mediaProvider,
@@ -46607,11 +46826,11 @@ function EditorShellInner({
                             highlightPath: filesFocusPath
                           }
                         ),
-                        isMarkdownMode && /* @__PURE__ */ jsx101(ProofingPanel, {}),
-                        isMarkdownMode && /* @__PURE__ */ jsx101(ReviewPanel, {}),
+                        isMarkdownMode && /* @__PURE__ */ jsx103(ProofingPanel, {}),
+                        isMarkdownMode && /* @__PURE__ */ jsx103(ReviewPanel, {}),
                         isMarkdownMode && sidePanelSlot,
-                        isMarkdownMode && /* @__PURE__ */ jsx101(ThemeDesignerDock, {}),
-                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx101(
+                        isMarkdownMode && /* @__PURE__ */ jsx103(ThemeDesignerDock, {}),
+                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx103(
                           DropZoneOverlay,
                           {
                             dragContentType,
@@ -46622,7 +46841,7 @@ function EditorShellInner({
                       ]
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx101(
+                  isTimelineMode && /* @__PURE__ */ jsx103(
                     TimelineToolbar,
                     {
                       literalVideoVisible: timelineVideoVisible,
@@ -46633,7 +46852,7 @@ function EditorShellInner({
                       onToggleComposition: () => setTimelineCompositionVisible((visible) => !visible)
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx101(
+                  isTimelineMode && /* @__PURE__ */ jsx103(
                     TimelineTrack,
                     {
                       doc: timelineDoc,
@@ -46642,8 +46861,8 @@ function EditorShellInner({
                       basePath
                     }
                   ),
-                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx101(StatusBar, { slotRight: statusBarSlotRight }),
-                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx101(
+                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx103(StatusBar, { slotRight: statusBarSlotRight }),
+                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx103(
                     RecorderEntry,
                     {
                       open: mediaBinRecorderOpen,
@@ -46656,8 +46875,8 @@ function EditorShellInner({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx101(TooltipLayer, {}),
-        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx103(TooltipLayer, {}),
+        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx103(
           ImageEditModal,
           {
             relativePath: imageEditTarget,
@@ -46673,12 +46892,12 @@ function EditorShellInner({
             shellTheme: colorScheme
           }
         ),
-        mediaEditTarget !== null && /* @__PURE__ */ jsx101(MediaEditModal, { target: mediaEditTarget, onClose: closeMediaEdit })
+        mediaEditTarget !== null && /* @__PURE__ */ jsx103(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__ */ jsx103(MediaEditContextMenuItems, {}),
     shell
   ] });
 }