@stll/folio-core 0.10.0 → 0.12.0

package/dist/prosemirror/utils/extractTrackedChanges.js

@@ -1,3 +1,5 @@
+import { expectRunPropertyChangeMarkAttrs } from "../attrs/index.js";
+import { getTableCellMergeChange } from "../tableCellMergeRevision.js";
 //#region src/prosemirror/utils/extractTrackedChanges.ts
 const EMPTY_RESULT = {
 	entries: [],
@@ -23,7 +25,8 @@ function extractTrackedChanges(state) {
 	const insertionType = schema.marks["insertion"];
 	const deletionType = schema.marks["deletion"];
 	const commentType = schema.marks["comment"];
-	if (!insertionType && !deletionType) return EMPTY_RESULT;
+	const runPropertyChangeType = schema.marks["runPropertyChange"];
+	if (!insertionType && !deletionType && !runPropertyChangeType) return EMPTY_RESULT;
 	const raw = [];
 	const commentToRevision = /* @__PURE__ */ new Map();
 	const commentMetadata = /* @__PURE__ */ new Map();
@@ -116,6 +119,20 @@ function extractTrackedChanges(state) {
 					revisionId: cellMarker.info.revisionId
 				});
 			}
+			const continuationCells = node.attrs["_docxVMergeContinuationCells"];
+			if (Array.isArray(continuationCells)) for (const continuationCell of continuationCells) {
+				const change = getTableCellMergeChange(continuationCell);
+				if (!change) continue;
+				raw.push({
+					type: "cellMerged",
+					text: node.textContent || "",
+					author: change.info.author,
+					date: change.info.date,
+					from: pos,
+					to: pos + node.nodeSize,
+					revisionId: change.info.id
+				});
+			}
 			const tcPrChange = node.attrs["tcPrChange"];
 			if (Array.isArray(tcPrChange)) for (const entry of tcPrChange) {
 				if (!entry?.info || typeof entry.info.id !== "number") continue;
@@ -193,17 +210,31 @@ function extractTrackedChanges(state) {
 		else if (node.type.name === "image") inlineText = node.attrs["alt"] || "image";
 		else inlineText = node.type.name;
 		let tcMark = null;
-		for (const mark of node.marks) if (mark.type === insertionType || mark.type === deletionType) {
-			raw.push({
-				type: mark.type === insertionType ? "insertion" : "deletion",
-				text: inlineText,
-				author: mark.attrs["author"] || "",
-				date: mark.attrs["date"],
-				from: pos,
-				to: pos + node.nodeSize,
-				revisionId: mark.attrs["revisionId"]
-			});
-			tcMark = mark;
+		for (const mark of node.marks) {
+			if (mark.type === runPropertyChangeType) {
+				for (const change of expectRunPropertyChangeMarkAttrs(mark).changes) raw.push({
+					type: "runPropertiesChanged",
+					text: inlineText,
+					author: change.info.author,
+					date: change.info.date,
+					from: pos,
+					to: pos + node.nodeSize,
+					revisionId: change.info.id
+				});
+				continue;
+			}
+			if (mark.type === insertionType || mark.type === deletionType) {
+				raw.push({
+					type: mark.type === insertionType ? "insertion" : "deletion",
+					text: inlineText,
+					author: mark.attrs["author"] || "",
+					date: mark.attrs["date"],
+					from: pos,
+					to: pos + node.nodeSize,
+					revisionId: mark.attrs["revisionId"]
+				});
+				tcMark = mark;
+			}
 		}
 		if (commentType) {
 			const commentMark = node.marks.find((m) => m.type === commentType);
@@ -239,7 +270,24 @@ function extractTrackedChanges(state) {
 		cellPropertiesChanged: 3,
 		paragraphMarkInsertion: 2,
 		paragraphMarkDeletion: 2,
-		paragraphPropertiesChanged: 2
+		paragraphPropertiesChanged: 2,
+		runPropertiesChanged: 1
+	};
+	const STRUCTURAL_FAMILY_BY_TYPE = {
+		tableInserted: "insertion",
+		rowInserted: "insertion",
+		cellInserted: "insertion",
+		paragraphMarkInsertion: "insertion",
+		tableDeleted: "deletion",
+		rowDeleted: "deletion",
+		cellDeleted: "deletion",
+		paragraphMarkDeletion: "deletion",
+		tablePropertiesChanged: "properties",
+		rowPropertiesChanged: "properties",
+		cellPropertiesChanged: "properties",
+		paragraphPropertiesChanged: "properties",
+		runPropertiesChanged: "properties",
+		cellMerged: "merge"
 	};
 	const isStructuralType = (t) => t in STRUCTURAL_PRIORITY;
 	const slotByKey = /* @__PURE__ */ new Map();
@@ -256,7 +304,7 @@ function extractTrackedChanges(state) {
 			ordered.push(entry);
 			continue;
 		}
-		const key = `${entry.author}|${entry.date ?? ""}`;
+		const key = `${STRUCTURAL_FAMILY_BY_TYPE[entry.type] ?? entry.type}|${entry.author}|${entry.date ?? ""}`;
 		const slot = slotByKey.get(key);
 		if (slot === void 0) {
 			slotByKey.set(key, ordered.push(entry) - 1);

package/dist/prosemirror/validation.js

@@ -1,4 +1,5 @@
-import { readBlockSdtAttrs, readCharacterSpacingMarkAttrs, readCharacterStyleMarkAttrs, readCommentMarkAttrs, readEmphasisMarkAttrs, readFieldAttrs, readFontFamilyMarkAttrs, readFontSizeMarkAttrs, readFootnoteRefMarkAttrs, readHardBreakAttrs, readHighlightMarkAttrs, readHyperlinkMarkAttrs, readImageAttrs, readLanguageMarkAttrs, readMathAttrs, readParagraphAttrs, readRunFormattingOverrideMarkAttrs, readRunShadingMarkAttrs, readSdtAttrs, readShapeAttrs, readStrikeMarkAttrs, readTableAttrs, readTableCellAttrs, readTableRowAttrs, readTextBoxAttrs, readTextColorMarkAttrs, readTextEffectMarkAttrs, readTrackedChangeMarkAttrs, readUnderlineMarkAttrs } from "./attrs/index.js";
+import { readBlockSdtAttrs, readCharacterSpacingMarkAttrs, readCharacterStyleMarkAttrs, readCommentMarkAttrs, readEmphasisMarkAttrs, readFieldAttrs, readFontFamilyMarkAttrs, readFontSizeMarkAttrs, readFootnoteRefMarkAttrs, readHardBreakAttrs, readHighlightMarkAttrs, readHyperlinkMarkAttrs, readImageAttrs, readLanguageMarkAttrs, readMathAttrs, readParagraphAttrs, readRunFormattingOverrideMarkAttrs, readRunPropertyChangeMarkAttrs, readRunShadingMarkAttrs, readSdtAttrs, readShapeAttrs, readStrikeMarkAttrs, readTableAttrs, readTableCellAttrs, readTableRowAttrs, readTextBoxAttrs, readTextColorMarkAttrs, readTextEffectMarkAttrs, readTrackedChangeMarkAttrs, readUnderlineMarkAttrs } from "./attrs/index.js";
+import { readTextBoxAnchorAttrs } from "./textBoxAnchorAttrs.js";
 //#region src/prosemirror/validation.ts
 var ProseMirrorDocumentValidationError = class extends Error {
 	issues;
@@ -48,6 +49,7 @@ const validateNodeAttrs = (node, path, issues) => {
 		case "text":
 		case "horizontalRule":
 		case "pageBreak":
+		case "renderedPageBreak":
 		case "tab": return;
 		case "hardBreak":
 			appendAttrIssues(path, readHardBreakAttrs(node), issues);
@@ -87,6 +89,9 @@ const validateNodeAttrs = (node, path, issues) => {
 		case "textBox":
 			appendAttrIssues(path, readTextBoxAttrs(node), issues);
 			return;
+		case "textBoxAnchor":
+			appendAttrIssues(path, readTextBoxAnchorAttrs(node), issues);
+			return;
 		default: issues.push({
 			path: `${path}.type.name`,
 			message: `Unsupported ProseMirror node type ${node.type.name}.`
@@ -155,6 +160,9 @@ const validateMarks = (marks, path, issues) => {
 			case "deletion":
 				appendAttrIssues(markPath, readTrackedChangeMarkAttrs(mark), issues);
 				continue;
+			case "runPropertyChange":
+				appendAttrIssues(markPath, readRunPropertyChangeMarkAttrs(mark), issues);
+				continue;
 			case "runFormattingOverride":
 				appendAttrIssues(markPath, readRunFormattingOverrideMarkAttrs(mark), issues);
 				continue;

package/dist/render-dom/BodySelectionOverlay.d.ts

@@ -0,0 +1,31 @@
+import { EditorState } from "prosemirror-state";
+
+//#region src/render-dom/BodySelectionOverlay.d.ts
+type BodySelectionOverlayResult = {
+  type: "text";
+} | {
+  type: "image";
+  element: HTMLElement;
+  pmPos: number;
+};
+type SyncBodySelectionOverlayOptions = {
+  pagesContainer: HTMLElement;
+  state: EditorState;
+  zoom: number;
+  zIndex?: number;
+  caretColor?: string;
+  selectionColor?: string;
+};
+declare class BodySelectionOverlay {
+  clear(pagesContainer: HTMLElement): void;
+  sync({
+    pagesContainer,
+    state,
+    zoom,
+    zIndex,
+    caretColor,
+    selectionColor
+  }: SyncBodySelectionOverlayOptions): BodySelectionOverlayResult;
+}
+//#endregion
+export { BodySelectionOverlay, BodySelectionOverlayResult, SyncBodySelectionOverlayOptions };

package/dist/render-dom/BodySelectionOverlay.js

@@ -0,0 +1,76 @@
+import { findBodyPmAnchor } from "../layout-bridge/dom/findBodyPmSpans.js";
+import { applyCellSelectionHighlight } from "../layout-bridge/cellSelectionHighlight.js";
+import { findImageElement } from "../layout-painter/imageLayout.js";
+import { getCaretPositionFromDom, getSelectionRectsFromDom } from "../layout-bridge/dom/clickToPositionDom.js";
+import { NodeSelection } from "prosemirror-state";
+//#region src/render-dom/BodySelectionOverlay.ts
+/**
+* Imperative body-selection painter shared by framework adapters. The editable
+* ProseMirror view is hidden, so its caret, range selection, and table-cell
+* selection must be projected onto the paginated DOM.
+*/
+const CARET_CLASS = "folio-body-selection-caret";
+const RANGE_CLASS = "folio-body-selection-rect";
+const OWNED_OVERLAY_SELECTOR = `.${CARET_CLASS}, .${RANGE_CLASS}`;
+const setOverlayBox = (element, rect, pagesContainer, zoom) => {
+	const divisor = zoom > 0 ? zoom : 1;
+	element.style.left = `${rect.x / divisor + pagesContainer.scrollLeft}px`;
+	element.style.top = `${rect.y / divisor + pagesContainer.scrollTop}px`;
+	element.style.width = `${rect.width / divisor}px`;
+	element.style.height = `${rect.height / divisor}px`;
+};
+var BodySelectionOverlay = class {
+	clear(pagesContainer) {
+		for (const element of pagesContainer.querySelectorAll(OWNED_OVERLAY_SELECTOR)) element.remove();
+	}
+	sync({ pagesContainer, state, zoom, zIndex = 10, caretColor = "var(--doc-caret, #000)", selectionColor = "var(--doc-selection, rgba(66, 133, 244, 0.3))" }) {
+		this.clear(pagesContainer);
+		applyCellSelectionHighlight(pagesContainer, state);
+		const { selection } = state;
+		if (selection instanceof NodeSelection && selection.node.type.name === "image") {
+			const anchor = findBodyPmAnchor(pagesContainer, selection.from);
+			const element = anchor ? findImageElement(anchor) : null;
+			if (element) return {
+				type: "image",
+				element,
+				pmPos: selection.from
+			};
+		}
+		if (selection.empty) {
+			const caret = getCaretPositionFromDom(pagesContainer, selection.from, pagesContainer.getBoundingClientRect());
+			if (!caret) return { type: "text" };
+			const element = pagesContainer.ownerDocument.createElement("div");
+			element.className = CARET_CLASS;
+			element.dataset["folioCaretRect"] = "";
+			element.style.position = "absolute";
+			element.style.background = caretColor;
+			element.style.pointerEvents = "none";
+			element.style.zIndex = String(zIndex);
+			element.style.animation = "folio-caret-blink 1060ms steps(1, end) infinite";
+			setOverlayBox(element, {
+				x: caret.x,
+				y: caret.y,
+				width: 2 * (zoom > 0 ? zoom : 1),
+				height: caret.height
+			}, pagesContainer, zoom);
+			pagesContainer.appendChild(element);
+			return { type: "text" };
+		}
+		const rects = getSelectionRectsFromDom(pagesContainer, selection.from, selection.to, pagesContainer.getBoundingClientRect());
+		for (const rect of rects) {
+			const element = pagesContainer.ownerDocument.createElement("div");
+			element.className = RANGE_CLASS;
+			element.dataset["folioSelectionRect"] = "";
+			element.dataset["pageIndex"] = String(rect.pageIndex);
+			element.style.position = "absolute";
+			element.style.background = selectionColor;
+			element.style.pointerEvents = "none";
+			element.style.zIndex = String(zIndex);
+			setOverlayBox(element, rect, pagesContainer, zoom);
+			pagesContainer.appendChild(element);
+		}
+		return { type: "text" };
+	}
+};
+//#endregion
+export { BodySelectionOverlay };

package/dist/render-dom/HeaderFooterSelectionOverlay.d.ts

@@ -0,0 +1,28 @@
+import { HfSlotKind } from "../layout-bridge/dom/findHfPmSpans.js";
+
+//#region src/render-dom/HeaderFooterSelectionOverlay.d.ts
+type HeaderFooterSelection = {
+  from: number;
+  kind: HfSlotKind;
+  pageNumber?: number;
+  rId: string;
+  to: number;
+};
+type HeaderFooterSelectionRect = {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+};
+type HeaderFooterSelectionGeometry = {
+  caret: Omit<HeaderFooterSelectionRect, "width"> | null;
+  ranges: HeaderFooterSelectionRect[];
+};
+/** Resolve a persistent header/footer PM selection against its painted DOM. */
+declare const resolveHeaderFooterSelectionGeometry: (pagesContainer: HTMLElement, selection: HeaderFooterSelection, zoom: number) => HeaderFooterSelectionGeometry;
+declare class HeaderFooterSelectionOverlay {
+  clear(pagesContainer: HTMLElement): void;
+  sync(pagesContainer: HTMLElement, selection: HeaderFooterSelection | null, zoom: number): void;
+}
+//#endregion
+export { HeaderFooterSelection, HeaderFooterSelectionGeometry, HeaderFooterSelectionOverlay, HeaderFooterSelectionRect, resolveHeaderFooterSelectionGeometry };

package/dist/render-dom/HeaderFooterSelectionOverlay.js

@@ -0,0 +1,121 @@
+import { findHfCaretSpan, findHfPmSpans } from "../layout-bridge/dom/findHfPmSpans.js";
+//#region src/render-dom/HeaderFooterSelectionOverlay.ts
+const CARET_CLASS = "folio-hf-selection-caret";
+const RANGE_CLASS = "folio-hf-selection-rect";
+const OWNED_SELECTOR = `.${CARET_CLASS}, .${RANGE_CLASS}`;
+const TEXT_NODE_TYPE = 3;
+const relativeRect = (rect, containerRect, zoom) => ({
+	x: (rect.left - containerRect.left) / zoom,
+	y: (rect.top - containerRect.top) / zoom,
+	width: rect.width / zoom,
+	height: rect.height / zoom
+});
+/** Resolve a persistent header/footer PM selection against its painted DOM. */
+const resolveHeaderFooterSelectionGeometry = (pagesContainer, selection, zoom) => {
+	const containerRect = pagesContainer.getBoundingClientRect();
+	const zoomDivisor = zoom === 0 ? 1 : zoom;
+	const pageScope = selection.pageNumber ? pagesContainer.querySelector(`.layout-page[data-page-number="${selection.pageNumber}"]`) ?? pagesContainer : pagesContainer;
+	if (selection.from === selection.to) {
+		const hit = findHfCaretSpan(pageScope, selection.kind, selection.rId, selection.from);
+		if (!hit) return {
+			caret: null,
+			ranges: []
+		};
+		const anchorRect = hit.element.getBoundingClientRect();
+		let left = hit.edge === "right" ? anchorRect.right : anchorRect.left;
+		let top = anchorRect.top;
+		let height = anchorRect.height || 16;
+		const pmStart = Number.parseInt(hit.element.dataset["pmStart"] ?? "", 10);
+		const pmEnd = Number.parseInt(hit.element.dataset["pmEnd"] ?? "", 10);
+		const textNode = hit.element.firstChild;
+		if (textNode?.nodeType === TEXT_NODE_TYPE && Number.isFinite(pmStart) && Number.isFinite(pmEnd)) {
+			const offset = Math.min(Math.max(0, selection.from - pmStart), textNode.textContent?.length ?? 0);
+			const range = hit.element.ownerDocument.createRange();
+			range.setStart(textNode, offset);
+			range.setEnd(textNode, offset);
+			const rangeRect = range.getBoundingClientRect();
+			if (rangeRect.height > 0 || rangeRect.width > 0 || rangeRect.left > 0) {
+				left = rangeRect.left;
+				top = rangeRect.top;
+				height = rangeRect.height || height;
+			}
+		}
+		return {
+			caret: {
+				x: (left - containerRect.left) / zoomDivisor,
+				y: (top - containerRect.top) / zoomDivisor,
+				height: height / zoomDivisor
+			},
+			ranges: []
+		};
+	}
+	const from = Math.min(selection.from, selection.to);
+	const to = Math.max(selection.from, selection.to);
+	const ranges = [];
+	for (const span of findHfPmSpans(pageScope, selection.kind, selection.rId)) {
+		const spanStart = Number.parseInt(span.dataset["pmStart"] ?? "", 10);
+		const spanEnd = Number.parseInt(span.dataset["pmEnd"] ?? "", 10);
+		if (!Number.isFinite(spanStart) || !Number.isFinite(spanEnd)) continue;
+		if (spanEnd <= from || spanStart >= to) continue;
+		const textNode = span.firstChild;
+		if (textNode?.nodeType === TEXT_NODE_TYPE) {
+			const length = textNode.textContent?.length ?? 0;
+			const startOffset = Math.max(0, from - spanStart);
+			const endOffset = Math.min(length, to - spanStart);
+			if (startOffset < endOffset) {
+				const range = span.ownerDocument.createRange();
+				range.setStart(textNode, startOffset);
+				range.setEnd(textNode, endOffset);
+				for (const rect of Array.from(range.getClientRects())) ranges.push(relativeRect(rect, containerRect, zoomDivisor));
+				continue;
+			}
+		}
+		ranges.push(relativeRect(span.getBoundingClientRect(), containerRect, zoomDivisor));
+	}
+	return {
+		caret: null,
+		ranges
+	};
+};
+const createOverlayElement = (pagesContainer, className) => {
+	const element = pagesContainer.ownerDocument.createElement("div");
+	element.className = className;
+	element.style.position = "absolute";
+	element.style.pointerEvents = "none";
+	return element;
+};
+var HeaderFooterSelectionOverlay = class {
+	clear(pagesContainer) {
+		for (const element of pagesContainer.querySelectorAll(OWNED_SELECTOR)) element.remove();
+	}
+	sync(pagesContainer, selection, zoom) {
+		this.clear(pagesContainer);
+		if (!selection) return;
+		const geometry = resolveHeaderFooterSelectionGeometry(pagesContainer, selection, zoom);
+		for (const rect of geometry.ranges) {
+			const element = createOverlayElement(pagesContainer, RANGE_CLASS);
+			element.dataset["testid"] = "hf-selection-rect";
+			element.style.left = `${rect.x}px`;
+			element.style.top = `${rect.y}px`;
+			element.style.width = `${rect.width}px`;
+			element.style.height = `${rect.height}px`;
+			element.style.background = "var(--doc-selection, rgba(66, 133, 244, 0.3))";
+			element.style.opacity = "0.35";
+			element.style.zIndex = "10";
+			pagesContainer.append(element);
+		}
+		if (!geometry.caret) return;
+		const caret = createOverlayElement(pagesContainer, CARET_CLASS);
+		caret.dataset["testid"] = "hf-caret";
+		caret.style.left = `${geometry.caret.x}px`;
+		caret.style.top = `${geometry.caret.y}px`;
+		caret.style.width = "2px";
+		caret.style.height = `${geometry.caret.height}px`;
+		caret.style.background = "var(--doc-canvas-text, #000)";
+		caret.style.zIndex = "11";
+		caret.style.animation = "folio-caret-blink 1060ms steps(1, end) infinite";
+		pagesContainer.append(caret);
+	}
+};
+//#endregion
+export { HeaderFooterSelectionOverlay, resolveHeaderFooterSelectionGeometry };

package/dist/render-dom/RemoteSelectionOverlay.d.ts

@@ -0,0 +1,30 @@
+import { HiddenProseMirrorRemoteSelection } from "../controller/hiddenEditorManager.js";
+import { RenderedDomContext, RenderedDomPoint, RenderedDomRect } from "./RenderedDomContext.js";
+
+//#region src/render-dom/RemoteSelectionOverlay.d.ts
+type SyncRemoteSelectionOverlayOptions = {
+  pagesContainer: HTMLElement;
+  selections: readonly HiddenProseMirrorRemoteSelection[];
+  zoom: number;
+  zIndex?: number;
+  renderedDomContext?: RenderedDomContext;
+};
+type RemoteSelectionOverlayGeometry = {
+  caret: RenderedDomPoint | null;
+  rects: RenderedDomRect[];
+  selection: HiddenProseMirrorRemoteSelection;
+};
+declare const resolveRemoteSelectionOverlayGeometry: (renderedDomContext: RenderedDomContext, selections: readonly HiddenProseMirrorRemoteSelection[]) => RemoteSelectionOverlayGeometry[];
+/** Paint collaborative cursors and selections over the rendered page DOM. */
+declare class RemoteSelectionOverlay {
+  clear(pagesContainer: HTMLElement): void;
+  sync({
+    pagesContainer,
+    selections,
+    zoom,
+    zIndex,
+    renderedDomContext
+  }: SyncRemoteSelectionOverlayOptions): void;
+}
+//#endregion
+export { RemoteSelectionOverlay, RemoteSelectionOverlayGeometry, SyncRemoteSelectionOverlayOptions, resolveRemoteSelectionOverlayGeometry };

package/dist/render-dom/RemoteSelectionOverlay.js

@@ -0,0 +1,67 @@
+import { createRenderedDomContext } from "./RenderedDomContext.js";
+//#region src/render-dom/RemoteSelectionOverlay.ts
+const CARET_CLASS = "folio-remote-selection-caret";
+const LABEL_CLASS = "folio-remote-selection-label";
+const RANGE_CLASS = "folio-remote-selection-rect";
+const OWNED_OVERLAY_SELECTOR = `.${CARET_CLASS}, .${LABEL_CLASS}, .${RANGE_CLASS}`;
+const resolveRemoteSelectionOverlayGeometry = (renderedDomContext, selections) => selections.map((selection) => ({
+	caret: renderedDomContext.getCoordinatesForPosition(selection.head),
+	rects: renderedDomContext.getRectsForRange(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head)),
+	selection
+}));
+const setBox = (element, rect) => {
+	element.style.left = `${rect.x}px`;
+	element.style.top = `${rect.y}px`;
+	element.style.width = `${rect.width}px`;
+	element.style.height = `${rect.height}px`;
+};
+const createOverlayElement = (pagesContainer, className, zIndex) => {
+	const element = pagesContainer.ownerDocument.createElement("div");
+	element.className = className;
+	element.style.position = "absolute";
+	element.style.pointerEvents = "none";
+	element.style.zIndex = String(zIndex);
+	return element;
+};
+/** Paint collaborative cursors and selections over the rendered page DOM. */
+var RemoteSelectionOverlay = class {
+	clear(pagesContainer) {
+		for (const element of pagesContainer.querySelectorAll(OWNED_OVERLAY_SELECTOR)) element.remove();
+	}
+	sync({ pagesContainer, selections, zoom, zIndex = 20, renderedDomContext = createRenderedDomContext(pagesContainer, zoom) }) {
+		this.clear(pagesContainer);
+		for (const { caret, rects, selection } of resolveRemoteSelectionOverlayGeometry(renderedDomContext, selections)) {
+			for (const rect of rects) {
+				const element = createOverlayElement(pagesContainer, RANGE_CLASS, zIndex);
+				element.dataset["clientId"] = String(selection.clientId);
+				element.style.background = `color-mix(in srgb, ${selection.color} 24%, transparent)`;
+				setBox(element, rect);
+				pagesContainer.appendChild(element);
+			}
+			if (!caret) continue;
+			const caretElement = createOverlayElement(pagesContainer, CARET_CLASS, zIndex + 1);
+			caretElement.dataset["clientId"] = String(selection.clientId);
+			caretElement.style.background = selection.color;
+			setBox(caretElement, {
+				...caret,
+				width: 2
+			});
+			pagesContainer.appendChild(caretElement);
+			const label = createOverlayElement(pagesContainer, LABEL_CLASS, zIndex + 2);
+			label.dataset["clientId"] = String(selection.clientId);
+			label.textContent = selection.name;
+			label.style.background = selection.color;
+			label.style.color = "var(--background, #fff)";
+			label.style.fontSize = "10px";
+			label.style.lineHeight = "1";
+			label.style.padding = "2px 4px";
+			label.style.borderRadius = "2px";
+			label.style.left = `${caret.x}px`;
+			label.style.top = `${Math.max(0, caret.y - 18)}px`;
+			label.style.whiteSpace = "nowrap";
+			pagesContainer.appendChild(label);
+		}
+	}
+};
+//#endregion
+export { RemoteSelectionOverlay, resolveRemoteSelectionOverlayGeometry };

package/dist/render-dom/RenderedDomContext.d.ts

@@ -0,0 +1,40 @@
+//#region src/render-dom/RenderedDomContext.d.ts
+/**
+ * Framework-neutral mapping from ProseMirror positions to the DOM emitted by
+ * the layout painter. Framework adapters use this for decorations, anchored
+ * chrome, and plugin surfaces without duplicating range geometry.
+ */
+type RenderedDomPoint = {
+  x: number;
+  y: number;
+  height: number;
+};
+type RenderedDomRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+type RenderedDomContext = {
+  getCoordinatesForPosition(pmPos: number): RenderedDomPoint | null;
+  findElementsForRange(from: number, to: number): Element[];
+  getRectsForRange(from: number, to: number): RenderedDomRect[];
+  getContainerOffset(): {
+    x: number;
+    y: number;
+  };
+};
+declare class RenderedDomContextImpl implements RenderedDomContext {
+  #private;
+  constructor(pagesContainer: HTMLElement, zoom?: number);
+  getCoordinatesForPosition(pmPos: number): RenderedDomPoint | null;
+  findElementsForRange(from: number, to: number): Element[];
+  getRectsForRange(from: number, to: number): RenderedDomRect[];
+  getContainerOffset(): {
+    x: number;
+    y: number;
+  };
+}
+declare const createRenderedDomContext: (pagesContainer: HTMLElement, zoom?: number) => RenderedDomContext;
+//#endregion
+export { RenderedDomContext, RenderedDomContextImpl, RenderedDomPoint, RenderedDomRect, createRenderedDomContext };

package/dist/render-dom/RenderedDomContext.js

@@ -0,0 +1,126 @@
+import { findBodyEmptyRuns, findBodyPmSpans } from "../layout-bridge/dom/findBodyPmSpans.js";
+import { closestHtmlElement } from "../utils/domGuards.js";
+//#region src/render-dom/RenderedDomContext.ts
+/**
+* Framework-neutral mapping from ProseMirror positions to the DOM emitted by
+* the layout painter. Framework adapters use this for decorations, anchored
+* chrome, and plugin surfaces without duplicating range geometry.
+*/
+const isTextNode = (node) => node?.nodeType === Node.TEXT_NODE;
+const textNodeForSpan = (span) => {
+	const firstChild = span.firstChild;
+	if (isTextNode(firstChild)) return firstChild;
+	if (firstChild instanceof HTMLElement && firstChild.tagName === "A" && isTextNode(firstChild.firstChild)) return firstChild.firstChild;
+	return null;
+};
+const lineHeightFor = (element, zoom) => {
+	const line = closestHtmlElement(element, ".layout-line");
+	return line ? line.getBoundingClientRect().height / zoom : 16;
+};
+var RenderedDomContextImpl = class {
+	#pagesContainer;
+	#zoom;
+	constructor(pagesContainer, zoom = 1) {
+		this.#pagesContainer = pagesContainer;
+		this.#zoom = zoom > 0 ? zoom : 1;
+	}
+	getCoordinatesForPosition(pmPos) {
+		const containerRect = this.#pagesContainer.getBoundingClientRect();
+		for (const span of findBodyPmSpans(this.#pagesContainer)) {
+			const pmStart = Number(span.dataset["pmStart"]);
+			const pmEnd = Number(span.dataset["pmEnd"]);
+			if (!(span.classList.contains("layout-run-tab") ? pmPos >= pmStart && pmPos < pmEnd : pmPos >= pmStart && pmPos <= pmEnd)) continue;
+			const spanRect = span.getBoundingClientRect();
+			if (span.classList.contains("layout-run-tab")) return {
+				x: (spanRect.left - containerRect.left) / this.#zoom,
+				y: (spanRect.top - containerRect.top) / this.#zoom,
+				height: lineHeightFor(span, this.#zoom)
+			};
+			const textNode = textNodeForSpan(span);
+			if (!textNode) return {
+				x: (spanRect.left - containerRect.left) / this.#zoom,
+				y: (spanRect.top - containerRect.top) / this.#zoom,
+				height: lineHeightFor(span, this.#zoom)
+			};
+			const charIndex = Math.min(Math.max(0, pmPos - pmStart), textNode.length);
+			const range = span.ownerDocument.createRange();
+			range.setStart(textNode, charIndex);
+			range.setEnd(textNode, charIndex);
+			const rangeRect = range.getBoundingClientRect();
+			return {
+				x: (rangeRect.left - containerRect.left) / this.#zoom,
+				y: (rangeRect.top - containerRect.top) / this.#zoom,
+				height: lineHeightFor(span, this.#zoom)
+			};
+		}
+		for (const emptyRun of findBodyEmptyRuns(this.#pagesContainer)) {
+			const paragraph = closestHtmlElement(emptyRun, ".layout-paragraph");
+			if (!paragraph) continue;
+			const pmStart = Number(paragraph.dataset["pmStart"]);
+			const pmEnd = Number(paragraph.dataset["pmEnd"]);
+			if (pmPos < pmStart || pmPos > pmEnd) continue;
+			const rect = emptyRun.getBoundingClientRect();
+			return {
+				x: (rect.left - containerRect.left) / this.#zoom,
+				y: (rect.top - containerRect.top) / this.#zoom,
+				height: lineHeightFor(emptyRun, this.#zoom)
+			};
+		}
+		return null;
+	}
+	findElementsForRange(from, to) {
+		return findBodyPmSpans(this.#pagesContainer).filter((span) => {
+			const pmStart = Number(span.dataset["pmStart"]);
+			return Number(span.dataset["pmEnd"]) > from && pmStart < to;
+		});
+	}
+	getRectsForRange(from, to) {
+		const containerRect = this.#pagesContainer.getBoundingClientRect();
+		const rects = [];
+		for (const element of this.findElementsForRange(from, to)) {
+			if (!(element instanceof HTMLElement)) continue;
+			const pmStart = Number(element.dataset["pmStart"]);
+			if (element.classList.contains("layout-run-tab")) {
+				const rect = element.getBoundingClientRect();
+				rects.push({
+					x: (rect.left - containerRect.left) / this.#zoom,
+					y: (rect.top - containerRect.top) / this.#zoom,
+					width: rect.width / this.#zoom,
+					height: rect.height / this.#zoom
+				});
+				continue;
+			}
+			const textNode = textNodeForSpan(element);
+			if (!textNode) continue;
+			const startChar = Math.max(0, from - pmStart);
+			const endChar = Math.min(textNode.length, to - pmStart);
+			if (startChar >= endChar) continue;
+			const range = element.ownerDocument.createRange();
+			range.setStart(textNode, startChar);
+			range.setEnd(textNode, endChar);
+			for (const rect of Array.from(range.getClientRects())) rects.push({
+				x: (rect.left - containerRect.left) / this.#zoom,
+				y: (rect.top - containerRect.top) / this.#zoom,
+				width: rect.width / this.#zoom,
+				height: rect.height / this.#zoom
+			});
+		}
+		return rects;
+	}
+	getContainerOffset() {
+		const parent = this.#pagesContainer.parentElement;
+		if (!parent) return {
+			x: 0,
+			y: 0
+		};
+		const containerRect = this.#pagesContainer.getBoundingClientRect();
+		const parentRect = parent.getBoundingClientRect();
+		return {
+			x: (containerRect.left - parentRect.left) / this.#zoom,
+			y: (containerRect.top - parentRect.top) / this.#zoom
+		};
+	}
+};
+const createRenderedDomContext = (pagesContainer, zoom = 1) => new RenderedDomContextImpl(pagesContainer, zoom);
+//#endregion
+export { RenderedDomContextImpl, createRenderedDomContext };