@zeus-js/runtime-dom 0.1.1-beta.0 → 0.1.1-beta.10

package/dist/runtime-dom.esm-browser.js

@@ -1,16 +1,27 @@
 /**
-* runtime-dom v0.1.1-beta.0
+* runtime-dom v0.1.1-beta.10
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 //#region packages/core/runtime-dom/src/template.ts
-function template(html, _isImportNode = false, _isSVG = false, _isMathML = false) {
-	const t = document.createElement("template");
-	t.innerHTML = html;
+function template(html, _isImportNode = false, isSVG = false, _isMathML = false) {
+	const content = isSVG ? createSvgContent(html) : createHtmlContent(html);
 	return function clone() {
-		return t.content.cloneNode(true);
+		return content.cloneNode(true);
 	};
 }
+function createHtmlContent(html) {
+	const template = document.createElement("template");
+	template.innerHTML = html;
+	return template.content;
+}
+function createSvgContent(html) {
+	const wrapper = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	wrapper.innerHTML = html;
+	const content = document.createDocumentFragment();
+	while (wrapper.firstChild) content.appendChild(wrapper.firstChild);
+	return content;
+}
 //#endregion
 //#region packages/core/shared/src/makeMap.ts
 /**
@@ -267,7 +278,8 @@ var ReactiveEffect = class {
 	trigger() {
 		if (this.flags & 64) pausedQueueEffects.add(this);
 		else if (this.scheduler) this.scheduler();
-		else this.runIfDirty();
+		else if (this.flags & 128) this.runIfDirty();
+		else this.run();
 	}
 	/**
 	* @internal
@@ -493,6 +505,31 @@ function cleanupEffect(e) {
 		}
 	}
 }
+/**
+* Batches reactive updates synchronously within the given function.
+* All updates triggered inside `fn` are deferred until the function completes,
+* then flushed together in a single batch.
+*/
+function batch(fn) {
+	startBatch();
+	try {
+		return fn();
+	} finally {
+		endBatch();
+	}
+}
+/**
+* Executes the given function without tracking reactive dependencies.
+* Any reactive reads inside `fn` will not trigger effect re-runs.
+*/
+function untrack(fn) {
+	pauseTracking();
+	try {
+		return fn();
+	} finally {
+		resetTracking();
+	}
+}
 //#endregion
 //#region packages/core/signal/src/dep.ts
 /**
@@ -537,6 +574,7 @@ var Dep = class {
 	}
 	track(debugInfo) {
 		if (!activeSub || !shouldTrack || activeSub === this.computed) return;
+		if (this.computed) activeSub.flags |= 128;
 		let link = this.activeLink;
 		if (link === void 0 || link.sub !== activeSub) {
 			link = this.activeLink = new Link(activeSub, this);
@@ -870,60 +908,6 @@ function noTracking(self, method, args = []) {
 	return res;
 }
 //#endregion
-//#region packages/core/signal/src/ref.ts
-let _ReactiveFlags$IS_REF, _ReactiveFlags$IS_SHA;
-/*@__NO_SIDE_EFFECTS__*/
-function isRef(r) {
-	return r ? r["__v_isRef"] === true : false;
-}
-/*@__NO_SIDE_EFFECTS__*/
-function ref(value) {
-	return createRef(value, false);
-}
-function createRef(rawValue, shallow) {
-	if (/* @__PURE__ */ isRef(rawValue)) return rawValue;
-	return new RefImpl(rawValue, shallow);
-}
-_ReactiveFlags$IS_REF = "__v_isRef";
-_ReactiveFlags$IS_SHA = "__v_isShallow";
-/**
-* @internal
-*/
-var RefImpl = class {
-	constructor(value, isShallow) {
-		this.dep = new Dep();
-		this[_ReactiveFlags$IS_REF] = true;
-		this[_ReactiveFlags$IS_SHA] = false;
-		this._rawValue = isShallow ? value : /* @__PURE__ */ toRaw(value);
-		this._value = isShallow ? value : toReactive(value);
-		this["__v_isShallow"] = isShallow;
-	}
-	get value() {
-		this.dep.track({
-			target: this,
-			type: "get",
-			key: "value"
-		});
-		return this._value;
-	}
-	set value(newValue) {
-		const oldValue = this._rawValue;
-		const useDirectValue = this["__v_isShallow"] || /* @__PURE__ */ isShallow(newValue) || /* @__PURE__ */ isReadonly(newValue);
-		newValue = useDirectValue ? newValue : /* @__PURE__ */ toRaw(newValue);
-		if (hasChanged(newValue, oldValue)) {
-			this._rawValue = newValue;
-			this._value = useDirectValue ? newValue : toReactive(newValue);
-			this.dep.trigger({
-				target: this,
-				type: "set",
-				key: "value",
-				newValue,
-				oldValue
-			});
-		}
-	}
-};
-//#endregion
 //#region packages/core/signal/src/baseHandlers.ts
 const isNonTrackableKeys = /*@__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`);
 const builtInSymbols = new Set(/*@__PURE__*/ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol));
