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

package/dist/runtime-dom.global.js

@@ -1,5 +1,5 @@
 /**
-* runtime-dom v0.1.0-beta.7
+* runtime-dom v0.1.0-beta.9
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -213,8 +213,9 @@ var ZeusRuntimeDOM = (function(exports) {
 			this.depsTail = void 0;
 			this.flags = 5;
 			this.next = void 0;
-			this.cleanup = 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;
 		}
@@ -475,13 +476,20 @@ var ZeusRuntimeDOM = (function(exports) {
 		shouldTrack = last === void 0 ? true : last;
 	}
 	function cleanupEffect(e) {
-		const { cleanup } = e;
-		e.cleanup = void 0;
-		if (cleanup) {
+		const cleanups = e.cleanups;
+		e.cleanups = void 0;
+		if (cleanups) {
 			const prevSub = activeSub;
 			activeSub = void 0;
 			try {
-				cleanup();
+				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;
 			}
@@ -1366,6 +1374,58 @@ var ZeusRuntimeDOM = (function(exports) {
 		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() {
@@ -1390,48 +1450,50 @@ var ZeusRuntimeDOM = (function(exports) {
 		});
 	}
 	//#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) {
@@ -1442,16 +1504,13 @@ var ZeusRuntimeDOM = (function(exports) {
 		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
@@ -1748,11 +1807,11 @@ var ZeusRuntimeDOM = (function(exports) {
 	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));
 		}
@@ -1774,7 +1833,7 @@ var ZeusRuntimeDOM = (function(exports) {
 	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
@@ -1883,6 +1942,9 @@ var ZeusRuntimeDOM = (function(exports) {
 	}
 	//#endregion
 	//#region packages/core/runtime-dom/src/list.ts
+	function disposeListRecord(record) {
+		record.subtree.dispose();
+	}
 	function mountFor$1(parent, marker, each, key, render) {
 		if (!key) {
 			mountIndexFor(parent, marker, each, render);
@@ -1891,24 +1953,20 @@ var ZeusRuntimeDOM = (function(exports) {
 		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 : [];
@@ -1924,19 +1982,23 @@ var ZeusRuntimeDOM = (function(exports) {
 					oldRecord.item = item;
 					oldRecord.index = i;
 					nextRecords.push(oldRecord);
-				} else nextRecords.push({
-					key: itemKey,
-					item,
-					index: i,
-					nodes: insertTracked(parent, runWithOwner(owner, () => render(item, i)), marker)
-				});
+				} else {
+					const subtree = new ScopedSubtree(parent, marker, subtreeContext);
+					subtree.replace(() => render(item, i));
+					nextRecords.push({
+						key: itemKey,
+						item,
+						index: i,
+						subtree
+					});
+				}
 			}
-			for (const record of oldMap.values()) removeNodes$1(record.nodes);
+			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",
@@ -1946,7 +2008,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		});
 		onScopeDispose(() => {
 			stop(runner);
-			for (const record of records) removeNodes$1(record.nodes);
+			for (const record of records) disposeListRecord(record);
 			records = [];
 		}, true);
 	}
@@ -1970,6 +2032,254 @@ var ZeusRuntimeDOM = (function(exports) {
 		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 = {}) {
@@ -2011,8 +2321,8 @@ var ZeusRuntimeDOM = (function(exports) {
 		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() {
@@ -2051,7 +2361,7 @@ var ZeusRuntimeDOM = (function(exports) {
 			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;
@@ -2060,7 +2370,8 @@ var ZeusRuntimeDOM = (function(exports) {
 				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);
@@ -2072,17 +2383,23 @@ var ZeusRuntimeDOM = (function(exports) {
 					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);
@@ -2093,18 +2410,19 @@ var ZeusRuntimeDOM = (function(exports) {
 				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;
@@ -2123,10 +2441,11 @@ var ZeusRuntimeDOM = (function(exports) {
 				(_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;
@@ -2137,24 +2456,11 @@ var ZeusRuntimeDOM = (function(exports) {
 				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);
@@ -2177,13 +2483,13 @@ var ZeusRuntimeDOM = (function(exports) {
 		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;
 			}
 			/**
@@ -2191,11 +2497,11 @@ var ZeusRuntimeDOM = (function(exports) {
 			* 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";
@@ -2204,6 +2510,7 @@ var ZeusRuntimeDOM = (function(exports) {
 			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);
@@ -2214,7 +2521,8 @@ var ZeusRuntimeDOM = (function(exports) {
 		const hostContext = {
 			host,
 			mode,
-			lightChildren
+			lightChildren,
+			projection
 		};
 		const setupContext = {
 			host,
@@ -2228,15 +2536,16 @@ var ZeusRuntimeDOM = (function(exports) {
 			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;
@@ -2255,6 +2564,7 @@ var ZeusRuntimeDOM = (function(exports) {
 				(_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();
 			}
 		};
@@ -2266,18 +2576,18 @@ var ZeusRuntimeDOM = (function(exports) {
 			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,
@@ -2289,12 +2599,12 @@ var ZeusRuntimeDOM = (function(exports) {
 		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];
@@ -2316,54 +2626,6 @@ var ZeusRuntimeDOM = (function(exports) {
 			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;
@@ -2425,6 +2687,15 @@ var ZeusRuntimeDOM = (function(exports) {
 	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;
@@ -2443,38 +2714,6 @@ var ZeusRuntimeDOM = (function(exports) {
 		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",
@@ -2582,16 +2821,21 @@ var ZeusRuntimeDOM = (function(exports) {
 	exports.bindTextContent = bindTextContent;
 	exports.captureCurrentHostContext = captureCurrentHostContext;
 	exports.child = child;
+	exports.coerceCustomElementAttribute = coerceCustomElementAttribute;
 	exports.createComponent = createComponent;
 	exports.createContext = createContext;
+	exports.createCustomElementMountLifecycle = createCustomElementMountLifecycle;
 	exports.createDOMContextBoundary = createDOMContextBoundary;
 	exports.createOwner = createOwner;
 	exports.createSlot = createSlot;
 	exports.defineElement = defineElement;
 	exports.delegateEvents = delegateEvents;
 	exports.event = event;
+	exports.findCustomElementPropByAttribute = findCustomElementPropByAttribute;
 	exports.getCurrentHostContext = getCurrentHostContext;
 	exports.getCurrentOwner = getCurrentOwner;
+	exports.getCustomElementAttributeName = getCustomElementAttributeName;
+	exports.getCustomElementObservedAttributes = getCustomElementObservedAttributes;
 	exports.getElementDefinition = getElementDefinition;
 	exports.inject = inject;
 	exports.insert = insert;
@@ -2605,6 +2849,7 @@ var ZeusRuntimeDOM = (function(exports) {
 	exports.prop = prop;
 	exports.provide = provide;
 	exports.provideDOMContext = provideDOMContext;
+	exports.reflectCustomElementProperty = reflectCustomElementProperty;
 	exports.removeNodes = removeNodes;
 	exports.render = render;
 	exports.resolveDOMContext = resolveDOMContext;