@bendyline/squisq-editor-react 2.12.0 → 2.12.2

package/dist/{chunk-4HZMZPWD.js → chunk-H3XGOKPT.js}

@@ -1,6 +1,6 @@
 import {
   RecorderModal
-} from "./chunk-IT3NPQ4J.js";
+} from "./chunk-TCGWKYME.js";
 
 // src/recorder/RecorderButton.tsx
 import { useCallback, useState } from "react";

package/dist/{chunk-4SZ3UWSL.js → chunk-SKKA3YFF.js}

@@ -412,9 +412,13 @@ function resolveFileKind(fileName, language) {
 // src/useBlockNavigator.ts
 import { useCallback, useMemo as useMemo2, useState } from "react";
 var NEW_BLOCK_MARKDOWN = "## New section\n\n";
+var NO_SLICES = [];
 function useBlockNavigator(source, setSource, opts) {
   const enabled = opts?.enabled ?? false;
-  const slices = useMemo2(() => getBlockSlices(source), [source]);
+  const slices = useMemo2(
+    () => enabled ? getBlockSlices(source) : NO_SLICES,
+    [enabled, source]
+  );
   const blockCount = slices.length;
   const [rawKey, setRawKey] = useState(0);
   const activeBlockKey = blockCount === 0 ? 0 : Math.min(Math.max(rawKey, 0), blockCount - 1);

package/dist/{chunk-IT3NPQ4J.js → chunk-TCGWKYME.js}

@@ -2308,14 +2308,17 @@ var modalStyle = {
   border: "1px solid var(--squisq-recorder-border)",
   borderRadius: 0,
   padding: "24px 28px",
+  boxSizing: "border-box",
   width: "min(560px, calc(100vw - 48px))",
-  maxHeight: "calc(100vh - 48px)",
+  maxHeight: "calc(100dvh - 48px)",
   overflowY: "auto",
+  overscrollBehaviorY: "contain",
   boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
   fontFamily: "system-ui, -apple-system, sans-serif",
   color: "var(--squisq-recorder-text)"
 };
 var titleStyle = {
+  flexShrink: 0,
   margin: "0 0 16px 0",
   fontSize: 18,
   fontWeight: 600,
@@ -2496,8 +2499,7 @@ var recordingStatusStyle = {
 var modalExpandedStyle = {
   ...modalStyle,
   width: "calc(100vw - 48px)",
-  height: "calc(100vh - 48px)",
-  maxHeight: "none",
+  height: "calc(100dvh - 48px)",
   overflowY: "hidden",
   display: "flex",
   flexDirection: "column"
@@ -2511,6 +2513,7 @@ var bodyRowStyle = {
 var leftColStyle = {
   flex: "0 0 min(420px, 38vw)",
   overflowY: "auto",
+  overscrollBehaviorY: "contain",
   minHeight: 0,
   paddingRight: 4
 };
@@ -2529,6 +2532,11 @@ var checkboxRowStyle = {
   marginBottom: 12,
   fontSize: 13
 };
+var modeTogglesStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  columnGap: 20
+};
 var meterLevelStyle = {
   position: "absolute",
   left: 0,
@@ -3374,33 +3382,35 @@ function RecorderModal({
                       }) })
                     ] }, group.label)) }),
                     /* @__PURE__ */ jsx6("p", { style: summaryStyle, children: narrationRecording ? narrationCaptureSummary(stage.recorder.withCamera) : captureSummary(micOn, cameraOn, screenOn, includeSystemAudio) }),
