@bendyline/squisq-editor-react 2.13.8 → 2.13.10

package/dist/{chunk-WZONLKTC.js → chunk-JD7IATM6.js}

@@ -19,7 +19,7 @@ import {
   useDictationState,
   useEditorContext,
   useEditorContextOptional
-} from "./chunk-PCIVTLQG.js";
+} from "./chunk-D2QFSFG2.js";
 import {
   monacoLanguageRequestKey,
   monacoLanguagesForDocument,
@@ -52,13 +52,13 @@ import {
   documentTitleFromFileName,
   resolveBlockVisual,
   useModalDialog
-} from "./chunk-LXGQA2SY.js";
+} from "./chunk-FOKUOC7E.js";
 import {
   Icon
 } from "./chunk-UYB5CPRE.js";
 import {
   TeleprompterView
-} from "./chunk-DJS5I5NO.js";
+} from "./chunk-PQSFLC2R.js";
 
 // src/useMonacoLoader.ts
 import { useEffect, useState } from "react";
@@ -33908,7 +33908,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback43, useEffect as useEffect54, useMemo as useMemo41, useRef as useRef50, useState as useState67 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect54, useMemo as useMemo42, useRef as useRef51, useState as useState67 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection as Selection2 } from "@tiptap/pm/state";
 import { Extension as Extension17, getHTMLFromFragment } from "@tiptap/core";
@@ -34252,17 +34252,17 @@ import { parseMarkdown as parseMarkdown6 } from "@bendyline/squisq/markdown";
 // src/mermaid/mermaidThemeStore.ts
 function createMermaidThemeStore(initialTheme) {
   let theme = initialTheme;
-  const listeners = /* @__PURE__ */ new Set();
+  const listeners2 = /* @__PURE__ */ new Set();
   return {
     getSnapshot: () => theme,
     subscribe: (listener) => {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
+      listeners2.add(listener);
+      return () => listeners2.delete(listener);
     },
     setTheme: (nextTheme) => {
       if (Object.is(theme, nextTheme)) return;
       theme = nextTheme;
-      listeners.forEach((listener) => listener());
+      listeners2.forEach((listener) => listener());
     }
   };
 }
@@ -35061,9 +35061,126 @@ var TiptapAudio = Node5.create({
 });
 
 // src/documentTray/DocumentTray.tsx
