@stll/folio-react 0.18.1 → 0.18.2

package/dist/{renderAsync-Dy_3LIbV.js → renderAsync-DEl35dJa.js}

@@ -55,14 +55,16 @@ import { documentFontsAreLoaded, getDocumentFontSet, waitForInitialLayoutFonts }
 import { getFootnoteText } from "@stll/folio-core/docx/footnoteParser";
 import { convertHeaderFooterPmDocToContent, convertHeaderFooterToContent } from "@stll/folio-core/layout-bridge/convert/headerFooterLayout";
 import { templatePreviewDirtyRange } from "@stll/folio-core/layout-bridge/convert/templatePreviewFlow";
-import { clickToPositionDom, findCollapsedLineEdgeCaretTarget } from "@stll/folio-core/layout-bridge/dom/clickToPositionDom";
+import { clickToPositionDom, getCaretPositionFromDom, getSelectionRectsFromDom } from "@stll/folio-core/layout-bridge/dom/clickToPositionDom";
+import { measurePaintedSpanRange } from "@stll/folio-core/layout-bridge/dom/textStreamDom";
 import { resetImeCaretAnchor, syncImeCaretAnchor } from "@stll/folio-core/layout-bridge/dom/imeCaretAnchor";
-import { findBodyEmptyRuns, findBodyPmAnchor, findBodyPmAnchors, findBodyPmSpans } from "@stll/folio-core/layout-bridge/dom/findBodyPmSpans";
-import { clickToPositionInHfSlot, findHfCaretSpan, findHfPmSpans, findHfSlotForTarget, findHfSlotKindForTarget } from "@stll/folio-core/layout-bridge/dom/findHfPmSpans";
+import { findBodyPmAnchor, findBodyPmAnchors, findBodyPmSpans } from "@stll/folio-core/layout-bridge/dom/findBodyPmSpans";
+import { clickToPositionInHfSlot, findHfSlotForTarget, findHfSlotKindForTarget } from "@stll/folio-core/layout-bridge/dom/findHfPmSpans";
 import { findNoteStoryForTarget } from "@stll/folio-core/layout-bridge/dom/noteStoryDom";
 import { clickToPosition } from "@stll/folio-core/layout-bridge/engine/clickToPosition";
 import { getPageTop, hitTestFragment, hitTestTableCell } from "@stll/folio-core/layout-bridge/engine/hitTest";
 import { clearAllCaches, resetCanvasContext } from "@stll/folio-core/layout-bridge/engine/measuring";
+import { resolveHeaderFooterSelectionGeometry } from "@stll/folio-core/render-dom/HeaderFooterSelectionOverlay";
 import { setEmbeddedFontFamilyMap } from "@stll/folio-core/utils/fontResolver";
 import { resolveSectionHeaderFooterRefs } from "@stll/folio-core/layout-engine";
 import { recordLayoutPhase } from "@stll/folio-core/layout-engine/layoutInstrumentation";
@@ -78,12 +80,13 @@ import { flashParagraphFragmentsByParaId } from "@stll/folio-core/paged-layout/p
 import { DEFAULT_PAGE_HEIGHT_PX, getMargins, getPageSize, twipsToPixels as twipsToPixels$1 } from "@stll/folio-core/paged-layout/sectionGeometry";
 import { resizeColumnPair } from "@stll/folio-core/paged-layout/tableColumnResize";
 import { tableInsertButtonOffset } from "@stll/folio-core/paged-layout/tableInsertButtonGeometry";
-import { getTransactionDirtyRange } from "@stll/folio-core/paged-layout/transactionDirtyRange";
+import { getTransactionsDirtyRange } from "@stll/folio-core/paged-layout/transactionDirtyRange";
 import { findStartPosForParaId } from "@stll/folio-core/prosemirror/utils/findParagraphByParaId";
 import { buildEmbeddedFontFamilyMap, extractEmbeddedFonts } from "@stll/folio-core/fonts/embeddedFonts";
 import { panic } from "better-result";
 import { collectRemoteSelections, createHiddenEditorManager, createHiddenEditorState } from "@stll/folio-core/controller/hiddenEditorManager";
 import { loadCollaborationModules } from "@stll/folio-core/controller/collaborationModules";
+import { createVisualLineState, handleVisualLineKeyDown } from "@stll/folio-core/prosemirror/utils/visualLineNavigation";
 import { clampRangeToDocSize, resolveFolioAIBlockRange, resolveFolioAITextRange, resolvePassageRange } from "@stll/folio-core/ai-edits/blockRange";
 import { getFolioParaIdFromBlockId } from "@stll/folio-core/types/block-id";
 import { getPageTextFromLayout } from "@stll/folio-core/paged-layout/pageText";
@@ -1265,7 +1268,7 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 		getReadOnly: () => readOnlyRef.current,
 		getDocumentIdentity: () => documentIdentityRef.current,
 		getDocumentContext: () => documentRef.current,
-		onTransaction: (transaction, newState) => onTransactionRef.current?.(transaction, newState),
+		onTransaction: (update) => onTransactionRef.current?.(update),
 		onSelectionChange: (state) => onSelectionChangeRef.current?.(state),
 		onKeyDown: (view, event) => onKeyDownRef.current?.(view, event) ?? false,
 		onCopy: () => onCopyRef.current?.(),
@@ -2163,7 +2166,7 @@ const MAX_SPEED = 12;
 /**
 * Find the nearest scrollable ancestor.
 */
