ilha 0.14.0 → 0.14.1

package/README.md

@@ -48,43 +48,48 @@ count.set(1); // replace
 count.update((n) => n + 1); // patch
 ```
 
-In JSX, `{count}` subscribes the render. A function initializer is a **computed** atom:
+In JSX, `{count}` subscribes the render. Derived values use Effect's `Atom.map` or `Atom.transform`:
 
 ```tsx
+import * as Atom from "effect/unstable/reactivity/Atom";
+import { atom } from "ilha";
+
 const items = atom([{ n: 1 }, { n: 2 }]);
-const total = atom(() => items().reduce((sum, item) => sum + item.n, 0));
+const total = atom(Atom.map(items.atom, (list) => list.reduce((sum, item) => sum + item.n, 0)));
 ```
 
+Wrap multiple writes in `batch()`. Derived and mutation atoms use Effect's `Atom.map`, `Atom.transform`, and `Atom.fn` — pass `handle.atom`, then wrap in `atom()`. Use `watch(source, fn)` for side effects on atom changes.
+
+Use `atom.lazy(() => …)` for one-time initialization or to store a function value.
+
 Atoms hold data. Do not store JSX in an atom.
 
 ---
 
-## Streams, when, watch, wait
+## Streams and when
 
-Use a generator when you `yield*` instructions.
+Paint [Effect `Stream`](https://www.effect.website/docs/v4/api/effect/Stream) values. Yield a stream of views from a generator, or return one from an async component:
 
 ```tsx
 import * as Stream from "effect/Stream";
 import * as Atom from "effect/unstable/reactivity/Atom";
-import { atom, when } from "ilha";
+import { atom } from "ilha";
 
