@bendyline/squisq-editor-react 2.13.20 → 2.13.22

package/dist/{chunk-BTWYKCOQ.js → chunk-LZO3HOCQ.js}

@@ -51,13 +51,13 @@ import {
   documentTitleFromFileName,
   resolveBlockVisual,
   useModalDialog
-} from "./chunk-ECS2FFXA.js";
+} from "./chunk-APTVXGK6.js";
 import {
   Icon
 } from "./chunk-UYB5CPRE.js";
 import {
   TeleprompterView
-} from "./chunk-PQSFLC2R.js";
+} from "./chunk-GI2D2XS5.js";
 
 // src/useMonacoLoader.ts
 import { useEffect, useState } from "react";
@@ -780,7 +780,50 @@ function useMonacoLoader(requestedLanguages = [], options = {}) {
 }
 
 // src/VersionHistoryPanel.tsx
-import { useCallback, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import {
+  useCallback,
+  useEffect as useEffect3,
+  useLayoutEffect,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/popoverFit.ts
+var EDGE_MARGIN = 8;
+function clippingBounds(element) {
+  const viewport = { left: 0, right: document.documentElement.clientWidth };
+  for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+    if (getComputedStyle(ancestor).overflowX !== "visible") {
+      const rect = ancestor.getBoundingClientRect();
+      return {
+        left: Math.max(rect.left, viewport.left),
+        right: Math.min(rect.right, viewport.right)
+      };
+    }
+  }
+  return viewport;
+}
+function fitPopoverWithinClip(popover) {
+  popover.style.left = "";
+  popover.style.right = "";
+  popover.style.width = "";
+  popover.style.minWidth = "";
+  const bounds = clippingBounds(popover);
+  const min = bounds.left + EDGE_MARGIN;
+  const max = bounds.right - EDGE_MARGIN;
+  if (popover.getBoundingClientRect().width > max - min) {
+    popover.style.minWidth = "0";
+    popover.style.width = `${Math.max(0, max - min)}px`;
+  }
+  const rect = popover.getBoundingClientRect();
+  let shift = rect.right > max ? max - rect.right : 0;
+  if (rect.left + shift < min) shift = min - rect.left;
+  if (shift !== 0) {
+    popover.style.left = `${popover.offsetLeft + shift}px`;
+    popover.style.right = "auto";
+  }
+}
 
 // src/useEscapeDismissal.ts
 import { useEffect as useEffect2, useRef } from "react";
@@ -877,6 +920,7 @@ function VersionHistoryPanel() {
   const [state, setState3] = useState2(initialState);
   const containerRef = useRef2(null);
   const triggerRef = useRef2(null);
+  const popoverRef = useRef2(null);
   const close = useCallback(() => setOpen(false), []);
   useEscapeDismissal(open, close, triggerRef);
   const refresh = useCallback(async () => {
@@ -972,6 +1016,9 @@ function VersionHistoryPanel() {
   );
   const hasDiff = state.selected !== null;
   const diffTheme = colorScheme === "dark" ? "vs-dark" : "vs";
+  useLayoutEffect(() => {
+    if (open && popoverRef.current) fitPopoverWithinClip(popoverRef.current);
+  }, [open, hasDiff]);
   if (!versioning) return null;
   return /* @__PURE__ */ jsxs("div", { className: "squisq-version-history", ref: containerRef, children: [
     /* @__PURE__ */ jsx(
@@ -990,6 +1037,7 @@ function VersionHistoryPanel() {
     open && /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: popoverRef,
         className: `squisq-version-history-popover${hasDiff ? " squisq-version-history-popover--with-diff" : ""}`,
         role: "dialog",
         "aria-label": "Version history",
@@ -1105,7 +1153,7 @@ function VersionHistoryPanel() {
 }
 
 // src/ThemePicker.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useId, useLayoutEffect, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useId, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import {
   getThemeSummaries,
@@ -1267,7 +1315,7 @@ function ThemePicker({
     setOpen(false);
     triggerRef.current?.focus();
   };
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!open) return;
     const options = popoverRef.current?.querySelectorAll('[role="option"]');
     const selected = popoverRef.current?.querySelector('[aria-selected="true"]');
@@ -2426,7 +2474,7 @@ import {
   useState as useState7,
   useMemo as useMemo6,
   useEffect as useEffect7,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useRef as useRef6
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -3332,12 +3380,14 @@ var DISPLAY_MODE_OPTIONS = [
   {
     key: "slideshow",
     label: "Slideshow",
+    shortLabel: "Slides",
     icon: "fa-solid fa-images",
     summary: "Present designed slides one at a time."
   },
   {
     key: "flashcards",
     label: "Flashcards",
+    shortLabel: "Cards",
     icon: "fa-solid fa-clone",
     summary: "Study with progressive reveals and quizzes."
   },
@@ -3356,12 +3406,14 @@ var DISPLAY_MODE_OPTIONS = [
   {
     key: "dashboard",
     label: "Dashboard",
+    shortLabel: "Board",
     icon: "fa-solid fa-table-cells-large",
     summary: "See every block arranged on one canvas."
   },
   {
     key: "page",
     label: "Document",
+    shortLabel: "Doc",
     icon: "fa-solid fa-align-left",
     summary: "Read a clean, text-first document."
   },
@@ -3375,6 +3427,10 @@ var DISPLAY_MODE_OPTIONS = [
 function displayModeLabel(mode) {
   return DISPLAY_MODE_OPTIONS.find((option) => option.key === mode)?.label ?? "Slideshow";
 }
+function displayModeShortLabel(mode) {
+  const option = DISPLAY_MODE_OPTIONS.find((candidate) => candidate.key === mode);
+  return option?.shortLabel ?? option?.label ?? "Slides";
+}
 var TRANSFORM_STYLE_OPTIONS = [
   { key: "", label: "None" },
   ...getTransformStyleSummaries2().map((s) => ({ key: s.id, label: s.name }))
@@ -3800,7 +3856,7 @@ function PreviewToolbarControls({
     setPopoverOpen(false);
     setPopoverAnchor(null);
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const root = rootRef.current;
     const probe = probeRef.current;
     if (!root || !probe) return;
@@ -3841,7 +3897,7 @@ function PreviewToolbarControls({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [closePopover, popoverOpen]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!popoverOpen) return;
     updatePopoverPosition();
   }, [popoverOpen, updatePopoverPosition, visibleCount]);
@@ -4289,7 +4345,7 @@ function PreviewSelect({
 }
 
 // src/toolbar/ViewModeMenu.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useId as useId2, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useId as useId2, useLayoutEffect as useLayoutEffect4, useRef as useRef7, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var VIEW_MODE_MENU_WIDTH = 340;
@@ -4363,7 +4419,7 @@ function ViewModeMenu({
       window.removeEventListener("scroll", updatePosition, true);
     };
   }, [closeMenu, open, updatePosition]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!open || !anchor) return;
     const checked = menuRef.current?.querySelector('[aria-checked="true"]');
     const first = menuRef.current?.querySelector('[role="menuitemradio"]');
@@ -4475,14 +4531,14 @@ function PreviewModeMenu({ openRequest = 0 }) {
 }
 
 // src/ViewMenuPanel.tsx
-import { useCallback as useCallback10, useEffect as useEffect11, useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState13 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect12, useLayoutEffect as useLayoutEffect7, 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";
+import { useLayoutEffect as useLayoutEffect5, useState as useState9 } from "react";
 function useAnchoredPopover(open, triggerRef, popoverRef) {
   const [style, setStyle] = useState9({ position: "fixed", visibility: "hidden" });
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!open) return;
     const position = () => {
       const trigger = triggerRef.current;
@@ -4667,6 +4723,34 @@ function proofingDecorationById(state, findingId) {
   return { findingId: spec.findingId, category: spec.category, from: hit.from, to: hit.to };
 }
 
+// src/proofing/proofingTap.ts
+var lastPointerDownType = "";
+var trackers = 0;
+function notePointerDown(event) {
+  lastPointerDownType = event.pointerType ?? "";
+}
+function trackTapPointers() {
+  if (trackers === 0) window.addEventListener("pointerdown", notePointerDown, true);
+  trackers += 1;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    trackers -= 1;
+    if (trackers === 0) window.removeEventListener("pointerdown", notePointerDown, true);
+  };
+}
+function isTapClick(event) {
+  const own = event.pointerType;
+  const type = typeof own === "string" ? own : event.detail > 0 ? lastPointerDownType : "";
+  return type === "touch" || type === "pen";
+}
+function proofingTapTarget(event) {
+  if (!isTapClick(event)) return null;
+  const target = event.target;
+  return target?.closest?.("[data-proof-id]") ?? null;
+}
+
 // src/proofing/writeViewText.ts
 function collectTextblockRuns(doc) {
   const runs = [];
@@ -4789,7 +4873,15 @@ var engineIgnoreOwner = /* @__PURE__ */ new WeakMap();
 function categoryEnabled(finding, filter) {
   return finding.category === "spelling" ? filter.spelling : filter.grammar;
 }
-function useProofing() {
+function findSquiggle(root, findingId) {
+  for (const span of root.querySelectorAll("[data-proof-id]")) {
+    if (span.getAttribute("data-proof-id") === findingId) return span;
+  }
+  return null;
+}
+function useProofing({
+  canOpenLinks = false
+} = {}) {
   const {
     proofing,
     proofingDefaultEnabled,
@@ -4833,6 +4925,11 @@ function useProofing() {
   const hoverCloseTimerRef = useRef8(void 0);
   const hoveredFindingRef = useRef8(null);
   const hoverHeldRef = useRef8(false);
+  const tapCardRef = useRef8(null);
+  const tapDismissedRef = useRef8(null);
+  const canOpenLinksRef = useRef8(canOpenLinks);
+  canOpenLinksRef.current = canOpenLinks;
+  const carryHoverRef = useRef8(() => void 0);
   const settings = useMemo7(() => readProofingSettings(markdownDoc?.frontmatter), [markdownDoc]);
   const anyCategoryEnabled = proofingSpellingEnabled || proofingGrammarEnabled;
   const enabled = proofing != null && editorMode === "markdown" && anyCategoryEnabled && (sessionEnabled ?? settings.enabled ?? proofingDefaultEnabled);
@@ -4950,10 +5047,18 @@ function useProofing() {
           });
           kept.push(finding);
         }
+        const openId = hoveredFindingRef.current;
+        const openRange = openId === null ? null : proofingDecorationById(editor.state, openId);
         lastWriteDecorationsRef.current = decorated;
         updateTiptapProofingDecorations(editor, decorated);
         setFindings(kept);
         setFindingsView("wysiwyg");
+        if (openId !== null) {
+          const successor = openRange ? decorated.find(
+            (decoration) => decoration.from === openRange.from && decoration.to === openRange.to && decoration.category === openRange.category
+          ) : void 0;
+          carryHoverRef.current(successor?.findingId ?? null);
+        }
       } else if (view === "raw") {
         const editor = monacoRef.current;
         const model2 = editor?.getModel();
@@ -5126,7 +5231,14 @@ function useProofing() {
       const hit = proofingDecorationAt(editor.state, pos.pos);
       if (!hit) return;
       event.preventDefault();
-      openMenuRef.current({ findingId: hit.findingId, x: event.clientX, y: event.clientY });
+      const target = event.target;
+      const linkHref = canOpenLinksRef.current && isTapClick(event) ? target?.closest?.("a[href]")?.getAttribute("href") : null;
+      openMenuRef.current({
+        findingId: hit.findingId,
+        x: event.clientX,
+        y: event.clientY,
+        ...linkHref ? { linkHref } : {}
+      });
     };
     const onKeyDown = (event) => {
       if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
@@ -5154,8 +5266,21 @@ function useProofing() {
     cancelHoverTimers();
     hoveredFindingRef.current = null;
     hoverHeldRef.current = false;
+    tapCardRef.current = null;
     setHoverAnchor(null);
   }, [cancelHoverTimers]);
+  carryHoverRef.current = (successorId) => {
+    if (successorId === null) {
+      closeHover();
+      return;
+    }
+    const retired = hoveredFindingRef.current;
+    hoveredFindingRef.current = successorId;
+    if (tapCardRef.current !== null) tapCardRef.current = successorId;
+    setHoverAnchor(
+      (current) => current && current.findingId === retired ? { ...current, findingId: successorId } : current
+    );
+  };
   const scheduleHoverClose = useCallback9(() => {
     if (hoverOpenTimerRef.current !== void 0) {
       window.clearTimeout(hoverOpenTimerRef.current);
@@ -5166,6 +5291,7 @@ function useProofing() {
       hoverCloseTimerRef.current = void 0;
       if (hoverHeldRef.current) return;
       hoveredFindingRef.current = null;
+      tapCardRef.current = null;
       setHoverAnchor(null);
     }, HOVER_CLOSE_DELAY_MS);
   }, []);
@@ -5185,7 +5311,8 @@ function useProofing() {
     const editor = tiptapEditor;
     if (!editor || editor.isDestroyed) return;
     const dom = editor.view.dom;
-    const onMouseMove = (event) => {
+    const onPointerMove = (event) => {
+      if (event.pointerType === "touch" || tapCardRef.current !== null) return;
       const target = event.target;
       const span = target?.closest?.("[data-proof-id]");
       const findingId = span?.getAttribute("data-proof-id") ?? null;
@@ -5206,25 +5333,117 @@ function useProofing() {
       setHoverAnchor(null);
       hoverOpenTimerRef.current = window.setTimeout(() => {
         hoverOpenTimerRef.current = void 0;
-        const rect = span.getBoundingClientRect();
-        setHoverAnchor({ findingId, left: rect.left, top: rect.top, bottom: rect.bottom });
+        const dwelt = hoveredFindingRef.current;
+        const live = dwelt === null ? null : findSquiggle(dom, dwelt);
+        if (dwelt === null || !live) {
+          hoveredFindingRef.current = null;
+          return;
+        }
+        const rect = live.getBoundingClientRect();
+        setHoverAnchor({
+          findingId: dwelt,
+          left: rect.left,
+          top: rect.top,
+          bottom: rect.bottom,
+          trigger: "hover"
+        });
       }, HOVER_DELAY_MS);
     };
-    const onMouseLeave = () => {
+    const onPointerLeave = (event) => {
+      if (event.pointerType === "touch" || tapCardRef.current !== null) return;
       if (hoveredFindingRef.current !== null) scheduleHoverClose();
     };
-    dom.addEventListener("mousemove", onMouseMove);
-    dom.addEventListener("mouseleave", onMouseLeave);
+    const onPress = (event) => {
+      tapDismissedRef.current = null;
+      const open = tapCardRef.current;
+      if (open === null) return;
+      const target = event.target;
+      if (target?.closest?.(".squisq-proof-tooltip")) return;
+      const pressed = target?.closest?.("[data-proof-id]");
+      if (pressed && dom.contains(pressed) && pressed.getAttribute("data-proof-id") === open) {
+        tapDismissedRef.current = open;
+      }
+      closeHover();
+    };
+    const onClick = (event) => {
+      const span = proofingTapTarget(event);
+      const findingId = span?.getAttribute("data-proof-id");
+      if (!span || !findingId) return;
+      if (tapDismissedRef.current === findingId) {
+        tapDismissedRef.current = null;
+        return;
+      }
+      const linkHref = canOpenLinksRef.current ? span.closest("a[href]")?.getAttribute("href") : null;
+      if (linkHref) event.preventDefault();
+      cancelHoverTimers();
+      hoverHeldRef.current = false;
+      hoveredFindingRef.current = findingId;
+      tapCardRef.current = findingId;
+      const rect = span.getBoundingClientRect();
+      setHoverAnchor({
+        findingId,
+        left: rect.left,
+        top: rect.top,
+        bottom: rect.bottom,
+        trigger: "tap",
+        ...linkHref ? { linkHref } : {}
+      });
+    };
+    const onScroll = () => {
+      if (tapCardRef.current === null) closeHover();
+    };
+    const onKeyDown = () => {
+      if (tapCardRef.current !== null) closeHover();
+    };
+    const releaseTapPointers = trackTapPointers();
+    dom.addEventListener("pointermove", onPointerMove);
+    dom.addEventListener("pointerleave", onPointerLeave);
     dom.addEventListener("mousedown", closeHover);
-    window.addEventListener("scroll", closeHover, true);
+    dom.addEventListener("click", onClick);
+    dom.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPress, true);
+    window.addEventListener("scroll", onScroll, true);
     return () => {
-      dom.removeEventListener("mousemove", onMouseMove);
-      dom.removeEventListener("mouseleave", onMouseLeave);
+      releaseTapPointers();
+      dom.removeEventListener("pointermove", onPointerMove);
+      dom.removeEventListener("pointerleave", onPointerLeave);
       dom.removeEventListener("mousedown", closeHover);
-      window.removeEventListener("scroll", closeHover, true);
+      dom.removeEventListener("click", onClick);
+      dom.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPress, true);
+      window.removeEventListener("scroll", onScroll, true);
+      tapDismissedRef.current = null;
       closeHover();
     };
   }, [tiptapEditor, enabled, status, cancelHoverTimers, closeHover, scheduleHoverClose]);
+  const tapCardId = hoverAnchor?.trigger === "tap" ? hoverAnchor.findingId : null;
+  useEffect9(() => {
+    if (tapCardId === null) return;
+    let frame = 0;
+    const follow = () => {
+      frame = 0;
+      const editor = tiptapRef.current;
+      const span = editor && !editor.isDestroyed ? findSquiggle(editor.view.dom, tapCardId) : null;
+      if (!span) {
+        closeHover();
+        return;
+      }
+      const rect = span.getBoundingClientRect();
+      setHoverAnchor(
+        (current) => current && current.findingId === tapCardId && (current.left !== rect.left || current.top !== rect.top || current.bottom !== rect.bottom) ? { ...current, left: rect.left, top: rect.top, bottom: rect.bottom } : current
+      );
+    };
+    const schedule2 = () => {
+      if (frame === 0) frame = requestAnimationFrame(follow);
+    };
+    window.addEventListener("scroll", schedule2, true);
+    window.addEventListener("resize", schedule2);
+    return () => {
+      if (frame !== 0) cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule2, true);
+      window.removeEventListener("resize", schedule2);
+    };
+  }, [tapCardId, closeHover]);
   useEffect9(() => {
     if (!enabled || status !== "ready") return;
     const editor = monacoEditor;
@@ -5599,6 +5818,7 @@ function ProofingMenu({
   onAddToAppDictionary,
   onAddToDocWordList,
   canAddToAppDictionary,
+  onOpenLink,
   onClose
 }) {
   const menuRef = useRef9(null);
@@ -5609,16 +5829,16 @@ function ProofingMenu({
   }, [anchor]);
   useEscapeDismissal(true, onClose);
   useEffect10(() => {
-    const onMouse = (event) => {
+    const onPress = (event) => {
       if (!menuRef.current?.contains(event.target)) onClose();
     };
     const onScrollOrResize = () => onClose();
-    const id = requestAnimationFrame(() => document.addEventListener("mousedown", onMouse));
+    const id = requestAnimationFrame(() => document.addEventListener("pointerdown", onPress));
     window.addEventListener("scroll", onScrollOrResize, true);
     window.addEventListener("resize", onScrollOrResize);
     return () => {
       cancelAnimationFrame(id);
-      document.removeEventListener("mousedown", onMouse);
+      document.removeEventListener("pointerdown", onPress);
       window.removeEventListener("scroll", onScrollOrResize, true);
       window.removeEventListener("resize", onScrollOrResize);
     };
@@ -5643,7 +5863,8 @@ function ProofingMenu({
         label: "Add to document word list",
         run: onAddToDocWordList
       }
-    ] : []
+    ] : [],
+    ...onOpenLink ? [{ key: "open-link", label: "Open link", run: onOpenLink }] : []
   ];
   useEffect10(() => {
     const items = menuRef.current?.querySelectorAll('[role="menuitem"]');
@@ -5696,23 +5917,35 @@ function ProofingMenu({
 }
 
 // src/proofing/ProofingTooltip.tsx
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef10, useState as useState12 } from "react";
+import { useEffect as useEffect11, useLayoutEffect as useLayoutEffect6, useRef as useRef10, useState as useState12 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var MAX_SUGGESTIONS2 = 3;
+function visibleBounds() {
+  const viewport = window.visualViewport;
+  if (!viewport) return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
+  return {
+    top: viewport.offsetTop,
+    left: viewport.offsetLeft,
+    width: viewport.width,
+    height: viewport.height
+  };
+}
 function computeStyle2(anchor, element) {
   const rect = element?.getBoundingClientRect();
   const width = rect?.width ?? 240;
   const height = rect?.height ?? 72;
   const margin = 8;
   const gap = 6;
+  const view = visibleBounds();
   let top = anchor.bottom + gap;
-  if (top + height + margin > window.innerHeight && anchor.top - height - gap >= margin) {
+  if (top + height + margin > view.top + view.height && anchor.top - height - gap >= view.top + margin) {
     top = anchor.top - height - gap;
   }
+  const minLeft = view.left + margin;
   const left = Math.min(
-    Math.max(margin, anchor.left),
-    Math.max(margin, window.innerWidth - width - margin)
+    Math.max(minLeft, anchor.left),
+    Math.max(minLeft, view.left + view.width - width - margin)
   );
   return { position: "fixed", top, left, zIndex: 9998 };
 }
@@ -5727,13 +5960,26 @@ function ProofingTooltip({
   canAddToAppDictionary,
   onMore,
   onHold,
-  onRelease
+  onRelease,
+  linkHref,
+  onOpenLink
 }) {
   const tooltipRef = useRef10(null);
   const [style, setStyle] = useState12(() => computeStyle2(anchor));
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     setStyle(computeStyle2(anchor, tooltipRef.current));
-  }, [anchor, finding.id]);
+  }, [anchor, finding.id, linkHref]);
+  useEffect11(() => {
+    const viewport = window.visualViewport;
+    if (!viewport) return;
+    const place = () => setStyle(computeStyle2(anchor, tooltipRef.current));
+    viewport.addEventListener("resize", place);
+    viewport.addEventListener("scroll", place);
+    return () => {
+      viewport.removeEventListener("resize", place);
+      viewport.removeEventListener("scroll", place);
+    };
+  }, [anchor]);
   const suggestions = finding.suggestions.slice(0, MAX_SUGGESTIONS2);
   const extra = finding.suggestions.length - suggestions.length;
   const showAddWord = finding.category === "spelling";
@@ -5744,6 +5990,7 @@ function ProofingTooltip({
         ref: tooltipRef,
         className: "squisq-proof-tooltip",
         "data-theme": colorScheme,
+        "data-trigger": anchor.trigger,
         "data-proof-tooltip-id": finding.id,
         role: "group",
         "aria-label": `${PROOF_CATEGORY_LABELS[finding.category]} suggestion`,
@@ -5805,6 +6052,10 @@ function ProofingTooltip({
                 children: "Add to document word list"
               }
             )
+          ] }),
+          linkHref && /* @__PURE__ */ jsxs9("div", { className: "squisq-proof-tooltip-link", children: [
+            /* @__PURE__ */ jsx11("button", { type: "button", className: "squisq-proof-tooltip-action", onClick: onOpenLink, children: "Open link" }),
+            /* @__PURE__ */ jsx11("span", { className: "squisq-proof-tooltip-link-href", children: linkHref })
           ] })
         ]
       }
@@ -5819,11 +6070,13 @@ var ProofingStateContext = createContext3(null);
 function useProofingState() {
   return useContext3(ProofingStateContext);
 }
-function ProofingRoot({ children }) {
+function ProofingRoot({ children, onLinkClick }) {
   const { colorScheme } = useEditorContext();
-  const state = useProofing();
+  const state = useProofing({ canOpenLinks: onLinkClick != null });
   const menuFinding = state?.menuAnchor != null ? state.findings.find((finding) => finding.id === state.menuAnchor?.findingId) ?? null : null;
   const hoverFinding = state?.hoverAnchor != null && !state.menuAnchor ? state.findings.find((finding) => finding.id === state.hoverAnchor?.findingId) ?? null : null;
+  const menuLink = state?.menuAnchor?.linkHref;
+  const hoverLink = state?.hoverAnchor?.linkHref;
   return /* @__PURE__ */ jsxs10(ProofingStateContext.Provider, { value: state, children: [
     children,
     state && state.menuAnchor && menuFinding && /* @__PURE__ */ jsx12(
@@ -5832,6 +6085,10 @@ function ProofingRoot({ children }) {
         anchor: state.menuAnchor,
         finding: menuFinding,
         colorScheme,
+        onOpenLink: menuLink ? () => {
+          state.closeMenu();
+          onLinkClick?.(menuLink);
+        } : void 0,
         onApply: (index2) => {
           state.applySuggestion(menuFinding.id, index2);
           state.closeMenu();
@@ -5875,7 +6132,12 @@ function ProofingRoot({ children }) {
           state.closeHover();
         },
         canAddToAppDictionary: state.canAddToAppDictionary,
-        onMore: (x, y) => state.openMenu({ findingId: hoverFinding.id, x, y }),
+        linkHref: hoverLink,
+        onOpenLink: () => {
+          state.closeHover();
+          if (hoverLink) onLinkClick?.(hoverLink);
+        },
+        onMore: (x, y) => state.openMenu({ findingId: hoverFinding.id, x, y, linkHref: hoverLink }),
         onHold: state.holdHover,
         onRelease: state.releaseHover
       }
@@ -5908,12 +6170,12 @@ function ViewMenuPanel() {
   const popoverStyle = useAnchoredPopover(open, triggerRef, menuRef);
   const close = useCallback10(() => setOpen(false), []);
   useEscapeDismissal(open, close, triggerRef);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     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(() => {
+  useEffect12(() => {
     if (!open) return;
     const handler = (e2) => {
       if (containerRef.current && !containerRef.current.contains(e2.target) && !menuRef.current?.contains(e2.target)) {
@@ -6101,7 +6363,7 @@ function MenuRadioGroup({
 }
 
 // src/TransformMenu.tsx
-import { useCallback as useCallback11, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef12, useState as useState14 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef12, useState as useState14 } from "react";
 import {
   MARKDOWN_SOURCE_TRANSFORMS,
   DEFAULT_WRAP_WIDTH,
@@ -6146,7 +6408,7 @@ function TransformMenu() {
   const triggerRef = useRef12(null);
   const close = useCallback11(() => setOpen(false), []);
   useEscapeDismissal(open, close, triggerRef);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open) return;
     const handler = (e2) => {
       if (containerRef.current && !containerRef.current.contains(e2.target)) {
@@ -6156,7 +6418,7 @@ function TransformMenu() {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (open) setStatus("");
   }, [open]);
   const wrapState = useMemo8(
@@ -6305,7 +6567,7 @@ import {
   createContext as createContext4,
   useCallback as useCallback12,
   useContext as useContext4,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useMemo as useMemo9,
   useState as useState15
 } from "react";
@@ -6377,7 +6639,7 @@ function CustomTemplateProvider({
   const [libraryTemplates, setLibraryTemplates] = useState15(
     () => listLibraryTemplates()
   );
-  useEffect13(() => {
+  useEffect14(() => {
     setLibraryTemplates(listLibraryTemplates());
     const onStorage = (event) => {
       if (event.key === LIBRARY_STORAGE_KEY) setLibraryTemplates(listLibraryTemplates());
@@ -6447,7 +6709,7 @@ function useCustomTemplates() {
 }
 
 // src/TemplatePicker.tsx
-import { useEffect as useEffect14, useId as useId3, useMemo as useMemo11, useRef as useRef13, useState as useState16 } from "react";
+import { useEffect as useEffect15, 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";
@@ -7244,6 +7506,90 @@ var TEMPLATE_ENTRIES = [
       /* @__PURE__ */ jsx19("rect", { x: 39, y: 26, width: 12, height: 3, rx: 1, fill: F2 })
     ] })
   },
+  {
+    name: "stats",
+    label: "Key Numbers",
+    description: "Sets two to six key figures side by side, each counting up over what it measures.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx19("rect", { x: 4, y: 5, width: 30, height: 4, rx: 1, fill: F2 }),
+      [4, 22, 40].map((x) => /* @__PURE__ */ jsxs14("g", { children: [
+        /* @__PURE__ */ jsx19("rect", { x, y: 15, width: 12, height: 9, rx: 1.5, fill: FA }),
+        /* @__PURE__ */ jsx19("rect", { x, y: 28, width: 13, height: 2.5, rx: 1, fill: F2 }),
+        /* @__PURE__ */ jsx19("rect", { x, y: 33, width: 9, height: 2.5, rx: 1, fill: F1 })
+      ] }, x))
+    ] })
+  },
+  {
+    name: "pyramid",
+    label: "Pyramid",
+    description: "Stacks a hierarchy as a pyramid, the apex first and the base last.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx19("path", { d: "M 18 6 L 23 15 L 13 15 Z", fill: FA }),
+      /* @__PURE__ */ jsx19("path", { d: "M 12.2 16.5 L 23.8 16.5 L 29 26 L 7 26 Z", fill: FA, opacity: 0.65 }),
+      /* @__PURE__ */ jsx19("path", { d: "M 6.2 27.5 L 29.8 27.5 L 35 37 L 1 37 Z", fill: FA, opacity: 0.35 }),
+      /* @__PURE__ */ jsx19("rect", { x: 39, y: 9, width: 13, height: 3, rx: 1, fill: F2 }),
+      /* @__PURE__ */ jsx19("rect", { x: 39, y: 20, width: 13, height: 3, rx: 1, fill: F2 }),
+      /* @__PURE__ */ jsx19("rect", { x: 39, y: 31, width: 13, height: 3, rx: 1, fill: F2 })
+    ] })
+  },
+  {
+    name: "funnel",
+    label: "Funnel",
+    description: "Draws stages that narrow as a funnel, the widest first and the outcome last.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx19("path", { d: "M 2 6 L 34 6 L 30 15 L 6 15 Z", fill: FA, opacity: 0.35 }),
+      /* @__PURE__ */ jsx19("path", { d: "M 6.7 16.5 L 29.3 16.5 L 25.5 26 L 10.5 26 Z", fill: FA, opacity: 0.65 }),
+      /* @__PURE__ */ jsx19("path", { d: "M 11.2 27.5 L 24.8 27.5 L 21.5 37 L 14.5 37 Z", fill: FA }),
+      /* @__PURE__ */ jsx19("rect", { x: 39, y: 9, width: 13, height: 3, rx: 1, fill: F2 }),
+      /* @__PURE__ */ jsx19("rect", { x: 39, y: 20, width: 13, height: 3, rx: 1, fill: F2 }),
+      /* @__PURE__ */ jsx19("rect", { x: 39, y: 31, width: 13, height: 3, rx: 1, fill: F2 })
+    ] })
+  },
+  {
+    name: "hub",
+    label: "Hub",
+    description: "Arranges ideas around the one thing they share, each joined to it by a spoke.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      [
+        [10, 9],
+        [10, 33],
+        [46, 9],
+        [46, 33]
+      ].map(([x, y]) => /* @__PURE__ */ jsxs14("g", { children: [
+        /* @__PURE__ */ jsx19("line", { x1: 28, y1: 21, x2: x, y2: y, stroke: FA, strokeWidth: 1.5, opacity: 0.6 }),
+        /* @__PURE__ */ jsx19("circle", { cx: x, cy: y, r: 3, fill: FA })
+      ] }, `${x}-${y}`)),
+      /* @__PURE__ */ jsx19("circle", { cx: 28, cy: 21, r: 7, fill: FA })
+    ] })
+  },
+  {
+    name: "venn",
+    label: "Venn",
+    description: "Draws two sets as overlapping circles, with what they share in the overlap.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx19("circle", { cx: 21, cy: 19, r: 12, fill: FA, opacity: 0.5 }),
+      /* @__PURE__ */ jsx19("circle", { cx: 35, cy: 19, r: 12, fill: F2, opacity: 0.6 }),
+      /* @__PURE__ */ jsx19("rect", { x: 20, y: 36, width: 16, height: 3, rx: 1, fill: F2 })
+    ] })
+  },
+  {
+    name: "matrix",
+    label: "Matrix",
+    description: "Places four ideas on two axes as a two-by-two grid.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx19("line", { x1: 5, y1: 36, x2: 5, y2: 5, stroke: F2, strokeWidth: 1.5 }),
+      /* @__PURE__ */ jsx19("line", { x1: 5, y1: 36, x2: 52, y2: 36, stroke: F2, strokeWidth: 1.5 }),
+      [
+        [9, 5],
+        [31, 5],
+        [9, 20],
+        [31, 20]
+      ].map(([x, y]) => /* @__PURE__ */ jsxs14("g", { children: [
+        /* @__PURE__ */ jsx19("rect", { x, y, width: 20, height: 13, rx: 2, fill: F2, opacity: 0.35 }),
+        /* @__PURE__ */ jsx19("rect", { x: x + 2, y: y + 3, width: 6, height: 2, rx: 1, fill: FA })
+      ] }, `${x}-${y}`))
+    ] })
+  },
   {
     name: "photoGrid",
     label: "Photo Grid",
@@ -7590,7 +7936,7 @@ function TemplatePicker({
     updateDialogBounds();
     setOpen((v2) => !v2);
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (!open) return;
     const handler = (e2) => {
       const target = e2.target;
@@ -7603,7 +7949,7 @@ function TemplatePicker({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!open) return;
     requestAnimationFrame(updateDialogBounds);
     const handler = () => updateDialogBounds();
@@ -7825,7 +8171,7 @@ function TemplateGalleryBody({
   const searchRef = useRef13(null);
   const customCtx = useCustomTemplates();
   const customTemplates = useMemo11(() => customCtx?.allTemplates ?? [], [customCtx]);
-  useEffect14(() => {
+  useEffect15(() => {
     searchRef.current?.focus();
   }, []);
   const trimmedQuery = query.trim().toLowerCase();
@@ -8046,11 +8392,11 @@ function TemplateBadgePopover({
   const [style, setStyle] = useState16(() => computeDialogStyle(anchorRect));
   const dialogRef = useRef13(null);
   const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId3().replace(/:/g, "")}`;
-  useEffect14(() => {
+  useEffect15(() => {
     const frame = requestAnimationFrame(() => setStyle(computeDialogStyle(anchorRect)));
     return () => cancelAnimationFrame(frame);
   }, [anchorRect]);
-  useEffect14(() => {
+  useEffect15(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -8384,7 +8730,7 @@ function transitionLabel(value) {
 }
 
 // src/TransitionPicker.tsx
-import { useEffect as useEffect15, useMemo as useMemo12, useRef as useRef14, useState as useState17 } from "react";
+import { useEffect as useEffect16, 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 jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -8423,7 +8769,7 @@ function TransitionPicker({
     updatePosition();
     setOpen((v2) => !v2);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open) return;
     const handler = (e2) => {
       const target = e2.target;
@@ -8434,7 +8780,7 @@ function TransitionPicker({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open) return;
     requestAnimationFrame(updatePosition);
     const handler = () => updatePosition();
@@ -8503,7 +8849,7 @@ function TransitionFlyout({
 }) {
   const [query, setQuery] = useState17("");
   const searchRef = useRef14(null);
-  useEffect15(() => {
+  useEffect16(() => {
     searchRef.current?.focus();
   }, []);
   const trimmed = query.trim().toLowerCase();
@@ -8660,7 +9006,7 @@ function normalizeDir(direction) {
 }
 
 // src/hooks/useFileDrop.ts
-import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRef15, useState as useState18 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect17, useRef as useRef15, useState as useState18 } from "react";
 var MEDIA_EXTENSIONS = /* @__PURE__ */ new Set([
   "png",
   "apng",
@@ -8746,7 +9092,7 @@ function useFileDrop({ onDrop, enabled = true }) {
   const [dragContentType, setDragContentType] = useState18(null);
   const dragCounterRef = useRef15(0);
   const inPageDragRef = useRef15(false);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!enabled) return;
     const onStart = () => {
       inPageDragRef.current = true;
@@ -9092,7 +9438,7 @@ import {
   createContext as createContext5,
   useCallback as useCallback14,
   useContext as useContext5,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useMemo as useMemo13,
   useRef as useRef16,
   useState as useState19
@@ -9915,7 +10261,7 @@ function useEditorContextMenuItems(items) {
   if (!registry) {
     throw new Error("useEditorContextMenuItems must be used within an <EditorShell>");
   }
-  useEffect17(() => registry.register(() => itemsRef.current), [registry]);
+  useEffect18(() => registry.register(() => itemsRef.current), [registry]);
 }
 function selectedTextFromBrowser(content) {
   const selection = window.getSelection();
@@ -10337,7 +10683,7 @@ function EditorContextMenuProvider({
     },
     [buildInteraction, tiptapEditor]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     const root = rootRef.current;
     if (!root) return;
     const onContextMenu = (event) => {
@@ -10362,7 +10708,7 @@ function EditorContextMenuProvider({
       root.removeEventListener("keydown", onKeyDown);
     };
   }, [openAt, rootRef]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!menu) return;
     const frame = requestAnimationFrame(() => {
       setMenuStyle(computeMenuStyle(menu, menuRef.current));
@@ -10469,7 +10815,7 @@ function EditorContextMenuProvider({
 }
 
 // src/DocumentSettingsDialog.tsx
-import { useCallback as useCallback15, useEffect as useEffect18, useId as useId4, useMemo as useMemo14, useRef as useRef17, useState as useState20 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect19, useId as useId4, useMemo as useMemo14, useRef as useRef17, useState as useState20 } from "react";
 import {
   inferDocumentTitle,
   parseMarkdown as parseMarkdown3,
@@ -10567,7 +10913,7 @@ function DocumentSettingsDialog({
   const currentPageTemplate = readPageTemplate(frontmatter);
   const [pageTemplate, setPageTemplate] = useState20(currentPageTemplate);
   const [templateChoices, setTemplateChoices] = useState20({ status: "loading", choices: [] });
-  useEffect18(() => {
+  useEffect19(() => {
     if (!pageTemplates) return;
     let current = true;
     pageTemplates.listTemplates().then(
@@ -12117,7 +12463,7 @@ function searchPickerEntries(query, limit = 80) {
 }
 
 // src/EmojiPicker.tsx
-import { useEffect as useEffect19, useMemo as useMemo15, useRef as useRef18, useState as useState21 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo15, useRef as useRef18, useState as useState21 } from "react";
 import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var LIGHT_PALETTE = {
   bg: "#fff",
@@ -12174,7 +12520,7 @@ function EmojiPicker({
   const popoverRef = useRef18(null);
   useEscapeDismissal(open, onClose, anchorRef);
   const searchInputRef = useRef18(null);
-  useEffect19(() => {
+  useEffect20(() => {
     if (open) {
       const t = setTimeout(() => searchInputRef.current?.focus(), 0);
       return () => clearTimeout(t);
@@ -12183,7 +12529,7 @@ function EmojiPicker({
     setActiveCategory(PICKER_CATEGORIES[0].id);
     return void 0;
   }, [open]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open) return;
     const onPointerDown = (e2) => {
       const target = e2.target;
@@ -12298,7 +12644,7 @@ function EmojiPicker({
               minHeight: 0,
               overflowY: "auto",
               display: "grid",
-              gridTemplateColumns: "repeat(10, 1fr)",
+              gridTemplateColumns: "repeat(auto-fill, minmax(max(36px, calc((100% - 18px) / 10)), 1fr))",
               gap: 2
             },
             children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx24(
@@ -12591,7 +12937,7 @@ async function addFileToDocument(file, target, storage) {
 }
 
 // src/videoEmbed/VideoEmbedDialog.tsx
-import { useCallback as useCallback17, useEffect as useEffect20, useId as useId5, useMemo as useMemo17, useRef as useRef19, useState as useState22 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect21, useId as useId5, useMemo as useMemo17, useRef as useRef19, useState as useState22 } from "react";
 import {
   VIDEO_EMBED_PROVIDERS,
   parseVideoEmbedInput as parseVideoEmbedInput2
@@ -12635,7 +12981,7 @@ function VideoEmbedDialog({
   useModalDialog({ rootRef: overlayRef, dialogRef, initialFocusRef: inputRef, onClose });
   const parsed = useMemo17(() => parseVideoEmbedInput2(input), [input]);
   const hasInput = input.trim() !== "";
-  useEffect20(() => {
+  useEffect21(() => {
     if (!titleTouched.current && parsed?.title) setTitle(parsed.title);
   }, [parsed]);
   const handleSubmit = useCallback17(
@@ -13590,8 +13936,8 @@ function MermaidDiagramTypeThumbnail({ preview }) {
 // src/Toolbar.tsx
 import {
   useCallback as useCallback32,
-  useEffect as useEffect32,
-  useLayoutEffect as useLayoutEffect9,
+  useEffect as useEffect33,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo25,
   useReducer as useReducer2,
   useRef as useRef37,
@@ -13979,7 +14325,7 @@ ${videoTag}` : videoTag);
 }
 
 // src/speech/DictationButton.tsx
-import { useEffect as useEffect21, useRef as useRef20, useState as useState23, useSyncExternalStore } from "react";
+import { useEffect as useEffect22, useRef as useRef20, useState as useState23, useSyncExternalStore } from "react";
 import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var ERROR_AUTO_DISMISS_MS = 1e4;
 var ANNOUNCEMENTS = {
@@ -14033,12 +14379,12 @@ function DictationButtonView({ state }) {
   const busy = status === "preparing" || status === "transcribing";
   const [announcement, setAnnouncement] = useState23("");
   const previousStatus = useRef20(status);
-  useEffect21(() => {
+  useEffect22(() => {
     if (previousStatus.current === status) return;
     previousStatus.current = status;
     setAnnouncement(ANNOUNCEMENTS[status]);
   }, [status]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!error) return;
     const timer = setTimeout(dismissError, ERROR_AUTO_DISMISS_MS);
     return () => clearTimeout(timer);
@@ -14139,7 +14485,7 @@ function findBlockSliceByHeadingIndexInDoc(doc, headingIndex) {
 }
 
 // src/LinkDialog.tsx
-import { useCallback as useCallback19, useEffect as useEffect22, useId as useId6, useMemo as useMemo19, useRef as useRef21, useState as useState24 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect23, useId as useId6, useMemo as useMemo19, useRef as useRef21, useState as useState24 } from "react";
 import { sanitizeUrl, wikiLinkPath, parseWikiLink as parseWikiLink2 } from "@bendyline/squisq/markdown";
 import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function schemeForMessage(raw) {
@@ -14174,7 +14520,7 @@ function LinkDialog({
   const urlLabelId = useId6();
   const initialFocusRef = kind === "wiki" ? textRef : initialText ? urlRef : textRef;
   useModalDialog({ rootRef: overlayRef, dialogRef, initialFocusRef, onClose });
-  useEffect22(() => {
+  useEffect23(() => {
     if (!documentLinkProvider || tab !== "documents") return;
     let cancelled = false;
     setDocLoading(true);
@@ -14193,7 +14539,7 @@ function LinkDialog({
       cancelled = true;
     };
   }, [docQuery, documentLinkProvider, tab]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (tab === "documents") {
       const t = setTimeout(() => docSearchRef.current?.focus(), 0);
       return () => clearTimeout(t);
@@ -14457,8 +14803,8 @@ import { MediaContext as MediaContext3 } from "@bendyline/squisq-react";
 // src/scene/Scene.tsx
 import {
   useCallback as useCallback25,
-  useEffect as useEffect24,
-  useLayoutEffect as useLayoutEffect7,
+  useEffect as useEffect25,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo21,
   useRef as useRef26,
   useState as useState28
@@ -14575,11 +14921,11 @@ function useSceneSelection(initial = []) {
       return next;
     });
   }, []);
-  const clear = useCallback21(() => {
+  const clear2 = useCallback21(() => {
     setSelectionState((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
   }, []);
   const isSelected = useCallback21((id) => selection.has(id), [selection]);
-  return { selection, setSelection, select, toggle, clear, isSelected };
+  return { selection, setSelection, select, toggle, clear: clear2, isSelected };
 }
 
 // src/scene/hooks/useSceneHitTest.ts
@@ -14975,11 +15321,48 @@ function useSceneTextEditing(config3) {
 }
 
 // src/scene/text/SceneTextOverlay.tsx
-import { useCallback as useCallback24, useEffect as useEffect23, useMemo as useMemo20, useRef as useRef25 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect24, useMemo as useMemo20, useRef as useRef25 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import { DEFAULT_DOC_FONT } from "@bendyline/squisq/schemas";
 import { plainTextFromInlineHtml } from "@bendyline/squisq/markdown";
 
+// src/scene/text/sceneTextFrame.ts
+var TOUCH_MIN_EDIT_FONT_PX = 16;
+function sceneTextFrame({
+  origin,
+  size,
+  zoom,
+  fontSize,
+  minFontPx,
+  container
+}) {
+  const scale = fontSize > 0 && minFontPx > 0 ? Math.max(zoom, minFontPx / fontSize) : zoom;
+  if (scale === zoom) {
+    return {
+      left: origin.x,
+      top: origin.y,
+      width: size.width * zoom,
+      height: size.height * zoom,
+      scale
+    };
+  }
+  let width = size.width * scale;
+  let height = size.height * scale;
+  let left = origin.x + (size.width * zoom - width) / 2;
+  let top = origin.y + (size.height * zoom - height) / 2;
+  if (container && container.width > 0 && container.height > 0) {
+    width = Math.min(width, container.width);
+    height = Math.min(height, container.height);
+    left = Math.min(Math.max(left, 0), container.width - width);
+    top = Math.min(Math.max(top, 0), container.height - height);
+  }
+  return { left, top, width, height, scale };
+}
+function editFontFloorPx() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return 0;
+  return window.matchMedia("(pointer: coarse)").matches ? TOUCH_MIN_EDIT_FONT_PX : 0;
+}
+
 // src/scene/text/sceneTiptap.ts
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
@@ -15004,10 +15387,13 @@ function SceneTextOverlay({
   viewport,
   transform,
   viewportToScreen,
+  container,
   onClose
 }) {
   const initialHtml = useMemo20(() => config3.getHtml(editableId), [config3, editableId]);
-  const style = layer.type === "text" ? layer.content.style : void 0;
+  const style = layer.type === "text" ? layer.content.style : config3.textStyle?.(editableId);
+  const textColor = layer.type === "text" ? layer.content.style.color : void 0;
+  const fontFloorPx = useMemo20(editFontFloorPx, []);
   const committedRef = useRef25(false);
   const commitRef = useRef25(() => {
   });
@@ -15045,7 +15431,7 @@ function SceneTextOverlay({
     committedRef.current = true;
     onClose();
   }, [onClose]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!editor || !config3.channel) return;
     const channel = config3.channel;
     channel.set({ editor, level: config3.level });
@@ -15060,10 +15446,17 @@ function SceneTextOverlay({
   }, []);
   const bounds = layerBounds(layer, viewport);
   if (!bounds) return null;
-  const tl = viewportToScreen(bounds.x, bounds.y);
-  const scale = transform.scale;
-  const fontSize = (style?.fontSize ?? 18) * scale;
-  const pad = (style?.padding ?? 0) * scale;
+  const baseFontSize = style?.fontSize ?? 18;
+  const frame = sceneTextFrame({
+    origin: viewportToScreen(bounds.x, bounds.y),
+    size: bounds,
+    zoom: transform.scale,
+    fontSize: baseFontSize,
+    minFontPx: fontFloorPx,
+    container
+  });
+  const fontSize = baseFontSize * frame.scale;
+  const pad = (style?.padding ?? 0) * frame.scale;
   const justifyContent = style?.verticalAlign === "middle" ? "center" : style?.verticalAlign === "bottom" ? "flex-end" : "flex-start";
   return /* @__PURE__ */ jsx33(
     "div",
@@ -15075,10 +15468,10 @@ function SceneTextOverlay({
       onDoubleClick: (e2) => e2.stopPropagation(),
       style: {
         position: "absolute",
-        left: tl.x,
-        top: tl.y,
-        width: bounds.width * scale,
-        height: bounds.height * scale,
+        left: frame.left,
+        top: frame.top,
+        width: frame.width,
+        height: frame.height,
         zIndex: 20,
         boxSizing: "border-box",
         display: "flex",
@@ -15087,7 +15480,9 @@ function SceneTextOverlay({
         padding: pad,
         fontSize,
         fontFamily: style?.fontFamily || DEFAULT_DOC_FONT,
-        color: style?.color ?? "var(--squisq-text)",
+        fontWeight: style?.fontWeight,
+        fontStyle: style?.fontStyle,
+        color: textColor ?? "var(--squisq-text)",
         lineHeight: style?.lineHeight || 1.4,
         textAlign: style?.textAlign ?? "left",
         background: "var(--squisq-surface)",
@@ -15307,7 +15702,7 @@ function Scene(props) {
     },
     [interaction, bumpTick]
   );
-  useEffect24(
+  useEffect25(
     () => () => {
       interaction.selectDrag = void 0;
       interaction.connect = void 0;
@@ -15339,7 +15734,7 @@ function Scene(props) {
     },
     [onDrop, panZoom]
   );
-  useEffect24(() => {
+  useEffect25(() => {
     const root = containerRef.current;
     if (!root) return;
     const onKey = (e2) => {
@@ -15362,7 +15757,7 @@ function Scene(props) {
   const [containerSize, setContainerSize] = useState28(
     null
   );
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (!containerRef.current) return;
     const el = containerRef.current;
     const measure = () => {
@@ -15393,7 +15788,7 @@ function Scene(props) {
     if (!containerSize || !contentBox) return;
     fitBox(contentBox, containerSize, 40, 1);
   }, [containerSize, contentBox, fitBox]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (viewMode === "fit") fitContent();
   }, [fitContent, viewMode]);
   const adjustZoom = useCallback25(
@@ -15543,6 +15938,7 @@ function Scene(props) {
           viewport,
           transform: panZoom.transform,
           viewportToScreen: panZoom.viewportToScreen,
+          container: containerSize,
           onClose: textEdit.close
         }
       );
@@ -15624,10 +16020,10 @@ import { createElement as createElement7 } from "react";
 import { parsePandocAttrTokens as parsePandocAttrTokens6 } from "@bendyline/squisq/markdown";
 
 // src/scene/SceneBlockWidget.tsx
-import { useEffect as useEffect28, useMemo as useMemo23, useRef as useRef30, useState as useState32 } from "react";
+import { useEffect as useEffect29, useMemo as useMemo23, useRef as useRef30, useState as useState32 } from "react";
 
 // src/scene/adapters/LayoutAdapter.ts
-import { useEffect as useEffect25, useRef as useRef27, useState as useState29 } from "react";
+import { useEffect as useEffect26, useRef as useRef27, useState as useState29 } from "react";
 import { computeLayoutLayers } from "@bendyline/squisq/doc";
 
 // src/scene/adapters/blockLayers.ts
@@ -15975,7 +16371,7 @@ function stripBraces2(s) {
 var SCENE_VIEWPORT = { width: 1920, height: 1080 };
 function useLayoutAdapter(editor, headingPos, options = {}) {
   const [, setVersion] = useState29(0);
-  useEffect25(() => {
+  useEffect26(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -16001,7 +16397,7 @@ function useLayoutAdapter(editor, headingPos, options = {}) {
     if (c.bodyHtml.trim()) l2.content.html = c.bodyHtml;
   }
   const migratedRef = useRef27(false);
-  useEffect25(() => {
+  useEffect26(() => {
     if (migratedRef.current) return;
     const n = nodeAtOrNull(editor.state.doc, headingPos);
     if (!n) return;
@@ -16181,7 +16577,7 @@ function nextLayoutId(editor, parentPos, kind) {
 }
 
 // src/scene/adapters/DrawingAdapter.ts
-import { useCallback as useCallback26, useEffect as useEffect26, useMemo as useMemo22, useRef as useRef28, useState as useState30, createElement as createElement6 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect27, useMemo as useMemo22, useRef as useRef28, useState as useState30, createElement as createElement6 } from "react";
 import { computeDrawingLayout } from "@bendyline/squisq/doc";
 
 // src/scene/tools/PathTool.ts
@@ -16566,6 +16962,10 @@ function nodeCardLayers(node2) {
   };
   return [card, label];
 }
+function labelLayerIdForCard(cardId) {
+  if (!cardId.startsWith("node-card-")) return cardId;
+  return `node-label-${cardId.slice("node-card-".length)}`;
+}
 function cardLayerIdForLabel(labelId) {
   if (!labelId.startsWith("node-label-")) return labelId;
   return `node-card-${labelId.slice("node-label-".length)}`;
@@ -17102,7 +17502,7 @@ function headingText(node2) {
 var ENDPOINT_HIT_RADIUS = 18;
 function useDrawingAdapter(editor, headingPos, options = {}) {
   const [, setVersion] = useState30(0);
-  useEffect26(() => {
+  useEffect27(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -17140,12 +17540,12 @@ function useDrawingAdapter(editor, headingPos, options = {}) {
   }, []);
   const dataRef = useRef28({ edges, boxes, selectedEdgeId, headingPos });
   dataRef.current = { edges, boxes, selectedEdgeId, headingPos };
-  useEffect26(() => {
+  useEffect27(() => {
     if (selectedEdgeId && !edges.some((e2) => e2.id === selectedEdgeId)) {
       setSelectedEdgeId(null);
     }
   }, [edges, selectedEdgeId]);
-  useEffect26(() => {
+  useEffect27(() => {
     const onKey = (e2) => {
       if (e2.key !== "Delete" && e2.key !== "Backspace") return;
       if (isEditableTarget(e2.target)) return;
@@ -17543,13 +17943,13 @@ function SceneBlockToolbar({
 }
 
 // src/scene/SceneSideToolbar.tsx
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef29, useState as useState31 } from "react";
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef29, useState as useState31 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
 var SIDE_TOOLBAR_FIT_PX = 12 + 180 + 4;
 function SceneSideToolbar({ children }) {
   const wrapRef = useRef29(null);
   const [collapsed, setCollapsed] = useState31(false);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     const wrap = wrapRef.current;
     if (!wrap) return;
     const shell = wrap.closest(".squisq-scene-shell");
@@ -17594,11 +17994,11 @@ function SceneSideToolbar({ children }) {
 }
 
 // src/diagram/DiagramMaximizedOverlay.tsx
-import { useEffect as useEffect27 } from "react";
+import { useEffect as useEffect28 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { jsx as jsx40 } from "react/jsx-runtime";
 function DiagramMaximizedOverlay({ host, onClose, children }) {
-  useEffect27(() => {
+  useEffect28(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") {
         e2.preventDefault();
@@ -17637,7 +18037,7 @@ function SceneBlockWidget(props) {
   const [parentPos, setParentPos] = useState32(
     () => resolveSceneHeadingPos(editor, headingKey, mode, fallbackParentPos)
   );
-  useEffect28(() => {
+  useEffect29(() => {
     const onUpdate = () => setParentPos(
       (current) => resolveSceneHeadingPos(editor, headingKey, mode, current ?? fallbackParentPos)
     );
@@ -19560,7 +19960,7 @@ function ManagerContent({
 import { createPortal as createPortal13 } from "react-dom";
 
 // src/toolbar/EditorViewTabs.tsx
-import { useEffect as useEffect29, useReducer, useRef as useRef34, useState as useState36 } from "react";
+import { useEffect as useEffect30, useReducer, useRef as useRef34, useState as useState36 } from "react";
 
 // src/platformShortcuts.ts
 function resolvePlatform(explicitPlatform) {
@@ -19590,7 +19990,7 @@ function navigateViewTabs(event) {
 import { Fragment as Fragment14, jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var VIEWS = [
   { id: "wysiwyg", label: "Write", shortcutKey: "1" },
-  { id: "raw", label: "Source", shortcutKey: "2" },
+  { id: "raw", label: "Source", icon: "fa-solid fa-code", shortcutKey: "2" },
   { id: "preview", label: "Use", shortcutKey: "3" }
 ];
 function EditorViewTabs({
@@ -19599,7 +19999,7 @@ function EditorViewTabs({
 }) {
   const { editorMode, activeView, setActiveView, layoutMode } = useEditorContext();
   const [focusedView, setFocusedView] = useState36(activeView);
-  useEffect29(() => setFocusedView(activeView), [activeView]);
+  useEffect30(() => setFocusedView(activeView), [activeView]);
   const previewSettings = usePreviewSettingsOptional();
   const [useModeMenuRequest, requestUseModeMenu] = useReducer((count) => count + 1, 0);
   const [writeModeMenuRequest, requestWriteModeMenu] = useReducer((count) => count + 1, 0);
@@ -19622,6 +20022,7 @@ function EditorViewTabs({
     /* @__PURE__ */ jsx47("div", { className: "squisq-toolbar-view-tab-list", role: "tablist", "aria-label": "Editor view", children: visibleViews.map((view) => {
       const modeMenu = modeMenuOf(view.id);
       const viewLabel = modeMenu === "use" && previewSettings ? displayModeLabel(previewSettings.activeDisplayMode) : modeMenu === "write" ? writeModeLabel(layoutMode) : view.label;
+      const shortLabel = modeMenu === "use" && previewSettings ? displayModeShortLabel(previewSettings.activeDisplayMode) : view.shortLabel;
       const tab = /* @__PURE__ */ jsxs35(
         "button",
         {
@@ -19644,6 +20045,7 @@ function EditorViewTabs({
             setActiveView(view.id);
           },
           "data-tooltip": `${viewLabel} (${platformShortcut(`Shift+${view.shortcutKey}`)})`,
+          "aria-label": viewLabel,
           children: [
             /* @__PURE__ */ jsx47(
               "span",
@@ -19653,12 +20055,12 @@ function EditorViewTabs({
                 children: viewLabel
               }
             ),
-            view.shortLabel && view.shortLabel !== view.label && /* @__PURE__ */ jsx47(
+            view.icon ? /* @__PURE__ */ jsx47("span", { className: "squisq-toolbar-view-tab-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx47(Icon, { icon: view.icon }) }) : shortLabel && shortLabel !== viewLabel && /* @__PURE__ */ jsx47(
               "span",
               {
                 className: "squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short",
-                "data-label": view.shortLabel,
-                children: view.shortLabel
+                "data-label": shortLabel,
+                children: shortLabel
               }
             )
           ]
@@ -19916,7 +20318,7 @@ function selectionToTaskListMarkdown(text) {
 }
 
 // src/find/FindToolbar.tsx
-import { useCallback as useCallback31, useEffect as useEffect30, useId as useId11, useRef as useRef35, useState as useState38 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect31, useId as useId11, useRef as useRef35, useState as useState38 } from "react";
 
 // src/find/FindHighlightExtension.ts
 import { Extension as Extension4 } from "@tiptap/core";
@@ -20101,15 +20503,15 @@ function FindToolbar({
   const options = { matchCase, wholeWord };
   const lastNavigationRef = useRef35("");
   const pendingRevealRef = useRef35(false);
-  useEffect30(() => {
+  useEffect31(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, [focusRequest]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (showReplace) replaceInputRef.current?.focus();
   }, [showReplace, focusRequest]);
   const appliedRequestRef = useRef35(findRequest);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!findRequest || findRequest === appliedRequestRef.current) return;
     appliedRequestRef.current = findRequest;
     setQuery(findRequest.query);
@@ -20117,14 +20519,14 @@ function FindToolbar({
     setWholeWord(findRequest.wholeWord ?? false);
     setSelectedIndex(findRequest.occurrence ?? 0);
   }, [findRequest]);
-  useEffect30(() => {
+  useEffect31(() => {
     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]);
-  useEffect30(() => {
+  useEffect31(() => {
     let cleanup = () => {
     };
     let count = 0;
@@ -20547,7 +20949,7 @@ function markPreviewRanges(ranges, selectedIndex) {
 }
 
 // src/toolbar/useToolbarCollapse.ts
-import { useEffect as useEffect31, useRef as useRef36, useState as useState39 } from "react";
+import { useEffect as useEffect32, useRef as useRef36, useState as useState39 } from "react";
 
 // src/toolbar/toolbarCollapse.ts
 var TOOLBAR_COLLAPSE_ORDER = [
@@ -20618,7 +21020,7 @@ function useToolbarCollapse(activeView, actionsLaneShown) {
   const itemWidthsRef = useRef36(/* @__PURE__ */ new Map());
   const chromeOnLaneRowRef = useRef36(/* @__PURE__ */ new Map());
   const collapsedCountRef = useRef36(0);
-  useEffect31(() => {
+  useEffect32(() => {
     const container = actionsRef.current;
     if (!container) return;
     const toolbar = container.parentElement;
@@ -21243,7 +21645,7 @@ function Toolbar({
   const showDocumentChrome = !isCodeMode && hostMode !== "chat";
   const [scannedFileCount, setScannedFileCount] = useState40(0);
   const resolvedFileCount = fileCount ?? scannedFileCount;
-  useEffect32(() => {
+  useEffect33(() => {
     if (fileCount !== void 0) return;
     if (!mediaProvider) {
       setScannedFileCount(0);
@@ -21371,7 +21773,7 @@ function Toolbar({
   const overflowRef = useRef37(null);
   const overflowMenuRef = useRef37(null);
   const overflowStyle = useAnchoredPopover(showOverflow, overflowTriggerRef, overflowMenuRef);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (showOverflow && overflowStyle.visibility === "visible")
       overflowMenuRef.current?.querySelector("button:not(:disabled)")?.focus();
   }, [showOverflow, overflowStyle.visibility]);
@@ -21379,7 +21781,7 @@ function Toolbar({
   useEscapeDismissal(insertMenuAnchor !== null, closeInsertMenu, insertMenuReturnFocusRef);
   const [showDocSettings, setShowDocSettings] = useState40(false);
   const [showLayoutManager, setShowLayoutManager] = useState40(false);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!findMode) return;
     setShowOverflow(false);
     closeInsertMenu();
@@ -21388,10 +21790,10 @@ function Toolbar({
   const toolbarRootRef = useRef37(null);
   const [replaceOpen, setReplaceOpen] = useState40(false);
   const [findFocusRequest, setFindFocusRequest] = useState40(0);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!findMode) setReplaceOpen(false);
   }, [findMode]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!findShortcut || editorMode === "image") return;
     const apple = isApplePlatform();
     const onKeyDown = (event) => {
@@ -21416,7 +21818,7 @@ function Toolbar({
     activeView,
     actionsLaneShown
   );
-  useEffect32(() => {
+  useEffect33(() => {
     if (!showOverflow) return;
     const handleClick = (e2) => {
       const target = e2.target;
@@ -21430,7 +21832,7 @@ function Toolbar({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [showOverflow]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!insertMenuAnchor) return;
     const handleClick = (e2) => {
       if (insertMenuButtonRef.current?.contains(e2.target)) return;
@@ -21444,7 +21846,7 @@ function Toolbar({
     return () => document.removeEventListener("mousedown", handleClick);
   }, [insertMenuAnchor, closeInsertMenu]);
   const insertMenuOpen = insertMenuAnchor !== null;
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!insertMenuOpen) return;
     const menu = insertMenuRef.current;
     const trigger = insertMenuTriggerRef.current;
@@ -21482,7 +21884,7 @@ function Toolbar({
     };
   }, [insertMenuOpen]);
   const [, forceUpdate] = useReducer2((c) => c + 1, 0);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!formattingEditor) return;
     formattingEditor.on("transaction", forceUpdate);
     return () => {
@@ -22123,7 +22525,7 @@ ${TASK_LIST_MARKDOWN}
     },
     [activeView, tiptapEditor, monacoEditor, markdownSource, setMarkdownSource, closeEmojiPicker]
   );
-  useEffect32(() => {
+  useEffect33(() => {
     const onKeyDown = (e2) => {
       if (!(e2.ctrlKey || e2.metaKey) || e2.altKey || e2.shiftKey) return;
       if (e2.key.toLowerCase() !== "k") return;
@@ -22255,7 +22657,7 @@ ${TASK_LIST_MARKDOWN}
   ]);
   const BLOCK_SCENE_BUTTONS = /* @__PURE__ */ new Set([...INLINE_SCENE_BUTTONS, "ul", "ol", "quote", "codeblock"]);
   const [dataCardFocused, setDataCardFocused] = useState40(false);
-  useEffect32(() => {
+  useEffect33(() => {
     let timer = null;
     const update = () => {
       if (timer !== null) clearTimeout(timer);
@@ -22318,7 +22720,7 @@ ${TASK_LIST_MARKDOWN}
   const [rawTemplate, setRawTemplate] = useState40(null);
   const [rawHeadingLine, setRawHeadingLine] = useState40(null);
   const [rawTransition, setRawTransition] = useState40(EMPTY_TRANSITION);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!isRawView || !monacoEditor) {
       setRawTemplate(null);
       setRawHeadingLine(null);
@@ -22368,7 +22770,7 @@ ${TASK_LIST_MARKDOWN}
     };
   }, [isRawView, monacoEditor]);
   const [wysiwygHeadingIndex, setWysiwygHeadingIndex] = useState40(null);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!isWysiwyg || !tiptapEditor) {
       setWysiwygHeadingIndex(null);
       return;
@@ -23514,7 +23916,7 @@ ${TASK_LIST_MARKDOWN}
 }
 
 // src/StatusBar.tsx
-import { useEffect as useEffect33, useMemo as useMemo26, useState as useState41 } from "react";
+import { useEffect as useEffect34, useMemo as useMemo26, useState as useState41 } from "react";
 import { countBlocks } from "@bendyline/squisq/doc";
 import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
 var STATS_DEBOUNCE_MS = 150;
@@ -23525,7 +23927,7 @@ function StatusBar({ className, slotRight }) {
   const { markdownSource, doc, parseError } = useEditorContext();
   const proofingState = useProofingState();
   const [statsSource, setStatsSource] = useState41(markdownSource);
-  useEffect33(() => {
+  useEffect34(() => {
     if (statsSource === markdownSource) return;
     const timeout = setTimeout(() => setStatsSource(markdownSource), STATS_DEBOUNCE_MS);
     return () => clearTimeout(timeout);
@@ -23567,7 +23969,13 @@ function StatusBar({ className, slotRight }) {
 }
 
 // src/RawEditor.tsx
-import { useRef as useRef38, useCallback as useCallback33, useEffect as useEffect34, useState as useState42 } from "react";
+import {
+  useRef as useRef38,
+  useCallback as useCallback33,
+  useEffect as useEffect35,
+  useLayoutEffect as useLayoutEffect11,
+  useState as useState42
+} from "react";
 
 // src/wikiSuggestions.ts
 import { wikiLinkPath as wikiLinkPath2 } from "@bendyline/squisq/markdown";
@@ -23628,11 +24036,50 @@ var SQUISQ_THEMES = {
   vs: "squisq-light",
   "vs-dark": "squisq-dark"
 };
+var COMPACT_GUTTER_MAX_WIDTH = 520;
+var FULL_GUTTER = {
+  lineNumbersMinChars: 5,
+  glyphMargin: true,
+  folding: true,
+  // Monaco's default is 10; 12 more become the breathing strip.
+  lineDecorationsWidth: 22,
+  breathing: 12,
+  numberInset: 0
+};
+var COMPACT_GUTTER = {
+  lineNumbersMinChars: 2,
+  glyphMargin: false,
+  folding: false,
+  // 4px number inset, 6px between the digits and the seam, 6px breathing.
+  lineDecorationsWidth: 16,
+  breathing: 6,
+  numberInset: 4
+};
+function useCompactGutter(host) {
+  const [compact, setCompact] = useState42(
+    () => typeof window !== "undefined" && window.innerWidth < COMPACT_GUTTER_MAX_WIDTH
+  );
+  useLayoutEffect11(() => {
+    if (!host) return;
+    const apply = (width) => {
+      if (width > 0) setCompact(width < COMPACT_GUTTER_MAX_WIDTH);
+    };
+    apply(host.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[entries.length - 1];
+      if (entry) apply(entry.contentRect.width);
+    });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [host]);
+  return compact;
+}
 function useDocumentMonacoLanguages(language, source) {
   const [requested, setRequested] = useState42(
     () => monacoLanguagesForDocument(language, source)
   );
-  useEffect34(() => {
+  useEffect35(() => {
     const delay = normalizeMonacoLanguage(language) === "markdown" ? 250 : 0;
     const timer = window.setTimeout(() => {
       setRequested(monacoLanguagesForDocument(language, source));
@@ -23652,6 +24099,8 @@ function RawEditor({
   readOnly = false
 }) {
   const contextMenuOwnedByShell = useEditorContextMenuAvailable();
+  const [editorHost, setEditorHost] = useState42(null);
+  const { breathing, numberInset, ...gutterOptions } = useCompactGutter(editorHost) ? COMPACT_GUTTER : FULL_GUTTER;
   const {
     editorSource,
     setEditorSource,
@@ -23681,14 +24130,14 @@ function RawEditor({
   const keyDisposable = useRef38(null);
   const submitOnEnterRef = useRef38(submitOnEnter);
   const readOnlyRef = useRef38(readOnly);
-  useEffect34(() => {
+  useEffect35(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
-  useEffect34(() => {
+  useEffect35(() => {
     readOnlyRef.current = readOnly;
   }, [readOnly]);
   const mentionProviderRef = useRef38(mentionProvider);
-  useEffect34(() => {
+  useEffect35(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const docCustomTemplates = doc?.customTemplates;
@@ -23699,7 +24148,7 @@ function RawEditor({
       detail: "Block template"
     }));
   }
-  useEffect34(() => {
+  useEffect35(() => {
     const builtIns = getAvailableTemplates().map((name) => ({
       name,
       detail: "Block template"
@@ -24088,7 +24537,7 @@ function RawEditor({
     },
     [setMonacoEditor, language]
   );
-  useEffect34(() => {
+  useEffect35(() => {
     return () => {
       setMonacoEditor(null);
       completionDisposable.current?.dispose();
@@ -24118,7 +24567,7 @@ function RawEditor({
     },
     [setEditorSource]
   );
-  useEffect34(() => {
+  useEffect35(() => {
     const editor = editorRef.current;
     if (editor) {
       const currentValue = editor.getValue();
@@ -24129,7 +24578,7 @@ function RawEditor({
       }
     }
   }, [editorSource]);
-  useEffect34(() => {
+  useEffect35(() => {
     const editor = editorRef.current;
     if (!editor || !monacoNs) return;
     if (language !== "markdown") return;
@@ -24216,52 +24665,67 @@ function RawEditor({
       }
     );
   }
-  return /* @__PURE__ */ jsx54("div", { className, style: { width: "100%", height: "100%" }, "data-testid": "raw-editor", children: /* @__PURE__ */ jsx54(
-    Ft,
+  return /* @__PURE__ */ jsx54(
+    "div",
     {
-      defaultLanguage: language,
-      value: editorSource,
-      theme: effectiveTheme,
-      beforeMount: handleBeforeMount,
-      onMount: handleMount,
-      onChange: handleChange,
-      options: {
-        ariaLabel,
-        fontSize,
-        wordWrap,
-        minimap: { enabled: minimap },
-        lineNumbers: "on",
-        scrollBeyondLastLine: false,
-        automaticLayout: true,
-        tabSize: 2,
-        renderWhitespace: "selection",
-        bracketPairColorization: { enabled: true },
-        guides: { indentation: true },
-        padding: { top: 12, bottom: 12 },
-        // Markdown's tokenizer classifies most body text as "string"
-        // or "comment" context, which suppresses `quickSuggestions`
-        // by default. Enable in all three so our `{[icon]}` and
-        // `@mention` typeaheads keep firing as the user types past
-        // the trigger character.
-        quickSuggestions: { other: true, comments: true, strings: true },
-        suggestOnTriggerCharacters: true,
-        // Breathing room between the gutter and the first character.
-        // Done via Monaco's own option so cursor + hit-testing stay in
-        // sync — CSS-padding `.view-lines` shifts the text but not the
-        // cursors layer, which causes the cursor to drift left of the
-        // model column. Monaco's default is 10. We set 22 (12 extra),
-        // and CSS paints the rightmost 12px of the gutter as canvas
-        // color so the breathing room looks like it sits *inside* the
-        // canvas rather than widening the gutter.
-        lineDecorationsWidth: 22,
-        // EditorShell owns one consistent, host-extensible menu across
-        // Source, Write, and Preview. Proofing still intercepts squiggles.
-        contextmenu: !contextMenuOwnedByShell,
-        readOnly,
-        domReadOnly: readOnly
-      }
+      ref: setEditorHost,
+      className,
+      style: {
+        width: "100%",
+        height: "100%",
+        ["--squisq-raw-editor-breathing"]: `${breathing}px`,
+        ["--squisq-raw-editor-number-inset"]: `${numberInset}px`
+      },
+      "data-testid": "raw-editor",
+      children: /* @__PURE__ */ jsx54(
+        Ft,
+        {
+          defaultLanguage: language,
+          value: editorSource,
+          theme: effectiveTheme,
+          beforeMount: handleBeforeMount,
+          onMount: handleMount,
+          onChange: handleChange,
+          options: {
+            ariaLabel,
+            fontSize,
+            wordWrap,
+            minimap: { enabled: minimap },
+            lineNumbers: "on",
+            scrollBeyondLastLine: false,
+            automaticLayout: true,
+            tabSize: 2,
+            renderWhitespace: "selection",
+            bracketPairColorization: { enabled: true },
+            guides: { indentation: true },
+            padding: { top: 12, bottom: 12 },
+            // Markdown's tokenizer classifies most body text as "string"
+            // or "comment" context, which suppresses `quickSuggestions`
+            // by default. Enable in all three so our `{[icon]}` and
+            // `@mention` typeaheads keep firing as the user types past
+            // the trigger character.
+            quickSuggestions: { other: true, comments: true, strings: true },
+            suggestOnTriggerCharacters: true,
+            // Line numbers, glyph margin, folding and the breathing room
+            // between the gutter and the first character (see FULL_GUTTER).
+            // The breathing room is done via Monaco's own
+            // `lineDecorationsWidth` so cursor + hit-testing stay in sync —
+            // CSS-padding `.view-lines` shifts the text but not the cursors
+            // layer, which causes the cursor to drift left of the model
+            // column. CSS then paints the rightmost `breathing` px of the
+            // gutter as canvas color so the room looks like it sits *inside*
+            // the canvas rather than widening the gutter.
+            ...gutterOptions,
+            // EditorShell owns one consistent, host-extensible menu across
+            // Source, Write, and Preview. Proofing still intercepts squiggles.
+            contextmenu: !contextMenuOwnedByShell,
+            readOnly,
+            domReadOnly: readOnly
+          }
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/headingBuild.ts
@@ -24627,10 +25091,31 @@ function DiagramCanvas({
   );
   const incomingNodesRef = useRef39(incomingNodes);
   incomingNodesRef.current = incomingNodes;
+  const sceneRef = useRef39(scene);
+  sceneRef.current = scene;
   const textConfig = useMemo27(
     () => ({
       channel: textChannel,
       resolveEditableId: (id) => nodeIdFromCardLayerId(id) ? id : null,
+      // The card is what's edited; its label is what the text looks like.
+      // A container's title sits at the top of the card, a node's label in
+      // the middle.
+      textStyle: (id) => {
+        const { layers, nodes } = sceneRef.current;
+        const label = layers.find((l2) => l2.id === labelLayerIdForCard(id));
+        if (label?.type !== "text") return void 0;
+        const { fontSize, fontFamily, fontWeight, lineHeight, textAlign } = label.content.style;
+        const nodeId = nodeIdFromCardLayerId(id);
+        const container = nodes.find((n) => n.id === nodeId)?.kind === "container";
+        return {
+          fontSize,
+          fontFamily,
+          fontWeight,
+          lineHeight,
+          textAlign,
+          verticalAlign: container ? "top" : "middle"
+        };
+      },
       getHtml: (id) => {
         const nodeId = nodeIdFromCardLayerId(id);
         const node2 = incomingNodesRef.current.find((n) => n.id === nodeId);
@@ -24862,7 +25347,7 @@ function removeNodeOp(diagram, nodeId) {
 }
 
 // src/asciiDiagram/asciiDiagramData.ts
-import { useEffect as useEffect36, useMemo as useMemo29, useState as useState45 } from "react";
+import { useEffect as useEffect37, useMemo as useMemo29, useState as useState45 } from "react";
 import {
   asciiCellToCanvas,
   asciiDiagramToTemplateData,
@@ -24883,7 +25368,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/asciiDiagram/AsciiDiagramWidget.tsx
-import { useCallback as useCallback35, useEffect as useEffect35, useMemo as useMemo28, useRef as useRef40, useState as useState44 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect36, useMemo as useMemo28, useRef as useRef40, useState as useState44 } from "react";
 
 // src/asciiDiagram/asciiDiagramCommands.ts
 import {
@@ -25155,7 +25640,7 @@ function AsciiDiagramWidget({
     return asciiDiagramToCanvas(offsetAsciiDiagram(view.diagram, offset));
   }, [view, canvasOffsetVersion]);
   const [rejectedAt, setRejectedAt] = useState44(null);
-  useEffect35(() => {
+  useEffect36(() => {
     if (rejectedAt === null) return;
     const timer = setTimeout(() => setRejectedAt(null), REJECTED_NOTICE_MS);
     return () => clearTimeout(timer);
@@ -25590,7 +26075,7 @@ function asciiDiagramToCanvas(diagram) {
 }
 function useAsciiDiagramData(editor, blockId) {
   const [version, setVersion] = useState45(0);
-  useEffect36(() => {
+  useEffect37(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -27436,7 +27921,7 @@ function mermaidErrorMessage(error) {
 }
 
 // src/mermaid/mermaidSurfaceTheme.ts
-import { useEffect as useEffect37, useMemo as useMemo30, useState as useState46 } from "react";
+import { useEffect as useEffect38, useMemo as useMemo30, useState as useState46 } from "react";
 import { relativeLuminance } from "@bendyline/squisq/schemas";
 var EDITOR_SURFACE = {
   light: {
@@ -27473,7 +27958,7 @@ function resolveMermaidSurfaceTheme(host, theme) {
 }
 function useMermaidSurfaceTheme(host, theme) {
   const [surface, setSurface] = useState46(() => readHostSurface(host));
-  useEffect37(() => {
+  useEffect38(() => {
     const sync = () => setSurface((current) => {
       const next = readHostSurface(host);
       return current.scheme === next.scheme && current.inheritsThemeColors === next.inheritsThemeColors ? current : next;
@@ -27499,7 +27984,7 @@ function useMermaidSurfaceTheme(host, theme) {
 }
 
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback36, useEffect as useEffect38, useId as useId12, useLayoutEffect as useLayoutEffect10, useRef as useRef41, useState as useState47 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect39, useId as useId12, useLayoutEffect as useLayoutEffect12, useRef as useRef41, useState as useState47 } from "react";
 import { jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -27576,7 +28061,7 @@ function MermaidDiagramCanvas({
   const [panning, setPanning] = useState47(false);
   const [selectionAnchor, setSelectionAnchor] = useState47(null);
   const [renameValue, setRenameValue] = useState47("");
-  useEffect38(() => {
+  useEffect39(() => {
     if (!panning) return;
     const finish = () => {
       panDragRef.current = null;
@@ -27604,7 +28089,7 @@ function MermaidDiagramCanvas({
       window.removeEventListener("blur", finish);
     };
   }, [panning]);
-  useEffect38(() => {
+  useEffect39(() => {
     let current = true;
     const id = `squisq-mermaid-svg-${++renderSequence}`;
     setRendering(true);
@@ -27629,7 +28114,7 @@ function MermaidDiagramCanvas({
       current = false;
     };
   }, [source, onModelChange, theme]);
-  useLayoutEffect10(() => {
+  useLayoutEffect12(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const measure = () => {
@@ -27650,7 +28135,7 @@ function MermaidDiagramCanvas({
     observer.observe(scroll);
     return () => observer.disconnect();
   }, []);
-  useLayoutEffect10(() => {
+  useLayoutEffect12(() => {
     setContentSize(readSvgViewBox(svgRootRef.current));
   }, [svg]);
   const fitZoom = contentSize && canvasSize ? calculateFitScale(contentSize, canvasSize) : 1;
@@ -27659,7 +28144,7 @@ function MermaidDiagramCanvas({
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
   }, [fitZoom]);
-  useLayoutEffect10(() => {
+  useLayoutEffect12(() => {
     if (viewMode !== "fit") return;
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
@@ -27726,7 +28211,7 @@ function MermaidDiagramCanvas({
     selectedNodeId,
     selectedTextId
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect12(() => {
     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;
@@ -27739,7 +28224,7 @@ function MermaidDiagramCanvas({
     });
     return () => window.cancelAnimationFrame(frame);
   }, [model2, renamingEdgeId, renamingNodeId, renamingTextId]);
-  useLayoutEffect10(() => {
+  useLayoutEffect12(() => {
     const root = svgRootRef.current;
     if (!root || !model2) {
       setSelectionAnchor(null);
@@ -27875,7 +28360,7 @@ function MermaidDiagramCanvas({
     updateSelectionAnchor,
     zoom
   ]);
-  useEffect38(() => {
+  useEffect39(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const update = () => updateSelectionAnchor();
@@ -28280,7 +28765,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect39, useLayoutEffect as useLayoutEffect11, useMemo as useMemo31, useRef as useRef42, useState as useState48 } from "react";
+import { useEffect as useEffect40, useLayoutEffect as useLayoutEffect13, useMemo as useMemo31, useRef as useRef42, useState as useState48 } from "react";
 import { jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -28291,7 +28776,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
   const [query, setQuery] = useState48("");
   const [position, setPosition] = useState48(null);
   const ref = useRef42(null);
-  useEffect39(() => {
+  useEffect40(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -28316,7 +28801,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
       )
     })).filter((section) => section.shapes.length > 0);
   }, [query]);
-  useLayoutEffect11(() => {
+  useLayoutEffect13(() => {
     const palette = ref.current;
     const anchor = palette?.parentElement;
     if (!palette || !anchor) return;
@@ -28462,7 +28947,7 @@ function MermaidShapeThumb({ shape }) {
 }
 
 // src/mermaid/mermaidData.ts
-import { useEffect as useEffect41, useMemo as useMemo32, useState as useState50 } from "react";
+import { useEffect as useEffect42, useMemo as useMemo32, useState as useState50 } from "react";
 
 // src/mermaid/MermaidDiagramExtension.ts
 import { Extension as Extension7 } from "@tiptap/core";
@@ -28473,8 +28958,8 @@ import { createElement as createElement10 } from "react";
 // src/mermaid/MermaidDiagramWidget.tsx
 import {
   useCallback as useCallback37,
-  useEffect as useEffect40,
-  useLayoutEffect as useLayoutEffect12,
+  useEffect as useEffect41,
+  useLayoutEffect as useLayoutEffect14,
   useRef as useRef43,
   useState as useState49,
   useSyncExternalStore as useSyncExternalStore2
@@ -29113,7 +29598,7 @@ function MermaidDiagramWidget({
     },
     [effectiveHeight]
   );
-  useEffect40(() => {
+  useEffect41(() => {
     if (!editNotice) return;
     const timeout = window.setTimeout(() => setEditNotice(""), 7e3);
     return () => window.clearTimeout(timeout);
@@ -29350,7 +29835,7 @@ function MermaidDiagramWidget({
   ] });
 }
 function useDismissibleMermaidPopover(ref, onClose) {
-  useEffect40(() => {
+  useEffect41(() => {
     const onPointerDown = (event) => {
       const target = event.target;
       if (target?.closest(".squisq-scene-block-toolbar")) return;
@@ -29369,7 +29854,7 @@ function useDismissibleMermaidPopover(ref, onClose) {
 }
 function useClampedMermaidPopoverPosition(ref, preferredWidth, preferredMaxHeight) {
   const [position, setPosition] = useState49(null);
-  useLayoutEffect12(() => {
+  useLayoutEffect14(() => {
     const picker = ref.current;
     const anchor = picker?.parentElement;
     if (!picker || !anchor) return;
@@ -29730,7 +30215,7 @@ var MermaidDiagramExtension = Extension7.create({
 // src/mermaid/mermaidData.ts
 function useMermaidDiagramData(editor, blockId) {
   const [version, setVersion] = useState50(0);
-  useEffect41(() => {
+  useEffect42(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -29755,7 +30240,7 @@ function describeSvgIslandRemovals(diagnostics) {
 }
 
 // src/svgIsland/SvgIslandWidget.tsx
-import { useEffect as useEffect43, useMemo as useMemo33, useState as useState52 } from "react";
+import { useEffect as useEffect44, useMemo as useMemo33, useState as useState52 } from "react";
 import { parseSvgIsland } from "@bendyline/squisq/markdown";
 import { SvgIslandImage } from "@bendyline/squisq-react";
 
@@ -29811,7 +30296,7 @@ function FenceMonacoEditor({
 }
 
 // src/codeSnippet/fenceEditorHooks.ts
-import { useEffect as useEffect42, useState as useState51 } from "react";
+import { useEffect as useEffect43, useState as useState51 } from "react";
 function schemeFromHost(host) {
   return host?.closest("[data-theme]")?.dataset.theme === "dark" ? "dark" : "light";
 }
@@ -29819,7 +30304,7 @@ function useHostColorScheme(host) {
   const [scheme, setScheme] = useState51(
     () => host != null && !host.isConnected ? null : schemeFromHost(host)
   );
-  useEffect42(() => {
+  useEffect43(() => {
     if (host != null && !host.isConnected) {
       setScheme(null);
       const raf = requestAnimationFrame(() => {
@@ -29838,7 +30323,7 @@ function useHostColorScheme(host) {
 }
 function useEditorEditable(editor) {
   const [editable, setEditable] = useState51(editor.isEditable);
-  useEffect42(() => {
+  useEffect43(() => {
     const sync = () => setEditable(editor.isEditable);
     editor.on("update", sync);
     editor.on("transaction", sync);
@@ -30001,7 +30486,7 @@ import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
 var nextModelInstanceId = 0;
 function useSvgIslandView(editor, blockId) {
   const [version, setVersion] = useState52(0);
-  useEffect43(() => {
+  useEffect44(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -30103,13 +30588,13 @@ import { Decoration as Decoration8, DecorationSet as DecorationSet8 } from "@tip
 import { createElement as createElement12 } from "react";
 
 // src/codeSnippet/CodeSnippetWidget.tsx
-import { useCallback as useCallback38, useEffect as useEffect45, useRef as useRef44, useState as useState54 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect46, useRef as useRef44, useState as useState54 } from "react";
 
 // src/codeSnippet/codeSnippetData.ts
-import { useEffect as useEffect44, useMemo as useMemo34, useState as useState53 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo34, useState as useState53 } from "react";
 function useCodeSnippetData(editor, blockId) {
   const [version, setVersion] = useState53(0);
-  useEffect44(() => {
+  useEffect45(() => {
     const onTransaction = () => setVersion((value) => value + 1);
     editor.on("transaction", onTransaction);
     return () => {
@@ -30176,7 +30661,7 @@ function CodeSnippetWidget({
   sourceRef.current = data?.source ?? "";
   const languageRef = useRef44("");
   languageRef.current = data?.fenceLanguage ?? "";
-  useEffect45(
+  useEffect46(
     () => () => {
       if (copyResetTimer.current !== void 0) clearTimeout(copyResetTimer.current);
     },
@@ -30421,7 +30906,7 @@ import { Decoration as Decoration9, DecorationSet as DecorationSet9 } from "@tip
 import { createElement as createElement13 } from "react";
 
 // src/fenceWidgets/HostFenceWidget.tsx
-import { Component as Component2, useEffect as useEffect46, useMemo as useMemo35, useState as useState55 } from "react";
+import { Component as Component2, useEffect as useEffect47, useMemo as useMemo35, useState as useState55 } from "react";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var HostFenceErrorBoundary = class extends Component2 {
   constructor() {
@@ -30437,7 +30922,7 @@ var HostFenceErrorBoundary = class extends Component2 {
 };
 function HostFenceWidget({ editor, blockId, getRenderers, getTheme }) {
   const [version, setVersion] = useState55(0);
-  useEffect46(() => {
+  useEffect47(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -30943,7 +31428,7 @@ import { createElement as createElement14 } from "react";
 import { isDataFilePath } from "@bendyline/squisq/doc";
 
 // src/dataCard/DataCardWidget.tsx
-import { useCallback as useCallback39, useEffect as useEffect47, useMemo as useMemo36, useRef as useRef45, useState as useState56 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect48, useMemo as useMemo36, useRef as useRef45, useState as useState56 } from "react";
 import { EMPTY_TABLE_VIEW_STATE } from "@bendyline/squisq/table";
 
 // src/dataCard/gridSave.ts
@@ -31347,7 +31832,7 @@ var XLSX_SESSION_LOCKED_REASON = "Date cells and shared-formula masters stay loc
 var pendingFormulas = /* @__PURE__ */ new WeakMap();
 function useCardLink(editor, blockId) {
   const [version, setVersion] = useState56(0);
-  useEffect47(() => {
+  useEffect48(() => {
     const bump = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", bump);
     return () => {
@@ -31367,7 +31852,7 @@ function useCardLink(editor, blockId) {
 }
 function useMediaRevision(getMediaRevision) {
   const [revision, setRevision] = useState56(() => getMediaRevision());
-  useEffect47(() => {
+  useEffect48(() => {
     const timer = window.setInterval(() => {
       const next = getMediaRevision();
       setRevision((prev) => prev === next ? prev : next);
@@ -31381,6 +31866,13 @@ function formatBytes2(size) {
   if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
   return `${(size / (1024 * 1024)).toFixed(1)} MB`;
 }
+function decodeHrefForDisplay(href) {
+  try {
+    return decodeURIComponent(href);
+  } catch {
+    return href;
+  }
+}
 function DataCardWidget({
   editor,
   blockId,
@@ -31411,7 +31903,7 @@ function DataCardWidget({
     regionParams.anchor,
     regionParams.headerRow
   ]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!href || cardPos === null) return;
     const provider = activeProvider;
     if (!provider) {
@@ -31573,7 +32065,7 @@ function DataCardWidget({
       cancelled = true;
     };
   }, [href, revision, activeProvider, activeContainer, regionIdentity, editor]);
-  useEffect47(
+  useEffect48(
     () => () => {
       gridRef.current?.formulaSession?.dispose();
       gridRef.current?.provider.dispose();
@@ -31648,7 +32140,7 @@ function DataCardWidget({
     }
   }, [href, onMediaSaved]);
   if (!link || !href) return null;
-  const fileName = href.split("/").pop() ?? href;
+  const fileName = decodeHrefForDisplay(href.split("/").pop() ?? href);
   const size = state.kind === "meta" || state.kind === "grid" ? state.size : null;
   const grid = state.kind === "grid" ? state.grid : null;
   const xlsxMeta = grid?.ingested.xlsx;
@@ -31662,7 +32154,7 @@ function DataCardWidget({
       children: [
         /* @__PURE__ */ jsxs48("div", { className: "squisq-data-card-header", children: [
           /* @__PURE__ */ jsx64("span", { className: "squisq-data-card-icon", "aria-hidden": "true", children: "\u{1F4CA}" }),
-          /* @__PURE__ */ jsx64("span", { className: "squisq-data-card-name", title: href, children: fileName }),
+          /* @__PURE__ */ jsx64("span", { className: "squisq-data-card-name", title: decodeHrefForDisplay(href), children: fileName }),
           /* @__PURE__ */ jsx64("span", { className: "squisq-data-card-meta", children: [
             state.kind === "missing" ? "not found in this document\u2019s files" : null,
             state.kind === "loading" ? "loading\u2026" : null,
@@ -32335,7 +32827,7 @@ function pasteVideoEmbedCode(view, text) {
 }
 
 // src/treeview/treeViewData.ts
-import { useEffect as useEffect48, useMemo as useMemo37, useState as useState58 } from "react";
+import { useEffect as useEffect49, useMemo as useMemo37, useState as useState58 } from "react";
 
 // src/treeview/TreeViewExtension.ts
 import { Extension as Extension15 } from "@tiptap/core";
@@ -33044,7 +33536,7 @@ var TreeViewExtension = Extension15.create({
 // src/treeview/treeViewData.ts
 function useTreeViewData(editor, blockId) {
   const [version, setVersion] = useState58(0);
-  useEffect48(() => {
+  useEffect49(() => {
     const onUpdate = () => setVersion((v2) => v2 + 1);
     editor.on("transaction", onUpdate);
     return () => {
@@ -33070,7 +33562,7 @@ function shouldPasteAsTreeFence(text) {
 }
 
 // src/timeline/timelineData.ts
-import { useEffect as useEffect50, useMemo as useMemo39, useRef as useRef48, useState as useState60 } from "react";
+import { useEffect as useEffect51, useMemo as useMemo39, useRef as useRef48, useState as useState60 } from "react";
 
 // src/timeline/TimelineViewExtension.ts
 import { Extension as Extension16 } from "@tiptap/core";
@@ -33084,7 +33576,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/timeline/TimelineEditorWidget.tsx
-import { useCallback as useCallback41, useEffect as useEffect49, useMemo as useMemo38, useRef as useRef47, useState as useState59 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo38, useRef as useRef47, useState as useState59 } from "react";
 import {
   asciiTimelineToTemplateData
 } from "@bendyline/squisq/doc";
@@ -33635,7 +34127,7 @@ function TimelineEditorWidget({ editor, blockId }) {
     }
     return null;
   }, [selectedEventId, view]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!view) return;
     const ids = new Set(
       view.timeline.tracks.flatMap((track) => track.events.map((event) => event.id))
@@ -33643,13 +34135,13 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (selectedEventId && ids.has(selectedEventId)) return;
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (editable) return;
     setAddingTrackId(null);
     setEditingTrackId(null);
     setHover(null);
   }, [editable]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
       return;
     }
@@ -34056,7 +34548,7 @@ function InlineTrackLabel({
   onFinish
 }) {
   const [draft, setDraft] = useState59(label);
-  useEffect49(() => {
+  useEffect50(() => {
     if (editing) setDraft(label);
   }, [editing, label]);
   const commitLabel = () => {
@@ -34115,8 +34607,8 @@ function EventInspector({
   const { event } = selected;
   const [label, setLabel] = useState59(event.label);
   const [description, setDescription] = useState59(event.description ?? "");
-  useEffect49(() => setLabel(event.label), [event.label]);
-  useEffect49(() => setDescription(event.description ?? ""), [event.description]);
+  useEffect50(() => setLabel(event.label), [event.label]);
+  useEffect50(() => setDescription(event.description ?? ""), [event.description]);
   const update = (patch) => dispatch(patch);
   const commitLabel = () => {
     const next = label.trim();
@@ -34426,7 +34918,7 @@ var TimelineViewExtension = Extension16.create({
 function useTimelineData(editor, blockId) {
   const [version, setVersion] = useState60(0);
   const dataCache = useRef48(null);
-  useEffect50(() => {
+  useEffect51(() => {
     const onEditorChange = () => setVersion((value) => value + 1);
     editor.on("transaction", onEditorChange);
     editor.on("update", onEditorChange);
@@ -34461,7 +34953,7 @@ function shouldPasteAsTimelineFence(text) {
 }
 
 // src/BlockPropertiesPopover.tsx
-import { useEffect as useEffect51, useId as useId13, useRef as useRef49, useState as useState61 } from "react";
+import { useEffect as useEffect52, useId as useId13, useRef as useRef49, useState as useState61 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 import { Fragment as Fragment22, jsx as jsx67, jsxs as jsxs51 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT = ".squisq-transition-flyout";
@@ -34480,10 +34972,10 @@ function BlockPropertiesPopover({
   const [inner, setInner] = useState61(blockAttrs);
   const [templateInner, setTemplateInner] = useState61(templateParams);
   const [style, setStyle] = useState61(() => computeStyle3(anchorRect));
-  useEffect51(() => {
+  useEffect52(() => {
     requestAnimationFrame(() => setStyle(computeStyle3(anchorRect, panelRef.current)));
   }, [anchorRect]);
-  useEffect51(() => {
+  useEffect52(() => {
     const onKey = (e2) => {
       if (e2.key === "Escape") onClose();
     };
@@ -34734,7 +35226,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback43, useEffect as useEffect56, useMemo as useMemo42, useRef as useRef52, useState as useState67 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect57, useMemo as useMemo42, useRef as useRef52, useState as useState67 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection as Selection2 } from "@tiptap/pm/state";
 import { Extension as Extension18 } from "@tiptap/core";
@@ -34779,7 +35271,7 @@ import Link2 from "@tiptap/extension-link";
 // src/WikiLink.tsx
 import { Node as Node2, InputRule } from "@tiptap/core";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
-import { useEffect as useEffect52, useState as useState62 } from "react";
+import { useEffect as useEffect53, useState as useState62 } from "react";
 import { wikiLinkPath as wikiLinkPath3, parseWikiLink as parseWikiLink3 } from "@bendyline/squisq/markdown";
 
 // src/wikiSuggestionPlugin.ts
@@ -34952,7 +35444,7 @@ function WikiLinkView({ node: node2, editor }) {
   const [exists, setExists] = useState62(null);
   const [error, setError] = useState62("");
   const [busy, setBusy] = useState62(false);
-  useEffect52(() => {
+  useEffect53(() => {
     let cancelled = false;
     setExists(null);
     setError("");
@@ -35147,7 +35639,7 @@ var InlineIcon = Node3.create({
 });
 
 // src/ImageNodeView.tsx
-import { useEffect as useEffect53, useRef as useRef50, useState as useState63 } from "react";
+import { useEffect as useEffect54, useRef as useRef50, useState as useState63 } from "react";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 import Image from "@tiptap/extension-image";
 import { mergeAttributes as mergeAttributes3 } from "@tiptap/core";
@@ -35181,7 +35673,7 @@ function ImageComponent({ node: node2, selected, editor, updateAttributes }) {
   const sanitizedSvg = useSanitizedSvgImage(loadedSrc, isSvg);
   const resolvedSrc = sanitizedSvg ?? "";
   const resolutionFailed = needsResolution && currentResolution?.url === null || sanitizedSvg === null;
-  useEffect53(() => {
+  useEffect54(() => {
     if (isUploading || !mediaProvider || !resolveAs) return;
     setImageLoad(null);
     let cancelled = false;
@@ -35520,15 +36012,15 @@ function MediaEditButton({ src, kind, fx, className }) {
 
 // src/tiptap/TiptapVideo.tsx
 import { NodeViewWrapper as NodeViewWrapper3, ReactNodeViewRenderer as ReactNodeViewRenderer3 } from "@tiptap/react";
-import { useEffect as useEffect55, useState as useState65 } from "react";
+import { useEffect as useEffect56, useState as useState65 } from "react";
 
 // src/tiptap/useResolvedMediaSrc.ts
-import { useEffect as useEffect54, useState as useState64 } from "react";
+import { useEffect as useEffect55, useState as useState64 } 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] = useState64(isRelative && mediaProvider ? "" : src);
-  useEffect54(() => {
+  useEffect55(() => {
     if (!mediaProvider || !isRelative) {
       setResolved(src);
       return;
@@ -35587,7 +36079,7 @@ function VideoMedia({
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
   const [audioOnly, setAudioOnly] = useState65(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
-  useEffect55(() => {
+  useEffect56(() => {
     setAudioOnly(false);
   }, [resolvedSrc]);
   const handleLoadedMetadata = (event) => {
@@ -36918,7 +37410,7 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect56(() => {
+  useEffect57(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
@@ -36938,19 +37430,19 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef52(mentionProvider);
-  useEffect56(() => {
+  useEffect57(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const fenceRenderersRef = useRef52(fenceRenderers);
-  useEffect56(() => {
+  useEffect57(() => {
     fenceRenderersRef.current = fenceRenderers;
   }, [fenceRenderers]);
   const onCopyCodeRef = useRef52(onCopyCode);
-  useEffect56(() => {
+  useEffect57(() => {
     onCopyCodeRef.current = onCopyCode;
   }, [onCopyCode]);
   const activeThemeRef = useRef52(activeTheme);
-  useEffect56(() => {
+  useEffect57(() => {
     activeThemeRef.current = activeTheme;
   }, [activeTheme]);
   const resolvedPlaceholder = useMemo42(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
@@ -36962,30 +37454,30 @@ function WysiwygEditor({
   const pendingLocalSourcesRef = useRef52([]);
   const mediaProviderRef = useRef52(mediaProvider);
   const mediaRevisionRef = useRef52(mediaRevision);
-  useEffect56(() => {
+  useEffect57(() => {
     mediaRevisionRef.current = mediaRevision;
   }, [mediaRevision]);
   const onOpenFilesPanelRef = useRef52(onOpenFilesPanel);
-  useEffect56(() => {
+  useEffect57(() => {
     onOpenFilesPanelRef.current = onOpenFilesPanel;
   }, [onOpenFilesPanel]);
   const calcEngineFactoryRef = useRef52(calcEngineFactory);
-  useEffect56(() => {
+  useEffect57(() => {
     calcEngineFactoryRef.current = calcEngineFactory;
   }, [calcEngineFactory]);
   const workspaceContainerRef = useRef52(workspaceContainer);
-  useEffect56(() => {
+  useEffect57(() => {
     workspaceContainerRef.current = workspaceContainer;
   }, [workspaceContainer]);
   const bumpMediaRevisionRef = useRef52(bumpMediaRevision);
-  useEffect56(() => {
+  useEffect57(() => {
     bumpMediaRevisionRef.current = bumpMediaRevision;
   }, [bumpMediaRevision]);
-  useEffect56(() => {
+  useEffect57(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const [accessoryPaths, setAccessoryPaths] = useState67(() => /* @__PURE__ */ new Set());
-  useEffect56(() => {
+  useEffect57(() => {
     if (!mediaProvider) {
       setAccessoryPaths(/* @__PURE__ */ new Set());
       return;
@@ -37025,7 +37517,7 @@ function WysiwygEditor({
     initialContentRef.current = markdownToTiptap(initialDisplayBodyRef.current);
   }
   const submitOnEnterRef = useRef52(submitOnEnter);
-  useEffect56(() => {
+  useEffect57(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -37260,7 +37752,7 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect56(() => {
+  useEffect57(() => {
     let cancelled = false;
     queueMicrotask(() => {
       if (!cancelled && editor && !editor.isDestroyed)
@@ -37270,13 +37762,13 @@ function WysiwygEditor({
       cancelled = true;
     };
   }, [editor, wikiLinks]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!editor) return;
     const syncPlaceholders = () => {
       syncAccessoryFileLinkPlaceholders(editor.view.dom, accessoryPaths);
@@ -37287,7 +37779,7 @@ function WysiwygEditor({
       editor.off("update", syncPlaceholders);
     };
   }, [accessoryPaths, editor]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef52(null);
@@ -37299,7 +37791,7 @@ function WysiwygEditor({
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -37355,7 +37847,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!editor) return;
     const previousLayout = sourceLayoutRef.current;
     const layoutChanged = previousLayout !== layoutMode;
@@ -37466,7 +37958,7 @@ function WysiwygEditor({
     }
     return out;
   }, [activeTheme, themeInheritance]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (!editor || editor.isDestroyed) return;
     editor.view.dispatch(editor.state.tr.setMeta(DOCUMENT_TRAY_KEY, layoutMode === "document"));
   }, [editor, layoutMode]);
@@ -37700,19 +38192,19 @@ function insertDroppedMedia(view, event, point, mediaProvider, onMediaUploaded)
 }
 
 // src/InlinePreviewGutter.tsx
-import { useEffect as useEffect59, useLayoutEffect as useLayoutEffect13, useMemo as useMemo45, useRef as useRef53, useState as useState70 } from "react";
+import { useEffect as useEffect60, useLayoutEffect as useLayoutEffect15, useMemo as useMemo45, useRef as useRef53, useState as useState70 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS5 } from "@bendyline/squisq/schemas";
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
-import { useCallback as useCallback44, useEffect as useEffect57, useMemo as useMemo43, useState as useState68 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect58, useMemo as useMemo43, useState as useState68 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
   const flatBlocks = useMemo43(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
   const [entries, setEntries] = useState68([]);
   const [pageEdges, setPageEdges] = useState68(null);
-  useEffect57(() => {
+  useEffect58(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -37780,7 +38272,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect57(() => {
+  useEffect58(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -37841,7 +38333,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect57(() => {
+  useEffect58(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -37925,7 +38417,7 @@ import { flattenRenderableBlocks, DEFAULT_THEME as DEFAULT_THEME5 } from "@bendy
 import { extractPlainText as extractPlainText3 } from "@bendyline/squisq/markdown";
 
 // src/usePreviewProjection.ts
-import { useEffect as useEffect58, useState as useState69 } from "react";
+import { useEffect as useEffect59, useState as useState69 } from "react";
 import {
   resolveAudioMapping,
   resolveDataReferences
@@ -37972,7 +38464,7 @@ function preserveEquivalentAudio(previous, next) {
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2, mediaRevision) {
   const [projection, setProjection] = useState69(null);
-  useEffect58(() => {
+  useEffect59(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -38071,7 +38563,7 @@ function InlinePreviewGutter({
   }, [headingEntries]);
   const [positions, setPositions] = useState70(/* @__PURE__ */ new Map());
   const itemIds = items.map((item) => item.id).join("\0");
-  useEffect59(() => {
+  useEffect60(() => {
     const gutter = gutterRef.current;
     if (!gutter || typeof IntersectionObserver === "undefined") return;
     let active = true;
@@ -38110,7 +38602,7 @@ function InlinePreviewGutter({
       observer.disconnect();
     };
   }, [itemIds, positions]);
-  useLayoutEffect13(() => {
+  useLayoutEffect15(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
       return;
@@ -38309,7 +38801,7 @@ function InlinePreviewGutter({
 import {
   memo,
   useCallback as useCallback45,
-  useEffect as useEffect60,
+  useEffect as useEffect61,
   useMemo as useMemo46,
   useRef as useRef54,
   useState as useState71
@@ -38782,10 +39274,10 @@ function useActiveOutlineBlockId() {
   flatBlocksRef.current = flatBlocks;
   const headingLocations = flatBlocks.map((block) => `${block.id}:${block.sourceHeading?.position?.start.line ?? ""}`).join("\0");
   const [activeId, setActiveId] = useState71(null);
-  useEffect60(() => {
+  useEffect61(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -38807,7 +39299,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, headingLocations]);
-  useEffect60(() => {
+  useEffect61(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -38894,7 +39386,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback47, useEffect as useEffect62, useMemo as useMemo48, useRef as useRef56, useState as useState72 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect63, useMemo as useMemo48, useRef as useRef56, useState as useState72 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -39018,7 +39510,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback46, useEffect as useEffect61, useMemo as useMemo47, useRef as useRef55 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect62, useMemo as useMemo47, useRef as useRef55 } from "react";
 import { jsx as jsx77, jsxs as jsxs61 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -39038,7 +39530,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect61(() => {
+  useEffect62(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -39114,7 +39606,7 @@ function CodeContextZones({ options }) {
   const [, setZonesVersion] = useState72(0);
   const [expandedById, setExpandedById] = useState72({});
   const seenIds = useRef56(/* @__PURE__ */ new Set());
-  useEffect62(() => {
+  useEffect63(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -39137,7 +39629,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect62(() => {
+  useEffect63(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -39603,7 +40095,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback49, useEffect as useEffect65, useMemo as useMemo49, useRef as useRef59, useState as useState75 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect66, useMemo as useMemo49, useRef as useRef59, useState as useState75 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -39640,7 +40132,7 @@ var BlockThumbnail = memo2(function BlockThumbnail2({
 });
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback48, useEffect as useEffect63, useRef as useRef57, useState as useState73 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect64, useRef as useRef57, useState as useState73 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -39669,10 +40161,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef57(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect63(() => {
+  useEffect64(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect63(() => {
+  useEffect64(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -39770,7 +40262,7 @@ function timelineBars(clips) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect64, useLayoutEffect as useLayoutEffect14, useRef as useRef58, useState as useState74 } from "react";
+import { useEffect as useEffect65, useLayoutEffect as useLayoutEffect16, useRef as useRef58, useState as useState74 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
 import { Fragment as Fragment28, jsx as jsx81, jsxs as jsxs63 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -39788,7 +40280,7 @@ function TimelineItemMenu({
 }) {
   const panelRef = useRef58(null);
   const [style, setStyle] = useState74(() => menuStyle(anchor));
-  useLayoutEffect14(() => {
+  useLayoutEffect16(() => {
     const panel = panelRef.current;
     if (!panel) return;
     const updatePosition = () => setStyle(menuStyle(anchor, panel));
@@ -39801,7 +40293,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect64(() => {
+  useEffect65(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -40289,7 +40781,7 @@ function TimelineTrack({
     play();
   }, [play]);
   const [scrubbing, setScrubbing] = useState75(false);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -40327,7 +40819,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef59(null);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -40338,7 +40830,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -40387,7 +40879,7 @@ function TimelineTrack({
   const zoomIn = useCallback49(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback49(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
   const [viewportWidth, setViewportWidth] = useState75(0);
-  useEffect65(() => {
+  useEffect66(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -40401,7 +40893,7 @@ function TimelineTrack({
   const dragRef = useRef59(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect65(() => {
+  useEffect66(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -40432,7 +40924,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect65(() => {
+  useEffect66(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback49(
@@ -41294,7 +41786,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback50, useEffect as useEffect66, useMemo as useMemo52, useRef as useRef60, useState as useState76 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect67, useMemo as useMemo52, useRef as useRef60, useState as useState76 } from "react";
 import {
   isSvgImageSource as isSvgImageSource2,
   parseMarkdown as parseMarkdown9,
@@ -41358,12 +41850,29 @@ function loadPreparation() {
     import("@bendyline/squisq-formats/html-icons"),
     import("@bendyline/squisq-formats/diagrams"),
     import("@bendyline/squisq-react/diagram-pictures")
-  ]).then(([prep, icons, diagrams, pictures]) => ({
-    needs: prep.needsPlainHtmlPreparation,
-    prepare: prep.prepareMarkdownDocForPlainHtml,
-    renderDiagram: diagrams.cachingDiagramRasterizer(pictures.createDiagramPictureRenderer()),
-    outlineIcons: icons.plainHtmlIcons
-  })));
+  ]).then(([prep, icons, diagrams, pictures]) => {
+    const unthemed = diagrams.cachingDiagramRasterizer(pictures.createDiagramPictureRenderer());
+    const themed = /* @__PURE__ */ new Map();
+    return {
+      needs: prep.needsPlainHtmlPreparation,
+      prepare: prep.prepareMarkdownDocForPlainHtml,
+      diagramRenderer: (theme) => {
+        if (!theme) return unthemed;
+        const key = JSON.stringify(theme);
+        let renderer = themed.get(key);
+        if (!renderer) {
+          renderer = diagrams.cachingDiagramRasterizer(
+            pictures.createDiagramPictureRenderer({ theme, background: theme.colors.background })
+          );
+          themed.set(key, renderer);
+          const oldest = themed.size > 8 ? themed.keys().next().value : void 0;
+          if (oldest !== void 0) themed.delete(oldest);
+        }
+        return renderer;
+      },
+      outlineIcons: icons.plainHtmlIcons
+    };
+  }));
   return preparationPromise;
 }
 var PREPARE_DELAY_MS = 300;
@@ -41404,7 +41913,7 @@ function PlainHtmlPreview({
   const parsedDoc = useMemo52(() => parseMarkdown9(markdown), [markdown]);
   const [wikiProjection, setWikiProjection] = useState76(null);
   const mdDoc = wikiProjection?.source === parsedDoc && wikiProjection.support === wikiLinks ? wikiProjection.doc : parsedDoc;
-  useEffect66(() => {
+  useEffect67(() => {
     if (!wikiLinks) return;
     let cancelled = false;
     void resolveWikiLinks(
@@ -41423,7 +41932,7 @@ function PlainHtmlPreview({
     };
   }, [parsedDoc, wikiLinks]);
   const [resolvedImages, setResolvedImages] = useState76(null);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -41460,7 +41969,7 @@ function PlainHtmlPreview({
   }, [resolvedImages, images]);
   const iconsCss = useMemo52(() => collectInlineFontAwesomeCss(), []);
   const [preparation, setPreparation] = useState76(null);
-  useEffect66(() => {
+  useEffect67(() => {
     let cancelled = false;
     loadPreparation().then(
       (loaded) => {
@@ -41477,22 +41986,23 @@ function PlainHtmlPreview({
     () => container ? dataTableCacheFor(container, mediaRevision ?? 0) : void 0,
     [container, mediaRevision]
   );
+  const renderDiagram = useMemo52(() => preparation?.diagramRenderer(theme), [preparation, theme]);
   const needsPreparation = useMemo52(
-    () => preparation?.needs(mdDoc, {
-      renderDiagram: preparation.renderDiagram,
+    () => !!preparation && !!renderDiagram && preparation.needs(mdDoc, {
+      renderDiagram,
       outlineIcons: preparation.outlineIcons,
       container
-    }) ?? false,
-    [preparation, mdDoc, container]
+    }),
+    [preparation, renderDiagram, mdDoc, container]
   );
   const [prepared, setPrepared] = useState76(null);
   const preparedOnceRef = useRef60(false);
-  useEffect66(() => {
-    if (!preparation || !needsPreparation) return;
+  useEffect67(() => {
+    if (!preparation || !renderDiagram || !needsPreparation) return;
     let cancelled = false;
     const prepare = () => {
       preparation.prepare(mdDoc, {
-        renderDiagram: preparation.renderDiagram,
+        renderDiagram,
         outlineIcons: preparation.outlineIcons,
         container,
         dataTableCache
@@ -41512,10 +42022,10 @@ function PlainHtmlPreview({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [preparation, needsPreparation, mdDoc, container, dataTableCache]);
+  }, [preparation, renderDiagram, needsPreparation, mdDoc, container, dataTableCache]);
   const view = needsPreparation ? prepared : null;
   const [renderFn, setRenderFn] = useState76(() => cachedRender);
-  useEffect66(() => {
+  useEffect67(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -41556,7 +42066,7 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect66(() => {
+  useEffect67(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
@@ -41652,11 +42162,11 @@ function PlainHtmlPreview({
       style2.remove();
     };
   }, [onCopyCode, showCodeCopyButton]);
-  useEffect66(() => {
+  useEffect67(() => {
     installFrameCodeCopyControls();
     return () => removeFrameCodeCopyControlsRef.current();
   }, [html, installFrameCodeCopyControls]);
-  useEffect66(() => {
+  useEffect67(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -41741,7 +42251,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState80, useEffect as useEffect71, useMemo as useMemo57, useCallback as useCallback54, useRef as useRef64 } from "react";
+import { useState as useState80, useEffect as useEffect72, useMemo as useMemo57, useCallback as useCallback54, useRef as useRef64 } from "react";
 import { createPortal as createPortal18 } from "react-dom";
 import {
   DashboardView,
@@ -41886,9 +42396,9 @@ import {
   createContext as createContext7,
   useCallback as useCallback51,
   useContext as useContext7,
-  useEffect as useEffect67,
+  useEffect as useEffect68,
   useId as useId15,
-  useLayoutEffect as useLayoutEffect15,
+  useLayoutEffect as useLayoutEffect17,
   useMemo as useMemo53,
   useRef as useRef61,
   useState as useState77
@@ -42153,12 +42663,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect67(() => {
+  useEffect68(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect67(() => {
+  useEffect68(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -42170,7 +42680,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect67(() => {
+  useEffect68(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -42179,10 +42689,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect67(() => {
+  useEffect68(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect67(() => {
+  useEffect68(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -42190,7 +42700,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect67(() => {
+  useEffect68(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -42202,12 +42712,12 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect67(() => {
+  useEffect68(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useLayoutEffect15(() => {
+  useLayoutEffect17(() => {
     if (activeTarget !== "fullscreen") {
       setFullscreenExitStyle(null);
       return;
@@ -42237,7 +42747,7 @@ function PresentationModeProvider({
       window.removeEventListener("resize", updatePosition);
     };
   }, [activeTarget, rootRef]);
-  useEffect67(
+  useEffect68(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -42366,7 +42876,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect67(() => {
+  useEffect68(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -42389,7 +42899,7 @@ function PresentationModeControl() {
       window.removeEventListener("scroll", updatePosition, true);
     };
   }, [closeMenu, open, updatePosition]);
-  useLayoutEffect15(() => {
+  useLayoutEffect17(() => {
     if (!open || !anchor) return;
     const checked = menuRef.current?.querySelector('[aria-checked="true"]');
     const first = menuRef.current?.querySelector('[role="menuitemradio"]');
@@ -42511,7 +43021,7 @@ import {
   createContext as createContext8,
   useCallback as useCallback52,
   useContext as useContext8,
-  useEffect as useEffect68,
+  useEffect as useEffect69,
   useMemo as useMemo54,
   useRef as useRef62,
   useState as useState78
@@ -42581,7 +43091,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect68(() => {
+  useEffect69(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -42590,10 +43100,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect68(() => {
+  useEffect69(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect68(() => {
+  useEffect69(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -42684,7 +43194,7 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback53, useEffect as useEffect69, useMemo as useMemo55, useRef as useRef63 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect70, useMemo as useMemo55, useRef as useRef63 } from "react";
 import {
   BlockRenderer as BlockRenderer5,
   FlashcardFaceView,
@@ -42741,7 +43251,7 @@ function PrintPreview({
     [contentDoc]
   );
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect69(() => {
+  useEffect70(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -42880,7 +43390,7 @@ function PrintPreview({
 import {
   createContext as createContext9,
   useContext as useContext9,
-  useEffect as useEffect70,
+  useEffect as useEffect71,
   useMemo as useMemo56,
   useState as useState79
 } from "react";
@@ -42987,7 +43497,7 @@ function SlideshowDataGridRenderer({
   const activeSourceKey = sourceKey(source);
   const [remote, setRemote] = useState79({ key: "", status: "idle" });
   const [gridModule, setGridModule] = useState79(null);
-  useEffect70(() => {
+  useEffect71(() => {
     let active = true;
     void loadGridModule().then((module) => {
       if (active) setGridModule(module);
@@ -42996,7 +43506,7 @@ function SlideshowDataGridRenderer({
       active = false;
     };
   }, []);
-  useEffect70(() => {
+  useEffect71(() => {
     if (!container || !source || !gridModule) {
       setRemote({ key: activeSourceKey, status: "idle" });
       return;
@@ -43047,13 +43557,13 @@ function SlideshowDataGridRenderer({
     () => useLocalGrid && gridModule ? new gridModule.TableStoreClient({ headers: previewHeaders, cells: previewRows }) : null,
     [previewHeaders, previewRows, useLocalGrid, gridModule]
   );
-  useEffect70(() => () => localProvider?.dispose(), [localProvider]);
+  useEffect71(() => () => 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] = useState79(initialView);
-  useEffect70(() => setView(initialView), [initialView, provider]);
+  useEffect71(() => setView(initialView), [initialView, provider]);
   if (!provider || !ingest || !gridModule) return /* @__PURE__ */ jsx90(Fragment29, { children: fallback });
   const { style } = layer.content;
   const rowHeight = Math.max(32, style.fontSize * 2.1);
@@ -43191,11 +43701,11 @@ function PreviewPanel({
   const isDashboardMode = activeDisplayMode === "dashboard";
   const isFlashcardsMode = activeDisplayMode === "flashcards";
   const presentationProblem = !printMode?.active && !isDocumentMode && !isNarrateMode && !isPageMode && !isFlashcardsMode && !isDashboardMode ? previewDoc?.diagnostics?.find((diagnostic) => diagnostic.code === "presentation-invalid")?.message : void 0;
-  useEffect71(() => {
+  useEffect72(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect71(() => {
+  useEffect72(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -43478,12 +43988,12 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState82, useEffect as useEffect73, useRef as useRef66, useCallback as useCallback55 } from "react";
+import { useState as useState82, useEffect as useEffect74, useRef as useRef66, useCallback as useCallback55 } from "react";
 import { isSvgImageSource as isSvgImageSource3 } from "@bendyline/squisq/markdown";
 import { sanitizedSvgImageUrl as sanitizedSvgImageUrl2 } from "@bendyline/squisq-react";
 
 // src/MediaPreviewDialog.tsx
-import { useEffect as useEffect72, useId as useId16, useRef as useRef65, useState as useState81 } from "react";
+import { useEffect as useEffect73, useId as useId16, useRef as useRef65, useState as useState81 } from "react";
 import { jsx as jsx92, jsxs as jsxs72 } from "react/jsx-runtime";
 function MediaPreviewDialog({
   kind,
@@ -43499,7 +44009,7 @@ function MediaPreviewDialog({
   const titleId = useId16();
   const [playbackFailed, setPlaybackFailed] = useState81(false);
   useModalDialog({ rootRef: overlayRef, dialogRef, onClose });
-  useEffect72(() => setPlaybackFailed(false), [src]);
+  useEffect73(() => setPlaybackFailed(false), [src]);
   let body;
   if (failed || playbackFailed || src === "") {
     body = /* @__PURE__ */ jsx92("div", { className: "squisq-media-preview-message", children: "This file can\u2019t be previewed." });
@@ -43643,7 +44153,7 @@ function MediaBin({
 }) {
   const [entries, setEntries] = useState82([]);
   const listRef = useRef66(null);
-  useEffect73(() => {
+  useEffect74(() => {
     if (!highlightPath || !listRef.current) return;
     const item = listRef.current.querySelector(`[data-media-path="${CSS.escape(highlightPath)}"]`);
     if (item instanceof HTMLElement) {
@@ -43677,7 +44187,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect73(() => {
+  useEffect74(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -43698,7 +44208,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect73(() => {
+  useEffect74(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -43855,7 +44365,7 @@ function MediaBin({
   const openContextMenu = useCallback55((entry, x, y) => {
     setContextMenu({ entry, x, y });
   }, []);
-  useEffect73(() => {
+  useEffect74(() => {
     setPreview(null);
   }, [mediaProvider]);
   const openPreview = useCallback55(
@@ -44195,7 +44705,7 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect74, useLayoutEffect as useLayoutEffect16, useRef as useRef67, useState as useState84 } from "react";
+import { useEffect as useEffect75, useLayoutEffect as useLayoutEffect18, useRef as useRef67, useState as useState84 } from "react";
 import { createPortal as createPortal19 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -44218,7 +44728,7 @@ function TooltipLayer() {
   const visibleRef = useRef67(false);
   const pressedTargetRef = useRef67(null);
   const lastPointerWasTouchRef = useRef67(false);
-  useLayoutEffect16(() => {
+  useLayoutEffect18(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
     if (!node2) return;
@@ -44229,7 +44739,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect74(() => {
+  useEffect75(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -44331,7 +44841,7 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect81, useRef as useRef76, useState as useState91, useCallback as useCallback63, useMemo as useMemo62 } from "react";
+import { useEffect as useEffect82, useRef as useRef76, useState as useState91, useCallback as useCallback63, useMemo as useMemo62 } from "react";
 
 // src/BlockPreviewPanel.tsx
 import { useMemo as useMemo58 } from "react";
@@ -44375,7 +44885,7 @@ function BlockPreviewPanel({ basePath = "/" }) {
 }
 
 // src/NavigationSheet.tsx
-import { useCallback as useCallback57, useEffect as useEffect76, useId as useId17, useRef as useRef70, useState as useState85 } from "react";
+import { useCallback as useCallback57, useEffect as useEffect77, useId as useId17, useRef as useRef70, useState as useState85 } from "react";
 
 // src/BlockPreviewList.tsx
 import { useCallback as useCallback56, useRef as useRef68 } from "react";
@@ -44459,7 +44969,7 @@ function BlockPreviewList({
 }
 
 // src/useNavigationSheetSwipe.ts
-import { useEffect as useEffect75, useRef as useRef69 } from "react";
+import { useEffect as useEffect76, useRef as useRef69 } from "react";
 var NAVIGATION_SHEET_MAX_BODY_WIDTH = 720;
 var EDGE_ZONE_PX = 24;
 var AXIS_LOCK_PX = 10;
@@ -44476,7 +44986,7 @@ function useNavigationSheetSwipe({
 }) {
   const callbacksRef = useRef69({ onDragStart, onOpen, onClose });
   callbacksRef.current = { onDragStart, onOpen, onClose };
-  useEffect75(() => {
+  useEffect76(() => {
     const sheet = sheetRef.current;
     const surface = sheet?.parentElement;
     if (!sheet || !surface) return;
@@ -44610,7 +45120,7 @@ function NavigationSheet({
   const [lastShown, setLastShown] = useState85(shown);
   if (shown && shown !== lastShown) setLastShown(shown);
   const content = shown ?? lastShown;
-  useEffect76(() => {
+  useEffect77(() => {
     if (shown || !lastShown) return;
     const timer = setTimeout(() => setLastShown(null), CLOSE_LINGER_MS);
     return () => clearTimeout(timer);
@@ -44635,14 +45145,14 @@ function NavigationSheet({
     onClose: close
   });
   useEscapeDismissal(open, close);
-  useEffect76(() => {
+  useEffect77(() => {
     const scrim = scrimRef.current;
     if (!scrim) return;
     const stop = (event) => event.stopPropagation();
     scrim.addEventListener("pointerdown", stop);
     return () => scrim.removeEventListener("pointerdown", stop);
   }, []);
-  useEffect76(() => {
+  useEffect77(() => {
     const sheet = sheetRef.current;
     const surface = sheet?.parentElement;
     if (!open || !sheet || !surface) return;
@@ -44724,6 +45234,35 @@ function NavigationSheet({
   );
 }
 
+// src/linkHoverTitle.ts
+var OWNED = "data-squisq-link-title";
+function titleHost(anchor) {
+  return anchor.closest(".ProseMirror") ?? anchor;
+}
+function clear(host) {
+  host.removeAttribute("title");
+  host.removeAttribute(OWNED);
+}
+function showLinkHoverTitle(anchor) {
+  const href = anchor.getAttribute("href");
+  if (!href) return;
+  const host = titleHost(anchor);
+  if (host !== anchor && anchor.hasAttribute("title")) return;
+  if (host.hasAttribute("title")) {
+    if (!host.hasAttribute(OWNED) || host.getAttribute("title") === href) return;
+  }
+  host.setAttribute("title", href);
+  host.setAttribute(OWNED, "true");
+}
+function clearLinkHoverTitle(anchor) {
+  const host = titleHost(anchor);
+  if (host.hasAttribute(OWNED)) clear(host);
+}
+function clearStaleLinkHoverTitle(target) {
+  const host = target.closest?.(`.ProseMirror[${OWNED}]`);
+  if (host) clear(host);
+}
+
 // src/proofing/ProofingPanel.tsx
 import { jsx as jsx99, jsxs as jsxs77 } from "react/jsx-runtime";
 var CATEGORY_LABELS = {
@@ -44811,7 +45350,7 @@ function ProofingPanel() {
 }
 
 // src/imageEditor/ImageEditModal.tsx
-import { useCallback as useCallback58, useEffect as useEffect77, useMemo as useMemo59, useRef as useRef71, useState as useState86 } from "react";
+import { useCallback as useCallback58, useEffect as useEffect78, useMemo as useMemo59, useRef as useRef71, useState as useState86 } from "react";
 import { DARK_SURFACE, LIGHT_SURFACE } from "@bendyline/squisq/schemas";
 import {
   MemoryContentContainer,
@@ -44846,7 +45385,7 @@ function ImageEditModal({
   }, [container, relativePath]);
   const [initialSrc, setInitialSrc] = useState86(null);
   const [resolveError, setResolveError] = useState86(null);
-  useEffect77(() => {
+  useEffect78(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);
@@ -44968,7 +45507,7 @@ function MediaEditContextMenuItems() {
 // src/mediaEdit/MediaEditModal.tsx
 import {
   useCallback as useCallback62,
-  useEffect as useEffect80,
+  useEffect as useEffect81,
   useId as useId18,
   useMemo as useMemo61,
   useRef as useRef75,
@@ -44979,7 +45518,7 @@ import {
 } from "@bendyline/squisq-video-react/media-edit";
 
 // src/mediaEdit/MediaEditAudioSection.tsx
-import { useCallback as useCallback59, useEffect as useEffect78, useRef as useRef72, useState as useState87 } from "react";
+import { useCallback as useCallback59, useEffect as useEffect79, useRef as useRef72, useState as useState87 } from "react";
 import { MEDIA_FX_SPECS as MEDIA_FX_SPECS2, serializeMediaFx } from "@bendyline/squisq/mediaEdit";
 
 // src/mediaEdit/mediaEditDraft.ts
@@ -45133,7 +45672,7 @@ var LOUDNESS_PRESETS = [
 var PREVIEW_SECONDS = 10;
 function useMediaDuration(url) {
   const [duration, setDuration] = useState87(null);
-  useEffect78(() => {
+  useEffect79(() => {
     setDuration(null);
     if (!url || typeof Audio === "undefined") return;
     const probe = new Audio();
@@ -45173,8 +45712,8 @@ function usePreviewPlayer(preview) {
     setPosition(0);
     setPlaying(null);
   }, []);
-  useEffect78(() => stop, [preview, stop]);
-  useEffect78(
+  useEffect79(() => stop, [preview, stop]);
+  useEffect79(
     () => () => {
       void ctxRef.current?.close();
       ctxRef.current = null;
@@ -45213,7 +45752,7 @@ function usePreviewPlayer(preview) {
     },
     [duration, playing, play]
   );
-  useEffect78(() => {
+  useEffect79(() => {
     if (!playing) return;
     let frame = requestAnimationFrame(function tick() {
       setPosition(currentOffset());
@@ -45268,7 +45807,7 @@ function MediaEditAudioSection({
   const [previewError, setPreviewError] = useState87(null);
   const previewAbort = useRef72(null);
   const player = usePreviewPlayer(preview);
-  useEffect78(() => () => previewAbort.current?.abort(), []);
+  useEffect79(() => () => previewAbort.current?.abort(), []);
   const runPreview = useCallback59(async () => {
     if (draftFx.ops.length === 0) return;
     previewAbort.current?.abort();
@@ -45448,7 +45987,7 @@ function MediaEditAudioSection({
 }
 
 // src/mediaEdit/MediaEditTimingSection.tsx
-import { useCallback as useCallback60, useEffect as useEffect79, useRef as useRef73, useState as useState88 } from "react";
+import { useCallback as useCallback60, useEffect as useEffect80, useRef as useRef73, useState as useState88 } from "react";
 import { jsx as jsx102, jsxs as jsxs80 } from "react/jsx-runtime";
 var DEFAULT_MAX_PAUSE = 0.8;
 function formatDb(value) {
@@ -45466,7 +46005,7 @@ function MediaEditTimingSection({
   const [finding, setFinding] = useState88(false);
   const [error, setError] = useState88(null);
   const abortRef = useRef73(null);
-  useEffect79(() => () => abortRef.current?.abort(), []);
+  useEffect80(() => () => abortRef.current?.abort(), []);
   const findPauses = useCallback60(async () => {
     abortRef.current?.abort();
     const controller = new AbortController();
@@ -45795,7 +46334,7 @@ function MediaEditModal({ target, onClose }) {
   const [draft, setDraft] = useState90(() => draftFromEdits(item?.edits));
   const seedKey = item ? `${item.sourceLine}|${editsSignature(item.edits)}` : null;
   const seededRef = useRef75(null);
-  useEffect80(() => {
+  useEffect81(() => {
     if (seedKey === null || seededRef.current === seedKey) return;
     seededRef.current = seedKey;
     setDraft(draftFromEdits(item?.edits));
@@ -46331,7 +46870,7 @@ function EditorShell({
     () => mediaEditRenders === void 0 && effectiveMediaProvider ? createMediaEditRenderManager({ mediaProvider: effectiveMediaProvider }) : null,
     [mediaEditRenders, effectiveMediaProvider]
   );
-  useEffect81(() => () => ownedMediaEditRenders?.dispose(), [ownedMediaEditRenders]);
+  useEffect82(() => () => 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;
@@ -46381,7 +46920,7 @@ function EditorShell({
       themeInheritance,
       viewPreferences,
       onViewPreferencesChange,
-      children: /* @__PURE__ */ jsx105(ProofingRoot, { children: /* @__PURE__ */ jsx105(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx105(PageTemplateContext.Provider, { value: pageTemplates, children: /* @__PURE__ */ jsx105(
+      children: /* @__PURE__ */ jsx105(ProofingRoot, { onLinkClick, children: /* @__PURE__ */ jsx105(ReviewRoot, { providers: reviewProviders, children: /* @__PURE__ */ jsx105(PageTemplateContext.Provider, { value: pageTemplates, children: /* @__PURE__ */ jsx105(
         EditorShellInner,
         {
           ariaLabel: ariaLabel ?? (hostMode === "chat" ? "Message" : fileName ? `Edit ${fileName}` : "Document editor"),
@@ -46566,7 +47105,7 @@ function EditorShellInner({
   const processedAudio = useProcessedAudio4(mediaEditRenders);
   const { docThemes, onDocThemesChange } = useDocCustomThemes();
   const lastEditingView = useRef76(activeView === "raw" ? "raw" : "wysiwyg");
-  useEffect81(() => {
+  useEffect82(() => {
     if (activeView !== "preview") lastEditingView.current = activeView;
   }, [activeView]);
   const editingView = activeView === "preview" ? lastEditingView.current : activeView;
@@ -46632,13 +47171,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect81(() => {
+  useEffect82(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect81(() => {
+  useEffect82(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect81(() => {
+  useEffect82(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -46662,7 +47201,7 @@ function EditorShellInner({
       cancelled = true;
     };
   }, [mediaProvider, mediaListRefreshKey]);
-  useEffect81(() => {
+  useEffect82(() => {
     if (showFilesWhenNotEmpty && mediaCount > 0) setShowFiles(true);
   }, [mediaCount, showFilesWhenNotEmpty]);
   const handleToggleFiles = useCallback63(() => {
@@ -46682,7 +47221,7 @@ function EditorShellInner({
     [insertionTarget]
   );
   const docBasenameRef = useRef76("document");
-  useEffect81(() => {
+  useEffect82(() => {
     let cancelled = false;
     docBasenameRef.current = "document";
     void resolveDocBasename(workspaceContainer).then((base) => {
@@ -46765,7 +47304,7 @@ function EditorShellInner({
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect81(() => {
+  useEffect82(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback63((e2) => {
@@ -46792,6 +47331,7 @@ function EditorShellInner({
       if (!onLinkClick || event.button !== 0) return;
       const anchor = event.target.closest?.("a[href]");
       if (!anchor || !event.currentTarget.contains(anchor)) return;
+      if (proofingTapTarget(event.nativeEvent)) return;
       const href = anchor.getAttribute("href");
       if (!href || onLinkClick(href) === false) return;
       event.preventDefault();
@@ -46802,23 +47342,21 @@ function EditorShellInner({
   const handleShellLinkMouseOver = useCallback63(
     (event) => {
       if (!onLinkClick) return;
-      const anchor = event.target.closest?.("a[href]");
-      if (!anchor || !event.currentTarget.contains(anchor)) return;
-      const href = anchor.getAttribute("href");
-      if (!href || anchor.hasAttribute("title") && !anchor.hasAttribute("data-squisq-link-title")) {
+      const target = event.target;
+      const anchor = target.closest?.("a[href]");
+      if (!anchor || !event.currentTarget.contains(anchor)) {
+        clearStaleLinkHoverTitle(target);
         return;
       }
-      anchor.setAttribute("title", href);
-      anchor.setAttribute("data-squisq-link-title", "true");
+      showLinkHoverTitle(anchor);
     },
     [onLinkClick]
   );
   const handleShellLinkMouseOut = useCallback63((event) => {
-    const anchor = event.target.closest?.("a[data-squisq-link-title]");
+    const anchor = event.target.closest?.("a[href]");
     if (!anchor || !event.currentTarget.contains(anchor)) return;
     if (event.relatedTarget instanceof Node && anchor.contains(event.relatedTarget)) return;
-    anchor.removeAttribute("title");
-    anchor.removeAttribute("data-squisq-link-title");
+    clearLinkHoverTitle(anchor);
   }, []);
   const autoGrow = minHeight !== void 0 || maxHeight !== void 0;
   const shell = /* @__PURE__ */ jsxs83(