@torpor/view 0.4.18 → 1.0.1

package/dist/index.mjs

@@ -1,6 +1,5 @@
-import { t as devContext_default } from "./devContext-CQ8RhBX-.mjs";
-import { a as buildStyles, i as proxyHandledSymbol, n as $unwrap, o as buildClasses, r as proxyDataSymbol, t as formatText } from "./formatText-DTIRmc3X.mjs";
-
+import { t as devContext } from "./devContext-ZNsPyOgB.mjs";
+import { a as buildStyles, c as proxyDataSymbol, i as formatText, n as fromServer, o as buildClasses, r as fromElement, s as $unwrap, t as fromWebSocket } from "./fromWebSocket-Dxc_uwm1.mjs";
 //#region src/render/context.ts
 const CONTEXT_SYMBOL = Symbol.for("torp.Context");
 const context = globalThis[CONTEXT_SYMBOL] ??= {
@@ -10,55 +9,41 @@ const context = globalThis[CONTEXT_SYMBOL] ??= {
 	batch: 0,
 	batchOperation: 0,
 	registerComputed: null,
-	firstEffectToRun: null,
+	effectsToRun: [],
 	firstSignalToUpdate: null,
+	lastSignalToUpdate: null,
 	activeRegion: null,
 	previousRegion: null,
 	rootRegion: null,
+	awaitBoundary: null,
+	suspendPeek: false,
+	suspendPeekHit: false,
+	refreshSignals: null,
+	refreshInitialized: null,
 	mountEffects: [],
 	stashedEvents: [],
 	stashedAnimations: [],
 	hydrationNode: null
 };
-var context_default = context;
-
 //#endregion
 //#region src/render/addAnimation.ts
 function addAnimation(el, entry, exit) {
-	context_default.stashedAnimations.push({
-		region: context_default.activeRegion,
+	context.stashedAnimations.push({
+		region: context.activeRegion,
 		el,
 		in: entry,
 		out: exit
 	});
 }
-
 //#endregion
 //#region src/render/addEvent.ts
 function addEvent(el, type, listener) {
-	if (listener !== void 0 && listener !== null) context_default.stashedEvents.push({
-		region: context_default.activeRegion,
+	if (listener !== void 0 && listener !== null) context.stashedEvents.push({
 		el,
 		type,
 		listener
 	});
 }
-
-//#endregion
-//#region src/types/constants.ts
-/**
-* The type of a Signal object.
-*/
-const SIGNAL_TYPE = 0;
-/**
-* The type of a Computed object.
-*/
-const COMPUTED_TYPE = 1;
-/**
-* The type of an Effect object.
-*/
-const EFFECT_TYPE = 2;
-
 //#endregion
 //#region src/watch/clearSources.ts
 /**
@@ -77,7 +62,6 @@ function clearSources(target) {
 		previousSub = clearSub;
 	}
 }
-
 //#endregion
 //#region src/watch/deactivateSources.ts
 /**
@@ -86,7 +70,6 @@ function clearSources(target) {
 function deactivateSources(target) {
 	for (let sourceSub = target.firstSource; sourceSub !== null; sourceSub = sourceSub.nextSource) sourceSub.active = false;
 }
-
 //#endregion
 //#region src/watch/trackSignal.ts
 /**
@@ -94,60 +77,48 @@ function deactivateSources(target) {
 * run when the signal changes.
 */
 function trackSignal(signal) {
-	const target = context_default.activeTarget;
+	const target = context.activeTarget;
 	if (target !== null) {
-		let sub = null;
-		let lastSub = null;
-		for (let nextSub = signal.firstTarget; nextSub !== null; nextSub = nextSub.nextTarget) {
-			lastSub = nextSub;
-			if (nextSub.target === target) {
-				sub = nextSub;
-				break;
-			}
+		for (let existingSub = target.firstSource; existingSub !== null; existingSub = existingSub.nextSource) if (existingSub.source === signal) {
+			existingSub.active = true;
+			return;
 		}
-		if (sub === null) {
-			sub = {
-				source: signal,
-				target,
-				previousTarget: lastSub,
-				nextTarget: null,
-				nextSource: null,
-				active: true,
-				recalc: false
-			};
-			if (lastSub === null) signal.firstTarget = sub;
-			else lastSub.nextTarget = sub;
-			if (target.firstSource === null) target.firstSource = sub;
-			else {
-				let lastEffectSub = target.firstSource;
-				for (let nextSub = lastEffectSub.nextSource; nextSub !== null; nextSub = nextSub.nextSource) lastEffectSub = nextSub;
-				lastEffectSub.nextSource = sub;
-			}
-		} else sub.active = true;
+		const oldFirstTarget = signal.firstTarget;
+		const sub = {
+			source: signal,
+			target,
+			previousTarget: null,
+			nextTarget: oldFirstTarget,
+			nextSource: target.firstSource,
+			active: true,
+			recalc: false
+		};
+		if (oldFirstTarget !== null) oldFirstTarget.previousTarget = sub;
+		signal.firstTarget = sub;
+		target.firstSource = sub;
 	}
 }
-
 //#endregion
 //#region src/watch/runComputed.ts
 function runComputed(computed) {
-	const oldActiveTarget = context_default.activeTarget;
+	const oldActiveTarget = context.activeTarget;
 	computed.running = true;
 	computed.didError = false;
+	computed.didSuspend = false;
 	try {
-		context_default.activeTarget = computed;
+		context.activeTarget = computed;
 		computed.value = computed.run();
 	} catch (err) {
 		computed.didError = true;
 		computed.value = err;
 		throw err;
 	} finally {
-		context_default.activeTarget = oldActiveTarget;
+		context.activeTarget = oldActiveTarget;
 		computed.running = false;
 	}
 	trackSignal(computed);
 	return computed.value;
 }
-
 //#endregion
 //#region src/watch/checkComputed.ts
 /**
@@ -171,7 +142,6 @@ function checkComputed(computed) {
 	}
 	return changed;
 }
-
 //#endregion
 //#region src/watch/checkSources.ts
 /**
@@ -180,21 +150,20 @@ function checkComputed(computed) {
 */
 function checkSources(target) {
 	let haveComputed = false;
-	for (let sourceSub = target.firstSource; sourceSub !== null; sourceSub = sourceSub.nextSource) if (sourceSub.recalc) if (sourceSub.source.type === SIGNAL_TYPE) return true;
+	for (let sourceSub = target.firstSource; sourceSub !== null; sourceSub = sourceSub.nextSource) if (sourceSub.recalc) if (sourceSub.source.type === 0) return true;
 	else if (sourceSub.source.recalc) haveComputed = true;
 	else return true;
 	if (haveComputed) {
-		for (let sourceSub = target.firstSource; sourceSub !== null; sourceSub = sourceSub.nextSource) if (sourceSub.recalc && sourceSub.source.type === COMPUTED_TYPE && sourceSub.source.recalc) {
-			const oldActiveTarget = context_default.activeTarget;
-			context_default.activeTarget = target;
+		for (let sourceSub = target.firstSource; sourceSub !== null; sourceSub = sourceSub.nextSource) if (sourceSub.recalc && sourceSub.source.type === 1 && sourceSub.source.recalc) {
+			const oldActiveTarget = context.activeTarget;
+			context.activeTarget = target;
 			const recalc = checkComputed(sourceSub.source);
-			context_default.activeTarget = oldActiveTarget;
+			context.activeTarget = oldActiveTarget;
 			if (recalc) return true;
 		}
 	}
 	return false;
 }
-
 //#endregion
 //#region src/watch/runCleanups.ts
 /**
@@ -203,9 +172,10 @@ function checkSources(target) {
 function runCleanups(effect) {
 	let effectToClean = effect;
 	for (let i = 0; i < effect.extent; i++) {
+		if (effectToClean === null) break;
 		if (typeof effectToClean.cleanup === "function") {
-			const oldActiveTarget = context_default.activeTarget;
-			context_default.activeTarget = null;
+			const oldActiveTarget = context.activeTarget;
+			context.activeTarget = null;
 			try {
 				effectToClean.cleanup();
 			} catch (err) {
@@ -214,18 +184,12 @@ function runCleanups(effect) {
 				throw err;
 			} finally {
 				effectToClean.cleanup = void 0;
-				context_default.activeTarget = oldActiveTarget;
+				context.activeTarget = oldActiveTarget;
 			}
 		}
-		const nextEffect = effectToClean.nextEffect;
-		if (i !== 0 && effect.nextEffectToRun === effectToClean) {
-			effect.nextEffectToRun = effectToClean.nextEffectToRun;
-			effectToClean.nextEffect = effectToClean.nextEffectToRun = null;
-		}
-		effectToClean = nextEffect;
+		effectToClean = effectToClean.nextEffect;
 	}
 }
-
 //#endregion
 //#region src/watch/checkEffect.ts
 /**
@@ -240,130 +204,250 @@ function checkEffect(effect) {
 		clearSources(effect);
 	}
 }
-
 //#endregion
-//#region src/watch/clearTargets.ts
+//#region src/watch/routeEffectError.ts
 /**
-* Clear unused target subscriptions after all Effects have been run.
+* Routes an error thrown by an effect re-run to the nearest enclosing error
+* boundary (`@try`/`@catch` or top-level `@error`), and forces the boundary's
+* control effect to re-run so it renders its catch branch. Returns true if a
+* boundary handled the error.
+*
+* The boundary is found by walking the flattened region chain from the
+* effect's owning region (`Effect.region`, set by `$run`) through its
+* ancestors (regions with strictly decreasing depth on the `previousRegion`
+* chain — the same shape `clearRegion` walks).
+*
+* For recovery, the boundary holds the failing effect's source signals
+* (captured by `runEffect` before it cleared them, `Effect.errorSources`)
+* together with the boundary effect's own sources: reads wrapped in nested
+* `$run` effects (text/attribute interpolation) are tracked by those
+* effects, not the boundary, so without holding them the catch branch would
+* never re-attempt the try branch. `runTry` re-subscribes the boundary
+* effect to the held signals on every run that shows the catch branch.
+*
+* Called from `triggerEffects`' per-effect catch. If forcing the boundary
+* re-run itself throws (e.g. the catch branch content errors), the error
+* propagates to the caller, which reports it as unhandled — matching the
+* compiled form, where a throwing catch branch escapes the boundary.
 */
-function clearTargets(source) {
-	let previousSub = null;
-	for (let clearSub = source.firstTarget; clearSub !== null; clearSub = clearSub.nextTarget) if (!clearSub.active) if (previousSub === null) source.firstTarget = clearSub.nextTarget;
-	else previousSub.nextTarget = clearSub.nextTarget;
-	else previousSub = clearSub;
+function routeEffectError(effect, error) {
+	let region = effect.region ?? null;
+	while (region !== null) {
+		const boundary = region.errorBoundary;
+		if (boundary !== void 0 && boundary.effect !== null) {
+			const boundaryEffect = boundary.effect;
+			const held = [];
+			for (let sub = boundaryEffect.firstSource; sub !== null; sub = sub.nextSource) held.push(sub.source);
+			for (const signal of effect.errorSources ?? []) if (!held.includes(signal)) held.push(signal);
+			boundary.error = error;
+			boundary.hasError = true;
+			boundary.heldSignals = held;
+			runCleanups(boundaryEffect);
+			deactivateSources(boundaryEffect);
+			runEffect(boundaryEffect);
+			clearSources(boundaryEffect);
+			return true;
+		}
+		const depth = region.depth;
+		let previous = region.previousRegion;
+		while (previous !== null && previous.depth >= depth) previous = previous.previousRegion;
+		region = previous;
+	}
+	return false;
 }
-
 //#endregion
 //#region src/watch/triggerEffects.ts
 /**
+* Re-subscribes a failed effect to the suspended computeds its run had read,
+* after `runEffect`'s catch detached them via `clearSources`. Called when no
+* error boundary handled the crash: the error still surfaces (see below),
+* but the promise's resolve re-runs the effect, so a crash caused by a
+* pending read's `undefined` heals instead of leaving a dead effect.
+*/
+function resubscribeSuspendSources(effect) {
+	const sources = effect.suspendSources;
+	if (!sources || sources.size === 0) return;
+	const oldActive = context.activeTarget;
+	context.activeTarget = effect;
+	for (const signal of sources) trackSignal(signal);
+	context.activeTarget = oldActive;
+}
+/**
 * Runs the effects that have been collected during the batch.
 */
 function triggerEffects() {
-	let didError = false;
-	let error;
-	let effect = context_default.firstEffectToRun;
-	while (effect !== null) {
-		context_default.batchOperation++;
+	let unhandledError = null;
+	const queue = context.effectsToRun;
+	for (let i = 0; i < queue.length; i++) {
+		const effect = queue[i];
+		context.batchOperation++;
+		effect.queued = false;
 		try {
 			checkEffect(effect);
 		} catch (err) {
-			if (!didError) {
-				didError = true;
-				error = err;
+			let handled = false;
+			try {
+				handled = routeEffectError(effect, err);
+			} catch (routingError) {
+				if (unhandledError === null) unhandledError = { error: routingError };
+			}
+			if (!handled) {
+				resubscribeSuspendSources(effect);
+				if (unhandledError === null) unhandledError = { error: err };
 			}
 		}
-		effect = effect.nextEffectToRun;
 	}
-	effect = context_default.firstEffectToRun;
-	context_default.firstEffectToRun = null;
-	while (effect !== null) {
-		let nextEffect = effect.nextEffectToRun;
-		effect.nextEffectToRun = null;
-		effect = nextEffect;
-	}
-	let signal = context_default.firstSignalToUpdate;
-	context_default.firstSignalToUpdate = null;
+	for (let effect of queue) effect.queued = false;
+	context.effectsToRun = [];
+	let signal = context.firstSignalToUpdate;
+	context.firstSignalToUpdate = null;
+	context.lastSignalToUpdate = null;
 	while (signal !== null) {
-		clearTargets(signal);
 		const nextSignal = signal.nextSignalToUpdate;
 		signal.nextSignalToUpdate = null;
 		signal = nextSignal;
 	}
-	if (didError) throw error;
+	if (unhandledError !== null) throw unhandledError.error;
 }
-
 //#endregion
 //#region src/watch/batchEnd.ts
 function batchEnd() {
-	if (context_default.batch > 1) {
-		context_default.batch--;
+	if (context.batch > 1) {
+		context.batch--;
 		return;
 	}
 	try {
 		triggerEffects();
 	} finally {
-		context_default.batch = 0;
-		context_default.batchOperation = 0;
-		context_default.previousEffect = null;
+		context.batch = 0;
+		context.batchOperation = 0;
+		context.previousEffect = null;
 	}
 }
-
 //#endregion
 //#region src/watch/batchStart.ts
 function batchStart() {
-	context_default.batch++;
+	context.batch++;
 }
-
 //#endregion
 //#region src/watch/runEffect.ts
 function runEffect(effect) {
-	devContext_default.effectRun(effect);
-	const oldActiveTarget = context_default.activeTarget;
-	const oldExtent = context_default.extent;
+	devContext.effectRun(effect);
+	const oldActiveTarget = context.activeTarget;
+	const oldExtent = context.extent;
 	effect.didError = false;
+	effect.errorSources = null;
+	effect.didSuspend = false;
+	effect.suspendSources = null;
 	batchStart();
 	try {
-		if (context_default.previousEffect !== null) context_default.previousEffect.nextEffect = effect;
-		context_default.activeTarget = effect;
-		context_default.previousEffect = effect;
-		context_default.extent = 1;
+		if (context.previousEffect !== null) context.previousEffect.nextEffect = effect;
+		context.activeTarget = effect;
+		context.previousEffect = effect;
+		context.extent = 1;
 		effect.cleanup = effect.run();
-		effect.extent = context_default.extent;
+		effect.extent = context.extent;
 	} catch (err) {
 		effect.didError = true;
+		let sources = null;
+		for (let sub = effect.firstSource; sub !== null; sub = sub.nextSource) (sources ??= []).push(sub.source);
+		effect.errorSources = sources;
 		clearSources(effect);
 		throw err;
 	} finally {
-		context_default.activeTarget = oldActiveTarget;
-		context_default.extent += oldExtent - 1;
+		context.activeTarget = oldActiveTarget;
+		context.extent += oldExtent - 1;
 		batchEnd();
 	}
 }
-
 //#endregion
 //#region src/watch/$run.ts
 /**
 * Runs and re-runs a function that depends on a watched object
 *
 * @param fn The function to run, which may return a cleanup function.
+* @param options Internal fields to set on the constructed Effect (e.g.
+*   `isMountEffect`, `forVarDeps`). Not part of the public API.
 */
-function $run(fn, name) {
+function $run(fn, name, options) {
 	let effect = {
-		type: EFFECT_TYPE,
+		type: 2,
 		run: fn,
 		cleanup: void 0,
 		firstSource: null,
 		nextEffect: null,
 		extent: 0,
-		nextEffectToRun: null,
+		queued: false,
 		didError: false,
-		name
+		didSuspend: false,
+		region: null,
+		errorSources: null,
+		name,
+		isMountEffect: options?.isMountEffect,
+		forVarMask: options?.forVarMask
 	};
-	devContext_default.onRun(effect);
+	const region = context.activeRegion;
+	if (region !== null) {
+		region.effects.push(effect);
+		effect.region = region;
+	}
+	devContext.onRun(effect);
 	runEffect(effect);
 	return effect;
 }
-
+//#endregion
+//#region src/watch/$peek.ts
+/**
+* Runs a function without tracking the reactive values it reads: `$watch`'d
+* state accessed inside `fn` does not become a dependency of the currently
+* running effect or computed. Useful for reading state inside an effect
+* without re-running it when that state changes.
+*
+* @param fn The function to run untracked.
+*/
+function $peek(fn) {
+	const oldActiveTarget = context.activeTarget;
+	context.activeTarget = null;
+	const result = fn();
+	context.activeTarget = oldActiveTarget;
+	return result;
+}
+//#endregion
+//#region src/watch/flushMountEffects.ts
+/**
+* Runs the collected `$onmount`/`onmount` callbacks — once, after the
+* component's markup has been added to the DOM (or, when hydrating, after
+* hydration is complete). Multiple callbacks run in the order they were
+* added.
+*
+* Each callback becomes an effect with `isMountEffect` set, so the keyed-list
+* reconciler's force-rerun path (`rerunRegionEffects`) skips it. Its body
+* also runs untracked: mount callbacks are once-only, so reactive reads
+* inside them do not subscribe. In dev builds a tracked pass warns when a
+* callback reads reactive state, since that is almost always a mistake — the
+* reactive part should be wrapped in `$run`.
+*/
+function flushMountEffects() {
+	if (context.mountEffects.length === 0) return;
+	const activeRegion = context.activeRegion;
+	for (let effect of context.mountEffects) {
+		context.activeRegion = effect.region;
+		$run(() => runMountCallback(effect.fn), void 0, { isMountEffect: true });
+	}
+	context.activeRegion = activeRegion;
+	context.mountEffects.length = 0;
+}
+function runMountCallback(fn) {
+	if (!devContext.enabled) return $peek(fn);
+	const result = fn();
+	const effect = context.activeTarget;
+	if (effect !== null && effect.type === 2 && effect.firstSource !== null) {
+		console.warn("[torpor] A $onmount/onmount callback read reactive state, but mount callbacks run only once and will not re-run. Wrap the reactive part in $run(), e.g. $onmount(() => { $run(() => ...); });");
+		deactivateSources(effect);
+		clearSources(effect);
+	}
+	return result;
+}
 //#endregion
 //#region src/render/animate.ts
 /**
@@ -384,76 +468,279 @@ async function animate(el, enter, keyframes, options) {
 	setTimeout(() => {
 		animation.timeline = el.ownerDocument.timeline;
 	}, 1);
-	const activeRegion = context_default.activeRegion;
+	const activeRegion = context.activeRegion;
 	activeRegion.animations ??= /* @__PURE__ */ new Set();
 	activeRegion.animations.add(animation);
 	await animation.finished;
 }
-
+//#endregion
+//#region src/render/delegatedEvents.ts
+/**
+* Event delegation.
+*
+* For event types in `DELEGATED_EVENT_TYPES` (all natively bubbling), we
+* register a single listener on `document` per type and dispatch by walking
+* up from `event.target` to find the closest ancestor with a stashed handler.
+* This replaces per-element `addEventListener` for delegated types.
+*
+* Why: in the js-framework-bench row template, every `<tr>` clones two `<a>`
+* elements each with a `click` handler. With per-element `addEventListener`,
+* `runlots` (10k rows) issues 20000 `addEventListener` calls and the browser
+* allocates 20000 `Listener` objects. With delegation it's 2 calls total
+* (one per delegated type, registered lazily on first use) and zero
+* per-element `Listener` allocations — the handler is stored as a property
+* on the element.
+*
+* Model: last-write-wins per element per type (same as Solid's
+* `delegateEvents`). Repeated `t_event(el, "click", h)` calls with the same
+* element reassign the property; calling with `null`/`undefined` clears it.
+* Torpor's compiler emits `t_event(el, type, h)` exactly once per element
+* lifetime (outside any tracked effect), so this is the natural shape.
+*
+* Non-bubbling events (`focus`, `blur`, `scroll`, `load`, `error`, `abort`,
+* `unload`, `resize`, etc.) bypass delegation and use direct
+* `addEventListener` on the element, preserving native semantics.
+*/
+const DELEGATED_EVENT_TYPES = /* @__PURE__ */ new Set([
+	"auxclick",
+	"beforeinput",
+	"change",
+	"click",
+	"compositionend",
+	"compositionstart",
+	"compositionupdate",
+	"contextmenu",
+	"dblclick",
+	"drag",
+	"dragend",
+	"dragenter",
+	"dragleave",
+	"dragover",
+	"dragstart",
+	"drop",
+	"focusin",
+	"focusout",
+	"input",
+	"keydown",
+	"keypress",
+	"keyup",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+	"pointerdown",
+	"pointermove",
+	"pointerout",
+	"pointerover",
+	"pointerup",
+	"reset",
+	"submit",
+	"touchend",
+	"touchmove",
+	"touchstart",
+	"wheel"
+]);
+function isDelegatedEventType(type) {
+	return DELEGATED_EVENT_TYPES.has(type);
+}
+const DELEGATE_PREFIX = "torp.$$";
+const DELEGATE_REGISTERED = Symbol.for("torp.delegated.registered");
+function delegatedHandler(event) {
+	let node = event.target;
+	const stopAt = event.currentTarget;
+	const key = DELEGATE_PREFIX + event.type;
+	while (node != null && node !== stopAt) {
+		const handler = node[key];
+		if (handler !== void 0) {
+			Object.defineProperty(event, "currentTarget", {
+				configurable: true,
+				value: node,
+				writable: false
+			});
+			try {
+				handler.call(node, event);
+			} finally {
+				delete event.currentTarget;
+			}
+			return;
+		}
+		node = node.parentNode;
+	}
+}
+function ensureDelegatedListener(type) {
+	if (typeof document === "undefined") return;
+	let registered = document[DELEGATE_REGISTERED];
+	if (!registered) {
+		registered = /* @__PURE__ */ new Set();
+		document[DELEGATE_REGISTERED] = registered;
+	}
+	if (registered.has(type)) return;
+	registered.add(type);
+	document.addEventListener(type, delegatedHandler);
+}
+/**
+* Attach a delegated event handler to an element.
+*
+* Stores the handler as a property on the element and ensures a single
+* document-level listener exists for the type. Idempotent for the
+* document-level listener: the first call for a given type registers it,
+* subsequent calls are a Set-has check.
+*
+* Passing `null` or `undefined` as the listener clears any previously-set
+* handler for that type on the element (mirroring `addEvent`'s existing
+* null-skipping semantics, extended to support explicit removal).
+*/
+function attachDelegatedEvent(el, type, listener) {
+	const key = DELEGATE_PREFIX + type;
+	if (listener === void 0 || listener === null) {
+		el[key] = void 0;
+		return;
+	}
+	ensureDelegatedListener(type);
+	el[key] = listener;
+}
+const DIRECT_LISTENERS = "torp.$directListeners";
+/**
+* Records a direct (non-delegated) listener on the element at attach time,
+* so `copyEventListeners` can re-attach it after a dynamic-element tag
+* swap. `addEventListener` listeners can't be discovered after the fact.
+*/
+function recordDirectListener(el, type, listener) {
+	let list = el[DIRECT_LISTENERS];
+	if (!list) {
+		list = [];
+		el[DIRECT_LISTENERS] = list;
+	}
+	list.push({
+		type,
+		listener
+	});
+}
+/**
+* Copies the event listeners attached to one element onto another — used by
+* `t_dynamic` so a dynamic element keeps its listeners when its tag changes.
+* Delegated handlers are `torp.$$<type>` properties, copied per known
+* delegated type (swaps are rare, so the fixed set of checks is fine);
+* direct listeners are re-registered from the list `recordDirectListener`
+* built at attach time.
+*/
+function copyEventListeners(from, to) {
+	for (const type of DELEGATED_EVENT_TYPES) {
+		const key = DELEGATE_PREFIX + type;
+		const handler = from[key];
+		if (handler !== void 0) to[key] = handler;
+	}
+	const direct = from[DIRECT_LISTENERS];
+	if (direct) {
+		to[DIRECT_LISTENERS] = direct;
+		for (const { type, listener } of direct) to.addEventListener(type, listener);
+	}
+}
 //#endregion
 //#region src/render/isFragmentNode.ts
 function isFragmentNode(node) {
 	return node.nodeType === 11;
 }
-
+//#endregion
+//#region src/render/runMountSideEffects.ts
+/**
+* Runs the mount-time side effects that both `addFragment` and `addElement`
+* share: `$onmount` effects (only when not hydrating), stashed event
+* listeners, and stashed animations. No-op when `parent` is itself a
+* `DocumentFragment` (we're being inserted into a detached tree, so
+* `$onmount` and event hookup would be premature — they'll run when the
+* outer fragment attaches).
+*
+* Extracted so the `DocumentFragment` path (`addFragment`) and the
+* single-element path (`addElement`) don't duplicate this logic.
+*/
+function runMountSideEffects(parent, activeRegion, hydrationNode) {
+	if (isFragmentNode(parent)) return;
+	if (hydrationNode === null) flushMountEffects();
+	if (context.stashedEvents.length > 0) {
+		for (let event of context.stashedEvents) if (isDelegatedEventType(event.type)) attachDelegatedEvent(event.el, event.type, event.listener);
+		else {
+			event.el.addEventListener(event.type, event.listener);
+			recordDirectListener(event.el, event.type, event.listener);
+		}
+		context.stashedEvents.length = 0;
+	}
+	for (let animation of context.stashedAnimations) {
+		context.activeRegion = animation.region;
+		$run(function runMountSideEffectsAnimation() {
+			if (animation.in !== void 0) animate(animation.el, true, animation.in.keyframes, animation.in.options);
+			if (animation.out !== void 0) return () => {
+				animate(animation.el, false, animation.out.keyframes, animation.out.options);
+			};
+		});
+	}
+	context.stashedAnimations.length = 0;
+	context.activeRegion = activeRegion;
+}
+//#endregion
+//#region src/render/addElement.ts
+/**
+* Companion to `addFragment` for the single-root-element codegen path. Wires
+* a cloned root element (produced by `getElementFragment`) into the live DOM
+* tree, sets the active region's start/end nodes, and runs the same
+* mount-time side effects as `addFragment` (`$onmount` effects, stashed event
+* listeners, stashed animations).
+*
+* Differences from `addFragment`:
+* - `node` is both the start and end of the region (no
+*   `fragment.firstChild`/`fragment.lastChild` indirection).
+* - When hydrating, the existing DOM node is reused (the cloned `node` is
+*   discarded); `endNode` is still `node` because `nodeRootElement` returns
+*   the hydration cursor's node in that case, not the cloned one.
+*
+* @param node The root element (cloned by `getElementFragment`, or the
+*   hydration cursor's node when hydrating).
+* @param parent The intended parent element.
+* @param before The sibling to insert before (or `null` to append).
+*/
+function addElement(node, parent, before) {
+	const activeRegion = context.activeRegion;
+	const hydrationNode = context.hydrationNode;
+	activeRegion.startNode = node;
+	activeRegion.endNode = node;
+	parent = before?.parentNode ?? parent;
+	if (hydrationNode === null) parent.insertBefore(node, before);
+	runMountSideEffects(parent, activeRegion, hydrationNode);
+}
 //#endregion
 //#region src/render/addFragment.ts
-function addFragment(fragment, parent, before, endNode) {
-	const activeRegion = context_default.activeRegion;
-	const hydrationNode = context_default.hydrationNode;
-	if (hydrationNode !== null) activeRegion.endNode = endNode ?? hydrationNode;
-	else {
+function addFragment(fragment, parent, before, endNode, startNode) {
+	const activeRegion = context.activeRegion;
+	const hydrationNode = context.hydrationNode;
+	if (hydrationNode !== null) {
+		if (startNode !== void 0 && startNode.parentNode !== null) activeRegion.startNode = startNode;
+		activeRegion.endNode = endNode ?? hydrationNode;
+	} else {
 		activeRegion.startNode = fragment.firstChild;
 		activeRegion.endNode = fragment.lastChild;
 	}
 	parent = before?.parentNode ?? parent;
 	if (hydrationNode === null) parent.insertBefore(fragment, before);
-	if (!isFragmentNode(parent)) {
-		if (hydrationNode === null) {
-			for (let effect of context_default.mountEffects) $run(effect);
-			context_default.mountEffects.length = 0;
-		}
-		if (context_default.stashedEvents.length > 0) {
-			const events = [...context_default.stashedEvents];
-			$run(function addFragmentEvents() {
-				for (let event of events) event.el.addEventListener(event.type, event.listener);
-				return () => {
-					for (let event of events) event.el.removeEventListener(event.type, event.listener);
-				};
-			});
-			context_default.stashedEvents.length = 0;
-		}
-		for (let animation of context_default.stashedAnimations) {
-			context_default.activeRegion = animation.region;
-			$run(function addFragmentAnimation() {
-				if (animation.in !== void 0) animate(animation.el, true, animation.in.keyframes, animation.in.options);
-				if (animation.out !== void 0) return () => {
-					animate(animation.el, false, animation.out.keyframes, animation.out.options);
-				};
-			});
-		}
-		context_default.stashedAnimations.length = 0;
-		context_default.activeRegion = activeRegion;
-	}
+	runMountSideEffects(parent, activeRegion, hydrationNode);
 }
-
 //#endregion
 //#region src/render/applyProps.ts
 function applyProps(el, props, propNamesUsed) {
 	if (props !== void 0) {
 		for (let [name, value] of Object.entries(props)) if (!propNamesUsed.includes(name)) if (name.startsWith("on")) {
 			const eventName = name.substring(2);
-			el.addEventListener(eventName, value);
-		} else $run(function setAttribute$1() {
+			if (isDelegatedEventType(eventName)) attachDelegatedEvent(el, eventName, value);
+			else el.addEventListener(eventName, value);
+		} else $run(function setAttribute() {
 			el.setAttribute(name, value);
 		});
 	}
 }
-
 //#endregion
 //#region src/render/clearRegion.ts
 function clearRegion(region) {
-	devContext_default.onRegionCleared(region);
+	devContext.onRegionCleared(region);
 	let animations = region.animations !== null ? Array.from(region.animations) : void 0;
 	let childRegion = region.nextRegion;
 	while (childRegion !== null && childRegion.depth > region.depth) {
@@ -461,9 +748,10 @@ function clearRegion(region) {
 			animations ??= [];
 			animations.push(...childRegion.animations);
 		}
+		const nextChild = childRegion.nextRegion;
 		releaseRegion(childRegion);
 		childRegion.depth = -2;
-		childRegion = childRegion.nextRegion;
+		childRegion = nextChild;
 	}
 	region.nextRegion = childRegion;
 	if (region.previousRegion !== null) region.previousRegion.nextRegion = region.nextRegion;
@@ -478,31 +766,83 @@ function clearRegion(region) {
 }
 function clearNodes(region) {
 	if (region.startNode !== null && region.endNode !== null) {
+		const after = region.endNode.nextSibling;
+		let stop = region.startNode;
+		const startDetached = region.startNode.parentNode === null;
+		let fallback = false;
+		if (startDetached) {
+			let prev = region.previousRegion;
+			while (prev !== null && prev.depth > region.depth) prev = prev.previousRegion;
+			if (prev !== null && prev.endNode !== null && prev.endNode.parentNode !== null) {
+				stop = prev.endNode;
+				fallback = true;
+			}
+		}
 		let currentNode = region.endNode;
-		while (currentNode !== region.startNode) {
+		while (currentNode !== null && currentNode !== stop) {
 			let previousNode = currentNode.previousSibling;
 			currentNode.remove();
+			if (previousNode === null) break;
 			currentNode = previousNode;
 		}
-		currentNode.remove();
+		if (!fallback && currentNode === region.startNode) currentNode.remove();
+		const firstRemaining = fallback ? stop : after;
+		if (firstRemaining !== null) {
+			let ancestor = region.previousRegion;
+			let ancestorDepth = region.depth;
+			while (ancestor !== null && ancestor.depth < ancestorDepth) {
+				if (ancestor.startNode !== null && ancestor.startNode.parentNode === null) ancestor.startNode = firstRemaining;
+				ancestorDepth = ancestor.depth;
+				ancestor = ancestor.previousRegion;
+			}
+		}
 	}
 	releaseRegion(region);
 }
 function releaseRegion(region) {
+	region.generation = -1;
 	region.startNode = null;
 	region.endNode = null;
 	region.previousRegion = null;
 	region.nextRegion = null;
 	region.animations = null;
+	region.errorBoundary = void 0;
+	for (const effect of region.effects) {
+		if (typeof effect.cleanup === "function") {
+			effect.cleanup();
+			effect.cleanup = void 0;
+		}
+		let sub = effect.firstSource;
+		effect.firstSource = null;
+		while (sub !== null) {
+			const nextSource = sub.nextSource;
+			const prev = sub.previousTarget;
+			const next = sub.nextTarget;
+			if (prev === null) {
+				if (sub.source.firstTarget === sub) sub.source.firstTarget = next;
+			} else prev.nextTarget = next;
+			if (next !== null) next.previousTarget = prev;
+			sub.previousTarget = null;
+			sub.nextTarget = null;
+			sub.nextSource = null;
+			sub = nextSource;
+		}
+	}
+	region.effects.length = 0;
 }
-
 //#endregion
 //#region src/render/clearLayoutSlot.ts
+/**
+* Clears a region that was created by `fillLayoutSlot`: tears down the
+* rendered content and its effects, leaving the surrounding layout intact
+* so the slot can be refilled.
+*
+* @param region The region to clear
+*/
 function clearLayoutSlot(region) {
-	context_default.previousRegion = region.previousRegion;
+	context.previousRegion = region.previousRegion;
 	clearRegion(region);
 }
-
 //#endregion
 //#region src/render/newRegion.ts
 function newRegion(name) {
@@ -513,45 +853,80 @@ function newRegion(name) {
 		nextRegion: null,
 		depth: -1,
 		animations: null,
-		name
+		name,
+		effects: []
 	};
 }
-
 //#endregion
 //#region src/render/popRegion.ts
 function popRegion(oldRegion) {
-	context_default.activeRegion = oldRegion;
-	devContext_default.onRegionPopped();
+	context.activeRegion = oldRegion;
+	devContext.onRegionPopped();
 }
-
 //#endregion
 //#region src/render/pushRegion.ts
 function pushRegion(region, toParent = false) {
-	const activeRegion = context_default.activeRegion;
+	const activeRegion = context.activeRegion;
 	if (toParent) {
-		const previousRegion = context_default.previousRegion;
+		const previousRegion = context.previousRegion;
 		region.previousRegion = previousRegion;
 		const nextRegion = previousRegion.nextRegion;
 		previousRegion.nextRegion = region;
 		region.nextRegion = nextRegion;
+		if (nextRegion !== null) nextRegion.previousRegion = region;
 		region.depth = activeRegion.depth + 1;
 	}
-	context_default.activeRegion = region;
-	context_default.previousRegion = region;
-	devContext_default.onRegionPushed(region, toParent);
+	context.activeRegion = region;
+	context.previousRegion = region;
+	devContext.onRegionPushed(region, toParent);
 	return activeRegion;
 }
-
 //#endregion
 //#region src/render/fillLayoutSlot.ts
+/**
+* Renders a component into a persistent layout slot, and returns the region
+* it was rendered into. Used by the layout engine during navigation: the
+* component is created inside `parent` at `anchor`, with `slot` as its child
+* slot render, and the returned region can later be passed to
+* `clearLayoutSlot` to tear the page down — leaving the layout itself
+* intact — before refilling the slot.
+*
+* @param component The component to render into the slot
+* @param slot The slot render to pass to the component
+* @param parent The parent node to render into
+* @param anchor The node to insert content before, or null to append
+* @param $props Optional props to pass to the component
+* @param $context Optional context to pass to the component
+*/
 function fillLayoutSlot(component, slot, parent, anchor, $props, $context) {
-	const region = newRegion(devContext_default.enabled ? "Layout slot" : void 0);
+	const region = newRegion(devContext.enabled ? "Layout slot" : void 0);
 	const oldRegion = pushRegion(region, true);
 	component(parent, anchor, $props, $context, { _: slot });
 	popRegion(oldRegion);
 	return region;
 }
-
+//#endregion
+//#region src/render/firstInsideNode.ts
+/**
+* During hydration, `nodeAnchor` finds the first node inside a hydration
+* block and removes the start/end marker comments. Generated code for
+* `@html` needs that first node later (to adopt the server-rendered nodes
+* as the region's bounds), but by then the markers are gone — so the only
+* reliable way to recover it is to stash it here, keyed by the anchor node
+* that `nodeAnchor` returns.
+*/
+const firstInsideNodes = /* @__PURE__ */ new WeakMap();
+function setFirstInsideNode(anchor, node) {
+	firstInsideNodes.set(anchor, node);
+}
+/**
+* Gets the first node that was inside the hydration block for the given
+* anchor node, or `undefined` if the anchor wasn't hydrated through
+* hydration markers.
+*/
+function firstInsideNode(anchor) {
+	return firstInsideNodes.get(anchor);
+}
 //#endregion
 //#region src/render/getFragment.ts
 function getFragment(document, array, index, html, ns) {
@@ -568,7 +943,44 @@ function getFragment(document, array, index, html, ns) {
 	}
 	return array[index].cloneNode(true);
 }
-
+//#endregion
+//#region src/render/getElementFragment.ts
+/**
+* Returns a clone of the cached template's single root element, bypassing the
+* `DocumentFragment` wrapper that `getFragment` produces.
+*
+* Used by the compiler-emitted `createListItem` for `@for` bodies (and other
+* fragments) whose template has exactly one rendering root child — e.g.
+* `<tr><td>...</td>...</tr>`. Cloning `template.content.firstElementChild`
+* directly saves the per-row `DocumentFragment` allocation that `getFragment`'s
+* `cloneNode(true)` on the cached template's content would otherwise produce,
+* which dominates the cost of bulk-row creates (`run`/`add`/`runlots`).
+*
+* Contract: the compiler only emits `t_fragment_el` for fragment indices whose
+* template has exactly one rendering root, and that root is an `Element`. The
+* cache array (`t_fragment_els`) is separate from `t_fragments` so each helper
+* only ever sees its own cached type at a given index.
+*
+* @param document The owner document (used to build the cached `<template>`).
+* @param array The per-component `t_fragment_els` cache.
+* @param index The fragment's index in the cache.
+* @param html The fragment's HTML source, with `#` placeholders for reactive
+*   text and `<!>` for anchor comments.
+* @param ns When true, the template is created in the SVG namespace (its
+*   `firstElementChild` is then an SVG element).
+*/
+function getElementFragment(document, array, index, html, ns) {
+	if (array[index] === void 0) if (ns === true) {
+		const template = document.createElementNS("http://www.w3.org/2000/svg", "template");
+		template.innerHTML = html;
+		array[index] = template.firstElementChild;
+	} else {
+		const template = document.createElement("template");
+		template.innerHTML = html;
+		array[index] = template.content.firstElementChild;
+	}
+	return array[index].cloneNode(true);
+}
 //#endregion
 //#region src/render/hydrate.ts
 /**
@@ -578,16 +990,14 @@ function getFragment(document, array, index, html, ns) {
 * @param props An object containing component props
 */
 function hydrate(parent, component, props, slots) {
-	context_default.hydrationNode = parent.firstChild;
-	context_default.rootRegion = newRegion(devContext_default.enabled ? "Root" : void 0);
-	context_default.previousRegion = context_default.rootRegion;
-	pushRegion(context_default.rootRegion);
+	context.hydrationNode = parent.firstChild;
+	context.rootRegion = newRegion(devContext.enabled ? "Root" : void 0);
+	context.previousRegion = context.rootRegion;
+	pushRegion(context.rootRegion);
 	component(parent, null, props, void 0, slots);
-	context_default.hydrationNode = null;
-	for (let effect of context_default.mountEffects) $run(effect);
-	context_default.mountEffects.length = 0;
+	context.hydrationNode = null;
+	flushMountEffects();
 }
-
 //#endregion
 //#region src/render/mount.ts
 /**
@@ -600,14 +1010,36 @@ function hydrate(parent, component, props, slots) {
 function mount(parent, component, props, slots) {
 	if (parent.childElementCount > 0) throw new Error("The parent node must have no child elements");
 	while (parent.firstChild !== null) parent.firstChild.remove();
-	if (context_default.rootRegion === null) {
-		context_default.rootRegion = newRegion(devContext_default.enabled ? "Root" : void 0);
-		context_default.previousRegion = context_default.rootRegion;
-		pushRegion(context_default.rootRegion);
+	if (context.rootRegion === null) {
+		context.rootRegion = newRegion(devContext.enabled ? "Root" : void 0);
+		context.previousRegion = context.rootRegion;
+		pushRegion(context.rootRegion);
 	}
 	component(parent, null, props, void 0, slots);
 }
-
+//#endregion
+//#region src/render/unmount.ts
+/**
+* Tears down the current UI: disposes the root region tree (running effect
+* cleanups and detaching subscriptions), resets the render context, and
+* removes any remaining child nodes from `parent`.
+*
+* Call this before `mount`ing a fresh component tree into the same container
+* (e.g. when client-side navigating to a route whose layout chain differs
+* from the previous one). `mount` refuses to mount into a non-empty parent
+* and reuses an existing root region, so both must be cleared first.
+*
+* @param parent The container that the previous UI was mounted into
+*/
+function unmount(parent) {
+	if (context.rootRegion !== null) {
+		clearRegion(context.rootRegion);
+		context.rootRegion = null;
+		context.previousRegion = null;
+		context.activeRegion = null;
+	}
+	while (parent.firstChild !== null) parent.firstChild.remove();
+}
 //#endregion
 //#region src/render/newListItem.ts
 function newListItem(data, key, name) {
@@ -620,28 +1052,20 @@ function newListItem(data, key, name) {
 		animations: null,
 		name,
 		data,
-		key
+		key,
+		effects: []
 	};
 }
-
-//#endregion
-//#region src/render/hydrationMarkers.ts
-const HYDRATION_START = "[";
-const HYDRATION_END = "]";
-const HYDRATION_BREAK = "^";
-
 //#endregion
 //#region src/render/isCommentNode.ts
 function isCommentNode(node) {
 	return node.nodeType === 8;
 }
-
 //#endregion
 //#region src/render/isTextNode.ts
 function isTextNode(node) {
 	return node.nodeType === 3;
 }
-
 //#endregion
 //#region src/render/nodeCheckHydrationBreak.ts
 /**
@@ -653,17 +1077,14 @@ function isTextNode(node) {
 * @returns The next node.
 */
 function nodeCheckHydrationBreak(node) {
-	if (context_default.hydrationNode !== null) {
-		if (node !== null && isCommentNode(node) && node.data === HYDRATION_BREAK) {
-			let comment = node;
-			node = node.nextSibling;
-			comment.remove();
-		}
-		context_default.hydrationNode = node;
+	if (node !== null && isCommentNode(node) && node.data === "^") {
+		let comment = node;
+		node = node.nextSibling;
+		comment.remove();
 	}
+	context.hydrationNode = node;
 	return node;
 }
-
 //#endregion
 //#region src/render/nodeNext.ts
 /**
@@ -675,10 +1096,18 @@ function nodeCheckHydrationBreak(node) {
 * @param text Whether we require a text node.
 */
 function nodeNext(node, text = false) {
-	if (context_default.hydrationNode !== null && text && isTextNode(node)) return node;
-	return nodeCheckHydrationBreak(node.nextSibling);
+	if (context.hydrationNode !== null) {
+		if (text && isTextNode(node)) return node;
+		let next = nodeCheckHydrationBreak(node.nextSibling);
+		while (!text && next !== null && isTextNode(next) && next.textContent?.trim() === "") next = nodeCheckHydrationBreak(next.nextSibling);
+		if (!text && next !== null && next.nodeName === "TBODY" && next.firstChild && isTextNode(node)) {
+			next = next.firstChild;
+			context.hydrationNode = next;
+		}
+		return next;
+	}
+	return node.nextSibling;
 }
-
 //#endregion
 //#region src/render/nodeAnchor.ts
 /**
@@ -696,32 +1125,43 @@ function nodeNext(node, text = false) {
 * @returns The anchor node.
 */
 function nodeAnchor(node) {
-	if (context_default.hydrationNode !== null) {
-		if (isCommentNode(node) && node.data === HYDRATION_START) {
+	if (context.hydrationNode !== null) {
+		if (isCommentNode(node) && node.data === "[") {
+			const startParent = node.parentNode;
 			let currentNode = nodeNext(node);
+			const firstInside = currentNode;
 			node.remove();
 			let level = 1;
 			while (currentNode !== null) {
 				if (isCommentNode(currentNode)) {
-					if (currentNode.data === HYDRATION_START) level += 1;
-					else if (currentNode.data === HYDRATION_END) {
+					if (currentNode.data === "[") level += 1;
+					else if (currentNode.data === "]") {
 						level -= 1;
 						if (level === 0) {
 							const endNode = currentNode.nextSibling;
 							currentNode.remove();
-							if (context_default.hydrationNode === currentNode) context_default.hydrationNode = endNode;
+							if (context.hydrationNode === currentNode) context.hydrationNode = endNode;
+							const region = context.activeRegion;
+							if (region.startNode === null && firstInside !== null) region.startNode = firstInside;
+							setFirstInsideNode(endNode, firstInside);
 							return endNode;
 						}
 					}
 				}
-				currentNode = currentNode.nextSibling;
+				if (currentNode.firstChild) currentNode = currentNode.firstChild;
+				else if (currentNode.nextSibling) currentNode = currentNode.nextSibling;
+				else {
+					let parent = currentNode.parentNode;
+					while (parent !== null && parent.nextSibling === null && parent !== startParent) parent = parent.parentNode;
+					if (parent === null || parent === startParent) currentNode = null;
+					else currentNode = parent.nextSibling;
+				}
 			}
 			if (currentNode === null) throw new Error("End hydration comment not found");
 		}
 	}
 	return node;
 }
-
 //#endregion
 //#region src/render/nodeChild.ts
 /**
@@ -733,40 +1173,104 @@ function nodeAnchor(node) {
 */
 function nodeChild(parent) {
 	let childNode = parent.firstChild;
-	if (context_default.hydrationNode !== null) {
+	if (context.hydrationNode !== null) {
 		if (childNode === null) childNode = parent.appendChild(parent.ownerDocument.createTextNode(""));
-		context_default.hydrationNode = childNode;
+		context.hydrationNode = childNode;
 	}
 	return childNode;
 }
-
+//#endregion
+//#region src/render/walkHydrationRoot.ts
+/**
+* Walks the hydration cursor past skippable leading nodes (whitespace text,
+* branch-break markers, auto-inserted `<tbody>`) and lands on the first real
+* content node — the same walk `nodeRoot` performs for the non-text case.
+*
+* Sets `region.startNode` to the landed node (unless it's a control-start
+* marker, which `nodeAnchor` consumes next). Returns the landed node and
+* advances `context.hydrationNode` to it.
+*
+* Extracted so `nodeRoot` and `nodeRootElement` share one implementation of
+* the cursor walk.
+*/
+function walkHydrationRoot() {
+	let rootNode = context.hydrationNode;
+	while (rootNode !== null && isSkippable(rootNode)) {
+		const next = rootNode.nextSibling;
+		if (isCommentNode(rootNode) && rootNode.data === "^") rootNode.remove();
+		rootNode = next;
+		context.hydrationNode = rootNode;
+	}
+	while (rootNode !== null && rootNode.nodeName === "TBODY" && rootNode.firstChild !== null) {
+		rootNode = rootNode.firstChild;
+		context.hydrationNode = rootNode;
+	}
+	const region = context.activeRegion;
+	const isControlStart = rootNode !== null && isCommentNode(rootNode) && rootNode.data === "[";
+	if (region.startNode === null && !isControlStart) region.startNode = rootNode;
+	return rootNode;
+}
+function isSkippable(node) {
+	if (isTextNode(node) && (node.textContent ?? "").trim() === "") return true;
+	if (isCommentNode(node)) return node.data === "^" || node.data === "";
+	return false;
+}
+//#endregion
+//#region src/render/nodeRootElement.ts
+/**
+* Gets the root element of a single-root fragment built via `getElementFragment`.
+*
+* Companion to `nodeRoot`, for the codegen path where the compiler has emitted
+* `t_fragment_el` (cloning the cached template's `firstElementChild` directly)
+* instead of `t_fragment` (cloning into a `DocumentFragment`). In the
+* non-hydrating case the cloned element is already the root, so this is a
+* no-op pass-through. In the hydrating case we perform the same cursor walk as
+* `nodeRoot`'s non-text branch so the region's `startNode` lands on the
+* existing DOM node and the hydration cursor advances past any leading
+* whitespace, branch-break markers, and auto-inserted `<tbody>` wrappers.
+*
+* @param node The cloned root element (ignored when hydrating).
+*/
+function nodeRootElement(node) {
+	if (context.hydrationNode !== null) return walkHydrationRoot();
+	return node;
+}
 //#endregion
 //#region src/render/nodeRoot.ts
 /**
 * Gets the first child in a fragment.
 *
-* When hydrating, also sets the active range's start node, while we have it.
+* When hydrating, also sets the active region's start node, while we have it.
+*
+* If the hydration cursor is on a control-start marker (`<![>`), the node is
+* left in place for `nodeAnchor` (called next as `t_anchor(t_root(...))`) to
+* walk — it consumes the matched `<![>...<!]>` pair, removes the markers and
+* sets the region's start node to the first node inside the block.
+*
+* For non-text fragments, leading branch-break markers (`<!^>`), empty anchor
+* comments left by preceding siblings, and residual whitespace-only text nodes
+* are skipped (break markers removed) so the region's start node lands on real
+* content. This replaces the per-sibling `t_next` calls that the codegen used
+* to emit when leading whitespace separated siblings; with whitespace trimmed
+* those calls are gone, so the advancement happens here.
 *
 * @param parent The parent of the fragment.
 * @param text Whether we require a text node.
 */
 function nodeRoot(parent, text = false) {
-	if (context_default.hydrationNode !== null) {
-		let rootNode = context_default.hydrationNode;
+	if (context.hydrationNode !== null) {
+		let rootNode = context.hydrationNode;
 		if (text && !isTextNode(rootNode) && rootNode.previousSibling !== null && isTextNode(rootNode.previousSibling)) {
 			rootNode = rootNode.previousSibling;
-			context_default.hydrationNode = rootNode;
-		}
-		if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
-			rootNode = rootNode.nextSibling;
-			context_default.hydrationNode = rootNode;
+			context.hydrationNode = rootNode;
 		}
-		const region = context_default.activeRegion;
-		if (region.startNode === null) region.startNode = rootNode;
+		if (!text) return walkHydrationRoot();
+		const region = context.activeRegion;
+		const isControlStart = rootNode !== null && isCommentNode(rootNode) && rootNode.data === "[";
+		if (region.startNode === null && !isControlStart) region.startNode = rootNode;
 		return rootNode;
 	} else return parent.firstChild;
 }
-
 //#endregion
 //#region src/render/nodeSkip.ts
 /**
@@ -779,10 +1283,108 @@ function nodeRoot(parent, text = false) {
 */
 function nodeSkip(node, count) {
 	let nextNode = node;
-	for (let i = 0; i < count; i++) nextNode = nodeCheckHydrationBreak(nextNode.nextSibling);
+	if (context.hydrationNode !== null) for (let i = 0; i < count; i++) nextNode = nodeCheckHydrationBreak(nextNode.nextSibling);
+	else for (let i = 0; i < count; i++) nextNode = nextNode.nextSibling;
 	return nextNode;
 }
-
+//#endregion
+//#region src/render/rerunRegionEffects.ts
+/**
+* Force re-runs every effect owned by `region` and its descendant regions
+* that depends on at least one of the for-vars set in `changedMask`.
+*
+* Used by keyed-list `updateListItem` callbacks emitted by the compiler when
+* the `@for` body has been classified "no-proxy safe" — i.e. the per-item
+* data bag is *not* wrapped in a shallow `$watch` Proxy. Without that Proxy,
+* a write such as `t_old_item.data.row = newRow` doesn't propagate through a
+* signal, so any effects that read `data.row` must be re-run manually.
+*
+* `changedMask` is a bitmask of the for-var positions whose references
+* actually changed in this update. Each effect carries `forVarMask`
+* (computed at compile time) listing the for-vars its body reads; effects
+* whose `forVarMask & changedMask === 0` are skipped. Mount callbacks
+* (`isMountEffect` — `$onmount`/`onmount`) are always skipped: they run
+* once per DOM mount and their bodies are untracked.
+*
+* Equivalent to what `checkEffect` does when a signal has propagated, but
+* unconditional for the effects that do match: cleanup → deactivate sources
+* → run → clear unused sources, for every matching effect on the region and
+* on every descendant region (`depth > region.depth`, the same chain shape
+* `clearRegion` walks).
+*/
+function rerunRegionEffects(region, changedMask) {
+	rerunEffectsOnRegion(region, changedMask);
+	let child = region.nextRegion;
+	while (child !== null && child.depth > region.depth) {
+		rerunEffectsOnRegion(child, changedMask);
+		child = child.nextRegion;
+	}
+}
+function rerunEffectsOnRegion(region, changedMask) {
+	for (let effect of region.effects) {
+		if (effect.isMountEffect) continue;
+		if (effect.forVarMask !== void 0 && (effect.forVarMask & changedMask) === 0) continue;
+		runCleanups(effect);
+		deactivateSources(effect);
+		runEffect(effect);
+		clearSources(effect);
+	}
+}
+//#endregion
+//#region src/render/restoreHydration.ts
+/**
+* Restores the hydration cursor to a previously-snapshotted node. Used by
+* `@try`/`@catch`: if the try branch throws partway through its hydration
+* walk, the catch branch must resume hydrating from where the try group
+* started, not from wherever the failed branch left the cursor.
+*
+* The cursor is set unconditionally: a failed try-branch build can walk the
+* cursor past the last node (setting it to `null` via `nodeNext`), and the
+* rewind must still restore it — otherwise the catch branch would think it
+* isn't hydrating and insert fresh nodes alongside the server's. When not
+* hydrating at all, the snapshot itself is `null`, so this is a no-op.
+*
+* @param node The snapshotted cursor node (from `saveHydration`).
+*/
+function restoreHydration(node) {
+	context.hydrationNode = node;
+}
+//#endregion
+//#region src/render/widenAncestorsAtAnchor.ts
+/**
+* Widens ancestor region node windows after a control re-run rendered
+* content at its anchor.
+*
+* A region that owns only a control's anchor comment captures
+* `startNode = endNode = anchor` when it mounts (e.g. a `@for` row whose
+* body is a single `@if`, or an outer `@if` whose body is a single control).
+* Content rendered by a LATER re-run of that control is inserted into the
+* live DOM just BEFORE the anchor — outside that window — so clearing the
+* owning region would remove only the anchor and orphan the branch content.
+* At mount time this can't happen (content is added to the region's detached
+* fragment first, so its `startNode` already covers it), which is why only
+* re-runs need this fix.
+*
+* The first node of the newly rendered content is the first DESCENDANT region
+* of the control that owns nodes (control regions themselves have null
+* `startNode`). Ancestors are the regions with strictly decreasing depth on
+* the `previousRegion` chain; only those whose window starts exactly at the
+* anchor are widened.
+*/
+function widenAncestorsAtAnchor(region, anchor) {
+	if (anchor === null) return;
+	let child = region.nextRegion;
+	while (child !== null && child.depth > region.depth && child.startNode === null) child = child.nextRegion;
+	if (child === null || child.depth <= region.depth || child.startNode === anchor) return;
+	const firstNode = child.startNode;
+	let ancestor = region.previousRegion;
+	let ancestorDepth = region.depth;
+	while (ancestor !== null && ancestor.depth < ancestorDepth) {
+		if (ancestor.startNode === anchor) ancestor.startNode = firstNode;
+		ancestorDepth = ancestor.depth;
+		ancestor = ancestor.previousRegion;
+	}
+}
 //#endregion
 //#region src/render/runControl.ts
 /**
@@ -791,92 +1393,136 @@ function nodeSkip(node, count) {
 */
 function runControl(region, anchor, create, name) {
 	let first = true;
-	$run(function runControl$1() {
+	const gen = region.generation = (region.generation ?? 0) + 1;
+	$run(function runControl() {
+		if (region.generation !== gen) return;
+		if (region.depth === -2) region.recreate = true;
 		const oldRegion = pushRegion(region, first);
 		first = false;
 		create(anchor);
 		popRegion(oldRegion);
+		widenAncestorsAtAnchor(region, anchor);
+		if (context.hydrationNode !== null && anchor !== null) context.hydrationNode = anchor;
 	}, name);
-	if (context_default.hydrationNode) anchor = context_default.hydrationNode.nextSibling;
 }
-
 //#endregion
 //#region src/render/runControlBranch.ts
 function runControlBranch(region, oldIndex, index) {
-	if (oldIndex === index) return false;
-	if (region.depth === -2) return false;
-	if (region.nextRegion !== null && region.nextRegion.depth > region.depth) clearRegion(region.nextRegion);
+	const recreate = region.recreate;
+	if (recreate) region.recreate = false;
+	const firstRender = region.hasRenderedBranch !== true;
+	region.hasRenderedBranch = true;
+	if (oldIndex === index) {
+		if (recreate) {
+			if (region.nextRegion !== null && region.nextRegion.depth > region.depth) clearRegion(region.nextRegion);
+			return true;
+		}
+		return false;
+	}
+	if (!firstRender && region.nextRegion !== null && region.nextRegion.depth > region.depth) clearRegion(region.nextRegion);
 	return true;
 }
-
 //#endregion
-//#region src/watch/propagateSignal.ts
+//#region src/watch/deepWrap.ts
 /**
-* When a signal is changed, we need to
-* - Set the signal's subscriptions to recalc
-* - Set any dependent computed values to recalc
-* - Gather dependent effects that will need to be re-run
+* Wraps a value with `$watch` if it is a plain object (or Date/Map/Set) that
+* is not already watched and is not a promise. Returns the value unchanged
+* otherwise.
+*
+* Used by the `get` trap (wrap values on read) and the `set` trap (wrap
+* values on write), so a value stored in watched state is reactive whether
+* it's been read yet or not.
+*/
+const proxyCache = /* @__PURE__ */ new WeakMap();
+function deepWrap(value) {
+	if (value === void 0 || value === null || typeof value !== "object") return value;
+	if (value[proxyDataSymbol] !== void 0) return proxyCache.get(value) ?? value;
+	if (value.then !== void 0) return value;
+	if (value.nodeType !== void 0) return value;
+	const cached = proxyCache.get(value);
+	if (cached !== void 0) return cached;
+	const proxy = $watch(value);
+	proxyCache.set(value, proxy);
+	return proxy;
+}
+//#endregion
+//#region src/watch/propagateSignal.ts
+/**
+* Walk the target graph from a signal source (ProxySignal or Computed),
+* marking each dependent as needing recalculation and queuing effects for
+* re-run. Shared between `propagateSignal` (for proxy writes) and `$async`'s
+* promise-resolve handler (for async value resolution).
+*
+* Must be called inside `batchStart`/`batchEnd` — callers own the batch.
+*/
+function propagateFromSignal(signal) {
+	const first = signal.firstTarget;
+	if (first === null) return;
+	let targetSub = first;
+	let computed;
+	outer: while (true) {
+		targetSub.active = false;
+		targetSub.recalc = true;
+		const target = targetSub.target;
+		if (target.type === 2) {
+			if (!target.queued) {
+				target.queued = true;
+				context.effectsToRun.push(target);
+			}
+		} else if (!target.recalc) {
+			target.recalc = true;
+			if (target.firstTarget !== null) {
+				computed = target;
+				computed.rollback = targetSub;
+				targetSub = target.firstTarget;
+				continue;
+			}
+		}
+		while (targetSub.nextTarget === null && computed !== void 0) {
+			const rollback = computed.rollback;
+			if (rollback === null) break;
+			targetSub = rollback;
+			if (targetSub.source.type !== 1) {
+				computed = void 0;
+				continue outer;
+			}
+			computed = targetSub.source;
+		}
+		if (targetSub.nextTarget === null) break;
+		targetSub = targetSub.nextTarget;
+	}
+}
+/**
+* When a signal is changed, we need to
+* - Set the signal's subscriptions to recalc
+* - Set any dependent computed values to recalc
+* - Gather dependent effects that will need to be re-run
 */
 function propagateSignal(proxy, key) {
 	let signal = proxy.signals.get(key);
 	if (signal !== void 0 && signal.firstTarget !== null) {
 		batchStart();
 		try {
-			if (context_default.firstSignalToUpdate === null) context_default.firstSignalToUpdate = signal;
-			else if (signal.nextSignalToUpdate === null) {
-				let lastSignal = context_default.firstSignalToUpdate;
-				while (lastSignal.nextSignalToUpdate !== null) lastSignal = lastSignal.nextSignalToUpdate;
-				lastSignal.nextSignalToUpdate = signal;
-			}
-			let lastEffect = context_default.firstEffectToRun;
-			if (lastEffect !== null) while (lastEffect.nextEffectToRun !== null) lastEffect = lastEffect.nextEffectToRun;
-			let targetSub = signal.firstTarget;
-			let computed;
-			outer: while (true) {
-				targetSub.active = false;
-				targetSub.recalc = true;
-				const target = targetSub.target;
-				if (target.type === EFFECT_TYPE) {
-					if (lastEffect === null) {
-						context_default.firstEffectToRun = target;
-						lastEffect = target;
-					} else if (target.nextEffectToRun === null && lastEffect !== target) {
-						lastEffect.nextEffectToRun = target;
-						lastEffect = target;
-					}
-				} else if (!target.recalc) {
-					target.recalc = true;
-					if (target.firstTarget !== null) {
-						computed = target;
-						computed.rollback = targetSub;
-						targetSub = target.firstTarget;
-						continue;
-					}
-				}
-				while (targetSub.nextTarget === null && computed !== void 0) {
-					targetSub = computed.rollback;
-					if (targetSub.source.type !== COMPUTED_TYPE) {
-						computed = void 0;
-						continue outer;
-					}
-					computed = targetSub.source;
-				}
-				if (targetSub.nextTarget === null) break;
-				targetSub = targetSub.nextTarget;
+			if (context.lastSignalToUpdate === null) {
+				context.firstSignalToUpdate = signal;
+				context.lastSignalToUpdate = signal;
+			} else if (signal.nextSignalToUpdate === null) {
+				context.lastSignalToUpdate.nextSignalToUpdate = signal;
+				context.lastSignalToUpdate = signal;
 			}
+			propagateFromSignal(signal);
 		} finally {
 			batchEnd();
 		}
 	}
 }
-
 //#endregion
 //#region src/watch/trackProxySignal.ts
 function trackProxySignal(data, key) {
 	let signal = data.signals.get(key);
 	if (signal === void 0) {
 		signal = {
-			type: SIGNAL_TYPE,
+			type: 0,
 			firstTarget: null,
 			nextSignalToUpdate: null
 		};
@@ -884,12 +1530,53 @@ function trackProxySignal(data, key) {
 	}
 	trackSignal(signal);
 }
-
 //#endregion
 //#region src/watch/proxyGet.ts
+/**
+* Called when a read hits a `didSuspend` computed. Subscribes the reader (so
+* resolve re-runs it through the normal reactive graph), propagates the
+* suspend up the cache chain by tainting the active reader, and notifies the
+* nearest `@await` boundary.
+*
+* Return value (stale-while-revalidate, ASYNC.md §6.2): on a refresh suspend
+* (the computed has resolved before) returns the previously resolved value
+* held in `staleValue`, so readers keep displaying the old content instead of
+* a placeholder — an `@await` boundary thus keeps its content mounted
+* rather than flashing the `with` branch. On a first load (`staleValue` is
+* undefined) returns `undefined`, which the boundary replaces with its
+* `with` branch. In peek mode (used by `$pending`) always returns `undefined`
+* — the value isn't needed, only the subscription.
+*/
+function suspendRead(signal) {
+	trackSignal(signal);
+	if (context.suspendPeek) {
+		if (!signal.suspendQuiet) context.suspendPeekHit = true;
+		return;
+	}
+	if (context.activeTarget !== null) {
+		context.activeTarget.didSuspend = true;
+		if (context.activeTarget.type === 2) {
+			const effect = context.activeTarget;
+			(effect.suspendSources ??= /* @__PURE__ */ new Set()).add(signal);
+		}
+	}
+	if (context.awaitBoundary !== null) {
+		context.awaitBoundary.suspended = true;
+		context.awaitBoundary.pending.add(signal);
+		const boundaryEffect = context.awaitBoundary.effect;
+		if (boundaryEffect !== null && boundaryEffect !== context.activeTarget) {
+			const oldActive = context.activeTarget;
+			context.activeTarget = boundaryEffect;
+			trackSignal(signal);
+			context.activeTarget = oldActive;
+		}
+	}
+	return signal.staleValue;
+}
 function proxyGet(target, key, receiver) {
 	let data = target[proxyDataSymbol];
 	if (key === proxyDataSymbol) return data;
+	if ((data.isDate || data.isMap || data.isSet) && !Object.prototype.hasOwnProperty.call(target, key)) return collectionGet(data, target, key, receiver);
 	let signal = data.signals.get(key);
 	if (signal === void 0) {
 		const propDescriptor = Object.getOwnPropertyDescriptor(target, key);
@@ -897,38 +1584,92 @@ function proxyGet(target, key, receiver) {
 			if (propDescriptor.writable) {
 				if (data.shallow !== true) {
 					const value = target[key];
-					if (value !== void 0 && value !== null && typeof value === "object" && value[proxyDataSymbol] === void 0 && value.then === void 0) target[key] = $watch(value);
+					const wrapped = deepWrap(value);
+					if (wrapped !== value) target[key] = wrapped;
 				}
 				trackProxySignal(data, key);
 			} else if (propDescriptor.get) {
-				const oldRegisterComputed = context_default.registerComputed;
+				const oldRegisterComputed = context.registerComputed;
 				try {
-					context_default.registerComputed = (computed) => {
+					context.registerComputed = (computed) => {
 						data.signals.set(key, computed);
 					};
-					return Reflect.get(target, key, receiver);
+					const result = Reflect.get(target, key, receiver);
+					const registered = data.signals.get(key);
+					if (context.refreshSignals !== null && registered !== void 0 && registered.type === 1 && registered.isAsync) {
+						context.refreshSignals.push(registered);
+						context.refreshInitialized?.add(registered);
+					}
+					if (registered !== void 0 && registered.type === 1 && registered.didSuspend) return suspendRead(registered);
+					return result;
 				} finally {
-					context_default.registerComputed = oldRegisterComputed;
+					context.registerComputed = oldRegisterComputed;
 				}
 			}
 		} else if (data.isArray) {
 			if (arrayWrapper[key] !== void 0) return arrayWrapper[key](data, target, key);
 		} else trackProxySignal(data, key);
-	} else if (signal.type === SIGNAL_TYPE) trackProxySignal(data, key);
-	else if (signal.type === COMPUTED_TYPE) {
+	} else if (signal.type === 0) {
+		if (data.shallow !== true) {
+			const value = target[key];
+			if (typeof value === "object" && value !== null) {
+				const propDescriptor = Object.getOwnPropertyDescriptor(target, key);
+				if (propDescriptor !== void 0 && propDescriptor.writable) {
+					const wrapped = deepWrap(value);
+					if (wrapped !== value) target[key] = wrapped;
+				}
+			}
+		}
+		trackProxySignal(data, key);
+	} else if (signal.type === 1) {
+		if (context.refreshSignals !== null && signal.isAsync) {
+			context.refreshSignals.push(signal);
+			return signal.value;
+		}
 		if (signal.running) throw new Error("Cycle detected");
 		else if (signal.recalc) checkComputed(signal);
-		else if (signal.didError) throw signal.value;
-		else trackSignal(signal);
+		if (signal.didError) {
+			trackSignal(signal);
+			throw signal.value;
+		}
+		if (signal.didSuspend) return suspendRead(signal);
+		trackSignal(signal);
 		return signal.value;
 	}
-	return Reflect.get(target, key, receiver);
+	return target[key];
 }
 const arrayWrapper = {
-	[Symbol.iterator]: function(data, target, key) {
+	[Symbol.iterator]: function(data, target, _key) {
 		trackProxySignal(data, "length");
-		context_default.activeTarget = null;
-		return target[key];
+		context.activeTarget = null;
+		return function arrayIterator() {
+			let index = 0;
+			return {
+				next() {
+					if (index >= target.length) return {
+						value: void 0,
+						done: true
+					};
+					let value = target[index];
+					if (data.shallow !== true) {
+						const wrapped = deepWrap(value);
+						if (wrapped !== value) {
+							value = wrapped;
+							target[index] = value;
+						}
+					}
+					trackProxySignal(data, String(index));
+					index++;
+					return {
+						value,
+						done: false
+					};
+				},
+				[Symbol.iterator]() {
+					return this;
+				}
+			};
+		};
 	},
 	pop: arrayHandle,
 	push: arrayHandle,
@@ -936,8 +1677,35 @@ const arrayWrapper = {
 	shift: arrayHandle,
 	sort: arrayHandle,
 	splice: arrayHandle,
-	unshift: arrayHandle
+	unshift: arrayHandle,
+	slice: readHandle,
+	concat: readHandle,
+	filter: readHandle,
+	map: readHandle,
+	toReversed: readHandle,
+	toSorted: readHandle,
+	toSpliced: readHandle,
+	indexOf: readHandle,
+	lastIndexOf: readHandle,
+	includes: readHandle,
+	find: readHandle,
+	findIndex: readHandle,
+	some: readHandle,
+	every: readHandle,
+	join: readHandle,
+	forEach: readHandle,
+	reduce: readHandle,
+	reduceRight: readHandle,
+	flat: readHandle,
+	flatMap: readHandle,
+	at: readHandle
 };
+function readHandle(data, target, key) {
+	return function(...args) {
+		trackProxySignal(data, "length");
+		return target[key].apply(target, args);
+	};
+}
 function arrayHandle(data, target, key) {
 	return function(...args) {
 		const result = target[key].apply(target, args);
@@ -945,27 +1713,254 @@ function arrayHandle(data, target, key) {
 		return result;
 	};
 }
-
+const COLLECTION_KEY = Symbol("torp.collection");
+const TIME_KEY = "#time";
+/**
+* Routes a `get` on a watched Date/Map/Set to the right wrapper handler.
+*
+* Note the two levels of indirection for methods: the handler runs at get-trap
+* time (returning the method to call), and the returned function runs when the
+* method is invoked. `size` is the exception -- it returns its value at
+* get-trap time, because it's a readonly property, not a method.
+*/
+function collectionGet(data, target, key, receiver) {
+	if (data.isDate) return dateGet(data, target, key);
+	const handle = (data.isMap ? mapWrapper : setWrapper)[key];
+	if (handle !== void 0) return handle(data, target, key, receiver);
+	return target[key];
+}
+/**
+* Returns the signal key for a Map/Set operation: primitives get a per-key
+* signal, so reading one key doesn't re-run effects when an unrelated key
+* changes. Anything else shares the collection-wide signal.
+*/
+function collectionKey(key) {
+	const type = typeof key;
+	return type === "string" || type === "number" || type === "symbol" ? key : COLLECTION_KEY;
+}
+/**
+* Propagates a Map/Set mutation: the per-key signal (when the key is a
+* primitive) plus the collection-wide signal. The collection signal is always
+* enough for object keys, and propagating the same signal twice would re-run
+* effects twice (they re-subscribe between flushes).
+*/
+function propagateCollection(data, key) {
+	if (key !== COLLECTION_KEY) propagateSignal(data, key);
+	propagateSignal(data, COLLECTION_KEY);
+}
+function dateGet(data, target, key) {
+	if (typeof key === "symbol") {
+		if (key === Symbol.toPrimitive) return function(hint) {
+			const result = target[Symbol.toPrimitive](hint);
+			trackProxySignal(data, TIME_KEY);
+			return result;
+		};
+		return target[key];
+	}
+	if (typeof key !== "string") return target[key];
+	const value = target[key];
+	if (typeof value !== "function") return value;
+	if (key.startsWith("set")) return function(...args) {
+		const before = target.getTime();
+		const result = value.apply(target, args);
+		if (target.getTime() !== before) propagateSignal(data, TIME_KEY);
+		return result;
+	};
+	if (key.startsWith("get") || key.startsWith("to") || key === "valueOf") return function(...args) {
+		const result = value.apply(target, args);
+		trackProxySignal(data, TIME_KEY);
+		return result;
+	};
+	return value;
+}
+const mapWrapper = {
+	size: function(data, target) {
+		trackProxySignal(data, COLLECTION_KEY);
+		return target.size;
+	},
+	get: function(data, target) {
+		return function(key) {
+			key = $unwrap(key);
+			trackProxySignal(data, collectionKey(key));
+			const value = target.get(key);
+			if (data.shallow !== true) {
+				const wrapped = deepWrap(value);
+				if (wrapped !== value) target.set(key, wrapped);
+				return wrapped;
+			}
+			return value;
+		};
+	},
+	has: function(data, target) {
+		return function(key) {
+			key = $unwrap(key);
+			trackProxySignal(data, collectionKey(key));
+			return target.has(key);
+		};
+	},
+	set: function(data, target, _key, receiver) {
+		return function(key, value) {
+			key = $unwrap(key);
+			if (target.has(key) && $unwrap(target.get(key)) === $unwrap(value)) return receiver ?? target;
+			const result = target.set(key, value);
+			propagateCollection(data, collectionKey(key));
+			return receiver ?? result;
+		};
+	},
+	delete: function(data, target) {
+		return function(key) {
+			key = $unwrap(key);
+			const result = target.delete(key);
+			propagateCollection(data, collectionKey(key));
+			return result;
+		};
+	},
+	clear: function(data, target) {
+		return function() {
+			const result = target.clear();
+			batchStart();
+			try {
+				for (const key of data.signals.keys()) propagateSignal(data, key);
+			} finally {
+				batchEnd();
+			}
+			return result;
+		};
+	},
+	keys: function(data, target) {
+		return function() {
+			trackProxySignal(data, COLLECTION_KEY);
+			return [...target.keys()][Symbol.iterator]();
+		};
+	},
+	values: function(data, target) {
+		return function() {
+			trackProxySignal(data, COLLECTION_KEY);
+			let values = [...target.values()];
+			if (data.shallow !== true) values = values.map(deepWrap);
+			return values[Symbol.iterator]();
+		};
+	},
+	entries: mapEntries,
+	[Symbol.iterator]: mapEntries,
+	forEach: function(data, target, _key, receiver) {
+		return function(callback, thisArg) {
+			trackProxySignal(data, COLLECTION_KEY);
+			const wrap = data.shallow !== true;
+			target.forEach((value, key) => {
+				callback.call(thisArg, wrap ? deepWrap(value) : value, key, receiver ?? target);
+			});
+		};
+	}
+};
+function mapEntries(data, target) {
+	return function() {
+		trackProxySignal(data, COLLECTION_KEY);
+		const wrap = data.shallow !== true;
+		return [...target.entries()].map((entry) => [entry[0], wrap ? deepWrap(entry[1]) : entry[1]])[Symbol.iterator]();
+	};
+}
+const setWrapper = {
+	size: function(data, target) {
+		trackProxySignal(data, COLLECTION_KEY);
+		return target.size;
+	},
+	has: function(data, target) {
+		return function(value) {
+			value = $unwrap(value);
+			trackProxySignal(data, collectionKey(value));
+			return target.has(value);
+		};
+	},
+	add: function(data, target, _key, receiver) {
+		return function(value) {
+			value = $unwrap(value);
+			if (target.has(value)) return receiver ?? target;
+			const result = target.add(value);
+			propagateCollection(data, collectionKey(value));
+			return receiver ?? result;
+		};
+	},
+	delete: function(data, target) {
+		return function(value) {
+			value = $unwrap(value);
+			const result = target.delete(value);
+			propagateCollection(data, collectionKey(value));
+			return result;
+		};
+	},
+	clear: function(data, target) {
+		return function() {
+			const result = target.clear();
+			batchStart();
+			try {
+				for (const key of data.signals.keys()) propagateSignal(data, key);
+			} finally {
+				batchEnd();
+			}
+			return result;
+		};
+	},
+	keys: setValues,
+	values: setValues,
+	[Symbol.iterator]: setValues,
+	entries: setEntries,
+	forEach: function(data, target, _key, receiver) {
+		return function(callback, thisArg) {
+			trackProxySignal(data, COLLECTION_KEY);
+			const wrap = data.shallow !== true;
+			target.forEach((value) => {
+				const wrapped = wrap ? deepWrap(value) : value;
+				callback.call(thisArg, wrapped, wrapped, receiver ?? target);
+			});
+		};
+	}
+};
+function setValues(data, target) {
+	return function() {
+		trackProxySignal(data, COLLECTION_KEY);
+		let values = [...target.values()];
+		if (data.shallow !== true) values = values.map(deepWrap);
+		return values[Symbol.iterator]();
+	};
+}
+function setEntries(data, target) {
+	return function() {
+		trackProxySignal(data, COLLECTION_KEY);
+		const wrap = data.shallow !== true;
+		return [...target.values()].map((value) => {
+			const wrapped = wrap ? deepWrap(value) : value;
+			return [wrapped, wrapped];
+		})[Symbol.iterator]();
+	};
+}
 //#endregion
 //#region src/watch/proxySet.ts
 function proxySet(target, key, value, receiver) {
 	const oldValue = target[key];
 	if (value !== oldValue) {
-		if (context_default.batchOperation > 100) throw new Error("Cycle detected");
+		if (context.batchOperation > 100) throw new Error("Cycle detected");
 		let data = target[proxyDataSymbol];
-		devContext_default.signalSet(data, key);
-		if (oldValue && oldValue[proxyDataSymbol] !== void 0) value = $watch(value, { shallow: oldValue[proxyDataSymbol].shallow });
+		devContext.signalSet(data, key);
+		if (data.shallow !== true) value = deepWrap(value);
 		Reflect.set(target, key, value, receiver);
 		propagateSignal(data, key);
-		if (data.isArray && !isNaN(+String(key))) propagateSignal(data, "length");
+		if (data.isArray && typeof key !== "symbol" && !isNaN(+key)) propagateSignal(data, "length");
 	}
 	return true;
 }
-
 //#endregion
 //#region src/watch/$watch.ts
+const sharedHandler = {
+	get: proxyGet,
+	set: proxySet
+};
 /**
-* Watches an object and runs effects when its properties are changed
+* Watches an object and runs effects when its properties are changed.
+*
+* Dates, Maps and Sets are supported too: their methods are reactive (reads
+* track, writes notify), so `new Date()`, `new Map()` and `new Set()` can be
+* used in watched state directly.
 *
 * @param object The object to watch
 */
@@ -974,19 +1969,75 @@ function $watch(object, options) {
 	const data = {
 		target: object,
 		isArray: Array.isArray(object),
+		isDate: object instanceof Date,
+		isMap: object instanceof Map,
+		isSet: object instanceof Set,
 		shallow: options?.shallow === true,
 		signals: /* @__PURE__ */ new Map()
 	};
-	object[proxyDataSymbol] = data;
-	const handler = {
-		get: proxyGet,
-		set: proxySet
-	};
-	const proxy = new Proxy(object, handler);
-	devContext_default.onWatch(data);
+	Object.defineProperty(object, proxyDataSymbol, {
+		value: data,
+		writable: true,
+		enumerable: false,
+		configurable: true
+	});
+	const proxy = new Proxy(object, sharedHandler);
+	devContext.onWatch(data);
 	return proxy;
 }
-
+//#endregion
+//#region src/render/getSequence.ts
+/**
+* Computes the indices (into `arr`) of a longest strictly-increasing
+* subsequence, skipping zero entries. Adapted from Vue 3's `getSequence`.
+*
+* Used by the keyed-list reconciler (`runListItems`): `arr` is the
+* `newIndexToOldIndex` map where `arr[i] = oldIndex + 1` (so `0` marks a
+* new/unmounted slot, which is skipped). The returned indices identify the
+* items that are already in correct relative order and therefore don't need
+* to be moved — everything else is moved or mounted.
+*
+* Runs in O(n log n).
+*/
+function getSequence(arr) {
+	const p = arr.slice();
+	const result = [0];
+	let i;
+	let j;
+	let u;
+	let v;
+	let c;
+	const len = arr.length;
+	for (i = 0; i < len; i++) {
+		const arrI = arr[i];
+		if (arrI !== 0) {
+			j = result[result.length - 1];
+			if (arr[j] < arrI) {
+				p[i] = j;
+				result.push(i);
+				continue;
+			}
+			u = 0;
+			v = result.length - 1;
+			while (u < v) {
+				c = u + v >> 1;
+				if (arr[result[c]] < arrI) u = c + 1;
+				else v = c;
+			}
+			if (arrI < arr[result[u]]) {
+				if (u > 0) p[i] = result[u - 1];
+				result[u] = i;
+			}
+		}
+	}
+	u = result.length;
+	v = result[u - 1];
+	while (u-- > 0) {
+		result[u] = v;
+		v = p[v];
+	}
+	return result;
+}
 //#endregion
 //#region src/render/moveRegion.ts
 function moveRegion(parent, region, before) {
@@ -1000,145 +2051,416 @@ function moveRegion(parent, region, before) {
 		currentNode = nextNode;
 	}
 }
-
 //#endregion
 //#region src/render/runListItems.ts
+const SHALLOW_WATCH_OPTIONS = { shallow: true };
 /**
+* Mounts a new list item from a spec: allocates the ListItem, establishes it
+* as the active region (so the compiler-emitted `create` callback attaches
+* effects/events to the right region), sets its depth, optionally wraps its
+* data in a shallow watch, then runs `create`. Returns the mounted item so the
+* caller can slot it into the live list. The sibling chain is left for the
+* end-of-pass relink.
+*/
+function mountSpec(spec, region, before, create, noWatch) {
+	const item = newListItem(spec.data, spec.key);
+	const savedActiveRegion = context.activeRegion;
+	item.depth = region.depth + 1;
+	context.activeRegion = item;
+	if (noWatch !== true) item.data = $watch(item.data, SHALLOW_WATCH_OPTIONS);
+	create(item, before);
+	context.activeRegion = savedActiveRegion;
+	return item;
+}
+/**
+* Reconciles an old keyed list against a new keyed list, reusing old
+* ListItems for survivors and producing the minimal set of DOM moves /
+* mounts / clears.
+*
+* @returns The new live list of ListItems (reused old items + freshly
+*   mounted ones), which the caller keeps for the next reconciliation.
+*
 * @param region The list's region
 * @param parent The parent DOM element
-* @param anchor The DOM element to create new items before
-* @param oldItems The list of current items
-* @param newItems The list of future items
+* @param anchor The DOM node to create new items before (the list's trailing anchor)
+* @param oldItems The list of current (live) items from the previous run
+* @param newSpecs The lightweight {key, data} specs for the new data
 * @param create A function that creates the DOM elements for a new item
+* @param update A function that syncs a matched item's data from its spec
+*   (re-runs effects if a loop variable's reference actually changed)
+* @param noWatch When true, skip the per-item shallow `$watch` wrap. The
+*   compiler guarantees the `@for` body never writes to its loop variables,
+*   and emits an `update` callback that re-runs item effects manually when a
+*   loop variable's reference actually changes (via `t_rerun_region_effects`).
 */
-function runListItems(region, parent, anchor, oldItems, newItems, create, update) {
-	let oldStartIndex = 0;
-	let oldEndIndex = oldItems.length - 1;
-	let oldStartItem = oldItems[0];
-	let oldEndItem = oldItems[oldEndIndex];
-	let newStartIndex = 0;
-	let newEndIndex = newItems.length - 1;
-	let newStartItem = newItems[0];
-	let newEndItem = newItems[newEndIndex];
-	let oldKeyToIndex;
-	let newKeyToIndex;
-	while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) if (oldStartItem === null) oldStartItem = oldItems[++oldStartIndex];
-	else if (oldEndItem === null) oldEndItem = oldItems[--oldEndIndex];
-	else if (newStartItem === null) newStartItem = newItems[++newStartIndex];
-	else if (newEndItem === null) newEndItem = newItems[--newEndIndex];
-	else if (oldStartItem.key === newStartItem.key) {
-		transferListItemData(oldStartItem, newStartItem, update);
-		oldStartItem = oldItems[++oldStartIndex];
-		newStartItem = newItems[++newStartIndex];
-	} else if (oldEndItem.key === newEndItem.key) {
-		transferListItemData(oldEndItem, newEndItem, update);
-		oldEndItem = oldItems[--oldEndIndex];
-		newEndItem = newItems[--newEndIndex];
-	} else if (oldStartItem.key === newEndItem.key) {
-		moveRegion(parent, oldStartItem, oldEndItem.endNode.nextSibling);
-		transferListItemData(oldStartItem, newEndItem, update);
-		oldStartItem = oldItems[++oldStartIndex];
-		newEndItem = newItems[--newEndIndex];
-	} else if (oldEndItem.key === newStartItem.key) {
-		moveRegion(parent, oldEndItem, oldStartItem.startNode);
-		transferListItemData(oldEndItem, newStartItem, update);
-		oldEndItem = oldItems[--oldEndIndex];
-		newStartItem = newItems[++newStartIndex];
-	} else {
-		if (oldKeyToIndex === void 0 || newKeyToIndex === void 0) {
-			oldKeyToIndex = /* @__PURE__ */ new Map();
-			for (let i = oldStartIndex; i < oldEndIndex; i++) oldKeyToIndex.set(oldItems[i].key, i);
-			newKeyToIndex = /* @__PURE__ */ new Map();
-			for (let i = newStartIndex; i < newEndIndex; i++) newKeyToIndex.set(newItems[i].key, i);
+function runListItems(region, parent, anchor, oldItems, newSpecs, create, update, noWatch) {
+	const newItems = Array.from({ length: newSpecs.length });
+	let nextSibling;
+	if (oldItems.length > 0) {
+		const lastOld = oldItems[oldItems.length - 1];
+		nextSibling = lastOld.nextRegion;
+		while (nextSibling !== null && nextSibling.depth > lastOld.depth) nextSibling = nextSibling.nextRegion;
+	} else nextSibling = region.nextRegion;
+	let oldStart = 0;
+	let oldEnd = oldItems.length - 1;
+	let newStart = 0;
+	let newEnd = newSpecs.length - 1;
+	let chainNeedsRelink = false;
+	while (oldStart <= oldEnd && newStart <= newEnd) if (oldItems[oldStart].key === newSpecs[newStart].key) {
+		const item = oldItems[oldStart];
+		update(item, newSpecs[newStart]);
+		newItems[newStart] = item;
+		oldStart++;
+		newStart++;
+	} else if (oldItems[oldEnd].key === newSpecs[newEnd].key) {
+		const item = oldItems[oldEnd];
+		update(item, newSpecs[newEnd]);
+		newItems[newEnd] = item;
+		oldEnd--;
+		newEnd--;
+	} else if (oldItems[oldStart].key === newSpecs[newEnd].key) {
+		const item = oldItems[oldStart];
+		moveRegion(parent, item, oldItems[oldEnd].endNode?.nextSibling ?? anchor);
+		chainNeedsRelink = true;
+		update(item, newSpecs[newEnd]);
+		newItems[newEnd] = item;
+		oldStart++;
+		newEnd--;
+	} else if (oldItems[oldEnd].key === newSpecs[newStart].key) {
+		const item = oldItems[oldEnd];
+		moveRegion(parent, item, oldItems[oldStart].startNode);
+		chainNeedsRelink = true;
+		update(item, newSpecs[newStart]);
+		newItems[newStart] = item;
+		oldEnd--;
+		newStart++;
+	} else break;
+	if (oldStart > oldEnd && newStart <= newEnd) {
+		const before = newEnd + 1 < newSpecs.length ? newItems[newEnd + 1].startNode : anchor;
+		for (let i = newStart; i <= newEnd; i++) newItems[i] = mountSpec(newSpecs[i], region, before, create, noWatch);
+		chainNeedsRelink = true;
+	} else if (newStart > newEnd) for (let i = oldStart; i <= oldEnd; i++) clearRegion(oldItems[i]);
+	else {
+		const newKeyToIndex = /* @__PURE__ */ new Map();
+		for (let i = newStart; i <= newEnd; i++) newKeyToIndex.set(newSpecs[i].key, i);
+		let anyOverlap = false;
+		for (let i = oldStart; i <= oldEnd; i++) if (newKeyToIndex.has(oldItems[i].key)) {
+			anyOverlap = true;
+			break;
 		}
-		let oldIndex = oldKeyToIndex.get(newStartItem.key);
-		let newIndex = newKeyToIndex.get(oldStartItem.key);
-		if (oldIndex === void 0 && newIndex === void 0) {
-			const oldRegion = pushRegion(newStartItem, true);
-			newStartItem.data = $watch(newStartItem.data, { shallow: true });
-			create(newStartItem, oldStartItem.startNode);
-			popRegion(oldRegion);
-			newStartItem.previousRegion = oldStartItem.previousRegion;
-			newStartItem.nextRegion = oldStartItem;
-			oldStartItem.previousRegion = newStartItem;
-			clearRegion(oldStartItem);
-			oldStartItem = oldItems[++oldStartIndex];
-			newStartItem = newItems[++newStartIndex];
-		} else if (oldIndex === void 0) {
-			const oldRegion = pushRegion(newStartItem, true);
-			newStartItem.data = $watch(newStartItem.data, { shallow: true });
-			create(newStartItem, oldStartItem.startNode);
-			popRegion(oldRegion);
-			newStartItem = newItems[++newStartIndex];
-		} else if (newIndex === void 0) {
-			clearRegion(oldStartItem);
-			oldStartItem = oldItems[++oldStartIndex];
+		if (!anyOverlap) {
+			let before = oldItems[oldEnd]?.endNode?.nextSibling ?? anchor;
+			for (let i = oldEnd; i >= oldStart; i--) clearRegion(oldItems[i]);
+			for (let i = newStart; i <= newEnd; i++) {
+				newItems[i] = mountSpec(newSpecs[i], region, before, create, noWatch);
+				before = newItems[i].endNode.nextSibling;
+			}
+			chainNeedsRelink = true;
 		} else {
-			const oldData = oldItems[oldIndex];
-			moveRegion(parent, oldData, oldStartItem.startNode);
-			transferListItemData(oldData, newStartItem, update);
-			oldItems[oldIndex] = null;
-			newStartItem = newItems[++newStartIndex];
+			const newMidLen = newEnd - newStart + 1;
+			const newIndexToOld = Array.from({ length: newMidLen }).fill(0);
+			for (let i = oldStart; i <= oldEnd; i++) {
+				const oldItem = oldItems[i];
+				const newIdx = newKeyToIndex.get(oldItem.key);
+				if (newIdx !== void 0) {
+					newIndexToOld[newIdx - newStart] = i + 1;
+					update(oldItem, newSpecs[newIdx]);
+					newItems[newIdx] = oldItem;
+				} else clearRegion(oldItem);
+			}
+			const seq = getSequence(newIndexToOld);
+			let j = seq.length - 1;
+			for (let i = newMidLen - 1; i >= 0; i--) {
+				const newIdx = newStart + i;
+				const before = newIdx + 1 < newSpecs.length ? newItems[newIdx + 1].startNode : anchor;
+				if (newIndexToOld[i] === 0) {
+					newItems[newIdx] = mountSpec(newSpecs[newIdx], region, before, create, noWatch);
+					chainNeedsRelink = true;
+				} else if (j < 0 || i !== seq[j]) {
+					moveRegion(parent, newItems[newIdx], before);
+					chainNeedsRelink = true;
+				} else j--;
+			}
 		}
 	}
-	if (oldStartIndex <= oldEndIndex || newStartIndex <= newEndIndex) if (oldStartIndex > oldEndIndex) {
-		let before = oldStartItem?.startNode ?? oldItems[oldItems.length - 1]?.endNode?.nextSibling ?? anchor;
-		for (; newStartIndex <= newEndIndex; newStartItem = newItems[++newStartIndex]) {
-			const oldRegion = pushRegion(newStartItem, true);
-			newStartItem.data = $watch(newStartItem.data, { shallow: true });
-			create(newStartItem, before);
-			popRegion(oldRegion);
-			before = newStartItem.endNode.nextSibling;
+	if (!chainNeedsRelink && newItems.length > 0) {
+		let lastRegion = newItems[newItems.length - 1];
+		let next = lastRegion.nextRegion;
+		while (next !== null && next.depth > lastRegion.depth) {
+			lastRegion = next;
+			next = next.nextRegion;
 		}
-	} else for (; oldEndIndex >= oldStartIndex; oldStartItem = oldItems[oldEndIndex--]) clearRegion(oldStartItem);
-	if (newItems.length > 0) region.nextRegion = newItems[0];
-	else if (oldItems.length > 0) region.nextRegion = oldItems[oldItems.length - 1].nextRegion;
-}
-function transferListItemData(oldItem, newItem, update) {
-	newItem.startNode = oldItem.startNode;
-	newItem.endNode = oldItem.endNode;
-	update(oldItem, newItem);
-	newItem.data = oldItem.data;
-	newItem.name = oldItem.name;
+		context.previousRegion = lastRegion;
+		return newItems;
+	}
+	if (newItems.length > 0) {
+		let prevTail = region;
+		for (let i = 0; i < newItems.length; i++) {
+			const item = newItems[i];
+			item.previousRegion = prevTail;
+			prevTail.nextRegion = item;
+			let last = item;
+			let next = item.nextRegion;
+			while (next !== null && next.depth > item.depth) {
+				last = next;
+				next = next.nextRegion;
+			}
+			prevTail = last;
+		}
+		prevTail.nextRegion = nextSibling;
+		if (nextSibling !== null) nextSibling.previousRegion = prevTail;
+		region.nextRegion = newItems[0];
+		context.previousRegion = prevTail;
+	} else {
+		region.nextRegion = nextSibling;
+		if (nextSibling !== null) nextSibling.previousRegion = region;
+		context.previousRegion = region;
+	}
+	return newItems;
 }
-
 //#endregion
 //#region src/render/runList.ts
 /**
 * Runs a `for` control statement
+* @param buildItems A function that returns the current list of lightweight
+*   `{key, data}` specs (one per row of the source data)
 * @param create A function that creates the control statement's branches
+* @param noWatch When true, the compiler has determined the `@for` body never
+*   writes to its loop variables, so each item's `data` bag can be left
+*   unwrapped (skipping the per-item shallow `$watch` Proxy + ProxyData +
+*   signals Map allocations). The compiler-emitted `update` callback is then
+*   responsible for re-running item effects when a loop variable's reference
+*   actually changes (via `t_rerun_region_effects`).
 */
-function runList(region, parent, anchor, buildItems, create, update) {
+function runList(region, parent, anchor, buildItems, create, update, noWatch) {
 	let first = true;
 	let listItems = [];
-	$run(function runList$1() {
+	$run(function runList() {
+		if (region.depth === -2) return;
 		const oldRegion = pushRegion(region, first);
 		first = false;
-		const newItems = buildItems();
-		context_default.activeTarget = null;
-		runListItems(region, parent, anchor, listItems, newItems, create, update);
-		listItems = newItems;
+		const newSpecs = buildItems();
+		context.activeTarget = null;
+		listItems = runListItems(region, parent, anchor, listItems, newSpecs, create, update, noWatch);
 		popRegion(oldRegion);
 	});
-	if (context_default.hydrationNode !== null) anchor = context_default.hydrationNode.nextSibling;
 }
-
+//#endregion
+//#region src/render/runAwait.ts
+/**
+* Renders an `@await` boundary. On the first run, content is rendered
+* speculatively; if any read inside suspends (`didSuspend`), the boundary
+* discards the partial render and shows the `with` branch instead.
+*
+* Fine-grained updates: on subsequent runs the boundary only decides whether
+* to SWITCH branches. It does so from its `pending` set — the suspended
+* computeds recorded by `suspendRead` — dropping entries that resolved and
+* re-subscribing the still-suspended ones (a re-run deactivates all of the
+* effect's source subscriptions, so they must be re-tracked to survive
+* `clearSources`). That check is O(pending reads), not O(all sources), and
+* non-suspend dependency changes inside content are left to the child
+* effects that read them — the boundary isn't re-run by them at all.
+*
+* Stale-while-revalidate (ASYNC.md §6.2): once content has been produced
+* (`hasContent`), a subsequent suspend during a refresh does NOT switch to
+* the `with` branch — the boundary keeps the stale content mounted. `$async`
+* retains the previous resolved value (`Computed.staleValue`) and
+* `suspendRead` returns it, so child effects keep displaying the old value
+* until the new promise resolves and updates them in place. The `with` branch
+* is shown only on the first load, before content has ever rendered
+* successfully.
+*
+* @param renderContent Builds the content children (may read $async getters).
+* @param renderWith Builds the `with`-branch children, or null for empty.
+*/
+function runAwait(region, anchor, renderContent, renderWith, name) {
+	const boundary = {
+		suspended: false,
+		pending: /* @__PURE__ */ new Set(),
+		effect: null
+	};
+	let index = -1;
+	let first = true;
+	let hasContent = false;
+	let theEffect = null;
+	const gen = region.generation = (region.generation ?? 0) + 1;
+	$run(function runAwait() {
+		if (region.generation !== gen) return;
+		theEffect = context.activeTarget;
+		boundary.effect = theEffect;
+		const oldRegion = pushRegion(region, first);
+		first = false;
+		const renderBranch = (targetIndex, fn) => {
+			runControlBranch(region, index, targetIndex);
+			context.previousRegion = region;
+			const oldR = pushRegion(newRegion(targetIndex === 0 ? "await_content" : "await_with"), true);
+			fn(anchor);
+			popRegion(oldR);
+			index = targetIndex;
+		};
+		const attemptContent = () => {
+			const oldBoundary = context.awaitBoundary;
+			context.awaitBoundary = boundary;
+			boundary.suspended = false;
+			const savedHydration = context.hydrationNode;
+			if (savedHydration !== null) context.hydrationNode = null;
+			renderBranch(0, renderContent);
+			if (savedHydration !== null) context.hydrationNode = savedHydration;
+			context.awaitBoundary = oldBoundary;
+			if (boundary.suspended && renderWith !== null) renderBranch(1, renderWith);
+			else if (!boundary.suspended) hasContent = true;
+		};
+		if (theEffect === null) attemptContent();
+		else {
+			let suspended = false;
+			for (const signal of boundary.pending) if (signal.didSuspend) {
+				suspended = true;
+				trackSignal(signal);
+			} else boundary.pending.delete(signal);
+			const targetIndex = suspended ? 1 : 0;
+			if (targetIndex !== index) {
+				if (targetIndex === 0) attemptContent();
+				else if (!hasContent) if (renderWith !== null) renderBranch(1, renderWith);
+				else {
+					runControlBranch(region, index, 1);
+					index = 1;
+				}
+			}
+		}
+		popRegion(oldRegion);
+		widenAncestorsAtAnchor(region, anchor);
+	}, name);
+}
+//#endregion
+//#region src/render/saveHydration.ts
+/**
+* Snapshots the hydration cursor so a `@try` branch's partial hydration walk
+* can be rewound if the branch throws and the `@catch` branch renders instead.
+*
+* @returns The current hydration cursor node, or `null` when not hydrating.
+*/
+function saveHydration() {
+	return context.hydrationNode;
+}
+//#endregion
+//#region src/render/runTry.ts
+/**
+* Renders a `@try`/`@catch` group, or a top-level `@error` block (which the
+* compiler wraps around the whole render).
+*
+* Like `runAwait`, the boundary is a control effect that renders one branch
+* at a time into a fresh child region (`runControlBranch` clears the old
+* branch on switch). Unlike the old compiled form, the try/catch lives in
+* this runtime, which gives it three capabilities the compiled form lacked:
+*
+* - **Effect-rerun error routing.** The boundary registers itself on its
+*   region (`region.errorBoundary`); when an effect inside the try content
+*   throws on a later re-run, `triggerEffects` → `routeEffectError` stores
+*   the error here and force re-runs the boundary effect, which renders the
+*   catch branch with it.
+* - **Recovery outside direct reads.** Reactive reads wrapped in nested
+*   `$run` effects (text/attribute interpolation) are tracked by those
+*   effects, not the boundary. When an error is routed, the boundary holds
+*   the erroring effect's source signals (`heldSignals`) and re-subscribes
+*   to them on every run that shows the catch branch, so a later change
+*   re-attempts the try branch.
+* - **Top-level `@error` recovery.** Because the whole render is a
+*   re-runnable branch, a later re-render error (from a nested control
+*   re-running after a prop change) is caught by the same routing, and a
+*   recovery re-render clears the error content and restores the normal
+*   content.
+*
+* Semantics preserved from the compiled form:
+*
+* - Synchronous build errors in the try content render the catch branch
+*   (rewinding the hydration cursor and restoring the control region, which
+*   the failed partial build left active).
+* - While the try branch is showing, a boundary re-run with no routed error
+*   does NOT rebuild it (`runControlBranch` same-index skip) — exactly like
+*   `@if`/`@switch` branches.
+* - While the catch branch is showing, any boundary re-run re-attempts the
+*   try branch (the recovery path for errors read directly by the boundary
+*   effect, e.g. via `@const`).
+* - With no catch branch, errors propagate up to the nearest outer boundary
+*   and no boundary is registered on the region.
+*
+* @param renderTry Builds the try content. May read reactive state.
+* @param renderCatch Builds the catch content, or null for `@try` without
+*   `@catch`. Receives the error (the `@catch (err)` variable).
+*/
+function runTry(region, anchor, renderTry, renderCatch, name) {
+	const boundary = {
+		error: void 0,
+		hasError: false,
+		effect: null,
+		heldSignals: null
+	};
+	if (renderCatch !== null) region.errorBoundary = boundary;
+	let index = -1;
+	let first = true;
+	const gen = region.generation = (region.generation ?? 0) + 1;
+	$run(function runTry() {
+		if (region.generation !== gen) return;
+		const theEffect = context.activeTarget;
+		boundary.effect = theEffect;
+		const oldRegion = pushRegion(region, first);
+		first = false;
+		const renderBranch = (targetIndex, fn) => {
+			runControlBranch(region, index, targetIndex);
+			context.previousRegion = region;
+			const oldR = pushRegion(newRegion(targetIndex === 0 ? "try" : "catch"), true);
+			fn(anchor);
+			popRegion(oldR);
+			index = targetIndex;
+		};
+		const holdSignals = () => {
+			if (boundary.heldSignals === null || theEffect === null) return;
+			for (const signal of boundary.heldSignals) trackSignal(signal);
+		};
+		const hasRoutedError = boundary.hasError;
+		const routedError = boundary.error;
+		boundary.hasError = false;
+		if (hasRoutedError && renderCatch !== null) {
+			index = -1;
+			renderBranch(1, (a) => renderCatch(a, routedError));
+			holdSignals();
+		} else if (index !== 0) {
+			const snapshot = saveHydration();
+			try {
+				renderBranch(0, renderTry);
+				boundary.heldSignals = null;
+			} catch (err) {
+				pushRegion(region);
+				restoreHydration(snapshot);
+				if (renderCatch !== null) {
+					index = -1;
+					renderBranch(1, (a) => renderCatch(a, err));
+					holdSignals();
+				} else throw err;
+			}
+		}
+		popRegion(oldRegion);
+		widenAncestorsAtAnchor(region, anchor);
+		if (context.hydrationNode !== null && anchor !== null) context.hydrationNode = anchor;
+	}, name);
+}
 //#endregion
 //#region src/render/setAttribute.ts
 function setAttribute(el, name, value) {
 	if (value === false || value === void 0 || value === null) el.removeAttribute(name);
 	else el.setAttribute(name, value);
 }
-
 //#endregion
 //#region src/render/setDynamicElement.ts
 function setDynamicElement(el, tag) {
-	if (context_default.hydrationNode !== null) return el;
+	if (context.hydrationNode !== null) return el;
 	let newElement = el.ownerDocument.createElement(tag);
+	for (const attr of el.attributes) newElement.setAttributeNS(null, attr.name, attr.value);
+	copyEventListeners(el, newElement);
+	newElement.replaceChildren(...el.childNodes.values());
 	el.replaceWith(newElement);
 	return newElement;
 }
-
 //#endregion
 //#region src/watch/$batch.ts
 /**
@@ -1148,7 +2470,7 @@ function setDynamicElement(el, tag) {
 * @param fn The function containing the batched updates to run.
 */
 function $batch(fn) {
-	if (context_default.batch > 0) return fn();
+	if (context.batch > 0) return fn();
 	batchStart();
 	try {
 		return fn();
@@ -1156,7 +2478,127 @@ function $batch(fn) {
 		batchEnd();
 	}
 }
-
+//#endregion
+//#region src/watch/$async.ts
+/**
+* Caches an async computed value from a thunk that returns a Promise. A peer
+* of `$cache` for async getters: the returned Computed carries a `didSuspend`
+* indicator that the proxy get trap reads to suspend callers until the promise
+* resolves.
+*
+* The thenable check and `.then` wiring live inside `computed.run` (a closure
+* over the computed object), so they fire on both the initial run and every
+* recalculation — `runComputed` and `checkComputed` are unchanged.
+*
+* @param fn A thunk returning the Promise to await. Signal reads inside `fn`
+*   are tracked, so the fetch re-runs when dependencies change.
+*/
+function $async(fn) {
+	if (context.registerComputed === null) throw new Error("$async must be used in a getter");
+	const computed = {
+		type: 1,
+		isAsync: true,
+		value: null,
+		run: null,
+		firstSource: null,
+		firstTarget: null,
+		recalc: false,
+		running: false,
+		didError: false,
+		didSuspend: false,
+		generation: 0,
+		hasResolved: false,
+		lastErrored: false,
+		suspendQuiet: false,
+		staleValue: void 0,
+		rollback: null
+	};
+	computed.run = () => {
+		const value = fn();
+		if (value !== null && value !== void 0 && typeof value.then === "function") {
+			const gen = ++computed.generation;
+			computed.didSuspend = true;
+			computed.suspendQuiet = computed.hasResolved && !computed.recalc;
+			value.then((v) => {
+				if (computed.generation !== gen) return;
+				computed.value = v;
+				computed.didSuspend = false;
+				computed.hasResolved = true;
+				computed.lastErrored = false;
+				computed.staleValue = v;
+				batchStart();
+				propagateFromSignal(computed);
+				batchEnd();
+			}, (e) => {
+				if (computed.generation !== gen) return;
+				computed.value = e;
+				computed.didError = true;
+				computed.didSuspend = false;
+				computed.hasResolved = true;
+				computed.lastErrored = true;
+				computed.staleValue = void 0;
+				batchStart();
+				propagateFromSignal(computed);
+				batchEnd();
+			});
+		}
+		return value;
+	};
+	context.registerComputed(computed);
+	runComputed(computed);
+	return computed.value;
+}
+//#endregion
+//#region src/watch/$bind.ts
+/**
+* Establishes two-way reactive sync between matching keys on a state object
+* and a props object.
+*
+* For each key, `$bind` creates:
+* - **Forward sync** (`props → state`): when the parent pushes a new value via
+*   `$props[key]`, it flows into `$state[key]`. Skips `undefined` values so
+*   that defaults set in the initial `$watch(...)` are preserved when the
+*   parent doesn't provide a value.
+* - **Backward sync** (`state → props`): when the component mutates
+*   `$state[key]`, the new value is written back to `$props[key]`, which the
+*   call site's `&key={...}` binding picks up and propagates to the parent.
+*
+* Same-value writes are no-ops (handled by the proxy layer), so two-way sync
+* stabilises without infinite loops.
+*
+* `$bind` syncs same-named keys, so the key must exist on the state object.
+* A state key named differently from the prop (e.g. `values` against a
+* `value` prop) would silently do nothing -- the binding reads and writes
+* keys that nothing else touches -- which is almost impossible to debug. The
+* key is therefore required to exist on the state object, and `$bind` throws
+* at setup otherwise.
+*
+* The prop does *not* need to exist on `props` yet: when the parent doesn't
+* pass an optional prop, the compiled props object has no key for it, and
+* the binding is simply inert (uncontrolled mode) until a value is pushed.
+*
+* @param state The component's reactive state (created via `$watch`).
+* @param props The component's `$props` proxy. When `undefined` (component
+*   called with no props), `$bind` does nothing.
+* @param keys Keys to sync. Each key must exist on `state`.
+* @throws When a key does not exist on the state object.
+*/
+function $bind(state, props, ...keys) {
+	if (props === void 0) return;
+	for (let key of keys.flat()) {
+		if (!(key in state)) throw new Error(`$bind: the key "${key}" does not exist on the state object. $bind syncs same-named keys, so the state object must declare it (e.g. in the initial $watch).`);
+		$run(() => {
+			const v = props[key];
+			if (v !== void 0) state[key] = v;
+		}, `bind:forward:${key}`);
+		let firstBackward = true;
+		$run(() => {
+			const value = state[key];
+			if (!firstBackward) props[key] = value;
+			firstBackward = false;
+		}, `bind:backward:${key}`);
+	}
+}
 //#endregion
 //#region src/watch/$cache.ts
 /**
@@ -1165,9 +2607,13 @@ function $batch(fn) {
 * @param fn The function containing the signals to compute and cache.
 */
 function $cache(fn) {
-	if (context_default.registerComputed === null) throw new Error("$cache must be used in a getter");
+	if (context.registerComputed === null) {
+		if (typeof window !== "undefined") throw new Error("$cache must be used in a getter");
+		return fn();
+	}
 	let computed = {
-		type: COMPUTED_TYPE,
+		type: 1,
+		isAsync: false,
 		value: null,
 		run: fn,
 		firstSource: null,
@@ -1175,74 +2621,226 @@ function $cache(fn) {
 		recalc: false,
 		running: false,
 		didError: false,
+		didSuspend: false,
+		generation: 0,
+		hasResolved: false,
+		lastErrored: false,
+		suspendQuiet: false,
+		staleValue: void 0,
 		rollback: null
 	};
-	context_default.registerComputed(computed);
+	context.registerComputed(computed);
 	runComputed(computed);
+	if (computed.value !== null && computed.value !== void 0 && typeof computed.value.then === "function") throw new Error("$cache returned a Promise — use $async for async getters");
 	return computed.value;
 }
-
 //#endregion
-//#region src/watch/$mount.ts
+//#region src/watch/$onmount.ts
 /**
-* Runs and re-runs a function on component mount
+* Runs `fn` once after the component is mounted to the DOM. May return a
+* cleanup function that runs on unmount / region clear.
+*
+* The callback is **not reactive**: it runs exactly once per mount, and
+* reactive values it reads are not tracked. To set up something that should
+* keep updating, wrap the reactive part in `$run`:
+*
+* ```ts
+* $onmount(() => {
+* 	$run(() => {
+* 		label.textContent = $state.count > 0 ? "+" : "";
+* 	});
+* });
+* ```
+*
+* The element-level equivalent is the `onmount` attribute:
+* `<input onmount={(el) => el.focus()} />`.
 *
 * @param fn The function to run, which may return a cleanup function
 */
-function $mount(fn) {
-	context_default.mountEffects.push(fn);
+function $onmount(fn) {
+	context.mountEffects.push({
+		region: context.activeRegion,
+		fn
+	});
 }
-
 //#endregion
-//#region src/watch/$peek.ts
-function $peek(fn) {
-	const oldActiveTarget = context_default.activeTarget;
-	context_default.activeTarget = null;
-	const result = fn();
-	context_default.activeTarget = oldActiveTarget;
-	return result;
+//#region src/watch/$pending.ts
+/**
+* Returns `true` if any value read inside `fn` is currently suspended in a
+* "loud" way — a `$async` getter whose promise hasn't resolved yet. A reactive
+* query for inline "loading…" indicators: the calling effect subscribes to the
+* same computeds, so `$pending` re-evaluates when they resolve.
+*
+* Uses a "peek mode" internally: reads during `fn` are tracked for
+* subscription but don't propagate taint or notify a `@await` boundary.
+* This lets `$pending` return a plain boolean without itself suspending.
+*
+* Quiet-on-refresh semantics (ASYNC.md §7.4): a suspend is *quiet* — and
+* therefore `$pending` returns `false` for it — when the computed has resolved
+* before and the re-fetch was a *silent* `$refresh(fn, { silent: true })` (a
+* bare refresh with no tracked dependency change, used for background
+* revalidation). This matches Solid's stale-while-revalidate default: quietly
+* re-asking the same question shouldn't ping the user. First loads and
+* dependency-change refreshes are loud (`true`), as is the default (loud)
+* `$refresh(fn)`. Quiet-ness is captured per computed at suspend time via
+* `suspendQuiet` (computed in `$async`'s run from `hasResolved` and `recalc`).
+*
+* @param fn A function that reads the reactive values to check.
+*/
+function $pending(fn) {
+	const oldPeek = context.suspendPeek;
+	context.suspendPeek = true;
+	context.suspendPeekHit = false;
+	try {
+		fn();
+		return context.suspendPeekHit;
+	} finally {
+		context.suspendPeek = oldPeek;
+	}
 }
-
 //#endregion
-//#region src/wrappers/ReactiveDate.ts
-let initialized = false;
+//#region src/watch/$refresh.ts
 /**
-* Wraps a Date object for $watching.
+* Re-fetches the `$async` getters read inside `fn` without changing a
+* dependency. A companion to `$pending` (ASYNC.md §6.2): pull-to-refresh,
+* refresh buttons, refetch-on-focus, polling, retry-after-error.
+*
+* `fn` is run in a tracking context that collects every `$async` computed it
+* reads (`$cache` computeds are ignored). Each collected computed is then
+* re-run with `recalc` left true — a "bare refresh" — so the suspend is
+* *loud*: `$pending(fn)` returns `true` while the re-fetch is in flight and
+* subscribers are notified at suspend *start*, so an inline "updating…"
+* indicator appears immediately. Readers keep displaying the previous
+* resolved value (`Computed.staleValue`) until the new promise resolves and
+* propagates through the reactive graph; an `@await` boundary keeps its
+* content mounted instead of flashing fallback.
+*
+* Pass `{ silent: true }` to re-fetch quietly (stale-while-revalidate):
+* `$pending(fn)` stays `false` and nothing re-runs until the new promise
+* resolves. For background revalidation where feedback would be noise —
+* polling, refetch-on-focus:
+*
+* ```torp
+* // poll quietly every 30s
+* $run(() => {
+* 	const id = setInterval(() => $refresh(() => $state.data, { silent: true }), 30_000);
+* 	return () => clearInterval(id);
+* });
+* ```
+*
+* A refresh is loud regardless of `silent` when the computed has never
+* resolved — e.g. retrying after an error that left `didError` set on a first
+* load — or when the re-fetch is triggered by a dependency change, which
+* flows through the normal `recalc` path instead of here.
+*
+* If `fn` reads a getter the UI has never read, the collection read
+* initializes it — and that fetch IS the refresh: the computed is not re-run
+* (a second fetch would be a duplicate whose resolve the generation guard
+* drops). Getters already read (pending, resolved, or errored) are re-run as
+* usual.
+*
+* The returned value of `fn` is ignored; use `fn` to reference the getters.
 */
-var ReactiveDate = class ReactiveDate extends Date {
-	constructor(...params) {
-		super(...params);
-		if (!initialized) this.#init();
-		this[proxyHandledSymbol] = true;
-		this[proxyDataSymbol] = {
-			target: this,
-			isArray: false,
-			shallow: true,
-			signals: /* @__PURE__ */ new Map()
-		};
+function $refresh(fn, options) {
+	const silent = options?.silent === true;
+	const oldRefreshSignals = context.refreshSignals;
+	const oldPeek = context.suspendPeek;
+	const oldInitialized = context.refreshInitialized;
+	context.refreshSignals = [];
+	context.suspendPeek = true;
+	context.refreshInitialized = /* @__PURE__ */ new Set();
+	let unique;
+	let initialized;
+	try {
+		fn();
+		unique = new Set(context.refreshSignals ?? []);
+		initialized = context.refreshInitialized;
+	} finally {
+		context.refreshSignals = oldRefreshSignals;
+		context.suspendPeek = oldPeek;
+		context.refreshInitialized = oldInitialized;
 	}
-	#init() {
-		initialized = true;
-		let reactivePrototype = ReactiveDate.prototype;
-		let datePrototype = Date.prototype;
-		const methods = Object.getOwnPropertyNames(datePrototype);
-		for (const method of methods) {
-			if (method.startsWith("get") || method.startsWith("to") || method === "valueOf") reactivePrototype[method] = function(...args) {
-				const data = this[proxyDataSymbol];
-				const result = datePrototype[method].apply(this, args);
-				trackProxySignal(data, "#time");
-				return result;
-			};
-			if (method.startsWith("set")) reactivePrototype[method] = function(...args) {
-				const data = this[proxyDataSymbol];
-				const result = datePrototype[method].apply(this, args);
-				propagateSignal(data, "#time");
-				return result;
-			};
+	for (const computed of unique) {
+		if (initialized.has(computed)) continue;
+		computed.recalc = !silent;
+		deactivateSources(computed);
+		const oldActiveTarget = context.activeTarget;
+		context.activeTarget = null;
+		try {
+			runComputed(computed);
+		} finally {
+			context.activeTarget = oldActiveTarget;
+		}
+		computed.recalc = false;
+		clearSources(computed);
+		if (!silent) {
+			batchStart();
+			propagateFromSignal(computed);
+			batchEnd();
 		}
 	}
-};
-
+}
+//#endregion
+//#region src/watch/$stream.ts
+/**
+* Subscribes to an external source of events — server-sent events,
+* WebSockets, DOM events, or any custom `StreamSource` — and calls
+* `handler` for each event it pushes. Events are typically written into
+* reactive state, which keeps templates, computeds and effects updating
+* through the normal reactivity model:
+*
+* ```torp
+* let $state = $watch({ messages: [] as string[] });
+*
+* $stream(fromServer(`/sse/${$props.id}`), (e) => {
+* 	$state.messages.push(e.data);
+* });
+* ```
+*
+* The subscription is managed by the framework:
+*
+* - It starts when the component is mounted to the DOM (so `&ref`-bound
+*   elements are available), and is unsubscribed when the component
+*   unmounts or its region is cleared.
+* - Reactive state read *inside* the source is tracked: when it changes,
+*   the source is unsubscribed and re-subscribed with fresh values (e.g.
+*   re-opening a connection when a user id changes). A pending debounced
+*   call is dropped on re-subscribe.
+* - The source is never invoked during a server render, so browser-only
+*   APIs are safe to use.
+*
+* Errors are values like any other: a source that can fail should push an
+* error-shaped value and own its own reconnection (e.g. `EventSource`
+* reconnects automatically).
+*
+* @param source The stream source to subscribe to
+* @param handler Called for each event the source pushes
+* @param options Timing options. `debounce` delays each handler call until
+*   the source has been quiet for that many milliseconds, resetting on
+*   every event (only the last event in a burst is handled).
+*/
+function $stream(source, handler, options) {
+	const fn = () => {
+		let timer;
+		$run(() => {
+			const unsub = source((value) => {
+				if (options?.debounce) {
+					clearTimeout(timer);
+					timer = setTimeout(() => handler(value), options.debounce);
+				} else handler(value);
+			});
+			return () => {
+				unsub?.();
+				clearTimeout(timer);
+			};
+		});
+	};
+	context.mountEffects.push({
+		region: context.activeRegion,
+		fn
+	});
+}
 //#endregion
-export { $batch, $cache, $mount, $peek, $run, $unwrap, $watch, ReactiveDate, clearLayoutSlot, fillLayoutSlot, hydrate, mount, addFragment as t_add_fragment, nodeAnchor as t_anchor, addAnimation as t_animate, applyProps as t_apply_props, setAttribute as t_attribute, nodeChild as t_child, buildClasses as t_class, setDynamicElement as t_dynamic, addEvent as t_event, formatText as t_fmt, getFragment as t_fragment, newListItem as t_list_item, nodeNext as t_next, popRegion as t_pop_region, pushRegion as t_push_region, newRegion as t_region, nodeRoot as t_root, runControlBranch as t_run_branch, runControl as t_run_control, runList as t_run_list, nodeSkip as t_skip, buildStyles as t_style };
+export { $async, $batch, $bind, $cache, $onmount, $peek, $pending, $refresh, $run, $stream, $unwrap, $watch, clearLayoutSlot, fillLayoutSlot, fromElement, fromServer, fromWebSocket, hydrate, mount, addElement as t_add_element, addFragment as t_add_fragment, nodeAnchor as t_anchor, addAnimation as t_animate, applyProps as t_apply_props, setAttribute as t_attribute, nodeChild as t_child, buildClasses as t_class, setDynamicElement as t_dynamic, addEvent as t_event, firstInsideNode as t_first_inside, formatText as t_fmt, getFragment as t_fragment, getElementFragment as t_fragment_el, newListItem as t_list_item, nodeNext as t_next, popRegion as t_pop_region, pushRegion as t_push_region, newRegion as t_region, rerunRegionEffects as t_rerun_region_effects, restoreHydration as t_restore_hydration, nodeRoot as t_root, nodeRootElement as t_root_el, runAwait as t_run_await, runControlBranch as t_run_branch, runControl as t_run_control, runList as t_run_list, runTry as t_run_try, saveHydration as t_save_hydration, nodeSkip as t_skip, buildStyles as t_style, unmount };
+
 //# sourceMappingURL=index.mjs.map