@markput/react 0.14.0 → 0.14.1

package/index.js

@@ -26,6 +26,12 @@ function merge(...objects) {
 	return Object.keys(result).length > 0 ? result : void 0;
 }
 //#endregion
+//#region ../../core/src/shared/utils/replaceInString.ts
+function replaceInString(current, range, replacement) {
+	if (range.start < 0 || range.end < range.start || range.end > current.length) return void 0;
+	return current.slice(0, range.start) + replacement + current.slice(range.end);
+}
+//#endregion
 //#region ../../core/src/shared/constants.ts
 const KEYBOARD = {
 	UP: "ArrowUp",
@@ -54,18 +60,20 @@ const DEFAULT_OPTIONS = [{
 //#endregion
 //#region ../../core/src/shared/classes/MarkputHandler.ts
 var MarkputHandler = class {
-	constructor(store) {
-		this.store = store;
+	constructor(dom, overlayFeature, parsing) {
+		this.dom = dom;
+		this.overlayFeature = overlayFeature;
+		this.parsing = parsing;
 	}
 	get container() {
-		return this.store.dom.container();
+		return this.dom.container();
 	}
 	get overlay() {
-		return this.store.overlay.element();
+		return this.overlayFeature.element();
 	}
 	focus() {
-		const firstAddress = this.store.parsing.index().addressFor([0]);
-		if (firstAddress && this.store.dom.focusAddress(firstAddress).ok) return;
+		const firstAddress = this.parsing.index().addressFor([0]);
+		if (firstAddress && this.dom.focusAddress(firstAddress).ok) return;
 		this.container?.focus();
 	}
 };
@@ -482,7 +490,8 @@ function signal(initial, opts) {
 	};
 	return signalOper.bind(node);
 }
-function computed(getter, opts) {
+function computed(getterOrOpts, opts) {
+	const isWritable = typeof getterOrOpts !== "function";
 	const node = {
 		value: void 0,
 		subs: void 0,
@@ -490,10 +499,19 @@ function computed(getter, opts) {
 		deps: void 0,
 		depsTail: void 0,
 		flags: ReactiveFlags.None,
-		getter,
-		equalsFn: opts?.equals ?? void 0
+		getter: isWritable ? getterOrOpts.get : getterOrOpts,
+		equalsFn: (isWritable ? getterOrOpts.equals : opts?.equals) ?? void 0
 	};
-	return computedOper.bind(node);
+	const readFn = computedOper.bind(node);
+	if (!isWritable) return readFn;
+	const writableComputed = function writableComputedOper(...args) {
+		if (args.length === 0) return readFn();
+		const next = args[0];
+		if (next === void 0) return;
+		getterOrOpts.set(next);
+	};
+	Object.defineProperty(writableComputed, "name", { value: "bound " + computedOper.name });
+	return writableComputed;
 }
 function event() {
 	const node = {
@@ -516,7 +534,7 @@ function event() {
 	callable.read = eventReadOper.bind(node);
 	return callable;
 }
-function alienEffect(fn) {
+function effect(fn) {
 	const e = {
 		fn,
 		cleanup: void 0,
@@ -557,7 +575,7 @@ function effectScope(fn) {
 function watch(dep, fn) {
 	let initialized = false;
 	let oldValue;
-	return alienEffect(() => {
+	return effect(() => {
 		const newValue = "read" in dep ? dep.read() : dep();
 		if (!initialized) {
 			initialized = true;
@@ -588,8 +606,26 @@ function untracked(fn) {
 		setActiveSub(prev);
 	}
 }
+function model(opts) {
+	let internal;
+	const ensureInternal = () => {
+		if (internal !== void 0) return internal;
+		internal = signal(opts.default !== void 0 ? untracked(opts.default) : void 0, { equals: opts.equals });
+		return internal;
+	};
+	const getFn = opts.get ?? ((value) => value);
+	const setFn = opts.set ?? ((next, previous) => next ?? previous);
+	const reader = computed(() => getFn(ensureInternal()()));
+	const callable = function modelOper(...args) {
+		if (args.length === 0) return reader();
+		const sig = ensureInternal();
+		sig(setFn(args[0], sig()));
+	};
+	Object.defineProperty(callable, "name", { value: "bound " + computedOper.name });
+	return callable;
+}
 function listen(target, event, handler, options) {
-	return alienEffect(() => {
+	return effect(() => {
 		target.addEventListener(event, handler, options);
 		return () => target.removeEventListener(event, handler, options);
 	});
@@ -1727,20 +1763,6 @@ function findToken(tokens, target, depth = 0, parent) {
 	}
 }
 //#endregion
-//#region ../../core/src/features/parsing/utils/valueParser.ts
-function parseWithParser(store, value) {
-	const parser = store.parsing.parser();
-	if (!parser) return [{
-		type: "text",
-		content: value,
-		position: {
-			start: 0,
-			end: value.length
-		}
-	}];
-	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]);
@@ -1813,24 +1835,41 @@ function createTokenIndex(tokens, generation) {
 	};
 }
 //#endregion
-//#region ../../core/src/features/parsing/ParseFeature.ts
-var ParsingFeature = class {
+//#region ../../core/src/features/parsing/ParseController.ts
+var ParseController = class {
 	#generation = signal(0);
 	#scope;
-	constructor(_store) {
-		this._store = _store;
+	constructor(lifecycle, value, mark, props, slots) {
+		this.lifecycle = lifecycle;
+		this.value = value;
+		this.mark = mark;
+		this.props = props;
+		this.slots = slots;
 		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);
+			if (!this.mark.enabled()) return;
+			const markups = this.props.options().map((opt) => opt.markup);
 			if (!markups.some(Boolean)) return;
-			return new Parser(markups, this._store.slots.isBlock() ? { skipEmptyText: true } : void 0);
+			return new Parser(markups, this.slots.isBlock() ? { skipEmptyText: true } : void 0);
 		});
 		this.reparse = event();
-	}
-	parseValue(value) {
-		return parseWithParser(this._store, value);
+		lifecycle.onMounted(() => {
+			this.acceptTokens(this.#parseValue(value.current()));
+			this.#subscribeValue();
+		});
+		const toggle = (enabled) => {
+			if (enabled && !this.#scope) this.#scope = effectScope(() => {
+				this.#subscribeReactiveParse();
+				this.#subscribeReparse();
+			});
+			if (!enabled && this.#scope) {
+				this.#scope();
+				this.#scope = void 0;
+			}
+		};
+		watch(this.mark.enabled, toggle);
+		toggle(this.mark.enabled());
 	}
 	acceptTokens(tokens) {
 		batch(() => {
@@ -1838,34 +1877,31 @@ var ParsingFeature = class {
 			this.#generation(this.#generation() + 1);
 		}, { mutable: true });
 	}
-	enable() {
-		if (this.#scope) return;
-		this.sync();
-		this.#scope = effectScope(() => {
-			this.#subscribeParse();
-			this.#subscribeReactiveParse();
-		});
-	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
-	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.acceptTokens(this.parseValue(text));
-				return;
+	#parseValue(value) {
+		const parser = this.parser();
+		if (!parser) return [{
+			type: "text",
+			content: value,
+			position: {
+				start: 0,
+				end: value.length
 			}
-			this.sync();
+		}];
+		return parser.parse(value);
+	}
+	#subscribeValue() {
+		watch(this.value.current, (v) => {
+			this.acceptTokens(this.#parseValue(v));
 		});
 	}
 	#subscribeReactiveParse() {
 		watch(computed(() => this.parser()), () => {
-			if (!this._store.caret.recovery()) this.sync(this._store.value.current());
+			this.acceptTokens(this.#parseValue(this.value.current()));
+		});
+	}
+	#subscribeReparse() {
+		watch(this.reparse, () => {
+			this.acceptTokens(this.#parseValue(this.value.current()));
 		});
 	}
 };
@@ -1896,304 +1932,144 @@ function nextText(walker) {
 	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);
+//#region ../../core/src/features/caret/CaretModel.ts
+var CaretModel = class {
+	constructor(lifecycle, dom, value) {
+		this.lifecycle = lifecycle;
+		this.dom = dom;
+		this.value = value;
+		this.selection = signal(void 0, { equals: shallow });
+		this.position = computed({
+			get: () => this.selection()?.start,
+			set: (value) => this.selection(value !== void 0 ? {
+				start: value,
+				end: value
+			} : void 0)
+		});
+		this.isUserSelecting = signal(false);
+		this.isAllSelected = computed(() => {
+			const s = this.selection();
+			const v = this.value.current();
+			return s?.start === 0 && s.end === v.length && v.length > 0;
+		});
+		lifecycle.onMounted(() => {
+			this.#enableFocusTracking();
+			this.#enableSelectionTracking();
+			watch(dom.indexed, () => {
+				dom.reconcile({ isUserSelecting: this.isUserSelecting() });
+				this.#applyRangeToDOM();
+			});
+			effect(() => {
+				const isUserSelecting = this.isUserSelecting();
+				dom.readOnly();
+				dom.reconcile({ isUserSelecting });
+			});
+		});
 	}
-	setCaretRightTo(element, offset) {
-		const range = window.getSelection()?.getRangeAt(0);
-		range?.setStart(range.endContainer, offset);
-		range?.setEnd(range.endContainer, offset);
+	selectAll() {
+		this.selection({
+			start: 0,
+			end: this.value.current().length
+		});
+		this.#applyRangeToDOM();
 	}
-};
-//#endregion
-//#region ../../core/src/features/caret/focus.ts
-function enableFocus(store) {
-	const container = store.dom.container();
-	if (!container) return () => {};
-	const scope = effectScope(() => {
+	#enableFocusTracking() {
+		const container = this.dom.container();
+		if (!container) return;
 		listen(container, "focusin", (e) => {
-			const target = isHtmlElement(e.target) ? e.target : void 0;
+			const target = e.target instanceof HTMLElement ? e.target : void 0;
 			if (!target) {
-				store.caret.location(void 0);
+				this.selection(void 0);
 				return;
 			}
-			const result = store.dom.locateNode(target);
+			const result = this.dom.locateNode(target);
 			if (!result.ok) {
 				if (result.reason === "control") return;
-				store.caret.location(void 0);
+				this.selection(void 0);
 				return;
 			}
-			const role = result.value.textElement?.contains(target) ? "text" : "markDescendant";
-			store.caret.location({
-				address: result.value.address,
-				role
-			});
+			const rawSel = this.dom.readRawSelection();
+			if (rawSel.ok) this.selection(rawSel.value.range);
 		});
 		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();
-			}
+			queueMicrotask(() => {
+				if (!container.contains(document.activeElement)) this.selection(void 0);
+			});
 		});
-	});
-	return () => scope();
-}
-//#endregion
-//#region ../../core/src/features/caret/selection.ts
-function enableSelection(store) {
-	let pressedNode = null;
-	let isPressed = false;
-	const scope = effectScope(() => {
+	}
+	#enableSelectionTracking() {
+		let pressedAt = null;
 		listen(document, "mousedown", (e) => {
-			pressedNode = nodeTarget(e);
-			isPressed = true;
+			pressedAt = nodeTarget(e);
 		});
 		listen(document, "mousemove", (e) => {
-			const container = store.dom.container();
+			if (pressedAt === null) return;
+			const container = this.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");
-			}
+			const startedOutsideEditor = !container.contains(pressedAt);
+			const sweepingAcrossNodes = pressedAt !== e.target;
+			const selectionIntersectsEditor = window.getSelection()?.containsNode(container, true) ?? false;
+			if ((startedOutsideEditor || sweepingAcrossNodes) && selectionIntersectsEditor) this.isUserSelecting(true);
 		});
 		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);
-			}
+			pressedAt = null;
+			if (!this.isUserSelecting()) return;
+			const sel = window.getSelection();
+			if (!sel || sel.isCollapsed) this.isUserSelecting(false);
 		});
 		listen(document, "selectionchange", () => {
 			const sel = window.getSelection();
-			if (store.caret.selecting() === "drag" && (!sel || sel.isCollapsed)) store.caret.selecting(void 0);
+			if (this.isUserSelecting() && (!sel || sel.isCollapsed)) this.isUserSelecting(false);
 			if (!sel?.focusNode) return;
-			const result = store.dom.locateNode(sel.focusNode);
+			const result = this.dom.locateNode(sel.focusNode);
 			if (!result.ok) {
 				if (result.reason === "control") return;
-				store.caret.location(void 0);
+				this.selection(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();
+			const rawSel = this.dom.readRawSelection();
+			if (rawSel.ok) this.selection(rawSel.value.range);
+			else this.selection(void 0);
 		});
-	});
-	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);
+	#applyRangeToDOM() {
+		if (this.isUserSelecting()) return;
+		const sel = this.selection();
+		if (sel === void 0) return;
+		if (sel.start === sel.end) {
+			const result = this.dom.placeAt(sel.start);
+			if (!result.ok) {
+				this.selection(void 0);
+				return;
+			}
+			const applied = result.value.applied;
+			if (applied !== sel.start) this.selection({
+				start: applied,
+				end: applied
+			});
+			return;
+		}
+		const result = this.dom.placeRange(sel);
+		if (!result.ok) {
+			this.selection(void 0);
+			return;
+		}
+		this.selection(result.value.applied);
 	}
 };
 //#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);
+	constructor(dom) {
+		this.dom = dom;
+		const sel = window.getSelection();
+		const node = sel?.anchorNode;
+		if (!sel || !node || !document.contains(node)) throw new Error("Anchor node of selection is not exists!");
+		this.node = node;
+		this.span = node.textContent ?? "";
+		this.dividedText = this.getDividedTextBy(sel.anchorOffset);
 	}
 	/**
 	* Find overlay match in text using provided options and trigger extractor.
@@ -2210,11 +2086,11 @@ var TriggerFinder = class TriggerFinder {
 	* // Other framework usage
 	* TriggerFinder.find(vueOptions, (opt) => opt.overlay?.trigger ?? '@')
 	*/
-	static find(options, getTrigger, store) {
+	static find(options, getTrigger, dom) {
 		if (!options) return;
-		if (!Caret.isSelectedPosition) return;
+		if (!window.getSelection()?.isCollapsed) return;
 		try {
-			return new TriggerFinder(store).find(options, getTrigger);
+			return new TriggerFinder(dom).find(options, getTrigger);
 		} catch {
 			return;
 		}
@@ -2252,11 +2128,11 @@ var TriggerFinder = class TriggerFinder {
 		}
 	}
 	#rawRangeForMatch(source, index) {
-		if (!this.store) return {
+		if (!this.dom) return {
 			start: index,
 			end: index + source.length
 		};
-		const boundary = this.store.dom.rawPositionFromBoundary(this.node, index + source.length, "after");
+		const boundary = this.dom.rawPositionFromBoundary(this.node, index + source.length, "after");
 		if (!boundary.ok) return void 0;
 		return {
 			start: boundary.value - source.length,
@@ -2294,6 +2170,86 @@ var TriggerFinder = class TriggerFinder {
 	}
 };
 //#endregion
+//#region ../../core/src/features/caret/caretDom.ts
+function 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;
+}
+function getRect() {
+	try {
+		return (window.getSelection()?.getRangeAt(0))?.getBoundingClientRect() ?? null;
+	} catch {
+		return null;
+	}
+}
+function isOnFirstLine(element) {
+	const caretRect = getRect();
+	if (!caretRect || caretRect.height === 0) return true;
+	const elRect = element.getBoundingClientRect();
+	return caretRect.top < elRect.top + caretRect.height + 2;
+}
+function isOnLastLine(element) {
+	const caretRect = getRect();
+	if (!caretRect || caretRect.height === 0) return true;
+	const elRect = element.getBoundingClientRect();
+	return caretRect.bottom > elRect.bottom - caretRect.height - 2;
+}
+function setAtElement(element, offset) {
+	try {
+		const selection = window.getSelection();
+		if (!selection) return;
+		const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+		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;
+		}
+	} catch (e) {
+		console.error(e);
+	}
+}
+function 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)) {
+		setAtElement(element, Infinity);
+		return;
+	}
+	sel.removeAllRanges();
+	sel.addRange(domRange);
+}
+//#endregion
 //#region ../../core/src/features/clipboard/pasteMarkup.ts
 /** Custom MIME type for markput markup syntax. */
 const MARKPUT_MIME = "application/x-markput";
@@ -2321,7 +2277,7 @@ function consumeMarkupPaste(container) {
 	return markup;
 }
 //#endregion
-//#region ../../core/src/features/clipboard/ClipboardFeature.ts
+//#region ../../core/src/features/clipboard/ClipboardController.ts
 function htmlFromRange(range) {
 	const fragment = range.cloneContents();
 	const div = document.createElement("div");
@@ -2342,47 +2298,36 @@ function trimTokensForRawRange(tokens, range) {
 		return Object.assign({}, token, { children: trimTokensForRawRange(token.children, range) });
 	});
 }
-var ClipboardFeature = class {
-	#scope;
-	constructor(store) {
-		this.store = store;
-	}
-	enable() {
-		if (this.#scope) return;
-		const container = this.store.dom.container();
-		if (!container) return;
-		this.#scope = effectScope(() => {
+var ClipboardController = class {
+	constructor(lifecycle, edit, dom, parsing) {
+		this.lifecycle = lifecycle;
+		this.edit = edit;
+		this.dom = dom;
+		this.parsing = parsing;
+		lifecycle.onMounted(() => {
+			const container = dom.container();
+			if (!container) return;
 			listen(container, "copy", (e) => {
 				this.#handleCopy(e);
 			});
 			listen(container, "cut", (e) => {
 				if (!this.#handleCopy(e)) return;
-				const raw = this.store.dom.readRawSelection();
+				const raw = 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
-					}
-				});
+				edit.replace(raw.value.range, "");
 			});
 		});
 	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
 	#handleCopy(e) {
-		if (!this.store.dom.container()) return false;
-		const raw = this.store.dom.readRawSelection();
+		if (!this.dom.container()) return false;
+		const raw = this.dom.readRawSelection();
 		if (!raw.ok || raw.value.range.start === raw.value.range.end) return false;
 		const sel = window.getSelection();
 		const range = sel?.rangeCount ? sel.getRangeAt(0) : void 0;
 		if (!range) return false;
 		const plainText = range.toString();
 		const html = htmlFromRange(range);
-		const markup = serializeRawRange(this.store.parsing.tokens(), raw.value.range);
+		const markup = serializeRawRange(this.parsing.tokens(), raw.value.range);
 		e.preventDefault();
 		e.clipboardData?.setData("text/plain", plainText);
 		e.clipboardData?.setData("text/html", html);
@@ -2391,7 +2336,7 @@ var ClipboardFeature = class {
 	}
 };
 //#endregion
-//#region ../../core/src/features/dom/DomFeature.ts
+//#region ../../core/src/features/dom/DomController.ts
 function nextTextNode(walker) {
 	const node = walker.nextNode();
 	return node instanceof Text ? node : null;
@@ -2451,7 +2396,7 @@ function hasEditableAncestorBefore(node, boundary) {
 	}
 	return false;
 }
-var DomFeature = class {
+var DomController = class {
 	#domIndex = signal(void 0, { readonly: true });
 	#pendingControls = /* @__PURE__ */ new Map();
 	#pendingChildSequences = /* @__PURE__ */ new Map();
@@ -2463,29 +2408,31 @@ var DomFeature = class {
 	#rendering = false;
 	#isComposing = false;
 	#queuedRender = false;
-	#scope;
-	constructor(_store) {
-		this._store = _store;
+	constructor(lifecycle, props, parsing, value) {
+		this.lifecycle = lifecycle;
+		this.props = props;
+		this.parsing = parsing;
+		this.value = value;
 		this.index = computed(() => this.#domIndex());
 		this.container = signal(null);
 		this.diagnostics = event();
-	}
-	enable() {
-		if (this.#scope) return;
-		this.#scope = effectScope(() => {
-			watch(this._store.lifecycle.rendered, () => {
+		this.indexed = event();
+		this.readOnly = computed(() => this.props.readOnly());
+		lifecycle.onMounted(() => {
+			const container = this.container();
+			if (container) listen(container, "click", () => {
+				const tokens = this.parsing.tokens();
+				if (tokens.length === 1 && tokens[0].type === "text" && tokens[0].content === "") {
+					const c = this.container();
+					(c ? firstHtmlChild(c) : null)?.focus();
+				}
+			});
+			watch(lifecycle.rendered, () => {
 				this.#handleRendered();
 			});
-			watch(computed(() => ({
-				readOnly: this._store.props.readOnly(),
-				selecting: this._store.caret.selecting()
-			})), () => this.reconcile());
+			watch(computed(() => props.readOnly()), () => this.reconcile());
 		});
 	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
 	compositionStarted() {
 		this.#isComposing = true;
 	}
@@ -2515,8 +2462,8 @@ var DomFeature = class {
 		};
 		return callback;
 	}
-	reconcile() {
-		this.#reconcileStructuralTextSurfaces();
+	reconcile(opts) {
+		this.#reconcileStructuralTextSurfaces(opts?.isUserSelecting);
 	}
 	locateNode(node) {
 		if (!this.index()) return {
@@ -2561,18 +2508,43 @@ var DomFeature = class {
 			reason: "outsideEditor"
 		};
 	}
-	placeCaretAtRawPosition(rawPosition, affinity = "after") {
+	placeAt(rawPosition, affinity = "after") {
 		if (!this.index()) return {
 			ok: false,
 			reason: "notIndexed"
 		};
-		const target = this.#findTextTargetForRawPosition(rawPosition, affinity);
-		if (!target) return this.#focusMarkBoundaryForRawPosition(rawPosition);
+		const maxPos = this.value.current().length;
+		const clamped = Math.min(rawPosition, maxPos);
+		const target = this.#findTextTargetForRawPosition(clamped, affinity);
+		if (!target) {
+			const boundary = this.#focusMarkBoundaryForRawPosition(clamped);
+			if (!boundary.ok) return boundary;
+			return {
+				ok: true,
+				value: { applied: clamped }
+			};
+		}
 		target.element.focus();
-		this.#placeCaretInTextSurface(target.element, rawPosition - target.start);
+		this.#placeCaretInTextSurface(target.element, clamped - target.start);
 		return {
 			ok: true,
-			value: void 0
+			value: { applied: clamped }
+		};
+	}
+	placeRange(range) {
+		const maxPos = this.value.current().length;
+		const clamped = {
+			start: Math.min(range.start, maxPos),
+			end: Math.min(range.end, maxPos)
+		};
+		const result = this.#placeSelection({
+			range: clamped,
+			direction: void 0
+		});
+		if (!result.ok) return result;
+		return {
+			ok: true,
+			value: { applied: clamped }
 		};
 	}
 	focusAddress(address, boundary = "start") {
@@ -2580,7 +2552,7 @@ var DomFeature = class {
 			ok: false,
 			reason: "notIndexed"
 		};
-		if (!this._store.parsing.index().resolveAddress(address).ok) return {
+		if (!this.parsing.index().resolveAddress(address).ok) return {
 			ok: false,
 			reason: "stale"
 		};
@@ -2591,12 +2563,7 @@ var DomFeature = class {
 			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
-		});
+		if ((target === elements?.textElement ? "text" : target === elements?.rowElement ? "row" : "markDescendant") === "markDescendant") this.#placeCollapsedBoundary(target, boundary === "end" ? target.childNodes.length : 0);
 		return {
 			ok: true,
 			value: void 0
@@ -2618,7 +2585,7 @@ var DomFeature = class {
 			ok: false,
 			reason: "control"
 		} : location;
-		const token = this._store.parsing.index().resolveAddress(location.value.address);
+		const token = this.parsing.index().resolveAddress(location.value.address);
 		if (!token.ok) return {
 			ok: false,
 			reason: "notIndexed"
@@ -2751,7 +2718,7 @@ var DomFeature = class {
 			});
 			return;
 		}
-		const tokenIndex = this._store.parsing.index();
+		const tokenIndex = this.parsing.index();
 		const pathElements = /* @__PURE__ */ new Map();
 		const elementRoles = /* @__PURE__ */ new WeakMap();
 		const controlElements = /* @__PURE__ */ new Set();
@@ -2759,15 +2726,14 @@ var DomFeature = class {
 			controlElements.add(element);
 			elementRoles.set(element, { role: "control" });
 		}
-		const tokens = this._store.parsing.tokens();
-		if (this._store.props.layout() === "block") this.#indexBlockTokens(container, tokens, tokenIndex, controlElements, pathElements, elementRoles);
+		const tokens = this.parsing.tokens();
+		if (this.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();
+		this.indexed();
 	}
 	#elementChildren(element) {
 		return Array.from(element.children).filter((child) => child instanceof HTMLElement);
@@ -2881,9 +2847,9 @@ var DomFeature = class {
 		});
 		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";
+	#reconcileStructuralTextSurfaces(isUserSelecting) {
+		const tokenIndex = this.parsing.index();
+		const editable = this.props.readOnly() || isUserSelecting ? "false" : "true";
 		for (const record of this.#pathElements.values()) {
 			const resolved = tokenIndex.resolveAddress(record.address);
 			if (!resolved.ok) {
@@ -2907,12 +2873,12 @@ var DomFeature = class {
 				record.textElement.contentEditable = editable;
 				continue;
 			}
-			if (resolved.value.type === "mark") if (this._store.props.readOnly()) record.tokenElement.removeAttribute("tabindex");
+			if (resolved.value.type === "mark") if (this.props.readOnly()) record.tokenElement.removeAttribute("tabindex");
 			else record.tokenElement.tabIndex = 0;
 		}
 	}
 	#rawPositionFromContainerBoundary(offset, affinity) {
-		const tokens = this._store.parsing.tokens();
+		const tokens = this.parsing.tokens();
 		if (tokens.length === 0) return {
 			ok: true,
 			value: 0
@@ -2934,7 +2900,7 @@ var DomFeature = class {
 	}
 	#rawPositionFromTokenChildBoundary(tokenElement, offset, token, affinity) {
 		if (token.type === "text") {
-			const textElement = this.#pathElements.get(pathKey(this._store.parsing.index().pathFor(token) ?? []))?.textElement;
+			const textElement = this.#pathElements.get(pathKey(this.parsing.index().pathFor(token) ?? []))?.textElement;
 			if (!textElement || textLength(textElement) === 0) return {
 				ok: true,
 				value: token.position.start
@@ -2943,8 +2909,8 @@ var DomFeature = class {
 		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);
+			const beforeToken = this.parsing.index().resolveAddress(before.value.address);
+			const afterToken = this.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
@@ -2961,7 +2927,7 @@ var DomFeature = class {
 	}
 	#findTextTargetForRawPosition(rawPosition, affinity) {
 		const candidates = [];
-		const tokenIndex = this._store.parsing.index();
+		const tokenIndex = this.parsing.index();
 		for (const record of this.#pathElements.values()) {
 			if (!record.textElement) continue;
 			const resolved = tokenIndex.resolveAddress(record.address);
@@ -2979,7 +2945,7 @@ var DomFeature = class {
 		return candidates.find((candidate) => candidate.start >= rawPosition);
 	}
 	#focusMarkBoundaryForRawPosition(rawPosition) {
-		const tokenIndex = this._store.parsing.index();
+		const tokenIndex = this.parsing.index();
 		for (const record of this.#pathElements.values()) {
 			const resolved = tokenIndex.resolveAddress(record.address);
 			if (!resolved.ok || resolved.value.type !== "mark") continue;
@@ -2987,10 +2953,6 @@ var DomFeature = class {
 			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
@@ -3021,25 +2983,6 @@ var DomFeature = class {
 		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");
@@ -3083,11 +3026,6 @@ var DomFeature = class {
 			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/createRowContent.ts
@@ -3198,103 +3136,95 @@ const EMPTY_TEXT_TOKEN = {
 	}
 };
 //#endregion
-//#region ../../core/src/features/drag/DragFeature.ts
-var DragFeature = class {
-	constructor(store) {
-		this.store = store;
-		this.action = event();
-	}
+//#region ../../core/src/features/drag/DragController.ts
+var DragController = class {
 	#unsub;
-	enable() {
-		if (this.#unsub) return;
-		this.#unsub = watch(this.action, (action) => {
-			switch (action.type) {
-				case "reorder":
-					this.#reorder(action);
-					break;
-				case "add":
-					this.#add(action);
-					break;
-				case "delete":
-					this.#delete(action);
-					break;
-				case "duplicate":
-					this.#duplicate(action);
-					break;
+	constructor(props, value, parsing, caret) {
+		this.props = props;
+		this.value = value;
+		this.parsing = parsing;
+		this.caret = caret;
+		this.action = event();
+		const isDragEnabled = computed(() => this.props.layout() === "block" && !!this.props.draggable());
+		const toggle = (enabled) => {
+			if (enabled && !this.#unsub) this.#unsub = watch(this.action, (action) => {
+				switch (action.type) {
+					case "reorder":
+						this.#reorder(action);
+						break;
+					case "add":
+						this.#add(action);
+						break;
+					case "delete":
+						this.#delete(action);
+						break;
+					case "duplicate":
+						this.#duplicate(action);
+						break;
+				}
+			});
+			if (!enabled && this.#unsub) {
+				this.#unsub();
+				this.#unsub = void 0;
 			}
-		});
-	}
-	disable() {
-		this.#unsub?.();
-		this.#unsub = void 0;
+		};
+		watch(isDragEnabled, toggle);
+		toggle(isDragEnabled());
 	}
 	#reorder(action) {
-		const value = this.store.value.current();
-		const rows = this.store.parsing.tokens();
+		const value = this.value.current();
+		const rows = this.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)
-		});
+		if (newValue !== value) {
+			const range = this.#rangeAfterDrag(action, rows, newValue);
+			if (range) this.caret.selection(range);
+			this.value.current(newValue);
+		}
 	}
 	#add(action) {
-		const value = this.store.value.current();
-		const rawRows = this.store.parsing.tokens();
+		const value = this.value.current();
+		const rawRows = this.parsing.tokens();
 		const rows = rawRows.length > 0 ? rawRows : [EMPTY_TEXT_TOKEN];
-		const newRowContent = createRowContent(this.store.props.options());
+		const newRowContent = createRowContent(this.props.options());
 		const newValue = addDragRow(value, rows, action.afterIndex, newRowContent);
-		this.store.value.replaceAll(newValue, {
-			source: "drag",
-			recover: this.#recoverAfterDrag(action, rows, newValue)
-		});
+		const range = this.#rangeAfterDrag(action, rows, newValue);
+		if (range) this.caret.selection(range);
+		this.value.current(newValue);
 	}
 	#delete(action) {
-		const value = this.store.value.current();
-		const rows = this.store.parsing.tokens();
+		const value = this.value.current();
+		const rows = this.parsing.tokens();
 		const newValue = deleteDragRow(value, rows, action.index);
-		this.store.value.replaceAll(newValue, {
-			source: "drag",
-			recover: this.#recoverAfterDrag(action, rows, newValue)
-		});
+		const range = this.#rangeAfterDrag(action, rows, newValue);
+		if (range) this.caret.selection(range);
+		this.value.current(newValue);
 	}
 	#duplicate(action) {
-		const value = this.store.value.current();
-		const rows = this.store.parsing.tokens();
+		const value = this.value.current();
+		const rows = this.parsing.tokens();
 		const newValue = duplicateDragRow(value, rows, action.index);
-		this.store.value.replaceAll(newValue, {
-			source: "drag",
-			recover: this.#recoverAfterDrag(action, rows, newValue)
-		});
+		const range = this.#rangeAfterDrag(action, rows, newValue);
+		if (range) this.caret.selection(range);
+		this.value.current(newValue);
 	}
-	#recoverAfterDrag(action, previousRows, nextValue) {
+	#rangeAfterDrag(action, previousRows, nextValue) {
+		let rawPosition;
 		if (action.type === "add") {
 			const after = previousRows.at(action.afterIndex);
-			return {
-				kind: "caret",
-				rawPosition: after ? after.position.end : nextValue.length
-			};
-		}
-		if (action.type === "duplicate") {
+			rawPosition = after ? after.position.end : nextValue.length;
+		} else if (action.type === "duplicate") {
 			const row = previousRows.at(action.index);
-			return row ? {
-				kind: "caret",
-				rawPosition: row.position.end
-			} : void 0;
-		}
-		if (action.type === "delete") {
+			rawPosition = row ? row.position.end : void 0;
+		} else 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
-			};
+			rawPosition = next ? Math.min(next.position.start, nextValue.length) : 0;
+		} else {
+			const moved = previousRows.at(action.source);
+			rawPosition = moved ? Math.min(moved.position.start, nextValue.length) : void 0;
 		}
-		const moved = previousRows.at(action.source);
-		return moved ? {
-			kind: "caret",
-			rawPosition: Math.min(moved.position.start, nextValue.length)
+		return rawPosition !== void 0 ? {
+			start: rawPosition,
+			end: rawPosition
 		} : void 0;
 	}
 };
@@ -3316,26 +3246,49 @@ function getAlwaysShowHandle(draggable) {
 	return typeof draggable === "object" && !!draggable.alwaysShowHandle;
 }
 //#endregion
+//#region ../../core/src/features/edit/EditController.ts
+/**
+* Single write path for text edits — delegates gating to {@link ValueModel.replace}
+* and only moves the caret when the edit is accepted. Wrapped in {@link batch}
+* so subscribers observe a consistent value/selection pair on one tick.
+*/
+var EditController = class {
+	constructor(value, caret) {
+		this.value = value;
+		this.caret = caret;
+	}
+	replace(range, replacement) {
+		batch(() => {
+			if (!this.value.replace(range, replacement)) return;
+			this.caret.position(range.start + replacement.length);
+		});
+	}
+};
+//#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 (!container) return;
+	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");
+		if ((e.ctrlKey || e.metaKey) && e.code === "KeyA") {
 			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);
-		});
+			e.preventDefault();
+			store.caret.selectAll();
+		}
 	});
-	return () => scope();
 }
 function shiftFocus(store, event, direction) {
-	const location = store.caret.location();
-	if (!location) return false;
-	const token = store.parsing.index().resolveAddress(location.address);
+	const active = document.activeElement instanceof HTMLElement ? document.activeElement : void 0;
+	const located = active ? store.dom.locateNode(active) : void 0;
+	if (!located?.ok) return false;
+	const isFocusedOnMarkElement = active === located.value.tokenElement && !located.value.textElement;
+	const address = located.value.address;
+	const token = store.parsing.index().resolveAddress(address);
 	if (!token.ok) return false;
-	if (!(token.value.type === "mark" && location.role !== "text")) {
+	if (!isFocusedOnMarkElement) {
 		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;
@@ -3343,20 +3296,20 @@ function shiftFocus(store, event, direction) {
 		if (direction === "prev" && !atStart) return false;
 		if (direction === "next" && !atEnd) return false;
 	}
-	const path = location.address.path;
+	const path = 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;
+	if (!store.dom.focusAddress(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");
+		store.dom.placeAt(sibling?.position.end ?? 0, "before");
 		return true;
 	}
-	store.caret.placeAt(sibling?.position.start ?? 0, "after");
+	store.dom.placeAt(sibling?.position.start ?? 0, "after");
 	return true;
 }
 //#endregion
@@ -3367,22 +3320,19 @@ function isTextLikeRow(token) {
 }
 function enableBlockEdit(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 || 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(store, e);
-			handleEnter(store, e);
-		});
-		listen(container, "beforeinput", (e) => {
-			if (!store.slots.isBlock()) return;
-			if (e.defaultPrevented) return;
-			handleBlockBeforeInput(store, e);
-		}, true);
+	if (!container) return;
+	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(store, e);
+		handleEnter(store, e);
 	});
-	return () => scope();
+	listen(container, "beforeinput", (e) => {
+		if (!store.slots.isBlock()) return;
+		if (e.defaultPrevented) return;
+		handleBlockBeforeInput(store, e);
+	}, true);
 }
 function handleDelete(store, event) {
 	const container = store.dom.container();
@@ -3396,7 +3346,7 @@ function handleDelete(store, event) {
 	const value = store.value.current();
 	if (event.key === KEYBOARD.BACKSPACE) {
 		const blockDiv = blockDivs[blockIndex];
-		const caretAtStart = Caret.getCaretIndex(blockDiv) === 0;
+		const caretAtStart = getCaretIndex(blockDiv) === 0;
 		if (("content" in token ? token.content : "") === "") {
 			event.preventDefault();
 			const newValue = rows.length <= 1 ? "" : (() => {
@@ -3404,13 +3354,9 @@ function handleDelete(store, event) {
 				return value.slice(0, rows[blockIndex].position.start) + value.slice(rows[blockIndex + 1].position.start);
 			})();
 			const previous = rows.at(Math.max(0, blockIndex - 1));
-			store.value.replaceAll(newValue, {
-				source: "block",
-				recover: {
-					kind: "caret",
-					rawPosition: previous ? previous.position.end : 0
-				}
-			});
+			const pos = previous ? previous.position.end : 0;
+			store.caret.position(pos);
+			store.value.current(newValue);
 			return;
 		}
 		if (caretAtStart && blockIndex > 0) {
@@ -3420,26 +3366,18 @@ function handleDelete(store, event) {
 				event.preventDefault();
 				const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
 				const newValue = mergeDragRows(value, rows, blockIndex);
-				store.value.replaceAll(newValue, {
-					source: "block",
-					recover: {
-						kind: "caret",
-						rawPosition: joinPos
-					}
-				});
+				store.caret.position(joinPos);
+				store.value.current(newValue);
 				return;
 			}
 			event.preventDefault();
-			queueMicrotask(() => {
-				const target = blockDivs[blockIndex - 1];
-				focusRow(store, prevToken, target, "end");
-			});
+			focusRow(store, prevToken, blockDivs[blockIndex - 1], "end");
 			return;
 		}
 	}
 	if (event.key === KEYBOARD.DELETE) {
 		const blockDiv = blockDivs[blockIndex];
-		const caretIndex = Caret.getCaretIndex(blockDiv);
+		const caretIndex = getCaretIndex(blockDiv);
 		const caretAtEnd = caretIndex === blockDiv.textContent.length;
 		if (caretIndex === 0 && blockIndex > 0) {
 			const prevToken = rows[blockIndex - 1];
@@ -3448,20 +3386,12 @@ function handleDelete(store, event) {
 				event.preventDefault();
 				const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
 				const newValue = mergeDragRows(value, rows, blockIndex);
-				store.value.replaceAll(newValue, {
-					source: "block",
-					recover: {
-						kind: "caret",
-						rawPosition: joinPos
-					}
-				});
+				store.caret.position(joinPos);
+				store.value.current(newValue);
 				return;
 			}
 			event.preventDefault();
-			queueMicrotask(() => {
-				const target = blockDivs[blockIndex - 1];
-				focusRow(store, prevToken, target, "end");
-			});
+			focusRow(store, prevToken, blockDivs[blockIndex - 1], "end");
 			return;
 		}
 		if (caretAtEnd && blockIndex < rows.length - 1) {
@@ -3471,20 +3401,12 @@ function handleDelete(store, event) {
 				event.preventDefault();
 				const joinPos = getMergeDragRowJoinPos(rows, blockIndex + 1);
 				const newValue = mergeDragRows(value, rows, blockIndex + 1);
-				store.value.replaceAll(newValue, {
-					source: "block",
-					recover: {
-						kind: "caret",
-						rawPosition: joinPos
-					}
-				});
+				store.caret.position(joinPos);
+				store.value.current(newValue);
 				return;
 			}
 			event.preventDefault();
-			queueMicrotask(() => {
-				const target = blockDivs[blockIndex + 1];
-				focusRow(store, nextToken, target, "start");
-			});
+			focusRow(store, nextToken, blockDivs[blockIndex + 1], "start");
 			return;
 		}
 	}
@@ -3510,40 +3432,30 @@ function handleEnter(store, event) {
 	const newRowContent = createRowContent(store.props.options());
 	if (!isTextLikeRow(token)) {
 		const newValue = addDragRow(value, rows, blockIndex, newRowContent);
-		store.value.replaceAll(newValue, {
-			source: "block",
-			recover: {
-				kind: "caret",
-				rawPosition: token.position.end + newRowContent.length
-			}
-		});
+		const pos = token.position.end + newRowContent.length;
+		store.caret.position(pos);
+		store.value.current(newValue);
 		return;
 	}
 	const raw = store.dom.readRawSelection();
 	const absolutePos = raw.ok ? raw.value.range.start : token.position.end;
-	store.value.replaceRange({
+	store.edit.replace({
 		start: absolutePos,
 		end: absolutePos
-	}, newRowContent, {
-		source: "block",
-		recover: {
-			kind: "caret",
-			rawPosition: absolutePos + newRowContent.length
-		}
-	});
+	}, newRowContent);
 }
 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;
+		if (address && store.dom.focusAddress(address).ok) return;
 	}
 	row.focus();
 	if (caret === "start") {
-		Caret.trySetIndex(row, 0);
+		setAtElement(row, 0);
 		return;
 	}
-	Caret.setCaretToEnd(row);
+	setAtElement(row, Infinity);
 }
 function handleBlockArrowLeftRight(store, event, direction) {
 	const container = store.dom.container();
@@ -3555,20 +3467,20 @@ function handleBlockArrowLeftRight(store, event, direction) {
 	if (blockIndex === -1) return false;
 	const blockDiv = blockDivs[blockIndex];
 	if (direction === "left") {
-		if (Caret.getCaretIndex(blockDiv) !== 0) return false;
+		if (getCaretIndex(blockDiv) !== 0) return false;
 		if (blockIndex === 0) return true;
 		event.preventDefault();
 		const prevBlock = blockDivs[blockIndex - 1];
 		prevBlock.focus();
-		Caret.setCaretToEnd(prevBlock);
+		setAtElement(prevBlock, Infinity);
 		return true;
 	}
-	if (Caret.getCaretIndex(blockDiv) !== blockDiv.textContent.length) return false;
+	if (getCaretIndex(blockDiv) !== blockDiv.textContent.length) return false;
 	if (blockIndex >= blockDivs.length - 1) return true;
 	event.preventDefault();
 	const nextBlock = blockDivs[blockIndex + 1];
 	nextBlock.focus();
-	Caret.trySetIndex(nextBlock, 0);
+	setAtElement(nextBlock, 0);
 	return true;
 }
 function handleArrowUpDown(store, event) {
@@ -3581,23 +3493,21 @@ function handleArrowUpDown(store, event) {
 	if (blockIndex === -1) return;
 	const blockDiv = blockDivs[blockIndex];
 	if (event.key === KEYBOARD.UP) {
-		if (!Caret.isCaretOnFirstLine(blockDiv)) return;
+		if (!isOnFirstLine(blockDiv)) return;
 		if (blockIndex === 0) return;
 		event.preventDefault();
-		const caretX = Caret.getCaretRect()?.left ?? blockDiv.getBoundingClientRect().left;
+		const caretX = getRect()?.left ?? blockDiv.getBoundingClientRect().left;
 		const prevBlockDiv = blockDivs[blockIndex - 1];
 		prevBlockDiv.focus();
-		const prevRect = prevBlockDiv.getBoundingClientRect();
-		Caret.setAtX(prevBlockDiv, caretX, prevRect.bottom - 4);
+		setAtX(prevBlockDiv, caretX, prevBlockDiv.getBoundingClientRect().bottom - 4);
 	} else if (event.key === KEYBOARD.DOWN) {
-		if (!Caret.isCaretOnLastLine(blockDiv)) return;
+		if (!isOnLastLine(blockDiv)) return;
 		if (blockIndex >= blockDivs.length - 1) return;
 		event.preventDefault();
-		const caretX = Caret.getCaretRect()?.left ?? blockDiv.getBoundingClientRect().left;
+		const caretX = getRect()?.left ?? blockDiv.getBoundingClientRect().left;
 		const nextBlockDiv = blockDivs[blockIndex + 1];
 		nextBlockDiv.focus();
-		const nextRect = nextBlockDiv.getBoundingClientRect();
-		Caret.setAtX(nextBlockDiv, caretX, nextRect.top + 4);
+		setAtX(nextBlockDiv, caretX, nextBlockDiv.getBoundingClientRect().top + 4);
 	}
 }
 function handleBlockBeforeInput(store, event) {
@@ -3632,13 +3542,7 @@ function replaceBlockRange(store, event, replacement) {
 	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
-		}
-	});
+	store.edit.replace(range, replacement);
 }
 function rawRangeFromInputEvent$1(store, event) {
 	const ranges = event.getTargetRanges();
@@ -3688,68 +3592,51 @@ function rangeForBlockInput(store, event, range) {
 //#region ../../core/src/features/keyboard/input.ts
 function enableInput(store) {
 	const container = store.dom.container();
-	if (!container) return () => {};
+	if (!container) return;
 	let compositionRange;
-	const scope = effectScope(() => {
-		listen(container, "paste", (e) => {
-			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);
-		});
+	listen(container, "paste", (e) => {
+		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.edit.replace(range, data);
+	});
+	listen(container, "beforeinput", (e) => {
+		handleBeforeInput(store, e);
+	}, true);
+	listen(container, "keydown", (e) => {
+		handleDeleteKey(store, e);
 	});
-	return () => scope();
 }
 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)) {
+	if (store.caret.isAllSelected()) {
 		event.preventDefault();
 		replaceAllContentWith(store, "");
 		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
-		}
-	});
+	store.edit.replace(range, "");
 }
 function handleBeforeInput(store, event) {
-	const selecting = store.caret.selecting();
-	if (selecting === "all" && isFullSelection(store)) {
+	if (store.caret.isAllSelected()) {
 		if (event.inputType === "insertFromPaste") {
 			event.preventDefault();
 			return;
@@ -3758,7 +3645,6 @@ function handleBeforeInput(store, event) {
 		replaceAllContentWith(store, event.inputType.startsWith("delete") ? "" : event.data ?? "");
 		return;
 	}
-	if (selecting === "all") store.caret.selecting(void 0);
 	if (store.slots.isBlock()) return;
 	const raw = rawRangeFromInputEvent(store, event);
 	if (!raw.ok) return;
@@ -3767,13 +3653,7 @@ function handleBeforeInput(store, event) {
 	const range = rangeForInput(store, event, raw.value.range);
 	if (!range) return;
 	event.preventDefault();
-	store.value.replaceRange(range, replacement, {
-		source: "input",
-		recover: {
-			kind: "caret",
-			rawPosition: range.start + replacement.length
-		}
-	});
+	store.edit.replace(range, replacement);
 }
 function rawRangeFromInputEvent(store, event) {
 	const ranges = getTargetRanges(event);
@@ -3843,55 +3723,60 @@ function adjacentMarkRange(tokens, position, backward) {
 	}
 }
 function handlePaste(store, event) {
-	const selecting = store.caret.selecting();
-	if (selecting !== "all" || !isFullSelection(store)) {
-		if (selecting === "all") store.caret.selecting(void 0);
-		return;
-	}
+	if (!store.caret.isAllSelected()) return;
 	event.preventDefault();
 	const c = store.dom.container();
 	replaceAllContentWith(store, (c ? consumeMarkupPaste(c) : void 0) ?? event.clipboardData?.getData("text/plain") ?? "");
 }
 function replaceAllContentWith(store, newContent) {
-	store.caret.selecting(void 0);
-	store.value.replaceAll(newContent, {
-		source: "input",
-		recover: {
-			kind: "caret",
-			rawPosition: newContent.length
-		}
-	});
+	store.caret.position(newContent.length);
+	store.value.current(newContent);
 }
 //#endregion
-//#region ../../core/src/features/keyboard/KeyboardFeature.ts
-var KeyboardFeature = class {
-	#disposers = [];
-	constructor(_store) {
-		this._store = _store;
-	}
-	enable() {
-		if (this.#disposers.length) return;
-		this.#disposers = [
-			enableInput(this._store),
-			enableBlockEdit(this._store),
-			enableArrowNav(this._store)
-		];
-	}
-	disable() {
-		this.#disposers.forEach((d) => d());
-		this.#disposers = [];
+//#region ../../core/src/features/keyboard/KeyboardController.ts
+var KeyboardController = class {
+	constructor(lifecycle, dom, value, caret, edit, slots, parsing, props) {
+		const ctx = {
+			dom,
+			value,
+			caret,
+			edit,
+			slots,
+			parsing,
+			props
+		};
+		lifecycle.onMounted(() => {
+			enableInput(ctx);
+			enableBlockEdit(ctx);
+			enableArrowNav(ctx);
+		});
 	}
 };
 //#endregion
-//#region ../../core/src/features/lifecycle/LifecycleFeature.ts
-var LifecycleFeature = class {
+//#region ../../core/src/features/lifecycle/Lifecycle.ts
+var Lifecycle = class {
 	constructor() {
 		this.mounted = event();
 		this.unmounted = event();
 		this.rendered = event();
 	}
-	enable() {}
-	disable() {}
+	/**
+	* Run `setup` when the editor is mounted. Any reactive subscription
+	* created inside `setup` (`watch`, `listen`, `effect`, nested
+	* `effectScope`) is automatically disposed on `unmounted` and re-created
+	* on the next `mounted`.
+	*/
+	onMounted(setup) {
+		let scope;
+		watch(this.mounted, () => {
+			if (scope) return;
+			scope = effectScope(setup);
+		});
+		watch(this.unmounted, () => {
+			scope?.();
+			scope = void 0;
+		});
+	}
 };
 //#endregion
 //#region ../../core/src/features/mark/MarkController.ts
@@ -3930,13 +3815,13 @@ var MarkController = class MarkController {
 	}
 	remove() {
 		const resolved = this.#resolve();
-		if (!resolved.ok) return resolved;
-		return this.store.value.replaceRange(resolved.value.position, "", { source: "mark" });
+		if (!resolved) return;
+		this.store.value.replace(resolved.position, "");
 	}
 	update(patch) {
 		const resolved = this.#resolve();
-		if (!resolved.ok) return resolved;
-		const token = resolved.value;
+		if (!resolved) return;
+		const token = resolved;
 		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;
@@ -3945,7 +3830,7 @@ var MarkController = class MarkController {
 			meta,
 			slot
 		});
-		return this.store.value.replaceRange(token.position, serialized, { source: "mark" });
+		this.store.value.replace(token.position, serialized);
 	}
 	#serialize(token, fields) {
 		return annotate(token.descriptor.markup, {
@@ -3955,19 +3840,10 @@ var MarkController = class MarkController {
 		});
 	}
 	#resolve() {
-		if (this.store.props.readOnly()) return {
-			ok: false,
-			reason: "readOnly"
-		};
+		if (this.store.props.readOnly()) return void 0;
 		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
-		};
+		if (!resolved.ok || resolved.value.type !== "mark") return void 0;
+		return resolved.value;
 	}
 };
 //#endregion
@@ -4050,38 +3926,34 @@ function buildContainerProps(isDraggableBlock, readOnly, className, style, slotP
 	};
 }
 var SlotsFeature = class {
-	constructor(_store) {
-		this._store = _store;
-		this.isBlock = computed(() => this._store.props.layout() === "block");
-		this.isDraggable = computed(() => !!this._store.props.draggable());
-		this.containerComponent = computed(() => resolveSlot("container", this._store.props.slots()));
-		this.containerProps = computed(() => buildContainerProps(this.isDraggable() && this.isBlock(), this._store.props.readOnly(), this._store.props.className(), this._store.props.style(), this._store.props.slotProps()), { equals: shallow });
-		this.blockComponent = computed(() => resolveSlot("block", this._store.props.slots()));
-		this.blockProps = computed(() => resolveSlotProps("block", this._store.props.slotProps()));
-		this.spanComponent = computed(() => resolveSlot("span", this._store.props.slots()));
-		this.spanProps = computed(() => resolveSlotProps("span", this._store.props.slotProps()));
-	}
-	enable() {}
-	disable() {}
+	constructor(props) {
+		this.props = props;
+		this.isBlock = computed(() => this.props.layout() === "block");
+		this.isDraggable = computed(() => !!this.props.draggable());
+		this.containerComponent = computed(() => resolveSlot("container", this.props.slots()));
+		this.containerProps = computed(() => buildContainerProps(this.isDraggable() && this.isBlock(), this.props.readOnly(), this.props.className(), this.props.style(), this.props.slotProps()), { equals: shallow });
+		this.blockComponent = computed(() => resolveSlot("block", this.props.slots()));
+		this.blockProps = computed(() => resolveSlotProps("block", this.props.slotProps()));
+		this.spanComponent = computed(() => resolveSlot("span", this.props.slots()));
+		this.spanProps = computed(() => resolveSlotProps("span", this.props.slotProps()));
+	}
 };
 //#endregion
 //#region ../../core/src/features/mark/MarkFeature.ts
 var MarkFeature = class {
-	constructor(_store) {
-		this._store = _store;
+	constructor(props) {
+		this.props = props;
 		this.enabled = computed(() => {
-			if (this._store.props.Mark()) return true;
-			return this._store.props.options().some((opt) => "Mark" in opt && opt.Mark != null);
+			if (this.props.Mark()) return true;
+			return this.props.options().some((opt) => "Mark" in opt && opt.Mark != null);
 		});
 		this.slot = computed(() => {
-			const options = this._store.props.options();
-			const Mark = this._store.props.Mark();
-			const Span = this._store.props.Span();
+			const options = this.props.options();
+			const Mark = this.props.Mark();
+			const Span = this.props.Span();
 			return (token) => resolveMarkSlot(token, options, Mark, Span);
 		});
 	}
-	enable() {}
-	disable() {}
 };
 //#endregion
 //#region ../../core/src/features/overlay/filterSuggestions.ts
@@ -4117,32 +3989,105 @@ function createMarkFromOverlay(match, value, meta) {
 	};
 }
 //#endregion
-//#region ../../core/src/features/overlay/OverlayFeature.ts
-var OverlayFeature = class {
+//#region ../../core/src/features/overlay/OverlayController.ts
+var OverlayController = class {
 	#scope;
-	constructor(_store) {
-		this._store = _store;
+	constructor(lifecycle, props, value, dom, caret, edit, parsing) {
+		this.lifecycle = lifecycle;
+		this.props = props;
+		this.value = value;
+		this.dom = dom;
+		this.caret = caret;
+		this.edit = edit;
+		this.parsing = parsing;
 		this.match = signal(void 0);
 		this.element = signal(null);
 		this.slot = computed(() => {
-			const Overlay = this._store.props.Overlay();
+			const Overlay = this.props.Overlay();
 			return (option, defaultComponent) => resolveOverlaySlot(Overlay, option, defaultComponent);
 		});
 		this.select = event();
 		this.close = event();
+		this.position = computed(() => {
+			if (!this.match()) return {
+				left: 0,
+				top: 0
+			};
+			const rect = getRect();
+			if (!rect) return {
+				left: 0,
+				top: 0
+			};
+			return {
+				left: rect.left,
+				top: rect.top + rect.height + 1
+			};
+		});
+		const hasOverlayTrigger = computed(() => this.props.options().some((opt) => opt.overlay?.trigger != null));
+		const toggle = (enabled) => {
+			if (enabled && !this.#scope) this.#scope = effectScope(() => {
+				watch(this.close, () => {
+					this.match(void 0);
+				});
+				watch(this.value.current, () => {
+					const showOverlayOn = this.props.showOverlayOn();
+					const type = "change";
+					if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.#probeTrigger();
+				});
+				effect(() => {
+					if (this.match()) {
+						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.dom.container()?.contains(target)) return;
+							this.close();
+						}, true);
+					}
+				});
+				const selectionChangeHandler = () => {
+					if (!this.dom.container()?.contains(document.activeElement)) return;
+					const showOverlayOn = this.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, 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 });
+					this.edit.replace(range, annotation);
+					this.match(void 0);
+				});
+			});
+			if (!enabled && this.#scope) {
+				this.#scope();
+				this.#scope = void 0;
+			}
+		};
+		this.lifecycle.onMounted(() => {
+			watch(hasOverlayTrigger, toggle);
+			toggle(hasOverlayTrigger());
+		});
 	}
 	#probeTrigger() {
-		const match = TriggerFinder.find(this._store.props.options(), (option) => option.overlay?.trigger, this._store) ?? this.#probeTriggerFromRecovery();
+		const match = TriggerFinder.find(this.props.options(), (option) => option.overlay?.trigger, this.dom) ?? this.#probeTriggerFromCaretRange();
 		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;
+	#probeTriggerFromCaretRange() {
+		const sel = this.caret.selection();
+		if (!sel || sel.start !== sel.end) return;
+		const cursor = sel.start;
+		const value = this.value.current();
 		const left = value.slice(0, cursor);
 		const rightWord = value.slice(cursor).match(/^\w*/)?.[0] ?? "";
-		for (const option of this._store.props.options()) {
+		for (const option of this.props.options()) {
 			const trigger = option.overlay?.trigger;
 			if (!trigger) continue;
 			const match = left.match(new RegExp(`${escape(trigger)}(\\w*)$`));
@@ -4158,65 +4103,11 @@ var OverlayFeature = class {
 					end: start + source.length
 				},
 				span: value,
-				node: window.getSelection()?.anchorNode ?? this._store.dom.container() ?? document.body,
+				node: window.getSelection()?.anchorNode ?? this.dom.container() ?? document.body,
 				option
 			};
 		}
 	}
-	enable() {
-		if (this.#scope) return;
-		this.#scope = effectScope(() => {
-			watch(this.close, () => {
-				this.match(void 0);
-			});
-			watch(this._store.value.change, () => {
-				const showOverlayOn = this._store.props.showOverlayOn();
-				const type = "change";
-				if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.#probeTrigger();
-			});
-			alienEffect(() => {
-				if (this.match()) {
-					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.dom.container()?.contains(target)) return;
-						this.close();
-					}, true);
-				}
-			});
-			const selectionChangeHandler = () => {
-				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, 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 });
-				this._store.value.replaceRange(range, annotation, {
-					source: "overlay",
-					recover: {
-						kind: "caret",
-						rawPosition: range.start + annotation.length
-					}
-				});
-				this.match(void 0);
-			});
-		});
-	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
 };
 //#endregion
 //#region ../../core/src/features/overlay/suggestionNavigation.ts
