@bendyline/squisq-editor-react 2.8.0 → 2.9.0

package/dist/{chunk-SUXRSZ4Y.js → chunk-53PXOIMU.js}

@@ -6,7 +6,7 @@ import {
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-K2WJYVS4.js";
+} from "./chunk-TLRB3IQC.js";
 import {
   ImageEditor,
   ImageViewer,
@@ -3400,6 +3400,9 @@ function resolveDisplayMode(value) {
   if (v2 === "slides" || v2 === "presentation" || v2 === "deck") return "slideshow";
   if (v2 === "teleprompter" || v2 === "prompter") return "narrate";
   if (v2 === "dashboard" || v2 === "dash") return "dashboard";
+  if (v2 === "flashcards" || v2 === "flashcard" || v2 === "study" || v2 === "quiz") {
+    return "flashcards";
+  }
   if (v2 === "page" || v2 === "paged") return "linear";
   if (v2 === "document" || v2 === "scroll" || v2 === "html" || v2 === "plain" || v2 === "reader") {
     return "page";
@@ -4139,6 +4142,12 @@ var DISPLAY_MODE_OPTIONS = [
     icon: "fa-solid fa-images",
     summary: "Present designed slides one at a time."
   },
+  {
+    key: "flashcards",
+    label: "Flashcards",
+    icon: "fa-solid fa-clone",
+    summary: "Study with progressive reveals and quizzes."
+  },
   {
     key: "video",
     label: "Video",
@@ -4190,6 +4199,9 @@ var CONTROL_KEYS = [
   "dashboardImage"
 ];
 function controlKeysForMode(displayMode, hasVideoMedia) {
+  if (displayMode === "flashcards") {
+    return ["theme", "transform"];
+  }
   if (displayMode === "dashboard") {
     return ["format", "layout", "theme", "transform", "dashboardImage"];
   }
@@ -7768,6 +7780,7 @@ import {
   readFrontmatterThemeId as readFrontmatterThemeId2,
   setFrontmatterValues as setFrontmatterValues3
 } from "@bendyline/squisq/markdown";
+import { markdownToDoc as markdownToDoc2 } from "@bendyline/squisq/doc";
 import { getTransformStyleSummaries as getTransformStyleSummaries3 } from "@bendyline/squisq/transform";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function readFm(fm, canonical, legacy) {
@@ -7788,7 +7801,17 @@ function DocumentSettingsDialog({
   const parsed = useMemo14(() => parseMarkdown4(markdownSource), [markdownSource]);
   const frontmatter = parsed.frontmatter;
   const inferredTitle = useMemo14(() => inferDocumentTitle(parsed), [parsed]);
+  const inferredSubtitle = useMemo14(
+    () => markdownToDoc2({
+      ...parsed,
+      // Ignore an explicit subtitle while calculating the value the cover
+      // would otherwise inherit from document content.
+      frontmatter: { ...parsed.frontmatter, subtitle: null }
+    }).startBlock?.subtitle,
+    [parsed]
+  );
   const currentTitle = typeof frontmatter?.title === "string" ? frontmatter.title : "";
+  const currentSubtitle = typeof frontmatter?.subtitle === "string" ? frontmatter.subtitle : "";
   const currentTheme = readFrontmatterThemeId2(frontmatter) ?? "";
   const currentTransform = resolvePersistedTransformStyleId(
     readFm(
@@ -7803,6 +7826,7 @@ function DocumentSettingsDialog({
     FRONTMATTER_SETTING_KEYS.captions.legacy
   );
   const [title, setTitle] = useState15(currentTitle);
+  const [subtitle, setSubtitle] = useState15(currentSubtitle);
   const [theme, setTheme] = useState15(currentTheme);
   const [transform, setTransform] = useState15(currentTransform);
   const [captions, setCaptions] = useState15(currentCaptions);
@@ -7830,8 +7854,12 @@ function DocumentSettingsDialog({
       const trimmedTitle = title.trim();
       const titleMatchesInferred = !!inferredTitle && trimmedTitle === inferredTitle;
       const nextTitle = !trimmedTitle || titleMatchesInferred ? null : trimmedTitle;
+      const trimmedSubtitle = subtitle.trim();
+      const subtitleMatchesInferred = !!inferredSubtitle && trimmedSubtitle === inferredSubtitle.trim();
+      const nextSubtitle = !trimmedSubtitle || subtitleMatchesInferred ? null : trimmedSubtitle;
       const updates = {
         title: nextTitle,
+        subtitle: nextSubtitle,
         [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
           theme || FRONTMATTER_SETTING_DEFAULTS.theme,
           FRONTMATTER_SETTING_DEFAULTS.theme
@@ -7853,7 +7881,17 @@ function DocumentSettingsDialog({
       const nextSource = setFrontmatterValues3(markdownSource, updates);
       onSave(nextSource);
     },
-    [title, theme, transform, captions, inferredTitle, markdownSource, onSave]
+    [
+      title,
+      subtitle,
+      theme,
+      transform,
+      captions,
+      inferredTitle,
+      inferredSubtitle,
+      markdownSource,
+      onSave
+    ]
   );
   return /* @__PURE__ */ jsx17("div", { ref: overlayRef, className: "squisq-doc-settings-overlay", onMouseDown: handleBackdrop, children: /* @__PURE__ */ jsxs13(
     "form",
@@ -7901,6 +7939,26 @@ function DocumentSettingsDialog({
               " \u2014 leave blank to use it."
             ] }) : /* @__PURE__ */ jsx17("span", { className: "squisq-doc-settings-hint", children: "No title heading found \u2014 set one here or add an H1 to the document." })
           ] }),
+          /* @__PURE__ */ jsxs13("div", { className: "squisq-doc-settings-field", children: [
+            /* @__PURE__ */ jsx17("label", { className: "squisq-doc-settings-label", htmlFor: "squisq-doc-settings-subtitle", children: "Subtitle" }),
+            /* @__PURE__ */ jsx17(
+              "input",
+              {
+                id: "squisq-doc-settings-subtitle",
+                type: "text",
+                className: "squisq-doc-settings-input",
+                value: subtitle,
+                onChange: (e2) => setSubtitle(e2.target.value),
+                placeholder: inferredSubtitle ?? "Cover subtitle",
+                spellCheck: true
+              }
+            ),
+            inferredSubtitle ? /* @__PURE__ */ jsxs13("span", { className: "squisq-doc-settings-hint", children: [
+              "Defaults to ",
+              /* @__PURE__ */ jsx17("strong", { children: inferredSubtitle }),
+              " \u2014 leave blank to use it."
+            ] }) : /* @__PURE__ */ jsx17("span", { className: "squisq-doc-settings-hint", children: "Optional supporting text shown on the document cover." })
+          ] }),
           /* @__PURE__ */ jsxs13("div", { className: "squisq-doc-settings-field", children: [
             /* @__PURE__ */ jsx17("span", { className: "squisq-doc-settings-label", children: "Theme" }),
             /* @__PURE__ */ jsx17(
@@ -19176,18 +19234,25 @@ ${TASK_LIST_MARKDOWN}
 }
 
 // src/StatusBar.tsx
-import { useMemo as useMemo25 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo25, useState as useState32 } from "react";
 import { countBlocks } from "@bendyline/squisq/doc";
 import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+var STATS_DEBOUNCE_MS = 150;
 function StatusBar({ className, slotRight }) {
-  const { markdownSource, doc, parseError, isParsing } = useEditorContext();
+  const { markdownSource, doc, parseError } = useEditorContext();
+  const [statsSource, setStatsSource] = useState32(markdownSource);
+  useEffect25(() => {
+    if (statsSource === markdownSource) return;
+    const timeout = setTimeout(() => setStatsSource(markdownSource), STATS_DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [markdownSource, statsSource]);
   const stats = useMemo25(() => {
-    const chars = markdownSource.length;
-    const words = markdownSource.trim() ? markdownSource.trim().split(/\s+/).length : 0;
-    const lines2 = markdownSource.split("\n").length;
-    const blocks = doc ? countBlocks(doc.blocks) : 0;
-    return { chars, words, lines: lines2, blocks };
-  }, [markdownSource, doc]);
+    const chars = statsSource.length;
+    const words = statsSource.trim() ? statsSource.trim().split(/\s+/).length : 0;
+    const lines2 = statsSource.split("\n").length;
+    return { chars, words, lines: lines2 };
+  }, [statsSource]);
+  const blocks = useMemo25(() => doc ? countBlocks(doc.blocks) : 0, [doc]);
   return /* @__PURE__ */ jsxs32("div", { className: `squisq-status-bar ${className || ""}`, children: [
     /* @__PURE__ */ jsxs32("span", { className: "squisq-status-item", children: [
       stats.words,
@@ -19202,19 +19267,19 @@ function StatusBar({ className, slotRight }) {
       " lines"
     ] }),
     /* @__PURE__ */ jsxs32("span", { className: "squisq-status-item", children: [
-      stats.blocks,
+      blocks,
       " ",
-      stats.blocks === 1 ? "block" : "blocks"
+      blocks === 1 ? "block" : "blocks"
     ] }),
     /* @__PURE__ */ jsx42("span", { className: "squisq-status-spacer" }),
     parseError && /* @__PURE__ */ jsx42("span", { className: "squisq-status-item squisq-status-error", title: parseError, children: "\u26A0 Error" }),
-    !isParsing && !parseError && /* @__PURE__ */ jsx42("span", { className: "squisq-status-item squisq-status-ok", children: "\u2713 OK" }),
+    !parseError && /* @__PURE__ */ jsx42("span", { className: "squisq-status-item squisq-status-ok", children: "\u2713 OK" }),
     slotRight
   ] });
 }
 
 // src/RawEditor.tsx
-import { useRef as useRef29, useCallback as useCallback30, useEffect as useEffect25, useState as useState32 } from "react";
+import { useRef as useRef29, useCallback as useCallback30, useEffect as useEffect26, useState as useState33 } from "react";
 import { getAvailableTemplates } from "@bendyline/squisq/doc";
 import { suggestIcons, resolveIcon, iconGlyph } from "@bendyline/squisq/icons";
 import { BLOCK_META_KEY_DESCRIPTORS, tokenizeAttrTokens as tokenizeAttrTokens3 } from "@bendyline/squisq/markdown";
@@ -19286,10 +19351,10 @@ var SQUISQ_THEMES = {
   "vs-dark": "squisq-dark"
 };
 function useDocumentMonacoLanguages(language, source) {
-  const [requested, setRequested] = useState32(
+  const [requested, setRequested] = useState33(
     () => monacoLanguagesForDocument(language, source)
   );
-  useEffect25(() => {
+  useEffect26(() => {
     const delay = normalizeMonacoLanguage(language) === "markdown" ? 250 : 0;
     const timer = window.setTimeout(() => {
       setRequested(monacoLanguagesForDocument(language, source));
@@ -19325,14 +19390,14 @@ function RawEditor({
   const keyDisposable = useRef29(null);
   const submitOnEnterRef = useRef29(submitOnEnter);
   const readOnlyRef = useRef29(readOnly);
-  useEffect25(() => {
+  useEffect26(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
-  useEffect25(() => {
+  useEffect26(() => {
     readOnlyRef.current = readOnly;
   }, [readOnly]);
   const mentionProviderRef = useRef29(mentionProvider);
-  useEffect25(() => {
+  useEffect26(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const docCustomTemplates = doc?.customTemplates;
@@ -19343,7 +19408,7 @@ function RawEditor({
       detail: "Block template"
     }));
   }
-  useEffect25(() => {
+  useEffect26(() => {
     const builtIns = getAvailableTemplates().map((name) => ({
       name,
       detail: "Block template"
@@ -19685,7 +19750,7 @@ function RawEditor({
     },
     [setMonacoEditor, language]
   );
-  useEffect25(() => {
+  useEffect26(() => {
     return () => {
       setMonacoEditor(null);
       completionDisposable.current?.dispose();
@@ -19713,7 +19778,7 @@ function RawEditor({
     },
     [setEditorSource]
   );
-  useEffect25(() => {
+  useEffect26(() => {
     const editor = editorRef.current;
     if (editor) {
       const currentValue = editor.getValue();
@@ -19724,7 +19789,7 @@ function RawEditor({
       }
     }
   }, [editorSource]);
-  useEffect25(() => {
+  useEffect26(() => {
     const editor = editorRef.current;
     if (!editor || !monacoNs) return;
     if (language !== "markdown") return;
@@ -20015,7 +20080,7 @@ function propsBadgeSpec(summary) {
 }
 
 // src/diagram/DiagramCanvas.tsx
-import { useCallback as useCallback31, useMemo as useMemo26, useRef as useRef30, useState as useState33 } from "react";
+import { useCallback as useCallback31, useMemo as useMemo26, useRef as useRef30, useState as useState34 } from "react";
 
 // src/diagram/diagramConstants.ts
 var DIAGRAM_VIEWPORT = { width: 1600, height: 900 };
@@ -20040,7 +20105,7 @@ function DiagramCanvas({
     () => buildDiagramScene(incomingNodes, incomingEdges),
     [incomingNodes, incomingEdges]
   );
-  const [internalToolId, setInternalToolId] = useState33("select");
+  const [internalToolId, setInternalToolId] = useState34("select");
   const activeToolId = controlledToolId ?? internalToolId;
   const setActiveToolId = onActiveToolIdChange ?? setInternalToolId;
   const handleSceneCommand = useCallback31(
@@ -20328,7 +20393,7 @@ function removeNodeOp(diagram, nodeId) {
 }
 
 // src/asciiDiagram/asciiDiagramData.ts
-import { useEffect as useEffect26, useMemo as useMemo28, useState as useState35 } from "react";
+import { useEffect as useEffect27, useMemo as useMemo28, useState as useState36 } from "react";
 import {
   asciiCellToCanvas,
   asciiDiagramToTemplateData,
@@ -20350,7 +20415,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/asciiDiagram/AsciiDiagramWidget.tsx
-import { useCallback as useCallback32, useMemo as useMemo27, useRef as useRef31, useState as useState34 } from "react";
+import { useCallback as useCallback32, useMemo as useMemo27, useRef as useRef31, useState as useState35 } from "react";
 
 // src/asciiDiagram/asciiDiagramCommands.ts
 import {
@@ -20598,11 +20663,11 @@ function AsciiDiagramWidget({
   textChannel
 }) {
   const view = useAsciiDiagramData(editor, blockId);
-  const [maximized, setMaximized] = useState34(false);
-  const [height, setHeight] = useState34(null);
-  const [dragHeight, setDragHeight] = useState34(null);
+  const [maximized, setMaximized] = useState35(false);
+  const [height, setHeight] = useState35(null);
+  const [dragHeight, setDragHeight] = useState35(null);
   const canvasOffsetRef = useRef31(null);
-  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState34(0);
+  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState35(0);
   const inlineRef = useRef31(null);
   const effectiveHeight = dragHeight ?? height;
   if (view && canvasOffsetRef.current === null) {
@@ -20655,8 +20720,8 @@ function AsciiDiagramWidget({
     setDragHeight(null);
     setHeight(null);
   }, []);
-  const [activeToolId, setActiveToolId] = useState34("select");
-  const [selectedIds, setSelectedIds] = useState34(() => /* @__PURE__ */ new Set());
+  const [activeToolId, setActiveToolId] = useState35("select");
+  const [selectedIds, setSelectedIds] = useState35(() => /* @__PURE__ */ new Set());
   const selectedNodeIds = useMemo27(
     () => [...selectedIds].map((id) => nodeIdFromCardLayerId(id)).filter((id) => id != null),
     [selectedIds]
@@ -21027,8 +21092,8 @@ function asciiDiagramToCanvas(diagram) {
   return { nodes, edges };
 }
 function useAsciiDiagramData(editor, blockId) {
-  const [version, setVersion] = useState35(0);
-  useEffect26(() => {
+  const [version, setVersion] = useState36(0);
+  useEffect27(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -22858,7 +22923,7 @@ function mermaidErrorMessage(error) {
 }
 
 // src/mermaid/mermaidSurfaceTheme.ts
-import { useEffect as useEffect27, useMemo as useMemo29, useState as useState36 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo29, useState as useState37 } from "react";
 import { relativeLuminance } from "@bendyline/squisq/schemas";
 var EDITOR_SURFACE = {
   light: {
@@ -22894,8 +22959,8 @@ function resolveMermaidSurfaceTheme(host, theme) {
   return applyHostSurface(readHostSurface(host), theme);
 }
 function useMermaidSurfaceTheme(host, theme) {
-  const [surface, setSurface] = useState36(() => readHostSurface(host));
-  useEffect27(() => {
+  const [surface, setSurface] = useState37(() => readHostSurface(host));
+  useEffect28(() => {
     const sync = () => setSurface((current) => {
       const next = readHostSurface(host);
       return current.scheme === next.scheme && current.inheritsThemeColors === next.inheritsThemeColors ? current : next;
@@ -22921,7 +22986,7 @@ function useMermaidSurfaceTheme(host, theme) {
 }
 
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback33, useEffect as useEffect28, useId as useId12, useLayoutEffect as useLayoutEffect5, useRef as useRef32, useState as useState37 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect29, useId as useId12, useLayoutEffect as useLayoutEffect5, useRef as useRef32, useState as useState38 } from "react";
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -22985,20 +23050,20 @@ function MermaidDiagramCanvas({
   const renameInputRef = useRef32(null);
   const panDragRef = useRef32(null);
   const renameHintId = useId12();
-  const [svg, setSvg] = useState37("");
-  const [model2, setModel] = useState37(null);
-  const [diagramType, setDiagramType] = useState37("mermaid");
-  const [error, setError] = useState37("");
-  const [rendering, setRendering] = useState37(true);
-  const [zoom, setZoom] = useState37(1);
-  const [viewMode, setViewMode] = useState37("fit");
-  const [contentSize, setContentSize] = useState37(null);
-  const [canvasSize, setCanvasSize] = useState37(null);
-  const [pan, setPan] = useState37({ x: 0, y: 0 });
-  const [panning, setPanning] = useState37(false);
-  const [selectionAnchor, setSelectionAnchor] = useState37(null);
-  const [renameValue, setRenameValue] = useState37("");
-  useEffect28(() => {
+  const [svg, setSvg] = useState38("");
+  const [model2, setModel] = useState38(null);
+  const [diagramType, setDiagramType] = useState38("mermaid");
+  const [error, setError] = useState38("");
+  const [rendering, setRendering] = useState38(true);
+  const [zoom, setZoom] = useState38(1);
+  const [viewMode, setViewMode] = useState38("fit");
+  const [contentSize, setContentSize] = useState38(null);
+  const [canvasSize, setCanvasSize] = useState38(null);
+  const [pan, setPan] = useState38({ x: 0, y: 0 });
+  const [panning, setPanning] = useState38(false);
+  const [selectionAnchor, setSelectionAnchor] = useState38(null);
+  const [renameValue, setRenameValue] = useState38("");
+  useEffect29(() => {
     if (!panning) return;
     const finish = () => {
       panDragRef.current = null;
@@ -23026,7 +23091,7 @@ function MermaidDiagramCanvas({
       window.removeEventListener("blur", finish);
     };
   }, [panning]);
-  useEffect28(() => {
+  useEffect29(() => {
     let current = true;
     const id = `squisq-mermaid-svg-${++renderSequence}`;
     setRendering(true);
@@ -23297,7 +23362,7 @@ function MermaidDiagramCanvas({
     updateSelectionAnchor,
     zoom
   ]);
-  useEffect28(() => {
+  useEffect29(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const update = () => updateSelectionAnchor();
@@ -23702,7 +23767,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect29, useLayoutEffect as useLayoutEffect6, useMemo as useMemo30, useRef as useRef33, useState as useState38 } from "react";
+import { useEffect as useEffect30, useLayoutEffect as useLayoutEffect6, useMemo as useMemo30, useRef as useRef33, useState as useState39 } from "react";
 import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -23710,10 +23775,10 @@ var PALETTE_MAX_HEIGHT = 520;
 var PALETTE_GAP = 6;
 var VIEWPORT_GUTTER = 8;
 function MermaidShapePalette({ selected, onPick, onClose }) {
-  const [query, setQuery] = useState38("");
-  const [position, setPosition] = useState38(null);
+  const [query, setQuery] = useState39("");
+  const [position, setPosition] = useState39(null);
   const ref = useRef33(null);
-  useEffect29(() => {
+  useEffect30(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -23884,7 +23949,7 @@ function MermaidShapeThumb({ shape }) {
 }
 
 // src/mermaid/mermaidData.ts
-import { useEffect as useEffect31, useMemo as useMemo31, useState as useState40 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo31, useState as useState41 } from "react";
 
 // src/mermaid/MermaidDiagramExtension.ts
 import { Extension as Extension5 } from "@tiptap/core";
@@ -23896,10 +23961,10 @@ import { createRoot as createRoot3 } from "react-dom/client";
 // src/mermaid/MermaidDiagramWidget.tsx
 import {
   useCallback as useCallback34,
-  useEffect as useEffect30,
+  useEffect as useEffect31,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef34,
-  useState as useState39,
+  useState as useState40,
   useSyncExternalStore
 } from "react";
 
@@ -24268,16 +24333,16 @@ function MermaidDiagramWidget({
     themeStore?.getSnapshot ?? getDefaultTheme
   );
   const theme = useMermaidSurfaceTheme(host, docTheme);
-  const [model2, setModel] = useState39(null);
-  const [selection, setSelection] = useState39(null);
-  const [renaming, setRenaming] = useState39(null);
-  const [connecting, setConnecting] = useState39(false);
-  const [connectSourceId, setConnectSourceId] = useState39(null);
-  const [openPopover, setOpenPopover] = useState39(null);
-  const [editNotice, setEditNotice] = useState39("");
-  const [maximized, setMaximized] = useState39(false);
-  const [height, setHeight] = useState39(null);
-  const [dragHeight, setDragHeight] = useState39(null);
+  const [model2, setModel] = useState40(null);
+  const [selection, setSelection] = useState40(null);
+  const [renaming, setRenaming] = useState40(null);
+  const [connecting, setConnecting] = useState40(false);
+  const [connectSourceId, setConnectSourceId] = useState40(null);
+  const [openPopover, setOpenPopover] = useState40(null);
+  const [editNotice, setEditNotice] = useState40("");
+  const [maximized, setMaximized] = useState40(false);
+  const [height, setHeight] = useState40(null);
+  const [dragHeight, setDragHeight] = useState40(null);
   const inlineRef = useRef34(null);
   const effectiveHeight = dragHeight ?? height;
   const onModelChange = useCallback34((next) => {
@@ -24536,7 +24601,7 @@ function MermaidDiagramWidget({
     },
     [effectiveHeight]
   );
-  useEffect30(() => {
+  useEffect31(() => {
     if (!editNotice) return;
     const timeout = window.setTimeout(() => setEditNotice(""), 7e3);
     return () => window.clearTimeout(timeout);
@@ -24773,7 +24838,7 @@ function MermaidDiagramWidget({
   ] });
 }
 function useDismissibleMermaidPopover(ref, onClose) {
-  useEffect30(() => {
+  useEffect31(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -24791,7 +24856,7 @@ function useDismissibleMermaidPopover(ref, onClose) {
   }, [onClose, ref]);
 }
 function useClampedMermaidPopoverPosition(ref, preferredWidth, preferredMaxHeight) {
-  const [position, setPosition] = useState39(null);
+  const [position, setPosition] = useState40(null);
   useLayoutEffect7(() => {
     const picker = ref.current;
     const anchor = picker?.parentElement;
@@ -24857,7 +24922,7 @@ function MermaidPropertiesPalette({
   onApply,
   onClose
 }) {
-  const [values, setValues] = useState39(
+  const [values, setValues] = useState40(
     () => Object.fromEntries(properties.map((property) => [property.id, property.value]))
   );
   const ref = useRef34(null);
@@ -25151,8 +25216,8 @@ var MermaidDiagramExtension = Extension5.create({
 
 // src/mermaid/mermaidData.ts
 function useMermaidDiagramData(editor, blockId) {
-  const [version, setVersion] = useState40(0);
-  useEffect31(() => {
+  const [version, setVersion] = useState41(0);
+  useEffect32(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -25176,13 +25241,13 @@ import { createElement as createElement10 } from "react";
 import { createRoot as createRoot4 } from "react-dom/client";
 
 // src/codeSnippet/CodeSnippetWidget.tsx
-import { useCallback as useCallback35, useEffect as useEffect33, useState as useState42 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect34, useState as useState43 } from "react";
 
 // src/codeSnippet/codeSnippetData.ts
-import { useEffect as useEffect32, useMemo as useMemo32, useState as useState41 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo32, useState as useState42 } from "react";
 function useCodeSnippetData(editor, blockId) {
-  const [version, setVersion] = useState41(0);
-  useEffect32(() => {
+  const [version, setVersion] = useState42(0);
+  useEffect33(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -25227,10 +25292,10 @@ function schemeFromHost(host) {
   return host?.closest("[data-theme]")?.dataset.theme === "dark" ? "dark" : "light";
 }
 function useHostColorScheme(host) {
-  const [scheme, setScheme] = useState42(
+  const [scheme, setScheme] = useState43(
     () => host != null && !host.isConnected ? null : schemeFromHost(host)
   );
-  useEffect33(() => {
+  useEffect34(() => {
     if (host != null && !host.isConnected) {
       setScheme(null);
       const raf = requestAnimationFrame(() => {
@@ -25248,8 +25313,8 @@ function useHostColorScheme(host) {
   return scheme;
 }
 function useEditorEditable(editor) {
-  const [editable, setEditable] = useState42(editor.isEditable);
-  useEffect33(() => {
+  const [editable, setEditable] = useState43(editor.isEditable);
+  useEffect34(() => {
     const sync = () => setEditable(editor.isEditable);
     editor.on("update", sync);
     editor.on("transaction", sync);
@@ -25270,7 +25335,7 @@ function CodeSnippetWidget({
   const { ready } = useMonacoLoader(data?.monacoLanguage);
   const colorScheme = useHostColorScheme(host);
   const editable = useEditorEditable(editor);
-  const [modelInstanceId] = useState42(allocateCodeSnippetModelInstanceId);
+  const [modelInstanceId] = useState43(allocateCodeSnippetModelInstanceId);
   const handleChange = useCallback35(
     (value) => {
       if (!editable) return;
@@ -25493,7 +25558,7 @@ import { createRoot as createRoot5 } from "react-dom/client";
 import { createElement as createElement11 } from "react";
 
 // src/fenceWidgets/HostFenceWidget.tsx
-import { Component, useEffect as useEffect34, useMemo as useMemo33, useState as useState43 } from "react";
+import { Component, useEffect as useEffect35, useMemo as useMemo33, useState as useState44 } from "react";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var HostFenceErrorBoundary = class extends Component {
   constructor() {
@@ -25508,8 +25573,8 @@ var HostFenceErrorBoundary = class extends Component {
   }
 };
 function HostFenceWidget({ editor, blockId, getRenderers, getTheme }) {
-  const [version, setVersion] = useState43(0);
-  useEffect34(() => {
+  const [version, setVersion] = useState44(0);
+  useEffect35(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -25659,7 +25724,7 @@ var HostFenceExtension = Extension7.create({
 });
 
 // src/treeview/treeViewData.ts
-import { useEffect as useEffect35, useMemo as useMemo34, useState as useState45 } from "react";
+import { useEffect as useEffect36, useMemo as useMemo34, useState as useState46 } from "react";
 
 // src/treeview/TreeViewExtension.ts
 import { Extension as Extension8 } from "@tiptap/core";
@@ -25676,7 +25741,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/treeview/TreeOutlineWidget.tsx
-import { useCallback as useCallback36, useRef as useRef35, useState as useState44 } from "react";
+import { useCallback as useCallback36, useRef as useRef35, useState as useState45 } from "react";
 
 // src/treeview/treeViewCommands.ts
 import { parseTree, renderTree } from "@bendyline/squisq/doc";
@@ -25913,10 +25978,10 @@ function dropPositionForPointer(event) {
 }
 function TreeOutlineWidget({ editor, blockId }) {
   const view = useTreeViewData(editor, blockId);
-  const [collapsed, setCollapsed] = useState44(() => /* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = useState45(() => /* @__PURE__ */ new Set());
   const activeDragRef = useRef35(null);
-  const [draggedId, setDraggedId] = useState44(null);
-  const [dropTarget, setDropTarget] = useState44(null);
+  const [draggedId, setDraggedId] = useState45(null);
+  const [dropTarget, setDropTarget] = useState45(null);
   const dispatch = useCallback36(
     (cmd) => applyTreeCommand(editor, blockId, cmd),
     [editor, blockId]
@@ -26063,7 +26128,7 @@ function TreeRowView({
   const hasChildren = node2.children.length > 0;
   const isCollapsed = collapsed.has(node2.id);
   const isDir = node2.isDir || hasChildren;
-  const [draft, setDraft] = useState44(node2.label);
+  const [draft, setDraft] = useState45(node2.label);
   const dropPosition = dropTarget?.id === node2.id ? dropTarget.position : null;
   const itemClassName = [
     "squisq-tree-item",
@@ -26367,8 +26432,8 @@ var TreeViewExtension = Extension8.create({
 
 // src/treeview/treeViewData.ts
 function useTreeViewData(editor, blockId) {
-  const [version, setVersion] = useState45(0);
-  useEffect35(() => {
+  const [version, setVersion] = useState46(0);
+  useEffect36(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -26394,7 +26459,7 @@ function shouldPasteAsTreeFence(text) {
 }
 
 // src/timeline/timelineData.ts
-import { useEffect as useEffect37, useMemo as useMemo36, useRef as useRef37, useState as useState47 } from "react";
+import { useEffect as useEffect38, useMemo as useMemo36, useRef as useRef37, useState as useState48 } from "react";
 
 // src/timeline/TimelineViewExtension.ts
 import { Extension as Extension9 } from "@tiptap/core";
@@ -26409,7 +26474,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/timeline/TimelineEditorWidget.tsx
-import { useCallback as useCallback37, useEffect as useEffect36, useMemo as useMemo35, useRef as useRef36, useState as useState46 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect37, useMemo as useMemo35, useRef as useRef36, useState as useState47 } from "react";
 import {
   asciiTimelineToTemplateData
 } from "@bendyline/squisq/doc";
@@ -26893,13 +26958,13 @@ import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs40 } from "react/jsx-
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 function TimelineEditorWidget({ editor, blockId }) {
   const view = useTimelineData(editor, blockId);
-  const [selectedEventId, setSelectedEventId] = useState46(null);
-  const [addingTrackId, setAddingTrackId] = useState46(null);
-  const [editingTrackId, setEditingTrackId] = useState46(null);
-  const [hover, setHover] = useState46(null);
-  const [dragged, setDragged] = useState46(null);
+  const [selectedEventId, setSelectedEventId] = useState47(null);
+  const [addingTrackId, setAddingTrackId] = useState47(null);
+  const [editingTrackId, setEditingTrackId] = useState47(null);
+  const [hover, setHover] = useState47(null);
+  const [dragged, setDragged] = useState47(null);
   const suppressClickEventId = useRef36(null);
-  const [announcement, setAnnouncement] = useState46("");
+  const [announcement, setAnnouncement] = useState47("");
   const dispatch = useCallback37(
     (command) => {
       const result = applyTimelineCommand(editor, blockId, command);
@@ -26962,7 +27027,7 @@ function TimelineEditorWidget({ editor, blockId }) {
     }
     return null;
   }, [selectedEventId, view]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!view) return;
     const ids = new Set(
       view.timeline.tracks.flatMap((track) => track.events.map((event) => event.id))
@@ -26970,13 +27035,13 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (selectedEventId && ids.has(selectedEventId)) return;
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (editable) return;
     setAddingTrackId(null);
     setEditingTrackId(null);
     setHover(null);
   }, [editable]);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
       return;
     }
@@ -27382,8 +27447,8 @@ function InlineTrackLabel({
   onStart,
   onFinish
 }) {
-  const [draft, setDraft] = useState46(label);
-  useEffect36(() => {
+  const [draft, setDraft] = useState47(label);
+  useEffect37(() => {
     if (editing) setDraft(label);
   }, [editing, label]);
   const commitLabel = () => {
@@ -27440,10 +27505,10 @@ function EventInspector({
   onDelete
 }) {
   const { event } = selected;
-  const [label, setLabel] = useState46(event.label);
-  const [description, setDescription] = useState46(event.description ?? "");
-  useEffect36(() => setLabel(event.label), [event.label]);
-  useEffect36(() => setDescription(event.description ?? ""), [event.description]);
+  const [label, setLabel] = useState47(event.label);
+  const [description, setDescription] = useState47(event.description ?? "");
+  useEffect37(() => setLabel(event.label), [event.label]);
+  useEffect37(() => setDescription(event.description ?? ""), [event.description]);
   const update = (patch) => dispatch(patch);
   const commitLabel = () => {
     const next = label.trim();
@@ -27748,9 +27813,9 @@ var TimelineViewExtension = Extension9.create({
 
 // src/timeline/timelineData.ts
 function useTimelineData(editor, blockId) {
-  const [version, setVersion] = useState47(0);
+  const [version, setVersion] = useState48(0);
   const dataCache = useRef37(null);
-  useEffect37(() => {
+  useEffect38(() => {
     const onEditorChange = () => setVersion((value) => value + 1);
     editor.on("transaction", onEditorChange);
     editor.on("update", onEditorChange);
@@ -27785,7 +27850,7 @@ function shouldPasteAsTimelineFence(text) {
 }
 
 // src/BlockPropertiesPopover.tsx
-import { useEffect as useEffect38, useId as useId13, useRef as useRef38, useState as useState48 } from "react";
+import { useEffect as useEffect39, useId as useId13, useRef as useRef38, useState as useState49 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT = ".squisq-transition-flyout";
@@ -27801,13 +27866,13 @@ function BlockPropertiesPopover({
 }) {
   const panelRef = useRef38(null);
   const panelId = `squisq-block-props-portal-${useId13().replace(/:/g, "")}`;
-  const [inner, setInner] = useState48(blockAttrs);
-  const [templateInner, setTemplateInner] = useState48(templateParams);
-  const [style, setStyle] = useState48(() => computeStyle(anchorRect));
-  useEffect38(() => {
+  const [inner, setInner] = useState49(blockAttrs);
+  const [templateInner, setTemplateInner] = useState49(templateParams);
+  const [style, setStyle] = useState49(() => computeStyle(anchorRect));
+  useEffect39(() => {
     requestAnimationFrame(() => setStyle(computeStyle(anchorRect, panelRef.current)));
   }, [anchorRect]);
-  useEffect38(() => {
+  useEffect39(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -27969,7 +28034,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback38, useEffect as useEffect42, useMemo as useMemo37, useRef as useRef40, useState as useState52 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect43, useMemo as useMemo37, useRef as useRef40, useState as useState53 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection } from "@tiptap/pm/state";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -27982,7 +28047,7 @@ import TaskItem from "@tiptap/extension-task-item";
 import Link2 from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
 import { resolveFontFamily as resolveFontFamily2, FONT_FALLBACKS as FONT_FALLBACKS2, VIEWPORT_PRESETS as VIEWPORT_PRESETS3 } from "@bendyline/squisq/schemas";
-import { DEFAULT_THEME as DEFAULT_THEME4, flattenBlocks as flattenBlocks2, markdownToDoc as markdownToDoc2 } from "@bendyline/squisq/doc";
+import { DEFAULT_THEME as DEFAULT_THEME4, flattenBlocks as flattenBlocks2, markdownToDoc as markdownToDoc3 } from "@bendyline/squisq/doc";
 import { parseMarkdown as parseMarkdown6 } from "@bendyline/squisq/markdown";
 
 // src/mermaid/mermaidThemeStore.ts
@@ -28205,7 +28270,7 @@ var InlineIcon = Node2.create({
 });
 
 // src/ImageNodeView.tsx
-import { useEffect as useEffect39, useRef as useRef39, useState as useState49 } from "react";
+import { useEffect as useEffect40, useRef as useRef39, useState as useState50 } from "react";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import Image from "@tiptap/extension-image";
 
@@ -28225,16 +28290,16 @@ import { Fragment as Fragment16, jsx as jsx54, jsxs as jsxs42 } from "react/jsx-
 function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
   const { src, alt, title, width } = node2.attrs;
   const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
-  const [resolvedSrc, setResolvedSrc] = useState49(src);
-  const [hovered, setHovered] = useState49(false);
+  const [resolvedSrc, setResolvedSrc] = useState50(src);
+  const [hovered, setHovered] = useState50(false);
   const imgRef = useRef39(null);
-  const [previewWidth, setPreviewWidth] = useState49(null);
+  const [previewWidth, setPreviewWidth] = useState50(null);
   const isThumbnail = imageDisplayMode === "thumbnail";
   const isEditable = editor?.isEditable ?? true;
   const normalizedRelativePath = normalizeMalformedAssetUrl(src);
   const isRelative = src && !src.startsWith("blob:") && !src.startsWith("http") && !src.startsWith("data:") && !src.startsWith("/");
   const resolveAs = normalizedRelativePath ?? (isRelative ? src : null);
-  useEffect39(() => {
+  useEffect40(() => {
     if (!mediaProvider || !resolveAs) {
       setResolvedSrc(src);
       return;
@@ -28413,15 +28478,15 @@ var ImageWithMediaProvider = Image.extend({
 // src/tiptap/TiptapVideo.tsx
 import { Node as Node3, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
-import { useEffect as useEffect41, useState as useState51 } from "react";
+import { useEffect as useEffect42, useState as useState52 } from "react";
 
 // src/tiptap/useResolvedMediaSrc.ts
-import { useEffect as useEffect40, useState as useState50 } from "react";
+import { useEffect as useEffect41, useState as useState51 } from "react";
 function useResolvedMediaSrc(src) {
   const { mediaProvider, mediaRevision } = useEditorContext();
-  const [resolved, setResolved] = useState50(src);
+  const [resolved, setResolved] = useState51(src);
   const isRelative = !!src && !src.startsWith("blob:") && !src.startsWith("http:") && !src.startsWith("https:") && !src.startsWith("data:") && !src.startsWith("/");
-  useEffect40(() => {
+  useEffect41(() => {
     if (!mediaProvider || !isRelative) {
       setResolved(src);
       return;
@@ -28472,9 +28537,9 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
   const placement = normalizeVideoPlacement(rawPlacement);
   const lockToBlock = normalizeLockToBlock(rawLockToBlock);
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
-  const [audioOnly, setAudioOnly] = useState51(false);
+  const [audioOnly, setAudioOnly] = useState52(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
-  useEffect41(() => {
+  useEffect42(() => {
     setAudioOnly(false);
   }, [resolvedSrc]);
   const handleLoadedMetadata = (event) => {
@@ -29141,11 +29206,11 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect42(() => {
+  useEffect43(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const [designerState, setDesignerState] = useState52(
+  const [designerState, setDesignerState] = useState53(
     null
   );
   const handleDesignerSave = useCallback38(
@@ -29161,15 +29226,15 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef40(mentionProvider);
-  useEffect42(() => {
+  useEffect43(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const fenceRenderersRef = useRef40(fenceRenderers);
-  useEffect42(() => {
+  useEffect43(() => {
     fenceRenderersRef.current = fenceRenderers;
   }, [fenceRenderers]);
   const activeThemeRef = useRef40(activeTheme);
-  useEffect42(() => {
+  useEffect43(() => {
     activeThemeRef.current = activeTheme;
   }, [activeTheme]);
   const resolvedPlaceholder = useMemo37(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
@@ -29177,7 +29242,7 @@ function WysiwygEditor({
   const lastSourceRef = useRef40(editorSource);
   const pendingLocalSourcesRef = useRef40([]);
   const mediaProviderRef = useRef40(mediaProvider);
-  useEffect42(() => {
+  useEffect43(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const frontmatterRef = useRef40(stripFrontmatter(editorSource).frontmatter);
@@ -29194,7 +29259,7 @@ function WysiwygEditor({
     }
   }
   const submitOnEnterRef = useRef40(submitOnEnter);
-  useEffect42(() => {
+  useEffect43(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -29382,25 +29447,25 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect42(() => {
+  useEffect43(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef40(null);
-  const [badgeMenu, setBadgeMenu] = useState52(null);
-  const [propsMenu, setPropsMenu] = useState52(null);
+  const [badgeMenu, setBadgeMenu] = useState53(null);
+  const [propsMenu, setPropsMenu] = useState53(null);
   const closeBadgeMenu = useCallback38(() => {
     setBadgeMenu(null);
     requestAnimationFrame(() => {
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -29456,7 +29521,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect42(() => {
+  useEffect43(() => {
     if (!editor) return;
     const pendingIndex = pendingLocalSourcesRef.current.lastIndexOf(editorSource);
     if (pendingIndex >= 0) {
@@ -29491,7 +29556,7 @@ function WysiwygEditor({
   const badgePreviewSource = useMemo37(() => {
     if (!badgeMenu) return void 0;
     try {
-      const previewDoc = markdownToDoc2(parseMarkdown6(editorSource), { autoTemplates: false });
+      const previewDoc = markdownToDoc3(parseMarkdown6(editorSource), { autoTemplates: false });
       const block = flattenBlocks2(previewDoc.blocks)[badgeMenu.headingIndex];
       if (!block) return void 0;
       return {
@@ -29713,7 +29778,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo39, useRef as useRef41, useState as useState54 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo39, useRef as useRef41, useState as useState55 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -29725,14 +29790,14 @@ import { extractPlainText as extractPlainText3, getChildren } from "@bendyline/s
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
-import { useCallback as useCallback39, useEffect as useEffect43, useMemo as useMemo38, useState as useState53 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect44, useMemo as useMemo38, useState as useState54 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
   const flatBlocks = useMemo38(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
-  const [entries, setEntries] = useState53([]);
-  const [pageEdges, setPageEdges] = useState53(null);
-  useEffect43(() => {
+  const [entries, setEntries] = useState54([]);
+  const [pageEdges, setPageEdges] = useState54(null);
+  useEffect44(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -29800,7 +29865,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -29861,7 +29926,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect43(() => {
+  useEffect44(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -30155,7 +30220,7 @@ function InlinePreviewGutter({
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState54(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState55(/* @__PURE__ */ new Map());
   useLayoutEffect8(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
@@ -30344,11 +30409,12 @@ import {
 
 // src/OutlinePanel.tsx
 import {
+  memo,
   useCallback as useCallback40,
-  useEffect as useEffect44,
+  useEffect as useEffect45,
   useMemo as useMemo40,
   useRef as useRef42,
-  useState as useState55
+  useState as useState56
 } from "react";
 import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate2 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText4 } from "@bendyline/squisq/markdown";
@@ -30451,8 +30517,9 @@ function splitTrailingLineGap(value) {
 
 // src/OutlinePanel.tsx
 import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
-var OUTLINE_RESPONSIVE_WIDTH = "clamp(180px, 15vw, 260px)";
+var OUTLINE_RESPONSIVE_WIDTH = "clamp(260px, 30vw, 460px)";
 var OUTLINE_DRAG_MIME = "application/x-squisq-outline-section";
+var EMPTY_BLOCKS = [];
 function OutlinePanel({ width, className, readOnly = false }) {
   const {
     doc,
@@ -30461,14 +30528,44 @@ function OutlinePanel({ width, className, readOnly = false }) {
     isParsing,
     layoutMode,
     goToBlockByLine,
-    activeBlockStartLine
+    activeBlockStartLine,
+    activeView,
+    monacoEditor,
+    tiptapEditor
   } = useEditorContext();
   const paneRef = useRef42(null);
-  const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef42(null);
-  const [draggedBlockId, setDraggedBlockId] = useState55(null);
-  const [dropTarget, setDropTarget] = useState55(null);
+  const [draggedBlockId, setDraggedBlockId] = useState56(null);
+  const [dropTarget, setDropTarget] = useState56(null);
+  const nextOutlineBlocks = doc?.blocks ?? EMPTY_BLOCKS;
+  const outlineBlocksRef = useRef42(nextOutlineBlocks);
+  if (!sameOutlineStructure(outlineBlocksRef.current, nextOutlineBlocks)) {
+    outlineBlocksRef.current = nextOutlineBlocks;
+  }
+  const outlineBlocks = outlineBlocksRef.current;
+  const interactionRef = useRef42({
+    doc,
+    markdownSource,
+    setMarkdownSource,
+    isParsing,
+    layoutMode,
+    goToBlockByLine,
+    activeView,
+    monacoEditor,
+    tiptapEditor
+  });
+  interactionRef.current = {
+    doc,
+    markdownSource,
+    setMarkdownSource,
+    isParsing,
+    layoutMode,
+    goToBlockByLine,
+    activeView,
+    monacoEditor,
+    tiptapEditor
+  };
   const blockModeActiveId = useMemo40(() => {
     if (layoutMode !== "block" || activeBlockStartLine == null || !doc) return null;
     const match = flattenBlocks5(doc.blocks).find(
@@ -30477,28 +30574,53 @@ function OutlinePanel({ width, className, readOnly = false }) {
     return match?.id ?? null;
   }, [layoutMode, activeBlockStartLine, doc]);
   const activeBlockId = layoutMode === "block" ? blockModeActiveId : cursorActiveId;
-  const handleSelect = useCallback40(
-    (block) => {
-      if (layoutMode === "block") {
-        const line = block.sourceHeading?.position?.start.line;
-        if (typeof line === "number") {
-          goToBlockByLine(line);
-          return;
+  const handleSelect = useCallback40((outlineBlock) => {
+    const current = interactionRef.current;
+    const block = findLiveBlock(current.doc, outlineBlock.id) ?? outlineBlock;
+    if (current.layoutMode === "block") {
+      const line = block.sourceHeading?.position?.start.line;
+      if (typeof line === "number") {
+        current.goToBlockByLine(line);
+        return;
+      }
+    }
+    if (current.activeView === "wysiwyg") {
+      const wrapper = paneRef.current ? findEditorWrapper(paneRef.current) : null;
+      const wysiwygContainer = wrapper?.querySelector(".squisq-wysiwyg-container");
+      if (!wysiwygContainer) return;
+      const headings = wysiwygContainer.querySelectorAll("h1, h2, h3, h4, h5, h6");
+      const blocks = current.doc ? flattenBlocks5(current.doc.blocks) : [];
+      const index2 = blocks.findIndex((candidate) => candidate.id === block.id);
+      if (index2 < 0 || index2 >= headings.length) return;
+      headings[index2].scrollIntoView({ behavior: "smooth", block: "start" });
+      if (current.tiptapEditor) {
+        try {
+          current.tiptapEditor.chain().focus().run();
+        } catch {
         }
       }
-      scrollToBlock(block);
-    },
-    [layoutMode, goToBlockByLine, scrollToBlock]
-  );
+      return;
+    }
+    if (current.activeView === "raw" && current.monacoEditor) {
+      const line = block.sourceHeading?.position?.start.line;
+      if (typeof line === "number") {
+        current.monacoEditor.revealLineInCenter(line);
+        current.monacoEditor.setPosition({ lineNumber: line, column: 1 });
+        current.monacoEditor.focus();
+      }
+    }
+  }, []);
   const changeHeadingLevel = useCallback40(
-    (block, delta) => {
-      if (readOnly || isParsing) return;
+    (outlineBlock, delta) => {
+      const current = interactionRef.current;
+      if (readOnly || current.isParsing) return;
+      const block = findLiveBlock(current.doc, outlineBlock.id) ?? outlineBlock;
       const line = block.sourceHeading?.position?.start.line;
       if (typeof line !== "number") return;
-      const next = bumpHeadingLevelInSource(markdownSource, line, delta);
-      if (next != null) setMarkdownSource(next);
+      const next = bumpHeadingLevelInSource(current.markdownSource, line, delta);
+      if (next != null) current.setMarkdownSource(next);
     },
-    [isParsing, markdownSource, readOnly, setMarkdownSource]
+    [readOnly]
   );
   const clearDragState = useCallback40(() => {
     activeDragRef.current = null;
@@ -30507,26 +30629,31 @@ function OutlinePanel({ width, className, readOnly = false }) {
   }, []);
   const handleDragStart = useCallback40(
     (event, section) => {
-      if (readOnly || isParsing) {
+      const current = interactionRef.current;
+      if (readOnly || current.isParsing) {
         event.preventDefault();
         return;
       }
-      activeDragRef.current = { ...section, sourceAtStart: markdownSource };
+      const liveBlock = findLiveBlock(current.doc, section.blockId);
+      const liveHeadingLine = liveBlock?.sourceHeading?.position?.start.line;
+      const liveSection = typeof liveHeadingLine === "number" ? { ...section, headingLine: liveHeadingLine } : section;
+      activeDragRef.current = { ...liveSection, sourceAtStart: current.markdownSource };
       setDraggedBlockId(section.blockId);
       setDropTarget(null);
       event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData(OUTLINE_DRAG_MIME, String(section.headingLine));
-      event.dataTransfer.setData("text/plain", String(section.headingLine));
+      event.dataTransfer.setData(OUTLINE_DRAG_MIME, String(liveSection.headingLine));
+      event.dataTransfer.setData("text/plain", String(liveSection.headingLine));
     },
-    [isParsing, markdownSource, readOnly]
+    [readOnly]
   );
   const handleDragOver = useCallback40(
     (event, section) => {
       const dragged = activeDragRef.current;
       if (!dragged) return;
+      const current = interactionRef.current;
       event.preventDefault();
       event.stopPropagation();
-      if (!canDropOnSection(dragged, section) || readOnly || isParsing) {
+      if (!canDropOnSection(dragged, section) || readOnly || current.isParsing) {
         event.dataTransfer.dropEffect = "none";
         setDropTarget(null);
         return;
@@ -30534,33 +30661,37 @@ function OutlinePanel({ width, className, readOnly = false }) {
       const placement = placementForPointer(event);
       event.dataTransfer.dropEffect = "move";
       setDropTarget(
-        (current) => current?.blockId === section.blockId && current.placement === placement ? current : { blockId: section.blockId, placement }
+        (current2) => current2?.blockId === section.blockId && current2.placement === placement ? current2 : { blockId: section.blockId, placement }
       );
     },
-    [isParsing, readOnly]
+    [readOnly]
   );
   const handleDrop = useCallback40(
     (event, section) => {
       const dragged = activeDragRef.current;
       if (!dragged) return;
+      const current = interactionRef.current;
       event.preventDefault();
       event.stopPropagation();
       const placement = placementForPointer(event);
-      const canMove = !readOnly && !isParsing && dragged.sourceAtStart === markdownSource && canDropOnSection(dragged, section);
+      const liveTarget = findLiveBlock(current.doc, section.blockId);
+      const liveTargetLine = liveTarget?.sourceHeading?.position?.start.line;
+      const targetSection = typeof liveTargetLine === "number" ? { ...section, headingLine: liveTargetLine } : section;
+      const canMove = !readOnly && !current.isParsing && dragged.sourceAtStart === current.markdownSource && canDropOnSection(dragged, targetSection);
       const next = canMove ? moveHeadingSectionInSource(
-        markdownSource,
+        current.markdownSource,
         dragged.headingLine,
-        section.headingLine,
+        targetSection.headingLine,
         placement
       ) : null;
       clearDragState();
-      if (next != null) setMarkdownSource(next);
+      if (next != null) current.setMarkdownSource(next);
     },
-    [clearDragState, isParsing, markdownSource, readOnly, setMarkdownSource]
+    [clearDragState, readOnly]
   );
   const previewSettings = usePreviewSettingsOptional();
   const accentColor = previewSettings?.activeTheme?.colors?.primary;
-  const isEmpty2 = !doc || doc.blocks.length === 0 || !hasAnyHeading(doc.blocks);
+  const isEmpty2 = outlineBlocks.length === 0 || !hasAnyHeading(outlineBlocks);
   const basis = width != null ? `${width}px` : `var(--squisq-outline-width, ${OUTLINE_RESPONSIVE_WIDTH})`;
   const paneStyle = {
     width: basis,
@@ -30576,27 +30707,28 @@ function OutlinePanel({ width, className, readOnly = false }) {
       style: paneStyle,
       "data-testid": "outline-panel",
       "aria-label": "Document outline",
-      children: isEmpty2 ? /* @__PURE__ */ jsx59("div", { className: "squisq-outline-empty", children: /* @__PURE__ */ jsx59("p", { children: "Add a heading to populate the outline." }) }) : /* @__PURE__ */ jsx59("ul", { className: "squisq-outline-tree", role: "tree", children: doc.blocks.map((b) => /* @__PURE__ */ jsx59(
-        OutlineNode,
+      children: isEmpty2 ? /* @__PURE__ */ jsx59("div", { className: "squisq-outline-empty", children: /* @__PURE__ */ jsx59("p", { children: "Add a heading to populate the outline." }) }) : /* @__PURE__ */ jsx59(
+        OutlineTree,
         {
-          block: b,
-          parentId: null,
+          blocks: outlineBlocks,
           activeBlockId,
           draggedBlockId,
           dropTarget,
-          mutationsDisabled: readOnly || isParsing,
+          mutationsDisabled: readOnly,
           onSelect: handleSelect,
           onChangeLevel: changeHeadingLevel,
           onDragStart: handleDragStart,
           onDragOver: handleDragOver,
           onDrop: handleDrop,
           onDragEnd: clearDragState
-        },
-        b.id
-      )) })
+        }
+      )
     }
   );
 }
+var OutlineTree = memo(function OutlineTree2({ blocks, ...nodeProps }) {
+  return /* @__PURE__ */ jsx59("ul", { className: "squisq-outline-tree", role: "tree", children: blocks.map((block) => /* @__PURE__ */ jsx59(OutlineNode, { block, parentId: null, ...nodeProps }, block.id)) });
+});
 function OutlineNode({
   block,
   parentId,
@@ -30735,11 +30867,14 @@ function OutlineNode({
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
   const flatBlocks = useMemo40(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
-  const [activeId, setActiveId] = useState55(null);
-  useEffect44(() => {
+  const flatBlocksRef = useRef42(flatBlocks);
+  flatBlocksRef.current = flatBlocks;
+  const headingLocations = flatBlocks.map((block) => `${block.id}:${block.sourceHeading?.position?.start.line ?? ""}`).join("\0");
+  const [activeId, setActiveId] = useState56(null);
+  useEffect45(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect44(() => {
+  useEffect45(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -30750,7 +30885,7 @@ function useActiveOutlineBlockId() {
         seen += 1;
         if (offset <= from) lastIndex = seen;
       });
-      const block = lastIndex >= 0 ? flatBlocks[lastIndex] : null;
+      const block = lastIndex >= 0 ? flatBlocksRef.current[lastIndex] : null;
       setActiveId(block?.id ?? null);
     };
     update();
@@ -30760,8 +30895,8 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("selectionUpdate", update);
       tiptapEditor.off("update", update);
     };
-  }, [activeView, tiptapEditor, flatBlocks]);
-  useEffect44(() => {
+  }, [activeView, tiptapEditor, headingLocations]);
+  useEffect45(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -30770,19 +30905,55 @@ function useActiveOutlineBlockId() {
         return;
       }
       let lastIndex = -1;
-      flatBlocks.forEach((b, i) => {
+      flatBlocksRef.current.forEach((b, i) => {
         const headingLine2 = b.sourceHeading?.position?.start.line;
         if (typeof headingLine2 === "number" && headingLine2 <= line) lastIndex = i;
       });
-      const block = lastIndex >= 0 ? flatBlocks[lastIndex] : null;
+      const block = lastIndex >= 0 ? flatBlocksRef.current[lastIndex] : null;
       setActiveId(block?.id ?? null);
     };
     update();
     const sub = monacoEditor.onDidChangeCursorPosition(update);
     return () => sub.dispose();
-  }, [activeView, monacoEditor, flatBlocks]);
+  }, [activeView, monacoEditor, headingLocations]);
   return activeId;
 }
+function sameOutlineStructure(previous, next) {
+  if (previous === next) return true;
+  if (previous.length !== next.length) return false;
+  for (let index2 = 0; index2 < previous.length; index2 += 1) {
+    const before = previous[index2];
+    const after = next[index2];
+    if (before.id !== after.id) return false;
+    const beforeHeading = before.sourceHeading;
+    const afterHeading = after.sourceHeading;
+    if (!!beforeHeading !== !!afterHeading) return false;
+    if (beforeHeading && afterHeading) {
+      if (beforeHeading.depth !== afterHeading.depth) return false;
+      if (extractPlainText4(beforeHeading).trim() !== extractPlainText4(afterHeading).trim()) {
+        return false;
+      }
+      if (beforeHeading.templateAnnotation?.template !== afterHeading.templateAnnotation?.template) {
+        return false;
+      }
+    }
+    if (!sameOutlineStructure(before.children ?? EMPTY_BLOCKS, after.children ?? EMPTY_BLOCKS)) {
+      return false;
+    }
+  }
+  return true;
+}
+function findLiveBlock(doc, blockId) {
+  return doc ? flattenBlocks5(doc.blocks).find((block) => block.id === blockId) ?? null : null;
+}
+function findEditorWrapper(node2) {
+  let current = node2.parentElement;
+  while (current) {
+    if (current.classList.contains("squisq-editor-with-gutter")) return current;
+    current = current.parentElement;
+  }
+  return node2.parentElement;
+}
 function canDropOnSection(dragged, target) {
   return dragged.blockId !== target.blockId && dragged.depth === target.depth && dragged.parentId === target.parentId;
 }
@@ -30812,7 +30983,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback42, useEffect as useEffect46, useMemo as useMemo42, useRef as useRef44, useState as useState56 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect47, useMemo as useMemo42, useRef as useRef44, useState as useState57 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -30936,7 +31107,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback41, useEffect as useEffect45, useMemo as useMemo41, useRef as useRef43 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect46, useMemo as useMemo41, useRef as useRef43 } from "react";
 import { jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -30956,7 +31127,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect45(() => {
+  useEffect46(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -31028,11 +31199,11 @@ function CodeContextSectionView({
 import { Fragment as Fragment18, jsx as jsx61 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState56(null);
-  const [, setZonesVersion] = useState56(0);
-  const [expandedById, setExpandedById] = useState56({});
+  const [manager, setManager] = useState57(null);
+  const [, setZonesVersion] = useState57(0);
+  const [expandedById, setExpandedById] = useState57({});
   const seenIds = useRef44(/* @__PURE__ */ new Set());
-  useEffect46(() => {
+  useEffect47(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -31055,7 +31226,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -31491,7 +31662,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback44, useEffect as useEffect49, useMemo as useMemo43, useRef as useRef47, useState as useState59 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect50, useMemo as useMemo43, useRef as useRef47, useState as useState60 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -31616,11 +31787,11 @@ function collectTimelinePlaybackSchedule(doc, scheduled) {
 }
 
 // src/TimelineBlockPreview.tsx
-import { memo } from "react";
+import { memo as memo2 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
 import { BlockRenderer as BlockRenderer4, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
 import { jsx as jsx63 } from "react/jsx-runtime";
-var BlockThumbnail = memo(function BlockThumbnail2({
+var BlockThumbnail = memo2(function BlockThumbnail2({
   visual,
   viewport = VIEWPORT_PRESETS5.landscape,
   basePath = "/",
@@ -31650,7 +31821,7 @@ function resolveBlockVisual(doc, block, theme, viewport) {
 }
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback43, useEffect as useEffect47, useRef as useRef45, useState as useState57 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect48, useRef as useRef45, useState as useState58 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -31670,8 +31841,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState57(0);
-  const [isPlaying, setIsPlaying] = useState57(false);
+  const [currentTime, setCurrentTime] = useState58(0);
+  const [isPlaying, setIsPlaying] = useState58(false);
   const rafRef = useRef45(null);
   const lastRef = useRef45(0);
   const currentTimeRef = useRef45(0);
@@ -31679,10 +31850,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef45(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect47(() => {
+  useEffect48(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -31744,7 +31915,7 @@ function timelineMediaLabel(src, kind) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect48, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState58 } from "react";
+import { useEffect as useEffect49, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState59 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Fragment as Fragment19, jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -31759,7 +31930,7 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef46(null);
-  const [style, setStyle] = useState58(() => menuStyle(anchor));
+  const [style, setStyle] = useState59(() => menuStyle(anchor));
   useLayoutEffect9(() => {
     const panel = panelRef.current;
     if (!panel) return;
@@ -31773,7 +31944,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect48(() => {
+  useEffect49(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -31833,12 +32004,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState58(target.explicitDuration);
-  const [duration, setDuration] = useState58(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState58(
+  const [explicitDuration, setExplicitDuration] = useState59(target.explicitDuration);
+  const [duration, setDuration] = useState59(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState59(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState58(target.transition);
+  const [transition, setTransition] = useState59(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -31910,11 +32081,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  const [placement, setPlacement] = useState58(target.placement);
-  const [locked, setLocked] = useState58(target.lockToBlock);
-  const [pipSize, setPipSize] = useState58(target.pipSize ?? "");
-  const [pipShape, setPipShape] = useState58(target.pipShape ?? "");
-  const [pipPosition, setPipPosition] = useState58(target.pipPosition ?? "");
+  const [placement, setPlacement] = useState59(target.placement);
+  const [locked, setLocked] = useState59(target.lockToBlock);
+  const [pipSize, setPipSize] = useState59(target.pipSize ?? "");
+  const [pipShape, setPipShape] = useState59(target.pipShape ?? "");
+  const [pipPosition, setPipPosition] = useState59(target.pipPosition ?? "");
   const placed = placement === "picture-in-picture" || placement === "overlay";
   const placementOptions = [
     target.canUseContentPlacement ? { value: "content", label: "In layout" } : { value: "default", label: "Default" },
@@ -32184,9 +32355,9 @@ function TimelineTrack({
     colorScheme
   } = useEditorContext();
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState59(null);
-  const [itemMenu, setItemMenu] = useState59(null);
-  const [pxPerSecond, setPxPerSecond] = useState59(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = useState60(null);
+  const [itemMenu, setItemMenu] = useState60(null);
+  const [pxPerSecond, setPxPerSecond] = useState60(DEFAULT_PX_PER_SECOND);
   const scrollRef = useRef47(null);
   const blocks = useMemo43(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
@@ -32219,8 +32390,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState59(false);
-  useEffect49(() => {
+  const [scrubbing, setScrubbing] = useState60(false);
+  useEffect50(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -32258,7 +32429,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef47(null);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -32269,7 +32440,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -32317,8 +32488,8 @@ function TimelineTrack({
   );
   const zoomIn = useCallback44(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback44(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
-  const [viewportWidth, setViewportWidth] = useState59(0);
-  useEffect49(() => {
+  const [viewportWidth, setViewportWidth] = useState60(0);
+  useEffect50(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -32332,7 +32503,7 @@ function TimelineTrack({
   const dragRef = useRef47(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect49(() => {
+  useEffect50(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -32363,7 +32534,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback44(
@@ -32968,7 +33139,7 @@ import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule
 import { DocPlayer } from "@bendyline/squisq-react";
 
 // src/usePreviewProjection.ts
-import { useEffect as useEffect50, useState as useState60 } from "react";
+import { useEffect as useEffect51, useState as useState61 } from "react";
 import { resolveAudioMapping } from "@bendyline/squisq/doc";
 import { applyTransform } from "@bendyline/squisq/transform";
 function hasEquivalentAudio(left, right) {
@@ -32988,8 +33159,8 @@ function preserveEquivalentAudio(previous, next) {
   };
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2) {
-  const [projection, setProjection] = useState60(null);
-  useEffect50(() => {
+  const [projection, setProjection] = useState61(null);
+  useEffect51(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -33249,7 +33420,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback45, useEffect as useEffect51, useMemo as useMemo46, useRef as useRef48, useState as useState61 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect52, useMemo as useMemo46, useRef as useRef48, useState as useState62 } from "react";
 import { parseMarkdown as parseMarkdown9 } from "@bendyline/squisq/markdown";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -33330,8 +33501,8 @@ function PlainHtmlPreview({
     [onFrameChange]
   );
   const mdDoc = useMemo46(() => parseMarkdown9(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState61(null);
-  useEffect51(() => {
+  const [resolvedImages, setResolvedImages] = useState62(null);
+  useEffect52(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -33367,8 +33538,8 @@ function PlainHtmlPreview({
     return merged;
   }, [resolvedImages, images]);
   const iconsCss = useMemo46(() => collectInlineFontAwesomeCss(), []);
-  const [renderFn, setRenderFn] = useState61(() => cachedRender);
-  useEffect51(() => {
+  const [renderFn, setRenderFn] = useState62(() => cachedRender);
+  useEffect52(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -33401,7 +33572,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect51(() => {
+  useEffect52(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -33497,11 +33668,11 @@ function PlainHtmlPreview({
       style2.remove();
     };
   }, [onCopyCode, showCodeCopyButton]);
-  useEffect51(() => {
+  useEffect52(() => {
     installFrameCodeCopyControls();
     return () => removeFrameCodeCopyControlsRef.current();
   }, [html, installFrameCodeCopyControls]);
-  useEffect51(() => {
+  useEffect52(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -33580,9 +33751,15 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState64, useEffect as useEffect55, useMemo as useMemo50, useCallback as useCallback49, useRef as useRef52 } from "react";
+import { useState as useState65, useEffect as useEffect56, useMemo as useMemo50, useCallback as useCallback49, useRef as useRef52 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
-import { DashboardView, DocPlayer as DocPlayer2, LinearDocView as LinearDocView2, useMediaProvider as useMediaProvider2 } from "@bendyline/squisq-react";
+import {
+  DashboardView,
+  DocPlayer as DocPlayer2,
+  FlashcardView,
+  LinearDocView as LinearDocView2,
+  useMediaProvider as useMediaProvider2
+} from "@bendyline/squisq-react";
 import { resolveTransformStyle as resolveTransformStyle2 } from "@bendyline/squisq/transform";
 
 // src/buildDocumentPreviewMarkdown.ts
@@ -33719,12 +33896,12 @@ import {
   createContext as createContext5,
   useCallback as useCallback46,
   useContext as useContext5,
-  useEffect as useEffect52,
+  useEffect as useEffect53,
   useId as useId14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo47,
   useRef as useRef49,
-  useState as useState62
+  useState as useState63
 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 import { jsx as jsx70, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -33826,10 +34003,11 @@ function PresentationModeProvider({
   const { activeView, colorScheme, doc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
   const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
-  const [selectedTarget, setSelectedTarget] = useState62("control");
-  const [activeTarget, setActiveTarget] = useState62(null);
-  const [popupRoot, setPopupRoot] = useState62(null);
-  const [error, setError] = useState62(null);
+  const [selectedTarget, setSelectedTarget] = useState63("control");
+  const [activeTarget, setActiveTarget] = useState63(null);
+  const [popupRoot, setPopupRoot] = useState63(null);
+  const [error, setError] = useState63(null);
+  const [fullscreenExitStyle, setFullscreenExitStyle] = useState63(null);
   const activeTargetRef = useRef49(activeTarget);
   activeTargetRef.current = activeTarget;
   const previousActiveTargetRef = useRef49(null);
@@ -33977,12 +34155,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect52(() => {
+  useEffect53(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect52(() => {
+  useEffect53(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -33994,7 +34172,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect52(() => {
+  useEffect53(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -34003,10 +34181,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect52(() => {
+  useEffect53(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -34014,7 +34192,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -34026,12 +34204,42 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useEffect52(
+  useLayoutEffect10(() => {
+    if (activeTarget !== "fullscreen") {
+      setFullscreenExitStyle(null);
+      return;
+    }
+    const root = rootRef.current;
+    const controls = root?.querySelector(".doc-controls-slideshow");
+    if (!root || !controls) {
+      setFullscreenExitStyle(null);
+      return;
+    }
+    const updatePosition = () => {
+      const rootBounds = root.getBoundingClientRect();
+      const controlsBounds = controls.getBoundingClientRect();
+      setFullscreenExitStyle({
+        left: "auto",
+        right: `${Math.max(0, rootBounds.right - controlsBounds.left + 8)}px`,
+        transform: "none"
+      });
+    };
+    updatePosition();
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updatePosition);
+    resizeObserver?.observe(root);
+    resizeObserver?.observe(controls);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [activeTarget, rootRef]);
+  useEffect53(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -34077,7 +34285,7 @@ function PresentationModeProvider({
       type: "button",
       className: "squisq-presentation-exit",
       "data-theme": colorScheme,
-      style: presentationThemeStyle,
+      style: { ...presentationThemeStyle, ...fullscreenExitStyle },
       onClick: () => void stop(),
       autoFocus: activeTarget === "control" || activeTarget === "fullscreen",
       "aria-label": "Exit presentation mode",
@@ -34134,8 +34342,8 @@ function PresentationModeControl() {
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef49(null);
   const menuRef = useRef49(null);
-  const [open, setOpen] = useState62(false);
-  const [anchor, setAnchor] = useState62(null);
+  const [open, setOpen] = useState63(false);
+  const [anchor, setAnchor] = useState63(null);
   const options = PRESENTATION_OPTIONS.filter((option) => availableTargets.includes(option.target));
   const selected = options.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
   const updatePosition = useCallback46(() => {
@@ -34160,7 +34368,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -34303,10 +34511,10 @@ import {
   createContext as createContext6,
   useCallback as useCallback47,
   useContext as useContext6,
-  useEffect as useEffect53,
+  useEffect as useEffect54,
   useMemo as useMemo48,
   useRef as useRef50,
-  useState as useState63
+  useState as useState64
 } from "react";
 import { jsx as jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
 var PrintModeContext = createContext6(null);
@@ -34321,8 +34529,8 @@ function usePrintModeOptional() {
 function PrintModeProvider({ rootRef, children }) {
   const { activeView } = useEditorContext();
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
-  const [active, setActive] = useState63(false);
-  const [slidesPerPage, setSlidesPerPage] = useState63(1);
+  const [active, setActive] = useState64(false);
+  const [slidesPerPage, setSlidesPerPage] = useState64(1);
   const customPrintHandlerRef = useRef50(null);
   const printAncestorsRef = useRef50([]);
   const unmarkPrinting = useCallback47(() => {
@@ -34373,7 +34581,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect53(() => {
+  useEffect54(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -34382,10 +34590,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect53(() => {
+  useEffect54(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect53(() => {
+  useEffect54(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -34476,9 +34684,10 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback48, useEffect as useEffect54, useMemo as useMemo49, useRef as useRef51 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect55, useMemo as useMemo49, useRef as useRef51 } from "react";
 import {
   BlockRenderer as BlockRenderer5,
+  FlashcardFaceView,
   LinearDocView,
   useDocPlayback,
   useMediaProvider
@@ -34486,7 +34695,7 @@ import {
 import {
   createTemplateContext as createTemplateContext2
 } from "@bendyline/squisq/schemas";
-import { expandCoverBlock as expandCoverBlock2 } from "@bendyline/squisq/doc";
+import { expandCoverBlock as expandCoverBlock2, materializeFlashcards } from "@bendyline/squisq/doc";
 import { resolveTransformStyle } from "@bendyline/squisq/transform";
 import { jsx as jsx72, jsxs as jsxs56 } from "react/jsx-runtime";
 function chunk(values, size) {
@@ -34526,8 +34735,12 @@ function PrintPreview({
       layers: expandCoverBlock2(previewDoc.startBlock, context)
     };
   }, [previewDoc?.startBlock, showCover, theme, viewport]);
+  const flashcardDeck = useMemo49(
+    () => contentDoc ? materializeFlashcards(contentDoc) : null,
+    [contentDoc]
+  );
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect54(() => {
+  useEffect55(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -34567,6 +34780,58 @@ function PrintPreview({
       ) })
     ] });
   }
+  if (displayMode === "flashcards") {
+    const faceProps = {
+      theme,
+      basePath,
+      showCodeCopyButton: false,
+      viewport,
+      customTemplates: contentDoc?.customTemplates
+    };
+    return /* @__PURE__ */ jsxs56(
+      "div",
+      {
+        className: "squisq-print-preview squisq-print-preview--flashcards",
+        style: {
+          "--squisq-print-flashcard-text": theme.colors.text,
+          "--squisq-print-flashcard-muted": theme.colors.textMuted,
+          "--squisq-print-flashcard-accent": theme.colors.primary,
+          "--squisq-print-flashcard-bg": theme.colors.background,
+          "--squisq-print-flashcard-surface": theme.colors.backgroundLight
+        },
+        children: [
+          /* @__PURE__ */ jsx72("style", { children: "@page { size: landscape; margin: 0; }" }),
+          flashcardDeck?.cards.map((card, index2) => /* @__PURE__ */ jsxs56("article", { className: "squisq-print-flashcard-sheet", children: [
+            /* @__PURE__ */ jsxs56("header", { children: [
+              /* @__PURE__ */ jsxs56("span", { children: [
+                "Card ",
+                index2 + 1,
+                " of ",
+                flashcardDeck.cards.length
+              ] }),
+              card.label && /* @__PURE__ */ jsx72("strong", { children: card.label })
+            ] }),
+            /* @__PURE__ */ jsxs56("div", { className: "squisq-print-flashcard-pair", children: [
+              /* @__PURE__ */ jsxs56("section", { className: "squisq-print-flashcard-face", "aria-label": "Question side", children: [
+                /* @__PURE__ */ jsx72("small", { children: "Front" }),
+                /* @__PURE__ */ jsx72(FlashcardFaceView, { ...faceProps, face: card.front }),
+                card.kind === "multiple-choice" && /* @__PURE__ */ jsx72("ol", { className: "squisq-print-flashcard-choices", children: card.choices?.map((choice) => /* @__PURE__ */ jsx72("li", { children: /* @__PURE__ */ jsx72(FlashcardFaceView, { ...faceProps, face: choice.content }) }, choice.id)) })
+              ] }),
+              /* @__PURE__ */ jsxs56("section", { className: "squisq-print-flashcard-face", "aria-label": "Answer side", children: [
+                /* @__PURE__ */ jsx72("small", { children: "Back" }),
+                /* @__PURE__ */ jsx72(FlashcardFaceView, { ...faceProps, face: card.back }),
+                card.explanation && /* @__PURE__ */ jsxs56("div", { className: "squisq-print-flashcard-explanation", children: [
+                  /* @__PURE__ */ jsx72("small", { children: "Explanation" }),
+                  /* @__PURE__ */ jsx72(FlashcardFaceView, { ...faceProps, face: card.explanation })
+                ] })
+              ] })
+            ] })
+          ] }, card.id)),
+          (!flashcardDeck || flashcardDeck.cards.length === 0) && /* @__PURE__ */ jsx72("p", { className: "squisq-print-empty", children: "Nothing to print." })
+        ]
+      }
+    );
+  }
   const slides = coverBlock ? [coverBlock, ...blocks] : blocks;
   const density = displayMode === "slideshow" ? slidesPerPage : 1;
   const sheets = chunk(slides, density);
@@ -34657,7 +34922,7 @@ function PreviewPanel({
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
-  const [playbackState, setPlaybackState] = useState64(null);
+  const [playbackState, setPlaybackState] = useState65(null);
   const handlePlaybackStateChange = useCallback49((next) => {
     setPlaybackState(next);
   }, []);
@@ -34696,11 +34961,12 @@ function PreviewPanel({
   const isPageMode = activeDisplayMode === "linear";
   const isNarrateMode = activeDisplayMode === "narrate";
   const isDashboardMode = activeDisplayMode === "dashboard";
-  useEffect55(() => {
+  const isFlashcardsMode = activeDisplayMode === "flashcards";
+  useEffect56(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -34774,7 +35040,7 @@ function PreviewPanel({
   if (!previewDoc && !isDocumentMode && !isNarrateMode) {
     return /* @__PURE__ */ jsx73("div", { className: `squisq-preview-status ${className || ""}`, "data-testid": "preview-panel", children: /* @__PURE__ */ jsx73("p", { children: "No content to preview. Start typing in the editor." }) });
   }
-  const fillsContainer = printMode?.active || isDocumentMode || isPageMode || isNarrateMode ? "stretch" : "center";
+  const fillsContainer = printMode?.active || isDocumentMode || isPageMode || isNarrateMode || isFlashcardsMode ? "stretch" : "center";
   const audienceWindowOpen = presentation?.activeTarget === "window";
   const renderSurface = (audience) => {
     if (!audience && printMode?.active) {
@@ -34847,6 +35113,21 @@ function PreviewPanel({
         }
       );
     }
+    if (isFlashcardsMode) {
+      return /* @__PURE__ */ jsx73(
+        FlashcardView,
+        {
+          doc: contentDoc ?? doc,
+          basePath,
+          theme: activeTheme,
+          globalKeyboardShortcuts: !audience,
+          showCodeCopyButton,
+          onCopyCode,
+          fenceRenderers: fenceRenderers ?? void 0,
+          viewport: activeViewport
+        }
+      );
+    }
     if (isDashboardMode) {
       return /* @__PURE__ */ jsx73("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx73(
         DashboardView,
@@ -34949,7 +35230,7 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState65, useEffect as useEffect56, useRef as useRef53, useCallback as useCallback50 } from "react";
+import { useState as useState66, useEffect as useEffect57, useRef as useRef53, useCallback as useCallback50 } from "react";
 import { jsx as jsx74, jsxs as jsxs58 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -35014,12 +35295,12 @@ function MediaBin({
   isRecorderOpen = false,
   allowBinaryDownloads = true
 }) {
-  const [entries, setEntries] = useState65([]);
-  const [thumbUrls, setThumbUrls] = useState65({});
-  const [loading, setLoading] = useState65(false);
-  const [isDropActive, setIsDropActive] = useState65(false);
-  const [downloadingPath, setDownloadingPath] = useState65(null);
-  const [contextMenu, setContextMenu] = useState65(null);
+  const [entries, setEntries] = useState66([]);
+  const [thumbUrls, setThumbUrls] = useState66({});
+  const [loading, setLoading] = useState66(false);
+  const [isDropActive, setIsDropActive] = useState66(false);
+  const [downloadingPath, setDownloadingPath] = useState66(null);
+  const [contextMenu, setContextMenu] = useState66(null);
   const fileInputRef = useRef53(null);
   const contextMenuRef = useRef53(null);
   const dropDepthRef = useRef53(0);
@@ -35041,7 +35322,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect56(() => {
+  useEffect57(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -35062,7 +35343,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -35404,7 +35685,7 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState66 } from "react";
+import { useState as useState67 } from "react";
 import { Fragment as Fragment21, jsx as jsx75, jsxs as jsxs59 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
@@ -35461,7 +35742,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState66(false);
+  const [isHovering, setIsHovering] = useState67(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -35505,7 +35786,7 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect57, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState67 } from "react";
+import { useEffect as useEffect58, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState68 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -35521,7 +35802,7 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 import { jsx as jsx76 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState67(null);
+  const [state, setState3] = useState68(null);
   const tooltipRef = useRef54(null);
   const timerRef = useRef54(null);
   const currentTargetRef = useRef54(null);
@@ -35537,7 +35818,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect57(() => {
+  useEffect58(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -35623,7 +35904,7 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect58, useRef as useRef55, useState as useState68, useCallback as useCallback51, useMemo as useMemo52 } from "react";
+import { useEffect as useEffect59, useRef as useRef55, useState as useState69, useCallback as useCallback51, useMemo as useMemo52 } from "react";
 
 // src/BlockPreviewPanel.tsx
 import { useMemo as useMemo51 } from "react";
@@ -36215,13 +36496,13 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState68(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState68(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState69(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState69(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState68(false);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState68(0);
-  const [mediaCount, setMediaCount] = useState68(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState68(false);
+  const [showFiles, setShowFiles] = useState69(false);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState69(0);
+  const [mediaCount, setMediaCount] = useState69(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState69(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
   const usedMediaPaths = useMemo52(
     () => collectMediaReferencesFromMarkdown(markdownSource),
@@ -36233,13 +36514,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect58(() => {
+  useEffect59(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -36348,7 +36629,7 @@ ${snippet}` : snippet);
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect58(() => {
+  useEffect59(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback51(
@@ -36714,9 +36995,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState68(null);
-  const [resolveError, setResolveError] = useState68(null);
-  useEffect58(() => {
+  const [initialSrc, setInitialSrc] = useState69(null);
+  const [resolveError, setResolveError] = useState69(null);
+  useEffect59(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);