@bendyline/squisq-editor-react 2.11.24 → 2.11.25

package/dist/{chunk-E7JVS6N5.js → chunk-IRFFIMKM.js}

@@ -717,7 +717,10 @@ function languagesFromRequestKey(requestKey) {
 async function loadMonacoProfile(requestKey, languageServices) {
   const monaco = await loadMonacoModule();
   if (!loadedLanguageProfiles.has(requestKey)) {
-    await monaco.loadMonacoLanguages(languagesFromRequestKey(requestKey), { languageServices });
+    await Promise.all([
+      preloadMonacoSuggestions(),
+      monaco.loadMonacoLanguages(languagesFromRequestKey(requestKey), { languageServices })
+    ]);
     loadedLanguageProfiles.add(requestKey);
   }
   return monaco;
@@ -1097,7 +1100,7 @@ function VersionHistoryPanel() {
 }
 
 // src/ThemePicker.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useId, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useId, useLayoutEffect, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import {
   getThemeSummaries,
@@ -1257,7 +1260,14 @@ function ThemePicker({
   const handleSelect = (id) => {
     onChange(id);
     setOpen(false);
+    triggerRef.current?.focus();
   };
+  useLayoutEffect(() => {
+    if (!open) return;
+    const options = popoverRef.current?.querySelectorAll('[role="option"]');
+    const selected = popoverRef.current?.querySelector('[aria-selected="true"]');
+    (selected ?? options?.[0])?.focus();
+  }, [open]);
   const popover = open ? createPortal(
     /* @__PURE__ */ jsxs2(
       "div",
@@ -1268,6 +1278,24 @@ function ThemePicker({
         role: "listbox",
         "aria-label": ariaLabel,
         style: popoverStyle,
+        onKeyDown: (event) => {
+          if (event.key === "Tab") {
+            setOpen(false);
+            triggerRef.current?.focus();
+            return;
+          }
+          if (!["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End"].includes(
+            event.key
+          ))
+            return;
+          event.preventDefault();
+          const options = [
+            ...event.currentTarget.querySelectorAll('[role="option"]')
+          ];
+          const current = options.indexOf(document.activeElement);
+          const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : event.key === "ArrowUp" || event.key === "ArrowLeft" ? Math.max(0, current - 1) : Math.min(options.length - 1, current + 1);
+          options[next]?.focus();
+        },
         children: [
           includeDefault && inheritedEntry && /* @__PURE__ */ jsxs2(
             "button",
@@ -1400,7 +1428,8 @@ function ThemePicker({
         ]
       }
     ),
-    document.body
+    // Keep choices inside the modal's focus and accessibility boundary.
+    triggerRef.current?.closest('[role="dialog"][aria-modal="true"]') ?? document.body
   ) : null;
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsxs2(
@@ -1410,6 +1439,12 @@ function ThemePicker({
         type: "button",
         className: `squisq-theme-picker-trigger squisq-theme-picker-trigger--${variant}${open ? " squisq-theme-picker-trigger--open" : ""}`,
         onClick: handleToggle,
+        onKeyDown: (event) => {
+          if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+          event.preventDefault();
+          updatePosition();
+          setOpen(true);
+        },
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-controls": open ? popoverId : void 0,
@@ -2379,7 +2414,7 @@ function CustomThemeDialog({ value, onChange, onSave, onClose }) {
 }
 
 // src/PreviewModeMenu.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useId as useId2, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/PreviewControls.tsx
@@ -2390,7 +2425,7 @@ import {
   useState as useState7,
   useMemo as useMemo6,
   useEffect as useEffect7,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useRef as useRef6
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -3761,7 +3796,7 @@ function PreviewToolbarControls({
     setPopoverOpen(false);
     setPopoverAnchor(null);
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const root = rootRef.current;
     const probe = probeRef.current;
     if (!root || !probe) return;
@@ -3802,7 +3837,7 @@ function PreviewToolbarControls({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [closePopover, popoverOpen]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!popoverOpen) return;
     updatePopoverPosition();
   }, [popoverOpen, updatePopoverPosition, visibleCount]);
@@ -4315,7 +4350,7 @@ function PreviewModeMenu({ openRequest = 0 }) {
       window.removeEventListener("scroll", updatePosition, true);
     };
   }, [closeMenu, open, updatePosition]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!open || !anchor) return;
     const selected = menuRef.current?.querySelector('[aria-checked="true"]');
     const first = menuRef.current?.querySelector('[role="menuitemradio"]');
@@ -4352,6 +4387,10 @@ function PreviewModeMenu({ openRequest = 0 }) {
           "aria-label": "Use mode",
           style: { top: anchor.top, left: anchor.left },
           onKeyDown: (event) => {
+            if (event.key === "Tab") {
+              closeMenu(true);
+              return;
+            }
             if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
             event.preventDefault();
             const items = Array.from(
@@ -4374,6 +4413,7 @@ function PreviewModeMenu({ openRequest = 0 }) {
                 type: "button",
                 className: `squisq-use-mode-menu-item${selected ? " squisq-use-mode-menu-item--selected" : ""}`,
                 role: "menuitemradio",
+                tabIndex: -1,
                 "aria-checked": selected,
                 "aria-labelledby": labelId,
                 "aria-describedby": summaryId,
@@ -4402,13 +4442,61 @@ function PreviewModeMenu({ openRequest = 0 }) {
 }
 
 // src/ViewMenuPanel.tsx
-import { useCallback as useCallback10, useEffect as useEffect11, useId as useId3, useRef as useRef11, useState as useState12 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState13 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
+
+// src/useAnchoredPopover.ts
+import { useLayoutEffect as useLayoutEffect4, useState as useState9 } from "react";
+function useAnchoredPopover(open, triggerRef, popoverRef) {
+  const [style, setStyle] = useState9({ position: "fixed", visibility: "hidden" });
+  useLayoutEffect4(() => {
+    if (!open) return;
+    const position = () => {
+      const trigger = triggerRef.current;
+      const popover = popoverRef.current;
+      if (!trigger || !popover) return;
+      const rect = trigger.getBoundingClientRect();
+      const below = Math.max(0, window.innerHeight - rect.bottom - 12);
+      const above = Math.max(0, rect.top - 12);
+      const flip = popover.scrollHeight > below && above > below;
+      const height = Math.min(popover.scrollHeight + 2, flip ? above : below);
+      setStyle({
+        position: "fixed",
+        visibility: "visible",
+        margin: 0,
+        right: "auto",
+        bottom: "auto",
+        left: Math.max(
+          8,
+          Math.min(rect.right - popover.offsetWidth, window.innerWidth - popover.offsetWidth - 8)
+        ),
+        top: flip ? rect.top - height - 4 : rect.bottom + 4,
+        maxHeight: height,
+        maxWidth: "calc(100vw - 16px)",
+        boxSizing: "border-box",
+        overflowY: "auto"
+      });
+    };
+    const scroll = (event) => {
+      if (event.target instanceof Node && popoverRef.current?.contains(event.target)) return;
+      position();
+    };
+    position();
+    window.addEventListener("resize", position);
+    window.addEventListener("scroll", scroll, true);
+    return () => {
+      window.removeEventListener("resize", position);
+      window.removeEventListener("scroll", scroll, true);
+    };
+  }, [open, triggerRef, popoverRef]);
+  return style;
+}
 
 // src/proofing/ProofingContext.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
 
 // src/proofing/useProofing.ts
-import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef8, useState as useState10 } from "react";
 import {
   blankProtectedSpans,
   buildJoinedText,
@@ -4637,16 +4725,16 @@ function useProofing() {
     versioning,
     saveVersion
   } = useEditorContext();
-  const [status, setStatus] = useState9("idle");
-  const [errorMessage, setErrorMessage] = useState9(null);
-  const [sessionEnabled, setSessionEnabled] = useState9(null);
-  const [panelVisible, setPanelVisible] = useState9(false);
-  const [findings, setFindings] = useState9([]);
-  const [findingsView, setFindingsView] = useState9("wysiwyg");
-  const [activeFindingId, setActiveFindingId] = useState9(null);
-  const [menuAnchor, setMenuAnchor] = useState9(null);
-  const [hoverAnchor, setHoverAnchor] = useState9(null);
-  const [retryNonce, setRetryNonce] = useState9(0);
+  const [status, setStatus] = useState10("idle");
+  const [errorMessage, setErrorMessage] = useState10(null);
+  const [sessionEnabled, setSessionEnabled] = useState10(null);
+  const [panelVisible, setPanelVisible] = useState10(false);
+  const [findings, setFindings] = useState10([]);
+  const [findingsView, setFindingsView] = useState10("wysiwyg");
+  const [activeFindingId, setActiveFindingId] = useState10(null);
+  const [menuAnchor, setMenuAnchor] = useState10(null);
+  const [hoverAnchor, setHoverAnchor] = useState10(null);
+  const [retryNonce, setRetryNonce] = useState10(0);
   const providerRef = useRef8(null);
   const ownedRef = useRef8(false);
   const statusRef = useRef8("idle");
@@ -5397,7 +5485,7 @@ function useProofing() {
 }
 
 // src/proofing/ProofingMenu.tsx
-import { useEffect as useEffect10, useRef as useRef9, useState as useState10 } from "react";
+import { useEffect as useEffect10, useRef as useRef9, useState as useState11 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var MAX_SUGGESTIONS = 5;
@@ -5428,8 +5516,8 @@ function ProofingMenu({
   onClose
 }) {
   const menuRef = useRef9(null);
-  const [style, setStyle] = useState10(() => computeStyle(anchor));
-  const [focusIndex, setFocusIndex] = useState10(0);
+  const [style, setStyle] = useState11(() => computeStyle(anchor));
+  const [focusIndex, setFocusIndex] = useState11(0);
   useEffect10(() => {
     requestAnimationFrame(() => setStyle(computeStyle(anchor, menuRef.current)));
   }, [anchor]);
@@ -5522,7 +5610,7 @@ function ProofingMenu({
 }
 
 // src/proofing/ProofingTooltip.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState11 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef10, useState as useState12 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MAX_SUGGESTIONS2 = 3;
@@ -5556,8 +5644,8 @@ function ProofingTooltip({
   onRelease
 }) {
   const tooltipRef = useRef10(null);
-  const [style, setStyle] = useState11(() => computeStyle2(anchor));
-  useLayoutEffect3(() => {
+  const [style, setStyle] = useState12(() => computeStyle2(anchor));
+  useLayoutEffect5(() => {
     setStyle(computeStyle2(anchor, tooltipRef.current));
   }, [anchor, finding.id]);
   const suggestions = finding.suggestions.slice(0, MAX_SUGGESTIONS2);
@@ -5723,19 +5811,28 @@ function ViewMenuPanel() {
     setBlockTagVisibility,
     themeInheritance,
     setThemeInheritance,
+    colorScheme,
     layoutMode,
     setLayoutMode
   } = useEditorContext();
   const proofingState = useProofingState();
-  const [open, setOpen] = useState12(false);
+  const [open, setOpen] = useState13(false);
   const containerRef = useRef11(null);
   const triggerRef = useRef11(null);
+  const menuRef = useRef11(null);
+  const initialFocus = useRef11("first");
+  const popoverStyle = useAnchoredPopover(open, triggerRef, menuRef);
   const close = useCallback10(() => setOpen(false), []);
   useEscapeDismissal(open, close, triggerRef);
+  useLayoutEffect6(() => {
+    if (!open || popoverStyle.visibility === "hidden") return;
+    const items = menuRef.current?.querySelectorAll('[role^="menuitem"]');
+    if (items?.length) items[initialFocus.current === "last" ? items.length - 1 : 0]?.focus();
+  }, [open, popoverStyle.visibility]);
   useEffect11(() => {
     if (!open) return;
     const handler = (e2) => {
-      if (containerRef.current && !containerRef.current.contains(e2.target)) {
+      if (containerRef.current && !containerRef.current.contains(e2.target) && !menuRef.current?.contains(e2.target)) {
         setOpen(false);
       }
     };
@@ -5762,78 +5859,116 @@ function ViewMenuPanel() {
         "aria-label": "View options",
         "aria-expanded": open,
         "aria-haspopup": "menu",
-        onClick: () => setOpen((v2) => !v2),
+        onClick: () => {
+          initialFocus.current = "first";
+          setOpen((v2) => !v2);
+        },
+        onKeyDown: (event) => {
+          if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+          event.preventDefault();
+          initialFocus.current = event.key === "ArrowUp" ? "last" : "first";
+          setOpen(true);
+        },
         children: /* @__PURE__ */ jsx12(Icon, { icon: "fa-solid fa-eye" })
       }
     ),
-    open && /* @__PURE__ */ jsxs11("div", { className: "squisq-view-menu-popover", role: "menu", "aria-label": "View options", children: [
-      /* @__PURE__ */ jsx12(
-        MenuRadioGroup,
-        {
-          label: "View",
-          value: layoutMode,
-          onChange: (v2) => setLayoutMode(v2),
-          options: [
-            { value: "document", label: "Document" },
-            { value: "block", label: "Block-at-a-time" },
-            { value: "timeline", label: "Timeline" }
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx12("div", { className: "squisq-view-menu-separator", role: "separator" }),
-      /* @__PURE__ */ jsx12(MenuToggle, { label: "Show outline", checked: outlineVisible, onChange: toggleOutline }),
-      /* @__PURE__ */ jsx12(
-        MenuToggle,
-        {
-          label: "Show block previews",
-          checked: inlinePreviewVisible,
-          onChange: toggleInlinePreview
-        }
-      ),
-      /* @__PURE__ */ jsx12(
-        MenuRadioGroup,
+    open && createPortal6(
+      /* @__PURE__ */ jsxs11(
+        "div",
         {
-          label: "Show block tags",
-          value: blockTagVisibility,
-          onChange: (v2) => setBlockTagVisibility(v2),
-          options: [
-            { value: "none", label: "No inline block tags" },
-            { value: "active", label: "Selected/hovered block" },
-            { value: "always", label: "Always show" }
+          ref: menuRef,
+          style: popoverStyle,
+          "data-theme": colorScheme,
+          className: "squisq-view-menu-popover",
+          role: "menu",
+          "aria-label": "View options",
+          onKeyDown: (event) => {
+            if (event.key === "Tab") {
+              close();
+              triggerRef.current?.focus();
+              return;
+            }
+            if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+            event.preventDefault();
+            const items = [
+              ...event.currentTarget.querySelectorAll('[role^="menuitem"]')
+            ];
+            const current = items.indexOf(document.activeElement);
+            const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowUp" ? (current - 1 + items.length) % items.length : (current + 1) % items.length;
+            items[next]?.focus();
+          },
+          children: [
+            /* @__PURE__ */ jsx12(
+              MenuRadioGroup,
+              {
+                label: "View",
+                value: layoutMode,
+                onChange: (v2) => setLayoutMode(v2),
+                options: [
+                  { value: "document", label: "Document" },
+                  { value: "block", label: "Block-at-a-time" },
+                  { value: "timeline", label: "Timeline" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx12("div", { className: "squisq-view-menu-separator", role: "separator" }),
+            /* @__PURE__ */ jsx12(MenuToggle, { label: "Show outline", checked: outlineVisible, onChange: toggleOutline }),
+            /* @__PURE__ */ jsx12(
+              MenuToggle,
+              {
+                label: "Show block previews",
+                checked: inlinePreviewVisible,
+                onChange: toggleInlinePreview
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              MenuRadioGroup,
+              {
+                label: "Show block tags",
+                value: blockTagVisibility,
+                onChange: (v2) => setBlockTagVisibility(v2),
+                options: [
+                  { value: "none", label: "No inline block tags" },
+                  { value: "active", label: "Selected/hovered block" },
+                  { value: "always", label: "Always show" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              MenuToggle,
+              {
+                label: "Show status bar",
+                checked: statusBarVisible,
+                onChange: toggleStatusBar
+              }
+            ),
+            proofingState && /* @__PURE__ */ jsx12(
+              MenuToggle,
+              {
+                label: "Check spelling & grammar",
+                checked: proofingState.enabled,
+                onChange: () => proofingState.setEnabled(!proofingState.enabled)
+              }
+            ),
+            /* @__PURE__ */ jsx12("div", { className: "squisq-view-menu-separator", role: "separator" }),
+            /* @__PURE__ */ jsx12(
+              MenuRadioGroup,
+              {
+                label: "Editor styling from theme",
+                value: themeInheritance,
+                onChange: (v2) => setThemeInheritance(v2),
+                options: [
+                  { value: "none", label: "Don't inherit" },
+                  { value: "fonts", label: "Fonts only" },
+                  { value: "fonts-colors", label: "Fonts & colors" }
+                ]
+              }
+            )
           ]
         }
       ),
-      /* @__PURE__ */ jsx12(
-        MenuToggle,
-        {
-          label: "Show status bar",
-          checked: statusBarVisible,
-          onChange: toggleStatusBar
-        }
-      ),
-      proofingState && /* @__PURE__ */ jsx12(
-        MenuToggle,
-        {
-          label: "Check spelling & grammar",
-          checked: proofingState.enabled,
-          onChange: () => proofingState.setEnabled(!proofingState.enabled)
-        }
-      ),
-      /* @__PURE__ */ jsx12("div", { className: "squisq-view-menu-separator", role: "separator" }),
-      /* @__PURE__ */ jsx12(
-        MenuRadioGroup,
-        {
-          label: "Editor styling from theme",
-          value: themeInheritance,
-          onChange: (v2) => setThemeInheritance(v2),
-          options: [
-            { value: "none", label: "Don't inherit" },
-            { value: "fonts", label: "Fonts only" },
-            { value: "fonts-colors", label: "Fonts & colors" }
-          ]
-        }
-      )
-    ] })
+      triggerRef.current?.closest('[role="dialog"][aria-modal="true"]') ?? document.body
+    )
   ] });
 }
 function MenuToggle({
@@ -5841,18 +5976,21 @@ function MenuToggle({
   checked,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs11("label", { className: "squisq-view-menu-row", role: "menuitemcheckbox", "aria-checked": checked, children: [
-    /* @__PURE__ */ jsx12(
-      "input",
-      {
-        type: "checkbox",
-        className: "squisq-view-menu-checkbox",
-        checked,
-        onChange
-      }
-    ),
-    /* @__PURE__ */ jsx12("span", { className: "squisq-view-menu-label", children: label })
-  ] });
+  return /* @__PURE__ */ jsxs11(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      className: "squisq-view-menu-row",
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      onClick: onChange,
+      children: [
+        /* @__PURE__ */ jsx12("span", { className: "squisq-view-menu-checkbox", "aria-hidden": "true", children: checked ? "\u2713" : "" }),
+        /* @__PURE__ */ jsx12("span", { className: "squisq-view-menu-label", children: label })
+      ]
+    }
+  );
 }
 function MenuRadioGroup({
   label,
@@ -5860,35 +5998,27 @@ function MenuRadioGroup({
   onChange,
   options
 }) {
-  const name = useId3();
   return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: "squisq-view-menu-row squisq-view-menu-row--radios",
-      role: "radiogroup",
+      role: "group",
       "aria-label": label,
       children: [
         /* @__PURE__ */ jsx12("span", { className: "squisq-view-menu-label", children: label }),
         options.map((o) => {
           const checked = o.value === value;
           return /* @__PURE__ */ jsxs11(
-            "label",
+            "button",
             {
+              type: "button",
+              tabIndex: -1,
               className: "squisq-view-menu-radio-row",
               role: "menuitemradio",
               "aria-checked": checked,
+              onClick: () => onChange(o.value),
               children: [
-                /* @__PURE__ */ jsx12(
-                  "input",
-                  {
-                    type: "radio",
-                    className: "squisq-view-menu-radio",
-                    name,
-                    value: o.value,
-                    checked,
-                    onChange: () => onChange(o.value)
-                  }
-                ),
+                /* @__PURE__ */ jsx12("span", { className: "squisq-view-menu-radio", "aria-hidden": "true", children: checked ? "\u25CF" : "" }),
                 /* @__PURE__ */ jsx12("span", { className: "squisq-view-menu-radio-label", children: o.label })
               ]
             },
@@ -5901,7 +6031,7 @@ function MenuRadioGroup({
 }
 
 // src/TransformMenu.tsx
-import { useCallback as useCallback11, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef12, useState as useState13 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef12, useState as useState14 } from "react";
 import {
   MARKDOWN_SOURCE_TRANSFORMS,
   DEFAULT_WRAP_WIDTH,
@@ -5939,9 +6069,9 @@ function TransformMenu() {
     versioning,
     saveVersion
   } = useEditorContext();
-  const [open, setOpen] = useState13(false);
-  const [width, setWidth] = useState13(DEFAULT_WRAP_WIDTH);
-  const [status, setStatus] = useState13("");
+  const [open, setOpen] = useState14(false);
+  const [width, setWidth] = useState14(DEFAULT_WRAP_WIDTH);
+  const [status, setStatus] = useState14("");
   const containerRef = useRef12(null);
   const triggerRef = useRef12(null);
   const close = useCallback11(() => setOpen(false), []);
@@ -6107,7 +6237,7 @@ import {
   useContext as useContext4,
   useEffect as useEffect13,
   useMemo as useMemo9,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // src/customTemplates/library.ts
@@ -6174,7 +6304,7 @@ function CustomTemplateProvider({
   onDocTemplatesChange,
   children
 }) {
-  const [libraryTemplates, setLibraryTemplates] = useState14(
+  const [libraryTemplates, setLibraryTemplates] = useState15(
     () => listLibraryTemplates()
   );
   useEffect13(() => {
@@ -6247,8 +6377,8 @@ function useCustomTemplates() {
 }
 
 // src/TemplatePicker.tsx
-import { useEffect as useEffect14, useId as useId4, useMemo as useMemo11, useRef as useRef13, useState as useState15 } from "react";
-import { createPortal as createPortal6 } from "react-dom";
+import { useEffect as useEffect14, useId as useId3, useMemo as useMemo11, useRef as useRef13, useState as useState16 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
 import { TEMPLATE_METADATA, resolveTemplateName } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText2 } from "@bendyline/squisq/markdown";
 
@@ -6680,7 +6810,7 @@ var TEMPLATE_GALLERY_PORTAL_SELECTOR = "[data-squisq-template-gallery-portal]";
 var TEMPLATE_GALLERY_DIALOG_ID = "squisq-template-gallery-dialog";
 var TEMPLATE_GALLERY_PORTAL_ID_PREFIX = "squisq-template-gallery-portal";
 function useTemplateGalleryPortalId() {
-  return `${TEMPLATE_GALLERY_PORTAL_ID_PREFIX}-${useId4().replace(/:/g, "")}`;
+  return `${TEMPLATE_GALLERY_PORTAL_ID_PREFIX}-${useId3().replace(/:/g, "")}`;
 }
 var W3 = 56;
 var H3 = 40;
@@ -7276,12 +7406,12 @@ function TemplatePicker({
   onOpenDesigner,
   previewSource
 }) {
-  const [open, setOpen] = useState15(false);
-  const [dialogStyle, setDialogStyle] = useState15({});
+  const [open, setOpen] = useState16(false);
+  const [dialogStyle, setDialogStyle] = useState16({});
   const containerRef = useRef13(null);
   const triggerRef = useRef13(null);
   const dialogRef = useRef13(null);
-  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId4().replace(/:/g, "")}`;
+  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId3().replace(/:/g, "")}`;
   useEscapeDismissal(open, () => setOpen(false), triggerRef);
   const updateDialogBounds = () => {
     if (!triggerRef.current) return;
@@ -7334,7 +7464,7 @@ function TemplatePicker({
       }
     );
   }
-  const gallery = open ? createPortal6(
+  const gallery = open ? createPortal7(
     /* @__PURE__ */ jsx18(
       TemplateGalleryDialog,
       {
@@ -7414,7 +7544,7 @@ function TemplateGalleryDialog({
   onClose
 }) {
   const panelRef = useRef13(null);
-  const titleId = useId4();
+  const titleId = useId3();
   useModalDialog({ rootRef: dialogRef, dialogRef: panelRef, returnFocusRef, onClose });
   return /* @__PURE__ */ jsx18(
     "div",
@@ -7522,7 +7652,7 @@ function TemplateGalleryBody({
   previewSource
 }) {
   const galleryId = useTemplateGalleryPortalId();
-  const [query, setQuery] = useState15("");
+  const [query, setQuery] = useState16("");
   const searchRef = useRef13(null);
   const customCtx = useCustomTemplates();
   const customTemplates = useMemo11(() => customCtx?.allTemplates ?? [], [customCtx]);
@@ -7744,9 +7874,9 @@ function TemplateBadgePopover({
   onOpenDesigner,
   previewSource
 }) {
-  const [style, setStyle] = useState15(() => computeDialogStyle(anchorRect));
+  const [style, setStyle] = useState16(() => computeDialogStyle(anchorRect));
   const dialogRef = useRef13(null);
-  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId4().replace(/:/g, "")}`;
+  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId3().replace(/:/g, "")}`;
   useEffect14(() => {
     const frame = requestAnimationFrame(() => setStyle(computeDialogStyle(anchorRect)));
     return () => cancelAnimationFrame(frame);
@@ -7775,7 +7905,7 @@ function TemplateBadgePopover({
     onClose();
   };
   const dialogTitle = templateDialogTitle(previewSource);
-  return createPortal6(
+  return createPortal7(
     /* @__PURE__ */ jsx18(
       TemplateGalleryDialog,
       {
@@ -8085,8 +8215,8 @@ function transitionLabel(value) {
 }
 
 // src/TransitionPicker.tsx
-import { useEffect as useEffect15, useMemo as useMemo12, useRef as useRef14, useState as useState16 } from "react";
-import { createPortal as createPortal7 } from "react-dom";
+import { useEffect as useEffect15, useMemo as useMemo12, useRef as useRef14, useState as useState17 } from "react";
+import { createPortal as createPortal8 } from "react-dom";
 import { getTransitionClass } from "@bendyline/squisq-react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT_PORTAL_ID = "squisq-transition-flyout-portal";
@@ -8097,8 +8227,8 @@ function TransitionPicker({
   colorScheme = "light",
   accentColor
 }) {
-  const [open, setOpen] = useState16(false);
-  const [style, setStyle] = useState16({});
+  const [open, setOpen] = useState17(false);
+  const [style, setStyle] = useState17({});
   const triggerRef = useRef14(null);
   useEscapeDismissal(open, () => setOpen(false), triggerRef);
   const updatePosition = () => {
@@ -8146,7 +8276,7 @@ function TransitionPicker({
       window.removeEventListener("resize", handler);
     };
   }, [open]);
-  const flyout = open ? createPortal7(
+  const flyout = open ? createPortal8(
     /* @__PURE__ */ jsx19(
       TransitionFlyout,
       {
@@ -8202,7 +8332,7 @@ function TransitionFlyout({
   onChange,
   colorScheme
 }) {
-  const [query, setQuery] = useState16("");
+  const [query, setQuery] = useState17("");
   const searchRef = useRef14(null);
   useEffect15(() => {
     searchRef.current?.focus();
@@ -8340,7 +8470,7 @@ function TransitionOption({
   direction,
   onSelect
 }) {
-  const [previewing, setPreviewing] = useState16(false);
+  const [previewing, setPreviewing] = useState17(false);
   const animClass = previewing && entry.value ? getTransitionClass(entry.value, true, normalizeDir(direction)) : "";
   return /* @__PURE__ */ jsx19(
     "button",
@@ -8361,7 +8491,7 @@ function normalizeDir(direction) {
 }
 
 // src/DocumentSettingsDialog.tsx
-import { useCallback as useCallback13, useId as useId5, useMemo as useMemo13, useRef as useRef15, useState as useState17 } from "react";
+import { useCallback as useCallback13, useId as useId4, useMemo as useMemo13, useRef as useRef15, useState as useState18 } from "react";
 import {
   inferDocumentTitle,
   parseMarkdown as parseMarkdown2,
@@ -8417,11 +8547,11 @@ function DocumentSettingsDialog({
     FRONTMATTER_SETTING_KEYS.captions.canonical,
     FRONTMATTER_SETTING_KEYS.captions.legacy
   );
-  const [title, setTitle] = useState17(currentTitle);
-  const [subtitle, setSubtitle] = useState17(currentSubtitle);
-  const [theme, setTheme] = useState17(currentTheme);
-  const [transform, setTransform] = useState17(currentTransform);
-  const [captions, setCaptions] = useState17(currentCaptions);
+  const [title, setTitle] = useState18(currentTitle);
+  const [subtitle, setSubtitle] = useState18(currentSubtitle);
+  const [theme, setTheme] = useState18(currentTheme);
+  const [transform, setTransform] = useState18(currentTransform);
+  const [captions, setCaptions] = useState18(currentCaptions);
   const proofingState = useProofingState();
   const currentProofing = readFm(
     frontmatter,
@@ -8433,14 +8563,14 @@ function DocumentSettingsDialog({
     PROOF_FRONTMATTER_KEYS3.dialect.canonical,
     PROOF_FRONTMATTER_KEYS3.dialect.legacy
   );
-  const [proofingEnabled, setProofingEnabled] = useState17(
+  const [proofingEnabled, setProofingEnabled] = useState18(
     typeof frontmatter?.[PROOF_FRONTMATTER_KEYS3.enabled.canonical] === "boolean" ? String(frontmatter[PROOF_FRONTMATTER_KEYS3.enabled.canonical]) : currentProofing === "true" || currentProofing === "false" ? currentProofing : ""
   );
-  const [proofDialect, setProofDialect] = useState17(currentProofDialect);
+  const [proofDialect, setProofDialect] = useState18(currentProofDialect);
   const overlayRef = useRef15(null);
   const dialogRef = useRef15(null);
   const titleRef = useRef15(null);
-  const headingId = useId5();
+  const headingId = useId4();
   useModalDialog({ rootRef: overlayRef, dialogRef, initialFocusRef: titleRef, onClose });
   const handleBackdrop = useCallback13(
     (e2) => {
@@ -9923,7 +10053,7 @@ function searchPickerEntries(query, limit = 80) {
 }
 
 // src/EmojiPicker.tsx
-import { useEffect as useEffect16, useMemo as useMemo14, useRef as useRef16, useState as useState18 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo14, useRef as useRef16, useState as useState19 } from "react";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var LIGHT_PALETTE = {
   bg: "#fff",
@@ -9975,8 +10105,8 @@ function EmojiPicker({
   theme = "light"
 }) {
   const palette = theme === "dark" ? DARK_PALETTE : LIGHT_PALETTE;
-  const [activeCategory, setActiveCategory] = useState18(PICKER_CATEGORIES[0].id);
-  const [query, setQuery] = useState18("");
+  const [activeCategory, setActiveCategory] = useState19(PICKER_CATEGORIES[0].id);
+  const [query, setQuery] = useState19("");
   const popoverRef = useRef16(null);
   useEscapeDismissal(open, onClose, anchorRef);
   const searchInputRef = useRef16(null);
@@ -10162,7 +10292,7 @@ function EmojiPicker({
 }
 
 // src/hooks/useFileDrop.ts
-import { useCallback as useCallback14, useEffect as useEffect17, useRef as useRef17, useState as useState19 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect17, useRef as useRef17, useState as useState20 } from "react";
 var MEDIA_EXTENSIONS = /* @__PURE__ */ new Set([
   "png",
   "apng",
@@ -10244,8 +10374,8 @@ function classifyDataTransferItems(items) {
   return null;
 }
 function useFileDrop({ onDrop, enabled = true }) {
-  const [isDragging, setIsDragging] = useState19(false);
-  const [dragContentType, setDragContentType] = useState19(null);
+  const [isDragging, setIsDragging] = useState20(false);
+  const [dragContentType, setDragContentType] = useState20(null);
   const dragCounterRef = useRef17(0);
   const inPageDragRef = useRef17(false);
   useEffect17(() => {
@@ -10780,7 +10910,7 @@ async function addFileToDocument(file, target, storage) {
 }
 
 // src/videoEmbed/VideoEmbedDialog.tsx
-import { useCallback as useCallback16, useEffect as useEffect18, useId as useId6, useMemo as useMemo16, useRef as useRef18, useState as useState20 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect18, useId as useId5, useMemo as useMemo16, useRef as useRef18, useState as useState21 } from "react";
 import {
   VIDEO_EMBED_PROVIDERS,
   parseVideoEmbedInput as parseVideoEmbedInput2
@@ -10813,14 +10943,14 @@ function VideoEmbedDialog({
   onConfirm,
   onClose
 }) {
-  const [input, setInput] = useState20(initialInput);
-  const [title, setTitle] = useState20(initialTitle);
+  const [input, setInput] = useState21(initialInput);
+  const [title, setTitle] = useState21(initialTitle);
   const titleTouched = useRef18(initialTitle.trim() !== "");
   const inputRef = useRef18(null);
   const overlayRef = useRef18(null);
   const dialogRef = useRef18(null);
-  const headingId = useId6();
-  const statusId = useId6();
+  const headingId = useId5();
+  const statusId = useId5();
   useModalDialog({ rootRef: overlayRef, dialogRef, initialFocusRef: inputRef, onClose });
   const parsed = useMemo16(() => parseVideoEmbedInput2(input), [input]);
   const hasInput = input.trim() !== "";
@@ -11778,12 +11908,12 @@ function MermaidDiagramTypeThumbnail({ preview }) {
 // src/Toolbar.tsx
 import {
   useCallback as useCallback31,
-  useEffect as useEffect28,
-  useLayoutEffect as useLayoutEffect6,
+  useEffect as useEffect29,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo24,
   useReducer as useReducer2,
   useRef as useRef33,
-  useState as useState36
+  useState as useState38
 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS3 } from "@bendyline/squisq/schemas";
 import { DEFAULT_THEME, flattenBlocks } from "@bendyline/squisq/doc";
@@ -12167,7 +12297,7 @@ ${videoTag}` : videoTag);
 }
 
 // src/speech/DictationButton.tsx
-import { useEffect as useEffect19, useRef as useRef19, useState as useState21, useSyncExternalStore } from "react";
+import { useEffect as useEffect19, useRef as useRef19, useState as useState22, useSyncExternalStore } from "react";
 import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var ERROR_AUTO_DISMISS_MS = 1e4;
 var ANNOUNCEMENTS = {
@@ -12219,7 +12349,7 @@ function DictationButtonView({ state }) {
   const { status, error, toggle, dismissError, levels } = state;
   const active = status !== "idle";
   const busy = status === "preparing" || status === "transcribing";
-  const [announcement, setAnnouncement] = useState21("");
+  const [announcement, setAnnouncement] = useState22("");
   const previousStatus = useRef19(status);
   useEffect19(() => {
     if (previousStatus.current === status) return;
@@ -12326,7 +12456,7 @@ function findBlockSliceByHeadingIndex(source, headingIndex) {
 }
 
 // src/LinkDialog.tsx
-import { useCallback as useCallback18, useEffect as useEffect20, useId as useId7, useMemo as useMemo18, useRef as useRef20, useState as useState22 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect20, useId as useId6, useMemo as useMemo18, useRef as useRef20, useState as useState23 } from "react";
 import { sanitizeUrl } from "@bendyline/squisq/markdown";
 import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function schemeForMessage(raw) {
@@ -12342,19 +12472,19 @@ function LinkDialog({
   documentLinkProvider,
   linkSchemes
 }) {
-  const [text, setText] = useState22(initialText);
-  const [url, setUrl] = useState22(initialUrl);
-  const [tab, setTab] = useState22("url");
-  const [docQuery, setDocQuery] = useState22("");
-  const [docResults, setDocResults] = useState22([]);
-  const [docLoading, setDocLoading] = useState22(false);
+  const [text, setText] = useState23(initialText);
+  const [url, setUrl] = useState23(initialUrl);
+  const [tab, setTab] = useState23("url");
+  const [docQuery, setDocQuery] = useState23("");
+  const [docResults, setDocResults] = useState23([]);
+  const [docLoading, setDocLoading] = useState23(false);
   const textRef = useRef20(null);
   const urlRef = useRef20(null);
   const docSearchRef = useRef20(null);
   const overlayRef = useRef20(null);
   const dialogRef = useRef20(null);
-  const headingId = useId7();
-  const urlErrorId = useId7();
+  const headingId = useId6();
+  const urlErrorId = useId6();
   const initialFocusRef = initialText ? urlRef : textRef;
   useModalDialog({ rootRef: overlayRef, dialogRef, initialFocusRef, onClose });
   useEffect20(() => {
@@ -12575,26 +12705,26 @@ function LinkDialog({
 }
 
 // src/customTemplates/CustomLayoutManager.tsx
-import { useCallback as useCallback28, useId as useId11, useRef as useRef31, useState as useState33 } from "react";
-import { createPortal as createPortal10 } from "react-dom";
+import { useCallback as useCallback28, useId as useId10, useRef as useRef31, useState as useState34 } from "react";
+import { createPortal as createPortal11 } from "react-dom";
 
 // src/customTemplates/TemplateDesigner.tsx
-import { useCallback as useCallback27, useId as useId10, useMemo as useMemo23, useRef as useRef30, useState as useState32 } from "react";
-import { createPortal as createPortal9 } from "react-dom";
+import { useCallback as useCallback27, useId as useId9, useMemo as useMemo23, useRef as useRef30, useState as useState33 } from "react";
+import { createPortal as createPortal10 } from "react-dom";
 import { MediaContext as MediaContext3 } from "@bendyline/squisq-react";
 
 // src/scene/Scene.tsx
 import {
   useCallback as useCallback24,
   useEffect as useEffect22,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo20,
   useRef as useRef24,
-  useState as useState26
+  useState as useState27
 } from "react";
 
 // src/scene/hooks/useScenePanZoom.ts
-import { useCallback as useCallback19, useRef as useRef21, useState as useState23 } from "react";
+import { useCallback as useCallback19, useRef as useRef21, useState as useState24 } from "react";
 
 // src/scene/fitScale.ts
 function calculateFitScale(content, container, maxScale = 1) {
@@ -12609,7 +12739,7 @@ var IDENTITY_TRANSFORM = Object.freeze({ tx: 0, ty: 0, scale: 1 });
 var MIN_SCALE = 0.02;
 var MAX_SCALE = 8;
 function useScenePanZoom(initial = IDENTITY_TRANSFORM) {
-  const [transform, setTransformState] = useState23(initial);
+  const [transform, setTransformState] = useState24(initial);
   const ref = useRef21(transform);
   ref.current = transform;
   const setTransform = useCallback19((t) => {
@@ -12678,9 +12808,9 @@ function clamp(n, lo, hi) {
 }
 
 // src/scene/hooks/useSceneSelection.ts
-import { useCallback as useCallback20, useState as useState24 } from "react";
+import { useCallback as useCallback20, useState as useState25 } from "react";
 function useSceneSelection(initial = []) {
-  const [selection, setSelectionState] = useState24(() => new Set(initial));
+  const [selection, setSelectionState] = useState25(() => new Set(initial));
   const setSelection = useCallback20((ids) => {
     setSelectionState(new Set(ids));
   }, []);
@@ -12770,7 +12900,7 @@ function anchorOffsets(anchor, w, h2) {
 }
 
 // src/scene/SceneViewport.tsx
-import { forwardRef, useId as useId8 } from "react";
+import { forwardRef, useId as useId7 } from "react";
 import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var BASE_GRID_STEP = 24;
 var MIN_SCREEN_STEP = 18;
@@ -12796,7 +12926,7 @@ var SceneViewport = forwardRef(function SceneViewport2({
   children
 }, ref) {
   const t = transform;
-  const gridId = `squisq-scene-dot-grid-${useId8().replace(/:/g, "")}`;
+  const gridId = `squisq-scene-dot-grid-${useId7().replace(/:/g, "")}`;
   const grid = dotGrid(t.scale);
   const groupTransform = `translate(${t.tx} ${t.ty}) scale(${t.scale})`;
   return /* @__PURE__ */ jsxs22(
@@ -13086,9 +13216,9 @@ function rectIntersects(a, b) {
 }
 
 // src/scene/text/useSceneTextEditing.ts
-import { useCallback as useCallback22, useRef as useRef22, useState as useState25 } from "react";
+import { useCallback as useCallback22, useRef as useRef22, useState as useState26 } from "react";
 function useSceneTextEditing(config3) {
-  const [editingId, setEditingId] = useState25(null);
+  const [editingId, setEditingId] = useState26(null);
   const activeRef = useRef22(false);
   activeRef.current = editingId != null;
   const begin = useCallback22(
@@ -13287,7 +13417,7 @@ function Scene(props) {
   } = props;
   const layerRenderer = renderLayer ?? defaultRenderLayer;
   const textEdit = useSceneTextEditing(textEditing);
-  const [internalActiveId, setInternalActiveId] = useState26(tools[0]?.id ?? "select");
+  const [internalActiveId, setInternalActiveId] = useState27(tools[0]?.id ?? "select");
   const activeId = controlledActiveId ?? internalActiveId;
   const setActiveTool = useCallback24(
     (id) => {
@@ -13302,7 +13432,7 @@ function Scene(props) {
   );
   const panZoom = useScenePanZoom();
   const { fitBox, zoomAt } = panZoom;
-  const [viewMode, setViewMode] = useState26("fit");
+  const [viewMode, setViewMode] = useState27("fit");
   const selection = useSceneSelection();
   const setSceneSelection = selection.setSelection;
   const { hit } = useSceneHitTest();
@@ -13376,7 +13506,7 @@ function Scene(props) {
     },
     [panZoom]
   );
-  const [, setDragTick] = useState26(0);
+  const [, setDragTick] = useState27(0);
   const pointerActive = useRef24(false);
   const bumpTick = useCallback24(() => setDragTick((t) => t + 1), []);
   const handlePointerDown = useCallback24(
@@ -13488,10 +13618,10 @@ function Scene(props) {
     root.addEventListener("keydown", onKey);
     return () => root.removeEventListener("keydown", onKey);
   }, [tools, activeTool, setActiveTool, textEdit.activeRef, bumpTick]);
-  const [containerSize, setContainerSize] = useState26(
+  const [containerSize, setContainerSize] = useState27(
     null
   );
-  useLayoutEffect4(() => {
+  useLayoutEffect7(() => {
     if (!containerRef.current) return;
     const el = containerRef.current;
     const measure = () => {
@@ -13710,10 +13840,10 @@ import { createElement as createElement6 } from "react";
 import { parsePandocAttrTokens as parsePandocAttrTokens6 } from "@bendyline/squisq/markdown";
 
 // src/scene/SceneBlockWidget.tsx
-import { useEffect as useEffect26, useMemo as useMemo22, useRef as useRef28, useState as useState30 } from "react";
+import { useEffect as useEffect26, useMemo as useMemo22, useRef as useRef28, useState as useState31 } from "react";
 
 // src/scene/adapters/LayoutAdapter.ts
-import { useEffect as useEffect23, useRef as useRef25, useState as useState27 } from "react";
+import { useEffect as useEffect23, useRef as useRef25, useState as useState28 } from "react";
 import { computeLayoutLayers } from "@bendyline/squisq/doc";
 
 // src/scene/adapters/blockLayers.ts
@@ -14052,7 +14182,7 @@ function stripBraces2(s) {
 // src/scene/adapters/LayoutAdapter.ts
 var SCENE_VIEWPORT = { width: 1920, height: 1080 };
 function useLayoutAdapter(editor, headingPos, options = {}) {
-  const [, setVersion] = useState27(0);
+  const [, setVersion] = useState28(0);
   useEffect23(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
@@ -14259,7 +14389,7 @@ function nextLayoutId(editor, parentPos, kind) {
 }
 
 // src/scene/adapters/DrawingAdapter.ts
-import { useCallback as useCallback25, useEffect as useEffect24, useMemo as useMemo21, useRef as useRef26, useState as useState28, createElement as createElement5 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect24, useMemo as useMemo21, useRef as useRef26, useState as useState29, createElement as createElement5 } from "react";
 import { computeDrawingLayout } from "@bendyline/squisq/doc";
 
 // src/scene/tools/PathTool.ts
@@ -14915,7 +15045,7 @@ function createDrawShapeTool(options) {
 }
 
 // src/scene/layers/DiagramEdges.tsx
-import { useId as useId9 } from "react";
+import { useId as useId8 } from "react";
 import { connectorPath, markerPath } from "@bendyline/squisq/doc";
 import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var MARKER_STYLES = ["arrow", "open", "diamond", "circle", "square"];
@@ -14930,7 +15060,7 @@ function DiagramEdges({
   onEdgeClick
 }) {
   const boxById = boxesOf(nodes);
-  const markerPrefix = useId9().replace(/:/g, "");
+  const markerPrefix = useId8().replace(/:/g, "");
   const defaultRouting = variant === "straight" ? "straight" : "curved";
   return /* @__PURE__ */ jsxs26("g", { className: "squisq-scene-edges", children: [
     /* @__PURE__ */ jsx32("defs", { children: ["start", "end"].flatMap(
@@ -15179,7 +15309,7 @@ function headingText(node2) {
 // src/scene/adapters/DrawingAdapter.ts
 var ENDPOINT_HIT_RADIUS = 18;
 function useDrawingAdapter(editor, headingPos, options = {}) {
-  const [, setVersion] = useState28(0);
+  const [, setVersion] = useState29(0);
   useEffect24(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
@@ -15211,7 +15341,7 @@ function useDrawingAdapter(editor, headingPos, options = {}) {
     ...c.dasharray ? { dasharray: c.dasharray } : {},
     routing: c.routing
   }));
-  const [selectedEdgeId, setSelectedEdgeId] = useState28(null);
+  const [selectedEdgeId, setSelectedEdgeId] = useState29(null);
   const pendingKindRef = useRef26("rectangle");
   const setPendingKind = useCallback25((kind) => {
     pendingKindRef.current = kind;
@@ -15621,13 +15751,13 @@ function SceneBlockToolbar({
 }
 
 // src/scene/SceneSideToolbar.tsx
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef27, useState as useState29 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef27, useState as useState30 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var SIDE_TOOLBAR_FIT_PX = 12 + 180 + 4;
 function SceneSideToolbar({ children }) {
   const wrapRef = useRef27(null);
-  const [collapsed, setCollapsed] = useState29(false);
-  useLayoutEffect5(() => {
+  const [collapsed, setCollapsed] = useState30(false);
+  useLayoutEffect8(() => {
     const wrap = wrapRef.current;
     if (!wrap) return;
     const shell = wrap.closest(".squisq-scene-shell");
@@ -15673,7 +15803,7 @@ function SceneSideToolbar({ children }) {
 
 // src/diagram/DiagramMaximizedOverlay.tsx
 import { useEffect as useEffect25 } from "react";
-import { createPortal as createPortal8 } from "react-dom";
+import { createPortal as createPortal9 } from "react-dom";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function DiagramMaximizedOverlay({ host, onClose, children }) {
   useEffect25(() => {
@@ -15690,7 +15820,7 @@ function DiagramMaximizedOverlay({ host, onClose, children }) {
   }, [onClose]);
   const target = host ?? (typeof document !== "undefined" ? document.body : null);
   if (!target) return null;
-  return createPortal8(
+  return createPortal9(
     /* @__PURE__ */ jsx36("div", { className: "squisq-diagram-maximized-overlay", children: /* @__PURE__ */ jsx36("div", { className: "squisq-diagram-maximized-content", children }) }),
     target
   );
@@ -15711,7 +15841,7 @@ function SceneBlockWidget({
   host,
   textChannel
 }) {
-  const [parentPos, setParentPos] = useState30(
+  const [parentPos, setParentPos] = useState31(
     () => findSceneHeadingPos(editor, headingKey, mode) ?? fallbackParentPos
   );
   useEffect26(() => {
@@ -15758,10 +15888,10 @@ function SceneBlockWidget({
     }),
     [isDrawing, textChannel]
   );
-  const [maximized, setMaximized] = useState30(false);
-  const [activeToolId, setActiveToolId] = useState30("select");
-  const [paletteOpen, setPaletteOpen] = useState30(false);
-  const [selectedLayerId, setSelectedLayerId] = useState30(null);
+  const [maximized, setMaximized] = useState31(false);
+  const [activeToolId, setActiveToolId] = useState31("select");
+  const [paletteOpen, setPaletteOpen] = useState31(false);
+  const [selectedLayerId, setSelectedLayerId] = useState31(null);
   const selectedShapeId = isDrawing && selectedLayerId ? shapeIdFromLayerId(selectedLayerId) : null;
   const canvas = /* @__PURE__ */ jsx37(
     Scene,
@@ -16402,9 +16532,9 @@ function buildDiagramScene(nodes, edges) {
 }
 
 // src/customTemplates/useMemoryLayerAdapter.ts
-import { useCallback as useCallback26, useState as useState31 } from "react";
+import { useCallback as useCallback26, useState as useState32 } from "react";
 function useMemoryLayerAdapter(options) {
-  const [layers, setLayers] = useState31(() => options.initial ?? []);
+  const [layers, setLayers] = useState32(() => options.initial ?? []);
   const dispatch = useCallback26((cmd) => {
     setLayers((current) => applyCommand(current, cmd));
   }, []);
@@ -17213,12 +17343,12 @@ function TemplateDesigner({
 }) {
   const overlayRef = useRef30(null);
   const dialogRef = useRef30(null);
-  const titleId = useId10();
+  const titleId = useId9();
   useModalDialog({ rootRef: overlayRef, dialogRef, onClose });
-  const [name, setName] = useState32(initial?.name ?? "");
-  const [label, setLabel] = useState32(initial?.label ?? "");
-  const [description, setDescription] = useState32(initial?.description ?? "");
-  const [nameAutoDerived, setNameAutoDerived] = useState32(!initial?.name);
+  const [name, setName] = useState33(initial?.name ?? "");
+  const [label, setLabel] = useState33(initial?.label ?? "");
+  const [description, setDescription] = useState33(initial?.description ?? "");
+  const [nameAutoDerived, setNameAutoDerived] = useState33(!initial?.name);
   const handleLabelChange = useCallback27(
     (value) => {
       setLabel(value);
@@ -17238,7 +17368,7 @@ function TemplateDesigner({
     },
     [label]
   );
-  const [previewViewportId, setPreviewViewportId] = useState32(
+  const [previewViewportId, setPreviewViewportId] = useState33(
     "landscape"
   );
   const tools = useMemo23(
@@ -17289,7 +17419,7 @@ function TemplateDesigner({
     },
     [adapter, addMediaBackgrounds]
   );
-  const [selectedLayerId, setSelectedLayerId] = useState32(null);
+  const [selectedLayerId, setSelectedLayerId] = useState33(null);
   const selectedLayer = adapter.layers.find((l2) => l2.id === selectedLayerId) ?? null;
   const handleLayerAttr = useCallback27(
     (path, value) => {
@@ -17298,7 +17428,7 @@ function TemplateDesigner({
     },
     [adapter, selectedLayerId]
   );
-  const [activeToolId, setActiveToolId] = useState32("select");
+  const [activeToolId, setActiveToolId] = useState33("select");
   const currentViewport = VIEWPORT_OPTIONS.find((v2) => v2.id === previewViewportId)?.viewport ?? DESIGN_CANVAS;
   const validate = () => {
     const slug = name.trim();
@@ -17465,7 +17595,7 @@ function TemplateDesigner({
     }
   );
   if (embedded) return panel;
-  return createPortal9(
+  return createPortal10(
     /* @__PURE__ */ jsx41(
       "div",
       {
@@ -17489,9 +17619,9 @@ function CustomLayoutManager({ onClose }) {
   const { mediaProvider, colorScheme } = useEditorContext();
   const overlayRef = useRef31(null);
   const dialogRef = useRef31(null);
-  const titleId = useId11();
+  const titleId = useId10();
   useModalDialog({ rootRef: overlayRef, dialogRef, onClose });
-  return createPortal10(
+  return createPortal11(
     /* @__PURE__ */ jsx42(
       "div",
       {
@@ -17552,7 +17682,7 @@ function ManagerContent({
   mediaProvider
 }) {
   const { docTemplates, libraryTemplates, upsertDocTemplate, upsertLibraryTemplate } = ctx;
-  const [selection, setSelection] = useState33(() => {
+  const [selection, setSelection] = useState34(() => {
     if (docTemplates[0]) return { source: "doc", name: docTemplates[0].name };
     if (libraryTemplates[0]) return { source: "library", name: libraryTemplates[0].name };
     return "new";
@@ -17623,10 +17753,10 @@ function ManagerContent({
 }
 
 // src/Toolbar.tsx
-import { createPortal as createPortal11 } from "react-dom";
+import { createPortal as createPortal12 } from "react-dom";
 
 // src/toolbar/EditorViewTabs.tsx
-import { useReducer } from "react";
+import { useEffect as useEffect27, useReducer, useState as useState35 } from "react";
 
 // src/platformShortcuts.ts
 function resolvePlatform(explicitPlatform) {
@@ -17638,6 +17768,20 @@ function platformShortcut(key, platform) {
   return /Mac|iPhone|iPad|iPod/i.test(resolvePlatform(platform)) ? `\u2318${key.replace("Shift+", "\u21E7")}` : `Ctrl+${key}`;
 }
 
+// src/viewTabKeyboard.ts
+function navigateViewTabs(event) {
+  if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return null;
+  const tabs = [
+    ...event.currentTarget.closest('[role="tablist"]')?.querySelectorAll('[role="tab"]') ?? []
+  ];
+  if (!tabs.length) return null;
+  event.preventDefault();
+  const current = tabs.indexOf(event.currentTarget);
+  const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (current + (event.key === "ArrowLeft" ? -1 : 1) + tabs.length) % tabs.length;
+  tabs[next]?.focus();
+  return next;
+}
+
 // src/toolbar/EditorViewTabs.tsx
 import { Fragment as Fragment13, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 var VIEWS = [
@@ -17650,6 +17794,8 @@ function EditorViewTabs({
   hostMode
 }) {
   const { editorMode, activeView, setActiveView } = useEditorContext();
+  const [focusedView, setFocusedView] = useState35(activeView);
+  useEffect27(() => setFocusedView(activeView), [activeView]);
   const previewSettings = usePreviewSettingsOptional();
   const [useModeMenuRequest, requestUseModeMenu] = useReducer((count) => count + 1, 0);
   const visibleViews = VIEWS.filter((v2) => {
@@ -17659,59 +17805,71 @@ function EditorViewTabs({
     return true;
   });
   const showViewTabs = visibleViews.length > 1;
-  return /* @__PURE__ */ jsx43(Fragment13, { children: showViewTabs && /* @__PURE__ */ jsx43("div", { className: "squisq-toolbar-view-tabs", role: "tablist", "aria-label": "Editor view", children: visibleViews.map((view) => {
-    const viewLabel = view.id === "preview" && previewSettings ? displayModeLabel(previewSettings.activeDisplayMode) : view.label;
-    const tab = /* @__PURE__ */ jsxs34(
-      "button",
-      {
-        role: "tab",
-        "data-view": view.id,
-        "aria-selected": activeView === view.id,
-        className: `squisq-toolbar-view-tab${activeView === view.id ? " squisq-toolbar-view-tab--active" : ""}`,
-        onClick: () => {
-          if (view.id === "preview" && activeView === "preview" && previewSettings) {
-            requestUseModeMenu();
-            return;
-          }
-          setActiveView(view.id);
-        },
-        "data-tooltip": `${viewLabel} (${platformShortcut(`Shift+${view.shortcutKey}`)})`,
-        children: [
-          /* @__PURE__ */ jsx43(
-            "span",
-            {
-              className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--long",
-              "data-label": viewLabel,
-              children: viewLabel
-            }
-          ),
-          view.shortLabel && view.shortLabel !== view.label && /* @__PURE__ */ jsx43(
-            "span",
-            {
-              className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short",
-              "data-label": view.shortLabel,
-              children: view.shortLabel
+  return /* @__PURE__ */ jsx43(Fragment13, { children: showViewTabs && /* @__PURE__ */ jsxs34("div", { className: "squisq-toolbar-view-tabs", children: [
+    /* @__PURE__ */ jsx43("div", { className: "squisq-toolbar-view-tab-list", role: "tablist", "aria-label": "Editor view", children: visibleViews.map((view) => {
+      const viewLabel = view.id === "preview" && previewSettings ? displayModeLabel(previewSettings.activeDisplayMode) : view.label;
+      const tab = /* @__PURE__ */ jsxs34(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          tabIndex: focusedView === view.id ? 0 : -1,
+          onFocus: () => setFocusedView(view.id),
+          "data-view": view.id,
+          "aria-selected": activeView === view.id,
+          onKeyDown: (event) => {
+            navigateViewTabs(event);
+          },
+          className: `squisq-toolbar-view-tab${activeView === view.id ? " squisq-toolbar-view-tab--active" : ""}`,
+          onClick: () => {
+            if (view.id === "preview" && activeView === "preview" && previewSettings) {
+              requestUseModeMenu();
+              return;
             }
-          )
-        ]
+            setActiveView(view.id);
+          },
+          "data-tooltip": `${viewLabel} (${platformShortcut(`Shift+${view.shortcutKey}`)})`,
+          children: [
+            /* @__PURE__ */ jsx43(
+              "span",
+              {
+                className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--long",
+                "data-label": viewLabel,
+                children: viewLabel
+              }
+            ),
+            view.shortLabel && view.shortLabel !== view.label && /* @__PURE__ */ jsx43(
+              "span",
+              {
+                className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short",
+                "data-label": view.shortLabel,
+                children: view.shortLabel
+              }
+            )
+          ]
+        }
+      );
+      if (view.id !== "preview" || !previewSettings) {
+        return /* @__PURE__ */ jsx43("div", { className: "squisq-toolbar-view-tab-wrap", role: "presentation", children: tab }, view.id);
       }
-    );
-    if (view.id !== "preview" || !previewSettings) {
-      return /* @__PURE__ */ jsx43("div", { className: "squisq-toolbar-view-tab-wrap", role: "presentation", children: tab }, view.id);
-    }
-    return /* @__PURE__ */ jsxs34(
+      return /* @__PURE__ */ jsx43(
+        "div",
+        {
+          className: `squisq-toolbar-view-tab-wrap squisq-toolbar-use-tab${activeView === "preview" ? " squisq-toolbar-use-tab--active" : ""}`,
+          role: "presentation",
+          children: tab
+        },
+        view.id
+      );
+    }) }),
+    previewSettings && visibleViews.some((view) => view.id === "preview") && /* @__PURE__ */ jsx43(
       "div",
       {
-        className: `squisq-toolbar-view-tab-wrap squisq-toolbar-use-tab${activeView === "preview" ? " squisq-toolbar-use-tab--active" : ""}`,
-        role: "presentation",
-        children: [
-          tab,
-          /* @__PURE__ */ jsx43(PreviewModeMenu, { openRequest: useModeMenuRequest })
-        ]
-      },
-      view.id
-    );
-  }) }) });
+        className: `squisq-toolbar-use-menu${activeView === "preview" ? " squisq-toolbar-use-tab--active" : ""}`,
+        children: /* @__PURE__ */ jsx43(PreviewModeMenu, { openRequest: useModeMenuRequest })
+      }
+    )
+  ] }) });
 }
 
 // src/mediaEntries.ts
@@ -17735,7 +17893,7 @@ function filterVisibleMediaEntries(entries) {
 }
 
 // src/videoEmbed/useVideoEmbedDialog.tsx
-import { useCallback as useCallback29, useState as useState34 } from "react";
+import { useCallback as useCallback29, useState as useState36 } from "react";
 import { findBlockVideoEmbed, parseMarkdown as parseMarkdown4 } from "@bendyline/squisq/markdown";
 import { jsx as jsx44 } from "react/jsx-runtime";
 function isBlank(line) {
@@ -17774,7 +17932,7 @@ function videoEmbedAtCaret(activeView, tiptapEditor, monacoEditor) {
 }
 function useVideoEmbedDialog() {
   const { activeView, tiptapEditor, monacoEditor, insertAtCursor } = useEditorContext();
-  const [state, setState3] = useState34(null);
+  const [state, setState3] = useState36(null);
   const open = useCallback29(() => {
     setState3(
       videoEmbedAtCaret(activeView, tiptapEditor, monacoEditor) ?? {
@@ -17934,7 +18092,7 @@ function selectionToTaskListMarkdown(text) {
 }
 
 // src/find/FindToolbar.tsx
-import { useCallback as useCallback30, useEffect as useEffect27, useId as useId12, useRef as useRef32, useState as useState35 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect28, useId as useId11, useRef as useRef32, useState as useState37 } from "react";
 
 // src/find/FindHighlightExtension.ts
 import { Extension as Extension3 } from "@tiptap/core";
@@ -18100,18 +18258,18 @@ function FindToolbar({
   focusRequest = 0
 }) {
   const { activeView, markdownSource, tiptapEditor, monacoEditor, findRequest } = useEditorContext();
-  const [initial] = useState35(
+  const [initial] = useState37(
     () => initialFindState(findRequest, activeView, tiptapEditor, monacoEditor)
   );
-  const [query, setQuery] = useState35(initial.query);
-  const [matchCase, setMatchCase] = useState35(initial.matchCase ?? false);
-  const [wholeWord, setWholeWord] = useState35(initial.wholeWord ?? false);
-  const [selectedIndex, setSelectedIndex] = useState35(initial.occurrence ?? 0);
-  const [matchCount, setMatchCount] = useState35(0);
-  const [replacement, setReplacement] = useState35("");
+  const [query, setQuery] = useState37(initial.query);
+  const [matchCase, setMatchCase] = useState37(initial.matchCase ?? false);
+  const [wholeWord, setWholeWord] = useState37(initial.wholeWord ?? false);
+  const [selectedIndex, setSelectedIndex] = useState37(initial.occurrence ?? 0);
+  const [matchCount, setMatchCount] = useState37(0);
+  const [replacement, setReplacement] = useState37("");
   const inputRef = useRef32(null);
   const replaceInputRef = useRef32(null);
-  const reactId = useId12().replace(/[^a-zA-Z0-9_-]/g, "");
+  const reactId = useId11().replace(/[^a-zA-Z0-9_-]/g, "");
   const previewHighlightName = `squisq-find-${reactId}`;
   const previewSelectedName = `${previewHighlightName}-selected`;
   const canReplace = allowReplace && activeView !== "preview";
@@ -18119,15 +18277,15 @@ function FindToolbar({
   const options = { matchCase, wholeWord };
   const lastNavigationRef = useRef32("");
   const pendingRevealRef = useRef32(false);
-  useEffect27(() => {
+  useEffect28(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, [focusRequest]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (showReplace) replaceInputRef.current?.focus();
   }, [showReplace, focusRequest]);
   const appliedRequestRef = useRef32(findRequest);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!findRequest || findRequest === appliedRequestRef.current) return;
     appliedRequestRef.current = findRequest;
     setQuery(findRequest.query);
@@ -18135,14 +18293,14 @@ function FindToolbar({
     setWholeWord(findRequest.wholeWord ?? false);
     setSelectedIndex(findRequest.occurrence ?? 0);
   }, [findRequest]);
-  useEffect27(() => {
+  useEffect28(() => {
     const style = document.createElement("style");
     style.dataset.squisqFindHighlight = reactId;
     style.textContent = `::highlight(${previewHighlightName}) { background: var(--squisq-find-match, #fde68a); color: inherit; } ::highlight(${previewSelectedName}) { background: var(--squisq-find-match-current, #f59e0b); color: var(--squisq-find-match-text, #111827); }`;
     document.head.append(style);
     return () => style.remove();
   }, [previewHighlightName, previewSelectedName, reactId]);
-  useEffect27(() => {
+  useEffect28(() => {
     let cleanup = () => {
     };
     let count = 0;
@@ -19363,15 +19521,15 @@ function Toolbar({
     insertAtCursor
   } = useEditorContext();
   const previewSettings = usePreviewSettingsOptional();
-  const [recorderOpen, setRecorderOpen] = useState36(false);
-  const [docNarrationOpen, setDocNarrationOpen] = useState36(false);
+  const [recorderOpen, setRecorderOpen] = useState38(false);
+  const [docNarrationOpen, setDocNarrationOpen] = useState38(false);
   const formattingEditor = activeSceneText?.editor ?? tiptapEditor;
   const sceneTextLevel = activeSceneText?.level ?? null;
   const isCodeMode = editorMode === "code";
   const showDocumentChrome = !isCodeMode && hostMode !== "chat";
-  const [scannedFileCount, setScannedFileCount] = useState36(0);
+  const [scannedFileCount, setScannedFileCount] = useState38(0);
   const resolvedFileCount = fileCount ?? scannedFileCount;
-  useEffect28(() => {
+  useEffect29(() => {
     if (fileCount !== void 0) return;
     if (!mediaProvider) {
       setScannedFileCount(0);
@@ -19392,10 +19550,10 @@ function Toolbar({
   }, [fileCount, mediaProvider, mediaRevision, showFiles]);
   const imageInputRef = useRef33(null);
   const fileInputRef = useRef33(null);
-  const [linkDialog, setLinkDialog] = useState36(null);
+  const [linkDialog, setLinkDialog] = useState38(null);
   const { open: openVideoEmbedDialog, element: videoEmbedDialog } = useVideoEmbedDialog();
   const emojiButtonRef = useRef33(null);
-  const [emojiPickerAnchor, setEmojiPickerAnchor] = useState36(null);
+  const [emojiPickerAnchor, setEmojiPickerAnchor] = useState38(null);
   const openEmojiPicker = useCallback31(() => {
     const btn = emojiButtonRef.current;
     if (!btn) return;
@@ -19424,10 +19582,10 @@ function Toolbar({
   const mermaidTypeMenuRef = useRef33(null);
   const chartTypeMenuRef = useRef33(null);
   const insertMenuTriggerRectRef = useRef33(null);
-  const [insertMenuAnchor, setInsertMenuAnchor] = useState36(null);
-  const [codeSnippetMenuAnchor, setCodeSnippetMenuAnchor] = useState36(null);
-  const [mermaidTypeMenuAnchor, setMermaidTypeMenuAnchor] = useState36(null);
-  const [chartTypeMenuAnchor, setChartTypeMenuAnchor] = useState36(null);
+  const [insertMenuAnchor, setInsertMenuAnchor] = useState38(null);
+  const [codeSnippetMenuAnchor, setCodeSnippetMenuAnchor] = useState38(null);
+  const [mermaidTypeMenuAnchor, setMermaidTypeMenuAnchor] = useState38(null);
+  const [chartTypeMenuAnchor, setChartTypeMenuAnchor] = useState38(null);
   const openInsertMenu = useCallback31((trigger) => {
     const btn = trigger ?? insertMenuButtonRef.current;
     if (!btn) return;
@@ -19502,30 +19660,36 @@ function Toolbar({
     setChartTypeMenuAnchor(null);
   }, []);
   const actionsRef = useRef33(null);
-  const [collapsedKey, setCollapsedKey] = useState36("");
-  const [clippedContextualKey, setClippedContextualKey] = useState36("");
+  const [collapsedKey, setCollapsedKey] = useState38("");
+  const [clippedContextualKey, setClippedContextualKey] = useState38("");
   const itemWidthsRef = useRef33(/* @__PURE__ */ new Map());
   const chromeOnLaneRowRef = useRef33(/* @__PURE__ */ new Map());
   const collapsedCountRef = useRef33(0);
-  const [showOverflow, setShowOverflow] = useState36(false);
+  const [showOverflow, setShowOverflow] = useState38(false);
   const overflowRef = useRef33(null);
+  const overflowMenuRef = useRef33(null);
+  const overflowStyle = useAnchoredPopover(showOverflow, overflowTriggerRef, overflowMenuRef);
+  useLayoutEffect9(() => {
+    if (showOverflow && overflowStyle.visibility === "visible")
+      overflowMenuRef.current?.querySelector("button:not(:disabled)")?.focus();
+  }, [showOverflow, overflowStyle.visibility]);
   useEscapeDismissal(showOverflow, () => setShowOverflow(false), overflowTriggerRef);
   useEscapeDismissal(insertMenuAnchor !== null, closeInsertMenu, insertMenuReturnFocusRef);
-  const [showDocSettings, setShowDocSettings] = useState36(false);
-  const [showLayoutManager, setShowLayoutManager] = useState36(false);
-  useEffect28(() => {
+  const [showDocSettings, setShowDocSettings] = useState38(false);
+  const [showLayoutManager, setShowLayoutManager] = useState38(false);
+  useEffect29(() => {
     if (!findMode) return;
     setShowOverflow(false);
     closeInsertMenu();
     closeEmojiPicker();
   }, [closeEmojiPicker, closeInsertMenu, findMode]);
   const toolbarRootRef = useRef33(null);
-  const [replaceOpen, setReplaceOpen] = useState36(false);
-  const [findFocusRequest, setFindFocusRequest] = useState36(0);
-  useEffect28(() => {
+  const [replaceOpen, setReplaceOpen] = useState38(false);
+  const [findFocusRequest, setFindFocusRequest] = useState38(0);
+  useEffect29(() => {
     if (!findMode) setReplaceOpen(false);
   }, [findMode]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!findShortcut || editorMode === "image") return;
     const apple = isApplePlatform();
     const onKeyDown = (event) => {
@@ -19550,7 +19714,7 @@ function Toolbar({
   const clippedContextual = new Set(
     actionsLaneShown && clippedContextualKey ? clippedContextualKey.split("|") : []
   );
-  useEffect28(() => {
+  useEffect29(() => {
     const container = actionsRef.current;
     if (!container) return;
     const toolbar = container.parentElement;
@@ -19655,11 +19819,12 @@ function Toolbar({
       mo.disconnect();
     };
   }, [activeView, actionsLaneShown]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!showOverflow) return;
     const handleClick = (e2) => {
       const target = e2.target;
-      if (overflowRef.current?.contains(target)) return;
+      if (overflowRef.current?.contains(target) || overflowMenuRef.current?.contains(target))
+        return;
       if (target instanceof Element && target.closest(`${TEMPLATE_GALLERY_PORTAL_SELECTOR}, #${TRANSITION_FLYOUT_PORTAL_ID}`)) {
         return;
       }
@@ -19668,7 +19833,7 @@ function Toolbar({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [showOverflow]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!insertMenuAnchor) return;
     const handleClick = (e2) => {
       if (insertMenuButtonRef.current?.contains(e2.target)) return;
@@ -19682,7 +19847,7 @@ function Toolbar({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [insertMenuAnchor, closeInsertMenu]);
   const insertMenuOpen = insertMenuAnchor !== null;
-  useLayoutEffect6(() => {
+  useLayoutEffect9(() => {
     if (!insertMenuOpen) return;
     const menu = insertMenuRef.current;
     const triggerRect = insertMenuTriggerRectRef.current;
@@ -19703,25 +19868,8 @@ function Toolbar({
       return { ...current, top, maxHeight, placement };
     });
   }, [insertMenuOpen]);
-  const [overflowPlacement, setOverflowPlacement] = useState36("down");
-  useEffect28(() => {
-    if (!showOverflow || !overflowRef.current) return;
-    const trigger = overflowRef.current.querySelector(
-      ".squisq-toolbar-overflow-trigger"
-    );
-    if (!trigger) return;
-    const rect = trigger.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    const ESTIMATED_MENU_HEIGHT = 260;
-    if (spaceBelow < ESTIMATED_MENU_HEIGHT && spaceAbove > spaceBelow) {
-      setOverflowPlacement("up");
-    } else {
-      setOverflowPlacement("down");
-    }
-  }, [showOverflow]);
   const [, forceUpdate] = useReducer2((c) => c + 1, 0);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!formattingEditor) return;
     formattingEditor.on("transaction", forceUpdate);
     return () => {
@@ -20326,7 +20474,7 @@ ${TASK_LIST_MARKDOWN}
     },
     [activeView, tiptapEditor, monacoEditor, markdownSource, setMarkdownSource, closeEmojiPicker]
   );
-  useEffect28(() => {
+  useEffect29(() => {
     const onKeyDown = (e2) => {
       if (!(e2.ctrlKey || e2.metaKey) || e2.altKey || e2.shiftKey) return;
       if (e2.key.toLowerCase() !== "k") return;
@@ -20416,8 +20564,8 @@ ${TASK_LIST_MARKDOWN}
     "emoji"
   ]);
   const BLOCK_SCENE_BUTTONS = /* @__PURE__ */ new Set([...INLINE_SCENE_BUTTONS, "ul", "ol", "quote", "codeblock"]);
-  const [dataCardFocused, setDataCardFocused] = useState36(false);
-  useEffect28(() => {
+  const [dataCardFocused, setDataCardFocused] = useState38(false);
+  useEffect29(() => {
     let timer = null;
     const update = () => {
       if (timer !== null) clearTimeout(timer);
@@ -20476,10 +20624,10 @@ ${TASK_LIST_MARKDOWN}
   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] = useState36(null);
-  const [rawHeadingLine, setRawHeadingLine] = useState36(null);
-  const [rawTransition, setRawTransition] = useState36(EMPTY_TRANSITION);
-  useEffect28(() => {
+  const [rawTemplate, setRawTemplate] = useState38(null);
+  const [rawHeadingLine, setRawHeadingLine] = useState38(null);
+  const [rawTransition, setRawTransition] = useState38(EMPTY_TRANSITION);
+  useEffect29(() => {
     if (!isRawView || !monacoEditor) {
       setRawTemplate(null);
       setRawHeadingLine(null);
@@ -20528,8 +20676,8 @@ ${TASK_LIST_MARKDOWN}
       contentSub.dispose();
     };
   }, [isRawView, monacoEditor]);
-  const [wysiwygHeadingIndex, setWysiwygHeadingIndex] = useState36(null);
-  useEffect28(() => {
+  const [wysiwygHeadingIndex, setWysiwygHeadingIndex] = useState38(null);
+  useEffect29(() => {
     if (!isWysiwyg || !tiptapEditor) {
       setWysiwygHeadingIndex(null);
       return;
@@ -21052,193 +21200,199 @@ ${TASK_LIST_MARKDOWN}
               children: "\xB7\xB7\xB7"
             }
           ),
-          showOverflow && /* @__PURE__ */ jsxs37(
-            "div",
-            {
-              className: `squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`,
-              children: [
-                collapsedFormatButtons.map((btn) => {
-                  const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
-                  const disabled = FILE_STORING_BUTTONS.has(btn.id) && !mediaProvider || !buttonAllowed(btn.id);
-                  return /* @__PURE__ */ jsxs37(
+          showOverflow && createPortal12(
+            /* @__PURE__ */ jsxs37(
+              "div",
+              {
+                ref: overflowMenuRef,
+                className: "squisq-toolbar-overflow-menu",
+                "data-theme": colorScheme,
+                style: overflowStyle,
+                children: [
+                  collapsedFormatButtons.map((btn) => {
+                    const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
+                    const disabled = FILE_STORING_BUTTONS.has(btn.id) && !mediaProvider || !buttonAllowed(btn.id);
+                    return /* @__PURE__ */ jsxs37(
+                      "button",
+                      {
+                        ref: btn.id === "emoji" ? emojiButtonRef : void 0,
+                        className: `squisq-toolbar-overflow-item${active ? " squisq-toolbar-overflow-item--active" : ""}`,
+                        onClick: () => {
+                          handleAction(btn.id);
+                          if (btn.id !== "emoji") setShowOverflow(false);
+                        },
+                        disabled,
+                        children: [
+                          /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: buttonIcon(btn) }),
+                          /* @__PURE__ */ jsx48("span", { children: btn.title })
+                        ]
+                      },
+                      btn.id
+                    );
+                  }),
+                  showInsertInOverflow && /* @__PURE__ */ jsxs37(
                     "button",
                     {
-                      ref: btn.id === "emoji" ? emojiButtonRef : void 0,
-                      className: `squisq-toolbar-overflow-item${active ? " squisq-toolbar-overflow-item--active" : ""}`,
-                      onClick: () => {
-                        handleAction(btn.id);
-                        if (btn.id !== "emoji") setShowOverflow(false);
+                      className: `squisq-toolbar-overflow-item${insertMenuAnchor ? " squisq-toolbar-overflow-item--active" : ""}`,
+                      onClick: (event) => {
+                        if (insertMenuAnchor) {
+                          closeInsertMenu();
+                        } else {
+                          openInsertMenu(event.currentTarget);
+                        }
+                        setShowOverflow(false);
                       },
-                      disabled,
+                      "aria-haspopup": "menu",
+                      "aria-expanded": insertMenuAnchor !== null,
                       children: [
-                        /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: buttonIcon(btn) }),
-                        /* @__PURE__ */ jsx48("span", { children: btn.title })
+                        /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-plus" }) }),
+                        /* @__PURE__ */ jsx48("span", { children: "Insert..." })
                       ]
-                    },
-                    btn.id
-                  );
-                }),
-                showInsertInOverflow && /* @__PURE__ */ jsxs37(
-                  "button",
-                  {
-                    className: `squisq-toolbar-overflow-item${insertMenuAnchor ? " squisq-toolbar-overflow-item--active" : ""}`,
-                    onClick: (event) => {
-                      if (insertMenuAnchor) {
-                        closeInsertMenu();
-                      } else {
-                        openInsertMenu(event.currentTarget);
-                      }
-                      setShowOverflow(false);
-                    },
-                    "aria-haspopup": "menu",
-                    "aria-expanded": insertMenuAnchor !== null,
-                    children: [
-                      /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-plus" }) }),
-                      /* @__PURE__ */ jsx48("span", { children: "Insert..." })
-                    ]
-                  }
-                ),
-                collapsedChrome.length > 0 && (collapsedFormatButtons.length > 0 || showInsertInOverflow) && /* @__PURE__ */ jsx48(
-                  "div",
-                  {
-                    className: "squisq-toolbar-separator",
-                    style: { margin: "4px 0", width: "100%", height: 1 }
-                  }
-                ),
-                collapsedChrome.includes("layouts") && /* @__PURE__ */ jsxs37(
-                  "button",
-                  {
-                    className: "squisq-toolbar-overflow-item",
-                    onClick: () => {
-                      setShowLayoutManager(true);
-                      setShowOverflow(false);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-shapes" }) }),
-                      /* @__PURE__ */ jsx48("span", { children: "Custom layouts" })
-                    ]
-                  }
-                ),
-                collapsedChrome.includes("docSettings") && /* @__PURE__ */ jsxs37(
-                  "button",
-                  {
-                    className: "squisq-toolbar-overflow-item",
-                    onClick: () => {
-                      setShowDocSettings(true);
-                      setShowOverflow(false);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-file-lines" }) }),
-                      /* @__PURE__ */ jsx48("span", { children: "Document settings" })
-                    ]
-                  }
-                ),
-                collapsedChrome.includes("files") && onToggleFiles && /* @__PURE__ */ jsxs37(
-                  "button",
-                  {
-                    className: `squisq-toolbar-overflow-item${showFiles ? " squisq-toolbar-overflow-item--active" : ""}`,
-                    "aria-pressed": showFiles,
-                    onClick: () => {
-                      onToggleFiles();
-                      setShowOverflow(false);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-paperclip" }) }),
-                      /* @__PURE__ */ jsxs37("span", { children: [
-                        showFiles ? "Hide" : "Show",
-                        " Files panel",
-                        resolvedFileCount > 0 ? ` (${fileCountLabel(resolvedFileCount)})` : ""
-                      ] })
-                    ]
-                  }
-                ),
-                showBlockSectionInOverflow && /* @__PURE__ */ jsxs37(Fragment17, { children: [
-                  /* @__PURE__ */ jsx48(
-                    "div",
-                    {
-                      className: "squisq-toolbar-separator",
-                      style: { margin: "4px 0", width: "100%", height: 1 }
                     }
                   ),
-                  /* @__PURE__ */ jsxs37("div", { className: "squisq-toolbar-overflow-heading", children: [
-                    overflowBlockLabel,
-                    " Block:"
-                  ] })
-                ] }),
-                showTemplateInOverflow && /* @__PURE__ */ jsx48("div", { className: "squisq-toolbar-overflow-item squisq-toolbar-overflow-template", children: /* @__PURE__ */ jsx48(
-                  TemplatePicker,
-                  {
-                    value: currentTemplate,
-                    onChange: (v2) => {
-                      handleTemplatePick(v2);
-                      setShowOverflow(false);
-                    },
-                    colorScheme,
-                    recommended: recommendedTemplates,
-                    previewSource: templatePreviewSource
-                  }
-                ) }),
-                showTransitionInOverflow && /* @__PURE__ */ jsx48("div", { className: "squisq-toolbar-overflow-item squisq-toolbar-overflow-template", children: /* @__PURE__ */ jsx48(
-                  TransitionPicker,
-                  {
-                    value: currentTransition,
-                    onChange: handleTransitionPick,
-                    colorScheme,
-                    accentColor: previewSettings?.activeTheme.colors.primary
-                  }
-                ) }),
-                showFormattingControls && isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs37(Fragment17, { children: [
-                  /* @__PURE__ */ jsx48(
+                  collapsedChrome.length > 0 && (collapsedFormatButtons.length > 0 || showInsertInOverflow) && /* @__PURE__ */ jsx48(
                     "div",
                     {
                       className: "squisq-toolbar-separator",
                       style: { margin: "4px 0", width: "100%", height: 1 }
                     }
                   ),
-                  [
-                    {
-                      label: "Add column before",
-                      action: () => tiptapEditor.chain().focus().addColumnBefore().run()
-                    },
-                    {
-                      label: "Add column after",
-                      action: () => tiptapEditor.chain().focus().addColumnAfter().run()
-                    },
-                    {
-                      label: "Delete column",
-                      action: () => tiptapEditor.chain().focus().deleteColumn().run()
-                    },
-                    {
-                      label: "Add row above",
-                      action: () => tiptapEditor.chain().focus().addRowBefore().run()
-                    },
-                    {
-                      label: "Add row below",
-                      action: () => tiptapEditor.chain().focus().addRowAfter().run()
-                    },
+                  collapsedChrome.includes("layouts") && /* @__PURE__ */ jsxs37(
+                    "button",
                     {
-                      label: "Delete row",
-                      action: () => tiptapEditor.chain().focus().deleteRow().run()
-                    },
+                      className: "squisq-toolbar-overflow-item",
+                      onClick: () => {
+                        setShowLayoutManager(true);
+                        setShowOverflow(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-shapes" }) }),
+                        /* @__PURE__ */ jsx48("span", { children: "Custom layouts" })
+                      ]
+                    }
+                  ),
+                  collapsedChrome.includes("docSettings") && /* @__PURE__ */ jsxs37(
+                    "button",
                     {
-                      label: "Delete table",
-                      action: () => tiptapEditor.chain().focus().deleteTable().run()
+                      className: "squisq-toolbar-overflow-item",
+                      onClick: () => {
+                        setShowDocSettings(true);
+                        setShowOverflow(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-file-lines" }) }),
+                        /* @__PURE__ */ jsx48("span", { children: "Document settings" })
+                      ]
                     }
-                  ].map((item) => /* @__PURE__ */ jsx48(
+                  ),
+                  collapsedChrome.includes("files") && onToggleFiles && /* @__PURE__ */ jsxs37(
                     "button",
                     {
-                      className: `squisq-toolbar-overflow-item${item.label.startsWith("Delete") ? " squisq-toolbar-overflow-item--danger" : ""}`,
+                      className: `squisq-toolbar-overflow-item${showFiles ? " squisq-toolbar-overflow-item--active" : ""}`,
+                      "aria-pressed": showFiles,
                       onClick: () => {
-                        item.action();
+                        onToggleFiles();
                         setShowOverflow(false);
                       },
-                      children: /* @__PURE__ */ jsx48("span", { children: item.label })
-                    },
-                    item.label
-                  ))
-                ] })
-              ]
-            }
+                      children: [
+                        /* @__PURE__ */ jsx48("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx48(Icon, { icon: "fa-solid fa-paperclip" }) }),
+                        /* @__PURE__ */ jsxs37("span", { children: [
+                          showFiles ? "Hide" : "Show",
+                          " Files panel",
+                          resolvedFileCount > 0 ? ` (${fileCountLabel(resolvedFileCount)})` : ""
+                        ] })
+                      ]
+                    }
+                  ),
+                  showBlockSectionInOverflow && /* @__PURE__ */ jsxs37(Fragment17, { children: [
+                    /* @__PURE__ */ jsx48(
+                      "div",
+                      {
+                        className: "squisq-toolbar-separator",
+                        style: { margin: "4px 0", width: "100%", height: 1 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs37("div", { className: "squisq-toolbar-overflow-heading", children: [
+                      overflowBlockLabel,
+                      " Block:"
+                    ] })
+                  ] }),
+                  showTemplateInOverflow && /* @__PURE__ */ jsx48("div", { className: "squisq-toolbar-overflow-item squisq-toolbar-overflow-template", children: /* @__PURE__ */ jsx48(
+                    TemplatePicker,
+                    {
+                      value: currentTemplate,
+                      onChange: (v2) => {
+                        handleTemplatePick(v2);
+                        setShowOverflow(false);
+                      },
+                      colorScheme,
+                      recommended: recommendedTemplates,
+                      previewSource: templatePreviewSource
+                    }
+                  ) }),
+                  showTransitionInOverflow && /* @__PURE__ */ jsx48("div", { className: "squisq-toolbar-overflow-item squisq-toolbar-overflow-template", children: /* @__PURE__ */ jsx48(
+                    TransitionPicker,
+                    {
+                      value: currentTransition,
+                      onChange: handleTransitionPick,
+                      colorScheme,
+                      accentColor: previewSettings?.activeTheme.colors.primary
+                    }
+                  ) }),
+                  showFormattingControls && isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs37(Fragment17, { children: [
+                    /* @__PURE__ */ jsx48(
+                      "div",
+                      {
+                        className: "squisq-toolbar-separator",
+                        style: { margin: "4px 0", width: "100%", height: 1 }
+                      }
+                    ),
+                    [
+                      {
+                        label: "Add column before",
+                        action: () => tiptapEditor.chain().focus().addColumnBefore().run()
+                      },
+                      {
+                        label: "Add column after",
+                        action: () => tiptapEditor.chain().focus().addColumnAfter().run()
+                      },
+                      {
+                        label: "Delete column",
+                        action: () => tiptapEditor.chain().focus().deleteColumn().run()
+                      },
+                      {
+                        label: "Add row above",
+                        action: () => tiptapEditor.chain().focus().addRowBefore().run()
+                      },
+                      {
+                        label: "Add row below",
+                        action: () => tiptapEditor.chain().focus().addRowAfter().run()
+                      },
+                      {
+                        label: "Delete row",
+                        action: () => tiptapEditor.chain().focus().deleteRow().run()
+                      },
+                      {
+                        label: "Delete table",
+                        action: () => tiptapEditor.chain().focus().deleteTable().run()
+                      }
+                    ].map((item) => /* @__PURE__ */ jsx48(
+                      "button",
+                      {
+                        className: `squisq-toolbar-overflow-item${item.label.startsWith("Delete") ? " squisq-toolbar-overflow-item--danger" : ""}`,
+                        onClick: () => {
+                          item.action();
+                          setShowOverflow(false);
+                        },
+                        children: /* @__PURE__ */ jsx48("span", { children: item.label })
+                      },
+                      item.label
+                    ))
+                  ] })
+                ]
+              }
+            ),
+            overflowTriggerRef.current?.closest('[role="dialog"][aria-modal="true"]') ?? document.body
           )
         ] }),
         !findMode && slotAfterActions,
@@ -21326,7 +21480,7 @@ ${TASK_LIST_MARKDOWN}
           }
         ),
         videoEmbedDialog,
-        insertMenuAnchor && createPortal11(
+        insertMenuAnchor && createPortal12(
           /* @__PURE__ */ jsxs37(
             "div",
             {
@@ -21472,7 +21626,7 @@ ${TASK_LIST_MARKDOWN}
           ),
           document.body
         ),
-        mermaidTypeMenuAnchor && createPortal11(
+        mermaidTypeMenuAnchor && createPortal12(
           /* @__PURE__ */ jsxs37(
             "div",
             {
@@ -21522,7 +21676,7 @@ ${TASK_LIST_MARKDOWN}
           ),
           document.body
         ),
-        chartTypeMenuAnchor && createPortal11(
+        chartTypeMenuAnchor && createPortal12(
           /* @__PURE__ */ jsxs37(
             "div",
             {
@@ -21565,7 +21719,7 @@ ${TASK_LIST_MARKDOWN}
           ),
           document.body
         ),
-        codeSnippetMenuAnchor && createPortal11(
+        codeSnippetMenuAnchor && createPortal12(
           /* @__PURE__ */ jsxs37(
             "div",
             {
@@ -21617,7 +21771,7 @@ ${TASK_LIST_MARKDOWN}
           ),
           document.body
         ),
-        emojiPickerAnchor && createPortal11(
+        emojiPickerAnchor && createPortal12(
           /* @__PURE__ */ jsx48(
             EmojiPicker,
             {
@@ -21641,7 +21795,7 @@ ${TASK_LIST_MARKDOWN}
 }
 
 // src/StatusBar.tsx
-import { useEffect as useEffect29, useMemo as useMemo25, useState as useState37 } from "react";
+import { useEffect as useEffect30, useMemo as useMemo25, useState as useState39 } from "react";
 import { countBlocks } from "@bendyline/squisq/doc";
 import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var STATS_DEBOUNCE_MS = 150;
@@ -21651,8 +21805,8 @@ function countLabel(count, noun) {
 function StatusBar({ className, slotRight }) {
   const { markdownSource, doc, parseError } = useEditorContext();
   const proofingState = useProofingState();
-  const [statsSource, setStatsSource] = useState37(markdownSource);
-  useEffect29(() => {
+  const [statsSource, setStatsSource] = useState39(markdownSource);
+  useEffect30(() => {
     if (statsSource === markdownSource) return;
     const timeout = setTimeout(() => setStatsSource(markdownSource), STATS_DEBOUNCE_MS);
     return () => clearTimeout(timeout);
@@ -21699,12 +21853,12 @@ import {
   createContext as createContext5,
   useCallback as useCallback32,
   useContext as useContext5,
-  useEffect as useEffect30,
+  useEffect as useEffect31,
   useMemo as useMemo26,
   useRef as useRef34,
-  useState as useState38
+  useState as useState40
 } from "react";
-import { createPortal as createPortal12 } from "react-dom";
+import { createPortal as createPortal13 } from "react-dom";
 import { CellSelection } from "@tiptap/pm/tables";
 import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var EditorContextMenuRegistry = createContext5(null);
@@ -21720,7 +21874,7 @@ function useEditorContextMenuItems(items) {
   if (!registry) {
     throw new Error("useEditorContextMenuItems must be used within an <EditorShell>");
   }
-  useEffect30(() => registry.register(() => itemsRef.current), [registry]);
+  useEffect31(() => registry.register(() => itemsRef.current), [registry]);
 }
 function selectedTextFromBrowser(content) {
   const selection = window.getSelection();
@@ -21890,8 +22044,8 @@ function EditorContextMenuProvider({
   const { activeView, editorMode, colorScheme, monacoEditor, tiptapEditor } = useEditorContext();
   const itemGettersRef = useRef34(/* @__PURE__ */ new Set());
   const menuRef = useRef34(null);
-  const [menu, setMenu] = useState38(null);
-  const [menuStyle2, setMenuStyle] = useState38({});
+  const [menu, setMenu] = useState40(null);
+  const [menuStyle2, setMenuStyle] = useState40({});
   const register = useCallback32((getItems) => {
     itemGettersRef.current.add(getItems);
     return () => itemGettersRef.current.delete(getItems);
@@ -22046,7 +22200,7 @@ function EditorContextMenuProvider({
     },
     [buildInteraction, tiptapEditor]
   );
-  useEffect30(() => {
+  useEffect31(() => {
     const root = rootRef.current;
     if (!root) return;
     const onContextMenu = (event) => {
@@ -22071,7 +22225,7 @@ function EditorContextMenuProvider({
       root.removeEventListener("keydown", onKeyDown);
     };
   }, [openAt, rootRef]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!menu) return;
     const frame = requestAnimationFrame(() => {
       setMenuStyle(computeMenuStyle(menu, menuRef.current));
@@ -22133,7 +22287,7 @@ function EditorContextMenuProvider({
   }, []);
   return /* @__PURE__ */ jsxs39(EditorContextMenuRegistry.Provider, { value: registry, children: [
     children,
-    menu && createPortal12(
+    menu && createPortal13(
       /* @__PURE__ */ jsxs39(
         "div",
         {
@@ -22178,7 +22332,7 @@ function EditorContextMenuProvider({
 }
 
 // src/RawEditor.tsx
-import { useRef as useRef35, useCallback as useCallback33, useEffect as useEffect31, useState as useState39 } from "react";
+import { useRef as useRef35, useCallback as useCallback33, useEffect as useEffect32, useState as useState41 } from "react";
 import { getAvailableTemplates } from "@bendyline/squisq/doc";
 import { suggestIcons, resolveIcon, iconGlyph } from "@bendyline/squisq/icons";
 import { BLOCK_META_KEY_DESCRIPTORS, tokenizeAttrTokens as tokenizeAttrTokens3 } from "@bendyline/squisq/markdown";
@@ -22215,10 +22369,10 @@ var SQUISQ_THEMES = {
   "vs-dark": "squisq-dark"
 };
 function useDocumentMonacoLanguages(language, source) {
-  const [requested, setRequested] = useState39(
+  const [requested, setRequested] = useState41(
     () => monacoLanguagesForDocument(language, source)
   );
-  useEffect31(() => {
+  useEffect32(() => {
     const delay = normalizeMonacoLanguage(language) === "markdown" ? 250 : 0;
     const timer = window.setTimeout(() => {
       setRequested(monacoLanguagesForDocument(language, source));
@@ -22228,6 +22382,7 @@ function useDocumentMonacoLanguages(language, source) {
   return requested;
 }
 function RawEditor({
+  ariaLabel = "Document source",
   monacoTheme = "vs",
   minimap = false,
   fontSize = 14,
@@ -22255,14 +22410,14 @@ function RawEditor({
   const keyDisposable = useRef35(null);
   const submitOnEnterRef = useRef35(submitOnEnter);
   const readOnlyRef = useRef35(readOnly);
-  useEffect31(() => {
+  useEffect32(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
-  useEffect31(() => {
+  useEffect32(() => {
     readOnlyRef.current = readOnly;
   }, [readOnly]);
   const mentionProviderRef = useRef35(mentionProvider);
-  useEffect31(() => {
+  useEffect32(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const docCustomTemplates = doc?.customTemplates;
@@ -22273,7 +22428,7 @@ function RawEditor({
       detail: "Block template"
     }));
   }
-  useEffect31(() => {
+  useEffect32(() => {
     const builtIns = getAvailableTemplates().map((name) => ({
       name,
       detail: "Block template"
@@ -22559,7 +22714,6 @@ function RawEditor({
       }
       keyDisposable.current?.dispose();
       keyDisposable.current = editor.onKeyDown((e2) => {
-        void preloadMonacoSuggestions().catch(() => void 0);
         if (e2.keyCode !== monaco.KeyCode.Enter) return;
         if (!submitOnEnterRef.current) return;
         if (e2.metaKey || e2.ctrlKey || e2.shiftKey || e2.altKey) return;
@@ -22615,7 +22769,7 @@ function RawEditor({
     },
     [setMonacoEditor, language]
   );
-  useEffect31(() => {
+  useEffect32(() => {
     return () => {
       setMonacoEditor(null);
       completionDisposable.current?.dispose();
@@ -22643,7 +22797,7 @@ function RawEditor({
     },
     [setEditorSource]
   );
-  useEffect31(() => {
+  useEffect32(() => {
     const editor = editorRef.current;
     if (editor) {
       const currentValue = editor.getValue();
@@ -22654,7 +22808,7 @@ function RawEditor({
       }
     }
   }, [editorSource]);
-  useEffect31(() => {
+  useEffect32(() => {
     const editor = editorRef.current;
     if (!editor || !monacoNs) return;
     if (language !== "markdown") return;
@@ -22698,7 +22852,7 @@ function RawEditor({
       "textarea",
       {
         className,
-        "aria-label": "Document source",
+        "aria-label": ariaLabel,
         "aria-busy": "true",
         autoFocus: true,
         readOnly,
@@ -22751,6 +22905,7 @@ function RawEditor({
       onMount: handleMount,
       onChange: handleChange,
       options: {
+        ariaLabel,
         fontSize,
         wordWrap,
         minimap: { enabled: minimap },
@@ -23004,7 +23159,7 @@ var Subscript = Mark.create({
 });
 
 // src/diagram/DiagramCanvas.tsx
-import { useCallback as useCallback34, useMemo as useMemo27, useRef as useRef36, useState as useState40 } from "react";
+import { useCallback as useCallback34, useMemo as useMemo27, useRef as useRef36, useState as useState42 } from "react";
 
 // src/diagram/diagramConstants.ts
 var DIAGRAM_VIEWPORT = { width: 1600, height: 900 };
@@ -23029,7 +23184,7 @@ function DiagramCanvas({
     () => buildDiagramScene(incomingNodes, incomingEdges),
     [incomingNodes, incomingEdges]
   );
-  const [internalToolId, setInternalToolId] = useState40("select");
+  const [internalToolId, setInternalToolId] = useState42("select");
   const activeToolId = controlledToolId ?? internalToolId;
   const setActiveToolId = onActiveToolIdChange ?? setInternalToolId;
   const handleSceneCommand = useCallback34(
@@ -23317,7 +23472,7 @@ function removeNodeOp(diagram, nodeId) {
 }
 
 // src/asciiDiagram/asciiDiagramData.ts
-import { useEffect as useEffect32, useMemo as useMemo29, useState as useState42 } from "react";
+import { useEffect as useEffect33, useMemo as useMemo29, useState as useState44 } from "react";
 import {
   asciiCellToCanvas,
   asciiDiagramToTemplateData,
@@ -23339,7 +23494,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/asciiDiagram/AsciiDiagramWidget.tsx
-import { useCallback as useCallback35, useMemo as useMemo28, useRef as useRef37, useState as useState41 } from "react";
+import { useCallback as useCallback35, useMemo as useMemo28, useRef as useRef37, useState as useState43 } from "react";
 
 // src/asciiDiagram/asciiDiagramCommands.ts
 import {
@@ -23587,11 +23742,11 @@ function AsciiDiagramWidget({
   textChannel
 }) {
   const view = useAsciiDiagramData(editor, blockId);
-  const [maximized, setMaximized] = useState41(false);
-  const [height, setHeight] = useState41(null);
-  const [dragHeight, setDragHeight] = useState41(null);
+  const [maximized, setMaximized] = useState43(false);
+  const [height, setHeight] = useState43(null);
+  const [dragHeight, setDragHeight] = useState43(null);
   const canvasOffsetRef = useRef37(null);
-  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState41(0);
+  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState43(0);
   const inlineRef = useRef37(null);
   const effectiveHeight = dragHeight ?? height;
   if (view && canvasOffsetRef.current === null) {
@@ -23644,8 +23799,8 @@ function AsciiDiagramWidget({
     setDragHeight(null);
     setHeight(null);
   }, []);
-  const [activeToolId, setActiveToolId] = useState41("select");
-  const [selectedIds, setSelectedIds] = useState41(() => /* @__PURE__ */ new Set());
+  const [activeToolId, setActiveToolId] = useState43("select");
+  const [selectedIds, setSelectedIds] = useState43(() => /* @__PURE__ */ new Set());
   const selectedNodeIds = useMemo28(
     () => [...selectedIds].map((id) => nodeIdFromCardLayerId(id)).filter((id) => id != null),
     [selectedIds]
@@ -24017,8 +24172,8 @@ function asciiDiagramToCanvas(diagram) {
   return { nodes, edges };
 }
 function useAsciiDiagramData(editor, blockId) {
-  const [version, setVersion] = useState42(0);
-  useEffect32(() => {
+  const [version, setVersion] = useState44(0);
+  useEffect33(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -25861,7 +26016,7 @@ function mermaidErrorMessage(error) {
 }
 
 // src/mermaid/mermaidSurfaceTheme.ts
-import { useEffect as useEffect33, useMemo as useMemo30, useState as useState43 } from "react";
+import { useEffect as useEffect34, useMemo as useMemo30, useState as useState45 } from "react";
 import { relativeLuminance } from "@bendyline/squisq/schemas";
 var EDITOR_SURFACE = {
   light: {
@@ -25897,8 +26052,8 @@ function resolveMermaidSurfaceTheme(host, theme) {
   return applyHostSurface(readHostSurface(host), theme);
 }
 function useMermaidSurfaceTheme(host, theme) {
-  const [surface, setSurface] = useState43(() => readHostSurface(host));
-  useEffect33(() => {
+  const [surface, setSurface] = useState45(() => readHostSurface(host));
+  useEffect34(() => {
     const sync = () => setSurface((current) => {
       const next = readHostSurface(host);
       return current.scheme === next.scheme && current.inheritsThemeColors === next.inheritsThemeColors ? current : next;
@@ -25924,7 +26079,7 @@ function useMermaidSurfaceTheme(host, theme) {
 }
 
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback36, useEffect as useEffect34, useId as useId13, useLayoutEffect as useLayoutEffect7, useRef as useRef38, useState as useState44 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect35, useId as useId12, useLayoutEffect as useLayoutEffect10, useRef as useRef38, useState as useState46 } from "react";
 import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -25987,21 +26142,21 @@ function MermaidDiagramCanvas({
   const scrollRef = useRef38(null);
   const renameInputRef = useRef38(null);
   const panDragRef = useRef38(null);
-  const renameHintId = useId13();
-  const [svg, setSvg] = useState44("");
-  const [model2, setModel] = useState44(null);
-  const [diagramType, setDiagramType] = useState44("mermaid");
-  const [error, setError] = useState44("");
-  const [rendering, setRendering] = useState44(true);
-  const [zoom, setZoom] = useState44(1);
-  const [viewMode, setViewMode] = useState44("fit");
-  const [contentSize, setContentSize] = useState44(null);
-  const [canvasSize, setCanvasSize] = useState44(null);
-  const [pan, setPan] = useState44({ x: 0, y: 0 });
-  const [panning, setPanning] = useState44(false);
-  const [selectionAnchor, setSelectionAnchor] = useState44(null);
-  const [renameValue, setRenameValue] = useState44("");
-  useEffect34(() => {
+  const renameHintId = useId12();
+  const [svg, setSvg] = useState46("");
+  const [model2, setModel] = useState46(null);
+  const [diagramType, setDiagramType] = useState46("mermaid");
+  const [error, setError] = useState46("");
+  const [rendering, setRendering] = useState46(true);
+  const [zoom, setZoom] = useState46(1);
+  const [viewMode, setViewMode] = useState46("fit");
+  const [contentSize, setContentSize] = useState46(null);
+  const [canvasSize, setCanvasSize] = useState46(null);
+  const [pan, setPan] = useState46({ x: 0, y: 0 });
+  const [panning, setPanning] = useState46(false);
+  const [selectionAnchor, setSelectionAnchor] = useState46(null);
+  const [renameValue, setRenameValue] = useState46("");
+  useEffect35(() => {
     if (!panning) return;
     const finish = () => {
       panDragRef.current = null;
@@ -26029,7 +26184,7 @@ function MermaidDiagramCanvas({
       window.removeEventListener("blur", finish);
     };
   }, [panning]);
-  useEffect34(() => {
+  useEffect35(() => {
     let current = true;
     const id = `squisq-mermaid-svg-${++renderSequence}`;
     setRendering(true);
@@ -26054,7 +26209,7 @@ function MermaidDiagramCanvas({
       current = false;
     };
   }, [source, onModelChange, theme]);
-  useLayoutEffect7(() => {
+  useLayoutEffect10(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const measure = () => {
@@ -26075,7 +26230,7 @@ function MermaidDiagramCanvas({
     observer.observe(scroll);
     return () => observer.disconnect();
   }, []);
-  useLayoutEffect7(() => {
+  useLayoutEffect10(() => {
     setContentSize(readSvgViewBox(svgRootRef.current));
   }, [svg]);
   const fitZoom = contentSize && canvasSize ? calculateFitScale(contentSize, canvasSize) : 1;
@@ -26084,7 +26239,7 @@ function MermaidDiagramCanvas({
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
   }, [fitZoom]);
-  useLayoutEffect7(() => {
+  useLayoutEffect10(() => {
     if (viewMode !== "fit") return;
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
@@ -26151,7 +26306,7 @@ function MermaidDiagramCanvas({
     selectedNodeId,
     selectedTextId
   ]);
-  useLayoutEffect7(() => {
+  useLayoutEffect10(() => {
     const node2 = renamingNodeId ? model2?.nodes.find((candidate) => candidate.id === renamingNodeId) : null;
     const edge2 = renamingEdgeId ? model2?.edges.find((candidate) => candidate.id === renamingEdgeId) : null;
     const text = renamingTextId ? model2 && mermaidEditableTexts(model2).find((candidate) => candidate.id === renamingTextId) : null;
@@ -26164,7 +26319,7 @@ function MermaidDiagramCanvas({
     });
     return () => window.cancelAnimationFrame(frame);
   }, [model2, renamingEdgeId, renamingNodeId, renamingTextId]);
-  useLayoutEffect7(() => {
+  useLayoutEffect10(() => {
     const root = svgRootRef.current;
     if (!root || !model2) {
       setSelectionAnchor(null);
@@ -26300,7 +26455,7 @@ function MermaidDiagramCanvas({
     updateSelectionAnchor,
     zoom
   ]);
-  useEffect34(() => {
+  useEffect35(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const update = () => updateSelectionAnchor();
@@ -26705,7 +26860,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect35, useLayoutEffect as useLayoutEffect8, useMemo as useMemo31, useRef as useRef39, useState as useState45 } from "react";
+import { useEffect as useEffect36, useLayoutEffect as useLayoutEffect11, useMemo as useMemo31, useRef as useRef39, useState as useState47 } from "react";
 import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -26713,10 +26868,10 @@ var PALETTE_MAX_HEIGHT = 520;
 var PALETTE_GAP = 6;
 var VIEWPORT_GUTTER = 8;
 function MermaidShapePalette({ selected, onPick, onClose }) {
-  const [query, setQuery] = useState45("");
-  const [position, setPosition] = useState45(null);
+  const [query, setQuery] = useState47("");
+  const [position, setPosition] = useState47(null);
   const ref = useRef39(null);
-  useEffect35(() => {
+  useEffect36(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -26741,7 +26896,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
       )
     })).filter((section) => section.shapes.length > 0);
   }, [query]);
-  useLayoutEffect8(() => {
+  useLayoutEffect11(() => {
     const palette = ref.current;
     const anchor = palette?.parentElement;
     if (!palette || !anchor) return;
@@ -26887,7 +27042,7 @@ function MermaidShapeThumb({ shape }) {
 }
 
 // src/mermaid/mermaidData.ts
-import { useEffect as useEffect37, useMemo as useMemo32, useState as useState47 } from "react";
+import { useEffect as useEffect38, useMemo as useMemo32, useState as useState49 } from "react";
 
 // src/mermaid/MermaidDiagramExtension.ts
 import { Extension as Extension6 } from "@tiptap/core";
@@ -26899,10 +27054,10 @@ import { createRoot as createRoot3 } from "react-dom/client";
 // src/mermaid/MermaidDiagramWidget.tsx
 import {
   useCallback as useCallback37,
-  useEffect as useEffect36,
-  useLayoutEffect as useLayoutEffect9,
+  useEffect as useEffect37,
+  useLayoutEffect as useLayoutEffect12,
   useRef as useRef40,
-  useState as useState46,
+  useState as useState48,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
@@ -27271,16 +27426,16 @@ function MermaidDiagramWidget({
     themeStore?.getSnapshot ?? getDefaultTheme
   );
   const theme = useMermaidSurfaceTheme(host, docTheme);
-  const [model2, setModel] = useState46(null);
-  const [selection, setSelection] = useState46(null);
-  const [renaming, setRenaming] = useState46(null);
-  const [connecting, setConnecting] = useState46(false);
-  const [connectSourceId, setConnectSourceId] = useState46(null);
-  const [openPopover, setOpenPopover] = useState46(null);
-  const [editNotice, setEditNotice] = useState46("");
-  const [maximized, setMaximized] = useState46(false);
-  const [height, setHeight] = useState46(null);
-  const [dragHeight, setDragHeight] = useState46(null);
+  const [model2, setModel] = useState48(null);
+  const [selection, setSelection] = useState48(null);
+  const [renaming, setRenaming] = useState48(null);
+  const [connecting, setConnecting] = useState48(false);
+  const [connectSourceId, setConnectSourceId] = useState48(null);
+  const [openPopover, setOpenPopover] = useState48(null);
+  const [editNotice, setEditNotice] = useState48("");
+  const [maximized, setMaximized] = useState48(false);
+  const [height, setHeight] = useState48(null);
+  const [dragHeight, setDragHeight] = useState48(null);
   const inlineRef = useRef40(null);
   const effectiveHeight = dragHeight ?? height;
   const onModelChange = useCallback37((next) => {
@@ -27539,7 +27694,7 @@ function MermaidDiagramWidget({
     },
     [effectiveHeight]
   );
-  useEffect36(() => {
+  useEffect37(() => {
     if (!editNotice) return;
     const timeout = window.setTimeout(() => setEditNotice(""), 7e3);
     return () => window.clearTimeout(timeout);
@@ -27776,7 +27931,7 @@ function MermaidDiagramWidget({
   ] });
 }
 function useDismissibleMermaidPopover(ref, onClose) {
-  useEffect36(() => {
+  useEffect37(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -27794,8 +27949,8 @@ function useDismissibleMermaidPopover(ref, onClose) {
   }, [onClose, ref]);
 }
 function useClampedMermaidPopoverPosition(ref, preferredWidth, preferredMaxHeight) {
-  const [position, setPosition] = useState46(null);
-  useLayoutEffect9(() => {
+  const [position, setPosition] = useState48(null);
+  useLayoutEffect12(() => {
     const picker = ref.current;
     const anchor = picker?.parentElement;
     if (!picker || !anchor) return;
@@ -27860,7 +28015,7 @@ function MermaidPropertiesPalette({
   onApply,
   onClose
 }) {
-  const [values, setValues] = useState46(
+  const [values, setValues] = useState48(
     () => Object.fromEntries(properties.map((property) => [property.id, property.value]))
   );
   const ref = useRef40(null);
@@ -28154,8 +28309,8 @@ var MermaidDiagramExtension = Extension6.create({
 
 // src/mermaid/mermaidData.ts
 function useMermaidDiagramData(editor, blockId) {
-  const [version, setVersion] = useState47(0);
-  useEffect37(() => {
+  const [version, setVersion] = useState49(0);
+  useEffect38(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -28179,13 +28334,13 @@ import { createElement as createElement10 } from "react";
 import { createRoot as createRoot4 } from "react-dom/client";
 
 // src/codeSnippet/CodeSnippetWidget.tsx
-import { useCallback as useCallback38, useEffect as useEffect39, useRef as useRef41, useState as useState49 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect40, useRef as useRef41, useState as useState51 } from "react";
 
 // src/codeSnippet/codeSnippetData.ts
-import { useEffect as useEffect38, useMemo as useMemo33, useState as useState48 } from "react";
+import { useEffect as useEffect39, useMemo as useMemo33, useState as useState50 } from "react";
 function useCodeSnippetData(editor, blockId) {
-  const [version, setVersion] = useState48(0);
-  useEffect38(() => {
+  const [version, setVersion] = useState50(0);
+  useEffect39(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -28229,10 +28384,10 @@ function schemeFromHost(host) {
   return host?.closest("[data-theme]")?.dataset.theme === "dark" ? "dark" : "light";
 }
 function useHostColorScheme(host) {
-  const [scheme, setScheme] = useState49(
+  const [scheme, setScheme] = useState51(
     () => host != null && !host.isConnected ? null : schemeFromHost(host)
   );
-  useEffect39(() => {
+  useEffect40(() => {
     if (host != null && !host.isConnected) {
       setScheme(null);
       const raf = requestAnimationFrame(() => {
@@ -28270,8 +28425,8 @@ async function writeSnippetToClipboard(source, language, handler) {
   await navigator.clipboard.writeText(source);
 }
 function useEditorEditable(editor) {
-  const [editable, setEditable] = useState49(editor.isEditable);
-  useEffect39(() => {
+  const [editable, setEditable] = useState51(editor.isEditable);
+  useEffect40(() => {
     const sync = () => setEditable(editor.isEditable);
     editor.on("update", sync);
     editor.on("transaction", sync);
@@ -28293,14 +28448,14 @@ function CodeSnippetWidget({
   const { ready } = useMonacoLoader(data?.monacoLanguage);
   const colorScheme = useHostColorScheme(host);
   const editable = useEditorEditable(editor);
-  const [modelInstanceId] = useState49(allocateCodeSnippetModelInstanceId);
-  const [copyStatus, setCopyStatus] = useState49("idle");
+  const [modelInstanceId] = useState51(allocateCodeSnippetModelInstanceId);
+  const [copyStatus, setCopyStatus] = useState51("idle");
   const copyResetTimer = useRef41();
   const sourceRef = useRef41("");
   sourceRef.current = data?.source ?? "";
   const languageRef = useRef41("");
   languageRef.current = data?.fenceLanguage ?? "";
-  useEffect39(
+  useEffect40(
     () => () => {
       if (copyResetTimer.current !== void 0) clearTimeout(copyResetTimer.current);
     },
@@ -28558,7 +28713,7 @@ import { createRoot as createRoot5 } from "react-dom/client";
 import { createElement as createElement11 } from "react";
 
 // src/fenceWidgets/HostFenceWidget.tsx
-import { Component, useEffect as useEffect40, useMemo as useMemo34, useState as useState50 } from "react";
+import { Component, useEffect as useEffect41, useMemo as useMemo34, useState as useState52 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var HostFenceErrorBoundary = class extends Component {
   constructor() {
@@ -28573,8 +28728,8 @@ var HostFenceErrorBoundary = class extends Component {
   }
 };
 function HostFenceWidget({ editor, blockId, getRenderers, getTheme }) {
-  const [version, setVersion] = useState50(0);
-  useEffect40(() => {
+  const [version, setVersion] = useState52(0);
+  useEffect41(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -29047,7 +29202,7 @@ import { createElement as createElement12 } from "react";
 import { isDataFilePath } from "@bendyline/squisq/doc";
 
 // src/dataCard/DataCardWidget.tsx
-import { useCallback as useCallback39, useEffect as useEffect41, useMemo as useMemo35, useRef as useRef42, useState as useState51 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect42, useMemo as useMemo35, useRef as useRef42, useState as useState53 } from "react";
 import { EMPTY_TABLE_VIEW_STATE } from "@bendyline/squisq/table";
 
 // src/dataCard/gridSave.ts
@@ -29450,8 +29605,8 @@ import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
 var XLSX_SESSION_LOCKED_REASON = "Date cells and shared-formula masters stay locked; other formulas are editable";
 var pendingFormulas = /* @__PURE__ */ new WeakMap();
 function useCardLink(editor, blockId) {
-  const [version, setVersion] = useState51(0);
-  useEffect41(() => {
+  const [version, setVersion] = useState53(0);
+  useEffect42(() => {
     const bump = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", bump);
     return () => {
@@ -29470,8 +29625,8 @@ function useCardLink(editor, blockId) {
   }, [editor, blockId, version]);
 }
 function useMediaRevision(getMediaRevision) {
-  const [revision, setRevision] = useState51(() => getMediaRevision());
-  useEffect41(() => {
+  const [revision, setRevision] = useState53(() => getMediaRevision());
+  useEffect42(() => {
     const timer = window.setInterval(() => {
       const next = getMediaRevision();
       setRevision((prev) => prev === next ? prev : next);
@@ -29497,13 +29652,13 @@ function DataCardWidget({
 }) {
   const link = useCardLink(editor, blockId);
   const revision = useMediaRevision(getMediaRevision);
-  const [state, setState3] = useState51({ kind: "loading" });
-  const [view, setView] = useState51(EMPTY_TABLE_VIEW_STATE);
-  const [viewPersisted, setViewPersisted] = useState51(false);
-  const [saving, setSaving] = useState51(false);
+  const [state, setState3] = useState53({ kind: "loading" });
+  const [view, setView] = useState53(EMPTY_TABLE_VIEW_STATE);
+  const [viewPersisted, setViewPersisted] = useState53(false);
+  const [saving, setSaving] = useState53(false);
   const savingRef = useRef42(false);
-  const [saveNotice, setSaveNotice] = useState51(null);
-  const [formulaDirty, setFormulaDirty] = useState51(0);
+  const [saveNotice, setSaveNotice] = useState53(null);
+  const [formulaDirty, setFormulaDirty] = useState53(0);
   const gridRef = useRef42(null);
   const href = link?.href ?? null;
   const cardPos = link?.pos ?? null;
@@ -29515,7 +29670,7 @@ function DataCardWidget({
     regionParams.anchor,
     regionParams.headerRow
   ]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (!href || cardPos === null) return;
     const provider = activeProvider;
     if (!provider) {
@@ -29677,7 +29832,7 @@ function DataCardWidget({
       cancelled = true;
     };
   }, [href, revision, activeProvider, activeContainer, regionIdentity, editor]);
-  useEffect41(
+  useEffect42(
     () => () => {
       gridRef.current?.formulaSession?.dispose();
       gridRef.current?.provider.dispose();
@@ -30193,7 +30348,7 @@ function pasteVideoEmbedCode(view, text) {
 }
 
 // src/treeview/treeViewData.ts
-import { useEffect as useEffect42, useMemo as useMemo36, useState as useState53 } from "react";
+import { useEffect as useEffect43, useMemo as useMemo36, useState as useState55 } from "react";
 
 // src/treeview/TreeViewExtension.ts
 import { Extension as Extension12 } from "@tiptap/core";
@@ -30210,7 +30365,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/treeview/TreeOutlineWidget.tsx
-import { useCallback as useCallback40, useRef as useRef43, useState as useState52 } from "react";
+import { useCallback as useCallback40, useRef as useRef43, useState as useState54 } from "react";
 
 // src/treeview/treeViewCommands.ts
 import { parseTree, renderTree } from "@bendyline/squisq/doc";
@@ -30447,10 +30602,10 @@ function dropPositionForPointer(event) {
 }
 function TreeOutlineWidget({ editor, blockId }) {
   const view = useTreeViewData(editor, blockId);
-  const [collapsed, setCollapsed] = useState52(() => /* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = useState54(() => /* @__PURE__ */ new Set());
   const activeDragRef = useRef43(null);
-  const [draggedId, setDraggedId] = useState52(null);
-  const [dropTarget, setDropTarget] = useState52(null);
+  const [draggedId, setDraggedId] = useState54(null);
+  const [dropTarget, setDropTarget] = useState54(null);
   const dispatch = useCallback40(
     (cmd) => applyTreeCommand(editor, blockId, cmd),
     [editor, blockId]
@@ -30597,7 +30752,7 @@ function TreeRowView({
   const hasChildren = node2.children.length > 0;
   const isCollapsed = collapsed.has(node2.id);
   const isDir = node2.isDir || hasChildren;
-  const [draft, setDraft] = useState52(node2.label);
+  const [draft, setDraft] = useState54(node2.label);
   const dropPosition = dropTarget?.id === node2.id ? dropTarget.position : null;
   const itemClassName = [
     "squisq-tree-item",
@@ -30901,8 +31056,8 @@ var TreeViewExtension = Extension12.create({
 
 // src/treeview/treeViewData.ts
 function useTreeViewData(editor, blockId) {
-  const [version, setVersion] = useState53(0);
-  useEffect42(() => {
+  const [version, setVersion] = useState55(0);
+  useEffect43(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -30928,7 +31083,7 @@ function shouldPasteAsTreeFence(text) {
 }
 
 // src/timeline/timelineData.ts
-import { useEffect as useEffect44, useMemo as useMemo38, useRef as useRef45, useState as useState55 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo38, useRef as useRef45, useState as useState57 } from "react";
 
 // src/timeline/TimelineViewExtension.ts
 import { Extension as Extension13 } from "@tiptap/core";
@@ -30943,7 +31098,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/timeline/TimelineEditorWidget.tsx
-import { useCallback as useCallback41, useEffect as useEffect43, useMemo as useMemo37, useRef as useRef44, useState as useState54 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect44, useMemo as useMemo37, useRef as useRef44, useState as useState56 } from "react";
 import {
   asciiTimelineToTemplateData
 } from "@bendyline/squisq/doc";
@@ -31427,13 +31582,13 @@ import { Fragment as Fragment19, jsx as jsx61, jsxs as jsxs48 } from "react/jsx-
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 function TimelineEditorWidget({ editor, blockId }) {
   const view = useTimelineData(editor, blockId);
-  const [selectedEventId, setSelectedEventId] = useState54(null);
-  const [addingTrackId, setAddingTrackId] = useState54(null);
-  const [editingTrackId, setEditingTrackId] = useState54(null);
-  const [hover, setHover] = useState54(null);
-  const [dragged, setDragged] = useState54(null);
+  const [selectedEventId, setSelectedEventId] = useState56(null);
+  const [addingTrackId, setAddingTrackId] = useState56(null);
+  const [editingTrackId, setEditingTrackId] = useState56(null);
+  const [hover, setHover] = useState56(null);
+  const [dragged, setDragged] = useState56(null);
   const suppressClickEventId = useRef44(null);
-  const [announcement, setAnnouncement] = useState54("");
+  const [announcement, setAnnouncement] = useState56("");
   const dispatch = useCallback41(
     (command) => {
       const result = applyTimelineCommand(editor, blockId, command);
@@ -31494,7 +31649,7 @@ function TimelineEditorWidget({ editor, blockId }) {
     }
     return null;
   }, [selectedEventId, view]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (!view) return;
     const ids = new Set(
       view.timeline.tracks.flatMap((track) => track.events.map((event) => event.id))
@@ -31502,13 +31657,13 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (selectedEventId && ids.has(selectedEventId)) return;
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (editable) return;
     setAddingTrackId(null);
     setEditingTrackId(null);
     setHover(null);
   }, [editable]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
       return;
     }
@@ -31914,8 +32069,8 @@ function InlineTrackLabel({
   onStart,
   onFinish
 }) {
-  const [draft, setDraft] = useState54(label);
-  useEffect43(() => {
+  const [draft, setDraft] = useState56(label);
+  useEffect44(() => {
     if (editing) setDraft(label);
   }, [editing, label]);
   const commitLabel = () => {
@@ -31972,10 +32127,10 @@ function EventInspector({
   onDelete
 }) {
   const { event } = selected;
-  const [label, setLabel] = useState54(event.label);
-  const [description, setDescription] = useState54(event.description ?? "");
-  useEffect43(() => setLabel(event.label), [event.label]);
-  useEffect43(() => setDescription(event.description ?? ""), [event.description]);
+  const [label, setLabel] = useState56(event.label);
+  const [description, setDescription] = useState56(event.description ?? "");
+  useEffect44(() => setLabel(event.label), [event.label]);
+  useEffect44(() => setDescription(event.description ?? ""), [event.description]);
   const update = (patch) => dispatch(patch);
   const commitLabel = () => {
     const next = label.trim();
@@ -32280,9 +32435,9 @@ var TimelineViewExtension = Extension13.create({
 
 // src/timeline/timelineData.ts
 function useTimelineData(editor, blockId) {
-  const [version, setVersion] = useState55(0);
+  const [version, setVersion] = useState57(0);
   const dataCache = useRef45(null);
-  useEffect44(() => {
+  useEffect45(() => {
     const onEditorChange = () => setVersion((value) => value + 1);
     editor.on("transaction", onEditorChange);
     editor.on("update", onEditorChange);
@@ -32317,8 +32472,8 @@ function shouldPasteAsTimelineFence(text) {
 }
 
 // src/BlockPropertiesPopover.tsx
-import { useEffect as useEffect45, useId as useId14, useRef as useRef46, useState as useState56 } from "react";
-import { createPortal as createPortal13 } from "react-dom";
+import { useEffect as useEffect46, useId as useId13, useRef as useRef46, useState as useState58 } from "react";
+import { createPortal as createPortal14 } from "react-dom";
 import { jsx as jsx62, jsxs as jsxs49 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT = ".squisq-transition-flyout";
 function BlockPropertiesPopover({
@@ -32332,14 +32487,14 @@ function BlockPropertiesPopover({
   onClose
 }) {
   const panelRef = useRef46(null);
-  const panelId = `squisq-block-props-portal-${useId14().replace(/:/g, "")}`;
-  const [inner, setInner] = useState56(blockAttrs);
-  const [templateInner, setTemplateInner] = useState56(templateParams);
-  const [style, setStyle] = useState56(() => computeStyle3(anchorRect));
-  useEffect45(() => {
+  const panelId = `squisq-block-props-portal-${useId13().replace(/:/g, "")}`;
+  const [inner, setInner] = useState58(blockAttrs);
+  const [templateInner, setTemplateInner] = useState58(templateParams);
+  const [style, setStyle] = useState58(() => computeStyle3(anchorRect));
+  useEffect46(() => {
     requestAnimationFrame(() => setStyle(computeStyle3(anchorRect, panelRef.current)));
   }, [anchorRect]);
-  useEffect45(() => {
+  useEffect46(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -32372,7 +32527,7 @@ function BlockPropertiesPopover({
   };
   const onDuration = (v2) => apply(setBlockAttrsValue(inner, "duration", v2));
   const onStartTime = (v2) => apply(setBlockAttrsValue(inner, "startTime", v2));
-  return createPortal13(
+  return createPortal14(
     /* @__PURE__ */ jsxs49(
       "div",
       {
@@ -32501,7 +32656,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback42, useEffect as useEffect49, useMemo as useMemo40, useRef as useRef48, useState as useState60 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect50, useMemo as useMemo40, useRef as useRef48, useState as useState62 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection } from "@tiptap/pm/state";
 import { Extension as Extension14 } from "@tiptap/core";
@@ -32590,7 +32745,7 @@ var InlineIcon = Node2.create({
 });
 
 // src/ImageNodeView.tsx
-import { useEffect as useEffect46, useRef as useRef47, useState as useState57 } from "react";
+import { useEffect as useEffect47, useRef as useRef47, useState as useState59 } from "react";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import Image from "@tiptap/extension-image";
 import { mergeAttributes as mergeAttributes3 } from "@tiptap/core";
@@ -32614,12 +32769,12 @@ import { Fragment as Fragment20, jsx as jsx63, jsxs as jsxs50 } from "react/jsx-
 function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
   const { src, alt, title, width } = node2.attrs;
   const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
-  const [resolution, setResolution] = useState57(null);
-  const [imageLoad, setImageLoad] = useState57(null);
+  const [resolution, setResolution] = useState59(null);
+  const [imageLoad, setImageLoad] = useState59(null);
   const isUploading = title?.startsWith("squisq-upload:") ?? false;
-  const [hovered, setHovered] = useState57(false);
+  const [hovered, setHovered] = useState59(false);
   const imgRef = useRef47(null);
-  const [previewWidth, setPreviewWidth] = useState57(null);
+  const [previewWidth, setPreviewWidth] = useState59(null);
   const isThumbnail = imageDisplayMode === "thumbnail";
   const isEditable = editor?.isEditable ?? true;
   const normalizedRelativePath = normalizeMalformedAssetUrl(src);
@@ -32629,7 +32784,7 @@ function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
   const currentResolution = resolution?.src === src && resolution.provider === mediaProvider && resolution.revision === mediaRevision ? resolution : null;
   const resolvedSrc = isUploading ? "" : needsResolution ? currentResolution?.url ?? "" : src;
   const resolutionFailed = needsResolution && currentResolution?.url === null;
-  useEffect46(() => {
+  useEffect47(() => {
     if (isUploading || !mediaProvider || !resolveAs) return;
     setImageLoad(null);
     let cancelled = false;
@@ -32959,15 +33114,15 @@ function MediaEditButton({ src, kind, fx, className }) {
 
 // src/tiptap/TiptapVideo.tsx
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
-import { useEffect as useEffect48, useState as useState59 } from "react";
+import { useEffect as useEffect49, useState as useState61 } from "react";
 
 // src/tiptap/useResolvedMediaSrc.ts
-import { useEffect as useEffect47, useState as useState58 } from "react";
+import { useEffect as useEffect48, useState as useState60 } from "react";
 function useResolvedMediaSrc(src) {
   const { mediaProvider, mediaRevision } = useEditorContext();
   const isRelative = !!src && !src.startsWith("blob:") && !src.startsWith("http:") && !src.startsWith("https:") && !src.startsWith("data:") && !src.startsWith("/");
-  const [resolved, setResolved] = useState58(isRelative && mediaProvider ? "" : src);
-  useEffect47(() => {
+  const [resolved, setResolved] = useState60(isRelative && mediaProvider ? "" : src);
+  useEffect48(() => {
     if (!mediaProvider || !isRelative) {
       setResolved(src);
       return;
@@ -33019,9 +33174,9 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
   const placement = normalizeVideoPlacement(rawPlacement);
   const lockToBlock = normalizeLockToBlock(rawLockToBlock);
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
-  const [audioOnly, setAudioOnly] = useState59(false);
+  const [audioOnly, setAudioOnly] = useState61(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
-  useEffect48(() => {
+  useEffect49(() => {
     setAudioOnly(false);
   }, [resolvedSrc]);
   const handleLoadedMetadata = (event) => {
@@ -33780,6 +33935,7 @@ var SourceFrontmatter = Extension14.create({
   }
 });
 function WysiwygEditor({
+  ariaLabel = "Document editor",
   placeholder,
   className,
   submitOnEnter,
@@ -33819,11 +33975,11 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect49(() => {
+  useEffect50(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const [designerState, setDesignerState] = useState60(
+  const [designerState, setDesignerState] = useState62(
     null
   );
   const handleDesignerSave = useCallback42(
@@ -33839,19 +33995,19 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef48(mentionProvider);
-  useEffect49(() => {
+  useEffect50(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const fenceRenderersRef = useRef48(fenceRenderers);
-  useEffect49(() => {
+  useEffect50(() => {
     fenceRenderersRef.current = fenceRenderers;
   }, [fenceRenderers]);
   const onCopyCodeRef = useRef48(onCopyCode);
-  useEffect49(() => {
+  useEffect50(() => {
     onCopyCodeRef.current = onCopyCode;
   }, [onCopyCode]);
   const activeThemeRef = useRef48(activeTheme);
-  useEffect49(() => {
+  useEffect50(() => {
     activeThemeRef.current = activeTheme;
   }, [activeTheme]);
   const resolvedPlaceholder = useMemo40(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
@@ -33861,30 +34017,30 @@ function WysiwygEditor({
   const pendingLocalSourcesRef = useRef48([]);
   const mediaProviderRef = useRef48(mediaProvider);
   const mediaRevisionRef = useRef48(mediaRevision);
-  useEffect49(() => {
+  useEffect50(() => {
     mediaRevisionRef.current = mediaRevision;
   }, [mediaRevision]);
   const onOpenFilesPanelRef = useRef48(onOpenFilesPanel);
-  useEffect49(() => {
+  useEffect50(() => {
     onOpenFilesPanelRef.current = onOpenFilesPanel;
   }, [onOpenFilesPanel]);
   const calcEngineFactoryRef = useRef48(calcEngineFactory);
-  useEffect49(() => {
+  useEffect50(() => {
     calcEngineFactoryRef.current = calcEngineFactory;
   }, [calcEngineFactory]);
   const workspaceContainerRef = useRef48(workspaceContainer);
-  useEffect49(() => {
+  useEffect50(() => {
     workspaceContainerRef.current = workspaceContainer;
   }, [workspaceContainer]);
   const bumpMediaRevisionRef = useRef48(bumpMediaRevision);
-  useEffect49(() => {
+  useEffect50(() => {
     bumpMediaRevisionRef.current = bumpMediaRevision;
   }, [bumpMediaRevision]);
-  useEffect49(() => {
+  useEffect50(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
-  const [accessoryPaths, setAccessoryPaths] = useState60(() => /* @__PURE__ */ new Set());
-  useEffect49(() => {
+  const [accessoryPaths, setAccessoryPaths] = useState62(() => /* @__PURE__ */ new Set());
+  useEffect50(() => {
     if (!mediaProvider) {
       setAccessoryPaths(/* @__PURE__ */ new Set());
       return;
@@ -33916,7 +34072,7 @@ function WysiwygEditor({
     }
   }
   const submitOnEnterRef = useRef48(submitOnEnter);
-  useEffect49(() => {
+  useEffect50(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -34000,7 +34156,11 @@ function WysiwygEditor({
     editorProps: {
       attributes: {
         class: "squisq-wysiwyg-editor",
-        "data-testid": "wysiwyg-editor"
+        "data-testid": "wysiwyg-editor",
+        role: "textbox",
+        "aria-label": ariaLabel,
+        "aria-multiline": "true",
+        "aria-readonly": String(readOnly)
       },
       // Chat-composer mode: Enter commits via submitOnEnter(), Cmd/Ctrl+Enter
       // inserts a soft break. When no callback is set, fall through to Tiptap's
@@ -34133,13 +34293,13 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect49(() => {
+  useEffect50(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!editor) return;
     const syncPlaceholders = () => {
       syncAccessoryFileLinkPlaceholders(editor.view.dom, accessoryPaths);
@@ -34150,19 +34310,19 @@ function WysiwygEditor({
       editor.off("update", syncPlaceholders);
     };
   }, [accessoryPaths, editor]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef48(null);
-  const [badgeMenu, setBadgeMenu] = useState60(null);
-  const [propsMenu, setPropsMenu] = useState60(null);
+  const [badgeMenu, setBadgeMenu] = useState62(null);
+  const [propsMenu, setPropsMenu] = useState62(null);
   const closeBadgeMenu = useCallback42(() => {
     setBadgeMenu(null);
     requestAnimationFrame(() => {
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -34218,7 +34378,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!editor) return;
     const layoutChanged = sourceLayoutRef.current !== layoutMode;
     sourceLayoutRef.current = layoutMode;
@@ -34484,7 +34644,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect10, useMemo as useMemo42, useRef as useRef49, useState as useState63 } from "react";
+import { useLayoutEffect as useLayoutEffect13, useMemo as useMemo42, useRef as useRef49, useState as useState65 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -34496,14 +34656,14 @@ import { extractPlainText as extractPlainText3, getChildren } from "@bendyline/s
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
-import { useCallback as useCallback43, useEffect as useEffect50, useMemo as useMemo41, useState as useState61 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect51, useMemo as useMemo41, useState as useState63 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
   const flatBlocks = useMemo41(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
-  const [entries, setEntries] = useState61([]);
-  const [pageEdges, setPageEdges] = useState61(null);
-  useEffect50(() => {
+  const [entries, setEntries] = useState63([]);
+  const [pageEdges, setPageEdges] = useState63(null);
+  useEffect51(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -34571,7 +34731,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -34632,7 +34792,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect50(() => {
+  useEffect51(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -34694,7 +34854,7 @@ function sameEntries(a, b) {
 }
 
 // src/usePreviewProjection.ts
-import { useEffect as useEffect51, useState as useState62 } from "react";
+import { useEffect as useEffect52, useState as useState64 } from "react";
 import {
   resolveAudioMapping,
   resolveDataReferences
@@ -34740,8 +34900,8 @@ function preserveEquivalentAudio(previous, next) {
   };
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2, mediaRevision) {
-  const [projection, setProjection] = useState62(null);
-  useEffect51(() => {
+  const [projection, setProjection] = useState64(null);
+  useEffect52(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -35022,8 +35182,8 @@ function InlinePreviewGutter({
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState63(/* @__PURE__ */ new Map());
-  useLayoutEffect10(() => {
+  const [positions, setPositions] = useState65(/* @__PURE__ */ new Map());
+  useLayoutEffect13(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
       return;
@@ -35207,10 +35367,10 @@ function InlinePreviewGutter({
 import {
   memo,
   useCallback as useCallback44,
-  useEffect as useEffect52,
+  useEffect as useEffect53,
   useMemo as useMemo43,
   useRef as useRef50,
-  useState as useState64
+  useState as useState66
 } from "react";
 import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate2 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText4 } from "@bendyline/squisq/markdown";
@@ -35332,8 +35492,8 @@ function OutlinePanel({ width, className, readOnly = false }) {
   const paneRef = useRef50(null);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef50(null);
-  const [draggedBlockId, setDraggedBlockId] = useState64(null);
-  const [dropTarget, setDropTarget] = useState64(null);
+  const [draggedBlockId, setDraggedBlockId] = useState66(null);
+  const [dropTarget, setDropTarget] = useState66(null);
   const nextOutlineBlocks = doc?.blocks ?? EMPTY_BLOCKS;
   const outlineBlocksRef = useRef50(nextOutlineBlocks);
   if (!sameOutlineStructure(outlineBlocksRef.current, nextOutlineBlocks)) {
@@ -35666,11 +35826,11 @@ function useActiveOutlineBlockId() {
   const flatBlocksRef = useRef50(flatBlocks);
   flatBlocksRef.current = flatBlocks;
   const headingLocations = flatBlocks.map((block) => `${block.id}:${block.sourceHeading?.position?.start.line ?? ""}`).join("\0");
-  const [activeId, setActiveId] = useState64(null);
-  useEffect52(() => {
+  const [activeId, setActiveId] = useState66(null);
+  useEffect53(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -35692,7 +35852,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, headingLocations]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -35779,8 +35939,8 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback46, useEffect as useEffect54, useMemo as useMemo45, useRef as useRef52, useState as useState65 } from "react";
-import { createPortal as createPortal14 } from "react-dom";
+import { useCallback as useCallback46, useEffect as useEffect55, useMemo as useMemo45, useRef as useRef52, useState as useState67 } from "react";
+import { createPortal as createPortal15 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
 function diffContextSections(prev, next) {
@@ -35903,7 +36063,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown7 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback45, useEffect as useEffect53, useMemo as useMemo44, useRef as useRef51 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect54, useMemo as useMemo44, useRef as useRef51 } from "react";
 import { jsx as jsx70, jsxs as jsxs57 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -35923,7 +36083,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown7(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect53(() => {
+  useEffect54(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -35995,11 +36155,11 @@ function CodeContextSectionView({
 import { Fragment as Fragment23, jsx as jsx71 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState65(null);
-  const [, setZonesVersion] = useState65(0);
-  const [expandedById, setExpandedById] = useState65({});
+  const [manager, setManager] = useState67(null);
+  const [, setZonesVersion] = useState67(0);
+  const [expandedById, setExpandedById] = useState67({});
   const seenIds = useRef52(/* @__PURE__ */ new Set());
-  useEffect54(() => {
+  useEffect55(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -36022,7 +36182,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect54(() => {
+  useEffect55(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -36064,7 +36224,7 @@ function CodeContextZones({ options }) {
   return /* @__PURE__ */ jsx71(Fragment23, { children: resolved.map(({ section }) => {
     const domNode = manager.getDomNode(section.id);
     if (!domNode) return null;
-    return createPortal14(
+    return createPortal15(
       /* @__PURE__ */ jsx71(
         CodeContextSectionView,
         {
@@ -36488,7 +36648,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback48, useEffect as useEffect57, useMemo as useMemo46, useRef as useRef55, useState as useState68 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect58, useMemo as useMemo46, useRef as useRef55, useState as useState70 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -36500,7 +36660,7 @@ import { useProcessedAudio as useProcessedAudio2 } from "@bendyline/squisq-video
 import { MediaClipLayer, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback47, useEffect as useEffect55, useRef as useRef53, useState as useState66 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect56, useRef as useRef53, useState as useState68 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -36520,8 +36680,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState66(0);
-  const [isPlaying, setIsPlaying] = useState66(false);
+  const [currentTime, setCurrentTime] = useState68(0);
+  const [isPlaying, setIsPlaying] = useState68(false);
   const rafRef = useRef53(null);
   const lastRef = useRef53(0);
   const currentTimeRef = useRef53(0);
@@ -36529,10 +36689,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef53(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect55(() => {
+  useEffect56(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -36630,8 +36790,8 @@ function timelineBars(clips) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect56, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState67 } from "react";
-import { createPortal as createPortal15 } from "react-dom";
+import { useEffect as useEffect57, useLayoutEffect as useLayoutEffect14, useRef as useRef54, useState as useState69 } from "react";
+import { createPortal as createPortal16 } from "react-dom";
 import { Fragment as Fragment24, jsx as jsx73, jsxs as jsxs59 } from "react/jsx-runtime";
 function TimelineItemMenu({
   anchor,
@@ -36646,8 +36806,8 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef54(null);
-  const [style, setStyle] = useState67(() => menuStyle(anchor));
-  useLayoutEffect11(() => {
+  const [style, setStyle] = useState69(() => menuStyle(anchor));
+  useLayoutEffect14(() => {
     const panel = panelRef.current;
     if (!panel) return;
     const updatePosition = () => setStyle(menuStyle(anchor, panel));
@@ -36660,7 +36820,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect56(() => {
+  useEffect57(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -36680,7 +36840,7 @@ function TimelineItemMenu({
       document.removeEventListener("mousedown", onMouseDown);
     };
   }, [onClose]);
-  return createPortal15(
+  return createPortal16(
     /* @__PURE__ */ jsxs59(
       "div",
       {
@@ -36734,12 +36894,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState67(target.explicitDuration);
-  const [duration, setDuration] = useState67(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState67(
+  const [explicitDuration, setExplicitDuration] = useState69(target.explicitDuration);
+  const [duration, setDuration] = useState69(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState69(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState67(target.transition);
+  const [transition, setTransition] = useState69(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -36811,11 +36971,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  const [placement, setPlacement] = useState67(target.placement);
-  const [locked, setLocked] = useState67(target.lockToBlock);
-  const [pipSize, setPipSize] = useState67(target.pipSize ?? "");
-  const [pipShape, setPipShape] = useState67(target.pipShape ?? "");
-  const [pipPosition, setPipPosition] = useState67(target.pipPosition ?? "");
+  const [placement, setPlacement] = useState69(target.placement);
+  const [locked, setLocked] = useState69(target.lockToBlock);
+  const [pipSize, setPipSize] = useState69(target.pipSize ?? "");
+  const [pipShape, setPipShape] = useState69(target.pipShape ?? "");
+  const [pipPosition, setPipPosition] = useState69(target.pipPosition ?? "");
   const placed = placement === "picture-in-picture" || placement === "overlay";
   const placementOptions = [
     target.canUseContentPlacement ? { value: "content", label: "In layout" } : { value: "default", label: "Default" },
@@ -37088,9 +37248,9 @@ function TimelineTrack({
   } = useEditorContext();
   const processedAudio = useProcessedAudio2(mediaEditRenders);
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState68(null);
-  const [itemMenu, setItemMenu] = useState68(null);
-  const [pxPerSecond, setPxPerSecond] = useState68(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = useState70(null);
+  const [itemMenu, setItemMenu] = useState70(null);
+  const [pxPerSecond, setPxPerSecond] = useState70(DEFAULT_PX_PER_SECOND);
   const scrollRef = useRef55(null);
   const blocks = useMemo46(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
@@ -37123,8 +37283,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState68(false);
-  useEffect57(() => {
+  const [scrubbing, setScrubbing] = useState70(false);
+  useEffect58(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -37162,7 +37322,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef55(null);
-  useEffect57(() => {
+  useEffect58(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -37173,7 +37333,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect57(() => {
+  useEffect58(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -37221,8 +37381,8 @@ function TimelineTrack({
   );
   const zoomIn = useCallback48(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback48(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
-  const [viewportWidth, setViewportWidth] = useState68(0);
-  useEffect57(() => {
+  const [viewportWidth, setViewportWidth] = useState70(0);
+  useEffect58(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -37236,7 +37396,7 @@ function TimelineTrack({
   const dragRef = useRef55(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect57(() => {
+  useEffect58(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -37267,7 +37427,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect57(() => {
+  useEffect58(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback48(
@@ -38121,7 +38281,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback49, useEffect as useEffect58, useMemo as useMemo49, useRef as useRef56, useState as useState69 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect59, useMemo as useMemo49, useRef as useRef56, useState as useState71 } from "react";
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -38202,8 +38362,8 @@ function PlainHtmlPreview({
     [onFrameChange]
   );
   const mdDoc = useMemo49(() => parseMarkdown8(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState69(null);
-  useEffect58(() => {
+  const [resolvedImages, setResolvedImages] = useState71(null);
+  useEffect59(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -38239,8 +38399,8 @@ function PlainHtmlPreview({
     return merged;
   }, [resolvedImages, images]);
   const iconsCss = useMemo49(() => collectInlineFontAwesomeCss(), []);
-  const [renderFn, setRenderFn] = useState69(() => cachedRender);
-  useEffect58(() => {
+  const [renderFn, setRenderFn] = useState71(() => cachedRender);
+  useEffect59(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -38277,7 +38437,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect58(() => {
+  useEffect59(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -38373,11 +38533,11 @@ function PlainHtmlPreview({
       style2.remove();
     };
   }, [onCopyCode, showCodeCopyButton]);
-  useEffect58(() => {
+  useEffect59(() => {
     installFrameCodeCopyControls();
     return () => removeFrameCodeCopyControlsRef.current();
   }, [html, installFrameCodeCopyControls]);
-  useEffect58(() => {
+  useEffect59(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -38456,8 +38616,8 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState73, useEffect as useEffect63, useMemo as useMemo54, useCallback as useCallback53, useRef as useRef60 } from "react";
-import { createPortal as createPortal17 } from "react-dom";
+import { useState as useState75, useEffect as useEffect64, useMemo as useMemo54, useCallback as useCallback53, useRef as useRef60 } from "react";
+import { createPortal as createPortal18 } from "react-dom";
 import {
   DashboardView,
   DocPlayer as DocPlayer2,
@@ -38601,14 +38761,14 @@ import {
   createContext as createContext6,
   useCallback as useCallback50,
   useContext as useContext6,
-  useEffect as useEffect59,
-  useId as useId15,
-  useLayoutEffect as useLayoutEffect12,
+  useEffect as useEffect60,
+  useId as useId14,
+  useLayoutEffect as useLayoutEffect15,
   useMemo as useMemo50,
   useRef as useRef57,
-  useState as useState70
+  useState as useState72
 } from "react";
-import { createPortal as createPortal16 } from "react-dom";
+import { createPortal as createPortal17 } from "react-dom";
 import { jsx as jsx79, jsxs as jsxs64 } from "react/jsx-runtime";
 var PresentationModeContext = createContext6(null);
 function usePresentationMode() {
@@ -38707,12 +38867,12 @@ function PresentationModeProvider({
 }) {
   const { activeView, colorScheme, doc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
-  const popupNameId = useId15().replace(/[^a-zA-Z0-9_-]/g, "");
-  const [selectedTarget, setSelectedTarget] = useState70("control");
-  const [activeTarget, setActiveTarget] = useState70(null);
-  const [popupRoot, setPopupRoot] = useState70(null);
-  const [error, setError] = useState70(null);
-  const [fullscreenExitStyle, setFullscreenExitStyle] = useState70(null);
+  const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [selectedTarget, setSelectedTarget] = useState72("control");
+  const [activeTarget, setActiveTarget] = useState72(null);
+  const [popupRoot, setPopupRoot] = useState72(null);
+  const [error, setError] = useState72(null);
+  const [fullscreenExitStyle, setFullscreenExitStyle] = useState72(null);
   const activeTargetRef = useRef57(activeTarget);
   activeTargetRef.current = activeTarget;
   const previousActiveTargetRef = useRef57(null);
@@ -38860,12 +39020,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect59(() => {
+  useEffect60(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect59(() => {
+  useEffect60(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -38877,7 +39037,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect59(() => {
+  useEffect60(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -38886,10 +39046,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect59(() => {
+  useEffect60(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect59(() => {
+  useEffect60(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -38897,7 +39057,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect59(() => {
+  useEffect60(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -38909,12 +39069,12 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect59(() => {
+  useEffect60(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useLayoutEffect12(() => {
+  useLayoutEffect15(() => {
     if (activeTarget !== "fullscreen") {
       setFullscreenExitStyle(null);
       return;
@@ -38944,7 +39104,7 @@ function PresentationModeProvider({
       window.removeEventListener("resize", updatePosition);
     };
   }, [activeTarget, rootRef]);
-  useEffect59(
+  useEffect60(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -39004,8 +39164,8 @@ function PresentationModeProvider({
   return /* @__PURE__ */ jsxs64(PresentationModeContext.Provider, { value, children: [
     children,
     (activeTarget === "control" || activeTarget === "fullscreen") && exitButton,
-    activeTarget === "window" && popupRoot && exitButton ? createPortal16(exitButton, popupRoot) : null,
-    error && typeof document !== "undefined" ? createPortal16(
+    activeTarget === "window" && popupRoot && exitButton ? createPortal17(exitButton, popupRoot) : null,
+    error && typeof document !== "undefined" ? createPortal17(
       /* @__PURE__ */ jsx79("div", { className: "squisq-presentation-error", "data-theme": colorScheme, role: "alert", children: error }),
       document.body
     ) : null
@@ -39047,8 +39207,8 @@ function PresentationModeControl() {
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef57(null);
   const menuRef = useRef57(null);
-  const [open, setOpen] = useState70(false);
-  const [anchor, setAnchor] = useState70(null);
+  const [open, setOpen] = useState72(false);
+  const [anchor, setAnchor] = useState72(null);
   const options = PRESENTATION_OPTIONS.filter((option) => availableTargets.includes(option.target));
   const selected = options.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
   const updatePosition = useCallback50(() => {
@@ -39073,7 +39233,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect59(() => {
+  useEffect60(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -39096,7 +39256,7 @@ function PresentationModeControl() {
       window.removeEventListener("scroll", updatePosition, true);
     };
   }, [closeMenu, open, updatePosition]);
-  useLayoutEffect12(() => {
+  useLayoutEffect15(() => {
     if (!open || !anchor) return;
     const checked = menuRef.current?.querySelector('[aria-checked="true"]');
     const first = menuRef.current?.querySelector('[role="menuitemradio"]');
@@ -39134,7 +39294,7 @@ function PresentationModeControl() {
         children: /* @__PURE__ */ jsx79("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx79("path", { d: "M2 3.5 5 6.5 8 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
       }
     ),
-    open && anchor ? createPortal16(
+    open && anchor ? createPortal17(
       /* @__PURE__ */ jsx79(
         "div",
         {
@@ -39216,10 +39376,10 @@ import {
   createContext as createContext7,
   useCallback as useCallback51,
   useContext as useContext7,
-  useEffect as useEffect60,
+  useEffect as useEffect61,
   useMemo as useMemo51,
   useRef as useRef58,
-  useState as useState71
+  useState as useState73
 } from "react";
 import { jsx as jsx80, jsxs as jsxs65 } from "react/jsx-runtime";
 var PrintModeContext = createContext7(null);
@@ -39234,8 +39394,8 @@ function usePrintModeOptional() {
 function PrintModeProvider({ rootRef, children }) {
   const { activeView } = useEditorContext();
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
-  const [active, setActive] = useState71(false);
-  const [slidesPerPage, setSlidesPerPage] = useState71(1);
+  const [active, setActive] = useState73(false);
+  const [slidesPerPage, setSlidesPerPage] = useState73(1);
   const customPrintHandlerRef = useRef58(null);
   const printAncestorsRef = useRef58([]);
   const unmarkPrinting = useCallback51(() => {
@@ -39286,7 +39446,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect60(() => {
+  useEffect61(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -39295,10 +39455,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -39389,7 +39549,7 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback52, useEffect as useEffect61, useMemo as useMemo52, useRef as useRef59 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect62, useMemo as useMemo52, useRef as useRef59 } from "react";
 import {
   BlockRenderer as BlockRenderer4,
   FlashcardFaceView,
@@ -39445,7 +39605,7 @@ function PrintPreview({
     [contentDoc]
   );
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect61(() => {
+  useEffect62(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -39583,9 +39743,9 @@ function PrintPreview({
 import {
   createContext as createContext8,
   useContext as useContext8,
-  useEffect as useEffect62,
+  useEffect as useEffect63,
   useMemo as useMemo53,
-  useState as useState72
+  useState as useState74
 } from "react";
 import { parseTableViewState as parseTableViewState2 } from "@bendyline/squisq/table";
 
@@ -39688,9 +39848,9 @@ function SlideshowDataGridRenderer({
   const { container, mediaRevision, sources } = useContext8(SlideshowDataGridContext);
   const source = sourceForBlock(sources, block);
   const activeSourceKey = sourceKey(source);
-  const [remote, setRemote] = useState72({ key: "", status: "idle" });
-  const [gridModule, setGridModule] = useState72(null);
-  useEffect62(() => {
+  const [remote, setRemote] = useState74({ key: "", status: "idle" });
+  const [gridModule, setGridModule] = useState74(null);
+  useEffect63(() => {
     let active = true;
     void loadGridModule().then((module) => {
       if (active) setGridModule(module);
@@ -39699,7 +39859,7 @@ function SlideshowDataGridRenderer({
       active = false;
     };
   }, []);
-  useEffect62(() => {
+  useEffect63(() => {
     if (!container || !source || !gridModule) {
       setRemote({ key: activeSourceKey, status: "idle" });
       return;
@@ -39750,13 +39910,13 @@ function SlideshowDataGridRenderer({
     () => useLocalGrid && gridModule ? new gridModule.TableStoreClient({ headers: previewHeaders, cells: previewRows }) : null,
     [previewHeaders, previewRows, useLocalGrid, gridModule]
   );
-  useEffect62(() => () => localProvider?.dispose(), [localProvider]);
+  useEffect63(() => () => localProvider?.dispose(), [localProvider]);
   const ready = currentRemote?.status === "ready" ? currentRemote : void 0;
   const provider = ready?.provider ?? localProvider;
   const ingest = ready?.ingest ?? (localProvider ? { headers: previewHeaders, cells: previewRows } : void 0);
   const initialView = ready?.initialView ?? EMPTY_VIEW;
-  const [view, setView] = useState72(initialView);
-  useEffect62(() => setView(initialView), [initialView, provider]);
+  const [view, setView] = useState74(initialView);
+  useEffect63(() => setView(initialView), [initialView, provider]);
   if (!provider || !ingest || !gridModule) return /* @__PURE__ */ jsx82(Fragment25, { children: fallback });
   const { style } = layer.content;
   const rowHeight = Math.max(32, style.fontSize * 2.1);
@@ -39851,7 +40011,7 @@ function PreviewPanel({
   } = usePreviewSettings();
   const mainSurfaceRef = useRef60(null);
   const popupSurfaceRef = useRef60(null);
-  const [playbackState, setPlaybackState] = useState73(null);
+  const [playbackState, setPlaybackState] = useState75(null);
   const handlePlaybackStateChange = useCallback53((next) => {
     setPlaybackState(next);
   }, []);
@@ -39892,11 +40052,11 @@ function PreviewPanel({
   const isNarrateMode = activeDisplayMode === "narrate";
   const isDashboardMode = activeDisplayMode === "dashboard";
   const isFlashcardsMode = activeDisplayMode === "flashcards";
-  useEffect63(() => {
+  useEffect64(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -40144,7 +40304,7 @@ function PreviewPanel({
             children: /* @__PURE__ */ jsx83("div", { ref: mainSurfaceRef, className: "squisq-preview-player", style: surfaceStyle, children: renderSurface(false) })
           }
         ),
-        audienceWindowOpen && presentation?.popupRoot && !isNarrateMode ? createPortal17(
+        audienceWindowOpen && presentation?.popupRoot && !isNarrateMode ? createPortal18(
           /* @__PURE__ */ jsx83(
             "div",
             {
@@ -40170,7 +40330,7 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState74, useEffect as useEffect64, useRef as useRef61, useCallback as useCallback54 } from "react";
+import { useState as useState76, useEffect as useEffect65, useRef as useRef61, useCallback as useCallback54 } from "react";
 import { jsx as jsx84, jsxs as jsxs68 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -40239,20 +40399,20 @@ function MediaBin({
   allowBinaryDownloads = true,
   highlightPath = null
 }) {
-  const [entries, setEntries] = useState74([]);
+  const [entries, setEntries] = useState76([]);
   const listRef = useRef61(null);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!highlightPath || !listRef.current) return;
     const item = listRef.current.querySelector(`[data-media-path="${CSS.escape(highlightPath)}"]`);
     if (item instanceof HTMLElement) {
       item.scrollIntoView({ block: "nearest" });
     }
   }, [highlightPath, entries]);
-  const [thumbUrls, setThumbUrls] = useState74({});
-  const [loading, setLoading] = useState74(false);
-  const [isDropActive, setIsDropActive] = useState74(false);
-  const [downloadingPath, setDownloadingPath] = useState74(null);
-  const [contextMenu, setContextMenu] = useState74(null);
+  const [thumbUrls, setThumbUrls] = useState76({});
+  const [loading, setLoading] = useState76(false);
+  const [isDropActive, setIsDropActive] = useState76(false);
+  const [downloadingPath, setDownloadingPath] = useState76(null);
+  const [contextMenu, setContextMenu] = useState76(null);
   const fileInputRef = useRef61(null);
   const contextMenuRef = useRef61(null);
   const dropDepthRef = useRef61(0);
@@ -40274,7 +40434,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect64(() => {
+  useEffect65(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -40295,7 +40455,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect64(() => {
+  useEffect65(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -40639,7 +40799,7 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState75 } from "react";
+import { useState as useState77 } from "react";
 import { Fragment as Fragment26, jsx as jsx85, jsxs as jsxs69 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
@@ -40696,7 +40856,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState75(false);
+  const [isHovering, setIsHovering] = useState77(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs69(
     "div",
@@ -40740,8 +40900,8 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect65, useLayoutEffect as useLayoutEffect13, useRef as useRef62, useState as useState76 } from "react";
-import { createPortal as createPortal18 } from "react-dom";
+import { useEffect as useEffect66, useLayoutEffect as useLayoutEffect16, useRef as useRef62, useState as useState78 } from "react";
+import { createPortal as createPortal19 } from "react-dom";
 
 // src/tooltipPlacement.ts
 var EDGE_PADDING_PX = 8;
@@ -40756,14 +40916,14 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 import { jsx as jsx86 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState76(null);
+  const [state, setState3] = useState78(null);
   const tooltipRef = useRef62(null);
   const timerRef = useRef62(null);
   const currentTargetRef = useRef62(null);
   const visibleRef = useRef62(false);
   const pressedTargetRef = useRef62(null);
   const lastPointerWasTouchRef = useRef62(false);
-  useLayoutEffect13(() => {
+  useLayoutEffect16(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
     if (!node2) return;
@@ -40774,7 +40934,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect65(() => {
+  useEffect66(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -40855,7 +41015,7 @@ function TooltipLayer() {
     };
   }, []);
   if (!state) return null;
-  return createPortal18(
+  return createPortal19(
     /* @__PURE__ */ jsx86(
       "div",
       {
@@ -40876,7 +41036,7 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect69, useRef as useRef67, useState as useState81, useCallback as useCallback59, useMemo as useMemo58 } from "react";
+import { useEffect as useEffect70, useRef as useRef67, useState as useState83, useCallback as useCallback59, useMemo as useMemo58 } from "react";
 
 // src/BlockPreviewPanel.tsx
 import { useMemo as useMemo55 } from "react";
@@ -41046,18 +41206,18 @@ function MediaEditContextMenuItems() {
 // src/mediaEdit/MediaEditModal.tsx
 import {
   useCallback as useCallback58,
-  useEffect as useEffect68,
-  useId as useId16,
+  useEffect as useEffect69,
+  useId as useId15,
   useMemo as useMemo57,
   useRef as useRef66,
-  useState as useState80
+  useState as useState82
 } from "react";
 import {
   useMediaEditStatus as useMediaEditStatus2
 } from "@bendyline/squisq-video-react/media-edit";
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { useCallback as useCallback55, useEffect as useEffect66, useRef as useRef63, useState as useState77 } from "react";
+import { useCallback as useCallback55, useEffect as useEffect67, useRef as useRef63, useState as useState79 } from "react";
 import { MEDIA_FX_SPECS as MEDIA_FX_SPECS2, serializeMediaFx } from "@bendyline/squisq/mediaEdit";
 
 // src/mediaEdit/mediaEditDraft.ts
@@ -41210,8 +41370,8 @@ var LOUDNESS_PRESETS = [
 ];
 var PREVIEW_SECONDS = 10;
 function useMediaDuration(url) {
-  const [duration, setDuration] = useState77(null);
-  useEffect66(() => {
+  const [duration, setDuration] = useState79(null);
+  useEffect67(() => {
     setDuration(null);
     if (!url || typeof Audio === "undefined") return;
     const probe = new Audio();
@@ -41231,9 +41391,9 @@ function usePreviewPlayer(preview) {
   const ctxRef = useRef63(null);
   const sourceRef = useRef63(null);
   const startedRef = useRef63(null);
-  const [playing, setPlaying] = useState77(null);
+  const [playing, setPlaying] = useState79(null);
   const cueRef = useRef63(0);
-  const [position, setPosition] = useState77(0);
+  const [position, setPosition] = useState79(0);
   const frames = preview?.original[0]?.length ?? 0;
   const duration = preview && frames > 0 ? frames / preview.sampleRate : 0;
   const currentOffset = useCallback55(() => {
@@ -41251,8 +41411,8 @@ function usePreviewPlayer(preview) {
     setPosition(0);
     setPlaying(null);
   }, []);
-  useEffect66(() => stop, [preview, stop]);
-  useEffect66(
+  useEffect67(() => stop, [preview, stop]);
+  useEffect67(
     () => () => {
       void ctxRef.current?.close();
       ctxRef.current = null;
@@ -41291,7 +41451,7 @@ function usePreviewPlayer(preview) {
     },
     [duration, playing, play]
   );
-  useEffect66(() => {
+  useEffect67(() => {
     if (!playing) return;
     let frame = requestAnimationFrame(function tick() {
       setPosition(currentOffset());
@@ -41339,14 +41499,14 @@ function MediaEditAudioSection({
   const duration = useMediaDuration(resolvedSrc);
   const windowMin = item.clipStart ?? 0;
   const windowMax = Math.max(windowMin, (item.clipEnd ?? duration ?? windowMin) - 1);
-  const [previewFrom, setPreviewFrom] = useState77(windowMin);
-  const [preview, setPreview] = useState77(null);
-  const [previewedFx, setPreviewedFx] = useState77(null);
-  const [previewing, setPreviewing] = useState77(false);
-  const [previewError, setPreviewError] = useState77(null);
+  const [previewFrom, setPreviewFrom] = useState79(windowMin);
+  const [preview, setPreview] = useState79(null);
+  const [previewedFx, setPreviewedFx] = useState79(null);
+  const [previewing, setPreviewing] = useState79(false);
+  const [previewError, setPreviewError] = useState79(null);
   const previewAbort = useRef63(null);
   const player = usePreviewPlayer(preview);
-  useEffect66(() => () => previewAbort.current?.abort(), []);
+  useEffect67(() => () => previewAbort.current?.abort(), []);
   const runPreview = useCallback55(async () => {
     if (draftFx.ops.length === 0) return;
     previewAbort.current?.abort();
@@ -41526,7 +41686,7 @@ function MediaEditAudioSection({
 }
 
 // src/mediaEdit/MediaEditTimingSection.tsx
-import { useCallback as useCallback56, useEffect as useEffect67, useRef as useRef64, useState as useState78 } from "react";
+import { useCallback as useCallback56, useEffect as useEffect68, useRef as useRef64, useState as useState80 } from "react";
 import { jsx as jsx90, jsxs as jsxs72 } from "react/jsx-runtime";
 var DEFAULT_MAX_PAUSE = 0.8;
 function formatDb(value) {
@@ -41540,11 +41700,11 @@ function MediaEditTimingSection({
   manager,
   idPrefix
 }) {
-  const [maxPause, setMaxPause] = useState78(DEFAULT_MAX_PAUSE);
-  const [finding, setFinding] = useState78(false);
-  const [error, setError] = useState78(null);
+  const [maxPause, setMaxPause] = useState80(DEFAULT_MAX_PAUSE);
+  const [finding, setFinding] = useState80(false);
+  const [error, setError] = useState80(null);
   const abortRef = useRef64(null);
-  useEffect67(() => () => abortRef.current?.abort(), []);
+  useEffect68(() => () => abortRef.current?.abort(), []);
   const findPauses = useCallback56(async () => {
     abortRef.current?.abort();
     const controller = new AbortController();
@@ -41644,7 +41804,7 @@ function MediaEditTimingSection({
 import {
   useCallback as useCallback57,
   useRef as useRef65,
-  useState as useState79
+  useState as useState81
 } from "react";
 import { normalizeMediaCrop } from "@bendyline/squisq/mediaEdit";
 import { jsx as jsx91, jsxs as jsxs73 } from "react/jsx-runtime";
@@ -41670,8 +41830,8 @@ function clampCrop(crop) {
 }
 function MediaEditFrameSection({ item, draft, onChange }) {
   const src = useResolvedMediaSrc(item.src);
-  const [frame, setFrame] = useState79(null);
-  const [aspect, setAspect] = useState79(null);
+  const [frame, setFrame] = useState81(null);
+  const [aspect, setAspect] = useState81(null);
   const stageRef = useRef65(null);
   const crop = draft.crop ?? FULL;
   const setCrop = useCallback57(
@@ -41865,21 +42025,21 @@ function MediaEditModal({ target, onClose }) {
   const { doc, markdownSource, setMarkdownSource, mediaEditRenders } = useEditorContext();
   const modalRef = useRef66(null);
   const surfaceRef = useRef66(null);
-  const titleId = useId16();
+  const titleId = useId15();
   useModalDialog({ rootRef: modalRef, dialogRef: surfaceRef, onClose });
   const item = useMemo57(() => doc ? findEditableMedia(doc, target) : null, [doc, target]);
   const companions = useMemo57(() => doc && item ? groupCompanions(doc, item) : [], [doc, item]);
   const renderStatus = useRenderStatus(item, mediaEditRenders);
-  const [draft, setDraft] = useState80(() => draftFromEdits(item?.edits));
+  const [draft, setDraft] = useState82(() => draftFromEdits(item?.edits));
   const seedKey = item ? `${item.sourceLine}|${editsSignature(item.edits)}` : null;
   const seededRef = useRef66(null);
-  useEffect68(() => {
+  useEffect69(() => {
     if (seedKey === null || seededRef.current === seedKey) return;
     seededRef.current = seedKey;
     setDraft(draftFromEdits(item?.edits));
   }, [seedKey]);
   const tabs = TABS.filter((t) => t.id !== "frame" || item?.kind === "video");
-  const [activeTab, setActiveTab] = useState80("audio");
+  const [activeTab, setActiveTab] = useState82("audio");
   const tabRefs = useRef66(/* @__PURE__ */ new Map());
   const onTabKeyDown = (event, index2) => {
     const next = event.key === "ArrowRight" ? (index2 + 1) % tabs.length : event.key === "ArrowLeft" ? (index2 - 1 + tabs.length) % tabs.length : event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : null;
@@ -42306,6 +42466,7 @@ import {
 } from "@bendyline/squisq-video-react/media-edit";
 import { Fragment as Fragment29, jsx as jsx93, jsxs as jsxs75 } from "react/jsx-runtime";
 function EditorShell({
+  ariaLabel,
   initialMarkdown = "",
   initialView = "wysiwyg",
   hostMode = "document",
@@ -42405,7 +42566,7 @@ function EditorShell({
     () => mediaEditRenders === void 0 && effectiveMediaProvider ? createMediaEditRenderManager({ mediaProvider: effectiveMediaProvider }) : null,
     [mediaEditRenders, effectiveMediaProvider]
   );
-  useEffect69(() => () => ownedMediaEditRenders?.dispose(), [ownedMediaEditRenders]);
+  useEffect70(() => () => ownedMediaEditRenders?.dispose(), [ownedMediaEditRenders]);
   const effectiveMediaEditRenders = mediaEditRenders === void 0 ? ownedMediaEditRenders : mediaEditRenders;
   const filesToggleEnabled = showFilesToggle ?? effectiveMediaProvider !== void 0;
   const effectiveInitialView = hostMode === "chat" || !showPlayTab && initialView === "preview" ? "wysiwyg" : initialView;
@@ -42457,6 +42618,7 @@ function EditorShell({
       children: /* @__PURE__ */ jsx93(ProofingRoot, { children: /* @__PURE__ */ jsx93(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx93(
         EditorShellInner,
         {
+          ariaLabel: ariaLabel ?? (hostMode === "chat" ? "Message" : fileName ? `Edit ${fileName}` : "Document editor"),
           basePath,
           defaultViewportPreset,
           onChange,
@@ -42541,6 +42703,7 @@ function UseModeProviders({
   );
 }
 function EditorShellInner({
+  ariaLabel,
   basePath,
   defaultViewportPreset,
   onChange,
@@ -42624,7 +42787,7 @@ function EditorShellInner({
   const processedAudio = useProcessedAudio4(mediaEditRenders);
   const { docThemes, onDocThemesChange } = useDocCustomThemes();
   const lastEditingView = useRef67(activeView === "raw" ? "raw" : "wysiwyg");
-  useEffect69(() => {
+  useEffect70(() => {
     if (activeView !== "preview") lastEditingView.current = activeView;
   }, [activeView]);
   const editingView = activeView === "preview" ? lastEditingView.current : activeView;
@@ -42671,14 +42834,14 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState81(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState81(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState83(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState83(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState81(false);
-  const [filesFocusPath, setFilesFocusPath] = useState81(null);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState81(0);
-  const [mediaCount, setMediaCount] = useState81(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState81(false);
+  const [showFiles, setShowFiles] = useState83(false);
+  const [filesFocusPath, setFilesFocusPath] = useState83(null);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState83(0);
+  const [mediaCount, setMediaCount] = useState83(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState83(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
   const usedMediaPaths = useMemo58(
     () => collectMediaReferencesFromMarkdown(markdownSource),
@@ -42690,13 +42853,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect69(() => {
+  useEffect70(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect69(() => {
+  useEffect70(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect69(() => {
+  useEffect70(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -42720,7 +42883,7 @@ function EditorShellInner({
       cancelled = true;
     };
   }, [mediaProvider, mediaListRefreshKey]);
-  useEffect69(() => {
+  useEffect70(() => {
     if (showFilesWhenNotEmpty && mediaCount > 0) setShowFiles(true);
   }, [mediaCount, showFilesWhenNotEmpty]);
   const handleToggleFiles = useCallback59(() => {
@@ -42740,7 +42903,7 @@ function EditorShellInner({
     [insertionTarget]
   );
   const docBasenameRef = useRef67("document");
-  useEffect69(() => {
+  useEffect70(() => {
     let cancelled = false;
     docBasenameRef.current = "document";
     void resolveDocBasename(workspaceContainer).then((base) => {
@@ -42823,7 +42986,7 @@ function EditorShellInner({
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect69(() => {
+  useEffect70(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback59((e2) => {
@@ -43017,6 +43180,7 @@ function EditorShellInner({
                                         children: /* @__PURE__ */ jsx93("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx93(
                                           RawEditor,
                                           {
+                                            ariaLabel: `${ariaLabel} \u2014 source`,
                                             monacoTheme: colorScheme === "dark" ? "vs-dark" : "vs",
                                             submitOnEnter,
                                             readOnly
@@ -43060,6 +43224,7 @@ function EditorShellInner({
                                         children: /* @__PURE__ */ jsx93(
                                           WysiwygEditor,
                                           {
+                                            ariaLabel,
                                             submitOnEnter,
                                             placeholder,
                                             readOnly,
@@ -43238,9 +43403,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState81(null);
-  const [resolveError, setResolveError] = useState81(null);
-  useEffect69(() => {
+  const [initialSrc, setInitialSrc] = useState83(null);
+  const [resolveError, setResolveError] = useState83(null);
+  useEffect70(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -43382,6 +43547,7 @@ export {
   processTextFiles,
   useDocCustomTemplates,
   platformShortcut,
+  navigateViewTabs,
   videoEmbedOfParagraph,
   videoEmbedParagraphJson,
   videoEmbedMarkdown,