-const Search = function* () {
-  const q = atom("");
-  yield (
-    <input value={q} oninput={(e: Event) => q.set((e.currentTarget as HTMLInputElement).value)} />
-  );
-  yield* when(Atom.toStream(q.atom).pipe(Stream.debounce("200 millis")), function* (query) {
-    if (!query) return;
-    yield <p>{query}</p>;
-  });
-};
+function* List() {
+  const items = atom(["a", "b"]);
+  yield Stream.map(Atom.toStream(items.atom), (list) => (
+    <ul>
+      {list.map((item) => (
+        <li key={item}>{item}</li>
+      ))}
+    </ul>
+  ));
+}
 ```
 
-- `when(stream, body)` — render `body` for each value (SSR takes the first).
-- `watch(source, fn)` — side effect on an atom or Stream.
-- `wait(body)` — paint until `done(value)`, then continue the generator.
+SSR takes the first emission (`take(1)`); the client keeps listening after `mount`.
 
-Map a Stream of arrays to JSX for lists (`Stream.map`, `Atom.toStream`).
+Ilha also ships `when` for per-emission generator bodies (stale work interrupted). Side effects and pauses use Effect directly — see the [Streams guide](https://ilha.build/guide/ui/streams).
 
 ---
 

package/dist/define.d.ts

@@ -1,4 +1,4 @@
-import { n as Component } from "./types-DU46exHq.js";
+import { n as Component } from "./types-Cie0Ihl6.js";
 //#region src/define.d.ts
 declare function define(name: string, component: Component): void;
 //#endregion

package/dist/define.js

@@ -1,4 +1,4 @@
-import { t as mount } from "./mount-Dcy4teaf.js";
+import { t as mount } from "./mount-CzFZBgZG.js";
 
 //#region src/define.ts
 function define(name, component) {

package/dist/index.d.ts

@@ -1,23 +1,25 @@
-import { a as Instruction, c as Yielded, i as Fragment, n as Component, r as Done, s as View, t as AtomHandle } from "./types-DU46exHq.js";
-import { t as h } from "./vnode-BZLcG8lC.js";
+import { i as Instruction, n as Component, o as View, r as Fragment, s as Yielded, t as AtomHandle } from "./types-Cie0Ihl6.js";
+import { t as h } from "./vnode-DyFwtMVw.js";
 import * as Effect from "effect/Effect";
 import * as Stream from "effect/Stream";
 import * as Atom from "effect/unstable/reactivity/Atom";
 import "effect/Scope";
 import { AtomRegistry } from "effect/unstable/reactivity/AtomRegistry";
+//#region src/watch.d.ts
+/** Run `fn` when `source` changes — and once on mount. Sync, async, and generator components. */
+declare function watch<A>(source: AtomHandle<A> | Atom.Atom<A> | Stream.Stream<A, any, any>, fn: (value: A) => void): Instruction<void>;
+//#endregion
 //#region src/atom.d.ts
-declare function atom<A>(init: () => A): AtomHandle<A>;
-declare function atom<A>(init: A | Atom.Atom<A> | Effect.Effect<A, any, any> | Stream.Stream<A, any, any>): AtomHandle<A>;
+interface AtomFn {
+  <A>(init: A | Atom.Atom<A> | Effect.Effect<A, any, any> | Stream.Stream<A, any, any>): AtomHandle<A>;
+  lazy<A>(init: () => A): AtomHandle<A>;
+}
+declare const atom: AtomFn;
+declare const batch: (f: () => void) => void;
 //#endregion
 //#region src/when.d.ts
 declare function when<A, E = never, R = never>(stream: Stream.Stream<A, E, R>, body: (value: A) => Generator<Yielded, View | void, unknown>): Instruction<void, E>;
 //#endregion
-//#region src/watch.d.ts
-declare function watch<A>(source: AtomHandle<A> | Atom.Atom<A> | Stream.Stream<A, any, any>, fn: (value: A) => void): Instruction<void>;
-//#endregion
-//#region src/wait.d.ts
-declare function wait<A>(body: (done: Done<A>) => Generator<Yielded, View | void, unknown>): Instruction<A>;
-//#endregion
 //#region src/mount.d.ts
 type RenderToStringOptions = {
   snapshot?: boolean;
@@ -32,4 +34,4 @@ type MountOptions = {
 declare function mount(el: Element, fn: Component, opts?: MountOptions): () => void;
 declare function renderToString(fn: Component, opts?: RenderToStringOptions): Promise<string>;
 //#endregion
-export { type AtomHandle, type Component, type Done, Fragment, type MountOptions, type RenderToStringOptions, type View, atom, h, mount, renderToString, wait, watch, when };
+export { type AtomHandle, type Component, Fragment, type MountOptions, type RenderToStringOptions, type View, atom, batch, h, mount, renderToString, watch, when };

package/dist/index.js

@@ -1,10 +1,69 @@
-import { a as atom, c as isAtomHandle, d as makeFiber, i as interpret, l as closeFiber, n as renderToString, o as handleOwner, r as paint, s as instr, t as mount, u as getFiber } from "./mount-Dcy4teaf.js";
+import { a as atom, c as instr, d as getFiber, f as makeFiber, i as interpret, l as isAtomHandle, n as renderToString, o as batch, r as paint, s as handleOwner, t as mount, u as closeFiber } from "./mount-CzFZBgZG.js";
 import { i as Fragment, t as h } from "./vnode-DHN2EFHi.js";
 import * as Effect from "effect/Effect";
 import * as Stream from "effect/Stream";
+import * as Exit from "effect/Exit";
+import * as Fiber from "effect/Fiber";
 import * as Scope from "effect/Scope";
-import * as Deferred from "effect/Deferred";
+import * as Registry from "effect/unstable/reactivity/AtomRegistry";
 
+//#region src/watch.ts
+function runStreamWatch(fiber, effect) {
+	const scope = Scope.forkUnsafe(fiber.scope);
+	const provided = effect.pipe(Effect.provideService(Registry.AtomRegistry, fiber.registry));
+	const fork = Effect.runFork(provided);
+	Effect.runSync(Scope.addFinalizer(scope, Fiber.interrupt(fork)));
+	return () => {
+		Effect.runFork(Scope.close(scope, Exit.void));
+	};
+}
+function useWatchSlot(fiber, key, mount, fn) {
+	const i = fiber.watchI ?? 0;
+	fiber.watchI = i + 1;
+	fiber.watchSlots ??= [];
+	const existing = fiber.watchSlots[i];
+	if (existing) {
+		if (existing.key !== key) {
+			existing.dispose();
+			fiber.watchSlots[i] = void 0;
+		} else {
+			existing.fnRef.current = fn;
+			return;
+		}
+	}
+	const fnRef = { current: fn };
+	const unsub = mount((value) => fnRef.current(value));
+	const dispose = () => unsub();
+	fiber.watchSlots[i] = {
+		key,
+		fnRef,
+		dispose
+	};
+}
+function registerWatch(fiber, source, fn) {
+	if (Stream.isStream(source)) {
+		useWatchSlot(fiber, source, (run) => {
+			let active = true;
+			const stop = runStreamWatch(fiber, Stream.runForEach(source, (v) => Effect.sync(() => {
+				if (active) run(v);
+			})));
+			return () => {
+				active = false;
+				stop();
+			};
+		}, fn);
+		return;
+	}
+	const atom = isAtomHandle(source) ? source.atom : source;
+	useWatchSlot(fiber, atom, (run) => fiber.registry.subscribe(atom, run, { immediate: true }), fn);
+}
+/** Run `fn` when `source` changes — and once on mount. Sync, async, and generator components. */
+function watch(source, fn) {
+	registerWatch((isAtomHandle(source) ? handleOwner.get(source) : void 0) ?? getFiber(), source, fn);
+	return instr(Effect.void);
+}
+
+//#endregion
 //#region src/when.ts
 function when(stream, body) {
 	return instr(Effect.gen(function* () {
@@ -25,41 +84,4 @@ function when(stream, body) {
 }
 
 //#endregion
-//#region src/watch.ts
-function watch(source, fn) {
-	return instr(Effect.sync(() => {
-		const fiber = (isAtomHandle(source) ? handleOwner.get(source) : void 0) ?? getFiber();
-		if (Stream.isStream(source)) {
-			fiber.run(Stream.runForEach(source, (v) => Effect.sync(() => fn(v))));
-			return;
-		}
-		const a = isAtomHandle(source) ? source.atom : source;
-		const unsub = fiber.registry.subscribe(a, fn, { immediate: true });
-		Effect.runSync(Scope.addFinalizer(fiber.scope, Effect.sync(unsub)));
-	}));
-}
-
-//#endregion
-//#region src/wait.ts
-function wait(body) {
-	return instr(Effect.gen(function* () {
-		const parent = getFiber();
-		const deferred = yield* Deferred.make();
-		let settled = false;
-		const done = (value) => {
-			if (settled) return;
-			settled = true;
-			Effect.runSync(Deferred.succeed(deferred, value));
-		};
-		const child = makeFiber(parent.runtime, parent.root, paint, { onFail: parent.fail });
-		interpret((() => body(done)), child);
-		try {
-			return yield* Deferred.await(deferred);
-		} finally {
-			closeFiber(child);
-		}
-	}));
-}
-
-//#endregion
-export { Fragment, atom, h, mount, renderToString, wait, watch, when };
+export { Fragment, atom, batch, h, mount, renderToString, watch, when };

package/dist/jsx-dev-runtime.d.ts

@@ -1,4 +1,4 @@
-import { i as Fragment } from "./types-DU46exHq.js";
-import { n as JSX } from "./vnode-BZLcG8lC.js";
+import { r as Fragment } from "./types-Cie0Ihl6.js";
+import { n as JSX } from "./vnode-DyFwtMVw.js";
 import { jsx, jsxDEV, jsxs } from "./jsx-runtime.js";
 export { Fragment, type JSX, jsx, jsxDEV, jsxs };

package/dist/jsx-runtime.d.ts

@@ -1,5 +1,5 @@
-import { i as Fragment, s as View } from "./types-DU46exHq.js";
-import { n as JSX, t as h } from "./vnode-BZLcG8lC.js";
+import { o as View, r as Fragment } from "./types-Cie0Ihl6.js";
+import { n as JSX, t as h } from "./vnode-DyFwtMVw.js";
 //#region src/jsx-runtime.d.ts
 declare const jsx: (type: string | typeof Fragment | ((p: Record<string, unknown>) => unknown), props: Record<string, unknown> | null, key?: string | number) => ReturnType<typeof h>;
 declare const jsxs: (type: string | typeof Fragment | ((p: Record<string, unknown>) => unknown), props: Record<string, unknown> | null, key?: string | number) => ReturnType<typeof h>;

package/dist/{mount-Dcy4teaf.js → mount-CzFZBgZG.js}

@@ -40,6 +40,12 @@ const runInScope = (effect, registry, scope, onOk, onErr, onDone) => {
 function closeFiber(fiber) {
 	if (fiber.closed) return;
 	fiber.closed = true;
+	fiber.trackRestore?.();
+	fiber.trackRestore = void 0;
+	fiber.renderSub?.();
+	fiber.renderSub = void 0;
+	for (const slot of fiber.watchSlots ?? []) slot?.dispose();
+	fiber.watchSlots = [];
 	for (const h of fiber.holes) h.dispose();
 	fiber.holes = [];
 	Effect.runFork(Scope.close(fiber.scope, Exit.void));
@@ -150,11 +156,108 @@ function isAtomHandle(x) {
 	return typeof x === "function" && x.$$atom === 1;
 }
 let trackGet;
+const trackStack = [];
+function beginPrimitiveFrame(fiber) {
+	const used = fiber.primitiveI ?? 0;
+	const slots = fiber.primitives?.length ?? 0;
+	if (used > 0 && used !== slots) console.warn(`ilha: atom/watch slot count changed between renders (${slots} → ${used}); keep primitive order stable`);
+	fiber.primitiveI = 0;
+	fiber.watchI = 0;
+}
+function readTracked(atom, registry) {
+	const frame = trackStack.at(-1);
+	const active = getActiveFiber();
+	if (trackGet && frame && active === frame.fiber) return trackGet(atom);
+	return registry.get(atom);
+}
+function usePrimitiveSlot(fiber, make) {
+	const i = fiber.primitiveI ?? 0;
+	fiber.primitiveI = i + 1;
+	fiber.primitives ??= [];
+	const existing = fiber.primitives[i];
+	if (existing) return {
+		atom: existing,
+		fresh: false
+	};
+	const a = make();
+	fiber.primitives[i] = a;
+	return {
+		atom: a,
+		fresh: true
+	};
+}
+function withTrackGetRun(fiber, fn, onOk, onErr) {
+	const deps = /* @__PURE__ */ new Set();
+	const get = (a) => {
+		deps.add(a);
+		return fiber.registry.get(a);
+	};
+	const restore = () => {
+		if (fiber.trackRestore !== restore) return;
+		const top = trackStack.pop();
+		if (top?.get !== get) {
+			if (top) trackStack.push(top);
+			const i = trackStack.findIndex((frame) => frame.get === get);
+			if (i >= 0) trackStack.splice(i, 1);
+		}
+		trackGet = trackStack.at(-1)?.get;
+		fiber.trackRestore = void 0;
+	};
+	trackStack.push({
+		fiber,
+		deps,
+		get
+	});
+	trackGet = get;
+	fiber.trackRestore = restore;
+	try {
+		const result = withFiber(fiber, () => fn());
+		if (result instanceof Promise) {
+			restore();
+			result.then((value) => {
+				if (fiber.closed) return;
+				onOk({
+					value,
+					deps
+				});
+			}).catch((e) => {
+				if (fiber.closed) return;
+				onErr(e);
+			});
+			return;
+		}
+		restore();
+		onOk({
+			value: result,
+			deps
+		});
+	} catch (e) {
+		restore();
+		onErr(e);
+	}
+}
+function subscribeRenderDeps(fiber, deps, run) {
+	if (deps.size === 0) return () => {};
+	let scheduled = false;
+	const schedule = () => {
+		if (scheduled) return;
+		scheduled = true;
+		fiber.runtime.later(() => {
+			scheduled = false;
+			run();
+		});
+	};
+	const unsubs = [];
+	for (const dep of deps) unsubs.push(fiber.registry.subscribe(dep, schedule));
+	return () => {
+		for (const unsub of unsubs) unsub();
+	};
+}
 function wrapHandle(atom, fiber) {
 	const registry = fiber.registry;
 	const read = (() => {
 		guardHandleFiber(read);
-		return trackGet ? trackGet(atom) : registry.get(atom);
+		return readTracked(atom, registry);
 	});
 	handleOwner.set(read, fiber);
 	Object.defineProperties(read, {
@@ -171,34 +274,40 @@ function wrapHandle(atom, fiber) {
 	});
 	return read;
 }
-function atom(init) {
+function makeAtom(init) {
 	const fiber = getFiber();
-	const computed = typeof init === "function" && !Atom.isAtom(init) && !Effect.isEffect(init) && !Stream.isStream(init);
-	let seed = init;
 	const snap = fiber.runtime.hydrateValues;
-	if (snap && !Atom.isAtom(init) && !Effect.isEffect(init) && !Stream.isStream(init)) {
-		const v = snap[fiber.runtime.hydrateI++];
-		if (!computed && v !== void 0) seed = v;
-	}
-	let a;
-	if (Atom.isAtom(seed)) a = seed;
-	else if (Effect.isEffect(seed) || Stream.isStream(seed)) a = Atom.make(seed);
-	else if (computed) {
-		const fn = init;
-		a = Atom.make((get) => {
-			const prev = trackGet;
-			trackGet = (other) => get(other);
-			try {
-				return fn();
-			} finally {
-				trackGet = prev;
-			}
-		});
-	} else a = Atom.make(seed);
+	const { atom: a, fresh } = usePrimitiveSlot(fiber, () => {
+		let seed = init;
+		if (snap && !Atom.isAtom(init) && !Effect.isEffect(init) && !Stream.isStream(init)) {
+			const v = snap[fiber.runtime.hydrateI++];
+			if (v !== void 0) seed = v;
+		}
+		if (Atom.isAtom(seed)) return seed;
+		if (Effect.isEffect(seed) || Stream.isStream(seed)) return Atom.make(seed);
+		return Atom.make(seed);
+	});
+	const handle = wrapHandle(a, fiber);
+	if (fresh && fiber.runtime.ssr) fiber.runtime.ssrValues.push(fiber.registry.get(a));
+	return handle;
+}
+function atomLazy(init) {
+	const fiber = getFiber();
+	const snap = fiber.runtime.hydrateValues;
+	const { atom: a, fresh } = usePrimitiveSlot(fiber, () => {
+		let seed = init();
+		if (snap) {
+			const v = snap[fiber.runtime.hydrateI++];
+			if (v !== void 0) seed = v;
+		}
+		return Atom.make(seed);
+	});
 	const handle = wrapHandle(a, fiber);
-	if (fiber.runtime.ssr) fiber.runtime.ssrValues.push(fiber.registry.get(a));
+	if (fresh && fiber.runtime.ssr) fiber.runtime.ssrValues.push(fiber.registry.get(a));
 	return handle;
 }
+const atom = Object.assign(makeAtom, { lazy: atomLazy });
+const batch = Atom.batch;
 
 //#endregion
 //#region src/errors.ts
@@ -396,17 +505,17 @@ function morphChildren(fromParent, toParent) {
 			if (fromNode instanceof Element) {
 				const fromKey = morphKeyOf(fromNode);
 				if (fromKey !== null && fromKey !== toKey && toKeys.has(fromKey)) {
-					fromParent.insertBefore(toNode.cloneNode(true), fromNode);
+					fromParent.insertBefore(toNode, fromNode);
 					continue;
 				}
 			}
 		}
 		if (!fromNode) {
-			fromParent.appendChild(toNode.cloneNode(true));
+			fromParent.appendChild(toNode);
 			continue;
 		}
 		if (fromNode.nodeType !== toNode.nodeType) {
-			fromParent.replaceChild(toNode.cloneNode(true), fromNode);
+			fromParent.replaceChild(toNode, fromNode);
 			continue;
 		}
 		if (fromNode.nodeType === 3 || fromNode.nodeType === 8) {
@@ -417,7 +526,7 @@ function morphChildren(fromParent, toParent) {
 			const fromEl = fromNode;
 			const toEl = toNode;
 			if (fromEl.localName !== toEl.localName) {
-				fromParent.replaceChild(toEl.cloneNode(true), fromEl);
+				fromParent.replaceChild(toEl, fromEl);
 				continue;
 			}
 			const slotId = toEl.getAttribute(SLOT_ATTR);
@@ -552,19 +661,39 @@ function finish(fiber, view) {
 	fiber.park();
 }
 function runSetup(fiber, fn) {
-	try {
-		const out = withFiber(fiber, () => fn());
-		if (isGen(out)) interpret((() => out), fiber);
-		else {
-			fiber.runtime.begin();
-			Promise.resolve(out).then((view) => {
-				withFiber(fiber, () => finish(fiber, view));
-				fiber.runtime.end();
-			}, (e) => {
+	const disposeRenderSub = () => {
+		fiber.renderSub?.();
+		fiber.renderSub = void 0;
+	};
+	const commit = (out, deps) => {
+		if (isGen(out)) {
+			disposeRenderSub();
+			interpret((() => out), fiber);
+			return;
+		}
+		disposeRenderSub();
+		if (!fiber.runtime.ssr) fiber.renderSub = subscribeRenderDeps(fiber, deps, render);
+		withFiber(fiber, () => finish(fiber, out));
+	};
+	const render = () => {
+		if (fiber.closed) return;
+		fiber.runtime.begin();
+		beginPrimitiveFrame(fiber);
+		withTrackGetRun(fiber, () => fn(), ({ value: out, deps }) => {
+			try {
+				commit(out, deps);
+			} catch (e) {
 				withFiber(fiber, () => fiber.fail(asFailure(e)));
+			} finally {
 				fiber.runtime.end();
-			});
-		}
+			}
+		}, (e) => {
+			withFiber(fiber, () => fiber.fail(asFailure(e)));
+			fiber.runtime.end();
+		});
+	};
+	try {
+		render();
 	} catch (e) {
 		fiber.fail(asFailure(e));
 	}
@@ -578,9 +707,16 @@ const ISLAND_SLOT_TAG = Symbol.for("ilha.islandSlotTag");
 function insert(fiber, nodes) {
 	for (const n of nodes) fiber.root.appendChild(n);
 }
-function disposeHoles(fiber) {
-	for (const h of fiber.holes) h.dispose();
-	fiber.holes = [];
+function disposeHoles(fiber, opts) {
+	const keep = [];
+	for (const h of fiber.holes) {
+		if (opts?.morph && h.keepOnMorph) {
+			keep.push(h);
+			continue;
+		}
+		h.dispose();
+	}
+	fiber.holes = keep;
 }
 function skip(x) {
 	return x === null || x === void 0 || typeof x === "boolean";
@@ -711,17 +847,56 @@ function errorView(e) {
 		children: [failureMessage(e)]
 	};
 }
-function trackHole(parent, hole, extra) {
-	parent.holes.push({ dispose() {
-		extra?.();
-		closeFiber(hole);
-	} });
+function findReusableAtomHost(fiber, atom) {
+	for (const h of fiber.holes) if (h.atom === atom && h.host?.isConnected && h.holeFiber && !h.holeFiber.closed) return {
+		host: h.host,
+		hole: h.holeFiber
+	};
+}
+function refreshAtomHost(fiber, atom, host, hole) {
+	if (hole.closed || !host.isConnected) return;
+	const next = unwrap(fiber.registry.get(atom), void 0);
+	if (next === KEEP) return;
+	paintHole(hole, next);
+}
+function refreshAllAtomHosts(fiber) {
+	for (const h of fiber.holes) if (h.atom && h.host && h.holeFiber) refreshAtomHost(fiber, h.atom, h.host, h.holeFiber);
+}
+function pruneDisconnectedAtomHoles(fiber) {
+	fiber.holes = fiber.holes.filter((h) => {
+		if (!h.atom || !h.host || !h.holeFiber) return true;
+		if (h.host.isConnected) return true;
+		h.dispose();
+		return false;
+	});
+}
+function atomHostPlaceholder(host) {
+	const placeholder = document.createElement("span");
+	const slot = host.getAttribute(SLOT_ATTR);
+	if (slot !== null) placeholder.setAttribute(SLOT_ATTR, slot);
+	placeholder.style.display = "contents";
+	return placeholder;
+}
+function trackHole(parent, hole, extra, meta) {
+	parent.holes.push({
+		keepOnMorph: !!(meta?.atom && meta?.host) || !!meta?.keyed,
+		atom: meta?.atom,
+		host: meta?.host,
+		holeFiber: hole,
+		dispose() {
+			extra?.();
+			closeFiber(hole);
+		}
+	});
 }
 function materialize(view, fiber) {
 	if (skip(view)) return [];
 	if (typeof view === "string" || typeof view === "number" || typeof view === "bigint") return [document.createTextNode(String(view))];
 	if (isAtomHandle(view)) {
+		const reused = findReusableAtomHost(fiber, view.atom);
+		if (reused) return [atomHostPlaceholder(reused.host)];
 		const { fiber: hole, nodes } = openHole(fiber);
+		const host = nodes[0];
 		let unsub = () => {};
 		fiber.runtime.later(() => {
 			if (hole.closed) return;
@@ -734,7 +909,10 @@ function materialize(view, fiber) {
 				paintHole(hole, next);
 			}, { immediate: true });
 		});
-		trackHole(fiber, hole, () => unsub());
+		trackHole(fiber, hole, () => unsub(), {
+			atom: view.atom,
+			host
+		});
 		return nodes;
 	}
 	if (Stream.isStream(view)) {
@@ -792,7 +970,7 @@ function materialize(view, fiber) {
 			fiber.runtime.later(() => {
 				if (!hole.closed) runSetup(hole, () => type(hole.propsBox.current));
 			});
-			trackHole(fiber, hole);
+			trackHole(fiber, hole, void 0, k ? { keyed: true } : void 0);
 			return nodes;
 		}
 		const el = document.createElement(view.type);
@@ -838,10 +1016,13 @@ function paint(fiber, view) {
 		}
 	}
 	if (fiber.liveEl && isVNode(view) && typeof view.type === "string" && fiber.liveEl.localName === view.type) {
+		disposeHoles(fiber, { morph: true });
 		applyProps(fiber.liveEl, view.props, fiber);
 		const tmp = document.createElement(fiber.liveEl.localName);
 		for (const c of view.children) for (const n of materialize(c, fiber)) tmp.appendChild(n);
 		morphInner(fiber.liveEl, tmp);
+		refreshAllAtomHosts(fiber);
+		pruneDisconnectedAtomHoles(fiber);
 		return;
 	}
 	disposeHoles(fiber);
@@ -989,4 +1170,4 @@ async function renderToString(fn, opts) {
 }
 
 //#endregion
-export { atom as a, isAtomHandle as c, makeFiber as d, interpret as i, closeFiber as l, renderToString as n, handleOwner as o, paint as r, instr as s, mount as t, getFiber as u };
+export { atom as a, instr as c, getFiber as d, makeFiber as f, interpret as i, isAtomHandle as l, renderToString as n, batch as o, paint as r, handleOwner as s, mount as t, closeFiber as u };

package/dist/{types-DU46exHq.d.ts → types-Cie0Ihl6.d.ts}

@@ -28,6 +28,5 @@ interface AtomHandle<A> {
   set(next: A): void;
   update(f: (current: A) => A): void;
 }
-type Done<A> = (value: A) => void;
 //#endregion
-export { Instruction as a, Yielded as c, Fragment as i, Component as n, VNode as o, Done as r, View as s, AtomHandle as t };
+export { VNode as a, Instruction as i, Component as n, View as o, Fragment as r, Yielded as s, AtomHandle as t };

package/dist/{vnode-BZLcG8lC.d.ts → vnode-DyFwtMVw.d.ts}

@@ -1,4 +1,4 @@
-import { i as Fragment, o as VNode, s as View } from "./types-DU46exHq.js";
+import { a as VNode, o as View, r as Fragment } from "./types-Cie0Ihl6.js";
 //#region src/jsx-types.d.ts
 declare namespace JSX {
   type Element = View;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ilha",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Generator-first island UI on Effect",
   "keywords": [
     "effect",