@torpor/view 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -1,926 +1,906 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  $mount: () => $mount,
-  $run: () => $run,
-  $unwrap: () => $unwrap,
-  $watch: () => $watch,
-  clearLayoutSlot: () => clearLayoutSlot,
-  fillLayoutSlot: () => fillLayoutSlot,
-  hydrate: () => hydrate,
-  mount: () => mount,
-  t_add_fragment: () => addFragment,
-  t_anchor: () => nodeAnchor,
-  t_animate: () => addAnimation,
-  t_apply_props: () => applyProps,
-  t_attribute: () => setAttribute,
-  t_child: () => nodeChild,
-  t_class: () => buildClasses,
-  t_dynamic: () => setDynamicElement,
-  t_event: () => addEvent,
-  t_fmt: () => formatText,
-  t_fragment: () => getFragment,
-  t_list_item: () => newListItem,
-  t_next: () => nodeNext,
-  t_pop_range: () => popRange,
-  t_push_range: () => pushRange,
-  t_range: () => newRange,
-  t_root: () => nodeRoot,
-  t_run_branch: () => runControlBranch,
-  t_run_control: () => runControl,
-  t_run_list: () => runList,
-  t_skip: () => nodeSkip,
-  t_style: () => buildStyles
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/render/context.ts
-var context = {
-  activeEffect: null,
-  activeRange: null,
-  mountEffects: [],
-  stashedEvents: [],
-  stashedAnimations: [],
-  hydrationNode: null
-  //hn: null,
-  //get hydrationNode() {
-  //	return this.hn;
-  //},
-  //set hydrationNode(value) {
-  //	console.log(`set hydration ${printNode(value)}`);
-  //	this.hn = value;
-  //},
-};
-var context_default = context;
-
-// src/render/$mount.ts
+const require_formatText = require('./formatText-DufG5l83.cjs');
+
+//#region src/render/$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);
-}
-
-// src/watch/runEffect.ts
-function runEffect(effect) {
-  effect.active = true;
-  context_default.activeEffect = effect;
-  const cleanup = effect.run();
-  if (typeof cleanup === "function") {
-    effect.cleanup = cleanup;
-  }
-  context_default.activeEffect = null;
-}
-
-// src/render/$run.ts
-function $run(fn) {
-  let effect = {
-    run: fn,
-    cleanup: null,
-    props: null,
-    active: true
-  };
-  if (context_default.activeRange) {
-    (context_default.activeRange.effects ??= []).push(effect);
-  }
-  runEffect(effect);
-}
-
-// src/watch/symbols.ts
-var proxyDataSymbol = Symbol("_proxy_data");
-
-// src/render/$unwrap.ts
+	require_formatText.context_default.mountEffects.push(fn);
+}
+
+//#endregion
+//#region src/render/$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: 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;
+}
+
+//#endregion
+//#region src/watch/symbols.ts
+const proxyDataSymbol = Symbol("_proxy_data");
+const proxyHandledSymbol = Symbol("_proxy_handled");
+
+//#endregion
+//#region src/render/$unwrap.ts
+/**
+* Returns the target object of a proxy
+*
+* @param object The proxy object
+*/
 function $unwrap(object) {
-  return object && object[proxyDataSymbol] ? object[proxyDataSymbol].target || object : object;
-}
-
-// src/watch/trackEffect.ts
-function trackEffect(data, key) {
-  if (context_default.activeEffect) {
-    let propState = data.propData.get(key);
-    if (!propState) {
-      propState = { effects: [] };
-      data.propData.set(key, propState);
-    }
-    propState.effects ||= [];
-    propState.effects.push(context_default.activeEffect);
-    context_default.activeEffect.props ||= [];
-    context_default.activeEffect.props.push(propState);
-  }
-}
-
-// src/watch/removeEffect.ts
-function removeEffect(effect) {
-  if (effect.cleanup) {
-    effect.cleanup();
-  }
-  if (effect.props) {
-    for (let prop of effect.props) {
-      if (prop.effects) {
-        let length = prop.effects.length;
-        let i = length;
-        while (i--) {
-          if (prop.effects[i] === effect) {
-            prop.effects[i] = prop.effects[length - 1];
-            prop.effects.pop();
-            length -= 1;
-          }
-        }
-      }
-    }
-  }
-  effect.active = false;
-}
-
-// src/watch/triggerEffects.ts
-function triggerEffects(data, key) {
-  let effects = data.propData.get(key)?.effects;
-  if (effects) {
-    for (let effect of effects.slice()) {
-      if (effect.active) {
-        removeEffect(effect);
-        runEffect(effect);
-      }
-    }
-  }
-}
-
-// src/watch/proxyGet.ts
-function proxyGet(target, key, receiver, data) {
-  if (key === proxyDataSymbol) {
-    return data;
-  }
-  if (!data.propData.has(key)) {
-    if (!data.shallow) {
-      let value = target[key];
-      if (value && typeof value === "object" && !value[proxyDataSymbol] && !value.then) {
-        target[key] = $watch(value);
-      }
-    }
-    data.propData.set(key, null);
-  }
-  if (data.isArray) {
-    if (key === "pop" || key === "push" || key === "reverse" || key === "shift" || key === "sort" || key === "splice" || key === "unshift") {
-      const targetFunction = target[key];
-      return function(...args) {
-        targetFunction.apply(target, args);
-        triggerEffects(data, "length");
-      };
-    } else if (key === Symbol.iterator) {
-      trackEffect(data, "length");
-      context_default.activeEffect = null;
-    } else {
-      trackEffect(data, key);
-    }
-  } else {
-    trackEffect(data, key);
-  }
-  return Reflect.get(target, key, receiver);
-}
-
-// src/watch/transferEffects.ts
-function transferEffects(oldValue, newValue) {
-  const oldData = oldValue[proxyDataSymbol];
-  const newData = newValue[proxyDataSymbol];
-  moveChildEffects(oldValue, newValue, oldData, newData);
-}
-function moveChildEffects(oldValue, newValue, oldData, newData) {
-  for (let [key, props] of oldData.propData.entries()) {
-    if (props) {
-      newData.propData.set(key, props);
-      let oldPropValue = oldValue[key];
-      let oldPropData = oldPropValue != null ? oldPropValue[proxyDataSymbol] : void 0;
-      if (oldPropData) {
-        newValue[key] = $watch(newValue[key]);
-      }
-      let newPropValue = newValue[key];
-      if (props.effects) {
-        for (let effect of props.effects) {
-          if (effect.cleanup) {
-            effect.cleanup();
-          }
-          if (newPropValue) {
-            effect.run();
-          }
-        }
-      }
-      if (oldPropData) {
-        let newPropData = newPropValue[proxyDataSymbol];
-        moveChildEffects(oldPropValue, newPropValue, oldPropData, newPropData);
-      }
-    }
-  }
-}
-
-// src/watch/proxySet.ts
-function proxySet(target, key, value, receiver, data) {
-  const oldValue = target[key];
-  if (value !== oldValue) {
-    let newValue = value;
-    if (oldValue && oldValue[proxyDataSymbol]) {
-      newValue = $watch(value);
-      transferEffects(oldValue, newValue);
-    }
-    Reflect.set(target, key, newValue, receiver);
-    triggerEffects(data, key);
-    if (data.isArray && !isNaN(+String(key))) {
-      triggerEffects(data, "length");
-    }
-  }
-  return true;
-}
-
-// src/render/$watch.ts
+	return object !== void 0 && object !== null && object[proxyDataSymbol] !== void 0 ? object[proxyDataSymbol].target ?? object : object;
+}
+
+//#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);
+	}
+	require_formatText.trackEffect(signal);
+}
+
+//#endregion
+//#region src/watch/updateSignal.ts
+let lastEffect;
+/**
+* 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 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();
+		}
+	}
+}
+
+//#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;
+				}
+			}
+		} 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;
+	}
+	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");
+	}
+	return true;
+}
+
+//#endregion
+//#region src/render/$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 == null || object[proxyDataSymbol]) {
-    return object;
-  }
-  const data = {
-    target: object,
-    isArray: Array.isArray(object),
-    shallow: !!options?.shallow,
-    propData: /* @__PURE__ */ new Map()
-  };
-  const handler = {
-    get: function(target, prop, receiver) {
-      return proxyGet(target, prop, receiver, data);
-    },
-    set: function(target, prop, value, receiver) {
-      return proxySet(target, prop, value, receiver, data);
-    }
-  };
-  return new Proxy(object, handler);
-}
-
-// src/render/addAnimation.ts
+	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);
+}
+
+//#endregion
+//#region src/render/addAnimation.ts
 function addAnimation(el, entry, exit) {
-  context_default.stashedAnimations.push({
-    range: context_default.activeRange,
-    el,
-    in: entry,
-    out: exit
-  });
+	require_formatText.context_default.stashedAnimations.push({
+		range: require_formatText.context_default.activeRange,
+		el,
+		in: entry,
+		out: exit
+	});
 }
 
