@stll/folio-react 0.23.0 → 0.24.0

package/dist/{renderAsync-CTnJ1YYt.js → renderAsync-CYQL2X5T.js}

@@ -1,12 +1,12 @@
-import { i as cn, n as FolioUIProvider, r as useFolioUI, t as DEFAULT_COMPONENTS } from "./folio-ui-BgDDRsUX.js";
+import { i as cn, n as FolioUIProvider, r as useFolioUI, t as DEFAULT_COMPONENTS } from "./folio-ui-DO95voaI.js";
 import { t as messages_exports } from "./messages.js";
 import { c } from "react-compiler-runtime";
 import * as React$1 from "react";
 import React, { Component, Suspense, cloneElement, createContext, forwardRef, isValidElement, lazy, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { AlertCircleIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, BaselineIcon, BoldIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardCopyIcon, EyeIcon, FileIcon, GlobeIcon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfoIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, MoreHorizontalIcon, OmegaIcon, PaintbrushIcon, PenLineIcon, PencilIcon, PilcrowIcon, Redo2Icon, RulerIcon, SeparatorHorizontalIcon, SquarePenIcon, StickyNoteIcon, TableIcon, TableOfContentsIcon, TypeIcon, UnderlineIcon, Undo2Icon, UnlinkIcon, XIcon } from "lucide-react";
+import { AlertCircleIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, BaselineIcon, BoldIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardCopyIcon, EyeIcon, FileIcon, GlobeIcon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfoIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, ListTreeIcon, MessageSquareTextIcon, MoreHorizontalIcon, OmegaIcon, PaintbrushIcon, PanelLeftOpenIcon, PenLineIcon, PencilIcon, PilcrowIcon, Redo2Icon, RulerIcon, SeparatorHorizontalIcon, SquarePenIcon, StickyNoteIcon, TableIcon, TableOfContentsIcon, TypeIcon, UnderlineIcon, Undo2Icon, UnlinkIcon, XIcon } from "lucide-react";
 import { closeHistory, redo, undo } from "prosemirror-history";
-import { IntlProvider, useTranslations } from "use-intl";
-import { FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION, applyFolioDocumentOperations, assertSupportedFolioDocumentOperationVersion, createFolioAIEditSnapshot, getCommentAnchorsFromDoc, getFolioDocumentOperationIssues, getTrackedChangesFromDoc } from "@stll/folio-core/ai-edits";
+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 { resolveActiveEditorStory } from "@stll/folio-core/controller/activeEditorStory";
 import { FOLIO_DOCX_SERIALIZATION_MODE, createFolioEditor } from "@stll/folio-core/controller/folioEditor";
 import { cloneDocumentWithParagraphPropertySources } from "@stll/folio-core/docx/document-clone";
@@ -14,14 +14,14 @@ import { normalizeBaseDirection } from "@stll/folio-core/docx/normalizeBaseDirec
 import { getCachedNumberingMap } from "@stll/folio-core/docx/numberingParser";
 import { classifyEditorKeydown, deleteSelectedTable, historyShortcutOwner, isFocusInInputLike, isKeydownInShortcutScope, isMacPlatform } from "@stll/folio-core/managers/editorShortcuts";
 import { computeScrollPageInfo, updateScrollPageTotal } from "@stll/folio-core/paged-layout/scrollPageInfo";
-import { NO_LIST_STATE, TextSelection, addColumnLeft, addColumnRight, addRowAbove, addRowBelow, applyFormatMarks, applyStyle, applyTableStyle, autoFitContents, captureFormatMarks, clearFormatting, clearTextColor, createStyleResolver, decreaseIndent, decreaseListLevel, deleteColumn, deleteRow, deleteTable, distributeColumns, extractSelectionState, getDocumentBuiltInStyles, getSelectedText, getTableContext, increaseIndent, increaseListLevel, listStateLevel, mergeCells, removeTabStop, removeTableBorders, sameListState, schema, selectColumn, selectRow, selectTable, setAlignment, setAllTableBorders, setCellBorder, setCellFillColor, setCellMargins, setCellTextDirection, setCellVerticalAlign, setFontFamily, setFontSize, setHighlight, setIndentFirstLine, setIndentLeft, setIndentRight, setInsideTableBorders, setLineSpacing, setLtr, setOutsideTableBorders, setRowHeight, setRtl, setTableBorderColor, setTableBorderPreset, setTableBorderWidth, setTableProperties, setTextColor, splitCell, toggleBidi, toggleBold, toggleBulletList, toggleHeaderRow, toggleItalic, toggleNoWrap, toggleNumberedList, toggleStrike, toggleSubscript, toggleSuperscript, toggleUnderline } from "@stll/folio-core/prosemirror";
+import { NO_LIST_STATE, TextSelection, addColumnLeft, addColumnRight, addRowAbove, addRowBelow, applyFormatMarks, applyStyle, applyTableStyle, autoFitContents, captureFormatMarks, clearFormatting, clearTextColor, continueNumbering, createStyleResolver, decreaseIndent, decreaseListLevel, deleteColumn, deleteRow, deleteTable, distributeColumns, extractSelectionState, getDocumentBuiltInStyles, getSelectedText, getTableContext, increaseIndent, increaseListLevel, listStateLevel, mergeCells, removeTabStop, removeTableBorders, restartNumbering, sameListState, schema, selectColumn, selectRow, selectTable, setAlignment, setAllTableBorders, setCellBorder, setCellFillColor, setCellMargins, setCellTextDirection, setCellVerticalAlign, setFontFamily, setFontSize, setHighlight, setIndentFirstLine, setIndentLeft, setIndentRight, setInsideTableBorders, setLineSpacing, setLtr, setNumberingValue, setOutsideTableBorders, setRowHeight, setRtl, setTableBorderColor, setTableBorderPreset, setTableBorderWidth, setTableProperties, setTextColor, splitCell, toggleBidi, toggleBold, toggleBulletList, toggleHeaderRow, toggleItalic, toggleNoWrap, toggleNumberedList, toggleStrike, toggleSubscript, toggleSuperscript, toggleUnderline } from "@stll/folio-core/prosemirror";
 import { acceptAIEditRevision, acceptChange, acceptSuggestion, findAIEditRevisionRange, findChangeAtPosition, findNextChange, findParagraphBoundaryChangeAtPosition, findPreviousChange, findSuggestionRange, getSuggestions, rejectAIEditRevision, rejectChange, rejectSuggestion } from "@stll/folio-core/prosemirror/commands/comments";
 import { blockSdtAttrsToSdtProperties, findBlockSdtMatch, findBlockSdtMatches, removeContentControlTr, setContentControlContentTr, setContentControlValueTr } from "@stll/folio-core/prosemirror/commands/contentControls";
 import { setContentControlContentBlocksTr } from "@stll/folio-core/prosemirror/commands/contentControlsBlockFill";
 import { CLIPBOARD_READ_ERROR_EVENT, buildPlainTextSlice } from "@stll/folio-core/prosemirror/commands/pastePlainText";
 import { proseDocToBlocks } from "@stll/folio-core/prosemirror/conversion/fromProseDoc";
 import { ExtensionManager } from "@stll/folio-core/prosemirror/extensions/ExtensionManager";
-import { clearTrackedChanges, getChangedParagraphIds, hasStructuralChanges, hasUntrackedChanges } from "@stll/folio-core/prosemirror/extensions/features/ParagraphChangeTrackerExtension";
+import { clearTrackedChanges, getChangedParagraphIds, hasStructuralChanges, hasUntrackedChanges, repackWithEditorSectionRemovals } from "@stll/folio-core/prosemirror/extensions/features/ParagraphChangeTrackerExtension";
 import { createStarterKit } from "@stll/folio-core/prosemirror/extensions/StarterKit";
 import { resolveFindMatchRange } from "@stll/folio-core/prosemirror/findReplaceSelection";
 import { createAICitationDecorationsPlugin } from "@stll/folio-core/prosemirror/plugins/aiCitationDecorations";
@@ -29,7 +29,7 @@ import { AI_SUGGESTION_SEVERITY_CLASS, aiSuggestionDecorationsKey, createAISugge
 import { anonymizationDecorationsKey, createAnonymizationDecorationsPlugin, slugAnonymizationLabel } from "@stll/folio-core/prosemirror/plugins/anonymizationDecorations";
 import { expectImageAttrs, expectTableAttrs, expectTableCellAttrs, mergeTableAttrs, mergeTableCellAttrs, mergeTableRowAttrs } from "@stll/folio-core/prosemirror/attrs";
 import { autocompleteSuggestionKey, autocompleteSuggestionPlugin } from "@stll/folio-core/prosemirror/plugins/autocompleteSuggestion";
-import { createSuggestionModePlugin, setSuggestionMode, suggestionModeKey } from "@stll/folio-core/prosemirror/plugins/suggestionMode";
+import { createSuggestionModePlugin, deleteSelectionAsSuggestion, setSuggestionMode, suggestionModeKey } from "@stll/folio-core/prosemirror/plugins/suggestionMode";
 import { createTemplateDirectivesPlugin, templateDirectivesKey } from "@stll/folio-core/prosemirror/plugins/templateDirectives";
 import { createTemplatePreviewValuesPlugin, templatePreviewValuesKey } from "@stll/folio-core/prosemirror/plugins/templatePreviewValues";
 import { getTemplateSlashMenu, templateSlashMenuPlugin } from "@stll/folio-core/prosemirror/plugins/templateSlashMenu";
@@ -40,21 +40,23 @@ import { collectHeadings } from "@stll/folio-core/utils/headingCollector";
 import { formatPx, pixelsToTwips, pointsToHalfPoints, twipsToPixels } from "@stll/folio-core/utils/units";
 import { HistoryManager, classifyHistoryShortcut } from "@stll/folio-core/managers/HistoryManager";
 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 { createPortal } from "react-dom";
 import { NodeSelection, Selection, TextSelection as TextSelection$1 } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 import { createHeaderFooterEditorManager } from "@stll/folio-core/controller/headerFooterEditorManager";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createNoteEditorManager } from "@stll/folio-core/controller/noteEditorManager";
+import { projectMarkupView, visibleCaretPosition } from "@stll/folio-core/prosemirror/markupViewProjection";
 import { createFolioAIEditSnapshot as createFolioAIEditSnapshot$1 } from "@stll/folio-core/ai-edits/snapshot";
 import { createFolioEditorEmitter } from "@stll/folio-core/controller/folioEditorEvents";
 import { dispatchEditorTextInput } from "@stll/folio-core/prosemirror/textInput";
 import { createLatestRequestGate } from "@stll/folio-core/controller/latestRequestGate";
 import { runLayoutPipeline } from "@stll/folio-core/controller/layoutPipeline";
-import { browserClock, createLayoutScheduler } from "@stll/folio-core/controller/layoutScheduler";
+import { TRANSACTION_LAYOUT_TIMING, browserClock, createLayoutScheduler } from "@stll/folio-core/controller/layoutScheduler";
 import { createLayoutSession } from "@stll/folio-core/controller/layoutSession";
 import { createHyphenationReadiness } from "@stll/folio-core/controller/hyphenationReadiness";
-import { documentFontsAreLoaded, getDocumentFontSet, waitForInitialLayoutFonts } from "@stll/folio-core/controller/fontReadiness";
+import { readFontSetSignature, waitForInitialLayoutFonts, watchLayoutFontLoads } from "@stll/folio-core/controller/fontReadiness";
 import { getFootnoteText } from "@stll/folio-core/docx/footnoteParser";
 import { convertHeaderFooterPmDocToContent, convertHeaderFooterToContent } from "@stll/folio-core/layout-bridge/convert/headerFooterLayout";
 import { templatePreviewDirtyRange } from "@stll/folio-core/layout-bridge/convert/templatePreviewFlow";
@@ -80,10 +82,8 @@ import { isReadOnlyEditKey } from "@stll/folio-core/paged-layout/readOnlyEditAtt
 import { getPageScrollTarget, prefersReducedMotionBehavior } from "@stll/folio-core/paged-layout/scrollNavigation";
 import { PAGES_CONTAINER_CLASS, scrollPagesToPmPosition } from "@stll/folio-core/paged-layout/scrollToPmPosition";
 import { flashParagraphFragmentsByParaId } from "@stll/folio-core/paged-layout/paragraphFlash";
-import { DEFAULT_PAGE_HEIGHT_PX, getMargins, getPageSize, twipsToPixels as twipsToPixels$1 } from "@stll/folio-core/paged-layout/sectionGeometry";
 import { resizeColumnPair } from "@stll/folio-core/paged-layout/tableColumnResize";
 import { tableInsertButtonOffset } from "@stll/folio-core/paged-layout/tableInsertButtonGeometry";
-import { getTransactionsDirtyRange } from "@stll/folio-core/paged-layout/transactionDirtyRange";
 import { findStartPosForParaId } from "@stll/folio-core/prosemirror/utils/findParagraphByParaId";
 import { allowsDirectDrawingEdit } from "@stll/folio-core/docx/imageRawXml";
 import { commitImageFloatMove, commitImageInlineMove, commitImageResize, isFloatingImage } from "@stll/folio-core/prosemirror/imageCommit";
@@ -97,6 +97,7 @@ import { getFolioParaIdFromBlockId } from "@stll/folio-core/types/block-id";
 import { getPageTextFromLayout } from "@stll/folio-core/paged-layout/pageText";
 import { ContentControlWidgetController } from "@stll/folio-core/controller/contentControlWidgetController";
 import { createDefaultFindOptions, findInDocument } from "@stll/folio-core/utils/findReplace";
+import { PANEL_METRICS, computePanelLayout } from "@stll/folio-core/panel-layout";
 import { ErrorManager } from "@stll/folio-core/managers/ErrorManager";
 import { ContextMenuManager } from "@stll/folio-core/managers/ContextMenuManager";
 import { DocumentLoaderManager } from "@stll/folio-core/managers/DocumentLoaderManager";
@@ -212,7 +213,7 @@ function useDocumentHistory(document, t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const options = t1;
-	const isEqual = _temp$12;
+	const isEqual = _temp$14;
 	let t2;
 	if ($[2] !== options) {
 		t2 = {
@@ -224,7 +225,7 @@ function useDocumentHistory(document, t0) {
 	} else t2 = $[3];
 	return useHistory(document, t2);
 }
-function _temp$12(a, b) {
+function _temp$14(a, b) {
 	if (a === b) return true;
 	const aPackage = a?.package;
 	const bPackage = b?.package;
@@ -745,7 +746,7 @@ const AISuggestionRectsOverlay = (t0) => {
 	if (groups.length === 0) return null;
 	let t1;
 	if ($[0] !== groups) {
-		t1 = groups.map(_temp$11);
+		t1 = groups.map(_temp$13);
 		$[0] = groups;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -761,7 +762,7 @@ const AISuggestionRectsOverlay = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-function _temp$11(t0) {
+function _temp$13(t0) {
 	const { suggestion, rects, focused, font } = t0;
 	const replacementAnchor = rects.at(-1);
 	const showReplacement = focused && suggestion.suggestedText.length > 0 && replacementAnchor !== void 0;
@@ -996,7 +997,7 @@ const PassageHighlightOverlay = (t0) => {
 	if (rects.length === 0) return null;
 	let t1;
 	if ($[0] !== rects) {
-		t1 = rects.map(_temp$10);
+		t1 = rects.map(_temp$12);
 		$[0] = rects;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -1012,7 +1013,7 @@ const PassageHighlightOverlay = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-function _temp$10(rect, idx) {
+function _temp$12(rect, idx) {
 	return /* @__PURE__ */ jsx("span", {
 		className: "folio-passage-highlight",
 		style: {
@@ -1039,7 +1040,7 @@ const EMPTY_LOADED_EMBEDDED_FONTS = {
 	faces: [],
 	familyMap: /* @__PURE__ */ new Map()
 };
-function getDocumentFontSet$1() {
+function getDocumentFontSet() {
 	if (typeof document === "undefined" || !("fonts" in document)) return null;
 	return document.fonts;
 }
@@ -1070,7 +1071,7 @@ async function registerFontFace(fontSet, family, source, descriptors) {
 * run falls back to the CSS font stack.
 */
 async function loadEmbeddedFontFaces(buffer) {
-	const fontSet = getDocumentFontSet$1();
+	const fontSet = getDocumentFontSet();
 	if (!fontSet) return EMPTY_LOADED_EMBEDDED_FONTS;
 	let fonts;
 	try {
@@ -1094,7 +1095,7 @@ async function loadEmbeddedFontFaces(buffer) {
 }
 /** Remove previously registered faces from the document font set. */
 function removeFontFaces(faces) {
-	const fontSet = getDocumentFontSet$1();
+	const fontSet = getDocumentFontSet();
 	if (!fontSet) return;
 	for (const face of faces) fontSet.delete(face);
 }
@@ -1153,7 +1154,7 @@ function toFontFaceInputs(fonts) {
 * thrown. Pair with {@link removeFontFaces} to unregister on change/unmount.
 */
 async function loadHostFontFaces(fonts) {
-	const fontSet = getDocumentFontSet$1();
+	const fontSet = getDocumentFontSet();
 	if (!fontSet) return [];
 	const inputs = toFontFaceInputs(fonts);
 	if (inputs.length === 0) return [];
@@ -2277,10 +2278,6 @@ const TABLE_INSERT_EDGE_PROXIMITY = 30;
 const TABLE_INSERT_HIDE_DELAY = 200;
 /** Delay before converting PM state back to the Folio document model. */
 const DOCUMENT_CHANGE_NOTIFY_DELAY = 250;
-/** Quiet window for coalescing follow-up transactions after the leading frame. */
-const TRANSACTION_LAYOUT_DEBOUNCE_MS = 32;
-/** Upper bound for how long visible layout can trail the hidden editor. */
-const TRANSACTION_LAYOUT_MAX_DELAY_MS = 96;
 /** Keep the visual caret hidden briefly while typed content relayouts. */
 const SELECTION_REVEAL_AFTER_INPUT_DELAY = 120;
 /**
@@ -2473,7 +2470,7 @@ function HfCaretOverlay(t0) {
 	if (!pagesContainer) return null;
 	let t4;
 	if ($[17] !== rangeRects) {
-		t4 = rangeRects.map(_temp$9);
+		t4 = rangeRects.map(_temp$11);
 		$[17] = rangeRects;
 		$[18] = t4;
 	} else t4 = $[18];
@@ -2512,7 +2509,7 @@ function HfCaretOverlay(t0) {
 	} else t7 = $[26];
 	return t7;
 }
-function _temp$9(r, i) {
+function _temp$11(r, i) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "hf-selection-rect",
 		style: {
@@ -2566,7 +2563,6 @@ function stableJsonStringify(value) {
 		return nestedValue;
 	});
 }
-const INITIAL_FONT_READY_SUPPRESSION_MS = 250;
 function describeInvalidHighlightMarks(doc) {
 	const invalidHighlights = [];
 	const validHighlightColors = /* @__PURE__ */ new Set([
@@ -2842,7 +2838,7 @@ function buildFootnoteRenderItems(pageFootnoteMap, footnoteContentMap, doc) {
 * PagedEditor - Main paginated editing component.
 */
 const PagedEditor = forwardRef(function PagedEditor(props, ref) {
-	const { document, documentIO, documentIdentity, fonts: hostFonts, styles, theme: _theme, sectionProperties, headerContent, footerContent, firstPageHeaderContent, firstPageFooterContent, headerContentRId, footerContentRId, firstPageHeaderContentRId, firstPageFooterContentRId, readOnly = false, pageGap = 24, zoom = 1, pageRenderer, showMarginGuides = false, marginGuideColor, onDocumentChange, onReadOnlyEditAttempt, onCopy, onCut, onPaste, onSelectionChange, onSelectionTextChange, onEditorViewReady, externalPlugins = EMPTY_PLUGINS, showTemplateDirectives = true, collaboration, extensionManager, suggestionModeActive = false, suggestionAuthor, onActiveNoteStoryChange, onHeaderFooterDoubleClick, hfEditMode, activeHeaderFooterRId, onBodyClick, className, style, commentsSidebarOpen = false, sidebarOverlay, scrollContainerRef: scrollContainerRefProp, onHyperlinkClick, onContextMenu, onAnchorPositionsChange, onTotalPagesChange, onError, anchorPositionMode = "comments-and-revisions", onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq } = props;
+	const { document, documentIO, documentIdentity, fonts: hostFonts, styles, theme: _theme, sectionProperties, headerContent, footerContent, firstPageHeaderContent, firstPageFooterContent, headerContentRId, footerContentRId, firstPageHeaderContentRId, firstPageFooterContentRId, readOnly = false, pageGap = 24, zoom = 1, pageRenderer, markupView, showMarginGuides = false, marginGuideColor, onDocumentChange, onReadOnlyEditAttempt, onCopy, onCut, onPaste, onSelectionChange, onSelectionTextChange, onEditorViewReady, externalPlugins = EMPTY_PLUGINS, showTemplateDirectives = true, collaboration, extensionManager, suggestionModeActive = false, suggestionAuthor, onActiveNoteStoryChange, onHeaderFooterDoubleClick, hfEditMode, activeHeaderFooterRId, onBodyClick, className, style, pageEndGutter = 0, sidebarOverlay, scrollContainerRef: scrollContainerRefProp, onHyperlinkClick, onContextMenu, onAnchorPositionsChange, onTotalPagesChange, onError, anchorPositionMode = "comments-and-revisions", onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq } = props;
 	const getScrollContainer = useCallback(() => {
 		if (scrollContainerRefProp && typeof scrollContainerRefProp === "object") return scrollContainerRefProp.current;
 		return containerRef.current;
@@ -2897,7 +2893,6 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const pendingHiddenEditorSelectionRef = useRef(null);
 	const queuedInputBeforeHiddenEditorRef = useRef([]);
 	const pendingInitialFontReadyLayoutRef = useRef(false);
-	const suppressFontReadyUntilRef = useRef(0);
 	const [isFocused, setIsFocused] = useState(false);
 	const [selectionRects, setSelectionRects] = useState([]);
 	const [caretPosition, setCaretPosition] = useState(null);
@@ -3063,6 +3058,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const sectionHeaderFooterRefs = useMemo(() => resolveSectionHeaderFooterRefs(document), [document]);
 	const layoutInputSignature = useMemo(() => buildLayoutInputSignature({
 		columns,
+		markupView,
 		contentWidth,
 		defaultTabStop,
 		mirrorMargins,
@@ -3083,6 +3079,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		theme: _theme
 	}), [
 		columns,
+		markupView,
 		contentWidth,
 		defaultTabStop,
 		mirrorMargins,
@@ -3157,12 +3154,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			session: layoutSessionRef.current,
 			renderHfFromContentOrPm,
 			renderHeaderFooterContentByRId,
-			documentFontsAreLoaded,
+			readFontSetSignature,
 			buildFootnoteRenderItems,
 			describeInvalidHighlightMarks,
 			emptyTemplatePreviewEntries: EMPTY_TEMPLATE_PREVIEW_ENTRIES,
 			emptyTemplatePreviewHidden: EMPTY_TEMPLATE_PREVIEW_HIDDEN,
-			hyphenationReadiness
+			hyphenationReadiness,
+			markupView
 		}, state_0, options);
 		if (outcome.blocks) setBlocks(outcome.blocks);
 		if (outcome.measures !== void 0) setMeasures(outcome.measures);
@@ -3197,7 +3195,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		document,
 		defaultTabStop,
 		mirrorMargins,
-		styles
+		styles,
+		markupView
 	]);
 	const runLayoutPipelineRef = useRef(runLayoutPipeline$1);
 	runLayoutPipelineRef.current = runLayoutPipeline$1;
@@ -3236,10 +3235,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	]);
 	const layoutSchedulerRef = useRef(null);
 	if (layoutSchedulerRef.current === null) layoutSchedulerRef.current = createLayoutScheduler({
+		readState: () => hiddenPMRef.current?.getState() ?? precomputedInitialStateRef.current,
 		runLayout: (state_2, options_1) => runLayoutPipelineRef.current(state_2, options_1),
-		debounceMs: TRANSACTION_LAYOUT_DEBOUNCE_MS,
-		leadingFrame: true,
-		maxDelayMs: TRANSACTION_LAYOUT_MAX_DELAY_MS,
+		...TRANSACTION_LAYOUT_TIMING,
 		clock: browserClock
 	});
 	const documentChangeNotifyTimerRef = useRef(null);
@@ -3261,8 +3259,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			flushDocumentChangeNotification();
 		}, DOCUMENT_CHANGE_NOTIFY_DELAY);
 	}, [flushDocumentChangeNotification]);
-	const scheduleLayout = useCallback((state_3, dirtyRange) => {
-		layoutSchedulerRef.current?.schedule(state_3, dirtyRange);
+	const scheduleLayout = useCallback(() => {
+		layoutSchedulerRef.current?.schedule();
 	}, []);
 	useEffect(() => () => {
 		layoutSchedulerRef.current?.dispose();
@@ -3292,7 +3290,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const view_2 = hiddenPMRef.current?.getView();
 		if (!view_2) return;
 		const { selection: selection_1 } = view_2.state;
-		const domCaret = selection_1.empty ? getCaretFromDom(selection_1.head, zoom) : null;
+		const domCaret = selection_1.empty ? getCaretFromDom(visibleCaretPosition(projectMarkupView(view_2.state, markupView), selection_1.head), zoom) : null;
 		const overlayRect_0 = (pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]"))?.getBoundingClientRect();
 		syncImeCaretAnchor({
 			hiddenHost: hiddenPMRef.current?.getHostElement(),
@@ -3302,21 +3300,25 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				top: overlayRect_0.top + domCaret.y * zoom
 			} : null
 		});
-	}, [getCaretFromDom, zoom]);
+	}, [
+		getCaretFromDom,
+		zoom,
+		markupView
+	]);
 	/**
 	* Update selection overlay from PM selection.
 	*/
-	const updateSelectionOverlay = useCallback((state_4) => {
-		const { from, to } = state_4.selection;
+	const updateSelectionOverlay = useCallback((state_3) => {
+		const { from, to } = state_3.selection;
 		const isCurrentRequest = selectionOverlayRequestGate.begin();
-		if (directivesRef.current.length > 0) setDirectiveCaretPos(state_4.selection.head);
+		if (directivesRef.current.length > 0) setDirectiveCaretPos(state_3.selection.head);
 		onSelectionChangeRef.current?.(from, to);
 		folioEmitterRef.current.emit("selectionChange", {
 			from,
 			to
 		});
 		if (onSelectionTextChangeRef.current) {
-			const text_0 = from === to ? "" : state_4.doc.textBetween(from, to, " ", " ");
+			const text_0 = from === to ? "" : state_3.doc.textBetween(from, to, " ", " ");
 			onSelectionTextChangeRef.current({
 				from,
 				to,
@@ -3336,7 +3338,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		if (pagesContainerRef.current) {
 			const prevSelected = pagesContainerRef.current.querySelectorAll(".layout-table-cell-selected");
 			for (const el_0 of Array.from(prevSelected)) el_0.classList.remove("layout-table-cell-selected");
-			const sel = state_4.selection;
+			const sel = state_3.selection;
 			if ("$anchorCell" in sel && typeof sel.forEachCell === "function") {
 				const selectedRanges = [];
 				sel.forEachCell((node_0, pos) => {
@@ -3364,7 +3366,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			return;
 		}
 		if (from === to) {
-			const domCaret_0 = getCaretFromDom(from, zoom);
+			const caretPos = visibleCaretPosition(projectMarkupView(state_3, markupView), from);
+			const domCaret_0 = getCaretFromDom(caretPos, zoom);
 			if (domCaret_0) {
 				setCaretPosition(domCaret_0);
 				const overlayRect_1 = (pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]"))?.getBoundingClientRect();
@@ -3385,7 +3388,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 					setCaretPosition(null);
 					loadSelectionGeometry().then(({ getCaretPosition }) => {
 						if (!isCurrentRequest()) return;
-						const caret_0 = getCaretPosition(layout, blocks, measures, from);
+						const caret_0 = getCaretPosition(layout, blocks, measures, caretPos);
 						if (caret_0) {
 							const fallbackCaret = {
 								...caret_0,
@@ -3477,7 +3480,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		measures,
 		getCaretFromDom,
 		selectionOverlayRequestGate,
-		zoom
+		zoom,
+		markupView
 	]);
 	const updateSelectionOverlayRef = useRef(updateSelectionOverlay);
 	updateSelectionOverlayRef.current = updateSelectionOverlay;
@@ -3489,8 +3493,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (animationFrame !== null) cancelAnimationFrame(animationFrame);
 			animationFrame = requestAnimationFrame(() => {
 				animationFrame = null;
-				const state_5 = hiddenPMRef.current?.getState();
-				if (state_5) updateSelectionOverlayRef.current(state_5);
+				const state_4 = hiddenPMRef.current?.getState();
+				if (state_4) updateSelectionOverlayRef.current(state_4);
 			});
 		};
 		pagesContainer_0.addEventListener(PAINTER_PAINTED_EVENT, repaintSelection);
@@ -3731,7 +3735,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		}
 		updatePassageHighlightOverlay();
 	}, [passageHighlightOverlayRequestGate, updatePassageHighlightOverlay]);
-	const hideSelectionOverlayDuringInput = useCallback((state_6) => {
+	const hideSelectionOverlayDuringInput = useCallback((state_5) => {
 		selectionOverlayRequestGate.invalidate();
 		suppressSelectionOverlayRef.current = true;
 		setCaretPosition(null);
@@ -3740,7 +3744,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		revealSelectionOverlayTimerRef.current = window.setTimeout(() => {
 			revealSelectionOverlayTimerRef.current = null;
 			suppressSelectionOverlayRef.current = false;
-			updateSelectionOverlay(hiddenPMRef.current?.getState() ?? state_6);
+			updateSelectionOverlay(hiddenPMRef.current?.getState() ?? state_5);
 		}, SELECTION_REVEAL_AFTER_INPUT_DELAY);
 	}, [selectionOverlayRequestGate, updateSelectionOverlay]);
 	useEffect(() => () => {
@@ -3765,7 +3769,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	/**
 	* Handle PM transaction - re-layout on content/selection change.
 	*/
-	const handleTransaction = useCallback(({ transactions, newState, docChanged }) => {
+	const handleTransaction = useCallback(({ newState, docChanged }) => {
 		const nextMatches = anonymizationDecorationsKey.getState(newState)?.matches ?? [];
 		const matchesChanged = nextMatches !== anonymizationMatchesRef.current;
 		anonymizationMatchesRef.current = nextMatches;
@@ -3791,11 +3795,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				hidden: nextPreviewHidden,
 				mode: nextPreviewMode
 			};
-			if (!docChanged) if (nextPreviewMode !== previousPreview.mode) scheduleLayout(newState, null);
-			else {
-				const previewDirty = templatePreviewDirtyRange(previousPreview, templatePreviewRef.current);
-				if (previewDirty) scheduleLayout(newState, previewDirty);
-			}
+			if (!docChanged && (nextPreviewMode !== previousPreview.mode || templatePreviewDirtyRange(previousPreview, templatePreviewRef.current) !== null)) scheduleLayout();
 		}
 		const nextAiState = aiSuggestionDecorationsKey.getState(newState);
 		const nextAiSuggestions = nextAiState?.suggestions ?? EMPTY_AI_SUGGESTIONS;
@@ -3815,7 +3815,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				setPassageHighlightRects((prev_2) => prev_2.length === 0 ? prev_2 : []);
 			}
 			hideSelectionOverlayDuringInput(newState);
-			scheduleLayout(newState, getTransactionsDirtyRange(transactions));
+			scheduleLayout();
 			scheduleDocumentChangeNotification();
 		}
 		syncCoordinator.requestRender();
@@ -3851,13 +3851,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const activeHfPageNumberRef = useRef(null);
 	const handleHfPmTransaction = useCallback((rId, kind, view_3, docChanged_0, selectionChanged) => {
 		if (docChanged_0) {
-			let bodyState = hiddenPMRef.current?.getState();
-			if (!bodyState && precomputedInitialStateRef.current) bodyState = precomputedInitialStateRef.current;
-			if (!bodyState) {
-				ensureHiddenEditorView({ sync: true });
-				bodyState = hiddenPMRef.current?.getState();
-			}
-			if (bodyState) scheduleLayout(bodyState, null);
+			if (!hiddenPMRef.current?.getState() && !precomputedInitialStateRef.current) ensureHiddenEditorView({ sync: true });
+			scheduleLayout();
 		}
 		if (docChanged_0 || selectionChanged) {
 			const { from: from_1, to: to_1 } = view_3.state.selection;
@@ -3877,10 +3872,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		}
 	}, [scheduleLayout, ensureHiddenEditorView]);
 	const handleNoteStoryTransaction = useCallback((view_4, docChanged_1, selectionChanged_0) => {
-		if (docChanged_1) {
-			const bodyState_0 = hiddenPMRef.current?.getState();
-			if (bodyState_0) scheduleLayout(bodyState_0, null);
-		}
+		if (docChanged_1) scheduleLayout();
 		if (docChanged_1 || selectionChanged_0) {
 			const { from: from_2, to: to_2 } = view_4.state.selection;
 			onSelectionChangeRef.current?.(from_2, to_2);
@@ -3903,12 +3895,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	/**
 	* Handle selection change from PM.
 	*/
-	const handleSelectionChange = useCallback((state_7) => {
-		const { selection: selection_2 } = state_7;
+	const handleSelectionChange = useCallback((state_6) => {
+		const { selection: selection_2 } = state_6;
 		if (selection_2 instanceof NodeSelection && selection_2.node.type.name === "image") {
 			setSelectionRects([]);
 			setCaretPosition(null);
-		} else if (syncCoordinator.isSafeToRender()) updateSelectionOverlay(state_7);
+		} else if (syncCoordinator.isSafeToRender()) updateSelectionOverlay(state_6);
 		requestAnimationFrame(() => {
 			const view_5 = hiddenPMRef.current?.getView();
 			if (!view_5) {
@@ -4030,9 +4022,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		});
 	}, [layout, scrollToPositionImpl]);
 	const scrollToParaIdImpl = useCallback((paraId, options_2) => {
-		const state_8 = hiddenPMRef.current?.getState();
-		if (!state_8) return false;
-		const startPos = findStartPosForParaId(state_8.doc, paraId);
+		const state_7 = hiddenPMRef.current?.getState();
+		if (!state_7) return false;
+		const startPos = findStartPosForParaId(state_7.doc, paraId);
 		if (startPos == null || startPos < 0) return false;
 		scrollToPositionImpl(startPos);
 		requestAnimationFrame(() => {
@@ -4040,8 +4032,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				const pages = pagesContainerRef.current;
 				if (pages) flashParagraphFragmentsByParaId(pages, paraId, options_2.highlight);
 			}
-			const targetNode = state_8.doc.nodeAt(startPos);
-			const inner = targetNode?.isTextblock === true ? Math.min(startPos + 1 + targetNode.content.size, state_8.doc.content.size) : Math.min(startPos + 1, state_8.doc.content.size);
+			const targetNode = state_7.doc.nodeAt(startPos);
+			const inner = targetNode?.isTextblock === true ? Math.min(startPos + 1 + targetNode.content.size, state_7.doc.content.size) : Math.min(startPos + 1, state_7.doc.content.size);
 			hiddenPMRef.current?.setSelection(inner);
 			hiddenPMRef.current?.focus();
 		});
@@ -5146,7 +5138,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		let cancelled = false;
 		pendingInitialFontReadyLayoutRef.current = true;
 		const fontWaitStartedAt = performance.now();
-		const runAfterFontWait = (fontsLoaded) => {
+		const runAfterFontWait = () => {
 			if (cancelled) return;
 			pendingInitialFontReadyLayoutRef.current = false;
 			preHiddenInitialLayoutDoneRef.current = true;
@@ -5157,12 +5149,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			updateSelectionOverlay(initialState);
 			updateAnonymizationOverlay();
 			updateDirectivesOverlay();
-			if (fontsLoaded) {
-				layoutSessionRef.current.usedLoadedFonts = true;
-				suppressFontReadyUntilRef.current = performance.now() + INITIAL_FONT_READY_SUPPRESSION_MS;
-			}
 		};
-		waitForInitialLayoutFonts(document, initialState.doc).then(runAfterFontWait, () => runAfterFontWait(false));
+		waitForInitialLayoutFonts(document, initialState.doc).then(runAfterFontWait, runAfterFontWait);
 		return () => {
 			cancelled = true;
 			pendingInitialFontReadyLayoutRef.current = false;
@@ -5211,7 +5199,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				setIsFocused(true);
 			});
 		};
-		if (layoutSessionRef.current.lastPmDoc?.eq(view_24.state.doc)) {
+		if (layoutSessionRef.current.lastPmDoc?.eq(view_24.state.doc) && layoutSessionRef.current.lastMeasureInputs?.markupView === markupView) {
 			const lastPreview = layoutSessionRef.current.lastTemplatePreview;
 			if (templatePreviewRef.current.mode !== lastPreview.mode || templatePreviewDirtyRange(lastPreview, templatePreviewRef.current) !== null) runLayoutPipeline$1(view_24.state, { reason: "manual" });
 			updateSelectionOverlay(view_24.state);
@@ -5230,7 +5218,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		};
 		pendingInitialFontReadyLayoutRef.current = true;
 		const fontWaitStartedAt_0 = performance.now();
-		const runAfterFontWait_0 = (fontsLoaded_0) => {
+		const runAfterFontWait_0 = () => {
 			pendingInitialFontReadyLayoutRef.current = false;
 			const currentView_0 = hiddenPMRef.current?.getView();
 			if (currentView_0 !== view_24) return;
@@ -5238,12 +5226,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			resetCanvasContext();
 			clearAllCaches();
 			runInitialLayout(currentView_0);
-			if (fontsLoaded_0) {
-				layoutSessionRef.current.usedLoadedFonts = true;
-				suppressFontReadyUntilRef.current = performance.now() + INITIAL_FONT_READY_SUPPRESSION_MS;
-			}
 		};
-		waitForInitialLayoutFonts(document, view_24.state.doc).then(runAfterFontWait_0, () => runAfterFontWait_0(false));
+		waitForInitialLayoutFonts(document, view_24.state.doc).then(runAfterFontWait_0, runAfterFontWait_0);
 		focusReadyView();
 	}, [
 		applyPendingHiddenEditorInput,
@@ -5255,7 +5239,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		document,
 		updateAutocompleteOverlay,
 		readOnly,
-		refreshBodyImeCaretAnchor
+		refreshBodyImeCaretAnchor,
+		markupView
 	]);
 	const handleEditorViewDestroy = useCallback(() => {
 		onEditorViewReadyRef.current?.(null);
@@ -5296,32 +5281,17 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	useEffect(() => {
 		updateAutocompleteOverlay();
 	}, [updateAutocompleteOverlay]);
-	useEffect(() => {
-		const fontSet = getDocumentFontSet();
-		if (!fontSet) return;
-		const handleFontsLoading = () => {
-			if (performance.now() < suppressFontReadyUntilRef.current) return;
-			layoutSessionRef.current.usedLoadedFonts = false;
-		};
-		const handleFontsLoaded = () => {
-			if (pendingInitialFontReadyLayoutRef.current || performance.now() < suppressFontReadyUntilRef.current || layoutSessionRef.current.usedLoadedFonts) return;
+	useEffect(() => watchLayoutFontLoads({
+		measuredFontSet: () => layoutSessionRef.current.lastMeasureInputs?.fontSet ?? null,
+		relayout: () => {
+			if (pendingInitialFontReadyLayoutRef.current) return;
 			const view_25 = hiddenPMRef.current?.getView();
-			if (view_25) {
-				resetCanvasContext();
-				clearAllCaches();
-				runLayoutPipelineRef.current(view_25.state, { reason: "font-ready" });
-				updateSelectionOverlayRef.current(view_25.state);
-			}
-		};
-		fontSet.addEventListener("loading", handleFontsLoading);
-		fontSet.addEventListener("loadingdone", handleFontsLoaded);
-		fontSet.addEventListener("loadingerror", handleFontsLoaded);
-		return () => {
-			fontSet.removeEventListener("loading", handleFontsLoading);
-			fontSet.removeEventListener("loadingdone", handleFontsLoaded);
-			fontSet.removeEventListener("loadingerror", handleFontsLoaded);
-		};
-	}, []);
+			const state_8 = view_25?.state ?? layoutSessionRef.current.lastEditorState;
+			if (!state_8) return;
+			runLayoutPipelineRef.current(state_8, { reason: "font-ready" });
+			if (view_25) updateSelectionOverlayRef.current(view_25.state);
+		}
+	}), []);
 	const embeddedFontBuffer = document?.originalBuffer ?? null;
 	useEffect(() => {
 		if (!embeddedFontBuffer) return;
@@ -5384,20 +5354,20 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			lastLayoutInputSignatureRef.current = layoutInputSignature;
 			return;
 		}
-		const view_28 = hiddenPMRef.current?.getView();
-		if (view_28) {
+		const state_9 = hiddenPMRef.current?.getView()?.state ?? (preHiddenInitialLayoutDoneRef.current && precomputedInitialDocumentRef.current === document ? layoutSessionRef.current.lastEditorState : null);
+		if (state_9) {
 			const layoutInputsChanged = lastLayoutInputSignatureRef.current !== layoutInputSignature;
 			lastLayoutInputSignatureRef.current = layoutInputSignature;
-			if (!layoutInputsChanged && view_28.state.doc === layoutSessionRef.current.lastPmDoc) return;
-			runLayoutPipelineRef.current(view_28.state, { reason: "layout-input" });
+			if (!layoutInputsChanged && state_9.doc === layoutSessionRef.current.lastPmDoc) return;
+			runLayoutPipelineRef.current(state_9, { reason: "layout-input" });
 		}
 	}, [document, layoutInputSignature]);
 	useEffect(() => {
 		const container = containerRef.current;
 		if (!container) return;
 		const observer = new ResizeObserver(() => {
-			const state_9 = hiddenPMRef.current?.getState();
-			if (state_9) updateSelectionOverlay(state_9);
+			const state_10 = hiddenPMRef.current?.getState();
+			if (state_10) updateSelectionOverlay(state_10);
 		});
 		observer.observe(container);
 		return () => observer.disconnect();
@@ -5457,8 +5427,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			setIsFocused(true);
 		},
 		blur() {
-			const view_29 = getActiveEditorStory().view;
-			if (view_29?.hasFocus() && view_29.dom instanceof HTMLElement) view_29.dom.blur();
+			const view_28 = getActiveEditorStory().view;
+			if (view_28?.hasFocus() && view_28.dom instanceof HTMLElement) view_28.dom.blur();
 			setIsFocused(false);
 		},
 		isFocused() {
@@ -5534,25 +5504,25 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			return bestNumber;
 		},
 		getBlockRect(blockId) {
-			const state_10 = folioEditor.getState();
+			const state_11 = folioEditor.getState();
 			const pagesContainer_6 = pagesContainerRef.current;
 			const scrollRoot = getScrollContainer();
-			if (!state_10 || !pagesContainer_6 || !scrollRoot) return null;
+			if (!state_11 || !pagesContainer_6 || !scrollRoot) return null;
 			return readBlockRects({
 				blockIds: [blockId],
-				snapshot: createFolioAIEditSnapshot$1(state_10.doc),
+				snapshot: createFolioAIEditSnapshot$1(state_11.doc),
 				pagesContainer: pagesContainer_6,
 				scrollRoot
 			}).get(blockId) ?? null;
 		},
 		getBlockRects(blockIds) {
-			const state_11 = folioEditor.getState();
+			const state_12 = folioEditor.getState();
 			const pagesContainer_7 = pagesContainerRef.current;
 			const scrollRoot_0 = getScrollContainer();
-			if (!state_11 || !pagesContainer_7 || !scrollRoot_0) return /* @__PURE__ */ new Map();
+			if (!state_12 || !pagesContainer_7 || !scrollRoot_0) return /* @__PURE__ */ new Map();
 			return readBlockRects({
 				blockIds,
-				snapshot: createFolioAIEditSnapshot$1(state_11.doc),
+				snapshot: createFolioAIEditSnapshot$1(state_12.doc),
 				pagesContainer: pagesContainer_7,
 				scrollRoot: scrollRoot_0
 			});
@@ -5581,8 +5551,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		onTotalPagesChangeRef.current?.(totalPages);
 	}, [layout]);
 	useEffect(() => {
-		const state_12 = hiddenPMRef.current?.getState();
-		if (layout && state_12) updateSelectionOverlay(state_12);
+		const state_13 = hiddenPMRef.current?.getState();
+		if (layout && state_13) updateSelectionOverlay(state_13);
 	}, [layout, updateSelectionOverlay]);
 	const totalHeight = useMemo(() => {
 		if (!layout) return DEFAULT_PAGE_HEIGHT_PX + 48;
@@ -5594,7 +5564,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		pageGap
 	]);
 	const scaledViewportHeight = Math.max(1, totalHeight * zoom);
-	const scaledViewportWidth = Math.max(1, pageSize.w * zoom + (commentsSidebarOpen ? 304 : 0));
+	let widestPageWidth = layout?.pages.length ? 0 : pageSize.w;
+	for (const page_1 of layout?.pages ?? []) widestPageWidth = Math.max(widestPageWidth, page_1.size.w);
+	const scaledViewportWidth = Math.max(1, widestPageWidth * zoom + pageEndGutter);
 	const viewportExtentStyle = {
 		position: "relative",
 		width: `max(100%, ${String(scaledViewportWidth)}px)`,
@@ -5607,7 +5579,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		position: "absolute",
 		top: 0,
 		left: `max(0px, calc((100% - ${String(scaledViewportWidth)}px) / 2))`,
-		width: pageSize.w,
+		width: widestPageWidth,
 		minHeight: totalHeight,
 		transform: (() => {
 			const parts = [];
@@ -6891,6 +6863,19 @@ function createComment(text, authorName, parentId, id) {
 function getCommentParentId(comment) {
 	return comment.parentId;
 }
+/**
+* Threads the comments sidebar shows a card for: top-level comments not yet
+* resolved. Tracked changes are painted inline and have no card, so a
+* document with only tracked changes has none.
+*/
+function countOpenCommentThreads(comments) {
+	let count = 0;
+	for (const comment of comments) {
+		const parentId = getCommentParentId(comment);
+		if ((parentId === null || parentId === void 0) && !comment.done) count += 1;
+	}
+	return count;
+}
 function applyCommentMarkRange(view, range, commentId, options) {
 	const commentMark = view.state.schema.marks["comment"];
 	const safeRange = clampCommentMarkRange(view.state.doc.content.size, range);
@@ -7124,7 +7109,7 @@ function ContentControlWidgetsOverlay(t0) {
 				"aria-label": t11,
 				style,
 				className: "bg-popover text-popover-foreground min-w-[10rem] rounded-md border p-1 shadow-md",
-				onPointerDown: _temp$8,
+				onPointerDown: _temp$10,
 				children: [t12, t13]
 			})
 		}), document.body);
@@ -7136,7 +7121,7 @@ function ContentControlWidgetsOverlay(t0) {
 	} else t14 = $[31];
 	return t14;
 }
-function _temp$8(event) {
+function _temp$10(event) {
 	return event.stopPropagation();
 }
 function ContentControlDropdownItem(t0) {
@@ -7259,7 +7244,7 @@ function useFindReplace$1(hookOptions) {
 	let t6;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = () => {
-			setState(_temp$7);
+			setState(_temp$9);
 		};
 		$[8] = t6;
 	} else t6 = $[8];
@@ -7423,7 +7408,7 @@ function _temp2$4(prev_2) {
 		...prev_2.dialog.status === "closed" ? openDialogState(prev_2.lastMode) : closedDialogState(prev_2.lastMode)
 	};
 }
-function _temp$7(prev_1) {
+function _temp$9(prev_1) {
 	return {
 		...prev_1,
 		...closedDialogState(prev_1.lastMode)
@@ -7452,33 +7437,25 @@ function openDialogState(mode) {
 	};
 }
 //#endregion
-//#region src/components/DocumentOutline.tsx
-const DocumentOutline = (t0) => {
-	const $ = c(21);
-	const { headings, scrollContainerRef, topOffset, docSize, onHeadingClick } = t0;
-	const OutlineRail = useFolioUI().OutlineRail;
+//#region src/components/hooks/useActiveHeading.ts
+/**
+* The heading the reader is in: the last heading whose paragraph starts above
+* the middle of the scroll viewport, tracked as the document scrolls. Shared
+* by every place the outline is drawn (column, rail, drawer), so a drawer
+* opens on the same heading the rail marks.
+*/
+/** How long a jump holds the active heading before scrolling may move it. */
+const MANUAL_ACTIVE_LOCK_MS = 900;
+/** Outline item id for a heading: its ProseMirror position. */
+const headingId = (heading) => String(heading.pmPos);
+const useActiveHeading = (scrollContainerRef, headings) => {
+	const $ = c(7);
 	const [activeId, setActiveId] = useState(null);
 	const manualLockUntil = useRef(0);
+	let t0;
 	let t1;
-	if ($[0] !== headings) {
-		t1 = headings.map(_temp$6);
-		$[0] = headings;
-		$[1] = t1;
-	} else t1 = $[1];
-	const items = t1;
-	let map;
-	if ($[2] !== docSize || $[3] !== headings) {
-		map = /* @__PURE__ */ new Map();
-		if (docSize > 0) for (const heading_0 of headings) map.set(String(heading_0.pmPos), Math.min(99, Math.max(1, heading_0.pmPos / docSize * 100)));
-		$[2] = docSize;
-		$[3] = headings;
-		$[4] = map;
-	} else map = $[4];
-	const pctByPmPos = map;
-	let t2;
-	let t3;
-	if ($[5] !== headings || $[6] !== scrollContainerRef) {
-		t2 = () => {
+	if ($[0] !== headings || $[1] !== scrollContainerRef) {
+		t0 = () => {
 			const container = scrollContainerRef.current;
 			if (!container || headings.length === 0) return;
 			const compute = () => {
@@ -7496,15 +7473,11 @@ const DocumentOutline = (t0) => {
 						top: el.getBoundingClientRect().top - containerTop + container.scrollTop
 					});
 				}
-				offsets.sort(_temp2$3);
+				offsets.sort(_temp$8);
 				let next = null;
-				for (const heading_1 of headings) {
-					let candidate;
-					for (const offset of offsets) if (offset.pm >= heading_1.pmPos) {
-						candidate = offset;
-						break;
-					}
-					if (candidate && candidate.top <= threshold) next = String(heading_1.pmPos);
+				for (const heading of headings) {
+					const candidate = offsets.find((offset) => offset.pm >= heading.pmPos);
+					if (candidate && candidate.top <= threshold) next = headingId(heading);
 				}
 				setActiveId(next);
 			};
@@ -7520,82 +7493,361 @@ const DocumentOutline = (t0) => {
 				container.removeEventListener("scroll", onScroll);
 			};
 		};
-		t3 = [scrollContainerRef, headings];
-		$[5] = headings;
-		$[6] = scrollContainerRef;
-		$[7] = t2;
-		$[8] = t3;
+		t1 = [scrollContainerRef, headings];
+		$[0] = headings;
+		$[1] = scrollContainerRef;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t2 = $[7];
-		t3 = $[8];
+		t0 = $[2];
+		t1 = $[3];
 	}
-	useEffect(t2, t3);
-	let t4;
-	if ($[9] !== onHeadingClick) {
-		t4 = (id) => {
+	useEffect(t0, t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (id) => {
 			setActiveId(id);
-			manualLockUntil.current = Date.now() + 900;
-			onHeadingClick(Number(id));
+			manualLockUntil.current = Date.now() + MANUAL_ACTIVE_LOCK_MS;
 		};
-		$[9] = onHeadingClick;
-		$[10] = t4;
-	} else t4 = $[10];
-	const handleJump = t4;
-	let t5;
-	if ($[11] !== pctByPmPos) {
-		t5 = (id_0) => pctByPmPos.get(id_0) ?? null;
-		$[11] = pctByPmPos;
-		$[12] = t5;
-	} else t5 = $[12];
-	const resolvePct = t5;
+		$[4] = t2;
+	} else t2 = $[4];
+	const markJumped = t2;
+	let t3;
+	if ($[5] !== activeId) {
+		t3 = {
+			activeId,
+			markJumped
+		};
+		$[5] = activeId;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+function _temp$8(a, b) {
+	return a.pm - b.pm;
+}
+//#endregion
+//#region src/components/panelDrawer.tsx
+/**
+* The shared behaviour of a panel opened as a drawer over the page: a scrim
+* that closes it on an outside press, Escape that closes it, and focus that
+* moves into the drawer when it opens and back to where it came from when it
+* closes.
+*/
+const FOCUSABLE = "button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+const LIST_TAB_STOP = ":is(ol, ul) :is(button, [href], [tabindex]):not([tabindex=\"-1\"])";
+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 onCloseRef = useRef(onClose);
+	let t1;
+	let t2;
+	if ($[0] !== onClose) {
+		t1 = () => {
+			onCloseRef.current = onClose;
+		};
+		t2 = [onClose];
+		$[0] = onClose;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	const active = onClose !== null;
+	let t3;
+	let t4;
+	if ($[3] !== active || $[4] !== container || $[5] !== initial) {
+		t3 = () => {
+			if (!active) return;
+			const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			const element = container.current;
+			if (element) initialFocusTarget(element, initial).focus({ preventScroll: true });
+			const handleKeyDown = (event) => {
+				if (event.key !== "Escape" || event.defaultPrevented) return;
+				event.preventDefault();
+				onCloseRef.current?.();
+			};
+			document.addEventListener("keydown", handleKeyDown);
+			return () => {
+				document.removeEventListener("keydown", handleKeyDown);
+				if (previous?.isConnected) previous.focus({ preventScroll: true });
+			};
+		};
+		t4 = [
+			active,
+			container,
+			initial
+		];
+		$[3] = active;
+		$[4] = container;
+		$[5] = initial;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	useEffect(t3, t4);
+};
+/** Dims the page under an open drawer; pressing it closes the drawer. */
+const PanelScrim = (t0) => {
+	const $ = c(2);
+	const { onDismiss } = t0;
+	let t1;
+	if ($[0] !== onDismiss) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "folio-panel-scrim",
+			"data-testid": "folio-panel-scrim",
+			onMouseDown: (event) => {
+				event.preventDefault();
+				onDismiss();
+			}
+		});
+		$[0] = onDismiss;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+//#endregion
+//#region src/components/DocumentOutline.tsx
+const SURFACE_WIDTH = {
+	column: PANEL_METRICS.outlineColumnWidth,
+	rail: PANEL_METRICS.outlineRailWidth,
+	drawer: PANEL_METRICS.drawerWidth
+};
+const DocumentOutline = (t0) => {
+	const $ = c(55);
+	const { headings, scrollContainerRef, docSize, activeId, onJump, surface, expanded, onExpand, onClose } = 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;
+	let map;
+	if ($[2] !== docSize || $[3] !== 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];
+	const pctById = map;
+	let t2;
+	if ($[5] !== onClose || $[6] !== onJump || $[7] !== surface) {
+		t2 = (id) => {
+			onJump(id);
+			if (surface === "drawer") 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";
 	let t6;
-	if ($[13] !== OutlineRail || $[14] !== activeId || $[15] !== handleJump || $[16] !== items || $[17] !== resolvePct || $[18] !== scrollContainerRef || $[19] !== topOffset) {
+	if ($[13] !== OutlineRail || $[14] !== activeId || $[15] !== handleJump || $[16] !== items || $[17] !== outlineLabel || $[18] !== resolvePct || $[19] !== scrollContainerRef || $[20] !== t5 || $[21] !== width) {
 		t6 = /* @__PURE__ */ jsx(OutlineRail, {
 			activeId,
-			ariaLabel: "Document outline",
+			ariaLabel: outlineLabel,
 			items,
 			onJump: handleJump,
-			panelWidth: 320,
+			panelWidth: width,
+			presentation: t5,
 			resolvePct,
 			scrollContainerRef,
-			topOffset
+			topOffset: 0
 		});
 		$[13] = OutlineRail;
 		$[14] = activeId;
 		$[15] = handleJump;
 		$[16] = items;
-		$[17] = resolvePct;
-		$[18] = scrollContainerRef;
-		$[19] = topOffset;
-		$[20] = t6;
-	} else t6 = $[20];
-	return t6;
+		$[17] = outlineLabel;
+		$[18] = resolvePct;
+		$[19] = scrollContainerRef;
+		$[20] = t5;
+		$[21] = width;
+		$[22] = t6;
+	} else t6 = $[22];
+	const rail = t6;
+	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, {
+				"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,
+				"aria-label": outlineLabel,
+				className: "folio-outline-icon-button",
+				"data-testid": "folio-outline-expand",
+				onClick: onExpand,
+				title: outlineLabel,
+				type: "button",
+				children: t9
+			});
+			$[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", {
+				"aria-label": outlineLabel,
+				className: "folio-outline folio-outline--rail",
+				"data-testid": "folio-outline",
+				"data-folio-outline-surface": "rail",
+				style: t7,
+				children: [t10, rail]
+			});
+			$[30] = outlineLabel;
+			$[31] = rail;
+			$[32] = t10;
+			$[33] = t7;
+			$[34] = t11;
+		} else t11 = $[34];
+		return t11;
+	}
+	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", {
+			className: "folio-outline-title",
+			children: t9
+		});
+		$[39] = t9;
+		$[40] = t10;
+	} else t10 = $[40];
+	let t11;
+	if ($[41] !== onClose || $[42] !== surface || $[43] !== t) {
+		t11 = surface === "drawer" && onClose && /* @__PURE__ */ jsx("button", {
+			"aria-label": t("common.closeDialog"),
+			className: "folio-outline-icon-button",
+			onClick: onClose,
+			title: t("common.closeDialog"),
+			type: "button",
+			children: /* @__PURE__ */ jsx(XIcon, {
+				"aria-hidden": "true",
+				size: 16
+			})
+		});
+		$[41] = onClose;
+		$[42] = surface;
+		$[43] = t;
+		$[44] = t11;
+	} else t11 = $[44];
+	let t12;
+	if ($[45] !== t10 || $[46] !== t11) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "folio-outline-header",
+			children: [t10, t11]
+		});
+		$[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", {
+			ref: navRef,
+			"aria-label": outlineLabel,
+			className: t7,
+			"data-testid": "folio-outline",
+			"data-folio-outline-surface": surface,
+			style: t8,
+			children: [t12, rail]
+		});
+		$[48] = outlineLabel;
+		$[49] = rail;
+		$[50] = surface;
+		$[51] = t12;
+		$[52] = t7;
+		$[53] = t8;
+		$[54] = t13;
+	} else t13 = $[54];
+	return t13;
 };
-function _temp$6(heading) {
+function _temp$7(heading) {
 	const item = {
-		id: String(heading.pmPos),
+		id: headingId(heading),
 		label: heading.text,
 		level: heading.level
 	};
 	if (typeof heading.pageNumber === "number") item.meta = String(heading.pageNumber);
 	return item;
 }
-function _temp2$3(a, b) {
-	return a.pm - b.pm;
-}
 //#endregion
 //#region src/components/DocxEditorDialogs.tsx
-const FindReplaceDialog = lazy(() => import("./FindReplaceDialog-CqKK82nE.js").then((n) => n.n).then((m) => ({ default: m.FindReplaceDialog })));
-const TablePropertiesDialog = lazy(() => import("./TablePropertiesDialog-DOUiX1KZ.js").then((n) => n.n).then((m) => ({ default: m.TablePropertiesDialog })));
-const ImagePositionDialog = lazy(() => import("./ImagePositionDialog-DNodkoI2.js").then((n) => n.n).then((m) => ({ default: m.ImagePositionDialog })));
-const ImagePropertiesDialog = lazy(() => import("./ImagePropertiesDialog-CLsDIUWb.js").then((n) => n.n).then((m) => ({ default: m.ImagePropertiesDialog })));
-const FootnotePropertiesDialog = lazy(() => import("./FootnotePropertiesDialog-CixRdIiT.js").then((n) => n.n).then((m) => ({ default: m.FootnotePropertiesDialog })));
-const PageSetupDialog = lazy(() => import("./PageSetupDialog-COkgeOQn.js").then((n) => n.n).then((m) => ({ default: m.PageSetupDialog })));
-const InsertSymbolDialog = lazy(() => import("./InsertSymbolDialog-DCFLmfzn.js").then((n) => n.n).then((m) => ({ default: m.InsertSymbolDialog })));
+const FindReplaceDialog = lazy(() => import("./FindReplaceDialog-BUwFQWaq.js").then((n) => n.n).then((m) => ({ default: m.FindReplaceDialog })));
+const TablePropertiesDialog = lazy(() => import("./TablePropertiesDialog-DwPiUj4m.js").then((n) => n.n).then((m) => ({ default: m.TablePropertiesDialog })));
+const ImagePositionDialog = lazy(() => import("./ImagePositionDialog-9q71ka9N.js").then((n) => n.n).then((m) => ({ default: m.ImagePositionDialog })));
+const ImagePropertiesDialog = lazy(() => import("./ImagePropertiesDialog-o79NCGk7.js").then((n) => n.n).then((m) => ({ default: m.ImagePropertiesDialog })));
+const FootnotePropertiesDialog = lazy(() => import("./FootnotePropertiesDialog-6XdO0zBH.js").then((n) => n.n).then((m) => ({ default: m.FootnotePropertiesDialog })));
+const PageSetupDialog = lazy(() => import("./PageSetupDialog-CMdVXCZ-.js").then((n) => n.n).then((m) => ({ default: m.PageSetupDialog })));
+const SetNumberingValueDialog = lazy(() => import("./SetNumberingValueDialog-DOsaSq7e.js").then((m) => ({ default: m.SetNumberingValueDialog })));
+const InsertSymbolDialog = lazy(() => import("./InsertSymbolDialog-Cn_Nifhg.js").then((n) => n.n).then((m) => ({ default: m.InsertSymbolDialog })));
 function DocxEditorDialogs(t0) {
-	const $ = c(47);
-	const { findReplace, tableProperties, imagePosition, imageProperties, pageSetup, footnoteProperties, insertSymbol } = t0;
+	const $ = c(52);
+	const { findReplace, tableProperties, imagePosition, imageProperties, pageSetup, footnoteProperties, insertSymbol, setNumberingValue } = t0;
 	let t1;
 	if ($[0] !== findReplace.currentResult || $[1] !== findReplace.onClose || $[2] !== findReplace.onFind || $[3] !== findReplace.onFindNext || $[4] !== findReplace.onFindPrevious || $[5] !== findReplace.onReplace || $[6] !== findReplace.onReplaceAll || $[7] !== findReplace.state.dialog.status || $[8] !== findReplace.state.searchText) {
 		t1 = findReplace.state.dialog.status === "open" && /* @__PURE__ */ jsx(FindReplaceDialog, {
@@ -7703,8 +7955,20 @@ function DocxEditorDialogs(t0) {
 		$[38] = t7;
 	} else t7 = $[38];
 	let t8;
-	if ($[39] !== t1 || $[40] !== t2 || $[41] !== t3 || $[42] !== t4 || $[43] !== t5 || $[44] !== t6 || $[45] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(Suspense, {
+	if ($[39] !== setNumberingValue.isOpen || $[40] !== setNumberingValue.onApply || $[41] !== setNumberingValue.onClose) {
+		t8 = setNumberingValue.isOpen && /* @__PURE__ */ jsx(SetNumberingValueDialog, {
+			isOpen: setNumberingValue.isOpen,
+			onClose: setNumberingValue.onClose,
+			onApply: setNumberingValue.onApply
+		});
+		$[39] = setNumberingValue.isOpen;
+		$[40] = setNumberingValue.onApply;
+		$[41] = setNumberingValue.onClose;
+		$[42] = t8;
+	} else t8 = $[42];
+	let t9;
+	if ($[43] !== t1 || $[44] !== t2 || $[45] !== t3 || $[46] !== t4 || $[47] !== t5 || $[48] !== t6 || $[49] !== t7 || $[50] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Suspense, {
 			fallback: null,
 			children: [
 				t1,
@@ -7713,19 +7977,21 @@ function DocxEditorDialogs(t0) {
 				t4,
 				t5,
 				t6,
-				t7
+				t7,
+				t8
 			]
 		});
-		$[39] = t1;
-		$[40] = t2;
-		$[41] = t3;
-		$[42] = t4;
-		$[43] = t5;
-		$[44] = t6;
-		$[45] = t7;
-		$[46] = t8;
-	} else t8 = $[46];
-	return t8;
+		$[43] = t1;
+		$[44] = t2;
+		$[45] = t3;
+		$[46] = t4;
+		$[47] = t5;
+		$[48] = t6;
+		$[49] = t7;
+		$[50] = t8;
+		$[51] = t9;
+	} else t9 = $[51];
+	return t9;
 }
 //#endregion
 //#region src/components/DocxEditorHelpers.tsx
@@ -7954,7 +8220,7 @@ function NotificationContainer(t0) {
 	if ($[0] !== notifications || $[1] !== onDismiss) {
 		t3 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			const visibleNotifications = notifications.filter(_temp$5);
+			const visibleNotifications = notifications.filter(_temp$6);
 			if (visibleNotifications.length === 0) {
 				t3 = null;
 				break bb0;
@@ -7994,7 +8260,7 @@ function NotificationContainer(t0) {
 	} else t4 = $[9];
 	return t4;
 }
-function _temp$5(n) {
+function _temp$6(n) {
 	return !n.dismissed;
 }
 const SEVERITY_STYLES = {
@@ -8436,7 +8702,7 @@ function AlignmentButtons({ value = "left", onChange, disabled = false }) {
 function AlignmentOption(t0) {
 	const $ = c(16);
 	const { PopoverClose, option, selected, onChange } = t0;
-	const handleMouseDown = _temp$4;
+	const handleMouseDown = _temp$5;
 	let t1;
 	if ($[0] !== onChange || $[1] !== option.value) {
 		t1 = () => onChange?.(option.value);
@@ -8490,7 +8756,7 @@ function AlignmentOption(t0) {
 	} else t8 = $[15];
 	return t8;
 }
-function _temp$4(event) {
+function _temp$5(event) {
 	return event.preventDefault();
 }
 //#endregion
@@ -9082,7 +9348,7 @@ const DOCUMENT_COLOR_PRESETS = [
 	}
 ];
 function FormattingBar(props) {
-	const { currentFormatting = {}, onFormat, onUndo, onRedo, canUndo = false, canRedo = false, disabled = false, className, style, enableShortcuts = true, editorRef, children, showStylePicker = true, showFormatPainter = true, formatPainterActive = false, onFormatPainter, showFontPicker = true, fontFamilies, showFontSizePicker = true, showTextColorPicker = true, showAlignmentButtons = true, showListButtons = true, showZoomControl, zoom, onZoomChange, rulerVisible = false, onToggleRuler, documentStyles, theme, onRefocusEditor, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onInsertSymbol, priorityExtra, inlineExtra, stylePickerLabel, stylePickerLabelStyle, inline = false } = props;
+	const { currentFormatting = {}, onFormat, onUndo, onRedo, canUndo = false, canRedo = false, disabled = false, className, style, enableShortcuts = true, editorRef, children, showStylePicker = true, showFormatPainter = true, formatPainterActive = false, onFormatPainter, showFontPicker = true, fontFamilies, showFontSizePicker = true, showTextColorPicker = true, showAlignmentButtons = true, showListButtons = true, showZoomControl, zoom, onZoomChange, rulerVisible = false, onToggleRuler, documentStyles, theme, onRefocusEditor, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onInsertSymbol, priorityExtra, inlineExtra, panelToggles, stylePickerLabel, stylePickerLabelStyle, inline = false } = props;
 	const folioUI = useFolioUI();
 	const { Root: Menu, Trigger: MenuTrigger, Popup: MenuPopup } = folioUI.Menu;
 	const ColorPicker = folioUI.ColorPicker;
@@ -9640,6 +9906,7 @@ function FormattingBar(props) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "ms-auto flex shrink-0 items-center gap-1",
 				children: [
+					panelToggles,
 					onToggleRuler && /* @__PURE__ */ jsx(ToolbarGroup, {
 						label: t("viewGroup"),
 						children: /* @__PURE__ */ jsx(ToolbarButton, {
@@ -10302,8 +10569,8 @@ const useHyperlinkHandlers = (t0) => {
 		$[0] = t1;
 	} else t1 = $[0];
 	const handleHyperlinkClick = t1;
-	const handleHyperlinkPopupNavigate = _temp$3;
-	const handleHyperlinkPopupCopy = _temp2$2;
+	const handleHyperlinkPopupNavigate = _temp$4;
+	const handleHyperlinkPopupCopy = _temp2$3;
 	let t2;
 	if ($[1] !== focusActiveEditor || $[2] !== getActiveEditorView) {
 		t2 = (displayText, href_1) => {
@@ -10364,14 +10631,14 @@ const useHyperlinkHandlers = (t0) => {
 	} else t5 = $[12];
 	return t5;
 };
-function _temp$3(href) {
+function _temp$4(href) {
 	const safeHref = sanitizeExternalUrl(href);
 	if (safeHref) {
 		const anchor = anchorTargetAttrs(void 0);
 		window.open(safeHref, anchor.target, windowFeaturesFor(anchor));
 	}
 }
-function _temp2$2(href_0) {
+function _temp2$3(href_0) {
 	navigator.clipboard.writeText(href_0);
 }
 //#endregion
@@ -10388,7 +10655,7 @@ const useImageHandlers = (t0) => {
 			if (!file) return;
 			const view = getActiveEditorView();
 			if (!view) return;
-			insertImageFromFile(view, file, focusActiveEditor).catch(_temp$2);
+			insertImageFromFile(view, file, focusActiveEditor).catch(_temp$3);
 			e.target.value = "";
 		};
 		$[0] = focusActiveEditor;
@@ -10481,7 +10748,7 @@ const useImageHandlers = (t0) => {
 	} else t7 = $[27];
 	return t7;
 };
-function _temp$2() {}
+function _temp$3() {}
 //#endregion
 //#region src/components/hooks/useKeyboardShortcuts.ts
 /**
@@ -10564,6 +10831,114 @@ function useKeyboardShortcuts({ pagedEditorRef, findReplace, tableSelection, onD
 	}, [pagedEditorRef, scope]);
 }
 //#endregion
+//#region src/components/hooks/usePanelLayout.ts
+/**
+* Measures the width the editor's panels row has and decides, through
+* {@link computePanelLayout}, how the outline and the comments are shown.
+* One ResizeObserver feeds it; the scroll gutter, the ruler offset and the
+* page centring all read the result, so they agree with what is on screen.
+*/
+const usePanelLayout = (t0) => {
+	const $ = c(22);
+	const { pageWidth, outline, comments, scrollContainerRef } = t0;
+	const [row, setRow] = useState(null);
+	const [availableWidth, setAvailableWidth] = useState(Number.POSITIVE_INFINITY);
+	const [overlay, setOverlay] = useState("none");
+	let t1;
+	let t2;
+	if ($[0] !== row || $[1] !== scrollContainerRef) {
+		t1 = () => {
+			if (!row) return;
+			const measure = () => {
+				const scroll = scrollContainerRef.current;
+				const scrollbar = scroll ? scroll.offsetWidth - scroll.clientWidth : 0;
+				setAvailableWidth(Math.max(0, row.clientWidth - scrollbar));
+			};
+			measure();
+			const observer = new ResizeObserver(measure);
+			observer.observe(row);
+			if (scrollContainerRef.current) observer.observe(scrollContainerRef.current);
+			return () => observer.disconnect();
+		};
+		t2 = [row, scrollContainerRef];
+		$[0] = row;
+		$[1] = scrollContainerRef;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[4] !== availableWidth || $[5] !== comments || $[6] !== outline || $[7] !== pageWidth) {
+		t3 = computePanelLayout({
+			availableWidth,
+			pageWidth,
+			outline,
+			comments
+		});
+		$[4] = availableWidth;
+		$[5] = comments;
+		$[6] = outline;
+		$[7] = pageWidth;
+		$[8] = t3;
+	} else t3 = $[8];
+	const layout = t3;
+	const outlineDrawn = layout.outline === "rail" || layout.outline === "drawer";
+	const commentsDrawn = layout.comments === "drawer";
+	let t4;
+	let t5;
+	if ($[9] !== commentsDrawn || $[10] !== outlineDrawn || $[11] !== overlay) {
+		t4 = () => {
+			if (overlay === "outline" && !outlineDrawn || overlay === "comments" && !commentsDrawn) setOverlay("none");
+		};
+		t5 = [
+			commentsDrawn,
+			outlineDrawn,
+			overlay
+		];
+		$[9] = commentsDrawn;
+		$[10] = outlineDrawn;
+		$[11] = overlay;
+		$[12] = t4;
+		$[13] = t5;
+	} else {
+		t4 = $[12];
+		t5 = $[13];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[14] !== availableWidth || $[15] !== outline || $[16] !== pageWidth) {
+		t6 = () => computePanelLayout({
+			availableWidth,
+			pageWidth,
+			outline,
+			comments: "open"
+		});
+		$[14] = availableWidth;
+		$[15] = outline;
+		$[16] = pageWidth;
+		$[17] = t6;
+	} else t6 = $[17];
+	const layoutWithCommentsOpen = t6;
+	let t7;
+	if ($[18] !== layout || $[19] !== layoutWithCommentsOpen || $[20] !== overlay) {
+		t7 = {
+			rowRef: setRow,
+			layout,
+			overlay,
+			setOverlay,
+			layoutWithCommentsOpen
+		};
+		$[18] = layout;
+		$[19] = layoutWithCommentsOpen;
+		$[20] = overlay;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
+};
+//#endregion
 //#region src/components/hooks/useZoomAndPageInfo.ts
 const PAGE_INFO_FADE_MS = 600;
 const FIT_TO_WIDTH_PADDING_PX = 16;
@@ -11146,7 +11521,7 @@ function OptionsMenu(t0) {
 	if ($[3] !== setShowOptions) {
 		t3 = (e) => {
 			e.stopPropagation();
-			setShowOptions(_temp$1);
+			setShowOptions(_temp$2);
 		};
 		$[3] = setShowOptions;
 		$[4] = t3;
@@ -11163,7 +11538,7 @@ function OptionsMenu(t0) {
 			type: "button",
 			className: "hf-options-button",
 			onClick: t3,
-			onMouseDown: _temp2$1,
+			onMouseDown: _temp2$2,
 			children: [t4, " ▾"]
 		});
 		$[7] = t3;
@@ -11237,45 +11612,13 @@ function OptionsMenu(t0) {
 	} else t7 = $[21];
 	return t7;
 }
-function _temp2$1(e_0) {
+function _temp2$2(e_0) {
 	return e_0.stopPropagation();
 }
-function _temp$1(prev) {
+function _temp$2(prev) {
 	return !prev;
 }
 //#endregion
-//#region src/components/selectionFormattingBuilder.ts
-/**
-* Assemble the `SelectionFormatting` object the toolbar consumes.
-*
-* Several fields are `?: T` (no `| undefined`) under
-* `exactOptionalPropertyTypes`, so we only assign them when the source
-* value is defined — assigning `undefined` would be a type error. Pure
-* (no DOM, no PM state mutation).
-*/
-function buildSelectionFormatting({ selectionState, fontFamily, fontSize, textColor, listState }) {
-	const { textFormatting, paragraphFormatting } = selectionState;
-	const formatting = {
-		underline: !!textFormatting.underline,
-		superscript: textFormatting.vertAlign === "superscript",
-		subscript: textFormatting.vertAlign === "subscript",
-		bidi: !!paragraphFormatting.bidi
-	};
-	if (textFormatting.bold !== void 0) formatting.bold = textFormatting.bold;
-	if (textFormatting.italic !== void 0) formatting.italic = textFormatting.italic;
-	if (textFormatting.strike !== void 0) formatting.strike = textFormatting.strike;
-	if (fontFamily !== void 0) formatting.fontFamily = fontFamily;
-	if (fontSize !== void 0) formatting.fontSize = fontSize;
-	if (textColor !== void 0) formatting.color = textColor;
-	if (textFormatting.highlight !== void 0) formatting.highlight = textFormatting.highlight;
-	if (paragraphFormatting.alignment !== void 0) formatting.alignment = paragraphFormatting.alignment;
-	if (paragraphFormatting.lineSpacing !== void 0) formatting.lineSpacing = paragraphFormatting.lineSpacing;
-	if (listState !== void 0) formatting.listState = listState;
-	if (selectionState.styleId !== null) formatting.styleId = selectionState.styleId;
-	if (paragraphFormatting.indentLeft !== void 0) formatting.indentLeft = paragraphFormatting.indentLeft;
-	return formatting;
-}
-//#endregion
 //#region src/components/toolbarUtils.ts
 /**
 * Map hex color to OOXML highlight color name
@@ -11317,7 +11660,164 @@ function areSelectionFormattingEqual(a, b) {
 	return a.bold === b.bold && a.italic === b.italic && a.underline === b.underline && a.strike === b.strike && a.superscript === b.superscript && a.subscript === b.subscript && a.fontFamily === b.fontFamily && a.fontSize === b.fontSize && a.color === b.color && a.highlight === b.highlight && a.alignment === b.alignment && a.lineSpacing === b.lineSpacing && sameListState(a.listState, b.listState) && a.styleId === b.styleId && a.indentLeft === b.indentLeft && a.bidi === b.bidi;
 }
 //#endregion
-//#region src/components/ui/HyperlinkPopup.tsx
+//#region src/components/PanelToggles.tsx
+/**
+* Toolbar toggles for the editor's side panels, pinned at the end of the
+* toolbar so they never collapse into its overflow menu:
+*
+* - the outline, shown only while the outline is a drawer (in wider tiers it
+*   has a column or a rail of its own);
+* - the comments, with the number of open threads as a badge.
+*/
+/** Counts above this read as "99+". */
+const MAX_BADGE_COUNT = 99;
+function PanelToggles(t0) {
+	const $ = c(27);
+	const { outline, onToggleOutline, commentsShown, commentCount, onToggleComments } = t0;
+	const t = useTranslations("folio");
+	const format = useFormatter();
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("comments.visibility");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	const commentsLabel = t1;
+	let t2;
+	if ($[2] !== commentCount || $[3] !== format) {
+		t2 = commentCount > MAX_BADGE_COUNT ? `${format.number(MAX_BADGE_COUNT)}+` : format.number(commentCount);
+		$[2] = commentCount;
+		$[3] = format;
+		$[4] = t2;
+	} else t2 = $[4];
+	const badge = t2;
+	let t3;
+	if ($[5] !== onToggleOutline || $[6] !== outline || $[7] !== t) {
+		t3 = outline !== "absent" && /* @__PURE__ */ jsx(ToolbarButton, {
+			active: outline === "open",
+			ariaLabel: t("editor.showDocumentOutline"),
+			onClick: onToggleOutline,
+			testId: "toolbar-outline-toggle",
+			title: t("editor.showDocumentOutline"),
+			children: /* @__PURE__ */ jsx(ListTreeIcon, { size: 16 })
+		});
+		$[5] = onToggleOutline;
+		$[6] = outline;
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	const t4 = commentsShown && "bg-[var(--doc-primary-light)] text-[var(--doc-text)]";
+	let t5;
+	if ($[9] !== t4) {
+		t5 = cn("flex h-8 min-w-8 shrink-0 items-center justify-center gap-1 rounded-md px-1.5", "transition-colors duration-100", "text-[var(--doc-text-muted)] hover:bg-[var(--doc-primary-light)] hover:text-[var(--doc-text)]", t4);
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(MessageSquareTextIcon, {
+			"aria-hidden": "true",
+			size: 16
+		});
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== commentsLabel) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: commentsLabel
+		});
+		$[12] = commentsLabel;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== badge || $[15] !== commentCount) {
+		t8 = commentCount > 0 && /* @__PURE__ */ jsx("span", {
+			className: "min-w-4 rounded-full bg-[var(--doc-primary)] px-1 text-center text-[10px] leading-4 font-semibold text-[var(--primary-foreground,var(--doc-page))] tabular-nums",
+			"data-testid": "toolbar-comments-count",
+			children: badge
+		});
+		$[14] = badge;
+		$[15] = commentCount;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== commentsLabel || $[18] !== commentsShown || $[19] !== onToggleComments || $[20] !== t5 || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("button", {
+			"aria-pressed": commentsShown,
+			className: t5,
+			"data-testid": "toolbar-comments-toggle",
+			onClick: onToggleComments,
+			onMouseDown: _temp2$1,
+			title: commentsLabel,
+			type: "button",
+			children: [
+				t6,
+				t7,
+				t8
+			]
+		});
+		$[17] = commentsLabel;
+		$[18] = commentsShown;
+		$[19] = onToggleComments;
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t3 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-0.5",
+			onMouseUp: _temp$1,
+			children: [t3, t9]
+		});
+		$[24] = t3;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	return t10;
+}
+function _temp2$1(event_0) {
+	return event_0.preventDefault();
+}
+function _temp$1(event) {
+	return event.stopPropagation();
+}
+//#endregion
+//#region src/components/selectionFormattingBuilder.ts
+/**
+* Assemble the `SelectionFormatting` object the toolbar consumes.
+*
+* Several fields are `?: T` (no `| undefined`) under
+* `exactOptionalPropertyTypes`, so we only assign them when the source
+* value is defined — assigning `undefined` would be a type error. Pure
+* (no DOM, no PM state mutation).
+*/
+function buildSelectionFormatting({ selectionState, fontFamily, fontSize, textColor, listState }) {
+	const { textFormatting, paragraphFormatting } = selectionState;
+	const formatting = {
+		underline: !!textFormatting.underline,
+		superscript: textFormatting.vertAlign === "superscript",
+		subscript: textFormatting.vertAlign === "subscript",
+		bidi: !!paragraphFormatting.bidi
+	};
+	if (textFormatting.bold !== void 0) formatting.bold = textFormatting.bold;
+	if (textFormatting.italic !== void 0) formatting.italic = textFormatting.italic;
+	if (textFormatting.strike !== void 0) formatting.strike = textFormatting.strike;
+	if (fontFamily !== void 0) formatting.fontFamily = fontFamily;
+	if (fontSize !== void 0) formatting.fontSize = fontSize;
+	if (textColor !== void 0) formatting.color = textColor;
+	if (textFormatting.highlight !== void 0) formatting.highlight = textFormatting.highlight;
+	if (paragraphFormatting.alignment !== void 0) formatting.alignment = paragraphFormatting.alignment;
+	if (paragraphFormatting.lineSpacing !== void 0) formatting.lineSpacing = paragraphFormatting.lineSpacing;
+	if (listState !== void 0) formatting.listState = listState;
+	if (selectionState.styleId !== null) formatting.styleId = selectionState.styleId;
+	if (paragraphFormatting.indentLeft !== void 0) formatting.indentLeft = paragraphFormatting.indentLeft;
+	return formatting;
+}
+//#endregion
+//#region src/components/ui/HyperlinkPopup.tsx
 /**
 * HyperlinkPopup — floating popup for viewing/editing hyperlinks.
 * View mode: URL + copy/edit/unlink buttons.
@@ -12150,7 +12650,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 			setComments(bodyComments);
 			setVisibleCommentAuthors(null);
 			setActiveCommentId(null);
-			if (autoOpenReviewSidebar) setShowCommentsSidebar(true);
+			if (autoOpenReviewSidebar && countOpenCommentThreads(bodyComments) > 0) setShowCommentsSidebar(true);
 			commentsLoadedRef.current = true;
 		}
 	}, [
@@ -12279,8 +12779,10 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 * - Error boundary
 * - Loading states
 */
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-CGs9K70B.js").then((m) => ({ default: m.CommentsSidebar })));
-const TextContextMenu = lazy(() => import("./TextContextMenu-Ci7-M4oU.js").then((m) => ({ default: m.TextContextMenu })));
+/** No headings to track while the outline is not shown. */
+const NO_HEADINGS = [];
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-DW2u1T_l.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");
 	return attemptSelectiveSave;
@@ -12298,6 +12800,15 @@ const DISPLAY_MODE_LABEL_KEYS = {
 };
 const preventMouseDownDefault = (event) => event.preventDefault();
 let documentOperationUndoHandleCursor = Date.now();
+/**
+* The comments a batch's applied operations own. A run whose result the
+* save-time check refused allocated comments nothing in the document names;
+* they stay out of the comment list.
+*/
+const appliedOperationComments = (created, applied) => {
+	const appliedIds = new Set(applied.map(({ commentId }) => commentId));
+	return created.filter((comment) => appliedIds.has(comment.id));
+};
 function isDisplayMode(value) {
 	return typeof value === "string" && DISPLAY_MODES.some((mode) => mode === value);
 }
@@ -12370,6 +12881,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	const [tablePropsOpen, setTablePropsOpen] = useState(false);
 	const [footnotePropsOpen, setFootnotePropsOpen] = useState(false);
 	const [showInsertSymbol, setShowInsertSymbol] = useState(false);
+	const [numberingValueDialogOpen, setNumberingValueDialogOpen] = useState(false);
 	const [rulerVisible, setRulerVisible] = useState(showRulerProp);
 	const toggleRuler = useCallback(() => setRulerVisible((visible) => !visible), []);
 	const [showOutline, setShowOutline] = useState(showOutlineProp);
@@ -12509,11 +13021,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			reportEditorViewReady(null);
 		};
 	}, [onEditorViewReady, reportEditorViewReady]);
+	const [bodyViewEpoch, setBodyViewEpoch] = useState(0);
+	const handleBodyViewReady = useCallback((view_2) => {
+		reportEditorViewReady(view_2);
+		setBodyViewEpoch((epoch) => epoch + 1);
+	}, [reportEditorViewReady]);
 	useEffect(() => {
 		if (!showOutline) return;
-		const view_2 = pagedEditorRef.current?.getView();
-		if (!view_2) return;
-		const headings = collectHeadings(view_2.state.doc, getDocumentBuiltInStyles(view_2.state));
+		const view_3 = pagedEditorRef.current?.getView();
+		if (!view_3) return;
+		const headings = collectHeadings(view_3.state.doc, getDocumentBuiltInStyles(view_3.state));
 		setHeadingInfos(headings);
 		let attempts = 0;
 		let timer = null;
@@ -12534,7 +13051,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		return () => {
 			if (timer) clearTimeout(timer);
 		};
-	}, [showOutline, history.state]);
+	}, [
+		showOutline,
+		history.state,
+		bodyViewEpoch
+	]);
 	const pagedEditorRef = useRef(null);
 	const hfEditorRef = useRef(null);
 	const containerRef = useRef(null);
@@ -12544,6 +13065,31 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	const editorContentRef = useRef(null);
 	const scrollContainerRef = useRef(null);
 	const initialScrollAppliedRef = useRef(false);
+	const [widestLaidOutPageWidth, setWidestLaidOutPageWidth] = useState(null);
+	const hasDocument = history.state !== null;
+	useEffect(() => {
+		const pagedEditor = pagedEditorRef.current;
+		if (!pagedEditor) {
+			setWidestLaidOutPageWidth(null);
+			return;
+		}
+		const updatePageWidth = () => {
+			const pages = pagedEditor.getLayout()?.pages;
+			if (!pages) {
+				setWidestLaidOutPageWidth(null);
+				return;
+			}
+			let width = 0;
+			for (const page_0 of pages) width = Math.max(width, page_0.size.w);
+			setWidestLaidOutPageWidth(width);
+		};
+		updatePageWidth();
+		return pagedEditor.getEditor().on("layoutComplete", updatePageWidth);
+	}, [
+		state.documentLoad.status,
+		hasDocument,
+		preserveDocumentWhileLoading
+	]);
 	const [formatPainterMode, setFormatPainterModeState] = useState("off");
 	const formatPainterModeRef = useRef("off");
 	const capturedFormatMarksRef = useRef(null);
@@ -12552,9 +13098,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		setFormatPainterModeState(next);
 	}, []);
 	const { contextMenu, openMenu: openContextMenu, closeMenu: closeContextMenu } = useContextMenu({ pagedEditorRef });
-	const toolbarWrapperRef = useRef(null);
-	const toolbarRoRef = useRef(null);
-	const [toolbarHeight, setToolbarHeight] = useState(0);
 	const historyStateRef = useRef(history.state);
 	historyStateRef.current = history.state;
 	const borderSpecRef = useRef({
@@ -12571,6 +13114,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		onCommentsChange
 	});
 	const documentOperationUndoEntriesRef = useRef([]);
+	const pendingSuggestionRegistryRef = useRef(new FolioPendingSuggestionRegistry());
 	const styleResolverCacheRef = useRef(null);
 	const getCachedStyleResolver = useCallback((styles) => {
 		const cached = styleResolverCacheRef.current;
@@ -12599,26 +13143,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		canUndo: false
 	});
 	const [activeNoteStory, setActiveNoteStory] = useState(null);
-	const toolbarRefCallback = useCallback((el) => {
-		toolbarWrapperRef.current = el;
-		if (toolbarRoRef.current) {
-			toolbarRoRef.current.disconnect();
-			toolbarRoRef.current = null;
-		}
-		if (!el) {
-			setToolbarHeight(0);
-			return;
-		}
-		setToolbarHeight(el.offsetHeight);
-		const ro = new ResizeObserver(() => {
-			setToolbarHeight(el.offsetHeight);
-		});
-		ro.observe(el);
-		toolbarRoRef.current = ro;
-	}, []);
-	useEffect(() => () => {
-		toolbarRoRef.current?.disconnect();
-	}, []);
 	const pushDocument = useCallback((document) => {
 		history.push(document);
 		return document;
@@ -12638,6 +13162,21 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	});
 	let activeHfRId = hfEditIsFirstPage ? activeFirstFooterRId : activeFooterRId;
 	if (hfEditPosition === "header") activeHfRId = hfEditIsFirstPage ? activeFirstHeaderRId : activeHeaderRId;
+	const panels = usePanelLayout({
+		pageWidth: (widestLaidOutPageWidth ?? getPageSize(effectiveSectionProperties).w) * zoom,
+		outline: showOutline && outlineHeadings.length > 1 ? "available" : "absent",
+		comments: showCommentsSidebar ? "open" : "closed",
+		scrollContainerRef
+	});
+	const { overlay: panelOverlay, setOverlay: setPanelOverlay, layoutWithCommentsOpen } = panels;
+	const commentsSurface = (() => {
+		if (panels.layout.comments === "column") return "column";
+		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 closePanelOverlay = useCallback(() => setPanelOverlay("none"), [setPanelOverlay]);
+	const toggleOutlineOverlay = useCallback(() => setPanelOverlay(panelOverlay === "outline" ? "none" : "outline"), [panelOverlay, setPanelOverlay]);
 	const getActiveEditorStory = useCallback(() => {
 		return resolveActiveEditorStory({
 			bodyView: pagedEditorRef.current?.getView() ?? null,
@@ -12698,7 +13237,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			}
 			commentsDirtyRef.current = false;
 			commentsLoadedRef.current = false;
-			trackedChangesLoadedRef.current = false;
 			setComments([]);
 			setTrackedChanges([]);
 			setVisibleCommentAuthors(null);
@@ -12741,27 +13279,15 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			}));
 		}, [])
 	});
-	const trackedChangesLoadedRef = useRef(false);
 	useEffect(() => {
 		if (state.documentLoad.status === "ready" && history.state) {
-			const timer_0 = setTimeout(() => {
-				extractTrackedChanges();
-				if (!trackedChangesLoadedRef.current) {
-					trackedChangesLoadedRef.current = true;
-					setTrackedChanges((prev_1) => {
-						if (autoOpenReviewSidebar && prev_1.length > 0) setShowCommentsSidebar(true);
-						return prev_1;
-					});
-				}
-			}, 200);
+			const timer_0 = setTimeout(extractTrackedChanges, 200);
 			return () => clearTimeout(timer_0);
 		}
 	}, [
 		state.documentLoad.status,
 		history.state,
-		extractTrackedChanges,
-		autoOpenReviewSidebar,
-		setShowCommentsSidebar
+		extractTrackedChanges
 	]);
 	useEffect(() => {
 		if (initialScrollTop === void 0 || state.documentLoad.status !== "ready" || initialScrollAppliedRef.current) return;
@@ -12783,8 +13309,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		});
 	}, [onFontsLoadedCallback]);
 	useEffect(() => {
-		const view_3 = pagedEditorRef.current?.getView();
-		if (view_3) setSuggestionMode(editingMode === "suggesting", view_3.state, view_3.dispatch, author);
+		const view_4 = pagedEditorRef.current?.getView();
+		if (view_4) setSuggestionMode(editingMode === "suggesting", view_4.state, view_4.dispatch, author);
 	}, [editingMode, author]);
 	const handleDocumentChange = useCallback((newDocument) => {
 		const currentComments = commentsRef.current;
@@ -12803,9 +13329,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		if (showOutlineRef.current) {
 			if (collectHeadingsTimerRef.current) clearTimeout(collectHeadingsTimerRef.current);
 			collectHeadingsTimerRef.current = setTimeout(() => {
-				const view_4 = pagedEditorRef.current?.getView();
-				if (view_4) {
-					const headings_0 = collectHeadings(view_4.state.doc, getDocumentBuiltInStyles(view_4.state));
+				const view_5 = pagedEditorRef.current?.getView();
+				if (view_5) {
+					const headings_0 = collectHeadings(view_5.state.doc, getDocumentBuiltInStyles(view_5.state));
 					const pagedRef_0 = pagedEditorRef.current;
 					for (const heading_0 of headings_0) heading_0.pageNumber = pagedRef_0?.getPageNumberForPmPos(heading_0.pmPos) ?? null;
 					setHeadingInfos(headings_0);
@@ -12828,6 +13354,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		const pmDoc = pagedEditorRef.current?.getDocument();
 		if (pmDoc) {
 			doc_0.package.document.content = pmDoc.package.document.content;
+			if (pmDoc.package.numbering) doc_0.package.numbering = pmDoc.package.numbering;
+			else delete doc_0.package.numbering;
 			if (pmDoc.package.footnotes !== void 0) doc_0.package.footnotes = pmDoc.package.footnotes;
 			if (pmDoc.package.endnotes !== void 0) doc_0.package.endnotes = pmDoc.package.endnotes;
 		} else doc_0 = normalizeBaseDirection(doc_0);
@@ -12836,8 +13364,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			const flushBag = (bag) => {
 				if (!bag) return;
 				for (const [rId_0, hf] of bag) {
-					const view_5 = editor.getHfView(rId_0);
-					if (view_5) hf.content = proseDocToBlocks(view_5.state.doc, hf.content);
+					const view_6 = editor.getHfView(rId_0);
+					if (view_6) hf.content = proseDocToBlocks(view_6.state.doc, hf.content);
 				}
 			};
 			flushBag(doc_0.package.headers);
@@ -12869,9 +13397,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		findReplace,
 		selectMatch: useCallback((match) => {
 			const editor_0 = pagedEditorRef.current;
-			const view_6 = editor_0?.getView();
-			if (!editor_0 || !view_6) return false;
-			const range = resolveFindMatchRange(view_6.state.doc, match);
+			const view_7 = editor_0?.getView();
+			if (!editor_0 || !view_7) return false;
+			const range = resolveFindMatchRange(view_7.state.doc, match);
 			if (!range) return false;
 			editor_0.setSelection(range.from, range.to);
 			requestAnimationFrame(() => {
@@ -12881,17 +13409,17 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		}, [])
 	});
 	const handleSelectionChange = useCallback((selectionState) => {
-		const view_7 = getActiveEditorView();
-		if (view_7) {
-			const { from, to } = view_7.state.selection;
+		const view_8 = getActiveEditorView();
+		if (view_8) {
+			const { from, to } = view_8.state.selection;
 			lastSelectionRef.current = {
 				from,
 				to
 			};
 		}
 		let pmTableCtx = null;
-		if (view_7) {
-			pmTableCtx = getTableContext(view_7.state);
+		if (view_8) {
+			pmTableCtx = getTableContext(view_8.state);
 			if (!pmTableCtx.isInTable) pmTableCtx = null;
 		}
 		if (pmTableCtx?.cellBorderColor) {
@@ -12903,18 +13431,18 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				color: { rgb }
 			};
 		}
-		const pmImageCtx = view_7 ? detectImageContext(view_7.state) : null;
-		const trackedChange = view_7 ? detectActiveTrackedChange(view_7.state) : null;
+		const pmImageCtx = view_8 ? detectImageContext(view_8.state) : null;
+		const trackedChange = view_8 ? detectActiveTrackedChange(view_8.state) : null;
 		if (!selectionState) {
 			setFloatingCommentBtn(null);
-			setState((prev_2) => {
-				const selectionFormatting = areSelectionFormattingEqual(prev_2.selectionFormatting, EMPTY_SELECTION_FORMATTING) ? prev_2.selectionFormatting : EMPTY_SELECTION_FORMATTING;
-				const pmTableContext = areTableContextsEqual(prev_2.pmTableContext, pmTableCtx) ? prev_2.pmTableContext : pmTableCtx;
-				const pmImageContext = areImageContextsEqual(prev_2.pmImageContext, pmImageCtx) ? prev_2.pmImageContext : pmImageCtx;
-				const activeTrackedChange = areActiveTrackedChangesEqual(prev_2.activeTrackedChange, trackedChange) ? prev_2.activeTrackedChange : trackedChange;
-				if (selectionFormatting === prev_2.selectionFormatting && pmTableContext === prev_2.pmTableContext && pmImageContext === prev_2.pmImageContext && activeTrackedChange === prev_2.activeTrackedChange) return prev_2;
+			setState((prev_1) => {
+				const selectionFormatting = areSelectionFormattingEqual(prev_1.selectionFormatting, EMPTY_SELECTION_FORMATTING) ? prev_1.selectionFormatting : EMPTY_SELECTION_FORMATTING;
+				const pmTableContext = areTableContextsEqual(prev_1.pmTableContext, pmTableCtx) ? prev_1.pmTableContext : pmTableCtx;
+				const pmImageContext = areImageContextsEqual(prev_1.pmImageContext, pmImageCtx) ? prev_1.pmImageContext : pmImageCtx;
+				const activeTrackedChange = areActiveTrackedChangesEqual(prev_1.activeTrackedChange, trackedChange) ? prev_1.activeTrackedChange : trackedChange;
+				if (selectionFormatting === prev_1.selectionFormatting && pmTableContext === prev_1.pmTableContext && pmImageContext === prev_1.pmImageContext && activeTrackedChange === prev_1.activeTrackedChange) return prev_1;
 				return {
-					...prev_2,
+					...prev_1,
 					selectionFormatting,
 					pmTableContext,
 					pmImageContext,
@@ -12943,19 +13471,19 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			textColor,
 			listState: selectionState.listState
 		});
-		setState((prev_3) => {
-			const selectionFormatting_0 = areSelectionFormattingEqual(prev_3.selectionFormatting, formatting) ? prev_3.selectionFormatting : formatting;
-			const pmTableContext_0 = areTableContextsEqual(prev_3.pmTableContext, pmTableCtx) ? prev_3.pmTableContext : pmTableCtx;
-			const pmImageContext_0 = areImageContextsEqual(prev_3.pmImageContext, pmImageCtx) ? prev_3.pmImageContext : pmImageCtx;
-			const activeTrackedChange_0 = areActiveTrackedChangesEqual(prev_3.activeTrackedChange, trackedChange) ? prev_3.activeTrackedChange : trackedChange;
+		setState((prev_2) => {
+			const selectionFormatting_0 = areSelectionFormattingEqual(prev_2.selectionFormatting, formatting) ? prev_2.selectionFormatting : formatting;
+			const pmTableContext_0 = areTableContextsEqual(prev_2.pmTableContext, pmTableCtx) ? prev_2.pmTableContext : pmTableCtx;
+			const pmImageContext_0 = areImageContextsEqual(prev_2.pmImageContext, pmImageCtx) ? prev_2.pmImageContext : pmImageCtx;
+			const activeTrackedChange_0 = areActiveTrackedChangesEqual(prev_2.activeTrackedChange, trackedChange) ? prev_2.activeTrackedChange : trackedChange;
 			const paragraphIndentLeft = paragraphFormatting.indentLeft ?? 0;
 			const paragraphIndentRight = paragraphFormatting.indentRight ?? 0;
 			const paragraphFirstLineIndent = paragraphFormatting.indentFirstLine ?? 0;
 			const paragraphHangingIndent = paragraphFormatting.hangingIndent ?? false;
 			const paragraphTabs = paragraphFormatting.tabs ?? null;
-			if (selectionFormatting_0 === prev_3.selectionFormatting && pmTableContext_0 === prev_3.pmTableContext && pmImageContext_0 === prev_3.pmImageContext && activeTrackedChange_0 === prev_3.activeTrackedChange && paragraphIndentLeft === prev_3.paragraphIndentLeft && paragraphIndentRight === prev_3.paragraphIndentRight && paragraphFirstLineIndent === prev_3.paragraphFirstLineIndent && paragraphHangingIndent === prev_3.paragraphHangingIndent && paragraphTabs === prev_3.paragraphTabs) return prev_3;
+			if (selectionFormatting_0 === prev_2.selectionFormatting && pmTableContext_0 === prev_2.pmTableContext && pmImageContext_0 === prev_2.pmImageContext && activeTrackedChange_0 === prev_2.activeTrackedChange && paragraphIndentLeft === prev_2.paragraphIndentLeft && paragraphIndentRight === prev_2.paragraphIndentRight && paragraphFirstLineIndent === prev_2.paragraphFirstLineIndent && paragraphHangingIndent === prev_2.paragraphHangingIndent && paragraphTabs === prev_2.paragraphTabs) return prev_2;
 			return {
-				...prev_3,
+				...prev_2,
 				selectionFormatting: selectionFormatting_0,
 				paragraphIndentLeft,
 				paragraphIndentRight,
@@ -12967,10 +13495,10 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				activeTrackedChange: activeTrackedChange_0
 			};
 		});
-		if (view_7 && selectionState.hasSelection && !isAddingComment && !readOnly) {
+		if (view_8 && selectionState.hasSelection && !isAddingComment && !readOnly) {
 			const container = scrollContainerRef.current;
 			const parentEl = editorContentRef.current;
-			const { from: selFrom } = view_7.state.selection;
+			const { from: selFrom } = view_8.state.selection;
 			const top = findSelectionYPosition(container, parentEl, selFrom);
 			if (top !== null && container && parentEl) {
 				const pagesEl = container.querySelector(".paged-editor__pages");
@@ -12978,7 +13506,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_7.state.selection;
+				const { from: from_0, to: to_0 } = view_8.state.selection;
 				if (from_0 !== to_0) setFloatingCommentBtn({
 					top,
 					left,
@@ -13008,8 +13536,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			onPrint();
 			return;
 		}
-		const pages = containerRef.current?.querySelector(".paged-editor__pages");
-		if (!pages) {
+		const pages_0 = containerRef.current?.querySelector(".paged-editor__pages");
+		if (!pages_0) {
 			toast(t("printRedirect"));
 			return;
 		}
@@ -13029,7 +13557,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			return;
 		}
 		const styles_0 = [...document.querySelectorAll("style, link[rel=\"stylesheet\"]")].map((node_0) => node_0.outerHTML).join("\n");
-		const pagesCloneRaw = pages.cloneNode(true);
+		const pagesCloneRaw = pages_0.cloneNode(true);
 		if (!(pagesCloneRaw instanceof HTMLElement)) return;
 		const pagesClone = pagesCloneRaw;
 		const overlays = pagesClone.querySelectorAll(".selection-overlay, .layout-selection-overlay, .image-selection-overlay");
@@ -13127,98 +13655,98 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		});
 	}, [history, pushDocument]);
 	const handleTableAction = useCallback((action_0) => {
-		const view_8 = getActiveEditorView();
-		if (!view_8) return;
+		const view_9 = getActiveEditorView();
+		if (!view_9) return;
 		switch (action_0) {
 			case "addRowAbove":
-				addRowAbove(view_8.state, view_8.dispatch);
+				addRowAbove(view_9.state, view_9.dispatch);
 				break;
 			case "addRowBelow":
-				addRowBelow(view_8.state, view_8.dispatch);
+				addRowBelow(view_9.state, view_9.dispatch);
 				break;
 			case "addColumnLeft":
-				addColumnLeft(view_8.state, view_8.dispatch);
+				addColumnLeft(view_9.state, view_9.dispatch);
 				break;
 			case "addColumnRight":
-				addColumnRight(view_8.state, view_8.dispatch);
+				addColumnRight(view_9.state, view_9.dispatch);
 				break;
 			case "deleteRow":
-				deleteRow(view_8.state, view_8.dispatch);
+				deleteRow(view_9.state, view_9.dispatch);
 				break;
 			case "deleteColumn":
-				deleteColumn(view_8.state, view_8.dispatch);
+				deleteColumn(view_9.state, view_9.dispatch);
 				break;
 			case "deleteTable":
-				deleteTable(view_8.state, view_8.dispatch);
+				deleteTable(view_9.state, view_9.dispatch);
 				break;
 			case "selectTable":
-				selectTable(view_8.state, view_8.dispatch);
+				selectTable(view_9.state, view_9.dispatch);
 				break;
 			case "selectRow":
-				selectRow(view_8.state, view_8.dispatch);
+				selectRow(view_9.state, view_9.dispatch);
 				break;
 			case "selectColumn":
-				selectColumn(view_8.state, view_8.dispatch);
+				selectColumn(view_9.state, view_9.dispatch);
 				break;
 			case "mergeCells":
-				mergeCells(view_8.state, view_8.dispatch);
+				mergeCells(view_9.state, view_9.dispatch);
 				break;
 			case "splitCell":
-				splitCell(view_8.state, view_8.dispatch);
+				splitCell(view_9.state, view_9.dispatch);
 				break;
 			case "borderAll":
-				setAllTableBorders(view_8.state, view_8.dispatch, borderSpecRef.current);
+				setAllTableBorders(view_9.state, view_9.dispatch, borderSpecRef.current);
 				break;
 			case "borderOutside":
-				setOutsideTableBorders(view_8.state, view_8.dispatch, borderSpecRef.current);
+				setOutsideTableBorders(view_9.state, view_9.dispatch, borderSpecRef.current);
 				break;
 			case "borderInside":
-				setInsideTableBorders(view_8.state, view_8.dispatch, borderSpecRef.current);
+				setInsideTableBorders(view_9.state, view_9.dispatch, borderSpecRef.current);
 				break;
 			case "borderNone":
-				removeTableBorders(view_8.state, view_8.dispatch);
+				removeTableBorders(view_9.state, view_9.dispatch);
 				break;
 			case "borderTop":
-				setCellBorder("top", borderSpecRef.current, true)(view_8.state, view_8.dispatch);
+				setCellBorder("top", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
 				break;
 			case "borderBottom":
-				setCellBorder("bottom", borderSpecRef.current, true)(view_8.state, view_8.dispatch);
+				setCellBorder("bottom", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
 				break;
 			case "borderLeft":
-				setCellBorder("left", borderSpecRef.current, true)(view_8.state, view_8.dispatch);
+				setCellBorder("left", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
 				break;
 			case "borderRight":
-				setCellBorder("right", borderSpecRef.current, true)(view_8.state, view_8.dispatch);
+				setCellBorder("right", borderSpecRef.current, true)(view_9.state, view_9.dispatch);
 				break;
-			default: if (typeof action_0 === "object") if (action_0.type === "cellFillColor") setCellFillColor(action_0.color)(view_8.state, view_8.dispatch);
+			default: if (typeof action_0 === "object") if (action_0.type === "cellFillColor") setCellFillColor(action_0.color)(view_9.state, view_9.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_8.state, view_8.dispatch);
+				setTableBorderColor(action_0.color)(view_9.state, view_9.dispatch);
 			} else if (action_0.type === "borderWidth") {
 				borderSpecRef.current = {
 					...borderSpecRef.current,
 					size: action_0.size
 				};
-				setTableBorderWidth(action_0.size)(view_8.state, view_8.dispatch);
+				setTableBorderWidth(action_0.size)(view_9.state, view_9.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_8.state, view_8.dispatch);
-			else if (action_0.type === "cellVerticalAlign") setCellVerticalAlign(action_0.align)(view_8.state, view_8.dispatch);
-			else if (action_0.type === "cellMargins") setCellMargins(action_0.margins)(view_8.state, view_8.dispatch);
-			else if (action_0.type === "cellTextDirection") setCellTextDirection(action_0.direction)(view_8.state, view_8.dispatch);
-			else if (action_0.type === "toggleNoWrap") toggleNoWrap()(view_8.state, view_8.dispatch);
-			else if (action_0.type === "rowHeight") setRowHeight(action_0.height, action_0.rule)(view_8.state, view_8.dispatch);
-			else if (action_0.type === "toggleHeaderRow") toggleHeaderRow()(view_8.state, view_8.dispatch);
-			else if (action_0.type === "distributeColumns") distributeColumns()(view_8.state, view_8.dispatch);
-			else if (action_0.type === "autoFitContents") autoFitContents()(view_8.state, view_8.dispatch);
+			})(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);
 			else if (action_0.type === "openTableProperties") setTablePropsOpen(true);
-			else if (action_0.type === "tableProperties") setTableProperties(action_0.props)(view_8.state, view_8.dispatch);
+			else if (action_0.type === "tableProperties") setTableProperties(action_0.props)(view_9.state, view_9.dispatch);
 			else {
 				let preset = getBuiltinTableStyle(action_0.styleId);
 				const currentDocForTable = historyStateRef.current;
@@ -13289,7 +13817,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_8.state, view_8.dispatch);
+					applyTableStyle(styleArg)(view_9.state, view_9.dispatch);
 				}
 			}
 			else tableSelection.handleAction(action_0);
@@ -13310,80 +13838,80 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		});
 	}, [openContextMenu]);
 	const handleFormat = useCallback((action_1) => {
-		const view_9 = getActiveEditorView();
-		if (!view_9) return;
-		view_9.focus();
-		const isBodyEditor = view_9 === pagedEditorRef.current?.getView();
-		const { from: from_1, to: to_1 } = view_9.state.selection;
+		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 savedSelection = lastSelectionRef.current;
 		if (isBodyEditor && savedSelection && (from_1 !== savedSelection.from || to_1 !== savedSelection.to)) try {
-			const tr = view_9.state.tr.setSelection(TextSelection.create(view_9.state.doc, savedSelection.from, savedSelection.to));
-			view_9.dispatch(tr);
+			const tr = view_10.state.tr.setSelection(TextSelection.create(view_10.state.doc, savedSelection.from, savedSelection.to));
+			view_10.dispatch(tr);
 		} catch {}
-		const commandState = view_9.state;
+		const commandState = view_10.state;
 		if (action_1 === "bold") {
-			toggleBold(commandState, view_9.dispatch);
+			toggleBold(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "italic") {
-			toggleItalic(commandState, view_9.dispatch);
+			toggleItalic(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "underline") {
-			toggleUnderline(commandState, view_9.dispatch);
+			toggleUnderline(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "strikethrough") {
-			toggleStrike(commandState, view_9.dispatch);
+			toggleStrike(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "superscript") {
-			toggleSuperscript(commandState, view_9.dispatch);
+			toggleSuperscript(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "subscript") {
-			toggleSubscript(commandState, view_9.dispatch);
+			toggleSubscript(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "bulletList") {
-			toggleBulletList(commandState, view_9.dispatch);
+			toggleBulletList(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "numberedList") {
-			toggleNumberedList(commandState, view_9.dispatch);
+			toggleNumberedList(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "indent") {
-			if (!increaseListLevel(commandState, view_9.dispatch)) increaseIndent()(commandState, view_9.dispatch);
+			if (!increaseListLevel(commandState, view_10.dispatch)) increaseIndent()(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "outdent") {
-			if (!decreaseListLevel(commandState, view_9.dispatch)) decreaseIndent()(commandState, view_9.dispatch);
+			if (!decreaseListLevel(commandState, view_10.dispatch)) decreaseIndent()(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "clearFormatting") {
-			clearFormatting(commandState, view_9.dispatch);
+			clearFormatting(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "setRtl") {
-			setRtl(commandState, view_9.dispatch);
+			setRtl(commandState, view_10.dispatch);
 			return;
 		}
 		if (action_1 === "setLtr") {
-			setLtr(commandState, view_9.dispatch);
+			setLtr(commandState, view_10.dispatch);
 			return;
 		}
 		if (typeof action_1 === "object") switch (action_1.type) {
 			case "alignment":
-				setAlignment(action_1.value)(commandState, view_9.dispatch);
+				setAlignment(action_1.value)(commandState, view_10.dispatch);
 				break;
 			case "toggleDirection":
-				toggleBidi(commandState, view_9.dispatch);
+				toggleBidi(commandState, view_10.dispatch);
 				break;
 			case "textColor": {
 				const colorVal_0 = action_1.value;
-				if (typeof colorVal_0 === "string") setTextColor({ rgb: colorVal_0.replace("#", "") })(commandState, view_9.dispatch);
-				else if (colorVal_0.auto) clearTextColor(commandState, view_9.dispatch);
+				if (typeof colorVal_0 === "string") setTextColor({ rgb: colorVal_0.replace("#", "") })(commandState, view_10.dispatch);
+				else if (colorVal_0.auto) clearTextColor(commandState, view_10.dispatch);
 				else {
 					const themeColor = typeof colorVal_0.themeColor === "string" ? colorVal_0.themeColor : void 0;
 					setTextColor({
@@ -13391,21 +13919,21 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 						...themeColor ? { themeColor } : {},
 						...colorVal_0.themeTint === void 0 ? {} : { themeTint: colorVal_0.themeTint },
 						...colorVal_0.themeShade === void 0 ? {} : { themeShade: colorVal_0.themeShade }
-					})(commandState, view_9.dispatch);
+					})(commandState, view_10.dispatch);
 				}
 				break;
 			}
 			case "highlightColor":
-				setHighlight((action_1.value ? mapHexToHighlightName(action_1.value) : "") || action_1.value)(commandState, view_9.dispatch);
+				setHighlight((action_1.value ? mapHexToHighlightName(action_1.value) : "") || action_1.value)(commandState, view_10.dispatch);
 				break;
 			case "fontSize":
-				setFontSize(pointsToHalfPoints(action_1.value))(commandState, view_9.dispatch);
+				setFontSize(pointsToHalfPoints(action_1.value))(commandState, view_10.dispatch);
 				break;
 			case "fontFamily":
-				setFontFamily(action_1.value)(commandState, view_9.dispatch);
+				setFontFamily(action_1.value)(commandState, view_10.dispatch);
 				break;
 			case "lineSpacing":
-				setLineSpacing(action_1.value)(commandState, view_9.dispatch);
+				setLineSpacing(action_1.value)(commandState, view_10.dispatch);
 				break;
 			case "applyStyle": {
 				const currentDoc_0 = historyStateRef.current;
@@ -13418,22 +13946,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;
-					applyStyle(action_1.value, styleAttrs)(commandState, view_9.dispatch);
-				} else applyStyle(action_1.value)(commandState, view_9.dispatch);
+					applyStyle(action_1.value, styleAttrs)(commandState, view_10.dispatch);
+				} else applyStyle(action_1.value)(commandState, view_10.dispatch);
 				break;
 			}
 			default: break;
 		}
 	}, [getActiveEditorView, getCachedStyleResolver]);
 	const captureFormatPainter = useCallback(() => {
-		const view_10 = getActiveEditorView();
-		capturedFormatMarksRef.current = view_10 ? captureFormatMarks(view_10.state) : null;
+		const view_11 = getActiveEditorView();
+		capturedFormatMarksRef.current = view_11 ? captureFormatMarks(view_11.state) : null;
 	}, [getActiveEditorView]);
 	const paintFormatToSelection = useCallback(() => {
-		const view_11 = getActiveEditorView();
-		if (!view_11) return false;
-		const applied = applyFormatMarks(capturedFormatMarksRef.current)(view_11.state, view_11.dispatch);
-		if (applied) requestAnimationFrame(() => view_11.focus());
+		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());
 		return applied;
 	}, [getActiveEditorView]);
 	const handleFormatPainter = useCallback((sticky) => {
@@ -13583,6 +14111,18 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			label: t("rejectChange"),
 			dividerAfter: true
 		});
+		if (contextMenu.listNumbering.type === "listItem") items.push({
+			action: "restartNumbering",
+			label: t("contextMenu.restartNumbering")
+		}, {
+			action: "continueNumbering",
+			label: t("contextMenu.continueNumbering"),
+			disabled: !contextMenu.listNumbering.canContinue
+		}, {
+			action: "setNumberingValue",
+			label: t("contextMenu.setNumberingValue"),
+			dividerAfter: true
+		});
 		items.push({
 			action: "selectAll",
 			label: t("selectAll"),
@@ -13593,17 +14133,18 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		contextMenu.hasSelection,
 		contextMenu.cursorInTable,
 		contextMenu.cursorInTrackedChange,
+		contextMenu.listNumbering,
 		customContextMenuItems,
 		readOnly,
 		t
 	]);
 	const handleContextMenuAction = useCallback(async (action_2) => {
-		const view_12 = getActiveEditorView();
-		if (!view_12) return;
+		const view_13 = getActiveEditorView();
+		if (!view_13) 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_12.state.selection;
+			const { from: from_2, to: to_2 } = contextMenu.selectionRange.from !== contextMenu.selectionRange.to ? contextMenu.selectionRange : view_13.state.selection;
 			onCustomContextAction?.(action_2.slice(7), {
 				from: from_2,
 				to: to_2
@@ -13613,16 +14154,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_12.state.selection;
-				const text_2 = view_12.state.doc.textBetween(from_7, to_7, "\n");
+				const { from: from_7, to: to_7 } = view_13.state.selection;
+				const text_2 = view_13.state.doc.textBetween(from_7, to_7, "\n");
 				navigator.clipboard.writeText(text_2).catch(() => void 0);
-				view_12.dispatch(view_12.state.tr.deleteSelection());
+				if (!deleteSelectionAsSuggestion(view_13.state, view_13.dispatch)) view_13.dispatch(view_13.state.tr.deleteSelection());
 				onCut?.();
 				break;
 			}
 			case "copy": {
-				const { from: cf, to: ct } = view_12.state.selection;
-				const copied = view_12.state.doc.textBetween(cf, ct, "\n");
+				const { from: cf, to: ct } = view_13.state.selection;
+				const copied = view_13.state.doc.textBetween(cf, ct, "\n");
 				navigator.clipboard.writeText(copied).catch(() => void 0);
 				onCopy?.();
 				break;
@@ -13645,12 +14186,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 						bubbles: true,
 						cancelable: true
 					});
-					view_12.dom.dispatchEvent(pasteEvent);
+					view_13.dom.dispatchEvent(pasteEvent);
 				} catch {
 					try {
 						const text_0 = await navigator.clipboard.readText();
 						if (text_0) {
-							view_12.dispatch(view_12.state.tr.insertText(text_0));
+							view_13.dispatch(view_13.state.tr.insertText(text_0));
 							onPaste?.();
 						}
 					} catch {}
@@ -13659,9 +14200,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			case "pasteAsPlainText":
 				try {
 					const text = await navigator.clipboard.readText();
-					if (text && !view_12.isDestroyed) {
-						const slice = buildPlainTextSlice(text, view_12.state.schema);
-						view_12.dispatch(view_12.state.tr.replaceSelection(slice).scrollIntoView());
+					if (text && !view_13.isDestroyed) {
+						const slice = buildPlainTextSlice(text, view_13.state.schema);
+						view_13.dispatch(view_13.state.tr.replaceSelection(slice).scrollIntoView());
 						onPaste?.();
 					}
 				} catch {
@@ -13669,46 +14210,46 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				}
 				break;
 			case "delete": {
-				const { from: from_6, to: to_6 } = view_12.state.selection;
-				if (from_6 !== to_6) view_12.dispatch(view_12.state.tr.deleteRange(from_6, to_6));
+				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));
 				break;
 			}
 			case "selectAll":
-				view_12.dispatch(view_12.state.tr.setSelection(TextSelection.create(view_12.state.doc, 0, view_12.state.doc.content.size)));
+				view_13.dispatch(view_13.state.tr.setSelection(TextSelection.create(view_13.state.doc, 0, view_13.state.doc.content.size)));
 				break;
 			case "addRowAbove":
-				addRowAbove(view_12.state, view_12.dispatch);
+				addRowAbove(view_13.state, view_13.dispatch);
 				break;
 			case "addRowBelow":
-				addRowBelow(view_12.state, view_12.dispatch);
+				addRowBelow(view_13.state, view_13.dispatch);
 				break;
 			case "deleteRow":
-				deleteRow(view_12.state, view_12.dispatch);
+				deleteRow(view_13.state, view_13.dispatch);
 				break;
 			case "addColumnLeft":
-				addColumnLeft(view_12.state, view_12.dispatch);
+				addColumnLeft(view_13.state, view_13.dispatch);
 				break;
 			case "addColumnRight":
-				addColumnRight(view_12.state, view_12.dispatch);
+				addColumnRight(view_13.state, view_13.dispatch);
 				break;
 			case "deleteColumn":
-				deleteColumn(view_12.state, view_12.dispatch);
+				deleteColumn(view_13.state, view_13.dispatch);
 				break;
 			case "tableBordersAll":
-				setTableBorderPreset("all")(view_12.state, view_12.dispatch);
+				setTableBorderPreset("all")(view_13.state, view_13.dispatch);
 				break;
 			case "tableBordersNone":
-				setTableBorderPreset("none")(view_12.state, view_12.dispatch);
+				setTableBorderPreset("none")(view_13.state, view_13.dispatch);
 				break;
 			case "addComment": {
-				const { from: from_5, to: to_5 } = contextMenu.selectionRange.from !== contextMenu.selectionRange.to ? contextMenu.selectionRange : view_12.state.selection;
+				const { from: from_5, to: to_5 } = contextMenu.selectionRange.from !== contextMenu.selectionRange.to ? contextMenu.selectionRange : view_13.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_12, {
+				if (!applyCommentMarkRange(view_13, {
 					from: from_5,
 					to: to_5
 				}, -1, { selectEnd: true })) break;
@@ -13719,17 +14260,26 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				break;
 			}
 			case "acceptChange": {
-				const { from: from_4, to: to_4 } = view_12.state.selection;
-				const range_1 = findChangeAtPosition(view_12.state, from_4, to_4);
-				acceptChange(range_1.from, range_1.to)(view_12.state, view_12.dispatch);
+				const { from: from_4, to: to_4 } = view_13.state.selection;
+				const range_1 = findChangeAtPosition(view_13.state, from_4, to_4);
+				acceptChange(range_1.from, range_1.to)(view_13.state, view_13.dispatch);
 				break;
 			}
 			case "rejectChange": {
-				const { from: from_3, to: to_3 } = view_12.state.selection;
-				const range_0 = findChangeAtPosition(view_12.state, from_3, to_3);
-				rejectChange(range_0.from, range_0.to)(view_12.state, view_12.dispatch);
+				const { from: from_3, to: to_3 } = view_13.state.selection;
+				const range_0 = findChangeAtPosition(view_13.state, from_3, to_3);
+				rejectChange(range_0.from, range_0.to)(view_13.state, view_13.dispatch);
 				break;
 			}
+			case "restartNumbering":
+				restartNumbering(view_13.state, view_13.dispatch);
+				break;
+			case "continueNumbering":
+				continueNumbering(view_13.state, view_13.dispatch);
+				break;
+			case "setNumberingValue":
+				setNumberingValueDialogOpen(true);
+				break;
 			case "separator": break;
 		}
 	}, [
@@ -13775,25 +14325,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_13 = getActiveEditorView();
-		if (!view_13) return;
-		setIndentLeft(twips_3)(view_13.state, view_13.dispatch);
-	}, [getActiveEditorView]);
-	const handleIndentRightChange = useCallback((twips_4) => {
 		const view_14 = getActiveEditorView();
 		if (!view_14) return;
-		setIndentRight(twips_4)(view_14.state, view_14.dispatch);
+		setIndentLeft(twips_3)(view_14.state, view_14.dispatch);
 	}, [getActiveEditorView]);
-	const handleFirstLineIndentChange = useCallback((twips_5) => {
+	const handleIndentRightChange = useCallback((twips_4) => {
 		const view_15 = getActiveEditorView();
 		if (!view_15) return;
-		if (twips_5 < 0) setIndentFirstLine(-twips_5, true)(view_15.state, view_15.dispatch);
-		else setIndentFirstLine(twips_5, false)(view_15.state, view_15.dispatch);
+		setIndentRight(twips_4)(view_15.state, view_15.dispatch);
 	}, [getActiveEditorView]);
-	const handleTabStopRemove = useCallback((positionTwips) => {
+	const handleFirstLineIndentChange = useCallback((twips_5) => {
 		const view_16 = getActiveEditorView();
 		if (!view_16) return;
-		removeTabStop(positionTwips)(view_16.state, view_16.dispatch);
+		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);
+	}, [getActiveEditorView]);
+	const handleTabStopRemove = useCallback((positionTwips) => {
+		const view_17 = getActiveEditorView();
+		if (!view_17) return;
+		removeTabStop(positionTwips)(view_17.state, view_17.dispatch);
 	}, [getActiveEditorView]);
 	const serializeCurrentDocx = useCallback(async (options) => {
 		let tripwireResult = null;
@@ -13805,11 +14355,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			const flags = resolveSelectiveSaveFlags(featureFlags);
 			const useSelectiveForSave = flags.selectiveSave && options?.mode !== FOLIO_DOCX_SERIALIZATION_MODE.full;
 			const shouldAttemptSelective = useSelectiveForSave || flags.selectiveSaveTripwire;
-			const view_17 = pagedEditorRef.current?.getView();
+			const view_18 = pagedEditorRef.current?.getView();
 			const baselineBuffer = originalBufferRef.current;
 			let selectiveBuffer = null;
-			if (shouldAttemptSelective && view_17 && baselineBuffer) {
-				const editorState = view_17.state;
+			if (shouldAttemptSelective && view_18 && baselineBuffer) {
+				const editorState = view_18.state;
 				selectiveBuffer = await (await loadAttemptSelectiveSave())(doc_1, baselineBuffer, {
 					changedParaIds: getChangedParagraphIds(editorState),
 					structuralChange: hasStructuralChanges(editorState),
@@ -13823,19 +14373,28 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				...doc_1,
 				originalBuffer: baselineBuffer
 			} : doc_1;
+			const repackFull = async () => {
+				const repackDocx = await loadRepackDocx();
+				const repack = () => repackDocx(repackSourceDoc);
+				return view_18 ? repackWithEditorSectionRemovals({
+					state: view_18.state,
+					document: repackSourceDoc,
+					repack
+				}) : repack();
+			};
 			if (!buffer) {
-				fullBuffer = await (await loadRepackDocx())(repackSourceDoc);
+				fullBuffer = await repackFull();
 				buffer = fullBuffer;
 			} else if (flags.selectiveSaveTripwire) try {
-				fullBuffer = await (await loadRepackDocx())(repackSourceDoc);
+				fullBuffer = await repackFull();
 			} catch {}
 			if (flags.selectiveSaveTripwire && fullBuffer && onSelectiveSaveTripwire) try {
 				const { compareSelectiveVsFull } = await import("@stll/folio-core/docx/selectiveSaveTripwire");
 				tripwireResult = await compareSelectiveVsFull(selectiveBuffer, fullBuffer);
 			} catch {}
-			if (view_17) {
+			if (view_18) {
 				originalBufferRef.current = buffer;
-				view_17.dispatch(clearTrackedChanges(view_17.state));
+				view_18.dispatch(clearTrackedChanges(view_18.state));
 			}
 			savedBuffer = buffer;
 		} catch (error) {
@@ -13879,9 +14438,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	useImperativeHandle(ref, () => ({
 		getDocument: () => buildCurrentDocument(),
 		hasPendingChanges: () => {
-			const view_18 = pagedEditorRef.current?.getView();
-			if (!view_18) return false;
-			return commentsDirtyRef.current || getChangedParagraphIds(view_18.state).size > 0 || hasStructuralChanges(view_18.state) || hasUntrackedChanges(view_18.state);
+			const view_19 = pagedEditorRef.current?.getView();
+			if (!view_19) return false;
+			return commentsDirtyRef.current || getChangedParagraphIds(view_19.state).size > 0 || hasStructuralChanges(view_19.state) || hasUntrackedChanges(view_19.state);
 		},
 		getEditorRef: () => pagedEditorRef.current,
 		getEditor: () => pagedEditorRef.current?.getEditor() ?? null,
@@ -13906,6 +14465,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			findReplace.openReplace(readFindSelectionSeed());
 		},
 		loadDocument: (document_0) => {
+			pendingSuggestionRegistryRef.current.clear();
 			const editor_2 = pagedEditorRef.current?.getEditor();
 			if (editor_2) {
 				editor_2.loadDocument(document_0);
@@ -13913,18 +14473,21 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			}
 			loadParsedDocument(document_0);
 		},
-		loadDocumentBuffer: (buffer_1) => pagedEditorRef.current?.getEditor().loadDocx(buffer_1) ?? loadBuffer(buffer_1),
+		loadDocumentBuffer: (buffer_1) => {
+			pendingSuggestionRegistryRef.current.clear();
+			return pagedEditorRef.current?.getEditor().loadDocx(buffer_1) ?? loadBuffer(buffer_1);
+		},
 		ensureEditorView: (options_2) => {
 			pagedEditorRef.current?.ensureView(options_2);
 		},
 		createAIEditSnapshot: () => {
-			const view_19 = pagedEditorRef.current?.getView();
-			return view_19 ? createFolioAIEditSnapshot(view_19.state.doc) : null;
+			const view_20 = pagedEditorRef.current?.getView();
+			return view_20 ? createFolioAIEditSnapshot(view_20.state.doc) : null;
 		},
 		applyDocumentOperations: ({ snapshot, batch, author: operationAuthor = author }) => {
 			assertSupportedFolioDocumentOperationVersion(batch.version);
-			const view_20 = pagedEditorRef.current?.getView();
-			if (!view_20) {
+			const view_21 = pagedEditorRef.current?.getView();
+			if (!view_21) {
 				let status = "committed";
 				if (batch.dryRun === true) status = "previewed";
 				else if (batch.atomic === true) status = "rejected";
@@ -13943,16 +14506,17 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				};
 			}
 			const existingUndoEntry = documentOperationUndoEntriesRef.current.at(-1);
-			if (existingUndoEntry && (!view_20.state.doc.eq(existingUndoEntry.afterState.doc) || commentsRef.current !== existingUndoEntry.commentsAfter)) documentOperationUndoEntriesRef.current.length = 0;
+			if (existingUndoEntry && (!view_21.state.doc.eq(existingUndoEntry.afterState.doc) || commentsRef.current !== existingUndoEntry.commentsAfter)) documentOperationUndoEntriesRef.current.length = 0;
 			const commentsBefore = commentsRef.current;
 			const createdComments = [];
 			const operationView = {
-				state: view_20.state,
+				state: view_21.state,
 				dispatch: (transaction) => {
-					view_20.dispatch(closeHistory(transaction));
-					operationView.state = view_20.state;
+					view_21.dispatch(closeHistory(transaction));
+					operationView.state = view_21.state;
 				}
 			};
+			const activeSuggestionIds = new Set(getSuggestions(view_21.state).map((s_0) => s_0.suggestionId));
 			const result = applyFolioDocumentOperations({
 				view: operationView,
 				snapshot,
@@ -13968,10 +14532,19 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					id: `react-${String(documentOperationUndoHandleCursor++)}`
 				})
 			});
-			if (createdComments.length > 0) updateComments((currentComments_0) => [...currentComments_0, ...createdComments]);
+			if (batch.mode === "suggested" && result.status === "committed") pendingSuggestionRegistryRef.current.recordApplied({
+				snapshot,
+				story: { type: "main" },
+				operations: batch.operations,
+				applied: result.applied,
+				author: operationAuthor,
+				activeSuggestionIds
+			});
+			const batchComments = appliedOperationComments(createdComments, result.applied);
+			if (batchComments.length > 0) updateComments((currentComments_0) => [...currentComments_0, ...batchComments]);
 			if (result.undoHandle !== null) documentOperationUndoEntriesRef.current.push({
 				undoHandle: result.undoHandle,
-				afterState: view_20.state,
+				afterState: view_21.state,
 				commentsBefore,
 				commentsAfter: commentsRef.current
 			});
@@ -13991,18 +14564,18 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				reason: "notLatest"
 			};
 			const entry_3 = entries.at(-1);
-			const view_21 = pagedEditorRef.current?.getView();
-			if (!entry_3 || !view_21) return {
+			const view_22 = pagedEditorRef.current?.getView();
+			if (!entry_3 || !view_22) return {
 				status: "rejected",
 				undoHandle,
 				reason: "unknownHandle"
 			};
-			if (!view_21.state.doc.eq(entry_3.afterState.doc) || commentsRef.current !== entry_3.commentsAfter) return {
+			if (!view_22.state.doc.eq(entry_3.afterState.doc) || commentsRef.current !== entry_3.commentsAfter) return {
 				status: "rejected",
 				undoHandle,
 				reason: "documentChanged"
 			};
-			if (!undo(view_21.state, view_21.dispatch)) return {
+			if (!undo(view_22.state, view_22.dispatch)) return {
 				status: "rejected",
 				undoHandle,
 				reason: "documentChanged"
@@ -14016,8 +14589,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			};
 		},
 		applyAIEditOperations: ({ snapshot: snapshot_0, operations, mode = "tracked-changes", author: operationAuthor_0 = author }) => {
-			const view_22 = pagedEditorRef.current?.getView();
-			if (!view_22) return {
+			const view_23 = pagedEditorRef.current?.getView();
+			if (!view_23) return {
 				applied: [],
 				skipped: operations.map((operation_0) => ({
 					id: operation_0.id,
@@ -14025,8 +14598,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				}))
 			};
 			const createdComments_0 = [];
+			const activeSuggestionIds_0 = new Set(getSuggestions(view_23.state).map((s_1) => s_1.suggestionId));
 			const { applied: applied_0, skipped: skipped_0 } = applyFolioDocumentOperations({
-				view: view_22,
+				view: view_23,
 				snapshot: snapshot_0,
 				batch: {
 					version: FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION,
@@ -14040,21 +14614,30 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					return comment_0.id;
 				}
 			});
-			if (createdComments_0.length > 0) updateComments((currentComments_1) => [...currentComments_1, ...createdComments_0]);
+			const batchComments_0 = appliedOperationComments(createdComments_0, applied_0);
+			if (batchComments_0.length > 0) updateComments((currentComments_1) => [...currentComments_1, ...batchComments_0]);
+			if (mode === "suggested") pendingSuggestionRegistryRef.current.recordApplied({
+				snapshot: snapshot_0,
+				story: { type: "main" },
+				operations,
+				applied: applied_0,
+				author: operationAuthor_0,
+				activeSuggestionIds: activeSuggestionIds_0
+			});
 			return {
 				applied: applied_0,
 				skipped: skipped_0
 			};
 		},
 		acceptAIEditOperation: (revisionId) => {
-			const view_23 = pagedEditorRef.current?.getView();
-			if (!view_23) return false;
-			return acceptAIEditRevision(revisionId)(view_23.state, view_23.dispatch);
-		},
-		rejectAIEditOperation: (revisionId_0) => {
 			const view_24 = pagedEditorRef.current?.getView();
 			if (!view_24) return false;
-			return rejectAIEditRevision(revisionId_0)(view_24.state, view_24.dispatch);
+			return acceptAIEditRevision(revisionId)(view_24.state, view_24.dispatch);
+		},
+		rejectAIEditOperation: (revisionId_0) => {
+			const view_25 = pagedEditorRef.current?.getView();
+			if (!view_25) return false;
+			return rejectAIEditRevision(revisionId_0)(view_25.state, view_25.dispatch);
 		},
 		undo: () => {
 			if (getActiveEditorStory().type === "headerFooter" && hfEditorRef.current) return hfEditorRef.current.undo();
@@ -14069,44 +14652,44 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			return redone;
 		},
 		scrollToAIEditOperation: (revisionId_1) => {
-			const view_25 = pagedEditorRef.current?.getView();
-			if (!view_25) return false;
-			const range_2 = findAIEditRevisionRange(view_25.state, revisionId_1);
+			const view_26 = pagedEditorRef.current?.getView();
+			if (!view_26) return false;
+			const range_2 = findAIEditRevisionRange(view_26.state, revisionId_1);
 			if (!range_2) return false;
-			const { from: from_8, to: to_8 } = clampRangeToDocSize(view_25.state.doc.content.size, range_2);
-			const $from = view_25.state.doc.resolve(from_8);
-			const $to = view_25.state.doc.resolve(to_8);
-			view_25.dispatch(view_25.state.tr.setSelection(TextSelection.between($from, $to)));
+			const { from: from_8, to: to_8 } = clampRangeToDocSize(view_26.state.doc.content.size, range_2);
+			const $from = view_26.state.doc.resolve(from_8);
+			const $to = view_26.state.doc.resolve(to_8);
+			view_26.dispatch(view_26.state.tr.setSelection(TextSelection.between($from, $to)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_8);
 			});
 			return true;
 		},
 		scrollToBlock: (blockId, snapshot_1) => {
-			const view_26 = pagedEditorRef.current?.getView();
-			if (!view_26) return false;
+			const view_27 = pagedEditorRef.current?.getView();
+			if (!view_27) return false;
 			const range_3 = resolveFolioAIBlockRange({
 				blockId,
-				doc: view_26.state.doc,
+				doc: view_27.state.doc,
 				snapshot: snapshot_1
 			});
 			if (range_3 === null) return false;
 			const { from: from_9, to: to_9 } = range_3;
-			const $from_0 = view_26.state.doc.resolve(from_9);
-			const $to_0 = view_26.state.doc.resolve(to_9);
-			view_26.dispatch(view_26.state.tr.setSelection(TextSelection.between($from_0, $to_0)));
+			const $from_0 = view_27.state.doc.resolve(from_9);
+			const $to_0 = view_27.state.doc.resolve(to_9);
+			view_27.dispatch(view_27.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_2 }) => {
-			const view_27 = pagedEditorRef.current?.getView();
-			if (!view_27) return "none";
+			const view_28 = pagedEditorRef.current?.getView();
+			if (!view_28) return "none";
 			const passageRange = resolvePassageRange({
 				blockId: blockId_0,
 				text: text_5,
-				doc: view_27.state.doc,
+				doc: view_28.state.doc,
 				snapshot: snapshot_2
 			});
 			if (passageRange !== null) {
@@ -14119,16 +14702,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			pagedEditorRef.current?.setPassageHighlight(null);
 			const blockRange = resolveFolioAIBlockRange({
 				blockId: blockId_0,
-				doc: view_27.state.doc,
+				doc: view_28.state.doc,
 				snapshot: snapshot_2
 			});
 			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_27.state.doc.resolve(from_10);
-			const $to_1 = view_27.state.doc.resolve(to_10);
-			view_27.dispatch(view_27.state.tr.setSelection(TextSelection.between($from_1, $to_1)));
+			const $from_1 = view_28.state.doc.resolve(from_10);
+			const $to_1 = view_28.state.doc.resolve(to_10);
+			view_28.dispatch(view_28.state.tr.setSelection(TextSelection.between($from_1, $to_1)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_10);
 			});
@@ -14138,91 +14721,143 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			pagedEditorRef.current?.setPassageHighlight(null);
 		},
 		showInDocument: (target_1, snapshot_3) => {
-			const view_28 = pagedEditorRef.current?.getView();
-			if (!view_28) return false;
+			const view_29 = pagedEditorRef.current?.getView();
+			if (!view_29) return false;
 			const range_4 = target_1.type === "textRange" ? resolveFolioAITextRange({
 				range: target_1,
-				doc: view_28.state.doc,
+				doc: view_29.state.doc,
 				snapshot: snapshot_3
 			}) : resolveFolioAIBlockRange({
 				blockId: target_1.blockId,
-				doc: view_28.state.doc,
+				doc: view_29.state.doc,
 				snapshot: snapshot_3
 			});
 			if (range_4 === null) return false;
 			const { from: from_11, to: to_11 } = range_4;
-			const $from_2 = view_28.state.doc.resolve(from_11);
-			const $to_2 = view_28.state.doc.resolve(to_11);
-			view_28.dispatch(view_28.state.tr.setSelection(TextSelection.between($from_2, $to_2)));
+			const $from_2 = view_29.state.doc.resolve(from_11);
+			const $to_2 = view_29.state.doc.resolve(to_11);
+			view_29.dispatch(view_29.state.tr.setSelection(TextSelection.between($from_2, $to_2)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_11);
 			});
 			return true;
 		},
 		getSuggestions: () => {
-			const view_29 = pagedEditorRef.current?.getView();
-			return view_29 ? getSuggestions(view_29.state) : [];
+			const view_30 = pagedEditorRef.current?.getView();
+			return view_30 ? getSuggestions(view_30.state) : [];
+		},
+		exportPendingSuggestions: () => {
+			const view_31 = pagedEditorRef.current?.getView();
+			const activeIds = new Set(view_31 ? getSuggestions(view_31.state).map((s_2) => s_2.suggestionId) : []);
+			return pendingSuggestionRegistryRef.current.exportPendingSuggestions({
+				activeSuggestionIds: activeIds,
+				snapshotForStory: (story_0, commentIds) => story_0.type === "main" && view_31 ? createPendingSuggestionSourceSnapshot(view_31.state, commentIds) : null
+			});
 		},
+		loadPendingSuggestions: (records) => pendingSuggestionRegistryRef.current.loadPendingSuggestions({
+			records,
+			snapshotForStory: (story_1) => {
+				const view_32 = pagedEditorRef.current?.getView();
+				return story_1.type === "main" && view_32 ? createFolioAIEditSnapshot(view_32.state.doc) : null;
+			},
+			sourceSnapshotForStory: (story_2, commentIds_0) => {
+				const view_33 = pagedEditorRef.current?.getView();
+				return story_2.type === "main" && view_33 ? createPendingSuggestionSourceSnapshot(view_33.state, commentIds_0) : null;
+			},
+			apply: (record, snapshot_4) => {
+				const view_34 = pagedEditorRef.current?.getView();
+				if (!view_34) return {
+					applied: [],
+					skipped: []
+				};
+				const createdComments_1 = [];
+				const result_0 = applyFolioDocumentOperations({
+					view: view_34,
+					snapshot: snapshot_4,
+					batch: {
+						version: FOLIO_DOCUMENT_OPERATION_CONTRACT_VERSION,
+						operations: [record.operation],
+						mode: "suggested"
+					},
+					author: record.author,
+					createCommentId: (commentText) => {
+						const comment_1 = createComment(commentText, record.author);
+						createdComments_1.push(comment_1);
+						return comment_1.id;
+					}
+				});
+				const appliedComments = appliedOperationComments(createdComments_1, result_0.applied);
+				if (appliedComments.length > 0) updateComments((currentComments_2) => [...currentComments_2, ...appliedComments]);
+				return {
+					applied: result_0.applied,
+					skipped: result_0.skipped
+				};
+			},
+			activeSuggestionIds: () => {
+				const view_35 = pagedEditorRef.current?.getView();
+				return new Set(view_35 ? getSuggestions(view_35.state).map((s_3) => s_3.suggestionId) : []);
+			}
+		}),
 		acceptSuggestion: (suggestionId, options_3) => {
-			const view_30 = pagedEditorRef.current?.getView();
-			if (!view_30) return {
+			const view_36 = pagedEditorRef.current?.getView();
+			if (!view_36) return {
 				accepted: false,
 				appliedAs: null
 			};
-			const appliedAs = getSuggestions(view_30.state).find((s_0) => s_0.suggestionId === suggestionId)?.appliedAs ?? null;
-			const accepted = acceptSuggestion(suggestionId, { author: options_3?.author ?? author })(view_30.state, view_30.dispatch);
+			const appliedAs = getSuggestions(view_36.state).find((s_4) => s_4.suggestionId === suggestionId)?.appliedAs ?? null;
+			const accepted = acceptSuggestion(suggestionId, { author: options_3?.author ?? author })(view_36.state, view_36.dispatch);
 			return {
 				accepted,
 				appliedAs: accepted ? appliedAs : null
 			};
 		},
 		rejectSuggestion: (suggestionId_0) => {
-			const view_31 = pagedEditorRef.current?.getView();
-			if (!view_31) return false;
-			return rejectSuggestion(suggestionId_0)(view_31.state, view_31.dispatch);
+			const view_37 = pagedEditorRef.current?.getView();
+			if (!view_37) return false;
+			return rejectSuggestion(suggestionId_0)(view_37.state, view_37.dispatch);
 		},
 		scrollToSuggestion: (suggestionId_1) => {
-			const view_32 = pagedEditorRef.current?.getView();
-			if (!view_32) return false;
-			const range_5 = findSuggestionRange(view_32.state, suggestionId_1);
+			const view_38 = pagedEditorRef.current?.getView();
+			if (!view_38) return false;
+			const range_5 = findSuggestionRange(view_38.state, suggestionId_1);
 			if (!range_5) return false;
-			const { from: from_12, to: to_12 } = clampRangeToDocSize(view_32.state.doc.content.size, range_5);
-			const $from_3 = view_32.state.doc.resolve(from_12);
-			const $to_3 = view_32.state.doc.resolve(to_12);
-			view_32.dispatch(view_32.state.tr.setSelection(TextSelection.between($from_3, $to_3)));
+			const { from: from_12, to: to_12 } = clampRangeToDocSize(view_38.state.doc.content.size, range_5);
+			const $from_3 = view_38.state.doc.resolve(from_12);
+			const $to_3 = view_38.state.doc.resolve(to_12);
+			view_38.dispatch(view_38.state.tr.setSelection(TextSelection.between($from_3, $to_3)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_12);
 			});
 			return true;
 		},
 		getTrackedChanges: () => {
-			const view_33 = pagedEditorRef.current?.getView();
-			return view_33 ? getTrackedChangesFromDoc(view_33.state.doc) : [];
+			const view_39 = pagedEditorRef.current?.getView();
+			return view_39 ? getTrackedChangesFromDoc(view_39.state.doc) : [];
 		},
 		getCommentAnchors: () => {
-			const view_34 = pagedEditorRef.current?.getView();
-			return view_34 ? getCommentAnchorsFromDoc(view_34.state.doc) : [];
+			const view_40 = pagedEditorRef.current?.getView();
+			return view_40 ? getCommentAnchorsFromDoc(view_40.state.doc) : [];
 		},
 		getSelectionText: () => {
-			const view_35 = pagedEditorRef.current?.getView();
-			return view_35 ? getSelectedText(view_35.state) : "";
+			const view_41 = pagedEditorRef.current?.getView();
+			return view_41 ? getSelectedText(view_41.state) : "";
 		},
-		getPageText: (page_0) => {
-			const view_36 = pagedEditorRef.current?.getView();
-			if (!view_36) return null;
-			return getPageTextFromLayout(pagedEditorRef.current?.getEditor()?.getLayout() ?? null, view_36.state.doc, page_0);
+		getPageText: (page_1) => {
+			const view_42 = pagedEditorRef.current?.getView();
+			if (!view_42) return null;
+			return getPageTextFromLayout(pagedEditorRef.current?.getEditor()?.getLayout() ?? null, view_42.state.doc, page_1);
 		},
-		getTargetPage: (target_2, snapshot_4) => {
-			const view_37 = pagedEditorRef.current?.getView();
-			if (!view_37) return null;
+		getTargetPage: (target_2, snapshot_5) => {
+			const view_43 = pagedEditorRef.current?.getView();
+			if (!view_43) return null;
 			const range_6 = target_2.type === "textRange" ? resolveFolioAITextRange({
 				range: target_2,
-				doc: view_37.state.doc,
-				snapshot: snapshot_4
+				doc: view_43.state.doc,
+				snapshot: snapshot_5
 			}) : resolveFolioAIBlockRange({
 				blockId: target_2.blockId,
-				doc: view_37.state.doc,
-				snapshot: snapshot_4
+				doc: view_43.state.doc,
+				snapshot: snapshot_5
 			});
 			if (range_6 === null) return null;
 			return pagedEditorRef.current?.getPageNumberForPmPos(range_6.from) ?? null;
@@ -14232,49 +14867,49 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		getScrollRoot: () => pagedEditorRef.current?.getScrollRoot() ?? null,
 		onLayoutChange: (listener) => pagedEditorRef.current?.onLayoutChange(listener) ?? (() => {}),
 		getContentControls: (filter = {}) => {
-			const view_38 = pagedEditorRef.current?.getView();
-			if (!view_38) return [];
-			return findBlockSdtMatches(view_38.state.doc, filter).map((match_0) => ({
+			const view_44 = pagedEditorRef.current?.getView();
+			if (!view_44) return [];
+			return findBlockSdtMatches(view_44.state.doc, filter).map((match_0) => ({
 				properties: blockSdtAttrsToSdtProperties(match_0.node),
 				path: match_0.path,
 				pmPos: match_0.pos
 			}));
 		},
 		scrollToContentControl: (filter_0) => {
-			const view_39 = pagedEditorRef.current?.getView();
-			if (!view_39) return false;
-			const match_1 = findBlockSdtMatch(view_39.state.doc, filter_0);
+			const view_45 = pagedEditorRef.current?.getView();
+			if (!view_45) return false;
+			const match_1 = findBlockSdtMatch(view_45.state.doc, filter_0);
 			if (!match_1) return false;
 			const inside = match_1.pos + 1;
-			const $pos = view_39.state.doc.resolve(inside);
-			view_39.dispatch(view_39.state.tr.setSelection(TextSelection.near($pos)));
+			const $pos = view_45.state.doc.resolve(inside);
+			view_45.dispatch(view_45.state.tr.setSelection(TextSelection.near($pos)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(inside);
 			});
 			return true;
 		},
 		setContentControlContent: (filter_1, input, options_4 = {}) => {
-			const view_40 = pagedEditorRef.current?.getView();
-			if (!view_40) return false;
-			const tr_0 = typeof input === "string" ? setContentControlContentTr(view_40.state, filter_1, input, options_4) : setContentControlContentBlocksTr(view_40.state, filter_1, input, options_4);
+			const view_46 = pagedEditorRef.current?.getView();
+			if (!view_46) return false;
+			const tr_0 = typeof input === "string" ? setContentControlContentTr(view_46.state, filter_1, input, options_4) : setContentControlContentBlocksTr(view_46.state, filter_1, input, options_4);
 			if (!tr_0) return false;
-			view_40.dispatch(tr_0);
+			view_46.dispatch(tr_0);
 			return true;
 		},
 		setContentControlValue: (filter_2, input_0, options_5 = {}) => {
-			const view_41 = pagedEditorRef.current?.getView();
-			if (!view_41) return false;
-			const tr_1 = setContentControlValueTr(view_41.state, filter_2, input_0, options_5);
+			const view_47 = pagedEditorRef.current?.getView();
+			if (!view_47) return false;
+			const tr_1 = setContentControlValueTr(view_47.state, filter_2, input_0, options_5);
 			if (!tr_1) return false;
-			view_41.dispatch(tr_1);
+			view_47.dispatch(tr_1);
 			return true;
 		},
 		removeContentControl: (filter_3, options_6 = {}) => {
-			const view_42 = pagedEditorRef.current?.getView();
-			if (!view_42) return false;
-			const tr_2 = removeContentControlTr(view_42.state, filter_3, options_6);
+			const view_48 = pagedEditorRef.current?.getView();
+			if (!view_48) return false;
+			const tr_2 = removeContentControlTr(view_48.state, filter_3, options_6);
 			if (!tr_2) return false;
-			view_42.dispatch(tr_2);
+			view_48.dispatch(tr_2);
 			return true;
 		}
 	}), [
@@ -14358,39 +14993,39 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		if (isDisplayMode(value)) setDisplayMode(value);
 	}, [setDisplayMode]);
 	const handleAcceptActiveChange = useCallback(() => {
-		const view_43 = pagedEditorRef.current?.getView();
-		if (!view_43) return;
-		const { from: from_13, to: to_13 } = view_43.state.selection;
-		const range_7 = findChangeAtPosition(view_43.state, from_13, to_13);
-		acceptChange(range_7.from, range_7.to)(view_43.state, view_43.dispatch);
+		const view_49 = pagedEditorRef.current?.getView();
+		if (!view_49) return;
+		const { from: from_13, to: to_13 } = view_49.state.selection;
+		const range_7 = findChangeAtPosition(view_49.state, from_13, to_13);
+		acceptChange(range_7.from, range_7.to)(view_49.state, view_49.dispatch);
 	}, []);
 	const handleRejectActiveChange = useCallback(() => {
-		const view_44 = pagedEditorRef.current?.getView();
-		if (!view_44) return;
-		const { from: from_14, to: to_14 } = view_44.state.selection;
-		const range_8 = findChangeAtPosition(view_44.state, from_14, to_14);
-		rejectChange(range_8.from, range_8.to)(view_44.state, view_44.dispatch);
+		const view_50 = pagedEditorRef.current?.getView();
+		if (!view_50) return;
+		const { from: from_14, to: to_14 } = view_50.state.selection;
+		const range_8 = findChangeAtPosition(view_50.state, from_14, to_14);
+		rejectChange(range_8.from, range_8.to)(view_50.state, view_50.dispatch);
 	}, []);
 	const handlePreviousChange = useCallback(() => {
-		const view_45 = pagedEditorRef.current?.getView();
-		if (!view_45) return;
-		const { from: from_15 } = view_45.state.selection;
-		const change = findPreviousChange(view_45.state, from_15);
+		const view_51 = pagedEditorRef.current?.getView();
+		if (!view_51) return;
+		const { from: from_15 } = view_51.state.selection;
+		const change = findPreviousChange(view_51.state, from_15);
 		if (!change) return;
-		view_45.dispatch(view_45.state.tr.setSelection(TextSelection.create(view_45.state.doc, change.from, change.to)));
-		view_45.focus();
+		view_51.dispatch(view_51.state.tr.setSelection(TextSelection.create(view_51.state.doc, change.from, change.to)));
+		view_51.focus();
 		requestAnimationFrame(() => {
 			pagedEditorRef.current?.scrollToPosition(change.from);
 		});
 	}, []);
 	const handleNextChange = useCallback(() => {
-		const view_46 = pagedEditorRef.current?.getView();
-		if (!view_46) return;
-		const { to: to_15 } = view_46.state.selection;
-		const change_0 = findNextChange(view_46.state, to_15);
+		const view_52 = pagedEditorRef.current?.getView();
+		if (!view_52) return;
+		const { to: to_15 } = view_52.state.selection;
+		const change_0 = findNextChange(view_52.state, to_15);
 		if (!change_0) return;
-		view_46.dispatch(view_46.state.tr.setSelection(TextSelection.create(view_46.state.doc, change_0.from, change_0.to)));
-		view_46.focus();
+		view_52.dispatch(view_52.state.tr.setSelection(TextSelection.create(view_52.state.doc, change_0.from, change_0.to)));
+		view_52.focus();
 		requestAnimationFrame(() => {
 			pagedEditorRef.current?.scrollToPosition(change_0.from);
 		});
@@ -14560,21 +15195,21 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		requestAnimationFrame(syncCommentHighlightStyles);
 	}, [onScrollTopChange, syncCommentHighlightStyles]);
 	const handlePagedSelectionChange = useCallback((_from, _to) => {
-		const view_47 = getActiveEditorView() ?? pagedEditorRef.current?.getView() ?? null;
-		handleSelectionChange(view_47 ? extractSelectionState(view_47.state) : null);
+		const view_53 = getActiveEditorView() ?? pagedEditorRef.current?.getView() ?? null;
+		handleSelectionChange(view_53 ? extractSelectionState(view_53.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) => {
-		updateComments((previous_0) => previous_0.map((comment_1) => comment_1.id === id_0 ? {
-			...comment_1,
+		updateComments((previous_0) => previous_0.map((comment_2) => comment_2.id === id_0 ? {
+			...comment_2,
 			done: true
-		} : comment_1));
+		} : comment_2));
 	}, [updateComments]);
 	const handleCommentDelete = useCallback((id_1) => {
-		updateComments((previous_1) => previous_1.filter((comment_2) => comment_2.id !== id_1 && comment_2.parentId !== id_1));
+		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,
@@ -14585,19 +15220,19 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		updateComments((previous_2) => [...previous_2, createComment(text_6, author, id_2)]);
 	}, [author, updateComments]);
 	const handleAddComment = useCallback((addText) => {
-		const comment_3 = createComment(addText, author);
-		const view_48 = pagedEditorRef.current?.getView();
-		if (!view_48 || !commentSelectionRange) return false;
-		if (!applyCommentMarkRange(view_48, commentSelectionRange, comment_3.id, { replacePending: true })) return false;
-		const commentAuthor_2 = getCommentAuthorKey(comment_3.author);
+		const comment_4 = createComment(addText, author);
+		const view_54 = pagedEditorRef.current?.getView();
+		if (!view_54 || !commentSelectionRange) return false;
+		if (!applyCommentMarkRange(view_54, commentSelectionRange, comment_4.id, { replacePending: true })) return false;
+		const commentAuthor_2 = getCommentAuthorKey(comment_4.author);
 		setVisibleCommentAuthors((current) => {
 			if (current === null) return null;
 			const next_1 = new Set(current);
 			next_1.add(commentAuthor_2);
 			return next_1;
 		});
-		setActiveCommentId(comment_3.id);
-		updateComments((previous_3) => [...previous_3, comment_3]);
+		setActiveCommentId(comment_4.id);
+		updateComments((previous_3) => [...previous_3, comment_4]);
 		pagedEditorRef.current?.relayout();
 		requestAnimationFrame(() => {
 			syncCommentHighlightStyles();
@@ -14622,8 +15257,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		updateComments((previous_4) => [...previous_4, createComment(text_7, author, revisionId_2)]);
 	}, [author, updateComments]);
 	const handleCancelAddComment = useCallback(() => {
-		const view_49 = pagedEditorRef.current?.getView();
-		if (view_49 && commentSelectionRange) removePendingCommentMarkRange(view_49, commentSelectionRange);
+		const view_55 = pagedEditorRef.current?.getView();
+		if (view_55 && commentSelectionRange) removePendingCommentMarkRange(view_55, commentSelectionRange);
 		setIsAddingComment(false);
 		setCommentSelectionRange(null);
 		setAddCommentYPosition(null);
@@ -14639,27 +15274,89 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		})?.revisionId ?? null;
 	}, []);
 	const handleSidebarAcceptChange = useCallback((from_17, to_17) => {
-		const view_50 = pagedEditorRef.current?.getView();
-		if (!view_50) return;
+		const view_56 = pagedEditorRef.current?.getView();
+		if (!view_56) return;
 		const revisionId_3 = resolveSidebarChangeRevisionId(from_17, to_17);
 		if (revisionId_3 === null) return;
-		acceptAIEditRevision(revisionId_3)(view_50.state, view_50.dispatch);
+		acceptAIEditRevision(revisionId_3)(view_56.state, view_56.dispatch);
 		extractTrackedChanges();
 	}, [extractTrackedChanges, resolveSidebarChangeRevisionId]);
 	const handleSidebarRejectChange = useCallback((from_18, to_18) => {
-		const view_51 = pagedEditorRef.current?.getView();
-		if (!view_51) return;
+		const view_57 = pagedEditorRef.current?.getView();
+		if (!view_57) return;
 		const revisionId_4 = resolveSidebarChangeRevisionId(from_18, to_18);
 		if (revisionId_4 === null) return;
-		rejectAIEditRevision(revisionId_4)(view_51.state, view_51.dispatch);
+		rejectAIEditRevision(revisionId_4)(view_57.state, view_57.dispatch);
 		extractTrackedChanges();
 	}, [extractTrackedChanges, resolveSidebarChangeRevisionId]);
 	const commentsPageWidth = history.state?.package.document.finalSectionProperties?.pageWidth;
+	const dismissCommentsDrawer = useCallback(() => {
+		if (isAddingComment) handleCancelAddComment();
+		setPanelOverlay("none");
+		setShowCommentsSidebar(false);
+		setActiveCommentId(null);
+	}, [
+		handleCancelAddComment,
+		isAddingComment,
+		setActiveCommentId,
+		setPanelOverlay,
+		setShowCommentsSidebar
+	]);
+	useEffect(() => {
+		if (isAddingComment && panels.layout.comments === "drawer") setPanelOverlay("comments");
+	}, [
+		isAddingComment,
+		panels.layout.comments,
+		setPanelOverlay
+	]);
+	const toggleComments = useCallback(() => {
+		if (commentsSurface === "drawer") {
+			dismissCommentsDrawer();
+			return;
+		}
+		if (commentsSurface === "column") {
+			setShowCommentsSidebar(false);
+			setActiveCommentId(null);
+			return;
+		}
+		if (visibleCommentAuthorSet.size === 0) setVisibleCommentAuthors(null);
+		setShowCommentsSidebar(true);
+		if (layoutWithCommentsOpen().comments === "drawer") setPanelOverlay("comments");
+	}, [
+		commentsSurface,
+		dismissCommentsDrawer,
+		layoutWithCommentsOpen,
+		setActiveCommentId,
+		setPanelOverlay,
+		setShowCommentsSidebar,
+		setVisibleCommentAuthors,
+		visibleCommentAuthorSet.size
+	]);
+	const openCommentThreadCount = useMemo(() => countOpenCommentThreads(comments), [comments]);
+	const outlineToggle = (() => {
+		if (panels.layout.outline !== "drawer") return "absent";
+		return panelOverlay === "outline" ? "open" : "closed";
+	})();
+	const panelToggles = useMemo(() => /* @__PURE__ */ jsx(PanelToggles, {
+		outline: outlineToggle,
+		onToggleOutline: toggleOutlineOverlay,
+		commentsShown: commentsSurface !== null,
+		commentCount: openCommentThreadCount,
+		onToggleComments: toggleComments
+	}), [
+		commentsSurface,
+		openCommentThreadCount,
+		outlineToggle,
+		toggleComments,
+		toggleOutlineOverlay
+	]);
 	const commentsSidebarOverlay = useMemo(() => {
-		if (!showCommentsSidebar) return;
+		if (commentsSurface === null) return;
 		return /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(CommentsSidebar, {
+				surface: commentsSurface,
+				onDismiss: dismissCommentsDrawer,
 				activeCommentId,
 				comments: visibleComments,
 				anchorPositions,
@@ -14694,7 +15391,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		handleSidebarRejectChange,
 		handleTrackedChangeReply,
 		isAddingComment,
-		showCommentsSidebar,
+		commentsSurface,
+		dismissCommentsDrawer,
 		visibleComments
 	]);
 	const getActiveHfView = useCallback(() => activeHfRId ? pagedEditorRef.current?.getHfView(activeHfRId) ?? null : null, [activeHfRId]);
@@ -14716,6 +15414,10 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		};
 		requestAnimationFrame(flash);
 	}, []);
+	const handleOutlineJump = useCallback((id_3) => {
+		markHeadingJumped(id_3);
+		handleOutlineHeadingClick(Number(id_3));
+	}, [handleOutlineHeadingClick, markHeadingJumped]);
 	const handleTextContextAction = useCallback((action_3) => {
 		handleContextMenuAction(action_3);
 	}, [handleContextMenuAction]);
@@ -14727,8 +15429,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	}, [readOnly]);
 	const closeTableProperties = useCallback(() => setTablePropsOpen(false), []);
 	const applyTableProperties = useCallback((props_0) => {
-		const view_52 = getActiveEditorView();
-		if (view_52) setTableProperties(props_0)(view_52.state, view_52.dispatch);
+		const view_58 = getActiveEditorView();
+		if (view_58) setTableProperties(props_0)(view_58.state, view_58.dispatch);
 	}, [getActiveEditorView]);
 	const closeImagePosition = useCallback(() => setImagePositionOpen(false), [setImagePositionOpen]);
 	const closeImageProperties = useCallback(() => setImagePropsOpen(false), [setImagePropsOpen]);
@@ -14736,8 +15438,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_53 = getActiveEditorView();
-		if (view_53) view_53.dispatch(view_53.state.tr.insertText(symbol).scrollIntoView());
+		const view_59 = getActiveEditorView();
+		if (view_59) view_59.dispatch(view_59.state.tr.insertText(symbol).scrollIntoView());
 	}, [getActiveEditorView]);
 	const imagePropertiesCurrentData = useMemo(() => buildImagePropertiesData(state.pmImageContext), [state.pmImageContext]);
 	const currentFindResult = findResultRef.current;
@@ -14818,6 +15520,20 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		footnotePropsOpen,
 		handleApplyFootnoteProperties
 	]);
+	const closeNumberingValueDialog = useCallback(() => setNumberingValueDialogOpen(false), []);
+	const applyNumberingValue = useCallback((value_0) => {
+		const view_60 = getActiveEditorView();
+		if (view_60) setNumberingValue(value_0)(view_60.state, view_60.dispatch);
+	}, [getActiveEditorView]);
+	const numberingValueDialog = useMemo(() => ({
+		isOpen: numberingValueDialogOpen,
+		onClose: closeNumberingValueDialog,
+		onApply: applyNumberingValue
+	}), [
+		applyNumberingValue,
+		closeNumberingValueDialog,
+		numberingValueDialogOpen
+	]);
 	const insertSymbolDialog = useMemo(() => ({
 		isOpen: showInsertSymbol,
 		onClose: closeInsertSymbol,
@@ -14842,6 +15558,13 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		minWidth: 0,
 		flexDirection: "row"
 	};
+	const panelsRowStyle = {
+		position: "relative",
+		display: "flex",
+		flex: 1,
+		minHeight: 0,
+		minWidth: 0
+	};
 	const editorContainerStyle = {
 		flex: 1,
 		minHeight: 0,
@@ -14900,7 +15623,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 							},
 							children: [
 								showToolbar && !readOnlyProp && /* @__PURE__ */ jsx("div", {
-									ref: toolbarRefCallback,
 									className: "z-50 flex flex-shrink-0 flex-col gap-0 bg-[var(--doc-page)]",
 									children: /* @__PURE__ */ jsx(FormattingBar, {
 										currentFormatting: state.selectionFormatting,
@@ -14933,6 +15655,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 										onInsertSymbol: handleOpenInsertSymbol,
 										priorityExtra: toolbarPriorityExtra,
 										inlineExtra: toolbarInlineExtra,
+										panelToggles,
 										...history.state.package.styles?.styles ? { documentStyles: history.state.package.styles.styles } : {},
 										...state.pmImageContext ? { imageContext: state.pmImageContext } : {},
 										...state.pmTableContext ? { tableContext: state.pmTableContext } : {},
@@ -14940,241 +15663,273 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 									})
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									ref: scrollContainerRef,
-									style: editorContainerStyle,
-									"data-folio-scroll": "",
-									onScroll: handleEditorScroll,
-									children: [rulerVisible && !readOnly && /* @__PURE__ */ jsx("div", {
-										style: {
-											position: "sticky",
-											top: 0,
-											zIndex: 20,
-											display: "flex",
-											justifyContent: "center",
-											flexShrink: 0,
-											paddingBlock: 4,
-											paddingLeft: 20,
-											paddingRight: 20 + (showCommentsSidebar ? 304 : 0),
-											minWidth: twipsToPixels(effectiveSectionProperties?.pageWidth ?? 12240) * zoom + 40 + (showCommentsSidebar ? 304 : 0),
-											backgroundColor: "var(--muted)",
-											transition: "padding 0.2s ease"
-										},
-										children: /* @__PURE__ */ jsx(HorizontalRuler, {
-											sectionProps: effectiveSectionProperties ?? null,
-											zoom,
-											unit: rulerUnit,
-											editable: !readOnly,
-											onLeftMarginChange: handleLeftMarginChange,
-											onRightMarginChange: handleRightMarginChange,
-											indentLeft: state.paragraphIndentLeft,
-											indentRight: state.paragraphIndentRight,
-											onIndentLeftChange: handleIndentLeftChange,
-											onIndentRightChange: handleIndentRightChange,
-											firstLineIndent: state.paragraphFirstLineIndent,
-											hangingIndent: state.paragraphHangingIndent,
-											onFirstLineIndentChange: handleFirstLineIndentChange,
-											tabStops: state.paragraphTabs,
-											onTabStopRemove: handleTabStopRemove
-										})
-									}), /* @__PURE__ */ jsx("div", {
-										style: {
-											display: "flex",
-											flex: 1,
-											minHeight: 0,
-											position: "relative"
-										},
-										children: /* @__PURE__ */ jsxs("div", {
-											ref: editorContentRef,
-											style: {
-												position: "relative",
-												flex: 1,
-												minWidth: 0
-											},
-											onMouseDown: containedHandler((e_0) => {
-												if (e_0.target === e_0.currentTarget) {
-													e_0.preventDefault();
-													pagedEditorRef.current?.focus();
-												}
-											}),
-											onContextMenu: handleEditorContextMenu,
-											children: [
-												rulerVisible && !readOnly && /* @__PURE__ */ jsx("div", {
+									ref: panels.rowRef,
+									className: "folio-panels-row",
+									style: panelsRowStyle,
+									"data-folio-panel-tier": panels.layout.tier,
+									"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,
+											scrollContainerRef,
+											docSize: pagedEditorRef.current?.getView()?.state.doc.content.size ?? 0,
+											activeId: activeHeadingId,
+											onJump: handleOutlineJump,
+											surface: panels.layout.outline,
+											expanded: panelOverlay === "outline",
+											onExpand: toggleOutlineOverlay
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											ref: scrollContainerRef,
+											style: editorContainerStyle,
+											"data-folio-scroll": "",
+											onScroll: handleEditorScroll,
+											children: [rulerVisible && !readOnly && /* @__PURE__ */ jsx("div", {
+												"data-testid": "folio-horizontal-ruler",
+												style: {
+													position: "sticky",
+													top: 0,
+													zIndex: 20,
+													display: "flex",
+													justifyContent: "center",
+													flexShrink: 0,
+													paddingBlock: 4,
+													paddingLeft: 20,
+													paddingRight: 20 + panels.layout.commentsGutter,
+													minWidth: twipsToPixels(effectiveSectionProperties?.pageWidth ?? 12240) * zoom + 40 + panels.layout.commentsGutter,
+													background: "var(--doc-canvas-surface)",
+													transition: "padding 0.2s ease"
+												},
+												children: /* @__PURE__ */ jsx(HorizontalRuler, {
+													sectionProps: effectiveSectionProperties ?? null,
+													zoom,
+													unit: rulerUnit,
+													editable: !readOnly,
+													onLeftMarginChange: handleLeftMarginChange,
+													onRightMarginChange: handleRightMarginChange,
+													indentLeft: state.paragraphIndentLeft,
+													indentRight: state.paragraphIndentRight,
+													onIndentLeftChange: handleIndentLeftChange,
+													onIndentRightChange: handleIndentRightChange,
+													firstLineIndent: state.paragraphFirstLineIndent,
+													hangingIndent: state.paragraphHangingIndent,
+													onFirstLineIndentChange: handleFirstLineIndentChange,
+													tabStops: state.paragraphTabs,
+													onTabStopRemove: handleTabStopRemove
+												})
+											}), /* @__PURE__ */ jsx("div", {
+												style: {
+													display: "flex",
+													flex: 1,
+													minHeight: 0,
+													position: "relative"
+												},
+												children: /* @__PURE__ */ jsxs("div", {
+													ref: editorContentRef,
 													style: {
-														position: "absolute",
-														left: 0,
-														top: 0,
-														zIndex: 20,
-														paddingTop: 24 * zoom
+														position: "relative",
+														flex: 1,
+														minWidth: 0
 													},
-													children: /* @__PURE__ */ jsx(VerticalRuler, {
-														sectionProps: effectiveSectionProperties ?? null,
-														zoom,
-														unit: rulerUnit,
-														editable: !readOnly,
-														onTopMarginChange: handleTopMarginChange,
-														onBottomMarginChange: handleBottomMarginChange
-													})
-												}),
-												/* @__PURE__ */ jsx(PagedEditor, {
-													ref: pagedEditorRef,
-													document: history.state,
-													documentIO,
-													documentIdentity: loadedDocumentIdentity,
-													...fonts !== void 0 ? { fonts } : {},
-													theme: history.state.package.theme || theme || null,
-													sectionProperties: effectiveSectionProperties ?? null,
-													headerContent,
-													footerContent,
-													firstPageHeaderContent,
-													firstPageFooterContent,
-													headerContentRId: activeHeaderRId,
-													footerContentRId: activeFooterRId,
-													firstPageHeaderContentRId: activeFirstHeaderRId,
-													firstPageFooterContentRId: activeFirstFooterRId,
-													...history.state.package.styles ? { styles: history.state.package.styles } : {},
-													onHeaderFooterDoubleClick: showHeaderFooterEditing ? handleHeaderFooterStoryOpen : void 0,
-													hfEditMode: hfEditPosition,
-													activeHeaderFooterRId: activeHfRId,
-													onBodyClick: handleBodyClick,
-													onActiveNoteStoryChange: handleActiveNoteStoryChange,
-													zoom,
-													...pageRenderer === void 0 ? {} : { pageRenderer },
-													showMarginGuides,
-													...marginGuideColor !== void 0 ? { marginGuideColor } : {},
-													readOnly,
-													onDocumentChange: handleDocumentChange,
-													extensionManager,
-													suggestionModeActive: editingMode === "suggesting",
-													suggestionAuthor: author,
-													...onCopy !== void 0 ? { onCopy } : {},
-													...onCut !== void 0 ? { onCut } : {},
-													...onPaste !== void 0 ? { onPaste } : {},
-													...onReadonlyEditAttempt !== void 0 ? { onReadOnlyEditAttempt: onReadonlyEditAttempt } : {},
-													onSelectionChange: handlePagedSelectionChange,
-													...onSelectionTextChange !== void 0 ? { onSelectionTextChange } : {},
-													...onEditorViewReady !== void 0 ? { onEditorViewReady: reportEditorViewReady } : {},
-													externalPlugins: editorPlugins,
-													showTemplateDirectives,
-													...collaboration !== void 0 ? { collaboration } : {},
-													onHyperlinkClick: handleHyperlinkClick,
-													onContextMenu: handleContextMenu,
-													commentsSidebarOpen: showCommentsSidebar,
-													anchorPositionMode: "comments",
-													onAnonymizationTermClick,
-													selectedAnonymizationCanonical,
-													anonymizationSelectionSeq,
-													...showCommentsSidebar ? { onAnchorPositionsChange: setAnchorPositions } : {},
-													onTotalPagesChange: handleTotalPagesChange,
-													onError: handleEditorError,
-													scrollContainerRef,
-													sidebarOverlay: commentsSidebarOverlay
-												}),
-												floatingCommentBtn !== null && !isAddingComment && !readOnly && /* @__PURE__ */ jsx(Tooltip, {
-													content: "Add comment",
-													side: "bottom",
-													delayMs: 300,
-													children: /* @__PURE__ */ jsx("button", {
-														type: "button",
-														onMouseDown: (e_1) => {
-															e_1.preventDefault();
-															e_1.stopPropagation();
-															const view_54 = pagedEditorRef.current?.getView();
-															if (!view_54) {
-																setFloatingCommentBtn(null);
-																return;
-															}
-															const capturedRange = {
-																from: floatingCommentBtn.from,
-																to: floatingCommentBtn.to
-															};
-															const currentSelection = view_54.state.selection;
-															const safeRange = resolveCommentCreationRange({
-																docSize: view_54.state.doc.content.size,
-																capturedRange,
-																currentRange: {
-																	from: currentSelection.from,
-																	to: currentSelection.to
+													onMouseDown: containedHandler((e_0) => {
+														if (e_0.target === e_0.currentTarget) {
+															e_0.preventDefault();
+															pagedEditorRef.current?.focus();
+														}
+													}),
+													onContextMenu: handleEditorContextMenu,
+													children: [
+														rulerVisible && !readOnly && /* @__PURE__ */ jsx("div", {
+															style: {
+																position: "absolute",
+																left: 0,
+																top: 0,
+																zIndex: 20,
+																paddingTop: 24 * zoom
+															},
+															children: /* @__PURE__ */ jsx(VerticalRuler, {
+																sectionProps: effectiveSectionProperties ?? null,
+																zoom,
+																unit: rulerUnit,
+																editable: !readOnly,
+																onTopMarginChange: handleTopMarginChange,
+																onBottomMarginChange: handleBottomMarginChange
+															})
+														}),
+														/* @__PURE__ */ jsx(PagedEditor, {
+															ref: pagedEditorRef,
+															document: history.state,
+															documentIO,
+															documentIdentity: loadedDocumentIdentity,
+															markupView: displayMode,
+															...fonts !== void 0 ? { fonts } : {},
+															theme: history.state.package.theme || theme || null,
+															sectionProperties: effectiveSectionProperties ?? null,
+															headerContent,
+															footerContent,
+															firstPageHeaderContent,
+															firstPageFooterContent,
+															headerContentRId: activeHeaderRId,
+															footerContentRId: activeFooterRId,
+															firstPageHeaderContentRId: activeFirstHeaderRId,
+															firstPageFooterContentRId: activeFirstFooterRId,
+															...history.state.package.styles ? { styles: history.state.package.styles } : {},
+															onHeaderFooterDoubleClick: showHeaderFooterEditing ? handleHeaderFooterStoryOpen : void 0,
+															hfEditMode: hfEditPosition,
+															activeHeaderFooterRId: activeHfRId,
+															onBodyClick: handleBodyClick,
+															onActiveNoteStoryChange: handleActiveNoteStoryChange,
+															zoom,
+															...pageRenderer === void 0 ? {} : { pageRenderer },
+															showMarginGuides,
+															...marginGuideColor !== void 0 ? { marginGuideColor } : {},
+															readOnly,
+															onDocumentChange: handleDocumentChange,
+															extensionManager,
+															suggestionModeActive: editingMode === "suggesting",
+															suggestionAuthor: author,
+															...onCopy !== void 0 ? { onCopy } : {},
+															...onCut !== void 0 ? { onCut } : {},
+															...onPaste !== void 0 ? { onPaste } : {},
+															...onReadonlyEditAttempt !== void 0 ? { onReadOnlyEditAttempt: onReadonlyEditAttempt } : {},
+															onSelectionChange: handlePagedSelectionChange,
+															...onSelectionTextChange !== void 0 ? { onSelectionTextChange } : {},
+															onEditorViewReady: handleBodyViewReady,
+															externalPlugins: editorPlugins,
+															showTemplateDirectives,
+															...collaboration !== void 0 ? { collaboration } : {},
+															onHyperlinkClick: handleHyperlinkClick,
+															onContextMenu: handleContextMenu,
+															pageEndGutter: panels.layout.commentsGutter,
+															anchorPositionMode: "comments",
+															onAnonymizationTermClick,
+															selectedAnonymizationCanonical,
+															anonymizationSelectionSeq,
+															...showCommentsSidebar ? { onAnchorPositionsChange: setAnchorPositions } : {},
+															onTotalPagesChange: handleTotalPagesChange,
+															onError: handleEditorError,
+															scrollContainerRef,
+															sidebarOverlay: commentsSidebarOverlay
+														}),
+														floatingCommentBtn !== null && !isAddingComment && !readOnly && /* @__PURE__ */ jsx(Tooltip, {
+															content: "Add comment",
+															side: "bottom",
+															delayMs: 300,
+															children: /* @__PURE__ */ jsx("button", {
+																type: "button",
+																onMouseDown: (e_1) => {
+																	e_1.preventDefault();
+																	e_1.stopPropagation();
+																	const view_61 = pagedEditorRef.current?.getView();
+																	if (!view_61) {
+																		setFloatingCommentBtn(null);
+																		return;
+																	}
+																	const capturedRange = {
+																		from: floatingCommentBtn.from,
+																		to: floatingCommentBtn.to
+																	};
+																	const currentSelection = view_61.state.selection;
+																	const safeRange = resolveCommentCreationRange({
+																		docSize: view_61.state.doc.content.size,
+																		capturedRange,
+																		currentRange: {
+																			from: currentSelection.from,
+																			to: currentSelection.to
+																		},
+																		savedRange: lastSelectionRef.current
+																	});
+																	if (!safeRange) {
+																		setCommentSelectionRange(null);
+																		setFloatingCommentBtn(null);
+																		return;
+																	}
+																	setCommentSelectionRange(safeRange);
+																	if (!applyCommentMarkRange(view_61, safeRange, -1, { selectEnd: true })) {
+																		setCommentSelectionRange(null);
+																		setFloatingCommentBtn(null);
+																		return;
+																	}
+																	const yPos_0 = findSelectionYPosition(scrollContainerRef.current, editorContentRef.current, safeRange.from);
+																	setAddCommentYPosition(yPos_0 ?? floatingCommentBtn.top);
+																	setShowCommentsSidebar(true);
+																	setIsAddingComment(true);
+																	setFloatingCommentBtn(null);
+																},
+																style: {
+																	position: "absolute",
+																	top: floatingCommentBtn.top,
+																	left: floatingCommentBtn.left,
+																	transform: "translate(-50%, -50%)",
+																	zIndex: 50,
+																	width: 28,
+																	height: 28,
+																	borderRadius: 6,
+																	border: "1px solid var(--doc-border)",
+																	backgroundColor: "var(--doc-page)",
+																	color: "var(--doc-text-muted)",
+																	cursor: "pointer",
+																	display: "flex",
+																	alignItems: "center",
+																	justifyContent: "center",
+																	boxShadow: "0 2px 8px var(--doc-border)",
+																	transition: "background-color 0.15s, box-shadow 0.15s"
+																},
+																onMouseOver: (e_2) => {
+																	e_2.currentTarget.style.backgroundColor = "rgba(26, 115, 232, 0.08)";
+																	e_2.currentTarget.style.boxShadow = "0 1px 4px rgba(26, 115, 232, 0.3)";
 																},
-																savedRange: lastSelectionRef.current
+																onFocus: (e_3) => {
+																	e_3.currentTarget.style.backgroundColor = "rgba(26, 115, 232, 0.08)";
+																},
+																onMouseOut: (e_4) => {
+																	e_4.currentTarget.style.backgroundColor = "var(--doc-canvas, #fff)";
+																	e_4.currentTarget.style.boxShadow = "0 1px 3px rgba(60,64,67,0.2)";
+																},
+																onBlur: (e_5) => {
+																	e_5.currentTarget.style.backgroundColor = "var(--doc-canvas, #fff)";
+																},
+																children: /* @__PURE__ */ jsx(SquarePenIcon, { size: 16 })
+															})
+														}),
+														hfEditPosition && (() => {
+															if (!(() => {
+																if (hfEditIsFirstPage) return (() => {
+																	if (hfEditPosition === "header") return firstPageHeaderContent;
+																	return firstPageFooterContent;
+																})();
+																if (hfEditPosition === "header") return headerContent;
+																return footerContent;
+															})()) return null;
+															const targetEl = getHfTargetElement(hfEditPosition);
+															const parentEl_0 = editorContentRef.current;
+															if (!targetEl || !parentEl_0) return null;
+															return /* @__PURE__ */ jsx(InlineHeaderFooterEditor, {
+																ref: hfEditorRef,
+																position: hfEditPosition,
+																targetElement: targetEl,
+																parentElement: parentEl_0,
+																getActiveView: getActiveHfView,
+																onClose: handleBodyClick,
+																onRemove: handleRemoveHeaderFooter
 															});
-															if (!safeRange) {
-																setCommentSelectionRange(null);
-																setFloatingCommentBtn(null);
-																return;
-															}
-															setCommentSelectionRange(safeRange);
-															if (!applyCommentMarkRange(view_54, safeRange, -1, { selectEnd: true })) {
-																setCommentSelectionRange(null);
-																setFloatingCommentBtn(null);
-																return;
-															}
-															const yPos_0 = findSelectionYPosition(scrollContainerRef.current, editorContentRef.current, safeRange.from);
-															setAddCommentYPosition(yPos_0 ?? floatingCommentBtn.top);
-															setShowCommentsSidebar(true);
-															setIsAddingComment(true);
-															setFloatingCommentBtn(null);
-														},
-														style: {
-															position: "absolute",
-															top: floatingCommentBtn.top,
-															left: floatingCommentBtn.left,
-															transform: "translate(-50%, -50%)",
-															zIndex: 50,
-															width: 28,
-															height: 28,
-															borderRadius: 6,
-															border: "1px solid var(--doc-border)",
-															backgroundColor: "var(--doc-page)",
-															color: "var(--doc-text-muted)",
-															cursor: "pointer",
-															display: "flex",
-															alignItems: "center",
-															justifyContent: "center",
-															boxShadow: "0 2px 8px var(--doc-border)",
-															transition: "background-color 0.15s, box-shadow 0.15s"
-														},
-														onMouseOver: (e_2) => {
-															e_2.currentTarget.style.backgroundColor = "rgba(26, 115, 232, 0.08)";
-															e_2.currentTarget.style.boxShadow = "0 1px 4px rgba(26, 115, 232, 0.3)";
-														},
-														onFocus: (e_3) => {
-															e_3.currentTarget.style.backgroundColor = "rgba(26, 115, 232, 0.08)";
-														},
-														onMouseOut: (e_4) => {
-															e_4.currentTarget.style.backgroundColor = "var(--doc-canvas, #fff)";
-															e_4.currentTarget.style.boxShadow = "0 1px 3px rgba(60,64,67,0.2)";
-														},
-														onBlur: (e_5) => {
-															e_5.currentTarget.style.backgroundColor = "var(--doc-canvas, #fff)";
-														},
-														children: /* @__PURE__ */ jsx(SquarePenIcon, { size: 16 })
-													})
-												}),
-												hfEditPosition && (() => {
-													if (!(() => {
-														if (hfEditIsFirstPage) return (() => {
-															if (hfEditPosition === "header") return firstPageHeaderContent;
-															return firstPageFooterContent;
-														})();
-														if (hfEditPosition === "header") return headerContent;
-														return footerContent;
-													})()) return null;
-													const targetEl = getHfTargetElement(hfEditPosition);
-													const parentEl_0 = editorContentRef.current;
-													if (!targetEl || !parentEl_0) return null;
-													return /* @__PURE__ */ jsx(InlineHeaderFooterEditor, {
-														ref: hfEditorRef,
-														position: hfEditPosition,
-														targetElement: targetEl,
-														parentElement: parentEl_0,
-														getActiveView: getActiveHfView,
-														onClose: handleBodyClick,
-														onRemove: handleRemoveHeaderFooter
-													});
-												})()
-											]
-										})
-									})]
+														})()
+													]
+												})
+											})]
+										}),
+										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 })
+									]
 								}),
 								scrollPageInfo.totalPages > 1 && /* @__PURE__ */ jsx("div", {
 									style: {
@@ -15201,13 +15956,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 										current: String(scrollPageInfo.currentPage),
 										total: String(scrollPageInfo.totalPages)
 									})
-								}),
-								showOutline && outlineHeadings.length > 1 && /* @__PURE__ */ jsx(DocumentOutline, {
-									headings: outlineHeadings,
-									scrollContainerRef,
-									topOffset: toolbarHeight,
-									docSize: pagedEditorRef.current?.getView()?.state.doc.content.size ?? 0,
-									onHeadingClick: handleOutlineHeadingClick
 								})
 							]
 						})
@@ -15244,7 +15992,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 						imageProperties: imagePropertiesDialog,
 						pageSetup: pageSetupDialog,
 						footnoteProperties: footnotePropertiesDialog,
-						insertSymbol: insertSymbolDialog
+						insertSymbol: insertSymbolDialog,
+						setNumberingValue: numberingValueDialog
 					}),
 					/* @__PURE__ */ jsx("input", {
 						ref: imageInputRef,
@@ -15385,4 +16134,4 @@ const renderAsync = (input, container, options = {}) => {
 	});
 };
 //#endregion
-export { formatZoom as a, FormattingBar as c, containedHandler as d, clampZoom as i, ZoomControl as l, DocxEditor as n, parseZoom as o, ZOOM_PRESETS as r, useWheelZoom as s, renderAsync as t, AutocompleteCaretOverlay as u };
+export { formatZoom as a, FormattingBar as c, AutocompleteCaretOverlay as d, containedHandler as f, clampZoom as i, ZoomControl as l, DocxEditor as n, parseZoom as o, ZOOM_PRESETS as r, useWheelZoom as s, renderAsync as t, useDrawerFocus as u };