@stll/folio-react 0.10.1 → 0.11.0

package/dist/{renderAsync-a7G-ZAcV.js → renderAsync-BjqXaR0h.js}

@@ -7,6 +7,7 @@ import { AlertCircleIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon,
 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 { resolveActiveEditorStory } from "@stll/folio-core/controller/activeEditorStory";
 import { normalizeBaseDirection } from "@stll/folio-core/docx/normalizeBaseDirection";
 import { getCachedNumberingMap } from "@stll/folio-core/docx/numberingParser";
 import { computeScrollPageInfo, updateScrollPageTotal } from "@stll/folio-core/paged-layout/scrollPageInfo";
@@ -24,7 +25,7 @@ import { createAICitationDecorationsPlugin } from "@stll/folio-core/prosemirror/
 import { AI_SUGGESTION_SEVERITY_CLASS, aiSuggestionDecorationsKey, createAISuggestionDecorationsPlugin } from "@stll/folio-core/prosemirror/plugins/aiSuggestionDecorations";
 import { anonymizationDecorationsKey, createAnonymizationDecorationsPlugin, slugAnonymizationLabel } from "@stll/folio-core/prosemirror/plugins/anonymizationDecorations";
 import { autocompleteSuggestionKey, autocompleteSuggestionPlugin } from "@stll/folio-core/prosemirror/plugins/autocompleteSuggestion";
-import { createSuggestionModePlugin, setSuggestionMode } from "@stll/folio-core/prosemirror/plugins/suggestionMode";
+import { createSuggestionModePlugin, 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";
@@ -36,15 +37,11 @@ import { formatPx, pixelsToTwips, pointsToHalfPoints, twipsToPixels } from "@stl
 import { HistoryManager, classifyHistoryShortcut } from "@stll/folio-core/managers/HistoryManager";
 import { TableSelectionManager } from "@stll/folio-core/managers/TableSelectionManager";
 import { createPortal } from "react-dom";
-import { EditorState, NodeSelection, Selection, TextSelection as TextSelection$1 } from "prosemirror-state";
+import { NodeSelection, Selection, TextSelection as TextSelection$1 } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
-import { EditorView } from "prosemirror-view";
-import { headerFooterToProseDoc } from "@stll/folio-core/prosemirror/conversion/toProseDoc";
-import { ensureBaseDirectionInState } from "@stll/folio-core/prosemirror/extensions/features/AutoBidiDetectionExtension";
-import { ensureParaIdsInState } from "@stll/folio-core/prosemirror/extensions/features/ParaIdAllocatorExtension";
-import { createDocumentStylesPlugin } from "@stll/folio-core/prosemirror/plugins/documentStyles";
-import { schema as schema$1 } from "@stll/folio-core/prosemirror/schema";
+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 { createFolioEditor } from "@stll/folio-core/controller/folioEditor";
 import { createFolioEditorEmitter } from "@stll/folio-core/controller/folioEditorEvents";
 import { createLatestRequestGate } from "@stll/folio-core/controller/latestRequestGate";
@@ -58,6 +55,7 @@ import { templatePreviewDirtyRange } from "@stll/folio-core/layout-bridge/conver
 import { clickToPositionDom } from "@stll/folio-core/layout-bridge/dom/clickToPositionDom";
 import { findBodyEmptyRuns, findBodyPmAnchor, findBodyPmAnchors, findBodyPmSpans } from "@stll/folio-core/layout-bridge/dom/findBodyPmSpans";
 import { clickToPositionInHfSlot, findHfCaretSpan, findHfPmSpans, findHfSlotForTarget, findHfSlotKindForTarget } from "@stll/folio-core/layout-bridge/dom/findHfPmSpans";
+import { findNoteStoryForTarget } from "@stll/folio-core/layout-bridge/dom/noteStoryDom";
 import { clickToPosition } from "@stll/folio-core/layout-bridge/engine/clickToPosition";
 import { getPageTop, hitTestFragment, hitTestTableCell } from "@stll/folio-core/layout-bridge/engine/hitTest";
 import { clearAllCaches, resetCanvasContext } from "@stll/folio-core/layout-bridge/engine/measuring";
@@ -80,9 +78,12 @@ import { expectImageAttrs, expectTableAttrs, expectTableCellAttrs, mergeImageAtt
 import { extractEmbeddedFonts } from "@stll/folio-core/fonts/embeddedFonts";
 import { panic } from "better-result";
 import { collectRemoteSelections, createHiddenEditorManager, createHiddenEditorState } from "@stll/folio-core/controller/hiddenEditorManager";
-import { clampRangeToDocSize, resolveFolioAIBlockRange, resolveFolioAITextRange } from "@stll/folio-core/ai-edits/blockRange";
+import { loadCollaborationModules } from "@stll/folio-core/controller/collaborationModules";
+import { clampRangeToDocSize, resolveFolioAIBlockRange, resolveFolioAITextRange, resolvePassageRange } from "@stll/folio-core/ai-edits/blockRange";
+import { getFolioParaIdFromBlockId } from "@stll/folio-core/types/block-id";
 import { getPageTextFromLayout } from "@stll/folio-core/paged-layout/pageText";
-import { CONTENT_CONTROL_WIDGET_EVENT_NAME, dispatchDatePick, dispatchDropdownPick } from "@stll/folio-core/prosemirror/plugins/contentControlWidgets";
+import { ContentControlWidgetController } from "@stll/folio-core/controller/contentControlWidgetController";
+import { createDefaultFindOptions, findInDocument } from "@stll/folio-core/utils/findReplace";
 import { ErrorManager } from "@stll/folio-core/managers/ErrorManager";
 import { ContextMenuManager } from "@stll/folio-core/managers/ContextMenuManager";
 import { DocumentLoaderManager } from "@stll/folio-core/managers/DocumentLoaderManager";
@@ -197,7 +198,7 @@ function useDocumentHistory(document, t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const options = t1;
-	const isEqual = _temp$10;
+	const isEqual = _temp$11;
 	let t2;
 	if ($[2] !== options) {
 		t2 = {
@@ -209,7 +210,7 @@ function useDocumentHistory(document, t0) {
 	} else t2 = $[3];
 	return useHistory(document, t2);
 }
-function _temp$10(a, b) {
+function _temp$11(a, b) {
 	if (a === b) return true;
 	const aPackage = a?.package;
 	const bPackage = b?.package;
@@ -311,54 +312,7 @@ function useTableSelection(t0) {
 }
 //#endregion
 //#region src/components/HiddenHeaderFooterPMs.tsx
-/**
-* HiddenHeaderFooterPMs — persistent off-screen ProseMirror EditorViews for
-* every distinct header/footer part in the loaded document.
-*
-* Mounts one hidden EditorView per distinct HF `rId` from
-* `Document.package.headers ∪ Document.package.footers`. The views never
-* become the visible HF renderer — the painter is the sole visible HF
-* renderer in both edit and non-edit modes. The persistent views own the
-* source of truth for HF content while the document is loaded; the
-* painter reads each rId's `view.state.doc` through
-* `convertHeaderFooterPmDocToContent`.
-*
-* Slot keying is by `rId`, NOT by `(hdrFtrType, kind)` — two sections that
-* share a header by referencing the same `rId` (ECMA-376 §17.10.1
-* sharing-by-reference) share one EditorView, so an edit on any painted
-* instance propagates to every painted instance in one layout pass.
-*
-* Unlike upstream's in-place `hf.content` mutation, folio's history-immutable
-* model surfaces every transaction through `onTransaction`; the parent
-* (`useHeaderFooterEditor` / `DocxEditor`) is the only place that pushes
-* Document changes through history.
-*/
-function buildInitialState(hf, styles, theme, mgr) {
-	const proseDocOptions = {};
-	if (styles) proseDocOptions.styles = styles;
-	if (theme !== void 0) proseDocOptions.theme = theme;
-	const pmDoc = headerFooterToProseDoc(hf.content, proseDocOptions);
-	const styleResolverPlugin = createDocumentStylesPlugin(styles);
-	return ensureBaseDirectionInState(ensureParaIdsInState(EditorState.create({
-		doc: pmDoc,
-		schema: schema$1,
-		plugins: [...mgr.getPlugins(), styleResolverPlugin]
-	})));
-}
-function enumerateHfSlotsFromParts({ headers, footers }) {
-	const out = [];
-	if (headers) for (const rId of headers.keys()) out.push({
-		rId,
-		kind: "header"
-	});
-	if (footers) {
-		for (const rId of footers.keys()) if (!headers || !headers.has(rId)) out.push({
-			rId,
-			kind: "footer"
-		});
-	}
-	return out;
-}
+/** Thin React binding for core's persistent header/footer editor manager. */
 const HOST_STYLES = {
 	position: "fixed",
 	left: -9999,
@@ -368,105 +322,41 @@ const HOST_STYLES = {
 	pointerEvents: "none"
 };
 const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ document, styles, theme, onTransaction }, ref) {
-	const onTransactionRef = useRef(onTransaction);
-	onTransactionRef.current = onTransaction;
 	const hostRef = useRef(null);
-	const mountedRef = useRef(/* @__PURE__ */ new Map());
-	const managersRef = useRef(/* @__PURE__ */ new Map());
 	const documentRef = useRef(document);
+	const stylesRef = useRef(styles);
+	const themeRef = useRef(theme);
+	const onTransactionRef = useRef(onTransaction);
 	documentRef.current = document;
-	const resolveHf = useCallback((rId, kind) => {
-		const pkg = documentRef.current?.package;
-		if (!pkg) return null;
-		return (kind === "header" ? pkg.headers : pkg.footers)?.get(rId) ?? null;
-	}, []);
+	stylesRef.current = styles;
+	themeRef.current = theme;
+	onTransactionRef.current = onTransaction;
+	const managerRef = useRef(null);
+	managerRef.current ??= createHeaderFooterEditorManager({
+		getHost: () => hostRef.current,
+		getDocument: () => documentRef.current,
+		getStyles: () => stylesRef.current,
+		getTheme: () => themeRef.current,
+		onTransaction: ({ rId, kind, view, docChanged, selectionChanged }) => {
+			onTransactionRef.current?.(rId, kind, view, docChanged, selectionChanged);
+		}
+	});
 	const headers = document?.package.headers;
 	const footers = document?.package.footers;
-	const slots = useMemo(() => enumerateHfSlotsFromParts({
-		headers,
-		footers
-	}), [headers, footers]);
 	useEffect(() => {
-		if (!hostRef.current) return;
-		const host = hostRef.current;
-		const want = new Map(slots.map((s) => [s.rId, s]));
-		const have = mountedRef.current;
-		for (const [rId_0, mounted] of have) if (!want.has(rId_0)) {
-			mounted.view.destroy();
-			mounted.mountNode.remove();
-			have.delete(rId_0);
-			managersRef.current.delete(rId_0);
-		}
-		for (const slot of slots) {
-			const hf = resolveHf(slot.rId, slot.kind);
-			if (!hf) continue;
-			const existing = have.get(slot.rId);
-			if (existing) {
-				if (existing.appliedHf === hf && existing.appliedContent === hf.content) continue;
-				const mgr = managersRef.current.get(slot.rId);
-				if (!mgr) continue;
-				const newState = buildInitialState(hf, styles, theme, mgr);
-				existing.view.updateState(newState);
-				existing.appliedHf = hf;
-				existing.appliedContent = hf.content;
-				continue;
-			}
-			const mgr_0 = new ExtensionManager(createStarterKit());
-			mgr_0.buildSchema();
-			mgr_0.initializeRuntime();
-			managersRef.current.set(slot.rId, mgr_0);
-			const node = host.ownerDocument.createElement("div");
-			node.dataset["hfRId"] = slot.rId;
-			node.dataset["hfKind"] = slot.kind;
-			host.append(node);
-			const state = buildInitialState(hf, styles, theme, mgr_0);
-			const slotRId = slot.rId;
-			const slotKind = slot.kind;
-			const view = new EditorView(node, {
-				state,
-				dispatchTransaction(tr) {
-					const newState_0 = view.state.apply(tr);
-					view.updateState(newState_0);
-					onTransactionRef.current?.(slotRId, slotKind, view, tr.docChanged, tr.selectionSet);
-				}
-			});
-			have.set(slot.rId, {
-				rId: slot.rId,
-				kind: slot.kind,
-				view,
-				mountNode: node,
-				appliedHf: hf,
-				appliedContent: hf.content
-			});
-		}
+		managerRef.current?.sync();
 	}, [
-		slots,
-		resolveHf,
+		headers,
+		footers,
 		styles,
 		theme
 	]);
-	useEffect(() => {
-		const have_0 = mountedRef.current;
-		const mgrs = managersRef.current;
-		return () => {
-			for (const { view: view_0, mountNode } of have_0.values()) {
-				view_0.destroy();
-				mountNode.remove();
-			}
-			have_0.clear();
-			mgrs.clear();
-		};
+	useEffect(() => () => {
+		managerRef.current?.destroy();
 	}, []);
 	useImperativeHandle(ref, () => ({
-		getView(rId_1) {
-			return mountedRef.current.get(rId_1)?.view ?? null;
-		},
-		listSlots() {
-			return [...mountedRef.current.values()].map(({ rId: rId_2, kind: kind_0 }) => ({
-				rId: rId_2,
-				kind: kind_0
-			}));
-		}
+		getView: (rId) => managerRef.current?.getView(rId) ?? null,
+		listSlots: () => managerRef.current?.listSlots() ?? []
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
 		ref: hostRef,
@@ -475,6 +365,292 @@ const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ d
 }));
 HiddenHeaderFooterPMs.displayName = "HiddenHeaderFooterPMs";
 //#endregion
+//#region src/components/NoteStoryEditor.tsx
+/** Thin React surface over core's persistent note-story editor manager. */
+const panelStyle = {
+	position: "absolute",
+	right: 24,
+	bottom: 24,
+	width: "min(560px, calc(100% - 48px))",
+	maxHeight: "45%",
+	overflow: "auto",
+	zIndex: 30,
+	background: "var(--doc-canvas, #fff)",
+	color: "var(--doc-canvas-text, #000)",
+	border: "1px solid var(--doc-border, rgba(0, 0, 0, 0.18))",
+	borderRadius: 6,
+	boxShadow: "0 8px 28px rgba(0, 0, 0, 0.18)"
+};
+const headerStyle = {
+	position: "sticky",
+	top: 0,
+	zIndex: 1,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	padding: "8px 12px",
+	background: "var(--doc-canvas, #fff)",
+	borderBottom: "1px solid var(--doc-border, rgba(0, 0, 0, 0.12))",
+	fontSize: 12,
+	fontWeight: 600
+};
+const hostStyle = {
+	padding: "12px 16px",
+	minHeight: 72
+};
+const EMPTY_PLUGINS$1 = [];
+const NoteStoryEditor = forwardRef(function NoteStoryEditor(t0, ref) {
+	const $ = c(51);
+	const { document, onActiveChange, onDocumentChange, onStoryChange, plugins, styles, suggestionAuthor, suggestionModeActive, theme } = t0;
+	const t = useTranslations("folio");
+	const resolvedPlugins = plugins ?? EMPTY_PLUGINS$1;
+	const isSuggestionModeActive = suggestionModeActive ?? false;
+	const hostRef = useRef(null);
+	const documentRef = useRef(document);
+	const stylesRef = useRef(styles);
+	const themeRef = useRef(theme);
+	const pluginsRef = useRef(resolvedPlugins);
+	const onDocumentChangeRef = useRef(onDocumentChange);
+	const onActiveChangeRef = useRef(onActiveChange);
+	const onStoryChangeRef = useRef(onStoryChange);
+	const [active, setActive] = useState(null);
+	const managerRef = useRef(null);
+	const footnotes = document?.package.footnotes;
+	const endnotes = document?.package.endnotes;
+	let t1;
+	if ($[0] !== active || $[1] !== document || $[2] !== onActiveChange || $[3] !== onDocumentChange || $[4] !== onStoryChange || $[5] !== resolvedPlugins || $[6] !== styles || $[7] !== theme) {
+		t1 = () => {
+			documentRef.current = document;
+			stylesRef.current = styles;
+			themeRef.current = theme;
+			pluginsRef.current = resolvedPlugins;
+			onDocumentChangeRef.current = onDocumentChange;
+			onActiveChangeRef.current = onActiveChange;
+			onStoryChangeRef.current = onStoryChange;
+			if (managerRef.current === null) managerRef.current = createNoteEditorManager({
+				getDocument: () => documentRef.current,
+				getHost: () => hostRef.current,
+				getPlugins: () => pluginsRef.current,
+				getStyles: () => stylesRef.current,
+				getTheme: () => themeRef.current,
+				onTransaction: (t2) => {
+					const { docChanged, selectionChanged, view } = t2;
+					if (docChanged) {
+						const current = documentRef.current;
+						if (current) onDocumentChangeRef.current(managerRef.current?.snapshotDocument(current) ?? current);
+					}
+					onStoryChangeRef.current(view, docChanged, selectionChanged);
+				}
+			});
+			const manager = managerRef.current;
+			manager.sync();
+			if (active && !manager?.getActive()) {
+				setActive(null);
+				onActiveChangeRef.current(null);
+			}
+		};
+		$[0] = active;
+		$[1] = document;
+		$[2] = onActiveChange;
+		$[3] = onDocumentChange;
+		$[4] = onStoryChange;
+		$[5] = resolvedPlugins;
+		$[6] = styles;
+		$[7] = theme;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== active || $[10] !== document || $[11] !== endnotes || $[12] !== footnotes || $[13] !== onActiveChange || $[14] !== onDocumentChange || $[15] !== onStoryChange || $[16] !== resolvedPlugins || $[17] !== styles || $[18] !== theme) {
+		t2 = [
+			active,
+			document,
+			endnotes,
+			footnotes,
+			onActiveChange,
+			onDocumentChange,
+			onStoryChange,
+			resolvedPlugins,
+			styles,
+			theme
+		];
+		$[9] = active;
+		$[10] = document;
+		$[11] = endnotes;
+		$[12] = footnotes;
+		$[13] = onActiveChange;
+		$[14] = onDocumentChange;
+		$[15] = onStoryChange;
+		$[16] = resolvedPlugins;
+		$[17] = styles;
+		$[18] = theme;
+		$[19] = t2;
+	} else t2 = $[19];
+	useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[20] !== isSuggestionModeActive || $[21] !== suggestionAuthor) {
+		t3 = () => {
+			const manager_0 = managerRef.current;
+			if (!manager_0) return;
+			for (const story of manager_0.listStories()) {
+				const view_0 = manager_0.getView(story);
+				if (view_0) setSuggestionMode(isSuggestionModeActive, view_0.state, view_0.dispatch, suggestionAuthor);
+			}
+		};
+		t4 = [isSuggestionModeActive, suggestionAuthor];
+		$[20] = isSuggestionModeActive;
+		$[21] = suggestionAuthor;
+		$[22] = t3;
+		$[23] = t4;
+	} else {
+		t3 = $[22];
+		t4 = $[23];
+	}
+	useEffect(t3, t4);
+	let t5;
+	let t6;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => () => {
+			managerRef.current?.destroy();
+		};
+		t6 = [];
+		$[24] = t5;
+		$[25] = t6;
+	} else {
+		t5 = $[24];
+		t6 = $[25];
+	}
+	useEffect(t5, t6);
+	let t7;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			managerRef.current?.activate(null);
+			setActive(null);
+			onActiveChangeRef.current(null);
+		};
+		$[26] = t7;
+	} else t7 = $[26];
+	const closeEditor = t7;
+	let t8;
+	if ($[27] !== isSuggestionModeActive || $[28] !== suggestionAuthor) {
+		t8 = () => ({
+			close: closeEditor,
+			getActiveView: () => {
+				const story_0 = managerRef.current?.getActive();
+				return story_0 ? managerRef.current?.getView(story_0) ?? null : null;
+			},
+			open: (story_1) => {
+				const view_1 = managerRef.current?.activate(story_1);
+				if (!view_1) return;
+				setSuggestionMode(isSuggestionModeActive, view_1.state, view_1.dispatch, suggestionAuthor);
+				setActive(story_1);
+				onActiveChangeRef.current(story_1);
+				requestAnimationFrame(() => view_1.focus());
+			},
+			snapshotDocument: (current_0) => managerRef.current?.snapshotDocument(current_0) ?? current_0
+		});
+		$[27] = isSuggestionModeActive;
+		$[28] = suggestionAuthor;
+		$[29] = t8;
+	} else t8 = $[29];
+	useImperativeHandle(ref, t8);
+	let t9;
+	if ($[30] !== active || $[31] !== t) {
+		t9 = active ? t(active.kind === "footnote" ? "dialogs.footnoteProperties.footnotes" : "dialogs.footnoteProperties.endnotes") : "";
+		$[30] = active;
+		$[31] = t;
+		$[32] = t9;
+	} else t9 = $[32];
+	const title = t9;
+	const t10 = active ? "block" : "none";
+	let t11;
+	if ($[33] !== t10) {
+		t11 = {
+			...panelStyle,
+			display: t10
+		};
+		$[33] = t10;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			closeEditor();
+		};
+		$[35] = t12;
+	} else t12 = $[35];
+	let t13;
+	if ($[36] !== title) {
+		t13 = /* @__PURE__ */ jsx("span", { children: title });
+		$[36] = title;
+		$[37] = t13;
+	} else t13 = $[37];
+	let t14;
+	if ($[38] !== t) {
+		t14 = t("common.closeDialog");
+		$[38] = t;
+		$[39] = t14;
+	} else t14 = $[39];
+	let t15;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = {
+			border: 0,
+			background: "transparent",
+			color: "inherit",
+			cursor: "pointer"
+		};
+		$[40] = t15;
+	} else t15 = $[40];
+	let t16;
+	if ($[41] !== t14) {
+		t16 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t14,
+			onClick: closeEditor,
+			style: t15,
+			children: "×"
+		});
+		$[41] = t14;
+		$[42] = t16;
+	} else t16 = $[42];
+	let t17;
+	if ($[43] !== t13 || $[44] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			style: headerStyle,
+			children: [t13, t16]
+		});
+		$[43] = t13;
+		$[44] = t16;
+		$[45] = t17;
+	} else t17 = $[45];
+	let t18;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx("div", {
+			ref: hostRef,
+			style: hostStyle
+		});
+		$[46] = t18;
+	} else t18 = $[46];
+	let t19;
+	if ($[47] !== t11 || $[48] !== t17 || $[49] !== title) {
+		t19 = /* @__PURE__ */ jsxs("aside", {
+			style: t11,
+			"aria-label": title,
+			onKeyDown: t12,
+			children: [t17, t18]
+		});
+		$[47] = t11;
+		$[48] = t17;
+		$[49] = title;
+		$[50] = t19;
+	} else t19 = $[50];
+	return t19;
+});
+NoteStoryEditor.displayName = "NoteStoryEditor";
+//#endregion
 //#region src/utils/contained-handler.ts
 /**
 * Wrap a React event handler so it only fires when the event target
@@ -517,7 +693,7 @@ const containedHandler = (handler) => (event) => {
 };
 //#endregion
 //#region src/paged-editor/AISuggestionRectsOverlay.tsx
-const overlayStyles$5 = {
+const overlayStyles$6 = {
 	position: "absolute",
 	top: 0,
 	left: "50%",
@@ -539,14 +715,14 @@ const AISuggestionRectsOverlay = (t0) => {
 	if (groups.length === 0) return null;
 	let t1;
 	if ($[0] !== groups) {
-		t1 = groups.map(_temp$9);
+		t1 = groups.map(_temp$10);
 		$[0] = groups;
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
 	if ($[2] !== t1) {
 		t2 = /* @__PURE__ */ jsx("div", {
-			style: overlayStyles$5,
+			style: overlayStyles$6,
 			"data-folio-ai-suggestions-overlay": "",
 			children: t1
 		});
