@markput/react 0.11.0 → 0.12.1

package/index.js

@@ -58,10 +58,10 @@ var MarkputHandler = class {
 		this.store = store;
 	}
 	get container() {
-		return this.store.refs.container;
+		return this.store.slots.container();
 	}
 	get overlay() {
-		return this.store.refs.overlay;
+		return this.store.overlay.element();
 	}
 	focus() {
 		this.store.nodes.focus.head?.focus();
@@ -265,184 +265,6 @@ var Caret = class {
 	}
 };
 //#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 {
-	span;
-	node;
-	dividedText;
-	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.refs.container ?? void 0);
-	}
-	get tail() {
-		return lastHtmlChild(this.#store.refs.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/shared/signals/alien-signals/system.ts
 let ReactiveFlags = /* @__PURE__ */ function(ReactiveFlags) {
 	ReactiveFlags[ReactiveFlags["None"] = 0] = "None";
@@ -942,6 +764,30 @@ 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 {
@@ -957,74 +803,399 @@ function listen(target, event, handler, options) {
 	});
 }
 //#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"
-};
-//#endregion
-//#region ../../core/src/features/parsing/parser/core/MarkupDescriptor.ts
-/**
-* Creates a segment-based markup descriptor from a markup template
-*
-* Examples:
-* - `#[__value__]` -> segments: ["#[", "]"], gapTypes: ["value"]
-* - `#[__slot__]` -> segments: ["#[", "]"], gapTypes: ["slot"]
-* - `@[__value__](__meta__)` -> segments: ["@[", "](", ")"], gapTypes: ["value", "meta"]
-* - `@[__slot__](__meta__)` -> segments: ["@[", "](", ")"], gapTypes: ["slot", "meta"]
-* - `@[__value__](__slot__)` -> segments: ["@[", "](", ")"], gapTypes: ["value", "slot"]
-* - `<__value__>__meta__</__value__>` -> segments: [{pattern: '<([^>]+)>'}, {pattern: '</([^>]+)>'}], gapTypes: ["value", "meta", "value"] (dynamic)
-* - `<__value__ __meta__>__slot__</__value__>` -> segments: [{pattern: '<([^> ]+) '}, " ", {pattern: '>__slot__</([^>]+)>'}], gapTypes: ["value", "meta", "slot", "value"] (dynamic)
-*/
-function createMarkupDescriptor(markup, index) {
-	const { segments: rawSegments, gapTypes: rawGapTypes, counts, valueGapIndices } = scanMarkupStructure(markup);
-	validateMarkup(counts, markup);
-	const hasTwoValues = counts.value === 2;
-	const { segments, gapTypes } = hasTwoValues ? convertTwoValuePattern(rawSegments, rawGapTypes, valueGapIndices) : {
-		segments: rawSegments,
-		gapTypes: rawGapTypes
-	};
-	return {
-		markup,
-		index,
-		segments,
-		gapTypes,
-		hasSlot: counts.slot === 1,
-		hasTwoValues,
-		segmentGlobalIndices: Array.from({ length: segments.length })
+//#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();
 	};
 }
-/**
-* Maps placeholder types to their text representations
-*/
-const PLACEHOLDER_TEXT = {
-	[GAP_TYPE.Value]: PLACEHOLDER.Value,
-	[GAP_TYPE.Meta]: PLACEHOLDER.Meta,
-	[GAP_TYPE.Slot]: PLACEHOLDER.Slot
-};
-/**
+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"
+};
+//#endregion
+//#region ../../core/src/features/parsing/parser/core/MarkupDescriptor.ts
+/**
+* Creates a segment-based markup descriptor from a markup template
+*
+* Examples:
+* - `#[__value__]` -> segments: ["#[", "]"], gapTypes: ["value"]
+* - `#[__slot__]` -> segments: ["#[", "]"], gapTypes: ["slot"]
+* - `@[__value__](__meta__)` -> segments: ["@[", "](", ")"], gapTypes: ["value", "meta"]
+* - `@[__slot__](__meta__)` -> segments: ["@[", "](", ")"], gapTypes: ["slot", "meta"]
+* - `@[__value__](__slot__)` -> segments: ["@[", "](", ")"], gapTypes: ["value", "slot"]
+* - `<__value__>__meta__</__value__>` -> segments: [{pattern: '<([^>]+)>'}, {pattern: '</([^>]+)>'}], gapTypes: ["value", "meta", "value"] (dynamic)
+* - `<__value__ __meta__>__slot__</__value__>` -> segments: [{pattern: '<([^> ]+) '}, " ", {pattern: '>__slot__</([^>]+)>'}], gapTypes: ["value", "meta", "slot", "value"] (dynamic)
+*/
+function createMarkupDescriptor(markup, index) {
+	const { segments: rawSegments, gapTypes: rawGapTypes, counts, valueGapIndices } = scanMarkupStructure(markup);
+	validateMarkup(counts, markup);
+	const hasTwoValues = counts.value === 2;
+	const { segments, gapTypes } = hasTwoValues ? convertTwoValuePattern(rawSegments, rawGapTypes, valueGapIndices) : {
+		segments: rawSegments,
+		gapTypes: rawGapTypes
+	};
+	return {
+		markup,
+		index,
+		segments,
+		gapTypes,
+		hasSlot: counts.slot === 1,
+		hasTwoValues,
+		segmentGlobalIndices: Array.from({ length: segments.length })
+	};
+}
+/**
+* Maps placeholder types to their text representations
+*/
+const PLACEHOLDER_TEXT = {
+	[GAP_TYPE.Value]: PLACEHOLDER.Value,
+	[GAP_TYPE.Meta]: PLACEHOLDER.Meta,
+	[GAP_TYPE.Slot]: PLACEHOLDER.Slot
+};
+/**
 * Parses markup template into segments, gap types and placeholder counts
 */
 function scanMarkupStructure(markup) {
@@ -1150,13 +1321,9 @@ function getOrCreate$1(map, key) {
 * Centralizes access to all markup patterns and their descriptors
 */
 var MarkupRegistry = class {
-	markups;
-	descriptors;
-	/** Deduplicated list of unique segment definitions (static strings or dynamic patterns) */
-	segments = [];
-	/** Map from first segment index to descriptors that start with this segment (for O(1) lookup) */
-	firstSegmentIndexMap = /* @__PURE__ */ new Map();
 	constructor(markups) {
+		this.segments = [];
+		this.firstSegmentIndexMap = /* @__PURE__ */ new Map();
 		this.markups = markups;
 		const segmentIndexMap = /* @__PURE__ */ new Map();
 		this.descriptors = markups.map((markup, index) => {
@@ -1241,20 +1408,9 @@ function getSegmentIndex(baseIndex, value) {
 * - isActive: expectedSegmentIndex >= 0 (not NaN and not -1)
 */
 var Match = class {
-	gaps = {};
-	/** Captured value from first dynamic segment (for hasTwoValues patterns) */
-	captured;
-	/**
-	* Index of expected next segment:
-	* - >= 0: active, waiting for segment at this index
-	* - NaN: completed successfully
-	* - -1: invalid, should be discarded
-	*/
-	expectedSegmentIndex;
-	start;
-	end;
 	constructor(descriptor, firstSegment) {
 		this.descriptor = descriptor;
+		this.gaps = {};
 		this.expectedSegmentIndex = 1;
 		this.start = firstSegment.start;
 		this.end = firstSegment.end;
@@ -1368,11 +1524,11 @@ function getOrCreate(map, key) {
 * Optimized parser using state machine approach
 */
 var PatternMatcher = class {
-	pendingStates = /* @__PURE__ */ new Map();
-	completingStates = /* @__PURE__ */ new Map();
-	completedStates = [];
 	constructor(registry) {
 		this.registry = registry;
+		this.pendingStates = /* @__PURE__ */ new Map();
+		this.completingStates = /* @__PURE__ */ new Map();
+		this.completedStates = [];
 	}
 	/** Main method that converts found segments into structured matches */
 	process(segments) {
@@ -1497,8 +1653,6 @@ function computeDynamicPattern(before, after, exclusions) {
 * Segment matcher using dual strategy for optimal performance
 */
 var SegmentMatcher = class {
-	static;
-	dynamic;
 	constructor(segments) {
 		this.initializeDual(segments);
 	}
@@ -1632,8 +1786,6 @@ const createTextToken = (input, start = 0, end = input.length) => {
 * Memory: O(D) for active parents stack where D is nesting depth (typically 3-5)
 */
 var TreeBuilder = class {
-	input;
-	options;
 	constructor(options) {
 		this.options = options ?? {};
 	}
@@ -1892,11 +2044,6 @@ function toString(tokens) {
 * ```
 */
 var Parser = class Parser {
-	registry;
-	segmentMatcher;
-	patternMatcher;
-	treeBuilder;
-	parseOptions;
 	/**
 	* Creates a new Parser instance with the specified markup patterns
 	*
@@ -2146,8 +2293,8 @@ function getClosestIndexes(array, target) {
 //#region ../../core/src/features/parsing/utils/valueParser.ts
 function getTokensByUI(store) {
 	const { focus } = store.nodes;
-	const parser = store.computed.parser();
-	const tokens = store.state.tokens();
+	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;
@@ -2155,19 +2302,19 @@ function getTokensByUI(store) {
 }
 function computeTokensFromValue(store) {
 	const value = store.props.value();
-	const previousValue = store.state.previousValue();
+	const previousValue = store.value.last();
 	const gap = findGap(previousValue, value);
 	if (!gap.left && !gap.right) {
-		store.state.previousValue(value);
-		return store.state.tokens();
+		store.value.last(value);
+		return store.parsing.tokens();
 	}
 	if (gap.left === 0 && previousValue !== void 0 && gap.right !== void 0 && gap.right >= previousValue.length) {
-		store.state.previousValue(value);
+		store.value.last(value);
 		return parseWithParser(store, value ?? "");
 	}
-	store.state.previousValue(value);
+	store.value.last(value);
 	const ranges = getRangeMap(store);
-	const tokens = store.state.tokens();
+	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) {
@@ -2191,7 +2338,7 @@ function computeTokensFromValue(store) {
 }
 function parseUnionLabels(store, ...indexes) {
 	let span = "";
-	const tokens = store.state.tokens();
+	const tokens = store.parsing.tokens();
 	for (const index of indexes) {
 		const token = tokens[index];
 		span += token.content;
@@ -2200,14 +2347,14 @@ function parseUnionLabels(store, ...indexes) {
 }
 function getRangeMap(store) {
 	let position = 0;
-	return store.state.tokens().map((token) => {
+	return store.parsing.tokens().map((token) => {
 		const length = token.content.length;
 		position += length;
 		return position - length;
 	});
 }
 function parseWithParser(store, value) {
-	const parser = store.computed.parser();
+	const parser = store.parsing.parser();
 	if (!parser) return [{
 		type: "text",
 		content: value,
@@ -2220,10 +2367,18 @@ function parseWithParser(store, value) {
 }
 //#endregion
 //#region ../../core/src/features/parsing/ParseFeature.ts
-var ParseFeature = class {
+var ParsingFeature = class {
 	#scope;
-	constructor(store) {
-		this.store = store;
+	constructor(_store) {
+		this._store = _store;
+		this.tokens = signal([]);
+		this.parser = computed(() => {
+			if (!this._store.mark.enabled()) return;
+			const markups = this._store.props.options().map((opt) => opt.markup);
+			if (!markups.some(Boolean)) return;
+			return new Parser(markups, this._store.slots.isBlock() ? { skipEmptyText: true } : void 0);
+		});
+		this.reparse = event();
 	}
 	enable() {
 		if (this.#scope) return;
@@ -2238,163 +2393,26 @@ var ParseFeature = class {
 		this.#scope = void 0;
 	}
 	sync() {
-		const { store } = this;
-		const inputValue = store.props.value() ?? store.props.defaultValue() ?? "";
-		store.state.tokens(parseWithParser(store, inputValue));
-		store.state.previousValue(inputValue);
+		const inputValue = this._store.props.value() ?? this._store.props.defaultValue() ?? "";
+		this.tokens(parseWithParser(this._store, inputValue));
+		this._store.value.last(inputValue);
 	}
 	#subscribeParse() {
-		const { store } = this;
-		watch(store.event.parse, () => {
-			if (store.state.recovery()) {
-				const text = toString(store.state.tokens());
-				store.state.tokens(parseWithParser(store, text));
-				store.state.previousValue(text);
+		watch(this.reparse, () => {
+			if (this._store.caret.recovery()) {
+				const text = toString(this.tokens());
+				this.tokens(parseWithParser(this._store, text));
+				this._store.value.last(text);
 				return;
 			}
-			store.state.tokens(store.nodes.focus.target ? getTokensByUI(store) : computeTokensFromValue(store));
+			this.tokens(this._store.nodes.focus.target ? getTokensByUI(this._store) : computeTokensFromValue(this._store));
 		});
 	}
 	#subscribeReactiveParse() {
-		const { store } = this;
-		watch(computed(() => [store.props.value(), store.computed.parser()]), () => {
-			if (!store.state.recovery()) store.event.parse();
-		});
-	}
-};
-//#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/selection/selectionHelpers.ts
-function isFullSelection(store) {
-	const sel = window.getSelection();
-	const container = store.refs.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.computed.isBlock()) return;
-		event.preventDefault();
-		const selection = window.getSelection();
-		const anchorNode = store.refs.container?.firstChild;
-		const focusNode = store.refs.container?.lastChild;
-		if (!selection || !anchorNode || !focusNode) return;
-		selection.setBaseAndExtent(anchorNode, 0, focusNode, 1);
-		store.state.selecting("all");
-	}
-}
-//#endregion
-//#region ../../core/src/features/selection/TextSelectionFeature.ts
-var TextSelectionFeature = class {
-	#scope;
-	#pressedNode = null;
-	#isPressed = false;
-	constructor(store) {
-		this.store = store;
-	}
-	enable() {
-		if (this.#scope) return;
-		this.#scope = effectScope(() => {
-			listen(document, "mousedown", (e) => {
-				this.#pressedNode = nodeTarget(e);
-				this.#isPressed = true;
-			});
-			listen(document, "mousemove", (e) => {
-				const container = this.store.refs.container;
-				if (!container) return;
-				const isPressed = this.#isPressed;
-				const isNotInnerSome = !container.contains(this.#pressedNode) || this.#pressedNode !== e.target;
-				const isInside = window.getSelection()?.containsNode(container, true);
-				if (isPressed && isNotInnerSome && isInside) {
-					if (this.store.state.selecting() !== "drag") this.store.state.selecting("drag");
-				}
-			});
-			listen(document, "mouseup", () => {
-				this.#isPressed = false;
-				this.#pressedNode = null;
-				if (this.store.state.selecting() === "drag") {
-					const sel = window.getSelection();
-					if (!sel || sel.isCollapsed) this.store.state.selecting(void 0);
-				}
-			});
-			listen(document, "selectionchange", () => {
-				if (this.store.state.selecting() !== "drag") return;
-				const sel = window.getSelection();
-				if (!sel || sel.isCollapsed) this.store.state.selecting(void 0);
-			});
-			alienEffect(() => {
-				if (this.store.state.selecting() !== "drag") return;
-				const container = this.store.refs.container;
-				if (!container) return;
-				container.querySelectorAll("[contenteditable=\"true\"]").forEach((el) => el.contentEditable = "false");
-			});
-		});
-	}
-	disable() {
-		if (this.store.state.selecting() === "drag") this.store.state.selecting(void 0);
-		this.#scope?.();
-		this.#scope = void 0;
-		this.#pressedNode = null;
-		this.#isPressed = false;
-	}
-};
-//#endregion
-//#region ../../core/src/features/arrownav/ArrowNavFeature.ts
-var ArrowNavFeature = class {
-	#scope;
-	constructor(store) {
-		this.store = store;
-	}
-	enable() {
-		if (this.#scope) return;
-		const container = this.store.refs.container;
-		if (!container) return;
-		this.#scope = effectScope(() => {
-			listen(container, "keydown", (e) => {
-				if (this.store.computed.isBlock()) return;
-				if (!this.store.nodes.focus.target) return;
-				if (e.key === KEYBOARD.LEFT) shiftFocusPrev(this.store, e);
-				else if (e.key === KEYBOARD.RIGHT) shiftFocusNext(this.store, e);
-				selectAllText(this.store, e);
-			});
+		watch(computed(() => [this._store.props.value(), this.parser()]), () => {
+			if (!this._store.caret.recovery()) this.reparse();
 		});
 	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
 };
 //#endregion
 //#region ../../core/src/features/clipboard/pasteMarkup.ts
@@ -2467,13 +2485,13 @@ function getBoundaryOffset(range, child, isStart) {
 * Returns null if selection is collapsed, empty, or outside the container.
 */
 function selectionToTokens(store) {
-	const container = store.refs.container;
+	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.state.tokens();
+	const tokens = store.parsing.tokens();
 	let startIndex = findContainerChildIndex(range.startContainer, container);
 	let endIndex = findContainerChildIndex(range.endContainer, container);
 	if (startIndex === -1 || endIndex === -1) return null;
@@ -2487,7 +2505,7 @@ function selectionToTokens(store) {
 	};
 }
 //#endregion
-//#region ../../core/src/features/clipboard/CopyFeature.ts
+//#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.
@@ -2518,14 +2536,14 @@ function trimBoundaryTokens({ tokens, startOffset, endOffset }) {
 		return token;
 	});
 }
-var CopyFeature = class {
+var ClipboardFeature = class {
 	#scope;
 	constructor(store) {
 		this.store = store;
 	}
 	enable() {
 		if (this.#scope) return;
-		const container = this.store.refs.container;
+		const container = this.store.slots.container();
 		if (!container) return;
 		this.#scope = effectScope(() => {
 			listen(container, "copy", (e) => {
@@ -2539,15 +2557,15 @@ var CopyFeature = class {
 				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.computed.currentValue();
+				const value = this.store.value.current();
 				if (rawStart === rawEnd) return;
 				const newValue = value.slice(0, rawStart) + value.slice(rawEnd);
-				this.store.state.innerValue(newValue);
-				const newTokens = this.store.state.tokens();
+				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.state.recovery({
+				this.store.caret.recovery({
 					anchor: this.store.nodes.focus,
 					caret: caretWithinToken,
 					isNext: true,
@@ -2561,7 +2579,7 @@ var CopyFeature = class {
 		this.#scope = void 0;
 	}
 	#handleCopy(e) {
-		const container = this.store.refs.container;
+		const container = this.store.slots.container();
 		if (!container) return false;
 		const sel = window.getSelection();
 		if (!sel || sel.isCollapsed || !sel.rangeCount) return false;
@@ -2583,6 +2601,172 @@ var CopyFeature = 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
+var DomFeature = class {
+	#scope;
+	constructor(_store) {
+		this._store = _store;
+	}
+	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();
+			});
+		});
+	}
+	disable() {
+		this.#scope?.();
+		this.#scope = void 0;
+	}
+	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;
+			}
+		} else for (let i = 0; i < children.length; i += 2) {
+			const el = childAt(container, i);
+			if (el) el.contentEditable = value;
+		}
+		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);
+		}
+	}
+	#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++;
+			}
+		}
+	}
+	#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);
+				}
+				continue;
+			}
+			const el = childAt(blockEl, readOnly ? 0 : 1);
+			if (!el) continue;
+			if (el.textContent !== token.content) el.textContent = token.content;
+		}
+	}
+};
+//#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];
+	if (!firstOption.markup) return "\n";
+	return annotate(firstOption.markup, {
+		value: "",
+		slot: "",
+		meta: ""
+	});
+}
+//#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);
@@ -2670,175 +2854,141 @@ function reorderDragRows(value, rows, sourceIndex, targetIndex) {
 	return parts.join("");
 }
 //#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];
-	if (!firstOption.markup) return "\n";
-	return annotate(firstOption.markup, {
-		value: "",
-		slot: "",
-		meta: ""
-	});
-}
-//#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.state.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.state.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.state.recovery({
-		anchor: caretAnchor.prev,
-		caret
-	});
-	store.event.change();
-	queueMicrotask(() => {
-		const target = childAt(store.refs.container, targetIndex);
-		if (!target) return;
-		store.nodes.focus.target = target;
-		target.focus();
-		store.nodes.focus.caret = caret;
-	});
-}
-//#endregion
-//#region ../../core/src/features/editable/isTextTokenSpan.ts
-function isTextTokenSpan(el) {
-	return el.tagName === "SPAN" && (el.attributes.length === 0 || el.attributes.length === 1 && el.hasAttribute("contenteditable"));
-}
+//#region ../../core/src/features/drag/tokens.ts
+const EMPTY_TEXT_TOKEN = {
+	type: "text",
+	content: "",
+	position: {
+		start: 0,
+		end: 0
+	}
+};
 //#endregion
-//#region ../../core/src/features/editable/ContentEditableFeature.ts
-var ContentEditableFeature = class {
-	#scope;
+//#region ../../core/src/features/drag/DragFeature.ts
+var DragFeature = class {
 	constructor(store) {
 		this.store = store;
+		this.action = event();
 	}
+	#unsub;
 	enable() {
-		if (this.#scope) return;
-		this.#scope = effectScope(() => {
-			alienEffect(() => {
-				this.store.props.readOnly();
-				this.sync();
-			});
-			alienEffect(() => {
-				if (this.store.state.selecting() === void 0) this.sync();
-			});
-			watch(this.store.event.sync, () => {
-				this.sync();
-			});
+		if (this.#unsub) return;
+		this.#unsub = watch(this.action, (action) => {
+			switch (action.type) {
+				case "reorder":
+					this.#reorder(action.source, action.target);
+					break;
+				case "add":
+					this.#add(action.afterIndex);
+					break;
+				case "delete":
+					this.#delete(action.index);
+					break;
+				case "duplicate":
+					this.#duplicate(action.index);
+					break;
+			}
 		});
 	}
 	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
+		this.#unsub?.();
+		this.#unsub = void 0;
 	}
-	sync() {
-		const container = this.store.refs.container;
-		if (!container) return;
-		const readOnly = this.store.props.readOnly();
-		const value = readOnly ? "false" : "true";
-		const children = container.children;
-		const isBlock = this.store.computed.isBlock();
-		if (isBlock) {
-			const tokens = this.store.state.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;
-			}
-		} else for (let i = 0; i < children.length; i += 2) {
-			const el = childAt(container, i);
-			if (el) el.contentEditable = value;
-		}
-		const tokens = this.store.state.tokens();
-		if (isBlock) this.#syncDragTextContent(tokens, container, readOnly);
-		else this.#syncTextContent(tokens, container);
+	#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);
 	}
-	#syncTextContent(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.#syncMarkChildren(token.children, el);
-		}
+	#add(afterIndex) {
+		const value = this.store.props.value();
+		if (value == null || !this.store.props.onChange()) return;
+		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();
+		});
 	}
-	#syncMarkChildren(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.#syncMarkChildren(token.children, el, editable);
-				childIdx++;
-			}
-		}
+	#delete(index) {
+		const value = this.store.props.value();
+		if (value == null || !this.store.props.onChange()) return;
+		const rows = this.store.parsing.tokens();
+		this.store.value.next(deleteDragRow(value, rows, index));
 	}
-	#syncDragTextContent(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.#syncMarkChildren(token.children, markEl, editable);
-				}
-				continue;
-			}
-			const el = childAt(blockEl, readOnly ? 0 : 1);
-			if (!el) continue;
-			if (el.textContent !== token.content) el.textContent = token.content;
-		}
+	#duplicate(index) {
+		const value = this.store.props.value();
+		if (value == null || !this.store.props.onChange()) return;
+		const rows = this.store.parsing.tokens();
+		this.store.value.next(duplicateDragRow(value, rows, index));
 	}
 };
 //#endregion
-//#region ../../core/src/features/block-editing/rawPosition.ts
+//#region ../../core/src/shared/utils/dragUtils.ts
+function getDragDropPosition(clientY, rect) {
+	return clientY < rect.top + rect.height / 2 ? "before" : "after";
+}
+function parseDragSourceIndex(dataTransfer) {
+	const index = parseInt(dataTransfer.getData("text/plain"), 10);
+	return isNaN(index) ? null : index;
+}
+function getDragTargetIndex(blockIndex, position) {
+	return position === "before" ? blockIndex : blockIndex + 1;
+}
+//#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;
@@ -2961,196 +3111,172 @@ function setCaretInMarkAtRawPos(markElement, markToken, rawAbsolutePos) {
 			tokenIdx++;
 		}
 	}
-	return false;
-}
-//#endregion
-//#region ../../core/src/features/block-editing/BlockEditFeature.ts
-function isTextLikeRow(token) {
-	if (token.type === "text") return true;
-	return token.descriptor.hasSlot && token.descriptor.segments.length === 1;
-}
-var BlockEditFeature = class {
-	#scope;
-	constructor(store) {
-		this.store = store;
-	}
-	enable() {
-		if (this.#scope) return;
-		const container = this.store.refs.container;
-		if (!container) return;
-		this.#scope = effectScope(() => {
-			listen(container, "keydown", (e) => {
-				if (!this.store.computed.isBlock()) return;
-				if (e.key === KEYBOARD.LEFT || e.key === KEYBOARD.RIGHT) this.#handleBlockArrowLeftRight(e, e.key === KEYBOARD.LEFT ? "left" : "right");
-				else if (e.key === KEYBOARD.UP || e.key === KEYBOARD.DOWN) this.#handleArrowUpDown(e);
-				this.#handleDelete(e);
-				this.#handleEnter(e);
-			});
-			listen(container, "beforeinput", (e) => {
-				if (!this.store.computed.isBlock()) return;
-				if (e.defaultPrevented) return;
-				this.#handleBlockBeforeInput(e);
-			}, true);
-		});
-	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
-	#handleDelete(event) {
-		const container = this.store.refs.container;
-		if (!container) return;
-		const blockDivs = htmlChildren(container);
-		const blockIndex = blockDivs.findIndex((div) => div === document.activeElement || div.contains(document.activeElement));
-		if (blockIndex === -1) return;
-		const rows = this.store.state.tokens();
-		if (blockIndex >= rows.length) return;
-		const token = rows[blockIndex];
-		const value = this.store.computed.currentValue();
-		if (!this.store.props.onChange()) return;
-		if (event.key === KEYBOARD.BACKSPACE) {
-			const blockDiv = blockDivs[blockIndex];
-			const caretAtStart = Caret.getCaretIndex(blockDiv) === 0;
-			if (("content" in token ? token.content : "") === "") {
+	return false;
+}
+//#endregion
+//#region ../../core/src/features/keyboard/blockEdit.ts
+function isTextLikeRow(token) {
+	if (token.type === "text") return true;
+	return token.descriptor.hasSlot && token.descriptor.segments.length === 1;
+}
+function enableBlockEdit(store) {
+	const container = store.slots.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);
+			handleEnter(store, e);
+		});
+		listen(container, "beforeinput", (e) => {
+			if (!store.slots.isBlock()) return;
+			if (e.defaultPrevented) return;
+			handleBlockBeforeInput(store, e);
+		}, true);
+	});
+	return () => scope();
+}
+function handleDelete$1(store, event) {
+	const container = store.slots.container();
+	if (!container) return;
+	const blockDivs = htmlChildren(container);
+	const blockIndex = blockDivs.findIndex((div) => div === document.activeElement || div.contains(document.activeElement));
+	if (blockIndex === -1) return;
+	const rows = store.parsing.tokens();
+	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;
+		if (("content" in token ? token.content : "") === "") {
+			event.preventDefault();
+			const newValue = rows.length <= 1 ? "" : (() => {
+				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);
+				}
+			});
+			return;
+		}
+		if (caretAtStart && blockIndex > 0) {
+			const prevToken = rows[blockIndex - 1];
+			const currToken = rows[blockIndex];
+			if (canMergeRows(prevToken, currToken)) {
 				event.preventDefault();
-				const newValue = rows.length <= 1 ? "" : (() => {
-					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);
-				})();
-				this.store.state.innerValue(newValue);
+				const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
+				const newValue = mergeDragRows(value, rows, blockIndex);
+				store.value.next(newValue);
 				queueMicrotask(() => {
-					const target = childAt(container, Math.max(0, blockIndex - 1));
+					const target = childAt(container, blockIndex - 1);
 					if (target) {
 						target.focus();
-						Caret.setCaretToEnd(target);
+						const updatedToken = store.parsing.tokens()[blockIndex - 1];
+						setCaretAtRawPos(target, updatedToken, joinPos);
 					}
 				});
 				return;
 			}
-			if (caretAtStart && blockIndex > 0) {
-				const prevToken = rows[blockIndex - 1];
-				const currToken = rows[blockIndex];
-				if (canMergeRows(prevToken, currToken)) {
-					event.preventDefault();
-					const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
-					const newValue = mergeDragRows(value, rows, blockIndex);
-					this.store.state.innerValue(newValue);
-					queueMicrotask(() => {
-						const target = childAt(container, blockIndex - 1);
-						if (target) {
-							target.focus();
-							const updatedToken = this.store.state.tokens()[blockIndex - 1];
-							setCaretAtRawPos(target, updatedToken, joinPos);
-						}
-					});
-					return;
-				}
-				event.preventDefault();
-				queueMicrotask(() => {
-					const target = blockDivs[blockIndex - 1];
-					target.focus();
-					if (prevToken.type !== "mark") Caret.setCaretToEnd(target);
-				});
-				return;
-			}
+			event.preventDefault();
+			queueMicrotask(() => {
+				const target = blockDivs[blockIndex - 1];
+				target.focus();
+				if (prevToken.type !== "mark") Caret.setCaretToEnd(target);
+			});
+			return;
 		}
-		if (event.key === KEYBOARD.DELETE) {
-			const blockDiv = blockDivs[blockIndex];
-			const caretIndex = Caret.getCaretIndex(blockDiv);
-			const caretAtEnd = caretIndex === blockDiv.textContent.length;
-			if (caretIndex === 0 && blockIndex > 0) {
-				const prevToken = rows[blockIndex - 1];
-				const currToken = rows[blockIndex];
-				if (canMergeRows(prevToken, currToken)) {
-					event.preventDefault();
-					const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
-					const newValue = mergeDragRows(value, rows, blockIndex);
-					this.store.state.innerValue(newValue);
-					queueMicrotask(() => {
-						const target = childAt(container, blockIndex - 1);
-						if (target) {
-							target.focus();
-							const updatedToken = this.store.state.tokens()[blockIndex - 1];
-							setCaretAtRawPos(target, updatedToken, joinPos);
-						}
-					});
-					return;
-				}
+	}
+	if (event.key === KEYBOARD.DELETE) {
+		const blockDiv = blockDivs[blockIndex];
+		const caretIndex = Caret.getCaretIndex(blockDiv);
+		const caretAtEnd = caretIndex === blockDiv.textContent.length;
+		if (caretIndex === 0 && blockIndex > 0) {
+			const prevToken = rows[blockIndex - 1];
+			const currToken = rows[blockIndex];
+			if (canMergeRows(prevToken, currToken)) {
 				event.preventDefault();
+				const joinPos = getMergeDragRowJoinPos(rows, blockIndex);
+				const newValue = mergeDragRows(value, rows, blockIndex);
+				store.value.next(newValue);
 				queueMicrotask(() => {
-					const target = blockDivs[blockIndex - 1];
-					target.focus();
-					if (prevToken.type !== "mark") Caret.setCaretToEnd(target);
+					const target = childAt(container, blockIndex - 1);
+					if (target) {
+						target.focus();
+						const updatedToken = store.parsing.tokens()[blockIndex - 1];
+						setCaretAtRawPos(target, updatedToken, joinPos);
+					}
 				});
 				return;
 			}
-			if (caretAtEnd && blockIndex < rows.length - 1) {
-				const currToken = rows[blockIndex];
-				const nextToken = rows[blockIndex + 1];
-				if (canMergeRows(currToken, nextToken)) {
-					event.preventDefault();
-					const joinPos = getMergeDragRowJoinPos(rows, blockIndex + 1);
-					const newValue = mergeDragRows(value, rows, blockIndex + 1);
-					this.store.state.innerValue(newValue);
-					queueMicrotask(() => {
-						const target = childAt(container, blockIndex);
-						if (target) {
-							target.focus();
-							const updatedToken = this.store.state.tokens()[blockIndex];
-							setCaretAtRawPos(target, updatedToken, joinPos);
-						}
-					});
-					return;
-				}
+			event.preventDefault();
+			queueMicrotask(() => {
+				const target = blockDivs[blockIndex - 1];
+				target.focus();
+				if (prevToken.type !== "mark") Caret.setCaretToEnd(target);
+			});
+			return;
+		}
+		if (caretAtEnd && blockIndex < rows.length - 1) {
+			const currToken = rows[blockIndex];
+			const nextToken = rows[blockIndex + 1];
+			if (canMergeRows(currToken, nextToken)) {
 				event.preventDefault();
+				const joinPos = getMergeDragRowJoinPos(rows, blockIndex + 1);
+				const newValue = mergeDragRows(value, rows, blockIndex + 1);
+				store.value.next(newValue);
 				queueMicrotask(() => {
-					const target = blockDivs[blockIndex + 1];
-					target.focus();
-					Caret.trySetIndex(target, 0);
+					const target = childAt(container, blockIndex);
+					if (target) {
+						target.focus();
+						const updatedToken = store.parsing.tokens()[blockIndex];
+						setCaretAtRawPos(target, updatedToken, joinPos);
+					}
 				});
 				return;
 			}
-		}
-	}
-	#handleEnter(event) {
-		if (event.key !== KEYBOARD.ENTER) return;
-		if (event.shiftKey) return;
-		const container = this.store.refs.container;
-		if (!container) return;
-		const activeElement = document.activeElement;
-		if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
-		event.preventDefault();
-		const blockDivs = htmlChildren(container);
-		let blockIndex = -1;
-		for (let i = 0; i < blockDivs.length; i++) if (blockDivs[i] === activeElement || blockDivs[i].contains(activeElement)) {
-			blockIndex = i;
-			break;
-		}
-		if (blockIndex === -1) return;
-		const rows = this.store.state.tokens();
-		const token = rows[blockIndex];
-		const blockDiv = blockDivs[blockIndex];
-		const value = this.store.computed.currentValue();
-		if (!this.store.props.onChange()) return;
-		const newRowContent = createRowContent(this.store.props.options());
-		if (!isTextLikeRow(token)) {
-			const newValue = addDragRow(value, rows, blockIndex, newRowContent);
-			this.store.state.innerValue(newValue);
+			event.preventDefault();
 			queueMicrotask(() => {
-				const newBlockIndex = blockIndex + 1;
-				if (newBlockIndex < container.children.length) {
-					const newBlockEl = childAt(container, newBlockIndex);
-					if (newBlockEl) {
-						newBlockEl.focus();
-						Caret.trySetIndex(newBlockEl, 0);
-					}
-				}
+				const target = blockDivs[blockIndex + 1];
+				target.focus();
+				Caret.trySetIndex(target, 0);
 			});
 			return;
 		}
-		const absolutePos = getCaretRawPosInBlock(blockDiv, token);
-		const newValue = value.slice(0, absolutePos) + newRowContent + value.slice(absolutePos);
-		this.store.state.innerValue(newValue);
+	}
+}
+function handleEnter(store, event) {
+	if (event.key !== KEYBOARD.ENTER) return;
+	if (event.shiftKey) return;
+	const container = store.slots.container();
+	if (!container) return;
+	const activeElement = document.activeElement;
+	if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
+	event.preventDefault();
+	const blockDivs = htmlChildren(container);
+	let blockIndex = -1;
+	for (let i = 0; i < blockDivs.length; i++) if (blockDivs[i] === activeElement || blockDivs[i].contains(activeElement)) {
+		blockIndex = i;
+		break;
+	}
+	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) {
@@ -3161,456 +3287,218 @@ var BlockEditFeature = class {
 				}
 			}
 		});
+		return;
 	}
-	#handleBlockArrowLeftRight(event, direction) {
-		const container = this.store.refs.container;
-		if (!container) return false;
-		const activeElement = document.activeElement;
-		if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return false;
-		const blockDivs = htmlChildren(container);
-		const blockIndex = blockDivs.findIndex((div) => div === activeElement || div.contains(activeElement));
-		if (blockIndex === -1) return false;
-		const blockDiv = blockDivs[blockIndex];
-		if (direction === "left") {
-			if (Caret.getCaretIndex(blockDiv) !== 0) return false;
-			if (blockIndex === 0) return true;
-			event.preventDefault();
-			const prevBlock = blockDivs[blockIndex - 1];
-			prevBlock.focus();
-			Caret.setCaretToEnd(prevBlock);
-			return true;
-		}
-		if (Caret.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);
-		return true;
-	}
-	#handleArrowUpDown(event) {
-		const container = this.store.refs.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];
-		if (event.key === KEYBOARD.UP) {
-			if (!Caret.isCaretOnFirstLine(blockDiv)) return;
-			if (blockIndex === 0) return;
-			event.preventDefault();
-			const caretX = Caret.getCaretRect()?.left ?? blockDiv.getBoundingClientRect().left;
-			const prevBlockDiv = blockDivs[blockIndex - 1];
-			prevBlockDiv.focus();
-			const prevRect = prevBlockDiv.getBoundingClientRect();
-			Caret.setAtX(prevBlockDiv, caretX, prevRect.bottom - 4);
-		} else if (event.key === KEYBOARD.DOWN) {
-			if (!Caret.isCaretOnLastLine(blockDiv)) return;
-			if (blockIndex >= blockDivs.length - 1) return;
-			event.preventDefault();
-			const caretX = Caret.getCaretRect()?.left ?? blockDiv.getBoundingClientRect().left;
-			const nextBlockDiv = blockDivs[blockIndex + 1];
-			nextBlockDiv.focus();
-			const nextRect = nextBlockDiv.getBoundingClientRect();
-			Caret.setAtX(nextBlockDiv, caretX, nextRect.top + 4);
-		}
-	}
-	#handleBlockBeforeInput(event) {
-		const container = this.store.refs.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 = this.store.state.tokens();
-		if (blockIndex >= rows.length) return;
-		const token = rows[blockIndex];
-		const value = this.store.computed.currentValue();
-		const focusAndSetCaret = (newRawPos) => {
-			queueMicrotask(() => {
-				const target = childAt(container, blockIndex);
-				if (!target) return;
-				target.focus();
-				const updatedToken = this.store.state.tokens()[blockIndex];
-				setCaretAtRawPos(target, updatedToken, newRawPos);
-			});
-		};
-		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);
-				this.store.state.innerValue(value.slice(0, rawFrom) + data + value.slice(rawTo));
-				focusAndSetCaret(rawFrom + data.length);
-				break;
-			}
-			case "insertFromPaste":
-			case "insertReplacementText": {
-				event.preventDefault();
-				const pasteData = (this.store.refs.container ? consumeMarkupPaste(this.store.refs.container) : 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);
-				this.store.state.innerValue(value.slice(0, rawFrom) + pasteData + value.slice(rawTo));
-				focusAndSetCaret(rawFrom + pasteData.length);
-				break;
-			}
-			case "deleteContentBackward":
-			case "deleteContentForward":
-			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();
-				this.store.state.innerValue(value.slice(0, rawFrom) + value.slice(rawTo));
-				focusAndSetCaret(rawFrom);
-				break;
-			}
-		}
-	}
-};
-//#endregion
-//#region ../../core/src/features/drag/tokens.ts
-const EMPTY_TEXT_TOKEN = {
-	type: "text",
-	content: "",
-	position: {
-		start: 0,
-		end: 0
-	}
-};
-//#endregion
-//#region ../../core/src/features/drag/DragFeature.ts
-var DragFeature = class {
-	constructor(store) {
-		this.store = store;
-	}
-	#unsub;
-	enable() {
-		if (this.#unsub) return;
-		this.#unsub = watch(this.store.event.dragAction, (action) => {
-			switch (action.type) {
-				case "reorder":
-					this.#reorder(action.source, action.target);
-					break;
-				case "add":
-					this.#add(action.afterIndex);
-					break;
-				case "delete":
-					this.#delete(action.index);
-					break;
-				case "duplicate":
-					this.#duplicate(action.index);
-					break;
-			}
-		});
-	}
-	disable() {
-		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.state.tokens(), sourceIndex, targetIndex);
-		if (newValue !== value) this.store.state.innerValue(newValue);
-	}
-	#add(afterIndex) {
-		const value = this.store.props.value();
-		if (value == null || !this.store.props.onChange()) return;
-		const rawRows = this.store.state.tokens();
-		const rows = rawRows.length > 0 ? rawRows : [EMPTY_TEXT_TOKEN];
-		const newRowContent = createRowContent(this.store.props.options());
-		this.store.state.innerValue(addDragRow(value, rows, afterIndex, newRowContent));
-		queueMicrotask(() => {
-			const container = this.store.refs.container;
-			if (!container) return;
-			childAt(container, afterIndex + 1)?.focus();
-		});
-	}
-	#delete(index) {
-		const value = this.store.props.value();
-		if (value == null || !this.store.props.onChange()) return;
-		const rows = this.store.state.tokens();
-		this.store.state.innerValue(deleteDragRow(value, rows, index));
-	}
-	#duplicate(index) {
-		const value = this.store.props.value();
-		if (value == null || !this.store.props.onChange()) return;
-		const rows = this.store.state.tokens();
-		this.store.state.innerValue(duplicateDragRow(value, rows, index));
-	}
-};
-//#endregion
-//#region ../../core/src/shared/utils/dragUtils.ts
-function getDragDropPosition(clientY, rect) {
-	return clientY < rect.top + rect.height / 2 ? "before" : "after";
-}
-function parseDragSourceIndex(dataTransfer) {
-	const index = parseInt(dataTransfer.getData("text/plain"), 10);
-	return isNaN(index) ? null : index;
-}
-function getDragTargetIndex(blockIndex, position) {
-	return position === "before" ? blockIndex : blockIndex + 1;
-}
-//#endregion
-//#region ../../core/src/features/drag/config.ts
-function getAlwaysShowHandle(draggable) {
-	return typeof draggable === "object" && !!draggable.alwaysShowHandle;
-}
-//#endregion
-//#region ../../core/src/features/events/SystemListenerFeature.ts
-var SystemListenerFeature = class {
-	#scope;
-	constructor(store) {
-		this.store = store;
-	}
-	enable() {
-		if (this.#scope) return;
-		this.#scope = effectScope(() => {
-			watch(this.store.event.change, () => {
-				const onChange = this.store.props.onChange();
-				const { focus } = this.store.nodes;
-				if (!focus.target || !focus.target.isContentEditable) {
-					const serialized = toString(this.store.state.tokens());
-					onChange?.(serialized);
-					this.store.state.previousValue(serialized);
-					this.store.bumpTokens();
-					return;
-				}
-				const tokens = this.store.state.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.event.parse();
-			});
-			watch(this.store.event.delete, (payload) => {
-				const { token } = payload;
-				const tokens = this.store.state.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.state.innerValue(nextValue);
-			});
-			watch(this.store.state.innerValue, (newValue) => {
-				if (newValue === void 0) return;
-				const newTokens = parseWithParser(this.store, newValue);
-				batch(() => {
-					this.store.state.tokens(newTokens);
-					this.store.state.previousValue(newValue);
-				});
-				this.store.props.onChange()?.(newValue);
-			});
-			watch(this.store.event.select, (event) => {
-				const Mark = this.store.props.Mark();
-				const onChange = this.store.props.onChange();
-				const { mark, match: { option, span, index, source } } = event;
-				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.state.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
-				});
-				if (this.store.nodes.input.target) {
-					this.store.nodes.input.content = newSpan;
-					const tokens = this.store.state.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.event.parse();
-				}
-			});
-		});
-	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
-};
-//#endregion
-//#region ../../core/src/features/focus/FocusFeature.ts
-var FocusFeature = class {
-	#scope;
-	constructor(store) {
-		this.store = store;
-	}
-	enable() {
-		if (this.#scope) return;
-		const container = this.store.refs.container;
-		if (!container) return;
-		this.#scope = effectScope(() => {
-			listen(container, "focusin", (e) => {
-				const target = isHtmlElement(e.target) ? e.target : void 0;
-				this.store.nodes.focus.target = target;
-			});
-			listen(container, "focusout", () => {
-				this.store.nodes.focus.target = void 0;
-			});
-			listen(container, "click", () => {
-				const tokens = this.store.state.tokens();
-				if (tokens.length === 1 && tokens[0].type === "text" && tokens[0].content === "") {
-					const container = this.store.refs.container;
-					(container ? firstHtmlChild(container) : null)?.focus();
-				}
-			});
-			watch(this.store.event.recoverFocus, () => {
-				this.#recover();
-			});
-			watch(this.store.event.afterTokensRendered, () => {
-				this.store.event.sync();
-				if (!this.store.props.Mark()) return;
-				this.store.event.recoverFocus();
-			});
-		});
-	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-		this.store.nodes.focus.clear();
-	}
-	#recover() {
-		const recovery = this.store.state.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 = this.store.refs.container;
-				target = (recovery.childIndex != null ? childAt(container, recovery.childIndex + 2) : void 0) ?? this.store.nodes.focus.tail ?? void 0;
-				break;
+	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);
 			}
-			case isNext:
-				target = anchor.prev.target;
-				break;
-			case isStale:
-				target = this.store.nodes.focus.head ?? void 0;
-				break;
-			default: target = anchor.next.target;
 		}
-		this.store.nodes.focus.target = target;
-		target?.focus();
+	});
+}
+function handleBlockArrowLeftRight(store, event, direction) {
+	const container = store.slots.container();
+	if (!container) return false;
+	const activeElement = document.activeElement;
+	if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return false;
+	const blockDivs = htmlChildren(container);
+	const blockIndex = blockDivs.findIndex((div) => div === activeElement || div.contains(activeElement));
+	if (blockIndex === -1) return false;
+	const blockDiv = blockDivs[blockIndex];
+	if (direction === "left") {
+		if (Caret.getCaretIndex(blockDiv) !== 0) return false;
+		if (blockIndex === 0) return true;
+		event.preventDefault();
+		const prevBlock = blockDivs[blockIndex - 1];
+		prevBlock.focus();
+		Caret.setCaretToEnd(prevBlock);
+		return true;
+	}
+	if (Caret.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);
+	return true;
+}
+function handleArrowUpDown(store, event) {
+	const container = store.slots.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];
+	if (event.key === KEYBOARD.UP) {
+		if (!Caret.isCaretOnFirstLine(blockDiv)) return;
+		if (blockIndex === 0) return;
+		event.preventDefault();
+		const caretX = Caret.getCaretRect()?.left ?? blockDiv.getBoundingClientRect().left;
+		const prevBlockDiv = blockDivs[blockIndex - 1];
+		prevBlockDiv.focus();
+		const prevRect = prevBlockDiv.getBoundingClientRect();
+		Caret.setAtX(prevBlockDiv, caretX, prevRect.bottom - 4);
+	} else if (event.key === KEYBOARD.DOWN) {
+		if (!Caret.isCaretOnLastLine(blockDiv)) return;
+		if (blockIndex >= blockDivs.length - 1) return;
+		event.preventDefault();
+		const caretX = Caret.getCaretRect()?.left ?? blockDiv.getBoundingClientRect().left;
+		const nextBlockDiv = blockDivs[blockIndex + 1];
+		nextBlockDiv.focus();
+		const nextRect = nextBlockDiv.getBoundingClientRect();
+		Caret.setAtX(nextBlockDiv, caretX, nextRect.top + 4);
+	}
+}
+function handleBlockBeforeInput(store, event) {
+	const container = store.slots.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(() => {
-			if (!target?.isConnected) return;
-			this.store.nodes.focus.target = target;
-			this.store.nodes.focus.caret = caret;
+			const target = childAt(container, blockIndex);
+			if (!target) return;
+			target.focus();
+			const updatedToken = store.parsing.tokens()[blockIndex];
+			setCaretAtRawPos(target, updatedToken, newRawPos);
 		});
-		this.store.state.recovery(void 0);
+	};
+	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);
+			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);
+			break;
+		}
+		case "deleteContentBackward":
+		case "deleteContentForward":
+		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);
+			break;
+		}
 	}
-};
+}
 //#endregion
-//#region ../../core/src/features/input/InputFeature.ts
-var InputFeature = class {
-	#scope;
-	constructor(store) {
-		this.store = store;
-	}
-	enable() {
-		if (this.#scope) return;
-		const container = this.store.refs.container;
-		if (!container) return;
-		this.#scope = effectScope(() => {
-			listen(container, "keydown", (e) => {
-				if (!this.store.computed.isBlock()) this.#handleDelete(e);
-			});
-			listen(container, "paste", (e) => {
-				const c = this.store.refs.container;
-				if (c) captureMarkupPaste(e, c);
-				handlePaste(this.store, e);
-			});
-			listen(container, "beforeinput", (e) => {
-				handleBeforeInput(this.store, e);
-			}, true);
+//#region ../../core/src/features/keyboard/input.ts
+function enableInput(store) {
+	const container = store.slots.container();
+	if (!container) return () => {};
+	const scope = effectScope(() => {
+		listen(container, "keydown", (e) => {
+			if (!store.slots.isBlock()) handleDelete(store, e);
 		});
+		listen(container, "paste", (e) => {
+			const c = store.slots.container();
+			if (c) captureMarkupPaste(e, c);
+			handlePaste(store, e);
+		});
+		listen(container, "beforeinput", (e) => {
+			handleBeforeInput(store, e);
+		}, true);
+	});
+	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;
+		}
+		event.preventDefault();
+		deleteMark("self", store);
+		return;
 	}
-	disable() {
-		this.#scope?.();
-		this.#scope = void 0;
-	}
-	#handleDelete(event) {
-		const { focus } = this.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;
-			}
+	if (event.key === KEYBOARD.BACKSPACE) {
+		if (focus.isSpan && focus.isCaretAtBeginning && focus.prev.target) {
 			event.preventDefault();
-			deleteMark("self", this.store);
+			deleteMark("prev", store);
 			return;
 		}
-		if (event.key === KEYBOARD.BACKSPACE) {
-			if (focus.isSpan && focus.isCaretAtBeginning && focus.prev.target) {
-				event.preventDefault();
-				deleteMark("prev", this.store);
-				return;
-			}
+	}
+	if (event.key === KEYBOARD.DELETE) {
+		if (focus.isSpan && focus.isCaretAtEnd && focus.next.target) {
+			event.preventDefault();
+			deleteMark("next", store);
+			return;
 		}
-		if (event.key === KEYBOARD.DELETE) {
-			if (focus.isSpan && focus.isCaretAtEnd && focus.next.target) {
-				event.preventDefault();
-				deleteMark("next", this.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 (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;
-				this.store.event.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;
-				this.store.event.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;
 		}
 	}
-};
+}
 function handleBeforeInput(store, event) {
-	const selecting = store.state.selecting();
+	const selecting = store.caret.selecting();
 	if (selecting === "all" && isFullSelection(store)) {
 		if (event.inputType === "insertFromPaste") {
 			event.preventDefault();
@@ -3620,22 +3508,22 @@ function handleBeforeInput(store, event) {
 		replaceAllContentWith(store, event.inputType.startsWith("delete") ? "" : event.data ?? "");
 		return;
 	}
-	if (selecting === "all") store.state.selecting(void 0);
-	if (store.computed.isBlock()) return;
+	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.event.change();
+	if (applySpanInput(focus, event)) store.value.change();
 }
 function handleMarkputSpanPaste(store, focus, event) {
-	const container = store.refs.container;
+	const container = store.slots.container();
 	if (!container) return false;
 	const markup = consumeMarkupPaste(container);
 	if (!markup) return false;
 	event.preventDefault();
-	const token = store.state.tokens()[focus.index];
+	const token = store.parsing.tokens()[focus.index];
 	const offset = focus.caret;
-	const currentValue = store.computed.currentValue();
+	const currentValue = store.value.current();
 	const ranges = event.getTargetRanges();
 	const childElement = container.children[focus.index];
 	let rawInsertPos;
@@ -3651,12 +3539,12 @@ function handleMarkputSpanPaste(store, focus, event) {
 	}
 	const caretPos = rawInsertPos + markup.length;
 	const newValue = currentValue.slice(0, rawInsertPos) + markup + currentValue.slice(rawEndPos);
-	store.state.innerValue(newValue);
-	const newTokens = store.state.tokens();
+	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.state.recovery({
+	store.caret.recovery({
 		anchor: store.nodes.focus,
 		caret: caretWithinToken,
 		isNext: true,
@@ -3719,20 +3607,21 @@ function applySpanInput(focus, event) {
 	return true;
 }
 function handlePaste(store, event) {
-	const selecting = store.state.selecting();
+	const selecting = store.caret.selecting();
 	if (selecting !== "all" || !isFullSelection(store)) {
-		if (selecting === "all") store.state.selecting(void 0);
+		if (selecting === "all") store.caret.selecting(void 0);
 		return;
 	}
 	event.preventDefault();
-	replaceAllContentWith(store, (store.refs.container ? consumeMarkupPaste(store.refs.container) : void 0) ?? event.clipboardData?.getData("text/plain") ?? "");
+	const c = store.slots.container();
+	replaceAllContentWith(store, (c ? consumeMarkupPaste(c) : void 0) ?? event.clipboardData?.getData("text/plain") ?? "");
 }
 function replaceAllContentWith(store, newContent) {
 	store.nodes.focus.target = null;
-	store.state.selecting(void 0);
-	store.state.previousValue(newContent);
+	store.caret.selecting(void 0);
+	store.value.last(newContent);
 	store.props.onChange()?.(newContent);
-	if (store.props.value() === void 0) store.state.tokens(store.computed.parser()?.parse(newContent) ?? [{
+	if (store.props.value() === void 0) store.parsing.tokens(store.parsing.parser()?.parse(newContent) ?? [{
 		type: "text",
 		content: newContent,
 		position: {
@@ -3741,17 +3630,247 @@ function replaceAllContentWith(store, newContent) {
 		}
 	}]);
 	queueMicrotask(() => {
-		const rawFirstChild = store.refs.container?.firstChild;
+		const rawFirstChild = store.slots.container()?.firstChild;
 		const firstChild = isHtmlElement(rawFirstChild) ? rawFirstChild : null;
 		if (firstChild) {
-			store.state.recovery({
+			store.caret.recovery({
 				anchor: store.nodes.focus,
 				caret: newContent.length
 			});
-			firstChild.focus();
-		}
-	});
-}
+			firstChild.focus();
+		}
+	});
+}
+//#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 = [];
+	}
+};
+//#endregion
+//#region ../../core/src/features/lifecycle/LifecycleFeature.ts
+var LifecycleFeature = class {
+	constructor(_store) {
+		this._store = _store;
+		this.mounted = event();
+		this.unmounted = event();
+		this.rendered = event();
+	}
+	enable() {}
+	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();
+	}
+	get value() {
+		return this.#token.value;
+	}
+	set value(v) {
+		this.#token.value = v ?? "";
+		this.#emitChange();
+	}
+	get meta() {
+		return this.#token.meta;
+	}
+	set meta(v) {
+		this.#token.meta = v;
+		this.#emitChange();
+	}
+	get slot() {
+		return this.#token.slot?.content;
+	}
+	get #tokenInfo() {
+		return findToken(this.#store.parsing.tokens(), this.#token);
+	}
+	get depth() {
+		return this.#tokenInfo?.depth ?? 0;
+	}
+	get hasChildren() {
+		return this.#token.children.some((child) => child.type === "mark");
+	}
+	get parent() {
+		return this.#tokenInfo?.parent;
+	}
+	get tokens() {
+		return this.#token.children;
+	}
+	#emitChange() {
+		this.#store.value.change();
+	}
+};
+//#endregion
+//#region ../../core/src/shared/utils/dataAttributes.ts
+/**
+* Converts object with camelCase data attribute keys to kebab-case data-* attributes
+*
+* Takes keys like 'dataUserId' and converts to 'data-user-id'
+*
+* @param obj - Object potentially containing camelCase data attribute keys
+* @returns New object with converted data attributes
+*
+* @example
+* convertDataAttrs({ dataUserId: '123', dataUserName: 'John', className: 'test' })
+* // Returns: { 'data-user-id': '123', 'data-user-name': 'John', className: 'test' }
+*
+* convertDataAttrs({ dataTestId * @example
+: 'test', dataFoo: 'bar' })
+* // Returns: { 'data-test-id': 'test', 'data-foo': 'bar' }
+*/
+function convertDataAttrs(obj) {
+	if (!obj) return {};
+	return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
+		if (key.startsWith("data") && key.length > 4 && key[4] === key[4].toUpperCase()) return [`data-${key.slice(4).replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`, value];
+		return [key, value];
+	}));
+}
+//#endregion
+//#region ../../core/src/features/slots/resolveOptionSlot.ts
+function resolveOptionSlot(optionConfig, baseProps) {
+	if (optionConfig !== void 0) return typeof optionConfig === "function" ? optionConfig(baseProps) : optionConfig;
+	return baseProps;
+}
+//#endregion
+//#region ../../core/src/features/slots/resolveSlot.ts
+const defaultSlots = {
+	container: "div",
+	block: "div",
+	span: "span"
+};
+function resolveSlot(slotName, slots) {
+	return slots?.[slotName] ?? defaultSlots[slotName];
+}
+function resolveSlotProps(slotName, slotProps) {
+	const props = slotProps?.[slotName];
+	return props ? convertDataAttrs(props) : void 0;
+}
+function resolveOverlaySlot(globalComponent, option, defaultComponent) {
+	const Component = option?.Overlay ?? globalComponent ?? defaultComponent;
+	if (!Component) throw new Error("No overlay component found. Provide either option.Overlay, global Overlay, or a defaultComponent.");
+	return [Component, resolveOptionSlot(option?.overlay, {})];
+}
+function resolveMarkSlot(token, tokenOptions, GlobalMark, GlobalSpan) {
+	if (token.type === "text") return [GlobalSpan ?? "span", GlobalSpan ? { value: token.content } : {}];
+	const option = tokenOptions?.[token.descriptor.index];
+	const baseProps = {
+		value: token.value,
+		meta: token.meta
+	};
+	const props = resolveOptionSlot(option?.mark, baseProps);
+	const Component = option?.Mark ?? GlobalMark;
+	if (!Component) throw new Error("No mark component found. Provide either option.Mark or global Mark.");
+	return [Component, props];
+}
+//#endregion
+//#region ../../core/src/features/slots/SlotsFeature.ts
+const DRAG_HANDLE_WIDTH = 24;
+function buildContainerProps(isDraggableBlock, readOnly, className, style, slotProps) {
+	const containerSlotProps = slotProps?.container;
+	const baseStyle = merge(style, containerSlotProps?.style);
+	const mergedStyle = isDraggableBlock && !readOnly ? {
+		paddingLeft: DRAG_HANDLE_WIDTH,
+		...baseStyle
+	} : baseStyle;
+	const { className: _, style: __, ...otherSlotProps } = resolveSlotProps("container", slotProps) ?? {};
+	return {
+		className: cx(styles.Container, className, containerSlotProps?.className),
+		style: mergedStyle,
+		...otherSlotProps
+	};
+}
+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()));
+		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() {}
+};
+//#endregion
+//#region ../../core/src/features/mark/MarkFeature.ts
+var MarkFeature = class {
+	#scope;
+	constructor(_store) {
+		this._store = _store;
+		this.enabled = computed(() => {
+			if (this._store.props.Mark()) return true;
+			return this._store.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();
+			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;
+	}
+};
 //#endregion
 //#region ../../core/src/features/overlay/filterSuggestions.ts
 function filterSuggestions(data, search) {
@@ -3789,45 +3908,84 @@ function createMarkFromOverlay(match, value, meta) {
 //#region ../../core/src/features/overlay/OverlayFeature.ts
 var OverlayFeature = class {
 	#scope;
-	constructor(store) {
-		this.store = store;
+	constructor(_store) {
+		this._store = _store;
+		this.match = signal(void 0);
+		this.element = signal(null);
+		this.slot = computed(() => {
+			const Overlay = this._store.props.Overlay();
+			return (option, defaultComponent) => resolveOverlaySlot(Overlay, option, defaultComponent);
+		});
+		this.select = event();
+		this.close = event();
+	}
+	#probeTrigger() {
+		const match = TriggerFinder.find(this._store.props.options(), (option) => option.overlay?.trigger);
+		this.match(match);
 	}
 	enable() {
 		if (this.#scope) return;
 		this.#scope = effectScope(() => {
-			watch(this.store.event.clearOverlay, () => {
-				this.store.state.overlayMatch(void 0);
-			});
-			watch(this.store.event.checkOverlay, () => {
-				const match = TriggerFinder.find(this.store.props.options(), (option) => option.overlay?.trigger);
-				this.store.state.overlayMatch(match);
+			watch(this.close, () => {
+				this.match(void 0);
 			});
-			watch(this.store.event.change, () => {
-				const showOverlayOn = this.store.props.showOverlayOn();
+			watch(this._store.value.change, () => {
+				const showOverlayOn = this._store.props.showOverlayOn();
 				const type = "change";
-				if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.store.event.checkOverlay();
+				if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.#probeTrigger();
 			});
 			alienEffect(() => {
-				if (this.store.state.overlayMatch()) {
-					this.store.nodes.input.target = this.store.nodes.focus.target;
+				if (this.match()) {
+					this._store.nodes.input.target = this._store.nodes.focus.target;
 					listen(window, "keydown", (e) => {
-						if (e.key === KEYBOARD.ESC) this.store.event.clearOverlay();
+						if (e.key === KEYBOARD.ESC) this.close();
 					});
 					listen(document, "click", (e) => {
 						const target = e.target instanceof HTMLElement ? e.target : null;
-						if (this.store.refs.overlay?.contains(target)) return;
-						if (this.store.refs.container?.contains(target)) return;
-						this.store.event.clearOverlay();
+						if (this.element()?.contains(target)) return;
+						if (this._store.slots.container()?.contains(target)) return;
+						this.close();
 					}, true);
 				}
 			});
 			const selectionChangeHandler = () => {
-				if (!this.store.refs.container?.contains(document.activeElement)) return;
-				const showOverlayOn = this.store.props.showOverlayOn();
+				if (!this._store.slots.container()?.contains(document.activeElement)) return;
+				const showOverlayOn = this._store.props.showOverlayOn();
 				const type = "selectionChange";
-				if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.store.event.checkOverlay();
+				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 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
+				});
+				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();
+				}
+			});
 		});
 	}
 	disable() {
@@ -3866,67 +4024,86 @@ function navigateSuggestions(key, activeIndex, length) {
 	}
 }
 //#endregion
-//#region ../../core/src/shared/utils/dataAttributes.ts
-/**
-* Converts object with camelCase data attribute keys to kebab-case data-* attributes
-*
-* Takes keys like 'dataUserId' and converts to 'data-user-id'
-*
-* @param obj - Object potentially containing camelCase data attribute keys
-* @returns New object with converted data attributes
-*
-* @example
-* convertDataAttrs({ dataUserId: '123', dataUserName: 'John', className: 'test' })
-* // Returns: { 'data-user-id': '123', 'data-user-name': 'John', className: 'test' }
-*
-* convertDataAttrs({ dataTestId * @example
-: 'test', dataFoo: 'bar' })
-* // Returns: { 'data-test-id': 'test', 'data-foo': 'bar' }
-*/
-function convertDataAttrs(obj) {
-	if (!obj) return {};
-	return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
-		if (key.startsWith("data") && key.length > 4 && key[4] === key[4].toUpperCase()) return [`data-${key.slice(4).replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`, value];
-		return [key, value];
-	}));
-}
-//#endregion
-//#region ../../core/src/features/slots/resolveOptionSlot.ts
-function resolveOptionSlot(optionConfig, baseProps) {
-	if (optionConfig !== void 0) return typeof optionConfig === "function" ? optionConfig(baseProps) : optionConfig;
-	return baseProps;
-}
+//#region ../../core/src/features/props/PropsFeature.ts
+var PropsFeature = class {
+	constructor(_store) {
+		this._store = _store;
+		this.value = signal(void 0, { readonly: true });
+		this.defaultValue = signal(void 0, { readonly: true });
+		this.onChange = signal(void 0, { readonly: true });
+		this.options = signal(DEFAULT_OPTIONS, { readonly: true });
+		this.readOnly = signal(false, { readonly: true });
+		this.layout = signal("inline", { readonly: true });
+		this.draggable = signal(false, { readonly: true });
+		this.showOverlayOn = signal("change", { readonly: true });
+		this.Span = signal(void 0, { readonly: true });
+		this.Mark = signal(void 0, { readonly: true });
+		this.Overlay = signal(void 0, { readonly: true });
+		this.className = signal(void 0, { readonly: true });
+		this.style = signal(void 0, {
+			equals: shallow,
+			readonly: true
+		});
+		this.slots = signal(void 0, { readonly: true });
+		this.slotProps = signal(void 0, { readonly: true });
+	}
+	set(values) {
+		batch(() => {
+			for (const key of Object.keys(values)) {
+				if (!(key in this)) continue;
+				this[key](values[key]);
+			}
+		}, { mutable: true });
+	}
+};
 //#endregion
-//#region ../../core/src/features/slots/resolveSlot.ts
-const defaultSlots = {
-	container: "div",
-	block: "div",
-	span: "span"
+//#region ../../core/src/features/value/ValueFeature.ts
+var ValueFeature = class {
+	#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.change = event();
+	}
+	enable() {
+		if (this.#scope) return;
+		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);
+			});
+		});
+	}
+	disable() {
+		this.#scope?.();
+		this.#scope = void 0;
+	}
 };
-function resolveSlot(slotName, slots) {
-	return slots?.[slotName] ?? defaultSlots[slotName];
-}
-function resolveSlotProps(slotName, slotProps) {
-	const props = slotProps?.[slotName];
-	return props ? convertDataAttrs(props) : void 0;
-}
-function resolveOverlaySlot(globalComponent, option, defaultComponent) {
-	const Component = option?.Overlay ?? globalComponent ?? defaultComponent;
-	if (!Component) throw new Error("No overlay component found. Provide either option.Overlay, global Overlay, or a defaultComponent.");
-	return [Component, resolveOptionSlot(option?.overlay, {})];
-}
-function resolveMarkSlot(token, tokenOptions, GlobalMark, GlobalSpan) {
-	if (token.type === "text") return [GlobalSpan ?? "span", GlobalSpan ? { value: token.content } : {}];
-	const option = tokenOptions?.[token.descriptor.index];
-	const baseProps = {
-		value: token.value,
-		meta: token.meta
-	};
-	const props = resolveOptionSlot(option?.mark, baseProps);
-	const Component = option?.Mark ?? GlobalMark;
-	if (!Component) throw new Error("No mark component found. Provide either option.Mark or global Mark.");
-	return [Component, props];
-}
 //#endregion
 //#region ../../core/src/shared/utils/menuUtils.ts
 /**
@@ -3945,17 +4122,41 @@ function isEscapeKey(e) {
 //#endregion
 //#region ../../core/src/store/BlockStore.ts
 var BlockStore = class {
-	refs = { container: null };
-	state = {
-		isHovered: signal(false),
-		isDragging: signal(false),
-		dropPosition: signal(null),
-		menuOpen: signal(false),
-		menuPosition: signal({
-			top: 0,
-			left: 0
-		})
-	};
+	constructor() {
+		this.refs = { container: null };
+		this.state = {
+			isHovered: signal(false),
+			isDragging: signal(false),
+			dropPosition: signal(null),
+			menuOpen: signal(false),
+			menuPosition: signal({
+				top: 0,
+				left: 0
+			})
+		};
+		this.closeMenu = () => this.state.menuOpen(false);
+		this.addBlock = () => {
+			this.#emit({
+				type: "add",
+				afterIndex: this.#blockIndex
+			});
+			this.closeMenu();
+		};
+		this.deleteBlock = () => {
+			this.#emit({
+				type: "delete",
+				index: this.#blockIndex
+			});
+			this.closeMenu();
+		};
+		this.duplicateBlock = () => {
+			this.#emit({
+				type: "duplicate",
+				index: this.#blockIndex
+			});
+			this.closeMenu();
+		};
+	}
 	#blockIndex = 0;
 	#dragAction = null;
 	#cleanupContainer;
@@ -3963,7 +4164,7 @@ var BlockStore = class {
 	#cleanupMenu;
 	attachContainer(el, blockIndex, actions) {
 		this.#blockIndex = blockIndex;
-		this.#dragAction = actions.dragAction;
+		this.#dragAction = actions.action;
 		if (el === this.refs.container) return;
 		this.#cleanupContainer?.();
 		this.refs.container = el;
@@ -4009,7 +4210,7 @@ var BlockStore = class {
 	}
 	attachGrip(el, blockIndex, actions) {
 		this.#blockIndex = blockIndex;
-		this.#dragAction = actions.dragAction;
+		this.#dragAction = actions.action;
 		this.#cleanupGrip?.();
 		if (!el) return;
 		const onDragStart = (e) => {
@@ -4057,28 +4258,6 @@ var BlockStore = class {
 			document.removeEventListener("keydown", onKeyDown);
 		};
 	}
-	closeMenu = () => this.state.menuOpen(false);
-	addBlock = () => {
-		this.#emit({
-			type: "add",
-			afterIndex: this.#blockIndex
-		});
-		this.closeMenu();
-	};
-	deleteBlock = () => {
-		this.#emit({
-			type: "delete",
-			index: this.#blockIndex
-		});
-		this.closeMenu();
-	};
-	duplicateBlock = () => {
-		this.#emit({
-			type: "duplicate",
-			index: this.#blockIndex
-		});
-		this.closeMenu();
-	};
 	#emit(action) {
 		this.#dragAction?.(action);
 	}
@@ -4098,218 +4277,53 @@ var BlockRegistry = class {
 };
 //#endregion
 //#region ../../core/src/store/Store.ts
-const DRAG_HANDLE_WIDTH = 24;
-function buildContainerProps(isDraggableBlock, readOnly, className, style, slotProps) {
-	const containerSlotProps = slotProps?.container;
-	const baseStyle = merge(style, containerSlotProps?.style);
-	const mergedStyle = isDraggableBlock && !readOnly ? {
-		paddingLeft: DRAG_HANDLE_WIDTH,
-		...baseStyle
-	} : baseStyle;
-	const { className: _, style: __, ...otherSlotProps } = resolveSlotProps("container", slotProps) ?? {};
-	return {
-		className: cx(styles.Container, className, containerSlotProps?.className),
-		style: mergedStyle,
-		...otherSlotProps
-	};
-}
 var Store = class {
-	key = new KeyGenerator();
-	blocks = new BlockRegistry();
-	nodes = {
-		focus: new NodeProxy(void 0, this),
-		input: new NodeProxy(void 0, this)
-	};
-	props = {
-		value: signal(void 0, { readonly: true }),
-		defaultValue: signal(void 0, { readonly: true }),
-		onChange: signal(void 0, { readonly: true }),
-		options: signal(DEFAULT_OPTIONS, { readonly: true }),
-		readOnly: signal(false, { readonly: true }),
-		layout: signal("inline", { readonly: true }),
-		draggable: signal(false, { readonly: true }),
-		showOverlayOn: signal("change", { readonly: true }),
-		Span: signal(void 0, { readonly: true }),
-		Mark: signal(void 0, { readonly: true }),
-		Overlay: signal(void 0, { readonly: true }),
-		className: signal(void 0, { readonly: true }),
-		style: signal(void 0, {
-			equals: shallow,
-			readonly: true
-		}),
-		slots: signal(void 0, { readonly: true }),
-		slotProps: signal(void 0, { readonly: true })
-	};
-	state = {
-		tokens: signal([]),
-		previousValue: signal(void 0),
-		innerValue: signal(void 0),
-		recovery: signal(void 0),
-		selecting: signal(void 0),
-		overlayMatch: signal(void 0)
-	};
-	computed = {
-		hasMark: computed(() => {
-			if (this.props.Mark()) return true;
-			return this.props.options().some((opt) => "Mark" in opt && opt.Mark != null);
-		}),
-		isBlock: computed(() => this.props.layout() === "block"),
-		isDraggable: computed(() => !!this.props.draggable()),
-		parser: computed(() => {
-			if (!this.computed.hasMark()) return;
-			const markups = this.props.options().map((opt) => opt.markup);
-			if (!markups.some(Boolean)) return;
-			return new Parser(markups, this.computed.isBlock() ? { skipEmptyText: true } : void 0);
-		}),
-		currentValue: computed(() => this.state.previousValue() ?? this.props.value() ?? ""),
-		containerComponent: computed(() => resolveSlot("container", this.props.slots())),
-		containerProps: computed(() => buildContainerProps(this.computed.isDraggable() && this.computed.isBlock(), this.props.readOnly(), this.props.className(), this.props.style(), this.props.slotProps()), { equals: shallow }),
-		blockComponent: computed(() => resolveSlot("block", this.props.slots())),
-		blockProps: computed(() => resolveSlotProps("block", this.props.slotProps())),
-		spanComponent: computed(() => resolveSlot("span", this.props.slots())),
-		spanProps: computed(() => resolveSlotProps("span", this.props.slotProps())),
-		overlay: computed(() => {
-			const Overlay = this.props.Overlay();
-			return (option, defaultComponent) => resolveOverlaySlot(Overlay, option, defaultComponent);
-		}),
-		mark: computed(() => {
-			const options = this.props.options();
-			const Mark = this.props.Mark();
-			const Span = this.props.Span();
-			return (token) => resolveMarkSlot(token, options, Mark, Span);
-		})
-	};
-	event = {
-		change: event(),
-		parse: event(),
-		delete: event(),
-		select: event(),
-		clearOverlay: event(),
-		checkOverlay: event(),
-		sync: event(),
-		recoverFocus: event(),
-		dragAction: event(),
-		updated: event(),
-		afterTokensRendered: event(),
-		mounted: event(),
-		unmounted: event()
-	};
-	refs = {
-		container: null,
-		overlay: null
-	};
-	handler = new MarkputHandler(this);
-	features = {
-		overlay: new OverlayFeature(this),
-		focus: new FocusFeature(this),
-		input: new InputFeature(this),
-		blockEditing: new BlockEditFeature(this),
-		arrowNav: new ArrowNavFeature(this),
-		system: new SystemListenerFeature(this),
-		textSelection: new TextSelectionFeature(this),
-		contentEditable: new ContentEditableFeature(this),
-		drag: new DragFeature(this),
-		copy: new CopyFeature(this),
-		parse: new ParseFeature(this)
-	};
 	constructor() {
-		watch(this.event.mounted, () => Object.values(this.features).forEach((f) => f.enable()));
-		watch(this.event.unmounted, () => Object.values(this.features).forEach((f) => f.disable()));
-	}
-	setProps(values) {
-		batch(() => {
-			const props = this.props;
-			for (const key of Object.keys(values)) {
-				if (!(key in props)) continue;
-				props[key](values[key]);
-			}
-		}, { mutable: true });
-	}
-	bumpTokens() {
-		this.state.tokens([...this.state.tokens()]);
-	}
-};
-//#endregion
-//#region ../../core/src/features/mark/MarkHandler.ts
-var MarkHandler = class {
-	ref;
-	#store;
-	#token;
-	#readOnly;
-	constructor(param) {
-		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();
-	}
-	get value() {
-		return this.#token.value;
-	}
-	set value(v) {
-		this.#token.value = v ?? "";
-		this.#emitChange();
-	}
-	get meta() {
-		return this.#token.meta;
-	}
-	set meta(v) {
-		this.#token.meta = v;
-		this.#emitChange();
-	}
-	get slot() {
-		return this.#token.slot?.content;
-	}
-	get #tokenInfo() {
-		return findToken(this.#store.state.tokens(), this.#token);
-	}
-	get depth() {
-		return this.#tokenInfo?.depth ?? 0;
-	}
-	get hasChildren() {
-		return this.#token.children.some((child) => child.type === "mark");
-	}
-	get parent() {
-		return this.#tokenInfo?.parent;
-	}
-	get tokens() {
-		return this.#token.children;
-	}
-	change = (props) => {
-		this.#token.content = props.content;
-		this.#token.value = props.value ?? "";
-		if (props.meta !== void 0) this.#token.meta = props.meta;
-		this.#emitChange();
-	};
-	remove = () => this.#store.event.delete({ token: this.#token });
-	#emitChange() {
-		this.#store.event.change();
+		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.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()));
 	}
 };
 //#endregion
 //#region src/lib/providers/StoreContext.ts
 const StoreContext = createContext(void 0);
 StoreContext.displayName = "StoreContext";
-function useStore() {
-	const store = useContext(StoreContext);
-	if (store === void 0) throw new Error("Store not found. Make sure to wrap component in StoreContext.");
-	return store;
-}
 //#endregion
 //#region src/lib/hooks/useMarkput.ts
 function useMarkput(selector) {
-	const store = useStore();
+	const store = useContext(StoreContext);
+	if (store === void 0) throw new Error("Store not found. Make sure to wrap component in StoreContext.");
 	const stableRef = useRef(null);
 	if (stableRef.current === null) {
 		const target = selector(store);
@@ -4365,10 +4379,10 @@ const Popup = ({ ref, style, children }) => {
 //#endregion
 //#region src/components/BlockMenu.tsx
 const BlockMenu = memo(({ token }) => {
-	const blockStore = useStore().blocks.get(token);
-	const { menuOpen, menuPosition } = useMarkput(() => ({
-		menuOpen: blockStore.state.menuOpen,
-		menuPosition: blockStore.state.menuPosition
+	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
 	}));
 	if (!menuOpen) return null;
 	return /* @__PURE__ */ jsx(Popup, {
@@ -4398,20 +4412,20 @@ BlockMenu.displayName = "BlockMenu";
 //#region src/components/DragHandle.tsx
 const iconGrip = `${styles$1.Icon} ${styles$1.IconGrip}`;
 const DragHandle = memo(({ token, blockIndex }) => {
-	const store = useStore();
-	const blockStore = store.blocks.get(token);
-	const { readOnly, draggable } = useMarkput((s) => ({
+	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
+		draggable: s.props.draggable,
+		isDragging: s.blocks.get(token).state.isDragging,
+		isHovered: s.blocks.get(token).state.isHovered
 	}));
-	const isDragging = useMarkput(() => blockStore.state.isDragging);
-	const isHovered = useMarkput(() => blockStore.state.isHovered);
 	const alwaysShowHandle = useMemo(() => getAlwaysShowHandle(draggable), [draggable]);
 	if (readOnly) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: cx(styles$1.SidePanel, alwaysShowHandle ? styles$1.SidePanelAlways : isHovered && !isDragging && styles$1.SidePanelVisible),
 		children: /* @__PURE__ */ jsx("button", {
-			ref: (el) => blockStore.attachGrip(el, blockIndex, store.event),
+			ref: (el) => blockStore.attachGrip(el, blockIndex, { action }),
 			type: "button",
 			draggable: true,
 			className: cx(styles$1.GripButton, isDragging && styles$1.GripButtonDragging),
@@ -4424,8 +4438,7 @@ DragHandle.displayName = "DragHandle";
 //#endregion
 //#region src/components/DropIndicator.tsx
 const DropIndicator = memo(({ token, position }) => {
-	const blockStore = useStore().blocks.get(token);
-	if (useMarkput(() => blockStore.state.dropPosition) !== position) return null;
+	if (useMarkput((s) => s.blocks.get(token).state.dropPosition) !== position) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: styles$1.DropIndicator,
 		style: position === "before" ? { top: -1 } : { bottom: -1 }
@@ -4444,12 +4457,15 @@ function useToken() {
 //#endregion
 //#region src/components/Token.tsx
 const Token = memo(({ mark }) => {
-	const store = useStore();
-	const [Component, props] = useMarkput((s) => s.computed.mark)(mark);
+	const { resolveMarkSlot, key } = useMarkput((s) => ({
+		resolveMarkSlot: s.mark.slot,
+		key: s.key
+	}));
+	const [Component, props] = resolveMarkSlot(mark);
 	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 }, store.key.get(child))) : void 0,
+			children: mark.type === "mark" && mark.children.length > 0 ? mark.children.map((child) => /* @__PURE__ */ jsx(Token, { mark: child }, key.get(child))) : void 0,
 			...props
 		})
 	});
@@ -4457,14 +4473,18 @@ const Token = memo(({ mark }) => {
 Token.displayName = "Token";
 //#endregion
 //#region src/components/Block.tsx
-const Block = memo(({ token, blockIndex }) => {
-	const store = useStore();
-	const blockStore = store.blocks.get(token);
-	const Component = useMarkput((s) => s.computed.blockComponent);
-	const slotProps = useMarkput((s) => s.computed.blockProps);
-	const isDragging = useMarkput(() => blockStore.state.isDragging);
+const Block = memo(({ token }) => {
+	const { blockStore, action, Component, slotProps, isDragging, tokens } = useMarkput((s) => ({
+		blockStore: s.blocks.get(token),
+		action: s.drag.action,
+		Component: s.slots.blockComponent,
+		slotProps: s.slots.blockProps,
+		isDragging: s.blocks.get(token).state.isDragging,
+		tokens: s.parsing.tokens
+	}));
+	const blockIndex = tokens.indexOf(token);
 	return /* @__PURE__ */ jsxs(Component, {
-		ref: (el) => blockStore.attachContainer(el, blockIndex, store.event),
+		ref: (el) => blockStore.attachContainer(el, blockIndex, { action }),
 		"data-testid": "block",
 		...slotProps,
 		className: cx(styles$1.Block, slotProps?.className),
@@ -4494,33 +4514,38 @@ Block.displayName = "Block";
 //#endregion
 //#region src/components/Container.tsx
 const Container = memo(() => {
-	const { layout, tokens, key, refs, event } = useMarkput((s) => ({
-		layout: s.props.layout,
-		tokens: s.state.tokens,
+	const storeCtx = useContext(StoreContext);
+	if (!storeCtx) throw new Error("Store not found");
+	const store = storeCtx;
+	const { isBlock, tokens, key, lifecycleEmit, Component, props } = useMarkput((s) => ({
+		isBlock: s.slots.isBlock,
+		tokens: s.parsing.tokens,
 		key: s.key,
-		refs: s.refs,
-		event: s.event
+		lifecycleEmit: s.lifecycle,
+		Component: s.slots.containerComponent,
+		props: s.slots.containerProps
 	}));
-	const Component = useMarkput((s) => s.computed.containerComponent);
-	const props = useMarkput((s) => s.computed.containerProps);
 	useLayoutEffect(() => {
-		event.afterTokensRendered();
-	}, [tokens, event]);
+		lifecycleEmit.rendered();
+	}, [tokens, lifecycleEmit]);
 	return /* @__PURE__ */ jsx(Component, {
-		ref: (el) => refs.container = el,
+		ref: store.slots.container,
 		...props,
-		children: layout === "block" ? tokens.map((t, i) => /* @__PURE__ */ jsx(Block, {
-			token: t,
-			blockIndex: i
-		}, 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, { mark: t }, key.get(t)))
 	});
 });
 Container.displayName = "Container";
 //#endregion
 //#region src/lib/hooks/useOverlay.tsx
 function useOverlay() {
-	const store = useStore();
-	const match = useMarkput((s) => s.state.overlayMatch);
+	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 style = useMemo(() => {
 		if (!match) return {
 			left: 0,
@@ -4528,34 +4553,36 @@ function useOverlay() {
 		};
 		return Caret.getAbsolutePosition();
 	}, [match]);
-	const close = useCallback(() => store.event.clearOverlay(), []);
+	const close = useCallback(() => store.overlay.close(), [store]);
 	return {
 		match,
 		style,
 		select: useCallback((value) => {
 			if (!match) return;
 			const mark = createMarkFromOverlay(match, value.value, value.meta);
-			store.event.select({
+			store.overlay.select({
 				mark,
 				match
 			});
-			store.event.clearOverlay();
-		}, [match]),
+			store.overlay.close();
+		}, [match, store]),
 		close,
 		ref: useMemo(() => ({
 			get current() {
-				return store.refs.overlay;
+				return store.overlay.element();
 			},
 			set current(v) {
-				store.refs.overlay = v;
+				store.overlay.element(v);
 			}
-		}), [])
+		}), [store])
 	};
 }
 //#endregion
 //#region src/components/Suggestions/Suggestions.tsx
 const Suggestions = () => {
-	const store = useStore();
+	const storeCtx = useContext(StoreContext);
+	if (!storeCtx) throw new Error("Store not found");
+	const store = storeCtx;
 	const { match, select, style, ref } = useOverlay();
 	const [active, setActive] = useState(NaN);
 	const data = match?.option.overlay?.data ?? [];
@@ -4566,7 +4593,7 @@ const Suggestions = () => {
 	const filteredRef = useRef(filtered);
 	filteredRef.current = filtered;
 	useEffect(() => {
-		const container = store.refs.container;
+		const container = store.slots.container();
 		if (!container) return;
 		const handler = (event) => {
 			const result = navigateSuggestions(event.key, activeRef.current, length);
@@ -4608,10 +4635,13 @@ const Suggestions = () => {
 //#endregion
 //#region src/components/OverlayRenderer.tsx
 const OverlayRenderer = memo(() => {
-	const store = useStore();
-	const overlayMatch = useMarkput((s) => s.state.overlayMatch);
-	const key = useMemo(() => overlayMatch ? store.key.get(overlayMatch.option) : void 0, [overlayMatch]);
-	const [Overlay, props] = useMarkput((s) => s.computed.overlay)(overlayMatch?.option, Suggestions);
+	const { match, key: keyGen, resolveOverlay } = useMarkput((s) => ({
+		match: s.overlay.match,
+		key: s.key,
+		resolveOverlay: s.overlay.slot
+	}));
+	const key = useMemo(() => match ? keyGen.get(match.option) : void 0, [match]);
+	const [Overlay, props] = resolveOverlay(match?.option, Suggestions);
 	if (!key) return;
 	return /* @__PURE__ */ jsx(Overlay, { ...props }, key);
 });
@@ -4620,12 +4650,11 @@ OverlayRenderer.displayName = "OverlayRenderer";
 //#region src/components/MarkedInput.tsx
 function MarkedInput(props) {
 	const [store] = useState(() => new Store());
-	store.setProps(props);
+	store.props.set(props);
 	useLayoutEffect(() => {
-		store.event.mounted();
-		return () => store.event.unmounted();
+		store.lifecycle.mounted();
+		return () => store.lifecycle.unmounted();
 	}, []);
-	useLayoutEffect(() => store.event.updated());
 	useImperativeHandle(props.ref, () => store.handler, [store]);
 	return /* @__PURE__ */ jsxs(StoreContext, {
 		value: store,
@@ -4635,7 +4664,10 @@ function MarkedInput(props) {
 //#endregion
 //#region src/lib/hooks/useMark.tsx
 const useMark = (options = {}) => {
-	const store = useStore();
+	const { store, readOnly } = useMarkput((s) => ({
+		store: s,
+		readOnly: s.props.readOnly
+	}));
 	const token = useToken();
 	if (token.type !== "mark") throw new Error("useMark must be called within a mark token context");
 	const ref = useRef(null);
@@ -4645,7 +4677,6 @@ const useMark = (options = {}) => {
 		token
 	}), [store, token]);
 	useUncontrolledInit(ref, options, token);
-	const readOnly = useMarkput((s) => s.props.readOnly);
 	useEffect(() => {
 		mark.readOnly = readOnly;
 	}, [mark, readOnly]);