@stll/folio-react 0.25.1 → 0.25.3

package/dist/{renderAsync-BRxLNRVW.js → renderAsync-C0_y_c9Y.js}

@@ -9,6 +9,7 @@ import { closeHistory, redo, undo } from "prosemirror-history";
 import { IntlProvider, useFormatter, useTranslations } from "use-intl";
 import { FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION, FolioPendingSuggestionRegistry, applyFolioDocumentOperations, assertSupportedFolioDocumentOperationVersion, createFolioAIEditSnapshot, createPendingSuggestionSourceSnapshot, getCommentAnchorsFromDoc, getFolioDocumentOperationIssues, getTrackedChangesFromDoc } from "@stll/folio-core/ai-edits";
 import { resolveCanonicalReviewRange } from "@stll/folio-core/controller/canonicalReview";
+import { afterCanonicalCompositionSettles } from "@stll/folio-core/controller/canonicalInputTimer";
 import { resolveActiveEditorStory } from "@stll/folio-core/controller/activeEditorStory";
 import { FOLIO_DOCX_SERIALIZATION_MODE, createFolioEditor } from "@stll/folio-core/controller/folioEditor";
 import { createNoteReferenceFollower, withoutUnreferencedNotes } from "@stll/folio-core/prosemirror/noteReferenceReview";
@@ -43,14 +44,15 @@ import { resolveColor } from "@stll/folio-core/utils/colorResolver";
 import { closestHtmlElement, htmlQueryAll, queryHtmlElement } from "@stll/folio-core/utils/domGuards";
 import { onFontsLoaded } from "@stll/folio-core/utils/fontLoader";
 import { collectHeadings } from "@stll/folio-core/utils/headingCollector";
+import { DEFAULT_OUTLINE_DEPTH, filterHeadingsByDepth } from "@stll/folio-core/utils/outlineDepth";
 import { formatPx, pixelsToTwips, pointsToHalfPoints, twipsToPixels } from "@stll/folio-core/utils/units";
 import { HistoryManager, classifyHistoryShortcut } from "@stll/folio-core/managers/HistoryManager";
-import { createCanonicalHeaderFooterOperation, createCanonicalSectionPropertiesOperation, removeCanonicalHeaderFooterOperations } from "@stll/folio-core/controller/canonicalOperations";
 import { CanonicalSaveDiagnosticError, serializeCanonicalSave } from "@stll/folio-core/docx/canonicalSave";
 import { TableSelectionManager } from "@stll/folio-core/managers/TableSelectionManager";
 import { DEFAULT_PAGE_HEIGHT_PX, getMargins, getPageSize, twipsToPixels as twipsToPixels$1 } from "@stll/folio-core/paged-layout/sectionGeometry";
 import { getFootnoteText } from "@stll/folio-core/docx/storyPlainText";
 import { createPortal } from "react-dom";
+import { panic } from "better-result";
 import { NodeSelection, Selection, TextSelection as TextSelection$1 } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 import { createHeaderFooterEditorManager } from "@stll/folio-core/controller/headerFooterEditorManager";
@@ -97,7 +99,6 @@ import { findStartPosForParaId } from "@stll/folio-core/prosemirror/utils/findPa
 import { allowsDirectDrawingEdit } from "@stll/folio-core/docx/imageRawXml";
 import { commitImageFloatMove, commitImageInlineMove, commitImageResize, isFloatingImage } from "@stll/folio-core/prosemirror/imageCommit";
 import { buildEmbeddedFontFamilyMap, extractEmbeddedFonts } from "@stll/folio-core/fonts/embeddedFonts";
-import { panic } from "better-result";
 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";
@@ -114,6 +115,7 @@ import { getDocumentLoadSource } from "@stll/folio-core/utils/documentLoaderBeha
 import { DISPLAY_MODES, EditorModeManager, isReadOnlyMode, isTrackChangesMode, toggledTrackChangesMode } from "@stll/folio-core/managers/EditorModeManager";
 import { FindReplaceManager } from "@stll/folio-core/managers/FindReplaceManager";
 import { createEmptyHeaderFooter, pickActiveHeaderFooterRId, removeHeaderFooter, resolveEffectiveSectionProperties, resolveHeaderFooterContent, saveHeaderFooterContent } from "@stll/folio-core/utils/headerFooter";
+import { createCanonicalHeaderFooterOperation, removeCanonicalHeaderFooterOperations } from "@stll/folio-core/controller/canonicalOperations";
 import { editHyperlinkAtCursor, removeHyperlinkAtCursor } from "@stll/folio-core/prosemirror/commands/hyperlink";
 import { anchorTargetAttrs, sanitizeExternalUrl, windowFeaturesFor } from "@stll/folio-core/utils/urlSecurity";
 import { applyImagePosition, applyImageProperties, applyImageTransform, applyImageWrapType, insertImageFromFile } from "@stll/folio-core/prosemirror/commands/image";
@@ -369,7 +371,7 @@ const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ d
 		getTheme: () => themeRef.current,
 		getCanonicalApi: () => canonicalApiRef.current?.() ?? null,
 		getExperimentalSession: () => sessionRef.current,
-		onSessionRefusal: (reason, gap) => refusalRef.current?.(reason, gap),
+		onSessionRefusal: (reason, gap, error) => refusalRef.current?.(reason, gap, error),
 		onTransaction: ({ rId, kind, view, docChanged, selectionChanged }) => {
 			onTransactionRef.current?.(rId, kind, view, docChanged, selectionChanged);
 		}
