@askrjs/askr 0.0.77 → 0.0.79

package/dist/{renderer-Ba-KixHB.js → renderer-CDw8ltTw.js}

@@ -1,17 +1,18 @@
-import { t as __CONTROL_BOUNDARY__ } from "./control-DhFRTIoE.js";
+import { n as hasTransparentComponentResult, t as __CONTROL_BOUNDARY__ } from "./control-C-ApnFs1.js";
 import { n as _isDOMElement, t as __ERROR_BOUNDARY__ } from "./vnode-D24p6IW2.js";
 import { b as isDevelopmentEnvironment, c as runRuntimeHandlerScope, f as configureRuntimeRenderer, i as getDefaultRuntimeInstance, n as enqueueRuntimeTask, v as logger, y as getRuntimeEnv } from "./access-ePqdQqkV.js";
 import { n as markFastPathApplied, t as isBulkCommitActive } from "./fastlane-CkBXZ_3K.js";
 import { i as isFragmentType, r as STATIC_CHILDREN } from "./jsx-C3IECePB.js";
-import { d as getCurrentContextFrame, h as markVNodeTreeWithContextFrame, i as mountInstanceInline, n as createComponentInstance, o as renderComponentInline, p as getVNodeContextFrame, t as captureInlineRenderSnapshot, y as withContext } from "./component-internal-TurioKgs.js";
+import { d as getCurrentContextFrame, h as markVNodeTreeWithContextFrame, i as mountInstanceInline, n as createComponentInstance, o as renderComponentInline, p as getVNodeContextFrame, t as captureInlineRenderSnapshot, y as withContext } from "./component-internal-BuTG89T8.js";
 import { b as restoreDomCommitScope, c as enterDomCommitScope, p as getCurrentInstance } from "./component-scope-DzJEbYGE.js";
 import { t as cleanupComponent } from "./component-cleanup-oWN45rfa.js";
 import { c as getCurrentLifecycleCommitBatch, l as registerLifecycleRollback, p as isPromiseLike, r as discardLifecycleCommitBatch, s as flushLifecycleCommitBatch, t as beginLifecycleCommitBatch, u as registerLifecycleTransaction } from "./lifecycle-batch-CwHCDseR.js";
-import { _ as setControlBoundaryContextFrame, a as registerForStateTransaction, b as rerenderChildScope, c as captureForFallbackTransactionSnapshot, d as clearCaseDomUpdateState, f as clearShowDomUpdateState, g as evaluateShowState, h as evaluateCaseState, i as evaluateForState, l as captureForItemTransactionSnapshot, n as clearForDomUpdateState, o as rollbackForStateTransaction, t as beginForStateTransaction, v as createChildScope, y as disposeChildScope } from "./for-internal-BM8KbadU.js";
+import { _ as setControlBoundaryContextFrame, a as registerForStateTransaction, b as rerenderChildScope, c as captureForFallbackTransactionSnapshot, d as clearCaseDomUpdateState, f as clearShowDomUpdateState, g as evaluateShowState, h as evaluateCaseState, i as evaluateForState, l as captureForItemTransactionSnapshot, n as clearForDomUpdateState, o as rollbackForStateTransaction, t as beginForStateTransaction, v as createChildScope, y as disposeChildScope } from "./for-internal-BnXrQbgo.js";
 import { n as createOwnedFineGrainedEffect, r as markFineGrainedEffectsDirtySource, t as createFineGrainedEffect } from "./effect-2IIWvUjG.js";
 import { C as getDelegatedHandlersForElement, D as updateDelegatedListener, E as removeDelegatedListener, S as getDelegatedHandlerForElement, T as isEventDelegationEnabled, _ as teardownNodeSubtree, a as elementReactivePropsCleanup, b as addFreshDelegatedListener, c as forEachElementReactivePropCleanup, d as removeAllListeners, f as removeElementReactiveProps, g as setFreshElementReactivePropCleanup, h as setDirectElementReactivePropCleanup, i as elementListeners, l as getElementReactivePropCleanupSize, m as replaceElementRefBookkeeping, n as cleanupInstanceIfPresent, o as elementRefs, p as removeElementRef, r as cleanupInstancesUnder, s as forEachDescendantNode, t as REACTIVE_CHILDREN_KEY, u as getElementReactivePropsCleanupMap, v as updateElementRef, w as isDelegatedEvent, x as clearDelegatedHandlersForElement, y as addDelegatedListener } from "./cleanup-CyY1ROBI.js";
+import { a as isSSRPortalHydrationAnchor } from "./portal-w3oQ6oQU.js";
 import { n as getPublicAttributeName, t as sanitizeCssValue } from "./css-BuPaTOfe.js";