-// src/render/addEvent.ts
+//#endregion
+//#region src/render/addEvent.ts
 function addEvent(el, type, listener) {
-  context_default.stashedEvents.push({ range: context_default.activeRange, el, type, listener });
-}
-
-// src/motion/animate.ts
+	require_formatText.context_default.stashedEvents.push({
+		range: require_formatText.context_default.activeRange,
+		el,
+		type,
+		listener
+	});
+}
+
+//#endregion
+//#region src/motion/animate.ts
+/**
+* Adds an animation for an element
+* @param el The element to animate
+* @param enter Whether the animation is being run on enter
+* @param keyframes The Web Animation API keyframes
+* @param options The Web Animmation API options
+*/
 async function animate(el, enter, keyframes, options) {
-  let animationOptions = Object.assign(
-    {
-      direction: enter ? "normal" : "reverse",
-      // TODO: Should probably have a global setting for these somewhere
-      // And respect browser reduce motion settings
-      duration: 300,
-      easing: "ease-in-out",
-      fill: "forwards"
-    },
-    options
-  );
-  const animation = el.animate(keyframes, animationOptions);
-  setTimeout(() => {
-    animation.timeline = el.ownerDocument.timeline;
-  }, 1);
-  let activeRange = context_default.activeRange;
-  if (activeRange) {
-    activeRange.animations ??= /* @__PURE__ */ new Set();
-    activeRange.animations.add(animation);
-    await animation.finished;
-    activeRange.animations.delete(animation);
-  }
-}
-
-// src/render/isFragmentNode.ts
+	let animationOptions = Object.assign({
+		direction: enter ? "normal" : "reverse",
+		duration: 300,
+		easing: "ease-in-out",
+		fill: "forwards"
+	}, options);
+	const animation = el.animate(keyframes, animationOptions);
+	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);
+	}
+}
+
+//#endregion
+//#region src/render/isFragmentNode.ts
 function isFragmentNode(node) {
-  return node?.nodeType === 11;
+	return node.nodeType === 11;
 }
 
