ilha 0.14.7 → 0.14.9

package/dist/define.js

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

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-rXNnaIWf.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;
-		watch.once(() => {
-			let live = liveRefetchers.get(key);
-			if (!live) {
-				live = /* @__PURE__ */ new Set();
-				liveRefetchers.set(key, live);
-			}
-			const onInvalidate = () => {
-				settleStart();
-			};
-			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,
@@ -488,22 +494,22 @@ const connect = ({ cell: c, decode, event, retryBase, url }) => {
 		for (const sink of c.sinks.values()) sink.latest.set(value);
 		for (const push of c.targets) push(value);
 	};
+	const onMessage = (ev) => {
+		const raw = ev.data;
+		if (!isString(raw)) return;
+		let value;
+		try {
+			value = decode(raw);
+		} catch {
+			return;
+		}
+		emit(value);
+	};
 	const open = () => {
 		if (disposed) return;
 		setStatus(c, attempt === 0 ? "connecting" : "retrying");
 		const es = new EventSource(url);
 		source = es;
-		const onMessage = (ev) => {
-			const raw = ev.data;
-			if (!isString(raw)) return;
-			let value;
-			try {
-				value = decode(raw);
-			} catch {
-				return;
-			}
-			emit(value);
-		};
 		const onOpen = () => {
 			attempt = 0;
 			setStatus(c, "open");

package/dist/{mount-rXNnaIWf.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();
 } };
@@ -897,6 +1124,21 @@ const sweepComponentSlots = (fiber) => {
 	}
 	slots.length = cframe.i;
 };
+const sweepIslandSlots = (fiber) => {
+	const frame = fiber.islandFrame;
+	if (!frame) return;
+	const active = new Set(frame.slots.slice(0, frame.i));
+	const keep = [];
+	for (const h of fiber.holes) {
+		if (h.islandSlot && !active.has(h.islandSlot)) {
+			h.dispose();
+			continue;
+		}
+		keep.push(h);
+	}
+	fiber.holes = keep;
+	frame.slots.length = Math.min(frame.slots.length, frame.i);
+};
 const findReusableAtomHost = (fiber, atom) => {
 	for (const h of fiber.holes) if (h.atom === atom && h.host?.isConnected && h.holeFiber && !h.holeFiber.closed) return {
 		hole: h.holeFiber,
@@ -933,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) => {
@@ -986,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) });
 		}
 	};
@@ -1015,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) {
@@ -1036,15 +1294,18 @@ 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);
 				return;
 			}
 			const kept = /* @__PURE__ */ new Set();
 			for (const s of cframe.slots) if (s && !s.hole.closed) kept.add(s.hole);
+			const keptIslands = new Set(frame.slots);
 			const keep = [];
 			for (const h of fiber.holes) {
-				if (h.holeFiber && kept.has(h.holeFiber)) {
+				if (h.holeFiber && kept.has(h.holeFiber) || h.islandSlot && keptIslands.has(h.islandSlot)) {
 					keep.push(h);
 					continue;
 				}
@@ -1061,11 +1322,12 @@ const createPainter = (ops) => {
 				api.insert(fiber, fresh);
 			}
 			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;
@@ -1114,9 +1376,16 @@ 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);
+			if (idx === -1) existing.unmount?.();
+			else {
+				const [removed] = fiber.holes.splice(idx, 1);
+				removed?.dispose();
+			}
 		}
-		existing?.unmount?.();
 		const tag = isString(type[ISLAND_SLOT_TAG]) ? type[ISLAND_SLOT_TAG] : "div";
 		const el = ops.createElement(tag);
 		el.dataset.ilha = "";
@@ -1136,6 +1405,7 @@ const createPainter = (ops) => {
 					handle?.unmount?.();
 					if (frame.slots[i] === slot) frame.slots[i] = void 0;
 				},
+				islandSlot: slot,
 				keepOnMorph: true
 			});
 		}
@@ -1158,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);
@@ -1199,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);
@@ -1275,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,
@@ -1291,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,
@@ -1299,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();
@@ -1313,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") {
@@ -1371,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;
@@ -1389,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: []
@@ -1420,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));
@@ -1642,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) => {
@@ -1654,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.7",
+  "version": "0.14.9",
   "description": "Generator-first island UI on Effect",
   "keywords": [
     "effect",
@@ -64,7 +64,7 @@
     "typecheck": "tsc -p tsconfig.types.json --noEmit"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.2",
+    "@happy-dom/global-registrator": "^20.14.5",
     "effect": "^4.0.0-rc.118"
   },
   "peerDependencies": {