ilha 0.14.8 → 0.14.10

package/dist/define.d.ts

@@ -1,5 +1,4 @@
 import { i as Component } from "./types-CJF2qMK6.js";
 //#region src/define.d.ts
-declare const define: (name: string, component: Component) => void;
-//#endregion
-export { define };
+export declare const define: (name: string, component: Component) => void;
+//#endregion

package/dist/define.js

@@ -1,4 +1,4 @@
-import { t as mount } from "./mount-BQ-zcg2x.js";
+import { t as mount } from "./mount-BzNrfVW4.js";
 
 //#region src/define.ts
 const define = (name, component) => {

package/dist/index.d.ts

@@ -16,9 +16,9 @@ interface IlhaContext<A> {
   readonly defaultValue: A;
   readonly Provider: (props: ContextProviderProps<A>) => View;
 }
-declare const createContext: <A>(defaultValue: A) => IlhaContext<A>;
+export declare const createContext: <A>(defaultValue: A) => IlhaContext<A>;
 /** Read a context value as an atom handle. Subscribes the active fiber on read. */
-declare const context: <A>(ctx: IlhaContext<A>) => AtomHandle<A>;
+export declare const context: <A>(ctx: IlhaContext<A>) => AtomHandle<A>;
 //#endregion
 //#region src/error-boundary.d.ts
 interface ErrorFallbackProps {
@@ -32,7 +32,7 @@ interface ErrorBoundaryProps {
   children?: View;
 }
 /** Catch subtree failures and paint a fallback. Supports reset(). */
-declare const ErrorBoundary: (props: ErrorBoundaryProps) => View;
+export declare const ErrorBoundary: (props: ErrorBoundaryProps) => View;
 //#endregion
 //#region src/watch.d.ts
 /** Values delivered to watch callbacks. */
@@ -44,30 +44,30 @@ interface WatchFn {
   <A extends WatchValue>(source: AtomHandle<A> | Atom.Atom<A> | Stream$1.Stream<A, unknown, unknown>, fn: WatchCallback<A>): Instruction<undefined>;
   once: (fn: (ctx: WatchContext) => WatchOnceCleanup | undefined | Promise<WatchOnceCleanup | undefined>) => Instruction<undefined>;
 }
-declare const watch: WatchFn;
+export declare const watch: WatchFn;
 //#endregion
 //#region src/atom.d.ts
 /** Key-order-insensitive deep equality for JSON-shaped values. */
-declare const structuralEqual: typeof Equal.equals;
+export declare const structuralEqual: typeof Equal.equals;
 /** Read atoms inside `fn` without subscribing the active render. Sync only. */
-declare const untrack: <A>(fn: () => A) => A;
+export declare const untrack: <A>(fn: () => A) => A;
 interface AtomFn {
   <A>(init: A | Atom.Atom<A> | Effect$1.Effect<A, unknown, AtomRegistry> | Stream$1.Stream<A, unknown, AtomRegistry>, options?: AtomOptions<A>): AtomHandle<A>;
   lazy: <A>(init: () => A) => AtomHandle<A>;
 }
-declare const atom: AtomFn;
-declare const batch: (f: () => void) => void;
+export declare const atom: AtomFn;
+export declare const batch: (f: () => void) => void;
 //#endregion
 //#region src/resource.d.ts
 /** Drop the cached value for `key` and refetch it in live components. */
-declare const invalidate: (key: string) => void;
+export declare const invalidate: (key: string) => void;
 /**
  * Fetch-once, share-everywhere async state for `key`. Concurrent mounts
  * dedupe on one in-flight request; remounts seed from the shared cache
  * (and revalidate when `staleWhileRevalidate` holds). Call unconditionally
  * at the top level of a sync component, before any `await`.
  */
-declare const resource: <T>(key: string, fetcher: ResourceFetcher<T>, opts?: ResourceOptions) => Resource<T>;
+export declare const resource: <T>(key: string, fetcher: ResourceFetcher<T>, opts?: ResourceOptions) => Resource<T>;
 //#endregion
 //#region src/sse.d.ts
 /**
@@ -76,10 +76,10 @@ declare const resource: <T>(key: string, fetcher: ResourceFetcher<T>, opts?: Res
  * an empty stream with status `"closed"`. Call unconditionally at the top
  * level of a component.
  */
-declare const fromEventSource: <T = string>(url: string, opts?: EventSourceOptions<T>) => EventSourceFeed<T>;
+export declare const fromEventSource: <T = string>(url: string, opts?: EventSourceOptions<T>) => EventSourceFeed<T>;
 //#endregion
 //#region src/when.d.ts
-declare const when: <A, E = never, R = never>(stream: Stream$1.Stream<A, E, R>, body: (value: A) => Generator<Yielded, View | undefined, View>) => Instruction<undefined, E>;
+export declare const when: <A, E = never, R = never>(stream: Stream$1.Stream<A, E, R>, body: (value: A) => Generator<Yielded, View | undefined, View>) => Instruction<undefined, E>;
 //#endregion
 //#region src/mount.d.ts
 interface RenderToStringOptions {
@@ -92,8 +92,8 @@ interface MountOptions {
   hydrate?: boolean;
   onError?: <E>(error: E) => void;
 }
-declare const mount: (el: Element, fn: Component, opts?: MountOptions) => (() => void);
-declare const renderToString: (fn: Component, opts?: RenderToStringOptions) => Promise<string>;
+export declare const mount: (el: Element, fn: Component, opts?: MountOptions) => (() => void);
+export declare const renderToString: (fn: Component, opts?: RenderToStringOptions) => Promise<string>;
 //#endregion
 //#region src/unsafe.d.ts
 /**
@@ -104,6 +104,6 @@ declare const renderToString: (fn: Component, opts?: RenderToStringOptions) => P
  * scripts inserted this way do not run, but event attributes and other
  * markup still apply.
  */
-declare const unsafe: (html: string) => UnsafeHtml;
+export declare const unsafe: (html: string) => UnsafeHtml;
 //#endregion
-export { type AtomEquality, type AtomHandle, type AtomOptions, type Component, type ContextProviderProps, ErrorBoundary, type ErrorBoundaryProps, type ErrorFallback, type ErrorFallbackProps, type EventSourceFeed, type EventSourceOptions, type EventSourceStatus, Fragment, type IlhaContext, type MountOptions, type RenderToStringOptions, type Resource, type ResourceFetcher, type ResourceOptions, type UnsafeHtml, type View, type WatchCallback, type WatchContext, type WatchOnceCleanup, atom, batch, context, createContext, fromEventSource, h, invalidate, mount, renderToString, resource, structuralEqual, unsafe, untrack, watch, when };
+export { type AtomEquality, type AtomHandle, type AtomOptions, type Component, type ContextProviderProps, type ErrorBoundaryProps, type ErrorFallback, type ErrorFallbackProps, type EventSourceFeed, type EventSourceOptions, type EventSourceStatus, Fragment, type IlhaContext, type MountOptions, type RenderToStringOptions, type Resource, type ResourceFetcher, type ResourceOptions, type UnsafeHtml, type View, type WatchCallback, type WatchContext, type WatchOnceCleanup, h };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { _ as makeFiber, a as interpret, c as handleOwner, d as structuralEqual, f as untrack, g as getFiber, h as closeFiber, i as runSetup, l as instr, m as clearFiberView, n as renderToString, o as atom, p as wrapHandle, r as unsafe, s as batch, t as mount, u as isAtomHandle } from "./mount-BQ-zcg2x.js";
+import { _ as makeFiber, a as interpret, c as handleOwner, d as structuralEqual, f as untrack, g as getFiber, h as closeFiber, i as runSetup, l as instr, m as clearFiberView, n as renderToString, o as atom, p as wrapHandle, r as unsafe, s as batch, t as mount, u as isAtomHandle } from "./mount-BzNrfVW4.js";
 import { d as errorView, g as isString, i as Fragment, p as isFunction, t as h } from "./vnode-M-oJMKcv.js";
 import * as Atom from "effect/reactivity/Atom";
 import * as Effect from "effect/Effect";
@@ -241,6 +241,18 @@ const watch = Object.assign(watchSource, { once: watchOnce });
 const sharedCache = /* @__PURE__ */ new Map();
 const liveRefetchers = /* @__PURE__ */ new Map();
 const cells$1 = /* @__PURE__ */ new WeakMap();
+/** Unmount: stop every client cell of one fiber (all keys it ever used). */
+const releaseCells = (byKey) => {
+	for (const [key, entry] of byKey) {
+		const c = entry;
+		c.alive = false;
+		c.ctrl?.abort();
+		const live = liveRefetchers.get(key);
+		live?.delete(c.onInvalidate);
+		if (live && live.size === 0) liveRefetchers.delete(key);
+	}
+	byKey.clear();
+};
 const entryFor = (key) => sharedCache.get(key);
 /** Drop the cached value for `key` and refetch it in live components. */
 const invalidate = (key) => {
@@ -325,10 +337,13 @@ const resource = (key, fetcher, opts) => {
 	}
 	let cell = byKey.get(key);
 	if (!cell) {
-		cell = {
+		const fresh = {
 			alive: true,
 			ctrl: null,
-			held: false,
+			onInvalidate: () => {
+				fresh.revalidate();
+			},
+			revalidate: () => {},
 			sink: {
 				data,
 				error,
@@ -336,7 +351,14 @@ const resource = (key, fetcher, opts) => {
 			},
 			started: false
 		};
+		cell = fresh;
 		byKey.set(key, cell);
+		let live = liveRefetchers.get(key);
+		if (!live) {
+			live = /* @__PURE__ */ new Set();
+			liveRefetchers.set(key, live);
+		}
+		live.add(cell.onInvalidate);
 	}
 	cell.sink = {
 		data,
@@ -411,6 +433,9 @@ const resource = (key, fetcher, opts) => {
 			await start();
 		} catch {}
 	};
+	c.revalidate = () => {
+		settleStart();
+	};
 	if (!c.started) {
 		c.started = true;
 		const swr = opts?.staleWhileRevalidate ?? true;
@@ -439,28 +464,9 @@ const resource = (key, fetcher, opts) => {
 			}
 		}
 	}
-	if (!c.held) {
-		c.held = true;
-		const onInvalidate = () => {
-			settleStart();
-		};
-		watch.once(() => {
-			let live = liveRefetchers.get(key);
-			if (!live) {
-				live = /* @__PURE__ */ new Set();
-				liveRefetchers.set(key, live);
-			}
-			live.add(onInvalidate);
-			return () => {
-				c.alive = false;
-				c.ctrl?.abort();
-				const s = liveRefetchers.get(key);
-				s?.delete(onInvalidate);
-				if (s && s.size === 0) liveRefetchers.delete(key);
-				if (fiberCells.get(key) === c) fiberCells.delete(key);
-			};
-		});
-	}
+	watch.once(() => () => {
+		releaseCells(fiberCells);
+	});
 	return {
 		data,
 		error,

package/dist/jsx-runtime.d.ts

@@ -1,8 +1,8 @@
 import { a as ComponentFn, d as JsxComponent, f as PropBag, l as Fragment, v as View } from "./types-CJF2qMK6.js";
 import { n as JSX, t as h } from "./vnode-CUTNGblA.js";
 //#region src/jsx-runtime.d.ts
-declare const jsx: (type: string | Fragment | ComponentFn | JsxComponent, props: PropBag | null, key?: string | number) => ReturnType<typeof h>;
-declare const jsxs: (type: string | Fragment | ComponentFn | JsxComponent, props: PropBag | null, key?: string | number) => ReturnType<typeof h>;
-declare const jsxDEV: (type: string | Fragment | ComponentFn | JsxComponent, props: PropBag | null, key?: string | number) => ReturnType<typeof h>;
+export declare const jsx: (type: string | Fragment | ComponentFn | JsxComponent, props: PropBag | null, key?: string | number) => ReturnType<typeof h>;
+export declare const jsxs: typeof jsx;
+export declare const jsxDEV: typeof jsx;
 //#endregion
-export { Fragment, type JSX, type View, h, jsx, jsxDEV, jsxs };
+export { Fragment, type JSX, type View, h };

package/dist/{mount-BQ-zcg2x.js → mount-BzNrfVW4.js}

@@ -512,39 +512,71 @@ const eventTypeFromProp = (key) => {
 	return type.length >= 3 ? type : void 0;
 };
 const isEventProp = (key) => eventTypeFromProp(key) !== void 0;
+const dispatch = (el, type, ev) => {
+	const fiber = el.__ilhaFiber;
+	if (!fiber || fiber.closed) return;
+	const fn = el.__ilhaHandlers?.get(type);
+	if (!isFunction(fn)) return;
+	const out = fn(ev);
+	if (Effect$1.isEffect(out)) fiber.run(out);
+};
+/** One native listener per type; it reads the latest handler at dispatch. */
+const listen = (el, type) => {
+	el.__ilhaEvents ??= /* @__PURE__ */ new Set();
+	if (el.__ilhaEvents.has(type)) return;
+	el.__ilhaEvents.add(type);
+	el.addEventListener(type, (ev) => {
+		dispatch(el, type, ev);
+	});
+};
+const bindSsrActions = (el, props, fiber) => {
+	const seen = /* @__PURE__ */ new Set();
+	for (const key of Object.keys(props)) {
+		const type = eventTypeFromProp(key);
+		if (!type || seen.has(type)) continue;
+		seen.add(type);
+		const fn = props[key];
+		if (!isFunction(fn)) continue;
+		const branded = fn[ACTION_CALL$1];
+		const rec = branded?.k ? {
+			a: branded.a ?? [],
+			k: branded.k
+		} : void 0;
+		if (!rec) continue;
+		const id = `${type}:${fiber.runtime.ssrEventI}`;
+		fiber.runtime.ssrEventI += 1;
+		fiber.runtime.ssrActions[id] = rec;
+		const existing = el.dataset.ilhaOn;
+		el.dataset.ilhaOn = existing ? `${existing},${id}` : id;
+	}
+};
 const bindEvents = (node, props, fiber) => {
 	const el = node;
-	el.__ilhaProps = props;
-	el.__ilhaEvents ??= /* @__PURE__ */ new Set();
+	if (fiber.runtime.ssr) {
+		bindSsrActions(el, props, fiber);
+		return;
+	}
+	const handlers = /* @__PURE__ */ new Map();
 	for (const key of Object.keys(props)) {
 		const type = eventTypeFromProp(key);
-		if (!type) continue;
-		if (el.__ilhaEvents.has(type)) continue;
-		el.__ilhaEvents.add(type);
-		if (fiber.runtime.ssr) {
-			const fn = props[key];
-			if (!isFunction(fn)) continue;
-			const branded = fn[ACTION_CALL$1];
-			const rec = branded?.k ? {
-				a: branded.a ?? [],
-				k: branded.k
-			} : void 0;
-			if (!rec) continue;
-			const id = `${type}:${fiber.runtime.ssrEventI}`;
-			fiber.runtime.ssrEventI += 1;
-			fiber.runtime.ssrActions[id] = rec;
-			const existing = el.dataset.ilhaOn;
-			el.dataset.ilhaOn = existing ? `${existing},${id}` : id;
-			continue;
-		}
-		el.addEventListener(type, (ev) => {
-			if (fiber.closed) return;
-			const fn = el.__ilhaProps?.[key];
-			if (!isFunction(fn)) return;
-			const out = fn(ev);
-			if (Effect$1.isEffect(out)) fiber.run(out);
-		});
+		if (type && !handlers.has(type)) handlers.set(type, props[key]);
 	}
+	el.__ilhaHandlers = handlers;
+	el.__ilhaFiber = fiber;
+	for (const type of handlers.keys()) listen(el, type);
+};
+/**
+* The morph kept `live` in place of the freshly rendered `fresh`: hand the
+* render's handlers to the live node, so closures never go stale and handlers
+* added on a later render still fire.
+*/
+const adoptEvents = (live, fresh) => {
+	const from = fresh;
+	if (!from.__ilhaFiber) return;
+	const to = live;
+	to.__ilhaHandlers = from.__ilhaHandlers;
+	to.__ilhaFiber = from.__ilhaFiber;
+	for (const type of from.__ilhaHandlers?.keys() ?? []) listen(to, type);
 };
 
 //#endregion
@@ -556,14 +588,17 @@ const morphKeyOf = (el) => {
 	const s = el.getAttribute(SLOT_ATTR);
 	return s === null ? null : `s:${s}`;
 };
+/** Whether `data-morph-preserve` on `el` lists `token`. */
+const hasPreserveToken = (el, token) => {
+	const custom = el.getAttribute(PRESERVE_ATTR);
+	if (custom === null) return false;
+	for (const listed of custom.split(/\s+/u)) if (listed === token) return true;
+	return false;
+};
 const shouldPreserveMorphAttr = (el, name) => {
 	if (name === "value" || name === "checked" || name === "selected") return true;
 	if (name === PRESERVE_ATTR) return el.hasAttribute(PRESERVE_ATTR);
-	const custom = el.getAttribute(PRESERVE_ATTR);
-	if (custom !== null) {
-		for (const token of custom.split(/\s+/u)) if (token === name) return true;
-	}
-	return false;
+	return hasPreserveToken(el, name);
 };
 const syncAttributes = (from, to) => {
 	for (const { name, value } of to.attributes) {
@@ -578,9 +613,26 @@ const syncAttributes = (from, to) => {
 		if (!to.hasAttribute(name)) from.removeAttribute(name);
 	}
 };
+/** Deepest focused element, looking through open shadow roots. */
+const deepActiveElement = () => {
+	let active = document.activeElement;
+	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+};
+const snapshotRanges = (active) => {
+	if (!active.isContentEditable) return null;
+	const sel = document.getSelection();
+	if (!sel || sel.rangeCount === 0) return null;
+	const ranges = [];
+	for (let i = 0; i < sel.rangeCount; i += 1) {
+		const range = sel.getRangeAt(i);
+		if (active.contains(range.startContainer)) ranges.push(range.cloneRange());
+	}
+	return ranges.length > 0 ? ranges : null;
+};
 const snapshotFocus = () => {
 	if (globalThis.document === void 0) return null;
-	const active = document.activeElement;
+	const active = deepActiveElement();
 	if (!(active instanceof HTMLElement) || active === document.body) return null;
 	let selection = null;
 	try {
@@ -592,13 +644,23 @@ const snapshotFocus = () => {
 	} catch {}
 	return {
 		active,
+		ranges: snapshotRanges(active),
 		selection
 	};
 };
+const restoreRanges = (ranges) => {
+	const sel = document.getSelection();
+	if (!sel || !ranges.every((r) => r.startContainer.isConnected)) return;
+	sel.removeAllRanges();
+	for (const r of ranges) sel.addRange(r);
+};
 const restoreFocus = (snapshot) => {
 	if (!snapshot || !snapshot.active.isConnected) return;
 	try {
-		if (document.activeElement !== snapshot.active) snapshot.active.focus({ preventScroll: true });
+		if (deepActiveElement() !== snapshot.active) {
+			snapshot.active.focus({ preventScroll: true });
+			if (snapshot.ranges) restoreRanges(snapshot.ranges);
+		}
 		const sel = snapshot.selection;
 		if (sel && sel.start !== null) {
 			const el = snapshot.active;
@@ -606,6 +668,122 @@ const restoreFocus = (snapshot) => {
 		}
 	} catch {}
 };
+const STAND_IN_ATTR = "data-ilha-reuse";
+const standIns = /* @__PURE__ */ new WeakMap();
+/** Live nodes with an outstanding stand-in: the morph must not consume them. */
+const claimed = /* @__PURE__ */ new WeakSet();
+/** Placeholder for a connected live node inside a scratch render tree. */
+const standInFor = (live) => {
+	const el = document.createElementNS(live.namespaceURI, live.localName);
+	for (const name of [SLOT_ATTR, KEY_ATTR]) {
+		const v = live.getAttribute(name);
+		if (v !== null) el.setAttribute(name, v);
+	}
+	el.setAttribute(STAND_IN_ATTR, "");
+	standIns.set(el, live);
+	claimed.add(live);
+	return el;
+};
+const liveOf = (node) => {
+	const live = standIns.get(node);
+	if (!live) return node;
+	claimed.delete(live);
+	return live;
+};
+/**
+* Insert `node` before `ref`. Connected nodes move with `moveBefore` where the
+* browser has it, so they keep focus, iframe, dialog, and element state.
+*/
+const place = (parent, node, ref) => {
+	if (node === ref || node.parentNode === parent && node.nextSibling === ref) return;
+	if (node.isConnected && parent.isConnected && parent.moveBefore) try {
+		parent.moveBefore(node, ref);
+		return;
+	} catch {}
+	if (ref) ref.before(node);
+	else parent.append(node);
+};
+/** Swap stand-ins nested in `node` (now in the document) for live nodes. */
+const resolveNested = (node) => {
+	if (!(node instanceof Element) || !node.firstElementChild) return;
+	const nested = node.querySelectorAll(`[${STAND_IN_ATTR}]`);
+	for (const s of nested) {
+		const live = liveOf(s);
+		if (live !== s && s.parentNode) {
+			place(s.parentNode, live, s);
+			s.remove();
+		}
+	}
+};
+/**
+* Put a rendered node into the live tree: stand-ins become their live nodes,
+* and stand-ins nested in fresh subtrees resolve once the subtree is attached.
+*/
+const insertRendered = (parent, node, ref) => {
+	const live = liveOf(node);
+	place(parent, live, ref);
+	if (live === node) resolveNested(node);
+};
+/** Longest increasing run of old indexes: those nodes never move. */
+const stableSet = (nodes, oldIndex) => {
+	const tails = [];
+	const prev = [];
+	for (let i = 0; i < nodes.length; i += 1) {
+		const node = nodes[i];
+		const idx = node ? oldIndex.get(node) : void 0;
+		if (idx === void 0) {
+			prev.push(-1);
+			continue;
+		}
+		let lo = 0;
+		let hi = tails.length;
+		while (lo < hi) {
+			const mid = Math.floor((lo + hi) / 2);
+			const tail = nodes[tails[mid] ?? 0];
+			if ((tail ? oldIndex.get(tail) ?? 0 : 0) < idx) lo = mid + 1;
+			else hi = mid;
+		}
+		prev.push(lo > 0 ? tails[lo - 1] ?? -1 : -1);
+		tails[lo] = i;
+	}
+	const stable = /* @__PURE__ */ new Set();
+	let k = tails.length > 0 ? tails.at(-1) ?? -1 : -1;
+	while (k >= 0) {
+		const node = nodes[k];
+		if (node) stable.add(node);
+		k = prev[k] ?? -1;
+	}
+	return stable;
+};
+/**
+* Make `parent`'s children exactly `nodes` with the fewest moves. Nodes that
+* keep their relative order stay attached; removed nodes leave first.
+*/
+const placeChildren = (parent, rendered) => {
+	const focus = snapshotFocus();
+	const nodes = rendered.map(liveOf);
+	const wanted = new Set(nodes);
+	const oldIndex = /* @__PURE__ */ new Map();
+	let child = parent.firstChild;
+	while (child) {
+		const next = child.nextSibling;
+		if (wanted.has(child)) oldIndex.set(child, oldIndex.size);
+		else child.remove();
+		child = next;
+	}
+	const stable = stableSet(nodes, oldIndex);
+	let next = null;
+	for (let i = nodes.length - 1; i >= 0; i -= 1) {
+		const node = nodes[i];
+		if (!node) continue;
+		if (!stable.has(node)) {
+			place(parent, node, next);
+			if (!oldIndex.has(node)) resolveNested(node);
+		}
+		next = node;
+	}
+	restoreFocus(focus);
+};
 const buildKeyedIndex = (parent) => {
 	let fromKeyed = null;
 	for (const child of parent.children) {
@@ -667,18 +845,43 @@ const morphSelect = (fromEl, toEl, api) => {
 		if (prev && o.selected !== prev.live) o.selected = prev.live;
 	}
 };
+/** Rendered element → the live element the morph kept in its place. */
+const adoptedBy = /* @__PURE__ */ new WeakMap();
+/** The element a rendered element ended up as in the document. */
+const committedElement = (el) => adoptedBy.get(el) ?? el;
+/** `live` stays in the document for `fresh`: move the render's bindings. */
+const adopt = (live, fresh) => {
+	adoptedBy.set(fresh, live);
+	adoptEvents(live, fresh);
+};
+/**
+* A contenteditable the render leaves empty is uncontrolled: the user's
+* content (and caret) survives, like an uncontrolled textarea.
+*/
+const isUncontrolledEditable = (from, to) => {
+	const mode = to.getAttribute("contenteditable");
+	return mode !== null && mode !== "false" && !to.hasChildNodes() && from.getAttribute("contenteditable") === mode;
+};
+/** Swap `fromNode` for a rendered node without ever detaching live nodes. */
+const replaceRendered = (fromNode, toNode) => {
+	const parent = fromNode.parentNode;
+	if (!parent) return;
+	insertRendered(parent, toNode, fromNode);
+	fromNode.remove();
+};
 const morphElementPair = (fromEl, toEl, api) => {
 	if (fromEl.localName !== toEl.localName) {
-		fromEl.replaceWith(toEl);
+		replaceRendered(fromEl, toEl);
 		return;
 	}
 	const toSlot = toEl.getAttribute(SLOT_ATTR);
 	const fromSlot = fromEl.getAttribute(SLOT_ATTR);
 	if (toSlot !== null && fromSlot === toSlot) return;
 	if (toSlot !== null) {
-		fromEl.replaceWith(toEl);
+		replaceRendered(fromEl, toEl);
 		return;
 	}
+	adopt(fromEl, toEl);
 	if (fromEl.localName === "input") {
 		morphInput(fromEl, toEl);
 		return;
@@ -687,10 +890,18 @@ const morphElementPair = (fromEl, toEl, api) => {
 		morphSelect(fromEl, toEl, api);
 		return;
 	}
+	const keepChildren = hasPreserveToken(fromEl, "children") || hasPreserveToken(toEl, "children") || isUncontrolledEditable(fromEl, toEl);
 	syncAttributes(fromEl, toEl);
+	if (keepChildren) return;
 	if (fromEl.localName === "textarea") morphTextarea(fromEl, toEl);
 	else api.morphChildren(fromEl, toEl);
 };
+/** Keyed node the new render drops and no stand-in still needs. */
+const isStaleKeyed = (node, toKeys) => {
+	if (!(node instanceof Element) || claimed.has(node)) return false;
+	const key = morphKeyOf(node);
+	return key !== null && !toKeys.has(key);
+};
 const alignKeyedNode = (fromParent, fromNode, toNode, fromKeyed, toKeys) => {
 	const toKey = toNode.nodeType === 1 ? morphKeyOf(toNode) : null;
 	let current = fromNode;
@@ -698,9 +909,13 @@ const alignKeyedNode = (fromParent, fromNode, toNode, fromKeyed, toKeys) => {
 		const match = fromKeyed.get(toKey);
 		if (match) {
 			fromKeyed.delete(toKey);
+			while (current && current !== match && isStaleKeyed(current, toKeys)) {
+				const next = current.nextSibling;
+				current.remove();
+				current = next ?? void 0;
+			}
 			if (match !== current) {
-				current?.before(match);
-				if (!current) fromParent.append(match);
+				place(fromParent, match, current ?? null);
 				current = match;
 			}
 		}
@@ -708,12 +923,31 @@ const alignKeyedNode = (fromParent, fromNode, toNode, fromKeyed, toKeys) => {
 	if (current instanceof Element) {
 		const fromKey = morphKeyOf(current);
 		if (fromKey !== null && fromKey !== toKey && toKeys.has(fromKey)) {
-			current.before(toNode);
+			insertRendered(fromParent, toNode, current);
 			return "continue";
 		}
 	}
 	return current;
 };
+const morphChild = ({ api, fromParent, fromNode, toNode }) => {
+	if (standIns.has(toNode)) {
+		insertRendered(fromParent, toNode, fromNode ?? null);
+		return;
+	}
+	if (!fromNode || claimed.has(fromNode)) {
+		insertRendered(fromParent, toNode, fromNode ?? null);
+		return;
+	}
+	if (fromNode.nodeType !== toNode.nodeType) {
+		replaceRendered(fromNode, toNode);
+		return;
+	}
+	if (fromNode.nodeType === 3 || fromNode.nodeType === 8) {
+		if (fromNode.nodeValue !== toNode.nodeValue) fromNode.nodeValue = toNode.nodeValue;
+		return;
+	}
+	if (fromNode.nodeType === 1) morphElementPair(fromNode, toNode, api);
+};
 const api = { morphChildren: (fromParent, toParent) => {
 	const toNodes = [...toParent.childNodes];
 	const fromKeyed = buildKeyedIndex(fromParent);
@@ -727,19 +961,12 @@ const api = { morphChildren: (fromParent, toParent) => {
 			if (aligned === "continue") continue;
 			fromNode = aligned;
 		}
-		if (!fromNode) {
-			fromParent.append(toNode);
-			continue;
-		}
-		if (fromNode.nodeType !== toNode.nodeType) {
-			fromNode.replaceWith(toNode);
-			continue;
-		}
-		if (fromNode.nodeType === 3 || fromNode.nodeType === 8) {
-			if (fromNode.nodeValue !== toNode.nodeValue) fromNode.nodeValue = toNode.nodeValue;
-			continue;
-		}
-		if (fromNode.nodeType === 1) morphElementPair(fromNode, toNode, api);
+		morphChild({
+			api,
+			fromNode,
+			fromParent,
+			toNode
+		});
 	}
 	while (fromParent.childNodes.length > toNodes.length) fromParent.lastChild?.remove();
 } };
@@ -948,14 +1175,28 @@ const isSkippedPropKey = (k) => k === "children" || k === "key" || k === "ref" |
 * keyed reconciliation. Host differences live in `PaintOps`.
 */
 const createPainter = (ops) => {
+	let paintDepth = 0;
+	const pendingRefs = [];
+	const commit = (fn) => {
+		paintDepth += 1;
+		try {
+			fn();
+		} finally {
+			paintDepth -= 1;
+			if (paintDepth === 0) for (const run of pendingRefs.splice(0)) run();
+		}
+	};
 	const applyFormControl = (el, key, v, fiber) => {
-		const setProp = (x) => ops.setFormControl(el, key, x);
+		const setProp = (x) => ops.setFormControl(ops.committed(el), key, x);
 		if (isAtomHandle(v)) {
 			const memo = el;
 			if (memo.__ilhaVal === v) return;
 			memo.__ilhaVal = v;
 			const unsub = fiber.registry.subscribe(v.atom, setProp, { immediate: true });
-			fiber.holes.push({ dispose: unsub });
+			fiber.holes.push({ dispose: () => {
+				unsub();
+				if (memo.__ilhaVal === v) memo.__ilhaVal = void 0;
+			} });
 		} else setProp(v);
 	};
 	const trackHole = (parent, hole, extra, meta) => {
@@ -1001,7 +1242,9 @@ const createPainter = (ops) => {
 		const { ref } = props;
 		if (isFunction(ref)) {
 			const refFn = ref;
-			refFn(ops.asElement(el));
+			const attach = () => refFn(ops.asElement(ops.committed(el)));
+			if (paintDepth > 0) pendingRefs.push(attach);
+			else attach();
 			fiber.holes.push({ dispose: () => refFn(null) });
 		}
 	};
@@ -1030,7 +1273,7 @@ const createPainter = (ops) => {
 				nodes: [host]
 			};
 		},
-		paintHole: (fiber, view) => {
+		paintHole: (fiber, view) => commit(() => {
 			if (view === KEEP) return;
 			let frame = fiber.islandFrame;
 			if (!frame) {
@@ -1051,7 +1294,7 @@ const createPainter = (ops) => {
 			}
 			cframe.i = 0;
 			const list = Array.isArray(view) ? view : null;
-			if (list && list.length > 0 && list.every((v) => isVNode(v) && v.key !== null && v.key !== void 0)) {
+			if (list && list.length > 0 && list.every((v) => isVNode(v) && isFunction(v.type) && v.key !== null && v.key !== void 0)) {
 				paintFns.keyedPaintHole(fiber, list);
 				sweepComponentSlots(fiber);
 				sweepIslandSlots(fiber);
@@ -1080,11 +1323,11 @@ const createPainter = (ops) => {
 			}
 			sweepComponentSlots(fiber);
 			sweepIslandSlots(fiber);
-		}
+		})
 	};
 	const materializeAtom = (view, fiber) => {
 		const reused = findReusableAtomHost(fiber, view.atom);
-		if (reused) return [ops.createSlotHost(reused.host.getAttribute(SLOT_ATTR))];
+		if (reused) return [ops.reuseNode(reused.host)];
 		const { fiber: hole, nodes } = api.openHole(fiber);
 		const [host] = nodes;
 		if (!host) return nodes;
@@ -1133,7 +1376,7 @@ const createPainter = (ops) => {
 		const existing = frame.slots[i];
 		if (existing && existing.type === type && existing.host.isConnected && isFunction(existing.updateProps)) {
 			existing.updateProps(props);
-			return [ops.asNode(existing.host)];
+			return [ops.reuseNode(existing.host)];
 		}
 		if (existing) {
 			const idx = fiber.holes.findIndex((h) => h.islandSlot === existing);
@@ -1185,7 +1428,7 @@ const createPainter = (ops) => {
 			if (existing.type === type && !hole.closed) {
 				hole.propsBox = { current: props };
 				runSetup(hole, () => run(props));
-				return [ops.asNode(hole.root)];
+				return [ops.reuseNode(hole.root)];
 			}
 			if (!hole.closed) {
 				const idx = fiber.holes.findIndex((h) => h.holeFiber === hole);
@@ -1226,7 +1469,7 @@ const createPainter = (ops) => {
 			if (reuse.propsBox) reuse.propsBox.current = props;
 			const next = withFiber(fiber, () => run(reuse.propsBox?.current ?? props));
 			if (next && !isThenable(next) && !isSetupFn(next)) reuse.paint(next);
-			return [ops.asNode(reuse.root)];
+			return [ops.reuseNode(reuse.root)];
 		}
 		if (!k) return materializeUnkeyedComponent(run, type, props, fiber);
 		const { fiber: khole, nodes: knodes } = api.openHole(fiber);
@@ -1302,11 +1545,11 @@ const createPainter = (ops) => {
 			nodes.push(...made);
 		}
 		fiber.keyedHoles = next;
-		ops.clearRoot(fiber.root);
-		api.insert(fiber, nodes);
+		ops.placeChildren(fiber.root, nodes);
 	};
 	return {
 		applyProps: api.applyProps,
+		commit,
 		disposeHoles: (fiber, opts) => disposeHoles(fiber, opts),
 		insert: api.insert,
 		materialize: api.materialize,
@@ -1318,7 +1561,7 @@ const createPainter = (ops) => {
 //#region src/paint.ts
 const noopDisconnect = () => {};
 const core$1 = createPainter({
-	appendRoot: (root, node) => root.append(node),
+	appendRoot: (root, node) => insertRendered(root, node, null),
 	asElement: (el) => el,
 	asNode: (host) => host,
 	asRoot: (el) => el,
@@ -1326,6 +1569,7 @@ const core$1 = createPainter({
 	clearRoot: (root) => {
 		if (root instanceof Element) root.replaceChildren();
 	},
+	committed: committedElement,
 	createElement: (tag, ns) => ns ? document.createElementNS(ns, tag) : document.createElement(tag),
 	createRaw: (html, parent) => {
 		const range = document.createRange();
@@ -1340,6 +1584,10 @@ const core$1 = createPainter({
 	},
 	createText: (text) => document.createTextNode(text),
 	disconnect: noopDisconnect,
+	placeChildren: (root, nodes) => {
+		if (root instanceof Element) placeChildren(root, nodes);
+	},
+	reuseNode: (host) => host instanceof Element && host.isConnected ? standInFor(host) : host,
 	setFormControl: (el, key, v) => {
 		const node = el;
 		if (key === "value") {
@@ -1398,7 +1646,7 @@ const paintHydrate = (fiber, view) => {
 		root: el
 	};
 	el.replaceChildren();
-	for (const c of view.children) for (const n of core$1.materialize(c, childFiber)) el.append(n);
+	for (const c of view.children) for (const n of core$1.materialize(c, childFiber)) insertRendered(el, n, null);
 };
 const paintMorphLive = (fiber, view) => {
 	if (!fiber.liveEl) return;
@@ -1416,7 +1664,7 @@ const paintMorphLive = (fiber, view) => {
 	refreshAllAtomHosts(fiber);
 	pruneDisconnectedAtomHoles(fiber);
 };
-const paint$1 = (fiber, view) => {
+const paintRoot = (fiber, view) => {
 	fiber.islandFrame ??= {
 		i: 0,
 		slots: []
@@ -1447,6 +1695,11 @@ const paint$1 = (fiber, view) => {
 	const first = fiber.root instanceof Element ? fiber.root.firstElementChild : null;
 	if (first) fiber.liveEl = first;
 };
+const paint$1 = (fiber, view) => {
+	core$1.commit(() => {
+		paintRoot(fiber, view);
+	});
+};
 const paintError$1 = (fiber, e) => {
 	console.error(e);
 	paint$1(fiber, errorView(e));
@@ -1669,6 +1922,7 @@ const ssrOps = {
 	asRoot: (el) => ssrAs(el),
 	bindEvents: bindSsrEvents,
 	clearRoot: (root) => ssrAs(root).replaceChildren(),
+	committed: (el) => el,
 	createElement: createSsrElement,
 	createRaw: (html, _parent) => [createSsrRaw(html)],
 	createSlotHost: (slotId) => {
@@ -1681,6 +1935,12 @@ const ssrOps = {
 	disconnect: (el) => {
 		el.isConnected = false;
 	},
+	placeChildren: (root, nodes) => {
+		const host = ssrAs(root);
+		host.replaceChildren();
+		for (const n of nodes) host.append(n);
+	},
+	reuseNode: (host) => ssrAs(host),
 	setFormControl: (el, key, v) => {
 		if (key === "value") el.setAttribute("value", String(v ?? ""));
 		else if (v) el.setAttribute(key, "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.14.8",
+  "version": "0.14.10",
   "description": "Generator-first island UI on Effect",
   "keywords": [
     "effect",
@@ -64,10 +64,10 @@
     "typecheck": "tsc -p tsconfig.types.json --noEmit"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.2",
-    "effect": "^4.0.0-rc.118"
+    "@happy-dom/global-registrator": "^20.14.5",
+    "effect": "^4.0.0"
   },
   "peerDependencies": {
-    "effect": "^4.0.0-rc.118"
+    "effect": "^4.0.0"
   }
 }