-import { a as isSafeHref, i as ROUTE_ROOT_COMPONENT } from "./csp-nonce-DYspaK0L.js";
+import { a as isSafeHref, i as ROUTE_ROOT_COMPONENT } from "./csp-nonce-BUsz0Em7.js";
 //#region src/runtime/error-boundary.ts
 function createBoundaryReset(instance) {
 	return () => {
@@ -1820,6 +1821,12 @@ function performFullReconciliation(parent, newChildren, oldKeyMap) {
 function isFragmentVNode(node) {
 	return _isDOMElement(node) && isFragmentType(node.type);
 }
+function isTransparentComponentResult(result) {
+	return Array.isArray(result) || _isDOMElement(result) && (result.type === __CONTROL_BOUNDARY__ || hasTransparentComponentResult(result.type) || isFragmentVNode(result));
+}
+function isTransparentComponentRangeResult(result) {
+	return Array.isArray(result) || isFragmentVNode(result);
+}
 function normalizeComponentChildren(result) {
 	if (result === null || result === void 0 || result === false) return [];
 	if (Array.isArray(result)) {
@@ -2569,357 +2576,410 @@ function canReuseStaticSubtree(el, vnode) {
 	return true;
 }
 //#endregion
-//#region src/renderer/element-children.ts
-const rendererReactiveChildDOMHost = {
-	createDOMNode: (node, parentNamespace) => getRendererDOMHost().createDOMNode(node, parentNamespace),
-	updateElementChildren: (el, children, forceUpdate) => updateElementChildren$1(el, children, forceUpdate)
-};
-function updateElementChildren$1(el, children, forceUpdate = false) {
-	const directControlBoundary = getDirectControlBoundaryVNode(children);
-	if (directControlBoundary) {
-		const controlState = getControlBoundaryState(directControlBoundary);
-		if (!controlState) throw new Error("[updateElementChildren] Control boundary missing internal state");
-		registerControlBoundaryCommitOwner(el, controlState);
-		commitForBoundaryChildren(el, controlState, evaluateControlBoundaryState(controlState));
-		return;
-	}
-	clearControlBoundaryCommitOwner(el);
-	if (children === null || children === void 0) {
-		for (let n = el.firstChild; n;) {
-			const next = n.nextSibling;
-			teardownNodeSubtree(n);
-			n = next;
+//#region src/renderer/hydration-listener-transaction.ts
+let currentTransaction = null;
+function beginHydrationListenerTransaction() {
+	const transaction = {
+		parent: currentTransaction,
+		stages: [],
+		active: true
+	};
+	currentTransaction = transaction;
+	return transaction;
+}
+function stageHydrationListener(stage) {
+	if (!currentTransaction?.active) return false;
+	currentTransaction.stages.push(stage);
+	return true;
+}
+function hasStagedHydrationListener(target, eventName, capture) {
+	return !!currentTransaction?.stages.some((stage) => stage.target === target && stage.eventName === eventName && stage.capture === capture);
+}
+function closeTransaction(transaction) {
+	if (!transaction.active) return false;
+	transaction.active = false;
+	currentTransaction = transaction.parent;
+	return true;
+}
+function commitHydrationListenerTransaction(transaction) {
+	if (!closeTransaction(transaction)) return;
+	const stages = [...transaction.stages].sort((left, right) => {
+		if (left.kind !== right.kind) return left.kind === "delegated" ? -1 : 1;
+		return left.eventName.localeCompare(right.eventName);
+	});
+	const published = [];
+	try {
+		for (const stage of stages) {
+			stage.publish();
+			published.push(stage);
 		}
-		el.textContent = "";
-		return;
-	}
-	if (!Array.isArray(children) && isFragmentVNode(children)) {
-		updateUnkeyedChildren(el, normalizeComponentChildren(children), forceUpdate);
-		return;
+	} catch (error) {
+		for (let index = published.length - 1; index >= 0; index -= 1) try {
+			published[index].rollback();
+		} catch {}
+		throw error;
 	}
-	if (!Array.isArray(children) && (typeof children === "string" || typeof children === "number")) {
-		if (el.childNodes.length === 1 && el.firstChild?.nodeType === 3) {
-			const s = String(children);
-			const t = el.firstChild;
-			if (t.data !== s) t.data = s;
-		} else {
-			for (let n = el.firstChild; n;) {
-				const next = n.nextSibling;
-				teardownNodeSubtree(n);
-				n = next;
-			}
-			el.textContent = String(children);
-		}
-		return;
+}
+function discardHydrationListenerTransaction(transaction) {
+	if (!closeTransaction(transaction)) return;
+	for (let index = transaction.stages.length - 1; index >= 0; index -= 1) try {
+		transaction.stages[index].rollback();
+	} catch {}
+}
+function getCurrentHydrationListenerTransaction() {
+	return currentTransaction?.active ? currentTransaction : null;
+}
+//#endregion
+//#region src/renderer/prop-bindings.ts
+const reactivePropRegistry = /* @__PURE__ */ new Set();
+const hydrationDirectListeners = /* @__PURE__ */ new WeakMap();
+let hydrationDirectListenerDepth = 0;
+function beginHydrationDirectListenerMode() {
+	hydrationDirectListenerDepth += 1;
+}
+function endHydrationDirectListenerMode() {
+	hydrationDirectListenerDepth = Math.max(0, hydrationDirectListenerDepth - 1);
+}
+function markHydrationDirectListener(element, listenerKey) {
+	let listeners = hydrationDirectListeners.get(element);
+	if (!listeners) {
+		listeners = /* @__PURE__ */ new Set();
+		hydrationDirectListeners.set(element, listeners);
 	}
-	if (Array.isArray(children)) {
-		const normalizedChildren = normalizeComponentChildren(children);
-		if (trySyncScalarChildSequenceInPlace(el, normalizedChildren, rendererReactiveChildDOMHost)) {
-			keyedElements.delete(el);
-			return;
-		}
-		if (normalizedChildren.some(isControlBoundaryVNode)) {
-			updateMixedControlChildren(el, normalizedChildren, forceUpdate);
-			keyedElements.delete(el);
-			return;
-		}
-		if (hasKeyedVNodeChildren(normalizedChildren)) {
-			const newKeyMap = reconcileKeyedChildren(el, normalizedChildren, getOrBuildDomKeyMap(el));
-			keyedElements.set(el, newKeyMap);
-			return;
-		}
-		if (isBulkTextFastPathEligible(el, normalizedChildren)) {
-			performBulkTextReplace(el, normalizedChildren);
-			keyedElements.delete(el);
+	listeners.add(listenerKey);
+}
+function isHydrationDirectListener(element, listenerKey) {
+	return hydrationDirectListeners.get(element)?.has(listenerKey) ?? false;
+}
+function clearHydrationDirectListener(element, listenerKey) {
+	const listeners = hydrationDirectListeners.get(element);
+	listeners?.delete(listenerKey);
+	if (listeners?.size === 0) hydrationDirectListeners.delete(element);
+}
+function addTrackedListener(el, eventName, handler, capture = false, fresh = false, forceDirect = false) {
+	const effectiveForceDirect = forceDirect || hydrationDirectListenerDepth > 0;
+	const useDelegation = !effectiveForceDirect && !capture && isEventDelegationEnabled() && isDelegatedEvent(eventName);
+	const listenerKey = getEventListenerKey(eventName, capture);
+	if (effectiveForceDirect && isHydrationDirectListener(el, listenerKey)) {
+		const existing = elementListeners.get(el)?.get(listenerKey);
+		if (existing) {
+			existing.updateHandler?.(handler);
+			existing.original = handler;
 			return;
 		}
-		updateUnkeyedChildren(el, normalizedChildren, forceUpdate);
-		return;
 	}
-	if (_isDOMElement(children)) {
-		updateUnkeyedChildren(el, [children], forceUpdate);
+	if (!effectiveForceDirect && !hasStagedHydrationListener(el, eventName, capture) && stageHydrationListener({
+		kind: "direct",
+		target: el,
+		eventName,
+		capture,
+		publish: () => addTrackedListener(el, eventName, handler, capture, fresh, true),
+		rollback: () => {
+			removeTrackedListener(el, eventName, capture);
+			clearHydrationDirectListener(el, listenerKey);
+		}
+	})) return;
+	if (useDelegation) {
+		if (fresh) addFreshDelegatedListener(el, eventName, handler, handler, void 0);
+		else addDelegatedListener(el, eventName, handler, handler, void 0);
 		return;
 	}
-	for (let n = el.firstChild; n;) {
-		const next = n.nextSibling;
-		teardownNodeSubtree(n);
-		n = next;
+	const options = getEventListenerOptions(eventName, capture);
+	const mutableHandler = createMutableWrappedHandler(handler, true);
+	const trackedHandler = mutableHandler.handler;
+	if (options !== void 0) el.addEventListener(eventName, trackedHandler, options);
+	else el.addEventListener(eventName, trackedHandler);
+	if (effectiveForceDirect) {
+		if (!capture && getDelegatedHandlerForElement(el, eventName)) removeDelegatedListener(el, eventName);
+		markHydrationDirectListener(el, listenerKey);
 	}
-	el.textContent = "";
-	const dom = getRendererDOMHost().createDOMNode(children);
-	if (dom) el.appendChild(dom);
+	if (!elementListeners.has(el)) elementListeners.set(el, /* @__PURE__ */ new Map());
+	elementListeners.get(el).set(listenerKey, {
+		handler: trackedHandler,
+		original: handler,
+		eventName,
+		options,
+		isDelegated: false,
+		updateHandler: mutableHandler?.updateHandler
+	});
 }
-function hasKeyedVNodeChildren(children) {
-	for (let i = 0; i < children.length; i++) if (extractKey(children[i]) !== void 0) return true;
-	return false;
+function removeTrackedListener(el, eventName, capture) {
+	if (!capture && getDelegatedHandlerForElement(el, eventName)) {
+		removeDelegatedListener(el, eventName);
+		return;
+	}
+	const listenerKey = getEventListenerKey(eventName, capture);
+	const entry = elementListeners.get(el)?.get(listenerKey);
+	if (!entry) return;
+	if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
+	else el.removeEventListener(entry.eventName, entry.handler);
+	const listeners = elementListeners.get(el);
+	listeners?.delete(listenerKey);
+	if (listeners?.size === 0) elementListeners.delete(el);
 }
-function isControlBoundaryVNode(child) {
-	return _isDOMElement(child) && child.type === __CONTROL_BOUNDARY__;
+function markReactivePropsDirtySource(source) {
+	markFineGrainedEffectsDirtySource(source);
 }
-function removeRangeAtCursor(parent, cursor) {
-	if (!isRangeStart(cursor)) return cursor;
-	const end = findRangeEnd(cursor);
-	if (!end) return cursor;
-	const range = {
-		start: cursor,
-		end,
-		single: false
+function setupReactiveProp(el, propName, propFn, tagName) {
+	const descriptor = {
+		el,
+		propName,
+		propFn,
+		tagName,
+		lastClassTokens: null
 	};
-	const next = end.nextSibling;
-	removeRange(range, (node) => {
-		if (node === range.start || node === range.end) {
-			node.parentNode?.removeChild(node);
-			return;
+	let effectHandle = null;
+	reactivePropRegistry.add(descriptor);
+	effectHandle = createFineGrainedEffect({
+		lane: "reactive",
+		compute: () => descriptor.propFn(),
+		commit: (value, previousValue) => {
+			applyScalarPropValue(el, propName, value, tagName, previousValue, descriptor);
+		},
+		equals: (previousValue, nextValue) => {
+			if (Object.is(previousValue, nextValue)) return true;
+			return false;
+		},
+		onError: (err) => {
+			if (getRuntimeEnv().NODE_ENV !== "production") logger.warn("[Askr] Reactive prop update failed:", err);
 		}
-		teardownNodeSubtree(node);
-		node.parentNode?.removeChild(node);
 	});
-	return next;
-}
-function updateMixedControlChildren(parent, children, forceUpdate) {
-	clearControlBoundaryCommitOwner(parent);
-	const parentNamespace = getParentNamespace(parent);
-	const domHost = getRendererDOMHost();
-	let cursor = parent.firstChild;
-	for (const child of children) {
-		if (isControlBoundaryVNode(child)) {
-			const controlState = getControlBoundaryState(child);
-			if (!controlState) throw new Error("[updateElementChildren] Control boundary missing internal state");
-			const childVNodes = evaluateControlBoundaryState(controlState);
-			const cursorAfterBoundary = cursor ? isRangeStart(cursor) ? findRangeEnd(cursor)?.nextSibling ?? cursor.nextSibling : cursor.nextSibling : null;
-			const ranges = syncControlBoundaryInMixedParent(parent, controlState, childVNodes, cursor);
-			if (controlState.kind === "for") {
-				const last = ranges[ranges.length - 1];
-				cursor = last ? last.end.nextSibling : cursorAfterBoundary?.parentNode === parent ? cursorAfterBoundary : cursor?.parentNode === parent ? cursor : null;
-				continue;
-			}
-			for (const range of ranges) if (range.start.parentNode !== parent) moveRange(parent, range, cursor?.parentNode === parent ? cursor : null);
-			else if (cursor?.parentNode === parent) moveRange(parent, range, cursor);
-			const last = ranges[ranges.length - 1];
-			if (last) {
-				const cursorWasReplaced = cursor && !ranges.some((range) => range.start === cursor);
-				if (!cursor?.parentNode) cursor = last.end.nextSibling;
-				else if (cursorWasReplaced && isRangeStart(cursor)) cursor = findRangeEnd(cursor)?.nextSibling ?? last.end.nextSibling;
-				else if (isRangeStart(cursor)) cursor = findRangeEnd(cursor)?.nextSibling ?? last.end.nextSibling;
-				else cursor = last.end.nextSibling;
-			} else if (cursor?.parentNode !== parent) cursor = cursorAfterBoundary?.parentNode === parent ? cursorAfterBoundary : null;
-			continue;
+	const cleanup = () => {
+		reactivePropRegistry.delete(descriptor);
+		effectHandle?.cleanup();
+		effectHandle = null;
+	};
+	const updateFn = (nextFn) => {
+		if (!effectHandle) return;
+		descriptor.propFn = nextFn;
+		try {
+			effectHandle.updateCompute(nextFn);
+		} catch (err) {
+			if (getRuntimeEnv().NODE_ENV !== "production") logger.warn("[Askr] Reactive prop update failed:", err);
 		}
-		if (cursor) cursor = removeRangeAtCursor(parent, cursor);
-		if (cursor && (typeof child === "string" || typeof child === "number") && cursor.nodeType === 3) {
-			cursor.data = String(child);
-			cursor = cursor.nextSibling;
-			continue;
+	};
+	return {
+		cleanup,
+		updateFn
+	};
+}
+function getOrCreateReactivePropsCleanupMap(el) {
+	return getElementReactivePropsCleanupMap(el, true);
+}
+/** @internal Create a standalone reactive prop entry for rollback restoration. */
+function createReactivePropCleanupEntry(el, propName, propFn, tagName) {
+	const reactive = setupReactiveProp(el, propName, propFn, tagName);
+	return {
+		cleanup: reactive.cleanup,
+		updateFn: (nextValue) => {
+			reactive.updateFn(nextValue);
+		},
+		restoreFn: (nextValue) => createReactivePropCleanupEntry(el, propName, nextValue, tagName),
+		fnRef: propFn
+	};
+}
+function hasTrackedElementPropBindings(el) {
+	const existingListeners = elementListeners.get(el);
+	return existingListeners !== void 0 && existingListeners.size > 0 || getElementReactivePropCleanupSize(el) > 0;
+}
+function hasAnyElementBindingState(el) {
+	return hasTrackedElementPropBindings(el) || getDelegatedHandlersForElement(el) !== void 0 || elementRefs.has(el);
+}
+function applyMatchingElementBindings(el, props) {
+	if (Object.prototype.hasOwnProperty.call(props, "ref")) updateElementRef(el, props.ref);
+	for (const key in props) {
+		const eventProp = parseEventProp(key);
+		if (!eventProp) continue;
+		const value = props[key];
+		if (typeof value === "function") addTrackedListener(el, eventProp.eventName, value, eventProp.capture);
+	}
+}
+/** @internal Attach stateful bindings to a newly cloned blueprint element. */
+function applyFreshElementBindings(el, props) {
+	if (Object.prototype.hasOwnProperty.call(props, "ref")) updateElementRef(el, props.ref);
+	for (const key in props) {
+		const eventProp = parseEventProp(key);
+		if (eventProp) {
+			const value = props[key];
+			if (typeof value === "function") addTrackedListener(el, eventProp.eventName, value, eventProp.capture, true);
 		}
-		if (cursor instanceof Element && _isDOMElement(child) && typeof child.type === "string" && tagsEqualIgnoreCase(cursor.tagName, child.type)) {
-			domHost.updateElementFromVnode(cursor, child, true, forceUpdate);
-			cursor = cursor.nextSibling;
+	}
+}
+function applyPropsToElement$1(el, props, tagName, isHydrationSkipped) {
+	if (isHydrationSkipped(el)) return;
+	for (const key in props) {
+		const value = props[key];
+		if (key === "ref") {
+			updateElementRef(el, value);
 			continue;
 		}
-		if (cursor && _isDOMElement(child) && typeof child.type === "function") {
-			const synced = domHost.syncComponentElement(cursor, child, child.type, (child.props ?? {}) || {}, parentNamespace, forceUpdate);
-			if (synced) {
-				cursor = synced.nextSibling;
-				continue;
-			}
-		}
-		const created = domHost.createDOMNode(child, parentNamespace);
-		if (!created) {
-			cursor = cursor?.nextSibling ?? null;
+		if (isSkippedProp(key)) continue;
+		if (value === void 0 || value === null || value === false) continue;
+		const eventProp = parseEventProp(key);
+		if (eventProp) {
+			addTrackedListener(el, eventProp.eventName, value, eventProp.capture);
 			continue;
 		}
-		const materialized = createDetachedRange(created);
-		const old = cursor;
-		moveRange(parent, materialized.range, old);
-		if (old) {
-			teardownNodeSubtree(old);
-			old.parentNode?.removeChild(old);
-		}
-		cursor = materialized.range.end.nextSibling;
-	}
-	while (cursor) {
-		const next = removeRangeAtCursor(parent, cursor);
-		cursor = next === cursor ? cursor.nextSibling : next;
-	}
-}
-function isEmptyChild(child) {
-	return child === null || child === void 0 || child === false;
-}
-function getOrBuildDomKeyMap(parent) {
-	let keyMap = keyedElements.get(parent);
-	if (!keyMap) {
-		keyMap = /* @__PURE__ */ new Map();
-		for (let child = parent.firstElementChild; child; child = child.nextElementSibling) {
-			const key = getMaterializedKey(child);
-			if (key !== void 0) keyMap.set(key, child);
+		if (typeof value === "function" && key !== "ref") {
+			getOrCreateReactivePropsCleanupMap(el).set(key, createReactivePropCleanupEntry(el, key, value, tagName));
+			continue;
 		}
-		if (keyMap.size > 0) keyedElements.set(parent, keyMap);
+		applyScalarPropValue(el, key, value, tagName);
 	}
-	return keyMap.size > 0 ? keyMap : void 0;
 }
-function updateUnkeyedChildren(parent, newChildren, forceUpdate = false) {
-	const parentNamespace = getParentNamespace(parent);
-	const domHost = getRendererDOMHost();
-	const trySyncComponentChild = (currentDom, next) => {
-		if (typeof next.type !== "function") return null;
-		return domHost.syncComponentElement(currentDom, next, next.type, (next.props ?? {}) || {}, parentNamespace, forceUpdate);
-	};
-	const hasText = newChildren.some((c) => typeof c === "string" || typeof c === "number");
-	const hasElements = newChildren.some((c) => _isDOMElement(c));
-	const hasEmptyChildren = newChildren.some(isEmptyChild);
-	const hasComponentChildren = newChildren.some((c) => _isDOMElement(c) && typeof c.type === "function");
-	const hasNonElementDomChildren = parent.childNodes.length !== parent.children.length;
-	if (!hasEmptyChildren && !hasText && !hasComponentChildren && !hasNonElementDomChildren && hasElements && parent.children.length === newChildren.length) {
-		const c = parent.children;
-		for (let i = 0; i < newChildren.length; i++) {
-			const next = newChildren[i];
-			const current = c[i];
-			if (!current || next === void 0) continue;
-			if (_isDOMElement(next) && typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) domHost.updateElementFromVnode(current, next, true, forceUpdate);
-			else {
-				const dom = domHost.createDOMNode(next, parentNamespace);
-				if (dom) {
-					teardownNodeSubtree(current);
-					parent.replaceChild(dom, current);
-				}
-			}
-			else if (_isDOMElement(next)) {
-				if (trySyncControlBoundaryChild(parent, current, next)) continue;
-				if (!trySyncComponentChild(current, next)) {
-					const dom = domHost.createDOMNode(next, parentNamespace);
-					if (dom) {
-						teardownNodeSubtree(current);
-						if (current.parentNode === parent) parent.replaceChild(dom, current);
-						else if (dom.parentNode !== parent) parent.insertBefore(dom, parent.children[i] ?? null);
-					}
-				}
+function syncElementPropBindings(el, domVNode, props, usesReactiveChildren) {
+	const existingListeners = elementListeners.get(el);
+	const existingReactiveProps = getElementReactivePropsCleanupMap(el);
+	let desiredListenerKeys = null;
+	let desiredDelegatedEventNames = null;
+	let desiredReactivePropNames = null;
+	if (usesReactiveChildren) (desiredReactivePropNames ??= /* @__PURE__ */ new Set()).add(REACTIVE_CHILDREN_KEY);
+	for (const key in props) {
+		const value = props[key];
+		if (key === "ref") continue;
+		if (isSkippedProp(key)) continue;
+		const eventProp = parseEventProp(key);
+		const eventName = eventProp?.eventName;
+		const eventCapture = eventProp?.capture ?? false;
+		const listenerKey = eventName === void 0 ? null : getEventListenerKey(eventName, eventCapture);
+		if (value === void 0 || value === null || value === false) {
+			if (listenerKey && existingListeners?.has(listenerKey)) {
+				const entry = existingListeners.get(listenerKey);
+				if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
+				else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
+				else el.removeEventListener(entry.eventName, entry.handler);
+				existingListeners.delete(listenerKey);
 			} else {
-				const dom = domHost.createDOMNode(next, parentNamespace);
-				if (dom) {
-					teardownNodeSubtree(current);
-					parent.replaceChild(dom, current);
-				}
+				const entry = existingReactiveProps?.get(key);
+				if (entry) {
+					entry.cleanup();
+					existingReactiveProps?.delete(key);
+				} else applyScalarPropValue(el, key, value, domVNode.type);
 			}
+			continue;
 		}
-		return;
-	}
-	const existing = Array.from(parent.children);
-	if (hasText || hasComponentChildren || hasEmptyChildren || hasNonElementDomChildren) {
-		const allNodes = Array.from(parent.childNodes);
-		const max = Math.max(allNodes.length, newChildren.length);
-		for (let i = 0; i < max; i++) {
-			const currentNode = allNodes[i];
-			const next = newChildren[i];
-			const nextIsEmpty = isEmptyChild(next);
-			if (nextIsEmpty && currentNode) {
-				teardownNodeSubtree(currentNode);
-				currentNode.remove();
+		if (typeof value === "function" && !eventProp && key !== "ref") {
+			const existingEntry = existingReactiveProps?.get(key);
+			if (existingReactiveProps && existingReactiveProps.size > 0) (desiredReactivePropNames ??= /* @__PURE__ */ new Set()).add(key);
+			if (existingEntry && existingEntry.fnRef === value) continue;
+			if (existingEntry?.updateFn) {
+				existingEntry.updateFn(value);
+				existingEntry.fnRef = value;
 				continue;
 			}
-			if (!currentNode && !nextIsEmpty) {
-				const dom = domHost.createDOMNode(next, parentNamespace);
-				if (dom) parent.appendChild(dom);
+			if (existingEntry) existingEntry.cleanup();
+			getOrCreateReactivePropsCleanupMap(el).set(key, createReactivePropCleanupEntry(el, key, value, domVNode.type));
+			continue;
+		}
+		const existingReactiveEntry = existingReactiveProps?.get(key);
+		if (existingReactiveEntry) {
+			existingReactiveEntry.cleanup();
+			existingReactiveProps?.delete(key);
+		}
+		if (eventProp && listenerKey) {
+			const eventName = eventProp.eventName;
+			const eventCapture = eventProp.capture;
+			const preserveHydrationDirect = existingListeners?.get(listenerKey)?.isDelegated === false && isHydrationDirectListener(el, listenerKey);
+			if (getCurrentHydrationListenerTransaction() && !existingListeners?.has(listenerKey) && !getDelegatedHandlerForElement(el, eventName) && !isHydrationDirectListener(el, listenerKey)) {
+				if (!hasStagedHydrationListener(el, eventName, eventCapture)) stageHydrationListener({
+					kind: "direct",
+					target: el,
+					eventName,
+					capture: eventCapture,
+					publish: () => addTrackedListener(el, eventName, value, eventCapture, false, true),
+					rollback: () => {
+						removeTrackedListener(el, eventName, eventCapture);
+						clearHydrationDirectListener(el, listenerKey);
+					}
+				});
 				continue;
 			}
-			if (!currentNode || nextIsEmpty) continue;
-			if (typeof next === "string" || typeof next === "number") if (currentNode.nodeType === 3) currentNode.data = String(next);
-			else {
-				const textNode = document.createTextNode(String(next));
-				teardownNodeSubtree(currentNode);
-				parent.replaceChild(textNode, currentNode);
+			if (hydrationDirectListenerDepth > 0 && !existingListeners?.has(listenerKey) && !getDelegatedHandlerForElement(el, eventName)) {
+				addTrackedListener(el, eventName, value, eventCapture, false, true);
+				continue;
 			}
-			else if (_isDOMElement(next)) if (currentNode.nodeType === 1) {
-				const currentEl = currentNode;
-				if (typeof next.type === "string") if (tagsEqualIgnoreCase(currentEl.tagName, next.type)) domHost.updateElementFromVnode(currentEl, next, true, forceUpdate);
-				else {
-					const dom = domHost.createDOMNode(next, parentNamespace);
-					if (dom) {
-						teardownNodeSubtree(currentEl);
-						if (currentNode.parentNode === parent) parent.replaceChild(dom, currentNode);
-						else if (dom.parentNode !== parent) parent.insertBefore(dom, parent.childNodes[i] ?? null);
-					}
-				}
-				else {
-					if (trySyncControlBoundaryChild(parent, currentNode, next)) continue;
-					if (!trySyncComponentChild(currentEl, next)) {
-						const dom = domHost.createDOMNode(next, parentNamespace);
-						if (dom) {
-							teardownNodeSubtree(currentEl);
-							parent.replaceChild(dom, currentNode);
-						}
-					}
+			const useDelegation = !preserveHydrationDirect && !eventCapture && isEventDelegationEnabled() && isDelegatedEvent(eventName);
+			if (useDelegation) (desiredDelegatedEventNames ??= /* @__PURE__ */ new Set()).add(eventName);
+			if (useDelegation) {
+				const existingDelegated = getDelegatedHandlerForElement(el, eventName);
+				if (existingDelegated?.original === value) continue;
+				if (existingDelegated && updateDelegatedListener(el, eventName, value, value, void 0)) continue;
+				addDelegatedListener(el, eventName, value, value, void 0);
+				continue;
+			}
+			(desiredListenerKeys ??= /* @__PURE__ */ new Set()).add(listenerKey);
+			const existing = existingListeners?.get(listenerKey);
+			if (existing && existing.original === value) continue;
+			if (existing) {
+				if (useDelegation && existing.isDelegated && updateDelegatedListener(el, eventName, value, value, void 0)) {
+					existing.handler = value;
+					existing.original = value;
+					existing.options = void 0;
+					continue;
 				}
-			} else {
-				if (typeof next.type === "function" && trySyncComponentChild(currentNode, next)) continue;
-				const dom = domHost.createDOMNode(next, parentNamespace);
-				if (dom) {
-					teardownNodeSubtree(currentNode);
-					parent.replaceChild(dom, currentNode);
+				if (!useDelegation && !existing.isDelegated && existing.updateHandler) {
+					existing.updateHandler(value);
+					existing.original = value;
+					continue;
 				}
+				if (existing.isDelegated) removeDelegatedListener(el, existing.eventName);
+				else if (existing.options !== void 0) el.removeEventListener(existing.eventName, existing.handler, existing.options);
+				else el.removeEventListener(existing.eventName, existing.handler);
 			}
-		}
-		return;
+			const options = getEventListenerOptions(eventName, eventCapture);
+			const mutableHandler = createMutableWrappedHandler(value, true);
+			const trackedHandler = mutableHandler.handler;
+			if (options !== void 0) el.addEventListener(eventName, trackedHandler, options);
+			else el.addEventListener(eventName, trackedHandler);
+			const listenerEntry = {
+				handler: trackedHandler,
+				original: value,
+				eventName,
+				options,
+				isDelegated: false,
+				updateHandler: mutableHandler?.updateHandler
+			};
+			if (!elementListeners.has(el)) elementListeners.set(el, /* @__PURE__ */ new Map());
+			elementListeners.get(el).set(listenerKey, listenerEntry);
+		} else applyScalarPropValue(el, key, value, domVNode.type);
 	}
-	if (newChildren.length === 1 && existing.length === 0 && parent.childNodes.length === 1) {
-		const firstNewChild = newChildren[0];
-		const firstExisting = parent.firstChild;
-		if ((typeof firstNewChild === "string" || typeof firstNewChild === "number") && firstExisting?.nodeType === 3) {
-			firstExisting.data = String(firstNewChild);
-			return;
-		}
+	removeStaleAttributes(el, domVNode, props);
+	if (existingListeners && existingListeners.size > 0) if (desiredListenerKeys === null) {
+		existingListeners.forEach((entry) => {
+			if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
+			else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
+			else el.removeEventListener(entry.eventName, entry.handler);
+		});
+		elementListeners.delete(el);
+	} else {
+		existingListeners.forEach((entry, listenerKey) => {
+			if (!desiredListenerKeys.has(listenerKey)) {
+				if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
+				else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
+				else el.removeEventListener(entry.eventName, entry.handler);
+				existingListeners.delete(listenerKey);
+			}
+		});
+		if (existingListeners.size === 0) elementListeners.delete(el);
 	}
-	if (existing.length === 0 && parent.childNodes.length > 0) {
-		for (let n = parent.firstChild; n;) {
-			const next = n.nextSibling;
-			teardownNodeSubtree(n);
-			n = next;
-		}
-		parent.textContent = "";
+	const delegatedHandlers = getDelegatedHandlersForElement(el);
+	if (delegatedHandlers && delegatedHandlers.size > 0) {
+		if (desiredDelegatedEventNames === null) for (const eventName of delegatedHandlers.keys()) removeDelegatedListener(el, eventName);
+		else for (const eventName of delegatedHandlers.keys()) if (!desiredDelegatedEventNames.has(eventName)) removeDelegatedListener(el, eventName);
 	}
-	const max = Math.max(existing.length, newChildren.length);
-	for (let i = 0; i < max; i++) {
-		const current = existing[i];
-		const next = newChildren[i];
-		const nextIsEmpty = isEmptyChild(next);
-		if (nextIsEmpty && current) {
-			teardownNodeSubtree(current);
-			current.remove();
-			continue;
-		}
-		if (!current && !nextIsEmpty) {
-			const dom = domHost.createDOMNode(next, parentNamespace);
-			if (dom) parent.appendChild(dom);
-			continue;
-		}
-		if (!current || nextIsEmpty) continue;
-		if (typeof next === "string" || typeof next === "number") {
-			const textNode = document.createTextNode(String(next));
-			teardownNodeSubtree(current);
-			parent.replaceChild(textNode, current);
-		} else if (_isDOMElement(next)) {
-			if (typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) domHost.updateElementFromVnode(current, next, true, forceUpdate);
-			else {
-				const dom = domHost.createDOMNode(next, parentNamespace);
-				if (dom) {
-					teardownNodeSubtree(current);
-					parent.replaceChild(dom, current);
-				}
-			}
-			else if (!trySyncComponentChild(current, next)) {
-				const dom = domHost.createDOMNode(next, parentNamespace);
-				if (dom) {
-					teardownNodeSubtree(current);
-					if (current.parentNode === parent) parent.replaceChild(dom, current);
-					else if (dom.parentNode !== parent) parent.insertBefore(dom, parent.children[i] ?? null);
-				}
-			}
-		} else {
-			const dom = domHost.createDOMNode(next);
-			if (dom) {
-				teardownNodeSubtree(current);
-				parent.replaceChild(dom, current);
+	if (existingReactiveProps && existingReactiveProps.size > 0) if (desiredReactivePropNames === null) {
+		existingReactiveProps.forEach((entry) => {
+			entry.cleanup();
+		});
+		elementReactivePropsCleanup.delete(el);
+	} else {
+		existingReactiveProps.forEach((entry, key) => {
+			if (!desiredReactivePropNames.has(key)) {
+				entry.cleanup();
+				existingReactiveProps.delete(key);
 			}
-		}
+		});
+		if (existingReactiveProps.size === 0) elementReactivePropsCleanup.delete(el);
 	}
 }
 //#endregion
@@ -3204,471 +3264,467 @@ function runRetainedElementUpdate(element, cleanupRangeNode, update, onError, bi
 	}
 }
 //#endregion
-//#region src/renderer/hydration-listener-transaction.ts
-let currentTransaction = null;
-function beginHydrationListenerTransaction() {
-	const transaction = {
-		parent: currentTransaction,
-		stages: [],
-		active: true
-	};
-	currentTransaction = transaction;
-	return transaction;
+//#region src/renderer/intrinsic-hydration-adoption.ts
+let hydrationAdoptionDepth = 0;
+const adoptedHydrationHosts = /* @__PURE__ */ new WeakSet();
+function isHydrationAdoptionScopeActive() {
+	return hydrationAdoptionDepth > 0;
 }
-function stageHydrationListener(stage) {
-	if (!currentTransaction?.active) return false;
-	currentTransaction.stages.push(stage);
-	return true;
+function markHydrationHostAdopted(host) {
+	adoptedHydrationHosts.add(host);
 }
-function hasStagedHydrationListener(target, eventName, capture) {
-	return !!currentTransaction?.stages.some((stage) => stage.target === target && stage.eventName === eventName && stage.capture === capture);
+function isAdoptedHydrationHost(host) {
+	return adoptedHydrationHosts.has(host);
 }
-function closeTransaction(transaction) {
-	if (!transaction.active) return false;
-	transaction.active = false;
-	currentTransaction = transaction.parent;
-	return true;
+function canReconcileComponentHost(host, hasMatchingInstance) {
+	return hasMatchingInstance || Boolean(host.__ASKR_INSTANCE) || Boolean(host.__ASKR_INSTANCES?.length) || isAdoptedHydrationHost(host) || isHydrationAdoptionScopeActive();
 }
-function commitHydrationListenerTransaction(transaction) {
-	if (!closeTransaction(transaction)) return;
-	const stages = [...transaction.stages].sort((left, right) => {
-		if (left.kind !== right.kind) return left.kind === "delegated" ? -1 : 1;
-		return left.eventName.localeCompare(right.eventName);
-	});
-	const published = [];
+function withIntrinsicHydrationAdoption(work) {
+	hydrationAdoptionDepth += 1;
 	try {
-		for (const stage of stages) {
-			stage.publish();
-			published.push(stage);
-		}
-	} catch (error) {
-		for (let index = published.length - 1; index >= 0; index -= 1) try {
-			published[index].rollback();
-		} catch {}
-		throw error;
+		return work();
+	} finally {
+		hydrationAdoptionDepth -= 1;
 	}
 }
-function discardHydrationListenerTransaction(transaction) {
-	if (!closeTransaction(transaction)) return;
-	for (let index = transaction.stages.length - 1; index >= 0; index -= 1) try {
-		transaction.stages[index].rollback();
-	} catch {}
-}
-function getCurrentHydrationListenerTransaction() {
-	return currentTransaction?.active ? currentTransaction : null;
-}
-//#endregion
-//#region src/renderer/prop-bindings.ts
-const reactivePropRegistry = /* @__PURE__ */ new Set();
-const hydrationDirectListeners = /* @__PURE__ */ new WeakMap();
-let hydrationDirectListenerDepth = 0;
-function beginHydrationDirectListenerMode() {
-	hydrationDirectListenerDepth += 1;
-}
-function endHydrationDirectListenerMode() {
-	hydrationDirectListenerDepth = Math.max(0, hydrationDirectListenerDepth - 1);
+function getDirectVNodeChildren(vnode) {
+	const children = vnode.props?.children ?? vnode.children;
+	if (children === null || children === void 0 || children === false) return [];
+	return Array.isArray(children) ? children : [children];
 }
-function markHydrationDirectListener(element, listenerKey) {
-	let listeners = hydrationDirectListeners.get(element);
-	if (!listeners) {
-		listeners = /* @__PURE__ */ new Set();
-		hydrationDirectListeners.set(element, listeners);
+function canAdoptMatchingIntrinsicSubtree(element, vnode) {
+	if (typeof vnode.type !== "string" || !tagNamesEqualIgnoreCase$1(element.tagName, vnode.type) || hasAnyElementBindingState(element) || extractKey(vnode) !== void 0) return false;
+	const props = vnode.props || {};
+	if (!hasMatchingStaticPropsIgnoringEvents(element, props, vnode.type)) return false;
+	for (const key in props) {
+		const value = props[key];
+		const eventProp = parseEventProp(key);
+		if (eventProp && typeof value !== "function") return false;
+		if (!eventProp && key !== "ref" && typeof value === "function") return false;
 	}
-	listeners.add(listenerKey);
+	const children = getDirectVNodeChildren(vnode);
+	if (element.childNodes.length !== children.length) return false;
+	for (let index = 0; index < children.length; index += 1) {
+		const child = children[index];
+		const current = element.childNodes[index];
+		if (typeof child === "string" || typeof child === "number") {
+			if (current.nodeType !== 3 || current.data !== String(child)) return false;
+			continue;
+		}
+		if (!_isDOMElement(child) || typeof child.type !== "string" || !(current instanceof Element) || extractKey(child) !== void 0 || !canAdoptMatchingIntrinsicSubtree(current, child)) return false;
+	}
+	return true;
 }
-function isHydrationDirectListener(element, listenerKey) {
-	return hydrationDirectListeners.get(element)?.has(listenerKey) ?? false;
+function adoptMatchingIntrinsicSubtree(element, vnode) {
+	const props = vnode.props || {};
+	let hasBindings = Object.prototype.hasOwnProperty.call(props, "ref");
+	for (const key in props) if (parseEventProp(key)) {
+		hasBindings = true;
+		break;
+	}
+	if (hasBindings) runRetainedElementUpdate(element, () => void 0, () => applyMatchingElementBindings(element, props), void 0, true);
+	const children = getDirectVNodeChildren(vnode);
+	for (let index = 0; index < children.length; index += 1) {
+		const child = children[index];
+		if (_isDOMElement(child)) adoptMatchingIntrinsicSubtree(element.childNodes[index], child);
+	}
 }
-function clearHydrationDirectListener(element, listenerKey) {
-	const listeners = hydrationDirectListeners.get(element);
-	listeners?.delete(listenerKey);
-	if (listeners?.size === 0) hydrationDirectListeners.delete(element);
+function tryAdoptMatchingIntrinsicSubtree(element, vnode) {
+	if (!isHydrationAdoptionScopeActive()) return false;
+	if (!canAdoptMatchingIntrinsicSubtree(element, vnode)) return false;
+	adoptMatchingIntrinsicSubtree(element, vnode);
+	return true;
 }
-function addTrackedListener(el, eventName, handler, capture = false, fresh = false, forceDirect = false) {
-	const effectiveForceDirect = forceDirect || hydrationDirectListenerDepth > 0;
-	const useDelegation = !effectiveForceDirect && !capture && isEventDelegationEnabled() && isDelegatedEvent(eventName);
-	const listenerKey = getEventListenerKey(eventName, capture);
-	if (effectiveForceDirect && isHydrationDirectListener(el, listenerKey)) {
-		const existing = elementListeners.get(el)?.get(listenerKey);
-		if (existing) {
-			existing.updateHandler?.(handler);
-			existing.original = handler;
-			return;
-		}
+//#endregion
+//#region src/renderer/element-children.ts
+const rendererReactiveChildDOMHost = {
+	createDOMNode: (node, parentNamespace) => getRendererDOMHost().createDOMNode(node, parentNamespace),
+	updateElementChildren: (el, children, forceUpdate) => updateElementChildren$1(el, children, forceUpdate)
+};
+function updateElementChildren$1(el, children, forceUpdate = false) {
+	const directControlBoundary = getDirectControlBoundaryVNode(children);
+	if (directControlBoundary) {
+		const controlState = getControlBoundaryState(directControlBoundary);
+		if (!controlState) throw new Error("[updateElementChildren] Control boundary missing internal state");
+		registerControlBoundaryCommitOwner(el, controlState);
+		commitForBoundaryChildren(el, controlState, evaluateControlBoundaryState(controlState));
+		return;
 	}
-	if (!effectiveForceDirect && !hasStagedHydrationListener(el, eventName, capture) && stageHydrationListener({
-		kind: "direct",
-		target: el,
-		eventName,
-		capture,
-		publish: () => addTrackedListener(el, eventName, handler, capture, fresh, true),
-		rollback: () => {
-			removeTrackedListener(el, eventName, capture);
-			clearHydrationDirectListener(el, listenerKey);
+	clearControlBoundaryCommitOwner(el);
+	if (children === null || children === void 0) {
+		for (let n = el.firstChild; n;) {
+			const next = n.nextSibling;
+			teardownNodeSubtree(n);
+			n = next;
 		}
-	})) return;
-	if (useDelegation) {
-		if (fresh) addFreshDelegatedListener(el, eventName, handler, handler, void 0);
-		else addDelegatedListener(el, eventName, handler, handler, void 0);
+		el.textContent = "";
 		return;
 	}
-	const options = getEventListenerOptions(eventName, capture);
-	const mutableHandler = createMutableWrappedHandler(handler, true);
-	const trackedHandler = mutableHandler.handler;
-	if (options !== void 0) el.addEventListener(eventName, trackedHandler, options);
-	else el.addEventListener(eventName, trackedHandler);
-	if (effectiveForceDirect) {
-		if (!capture && getDelegatedHandlerForElement(el, eventName)) removeDelegatedListener(el, eventName);
-		markHydrationDirectListener(el, listenerKey);
+	if (!Array.isArray(children) && isFragmentVNode(children)) {
+		updateUnkeyedChildren(el, normalizeComponentChildren(children), forceUpdate);
+		return;
 	}
-	if (!elementListeners.has(el)) elementListeners.set(el, /* @__PURE__ */ new Map());
-	elementListeners.get(el).set(listenerKey, {
-		handler: trackedHandler,
-		original: handler,
-		eventName,
-		options,
-		isDelegated: false,
-		updateHandler: mutableHandler?.updateHandler
-	});
-}
-function removeTrackedListener(el, eventName, capture) {
-	if (!capture && getDelegatedHandlerForElement(el, eventName)) {
-		removeDelegatedListener(el, eventName);
+	if (!Array.isArray(children) && (typeof children === "string" || typeof children === "number")) {
+		if (el.childNodes.length === 1 && el.firstChild?.nodeType === 3) {
+			const s = String(children);
+			const t = el.firstChild;
+			if (t.data !== s) t.data = s;
+		} else {
+			for (let n = el.firstChild; n;) {
+				const next = n.nextSibling;
+				teardownNodeSubtree(n);
+				n = next;
+			}
+			el.textContent = String(children);
+		}
 		return;
 	}
-	const listenerKey = getEventListenerKey(eventName, capture);
-	const entry = elementListeners.get(el)?.get(listenerKey);
-	if (!entry) return;
-	if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
-	else el.removeEventListener(entry.eventName, entry.handler);
-	const listeners = elementListeners.get(el);
-	listeners?.delete(listenerKey);
-	if (listeners?.size === 0) elementListeners.delete(el);
-}
-function markReactivePropsDirtySource(source) {
-	markFineGrainedEffectsDirtySource(source);
-}
-function setupReactiveProp(el, propName, propFn, tagName) {
-	const descriptor = {
-		el,
-		propName,
-		propFn,
-		tagName,
-		lastClassTokens: null
-	};
-	let effectHandle = null;
-	reactivePropRegistry.add(descriptor);
-	effectHandle = createFineGrainedEffect({
-		lane: "reactive",
-		compute: () => descriptor.propFn(),
-		commit: (value, previousValue) => {
-			applyScalarPropValue(el, propName, value, tagName, previousValue, descriptor);
-		},
-		equals: (previousValue, nextValue) => {
-			if (Object.is(previousValue, nextValue)) return true;
-			return false;
-		},
-		onError: (err) => {
-			if (getRuntimeEnv().NODE_ENV !== "production") logger.warn("[Askr] Reactive prop update failed:", err);
+	if (Array.isArray(children)) {
+		const normalizedChildren = normalizeComponentChildren(children);
+		if (trySyncScalarChildSequenceInPlace(el, normalizedChildren, rendererReactiveChildDOMHost)) {
+			keyedElements.delete(el);
+			return;
 		}
-	});
-	const cleanup = () => {
-		reactivePropRegistry.delete(descriptor);
-		effectHandle?.cleanup();
-		effectHandle = null;
-	};
-	const updateFn = (nextFn) => {
-		if (!effectHandle) return;
-		descriptor.propFn = nextFn;
-		try {
-			effectHandle.updateCompute(nextFn);
-		} catch (err) {
-			if (getRuntimeEnv().NODE_ENV !== "production") logger.warn("[Askr] Reactive prop update failed:", err);
+		if (normalizedChildren.some(isControlBoundaryVNode)) {
+			updateMixedControlChildren(el, normalizedChildren, forceUpdate);
+			keyedElements.delete(el);
+			return;
 		}
-	};
-	return {
-		cleanup,
-		updateFn
-	};
-}
-function getOrCreateReactivePropsCleanupMap(el) {
-	return getElementReactivePropsCleanupMap(el, true);
-}
-/** @internal Create a standalone reactive prop entry for rollback restoration. */
-function createReactivePropCleanupEntry(el, propName, propFn, tagName) {
-	const reactive = setupReactiveProp(el, propName, propFn, tagName);
-	return {
-		cleanup: reactive.cleanup,
-		updateFn: (nextValue) => {
-			reactive.updateFn(nextValue);
-		},
-		restoreFn: (nextValue) => createReactivePropCleanupEntry(el, propName, nextValue, tagName),
-		fnRef: propFn
-	};
-}
-function hasTrackedElementPropBindings(el) {
-	const existingListeners = elementListeners.get(el);
-	return existingListeners !== void 0 && existingListeners.size > 0 || getElementReactivePropCleanupSize(el) > 0;
+		if (hasKeyedVNodeChildren(normalizedChildren)) {
+			const newKeyMap = reconcileKeyedChildren(el, normalizedChildren, getOrBuildDomKeyMap(el));
+			keyedElements.set(el, newKeyMap);
+			return;
+		}
+		if (isBulkTextFastPathEligible(el, normalizedChildren)) {
+			performBulkTextReplace(el, normalizedChildren);
+			keyedElements.delete(el);
+			return;
+		}
+		updateUnkeyedChildren(el, normalizedChildren, forceUpdate);
+		return;
+	}
+	if (_isDOMElement(children)) {
+		updateUnkeyedChildren(el, [children], forceUpdate);
+		return;
+	}
+	for (let n = el.firstChild; n;) {
+		const next = n.nextSibling;
+		teardownNodeSubtree(n);
+		n = next;
+	}
+	el.textContent = "";
+	const dom = getRendererDOMHost().createDOMNode(children);
+	if (dom) el.appendChild(dom);
 }
-function hasAnyElementBindingState(el) {
-	return hasTrackedElementPropBindings(el) || getDelegatedHandlersForElement(el) !== void 0 || elementRefs.has(el);
+function hasKeyedVNodeChildren(children) {
+	for (let i = 0; i < children.length; i++) if (extractKey(children[i]) !== void 0) return true;
+	return false;
 }
-function applyMatchingElementBindings(el, props) {
-	if (Object.prototype.hasOwnProperty.call(props, "ref")) updateElementRef(el, props.ref);
-	for (const key in props) {
-		const eventProp = parseEventProp(key);
-		if (!eventProp) continue;
-		const value = props[key];
-		if (typeof value === "function") addTrackedListener(el, eventProp.eventName, value, eventProp.capture);
-	}
+function isControlBoundaryVNode(child) {
+	return _isDOMElement(child) && child.type === __CONTROL_BOUNDARY__;
 }
-/** @internal Attach stateful bindings to a newly cloned blueprint element. */
-function applyFreshElementBindings(el, props) {
-	if (Object.prototype.hasOwnProperty.call(props, "ref")) updateElementRef(el, props.ref);
-	for (const key in props) {
-		const eventProp = parseEventProp(key);
-		if (eventProp) {
-			const value = props[key];
-			if (typeof value === "function") addTrackedListener(el, eventProp.eventName, value, eventProp.capture, true);
+function removeRangeAtCursor(parent, cursor) {
+	if (!isRangeStart(cursor)) return cursor;
+	const end = findRangeEnd(cursor);
+	if (!end) return cursor;
+	const range = {
+		start: cursor,
+		end,
+		single: false
+	};
+	const next = end.nextSibling;
+	removeRange(range, (node) => {
+		if (node === range.start || node === range.end) {
+			node.parentNode?.removeChild(node);
+			return;
 		}
+		teardownNodeSubtree(node);
+		node.parentNode?.removeChild(node);
+	});
+	return next;
+}
+function consumeUnmatchedTailAtCursor(parent, cursor) {
+	const instanceHost = cursor;
+	if (isSSRPortalHydrationAnchor(cursor) && (isHydrationAdoptionScopeActive() || Boolean(instanceHost.__ASKR_INSTANCE) || Boolean(instanceHost.__ASKR_INSTANCES?.length))) return cursor.nextSibling;
+	if (isRangeStart(cursor)) {
+		const next = removeRangeAtCursor(parent, cursor);
+		if (next !== cursor) return next;
 	}
+	const next = cursor.nextSibling;
+	teardownNodeSubtree(cursor);
+	if (cursor.parentNode === parent) parent.removeChild(cursor);
+	return next;
 }
-function applyPropsToElement$1(el, props, tagName, isHydrationSkipped) {
-	if (isHydrationSkipped(el)) return;
-	for (const key in props) {
-		const value = props[key];
-		if (key === "ref") {
-			updateElementRef(el, value);
+function updateMixedControlChildren(parent, children, forceUpdate) {
+	clearControlBoundaryCommitOwner(parent);
+	const parentNamespace = getParentNamespace(parent);
+	const domHost = getRendererDOMHost();
+	let cursor = parent.firstChild;
+	for (const child of children) {
+		if (isControlBoundaryVNode(child)) {
+			const controlState = getControlBoundaryState(child);
+			if (!controlState) throw new Error("[updateElementChildren] Control boundary missing internal state");
+			const childVNodes = evaluateControlBoundaryState(controlState);
+			const cursorAfterBoundary = cursor ? isRangeStart(cursor) ? findRangeEnd(cursor)?.nextSibling ?? cursor.nextSibling : cursor.nextSibling : null;
+			const ranges = syncControlBoundaryInMixedParent(parent, controlState, childVNodes, cursor);
+			if (controlState.kind === "for") {
+				const last = ranges[ranges.length - 1];
+				cursor = last ? last.end.nextSibling : cursorAfterBoundary?.parentNode === parent ? cursorAfterBoundary : cursor?.parentNode === parent ? cursor : null;
+				continue;
+			}
+			for (const range of ranges) if (range.start.parentNode !== parent) moveRange(parent, range, cursor?.parentNode === parent ? cursor : null);
+			else if (cursor?.parentNode === parent) moveRange(parent, range, cursor);
+			const last = ranges[ranges.length - 1];
+			if (last) {
+				const cursorWasReplaced = cursor && !ranges.some((range) => range.start === cursor);
+				if (!cursor?.parentNode) cursor = last.end.nextSibling;
+				else if (cursorWasReplaced && isRangeStart(cursor)) cursor = findRangeEnd(cursor)?.nextSibling ?? last.end.nextSibling;
+				else if (isRangeStart(cursor)) cursor = findRangeEnd(cursor)?.nextSibling ?? last.end.nextSibling;
+				else cursor = last.end.nextSibling;
+			} else {
+				const inactiveBoundaryCursor = cursor?.parentNode === parent ? cursor : cursorAfterBoundary?.parentNode === parent ? cursorAfterBoundary : null;
+				const inactiveBoundaryEnd = inactiveBoundaryCursor && isRangeStart(inactiveBoundaryCursor) ? findRangeEnd(inactiveBoundaryCursor) : null;
+				cursor = inactiveBoundaryEnd?.previousSibling === inactiveBoundaryCursor ? inactiveBoundaryEnd.nextSibling : inactiveBoundaryCursor;
+			}
 			continue;
 		}
-		if (isSkippedProp(key)) continue;
-		if (value === void 0 || value === null || value === false) continue;
-		const eventProp = parseEventProp(key);
-		if (eventProp) {
-			addTrackedListener(el, eventProp.eventName, value, eventProp.capture);
+		if (cursor) cursor = removeRangeAtCursor(parent, cursor);
+		if (cursor && (typeof child === "string" || typeof child === "number") && cursor.nodeType === 3) {
+			cursor.data = String(child);
+			cursor = cursor.nextSibling;
 			continue;
 		}
-		if (typeof value === "function" && key !== "ref") {
-			getOrCreateReactivePropsCleanupMap(el).set(key, createReactivePropCleanupEntry(el, key, value, tagName));
+		if (cursor instanceof Element && _isDOMElement(child) && typeof child.type === "string" && tagsEqualIgnoreCase(cursor.tagName, child.type)) {
+			domHost.updateElementFromVnode(cursor, child, true, forceUpdate);
+			cursor = cursor.nextSibling;
 			continue;
 		}
-		applyScalarPropValue(el, key, value, tagName);
+		if (cursor && _isDOMElement(child) && typeof child.type === "function") {
+			const synced = domHost.syncComponentElement(cursor, child, child.type, (child.props ?? {}) || {}, parentNamespace, forceUpdate, void 0, void 0, true);
+			if (synced) {
+				cursor = synced.nextSibling;
+				continue;
+			}
+		}
+		const created = domHost.createDOMNode(child, parentNamespace);
+		if (!created) {
+			cursor = cursor?.nextSibling ?? null;
+			continue;
+		}
+		const materialized = createDetachedRange(created);
+		const old = cursor;
+		moveRange(parent, materialized.range, old);
+		if (old) {
+			teardownNodeSubtree(old);
+			old.parentNode?.removeChild(old);
+		}
+		cursor = materialized.range.end.nextSibling;
 	}
+	while (cursor) cursor = consumeUnmatchedTailAtCursor(parent, cursor);
 }
-function syncElementPropBindings(el, domVNode, props, usesReactiveChildren) {
-	const existingListeners = elementListeners.get(el);
-	const existingReactiveProps = getElementReactivePropsCleanupMap(el);
-	let desiredListenerKeys = null;
-	let desiredDelegatedEventNames = null;
-	let desiredReactivePropNames = null;
-	if (usesReactiveChildren) (desiredReactivePropNames ??= /* @__PURE__ */ new Set()).add(REACTIVE_CHILDREN_KEY);
-	for (const key in props) {
-		const value = props[key];
-		if (key === "ref") continue;
-		if (isSkippedProp(key)) continue;
-		const eventProp = parseEventProp(key);
-		const eventName = eventProp?.eventName;
-		const eventCapture = eventProp?.capture ?? false;
-		const listenerKey = eventName === void 0 ? null : getEventListenerKey(eventName, eventCapture);
-		if (value === void 0 || value === null || value === false) {
-			if (listenerKey && existingListeners?.has(listenerKey)) {
-				const entry = existingListeners.get(listenerKey);
-				if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
-				else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
-				else el.removeEventListener(entry.eventName, entry.handler);
-				existingListeners.delete(listenerKey);
+function isEmptyChild(child) {
+	return child === null || child === void 0 || child === false;
+}
+function getOrBuildDomKeyMap(parent) {
+	let keyMap = keyedElements.get(parent);
+	if (!keyMap) {
+		keyMap = /* @__PURE__ */ new Map();
+		for (let child = parent.firstElementChild; child; child = child.nextElementSibling) {
+			const key = getMaterializedKey(child);
+			if (key !== void 0) keyMap.set(key, child);
+		}
+		if (keyMap.size > 0) keyedElements.set(parent, keyMap);
+	}
+	return keyMap.size > 0 ? keyMap : void 0;
+}
+function updateUnkeyedChildren(parent, newChildren, forceUpdate = false) {
+	const parentNamespace = getParentNamespace(parent);
+	const domHost = getRendererDOMHost();
+	const trySyncComponentChild = (currentDom, next, hydrationRangeEnd) => {
+		if (typeof next.type !== "function") return null;
+		return domHost.syncComponentElement(currentDom, next, next.type, (next.props ?? {}) || {}, parentNamespace, forceUpdate, void 0, hydrationRangeEnd, true);
+	};
+	const hasText = newChildren.some((c) => typeof c === "string" || typeof c === "number");
+	const hasElements = newChildren.some((c) => _isDOMElement(c));
+	const hasEmptyChildren = newChildren.some(isEmptyChild);
+	const hasComponentChildren = newChildren.some((c) => _isDOMElement(c) && typeof c.type === "function");
+	const hasNonElementDomChildren = parent.childNodes.length !== parent.children.length;
+	if (!hasEmptyChildren && !hasText && !hasComponentChildren && !hasNonElementDomChildren && hasElements && parent.children.length === newChildren.length) {
+		const c = parent.children;
+		for (let i = 0; i < newChildren.length; i++) {
+			const next = newChildren[i];
+			const current = c[i];
+			if (!current || next === void 0) continue;
+			if (_isDOMElement(next) && typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) domHost.updateElementFromVnode(current, next, true, forceUpdate);
+			else {
+				const dom = domHost.createDOMNode(next, parentNamespace);
+				if (dom) {
+					teardownNodeSubtree(current);
+					parent.replaceChild(dom, current);
+				}
+			}
+			else if (_isDOMElement(next)) {
+				if (trySyncControlBoundaryChild(parent, current, next)) continue;
+				if (!trySyncComponentChild(current, next)) {
+					const dom = domHost.createDOMNode(next, parentNamespace);
+					if (dom) {
+						teardownNodeSubtree(current);
+						if (current.parentNode === parent) parent.replaceChild(dom, current);
+						else if (dom.parentNode !== parent) parent.insertBefore(dom, parent.children[i] ?? null);
+					}
+				}
 			} else {
-				const entry = existingReactiveProps?.get(key);
-				if (entry) {
-					entry.cleanup();
-					existingReactiveProps?.delete(key);
-				} else applyScalarPropValue(el, key, value, domVNode.type);
+				const dom = domHost.createDOMNode(next, parentNamespace);
+				if (dom) {
+					teardownNodeSubtree(current);
+					parent.replaceChild(dom, current);
+				}
 			}
-			continue;
 		}
-		if (typeof value === "function" && !eventProp && key !== "ref") {
-			const existingEntry = existingReactiveProps?.get(key);
-			if (existingReactiveProps && existingReactiveProps.size > 0) (desiredReactivePropNames ??= /* @__PURE__ */ new Set()).add(key);
-			if (existingEntry && existingEntry.fnRef === value) continue;
-			if (existingEntry?.updateFn) {
-				existingEntry.updateFn(value);
-				existingEntry.fnRef = value;
+		return;
+	}
+	const existing = Array.from(parent.children);
+	if (hasText || hasComponentChildren || hasEmptyChildren || hasNonElementDomChildren) {
+		const allNodes = Array.from(parent.childNodes);
+		for (let i = 0; i < Math.max(allNodes.length, newChildren.length); i += 1) {
+			const currentNode = allNodes[i];
+			const next = newChildren[i];
+			const nextIsEmpty = isEmptyChild(next);
+			if (nextIsEmpty && currentNode) {
+				teardownNodeSubtree(currentNode);
+				currentNode.parentNode?.removeChild(currentNode);
 				continue;
 			}
-			if (existingEntry) existingEntry.cleanup();
-			getOrCreateReactivePropsCleanupMap(el).set(key, createReactivePropCleanupEntry(el, key, value, domVNode.type));
-			continue;
-		}
-		const existingReactiveEntry = existingReactiveProps?.get(key);
-		if (existingReactiveEntry) {
-			existingReactiveEntry.cleanup();
-			existingReactiveProps?.delete(key);
-		}
-		if (eventProp && listenerKey) {
-			const eventName = eventProp.eventName;
-			const eventCapture = eventProp.capture;
-			const preserveHydrationDirect = existingListeners?.get(listenerKey)?.isDelegated === false && isHydrationDirectListener(el, listenerKey);
-			if (getCurrentHydrationListenerTransaction() && !existingListeners?.has(listenerKey) && !getDelegatedHandlerForElement(el, eventName) && !isHydrationDirectListener(el, listenerKey)) {
-				if (!hasStagedHydrationListener(el, eventName, eventCapture)) stageHydrationListener({
-					kind: "direct",
-					target: el,
-					eventName,
-					capture: eventCapture,
-					publish: () => addTrackedListener(el, eventName, value, eventCapture, false, true),
-					rollback: () => {
-						removeTrackedListener(el, eventName, eventCapture);
-						clearHydrationDirectListener(el, listenerKey);
+			if (!currentNode && !nextIsEmpty) {
+				const dom = domHost.createDOMNode(next, parentNamespace);
+				if (dom) parent.appendChild(dom);
+				continue;
+			}
+			if (!currentNode || nextIsEmpty) continue;
+			if (typeof next === "string" || typeof next === "number") if (currentNode.nodeType === 3) currentNode.data = String(next);
+			else {
+				const textNode = document.createTextNode(String(next));
+				teardownNodeSubtree(currentNode);
+				parent.replaceChild(textNode, currentNode);
+			}
+			else if (_isDOMElement(next)) if (currentNode.nodeType === 1) {
+				const currentEl = currentNode;
+				if (typeof next.type === "string") if (tagsEqualIgnoreCase(currentEl.tagName, next.type)) domHost.updateElementFromVnode(currentEl, next, true, forceUpdate);
+				else {
+					const dom = domHost.createDOMNode(next, parentNamespace);
+					if (dom) {
+						teardownNodeSubtree(currentEl);
+						if (currentNode.parentNode === parent) parent.replaceChild(dom, currentNode);
+						else if (dom.parentNode !== parent) parent.insertBefore(dom, parent.childNodes[i] ?? null);
+					}
+				}
+				else {
+					if (trySyncControlBoundaryChild(parent, currentNode, next)) continue;
+					const remainingExpected = newChildren.length - i - 1;
+					const hydrationRangeEndIndex = allNodes.length - remainingExpected;
+					const synced = trySyncComponentChild(currentEl, next, hydrationRangeEndIndex > i ? allNodes[hydrationRangeEndIndex] ?? null : void 0);
+					if (synced && isRangeStart(synced)) {
+						allNodes.splice(i, Math.max(1, hydrationRangeEndIndex - i), synced);
+						continue;
+					}
+					if (synced && synced !== currentNode && synced.nextSibling === currentNode) {
+						allNodes.splice(i, 0, synced);
+						continue;
+					}
+					if (!synced) {
+						const dom = domHost.createDOMNode(next, parentNamespace);
+						if (dom) {
+							teardownNodeSubtree(currentEl);
+							parent.replaceChild(dom, currentNode);
+						}
+					}
+				}
+			} else {
+				if (typeof next.type === "function") {
+					const remainingExpected = newChildren.length - i - 1;
+					const hydrationRangeEndIndex = allNodes.length - remainingExpected;
+					const synced = trySyncComponentChild(currentNode, next, hydrationRangeEndIndex > i ? allNodes[hydrationRangeEndIndex] ?? null : void 0);
+					if (synced && isRangeStart(synced)) {
+						allNodes.splice(i, Math.max(1, hydrationRangeEndIndex - i), synced);
+						continue;
+					}
+					if (synced && synced !== currentNode && synced.nextSibling === currentNode) {
+						allNodes.splice(i, 0, synced);
+						continue;
 					}
-				});
-				continue;
-			}
-			if (hydrationDirectListenerDepth > 0 && !existingListeners?.has(listenerKey) && !getDelegatedHandlerForElement(el, eventName)) {
-				addTrackedListener(el, eventName, value, eventCapture, false, true);
-				continue;
-			}
-			const useDelegation = !preserveHydrationDirect && !eventCapture && isEventDelegationEnabled() && isDelegatedEvent(eventName);
-			if (useDelegation) (desiredDelegatedEventNames ??= /* @__PURE__ */ new Set()).add(eventName);
-			if (useDelegation) {
-				const existingDelegated = getDelegatedHandlerForElement(el, eventName);
-				if (existingDelegated?.original === value) continue;
-				if (existingDelegated && updateDelegatedListener(el, eventName, value, value, void 0)) continue;
-				addDelegatedListener(el, eventName, value, value, void 0);
-				continue;
-			}
-			(desiredListenerKeys ??= /* @__PURE__ */ new Set()).add(listenerKey);
-			const existing = existingListeners?.get(listenerKey);
-			if (existing && existing.original === value) continue;
-			if (existing) {
-				if (useDelegation && existing.isDelegated && updateDelegatedListener(el, eventName, value, value, void 0)) {
-					existing.handler = value;
-					existing.original = value;
-					existing.options = void 0;
-					continue;
+					if (synced) continue;
 				}
-				if (!useDelegation && !existing.isDelegated && existing.updateHandler) {
-					existing.updateHandler(value);
-					existing.original = value;
-					continue;
+				const dom = domHost.createDOMNode(next, parentNamespace);
+				if (dom) {
+					teardownNodeSubtree(currentNode);
+					parent.replaceChild(dom, currentNode);
 				}
-				if (existing.isDelegated) removeDelegatedListener(el, existing.eventName);
-				else if (existing.options !== void 0) el.removeEventListener(existing.eventName, existing.handler, existing.options);
-				else el.removeEventListener(existing.eventName, existing.handler);
-			}
-			const options = getEventListenerOptions(eventName, eventCapture);
-			const mutableHandler = createMutableWrappedHandler(value, true);
-			const trackedHandler = mutableHandler.handler;
-			if (options !== void 0) el.addEventListener(eventName, trackedHandler, options);
-			else el.addEventListener(eventName, trackedHandler);
-			const listenerEntry = {
-				handler: trackedHandler,
-				original: value,
-				eventName,
-				options,
-				isDelegated: false,
-				updateHandler: mutableHandler?.updateHandler
-			};
-			if (!elementListeners.has(el)) elementListeners.set(el, /* @__PURE__ */ new Map());
-			elementListeners.get(el).set(listenerKey, listenerEntry);
-		} else applyScalarPropValue(el, key, value, domVNode.type);
-	}
-	removeStaleAttributes(el, domVNode, props);
-	if (existingListeners && existingListeners.size > 0) if (desiredListenerKeys === null) {
-		existingListeners.forEach((entry) => {
-			if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
-			else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
-			else el.removeEventListener(entry.eventName, entry.handler);
-		});
-		elementListeners.delete(el);
-	} else {
-		existingListeners.forEach((entry, listenerKey) => {
-			if (!desiredListenerKeys.has(listenerKey)) {
-				if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
-				else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
-				else el.removeEventListener(entry.eventName, entry.handler);
-				existingListeners.delete(listenerKey);
-			}
-		});
-		if (existingListeners.size === 0) elementListeners.delete(el);
-	}
-	const delegatedHandlers = getDelegatedHandlersForElement(el);
-	if (delegatedHandlers && delegatedHandlers.size > 0) {
-		if (desiredDelegatedEventNames === null) for (const eventName of delegatedHandlers.keys()) removeDelegatedListener(el, eventName);
-		else for (const eventName of delegatedHandlers.keys()) if (!desiredDelegatedEventNames.has(eventName)) removeDelegatedListener(el, eventName);
-	}
-	if (existingReactiveProps && existingReactiveProps.size > 0) if (desiredReactivePropNames === null) {
-		existingReactiveProps.forEach((entry) => {
-			entry.cleanup();
-		});
-		elementReactivePropsCleanup.delete(el);
-	} else {
-		existingReactiveProps.forEach((entry, key) => {
-			if (!desiredReactivePropNames.has(key)) {
-				entry.cleanup();
-				existingReactiveProps.delete(key);
 			}
-		});
-		if (existingReactiveProps.size === 0) elementReactivePropsCleanup.delete(el);
+		}
+		return;
 	}
-}
-//#endregion
-//#region src/renderer/intrinsic-hydration-adoption.ts
-let hydrationAdoptionDepth = 0;
-function withIntrinsicHydrationAdoption(work) {
-	hydrationAdoptionDepth += 1;
-	try {
-		return work();
-	} finally {
-		hydrationAdoptionDepth -= 1;
+	if (newChildren.length === 1 && existing.length === 0 && parent.childNodes.length === 1) {
+		const firstNewChild = newChildren[0];
+		const firstExisting = parent.firstChild;
+		if ((typeof firstNewChild === "string" || typeof firstNewChild === "number") && firstExisting?.nodeType === 3) {
+			firstExisting.data = String(firstNewChild);
+			return;
+		}
 	}
-}
-function getDirectVNodeChildren(vnode) {
-	const children = vnode.props?.children ?? vnode.children;
-	if (children === null || children === void 0 || children === false) return [];
-	return Array.isArray(children) ? children : [children];
-}
-function canAdoptMatchingIntrinsicSubtree(element, vnode) {
-	if (typeof vnode.type !== "string" || !tagNamesEqualIgnoreCase$1(element.tagName, vnode.type) || hasAnyElementBindingState(element) || extractKey(vnode) !== void 0) return false;
-	const props = vnode.props || {};
-	if (!hasMatchingStaticPropsIgnoringEvents(element, props, vnode.type)) return false;
-	for (const key in props) {
-		const value = props[key];
-		const eventProp = parseEventProp(key);
-		if (eventProp && typeof value !== "function") return false;
-		if (!eventProp && key !== "ref" && typeof value === "function") return false;
+	if (existing.length === 0 && parent.childNodes.length > 0) {
+		for (let n = parent.firstChild; n;) {
+			const next = n.nextSibling;
+			teardownNodeSubtree(n);
+			n = next;
+		}
+		parent.textContent = "";
 	}
-	const children = getDirectVNodeChildren(vnode);
-	if (element.childNodes.length !== children.length) return false;
-	for (let index = 0; index < children.length; index += 1) {
-		const child = children[index];
-		const current = element.childNodes[index];
-		if (typeof child === "string" || typeof child === "number") {
-			if (current.nodeType !== 3 || current.data !== String(child)) return false;
+	const max = Math.max(existing.length, newChildren.length);
+	for (let i = 0; i < max; i++) {
+		const current = existing[i];
+		const next = newChildren[i];
+		const nextIsEmpty = isEmptyChild(next);
+		if (nextIsEmpty && current) {
+			teardownNodeSubtree(current);
+			current.remove();
 			continue;
 		}
-		if (!_isDOMElement(child) || typeof child.type !== "string" || !(current instanceof Element) || extractKey(child) !== void 0 || !canAdoptMatchingIntrinsicSubtree(current, child)) return false;
-	}
-	return true;
-}
-function adoptMatchingIntrinsicSubtree(element, vnode) {
-	const props = vnode.props || {};
-	let hasBindings = Object.prototype.hasOwnProperty.call(props, "ref");
-	for (const key in props) if (parseEventProp(key)) {
-		hasBindings = true;
-		break;
-	}
-	if (hasBindings) runRetainedElementUpdate(element, () => void 0, () => applyMatchingElementBindings(element, props), void 0, true);
-	const children = getDirectVNodeChildren(vnode);
-	for (let index = 0; index < children.length; index += 1) {
-		const child = children[index];
-		if (_isDOMElement(child)) adoptMatchingIntrinsicSubtree(element.childNodes[index], child);
+		if (!current && !nextIsEmpty) {
+			const dom = domHost.createDOMNode(next, parentNamespace);
+			if (dom) parent.appendChild(dom);
+			continue;
+		}
+		if (!current || nextIsEmpty) continue;
+		if (typeof next === "string" || typeof next === "number") {
+			const textNode = document.createTextNode(String(next));
+			teardownNodeSubtree(current);
+			parent.replaceChild(textNode, current);
+		} else if (_isDOMElement(next)) {
+			if (typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) domHost.updateElementFromVnode(current, next, true, forceUpdate);
+			else {
+				const dom = domHost.createDOMNode(next, parentNamespace);
+				if (dom) {
+					teardownNodeSubtree(current);
+					parent.replaceChild(dom, current);
+				}
+			}
+			else if (!trySyncComponentChild(current, next)) {
+				const dom = domHost.createDOMNode(next, parentNamespace);
+				if (dom) {
+					teardownNodeSubtree(current);
+					if (current.parentNode === parent) parent.replaceChild(dom, current);
+					else if (dom.parentNode !== parent) parent.insertBefore(dom, parent.children[i] ?? null);
+				}
+			}
+		} else {
+			const dom = domHost.createDOMNode(next);
+			if (dom) {
+				teardownNodeSubtree(current);
+				parent.replaceChild(dom, current);
+			}
+		}
 	}
 }
-function tryAdoptMatchingIntrinsicSubtree(element, vnode) {
-	if (hydrationAdoptionDepth === 0) return false;
-	if (!canAdoptMatchingIntrinsicSubtree(element, vnode)) return false;
-	adoptMatchingIntrinsicSubtree(element, vnode);
-	return true;
-}
 //#endregion
 //#region src/renderer/evaluate-reconcile.ts
 function getRetainedHostOwnerChain(host, owner) {
@@ -4350,8 +4406,13 @@ function checkVNodeShapeChanged(dom, vnode) {
 	if (typeof vnode.type !== "string") return true;
 	return dom.tagName.toLowerCase() !== vnode.type.toLowerCase();
 }
+function canAdoptHydratedElement(dom, vnode) {
+	if (!_isDOMElement(vnode)) return false;
+	if (typeof vnode.type === "function") return true;
+	return !checkVNodeShapeChanged(dom, vnode);
+}
 function adoptHydratedRange(parent, scope, before, vnode) {
-	if (!scope.hydrationPending || !before || !isRangeStart(before)) return null;
+	if (!isHydrationAdoptionScopeActive() || !scope.hydrationPending || !before || !isRangeStart(before)) return null;
 	const end = findRangeEnd(before);
 	if (!end || end.parentNode !== parent) return null;
 	const range = {
@@ -4518,7 +4579,7 @@ function syncControlBoundaryInMixedParent(parent, controlState, childrenVNodes,
 			const item = controlState.orderedItems[index];
 			const vnode = childrenVNodes[index];
 			if (!item || vnode === void 0) continue;
-			if (item.scope.hydrationPending && !item.scope.range && syncBefore instanceof Element && getMaterializedKey(syncBefore) === controlState.orderedKeys[index] && !checkVNodeShapeChanged(syncBefore, vnode)) {
+			if (item.scope.hydrationPending && !item.scope.range && syncBefore instanceof Element && getMaterializedKey(syncBefore) === controlState.orderedKeys[index] && canAdoptHydratedElement(syncBefore, vnode)) {
 				assignScopeRange(item.scope, {
 					start: syncBefore,
 					end: syncBefore,
@@ -4548,6 +4609,14 @@ function syncControlBoundaryInMixedParent(parent, controlState, childrenVNodes,
 	}
 	const activeScope = controlState.activeScope;
 	const activeVNode = childrenVNodes[0];
+	if (activeScope?.hydrationPending && activeVNode !== void 0 && !activeScope.range && controlState.lastRemovedRanges.length === 0 && before instanceof Element && canAdoptHydratedElement(before, activeVNode)) {
+		assignScopeRange(activeScope, {
+			start: before,
+			end: before,
+			single: true
+		});
+		activeScope.hydrationPending = false;
+	}
 	const nextRange = activeScope && activeVNode !== void 0 ? syncControlBoundaryScopeDom(parent, activeScope, activeVNode, before, controlState.lastRemovedRanges.length === 0) : null;
 	for (const range of controlState.lastRemovedRanges) if (range !== nextRange) removeRange(range, teardownBoundaryRangeNode);
 	for (const node of controlState.lastRemovedNodes) if (node.parentNode === parent) teardownBoundaryRangeNode(node);
@@ -4800,12 +4869,60 @@ function unwrapStagingHost(staging, parent, restoreFocus) {
 function createAttributeFreeStagingHost(parent) {
 	return parent.ownerDocument.createElementNS(parent.namespaceURI, parent.localName);
 }
+function isAutomaticPortalHost(node) {
+	const host = node;
+	const instances = new Set(host.__ASKR_INSTANCES ?? []);
+	if (host.__ASKR_INSTANCE) instances.add(host.__ASKR_INSTANCE);
+	return instances.size > 0 && Array.from(instances).some((candidate) => candidate.props.__askrAutoDefaultPortal === true);
+}
+function adoptHydratedComponentRange(existingHost, instance, result, endExclusive, forceChildrenUpdate, retainedInstances) {
+	const parent = existingHost.parentNode;
+	if (!(parent instanceof Element) || endExclusive !== null && endExclusive.parentNode !== parent) return null;
+	if (endExclusive !== null) {
+		let current = existingHost;
+		while (current && current !== endExclusive) current = current.nextSibling;
+		if (current !== endExclusive) return null;
+	}
+	const start = existingHost.ownerDocument.createComment(RANGE_START_MARKER);
+	const end = existingHost.ownerDocument.createComment(RANGE_END_MARKER);
+	parent.insertBefore(start, existingHost);
+	parent.insertBefore(end, endExclusive);
+	registerRange({
+		start,
+		end,
+		single: false
+	}, instance);
+	const host = start;
+	const owners = new Set(retainedInstances);
+	owners.add(instance);
+	host.__ASKR_INSTANCE = instance;
+	host.__ASKR_INSTANCES = Array.from(owners);
+	instance.target = null;
+	instance._placeholder = start;
+	mountInstanceInline(instance, null);
+	const registered = registerLifecycleTransaction({}, () => {}, () => {
+		start.parentNode?.removeChild(start);
+		end.parentNode?.removeChild(end);
+	});
+	try {
+		if (!syncComponentFragmentRange(host, instance, result, forceChildrenUpdate)) throw new Error("[askr] Failed to adopt hydrated component range.");
+	} catch (error) {
+		if (!registered) {
+			start.remove();
+			end.remove();
+		}
+		throw error;
+	}
+	return start;
+}
 function syncComponentFragmentRange(host, instance, result, forceUpdate) {
-	if (!isFragmentVNode(result)) return false;
+	if (!isTransparentComponentRangeResult(result)) return false;
 	const range = getOwnedRange(instance);
 	const parent = range?.start.parentNode;
 	if (!range || range.single || range.start !== host || !(parent instanceof Element)) return false;
 	const restoreFocus = captureRangeFocus(range, parent);
+	const normalizedChildren = normalizeComponentChildren(result);
+	const preserveForeignHosts = Array.isArray(result);
 	const staging = createAttributeFreeStagingHost(parent);
 	try {
 		parent.insertBefore(staging, range.end);
@@ -4818,10 +4935,15 @@ function syncComponentFragmentRange(host, instance, result, forceUpdate) {
 		restoreFocus();
 		return false;
 	}
-	while (range.start.nextSibling && range.start.nextSibling !== staging) staging.appendChild(range.start.nextSibling);
+	let current = range.start.nextSibling;
+	while (current && current !== staging) {
+		const next = current.nextSibling;
+		if (!preserveForeignHosts || !isAutomaticPortalHost(current)) staging.appendChild(current);
+		current = next;
+	}
 	const rollbackStaging = registerLifecycleTransaction({}, () => {}, () => unwrapStagingHost(staging, parent, restoreFocus));
 	try {
-		getRendererDOMHost().updateElementChildren(staging, normalizeComponentChildren(result), forceUpdate);
+		getRendererDOMHost().updateElementChildren(staging, normalizedChildren, forceUpdate);
 	} catch (error) {
 		if (!rollbackStaging) unwrapStagingHost(staging, parent, restoreFocus);
 		throw error;
@@ -5029,11 +5151,19 @@ function inheritComponentKey(target, source) {
 	}
 	return target;
 }
+function extractComponentIdentityKey(node) {
+	const publicKey = extractKey(node);
+	if (publicKey !== void 0) return publicKey;
+	if (typeof node !== "object" || node === null) return;
+	const internalKey = node.props?.["__askrIdentityKey"];
+	if (internalKey === void 0 || internalKey === null) return;
+	return typeof internalKey === "symbol" ? String(internalKey) : internalKey;
+}
 function setComponentOwnershipIdentity(instance, node, parent, wrapperDepth = 0, position) {
 	instance._vnodeOwner = typeof node === "object" && node !== null ? node : void 0;
 	instance._vnodeParent = parent;
 	instance._vnodeParentGeneration = parent?._ownershipGeneration;
-	const key = extractKey(node);
+	const key = extractComponentIdentityKey(node);
 	if (key === void 0) delete instance._vnodeKey;
 	else instance._vnodeKey = key;
 	instance._vnodePosition = position;
@@ -5044,7 +5174,7 @@ function findHostInstanceByType(host, type, node, parent, wrapperDepth) {
 	if (instances && instances.length > 0) {
 		const vnodeOwner = getVNodeComponentInstance(node);
 		if (vnodeOwner && vnodeOwner.fn === type && instances.includes(vnodeOwner)) return vnodeOwner;
-		const key = extractKey(node);
+		const key = extractComponentIdentityKey(node);
 		const identityMatches = instances.filter((instance) => {
 			if (instance.fn !== type) return false;
 			if (parent !== void 0 && instance._vnodeParent !== parent) return false;
@@ -5060,7 +5190,7 @@ function findHostInstanceByType(host, type, node, parent, wrapperDepth) {
 	}
 	if (host.__ASKR_INSTANCE?.fn === type) {
 		const instance = host.__ASKR_INSTANCE;
-		const key = extractKey(node);
+		const key = extractComponentIdentityKey(node);
 		if ((parent === void 0 || instance._vnodeParent === parent) && (key === void 0 || instance._vnodeKey === key) && (wrapperDepth === void 0 || instance._wrapperDepth === wrapperDepth)) return instance;
 		if (node === void 0 && parent === void 0 && wrapperDepth === void 0) return instance;
 	}
@@ -5068,8 +5198,9 @@ function findHostInstanceByType(host, type, node, parent, wrapperDepth) {
 }
 /**
 * Resolve an instance on a comment host only when the vnode carries durable
-* identity. Fresh unkeyed null components intentionally supersede the old
-* generation instead of falling back to type-only reuse.
+* identity. An unkeyed multi-node range can also move through transparent
+* wrapper owners while its recorded owner generation remains live. Fresh
+* unkeyed null components still supersede the old generation.
 */
 function findStableHostInstanceByType(host, type, node, parent, wrapperDepth) {
 	const instances = new Set(host.__ASKR_INSTANCES ?? []);
@@ -5077,10 +5208,21 @@ function findStableHostInstanceByType(host, type, node, parent, wrapperDepth) {
 	const parentGeneration = parent?._ownershipGeneration;
 	const vnodeOwner = getVNodeComponentInstance(node);
 	if (vnodeOwner?.fn === type && instances.has(vnodeOwner) && vnodeOwner._vnodeParent === parent && vnodeOwner._vnodeParentGeneration === parentGeneration) return vnodeOwner;
-	const key = extractKey(node);
-	if (key === void 0) return null;
+	const key = extractComponentIdentityKey(node);
+	if (key === void 0) {
+		const rangeMatches = Array.from(instances).filter((instance) => {
+			const range = getOwnedRange(instance);
+			return instance.fn === type && instance._vnodeParent !== parent && instance._vnodeParent != null && instance._vnodeParentGeneration === instance._vnodeParent._ownershipGeneration && instance._vnodeKey === void 0 && instance._wrapperDepth === wrapperDepth && (range?.single === false && range.start === host || host instanceof Comment && host.data === "askr-range-start" && instance._placeholder === host);
+		});
+		return rangeMatches.length === 1 ? rangeMatches[0] : null;
+	}
 	const matches = Array.from(instances).filter((instance) => instance.fn === type && instance._vnodeParent === parent && instance._vnodeParentGeneration === parentGeneration && instance._vnodeKey === key && instance._wrapperDepth === wrapperDepth);
-	return matches.length > 0 ? matches[matches.length - 1] : null;
+	if (matches.length > 0) return matches[matches.length - 1];
+	const rangeMatches = Array.from(instances).filter((instance) => {
+		const range = getOwnedRange(instance);
+		return instance.fn === type && instance._vnodeParent !== parent && instance._vnodeParent != null && instance._vnodeParentGeneration === instance._vnodeParent._ownershipGeneration && instance._vnodeKey === key && instance._wrapperDepth === wrapperDepth && (range?.single === false && range.start === host || host instanceof Comment && host.data === "askr-range-start" && instance._placeholder === host);
+	});
+	return rangeMatches.length === 1 ? rangeMatches[0] : null;
 }
 //#endregion
 //#region src/renderer/component-host-replacement.ts
@@ -5223,6 +5365,40 @@ function registerVNodeComponentInstanceRollback(node, previousInstance, provisio
 }
 //#endregion
 //#region src/renderer/component-host-results.ts
+function retainReplacementOwnerChain(host, owner, retainedInstances) {
+	const componentHost = host;
+	const next = [...componentHost.__ASKR_INSTANCES ?? []];
+	for (const instance of retainedInstances) if (!next.includes(instance)) next.push(instance);
+	componentHost.__ASKR_INSTANCES = next;
+	componentHost.__ASKR_INSTANCE = owner;
+}
+function adoptEmptySSRPortalHydrationHost(host, instance, retainedInstances, result) {
+	if (!isSSRPortalHydrationAnchor(host) || result !== null && result !== void 0 && result !== false) return false;
+	const instanceHost = host;
+	instanceHost.__ASKR_INSTANCE = instance;
+	instanceHost.__ASKR_INSTANCES = Array.from(/* @__PURE__ */ new Set([instance, ...retainedInstances]));
+	instance._placeholder = instanceHost;
+	mountInstanceInline(instance, null);
+	retainReplacementOwnerChain(instanceHost, instance, retainedInstances);
+	markHydrationHostAdopted(instanceHost);
+	return true;
+}
+function materializeEmptyHydrationPlaceholder(existingHost, instance, retainedInstances, result, preserveHydrationCursor) {
+	if (!preserveHydrationCursor && !isSSRPortalHydrationAnchor(existingHost) || result !== null && result !== void 0 && result !== false) return null;
+	const placeholder = isSSRPortalHydrationAnchor(existingHost) ? existingHost : (existingHost.ownerDocument ?? document).createComment("");
+	if (placeholder !== existingHost) existingHost.parentNode?.insertBefore(placeholder, existingHost);
+	const host = placeholder;
+	host.__ASKR_INSTANCE = instance;
+	host.__ASKR_INSTANCES = [instance];
+	instance._placeholder = placeholder;
+	mountInstanceInline(instance, null);
+	retainReplacementOwnerChain(placeholder, instance, retainedInstances);
+	return placeholder;
+}
+function itemInstanceHydrationComplete(host) {
+	const scope = host.__ASKR_INSTANCE?.scope;
+	if (scope) scope.hydrationPending = false;
+}
 function materializeComponentResultNode(childInstance, result, parentNamespace) {
 	const dom = getRendererDOMHost().createComponentResultNode(childInstance.fn, result, parentNamespace);
 	if (dom instanceof Element) {
@@ -5240,7 +5416,17 @@ function materializeComponentResultNode(childInstance, result, parentNamespace)
 		mountInstanceInline(childInstance, null);
 		return placeholder;
 	}
-	if (!_isDOMElement(result) || result.type !== __CONTROL_BOUNDARY__ && !isFragmentVNode(result)) {
+	if (dom instanceof Comment) {
+		const host = dom;
+		const instances = host.__ASKR_INSTANCES ?? [];
+		if (!instances.includes(childInstance)) instances.push(childInstance);
+		host.__ASKR_INSTANCES = instances;
+		host.__ASKR_INSTANCE = instances[0] ?? childInstance;
+		childInstance._placeholder = dom;
+		mountInstanceInline(childInstance, null);
+		return dom;
+	}
+	if (!isTransparentComponentResult(result)) {
 		const host = document.createElement("div");
 		host.appendChild(dom);
 		host.__ASKR_WRAPPER_HOST = true;
@@ -5364,15 +5550,16 @@ function resolveWrapperHostResult(host, result, snapshot, retainedInstances) {
 }
 //#endregion
 //#region src/renderer/component-host.ts
-function syncComponentElement(currentDom, node, type, props, parentNamespace, forceChildrenUpdate = false, retainedHostInstances) {
+function syncComponentElement(currentDom, node, type, props, parentNamespace, forceChildrenUpdate = false, retainedHostInstances, hydrationRangeEnd, preserveHydrationCursorOnEmpty = false) {
 	const existingHost = currentDom instanceof Element || currentDom instanceof Comment ? currentDom : null;
 	const existingInstance = existingHost ? existingHost instanceof Comment ? findStableHostInstanceByType(existingHost, type, node, getCurrentInstance(), 0) : findHostInstanceByType(existingHost, type, node, getCurrentInstance(), 0) : null;
 	if (!existingHost) return null;
+	if (!canReconcileComponentHost(existingHost, Boolean(existingInstance))) return null;
 	const domHost = getRendererDOMHost();
 	if (!existingInstance || existingInstance.fn !== type) {
-		if (!(existingHost instanceof Element)) return null;
+		if (!(existingHost instanceof Element) && !isSSRPortalHydrationAnchor(existingHost)) return null;
 		const snapshot = getVNodeContextFrame(node) || getCurrentContextFrame() || null;
-		const hydrationInstance = createComponentInstance(nextComponentInstanceId(), type, props || {}, existingHost);
+		const hydrationInstance = createComponentInstance(nextComponentInstanceId(), type, props || {}, existingHost instanceof Element ? existingHost : null);
 		setComponentOwnershipIdentity(hydrationInstance, node, getCurrentInstance(), 0);
 		hydrationInstance.isRoot = isRouteRootComponentVNode(node);
 		hydrationInstance.portalScope = getCurrentInstance()?.portalScope ?? hydrationInstance.portalScope;
@@ -5388,7 +5575,13 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 			const result = withContext(snapshot, () => renderComponentInline(hydrationInstance));
 			if (isPromiseLike(result)) throw new Error("Async components are not supported. Components must return synchronously.");
 			const scopedResult = markVNodeTreeWithContextFrame(result, snapshot ?? null);
-			if (scopedResult && typeof scopedResult === "object" && "type" in scopedResult && typeof scopedResult.type === "string" && tagNamesEqualIgnoreCase$1(existingHost.tagName, scopedResult.type)) {
+			const emptyPlaceholder = materializeEmptyHydrationPlaceholder(existingHost, hydrationInstance, liveRetainedInstances, scopedResult, preserveHydrationCursorOnEmpty);
+			if (emptyPlaceholder) return emptyPlaceholder;
+			if (hydrationRangeEnd !== void 0 && isTransparentComponentRangeResult(scopedResult)) {
+				const adoptedHost = adoptHydratedComponentRange(existingHost, hydrationInstance, scopedResult, hydrationRangeEnd, forceChildrenUpdate || hydrationInstance.mounted === false, liveRetainedInstances);
+				if (adoptedHost) return adoptedHost;
+			}
+			if (existingHost instanceof Element && scopedResult && typeof scopedResult === "object" && "type" in scopedResult && typeof scopedResult.type === "string" && tagNamesEqualIgnoreCase$1(existingHost.tagName, scopedResult.type)) {
 				withContext(snapshot, () => {
 					domHost.updateElementFromVnode(existingHost, inheritComponentKey(scopedResult, node), true, forceChildrenUpdate || hydrationInstance.mounted === false);
 					materializeKey(existingHost, node, props);
@@ -5398,7 +5591,12 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 				return existingHost;
 			}
 			const resolvedResult = resolveHostNestedComponentResult(existingHost, hydrationInstance, scopedResult, snapshot ?? null, liveRetainedInstances);
-			if (_isDOMElement(resolvedResult) && typeof resolvedResult.type === "string" && tagNamesEqualIgnoreCase$1(existingHost.tagName, resolvedResult.type)) {
+			if (adoptEmptySSRPortalHydrationHost(existingHost, hydrationInstance, liveRetainedInstances, resolvedResult)) return existingHost;
+			if (hydrationRangeEnd !== void 0 && isTransparentComponentRangeResult(resolvedResult)) {
+				const adoptedHost = adoptHydratedComponentRange(existingHost, hydrationInstance, resolvedResult, hydrationRangeEnd, forceChildrenUpdate || hydrationInstance.mounted === false, liveRetainedInstances);
+				if (adoptedHost) return adoptedHost;
+			}
+			if (existingHost instanceof Element && _isDOMElement(resolvedResult) && typeof resolvedResult.type === "string" && tagNamesEqualIgnoreCase$1(existingHost.tagName, resolvedResult.type)) {
 				withContext(snapshot, () => {
 					domHost.updateElementFromVnode(existingHost, inheritComponentKey(resolvedResult, node), true, forceChildrenUpdate || hydrationInstance.mounted === false);
 					materializeKey(existingHost, node, props);
@@ -5445,6 +5643,7 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 		return existingHost;
 	}
 	const resolvedResult = resolveHostNestedComponentResult(existingHost, existingInstance, scopedResult, snapshot ?? null, liveRetainedInstances);
+	if (existingHost instanceof Comment && syncComponentFragmentRange(existingHost, existingInstance, resolvedResult, forceChildrenUpdate || existingInstance.mounted === false)) return existingHost;
 	if (existingHost instanceof Comment && (resolvedResult === null || resolvedResult === void 0 || resolvedResult === false)) {
 		retainReplacementOwnerChain(existingHost, existingInstance, liveRetainedInstances);
 		for (const instance of liveRetainedInstances) if (instance.target === null || instance._placeholder === existingHost) {
@@ -5465,20 +5664,6 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 		retainReplacementOwnerChain(replacement, existingInstance, liveRetainedInstances);
 	});
 }
-function retainReplacementOwnerChain(host, owner, retainedInstances) {
-	const componentHost = host;
-	const next = [...componentHost.__ASKR_INSTANCES ?? []];
-	for (const instance of retainedInstances) if (!next.includes(instance)) next.push(instance);
-	componentHost.__ASKR_INSTANCES = next;
-	componentHost.__ASKR_INSTANCE = owner;
-}
-function itemInstanceHydrationComplete(host) {
-	const instance = host.__ASKR_INSTANCE;
-	if (instance) {
-		const scope = instance.scope;
-		if (scope) scope.hydrationPending = false;
-	}
-}
 function createComponentElement(node, type, props, parentNamespace) {
 	const snapshot = getVNodeContextFrame(node) || getCurrentContextFrame();
 	const componentFn = type;
@@ -6529,6 +6714,10 @@ function replaceComponentRange(instance, result, placeholder) {
 	const parent = placeholder.parentNode;
 	if (!previousRange || previousRange.single || previousRange.start !== placeholder || !(parent instanceof Element)) return null;
 	if (syncComponentFragmentRange(placeholder, instance, result, false)) return placeholder;
+	if (_isDOMElement(result) && hasTransparentComponentResult(result.type)) {
+		const retainedInstances = createRetainedHostInstanceSet(instance);
+		if (syncComponentFragmentRange(placeholder, instance, resolveHostNestedComponentResult(placeholder, instance, result, getVNodeContextFrame(result) ?? instance.ownerFrame ?? null, retainedInstances), false)) return placeholder;
+	}
 	const next = createDetachedRange(materializeComponentResultNode(instance, result, getParentNamespace(parent)), instance);
 	const nextHost = next.range.start;
 	nextHost.__ASKR_INSTANCE = instance;