@torpor/view 0.3.4 → 0.4.0

package/dist/index.cjs

@@ -1,253 +1,370 @@
-const require_formatText = require('./formatText-DufG5l83.cjs');
+const require_devContext = require('./devContext-nomc0xCl.cjs');
+const require_formatText = require('./formatText-Ck04q8_X.cjs');
 
-//#region src/render/$mount.ts
+//#region src/render/context.ts
+const context = {
+	activeTarget: null,
+	previousEffect: null,
+	extent: 0,
+	batch: 0,
+	batchOperation: 0,
+	registerComputed: null,
+	firstEffectToRun: null,
+	firstSignalToUpdate: null,
+	activeRegion: null,
+	previousRegion: null,
+	rootRegion: 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,
+		el,
+		in: entry,
+		out: exit
+	});
+}
+
+//#endregion
+//#region src/render/addEvent.ts
+function addEvent(el, type, listener) {
+	context_default.stashedEvents.push({
+		region: context_default.activeRegion,
+		el,
+		type,
+		listener
+	});
+}
+
+//#endregion
+//#region src/types/constants.ts
 /**
-* Runs and re-runs a function on component mount
-*
-* @param fn The function to run, which may return a cleanup function
+* The type of a Signal object.
 */
-function $mount(fn) {
-	require_formatText.context_default.mountEffects.push(fn);
-}
+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/render/$run.ts
+//#region src/watch/clearSources.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.
+* Clear unused source subscriptions after each Computed or Effect has been run.
 */
-function $run(fn, name) {
-	let effect = {
-		type: require_formatText.EFFECT_TYPE,
-		run: fn,
-		cleanup: void 0,
-		firstSource: null,
-		nextEffect: null,
-		extent: 0,
-		nextEffectToRun: null,
-		didError: false,
-		name
-	};
-	require_formatText.runEffect(effect);
-	return effect;
+function clearSources(target) {
+	let previousSub = null;
+	for (let clearSub = target.firstSource; clearSub !== null; clearSub = clearSub.nextSource) if (target.didError || !clearSub.active) {
+		if (previousSub === null) target.firstSource = clearSub.nextSource;
+		else previousSub.nextSource = clearSub.nextSource;
+		if (clearSub.previousTarget === null) {
+			if (clearSub.source.firstTarget === clearSub) clearSub.source.firstTarget = clearSub.nextTarget;
+		} else clearSub.previousTarget.nextTarget = clearSub.nextTarget;
+	} else {
+		clearSub.recalc = false;
+		previousSub = clearSub;
+	}
 }
 
 //#endregion
-//#region src/watch/symbols.ts
-const proxyDataSymbol = Symbol("_proxy_data");
-const proxyHandledSymbol = Symbol("_proxy_handled");
+//#region src/watch/deactivateSources.ts
+/**
+* Sets source subscriptions to inactive for a Computed or Effect.
+*/
+function deactivateSources(target) {
+	for (let sourceSub = target.firstSource; sourceSub !== null; sourceSub = sourceSub.nextSource) sourceSub.active = false;
+}
 
 //#endregion
-//#region src/render/$unwrap.ts
+//#region src/watch/trackSignal.ts
 /**
-* Returns the target object of a proxy
-*
-* @param object The proxy object
+* If there's an active target, subscribe it to this signal, so that it will be
+* run when the signal changes.
 */
-function $unwrap(object) {
-	return object !== void 0 && object !== null && object[proxyDataSymbol] !== void 0 ? object[proxyDataSymbol].target ?? object : object;
+function trackSignal(signal) {
+	const target = context_default.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;
+			}
+		}
+		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;
+	}
 }
 
 //#endregion
-//#region src/watch/trackProxyEffect.ts
-function trackProxyEffect(data, key) {
-	let signal = data.signals.get(key);
-	if (signal === void 0) {
-		signal = {
-			type: require_formatText.SIGNAL_TYPE,
-			firstTarget: null,
-			nextSignalToUpdate: null
-		};
-		data.signals.set(key, signal);
+//#region src/watch/runComputed.ts
+function runComputed(computed) {
+	const oldActiveTarget = context_default.activeTarget;
+	computed.running = true;
+	computed.didError = false;
+	try {
+		context_default.activeTarget = computed;
+		computed.value = computed.run();
+	} catch (err) {
+		computed.didError = true;
+		computed.value = err;
+		throw err;
+	} finally {
+		context_default.activeTarget = oldActiveTarget;
+		computed.running = false;
 	}
-	require_formatText.trackEffect(signal);
+	trackSignal(computed);
+	return computed.value;
 }
 
 //#endregion
-//#region src/watch/updateSignal.ts
-let lastEffect;
+//#region src/watch/checkComputed.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
+* Checks whether a Computed value should be re-run (which will be true if any
+* of its sources have changed) and re-runs it if necessary.
 */
-function updateSignal(proxy, key) {
-	let signal = proxy.signals.get(key);
-	if (signal !== void 0 && signal.firstTarget !== null) {
-		require_formatText.batchStart();
-		try {
-			if (require_formatText.context_default.firstSignalToUpdate === null) require_formatText.context_default.firstSignalToUpdate = signal;
-			else if (signal.nextSignalToUpdate === null) {
-				let lastSignal = require_formatText.context_default.firstSignalToUpdate;
-				while (lastSignal.nextSignalToUpdate !== null) lastSignal = lastSignal.nextSignalToUpdate;
-				lastSignal.nextSignalToUpdate = signal;
-			}
-			lastEffect = require_formatText.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 === require_formatText.EFFECT_TYPE) {
-					if (lastEffect === null) {
-						require_formatText.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 !== require_formatText.COMPUTED_TYPE) {
-						computed = void 0;
-						continue outer;
-					}
-					computed = targetSub.source;
-				}
-				if (targetSub.nextTarget === null) break;
-				targetSub = targetSub.nextTarget;
-			}
-		} finally {
-			require_formatText.batchEnd();
+function checkComputed(computed) {
+	let rerun = checkSources(computed);
+	let changed = false;
+	if (rerun) {
+		deactivateSources(computed);
+		const oldValue = computed.value;
+		runComputed(computed);
+		changed = computed.value !== oldValue;
+		clearSources(computed);
+	}
+	computed.recalc = false;
+	if (!changed) for (let targetSub = computed.firstTarget; targetSub !== null; targetSub = targetSub.nextTarget) {
+		targetSub.active = true;
+		targetSub.recalc = false;
+	}
+	return changed;
+}
+
+//#endregion
+//#region src/watch/checkSources.ts
+/**
+* Checks whether a Computed or Effect should be re-run (which will be true if
+* any of its sources have changed).
+*/
+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;
+	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;
+			const recalc = checkComputed(sourceSub.source);
+			context_default.activeTarget = oldActiveTarget;
+			if (recalc) return true;
 		}
 	}
+	return false;
 }
 
 //#endregion
