@markput/react 0.10.1 → 0.12.0

package/index.js

@@ -58,10 +58,10 @@ var MarkputHandler = class {
 		this.store = store;
 	}
 	get container() {
-		return this.store.refs.container;
+		return this.store.state.container();
 	}
 	get overlay() {
-		return this.store.refs.overlay;
+		return this.store.state.overlay();
 	}
 	focus() {
 		this.store.nodes.focus.head?.focus();
@@ -392,11 +392,11 @@ var NodeProxy = class NodeProxy {
 		return this.target?.isContentEditable ?? false;
 	}
 	get isCaretAtBeginning() {
-		if (!this.target) return;
+		if (!this.target) return false;
 		return Caret.getCaretIndex(this.target) === 0;
 	}
 	get isCaretAtEnd() {
-		if (!this.target) return;
+		if (!this.target) return false;
 		return Caret.getCaretIndex(this.target) === this.target.textContent.length;
 	}
 	get index() {
@@ -420,10 +420,10 @@ var NodeProxy = class NodeProxy {
 		if (this.target) this.target.textContent = value ?? "";
 	}
 	get head() {
-		return firstHtmlChild(this.#store.refs.container ?? void 0);
+		return firstHtmlChild(this.#store.state.container() ?? void 0);
 	}
 	get tail() {
-		return lastHtmlChild(this.#store.refs.container ?? void 0);
+		return lastHtmlChild(this.#store.state.container() ?? void 0);
 	}
 	get isFocused() {
 		return this.target === document.activeElement;
@@ -443,16 +443,6 @@ var NodeProxy = class NodeProxy {
 	}
 };
 //#endregion
-//#region ../../core/src/shared/signals/registry.ts
-let _factory;
-function setUseHookFactory(f) {
-	_factory = f;
-}
-function getUseHookFactory() {
-	if (!_factory) throw new Error("[markput] setUseHookFactory() must be called before using signal.use()");
-	return _factory;
-}
-//#endregion
 //#region ../../core/src/shared/signals/alien-signals/system.ts
 let ReactiveFlags = /* @__PURE__ */ function(ReactiveFlags) {
 	ReactiveFlags[ReactiveFlags["None"] = 0] = "None";
@@ -633,17 +623,19 @@ function createReactiveSystem({ update, notify, unwatched }) {
 	}
 }
 //#endregion
-//#region ../../core/src/shared/signals/alien-signals/index.ts
+//#region ../../core/src/shared/signals/signal.ts
 let cycle = 0;
 let batchDepth = 0;
 let notifyIndex = 0;
 let queuedLength = 0;
 let activeSub;
+let mutableScope = false;
 const queued = [];
 const { link, unlink, propagate, checkDirty, shallowPropagate } = createReactiveSystem({
 	update(node) {
-		if (node.depsTail !== void 0) return updateComputed(node);
-		else return updateSignal(node);
+		if ("getter" in node) return updateComputed(node);
+		if ("seq" in node) return updateEvent(node);
+		return updateSignal(node);
 	},
 	notify(effect) {
 		let insertIndex = queuedLength;
@@ -662,8 +654,16 @@ const { link, unlink, propagate, checkDirty, shallowPropagate } = createReactive
 		}
 	},
 	unwatched(node) {
-		if (!(node.flags & ReactiveFlags.Mutable)) effectScopeOper.call(node);
-		else if (node.depsTail !== void 0) {
+		if (!(node.flags & ReactiveFlags.Mutable)) {
+			if ("fn" in node) {
+				const e = node;
+				if (e.cleanup !== void 0) {
+					e.cleanup();
+					e.cleanup = void 0;
+				}
+			}
+			effectScopeOper.call(node);
+		} else if (node.depsTail !== void 0) {
 			node.depsTail = void 0;
 			node.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
 			purgeDeps(node);
@@ -675,67 +675,9 @@ function setActiveSub(sub) {
 	activeSub = sub;
 	return prevSub;
 }
-function startBatch() {
-	++batchDepth;
-}
-function endBatch() {
-	if (!--batchDepth) flush();
-}
-function signal$1(initialValue) {
-	return signalOper.bind({
-		currentValue: initialValue,
-		pendingValue: initialValue,
-		subs: void 0,
-		subsTail: void 0,
-		flags: ReactiveFlags.Mutable
-	});
-}
-function computed$1(getter) {
-	return computedOper.bind({
-		value: void 0,
-		subs: void 0,
-		subsTail: void 0,
-		deps: void 0,
-		depsTail: void 0,
-		flags: ReactiveFlags.None,
-		getter
-	});
-}
-function effect(fn) {
-	const e = {
-		fn,
-		subs: void 0,
-		subsTail: void 0,
-		deps: void 0,
-		depsTail: void 0,
-		flags: ReactiveFlags.Watching | ReactiveFlags.RecursedCheck
-	};
-	const prevSub = setActiveSub(e);
-	if (prevSub !== void 0) link(e, prevSub, 0);
-	try {
-		e.fn();
-	} finally {
-		activeSub = prevSub;
-		e.flags &= ~ReactiveFlags.RecursedCheck;
-	}
-	return effectOper.bind(e);
-}
-function effectScope(fn) {
-	const e = {
-		deps: void 0,
-		depsTail: void 0,
-		subs: void 0,
-		subsTail: void 0,
-		flags: ReactiveFlags.None
-	};
-	const prevSub = setActiveSub(e);
-	if (prevSub !== void 0) link(e, prevSub, 0);
-	try {
-		fn();
-	} finally {
-		activeSub = prevSub;
-	}
-	return effectScopeOper.bind(e);
+function updateSignal(s) {
+	s.flags = ReactiveFlags.Mutable;
+	return s.currentValue !== (s.currentValue = s.pendingValue);
 }
 function updateComputed(c) {
 	++cycle;
@@ -744,26 +686,33 @@ function updateComputed(c) {
 	const prevSub = setActiveSub(c);
 	try {
 		const oldValue = c.value;
-		return oldValue !== (c.value = c.getter(oldValue));
+		const newValue = c.getter(oldValue);
+		if (c.equalsFn !== void 0 && oldValue !== void 0 && c.equalsFn(oldValue, newValue)) return false;
+		return oldValue !== (c.value = newValue);
 	} finally {
 		activeSub = prevSub;
 		c.flags &= ~ReactiveFlags.RecursedCheck;
 		purgeDeps(c);
 	}
 }
-function updateSignal(s) {
-	s.flags = ReactiveFlags.Mutable;
-	return s.currentValue !== (s.currentValue = s.pendingValue);
+function updateEvent(e) {
+	e.flags = ReactiveFlags.Mutable;
+	return true;
 }
 function run(e) {
 	const flags = e.flags;
 	if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && checkDirty(e.deps, e)) {
+		if (e.cleanup !== void 0) {
+			e.cleanup();
+			e.cleanup = void 0;
+		}
 		++cycle;
 		e.depsTail = void 0;
 		e.flags = ReactiveFlags.Watching | ReactiveFlags.RecursedCheck;
 		const prevSub = setActiveSub(e);
 		try {
-			e.fn();
+			const result = e.fn();
+			if (typeof result === "function") e.cleanup = result;
 		} finally {
 			activeSub = prevSub;
 			e.flags &= ~ReactiveFlags.RecursedCheck;
@@ -788,36 +737,31 @@ function flush() {
 		queuedLength = 0;
 	}
 }
-function computedOper() {
-	const flags = this.flags;
-	if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && (checkDirty(this.deps, this) || (this.flags = flags & ~ReactiveFlags.Pending, false))) {
-		if (updateComputed(this)) {
-			const subs = this.subs;
-			if (subs !== void 0) shallowPropagate(subs);
-		}
-	} else if (!flags) {
-		this.flags = ReactiveFlags.Mutable | ReactiveFlags.RecursedCheck;
-		const prevSub = setActiveSub(this);
-		try {
-			this.value = this.getter();
-		} finally {
-			activeSub = prevSub;
-			this.flags &= ~ReactiveFlags.RecursedCheck;
-		}
-	}
-	const sub = activeSub;
-	if (sub !== void 0) link(this, sub, cycle);
-	return this.value;
+function purgeDeps(sub) {
+	const depsTail = sub.depsTail;
+	let dep = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
+	while (dep !== void 0) dep = unlink(dep, sub);
 }
 function signalOper(...value) {
 	if (value.length) {
-		if (this.pendingValue !== (this.pendingValue = value[0])) {
-			this.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
-			const subs = this.subs;
-			if (subs !== void 0) {
-				propagate(subs);
-				if (!batchDepth) flush();
-			}
+		if (this.isReadonly && !mutableScope) return;
+		const v = value[0];
+		if (v === void 0) {
+			if (this.hasDefault ? this.pendingValue === void 0 || this.pendingValue === this.defaultValue : this.pendingValue === void 0) return;
+			this.pendingValue = void 0;
+		} else {
+			const current = this.pendingValue;
+			const effectiveCurrent = current === void 0 && this.hasDefault ? this.defaultValue : current;
+			if (this.equalsFn !== void 0) {
+				if (this.equalsFn(effectiveCurrent, v)) return;
+			} else if (effectiveCurrent === v) return;
+			this.pendingValue = v;
+		}
+		this.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
+		const subs = this.subs;
+		if (subs !== void 0) {
+			propagate(subs);
+			if (!batchDepth) flush();
 		}
 	} else {
 		if (this.flags & ReactiveFlags.Dirty) {
@@ -834,10 +778,44 @@ function signalOper(...value) {
 			}
 			sub = sub.subs?.sub;
 		}
-		return this.currentValue;
+		const v = this.currentValue;
+		if (v === void 0 && this.hasDefault) return this.defaultValue;
+		return v;
+	}
+}
+function computedOper() {
+	const flags = this.flags;
+	const deps = this.deps;
+	if (flags & ReactiveFlags.Dirty || flags & ReactiveFlags.Pending && (checkDirty(deps, this) || (this.flags = flags & ~ReactiveFlags.Pending, false))) {
+		if (updateComputed(this)) {
+			const subs = this.subs;
+			if (subs !== void 0) shallowPropagate(subs);
+		}
+	} else if (!flags) {
+		this.flags = ReactiveFlags.Mutable | ReactiveFlags.RecursedCheck;
+		const prevSub = setActiveSub(this);
+		try {
+			this.value = this.getter();
+		} finally {
+			activeSub = prevSub;
+			this.flags &= ~ReactiveFlags.RecursedCheck;
+		}
 	}
+	const sub = activeSub;
+	if (sub !== void 0) link(this, sub, cycle);
+	return this.value;
+}
+function eventReadOper() {
+	if (this.flags & ReactiveFlags.Dirty) updateEvent(this);
+	const sub = activeSub;
+	if (sub !== void 0) link(this, sub, cycle);
+	return this.payload;
 }
 function effectOper() {
+	if (this.cleanup !== void 0) {
+		this.cleanup();
+		this.cleanup = void 0;
+	}
 	effectScopeOper.call(this);
 }
 function effectScopeOper() {
@@ -847,111 +825,101 @@ function effectScopeOper() {
 	const sub = this.subs;
 	if (sub !== void 0) unlink(sub);
 }
-function purgeDeps(sub) {
-	const depsTail = sub.depsTail;
-	let dep = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
-	while (dep !== void 0) dep = unlink(dep, sub);
+function isReactive(fn) {
+	if (typeof fn !== "function") return false;
+	const name = fn.name;
+	return name === "bound " + signalOper.name || name === "bound " + computedOper.name;
 }
-//#endregion
-//#region ../../core/src/shared/signals/signal.ts
 function signal(initial, opts) {
-	const hasCustomEquals = opts?.equals !== void 0;
-	const equalsOpt = hasCustomEquals ? opts.equals : void 0;
-	if (hasCustomEquals && equalsOpt === false) {
-		const _default = initial;
-		const hasDefault = initial !== void 0;
-		let seq = 0;
-		const inner = signal$1(void 0);
-		const read = () => {
-			const box = inner();
-			if (box === void 0) return hasDefault ? _default : void 0;
-			return box.v;
-		};
-		const callable = function signalCallable(...args) {
-			if (args.length) if (args[0] === void 0) {
-				if (hasDefault && inner() === void 0) return;
-				inner(void 0);
-			} else inner({
-				v: args[0],
-				seq: seq++
-			});
-			else return read();
-		};
-		callable.use = (() => getUseHookFactory()(callable)());
-		return callable;
-	}
-	if (hasCustomEquals && typeof equalsOpt === "function") {
-		const equalsFn = equalsOpt;
-		const _default = initial;
-		const hasDefault = initial !== void 0;
-		const inner = signal$1(void 0);
-		const read = () => {
-			const v = inner();
-			if (v === void 0 && hasDefault) return _default;
-			return v;
-		};
-		const callable = function signalCallable(...args) {
-			if (args.length) {
-				if (args[0] === void 0) {
-					if (hasDefault && inner() === void 0) return;
-					inner(void 0);
-				} else if (!equalsFn(read(), args[0])) inner(args[0]);
-			} else return read();
-		};
-		callable.use = (() => getUseHookFactory()(callable)());
-		return callable;
-	}
-	const _default = initial;
-	const hasDefault = initial !== void 0;
-	const inner = signal$1(void 0);
-	const read = () => {
-		const v = inner();
-		if (v === void 0 && hasDefault) return _default;
-		return v;
-	};
-	const callable = function signalCallable(...args) {
-		if (args.length) {
-			const v = args[0];
-			if (v === void 0 && hasDefault) {
-				if (inner() === void 0) return;
-				inner(void 0);
-			} else {
-				const current = inner();
-				if ((current === void 0 && hasDefault ? _default : current) !== v) inner(v);
-			}
-		} else return read();
+	const node = {
+		currentValue: initial,
+		pendingValue: initial,
+		defaultValue: initial,
+		hasDefault: initial !== void 0,
+		equalsFn: opts?.equals ?? void 0,
+		isReadonly: !!opts?.readonly,
+		subs: void 0,
+		subsTail: void 0,
+		flags: ReactiveFlags.Mutable
 	};
-	callable.use = (() => getUseHookFactory()(callable)());
-	return callable;
+	return signalOper.bind(node);
 }
-function computed(getter) {
-	const inner = computed$1(getter);
-	const callable = function computedCallable() {
-		return inner();
+function computed(getter, opts) {
+	const node = {
+		value: void 0,
+		subs: void 0,
+		subsTail: void 0,
+		deps: void 0,
+		depsTail: void 0,
+		flags: ReactiveFlags.None,
+		getter,
+		equalsFn: opts?.equals ?? void 0
 	};
-	callable.use = (() => getUseHookFactory()(callable)());
-	return callable;
+	return computedOper.bind(node);
 }
 function event() {
-	let seq = 0;
-	const inner = signal$1(void 0);
-	const callable = function eventCallable(payload) {
-		inner({
-			v: payload,
-			id: ++seq
-		});
+	const node = {
+		payload: void 0,
+		seq: 0,
+		subs: void 0,
+		subsTail: void 0,
+		flags: ReactiveFlags.Mutable
 	};
-	callable.read = () => {
-		const box = inner();
-		return box !== void 0 ? box.v : void 0;
+	const callable = function eventCallable(payload) {
+		node.payload = payload;
+		node.seq++;
+		node.flags = ReactiveFlags.Mutable | ReactiveFlags.Dirty;
+		const subs = node.subs;
+		if (subs !== void 0) {
+			propagate(subs);
+			if (!batchDepth) flush();
+		}
 	};
-	callable.use = () => getUseHookFactory()(callable.read)();
+	callable.read = eventReadOper.bind(node);
 	return callable;
 }
+function alienEffect(fn) {
+	const e = {
+		fn,
+		cleanup: void 0,
+		subs: void 0,
+		subsTail: void 0,
+		deps: void 0,
+		depsTail: void 0,
+		flags: ReactiveFlags.Watching | ReactiveFlags.RecursedCheck
+	};
+	const prevSub = setActiveSub(e);
+	if (prevSub !== void 0) link(e, prevSub, 0);
+	try {
+		const result = e.fn();
+		if (typeof result === "function") e.cleanup = result;
+	} finally {
+		activeSub = prevSub;
+		e.flags &= ~ReactiveFlags.RecursedCheck;
+	}
+	return effectOper.bind(e);
+}
+function effectScope(fn) {
+	const e = {
+		deps: void 0,
+		depsTail: void 0,
+		subs: void 0,
+		subsTail: void 0,
+		flags: ReactiveFlags.None
+	};
+	const prevSub = setActiveSub(e);
+	if (prevSub !== void 0) link(e, prevSub, 0);
+	try {
+		fn();
+	} finally {
+		activeSub = prevSub;
+	}
+	return effectScopeOper.bind(e);
+}
 function watch(dep, fn) {
 	let initialized = false;
 	let oldValue;
-	return effect(() => {
+	return alienEffect(() => {
 		const newValue = "read" in dep ? dep.read() : dep();
 		if (!initialized) {
 			initialized = true;
@@ -960,22 +928,58 @@ function watch(dep, fn) {
 		}
 		const prev = oldValue;
 		oldValue = newValue;
-		const prevSub = setActiveSub(void 0);
-		try {
-			fn(newValue, prev);
-		} finally {
-			setActiveSub(prevSub);
-		}
+		untracked(() => fn(newValue, prev));
 	});
 }
-function batch(fn) {
-	startBatch();
+function batch(fn, opts) {
+	const prevMutable = mutableScope;
+	if (opts?.mutable) mutableScope = true;
+	++batchDepth;
+	try {
+		fn();
+	} finally {
+		if (!--batchDepth) flush();
+		mutableScope = prevMutable;
+	}
+}
+function trigger(fn) {
+	const sub = {
+		deps: void 0,
+		depsTail: void 0,
+		flags: ReactiveFlags.Watching
+	};
+	const prevSub = setActiveSub(sub);
 	try {
 		fn();
 	} finally {
-		endBatch();
+		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 {
+		return fn();
+	} finally {
+		setActiveSub(prev);
 	}
 }
+function listen(target, event, handler, options) {
+	return alienEffect(() => {
+		target.addEventListener(event, handler, options);
+		return () => target.removeEventListener(event, handler, options);
+	});
+}
 //#endregion
 //#region ../../core/src/features/parsing/parser/constants.ts
 /**
@@ -2170,23 +2174,30 @@ function getTokensByUI(store) {
 	const tokens = store.state.tokens();
 	if (!parser) return tokens;
 	const parsed = parser.parse(focus.content);
-	if (parsed.length === 1) return tokens;
+	if (parsed.length <= 1) return tokens;
 	return tokens.toSpliced(focus.index, 1, ...parsed);
 }
-function getTokensByValue(store) {
-	const value = store.state.value();
-	const ranges = getRangeMap(store);
-	const gap = findGap(store.state.previousValue(), value);
+function computeTokensFromValue(store) {
+	const value = store.props.value();
+	const previousValue = store.state.previousValue();
+	const gap = findGap(previousValue, value);
 	if (!gap.left && !gap.right) {
 		store.state.previousValue(value);
 		return store.state.tokens();
 	}
+	if (gap.left === 0 && previousValue !== void 0 && gap.right !== void 0 && gap.right >= previousValue.length) {
+		store.state.previousValue(value);
+		return parseWithParser(store, value ?? "");
+	}
 	store.state.previousValue(value);
+	const ranges = getRangeMap(store);
 	const tokens = store.state.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);
-		const parsed = parseUnionLabels(store, updatedIndex - 1, updatedIndex);
-		return tokens.toSpliced(updatedIndex - 1, 2, ...parsed);
+		if (updatedIndex > 0) {
+			const parsed = parseUnionLabels(store, updatedIndex - 1, updatedIndex);
+			return tokens.toSpliced(updatedIndex - 1, 2, ...parsed);
+		}
 	}
 	if (gap.left !== void 0) {
 		const [updatedIndex] = getClosestIndexes(ranges, gap.left);
@@ -2235,9 +2246,6 @@ function parseWithParser(store, value) {
 //#region ../../core/src/features/parsing/ParseFeature.ts
 var ParseFeature = class {
 	#scope;
-	#initialized = false;
-	#lastValue;
-	#lastParser;
 	constructor(store) {
 		this.store = store;
 	}
@@ -2246,48 +2254,35 @@ var ParseFeature = class {
 		this.sync();
 		this.#scope = effectScope(() => {
 			this.#subscribeParse();
-			this.#subscribeUpdated();
+			this.#subscribeReactiveParse();
 		});
 	}
 	disable() {
 		this.#scope?.();
 		this.#scope = void 0;
-		this.#initialized = false;
 	}
 	sync() {
 		const { store } = this;
-		const inputValue = store.state.value() ?? store.state.defaultValue() ?? "";
+		const inputValue = store.props.value() ?? store.props.defaultValue() ?? "";
 		store.state.tokens(parseWithParser(store, inputValue));
 		store.state.previousValue(inputValue);
-		this.#lastValue = store.state.value();
-		this.#lastParser = store.computed.parser();
-		this.#initialized = true;
-	}
-	hasChanged() {
-		const value = this.store.state.value();
-		const parser = this.store.computed.parser();
-		if (this.#initialized && value === this.#lastValue && parser === this.#lastParser) return false;
-		this.#lastValue = value;
-		this.#lastParser = parser;
-		return true;
 	}
 	#subscribeParse() {
 		const { store } = this;
-		watch(store.event.parse, () => {
+		watch(store.emit.reparse, () => {
 			if (store.state.recovery()) {
 				const text = toString(store.state.tokens());
 				store.state.tokens(parseWithParser(store, text));
 				store.state.previousValue(text);
 				return;
 			}
-			store.state.tokens(store.nodes.focus.target ? getTokensByUI(store) : getTokensByValue(store));
+			store.state.tokens(store.nodes.focus.target ? getTokensByUI(store) : computeTokensFromValue(store));
 		});
 	}
-	#subscribeUpdated() {
+	#subscribeReactiveParse() {
 		const { store } = this;
-		watch(store.event.updated, () => {
-			if (!this.hasChanged()) return;
-			if (!store.state.recovery()) store.event.parse();
+		watch(computed(() => [store.props.value(), store.computed.parser()]), () => {
+			if (!store.state.recovery()) store.emit.reparse();
 		});
 	}
 };
@@ -2323,7 +2318,7 @@ function shiftFocusNext(store, event) {
 //#region ../../core/src/features/selection/selectionHelpers.ts
 function isFullSelection(store) {
 	const sel = window.getSelection();
-	const container = store.refs.container;
+	const container = store.state.container();
 	if (!sel?.rangeCount || !container?.firstChild || !container.lastChild) return false;
 	try {
 		const range = sel.getRangeAt(0);
@@ -2334,11 +2329,11 @@ function isFullSelection(store) {
 }
 function selectAllText(store, event) {
 	if ((event.ctrlKey || event.metaKey) && event.code === "KeyA") {
-		if (store.state.drag()) return;
+		if (store.computed.isBlock()) return;
 		event.preventDefault();
 		const selection = window.getSelection();
-		const anchorNode = store.refs.container?.firstChild;
-		const focusNode = store.refs.container?.lastChild;
+		const anchorNode = store.state.container()?.firstChild;
+		const focusNode = store.state.container()?.lastChild;
 		if (!selection || !anchorNode || !focusNode) return;
 		selection.setBaseAndExtent(anchorNode, 0, focusNode, 1);
 		store.state.selecting("all");
@@ -2347,10 +2342,6 @@ function selectAllText(store, event) {
 //#endregion
 //#region ../../core/src/features/selection/TextSelectionFeature.ts
 var TextSelectionFeature = class {
-	#mousedownHandler;
-	#mousemoveHandler;
-	#mouseupHandler;
-	#selectionchangeHandler;
 	#scope;
 	#pressedNode = null;
 	#isPressed = false;
@@ -2358,61 +2349,47 @@ var TextSelectionFeature = class {
 		this.store = store;
 	}
 	enable() {
-		if (this.#mousedownHandler) return;
-		this.#mousedownHandler = (e) => {
-			this.#pressedNode = nodeTarget(e);
-			this.#isPressed = true;
-		};
-		this.#mousemoveHandler = (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");
-			}
-		};
-		this.#mouseupHandler = () => {
-			this.#isPressed = false;
-			this.#pressedNode = null;
-			if (this.store.state.selecting() === "drag") {
+		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.state.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);
-			}
-		};
-		this.#selectionchangeHandler = () => {
-			if (this.store.state.selecting() !== "drag") return;
-			const sel = window.getSelection();
-			if (!sel || sel.isCollapsed) this.store.state.selecting(void 0);
-		};
-		this.#scope = effectScope(() => {
-			effect(() => {
+			});
+			alienEffect(() => {
 				if (this.store.state.selecting() !== "drag") return;
-				const container = this.store.refs.container;
+				const container = this.store.state.container();
 				if (!container) return;
 				container.querySelectorAll("[contenteditable=\"true\"]").forEach((el) => el.contentEditable = "false");
 			});
 		});
-		document.addEventListener("mousedown", this.#mousedownHandler);
-		document.addEventListener("mousemove", this.#mousemoveHandler);
-		document.addEventListener("mouseup", this.#mouseupHandler);
-		document.addEventListener("selectionchange", this.#selectionchangeHandler);
 	}
 	disable() {
 		if (this.store.state.selecting() === "drag") this.store.state.selecting(void 0);
 		this.#scope?.();
 		this.#scope = void 0;
-		if (this.#mousedownHandler) {
-			document.removeEventListener("mousedown", this.#mousedownHandler);
-			if (this.#mousemoveHandler) document.removeEventListener("mousemove", this.#mousemoveHandler);
-			if (this.#mouseupHandler) document.removeEventListener("mouseup", this.#mouseupHandler);
-			if (this.#selectionchangeHandler) document.removeEventListener("selectionchange", this.#selectionchangeHandler);
-			this.#mousedownHandler = void 0;
-			this.#mousemoveHandler = void 0;
-			this.#mouseupHandler = void 0;
-			this.#selectionchangeHandler = void 0;
-		}
 		this.#pressedNode = null;
 		this.#isPressed = false;
 	}
@@ -2420,28 +2397,27 @@ var TextSelectionFeature = class {
 //#endregion
 //#region ../../core/src/features/arrownav/ArrowNavFeature.ts
 var ArrowNavFeature = class {
-	#keydownHandler;
+	#scope;
 	constructor(store) {
 		this.store = store;
 	}
 	enable() {
-		if (this.#keydownHandler) return;
-		const container = this.store.refs.container;
+		if (this.#scope) return;
+		const container = this.store.state.container();
 		if (!container) return;
-		this.#keydownHandler = (e) => {
-			if (this.store.state.drag()) 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);
-		};
-		container.addEventListener("keydown", this.#keydownHandler);
+		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);
+			});
+		});
 	}
 	disable() {
-		const container = this.store.refs.container;
-		if (!container || !this.#keydownHandler) return;
-		container.removeEventListener("keydown", this.#keydownHandler);
-		this.#keydownHandler = void 0;
+		this.#scope?.();
+		this.#scope = void 0;
 	}
 };
 //#endregion
@@ -2515,7 +2491,7 @@ 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.state.container();
 	if (!container) return null;
 	const sel = window.getSelection();
 	if (!sel || sel.isCollapsed || !sel.rangeCount) return null;
@@ -2567,56 +2543,49 @@ function trimBoundaryTokens({ tokens, startOffset, endOffset }) {
 	});
 }
 var CopyFeature = class {
-	#copyHandler;
-	#cutHandler;
+	#scope;
 	constructor(store) {
 		this.store = store;
 	}
 	enable() {
-		if (this.#copyHandler) return;
-		this.#copyHandler = (e) => {
-			this.#handleCopy(e);
-		};
-		this.#cutHandler = (e) => {
-			if (!this.#handleCopy(e)) return;
-			const result = selectionToTokens(this.store);
-			if (!result || result.tokens.length === 0) return;
-			const first = result.tokens[0];
-			const last = result.tokens[result.tokens.length - 1];
-			const rawStart = first.type === "text" ? first.position.start + result.startOffset : first.position.start;
-			const rawEnd = last.type === "text" ? last.position.start + result.endOffset : last.position.end;
-			const value = this.store.state.previousValue() ?? this.store.state.value() ?? "";
-			if (rawStart === rawEnd) return;
-			const newValue = value.slice(0, rawStart) + value.slice(rawEnd);
-			this.store.state.innerValue(newValue);
-			const newTokens = this.store.state.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({
-				anchor: this.store.nodes.focus,
-				caret: caretWithinToken,
-				isNext: true,
-				childIndex: targetIdx - 2
+		if (this.#scope) return;
+		const container = this.store.state.container();
+		if (!container) return;
+		this.#scope = effectScope(() => {
+			listen(container, "copy", (e) => {
+				this.#handleCopy(e);
 			});
-		};
-		const container = this.store.refs.container;
-		container?.addEventListener("copy", this.#copyHandler);
-		container?.addEventListener("cut", this.#cutHandler);
+			listen(container, "cut", (e) => {
+				if (!this.#handleCopy(e)) return;
+				const result = selectionToTokens(this.store);
+				if (!result || result.tokens.length === 0) return;
+				const first = result.tokens[0];
+				const last = result.tokens[result.tokens.length - 1];
+				const rawStart = first.type === "text" ? first.position.start + result.startOffset : first.position.start;
+				const rawEnd = last.type === "text" ? last.position.start + result.endOffset : last.position.end;
+				const value = this.store.computed.currentValue();
+				if (rawStart === rawEnd) return;
+				const newValue = value.slice(0, rawStart) + value.slice(rawEnd);
+				this.store.state.innerValue(newValue);
+				const newTokens = this.store.state.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({
+					anchor: this.store.nodes.focus,
+					caret: caretWithinToken,
+					isNext: true,
+					childIndex: targetIdx - 2
+				});
+			});
+		});
 	}
 	disable() {
-		const container = this.store.refs.container;
-		if (this.#copyHandler) {
-			container?.removeEventListener("copy", this.#copyHandler);
-			this.#copyHandler = void 0;
-		}
-		if (this.#cutHandler) {
-			container?.removeEventListener("cut", this.#cutHandler);
-			this.#cutHandler = void 0;
-		}
+		this.#scope?.();
+		this.#scope = void 0;
 	}
 	#handleCopy(e) {
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return false;
 		const sel = window.getSelection();
 		if (!sel || sel.isCollapsed || !sel.rangeCount) return false;
@@ -2771,9 +2740,10 @@ function deleteMark(place, store) {
 		anchor: caretAnchor.prev,
 		caret
 	});
-	store.state.onChange()?.(toString(store.state.tokens()));
+	store.emit.change();
 	queueMicrotask(() => {
-		const target = childAt(store.refs.container, targetIndex);
+		const container = store.state.container();
+		const target = container ? childAt(container, targetIndex) : null;
 		if (!target) return;
 		store.nodes.focus.target = target;
 		target.focus();
@@ -2795,14 +2765,14 @@ var ContentEditableFeature = class {
 	enable() {
 		if (this.#scope) return;
 		this.#scope = effectScope(() => {
-			effect(() => {
-				this.store.state.readOnly();
+			alienEffect(() => {
+				this.store.props.readOnly();
 				this.sync();
 			});
-			effect(() => {
+			alienEffect(() => {
 				if (this.store.state.selecting() === void 0) this.sync();
 			});
-			watch(this.store.event.sync, () => {
+			watch(this.store.emit.sync, () => {
 				this.sync();
 			});
 		});
@@ -2812,13 +2782,13 @@ var ContentEditableFeature = class {
 		this.#scope = void 0;
 	}
 	sync() {
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
-		const readOnly = this.store.state.readOnly();
+		const readOnly = this.store.props.readOnly();
 		const value = readOnly ? "false" : "true";
 		const children = container.children;
-		const isDrag = !!this.store.state.drag();
-		if (isDrag) {
+		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);
@@ -2832,7 +2802,7 @@ var ContentEditableFeature = class {
 			if (el) el.contentEditable = value;
 		}
 		const tokens = this.store.state.tokens();
-		if (isDrag) this.#syncDragTextContent(tokens, container, readOnly);
+		if (isBlock) this.#syncDragTextContent(tokens, container, readOnly);
 		else this.#syncTextContent(tokens, container);
 	}
 	#syncTextContent(tokens, parent) {
@@ -3025,40 +2995,35 @@ function isTextLikeRow(token) {
 	return token.descriptor.hasSlot && token.descriptor.segments.length === 1;
 }
 var BlockEditFeature = class {
-	#keydownHandler;
-	#beforeInputHandler;
+	#scope;
 	constructor(store) {
 		this.store = store;
 	}
 	enable() {
-		if (this.#keydownHandler) return;
-		const container = this.store.refs.container;
+		if (this.#scope) return;
+		const container = this.store.state.container();
 		if (!container) return;
-		this.#keydownHandler = (e) => {
-			if (!this.store.state.drag()) 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);
-		};
-		this.#beforeInputHandler = (e) => {
-			if (!this.store.state.drag()) return;
-			if (e.defaultPrevented) return;
-			this.#handleBlockBeforeInput(e);
-		};
-		container.addEventListener("keydown", this.#keydownHandler);
-		container.addEventListener("beforeinput", this.#beforeInputHandler, true);
+		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() {
-		const container = this.store.refs.container;
-		if (!container || !this.#keydownHandler) return;
-		container.removeEventListener("keydown", this.#keydownHandler);
-		if (this.#beforeInputHandler) container.removeEventListener("beforeinput", this.#beforeInputHandler, true);
-		this.#keydownHandler = void 0;
-		this.#beforeInputHandler = void 0;
+		this.#scope?.();
+		this.#scope = void 0;
 	}
 	#handleDelete(event) {
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		const blockDivs = htmlChildren(container);
 		const blockIndex = blockDivs.findIndex((div) => div === document.activeElement || div.contains(document.activeElement));
@@ -3066,8 +3031,8 @@ var BlockEditFeature = class {
 		const rows = this.store.state.tokens();
 		if (blockIndex >= rows.length) return;
 		const token = rows[blockIndex];
-		const value = this.store.state.previousValue() ?? this.store.state.value() ?? "";
-		if (!this.store.state.onChange()) return;
+		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;
@@ -3175,7 +3140,7 @@ var BlockEditFeature = class {
 	#handleEnter(event) {
 		if (event.key !== KEYBOARD.ENTER) return;
 		if (event.shiftKey) return;
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		const activeElement = document.activeElement;
 		if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
@@ -3190,9 +3155,9 @@ var BlockEditFeature = class {
 		const rows = this.store.state.tokens();
 		const token = rows[blockIndex];
 		const blockDiv = blockDivs[blockIndex];
-		const value = this.store.state.previousValue() ?? this.store.state.value() ?? "";
-		if (!this.store.state.onChange()) return;
-		const newRowContent = createRowContent(this.store.state.options());
+		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);
@@ -3223,7 +3188,7 @@ var BlockEditFeature = class {
 		});
 	}
 	#handleBlockArrowLeftRight(event, direction) {
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return false;
 		const activeElement = document.activeElement;
 		if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return false;
@@ -3249,7 +3214,7 @@ var BlockEditFeature = class {
 		return true;
 	}
 	#handleArrowUpDown(event) {
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		const activeElement = document.activeElement;
 		if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
@@ -3278,7 +3243,7 @@ var BlockEditFeature = class {
 		}
 	}
 	#handleBlockBeforeInput(event) {
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		const activeElement = document.activeElement;
 		if (!isHtmlElement(activeElement) || !container.contains(activeElement)) return;
@@ -3289,7 +3254,7 @@ var BlockEditFeature = class {
 		const rows = this.store.state.tokens();
 		if (blockIndex >= rows.length) return;
 		const token = rows[blockIndex];
-		const value = this.store.state.previousValue() ?? this.store.state.value() ?? "";
+		const value = this.store.computed.currentValue();
 		const focusAndSetCaret = (newRawPos) => {
 			queueMicrotask(() => {
 				const target = childAt(container, blockIndex);
@@ -3318,7 +3283,8 @@ var BlockEditFeature = class {
 			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 c = this.store.state.container();
+				const pasteData = (c ? consumeMarkupPaste(c) : void 0) ?? event.dataTransfer?.getData("text/plain") ?? "";
 				const ranges = event.getTargetRanges();
 				let rawFrom;
 				let rawTo;
@@ -3369,7 +3335,8 @@ var DragFeature = class {
 	}
 	#unsub;
 	enable() {
-		this.#unsub = watch(this.store.event.dragAction, (action) => {
+		if (this.#unsub) return;
+		this.#unsub = watch(this.store.emit.drag, (action) => {
 			switch (action.type) {
 				case "reorder":
 					this.#reorder(action.source, action.target);
@@ -3391,33 +3358,33 @@ var DragFeature = class {
 		this.#unsub = void 0;
 	}
 	#reorder(sourceIndex, targetIndex) {
-		const value = this.store.state.value();
-		if (value == null || !this.store.state.onChange()) return;
+		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.state.value();
-		if (value == null || !this.store.state.onChange()) return;
+		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.state.options());
+		const newRowContent = createRowContent(this.store.props.options());
 		this.store.state.innerValue(addDragRow(value, rows, afterIndex, newRowContent));
 		queueMicrotask(() => {
-			const container = this.store.refs.container;
+			const container = this.store.state.container();
 			if (!container) return;
 			childAt(container, afterIndex + 1)?.focus();
 		});
 	}
 	#delete(index) {
-		const value = this.store.state.value();
-		if (value == null || !this.store.state.onChange()) return;
+		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.state.value();
-		if (value == null || !this.store.state.onChange()) return;
+		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));
 	}
@@ -3436,8 +3403,8 @@ function getDragTargetIndex(blockIndex, position) {
 }
 //#endregion
 //#region ../../core/src/features/drag/config.ts
-function getAlwaysShowHandleDrag(drag) {
-	return typeof drag === "object" && !!drag.alwaysShowHandle;
+function getAlwaysShowHandle(draggable) {
+	return typeof draggable === "object" && !!draggable.alwaysShowHandle;
 }
 //#endregion
 //#region ../../core/src/features/events/SystemListenerFeature.ts
@@ -3449,25 +3416,25 @@ var SystemListenerFeature = class {
 	enable() {
 		if (this.#scope) return;
 		this.#scope = effectScope(() => {
-			watch(this.store.event.change, () => {
-				const onChange = this.store.state.onChange();
+			watch(this.store.emit.change, () => {
+				const onChange = this.store.props.onChange();
 				const { focus } = this.store.nodes;
 				if (!focus.target || !focus.target.isContentEditable) {
-					const tokens = this.store.state.tokens();
-					const serialized = toString(tokens);
+					const serialized = toString(this.store.state.tokens());
 					onChange?.(serialized);
 					this.store.state.previousValue(serialized);
-					this.store.state.tokens([...tokens]);
+					trigger(this.store.state.tokens);
 					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();
+				this.store.emit.reparse();
 			});
-			watch(this.store.event.delete, (payload) => {
+			watch(this.store.emit.markRemove, (payload) => {
 				const { token } = payload;
 				const tokens = this.store.state.tokens();
 				if (!findToken(tokens, token)) return;
@@ -3482,11 +3449,11 @@ var SystemListenerFeature = class {
 					this.store.state.tokens(newTokens);
 					this.store.state.previousValue(newValue);
 				});
-				this.store.state.onChange()?.(newValue);
+				this.store.props.onChange()?.(newValue);
 			});
-			watch(this.store.event.select, (event) => {
-				const Mark = this.store.state.Mark();
-				const onChange = this.store.state.onChange();
+			watch(this.store.emit.overlaySelect, (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;
@@ -3512,7 +3479,7 @@ var SystemListenerFeature = class {
 					this.store.nodes.focus.target = this.store.nodes.input.target;
 					this.store.nodes.input.clear();
 					onChange?.(toString(tokens));
-					this.store.event.parse();
+					this.store.emit.reparse();
 				}
 			});
 		});
@@ -3525,51 +3492,40 @@ var SystemListenerFeature = class {
 //#endregion
 //#region ../../core/src/features/focus/FocusFeature.ts
 var FocusFeature = class {
-	#focusinHandler;
-	#focusoutHandler;
-	#clickHandler;
+	#scope;
 	constructor(store) {
 		this.store = store;
 	}
 	enable() {
-		if (this.#focusinHandler) return;
-		const container = this.store.refs.container;
+		if (this.#scope) return;
+		const container = this.store.state.container();
 		if (!container) return;
-		this.#focusinHandler = (e) => {
-			const target = isHtmlElement(e.target) ? e.target : void 0;
-			this.store.nodes.focus.target = target;
-		};
-		this.#focusoutHandler = () => {
-			this.store.nodes.focus.target = void 0;
-		};
-		this.#clickHandler = () => {
-			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();
-			}
-		};
-		container.addEventListener("focusin", this.#focusinHandler);
-		container.addEventListener("focusout", this.#focusoutHandler);
-		container.addEventListener("click", this.#clickHandler);
-		watch(this.store.event.recoverFocus, () => {
-			this.#recover();
-		});
-		watch(this.store.event.afterTokensRendered, () => {
-			this.store.event.sync();
-			if (!this.store.state.Mark()) return;
-			this.store.event.recoverFocus();
+		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.state.container();
+					(container ? firstHtmlChild(container) : null)?.focus();
+				}
+			});
+			watch(this.store.emit.rendered, () => {
+				this.store.emit.sync();
+				if (!this.store.props.Mark()) return;
+				this.#recover();
+			});
 		});
 	}
 	disable() {
-		const container = this.store.refs.container;
-		if (!container || !this.#focusinHandler) return;
-		container.removeEventListener("focusin", this.#focusinHandler);
-		if (this.#focusoutHandler) container.removeEventListener("focusout", this.#focusoutHandler);
-		if (this.#clickHandler) container.removeEventListener("click", this.#clickHandler);
-		this.#focusinHandler = void 0;
-		this.#focusoutHandler = void 0;
-		this.#clickHandler = void 0;
+		this.#scope?.();
+		this.#scope = void 0;
+		this.store.nodes.focus.clear();
 	}
 	#recover() {
 		const recovery = this.store.state.recovery();
@@ -3579,7 +3535,7 @@ var FocusFeature = class {
 		let target;
 		switch (true) {
 			case isNext && isStale: {
-				const container = this.store.refs.container;
+				const container = this.store.state.container();
 				target = (recovery.childIndex != null ? childAt(container, recovery.childIndex + 2) : void 0) ?? this.store.nodes.focus.tail ?? void 0;
 				break;
 			}
@@ -3604,40 +3560,31 @@ var FocusFeature = class {
 //#endregion
 //#region ../../core/src/features/input/InputFeature.ts
 var InputFeature = class {
-	#keydownHandler;
-	#pasteHandler;
-	#beforeInputHandler;
+	#scope;
 	constructor(store) {
 		this.store = store;
 	}
 	enable() {
-		if (this.#keydownHandler) return;
-		const container = this.store.refs.container;
+		if (this.#scope) return;
+		const container = this.store.state.container();
 		if (!container) return;
-		this.#keydownHandler = (e) => {
-			if (!this.store.state.drag()) this.#handleDelete(e);
-		};
-		this.#pasteHandler = (e) => {
-			const c = this.store.refs.container;
-			if (c) captureMarkupPaste(e, c);
-			handlePaste(this.store, e);
-		};
-		this.#beforeInputHandler = (e) => {
-			handleBeforeInput(this.store, e);
-		};
-		container.addEventListener("keydown", this.#keydownHandler);
-		container.addEventListener("paste", this.#pasteHandler);
-		container.addEventListener("beforeinput", this.#beforeInputHandler, true);
+		this.#scope = effectScope(() => {
+			listen(container, "keydown", (e) => {
+				if (!this.store.computed.isBlock()) this.#handleDelete(e);
+			});
+			listen(container, "paste", (e) => {
+				const c = this.store.state.container();
+				if (c) captureMarkupPaste(e, c);
+				handlePaste(this.store, e);
+			});
+			listen(container, "beforeinput", (e) => {
+				handleBeforeInput(this.store, e);
+			}, true);
+		});
 	}
 	disable() {
-		const container = this.store.refs.container;
-		if (!container || !this.#keydownHandler) return;
-		container.removeEventListener("keydown", this.#keydownHandler);
-		if (this.#pasteHandler) container.removeEventListener("paste", this.#pasteHandler);
-		if (this.#beforeInputHandler) container.removeEventListener("beforeinput", this.#beforeInputHandler, true);
-		this.#keydownHandler = void 0;
-		this.#pasteHandler = void 0;
-		this.#beforeInputHandler = void 0;
+		this.#scope?.();
+		this.#scope = void 0;
 	}
 	#handleDelete(event) {
 		const { focus } = this.store.nodes;
@@ -3672,14 +3619,14 @@ var InputFeature = class {
 				event.preventDefault();
 				focus.content = content.slice(0, caret - 1) + content.slice(caret);
 				focus.caret = caret - 1;
-				this.store.event.change();
+				this.store.emit.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();
+				this.store.emit.change();
 				return;
 			}
 		}
@@ -3697,21 +3644,21 @@ function handleBeforeInput(store, event) {
 		return;
 	}
 	if (selecting === "all") store.state.selecting(void 0);
-	if (store.state.drag()) return;
+	if (store.computed.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.emit.change();
 }
 function handleMarkputSpanPaste(store, focus, event) {
-	const container = store.refs.container;
+	const container = store.state.container();
 	if (!container) return false;
 	const markup = consumeMarkupPaste(container);
 	if (!markup) return false;
 	event.preventDefault();
 	const token = store.state.tokens()[focus.index];
 	const offset = focus.caret;
-	const currentValue = store.state.previousValue() ?? store.state.value() ?? "";
+	const currentValue = store.computed.currentValue();
 	const ranges = event.getTargetRanges();
 	const childElement = container.children[focus.index];
 	let rawInsertPos;
@@ -3801,13 +3748,15 @@ function handlePaste(store, event) {
 		return;
 	}
 	event.preventDefault();
-	replaceAllContentWith(store, (store.refs.container ? consumeMarkupPaste(store.refs.container) : void 0) ?? event.clipboardData?.getData("text/plain") ?? "");
+	const c = store.state.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.onChange()?.(newContent);
-	if (store.state.value() === void 0) store.state.tokens(store.computed.parser()?.parse(newContent) ?? [{
+	store.state.previousValue(newContent);
+	store.props.onChange()?.(newContent);
+	if (store.props.value() === void 0) store.state.tokens(store.computed.parser()?.parse(newContent) ?? [{
 		type: "text",
 		content: newContent,
 		position: {
@@ -3816,7 +3765,7 @@ function replaceAllContentWith(store, newContent) {
 		}
 	}]);
 	queueMicrotask(() => {
-		const rawFirstChild = store.refs.container?.firstChild;
+		const rawFirstChild = store.state.container()?.firstChild;
 		const firstChild = isHtmlElement(rawFirstChild) ? rawFirstChild : null;
 		if (firstChild) {
 			store.state.recovery({
@@ -3864,93 +3813,50 @@ function createMarkFromOverlay(match, value, meta) {
 //#region ../../core/src/features/overlay/OverlayFeature.ts
 var OverlayFeature = class {
 	#scope;
-	#selectionChangeHandler;
-	#focusinHandler;
-	#focusoutHandler;
-	#escHandler;
-	#clickHandler;
 	constructor(store) {
 		this.store = store;
 	}
+	#probeTrigger() {
+		const match = TriggerFinder.find(this.store.props.options(), (option) => option.overlay?.trigger);
+		this.store.state.overlayMatch(match);
+	}
 	enable() {
 		if (this.#scope) return;
-		this.store.state.overlayTrigger((option) => option.overlay?.trigger);
 		this.#scope = effectScope(() => {
-			watch(this.store.event.clearOverlay, () => {
+			watch(this.store.emit.overlayClose, () => {
 				this.store.state.overlayMatch(void 0);
 			});
-			watch(this.store.event.checkOverlay, () => {
-				const getTrigger = this.store.state.overlayTrigger();
-				if (!getTrigger) return;
-				const match = TriggerFinder.find(this.store.state.options(), getTrigger);
-				this.store.state.overlayMatch(match);
-			});
-			watch(this.store.event.change, () => {
-				const showOverlayOn = this.store.state.showOverlayOn();
+			watch(this.store.emit.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();
 			});
-			watch(this.store.state.overlayMatch, (match) => {
-				if (match) {
+			alienEffect(() => {
+				if (this.store.state.overlayMatch()) {
 					this.store.nodes.input.target = this.store.nodes.focus.target;
-					this.#enableClose();
-				} else this.#disableClose();
+					listen(window, "keydown", (e) => {
+						if (e.key === KEYBOARD.ESC) this.store.emit.overlayClose();
+					});
+					listen(document, "click", (e) => {
+						const target = e.target instanceof HTMLElement ? e.target : null;
+						if (this.store.state.overlay()?.contains(target)) return;
+						if (this.store.state.container()?.contains(target)) return;
+						this.store.emit.overlayClose();
+					}, true);
+				}
 			});
+			const selectionChangeHandler = () => {
+				if (!this.store.state.container()?.contains(document.activeElement)) return;
+				const showOverlayOn = this.store.props.showOverlayOn();
+				const type = "selectionChange";
+				if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.#probeTrigger();
+			};
+			listen(document, "selectionchange", selectionChangeHandler);
 		});
-		const selectionChangeHandler = () => {
-			const showOverlayOn = this.store.state.showOverlayOn();
-			const type = "selectionChange";
-			if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.store.event.checkOverlay();
-		};
-		this.#selectionChangeHandler = selectionChangeHandler;
-		this.#focusinHandler = () => {
-			document.addEventListener("selectionchange", selectionChangeHandler);
-		};
-		this.#focusoutHandler = () => {
-			document.removeEventListener("selectionchange", selectionChangeHandler);
-		};
-		const container = this.store.refs.container;
-		if (container) {
-			container.addEventListener("focusin", this.#focusinHandler);
-			container.addEventListener("focusout", this.#focusoutHandler);
-		}
 	}
 	disable() {
-		const container = this.store.refs.container;
-		if (container && this.#focusinHandler) {
-			container.removeEventListener("focusin", this.#focusinHandler);
-			if (this.#focusoutHandler) container.removeEventListener("focusout", this.#focusoutHandler);
-		}
-		if (this.#selectionChangeHandler) document.removeEventListener("selectionchange", this.#selectionChangeHandler);
-		this.#disableClose();
-		this.store.state.overlayTrigger(void 0);
 		this.#scope?.();
 		this.#scope = void 0;
-		this.#selectionChangeHandler = void 0;
-		this.#focusinHandler = void 0;
-		this.#focusoutHandler = void 0;
-	}
-	#enableClose() {
-		if (this.#escHandler) return;
-		this.#escHandler = (e) => {
-			if (e.key === KEYBOARD.ESC) this.store.event.clearOverlay();
-		};
-		this.#clickHandler = (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();
-		};
-		window.addEventListener("keydown", this.#escHandler);
-		document.addEventListener("click", this.#clickHandler, true);
-	}
-	#disableClose() {
-		if (this.#escHandler) {
-			window.removeEventListener("keydown", this.#escHandler);
-			if (this.#clickHandler) document.removeEventListener("click", this.#clickHandler, true);
-			this.#escHandler = void 0;
-			this.#clickHandler = void 0;
-		}
 	}
 };
 //#endregion
@@ -4046,35 +3952,6 @@ function resolveMarkSlot(token, tokenOptions, GlobalMark, GlobalSpan) {
 	return [Component, props];
 }
 //#endregion
-//#region ../../core/src/features/slots/createSlots.ts
-function createNamedSlot(slots, slotProps, name) {
-	return {
-		use: () => [resolveSlot(name, slots.use()), resolveSlotProps(name, slotProps.use())],
-		get: () => [resolveSlot(name, slots()), resolveSlotProps(name, slotProps())]
-	};
-}
-function createOverlaySlot(overlay) {
-	return {
-		use: (option, defaultComponent) => resolveOverlaySlot(overlay.use(), option, defaultComponent),
-		get: (option, defaultComponent) => resolveOverlaySlot(overlay(), option, defaultComponent)
-	};
-}
-function createMarkSlot(options, mark, span) {
-	return {
-		use: (token) => resolveMarkSlot(token, options(), mark.use(), span.use()),
-		get: (token) => resolveMarkSlot(token, options(), mark(), span())
-	};
-}
-function createSlots(signals) {
-	return {
-		container: createNamedSlot(signals.slots, signals.slotProps, "container"),
-		block: createNamedSlot(signals.slots, signals.slotProps, "block"),
-		span: createNamedSlot(signals.slots, signals.slotProps, "span"),
-		overlay: createOverlaySlot(signals.Overlay),
-		mark: createMarkSlot(signals.options, signals.Mark, signals.Span)
-	};
-}
-//#endregion
 //#region ../../core/src/shared/utils/menuUtils.ts
 /**
 * Returns true when `target` is outside `element` (i.e. not contained by it).
@@ -4110,7 +3987,7 @@ var BlockStore = class {
 	#cleanupMenu;
 	attachContainer(el, blockIndex, actions) {
 		this.#blockIndex = blockIndex;
-		this.#dragAction = actions.dragAction;
+		this.#dragAction = actions.drag;
 		if (el === this.refs.container) return;
 		this.#cleanupContainer?.();
 		this.refs.container = el;
@@ -4156,7 +4033,7 @@ var BlockStore = class {
 	}
 	attachGrip(el, blockIndex, actions) {
 		this.#blockIndex = blockIndex;
-		this.#dragAction = actions.dragAction;
+		this.#dragAction = actions.drag;
 		this.#cleanupGrip?.();
 		if (!el) return;
 		const onDragStart = (e) => {
@@ -4245,6 +4122,21 @@ 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();
@@ -4252,75 +4144,81 @@ var Store = class {
 		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([]),
-		value: signal(void 0),
-		defaultValue: signal(void 0),
 		previousValue: signal(void 0),
 		innerValue: signal(void 0),
 		recovery: signal(void 0),
+		container: signal(null),
+		overlay: signal(null),
 		selecting: signal(void 0),
-		drag: signal(false),
-		overlayMatch: signal(void 0),
-		overlayTrigger: signal(void 0),
-		showOverlayOn: signal("change"),
-		onChange: signal(void 0),
-		options: signal(DEFAULT_OPTIONS),
-		readOnly: signal(false),
-		Span: signal(void 0),
-		Mark: signal(void 0),
-		Overlay: signal(void 0),
-		className: signal(void 0),
-		style: signal(void 0, { equals: shallow }),
-		slots: signal(void 0),
-		slotProps: signal(void 0)
+		overlayMatch: signal(void 0)
 	};
 	computed = {
 		hasMark: computed(() => {
-			if (this.state.Mark()) return true;
-			return this.state.options().some((opt) => "Mark" in opt && opt.Mark != null);
+			if (this.props.Mark()) return true;
+			return this.props.options().some((opt) => "Mark" in opt && opt.Mark != null);
 		}),
+		isBlock: computed(() => this.props.layout() === "block"),
+		isDraggable: computed(() => !!this.props.draggable()),
 		parser: computed(() => {
 			if (!this.computed.hasMark()) return;
-			const markups = this.state.options().map((opt) => opt.markup);
+			const markups = this.props.options().map((opt) => opt.markup);
 			if (!markups.some(Boolean)) return;
-			return new Parser(markups, !!this.state.drag() ? { skipEmptyText: true } : void 0);
+			return new Parser(markups, this.computed.isBlock() ? { skipEmptyText: true } : void 0);
 		}),
-		containerClass: computed(() => cx(styles.Container, this.state.className(), this.state.slotProps()?.container?.className)),
-		containerStyle: computed((prev) => {
-			const next = merge(this.state.style(), this.state.slotProps()?.container?.style);
-			return prev && shallow(prev, next) ? prev : next;
+		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);
 		})
 	};
-	slot = createSlots({
-		slots: this.state.slots,
-		slotProps: this.state.slotProps,
-		Overlay: this.state.Overlay,
-		options: this.state.options,
-		Mark: this.state.Mark,
-		Span: this.state.Span
-	});
-	event = {
+	emit = {
 		change: event(),
-		parse: event(),
-		delete: event(),
-		select: event(),
-		clearOverlay: event(),
-		checkOverlay: event(),
+		reparse: event(),
+		markRemove: event(),
+		overlaySelect: event(),
+		overlayClose: event(),
 		sync: event(),
-		recoverFocus: event(),
-		dragAction: event(),
-		updated: event(),
-		afterTokensRendered: event(),
+		drag: event(),
+		rendered: event(),
 		mounted: event(),
 		unmounted: event()
 	};
-	refs = {
-		container: null,
-		overlay: null
-	};
 	handler = new MarkputHandler(this);
-	features = {
+	feature = {
 		overlay: new OverlayFeature(this),
 		focus: new FocusFeature(this),
 		input: new InputFeature(this),
@@ -4334,17 +4232,17 @@ var Store = class {
 		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()));
+		watch(this.emit.mounted, () => Object.values(this.feature).forEach((f) => f.enable()));
+		watch(this.emit.unmounted, () => Object.values(this.feature).forEach((f) => f.disable()));
 	}
-	setState(values) {
+	setProps(values) {
 		batch(() => {
-			const state = this.state;
+			const props = this.props;
 			for (const key of Object.keys(values)) {
-				if (!(key in state)) continue;
-				state[key](values[key]);
+				if (!(key in props)) continue;
+				props[key](values[key]);
 			}
-		});
+		}, { mutable: true });
 	}
 };
 //#endregion
@@ -4389,14 +4287,17 @@ var MarkHandler = class {
 	get slot() {
 		return this.#token.slot?.content;
 	}
+	get #tokenInfo() {
+		return findToken(this.#store.state.tokens(), this.#token);
+	}
 	get depth() {
-		return findToken(this.#store.state.tokens(), this.#token)?.depth ?? 0;
+		return this.#tokenInfo?.depth ?? 0;
 	}
 	get hasChildren() {
 		return this.#token.children.some((child) => child.type === "mark");
 	}
 	get parent() {
-		return findToken(this.#store.state.tokens(), this.#token)?.parent;
+		return this.#tokenInfo?.parent;
 	}
 	get tokens() {
 		return this.#token.children;
@@ -4407,27 +4308,40 @@ var MarkHandler = class {
 		if (props.meta !== void 0) this.#token.meta = props.meta;
 		this.#emitChange();
 	};
-	remove = () => this.#store.event.delete({ token: this.#token });
+	remove = () => this.#store.emit.markRemove({ token: this.#token });
 	#emitChange() {
-		this.#store.event.change();
+		this.#store.emit.change();
 	}
 };
 //#endregion
-//#region src/lib/hooks/createUseHook.ts
-setUseHookFactory((sig) => {
-	const s = sig;
-	const subscribe = (cb) => watch(s, cb);
-	const getSnapshot = () => s();
-	return () => useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-});
-//#endregion
 //#region src/lib/providers/StoreContext.ts
 const StoreContext = createContext(void 0);
 StoreContext.displayName = "StoreContext";
-function useStore() {
+//#endregion
+//#region src/lib/hooks/useMarkput.ts
+function useMarkput(selector) {
 	const store = useContext(StoreContext);
 	if (store === void 0) throw new Error("Store not found. Make sure to wrap component in StoreContext.");
-	return store;
+	const stableRef = useRef(null);
+	if (stableRef.current === null) {
+		const target = selector(store);
+		const derived = computed(() => {
+			if (typeof target === "function") return target();
+			const out = {};
+			for (const k in target) {
+				const val = target[k];
+				out[k] = isReactive(val) ? val() : val;
+			}
+			return out;
+		});
+		stableRef.current = {
+			derived,
+			subscribe: (cb) => watch(derived, cb),
+			getSnapshot: () => derived()
+		};
+	}
+	const { subscribe, getSnapshot } = stableRef.current;
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 //#endregion
 //#region src/components/Popup/List.tsx
@@ -4463,9 +4377,11 @@ const Popup = ({ ref, style, children }) => {
 //#endregion
 //#region src/components/BlockMenu.tsx
 const BlockMenu = memo(({ token }) => {
-	const blockStore = useStore().blocks.get(token);
-	const menuOpen = blockStore.state.menuOpen.use();
-	const menuPosition = blockStore.state.menuPosition.use();
+	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, {
 		ref: (el) => blockStore.attachMenu(el),
@@ -4494,18 +4410,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 readOnly = store.state.readOnly.use();
-	const drag = store.state.drag.use();
-	const blockStore = store.blocks.get(token);
-	const isDragging = blockStore.state.isDragging.use();
-	const isHovered = blockStore.state.isHovered.use();
-	const alwaysShowHandle = useMemo(() => getAlwaysShowHandleDrag(drag), [drag]);
+	const { blockStore, emit, readOnly, draggable, isDragging, isHovered } = useMarkput((s) => ({
+		blockStore: s.blocks.get(token),
+		emit: s.emit,
+		readOnly: s.props.readOnly,
+		draggable: s.props.draggable,
+		isDragging: s.blocks.get(token).state.isDragging,
+		isHovered: s.blocks.get(token).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, emit),
 			type: "button",
 			draggable: true,
 			className: cx(styles$1.GripButton, isDragging && styles$1.GripButtonDragging),
@@ -4518,7 +4436,7 @@ DragHandle.displayName = "DragHandle";
 //#endregion
 //#region src/components/DropIndicator.tsx
 const DropIndicator = memo(({ token, position }) => {
-	if (useStore().blocks.get(token).state.dropPosition.use() !== 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 }
@@ -4537,12 +4455,15 @@ function useToken() {
 //#endregion
 //#region src/components/Token.tsx
 const Token = memo(({ mark }) => {
-	const store = useStore();
-	const [Component, props] = store.slot.mark.use(mark);
+	const { resolveMarkSlot, key } = useMarkput((s) => ({
+		resolveMarkSlot: s.computed.mark,
+		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
 		})
 	});
@@ -4550,17 +4471,25 @@ const Token = memo(({ mark }) => {
 Token.displayName = "Token";
 //#endregion
 //#region src/components/Block.tsx
-const Block = memo(({ token, blockIndex }) => {
-	const store = useStore();
-	const [ContainerComponent, containerProps] = store.slot.block.use();
-	const blockStore = store.blocks.get(token);
-	const isDragging = blockStore.state.isDragging.use();
-	return /* @__PURE__ */ jsxs(ContainerComponent, {
-		ref: (el) => blockStore.attachContainer(el, blockIndex, store.event),
+const Block = memo(({ token }) => {
+	const { blockStore, emit, Component, slotProps, isDragging, tokens } = useMarkput((s) => ({
+		blockStore: s.blocks.get(token),
+		emit: s.emit,
+		Component: s.computed.blockComponent,
+		slotProps: s.computed.blockProps,
+		isDragging: s.blocks.get(token).state.isDragging,
+		tokens: s.state.tokens
+	}));
+	const blockIndex = tokens.indexOf(token);
+	return /* @__PURE__ */ jsxs(Component, {
+		ref: (el) => blockStore.attachContainer(el, blockIndex, emit),
 		"data-testid": "block",
-		...containerProps,
-		className: styles$1.Block,
-		style: { opacity: isDragging ? .4 : 1 },
+		...slotProps,
+		className: cx(styles$1.Block, slotProps?.className),
+		style: {
+			opacity: isDragging ? .4 : 1,
+			...slotProps?.style
+		},
 		children: [
 			/* @__PURE__ */ jsx(DropIndicator, {
 				token,
@@ -4583,60 +4512,60 @@ Block.displayName = "Block";
 //#endregion
 //#region src/components/Container.tsx
 const Container = memo(() => {
-	const store = useStore();
-	const drag = store.state.drag.use();
-	const tokens = store.state.tokens.use();
+	const { isBlock, tokens, key, state, emit, Component, props } = useMarkput((s) => ({
+		isBlock: s.computed.isBlock,
+		tokens: s.state.tokens,
+		key: s.key,
+		state: s.state,
+		emit: s.emit,
+		Component: s.computed.containerComponent,
+		props: s.computed.containerProps
+	}));
 	useLayoutEffect(() => {
-		store.event.afterTokensRendered();
-	}, [tokens]);
-	const className = store.computed.containerClass.use();
-	const style = store.computed.containerStyle.use();
-	const readOnly = store.state.readOnly.use();
-	const key = store.key;
-	const refs = store.refs;
-	const [ContainerComponent, containerProps] = store.slot.container.use();
-	const containerStyle = drag && !readOnly ? style ? {
-		paddingLeft: 24,
-		...style
-	} : { paddingLeft: 24 } : style;
-	return /* @__PURE__ */ jsx(ContainerComponent, {
-		ref: (el) => refs.container = el,
-		...containerProps,
-		className,
-		style: containerStyle,
-		children: drag ? 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)))
+		emit.rendered();
+	}, [tokens, emit]);
+	return /* @__PURE__ */ jsx(Component, {
+		ref: state.container,
+		...props,
+		children: isBlock ? tokens.map((t) => /* @__PURE__ */ jsx(Block, { token: t }, key.get(t))) : tokens.map((t) => /* @__PURE__ */ jsx(Token, { mark: t }, key.get(t)))
 	});
 });
 Container.displayName = "Container";
 //#endregion
 //#region src/lib/hooks/useOverlay.tsx
 function useOverlay() {
-	const store = useStore();
-	const match = store.state.overlayMatch.use();
-	if (!match) throw new Error("useOverlay requires an active overlay match");
-	const style = useMemo(() => Caret.getAbsolutePosition(), [match]);
-	const close = useCallback(() => store.event.clearOverlay(), []);
+	const { match, emit, state } = useMarkput((s) => ({
+		match: s.state.overlayMatch,
+		emit: s.emit,
+		state: s.state
+	}));
+	const style = useMemo(() => {
+		if (!match) return {
+			left: 0,
+			top: 0
+		};
+		return Caret.getAbsolutePosition();
+	}, [match]);
+	const close = useCallback(() => emit.overlayClose(), []);
 	return {
 		match,
 		style,
 		select: useCallback((value) => {
+			if (!match) return;
 			const mark = createMarkFromOverlay(match, value.value, value.meta);
-			store.event.select({
+			emit.overlaySelect({
 				mark,
 				match
 			});
-			store.event.clearOverlay();
+			emit.overlayClose();
 		}, [match]),
 		close,
 		ref: useMemo(() => ({
 			get current() {
-				return store.refs.overlay;
+				return state.overlay();
 			},
 			set current(v) {
-				store.refs.overlay = v;
+				state.overlay(v);
 			}
 		}), [])
 	};
@@ -4644,18 +4573,18 @@ function useOverlay() {
 //#endregion
 //#region src/components/Suggestions/Suggestions.tsx
 const Suggestions = () => {
-	const store = useStore();
+	const { state } = useMarkput((s) => ({ state: s.state }));
 	const { match, select, style, ref } = useOverlay();
 	const [active, setActive] = useState(NaN);
-	const data = match.option.overlay?.data ?? [];
-	const filtered = useMemo(() => filterSuggestions(data, match.value), [match.value, data]);
+	const data = match?.option.overlay?.data ?? [];
+	const filtered = useMemo(() => match ? filterSuggestions(data, match.value) : [], [match, data]);
 	const length = filtered.length;
 	const activeRef = useRef(active);
 	activeRef.current = active;
 	const filteredRef = useRef(filtered);
 	filteredRef.current = filtered;
 	useEffect(() => {
-		const container = store.refs.container;
+		const container = state.container();
 		if (!container) return;
 		const handler = (event) => {
 			const result = navigateSuggestions(event.key, activeRef.current, length);
@@ -4697,10 +4626,13 @@ const Suggestions = () => {
 //#endregion
 //#region src/components/OverlayRenderer.tsx
 const OverlayRenderer = memo(() => {
-	const store = useStore();
-	const overlayMatch = store.state.overlayMatch.use();
-	const key = useMemo(() => overlayMatch ? store.key.get(overlayMatch.option) : void 0, [overlayMatch]);
-	const [Overlay, props] = store.slot.overlay.use(overlayMatch?.option, Suggestions);
+	const { overlayMatch, key: keyGen, resolveOverlay } = useMarkput((s) => ({
+		overlayMatch: s.state.overlayMatch,
+		key: s.key,
+		resolveOverlay: s.computed.overlay
+	}));
+	const key = useMemo(() => overlayMatch ? keyGen.get(overlayMatch.option) : void 0, [overlayMatch]);
+	const [Overlay, props] = resolveOverlay(overlayMatch?.option, Suggestions);
 	if (!key) return;
 	return /* @__PURE__ */ jsx(Overlay, { ...props }, key);
 });
@@ -4709,10 +4641,11 @@ OverlayRenderer.displayName = "OverlayRenderer";
 //#region src/components/MarkedInput.tsx
 function MarkedInput(props) {
 	const [store] = useState(() => new Store());
-	store.setState(props);
-	useLayoutEffect(() => store.event.mounted());
-	useLayoutEffect(() => store.event.updated());
-	useEffect(() => () => store.event.unmounted(), [store]);
+	store.setProps(props);
+	useLayoutEffect(() => {
+		store.emit.mounted();
+		return () => store.emit.unmounted();
+	}, []);
 	useImperativeHandle(props.ref, () => store.handler, [store]);
 	return /* @__PURE__ */ jsxs(StoreContext, {
 		value: store,
@@ -4722,7 +4655,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);
@@ -4732,7 +4668,6 @@ const useMark = (options = {}) => {
 		token
 	}), [store, token]);
 	useUncontrolledInit(ref, options, token);
-	const readOnly = store.state.readOnly.use();
 	useEffect(() => {
 		mark.readOnly = readOnly;
 	}, [mark, readOnly]);
@@ -4744,6 +4679,6 @@ function useUncontrolledInit(ref, options, token) {
 	}, []);
 }
 //#endregion
-export { MarkHandler, MarkedInput, MarkputHandler, annotate, denote, useMark, useOverlay };
+export { MarkHandler, MarkedInput, MarkputHandler, annotate, denote, useMark, useMarkput, useOverlay };
 
 //# sourceMappingURL=index.js.map