@@ -4249,10 +4140,9 @@ function navigateSuggestions(key, activeIndex, length) {
 	}
 }
 //#endregion
-//#region ../../core/src/features/props/PropsFeature.ts
-var PropsFeature = class {
-	constructor(_store) {
-		this._store = _store;
+//#region ../../core/src/features/props/PropsModel.ts
+var PropsModel = class {
+	constructor() {
 		this.value = signal(void 0, { readonly: true });
 		this.defaultValue = signal(void 0, { readonly: true });
 		this.onChange = signal(void 0, { readonly: true });
@@ -4282,99 +4172,34 @@ 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.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._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();
-			});
+//#region ../../core/src/features/value/ValueModel.ts
+var ValueModel = class {
+	constructor(props) {
+		this.props = props;
+		this.isControlledMode = computed(() => this.props.value() !== void 0);
+		this.current = model({
+			default: () => this.props.defaultValue() ?? "",
+			get: (value) => this.isControlledMode() ? this.props.value() ?? "" : value,
+			set: (next, previous) => {
+				if (next === void 0) return previous;
+				if (this.props.readOnly()) return previous;
+				this.props.onChange()?.(next);
+				return this.isControlledMode() ? previous : next;
+			}
 		});
 	}
-	disable() {
-		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);
-		});
+	/**
+	* Attempts to replace `range` with `replacement`. Returns `true` when the
+	* edit was accepted (range valid and not read-only), `false` otherwise.
+	* Callers use the return value to gate downstream side effects such as
+	* caret placement.
+	*/
+	replace(range, replacement) {
+		if (this.props.readOnly()) return false;
+		const next = replaceInString(this.current(), range, replacement);
+		if (next === void 0) return false;
+		this.current(next);
+		return true;
 	}
 };
 //#endregion