-//#region src/watch/proxyGet.ts
-function proxyGet(target, key, receiver) {
-	let data = target[proxyDataSymbol];
-	if (key === proxyDataSymbol) return data;
-	let signal = data.signals.get(key);
-	if (signal === void 0) {
-		const propDescriptor = Object.getOwnPropertyDescriptor(target, key);
-		if (propDescriptor !== void 0) {
-			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);
-				}
-				trackProxyEffect(data, key);
-			} else if (propDescriptor.get) {
-				const oldRegisterComputed = require_formatText.context_default.registerComputed;
-				try {
-					require_formatText.context_default.registerComputed = (computed) => {
-						data.signals.set(key, computed);
-					};
-					return Reflect.get(target, key, receiver);
-				} finally {
-					require_formatText.context_default.registerComputed = oldRegisterComputed;
-				}
+//#region src/watch/runCleanups.ts
+/**
+* Runs cleanup functions for the effect and its children.
+*/
+function runCleanups(effect) {
+	let effectToClean = effect;
+	for (let i = 0; i < effect.extent; i++) {
+		if (typeof effectToClean.cleanup === "function") {
+			const oldActiveTarget = context_default.activeTarget;
+			context_default.activeTarget = null;
+			try {
+				effectToClean.cleanup();
+			} catch (err) {
+				effectToClean.didError = true;
+				clearSources(effectToClean);
+				throw err;
+			} finally {
+				effectToClean.cleanup = void 0;
+				context_default.activeTarget = oldActiveTarget;
 			}
-		} else if (data.isArray) {
-			if (arrayWrapper[key] !== void 0) return arrayWrapper[key](data, target, key);
 		}
-	} else if (signal.type === require_formatText.SIGNAL_TYPE) trackProxyEffect(data, key);
-	else if (signal.type === require_formatText.COMPUTED_TYPE) {
-		if (signal.running) throw new Error("Cycle detected");
-		else if (signal.recalc) require_formatText.checkComputed(signal);
-		else if (signal.didError) throw signal.value;
-		else require_formatText.trackEffect(signal);
-		return signal.value;
+		const nextEffect = effectToClean.nextEffect;
+		if (i !== 0 && effect.nextEffectToRun === effectToClean) {
+			effect.nextEffectToRun = effectToClean.nextEffectToRun;
+			effectToClean.nextEffect = effectToClean.nextEffectToRun = null;
+		}
+		effectToClean = nextEffect;
 	}
-	return Reflect.get(target, key, receiver);
-}
-const arrayWrapper = {
-	[Symbol.iterator]: function(data, target, key) {
-		trackProxyEffect(data, "length");
-		require_formatText.context_default.activeTarget = null;
-		return target[key];
-	},
-	pop: arrayHandle,
-	push: arrayHandle,
-	reverse: arrayHandle,
-	shift: arrayHandle,
-	sort: arrayHandle,
-	splice: arrayHandle,
-	unshift: arrayHandle
-};
-function arrayHandle(data, target, key) {
-	return function(...args) {
-		const result = target[key].apply(target, args);
-		updateSignal(data, "length");
-		return result;
-	};
 }
 
 //#endregion
-//#region src/watch/proxySet.ts
-function proxySet(target, key, value, receiver) {
-	const oldValue = target[key];
-	if (value !== oldValue) {
-		if (require_formatText.context_default.batchOperation > 100) throw new Error("Cycle detected");
-		let data = target[proxyDataSymbol];
-		if (oldValue && oldValue[proxyDataSymbol] !== void 0) value = $watch(value, { shallow: oldValue[proxyDataSymbol].shallow });
-		Reflect.set(target, key, value, receiver);
-		updateSignal(data, key);
-		if (data.isArray && !isNaN(+String(key))) updateSignal(data, "length");
+//#region src/watch/checkEffect.ts
+/**
+* Checks whether an Effect should be re-run (which will be true if any
+* of its sources have changed) and re-runs it if necessary.
+*/
+function checkEffect(effect) {
+	if (checkSources(effect)) {
+		runCleanups(effect);
+		deactivateSources(effect);
+		runEffect(effect);
+		clearSources(effect);
 	}
-	return true;
 }
 
 //#endregion
-//#region src/render/$watch.ts
+//#region src/watch/clearTargets.ts
 /**
-* Watches an object and runs effects when its properties are changed
-*
-* @param object The object to watch
+* Clear unused target subscriptions after all Effects have been run.
 */
-function $watch(object, options) {
-	if (object === void 0 || object === null || object[proxyDataSymbol] !== void 0) return object;
-	object[proxyDataSymbol] = {
-		target: object,
-		isArray: Array.isArray(object),
-		shallow: options?.shallow === true,
-		signals: /* @__PURE__ */ new Map()
-	};
-	const handler = {
-		get: proxyGet,
-		set: proxySet
-	};
-	return new Proxy(object, handler);
+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;
 }
 
 //#endregion
-//#region src/render/addAnimation.ts
-function addAnimation(el, entry, exit) {
-	require_formatText.context_default.stashedAnimations.push({
-		range: require_formatText.context_default.activeRange,
-		el,
-		in: entry,
-		out: exit
-	});
+//#region src/watch/triggerEffects.ts
+/**
+* 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++;
+		try {
+			checkEffect(effect);
+		} catch (err) {
+			if (!didError) {
+				didError = true;
+				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;
+	while (signal !== null) {
+		clearTargets(signal);
+		const nextSignal = signal.nextSignalToUpdate;
+		signal.nextSignalToUpdate = null;
+		signal = nextSignal;
+	}
+	if (didError) throw error;
 }
 
 //#endregion
-//#region src/render/addEvent.ts
-function addEvent(el, type, listener) {
-	require_formatText.context_default.stashedEvents.push({
-		range: require_formatText.context_default.activeRange,
-		el,
-		type,
-		listener
-	});
+//#region src/watch/batchEnd.ts
+function batchEnd() {
+	if (context_default.batch > 1) {
+		context_default.batch--;
+		return;
+	}
+	try {
+		triggerEffects();
+	} finally {
+		context_default.batch = 0;
+		context_default.batchOperation = 0;
+		context_default.previousEffect = null;
+	}
+}
+
+//#endregion
+//#region src/watch/batchStart.ts
+function batchStart() {
+	context_default.batch++;
 }
 
 //#endregion
-//#region src/motion/animate.ts
+//#region src/watch/runEffect.ts
+function runEffect(effect) {
+	require_devContext.devContext_default.effectRun(effect);
+	const oldActiveTarget = context_default.activeTarget;
+	const oldExtent = context_default.extent;
+	effect.didError = false;
+	batchStart();
+	try {
+		if (context_default.previousEffect !== null) context_default.previousEffect.nextEffect = effect;
+		context_default.activeTarget = effect;
+		context_default.previousEffect = effect;
+		context_default.extent = 1;
+		effect.cleanup = effect.run();
+		effect.extent = context_default.extent;
+	} catch (err) {
+		effect.didError = true;
+		clearSources(effect);
+		throw err;
+	} finally {
+		context_default.activeTarget = oldActiveTarget;
+		context_default.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.
+*/
+function $run(fn, name) {
+	let effect = {
+		type: EFFECT_TYPE,
+		run: fn,
+		cleanup: void 0,
+		firstSource: null,
+		nextEffect: null,
+		extent: 0,
+		nextEffectToRun: null,
+		didError: false,
+		name
+	};
+	require_devContext.devContext_default.onRun(effect);
+	runEffect(effect);
+	return effect;
+}
+
+//#endregion
+//#region src/render/animate.ts
 /**
 * Adds an animation for an element
 * @param el The element to animate
@@ -266,13 +383,10 @@ async function animate(el, enter, keyframes, options) {
 	setTimeout(() => {
 		animation.timeline = el.ownerDocument.timeline;
 	}, 1);
-	let activeRange = require_formatText.context_default.activeRange;
-	if (activeRange) {
-		activeRange.animations ??= /* @__PURE__ */ new Set();
-		activeRange.animations.add(animation);
-		await animation.finished;
-		activeRange.animations.delete(animation);
-	}
+	const activeRegion = context_default.activeRegion;
+	activeRegion.animations ??= /* @__PURE__ */ new Set();
+	activeRegion.animations.add(animation);
+	await animation.finished;
 }
 
 //#endregion
@@ -284,32 +398,32 @@ function isFragmentNode(node) {
 //#endregion
 //#region src/render/addFragment.ts
 function addFragment(fragment, parent, before, endNode) {
-	const range = require_formatText.context_default.activeRange;
-	const hydrationNode = require_formatText.context_default.hydrationNode;
-	if (hydrationNode !== null) range.endNode = endNode ?? hydrationNode;
+	const activeRegion = context_default.activeRegion;
+	const hydrationNode = context_default.hydrationNode;
+	if (hydrationNode !== null) activeRegion.endNode = endNode ?? hydrationNode;
 	else {
-		range.startNode = fragment.firstChild;
-		range.endNode = fragment.lastChild;
+		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 require_formatText.context_default.mountEffects) $run(effect);
-			require_formatText.context_default.mountEffects.length = 0;
+			for (let effect of context_default.mountEffects) $run(effect);
+			context_default.mountEffects.length = 0;
 		}
-		for (let event of require_formatText.context_default.stashedEvents) {
-			require_formatText.context_default.activeRange = event.range;
-			$run(function addFragmentEvent() {
-				event.el.addEventListener(event.type, event.listener);
+		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 () => {
-					event.el.removeEventListener(event.type, event.listener);
+					for (let event of events) event.el.removeEventListener(event.type, event.listener);
 				};
 			});
+			context_default.stashedEvents.length = 0;
 		}
-		require_formatText.context_default.stashedEvents.length = 0;
-		for (let animation of require_formatText.context_default.stashedAnimations) {
-			require_formatText.context_default.activeRange = animation.range;
+		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 () => {
@@ -317,8 +431,8 @@ function addFragment(fragment, parent, before, endNode) {
 				};
 			});
 		}
-		require_formatText.context_default.stashedAnimations.length = 0;
-		require_formatText.context_default.activeRange = range;
+		context_default.stashedAnimations.length = 0;
+		context_default.activeRegion = activeRegion;
 	}
 }
 
