@bendyline/squisq-editor-react 2.11.2 → 2.11.3

package/dist/{chunk-QIQNP2GI.js → chunk-AAIZHMVD.js}

@@ -28535,61 +28535,18 @@ import {
 } from "@bendyline/squisq/markdown";
 import { parseTableViewState, serializeTableViewState } from "@bendyline/squisq/table";
 import { TABLE_FED_TEMPLATES, resolveTemplateName as resolveTemplateName2 } from "@bendyline/squisq/doc";
-function paramsOf(inner) {
-  const params = {};
-  if (!inner) return params;
-  for (const token of tokenizeAttrTokens4(inner)) {
-    const pair = splitKeyValueToken3(token);
-    if (pair) params[pair.key] = unquoteAttrValue(pair.value);
-  }
-  return params;
-}
-function readHeadingViewBinding(editor, cardPos, href) {
-  const headingPos = findOwningHeadingPosition(editor.state.doc, cardPos);
-  if (headingPos === null) {
-    return { headingPos: null, persisted: false, params: {} };
-  }
-  const node2 = editor.state.doc.nodeAt(headingPos);
-  if (!node2 || node2.type.name !== "heading") {
-    return { headingPos: null, persisted: false, params: {} };
-  }
-  const attrs = node2.attrs;
-  const params = paramsOf(attrs.dataTemplateParams);
-  const template = attrs.dataTemplate ? resolveTemplateName2(attrs.dataTemplate) : null;
-  const persisted = template !== null && TABLE_FED_TEMPLATES.has(template) && params.src === href;
-  return {
-    headingPos,
-    persisted,
-    params,
-    ...params.sort !== void 0 ? { sortRaw: params.sort } : {},
-    ...params.filter !== void 0 ? { filterRaw: params.filter } : {}
-  };
-}
-function serializeParams3(params) {
-  return Object.entries(params).map(([key, value]) => `${key}=${needsQuoting(value) ? quoteAttrValue5(value) : value}`).join(" ");
-}
-function writeHeadingViewState(editor, cardPos, href, view) {
-  if (!editor.isEditable) return false;
-  const binding = readHeadingViewBinding(editor, cardPos, href);
-  if (binding.headingPos === null || !binding.persisted) return false;
-  const raw = serializeTableViewState(view);
-  const params = { ...binding.params };
-  if (raw.sort !== void 0) params.sort = raw.sort;
-  else delete params.sort;
-  if (raw.filter !== void 0) params.filter = raw.filter;
-  else delete params.filter;
-  const serialized = serializeParams3(params);
-  const pos = binding.headingPos;
-  return editor.chain().command(({ tr }) => {
-    const node2 = tr.doc.nodeAt(pos);
-    if (!node2 || node2.type.name !== "heading") return false;
-    tr.setNodeAttribute(pos, "dataTemplateParams", serialized.length > 0 ? serialized : null);
-    return true;
-  }).run();
-}
-function viewStateFromBinding(binding, headers) {
-  return parseTableViewState(binding.sortRaw, binding.filterRaw, headers).view;
-}
+
+// src/dataCard/DataCardExtension.ts
+import { Extension as Extension10 } from "@tiptap/core";
+import { Plugin as Plugin10, PluginKey as PluginKey10 } from "@tiptap/pm/state";
+import { Decoration as Decoration10, DecorationSet as DecorationSet10 } from "@tiptap/pm/view";
+import { createRoot as createRoot6 } from "react-dom/client";
+import { createElement as createElement12 } from "react";
+import { isDataFilePath } from "@bendyline/squisq/doc";
+
+// src/dataCard/DataCardWidget.tsx
+import { useCallback as useCallback38, useEffect as useEffect39, useMemo as useMemo36, useRef as useRef40, useState as useState49 } from "react";
+import { EMPTY_TABLE_VIEW_STATE } from "@bendyline/squisq/table";
 
 // src/dataCard/gridSave.ts
 import { DATA_BACKUP_PREFIX, buildDataBackupPath } from "@bendyline/squisq/versions";
@@ -28886,134 +28843,6 @@ async function createXlsxFormulaSession(meta, options = {}) {
   };
 }
 
-// src/dataCard/DataCardWidget.tsx
-import { useCallback as useCallback38, useEffect as useEffect39, useMemo as useMemo36, useRef as useRef40, useState as useState49 } from "react";
-import { EMPTY_TABLE_VIEW_STATE } from "@bendyline/squisq/table";
-
-// src/dataCard/DataCardExtension.ts
-import { Extension as Extension10 } from "@tiptap/core";
-import { Plugin as Plugin10, PluginKey as PluginKey10 } from "@tiptap/pm/state";
-import { Decoration as Decoration10, DecorationSet as DecorationSet10 } from "@tiptap/pm/view";
-import { createRoot as createRoot6 } from "react-dom/client";
-import { createElement as createElement12 } from "react";
-import { isDataFilePath } from "@bendyline/squisq/doc";
-var DATA_CARD_KEY = new PluginKey10("squisq-data-card");
-function dataLinkHrefOf(node2) {
-  if (node2.type.name !== "paragraph" || node2.childCount === 0) return null;
-  let href = null;
-  for (let i = 0; i < node2.childCount; i++) {
-    const child = node2.child(i);
-    if (!child.isText || !child.text || !child.text.trim()) return null;
-    const link = child.marks.find((mark) => mark.type.name === "link");
-    const childHref = link?.attrs?.href;
-    if (typeof childHref !== "string") return null;
-    if (href === null) href = childHref;
-    else if (href !== childHref) return null;
-  }
-  return href !== null && isDataFilePath(href) ? href : null;
-}
-function findDataCardBlockPos(editor, blockId) {
-  return DATA_CARD_KEY.getState(editor.state)?.entries.find((e2) => e2.id === blockId)?.pos ?? null;
-}
-function buildDecorations8(doc, entries, editor, options) {
-  const decos = [];
-  for (const entry of entries) {
-    const node2 = doc.nodeAt(entry.pos);
-    if (!node2 || node2.type.name !== "paragraph") continue;
-    decos.push(
-      Decoration10.node(entry.pos, entry.pos + node2.nodeSize, {
-        class: "squisq-data-card-hidden"
-      })
-    );
-    const blockId = entry.id;
-    decos.push(
-      Decoration10.widget(
-        entry.pos + node2.nodeSize,
-        () => {
-          const container = document.createElement("div");
-          container.className = "squisq-data-card-host squisq-block-fill-available";
-          container.contentEditable = "false";
-          containFenceWidgetEvents(container);
-          const root = createRoot6(container);
-          root.render(
-            createElement12(DataCardWidget, {
-              editor,
-              blockId,
-              getMediaProvider: () => options.mediaProvider?.(),
-              getMediaRevision: () => options.mediaRevision?.() ?? 0,
-              getContainer: () => options.container?.(),
-              onOpenFiles: options.onOpenFiles,
-              onMediaSaved: options.onMediaSaved,
-              getCalcEngineFactory: () => options.calcEngineFactory?.()
-            })
-          );
-          container.__squisqDataCardRoot = { root };
-          return container;
-        },
-        {
-          destroy: (dom) => {
-            const ref = dom.__squisqDataCardRoot;
-            if (ref) setTimeout(() => ref.root.unmount(), 0);
-          },
-          side: 1,
-          ignoreSelection: true,
-          key: `squisq-data-card-${entry.id}`
-        }
-      )
-    );
-  }
-  return DecorationSet10.create(doc, decos);
-}
-function collectEntries(doc, mapped, seqStart) {
-  let seq = seqStart;
-  const entries = [];
-  doc.descendants((node2, pos) => {
-    if (node2.type.name !== "paragraph") return;
-    if (!dataLinkHrefOf(node2)) return false;
-    entries.push({ id: mapped?.get(pos) ?? `data-card-${++seq}`, pos });
-    return false;
-  });
-  return { entries, seq };
-}
-function applyState6(tr, prev, editor, doc, options) {
-  if (!tr.docChanged) return prev;
-  const mapped = mapFenceEntries(tr, prev.entries, doc, "paragraph");
-  const { entries, seq } = collectEntries(doc, mapped, prev.seq);
-  return { entries, seq, decorations: buildDecorations8(doc, entries, editor, options) };
-}
-var DataCardExtension = Extension10.create({
-  name: "squisqDataCard",
-  addOptions() {
-    return { enabled: true };
-  },
-  addProseMirrorPlugins() {
-    const editor = this.editor;
-    const options = this.options;
-    if (options.enabled === false) return [];
-    return [
-      new Plugin10({
-        key: DATA_CARD_KEY,
-        state: {
-          init: (_config, state) => {
-            const { entries, seq } = collectEntries(state.doc, null, 0);
-            return {
-              entries,
-              seq,
-              decorations: buildDecorations8(state.doc, entries, editor, options)
-            };
-          },
-          apply: (tr, prev, _oldState, newState) => applyState6(tr, prev, editor, newState.doc, options)
-        },
-        props: {
-          decorations(state) {
-            return this.getState(state)?.decorations ?? DecorationSet10.empty;
-          }
-        }
-      })
-    ];
-  }
-});
-
 // src/dataCard/DataCardWidget.tsx
 import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
 var XLSX_SESSION_LOCKED_REASON = "Date cells and shared-formula masters stay locked; other formulas are editable";
@@ -29324,6 +29153,198 @@ function DataCardWidget({
   );
 }
 
