@markput/react 0.12.1 → 0.14.0

package/index.js

@@ -58,13 +58,15 @@ var MarkputHandler = class {
 		this.store = store;
 	}
 	get container() {
-		return this.store.slots.container();
+		return this.store.dom.container();
 	}
 	get overlay() {
 		return this.store.overlay.element();
 	}
 	focus() {
-		this.store.nodes.focus.head?.focus();
+		const firstAddress = this.store.parsing.index().addressFor([0]);
+		if (firstAddress && this.store.dom.focusAddress(firstAddress).ok) return;
+		this.container?.focus();
 	}
 };
 //#endregion
@@ -79,192 +81,6 @@ var KeyGenerator = class {
 	}
 };
 //#endregion
-//#region ../../core/src/shared/checkers/domGuards.ts
-/** Type guard: checks if a value is an HTMLElement. */
-function isHtmlElement(el) {
-	return typeof HTMLElement !== "undefined" && el instanceof HTMLElement;
-}
-/** Type guard: checks if a value is a Text node. */
-function isTextNode(node) {
-	return node instanceof Text;
-}
-/** Get the i-th child of an element as HTMLElement, or undefined if out of bounds or wrong type. */
-function childAt(parent, index) {
-	const child = parent?.children[index];
-	return child instanceof HTMLElement ? child : void 0;
-}
-/** Get all children of an element as HTMLElement[], filtering out non-HTML elements. */
-function htmlChildren(parent) {
-	if (!parent) return [];
-	return Array.from(parent.children).filter((child) => child instanceof HTMLElement);
-}
-/** Get the first element child as HTMLElement, or null. */
-function firstHtmlChild(parent) {
-	const child = parent?.firstElementChild;
-	return child instanceof HTMLElement ? child : null;
-}
-/** Get the last element child as HTMLElement, or null. */
-function lastHtmlChild(parent) {
-	const child = parent?.lastElementChild;
-	return child instanceof HTMLElement ? child : null;
-}
-/** Safely narrow an event's target to Node. */
-function nodeTarget(event) {
-	const { target } = event;
-	return target instanceof Node ? target : null;
-}
-/** Get the next node from a TreeWalker as Text, or null. */
-function nextText(walker) {
-	const node = walker.nextNode();
-	return node?.nodeType === 3 ? node : null;
-}
-//#endregion
-//#region ../../core/src/features/caret/Caret.ts
-var Caret = class {
-	static get isSelectedPosition() {
-		const selection = window.getSelection();
-		if (!selection) return;
-		return selection.isCollapsed;
-	}
-	static getCurrentPosition() {
-		return window.getSelection()?.anchorOffset ?? 0;
-	}
-	static getFocusedSpan() {
-		return window.getSelection()?.anchorNode?.textContent ?? "";
-	}
-	static getSelectedNode() {
-		const node = window.getSelection()?.anchorNode;
-		if (node && document.contains(node)) return node;
-		throw new Error("Anchor node of selection is not exists!");
-	}
-	static getAbsolutePosition() {
-		const rect = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
-		if (rect) return {
-			left: rect.left,
-			top: rect.top + rect.height + 1
-		};
-		return {
-			left: 0,
-			top: 0
-		};
-	}
-	/** Returns the raw DOMRect of the current caret position, or null if unavailable. */
-	static getCaretRect() {
-		try {
-			return (window.getSelection()?.getRangeAt(0))?.getBoundingClientRect() ?? null;
-		} catch {
-			return null;
-		}
-	}
-	/**
-	* Returns true if the caret is on the first visual line of the element.
-	*/
-	static isCaretOnFirstLine(element) {
-		const caretRect = this.getCaretRect();
-		if (!caretRect || caretRect.height === 0) return true;
-		const elRect = element.getBoundingClientRect();
-		return caretRect.top < elRect.top + caretRect.height + 2;
-	}
-	/**
-	* Returns true if the caret is on the last visual line of the element.
-	*/
-	static isCaretOnLastLine(element) {
-		const caretRect = this.getCaretRect();
-		if (!caretRect || caretRect.height === 0) return true;
-		const elRect = element.getBoundingClientRect();
-		return caretRect.bottom > elRect.bottom - caretRect.height - 2;
-	}
-	/**
-	* Positions the caret in `element` at the character closest to the given x coordinate.
-	* `y` defaults to the vertical center of the element.
-	*/
-	static setAtX(element, x, y) {
-		const elRect = element.getBoundingClientRect();
-		const targetY = y ?? elRect.top + elRect.height / 2;
-		const caretDoc = document;
-		const caretPos = caretDoc.caretRangeFromPoint?.(x, targetY) ?? caretDoc.caretPositionFromPoint?.(x, targetY);
-		if (!caretPos) return;
-		const sel = window.getSelection();
-		if (!sel) return;
-		let domRange;
-		if (caretPos instanceof Range) domRange = caretPos;
-		else if ("offsetNode" in caretPos) {
-			domRange = document.createRange();
-			domRange.setStart(caretPos.offsetNode, caretPos.offset);
-			domRange.collapse(true);
-		} else return;
-		if (!element.contains(domRange.startContainer)) {
-			this.setIndex(element, Infinity);
-			return;
-		}
-		sel.removeAllRanges();
-		sel.addRange(domRange);
-	}
-	static trySetIndex(element, offset) {
-		try {
-			this.setIndex(element, offset);
-		} catch (e) {
-			console.error(e);
-		}
-	}
-	/**
-	* Sets the caret at character `offset` within `element` by walking text nodes.
-	* Use Infinity to position at the very end of all text.
-	*/
-	static setIndex(element, offset) {
-		const selection = window.getSelection();
-		if (!selection) return;
-		const walker = document.createTreeWalker(element, 4);
-		let node = nextText(walker);
-		if (!node) return;
-		let remaining = isFinite(offset) ? Math.max(0, offset) : Infinity;
-		for (;;) {
-			const next = nextText(walker);
-			if (!next || remaining <= node.length) {
-				const charOffset = isFinite(remaining) ? Math.min(remaining, node.length) : node.length;
-				const range = document.createRange();
-				range.setStart(node, charOffset);
-				range.collapse(true);
-				selection.removeAllRanges();
-				selection.addRange(range);
-				return;
-			}
-			remaining -= node.length;
-			node = next;
-		}
-	}
-	static getCaretIndex(element) {
-		let position = 0;
-		const selection = window.getSelection();
-		if (!selection?.rangeCount) return position;
-		const range = selection.getRangeAt(0);
-		const preCaretRange = range.cloneRange();
-		preCaretRange.selectNodeContents(element);
-		preCaretRange.setEnd(range.endContainer, range.endOffset);
-		position = preCaretRange.toString().length;
-		return position;
-	}
-	static setCaretToEnd(element) {
-		if (!element) return;
-		this.setIndex(element, Infinity);
-	}
-	static getIndex() {
-		return window.getSelection()?.anchorOffset ?? NaN;
-	}
-	static setIndex1(offset) {
-		const selection = window.getSelection();
-		if (!selection?.anchorNode || !selection.rangeCount) return;
-		const range = selection.getRangeAt(0);
-		range.setStart(range.startContainer.firstChild ?? range.startContainer, offset);
-		range.setEnd(range.startContainer.firstChild ?? range.startContainer, offset);
-	}
-	setCaretRightTo(element, offset) {
-		const range = window.getSelection()?.getRangeAt(0);
-		range?.setStart(range.endContainer, offset);
-		range?.setEnd(range.endContainer, offset);
-	}
-};
-//#endregion
 //#region ../../core/src/shared/signals/alien-signals/system.ts
 let ReactiveFlags = /* @__PURE__ */ function(ReactiveFlags) {
 	ReactiveFlags[ReactiveFlags["None"] = 0] = "None";
@@ -764,30 +580,6 @@ function batch(fn, opts) {
 		mutableScope = prevMutable;
 	}
 }
-function trigger(fn) {
-	const sub = {
-		deps: void 0,
-		depsTail: void 0,
-		flags: ReactiveFlags.Watching
-	};
-	const prevSub = setActiveSub(sub);
-	try {
-		fn();
-	} finally {
-		activeSub = prevSub;
-		let dep = sub.deps;
-		while (dep !== void 0) {
-			const subs = dep.dep.subs;
-			dep = unlink(dep, sub);
-			if (subs !== void 0) {
-				sub.flags = ReactiveFlags.None;
-				propagate(subs);
-				shallowPropagate(subs);
-			}
-		}
-		if (!batchDepth) flush();
-	}
-}
 function untracked(fn) {
 	const prev = setActiveSub(void 0);
 	try {
@@ -803,358 +595,33 @@ function listen(target, event, handler, options) {
 	});
 }
 //#endregion