-// src/render/addFragment.ts
+//#endregion
+//#region src/render/addFragment.ts
 function addFragment(fragment, parent, before, endNode) {
-  const range = context_default.activeRange;
-  const hydrationNode = context_default.hydrationNode;
-  if (range) {
-    if (hydrationNode) {
-      range.endNode = endNode ?? hydrationNode;
-    } else {
-      range.startNode = fragment.firstChild;
-      range.endNode = fragment.lastChild;
-    }
-  }
-  let parentIsFragment = isFragmentNode(parent);
-  if (!hydrationNode) {
-    if (parentIsFragment) {
-      parent = before.parentNode;
-    }
-    parent.insertBefore(fragment, before);
-  }
-  if (!parentIsFragment) {
-    if (!hydrationNode) {
-      for (let effect of context_default.mountEffects) {
-        $run(effect);
-      }
-      context_default.mountEffects.length = 0;
-    }
-    for (let event of context_default.stashedEvents) {
-      context_default.activeRange = event.range;
-      $run(function addFragmentEvent() {
-        event.el.addEventListener(event.type, event.listener);
-        return () => {
-          event.el.removeEventListener(event.type, event.listener);
-        };
-      });
-    }
-    context_default.stashedEvents.length = 0;
-    for (let animation of context_default.stashedAnimations) {
-      context_default.activeRange = animation.range;
-      $run(function addFragmentAnimation() {
-        if (animation.in) {
-          animate(animation.el, true, animation.in.keyframes, animation.in.options);
-        }
-        if (animation.out) {
-          return () => {
-            animate(animation.el, false, animation.out.keyframes, animation.out.options);
-          };
-        }
-      });
-    }
-    context_default.stashedAnimations.length = 0;
-    context_default.activeRange = range;
-  }
-}
-
-// src/render/applyProps.ts
+	const range = require_formatText.context_default.activeRange;
+	const hydrationNode = require_formatText.context_default.hydrationNode;
+	if (hydrationNode !== null) range.endNode = endNode ?? hydrationNode;
+	else {
+		range.startNode = fragment.firstChild;
+		range.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 event of require_formatText.context_default.stashedEvents) {
+			require_formatText.context_default.activeRange = event.range;
+			$run(function addFragmentEvent() {
+				event.el.addEventListener(event.type, event.listener);
+				return () => {
+					event.el.removeEventListener(event.type, event.listener);
+				};
+			});
+		}
+		require_formatText.context_default.stashedEvents.length = 0;
+		for (let animation of require_formatText.context_default.stashedAnimations) {
+			require_formatText.context_default.activeRange = animation.range;
+			$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);
+				};
+			});
+		}
+		require_formatText.context_default.stashedAnimations.length = 0;
+		require_formatText.context_default.activeRange = range;
+	}
+}
+
+//#endregion
+//#region src/render/applyProps.ts
 function applyProps(el, props, propNamesUsed) {
-  if (props) {
-    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 setAttribute2() {
-            el.setAttribute(name, value);
-          });
-        }
-      }
-    }
-  }
-}
-
-// src/render/buildClasses.ts
-function buildClasses(value, styleHash) {
-  if (typeof value === "string") {
-    if (styleHash) {
-      value += " " + styleHash;
-    }
-    return value;
-  } else {
-    let classes = [];
-    gatherNames("", value, classes);
-    if (styleHash) {
-      classes.push(styleHash);
-    }
-    return classes.join(" ");
-  }
-}
-function gatherNames(name, value, classes) {
-  if (value) {
-    if (Array.isArray(value)) {
-      for (let v of value) {
-        gatherNames(v, v, classes);
-      }
-    } else if (typeof value === "object") {
-      for (let [n, v] of Object.entries(value)) {
-        gatherNames(n, v, classes);
-      }
-    } else {
-      classes.push(name);
-    }
-  }
-}
-
-// src/render/buildStyles.ts
-function buildStyles(value) {
-  if (typeof value === "string") {
-    return value;
-  } else {
-    let styles = [];
-    if (value) {
-      if (Array.isArray(value)) {
-        for (let v of value) {
-          styles.push(v);
-        }
-      } else if (typeof value === "object") {
-        for (let [n, v] of Object.entries(value)) {
-          styles.push(`${n}: ${v}`);
-        }
-      }
-    }
-    return styles.join("; ");
-  }
-}
-
-// src/render/clearRange.ts
+	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() {
+			el.setAttribute(name, value);
+		});
+	}
+}
+
+//#endregion
+//#region src/render/clearRange.ts
 function clearRange(range) {
-  let animations = [];
-  clearEffects(range, animations);
-  if (animations.length) {
-    Promise.all(animations.map((a) => a.finished)).then(() => clearNodes(range));
-  } else {
-    clearNodes(range);
-  }
-}
-function clearEffects(range, animations) {
-  if (range.effects) {
-    const oldRange = context_default.activeRange;
-    context_default.activeRange = range;
-    for (let effect of range.effects) {
-      removeEffect(effect);
-    }
-    context_default.activeRange = oldRange;
-  }
-  if (range.animations) {
-    for (let animation of range.animations) {
-      animations.push(animation);
-    }
-  }
-  if (range.children) {
-    for (let child of range.children) {
-      clearEffects(child, animations);
-    }
-    range.children.length = 0;
-  }
+	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) {
+			animations ??= [];
+			animations.push(...childRange.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) {
-    let currentNode = range.endNode || range.startNode;
-    if (range.startNode.parentNode !== currentNode.parentNode) {
-      throw new Error("range nodes have different parents");
-    }
-    while (currentNode !== range.startNode) {
-      let nextNode = currentNode.previousSibling;
-      currentNode.remove();
-      currentNode = nextNode;
-    }
-    currentNode.remove();
-    range.startNode = null;
-    range.endNode = null;
-  }
-}
-
-// src/render/clearLayoutSlot.ts
+	if (range.startNode !== null && range.endNode !== null) {
+		let currentNode = range.endNode;
+		while (currentNode !== range.startNode) {
+			let previousNode = currentNode.previousSibling;
+			currentNode.remove();
+			currentNode = previousNode;
+		}
+		currentNode.remove();
+	}
+	releaseRange(range);
+}
+function releaseRange(range) {
+	range.startNode = null;
+	range.endNode = null;
+	range.previousRange = null;
+	range.nextRange = null;
+	range.animations = null;
+}
+
+//#endregion
+//#region src/render/clearLayoutSlot.ts
 function clearLayoutSlot(range) {
-  clearRange(range);
+	clearRange(range);
 }
 
