@markput/react 0.11.0 → 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();
@@ -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;
@@ -942,6 +942,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 {
@@ -2245,7 +2269,7 @@ var ParseFeature = class {
 	}
 	#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));
@@ -2258,7 +2282,7 @@ var ParseFeature = class {
 	#subscribeReactiveParse() {
 		const { store } = this;
 		watch(computed(() => [store.props.value(), store.computed.parser()]), () => {
-			if (!store.state.recovery()) store.event.parse();
+			if (!store.state.recovery()) store.emit.reparse();
 		});
 	}
 };
@@ -2294,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);
@@ -2308,8 +2332,8 @@ function selectAllText(store, event) {
 		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");
@@ -2332,7 +2356,7 @@ var TextSelectionFeature = class {
 				this.#isPressed = true;
 			});
 			listen(document, "mousemove", (e) => {
-				const container = this.store.refs.container;
+				const container = this.store.state.container();
 				if (!container) return;
 				const isPressed = this.#isPressed;
 				const isNotInnerSome = !container.contains(this.#pressedNode) || this.#pressedNode !== e.target;
@@ -2356,7 +2380,7 @@ var TextSelectionFeature = class {
 			});
 			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");
 			});
@@ -2379,7 +2403,7 @@ var ArrowNavFeature = class {
 	}
 	enable() {
 		if (this.#scope) return;
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		this.#scope = effectScope(() => {
 			listen(container, "keydown", (e) => {
@@ -2467,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;
@@ -2525,7 +2549,7 @@ var CopyFeature = class {
 	}
 	enable() {
 		if (this.#scope) return;
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		this.#scope = effectScope(() => {
 			listen(container, "copy", (e) => {
@@ -2561,7 +2585,7 @@ var CopyFeature = class {
 		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;
@@ -2716,9 +2740,10 @@ function deleteMark(place, store) {
 		anchor: caretAnchor.prev,
 		caret
 	});
-	store.event.change();
+	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();
@@ -2747,7 +2772,7 @@ var ContentEditableFeature = class {
 			alienEffect(() => {
 				if (this.store.state.selecting() === void 0) this.sync();
 			});
-			watch(this.store.event.sync, () => {
+			watch(this.store.emit.sync, () => {
 				this.sync();
 			});
 		});
@@ -2757,7 +2782,7 @@ 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.props.readOnly();
 		const value = readOnly ? "false" : "true";
@@ -2976,7 +3001,7 @@ var BlockEditFeature = class {
 	}
 	enable() {
 		if (this.#scope) return;
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		this.#scope = effectScope(() => {
 			listen(container, "keydown", (e) => {
@@ -2998,7 +3023,7 @@ var BlockEditFeature = class {
 		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));
@@ -3115,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;
@@ -3163,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;
@@ -3189,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;
@@ -3218,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;
@@ -3258,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;
@@ -3310,7 +3336,7 @@ var DragFeature = class {
 	#unsub;
 	enable() {
 		if (this.#unsub) return;
-		this.#unsub = watch(this.store.event.dragAction, (action) => {
+		this.#unsub = watch(this.store.emit.drag, (action) => {
 			switch (action.type) {
 				case "reorder":
 					this.#reorder(action.source, action.target);
@@ -3345,7 +3371,7 @@ var DragFeature = class {
 		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();
 		});
@@ -3390,14 +3416,14 @@ var SystemListenerFeature = class {
 	enable() {
 		if (this.#scope) return;
 		this.#scope = effectScope(() => {
-			watch(this.store.event.change, () => {
+			watch(this.store.emit.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();
+					trigger(this.store.state.tokens);
 					return;
 				}
 				const tokens = this.store.state.tokens();
@@ -3406,9 +3432,9 @@ var SystemListenerFeature = class {
 				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;
@@ -3425,7 +3451,7 @@ var SystemListenerFeature = class {
 				});
 				this.store.props.onChange()?.(newValue);
 			});
-			watch(this.store.event.select, (event) => {
+			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;
@@ -3453,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();
 				}
 			});
 		});
@@ -3472,7 +3498,7 @@ var FocusFeature = class {
 	}
 	enable() {
 		if (this.#scope) return;
-		const container = this.store.refs.container;
+		const container = this.store.state.container();
 		if (!container) return;
 		this.#scope = effectScope(() => {
 			listen(container, "focusin", (e) => {
@@ -3485,17 +3511,14 @@ var FocusFeature = class {
 			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;
+					const container = this.store.state.container();
 					(container ? firstHtmlChild(container) : null)?.focus();
 				}
 			});
-			watch(this.store.event.recoverFocus, () => {
-				this.#recover();
-			});
-			watch(this.store.event.afterTokensRendered, () => {
-				this.store.event.sync();
+			watch(this.store.emit.rendered, () => {
+				this.store.emit.sync();
 				if (!this.store.props.Mark()) return;
-				this.store.event.recoverFocus();
+				this.#recover();
 			});
 		});
 	}
@@ -3512,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;
 			}
@@ -3543,14 +3566,14 @@ var InputFeature = class {
 	}
 	enable() {
 		if (this.#scope) return;
-		const container = this.store.refs.container;
+		const container = this.store.state.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;
+				const c = this.store.state.container();
 				if (c) captureMarkupPaste(e, c);
 				handlePaste(this.store, e);
 			});
@@ -3596,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;
 			}
 		}
@@ -3625,10 +3648,10 @@ function handleBeforeInput(store, event) {
 	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;
@@ -3725,7 +3748,8 @@ 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;
@@ -3741,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({
@@ -3792,40 +3816,40 @@ var OverlayFeature = class {
 	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.#scope = effectScope(() => {
-			watch(this.store.event.clearOverlay, () => {
+			watch(this.store.emit.overlayClose, () => {
 				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.store.event.change, () => {
+			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();
 			});
 			alienEffect(() => {
 				if (this.store.state.overlayMatch()) {
 					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.store.emit.overlayClose();
 					});
 					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.store.state.overlay()?.contains(target)) return;
+						if (this.store.state.container()?.contains(target)) return;
+						this.store.emit.overlayClose();
 					}, true);
 				}
 			});
 			const selectionChangeHandler = () => {
-				if (!this.store.refs.container?.contains(document.activeElement)) return;
+				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.store.event.checkOverlay();
+				if (showOverlayOn === type || Array.isArray(showOverlayOn) && showOverlayOn.includes(type)) this.#probeTrigger();
 			};
 			listen(document, "selectionchange", selectionChangeHandler);
 		});
@@ -3963,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;
@@ -4009,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) => {
@@ -4145,6 +4169,8 @@ var Store = class {
 		previousValue: signal(void 0),
 		innerValue: signal(void 0),
 		recovery: signal(void 0),
+		container: signal(null),
+		overlay: signal(null),
 		selecting: signal(void 0),
 		overlayMatch: signal(void 0)
 	};
@@ -4179,27 +4205,20 @@ var Store = class {
 			return (token) => resolveMarkSlot(token, options, Mark, 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),
@@ -4213,8 +4232,8 @@ 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()));
 	}
 	setProps(values) {
 		batch(() => {
@@ -4225,9 +4244,6 @@ var Store = class {
 			}
 		}, { mutable: true });
 	}
-	bumpTokens() {
-		this.state.tokens([...this.state.tokens()]);
-	}
 };
 //#endregion
 //#region ../../core/src/features/mark/MarkHandler.ts
@@ -4292,24 +4308,20 @@ 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/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 +4377,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 +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 blockStore = store.blocks.get(token);
-	const { readOnly, draggable } = useMarkput((s) => ({
+	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
+		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, emit),
 			type: "button",
 			draggable: true,
 			className: cx(styles$1.GripButton, isDragging && styles$1.GripButtonDragging),
@@ -4424,8 +4436,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 +4455,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.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
 		})
 	});
@@ -4457,14 +4471,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, 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, store.event),
+		ref: (el) => blockStore.attachContainer(el, blockIndex, emit),
 		"data-testid": "block",
 		...slotProps,
 		className: cx(styles$1.Block, slotProps?.className),
@@ -4494,33 +4512,33 @@ Block.displayName = "Block";
 //#endregion
 //#region src/components/Container.tsx
 const Container = memo(() => {
-	const { layout, tokens, key, refs, event } = useMarkput((s) => ({
-		layout: s.props.layout,
+	const { isBlock, tokens, key, state, emit, Component, props } = useMarkput((s) => ({
+		isBlock: s.computed.isBlock,
 		tokens: s.state.tokens,
 		key: s.key,
-		refs: s.refs,
-		event: s.event
+		state: s.state,
+		emit: s.emit,
+		Component: s.computed.containerComponent,
+		props: s.computed.containerProps
 	}));
-	const Component = useMarkput((s) => s.computed.containerComponent);
-	const props = useMarkput((s) => s.computed.containerProps);
 	useLayoutEffect(() => {
-		event.afterTokensRendered();
-	}, [tokens, event]);
+		emit.rendered();
+	}, [tokens, emit]);
 	return /* @__PURE__ */ jsx(Component, {
-		ref: (el) => refs.container = el,
+		ref: state.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, emit, state } = useMarkput((s) => ({
+		match: s.state.overlayMatch,
+		emit: s.emit,
+		state: s.state
+	}));
 	const style = useMemo(() => {
 		if (!match) return {
 			left: 0,
@@ -4528,26 +4546,26 @@ function useOverlay() {
 		};
 		return Caret.getAbsolutePosition();
 	}, [match]);
-	const close = useCallback(() => store.event.clearOverlay(), []);
+	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);
 			}
 		}), [])
 	};
@@ -4555,7 +4573,7 @@ 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 ?? [];
@@ -4566,7 +4584,7 @@ const Suggestions = () => {
 	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);
@@ -4608,10 +4626,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 { 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);
 });
@@ -4622,10 +4643,9 @@ function MarkedInput(props) {
 	const [store] = useState(() => new Store());
 	store.setProps(props);
 	useLayoutEffect(() => {
-		store.event.mounted();
-		return () => store.event.unmounted();
+		store.emit.mounted();
+		return () => store.emit.unmounted();
 	}, []);
-	useLayoutEffect(() => store.event.updated());
 	useImperativeHandle(props.ref, () => store.handler, [store]);
 	return /* @__PURE__ */ jsxs(StoreContext, {
 		value: store,
@@ -4635,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);
@@ -4645,7 +4668,6 @@ const useMark = (options = {}) => {
 		token
 	}), [store, token]);
 	useUncontrolledInit(ref, options, token);
-	const readOnly = useMarkput((s) => s.props.readOnly);
 	useEffect(() => {
 		mark.readOnly = readOnly;
 	}, [mark, readOnly]);