-import { useCallback as useCallback42, useId as useId14, useState as useState66, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback42, useId as useId14, useMemo as useMemo41, useRef as useRef50, useState as useState66, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { videoEmbedIframeAttributes as videoEmbedIframeAttributes2 } from "@bendyline/squisq/markdown";
+
+// src/documentTray/narrationTimingJobs.ts
+var jobsByContainer = /* @__PURE__ */ new WeakMap();
+var listeners = /* @__PURE__ */ new Set();
+function jobsFor(container) {
+  let jobs = jobsByContainer.get(container);
+  if (!jobs) {
+    jobs = /* @__PURE__ */ new Map();
+    jobsByContainer.set(container, jobs);
+  }
+  return jobs;
+}
+function notify() {
+  for (const listener of listeners) listener();
+}
+function subscribeNarrationTimingJobs(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function narrationTimingJob(container, src) {
+  return jobsByContainer.get(container)?.get(src)?.state ?? null;
+}
+function startNarrationTimingJob(input) {
+  const jobs = jobsFor(input.container);
+  if (jobs.get(input.src)?.state.status === "running") return;
+  const job = {
+    state: { status: "running", progress: { phase: "reading", fraction: 0 } },
+    abort: new AbortController()
+  };
+  jobs.set(input.src, job);
+  notify();
+  const settle = (state) => {
+    if (jobs.get(input.src) !== job) return;
+    if (state) job.state = state;
+    else jobs.delete(input.src);
+    notify();
+  };
+  import("./narrationTimingsFromAudio-ICMDSWPI.js").then(
+    ({ updateNarrationTimingsFromAudio }) => updateNarrationTimingsFromAudio({
+      ...input,
+      signal: job.abort.signal,
+      onProgress: (progress) => settle({ status: "running", progress })
+    })
+  ).then(
+    (result) => {
+      settle({ status: "done", result });
+      input.onSaved?.();
+    },
+    (caught) => {
+      if (job.abort.signal.aborted) settle(null);
+      else
+        settle({
+          status: "error",
+          message: caught instanceof Error ? caught.message : String(caught)
+        });
+    }
+  );
+}
+function cancelNarrationTimingJob(container, src) {
+  jobsByContainer.get(container)?.get(src)?.abort.abort();
+}
+
+// src/documentTray/DocumentTray.tsx
 import { jsx as jsx71, jsxs as jsxs57 } from "react/jsx-runtime";
+function progressLabel({ phase, fraction }) {
+  if (phase === "reading") return "Reading the recording\u2026";
+  if (phase === "transcribing")
+    return `Updating timings from audio\u2026 ${Math.round(fraction * 100)}%`;
+  if (phase === "matching") return "Matching words to the document\u2026";
+  return "Saving timings\u2026";
+}
+function NarrationTimingControl({ src, access }) {
+  const { container, recognizer } = access;
+  const getJob = useCallback42(() => narrationTimingJob(container, src), [container, src]);
+  const job = useSyncExternalStore3(subscribeNarrationTimingJobs, getJob, getJob);
+  const start = () => {
+    if (recognizer.readiness?.state === "download-required") {
+      recognizer.provider.requestSetup?.();
+      return;
+    }
+    startNarrationTimingJob({
+      src,
+      markdownSource: access.getMarkdownSource(),
+      provider: recognizer.provider,
+      container,
+      mediaProvider: access.mediaProvider,
+      onSaved: access.onSaved
+    });
+  };
+  if (job?.status === "running") {
+    return /* @__PURE__ */ jsxs57("div", { className: "squisq-document-tray-timing", children: [
+      /* @__PURE__ */ jsx71("span", { role: "status", children: progressLabel(job.progress) }),
+      /* @__PURE__ */ jsx71("progress", { max: 1, value: job.progress.fraction, "aria-label": "Timing progress" }),
+      /* @__PURE__ */ jsx71("button", { type: "button", onClick: () => cancelNarrationTimingJob(container, src), children: "Cancel" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs57("div", { className: "squisq-document-tray-timing", children: [
+    /* @__PURE__ */ jsx71(
+      "button",
+      {
+        type: "button",
+        onClick: start,
+        title: "Transcribe this recording and match its words to the document, so slides and captions follow the voice.",
+        children: "Update timings from audio"
+      }
+    ),
+    job?.status === "done" && /* @__PURE__ */ jsxs57("span", { role: "status", children: [
+      "Timings updated \xB7 ",
+      job.result.matchedWords,
+      " of ",
+      job.result.spokenWords,
+      " words matched"
+    ] }),
+    job?.status === "error" && /* @__PURE__ */ jsx71("span", { role: "alert", className: "squisq-document-tray-timing-error", children: job.message })
+  ] });
+}
 function mediaLabel(item) {
   if (item.title) return item.title;
   const path = item.src.split(/[?#]/, 1)[0];
@@ -35074,7 +35191,11 @@ function mediaLabel(item) {
     return name;
   }
 }
-function TrayItem({ item, editor }) {
+function TrayItem({
+  item,
+  editor,
+  timing
+}) {
   const [expanded, setExpanded] = useState66(false);
   const id = useId14();
   const label = mediaLabel(item);
@@ -35141,6 +35262,7 @@ function TrayItem({ item, editor }) {
               updateAttributes: item.editableAttributes ? updateAttributes : void 0
             }
           ),
+          timing && !readOnly && /* @__PURE__ */ jsx71(NarrationTimingControl, { src: item.src, access: timing }),
           /* @__PURE__ */ jsxs57("div", { className: "squisq-document-tray-detail", children: [
             /* @__PURE__ */ jsx71("span", { title: item.src, children: item.src }),
             !readOnly && /* @__PURE__ */ jsx71("button", { type: "button", onClick: remove, "aria-label": `Remove ${label} from document`, children: "Remove" })
@@ -35162,13 +35284,46 @@ function DocumentTray({ editor }) {
   );
   const getSnapshot = useCallback42(() => DOCUMENT_TRAY_KEY.getState(editor.state), [editor]);
   const state = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
+  const context = useEditorContextOptional();
+  const markdownRef = useRef50("");
+  markdownRef.current = context?.markdownSource ?? "";
+  const container = context?.workspaceContainer;
+  const mediaProvider = context?.mediaProvider;
+  const recognizer = context?.speechRecognizer;
+  const onSaved = context?.bumpMediaRevision;
+  const timingAccess = useMemo41(
+    () => container && mediaProvider && recognizer && onSaved ? {
+      recognizer,
+      container,
+      mediaProvider,
+      getMarkdownSource: () => markdownRef.current,
+      onSaved
+    } : null,
+    [container, mediaProvider, recognizer, onSaved]
+  );
+  const documentMedia = context?.doc?.documentMedia;
+  const narrationSources = useMemo41(
+    () => new Set(
+      (documentMedia ?? []).filter((clip) => clip.anchor === "document").map((clip) => clip.src)
+    ),
+    [documentMedia]
+  );
   if (!state?.items.length) return null;
+  const timing = recognizer?.readiness?.state === "unavailable" ? null : timingAccess;
   return /* @__PURE__ */ jsxs57("section", { className: "squisq-document-tray", "aria-label": "Document tray", children: [
     /* @__PURE__ */ jsxs57("div", { className: "squisq-document-tray-heading", children: [
       /* @__PURE__ */ jsx71("span", { children: "Document media" }),
       /* @__PURE__ */ jsx71("span", { className: "squisq-document-tray-hint", children: "Audio & video before the body" })
     ] }),
-    /* @__PURE__ */ jsx71("div", { className: "squisq-document-tray-items", children: state.items.map((item) => /* @__PURE__ */ jsx71(TrayItem, { item, editor }, item.id)) })
+    /* @__PURE__ */ jsx71("div", { className: "squisq-document-tray-items", children: state.items.map((item) => /* @__PURE__ */ jsx71(
+      TrayItem,
+      {
+        item,
+        editor,
+        timing: !item.embed && narrationSources.has(item.src) ? timing : null
+      },
+      item.id
+    )) })
   ] });
 }
 
@@ -36028,16 +36183,16 @@ function WysiwygEditor({
     layoutMode,
     linkSchemes
   } = useEditorContext();
-  const wikiLinksRef = useRef50(wikiLinks);
+  const wikiLinksRef = useRef51(wikiLinks);
   wikiLinksRef.current = wikiLinks;
-  const linkSchemesRef = useRef50(linkSchemes);
+  const linkSchemesRef = useRef51(linkSchemes);
   linkSchemesRef.current = linkSchemes;
   const wrapPolicyEnabled = preserveSourceWrapping && layoutMode === "document";
   const previewSettings = usePreviewSettingsOptional();
-  const setEditorSourceRef = useRef50(setEditorSource);
+  const setEditorSourceRef = useRef51(setEditorSource);
   setEditorSourceRef.current = setEditorSource;
   const activeTheme = previewSettings?.activeTheme;
-  const mermaidThemeStoreRef = useRef50(null);
+  const mermaidThemeStoreRef = useRef51(null);
   if (mermaidThemeStoreRef.current === null) {
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
@@ -36061,46 +36216,46 @@ function WysiwygEditor({
     },
     [docTemplates, onDocTemplatesChange]
   );
-  const mentionProviderRef = useRef50(mentionProvider);
+  const mentionProviderRef = useRef51(mentionProvider);
   useEffect54(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
-  const fenceRenderersRef = useRef50(fenceRenderers);
+  const fenceRenderersRef = useRef51(fenceRenderers);
   useEffect54(() => {
     fenceRenderersRef.current = fenceRenderers;
   }, [fenceRenderers]);
-  const onCopyCodeRef = useRef50(onCopyCode);
+  const onCopyCodeRef = useRef51(onCopyCode);
   useEffect54(() => {
     onCopyCodeRef.current = onCopyCode;
   }, [onCopyCode]);
-  const activeThemeRef = useRef50(activeTheme);
+  const activeThemeRef = useRef51(activeTheme);
   useEffect54(() => {
     activeThemeRef.current = activeTheme;
   }, [activeTheme]);
-  const resolvedPlaceholder = useMemo41(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
-  const isExternalUpdate = useRef50(false);
-  const externalApplyPendingRef = useRef50(false);
-  const lastSourceRef = useRef50(editorSource);
-  const sourceLayoutRef = useRef50(layoutMode);
-  const pendingLocalSourcesRef = useRef50([]);
-  const mediaProviderRef = useRef50(mediaProvider);
-  const mediaRevisionRef = useRef50(mediaRevision);
+  const resolvedPlaceholder = useMemo42(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
+  const isExternalUpdate = useRef51(false);
+  const externalApplyPendingRef = useRef51(false);
+  const lastSourceRef = useRef51(editorSource);
+  const sourceLayoutRef = useRef51(layoutMode);
+  const pendingLocalSourcesRef = useRef51([]);
+  const mediaProviderRef = useRef51(mediaProvider);
+  const mediaRevisionRef = useRef51(mediaRevision);
   useEffect54(() => {
     mediaRevisionRef.current = mediaRevision;
   }, [mediaRevision]);
-  const onOpenFilesPanelRef = useRef50(onOpenFilesPanel);
+  const onOpenFilesPanelRef = useRef51(onOpenFilesPanel);
   useEffect54(() => {
     onOpenFilesPanelRef.current = onOpenFilesPanel;
   }, [onOpenFilesPanel]);
-  const calcEngineFactoryRef = useRef50(calcEngineFactory);
+  const calcEngineFactoryRef = useRef51(calcEngineFactory);
   useEffect54(() => {
     calcEngineFactoryRef.current = calcEngineFactory;
   }, [calcEngineFactory]);
-  const workspaceContainerRef = useRef50(workspaceContainer);
+  const workspaceContainerRef = useRef51(workspaceContainer);
   useEffect54(() => {
     workspaceContainerRef.current = workspaceContainer;
   }, [workspaceContainer]);
-  const bumpMediaRevisionRef = useRef50(bumpMediaRevision);
+  const bumpMediaRevisionRef = useRef51(bumpMediaRevision);
   useEffect54(() => {
     bumpMediaRevisionRef.current = bumpMediaRevision;
   }, [bumpMediaRevision]);
@@ -36126,9 +36281,9 @@ function WysiwygEditor({
       cancelled = true;
     };
   }, [mediaProvider, mediaRevision]);
-  const frontmatterRef = useRef50(stripFrontmatter(editorSource).frontmatter);
-  const wrapStateRef = useRef50(null);
-  const initialDisplayBodyRef = useRef50(void 0);
+  const frontmatterRef = useRef51(stripFrontmatter(editorSource).frontmatter);
+  const wrapStateRef = useRef51(null);
+  const initialDisplayBodyRef = useRef51(void 0);
   if (initialDisplayBodyRef.current === void 0) {
     const body = stripFrontmatter(editorSource).body;
     if (wrapPolicyEnabled) {
@@ -36139,15 +36294,15 @@ function WysiwygEditor({
       initialDisplayBodyRef.current = body;
     }
   }
-  const loadedSourceRef = useRef50(null);
+  const loadedSourceRef = useRef51(null);
   if (loadedSourceRef.current === null) {
     loadedSourceRef.current = { body: stripFrontmatter(editorSource).body, baseline: null };
   }
-  const initialContentRef = useRef50(void 0);
+  const initialContentRef = useRef51(void 0);
   if (initialContentRef.current === void 0) {
     initialContentRef.current = markdownToTiptap(initialDisplayBodyRef.current);
   }
-  const submitOnEnterRef = useRef50(submitOnEnter);
+  const submitOnEnterRef = useRef51(submitOnEnter);
   useEffect54(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
@@ -36405,7 +36560,7 @@ function WysiwygEditor({
   useEffect54(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const containerRef = useRef50(null);
+  const containerRef = useRef51(null);
   const [badgeMenu, setBadgeMenu] = useState67(null);
   const [propsMenu, setPropsMenu] = useState67(null);
   const closeBadgeMenu = useCallback43(() => {
@@ -36530,7 +36685,7 @@ function WysiwygEditor({
       sourceLayoutRef.current = previousLayout;
     };
   }, [editorSource, editor, wrapPolicyEnabled, layoutMode]);
-  const badgePreviewSource = useMemo41(() => {
+  const badgePreviewSource = useMemo42(() => {
     if (!badgeMenu) return void 0;
     try {
       const previewDoc = markdownToDoc2(parseMarkdown6(editorSource), { autoTemplates: false });
@@ -36555,7 +36710,7 @@ function WysiwygEditor({
     previewSettings?.activeTheme,
     previewSettings?.activeViewport
   ]);
-  const themeStyle = useMemo41(() => {
+  const themeStyle = useMemo42(() => {
     if (!activeTheme) return {};
     const out = {
       "--squisq-block-props-accent": activeTheme.colors.primary
@@ -36815,18 +36970,18 @@ function insertDroppedMedia(view, event, point, mediaProvider, onMediaUploaded)
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect13, useMemo as useMemo43, useRef as useRef51, useState as useState70 } from "react";
+import { useLayoutEffect as useLayoutEffect13, useMemo as useMemo44, useRef as useRef52, useState as useState70 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
 import { flattenRenderableBlocks, DEFAULT_THEME as DEFAULT_THEME5 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText3 } from "@bendyline/squisq/markdown";
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
-import { useCallback as useCallback44, useEffect as useEffect55, useMemo as useMemo42, useState as useState68 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect55, useMemo as useMemo43, useState as useState68 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
-  const flatBlocks = useMemo42(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
+  const flatBlocks = useMemo43(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
   const [entries, setEntries] = useState68([]);
   const [pageEdges, setPageEdges] = useState68(null);
   useEffect55(() => {
@@ -37143,11 +37298,11 @@ function InlinePreviewGutter({
   const { doc, workspaceContainer, fileName, mediaRevision } = useEditorContext();
   const projection = usePreviewProjection(doc, "", workspaceContainer, fileName, mediaRevision);
   const previewDoc = projection?.contentDoc ?? doc;
-  const gutterRef = useRef51(null);
+  const gutterRef = useRef52(null);
   const { entries: headingEntries, scrollToBlock } = useHeadingLayout(gutterRef);
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme ?? DEFAULT_THEME5;
-  const items = useMemo43(() => {
+  const items = useMemo44(() => {
     if (!previewDoc || !previewDoc.blocks.length) return [];
     const flat = flattenRenderableBlocks(previewDoc.blocks);
     const result = [];
@@ -37167,7 +37322,7 @@ function InlinePreviewGutter({
     });
     return result;
   }, [previewDoc, viewport, activeTheme]);
-  const connectorTops = useMemo43(() => {
+  const connectorTops = useMemo44(() => {
     const m = /* @__PURE__ */ new Map();
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
@@ -37359,8 +37514,8 @@ import {
   memo,
   useCallback as useCallback45,
   useEffect as useEffect57,
-  useMemo as useMemo44,
-  useRef as useRef52,
+  useMemo as useMemo45,
+  useRef as useRef53,
   useState as useState71
 } from "react";
 import { flattenBlocks as flattenBlocks4, hasTemplate as hasTemplate2 } from "@bendyline/squisq/doc";
@@ -37480,18 +37635,18 @@ function OutlinePanel({ width, className, readOnly = false }) {
     monacoEditor,
     tiptapEditor
   } = useEditorContext();
-  const paneRef = useRef52(null);
+  const paneRef = useRef53(null);
   const cursorActiveId = useActiveOutlineBlockId();
-  const activeDragRef = useRef52(null);
+  const activeDragRef = useRef53(null);
   const [draggedBlockId, setDraggedBlockId] = useState71(null);
   const [dropTarget, setDropTarget] = useState71(null);
   const nextOutlineBlocks = doc?.blocks ?? EMPTY_BLOCKS;
-  const outlineBlocksRef = useRef52(nextOutlineBlocks);
+  const outlineBlocksRef = useRef53(nextOutlineBlocks);
   if (!sameOutlineStructure(outlineBlocksRef.current, nextOutlineBlocks)) {
     outlineBlocksRef.current = nextOutlineBlocks;
   }
   const outlineBlocks = outlineBlocksRef.current;
-  const interactionRef = useRef52({
+  const interactionRef = useRef53({
     doc,
     markdownSource,
     setMarkdownSource,
@@ -37513,7 +37668,7 @@ function OutlinePanel({ width, className, readOnly = false }) {
     monacoEditor,
     tiptapEditor
   };
-  const blockModeActiveId = useMemo44(() => {
+  const blockModeActiveId = useMemo45(() => {
     if (layoutMode !== "block" || activeBlockStartLine == null || !doc) return null;
     const match = flattenBlocks4(doc.blocks).find(
       (b) => b.sourceHeading?.position?.start.line === activeBlockStartLine
@@ -37813,8 +37968,8 @@ function OutlineNode({
 }
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
-  const flatBlocks = useMemo44(() => doc ? flattenBlocks4(doc.blocks) : [], [doc]);
-  const flatBlocksRef = useRef52(flatBlocks);
+  const flatBlocks = useMemo45(() => doc ? flattenBlocks4(doc.blocks) : [], [doc]);
+  const flatBlocksRef = useRef53(flatBlocks);
   flatBlocksRef.current = flatBlocks;
   const headingLocations = flatBlocks.map((block) => `${block.id}:${block.sourceHeading?.position?.start.line ?? ""}`).join("\0");
   const [activeId, setActiveId] = useState71(null);
@@ -37930,7 +38085,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback47, useEffect as useEffect59, useMemo as useMemo46, useRef as useRef54, useState as useState72 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect59, useMemo as useMemo47, useRef as useRef55, useState as useState72 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -38054,7 +38209,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback46, useEffect as useEffect58, useMemo as useMemo45, useRef as useRef53 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect58, useMemo as useMemo46, useRef as useRef54 } from "react";
 import { jsx as jsx75, jsxs as jsxs61 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -38065,12 +38220,12 @@ function CodeContextSectionView({
   onRevealLine,
   onMeasure
 }) {
-  const rootRef = useRef53(null);
-  const stripNodes = useMemo45(
+  const rootRef = useRef54(null);
+  const stripNodes = useMemo46(
     () => parseMarkdown8(section.summaryMarkdown).children,
     [section.summaryMarkdown]
   );
-  const bodyNodes = useMemo45(
+  const bodyNodes = useMemo46(
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
@@ -38149,7 +38304,7 @@ function CodeContextZones({ options }) {
   const [manager, setManager] = useState72(null);
   const [, setZonesVersion] = useState72(0);
   const [expandedById, setExpandedById] = useState72({});
-  const seenIds = useRef54(/* @__PURE__ */ new Set());
+  const seenIds = useRef55(/* @__PURE__ */ new Set());
   useEffect59(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
@@ -38163,7 +38318,7 @@ function CodeContextZones({ options }) {
   }, [monacoEditor]);
   const fileTop = options.fileTop;
   const sections = options.sections;
-  const resolved = useMemo46(() => {
+  const resolved = useMemo47(() => {
     const out = [];
     if (fileTop) {
       out.push({ spec: { id: fileTop.id, line: 0, ordinal: 0 }, section: fileTop });
@@ -38639,7 +38794,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback49, useEffect as useEffect62, useMemo as useMemo47, useRef as useRef57, useState as useState75 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect62, useMemo as useMemo48, useRef as useRef58, useState as useState75 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -38647,11 +38802,12 @@ import {
 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks5, DEFAULT_THEME as DEFAULT_THEME6, getPinnedBlockMeta } from "@bendyline/squisq/doc";
 import { createMediaTimeMap } from "@bendyline/squisq/mediaEdit";
+import { usesDynamicPresentation } from "@bendyline/squisq/transform";
 import { useProcessedAudio as useProcessedAudio2 } from "@bendyline/squisq-video-react/media-edit";
 import { MediaClipLayer, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback48, useEffect as useEffect60, useRef as useRef55, useState as useState73 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect60, useRef as useRef56, useState as useState73 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -38673,11 +38829,11 @@ function playTimelineMediaAt(root, time) {
 function useTimelineClock(total) {
   const [currentTime, setCurrentTime] = useState73(0);
   const [isPlaying, setIsPlaying] = useState73(false);
-  const rafRef = useRef55(null);
-  const lastRef = useRef55(0);
-  const currentTimeRef = useRef55(0);
-  const isPlayingRef = useRef55(false);
-  const mediaHostRef = useRef55(null);
+  const rafRef = useRef56(null);
+  const lastRef = useRef56(0);
+  const currentTimeRef = useRef56(0);
+  const isPlayingRef = useRef56(false);
+  const mediaHostRef = useRef56(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
   useEffect60(() => {
@@ -38781,7 +38937,7 @@ function timelineBars(clips) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect61, useLayoutEffect as useLayoutEffect14, useRef as useRef56, useState as useState74 } from "react";
+import { useEffect as useEffect61, useLayoutEffect as useLayoutEffect14, useRef as useRef57, useState as useState74 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
 import { Fragment as Fragment26, jsx as jsx78, jsxs as jsxs63 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -38791,12 +38947,13 @@ function TimelineItemMenu({
   accentColor,
   onBlockDuration,
   onBlockStartTime,
+  onBlockClearTiming,
   onBlockTransition,
   onVideoPatch,
   onEditMedia,
   onClose
 }) {
-  const panelRef = useRef56(null);
+  const panelRef = useRef57(null);
   const [style, setStyle] = useState74(() => menuStyle(anchor));
   useLayoutEffect14(() => {
     const panel = panelRef.current;
@@ -38854,6 +39011,7 @@ function TimelineItemMenu({
               accentColor,
               onDuration: onBlockDuration,
               onStartTime: onBlockStartTime,
+              onClearTiming: onBlockClearTiming,
               onTransition: onBlockTransition
             }
           ) : /* @__PURE__ */ jsxs63(Fragment26, { children: [
@@ -38883,6 +39041,7 @@ function BlockMenu({
   accentColor,
   onDuration,
   onStartTime,
+  onClearTiming,
   onTransition
 }) {
   const [explicitDuration, setExplicitDuration] = useState74(target.explicitDuration);
@@ -38901,46 +39060,67 @@ function BlockMenu({
       onDuration(seconds);
     }
   };
+  const pinned = explicitDuration || startTime !== "";
   return /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-body", children: [
-    /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-check", children: [
+    target.timingLocked ? /* @__PURE__ */ jsxs63(Fragment26, { children: [
+      /* @__PURE__ */ jsxs63("p", { className: "squisq-timeline-item-menu-hint", children: [
+        "Dynamic slides time each slide from the narration or reading pace, so this section's length and start can't be pinned.",
+        pinned && " A pinned time here stops a narrated deck from playing."
+      ] }),
+      pinned && onClearTiming && /* @__PURE__ */ jsx78(
+        "button",
+        {
+          type: "button",
+          className: "squisq-timeline-item-menu-action",
+          onClick: () => {
+            setExplicitDuration(false);
+            setStartTime("");
+            onClearTiming();
+          },
+          children: "Clear pinned timing"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs63(Fragment26, { children: [
+      /* @__PURE__ */ jsxs63("label", { className: "squisq-timeline-item-menu-check", children: [
+        /* @__PURE__ */ jsx78(
+          "input",
+          {
+            type: "checkbox",
+            checked: !explicitDuration,
+            onChange: (event) => toggleAutotime(event.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsx78("span", { children: "Autotime block" })
+      ] }),
+      /* @__PURE__ */ jsx78("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
       /* @__PURE__ */ jsx78(
-        "input",
+        MenuNumberField,
         {
-          type: "checkbox",
-          checked: !explicitDuration,
-          onChange: (event) => toggleAutotime(event.target.checked)
+          label: "Duration",
+          ariaLabel: "Block duration in seconds",
+          value: duration,
+          disabled: !explicitDuration,
+          onChange: (value) => {
+            setDuration(value);
+            const seconds = numericValue(value);
+            if (seconds != null) onDuration(seconds);
+          }
         }
       ),
-      /* @__PURE__ */ jsx78("span", { children: "Autotime block" })
-    ] }),
-    /* @__PURE__ */ jsx78("p", { className: "squisq-timeline-item-menu-hint", children: "Uses narration, content, and interior media when no explicit duration is set." }),
-    /* @__PURE__ */ jsx78(
-      MenuNumberField,
-      {
-        label: "Duration",
-        ariaLabel: "Block duration in seconds",
-        value: duration,
-        disabled: !explicitDuration,
-        onChange: (value) => {
-          setDuration(value);
-          const seconds = numericValue(value);
-          if (seconds != null) onDuration(seconds);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx78(
-      MenuNumberField,
-      {
-        label: "Start time",
-        ariaLabel: "Block start time in seconds",
-        value: startTime,
-        placeholder: "auto",
-        onChange: (value) => {
-          setStartTime(value);
-          onStartTime(value.trim() === "" ? null : numericValue(value));
+      /* @__PURE__ */ jsx78(
+        MenuNumberField,
+        {
+          label: "Start time",
+          ariaLabel: "Block start time in seconds",
+          value: startTime,
+          placeholder: "auto",
+          onChange: (value) => {
+            setStartTime(value);
+            onStartTime(value.trim() === "" ? null : numericValue(value));
+          }
         }
-      }
-    ),
+      )
+    ] }),
     /* @__PURE__ */ jsxs63("div", { className: "squisq-timeline-item-menu-row", children: [
       /* @__PURE__ */ jsx78("span", { className: "squisq-timeline-item-menu-label", children: "Transition" }),
       /* @__PURE__ */ jsx78(
@@ -39242,11 +39422,12 @@ function TimelineTrack({
   const [drag, setDrag] = useState75(null);
   const [itemMenu, setItemMenu] = useState75(null);
   const [pxPerSecond, setPxPerSecond] = useState75(DEFAULT_PX_PER_SECOND);
-  const scrollRef = useRef57(null);
-  const blocks = useMemo47(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
+  const scrollRef = useRef58(null);
+  const blocks = useMemo48(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
+  const timingLocked = doc ? usesDynamicPresentation(doc) : false;
   const previewSettings = usePreviewSettingsOptional();
   const previewTheme = previewSettings?.activeTheme ?? DEFAULT_THEME6;
-  const visualByBlock = useMemo47(() => {
+  const visualByBlock = useMemo48(() => {
     const map = /* @__PURE__ */ new Map();
     if (doc) {
       for (const b of blocks) {
@@ -39256,16 +39437,16 @@ function TimelineTrack({
     }
     return map;
   }, [doc, blocks, previewTheme]);
-  const derivedClips = useMemo47(
+  const derivedClips = useMemo48(
     () => doc ? resolveMediaSchedule2(doc) : [],
     [doc]
   );
   const clips = schedule ?? derivedClips;
-  const playbackClips = useMemo47(
+  const playbackClips = useMemo48(
     () => doc ? collectTimelinePlaybackSchedule(doc, clips, { processedAudio }) : clips,
     [clips, doc, processedAudio]
   );
-  const total = useMemo47(() => doc ? getDocPlaybackDuration(doc) : 0, [doc]);
+  const total = useMemo48(() => doc ? getDocPlaybackDuration(doc) : 0, [doc]);
   const width = Math.max(total * pxPerSecond, 200);
   const internalClock = useTimelineClock(total);
   const activeClock = clock ?? internalClock;
@@ -39292,7 +39473,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [scrubbing, pxPerSecond, seek]);
-  const rawClipById = useMemo47(() => {
+  const rawClipById = useMemo48(() => {
     const map = /* @__PURE__ */ new Map();
     if (doc) {
       for (const b of flattenBlocks5(doc.blocks)) for (const m of b.media ?? []) map.set(m.id, m);
@@ -39312,7 +39493,7 @@ function TimelineTrack({
     },
     [blocks]
   );
-  const followedBlockRef = useRef57(null);
+  const followedBlockRef = useRef58(null);
   useEffect62(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
@@ -39382,9 +39563,9 @@ function TimelineTrack({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const scaleRef = useRef57(pxPerSecond);
+  const scaleRef = useRef58(pxPerSecond);
   scaleRef.current = pxPerSecond;
-  const dragRef = useRef57(null);
+  const dragRef = useRef58(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
   useEffect62(() => {
@@ -39463,7 +39644,8 @@ function TimelineTrack({
         duration: block.duration,
         explicitDuration: pinned.duration != null,
         startTime: pinned.startTime ?? null,
-        transition: readHeadingLineTransition(heading)
+        transition: readHeadingLineTransition(heading),
+        timingLocked
       };
     }
   } else if (itemMenu?.kind === "video") {
@@ -39571,7 +39753,7 @@ function TimelineTrack({
                   mediaProvider
                 }
               ) }),
-              prev && headingLine(prev) != null && /* @__PURE__ */ jsx79(
+              !timingLocked && prev && headingLine(prev) != null && /* @__PURE__ */ jsx79(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--left",
@@ -39615,7 +39797,7 @@ function TimelineTrack({
                   children: "\u2026"
                 }
               ),
-              line != null && /* @__PURE__ */ jsx79(
+              !timingLocked && line != null && /* @__PURE__ */ jsx79(
                 "span",
                 {
                   className: "squisq-timeline-edge squisq-timeline-edge--right",
@@ -39933,6 +40115,13 @@ function TimelineTrack({
           const next = setBlockStartTimeInSource(markdownSource, itemMenu.sourceLine, seconds);
           if (next) setMarkdownSource(next);
         },
+        onBlockClearTiming: () => {
+          if (itemMenu.kind !== "block") return;
+          const line = itemMenu.sourceLine;
+          const cleared = setBlockDurationInSource(markdownSource, line, null) ?? markdownSource;
+          const next = setBlockStartTimeInSource(cleared, line, null) ?? cleared;
+          if (next !== markdownSource) setMarkdownSource(next);
+        },
         onBlockTransition: (transition) => {
           if (itemMenu.kind !== "block") return;
           const next = setBlockTransitionInSource(
@@ -39978,7 +40167,7 @@ function formatDur(seconds) {
 }
 
 // src/TimelineVideoPanel.tsx
-import { useMemo as useMemo48 } from "react";
+import { useMemo as useMemo49 } from "react";
 import { MediaClipLayer as MediaClipLayer2 } from "@bendyline/squisq-react";
 import { jsx as jsx80, jsxs as jsxs65 } from "react/jsx-runtime";
 function TimelineVideoPanel({
@@ -39988,7 +40177,7 @@ function TimelineVideoPanel({
   basePath = "/",
   onClose
 }) {
-  const videos = useMemo48(() => schedule.filter((clip) => clip.kind === "video"), [schedule]);
+  const videos = useMemo49(() => schedule.filter((clip) => clip.kind === "video"), [schedule]);
   const activeVideos = videos.filter(
     (clip) => currentTime >= clip.absoluteStart && currentTime < clip.absoluteEnd
   );
@@ -40042,7 +40231,7 @@ function formatClock4(seconds) {
 }
 
 // src/TimelineCompositionPanel.tsx
-import { useMemo as useMemo49 } from "react";
+import { useMemo as useMemo50 } from "react";
 import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule as resolveMediaSchedule3 } from "@bendyline/squisq/schemas";
 import { DocPlayer } from "@bendyline/squisq-react";
 import { jsx as jsx81, jsxs as jsxs66 } from "react/jsx-runtime";
@@ -40078,11 +40267,11 @@ function TimelineCompositionPanel({
   );
   const contentDoc = projection?.contentDoc ?? null;
   const playerDoc = projection?.playerDoc ?? null;
-  const totalDuration = useMemo49(
+  const totalDuration = useMemo50(
     () => playerDoc ? getDocPlaybackDuration2(playerDoc) : 0,
     [playerDoc]
   );
-  const effectiveVideoPresentation = useMemo49(() => {
+  const effectiveVideoPresentation = useMemo50(() => {
     if (!playerDoc) return activeVideoPresentation;
     const activeVideo = resolveMediaSchedule3(playerDoc).find(
       (clip) => clip.kind === "video" && clock.currentTime >= clip.absoluteStart && clock.currentTime < clip.absoluteEnd
@@ -40091,7 +40280,7 @@ function TimelineCompositionPanel({
     if (activeVideo?.placement === "overlay") return "full-frame";
     return activeVideoPresentation;
   }, [activeVideoPresentation, clock.currentTime, playerDoc]);
-  const audioController = useMemo49(
+  const audioController = useMemo50(
     () => ({
       currentTime: clock.currentTime,
       isPlaying: clock.isPlaying,
@@ -40272,7 +40461,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback50, useEffect as useEffect63, useMemo as useMemo50, useRef as useRef58, useState as useState76 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect63, useMemo as useMemo51, useRef as useRef59, useState as useState76 } from "react";
 import {
   isSvgImageSource as isSvgImageSource2,
   parseMarkdown as parseMarkdown9,
@@ -40348,9 +40537,9 @@ function PlainHtmlPreview({
   showCodeCopyButton = false,
   onCopyCode
 }) {
-  const iframeRef = useRef58(null);
-  const removeFrameLinkHandlerRef = useRef58(() => void 0);
-  const removeFrameCodeCopyControlsRef = useRef58(() => void 0);
+  const iframeRef = useRef59(null);
+  const removeFrameLinkHandlerRef = useRef59(() => void 0);
+  const removeFrameCodeCopyControlsRef = useRef59(() => void 0);
   const setIframeRef = useCallback50(
     (frame) => {
       iframeRef.current = frame;
@@ -40358,7 +40547,7 @@ function PlainHtmlPreview({
     },
     [onFrameChange]
   );
-  const parsedDoc = useMemo50(() => parseMarkdown9(markdown), [markdown]);
+  const parsedDoc = useMemo51(() => parseMarkdown9(markdown), [markdown]);
   const [wikiProjection, setWikiProjection] = useState76(null);
   const mdDoc = wikiProjection?.source === parsedDoc && wikiProjection.support === wikiLinks ? wikiProjection.doc : parsedDoc;
   useEffect63(() => {
@@ -40408,14 +40597,14 @@ function PlainHtmlPreview({
       cancelled = true;
     };
   }, [mdDoc, mediaProvider, mediaRevision]);
-  const mergedImages = useMemo50(() => {
+  const mergedImages = useMemo51(() => {
     if (!resolvedImages && !images) return void 0;
     const merged = /* @__PURE__ */ new Map();
     if (resolvedImages) for (const [k2, v2] of resolvedImages) merged.set(k2, v2);
     if (images) for (const [k2, v2] of images) merged.set(k2, v2);
     return merged;
   }, [resolvedImages, images]);
-  const iconsCss = useMemo50(() => collectInlineFontAwesomeCss(), []);
+  const iconsCss = useMemo51(() => collectInlineFontAwesomeCss(), []);
   const [renderFn, setRenderFn] = useState76(() => cachedRender);
   useEffect63(() => {
     if (renderFn) return;
@@ -40427,7 +40616,7 @@ function PlainHtmlPreview({
       cancelled = true;
     };
   }, [renderFn]);
-  const html = useMemo50(
+  const html = useMemo51(
     () => renderFn ? (
       // The frame is sandboxed without scripts, and a nested player
       // iframe inherits that sandbox — so videos show as linked posters.
@@ -40633,7 +40822,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState80, useEffect as useEffect68, useMemo as useMemo55, useCallback as useCallback54, useRef as useRef62 } from "react";
+import { useState as useState80, useEffect as useEffect68, useMemo as useMemo56, useCallback as useCallback54, useRef as useRef63 } from "react";
 import { createPortal as createPortal18 } from "react-dom";
 import {
   DashboardView,
@@ -40781,8 +40970,8 @@ import {
   useEffect as useEffect64,
   useId as useId15,
   useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo51,
-  useRef as useRef59,
+  useMemo as useMemo52,
+  useRef as useRef60,
   useState as useState77
 } from "react";
 import { createPortal as createPortal17 } from "react-dom";
@@ -40892,14 +41081,14 @@ function PresentationModeProvider({
   const [popupRoot, setPopupRoot] = useState77(null);
   const [error, setError] = useState77(null);
   const [fullscreenExitStyle, setFullscreenExitStyle] = useState77(null);
-  const activeTargetRef = useRef59(activeTarget);
+  const activeTargetRef = useRef60(activeTarget);
   activeTargetRef.current = activeTarget;
-  const previousActiveTargetRef = useRef59(null);
-  const returnFocusRef = useRef59(null);
-  const popupRef = useRef59(null);
-  const popupCleanupRef = useRef59(null);
+  const previousActiveTargetRef = useRef60(null);
+  const returnFocusRef = useRef60(null);
+  const popupRef = useRef60(null);
+  const popupCleanupRef = useRef60(null);
   const fullscreenSupported = typeof document !== "undefined" && typeof document.documentElement.requestFullscreen === "function";
-  const availableTargets = useMemo51(
+  const availableTargets = useMemo52(
     () => [
       "control",
       ...allowWindow ? ["window"] : [],
@@ -41142,7 +41331,7 @@ function PresentationModeProvider({
     },
     [rootRef]
   );
-  const value = useMemo51(
+  const value = useMemo52(
     () => ({
       selectedTarget,
       activeTarget,
@@ -41230,8 +41419,8 @@ function PresentationModeControl() {
     stop
   } = usePresentationMode();
   const { colorScheme } = useEditorContext();
-  const triggerRef = useRef59(null);
-  const menuRef = useRef59(null);
+  const triggerRef = useRef60(null);
+  const menuRef = useRef60(null);
   const [open, setOpen] = useState77(false);
   const [anchor, setAnchor] = useState77(null);
   const options = PRESENTATION_OPTIONS.filter((option) => availableTargets.includes(option.target));
@@ -41404,8 +41593,8 @@ import {
   useCallback as useCallback52,
   useContext as useContext7,
   useEffect as useEffect65,
-  useMemo as useMemo52,
-  useRef as useRef60,
+  useMemo as useMemo53,
+  useRef as useRef61,
   useState as useState78
 } from "react";
 import { jsx as jsx85, jsxs as jsxs69 } from "react/jsx-runtime";
@@ -41423,8 +41612,8 @@ function PrintModeProvider({ rootRef, children }) {
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
   const [active, setActive] = useState78(false);
   const [slidesPerPage, setSlidesPerPage] = useState78(1);
-  const customPrintHandlerRef = useRef60(null);
-  const printAncestorsRef = useRef60([]);
+  const customPrintHandlerRef = useRef61(null);
+  const printAncestorsRef = useRef61([]);
   const unmarkPrinting = useCallback52(() => {
     const ownerDocument = rootRef.current?.ownerDocument;
     ownerDocument?.body.classList.remove("squisq-printing");
@@ -41507,7 +41696,7 @@ function PrintModeProvider({ rootRef, children }) {
       handleAfterPrint();
     };
   }, [active, close, markPrinting, rootRef, unmarkPrinting]);
-  const value = useMemo52(
+  const value = useMemo53(
     () => ({
       active,
       slidesPerPage,
@@ -41576,7 +41765,7 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback53, useEffect as useEffect66, useMemo as useMemo53, useRef as useRef61 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect66, useMemo as useMemo54, useRef as useRef62 } from "react";
 import {
   BlockRenderer as BlockRenderer4,
   FlashcardFaceView,
@@ -41611,12 +41800,12 @@ function PrintPreview({
 }) {
   const { slidesPerPage, registerPrintHandler } = usePrintMode();
   const mediaProvider = useMediaProvider();
-  const documentFrameRef = useRef61(null);
+  const documentFrameRef = useRef62(null);
   const setDocumentFrame = useCallback53((frame) => {
     documentFrameRef.current = frame;
   }, []);
   const { blocks } = useDocPlayback(previewDoc, 0, { viewport, theme });
-  const coverBlock = useMemo53(() => {
+  const coverBlock = useMemo54(() => {
     if (!showCover || !previewDoc?.startBlock) return null;
     const context = createTemplateContext2(theme, 0, 1, viewport);
     return {
@@ -41627,7 +41816,7 @@ function PrintPreview({
       layers: expandCoverBlock2(previewDoc.startBlock, context)
     };
   }, [previewDoc?.startBlock, showCover, theme, viewport]);
-  const flashcardDeck = useMemo53(
+  const flashcardDeck = useMemo54(
     () => contentDoc ? materializeFlashcards(contentDoc) : null,
     [contentDoc]
   );
@@ -41771,7 +41960,7 @@ import {
   createContext as createContext8,
   useContext as useContext8,
   useEffect as useEffect67,
-  useMemo as useMemo54,
+  useMemo as useMemo55,
   useState as useState79
 } from "react";
 import { parseTableViewState as parseTableViewState2 } from "@bendyline/squisq/table";
@@ -41827,8 +42016,8 @@ function SlideshowDataGridProvider({
   mediaRevision,
   children
 }) {
-  const sources = useMemo54(() => collectSlideshowDataSources(doc), [doc]);
-  const value = useMemo54(
+  const sources = useMemo55(() => collectSlideshowDataSources(doc), [doc]);
+  const value = useMemo55(
     () => ({ container: container ?? null, mediaRevision, sources }),
     [container, mediaRevision, sources]
   );
@@ -41924,16 +42113,16 @@ function SlideshowDataGridRenderer({
     };
   }, [activeSourceKey, container, mediaRevision, gridModule]);
   const currentRemote = remote.key === activeSourceKey ? remote : void 0;
-  const previewRows = useMemo54(
+  const previewRows = useMemo55(
     () => Array.isArray(layer.content.rows) ? layer.content.rows : [],
     [layer.content.rows]
   );
-  const previewHeaders = useMemo54(
+  const previewHeaders = useMemo55(
     () => 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 = useMemo54(
+  const localProvider = useMemo55(
     () => useLocalGrid && gridModule ? new gridModule.TableStoreClient({ headers: previewHeaders, cells: previewRows }) : null,
     [previewHeaders, previewRows, useLocalGrid, gridModule]
   );
@@ -42037,8 +42226,8 @@ function PreviewPanel({
     activeDashboardTitle,
     activeDashboardStyle
   } = usePreviewSettings();
-  const mainSurfaceRef = useRef62(null);
-  const popupSurfaceRef = useRef62(null);
+  const mainSurfaceRef = useRef63(null);
+  const popupSurfaceRef = useRef63(null);
   const [playbackState, setPlaybackState] = useState80(null);
   const handlePlaybackStateChange = useCallback54((next) => {
     setPlaybackState(next);
@@ -42052,7 +42241,7 @@ function PreviewPanel({
   );
   const previewDoc = previewProjection?.playerDoc ?? null;
   const contentDoc = previewProjection?.contentDoc ?? null;
-  const followerAudioController = useMemo55(() => {
+  const followerAudioController = useMemo56(() => {
     if (!playbackState || !previewDoc) return null;
     const noOp = () => Promise.resolve();
     return {
@@ -42071,7 +42260,7 @@ function PreviewPanel({
       restart: noOp
     };
   }, [playbackState, previewDoc]);
-  const documentMarkdown = useMemo55(
+  const documentMarkdown = useMemo56(
     () => activeTransformStyle && contentDoc ? buildDocumentPreviewMarkdown(contentDoc) : markdownSource,
     [activeTransformStyle, contentDoc, markdownSource]
   );
@@ -42359,7 +42548,7 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState81, useEffect as useEffect69, useRef as useRef63, useCallback as useCallback55 } from "react";
+import { useState as useState81, useEffect as useEffect69, useRef as useRef64, useCallback as useCallback55 } from "react";
 import { isSvgImageSource as isSvgImageSource3 } from "@bendyline/squisq/markdown";
 import { sanitizedSvgImageUrl as sanitizedSvgImageUrl2 } from "@bendyline/squisq-react";
 import { jsx as jsx89, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -42435,7 +42624,7 @@ function MediaBin({
   highlightPath = null
 }) {
   const [entries, setEntries] = useState81([]);
-  const listRef = useRef63(null);
+  const listRef = useRef64(null);
   useEffect69(() => {
     if (!highlightPath || !listRef.current) return;
     const item = listRef.current.querySelector(`[data-media-path="${CSS.escape(highlightPath)}"]`);
@@ -42448,9 +42637,9 @@ function MediaBin({
   const [isDropActive, setIsDropActive] = useState81(false);
   const [downloadingPath, setDownloadingPath] = useState81(null);
   const [contextMenu, setContextMenu] = useState81(null);
-  const fileInputRef = useRef63(null);
-  const contextMenuRef = useRef63(null);
-  const dropDepthRef = useRef63(0);
+  const fileInputRef = useRef64(null);
+  const contextMenuRef = useRef64(null);
+  const dropDepthRef = useRef64(0);
   const updateEntries = useCallback55(
     async (provider) => {
       const list = sortMediaEntries(filterVisibleMediaEntries(await provider.listMedia()));
@@ -42938,7 +43127,7 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect70, useLayoutEffect as useLayoutEffect16, useRef as useRef64, useState as useState83 } from "react";
+import { useEffect as useEffect70, useLayoutEffect as useLayoutEffect16, useRef as useRef65, useState as useState83 } from "react";
 import { createPortal as createPortal19 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -42955,12 +43144,12 @@ import { jsx as jsx91 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
   const [state, setState3] = useState83(null);
-  const tooltipRef = useRef64(null);
-  const timerRef = useRef64(null);
-  const currentTargetRef = useRef64(null);
-  const visibleRef = useRef64(false);
-  const pressedTargetRef = useRef64(null);
-  const lastPointerWasTouchRef = useRef64(false);
+  const tooltipRef = useRef65(null);
+  const timerRef = useRef65(null);
+  const currentTargetRef = useRef65(null);
+  const visibleRef = useRef65(false);
+  const pressedTargetRef = useRef65(null);
+  const lastPointerWasTouchRef = useRef65(false);
   useLayoutEffect16(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
@@ -43074,10 +43263,10 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect75, useRef as useRef70, useState as useState89, useCallback as useCallback61, useMemo as useMemo60 } from "react";
+import { useEffect as useEffect75, useRef as useRef71, useState as useState89, useCallback as useCallback61, useMemo as useMemo61 } from "react";
 
 // src/BlockPreviewPanel.tsx
-import { useMemo as useMemo56 } from "react";
+import { useMemo as useMemo57 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS7 } from "@bendyline/squisq/schemas";
 import { flattenBlocks as flattenBlocks6, DEFAULT_THEME as DEFAULT_THEME7 } from "@bendyline/squisq/doc";
 import { jsx as jsx92 } from "react/jsx-runtime";
@@ -43088,13 +43277,13 @@ function BlockPreviewPanel({ basePath = "/" }) {
   const viewport = previewSettings?.activeViewport ?? VIEWPORT_PRESETS7.landscape;
   const projection = usePreviewProjection(doc, "", workspaceContainer, fileName, mediaRevision);
   const previewDoc = projection?.contentDoc ?? doc;
-  const block = useMemo56(() => {
+  const block = useMemo57(() => {
     if (!previewDoc) return null;
     const blocks = flattenBlocks6(previewDoc.blocks);
     if (blocks.length === 0) return null;
     return blocks.find((b) => b.sourceHeading?.position?.start.line === activeBlockStartLine) ?? blocks[0];
   }, [previewDoc, activeBlockStartLine]);
-  const visual = useMemo56(
+  const visual = useMemo57(
     () => previewDoc && block ? resolveBlockVisual(previewDoc, block, theme, viewport) : null,
     [previewDoc, block, theme, viewport]
   );
@@ -43204,7 +43393,7 @@ function ProofingPanel() {
 }
 
 // src/imageEditor/ImageEditModal.tsx
-import { useCallback as useCallback56, useEffect as useEffect71, useMemo as useMemo57, useRef as useRef65, useState as useState84 } from "react";
+import { useCallback as useCallback56, useEffect as useEffect71, useMemo as useMemo58, useRef as useRef66, useState as useState84 } from "react";
 import { DARK_SURFACE, LIGHT_SURFACE } from "@bendyline/squisq/schemas";
 import {
   MemoryContentContainer,
@@ -43221,12 +43410,12 @@ function ImageEditModal({
   versioningAutoSaveIdleMs,
   shellTheme
 }) {
-  const modalRef = useRef65(null);
-  const surfaceRef = useRef65(null);
+  const modalRef = useRef66(null);
+  const surfaceRef = useRef66(null);
   useModalDialog({ rootRef: modalRef, dialogRef: surfaceRef, onClose });
   const extension = relativePath.split(/[?#]/, 1)[0]?.split(".").pop()?.toLowerCase();
   const saveFormat = extension === "png" ? "png" : extension === "jpg" || extension === "jpeg" ? "jpeg" : extension === "webp" ? "webp" : null;
-  const sidecar = useMemo57(() => {
+  const sidecar = useMemo58(() => {
     const sanitized = relativePath.replace(/[^a-zA-Z0-9._-]+/g, "_");
     let hash = 2166136261;
     for (let i = 0; i < relativePath.length; i++) {
@@ -43321,10 +43510,10 @@ function ImageEditModal({
 }
 
 // src/mediaEdit/MediaEditContextMenuItems.tsx
-import { useMemo as useMemo58 } from "react";
+import { useMemo as useMemo59 } from "react";
 function MediaEditContextMenuItems() {
   const { doc, monacoEditor, mediaEditRenders, openMediaEdit } = useEditorContext();
-  const items = useMemo58(() => {
+  const items = useMemo59(() => {
     if (!mediaEditRenders) return [];
     const resolve = (context) => {
       if (!doc) return null;
@@ -43363,8 +43552,8 @@ import {
   useCallback as useCallback60,
   useEffect as useEffect74,
   useId as useId16,
-  useMemo as useMemo59,
-  useRef as useRef69,
+  useMemo as useMemo60,
+  useRef as useRef70,
   useState as useState88
 } from "react";
 import {
@@ -43372,7 +43561,7 @@ import {
 } from "@bendyline/squisq-video-react/media-edit";
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { useCallback as useCallback57, useEffect as useEffect72, useRef as useRef66, useState as useState85 } from "react";
+import { useCallback as useCallback57, useEffect as useEffect72, useRef as useRef67, useState as useState85 } from "react";
 import { MEDIA_FX_SPECS as MEDIA_FX_SPECS2, serializeMediaFx } from "@bendyline/squisq/mediaEdit";
 
 // src/mediaEdit/mediaEditDraft.ts
@@ -43543,11 +43732,11 @@ function useMediaDuration(url) {
   return duration;
 }
 function usePreviewPlayer(preview) {
-  const ctxRef = useRef66(null);
-  const sourceRef = useRef66(null);
-  const startedRef = useRef66(null);
+  const ctxRef = useRef67(null);
+  const sourceRef = useRef67(null);
+  const startedRef = useRef67(null);
   const [playing, setPlaying] = useState85(null);
-  const cueRef = useRef66(0);
+  const cueRef = useRef67(0);
   const [position, setPosition] = useState85(0);
   const frames = preview?.original[0]?.length ?? 0;
   const duration = preview && frames > 0 ? frames / preview.sampleRate : 0;
@@ -43659,7 +43848,7 @@ function MediaEditAudioSection({
   const [previewedFx, setPreviewedFx] = useState85(null);
   const [previewing, setPreviewing] = useState85(false);
   const [previewError, setPreviewError] = useState85(null);
-  const previewAbort = useRef66(null);
+  const previewAbort = useRef67(null);
   const player = usePreviewPlayer(preview);
   useEffect72(() => () => previewAbort.current?.abort(), []);
   const runPreview = useCallback57(async () => {
@@ -43841,7 +44030,7 @@ function MediaEditAudioSection({
 }
 
 // src/mediaEdit/MediaEditTimingSection.tsx
-import { useCallback as useCallback58, useEffect as useEffect73, useRef as useRef67, useState as useState86 } from "react";
+import { useCallback as useCallback58, useEffect as useEffect73, useRef as useRef68, useState as useState86 } from "react";
 import { jsx as jsx96, jsxs as jsxs77 } from "react/jsx-runtime";
 var DEFAULT_MAX_PAUSE = 0.8;
 function formatDb(value) {
@@ -43858,7 +44047,7 @@ function MediaEditTimingSection({
   const [maxPause, setMaxPause] = useState86(DEFAULT_MAX_PAUSE);
   const [finding, setFinding] = useState86(false);
   const [error, setError] = useState86(null);
-  const abortRef = useRef67(null);
+  const abortRef = useRef68(null);
   useEffect73(() => () => abortRef.current?.abort(), []);
   const findPauses = useCallback58(async () => {
     abortRef.current?.abort();
@@ -43958,7 +44147,7 @@ function MediaEditTimingSection({
 // src/mediaEdit/MediaEditFrameSection.tsx
 import {
   useCallback as useCallback59,
-  useRef as useRef68,
+  useRef as useRef69,
   useState as useState87
 } from "react";
 import { normalizeMediaCrop } from "@bendyline/squisq/mediaEdit";
@@ -43987,7 +44176,7 @@ function MediaEditFrameSection({ item, draft, onChange }) {
   const src = useResolvedMediaSrc(item.src);
   const [frame, setFrame] = useState87(null);
   const [aspect, setAspect] = useState87(null);
-  const stageRef = useRef68(null);
+  const stageRef = useRef69(null);
   const crop = draft.crop ?? FULL;
   const setCrop = useCallback59(
     (next) => onChange({ ...draft, crop: normalizeMediaCrop(clampCrop(next)) }),
@@ -44178,16 +44367,16 @@ function RenderStatusText({
 }
 function MediaEditModal({ target, onClose }) {
   const { doc, markdownSource, setMarkdownSource, mediaEditRenders } = useEditorContext();
-  const modalRef = useRef69(null);
-  const surfaceRef = useRef69(null);
+  const modalRef = useRef70(null);
+  const surfaceRef = useRef70(null);
   const titleId = useId16();
   useModalDialog({ rootRef: modalRef, dialogRef: surfaceRef, onClose });
-  const item = useMemo59(() => doc ? findEditableMedia(doc, target) : null, [doc, target]);
-  const companions = useMemo59(() => doc && item ? groupCompanions(doc, item) : [], [doc, item]);
+  const item = useMemo60(() => doc ? findEditableMedia(doc, target) : null, [doc, target]);
+  const companions = useMemo60(() => doc && item ? groupCompanions(doc, item) : [], [doc, item]);
   const renderStatus = useRenderStatus(item, mediaEditRenders);
   const [draft, setDraft] = useState88(() => draftFromEdits(item?.edits));
   const seedKey = item ? `${item.sourceLine}|${editsSignature(item.edits)}` : null;
-  const seededRef = useRef69(null);
+  const seededRef = useRef70(null);
   useEffect74(() => {
     if (seedKey === null || seededRef.current === seedKey) return;
     seededRef.current = seedKey;
@@ -44195,7 +44384,7 @@ function MediaEditModal({ target, onClose }) {
   }, [seedKey]);
   const tabs = TABS.filter((t) => t.id !== "frame" || item?.kind === "video");
   const [activeTab, setActiveTab] = useState88("audio");
-  const tabRefs = useRef69(/* @__PURE__ */ new Map());
+  const tabRefs = useRef70(/* @__PURE__ */ new Map());
   const onTabKeyDown = (event, index2) => {
     const next = event.key === "ArrowRight" ? (index2 + 1) % tabs.length : event.key === "ArrowLeft" ? (index2 - 1 + tabs.length) % tabs.length : event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : null;
     if (next == null) return;
@@ -44712,12 +44901,12 @@ function EditorShell({
   defaultThemeLabel
 }) {
   const effectiveContainer = workspaceContainer ?? null;
-  const effectiveMediaProvider = useMemo60(() => {
+  const effectiveMediaProvider = useMemo61(() => {
     if (mediaProvider !== void 0) return mediaProvider;
     if (effectiveContainer) return createMediaProviderFromContainer(effectiveContainer);
     return void 0;
   }, [mediaProvider, effectiveContainer]);
-  const ownedMediaEditRenders = useMemo60(
+  const ownedMediaEditRenders = useMemo61(
     () => mediaEditRenders === void 0 && effectiveMediaProvider ? createMediaEditRenderManager({ mediaProvider: effectiveMediaProvider }) : null,
     [mediaEditRenders, effectiveMediaProvider]
   );
@@ -44911,7 +45100,7 @@ function EditorShellInner({
   defaultThemeId,
   defaultThemeLabel
 }) {
-  const shellRef = useRef70(null);
+  const shellRef = useRef71(null);
   const {
     activeView,
     markdownSource,
@@ -44942,7 +45131,7 @@ function EditorShellInner({
   } = useEditorContext();
   const processedAudio = useProcessedAudio4(mediaEditRenders);
   const { docThemes, onDocThemesChange } = useDocCustomThemes();
-  const lastEditingView = useRef70(activeView === "raw" ? "raw" : "wysiwyg");
+  const lastEditingView = useRef71(activeView === "raw" ? "raw" : "wysiwyg");
   useEffect75(() => {
     if (activeView !== "preview") lastEditingView.current = activeView;
   }, [activeView]);
@@ -44959,7 +45148,7 @@ function EditorShellInner({
     workspaceContainer
   );
   const timelineDoc = timelineProjection?.contentDoc ?? doc;
-  const timelineRawSchedule = useMemo60(
+  const timelineRawSchedule = useMemo61(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc) : [],
     [timelineDoc]
   );
@@ -44968,20 +45157,20 @@ function EditorShellInner({
     basePath,
     mediaProvider ?? null
   );
-  const timelineDuration = useMemo60(
+  const timelineDuration = useMemo61(
     () => timelineDoc ? getDocPlaybackDuration3(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src)
     }) : 0,
     [timelineDoc, timelineClipDurations]
   );
-  const timelineSchedule = useMemo60(
+  const timelineSchedule = useMemo61(
     () => timelineDoc ? resolveMediaSchedule4(timelineDoc, {
       intrinsicDuration: (clip) => timelineClipDurations.get(clip.src),
       processedAudio
     }) : [],
     [timelineDoc, timelineClipDurations, processedAudio]
   );
-  const timelineVideoSchedule = useMemo60(
+  const timelineVideoSchedule = useMemo61(
     () => timelineDoc ? [
       ...timelineSchedule.filter((clip) => clip.kind === "video"),
       ...collectEmbeddedVideoSchedule(timelineDoc)
@@ -44999,11 +45188,11 @@ function EditorShellInner({
   const [mediaCount, setMediaCount] = useState89(0);
   const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState89(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
-  const usedMediaPaths = useMemo60(
+  const usedMediaPaths = useMemo61(
     () => collectMediaReferencesFromMarkdown(markdownSource),
     [markdownSource]
   );
-  const imageEditFallbackContainerRef = useRef70(null);
+  const imageEditFallbackContainerRef = useRef71(null);
   if (imageEditFallbackContainerRef.current === null) {
     imageEditFallbackContainerRef.current = new MemoryContentContainer2();
   }
@@ -45048,7 +45237,7 @@ function EditorShellInner({
   const handleOpenMediaBinRecorder = useCallback61(() => {
     setMediaBinRecorderOpen(true);
   }, []);
-  const insertionTarget = useMemo60(
+  const insertionTarget = useMemo61(
     () => ({ activeView, tiptapEditor, monacoEditor, appendMarkdown: insertAtCursor }),
     [activeView, tiptapEditor, monacoEditor, insertAtCursor]
   );
@@ -45058,7 +45247,7 @@ function EditorShellInner({
     },
     [insertionTarget]
   );
-  const docBasenameRef = useRef70("document");
+  const docBasenameRef = useRef71("document");
   useEffect75(() => {
     let cancelled = false;
     docBasenameRef.current = "document";