-// src/render/newRange.ts
-function newRange() {
-  return {
-    startNode: null,
-    endNode: null,
-    children: null,
-    index: 0,
-    effects: null,
-    animations: null
-  };
+//#endregion
+//#region src/render/newRange.ts
+function newRange(name) {
+	return {
+		startNode: null,
+		endNode: null,
+		previousRange: null,
+		nextRange: null,
+		depth: -1,
+		animations: null,
+		name
+	};
 }
 
-// src/render/popRange.ts
+//#endregion
+//#region src/render/popRange.ts
 function popRange(oldRange) {
-  context_default.activeRange = oldRange;
+	require_formatText.context_default.activeRange = oldRange;
 }
 
-// src/render/pushRange.ts
+//#endregion
+//#region src/render/pushRange.ts
 function pushRange(range, toParent = false) {
-  const activeRange = context_default.activeRange;
-  if (toParent && activeRange) {
-    (activeRange.children ??= []).push(range);
-  }
-  context_default.activeRange = range;
-  return activeRange;
-}
-
-// src/render/fillLayoutSlot.ts
+	const activeRange = require_formatText.context_default.activeRange;
+	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;
+	}
+	require_formatText.context_default.activeRange = range;
+	require_formatText.context_default.previousRange = range;
+	return activeRange;
+}
+
+//#endregion
+//#region src/render/fillLayoutSlot.ts
 function fillLayoutSlot(component, slot, parent, anchor, $props, $context) {
-  const range = newRange();
-  const oldRange = pushRange(range);
-  component(parent, anchor, $props, $context, {
-    _: slot
-  });
-  popRange(oldRange);
-  return range;
-}
-
-// src/render/formatText.ts
-function formatText(value) {
-  return value ?? "";
+	const range = newRange();
+	const oldRange = pushRange(range);
+	component(parent, anchor, $props, $context, { _: slot });
+	popRange(oldRange);
+	return range;
 }
 
-// src/render/getFragment.ts
+//#endregion
+//#region src/render/getFragment.ts
 function getFragment(document, array, index, html, ns) {
-  if (array[index] === void 0) {
-    if (ns) {
-      const template = document.createElementNS("http://www.w3.org/2000/svg", "template");
-      template.innerHTML = html;
-      const fragment2 = new DocumentFragment();
-      fragment2.append(...template.childNodes);
-      array[index] = fragment2;
-    } else {
-      const template = document.createElement("template");
-      template.innerHTML = html;
-      array[index] = template.content;
-    }
-  }
-  let fragment = array[index].cloneNode(true);
-  return fragment;
-}
-
-// src/render/hydrate.ts
+	if (array[index] === void 0) if (ns === true) {
+		const template = document.createElementNS("http://www.w3.org/2000/svg", "template");
+		template.innerHTML = html;
+		const fragment = new DocumentFragment();
+		fragment.append(...template.childNodes);
+		array[index] = fragment;
+	} else {
+		const template = document.createElement("template");
+		template.innerHTML = html;
+		array[index] = template.content;
+	}
+	return array[index].cloneNode(true);
+}
+
+//#endregion
+//#region src/render/hydrate.ts
+/**
+* Hydrates a component into an existing DOM tree
+* @param parent The parent node
+* @param component The component to mount
+* @param props An object containing component props
+*/
 function hydrate(parent, component, props, slots) {
-  context_default.hydrationNode = parent.firstChild;
-  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;
-}
-
-// src/render/mount.ts
+	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);
+	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;
+}
+
+//#endregion
+//#region src/render/mount.ts
+/**
+* Mounts a component into a DOM node
+*
+* @param parent The node to mount the component into
+* @param component The component to mount
+* @param props An object containing component props
+*/
 function mount(parent, component, props, slots) {
-  if (parent.childElementCount) {
-    throw new Error("The parent node must have no child elements");
-  }
-  while (parent.firstChild) {
-    parent.firstChild.remove();
-  }
-  component(parent, null, props, void 0, 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);
+	component(parent, null, props, void 0, slots);
 }
 
