@zeus-js/runtime-dom 0.1.0 → 0.1.1-beta.1

package/dist/runtime-dom.global.js

@@ -1,18 +1,29 @@
 /**
-* runtime-dom v0.1.0
+* runtime-dom v0.1.1-beta.1
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 var ZeusRuntimeDOM = (function(exports) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#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
 	/**
@@ -495,6 +506,31 @@ var ZeusRuntimeDOM = (function(exports) {
 			}
 		}
 	}
+	/**
+	* 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
 	/**
@@ -872,60 +908,6 @@ var ZeusRuntimeDOM = (function(exports) {
 		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));
@@ -1358,11 +1340,84 @@ var ZeusRuntimeDOM = (function(exports) {
 	*/
 	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;
@@ -1374,6 +1429,32 @@ var ZeusRuntimeDOM = (function(exports) {
 		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();
@@ -1408,6 +1489,14 @@ var ZeusRuntimeDOM = (function(exports) {
 			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);
@@ -1422,7 +1511,7 @@ var ZeusRuntimeDOM = (function(exports) {
 	function moveRangeBefore(nodes, parent, marker = null) {
 		for (const node of nodes) {
 			trackRuntimeDomInsertion(parent, node);
-			parent.insertBefore(node, marker);
+			moveNodeBefore(parent, node, marker);
 		}
 	}
 	//#endregion
@@ -1467,10 +1556,11 @@ var ZeusRuntimeDOM = (function(exports) {
 		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();
@@ -1488,11 +1578,15 @@ var ZeusRuntimeDOM = (function(exports) {
 			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
@@ -1702,14 +1796,23 @@ var ZeusRuntimeDOM = (function(exports) {
 	}
 	//#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) {
+	function bindTextContent(el, value, once = false) {
+		applyBinding(value, once, (next) => {
+			el.textContent = stringifyText(next);
+		});
+	}
+	function applyBinding(value, once, apply) {
+		if (once) {
+			untrack(() => apply(value()));
+			return;
+		}
 		effect(() => {
-			el.textContent = stringifyText(value());
+			apply(value());
 		});
 	}
 	function stringifyText(value) {
@@ -1762,19 +1865,19 @@ var ZeusRuntimeDOM = (function(exports) {
 	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");
 		});
@@ -1786,10 +1889,9 @@ var ZeusRuntimeDOM = (function(exports) {
 		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;
@@ -1945,6 +2047,30 @@ var ZeusRuntimeDOM = (function(exports) {
 	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);
@@ -1954,63 +2080,210 @@ var ZeusRuntimeDOM = (function(exports) {
 	}
 	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 latestEntries = [];
+		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 reconcile = (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);
+							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 = {
+								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;
 			}
-			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 drainReconciliations = () => {
+			if (reconciling) return;
+			reconciling = true;
+			try {
+				while (reconcileRequested) {
+					reconcileRequested = false;
+					untrack(() => reconcile(latestEntries));
+				}
+			} finally {
+				reconciling = false;
 			}
-			emitDevtoolsEvent({
-				type: "mount-for",
-				length: nextRecords.length
-			});
-			records = nextRecords;
-		});
-		onScopeDispose(() => {
+		};
+		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 : [];
+				const nextEntries = [];
+				const nextKeys = /* @__PURE__ */ new Set();
+				for (let i = 0; i < nextItems.length; i++) {
+					const item = nextItems[i];
+					const itemKey = key(item, i);
+					if (nextKeys.has(itemKey)) throw duplicateKeyError(itemKey, i);
+					nextKeys.add(itemKey);
+					nextEntries.push({
+						item,
+						key: itemKey
+					});
+				}
+				latestEntries = nextEntries;
+			}, { 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
@@ -2235,7 +2508,14 @@ var ZeusRuntimeDOM = (function(exports) {
 	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);
@@ -2289,6 +2569,7 @@ var ZeusRuntimeDOM = (function(exports) {
 			values: input,
 			attr: options.attr,
 			reflect: options.reflect,
+			reactivity: options.reactivity,
 			default: options.default,
 			serialize: options.serialize,
 			deserialize: options.deserialize
@@ -2298,6 +2579,7 @@ var ZeusRuntimeDOM = (function(exports) {
 			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
@@ -2320,7 +2602,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		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,
@@ -2389,6 +2671,7 @@ var ZeusRuntimeDOM = (function(exports) {
 				this.mountLifecycle.connect();
 			}
 			disconnectedCallback() {
+				if (isWithinRuntimeDomMove(this)) return;
 				this.mountLifecycle.disconnect();
 			}
 			mountElement() {
@@ -2579,7 +2862,8 @@ var ZeusRuntimeDOM = (function(exports) {
 					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;
@@ -2589,6 +2873,7 @@ var ZeusRuntimeDOM = (function(exports) {
 				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