@bendyline/squisq-editor-react 1.5.2 → 1.5.3

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/EditorShell.tsx
-import { useEffect as useEffect31, useRef as useRef26, useState as useState33, useCallback as useCallback23, useMemo as useMemo16 } from "react";
+import { useEffect as useEffect32, useRef as useRef26, useState as useState34, useCallback as useCallback23, useMemo as useMemo16 } from "react";
 
 // src/EditorContext.tsx
 import {
@@ -1694,12 +1694,83 @@ function EditorProvider({
 }
 
 // src/Toolbar.tsx
-import { useCallback as useCallback11, useEffect as useEffect12, useMemo as useMemo6, useReducer, useRef as useRef11, useState as useState12 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo6, useReducer, useRef as useRef11, useState as useState13 } from "react";
 
 // src/VersionHistoryPanel.tsx
-import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import { DiffEditor } from "@monaco-editor/react";
+
+// src/useMonacoLoader.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { loader } from "@monaco-editor/react";
+var monacoPromise = null;
+var monacoNamespace = null;
+function useMonacoLoader() {
+  const [state, setState] = useState3(() => ({
+    monaco: monacoNamespace,
+    ready: monacoNamespace !== null
+  }));
+  useEffect3(() => {
+    if (state.ready) return;
+    if (!monacoPromise) {
+      monacoPromise = import("monaco-editor/esm/vs/editor/editor.api.js").then((m) => {
+        loader.config({ monaco: m });
+        monacoNamespace = m;
+        return m;
+      });
+    }
+    let cancelled = false;
+    void monacoPromise.then((m) => {
+      if (cancelled) return;
+      setState({ monaco: m, ready: true });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [state.ready]);
+  return state;
+}
+
+// src/VersionHistoryPanel.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var lazyLoadingStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  color: "var(--squisq-editor-muted-foreground, #6a6258)",
+  fontSize: 12
+};
+function LazyDiffEditor({ original, modified, theme }) {
+  const { ready } = useMonacoLoader();
+  if (!ready) {
+    return /* @__PURE__ */ jsx3("div", { style: lazyLoadingStyle, children: "Loading diff\u2026" });
+  }
+  return /* @__PURE__ */ jsx3(
+    DiffEditor,
+    {
+      original,
+      modified,
+      language: "markdown",
+      theme,
+      options: {
+        readOnly: true,
+        renderSideBySide: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        wordWrap: "on",
+        automaticLayout: true,
+        fontSize: 12,
+        lineNumbers: "off",
+        glyphMargin: false,
+        folding: false,
+        overviewRulerLanes: 0,
+        renderOverviewRuler: false
+      }
+    }
+  );
+}
 var initialState = {
   loading: false,
   versions: [],
@@ -1720,8 +1791,8 @@ function formatBytes(n) {
 }
 function VersionHistoryPanel() {
   const { versioning, replaceAll, markdownSource, theme } = useEditorContext();
-  const [open, setOpen] = useState3(false);
-  const [state, setState] = useState3(initialState);
+  const [open, setOpen] = useState4(false);
+  const [state, setState] = useState4(initialState);
   const containerRef = useRef3(null);
   const refresh = useCallback2(async () => {
     if (!versioning) return;
@@ -1736,7 +1807,7 @@ function VersionHistoryPanel() {
       setState((s) => ({ ...s, loading: false, error: message }));
     }
   }, [versioning]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (open) {
       setState((s) => ({ ...s, currentStamp: /* @__PURE__ */ new Date() }));
       void refresh();
@@ -1744,7 +1815,7 @@ function VersionHistoryPanel() {
       setState((s) => ({ ...s, selected: null, pendingRevert: null }));
     }
   }, [open, refresh]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const handler = (e2) => {
       if (containerRef.current && !containerRef.current.contains(e2.target)) {
@@ -1851,26 +1922,11 @@ function VersionHistoryPanel() {
               /* @__PURE__ */ jsx3("span", { className: "squisq-version-history-diff-label", children: /* @__PURE__ */ jsx3("strong", { children: "Current" }) })
             ] }),
             /* @__PURE__ */ jsx3("div", { className: "squisq-version-history-diff-body", children: /* @__PURE__ */ jsx3(
-              DiffEditor,
+              LazyDiffEditor,
               {
                 original: state.selected.content,
                 modified: markdownSource,
-                language: "markdown",
-                theme: diffTheme,
-                options: {
-                  readOnly: true,
-                  renderSideBySide: true,
-                  minimap: { enabled: false },
-                  scrollBeyondLastLine: false,
-                  wordWrap: "on",
-                  automaticLayout: true,
-                  fontSize: 12,
-                  lineNumbers: "off",
-                  glyphMargin: false,
-                  folding: false,
-                  overviewRulerLanes: 0,
-                  renderOverviewRuler: false
-                }
+                theme: diffTheme
               }
             ) })
           ] }),
@@ -1969,14 +2025,14 @@ function VersionHistoryPanel() {
 import { useCallback as useCallback6 } from "react";
 
 // src/recorder/RecorderPanel.tsx
-import { useCallback as useCallback5, useState as useState6 } from "react";
+import { useCallback as useCallback5, useState as useState7 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/recorder/RecorderModal.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState6 } from "react";
 
 // src/recorder/hooks/useMediaRecorder.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
 
 // src/recorder/formats.ts
 var AUDIO_CANDIDATES = [
@@ -2170,12 +2226,12 @@ function getCaptureKind(source) {
   return captureKindFor(source);
 }
 function useMediaRecorder(options) {
-  const [state, setState] = useState4("idle");
-  const [stream, setStream] = useState4(null);
-  const [blob, setBlob] = useState4(null);
-  const [format, setFormat] = useState4(null);
-  const [durationMs, setDurationMs] = useState4(0);
-  const [error, setError] = useState4(null);
+  const [state, setState] = useState5("idle");
+  const [stream, setStream] = useState5(null);
+  const [blob, setBlob] = useState5(null);
+  const [format, setFormat] = useState5(null);
+  const [durationMs, setDurationMs] = useState5(0);
+  const [error, setError] = useState5(null);
   const recorderRef = useRef4(null);
   const chunksRef = useRef4([]);
   const disposeStreamRef = useRef4(null);
@@ -2334,7 +2390,8 @@ function useMediaRecorder(options) {
       }
     });
   }, [blob, clearTicker]);
-  useEffect4(() => {
+  useEffect5(() => {
+    const pendingResolvers = stopResolversRef.current;
     return () => {
       const rec = recorderRef.current;
       if (rec && rec.state !== "inactive") {
@@ -2345,7 +2402,7 @@ function useMediaRecorder(options) {
       }
       releaseStream();
       clearTicker();
-      stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
+      pendingResolvers.splice(0).forEach((resolve) => resolve(null));
     };
   }, [releaseStream, clearTicker]);
   return {
@@ -2366,9 +2423,9 @@ function useMediaRecorder(options) {
 }
 
 // src/recorder/hooks/useStreamPreview.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useStreamPreview(ref, stream) {
-  useEffect5(() => {
+  useEffect6(() => {
     const el = ref.current;
     if (!el) return;
     el.muted = true;
@@ -2572,20 +2629,20 @@ function RecorderModal({
   onClose,
   onSave
 }) {
-  const [source, setSource] = useState5(initialMode);
-  const [sourceText, setSourceText] = useState5("");
-  const [basename, setBasename] = useState5("");
-  const [includeSystemAudio, setIncludeSystemAudio] = useState5(false);
-  const [isSaving, setIsSaving] = useState5(false);
-  const [saveError, setSaveError] = useState5(null);
-  const [playbackUrl, setPlaybackUrl] = useState5(null);
+  const [source, setSource] = useState6(initialMode);
+  const [sourceText, setSourceText] = useState6("");
+  const [basename, setBasename] = useState6("");
+  const [includeSystemAudio, setIncludeSystemAudio] = useState6(false);
+  const [isSaving, setIsSaving] = useState6(false);
+  const [saveError, setSaveError] = useState6(null);
+  const [playbackUrl, setPlaybackUrl] = useState6(null);
   const previewRef = useRef5(null);
   const recorder = useMediaRecorder({
     source,
     systemAudio: source === "screen" || source === "screen+mic" ? includeSystemAudio : false
   });
   useStreamPreview(previewRef, recorder.state === "stopped" ? null : recorder.stream);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!recorder.blob) {
       setPlaybackUrl(null);
       return;
@@ -2597,7 +2654,7 @@ function RecorderModal({
     };
   }, [recorder.blob]);
   const previousSourceRef = useRef5(source);
-  useEffect6(() => {
+  useEffect7(() => {
     if (previousSourceRef.current !== source) {
       previousSourceRef.current = source;
       recorder.cancel();
@@ -2852,7 +2909,7 @@ function RecorderPanel({
   tooltip = "Record media",
   className
 }) {
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState7(false);
   const handleClose = useCallback5(() => setOpen(false), []);
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx5(
@@ -2992,7 +3049,7 @@ ${videoTag}` : videoTag);
 }
 
 // src/ViewMenuPanel.tsx
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef6, useState as useState8 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function ViewMenuPanel() {
   const {
@@ -3007,9 +3064,9 @@ function ViewMenuPanel() {
     themeInheritance,
     setThemeInheritance
   } = useEditorContext();
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(false);
   const containerRef = useRef6(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open) return;
     const handler = (e2) => {
       if (containerRef.current && !containerRef.current.contains(e2.target)) {
@@ -3212,7 +3269,7 @@ function findBlockSliceByHeadingIndex(source, headingIndex) {
 }
 
 // src/LinkDialog.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef7, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef7, useState as useState9 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function LinkDialog({
   mode,
@@ -3222,21 +3279,21 @@ function LinkDialog({
   onClose,
   documentLinkProvider
 }) {
-  const [text, setText] = useState8(initialText);
-  const [url, setUrl] = useState8(initialUrl);
-  const [tab, setTab] = useState8("url");
-  const [docQuery, setDocQuery] = useState8("");
-  const [docResults, setDocResults] = useState8([]);
-  const [docLoading, setDocLoading] = useState8(false);
+  const [text, setText] = useState9(initialText);
+  const [url, setUrl] = useState9(initialUrl);
+  const [tab, setTab] = useState9("url");
+  const [docQuery, setDocQuery] = useState9("");
+  const [docResults, setDocResults] = useState9([]);
+  const [docLoading, setDocLoading] = useState9(false);
   const textRef = useRef7(null);
   const urlRef = useRef7(null);
   const docSearchRef = useRef7(null);
-  useEffect8(() => {
+  useEffect9(() => {
     const target = initialText ? urlRef.current : textRef.current;
     target?.focus();
     target?.select();
   }, [initialText]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!documentLinkProvider || tab !== "documents") return;
     let cancelled = false;
     setDocLoading(true);
@@ -3255,14 +3312,14 @@ function LinkDialog({
       cancelled = true;
     };
   }, [docQuery, documentLinkProvider, tab]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (tab === "documents") {
       const t = setTimeout(() => docSearchRef.current?.focus(), 0);
       return () => clearTimeout(t);
     }
     return void 0;
   }, [tab]);
-  useEffect8(() => {
+  useEffect9(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") {
         e2.stopPropagation();
@@ -3425,7 +3482,7 @@ function LinkDialog({
 }
 
 // src/DocumentSettingsDialog.tsx
-import { useCallback as useCallback10, useEffect as useEffect10, useMemo as useMemo4, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useMemo as useMemo4, useRef as useRef9, useState as useState11 } from "react";
 import {
   inferDocumentTitle,
   parseMarkdown as parseMarkdown3,
@@ -3434,7 +3491,7 @@ import {
 import { getTransformStyleSummaries } from "@bendyline/squisq/transform";
 
 // src/ThemePicker.tsx
-import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo3, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useMemo as useMemo3, useRef as useRef8, useState as useState10 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import {
   getThemeSummaries,
@@ -3489,8 +3546,8 @@ function ThemePicker({
   variant = "compact",
   ariaLabel = "Theme"
 }) {
-  const [open, setOpen] = useState9(false);
-  const [popoverStyle, setPopoverStyle] = useState9({});
+  const [open, setOpen] = useState10(false);
+  const [popoverStyle, setPopoverStyle] = useState10({});
   const triggerRef = useRef8(null);
   const selectedEntry = useMemo3(() => {
     if (!value) return null;
@@ -3536,7 +3593,7 @@ function ThemePicker({
     if (!open) updatePosition();
     setOpen((v) => !v);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return;
     const onDown = (e2) => {
       const target = e2.target;
@@ -3702,16 +3759,16 @@ function DocumentSettingsDialog({
   const currentTheme = readFm(frontmatter, FM.theme.canonical, FM.theme.legacy);
   const currentTransform = readFm(frontmatter, FM.transform.canonical, FM.transform.legacy);
   const currentCaptions = readFm(frontmatter, FM.captions.canonical, FM.captions.legacy);
-  const [title, setTitle] = useState10(currentTitle);
-  const [theme, setTheme] = useState10(currentTheme);
-  const [transform, setTransform] = useState10(currentTransform);
-  const [captions, setCaptions] = useState10(currentCaptions);
+  const [title, setTitle] = useState11(currentTitle);
+  const [theme, setTheme] = useState11(currentTheme);
+  const [transform, setTransform] = useState11(currentTransform);
+  const [captions, setCaptions] = useState11(currentCaptions);
   const titleRef = useRef9(null);
-  useEffect10(() => {
+  useEffect11(() => {
     titleRef.current?.focus();
     titleRef.current?.select();
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -3863,7 +3920,7 @@ function DocumentSettingsDialog({
 }
 
 // src/EmojiPicker.tsx
-import { useEffect as useEffect11, useMemo as useMemo5, useRef as useRef10, useState as useState11 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo5, useRef as useRef10, useState as useState12 } from "react";
 
 // src/emojiData.ts
 import { ICONS } from "@bendyline/squisq/icons";
@@ -5172,11 +5229,11 @@ function EmojiPicker({
   theme = "light"
 }) {
   const palette = theme === "dark" ? DARK_PALETTE : LIGHT_PALETTE;
-  const [activeCategory, setActiveCategory] = useState11(PICKER_CATEGORIES[0].id);
-  const [query, setQuery] = useState11("");
+  const [activeCategory, setActiveCategory] = useState12(PICKER_CATEGORIES[0].id);
+  const [query, setQuery] = useState12("");
   const popoverRef = useRef10(null);
   const searchInputRef = useRef10(null);
-  useEffect11(() => {
+  useEffect12(() => {
     if (open) {
       const t = setTimeout(() => searchInputRef.current?.focus(), 0);
       return () => clearTimeout(t);
@@ -5185,7 +5242,7 @@ function EmojiPicker({
     setActiveCategory(PICKER_CATEGORIES[0].id);
     return void 0;
   }, [open]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open) return;
     const onPointerDown = (e2) => {
       const target = e2.target;
@@ -5586,9 +5643,9 @@ function Toolbar({
   });
   const showViewTabs = visibleViews.length > 1;
   const imageInputRef = useRef11(null);
-  const [linkDialog, setLinkDialog] = useState12(null);
+  const [linkDialog, setLinkDialog] = useState13(null);
   const emojiButtonRef = useRef11(null);
-  const [emojiPickerAnchor, setEmojiPickerAnchor] = useState12(null);
+  const [emojiPickerAnchor, setEmojiPickerAnchor] = useState13(null);
   const openEmojiPicker = useCallback11(() => {
     const btn = emojiButtonRef.current;
     if (!btn) return;
@@ -5609,22 +5666,22 @@ function Toolbar({
     setEmojiPickerAnchor({ top, left });
   }, []);
   const closeEmojiPicker = useCallback11(() => setEmojiPickerAnchor(null), []);
-  const [isNarrow, setIsNarrow] = useState12(
+  const [isNarrow, setIsNarrow] = useState13(
     () => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
   );
-  useEffect12(() => {
+  useEffect13(() => {
     const mq = window.matchMedia("(max-width: 768px)");
     const handler = (e2) => setIsNarrow(e2.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
   const actionsRef = useRef11(null);
-  const [measuredOverflowIndex, setMeasuredOverflowIndex] = useState12(null);
-  const [showOverflow, setShowOverflow] = useState12(false);
+  const [measuredOverflowIndex, setMeasuredOverflowIndex] = useState13(null);
+  const [showOverflow, setShowOverflow] = useState13(false);
   const overflowRef = useRef11(null);
-  const [showDocSettings, setShowDocSettings] = useState12(false);
+  const [showDocSettings, setShowDocSettings] = useState13(false);
   const overflowIndex = isNarrow ? 0 : measuredOverflowIndex;
-  useEffect12(() => {
+  useEffect13(() => {
     if (isNarrow) return;
     const container = actionsRef.current;
     if (!container) return;
@@ -5648,7 +5705,7 @@ function Toolbar({
     measure();
     return () => ro.disconnect();
   }, [activeView, isNarrow]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!showOverflow) return;
     const handleClick = (e2) => {
       if (overflowRef.current && !overflowRef.current.contains(e2.target)) {
@@ -5658,8 +5715,8 @@ function Toolbar({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [showOverflow]);
-  const [overflowPlacement, setOverflowPlacement] = useState12("down");
-  useEffect12(() => {
+  const [overflowPlacement, setOverflowPlacement] = useState13("down");
+  useEffect13(() => {
     if (!showOverflow || !overflowRef.current) return;
     const trigger = overflowRef.current.querySelector(
       ".squisq-toolbar-overflow-trigger"
@@ -5676,7 +5733,7 @@ function Toolbar({
     }
   }, [showOverflow]);
   const [, forceUpdate] = useReducer((c) => c + 1, 0);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!tiptapEditor) return;
     tiptapEditor.on("transaction", forceUpdate);
     return () => {
@@ -6027,7 +6084,7 @@ function Toolbar({
     },
     [activeView, tiptapEditor, monacoEditor, markdownSource, setMarkdownSource, closeEmojiPicker]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     const onKeyDown = (e2) => {
       if (!(e2.ctrlKey || e2.metaKey) || e2.altKey || e2.shiftKey) return;
       if (e2.key.toLowerCase() !== "k") return;
@@ -6129,9 +6186,9 @@ function Toolbar({
   const isInTable = isWysiwyg ? tiptapEditor.isActive("table") : false;
   const wysiwygTemplate = isWysiwyg ? tiptapEditor.isActive("heading") ? tiptapEditor.getAttributes("heading")?.dataTemplate ?? "" : null : null;
   const isRawView = activeView === "raw";
-  const [rawTemplate, setRawTemplate] = useState12(null);
-  const [rawHeadingLine, setRawHeadingLine] = useState12(null);
-  useEffect12(() => {
+  const [rawTemplate, setRawTemplate] = useState13(null);
+  const [rawHeadingLine, setRawHeadingLine] = useState13(null);
+  useEffect13(() => {
     if (!isRawView || !monacoEditor) {
       setRawTemplate(null);
       setRawHeadingLine(null);
@@ -6169,8 +6226,8 @@ function Toolbar({
       contentSub.dispose();
     };
   }, [isRawView, monacoEditor]);
-  const [wysiwygHeadingIndex, setWysiwygHeadingIndex] = useState12(null);
-  useEffect12(() => {
+  const [wysiwygHeadingIndex, setWysiwygHeadingIndex] = useState13(null);
+  useEffect13(() => {
     if (!isWysiwyg || !tiptapEditor) {
       setWysiwygHeadingIndex(null);
       return;
@@ -6764,11 +6821,8 @@ function StatusBar({ className }) {
 }
 
 // src/RawEditor.tsx
-import { useRef as useRef12, useCallback as useCallback12, useEffect as useEffect13 } from "react";
-import Editor, {
-  loader
-} from "@monaco-editor/react";
-import * as monaco from "monaco-editor";
+import { useRef as useRef12, useCallback as useCallback12, useEffect as useEffect14 } from "react";
+import Editor from "@monaco-editor/react";
 import { getAvailableTemplates } from "@bendyline/squisq/doc";
 import { suggestIcons, resolveIcon as resolveIcon2, iconGlyph } from "@bendyline/squisq/icons";
 
@@ -6787,7 +6841,6 @@ function parseSquisqMediaPayload(raw) {
 
 // src/RawEditor.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-loader.config({ monaco });
 var SQUISQ_LIGHT_GUTTER = "#dcd8d0";
 var SQUISQ_DARK_GUTTER = "#0f1219";
 var SQUISQ_LIGHT_SEAM = "#b0a99a";
@@ -6806,6 +6859,7 @@ function RawEditor({
   readOnly = false
 }) {
   const { markdownSource, setMarkdownSource, setMonacoEditor, language, mentionProvider } = useEditorContext();
+  const { monaco: monacoNs, ready: monacoReady } = useMonacoLoader();
   const editorRef = useRef12(null);
   const isExternalUpdate = useRef12(false);
   const completionDisposable = useRef12(null);
@@ -6815,15 +6869,15 @@ function RawEditor({
   const dropCleanupRef = useRef12(null);
   const keyDisposable = useRef12(null);
   const submitOnEnterRef = useRef12(submitOnEnter);
-  useEffect13(() => {
+  useEffect14(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const mentionProviderRef = useRef12(mentionProvider);
-  useEffect13(() => {
+  useEffect14(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
-  const handleBeforeMount = useCallback12((monaco2) => {
-    monaco2.editor.defineTheme("squisq-light", {
+  const handleBeforeMount = useCallback12((monaco) => {
+    monaco.editor.defineTheme("squisq-light", {
       base: "vs",
       inherit: true,
       rules: [],
@@ -6834,7 +6888,7 @@ function RawEditor({
         "minimap.background": SQUISQ_LIGHT_GUTTER
       }
     });
-    monaco2.editor.defineTheme("squisq-dark", {
+    monaco.editor.defineTheme("squisq-dark", {
       base: "vs-dark",
       inherit: true,
       rules: [],
@@ -6847,7 +6901,7 @@ function RawEditor({
     });
   }, []);
   const handleMount = useCallback12(
-    (editor, monaco2) => {
+    (editor, monaco) => {
       editorRef.current = editor;
       setMonacoEditor(editor);
       editor.focus();
@@ -6859,7 +6913,7 @@ function RawEditor({
       iconCompletionDisposable.current = null;
       if (language === "markdown") {
         const templates = getAvailableTemplates();
-        completionDisposable.current = monaco2.languages.registerCompletionItemProvider("markdown", {
+        completionDisposable.current = monaco.languages.registerCompletionItemProvider("markdown", {
           triggerCharacters: ["["],
           provideCompletionItems(model, position) {
             const lineContent = model.getLineContent(position.lineNumber);
@@ -6871,7 +6925,7 @@ function RawEditor({
             const closingMatch = textAfterCursor.match(/^\]\}/);
             const suffix = closingMatch ? "" : "]}";
             const startCol = bracketIdx + 3;
-            const range = new monaco2.Range(
+            const range = new monaco.Range(
               position.lineNumber,
               startCol,
               position.lineNumber,
@@ -6880,7 +6934,7 @@ function RawEditor({
             const suggestions = templates.map((name) => ({
               label: name,
               filterText: name,
-              kind: monaco2.languages.CompletionItemKind.Value,
+              kind: monaco.languages.CompletionItemKind.Value,
               insertText: name + suffix,
               range,
               detail: "Block template",
@@ -6889,7 +6943,7 @@ function RawEditor({
             return { suggestions };
           }
         });
-        mentionCompletionDisposable.current = monaco2.languages.registerCompletionItemProvider(
+        mentionCompletionDisposable.current = monaco.languages.registerCompletionItemProvider(
           "markdown",
           {
             triggerCharacters: ["@"],
@@ -6913,7 +6967,7 @@ function RawEditor({
               } catch {
                 return { suggestions: [] };
               }
-              const range = new monaco2.Range(
+              const range = new monaco.Range(
                 position.lineNumber,
                 atIdx + 1,
                 position.lineNumber,
@@ -6922,7 +6976,7 @@ function RawEditor({
               return {
                 suggestions: candidates.map((c) => ({
                   label: `@${c.label}`,
-                  kind: monaco2.languages.CompletionItemKind.User,
+                  kind: monaco.languages.CompletionItemKind.User,
                   insertText: `@[${c.label}](${c.scheme}:${c.id}) `,
                   range,
                   ...c.description ? { detail: c.description } : {},
@@ -6932,7 +6986,7 @@ function RawEditor({
             }
           }
         );
-        iconCompletionDisposable.current = monaco2.languages.registerCompletionItemProvider(
+        iconCompletionDisposable.current = monaco.languages.registerCompletionItemProvider(
           "markdown",
           {
             triggerCharacters: ["["],
@@ -6950,7 +7004,7 @@ function RawEditor({
               const query = between.toLowerCase();
               const closingMatch = textAfterCursor.match(/^\]\}/);
               const suffix = closingMatch ? "" : "]}";
-              const range = new monaco2.Range(
+              const range = new monaco.Range(
                 position.lineNumber,
                 bracketIdx + 3,
                 // after `{[`
@@ -6972,7 +7026,7 @@ function RawEditor({
                   // `filterText` excludes the glyph + spacing so Monaco
                   // filters against the actual icon name only.
                   filterText: m.token,
-                  kind: monaco2.languages.CompletionItemKind.Constant,
+                  kind: monaco.languages.CompletionItemKind.Constant,
                   insertText: `${m.token}${suffix}`,
                   range,
                   detail: m.entry.label,
@@ -6995,7 +7049,7 @@ function RawEditor({
       }
       keyDisposable.current?.dispose();
       keyDisposable.current = editor.onKeyDown((e2) => {
-        if (e2.keyCode !== monaco2.KeyCode.Enter) return;
+        if (e2.keyCode !== monaco.KeyCode.Enter) return;
         if (!submitOnEnterRef.current) return;
         if (e2.metaKey || e2.ctrlKey || e2.shiftKey || e2.altKey) return;
         e2.preventDefault();
@@ -7026,7 +7080,7 @@ function RawEditor({
           const markdown = `![${payload.alt}](${payload.name})`;
           editor.executeEdits("squisq-media-drop", [
             {
-              range: new monaco2.Range(
+              range: new monaco.Range(
                 position.lineNumber,
                 position.column,
                 position.lineNumber,
@@ -7048,7 +7102,7 @@ function RawEditor({
     },
     [setMonacoEditor, language]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       setMonacoEditor(null);
       completionDisposable.current?.dispose();
@@ -7074,7 +7128,7 @@ function RawEditor({
     },
     [setMarkdownSource]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     const editor = editorRef.current;
     if (editor) {
       const currentValue = editor.getValue();
@@ -7085,9 +7139,9 @@ function RawEditor({
       }
     }
   }, [markdownSource]);
-  useEffect13(() => {
+  useEffect14(() => {
     const editor = editorRef.current;
-    if (!editor) return;
+    if (!editor || !monacoNs) return;
     if (language !== "markdown") return;
     const model = editor.getModel();
     if (!model) return;
@@ -7105,7 +7159,7 @@ function RawEditor({
         if (!glyph) continue;
         const col = match.index + 1;
         decorations.push({
-          range: new monaco.Range(line, col, line, col),
+          range: new monacoNs.Range(line, col, line, col),
           options: {
             before: {
               content: glyph,
@@ -7120,8 +7174,28 @@ function RawEditor({
     } else {
       iconGlyphDecorations.current.set(decorations);
     }
-  }, [markdownSource, language]);
+  }, [markdownSource, language, monacoNs]);
   const effectiveTheme = SQUISQ_THEMES[theme] ?? theme;
+  if (!monacoReady) {
+    return /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className,
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--squisq-editor-muted-foreground, #6a6258)",
+          fontSize: 13
+        },
+        "data-testid": "raw-editor",
+        "data-monaco-loading": true,
+        children: "Loading editor\u2026"
+      }
+    );
+  }
   return /* @__PURE__ */ jsx14("div", { className, style: { width: "100%", height: "100%" }, "data-testid": "raw-editor", children: /* @__PURE__ */ jsx14(
     Editor,
     {
@@ -7167,7 +7241,7 @@ function RawEditor({
 }
 
 // src/WysiwygEditor.tsx
-import { useEffect as useEffect17, useMemo as useMemo9, useRef as useRef15, useState as useState16 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo9, useRef as useRef15, useState as useState17 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Table from "@tiptap/extension-table";
@@ -9515,7 +9589,7 @@ var InlineIcon = Node.create({
 });
 
 // src/ImageNodeView.tsx
-import { useEffect as useEffect14, useRef as useRef13, useState as useState13 } from "react";
+import { useEffect as useEffect15, useRef as useRef13, useState as useState14 } from "react";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import Image2 from "@tiptap/extension-image";
 
@@ -9535,16 +9609,16 @@ import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-r
 function ImageComponent({ node, selected, editor, updateAttributes: updateAttributes2 }) {
   const { src, alt, title, width } = node.attrs;
   const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
-  const [resolvedSrc, setResolvedSrc] = useState13(src);
-  const [hovered, setHovered] = useState13(false);
+  const [resolvedSrc, setResolvedSrc] = useState14(src);
+  const [hovered, setHovered] = useState14(false);
   const imgRef = useRef13(null);
-  const [previewWidth, setPreviewWidth] = useState13(null);
+  const [previewWidth, setPreviewWidth] = useState14(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);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!mediaProvider || !resolveAs) {
       setResolvedSrc(src);
       return;
@@ -9724,12 +9798,12 @@ var ImageWithMediaProvider = Image2.extend({
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 
 // src/tiptap/useResolvedMediaSrc.ts
-import { useEffect as useEffect15, useState as useState14 } from "react";
+import { useEffect as useEffect16, useState as useState15 } from "react";
 function useResolvedMediaSrc(src) {
   const { mediaProvider, mediaRevision } = useEditorContext();
-  const [resolved, setResolved] = useState14(src);
+  const [resolved, setResolved] = useState15(src);
   const isRelative = !!src && !src.startsWith("blob:") && !src.startsWith("http:") && !src.startsWith("https:") && !src.startsWith("data:") && !src.startsWith("/");
-  useEffect15(() => {
+  useEffect16(() => {
     if (!mediaProvider || !isRelative) {
       setResolved(src);
       return;
@@ -10124,9 +10198,9 @@ import {
   createContext as createContext2,
   useCallback as useCallback13,
   useContext as useContext2,
-  useState as useState15,
+  useState as useState16,
   useMemo as useMemo8,
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useRef as useRef14
 } from "react";
 import { VIEWPORT_PRESETS, getThemeSummaries as getThemeSummaries2, resolveTheme as resolveTheme2 } from "@bendyline/squisq/schemas";
@@ -10223,13 +10297,13 @@ function PreviewSettingsProvider({
     () => resolveRenderAs(frontmatter?.["document-render-as"]),
     [frontmatter]
   );
-  const [selectedPreset, setSelectedPreset] = useState15(null);
-  useEffect16(() => setSelectedPreset(null), [fmPreset]);
+  const [selectedPreset, setSelectedPreset] = useState16(null);
+  useEffect17(() => setSelectedPreset(null), [fmPreset]);
   const activePreset = selectedPreset ?? fmPreset ?? "landscape";
   const activeViewport = VIEWPORT_PRESETS[activePreset];
   const fmMode = useMemo8(() => resolveDisplayMode(frontmatter?.["display-mode"]), [frontmatter]);
-  const [selectedDisplayMode, setSelectedDisplayMode] = useState15(null);
-  useEffect16(() => setSelectedDisplayMode(null), [fmMode]);
+  const [selectedDisplayMode, setSelectedDisplayMode] = useState16(null);
+  useEffect17(() => setSelectedDisplayMode(null), [fmMode]);
   const activeDisplayMode = selectedDisplayMode ?? fmMode ?? "video";
   const fmTheme = useMemo8(
     () => resolveFrontmatterTheme(
@@ -10237,8 +10311,8 @@ function PreviewSettingsProvider({
     ),
     [frontmatter]
   );
-  const [selectedThemeId, setSelectedThemeId] = useState15(null);
-  useEffect16(() => setSelectedThemeId(null), [fmTheme]);
+  const [selectedThemeId, setSelectedThemeId] = useState16(null);
+  useEffect17(() => setSelectedThemeId(null), [fmTheme]);
   const resolvedThemeId = selectedThemeId ?? fmTheme ?? "standard";
   const resolvedTheme = useMemo8(() => resolveTheme2(resolvedThemeId), [resolvedThemeId]);
   const activeThemeId = themeOverride?.id ?? resolvedThemeId;
@@ -10256,8 +10330,8 @@ function PreviewSettingsProvider({
     ),
     [frontmatter]
   );
-  const [selectedTransformStyle, setSelectedTransformStyle] = useState15(null);
-  useEffect16(() => setSelectedTransformStyle(null), [fmTransform]);
+  const [selectedTransformStyle, setSelectedTransformStyle] = useState16(null);
+  useEffect17(() => setSelectedTransformStyle(null), [fmTransform]);
   const activeTransformStyle = selectedTransformStyle ?? fmTransform ?? "";
   const handleSetTransformStyle = useCallback13(
     (id) => {
@@ -10274,8 +10348,8 @@ function PreviewSettingsProvider({
     ),
     [frontmatter]
   );
-  const [selectedCaptionStyle, setSelectedCaptionStyle] = useState15(null);
-  useEffect16(() => setSelectedCaptionStyle(null), [fmCaption]);
+  const [selectedCaptionStyle, setSelectedCaptionStyle] = useState16(null);
+  useEffect17(() => setSelectedCaptionStyle(null), [fmCaption]);
   const activeCaptionStyle = selectedCaptionStyle ?? fmCaption ?? "standard";
   const handleSetCaptionStyle = useCallback13(
     (style) => {
@@ -10349,10 +10423,10 @@ var selectStyle = {
   cursor: "pointer"
 };
 function useIsNarrow(breakpoint = 600) {
-  const [narrow, setNarrow] = useState15(
+  const [narrow, setNarrow] = useState16(
     () => typeof window !== "undefined" && window.innerWidth <= breakpoint
   );
-  useEffect16(() => {
+  useEffect17(() => {
     const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
     const handler = (e2) => setNarrow(e2.matches);
     mq.addEventListener("change", handler);
@@ -10363,9 +10437,9 @@ function useIsNarrow(breakpoint = 600) {
 function PreviewToolbarControls() {
   const s = usePreviewSettings();
   const isNarrow = useIsNarrow(768);
-  const [popoverOpen, setPopoverOpen] = useState15(false);
+  const [popoverOpen, setPopoverOpen] = useState16(false);
   const popoverRef = useRef14(null);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!popoverOpen) return;
     const handler = (e2) => {
       if (popoverRef.current && !popoverRef.current.contains(e2.target)) {
@@ -10524,19 +10598,19 @@ function WysiwygEditor({
     themeInheritance
   } = useEditorContext();
   const mentionProviderRef = useRef15(mentionProvider);
-  useEffect17(() => {
+  useEffect18(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const resolvedPlaceholder = useMemo9(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
   const isExternalUpdate = useRef15(false);
   const lastSourceRef = useRef15(markdownSource);
   const mediaProviderRef = useRef15(mediaProvider);
-  useEffect17(() => {
+  useEffect18(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const frontmatterRef = useRef15(stripFrontmatter(markdownSource).frontmatter);
   const submitOnEnterRef = useRef15(submitOnEnter);
-  useEffect17(() => {
+  useEffect18(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor({
@@ -10673,18 +10747,18 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect17(() => {
+  useEffect18(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef15(null);
-  const [badgeMenu, setBadgeMenu] = useState16(null);
-  useEffect17(() => {
+  const [badgeMenu, setBadgeMenu] = useState17(null);
+  useEffect18(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -10727,7 +10801,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!editor) return;
     if (markdownSource !== lastSourceRef.current) {
       isExternalUpdate.current = true;
@@ -10896,7 +10970,7 @@ function extFromMime(mime) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect, useMemo as useMemo11, useRef as useRef16, useState as useState18 } from "react";
+import { useLayoutEffect, useMemo as useMemo11, useRef as useRef16, useState as useState19 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS2 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks2,
@@ -10908,14 +10982,14 @@ import { extractPlainText, getChildren } from "@bendyline/squisq/markdown";
 import { BlockRenderer, MediaContext } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
-import { useCallback as useCallback14, useEffect as useEffect18, useMemo as useMemo10, useState as useState17 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect19, useMemo as useMemo10, useState as useState18 } from "react";
 import { flattenBlocks, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
   const flatBlocks = useMemo10(() => doc ? flattenBlocks(doc.blocks) : [], [doc]);
-  const [entries, setEntries] = useState17([]);
-  const [pageEdges, setPageEdges] = useState17(null);
-  useEffect18(() => {
+  const [entries, setEntries] = useState18([]);
+  const [pageEdges, setPageEdges] = useState18(null);
+  useEffect19(() => {
     if (activeView !== "wysiwyg") return;
     const node = refInsideWrapper.current;
     if (!node) return;
@@ -10983,7 +11057,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node = refInsideWrapper.current;
@@ -11044,7 +11118,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect18(() => {
+  useEffect19(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -11332,7 +11406,7 @@ function InlinePreviewGutter({
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState18(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState19(/* @__PURE__ */ new Map());
   useLayoutEffect(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
@@ -11520,7 +11594,7 @@ function InlinePreviewGutter({
 }
 
 // src/OutlinePanel.tsx
-import { useCallback as useCallback15, useEffect as useEffect19, useMemo as useMemo12, useRef as useRef17, useState as useState19 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect20, useMemo as useMemo12, useRef as useRef17, useState as useState20 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate as hasTemplate3 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText2 } from "@bendyline/squisq/markdown";
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -11660,11 +11734,11 @@ function OutlineNode({
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
   const flatBlocks = useMemo12(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
-  const [activeId, setActiveId] = useState19(null);
-  useEffect19(() => {
+  const [activeId, setActiveId] = useState20(null);
+  useEffect20(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -11686,7 +11760,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, flatBlocks]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -11730,7 +11804,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState21, useEffect as useEffect21 } from "react";
+import { useState as useState22, useEffect as useEffect22 } from "react";
 import { DocPlayer, LinearDocView, useMediaProvider } from "@bendyline/squisq-react";
 import { applyTransform } from "@bendyline/squisq/transform";
 import { resolveAudioMapping } from "@bendyline/squisq/doc";
@@ -11974,7 +12048,7 @@ function buildPreviewDoc(doc) {
 }
 
 // src/PlainHtmlPreview.tsx
-import { useEffect as useEffect20, useMemo as useMemo13, useState as useState20 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo13, useState as useState21 } from "react";
 import { parseMarkdown as parseMarkdown4 } from "@bendyline/squisq/markdown";
 import { markdownDocToPlainHtml } from "@bendyline/squisq-formats/html";
 
@@ -12029,8 +12103,8 @@ function PlainHtmlPreview({
   style
 }) {
   const mdDoc = useMemo13(() => parseMarkdown4(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState20(null);
-  useEffect20(() => {
+  const [resolvedImages, setResolvedImages] = useState21(null);
+  useEffect21(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -12131,8 +12205,8 @@ function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
     activeTransformStyle,
     activeCaptionStyle
   } = usePreviewSettings();
-  const [previewDoc, setPreviewDoc] = useState21(null);
-  useEffect21(() => {
+  const [previewDoc, setPreviewDoc] = useState22(null);
+  useEffect22(() => {
     if (!doc || !doc.blocks.length) {
       setPreviewDoc(null);
       return;
@@ -12231,7 +12305,7 @@ function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
 }
 
 // src/ImageViewer.tsx
-import { useCallback as useCallback16, useEffect as useEffect22, useRef as useRef18, useState as useState22 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect23, useRef as useRef18, useState as useState23 } from "react";
 import { Fragment as Fragment9, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var MIN_ZOOM = 0.1;
 var MAX_ZOOM = 16;
@@ -12239,12 +12313,12 @@ var ZOOM_STEP = 1.25;
 function ImageViewer({ src, alt = "", className, theme = "light" }) {
   const imgRef = useRef18(null);
   const stageRef = useRef18(null);
-  const [naturalSize, setNaturalSize] = useState22(null);
-  const [fitZoom, setFitZoom] = useState22(1);
-  const [state, setState] = useState22({ mode: "fit" });
-  const [pan, setPan] = useState22({ x: 0, y: 0 });
-  const [error, setError] = useState22(null);
-  useEffect22(() => {
+  const [naturalSize, setNaturalSize] = useState23(null);
+  const [fitZoom, setFitZoom] = useState23(1);
+  const [state, setState] = useState23({ mode: "fit" });
+  const [pan, setPan] = useState23({ x: 0, y: 0 });
+  const [error, setError] = useState23(null);
+  useEffect23(() => {
     setNaturalSize(null);
     setState({ mode: "fit" });
     setPan({ x: 0, y: 0 });
@@ -12258,7 +12332,7 @@ function ImageViewer({ src, alt = "", className, theme = "light" }) {
     const fit = Math.min(clientWidth / naturalSize.w, clientHeight / naturalSize.h, 1);
     setFitZoom(fit > 0 ? fit : 1);
   }, [naturalSize]);
-  useEffect22(() => {
+  useEffect23(() => {
     recomputeFitZoom();
     if (typeof ResizeObserver === "undefined") return;
     const stage = stageRef.current;
@@ -12301,7 +12375,7 @@ function ImageViewer({ src, alt = "", className, theme = "light" }) {
     },
     [effectiveZoom, fitZoom, pan.x, pan.y]
   );
-  useEffect22(() => {
+  useEffect23(() => {
     const onMove = (e2) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -12412,19 +12486,19 @@ function ImageViewer({ src, alt = "", className, theme = "light" }) {
 }
 
 // src/ImageEditor.tsx
-import { useCallback as useCallback20, useState as useState28 } from "react";
+import { useCallback as useCallback20, useState as useState29 } from "react";
 import { exportImageEditDoc as exportImageEditDoc2 } from "@bendyline/squisq/imageEdit";
 
 // src/imageEditor/CanvasSurface.tsx
-import { useCallback as useCallback17, useEffect as useEffect24, useRef as useRef19, useState as useState24 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect25, useRef as useRef19, useState as useState25 } from "react";
 
 // src/imageEditor/layers/EditorImageLayer.tsx
-import { useEffect as useEffect23, useState as useState23 } from "react";
+import { useEffect as useEffect24, useState as useState24 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function EditorImageLayer({ layer, canvas, resolveAssetUrl }) {
-  const [href, setHref] = useState23(null);
+  const [href, setHref] = useState24(null);
   const src = layer.content.src;
-  useEffect23(() => {
+  useEffect24(() => {
     let cancelled = false;
     resolveAssetUrl(src).then((url) => {
       if (!cancelled) setHref(url);
@@ -12605,8 +12679,8 @@ function CanvasSurface({
 }) {
   const svgRef = useRef19(null);
   const dragRef = useRef19(null);
-  const [, forceRender] = useState24(0);
-  const [cropDrag, setCropDrag] = useState24(null);
+  const [, forceRender] = useState25(0);
+  const [cropDrag, setCropDrag] = useState25(null);
   const toCanvas = useCallback17(
     (clientX, clientY) => {
       const svg = svgRef.current;
@@ -12679,7 +12753,7 @@ function CanvasSurface({
     },
     [tool, dispatch, toCanvas, onCreateTextAt, onCreateShapeAt]
   );
-  useEffect24(() => {
+  useEffect25(() => {
     function onMove(e2) {
       const drag = dragRef.current;
       if (drag) {
@@ -12896,7 +12970,7 @@ function measureTextLayerBox(layer, fallback) {
 }
 
 // src/imageEditor/ImageVersionHistoryDropdown.tsx
-import { useCallback as useCallback18, useEffect as useEffect25, useRef as useRef20, useState as useState25 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect26, useRef as useRef20, useState as useState26 } from "react";
 import {
   exportImageEditDoc
 } from "@bendyline/squisq/imageEdit";
@@ -12908,15 +12982,15 @@ function ImageVersionHistoryDropdown({
   onRevert,
   refreshKey
 }) {
-  const [open, setOpen] = useState25(false);
-  const [versions, setVersions] = useState25([]);
-  const [loading, setLoading] = useState25(false);
-  const [busyTimestamp, setBusyTimestamp] = useState25(null);
-  const [meta, setMeta2] = useState25({});
+  const [open, setOpen] = useState26(false);
+  const [versions, setVersions] = useState26([]);
+  const [loading, setLoading] = useState26(false);
+  const [busyTimestamp, setBusyTimestamp] = useState26(null);
+  const [meta, setMeta2] = useState26({});
   const popoverRef = useRef20(null);
   const triggerRef = useRef20(null);
   const urlsRef = useRef20(/* @__PURE__ */ new Set());
-  useEffect25(() => {
+  useEffect26(() => {
     if (!open) return;
     let cancelled = false;
     setLoading(true);
@@ -12934,7 +13008,7 @@ function ImageVersionHistoryDropdown({
       cancelled = true;
     };
   }, [open, versioning, refreshKey]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!open) return;
     if (versions.length === 0) return;
     let cancelled = false;
@@ -12971,19 +13045,19 @@ function ImageVersionHistoryDropdown({
       cancelled = true;
     };
   }, [open, versions, versioning, container, meta]);
-  useEffect25(() => {
+  useEffect26(() => {
     const urls = urlsRef.current;
     return () => {
       for (const url of urls) URL.revokeObjectURL(url);
       urls.clear();
     };
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     for (const url of urlsRef.current) URL.revokeObjectURL(url);
     urlsRef.current.clear();
     setMeta2({});
   }, [refreshKey]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!open) return;
     function onDocClick(e2) {
       const t = e2.target;
@@ -13720,7 +13794,7 @@ function normalizeColor(v) {
 }
 
 // src/imageEditor/Toolbar.tsx
-import { useRef as useRef21, useState as useState26, useEffect as useEffect26 } from "react";
+import { useRef as useRef21, useState as useState27, useEffect as useEffect27 } from "react";
 import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var TOOLS = [
   { id: "select", icon: /* @__PURE__ */ jsx34(CursorIcon, {}), title: "Select / move (V)" },
@@ -13829,10 +13903,10 @@ function Toolbar2({
   ] });
 }
 function ExportDropdown({ onExport }) {
-  const [open, setOpen] = useState26(false);
+  const [open, setOpen] = useState27(false);
   const wrapRef = useRef21(null);
   const triggerRef = useRef21(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!open) return;
     function onDocClick(e2) {
       const t = e2.target;
@@ -13907,7 +13981,7 @@ function probeDims(file) {
 }
 
 // src/imageEditor/useImageEditor.ts
-import { useCallback as useCallback19, useEffect as useEffect27, useMemo as useMemo14, useReducer as useReducer2, useRef as useRef22, useState as useState27 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect28, useMemo as useMemo14, useReducer as useReducer2, useRef as useRef22, useState as useState28 } from "react";
 import {
   IMAGE_EDIT_ASSETS_PREFIX,
   IMAGE_EDIT_STATE_FILENAME,
@@ -14012,10 +14086,10 @@ function useImageEditor(options) {
     },
     null
   );
-  const [ready, setReady] = useState27(false);
-  const [error, setError] = useState27(null);
+  const [ready, setReady] = useState28(false);
+  const [error, setError] = useState28(null);
   const seededOnLoadRef = useRef22(false);
-  useEffect27(() => {
+  useEffect28(() => {
     let cancelled = false;
     setReady(false);
     setError(null);
@@ -14047,7 +14121,7 @@ function useImageEditor(options) {
   const persistTimerRef = useRef22(null);
   const docRef = useRef22(null);
   docRef.current = state?.doc ?? null;
-  useEffect27(() => {
+  useEffect28(() => {
     if (!state?.dirty) return;
     if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
     persistTimerRef.current = setTimeout(() => {
@@ -14078,7 +14152,7 @@ function useImageEditor(options) {
     () => allowVersioning ? new ImageEditVersionManager(container, { stateFilename }) : null,
     [allowVersioning, container, stateFilename]
   );
-  useEffect27(() => {
+  useEffect28(() => {
     if (!versioning) return;
     if (!ready) return;
     if (!seededOnLoadRef.current) return;
@@ -14090,7 +14164,7 @@ function useImageEditor(options) {
       );
     });
   }, [versioning, ready]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!versioning) return;
     if (versioningAutoSaveIdleMs <= 0) return;
     if (!state?.doc) return;
@@ -14120,7 +14194,7 @@ function useImageEditor(options) {
     },
     [container]
   );
-  useEffect27(() => {
+  useEffect28(() => {
     const cache = urlCacheRef.current;
     return () => {
       for (const url of cache.values()) URL.revokeObjectURL(url);
@@ -14275,7 +14349,7 @@ function ImageEditor(props) {
     allowVersioning,
     versioningAutoSaveIdleMs
   });
-  const [historyRefreshKey, setHistoryRefreshKey] = useState28(0);
+  const [historyRefreshKey, setHistoryRefreshKey] = useState29(0);
   const handleExport = useCallback20(
     async (format) => {
       if (!state) return;
@@ -14475,7 +14549,7 @@ function ImageEditor(props) {
 }
 
 // src/MediaBin.tsx
-import { useState as useState29, useEffect as useEffect28, useRef as useRef23, useCallback as useCallback21 } from "react";
+import { useState as useState30, useEffect as useEffect29, useRef as useRef23, useCallback as useCallback21 } from "react";
 import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -14494,11 +14568,11 @@ function isImageMime(mimeType) {
   return mimeType.startsWith("image/");
 }
 function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }) {
-  const [entries, setEntries] = useState29([]);
-  const [thumbUrls, setThumbUrls] = useState29({});
-  const [loading, setLoading] = useState29(false);
+  const [entries, setEntries] = useState30([]);
+  const [thumbUrls, setThumbUrls] = useState30({});
+  const [loading, setLoading] = useState30(false);
   const fileInputRef = useRef23(null);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -14666,7 +14740,7 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
@@ -14723,7 +14797,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState30(false);
+  const [isHovering, setIsHovering] = useState31(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs28(
     "div",
@@ -14767,16 +14841,16 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect29, useRef as useRef24, useState as useState31 } from "react";
+import { useEffect as useEffect30, useRef as useRef24, useState as useState32 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState] = useState31(null);
+  const [state, setState] = useState32(null);
   const timerRef = useRef24(null);
   const currentTargetRef = useRef24(null);
   const visibleRef = useRef24(false);
-  useEffect29(() => {
+  useEffect30(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -14860,7 +14934,7 @@ function TooltipLayer() {
 }
 
 // src/hooks/useFileDrop.ts
-import { useCallback as useCallback22, useEffect as useEffect30, useRef as useRef25, useState as useState32 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect31, useRef as useRef25, useState as useState33 } from "react";
 var MEDIA_EXTENSIONS = /* @__PURE__ */ new Set([
   "png",
   "jpg",
@@ -14920,11 +14994,11 @@ function classifyDataTransferItems(items) {
   return null;
 }
 function useFileDrop({ onDrop, enabled = true }) {
-  const [isDragging, setIsDragging] = useState32(false);
-  const [dragContentType, setDragContentType] = useState32(null);
+  const [isDragging, setIsDragging] = useState33(false);
+  const [dragContentType, setDragContentType] = useState33(null);
   const dragCounterRef = useRef25(0);
   const inPageDragRef = useRef25(false);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!enabled) return;
     const onStart = () => {
       inPageDragRef.current = true;
@@ -15278,8 +15352,8 @@ function EditorShellInner({
   const isCodeMode = editorMode === "code";
   const isImageMode = editorMode === "image";
   const isMarkdownMode = editorMode === "markdown";
-  const [showFiles, setShowFiles] = useState33(false);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState33(0);
+  const [showFiles, setShowFiles] = useState34(false);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState34(0);
   const imageEditFallbackContainerRef = useRef26(null);
   if (imageEditFallbackContainerRef.current === null) {
     imageEditFallbackContainerRef.current = new MemoryContentContainer();
@@ -15351,10 +15425,10 @@ ${snippet}` : snippet);
   const { isDragging, dragContentType, containerProps, zoneProps } = useFileDrop({
     onDrop: handleFileDrop
   });
-  useEffect31(() => {
+  useEffect32(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
-  useEffect31(() => {
+  useEffect32(() => {
     const handler = (e2) => {
       if (e2.ctrlKey || e2.metaKey) {
         switch (e2.key) {
@@ -15561,9 +15635,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${sanitized}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState33(null);
-  const [resolveError, setResolveError] = useState33(null);
-  useEffect31(() => {
+  const [initialSrc, setInitialSrc] = useState34(null);
+  const [resolveError, setResolveError] = useState34(null);
+  useEffect32(() => {
     let cancelled = false;
     mediaProvider.resolveUrl(relativePath).then(
       (url) => {
@@ -15591,7 +15665,7 @@ function ImageEditModal({
     },
     [mediaProvider, relativePath, onSaved]
   );
-  useEffect31(() => {
+  useEffect32(() => {
     const handler = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -15685,7 +15759,7 @@ function ViewSwitcher({ className }) {
 }
 
 // src/ThemeCustomizerPanel.tsx
-import { useCallback as useCallback24, useEffect as useEffect32, useMemo as useMemo17, useRef as useRef27, useState as useState34 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect33, useMemo as useMemo17, useRef as useRef27, useState as useState35 } from "react";
 import {
   AVAILABLE_FONT_STACKS,
   compileTheme,
@@ -15833,18 +15907,18 @@ function ThemeCustomizerPanel({
   onSave,
   onReset
 }) {
-  const [open, setOpen] = useState34(false);
-  const [draft, setDraft] = useState34(() => themeToDraft(value));
+  const [open, setOpen] = useState35(false);
+  const [draft, setDraft] = useState35(() => themeToDraft(value));
   const containerRef = useRef27(null);
   const externalIdRef = useRef27(value?.id ?? null);
-  useEffect32(() => {
+  useEffect33(() => {
     const incomingId = value?.id ?? null;
     if (incomingId !== externalIdRef.current) {
       externalIdRef.current = incomingId;
       setDraft(themeToDraft(value));
     }
   }, [value]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!open) return;
     const handler = (e2) => {
       if (containerRef.current && !containerRef.current.contains(e2.target)) {
@@ -16226,13 +16300,13 @@ import {
 } from "@bendyline/squisq/jsonForm";
 
 // src/jsonEditor/editors.tsx
-import { useEffect as useEffect34, useId, useRef as useRef29, useState as useState35 } from "react";
+import { useEffect as useEffect35, useId, useRef as useRef29, useState as useState36 } from "react";
 import {
   arrayItemKind
 } from "@bendyline/squisq/jsonForm";
 
 // src/jsonEditor/EmbeddedRichTextField.tsx
-import { useEffect as useEffect33, useRef as useRef28 } from "react";
+import { useEffect as useEffect34, useRef as useRef28 } from "react";
 import { useEditor as useEditor3, EditorContent as EditorContent2 } from "@tiptap/react";
 import StarterKit2 from "@tiptap/starter-kit";
 import Table2 from "@tiptap/extension-table";
@@ -16275,7 +16349,7 @@ function EmbeddedRichTextField(props) {
       }
     }
   });
-  useEffect33(() => {
+  useEffect34(() => {
     if (!editor) return;
     if (value === lastValueRef.current) return;
     isExternalUpdate.current = true;
@@ -16286,7 +16360,7 @@ function EmbeddedRichTextField(props) {
       isExternalUpdate.current = false;
     }
   }, [editor, value]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const cls = "squisq-jf-richtext" + (className ? ` ${className}` : "");
@@ -16321,7 +16395,7 @@ function TextEditor({ value, schema, pointer, disabled }) {
 function MultilineEditor({ value, schema, pointer, disabled }) {
   const { setAtPath } = useJsonEditor();
   const ref = useRef29(null);
-  useEffect34(() => {
+  useEffect35(() => {
     const ta = ref.current;
     if (!ta) return;
     ta.style.height = "auto";
@@ -16601,7 +16675,7 @@ function ChipBinEditor({ value, schema, pointer, disabled }) {
   };
   const labels = itemSchema.squisq?.enumLabels;
   const enumOpts = itemSchema.enum;
-  const [draft, setDraft] = useState35("");
+  const [draft, setDraft] = useState36("");
   const remove = (index) => {
     const next = items.slice();
     next.splice(index, 1);
@@ -16801,8 +16875,8 @@ function defaultForSchema(schema) {
 function TabsEditor({ value, schema, pointer, disabled }) {
   const branches = schema.oneOf ?? schema.anyOf ?? [];
   const initial = pickMatchingBranch(branches, value);
-  const [active, setActive] = useState35(initial);
-  useEffect34(() => {
+  const [active, setActive] = useState36(initial);
+  useEffect35(() => {
     setActive(pickMatchingBranch(branches, value));
   }, [value]);
   const branch = branches[active];
@@ -16982,7 +17056,7 @@ function JsonEditor(props) {
 }
 
 // src/recorder/RecorderButton.tsx
-import { useCallback as useCallback25, useState as useState36 } from "react";
+import { useCallback as useCallback25, useState as useState37 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { Fragment as Fragment14, jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
 function RecorderButton({
@@ -16994,7 +17068,7 @@ function RecorderButton({
   style,
   disabled
 }) {
-  const [open, setOpen] = useState36(false);
+  const [open, setOpen] = useState37(false);
   const handleOpen = useCallback25(() => setOpen(true), []);
   const handleClose = useCallback25(() => setOpen(false), []);
   const handleSave = useCallback25(