-//#region ../../core/src/features/caret/focus.ts
-function enableFocus(store) {
-	const container = store.slots.container();
-	if (!container) return () => {};
-	const scope = effectScope(() => {
-		listen(container, "focusin", (e) => {
-			const target = isHtmlElement(e.target) ? e.target : void 0;
-			store.nodes.focus.target = target;
-		});
-		listen(container, "focusout", () => {
-			store.nodes.focus.target = void 0;
-		});
-		listen(container, "click", () => {
-			const tokens = store.parsing.tokens();
-			if (tokens.length === 1 && tokens[0].type === "text" && tokens[0].content === "") {
-				const container = store.slots.container();
-				(container ? firstHtmlChild(container) : null)?.focus();
-			}
-		});
-		watch(store.lifecycle.rendered, () => {
-			store.dom.reconcile();
-			if (!store.props.Mark()) return;
-			recover(store);
-		});
-	});
-	return () => {
-		scope();
-		store.nodes.focus.clear();
-	};
-}
-function recover(store) {
-	const recovery = store.caret.recovery();
-	if (!recovery) return;
-	const { anchor, caret, isNext } = recovery;
-	const isStale = !anchor.target || !anchor.target.isConnected;
-	let target;
-	switch (true) {
-		case isNext && isStale: {
-			const container = store.slots.container();
-			target = (recovery.childIndex != null ? childAt(container, recovery.childIndex + 2) : void 0) ?? store.nodes.focus.tail ?? void 0;
-			break;
-		}
-		case isNext:
-			target = anchor.prev.target;
-			break;
-		case isStale:
-			target = store.nodes.focus.head ?? void 0;
-			break;
-		default: target = anchor.next.target;
-	}
-	store.nodes.focus.target = target;
-	target?.focus();
-	queueMicrotask(() => {
-		if (!target?.isConnected) return;
-		store.nodes.focus.target = target;
-		store.nodes.focus.caret = caret;
-	});
-	store.caret.recovery(void 0);
-}
-//#endregion
-//#region ../../core/src/features/caret/selection.ts
-function enableSelection(store) {
-	let pressedNode = null;
-	let isPressed = false;
-	const scope = effectScope(() => {
-		listen(document, "mousedown", (e) => {
-			pressedNode = nodeTarget(e);
-			isPressed = true;
-		});
-		listen(document, "mousemove", (e) => {
-			const container = store.slots.container();
-			if (!container) return;
-			const currentIsPressed = isPressed;
-			const isNotInnerSome = !container.contains(pressedNode) || pressedNode !== e.target;
-			const isInside = window.getSelection()?.containsNode(container, true);
-			if (currentIsPressed && isNotInnerSome && isInside) {
-				if (store.caret.selecting() !== "drag") store.caret.selecting("drag");
-			}
-		});
-		listen(document, "mouseup", () => {
-			isPressed = false;
-			pressedNode = null;
-			if (store.caret.selecting() === "drag") {
-				const sel = window.getSelection();
-				if (!sel || sel.isCollapsed) store.caret.selecting(void 0);
-			}
-		});
-		listen(document, "selectionchange", () => {
-			if (store.caret.selecting() !== "drag") return;
-			const sel = window.getSelection();
-			if (!sel || sel.isCollapsed) store.caret.selecting(void 0);
-		});
-		alienEffect(() => {
-			if (store.caret.selecting() !== "drag") return;
-			const container = store.slots.container();
-			if (!container) return;
-			container.querySelectorAll("[contenteditable=\"true\"]").forEach((el) => el.contentEditable = "false");
-		});
-	});
-	return () => {
-		if (store.caret.selecting() === "drag") store.caret.selecting(void 0);
-		scope();
-		pressedNode = null;
-		isPressed = false;
-	};
-}
-//#endregion
-//#region ../../core/src/features/caret/CaretFeature.ts
-var CaretFeature = class {
-	#disposers = [];
-	constructor(_store) {
-		this._store = _store;
-		this.recovery = signal(void 0);
-		this.selecting = signal(void 0);
-	}
-	enable() {
-		if (this.#disposers.length) return;
-		this.#disposers = [enableFocus(this._store), enableSelection(this._store)];
-	}
-	disable() {
-		this.#disposers.forEach((d) => d());
-		this.#disposers = [];
-	}
-};
-//#endregion
-//#region ../../core/src/features/caret/selectionHelpers.ts
-function isFullSelection(store) {
-	const sel = window.getSelection();
-	const container = store.slots.container();
-	if (!sel?.rangeCount || !container?.firstChild || !container.lastChild) return false;
-	try {
-		const range = sel.getRangeAt(0);
-		return container.contains(range.startContainer) && container.contains(range.endContainer) && range.toString().length > 0;
-	} catch {
-		return false;
-	}
-}
-function selectAllText(store, event) {
-	if ((event.ctrlKey || event.metaKey) && event.code === "KeyA") {
-		if (store.slots.isBlock()) return;
-		event.preventDefault();
-		const selection = window.getSelection();
-		const anchorNode = store.slots.container()?.firstChild;
-		const focusNode = store.slots.container()?.lastChild;
-		if (!selection || !anchorNode || !focusNode) return;
-		selection.setBaseAndExtent(anchorNode, 0, focusNode, 1);
-		store.caret.selecting("all");
-	}
-}
-//#endregion
-//#region ../../core/src/shared/escape.ts
-const escape = (str) => {
-	return str.replace(/[.*+?^${}()|[\]\\\\]/g, "\\$&");
-};
-//#endregion
-//#region ../../core/src/features/caret/TriggerFinder.ts
-/** Regex to match word characters from the start of a string */
-const wordRegex = /* @__PURE__ */ new RegExp(/^\w*/);
-var TriggerFinder = class TriggerFinder {
-	constructor() {
-		const caretPosition = Caret.getCurrentPosition();
-		this.node = Caret.getSelectedNode();
-		this.span = Caret.getFocusedSpan();
-		this.dividedText = this.getDividedTextBy(caretPosition);
-	}
-	/**
-	* Find overlay match in text using provided options and trigger extractor.
-	* @template T - Type of option objects
-	* @param options - Array of options to search through
-	* @param getTrigger - Function that extracts trigger from each option
-	* @returns OverlayMatch with correct option type or undefined
-	*
-	* @example
-	* // React usage
-	* TriggerFinder.find(options, (opt) => opt.slotProps?.overlay?.trigger ?? '@')
-	*
-	* @example
-	* // Other framework usage
-	* TriggerFinder.find(vueOptions, (opt) => opt.overlay?.trigger ?? '@')
-	*/
-	static find(options, getTrigger) {
-		if (!options) return;
-		if (!Caret.isSelectedPosition) return;
-		try {
-			return new TriggerFinder().find(options, getTrigger);
-		} catch {
-			return;
-		}
-	}
-	getDividedTextBy(position) {
-		return {
-			left: this.span.slice(0, position),
-			right: this.span.slice(position)
-		};
-	}
-	/**
-	* Find overlay match in provided options.
-	* @template T - Type of option objects
-	* @param options - Array of options
-	* @param getTrigger - Function to extract trigger from each option
-	*/
-	find(options, getTrigger) {
-		for (let i = 0; i < options.length; i++) {
-			const option = options[i];
-			const trigger = getTrigger(option, i);
-			if (!trigger) continue;
-			const match = this.matchInTextVia(trigger);
-			if (match) return {
-				value: match.word,
-				source: match.annotation,
-				index: match.index,
-				span: this.span,
-				node: this.node,
-				option
-			};
-		}
-	}
-	matchInTextVia(trigger = "@") {
-		const rightMatch = this.matchRightPart();
-		const leftMatch = this.matchLeftPart(trigger);
-		if (leftMatch) return {
-			word: leftMatch.word + rightMatch.word,
-			annotation: leftMatch.annotation + rightMatch.word,
-			index: leftMatch.index
-		};
-	}
-	matchRightPart() {
-		const { right } = this.dividedText;
-		return { word: right.match(wordRegex)?.[0] };
-	}
-	matchLeftPart(trigger) {
-		const regex = this.makeTriggerRegex(trigger);
-		const { left } = this.dividedText;
-		const match = left.match(regex);
-		if (!match) return;
-		const [annotation, word] = match;
-		return {
-			word,
-			annotation,
-			index: match.index ?? 0
-		};
-	}
-	makeTriggerRegex(trigger) {
-		const patten = escape(trigger) + "(\\w*)$";
-		return new RegExp(patten);
-	}
-};
-//#endregion
-//#region ../../core/src/shared/classes/NodeProxy.ts
-var NodeProxy = class NodeProxy {
-	#target;
-	#store;
-	get target() {
-		return this.#target;
-	}
-	set target(value) {
-		this.#target = isHtmlElement(value) ? value : void 0;
-	}
-	get next() {
-		return new NodeProxy(this.target?.nextSibling, this.#store);
-	}
-	get prev() {
-		return new NodeProxy(this.target?.previousSibling, this.#store);
-	}
-	get isSpan() {
-		return this.index % 2 === 0;
-	}
-	get isMark() {
-		return !this.isSpan;
-	}
-	get isEditable() {
-		return this.target?.isContentEditable ?? false;
-	}
-	get isCaretAtBeginning() {
-		if (!this.target) return false;
-		return Caret.getCaretIndex(this.target) === 0;
-	}
-	get isCaretAtEnd() {
-		if (!this.target) return false;
-		return Caret.getCaretIndex(this.target) === this.target.textContent.length;
-	}
-	get index() {
-		if (!this.target?.parentElement) return -1;
-		return [...this.target.parentElement.children].indexOf(this.target);
-	}
-	get caret() {
-		if (this.target) return Caret.getCaretIndex(this.target);
-		return -1;
-	}
-	set caret(value) {
-		if (this.target) Caret.trySetIndex(this.target, value);
-	}
-	get length() {
-		return this.target?.textContent.length ?? -1;
-	}
-	get content() {
-		return this.target?.textContent ?? "";
-	}
-	set content(value) {
-		if (this.target) this.target.textContent = value ?? "";
-	}
-	get head() {
-		return firstHtmlChild(this.#store.slots.container() ?? void 0);
-	}
-	get tail() {
-		return lastHtmlChild(this.#store.slots.container() ?? void 0);
-	}
-	get isFocused() {
-		return this.target === document.activeElement;
-	}
-	constructor(target, store) {
-		this.target = target;
-		this.#store = store;
-	}
-	setCaretToEnd() {
-		Caret.setCaretToEnd(this.target);
-	}
-	focus() {
-		this.target?.focus();
-	}
-	clear() {
-		this.target = void 0;
-	}
-};
-//#endregion
-//#region ../../core/src/features/parsing/parser/constants.ts
-/**
-* Constants for ParserV2 - modern markup parser with nesting support
-*
-* This module contains the placeholder constants used by ParserV2.
-* Unlike the legacy Parser, ParserV2 supports:
-* - `__value__` - main content (replaces `__label__`)
-* - `__meta__` - metadata (replaces `__value__`)
-* - `__slot__` - nested content (new feature)
-*
-* For legacy Parser compatibility, see ../Parser/constants.ts
-* For Markup types, see ./types.ts
-*/
-const PLACEHOLDER = {
-	Value: "__value__",
-	Meta: "__meta__",
-	Slot: "__slot__"
-};
-/**
-* Gap types used in markup descriptors
-* Represents the content type in gaps between segments
-*/
-const GAP_TYPE = {
-	Value: "value",
-	Meta: "meta",
-	Slot: "slot"
-};
+//#region ../../core/src/features/parsing/parser/constants.ts
+/**
+* Constants for ParserV2 - modern markup parser with nesting support
+*
+* This module contains the placeholder constants used by ParserV2.
+* Unlike the legacy Parser, ParserV2 supports:
+* - `__value__` - main content (replaces `__label__`)
+* - `__meta__` - metadata (replaces `__value__`)
+* - `__slot__` - nested content (new feature)
+*
+* For legacy Parser compatibility, see ../Parser/constants.ts
+* For Markup types, see ./types.ts
+*/
+const PLACEHOLDER = {
+	Value: "__value__",
+	Meta: "__meta__",
+	Slot: "__slot__"
+};
+/**
+* Gap types used in markup descriptors
+* Represents the content type in gaps between segments
+*/
+const GAP_TYPE = {
+	Value: "value",
+	Meta: "meta",
+	Slot: "slot"
+};
 //#endregion
 //#region ../../core/src/features/parsing/parser/core/MarkupDescriptor.ts
 /**
@@ -1640,6 +1107,11 @@ var PatternMatcher = class {
 	}
 };
 //#endregion
+//#region ../../core/src/shared/escape.ts
+const escape = (str) => {
+	return str.replace(/[.*+?^${}()|[\]\\\\]/g, "\\$&");
+};
+//#endregion
 //#region ../../core/src/features/parsing/parser/core/SegmentMatcher.ts
 /**
 * Computes regex pattern for dynamic segment using pre-computed exclusions
@@ -1986,11 +1458,7 @@ function processTokensWithCallback(tokens, callback) {
 * ```
 */
 function annotate(markup, params) {
-	let annotation = markup;
-	if (params.value !== void 0) annotation = annotation.replaceAll(PLACEHOLDER.Value, params.value);
-	if (params.meta !== void 0) annotation = annotation.replaceAll(PLACEHOLDER.Meta, params.meta);
-	if (params.slot !== void 0) annotation = annotation.replaceAll(PLACEHOLDER.Slot, params.slot);
-	return annotation;
+	return markup.replaceAll(PLACEHOLDER.Value, params.value ?? "").replaceAll(PLACEHOLDER.Meta, params.meta ?? "").replaceAll(PLACEHOLDER.Slot, params.slot ?? "");
 }
 //#endregion
 //#region ../../core/src/features/parsing/parser/utils/toString.ts
@@ -2259,100 +1727,7 @@ function findToken(tokens, target, depth = 0, parent) {
 	}
 }
 //#endregion
-//#region ../../core/src/features/parsing/preparsing/utils/findGap.ts
-function findGap(previous = "", current = "") {
-	if (previous === current) return {};
-	let left;
-	for (let i = 0; i < previous.length; i++) if (previous[i] !== current[i]) {
-		left = i;
-		break;
-	}
-	let right;
-	for (let i = 1; i <= previous.length; i++) if (previous.at(-i) !== current.at(-i)) {
-		right = previous.length - i + 1;
-		break;
-	}
-	return {
-		left,
-		right
-	};
-}
-//#endregion
-//#region ../../core/src/features/parsing/preparsing/utils/getClosestIndexes.ts
-function getClosestIndexes(array, target) {
-	let left = -1, right = array.length;
-	while (right - left > 1) {
-		const middle = Math.round((left + right) / 2);
-		if (array[middle] <= target) left = middle;
-		else right = middle;
-	}
-	if (array[left] == target) right = left;
-	return [left, right].filter((v) => array[v] !== void 0);
-}
-//#endregion
 //#region ../../core/src/features/parsing/utils/valueParser.ts
-function getTokensByUI(store) {
-	const { focus } = store.nodes;
-	const parser = store.parsing.parser();
-	const tokens = store.parsing.tokens();
-	if (!parser) return tokens;
-	const parsed = parser.parse(focus.content);
-	if (parsed.length <= 1) return tokens;
-	return tokens.toSpliced(focus.index, 1, ...parsed);
-}
-function computeTokensFromValue(store) {
-	const value = store.props.value();
-	const previousValue = store.value.last();
-	const gap = findGap(previousValue, value);
-	if (!gap.left && !gap.right) {
-		store.value.last(value);
-		return store.parsing.tokens();
-	}
-	if (gap.left === 0 && previousValue !== void 0 && gap.right !== void 0 && gap.right >= previousValue.length) {
-		store.value.last(value);
-		return parseWithParser(store, value ?? "");
-	}
-	store.value.last(value);
-	const ranges = getRangeMap(store);
-	const tokens = store.parsing.tokens();
-	if (gap.left !== void 0 && ranges.includes(gap.left) && gap.right !== void 0 && Math.abs(gap.left - gap.right) > 1) {
-		const updatedIndex = ranges.indexOf(gap.left);
-		if (updatedIndex > 0) {
-			const parsed = parseUnionLabels(store, updatedIndex - 1, updatedIndex);
-			return tokens.toSpliced(updatedIndex - 1, 2, ...parsed);
-		}
-	}
-	if (gap.left !== void 0) {
-		const [updatedIndex] = getClosestIndexes(ranges, gap.left);
-		const parsed = parseUnionLabels(store, updatedIndex);
-		if (parsed.length === 1) return tokens;
-		return tokens.toSpliced(updatedIndex, 1, ...parsed);
-	}
-	if (gap.right !== void 0) {
-		const [updatedIndex] = getClosestIndexes(ranges, gap.right);
-		const parsed = parseUnionLabels(store, updatedIndex);
-		if (parsed.length === 1) return tokens;
-		return tokens.toSpliced(updatedIndex, 1, ...parsed);
-	}
-	return parseWithParser(store, value ?? "");
-}
-function parseUnionLabels(store, ...indexes) {
-	let span = "";
-	const tokens = store.parsing.tokens();
-	for (const index of indexes) {
-		const token = tokens[index];
-		span += token.content;
-	}
-	return parseWithParser(store, span);
-}
-function getRangeMap(store) {
-	let position = 0;
-	return store.parsing.tokens().map((token) => {
-		const length = token.content.length;
-		position += length;
-		return position - length;
-	});
-}
 function parseWithParser(store, value) {
 	const parser = store.parsing.parser();
 	if (!parser) return [{
@@ -2366,12 +1741,86 @@ function parseWithParser(store, value) {
 	return parser.parse(value);
 }
 //#endregion
+//#region ../../core/src/features/parsing/tokenIndex.ts
+function pathEquals(a, b) {
+	return a.length === b.length && a.every((part, index) => part === b[index]);
+}
+function pathKey(path) {
+	return path.join(".");
+}
+function resolvePath(tokens, path) {
+	if (path.length === 0) return void 0;
+	let current = tokens;
+	let token;
+	for (const index of path) {
+		if (!Number.isInteger(index) || index < 0 || index >= current.length) return void 0;
+		token = current[index];
+		current = token.type === "mark" ? token.children : [];
+	}
+	return token;
+}
+function snapshotTokenShape(token) {
+	if (token.type === "text") return { kind: "text" };
+	return {
+		kind: "mark",
+		descriptor: token.descriptor,
+		descriptorIndex: token.descriptor.index
+	};
+}
+function shapeMatches(token, expected) {
+	if (expected.kind === "text") return token.type === "text";
+	return token.type === "mark" && token.descriptor === expected.descriptor && token.descriptor.index === expected.descriptorIndex;
+}
+function createTokenIndex(tokens, generation) {
+	const paths = /* @__PURE__ */ new WeakMap();
+	const visit = (items, parent) => {
+		items.forEach((token, index) => {
+			const path = [...parent, index];
+			paths.set(token, path);
+			if (token.type === "mark") visit(token.children, path);
+		});
+	};
+	visit(tokens, []);
+	return {
+		generation,
+		pathFor: (token) => paths.get(token),
+		addressFor: (path) => resolvePath(tokens, path) ? {
+			path: [...path],
+			parseGeneration: generation
+		} : void 0,
+		resolve: (path) => resolvePath(tokens, path),
+		resolveAddress(address, expected) {
+			if (address.parseGeneration !== generation) return {
+				ok: false,
+				reason: "stale"
+			};
+			const token = resolvePath(tokens, address.path);
+			if (!token) return {
+				ok: false,
+				reason: "stale"
+			};
+			if (expected && !shapeMatches(token, expected)) return {
+				ok: false,
+				reason: "stale"
+			};
+			return {
+				ok: true,
+				value: token
+			};
+		},
+		key: pathKey,
+		equals: pathEquals
+	};
+}
+//#endregion
 //#region ../../core/src/features/parsing/ParseFeature.ts
 var ParsingFeature = class {
+	#generation = signal(0);
 	#scope;
 	constructor(_store) {
 		this._store = _store;
 		this.tokens = signal([]);
+		this.index = computed(() => createTokenIndex(this.tokens(), this.#generation()));
 		this.parser = computed(() => {
 			if (!this._store.mark.enabled()) return;
 			const markups = this._store.props.options().map((opt) => opt.markup);
@@ -2380,6 +1829,15 @@ var ParsingFeature = class {
 		});
 		this.reparse = event();
 	}
+	parseValue(value) {
+		return parseWithParser(this._store, value);
+	}
+	acceptTokens(tokens) {
+		batch(() => {
+			this.tokens(tokens);
+			this.#generation(this.#generation() + 1);
+		}, { mutable: true });
+	}
 	enable() {
 		if (this.#scope) return;
 		this.sync();
@@ -2392,29 +1850,450 @@ var ParsingFeature = class {
 		this.#scope?.();
 		this.#scope = void 0;
 	}
-	sync() {
-		const inputValue = this._store.props.value() ?? this._store.props.defaultValue() ?? "";
-		this.tokens(parseWithParser(this._store, inputValue));
-		this._store.value.last(inputValue);
+	sync(value = this._store.value.current()) {
+		this.acceptTokens(this.parseValue(value));
 	}
 	#subscribeParse() {
 		watch(this.reparse, () => {
 			if (this._store.caret.recovery()) {
 				const text = toString(this.tokens());
-				this.tokens(parseWithParser(this._store, text));
-				this._store.value.last(text);
+				this.acceptTokens(this.parseValue(text));
 				return;
 			}
-			this.tokens(this._store.nodes.focus.target ? getTokensByUI(this._store) : computeTokensFromValue(this._store));
+			this.sync();
 		});
 	}
 	#subscribeReactiveParse() {
-		watch(computed(() => [this._store.props.value(), this.parser()]), () => {
-			if (!this._store.caret.recovery()) this.reparse();
+		watch(computed(() => this.parser()), () => {
+			if (!this._store.caret.recovery()) this.sync(this._store.value.current());
 		});
 	}
 };
 //#endregion
+//#region ../../core/src/shared/checkers/domGuards.ts
+/** Type guard: checks if a value is an HTMLElement. */
+function isHtmlElement(el) {
+	return typeof HTMLElement !== "undefined" && el instanceof HTMLElement;
+}
+/** Get all children of an element as HTMLElement[], filtering out non-HTML elements. */
+function htmlChildren(parent) {
+	if (!parent) return [];
+	return Array.from(parent.children).filter((child) => child instanceof HTMLElement);
+}
+/** Get the first element child as HTMLElement, or null. */
+function firstHtmlChild(parent) {
+	const child = parent?.firstElementChild;
+	return child instanceof HTMLElement ? child : null;
+}
+/** Safely narrow an event's target to Node. */
+function nodeTarget(event) {
+	const { target } = event;
+	return target instanceof Node ? target : null;
+}
+/** Get the next node from a TreeWalker as Text, or null. */
+function nextText(walker) {
+	const node = walker.nextNode();
+	return node?.nodeType === 3 ? node : null;
+}
+//#endregion
+//#region ../../core/src/features/caret/Caret.ts
+var Caret = class {
+	static get isSelectedPosition() {
+		const selection = window.getSelection();
+		if (!selection) return;
+		return selection.isCollapsed;
+	}
+	static getCurrentPosition() {
+		return window.getSelection()?.anchorOffset ?? 0;
+	}
+	static getFocusedSpan() {
+		return window.getSelection()?.anchorNode?.textContent ?? "";
+	}
+	static getSelectedNode() {
+		const node = window.getSelection()?.anchorNode;
+		if (node && document.contains(node)) return node;
+		throw new Error("Anchor node of selection is not exists!");
+	}
+	static getAbsolutePosition() {
+		const rect = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
+		if (rect) return {
+			left: rect.left,
+			top: rect.top + rect.height + 1
+		};
+		return {
+			left: 0,
+			top: 0
+		};
+	}
+	/** Returns the raw DOMRect of the current caret position, or null if unavailable. */
+	static getCaretRect() {
+		try {
+			return (window.getSelection()?.getRangeAt(0))?.getBoundingClientRect() ?? null;
+		} catch {
+			return null;
+		}
+	}
+	/**
+	* Returns true if the caret is on the first visual line of the element.
+	*/
+	static isCaretOnFirstLine(element) {
+		const caretRect = this.getCaretRect();
+		if (!caretRect || caretRect.height === 0) return true;
+		const elRect = element.getBoundingClientRect();
+		return caretRect.top < elRect.top + caretRect.height + 2;
+	}
+	/**
+	* Returns true if the caret is on the last visual line of the element.
+	*/
+	static isCaretOnLastLine(element) {
+		const caretRect = this.getCaretRect();
+		if (!caretRect || caretRect.height === 0) return true;
+		const elRect = element.getBoundingClientRect();
+		return caretRect.bottom > elRect.bottom - caretRect.height - 2;
+	}
+	/**
+	* Positions the caret in `element` at the character closest to the given x coordinate.
+	* `y` defaults to the vertical center of the element.
+	*/
+	static setAtX(element, x, y) {
+		const elRect = element.getBoundingClientRect();
+		const targetY = y ?? elRect.top + elRect.height / 2;
+		const caretDoc = document;
+		const caretPos = caretDoc.caretRangeFromPoint?.(x, targetY) ?? caretDoc.caretPositionFromPoint?.(x, targetY);
+		if (!caretPos) return;
+		const sel = window.getSelection();
+		if (!sel) return;
+		let domRange;
+		if (caretPos instanceof Range) domRange = caretPos;
+		else if ("offsetNode" in caretPos) {
+			domRange = document.createRange();
+			domRange.setStart(caretPos.offsetNode, caretPos.offset);
+			domRange.collapse(true);
+		} else return;
+		if (!element.contains(domRange.startContainer)) {
+			this.setIndex(element, Infinity);
+			return;
+		}
+		sel.removeAllRanges();
+		sel.addRange(domRange);
+	}
+	static trySetIndex(element, offset) {
+		try {
+			this.setIndex(element, offset);
+		} catch (e) {
+			console.error(e);
+		}
+	}
+	/**
+	* Sets the caret at character `offset` within `element` by walking text nodes.
+	* Use Infinity to position at the very end of all text.
+	*/
+	static setIndex(element, offset) {
+		const selection = window.getSelection();
+		if (!selection) return;
+		const walker = document.createTreeWalker(element, 4);
+		let node = nextText(walker);
+		if (!node) return;
+		let remaining = isFinite(offset) ? Math.max(0, offset) : Infinity;
+		for (;;) {
+			const next = nextText(walker);
+			if (!next || remaining <= node.length) {
+				const charOffset = isFinite(remaining) ? Math.min(remaining, node.length) : node.length;
+				const range = document.createRange();
+				range.setStart(node, charOffset);
+				range.collapse(true);
+				selection.removeAllRanges();
+				selection.addRange(range);
+				return;
+			}
+			remaining -= node.length;
+			node = next;
+		}
+	}
+	static getCaretIndex(element) {
+		let position = 0;
+		const selection = window.getSelection();
+		if (!selection?.rangeCount) return position;
+		const range = selection.getRangeAt(0);
+		const preCaretRange = range.cloneRange();
+		preCaretRange.selectNodeContents(element);
+		preCaretRange.setEnd(range.endContainer, range.endOffset);
+		position = preCaretRange.toString().length;
+		return position;
+	}
+	static setCaretToEnd(element) {
+		if (!element) return;
+		this.setIndex(element, Infinity);
+	}
+	static getIndex() {
+		return window.getSelection()?.anchorOffset ?? NaN;
+	}
+	static setIndex1(offset) {
+		const selection = window.getSelection();
+		if (!selection?.anchorNode || !selection.rangeCount) return;
+		const range = selection.getRangeAt(0);
+		range.setStart(range.startContainer.firstChild ?? range.startContainer, offset);
+		range.setEnd(range.startContainer.firstChild ?? range.startContainer, offset);
+	}
+	setCaretRightTo(element, offset) {
+		const range = window.getSelection()?.getRangeAt(0);
+		range?.setStart(range.endContainer, offset);
+		range?.setEnd(range.endContainer, offset);
+	}
+};
+//#endregion
+//#region ../../core/src/features/caret/focus.ts
+function enableFocus(store) {
+	const container = store.dom.container();
+	if (!container) return () => {};
+	const scope = effectScope(() => {
+		listen(container, "focusin", (e) => {
+			const target = isHtmlElement(e.target) ? e.target : void 0;
+			if (!target) {
+				store.caret.location(void 0);
+				return;
+			}
+			const result = store.dom.locateNode(target);
+			if (!result.ok) {
+				if (result.reason === "control") return;
+				store.caret.location(void 0);
+				return;
+			}
+			const role = result.value.textElement?.contains(target) ? "text" : "markDescendant";
+			store.caret.location({
+				address: result.value.address,
+				role
+			});
+		});
+		listen(container, "focusout", () => {
+			store.caret.location(void 0);
+		});
+		listen(container, "click", () => {
+			const tokens = store.parsing.tokens();
+			if (tokens.length === 1 && tokens[0].type === "text" && tokens[0].content === "") {
+				const container = store.dom.container();
+				(container ? firstHtmlChild(container) : null)?.focus();
+			}
+		});
+	});
+	return () => scope();
+}
+//#endregion
+//#region ../../core/src/features/caret/selection.ts
+function enableSelection(store) {
+	let pressedNode = null;
+	let isPressed = false;
+	const scope = effectScope(() => {
+		listen(document, "mousedown", (e) => {
+			pressedNode = nodeTarget(e);
+			isPressed = true;
+		});
+		listen(document, "mousemove", (e) => {
+			const container = store.dom.container();
+			if (!container) return;
+			const currentIsPressed = isPressed;
+			const isNotInnerSome = !container.contains(pressedNode) || pressedNode !== e.target;
+			const isInside = window.getSelection()?.containsNode(container, true);
+			if (currentIsPressed && isNotInnerSome && isInside) {
+				if (store.caret.selecting() !== "drag") store.caret.selecting("drag");
+			}
+		});
+		listen(document, "mouseup", () => {
+			isPressed = false;
+			pressedNode = null;
+			if (store.caret.selecting() === "drag") {
+				const sel = window.getSelection();
+				if (!sel || sel.isCollapsed) store.caret.selecting(void 0);
+			}
+		});
+		listen(document, "selectionchange", () => {
+			const sel = window.getSelection();
+			if (store.caret.selecting() === "drag" && (!sel || sel.isCollapsed)) store.caret.selecting(void 0);
+			if (!sel?.focusNode) return;
+			const result = store.dom.locateNode(sel.focusNode);
+			if (!result.ok) {
+				if (result.reason === "control") return;
+				store.caret.location(void 0);
+				return;
+			}
+			const role = result.value.textElement?.contains(sel.focusNode) ? "text" : "markDescendant";
+			store.caret.location({
+				address: result.value.address,
+				role
+			});
+		});
+		alienEffect(() => {
+			if (store.caret.selecting() === "drag") store.dom.reconcile();
+		});
+	});
+	return () => {
+		if (store.caret.selecting() === "drag") store.caret.selecting(void 0);
+		scope();
+		pressedNode = null;
+		isPressed = false;
+	};
+}
+//#endregion
+//#region ../../core/src/features/caret/CaretFeature.ts
+var CaretFeature = class {
+	#disposers = [];
+	constructor(_store) {
+		this._store = _store;
+		this.recovery = signal(void 0);
+		this.location = signal(void 0);
+		this.selecting = signal(void 0);
+	}
+	enable() {
+		if (this.#disposers.length) return;
+		this.#disposers = [enableFocus(this._store), enableSelection(this._store)];
+	}
+	disable() {
+		this.#disposers.forEach((d) => d());
+		this.#disposers = [];
+	}
+	placeAt(rawPosition, affinity = "after") {
+		return this._store.dom.placeCaretAtRawPosition(rawPosition, affinity);
+	}
+	focus(address, boundary = "start") {
+		return this._store.dom.focusAddress(address, boundary);
+	}
+};
+//#endregion
+//#region ../../core/src/features/caret/selectionHelpers.ts
+function isFullSelection(store) {
+	const sel = window.getSelection();
+	const container = store.dom.container();
+	if (!sel?.rangeCount || !container?.firstChild || !container.lastChild) return false;
+	try {
+		const range = sel.getRangeAt(0);
+		return container.contains(range.startContainer) && container.contains(range.endContainer) && range.toString().length > 0;
+	} catch {
+		return false;
+	}
+}
+function selectAllText(store, event) {
+	if ((event.ctrlKey || event.metaKey) && event.code === "KeyA") {
+		if (store.slots.isBlock()) return;
+		event.preventDefault();
+		const selection = window.getSelection();
+		const anchorNode = store.dom.container()?.firstChild;
+		const focusNode = store.dom.container()?.lastChild;
+		if (!selection || !anchorNode || !focusNode) return;
+		selection.setBaseAndExtent(anchorNode, 0, focusNode, 1);
+		store.caret.selecting("all");
+	}
+}
+//#endregion
+//#region ../../core/src/features/caret/TriggerFinder.ts
+/** Regex to match word characters from the start of a string */
+const wordRegex = /* @__PURE__ */ new RegExp(/^\w*/);
+var TriggerFinder = class TriggerFinder {
+	constructor(store) {
+		this.store = store;
+		const caretPosition = Caret.getCurrentPosition();
+		this.node = Caret.getSelectedNode();
+		this.span = Caret.getFocusedSpan();
+		this.dividedText = this.getDividedTextBy(caretPosition);
+	}
+	/**
+	* Find overlay match in text using provided options and trigger extractor.
+	* @template T - Type of option objects
+	* @param options - Array of options to search through
+	* @param getTrigger - Function that extracts trigger from each option
+	* @returns OverlayMatch with correct option type or undefined
+	*
+	* @example
+	* // React usage
+	* TriggerFinder.find(options, (opt) => opt.slotProps?.overlay?.trigger ?? '@')
+	*
+	* @example
+	* // Other framework usage
+	* TriggerFinder.find(vueOptions, (opt) => opt.overlay?.trigger ?? '@')
+	*/
+	static find(options, getTrigger, store) {
+		if (!options) return;
+		if (!Caret.isSelectedPosition) return;
+		try {
+			return new TriggerFinder(store).find(options, getTrigger);
+		} catch {
+			return;
+		}
+	}
+	getDividedTextBy(position) {
+		return {
+			left: this.span.slice(0, position),
+			right: this.span.slice(position)
+		};
+	}
+	/**
+	* Find overlay match in provided options.
+	* @template T - Type of option objects
+	* @param options - Array of options
+	* @param getTrigger - Function to extract trigger from each option
+	*/
+	find(options, getTrigger) {
+		for (let i = 0; i < options.length; i++) {
+			const option = options[i];
+			const trigger = getTrigger(option, i);
+			if (!trigger) continue;
+			const match = this.matchInTextVia(trigger);
+			if (match) {
+				const range = this.#rawRangeForMatch(match.annotation, match.index);
+				if (!range) return void 0;
+				return {
+					value: match.word,
+					source: match.annotation,
+					range,
+					span: this.span,
+					node: this.node,
+					option
+				};
+			}
+		}
+	}
+	#rawRangeForMatch(source, index) {
+		if (!this.store) return {
+			start: index,
+			end: index + source.length
+		};
+		const boundary = this.store.dom.rawPositionFromBoundary(this.node, index + source.length, "after");
+		if (!boundary.ok) return void 0;
+		return {
+			start: boundary.value - source.length,
+			end: boundary.value
+		};
+	}
+	matchInTextVia(trigger = "@") {
+		const rightMatch = this.matchRightPart();
+		const leftMatch = this.matchLeftPart(trigger);
+		if (leftMatch) return {
+			word: leftMatch.word + rightMatch.word,
+			annotation: leftMatch.annotation + rightMatch.word,
+			index: leftMatch.index
+		};
+	}
+	matchRightPart() {
+		const { right } = this.dividedText;
+		return { word: right.match(wordRegex)?.[0] };
+	}
+	matchLeftPart(trigger) {
+		const regex = this.makeTriggerRegex(trigger);
+		const { left } = this.dividedText;
+		const match = left.match(regex);
+		if (!match) return;
+		const [annotation, word] = match;
+		return {
+			word,
+			annotation,
+			index: match.index ?? 0
+		};
+	}
+	makeTriggerRegex(trigger) {
+		const patten = escape(trigger) + "(\\w*)$";
+		return new RegExp(patten);
+	}
+};
+//#endregion
 //#region ../../core/src/features/clipboard/pasteMarkup.ts
 /** Custom MIME type for markput markup syntax. */
 const MARKPUT_MIME = "application/x-markput";
@@ -2442,98 +2321,25 @@ function consumeMarkupPaste(container) {
 	return markup;
 }
 //#endregion
-//#region ../../core/src/features/clipboard/selectionToTokens.ts
-/**
-* Walk up the DOM from `node` until reaching a direct child of `container`.
-* Returns the index of that child in container.children, or -1 if not found.
-*
-* Works for both drag and non-drag modes:
-* - Non-drag: container children are Token-rendered elements (1:1 with tokens)
-* - Drag: container children are Block wrappers (1:1 with tokens)
-* - Nested marks: walks past inner mark elements to the top-level container child
-*/
-function findContainerChildIndex(node, container) {
-	let current = node instanceof HTMLElement ? node : node.parentElement;
-	while (current && current.parentElement !== container) current = current.parentElement;
-	if (!current) return -1;
-	return Array.from(container.children).indexOf(current);
-}
-/**
-* Returns the character offset of a range boundary within a container child.
-* Walks all text nodes in document order to compute a cumulative character
-* offset, which correctly handles nested marks with multiple text nodes.
-* Falls back to 0 (start) or full text length (end) for out-of-child boundaries.
-*
-* Spec: selectionToTokens.spec.ts (unit) · Clipboard.react.spec.tsx (integration)
-*/
-function getBoundaryOffset(range, child, isStart) {
-	const targetNode = isStart ? range.startContainer : range.endContainer;
-	const targetOffset = isStart ? range.startOffset : range.endOffset;
-	if (!child.contains(targetNode)) return isStart ? 0 : child.textContent.length;
-	let charOffset = 0;
-	const walker = document.createTreeWalker(child, NodeFilter.SHOW_TEXT);
-	let current = walker.nextNode();
-	while (current) {
-		if (current === targetNode) return charOffset + targetOffset;
-		charOffset += current.length;
-		current = walker.nextNode();
-	}
-	return isStart ? 0 : child.textContent.length;
-}
-/**
-* Map a browser Selection to the subset of tokens it covers.
-* Returns null if selection is collapsed, empty, or outside the container.
-*/
-function selectionToTokens(store) {
-	const container = store.slots.container();
-	if (!container) return null;
-	const sel = window.getSelection();
-	if (!sel || sel.isCollapsed || !sel.rangeCount) return null;
-	const range = sel.getRangeAt(0);
-	if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) return null;
-	const tokens = store.parsing.tokens();
-	let startIndex = findContainerChildIndex(range.startContainer, container);
-	let endIndex = findContainerChildIndex(range.endContainer, container);
-	if (startIndex === -1 || endIndex === -1) return null;
-	if (startIndex > endIndex) [startIndex, endIndex] = [endIndex, startIndex];
-	const startChild = container.children.item(startIndex);
-	const endChild = container.children.item(endIndex);
-	return {
-		tokens: tokens.slice(startIndex, endIndex + 1),
-		startOffset: startChild ? getBoundaryOffset(range, startChild, true) : 0,
-		endOffset: endChild ? getBoundaryOffset(range, endChild, false) : 0
-	};
-}
-//#endregion
 //#region ../../core/src/features/clipboard/ClipboardFeature.ts
-/**
-* Trim boundary text tokens to the selected portion.
-* Mark tokens are always kept in full — partial mark selection expands to full mark.
-*
-* NOTE: Returned text tokens have stale `position` fields — the start/end positions
-* still reflect the original token, not the trimmed content. Only `content` is
-* authoritative on the returned tokens. `toString` is safe because it reads `content`
-* directly; do not use `position` on the returned tokens for any other purpose.
-*/
-function trimBoundaryTokens({ tokens, startOffset, endOffset }) {
-	if (tokens.length === 0) return tokens;
-	return tokens.map((token, i) => {
-		if (token.type !== "text") return token;
-		const isFirst = i === 0;
-		const isLast = i === tokens.length - 1;
-		if (isFirst && isLast) return {
-			...token,
-			content: token.content.slice(startOffset, endOffset)
-		};
-		if (isFirst) return {
-			...token,
-			content: token.content.slice(startOffset)
-		};
-		if (isLast) return {
-			...token,
-			content: token.content.slice(0, endOffset)
-		};
-		return token;
+function htmlFromRange(range) {
+	const fragment = range.cloneContents();
+	const div = document.createElement("div");
+	div.appendChild(fragment);
+	return div.innerHTML;
+}
+function serializeRawRange(tokens, range) {
+	return toString(trimTokensForRawRange(tokens, range));
+}
+function trimTokensForRawRange(tokens, range) {
+	return tokens.filter((token) => token.position.end > range.start && token.position.start < range.end).map((token) => {
+		if (token.type === "text") {
+			const start = Math.max(0, range.start - token.position.start);
+			const end = Math.min(token.content.length, range.end - token.position.start);
+			return Object.assign({}, token, { content: token.content.slice(start, end) });
+		}
+		if (token.children.length === 0) return token;
+		return Object.assign({}, token, { children: trimTokensForRawRange(token.children, range) });
 	});
 }
 var ClipboardFeature = class {
@@ -2543,7 +2349,7 @@ var ClipboardFeature = class {
 	}
 	enable() {
 		if (this.#scope) return;
-		const container = this.store.slots.container();
+		const container = this.store.dom.container();
 		if (!container) return;
 		this.#scope = effectScope(() => {
 			listen(container, "copy", (e) => {
@@ -2551,25 +2357,14 @@ var ClipboardFeature = class {
 			});
 			listen(container, "cut", (e) => {
 				if (!this.#handleCopy(e)) return;
-				const result = selectionToTokens(this.store);
-				if (!result || result.tokens.length === 0) return;
-				const first = result.tokens[0];
-				const last = result.tokens[result.tokens.length - 1];
-				const rawStart = first.type === "text" ? first.position.start + result.startOffset : first.position.start;
-				const rawEnd = last.type === "text" ? last.position.start + result.endOffset : last.position.end;
-				const value = this.store.value.current();
-				if (rawStart === rawEnd) return;
-				const newValue = value.slice(0, rawStart) + value.slice(rawEnd);
-				this.store.value.next(newValue);
-				const newTokens = this.store.parsing.tokens();
-				let targetIdx = newTokens.findIndex((t) => t.type === "text" && rawStart >= t.position.start && rawStart <= t.position.end);
-				if (targetIdx === -1) targetIdx = newTokens.length - 1;
-				const caretWithinToken = rawStart - newTokens[targetIdx].position.start;
-				this.store.caret.recovery({
-					anchor: this.store.nodes.focus,
-					caret: caretWithinToken,
-					isNext: true,
-					childIndex: targetIdx - 2
+				const raw = this.store.dom.readRawSelection();
+				if (!raw.ok || raw.value.range.start === raw.value.range.end) return;
+				this.store.value.replaceRange(raw.value.range, "", {
+					source: "cut",
+					recover: {
+						kind: "caret",
+						rawPosition: raw.value.range.start
+					}
 				});
 			});
 		});
@@ -2579,20 +2374,15 @@ var ClipboardFeature = class {
 		this.#scope = void 0;
 	}
 	#handleCopy(e) {
-		const container = this.store.slots.container();
-		if (!container) return false;
+		if (!this.store.dom.container()) return false;
+		const raw = this.store.dom.readRawSelection();
+		if (!raw.ok || raw.value.range.start === raw.value.range.end) return false;
 		const sel = window.getSelection();
-		if (!sel || sel.isCollapsed || !sel.rangeCount) return false;
-		const range = sel.getRangeAt(0);
-		if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) return false;
-		const result = selectionToTokens(this.store);
-		if (!result) return false;
+		const range = sel?.rangeCount ? sel.getRangeAt(0) : void 0;
+		if (!range) return false;
 		const plainText = range.toString();
-		const fragment = range.cloneContents();
-		const div = document.createElement("div");
-		div.appendChild(fragment);
-		const html = div.innerHTML;
-		const markup = toString(trimBoundaryTokens(result));
+		const html = htmlFromRange(range);
+		const markup = serializeRawRange(this.store.parsing.tokens(), raw.value.range);
 		e.preventDefault();
 		e.clipboardData?.setData("text/plain", plainText);
 		e.clipboardData?.setData("text/html", html);
@@ -2601,120 +2391,705 @@ var ClipboardFeature = class {
 	}
 };
 //#endregion
-//#region ../../core/src/features/dom/isTextTokenSpan.ts
-function isTextTokenSpan(el) {
-	return el.tagName === "SPAN" && (el.attributes.length === 0 || el.attributes.length === 1 && el.hasAttribute("contenteditable"));
-}
-//#endregion
 //#region ../../core/src/features/dom/DomFeature.ts
+function nextTextNode(walker) {
+	const node = walker.nextNode();
+	return node instanceof Text ? node : null;
+}
+function splitsSurrogatePair(text, offset) {
+	if (offset <= 0 || offset >= text.length) return false;
+	const prev = text.charCodeAt(offset - 1);
+	const next = text.charCodeAt(offset);
+	return prev >= 55296 && prev <= 56319 && next >= 56320 && next <= 57343;
+}
+function textOffsetWithin(surface, node, offset) {
+	if (node.nodeType === Node.TEXT_NODE) {
+		if (splitsSurrogatePair(node.textContent ?? "", offset)) return void 0;
+		return node instanceof Text ? textOffsetFromTreeWalker(surface, node, offset) : void 0;
+	}
+	if (node === surface) return elementBoundaryOffset(surface, offset);
+}
+function textOffsetFromTreeWalker(surface, target, targetOffset) {
+	let total = 0;
+	const walker = document.createTreeWalker(surface, NodeFilter.SHOW_TEXT);
+	let current = nextTextNode(walker);
+	while (current) {
+		if (current === target) return total + targetOffset;
+		total += current.length;
+		current = nextTextNode(walker);
+	}
+}
+function textLength(surface) {
+	let total = 0;
+	const walker = document.createTreeWalker(surface, NodeFilter.SHOW_TEXT);
+	let current = nextTextNode(walker);
+	while (current) {
+		total += current.length;
+		current = nextTextNode(walker);
+	}
+	return total;
+}
+function elementBoundaryOffset(surface, offset) {
+	if (offset <= 0) return 0;
+	if (offset >= surface.childNodes.length) return textLength(surface);
+	let total = 0;
+	for (let i = 0; i < offset; i++) {
+		const child = surface.childNodes.item(i);
+		if (child.nodeType === Node.TEXT_NODE && child instanceof Text) {
+			total += child.length;
+			continue;
+		}
+		if (child instanceof HTMLElement) total += textLength(child);
+	}
+	return total;
+}
+function hasEditableAncestorBefore(node, boundary) {
+	let current = node instanceof HTMLElement ? node : node.parentElement;
+	while (current && current !== boundary) {
+		if (current.isContentEditable || current.contentEditable === "true" || current.contentEditable === "plaintext-only") return true;
+		current = current.parentElement;
+	}
+	return false;
+}
 var DomFeature = class {
+	#domIndex = signal(void 0, { readonly: true });
+	#pendingControls = /* @__PURE__ */ new Map();
+	#pendingChildSequences = /* @__PURE__ */ new Map();
+	#nextControlId = 0;
+	#nextChildSequenceId = 0;
+	#elementRoles = /* @__PURE__ */ new WeakMap();
+	#pathElements = /* @__PURE__ */ new Map();
+	#generation = 0;
+	#rendering = false;
+	#isComposing = false;
+	#queuedRender = false;
 	#scope;
 	constructor(_store) {
 		this._store = _store;
+		this.index = computed(() => this.#domIndex());
+		this.container = signal(null);
+		this.diagnostics = event();
 	}
 	enable() {
 		if (this.#scope) return;
 		this.#scope = effectScope(() => {
-			alienEffect(() => {
-				this._store.props.readOnly();
-				this.reconcile();
-			});
-			alienEffect(() => {
-				if (this._store.caret.selecting() === void 0) this.reconcile();
+			watch(this._store.lifecycle.rendered, () => {
+				this.#handleRendered();
 			});
+			watch(computed(() => ({
+				readOnly: this._store.props.readOnly(),
+				selecting: this._store.caret.selecting()
+			})), () => this.reconcile());
 		});
 	}
 	disable() {
 		this.#scope?.();
 		this.#scope = void 0;
 	}
+	compositionStarted() {
+		this.#isComposing = true;
+	}
+	compositionEnded() {
+		if (!this.#isComposing) return;
+		this.#isComposing = false;
+	}
+	controlFor(ownerPath) {
+		const key = `control:${ownerPath ? pathKey(ownerPath) : "global"}:${++this.#nextControlId}`;
+		const callback = (element) => {
+			if (element) this.#pendingControls.set(key, {
+				ownerPath: ownerPath ? [...ownerPath] : void 0,
+				element
+			});
+			else this.#pendingControls.delete(key);
+		};
+		return callback;
+	}
+	childrenFor(ownerPath) {
+		const key = `children:${pathKey(ownerPath)}:${++this.#nextChildSequenceId}`;
+		const callback = (element) => {
+			if (element) this.#pendingChildSequences.set(key, {
+				ownerPath: [...ownerPath],
+				element
+			});
+			else this.#pendingChildSequences.delete(key);
+		};
+		return callback;
+	}
 	reconcile() {
-		const container = this._store.slots.container();
-		if (!container) return;
-		const readOnly = this._store.props.readOnly();
-		const value = readOnly ? "false" : "true";
-		const children = container.children;
-		const isBlock = this._store.slots.isBlock();
-		if (isBlock) {
-			const tokens = this._store.parsing.tokens();
-			for (let i = 0; i < tokens.length && i < children.length; i++) {
-				const el = childAt(container, i);
-				if (!el) continue;
-				if (tokens[i].type === "mark") {
-					if (!readOnly) el.tabIndex = 0;
-				} else el.contentEditable = value;
+		this.#reconcileStructuralTextSurfaces();
+	}
+	locateNode(node) {
+		if (!this.index()) return {
+			ok: false,
+			reason: "notIndexed"
+		};
+		const container = this.container();
+		if (!container || !container.contains(node)) return {
+			ok: false,
+			reason: "outsideEditor"
+		};
+		let current = node;
+		while (current) {
+			if (current instanceof HTMLElement) {
+				const role = this.#elementRoles.get(current);
+				if (role?.role === "control") return {
+					ok: false,
+					reason: "control"
+				};
+				if (role) {
+					const elements = this.#pathElements.get(pathKey(role.path));
+					if (!elements?.tokenElement) return {
+						ok: false,
+						reason: "notIndexed"
+					};
+					return {
+						ok: true,
+						value: {
+							address: role.address,
+							tokenElement: elements.tokenElement,
+							textElement: elements.textElement,
+							rowElement: elements.rowElement
+						}
+					};
+				}
+			}
+			if (current === container) break;
+			current = current.parentNode;
+		}
+		return {
+			ok: false,
+			reason: "outsideEditor"
+		};
+	}
+	placeCaretAtRawPosition(rawPosition, affinity = "after") {
+		if (!this.index()) return {
+			ok: false,
+			reason: "notIndexed"
+		};
+		const target = this.#findTextTargetForRawPosition(rawPosition, affinity);
+		if (!target) return this.#focusMarkBoundaryForRawPosition(rawPosition);
+		target.element.focus();
+		this.#placeCaretInTextSurface(target.element, rawPosition - target.start);
+		return {
+			ok: true,
+			value: void 0
+		};
+	}
+	focusAddress(address, boundary = "start") {
+		if (!this.index()) return {
+			ok: false,
+			reason: "notIndexed"
+		};
+		if (!this._store.parsing.index().resolveAddress(address).ok) return {
+			ok: false,
+			reason: "stale"
+		};
+		const elements = this.#pathElements.get(pathKey(address.path));
+		const target = elements?.textElement ?? elements?.tokenElement ?? elements?.rowElement;
+		if (!target) return {
+			ok: false,
+			reason: "notIndexed"
+		};
+		target.focus();
+		const role = target === elements?.textElement ? "text" : target === elements?.rowElement ? "row" : "markDescendant";
+		if (role === "markDescendant") this.#placeCollapsedBoundary(target, boundary === "end" ? target.childNodes.length : 0);
+		this._store.caret.location({
+			address,
+			role
+		});
+		return {
+			ok: true,
+			value: void 0
+		};
+	}
+	rawPositionFromBoundary(node, offset, affinity = "after") {
+		if (!this.index()) return {
+			ok: false,
+			reason: "notIndexed"
+		};
+		if (this.#isComposing) return {
+			ok: false,
+			reason: "composing"
+		};
+		const container = this.container();
+		if (container && node === container) return this.#rawPositionFromContainerBoundary(offset, affinity);
+		const location = this.locateNode(node);
+		if (!location.ok) return location.reason === "control" ? {
+			ok: false,
+			reason: "control"
+		} : location;
+		const token = this._store.parsing.index().resolveAddress(location.value.address);
+		if (!token.ok) return {
+			ok: false,
+			reason: "notIndexed"
+		};
+		if (node instanceof HTMLElement) {
+			if (this.#elementRoles.get(node)?.role === "childSequence") {
+				const childCount = node.childNodes.length;
+				if (offset <= 0) return {
+					ok: true,
+					value: token.value.position.start
+				};
+				if (offset >= childCount) return {
+					ok: true,
+					value: token.value.position.end
+				};
+				return this.#rawPositionFromTokenChildBoundary(node, offset, token.value, affinity);
 			}
-		} else for (let i = 0; i < children.length; i += 2) {
-			const el = childAt(container, i);
-			if (el) el.contentEditable = value;
+		}
+		const textElement = location.value.textElement;
+		if (textElement?.contains(node)) {
+			const local = textOffsetWithin(textElement, node, offset);
+			if (local === void 0) return {
+				ok: false,
+				reason: "invalidBoundary"
+			};
+			return {
+				ok: true,
+				value: token.value.position.start + local
+			};
+		}
+		if (node === location.value.tokenElement) {
+			const childCount = location.value.tokenElement.childNodes.length;
+			if (offset <= 0) return {
+				ok: true,
+				value: token.value.position.start
+			};
+			if (offset >= childCount) return {
+				ok: true,
+				value: token.value.position.end
+			};
+			return this.#rawPositionFromTokenChildBoundary(location.value.tokenElement, offset, token.value, affinity);
+		}
+		if (token.value.type === "mark" && location.value.tokenElement.contains(node)) {
+			if (hasEditableAncestorBefore(node, location.value.tokenElement)) return {
+				ok: false,
+				reason: "invalidBoundary"
+			};
+			return {
+				ok: true,
+				value: affinity === "after" ? token.value.position.start : token.value.position.end
+			};
+		}
+		if (location.value.rowElement && node === location.value.rowElement) return {
+			ok: true,
+			value: offset <= 0 ? token.value.position.start : token.value.position.end
+		};
+		return {
+			ok: false,
+			reason: "invalidBoundary"
+		};
+	}
+	readRawSelection() {
+		if (!this.index()) return {
+			ok: false,
+			reason: "notIndexed"
+		};
+		const selection = window.getSelection();
+		if (!selection || selection.rangeCount === 0) return {
+			ok: false,
+			reason: "invalidBoundary"
+		};
+		const range = selection.getRangeAt(0);
+		const start = this.rawPositionFromBoundary(range.startContainer, range.startOffset, "after");
+		const end = this.rawPositionFromBoundary(range.endContainer, range.endOffset, "before");
+		if (!start.ok) {
+			const reason = start.reason === "composing" ? "invalidBoundary" : start.reason;
+			return {
+				ok: false,
+				reason: reason === "control" || reason === "outsideEditor" ? "mixedBoundary" : reason
+			};
+		}
+		if (!end.ok) {
+			const reason = end.reason === "composing" ? "invalidBoundary" : end.reason;
+			return {
+				ok: false,
+				reason: reason === "control" || reason === "outsideEditor" ? "mixedBoundary" : reason
+			};
+		}
+		const rangeValue = start.value <= end.value ? {
+			start: start.value,
+			end: end.value
+		} : {
+			start: end.value,
+			end: start.value
+		};
+		const direction = rangeValue.start === rangeValue.end ? void 0 : selection.anchorNode === range.endContainer && selection.anchorOffset === range.endOffset ? "backward" : "forward";
+		return {
+			ok: true,
+			value: direction ? {
+				range: rangeValue,
+				direction
+			} : { range: rangeValue }
+		};
+	}
+	#handleRendered() {
+		if (this.#rendering) {
+			this.#queuedRender = true;
+			this.diagnostics({
+				kind: "renderReentry",
+				reason: "rendered event queued during DOM indexing"
+			});
+			return;
+		}
+		this.#rendering = true;
+		try {
+			this.#commitRendered();
+		} finally {
+			this.#rendering = false;
+			const queued = this.#queuedRender;
+			this.#queuedRender = false;
+			if (queued) this.#handleRendered();
+		}
+	}
+	#commitRendered() {
+		const container = this.container();
+		if (!container) {
+			this.diagnostics({
+				kind: "missingContainer",
+				reason: "container is not registered"
+			});
+			return;
+		}
+		const tokenIndex = this._store.parsing.index();
+		const pathElements = /* @__PURE__ */ new Map();
+		const elementRoles = /* @__PURE__ */ new WeakMap();
+		const controlElements = /* @__PURE__ */ new Set();
+		for (const { element } of this.#pendingControls.values()) {
+			controlElements.add(element);
+			elementRoles.set(element, { role: "control" });
 		}
 		const tokens = this._store.parsing.tokens();
-		if (isBlock) this.#reconcileDragTextContent(tokens, container, readOnly);
-		else this.#reconcileTextContent(tokens, container);
-	}
-	#reconcileTextContent(tokens, parent) {
-		for (let i = 0; i < tokens.length; i++) {
-			const token = tokens[i];
-			const el = childAt(parent, i);
-			if (!el) continue;
-			if (token.type === "text") {
-				if (el.textContent !== token.content) el.textContent = token.content;
-			} else if (token.children.length > 0) this.#reconcileMarkChildren(token.children, el);
+		if (this._store.props.layout() === "block") this.#indexBlockTokens(container, tokens, tokenIndex, controlElements, pathElements, elementRoles);
+		else this.#indexTokenSequence(container, tokens, [], void 0, tokenIndex, controlElements, pathElements, elementRoles);
+		this.#pathElements = pathElements;
+		this.#elementRoles = elementRoles;
+		this.#reconcileStructuralTextSurfaces();
+		batch(() => this.#domIndex({ generation: ++this.#generation }), { mutable: true });
+		this.#clearStaleCaretLocation();
+		this.#applyPendingRecovery();
+	}
+	#elementChildren(element) {
+		return Array.from(element.children).filter((child) => child instanceof HTMLElement);
+	}
+	#isControlRoot(element, controlElements) {
+		if (controlElements.has(element)) return true;
+		for (const control of controlElements) if (element.contains(control)) return true;
+		return false;
+	}
+	#childSequenceHostsFor(ownerPath) {
+		const hosts = [];
+		for (const registration of this.#pendingChildSequences.values()) if (pathEquals(registration.ownerPath, ownerPath)) hosts.push(registration.element);
+		return hosts;
+	}
+	#indexNestedTokenSequence(token, path, address, ownerElement, rowElement, tokenIndex, controlElements, pathElements, elementRoles) {
+		if (token.type !== "mark" || token.children.length === 0) return;
+		const hosts = this.#childSequenceHostsFor(path);
+		if (hosts.length === 0) {
+			this.#indexTokenSequence(ownerElement, token.children, path, rowElement, tokenIndex, controlElements, pathElements, elementRoles);
+			return;
+		}
+		const ownerKey = pathKey(path);
+		if (hosts.length !== 1) {
+			this.diagnostics({
+				kind: "ambiguousStructure",
+				path,
+				reason: `expected exactly 1 child sequence host for owner path ${ownerKey} but found ${hosts.length}`
+			});
+			return;
+		}
+		const host = hosts[0];
+		if (!ownerElement.contains(host)) {
+			this.diagnostics({
+				kind: "ambiguousStructure",
+				path,
+				reason: `child sequence host for owner path ${ownerKey} is not contained by owner token element`
+			});
+			return;
 		}
+		elementRoles.set(host, {
+			role: "childSequence",
+			path,
+			address
+		});
+		this.#indexTokenSequence(host, token.children, path, rowElement, tokenIndex, controlElements, pathElements, elementRoles);
 	}
-	#reconcileMarkChildren(tokens, parent, editable) {
-		const children = parent.children;
-		let childIdx = 0;
-		for (const token of tokens) if (token.type === "text") {
-			while (childIdx < children.length) {
-				const el = childAt(parent, childIdx);
-				if (el && isTextTokenSpan(el)) break;
-				childIdx++;
-			}
-			const el = childAt(parent, childIdx);
-			if (el) {
-				if (el.textContent !== token.content) el.textContent = token.content;
-				if (editable !== void 0) el.contentEditable = editable;
-				childIdx++;
-			}
-		} else if (token.children.length > 0) {
-			while (childIdx < children.length) {
-				const el = childAt(parent, childIdx);
-				if (el && !isTextTokenSpan(el)) break;
-				childIdx++;
-			}
-			const el = childAt(parent, childIdx);
-			if (el) {
-				this.#reconcileMarkChildren(token.children, el, editable);
-				childIdx++;
+	#indexBlockTokens(container, tokens, tokenIndex, controlElements, pathElements, elementRoles) {
+		const rows = this.#elementChildren(container);
+		if (rows.length !== tokens.length) this.diagnostics({
+			kind: "ambiguousStructure",
+			reason: `expected ${tokens.length} block rows but found ${rows.length}`
+		});
+		tokens.forEach((token, i) => {
+			const row = rows.at(i);
+			if (!row) return;
+			const candidates = this.#elementChildren(row).filter((child) => !this.#isControlRoot(child, controlElements));
+			if (candidates.length !== 1) {
+				this.diagnostics({
+					kind: "ambiguousStructure",
+					path: [i],
+					reason: `expected 1 block token element but found ${candidates.length}`
+				});
+				return;
 			}
+			this.#indexTokenElement(token, [i], candidates[0], row, tokenIndex, controlElements, pathElements, elementRoles);
+		});
+	}
+	#indexTokenSequence(parent, tokens, basePath, rowElement, tokenIndex, controlElements, pathElements, elementRoles) {
+		const elements = this.#elementChildren(parent).filter((child) => !this.#isControlRoot(child, controlElements));
+		if (elements.length !== tokens.length) {
+			this.diagnostics({
+				kind: "ambiguousStructure",
+				path: basePath.length ? basePath : void 0,
+				reason: `expected ${tokens.length} child token elements but found ${elements.length}`
+			});
+			return;
 		}
+		tokens.forEach((token, i) => {
+			const element = elements.at(i);
+			if (!element) return;
+			this.#indexTokenElement(token, [...basePath, i], element, rowElement, tokenIndex, controlElements, pathElements, elementRoles);
+		});
 	}
-	#reconcileDragTextContent(tokens, container, readOnly) {
-		const editable = readOnly ? "false" : "true";
-		for (let ri = 0; ri < tokens.length; ri++) {
-			const token = tokens[ri];
-			const blockEl = childAt(container, ri);
-			if (!blockEl) continue;
-			if (token.type === "mark") {
-				if (token.children.length > 0) {
-					const markEl = blockEl.hasAttribute("data-testid") ? childAt(blockEl, readOnly ? 0 : 1) : blockEl;
-					if (markEl) this.#reconcileMarkChildren(token.children, markEl, editable);
+	#indexTokenElement(token, path, element, rowElement, tokenIndex, controlElements, pathElements, elementRoles) {
+		const address = tokenIndex.addressFor(path);
+		if (!address) {
+			this.diagnostics({
+				kind: "stalePath",
+				path,
+				reason: "structural path no longer resolves"
+			});
+			return;
+		}
+		const record = {
+			path: [...path],
+			address,
+			tokenElement: element,
+			textElement: token.type === "text" ? element : void 0,
+			rowElement
+		};
+		pathElements.set(tokenIndex.key(path), record);
+		elementRoles.set(element, {
+			role: token.type === "text" ? "text" : "token",
+			path,
+			address
+		});
+		if (rowElement && path.length === 1) elementRoles.set(rowElement, {
+			role: "row",
+			path,
+			address
+		});
+		this.#indexNestedTokenSequence(token, path, address, element, rowElement, tokenIndex, controlElements, pathElements, elementRoles);
+	}
+	#reconcileStructuralTextSurfaces() {
+		const tokenIndex = this._store.parsing.index();
+		const editable = this._store.props.readOnly() || this._store.caret.selecting() ? "false" : "true";
+		for (const record of this.#pathElements.values()) {
+			const resolved = tokenIndex.resolveAddress(record.address);
+			if (!resolved.ok) {
+				this.diagnostics({
+					kind: "stalePath",
+					path: record.path,
+					reason: "structural path became stale during reconciliation"
+				});
+				continue;
+			}
+			if (record.textElement) {
+				if (resolved.value.type !== "text") {
+					this.diagnostics({
+						kind: "missingRole",
+						path: record.path,
+						reason: "text role registered for non-text token"
+					});
+					continue;
 				}
+				if (record.textElement.textContent !== resolved.value.content) record.textElement.textContent = resolved.value.content;
+				record.textElement.contentEditable = editable;
 				continue;
 			}
-			const el = childAt(blockEl, readOnly ? 0 : 1);
-			if (!el) continue;
-			if (el.textContent !== token.content) el.textContent = token.content;
+			if (resolved.value.type === "mark") if (this._store.props.readOnly()) record.tokenElement.removeAttribute("tabindex");
+			else record.tokenElement.tabIndex = 0;
+		}
+	}
+	#rawPositionFromContainerBoundary(offset, affinity) {
+		const tokens = this._store.parsing.tokens();
+		if (tokens.length === 0) return {
+			ok: true,
+			value: 0
+		};
+		if (offset <= 0) return {
+			ok: true,
+			value: tokens[0].position.start
+		};
+		if (offset >= tokens.length) return {
+			ok: true,
+			value: tokens[tokens.length - 1].position.end
+		};
+		const before = tokens[offset - 1];
+		const after = tokens[offset];
+		return {
+			ok: true,
+			value: affinity === "before" ? before.position.end : after.position.start
+		};
+	}
+	#rawPositionFromTokenChildBoundary(tokenElement, offset, token, affinity) {
+		if (token.type === "text") {
+			const textElement = this.#pathElements.get(pathKey(this._store.parsing.index().pathFor(token) ?? []))?.textElement;
+			if (!textElement || textLength(textElement) === 0) return {
+				ok: true,
+				value: token.position.start
+			};
+		}
+		const before = this.#locateRegisteredDescendant(tokenElement.childNodes.item(offset - 1));
+		const after = this.#locateRegisteredDescendant(tokenElement.childNodes.item(offset));
+		if (before?.ok && after?.ok) {
+			const beforeToken = this._store.parsing.index().resolveAddress(before.value.address);
+			const afterToken = this._store.parsing.index().resolveAddress(after.value.address);
+			if (beforeToken.ok && afterToken.ok) return {
+				ok: true,
+				value: affinity === "before" ? beforeToken.value.position.end : afterToken.value.position.start
+			};
+		}
+		return {
+			ok: true,
+			value: affinity === "before" ? token.position.start : token.position.end
+		};
+	}
+	#locateRegisteredDescendant(node) {
+		if (!node) return void 0;
+		return this.locateNode(node);
+	}
+	#findTextTargetForRawPosition(rawPosition, affinity) {
+		const candidates = [];
+		const tokenIndex = this._store.parsing.index();
+		for (const record of this.#pathElements.values()) {
+			if (!record.textElement) continue;
+			const resolved = tokenIndex.resolveAddress(record.address);
+			if (!resolved.ok || resolved.value.type !== "text") continue;
+			candidates.push({
+				element: record.textElement,
+				start: resolved.value.position.start,
+				end: resolved.value.position.end
+			});
+		}
+		candidates.sort((a, b) => a.start - b.start);
+		const containing = candidates.find((candidate) => rawPosition >= candidate.start && rawPosition <= candidate.end);
+		if (containing) return containing;
+		if (affinity === "before") return [...candidates].toReversed().find((candidate) => candidate.end <= rawPosition);
+		return candidates.find((candidate) => candidate.start >= rawPosition);
+	}
+	#focusMarkBoundaryForRawPosition(rawPosition) {
+		const tokenIndex = this._store.parsing.index();
+		for (const record of this.#pathElements.values()) {
+			const resolved = tokenIndex.resolveAddress(record.address);
+			if (!resolved.ok || resolved.value.type !== "mark") continue;
+			if (rawPosition !== resolved.value.position.start && rawPosition !== resolved.value.position.end) continue;
+			const boundary = rawPosition === resolved.value.position.end ? "end" : "start";
+			record.tokenElement.focus();
+			this.#placeCollapsedBoundary(record.tokenElement, boundary === "end" ? record.tokenElement.childNodes.length : 0);
+			this._store.caret.location({
+				address: record.address,
+				role: "markDescendant"
+			});
+			return {
+				ok: true,
+				value: void 0
+			};
+		}
+		return {
+			ok: false,
+			reason: "invalidBoundary"
+		};
+	}
+	#placeCaretInTextSurface(surface, offset) {
+		const selection = window.getSelection();
+		if (!selection) return;
+		const boundary = this.#boundaryInTextSurface(surface, offset);
+		if (!boundary) return;
+		const range = document.createRange();
+		range.setStart(boundary.node, boundary.offset);
+		range.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+	#placeCollapsedBoundary(element, offset) {
+		const selection = window.getSelection();
+		if (!selection) return;
+		const range = document.createRange();
+		range.setStart(element, Math.min(Math.max(offset, 0), element.childNodes.length));
+		range.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+	#applyPendingRecovery() {
+		const recovery = this._store.caret.recovery();
+		if (!recovery) return;
+		if (recovery.kind === "caret") {
+			const result = this._store.caret.placeAt(recovery.rawPosition, recovery.affinity);
+			this._store.caret.recovery(void 0);
+			if (!result.ok) this.diagnostics({
+				kind: "recoveryFailed",
+				reason: `pending caret recovery could not be applied: ${result.reason}`
+			});
+			return;
+		}
+		const result = this.#placeSelection(recovery.selection);
+		this._store.caret.recovery(void 0);
+		if (!result.ok) this.diagnostics({
+			kind: "recoveryFailed",
+			reason: `pending selection recovery could not be applied: ${result.reason}`
+		});
+	}
+	#placeSelection(selection) {
+		const start = this.#findTextTargetForRawPosition(selection.range.start, "after");
+		const end = this.#findTextTargetForRawPosition(selection.range.end, "before");
+		const browserSelection = window.getSelection();
+		if (!start || !end || !browserSelection) return {
+			ok: false,
+			reason: "invalidBoundary"
+		};
+		const startBoundary = this.#boundaryInTextSurface(start.element, selection.range.start - start.start);
+		const endBoundary = this.#boundaryInTextSurface(end.element, selection.range.end - end.start);
+		if (!startBoundary || !endBoundary) return {
+			ok: false,
+			reason: "invalidBoundary"
+		};
+		const range = document.createRange();
+		range.setStart(startBoundary.node, startBoundary.offset);
+		range.setEnd(endBoundary.node, endBoundary.offset);
+		browserSelection.removeAllRanges();
+		browserSelection.addRange(range);
+		return {
+			ok: true,
+			value: void 0
+		};
+	}
+	#boundaryInTextSurface(surface, offset) {
+		const walker = document.createTreeWalker(surface, NodeFilter.SHOW_TEXT);
+		let remaining = Math.max(0, offset);
+		let node = nextTextNode(walker);
+		while (node) {
+			if (remaining <= node.length) return {
+				node,
+				offset: remaining
+			};
+			remaining -= node.length;
+			node = nextTextNode(walker);
 		}
+		const text = surface.firstChild instanceof Text ? surface.firstChild : document.createTextNode("");
+		if (!text.parentNode) surface.append(text);
+		return {
+			node: text,
+			offset: text.length
+		};
+	}
+	#clearStaleCaretLocation() {
+		const location = this._store.caret.location();
+		if (!location) return;
+		if (!this._store.parsing.index().resolveAddress(location.address).ok || !this.#pathElements.has(pathKey(location.address.path))) this._store.caret.location(void 0);
 	}
 };
 //#endregion
-//#region ../../core/src/features/editing/utils/createNewSpan.ts
-function createNewSpan(span, annotation, index, source) {
-	return span.slice(0, index) + annotation + span.slice(index + source.length);
-}
-//#endregion
 //#region ../../core/src/features/editing/createRowContent.ts
 function createRowContent(options) {
 	const firstOption = options[0];
@@ -2726,47 +3101,6 @@ function createRowContent(options) {
 	});
 }
 //#endregion
-//#region ../../core/src/features/editing/utils/deleteMark.ts
-function deleteMark(place, store) {
-	const placeIndex = {
-		prev: 2,
-		self: 1,
-		next: 0
-	}[place];
-	const { focus } = store.nodes;
-	const targetIndex = Math.max(0, focus.index - placeIndex);
-	const tokens = store.parsing.tokens();
-	const spliced = tokens.splice(focus.index - placeIndex, 3);
-	const span1 = spliced.at(0);
-	const span2 = spliced.at(2);
-	const content1 = span1?.content ?? "";
-	const content2 = span2?.content ?? "";
-	store.parsing.tokens(tokens.toSpliced(focus.index - placeIndex, 0, {
-		type: "text",
-		content: content1 + content2,
-		position: {
-			start: span1?.position.start ?? 0,
-			end: span2?.position.end ?? (content1 + content2).length
-		}
-	}));
-	let caretAnchor = focus;
-	for (let i = 0; i < placeIndex; i++) caretAnchor = caretAnchor.prev;
-	const caret = caretAnchor.length;
-	store.caret.recovery({
-		anchor: caretAnchor.prev,
-		caret
-	});
-	store.value.change();
-	queueMicrotask(() => {
-		const container = store.slots.container();
-		const target = container ? childAt(container, targetIndex) : null;
-		if (!target) return;
-		store.nodes.focus.target = target;
-		target.focus();
-		store.nodes.focus.caret = caret;
-	});
-}
-//#endregion
 //#region ../../core/src/features/drag/operations.ts
 function gapText(value, a, b) {
 	return value.substring(a.position.end, b.position.start);
@@ -2876,16 +3210,16 @@ var DragFeature = class {
 		this.#unsub = watch(this.action, (action) => {
 			switch (action.type) {
 				case "reorder":
-					this.#reorder(action.source, action.target);
+					this.#reorder(action);
 					break;
 				case "add":
-					this.#add(action.afterIndex);
+					this.#add(action);
 					break;
 				case "delete":
-					this.#delete(action.index);
+					this.#delete(action);
 					break;
 				case "duplicate":
-					this.#duplicate(action.index);
+					this.#duplicate(action);
 					break;
 			}
 		});
@@ -2894,36 +3228,74 @@ var DragFeature = class {
 		this.#unsub?.();
 		this.#unsub = void 0;
 	}
-	#reorder(sourceIndex, targetIndex) {
-		const value = this.store.props.value();
-		if (value == null || !this.store.props.onChange()) return;
-		const newValue = reorderDragRows(value, this.store.parsing.tokens(), sourceIndex, targetIndex);
-		if (newValue !== value) this.store.value.next(newValue);
+	#reorder(action) {
+		const value = this.store.value.current();
+		const rows = this.store.parsing.tokens();
+		const newValue = reorderDragRows(value, rows, action.source, action.target);
+		if (newValue !== value) this.store.value.replaceAll(newValue, {
+			source: "drag",
+			recover: this.#recoverAfterDrag(action, rows, newValue)
+		});
 	}
-	#add(afterIndex) {
-		const value = this.store.props.value();
-		if (value == null || !this.store.props.onChange()) return;
+	#add(action) {
+		const value = this.store.value.current();
 		const rawRows = this.store.parsing.tokens();
 		const rows = rawRows.length > 0 ? rawRows : [EMPTY_TEXT_TOKEN];
 		const newRowContent = createRowContent(this.store.props.options());
-		this.store.value.next(addDragRow(value, rows, afterIndex, newRowContent));
-		queueMicrotask(() => {
-			const container = this.store.slots.container();
-			if (!container) return;
-			childAt(container, afterIndex + 1)?.focus();
+		const newValue = addDragRow(value, rows, action.afterIndex, newRowContent);
+		this.store.value.replaceAll(newValue, {
+			source: "drag",
+			recover: this.#recoverAfterDrag(action, rows, newValue)
 		});
 	}
-	#delete(index) {
-		const value = this.store.props.value();
-		if (value == null || !this.store.props.onChange()) return;
+	#delete(action) {
+		const value = this.store.value.current();
 		const rows = this.store.parsing.tokens();
-		this.store.value.next(deleteDragRow(value, rows, index));
+		const newValue = deleteDragRow(value, rows, action.index);
+		this.store.value.replaceAll(newValue, {
+			source: "drag",
+			recover: this.#recoverAfterDrag(action, rows, newValue)
+		});
 	}
-	#duplicate(index) {
-		const value = this.store.props.value();
-		if (value == null || !this.store.props.onChange()) return;
+	#duplicate(action) {
+		const value = this.store.value.current();
 		const rows = this.store.parsing.tokens();
-		this.store.value.next(duplicateDragRow(value, rows, index));
+		const newValue = duplicateDragRow(value, rows, action.index);
+		this.store.value.replaceAll(newValue, {
+			source: "drag",
+			recover: this.#recoverAfterDrag(action, rows, newValue)
+		});
+	}
+	#recoverAfterDrag(action, previousRows, nextValue) {
+		if (action.type === "add") {
+			const after = previousRows.at(action.afterIndex);
+			return {
+				kind: "caret",
+				rawPosition: after ? after.position.end : nextValue.length
+			};
+		}
+		if (action.type === "duplicate") {
+			const row = previousRows.at(action.index);
+			return row ? {
+				kind: "caret",
+				rawPosition: row.position.end
+			} : void 0;
+		}
+		if (action.type === "delete") {
+			const next = previousRows.at(action.index + 1) ?? (action.index > 0 ? previousRows.at(action.index - 1) : void 0);
+			return next ? {
+				kind: "caret",
+				rawPosition: Math.min(next.position.start, nextValue.length)
+			} : {
+				kind: "caret",
+				rawPosition: 0
+			};
+		}
+		const moved = previousRows.at(action.source);
+		return moved ? {
+			kind: "caret",
+			rawPosition: Math.min(moved.position.start, nextValue.length)
+		} : void 0;
 	}
 };
 //#endregion
@@ -2940,178 +3312,52 @@ function getDragTargetIndex(blockIndex, position) {
 }
 //#endregion
 //#region ../../core/src/features/drag/config.ts
-function getAlwaysShowHandle(draggable) {
-	return typeof draggable === "object" && !!draggable.alwaysShowHandle;
-}
-//#endregion
-//#region ../../core/src/features/navigation/navigation.ts
-function shiftFocusPrev(store, event) {
-	const { focus } = store.nodes;
-	if (focus.isMark && !focus.isEditable || focus.isCaretAtBeginning) {
-		let prev = focus.prev;
-		while (prev.target && prev.isMark && !prev.isEditable) prev = prev.prev;
-		if (!prev.target) return false;
-		event.preventDefault();
-		prev.target.focus();
-		Caret.setCaretToEnd(prev.target);
-		return true;
-	}
-	return false;
-}
-function shiftFocusNext(store, event) {
-	const { focus } = store.nodes;
-	if (focus.isMark && !focus.isEditable || focus.isCaretAtEnd) {
-		let next = focus.next;
-		while (next.target && next.isMark && !next.isEditable) next = next.next;
-		if (!next.target) return false;
-		event.preventDefault();
-		next.target.focus();
-		Caret.trySetIndex(next.target, 0);
-		return true;
-	}
-	return false;
-}
-//#endregion
-//#region ../../core/src/features/keyboard/arrowNav.ts
-function enableArrowNav(store) {
-	const container = store.slots.container();
-	if (!container) return () => {};
-	const scope = effectScope(() => {
-		listen(container, "keydown", (e) => {
-			if (store.slots.isBlock()) return;
-			if (!store.nodes.focus.target) return;
-			if (e.key === KEYBOARD.LEFT) shiftFocusPrev(store, e);
-			else if (e.key === KEYBOARD.RIGHT) shiftFocusNext(store, e);
-			selectAllText(store, e);
-		});
-	});
-	return () => scope();
-}
-//#endregion
-//#region ../../core/src/features/keyboard/rawPosition.ts
-function getCaretRawPosInBlock(blockDiv, token) {
-	const selection = window.getSelection();
-	if (!selection?.rangeCount) return token.position.end;
-	const { focusNode, focusOffset } = selection;
-	if (!focusNode) return token.position.end;
-	return getDomRawPos(focusNode, focusOffset, blockDiv, token);
-}
-function setCaretAtRawPos(blockDiv, token, rawAbsolutePos) {
-	const sel = window.getSelection();
-	if (!sel) return;
-	if (token.type === "mark") {
-		if (setCaretInMarkAtRawPos(blockDiv, token, rawAbsolutePos)) return;
-		Caret.setCaretToEnd(blockDiv);
-		return;
-	}
-	const offsetWithinToken = rawAbsolutePos - token.position.start;
-	const textNode = nextText(document.createTreeWalker(blockDiv, 4));
-	if (textNode) {
-		const charOffset = Math.min(offsetWithinToken, textNode.length);
-		const range = document.createRange();
-		range.setStart(textNode, charOffset);
-		range.collapse(true);
-		sel.removeAllRanges();
-		sel.addRange(range);
-		return;
-	}
-	Caret.setCaretToEnd(blockDiv);
-}
-function getDomRawPos(node, offset, blockDiv, token) {
-	if (node === blockDiv) {
-		const sel = window.getSelection();
-		if (sel?.focusNode && sel.focusNode !== blockDiv) return getDomRawPos(sel.focusNode, sel.focusOffset, blockDiv, token);
-		return token.position.end;
-	}
-	if (node.nodeType === Node.TEXT_NODE && node.parentElement === blockDiv) {
-		if (token.type === "mark") return getDomRawPosInMark(node, offset, blockDiv, token);
-		return token.position.start + Math.min(offset, token.content.length);
-	}
-	let child = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
-	while (child && child.parentElement !== blockDiv) child = child.parentElement;
-	if (!child) return token.position.end;
-	if (token.type === "mark") return getDomRawPosInMark(node, offset, blockDiv, token);
-	return token.position.start + Math.min(offset, token.content.length);
+function getAlwaysShowHandle(draggable) {
+	return typeof draggable === "object" && !!draggable.alwaysShowHandle;
 }
-function getDomRawPosInMark(node, offset, markElement, markToken) {
-	if (markToken.children.length === 0) {
-		if (offset === 0) return markToken.position.start;
-		const nestedLen = markToken.slot?.content.length ?? markToken.value.length;
-		if (nestedLen > 0 && offset >= nestedLen) {
-			if (markToken.content.endsWith("\n\n") && markToken.slot) return markToken.slot.end;
-			return markToken.position.end;
-		}
-		return (markToken.slot?.start ?? markToken.position.start) + Math.min(offset, nestedLen);
-	}
-	let tokenIdx = 0;
-	for (const childNode of Array.from(markElement.childNodes)) {
-		if (tokenIdx >= markToken.children.length) break;
-		const tokenChild = markToken.children[tokenIdx];
-		if (isHtmlElement(childNode) && tokenChild.type === "text") {
-			if (!isTextTokenSpan(childNode)) continue;
-			if (node === childNode) {
-				const charOffset = offset === 0 ? 0 : tokenChild.content.length;
-				return tokenChild.position.start + Math.min(charOffset, tokenChild.content.length);
-			}
-			if (childNode.contains(node)) return tokenChild.position.start + Math.min(offset, tokenChild.content.length);
-			tokenIdx++;
-		} else if (isTextNode(childNode) && tokenChild.type === "text") {
-			if (node === childNode) return tokenChild.position.start + Math.min(offset, tokenChild.content.length);
-			tokenIdx++;
-		} else if (isHtmlElement(childNode) && tokenChild.type === "mark") {
-			if (childNode === node || childNode.contains(node)) return getDomRawPosInMark(node, offset, childNode, tokenChild);
-			tokenIdx++;
-		}
-	}
-	return markToken.slot?.end ?? markToken.position.end;
+//#endregion
+//#region ../../core/src/features/keyboard/arrowNav.ts
+function enableArrowNav(store) {
+	const container = store.dom.container();
+	if (!container) return () => {};
+	const scope = effectScope(() => {
+		listen(container, "keydown", (e) => {
+			if (store.slots.isBlock()) return;
+			if (e.key === KEYBOARD.LEFT) shiftFocus(store, e, "prev");
+			else if (e.key === KEYBOARD.RIGHT) shiftFocus(store, e, "next");
+			selectAllText(store, e);
+		});
+	});
+	return () => scope();
 }
-function setCaretInMarkAtRawPos(markElement, markToken, rawAbsolutePos) {
-	const sel = window.getSelection();
-	if (!sel) return false;
-	let tokenIdx = 0;
-	for (const childNode of Array.from(markElement.childNodes)) {
-		if (tokenIdx >= markToken.children.length) break;
-		const tokenChild = markToken.children[tokenIdx];
-		if (isHtmlElement(childNode) && tokenChild.type === "text") {
-			if (!isTextTokenSpan(childNode)) continue;
-			if (rawAbsolutePos >= tokenChild.position.start && rawAbsolutePos <= tokenChild.position.end) {
-				const rawTextNode = childNode.firstChild;
-				const textNode = isTextNode(rawTextNode) ? rawTextNode : null;
-				const offset = rawAbsolutePos - tokenChild.position.start;
-				if (textNode) {
-					const range = document.createRange();
-					range.setStart(textNode, Math.min(offset, textNode.length));
-					range.collapse(true);
-					sel.removeAllRanges();
-					sel.addRange(range);
-				} else {
-					const range = document.createRange();
-					range.setStart(childNode, 0);
-					range.collapse(true);
-					sel.removeAllRanges();
-					sel.addRange(range);
-				}
-				return true;
-			}
-			tokenIdx++;
-		} else if (isTextNode(childNode) && tokenChild.type === "text") {
-			if (rawAbsolutePos >= tokenChild.position.start && rawAbsolutePos <= tokenChild.position.end) {
-				const offset = Math.min(rawAbsolutePos - tokenChild.position.start, childNode.length);
-				const range = document.createRange();
-				range.setStart(childNode, offset);
-				range.collapse(true);
-				sel.removeAllRanges();
-				sel.addRange(range);
-				return true;
-			}
-			tokenIdx++;
-		} else if (isHtmlElement(childNode) && tokenChild.type === "mark") {
-			const nextChild = tokenIdx + 1 < markToken.children.length ? markToken.children[tokenIdx + 1] : null;
-			if (!(rawAbsolutePos === tokenChild.position.end && nextChild?.position.start === rawAbsolutePos) && rawAbsolutePos >= tokenChild.position.start && rawAbsolutePos <= tokenChild.position.end) return setCaretInMarkAtRawPos(childNode, tokenChild, rawAbsolutePos);
-			tokenIdx++;
-		}
+function shiftFocus(store, event, direction) {
+	const location = store.caret.location();
+	if (!location) return false;
+	const token = store.parsing.index().resolveAddress(location.address);
+	if (!token.ok) return false;
+	if (!(token.value.type === "mark" && location.role !== "text")) {
+		const selection = store.dom.readRawSelection();
+		if (!selection.ok || selection.value.range.start !== selection.value.range.end) return false;
+		const atStart = selection.value.range.start <= token.value.position.start;
+		const atEnd = selection.value.range.end >= token.value.position.end;
+		if (direction === "prev" && !atStart) return false;
+		if (direction === "next" && !atEnd) return false;
+	}
+	const path = location.address.path;
+	const siblingIndex = direction === "prev" ? path[path.length - 1] - 1 : path[path.length - 1] + 1;
+	const siblingPath = [...path.slice(0, -1), siblingIndex];
+	const siblingAddress = store.parsing.index().addressFor(siblingPath);
+	if (!siblingAddress) return false;
+	event.preventDefault();
+	if (!store.caret.focus(siblingAddress, direction === "prev" ? "end" : "start").ok) return false;
+	const sibling = store.parsing.index().resolve(siblingPath);
+	if (sibling?.type === "mark") return true;
+	if (direction === "prev") {
+		store.caret.placeAt(sibling?.position.end ?? 0, "before");
+		return true;
 	}
-	return false;
+	store.caret.placeAt(sibling?.position.start ?? 0, "after");
+	return true;
 }
 //#endregion
 //#region ../../core/src/features/keyboard/blockEdit.ts
@@ -3120,14 +3366,14 @@ function isTextLikeRow(token) {
 	return token.descriptor.hasSlot && token.descriptor.segments.length === 1;
 }
 function enableBlockEdit(store) {
-	const container = store.slots.container();
+	const container = store.dom.container();
 	if (!container) return () => {};
 	const scope = effectScope(() => {
 		listen(container, "keydown", (e) => {
 			if (!store.slots.isBlock()) return;
 			if (e.key === KEYBOARD.LEFT || e.key === KEYBOARD.RIGHT) handleBlockArrowLeftRight(store, e, e.key === KEYBOARD.LEFT ? "left" : "right");
 			else if (e.key === KEYBOARD.UP || e.key === KEYBOARD.DOWN) handleArrowUpDown(store, e);
-			handleDelete$1(store, e);
+			handleDelete(store, e);
 			handleEnter(store, e);
 		});
 		listen(container, "beforeinput", (e) => {
@@ -3138,8 +3384,8 @@ function enableBlockEdit(store) {
 	});
 	return () => scope();
 }
-function handleDelete$1(store, event) {
-	const container = store.slots.container();
+function handleDelete(store, event) {
+	const container = store.dom.container();
 	if (!container) return;
 	const blockDivs = htmlChildren(container);
 	const blockIndex = blockDivs.findIndex((div) => div === document.activeElement || div.contains(document.activeElement));
@@ -3148,7 +3394,6 @@ function handleDelete$1(store, event) {
 	if (blockIndex >= rows.length) return;
 	const token = rows[blockIndex];
 	const value = store.value.current();
-	if (!store.props.onChange()) return;
 	if (event.key === KEYBOARD.BACKSPACE) {
 		const blockDiv = blockDivs[blockIndex];
 		const caretAtStart = Caret.getCaretIndex(blockDiv) === 0;
@@ -3158,12 +3403,12 @@ function handleDelete$1(store, event) {
 				if (blockIndex >= rows.length - 1) return value.slice(0, rows[blockIndex - 1].position.end);
 				return value.slice(0, rows[blockIndex].position.start) + value.slice(rows[blockIndex + 1].position.start);
 			})();
-			store.value.next(newValue);
-			queueMicrotask(() => {
-				const target = childAt(container, Math.max(0, blockIndex - 1));
-				if (target) {
-					target.focus();
-					Caret.setCaretToEnd(target);
+			const previous = rows.at(Math.max(0, blockIndex - 1));
+			store.value.replaceAll(newValue, {
+				source: "block",
+				recover: {
+					kind: "caret",
+					rawPosition: previous ? previous.position.end : 0
 				}
 			});
 			return;
@@ -3175,13 +3420,11 @@ function handleDelete$1(store, event) {
 				event.preventDefault();
 				const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
 				const newValue = mergeDragRows(value, rows, blockIndex);
-				store.value.next(newValue);
-				queueMicrotask(() => {
-					const target = childAt(container, blockIndex - 1);
-					if (target) {
-						target.focus();
-						const updatedToken = store.parsing.tokens()[blockIndex - 1];
-						setCaretAtRawPos(target, updatedToken, joinPos);
+				store.value.replaceAll(newValue, {
+					source: "block",
+					recover: {
+						kind: "caret",
+						rawPosition: joinPos
 					}
 				});
 				return;
@@ -3189,8 +3432,7 @@ function handleDelete$1(store, event) {
 			event.preventDefault();
 			queueMicrotask(() => {
 				const target = blockDivs[blockIndex - 1];
-				target.focus();
-				if (prevToken.type !== "mark") Caret.setCaretToEnd(target);
+				focusRow(store, prevToken, target, "end");
 			});
 			return;
 		}
@@ -3206,13 +3448,11 @@ function handleDelete$1(store, event) {
 				event.preventDefault();
 				const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
 				const newValue = mergeDragRows(value, rows, blockIndex);
-				store.value.next(newValue);
-				queueMicrotask(() => {
-					const target = childAt(container, blockIndex - 1);
-					if (target) {
-						target.focus();
-						const updatedToken = store.parsing.tokens()[blockIndex - 1];
-						setCaretAtRawPos(target, updatedToken, joinPos);
+				store.value.replaceAll(newValue, {
+					source: "block",
+					recover: {
+						kind: "caret",
+						rawPosition: joinPos
 					}
 				});
 				return;
@@ -3220,8 +3460,7 @@ function handleDelete$1(store, event) {
 			event.preventDefault();
 			queueMicrotask(() => {
 				const target = blockDivs[blockIndex - 1];
-				target.focus();
-				if (prevToken.type !== "mark") Caret.setCaretToEnd(target);
+				focusRow(store, prevToken, target, "end");
 			});
 			return;
 		}
@@ -3232,13 +3471,11 @@ function handleDelete$1(store, event) {
 				event.preventDefault();
 				const joinPos = getMergeDragRowJoinPos(rows, blockIndex + 1);
 				const newValue = mergeDragRows(value, rows, blockIndex + 1);
-				store.value.next(newValue);
-				queueMicrotask(() => {
-					const target = childAt(container, blockIndex);
-					if (target) {
-						target.focus();
-						const updatedToken = store.parsing.tokens()[blockIndex];
-						setCaretAtRawPos(target, updatedToken, joinPos);
+				store.value.replaceAll(newValue, {
+					source: "block",
+					recover: {
+						kind: "caret",
+						rawPosition: joinPos
 					}
 				});
 				return;
@@ -3246,8 +3483,7 @@ function handleDelete$1(store, event) {
 			event.preventDefault();
 			queueMicrotask(() => {
 				const target = blockDivs[blockIndex + 1];
-				target.focus();
-				Caret.trySetIndex(target, 0);
+				focusRow(store, nextToken, target, "start");
 			});
 			return;
 		}
@@ -3256,7 +3492,7 @@ function handleDelete$1(store, event) {
 function handleEnter(store, event) {
 	if (event.key !== KEYBOARD.ENTER) return;
 	if (event.shiftKey) return;
-	const container = store.slots.container();
+	const container = store.dom.container();
 	if (!container) return;
 	const activeElement = document.activeElement;
 	if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
@@ -3270,41 +3506,47 @@ function handleEnter(store, event) {
 	if (blockIndex === -1) return;
 	const rows = store.parsing.tokens();
 	const token = rows[blockIndex];
-	const blockDiv = blockDivs[blockIndex];
 	const value = store.value.current();
-	if (!store.props.onChange()) return;
 	const newRowContent = createRowContent(store.props.options());
 	if (!isTextLikeRow(token)) {
 		const newValue = addDragRow(value, rows, blockIndex, newRowContent);
-		store.value.next(newValue);
-		queueMicrotask(() => {
-			const newBlockIndex = blockIndex + 1;
-			if (newBlockIndex < container.children.length) {
-				const newBlockEl = childAt(container, newBlockIndex);
-				if (newBlockEl) {
-					newBlockEl.focus();
-					Caret.trySetIndex(newBlockEl, 0);
-				}
+		store.value.replaceAll(newValue, {
+			source: "block",
+			recover: {
+				kind: "caret",
+				rawPosition: token.position.end + newRowContent.length
 			}
 		});
 		return;
 	}
-	const absolutePos = getCaretRawPosInBlock(blockDiv, token);
-	const newValue = value.slice(0, absolutePos) + newRowContent + value.slice(absolutePos);
-	store.value.next(newValue);
-	queueMicrotask(() => {
-		const newBlockIndex = blockIndex + 1;
-		if (newBlockIndex < container.children.length) {
-			const newBlockEl = childAt(container, newBlockIndex);
-			if (newBlockEl) {
-				newBlockEl.focus();
-				Caret.trySetIndex(newBlockEl, 0);
-			}
+	const raw = store.dom.readRawSelection();
+	const absolutePos = raw.ok ? raw.value.range.start : token.position.end;
+	store.value.replaceRange({
+		start: absolutePos,
+		end: absolutePos
+	}, newRowContent, {
+		source: "block",
+		recover: {
+			kind: "caret",
+			rawPosition: absolutePos + newRowContent.length
 		}
 	});
 }
+function focusRow(store, token, row, caret) {
+	if (token.type === "mark") {
+		const path = store.parsing.index().pathFor(token);
+		const address = path ? store.parsing.index().addressFor(path) : void 0;
+		if (address && store.caret.focus(address).ok) return;
+	}
+	row.focus();
+	if (caret === "start") {
+		Caret.trySetIndex(row, 0);
+		return;
+	}
+	Caret.setCaretToEnd(row);
+}
 function handleBlockArrowLeftRight(store, event, direction) {
-	const container = store.slots.container();
+	const container = store.dom.container();
 	if (!container) return false;
 	const activeElement = document.activeElement;
 	if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return false;
@@ -3330,7 +3572,7 @@ function handleBlockArrowLeftRight(store, event, direction) {
 	return true;
 }
 function handleArrowUpDown(store, event) {
-	const container = store.slots.container();
+	const container = store.dom.container();
 	if (!container) return;
 	const activeElement = document.activeElement;
 	if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
@@ -3359,58 +3601,19 @@ function handleArrowUpDown(store, event) {
 	}
 }
 function handleBlockBeforeInput(store, event) {
-	const container = store.slots.container();
+	const container = store.dom.container();
 	if (!container) return;
 	const activeElement = document.activeElement;
 	if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
-	const blockDivs = htmlChildren(container);
-	const blockIndex = blockDivs.findIndex((div) => div === activeElement || div.contains(activeElement));
-	if (blockIndex === -1) return;
-	const blockDiv = blockDivs[blockIndex];
-	const rows = store.parsing.tokens();
-	if (blockIndex >= rows.length) return;
-	const token = rows[blockIndex];
-	const value = store.value.current();
-	const focusAndSetCaret = (newRawPos) => {
-		queueMicrotask(() => {
-			const target = childAt(container, blockIndex);
-			if (!target) return;
-			target.focus();
-			const updatedToken = store.parsing.tokens()[blockIndex];
-			setCaretAtRawPos(target, updatedToken, newRawPos);
-		});
-	};
+	if (htmlChildren(container).findIndex((div) => div === activeElement || div.contains(activeElement)) === -1) return;
 	switch (event.inputType) {
-		case "insertText": {
-			event.preventDefault();
-			const data = event.data ?? "";
-			const ranges = event.getTargetRanges();
-			let rawFrom;
-			let rawTo;
-			if (ranges.length > 0) {
-				const rawStart = getDomRawPos(ranges[0].startContainer, ranges[0].startOffset, blockDiv, token);
-				const rawEnd = getDomRawPos(ranges[0].endContainer, ranges[0].endOffset, blockDiv, token);
-				[rawFrom, rawTo] = rawStart <= rawEnd ? [rawStart, rawEnd] : [rawEnd, rawStart];
-			} else rawFrom = rawTo = getCaretRawPosInBlock(blockDiv, token);
-			store.value.next(value.slice(0, rawFrom) + data + value.slice(rawTo));
-			focusAndSetCaret(rawFrom + data.length);
+		case "insertText":
+			replaceBlockRange(store, event, event.data ?? "");
 			break;
-		}
 		case "insertFromPaste":
 		case "insertReplacementText": {
-			event.preventDefault();
-			const c = store.slots.container();
-			const pasteData = (c ? consumeMarkupPaste(c) : void 0) ?? event.dataTransfer?.getData("text/plain") ?? "";
-			const ranges = event.getTargetRanges();
-			let rawFrom;
-			let rawTo;
-			if (ranges.length > 0) {
-				const rawStart = getDomRawPos(ranges[0].startContainer, ranges[0].startOffset, blockDiv, token);
-				const rawEnd = getDomRawPos(ranges[0].endContainer, ranges[0].endOffset, blockDiv, token);
-				[rawFrom, rawTo] = rawStart <= rawEnd ? [rawStart, rawEnd] : [rawEnd, rawStart];
-			} else rawFrom = rawTo = getCaretRawPosInBlock(blockDiv, token);
-			store.value.next(value.slice(0, rawFrom) + pasteData + value.slice(rawTo));
-			focusAndSetCaret(rawFrom + pasteData.length);
+			const c = store.dom.container();
+			replaceBlockRange(store, event, (c ? consumeMarkupPaste(c) : void 0) ?? event.dataTransfer?.getData("text/plain") ?? "");
 			break;
 		}
 		case "deleteContentBackward":
@@ -3418,84 +3621,131 @@ function handleBlockBeforeInput(store, event) {
 		case "deleteWordBackward":
 		case "deleteWordForward":
 		case "deleteSoftLineBackward":
-		case "deleteSoftLineForward": {
-			const ranges = event.getTargetRanges();
-			if (!ranges.length) return;
-			const rawStart = getDomRawPos(ranges[0].startContainer, ranges[0].startOffset, blockDiv, token);
-			const rawEnd = getDomRawPos(ranges[0].endContainer, ranges[0].endOffset, blockDiv, token);
-			const [rawFrom, rawTo] = rawStart <= rawEnd ? [rawStart, rawEnd] : [rawEnd, rawStart];
-			if (rawFrom === rawTo) return;
-			event.preventDefault();
-			store.value.next(value.slice(0, rawFrom) + value.slice(rawTo));
-			focusAndSetCaret(rawFrom);
+		case "deleteSoftLineForward":
+			replaceBlockRange(store, event, "");
 			break;
-		}
 	}
 }
+function replaceBlockRange(store, event, replacement) {
+	const raw = rawRangeFromInputEvent$1(store, event);
+	if (!raw.ok) return;
+	const range = rangeForBlockInput(store, event, raw.value.range);
+	if (!range) return;
+	event.preventDefault();
+	store.value.replaceRange(range, replacement, {
+		source: "block",
+		recover: {
+			kind: "caret",
+			rawPosition: range.start + replacement.length
+		}
+	});
+}
+function rawRangeFromInputEvent$1(store, event) {
+	const ranges = event.getTargetRanges();
+	if (ranges.length === 0) return store.dom.readRawSelection();
+	return rawRangeFromTargetRange$1(store, ranges[0]);
+}
+function rawRangeFromTargetRange$1(store, range) {
+	const start = store.dom.rawPositionFromBoundary(range.startContainer, range.startOffset, "after");
+	const end = store.dom.rawPositionFromBoundary(range.endContainer, range.endOffset, "before");
+	if (!start.ok) return {
+		ok: false,
+		reason: rawSelectionReason$1(start)
+	};
+	if (!end.ok) return {
+		ok: false,
+		reason: rawSelectionReason$1(end)
+	};
+	return {
+		ok: true,
+		value: { range: start.value <= end.value ? {
+			start: start.value,
+			end: end.value
+		} : {
+			start: end.value,
+			end: start.value
+		} }
+	};
+}
+function rawSelectionReason$1(result) {
+	if (result.ok) return "invalidBoundary";
+	if (result.reason === "composing") return "invalidBoundary";
+	return result.reason;
+}
+function rangeForBlockInput(store, event, range) {
+	if (!event.inputType.startsWith("delete")) return range;
+	if (range.start !== range.end) return range;
+	if (event.inputType.endsWith("Backward") && range.start > 0) return {
+		start: range.start - 1,
+		end: range.start
+	};
+	if (event.inputType.endsWith("Forward") && range.end < store.value.current().length) return {
+		start: range.start,
+		end: range.end + 1
+	};
+}
 //#endregion
 //#region ../../core/src/features/keyboard/input.ts
 function enableInput(store) {
-	const container = store.slots.container();
+	const container = store.dom.container();
 	if (!container) return () => {};
+	let compositionRange;
 	const scope = effectScope(() => {
-		listen(container, "keydown", (e) => {
-			if (!store.slots.isBlock()) handleDelete(store, e);
-		});
 		listen(container, "paste", (e) => {
-			const c = store.slots.container();
+			const c = store.dom.container();
 			if (c) captureMarkupPaste(e, c);
 			handlePaste(store, e);
 		});
+		listen(container, "compositionstart", () => {
+			const selection = store.dom.readRawSelection();
+			compositionRange = selection.ok ? selection.value.range : void 0;
+			store.dom.compositionStarted();
+		});
+		listen(container, "compositionend", (e) => {
+			const range = compositionRange;
+			compositionRange = void 0;
+			store.dom.compositionEnded();
+			if (store.slots.isBlock()) return;
+			if (!range) return;
+			const data = e.data;
+			store.value.replaceRange(range, data, {
+				source: "input",
+				recover: {
+					kind: "caret",
+					rawPosition: range.start + data.length
+				}
+			});
+		});
 		listen(container, "beforeinput", (e) => {
 			handleBeforeInput(store, e);
 		}, true);
+		listen(container, "keydown", (e) => {
+			handleDeleteKey(store, e);
+		});
 	});
 	return () => scope();
 }
-function handleDelete(store, event) {
-	const { focus } = store.nodes;
-	if (event.key !== KEYBOARD.DELETE && event.key !== KEYBOARD.BACKSPACE) return;
-	if (focus.isMark) {
-		if (focus.isEditable) {
-			if (event.key === KEYBOARD.BACKSPACE && !focus.isCaretAtBeginning) return;
-			if (event.key === KEYBOARD.DELETE && !focus.isCaretAtEnd) return;
-		}
+function handleDeleteKey(store, event) {
+	if (store.slots.isBlock()) return;
+	if (event.key !== KEYBOARD.BACKSPACE && event.key !== KEYBOARD.DELETE) return;
+	if (store.caret.selecting() === "all" && isFullSelection(store)) {
 		event.preventDefault();
-		deleteMark("self", store);
+		replaceAllContentWith(store, "");
 		return;
 	}
-	if (event.key === KEYBOARD.BACKSPACE) {
-		if (focus.isSpan && focus.isCaretAtBeginning && focus.prev.target) {
-			event.preventDefault();
-			deleteMark("prev", store);
-			return;
-		}
-	}
-	if (event.key === KEYBOARD.DELETE) {
-		if (focus.isSpan && focus.isCaretAtEnd && focus.next.target) {
-			event.preventDefault();
-			deleteMark("next", store);
-			return;
-		}
-	}
-	if (focus.isSpan && focus.isEditable && window.getSelection()?.isCollapsed) {
-		const content = focus.content;
-		const caret = focus.caret;
-		if (event.key === KEYBOARD.BACKSPACE && caret > 0) {
-			event.preventDefault();
-			focus.content = content.slice(0, caret - 1) + content.slice(caret);
-			focus.caret = caret - 1;
-			store.value.change();
-			return;
-		}
-		if (event.key === KEYBOARD.DELETE && caret >= 0 && caret < content.length) {
-			event.preventDefault();
-			focus.content = content.slice(0, caret) + content.slice(caret + 1);
-			focus.caret = caret;
-			store.value.change();
-			return;
+	if (store.caret.selecting() === "all") store.caret.selecting(void 0);
+	const raw = store.dom.readRawSelection();
+	if (!raw.ok) return;
+	const range = rangeForDelete(store, event.key === KEYBOARD.BACKSPACE ? "deleteContentBackward" : "deleteContentForward", raw.value.range);
+	if (!range) return;
+	event.preventDefault();
+	store.value.replaceRange(range, "", {
+		source: "input",
+		recover: {
+			kind: "caret",
+			rawPosition: range.start
 		}
-	}
+	});
 }
 function handleBeforeInput(store, event) {
 	const selecting = store.caret.selecting();
@@ -3510,101 +3760,87 @@ function handleBeforeInput(store, event) {
 	}
 	if (selecting === "all") store.caret.selecting(void 0);
 	if (store.slots.isBlock()) return;
-	const { focus } = store.nodes;
-	if (!focus.target || !focus.isEditable) return;
-	if ((event.inputType === "insertFromPaste" || event.inputType === "insertReplacementText") && handleMarkputSpanPaste(store, focus, event)) return;
-	if (applySpanInput(focus, event)) store.value.change();
-}
-function handleMarkputSpanPaste(store, focus, event) {
-	const container = store.slots.container();
-	if (!container) return false;
-	const markup = consumeMarkupPaste(container);
-	if (!markup) return false;
+	const raw = rawRangeFromInputEvent(store, event);
+	if (!raw.ok) return;
+	const replacement = replacementForInput(store, event);
+	if (replacement === void 0) return;
+	const range = rangeForInput(store, event, raw.value.range);
+	if (!range) return;
 	event.preventDefault();
-	const token = store.parsing.tokens()[focus.index];
-	const offset = focus.caret;
-	const currentValue = store.value.current();
-	const ranges = event.getTargetRanges();
-	const childElement = container.children[focus.index];
-	let rawInsertPos;
-	let rawEndPos;
-	if (ranges.length > 0) {
-		const cumStart = getBoundaryOffset(ranges[0], childElement, true);
-		const cumEnd = getBoundaryOffset(ranges[0], childElement, false);
-		rawInsertPos = token.position.start + cumStart;
-		rawEndPos = token.position.start + cumEnd;
-	} else {
-		rawInsertPos = token.position.start + offset;
-		rawEndPos = token.position.start + offset;
-	}
-	const caretPos = rawInsertPos + markup.length;
-	const newValue = currentValue.slice(0, rawInsertPos) + markup + currentValue.slice(rawEndPos);
-	store.value.next(newValue);
-	const newTokens = store.parsing.tokens();
-	let targetIdx = newTokens.findIndex((t) => t.type === "text" && caretPos >= t.position.start && caretPos <= t.position.end);
-	if (targetIdx === -1) targetIdx = newTokens.length - 1;
-	const caretWithinToken = caretPos - newTokens[targetIdx].position.start;
-	store.caret.recovery({
-		anchor: store.nodes.focus,
-		caret: caretWithinToken,
-		isNext: true,
-		childIndex: targetIdx - 2
+	store.value.replaceRange(range, replacement, {
+		source: "input",
+		recover: {
+			kind: "caret",
+			rawPosition: range.start + replacement.length
+		}
 	});
-	return true;
 }
-function applySpanInput(focus, event) {
-	const offset = focus.caret;
-	const content = focus.content;
-	let newContent;
-	let newCaret;
-	switch (event.inputType) {
-		case "insertText": {
-			event.preventDefault();
-			const data = event.data ?? "";
-			newContent = content.slice(0, offset) + data + content.slice(offset);
-			newCaret = offset + data.length;
-			break;
-		}
-		case "deleteContentBackward":
-		case "deleteContentForward":
-		case "deleteWordBackward":
-		case "deleteWordForward":
-		case "deleteSoftLineBackward":
-		case "deleteSoftLineForward": {
-			const ranges = event.getTargetRanges();
-			let startOffset;
-			let endOffset;
-			if (ranges.length > 0 && ranges[0].startOffset !== ranges[0].endOffset) {
-				startOffset = ranges[0].startOffset;
-				endOffset = ranges[0].endOffset;
-			} else if (event.inputType === "deleteContentBackward" && offset > 0) {
-				startOffset = offset - 1;
-				endOffset = offset;
-			} else if (event.inputType === "deleteContentForward" && offset < content.length) {
-				startOffset = offset;
-				endOffset = offset + 1;
-			} else return false;
-			event.preventDefault();
-			newContent = content.slice(0, startOffset) + content.slice(endOffset);
-			newCaret = startOffset;
-			break;
-		}
-		case "insertFromPaste":
-		case "insertReplacementText": {
-			const text = event.dataTransfer?.getData("text/plain") ?? "";
-			const ranges = event.getTargetRanges();
-			const start = ranges[0]?.startOffset ?? offset;
-			const end = ranges[0]?.endOffset ?? offset;
-			event.preventDefault();
-			newContent = content.slice(0, start) + text + content.slice(end);
-			newCaret = start + text.length;
-			break;
-		}
-		default: return false;
+function rawRangeFromInputEvent(store, event) {
+	const ranges = getTargetRanges(event);
+	if (ranges.length === 0) return store.dom.readRawSelection();
+	return rawRangeFromTargetRange(store, ranges[0]);
+}
+function rawRangeFromTargetRange(store, range) {
+	const start = store.dom.rawPositionFromBoundary(range.startContainer, range.startOffset, "after");
+	const end = store.dom.rawPositionFromBoundary(range.endContainer, range.endOffset, "before");
+	if (!start.ok) return {
+		ok: false,
+		reason: rawSelectionReason(start)
+	};
+	if (!end.ok) return {
+		ok: false,
+		reason: rawSelectionReason(end)
+	};
+	return {
+		ok: true,
+		value: { range: start.value <= end.value ? {
+			start: start.value,
+			end: end.value
+		} : {
+			start: end.value,
+			end: start.value
+		} }
+	};
+}
+function rawSelectionReason(result) {
+	if (result.ok) return "invalidBoundary";
+	if (result.reason === "composing") return "invalidBoundary";
+	return result.reason;
+}
+function getTargetRanges(event) {
+	return event.getTargetRanges();
+}
+function replacementForInput(store, event) {
+	if (event.inputType.startsWith("delete")) return "";
+	if (event.inputType === "insertFromPaste" || event.inputType === "insertReplacementText") {
+		const container = store.dom.container();
+		return (container ? consumeMarkupPaste(container) : void 0) ?? event.dataTransfer?.getData("text/plain") ?? event.data ?? "";
+	}
+	if (event.inputType === "insertText") return event.data ?? "";
+}
+function rangeForInput(store, event, range) {
+	if (!event.inputType.startsWith("delete")) return range;
+	return rangeForDelete(store, event.inputType, range);
+}
+function rangeForDelete(store, inputType, range) {
+	if (range.start !== range.end) return range;
+	const adjacentMark = adjacentMarkRange(store.parsing.tokens(), range.start, inputType.endsWith("Backward"));
+	if (adjacentMark) return adjacentMark;
+	if (inputType.endsWith("Backward") && range.start > 0) return {
+		start: range.start - 1,
+		end: range.start
+	};
+	if (inputType.endsWith("Forward") && range.end < store.value.current().length) return {
+		start: range.start,
+		end: range.end + 1
+	};
+}
+function adjacentMarkRange(tokens, position, backward) {
+	for (const token of tokens) {
+		const nested = token.type === "mark" ? adjacentMarkRange(token.children, position, backward) : void 0;
+		if (nested) return nested;
+		if (token.type === "mark" && (backward ? token.position.end === position : token.position.start === position)) return token.position;
 	}
-	focus.content = newContent;
-	focus.caret = newCaret;
-	return true;
 }
 function handlePaste(store, event) {
 	const selecting = store.caret.selecting();
@@ -3613,31 +3849,16 @@ function handlePaste(store, event) {
 		return;
 	}
 	event.preventDefault();
-	const c = store.slots.container();
+	const c = store.dom.container();
 	replaceAllContentWith(store, (c ? consumeMarkupPaste(c) : void 0) ?? event.clipboardData?.getData("text/plain") ?? "");
 }
 function replaceAllContentWith(store, newContent) {
-	store.nodes.focus.target = null;
 	store.caret.selecting(void 0);
-	store.value.last(newContent);
-	store.props.onChange()?.(newContent);
-	if (store.props.value() === void 0) store.parsing.tokens(store.parsing.parser()?.parse(newContent) ?? [{
-		type: "text",
-		content: newContent,
-		position: {
-			start: 0,
-			end: newContent.length
-		}
-	}]);
-	queueMicrotask(() => {
-		const rawFirstChild = store.slots.container()?.firstChild;
-		const firstChild = isHtmlElement(rawFirstChild) ? rawFirstChild : null;
-		if (firstChild) {
-			store.caret.recovery({
-				anchor: store.nodes.focus,
-				caret: newContent.length
-			});
-			firstChild.focus();
+	store.value.replaceAll(newContent, {
+		source: "input",
+		recover: {
+			kind: "caret",
+			rawPosition: newContent.length
 		}
 	});
 }
@@ -3664,8 +3885,7 @@ var KeyboardFeature = class {
 //#endregion
 //#region ../../core/src/features/lifecycle/LifecycleFeature.ts
 var LifecycleFeature = class {
-	constructor(_store) {
-		this._store = _store;
+	constructor() {
 		this.mounted = event();
 		this.unmounted = event();
 		this.rendered = event();
@@ -3674,70 +3894,80 @@ var LifecycleFeature = class {
 	disable() {}
 };
 //#endregion
-//#region ../../core/src/features/mark/MarkHandler.ts
-var MarkHandler = class {
-	#store;
-	#token;
-	#readOnly;
-	constructor(param) {
-		this.change = (props) => {
-			this.#token.content = props.content;
-			this.#token.value = props.value ?? "";
-			if (props.meta !== void 0) this.#token.meta = props.meta;
-			this.#emitChange();
-		};
-		this.remove = () => this.#store.mark.remove({ token: this.#token });
-		this.ref = param.ref;
-		this.#store = param.store;
-		this.#token = param.token;
-	}
-	get readOnly() {
-		return this.#readOnly;
-	}
-	set readOnly(value) {
-		this.#readOnly = value;
-	}
-	get content() {
-		return this.#token.content;
-	}
-	set content(value) {
-		this.#token.content = value;
-		this.#emitChange();
+//#region ../../core/src/features/mark/MarkController.ts
+var MarkController = class MarkController {
+	#shape;
+	constructor(store, address, snapshot, shape) {
+		this.store = store;
+		this.address = address;
+		this.snapshot = snapshot;
+		this.#shape = shape;
+	}
+	static fromToken(store, token) {
+		const index = store.parsing.index();
+		const path = index.pathFor(token);
+		if (!path) throw new Error("Cannot create MarkController for unindexed token");
+		const address = index.addressFor(path);
+		if (!address) throw new Error("Cannot create MarkController for unresolved token path");
+		return new MarkController(store, address, {
+			value: token.value,
+			meta: token.meta,
+			slot: token.slot?.content,
+			readOnly: store.props.readOnly()
+		}, snapshotTokenShape(token));
 	}
 	get value() {
-		return this.#token.value;
-	}
-	set value(v) {
-		this.#token.value = v ?? "";
-		this.#emitChange();
+		return this.snapshot.value;
 	}
 	get meta() {
-		return this.#token.meta;
-	}
-	set meta(v) {
-		this.#token.meta = v;
-		this.#emitChange();
+		return this.snapshot.meta;
 	}
 	get slot() {
-		return this.#token.slot?.content;
-	}
-	get #tokenInfo() {
-		return findToken(this.#store.parsing.tokens(), this.#token);
-	}
-	get depth() {
-		return this.#tokenInfo?.depth ?? 0;
+		return this.snapshot.slot;
 	}
-	get hasChildren() {
-		return this.#token.children.some((child) => child.type === "mark");
-	}
-	get parent() {
-		return this.#tokenInfo?.parent;
+	get readOnly() {
+		return this.snapshot.readOnly;
+	}
+	remove() {
+		const resolved = this.#resolve();
+		if (!resolved.ok) return resolved;
+		return this.store.value.replaceRange(resolved.value.position, "", { source: "mark" });
+	}
+	update(patch) {
+		const resolved = this.#resolve();
+		if (!resolved.ok) return resolved;
+		const token = resolved.value;
+		const value = patch.value ?? token.value;
+		const meta = patch.meta?.kind === "clear" ? void 0 : patch.meta?.kind === "set" ? patch.meta.value : token.meta;
+		const slot = patch.slot?.kind === "clear" ? void 0 : patch.slot?.kind === "set" ? patch.slot.value : token.slot?.content;
+		const serialized = this.#serialize(token, {
+			value,
+			meta,
+			slot
+		});
+		return this.store.value.replaceRange(token.position, serialized, { source: "mark" });
 	}
-	get tokens() {
-		return this.#token.children;
+	#serialize(token, fields) {
+		return annotate(token.descriptor.markup, {
+			value: fields.value,
+			meta: token.descriptor.gapTypes.includes("meta") ? fields.meta ?? "" : void 0,
+			slot: token.descriptor.hasSlot ? fields.slot ?? "" : void 0
+		});
 	}
-	#emitChange() {
-		this.#store.value.change();
+	#resolve() {
+		if (this.store.props.readOnly()) return {
+			ok: false,
+			reason: "readOnly"
+		};
+		const resolved = this.store.parsing.index().resolveAddress(this.address, this.#shape);
+		if (!resolved.ok || resolved.value.type !== "mark") return {
+			ok: false,
+			reason: "stale"
+		};
+		return {
+			ok: true,
+			value: resolved.value
+		};
 	}
 };
 //#endregion
@@ -3822,7 +4052,6 @@ function buildContainerProps(isDraggableBlock, readOnly, className, style, slotP
 var SlotsFeature = class {
 	constructor(_store) {
 		this._store = _store;
-		this.container = signal(null);
 		this.isBlock = computed(() => this._store.props.layout() === "block");
 		this.isDraggable = computed(() => !!this._store.props.draggable());
 		this.containerComponent = computed(() => resolveSlot("container", this._store.props.slots()));
@@ -3838,7 +4067,6 @@ var SlotsFeature = class {
 //#endregion
 //#region ../../core/src/features/mark/MarkFeature.ts
 var MarkFeature = class {
-	#scope;
 	constructor(_store) {
 		this._store = _store;
 		this.enabled = computed(() => {
@@ -3851,25 +4079,9 @@ var MarkFeature = class {
 			const Span = this._store.props.Span();
 			return (token) => resolveMarkSlot(token, options, Mark, Span);
 		});
-		this.remove = event();
-	}
-	enable() {
-		if (this.#scope) return;
-		this.#scope = effectScope(() => {
-			watch(this.remove, (payload) => {
-				const { token } = payload;
-				const tokens = this._store.parsing.tokens();
-				if (!findToken(tokens, token)) return;
-				const value = toString(tokens);
-				const nextValue = value.slice(0, token.position.start) + value.slice(token.position.end);
-				this._store.value.next(nextValue);
-			});
-		});
-	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
 	}
+	enable() {}
+	disable() {}
 };
 //#endregion
 //#region ../../core/src/features/overlay/filterSuggestions.ts
@@ -3888,8 +4100,8 @@ function createMarkFromOverlay(match, value, meta) {
 		meta,
 		content: "",
 		position: {
-			start: match.index,
-			end: match.index + match.span.length
+			start: match.range.start,
+			end: match.range.end
 		},
 		descriptor: {
 			markup,
@@ -3920,9 +4132,37 @@ var OverlayFeature = class {
 		this.close = event();
 	}
 	#probeTrigger() {
-		const match = TriggerFinder.find(this._store.props.options(), (option) => option.overlay?.trigger);
+		const match = TriggerFinder.find(this._store.props.options(), (option) => option.overlay?.trigger, this._store) ?? this.#probeTriggerFromRecovery();
 		this.match(match);
 	}
+	#probeTriggerFromRecovery() {
+		const recovery = this._store.caret.recovery();
+		if (recovery?.kind !== "caret") return;
+		const value = this._store.value.current();
+		const cursor = recovery.rawPosition;
+		const left = value.slice(0, cursor);
+		const rightWord = value.slice(cursor).match(/^\w*/)?.[0] ?? "";
+		for (const option of this._store.props.options()) {
+			const trigger = option.overlay?.trigger;
+			if (!trigger) continue;
+			const match = left.match(new RegExp(`${escape(trigger)}(\\w*)$`));
+			if (!match) continue;
+			const [sourceLeft, wordLeft] = match;
+			const source = sourceLeft + rightWord;
+			const start = cursor - sourceLeft.length;
+			return {
+				value: wordLeft + rightWord,
+				source,
+				range: {
+					start,
+					end: start + source.length
+				},
+				span: value,
+				node: window.getSelection()?.anchorNode ?? this._store.dom.container() ?? document.body,
+				option
+			};
+		}
+	}
 	enable() {
 		if (this.#scope) return;
 		this.#scope = effectScope(() => {
@@ -3936,55 +4176,40 @@ var OverlayFeature = class {
 			});
 			alienEffect(() => {
 				if (this.match()) {
-					this._store.nodes.input.target = this._store.nodes.focus.target;
 					listen(window, "keydown", (e) => {
 						if (e.key === KEYBOARD.ESC) this.close();
 					});
 					listen(document, "click", (e) => {
 						const target = e.target instanceof HTMLElement ? e.target : null;
 						if (this.element()?.contains(target)) return;
-						if (this._store.slots.container()?.contains(target)) return;
+						if (this._store.dom.container()?.contains(target)) return;
 						this.close();
 					}, true);
 				}
 			});
 			const selectionChangeHandler = () => {
-				if (!this._store.slots.container()?.contains(document.activeElement)) return;
+				if (!this._store.dom.container()?.contains(document.activeElement)) return;
 				const showOverlayOn = this._store.props.showOverlayOn();
 				const type = "selectionChange";
 				if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.#probeTrigger();
 			};
 			listen(document, "selectionchange", selectionChangeHandler);
 			watch(this.select, (overlayEvent) => {
-				const Mark = this._store.props.Mark();
-				const onChange = this._store.props.onChange();
-				const { mark, match: { option, span, index, source } } = overlayEvent;
+				const { mark, match: { option, range } } = overlayEvent;
 				const markup = option.markup;
 				if (!markup) return;
 				const annotation = mark.type === "mark" ? annotate(markup, {
 					value: mark.value,
 					meta: mark.meta
 				}) : annotate(markup, { value: mark.content });
-				const newSpan = createNewSpan(span, annotation, index, source);
-				this._store.caret.recovery(Mark ? {
-					caret: 0,
-					anchor: this._store.nodes.input.next,
-					isNext: true,
-					childIndex: this._store.nodes.input.index
-				} : {
-					caret: index + annotation.length,
-					anchor: this._store.nodes.input
+				this._store.value.replaceRange(range, annotation, {
+					source: "overlay",
+					recover: {
+						kind: "caret",
+						rawPosition: range.start + annotation.length
+					}
 				});
-				if (this._store.nodes.input.target) {
-					this._store.nodes.input.content = newSpan;
-					const tokens = this._store.parsing.tokens();
-					const inputToken = tokens[this._store.nodes.input.index];
-					if (inputToken.type === "text") inputToken.content = newSpan;
-					this._store.nodes.focus.target = this._store.nodes.input.target;
-					this._store.nodes.input.clear();
-					onChange?.(toString(tokens));
-					this._store.parsing.reparse();
-				}
+				this.match(void 0);
 			});
 		});
 	}
@@ -4057,45 +4282,47 @@ var PropsFeature = class {
 	}
 };
 //#endregion
+//#region ../../core/src/features/value/ControlledEcho.ts
+var ControlledEcho = class {
+	#pending;
+	propose(candidate, recovery) {
+		this.#pending = {
+			candidate,
+			recovery
+		};
+	}
+	onEcho(value) {
+		const pending = this.#pending;
+		if (!pending) return void 0;
+		this.#pending = void 0;
+		return pending.candidate === value ? pending.recovery : void 0;
+	}
+	supersede() {
+		this.#pending = void 0;
+	}
+};
+//#endregion
 //#region ../../core/src/features/value/ValueFeature.ts
 var ValueFeature = class {
+	#controlledEcho = new ControlledEcho();
 	#scope;
 	constructor(_store) {
 		this._store = _store;
-		this.last = signal(void 0);
-		this.next = signal(void 0);
-		this.current = computed(() => this.last() ?? this._store.props.value() ?? "");
+		this.current = signal("");
+		this.isControlledMode = computed(() => this._store.props.value() !== void 0);
 		this.change = event();
 	}
 	enable() {
 		if (this.#scope) return;
+		this.#commitAccepted(this._store.props.value() ?? this._store.props.defaultValue() ?? "");
 		this.#scope = effectScope(() => {
-			watch(this.change, () => {
-				const onChange = this._store.props.onChange();
-				const { focus } = this._store.nodes;
-				if (!focus.target || !focus.target.isContentEditable) {
-					const serialized = toString(this._store.parsing.tokens());
-					onChange?.(serialized);
-					this.last(serialized);
-					trigger(this._store.parsing.tokens);
-					return;
-				}
-				const tokens = this._store.parsing.tokens();
-				if (focus.index >= tokens.length) return;
-				const token = tokens[focus.index];
-				if (token.type === "text") token.content = focus.content;
-				else token.value = focus.content;
-				onChange?.(toString(tokens));
-				this._store.parsing.reparse();
-			});
-			watch(this.next, (newValue) => {
-				if (newValue === void 0) return;
-				const newTokens = parseWithParser(this._store, newValue);
-				batch(() => {
-					this._store.parsing.tokens(newTokens);
-					this.last(newValue);
-				});
-				this._store.props.onChange()?.(newValue);
+			watch(this._store.props.value, (value) => {
+				if (value === void 0) return;
+				if (value === this.current()) return;
+				const recovery = this.#controlledEcho.onEcho(value);
+				this.#commitAccepted(value);
+				if (recovery) this._store.caret.recovery(recovery);
+				this.change();
 			});
 		});
 	}
@@ -4103,6 +4330,52 @@ var ValueFeature = class {
 		this.#scope?.();
 		this.#scope = void 0;
 	}
+	replaceRange(range, replacement, options) {
+		const current = this.current();
+		if (this._store.props.readOnly()) return {
+			ok: false,
+			reason: "readOnly"
+		};
+		if (range.start < 0 || range.end < range.start || range.end > current.length) return {
+			ok: false,
+			reason: "invalidRange"
+		};
+		const candidate = current.slice(0, range.start) + replacement + current.slice(range.end);
+		return this.#commitCandidate(candidate, options?.recover);
+	}
+	replaceAll(next, options) {
+		return this.replaceRange({
+			start: 0,
+			end: this.current().length
+		}, next, options);
+	}
+	#commitCandidate(candidate, recovery) {
+		if (this.isControlledMode()) {
+			this.#controlledEcho.propose(candidate, recovery);
+			this._store.props.onChange()?.(candidate);
+			return {
+				ok: true,
+				accepted: "pendingControlledEcho",
+				value: candidate
+			};
+		}
+		this._store.props.onChange()?.(candidate);
+		this.#commitAccepted(candidate);
+		this._store.caret.recovery(recovery);
+		this.change();
+		return {
+			ok: true,
+			accepted: "immediate",
+			value: candidate
+		};
+	}
+	#commitAccepted(value) {
+		const tokens = this._store.parsing.parseValue(value);
+		batch(() => {
+			this._store.parsing.acceptTokens(tokens);
+			this.current(value);
+		});
+	}
 };
 //#endregion
 //#region ../../core/src/shared/utils/menuUtils.ts
@@ -4281,13 +4554,9 @@ var Store = class {
 	constructor() {
 		this.key = new KeyGenerator();
 		this.blocks = new BlockRegistry();
-		this.nodes = {
-			focus: new NodeProxy(void 0, this),
-			input: new NodeProxy(void 0, this)
-		};
 		this.props = new PropsFeature(this);
 		this.handler = new MarkputHandler(this);
-		this.lifecycle = new LifecycleFeature(this);
+		this.lifecycle = new LifecycleFeature();
 		this.value = new ValueFeature(this);
 		this.mark = new MarkFeature(this);
 		this.overlay = new OverlayFeature(this);
@@ -4379,14 +4648,24 @@ const Popup = ({ ref, style, children }) => {
 //#endregion
 //#region src/components/BlockMenu.tsx
 const BlockMenu = memo(({ token }) => {
-	const { blockStore, menuOpen, menuPosition } = useMarkput((s) => ({
-		blockStore: s.blocks.get(token),
-		menuOpen: s.blocks.get(token).state.menuOpen,
-		menuPosition: s.blocks.get(token).state.menuPosition
-	}));
+	const { blockStore, menuOpen, menuPosition, dom, index } = useMarkput((s) => {
+		const blockStore = s.blocks.get(token);
+		return {
+			blockStore,
+			menuOpen: blockStore.state.menuOpen,
+			menuPosition: blockStore.state.menuPosition,
+			dom: s.dom,
+			index: s.parsing.index
+		};
+	});
+	const path = index.pathFor(token);
+	const controlRef = useMemo(() => path ? dom.controlFor(path) : void 0, [dom, path]);
 	if (!menuOpen) return null;
 	return /* @__PURE__ */ jsx(Popup, {
-		ref: (el) => blockStore.attachMenu(el),
+		ref: (el) => {
+			blockStore.attachMenu(el);
+			controlRef?.(el);
+		},
 		style: {
 			top: menuPosition.top,
 			left: menuPosition.left
@@ -4412,20 +4691,30 @@ BlockMenu.displayName = "BlockMenu";
 //#region src/components/DragHandle.tsx
 const iconGrip = `${styles$1.Icon} ${styles$1.IconGrip}`;
 const DragHandle = memo(({ token, blockIndex }) => {
-	const { blockStore, action, readOnly, draggable, isDragging, isHovered } = useMarkput((s) => ({
-		blockStore: s.blocks.get(token),
-		action: s.drag.action,
-		readOnly: s.props.readOnly,
-		draggable: s.props.draggable,
-		isDragging: s.blocks.get(token).state.isDragging,
-		isHovered: s.blocks.get(token).state.isHovered
-	}));
+	const { blockStore, action, readOnly, draggable, isDragging, isHovered, dom, index } = useMarkput((s) => {
+		const blockStore = s.blocks.get(token);
+		return {
+			blockStore,
+			action: s.drag.action,
+			readOnly: s.props.readOnly,
+			draggable: s.props.draggable,
+			isDragging: blockStore.state.isDragging,
+			isHovered: blockStore.state.isHovered,
+			dom: s.dom,
+			index: s.parsing.index
+		};
+	});
 	const alwaysShowHandle = useMemo(() => getAlwaysShowHandle(draggable), [draggable]);
+	const path = index.pathFor(token);
+	const controlRef = useMemo(() => path ? dom.controlFor(path) : void 0, [dom, path]);
 	if (readOnly) return null;
 	return /* @__PURE__ */ jsx("div", {
+		ref: controlRef,
 		className: cx(styles$1.SidePanel, alwaysShowHandle ? styles$1.SidePanelAlways : isHovered && !isDragging && styles$1.SidePanelVisible),
 		children: /* @__PURE__ */ jsx("button", {
-			ref: (el) => blockStore.attachGrip(el, blockIndex, { action }),
+			ref: (el) => {
+				blockStore.attachGrip(el, blockIndex, { action });
+			},
 			type: "button",
 			draggable: true,
 			className: cx(styles$1.GripButton, isDragging && styles$1.GripButtonDragging),
@@ -4438,8 +4727,16 @@ DragHandle.displayName = "DragHandle";
 //#endregion
 //#region src/components/DropIndicator.tsx
 const DropIndicator = memo(({ token, position }) => {
-	if (useMarkput((s) => s.blocks.get(token).state.dropPosition) !== position) return null;
+	const dropPosition = useMarkput((s) => s.blocks.get(token).state.dropPosition);
+	const { dom, index } = useMarkput((s) => ({
+		dom: s.dom,
+		index: s.parsing.index
+	}));
+	const path = index.pathFor(token);
+	const controlRef = useMemo(() => path ? dom.controlFor(path) : void 0, [dom, path]);
+	if (dropPosition !== position) return null;
 	return /* @__PURE__ */ jsx("div", {
+		ref: controlRef,
 		className: styles$1.DropIndicator,
 		style: position === "before" ? { top: -1 } : { bottom: -1 }
 	});
@@ -4449,25 +4746,50 @@ DropIndicator.displayName = "DropIndicator";
 //#region src/lib/providers/TokenContext.ts
 const TokenContext = createContext(void 0);
 TokenContext.displayName = "TokenProvider";
-function useToken() {
+function useTokenContext() {
 	const value = useContext(TokenContext);
 	if (value === void 0) throw new Error("Token not found. Make sure to wrap component in TokenContext.Provider.");
 	return value;
 }
 //#endregion
+//#region src/components/TokenChildren.tsx
+const sequenceHostStyle = { display: "contents" };
+const TokenChildren = memo(({ ownerPath, children }) => {
+	const { dom } = useMarkput((s) => ({ dom: s.dom }));
+	return /* @__PURE__ */ jsx("span", {
+		ref: useMemo(() => dom.childrenFor(ownerPath), [dom, ownerPath]),
+		style: sequenceHostStyle,
+		children
+	});
+});
+TokenChildren.displayName = "TokenChildren";
+//#endregion
 //#region src/components/Token.tsx
-const Token = memo(({ mark }) => {
-	const { resolveMarkSlot, key } = useMarkput((s) => ({
+const Token = memo(({ token }) => {
+	const { resolveMarkSlot, key, index, store } = useMarkput((s) => ({
 		resolveMarkSlot: s.mark.slot,
-		key: s.key
+		key: s.key,
+		index: s.parsing.index,
+		store: s
 	}));
-	const [Component, props] = resolveMarkSlot(mark);
+	const path = index.pathFor(token);
+	const address = path ? index.addressFor(path) : void 0;
+	if (!path || !address) return null;
+	const [Component, props] = resolveMarkSlot(token);
+	const children = token.type === "mark" && token.children.length > 0 ? /* @__PURE__ */ jsx(TokenChildren, {
+		ownerPath: path,
+		children: token.children.map((child) => /* @__PURE__ */ jsx(Token, { token: child }, key.get(child)))
+	}) : void 0;
 	return /* @__PURE__ */ jsx(TokenContext, {
-		value: mark,
-		children: /* @__PURE__ */ jsx(Component, {
-			children: mark.type === "mark" && mark.children.length > 0 ? mark.children.map((child) => /* @__PURE__ */ jsx(Token, { mark: child }, key.get(child))) : void 0,
-			...props
-		})
+		value: {
+			store,
+			token,
+			address
+		},
+		children: children ? /* @__PURE__ */ jsx(Component, {
+			...props,
+			children
+		}) : /* @__PURE__ */ jsx(Component, { ...props })
 	});
 });
 Token.displayName = "Token";
@@ -4483,8 +4805,11 @@ const Block = memo(({ token }) => {
 		tokens: s.parsing.tokens
 	}));
 	const blockIndex = tokens.indexOf(token);
+	const setBlockRef = (el) => {
+		blockStore.attachContainer(el, blockIndex, { action });
+	};
 	return /* @__PURE__ */ jsxs(Component, {
-		ref: (el) => blockStore.attachContainer(el, blockIndex, { action }),
+		ref: setBlockRef,
 		"data-testid": "block",
 		...slotProps,
 		className: cx(styles$1.Block, slotProps?.className),
@@ -4501,7 +4826,7 @@ const Block = memo(({ token }) => {
 				token,
 				blockIndex
 			}),
-			/* @__PURE__ */ jsx(Token, { mark: token }),
+			/* @__PURE__ */ jsx(Token, { token }),
 			/* @__PURE__ */ jsx(DropIndicator, {
 				token,
 				position: "after"
@@ -4514,38 +4839,32 @@ Block.displayName = "Block";
 //#endregion
 //#region src/components/Container.tsx
 const Container = memo(() => {
-	const storeCtx = useContext(StoreContext);
-	if (!storeCtx) throw new Error("Store not found");
-	const store = storeCtx;
-	const { isBlock, tokens, key, lifecycleEmit, Component, props } = useMarkput((s) => ({
+	const { dom, lifecycle, isBlock, tokens, key, Component, props } = useMarkput((s) => ({
+		dom: s.dom,
+		lifecycle: s.lifecycle,
 		isBlock: s.slots.isBlock,
 		tokens: s.parsing.tokens,
 		key: s.key,
-		lifecycleEmit: s.lifecycle,
 		Component: s.slots.containerComponent,
 		props: s.slots.containerProps
 	}));
 	useLayoutEffect(() => {
-		lifecycleEmit.rendered();
-	}, [tokens, lifecycleEmit]);
+		lifecycle.rendered();
+	});
 	return /* @__PURE__ */ jsx(Component, {
-		ref: store.slots.container,
+		ref: dom.container,
 		...props,
-		children: isBlock ? tokens.map((t) => /* @__PURE__ */ jsx(Block, { token: t }, key.get(t))) : tokens.map((t) => /* @__PURE__ */ jsx(Token, { mark: t }, key.get(t)))
+		children: isBlock ? tokens.map((t) => /* @__PURE__ */ jsx(Block, { token: t }, key.get(t))) : tokens.map((t) => /* @__PURE__ */ jsx(Token, { token: t }, key.get(t)))
 	});
 });
 Container.displayName = "Container";
 //#endregion
 //#region src/lib/hooks/useOverlay.tsx
 function useOverlay() {
-	const match = useMarkput((s) => s.overlay.match);
-	const storeRef = useRef(null);
-	if (storeRef.current === null) {
-		const ctx = useContext(StoreContext);
-		if (!ctx) throw new Error("Store not found");
-		storeRef.current = ctx;
-	}
-	const store = storeRef.current;
+	const { match, overlay } = useMarkput((s) => ({
+		match: s.overlay.match,
+		overlay: s.overlay
+	}));
 	const style = useMemo(() => {
 		if (!match) return {
 			left: 0,
@@ -4553,36 +4872,34 @@ function useOverlay() {
 		};
 		return Caret.getAbsolutePosition();
 	}, [match]);
-	const close = useCallback(() => store.overlay.close(), [store]);
+	const close = useCallback(() => overlay.close(), [overlay]);
 	return {
 		match,
 		style,
 		select: useCallback((value) => {
 			if (!match) return;
 			const mark = createMarkFromOverlay(match, value.value, value.meta);
-			store.overlay.select({
+			overlay.select({
 				mark,
 				match
 			});
-			store.overlay.close();
-		}, [match, store]),
+			overlay.close();
+		}, [match, overlay]),
 		close,
 		ref: useMemo(() => ({
 			get current() {
-				return store.overlay.element();
+				return overlay.element();
 			},
 			set current(v) {
-				store.overlay.element(v);
+				overlay.element(v);
 			}
-		}), [store])
+		}), [overlay])
 	};
 }
 //#endregion
 //#region src/components/Suggestions/Suggestions.tsx
 const Suggestions = () => {
-	const storeCtx = useContext(StoreContext);
-	if (!storeCtx) throw new Error("Store not found");
-	const store = storeCtx;
+	const container = useMarkput((s) => s.dom.container);
 	const { match, select, style, ref } = useOverlay();
 	const [active, setActive] = useState(NaN);
 	const data = match?.option.overlay?.data ?? [];
@@ -4593,7 +4910,6 @@ const Suggestions = () => {
 	const filteredRef = useRef(filtered);
 	filteredRef.current = filtered;
 	useEffect(() => {
-		const container = store.slots.container();
 		if (!container) return;
 		const handler = (event) => {
 			const result = navigateSuggestions(event.key, activeRef.current, length);
@@ -4617,7 +4933,11 @@ const Suggestions = () => {
 		};
 		container.addEventListener("keydown", handler);
 		return () => container.removeEventListener("keydown", handler);
-	}, [length, select]);
+	}, [
+		container,
+		length,
+		select
+	]);
 	if (!filtered.length) return null;
 	return /* @__PURE__ */ jsx(Popup, {
 		ref,
@@ -4649,8 +4969,14 @@ OverlayRenderer.displayName = "OverlayRenderer";
 //#endregion
 //#region src/components/MarkedInput.tsx
 function MarkedInput(props) {
-	const [store] = useState(() => new Store());
-	store.props.set(props);
+	const [store] = useState(() => {
+		const nextStore = new Store();
+		nextStore.props.set(props);
+		return nextStore;
+	});
+	useLayoutEffect(() => {
+		store.props.set(props);
+	});
 	useLayoutEffect(() => {
 		store.lifecycle.mounted();
 		return () => store.lifecycle.unmounted();
@@ -4663,31 +4989,34 @@ function MarkedInput(props) {
 }
 //#endregion
 //#region src/lib/hooks/useMark.tsx
-const useMark = (options = {}) => {
-	const { store, readOnly } = useMarkput((s) => ({
-		store: s,
-		readOnly: s.props.readOnly
-	}));
-	const token = useToken();
+const useMark = () => {
+	const { store, token } = useTokenContext();
+	const readOnly = useMarkput((s) => s.props.readOnly);
 	if (token.type !== "mark") throw new Error("useMark must be called within a mark token context");
-	const ref = useRef(null);
-	const mark = useMemo(() => new MarkHandler({
-		ref,
+	return useMemo(() => MarkController.fromToken(store, token), [
 		store,
-		token
-	}), [store, token]);
-	useUncontrolledInit(ref, options, token);
-	useEffect(() => {
-		mark.readOnly = readOnly;
-	}, [mark, readOnly]);
-	return mark;
+		token,
+		readOnly
+	]);
+};
+//#endregion
+//#region src/lib/hooks/useMarkInfo.tsx
+const useMarkInfo = () => {
+	const { store, token } = useTokenContext();
+	if (token.type !== "mark") throw new Error("useMarkInfo must be called within a mark token context");
+	const index = store.parsing.index();
+	const path = index.pathFor(token);
+	if (!path) throw new Error("Mark token is not indexed");
+	const address = index.addressFor(path);
+	if (!address) throw new Error("Mark token path is stale");
+	return {
+		address,
+		depth: findToken(store.parsing.tokens(), token)?.depth ?? 0,
+		hasNestedMarks: token.children.some((child) => child.type === "mark"),
+		key: index.key(path)
+	};
 };
-function useUncontrolledInit(ref, options, token) {
-	useEffect(() => {
-		if (!options.controlled && ref.current) ref.current.textContent = token.content;
-	}, []);
-}
 //#endregion
-export { MarkHandler, MarkedInput, MarkputHandler, annotate, denote, useMark, useMarkput, useOverlay };
+export { MarkController, MarkedInput, MarkputHandler, annotate, denote, useMark, useMarkInfo, useMarkput, useOverlay };
 
 //# sourceMappingURL=index.js.map