-// src/render/newListItem.ts
+//#endregion
+//#region src/render/newListItem.ts
 function newListItem(data, key) {
-  return {
-    startNode: null,
-    endNode: null,
-    children: null,
-    index: 0,
-    effects: null,
-    animations: null,
-    data,
-    key
-  };
-}
-
-// src/render/hydrationMarkers.ts
-var HYDRATION_START = "[";
-var HYDRATION_END = "]";
-var HYDRATION_BREAK = "^";
-
-// src/render/isCommentNode.ts
+	return {
+		startNode: null,
+		endNode: null,
+		previousRange: null,
+		nextRange: null,
+		depth: -1,
+		animations: null,
+		data,
+		key
+	};
+}
+
+//#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;
+	return node.nodeType === 8;
 }
 
-// src/render/isTextNode.ts
+//#endregion
+//#region src/render/isTextNode.ts
 function isTextNode(node) {
-  return node?.nodeType === 3;
-}
-
-// src/render/nodeCheckHydrationBreak.ts
+	return node.nodeType === 3;
+}
+
+//#endregion
+//#region src/render/nodeCheckHydrationBreak.ts
+/**
+* When hydrating, removes and skips hydration comments that are inserted at the
+* start of branches and used to split up text nodes that would otherwise be
+* joined in HTML.
+*
+* @param node The node to check and maybe skip.
+* @returns The next node.
+*/
 function nodeCheckHydrationBreak(node) {
-  if (context_default.hydrationNode) {
-    if (node && isCommentNode(node) && node.data === HYDRATION_BREAK) {
-      let comment = node;
-      node = node.nextSibling;
-      comment.remove();
-    }
-    context_default.hydrationNode = node;
-  }
-  return node;
-}
-
-// src/render/nodeNext.ts
+	if (require_formatText.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;
+	}
+	return node;
+}
+
+//#endregion
+//#region src/render/nodeNext.ts
+/**
+* Gets the next sibling of a node.
+*
+* When hydrating, sets the hydration node.
+*
+* @param node The node.
+* @param text Whether we require a text node.
+*/
 function nodeNext(node, text = false) {
-  if (context_default.hydrationNode && text && isTextNode(node)) {
-    return node;
-  }
-  let nextNode = nodeCheckHydrationBreak(node.nextSibling);
-  return nextNode;
-}
-
-// src/render/nodeAnchor.ts
+	if (require_formatText.context_default.hydrationNode !== null && text && isTextNode(node)) return node;
+	return nodeCheckHydrationBreak(node.nextSibling);
+}
+
+//#endregion
+//#region src/render/nodeAnchor.ts
+/**
+* Gets the anchor node for a control statement or component.
+*
+* When mounting, this just returns the anchor node parameter (because it was
+* created).
+*
+* When hydrating, there should be matched <![> and <!]> comments in the HTML,
+* and the anchor node should be after the end comment. The matched comment
+* nodes will be deleted, and the hydration node set to the first node inside
+* the matched comments.
+*
+* @param node The potential anchor node.
+* @returns The anchor node.
+*/
 function nodeAnchor(node) {
-  if (context_default.hydrationNode) {
-    if (isCommentNode(node) && node.data === HYDRATION_START) {
-      let currentNode = nodeNext(node);
-      node.remove();
-      let level = 1;
-      while (currentNode) {
-        if (isCommentNode(currentNode)) {
-          if (currentNode.data === HYDRATION_START) {
-            level += 1;
-          } else if (currentNode.data === HYDRATION_END) {
-            level -= 1;
-            if (level === 0) {
-              const endNode = currentNode.nextSibling;
-              currentNode.remove();
-              if (context_default.hydrationNode === currentNode) {
-                context_default.hydrationNode = endNode;
-              }
-              return endNode;
-            }
-          }
-        }
-        currentNode = currentNode.nextSibling;
-      }
-      if (!currentNode) {
-        throw new Error("End hydration comment not found");
-      }
-    }
-  }
-  return node;
-}
-
-// src/render/nodeChild.ts
+	if (require_formatText.context_default.hydrationNode !== null) {
+		if (isCommentNode(node) && node.data === HYDRATION_START) {
+			let currentNode = nodeNext(node);
+			node.remove();
+			let level = 1;
+			while (currentNode !== null) {
+				if (isCommentNode(currentNode)) {
+					if (currentNode.data === HYDRATION_START) level += 1;
+					else if (currentNode.data === HYDRATION_END) {
+						level -= 1;
+						if (level === 0) {
+							const endNode = currentNode.nextSibling;
+							currentNode.remove();
+							if (require_formatText.context_default.hydrationNode === currentNode) require_formatText.context_default.hydrationNode = endNode;
+							return endNode;
+						}
+					}
+				}
+				currentNode = currentNode.nextSibling;
+			}
+			if (currentNode === null) throw new Error("End hydration comment not found");
+		}
+	}
+	return node;
+}
+
+//#endregion
+//#region src/render/nodeChild.ts
+/**
+* Gets the first child of a node.
+*
+* Sets the hydration node.
+*
+* @param parent The parent node.
+*/
 function nodeChild(parent) {
-  let childNode = parent.firstChild;
-  if (context_default.hydrationNode) {
-    if (!childNode) {
-      childNode = parent.appendChild(parent.ownerDocument.createTextNode(""));
-    }
-    context_default.hydrationNode = childNode;
-  }
-  return childNode;
-}
-
-// src/render/nodeRoot.ts
+	let childNode = parent.firstChild;
+	if (require_formatText.context_default.hydrationNode !== null) {
+		if (childNode === null) childNode = parent.appendChild(parent.ownerDocument.createTextNode(""));
+		require_formatText.context_default.hydrationNode = childNode;
+	}
+	return childNode;
+}
+
+//#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.
+*
+* @param parent The parent of the fragment.
+* @param text Whether we require a text node.
+*/
 function nodeRoot(parent, text = false) {
-  if (context_default.hydrationNode) {
-    let rootNode = context_default.hydrationNode;
-    if (text && !isTextNode(rootNode) && isTextNode(rootNode.previousSibling)) {
-      rootNode = rootNode.previousSibling;
-      context_default.hydrationNode = rootNode;
-    }
-    if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
-      rootNode = rootNode.nextSibling;
-      context_default.hydrationNode = rootNode;
-    }
-    const range = context_default.activeRange;
-    if (range && !range.startNode) {
-      range.startNode = rootNode;
-    }
-    return rootNode;
-  } else {
-    return parent.firstChild;
-  }
-}
-
-// src/render/nodeSkip.ts
+	if (require_formatText.context_default.hydrationNode !== null) {
+		let rootNode = require_formatText.context_default.hydrationNode;
+		if (text && !isTextNode(rootNode) && rootNode.previousSibling !== null && isTextNode(rootNode.previousSibling)) {
+			rootNode = rootNode.previousSibling;
+			require_formatText.context_default.hydrationNode = rootNode;
+		}
+		if (isCommentNode(rootNode) && rootNode.data === HYDRATION_START) {
+			rootNode = rootNode.nextSibling;
+			require_formatText.context_default.hydrationNode = rootNode;
+		}
+		const range = require_formatText.context_default.activeRange;
+		if (range.startNode === null) range.startNode = rootNode;
+		return rootNode;
+	} else return parent.firstChild;
+}
+
+//#endregion
+//#region src/render/nodeSkip.ts
+/**
+* Gets the sibling of a node, x nodes after it.
+*
+* When hydrating, sets the hydration node.
+*
+* @param node The node.
+* @param count The number of nodes to skip.
+*/
 function nodeSkip(node, count) {
-  let nextNode = node;
-  for (let i = 0; i < count; i++) {
-    nextNode = nodeCheckHydrationBreak(nextNode.nextSibling);
-  }
-  return nextNode;
+	let nextNode = node;
+	for (let i = 0; i < count; i++) nextNode = nodeCheckHydrationBreak(nextNode.nextSibling);
+	return nextNode;
 }
 
