@zeus-js/runtime-dom 0.1.0-beta.8 → 0.1.0-beta.9

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

@@ -1,9 +1,8 @@
 /**
-* runtime-dom v0.1.0-beta.8
+* runtime-dom v0.1.0-beta.9
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
-import { effect, effectScope, getCurrentScope, onScopeDispose, scope, state, stop } from "@zeus-js/signal";
 //#region packages/core/runtime-dom/src/template.ts
 function template(html, _isImportNode = false, _isSVG = false, _isMathML = false) {
 	const t = document.createElement("template");
@@ -13,6 +12,1418 @@ function template(html, _isImportNode = false, _isSVG = false, _isMathML = false
 	};
 }
 //#endregion
+//#region packages/core/shared/src/makeMap.ts
+/**
+* Make a map and return a function for checking if a key
+* is in that map.
+* IMPORTANT: all calls of this function must be prefixed with
+* \/\*#\_\_PURE\_\_\*\/
+* So that rollup can tree-shake them if necessary.
+*/
+/*@__NO_SIDE_EFFECTS__*/
+function makeMap(str) {
+	const map = Object.create(null);
+	for (const key of str.split(",")) map[key] = 1;
+	return (val) => val in map;
+}
+Object.freeze({});
+Object.freeze([]);
+const extend = Object.assign;
+const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
+const isArray = Array.isArray;
+const isMap = (val) => toTypeString(val) === "[object Map]";
+const isString = (val) => typeof val === "string";
+const isSymbol = (val) => typeof val === "symbol";
+const isObject = (val) => val !== null && typeof val === "object";
+const objectToString = Object.prototype.toString;
+const toTypeString = (value) => objectToString.call(value);
+const toRawType = (value) => {
+	return toTypeString(value).slice(8, -1);
+};
+const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
+const cacheStringFunction = (fn) => {
+	const cache = Object.create(null);
+	return ((str) => {
+		return cache[str] || (cache[str] = fn(str));
+	});
+};
+/**
+* @private
+*/
+const capitalize = cacheStringFunction((str) => {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+});
+const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
+//#endregion
+//#region packages/core/signal/src/warning.ts
+function warn(msg, ...args) {
+	console.warn(`[Zeus warn] ${msg}`, ...args);
+}
+//#endregion
+//#region packages/core/signal/src/effectScope.ts
+let activeEffectScope;
+var EffectScope = class {
+	constructor(detached = false) {
+		this.detached = detached;
+		this._active = true;
+		this._on = 0;
+		this.effects = [];
+		this.cleanups = [];
+		this._isPaused = false;
+		this._warnOnRun = true;
+		this.__v_skip = true;
+		if (!detached && activeEffectScope) if (activeEffectScope.active) {
+			this.parent = activeEffectScope;
+			this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1;
+		} else {
+			this._active = false;
+			this._warnOnRun = false;
+		}
+	}
+	get active() {
+		return this._active;
+	}
+	pause() {
+		if (this._active) {
+			this._isPaused = true;
+			let i, l;
+			if (this.scopes) for (i = 0, l = this.scopes.length; i < l; i++) this.scopes[i].pause();
+			for (i = 0, l = this.effects.length; i < l; i++) this.effects[i].pause();
+		}
+	}
+	/**
+	* Resumes the effect scope, including all child scopes and effects.
+	*/
+	resume() {
+		if (this._active) {
+			if (this._isPaused) {
+				this._isPaused = false;
+				let i, l;
+				if (this.scopes) for (i = 0, l = this.scopes.length; i < l; i++) this.scopes[i].resume();
+				for (i = 0, l = this.effects.length; i < l; i++) this.effects[i].resume();
+			}
+		}
+	}
+	run(fn) {
+		if (this._active) {
+			const currentEffectScope = activeEffectScope;
+			try {
+				activeEffectScope = this;
+				return fn();
+			} finally {
+				activeEffectScope = currentEffectScope;
+			}
+		} else if (this._warnOnRun) warn(`cannot run an inactive effect scope.`);
+	}
+	/**
+	* This should only be called on non-detached scopes
+	* @internal
+	*/
+	on() {
+		if (++this._on === 1) {
+			this.prevScope = activeEffectScope;
+			activeEffectScope = this;
+		}
+	}
+	/**
+	* This should only be called on non-detached scopes
+	* @internal
+	*/
+	off() {
+		if (this._on > 0 && --this._on === 0) {
+			if (activeEffectScope === this) activeEffectScope = this.prevScope;
+			else {
+				let current = activeEffectScope;
+				while (current) {
+					if (current.prevScope === this) {
+						current.prevScope = this.prevScope;
+						break;
+					}
+					current = current.prevScope;
+				}
+			}
+			this.prevScope = void 0;
+		}
+	}
+	stop(fromParent) {
+		if (this._active) {
+			this._active = false;
+			let i, l;
+			for (i = 0, l = this.effects.length; i < l; i++) this.effects[i].stop();
+			this.effects.length = 0;
+			for (i = 0, l = this.cleanups.length; i < l; i++) this.cleanups[i]();
+			this.cleanups.length = 0;
+			if (this.scopes) {
+				for (i = 0, l = this.scopes.length; i < l; i++) this.scopes[i].stop(true);
+				this.scopes.length = 0;
+			}
+			if (!this.detached && this.parent && !fromParent) {
+				const last = this.parent.scopes.pop();
+				if (last && last !== this) {
+					this.parent.scopes[this.index] = last;
+					last.index = this.index;
+				}
+			}
+			this.parent = void 0;
+		}
+	}
+};
+/**
+* Creates an effect scope object which can capture the reactive effects (i.e.
+* computed and watchers) created within it so that these effects can be
+* disposed together. For detailed use cases of this API, please consult its
+* corresponding {@link https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md | RFC}.
+*
+* @param detached - Can be used to create a "detached" effect scope.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope}
+*/
+function effectScope(detached) {
+	return new EffectScope(detached);
+}
+/**
+* Returns the current active effect scope if there is one.
+*
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#getcurrentscope}
+*/
+function getCurrentScope() {
+	return activeEffectScope;
+}
+/**
+* Registers a dispose callback on the current active effect scope. The
+* callback will be invoked when the associated effect scope is stopped.
+*
+* @param fn - The callback function to attach to the scope's cleanup.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#onscopedispose}
+*/
+function onScopeDispose(fn, failSilently = false) {
+	if (activeEffectScope) activeEffectScope.cleanups.push(fn);
+	else if (!failSilently) warn("onScopeDispose() is called when there is no active effect scope to be associated with.");
+}
+//#endregion
+//#region packages/core/signal/src/effect.ts
+let activeSub;
+const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
+var ReactiveEffect = class {
+	constructor(fn) {
+		this.fn = fn;
+		this.deps = void 0;
+		this.depsTail = void 0;
+		this.flags = 5;
+		this.next = void 0;
+		this.cleanups = void 0;
+		this.scheduler = void 0;
+		this.scope = activeEffectScope;
+		if (activeEffectScope) if (activeEffectScope.active) activeEffectScope.effects.push(this);
+		else this.flags &= -2;
+	}
+	pause() {
+		this.flags |= 64;
+	}
+	resume() {
+		if (this.flags & 64) {
+			this.flags &= -65;
+			if (pausedQueueEffects.has(this)) {
+				pausedQueueEffects.delete(this);
+				this.trigger();
+			}
+		}
+	}
+	/**
+	* @internal
+	*/
+	notify() {
+		if (this.flags & 2 && !(this.flags & 32)) return;
+		if (!(this.flags & 8)) queueSubscriber(this);
+	}
+	run() {
+		if (!(this.flags & 1)) return this.fn();
+		this.flags |= 2;
+		cleanupEffect(this);
+		prepareDeps(this);
+		const prevEffect = activeSub;
+		const prevShouldTrack = shouldTrack;
+		activeSub = this;
+		shouldTrack = true;
+		try {
+			return this.fn();
+		} finally {
+			if (activeSub !== this) warn("Active effect was not restored correctly - this is likely a Vue internal bug.");
+			cleanupDeps(this);
+			activeSub = prevEffect;
+			shouldTrack = prevShouldTrack;
+			this.flags &= -3;
+		}
+	}
+	stop() {
+		if (this.flags & 1) {
+			for (let link = this.deps; link; link = link.nextDep) removeSub(link);
+			this.deps = this.depsTail = void 0;
+			cleanupEffect(this);
+			this.onStop && this.onStop();
+			this.flags &= -2;
+		}
+	}
+	trigger() {
+		if (this.flags & 64) pausedQueueEffects.add(this);
+		else if (this.scheduler) this.scheduler();
+		else this.runIfDirty();
+	}
+	/**
+	* @internal
+	*/
+	runIfDirty() {
+		if (isDirty(this)) this.run();
+	}
+	get dirty() {
+		return isDirty(this);
+	}
+};
+/**
+* For debugging
+*/
+let batchDepth = 0;
+let batchedSub;
+let batchedComputed;
+/**
+* @internal
+*/
+function queueSubscriber(sub, isComputed = false) {
+	sub.flags |= 8;
+	if (isComputed) {
+		sub.next = batchedComputed;
+		batchedComputed = sub;
+		return;
+	}
+	sub.next = batchedSub;
+	batchedSub = sub;
+}
+/**
+* @internal
+*/
+function startBatch() {
+	batchDepth++;
+}
+/**
+* Run batched effects when all batches have ended
+* @internal
+*/
+function endBatch() {
+	if (--batchDepth > 0) return;
+	if (batchedComputed) {
+		let e = batchedComputed;
+		batchedComputed = void 0;
+		while (e) {
+			const next = e.next;
+			e.next = void 0;
+			e.flags &= -9;
+			e = next;
+		}
+	}
+	let error;
+	while (batchedSub) {
+		let e = batchedSub;
+		batchedSub = void 0;
+		while (e) {
+			const next = e.next;
+			e.next = void 0;
+			e.flags &= -9;
+			if (e.flags & 1) try {
+				e.trigger();
+			} catch (err) {
+				if (!error) error = err;
+			}
+			e = next;
+		}
+	}
+	if (error) throw error;
+}
+function prepareDeps(sub) {
+	for (let link = sub.deps; link; link = link.nextDep) {
+		link.version = -1;
+		link.prevActiveLink = link.dep.activeLink;
+		link.dep.activeLink = link;
+	}
+}
+function cleanupDeps(sub) {
+	let head;
+	let tail = sub.depsTail;
+	let link = tail;
+	while (link) {
+		const prev = link.prevDep;
+		if (link.version === -1) {
+			if (link === tail) tail = prev;
+			removeSub(link);
+			removeDep(link);
+		} else head = link;
+		link.dep.activeLink = link.prevActiveLink;
+		link.prevActiveLink = void 0;
+		link = prev;
+	}
+	sub.deps = head;
+	sub.depsTail = tail;
+}
+function isDirty(sub) {
+	for (let link = sub.deps; link; link = link.nextDep) if (link.dep.version !== link.version || link.dep.computed && (refreshComputed(link.dep.computed) || link.dep.version !== link.version)) return true;
+	return false;
+}
+/**
+* Returning false indicates the refresh failed
+* @internal
+*/
+function refreshComputed(computed) {
+	if (computed.flags & 4 && !(computed.flags & 16)) return;
+	computed.flags &= -17;
+	if (computed.globalVersion === globalVersion) return;
+	computed.globalVersion = globalVersion;
+	if (!computed.isSSR && computed.flags & 128 && (!computed.deps && !computed._dirty || !isDirty(computed))) return;
+	computed.flags |= 2;
+	const dep = computed.dep;
+	const prevSub = activeSub;
+	const prevShouldTrack = shouldTrack;
+	activeSub = computed;
+	shouldTrack = true;
+	try {
+		prepareDeps(computed);
+		const value = computed.fn(computed._value);
+		if (dep.version === 0 || hasChanged(value, computed._value)) {
+			computed.flags |= 128;
+			computed._value = value;
+			dep.version++;
+		}
+	} catch (err) {
+		dep.version++;
+		throw err;
+	} finally {
+		activeSub = prevSub;
+		shouldTrack = prevShouldTrack;
+		cleanupDeps(computed);
+		computed.flags &= -3;
+	}
+}
+function removeSub(link, soft = false) {
+	const { dep, prevSub, nextSub } = link;
+	if (prevSub) {
+		prevSub.nextSub = nextSub;
+		link.prevSub = void 0;
+	}
+	if (nextSub) {
+		nextSub.prevSub = prevSub;
+		link.nextSub = void 0;
+	}
+	if (dep.subsHead === link) dep.subsHead = nextSub;
+	if (dep.subs === link) {
+		dep.subs = prevSub;
+		if (!prevSub && dep.computed) {
+			dep.computed.flags &= -5;
+			for (let l = dep.computed.deps; l; l = l.nextDep) removeSub(l, true);
+		}
+	}
+	if (!soft && !--dep.sc && dep.map) dep.map.delete(dep.key);
+}
+function removeDep(link) {
+	const { prevDep, nextDep } = link;
+	if (prevDep) {
+		prevDep.nextDep = nextDep;
+		link.prevDep = void 0;
+	}
+	if (nextDep) {
+		nextDep.prevDep = prevDep;
+		link.nextDep = void 0;
+	}
+}
+function effect(fn, options) {
+	if (fn.effect instanceof ReactiveEffect) fn = fn.effect.fn;
+	const e = new ReactiveEffect(fn);
+	if (options) extend(e, options);
+	try {
+		e.run();
+	} catch (err) {
+		e.stop();
+		throw err;
+	}
+	const runner = e.run.bind(e);
+	runner.effect = e;
+	return runner;
+}
+/**
+* Stops the effect associated with the given runner.
+*
+* @param runner - Association with the effect to stop tracking.
+*/
+function stop(runner) {
+	runner.effect.stop();
+}
+/**
+* @internal
+*/
+let shouldTrack = true;
+const trackStack = [];
+/**
+* Temporarily pauses tracking.
+*/
+function pauseTracking() {
+	trackStack.push(shouldTrack);
+	shouldTrack = false;
+}
+/**
+* Resets the previous global effect tracking state.
+*/
+function resetTracking() {
+	const last = trackStack.pop();
+	shouldTrack = last === void 0 ? true : last;
+}
+function cleanupEffect(e) {
+	const cleanups = e.cleanups;
+	e.cleanups = void 0;
+	if (cleanups) {
+		const prevSub = activeSub;
+		activeSub = void 0;
+		try {
+			let error;
+			for (const cleanup of cleanups) try {
+				cleanup();
+			} catch (cleanupError) {
+				var _error;
+				(_error = error) !== null && _error !== void 0 || (error = cleanupError);
+			}
+			if (error) throw error;
+		} finally {
+			activeSub = prevSub;
+		}
+	}
+}
+//#endregion
+//#region packages/core/signal/src/dep.ts
+/**
+* Incremented every time a reactive change happens
+* This is used to give computed a fast path to avoid re-compute when nothing
+* has changed.
+*/
+let globalVersion = 0;
+/**
+* Represents a link between a source (Dep) and a subscriber (Effect or Computed).
+* Deps and subs have a many-to-many relationship - each link between a
+* dep and a sub is represented by a Link instance.
+*
+* A Link is also a node in two doubly-linked lists - one for the associated
+* sub to track all its deps, and one for the associated dep to track all its
+* subs.
+*
+* @internal
+*/
+var Link = class {
+	constructor(sub, dep) {
+		this.sub = sub;
+		this.dep = dep;
+		this.version = dep.version;
+		this.nextDep = this.prevDep = this.nextSub = this.prevSub = this.prevActiveLink = void 0;
+	}
+};
+/**
+* @internal
+*/
+var Dep = class {
+	constructor(computed) {
+		this.computed = computed;
+		this.version = 0;
+		this.activeLink = void 0;
+		this.subs = void 0;
+		this.map = void 0;
+		this.key = void 0;
+		this.sc = 0;
+		this.__v_skip = true;
+		this.subsHead = void 0;
+	}
+	track(debugInfo) {
+		if (!activeSub || !shouldTrack || activeSub === this.computed) return;
+		let link = this.activeLink;
+		if (link === void 0 || link.sub !== activeSub) {
+			link = this.activeLink = new Link(activeSub, this);
+			if (!activeSub.deps) activeSub.deps = activeSub.depsTail = link;
+			else {
+				link.prevDep = activeSub.depsTail;
+				activeSub.depsTail.nextDep = link;
+				activeSub.depsTail = link;
+			}
+			addSub(link);
+		} else if (link.version === -1) {
+			link.version = this.version;
+			if (link.nextDep) {
+				const next = link.nextDep;
+				next.prevDep = link.prevDep;
+				if (link.prevDep) link.prevDep.nextDep = next;
+				link.prevDep = activeSub.depsTail;
+				link.nextDep = void 0;
+				activeSub.depsTail.nextDep = link;
+				activeSub.depsTail = link;
+				if (activeSub.deps === link) activeSub.deps = next;
+			}
+		}
+		if (activeSub.onTrack) activeSub.onTrack(extend({ effect: activeSub }, debugInfo));
+		return link;
+	}
+	trigger(debugInfo) {
+		this.version++;
+		globalVersion++;
+		this.notify(debugInfo);
+	}
+	notify(debugInfo) {
+		startBatch();
+		try {
+			for (let head = this.subsHead; head; head = head.nextSub) if (head.sub.onTrigger && !(head.sub.flags & 8)) head.sub.onTrigger(extend({ effect: head.sub }, debugInfo));
+			for (let link = this.subs; link; link = link.prevSub) if (link.sub.notify()) link.sub.dep.notify();
+		} finally {
+			endBatch();
+		}
+	}
+};
+function addSub(link) {
+	link.dep.sc++;
+	if (link.sub.flags & 4) {
+		const computed = link.dep.computed;
+		if (computed && !link.dep.subs) {
+			computed.flags |= 20;
+			for (let l = computed.deps; l; l = l.nextDep) addSub(l);
+		}
+		const currentTail = link.dep.subs;
+		if (currentTail !== link) {
+			link.prevSub = currentTail;
+			if (currentTail) currentTail.nextSub = link;
+		}
+		if (link.dep.subsHead === void 0) link.dep.subsHead = link;
+		link.dep.subs = link;
+	}
+}
+const targetMap = /* @__PURE__ */ new WeakMap();
+const ITERATE_KEY = Symbol("Object iterate");
+const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate");
+const ARRAY_ITERATE_KEY = Symbol("Array iterate");
+/**
+* Tracks access to a reactive property.
+*
+* This will check which effect is running at the moment and record it as dep
+* which records all effects that depend on the reactive property.
+*
+* @param target - Object holding the reactive property.
+* @param type - Defines the type of access to the reactive property.
+* @param key - Identifier of the reactive property to track.
+*/
+function track(target, type, key) {
+	if (shouldTrack && activeSub) {
+		let depsMap = targetMap.get(target);
+		if (!depsMap) targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
+		let dep = depsMap.get(key);
+		if (!dep) {
+			depsMap.set(key, dep = new Dep());
+			dep.map = depsMap;
+			dep.key = key;
+		}
+		dep.track({
+			target,
+			type,
+			key
+		});
+	}
+}
+/**
+* Finds all deps associated with the target (or a specific property) and
+* triggers the effects stored within.
+*
+* @param target - The reactive object.
+* @param type - Defines the type of the operation that needs to trigger effects.
+* @param key - Can be used to target a specific reactive property in the target object.
+*/
+function trigger(target, type, key, newValue, oldValue, oldTarget) {
+	const depsMap = targetMap.get(target);
+	if (!depsMap) {
+		globalVersion++;
+		return;
+	}
+	const run = (dep) => {
+		if (dep) dep.trigger({
+			target,
+			type,
+			key,
+			newValue,
+			oldValue,
+			oldTarget
+		});
+	};
+	startBatch();
+	if (type === "clear") depsMap.forEach(run);
+	else {
+		const targetIsArray = isArray(target);
+		const isArrayIndex = targetIsArray && isIntegerKey(key);
+		if (targetIsArray && key === "length") {
+			const newLength = Number(newValue);
+			depsMap.forEach((dep, key) => {
+				if (key === "length" || key === ARRAY_ITERATE_KEY || !isSymbol(key) && key >= newLength) run(dep);
+			});
+		} else {
+			if (key !== void 0 || depsMap.has(void 0)) run(depsMap.get(key));
+			if (isArrayIndex) run(depsMap.get(ARRAY_ITERATE_KEY));
+			switch (type) {
+				case "add":
+					if (!targetIsArray) {
+						run(depsMap.get(ITERATE_KEY));
+						if (isMap(target)) run(depsMap.get(MAP_KEY_ITERATE_KEY));
+					} else if (isArrayIndex) run(depsMap.get("length"));
+					break;
+				case "delete":
+					if (!targetIsArray) {
+						run(depsMap.get(ITERATE_KEY));
+						if (isMap(target)) run(depsMap.get(MAP_KEY_ITERATE_KEY));
+					}
+					break;
+				case "set":
+					if (isMap(target)) run(depsMap.get(ITERATE_KEY));
+					break;
+			}
+		}
+	}
+	endBatch();
+}
+//#endregion
+//#region packages/core/signal/src/arrayInstrumentations.ts
+/**
+* Track array iteration and return:
+* - if input is reactive: a cloned raw array with reactive values
+* - if input is non-reactive or shallowReactive: the original raw array
+*/
+function reactiveReadArray(array) {
+	const raw = /* @__PURE__ */ toRaw(array);
+	if (raw === array) return raw;
+	track(raw, "iterate", ARRAY_ITERATE_KEY);
+	return /* @__PURE__ */ isShallow(array) ? raw : raw.map(toReactive);
+}
+/**
+* Track array iteration and return raw array
+*/
+function shallowReadArray(arr) {
+	track(arr = /* @__PURE__ */ toRaw(arr), "iterate", ARRAY_ITERATE_KEY);
+	return arr;
+}
+function toWrapped(target, item) {
+	if (/* @__PURE__ */ isReadonly(target)) return /* @__PURE__ */ isReactive(target) ? toReadonly(toReactive(item)) : toReadonly(item);
+	return toReactive(item);
+}
+const arrayInstrumentations = {
+	__proto__: null,
+	[Symbol.iterator]() {
+		return iterator(this, Symbol.iterator, (item) => toWrapped(this, item));
+	},
+	concat(...args) {
+		return reactiveReadArray(this).concat(...args.map((x) => isArray(x) ? reactiveReadArray(x) : x));
+	},
+	entries() {
+		return iterator(this, "entries", (value) => {
+			value[1] = toWrapped(this, value[1]);
+			return value;
+		});
+	},
+	every(fn, thisArg) {
+		return apply(this, "every", fn, thisArg, void 0, arguments);
+	},
+	filter(fn, thisArg) {
+		return apply(this, "filter", fn, thisArg, (v) => v.map((item) => toWrapped(this, item)), arguments);
+	},
+	find(fn, thisArg) {
+		return apply(this, "find", fn, thisArg, (item) => toWrapped(this, item), arguments);
+	},
+	findIndex(fn, thisArg) {
+		return apply(this, "findIndex", fn, thisArg, void 0, arguments);
+	},
+	findLast(fn, thisArg) {
+		return apply(this, "findLast", fn, thisArg, (item) => toWrapped(this, item), arguments);
+	},
+	findLastIndex(fn, thisArg) {
+		return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
+	},
+	forEach(fn, thisArg) {
+		return apply(this, "forEach", fn, thisArg, void 0, arguments);
+	},
+	includes(...args) {
+		return searchProxy(this, "includes", args);
+	},
+	indexOf(...args) {
+		return searchProxy(this, "indexOf", args);
+	},
+	join(separator) {
+		return reactiveReadArray(this).join(separator);
+	},
+	lastIndexOf(...args) {
+		return searchProxy(this, "lastIndexOf", args);
+	},
+	map(fn, thisArg) {
+		return apply(this, "map", fn, thisArg, void 0, arguments);
+	},
+	pop() {
+		return noTracking(this, "pop");
+	},
+	push(...args) {
+		return noTracking(this, "push", args);
+	},
+	reduce(fn, ...args) {
+		return reduce(this, "reduce", fn, args);
+	},
+	reduceRight(fn, ...args) {
+		return reduce(this, "reduceRight", fn, args);
+	},
+	shift() {
+		return noTracking(this, "shift");
+	},
+	some(fn, thisArg) {
+		return apply(this, "some", fn, thisArg, void 0, arguments);
+	},
+	splice(...args) {
+		return noTracking(this, "splice", args);
+	},
+	toReversed() {
+		return reactiveReadArray(this).toReversed();
+	},
+	toSorted(comparer) {
+		return reactiveReadArray(this).toSorted(comparer);
+	},
+	toSpliced(...args) {
+		return reactiveReadArray(this).toSpliced(...args);
+	},
+	unshift(...args) {
+		return noTracking(this, "unshift", args);
+	},
+	values() {
+		return iterator(this, "values", (item) => toWrapped(this, item));
+	}
+};
+function iterator(self, method, wrapValue) {
+	const arr = shallowReadArray(self);
+	const iter = arr[method]();
+	if (arr !== self && !/* @__PURE__ */ isShallow(self)) {
+		iter._next = iter.next;
+		iter.next = () => {
+			const result = iter._next();
+			if (!result.done) result.value = wrapValue(result.value);
+			return result;
+		};
+	}
+	return iter;
+}
+const arrayProto = Array.prototype;
+function apply(self, method, fn, thisArg, wrappedRetFn, args) {
+	const arr = shallowReadArray(self);
+	const needsWrap = arr !== self && !/* @__PURE__ */ isShallow(self);
+	const methodFn = arr[method];
+	if (methodFn !== arrayProto[method]) {
+		const result = methodFn.apply(self, args);
+		return needsWrap ? toReactive(result) : result;
+	}
+	let wrappedFn = fn;
+	if (arr !== self) {
+		if (needsWrap) wrappedFn = function(item, index) {
+			return fn.call(this, toWrapped(self, item), index, self);
+		};
+		else if (fn.length > 2) wrappedFn = function(item, index) {
+			return fn.call(this, item, index, self);
+		};
+	}
+	const result = methodFn.call(arr, wrappedFn, thisArg);
+	return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
+}
+function reduce(self, method, fn, args) {
+	const arr = shallowReadArray(self);
+	const needsWrap = arr !== self && !/* @__PURE__ */ isShallow(self);
+	let wrappedFn = fn;
+	let wrapInitialAccumulator = false;
+	if (arr !== self) {
+		if (needsWrap) {
+			wrapInitialAccumulator = args.length === 0;
+			wrappedFn = function(acc, item, index) {
+				if (wrapInitialAccumulator) {
+					wrapInitialAccumulator = false;
+					acc = toWrapped(self, acc);
+				}
+				return fn.call(this, acc, toWrapped(self, item), index, self);
+			};
+		} else if (fn.length > 3) wrappedFn = function(acc, item, index) {
+			return fn.call(this, acc, item, index, self);
+		};
+	}
+	const result = arr[method](wrappedFn, ...args);
+	return wrapInitialAccumulator ? toWrapped(self, result) : result;
+}
+function searchProxy(self, method, args) {
+	const arr = /* @__PURE__ */ toRaw(self);
+	track(arr, "iterate", ARRAY_ITERATE_KEY);
+	const res = arr[method](...args);
+	if ((res === -1 || res === false) && /* @__PURE__ */ isProxy(args[0])) {
+		args[0] = /* @__PURE__ */ toRaw(args[0]);
+		return arr[method](...args);
+	}
+	return res;
+}
+function noTracking(self, method, args = []) {
+	pauseTracking();
+	startBatch();
+	const res = (/* @__PURE__ */ toRaw(self))[method].apply(self, args);
+	endBatch();
+	resetTracking();
+	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));
+function hasOwnProperty(key) {
+	if (!isSymbol(key)) key = String(key);
+	const obj = /* @__PURE__ */ toRaw(this);
+	track(obj, "has", key);
+	return obj.hasOwnProperty(key);
+}
+var BaseReactiveHandler = class {
+	constructor(_isReadonly = false, _isShallow = false) {
+		this._isReadonly = _isReadonly;
+		this._isShallow = _isShallow;
+	}
+	get(target, key, receiver) {
+		if (key === "__v_skip") return target["__v_skip"];
+		const isReadonly = this._isReadonly, isShallow = this._isShallow;
+		if (key === "__v_isReactive") return !isReadonly;
+		else if (key === "__v_isReadonly") return isReadonly;
+		else if (key === "__v_isShallow") return isShallow;
+		else if (key === "__v_raw") {
+			if (receiver === (isReadonly ? isShallow ? shallowReadonlyMap : readonlyMap : isShallow ? shallowReactiveMap : reactiveMap).get(target) || Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) return target;
+			return;
+		}
+		const targetIsArray = isArray(target);
+		if (!isReadonly) {
+			let fn;
+			if (targetIsArray && (fn = arrayInstrumentations[key])) return fn;
+			if (key === "hasOwnProperty") return hasOwnProperty;
+		}
+		const res = Reflect.get(target, key, /* @__PURE__ */ isRef(target) ? target : receiver);
+		if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) return res;
+		if (!isReadonly) track(target, "get", key);
+		if (isShallow) return res;
+		if (/* @__PURE__ */ isRef(res)) {
+			const value = targetIsArray && isIntegerKey(key) ? res : res.value;
+			return isReadonly && isObject(value) ? /* @__PURE__ */ readonly(value) : value;
+		}
+		if (isObject(res)) return isReadonly ? /* @__PURE__ */ readonly(res) : /* @__PURE__ */ reactive(res);
+		return res;
+	}
+};
+var MutableReactiveHandler = class extends BaseReactiveHandler {
+	constructor(isShallow = false) {
+		super(false, isShallow);
+	}
+	set(target, key, value, receiver) {
+		let oldValue = target[key];
+		const isArrayWithIntegerKey = isArray(target) && isIntegerKey(key);
+		if (!this._isShallow) {
+			const isOldValueReadonly = /* @__PURE__ */ isReadonly(oldValue);
+			if (!/* @__PURE__ */ isShallow(value) && !/* @__PURE__ */ isReadonly(value)) {
+				oldValue = /* @__PURE__ */ toRaw(oldValue);
+				value = /* @__PURE__ */ toRaw(value);
+			}
+			if (!isArrayWithIntegerKey && /* @__PURE__ */ isRef(oldValue) && !/* @__PURE__ */ isRef(value)) if (isOldValueReadonly) {
+				warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target[key]);
+				return true;
+			} else {
+				oldValue.value = value;
+				return true;
+			}
+		}
+		const hadKey = isArrayWithIntegerKey ? Number(key) < target.length : hasOwn(target, key);
+		const result = Reflect.set(target, key, value, /* @__PURE__ */ isRef(target) ? target : receiver);
+		if (target === /* @__PURE__ */ toRaw(receiver)) {
+			if (!hadKey) trigger(target, "add", key, value);
+			else if (hasChanged(value, oldValue)) trigger(target, "set", key, value, oldValue);
+		}
+		return result;
+	}
+	deleteProperty(target, key) {
+		const hadKey = hasOwn(target, key);
+		const oldValue = target[key];
+		const result = Reflect.deleteProperty(target, key);
+		if (result && hadKey) trigger(target, "delete", key, void 0, oldValue);
+		return result;
+	}
+	has(target, key) {
+		const result = Reflect.has(target, key);
+		if (!isSymbol(key) || !builtInSymbols.has(key)) track(target, "has", key);
+		return result;
+	}
+	ownKeys(target) {
+		track(target, "iterate", isArray(target) ? "length" : ITERATE_KEY);
+		return Reflect.ownKeys(target);
+	}
+};
+var ReadonlyReactiveHandler = class extends BaseReactiveHandler {
+	constructor(isShallow = false) {
+		super(true, isShallow);
+	}
+	set(target, key) {
+		warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
+		return true;
+	}
+	deleteProperty(target, key) {
+		warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
+		return true;
+	}
+};
+const mutableHandlers = /*@__PURE__*/ new MutableReactiveHandler();
+const readonlyHandlers = /*@__PURE__*/ new ReadonlyReactiveHandler();
+//#endregion
+//#region packages/core/signal/src/collectionHandlers.ts
+const toShallow = (value) => value;
+const getProto = (v) => Reflect.getPrototypeOf(v);
+function createIterableMethod(method, isReadonly, isShallow) {
+	return function(...args) {
+		const target = this["__v_raw"];
+		const rawTarget = /* @__PURE__ */ toRaw(target);
+		const targetIsMap = isMap(rawTarget);
+		const isPair = method === "entries" || method === Symbol.iterator && targetIsMap;
+		const isKeyOnly = method === "keys" && targetIsMap;
+		const innerIterator = target[method](...args);
+		const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
+		!isReadonly && track(rawTarget, "iterate", isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY);
+		return extend(Object.create(innerIterator), { next() {
+			const { value, done } = innerIterator.next();
+			return done ? {
+				value,
+				done
+			} : {
+				value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
+				done
+			};
+		} });
+	};
+}
+function createReadonlyMethod(type) {
+	return function(...args) {
+		{
+			const key = args[0] ? `on key "${args[0]}" ` : ``;
+			warn(`${capitalize(type)} operation ${key}failed: target is readonly.`, /* @__PURE__ */ toRaw(this));
+		}
+		return type === "delete" ? false : type === "clear" ? void 0 : this;
+	};
+}
+function createInstrumentations(readonly, shallow) {
+	const instrumentations = {
+		get(key) {
+			const target = this["__v_raw"];
+			const rawTarget = /* @__PURE__ */ toRaw(target);
+			const rawKey = /* @__PURE__ */ toRaw(key);
+			if (!readonly) {
+				if (hasChanged(key, rawKey)) track(rawTarget, "get", key);
+				track(rawTarget, "get", rawKey);
+			}
+			const { has } = getProto(rawTarget);
+			const wrap = shallow ? toShallow : readonly ? toReadonly : toReactive;
+			if (has.call(rawTarget, key)) return wrap(target.get(key));
+			else if (has.call(rawTarget, rawKey)) return wrap(target.get(rawKey));
+			else if (target !== rawTarget) target.get(key);
+		},
+		get size() {
+			const target = this["__v_raw"];
+			!readonly && track(/* @__PURE__ */ toRaw(target), "iterate", ITERATE_KEY);
+			return target.size;
+		},
+		has(key) {
+			const target = this["__v_raw"];
+			const rawTarget = /* @__PURE__ */ toRaw(target);
+			const rawKey = /* @__PURE__ */ toRaw(key);
+			if (!readonly) {
+				if (hasChanged(key, rawKey)) track(rawTarget, "has", key);
+				track(rawTarget, "has", rawKey);
+			}
+			return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey);
+		},
+		forEach(callback, thisArg) {
+			const observed = this;
+			const target = observed["__v_raw"];
+			const rawTarget = /* @__PURE__ */ toRaw(target);
+			const wrap = shallow ? toShallow : readonly ? toReadonly : toReactive;
+			!readonly && track(rawTarget, "iterate", ITERATE_KEY);
+			return target.forEach((value, key) => {
+				return callback.call(thisArg, wrap(value), wrap(key), observed);
+			});
+		}
+	};
+	extend(instrumentations, readonly ? {
+		add: createReadonlyMethod("add"),
+		set: createReadonlyMethod("set"),
+		delete: createReadonlyMethod("delete"),
+		clear: createReadonlyMethod("clear")
+	} : {
+		add(value) {
+			const target = /* @__PURE__ */ toRaw(this);
+			const proto = getProto(target);
+			const rawValue = /* @__PURE__ */ toRaw(value);
+			const valueToAdd = !shallow && !/* @__PURE__ */ isShallow(value) && !/* @__PURE__ */ isReadonly(value) ? rawValue : value;
+			if (!(proto.has.call(target, valueToAdd) || hasChanged(value, valueToAdd) && proto.has.call(target, value) || hasChanged(rawValue, valueToAdd) && proto.has.call(target, rawValue))) {
+				target.add(valueToAdd);
+				trigger(target, "add", valueToAdd, valueToAdd);
+			}
+			return this;
+		},
+		set(key, value) {
+			if (!shallow && !/* @__PURE__ */ isShallow(value) && !/* @__PURE__ */ isReadonly(value)) value = /* @__PURE__ */ toRaw(value);
+			const target = /* @__PURE__ */ toRaw(this);
+			const { has, get } = getProto(target);
+			let hadKey = has.call(target, key);
+			if (!hadKey) {
+				key = /* @__PURE__ */ toRaw(key);
+				hadKey = has.call(target, key);
+			} else checkIdentityKeys(target, has, key);
+			const oldValue = get.call(target, key);
+			target.set(key, value);
+			if (!hadKey) trigger(target, "add", key, value);
+			else if (hasChanged(value, oldValue)) trigger(target, "set", key, value, oldValue);
+			return this;
+		},
+		delete(key) {
+			const target = /* @__PURE__ */ toRaw(this);
+			const { has, get } = getProto(target);
+			let hadKey = has.call(target, key);
+			if (!hadKey) {
+				key = /* @__PURE__ */ toRaw(key);
+				hadKey = has.call(target, key);
+			} else checkIdentityKeys(target, has, key);
+			const oldValue = get ? get.call(target, key) : void 0;
+			const result = target.delete(key);
+			if (hadKey) trigger(target, "delete", key, void 0, oldValue);
+			return result;
+		},
+		clear() {
+			const target = /* @__PURE__ */ toRaw(this);
+			const hadItems = target.size !== 0;
+			const oldTarget = isMap(target) ? new Map(target) : new Set(target);
+			const result = target.clear();
+			if (hadItems) trigger(target, "clear", void 0, void 0, oldTarget);
+			return result;
+		}
+	});
+	[
+		"keys",
+		"values",
+		"entries",
+		Symbol.iterator
+	].forEach((method) => {
+		instrumentations[method] = createIterableMethod(method, readonly, shallow);
+	});
+	return instrumentations;
+}
+function createInstrumentationGetter(isReadonly, shallow) {
+	const instrumentations = createInstrumentations(isReadonly, shallow);
+	return (target, key, receiver) => {
+		if (key === "__v_isReactive") return !isReadonly;
+		else if (key === "__v_isReadonly") return isReadonly;
+		else if (key === "__v_raw") return target;
+		return Reflect.get(hasOwn(instrumentations, key) && key in target ? instrumentations : target, key, receiver);
+	};
+}
+const mutableCollectionHandlers = { get: /*@__PURE__*/ createInstrumentationGetter(false, false) };
+const readonlyCollectionHandlers = { get: /*@__PURE__*/ createInstrumentationGetter(true, false) };
+function checkIdentityKeys(target, has, key) {
+	const rawKey = /* @__PURE__ */ toRaw(key);
+	if (rawKey !== key && has.call(target, rawKey)) {
+		const type = toRawType(target);
+		warn(`Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`);
+	}
+}
+//#endregion
+//#region packages/core/signal/src/reactive.ts
+const reactiveMap = /* @__PURE__ */ new WeakMap();
+const shallowReactiveMap = /* @__PURE__ */ new WeakMap();
+const readonlyMap = /* @__PURE__ */ new WeakMap();
+const shallowReadonlyMap = /* @__PURE__ */ new WeakMap();
+function targetTypeMap(rawType) {
+	switch (rawType) {
+		case "Object":
+		case "Array": return 1;
+		case "Map":
+		case "Set":
+		case "WeakMap":
+		case "WeakSet": return 2;
+		default: return 0;
+	}
+}
+function getTargetType(value) {
+	return value["__v_skip"] || !Object.isExtensible(value) ? 0 : targetTypeMap(toRawType(value));
+}
+/*@__NO_SIDE_EFFECTS__*/
+function reactive(target) {
+	if (/* @__PURE__ */ isReadonly(target)) return target;
+	return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
+}
+/**
+* Takes an object (reactive or plain) or a ref and returns a readonly proxy to
+* the original.
+*
+* A readonly proxy is deep: any nested property accessed will be readonly as
+* well. It also has the same ref-unwrapping behavior as {@link reactive},
+* except the unwrapped values will also be made readonly.
+*
+* @example
+* ```js
+* const original = reactive({ count: 0 })
+*
+* const copy = readonly(original)
+*
+* watchEffect(() => {
+*   // works for reactivity tracking
+*   console.log(copy.count)
+* })
+*
+* // mutating original will trigger watchers relying on the copy
+* original.count++
+*
+* // mutating the copy will fail and result in a warning
+* copy.count++ // warning!
+* ```
+*
+* @param target - The source object.
+* @see {@link https://vuejs.org/api/reactivity-core.html#readonly}
+*/
+/*@__NO_SIDE_EFFECTS__*/
+function readonly(target) {
+	return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers, readonlyMap);
+}
+function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
+	if (!isObject(target)) {
+		warn(`value cannot be made ${isReadonly ? "readonly" : "reactive"}: ${String(target)}`);
+		return target;
+	}
+	if (target["__v_raw"] && !(isReadonly && target["__v_isReactive"])) return target;
+	const targetType = getTargetType(target);
+	if (targetType === 0) return target;
+	const existingProxy = proxyMap.get(target);
+	if (existingProxy) return existingProxy;
+	const proxy = new Proxy(target, targetType === 2 ? collectionHandlers : baseHandlers);
+	proxyMap.set(target, proxy);
+	return proxy;
+}
+/**
+* Checks if an object is a proxy created by {@link reactive} or
+* {@link shallowReactive} (or {@link ref} in some cases).
+*
+* @example
+* ```js
+* isReactive(reactive({}))            // => true
+* isReactive(readonly(reactive({})))  // => true
+* isReactive(ref({}).value)           // => true
+* isReactive(readonly(ref({})).value) // => true
+* isReactive(ref(true))               // => false
+* isReactive(shallowRef({}).value)    // => false
+* isReactive(shallowReactive({}))     // => true
+* ```
+*
+* @param value - The value to check.
+* @see {@link https://vuejs.org/api/reactivity-utilities.html#isreactive}
+*/
+/*@__NO_SIDE_EFFECTS__*/
+function isReactive(value) {
+	if (/* @__PURE__ */ isReadonly(value)) return /* @__PURE__ */ isReactive(value["__v_raw"]);
+	return !!(value && value["__v_isReactive"]);
+}
+/**
+* Checks whether the passed value is a readonly object. The properties of a
+* readonly object can change, but they can't be assigned directly via the
+* passed object.
+*
+* The proxies created by {@link readonly} and {@link shallowReadonly} are
+* both considered readonly, as is a computed ref without a set function.
+*
+* @param value - The value to check.
+* @see {@link https://vuejs.org/api/reactivity-utilities.html#isreadonly}
+*/
+/*@__NO_SIDE_EFFECTS__*/
+function isReadonly(value) {
+	return !!(value && value["__v_isReadonly"]);
+}
+/*@__NO_SIDE_EFFECTS__*/
+function isShallow(value) {
+	return !!(value && value["__v_isShallow"]);
+}
+/**
+* Checks if an object is a proxy created by {@link reactive},
+* {@link readonly}, {@link shallowReactive} or {@link shallowReadonly}.
+*
+* @param value - The value to check.
+* @see {@link https://vuejs.org/api/reactivity-utilities.html#isproxy}
+*/
+/*@__NO_SIDE_EFFECTS__*/
+function isProxy(value) {
+	return value ? !!value["__v_raw"] : false;
+}
+/**
+* Returns the raw, original object of a Vue-created proxy.
+*
+* `toRaw()` can return the original object from proxies created by
+* {@link reactive}, {@link readonly}, {@link shallowReactive} or
+* {@link shallowReadonly}.
+*
+* This is an escape hatch that can be used to temporarily read without
+* incurring proxy access / tracking overhead or write without triggering
+* changes. It is **not** recommended to hold a persistent reference to the
+* original object. Use with caution.
+*
+* @example
+* ```js
+* const foo = {}
+* const reactiveFoo = reactive(foo)
+*
+* console.log(toRaw(reactiveFoo) === foo) // true
+* ```
+*
+* @param observed - The object for which the "raw" value is requested.
+* @see {@link https://vuejs.org/api/reactivity-advanced.html#toraw}
+*/
+/*@__NO_SIDE_EFFECTS__*/
+function toRaw(observed) {
+	const raw = observed && observed["__v_raw"];
+	return raw ? /* @__PURE__ */ toRaw(raw) : observed;
+}
+/**
+* Returns a reactive proxy of the given value (if possible).
+*
+* If the given value is not an object, the original value itself is returned.
+*
+* @param value - The value for which a reactive proxy shall be created.
+*/
+const toReactive = (value) => isObject(value) ? /* @__PURE__ */ reactive(value) : value;
+/**
+* Returns a readonly proxy of the given value (if possible).
+*
+* If the given value is not an object, the original value itself is returned.
+*
+* @param value - The value for which a readonly proxy shall be created.
+*/
+const toReadonly = (value) => isObject(value) ? /* @__PURE__ */ readonly(value) : value;
+//#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 isProxyable(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Array.isArray(value)) return true;
+	if (value instanceof Map || value instanceof Set || value instanceof WeakMap || value instanceof WeakSet) return true;
+	return isPlainObject(value);
+}
+function isPlainObject(value) {
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+//#endregion
+//#region packages/core/runtime-dom/src/domOwnership.ts
+const activeLightDomHosts = /* @__PURE__ */ new WeakMap();
+const runtimeOwnedNodes = /* @__PURE__ */ new WeakSet();
+function registerLightDomHost(host, lightChildren) {
+	const ownership = { lightChildren };
+	activeLightDomHosts.set(host, ownership);
+	return () => {
+		if (activeLightDomHosts.get(host) === ownership) activeLightDomHosts.delete(host);
+	};
+}
+function trackRuntimeDomInsertion(parent, node) {
+	const ownership = activeLightDomHosts.get(parent);
+	if (!ownership) return;
+	if (node.nodeType === 11) {
+		for (const child of node.childNodes) trackRuntimeNode(ownership, child);
+		return;
+	}
+	trackRuntimeNode(ownership, node);
+}
+function isRuntimeOwnedNode(node) {
+	return runtimeOwnedNodes.has(node);
+}
+function trackRuntimeNode(ownership, node) {
+	if (!ownership.lightChildren.includes(node)) runtimeOwnedNodes.add(node);
+}
+//#endregion
+//#region packages/core/runtime-dom/src/range.ts
+function insertTracked(parent, value, marker = null) {
+	if (value === void 0 || value == null || value === false || value === true) return [];
+	if (Array.isArray(value)) {
+		const nodes = [];
+		for (const item of value) nodes.push(...insertTracked(parent, item, marker));
+		return nodes;
+	}
+	const node = value instanceof Node ? value : document.createTextNode(String(value));
+	trackRuntimeDomInsertion(parent, node);
+	parent.insertBefore(node, marker);
+	return [node];
+}
+function removeNodes$1(nodes) {
+	for (const node of nodes) {
+		var _node$parentNode2;
+		(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
+	}
+}
+function moveRangeBefore(nodes, parent, marker = null) {
+	for (const node of nodes) {
+		trackRuntimeDomInsertion(parent, node);
+		parent.insertBefore(node, marker);
+	}
+}
+//#endregion
 //#region packages/core/runtime-dom/src/hostContext.ts
 let currentHostContext;
 function getCurrentHostContext() {
@@ -37,48 +1448,50 @@ function withCapturedHostContext(fn) {
 	});
 }
 //#endregion
-//#region packages/core/runtime-dom/src/range.ts
-var DynamicRange = class {
-	constructor(parent, marker) {
+//#region packages/core/runtime-dom/src/scopedSubtree.ts
+function captureScopedSubtreeContext() {
+	return {
+		owner: getCurrentOwner(),
+		host: captureCurrentHostContext()
+	};
+}
+var ScopedSubtree = class {
+	constructor(parent, marker, context) {
 		this.parent = parent;
 		this.marker = marker;
+		this.context = context;
 		this.nodes = [];
 	}
-	replace(value) {
-		this.clear();
-		this.nodes = insertTracked(this.parent, value, this.marker);
-	}
-	clear() {
-		for (const node of this.nodes) {
-			var _node$parentNode;
-			(_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 || _node$parentNode.removeChild(node);
+	replace(render) {
+		this.dispose();
+		const scope = effectScope(true);
+		let nodes = [];
+		try {
+			scope.run(() => {
+				nodes = runWithOwner(this.context.owner, () => withHostContext(this.context.host, () => insertTracked(this.parent, render(), this.marker)));
+			});
+		} catch (error) {
+			scope.stop();
+			removeNodes$1(nodes);
+			throw error;
 		}
+		this.scope = scope;
+		this.nodes = nodes;
+	}
+	dispose() {
+		var _this$scope;
+		(_this$scope = this.scope) === null || _this$scope === void 0 || _this$scope.stop();
+		this.scope = void 0;
+		removeNodes$1(this.nodes);
 		this.nodes = [];
 	}
+	moveBefore(marker) {
+		moveRangeBefore(this.nodes, this.parent, marker);
+	}
 	current() {
 		return this.nodes;
 	}
 };
-function insertTracked(parent, value, marker = null) {
-	if (value === void 0 || value == null || value === false || value === true) return [];
-	if (Array.isArray(value)) {
-		const nodes = [];
-		for (const item of value) nodes.push(...insertTracked(parent, item, marker));
-		return nodes;
-	}
-	const node = value instanceof Node ? value : document.createTextNode(String(value));
-	parent.insertBefore(node, marker);
-	return [node];
-}
-function removeNodes$1(nodes) {
-	for (const node of nodes) {
-		var _node$parentNode2;
-		(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
-	}
-}
-function moveRangeBefore(nodes, parent, marker = null) {
-	for (const node of nodes) parent.insertBefore(node, marker);
-}
 //#endregion
 //#region packages/core/runtime-dom/src/insert.ts
 function insert(parent, value, marker = null) {
@@ -89,16 +1502,13 @@ function insert(parent, value, marker = null) {
 	insertTracked(parent, value, marker);
 }
 function mountDynamic(parent, marker, value) {
-	const range = new DynamicRange(parent, marker);
-	const hostContext = captureCurrentHostContext();
-	const owner = getCurrentOwner();
+	const subtree = new ScopedSubtree(parent, marker, captureScopedSubtreeContext());
 	const runner = effect(() => {
-		const next = runWithOwner(owner, () => withHostContext(hostContext, value));
-		range.replace(next);
+		subtree.replace(value);
 	});
 	onScopeDispose(() => {
 		stop(runner);
-		range.clear();
+		subtree.dispose();
 	}, true);
 }
 //#endregion
@@ -241,7 +1651,7 @@ function emitDevtoolsEvent(event) {
 //#region packages/core/runtime-dom/src/render.ts
 function render(value, container, options = {}) {
 	var _options$owner;
-	const renderScope = scope();
+	const renderScope = effectScope();
 	const owner = (_options$owner = options.owner) !== null && _options$owner !== void 0 ? _options$owner : createOwner();
 	renderScope.run(() => {
 		container.textContent = "";
@@ -395,11 +1805,11 @@ function bindStyle(el, value) {
 function patchStyle(el, prev, next) {
 	const style = el.style;
 	if (prev) {
-		for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$1(key), "");
+		for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$2(key), "");
 	}
 	for (const key in next) {
 		const value = next[key];
-		const name = toKebabCase$1(key);
+		const name = toKebabCase$2(key);
 		if (value == null) style.setProperty(name, "");
 		else style.setProperty(name, normalizeStyleValue(key, value));
 	}
@@ -421,7 +1831,7 @@ const unitlessNumbers = /* @__PURE__ */ new Set([
 function isUnitlessNumber(key) {
 	return unitlessNumbers.has(key);
 }
-function toKebabCase$1(value) {
+function toKebabCase$2(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
@@ -531,8 +1941,7 @@ function createComponent(component, props) {
 //#endregion
 //#region packages/core/runtime-dom/src/list.ts
 function disposeListRecord(record) {
-	record.scope.stop();
-	removeNodes$1(record.nodes);
+	record.subtree.dispose();
 }
 function mountFor$1(parent, marker, each, key, render) {
 	if (!key) {
@@ -542,24 +1951,20 @@ function mountFor$1(parent, marker, each, key, render) {
 	mountKeyedFor(parent, marker, each, key, render);
 }
 function mountIndexFor(parent, marker, each, render) {
-	let current = [];
-	const owner = getCurrentOwner();
+	const subtree = new ScopedSubtree(parent, marker, captureScopedSubtreeContext());
 	const runner = effect(() => {
 		var _each;
-		removeNodes$1(current);
-		current = [];
 		const list = (_each = each()) !== null && _each !== void 0 ? _each : [];
-		for (let i = 0; i < list.length; i++) current.push(...insertTracked(parent, runWithOwner(owner, () => render(list[i], i)), marker));
+		subtree.replace(() => list.map((item, index) => render(item, index)));
 	});
 	onScopeDispose(() => {
 		stop(runner);
-		removeNodes$1(current);
-		current = [];
+		subtree.dispose();
 	}, true);
 }
 function mountKeyedFor(parent, marker, each, key, render) {
 	let records = [];
-	const owner = getCurrentOwner();
+	const subtreeContext = captureScopedSubtreeContext();
 	const runner = effect(() => {
 		var _each2;
 		const nextItems = (_each2 = each()) !== null && _each2 !== void 0 ? _each2 : [];
@@ -576,31 +1981,22 @@ function mountKeyedFor(parent, marker, each, key, render) {
 				oldRecord.index = i;
 				nextRecords.push(oldRecord);
 			} else {
-				const itemScope = effectScope(true);
-				let nodes = [];
-				try {
-					itemScope.run(() => {
-						nodes = insertTracked(parent, runWithOwner(owner, () => render(item, i)), marker);
-					});
-				} catch (error) {
-					itemScope.stop();
-					throw error;
-				}
+				const subtree = new ScopedSubtree(parent, marker, subtreeContext);
+				subtree.replace(() => render(item, i));
 				nextRecords.push({
 					key: itemKey,
 					item,
 					index: i,
-					nodes,
-					scope: itemScope
+					subtree
 				});
 			}
 		}
 		for (const record of oldMap.values()) disposeListRecord(record);
 		for (let i = nextRecords.length - 1; i >= 0; i--) {
-			var _nextRecords$nodes$;
+			var _nextRecords$subtree$;
 			const record = nextRecords[i];
-			const anchor = i === nextRecords.length - 1 ? marker : (_nextRecords$nodes$ = nextRecords[i + 1].nodes[0]) !== null && _nextRecords$nodes$ !== void 0 ? _nextRecords$nodes$ : marker;
-			moveRangeBefore(record.nodes, parent, anchor);
+			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);
 		}
 		emitDevtoolsEvent({
 			type: "mount-for",
@@ -634,6 +2030,254 @@ function mountFor(parent, marker, each, key, render) {
 	mountFor$1(parent, marker, each, key, render);
 }
 //#endregion
+//#region packages/core/runtime-dom/src/customElementContract.ts
+function getCustomElementAttributeName(prop) {
+	var _prop$attrName;
+	if (prop.attrName === false) return void 0;
+	if (!isAttributeBackedType(prop.type) && !prop.deserialize) return;
+	return normalizeAttributeName((_prop$attrName = prop.attrName) !== null && _prop$attrName !== void 0 ? _prop$attrName : toKebabCase$1(prop.name));
+}
+function getCustomElementObservedAttributes(props) {
+	const attributes = /* @__PURE__ */ new Set();
+	for (const prop of props) {
+		const attrName = getCustomElementAttributeName(prop);
+		if (attrName) attributes.add(attrName);
+	}
+	return Array.from(attributes);
+}
+function findCustomElementPropByAttribute(props, attrName) {
+	const normalizedName = normalizeAttributeName(attrName);
+	return props.find((prop) => {
+		return getCustomElementAttributeName(prop) === normalizedName;
+	});
+}
+function coerceCustomElementAttribute(prop, value) {
+	if (typeof prop.deserialize === "function") return prop.deserialize(value);
+	if (prop.deserialize === true) return value;
+	switch (prop.type) {
+		case "boolean": return value !== null;
+		case "number": return value === null ? void 0 : Number(value);
+		case "string": return value !== null && value !== void 0 ? value : void 0;
+		case "object":
+		case "array": return coerceStructuredAttribute(prop, value);
+		case "function": return;
+		default: return value;
+	}
+}
+function reflectCustomElementProperty(element, prop, value, reflectingAttrs) {
+	const attrName = getCustomElementAttributeName(prop);
+	if (!attrName || prop.serialize === true) return;
+	reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.add(attrName);
+	try {
+		const serialized = serializeCustomElementProperty(prop, value);
+		if (serialized == null) element.removeAttribute(attrName);
+		else element.setAttribute(attrName, serialized);
+	} finally {
+		reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.delete(attrName);
+	}
+}
+function createCustomElementMountLifecycle(mount) {
+	let mounted;
+	return {
+		connect() {
+			var _mounted;
+			(_mounted = mounted) !== null && _mounted !== void 0 || (mounted = mount());
+			return mounted;
+		},
+		disconnect() {
+			const current = mounted;
+			mounted = void 0;
+			current === null || current === void 0 || current.dispose();
+		},
+		current() {
+			return mounted;
+		}
+	};
+}
+function serializeCustomElementProperty(prop, value) {
+	if (typeof prop.serialize === "function") return prop.serialize(value);
+	if (prop.type === "boolean") return value ? "" : null;
+	if (value == null) return null;
+	if (prop.type === "object" || prop.type === "array") return JSON.stringify(value);
+	if (prop.type === "function") return void 0;
+	return String(value);
+}
+function coerceStructuredAttribute(prop, value) {
+	if (value === null) return void 0;
+	try {
+		return JSON.parse(value);
+	} catch (_unused) {
+		console.warn(`[Zeus custom-element] Failed to parse JSON attribute "${getCustomElementAttributeName(prop)}".`);
+		return prop.type === "array" ? [] : {};
+	}
+}
+function isAttributeBackedType(type) {
+	return type === "string" || type === "number" || type === "boolean";
+}
+function normalizeAttributeName(value) {
+	return value.toLowerCase();
+}
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+//#endregion
+//#region packages/core/runtime-dom/src/slot.ts
+function createSlot(name, fallback) {
+	const context = getCurrentHostContext();
+	if (!context) return createNativeSlot(name, fallback);
+	if (context.mode === "shadow") return createNativeSlot(name, fallback);
+	if (context.projection) return context.projection.createSlot(name, fallback);
+	const assigned = findLightSlotNodes(context.lightChildren, name);
+	if (assigned.length > 0) return Array.from(assigned);
+	return fallback ? fallback() : null;
+}
+function createLightDomProjection(host, lightChildren) {
+	const outlets = [];
+	let observer;
+	let unregisterHost;
+	const observe = () => {
+		observer === null || observer === void 0 || observer.observe(host, {
+			attributes: true,
+			attributeFilter: ["slot"],
+			childList: true,
+			subtree: true
+		});
+		for (const node of lightChildren) {
+			if (node.nodeType !== Node.ELEMENT_NODE || host.contains(node)) continue;
+			observer === null || observer === void 0 || observer.observe(node, {
+				attributes: true,
+				attributeFilter: ["slot"]
+			});
+		}
+	};
+	const reconcile = () => {
+		observer === null || observer === void 0 || observer.disconnect();
+		const claimed = /* @__PURE__ */ new Set();
+		for (const outlet of outlets) {
+			const assigned = lightChildren.filter((node) => {
+				if (claimed.has(node) || !matchesLightSlot(node, outlet.name)) return false;
+				claimed.add(node);
+				return true;
+			});
+			replaceOutletNodes(outlet, assigned.length > 0 ? assigned : outlet.fallbackNodes);
+		}
+		for (const node of lightChildren) if (!claimed.has(node) && host.contains(node)) {
+			var _node$parentNode;
+			(_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 || _node$parentNode.removeChild(node);
+		}
+		observer === null || observer === void 0 || observer.takeRecords();
+		observe();
+	};
+	const handleMutations = (records) => {
+		const added = /* @__PURE__ */ new Set();
+		const removed = /* @__PURE__ */ new Set();
+		let changed = false;
+		for (const record of records) {
+			if (record.type === "attributes") {
+				if (lightChildren.includes(record.target)) changed = true;
+				continue;
+			}
+			for (const node of record.removedNodes) if (lightChildren.includes(node)) removed.add(node);
+			if (record.target !== host) continue;
+			const additions = Array.from(record.addedNodes).filter((node) => {
+				return !isRuntimeOwnedNode(node);
+			});
+			if (additions.length === 0) continue;
+			for (const node of additions) added.add(node);
+			insertLightChildren(lightChildren, additions, record);
+			changed = true;
+		}
+		for (const node of removed) {
+			if (added.has(node) || host.contains(node)) continue;
+			const index = lightChildren.indexOf(node);
+			if (index >= 0) {
+				lightChildren.splice(index, 1);
+				changed = true;
+			}
+		}
+		if (changed) reconcile();
+	};
+	return {
+		createSlot(name, fallback) {
+			const fragment = document.createDocumentFragment();
+			const start = document.createComment(name ? `zeus-slot:${name}` : "zeus-slot");
+			const end = document.createComment("/zeus-slot");
+			fragment.append(start, end);
+			const outlet = {
+				name,
+				start,
+				end,
+				fallbackNodes: fallback ? insertTracked(fragment, fallback(), end) : []
+			};
+			outlets.push(outlet);
+			reconcile();
+			return fragment;
+		},
+		connect() {
+			var _host$ownerDocument$d;
+			if (observer) return;
+			const Observer = (_host$ownerDocument$d = host.ownerDocument.defaultView) === null || _host$ownerDocument$d === void 0 ? void 0 : _host$ownerDocument$d.MutationObserver;
+			if (!Observer) return;
+			unregisterHost = registerLightDomHost(host, lightChildren);
+			observer = new Observer(handleMutations);
+			observe();
+		},
+		disconnect() {
+			observer === null || observer === void 0 || observer.disconnect();
+			observer = void 0;
+			unregisterHost === null || unregisterHost === void 0 || unregisterHost();
+			unregisterHost = void 0;
+		}
+	};
+}
+function replaceOutletNodes(outlet, nextNodes) {
+	const parent = outlet.end.parentNode;
+	if (!parent || parent !== outlet.start.parentNode) return;
+	let current = outlet.start.nextSibling;
+	while (current && current !== outlet.end) {
+		const next = current.nextSibling;
+		parent.removeChild(current);
+		current = next;
+	}
+	for (const node of nextNodes) parent.insertBefore(node, outlet.end);
+}
+function insertLightChildren(lightChildren, additions, record) {
+	for (const node of additions) {
+		const currentIndex = lightChildren.indexOf(node);
+		if (currentIndex >= 0) lightChildren.splice(currentIndex, 1);
+	}
+	let insertionIndex = lightChildren.length;
+	const previousIndex = record.previousSibling ? lightChildren.indexOf(record.previousSibling) : -1;
+	const nextIndex = record.nextSibling ? lightChildren.indexOf(record.nextSibling) : -1;
+	if (previousIndex >= 0) insertionIndex = previousIndex + 1;
+	else if (nextIndex >= 0) insertionIndex = nextIndex;
+	else if (record.previousSibling === null) insertionIndex = 0;
+	lightChildren.splice(insertionIndex, 0, ...additions);
+}
+function createNativeSlot(name, fallback) {
+	const slot = document.createElement("slot");
+	if (name) slot.setAttribute("name", name);
+	const fallbackValue = fallback === null || fallback === void 0 ? void 0 : fallback();
+	if (fallbackValue != null) insert(slot, fallbackValue);
+	return slot;
+}
+function findLightSlotNodes(nodes, name) {
+	return nodes.filter((node) => matchesLightSlot(node, name));
+}
+function matchesLightSlot(node, name) {
+	if (name) {
+		if (node.nodeType !== Node.ELEMENT_NODE) return false;
+		return node.getAttribute("slot") === name;
+	}
+	if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute("slot");
+	return isMeaningfulTextNode(node);
+}
+function isMeaningfulTextNode(node) {
+	var _node$textContent;
+	if (node.nodeType !== Node.TEXT_NODE) return false;
+	return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
+}
+//#endregion
 //#region packages/core/runtime-dom/src/defineElement.ts
 const ZEUS_ELEMENT_DEFINITION = Symbol.for("zeus.element.definition");
 function prop(input, options = {}) {
@@ -675,8 +2319,8 @@ function createPropStore(defs) {
 	const props = {};
 	for (const def of defs) {
 		const slot = state();
-		slots.set(def.key, slot);
-		Object.defineProperty(props, def.key, {
+		slots.set(def.name, slot);
+		Object.defineProperty(props, def.name, {
 			configurable: false,
 			enumerable: true,
 			get() {
@@ -715,7 +2359,7 @@ function defineElement(tagName, options, setup) {
 		setup,
 		propDefs
 	};
-	const observedAttributes = propDefs.filter((def) => def.attr !== false).map((def) => def.attr);
+	const observedAttributes = getCustomElementObservedAttributes(propDefs);
 	class ZeusElement extends HTMLElement {
 		static get observedAttributes() {
 			return observedAttributes;
@@ -724,7 +2368,8 @@ function defineElement(tagName, options, setup) {
 			super();
 			this.lightChildren = [];
 			this.capturedLightChildren = false;
-			this.reflecting = false;
+			this.attributeProps = /* @__PURE__ */ new Set();
+			this.reflectingAttrs = /* @__PURE__ */ new Set();
 			this.propStore = createPropStore(propDefs);
 			this.props = this.propStore.props;
 			applyPropDefaults(this.propStore, propDefs);
@@ -736,17 +2381,23 @@ function defineElement(tagName, options, setup) {
 				emit: createEmitApi(this, options.emits),
 				expose: createExpose(this)
 			};
+			this.mountLifecycle = createCustomElementMountLifecycle(() => this.mountElement());
 		}
 		connectedCallback() {
+			this.mountLifecycle.connect();
+		}
+		disconnectedCallback() {
+			this.mountLifecycle.disconnect();
+		}
+		mountElement() {
 			var _options$shadow, _options$consumes;
-			if (this.dispose) return;
 			const shadow = (_options$shadow = options.shadow) !== null && _options$shadow !== void 0 ? _options$shadow : false;
 			const mode = shadow ? "shadow" : "light";
 			if (mode === "light" && !this.capturedLightChildren) {
 				this.lightChildren = Array.from(this.childNodes);
 				this.capturedLightChildren = true;
 			}
-			this.syncAttributesToProps(propDefs);
+			const projection = mode === "light" ? createLightDomProjection(this, this.lightChildren) : void 0;
 			const owner = createOwner();
 			for (const context of (_options$consumes = options.consumes) !== null && _options$consumes !== void 0 ? _options$consumes : []) {
 				const resolved = resolveDOMContext(this, context);
@@ -757,18 +2408,19 @@ function defineElement(tagName, options, setup) {
 			const hostContext = {
 				host: this,
 				mode,
-				lightChildren: this.lightChildren
+				lightChildren: this.lightChildren,
+				projection
 			};
-			this.dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => {
+			const dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => {
 				syncFormValue(this.props, this.setupContext, options.form);
 				return setup(this.props, this.setupContext);
 			})), target, { owner });
 			mountStyles(target, options.styles);
-		}
-		disconnectedCallback() {
-			var _this$dispose;
-			(_this$dispose = this.dispose) === null || _this$dispose === void 0 || _this$dispose.call(this);
-			this.dispose = void 0;
+			projection === null || projection === void 0 || projection.connect();
+			return { dispose() {
+				projection === null || projection === void 0 || projection.disconnect();
+				dispose();
+			} };
 		}
 		formAssociatedCallback(form) {
 			var _options$form, _options$form$associa;
@@ -787,10 +2439,11 @@ function defineElement(tagName, options, setup) {
 			(_options$form4 = options.form) === null || _options$form4 === void 0 || (_options$form4$stateR = _options$form4.stateRestore) === null || _options$form4$stateR === void 0 || _options$form4$stateR.call(_options$form4, state, mode, this.props, this.setupContext);
 		}
 		attributeChangedCallback(name, oldValue, newValue) {
-			if (oldValue === newValue || this.reflecting) return;
-			const def = propDefs.find((item) => item.attr === name);
+			if (oldValue === newValue || this.reflectingAttrs.has(name)) return;
+			const def = propDefs.find((item) => item.attrName === name);
 			if (!def) return;
-			this.propStore.set(def.key, castAttributeValue(newValue, def));
+			this.attributeProps.add(def.name);
+			this.propStore.set(def.name, coerceCustomElementAttribute(def, newValue));
 		}
 		resolveRenderTarget(shadow) {
 			if (this.target) return this.target;
@@ -801,24 +2454,11 @@ function defineElement(tagName, options, setup) {
 			this.target = this.attachShadow(typeof shadow === "object" ? shadow : { mode: "open" });
 			return this.target;
 		}
-		syncAttributesToProps(defs) {
-			for (const def of defs) {
-				if (def.attr === false) continue;
-				const value = this.getAttribute(def.attr);
-				if (value !== null || def.type === Boolean) this.propStore.set(def.key, castAttributeValue(value, def));
-			}
-		}
 		_writePropFromProperty(key, value) {
-			const def = propDefs.find((item) => item.key === key);
+			const def = propDefs.find((item) => item.name === key);
+			this.attributeProps.delete(key);
 			this.propStore.set(key, value);
-			if ((def === null || def === void 0 ? void 0 : def.reflect) && def.attr !== false) {
-				this.reflecting = true;
-				try {
-					reflectPropToAttribute(this, def, value);
-				} finally {
-					this.reflecting = false;
-				}
-			}
+			if (def === null || def === void 0 ? void 0 : def.reflect) reflectCustomElementProperty(this, def, value, this.reflectingAttrs);
 		}
 	}
 	ZeusElement.formAssociated = Boolean(options.formAssociated);
@@ -841,13 +2481,13 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 	applyPropDefaults(propStore, propDefs);
 	for (const def of propDefs) {
 		var _mountState$attribute;
-		if (def.attr !== false && ((_mountState$attribute = mountState.attributeProps) === null || _mountState$attribute === void 0 ? void 0 : _mountState$attribute.has(def.key))) {
-			propStore.set(def.key, castAttributeValue(host.getAttribute(def.attr), def));
-			initialValues.set(def.key, propStore.get(def.key));
+		if (def.attrName !== false && ((_mountState$attribute = mountState.attributeProps) === null || _mountState$attribute === void 0 ? void 0 : _mountState$attribute.has(def.name))) {
+			propStore.set(def.name, coerceCustomElementAttribute(def, host.getAttribute(def.attrName)));
+			initialValues.set(def.name, propStore.get(def.name));
 			continue;
 		}
-		if (initialValues.has(def.key)) {
-			propStore.set(def.key, initialValues.get(def.key));
+		if (initialValues.has(def.name)) {
+			propStore.set(def.name, initialValues.get(def.name));
 			continue;
 		}
 		/**
@@ -855,11 +2495,11 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 		* back to the lazy host value map so that `element.propName` returns the
 		* correct default value rather than undefined.
 		*/
-		initialValues.set(def.key, propStore.get(def.key));
+		initialValues.set(def.name, propStore.get(def.name));
 	}
 	for (const def of propDefs) {
 		var _mountState$attribute2;
-		if (def.reflect && def.serialize && !((_mountState$attribute2 = mountState.attributeProps) === null || _mountState$attribute2 === void 0 ? void 0 : _mountState$attribute2.has(def.key))) reflectExternalProp(host, def, propStore.get(def.key), mountState.reflectingAttrs);
+		if (def.reflect && def.serialize && !((_mountState$attribute2 = mountState.attributeProps) === null || _mountState$attribute2 === void 0 ? void 0 : _mountState$attribute2.has(def.name))) reflectCustomElementProperty(host, def, propStore.get(def.name), mountState.reflectingAttrs);
 	}
 	const shadow = (_options$shadow2 = options.shadow) !== null && _options$shadow2 !== void 0 ? _options$shadow2 : false;
 	const mode = shadow ? "shadow" : "light";
@@ -868,6 +2508,7 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 		mountState.capturedLightChildren = true;
 	}
 	const lightChildren = (_mountState$lightChil = mountState.lightChildren) !== null && _mountState$lightChil !== void 0 ? _mountState$lightChil : [];
+	const projection = mode === "light" ? createLightDomProjection(host, lightChildren) : void 0;
 	const owner = createOwner();
 	for (const context of (_options$consumes2 = options.consumes) !== null && _options$consumes2 !== void 0 ? _options$consumes2 : []) {
 		const resolved = resolveDOMContext(host, context);
@@ -878,7 +2519,8 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 	const hostContext = {
 		host,
 		mode,
-		lightChildren
+		lightChildren,
+		projection
 	};
 	const setupContext = {
 		host,
@@ -892,15 +2534,16 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 		return setup(propStore.props, setupContext);
 	})), target, { owner });
 	mountStyles(target, options.styles);
+	projection === null || projection === void 0 || projection.connect();
 	return {
 		propertyChanged(name, _oldValue, newValue) {
 			var _mountState$attribute3;
-			const def = propDefs.find((item) => item.key === name);
-			const fromAttribute = Boolean((def === null || def === void 0 ? void 0 : def.attr) !== false && ((_mountState$attribute3 = mountState.attributeProps) === null || _mountState$attribute3 === void 0 ? void 0 : _mountState$attribute3.has(name)));
-			const value = fromAttribute && def ? castAttributeValue(typeof newValue === "string" ? newValue : null, def) : newValue;
+			const def = propDefs.find((item) => item.name === name);
+			const fromAttribute = Boolean((def === null || def === void 0 ? void 0 : def.attrName) !== false && ((_mountState$attribute3 = mountState.attributeProps) === null || _mountState$attribute3 === void 0 ? void 0 : _mountState$attribute3.has(name)));
+			const value = fromAttribute && def ? coerceCustomElementAttribute(def, typeof newValue === "string" ? newValue : null) : newValue;
 			propStore.set(name, value);
 			initialValues.set(name, value);
-			if ((def === null || def === void 0 ? void 0 : def.reflect) && !fromAttribute) reflectExternalProp(host, def, value, mountState.reflectingAttrs);
+			if ((def === null || def === void 0 ? void 0 : def.reflect) && !fromAttribute) reflectCustomElementProperty(host, def, value, mountState.reflectingAttrs);
 		},
 		formAssociated(form) {
 			var _options$form5, _options$form5$associ;
@@ -919,6 +2562,7 @@ function mountElementDefinition(ctor, host, initialValues = /* @__PURE__ */ new
 			(_options$form8 = options.form) === null || _options$form8 === void 0 || (_options$form8$stateR = _options$form8.stateRestore) === null || _options$form8$stateR === void 0 || _options$form8$stateR.call(_options$form8, state, mode, propStore.props, setupContext);
 		},
 		dispose() {
+			projection === null || projection === void 0 || projection.disconnect();
 			dispose();
 		}
 	};
@@ -930,18 +2574,18 @@ function normalizePropDefinitions(props) {
 		if (typeof input === "function") {
 			const type = input;
 			return {
-				key: propKey,
-				attr: isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false,
-				type,
+				name: propKey,
+				attrName: isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false,
+				type: normalizePropType(type),
 				reflect: false
 			};
 		}
 		const type = input === null || input === void 0 ? void 0 : input.type;
 		const defaultAttr = isAttributeBackedConstructor(type) ? toKebabCase(propKey) : false;
 		return {
-			key: propKey,
-			attr: (input === null || input === void 0 ? void 0 : input.attr) === void 0 ? defaultAttr : input.attr,
-			type,
+			name: propKey,
+			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),
 			default: input === null || input === void 0 ? void 0 : input.default,
 			serialize: input === null || input === void 0 ? void 0 : input.serialize,
@@ -953,12 +2597,12 @@ function applyPropDefaults(store, defs) {
 	for (const def of defs) {
 		if (!("default" in def)) continue;
 		const value = typeof def.default === "function" ? def.default() : def.default;
-		store.set(def.key, value);
+		store.set(def.name, value);
 	}
 }
 function definePropAccessors(element, store, defs) {
 	for (const def of defs) {
-		const key = def.key;
+		const key = def.name;
 		const hadOwnValue = Object.prototype.hasOwnProperty.call(element, key);
 		const ownValue = hadOwnValue ? element[key] : void 0;
 		if (hadOwnValue) delete element[key];
@@ -980,54 +2624,6 @@ function definePropAccessors(element, store, defs) {
 		if (hadOwnValue) element._writePropFromProperty(key, ownValue);
 	}
 }
-function castAttributeValue(value, def) {
-	if (def.deserialize) return def.deserialize(value);
-	if (def.type === Boolean) return value !== null;
-	if (value === null) return;
-	if (def.type === Number) return Number(value);
-	if (def.type === Object || def.type === Array) try {
-		return JSON.parse(value);
-	} catch (_unused) {
-		console.warn(`[Zeus custom-element] Failed to parse JSON attribute "${def.attr}".`);
-		return def.type === Array ? [] : {};
-	}
-	if (def.type === Function) return;
-	return value;
-}
-function reflectPropToAttribute(element, def, value) {
-	if (def.attr === false) return;
-	if (def.serialize) {
-		const serialized = def.serialize(value);
-		if (serialized == null) element.removeAttribute(def.attr);
-		else element.setAttribute(def.attr, serialized);
-		return;
-	}
-	if (def.type === Boolean) {
-		if (value) element.setAttribute(def.attr, "");
-		else element.removeAttribute(def.attr);
-		return;
-	}
-	if (value == null) {
-		element.removeAttribute(def.attr);
-		return;
-	}
-	if (def.type === Object || def.type === Array) {
-		element.setAttribute(def.attr, JSON.stringify(value));
-		return;
-	}
-	if (def.type === Function) return;
-	element.setAttribute(def.attr, String(value));
-}
-function reflectExternalProp(element, def, value, reflectingAttrs) {
-	if (def.attr === false) return;
-	const attrName = def.attr.toLowerCase();
-	reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.add(attrName);
-	try {
-		reflectPropToAttribute(element, def, value);
-	} finally {
-		reflectingAttrs === null || reflectingAttrs === void 0 || reflectingAttrs.delete(attrName);
-	}
-}
 function syncFormValue(props, context, form) {
 	const valueResolver = form === null || form === void 0 ? void 0 : form.value;
 	const stateResolver = form === null || form === void 0 ? void 0 : form.state;
@@ -1089,6 +2685,15 @@ function createExpose(host) {
 function isAttributeBackedConstructor(type) {
 	return type === String || type === Number || type === Boolean;
 }
+function normalizePropType(type) {
+	if (type === String) return "string";
+	if (type === Number) return "number";
+	if (type === Boolean) return "boolean";
+	if (type === Object) return "object";
+	if (type === Array) return "array";
+	if (type === Function) return "function";
+	return "unknown";
+}
 function resolveExternalRenderTarget(host, shadow) {
 	var _host$shadowRoot;
 	if (!shadow) return host;
@@ -1107,38 +2712,6 @@ function toKebabCase(value) {
 	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
-//#region packages/core/runtime-dom/src/slot.ts
-function createSlot(name, fallback) {
-	const context = getCurrentHostContext();
-	if (!context) return createNativeSlot(name, fallback);
-	if (context.mode === "shadow") return createNativeSlot(name, fallback);
-	const assigned = findLightSlotNodes(context.lightChildren, name);
-	if (assigned.length > 0) return Array.from(assigned);
-	return fallback ? fallback() : null;
-}
-function createNativeSlot(name, fallback) {
-	const slot = document.createElement("slot");
-	if (name) slot.setAttribute("name", name);
-	const fallbackValue = fallback === null || fallback === void 0 ? void 0 : fallback();
-	if (fallbackValue != null) insert(slot, fallbackValue);
-	return slot;
-}
-function findLightSlotNodes(nodes, name) {
-	if (name) return nodes.filter((node) => {
-		if (node.nodeType !== Node.ELEMENT_NODE) return false;
-		return node.getAttribute("slot") === name;
-	});
-	return nodes.filter((node) => {
-		if (node.nodeType === Node.ELEMENT_NODE) return !node.hasAttribute("slot");
-		return isMeaningfulTextNode(node);
-	});
-}
-function isMeaningfulTextNode(node) {
-	var _node$textContent;
-	if (node.nodeType !== Node.TEXT_NODE) return false;
-	return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
-}
-//#endregion
 //#region packages/core/runtime-dom/src/webComponents.ts
 const HOST_RESERVED_KEYS = /* @__PURE__ */ new Set([
 	"children",
@@ -1230,4 +2803,4 @@ function normalizeHostAttrName(name) {
 	}
 }
 //#endregion
-export { For, Host, Show, Slot, ZEUS_CONTEXT_REQUEST, ZEUS_ELEMENT_DEFINITION, bindAttr, bindClass, bindEvent, bindProp, bindRef, bindStyle, bindText, bindTextContent, captureCurrentHostContext, child, createComponent, createContext, createDOMContextBoundary, createOwner, createSlot, defineElement, delegateEvents, event, getCurrentHostContext, getCurrentOwner, getElementDefinition, inject, insert, insertTracked, marker, mountDynamic, mountElementDefinition, mountFor, mountShow, normalizeClass, prop, provide, provideDOMContext, removeNodes, render, resolveDOMContext, resolveValue, runWithOwner, setAttr, setRef, template, useContext, withCapturedHostContext, withHostContext };
+export { For, Host, Show, Slot, ZEUS_CONTEXT_REQUEST, ZEUS_ELEMENT_DEFINITION, bindAttr, bindClass, bindEvent, bindProp, bindRef, bindStyle, bindText, bindTextContent, captureCurrentHostContext, child, coerceCustomElementAttribute, createComponent, createContext, createCustomElementMountLifecycle, createDOMContextBoundary, createOwner, createSlot, defineElement, delegateEvents, event, findCustomElementPropByAttribute, getCurrentHostContext, getCurrentOwner, getCustomElementAttributeName, getCustomElementObservedAttributes, getElementDefinition, inject, insert, insertTracked, marker, mountDynamic, mountElementDefinition, mountFor, mountShow, normalizeClass, prop, provide, provideDOMContext, reflectCustomElementProperty, removeNodes, render, resolveDOMContext, resolveValue, runWithOwner, setAttr, setRef, template, useContext, withCapturedHostContext, withHostContext };