-                    narrationAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
-                      /* @__PURE__ */ jsx6(
-                        "input",
-                        {
-                          type: "checkbox",
-                          style: { accentColor: "var(--squisq-recorder-accent)" },
-                          checked: narrationOn,
-                          onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "narration", e.target.checked)),
-                          disabled: narrationToggleDisabled,
-                          title: narrationToggleDisabled ? narrationRecording ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
-                        }
-                      ),
-                      "Show narration mode"
-                    ] }),
-                    slidesAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
-                      /* @__PURE__ */ jsx6(
-                        "input",
-                        {
-                          type: "checkbox",
-                          style: { accentColor: "var(--squisq-recorder-accent)" },
-                          checked: slidesOn,
-                          onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "slides", e.target.checked)),
-                          disabled: narrationToggleDisabled,
-                          title: narrationToggleDisabled ? "Save or discard this recording before switching modes" : void 0
-                        }
-                      ),
-                      "Show slides mode"
+                    /* @__PURE__ */ jsxs5("div", { style: modeTogglesStyle, children: [
+                      narrationAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                        /* @__PURE__ */ jsx6(
+                          "input",
+                          {
+                            type: "checkbox",
+                            style: { accentColor: "var(--squisq-recorder-accent)" },
+                            checked: narrationOn,
+                            onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "narration", e.target.checked)),
+                            disabled: narrationToggleDisabled,
+                            title: narrationToggleDisabled ? narrationRecording ? "Finish or discard the narration take first" : "Save or discard this recording before switching modes" : void 0
+                          }
+                        ),
+                        "Show narration mode"
+                      ] }),
+                      slidesAvailable && /* @__PURE__ */ jsxs5("label", { style: checkboxRowStyle, children: [
+                        /* @__PURE__ */ jsx6(
+                          "input",
+                          {
+                            type: "checkbox",
+                            style: { accentColor: "var(--squisq-recorder-accent)" },
+                            checked: slidesOn,
+                            onChange: (e) => setPanelMode(panelModeAfterToggle(panelMode, "slides", e.target.checked)),
+                            disabled: narrationToggleDisabled,
+                            title: narrationToggleDisabled ? "Save or discard this recording before switching modes" : void 0
+                          }
+                        ),
+                        "Show slides mode"
+                      ] })
                     ] }),
                     /* @__PURE__ */ jsx6(
                       RecorderDeviceQuickPicks,

package/dist/{chunk-RQZA4BGN.js → chunk-WA7KBG3D.js}

@@ -19,7 +19,7 @@ import {
   useDictationState,
   useEditorContext,
   useEditorContextOptional
-} from "./chunk-4SZ3UWSL.js";
+} from "./chunk-SKKA3YFF.js";
 import {
   monacoLanguageRequestKey,
   monacoLanguagesForDocument,
@@ -49,7 +49,7 @@ import {
   documentTitleFromFileName,
   resolveBlockVisual,
   useModalDialog
-} from "./chunk-IT3NPQ4J.js";
+} from "./chunk-TCGWKYME.js";
 import {
   Icon
 } from "./chunk-UYB5CPRE.js";
@@ -3410,6 +3410,9 @@ function controlKeysForMode(displayMode, hasVideoMedia) {
   if (displayMode === "linear") {
     return keys.filter((key) => key !== "format" && key !== "captions");
   }
+  if (displayMode === "slideshow") {
+    return keys.filter((key) => key !== "captions");
+  }
   return keys;
 }
 var PREVIEW_POPOVER_GAP = 4;
@@ -12433,8 +12436,7 @@ function slicePastHeading(doc, headingNode) {
   }
   return out;
 }