@@ -4554,34 +4379,20 @@ var Store = class {
 	constructor() {
 		this.key = new KeyGenerator();
 		this.blocks = new BlockRegistry();
-		this.props = new PropsFeature(this);
-		this.handler = new MarkputHandler(this);
-		this.lifecycle = new LifecycleFeature();
-		this.value = new ValueFeature(this);
-		this.mark = new MarkFeature(this);
-		this.overlay = new OverlayFeature(this);
-		this.slots = new SlotsFeature(this);
-		this.caret = new CaretFeature(this);
-		this.keyboard = new KeyboardFeature(this);
-		this.dom = new DomFeature(this);
-		this.drag = new DragFeature(this);
-		this.clipboard = new ClipboardFeature(this);
-		this.parsing = new ParsingFeature(this);
-		const features = [
-			this.lifecycle,
-			this.value,
-			this.mark,
-			this.overlay,
-			this.slots,
-			this.caret,
-			this.keyboard,
-			this.dom,
-			this.drag,
-			this.clipboard,
-			this.parsing
-		];
-		watch(this.lifecycle.mounted, () => features.forEach((f) => f.enable()));
-		watch(this.lifecycle.unmounted, () => features.forEach((f) => f.disable()));
+		this.lifecycle = new Lifecycle();
+		this.props = new PropsModel();
+		this.value = new ValueModel(this.props);
+		this.mark = new MarkFeature(this.props);
+		this.slots = new SlotsFeature(this.props);
+		this.parsing = new ParseController(this.lifecycle, this.value, this.mark, this.props, this.slots);
+		this.dom = new DomController(this.lifecycle, this.props, this.parsing, this.value);
+		this.caret = new CaretModel(this.lifecycle, this.dom, this.value);
+		this.edit = new EditController(this.value, this.caret);
+		this.overlay = new OverlayController(this.lifecycle, this.props, this.value, this.dom, this.caret, this.edit, this.parsing);
+		this.keyboard = new KeyboardController(this.lifecycle, this.dom, this.value, this.caret, this.edit, this.slots, this.parsing, this.props);
+		this.drag = new DragController(this.props, this.value, this.parsing, this.caret);
+		this.clipboard = new ClipboardController(this.lifecycle, this.edit, this.dom, this.parsing);
+		this.handler = new MarkputHandler(this.dom, this.overlay, this.parsing);
 	}
 };
 //#endregion
@@ -4865,13 +4676,7 @@ function useOverlay() {
 		match: s.overlay.match,
 		overlay: s.overlay
 	}));
-	const style = useMemo(() => {
-		if (!match) return {
-			left: 0,
-			top: 0
-		};
-		return Caret.getAbsolutePosition();
-	}, [match]);
+	const style = useMarkput((s) => s.overlay.position());
 	const close = useCallback(() => overlay.close(), [overlay]);
 	return {
 		match,