@@ -1356,11 +1340,84 @@ const toReactive = (value) => isObject(value) ? /* @__PURE__ */ reactive(value)
 */
 const toReadonly = (value) => isObject(value) ? /* @__PURE__ */ readonly(value) : value;
 //#endregion
+//#region packages/core/signal/src/ref.ts
+let _ReactiveFlags$IS_REF, _ReactiveFlags$IS_SHA;
+/*@__NO_SIDE_EFFECTS__*/
+function isRef(r) {
+	return r ? r["__v_isRef"] === true : false;
+}
+/*@__NO_SIDE_EFFECTS__*/
+function ref(value) {
+	return createRef(value, false);
+}
+/*@__NO_SIDE_EFFECTS__*/
+function shallowRef(value) {
+	return createRef(value, true);
+}
+function createRef(rawValue, shallow) {
+	if (/* @__PURE__ */ isRef(rawValue)) return rawValue;
+	return new RefImpl(rawValue, shallow);
+}
+_ReactiveFlags$IS_REF = "__v_isRef";
+_ReactiveFlags$IS_SHA = "__v_isShallow";
+/**
+* @internal
+*/
+var RefImpl = class {
+	constructor(value, isShallow) {
+		this.dep = new Dep();
+		this[_ReactiveFlags$IS_REF] = true;
+		this[_ReactiveFlags$IS_SHA] = false;
+		this._rawValue = isShallow ? value : /* @__PURE__ */ toRaw(value);
+		this._value = isShallow ? value : toReactive(value);
+		this["__v_isShallow"] = isShallow;
+	}
+	get value() {
+		this.dep.track({
+			target: this,
+			type: "get",
+			key: "value"
+		});
+		return this._value;
+	}
+	set value(newValue) {
+		const oldValue = this._rawValue;
+		const useDirectValue = this["__v_isShallow"] || /* @__PURE__ */ isShallow(newValue) || /* @__PURE__ */ isReadonly(newValue);
+		newValue = useDirectValue ? newValue : /* @__PURE__ */ toRaw(newValue);
+		if (hasChanged(newValue, oldValue)) {
+			this._rawValue = newValue;
+			this._value = useDirectValue ? newValue : toReactive(newValue);
+			this.dep.trigger({
+				target: this,
+				type: "set",
+				key: "value",
+				newValue,
+				oldValue
+			});
+		}
+	}
+};
+//#endregion
+//#region packages/core/signal/src/primitives.ts
+function createSignal(initialValue) {
+	const source = /* @__PURE__ */ shallowRef(initialValue);
+	const read = () => source.value;
+	const write = (value) => {
+		const next = typeof value === "function" ? value(source.value) : value;
+		source.value = next;
+		return next;
+	};
+	return [read, write];
+}
+//#endregion
 //#region packages/core/signal/src/state.ts
 function state(value) {
 	if (arguments.length === 0) return /* @__PURE__ */ ref();
 	return isProxyable(value) ? /* @__PURE__ */ reactive(value) : /* @__PURE__ */ ref(value);
 }