-function findBlockSliceAtLine(source, lineNumber) {
-  const doc = parseMarkdown3(source);
+function findBlockSliceAtLineInDoc(doc, lineNumber) {
   for (const node2 of doc.children) {
     if (node2.type !== "heading") continue;
     const pos = node2.position;
@@ -12446,7 +12448,9 @@ function findBlockSliceAtLine(source, lineNumber) {
   return null;
 }
 function findBlockSliceByHeadingIndex(source, headingIndex) {
-  const doc = parseMarkdown3(source);
+  return findBlockSliceByHeadingIndexInDoc(parseMarkdown3(source), headingIndex);
+}
+function findBlockSliceByHeadingIndexInDoc(doc, headingIndex) {
   let seen = 0;
   for (const node2 of doc.children) {
     if (node2.type !== "heading") continue;
@@ -19565,6 +19569,7 @@ function Toolbar({
   const {
     activeView,
     markdownSource,
+    markdownDoc,
     doc,
     setMarkdownSource,
     tiptapEditor,
@@ -20776,17 +20781,17 @@ ${TASK_LIST_MARKDOWN}
   }, [isWysiwyg, tiptapEditor]);
   const currentTemplate = isWysiwyg ? wysiwygTemplate : isRawView ? rawTemplate : null;
   const recommendedTemplates = useMemo24(() => {
-    if (currentTemplate === null) return void 0;
+    if (currentTemplate === null || !markdownDoc) return void 0;
     let slice = null;
     if (isRawView && rawHeadingLine !== null) {
-      slice = findBlockSliceAtLine(markdownSource, rawHeadingLine);
+      slice = findBlockSliceAtLineInDoc(markdownDoc, rawHeadingLine);
     } else if (isWysiwyg && wysiwygHeadingIndex !== null) {
-      slice = findBlockSliceByHeadingIndex(markdownSource, wysiwygHeadingIndex);
+      slice = findBlockSliceByHeadingIndexInDoc(markdownDoc, wysiwygHeadingIndex);
     }
     if (slice === null) return void 0;
     const profile = profileBlockContents(slice);
     return recommendTemplatesForBlock(profile, TEMPLATE_NAMES).recommended;
-  }, [currentTemplate, isRawView, isWysiwyg, rawHeadingLine, wysiwygHeadingIndex, markdownSource]);
+  }, [currentTemplate, isRawView, isWysiwyg, rawHeadingLine, wysiwygHeadingIndex, markdownDoc]);
   const templatePreviewBlock = useMemo24(() => {
     if (!doc || currentTemplate === null) return null;
     const flat = flattenBlocks(doc.blocks);
@@ -34622,6 +34627,10 @@ function WysiwygEditor({
       initialDisplayBodyRef.current = body;
     }
   }
+  const initialContentRef = useRef48(void 0);
+  if (initialContentRef.current === void 0) {
+    initialContentRef.current = markdownToTiptap(initialDisplayBodyRef.current);
+  }
   const submitOnEnterRef = useRef48(submitOnEnter);
   useEffect50(() => {
     submitOnEnterRef.current = submitOnEnter;
@@ -34695,7 +34704,7 @@ function WysiwygEditor({
       ReviewExtension,
       DictationExtension
     ],
-    content: markdownToTiptap(initialDisplayBodyRef.current),
+    content: initialContentRef.current,
     onUpdate: ({ editor: ed }) => {
       if (isExternalUpdate.current || externalApplyPendingRef.current) return;
       const bodyMd = persistFromWrite(tiptapToMarkdown(ed.getHTML()), wrapStateRef.current);
@@ -35223,6 +35232,7 @@ import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas
 import {
   flattenBlocks as flattenBlocks4,
   materializeBlockLayers as materializeBlockLayers2,
+  coerceTemplateParams as coerceTemplateParams2,
   DEFAULT_THEME as DEFAULT_THEME5,
   deriveTemplateInputs as deriveTemplateInputs2
 } from "@bendyline/squisq/doc";
@@ -35721,8 +35731,11 @@ function InlinePreviewGutter({
         // Forward it before authored params/overrides so document-mode cards
         // render the same CSV/XLSX data as block and full-preview modes.
         ...block.templateData,
-        ...annotation.params,
-        ...block.templateOverrides
+        // Authored `{[…]}` params are raw strings. Coerce them per the
+        // template's input descriptors, as the full preview does, or a
+        // template with structured inputs renders nothing — twoColumn needs
+        // `left="Web|Start in a browser"` as `{ label, sublabel }`.
+        ...coerceTemplateParams2(template, { ...annotation.params, ...block.templateOverrides }).input
       };
       const ctx = {
         blockIndex: index2,
@@ -39343,6 +39356,7 @@ import {
   useState as useState73
 } from "react";
 import { createPortal as createPortal17 } from "react-dom";
+import { inferDocumentTitle as inferDocumentTitle2 } from "@bendyline/squisq/markdown";
 import { jsx as jsx80, jsxs as jsxs65 } from "react/jsx-runtime";
 var PresentationModeContext = createContext6(null);
 function usePresentationMode() {
@@ -39430,8 +39444,9 @@ function preparePopupDocument(popup, sourceRoot, title, colorScheme, presentatio
   doc.body.appendChild(root);
   return root;
 }
-function presentationTitle(docTitle) {
-  return typeof docTitle === "string" && docTitle.trim() ? `${docTitle.trim()} - Presentation` : "Squisq Presentation";
+function presentationTitle(markdownDoc) {
+  const title = markdownDoc ? inferDocumentTitle2(markdownDoc) : void 0;
+  return title ? `${title} - Presentation` : "Presentation";
 }
 function PresentationModeProvider({
   rootRef,
@@ -39439,7 +39454,7 @@ function PresentationModeProvider({
   allowWindow = true,
   allowFullscreen = true
 }) {
-  const { activeView, colorScheme, doc } = useEditorContext();
+  const { activeView, colorScheme, markdownDoc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
   const popupNameId = useId15().replace(/[^a-zA-Z0-9_-]/g, "");
   const [selectedTarget, setSelectedTarget] = useState73("control");
@@ -39507,84 +39522,90 @@ function PresentationModeProvider({
     }
     setActiveTarget(null);
   }, [releasePopup, rootRef]);
-  const start = useCallback51(async () => {
-    setError(null);
-    const root = rootRef.current;
-    if (!root) return;
-    const activeElement = root.ownerDocument.activeElement;
-    returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
-    if (selectedTarget === "control") {
-      setActiveTarget("control");
-      return;
-    }
-    if (selectedTarget === "fullscreen") {
-      if (!allowFullscreen) return;
-      if (typeof root.requestFullscreen !== "function") {
-        setError("Full screen is unavailable here.");
+  const start = useCallback51(
+    async (requestedTarget) => {
+      const target = requestedTarget ?? selectedTarget;
+      if (!availableTargets.includes(target)) return;
+      setError(null);
+      const root = rootRef.current;
+      if (!root) return;
+      const activeElement = root.ownerDocument.activeElement;
+      returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      if (target === "control") {
+        setActiveTarget("control");
         return;
       }
+      if (target === "fullscreen") {
+        if (!allowFullscreen) return;
+        if (typeof root.requestFullscreen !== "function") {
+          setError("Full screen is unavailable here.");
+          return;
+        }
+        try {
+          await root.requestFullscreen({ navigationUI: "hide" });
+          setActiveTarget("fullscreen");
+        } catch {
+          setError("Could not enter full screen.");
+        }
+        return;
+      }
+      if (!allowWindow) return;
+      let popup = null;
       try {
-        await root.requestFullscreen({ navigationUI: "hide" });
-        setActiveTarget("fullscreen");
+        const screenWidth = window.screen?.availWidth || POPUP_WIDTH;
+        const screenHeight = window.screen?.availHeight || POPUP_HEIGHT;
+        const width = Math.min(POPUP_WIDTH, Math.max(640, Math.round(screenWidth * 0.9)));
+        const height = Math.min(POPUP_HEIGHT, Math.max(480, Math.round(screenHeight * 0.9)));
+        popup = window.open(
+          "",
+          `squisq-presentation-${popupNameId}`,
+          `popup=yes,width=${width},height=${height}`
+        );
+        if (!popup) throw new Error("Popup blocked");
+        const nextRoot = preparePopupDocument(
+          popup,
+          root,
+          presentationTitle(markdownDoc),
+          colorScheme,
+          activeTheme.colors.background
+        );
+        popupRef.current = popup;
+        setPopupRoot(nextRoot);
+        setActiveTarget("window");
+        const handlePageHide = () => releasePopup(false);
+        const handlePopupKeyDown = (event) => {
+          if (event.key === "Escape") releasePopup(true);
+        };
+        popup.addEventListener("pagehide", handlePageHide);
+        popup.document.addEventListener("keydown", handlePopupKeyDown);
+        const closedPoll = window.setInterval(() => {
+          if (popup?.closed) releasePopup(false);
+        }, 500);
+        popupCleanupRef.current = () => {
+          popup?.removeEventListener("pagehide", handlePageHide);
+          popup?.document.removeEventListener("keydown", handlePopupKeyDown);
+          window.clearInterval(closedPoll);
+        };
+        popup.focus();
       } catch {
-        setError("Could not enter full screen.");
+        if (popupRef.current) releasePopup(true);
+        else if (popup && !popup.closed) popup.close();
+        setError("The presentation window was blocked. Allow pop-ups and try again.");
       }
-      return;
-    }
-    if (!allowWindow) return;
-    let popup = null;
-    try {
-      const screenWidth = window.screen?.availWidth || POPUP_WIDTH;
-      const screenHeight = window.screen?.availHeight || POPUP_HEIGHT;
-      const width = Math.min(POPUP_WIDTH, Math.max(640, Math.round(screenWidth * 0.9)));
-      const height = Math.min(POPUP_HEIGHT, Math.max(480, Math.round(screenHeight * 0.9)));
-      popup = window.open(
-        "",
-        `squisq-presentation-${popupNameId}`,
-        `popup=yes,width=${width},height=${height}`
-      );
-      if (!popup) throw new Error("Popup blocked");
-      const nextRoot = preparePopupDocument(
-        popup,
-        root,
-        presentationTitle(doc?.frontmatter?.title),
-        colorScheme,
-        activeTheme.colors.background
-      );
-      popupRef.current = popup;
-      setPopupRoot(nextRoot);
-      setActiveTarget("window");
-      const handlePageHide = () => releasePopup(false);
-      const handlePopupKeyDown = (event) => {
-        if (event.key === "Escape") releasePopup(true);
-      };
-      popup.addEventListener("pagehide", handlePageHide);
-      popup.document.addEventListener("keydown", handlePopupKeyDown);
-      const closedPoll = window.setInterval(() => {
-        if (popup?.closed) releasePopup(false);
-      }, 500);
-      popupCleanupRef.current = () => {
-        popup?.removeEventListener("pagehide", handlePageHide);
-        popup?.document.removeEventListener("keydown", handlePopupKeyDown);
-        window.clearInterval(closedPoll);
-      };
-      popup.focus();
-    } catch {
-      if (popupRef.current) releasePopup(true);
-      else if (popup && !popup.closed) popup.close();
-      setError("The presentation window was blocked. Allow pop-ups and try again.");
-    }
-  }, [
-    allowFullscreen,
-    allowWindow,
-    activeTheme.colors.background,
-    colorScheme,
-    doc?.frontmatter?.title,
-    popupNameId,
-    releasePopup,
-    rootRef,
-    selectedTarget
-  ]);
+    },
+    [
+      allowFullscreen,
+      allowWindow,
+      activeTheme.colors.background,
+      availableTargets,
+      colorScheme,
+      markdownDoc,
+      popupNameId,
+      releasePopup,
+      rootRef,
+      selectedTarget
+    ]
+  );
   const selectTarget = useCallback51(
     (target) => {
       if (!availableTargets.includes(target)) return;
@@ -39909,8 +39930,10 @@ function PresentationModeControl() {
                 tabIndex: isSelected ? 0 : -1,
                 disabled,
                 onClick: () => {
+                  const alreadyThere = activeTarget === option.target;
                   selectTarget(option.target);
                   closeMenu(true);
+                  if (!alreadyThere) void start(option.target);
                 },
                 children: [
                   /* @__PURE__ */ jsx80(

package/dist/index.d.ts

@@ -125,7 +125,7 @@ interface BlockNavigator {
     editorSource: string;
     /** What the bound editor writes through: splices back into the full source (block mode). */
     setEditorSource: (s: string) => void;
-    /** Number of navigable blocks in the current source. */
+    /** Number of navigable blocks in the current source; 0 while disabled. */
     blockCount: number;
     /** Index of the active block (clamped into range). */
     activeBlockKey: number;
@@ -150,7 +150,9 @@ interface BlockNavigator {
 interface UseBlockNavigatorOptions {
     /**
      * When false (the default), the channel passes through to the full source
-     * and navigation is inert. Hosts flip this on to enter block-at-a-time mode.
+     * and navigation is inert: the source is not sliced, so `blockCount` is 0
+     * and `activeBlockStartLine` is null. Hosts flip this on to enter
+     * block-at-a-time mode.
      */
     enabled?: boolean;
 }

package/dist/index.js

@@ -233,7 +233,7 @@ import {
   videoEmbedParagraphJson,
   viewStateFromBinding,
   writeHeadingViewState
-} from "./chunk-RQZA4BGN.js";
+} from "./chunk-WA7KBG3D.js";
 import {
   EditorProvider,
   applySourceEditsToText,
@@ -254,7 +254,7 @@ import {
   useBlockNavigator,
   useEditorContext,
   useEditorInsertMenuItems
-} from "./chunk-4SZ3UWSL.js";
+} from "./chunk-SKKA3YFF.js";
 import {
   SPEECH_INPUT_SAMPLE_RATE,
   isSpeechInputProviderFactory,
@@ -280,7 +280,7 @@ import {
 } from "./chunk-HLU6ZBS7.js";
 import {
   RecorderButton
-} from "./chunk-4HZMZPWD.js";
+} from "./chunk-H3XGOKPT.js";
 import {
   RecorderDeviceQuickPicks,
   RecorderDeviceSettingsPanel,
@@ -305,7 +305,7 @@ import {
   unshownSlidesWarning,
   useMediaDevices,
   useMediaRecorder
-} from "./chunk-IT3NPQ4J.js";
+} from "./chunk-TCGWKYME.js";
 import {
   DEFAULT_RECORDER_DEVICE_SETTINGS,
   buildRecorderAudioConstraints,

package/dist/recorder/index.js

@@ -1,6 +1,6 @@
 import {
   RecorderButton
-} from "../chunk-4HZMZPWD.js";
+} from "../chunk-H3XGOKPT.js";
 import {
   RecorderDeviceQuickPicks,
   RecorderDeviceSettingsPanel,
@@ -14,7 +14,7 @@ import {
   requestScreenStream,
   useMediaDevices,
   useMediaRecorder
-} from "../chunk-IT3NPQ4J.js";
+} from "../chunk-TCGWKYME.js";
 import {
   DEFAULT_RECORDER_DEVICE_SETTINGS,
   buildRecorderAudioConstraints,

package/dist/review/index.js

@@ -19,7 +19,7 @@ import {
   updateReviewDecorations,
   useReview,
   useReviewState
-} from "../chunk-4SZ3UWSL.js";
+} from "../chunk-SKKA3YFF.js";
 import "../chunk-DNEVUOBZ.js";
 import "../chunk-WMNL2WEI.js";
 

package/dist/shell/index.js

@@ -5,18 +5,18 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContextMenuItems
-} from "../chunk-RQZA4BGN.js";
+} from "../chunk-WA7KBG3D.js";
 import {
   EditorProvider,
   useEditorContext,
   useEditorInsertMenuItems
-} from "../chunk-4SZ3UWSL.js";
+} from "../chunk-SKKA3YFF.js";
 import "../chunk-DNEVUOBZ.js";
 import "../chunk-V4NBQF5C.js";
 import "../chunk-KI5XQWRU.js";
 import "../chunk-WMNL2WEI.js";
 import "../chunk-HLU6ZBS7.js";
-import "../chunk-IT3NPQ4J.js";
+import "../chunk-TCGWKYME.js";
 import "../chunk-LRZJD5YD.js";
 import "../chunk-UYB5CPRE.js";
 import "../chunk-DJS5I5NO.js";

package/dist/styles/index.css

@@ -7657,6 +7657,7 @@
   --squisq-surface-sunken: #f3f4f6;
   --squisq-surface-hover: #f3f4f6;
   --squisq-surface-raised: #e5e7eb;
+  --squisq-surface-overlay: var(--squisq-surface);
   --squisq-input-bg: #ffffff;
   --squisq-row-hover: #f3f4f6;
   --squisq-desk-bg: #dcd8d0;
@@ -7733,6 +7734,7 @@
   --squisq-surface-sunken: #111827;
   --squisq-surface-hover: #374151;
   --squisq-surface-raised: #4b5563;
+  --squisq-surface-overlay: var(--squisq-surface);
   --squisq-input-bg: #374151;
   --squisq-row-hover: #374151;
   --squisq-desk-bg: #0f1219;
@@ -8013,7 +8015,7 @@
   padding: 6px;
   border: 1px solid var(--squisq-border);
   border-radius: 10px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.08);
   box-sizing: border-box;
   font-family:
@@ -8117,7 +8119,7 @@
 }
 .squisq-use-mode-menu[data-theme=dark] {
   border-color: var(--squisq-border);
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
 }
 .squisq-use-mode-menu[data-theme=dark] .squisq-use-mode-menu-icon {
   background: var(--squisq-surface-hover);
@@ -8615,7 +8617,7 @@
   min-width: 220px;
   max-width: 280px;
   padding: 4px 0;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border: 1px solid var(--squisq-border-subtle);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
@@ -8696,7 +8698,7 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   font-family: var( --squisq-ux-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif );
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border: 1px solid var(--squisq-border-subtle);
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
@@ -8716,7 +8718,7 @@
   border-top: 1px solid var(--squisq-border-subtle);
 }
 .squisq-insert-menu[data-theme=dark] {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
@@ -8791,7 +8793,7 @@
   padding: 8px 8px 8px 12px;
   border: 1px solid var(--squisq-danger-border);
   border-radius: 8px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   box-shadow: var(--squisq-shadow-md);
   color: var(--squisq-danger-text);
   font-size: 12px;
@@ -8889,7 +8891,7 @@
   margin: 0 -8px 4px;
   padding: 12px 14px 10px;
   color: var(--squisq-text-strong);
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-bottom: 1px solid var(--squisq-border-subtle);
 }
 .squisq-mermaid-type-menu-heading strong {
@@ -8980,7 +8982,7 @@
 }
 .squisq-mermaid-type-menu[data-theme=dark] .squisq-mermaid-type-menu-heading {
   color: var(--squisq-text-strong);
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-bottom-color: var(--squisq-border-subtle);
 }
 .squisq-mermaid-type-menu[data-theme=dark] .squisq-mermaid-type-card {
@@ -10988,7 +10990,7 @@
   border-left-color: var(--squisq-border);
 }
 .squisq-editor-shell[data-theme=dark] .squisq-toolbar-overflow-menu {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
@@ -11040,7 +11042,7 @@
   color: var(--squisq-text-strong);
 }
 .squisq-editor-shell[data-theme=dark] .squisq-template-gallery {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
 }
@@ -11528,7 +11530,7 @@
   padding: 4px;
   border: 1px solid var(--squisq-border);
   border-radius: 6px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.12);
 }
 .squisq-media-bin-context-menu-item {
@@ -11815,7 +11817,7 @@
   max-width: 320px;
   max-height: 240px;
   overflow-y: auto;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border: 1px solid rgba(0, 0, 0, 0.12);
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
@@ -12172,7 +12174,7 @@
   gap: 12px;
 }
 .squisq-editor-shell[data-theme=dark] .squisq-version-history-popover {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   color: var(--squisq-text-soft);
 }
@@ -12344,7 +12346,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   margin: 6px 0;
 }
 .squisq-editor-shell[data-theme=dark] .squisq-view-menu-popover {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   color: var(--squisq-text-soft);
 }
@@ -12603,7 +12605,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   background: rgba(59, 130, 246, 0.12);
 }
 .squisq-editor-shell[data-theme=dark] .squisq-theme-customizer-popover {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   color: var(--squisq-text-soft);
 }
@@ -14250,7 +14252,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   color: var(--squisq-text);
 }
 .squisq-editor-shell[data-theme=dark] .squisq-theme-picker-popover {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   color: var(--squisq-text);
 }
@@ -14932,7 +14934,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   color: var(--squisq-text-muted);
 }
 .squisq-editor-shell[data-theme=dark] .squisq-transform-menu-popover {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border-subtle);
   color: var(--squisq-text-soft);
 }
@@ -16345,7 +16347,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-radius: 6px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
   overflow: hidden;
@@ -16365,7 +16367,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   background: var(--squisq-bg);
 }
 [data-theme=dark] .squisq-image-edit-modal__header {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-bottom-color: var(--squisq-border-subtle);
 }
 .squisq-image-edit-modal__title {
@@ -16476,7 +16478,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   flex-direction: column;
   width: min(560px, 100%);
   max-height: 100%;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   color: var(--squisq-editor-text);
   border-radius: 6px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
@@ -17217,7 +17219,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   padding: 3px;
   border: 1px solid var(--squisq-border);
   border-radius: 7px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
   transform: translate(-50%, calc(-100% - 8px));
 }
@@ -17309,7 +17311,7 @@ button.squisq-view-menu-radio-row:focus-visible {
   padding: 8px;
   border: 1px solid var(--squisq-border);
   border-radius: 8px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   color: var(--squisq-text);
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
 }
@@ -18965,7 +18967,7 @@ button.squisq-ascii-timeline-track-name:focus-visible {
   padding: 4px;
   border: 1px solid var(--squisq-border);
   border-radius: 8px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   box-shadow: var(--squisq-shadow-lg);
   color: var(--squisq-text);
   font-family: var(--squisq-ux-font, system-ui, sans-serif);
@@ -19199,7 +19201,7 @@ button.squisq-ascii-timeline-track-name:focus-visible {
 .squisq-proof-menu {
   min-width: 200px;
   max-width: 320px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border: 1px solid var(--squisq-border);
   border-radius: 8px;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
@@ -19246,7 +19248,7 @@ button.squisq-ascii-timeline-track-name:focus-visible {
 }
 .squisq-proof-tooltip {
   max-width: 320px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border: 1px solid var(--squisq-border);
   border-radius: 8px;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
@@ -19391,7 +19393,7 @@ button.squisq-ascii-timeline-track-name:focus-visible {
   color: var(--squisq-text-faint);
 }
 .squisq-proof-menu[data-theme=dark] {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border);
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
 }
@@ -19407,7 +19409,7 @@ button.squisq-ascii-timeline-track-name:focus-visible {
   background: var(--squisq-surface-hover);
 }
 .squisq-proof-tooltip[data-theme=dark] {
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   border-color: var(--squisq-border);
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
   color: var(--squisq-text-soft);
@@ -19909,7 +19911,7 @@ button.squisq-ascii-timeline-track-name:focus-visible {
   overflow: hidden;
   border: 1px solid var(--squisq-border);
   border-radius: 6px;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   color: var(--squisq-text);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
@@ -20055,7 +20057,7 @@ button.squisq-ascii-timeline-track-name:focus-visible {
   max-height: 420px;
   display: flex;
   flex-direction: column;
-  background: var(--squisq-surface);
+  background: var(--squisq-surface-overlay);
   color: var(--squisq-text);
   border: 1px solid var(--squisq-border-subtle);
   border-radius: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -102,12 +102,12 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "2.12.0",
+    "@bendyline/squisq": "2.12.1",
     "@bendyline/squisq-calc": "2.11.2",
-    "@bendyline/squisq-formats": "2.7.0",
-    "@bendyline/squisq-grid-react": "2.11.23",
-    "@bendyline/squisq-react": "2.12.0",
-    "@bendyline/squisq-video-react": "2.5.0",
+    "@bendyline/squisq-formats": "2.7.1",
+    "@bendyline/squisq-grid-react": "2.11.24",
+    "@bendyline/squisq-react": "2.12.2",
+    "@bendyline/squisq-video-react": "2.5.2",
     "@fortawesome/fontawesome-free": "7.3.1",
     "@tiptap/core": "2.27.3",
     "@tiptap/extension-heading": "2.27.3",