@@ -336,59 +450,66 @@ function applyProps(el, props, propNamesUsed) {
 }
 
 //#endregion
-//#region src/render/clearRange.ts
-function clearRange(range) {
-	let animations = range.animations !== null ? Array.from(range.animations) : void 0;
-	let childRange = range.nextRange;
-	while (childRange !== null && childRange.depth > range.depth) {
-		if (childRange.animations !== null) {
+//#region src/render/clearRegion.ts
+function clearRegion(region) {
+	require_devContext.devContext_default.onRegionCleared(region);
+	let animations = region.animations !== null ? Array.from(region.animations) : void 0;
+	let childRegion = region.nextRegion;
+	while (childRegion !== null && childRegion.depth > region.depth) {
+		if (childRegion.animations !== null) {
 			animations ??= [];
-			animations.push(...childRange.animations);
+			animations.push(...childRegion.animations);
 		}
-		releaseRange(childRange);
-		childRange.depth = -2;
-		childRange = childRange.nextRange;
-	}
-	range.nextRange = childRange;
-	if (range.previousRange !== null) range.previousRange.nextRange = range.nextRange;
-	if (range.nextRange !== null) range.nextRange.previousRange = range.previousRange;
-	if (animations !== void 0) Promise.all(animations.map((a) => a.finished)).then(() => clearNodes(range));
-	else clearNodes(range);
-}
-function clearNodes(range) {
-	if (range.startNode !== null && range.endNode !== null) {
-		let currentNode = range.endNode;
-		while (currentNode !== range.startNode) {
+		releaseRegion(childRegion);
+		childRegion.depth = -2;
+		childRegion = childRegion.nextRegion;
+	}
+	region.nextRegion = childRegion;
+	if (region.previousRegion !== null) region.previousRegion.nextRegion = region.nextRegion;
+	if (region.nextRegion !== null) region.nextRegion.previousRegion = region.previousRegion;
+	if (animations !== void 0) {
+		animations.forEach((a) => {
+			a.reverse();
+			a.play();
+		});
+		Promise.all(animations.map((a) => a.finished)).then(() => clearNodes(region));
+	} else clearNodes(region);
+}
+function clearNodes(region) {
+	if (region.startNode !== null && region.endNode !== null) {
+		let currentNode = region.endNode;
+		while (currentNode !== region.startNode) {
 			let previousNode = currentNode.previousSibling;
 			currentNode.remove();
 			currentNode = previousNode;
 		}
 		currentNode.remove();
 	}
-	releaseRange(range);
+	releaseRegion(region);
 }
-function releaseRange(range) {
-	range.startNode = null;
-	range.endNode = null;
-	range.previousRange = null;
-	range.nextRange = null;
-	range.animations = null;
+function releaseRegion(region) {
+	region.startNode = null;
+	region.endNode = null;
+	region.previousRegion = null;
+	region.nextRegion = null;
+	region.animations = null;
 }
 
 //#endregion
 //#region src/render/clearLayoutSlot.ts
-function clearLayoutSlot(range) {
-	clearRange(range);
+function clearLayoutSlot(region) {
+	context_default.previousRegion = region.previousRegion;
+	clearRegion(region);
 }
 
 //#endregion
-//#region src/render/newRange.ts
-function newRange(name) {
+//#region src/render/newRegion.ts
+function newRegion(name) {
 	return {
 		startNode: null,
 		endNode: null,
-		previousRange: null,
-		nextRange: null,
+		previousRegion: null,
+		nextRegion: null,
 		depth: -1,
 		animations: null,
 		name
@@ -396,36 +517,38 @@ function newRange(name) {
 }
 
 //#endregion
-//#region src/render/popRange.ts
-function popRange(oldRange) {
-	require_formatText.context_default.activeRange = oldRange;
+//#region src/render/popRegion.ts
+function popRegion(oldRegion) {
+	context_default.activeRegion = oldRegion;
+	require_devContext.devContext_default.onRegionPopped();
 }
 
 //#endregion
-//#region src/render/pushRange.ts
-function pushRange(range, toParent = false) {
-	const activeRange = require_formatText.context_default.activeRange;
+//#region src/render/pushRegion.ts
+function pushRegion(region, toParent = false) {
+	const activeRegion = context_default.activeRegion;
 	if (toParent) {
-		const previousRange = require_formatText.context_default.previousRange;
-		range.previousRange = previousRange;
-		const nextRange = previousRange.nextRange;
-		previousRange.nextRange = range;
-		range.nextRange = nextRange;
-		range.depth = activeRange.depth + 1;
+		const previousRegion = context_default.previousRegion;
+		region.previousRegion = previousRegion;
+		const nextRegion = previousRegion.nextRegion;
+		previousRegion.nextRegion = region;
+		region.nextRegion = nextRegion;
+		region.depth = activeRegion.depth + 1;
 	}
-	require_formatText.context_default.activeRange = range;
-	require_formatText.context_default.previousRange = range;
-	return activeRange;
+	context_default.activeRegion = region;
+	context_default.previousRegion = region;
+	require_devContext.devContext_default.onRegionPushed(region, toParent);
+	return activeRegion;
 }
 
 //#endregion
 //#region src/render/fillLayoutSlot.ts
 function fillLayoutSlot(component, slot, parent, anchor, $props, $context) {
-	const range = newRange();
-	const oldRange = pushRange(range);
+	const region = newRegion(require_devContext.devContext_default.enabled ? "Layout slot" : void 0);
+	const oldRegion = pushRegion(region, true);
 	component(parent, anchor, $props, $context, { _: slot });
-	popRange(oldRange);
-	return range;
+	popRegion(oldRegion);
+	return region;
 }
 
 //#endregion
@@ -454,14 +577,14 @@ function getFragment(document, array, index, html, ns) {
 * @param props An object containing component props
 */
 function hydrate(parent, component, props, slots) {
-	require_formatText.context_default.hydrationNode = parent.firstChild;
-	require_formatText.context_default.rootRange = newRange();
-	require_formatText.context_default.previousRange = require_formatText.context_default.rootRange;
-	pushRange(require_formatText.context_default.rootRange);
+	context_default.hydrationNode = parent.firstChild;
+	context_default.rootRegion = newRegion(require_devContext.devContext_default.enabled ? "Root" : void 0);
+	context_default.previousRegion = context_default.rootRegion;
+	pushRegion(context_default.rootRegion);
 	component(parent, null, props, void 0, slots);
-	require_formatText.context_default.hydrationNode = null;
-	for (let effect of require_formatText.context_default.mountEffects) $run(effect);
-	require_formatText.context_default.mountEffects.length = 0;
+	context_default.hydrationNode = null;
+	for (let effect of context_default.mountEffects) $run(effect);
+	context_default.mountEffects.length = 0;
 }
 
 //#endregion
@@ -476,22 +599,25 @@ 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();
-	require_formatText.context_default.rootRange = newRange();
-	require_formatText.context_default.previousRange = require_formatText.context_default.rootRange;
-	pushRange(require_formatText.context_default.rootRange);
+	if (context_default.rootRegion === null) {
+		context_default.rootRegion = newRegion(require_devContext.devContext_default.enabled ? "Root" : void 0);
+		context_default.previousRegion = context_default.rootRegion;
+		pushRegion(context_default.rootRegion);
+	}
 	component(parent, null, props, void 0, slots);
 }
 
 //#endregion
 //#region src/render/newListItem.ts
-function newListItem(data, key) {
+function newListItem(data, key, name) {
 	return {
 		startNode: null,
 		endNode: null,
-		previousRange: null,
-		nextRange: null,
+		previousRegion: null,
+		nextRegion: null,
 		depth: -1,
 		animations: null,
+		name,
 		data,
 		key
 	};
@@ -526,13 +652,13 @@ function isTextNode(node) {
 * @returns The next node.
 */
 function nodeCheckHydrationBreak(node) {
-	if (require_formatText.context_default.hydrationNode !== null) {
+	if (context_default.hydrationNode !== null) {
 		if (node !== null && isCommentNode(node) && node.data === HYDRATION_BREAK) {
 			let comment = node;
 			node = node.nextSibling;
 			comment.remove();
 		}
-		require_formatText.context_default.hydrationNode = node;
+		context_default.hydrationNode = node;
 	}
 	return node;
 }
@@ -548,7 +674,7 @@ function nodeCheckHydrationBreak(node) {
 * @param text Whether we require a text node.
 */
 function nodeNext(node, text = false) {
-	if (require_formatText.context_default.hydrationNode !== null && text && isTextNode(node)) return node;
+	if (context_default.hydrationNode !== null && text && isTextNode(node)) return node;
 	return nodeCheckHydrationBreak(node.nextSibling);
 }
 
@@ -569,7 +695,7 @@ function nodeNext(node, text = false) {
 * @returns The anchor node.
 */
 function nodeAnchor(node) {
-	if (require_formatText.context_default.hydrationNode !== null) {
+	if (context_default.hydrationNode !== null) {
 		if (isCommentNode(node) && node.data === HYDRATION_START) {
 			let currentNode = nodeNext(node);
 			node.remove();
@@ -582,7 +708,7 @@ function nodeAnchor(node) {
 						if (level === 0) {
 							const endNode = currentNode.nextSibling;
 							currentNode.remove();
-							if (require_formatText.context_default.hydrationNode === currentNode) require_formatText.context_default.hydrationNode = endNode;
+							if (context_default.hydrationNode === currentNode) context_default.hydrationNode = endNode;
 							return endNode;
 						}
 					}
@@ -606,9 +732,9 @@ function nodeAnchor(node) {
 */
 function nodeChild(parent) {
 	let childNode = parent.firstChild;
-	if (require_formatText.context_default.hydrationNode !== null) {
+	if (context_default.hydrationNode !== null) {
 		if (childNode === null) childNode = parent.appendChild(parent.ownerDocument.createTextNode(""));
-		require_formatText.context_default.hydrationNode = childNode;
+		context_default.hydrationNode = childNode;
 	}
 	return childNode;
 }
@@ -624,18 +750,18 @@ function nodeChild(parent) {
 * @param text Whether we require a text node.
 */
 function nodeRoot(parent, text = false) {
-	if (require_formatText.context_default.hydrationNode !== null) {
-		let rootNode = require_formatText.context_default.hydrationNode;
+	if (context_default.hydrationNode !== null) {
+		let rootNode = context_default.hydrationNode;
 		if (text && !isTextNode(rootNode) && rootNode.previousSibling !== null && isTextNode(rootNode.previousSibling)) {
 			rootNode = rootNode.previousSibling;
-			require_formatText.context_default.hydrationNode = rootNode;
+			context_default.hydrationNode = rootNode;
 		}
 		if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
 			rootNode = rootNode.nextSibling;
-			require_formatText.context_default.hydrationNode = rootNode;
+			context_default.hydrationNode = rootNode;
 		}
-		const range = require_formatText.context_default.activeRange;
-		if (range.startNode === null) range.startNode = rootNode;
+		const region = context_default.activeRegion;
+		if (region.startNode === null) region.startNode = rootNode;
 		return rootNode;
 	} else return parent.firstChild;
 }
@@ -662,33 +788,216 @@ function nodeSkip(node, count) {
 * Runs an`if`, `switch` or `await` control statement
 * @param create A function that creates the control statement's branches
 */
-function runControl(range, anchor, create) {
-	const oldRange = pushRange(range, true);
+function runControl(region, anchor, create) {
+	let first = true;
 	$run(function runControl$1() {
-		const oldBranchRange = pushRange(range);
+		const oldRegion = pushRegion(region, first);
+		first = false;
 		create(anchor);
-		popRange(oldBranchRange);
+		popRegion(oldRegion);
 	});
-	if (require_formatText.context_default.hydrationNode) anchor = require_formatText.context_default.hydrationNode.nextSibling;
-	popRange(oldRange);
+	if (context_default.hydrationNode) anchor = context_default.hydrationNode.nextSibling;
 }
 
 //#endregion
 //#region src/render/runControlBranch.ts
-function runControlBranch(range, create) {
-	if (range.depth === -2) return;
-	if (range.nextRange !== null && range.nextRange.depth > range.depth) clearRange(range.nextRange);
-	const oldRange = pushRange(newRange(), true);
+function runControlBranch(region, create, name) {
+	if (region.depth === -2) return;
+	if (region.nextRegion !== null && region.nextRegion.depth > region.depth) clearRegion(region.nextRegion);
+	const oldRegion = pushRegion(newRegion(name), true);
 	create();
-	popRange(oldRange);
+	popRegion(oldRegion);
+}
+
+//#endregion
+//#region src/watch/propagateSignal.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
+*/
+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;
+			}
+		} finally {
+			batchEnd();
+		}
+	}
+}
+
+//#endregion
+//#region src/watch/symbols.ts
+const proxyDataSymbol = Symbol("_proxy_data");
+const proxyHandledSymbol = Symbol("_proxy_handled");
+
+//#endregion
+//#region src/watch/trackProxySignal.ts
+function trackProxySignal(data, key) {
+	let signal = data.signals.get(key);
+	if (signal === void 0) {
+		signal = {
+			type: SIGNAL_TYPE,
+			firstTarget: null,
+			nextSignalToUpdate: null
+		};
+		data.signals.set(key, signal);
+	}
+	trackSignal(signal);
+}
+
+//#endregion
+//#region src/watch/proxyGet.ts
+function proxyGet(target, key, receiver) {
+	let data = target[proxyDataSymbol];
+	if (key === proxyDataSymbol) return data;
+	let signal = data.signals.get(key);
+	if (signal === void 0) {
+		const propDescriptor = Object.getOwnPropertyDescriptor(target, key);
+		if (propDescriptor !== void 0) {
+			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);
+				}
+				trackProxySignal(data, key);
+			} else if (propDescriptor.get) {
+				const oldRegisterComputed = context_default.registerComputed;
+				try {
+					context_default.registerComputed = (computed) => {
+						data.signals.set(key, computed);
+					};
+					return Reflect.get(target, key, receiver);
+				} finally {
+					context_default.registerComputed = oldRegisterComputed;
+				}
+			}
+		} else if (data.isArray) {
+			if (arrayWrapper[key] !== void 0) return arrayWrapper[key](data, target, key);
+		}
+	} else if (signal.type === SIGNAL_TYPE) trackProxySignal(data, key);
+	else if (signal.type === COMPUTED_TYPE) {
+		if (signal.running) throw new Error("Cycle detected");
+		else if (signal.recalc) checkComputed(signal);
+		else if (signal.didError) throw signal.value;
+		else trackSignal(signal);
+		return signal.value;
+	}
+	return Reflect.get(target, key, receiver);
+}
+const arrayWrapper = {
+	[Symbol.iterator]: function(data, target, key) {
+		trackProxySignal(data, "length");
+		context_default.activeTarget = null;
+		return target[key];
+	},
+	pop: arrayHandle,
+	push: arrayHandle,
+	reverse: arrayHandle,
+	shift: arrayHandle,
+	sort: arrayHandle,
+	splice: arrayHandle,
+	unshift: arrayHandle
+};
+function arrayHandle(data, target, key) {
+	return function(...args) {
+		const result = target[key].apply(target, args);
+		propagateSignal(data, "length");
+		return result;
+	};
+}
+
+//#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");
+		let data = target[proxyDataSymbol];
+		require_devContext.devContext_default.signalSet(data, key);
+		if (oldValue && oldValue[proxyDataSymbol] !== void 0) value = $watch(value, { shallow: oldValue[proxyDataSymbol].shallow });
+		Reflect.set(target, key, value, receiver);
+		propagateSignal(data, key);
+		if (data.isArray && !isNaN(+String(key))) propagateSignal(data, "length");
+	}
+	return true;
+}
+
+//#endregion
+//#region src/watch/$watch.ts
+/**
+* Watches an object and runs effects when its properties are changed
+*
+* @param object The object to watch
+*/
+function $watch(object, options) {
+	if (object === void 0 || object === null || object[proxyDataSymbol] !== void 0) return object;
+	const data = {
+		target: object,
+		isArray: Array.isArray(object),
+		shallow: options?.shallow === true,
+		signals: /* @__PURE__ */ new Map()
+	};
+	object[proxyDataSymbol] = data;
+	const handler = {
+		get: proxyGet,
+		set: proxySet
+	};
+	const proxy = new Proxy(object, handler);
+	require_devContext.devContext_default.onWatch(data);
+	return proxy;
 }
 
 //#endregion
-//#region src/render/moveRange.ts
-function moveRange(parent, range, before) {
+//#region src/render/moveRegion.ts
+function moveRegion(parent, region, before) {
 	parent = before?.parentNode ?? parent;
-	const endNode = range.endNode ?? range.startNode;
-	let currentNode = range.startNode;
+	const endNode = region.endNode ?? region.startNode;
+	let currentNode = region.startNode;
 	while (currentNode !== null) {
 		const nextNode = currentNode.nextSibling;
 		parent.insertBefore(currentNode, before);
@@ -700,14 +1009,14 @@ function moveRange(parent, range, before) {
 //#endregion
 //#region src/render/runListItems.ts
 /**
-* @param range The list's range
+* @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 create A function that creates the DOM elements for a new item
 */
-function runListItems(range, parent, anchor, oldItems, newItems, create, update) {
+function runListItems(region, parent, anchor, oldItems, newItems, create, update) {
 	let oldStartIndex = 0;
 	let oldEndIndex = oldItems.length - 1;
 	let oldStartItem = oldItems[0];
@@ -731,12 +1040,12 @@ function runListItems(range, parent, anchor, oldItems, newItems, create, update)
 		oldEndItem = oldItems[--oldEndIndex];
 		newEndItem = newItems[--newEndIndex];
 	} else if (oldStartItem.key === newEndItem.key) {
-		moveRange(parent, oldStartItem, oldEndItem.endNode.nextSibling);
+		moveRegion(parent, oldStartItem, oldEndItem.endNode.nextSibling);
 		transferListItemData(oldStartItem, newEndItem, update);
 		oldStartItem = oldItems[++oldStartIndex];
 		newEndItem = newItems[--newEndIndex];
 	} else if (oldEndItem.key === newStartItem.key) {
-		moveRange(parent, oldEndItem, oldStartItem.startNode);
+		moveRegion(parent, oldEndItem, oldStartItem.startNode);
 		transferListItemData(oldEndItem, newStartItem, update);
 		oldEndItem = oldItems[--oldEndIndex];
 		newStartItem = newItems[++newStartIndex];
@@ -750,24 +1059,28 @@ function runListItems(range, parent, anchor, oldItems, newItems, create, update)
 		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);
-			newStartItem.previousRange = oldStartItem.previousRange;
-			newStartItem.nextRange = oldStartItem;
-			oldStartItem.previousRange = newStartItem;
-			clearRange(oldStartItem);
+			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) {
-			clearRange(oldStartItem);
+			clearRegion(oldStartItem);
 			oldStartItem = oldItems[++oldStartIndex];
 		} else {
 			const oldData = oldItems[oldIndex];
-			moveRange(parent, oldData, oldStartItem.startNode);
+			moveRegion(parent, oldData, oldStartItem.startNode);
 			transferListItemData(oldData, newStartItem, update);
 			oldItems[oldIndex] = null;
 			newStartItem = newItems[++newStartIndex];
@@ -776,19 +1089,22 @@ function runListItems(range, parent, anchor, oldItems, newItems, create, update)
 	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;
 		}
-	} else for (; oldEndIndex >= oldStartIndex; oldStartItem = oldItems[oldEndIndex--]) clearRange(oldStartItem);
-	if (newItems.length > 0) range.nextRange = newItems[0];
-	else if (oldItems.length > 0) range.nextRange = oldItems[oldItems.length - 1].nextRange;
+	} 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;
 }
 
 //#endregion
@@ -797,19 +1113,19 @@ function transferListItemData(oldItem, newItem, update) {
 * Runs a `for` control statement
 * @param create A function that creates the control statement's branches
 */
-function runList(range, parent, anchor, buildItems, create, update) {
-	const oldRange = pushRange(range, true);
+function runList(region, parent, anchor, buildItems, create, update) {
+	let first = true;
 	let listItems = [];
 	$run(function runList$1() {
-		const oldBranchRange = pushRange(range);
+		const oldRegion = pushRegion(region, first);
+		first = false;
 		const newItems = buildItems();
-		require_formatText.context_default.activeTarget = null;
-		runListItems(range, parent, anchor, listItems, newItems, create, update);
+		context_default.activeTarget = null;
+		runListItems(region, parent, anchor, listItems, newItems, create, update);
 		listItems = newItems;
-		popRange(oldBranchRange);
+		popRegion(oldRegion);
 	});
-	if (require_formatText.context_default.hydrationNode !== null) anchor = require_formatText.context_default.hydrationNode.nextSibling;
-	popRange(oldRange);
+	if (context_default.hydrationNode !== null) anchor = context_default.hydrationNode.nextSibling;
 }
 
 //#endregion
@@ -822,12 +1138,87 @@ function setAttribute(el, name, value) {
 //#endregion
 //#region src/render/setDynamicElement.ts
 function setDynamicElement(el, tag) {
-	if (require_formatText.context_default.hydrationNode !== null) return el;
+	if (context_default.hydrationNode !== null) return el;
 	let newElement = el.ownerDocument.createElement(tag);
 	el.replaceWith(newElement);
 	return newElement;
 }
 
+//#endregion
+//#region src/watch/$batch.ts
+/**
+* Runs updates to proxy values in a batch, where the updates are stored in
+* context, and dependent effects are run all at once at the end.
+*
+* @param fn The function containing the batched updates to run.
+*/
+function $batch(fn) {
+	if (context_default.batch > 0) return fn();
+	batchStart();
+	try {
+		return fn();
+	} finally {
+		batchEnd();
+	}
+}
+
+//#endregion
+//#region src/watch/$cache.ts
+/**
+* Caches a computed value from signals accessed in a property getter.
+*
+* @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");
+	let computed = {
+		type: COMPUTED_TYPE,
+		value: null,
+		run: fn,
+		firstSource: null,
+		firstTarget: null,
+		recalc: false,
+		running: false,
+		didError: false,
+		rollback: null
+	};
+	context_default.registerComputed(computed);
+	runComputed(computed);
+	return computed.value;
+}
+
+//#endregion
+//#region src/watch/$mount.ts
+/**
+* Runs and re-runs a function on component mount
+*
+* @param fn The function to run, which may return a cleanup function
+*/
+function $mount(fn) {
+	context_default.mountEffects.push(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;
+}
+
+//#endregion
+//#region src/watch/$unwrap.ts
+/**
+* Returns the target object of a proxy
+*
+* @param object The proxy object
+*/
+function $unwrap(object) {
+	return object !== void 0 && object !== null && object[proxyDataSymbol] !== void 0 ? object[proxyDataSymbol].target ?? object : object;
+}
+
 //#endregion
 //#region src/wrappers/ReactiveDate.ts
 let initialized = false;
@@ -855,13 +1246,13 @@ var ReactiveDate = class ReactiveDate extends Date {
 			if (method.startsWith("get") || method.startsWith("to") || method === "valueOf") reactivePrototype[method] = function(...args) {
 				const data = this[proxyDataSymbol];
 				const result = datePrototype[method].apply(this, args);
-				trackProxyEffect(data, "#time");
+				trackProxySignal(data, "#time");
 				return result;
 			};
 			if (method.startsWith("set")) reactivePrototype[method] = function(...args) {
 				const data = this[proxyDataSymbol];
 				const result = datePrototype[method].apply(this, args);
-				updateSignal(data, "#time");
+				propagateSignal(data, "#time");
 				return result;
 			};
 		}
@@ -869,10 +1260,10 @@ var ReactiveDate = class ReactiveDate extends Date {
 };
 
 //#endregion
-exports.$batch = require_formatText.$batch;
-exports.$cache = require_formatText.$cache;
+exports.$batch = $batch;
+exports.$cache = $cache;
 exports.$mount = $mount;
-exports.$peek = require_formatText.$peek;
+exports.$peek = $peek;
 exports.$run = $run;
 exports.$unwrap = $unwrap;
 exports.$watch = $watch;
@@ -894,9 +1285,9 @@ exports.t_fmt = require_formatText.formatText;
 exports.t_fragment = getFragment;
 exports.t_list_item = newListItem;
 exports.t_next = nodeNext;
-exports.t_pop_range = popRange;
-exports.t_push_range = pushRange;
-exports.t_range = newRange;
+exports.t_pop_region = popRegion;
+exports.t_push_region = pushRegion;
+exports.t_region = newRegion;
 exports.t_root = nodeRoot;
 exports.t_run_branch = runControlBranch;
 exports.t_run_control = runControl;