@@ -476,14 +478,11 @@ const NoteStoryEditor = forwardRef(function NoteStoryEditor(t0, ref) {
 				getTheme: () => themeRef.current,
 				getCanonicalApi: () => canonicalApiRef.current?.() ?? null,
 				getExperimentalSession: () => sessionRef.current,
-				onSessionRefusal: (reason, gap) => refusalRef.current?.(reason, gap),
+				onSessionRefusal: (reason, gap, error) => refusalRef.current?.(reason, gap, error),
 				onTransaction: (t2) => {
 					const { docChanged, selectionChanged, view } = t2;
-					if (docChanged) if (usesCanonicalSession(sessionRef.current, CANONICAL_GAP.secondaryStories)) {
-						const canonical = canonicalApiRef.current?.()?.getCanonicalDocument();
-						if (canonical) onDocumentChangeRef.current(canonical);
-					} else {
-						const current = documentRef.current;
+					if (docChanged) {
+						const current = canonicalApiRef.current?.()?.getCanonicalDocument() ?? documentRef.current;
 						if (current) onDocumentChangeRef.current(managerRef.current?.snapshotDocument(current) ?? current);
 					}
 					onStoryChangeRef.current(view, docChanged, selectionChanged);
@@ -1319,7 +1318,7 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 		getExperimentalSession: () => experimentalSessionRef.current,
 		getEditingMode: () => suggestionModeActiveRef.current ? "suggesting" : "editing",
 		getSuggestionAuthor: () => suggestionAuthorRef.current,
-		onSessionRefusal: (reason, gap) => onSessionRefusalRef.current?.(reason, gap),
+		onSessionRefusal: (reason, gap, error) => onSessionRefusalRef.current?.(reason, gap, error),
 		getDocumentIdentity: () => documentIdentityRef.current,
 		getDocumentContext: () => documentRef.current,
 		onTransaction: (update) => onTransactionRef.current?.(update),
@@ -1346,10 +1345,10 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 				setCollaborationModules(modules);
 				setCollaborationModulesError(null);
 			}
-		}, (error) => {
+		}, (error_0) => {
 			if (!cancelled) {
 				setCollaborationModules(null);
-				setCollaborationModulesError(error);
+				setCollaborationModulesError(error_0);
 			}
 		});
 		return () => {
@@ -1403,7 +1402,8 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 	}, [readOnly]);
 	useImperativeHandle(ref, () => ({
 		...managerRef.current.api,
-		getHostElement: () => hostRef.current
+		getHostElement: () => hostRef.current,
+		isCanonicalComposing: () => managerRef.current?.isCanonicalComposing() ?? false
 	}), []);
 	if (hasCollaboration && collaborationModulesError) {
 		let detail = "unknown error";
@@ -2901,8 +2901,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		onActiveNoteStoryChange?.(story);
 	}, [onActiveNoteStoryChange]);
 	useEffect(() => {
-		if (readOnly || usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) noteEditorRef.current?.close();
-	}, [experimentalSession, readOnly]);
+		if (readOnly) noteEditorRef.current?.close();
+	}, [readOnly]);
 	const getCanonicalApi = useCallback(() => hiddenPMRef.current, []);
 	const { handlePMKeyDown } = useVisualLineNavigation({ pagesContainerRef });
 	const handleHiddenEditorKeyDown = useCallback((view, event) => {
@@ -2923,8 +2923,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	onDocumentChangeRef.current = onDocumentChange;
 	onTotalPagesChangeRef.current = onTotalPagesChange;
 	onErrorRef.current = onError;
-	const handleSessionRefusal = useCallback((message, gap) => {
-		onErrorRef.current?.(new CanonicalSessionRefusalError({
+	const handleSessionRefusal = useCallback((message, gap, error) => {
+		onErrorRef.current?.(error ?? new CanonicalSessionRefusalError({
 			gap,
 			message
 		}));
@@ -3175,7 +3175,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			runLayoutPipelineRef.current(state, { reason: "hyphenation-ready" });
 			if (view_1) updateSelectionOverlayRef.current(view_1.state);
 		},
-		onError: (error) => onErrorRef.current?.(error)
+		onError: (error_0) => onErrorRef.current?.(error_0)
 	}));
 	useEffect(() => hyphenationReadiness.cancel, [hyphenationReadiness]);
 	const laidOutLayoutInputSignatureRef = useRef(null);
@@ -3313,6 +3313,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		clock: browserClock
 	});
 	const documentChangeNotifyTimerRef = useRef(null);
+	const compositionNotificationRetryRef = useRef(null);
 	const [noteFollower] = useState(createNoteReferenceFollower);
 	useEffect(() => {
 		noteFollower.reset();
@@ -3322,6 +3323,16 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			window.clearTimeout(documentChangeNotifyTimerRef.current);
 			documentChangeNotifyTimerRef.current = null;
 		}
+		if (hiddenPMRef.current?.isCanonicalComposing()) {
+			const activeView = getActiveEditorStory().view ?? panic("Canonical composition requires an editor view.");
+			if (compositionNotificationRetryRef.current === null) compositionNotificationRetryRef.current = afterCanonicalCompositionSettles(activeView, () => {
+				compositionNotificationRetryRef.current = null;
+				flushDocumentChangeNotification();
+			});
+			return;
+		}
+		compositionNotificationRetryRef.current?.();
+		compositionNotificationRetryRef.current = null;
 		let newDoc = hiddenPMRef.current?.getDocument();
 		const body = hiddenPMRef.current?.getState()?.doc;
 		if (newDoc && body && !usesCanonicalSession(experimentalSession, CANONICAL_GAP.save)) newDoc = noteFollower.reconcile(newDoc, body);
@@ -3329,7 +3340,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			onDocumentChangeRef.current?.(usesCanonicalSession(experimentalSession, CANONICAL_GAP.save) ? cloneDocumentWithParagraphPropertySources(newDoc) : newDoc);
 			folioEmitterRef.current.emit("docChange", usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting) ? cloneDocumentWithParagraphPropertySources(newDoc) : newDoc);
 		}
-	}, [experimentalSession, noteFollower]);
+	}, [
+		experimentalSession,
+		noteFollower,
+		getActiveEditorStory
+	]);
 	const scheduleDocumentChangeNotification = useCallback(() => {
 		if (documentChangeNotifyTimerRef.current !== null) window.clearTimeout(documentChangeNotifyTimerRef.current);
 		documentChangeNotifyTimerRef.current = window.setTimeout(() => {
@@ -3342,6 +3357,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	}, []);
 	useEffect(() => () => {
 		layoutSchedulerRef.current?.dispose();
+		compositionNotificationRetryRef.current?.();
+		compositionNotificationRetryRef.current = null;
 		if (documentChangeNotifyTimerRef.current !== null) {
 			window.clearTimeout(documentChangeNotifyTimerRef.current);
 			documentChangeNotifyTimerRef.current = null;
@@ -4837,10 +4854,6 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (story_0) {
 				e_3.preventDefault();
 				e_3.stopPropagation();
-				if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) {
-					handleSessionRefusal("Footnote and endnote editing is unavailable in this session.", CANONICAL_GAP.secondaryStories);
-					return;
-				}
 				noteEditorRef.current?.open(story_0);
 				return;
 			}
@@ -4984,9 +4997,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			}
 		}
 	}, [
-		experimentalSession,
 		getPositionFromMouse,
-		handleSessionRefusal,
 		onHeaderFooterDoubleClick,
 		onHyperlinkClick,
 		readOnly
@@ -5505,14 +5516,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			return folioEditor.getView();
 		},
 		getActiveView() {
-			if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) return folioEditor.getView();
 			return getActiveEditorStory().view;
 		},
 		closeNoteStory() {
 			noteEditorRef.current?.close();
 		},
 		getHfView(rId_0) {
-			if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) return null;
 			return hfPMsRef.current?.getView(rId_0) ?? null;
 		},
 		ensureView(options_4) {
@@ -7649,35 +7658,31 @@ const initialFocusTarget = (container, initial) => {
 	if (initial === "container") return container;
 	return container.querySelector("[aria-current=\"true\"]") ?? container.querySelector(LIST_TAB_STOP) ?? container.querySelector(FOCUSABLE) ?? container;
 };
-/**
-* While `onClose` is set, `container` is an open drawer: focus moves into it,
-* Escape calls `onClose`, and once it closes focus returns to what had it
-* before, if that is still in the document.
-*/
-const useDrawerFocus = (container, onClose, t0) => {
-	const $ = c(8);
-	const initial = t0 === void 0 ? "item" : t0;
+const useDrawerFocus = (options) => {
+	const $ = c(9);
+	const { container, onClose, returnFocusRef } = options;
+	const initial = options.initial ?? "item";
 	const onCloseRef = useRef(onClose);
+	let t0;
 	let t1;
-	let t2;
 	if ($[0] !== onClose) {
-		t1 = () => {
+		t0 = () => {
 			onCloseRef.current = onClose;
 		};
-		t2 = [onClose];
+		t1 = [onClose];
 		$[0] = onClose;
-		$[1] = t1;
-		$[2] = t2;
+		$[1] = t0;
+		$[2] = t1;
 	} else {
-		t1 = $[1];
-		t2 = $[2];
+		t0 = $[1];
+		t1 = $[2];
 	}
-	useEffect(t1, t2);
+	useEffect(t0, t1);
 	const active = onClose !== null;
+	let t2;
 	let t3;
-	let t4;
-	if ($[3] !== active || $[4] !== container || $[5] !== initial) {
-		t3 = () => {
+	if ($[3] !== active || $[4] !== container || $[5] !== initial || $[6] !== returnFocusRef) {
+		t2 = () => {
 			if (!active) return;
 			const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 			const element = container.current;
@@ -7690,24 +7695,28 @@ const useDrawerFocus = (container, onClose, t0) => {
 			document.addEventListener("keydown", handleKeyDown);
 			return () => {
 				document.removeEventListener("keydown", handleKeyDown);
-				if (previous?.isConnected) previous.focus({ preventScroll: true });
+				const returnTarget = returnFocusRef?.current;
+				const target = returnTarget?.isConnected ? returnTarget : previous;
+				if (target?.isConnected) target.focus({ preventScroll: true });
 			};
 		};
-		t4 = [
+		t3 = [
 			active,
 			container,
-			initial
+			initial,
+			returnFocusRef
 		];
 		$[3] = active;
 		$[4] = container;
 		$[5] = initial;
-		$[6] = t3;
-		$[7] = t4;
+		$[6] = returnFocusRef;
+		$[7] = t2;
+		$[8] = t3;
 	} else {
-		t3 = $[6];
-		t4 = $[7];
+		t2 = $[7];
+		t3 = $[8];
 	}
-	useEffect(t3, t4);
+	useEffect(t2, t3);
 };
 /** Dims the page under an open drawer; pressing it closes the drawer. */
 const PanelScrim = (t0) => {
@@ -7734,164 +7743,188 @@ const PanelScrim = (t0) => {
 const SURFACE_WIDTH = {
 	column: PANEL_METRICS.outlineColumnWidth,
 	rail: PANEL_METRICS.outlineRailWidth,
-	drawer: PANEL_METRICS.drawerWidth
+	expanded: PANEL_METRICS.outlineColumnWidth
 };
 const DocumentOutline = (t0) => {
-	const $ = c(55);
-	const { headings, scrollContainerRef, docSize, activeId, onJump, surface, expanded, onExpand, onClose } = t0;
+	const $ = c(91);
+	const { headings, available, outlineDepth, onOutlineDepthChange, scrollContainerRef, docSize, activeId, onJump, surface, expanded, onExpand, onClose, width: widthOverride } = t0;
 	const t = useTranslations("folio");
 	const OutlineRail = useFolioUI().OutlineRail;
 	const navRef = useRef(null);
-	useDrawerFocus(navRef, surface === "drawer" && onClose ? onClose : null);
-	let t1;
-	if ($[0] !== headings) {
-		t1 = headings.map(_temp$7);
-		$[0] = headings;
-		$[1] = t1;
-	} else t1 = $[1];
-	const items = t1;
+	const expandButtonRef = useRef(null);
+	const t1 = surface === "expanded" && onClose ? onClose : null;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = {
+			container: navRef,
+			onClose: t1,
+			returnFocusRef: expandButtonRef
+		};
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	useDrawerFocus(t2);
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			minWidth: PANEL_METRICS.controlMinimumSize,
+			minHeight: PANEL_METRICS.controlMinimumSize
+		};
+		$[2] = t3;
+	} else t3 = $[2];
+	const controlMinimumStyle = t3;
+	let t4;
+	if ($[3] !== headings) {
+		t4 = headings.map(_temp$7);
+		$[3] = headings;
+		$[4] = t4;
+	} else t4 = $[4];
+	const items = t4;
 	let map;
-	if ($[2] !== docSize || $[3] !== headings) {
+	if ($[5] !== docSize || $[6] !== headings) {
 		map = /* @__PURE__ */ new Map();
 		if (docSize > 0) for (const heading_0 of headings) map.set(headingId(heading_0), Math.min(99, Math.max(1, heading_0.pmPos / docSize * 100)));
-		$[2] = docSize;
-		$[3] = headings;
-		$[4] = map;
-	} else map = $[4];
+		$[5] = docSize;
+		$[6] = headings;
+		$[7] = map;
+	} else map = $[7];
 	const pctById = map;
-	let t2;
-	if ($[5] !== onClose || $[6] !== onJump || $[7] !== surface) {
-		t2 = (id) => {
+	let t5;
+	if ($[8] !== onClose || $[9] !== onJump || $[10] !== surface) {
+		t5 = (id) => {
 			onJump(id);
-			if (surface === "drawer") onClose?.();
+			if (surface === "expanded") onClose?.();
 		};
-		$[5] = onClose;
-		$[6] = onJump;
-		$[7] = surface;
-		$[8] = t2;
-	} else t2 = $[8];
-	const handleJump = t2;
-	let t3;
-	if ($[9] !== pctById) {
-		t3 = (id_0) => pctById.get(id_0) ?? null;
-		$[9] = pctById;
-		$[10] = t3;
-	} else t3 = $[10];
-	const resolvePct = t3;
-	if (headings.length < 2) return null;
-	let t4;
-	if ($[11] !== t) {
-		t4 = t("editor.showDocumentOutline");
-		$[11] = t;
-		$[12] = t4;
-	} else t4 = $[12];
-	const outlineLabel = t4;
-	const width = SURFACE_WIDTH[surface];
-	const t5 = surface === "rail" ? "rail" : "panel";
+		$[8] = onClose;
+		$[9] = onJump;
+		$[10] = surface;
+		$[11] = t5;
+	} else t5 = $[11];
+	const handleJump = t5;
 	let t6;
-	if ($[13] !== OutlineRail || $[14] !== activeId || $[15] !== handleJump || $[16] !== items || $[17] !== outlineLabel || $[18] !== resolvePct || $[19] !== scrollContainerRef || $[20] !== t5 || $[21] !== width) {
-		t6 = /* @__PURE__ */ jsx(OutlineRail, {
+	if ($[12] !== pctById) {
+		t6 = (id_0) => pctById.get(id_0) ?? null;
+		$[12] = pctById;
+		$[13] = t6;
+	} else t6 = $[13];
+	const resolvePct = t6;
+	if (!available) return null;
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("editor.showDocumentOutline");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	const outlineLabel = t7;
+	const width = widthOverride ?? SURFACE_WIDTH[surface];
+	const t8 = surface === "rail" ? "rail" : "panel";
+	let t9;
+	if ($[16] !== OutlineRail || $[17] !== activeId || $[18] !== handleJump || $[19] !== items || $[20] !== outlineLabel || $[21] !== resolvePct || $[22] !== scrollContainerRef || $[23] !== t8 || $[24] !== width) {
+		t9 = /* @__PURE__ */ jsx(OutlineRail, {
 			activeId,
 			ariaLabel: outlineLabel,
 			items,
 			onJump: handleJump,
 			panelWidth: width,
-			presentation: t5,
+			presentation: t8,
 			resolvePct,
 			scrollContainerRef,
 			topOffset: 0
 		});
-		$[13] = OutlineRail;
-		$[14] = activeId;
-		$[15] = handleJump;
-		$[16] = items;
-		$[17] = outlineLabel;
-		$[18] = resolvePct;
-		$[19] = scrollContainerRef;
-		$[20] = t5;
-		$[21] = width;
-		$[22] = t6;
-	} else t6 = $[22];
-	const rail = t6;
+		$[16] = OutlineRail;
+		$[17] = activeId;
+		$[18] = handleJump;
+		$[19] = items;
+		$[20] = outlineLabel;
+		$[21] = resolvePct;
+		$[22] = scrollContainerRef;
+		$[23] = t8;
+		$[24] = width;
+		$[25] = t9;
+	} else t9 = $[25];
+	const rail = t9;
 	if (surface === "rail") {
-		let t7;
-		if ($[23] !== width) {
-			t7 = { width };
-			$[23] = width;
-			$[24] = t7;
-		} else t7 = $[24];
-		const t8 = expanded ?? false;
-		let t9;
-		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-			t9 = /* @__PURE__ */ jsx(PanelLeftOpenIcon, {
+		let t10;
+		if ($[26] !== width) {
+			t10 = { width };
+			$[26] = width;
+			$[27] = t10;
+		} else t10 = $[27];
+		const t11 = expanded ?? false;
+		let t12;
+		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = /* @__PURE__ */ jsx(PanelLeftOpenIcon, {
 				"aria-hidden": "true",
 				size: 16
 			});
-			$[25] = t9;
-		} else t9 = $[25];
-		let t10;
-		if ($[26] !== onExpand || $[27] !== outlineLabel || $[28] !== t8) {
-			t10 = /* @__PURE__ */ jsx("button", {
-				"aria-expanded": t8,
+			$[28] = t12;
+		} else t12 = $[28];
+		let t13;
+		if ($[29] !== onExpand || $[30] !== outlineLabel || $[31] !== t11) {
+			t13 = /* @__PURE__ */ jsx("button", {
+				ref: expandButtonRef,
+				"aria-expanded": t11,
 				"aria-label": outlineLabel,
 				className: "folio-outline-icon-button",
 				"data-testid": "folio-outline-expand",
 				onClick: onExpand,
+				style: controlMinimumStyle,
 				title: outlineLabel,
 				type: "button",
-				children: t9
+				children: t12
 			});
-			$[26] = onExpand;
-			$[27] = outlineLabel;
-			$[28] = t8;
-			$[29] = t10;
-		} else t10 = $[29];
-		let t11;
-		if ($[30] !== outlineLabel || $[31] !== rail || $[32] !== t10 || $[33] !== t7) {
-			t11 = /* @__PURE__ */ jsxs("nav", {
+			$[29] = onExpand;
+			$[30] = outlineLabel;
+			$[31] = t11;
+			$[32] = t13;
+		} else t13 = $[32];
+		let t14;
+		if ($[33] !== outlineLabel || $[34] !== rail || $[35] !== t10 || $[36] !== t13) {
+			t14 = /* @__PURE__ */ jsxs("nav", {
 				"aria-label": outlineLabel,
 				className: "folio-outline folio-outline--rail",
 				"data-testid": "folio-outline",
 				"data-folio-outline-surface": "rail",
-				style: t7,
-				children: [t10, rail]
+				style: t10,
+				children: [t13, rail]
 			});
-			$[30] = outlineLabel;
-			$[31] = rail;
-			$[32] = t10;
-			$[33] = t7;
-			$[34] = t11;
-		} else t11 = $[34];
-		return t11;
+			$[33] = outlineLabel;
+			$[34] = rail;
+			$[35] = t10;
+			$[36] = t13;
+			$[37] = t14;
+		} else t14 = $[37];
+		return t14;
 	}
-	const t7 = `folio-outline folio-outline--${surface}`;
-	let t8;
-	if ($[35] !== width) {
-		t8 = { width };
-		$[35] = width;
-		$[36] = t8;
-	} else t8 = $[36];
-	let t9;
-	if ($[37] !== t) {
-		t9 = t("editor.outlineTitle");
-		$[37] = t;
-		$[38] = t9;
-	} else t9 = $[38];
-	let t10;
-	if ($[39] !== t9) {
-		t10 = /* @__PURE__ */ jsx("span", {
+	const t10 = `folio-outline folio-outline--${surface === "expanded" ? "column" : surface}`;
+	let t11;
+	if ($[38] !== width) {
+		t11 = { width };
+		$[38] = width;
+		$[39] = t11;
+	} else t11 = $[39];
+	let t12;
+	if ($[40] !== t) {
+		t12 = t("editor.outlineTitle");
+		$[40] = t;
+		$[41] = t12;
+	} else t12 = $[41];
+	let t13;
+	if ($[42] !== t12) {
+		t13 = /* @__PURE__ */ jsx("span", {
 			className: "folio-outline-title",
-			children: t9
+			children: t12
 		});
-		$[39] = t9;
-		$[40] = t10;
-	} else t10 = $[40];
-	let t11;
-	if ($[41] !== onClose || $[42] !== surface || $[43] !== t) {
-		t11 = surface === "drawer" && onClose && /* @__PURE__ */ jsx("button", {
+		$[42] = t12;
+		$[43] = t13;
+	} else t13 = $[43];
+	let t14;
+	if ($[44] !== onClose || $[45] !== surface || $[46] !== t) {
+		t14 = surface === "expanded" && onClose && /* @__PURE__ */ jsx("button", {
 			"aria-label": t("common.closeDialog"),
 			className: "folio-outline-icon-button",
 			onClick: onClose,
+			style: controlMinimumStyle,
 			title: t("common.closeDialog"),
 			type: "button",
 			children: /* @__PURE__ */ jsx(XIcon, {
@@ -7899,41 +7932,157 @@ const DocumentOutline = (t0) => {
 				size: 16
 			})
 		});
-		$[41] = onClose;
-		$[42] = surface;
-		$[43] = t;
-		$[44] = t11;
-	} else t11 = $[44];
-	let t12;
-	if ($[45] !== t10 || $[46] !== t11) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+		$[44] = onClose;
+		$[45] = surface;
+		$[46] = t;
+		$[47] = t14;
+	} else t14 = $[47];
+	let t15;
+	if ($[48] !== t13 || $[49] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: "folio-outline-heading-row",
+			children: [t13, t14]
+		});
+		$[48] = t13;
+		$[49] = t14;
+		$[50] = t15;
+	} else t15 = $[50];
+	let t16;
+	if ($[51] !== t) {
+		t16 = t("editor.outlineDepthLabel");
+		$[51] = t;
+		$[52] = t16;
+	} else t16 = $[52];
+	let t17;
+	if ($[53] !== t16) {
+		t17 = /* @__PURE__ */ jsx("span", { children: t16 });
+		$[53] = t16;
+		$[54] = t17;
+	} else t17 = $[54];
+	let t18;
+	if ($[55] !== t) {
+		t18 = t("editor.outlineDepthLabel");
+		$[55] = t;
+		$[56] = t18;
+	} else t18 = $[56];
+	let t19;
+	if ($[57] !== onOutlineDepthChange) {
+		t19 = (event) => {
+			const value = event.currentTarget.value;
+			if (value === "all") {
+				onOutlineDepthChange("all");
+				return;
+			}
+			onOutlineDepthChange(value === "3" ? 3 : 2);
+		};
+		$[57] = onOutlineDepthChange;
+		$[58] = t19;
+	} else t19 = $[58];
+	let t20;
+	if ($[59] !== t) {
+		t20 = t("editor.outlineDepthTwo");
+		$[59] = t;
+		$[60] = t20;
+	} else t20 = $[60];
+	let t21;
+	if ($[61] !== t20) {
+		t21 = /* @__PURE__ */ jsx("option", {
+			value: 2,
+			children: t20
+		});
+		$[61] = t20;
+		$[62] = t21;
+	} else t21 = $[62];
+	let t22;
+	if ($[63] !== t) {
+		t22 = t("editor.outlineDepthThree");
+		$[63] = t;
+		$[64] = t22;
+	} else t22 = $[64];
+	let t23;
+	if ($[65] !== t22) {
+		t23 = /* @__PURE__ */ jsx("option", {
+			value: 3,
+			children: t22
+		});
+		$[65] = t22;
+		$[66] = t23;
+	} else t23 = $[66];
+	let t24;
+	if ($[67] !== t) {
+		t24 = t("editor.outlineDepthAll");
+		$[67] = t;
+		$[68] = t24;
+	} else t24 = $[68];
+	let t25;
+	if ($[69] !== t24) {
+		t25 = /* @__PURE__ */ jsx("option", {
+			value: "all",
+			children: t24
+		});
+		$[69] = t24;
+		$[70] = t25;
+	} else t25 = $[70];
+	let t26;
+	if ($[71] !== outlineDepth || $[72] !== t18 || $[73] !== t19 || $[74] !== t21 || $[75] !== t23 || $[76] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("select", {
+			"aria-label": t18,
+			onChange: t19,
+			value: outlineDepth,
+			children: [
+				t21,
+				t23,
+				t25
+			]
+		});
+		$[71] = outlineDepth;
+		$[72] = t18;
+		$[73] = t19;
+		$[74] = t21;
+		$[75] = t23;
+		$[76] = t25;
+		$[77] = t26;
+	} else t26 = $[77];
+	let t27;
+	if ($[78] !== t17 || $[79] !== t26) {
+		t27 = /* @__PURE__ */ jsxs("label", {
+			className: "folio-outline-depth-control",
+			children: [t17, t26]
+		});
+		$[78] = t17;
+		$[79] = t26;
+		$[80] = t27;
+	} else t27 = $[80];
+	let t28;
+	if ($[81] !== t15 || $[82] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
 			className: "folio-outline-header",
-			children: [t10, t11]
+			children: [t15, t27]
 		});
-		$[45] = t10;
-		$[46] = t11;
-		$[47] = t12;
-	} else t12 = $[47];
-	let t13;
-	if ($[48] !== outlineLabel || $[49] !== rail || $[50] !== surface || $[51] !== t12 || $[52] !== t7 || $[53] !== t8) {
-		t13 = /* @__PURE__ */ jsxs("nav", {
+		$[81] = t15;
+		$[82] = t27;
+		$[83] = t28;
+	} else t28 = $[83];
+	let t29;
+	if ($[84] !== outlineLabel || $[85] !== rail || $[86] !== surface || $[87] !== t10 || $[88] !== t11 || $[89] !== t28) {
+		t29 = /* @__PURE__ */ jsxs("nav", {
 			ref: navRef,
 			"aria-label": outlineLabel,
-			className: t7,
+			className: t10,
 			"data-testid": "folio-outline",
 			"data-folio-outline-surface": surface,
-			style: t8,
-			children: [t12, rail]
+			style: t11,
+			children: [t28, rail]
 		});
-		$[48] = outlineLabel;
-		$[49] = rail;
-		$[50] = surface;
-		$[51] = t12;
-		$[52] = t7;
-		$[53] = t8;
-		$[54] = t13;
-	} else t13 = $[54];
-	return t13;
+		$[84] = outlineLabel;
+		$[85] = rail;
+		$[86] = surface;
+		$[87] = t10;
+		$[88] = t11;
+		$[89] = t28;
+		$[90] = t29;
+	} else t29 = $[90];
+	return t29;
 };
 function _temp$7(heading) {
 	const item = {
@@ -10603,7 +10752,7 @@ const useHeaderFooterEditor = ({ history, pushDocument, getHfView, getCanonicalA
 			setHfEditPosition(position);
 			return;
 		}
-		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.secondaryStories)) {
+		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) {
 			const api = getCanonicalApi?.();
 			api?.ensureView();
 			const canonical = api?.getCanonicalDocument();
@@ -10633,7 +10782,7 @@ const useHeaderFooterEditor = ({ history, pushDocument, getHfView, getCanonicalA
 		experimentalSession
 	]);
 	const handleHeaderFooterSave = useCallback(() => {
-		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.secondaryStories)) {
+		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) {
 			setHfEditPosition(null);
 			return;
 		}
@@ -10687,7 +10836,7 @@ const useHeaderFooterEditor = ({ history, pushDocument, getHfView, getCanonicalA
 				return;
 			}
 			const activeRId_0 = pickActiveHeaderFooterRId(resolution, hfEditPosition, hfEditIsFirstPage);
-			if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.secondaryStories)) {
+			if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) {
 				const api_0 = getCanonicalApi?.();
 				const canonical_0 = api_0?.getCanonicalDocument();
 				if (api_0 && canonical_0 && activeRId_0) api_0.applyCanonicalOperations(removeCanonicalHeaderFooterOperations({
@@ -11028,22 +11177,23 @@ const usePanelLayout = (t0) => {
 		t2 = $[3];
 	}
 	useLayoutEffect(t1, t2);
+	const requestedOutline = overlay === "outline" && outline !== "absent" ? "expanded" : outline;
 	let t3;
-	if ($[4] !== availableWidth || $[5] !== comments || $[6] !== outline || $[7] !== pageWidth) {
+	if ($[4] !== availableWidth || $[5] !== comments || $[6] !== pageWidth || $[7] !== requestedOutline) {
 		t3 = computePanelLayout({
 			availableWidth,
 			pageWidth,
-			outline,
+			outline: requestedOutline,
 			comments
 		});
 		$[4] = availableWidth;
 		$[5] = comments;
-		$[6] = outline;
-		$[7] = pageWidth;
+		$[6] = pageWidth;
+		$[7] = requestedOutline;
 		$[8] = t3;
 	} else t3 = $[8];
 	const layout = t3;
-	const outlineDrawn = layout.outline === "rail" || layout.outline === "drawer";
+	const outlineDrawn = layout.outline !== "none" && layout.outline !== "column";
 	const commentsDrawn = layout.comments === "drawer";
 	let t4;
 	let t5;
@@ -11067,16 +11217,16 @@ const usePanelLayout = (t0) => {
 	}
 	useEffect(t4, t5);
 	let t6;
-	if ($[14] !== availableWidth || $[15] !== outline || $[16] !== pageWidth) {
+	if ($[14] !== availableWidth || $[15] !== pageWidth || $[16] !== requestedOutline) {
 		t6 = () => computePanelLayout({
 			availableWidth,
 			pageWidth,
-			outline,
+			outline: requestedOutline,
 			comments: "open"
 		});
 		$[14] = availableWidth;
-		$[15] = outline;
-		$[16] = pageWidth;
+		$[15] = pageWidth;
+		$[16] = requestedOutline;
 		$[17] = t6;
 	} else t6 = $[17];
 	const layoutWithCommentsOpen = t6;
@@ -12777,7 +12927,7 @@ function sanitizeControlledComments(comments) {
 	}
 	return sanitized;
 }
-function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorContentRef, commentsProp, onCommentsChange }) {
+function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorContentRef, commentsProp, onCommentsChange, committedComments }) {
 	const [showCommentsSidebar, setShowCommentsSidebar] = useState(false);
 	const [visibleCommentAuthors, setVisibleCommentAuthors] = useState(null);
 	const [activeCommentId, setActiveCommentId] = useState(null);
@@ -12814,11 +12964,10 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 	const [floatingCommentBtn, setFloatingCommentBtn] = useState(null);
 	const commentsLoadedRef = useRef(false);
 	useEffect(() => {
-		if (isControlledComments || commentsLoadedRef.current) return;
-		if (!doc) return;
-		const bodyComments = doc.package.document.comments;
+		if (commentsLoadedRef.current || committedComments == null && isControlledComments) return;
+		const bodyComments = committedComments ?? doc?.package.document.comments;
 		if (bodyComments && bodyComments.length > 0) {
-			setComments(bodyComments);
+			if (committedComments == null && doc?.package.document.comments) setComments(doc.package.document.comments);
 			setVisibleCommentAuthors(null);
 			setActiveCommentId(null);
 			if (autoOpenReviewSidebar && countOpenCommentThreads(bodyComments) > 0) setShowCommentsSidebar(true);
@@ -12826,14 +12975,16 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 		}
 	}, [
 		autoOpenReviewSidebar,
+		committedComments,
 		doc,
 		isControlledComments,
 		setComments
 	]);
+	const listedComments = committedComments ?? comments;
 	const commentAuthors = useMemo(() => {
 		const seen = /* @__PURE__ */ new Set();
 		const authors = [];
-		for (const comment of comments) {
+		for (const comment of listedComments) {
 			const commentAuthor = getCommentAuthorKey(comment.author);
 			if (!seen.has(commentAuthor)) {
 				seen.add(commentAuthor);
@@ -12841,26 +12992,26 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 			}
 		}
 		return authors;
-	}, [comments]);
+	}, [listedComments]);
 	const visibleCommentAuthorSet = useMemo(() => visibleCommentAuthors ?? new Set(commentAuthors), [visibleCommentAuthors, commentAuthors]);
 	const visibleCommentIds = useMemo(() => {
 		const ids = /* @__PURE__ */ new Set([-1]);
-		for (const comment_0 of comments) if (visibleCommentAuthorSet.has(getCommentAuthorKey(comment_0.author))) ids.add(comment_0.id);
+		for (const comment_0 of listedComments) if (visibleCommentAuthorSet.has(getCommentAuthorKey(comment_0.author))) ids.add(comment_0.id);
 		return ids;
-	}, [comments, visibleCommentAuthorSet]);
+	}, [listedComments, visibleCommentAuthorSet]);
 	const visibleComments = useMemo(() => {
 		const visibleRootIds = /* @__PURE__ */ new Set();
-		for (const comment_1 of comments) {
+		for (const comment_1 of listedComments) {
 			const parentId_0 = getCommentParentId(comment_1);
 			if (parentId_0 === null || parentId_0 === void 0 || !visibleCommentIds.has(comment_1.id)) continue;
 			visibleRootIds.add(parentId_0);
 		}
-		return comments.filter((comment_2) => {
+		return listedComments.filter((comment_2) => {
 			const parentId_1 = getCommentParentId(comment_2);
 			if (parentId_1 !== null && parentId_1 !== void 0) return visibleCommentIds.has(comment_2.id);
 			return visibleCommentIds.has(comment_2.id) || visibleRootIds.has(comment_2.id);
 		});
-	}, [comments, visibleCommentIds]);
+	}, [listedComments, visibleCommentIds]);
 	const activeCommentVisible = activeCommentId !== null && visibleCommentIds.has(activeCommentId);
 	useEffect(() => {
 		if (!activeCommentVisible) setActiveCommentId(null);
@@ -12953,7 +13104,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 */
 /** No headings to track while the outline is not shown. */
 const NO_HEADINGS = [];
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-D8sljCtX.js").then((m) => ({ default: m.CommentsSidebar })));
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-IR9uTkkk.js").then((m) => ({ default: m.CommentsSidebar })));
 const TextContextMenu = lazy(() => import("./TextContextMenu-Bqth8itn.js").then((m) => ({ default: m.TextContextMenu })));
 const loadAttemptSelectiveSave = async () => {
 	const { attemptSelectiveSave } = await import("@stll/folio-core/docx/selectiveSave");
@@ -13024,8 +13175,14 @@ function areActiveTrackedChangesEqual(a, b) {
 /**
 * DocxEditor - Complete DOCX editor component
 */
-const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, document: initialDocument, onSave, author = "User", onChange, onSelectionChange, onSelectionTextChange, onError, onFontsLoaded: onFontsLoadedCallback, fontFamilies, fonts, theme, showToolbar = true, showZoomControl = true, showReviewControls = true, showHeaderFooterEditing = true, pageRenderer, showMarginGuides = false, marginGuideColor, showRuler: showRulerProp = false, rulerUnit = "inch", initialZoom = 1, enableWheelZoom = true, keyboardShortcuts = "document", hostShortcuts: hostShortcutsProp, readOnly: readOnlyProp = false, autoOpenReviewSidebar = true, components, toolbarExtra, className = "", style, placeholder, loadingIndicator, preserveDocumentWhileLoading = false, initialScrollTop, onScrollTopChange, showOutline: showOutlineProp = true, onPrint, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onCopy, onCut, onPaste, mode: modeProp, onModeChange, onReadonlyEditAttempt, onCompatibilityChange, onEditorViewReady, onAnonymizationMatchesChange, onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq, showTemplateDirectives = false, onSlashMenuChange, onSlashMenuKeyAction, customContextMenuItems, onCustomContextAction, comments: commentsProp, onCommentsChange, collaboration, plugins, featureFlags, experimentalSession, onSelectiveSaveTripwire }, ref) {
+const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, document: initialDocument, onSave, author = "User", onChange, onSelectionChange, onSelectionTextChange, onError, onFontsLoaded: onFontsLoadedCallback, fontFamilies, fonts, theme, showToolbar = true, showZoomControl = true, showReviewControls = true, showHeaderFooterEditing = true, pageRenderer, showMarginGuides = false, marginGuideColor, showRuler: showRulerProp = false, rulerUnit = "inch", initialZoom = 1, enableWheelZoom = true, keyboardShortcuts = "document", hostShortcuts: hostShortcutsProp, readOnly: readOnlyProp = false, autoOpenReviewSidebar = true, components, toolbarExtra, className = "", style, placeholder, loadingIndicator, preserveDocumentWhileLoading = false, initialScrollTop, onScrollTopChange, showOutline: showOutlineProp = true, outlineDepth: outlineDepthProp, onOutlineDepthChange, onPrint, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onCopy, onCut, onPaste, mode: modeProp, onModeChange, onReadonlyEditAttempt, onCompatibilityChange, onEditorViewReady, onAnonymizationMatchesChange, onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq, showTemplateDirectives = false, onSlashMenuChange, onSlashMenuKeyAction, customContextMenuItems, onCustomContextAction, comments: commentsProp, onCommentsChange, collaboration, plugins, featureFlags, experimentalSession, onSelectiveSaveTripwire }, ref) {
 	const t = useTranslations("folio");
+	const [outlineDepthState, setOutlineDepthState] = useState(DEFAULT_OUTLINE_DEPTH);
+	const outlineDepth = outlineDepthProp ?? outlineDepthState;
+	const handleOutlineDepthChange = useCallback((depth) => {
+		if (outlineDepthProp === void 0) setOutlineDepthState(depth);
+		onOutlineDepthChange?.(depth);
+	}, [onOutlineDepthChange, outlineDepthProp]);
 	useEffect(() => {
 		const onClipboardReadError = () => {
 			toast(t("clipboardReadFailed"));
@@ -13063,28 +13220,17 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	const [, setTrackedChanges] = useState([]);
 	const trackedChangesRef = useRef([]);
 	const [anchorPositions, setAnchorPositions] = useState(EMPTY_ANCHOR_POSITIONS);
-	const { editingMode, readOnly, trackChangesOn, toggleTrackChanges: toggleTrackChangesUnrestricted, displayMode, setDisplayMode } = useEditorMode({
+	const { editingMode, readOnly, trackChangesOn, toggleTrackChanges, displayMode, setDisplayMode } = useEditorMode({
 		modeProp,
 		onModeChange,
 		readOnlyProp
 	});
-	const toggleTrackChanges = useCallback(() => {
-		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.suggesting) && !trackChangesOn) {
-			const error = new CanonicalSessionRefusalError({
-				gap: CANONICAL_GAP.suggesting,
-				message: canonicalRefusalMessage(CANONICAL_GAP.suggesting, "Canonical sessions do not support suggesting mode.")
-			});
-			toast(error.message);
-			onError?.(error);
-			return;
-		}
-		toggleTrackChangesUnrestricted();
-	}, [
-		experimentalSession,
-		trackChangesOn,
-		onError,
-		toggleTrackChangesUnrestricted
-	]);
+	useEffect(() => {
+		pagedEditorRef.current?.getEditor().setCanonicalMode(editingMode === "suggesting" ? {
+			type: "suggesting",
+			author
+		} : { type: "editing" });
+	}, [editingMode, author]);
 	const extractTrackedChangesTimerRef = useRef(null);
 	const collectHeadingsTimerRef = useRef(null);
 	const extractTrackedChanges = useCallback(() => {
@@ -13137,12 +13283,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	});
 	const refuseCanonicalModelEdit = useCallback((gap, message) => {
 		if (!usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) return false;
-		const error_0 = new CanonicalSessionRefusalError({
+		const error = new CanonicalSessionRefusalError({
 			gap,
 			message: canonicalRefusalMessage(gap, message)
 		});
-		toast(error_0.message);
-		onError?.(error_0);
+		toast(error.message);
+		onError?.(error);
 		return true;
 	}, [experimentalSession, onError]);
 	const extensionManager = useMemo(() => {
@@ -13326,14 +13472,23 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		size: 4,
 		color: { rgb: "000000" }
 	});
-	const { comments, createComment, setComments, commentsRef, commentsDirtyRef, commentsLoadedRef, showCommentsSidebar, setShowCommentsSidebar, setVisibleCommentAuthors, activeCommentId, setActiveCommentId, isAddingComment, setIsAddingComment, commentSelectionRange, setCommentSelectionRange, addCommentYPosition, setAddCommentYPosition, floatingCommentBtn, setFloatingCommentBtn, commentAuthors, visibleCommentAuthorSet, visibleComments, syncCommentHighlightStyles } = useFolioComments({
-		doc: history.state,
+	const canonicalCommentApi = pagedEditorRef.current?.getEditor();
+	const canonicalCommentsVersion = canonicalCommentApi?.getCanonicalCommittedVersion() ?? null;
+	const canonicalComments = useMemo(() => canonicalCommentsVersion === null ? null : canonicalCommentApi?.getCanonicalComments() ?? null, [canonicalCommentApi, canonicalCommentsVersion]);
+	const canonicalCommentsSerialized = useMemo(() => canonicalComments === null ? null : JSON.stringify(canonicalComments), [canonicalComments]);
+	const canonicalCommentsSnapshotRef = useRef(canonicalCommentsSerialized);
+	const lastControlledCommentsRef = useRef(void 0);
+	const { comments: legacyComments, createComment, setComments, commentsRef, commentsDirtyRef, commentsLoadedRef, showCommentsSidebar, setShowCommentsSidebar, setVisibleCommentAuthors, activeCommentId, setActiveCommentId, isAddingComment, setIsAddingComment, commentSelectionRange, setCommentSelectionRange, addCommentYPosition, setAddCommentYPosition, floatingCommentBtn, setFloatingCommentBtn, commentAuthors, visibleCommentAuthorSet, visibleComments, syncCommentHighlightStyles } = useFolioComments({
+		doc: canonicalComments === null ? history.state : null,
 		autoOpenReviewSidebar,
 		anchorPositions,
 		editorContentRef,
 		commentsProp,
-		onCommentsChange
+		onCommentsChange,
+		committedComments: canonicalComments
 	});
+	const comments = canonicalComments ?? legacyComments;
+	const commentDraftMode = usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting) ? "canonical" : "prosemirror";
 	const documentOperationUndoEntriesRef = useRef([]);
 	const pendingSuggestionRegistryRef = useRef(new FolioPendingSuggestionRegistry());
 	const styleResolverCacheRef = useRef(null);
@@ -13387,6 +13542,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	});
 	let activeHfRId = hfEditIsFirstPage ? activeFirstFooterRId : activeFooterRId;
 	if (hfEditPosition === "header") activeHfRId = hfEditIsFirstPage ? activeFirstHeaderRId : activeHeaderRId;
+	const visibleOutlineHeadings = useMemo(() => filterHeadingsByDepth(outlineHeadings, outlineDepth), [outlineDepth, outlineHeadings]);
 	const panels = usePanelLayout({
 		pageWidth: (widestLaidOutPageWidth ?? getPageSize(effectiveSectionProperties).w) * zoom,
 		outline: showOutline && outlineHeadings.length > 1 ? "available" : "absent",
@@ -13399,7 +13555,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		if (panels.layout.comments === "drawer" && panelOverlay === "comments") return "drawer";
 		return null;
 	})();
-	const { activeId: activeHeadingId, markJumped: markHeadingJumped } = useActiveHeading(scrollContainerRef, panels.layout.outline === "none" ? NO_HEADINGS : outlineHeadings);
+	const { activeId: activeHeadingId, markJumped: markHeadingJumped } = useActiveHeading(scrollContainerRef, panels.layout.outline === "none" ? NO_HEADINGS : visibleOutlineHeadings);
 	const closePanelOverlay = useCallback(() => setPanelOverlay("none"), [setPanelOverlay]);
 	const toggleOutlineOverlay = useCallback(() => setPanelOverlay(panelOverlay === "outline" ? "none" : "outline"), [panelOverlay, setPanelOverlay]);
 	const getActiveEditorStory = useCallback(() => {
@@ -13561,8 +13717,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		if (view_4) setSuggestionMode(editingMode === "suggesting", view_4.state, view_4.dispatch, author);
 	}, [editingMode, author]);
 	const handleDocumentChange = useCallback((newDocument) => {
+		const canonical = usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting);
 		const currentComments = commentsRef.current;
-		const documentWithComments = {
+		const documentWithComments = canonical ? newDocument : {
 			...newDocument,
 			package: {
 				...newDocument.package,
@@ -13573,7 +13730,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			}
 		};
 		pushDocument(documentWithComments);
-		onChange?.(usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting) ? cloneDocumentWithParagraphPropertySources(documentWithComments) : documentWithComments);
+		onChange?.(canonical ? cloneDocumentWithParagraphPropertySources(documentWithComments) : documentWithComments);
 		if (showOutlineRef.current) {
 			if (collectHeadingsTimerRef.current) clearTimeout(collectHeadingsTimerRef.current);
 			collectHeadingsTimerRef.current = setTimeout(() => {
@@ -13595,12 +13752,14 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		extractTrackedChanges,
 		refreshBodyHistoryAvailability,
 		commentsRef,
-		experimentalSession
+		experimentalSession,
+		history.state,
+		onCommentsChange
 	]);
 	const buildCurrentDocument = useCallback(() => {
 		if (!history.state) return null;
-		const canonical = pagedEditorRef.current?.getEditor().getCanonicalDocument();
-		if (canonical) return canonical;
+		const canonical_0 = pagedEditorRef.current?.getEditor().getCanonicalDocument();
+		if (canonical_0) return canonical_0;
 		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) return null;
 		let doc_0 = cloneDocumentWithParagraphPropertySources(history.state);
 		const pmDoc = pagedEditorRef.current?.getDocument();
@@ -13631,11 +13790,14 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		commentsRef,
 		experimentalSession
 	]);
+	const applyCanonicalComment = useCallback((request) => {
+		return getCanonicalApi()?.applyCanonicalComment(request) ?? null;
+	}, [getCanonicalApi]);
 	const replaceComments = useCallback((nextComments) => {
-		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) {
-			refuseCanonicalModelEdit(CANONICAL_GAP.comments, "Comment changes are unavailable in this session.");
-			return;
-		}
+		if (applyCanonicalComment({
+			type: "replace",
+			comments: nextComments
+		}) !== null) return;
 		commentsDirtyRef.current = true;
 		setComments(nextComments);
 		const currentDocument = buildCurrentDocument();
@@ -13645,13 +13807,57 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		buildCurrentDocument,
 		commentsDirtyRef,
 		experimentalSession,
+		applyCanonicalComment,
 		onChange,
-		refuseCanonicalModelEdit,
 		setComments
 	]);
 	const updateComments = useCallback((updater) => {
 		replaceComments(updater(commentsRef.current));
 	}, [commentsRef, replaceComments]);
+	const [controlledCommentsRetry, setControlledCommentsRetry] = useState(0);
+	useEffect(() => {
+		if (commentsProp === void 0 || canonicalComments === null) {
+			lastControlledCommentsRef.current = void 0;
+			return;
+		}
+		const requested = JSON.stringify(legacyComments);
+		if (lastControlledCommentsRef.current === requested) return;
+		if (canonicalCommentsSerialized === requested) {
+			lastControlledCommentsRef.current = requested;
+			return;
+		}
+		const result = applyCanonicalComment({
+			type: "replace",
+			comments: legacyComments
+		});
+		if (result?.status === "applied") {
+			lastControlledCommentsRef.current = requested;
+			return;
+		}
+		if (result?.status !== "refused" || result.retry !== "afterComposition") return;
+		const view_7 = getCanonicalApi()?.getView();
+		if (!view_7) return;
+		return afterCanonicalCompositionSettles(view_7, () => setControlledCommentsRetry((attempt) => attempt + 1));
+	}, [
+		applyCanonicalComment,
+		commentsProp,
+		controlledCommentsRetry,
+		getCanonicalApi,
+		legacyComments,
+		canonicalCommentsSerialized
+	]);
+	useEffect(() => {
+		if (canonicalComments === null) return;
+		const nextComments_0 = canonicalComments;
+		const serialized = canonicalCommentsSerialized;
+		if (canonicalCommentsSnapshotRef.current === null) {
+			canonicalCommentsSnapshotRef.current = serialized;
+			return;
+		}
+		if (canonicalCommentsSnapshotRef.current === serialized) return;
+		canonicalCommentsSnapshotRef.current = serialized;
+		onCommentsChange?.(structuredClone(nextComments_0));
+	}, [canonicalCommentsSerialized, onCommentsChange]);
 	const { findResultRef, handleFind, handleFindNext, handleFindPrevious, handleReplace, handleReplaceAll } = useFindReplace({
 		getDocumentState: buildCurrentDocument,
 		containerRef,
@@ -13659,9 +13865,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		findReplace,
 		selectMatch: useCallback((match) => {
 			const editor_0 = pagedEditorRef.current;
-			const view_7 = editor_0?.getView();
-			if (!editor_0 || !view_7) return false;
-			const range = resolveFindMatchRange(view_7.state.doc, match);
+			const view_8 = editor_0?.getView();
+			if (!editor_0 || !view_8) return false;
+			const range = resolveFindMatchRange(view_8.state.doc, match);
 			if (!range) return false;
 			editor_0.setSelection(range.from, range.to);
 			requestAnimationFrame(() => {
@@ -13671,17 +13877,17 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		}, [])
 	});
 	const handleSelectionChange = useCallback((selectionState) => {
-		const view_8 = getActiveEditorView();
-		if (view_8) {
-			const { from, to } = view_8.state.selection;
+		const view_9 = getActiveEditorView();
+		if (view_9) {
+			const { from, to } = view_9.state.selection;
 			lastSelectionRef.current = {
 				from,
 				to
 			};
 		}
 		let pmTableCtx = null;
-		if (view_8) {
-			pmTableCtx = getTableContext(view_8.state);
+		if (view_9) {
+			pmTableCtx = getTableContext(view_9.state);
 			if (!pmTableCtx.isInTable) pmTableCtx = null;
 		}
 		if (pmTableCtx?.cellBorderColor) {
@@ -13693,8 +13899,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				color: { rgb }
 			};
 		}
-		const pmImageCtx = view_8 ? detectImageContext(view_8.state) : null;
-		const trackedChange = view_8 ? detectActiveTrackedChange(view_8.state) : null;
+		const pmImageCtx = view_9 ? detectImageContext(view_9.state) : null;
+		const trackedChange = view_9 ? detectActiveTrackedChange(view_9.state) : null;
 		if (!selectionState) {
 			setFloatingCommentBtn(null);
 			setState((prev_1) => {
@@ -13757,10 +13963,10 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				activeTrackedChange: activeTrackedChange_0
 			};
 		});
-		if (view_8 && selectionState.hasSelection && !isAddingComment && !readOnly) {
+		if (view_9 && selectionState.hasSelection && !isAddingComment && !readOnly) {
 			const container = scrollContainerRef.current;
 			const parentEl = editorContentRef.current;
-			const { from: selFrom } = view_8.state.selection;
+			const { from: selFrom } = view_9.state.selection;
 			const top = findSelectionYPosition(container, parentEl, selFrom);
 			if (top !== null && container && parentEl) {
 				const pagesEl = container.querySelector(".paged-editor__pages");
@@ -13768,7 +13974,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				const parentRect = parentEl.getBoundingClientRect();
 				const rawLeft = pageEl ? pageEl.getBoundingClientRect().right - parentRect.left + 12 : parentRect.width / 2 + 408;
 				const left = Math.max(16, Math.min(rawLeft, parentRect.width - 16));
-				const { from: from_0, to: to_0 } = view_8.state.selection;
+				const { from: from_0, to: to_0 } = view_9.state.selection;
 				if (from_0 !== to_0) setFloatingCommentBtn({
 					top,
 					left,
@@ -13899,16 +14105,15 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		roots: shortcutRoots
 	});
 	const handleApplyFootnoteProperties = useCallback((footnotePr, endnotePr) => {
-		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) {
-			const api = getCanonicalApi();
-			api?.ensureView();
-			const canonical_0 = api?.getCanonicalDocument();
-			if (!canonical_0 || !api?.applyCanonicalOperations([createCanonicalSectionPropertiesOperation(canonical_0, {
-				footnotePr,
-				endnotePr
-			})])) refuseCanonicalModelEdit(CANONICAL_GAP.sectionProperties, "Section property changes could not be applied.");
+		const api = getCanonicalApi();
+		if (!api) {
+			refuseCanonicalModelEdit(CANONICAL_GAP.sectionProperties, "The editor is not ready for section changes.");
 			return;
 		}
+		if (api.applyCanonicalSectionProperties({
+			footnotePr,
+			endnotePr
+		}) !== null) return;
 		if (!history.state?.package) return;
 		const newDoc = {
 			...history.state.package.document,
@@ -13928,103 +14133,102 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	}, [
 		history,
 		pushDocument,
-		experimentalSession,
 		getCanonicalApi,
 		refuseCanonicalModelEdit
 	]);
 	const handleTableAction = useCallback((action_0) => {
-		const view_9 = getActiveEditorView();
-		if (!view_9) return;
+		const view_10 = getActiveEditorView();
+		if (!view_10) return;
 		switch (action_0) {
 			case "addRowAbove":
-				addRowAbove(view_9.state, view_9.dispatch);
+				addRowAbove(view_10.state, view_10.dispatch);
 				break;
 			case "addRowBelow":
-				addRowBelow(view_9.state, view_9.dispatch);
+				addRowBelow(view_10.state, view_10.dispatch);
 				break;
 			case "addColumnLeft":
-				addColumnLeft(view_9.state, view_9.dispatch);
+				addColumnLeft(view_10.state, view_10.dispatch);
 				break;
 			case "addColumnRight":
-				addColumnRight(view_9.state, view_9.dispatch);
+				addColumnRight(view_10.state, view_10.dispatch);
 				break;
 			case "deleteRow":
-				deleteRow(view_9.state, view_9.dispatch);
+				deleteRow(view_10.state, view_10.dispatch);
 				break;
 			case "deleteColumn":
-				deleteColumn(view_9.state, view_9.dispatch);
+				deleteColumn(view_10.state, view_10.dispatch);
 				break;
 			case "deleteTable":
-				deleteTable(view_9.state, view_9.dispatch);
+				deleteTable(view_10.state, view_10.dispatch);
 				break;
 			case "selectTable":
-				selectTable(view_9.state, view_9.dispatch);
+				selectTable(view_10.state, view_10.dispatch);
 				break;
 			case "selectRow":
-				selectRow(view_9.state, view_9.dispatch);
+				selectRow(view_10.state, view_10.dispatch);
 				break;
 			case "selectColumn":
-				selectColumn(view_9.state, view_9.dispatch);
+				selectColumn(view_10.state, view_10.dispatch);
 				break;
 			case "mergeCells":
-				mergeCells(view_9.state, view_9.dispatch);
+				mergeCells(view_10.state, view_10.dispatch);
 				break;
 			case "splitCell":
-				splitCell(view_9.state, view_9.dispatch);
+				splitCell(view_10.state, view_10.dispatch);
 				break;
 			case "borderAll":
-				setAllTableBorders(view_9.state, view_9.dispatch, borderSpecRef.current);
+				setAllTableBorders(view_10.state, view_10.dispatch, borderSpecRef.current);
 				break;
 			case "borderOutside":
-				setOutsideTableBorders(view_9.state, view_9.dispatch, borderSpecRef.current);
+				setOutsideTableBorders(view_10.state, view_10.dispatch, borderSpecRef.current);
 				break;
 			case "borderInside":
-				setInsideTableBorders(view_9.state, view_9.dispatch, borderSpecRef.current);
+				setInsideTableBorders(view_10.state, view_10.dispatch, borderSpecRef.current);
 				break;
 			case "borderNone":
-				removeTableBorders(view_9.state, view_9.dispatch);
+				removeTableBorders(view_10.state, view_10.dispatch);
 				break;
 			case "borderTop":
-				setCellBorder("top", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
+				setCellBorder("top", borderSpecRef.current, true)(view_10.state, view_10.dispatch);
 				break;
 			case "borderBottom":
-				setCellBorder("bottom", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
+				setCellBorder("bottom", borderSpecRef.current, true)(view_10.state, view_10.dispatch);
 				break;
 			case "borderLeft":
-				setCellBorder("left", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
+				setCellBorder("left", borderSpecRef.current, true)(view_10.state, view_10.dispatch);
 				break;
 			case "borderRight":
-				setCellBorder("right", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
+				setCellBorder("right", borderSpecRef.current, true)(view_10.state, view_10.dispatch);
 				break;
-			default: if (typeof action_0 === "object") if (action_0.type === "cellFillColor") setCellFillColor(action_0.color)(view_9.state, view_9.dispatch);
+			default: if (typeof action_0 === "object") if (action_0.type === "cellFillColor") setCellFillColor(action_0.color)(view_10.state, view_10.dispatch);
 			else if (action_0.type === "borderColor") {
 				const rgb_0 = action_0.color.replace(/^#/u, "");
 				borderSpecRef.current = {
 					...borderSpecRef.current,
 					color: { rgb: rgb_0 }
 				};
-				setTableBorderColor(action_0.color)(view_9.state, view_9.dispatch);
+				setTableBorderColor(action_0.color)(view_10.state, view_10.dispatch);
 			} else if (action_0.type === "borderWidth") {
 				borderSpecRef.current = {
 					...borderSpecRef.current,
 					size: action_0.size
 				};
-				setTableBorderWidth(action_0.size)(view_9.state, view_9.dispatch);
+				setTableBorderWidth(action_0.size)(view_10.state, view_10.dispatch);
 			} else if (action_0.type === "cellBorder") setCellBorder(action_0.side, {
 				style: action_0.style,
 				size: action_0.size,
 				color: { rgb: action_0.color.replace(/^#/u, "") }
-			})(view_9.state, view_9.dispatch);
-			else if (action_0.type === "cellVerticalAlign") setCellVerticalAlign(action_0.align)(view_9.state, view_9.dispatch);
-			else if (action_0.type === "cellMargins") setCellMargins(action_0.margins)(view_9.state, view_9.dispatch);
-			else if (action_0.type === "cellTextDirection") setCellTextDirection(action_0.direction)(view_9.state, view_9.dispatch);
-			else if (action_0.type === "toggleNoWrap") toggleNoWrap()(view_9.state, view_9.dispatch);
-			else if (action_0.type === "rowHeight") setRowHeight(action_0.height, action_0.rule)(view_9.state, view_9.dispatch);
-			else if (action_0.type === "toggleHeaderRow") toggleHeaderRow()(view_9.state, view_9.dispatch);
-			else if (action_0.type === "distributeColumns") distributeColumns()(view_9.state, view_9.dispatch);
-			else if (action_0.type === "autoFitContents") autoFitContents()(view_9.state, view_9.dispatch);
+			})(view_10.state, view_10.dispatch);
+			else if (action_0.type === "cellVerticalAlign") setCellVerticalAlign(action_0.align)(view_10.state, view_10.dispatch);
+			else if (action_0.type === "cellMargins") setCellMargins(action_0.margins)(view_10.state, view_10.dispatch);
+			else if (action_0.type === "cellTextDirection") setCellTextDirection(action_0.direction)(view_10.state, view_10.dispatch);
+			else if (action_0.type === "toggleNoWrap") toggleNoWrap()(view_10.state, view_10.dispatch);
+			else if (action_0.type === "rowHeight") setRowHeight(action_0.height, action_0.rule)(view_10.state, view_10.dispatch);
+			else if (action_0.type === "toggleHeaderRow") toggleHeaderRow()(view_10.state, view_10.dispatch);
+			else if (action_0.type === "distributeColumns") distributeColumns()(view_10.state, view_10.dispatch);
+			else if (action_0.type === "autoFitContents") autoFitContents()(view_10.state, view_10.dispatch);
 			else if (action_0.type === "openTableProperties") setTablePropsOpen(true);
-			else if (action_0.type === "tableProperties") setTableProperties(action_0.props)(view_9.state, view_9.dispatch);
+			else if (action_0.type === "tableProperties") setTableProperties(action_0.props)(view_10.state, view_10.dispatch);
 			else {
 				let preset = getBuiltinTableStyle(action_0.styleId);
 				const currentDocForTable = historyStateRef.current;
@@ -14095,7 +14299,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					if (preset.tableBorders) styleArg.tableBorders = preset.tableBorders;
 					if (preset.conditionals) styleArg.conditionals = preset.conditionals;
 					if (preset.look) styleArg.look = preset.look;
-					applyTableStyle(styleArg)(view_9.state, view_9.dispatch);
+					applyTableStyle(styleArg)(view_10.state, view_10.dispatch);
 				}
 			}
 			else tableSelection.handleAction(action_0);
@@ -14116,86 +14320,86 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		});
 	}, [openContextMenu]);
 	const handleFormat = useCallback((action_1) => {
-		const view_10 = getActiveEditorView();
-		if (!view_10) return;
-		view_10.focus();
-		const isBodyEditor = view_10 === pagedEditorRef.current?.getView();
-		const { from: from_1, to: to_1 } = view_10.state.selection;
+		const view_11 = getActiveEditorView();
+		if (!view_11) return;
+		view_11.focus();
+		const isBodyEditor = view_11 === pagedEditorRef.current?.getView();
+		const { from: from_1, to: to_1 } = view_11.state.selection;
 		const savedSelection = lastSelectionRef.current;
 		if (isBodyEditor && savedSelection && (from_1 !== savedSelection.from || to_1 !== savedSelection.to)) try {
-			const tr = view_10.state.tr.setSelection(TextSelection.create(view_10.state.doc, savedSelection.from, savedSelection.to));
-			view_10.dispatch(tr);
+			const tr = view_11.state.tr.setSelection(TextSelection.create(view_11.state.doc, savedSelection.from, savedSelection.to));
+			view_11.dispatch(tr);
 		} catch {}
 		if (action_1 === "bold") {
-			executeEditorCommand(view_10, toggleBold);
+			executeEditorCommand(view_11, toggleBold);
 			return;
 		}
 		if (action_1 === "italic") {
-			executeEditorCommand(view_10, toggleItalic);
+			executeEditorCommand(view_11, toggleItalic);
 			return;
 		}
 		if (action_1 === "underline") {
-			executeEditorCommand(view_10, toggleUnderline);
+			executeEditorCommand(view_11, toggleUnderline);
 			return;
 		}
 		if (action_1 === "strikethrough") {
-			executeEditorCommand(view_10, toggleStrike);
+			executeEditorCommand(view_11, toggleStrike);
 			return;
 		}
 		if (action_1 === "superscript") {
-			executeEditorCommand(view_10, toggleSuperscript);
+			executeEditorCommand(view_11, toggleSuperscript);
 			return;
 		}
 		if (action_1 === "subscript") {
-			executeEditorCommand(view_10, toggleSubscript);
+			executeEditorCommand(view_11, toggleSubscript);
 			return;
 		}
 		if (action_1 === "bulletList") {
-			executeEditorCommand(view_10, toggleBulletList);
+			executeEditorCommand(view_11, toggleBulletList);
 			return;
 		}
 		if (action_1 === "numberedList") {
-			executeEditorCommand(view_10, toggleNumberedList);
+			executeEditorCommand(view_11, toggleNumberedList);
 			return;
 		}
 		if (action_1 === "indent") {
-			executeFirstEditorCommand(view_10, [increaseListLevel, increaseIndent()]);
+			executeFirstEditorCommand(view_11, [increaseListLevel, increaseIndent()]);
 			return;
 		}
 		if (action_1 === "outdent") {
-			executeFirstEditorCommand(view_10, [decreaseListLevel, decreaseIndent()]);
+			executeFirstEditorCommand(view_11, [decreaseListLevel, decreaseIndent()]);
 			return;
 		}
 		if (action_1 === "clearFormatting") {
-			executeEditorCommand(view_10, clearFormatting);
+			executeEditorCommand(view_11, clearFormatting);
 			return;
 		}
 		if (action_1 === "setRtl") {
-			executeEditorCommand(view_10, setRtl);
+			executeEditorCommand(view_11, setRtl);
 			return;
 		}
 		if (action_1 === "setLtr") {
-			executeEditorCommand(view_10, setLtr);
+			executeEditorCommand(view_11, setLtr);
 			return;
 		}
 		if (action_1 === "insertPageBreak") {
-			executeEditorCommand(view_10, insertPageBreak);
+			executeEditorCommand(view_11, insertPageBreak);
 			return;
 		}
 		if (typeof action_1 === "object") switch (action_1.type) {
 			case "alignment":
-				executeEditorCommand(view_10, setAlignment(action_1.value));
+				executeEditorCommand(view_11, setAlignment(action_1.value));
 				break;
 			case "toggleDirection":
-				executeEditorCommand(view_10, toggleBidi);
+				executeEditorCommand(view_11, toggleBidi);
 				break;
 			case "textColor": {
 				const colorVal_0 = action_1.value;
-				if (typeof colorVal_0 === "string") executeEditorCommand(view_10, setTextColor({ rgb: colorVal_0.replace("#", "") }));
-				else if (colorVal_0.auto) executeEditorCommand(view_10, clearTextColor);
+				if (typeof colorVal_0 === "string") executeEditorCommand(view_11, setTextColor({ rgb: colorVal_0.replace("#", "") }));
+				else if (colorVal_0.auto) executeEditorCommand(view_11, clearTextColor);
 				else {
 					const themeColor = typeof colorVal_0.themeColor === "string" ? colorVal_0.themeColor : void 0;
-					executeEditorCommand(view_10, setTextColor({
+					executeEditorCommand(view_11, setTextColor({
 						...colorVal_0.rgb === void 0 ? {} : { rgb: colorVal_0.rgb },
 						...themeColor ? { themeColor } : {},
 						...colorVal_0.themeTint === void 0 ? {} : { themeTint: colorVal_0.themeTint },
@@ -14205,16 +14409,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				break;
 			}
 			case "highlightColor":
-				executeEditorCommand(view_10, setHighlight((action_1.value ? mapHexToHighlightName(action_1.value) : "") || action_1.value));
+				executeEditorCommand(view_11, setHighlight((action_1.value ? mapHexToHighlightName(action_1.value) : "") || action_1.value));
 				break;
 			case "fontSize":
-				executeEditorCommand(view_10, setFontSize(pointsToHalfPoints(action_1.value)));
+				executeEditorCommand(view_11, setFontSize(pointsToHalfPoints(action_1.value)));
 				break;
 			case "fontFamily":
-				executeEditorCommand(view_10, setFontFamily(action_1.value));
+				executeEditorCommand(view_11, setFontFamily(action_1.value));
 				break;
 			case "lineSpacing":
-				executeEditorCommand(view_10, setLineSpacing(action_1.value));
+				executeEditorCommand(view_11, setLineSpacing(action_1.value));
 				break;
 			case "applyStyle": {
 				const currentDoc_0 = historyStateRef.current;
@@ -14227,22 +14431,22 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					const styleName = styleResolver_0.getStyle(action_1.value)?.name;
 					if (styleName) styleAttrs.styleName = styleName;
 					styleAttrs.numbering = currentDoc_0?.package.numbering ? getCachedNumberingMap(currentDoc_0.package.numbering) : null;
-					executeEditorCommand(view_10, applyStyle(action_1.value, styleAttrs));
-				} else executeEditorCommand(view_10, applyStyle(action_1.value));
+					executeEditorCommand(view_11, applyStyle(action_1.value, styleAttrs));
+				} else executeEditorCommand(view_11, applyStyle(action_1.value));
 				break;
 			}
 			default: break;
 		}
 	}, [getActiveEditorView, getCachedStyleResolver]);
 	const captureFormatPainter = useCallback(() => {
-		const view_11 = getActiveEditorView();
-		capturedFormatMarksRef.current = view_11 ? captureFormatMarks(view_11.state) : null;
+		const view_12 = getActiveEditorView();
+		capturedFormatMarksRef.current = view_12 ? captureFormatMarks(view_12.state) : null;
 	}, [getActiveEditorView]);
 	const paintFormatToSelection = useCallback(() => {
-		const view_12 = getActiveEditorView();
-		if (!view_12) return false;
-		const applied = applyFormatMarks(capturedFormatMarksRef.current)(view_12.state, view_12.dispatch);
-		if (applied) requestAnimationFrame(() => view_12.focus());
+		const view_13 = getActiveEditorView();
+		if (!view_13) return false;
+		const applied = applyFormatMarks(capturedFormatMarksRef.current)(view_13.state, view_13.dispatch);
+		if (applied) requestAnimationFrame(() => view_13.focus());
 		return applied;
 	}, [getActiveEditorView]);
 	const handleFormatPainter = useCallback((sticky) => {
@@ -14420,12 +14624,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		t
 	]);
 	const handleContextMenuAction = useCallback(async (action_2) => {
-		const view_13 = getActiveEditorView();
-		if (!view_13) return;
+		const view_14 = getActiveEditorView();
+		if (!view_14) return;
 		focusActiveEditor();
 		if (readOnly && action_2 !== "copy" && action_2 !== "selectAll") return;
 		if (action_2.startsWith("custom:")) {
-			const { from: from_2, to: to_2 } = contextMenu.selectionRange.from !== contextMenu.selectionRange.to ? contextMenu.selectionRange : view_13.state.selection;
+			const { from: from_2, to: to_2 } = contextMenu.selectionRange.from !== contextMenu.selectionRange.to ? contextMenu.selectionRange : view_14.state.selection;
 			onCustomContextAction?.(action_2.slice(7), {
 				from: from_2,
 				to: to_2
@@ -14435,16 +14639,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		switch (action_2) {
 			case "cut": {
 				if (readOnly) return;
-				const { from: from_7, to: to_7 } = view_13.state.selection;
-				const text_2 = view_13.state.doc.textBetween(from_7, to_7, "\n");
+				const { from: from_7, to: to_7 } = view_14.state.selection;
+				const text_2 = view_14.state.doc.textBetween(from_7, to_7, "\n");
 				navigator.clipboard.writeText(text_2).catch(() => void 0);
-				if (!deleteSelectionAsSuggestion(view_13.state, view_13.dispatch)) view_13.dispatch(view_13.state.tr.deleteSelection());
+				if (!deleteSelectionAsSuggestion(view_14.state, view_14.dispatch)) view_14.dispatch(view_14.state.tr.deleteSelection());
 				onCut?.();
 				break;
 			}
 			case "copy": {
-				const { from: cf, to: ct } = view_13.state.selection;
-				const copied = view_13.state.doc.textBetween(cf, ct, "\n");
+				const { from: cf, to: ct } = view_14.state.selection;
+				const copied = view_14.state.doc.textBetween(cf, ct, "\n");
 				navigator.clipboard.writeText(copied).catch(() => void 0);
 				onCopy?.();
 				break;
@@ -14467,12 +14671,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 						bubbles: true,
 						cancelable: true
 					});
-					view_13.dom.dispatchEvent(pasteEvent);
+					view_14.dom.dispatchEvent(pasteEvent);
 				} catch {
 					try {
 						const text_0 = await navigator.clipboard.readText();
 						if (text_0) {
-							view_13.dispatch(view_13.state.tr.insertText(text_0));
+							view_14.dispatch(view_14.state.tr.insertText(text_0));
 							onPaste?.();
 						}
 					} catch {}
@@ -14481,9 +14685,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			case "pasteAsPlainText":
 				try {
 					const text = await navigator.clipboard.readText();
-					if (text && !view_13.isDestroyed) {
-						const slice = buildPlainTextSlice(text, view_13.state.schema);
-						view_13.dispatch(view_13.state.tr.replaceSelection(slice).scrollIntoView());
+					if (text && !view_14.isDestroyed) {
+						const slice = buildPlainTextSlice(text, view_14.state.schema);
+						view_14.dispatch(view_14.state.tr.replaceSelection(slice).scrollIntoView());
 						onPaste?.();
 					}
 				} catch {
@@ -14491,49 +14695,51 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				}
 				break;
 			case "delete": {
-				const { from: from_6, to: to_6 } = view_13.state.selection;
-				if (from_6 !== to_6) view_13.dispatch(view_13.state.tr.deleteRange(from_6, to_6));
+				const { from: from_6, to: to_6 } = view_14.state.selection;
+				if (from_6 !== to_6) view_14.dispatch(view_14.state.tr.deleteRange(from_6, to_6));
 				break;
 			}
 			case "selectAll":
-				view_13.dispatch(view_13.state.tr.setSelection(TextSelection.create(view_13.state.doc, 0, view_13.state.doc.content.size)));
+				view_14.dispatch(view_14.state.tr.setSelection(TextSelection.create(view_14.state.doc, 0, view_14.state.doc.content.size)));
 				break;
 			case "addRowAbove":
-				addRowAbove(view_13.state, view_13.dispatch);
+				addRowAbove(view_14.state, view_14.dispatch);
 				break;
 			case "addRowBelow":
-				addRowBelow(view_13.state, view_13.dispatch);
+				addRowBelow(view_14.state, view_14.dispatch);
 				break;
 			case "deleteRow":
-				deleteRow(view_13.state, view_13.dispatch);
+				deleteRow(view_14.state, view_14.dispatch);
 				break;
 			case "addColumnLeft":
-				addColumnLeft(view_13.state, view_13.dispatch);
+				addColumnLeft(view_14.state, view_14.dispatch);
 				break;
 			case "addColumnRight":
-				addColumnRight(view_13.state, view_13.dispatch);
+				addColumnRight(view_14.state, view_14.dispatch);
 				break;
 			case "deleteColumn":
-				deleteColumn(view_13.state, view_13.dispatch);
+				deleteColumn(view_14.state, view_14.dispatch);
 				break;
 			case "tableBordersAll":
-				setTableBorderPreset("all")(view_13.state, view_13.dispatch);
+				setTableBorderPreset("all")(view_14.state, view_14.dispatch);
 				break;
 			case "tableBordersNone":
-				setTableBorderPreset("none")(view_13.state, view_13.dispatch);
+				setTableBorderPreset("none")(view_14.state, view_14.dispatch);
 				break;
 			case "addComment": {
-				const { from: from_5, to: to_5 } = contextMenu.selectionRange.from !== contextMenu.selectionRange.to ? contextMenu.selectionRange : view_13.state.selection;
+				const { from: from_5, to: to_5 } = contextMenu.selectionRange.from !== contextMenu.selectionRange.to ? contextMenu.selectionRange : view_14.state.selection;
 				if (from_5 === to_5) break;
 				const commentY = findSelectionYPosition(scrollContainerRef.current, editorContentRef.current, from_5) ?? getFallbackCommentYPosition(scrollContainerRef.current);
 				setCommentSelectionRange({
 					from: from_5,
 					to: to_5
 				});
-				if (!applyCommentMarkRange(view_13, {
-					from: from_5,
-					to: to_5
-				}, -1, { selectEnd: true })) break;
+				if (commentDraftMode === "prosemirror") {
+					if (!applyCommentMarkRange(view_14, {
+						from: from_5,
+						to: to_5
+					}, -1, { selectEnd: true })) break;
+				}
 				setAddCommentYPosition(commentY);
 				setShowCommentsSidebar(true);
 				setIsAddingComment(true);
@@ -14541,30 +14747,30 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				break;
 			}
 			case "acceptChange": {
-				const { from: from_4, to: to_4 } = view_13.state.selection;
-				const range_1 = findChangeAtPosition(view_13.state, from_4, to_4);
+				const { from: from_4, to: to_4 } = view_14.state.selection;
+				const range_1 = findChangeAtPosition(view_14.state, from_4, to_4);
 				if (resolveCanonicalReviewRange({
 					editor: pagedEditorRef.current?.getEditor(),
 					...range_1,
 					resolution: "accept"
-				}) === null) acceptChange(range_1.from, range_1.to)(view_13.state, view_13.dispatch);
+				}) === null) acceptChange(range_1.from, range_1.to)(view_14.state, view_14.dispatch);
 				break;
 			}
 			case "rejectChange": {
-				const { from: from_3, to: to_3 } = view_13.state.selection;
-				const range_0 = findChangeAtPosition(view_13.state, from_3, to_3);
+				const { from: from_3, to: to_3 } = view_14.state.selection;
+				const range_0 = findChangeAtPosition(view_14.state, from_3, to_3);
 				if (resolveCanonicalReviewRange({
 					editor: pagedEditorRef.current?.getEditor(),
 					...range_0,
 					resolution: "reject"
-				}) === null) rejectChange(range_0.from, range_0.to)(view_13.state, view_13.dispatch);
+				}) === null) rejectChange(range_0.from, range_0.to)(view_14.state, view_14.dispatch);
 				break;
 			}
 			case "restartNumbering":
-				restartNumbering(view_13.state, view_13.dispatch);
+				restartNumbering(view_14.state, view_14.dispatch);
 				break;
 			case "continueNumbering":
-				continueNumbering(view_13.state, view_13.dispatch);
+				continueNumbering(view_14.state, view_14.dispatch);
 				break;
 			case "setNumberingValue":
 				setNumberingValueDialogOpen(true);
@@ -14590,13 +14796,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	]);
 	const handlePageSetupApply = useCallback((props) => {
 		if (readOnly) return;
-		if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting)) {
-			const api_0 = getCanonicalApi();
-			api_0?.ensureView();
-			const canonical_1 = api_0?.getCanonicalDocument();
-			if (!canonical_1 || !api_0?.applyCanonicalOperations([createCanonicalSectionPropertiesOperation(canonical_1, props)])) refuseCanonicalModelEdit(CANONICAL_GAP.sectionProperties, "Section property changes could not be applied.");
+		const api_0 = getCanonicalApi();
+		if (!api_0) {
+			refuseCanonicalModelEdit(CANONICAL_GAP.sectionProperties, "The editor is not ready for section changes.");
 			return;
 		}
+		if (api_0.applyCanonicalSectionProperties(props) !== null) return;
 		if (!history.state || readOnly) return;
 		const newDoc_0 = {
 			...history.state,
@@ -14616,7 +14821,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		history.state,
 		readOnly,
 		handleDocumentChange,
-		experimentalSession,
 		getCanonicalApi,
 		refuseCanonicalModelEdit
 	]);
@@ -14625,25 +14829,25 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	const handleTopMarginChange = useCallback((twips_1) => handlePageSetupApply({ marginTop: twips_1 }), [handlePageSetupApply]);
 	const handleBottomMarginChange = useCallback((twips_2) => handlePageSetupApply({ marginBottom: twips_2 }), [handlePageSetupApply]);
 	const handleIndentLeftChange = useCallback((twips_3) => {
-		const view_14 = getActiveEditorView();
-		if (!view_14) return;
-		setIndentLeft(twips_3)(view_14.state, view_14.dispatch);
-	}, [getActiveEditorView]);
-	const handleIndentRightChange = useCallback((twips_4) => {
 		const view_15 = getActiveEditorView();
 		if (!view_15) return;
-		setIndentRight(twips_4)(view_15.state, view_15.dispatch);
+		setIndentLeft(twips_3)(view_15.state, view_15.dispatch);
 	}, [getActiveEditorView]);
-	const handleFirstLineIndentChange = useCallback((twips_5) => {
+	const handleIndentRightChange = useCallback((twips_4) => {
 		const view_16 = getActiveEditorView();
 		if (!view_16) return;
-		if (twips_5 < 0) setIndentFirstLine(-twips_5, true)(view_16.state, view_16.dispatch);
-		else setIndentFirstLine(twips_5, false)(view_16.state, view_16.dispatch);
+		setIndentRight(twips_4)(view_16.state, view_16.dispatch);
 	}, [getActiveEditorView]);
-	const handleTabStopRemove = useCallback((positionTwips) => {
+	const handleFirstLineIndentChange = useCallback((twips_5) => {
 		const view_17 = getActiveEditorView();
 		if (!view_17) return;
-		removeTabStop(positionTwips)(view_17.state, view_17.dispatch);
+		if (twips_5 < 0) setIndentFirstLine(-twips_5, true)(view_17.state, view_17.dispatch);
+		else setIndentFirstLine(twips_5, false)(view_17.state, view_17.dispatch);
+	}, [getActiveEditorView]);
+	const handleTabStopRemove = useCallback((positionTwips) => {
+		const view_18 = getActiveEditorView();
+		if (!view_18) return;
+		removeTabStop(positionTwips)(view_18.state, view_18.dispatch);
 	}, [getActiveEditorView]);
 	const serializeCurrentDocx = useCallback(async (options) => {
 		let tripwireResult = null;
@@ -14652,25 +14856,25 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			const editor_1 = pagedEditorRef.current?.getEditor();
 			const snapshot = editor_1?.captureCanonicalSave();
 			if (snapshot && editor_1) {
-				const view_18 = editor_1.getView();
-				const editorState = view_18?.state;
-				const result = await serializeCanonicalSave({
+				const view_19 = editor_1.getView();
+				const editorState = view_19?.state;
+				const result_2 = await serializeCanonicalSave({
 					snapshot,
 					options,
 					featureFlags
 				});
-				for (const diagnostic of result.diagnostics) if (!options?.onDiagnostic) onError?.(new CanonicalSaveDiagnosticError({
+				for (const diagnostic of result_2.diagnostics) if (!options?.onDiagnostic) onError?.(new CanonicalSaveDiagnosticError({
 					gap: CANONICAL_GAP.save,
 					diagnostic,
 					message: `Canonical save used a fidelity fallback: ${diagnostic.type} (${diagnostic.part}).`
 				}));
-				tripwireResult = result.tripwireResult;
-				if (view_18 && pagedEditorRef.current?.getEditor() === editor_1 && editor_1.getView() === view_18 && view_18.state.doc === editorState?.doc && editor_1.isCanonicalSaveCurrent(snapshot.version)) view_18.dispatch(clearTrackedChanges(view_18.state));
-				savedBuffer = result.buffer;
+				tripwireResult = result_2.tripwireResult;
+				if (view_19 && pagedEditorRef.current?.getEditor() === editor_1 && editor_1.getView() === view_19 && view_19.state.doc === editorState?.doc && editor_1.isCanonicalSaveCurrent(snapshot.version)) view_19.dispatch(clearTrackedChanges(view_19.state));
+				savedBuffer = result_2.buffer;
 			} else {
 				if (usesCanonicalSession(experimentalSession, CANONICAL_GAP.save)) return null;
-				const view_19 = pagedEditorRef.current?.getView();
-				const editorState_0 = view_19?.state;
+				const view_20 = pagedEditorRef.current?.getView();
+				const editorState_0 = view_20?.state;
 				const baselineBuffer = originalBufferRef.current;
 				const current = buildCurrentDocument();
 				const doc_1 = current ? withoutUnreferencedNotes(current) : null;
@@ -14711,14 +14915,14 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					const { compareSelectiveVsFull } = await import("@stll/folio-core/docx/selectiveSaveTripwire");
 					tripwireResult = await compareSelectiveVsFull(selectiveBuffer, fullBuffer);
 				} catch {}
-				if (view_19 && pagedEditorRef.current?.getView() === view_19 && view_19.state.doc === editorState_0?.doc) {
+				if (view_20 && pagedEditorRef.current?.getView() === view_20 && view_20.state.doc === editorState_0?.doc) {
 					originalBufferRef.current = buffer;
-					view_19.dispatch(clearTrackedChanges(view_19.state));
+					view_20.dispatch(clearTrackedChanges(view_20.state));
 				}
 				savedBuffer = buffer;
 			}
-		} catch (error_1) {
-			onError?.(error_1 instanceof Error ? error_1 : /* @__PURE__ */ new Error("Failed to save document"));
+		} catch (error_0) {
+			onError?.(error_0 instanceof Error ? error_0 : /* @__PURE__ */ new Error("Failed to save document"));
 			return null;
 		}
 		if (tripwireResult && onSelectiveSaveTripwire) onSelectiveSaveTripwire(tripwireResult);
@@ -14753,16 +14957,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		loadParsedDocument,
 		serializeCurrentDocx
 	]);
-	const handleEditorError = useCallback((error_2) => {
-		if (CanonicalSessionRefusalError.is(error_2)) toast(error_2.message);
-		onError?.(error_2);
+	const handleEditorError = useCallback((error_1) => {
+		if (CanonicalSessionRefusalError.is(error_1)) toast(error_1.message);
+		onError?.(error_1);
 	}, [onError]);
 	useImperativeHandle(ref, () => ({
 		getDocument: () => buildCurrentDocument(),
 		hasPendingChanges: () => {
-			const view_20 = pagedEditorRef.current?.getView();
-			if (!view_20) return false;
-			return commentsDirtyRef.current || getChangedParagraphIds(view_20.state).size > 0 || hasStructuralChanges(view_20.state) || hasUntrackedChanges(view_20.state);
+			const view_21 = pagedEditorRef.current?.getView();
+			if (!view_21) return false;
+			return commentsDirtyRef.current || getChangedParagraphIds(view_21.state).size > 0 || hasStructuralChanges(view_21.state) || hasUntrackedChanges(view_21.state);
 		},
 		getEditorRef: () => pagedEditorRef.current,
 		getEditor: () => pagedEditorRef.current?.getEditor() ?? null,
@@ -14803,13 +15007,13 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			pagedEditorRef.current?.ensureView(options_2);
 		},
 		createAIEditSnapshot: () => {
-			const view_21 = pagedEditorRef.current?.getView();
-			return view_21 ? createFolioAIEditSnapshot(view_21.state.doc) : null;
+			const view_22 = pagedEditorRef.current?.getView();
+			return view_22 ? createFolioAIEditSnapshot(view_22.state.doc) : null;
 		},
 		applyDocumentOperations: ({ snapshot: snapshot_0, batch, author: operationAuthor = author }) => {
 			assertSupportedFolioDocumentOperationVersion(batch.version);
-			const view_22 = pagedEditorRef.current?.getView();
-			if (!view_22) {
+			const view_23 = pagedEditorRef.current?.getView();
+			if (!view_23) {
 				let status = "committed";
 				if (batch.dryRun === true) status = "previewed";
 				else if (batch.atomic === true) status = "rejected";
@@ -14827,25 +15031,25 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					undoHandle: null
 				};
 			}
-			const canonical_2 = getCanonicalApi()?.applyCanonicalDocumentOperations({
+			const canonical_1 = getCanonicalApi()?.applyCanonicalDocumentOperations({
 				snapshot: snapshot_0,
 				batch,
 				author: operationAuthor
 			});
-			if (canonical_2) return canonical_2;
+			if (canonical_1) return canonical_1;
 			const existingUndoEntry = documentOperationUndoEntriesRef.current.at(-1);
-			if (existingUndoEntry && (!view_22.state.doc.eq(existingUndoEntry.afterState.doc) || commentsRef.current !== existingUndoEntry.commentsAfter)) documentOperationUndoEntriesRef.current.length = 0;
+			if (existingUndoEntry && (!view_23.state.doc.eq(existingUndoEntry.afterState.doc) || commentsRef.current !== existingUndoEntry.commentsAfter)) documentOperationUndoEntriesRef.current.length = 0;
 			const commentsBefore = commentsRef.current;
 			const createdComments = [];
 			const operationView = {
-				state: view_22.state,
+				state: view_23.state,
 				dispatch: (transaction) => {
-					view_22.dispatch(closeHistory(transaction));
-					operationView.state = view_22.state;
+					view_23.dispatch(closeHistory(transaction));
+					operationView.state = view_23.state;
 				}
 			};
-			const activeSuggestionIds = new Set(getSuggestions(view_22.state).map((s_0) => s_0.suggestionId));
-			const result_0 = applyFolioDocumentOperations({
+			const activeSuggestionIds = new Set(getSuggestions(view_23.state).map((s_0) => s_0.suggestionId));
+			const result_3 = applyFolioDocumentOperations({
 				view: operationView,
 				snapshot: snapshot_0,
 				batch,
@@ -14860,27 +15064,27 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					id: `react-${String(documentOperationUndoHandleCursor++)}`
 				})
 			});
-			if (batch.mode === "suggested" && result_0.status === "committed") pendingSuggestionRegistryRef.current.recordApplied({
+			if (batch.mode === "suggested" && result_3.status === "committed") pendingSuggestionRegistryRef.current.recordApplied({
 				snapshot: snapshot_0,
 				story: { type: "main" },
 				operations: batch.operations,
-				applied: result_0.applied,
+				applied: result_3.applied,
 				author: operationAuthor,
 				activeSuggestionIds
 			});
-			const batchComments = appliedOperationComments(createdComments, result_0.applied);
+			const batchComments = appliedOperationComments(createdComments, result_3.applied);
 			if (batchComments.length > 0) updateComments((currentComments_0) => [...currentComments_0, ...batchComments]);
-			if (result_0.undoHandle !== null) documentOperationUndoEntriesRef.current.push({
-				undoHandle: result_0.undoHandle,
-				afterState: view_22.state,
+			if (result_3.undoHandle !== null) documentOperationUndoEntriesRef.current.push({
+				undoHandle: result_3.undoHandle,
+				afterState: view_23.state,
 				commentsBefore,
 				commentsAfter: commentsRef.current
 			});
-			return result_0;
+			return result_3;
 		},
 		undoDocumentOperations: (undoHandle) => {
-			const canonical_3 = getCanonicalApi()?.undoCanonicalDocumentOperations(undoHandle);
-			if (canonical_3) return canonical_3;
+			const canonical_2 = getCanonicalApi()?.undoCanonicalDocumentOperations(undoHandle);
+			if (canonical_2) return canonical_2;
 			const entries = documentOperationUndoEntriesRef.current;
 			const entryIndex = entries.findIndex((entry_2) => entry_2.undoHandle.type === undoHandle.type && entry_2.undoHandle.id === undoHandle.id);
 			if (entryIndex === -1) return {
@@ -14894,18 +15098,18 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				reason: "notLatest"
 			};
 			const entry_3 = entries.at(-1);
-			const view_23 = pagedEditorRef.current?.getView();
-			if (!entry_3 || !view_23) return {
+			const view_24 = pagedEditorRef.current?.getView();
+			if (!entry_3 || !view_24) return {
 				status: "rejected",
 				undoHandle,
 				reason: "unknownHandle"
 			};
-			if (!view_23.state.doc.eq(entry_3.afterState.doc) || commentsRef.current !== entry_3.commentsAfter) return {
+			if (!view_24.state.doc.eq(entry_3.afterState.doc) || commentsRef.current !== entry_3.commentsAfter) return {
 				status: "rejected",
 				undoHandle,
 				reason: "documentChanged"
 			};
-			if (!undo(view_23.state, view_23.dispatch)) return {
+			if (!undo(view_24.state, view_24.dispatch)) return {
 				status: "rejected",
 				undoHandle,
 				reason: "documentChanged"
@@ -14919,15 +15123,15 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			};
 		},
 		applyAIEditOperations: ({ snapshot: snapshot_1, operations, mode = "tracked-changes", author: operationAuthor_0 = author }) => {
-			const view_24 = pagedEditorRef.current?.getView();
-			if (!view_24) return {
+			const view_25 = pagedEditorRef.current?.getView();
+			if (!view_25) return {
 				applied: [],
 				skipped: operations.map((operation_0) => ({
 					id: operation_0.id,
 					reason: "unsupportedBlock"
 				}))
 			};
-			const canonical_4 = getCanonicalApi()?.applyCanonicalDocumentOperations({
+			const canonical_3 = getCanonicalApi()?.applyCanonicalDocumentOperations({
 				snapshot: snapshot_1,
 				batch: {
 					version: FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION,
@@ -14936,11 +15140,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				},
 				author: operationAuthor_0
 			});
-			if (canonical_4) return canonical_4;
+			if (canonical_3) return canonical_3;
 			const createdComments_0 = [];
-			const activeSuggestionIds_0 = new Set(getSuggestions(view_24.state).map((s_1) => s_1.suggestionId));
+			const activeSuggestionIds_0 = new Set(getSuggestions(view_25.state).map((s_1) => s_1.suggestionId));
 			const { applied: applied_0, skipped: skipped_0 } = applyFolioDocumentOperations({
-				view: view_24,
+				view: view_25,
 				snapshot: snapshot_1,
 				batch: {
 					version: FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION,
@@ -14970,18 +15174,18 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			};
 		},
 		acceptAIEditOperation: (revisionId) => {
-			const view_25 = pagedEditorRef.current?.getView();
-			if (!view_25) return false;
+			const view_26 = pagedEditorRef.current?.getView();
+			if (!view_26) return false;
 			const editor_4 = pagedEditorRef.current?.getEditor();
 			if (editor_4?.getCanonicalDocument()) return editor_4.resolveCanonicalRevisions(typeof revisionId === "number" ? [revisionId] : revisionId, "accept");
-			return acceptAIEditRevision(revisionId)(view_25.state, view_25.dispatch);
+			return acceptAIEditRevision(revisionId)(view_26.state, view_26.dispatch);
 		},
 		rejectAIEditOperation: (revisionId_0) => {
-			const view_26 = pagedEditorRef.current?.getView();
-			if (!view_26) return false;
+			const view_27 = pagedEditorRef.current?.getView();
+			if (!view_27) return false;
 			const editor_5 = pagedEditorRef.current?.getEditor();
 			if (editor_5?.getCanonicalDocument()) return editor_5.resolveCanonicalRevisions(typeof revisionId_0 === "number" ? [revisionId_0] : revisionId_0, "reject");
-			return rejectAIEditRevision(revisionId_0)(view_26.state, view_26.dispatch);
+			return rejectAIEditRevision(revisionId_0)(view_27.state, view_27.dispatch);
 		},
 		undo: () => {
 			if (!usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting) && getActiveEditorStory().type === "headerFooter" && hfEditorRef.current) return hfEditorRef.current.undo();
@@ -14996,44 +15200,44 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			return redone;
 		},
 		scrollToAIEditOperation: (revisionId_1) => {
-			const view_27 = pagedEditorRef.current?.getView();
-			if (!view_27) return false;
-			const range_2 = findAIEditRevisionRange(view_27.state, revisionId_1);
+			const view_28 = pagedEditorRef.current?.getView();
+			if (!view_28) return false;
+			const range_2 = findAIEditRevisionRange(view_28.state, revisionId_1);
 			if (!range_2) return false;
-			const { from: from_8, to: to_8 } = clampRangeToDocSize(view_27.state.doc.content.size, range_2);
-			const $from = view_27.state.doc.resolve(from_8);
-			const $to = view_27.state.doc.resolve(to_8);
-			view_27.dispatch(view_27.state.tr.setSelection(TextSelection.between($from, $to)));
+			const { from: from_8, to: to_8 } = clampRangeToDocSize(view_28.state.doc.content.size, range_2);
+			const $from = view_28.state.doc.resolve(from_8);
+			const $to = view_28.state.doc.resolve(to_8);
+			view_28.dispatch(view_28.state.tr.setSelection(TextSelection.between($from, $to)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_8);
 			});
 			return true;
 		},
 		scrollToBlock: (blockId, snapshot_2) => {
-			const view_28 = pagedEditorRef.current?.getView();
-			if (!view_28) return false;
+			const view_29 = pagedEditorRef.current?.getView();
+			if (!view_29) return false;
 			const range_3 = resolveFolioAIBlockRange({
 				blockId,
-				doc: view_28.state.doc,
+				doc: view_29.state.doc,
 				snapshot: snapshot_2
 			});
 			if (range_3 === null) return false;
 			const { from: from_9, to: to_9 } = range_3;
-			const $from_0 = view_28.state.doc.resolve(from_9);
-			const $to_0 = view_28.state.doc.resolve(to_9);
-			view_28.dispatch(view_28.state.tr.setSelection(TextSelection.between($from_0, $to_0)));
+			const $from_0 = view_29.state.doc.resolve(from_9);
+			const $to_0 = view_29.state.doc.resolve(to_9);
+			view_29.dispatch(view_29.state.tr.setSelection(TextSelection.between($from_0, $to_0)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_9);
 			});
 			return true;
 		},
 		highlightPassage: ({ blockId: blockId_0, text: text_5, snapshot: snapshot_3 }) => {
-			const view_29 = pagedEditorRef.current?.getView();
-			if (!view_29) return "none";
+			const view_30 = pagedEditorRef.current?.getView();
+			if (!view_30) return "none";
 			const passageRange = resolvePassageRange({
 				blockId: blockId_0,
 				text: text_5,
-				doc: view_29.state.doc,
+				doc: view_30.state.doc,
 				snapshot: snapshot_3
 			});
 			if (passageRange !== null) {
@@ -15046,16 +15250,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			pagedEditorRef.current?.setPassageHighlight(null);
 			const blockRange = resolveFolioAIBlockRange({
 				blockId: blockId_0,
-				doc: view_29.state.doc,
+				doc: view_30.state.doc,
 				snapshot: snapshot_3
 			});
 			if (blockRange === null) return "none";
 			const paraId_0 = getFolioParaIdFromBlockId(blockId_0);
 			if (paraId_0 !== null && pagedEditorRef.current?.scrollToParaId(paraId_0, { highlight: {} })) return "block";
 			const { from: from_10, to: to_10 } = blockRange;
-			const $from_1 = view_29.state.doc.resolve(from_10);
-			const $to_1 = view_29.state.doc.resolve(to_10);
-			view_29.dispatch(view_29.state.tr.setSelection(TextSelection.between($from_1, $to_1)));
+			const $from_1 = view_30.state.doc.resolve(from_10);
+			const $to_1 = view_30.state.doc.resolve(to_10);
+			view_30.dispatch(view_30.state.tr.setSelection(TextSelection.between($from_1, $to_1)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_10);
 			});
@@ -15065,56 +15269,56 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			pagedEditorRef.current?.setPassageHighlight(null);
 		},
 		showInDocument: (target_1, snapshot_4) => {
-			const view_30 = pagedEditorRef.current?.getView();
-			if (!view_30) return false;
+			const view_31 = pagedEditorRef.current?.getView();
+			if (!view_31) return false;
 			const range_4 = target_1.type === "textRange" ? resolveFolioAITextRange({
 				range: target_1,
-				doc: view_30.state.doc,
+				doc: view_31.state.doc,
 				snapshot: snapshot_4
 			}) : resolveFolioAIBlockRange({
 				blockId: target_1.blockId,
-				doc: view_30.state.doc,
+				doc: view_31.state.doc,
 				snapshot: snapshot_4
 			});
 			if (range_4 === null) return false;
 			const { from: from_11, to: to_11 } = range_4;
-			const $from_2 = view_30.state.doc.resolve(from_11);
-			const $to_2 = view_30.state.doc.resolve(to_11);
-			view_30.dispatch(view_30.state.tr.setSelection(TextSelection.between($from_2, $to_2)));
+			const $from_2 = view_31.state.doc.resolve(from_11);
+			const $to_2 = view_31.state.doc.resolve(to_11);
+			view_31.dispatch(view_31.state.tr.setSelection(TextSelection.between($from_2, $to_2)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_11);
 			});
 			return true;
 		},
 		getSuggestions: () => {
-			const view_31 = pagedEditorRef.current?.getView();
-			return view_31 ? getSuggestions(view_31.state) : [];
+			const view_32 = pagedEditorRef.current?.getView();
+			return view_32 ? getSuggestions(view_32.state) : [];
 		},
 		exportPendingSuggestions: () => {
-			const view_32 = pagedEditorRef.current?.getView();
-			const activeIds = new Set(view_32 ? getSuggestions(view_32.state).map((s_2) => s_2.suggestionId) : []);
+			const view_33 = pagedEditorRef.current?.getView();
+			const activeIds = new Set(view_33 ? getSuggestions(view_33.state).map((s_2) => s_2.suggestionId) : []);
 			return pendingSuggestionRegistryRef.current.exportPendingSuggestions({
 				activeSuggestionIds: activeIds,
-				snapshotForStory: (story_0, commentIds) => story_0.type === "main" && view_32 ? createPendingSuggestionSourceSnapshot(view_32.state, commentIds) : null
+				snapshotForStory: (story_0, commentIds) => story_0.type === "main" && view_33 ? createPendingSuggestionSourceSnapshot(view_33.state, commentIds) : null
 			});
 		},
 		loadPendingSuggestions: (records) => pendingSuggestionRegistryRef.current.loadPendingSuggestions({
 			records,
 			snapshotForStory: (story_1) => {
-				const view_33 = pagedEditorRef.current?.getView();
-				return story_1.type === "main" && view_33 ? createFolioAIEditSnapshot(view_33.state.doc) : null;
+				const view_34 = pagedEditorRef.current?.getView();
+				return story_1.type === "main" && view_34 ? createFolioAIEditSnapshot(view_34.state.doc) : null;
 			},
 			sourceSnapshotForStory: (story_2, commentIds_0) => {
-				const view_34 = pagedEditorRef.current?.getView();
-				return story_2.type === "main" && view_34 ? createPendingSuggestionSourceSnapshot(view_34.state, commentIds_0) : null;
+				const view_35 = pagedEditorRef.current?.getView();
+				return story_2.type === "main" && view_35 ? createPendingSuggestionSourceSnapshot(view_35.state, commentIds_0) : null;
 			},
 			apply: (record, snapshot_5) => {
-				const view_35 = pagedEditorRef.current?.getView();
-				if (!view_35) return {
+				const view_36 = pagedEditorRef.current?.getView();
+				if (!view_36) return {
 					applied: [],
 					skipped: []
 				};
-				const canonical_5 = getCanonicalApi()?.applyCanonicalDocumentOperations({
+				const canonical_4 = getCanonicalApi()?.applyCanonicalDocumentOperations({
 					snapshot: snapshot_5,
 					batch: {
 						version: FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION,
@@ -15123,10 +15327,10 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					},
 					author: record.author
 				});
-				if (canonical_5) return canonical_5;
+				if (canonical_4) return canonical_4;
 				const createdComments_1 = [];
-				const result_1 = applyFolioDocumentOperations({
-					view: view_35,
+				const result_4 = applyFolioDocumentOperations({
+					view: view_36,
 					snapshot: snapshot_5,
 					batch: {
 						version: FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION,
@@ -15140,77 +15344,77 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 						return comment_1.id;
 					}
 				});
-				const appliedComments = appliedOperationComments(createdComments_1, result_1.applied);
+				const appliedComments = appliedOperationComments(createdComments_1, result_4.applied);
 				if (appliedComments.length > 0) updateComments((currentComments_2) => [...currentComments_2, ...appliedComments]);
 				return {
-					applied: result_1.applied,
-					skipped: result_1.skipped
+					applied: result_4.applied,
+					skipped: result_4.skipped
 				};
 			},
 			activeSuggestionIds: () => {
-				const view_36 = pagedEditorRef.current?.getView();
-				return new Set(view_36 ? getSuggestions(view_36.state).map((s_3) => s_3.suggestionId) : []);
+				const view_37 = pagedEditorRef.current?.getView();
+				return new Set(view_37 ? getSuggestions(view_37.state).map((s_3) => s_3.suggestionId) : []);
 			}
 		}),
 		acceptSuggestion: (suggestionId, options_3) => {
-			const view_37 = pagedEditorRef.current?.getView();
-			if (!view_37) return {
+			const view_38 = pagedEditorRef.current?.getView();
+			if (!view_38) return {
 				accepted: false,
 				appliedAs: null
 			};
-			const appliedAs = getSuggestions(view_37.state).find((s_4) => s_4.suggestionId === suggestionId)?.appliedAs ?? null;
-			const accepted = acceptSuggestion(suggestionId, { author: options_3?.author ?? author })(view_37.state, view_37.dispatch);
+			const appliedAs = getSuggestions(view_38.state).find((s_4) => s_4.suggestionId === suggestionId)?.appliedAs ?? null;
+			const accepted = acceptSuggestion(suggestionId, { author: options_3?.author ?? author })(view_38.state, view_38.dispatch);
 			return {
 				accepted,
 				appliedAs: accepted ? appliedAs : null
 			};
 		},
 		rejectSuggestion: (suggestionId_0) => {
-			const view_38 = pagedEditorRef.current?.getView();
-			if (!view_38) return false;
-			return rejectSuggestion(suggestionId_0)(view_38.state, view_38.dispatch);
-		},
-		scrollToSuggestion: (suggestionId_1) => {
 			const view_39 = pagedEditorRef.current?.getView();
 			if (!view_39) return false;
-			const range_5 = findSuggestionRange(view_39.state, suggestionId_1);
+			return rejectSuggestion(suggestionId_0)(view_39.state, view_39.dispatch);
+		},
+		scrollToSuggestion: (suggestionId_1) => {
+			const view_40 = pagedEditorRef.current?.getView();
+			if (!view_40) return false;
+			const range_5 = findSuggestionRange(view_40.state, suggestionId_1);
 			if (!range_5) return false;
-			const { from: from_12, to: to_12 } = clampRangeToDocSize(view_39.state.doc.content.size, range_5);
-			const $from_3 = view_39.state.doc.resolve(from_12);
-			const $to_3 = view_39.state.doc.resolve(to_12);
-			view_39.dispatch(view_39.state.tr.setSelection(TextSelection.between($from_3, $to_3)));
+			const { from: from_12, to: to_12 } = clampRangeToDocSize(view_40.state.doc.content.size, range_5);
+			const $from_3 = view_40.state.doc.resolve(from_12);
+			const $to_3 = view_40.state.doc.resolve(to_12);
+			view_40.dispatch(view_40.state.tr.setSelection(TextSelection.between($from_3, $to_3)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_12);
 			});
 			return true;
 		},
 		getTrackedChanges: () => {
-			const view_40 = pagedEditorRef.current?.getView();
-			return view_40 ? getTrackedChangesFromDoc(view_40.state.doc) : [];
-		},
-		getCommentAnchors: () => {
 			const view_41 = pagedEditorRef.current?.getView();
-			return view_41 ? getCommentAnchorsFromDoc(view_41.state.doc) : [];
+			return view_41 ? getTrackedChangesFromDoc(view_41.state.doc) : [];
 		},
-		getSelectionText: () => {
+		getCommentAnchors: () => {
 			const view_42 = pagedEditorRef.current?.getView();
-			return view_42 ? getSelectedText(view_42.state) : "";
+			return view_42 ? getCommentAnchorsFromDoc(view_42.state.doc) : [];
 		},
-		getPageText: (page_1) => {
+		getSelectionText: () => {
 			const view_43 = pagedEditorRef.current?.getView();
-			if (!view_43) return null;
-			return getPageTextFromLayout(pagedEditorRef.current?.getEditor()?.getLayout() ?? null, view_43.state.doc, page_1);
+			return view_43 ? getSelectedText(view_43.state) : "";
 		},
-		getTargetPage: (target_2, snapshot_6) => {
+		getPageText: (page_1) => {
 			const view_44 = pagedEditorRef.current?.getView();
 			if (!view_44) return null;
+			return getPageTextFromLayout(pagedEditorRef.current?.getEditor()?.getLayout() ?? null, view_44.state.doc, page_1);
+		},
+		getTargetPage: (target_2, snapshot_6) => {
+			const view_45 = pagedEditorRef.current?.getView();
+			if (!view_45) return null;
 			const range_6 = target_2.type === "textRange" ? resolveFolioAITextRange({
 				range: target_2,
-				doc: view_44.state.doc,
+				doc: view_45.state.doc,
 				snapshot: snapshot_6
 			}) : resolveFolioAIBlockRange({
 				blockId: target_2.blockId,
-				doc: view_44.state.doc,
+				doc: view_45.state.doc,
 				snapshot: snapshot_6
 			});
 			if (range_6 === null) return null;
@@ -15221,49 +15425,49 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		getScrollRoot: () => pagedEditorRef.current?.getScrollRoot() ?? null,
 		onLayoutChange: (listener) => pagedEditorRef.current?.onLayoutChange(listener) ?? (() => {}),
 		getContentControls: (filter = {}) => {
-			const view_45 = pagedEditorRef.current?.getView();
-			if (!view_45) return [];
-			return findBlockSdtMatches(view_45.state.doc, filter).map((match_0) => ({
+			const view_46 = pagedEditorRef.current?.getView();
+			if (!view_46) return [];
+			return findBlockSdtMatches(view_46.state.doc, filter).map((match_0) => ({
 				properties: blockSdtAttrsToSdtProperties(match_0.node),
 				path: match_0.path,
 				pmPos: match_0.pos
 			}));
 		},
 		scrollToContentControl: (filter_0) => {
-			const view_46 = pagedEditorRef.current?.getView();
-			if (!view_46) return false;
-			const match_1 = findBlockSdtMatch(view_46.state.doc, filter_0);
+			const view_47 = pagedEditorRef.current?.getView();
+			if (!view_47) return false;
+			const match_1 = findBlockSdtMatch(view_47.state.doc, filter_0);
 			if (!match_1) return false;
 			const inside = match_1.pos + 1;
-			const $pos = view_46.state.doc.resolve(inside);
-			view_46.dispatch(view_46.state.tr.setSelection(TextSelection.near($pos)));
+			const $pos = view_47.state.doc.resolve(inside);
+			view_47.dispatch(view_47.state.tr.setSelection(TextSelection.near($pos)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(inside);
 			});
 			return true;
 		},
 		setContentControlContent: (filter_1, input, options_4 = {}) => {
-			const view_47 = pagedEditorRef.current?.getView();
-			if (!view_47) return false;
-			const tr_0 = typeof input === "string" ? setContentControlContentTr(view_47.state, filter_1, input, options_4) : setContentControlContentBlocksTr(view_47.state, filter_1, input, options_4);
+			const view_48 = pagedEditorRef.current?.getView();
+			if (!view_48) return false;
+			const tr_0 = typeof input === "string" ? setContentControlContentTr(view_48.state, filter_1, input, options_4) : setContentControlContentBlocksTr(view_48.state, filter_1, input, options_4);
 			if (!tr_0) return false;
-			view_47.dispatch(tr_0);
+			view_48.dispatch(tr_0);
 			return true;
 		},
 		setContentControlValue: (filter_2, input_0, options_5 = {}) => {
-			const view_48 = pagedEditorRef.current?.getView();
-			if (!view_48) return false;
-			const tr_1 = setContentControlValueTr(view_48.state, filter_2, input_0, options_5);
+			const view_49 = pagedEditorRef.current?.getView();
+			if (!view_49) return false;
+			const tr_1 = setContentControlValueTr(view_49.state, filter_2, input_0, options_5);
 			if (!tr_1) return false;
-			view_48.dispatch(tr_1);
+			view_49.dispatch(tr_1);
 			return true;
 		},
 		removeContentControl: (filter_3, options_6 = {}) => {
-			const view_49 = pagedEditorRef.current?.getView();
-			if (!view_49) return false;
-			const tr_2 = removeContentControlTr(view_49.state, filter_3, options_6);
+			const view_50 = pagedEditorRef.current?.getView();
+			if (!view_50) return false;
+			const tr_2 = removeContentControlTr(view_50.state, filter_3, options_6);
 			if (!tr_2) return false;
-			view_49.dispatch(tr_2);
+			view_50.dispatch(tr_2);
 			return true;
 		}
 	}), [
@@ -15353,47 +15557,47 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		if (isDisplayMode(value)) setDisplayMode(value);
 	}, [setDisplayMode]);
 	const handleAcceptActiveChange = useCallback(() => {
-		const view_50 = pagedEditorRef.current?.getView();
-		if (!view_50) return;
-		const { from: from_13, to: to_13 } = view_50.state.selection;
-		const range_7 = findChangeAtPosition(view_50.state, from_13, to_13);
+		const view_51 = pagedEditorRef.current?.getView();
+		if (!view_51) return;
+		const { from: from_13, to: to_13 } = view_51.state.selection;
+		const range_7 = findChangeAtPosition(view_51.state, from_13, to_13);
 		if (resolveCanonicalReviewRange({
 			editor: pagedEditorRef.current?.getEditor(),
 			...range_7,
 			resolution: "accept"
-		}) === null) acceptChange(range_7.from, range_7.to)(view_50.state, view_50.dispatch);
+		}) === null) acceptChange(range_7.from, range_7.to)(view_51.state, view_51.dispatch);
 	}, []);
 	const handleRejectActiveChange = useCallback(() => {
-		const view_51 = pagedEditorRef.current?.getView();
-		if (!view_51) return;
-		const { from: from_14, to: to_14 } = view_51.state.selection;
-		const range_8 = findChangeAtPosition(view_51.state, from_14, to_14);
+		const view_52 = pagedEditorRef.current?.getView();
+		if (!view_52) return;
+		const { from: from_14, to: to_14 } = view_52.state.selection;
+		const range_8 = findChangeAtPosition(view_52.state, from_14, to_14);
 		if (resolveCanonicalReviewRange({
 			editor: pagedEditorRef.current?.getEditor(),
 			...range_8,
 			resolution: "reject"
-		}) === null) rejectChange(range_8.from, range_8.to)(view_51.state, view_51.dispatch);
+		}) === null) rejectChange(range_8.from, range_8.to)(view_52.state, view_52.dispatch);
 	}, []);
 	const handlePreviousChange = useCallback(() => {
-		const view_52 = pagedEditorRef.current?.getView();
-		if (!view_52) return;
-		const { from: from_15 } = view_52.state.selection;
-		const change = findPreviousChange(view_52.state, from_15);
+		const view_53 = pagedEditorRef.current?.getView();
+		if (!view_53) return;
+		const { from: from_15 } = view_53.state.selection;
+		const change = findPreviousChange(view_53.state, from_15);
 		if (!change) return;
-		view_52.dispatch(view_52.state.tr.setSelection(TextSelection.create(view_52.state.doc, change.from, change.to)));
-		view_52.focus();
+		view_53.dispatch(view_53.state.tr.setSelection(TextSelection.create(view_53.state.doc, change.from, change.to)));
+		view_53.focus();
 		requestAnimationFrame(() => {
 			pagedEditorRef.current?.scrollToPosition(change.from);
 		});
 	}, []);
 	const handleNextChange = useCallback(() => {
-		const view_53 = pagedEditorRef.current?.getView();
-		if (!view_53) return;
-		const { to: to_15 } = view_53.state.selection;
-		const change_0 = findNextChange(view_53.state, to_15);
+		const view_54 = pagedEditorRef.current?.getView();
+		if (!view_54) return;
+		const { to: to_15 } = view_54.state.selection;
+		const change_0 = findNextChange(view_54.state, to_15);
 		if (!change_0) return;
-		view_53.dispatch(view_53.state.tr.setSelection(TextSelection.create(view_53.state.doc, change_0.from, change_0.to)));
-		view_53.focus();
+		view_54.dispatch(view_54.state.tr.setSelection(TextSelection.create(view_54.state.doc, change_0.from, change_0.to)));
+		view_54.focus();
 		requestAnimationFrame(() => {
 			pagedEditorRef.current?.scrollToPosition(change_0.from);
 		});
@@ -15563,51 +15767,94 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		requestAnimationFrame(syncCommentHighlightStyles);
 	}, [onScrollTopChange, syncCommentHighlightStyles]);
 	const handlePagedSelectionChange = useCallback((_from, _to) => {
-		const view_54 = getActiveEditorView() ?? pagedEditorRef.current?.getView() ?? null;
-		handleSelectionChange(view_54 ? extractSelectionState(view_54.state) : null);
+		const view_55 = getActiveEditorView() ?? pagedEditorRef.current?.getView() ?? null;
+		handleSelectionChange(view_55 ? extractSelectionState(view_55.state) : null);
 	}, [getActiveEditorView, handleSelectionChange]);
 	const handleTotalPagesChange = useCallback((totalPages) => {
 		setScrollPageInfo((previous) => updateScrollPageTotal(previous, totalPages));
 	}, [setScrollPageInfo]);
 	const handleCommentClick = useCallback((id) => setActiveCommentId(id), [setActiveCommentId]);
 	const handleCommentResolve = useCallback((id_0) => {
-		if (refuseCanonicalModelEdit(CANONICAL_GAP.comments, "Comment changes are unavailable in this session.")) return;
+		if (applyCanonicalComment({
+			type: "resolve",
+			id: id_0,
+			status: "resolved"
+		}) !== null) return;
 		updateComments((previous_0) => previous_0.map((comment_2) => comment_2.id === id_0 ? {
 			...comment_2,
 			done: true
 		} : comment_2));
-	}, [refuseCanonicalModelEdit, updateComments]);
+	}, [applyCanonicalComment, updateComments]);
 	const handleCommentDelete = useCallback((id_1) => {
-		if (refuseCanonicalModelEdit(CANONICAL_GAP.comments, "Comment changes are unavailable in this session.")) return;
+		const result_5 = applyCanonicalComment({
+			type: "delete",
+			id: id_1
+		});
+		if (result_5 !== null) {
+			if (result_5.status === "applied" && activeCommentId === id_1) setActiveCommentId(null);
+			return;
+		}
 		updateComments((previous_1) => previous_1.filter((comment_3) => comment_3.id !== id_1 && comment_3.parentId !== id_1));
 		if (activeCommentId === id_1) setActiveCommentId(null);
 	}, [
 		activeCommentId,
-		refuseCanonicalModelEdit,
+		applyCanonicalComment,
 		setActiveCommentId,
 		updateComments
 	]);
 	const handleCommentReply = useCallback((id_2, text_6) => {
-		if (refuseCanonicalModelEdit(CANONICAL_GAP.comments, "Comment changes are unavailable in this session.")) return;
+		if (applyCanonicalComment({
+			type: "create",
+			text: text_6,
+			author,
+			anchor: {
+				kind: "reply",
+				parentId: id_2
+			}
+		}) !== null) return;
 		updateComments((previous_2) => [...previous_2, createComment(text_6, author, id_2)]);
 	}, [
+		applyCanonicalComment,
 		author,
 		createComment,
-		refuseCanonicalModelEdit,
 		updateComments
 	]);
 	const handleAddComment = useCallback((addText) => {
-		if (refuseCanonicalModelEdit(CANONICAL_GAP.comments, "Comment changes are unavailable in this session.")) return false;
+		const view_56 = pagedEditorRef.current?.getView();
+		if (!view_56 || !commentSelectionRange) return false;
+		const result_6 = applyCanonicalComment({
+			type: "create",
+			text: addText,
+			author,
+			anchor: {
+				kind: "selection",
+				...commentSelectionRange,
+				story: "main"
+			}
+		});
+		if (result_6 !== null) {
+			if (result_6?.status !== "applied") return false;
+			setVisibleCommentAuthors((current_0) => {
+				if (current_0 === null) return null;
+				const next_1 = new Set(current_0);
+				const created = result_6.comments.find(({ id: id_3 }) => id_3 === result_6.commentId);
+				if (created) next_1.add(getCommentAuthorKey(created.author));
+				return next_1;
+			});
+			if (result_6.commentId !== void 0) setActiveCommentId(result_6.commentId);
+			setIsAddingComment(false);
+			setCommentSelectionRange(null);
+			setAddCommentYPosition(null);
+			return true;
+		}
 		const comment_4 = createComment(addText, author);
-		const view_55 = pagedEditorRef.current?.getView();
-		if (!view_55 || !commentSelectionRange) return false;
-		if (!applyCommentMarkRange(view_55, commentSelectionRange, comment_4.id, { replacePending: true })) return false;
+		if (!applyCommentMarkRange(view_56, commentSelectionRange, comment_4.id, { replacePending: true })) return false;
 		const commentAuthor_2 = getCommentAuthorKey(comment_4.author);
-		setVisibleCommentAuthors((current_0) => {
-			if (current_0 === null) return null;
-			const next_1 = new Set(current_0);
-			next_1.add(commentAuthor_2);
-			return next_1;
+		setVisibleCommentAuthors((current_1) => {
+			if (current_1 === null) return null;
+			const next_2 = new Set(current_1);
+			next_2.add(commentAuthor_2);
+			return next_2;
 		});
 		setActiveCommentId(comment_4.id);
 		updateComments((previous_3) => [...previous_3, comment_4]);
@@ -15622,9 +15869,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		return true;
 	}, [
 		author,
+		applyCanonicalComment,
 		commentSelectionRange,
 		createComment,
-		refuseCanonicalModelEdit,
 		setActiveCommentId,
 		setAddCommentYPosition,
 		setCommentSelectionRange,
@@ -15634,22 +15881,32 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		updateComments
 	]);
 	const handleTrackedChangeReply = useCallback((revisionId_2, text_7) => {
-		if (refuseCanonicalModelEdit(CANONICAL_GAP.comments, "Comment changes are unavailable in this session.")) return;
+		if (applyCanonicalComment({
+			type: "create",
+			text: text_7,
+			author,
+			anchor: {
+				kind: "revision",
+				story: "main",
+				revisionId: revisionId_2
+			}
+		}) !== null) return;
 		updateComments((previous_4) => [...previous_4, createComment(text_7, author, revisionId_2)]);
 	}, [
+		applyCanonicalComment,
 		author,
 		createComment,
-		refuseCanonicalModelEdit,
 		updateComments
 	]);
 	const handleCancelAddComment = useCallback(() => {
-		const view_56 = pagedEditorRef.current?.getView();
-		if (view_56 && commentSelectionRange) removePendingCommentMarkRange(view_56, commentSelectionRange);
+		const view_57 = pagedEditorRef.current?.getView();
+		if (view_57 && commentSelectionRange && commentDraftMode === "prosemirror") removePendingCommentMarkRange(view_57, commentSelectionRange);
 		setIsAddingComment(false);
 		setCommentSelectionRange(null);
 		setAddCommentYPosition(null);
 	}, [
 		commentSelectionRange,
+		commentDraftMode,
 		setAddCommentYPosition,
 		setCommentSelectionRange,
 		setIsAddingComment
@@ -15660,23 +15917,23 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		})?.revisionId ?? null;
 	}, []);
 	const handleSidebarAcceptChange = useCallback((from_17, to_17) => {
-		const view_57 = pagedEditorRef.current?.getView();
-		if (!view_57) return;
+		const view_58 = pagedEditorRef.current?.getView();
+		if (!view_58) return;
 		const revisionId_3 = resolveSidebarChangeRevisionId(from_17, to_17);
 		if (revisionId_3 === null) return;
 		const editor_6 = pagedEditorRef.current?.getEditor();
 		if (editor_6?.getCanonicalDocument()) editor_6.resolveCanonicalRevisions([revisionId_3], "accept");
-		else acceptAIEditRevision(revisionId_3)(view_57.state, view_57.dispatch);
+		else acceptAIEditRevision(revisionId_3)(view_58.state, view_58.dispatch);
 		extractTrackedChanges();
 	}, [extractTrackedChanges, resolveSidebarChangeRevisionId]);
 	const handleSidebarRejectChange = useCallback((from_18, to_18) => {
-		const view_58 = pagedEditorRef.current?.getView();
-		if (!view_58) return;
+		const view_59 = pagedEditorRef.current?.getView();
+		if (!view_59) return;
 		const revisionId_4 = resolveSidebarChangeRevisionId(from_18, to_18);
 		if (revisionId_4 === null) return;
 		const editor_7 = pagedEditorRef.current?.getEditor();
 		if (editor_7?.getCanonicalDocument()) editor_7.resolveCanonicalRevisions([revisionId_4], "reject");
-		else rejectAIEditRevision(revisionId_4)(view_58.state, view_58.dispatch);
+		else rejectAIEditRevision(revisionId_4)(view_59.state, view_59.dispatch);
 		extractTrackedChanges();
 	}, [extractTrackedChanges, resolveSidebarChangeRevisionId]);
 	const commentsPageWidth = history.state?.package.document.finalSectionProperties?.pageWidth;
@@ -15724,7 +15981,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	]);
 	const openCommentThreadCount = useMemo(() => countOpenCommentThreads(comments), [comments]);
 	const outlineToggle = (() => {
-		if (panels.layout.outline !== "drawer") return "absent";
+		if (panels.layout.outline !== "drawer" && panels.layout.outline !== "expanded") return "absent";
 		return panelOverlay === "outline" ? "open" : "closed";
 	})();
 	const panelToggles = useMemo(() => /* @__PURE__ */ jsx(PanelToggles, {
@@ -15804,9 +16061,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		};
 		requestAnimationFrame(flash);
 	}, []);
-	const handleOutlineJump = useCallback((id_3) => {
-		markHeadingJumped(id_3);
-		handleOutlineHeadingClick(Number(id_3));
+	const handleOutlineJump = useCallback((id_4) => {
+		markHeadingJumped(id_4);
+		handleOutlineHeadingClick(Number(id_4));
 	}, [handleOutlineHeadingClick, markHeadingJumped]);
 	const handleTextContextAction = useCallback((action_3) => {
 		handleContextMenuAction(action_3);
@@ -15819,8 +16076,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	}, [readOnly]);
 	const closeTableProperties = useCallback(() => setTablePropsOpen(false), []);
 	const applyTableProperties = useCallback((props_0) => {
-		const view_59 = getActiveEditorView();
-		if (view_59) setTableProperties(props_0)(view_59.state, view_59.dispatch);
+		const view_60 = getActiveEditorView();
+		if (view_60) setTableProperties(props_0)(view_60.state, view_60.dispatch);
 	}, [getActiveEditorView]);
 	const closeImagePosition = useCallback(() => setImagePositionOpen(false), [setImagePositionOpen]);
 	const closeImageProperties = useCallback(() => setImagePropsOpen(false), [setImagePropsOpen]);
@@ -15828,8 +16085,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	const closeFootnoteProperties = useCallback(() => setFootnotePropsOpen(false), []);
 	const closeInsertSymbol = useCallback(() => setShowInsertSymbol(false), []);
 	const insertSymbol = useCallback((symbol) => {
-		const view_60 = getActiveEditorView();
-		if (view_60) view_60.dispatch(view_60.state.tr.insertText(symbol).scrollIntoView());
+		const view_61 = getActiveEditorView();
+		if (view_61) view_61.dispatch(view_61.state.tr.insertText(symbol).scrollIntoView());
 	}, [getActiveEditorView]);
 	const imagePropertiesCurrentData = useMemo(() => buildImagePropertiesData(state.pmImageContext), [state.pmImageContext]);
 	const currentFindResult = findResultRef.current;
@@ -15912,8 +16169,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	]);
 	const closeNumberingValueDialog = useCallback(() => setNumberingValueDialogOpen(false), []);
 	const applyNumberingValue = useCallback((value_0) => {
-		const view_61 = getActiveEditorView();
-		if (view_61) setNumberingValue(value_0)(view_61.state, view_61.dispatch);
+		const view_62 = getActiveEditorView();
+		if (view_62) setNumberingValue(value_0)(view_62.state, view_62.dispatch);
 	}, [getActiveEditorView]);
 	const numberingValueDialog = useMemo(() => ({
 		isOpen: numberingValueDialogOpen,
@@ -16060,15 +16317,20 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 									"data-folio-outline": panels.layout.outline,
 									"data-folio-comments": panels.layout.comments,
 									children: [
-										(panels.layout.outline === "column" || panels.layout.outline === "rail") && /* @__PURE__ */ jsx(DocumentOutline, {
-											headings: outlineHeadings,
+										panels.layout.outline !== "none" && panels.layout.outline !== "drawer" && /* @__PURE__ */ jsx(DocumentOutline, {
+											headings: visibleOutlineHeadings,
+											available: outlineHeadings.length > 1,
+											outlineDepth,
+											onOutlineDepthChange: handleOutlineDepthChange,
 											scrollContainerRef,
 											docSize: pagedEditorRef.current?.getView()?.state.doc.content.size ?? 0,
 											activeId: activeHeadingId,
 											onJump: handleOutlineJump,
 											surface: panels.layout.outline,
+											width: panels.layout.outlineTrackWidth,
 											expanded: panelOverlay === "outline",
-											onExpand: toggleOutlineOverlay
+											onExpand: toggleOutlineOverlay,
+											...panels.layout.outline === "expanded" ? { onClose: closePanelOverlay } : {}
 										}),
 										/* @__PURE__ */ jsxs("div", {
 											ref: scrollContainerRef,
@@ -16212,8 +16474,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 																onMouseDown: (e_1) => {
 																	e_1.preventDefault();
 																	e_1.stopPropagation();
-																	const view_62 = pagedEditorRef.current?.getView();
-																	if (!view_62) {
+																	const view_63 = pagedEditorRef.current?.getView();
+																	if (!view_63) {
 																		setFloatingCommentBtn(null);
 																		return;
 																	}
@@ -16221,9 +16483,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 																		from: floatingCommentBtn.from,
 																		to: floatingCommentBtn.to
 																	};
-																	const currentSelection = view_62.state.selection;
+																	const currentSelection = view_63.state.selection;
 																	const safeRange = resolveCommentCreationRange({
-																		docSize: view_62.state.doc.content.size,
+																		docSize: view_63.state.doc.content.size,
 																		capturedRange,
 																		currentRange: {
 																			from: currentSelection.from,
@@ -16237,10 +16499,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 																		return;
 																	}
 																	setCommentSelectionRange(safeRange);
-																	if (!applyCommentMarkRange(view_62, safeRange, -1, { selectEnd: true })) {
-																		setCommentSelectionRange(null);
-																		setFloatingCommentBtn(null);
-																		return;
+																	if (commentDraftMode === "prosemirror") {
+																		if (!applyCommentMarkRange(view_63, safeRange, -1, { selectEnd: true })) {
+																			setCommentSelectionRange(null);
+																			setFloatingCommentBtn(null);
+																			return;
+																		}
 																	}
 																	const yPos_0 = findSelectionYPosition(scrollContainerRef.current, editorContentRef.current, safeRange.from);
 																	setAddCommentYPosition(yPos_0 ?? floatingCommentBtn.top);
@@ -16310,15 +16574,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 												})
 											})]
 										}),
-										panelOverlay === "outline" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PanelScrim, { onDismiss: closePanelOverlay }), /* @__PURE__ */ jsx(DocumentOutline, {
-											headings: outlineHeadings,
-											scrollContainerRef,
-											docSize: pagedEditorRef.current?.getView()?.state.doc.content.size ?? 0,
-											activeId: activeHeadingId,
-											onJump: handleOutlineJump,
-											surface: "drawer",
-											onClose: closePanelOverlay
-										})] }),
 										commentsSurface === "drawer" && /* @__PURE__ */ jsx(PanelScrim, { onDismiss: dismissCommentsDrawer })
 									]
 								}),