@@ -555,7 +731,7 @@ const AISuggestionRectsOverlay = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-function _temp$9(t0) {
+function _temp$10(t0) {
 	const { suggestion, rects, focused, font } = t0;
 	const replacementAnchor = rects.at(-1);
 	const showReplacement = focused && suggestion.suggestedText.length > 0 && replacementAnchor !== void 0;
@@ -616,7 +792,7 @@ function _temp$9(t0) {
 * `selectionSeq` changes — repeated clicks of the same
 * canonical in the sidebar re-trigger the scroll).
 */
-const overlayStyles$4 = {
+const overlayStyles$5 = {
 	position: "absolute",
 	top: 0,
 	left: "50%",
@@ -676,7 +852,7 @@ const AnonymizationRectsOverlay = ({ groups, onTermClick, selectedCanonical = nu
 	if (groups.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
 		ref: overlayRef,
-		style: overlayStyles$4,
+		style: overlayStyles$5,
 		"data-folio-anonymization-overlay": "",
 		children: groups.flatMap((group) => {
 			const isSelected = selectedCanonical === group.canonical;
@@ -706,7 +882,7 @@ const AnonymizationRectsOverlay = ({ groups, onTermClick, selectedCanonical = nu
 };
 //#endregion
 //#region src/paged-editor/AutocompleteCaretOverlay.tsx
-const overlayStyles$3 = {
+const overlayStyles$4 = {
 	position: "absolute",
 	top: 0,
 	left: "50%",
@@ -757,7 +933,7 @@ const AutocompleteCaretOverlay = (t0) => {
 	let t6;
 	if ($[9] !== t3 || $[10] !== t5 || $[11] !== text) {
 		t6 = /* @__PURE__ */ jsx("div", {
-			style: overlayStyles$3,
+			style: overlayStyles$4,
 			"data-folio-autocomplete-overlay": "",
 			children: /* @__PURE__ */ jsxs("span", {
 				className: "folio-autocomplete-ghost",
@@ -773,6 +949,52 @@ const AutocompleteCaretOverlay = (t0) => {
 	return t6;
 };
 //#endregion
+//#region src/paged-editor/PassageHighlightOverlay.tsx
+const overlayStyles$3 = {
+	position: "absolute",
+	top: 0,
+	left: "50%",
+	width: "100vw",
+	height: "100%",
+	transform: "translateX(-50%)",
+	pointerEvents: "none",
+	zIndex: 1
+};
+const PassageHighlightOverlay = (t0) => {
+	const $ = c(4);
+	const { rects } = t0;
+	if (rects.length === 0) return null;
+	let t1;
+	if ($[0] !== rects) {
+		t1 = rects.map(_temp$9);
+		$[0] = rects;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			style: overlayStyles$3,
+			"data-folio-passage-highlight-overlay": "",
+			children: t1
+		});
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+};
+function _temp$9(rect, idx) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "folio-passage-highlight",
+		style: {
+			position: "absolute",
+			left: rect.x,
+			top: rect.y,
+			width: rect.width,
+			height: rect.height
+		}
+	}, `${idx}:${rect.pageIndex}:${rect.x}:${rect.y}`);
+}
+//#endregion
 //#region src/paged-editor/embeddedFonts.ts
 /**
 * Registers a document's embedded fonts with the browser via the `FontFace`
@@ -878,6 +1100,7 @@ function toFontFaceInputs(fonts) {
 		if (!isValidFontDefinition(font)) continue;
 		const descriptors = { display: "swap" };
 		if (typeof font.weight === "number" || typeof font.weight === "string") descriptors.weight = String(font.weight);
+		if (isNonEmptyString$1(font.style)) descriptors.style = font.style.trim();
 		inputs.push({
 			family: font.family.trim(),
 			source: `url(${JSON.stringify(font.src.trim())})`,
@@ -923,17 +1146,6 @@ async function loadHostFontFaces(fonts) {
 * so that ProseMirror's internal measurements stay valid.
 */
 const EMPTY_EXTERNAL_PLUGINS = [];
-let collaborationModulesPromise = null;
-const loadCollaborationModules = () => {
-	collaborationModulesPromise ??= Promise.all([import("y-prosemirror"), import("yjs")]).then(([yProseMirror, yjs]) => ({
-		yProseMirror,
-		yjs
-	})).catch((error) => {
-		collaborationModulesPromise = null;
-		throw error;
-	});
-	return collaborationModulesPromise;
-};
 /**
 * Hidden wrapper styles - visually hidden, focus-safe scroll isolation.
 *
@@ -968,7 +1180,7 @@ const HIDDEN_HOST_STYLES = {
 * HiddenProseMirror - Off-screen ProseMirror editor for keyboard input
 */
 const HiddenProseMirror = forwardRef((props, ref) => {
-	const { document, documentKey, styles, theme: _theme, widthPx = 612, readOnly = false, onTransaction, onSelectionChange, externalPlugins = EMPTY_EXTERNAL_PLUGINS, collaboration, extensionManager, onEditorViewReady, onEditorViewDestroy, onKeyDown, onReadOnlyEditAttempt, onRemoteSelectionsChange, precomputedInitialState } = props;
+	const { document, documentKey, styles, theme: _theme, widthPx = 612, readOnly = false, onTransaction, onSelectionChange, externalPlugins = EMPTY_EXTERNAL_PLUGINS, collaboration, extensionManager, onEditorViewReady, onEditorViewDestroy, onKeyDown, onCopy, onCut, onPaste, onReadOnlyEditAttempt, onRemoteSelectionsChange, precomputedInitialState } = props;
 	const [collaborationModules, setCollaborationModules] = useState(null);
 	const [collaborationModulesError, setCollaborationModulesError] = useState(null);
 	const hasCollaboration = collaboration !== void 0;
@@ -987,6 +1199,9 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 	const onEditorViewReadyRef = useRef(onEditorViewReady);
 	const onEditorViewDestroyRef = useRef(onEditorViewDestroy);
 	const onKeyDownRef = useRef(onKeyDown);
+	const onCopyRef = useRef(onCopy);
+	const onCutRef = useRef(onCut);
+	const onPasteRef = useRef(onPaste);
 	const onReadOnlyEditAttemptRef = useRef(onReadOnlyEditAttempt);
 	const onRemoteSelectionsChangeRef = useRef(onRemoteSelectionsChange);
 	readOnlyRef.current = readOnly;
@@ -999,6 +1214,9 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 	onEditorViewReadyRef.current = onEditorViewReady;
 	onEditorViewDestroyRef.current = onEditorViewDestroy;
 	onKeyDownRef.current = onKeyDown;
+	onCopyRef.current = onCopy;
+	onCutRef.current = onCut;
+	onPasteRef.current = onPaste;
 	onReadOnlyEditAttemptRef.current = onReadOnlyEditAttempt;
 	onRemoteSelectionsChangeRef.current = onRemoteSelectionsChange;
 	collaborationRef.current = collaboration;
@@ -1021,6 +1239,9 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 		onTransaction: (transaction, newState) => onTransactionRef.current?.(transaction, newState),
 		onSelectionChange: (state) => onSelectionChangeRef.current?.(state),
 		onKeyDown: (view, event) => onKeyDownRef.current?.(view, event) ?? false,
+		onCopy: () => onCopyRef.current?.(),
+		onCut: () => onCutRef.current?.(),
+		onPaste: () => onPasteRef.current?.(),
 		onReadOnlyEditAttempt: () => onReadOnlyEditAttemptRef.current?.(),
 		onEditorViewReady: (view_0) => onEditorViewReadyRef.current?.(view_0),
 		onEditorViewDestroy: () => onEditorViewDestroyRef.current?.(),
@@ -2822,6 +3043,7 @@ function buildFootnoteRenderItems(pageFootnoteMap, footnoteContentMap, doc) {
 			const text = getFootnoteText(fn);
 			items.push({
 				displayNumber: String(displayNum),
+				noteId: fnId,
 				text,
 				...content ? { content: {
 					blocks: content.blocks,
@@ -2838,7 +3060,7 @@ function buildFootnoteRenderItems(pageFootnoteMap, footnoteContentMap, doc) {
 * PagedEditor - Main paginated editing component.
 */
 const PagedEditor = forwardRef(function PagedEditor(props, ref) {
-	const { document, documentKey, fonts: hostFonts, styles, theme: _theme, sectionProperties, headerContent, footerContent, firstPageHeaderContent, firstPageFooterContent, headerContentRId, footerContentRId, firstPageHeaderContentRId, firstPageFooterContentRId, readOnly = false, pageGap = 24, zoom = 1, onDocumentChange, onReadOnlyEditAttempt, onSelectionChange, onSelectionTextChange, onEditorViewReady, externalPlugins = EMPTY_PLUGINS, showTemplateDirectives = true, collaboration, extensionManager, onHeaderFooterDoubleClick, hfEditMode, onBodyClick, className, style, commentsSidebarOpen = false, sidebarOverlay, scrollContainerRef: scrollContainerRefProp, onHyperlinkClick, onContextMenu, onAnchorPositionsChange, onTotalPagesChange, anchorPositionMode = "comments-and-revisions", onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq } = props;
+	const { document, documentKey, fonts: hostFonts, styles, theme: _theme, sectionProperties, headerContent, footerContent, firstPageHeaderContent, firstPageFooterContent, headerContentRId, footerContentRId, firstPageHeaderContentRId, firstPageFooterContentRId, readOnly = false, pageGap = 24, zoom = 1, 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, anchorPositionMode = "comments-and-revisions", onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq } = props;
 	const getScrollContainer = useCallback(() => {
 		if (scrollContainerRefProp && typeof scrollContainerRefProp === "object") return scrollContainerRefProp.current;
 		return containerRef.current;
@@ -2848,7 +3070,17 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const folioEmitterRef = useRef(createFolioEditorEmitter());
 	const hiddenPMRef = useRef(null);
 	const hfPMsRef = useRef(null);
+	const noteEditorRef = useRef(null);
+	const [noteStoryActive, setNoteStoryActive] = useState(false);
 	const painterRef = useRef(null);
+	const noteStoryPlugins = useMemo(() => externalPlugins.filter(({ spec }) => spec.key === suggestionModeKey), [externalPlugins]);
+	const handleActiveNoteStoryChange = useCallback((story) => {
+		setNoteStoryActive(story !== null);
+		onActiveNoteStoryChange?.(story);
+	}, [onActiveNoteStoryChange]);
+	useEffect(() => {
+		if (readOnly) noteEditorRef.current?.close();
+	}, [readOnly]);
 	const { handlePMKeyDown } = useVisualLineNavigation({ pagesContainerRef });
 	const handleHiddenEditorKeyDown = useCallback((view, event) => {
 		if (getTemplateSlashMenu(view.state).active) return false;
@@ -2913,6 +3145,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		focusedId: null
 	});
 	const [aiSuggestionsOverlayRequestGate] = useState(createLatestRequestGate);
+	const passageHighlightRangeRef = useRef(null);
+	const [passageHighlightRects, setPassageHighlightRects] = useState([]);
+	const [passageHighlightOverlayRequestGate] = useState(createLatestRequestGate);
 	const [remoteSelections, setRemoteSelections] = useState([]);
 	const suppressSelectionOverlayRef = useRef(false);
 	const revealSelectionOverlayTimerRef = useRef(null);
@@ -3099,6 +3334,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			pageSize,
 			margins,
 			pageGap,
+			showMarginGuides,
+			marginGuideColor,
 			syncCoordinator,
 			headerContent,
 			footerContent,
@@ -3142,6 +3379,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		margins,
 		pageGap,
 		zoom,
+		showMarginGuides,
+		marginGuideColor,
 		syncCoordinator,
 		headerContent,
 		footerContent,
@@ -3169,6 +3408,27 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		emitter: folioEmitterRef.current
 	});
 	const folioEditor = folioEditorRef.current;
+	const getActiveEditorStory = useCallback(() => resolveActiveEditorStory({
+		bodyView: folioEditor.getView(),
+		headerFooterView: hfEditMode && activeHeaderFooterRId ? hfPMsRef.current?.getView(activeHeaderFooterRId) ?? null : null,
+		noteView: noteEditorRef.current?.getActiveView() ?? null
+	}), [
+		activeHeaderFooterRId,
+		folioEditor,
+		hfEditMode
+	]);
+	const marginGuideSettingsInitializedRef = useRef(false);
+	useEffect(() => {
+		if (!marginGuideSettingsInitializedRef.current) {
+			marginGuideSettingsInitializedRef.current = true;
+			return;
+		}
+		folioEditor.relayout();
+	}, [
+		folioEditor,
+		marginGuideColor,
+		showMarginGuides
+	]);
 	const layoutSchedulerRef = useRef(null);
 	if (layoutSchedulerRef.current === null) layoutSchedulerRef.current = createLayoutScheduler({
 		runLayout: (state_1, options_1) => runLayoutPipelineRef.current(state_1, options_1),
@@ -3656,6 +3916,41 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		measures,
 		zoom
 	]);
+	const updatePassageHighlightOverlay = useCallback(() => {
+		const isCurrentRequest_4 = passageHighlightOverlayRequestGate.begin();
+		const range_5 = passageHighlightRangeRef.current;
+		const pagesContainer_3 = pagesContainerRef.current;
+		if (range_5 === null || !pagesContainer_3) {
+			setPassageHighlightRects((prev_0) => prev_0.length === 0 ? prev_0 : []);
+			return;
+		}
+		(async () => {
+			const projected_1 = await projectRangesToRects([range_5], {
+				pagesContainer: pagesContainer_3,
+				zoom,
+				layout,
+				blocks,
+				measures
+			});
+			if (!isCurrentRequest_4()) return;
+			setPassageHighlightRects(projected_1.at(0)?.rects ?? []);
+		})();
+	}, [
+		passageHighlightOverlayRequestGate,
+		layout,
+		blocks,
+		measures,
+		zoom
+	]);
+	const setPassageHighlightImpl = useCallback((range_6) => {
+		passageHighlightRangeRef.current = range_6;
+		if (range_6 === null) {
+			passageHighlightOverlayRequestGate.invalidate();
+			setPassageHighlightRects((prev_1) => prev_1.length === 0 ? prev_1 : []);
+			return;
+		}
+		updatePassageHighlightOverlay();
+	}, [passageHighlightOverlayRequestGate, updatePassageHighlightOverlay]);
 	const hideSelectionOverlayDuringInput = useCallback((state_4) => {
 		selectionOverlayRequestGate.invalidate();
 		suppressSelectionOverlayRef.current = true;
@@ -3674,6 +3969,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		autocompleteOverlayRequestGate.invalidate();
 		directivesOverlayRequestGate.invalidate();
 		aiSuggestionsOverlayRequestGate.invalidate();
+		passageHighlightOverlayRequestGate.invalidate();
 		if (revealSelectionOverlayTimerRef.current !== null) {
 			window.clearTimeout(revealSelectionOverlayTimerRef.current);
 			revealSelectionOverlayTimerRef.current = null;
@@ -3683,6 +3979,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		anonymizationOverlayRequestGate,
 		autocompleteOverlayRequestGate,
 		directivesOverlayRequestGate,
+		passageHighlightOverlayRequestGate,
 		selectionOverlayRequestGate
 	]);
 	/**
@@ -3730,6 +4027,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		}
 		if (transaction.docChanged) {
 			syncCoordinator.incrementStateSeq();
+			if (passageHighlightRangeRef.current !== null) {
+				passageHighlightRangeRef.current = null;
+				passageHighlightOverlayRequestGate.invalidate();
+				setPassageHighlightRects((prev_2) => prev_2.length === 0 ? prev_2 : []);
+			}
 			hideSelectionOverlayDuringInput(newState);
 			scheduleLayout(newState, getTransactionDirtyRange(transaction));
 			scheduleDocumentChangeNotification();
@@ -3745,6 +4047,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		updateAutocompleteOverlay,
 		updateDirectivesOverlay,
 		updateAISuggestionsOverlay,
+		passageHighlightOverlayRequestGate,
 		syncCoordinator
 	]);
 	/**
@@ -3791,6 +4094,24 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			});
 		}
 	}, [scheduleLayout, ensureHiddenEditorView]);
+	const handleNoteStoryTransaction = useCallback((view_2, docChanged_0, selectionChanged_0) => {
+		if (docChanged_0) {
+			const bodyState_0 = hiddenPMRef.current?.getState();
+			if (bodyState_0) scheduleLayout(bodyState_0, null);
+		}
+		if (docChanged_0 || selectionChanged_0) {
+			const { from: from_2, to: to_2 } = view_2.state.selection;
+			onSelectionChangeRef.current?.(from_2, to_2);
+			folioEmitterRef.current.emit("selectionChange", {
+				from: from_2,
+				to: to_2
+			});
+		}
+	}, [scheduleLayout]);
+	const handleNoteDocumentChange = useCallback((updated) => {
+		onDocumentChangeRef.current?.(updated);
+		folioEmitterRef.current.emit("docChange", updated);
+	}, []);
 	useEffect(() => {
 		if (!hfEditMode) setHfCaretSelection(null);
 		dragAnchorRef.current = null;
@@ -3807,12 +4128,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			setCaretPosition(null);
 		} else if (syncCoordinator.isSafeToRender()) updateSelectionOverlay(state_5);
 		requestAnimationFrame(() => {
-			const view_2 = hiddenPMRef.current?.getView();
-			if (!view_2) {
+			const view_3 = hiddenPMRef.current?.getView();
+			if (!view_3) {
 				setSelectedImageInfo(null);
 				return;
 			}
-			const { selection: sel_0 } = view_2.state;
+			const { selection: sel_0 } = view_3.state;
 			if (sel_0 instanceof NodeSelection && sel_0.node.type.name === "image") {
 				const pmPos_2 = sel_0.from;
 				const imgEl = pagesContainerRef.current ? findBodyPmAnchor(pagesContainerRef.current, pmPos_2) : null;
@@ -3888,9 +4209,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		return null;
 	}, []);
 	const findCellPosFromPmPos = useCallback((pmPos_4) => {
-		const view_3 = hiddenPMRef.current?.getView();
-		if (!view_3) return null;
-		return findCellPosInDoc(view_3.state.doc, pmPos_4);
+		const view_4 = hiddenPMRef.current?.getView();
+		if (!view_4) return null;
+		return findCellPosInDoc(view_4.state.doc, pmPos_4);
 	}, [findCellPosInDoc]);
 	/**
 	* Find the closest image element from a click target.
@@ -3978,10 +4299,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			cellDragAnchorPosRef.current = null;
 			cellDragContentEndRef.current = null;
 			isCellDraggingRef.current = false;
-			const view_4 = hiddenPMRef.current?.getView();
+			const view_5 = hiddenPMRef.current?.getView();
 			let endPos;
-			if (view_4) {
-				endPos = Math.max(0, view_4.state.doc.content.size - 1);
+			if (view_5) {
+				endPos = Math.max(0, view_5.state.doc.content.size - 1);
 				hiddenPMRef.current?.setSelection(endPos);
 			} else {
 				endPos = Math.max(0, (precomputedInitialStateRef.current?.doc.content.size ?? 1) - 1);
@@ -4001,11 +4322,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		queueHiddenEditorSelection
 	]);
 	const copySelectionText = useCallback(() => {
-		const view_5 = hiddenPMRef.current?.getView();
-		if (!view_5) return false;
-		const { from: from_2, to: to_2 } = view_5.state.selection;
-		if (from_2 === to_2) return false;
-		const text_1 = view_5.state.doc.textBetween(from_2, to_2, "\n");
+		const view_6 = hiddenPMRef.current?.getView();
+		if (!view_6) return false;
+		const { from: from_3, to: to_3 } = view_6.state.selection;
+		if (from_3 === to_3) return false;
+		const text_1 = view_6.state.doc.textBetween(from_3, to_3, "\n");
 		if (!text_1) return false;
 		if (navigator.clipboard === void 0) return false;
 		navigator.clipboard.writeText(text_1).catch(() => void 0);
@@ -4025,6 +4346,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		clearTableInsertTimer();
 		const target_1 = e.target instanceof HTMLElement ? e.target : null;
 		if (!target_1) return;
+		noteEditorRef.current?.close();
 		const anchorClosest = target_1.closest("a[href]");
 		if (anchorClosest instanceof HTMLAnchorElement ? anchorClosest : null) e.preventDefault();
 		if (!readOnly && hfEditMode && onBodyClick) {
@@ -4098,9 +4420,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const colIndex = Number.parseInt(target_1.dataset["columnIndex"] ?? "0", 10);
 			resizeColumnIndexRef.current = colIndex;
 			resizeTablePmStartRef.current = Number.parseInt(target_1.dataset["tablePmStart"] ?? "0", 10);
-			const view_6 = resizeViewForRead;
-			if (view_6) {
-				const $pos_1 = view_6.state.doc.resolve(resizeTablePmStartRef.current + 1);
+			const view_7 = resizeViewForRead;
+			if (view_7) {
+				const $pos_1 = view_7.state.doc.resolve(resizeTablePmStartRef.current + 1);
 				for (let d_0 = $pos_1.depth; d_0 >= 0; d_0--) {
 					const node_1 = $pos_1.node(d_0);
 					if (node_1.type.name === "table") {
@@ -4130,9 +4452,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const rowIndex = Number.parseInt(target_1.dataset["rowIndex"] ?? "0", 10);
 			resizeRowIndexRef.current = rowIndex;
 			resizeRowTablePmStartRef.current = Number.parseInt(target_1.dataset["tablePmStart"] ?? "0", 10);
-			const view_7 = resizeViewForRead;
-			if (view_7) {
-				const $pos_2 = view_7.state.doc.resolve(resizeRowTablePmStartRef.current + 1);
+			const view_8 = resizeViewForRead;
+			if (view_8) {
+				const $pos_2 = view_8.state.doc.resolve(resizeRowTablePmStartRef.current + 1);
 				for (let d_1 = $pos_2.depth; d_1 >= 0; d_1--) {
 					const node_2 = $pos_2.node(d_1);
 					if (node_2.type.name === "table") {
@@ -4165,9 +4487,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const colIndex_0 = Number.parseInt(target_1.dataset["columnIndex"] ?? "0", 10);
 			resizeRightEdgeColIndexRef.current = colIndex_0;
 			resizeRightEdgePmStartRef.current = Number.parseInt(target_1.dataset["tablePmStart"] ?? "0", 10);
-			const view_8 = resizeViewForRead;
-			if (view_8) {
-				const $pos_3 = view_8.state.doc.resolve(resizeRightEdgePmStartRef.current + 1);
+			const view_9 = resizeViewForRead;
+			if (view_9) {
+				const $pos_3 = view_9.state.doc.resolve(resizeRightEdgePmStartRef.current + 1);
 				for (let d_2 = $pos_3.depth; d_2 >= 0; d_2--) {
 					const node_3 = $pos_3.node(d_2);
 					if (node_3.type.name === "table") {
@@ -4366,18 +4688,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				resizeHandleRef.current.classList.remove("dragging");
 				resizeHandleRef.current = null;
 			}
-			const view_9 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
+			const view_10 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
-			if (view_9) {
+			if (view_10) {
 				const pmStart_4 = resizeTablePmStartRef.current;
 				const colIdx = resizeColumnIndexRef.current;
 				const { left: newLeft, right: newRight } = resizeOrigWidthsRef.current;
-				const $pos_5 = view_9.state.doc.resolve(pmStart_4 + 1);
+				const $pos_5 = view_10.state.doc.resolve(pmStart_4 + 1);
 				for (let d_3 = $pos_5.depth; d_3 >= 0; d_3--) {
 					const node_4 = $pos_5.node(d_3);
 					if (node_4.type.name === "table") {
 						const tablePos = $pos_5.before(d_3);
-						const tr = view_9.state.tr;
+						const tr = view_10.state.tr;
 						const tableAttrs = expectTableAttrs(node_4);
 						if (!tableAttrs.columnWidths) break;
 						const widths_1 = [...tableAttrs.columnWidths];
@@ -4403,7 +4725,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							});
 							rowOffset += row.nodeSize;
 						});
-						view_9.dispatch(tr);
+						view_10.dispatch(tr);
 						break;
 					}
 				}
@@ -4416,18 +4738,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				resizeRowHandleRef.current.classList.remove("dragging");
 				resizeRowHandleRef.current = null;
 			}
-			const view_10 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
+			const view_11 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
-			if (view_10) {
+			if (view_11) {
 				const pmStart_5 = resizeRowTablePmStartRef.current;
 				const rowIdx = resizeRowIndexRef.current;
 				const newHeight_0 = resizeRowOrigHeightRef.current;
-				const $pos_6 = view_10.state.doc.resolve(pmStart_5 + 1);
+				const $pos_6 = view_11.state.doc.resolve(pmStart_5 + 1);
 				for (let d_4 = $pos_6.depth; d_4 >= 0; d_4--) {
 					const node_5 = $pos_6.node(d_4);
 					if (node_5.type.name === "table") {
 						const tablePos_0 = $pos_6.before(d_4);
-						const tr_0 = view_10.state.tr;
+						const tr_0 = view_11.state.tr;
 						let rowOffset_0 = tablePos_0 + 1;
 						let idx = 0;
 						node_5.forEach((row_0) => {
@@ -4438,7 +4760,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							rowOffset_0 += row_0.nodeSize;
 							idx++;
 						});
-						view_10.dispatch(tr_0);
+						view_11.dispatch(tr_0);
 						break;
 					}
 				}
@@ -4451,18 +4773,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				resizeRightEdgeHandleRef.current.classList.remove("dragging");
 				resizeRightEdgeHandleRef.current = null;
 			}
-			const view_11 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
+			const view_12 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
-			if (view_11) {
+			if (view_12) {
 				const pmStart_6 = resizeRightEdgePmStartRef.current;
 				const colIdx_0 = resizeRightEdgeColIndexRef.current;
 				const newWidth_1 = resizeRightEdgeOrigWidthRef.current;
-				const $pos_7 = view_11.state.doc.resolve(pmStart_6 + 1);
+				const $pos_7 = view_12.state.doc.resolve(pmStart_6 + 1);
 				for (let d_5 = $pos_7.depth; d_5 >= 0; d_5--) {
 					const node_6 = $pos_7.node(d_5);
 					if (node_6.type.name === "table") {
 						const tablePos_1 = $pos_7.before(d_5);
-						const tr_1 = view_11.state.tr;
+						const tr_1 = view_12.state.tr;
 						const tableAttrs_0 = expectTableAttrs(node_6);
 						if (!tableAttrs_0.columnWidths) break;
 						const widths_2 = [...tableAttrs_0.columnWidths];
@@ -4484,7 +4806,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							});
 							rowOffset_1 += row_1.nodeSize;
 						});
-						view_11.dispatch(tr_1);
+						view_12.dispatch(tr_1);
 						break;
 					}
 				}
@@ -4626,13 +4948,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		e_2.preventDefault();
 		e_2.stopPropagation();
 		if (!tableInsertButton || !hiddenPMRef.current) return;
-		const view_12 = hiddenPMRef.current.getView();
-		if (!view_12) return;
+		const view_13 = hiddenPMRef.current.getView();
+		if (!view_13) return;
 		const { type, cellPmPos } = tableInsertButton;
-		const tr_2 = view_12.state.tr.setSelection(TextSelection$1.create(view_12.state.doc, cellPmPos + 1));
-		view_12.dispatch(tr_2);
-		if (type === "row") addRowBelow(view_12.state, view_12.dispatch);
-		else addColumnRight(view_12.state, view_12.dispatch);
+		const tr_2 = view_13.state.tr.setSelection(TextSelection$1.create(view_13.state.doc, cellPmPos + 1));
+		view_13.dispatch(tr_2);
+		if (type === "row") addRowBelow(view_13.state, view_13.dispatch);
+		else addColumnRight(view_13.state, view_13.dispatch);
 		setTableInsertButton(null);
 		hiddenPMRef.current.focus();
 	}, [tableInsertButton]);
@@ -4642,6 +4964,15 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const handlePagesClick = useCallback((e_3) => {
 		const target_2 = e_3.target instanceof HTMLElement ? e_3.target : null;
 		if (!target_2) return;
+		if (!readOnly && e_3.detail === 2) {
+			const story_0 = findNoteStoryForTarget(target_2);
+			if (story_0) {
+				e_3.preventDefault();
+				e_3.stopPropagation();
+				noteEditorRef.current?.open(story_0);
+				return;
+			}
+		}
 		const anchorClosest_0 = target_2.closest("a[href]");
 		const anchorEl_0 = anchorClosest_0 instanceof HTMLAnchorElement ? anchorClosest_0 : null;
 		if (anchorEl_0) {
@@ -4650,10 +4981,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (href.startsWith("#")) {
 				const bookmarkName = href.slice(1);
 				if (bookmarkName && hiddenPMRef.current) {
-					const view_13 = hiddenPMRef.current.getView();
-					if (view_13) {
+					const view_14 = hiddenPMRef.current.getView();
+					if (view_14) {
 						const targetPos = { value: null };
-						view_13.state.doc.descendants((node_7, pos_2) => {
+						view_14.state.doc.descendants((node_7, pos_2) => {
 							if (targetPos.value !== null) return false;
 							if (node_7.type.name === "paragraph") {
 								if (node_7.attrs["bookmarks"]?.some((b) => b.name === bookmarkName)) {
@@ -4742,9 +5073,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		if (e_3.detail === 2 && hiddenPMRef.current) {
 			const pmPos_12 = getPositionFromMouse(e_3.clientX, e_3.clientY);
 			if (pmPos_12 !== null) {
-				const view_14 = hiddenPMRef.current.getView();
-				if (view_14) {
-					const { doc: doc_0 } = view_14.state;
+				const view_15 = hiddenPMRef.current.getView();
+				if (view_15) {
+					const { doc: doc_0 } = view_15.state;
 					const $pos_9 = doc_0.resolve(pmPos_12);
 					const parent_0 = $pos_9.parent;
 					if (parent_0.isTextblock) {
@@ -4770,9 +5101,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		if (e_3.detail === 3 && hiddenPMRef.current) {
 			const pmPos_13 = getPositionFromMouse(e_3.clientX, e_3.clientY);
 			if (pmPos_13 !== null) {
-				const view_15 = hiddenPMRef.current.getView();
-				if (view_15) {
-					const { doc: doc_1 } = view_15.state;
+				const view_16 = hiddenPMRef.current.getView();
+				if (view_16) {
+					const { doc: doc_1 } = view_16.state;
 					const $pos_10 = doc_1.resolve(pmPos_13);
 					const paragraphStart = $pos_10.start($pos_10.depth);
 					const paragraphEnd = $pos_10.end($pos_10.depth);
@@ -4798,9 +5129,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (slot_2) {
 				const hfView_4 = hfPMsRef.current?.getView(slot_2.rId);
 				if (hfView_4) {
-					const { from: from_3, to: to_3 } = hfView_4.state.selection;
+					const { from: from_4, to: to_4 } = hfView_4.state.selection;
 					const pmPos_14 = clickToPositionInHfSlot(pagesContainerRef.current ?? slot_2.element, slot_2.kind, slot_2.rId, e_4.clientX, e_4.clientY);
-					if (pmPos_14 !== null && (from_3 === to_3 || pmPos_14 < from_3 || pmPos_14 > to_3)) {
+					if (pmPos_14 !== null && (from_4 === to_4 || pmPos_14 < from_4 || pmPos_14 > to_4)) {
 						const docEnd_3 = hfView_4.state.doc.content.size;
 						const clamped_1 = Math.max(0, Math.min(pmPos_14, docEnd_3));
 						const $pos_11 = hfView_4.state.doc.resolve(clamped_1);
@@ -4817,11 +5148,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				}
 			}
 		}
-		const view_16 = hiddenPMRef.current?.getView();
-		if (!view_16) return;
-		const { from: from_4, to: to_4 } = view_16.state.selection;
+		const view_17 = hiddenPMRef.current?.getView();
+		if (!view_17) return;
+		const { from: from_5, to: to_5 } = view_17.state.selection;
 		const pmPos_15 = getPositionFromMouse(e_4.clientX, e_4.clientY);
-		if (pmPos_15 !== null && (from_4 === to_4 || pmPos_15 < from_4 || pmPos_15 > to_4)) {
+		if (pmPos_15 !== null && (from_5 === to_5 || pmPos_15 < from_5 || pmPos_15 > to_5)) {
 			hiddenPMRef.current?.setSelection(pmPos_15);
 			hiddenPMRef.current?.focus();
 			setIsFocused(true);
@@ -4844,7 +5175,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	*/
 	const handleContainerFocus = useCallback((e_5) => {
 		if (e_5.target instanceof HTMLElement && e_5.target.closest(".docx-comments-sidebar")) return;
-		if (e_5.target instanceof HTMLElement && e_5.target.closest("[data-hf-r-id]")) return;
+		if (e_5.target instanceof HTMLElement && e_5.target.closest("[data-hf-r-id], [data-note-kind][data-note-id]")) return;
 		focusHiddenEditor();
 	}, [focusHiddenEditor]);
 	/**
@@ -4860,16 +5191,16 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	* Handle image resize from the overlay.
 	*/
 	const handleImageResize = useCallback((pmPos_16, newWidth_2, newHeight_1) => {
-		const view_17 = hiddenPMRef.current?.getView();
-		if (!view_17) return;
+		const view_18 = hiddenPMRef.current?.getView();
+		if (!view_18) return;
 		try {
-			const node_10 = view_17.state.doc.nodeAt(pmPos_16);
+			const node_10 = view_18.state.doc.nodeAt(pmPos_16);
 			if (!node_10 || node_10.type.name !== "image") return;
-			const tr_3 = view_17.state.tr.setNodeMarkup(pmPos_16, void 0, mergeImageAttrs(node_10, {
+			const tr_3 = view_18.state.tr.setNodeMarkup(pmPos_16, void 0, mergeImageAttrs(node_10, {
 				width: newWidth_2,
 				height: newHeight_1
 			}));
-			view_17.dispatch(tr_3);
+			view_18.dispatch(tr_3);
 			hiddenPMRef.current?.setNodeSelection(pmPos_16);
 		} catch {}
 	}, []);
@@ -4890,10 +5221,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	* to the drop position determined by mouse coordinates.
 	*/
 	const handleImageDragMove = useCallback((pmPos_17, clientX_1, clientY_1) => {
-		const view_18 = hiddenPMRef.current?.getView();
-		if (!view_18) return;
+		const view_19 = hiddenPMRef.current?.getView();
+		if (!view_19) return;
 		try {
-			const node_11 = view_18.state.doc.nodeAt(pmPos_17);
+			const node_11 = view_19.state.doc.nodeAt(pmPos_17);
 			if (!node_11 || node_11.type.name !== "image") return;
 			const attrs = expectImageAttrs(node_11);
 			if (attrs.displayMode === "float" || attrs.wrapType === "square" || attrs.wrapType === "tight" || attrs.wrapType === "through") {
@@ -4928,14 +5259,14 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 						relativeTo: "margin"
 					}
 				};
-				const tr_4 = view_18.state.tr.setNodeMarkup(pmPos_17, void 0, mergeImageAttrs(node_11, { position: newPosition }));
-				view_18.dispatch(tr_4);
+				const tr_4 = view_19.state.tr.setNodeMarkup(pmPos_17, void 0, mergeImageAttrs(node_11, { position: newPosition }));
+				view_19.dispatch(tr_4);
 				hiddenPMRef.current?.setNodeSelection(pmPos_17);
 			} else {
 				const dropPos = getPositionFromMouse(clientX_1, clientY_1);
 				if (dropPos === null) return;
 				if (dropPos === pmPos_17 || dropPos === pmPos_17 + 1) return;
-				let tr_5 = view_18.state.tr;
+				let tr_5 = view_19.state.tr;
 				tr_5 = tr_5.delete(pmPos_17, pmPos_17 + node_11.nodeSize);
 				let selectionPos;
 				if (dropPos <= pmPos_17) {
@@ -4947,7 +5278,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 					selectionPos = Math.min(adjusted, tr_5.doc.content.size - 1);
 				}
 				hiddenPMRef.current?.setNodeSelection(selectionPos);
-				view_18.dispatch(tr_5);
+				view_19.dispatch(tr_5);
 			}
 		} catch {}
 	}, [getPositionFromMouse, zoom]);
@@ -4974,12 +5305,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			}
 			return;
 		}
-		if (e_7.target instanceof HTMLElement && e_7.target.closest("[data-hf-r-id]")) return;
-		let view_19 = hiddenPMRef.current?.getView();
-		if (!view_19) {
+		if (e_7.target instanceof HTMLElement && e_7.target.closest("[data-hf-r-id], [data-note-kind][data-note-id]")) return;
+		let view_20 = hiddenPMRef.current?.getView();
+		if (!view_20) {
 			ensureHiddenEditorView({ sync: true });
-			view_19 = hiddenPMRef.current?.getView();
-			if (view_19) {
+			view_20 = hiddenPMRef.current?.getView();
+			if (view_20) {
 				if (isPlainTextInputEvent(e_7)) {
 					e_7.preventDefault();
 					queueHiddenEditorTextInput(e_7.key);
@@ -5002,11 +5333,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			}
 			return;
 		}
-		if (pendingHiddenEditorSelectionRef.current || queuedInputBeforeHiddenEditorRef.current.length > 0) applyPendingHiddenEditorInput(view_19);
+		if (pendingHiddenEditorSelectionRef.current || queuedInputBeforeHiddenEditorRef.current.length > 0) applyPendingHiddenEditorInput(view_20);
 		if (!hiddenPMRef.current?.isFocused()) focusHiddenEditor();
 		if (e_7.key === " " && !e_7.ctrlKey && !e_7.metaKey && !e_7.nativeEvent.isComposing) {
 			e_7.preventDefault();
-			dispatchEditorTextInput(view_19, " ");
+			dispatchEditorTextInput(view_20, " ");
 			return;
 		}
 		if (["PageUp", "PageDown"].includes(e_7.key) && !e_7.metaKey && !e_7.ctrlKey) {}
@@ -5034,7 +5365,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	*/
 	const handleContainerMouseDown = useCallback((e_8) => {
 		if (e_8.target instanceof HTMLElement && e_8.target.closest(".docx-comments-sidebar")) return;
-		if (e_8.target instanceof HTMLElement && e_8.target.closest("[data-hf-r-id]")) return;
+		if (e_8.target instanceof HTMLElement && e_8.target.closest("[data-hf-r-id], [data-note-kind][data-note-id]")) return;
 		if (!hiddenPMRef.current?.isFocused()) focusHiddenEditor();
 	}, [focusHiddenEditor]);
 	useEffect(() => {
@@ -5100,19 +5431,19 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	/**
 	* Run initial layout when document or view changes.
 	*/
-	const handleEditorViewReady = useCallback((view_20) => {
-		onEditorViewReadyRef.current?.(view_20);
-		anonymizationMatchesRef.current = anonymizationDecorationsKey.getState(view_20.state)?.matches ?? [];
-		const initialSuggestion = autocompleteSuggestionKey.getState(view_20.state)?.suggestion;
+	const handleEditorViewReady = useCallback((view_21) => {
+		onEditorViewReadyRef.current?.(view_21);
+		anonymizationMatchesRef.current = anonymizationDecorationsKey.getState(view_21.state)?.matches ?? [];
+		const initialSuggestion = autocompleteSuggestionKey.getState(view_21.state)?.suggestion;
 		if (initialSuggestion !== void 0) autocompleteSuggestionRef.current = initialSuggestion;
 		updateAutocompleteOverlay();
-		directivesRef.current = templateDirectivesKey.getState(view_20.state)?.ranges ?? [];
-		const previewState = templatePreviewValuesKey.getState(view_20.state);
+		directivesRef.current = templateDirectivesKey.getState(view_21.state)?.ranges ?? [];
+		const previewState = templatePreviewValuesKey.getState(view_21.state);
 		templatePreviewRef.current = {
 			entries: previewState?.entries ?? EMPTY_TEMPLATE_PREVIEW_ENTRIES,
 			mode: previewState?.preview?.mode ?? "plain"
 		};
-		const aiState = aiSuggestionDecorationsKey.getState(view_20.state);
+		const aiState = aiSuggestionDecorationsKey.getState(view_21.state);
 		aiSuggestionsRef.current = {
 			suggestions: aiState?.suggestions ?? EMPTY_AI_SUGGESTIONS,
 			focusedId: aiState?.focusedId ?? null
@@ -5120,16 +5451,16 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const focusReadyView = () => {
 			if (readOnly || !shouldFocusHiddenEditorOnReadyRef.current) return;
 			requestAnimationFrame(() => {
-				if (hiddenPMRef.current?.getView() !== view_20) return;
-				applyPendingHiddenEditorInput(view_20);
-				view_20.focus();
+				if (hiddenPMRef.current?.getView() !== view_21) return;
+				applyPendingHiddenEditorInput(view_21);
+				view_21.focus();
 				setIsFocused(true);
 			});
 		};
-		if (layoutSessionRef.current.lastPmDoc?.eq(view_20.state.doc)) {
+		if (layoutSessionRef.current.lastPmDoc?.eq(view_21.state.doc)) {
 			const lastPreview = layoutSessionRef.current.lastTemplatePreview;
-			if (templatePreviewRef.current.mode !== lastPreview.mode || templatePreviewDirtyRange(lastPreview.entries, templatePreviewRef.current.entries) !== null) runLayoutPipeline$1(view_20.state, { reason: "manual" });
-			updateSelectionOverlay(view_20.state);
+			if (templatePreviewRef.current.mode !== lastPreview.mode || templatePreviewDirtyRange(lastPreview.entries, templatePreviewRef.current.entries) !== null) runLayoutPipeline$1(view_21.state, { reason: "manual" });
+			updateSelectionOverlay(view_21.state);
 			updateAnonymizationOverlay();
 			updateDirectivesOverlay();
 			updateAISuggestionsOverlay();
@@ -5148,7 +5479,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const runAfterFontWait_0 = (fontsLoaded_0) => {
 			pendingInitialFontReadyLayoutRef.current = false;
 			const currentView_0 = hiddenPMRef.current?.getView();
-			if (currentView_0 !== view_20) return;
+			if (currentView_0 !== view_21) return;
 			recordLayoutPhase("initial", "initial-fonts", performance.now() - fontWaitStartedAt_0);
 			resetCanvasContext();
 			clearAllCaches();
@@ -5158,7 +5489,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				suppressFontReadyUntilRef.current = performance.now() + INITIAL_FONT_READY_SUPPRESSION_MS;
 			}
 		};
-		waitForInitialLayoutFonts(document, view_20.state.doc).then(runAfterFontWait_0, () => runAfterFontWait_0(false));
+		waitForInitialLayoutFonts(document, view_21.state.doc).then(runAfterFontWait_0, () => runAfterFontWait_0(false));
 		focusReadyView();
 	}, [
 		applyPendingHiddenEditorInput,
@@ -5183,6 +5514,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	useEffect(() => {
 		updateAISuggestionsOverlay();
 	}, [updateAISuggestionsOverlay]);
+	useEffect(() => {
+		updatePassageHighlightOverlay();
+	}, [updatePassageHighlightOverlay]);
 	useEffect(() => {
 		if (!onAnchorPositionsChange || !layout) return;
 		let cancelled_0 = false;
@@ -5216,12 +5550,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		};
 		const handleFontsLoaded = () => {
 			if (pendingInitialFontReadyLayoutRef.current || performance.now() < suppressFontReadyUntilRef.current || layoutSessionRef.current.usedLoadedFonts) return;
-			const view_21 = hiddenPMRef.current?.getView();
-			if (view_21) {
+			const view_22 = hiddenPMRef.current?.getView();
+			if (view_22) {
 				resetCanvasContext();
 				clearAllCaches();
-				runLayoutPipelineRef.current(view_21.state, { reason: "font-ready" });
-				updateSelectionOverlayRef.current(view_21.state);
+				runLayoutPipelineRef.current(view_22.state, { reason: "font-ready" });
+				updateSelectionOverlayRef.current(view_22.state);
 			}
 		};
 		fontSet.addEventListener("loading", handleFontsLoading);
@@ -5245,12 +5579,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			}
 			registered = faces;
 			if (faces.length === 0) return;
-			const view_22 = hiddenPMRef.current?.getView();
-			if (!view_22) return;
+			const view_23 = hiddenPMRef.current?.getView();
+			if (!view_23) return;
 			resetCanvasContext();
 			clearAllCaches();
-			runLayoutPipelineRef.current(view_22.state, { reason: "font-ready" });
-			updateSelectionOverlayRef.current(view_22.state);
+			runLayoutPipelineRef.current(view_23.state, { reason: "font-ready" });
+			updateSelectionOverlayRef.current(view_23.state);
 		});
 		return () => {
 			cancelled_1 = true;
@@ -5262,12 +5596,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		let cancelled_2 = false;
 		let registered_0 = [];
 		const remeasureForFontChange = () => {
-			const view_23 = hiddenPMRef.current?.getView();
-			if (!view_23) return;
+			const view_24 = hiddenPMRef.current?.getView();
+			if (!view_24) return;
 			resetCanvasContext();
 			clearAllCaches();
-			runLayoutPipelineRef.current(view_23.state, { reason: "font-ready" });
-			updateSelectionOverlayRef.current(view_23.state);
+			runLayoutPipelineRef.current(view_24.state, { reason: "font-ready" });
+			updateSelectionOverlayRef.current(view_24.state);
 		};
 		loadHostFontFaces(hostFonts).then((faces_0) => {
 			if (cancelled_2) {
@@ -5293,12 +5627,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			lastLayoutInputSignatureRef.current = layoutInputSignature;
 			return;
 		}
-		const view_24 = hiddenPMRef.current?.getView();
-		if (view_24) {
+		const view_25 = hiddenPMRef.current?.getView();
+		if (view_25) {
 			const layoutInputsChanged = lastLayoutInputSignatureRef.current !== layoutInputSignature;
 			lastLayoutInputSignatureRef.current = layoutInputSignature;
-			if (!layoutInputsChanged && view_24.state.doc === layoutSessionRef.current.lastPmDoc) return;
-			runLayoutPipelineRef.current(view_24.state, { reason: "layout-input" });
+			if (!layoutInputsChanged && view_25.state.doc === layoutSessionRef.current.lastPmDoc) return;
+			runLayoutPipelineRef.current(view_25.state, { reason: "layout-input" });
 		}
 	}, [document, layoutInputSignature]);
 	useEffect(() => {
@@ -5316,7 +5650,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			return folioEditor;
 		},
 		getDocument() {
-			return folioEditor.getDocument();
+			const current_0 = folioEditor.getDocument();
+			return current_0 ? noteEditorRef.current?.snapshotDocument(current_0) ?? current_0 : null;
 		},
 		getState() {
 			return folioEditor.getState();
@@ -5324,6 +5659,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		getView() {
 			return folioEditor.getView();
 		},
+		getActiveView() {
+			return getActiveEditorStory().view;
+		},
+		closeNoteStory() {
+			noteEditorRef.current?.close();
+		},
 		getHfView(rId_0) {
 			return hfPMsRef.current?.getView(rId_0) ?? null;
 		},
@@ -5331,30 +5672,37 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			ensureHiddenEditorView(options_4);
 		},
 		focus() {
-			folioEditor.focus();
+			getActiveEditorStory().view?.focus();
 			setIsFocused(true);
 		},
 		blur() {
-			folioEditor.blur();
+			const view_26 = getActiveEditorStory().view;
+			if (view_26?.hasFocus() && view_26.dom instanceof HTMLElement) view_26.dom.blur();
 			setIsFocused(false);
 		},
 		isFocused() {
-			return folioEditor.isFocused();
+			return getActiveEditorStory().view?.hasFocus() ?? false;
 		},
 		dispatch(tr_6) {
 			folioEditor.dispatch(tr_6);
 		},
 		undo() {
-			return folioEditor.undo();
+			const target_4 = getActiveEditorStory();
+			if (target_4.type === "none") return false;
+			return undo(target_4.view.state, target_4.view.dispatch);
 		},
 		redo() {
-			return folioEditor.redo();
+			const target_5 = getActiveEditorStory();
+			if (target_5.type === "none") return false;
+			return redo(target_5.view.state, target_5.view.dispatch);
 		},
 		canUndo() {
-			return folioEditor.canUndo();
+			const target_6 = getActiveEditorStory();
+			return target_6.type === "none" ? false : undo(target_6.view.state);
 		},
 		canRedo() {
-			return folioEditor.canRedo();
+			const target_7 = getActiveEditorStory();
+			return target_7.type === "none" ? false : redo(target_7.view.state);
 		},
 		setSelection(anchor_3, head_1) {
 			folioEditor.setSelection(anchor_3, head_1);
@@ -5368,6 +5716,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		scrollToPosition: scrollToPositionImpl,
 		scrollToPage: scrollToPageImpl,
 		scrollToParaId: scrollToParaIdImpl,
+		setPassageHighlight: setPassageHighlightImpl,
 		getPageNumberForPmPos(pmPos_18) {
 			const container_0 = pagesContainerRef.current;
 			if (!container_0) return null;
@@ -5406,9 +5755,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	}), [
 		ensureHiddenEditorView,
 		folioEditor,
+		getActiveEditorStory,
 		scrollToPageImpl,
 		scrollToParaIdImpl,
-		scrollToPositionImpl
+		scrollToPositionImpl,
+		setPassageHighlightImpl
 	]);
 	useEffect(() => {
 		if (!layout) return;
@@ -5475,6 +5826,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				...styles !== void 0 ? { styles } : {},
 				..._theme !== void 0 ? { theme: _theme } : {}
 			}),
+			/* @__PURE__ */ jsx(NoteStoryEditor, {
+				ref: noteEditorRef,
+				document,
+				onActiveChange: handleActiveNoteStoryChange,
+				onDocumentChange: handleNoteDocumentChange,
+				onStoryChange: handleNoteStoryTransaction,
+				plugins: noteStoryPlugins,
+				suggestionModeActive,
+				...suggestionAuthor !== void 0 ? { suggestionAuthor } : {},
+				...styles !== void 0 ? { styles } : {},
+				..._theme !== void 0 ? { theme: _theme } : {}
+			}),
 			/* @__PURE__ */ jsx(HiddenProseMirror, {
 				ref: hiddenPMRef,
 				document,
@@ -5488,6 +5851,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				onEditorViewReady: handleEditorViewReady,
 				onEditorViewDestroy: handleEditorViewDestroy,
 				onKeyDown: handleHiddenEditorKeyDown,
+				...onCopy !== void 0 ? { onCopy } : {},
+				...onCut !== void 0 ? { onCut } : {},
+				...onPaste !== void 0 ? { onPaste } : {},
 				...styles !== void 0 ? { styles } : {},
 				externalPlugins,
 				...collaboration !== void 0 ? { collaboration } : {},
@@ -5517,6 +5883,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							selectedCanonical: selectedAnonymizationCanonical,
 							selectionSeq: anonymizationSelectionSeq
 						}),
+						/* @__PURE__ */ jsx(PassageHighlightOverlay, { rects: passageHighlightRects }),
 						/* @__PURE__ */ jsx(AutocompleteCaretOverlay, {
 							caret: autocompleteCaret,
 							text: autocompleteText,
@@ -5530,8 +5897,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							ranges: directivesRef.current
 						}),
 						/* @__PURE__ */ jsx(SelectionOverlay, {
-							selectionRects: hfEditMode ? EMPTY_SELECTION_RECTS : selectionRects,
-							caretPosition: hfEditMode ? null : caretPosition,
+							selectionRects: hfEditMode || noteStoryActive ? EMPTY_SELECTION_RECTS : selectionRects,
+							caretPosition: hfEditMode || noteStoryActive ? null : caretPosition,
 							isFocused,
 							pageGap,
 							markCaretRect: true
@@ -6814,133 +7181,145 @@ function removePendingCommentMarkRange(view, range) {
 }
 //#endregion
 //#region src/components/ContentControlWidgetsOverlay.tsx
-/**
-* React shell for the content-control widgets plugin.
-*
-* The plugin (see `core/prosemirror/plugins/contentControlWidgets`) emits a
-* `folio:content-control-widget` CustomEvent on the editor's view DOM
-* whenever the user clicks a typed control. This component subscribes to
-* those events and renders a small floating picker positioned at the
-* anchor element — a list of menu items for dropdown / comboBox
-* controls, a shared date picker for date controls — then dispatches back
-* through `dispatchDropdownPick` / `dispatchDatePick` so the change rides
-* the normal undo stack.
-*
-* The dropdown popover uses the injected `MenuItem` for visual + a11y
-* consistency with the rest of the editor.
-*/
-function parseListItems(raw) {
-	if (!raw) return [];
-	try {
-		const parsed = JSON.parse(raw);
-		if (!Array.isArray(parsed)) return [];
-		const out = [];
-		for (const entry of parsed) if (entry !== null && typeof entry === "object" && "displayText" in entry && "value" in entry && typeof entry.displayText === "string" && typeof entry.value === "string") out.push(entry);
-		return out;
-	} catch {
-		return [];
-	}
-}
-function ContentControlWidgetsOverlay({ getEditorView }) {
+/** Thin React renderer for the shared content-control widget controller. */
+function ContentControlWidgetsOverlay(t0) {
+	const $ = c(32);
+	const { getEventRoot, getEditorView } = t0;
 	const folioUI = useFolioUI();
-	const { Item: MenuItem } = folioUI.Menu;
+	const { Root: Menu, Item: MenuItem } = folioUI.Menu;
 	const DatePickerPopover = folioUI.DatePickerPopover;
 	const t = useTranslations("folio");
-	const [open, setOpen] = useState(null);
-	const getEditorViewRef = useRef(getEditorView);
-	getEditorViewRef.current = getEditorView;
-	const close = useCallback(() => setOpen(null), []);
-	const viewDom = getEditorView()?.dom ?? null;
-	useEffect(() => {
-		if (!viewDom) return;
-		const onWidget = (event) => {
-			const detail = event.detail;
-			if (detail.kind === "dropdownOpen") {
-				const items = parseListItems(detail.listItemsJson);
-				setOpen({
-					kind: "dropdown",
-					pmPos: detail.pmPos,
-					items,
-					anchorRect: detail.anchor.getBoundingClientRect()
-				});
-				return;
-			}
-			if (detail.kind === "datePick") setOpen({
-				kind: "date",
-				pmPos: detail.pmPos,
-				anchorRect: detail.anchor.getBoundingClientRect()
-			});
-		};
-		viewDom.addEventListener(CONTENT_CONTROL_WIDGET_EVENT_NAME, onWidget);
-		return () => {
-			viewDom.removeEventListener(CONTENT_CONTROL_WIDGET_EVENT_NAME, onWidget);
-		};
-	}, [viewDom]);
-	useEffect(() => {
-		if (!open) return;
-		const onKey = (event_0) => {
-			if (event_0.key === "Escape") close();
-		};
-		const onScroll = () => close();
-		window.addEventListener("keydown", onKey);
-		window.addEventListener("scroll", onScroll, true);
-		return () => {
-			window.removeEventListener("keydown", onKey);
-			window.removeEventListener("scroll", onScroll, true);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = new ContentControlWidgetController();
+		$[0] = t1;
+	} else t1 = $[0];
+	const controller = t1;
+	const snapshot = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+	let t2;
+	if ($[1] !== getEditorView) {
+		t2 = getEditorView();
+		$[1] = getEditorView;
+		$[2] = t2;
+	} else t2 = $[2];
+	const view = t2;
+	let t3;
+	let t4;
+	if ($[3] !== getEventRoot || $[4] !== view) {
+		t3 = () => {
+			controller.bind(view, getEventRoot());
+			return () => controller.destroy();
 		};
-	}, [open, close]);
-	const style = useMemo(() => {
-		if (!open) return;
-		return {
+		t4 = [
+			controller,
+			getEventRoot,
+			view
+		];
+		$[3] = getEventRoot;
+		$[4] = view;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (value) => controller.pickDropdown(value);
+		$[7] = t5;
+	} else t5 = $[7];
+	const onDropdownPick = t5;
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (value_0) => value_0 ? controller.pickDate(value_0) : false;
+		$[8] = t6;
+	} else t6 = $[8];
+	const onDateChange = t6;
+	if (snapshot.status === "closed") return null;
+	const t7 = `${snapshot.position.y}px`;
+	const t8 = `${snapshot.position.x}px`;
+	let t9;
+	if ($[9] !== t7 || $[10] !== t8) {
+		t9 = {
 			position: "fixed",
-			top: `${open.anchorRect.bottom + 4}px`,
-			insetInlineStart: `${open.anchorRect.left}px`,
+			top: t7,
+			insetInlineStart: t8,
 			zIndex: 9999
 		};
-	}, [open]);
-	const openPmPos = open?.pmPos;
-	const onDropdownPick = useCallback((value) => {
-		const liveView = getEditorViewRef.current();
-		if (liveView && typeof openPmPos === "number") dispatchDropdownPick(liveView, openPmPos, value);
-		close();
-	}, [close, openPmPos]);
-	const onDatePick = useCallback((value_0) => {
-		const liveView_0 = getEditorViewRef.current();
-		if (liveView_0 && value_0.length > 0 && typeof openPmPos === "number") dispatchDatePick(liveView_0, openPmPos, value_0);
-		close();
-	}, [close, openPmPos]);
-	const handleDateChange = useCallback((value_1) => {
-		if (value_1) onDatePick(value_1);
-	}, [onDatePick]);
-	if (!open) return null;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: "folio-root",
-		style: { display: "contents" },
-		children: /* @__PURE__ */ jsxs("div", {
-			role: "dialog",
-			"aria-label": open.kind === "dropdown" ? t("contentControlDropdownAriaLabel") : t("contentControlDateAriaLabel"),
-			style,
-			className: "bg-popover text-popover-foreground min-w-[10rem] rounded-md border p-1 shadow-md",
-			children: [open.kind === "dropdown" && /* @__PURE__ */ jsx("div", {
-				role: "menu",
-				className: "flex flex-col",
-				children: open.items.length === 0 ? /* @__PURE__ */ jsx("div", {
-					className: "text-muted-foreground px-2 py-1 text-sm",
-					children: t("contentControlDropdownNoOptions")
-				}) : open.items.map((item) => /* @__PURE__ */ jsx(ContentControlDropdownItem, {
-					item,
-					MenuItem,
-					onPick: onDropdownPick
-				}, `${item.value}::${item.displayText}`))
-			}), open.kind === "date" && /* @__PURE__ */ jsx(DatePickerPopover, {
-				clearLabel: t("clearDate"),
-				defaultOpen: true,
-				onChange: handleDateChange,
-				showIcon: false,
-				value: null
-			})]
-		})
-	}), document.body);
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+	} else t9 = $[11];
+	const style = t9;
+	let t10;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = { display: "contents" };
+		$[12] = t10;
+	} else t10 = $[12];
+	let t11;
+	if ($[13] !== snapshot.status || $[14] !== t) {
+		t11 = snapshot.status === "dropdown" ? t("contentControlDropdownAriaLabel") : t("contentControlDateAriaLabel");
+		$[13] = snapshot.status;
+		$[14] = t;
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== Menu || $[17] !== MenuItem || $[18] !== snapshot.items || $[19] !== snapshot.status || $[20] !== t) {
+		t12 = snapshot.status === "dropdown" && /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx("div", {
+			role: "menu",
+			className: "flex flex-col",
+			children: snapshot.items.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground px-2 py-1 text-sm",
+				children: t("contentControlDropdownNoOptions")
+			}) : snapshot.items.map((item) => /* @__PURE__ */ jsx(ContentControlDropdownItem, {
+				item,
+				MenuItem,
+				onPick: onDropdownPick
+			}, `${item.value}::${item.displayText}`))
+		}) });
+		$[16] = Menu;
+		$[17] = MenuItem;
+		$[18] = snapshot.items;
+		$[19] = snapshot.status;
+		$[20] = t;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== DatePickerPopover || $[23] !== snapshot.currentValue || $[24] !== snapshot.status || $[25] !== t) {
+		t13 = snapshot.status === "date" && /* @__PURE__ */ jsx(DatePickerPopover, {
+			clearLabel: t("clearDate"),
+			defaultOpen: true,
+			onChange: onDateChange,
+			showIcon: false,
+			value: snapshot.currentValue
+		});
+		$[22] = DatePickerPopover;
+		$[23] = snapshot.currentValue;
+		$[24] = snapshot.status;
+		$[25] = t;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== style || $[28] !== t11 || $[29] !== t12 || $[30] !== t13) {
+		t14 = createPortal(/* @__PURE__ */ jsx("div", {
+			className: "folio-root",
+			style: t10,
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "dialog",
+				"aria-label": t11,
+				style,
+				className: "bg-popover text-popover-foreground min-w-[10rem] rounded-md border p-1 shadow-md",
+				children: [t12, t13]
+			})
+		}), document.body);
+		$[27] = style;
+		$[28] = t11;
+		$[29] = t12;
+		$[30] = t13;
+		$[31] = t14;
+	} else t14 = $[31];
+	return t14;
 }
 function ContentControlDropdownItem(t0) {
 	const $ = c(7);
@@ -6968,209 +7347,13 @@ function ContentControlDropdownItem(t0) {
 }
 //#endregion
 //#region src/components/dialogs/findReplaceUtils.ts
-/**
-* Find & Replace Utility Functions
-*
-* Pure utility functions for text search, pattern matching, and document search.
-* Extracted from FindReplaceDialog.tsx.
-*/
-/**
-* Create default find options
-*/
-function createDefaultFindOptions() {
-	return {
-		matchCase: false,
-		matchWholeWord: false,
-		useRegex: false
-	};
-}
-/**
-* Find all matches of search text in content
-*/
-function findAllMatches(content, searchText, options) {
-	if (!content || !searchText) return [];
-	const matches = [];
-	let searchFor = searchText;
-	if (!options.matchCase) searchFor = searchText.toLowerCase();
-	const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
-	let pattern;
-	if (options.matchWholeWord) pattern = `\\b${escapeRegex(searchFor)}\\b`;
-	else pattern = escapeRegex(searchFor);
-	const flags = options.matchCase ? "g" : "gi";
-	const regex = new RegExp(pattern, flags);
-	let match;
-	while ((match = regex.exec(content)) !== null) {
-		matches.push({
-			start: match.index,
-			end: match.index + match[0].length
-		});
-		if (match[0].length === 0) regex.lastIndex++;
-	}
-	return matches;
-}
-/**
-* Get plain text from a run
-*/
-function getRunText(run) {
-	let text = "";
-	for (const item of run.content) if (item.type === "text") text += item.text;
-	else if (item.type === "tab") text += "	";
-	else if (item.type === "break" && item.breakType === "textWrapping") text += "\n";
-	return text;
-}
-function getHyperlinkText(hyperlink) {
-	let text = "";
-	for (const child of hyperlink.children) if (child.type === "run") text += getRunText(child);
-	return text;
-}
-function getParagraphContentText(content) {
-	if (content.type === "run") return getRunText(content);
-	if (content.type === "hyperlink") return getHyperlinkText(content);
-	if (content.type === "inlineSdt") {
-		let text = "";
-		for (const child of content.content) text += getParagraphContentText(child);
-		return text;
-	}
-	if (content.type === "simpleField") {
-		let text = "";
-		for (const child of content.content) {
-			if (child.type === "run") {
-				text += getRunText(child);
-				continue;
-			}
-			text += getHyperlinkText(child);
-		}
-		return text;
-	}
-	if (content.type === "complexField") {
-		let text = "";
-		for (const run of content.fieldResult) text += getRunText(run);
-		return text;
-	}
-	return "";
-}
-/**
-* Get plain text from a paragraph
-*/
-function getParagraphPlainText(paragraph) {
-	let text = "";
-	for (const item of paragraph.content) text += getParagraphContentText(item);
-	return text;
-}
-/**
-* Find all matches in a document
-*/
-function findInDocument(document, searchText, options) {
-	if (!document || !searchText) return [];
-	const matches = [];
-	const body = document.package.document;
-	if (!isDocumentBody(body)) return matches;
-	forEachParagraph(body.content, (block, paragraphIndex) => {
-		const paragraphMatches = findInParagraph(block, searchText, options, paragraphIndex);
-		matches.push(...paragraphMatches);
-	});
-	return matches;
-}
-function forEachParagraph(blocks, visit) {
-	let paragraphIndex = 0;
-	const walkBlocks = (items) => {
-		for (const block of items) {
-			if (isParagraph(block)) {
-				visit(block, paragraphIndex);
-				paragraphIndex++;
-				continue;
-			}
-			if (isTable(block)) {
-				walkTable(block);
-				continue;
-			}
-			if (isBlockSdt(block)) walkBlocks(block.content);
-		}
-	};
-	const walkTable = (table) => {
-		for (const row of table.rows) {
-			if (!isTableRow(row)) continue;
-			for (const cell of row.cells) {
-				if (!isTableCell(cell)) continue;
-				walkBlocks(cell.content);
-			}
-		}
-	};
-	walkBlocks(blocks);
-}
-function isRecord(value) {
-	return typeof value === "object" && value !== null;
-}
-function isDocumentBody(value) {
-	return isRecord(value) && Array.isArray(value["content"]);
-}
-function isParagraph(value) {
-	return isRecord(value) && value["type"] === "paragraph" && Array.isArray(value["content"]);
-}
-function isTable(value) {
-	return isRecord(value) && value["type"] === "table" && Array.isArray(value["rows"]);
-}
-function isTableRow(value) {
-	return isRecord(value) && Array.isArray(value["cells"]);
-}
-function isTableCell(value) {
-	return isRecord(value) && Array.isArray(value["content"]);
-}
-function isBlockSdt(value) {
-	return isRecord(value) && value["type"] === "blockSdt" && Array.isArray(value["content"]);
-}
-/**
-* Find matches in a single paragraph
-*/
-function findInParagraph(paragraph, searchText, options, paragraphIndex) {
-	const matches = [];
-	const paragraphText = getParagraphPlainText(paragraph);
-	if (!paragraphText) return matches;
-	const textMatches = findAllMatches(paragraphText, searchText, options);
-	for (const match of textMatches) {
-		const contentInfo = findContentAtOffset(paragraph, match.start);
-		matches.push({
-			paragraphIndex,
-			contentIndex: contentInfo.contentIndex,
-			startOffset: match.start,
-			endOffset: match.end,
-			text: paragraphText.slice(match.start, match.end)
-		});
-	}
-	return matches;
-}
-/**
-* Find the content (run) at a specific character offset in a paragraph
-*/
-function findContentAtOffset(paragraph, offset) {
-	let currentOffset = 0;
-	let contentIndex = 0;
-	for (const item of paragraph.content) {
-		const itemLength = getParagraphContentText(item).length;
-		if (currentOffset + itemLength > offset) return {
-			contentIndex,
-			runIndex: contentIndex,
-			offsetInContent: offset - currentOffset
-		};
-		currentOffset += itemLength;
-		contentIndex++;
-	}
-	return {
-		contentIndex: Math.max(0, paragraph.content.length - 1),
-		runIndex: Math.max(0, paragraph.content.length - 1),
-		offsetInContent: 0
-	};
-}
-/**
-* Scroll to a match in the document
-*/
-function scrollToMatch(containerElement, match) {
+const scrollToMatch = (containerElement, match) => {
 	if (!containerElement) return;
 	(containerElement.querySelector(`[data-paragraph-index="${match.paragraphIndex}"]`) ?? containerElement.querySelector(`.layout-paragraph[data-block-id="block-${match.paragraphIndex + 1}"]`) ?? containerElement.querySelectorAll(".layout-paragraph").item(match.paragraphIndex)).scrollIntoView({
 		behavior: prefersReducedMotionBehavior(),
 		block: "center"
 	});
-}
+};
 //#endregion
 //#region src/components/dialogs/useFindReplace.ts
 /**
@@ -12164,7 +12347,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 * - Error boundary
 * - Loading states
 */
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-Bopn32H9.js").then((m) => ({ default: m.CommentsSidebar })));
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-ml91aGZ1.js").then((m) => ({ default: m.CommentsSidebar })));
 const TextContextMenu = lazy(() => import("./TextContextMenu-Ci7-M4oU.js").then((m) => ({ default: m.TextContextMenu })));
 const loadAttemptSelectiveSave = async () => {
 	const { attemptSelectiveSave } = await import("@stll/folio-core/docx/selectiveSave");
@@ -12226,7 +12409,7 @@ function areActiveTrackedChangesEqual(a, b) {
 /**
 * DocxEditor - Complete DOCX editor component
 */
-const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, document: initialDocument, documentKey, onSave, author = "User", onChange, onSelectionChange, onSelectionTextChange, onError, onFontsLoaded: onFontsLoadedCallback, fontFamilies, fonts, theme, showToolbar = true, showZoomControl = true, showReviewControls = true, showHeaderFooterEditing = true, showMarginGuides: _showMarginGuides = false, marginGuideColor: _marginGuideColor, showRuler: showRulerProp = false, rulerUnit = "inch", initialZoom = 1, enableWheelZoom = true, readOnly: readOnlyProp = false, autoOpenReviewSidebar = true, components, toolbarExtra, className = "", style, placeholder, loadingIndicator, preserveDocumentWhileLoading = false, initialScrollTop, onScrollTopChange, showOutline: showOutlineProp = true, onPrint, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onCopy: _onCopy, onCut: _onCut, onPaste: _onPaste, mode: modeProp, onModeChange, onReadonlyEditAttempt, onCompatibilityChange, onEditorViewReady, onAnonymizationMatchesChange, onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq, showTemplateDirectives = false, onSlashMenuChange, onSlashMenuKeyAction, customContextMenuItems, onCustomContextAction, comments: commentsProp, onCommentsChange, collaboration, featureFlags, onSelectiveSaveTripwire }, ref) {
+const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, document: initialDocument, documentKey, onSave, author = "User", onChange, onSelectionChange, onSelectionTextChange, onError, onFontsLoaded: onFontsLoadedCallback, fontFamilies, fonts, theme, showToolbar = true, showZoomControl = true, showReviewControls = true, showHeaderFooterEditing = true, showMarginGuides = false, marginGuideColor, showRuler: showRulerProp = false, rulerUnit = "inch", initialZoom = 1, enableWheelZoom = true, readOnly: readOnlyProp = false, autoOpenReviewSidebar = true, components, toolbarExtra, className = "", style, placeholder, loadingIndicator, preserveDocumentWhileLoading = false, initialScrollTop, onScrollTopChange, showOutline: showOutlineProp = true, onPrint, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onCopy, onCut, onPaste, mode: modeProp, onModeChange, onReadonlyEditAttempt, onCompatibilityChange, onEditorViewReady, onAnonymizationMatchesChange, onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq, showTemplateDirectives = false, onSlashMenuChange, onSlashMenuKeyAction, customContextMenuItems, onCustomContextAction, comments: commentsProp, onCommentsChange, collaboration, featureFlags, onSelectiveSaveTripwire }, ref) {
 	const t = useTranslations("folio");
 	useEffect(() => {
 		const onClipboardReadError = () => {
@@ -12474,6 +12657,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		canRedo: false,
 		canUndo: false
 	});
+	const [activeNoteStory, setActiveNoteStory] = useState(null);
 	const toolbarRefCallback = useCallback((el) => {
 		toolbarWrapperRef.current = el;
 		if (toolbarRoRef.current) {
@@ -12511,28 +12695,42 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		pushDocument,
 		getHfView: (rId) => pagedEditorRef.current?.getHfView(rId) ?? null
 	});
-	const getActiveEditorView = useCallback(() => {
-		if (hfEditPosition && hfEditorRef.current) return hfEditorRef.current.getView();
-		return pagedEditorRef.current?.getView();
-	}, [hfEditPosition]);
+	let activeHfRId = hfEditIsFirstPage ? activeFirstFooterRId : activeFooterRId;
+	if (hfEditPosition === "header") activeHfRId = hfEditIsFirstPage ? activeFirstHeaderRId : activeHeaderRId;
+	const getActiveEditorStory = useCallback(() => {
+		return resolveActiveEditorStory({
+			bodyView: pagedEditorRef.current?.getView() ?? null,
+			headerFooterView: hfEditPosition && hfEditorRef.current ? hfEditorRef.current.getView() : null,
+			noteView: activeNoteStory ? pagedEditorRef.current?.getActiveView() ?? null : null
+		});
+	}, [activeNoteStory, hfEditPosition]);
+	const getActiveEditorView = useCallback(() => getActiveEditorStory().view, [getActiveEditorStory]);
 	const focusActiveEditor = useCallback(() => {
-		if (hfEditPosition && hfEditorRef.current) hfEditorRef.current.focus();
+		if (getActiveEditorStory().type === "headerFooter" && hfEditorRef.current) hfEditorRef.current.focus();
 		else pagedEditorRef.current?.focus();
-	}, [hfEditPosition]);
+	}, [getActiveEditorStory]);
 	const undoActiveEditor = useCallback(() => {
-		if (hfEditPosition && hfEditorRef.current) hfEditorRef.current.undo();
+		if (getActiveEditorStory().type === "headerFooter" && hfEditorRef.current) hfEditorRef.current.undo();
 		else {
 			pagedEditorRef.current?.undo();
 			requestAnimationFrame(refreshBodyHistoryAvailability);
 		}
-	}, [hfEditPosition, refreshBodyHistoryAvailability]);
+	}, [getActiveEditorStory, refreshBodyHistoryAvailability]);
 	const redoActiveEditor = useCallback(() => {
-		if (hfEditPosition && hfEditorRef.current) hfEditorRef.current.redo();
+		if (getActiveEditorStory().type === "headerFooter" && hfEditorRef.current) hfEditorRef.current.redo();
 		else {
 			pagedEditorRef.current?.redo();
 			requestAnimationFrame(refreshBodyHistoryAvailability);
 		}
-	}, [hfEditPosition, refreshBodyHistoryAvailability]);
+	}, [getActiveEditorStory, refreshBodyHistoryAvailability]);
+	const handleActiveNoteStoryChange = useCallback((story) => {
+		setActiveNoteStory(story);
+		if (story && hfEditPosition) handleBodyClick();
+	}, [handleBodyClick, hfEditPosition]);
+	const handleHeaderFooterStoryOpen = useCallback((position, pageNumber) => {
+		pagedEditorRef.current?.closeNoteStory();
+		handleHeaderFooterDoubleClick(position, pageNumber);
+	}, [handleHeaderFooterDoubleClick]);
 	const findReplace = useFindReplace$1();
 	const [showPageSetup, setShowPageSetup] = useState(false);
 	const { hyperlinkPopupData, handleHyperlinkClick, handleHyperlinkPopupNavigate, handleHyperlinkPopupCopy, handleHyperlinkPopupEdit, handleHyperlinkPopupRemove, handleHyperlinkPopupClose } = useHyperlinkHandlers({
@@ -12679,8 +12877,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		if (!history.state) return null;
 		let doc_0 = structuredClone(history.state);
 		const pmDoc = pagedEditorRef.current?.getDocument();
-		if (pmDoc) doc_0.package.document.content = pmDoc.package.document.content;
-		else doc_0 = normalizeBaseDirection(doc_0);
+		if (pmDoc) {
+			doc_0.package.document.content = pmDoc.package.document.content;
+			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);
 		const editor = pagedEditorRef.current;
 		if (editor) {
 			const flushBag = (bag) => {
@@ -13455,14 +13656,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				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");
-				navigator.clipboard.writeText(text_2);
+				navigator.clipboard.writeText(text_2).catch(() => void 0);
 				view_12.dispatch(view_12.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");
-				navigator.clipboard.writeText(copied);
+				navigator.clipboard.writeText(copied).catch(() => void 0);
+				onCopy?.();
 				break;
 			}
 			case "paste":
@@ -13487,7 +13690,10 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 				} catch {
 					try {
 						const text_0 = await navigator.clipboard.readText();
-						if (text_0) view_12.dispatch(view_12.state.tr.insertText(text_0));
+						if (text_0) {
+							view_12.dispatch(view_12.state.tr.insertText(text_0));
+							onPaste?.();
+						}
 					} catch {}
 				}
 				break;
@@ -13497,6 +13703,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					if (text && !view_12.isDestroyed) {
 						const slice = buildPlainTextSlice(text, view_12.state.schema);
 						view_12.dispatch(view_12.state.tr.replaceSelection(slice).scrollIntoView());
+						onPaste?.();
 					}
 				} catch {
 					toast(t("clipboardReadFailed"));
@@ -13570,6 +13777,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		getActiveEditorView,
 		focusActiveEditor,
 		onCustomContextAction,
+		onCopy,
+		onCut,
+		onPaste,
 		readOnly,
 		contextMenu.selectionRange.from,
 		contextMenu.selectionRange.to,
@@ -13706,8 +13916,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		},
 		getCurrentPage: () => scrollPageInfo.currentPage,
 		getTotalPages: () => scrollPageInfo.totalPages,
-		scrollToPage: (pageNumber) => {
-			pagedEditorRef.current?.scrollToPage(pageNumber);
+		scrollToPage: (pageNumber_0) => {
+			pagedEditorRef.current?.scrollToPage(pageNumber_0);
 		},
 		scrollToParaId: (paraId, options_0) => pagedEditorRef.current?.scrollToParaId(paraId, options_0) ?? false,
 		openPrintPreview: handleDirectPrint,
@@ -13857,13 +14067,13 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			return rejectAIEditRevision(revisionId_0)(view_24.state, view_24.dispatch);
 		},
 		undo: () => {
-			if (hfEditPosition && hfEditorRef.current) return hfEditorRef.current.undo();
+			if (getActiveEditorStory().type === "headerFooter" && hfEditorRef.current) return hfEditorRef.current.undo();
 			const undone = pagedEditorRef.current?.undo() ?? false;
 			requestAnimationFrame(refreshBodyHistoryAvailability);
 			return undone;
 		},
 		redo: () => {
-			if (hfEditPosition && hfEditorRef.current) return hfEditorRef.current.redo();
+			if (getActiveEditorStory().type === "headerFooter" && hfEditorRef.current) return hfEditorRef.current.redo();
 			const redone = pagedEditorRef.current?.redo() ?? false;
 			requestAnimationFrame(refreshBodyHistoryAvailability);
 			return redone;
@@ -13900,104 +14110,141 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			});
 			return true;
 		},
-		showInDocument: (target_1, snapshot_2) => {
+		highlightPassage: ({ blockId: blockId_0, text: text_5, snapshot: snapshot_2 }) => {
 			const view_27 = pagedEditorRef.current?.getView();
-			if (!view_27) return false;
-			const range_4 = target_1.type === "textRange" ? resolveFolioAITextRange({
-				range: target_1,
+			if (!view_27) return "none";
+			const passageRange = resolvePassageRange({
+				blockId: blockId_0,
+				text: text_5,
 				doc: view_27.state.doc,
 				snapshot: snapshot_2
-			}) : resolveFolioAIBlockRange({
-				blockId: target_1.blockId,
+			});
+			if (passageRange !== null) {
+				pagedEditorRef.current?.setPassageHighlight(passageRange);
+				requestAnimationFrame(() => {
+					pagedEditorRef.current?.scrollToPosition(passageRange.from);
+				});
+				return "passage";
+			}
+			pagedEditorRef.current?.setPassageHighlight(null);
+			const blockRange = resolveFolioAIBlockRange({
+				blockId: blockId_0,
 				doc: view_27.state.doc,
 				snapshot: snapshot_2
 			});
-			if (range_4 === null) return false;
-			const { from: from_10, to: to_10 } = range_4;
+			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)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(from_10);
 			});
-			return true;
+			return "block";
 		},
-		getTrackedChanges: () => {
+		clearPassageHighlight: () => {
+			pagedEditorRef.current?.setPassageHighlight(null);
+		},
+		showInDocument: (target_1, snapshot_3) => {
 			const view_28 = pagedEditorRef.current?.getView();
-			return view_28 ? getTrackedChangesFromDoc(view_28.state.doc) : [];
+			if (!view_28) return false;
+			const range_4 = target_1.type === "textRange" ? resolveFolioAITextRange({
+				range: target_1,
+				doc: view_28.state.doc,
+				snapshot: snapshot_3
+			}) : resolveFolioAIBlockRange({
+				blockId: target_1.blockId,
+				doc: view_28.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)));
+			requestAnimationFrame(() => {
+				pagedEditorRef.current?.scrollToPosition(from_11);
+			});
+			return true;
 		},
-		getCommentAnchors: () => {
+		getTrackedChanges: () => {
 			const view_29 = pagedEditorRef.current?.getView();
-			return view_29 ? getCommentAnchorsFromDoc(view_29.state.doc) : [];
+			return view_29 ? getTrackedChangesFromDoc(view_29.state.doc) : [];
 		},
-		getSelectionText: () => {
+		getCommentAnchors: () => {
 			const view_30 = pagedEditorRef.current?.getView();
-			return view_30 ? getSelectedText(view_30.state) : "";
+			return view_30 ? getCommentAnchorsFromDoc(view_30.state.doc) : [];
 		},
-		getPageText: (page_0) => {
+		getSelectionText: () => {
 			const view_31 = pagedEditorRef.current?.getView();
-			if (!view_31) return null;
-			return getPageTextFromLayout(pagedEditorRef.current?.getEditor()?.getLayout() ?? null, view_31.state.doc, page_0);
+			return view_31 ? getSelectedText(view_31.state) : "";
 		},
-		getTargetPage: (target_2, snapshot_3) => {
+		getPageText: (page_0) => {
 			const view_32 = pagedEditorRef.current?.getView();
 			if (!view_32) return null;
+			return getPageTextFromLayout(pagedEditorRef.current?.getEditor()?.getLayout() ?? null, view_32.state.doc, page_0);
+		},
+		getTargetPage: (target_2, snapshot_4) => {
+			const view_33 = pagedEditorRef.current?.getView();
+			if (!view_33) return null;
 			const range_5 = target_2.type === "textRange" ? resolveFolioAITextRange({
 				range: target_2,
-				doc: view_32.state.doc,
-				snapshot: snapshot_3
+				doc: view_33.state.doc,
+				snapshot: snapshot_4
 			}) : resolveFolioAIBlockRange({
 				blockId: target_2.blockId,
-				doc: view_32.state.doc,
-				snapshot: snapshot_3
+				doc: view_33.state.doc,
+				snapshot: snapshot_4
 			});
 			if (range_5 === null) return null;
 			return pagedEditorRef.current?.getPageNumberForPmPos(range_5.from) ?? null;
 		},
 		getContentControls: (filter = {}) => {
-			const view_33 = pagedEditorRef.current?.getView();
-			if (!view_33) return [];
-			return findBlockSdtMatches(view_33.state.doc, filter).map((match_0) => ({
+			const view_34 = pagedEditorRef.current?.getView();
+			if (!view_34) return [];
+			return findBlockSdtMatches(view_34.state.doc, filter).map((match_0) => ({
 				properties: blockSdtAttrsToSdtProperties(match_0.node),
 				path: match_0.path,
 				pmPos: match_0.pos
 			}));
 		},
 		scrollToContentControl: (filter_0) => {
-			const view_34 = pagedEditorRef.current?.getView();
-			if (!view_34) return false;
-			const match_1 = findBlockSdtMatch(view_34.state.doc, filter_0);
+			const view_35 = pagedEditorRef.current?.getView();
+			if (!view_35) return false;
+			const match_1 = findBlockSdtMatch(view_35.state.doc, filter_0);
 			if (!match_1) return false;
 			const inside = match_1.pos + 1;
-			const $pos = view_34.state.doc.resolve(inside);
-			view_34.dispatch(view_34.state.tr.setSelection(TextSelection.near($pos)));
+			const $pos = view_35.state.doc.resolve(inside);
+			view_35.dispatch(view_35.state.tr.setSelection(TextSelection.near($pos)));
 			requestAnimationFrame(() => {
 				pagedEditorRef.current?.scrollToPosition(inside);
 			});
 			return true;
 		},
 		setContentControlContent: (filter_1, input, options_2 = {}) => {
-			const view_35 = pagedEditorRef.current?.getView();
-			if (!view_35) return false;
-			const tr_0 = typeof input === "string" ? setContentControlContentTr(view_35.state, filter_1, input, options_2) : setContentControlContentBlocksTr(view_35.state, filter_1, input, options_2);
+			const view_36 = pagedEditorRef.current?.getView();
+			if (!view_36) return false;
+			const tr_0 = typeof input === "string" ? setContentControlContentTr(view_36.state, filter_1, input, options_2) : setContentControlContentBlocksTr(view_36.state, filter_1, input, options_2);
 			if (!tr_0) return false;
-			view_35.dispatch(tr_0);
+			view_36.dispatch(tr_0);
 			return true;
 		},
 		setContentControlValue: (filter_2, input_0, options_3 = {}) => {
-			const view_36 = pagedEditorRef.current?.getView();
-			if (!view_36) return false;
-			const tr_1 = setContentControlValueTr(view_36.state, filter_2, input_0, options_3);
+			const view_37 = pagedEditorRef.current?.getView();
+			if (!view_37) return false;
+			const tr_1 = setContentControlValueTr(view_37.state, filter_2, input_0, options_3);
 			if (!tr_1) return false;
-			view_36.dispatch(tr_1);
+			view_37.dispatch(tr_1);
 			return true;
 		},
 		removeContentControl: (filter_3, options_4 = {}) => {
-			const view_37 = pagedEditorRef.current?.getView();
-			if (!view_37) return false;
-			const tr_2 = removeContentControlTr(view_37.state, filter_3, options_4);
+			const view_38 = pagedEditorRef.current?.getView();
+			if (!view_38) return false;
+			const tr_2 = removeContentControlTr(view_38.state, filter_3, options_4);
 			if (!tr_2) return false;
-			view_37.dispatch(tr_2);
+			view_38.dispatch(tr_2);
 			return true;
 		}
 	}), [
@@ -14014,7 +14261,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		replaceComments,
 		commentsRef,
 		commentsDirtyRef,
-		hfEditPosition,
+		getActiveEditorStory,
 		refreshBodyHistoryAvailability
 	]);
 	const getHfTargetElement = useCallback((pos_0) => {
@@ -14027,6 +14274,17 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		value: mode_0,
 		label: t(DISPLAY_MODE_LABEL_KEYS[mode_0])
 	})), [t]);
+	const activeHistoryAvailability = (() => {
+		if (activeNoteStory) return {
+			canRedo: pagedEditorRef.current?.canRedo() ?? false,
+			canUndo: pagedEditorRef.current?.canUndo() ?? false
+		};
+		if (hfEditPosition) return {
+			canRedo: history.canRedo,
+			canUndo: history.canUndo
+		};
+		return bodyHistoryAvailability;
+	})();
 	const toolbarChildren = toolbarExtra ?? null;
 	const visibleCommentAuthorCount = commentAuthors.filter((commentAuthor) => visibleCommentAuthorSet.has(commentAuthor)).length;
 	const allCommentAuthorsVisible = commentAuthors.length > 0 && showCommentsSidebar && visibleCommentAuthorCount === commentAuthors.length;
@@ -14068,39 +14326,39 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		if (isDisplayMode(value)) setDisplayMode(value);
 	}, [setDisplayMode]);
 	const handleAcceptActiveChange = useCallback(() => {
-		const view_38 = pagedEditorRef.current?.getView();
-		if (!view_38) return;
-		const { from: from_11, to: to_11 } = view_38.state.selection;
-		const range_6 = findChangeAtPosition(view_38.state, from_11, to_11);
-		acceptChange(range_6.from, range_6.to)(view_38.state, view_38.dispatch);
-	}, []);
-	const handleRejectActiveChange = useCallback(() => {
 		const view_39 = pagedEditorRef.current?.getView();
 		if (!view_39) return;
 		const { from: from_12, to: to_12 } = view_39.state.selection;
-		const range_7 = findChangeAtPosition(view_39.state, from_12, to_12);
-		rejectChange(range_7.from, range_7.to)(view_39.state, view_39.dispatch);
+		const range_6 = findChangeAtPosition(view_39.state, from_12, to_12);
+		acceptChange(range_6.from, range_6.to)(view_39.state, view_39.dispatch);
 	}, []);
-	const handlePreviousChange = useCallback(() => {
+	const handleRejectActiveChange = useCallback(() => {
 		const view_40 = pagedEditorRef.current?.getView();
 		if (!view_40) return;
-		const { from: from_13 } = view_40.state.selection;
-		const change = findPreviousChange(view_40.state, from_13);
+		const { from: from_13, to: to_13 } = view_40.state.selection;
+		const range_7 = findChangeAtPosition(view_40.state, from_13, to_13);
+		rejectChange(range_7.from, range_7.to)(view_40.state, view_40.dispatch);
+	}, []);
+	const handlePreviousChange = useCallback(() => {
+		const view_41 = pagedEditorRef.current?.getView();
+		if (!view_41) return;
+		const { from: from_14 } = view_41.state.selection;
+		const change = findPreviousChange(view_41.state, from_14);
 		if (!change) return;
-		view_40.dispatch(view_40.state.tr.setSelection(TextSelection.create(view_40.state.doc, change.from, change.to)));
-		view_40.focus();
+		view_41.dispatch(view_41.state.tr.setSelection(TextSelection.create(view_41.state.doc, change.from, change.to)));
+		view_41.focus();
 		requestAnimationFrame(() => {
 			pagedEditorRef.current?.scrollToPosition(change.from);
 		});
 	}, []);
 	const handleNextChange = useCallback(() => {
-		const view_41 = pagedEditorRef.current?.getView();
-		if (!view_41) return;
-		const { to: to_13 } = view_41.state.selection;
-		const change_0 = findNextChange(view_41.state, to_13);
+		const view_42 = pagedEditorRef.current?.getView();
+		if (!view_42) return;
+		const { to: to_14 } = view_42.state.selection;
+		const change_0 = findNextChange(view_42.state, to_14);
 		if (!change_0) return;
-		view_41.dispatch(view_41.state.tr.setSelection(TextSelection.create(view_41.state.doc, change_0.from, change_0.to)));
-		view_41.focus();
+		view_42.dispatch(view_42.state.tr.setSelection(TextSelection.create(view_42.state.doc, change_0.from, change_0.to)));
+		view_42.focus();
 		requestAnimationFrame(() => {
 			pagedEditorRef.current?.scrollToPosition(change_0.from);
 		});
@@ -14270,8 +14528,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		requestAnimationFrame(syncCommentHighlightStyles);
 	}, [onScrollTopChange, syncCommentHighlightStyles]);
 	const handlePagedSelectionChange = useCallback((_from, _to) => {
-		const view_42 = getActiveEditorView() ?? pagedEditorRef.current?.getView() ?? null;
-		handleSelectionChange(view_42 ? extractSelectionState(view_42.state) : null);
+		const view_43 = getActiveEditorView() ?? pagedEditorRef.current?.getView() ?? null;
+		handleSelectionChange(view_43 ? extractSelectionState(view_43.state) : null);
 	}, [getActiveEditorView, handleSelectionChange]);
 	const handleTotalPagesChange = useCallback((totalPages) => {
 		setScrollPageInfo((previous) => updateScrollPageTotal(previous, totalPages));
@@ -14291,14 +14549,14 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		setActiveCommentId,
 		updateComments
 	]);
-	const handleCommentReply = useCallback((id_2, text_5) => {
-		updateComments((previous_2) => [...previous_2, createComment(text_5, author, id_2)]);
+	const handleCommentReply = useCallback((id_2, text_6) => {
+		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_43 = pagedEditorRef.current?.getView();
-		if (!view_43 || !commentSelectionRange) return false;
-		if (!applyCommentMarkRange(view_43, commentSelectionRange, comment_3.id, { replacePending: true })) return false;
+		const view_44 = pagedEditorRef.current?.getView();
+		if (!view_44 || !commentSelectionRange) return false;
+		if (!applyCommentMarkRange(view_44, commentSelectionRange, comment_3.id, { replacePending: true })) return false;
 		const commentAuthor_2 = getCommentAuthorKey(comment_3.author);
 		setVisibleCommentAuthors((current) => {
 			if (current === null) return null;
@@ -14328,12 +14586,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		syncCommentHighlightStyles,
 		updateComments
 	]);
-	const handleTrackedChangeReply = useCallback((revisionId_2, text_6) => {
-		updateComments((previous_4) => [...previous_4, createComment(text_6, author, revisionId_2)]);
+	const handleTrackedChangeReply = useCallback((revisionId_2, text_7) => {
+		updateComments((previous_4) => [...previous_4, createComment(text_7, author, revisionId_2)]);
 	}, [author, updateComments]);
 	const handleCancelAddComment = useCallback(() => {
-		const view_44 = pagedEditorRef.current?.getView();
-		if (view_44 && commentSelectionRange) removePendingCommentMarkRange(view_44, commentSelectionRange);
+		const view_45 = pagedEditorRef.current?.getView();
+		if (view_45 && commentSelectionRange) removePendingCommentMarkRange(view_45, commentSelectionRange);
 		setIsAddingComment(false);
 		setCommentSelectionRange(null);
 		setAddCommentYPosition(null);
@@ -14343,16 +14601,16 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		setCommentSelectionRange,
 		setIsAddingComment
 	]);
-	const handleSidebarAcceptChange = useCallback((from_14, to_14) => {
-		const view_45 = pagedEditorRef.current?.getView();
-		if (!view_45) return;
-		acceptChange(from_14, to_14)(view_45.state, view_45.dispatch);
-		extractTrackedChanges();
-	}, [extractTrackedChanges]);
-	const handleSidebarRejectChange = useCallback((from_15, to_15) => {
+	const handleSidebarAcceptChange = useCallback((from_15, to_15) => {
 		const view_46 = pagedEditorRef.current?.getView();
 		if (!view_46) return;
-		rejectChange(from_15, to_15)(view_46.state, view_46.dispatch);
+		acceptChange(from_15, to_15)(view_46.state, view_46.dispatch);
+		extractTrackedChanges();
+	}, [extractTrackedChanges]);
+	const handleSidebarRejectChange = useCallback((from_16, to_16) => {
+		const view_47 = pagedEditorRef.current?.getView();
+		if (!view_47) return;
+		rejectChange(from_16, to_16)(view_47.state, view_47.dispatch);
 		extractTrackedChanges();
 	}, [extractTrackedChanges]);
 	const commentsPageWidth = history.state?.package.document.finalSectionProperties?.pageWidth;
@@ -14398,8 +14656,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		showCommentsSidebar,
 		visibleComments
 	]);
-	let activeHfRId = hfEditIsFirstPage ? activeFirstFooterRId : activeFooterRId;
-	if (hfEditPosition === "header") activeHfRId = hfEditIsFirstPage ? activeFirstHeaderRId : activeHeaderRId;
 	const getActiveHfView = useCallback(() => activeHfRId ? pagedEditorRef.current?.getHfView(activeHfRId) ?? null : null, [activeHfRId]);
 	const handleOutlineHeadingClick = useCallback((pmPos) => {
 		pagedEditorRef.current?.scrollToPosition(pmPos);
@@ -14423,10 +14679,15 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		handleContextMenuAction(action_3);
 	}, [handleContextMenuAction]);
 	const getBodyEditorView = useCallback(() => pagedEditorRef.current?.getView() ?? null, []);
+	const getContentControlEventRoot = useCallback(() => {
+		if (readOnly) return null;
+		const root = containerRef.current?.querySelector(".paged-editor__pages");
+		return root instanceof HTMLElement ? root : null;
+	}, [readOnly]);
 	const closeTableProperties = useCallback(() => setTablePropsOpen(false), []);
 	const applyTableProperties = useCallback((props_0) => {
-		const view_47 = getActiveEditorView();
-		if (view_47) setTableProperties(props_0)(view_47.state, view_47.dispatch);
+		const view_48 = getActiveEditorView();
+		if (view_48) setTableProperties(props_0)(view_48.state, view_48.dispatch);
 	}, [getActiveEditorView]);
 	const closeImagePosition = useCallback(() => setImagePositionOpen(false), [setImagePositionOpen]);
 	const closeImageProperties = useCallback(() => setImagePropsOpen(false), [setImagePropsOpen]);
@@ -14434,8 +14695,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_48 = getActiveEditorView();
-		if (view_48) view_48.dispatch(view_48.state.tr.insertText(symbol).scrollIntoView());
+		const view_49 = getActiveEditorView();
+		if (view_49) view_49.dispatch(view_49.state.tr.insertText(symbol).scrollIntoView());
 	}, [getActiveEditorView]);
 	const imagePropertiesCurrentData = useMemo(() => buildImagePropertiesData(state.pmImageContext), [state.pmImageContext]);
 	const currentFindResult = findResultRef.current;
@@ -14602,8 +14863,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 										onFormat: handleFormat,
 										onUndo: undoActiveEditor,
 										onRedo: redoActiveEditor,
-										canUndo: hfEditPosition ? history.canUndo : bodyHistoryAvailability.canUndo,
-										canRedo: hfEditPosition ? history.canRedo : bodyHistoryAvailability.canRedo,
+										canUndo: activeHistoryAvailability.canUndo,
+										canRedo: activeHistoryAvailability.canRedo,
 										disabled: readOnly,
 										theme: history.state.package.theme || theme || null,
 										fontFamilies,
@@ -14726,13 +14987,22 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 													firstPageHeaderContentRId: activeFirstHeaderRId,
 													firstPageFooterContentRId: activeFirstFooterRId,
 													...history.state.package.styles ? { styles: history.state.package.styles } : {},
-													onHeaderFooterDoubleClick: showHeaderFooterEditing ? handleHeaderFooterDoubleClick : void 0,
+													onHeaderFooterDoubleClick: showHeaderFooterEditing ? handleHeaderFooterStoryOpen : void 0,
 													hfEditMode: hfEditPosition,
+													activeHeaderFooterRId: activeHfRId,
 													onBodyClick: handleBodyClick,
+													onActiveNoteStoryChange: handleActiveNoteStoryChange,
 													zoom,
+													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 } : {},
@@ -14761,8 +15031,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 														onMouseDown: (e_1) => {
 															e_1.preventDefault();
 															e_1.stopPropagation();
-															const view_49 = pagedEditorRef.current?.getView();
-															if (!view_49) {
+															const view_50 = pagedEditorRef.current?.getView();
+															if (!view_50) {
 																setFloatingCommentBtn(null);
 																return;
 															}
@@ -14770,9 +15040,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 																from: floatingCommentBtn.from,
 																to: floatingCommentBtn.to
 															};
-															const currentSelection = view_49.state.selection;
+															const currentSelection = view_50.state.selection;
 															const safeRange = resolveCommentCreationRange({
-																docSize: view_49.state.doc.content.size,
+																docSize: view_50.state.doc.content.size,
 																capturedRange,
 																currentRange: {
 																	from: currentSelection.from,
@@ -14786,7 +15056,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 																return;
 															}
 															setCommentSelectionRange(safeRange);
-															if (!applyCommentMarkRange(view_49, safeRange, -1, { selectEnd: true })) {
+															if (!applyCommentMarkRange(view_50, safeRange, -1, { selectEnd: true })) {
 																setCommentSelectionRange(null);
 																setFloatingCommentBtn(null);
 																return;
@@ -14916,7 +15186,10 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 							onClose: handleContextMenuClose
 						})
 					}),
-					/* @__PURE__ */ jsx(ContentControlWidgetsOverlay, { getEditorView: getBodyEditorView }),
+					/* @__PURE__ */ jsx(ContentControlWidgetsOverlay, {
+						getEventRoot: getContentControlEventRoot,
+						getEditorView: getBodyEditorView
+					}),
 					/* @__PURE__ */ jsx(DocxEditorDialogs, {
 						findReplace: findReplaceDialog,
 						tableProperties: tablePropertiesDialog,