-function findScrollParent$1(el) {
+function findScrollParent(el) {
 	let parent = el.parentElement;
 	while (parent && parent !== document.documentElement) {
 		const { overflowY } = getComputedStyle(parent);
@@ -2184,7 +2187,7 @@ function useDragAutoScroll({ pagesContainerRef, onScrollExtendSelection }) {
 		if (scrollParentRef.current) return scrollParentRef.current;
 		const pages = pagesContainerRef.current;
 		if (!pages) return null;
-		scrollParentRef.current = findScrollParent$1(pages);
+		scrollParentRef.current = findScrollParent(pages);
 		return scrollParentRef.current;
 	}, [pagesContainerRef]);
 	const stopAutoScroll = useCallback(() => {
@@ -2237,246 +2240,30 @@ function useDragAutoScroll({ pagesContainerRef, onScrollExtendSelection }) {
 }
 //#endregion
 //#region src/paged-editor/useVisualLineNavigation.ts
-/**
-* Visual Line Navigation Hook
-*
-* Implements visual-line-aware ArrowUp/ArrowDown navigation with sticky X.
-* Extracted from PagedEditor.tsx for better separation of concerns.
-*
-* This hook provides:
-* - getCaretClientX: Get the screen X of the caret at a PM position
-* - findLineElementAtPosition: Find the .layout-line element for a PM position
-* - findPositionOnLineAtClientX: Find a PM position on a line at a given screen X
-* - handlePMKeyDown: Key handler for ArrowUp/ArrowDown with sticky X
-*/
-/** Only match lines inside page body content, skipping header/footer lines. */
-const CONTENT_LINE_SELECTOR = ".layout-page-content .layout-line";
-/**
-* Find the nearest ancestor that actually scrolls (overflow auto/scroll
-* and scrollHeight > clientHeight).
-*/
-function findScrollParent(el) {
-	let parent = el.parentElement;
-	while (parent && parent !== document.documentElement) {
-		const { overflowY } = getComputedStyle(parent);
-		if ((overflowY === "auto" || overflowY === "scroll") && parent.scrollHeight > parent.clientHeight) return parent;
-		parent = parent.parentElement;
-	}
-	return null;
-}
-/**
-* Scroll the nearest scrollable ancestor so that the target element is visible.
-* Uses manual scroll math because `scrollIntoView` misbehaves when the
-* content is inside a CSS `transform: scale()` viewport.
-*/
-function scrollIntoViewIfNeeded(el) {
-	const container = findScrollParent(el);
-	if (!container) return;
-	const elRect = el.getBoundingClientRect();
-	const containerRect = container.getBoundingClientRect();
-	const margin = 40;
-	if (elRect.bottom > containerRect.bottom - margin) container.scrollTop += elRect.bottom - containerRect.bottom + margin;
-	else if (elRect.top < containerRect.top + margin) container.scrollTop -= containerRect.top - elRect.top + margin;
-}
-function useVisualLineNavigation({ pagesContainerRef }) {
-	const stickyXRef = useRef(null);
-	const lastVisualLineIndexRef = useRef(-1);
-	/**
-	* Get the client X coordinate of the caret at a PM position.
-	*/
-	const getCaretClientX = useCallback((pmPos) => {
-		if (!pagesContainerRef.current) return null;
-		const spans = findBodyPmSpans(pagesContainerRef.current);
-		for (const spanEl of spans) {
-			const pmStart = Number(spanEl.dataset["pmStart"]);
-			const pmEnd = Number(spanEl.dataset["pmEnd"]);
-			if (spanEl.classList.contains("layout-run-tab")) {
-				if (pmPos >= pmStart && pmPos < pmEnd) return spanEl.getBoundingClientRect().left;
-				continue;
-			}
-			if (pmPos >= pmStart && pmPos <= pmEnd && spanEl.firstChild?.nodeType === Node.TEXT_NODE) {
-				const textNode = spanEl.firstChild;
-				const charIndex = Math.min(pmPos - pmStart, textNode.length);
-				const range = spanEl.ownerDocument.createRange();
-				range.setStart(textNode, charIndex);
-				range.setEnd(textNode, charIndex);
-				return range.getBoundingClientRect().left;
-			}
-			if (pmPos >= pmStart && pmPos <= pmEnd) return spanEl.getBoundingClientRect().left;
-		}
-		const emptyRuns = findBodyEmptyRuns(pagesContainerRef.current);
-		for (const emptyRun of emptyRuns) {
-			const paragraph = closestHtmlElement(emptyRun, ".layout-paragraph");
-			if (!paragraph) continue;
-			const pmStart_0 = Number(paragraph.dataset["pmStart"]);
-			const pmEnd_0 = Number(paragraph.dataset["pmEnd"]);
-			if (pmPos >= pmStart_0 && pmPos <= pmEnd_0) return emptyRun.getBoundingClientRect().left;
-		}
-		return null;
-	}, [pagesContainerRef]);
-	/**
-	* Find the visual line element (.layout-line) containing a PM position.
-	*/
-	const findLineElementAtPosition = useCallback((pmPos_0) => {
-		if (!pagesContainerRef.current) return null;
-		const allLines = htmlQueryAll(pagesContainerRef.current, CONTENT_LINE_SELECTOR);
-		for (const lineEl of allLines) {
-			const spans_0 = htmlQueryAll(lineEl, "span[data-pm-start][data-pm-end]");
-			for (const span of spans_0) {
-				const start = Number(span.dataset["pmStart"]);
-				const end = Number(span.dataset["pmEnd"]);
-				if (pmPos_0 >= start && pmPos_0 <= end) return lineEl;
-			}
-		}
-		for (const lineEl_0 of allLines) {
-			const paragraph_0 = closestHtmlElement(lineEl_0, ".layout-paragraph");
-			if (!paragraph_0) continue;
-			const pStart = Number(paragraph_0.dataset["pmStart"]);
-			const pEnd = Number(paragraph_0.dataset["pmEnd"]);
-			if (pmPos_0 >= pStart && pmPos_0 <= pEnd) {
-				if (paragraph_0.querySelector(".layout-line") === lineEl_0) return lineEl_0;
-			}
-		}
-		return null;
-	}, [pagesContainerRef]);
-	/**
-	* Find the PM position on a visual line closest to a client X coordinate.
-	*/
-	const findPositionOnLineAtClientX = useCallback((lineEl_1, clientX) => {
-		const spans_1 = htmlQueryAll(lineEl_1, "span[data-pm-start][data-pm-end]");
-		const emptyRun_0 = lineEl_1.querySelector(".layout-empty-run");
-		if (emptyRun_0) {
-			if (emptyRun_0 instanceof HTMLElement && emptyRun_0.dataset["pmStart"]) return Number(emptyRun_0.dataset["pmStart"]);
-			const paragraph_1 = closestHtmlElement(lineEl_1, ".layout-paragraph");
-			if (paragraph_1?.dataset["pmStart"]) return Number(paragraph_1.dataset["pmStart"]) + 1;
-			return null;
-		}
-		if (spans_1.length === 0) {
-			const paragraph_2 = closestHtmlElement(lineEl_1, ".layout-paragraph");
-			if (paragraph_2?.dataset["pmStart"]) return Number(paragraph_2.dataset["pmStart"]) + 1;
-			return null;
-		}
-		for (const spanEl_0 of spans_1) {
-			const rect = spanEl_0.getBoundingClientRect();
-			const pmStart_1 = Number(spanEl_0.dataset["pmStart"]);
-			const pmEnd_1 = Number(spanEl_0.dataset["pmEnd"]);
-			if (spanEl_0.classList.contains("layout-run-tab")) {
-				if (clientX >= rect.left && clientX <= rect.right) return clientX < (rect.left + rect.right) / 2 ? pmStart_1 : pmEnd_1;
-				continue;
-			}
-			if (clientX >= rect.left && clientX <= rect.right) {
-				const textNode_0 = spanEl_0.firstChild;
-				if (!textNode_0 || textNode_0.nodeType !== Node.TEXT_NODE) return pmStart_1;
-				const text = textNode_0;
-				const ownerDoc_0 = spanEl_0.ownerDocument;
-				let lo = 0;
-				let hi = text.length;
-				while (lo < hi) {
-					const mid_0 = Math.floor((lo + hi) / 2);
-					const r = ownerDoc_0.createRange();
-					r.setStart(text, mid_0);
-					r.setEnd(text, mid_0);
-					if (clientX < r.getBoundingClientRect().left) hi = mid_0;
-					else lo = mid_0 + 1;
-				}
-				if (lo > 0 && lo <= text.length) {
-					const r_0 = ownerDoc_0.createRange();
-					r_0.setStart(text, lo - 1);
-					r_0.setEnd(text, lo - 1);
-					const leftX = r_0.getBoundingClientRect().left;
-					r_0.setStart(text, Math.min(lo, text.length));
-					r_0.setEnd(text, Math.min(lo, text.length));
-					const rightX = r_0.getBoundingClientRect().left;
-					if (Math.abs(clientX - leftX) < Math.abs(clientX - rightX)) return pmStart_1 + (lo - 1);
-				}
-				return pmStart_1 + Math.min(lo, pmEnd_1 - pmStart_1);
-			}
-		}
-		let closestSpan = null;
-		let closestDist = Infinity;
-		for (const span_0 of spans_1) {
-			const rect_0 = span_0.getBoundingClientRect();
-			const dist = clientX < rect_0.left ? rect_0.left - clientX : clientX - rect_0.right;
-			if (dist < closestDist) {
-				closestDist = dist;
-				closestSpan = span_0;
-			}
-		}
-		if (!closestSpan) return null;
-		return clientX < closestSpan.getBoundingClientRect().left ? Number(closestSpan.dataset["pmStart"]) : Number(closestSpan.dataset["pmEnd"]);
-	}, []);
-	return {
-		stickyXRef,
-		lastVisualLineIndexRef,
-		getCaretClientX,
-		findLineElementAtPosition,
-		findPositionOnLineAtClientX,
-		handlePMKeyDown: useCallback((view, event) => {
-			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") {
-				if ([
-					"ArrowLeft",
-					"ArrowRight",
-					"Home",
-					"End"
-				].includes(event.key) || event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
-					stickyXRef.current = null;
-					lastVisualLineIndexRef.current = -1;
-				}
-				return false;
-			}
-			if (event.ctrlKey || event.metaKey) {
-				stickyXRef.current = null;
-				lastVisualLineIndexRef.current = -1;
-				return false;
-			}
-			if (!pagesContainerRef.current) return false;
-			const allLines_0 = htmlQueryAll(pagesContainerRef.current, CONTENT_LINE_SELECTOR);
-			if (allLines_0.length === 0) return false;
-			const { from, anchor } = view.state.selection;
-			if (stickyXRef.current === null) {
-				const clientX_0 = getCaretClientX(from);
-				if (clientX_0 === null) return false;
-				stickyXRef.current = clientX_0;
-			}
-			let currentIndex;
-			if (lastVisualLineIndexRef.current >= 0 && lastVisualLineIndexRef.current < allLines_0.length) currentIndex = lastVisualLineIndexRef.current;
-			else {
-				const currentLine = findLineElementAtPosition(from);
-				if (!currentLine) return false;
-				currentIndex = allLines_0.indexOf(currentLine);
-				if (currentIndex === -1) return false;
-			}
-			const targetIndex = event.key === "ArrowUp" ? currentIndex - 1 : currentIndex + 1;
-			if (targetIndex < 0 || targetIndex >= allLines_0.length) {
-				lastVisualLineIndexRef.current = -1;
-				return false;
-			}
-			const targetLine = allLines_0[targetIndex];
-			if (!targetLine) return false;
-			const newPos = findPositionOnLineAtClientX(targetLine, stickyXRef.current);
-			if (newPos === null) return false;
-			lastVisualLineIndexRef.current = targetIndex;
-			const { state, dispatch } = view;
-			const clampedPos = Math.max(0, Math.min(newPos, state.doc.content.size));
-			const clampedAnchor = Math.max(0, Math.min(anchor, state.doc.content.size));
-			try {
-				const $newPos_0 = state.doc.resolve(clampedPos);
-				const sel_0 = event.shiftKey ? TextSelection$1.between(state.doc.resolve(clampedAnchor), $newPos_0) : Selection.near($newPos_0);
-				dispatch(state.tr.setSelection(sel_0));
-			} catch {
-				const $newPos = state.doc.resolve(clampedPos);
-				const sel = event.shiftKey ? TextSelection$1.between(state.doc.resolve(clampedAnchor), $newPos) : Selection.near($newPos);
-				dispatch(state.tr.setSelection(sel));
-			}
-			scrollIntoViewIfNeeded(targetLine);
-			return true;
-		}, [
-			pagesContainerRef,
-			getCaretClientX,
-			findLineElementAtPosition,
-			findPositionOnLineAtClientX
-		])
-	};
+/** Bind the framework-neutral visual-line navigation state to React. */
+function useVisualLineNavigation(t0) {
+	const $ = c(5);
+	const { pagesContainerRef } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = createVisualLineState();
+		$[0] = t1;
+	} else t1 = $[0];
+	const stateRef = useRef(t1);
+	let t2;
+	if ($[1] !== pagesContainerRef) {
+		t2 = (view, event) => handleVisualLineKeyDown(stateRef.current, view, event, pagesContainerRef.current);
+		$[1] = pagesContainerRef;
+		$[2] = t2;
+	} else t2 = $[2];
+	const handlePMKeyDown = t2;
+	let t3;
+	if ($[3] !== handlePMKeyDown) {
+		t3 = { handlePMKeyDown };
+		$[3] = handlePMKeyDown;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
 }
 /** Distance in px from a row/column boundary that triggers the insert button */
 /** Distance in px from the table edge where boundary detection is active */
@@ -2566,15 +2353,6 @@ const getPageIndex = (el) => {
 	const raw = pageEl.dataset["pageNumber"];
 	return raw ? Number(raw) - 1 : 0;
 };
-/**
-* Get the line height for a node by climbing to its `.layout-line`
-* ancestor and reading `offsetHeight`. Returns `fallback` if no
-* ancestor is found.
-*/
-const getLineHeight = (el, fallback = 16) => {
-	const lineEl = closestHtmlElement(el, ".layout-line");
-	return lineEl ? lineEl.offsetHeight : fallback;
-};
 const containerStyles = {
 	position: "relative",
 	width: "100%",
@@ -2600,7 +2378,7 @@ const loadSelectionGeometry = () => {
 	return selectionGeometryPromise;
 };
 function HfCaretOverlay(t0) {
-	const $ = c(22);
+	const $ = c(27);
 	const { selection, pagesContainer, hiddenHost, editorView, zoom } = t0;
 	const [caret, setCaret] = useState(null);
 	let t1;
@@ -2610,62 +2388,24 @@ function HfCaretOverlay(t0) {
 	} else t1 = $[0];
 	const [rangeRects, setRangeRects] = useState(t1);
 	let t2;
-	let t3;
-	if ($[1] !== editorView || $[2] !== hiddenHost || $[3] !== pagesContainer || $[4] !== selection.from || $[5] !== selection.kind || $[6] !== selection.pageNumber || $[7] !== selection.rId || $[8] !== selection.to || $[9] !== zoom) {
+	if ($[1] !== editorView || $[2] !== hiddenHost || $[3] !== pagesContainer || $[4] !== selection || $[5] !== zoom) {
 		t2 = () => {
 			if (!pagesContainer) return;
 			const recompute = () => {
 				const cr = pagesContainer.getBoundingClientRect();
 				const zoomDivisor = zoom !== 0 ? zoom : 1;
-				const pageScope = selection.pageNumber ? pagesContainer.querySelector(`.layout-page[data-page-number="${selection.pageNumber}"]`) ?? pagesContainer : pagesContainer;
-				if (selection.from === selection.to) {
-					const hit = findHfCaretSpan(pageScope, selection.kind, selection.rId, selection.from);
-					if (!hit) {
-						syncImeCaretAnchor({
-							hiddenHost,
-							editorView,
-							visibleCaret: null
-						});
-						setCaret(null);
-						setRangeRects([]);
-						return;
-					}
-					const ar = hit.element.getBoundingClientRect();
-					let absX = hit.edge === "right" ? ar.right : ar.left;
-					let absY = ar.top;
-					let absHeight = ar.height || 16;
-					const pmStartStr = hit.element.dataset.pmStart;
-					const pmEndStr = hit.element.dataset.pmEnd;
-					const pmStart = pmStartStr ? Number.parseInt(pmStartStr, 10) : NaN;
-					const pmEnd = pmEndStr ? Number.parseInt(pmEndStr, 10) : NaN;
-					const textNode = hit.element.firstChild;
-					if (textNode && textNode.nodeType === Node.TEXT_NODE && Number.isFinite(pmStart) && Number.isFinite(pmEnd)) {
-						const textContent = textNode.textContent ?? "";
-						const charOffset = Math.min(Math.max(0, selection.from - pmStart), textContent.length);
-						const range = hit.element.ownerDocument.createRange();
-						range.setStart(textNode, charOffset);
-						range.setEnd(textNode, charOffset);
-						const rRect = range.getBoundingClientRect();
-						if (rRect.height > 0 || rRect.width > 0 || rRect.left > 0) {
-							absX = rRect.left;
-							absY = rRect.top;
-							absHeight = rRect.height || absHeight;
-						}
-					}
-					setCaret({
-						x: (absX - cr.left) / zoomDivisor,
-						y: (absY - cr.top) / zoomDivisor,
-						height: absHeight / zoomDivisor
-					});
+				const geometry = resolveHeaderFooterSelectionGeometry(pagesContainer, selection, zoomDivisor);
+				setCaret(geometry.caret);
+				setRangeRects(geometry.ranges);
+				if (geometry.caret) {
 					syncImeCaretAnchor({
 						hiddenHost,
 						editorView,
 						visibleCaret: {
-							left: absX,
-							top: absY
+							left: cr.left + geometry.caret.x * zoomDivisor,
+							top: cr.top + geometry.caret.y * zoomDivisor
 						}
 					});
-					setRangeRects([]);
 					return;
 				}
 				syncImeCaretAnchor({
@@ -2673,41 +2413,6 @@ function HfCaretOverlay(t0) {
 					editorView,
 					visibleCaret: null
 				});
-				const spans = findHfPmSpans(pageScope, selection.kind, selection.rId);
-				const rects = [];
-				for (const span of spans) {
-					const spanStart = Number.parseInt(span.dataset.pmStart ?? "", 10);
-					const spanEnd = Number.parseInt(span.dataset.pmEnd ?? "", 10);
-					if (!Number.isFinite(spanStart) || !Number.isFinite(spanEnd)) continue;
-					if (spanEnd <= selection.from || spanStart >= selection.to) continue;
-					const textNode_0 = span.firstChild;
-					if (textNode_0 && textNode_0.nodeType === Node.TEXT_NODE) {
-						const textContent_0 = textNode_0.textContent ?? "";
-						const startChar = Math.max(0, selection.from - spanStart);
-						const endChar = Math.min(textContent_0.length, selection.to - spanStart);
-						if (startChar < endChar) {
-							const range_0 = span.ownerDocument.createRange();
-							range_0.setStart(textNode_0, startChar);
-							range_0.setEnd(textNode_0, endChar);
-							for (const cRect of Array.from(range_0.getClientRects())) rects.push({
-								x: (cRect.left - cr.left) / zoomDivisor,
-								y: (cRect.top - cr.top) / zoomDivisor,
-								width: cRect.width / zoomDivisor,
-								height: cRect.height / zoomDivisor
-							});
-							continue;
-						}
-					}
-					const r = span.getBoundingClientRect();
-					rects.push({
-						x: (r.left - cr.left) / zoomDivisor,
-						y: (r.top - cr.top) / zoomDivisor,
-						width: r.width / zoomDivisor,
-						height: r.height / zoomDivisor
-					});
-				}
-				setRangeRects(rects);
-				setCaret(null);
 			};
 			recompute();
 			const onPainted = () => recompute();
@@ -2732,6 +2437,15 @@ function HfCaretOverlay(t0) {
 				resetImeCaretAnchor(hiddenHost);
 			};
 		};
+		$[1] = editorView;
+		$[2] = hiddenHost;
+		$[3] = pagesContainer;
+		$[4] = selection;
+		$[5] = zoom;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== editorView || $[8] !== hiddenHost || $[9] !== pagesContainer || $[10] !== selection.from || $[11] !== selection.kind || $[12] !== selection.pageNumber || $[13] !== selection.rId || $[14] !== selection.to || $[15] !== zoom) {
 		t3 = [
 			selection.rId,
 			selection.kind,
@@ -2743,31 +2457,27 @@ function HfCaretOverlay(t0) {
 			editorView,
 			zoom
 		];
-		$[1] = editorView;
-		$[2] = hiddenHost;
-		$[3] = pagesContainer;
-		$[4] = selection.from;
-		$[5] = selection.kind;
-		$[6] = selection.pageNumber;
-		$[7] = selection.rId;
-		$[8] = selection.to;
-		$[9] = zoom;
-		$[10] = t2;
-		$[11] = t3;
-	} else {
-		t2 = $[10];
-		t3 = $[11];
-	}
+		$[7] = editorView;
+		$[8] = hiddenHost;
+		$[9] = pagesContainer;
+		$[10] = selection.from;
+		$[11] = selection.kind;
+		$[12] = selection.pageNumber;
+		$[13] = selection.rId;
+		$[14] = selection.to;
+		$[15] = zoom;
+		$[16] = t3;
+	} else t3 = $[16];
 	useEffect(t2, t3);
 	if (!pagesContainer) return null;
 	let t4;
-	if ($[12] !== rangeRects) {
+	if ($[17] !== rangeRects) {
 		t4 = rangeRects.map(_temp$8);
-		$[12] = rangeRects;
-		$[13] = t4;
-	} else t4 = $[13];
+		$[17] = rangeRects;
+		$[18] = t4;
+	} else t4 = $[18];
 	let t5;
-	if ($[14] !== caret) {
+	if ($[19] !== caret) {
 		t5 = caret && /* @__PURE__ */ jsx("div", {
 			"data-testid": "hf-caret",
 			style: {
@@ -2782,39 +2492,39 @@ function HfCaretOverlay(t0) {
 				animation: "folio-caret-blink 1060ms steps(1, end) infinite"
 			}
 		});
-		$[14] = caret;
-		$[15] = t5;
-	} else t5 = $[15];
+		$[19] = caret;
+		$[20] = t5;
+	} else t5 = $[20];
 	let t6;
-	if ($[16] !== t4 || $[17] !== t5) {
+	if ($[21] !== t4 || $[22] !== t5) {
 		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t5] });
-		$[16] = t4;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
 	let t7;
-	if ($[19] !== pagesContainer || $[20] !== t6) {
+	if ($[24] !== pagesContainer || $[25] !== t6) {
 		t7 = createPortal(t6, pagesContainer);
-		$[19] = pagesContainer;
-		$[20] = t6;
-		$[21] = t7;
-	} else t7 = $[21];
+		$[24] = pagesContainer;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
 	return t7;
 }
-function _temp$8(r_0, i) {
+function _temp$8(r, i) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "hf-selection-rect",
 		style: {
 			position: "absolute",
-			left: r_0.x,
-			top: r_0.y,
-			width: r_0.width,
-			height: r_0.height,
+			left: r.x,
+			top: r.y,
+			width: r.width,
+			height: r.height,
 			backgroundColor: "var(--doc-selection, rgba(66, 133, 244, 0.3))",
 			pointerEvents: "none",
 			zIndex: 10
 		}
-	}, `hf-sel-${i}-${r_0.x}-${r_0.y}-${r_0.width}`);
+	}, `hf-sel-${i}-${r.x}-${r.y}-${r.width}`);
 }
 function renderHfFromContentOrPm(hf, rId, hfPMs, contentWidth, metrics, options) {
 	if (!hf) return;
@@ -3548,87 +3258,17 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	* This uses the browser's text rendering to get precise pixel positions.
 	*/
 	const getCaretFromDom = useCallback((pmPos_0, currentZoom = 1) => {
-		if (!pagesContainerRef.current) return null;
-		const overlay = pagesContainerRef.current.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
+		const pagesContainer = pagesContainerRef.current;
+		if (!pagesContainer) return null;
+		const overlay = pagesContainer.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
 		if (!overlay) return null;
-		const overlayRect = overlay.getBoundingClientRect();
-		const spans = findBodyPmSpans(pagesContainerRef.current);
-		const collapsedTarget = findCollapsedLineEdgeCaretTarget(spans, pmPos_0);
-		if (collapsedTarget) return {
-			x: (collapsedTarget.geometry.left - overlayRect.left) / currentZoom,
-			y: (collapsedTarget.geometry.top - overlayRect.top) / currentZoom,
-			height: getLineHeight(collapsedTarget.span),
-			pageIndex: getPageIndex(collapsedTarget.span)
-		};
-		for (const spanEl of spans) {
-			const pmStart = Number(spanEl.dataset["pmStart"]);
-			const pmEnd = Number(spanEl.dataset["pmEnd"]);
-			if (spanEl.classList.contains("layout-run-tab")) {
-				if (pmPos_0 >= pmStart && pmPos_0 < pmEnd) {
-					const spanRect = spanEl.getBoundingClientRect();
-					return {
-						x: (spanRect.left - overlayRect.left) / currentZoom,
-						y: (spanRect.top - overlayRect.top) / currentZoom,
-						height: getLineHeight(spanEl),
-						pageIndex: getPageIndex(spanEl)
-					};
-				}
-				continue;
-			}
-			if (spanEl.classList.contains("layout-empty-run") && pmPos_0 >= pmStart && pmPos_0 <= pmEnd) {
-				const spanRect_0 = spanEl.getBoundingClientRect();
-				return {
-					x: (spanRect_0.left - overlayRect.left) / currentZoom,
-					y: (spanRect_0.top - overlayRect.top) / currentZoom,
-					height: getLineHeight(spanEl, Math.max(16, spanRect_0.height)),
-					pageIndex: getPageIndex(spanEl)
-				};
-			}
-			if (pmPos_0 >= pmStart && pmPos_0 <= pmEnd && spanEl.firstChild?.nodeType === Node.TEXT_NODE) {
-				const textNode = spanEl.firstChild;
-				const charIndex = Math.min(pmPos_0 - pmStart, textNode.length);
-				const range = spanEl.ownerDocument.createRange();
-				range.setStart(textNode, charIndex);
-				range.setEnd(textNode, charIndex);
-				const rangeRect = range.getBoundingClientRect();
-				const spanRect_1 = spanEl.getBoundingClientRect();
-				const useSpanStart = charIndex === 0 || rangeRect.width === 0 && rangeRect.left < spanRect_1.left;
-				const caretLeft = useSpanStart ? spanRect_1.left : rangeRect.left;
-				const caretTop = rangeRect.height > 0 && !useSpanStart ? rangeRect.top : spanRect_1.top;
-				return {
-					x: (caretLeft - overlayRect.left) / currentZoom,
-					y: (caretTop - overlayRect.top) / currentZoom,
-					height: getLineHeight(spanEl),
-					pageIndex: getPageIndex(spanEl)
-				};
-			}
-			if (pmPos_0 >= pmStart && pmPos_0 <= pmEnd) {
-				const spanRect_2 = spanEl.getBoundingClientRect();
-				return {
-					x: (spanRect_2.left - overlayRect.left) / currentZoom,
-					y: (spanRect_2.top - overlayRect.top) / currentZoom,
-					height: getLineHeight(spanEl, Math.max(16, spanRect_2.height)),
-					pageIndex: getPageIndex(spanEl)
-				};
-			}
-		}
-		const emptyRuns = findBodyEmptyRuns(pagesContainerRef.current);
-		for (const emptyRun of emptyRuns) {
-			const paragraph = closestHtmlElement(emptyRun, ".layout-paragraph");
-			if (!paragraph) continue;
-			const pmStart_0 = Number(paragraph.dataset["pmStart"]);
-			const pmEnd_0 = Number(paragraph.dataset["pmEnd"]);
-			if (pmPos_0 >= pmStart_0 && pmPos_0 <= pmEnd_0) {
-				const runRect = emptyRun.getBoundingClientRect();
-				return {
-					x: (runRect.left - overlayRect.left) / currentZoom,
-					y: (runRect.top - overlayRect.top) / currentZoom,
-					height: getLineHeight(emptyRun),
-					pageIndex: getPageIndex(paragraph)
-				};
-			}
-		}
-		return null;
+		const caret = getCaretPositionFromDom(pagesContainer, pmPos_0, overlay.getBoundingClientRect());
+		return caret ? {
+			x: caret.x / currentZoom,
+			y: caret.y / currentZoom,
+			height: caret.height / currentZoom,
+			pageIndex: caret.pageIndex
+		} : null;
 	}, []);
 	const refreshBodyImeCaretAnchor = useCallback(() => {
 		const view_1 = hiddenPMRef.current?.getView();
@@ -3727,12 +3367,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 					setCaretPosition(null);
 					loadSelectionGeometry().then(({ getCaretPosition }) => {
 						if (!isCurrentRequest()) return;
-						const caret = getCaretPosition(layout, blocks, measures, from);
-						if (caret) {
+						const caret_0 = getCaretPosition(layout, blocks, measures, from);
+						if (caret_0) {
 							const fallbackCaret = {
-								...caret,
-								x: caret.x + (pageRect.left - overlayRect_2.left) / zoom,
-								y: caret.y + (pageRect.top - overlayRect_2.top) / zoom
+								...caret_0,
+								x: caret_0.x + (pageRect.left - overlayRect_2.left) / zoom,
+								y: caret_0.y + (pageRect.top - overlayRect_2.top) / zoom
 							};
 							setCaretPosition(fallbackCaret);
 							syncImeCaretAnchor({
@@ -3780,45 +3420,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const overlay_3 = pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
 			if (overlay_3 && pagesContainerRef.current) {
 				const overlayRect_3 = overlay_3.getBoundingClientRect();
-				const domRects = [];
-				const spans_0 = findBodyPmSpans(pagesContainerRef.current);
-				for (const spanEl_0 of spans_0) {
-					const pmStart_1 = Number(spanEl_0.dataset["pmStart"]);
-					if (Number(spanEl_0.dataset["pmEnd"]) > from && pmStart_1 < to) {
-						if (spanEl_0.classList.contains("layout-run-tab")) {
-							const spanRect_3 = spanEl_0.getBoundingClientRect();
-							domRects.push({
-								x: (spanRect_3.left - overlayRect_3.left) / zoom,
-								y: (spanRect_3.top - overlayRect_3.top) / zoom,
-								width: spanRect_3.width / zoom,
-								height: spanRect_3.height / zoom,
-								pageIndex: getPageIndex(spanEl_0)
-							});
-							continue;
-						}
-						let textNode_0 = null;
-						if (spanEl_0.firstChild?.nodeType === Node.TEXT_NODE) textNode_0 = spanEl_0.firstChild;
-						else if (spanEl_0.firstChild instanceof HTMLElement && spanEl_0.firstChild.tagName === "A" && spanEl_0.firstChild.firstChild?.nodeType === Node.TEXT_NODE) textNode_0 = spanEl_0.firstChild.firstChild;
-						if (!textNode_0) continue;
-						const ownerDoc_0 = spanEl_0.ownerDocument;
-						const startChar = Math.max(0, from - pmStart_1);
-						const endChar = Math.min(textNode_0.length, to - pmStart_1);
-						if (startChar < endChar) {
-							const range_0 = ownerDoc_0.createRange();
-							range_0.setStart(textNode_0, startChar);
-							range_0.setEnd(textNode_0, endChar);
-							const clientRects = range_0.getClientRects();
-							const pageIndex = getPageIndex(spanEl_0);
-							for (const rect_0 of Array.from(clientRects)) domRects.push({
-								x: (rect_0.left - overlayRect_3.left) / zoom,
-								y: (rect_0.top - overlayRect_3.top) / zoom,
-								width: rect_0.width / zoom,
-								height: rect_0.height / zoom,
-								pageIndex
-							});
-						}
-					}
-				}
+				const domRects = getSelectionRectsFromDom(pagesContainerRef.current, from, to, overlayRect_3).map((rect_0) => ({
+					pageIndex: rect_0.pageIndex,
+					x: rect_0.x / zoom,
+					y: rect_0.y / zoom,
+					width: rect_0.width / zoom,
+					height: rect_0.height / zoom
+				}));
 				if (domRects.length > 0) setSelectionRects(domRects);
 				else {
 					const firstPage_0 = pagesContainerRef.current.querySelector(".layout-page");
@@ -3855,6 +3463,24 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	]);
 	const updateSelectionOverlayRef = useRef(updateSelectionOverlay);
 	updateSelectionOverlayRef.current = updateSelectionOverlay;
+	useEffect(() => {
+		const pagesContainer_0 = pagesContainerRef.current;
+		if (!pagesContainer_0) return void 0;
+		let animationFrame = null;
+		const repaintSelection = () => {
+			if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+			animationFrame = requestAnimationFrame(() => {
+				animationFrame = null;
+				const state_4 = hiddenPMRef.current?.getState();
+				if (state_4) updateSelectionOverlayRef.current(state_4);
+			});
+		};
+		pagesContainer_0.addEventListener(PAINTER_PAINTED_EVENT, repaintSelection);
+		return () => {
+			if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+			pagesContainer_0.removeEventListener(PAINTER_PAINTED_EVENT, repaintSelection);
+		};
+	}, []);
 	const updateAnonymizationOverlay = useCallback(() => {
 		const isCurrentRequest_0 = anonymizationOverlayRequestGate.begin();
 		const matches = anonymizationMatchesRef.current;
@@ -3862,13 +3488,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			setAnonymizationRectGroups([]);
 			return;
 		}
-		const pagesContainer = pagesContainerRef.current;
-		if (!pagesContainer) {
+		const pagesContainer_1 = pagesContainerRef.current;
+		if (!pagesContainer_1) {
 			setAnonymizationRectGroups([]);
 			return;
 		}
-		const overlay_4 = pagesContainer.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
-		const firstPage_1 = pagesContainer.querySelector(".layout-page");
+		const overlay_4 = pagesContainer_1.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
+		const firstPage_1 = pagesContainer_1.querySelector(".layout-page");
 		if (!overlay_4 || !firstPage_1) {
 			setAnonymizationRectGroups([]);
 			return;
@@ -3877,42 +3503,21 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const pageRect_1 = firstPage_1.getBoundingClientRect();
 		const pageOffsetX_0 = (pageRect_1.left - overlayRect_4.left) / zoom;
 		const pageOffsetY_0 = (pageRect_1.top - overlayRect_4.top) / zoom;
-		const pmSpans = findBodyPmSpans(pagesContainer);
+		const pmSpans = findBodyPmSpans(pagesContainer_1);
 		const layoutFallbackMatches = [];
 		const rectsForMatch = (match, from_0, to_0) => {
 			const domRects_0 = [];
-			for (const spanEl_1 of pmSpans) {
-				const pmStart_2 = Number(spanEl_1.dataset["pmStart"]);
-				if (!(Number(spanEl_1.dataset["pmEnd"]) > from_0 && pmStart_2 < to_0)) continue;
-				if (spanEl_1.classList.contains("layout-run-tab")) {
-					const spanRect_4 = spanEl_1.getBoundingClientRect();
-					domRects_0.push({
-						x: (spanRect_4.left - overlayRect_4.left) / zoom,
-						y: (spanRect_4.top - overlayRect_4.top) / zoom,
-						width: spanRect_4.width / zoom,
-						height: spanRect_4.height / zoom,
-						pageIndex: getPageIndex(spanEl_1)
-					});
-					continue;
-				}
-				let textNode_1 = null;
-				if (spanEl_1.firstChild?.nodeType === Node.TEXT_NODE) textNode_1 = spanEl_1.firstChild;
-				else if (spanEl_1.firstChild instanceof HTMLElement && spanEl_1.firstChild.tagName === "A" && spanEl_1.firstChild.firstChild?.nodeType === Node.TEXT_NODE) textNode_1 = spanEl_1.firstChild.firstChild;
-				if (!textNode_1) continue;
-				const ownerDoc_1 = spanEl_1.ownerDocument;
-				const startChar_0 = Math.max(0, from_0 - pmStart_2);
-				const endChar_0 = Math.min(textNode_1.length, to_0 - pmStart_2);
-				if (startChar_0 >= endChar_0) continue;
-				const range_1 = ownerDoc_1.createRange();
-				range_1.setStart(textNode_1, startChar_0);
-				range_1.setEnd(textNode_1, endChar_0);
-				const pageIndex_0 = getPageIndex(spanEl_1);
-				for (const rect_2 of Array.from(range_1.getClientRects())) domRects_0.push({
+			for (const spanEl of pmSpans) {
+				const measurement = measurePaintedSpanRange(spanEl, from_0, to_0);
+				if (measurement.type === "outside") continue;
+				const pageIndex = getPageIndex(spanEl);
+				const measuredRects = measurement.type === "element" ? [measurement.rect] : measurement.rects;
+				for (const rect_2 of measuredRects) domRects_0.push({
 					x: (rect_2.left - overlayRect_4.left) / zoom,
 					y: (rect_2.top - overlayRect_4.top) / zoom,
 					width: rect_2.width / zoom,
 					height: rect_2.height / zoom,
-					pageIndex: pageIndex_0
+					pageIndex
 				});
 			}
 			if (domRects_0.length > 0) return domRects_0;
@@ -3971,15 +3576,15 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const anchor_0 = current.anchor;
 		loadSelectionGeometry().then(({ getCaretPosition: getCaretPosition_0 }) => {
 			if (!isCurrentRequest_1()) return;
-			const caret_0 = getCaretPosition_0(layout, blocks, measures, anchor_0);
+			const caret_1 = getCaretPosition_0(layout, blocks, measures, anchor_0);
 			if (!isCurrentRequest_1()) return;
-			if (caret_0 === null) {
+			if (caret_1 === null) {
 				setAutocompleteCaret(null);
 				return;
 			}
-			const pagesContainer_0 = pagesContainerRef.current;
-			const overlay_5 = pagesContainer_0?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
-			const firstPage_2 = pagesContainer_0?.querySelector(".layout-page");
+			const pagesContainer_2 = pagesContainerRef.current;
+			const overlay_5 = pagesContainer_2?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
+			const firstPage_2 = pagesContainer_2?.querySelector(".layout-page");
 			if (!overlay_5 || !firstPage_2) {
 				setAutocompleteCaret(null);
 				return;
@@ -3989,12 +3594,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const pageOffsetX_1 = (pageRect_2.left - overlayRect_5.left) / zoom;
 			const pageOffsetY_1 = (pageRect_2.top - overlayRect_5.top) / zoom;
 			if (!isCurrentRequest_1()) return;
-			const caretPage = layout.pages.at(caret_0.pageIndex);
-			const maxWidth = caretPage ? Math.max(AUTOCOMPLETE_GHOST_MIN_WIDTH, caretPage.size.w - caretPage.margins.right - caret_0.x) : void 0;
+			const caretPage = layout.pages.at(caret_1.pageIndex);
+			const maxWidth = caretPage ? Math.max(AUTOCOMPLETE_GHOST_MIN_WIDTH, caretPage.size.w - caretPage.margins.right - caret_1.x) : void 0;
 			setAutocompleteCaret({
-				x: caret_0.x + pageOffsetX_1,
-				y: caret_0.y + pageOffsetY_1,
-				lineHeight: caret_0.height,
+				x: caret_1.x + pageOffsetX_1,
+				y: caret_1.y + pageOffsetY_1,
+				lineHeight: caret_1.height,
 				maxWidth
 			});
 			setAutocompleteText(current.text);
@@ -4010,17 +3615,17 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const updateDirectivesOverlay = useCallback(() => {
 		const isCurrentRequest_2 = directivesOverlayRequestGate.begin();
 		const previewedStarts = new Set(templatePreviewRef.current.entries.map((entry) => entry.from));
-		const ranges = directivesRef.current.filter((range_2) => !(range_2.kind === "placeholder" && previewedStarts.has(range_2.from)));
-		const pagesContainer_1 = pagesContainerRef.current;
-		if (ranges.length === 0 || !pagesContainer_1) {
+		const ranges = directivesRef.current.filter((range) => !(range.kind === "placeholder" && previewedStarts.has(range.from)));
+		const pagesContainer_3 = pagesContainerRef.current;
+		if (ranges.length === 0 || !pagesContainer_3) {
 			setDirectiveRectGroups([]);
 			setDirectiveGutter(null);
 			return;
 		}
-		setDirectiveGutter(measureDirectiveGutter(pagesContainer_1, zoom));
+		setDirectiveGutter(measureDirectiveGutter(pagesContainer_3, zoom));
 		(async () => {
 			const projected = await projectRangesToRects(ranges, {
-				pagesContainer: pagesContainer_1,
+				pagesContainer: pagesContainer_3,
 				zoom,
 				layout,
 				blocks,
@@ -4039,8 +3644,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const isCurrentRequest_3 = aiSuggestionsOverlayRequestGate.begin();
 		const { suggestions, focusedId } = aiSuggestionsRef.current;
 		const pending = suggestions.filter((suggestion) => suggestion.status === "pending" && suggestion.range.from >= 0 && suggestion.range.to > suggestion.range.from);
-		const pagesContainer_2 = pagesContainerRef.current;
-		if (pending.length === 0 || !pagesContainer_2) {
+		const pagesContainer_4 = pagesContainerRef.current;
+		if (pending.length === 0 || !pagesContainer_4) {
 			setAiSuggestionRectGroups((prev) => prev.length === 0 ? prev : []);
 			return;
 		}
@@ -4050,20 +3655,20 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				to: suggestion_0.range.to,
 				suggestion: suggestion_0
 			})), {
-				pagesContainer: pagesContainer_2,
+				pagesContainer: pagesContainer_4,
 				zoom,
 				layout,
 				blocks,
 				measures
 			});
 			if (!isCurrentRequest_3()) return;
-			const focused = projected_0.find(({ range: range_3 }) => range_3.suggestion.id === focusedId);
-			const fonts = collectRunFontsAtPmPositions(pagesContainer_2, focused ? [focused.range.from] : []);
-			setAiSuggestionRectGroups(projected_0.map(({ range: range_4, rects: rects_2 }) => ({
-				suggestion: range_4.suggestion,
+			const focused = projected_0.find(({ range: range_0 }) => range_0.suggestion.id === focusedId);
+			const fonts = collectRunFontsAtPmPositions(pagesContainer_4, focused ? [focused.range.from] : []);
+			setAiSuggestionRectGroups(projected_0.map(({ range: range_1, rects: rects_2 }) => ({
+				suggestion: range_1.suggestion,
 				rects: rects_2,
-				focused: range_4.suggestion.id === focusedId,
-				font: range_4.suggestion.id === focusedId ? fonts.get(range_4.from) ?? null : null
+				focused: range_1.suggestion.id === focusedId,
+				font: range_1.suggestion.id === focusedId ? fonts.get(range_1.from) ?? null : null
 			})));
 		})();
 	}, [
@@ -4075,15 +3680,15 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	]);
 	const updatePassageHighlightOverlay = useCallback(() => {
 		const isCurrentRequest_4 = passageHighlightOverlayRequestGate.begin();
-		const range_5 = passageHighlightRangeRef.current;
-		const pagesContainer_3 = pagesContainerRef.current;
-		if (range_5 === null || !pagesContainer_3) {
+		const range_2 = passageHighlightRangeRef.current;
+		const pagesContainer_5 = pagesContainerRef.current;
+		if (range_2 === null || !pagesContainer_5) {
 			setPassageHighlightRects((prev_0) => prev_0.length === 0 ? prev_0 : []);
 			return;
 		}
 		(async () => {
-			const projected_1 = await projectRangesToRects([range_5], {
-				pagesContainer: pagesContainer_3,
+			const projected_1 = await projectRangesToRects([range_2], {
+				pagesContainer: pagesContainer_5,
 				zoom,
 				layout,
 				blocks,
@@ -4099,16 +3704,16 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		measures,
 		zoom
 	]);
-	const setPassageHighlightImpl = useCallback((range_6) => {
-		passageHighlightRangeRef.current = range_6;
-		if (range_6 === null) {
+	const setPassageHighlightImpl = useCallback((range_3) => {
+		passageHighlightRangeRef.current = range_3;
+		if (range_3 === null) {
 			passageHighlightOverlayRequestGate.invalidate();
 			setPassageHighlightRects((prev_1) => prev_1.length === 0 ? prev_1 : []);
 			return;
 		}
 		updatePassageHighlightOverlay();
 	}, [passageHighlightOverlayRequestGate, updatePassageHighlightOverlay]);
-	const hideSelectionOverlayDuringInput = useCallback((state_4) => {
+	const hideSelectionOverlayDuringInput = useCallback((state_5) => {
 		selectionOverlayRequestGate.invalidate();
 		suppressSelectionOverlayRef.current = true;
 		setCaretPosition(null);
@@ -4117,7 +3722,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		revealSelectionOverlayTimerRef.current = window.setTimeout(() => {
 			revealSelectionOverlayTimerRef.current = null;
 			suppressSelectionOverlayRef.current = false;
-			updateSelectionOverlay(hiddenPMRef.current?.getState() ?? state_4);
+			updateSelectionOverlay(hiddenPMRef.current?.getState() ?? state_5);
 		}, SELECTION_REVEAL_AFTER_INPUT_DELAY);
 	}, [selectionOverlayRequestGate, updateSelectionOverlay]);
 	useEffect(() => () => {
@@ -4142,7 +3747,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	/**
 	* Handle PM transaction - re-layout on content/selection change.
 	*/
-	const handleTransaction = useCallback((transaction, newState) => {
+	const handleTransaction = useCallback(({ transactions, newState, docChanged }) => {
 		const nextMatches = anonymizationDecorationsKey.getState(newState)?.matches ?? [];
 		const matchesChanged = nextMatches !== anonymizationMatchesRef.current;
 		anonymizationMatchesRef.current = nextMatches;
@@ -4155,7 +3760,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const nextDirectives = templateDirectivesKey.getState(newState)?.ranges ?? [];
 		if (nextDirectives !== directivesRef.current) {
 			directivesRef.current = nextDirectives;
-			if (!transaction.docChanged) updateDirectivesOverlay();
+			if (!docChanged) updateDirectivesOverlay();
 		}
 		const nextPreviewState = templatePreviewValuesKey.getState(newState);
 		const nextPreviewEntries = nextPreviewState?.entries ?? EMPTY_TEMPLATE_PREVIEW_ENTRIES;
@@ -4166,7 +3771,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				entries: nextPreviewEntries,
 				mode: nextPreviewMode
 			};
-			if (!transaction.docChanged) if (nextPreviewMode !== previousPreview.mode) scheduleLayout(newState, null);
+			if (!docChanged) if (nextPreviewMode !== previousPreview.mode) scheduleLayout(newState, null);
 			else {
 				const previewDirty = templatePreviewDirtyRange(previousPreview.entries, nextPreviewEntries);
 				if (previewDirty) scheduleLayout(newState, previewDirty);
@@ -4180,9 +3785,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				suggestions: nextAiSuggestions,
 				focusedId: nextAiFocusedId
 			};
-			if (!transaction.docChanged) updateAISuggestionsOverlay();
+			if (!docChanged) updateAISuggestionsOverlay();
 		}
-		if (transaction.docChanged) {
+		if (docChanged) {
 			syncCoordinator.incrementStateSeq();
 			if (passageHighlightRangeRef.current !== null) {
 				passageHighlightRangeRef.current = null;
@@ -4190,11 +3795,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				setPassageHighlightRects((prev_2) => prev_2.length === 0 ? prev_2 : []);
 			}
 			hideSelectionOverlayDuringInput(newState);
-			scheduleLayout(newState, getTransactionDirtyRange(transaction));
+			scheduleLayout(newState, getTransactionsDirtyRange(transactions));
 			scheduleDocumentChangeNotification();
 		}
 		syncCoordinator.requestRender();
-		if (!transaction.docChanged) updateSelectionOverlay(newState);
+		if (!docChanged) updateSelectionOverlay(newState);
 	}, [
 		scheduleLayout,
 		scheduleDocumentChangeNotification,
@@ -4224,8 +3829,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	*/
 	const [hfCaretSelection, setHfCaretSelection] = useState(null);
 	const activeHfPageNumberRef = useRef(null);
-	const handleHfPmTransaction = useCallback((rId, kind, view_2, docChanged, selectionChanged) => {
-		if (docChanged) {
+	const handleHfPmTransaction = useCallback((rId, kind, view_2, docChanged_0, selectionChanged) => {
+		if (docChanged_0) {
 			let bodyState = hiddenPMRef.current?.getState();
 			if (!bodyState && precomputedInitialStateRef.current) bodyState = precomputedInitialStateRef.current;
 			if (!bodyState) {
@@ -4234,7 +3839,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			}
 			if (bodyState) scheduleLayout(bodyState, null);
 		}
-		if (docChanged || selectionChanged) {
+		if (docChanged_0 || selectionChanged) {
 			const { from: from_1, to: to_1 } = view_2.state.selection;
 			const pageNumber = activeHfPageNumberRef.current;
 			setHfCaretSelection({
@@ -4251,12 +3856,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			});
 		}
 	}, [scheduleLayout, ensureHiddenEditorView]);
-	const handleNoteStoryTransaction = useCallback((view_3, docChanged_0, selectionChanged_0) => {
-		if (docChanged_0) {
+	const handleNoteStoryTransaction = useCallback((view_3, docChanged_1, selectionChanged_0) => {
+		if (docChanged_1) {
 			const bodyState_0 = hiddenPMRef.current?.getState();
 			if (bodyState_0) scheduleLayout(bodyState_0, null);
 		}
-		if (docChanged_0 || selectionChanged_0) {
+		if (docChanged_1 || selectionChanged_0) {
 			const { from: from_2, to: to_2 } = view_3.state.selection;
 			onSelectionChangeRef.current?.(from_2, to_2);
 			folioEmitterRef.current.emit("selectionChange", {
@@ -4278,12 +3883,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	/**
 	* Handle selection change from PM.
 	*/
-	const handleSelectionChange = useCallback((state_5) => {
-		const { selection: selection_2 } = state_5;
+	const handleSelectionChange = useCallback((state_6) => {
+		const { selection: selection_2 } = state_6;
 		if (selection_2 instanceof NodeSelection && selection_2.node.type.name === "image") {
 			setSelectionRects([]);
 			setCaretPosition(null);
-		} else if (syncCoordinator.isSafeToRender()) updateSelectionOverlay(state_5);
+		} else if (syncCoordinator.isSafeToRender()) updateSelectionOverlay(state_6);
 		requestAnimationFrame(() => {
 			const view_4 = hiddenPMRef.current?.getView();
 			if (!view_4) {
@@ -4405,9 +4010,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		});
 	}, [layout, scrollToPositionImpl]);
 	const scrollToParaIdImpl = useCallback((paraId, options_2) => {
-		const state_6 = hiddenPMRef.current?.getState();
-		if (!state_6) return false;
-		const startPos = findStartPosForParaId(state_6.doc, paraId);
+		const state_7 = hiddenPMRef.current?.getState();
+		if (!state_7) return false;
+		const startPos = findStartPosForParaId(state_7.doc, paraId);
 		if (startPos == null || startPos < 0) return false;
 		scrollToPositionImpl(startPos);
 		requestAnimationFrame(() => {
@@ -4415,8 +4020,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				const pages = pagesContainerRef.current;
 				if (pages) flashParagraphFragmentsByParaId(pages, paraId, options_2.highlight);
 			}
-			const targetNode = state_6.doc.nodeAt(startPos);
-			const inner = targetNode?.isTextblock === true ? Math.min(startPos + 1 + targetNode.content.size, state_6.doc.content.size) : Math.min(startPos + 1, state_6.doc.content.size);
+			const targetNode = state_7.doc.nodeAt(startPos);
+			const inner = targetNode?.isTextblock === true ? Math.min(startPos + 1 + targetNode.content.size, state_7.doc.content.size) : Math.min(startPos + 1, state_7.doc.content.size);
 			hiddenPMRef.current?.setSelection(inner);
 			hiddenPMRef.current?.focus();
 		});
@@ -4671,9 +4276,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		if (!readOnly && imageEl) {
 			e.preventDefault();
 			e.stopPropagation();
-			const pmStart_3 = imageEl.dataset["pmStart"];
-			if (pmStart_3 !== void 0) {
-				const pos_1 = Number.parseInt(pmStart_3, 10);
+			const pmStart = imageEl.dataset["pmStart"];
+			if (pmStart !== void 0) {
+				const pos_1 = Number.parseInt(pmStart, 10);
 				const hfSlot = hfEditMode ? findHfSlotForTarget(imageEl) : null;
 				const hfView_0 = hfSlot ? hfPMsRef.current?.getView(hfSlot.rId) : null;
 				if (hfView_0) {
@@ -4857,10 +4462,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const view_12 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
 			if (view_12) {
-				const pmStart_4 = resizeTablePmStartRef.current;
+				const pmStart_0 = resizeTablePmStartRef.current;
 				const colIdx = resizeColumnIndexRef.current;
 				const { left: newLeft, right: newRight } = resizeOrigWidthsRef.current;
-				const $pos_5 = view_12.state.doc.resolve(pmStart_4 + 1);
+				const $pos_5 = view_12.state.doc.resolve(pmStart_0 + 1);
 				for (let d_3 = $pos_5.depth; d_3 >= 0; d_3--) {
 					const node_4 = $pos_5.node(d_3);
 					if (node_4.type.name === "table") {
@@ -4907,10 +4512,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const view_13 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
 			if (view_13) {
-				const pmStart_5 = resizeRowTablePmStartRef.current;
+				const pmStart_1 = resizeRowTablePmStartRef.current;
 				const rowIdx = resizeRowIndexRef.current;
 				const newHeight_0 = resizeRowOrigHeightRef.current;
-				const $pos_6 = view_13.state.doc.resolve(pmStart_5 + 1);
+				const $pos_6 = view_13.state.doc.resolve(pmStart_1 + 1);
 				for (let d_4 = $pos_6.depth; d_4 >= 0; d_4--) {
 					const node_5 = $pos_6.node(d_4);
 					if (node_5.type.name === "table") {
@@ -4942,10 +4547,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const view_14 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
 			if (view_14) {
-				const pmStart_6 = resizeRightEdgePmStartRef.current;
+				const pmStart_2 = resizeRightEdgePmStartRef.current;
 				const colIdx_0 = resizeRightEdgeColIndexRef.current;
 				const newWidth_1 = resizeRightEdgeOrigWidthRef.current;
-				const $pos_7 = view_14.state.doc.resolve(pmStart_6 + 1);
+				const $pos_7 = view_14.state.doc.resolve(pmStart_2 + 1);
 				for (let d_5 = $pos_7.depth; d_5 >= 0; d_5--) {
 					const node_6 = $pos_7.node(d_5);
 					if (node_6.type.name === "table") {
@@ -5809,8 +5414,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const container = containerRef.current;
 		if (!container) return;
 		const observer = new ResizeObserver(() => {
-			const state_7 = hiddenPMRef.current?.getState();
-			if (state_7) updateSelectionOverlay(state_7);
+			const state_8 = hiddenPMRef.current?.getState();
+			if (state_8) updateSelectionOverlay(state_8);
 		});
 		observer.observe(container);
 		return () => observer.disconnect();
@@ -5818,11 +5423,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	useEffect(() => {
 		const hiddenHost = hiddenPMRef.current?.getHostElement();
 		if (!hiddenHost) return;
-		let animationFrame = null;
+		let animationFrame_0 = null;
 		const scheduleRefresh = () => {
-			if (animationFrame !== null) cancelAnimationFrame(animationFrame);
-			animationFrame = requestAnimationFrame(() => {
-				animationFrame = null;
+			if (animationFrame_0 !== null) cancelAnimationFrame(animationFrame_0);
+			animationFrame_0 = requestAnimationFrame(() => {
+				animationFrame_0 = null;
 				refreshBodyImeCaretAnchor();
 			});
 		};
@@ -5831,7 +5436,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		hiddenHost.addEventListener("compositionend", scheduleRefresh);
 		window.addEventListener("scroll", scheduleRefresh, true);
 		return () => {
-			if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+			if (animationFrame_0 !== null) cancelAnimationFrame(animationFrame_0);
 			hiddenHost.removeEventListener("focusin", refreshOnFocus);
 			hiddenHost.removeEventListener("compositionend", scheduleRefresh);
 			window.removeEventListener("scroll", scheduleRefresh, true);
@@ -5947,33 +5552,33 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			return bestNumber;
 		},
 		getBlockRect(blockId) {
-			const state_8 = folioEditor.getState();
-			const pagesContainer_4 = pagesContainerRef.current;
+			const state_9 = folioEditor.getState();
+			const pagesContainer_6 = pagesContainerRef.current;
 			const scrollRoot = getScrollContainer();
-			if (!state_8 || !pagesContainer_4 || !scrollRoot) return null;
+			if (!state_9 || !pagesContainer_6 || !scrollRoot) return null;
 			return readBlockRects({
 				blockIds: [blockId],
-				snapshot: createFolioAIEditSnapshot$1(state_8.doc),
-				pagesContainer: pagesContainer_4,
+				snapshot: createFolioAIEditSnapshot$1(state_9.doc),
+				pagesContainer: pagesContainer_6,
 				scrollRoot
 			}).get(blockId) ?? null;
 		},
 		getBlockRects(blockIds) {
-			const state_9 = folioEditor.getState();
-			const pagesContainer_5 = pagesContainerRef.current;
+			const state_10 = folioEditor.getState();
+			const pagesContainer_7 = pagesContainerRef.current;
 			const scrollRoot_0 = getScrollContainer();
-			if (!state_9 || !pagesContainer_5 || !scrollRoot_0) return /* @__PURE__ */ new Map();
+			if (!state_10 || !pagesContainer_7 || !scrollRoot_0) return /* @__PURE__ */ new Map();
 			return readBlockRects({
 				blockIds,
-				snapshot: createFolioAIEditSnapshot$1(state_9.doc),
-				pagesContainer: pagesContainer_5,
+				snapshot: createFolioAIEditSnapshot$1(state_10.doc),
+				pagesContainer: pagesContainer_7,
 				scrollRoot: scrollRoot_0
 			});
 		},
 		getScrollRoot: getScrollContainer,
 		onLayoutChange(listener) {
-			const pagesContainer_6 = pagesContainerRef.current;
-			return pagesContainer_6 ? onPaintedLayoutChange(pagesContainer_6, listener) : () => {};
+			const pagesContainer_8 = pagesContainerRef.current;
+			return pagesContainer_8 ? onPaintedLayoutChange(pagesContainer_8, listener) : () => {};
 		}
 	}), [
 		ensureHiddenEditorView,
@@ -5994,8 +5599,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		onTotalPagesChangeRef.current?.(totalPages);
 	}, [layout]);
 	useEffect(() => {
-		const state_10 = hiddenPMRef.current?.getState();
-		if (layout && state_10) updateSelectionOverlay(state_10);
+		const state_11 = hiddenPMRef.current?.getState();
+		if (layout && state_11) updateSelectionOverlay(state_11);
 	}, [layout, updateSelectionOverlay]);
 	const totalHeight = useMemo(() => {
 		if (!layout) return DEFAULT_PAGE_HEIGHT_PX + 48;
@@ -12699,7 +12304,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 * - Error boundary
 * - Loading states
 */
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-DWEKDq08.js").then((m) => ({ default: m.CommentsSidebar })));
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-Bvlu7MpL.js").then((m) => ({ default: m.CommentsSidebar })));
 const TextContextMenu = lazy(() => import("./TextContextMenu-Ci7-M4oU.js").then((m) => ({ default: m.TextContextMenu })));
 const loadAttemptSelectiveSave = async () => {
 	const { attemptSelectiveSave } = await import("@stll/folio-core/docx/selectiveSave");
@@ -12960,7 +12565,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	const scrollContainerRef = useRef(null);
 	const [formatPainterMode, setFormatPainterModeState] = useState("off");
 	const formatPainterModeRef = useRef("off");
-	const capturedFormatMarksRef = useRef([]);
+	const capturedFormatMarksRef = useRef(null);
 	const setFormatPainterMode = useCallback((next) => {
 		formatPainterModeRef.current = next;
 		setFormatPainterModeState(next);
@@ -13827,7 +13432,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	}, [getActiveEditorView, getCachedStyleResolver]);
 	const captureFormatPainter = useCallback(() => {
 		const view_10 = getActiveEditorView();
-		capturedFormatMarksRef.current = view_10 ? captureFormatMarks(view_10.state) : [];
+		capturedFormatMarksRef.current = view_10 ? captureFormatMarks(view_10.state) : null;
 	}, [getActiveEditorView]);
 	const paintFormatToSelection = useCallback(() => {
 		const view_11 = getActiveEditorView();
@@ -13838,7 +13443,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	}, [getActiveEditorView]);
 	const handleFormatPainter = useCallback((sticky) => {
 		if (formatPainterModeRef.current !== "off") {
-			capturedFormatMarksRef.current = [];
+			capturedFormatMarksRef.current = null;
 			setFormatPainterMode("off");
 			return;
 		}
@@ -13861,11 +13466,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		const handleKeyDown = (event_0) => {
 			if (event_0.key === "Escape") {
 				const armed = formatPainterModeRef.current !== "off";
-				const hasCopiedFormat = capturedFormatMarksRef.current.length > 0;
+				const hasCopiedFormat = capturedFormatMarksRef.current !== null;
 				if (!armed && !hasCopiedFormat) return;
 				event_0.preventDefault();
 				event_0.stopPropagation();
-				capturedFormatMarksRef.current = [];
+				capturedFormatMarksRef.current = null;
 				if (armed) setFormatPainterMode("off");
 				return;
 			}