+function shallowState(value) {
+	return arguments.length === 0 ? /* @__PURE__ */ shallowRef() : /* @__PURE__ */ shallowRef(value);
+}
 function isProxyable(value) {
 	if (value === null || typeof value !== "object") return false;
 	if (Array.isArray(value)) return true;
@@ -1372,6 +1429,32 @@ function isPlainObject(value) {
 	return proto === Object.prototype || proto === null;
 }
 //#endregion
+//#region packages/core/runtime-dom/src/domMove.ts
+const activeMoveRoots = /* @__PURE__ */ new Set();
+function moveNodeBefore(parent, node, marker) {
+	activeMoveRoots.add(node);
+	try {
+		const moveBefore = parent.moveBefore;
+		if (typeof moveBefore === "function") moveBefore.call(parent, node, marker);
+		else parent.insertBefore(node, marker);
+	} finally {
+		activeMoveRoots.delete(node);
+	}
+}
+function isWithinRuntimeDomMove(node) {
+	let current = node;
+	while (current) {
+		if (activeMoveRoots.has(current)) return true;
+		if (current.parentNode) {
+			current = current.parentNode;
+			continue;
+		}
+		const root = current.getRootNode();
+		current = "host" in root ? root.host : null;
+	}
+	return false;
+}
+//#endregion
 //#region packages/core/runtime-dom/src/domOwnership.ts
 const activeLightDomHosts = /* @__PURE__ */ new WeakMap();
 const runtimeOwnedNodes = /* @__PURE__ */ new WeakSet();
@@ -1406,6 +1489,14 @@ function insertTracked(parent, value, marker = null) {
 		for (const item of value) nodes.push(...insertTracked(parent, item, marker));
 		return nodes;
 	}
+	if (value instanceof Node && value.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+		const nodes = Array.from(value.childNodes);
+		for (const node of nodes) {
+			trackRuntimeDomInsertion(parent, node);
+			parent.insertBefore(node, marker);
+		}
+		return nodes;
+	}
 	const node = value instanceof Node ? value : document.createTextNode(String(value));
 	trackRuntimeDomInsertion(parent, node);
 	parent.insertBefore(node, marker);
@@ -1420,7 +1511,7 @@ function removeNodes$1(nodes) {
 function moveRangeBefore(nodes, parent, marker = null) {
 	for (const node of nodes) {
 		trackRuntimeDomInsertion(parent, node);
-		parent.insertBefore(node, marker);
+		moveNodeBefore(parent, node, marker);
 	}
 }
 //#endregion
@@ -1465,10 +1556,11 @@ var ScopedSubtree = class {
 	replace(render) {
 		this.dispose();
 		const scope = effectScope(true);
+		const parent = this.resolveParent(this.marker);
 		let nodes = [];
 		try {
 			scope.run(() => {
-				nodes = runWithOwner(this.context.owner, () => withHostContext(this.context.host, () => insertTracked(this.parent, render(), this.marker)));
+				nodes = runWithOwner(this.context.owner, () => withHostContext(this.context.host, () => insertTracked(parent, render(), this.marker)));
 			});
 		} catch (error) {
 			scope.stop();
@@ -1486,11 +1578,15 @@ var ScopedSubtree = class {
 		this.nodes = [];
 	}
 	moveBefore(marker) {
-		moveRangeBefore(this.nodes, this.parent, marker);
+		moveRangeBefore(this.nodes, this.resolveParent(marker), marker);
 	}
 	current() {
 		return this.nodes;
 	}
+	resolveParent(marker) {
+		var _ref, _marker$parentNode, _this$marker;
+		return (_ref = (_marker$parentNode = marker === null || marker === void 0 ? void 0 : marker.parentNode) !== null && _marker$parentNode !== void 0 ? _marker$parentNode : (_this$marker = this.marker) === null || _this$marker === void 0 ? void 0 : _this$marker.parentNode) !== null && _ref !== void 0 ? _ref : this.parent;
+	}
 };
 //#endregion
 //#region packages/core/runtime-dom/src/insert.ts
@@ -1700,14 +1796,23 @@ function removeNodes(nodes) {
 }
 //#endregion
 //#region packages/core/runtime-dom/src/bindings.ts
-function bindText(node, value) {
-	effect(() => {
-		node.data = stringifyText(value());
+function bindText(node, value, once = false) {
+	applyBinding(value, once, (next) => {
+		node.data = stringifyText(next);
+	});
+}
+function bindTextContent(el, value, once = false) {
+	applyBinding(value, once, (next) => {
+		el.textContent = stringifyText(next);
 	});
 }
-function bindTextContent(el, value) {
+function applyBinding(value, once, apply) {
+	if (once) {
+		untrack(() => apply(value()));
+		return;
+	}
 	effect(() => {
-		el.textContent = stringifyText(value());
+		apply(value());
 	});
 }
 function stringifyText(value) {
@@ -1760,19 +1865,19 @@ const BOOLEAN_DOM_PROPERTY_NAME = {
 function normalizeAttrName(name) {
 	return name === "className" ? "class" : name;
 }
-function bindAttr(el, name, value) {
-	effect(() => {
-		setAttr(el, name, value());
+function bindAttr(el, name, value, once = false) {
+	applyBinding(value, once, (next) => {
+		setAttr(el, name, next);
 	});
 }
-function bindProp(el, name, value) {
-	effect(() => {
-		el[name] = value();
+function bindProp(el, name, value, once = false) {
+	applyBinding(value, once, (next) => {
+		el[name] = next;
 	});
 }
-function bindClass(el, value) {
-	effect(() => {
-		const next = normalizeClass(value());
+function bindClass(el, value, once = false) {
+	applyBinding(value, once, (value) => {
+		const next = normalizeClass(value);
 		if (next) el.setAttribute("class", next);
 		else el.removeAttribute("class");
 	});
@@ -1784,10 +1889,9 @@ function normalizeClass(value) {
 	if (typeof value === "object") return Object.keys(value).filter((key) => value[key]).join(" ");
 	return "";
 }
-function bindStyle(el, value) {
+function bindStyle(el, value, once = false) {
 	let prev;
-	effect(() => {
-		const next = value();
+	applyBinding(value, once, (next) => {
 		if (next == null) {
 			el.removeAttribute("style");
 			prev = void 0;
@@ -1798,42 +1902,41 @@ function bindStyle(el, value) {
 			prev = void 0;
 			return;
 		}
-		patchStyle(el, prev, next);
-		prev = next;
+		prev = patchStyle(el, prev, next);
 	});
 }
 function patchStyle(el, prev, next) {
 	const style = el.style;
-	if (prev) {
-		for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$2(key), "");
+	const values = prev ? prev[0] : Object.create(null);
+	const state = style.cssText + Object.keys(next);
+	const styleChanged = prev && state != prev[1];
+	for (const key in values) if (!(key in next)) {
+		style.setProperty(key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`), "");
+		delete values[key];
 	}
 	for (const key in next) {
 		const value = next[key];
-		const name = toKebabCase$2(key);
-		if (value == null) style.setProperty(name, "");
-		else style.setProperty(name, normalizeStyleValue(key, value));
+		const expected = value == null ? "" : normalizeStyleValue(key, value);
+		if (values[key] === expected && !styleChanged) continue;
+		style.setProperty(key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`), expected);
+		values[key] = expected;
 	}
+	return [values, style.cssText + Object.keys(next)];
 }
 function normalizeStyleValue(key, value) {
-	if (typeof value === "number" && value !== 0 && !isUnitlessNumber(key)) return `${value}px`;
+	if (typeof value === "number" && value !== 0 && unitlessNumbers[key] !== true) return `${value}px`;
 	return String(value);
 }
-const unitlessNumbers = /* @__PURE__ */ new Set([
-	"opacity",
-	"zIndex",
-	"fontWeight",
-	"lineHeight",
-	"flex",
-	"flexGrow",
-	"flexShrink",
-	"order"
-]);
-function isUnitlessNumber(key) {
-	return unitlessNumbers.has(key);
-}
-function toKebabCase$2(value) {
-	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-}
+const unitlessNumbers = {
+	opacity: true,
+	zIndex: true,
+	fontWeight: true,
+	lineHeight: true,
+	flex: true,
+	flexGrow: true,
+	flexShrink: true,
+	order: true
+};
 //#endregion
 //#region packages/core/runtime-dom/src/events.ts
 const delegatedEvents = /* @__PURE__ */ new Set();
@@ -1943,6 +2046,30 @@ function createComponent(component, props) {
 function disposeListRecord(record) {
 	record.subtree.dispose();
 }
+function isImmediatelyBefore(record, anchor) {
+	const nodes = record.subtree.current();
+	const last = nodes[nodes.length - 1];
+	return last === void 0 || last.nextSibling === anchor;
+}
+function containsNode(record, node) {
+	let current = node;
+	while (current) {
+		if (record.subtree.current().some((root) => root === current || root.contains(current))) return true;
+		const treeRoot = current.getRootNode();
+		current = "host" in treeRoot ? treeRoot.host : null;
+	}
+	return false;
+}
+function getDeepestActiveElement(parent) {
+	var _parent$ownerDocument, _parent$ownerDocument2, _active$shadowRoot;
+	const treeRoot = parent.getRootNode();
+	let active = "activeElement" in treeRoot ? treeRoot.activeElement : (_parent$ownerDocument = (_parent$ownerDocument2 = parent.ownerDocument) === null || _parent$ownerDocument2 === void 0 ? void 0 : _parent$ownerDocument2.activeElement) !== null && _parent$ownerDocument !== void 0 ? _parent$ownerDocument : null;
+	while (active === null || active === void 0 || (_active$shadowRoot = active.shadowRoot) === null || _active$shadowRoot === void 0 ? void 0 : _active$shadowRoot.activeElement) active = active.shadowRoot.activeElement;
+	return active;
+}
+function duplicateKeyError(key, index) {
+	return /* @__PURE__ */ new Error(`[Zeus runtime] <For> received duplicate key ${String(key)} at index ${index}.`);
+}
 function mountFor$1(parent, marker, each, key, render) {
 	if (!key) {
 		mountIndexFor(parent, marker, each, render);
@@ -1952,63 +2079,248 @@ function mountFor$1(parent, marker, each, key, render) {
 }
 function mountIndexFor(parent, marker, each, render) {
 	const subtree = new ScopedSubtree(parent, marker, captureScopedSubtreeContext());
-	const runner = effect(() => {
-		var _each;
-		const list = (_each = each()) !== null && _each !== void 0 ? _each : [];
-		subtree.replace(() => list.map((item, index) => render(item, index)));
-	});
-	onScopeDispose(() => {
+	let latestItems = [];
+	let reconcileRequested = false;
+	let reconciling = false;
+	let disposed = false;
+	let runner;
+	const dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		if (runner) stop(runner);
+		subtree.dispose();
+	};
+	onScopeDispose(dispose, true);
+	const drainReconciliations = () => {
+		if (disposed || reconciling) return;
+		reconciling = true;
+		try {
+			while (reconcileRequested && !disposed) {
+				reconcileRequested = false;
+				untrack(() => {
+					subtree.replace(() => latestItems.map((item, index) => render(() => item, () => index)));
+				});
+			}
+		} finally {
+			reconciling = false;
+			if (disposed) subtree.dispose();
+		}
+	};
+	const scheduleReconciliation = () => {
+		if (disposed || !runner) return;
+		runner();
+		if (disposed) return;
+		reconcileRequested = true;
+		drainReconciliations();
+	};
+	try {
+		runner = effect(() => {
+			var _each;
+			const nextItems = (_each = each()) !== null && _each !== void 0 ? _each : [];
+			for (let i = 0; i < nextItems.length; i++) nextItems[i];
+			latestItems = nextItems;
+		}, { scheduler: scheduleReconciliation });
+	} catch (error) {
+		dispose();
+		throw error;
+	}
+	if (disposed) {
 		stop(runner);
 		subtree.dispose();
-	}, true);
+		return;
+	}
+	reconcileRequested = true;
+	try {
+		drainReconciliations();
+	} catch (error) {
+		dispose();
+		throw error;
+	}
 }
 function mountKeyedFor(parent, marker, each, key, render) {
 	let records = [];
 	const subtreeContext = captureScopedSubtreeContext();
-	const runner = effect(() => {
-		var _each2;
-		const nextItems = (_each2 = each()) !== null && _each2 !== void 0 ? _each2 : [];
+	let latestItems = [];
+	const latestKeys = [];
+	let latestItemsUseFixedSlots = false;
+	let reconcileRequested = false;
+	let reconciling = false;
+	let disposed = false;
+	let runner;
+	const dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		if (runner) stop(runner);
+		const currentRecords = records;
+		records = [];
+		for (const record of currentRecords) disposeListRecord(record);
+	};
+	onScopeDispose(dispose, true);
+	const reconcileEntries = (nextEntries) => {
+		if (disposed) return;
 		const oldMap = /* @__PURE__ */ new Map();
 		for (const record of records) oldMap.set(record.key, record);
 		const nextRecords = [];
-		for (let i = 0; i < nextItems.length; i++) {
-			const item = nextItems[i];
-			const itemKey = key(item, i);
-			const oldRecord = oldMap.get(itemKey);
-			if (oldRecord) {
-				oldMap.delete(itemKey);
-				oldRecord.item = item;
-				oldRecord.index = i;
-				nextRecords.push(oldRecord);
-			} else {
-				const subtree = new ScopedSubtree(parent, marker, subtreeContext);
-				subtree.replace(() => render(item, i));
-				nextRecords.push({
-					key: itemKey,
-					item,
-					index: i,
-					subtree
-				});
+		const createdRecords = [];
+		try {
+			batch(() => {
+				for (let i = 0; i < nextEntries.length; i++) {
+					const { item, key: itemKey } = nextEntries[i];
+					const oldRecord = oldMap.get(itemKey);
+					if (oldRecord) {
+						oldMap.delete(itemKey);
+						if (!Object.is(oldRecord.item, item)) {
+							oldRecord.item = item;
+							oldRecord.setItem(() => item);
+						}
+						oldRecord.setIndex(i);
+						nextRecords.push(oldRecord);
+					} else {
+						const [readItem, setItem] = createSignal(item);
+						const [readIndex, setIndex] = createSignal(i);
+						const subtree = new ScopedSubtree(parent, marker, subtreeContext);
+						const record = {
+							item,
+							key: itemKey,
+							setItem,
+							setIndex,
+							subtree
+						};
+						createdRecords.push(record);
+						subtree.replace(() => render(readItem, readIndex));
+						nextRecords.push(record);
+					}
+					if (disposed) break;
+				}
+			});
+		} catch (error) {
+			for (const record of createdRecords) disposeListRecord(record);
+			throw error;
+		}
+		if (disposed) {
+			for (const record of createdRecords) disposeListRecord(record);
+			return;
+		}
+		const activeElement = getDeepestActiveElement(parent);
+		const shouldRestoreFocus = Boolean(activeElement && nextRecords.some((record) => containsNode(record, activeElement)));
+		let committed = false;
+		try {
+			for (const record of oldMap.values()) disposeListRecord(record);
+			if (disposed) {
+				for (const record of createdRecords) disposeListRecord(record);
+				return;
+			}
+			records = nextRecords;
+			committed = true;
+			let moved = false;
+			let anchor = marker;
+			for (let i = nextRecords.length - 1; i >= 0; i--) {
+				var _record$subtree$curre;
+				const record = nextRecords[i];
+				if (!isImmediatelyBefore(record, anchor)) {
+					record.subtree.moveBefore(anchor);
+					moved = true;
+				}
+				anchor = (_record$subtree$curre = record.subtree.current()[0]) !== null && _record$subtree$curre !== void 0 ? _record$subtree$curre : anchor;
 			}
+			if (disposed) return;
+			if (moved && shouldRestoreFocus) {
+				var _focus;
+				(_focus = activeElement.focus) === null || _focus === void 0 || _focus.call(activeElement, { preventScroll: true });
+			}
+			if (!disposed) emitDevtoolsEvent({
+				type: "mount-for",
+				length: nextRecords.length
+			});
+		} catch (error) {
+			if (!committed) for (const record of createdRecords) disposeListRecord(record);
+			throw error;
+		}
+	};
+	const reconcileLatestItems = () => {
+		if (disposed) return;
+		if (latestItemsUseFixedSlots) {
+			const items = latestItems;
+			batch(() => {
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i];
+					const record = records[i];
+					if (!Object.is(record.item, item)) {
+						record.item = item;
+						record.setItem(() => item);
+					}
+				}
+			});
+			if (!disposed) emitDevtoolsEvent({
+				type: "mount-for",
+				length: records.length
+			});
+			return;
 		}
-		for (const record of oldMap.values()) disposeListRecord(record);
-		for (let i = nextRecords.length - 1; i >= 0; i--) {
-			var _nextRecords$subtree$;
-			const record = nextRecords[i];
-			const anchor = i === nextRecords.length - 1 ? marker : (_nextRecords$subtree$ = nextRecords[i + 1].subtree.current()[0]) !== null && _nextRecords$subtree$ !== void 0 ? _nextRecords$subtree$ : marker;
-			record.subtree.moveBefore(anchor);
+		const items = latestItems;
+		const nextEntries = [];
+		const nextKeys = /* @__PURE__ */ new Set();
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			const itemKey = latestKeys[i];
+			if (nextKeys.has(itemKey)) throw duplicateKeyError(itemKey, i);
+			nextKeys.add(itemKey);
+			nextEntries.push({
+				item,
+				key: itemKey
+			});
 		}
-		emitDevtoolsEvent({
-			type: "mount-for",
-			length: nextRecords.length
-		});
-		records = nextRecords;
-	});
-	onScopeDispose(() => {
+		reconcileEntries(nextEntries);
+	};
+	const drainReconciliations = () => {
+		if (reconciling) return;
+		reconciling = true;
+		try {
+			while (reconcileRequested) {
+				reconcileRequested = false;
+				untrack(reconcileLatestItems);
+			}
+		} finally {
+			reconciling = false;
+		}
+	};
+	const scheduleReconciliation = () => {
+		if (disposed || !runner) return;
+		runner();
+		if (disposed) return;
+		reconcileRequested = true;
+		drainReconciliations();
+	};
+	try {
+		runner = effect(() => {
+			var _each2;
+			const nextItems = (_each2 = each()) !== null && _each2 !== void 0 ? _each2 : [];
+			let useFixedSlots = nextItems.length === records.length;
+			for (let i = 0; i < nextItems.length; i++) {
+				const item = nextItems[i];
+				const itemKey = key(item, i);
+				latestKeys[i] = itemKey;
+				if (useFixedSlots && !Object.is(itemKey, records[i].key)) useFixedSlots = false;
+			}
+			latestKeys.length = nextItems.length;
+			latestItems = nextItems;
+			latestItemsUseFixedSlots = useFixedSlots;
+		}, { scheduler: scheduleReconciliation });
+	} catch (error) {
+		dispose();
+		throw error;
+	}
+	if (disposed) {
 		stop(runner);
-		for (const record of records) disposeListRecord(record);
-		records = [];
-	}, true);
+		return;
+	}
+	reconcileRequested = true;
+	try {
+		drainReconciliations();
+	} catch (error) {
+		dispose();
+		throw error;
+	}
 }
 //#endregion
 //#region packages/core/runtime-dom/src/controlFlow.ts
@@ -2233,7 +2545,14 @@ function createLightDomProjection(host, lightChildren) {
 function replaceOutletNodes(outlet, nextNodes) {
 	const parent = outlet.end.parentNode;
 	if (!parent || parent !== outlet.start.parentNode) return;
+	const currentNodes = [];
 	let current = outlet.start.nextSibling;
+	while (current && current !== outlet.end) {
+		currentNodes.push(current);
+		current = current.nextSibling;
+	}
+	if (currentNodes.length === nextNodes.length && currentNodes.every((node, index) => node === nextNodes[index])) return;
+	current = outlet.start.nextSibling;
 	while (current && current !== outlet.end) {
 		const next = current.nextSibling;
 		parent.removeChild(current);
@@ -2287,6 +2606,7 @@ function prop(input, options = {}) {
 		values: input,
 		attr: options.attr,
 		reflect: options.reflect,
+		reactivity: options.reactivity,
 		default: options.default,
 		serialize: options.serialize,
 		deserialize: options.deserialize
@@ -2296,6 +2616,7 @@ function prop(input, options = {}) {
 		type,
 		attr: options.attr,
 		reflect: type === Boolean ? (_options$reflect = options.reflect) !== null && _options$reflect !== void 0 ? _options$reflect : true : options.reflect,
+		reactivity: options.reactivity,
 		default: type === Boolean ? (_options$default = options.default) !== null && _options$default !== void 0 ? _options$default : false : options.default,
 		serialize: options.serialize,
 		deserialize: options.deserialize
@@ -2318,7 +2639,7 @@ function createPropStore(defs) {
 	const slots = /* @__PURE__ */ new Map();
 	const props = {};
 	for (const def of defs) {
-		const slot = state();
+		const slot = def.reactivity === "shallow" ? shallowState() : state();
 		slots.set(def.name, slot);
 		Object.defineProperty(props, def.name, {
 			configurable: false,
@@ -2387,6 +2708,7 @@ function defineElement(tagName, options, setup) {
 			this.mountLifecycle.connect();
 		}
 		disconnectedCallback() {
+			if (isWithinRuntimeDomMove(this)) return;
 			this.mountLifecycle.disconnect();
 		}
 		mountElement() {
@@ -2577,7 +2899,8 @@ function normalizePropDefinitions(props) {
 				name: propKey,
 				attrName: isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false,
 				type: normalizePropType(type),
-				reflect: false
+				reflect: false,
+				reactivity: "deep"
 			};
 		}
 		const type = input === null || input === void 0 ? void 0 : input.type;
@@ -2587,6 +2910,7 @@ function normalizePropDefinitions(props) {
 			attrName: (input === null || input === void 0 ? void 0 : input.attr) === void 0 ? defaultAttr : input.attr,
 			type: normalizePropType(type),
 			reflect: Boolean(input === null || input === void 0 ? void 0 : input.reflect),
+			reactivity: (input === null || input === void 0 ? void 0 : input.reactivity) === "shallow" ? "shallow" : "deep",
 			default: input === null || input === void 0 ? void 0 : input.default,
 			serialize: input === null || input === void 0 ? void 0 : input.serialize,
 			deserialize: input === null || input === void 0 ? void 0 : input.deserialize