+// src/dataCard/DataCardExtension.ts
+function normalizeDataLinkPath(value) {
+  let normalized = "";
+  for (let index2 = 0; index2 < value.length; index2++) {
+    const char = value[index2];
+    const next = value[index2 + 1];
+    const code = next?.charCodeAt(0) ?? -1;
+    const escapable = code >= 33 && code <= 47 || code >= 58 && code <= 64 || code >= 91 && code <= 96 || code >= 123 && code <= 126;
+    if (char === "\\" && next !== void 0 && escapable) {
+      normalized += next;
+      index2++;
+    } else {
+      normalized += char;
+    }
+  }
+  return normalized;
+}
+var DATA_CARD_KEY = new PluginKey10("squisq-data-card");
+function dataLinkHrefOf(node2) {
+  if (node2.type.name !== "paragraph" || node2.childCount === 0) return null;
+  let href = null;
+  for (let i = 0; i < node2.childCount; i++) {
+    const child = node2.child(i);
+    if (!child.isText || !child.text || !child.text.trim()) return null;
+    const link = child.marks.find((mark) => mark.type.name === "link");
+    const childHref = link?.attrs?.href;
+    if (typeof childHref !== "string") return null;
+    const normalizedHref = normalizeDataLinkPath(childHref);
+    if (href === null) href = normalizedHref;
+    else if (href !== normalizedHref) return null;
+  }
+  return href !== null && isDataFilePath(href) ? href : null;
+}
+function findDataCardBlockPos(editor, blockId) {
+  return DATA_CARD_KEY.getState(editor.state)?.entries.find((e2) => e2.id === blockId)?.pos ?? null;
+}
+function buildDecorations8(doc, entries, editor, options) {
+  const decos = [];
+  for (const entry of entries) {
+    const node2 = doc.nodeAt(entry.pos);
+    if (!node2 || node2.type.name !== "paragraph") continue;
+    decos.push(
+      Decoration10.node(entry.pos, entry.pos + node2.nodeSize, {
+        class: "squisq-data-card-hidden"
+      })
+    );
+    const blockId = entry.id;
+    decos.push(
+      Decoration10.widget(
+        entry.pos + node2.nodeSize,
+        () => {
+          const container = document.createElement("div");
+          container.className = "squisq-data-card-host squisq-block-fill-available";
+          container.contentEditable = "false";
+          containFenceWidgetEvents(container);
+          const root = createRoot6(container);
+          root.render(
+            createElement12(DataCardWidget, {
+              editor,
+              blockId,
+              getMediaProvider: () => options.mediaProvider?.(),
+              getMediaRevision: () => options.mediaRevision?.() ?? 0,
+              getContainer: () => options.container?.(),
+              onOpenFiles: options.onOpenFiles,
+              onMediaSaved: options.onMediaSaved,
+              getCalcEngineFactory: () => options.calcEngineFactory?.()
+            })
+          );
+          container.__squisqDataCardRoot = { root };
+          return container;
+        },
+        {
+          destroy: (dom) => {
+            const ref = dom.__squisqDataCardRoot;
+            if (ref) setTimeout(() => ref.root.unmount(), 0);
+          },
+          side: 1,
+          ignoreSelection: true,
+          key: `squisq-data-card-${entry.id}`
+        }
+      )
+    );
+  }
+  return DecorationSet10.create(doc, decos);
+}
+function collectEntries(doc, mapped, seqStart) {
+  let seq = seqStart;
+  const entries = [];
+  doc.descendants((node2, pos) => {
+    if (node2.type.name !== "paragraph") return;
+    if (!dataLinkHrefOf(node2)) return false;
+    entries.push({ id: mapped?.get(pos) ?? `data-card-${++seq}`, pos });
+    return false;
+  });
+  return { entries, seq };
+}
+function applyState6(tr, prev, editor, doc, options) {
+  if (!tr.docChanged) return prev;
+  const mapped = mapFenceEntries(tr, prev.entries, doc, "paragraph");
+  const { entries, seq } = collectEntries(doc, mapped, prev.seq);
+  return { entries, seq, decorations: buildDecorations8(doc, entries, editor, options) };
+}
+var DataCardExtension = Extension10.create({
+  name: "squisqDataCard",
+  addOptions() {
+    return { enabled: true };
+  },
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    const options = this.options;
+    if (options.enabled === false) return [];
+    return [
+      new Plugin10({
+        key: DATA_CARD_KEY,
+        state: {
+          init: (_config, state) => {
+            const { entries, seq } = collectEntries(state.doc, null, 0);
+            return {
+              entries,
+              seq,
+              decorations: buildDecorations8(state.doc, entries, editor, options)
+            };
+          },
+          apply: (tr, prev, _oldState, newState) => applyState6(tr, prev, editor, newState.doc, options)
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)?.decorations ?? DecorationSet10.empty;
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/dataCard/viewStateBinding.ts
+function paramsOf(inner) {
+  const params = {};
+  if (!inner) return params;
+  for (const token of tokenizeAttrTokens4(inner)) {
+    const pair = splitKeyValueToken3(token);
+    if (pair) params[pair.key] = unquoteAttrValue(pair.value);
+  }
+  return params;
+}
+function readHeadingViewBinding(editor, cardPos, href) {
+  const headingPos = findOwningHeadingPosition(editor.state.doc, cardPos);
+  if (headingPos === null) {
+    return { headingPos: null, persisted: false, params: {} };
+  }
+  const node2 = editor.state.doc.nodeAt(headingPos);
+  if (!node2 || node2.type.name !== "heading") {
+    return { headingPos: null, persisted: false, params: {} };
+  }
+  const attrs = node2.attrs;
+  const params = paramsOf(attrs.dataTemplateParams);
+  const template = attrs.dataTemplate ? resolveTemplateName2(attrs.dataTemplate) : null;
+  const persisted = template !== null && TABLE_FED_TEMPLATES.has(template) && params.src !== void 0 && normalizeDataLinkPath(params.src) === href;
+  return {
+    headingPos,
+    persisted,
+    params,
+    ...params.sort !== void 0 ? { sortRaw: params.sort } : {},
+    ...params.filter !== void 0 ? { filterRaw: params.filter } : {}
+  };
+}
+function serializeParams3(params) {
+  return Object.entries(params).map(([key, value]) => `${key}=${needsQuoting(value) ? quoteAttrValue5(value) : value}`).join(" ");
+}
+function writeHeadingViewState(editor, cardPos, href, view) {
+  if (!editor.isEditable) return false;
+  const binding = readHeadingViewBinding(editor, cardPos, href);
+  if (binding.headingPos === null || !binding.persisted) return false;
+  const raw = serializeTableViewState(view);
+  const params = { ...binding.params };
+  if (raw.sort !== void 0) params.sort = raw.sort;
+  else delete params.sort;
+  if (raw.filter !== void 0) params.filter = raw.filter;
+  else delete params.filter;
+  const serialized = serializeParams3(params);
+  const pos = binding.headingPos;
+  return editor.chain().command(({ tr }) => {
+    const node2 = tr.doc.nodeAt(pos);
+    if (!node2 || node2.type.name !== "heading") return false;
+    tr.setNodeAttribute(pos, "dataTemplateParams", serialized.length > 0 ? serialized : null);
+    return true;
+  }).run();
+}
+function viewStateFromBinding(binding, headers) {
+  return parseTableViewState(binding.sortRaw, binding.filterRaw, headers).view;
+}
+
 // src/treeview/treeViewData.ts
 import { useEffect as useEffect40, useMemo as useMemo37, useState as useState51 } from "react";
 
@@ -33311,7 +33332,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect9, useMemo as useMemo42, useRef as useRef47, useState as useState60 } from "react";
+import { useLayoutEffect as useLayoutEffect9, useMemo as useMemo42, useRef as useRef47, useState as useState61 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -33520,6 +33541,96 @@ function sameEntries(a, b) {
   return true;
 }
 
+// src/usePreviewProjection.ts
+import { useEffect as useEffect49, useState as useState60 } from "react";
+import {
+  resolveAudioMapping,
+  resolveDataReferences
+} from "@bendyline/squisq/doc";
+import { applyTransform } from "@bendyline/squisq/transform";
+var DATA_PREVIEW_ROWS = 50;
+var dataTableCaches = /* @__PURE__ */ new WeakMap();
+function dataTableCacheFor(container, revision) {
+  let entry = dataTableCaches.get(container);
+  if (!entry || entry.revision !== revision) {
+    entry = { revision, cache: /* @__PURE__ */ new Map() };
+    dataTableCaches.set(container, entry);
+  }
+  return entry.cache;
+}
+async function resolveDataPreviews(doc, container, mediaRevision) {
+  try {
+    const { defaultDataReaders } = await import("@bendyline/squisq-formats/data");
+    const resolved = await resolveDataReferences(doc, container, {
+      readers: defaultDataReaders(),
+      maxPreviewRows: DATA_PREVIEW_ROWS,
+      tableCache: dataTableCacheFor(container, mediaRevision)
+    });
+    return resolved.doc;
+  } catch {
+    return doc;
+  }
+}
+function hasEquivalentAudio(left, right) {
+  if (left === right) return true;
+  if (left.segments.length !== right.segments.length) return false;
+  return left.segments.every((segment, index2) => {
+    const other = right.segments[index2];
+    return segment.src === other.src && segment.name === other.name && segment.duration === other.duration && segment.startTime === other.startTime;
+  });
+}
+function preserveEquivalentAudio(previous, next) {
+  const previousAudio = previous?.playerDoc.audio;
+  if (!previousAudio || !hasEquivalentAudio(previousAudio, next.playerDoc.audio)) return next;
+  return {
+    ...next,
+    playerDoc: { ...next.playerDoc, audio: previousAudio }
+  };
+}
+function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2, mediaRevision) {
+  const [projection, setProjection] = useState60(null);
+  useEffect49(() => {
+    if (!doc || !doc.blocks.length) {
+      setProjection(null);
+      return;
+    }
+    const build = (sourceDoc) => {
+      const contentDoc = transformStyle ? applyTransform(sourceDoc, transformStyle).doc : sourceDoc;
+      const narrationOwnsTimeline = (contentDoc.documentMedia ?? []).some(
+        (clip) => clip.anchor === "document"
+      );
+      return {
+        contentDoc,
+        playerDoc: buildPreviewDoc(contentDoc, {
+          documentTitle: documentTitle2,
+          interleaveImages: !narrationOwnsTimeline
+        })
+      };
+    };
+    const commit = (next) => {
+      setProjection((previous) => preserveEquivalentAudio(previous, next));
+    };
+    if (workspaceContainer) {
+      let cancelled = false;
+      const immediate = build(doc);
+      resolveAudioMapping(doc, workspaceContainer).then((audioDoc) => resolveDataPreviews(audioDoc, workspaceContainer, mediaRevision ?? 0)).then(
+        (resolvedDoc) => {
+          if (!cancelled) commit(build(resolvedDoc));
+        },
+        () => {
+          if (!cancelled) commit(immediate);
+        }
+      );
+      setProjection((previous) => previous ?? immediate);
+      return () => {
+        cancelled = true;
+      };
+    }
+    commit(build(doc));
+  }, [doc, transformStyle, workspaceContainer, documentTitle2, mediaRevision]);
+  return projection;
+}
+
 // src/InlinePreviewGutter.tsx
 import { Fragment as Fragment18, jsx as jsx63, jsxs as jsxs50 } from "react/jsx-runtime";
 function isAnnotated(block) {
@@ -33686,14 +33797,16 @@ function InlinePreviewGutter({
   connectorWidth = 24,
   mediaProvider = null
 }) {
-  const { doc } = useEditorContext();
+  const { doc, workspaceContainer, fileName, mediaRevision } = useEditorContext();
+  const projection = usePreviewProjection(doc, "", workspaceContainer, fileName, mediaRevision);
+  const previewDoc = projection?.contentDoc ?? doc;
   const gutterRef = useRef47(null);
   const { entries: headingEntries, scrollToBlock } = useHeadingLayout(gutterRef);
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme ?? DEFAULT_THEME5;
   const items = useMemo42(() => {
-    if (!doc || !doc.blocks.length) return [];
-    const flat = flattenBlocks4(doc.blocks);
+    if (!previewDoc || !previewDoc.blocks.length) return [];
+    const flat = flattenBlocks4(previewDoc.blocks);
     const totalBlocks = flat.length;
     const result = [];
     flat.forEach((block, index2) => {
@@ -33718,6 +33831,10 @@ function InlinePreviewGutter({
           block.contents,
           collectImagesDeep(block)
         ),
+        // Async sidecar resolution stores its bounded table window here.
+        // Forward it before authored params/overrides so document-mode cards
+        // render the same CSV/XLSX data as block and full-preview modes.
+        ...block.templateData,
         ...annotation.params,
         ...block.templateOverrides
       };
@@ -33726,7 +33843,7 @@ function InlinePreviewGutter({
         totalBlocks,
         theme: activeTheme,
         viewport,
-        customTemplates: doc.customTemplates
+        customTemplates: previewDoc.customTemplates
       };
       try {
         const { layers } = materializeBlockLayers2(templateBlock, ctx);
@@ -33747,13 +33864,13 @@ function InlinePreviewGutter({
       }
     });
     return result;
-  }, [doc, viewport, activeTheme]);
+  }, [previewDoc, viewport, activeTheme]);
   const connectorTops = useMemo42(() => {
     const m = /* @__PURE__ */ new Map();
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState60(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState61(/* @__PURE__ */ new Map());
   useLayoutEffect9(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
@@ -33938,10 +34055,10 @@ function InlinePreviewGutter({
 import {
   memo,
   useCallback as useCallback43,
-  useEffect as useEffect49,
+  useEffect as useEffect50,
   useMemo as useMemo43,
   useRef as useRef48,
-  useState as useState61
+  useState as useState62
 } from "react";
 import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate2 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText4 } from "@bendyline/squisq/markdown";
@@ -34063,8 +34180,8 @@ function OutlinePanel({ width, className, readOnly = false }) {
   const paneRef = useRef48(null);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef48(null);
-  const [draggedBlockId, setDraggedBlockId] = useState61(null);
-  const [dropTarget, setDropTarget] = useState61(null);
+  const [draggedBlockId, setDraggedBlockId] = useState62(null);
+  const [dropTarget, setDropTarget] = useState62(null);
   const nextOutlineBlocks = doc?.blocks ?? EMPTY_BLOCKS;
   const outlineBlocksRef = useRef48(nextOutlineBlocks);
   if (!sameOutlineStructure(outlineBlocksRef.current, nextOutlineBlocks)) {
@@ -34397,11 +34514,11 @@ function useActiveOutlineBlockId() {
   const flatBlocksRef = useRef48(flatBlocks);
   flatBlocksRef.current = flatBlocks;
   const headingLocations = flatBlocks.map((block) => `${block.id}:${block.sourceHeading?.position?.start.line ?? ""}`).join("\0");
-  const [activeId, setActiveId] = useState61(null);
-  useEffect49(() => {
+  const [activeId, setActiveId] = useState62(null);
+  useEffect50(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -34423,7 +34540,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, headingLocations]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -34510,7 +34627,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback45, useEffect as useEffect51, useMemo as useMemo45, useRef as useRef50, useState as useState62 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect52, useMemo as useMemo45, useRef as useRef50, useState as useState63 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -34634,7 +34751,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 useCallback44, useEffect as useEffect50, useMemo as useMemo44, useRef as useRef49 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect51, useMemo as useMemo44, useRef as useRef49 } from "react";
 import { jsx as jsx65, jsxs as jsxs52 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -34654,7 +34771,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect50(() => {
+  useEffect51(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -34726,11 +34843,11 @@ function CodeContextSectionView({
 import { Fragment as Fragment19, jsx as jsx66 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState62(null);
-  const [, setZonesVersion] = useState62(0);
-  const [expandedById, setExpandedById] = useState62({});
+  const [manager, setManager] = useState63(null);
+  const [, setZonesVersion] = useState63(0);
+  const [expandedById, setExpandedById] = useState63({});
   const seenIds = useRef50(/* @__PURE__ */ new Set());
-  useEffect51(() => {
+  useEffect52(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -34753,7 +34870,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -35189,7 +35306,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback47, useEffect as useEffect54, useMemo as useMemo46, useRef as useRef53, useState as useState65 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect55, useMemo as useMemo46, useRef as useRef53, useState as useState66 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -35314,7 +35431,7 @@ function collectTimelinePlaybackSchedule(doc, scheduled) {
 }
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback46, useEffect as useEffect52, useRef as useRef51, useState as useState63 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect53, useRef as useRef51, useState as useState64 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -35334,8 +35451,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState63(0);
-  const [isPlaying, setIsPlaying] = useState63(false);
+  const [currentTime, setCurrentTime] = useState64(0);
+  const [isPlaying, setIsPlaying] = useState64(false);
   const rafRef = useRef51(null);
   const lastRef = useRef51(0);
   const currentTimeRef = useRef51(0);
@@ -35343,10 +35460,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef51(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect52(() => {
+  useEffect53(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -35408,7 +35525,7 @@ function timelineMediaLabel(src, kind) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect53, useLayoutEffect as useLayoutEffect10, useRef as useRef52, useState as useState64 } from "react";
+import { useEffect as useEffect54, useLayoutEffect as useLayoutEffect10, useRef as useRef52, useState as useState65 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 import { Fragment as Fragment20, jsx as jsx68, jsxs as jsxs54 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -35423,7 +35540,7 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef52(null);
-  const [style, setStyle] = useState64(() => menuStyle(anchor));
+  const [style, setStyle] = useState65(() => menuStyle(anchor));
   useLayoutEffect10(() => {
     const panel = panelRef.current;
     if (!panel) return;
@@ -35437,7 +35554,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect53(() => {
+  useEffect54(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -35497,12 +35614,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState64(target.explicitDuration);
-  const [duration, setDuration] = useState64(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState64(
+  const [explicitDuration, setExplicitDuration] = useState65(target.explicitDuration);
+  const [duration, setDuration] = useState65(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState65(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState64(target.transition);
+  const [transition, setTransition] = useState65(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -35574,11 +35691,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  const [placement, setPlacement] = useState64(target.placement);
-  const [locked, setLocked] = useState64(target.lockToBlock);
-  const [pipSize, setPipSize] = useState64(target.pipSize ?? "");
-  const [pipShape, setPipShape] = useState64(target.pipShape ?? "");
-  const [pipPosition, setPipPosition] = useState64(target.pipPosition ?? "");
+  const [placement, setPlacement] = useState65(target.placement);
+  const [locked, setLocked] = useState65(target.lockToBlock);
+  const [pipSize, setPipSize] = useState65(target.pipSize ?? "");
+  const [pipShape, setPipShape] = useState65(target.pipShape ?? "");
+  const [pipPosition, setPipPosition] = useState65(target.pipPosition ?? "");
   const placed = placement === "picture-in-picture" || placement === "overlay";
   const placementOptions = [
     target.canUseContentPlacement ? { value: "content", label: "In layout" } : { value: "default", label: "Default" },
@@ -35848,9 +35965,9 @@ function TimelineTrack({
     colorScheme
   } = useEditorContext();
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState65(null);
-  const [itemMenu, setItemMenu] = useState65(null);
-  const [pxPerSecond, setPxPerSecond] = useState65(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = useState66(null);
+  const [itemMenu, setItemMenu] = useState66(null);
+  const [pxPerSecond, setPxPerSecond] = useState66(DEFAULT_PX_PER_SECOND);
   const scrollRef = useRef53(null);
   const blocks = useMemo46(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
@@ -35883,8 +36000,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState65(false);
-  useEffect54(() => {
+  const [scrubbing, setScrubbing] = useState66(false);
+  useEffect55(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -35922,7 +36039,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef53(null);
-  useEffect54(() => {
+  useEffect55(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -35933,7 +36050,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -35981,8 +36098,8 @@ function TimelineTrack({
   );
   const zoomIn = useCallback47(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback47(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
-  const [viewportWidth, setViewportWidth] = useState65(0);
-  useEffect54(() => {
+  const [viewportWidth, setViewportWidth] = useState66(0);
+  useEffect55(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -35996,7 +36113,7 @@ function TimelineTrack({
   const dragRef = useRef53(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect54(() => {
+  useEffect55(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -36027,7 +36144,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback47(
@@ -36630,98 +36747,6 @@ function formatClock3(seconds) {
 import { useMemo as useMemo48 } from "react";
 import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule as resolveMediaSchedule3 } from "@bendyline/squisq/schemas";
 import { DocPlayer } from "@bendyline/squisq-react";
-
-// src/usePreviewProjection.ts
-import { useEffect as useEffect55, useState as useState66 } from "react";
-import {
-  resolveAudioMapping,
-  resolveDataReferences
-} from "@bendyline/squisq/doc";
-import { applyTransform } from "@bendyline/squisq/transform";
-var DATA_PREVIEW_ROWS = 50;
-var dataTableCaches = /* @__PURE__ */ new WeakMap();
-function dataTableCacheFor(container, revision) {
-  let entry = dataTableCaches.get(container);
-  if (!entry || entry.revision !== revision) {
-    entry = { revision, cache: /* @__PURE__ */ new Map() };
-    dataTableCaches.set(container, entry);
-  }
-  return entry.cache;
-}
-async function resolveDataPreviews(doc, container, mediaRevision) {
-  try {
-    const { defaultDataReaders } = await import("@bendyline/squisq-formats/data");
-    const resolved = await resolveDataReferences(doc, container, {
-      readers: defaultDataReaders(),
-      maxPreviewRows: DATA_PREVIEW_ROWS,
-      tableCache: dataTableCacheFor(container, mediaRevision)
-    });
-    return resolved.doc;
-  } catch {
-    return doc;
-  }
-}
-function hasEquivalentAudio(left, right) {
-  if (left === right) return true;
-  if (left.segments.length !== right.segments.length) return false;
-  return left.segments.every((segment, index2) => {
-    const other = right.segments[index2];
-    return segment.src === other.src && segment.name === other.name && segment.duration === other.duration && segment.startTime === other.startTime;
-  });
-}
-function preserveEquivalentAudio(previous, next) {
-  const previousAudio = previous?.playerDoc.audio;
-  if (!previousAudio || !hasEquivalentAudio(previousAudio, next.playerDoc.audio)) return next;
-  return {
-    ...next,
-    playerDoc: { ...next.playerDoc, audio: previousAudio }
-  };
-}
-function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2, mediaRevision) {
-  const [projection, setProjection] = useState66(null);
-  useEffect55(() => {
-    if (!doc || !doc.blocks.length) {
-      setProjection(null);
-      return;
-    }
-    const build = (sourceDoc) => {
-      const contentDoc = transformStyle ? applyTransform(sourceDoc, transformStyle).doc : sourceDoc;
-      const narrationOwnsTimeline = (contentDoc.documentMedia ?? []).some(
-        (clip) => clip.anchor === "document"
-      );
-      return {
-        contentDoc,
-        playerDoc: buildPreviewDoc(contentDoc, {
-          documentTitle: documentTitle2,
-          interleaveImages: !narrationOwnsTimeline
-        })
-      };
-    };
-    const commit = (next) => {
-      setProjection((previous) => preserveEquivalentAudio(previous, next));
-    };
-    if (workspaceContainer) {
-      let cancelled = false;
-      const immediate = build(doc);
-      resolveAudioMapping(doc, workspaceContainer).then((audioDoc) => resolveDataPreviews(audioDoc, workspaceContainer, mediaRevision ?? 0)).then(
-        (resolvedDoc) => {
-          if (!cancelled) commit(build(resolvedDoc));
-        },
-        () => {
-          if (!cancelled) commit(immediate);
-        }
-      );
-      setProjection((previous) => previous ?? immediate);
-      return () => {
-        cancelled = true;
-      };
-    }
-    commit(build(doc));
-  }, [doc, transformStyle, workspaceContainer, documentTitle2, mediaRevision]);
-  return projection;
-}
-
-// src/TimelineCompositionPanel.tsx
 import { jsx as jsx71, jsxs as jsxs57 } from "react/jsx-runtime";
 function TimelineCompositionPanel({
   doc,
@@ -37280,7 +37305,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState70, useEffect as useEffect60, useMemo as useMemo53, useCallback as useCallback52, useRef as useRef58 } from "react";
+import { useState as useState71, useEffect as useEffect61, useMemo as useMemo54, useCallback as useCallback52, useRef as useRef58 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
 import {
   DashboardView,
@@ -38403,8 +38428,219 @@ function PrintPreview({
   );
 }
 
+// src/slideshow/SlideshowDataGrid.tsx
+import {
+  createContext as createContext9,
+  useContext as useContext9,
+  useEffect as useEffect60,
+  useMemo as useMemo53,
+  useState as useState70
+} from "react";
+import { parseTableViewState as parseTableViewState2 } from "@bendyline/squisq/table";
+import { DataGrid, TableStoreClient } from "@bendyline/squisq-grid-react";
+
+// src/slideshow/slideshowDataSources.ts
+import { isDataFilePath as isDataFilePath2, resolveTemplateName as resolveTemplateName3 } from "@bendyline/squisq/doc";
+function extensionOf2(path) {
+  const base = path.split("/").pop() ?? path;
+  const dot = base.lastIndexOf(".");
+  return dot > 0 ? base.slice(dot + 1).toLowerCase() : "";
+}
+function blockHasAuthoredRows(block) {
+  const owns = (record, key) => !!record && Object.prototype.hasOwnProperty.call(record, key);
+  return owns(block.templateData, "headers") || owns(block.templateData, "rows") || owns(block.templateOverrides, "headers") || owns(block.templateOverrides, "rows");
+}
+function collectSlideshowDataSources(doc) {
+  const sources = /* @__PURE__ */ new Map();
+  if (!doc) return sources;
+  const visit = (blocks) => {
+    for (const block of blocks) {
+      const overrides = block.templateOverrides;
+      const src = overrides?.src;
+      if (typeof src === "string" && isDataFilePath2(src) && resolveTemplateName3(block.template ?? "") === "dataTable" && !blockHasAuthoredRows(block)) {
+        sources.set(block.id, {
+          blockId: block.id,
+          src,
+          ext: extensionOf2(src),
+          ...overrides?.sheet ? { sheet: overrides.sheet } : {},
+          ...overrides?.anchor ? { anchor: overrides.anchor } : {},
+          ...overrides?.headerRow !== void 0 ? { headerRow: overrides.headerRow !== "false" } : {},
+          ...overrides?.sort ? { sort: overrides.sort } : {},
+          ...overrides?.filter ? { filter: overrides.filter } : {}
+        });
+      }
+      if (block.children?.length) visit(block.children);
+    }
+  };
+  visit(doc.blocks);
+  return sources;
+}
+
+// src/slideshow/SlideshowDataGrid.tsx
+import { Fragment as Fragment21, jsx as jsx77 } from "react/jsx-runtime";
+var EMPTY_CONTEXT = {
+  container: null,
+  mediaRevision: 0,
+  sources: /* @__PURE__ */ new Map()
+};
+var SlideshowDataGridContext = createContext9(EMPTY_CONTEXT);
+function SlideshowDataGridProvider({
+  doc,
+  container,
+  mediaRevision,
+  children
+}) {
+  const sources = useMemo53(() => collectSlideshowDataSources(doc), [doc]);
+  const value = useMemo53(
+    () => ({ container: container ?? null, mediaRevision, sources }),
+    [container, mediaRevision, sources]
+  );
+  return /* @__PURE__ */ jsx77(SlideshowDataGridContext.Provider, { value, children });
+}
+var EMPTY_VIEW = { sort: [], filter: [] };
+function sourceKey(source) {
+  if (!source) return "";
+  return [
+    source.blockId,
+    source.src,
+    source.sheet ?? "",
+    source.anchor ?? "",
+    String(source.headerRow ?? ""),
+    source.sort ?? "",
+    source.filter ?? ""
+  ].join("\0");
+}
+function columnWidthsFor(ingest, availableWidth, fontSize) {
+  if (ingest.headers.length === 0) return [];
+  const widths = ingest.headers.map((header, col) => {
+    let chars = header.length;
+    for (const row of ingest.cells.slice(0, 100)) {
+      chars = Math.max(chars, String(row[col] ?? "").length);
+    }
+    return Math.max(fontSize * 4.5, Math.min(chars, 38) * fontSize * 0.58 + fontSize * 1.5);
+  });
+  const total = widths.reduce((sum, value) => sum + value, 0);
+  if (total >= availableWidth) return widths;
+  const bonus = (availableWidth - total) / widths.length;
+  return widths.map((value) => value + bonus);
+}
+function sourceForBlock(sources, block) {
+  const sourceBlockId = block.sourceBlockId;
+  return sources.get(block.id) ?? (sourceBlockId ? sources.get(sourceBlockId) : void 0);
+}
+function SlideshowDataGridRenderer({
+  block,
+  layer,
+  width,
+  height,
+  fallback
+}) {
+  const { container, mediaRevision, sources } = useContext9(SlideshowDataGridContext);
+  const source = sourceForBlock(sources, block);
+  const activeSourceKey = sourceKey(source);
+  const [remote, setRemote] = useState70({ key: "", status: "idle" });
+  useEffect60(() => {
+    if (!container || !source) {
+      setRemote({ key: activeSourceKey, status: "idle" });
+      return;
+    }
+    let cancelled = false;
+    let ownedProvider = null;
+    setRemote({ key: activeSourceKey, status: "loading" });
+    void (async () => {
+      try {
+        const bytes = await container.readFile(source.src);
+        if (!bytes) throw new Error("data sidecar not found");
+        const { ingest: ingest2 } = await ingestSidecarBytes(bytes, source.ext, {
+          ...source.sheet ? { sheet: source.sheet } : {},
+          ...source.anchor ? { anchor: source.anchor } : {},
+          ...source.headerRow !== void 0 ? { headerRow: source.headerRow } : {}
+        });
+        const provider2 = new TableStoreClient(ingest2);
+        ownedProvider = provider2;
+        await provider2.describe();
+        if (cancelled) {
+          provider2.dispose();
+          ownedProvider = null;
+          return;
+        }
+        const initialView2 = parseTableViewState2(source.sort, source.filter, ingest2.headers).view;
+        setRemote({ key: activeSourceKey, status: "ready", provider: provider2, ingest: ingest2, initialView: initialView2 });
+      } catch {
+        if (!cancelled) setRemote({ key: activeSourceKey, status: "error" });
+      }
+    })();
+    return () => {
+      cancelled = true;
+      ownedProvider?.dispose();
+    };
+  }, [activeSourceKey, container, mediaRevision]);
+  const currentRemote = remote.key === activeSourceKey ? remote : void 0;
+  const previewRows = useMemo53(
+    () => Array.isArray(layer.content.rows) ? layer.content.rows : [],
+    [layer.content.rows]
+  );
+  const previewHeaders = useMemo53(
+    () => Array.isArray(layer.content.headers) ? layer.content.headers : [],
+    [layer.content.headers]
+  );
+  const useLocalGrid = (!source || currentRemote?.status === "error") && previewRows.length > (layer.content.maxVisibleRows ?? 10);
+  const localProvider = useMemo53(
+    () => useLocalGrid ? new TableStoreClient({ headers: previewHeaders, cells: previewRows }) : null,
+    [previewHeaders, previewRows, useLocalGrid]
+  );
+  useEffect60(() => () => 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] = useState70(initialView);
+  useEffect60(() => setView(initialView), [initialView, provider]);
+  if (!provider || !ingest) return /* @__PURE__ */ jsx77(Fragment21, { children: fallback });
+  const { style } = layer.content;
+  const rowHeight = Math.max(32, style.fontSize * 2.1);
+  const footerHeight = Math.max(28, style.fontSize * 1.5);
+  const scrollerHeight = Math.max(rowHeight * 2, height - footerHeight);
+  const widths = columnWidthsFor(ingest, width - 2, style.fontSize);
+  const gridStyle = {
+    width: `${width}px`,
+    height: `${height}px`,
+    fontFamily: style.fontFamily ?? "system-ui, sans-serif",
+    "--squisq-grid-font-size": `${style.fontSize}px`,
+    "--squisq-grid-header-font-family": style.headerFontFamily ?? style.fontFamily ?? "system-ui, sans-serif",
+    "--squisq-grid-footer-font-size": `${style.fontSize * 0.6}px`,
+    "--squisq-grid-bg": style.cellBackground,
+    "--squisq-grid-text": style.cellColor,
+    "--squisq-grid-text-muted": style.cellColor,
+    "--squisq-grid-text-on-accent": style.headerColor,
+    "--squisq-grid-border": style.borderColor,
+    "--squisq-grid-border-subtle": style.borderColor,
+    "--squisq-grid-header-bg": style.headerBackground,
+    "--squisq-grid-header-text": style.headerColor,
+    "--squisq-grid-input-bg": style.cellBackground,
+    "--squisq-grid-row-hover": `color-mix(in srgb, ${style.headerBackground} 12%, ${style.cellBackground})`,
+    "--squisq-grid-selection-bg": `color-mix(in srgb, ${style.headerBackground} 22%, ${style.cellBackground})`,
+    "--squisq-grid-selection-border": style.headerBackground,
+    "--squisq-grid-focus-ring": style.headerBackground,
+    "--squisq-grid-accent": style.headerBackground,
+    "--squisq-grid-resize-handle": style.headerBackground
+  };
+  return /* @__PURE__ */ jsx77("div", { className: "squisq-slideshow-data-grid", style: gridStyle, children: /* @__PURE__ */ jsx77(
+    DataGrid,
+    {
+      provider,
+      view,
+      onViewChange: setView,
+      height: scrollerHeight,
+      rowHeight,
+      showFilters: false,
+      defaultColumnWidths: widths
+    }
+  ) });
+}
+
 // src/PreviewPanel.tsx
-import { Fragment as Fragment21, jsx as jsx77, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs62 } from "react/jsx-runtime";
 function PreviewPanel({
   basePath = "/",
   className,
@@ -38451,7 +38687,7 @@ function PreviewPanel({
   } = usePreviewSettings();
   const mainSurfaceRef = useRef58(null);
   const popupSurfaceRef = useRef58(null);
-  const [playbackState, setPlaybackState] = useState70(null);
+  const [playbackState, setPlaybackState] = useState71(null);
   const handlePlaybackStateChange = useCallback52((next) => {
     setPlaybackState(next);
   }, []);
@@ -38464,7 +38700,7 @@ function PreviewPanel({
   );
   const previewDoc = previewProjection?.playerDoc ?? null;
   const contentDoc = previewProjection?.contentDoc ?? null;
-  const followerAudioController = useMemo53(() => {
+  const followerAudioController = useMemo54(() => {
     if (!playbackState || !previewDoc) return null;
     const noOp = () => Promise.resolve();
     return {
@@ -38483,7 +38719,7 @@ function PreviewPanel({
       restart: noOp
     };
   }, [playbackState, previewDoc]);
-  const documentMarkdown = useMemo53(
+  const documentMarkdown = useMemo54(
     () => activeTransformStyle && contentDoc ? buildDocumentPreviewMarkdown(contentDoc) : markdownSource,
     [activeTransformStyle, contentDoc, markdownSource]
   );
@@ -38492,11 +38728,11 @@ function PreviewPanel({
   const isNarrateMode = activeDisplayMode === "narrate";
   const isDashboardMode = activeDisplayMode === "dashboard";
   const isFlashcardsMode = activeDisplayMode === "flashcards";
-  useEffect60(() => {
+  useEffect61(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -38559,22 +38795,22 @@ function PreviewPanel({
     presentation?.popupRoot
   ]);
   if (isParsing && !isNarrateMode && !previewDoc) {
-    return /* @__PURE__ */ jsx77("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx77("p", { children: "Parsing\u2026" }) });
+    return /* @__PURE__ */ jsx78("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx78("p", { children: "Parsing\u2026" }) });
   }
   if (parseError && !isNarrateMode) {
     return /* @__PURE__ */ jsxs62("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: [
-      /* @__PURE__ */ jsx77("h3", { children: "Parse Error" }),
-      /* @__PURE__ */ jsx77("pre", { children: parseError })
+      /* @__PURE__ */ jsx78("h3", { children: "Parse Error" }),
+      /* @__PURE__ */ jsx78("pre", { children: parseError })
     ] });
   }
   if (!previewDoc && !isDocumentMode && !isNarrateMode) {
-    return /* @__PURE__ */ jsx77("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx77("p", { children: "No content to preview. Start typing in the editor." }) });
+    return /* @__PURE__ */ jsx78("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx78("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__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         PrintPreview,
         {
           displayMode: activeDisplayMode,
@@ -38591,7 +38827,7 @@ function PreviewPanel({
       );
     }
     if (isDocumentMode) {
-      return /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         PlainHtmlPreview,
         {
           markdown: documentMarkdown,
@@ -38608,7 +38844,7 @@ function PreviewPanel({
     }
     if (isNarrateMode) {
       if (audience) return null;
-      return /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         TeleprompterView,
         {
           doc,
@@ -38627,7 +38863,7 @@ function PreviewPanel({
       );
     }
     if (isPageMode) {
-      return /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         LinearDocView2,
         {
           doc: contentDoc ?? doc,
@@ -38644,7 +38880,7 @@ function PreviewPanel({
       );
     }
     if (isFlashcardsMode) {
-      return /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78(
         FlashcardView,
         {
           doc: contentDoc ?? doc,
@@ -38659,7 +38895,7 @@ function PreviewPanel({
       );
     }
     if (isDashboardMode) {
-      return /* @__PURE__ */ jsx77("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx77(
+      return /* @__PURE__ */ jsx78("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx78(
         DashboardView,
         {
           doc: contentDoc ?? doc,
@@ -38674,10 +38910,10 @@ function PreviewPanel({
       ) });
     }
     if (audience && !followerAudioController) {
-      return /* @__PURE__ */ jsx77("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
+      return /* @__PURE__ */ jsx78("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
     }
     const audienceCaptionMode = playbackState?.captionMode;
-    return /* @__PURE__ */ jsx77(
+    return /* @__PURE__ */ jsx78(
       DocPlayer2,
       {
         doc: previewDoc,
@@ -38705,7 +38941,8 @@ function PreviewPanel({
         globalKeyboardShortcuts: !audience,
         showCodeCopyButton,
         onCopyCode,
-        onPlaybackStateChange: !audience && audienceWindowOpen ? handlePlaybackStateChange : void 0
+        onPlaybackStateChange: !audience && audienceWindowOpen ? handlePlaybackStateChange : void 0,
+        tableContentRenderer: !audience && activeDisplayMode === "slideshow" ? SlideshowDataGridRenderer : void 0
       },
       `${audience ? "audience" : "primary"}-${activeTransformStyle || "none"}`
     );
@@ -38719,49 +38956,57 @@ function PreviewPanel({
     minHeight: 0,
     background: presentation?.activeTarget ? activeTheme.colors.background : void 0
   };
-  return /* @__PURE__ */ jsxs62(Fragment21, { children: [
-    /* @__PURE__ */ jsx77(
-      "div",
-      {
-        className: `squisq-preview-container ${className || ""}`,
-        "data-testid": "preview-panel",
-        style: {
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-          background: "var(--squisq-bg)"
-        },
-        children: /* @__PURE__ */ jsx77("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
-      }
-    ),
-    audienceWindowOpen && presentation?.popupRoot && !isNarrateMode ? createPortal16(
-      /* @__PURE__ */ jsx77(
-        "div",
-        {
-          className: "squisq-editor-shell squisq-presentation-window",
-          "data-theme": colorScheme,
-          children: /* @__PURE__ */ jsx77("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsxs62(
+    SlideshowDataGridProvider,
+    {
+      doc,
+      container: workspaceContainer,
+      mediaRevision,
+      children: [
+        /* @__PURE__ */ jsx78(
+          "div",
+          {
+            className: `squisq-preview-container ${className || ""}`,
+            "data-testid": "preview-panel",
+            style: {
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              background: "var(--squisq-bg)"
+            },
+            children: /* @__PURE__ */ jsx78("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
+          }
+        ),
+        audienceWindowOpen && presentation?.popupRoot && !isNarrateMode ? createPortal16(
+          /* @__PURE__ */ jsx78(
             "div",
             {
-              ref: popupSurfaceRef,
-              className: "squisq-preview-player squisq-presentation-window-surface",
-              style: surfaceStyle,
-              "aria-label": "Audience presentation",
-              children: renderSurface(true)
+              className: "squisq-editor-shell squisq-presentation-window",
+              "data-theme": colorScheme,
+              children: /* @__PURE__ */ jsx78("div", { className: "squisq-preview-container squisq-presentation-window-preview", children: /* @__PURE__ */ jsx78(
+                "div",
+                {
+                  ref: popupSurfaceRef,
+                  className: "squisq-preview-player squisq-presentation-window-surface",
+                  style: surfaceStyle,
+                  "aria-label": "Audience presentation",
+                  children: renderSurface(true)
+                }
+              ) })
             }
-          ) })
-        }
-      ),
-      presentation.popupRoot
-    ) : null
-  ] });
+          ),
+          presentation.popupRoot
+        ) : null
+      ]
+    }
+  );
 }
 
 // src/MediaBin.tsx
-import { useState as useState71, useEffect as useEffect61, useRef as useRef59, useCallback as useCallback53 } from "react";
-import { jsx as jsx78, jsxs as jsxs63 } from "react/jsx-runtime";
+import { useState as useState72, useEffect as useEffect62, useRef as useRef59, useCallback as useCallback53 } from "react";
+import { jsx as jsx79, jsxs as jsxs63 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -38829,20 +39074,20 @@ function MediaBin({
   allowBinaryDownloads = true,
   highlightPath = null
 }) {
-  const [entries, setEntries] = useState71([]);
+  const [entries, setEntries] = useState72([]);
   const listRef = useRef59(null);
-  useEffect61(() => {
+  useEffect62(() => {
     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] = useState71({});
-  const [loading, setLoading] = useState71(false);
-  const [isDropActive, setIsDropActive] = useState71(false);
-  const [downloadingPath, setDownloadingPath] = useState71(null);
-  const [contextMenu, setContextMenu] = useState71(null);
+  const [thumbUrls, setThumbUrls] = useState72({});
+  const [loading, setLoading] = useState72(false);
+  const [isDropActive, setIsDropActive] = useState72(false);
+  const [downloadingPath, setDownloadingPath] = useState72(null);
+  const [contextMenu, setContextMenu] = useState72(null);
   const fileInputRef = useRef59(null);
   const contextMenuRef = useRef59(null);
   const dropDepthRef = useRef59(0);
@@ -38864,7 +39109,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect61(() => {
+  useEffect62(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -38885,7 +39130,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect61(() => {
+  useEffect62(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -39091,12 +39336,12 @@ function MediaBin({
                 "aria-haspopup": "dialog",
                 "aria-expanded": isRecorderOpen,
                 children: [
-                  /* @__PURE__ */ jsx78("span", { className: "squisq-media-bin-record-dot", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx79("span", { className: "squisq-media-bin-record-dot", "aria-hidden": "true" }),
                   "Record"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx79(
               "button",
               {
                 type: "button",
@@ -39112,10 +39357,10 @@ function MediaBin({
         /* @__PURE__ */ jsxs63("div", { className: "squisq-media-bin-list", ref: listRef, children: [
           !mediaProvider && /* @__PURE__ */ jsxs63("div", { className: "squisq-media-bin-empty", children: [
             "No media context.",
-            /* @__PURE__ */ jsx78("br", {}),
+            /* @__PURE__ */ jsx79("br", {}),
             "Load a content zip or select a storage slot."
           ] }),
-          mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx78("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
+          mediaProvider && entries.length === 0 && !loading && /* @__PURE__ */ jsx79("div", { className: "squisq-media-bin-empty", children: "No files yet." }),
           entries.map((entry) => {
             const thumb = thumbUrls[entry.name];
             const basename = basenameForPath(entry.name);
@@ -39148,7 +39393,7 @@ ${formatSize(entry.size)}`,
                 onDragStart: handleDragStart,
                 onKeyDown: (e2) => handleItemKeyDown(entry, e2),
                 children: [
-                  thumb ? /* @__PURE__ */ jsx78(
+                  thumb ? /* @__PURE__ */ jsx79(
                     "img",
                     {
                       src: thumb,
@@ -39156,15 +39401,15 @@ ${formatSize(entry.size)}`,
                       className: "squisq-media-bin-thumb",
                       draggable: false
                     }
-                  ) : /* @__PURE__ */ jsx78("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
+                  ) : /* @__PURE__ */ jsx79("span", { className: "squisq-media-bin-icon", children: iconForMime(entry.mimeType) }),
                   /* @__PURE__ */ jsxs63("div", { className: "squisq-media-bin-meta", children: [
-                    /* @__PURE__ */ jsx78("div", { className: "squisq-media-bin-name", children: basename }),
+                    /* @__PURE__ */ jsx79("div", { className: "squisq-media-bin-name", children: basename }),
                     /* @__PURE__ */ jsxs63("div", { className: "squisq-media-bin-detail-row", children: [
-                      /* @__PURE__ */ jsx78("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
-                      isUnused && /* @__PURE__ */ jsx78("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
+                      /* @__PURE__ */ jsx79("span", { className: "squisq-media-bin-size", children: formatSize(entry.size) }),
+                      isUnused && /* @__PURE__ */ jsx79("span", { className: "squisq-media-bin-unused-badge", title: "Not used in document", children: "Unused" })
                     ] })
                   ] }),
-                  allowBinaryDownloads && /* @__PURE__ */ jsx78(
+                  allowBinaryDownloads && /* @__PURE__ */ jsx79(
                     "button",
                     {
                       type: "button",
@@ -39178,7 +39423,7 @@ ${formatSize(entry.size)}`,
                         void handleDownloadEntry(entry);
                       },
                       onDragStart: (event) => event.preventDefault(),
-                      children: /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
+                      children: /* @__PURE__ */ jsx79("span", { "aria-hidden": "true", children: downloadingPath === entry.name ? "\u2026" : "\u2193" })
                     }
                   )
                 ]
@@ -39188,11 +39433,11 @@ ${formatSize(entry.size)}`,
           })
         ] }),
         isDropActive && /* @__PURE__ */ jsxs63("div", { className: "squisq-media-bin-drop-target", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx78("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
-          /* @__PURE__ */ jsx78("strong", { children: "Drop images here" }),
-          /* @__PURE__ */ jsx78("span", { children: "Add to Files" })
+          /* @__PURE__ */ jsx79("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
+          /* @__PURE__ */ jsx79("strong", { children: "Drop images here" }),
+          /* @__PURE__ */ jsx79("span", { children: "Add to Files" })
         ] }),
-        contextMenu && /* @__PURE__ */ jsx78(
+        contextMenu && /* @__PURE__ */ jsx79(
           "div",
           {
             ref: contextMenuRef,
@@ -39200,7 +39445,7 @@ ${formatSize(entry.size)}`,
             role: "menu",
             "aria-label": `${contextMenu.entry.name} actions`,
             style: contextMenuStyle,
-            children: /* @__PURE__ */ jsx78(
+            children: /* @__PURE__ */ jsx79(
               "button",
               {
                 type: "button",
@@ -39213,7 +39458,7 @@ ${formatSize(entry.size)}`,
             )
           }
         ),
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx79(
           "input",
           {
             ref: fileInputRef,
@@ -39229,8 +39474,8 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState72 } from "react";
-import { Fragment as Fragment22, jsx as jsx79, jsxs as jsxs64 } from "react/jsx-runtime";
+import { useState as useState73 } from "react";
+import { Fragment as Fragment22, jsx as jsx80, jsxs as jsxs64 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
   zoneProps,
@@ -39238,8 +39483,8 @@ function DropZoneOverlay({
 }) {
   const showMedia = dragContentType === "media" || dragContentType === "mixed";
   const showText = dragContentType === "text" || dragContentType === "mixed";
-  return /* @__PURE__ */ jsx79("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs64("div", { className: "squisq-drop-overlay-inner", children: [
-    showMedia && /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80("div", { className: "squisq-drop-overlay", children: /* @__PURE__ */ jsxs64("div", { className: "squisq-drop-overlay-inner", children: [
+    showMedia && /* @__PURE__ */ jsx80(
       DropZone,
       {
         target: "media",
@@ -39252,7 +39497,7 @@ function DropZoneOverlay({
       }
     ),
     showText && /* @__PURE__ */ jsxs64(Fragment22, { children: [
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         DropZone,
         {
           target: "insert",
@@ -39263,7 +39508,7 @@ function DropZoneOverlay({
           variant: "insert"
         }
       ),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         DropZone,
         {
           target: "replace",
@@ -39286,7 +39531,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState72(false);
+  const [isHovering, setIsHovering] = useState73(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs64(
     "div",
@@ -39321,16 +39566,16 @@ function DropZone({
         props.onDrop(e2);
       },
       children: [
-        /* @__PURE__ */ jsx79("span", { className: "squisq-drop-zone-icon", children: icon }),
-        /* @__PURE__ */ jsx79("span", { className: "squisq-drop-zone-label", children: label }),
-        /* @__PURE__ */ jsx79("span", { className: "squisq-drop-zone-desc", children: description })
+        /* @__PURE__ */ jsx80("span", { className: "squisq-drop-zone-icon", children: icon }),
+        /* @__PURE__ */ jsx80("span", { className: "squisq-drop-zone-label", children: label }),
+        /* @__PURE__ */ jsx80("span", { className: "squisq-drop-zone-desc", children: description })
       ]
     }
   );
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect62, useLayoutEffect as useLayoutEffect12, useRef as useRef60, useState as useState73 } from "react";
+import { useEffect as useEffect63, useLayoutEffect as useLayoutEffect12, useRef as useRef60, useState as useState74 } from "react";
 import { createPortal as createPortal17 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -39343,10 +39588,10 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 }
 
 // src/Tooltip.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState73(null);
+  const [state, setState3] = useState74(null);
   const tooltipRef = useRef60(null);
   const timerRef = useRef60(null);
   const currentTargetRef = useRef60(null);
@@ -39362,7 +39607,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect62(() => {
+  useEffect63(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -39428,7 +39673,7 @@ function TooltipLayer() {
   }, []);
   if (!state) return null;
   return createPortal17(
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx81(
       "div",
       {
         role: "tooltip",
@@ -39448,35 +39693,37 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect63, useRef as useRef61, useState as useState74, useCallback as useCallback54, useMemo as useMemo55 } from "react";
+import { useEffect as useEffect64, useRef as useRef61, useState as useState75, useCallback as useCallback54, useMemo as useMemo56 } from "react";
 
 // src/BlockPreviewPanel.tsx
-import { useMemo as useMemo54 } from "react";
+import { useMemo as useMemo55 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS7 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks7, DEFAULT_THEME as DEFAULT_THEME7 } from "@bendyline/squisq/doc";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 function BlockPreviewPanel({ basePath = "/" }) {
-  const { doc, activeBlockStartLine, mediaProvider } = useEditorContext();
+  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 block = useMemo54(() => {
-    if (!doc) return null;
-    const blocks = flattenBlocks7(doc.blocks);
+  const projection = usePreviewProjection(doc, "", workspaceContainer, fileName, mediaRevision);
+  const previewDoc = projection?.contentDoc ?? doc;
+  const block = useMemo55(() => {
+    if (!previewDoc) return null;
+    const blocks = flattenBlocks7(previewDoc.blocks);
     if (blocks.length === 0) return null;
     return blocks.find((b) => b.sourceHeading?.position?.start.line === activeBlockStartLine) ?? blocks[0];
-  }, [doc, activeBlockStartLine]);
-  const visual = useMemo54(
-    () => doc && block ? resolveBlockVisual(doc, block, theme, viewport) : null,
-    [doc, block, theme, viewport]
+  }, [previewDoc, activeBlockStartLine]);
+  const visual = useMemo55(
+    () => previewDoc && block ? resolveBlockVisual(previewDoc, block, theme, viewport) : null,
+    [previewDoc, block, theme, viewport]
   );
   if (!visual) return null;
-  return /* @__PURE__ */ jsx81("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82("div", { className: "squisq-block-preview-panel", "data-testid": "block-preview-panel", "aria-hidden": true, children: /* @__PURE__ */ jsx82(
     "div",
     {
       className: "squisq-block-preview-frame",
       style: { aspectRatio: `${viewport.width} / ${viewport.height}` },
-      children: /* @__PURE__ */ jsx81(
+      children: /* @__PURE__ */ jsx82(
         BlockThumbnail,
         {
           visual,
@@ -39490,7 +39737,7 @@ function BlockPreviewPanel({ basePath = "/" }) {
 }
 
 // src/proofing/ProofingPanel.tsx
-import { jsx as jsx82, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs65 } from "react/jsx-runtime";
 var CATEGORY_LABELS = {
   spelling: "Spelling",
   grammar: "Grammar",
@@ -39504,10 +39751,10 @@ function ProofingPanel() {
     /* @__PURE__ */ jsxs65("div", { className: "squisq-proof-panel-header", children: [
       /* @__PURE__ */ jsxs65("span", { className: "squisq-proof-panel-title", children: [
         "Proofing",
-        /* @__PURE__ */ jsx82("span", { className: "squisq-proof-panel-count", children: findings.length })
+        /* @__PURE__ */ jsx83("span", { className: "squisq-proof-panel-count", children: findings.length })
       ] }),
       /* @__PURE__ */ jsxs65("span", { className: "squisq-proof-panel-actions", children: [
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83(
           "button",
           {
             type: "button",
@@ -39519,7 +39766,7 @@ function ProofingPanel() {
             children: "\u2191"
           }
         ),
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83(
           "button",
           {
             type: "button",
@@ -39531,7 +39778,7 @@ function ProofingPanel() {
             children: "\u2193"
           }
         ),
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83(
           "button",
           {
             type: "button",
@@ -39544,20 +39791,20 @@ function ProofingPanel() {
         )
       ] })
     ] }),
-    state.status === "loading" && /* @__PURE__ */ jsx82("div", { className: "squisq-proof-panel-empty", children: "Loading proofing engine\u2026" }),
+    state.status === "loading" && /* @__PURE__ */ jsx83("div", { className: "squisq-proof-panel-empty", children: "Loading proofing engine\u2026" }),
     state.status === "error" && /* @__PURE__ */ jsxs65("div", { className: "squisq-proof-panel-empty", children: [
       "Proofing failed to load.",
-      /* @__PURE__ */ jsx82("button", { type: "button", className: "squisq-proof-panel-retry", onClick: state.retrySetup, children: "Retry" })
+      /* @__PURE__ */ jsx83("button", { type: "button", className: "squisq-proof-panel-retry", onClick: state.retrySetup, children: "Retry" })
     ] }),
-    state.status === "ready" && findings.length === 0 && /* @__PURE__ */ jsx82("div", { className: "squisq-proof-panel-empty", children: "No issues found." }),
-    /* @__PURE__ */ jsx82("ul", { className: "squisq-proof-panel-list", children: findings.map((finding) => /* @__PURE__ */ jsx82("li", { children: /* @__PURE__ */ jsxs65(
+    state.status === "ready" && findings.length === 0 && /* @__PURE__ */ jsx83("div", { className: "squisq-proof-panel-empty", children: "No issues found." }),
+    /* @__PURE__ */ jsx83("ul", { className: "squisq-proof-panel-list", children: findings.map((finding) => /* @__PURE__ */ jsx83("li", { children: /* @__PURE__ */ jsxs65(
       "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__ */ jsx82(
+          /* @__PURE__ */ jsx83(
             "span",
             {
               className: `squisq-proof-dot squisq-proof-dot--${finding.category}`,
@@ -39566,8 +39813,8 @@ function ProofingPanel() {
             }
           ),
           /* @__PURE__ */ jsxs65("span", { className: "squisq-proof-panel-row-body", children: [
-            /* @__PURE__ */ jsx82("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
-            /* @__PURE__ */ jsx82("span", { className: "squisq-proof-panel-message", children: finding.message })
+            /* @__PURE__ */ jsx83("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
+            /* @__PURE__ */ jsx83("span", { className: "squisq-proof-panel-message", children: finding.message })
           ] })
         ]
       }
@@ -39820,7 +40067,7 @@ import {
   createMediaProviderFromContainer
 } from "@bendyline/squisq/storage";
 import { MediaContext as MediaContext6, useMediaClipDurations } from "@bendyline/squisq-react";
-import { Fragment as Fragment23, jsx as jsx83, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx84, jsxs as jsxs66 } from "react/jsx-runtime";
 function EditorShell({
   initialMarkdown = "",
   initialView = "wysiwyg",
@@ -39903,14 +40150,14 @@ function EditorShell({
   themeOverride = null
 }) {
   const effectiveContainer = workspaceContainer ?? null;
-  const effectiveMediaProvider = useMemo55(() => {
+  const effectiveMediaProvider = useMemo56(() => {
     if (mediaProvider !== void 0) return mediaProvider;
     if (effectiveContainer) return createMediaProviderFromContainer(effectiveContainer);
     return void 0;
   }, [mediaProvider, effectiveContainer]);
   const filesToggleEnabled = showFilesToggle ?? effectiveMediaProvider !== void 0;
   const effectiveInitialView = hostMode === "chat" || !showPlayTab && initialView === "preview" ? "wysiwyg" : initialView;
-  return /* @__PURE__ */ jsx83(MediaContext6.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(MediaContext6.Provider, { value: effectiveMediaProvider ?? null, children: /* @__PURE__ */ jsx84(
     EditorProvider,
     {
       initialMarkdown,
@@ -39952,7 +40199,7 @@ function EditorShell({
       themeInheritance,
       viewPreferences,
       onViewPreferencesChange,
-      children: /* @__PURE__ */ jsx83(ProofingRoot, { children: /* @__PURE__ */ jsx83(
+      children: /* @__PURE__ */ jsx84(ProofingRoot, { children: /* @__PURE__ */ jsx84(
         EditorShellInner,
         {
           basePath,
@@ -40007,11 +40254,11 @@ function EditorShell({
 }
 function UseModeToolbarControls({ allowPrint }) {
   const printMode = usePrintMode();
-  if (printMode.active) return /* @__PURE__ */ jsx83(PrintPreviewToolbar, {});
+  if (printMode.active) return /* @__PURE__ */ jsx84(PrintPreviewToolbar, {});
   return /* @__PURE__ */ jsxs66(Fragment23, { children: [
-    /* @__PURE__ */ jsx83(PreviewToolbarControls, {}),
-    /* @__PURE__ */ jsx83(PresentationModeControl, {}),
-    allowPrint && /* @__PURE__ */ jsx83(PrintModeControl, {})
+    /* @__PURE__ */ jsx84(PreviewToolbarControls, {}),
+    /* @__PURE__ */ jsx84(PresentationModeControl, {}),
+    allowPrint && /* @__PURE__ */ jsx84(PrintModeControl, {})
   ] });
 }
 function UseModeProviders({
@@ -40020,13 +40267,13 @@ function UseModeProviders({
   allowPresentationWindow,
   allowPresentationFullscreen
 }) {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     PresentationModeProvider,
     {
       rootRef,
       allowWindow: allowPresentationWindow,
       allowFullscreen: allowPresentationFullscreen,
-      children: /* @__PURE__ */ jsx83(PrintModeProvider, { rootRef, children })
+      children: /* @__PURE__ */ jsx84(PrintModeProvider, { rootRef, children })
     }
   );
 }
@@ -40117,7 +40364,7 @@ function EditorShellInner({
     workspaceContainer
   );
   const timelineDoc = timelineProjection?.contentDoc ?? doc;
-  const timelineRawSchedule = useMemo55(
+  const timelineRawSchedule = useMemo56(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc) : [],
     [timelineDoc]
   );
@@ -40126,19 +40373,19 @@ function EditorShellInner({
     basePath,
     mediaProvider ?? null
   );
-  const timelineDuration = useMemo55(
+  const timelineDuration = useMemo56(
     () => timelineDoc ? getDocPlaybackDuration3(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src)
     }) : 0,
     [timelineDoc, timelineClipDurations]
   );
-  const timelineSchedule = useMemo55(
+  const timelineSchedule = useMemo56(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src)
     }) : [],
     [timelineDoc, timelineClipDurations]
   );
-  const timelineVideoSchedule = useMemo55(
+  const timelineVideoSchedule = useMemo56(
     () => timelineDoc ? [
       ...timelineSchedule.filter((clip) => clip.kind === "video"),
       ...collectEmbeddedVideoSchedule(timelineDoc)
@@ -40147,16 +40394,16 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState74(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState74(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState75(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState75(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState74(false);
-  const [filesFocusPath, setFilesFocusPath] = useState74(null);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState74(0);
-  const [mediaCount, setMediaCount] = useState74(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState74(false);
+  const [showFiles, setShowFiles] = useState75(false);
+  const [filesFocusPath, setFilesFocusPath] = useState75(null);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState75(0);
+  const [mediaCount, setMediaCount] = useState75(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState75(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
-  const usedMediaPaths = useMemo55(
+  const usedMediaPaths = useMemo56(
     () => collectMediaReferencesFromMarkdown(markdownSource),
     [markdownSource]
   );
@@ -40166,13 +40413,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect63(() => {
+  useEffect64(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -40196,7 +40443,7 @@ function EditorShellInner({
       cancelled = true;
     };
   }, [mediaProvider, mediaListRefreshKey]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (showFilesWhenNotEmpty && mediaCount > 0) setShowFiles(true);
   }, [mediaCount, showFilesWhenNotEmpty]);
   const handleToggleFiles = useCallback54(() => {
@@ -40235,7 +40482,7 @@ ${snippet}` : snippet);
     [activeView, tiptapEditor, monacoEditor, insertAtCursor, markdownSource, setMarkdownSource]
   );
   const docBasenameRef = useRef61("document");
-  useEffect63(() => {
+  useEffect64(() => {
     let cancelled = false;
     docBasenameRef.current = "document";
     if (!workspaceContainer) return;
@@ -40356,7 +40603,7 @@ ${snippet}` : snippet);
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect63(() => {
+  useEffect64(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback54(
@@ -40444,7 +40691,7 @@ ${snippet}` : snippet);
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsx83(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx84(
           PreviewSettingsProvider,
           {
             doc,
@@ -40459,16 +40706,16 @@ ${snippet}` : snippet);
                 children: [
                   isImageMode ? (toolbarSlotLeft || toolbarSlotRight) && /* @__PURE__ */ jsxs66("div", { className: "squisq-editor-header squisq-editor-header--image", children: [
                     toolbarSlotLeft,
-                    /* @__PURE__ */ jsx83("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ jsx84("div", { style: { flex: 1 } }),
                     toolbarSlotRight
-                  ] }) : /* @__PURE__ */ jsx83("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx83(
+                  ] }) : /* @__PURE__ */ jsx84("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx84(
                     Toolbar,
                     {
                       showFiles,
                       fileCount: mediaCount,
                       onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
                       slotLeft: toolbarSlotLeft,
-                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx83(UseModeToolbarControls, { allowPrint }),
+                      slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx84(UseModeToolbarControls, { allowPrint }),
                       slotAfterActions: toolbarSlotAfterActions,
                       slotRight: toolbarSlotRight,
                       showPlayTab,
@@ -40502,7 +40749,7 @@ ${snippet}` : snippet);
                               position: "relative"
                             },
                             children: [
-                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx83(
+                              isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx84(
                                 ImageEditor,
                                 {
                                   filesContainer: imageEditorContainer,
@@ -40512,10 +40759,10 @@ ${snippet}` : snippet);
                                   onExport: onImageExport,
                                   surface: colorScheme === "dark" ? DARK_SURFACE : LIGHT_SURFACE
                                 }
-                              ) : /* @__PURE__ */ jsx83(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
+                              ) : /* @__PURE__ */ jsx84(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
                               !isImageMode && activeView === "raw" && /* @__PURE__ */ jsxs66("div", { className: "squisq-editor-with-gutter", children: [
-                                isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx83(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                /* @__PURE__ */ jsx83(
+                                isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx84(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                /* @__PURE__ */ jsx84(
                                   BlockCardView,
                                   {
                                     active: isCardMode,
@@ -40524,7 +40771,7 @@ ${snippet}` : snippet);
                                     onPrev: prevBlock,
                                     onNext: nextBlock,
                                     onAdd: addBlock,
-                                    children: /* @__PURE__ */ jsx83("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx83(
+                                    children: /* @__PURE__ */ jsx84("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx84(
                                       RawEditor,
                                       {
                                         monacoTheme: colorScheme === "dark" ? "vs-dark" : "vs",
@@ -40535,9 +40782,9 @@ ${snippet}` : snippet);
                                   },
                                   "raw-frame"
                                 ),
-                                isCodeMode && codeContext && /* @__PURE__ */ jsx83(CodeContextZones, { options: codeContext }, "code-context"),
-                                isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx83(BlockPreviewPanel, { basePath }, "block-preview"),
-                                isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx83(
+                                isCodeMode && codeContext && /* @__PURE__ */ jsx84(CodeContextZones, { options: codeContext }, "code-context"),
+                                isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx84(BlockPreviewPanel, { basePath }, "block-preview"),
+                                isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx84(
                                   InlinePreviewGutter,
                                   {
                                     width: inlinePreviewWidth,
@@ -40548,8 +40795,8 @@ ${snippet}` : snippet);
                                 )
                               ] }, "raw-shell"),
                               isMarkdownMode && activeView === "wysiwyg" && /* @__PURE__ */ jsxs66("div", { className: "squisq-editor-with-gutter", children: [
-                                outlineVisible && /* @__PURE__ */ jsx83(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                                /* @__PURE__ */ jsx83(
+                                outlineVisible && /* @__PURE__ */ jsx84(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                                /* @__PURE__ */ jsx84(
                                   BlockCardView,
                                   {
                                     active: isCardMode,
@@ -40558,7 +40805,7 @@ ${snippet}` : snippet);
                                     onPrev: prevBlock,
                                     onNext: nextBlock,
                                     onAdd: addBlock,
-                                    children: /* @__PURE__ */ jsx83(
+                                    children: /* @__PURE__ */ jsx84(
                                       WysiwygEditor,
                                       {
                                         submitOnEnter,
@@ -40575,8 +40822,8 @@ ${snippet}` : snippet);
                                   },
                                   "wysiwyg-frame"
                                 ),
-                                isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx83(BlockPreviewPanel, { basePath }, "block-preview"),
-                                !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx83(
+                                isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx84(BlockPreviewPanel, { basePath }, "block-preview"),
+                                !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx84(
                                   InlinePreviewGutter,
                                   {
                                     width: inlinePreviewWidth,
@@ -40586,7 +40833,7 @@ ${snippet}` : snippet);
                                   "inline"
                                 )
                               ] }, "wysiwyg-shell"),
-                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx83(
+                              isMarkdownMode && isPreview && /* @__PURE__ */ jsx84(
                                 PreviewPanel,
                                 {
                                   basePath,
@@ -40599,7 +40846,7 @@ ${snippet}` : snippet);
                             ]
                           }
                         ),
-                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx83(
+                        isTimelineMode && timelineVideoVisible && /* @__PURE__ */ jsx84(
                           TimelineVideoPanel,
                           {
                             schedule: timelineVideoSchedule,
@@ -40609,7 +40856,7 @@ ${snippet}` : snippet);
                             onClose: () => setTimelineVideoVisible(false)
                           }
                         ),
-                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx83(
+                        isTimelineMode && timelineCompositionVisible && /* @__PURE__ */ jsx84(
                           TimelineCompositionPanel,
                           {
                             doc,
@@ -40619,7 +40866,7 @@ ${snippet}` : snippet);
                             onClose: () => setTimelineCompositionVisible(false)
                           }
                         ),
-                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx83(
+                        isMarkdownMode && showFiles && /* @__PURE__ */ jsx84(
                           MediaBin,
                           {
                             mediaProvider,
@@ -40635,9 +40882,9 @@ ${snippet}` : snippet);
                             highlightPath: filesFocusPath
                           }
                         ),
-                        isMarkdownMode && /* @__PURE__ */ jsx83(ProofingPanel, {}),
-                        isMarkdownMode && /* @__PURE__ */ jsx83(ThemeDesignerDock, {}),
-                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx83(
+                        isMarkdownMode && /* @__PURE__ */ jsx84(ProofingPanel, {}),
+                        isMarkdownMode && /* @__PURE__ */ jsx84(ThemeDesignerDock, {}),
+                        isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx84(
                           DropZoneOverlay,
                           {
                             dragContentType,
@@ -40648,7 +40895,7 @@ ${snippet}` : snippet);
                       ]
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx83(
+                  isTimelineMode && /* @__PURE__ */ jsx84(
                     TimelineToolbar,
                     {
                       literalVideoVisible: timelineVideoVisible,
@@ -40659,7 +40906,7 @@ ${snippet}` : snippet);
                       onToggleComposition: () => setTimelineCompositionVisible((visible) => !visible)
                     }
                   ),
-                  isTimelineMode && /* @__PURE__ */ jsx83(
+                  isTimelineMode && /* @__PURE__ */ jsx84(
                     TimelineTrack,
                     {
                       doc: timelineDoc,
@@ -40668,8 +40915,8 @@ ${snippet}` : snippet);
                       basePath
                     }
                   ),
-                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx83(StatusBar, { slotRight: statusBarSlotRight }),
-                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx83(
+                  statusBarVisible && !isImageMode && /* @__PURE__ */ jsx84(StatusBar, { slotRight: statusBarSlotRight }),
+                  isMarkdownMode && allowRecording && mediaProvider && /* @__PURE__ */ jsx84(
                     RecorderEntry,
                     {
                       open: mediaBinRecorderOpen,
@@ -40682,8 +40929,8 @@ ${snippet}` : snippet);
             )
           }
         ) }),
-        /* @__PURE__ */ jsx83(TooltipLayer, {}),
-        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84(TooltipLayer, {}),
+        imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx84(
           ImageEditModal,
           {
             relativePath: imageEditTarget,
@@ -40702,7 +40949,7 @@ ${snippet}` : snippet);
       ]
     }
   );
-  return /* @__PURE__ */ jsx83(EditorContextMenuProvider, { rootRef: shellRef, readOnly, children: shell });
+  return /* @__PURE__ */ jsx84(EditorContextMenuProvider, { rootRef: shellRef, readOnly, children: shell });
 }
 function ImageEditModal({
   relativePath,
@@ -40719,7 +40966,7 @@ function ImageEditModal({
   useModalDialog({ rootRef: modalRef, dialogRef: surfaceRef, onClose });
   const extension = relativePath.split(/[?#]/, 1)[0]?.split(".").pop()?.toLowerCase();
   const saveFormat = extension === "png" ? "png" : extension === "jpg" || extension === "jpeg" ? "jpeg" : extension === "webp" ? "webp" : null;
-  const sidecar = useMemo55(() => {
+  const sidecar = useMemo56(() => {
     const sanitized = relativePath.replace(/[^a-zA-Z0-9._-]+/g, "_");
     let hash = 2166136261;
     for (let i = 0; i < relativePath.length; i++) {
@@ -40730,9 +40977,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState74(null);
-  const [resolveError, setResolveError] = useState74(null);
-  useEffect63(() => {
+  const [initialSrc, setInitialSrc] = useState75(null);
+  const [resolveError, setResolveError] = useState75(null);
+  useEffect64(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -40762,7 +41009,7 @@ function ImageEditModal({
     },
     [mediaProvider, relativePath, onSaved]
   );
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       ref: modalRef,
@@ -40776,9 +41023,9 @@ function ImageEditModal({
       },
       children: /* @__PURE__ */ jsxs66("div", { ref: surfaceRef, className: "squisq-image-edit-modal__surface", children: [
         /* @__PURE__ */ jsxs66("header", { className: "squisq-image-edit-modal__header", children: [
-          /* @__PURE__ */ jsx83("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
-          /* @__PURE__ */ jsx83("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
-          /* @__PURE__ */ jsx83(
+          /* @__PURE__ */ jsx84("span", { className: "squisq-image-edit-modal__title", children: "Edit image" }),
+          /* @__PURE__ */ jsx84("span", { className: "squisq-image-edit-modal__path", children: relativePath }),
+          /* @__PURE__ */ jsx84(
             "button",
             {
               type: "button",
@@ -40790,10 +41037,10 @@ function ImageEditModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx83("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs66("div", { className: "squisq-image-edit-modal__error", children: [
+        /* @__PURE__ */ jsx84("div", { className: "squisq-image-edit-modal__body", children: resolveError ? /* @__PURE__ */ jsxs66("div", { className: "squisq-image-edit-modal__error", children: [
           "Failed to load image: ",
           resolveError
-        ] }) : !saveFormat ? /* @__PURE__ */ jsx83("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx83("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx83(
+        ] }) : !saveFormat ? /* @__PURE__ */ jsx84("div", { className: "squisq-image-edit-modal__error", children: "Editing supports PNG, JPEG, and WebP images without changing the asset type." }) : !initialSrc ? /* @__PURE__ */ jsx84("div", { className: "squisq-image-edit-modal__loading", children: "Loading image\u2026" }) : /* @__PURE__ */ jsx84(
           ImageEditor,
           {
             filesContainer: sidecar,