-// src/render/runControl.ts
+//#endregion
+//#region src/render/runControl.ts
+/**
+* Runs an`if`, `switch` or `await` control statement
+* @param create A function that creates the control statement's branches
+*/
 function runControl(range, anchor, create) {
-  range.index = -1;
-  const oldRange = pushRange(range, true);
-  $run(function runControl2() {
-    const oldBranchRange = pushRange(range);
-    create(anchor);
-    popRange(oldBranchRange);
-  });
-  if (context_default.hydrationNode) {
-    anchor = context_default.hydrationNode.nextSibling;
-  }
-  popRange(oldRange);
-}
-
-// src/render/runControlBranch.ts
-function runControlBranch(range, index, create) {
-  if (index >= 0 && range.index === index) {
-    return;
-  }
-  if (range.children?.length) {
-    clearRange(range.children[0]);
-    range.children.length = 0;
-  }
-  const oldRange = pushRange(newRange(), true);
-  const oldEffect = context_default.activeEffect;
-  context_default.activeEffect = null;
-  create();
-  context_default.activeEffect = oldEffect;
-  popRange(oldRange);
-  range.index = index;
-}
-
-// src/render/moveRange.ts
+	const oldRange = pushRange(range, true);
+	$run(function runControl$1() {
+		const oldBranchRange = pushRange(range);
+		create(anchor);
+		popRange(oldBranchRange);
+	});
+	if (require_formatText.context_default.hydrationNode) anchor = require_formatText.context_default.hydrationNode.nextSibling;
+	popRange(oldRange);
+}
+
+//#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);
+	create();
+	popRange(oldRange);
+}
+
+//#endregion
+//#region src/render/moveRange.ts
 function moveRange(parent, range, before) {
-  const endNode = range.endNode || range.startNode;
-  let currentNode = range.startNode;
-  if (isFragmentNode(parent)) {
-    parent = before.parentNode;
-  }
-  while (currentNode) {
-    const nextNode = currentNode.nextSibling;
-    parent.insertBefore(currentNode, before);
-    if (currentNode === endNode) break;
-    currentNode = nextNode;
-  }
-}
-
-// src/render/runListItems.ts
-function runListItems(range, parent, anchor, oldItems, newItems, create) {
-  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) {
-      transferRangeMarkers(oldStartItem, newStartItem);
-      oldStartItem = oldItems[++oldStartIndex];
-      newStartItem = newItems[++newStartIndex];
-    } else if (oldEndItem.key === newEndItem.key) {
-      transferRangeMarkers(oldEndItem, newEndItem);
-      oldEndItem = oldItems[--oldEndIndex];
-      newEndItem = newItems[--newEndIndex];
-    } else if (oldStartItem.key === newEndItem.key) {
-      moveRange(parent, oldStartItem, oldEndItem.endNode?.nextSibling);
-      transferRangeMarkers(oldStartItem, newEndItem);
-      oldStartItem = oldItems[++oldStartIndex];
-      newEndItem = newItems[--newEndIndex];
-    } else if (oldEndItem.key === newStartItem.key) {
-      moveRange(parent, oldEndItem, oldStartItem?.startNode);
-      transferRangeMarkers(oldEndItem, newStartItem);
-      oldEndItem = oldItems[--oldEndIndex];
-      newStartItem = newItems[++newStartIndex];
-    } else {
-      if (!oldKeyToIndex || !newKeyToIndex) {
-        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);
-        }
-      }
-      let oldIndex = oldKeyToIndex.get(newStartItem.key);
-      let newIndex = newKeyToIndex.get(oldStartItem.key);
-      if (oldIndex === void 0 && newIndex === void 0) {
-        newStartItem.data = $watch(newStartItem.data);
-        create(newStartItem, oldStartItem.startNode);
-        clearRange(oldStartItem);
-        context_default.activeRange.children.splice(oldStartIndex, 1);
-        oldStartItem = oldItems[++oldStartIndex];
-        newStartItem = newItems[++newStartIndex];
-      } else if (oldIndex === void 0) {
-        newStartItem.data = $watch(newStartItem.data);
-        create(newStartItem, oldStartItem.startNode);
-        newStartItem = newItems[++newStartIndex];
-      } else if (newIndex === void 0) {
-        clearRange(oldStartItem);
-        context_default.activeRange.children.splice(oldStartIndex, 1);
-        oldStartItem = oldItems[++oldStartIndex];
-      } else {
-        const oldData = oldItems[oldIndex];
-        moveRange(parent, oldData, oldStartItem.startNode);
-        transferRangeMarkers(oldData, newStartItem);
-        oldItems[oldIndex] = null;
-        newStartItem = newItems[++newStartIndex];
-      }
-    }
-  }
-  if (oldStartIndex <= oldEndIndex || newStartIndex <= newEndIndex) {
-    if (oldStartIndex > oldEndIndex) {
-      let before = oldStartItem?.startNode || oldItems[oldItems.length - 1]?.endNode?.nextSibling || anchor;
-      for (newStartIndex; newStartIndex <= newEndIndex; newStartItem = newItems[++newStartIndex]) {
-        newStartItem.data = $watch(newStartItem.data);
-        create(newStartItem, before);
-        before = newStartItem.endNode?.nextSibling;
-      }
-    } else {
-      if (range.children) {
-        range.children.length = oldStartIndex;
-      }
-      for (oldStartIndex; oldStartIndex <= oldEndIndex; oldStartItem = oldItems[++oldStartIndex]) {
-        clearRange(oldStartItem);
-      }
-    }
-  }
-}
-function transferRangeMarkers(oldItem, newItem) {
-  newItem.startNode = oldItem.startNode;
-  newItem.endNode = oldItem.endNode;
-  for (let prop in oldItem.data) {
-    oldItem.data[prop] = newItem.data[prop];
-  }
-  newItem.data = oldItem.data;
-}
-
-// src/render/runList.ts
-function runList(range, parent, anchor, buildItems, create) {
-  const oldRange = pushRange(range, true);
-  let listItems = [];
-  $run(function runList2() {
-    const oldBranchRange = pushRange(range);
-    const newItems = buildItems();
-    context_default.activeEffect = null;
-    runListItems(range, parent, anchor, listItems, newItems, create);
-    listItems = newItems;
-    popRange(oldBranchRange);
-  });
-  if (context_default.hydrationNode) {
-    anchor = context_default.hydrationNode.nextSibling;
-  }
-  popRange(oldRange);
-}
-
-// src/render/setAttribute.ts
+	parent = before?.parentNode ?? parent;
+	const endNode = range.endNode ?? range.startNode;
+	let currentNode = range.startNode;
+	while (currentNode !== null) {
+		const nextNode = currentNode.nextSibling;
+		parent.insertBefore(currentNode, before);
+		if (currentNode === endNode) break;
+		currentNode = nextNode;
+	}
+}
+
+//#endregion
+//#region src/render/runListItems.ts
+/**
+* @param range The list's range
+* @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) {
+	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) {
+		moveRange(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);
+		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);
+		}
+		let oldIndex = oldKeyToIndex.get(newStartItem.key);
+		let newIndex = newKeyToIndex.get(oldStartItem.key);
+		if (oldIndex === void 0 && newIndex === void 0) {
+			newStartItem.data = $watch(newStartItem.data, { shallow: true });
+			create(newStartItem, oldStartItem.startNode);
+			newStartItem.previousRange = oldStartItem.previousRange;
+			newStartItem.nextRange = oldStartItem;
+			oldStartItem.previousRange = newStartItem;
+			clearRange(oldStartItem);
+			oldStartItem = oldItems[++oldStartIndex];
+			newStartItem = newItems[++newStartIndex];
+		} else if (oldIndex === void 0) {
+			newStartItem.data = $watch(newStartItem.data, { shallow: true });
+			create(newStartItem, oldStartItem.startNode);
+			newStartItem = newItems[++newStartIndex];
+		} else if (newIndex === void 0) {
+			clearRange(oldStartItem);
+			oldStartItem = oldItems[++oldStartIndex];
+		} else {
+			const oldData = oldItems[oldIndex];
+			moveRange(parent, oldData, oldStartItem.startNode);
+			transferListItemData(oldData, newStartItem, update);
+			oldItems[oldIndex] = null;
+			newStartItem = newItems[++newStartIndex];
+		}
+	}
+	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]) {
+			newStartItem.data = $watch(newStartItem.data, { shallow: true });
+			create(newStartItem, before);
+			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;
+}
+function transferListItemData(oldItem, newItem, update) {
+	newItem.startNode = oldItem.startNode;
+	newItem.endNode = oldItem.endNode;
+	update(oldItem, newItem);
+	newItem.data = oldItem.data;
+}
+
+//#endregion
+//#region src/render/runList.ts
+/**
+* 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);
+	let listItems = [];
+	$run(function runList$1() {
+		const oldBranchRange = pushRange(range);
+		const newItems = buildItems();
+		require_formatText.context_default.activeTarget = null;
+		runListItems(range, parent, anchor, listItems, newItems, create, update);
+		listItems = newItems;
+		popRange(oldBranchRange);
+	});
+	if (require_formatText.context_default.hydrationNode !== null) anchor = require_formatText.context_default.hydrationNode.nextSibling;
+	popRange(oldRange);
+}
+
+//#endregion
+//#region src/render/setAttribute.ts
 function setAttribute(el, name, value) {
-  if (value === false || value == null) {
-    el.removeAttribute(name);
-  } else {
-    el.setAttribute(name, value);
-  }
+	if (value === false || value === void 0 || value === null) el.removeAttribute(name);
+	else el.setAttribute(name, value);
 }
 
-// src/render/setDynamicElement.ts
+//#endregion
+//#region src/render/setDynamicElement.ts
 function setDynamicElement(el, tag) {
-  if (context_default.hydrationNode) {
-    return el;
-  }
-  let newElement = el.ownerDocument.createElement(tag);
-  el.replaceWith(newElement);
-  return newElement;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  $mount,
-  $run,
-  $unwrap,
-  $watch,
-  clearLayoutSlot,
-  fillLayoutSlot,
-  hydrate,
-  mount,
-  t_add_fragment,
-  t_anchor,
-  t_animate,
-  t_apply_props,
-  t_attribute,
-  t_child,
-  t_class,
-  t_dynamic,
-  t_event,
-  t_fmt,
-  t_fragment,
-  t_list_item,
-  t_next,
-  t_pop_range,
-  t_push_range,
-  t_range,
-  t_root,
-  t_run_branch,
-  t_run_control,
-  t_run_list,
-  t_skip,
-  t_style
-});
+	if (require_formatText.context_default.hydrationNode !== null) return el;
+	let newElement = el.ownerDocument.createElement(tag);
+	el.replaceWith(newElement);
+	return newElement;
+}
+
+//#endregion
+//#region src/wrappers/ReactiveDate.ts
+let initialized = false;
+/**
+* Wraps a Date object for $watching.
+*/
+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()
+		};
+	}
+	#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);
+				trackProxyEffect(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");
+				return result;
+			};
+		}
+	}
+};
+
+//#endregion
+exports.$batch = require_formatText.$batch;
+exports.$cache = require_formatText.$cache;
+exports.$mount = $mount;
+exports.$peek = require_formatText.$peek;
+exports.$run = $run;
+exports.$unwrap = $unwrap;
+exports.$watch = $watch;
+exports.ReactiveDate = ReactiveDate;
+exports.clearLayoutSlot = clearLayoutSlot;
+exports.fillLayoutSlot = fillLayoutSlot;
+exports.hydrate = hydrate;
+exports.mount = mount;
+exports.t_add_fragment = addFragment;
+exports.t_anchor = nodeAnchor;
+exports.t_animate = addAnimation;
+exports.t_apply_props = applyProps;
+exports.t_attribute = setAttribute;
+exports.t_child = nodeChild;
+exports.t_class = require_formatText.buildClasses;
+exports.t_dynamic = setDynamicElement;
+exports.t_event = addEvent;
+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_root = nodeRoot;
+exports.t_run_branch = runControlBranch;
+exports.t_run_control = runControl;
+exports.t_run_list = runList;
+exports.t_skip = nodeSkip;
+exports.t_style = require_formatText.buildStyles;
 //# sourceMappingURL=index.cjs.map