@vue/runtime-vapor 3.6.0-beta.12 → 3.6.0-beta.14

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

@@ -1,11 +1,11 @@
 /**
-  * @vue/runtime-vapor v3.6.0-beta.12
+  * @vue/runtime-vapor v3.6.0-beta.14
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
-import { EffectScope, Fragment, NULL_DYNAMIC_COMPONENT, Static, TransitionPropsValidators, VaporSlot, VueElementBase, activate, baseApplyTranslation, baseEmit, baseNormalizePropsOptions, baseResolveTransitionHooks, baseUseCssVars, callPendingCbs, callWithAsyncErrorHandling, callWithErrorHandling, checkTransitionMode, createAppAPI, createAsyncComponentContext, createCanSetSetupRefChecker, createInternalObject, createVNode, currentInstance, currentInstance as currentInstance$1, deactivate, devtoolsComponentAdded, endMeasure, ensureHydrationRenderer, ensureRenderer, ensureValidVNode, ensureVaporSlotFallback, expose, flushOnAppMount, forceReflow, getAttributeMismatch, getComponentName, getFunctionalFallthrough, getInheritedScopeIds, getTransitionRawChildren, handleError, handleMovedChildren, hasCSSTransform, initFeatureFlags, invalidateMount, invokeDirectiveHook, isAsyncWrapper, isEmitListener, isHydrating, isKeepAlive, isMapEqual, isMismatchAllowed, isRef, isSetEqual, isTeleportDeferred, isTeleportDisabled, isTemplateNode, isTemplateRefKey, isVNode, isValidHtmlOrSvgAttribute, knownTemplateRefs, leaveCbKey, markAsyncBoundary, matches, mergeProps, nextUid, normalizeContainer, normalizeRef, normalizeVNode, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, onUpdated, patchStyle, performAsyncHydrate, performTransitionEnter, performTransitionLeave, popWarningContext, pushWarningContext, queueJob, queuePostFlushCb, registerHMR, renderSlot, resetShapeFlag, resolveDynamicComponent, resolvePropValue, resolveTeleportTarget, resolveTransitionProps, setCurrentInstance, setCurrentRenderingInstance, setDevtoolsHook, setRef, setTransitionHooks, setVarsOnNode, shallowReactive, shallowRef, shouldSetAsProp, shouldSetAsPropForVueCE, shouldUpdateComponent, simpleSetCurrentInstance, startMeasure, toClassSet, toStyleMap, unregisterHMR, unsafeToTrustedHTML, useAsyncComponentState, useTransitionState, vModelCheckboxInit, vModelCheckboxUpdate, vModelGetValue, vModelSelectInit, vModelSetSelected, vModelTextInit, vModelTextUpdate, vShowHidden, vShowOriginalDisplay, validateProps, warn, warnExtraneousAttributes, warnPropMismatch, watch, withAsyncContext as withAsyncContext$1, withCtx, xlinkNS } from "@vue/runtime-dom";
+import { EffectScope, Fragment, NULL_DYNAMIC_COMPONENT, Static, TransitionPropsValidators, VaporSlot, VueElementBase, activate, baseApplyTranslation, baseEmit, baseNormalizePropsOptions, baseResolveTransitionHooks, baseUseCssVars, callPendingCbs, callWithAsyncErrorHandling, callWithErrorHandling, checkTransitionMode, createAppAPI, createAsyncComponentContext, createCanSetSetupRefChecker, createInternalObject, createVNode, currentInstance, currentInstance as currentInstance$1, deactivate, devtoolsComponentAdded, endMeasure, ensureHydrationRenderer, ensureRenderer, ensureValidVNode, ensureVaporSlotFallback, expose, flushOnAppMount, forceReflow, getAttributeMismatch, getComponentName, getFunctionalFallthrough, getInheritedScopeIds, getTransitionRawChildren, handleError, handleMovedChildren, hasCSSTransform, initFeatureFlags, invalidateMount, invokeDirectiveHook, isAsyncWrapper, isEmitListener, isHydrating, isKeepAlive, isMapEqual, isMismatchAllowed, isRef, isSetEqual, isTeleportDeferred, isTeleportDisabled, isTemplateNode, isTemplateRefKey, isVNode, isValidHtmlOrSvgAttribute, knownTemplateRefs, leaveCbKey, markAsyncBoundary, matches, mergeProps, nextUid, normalizeContainer, normalizeRef, normalizeVNode, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onScopeDispose, onUpdated, patchStyle, performAsyncHydrate, performTransitionEnter, performTransitionLeave, popWarningContext, pushWarningContext, queueJob, queuePostFlushCb, registerHMR, renderSlot, resetShapeFlag, resolveComponent, resolveDynamicComponent, resolvePropValue, resolveTeleportTarget, resolveTransitionProps, setCurrentInstance, setCurrentRenderingInstance, setDevtoolsHook, setRef, setTransitionHooks, setVarsOnNode, shallowReactive, shallowRef, shouldSetAsProp, shouldSetAsPropForVueCE, shouldUpdateComponent, simpleSetCurrentInstance, startMeasure, toClassSet, toStyleMap, unregisterHMR, unsafeToTrustedHTML, useAsyncComponentState, useTransitionState, vModelCheckboxInit, vModelCheckboxUpdate, vModelGetValue, vModelSelectInit, vModelSetSelected, vModelTextInit, vModelTextUpdate, vShowHidden, vShowOriginalDisplay, validateProps, warn, warnExtraneousAttributes, warnPropMismatch, watch, withAsyncContext as withAsyncContext$1, withCtx, withKeys, withModifiers, xlinkNS } from "@vue/runtime-dom";
 import { EMPTY_ARR, EMPTY_OBJ, NO, NOOP, camelize, canSetValueDirectly, extend, getEscapedCssVarName, getGlobalThis, hasOwn, includeBooleanAttr, invokeArrayFns, isArray, isFunction, isObject, isOn, isPlainObject, isPromise, isReservedProp, isString, looseEqual, normalizeClass, normalizeCssVarValue, normalizeStyle, parseStringStyle, remove as remove$1, stringifyStyle, toDisplayString } from "@vue/shared";
-import { EffectScope as EffectScope$1, ReactiveEffect, computed, effectScope, getCurrentScope, isReactive, isReadonly, isRef as isRef$1, isShallow, markRaw, onEffectCleanup, onScopeDispose as onScopeDispose$1, pauseTracking, proxyRefs, resetTracking, setActiveSub, shallowReadArray, shallowRef as shallowRef$1, toRaw, toReactive, toReadonly, traverse, unref, watch as watch$1 } from "@vue/reactivity";
+import { EffectScope as EffectScope$1, ReactiveEffect, computed, effectScope, getCurrentScope, isReactive, isReadonly, isRef as isRef$1, isShallow, markRaw, onEffectCleanup, onScopeDispose as onScopeDispose$1, pauseTracking, proxyRefs, resetTracking, setActiveSub, shallowReactive as shallowReactive$1, shallowReadArray, shallowRef as shallowRef$1, toRaw, toReactive, toReadonly, traverse, unref, watch as watch$1 } from "@vue/reactivity";
 //#region packages/runtime-vapor/src/insertionState.ts
 let insertionParent;
 let insertionAnchor;
@@ -30,6 +30,7 @@ function resetInsertionState() {
 }
 //#endregion
 //#region packages/runtime-vapor/src/dom/hydration.ts
+const START_TAG_RE = /^<([^\s/>]+)/;
 let isHydratingEnabled = false;
 function setIsHydratingEnabled(value) {
 	isHydratingEnabled = value;
@@ -152,18 +153,18 @@ function exitHydrationCursor(cursor) {
 * Locate the first non-fragment-comment node and locate the next node
 * while handling potential fragments.
 */
-function adoptTemplateImpl(node, template) {
+function adoptTemplateImpl(node, template, adoptChildren = false, ns) {
 	if (!(template[0] === "<" && template[1] === "!")) {
 		if (template.trim() === "" && isComment(node, "]") && isComment(node.previousSibling, "[")) node.before(node = /* @__PURE__ */ createTextNode());
 		node = resolveHydrationTarget(node);
 	}
 	const type = node.nodeType;
-	if (type === 8 && !template.startsWith("<!") || type === 1 && !template.startsWith(`<` + node.tagName.toLowerCase())) node = handleMismatch(node, template);
+	if (type === 8 && !template.startsWith("<!") || type === 1 && !template.startsWith(`<` + node.tagName.toLowerCase())) node = handleMismatch(node, template, adoptChildren, ns);
 	advanceHydrationNode(node);
 	return node;
 }
-function locateNextNode(node) {
-	return isComment(node, "[") ? /* @__PURE__ */ _next(locateEndAnchor(node)) : isComment(node, "teleport start") ? /* @__PURE__ */ _next(locateEndAnchor(node, "teleport start", "teleport end")) : /* @__PURE__ */ _next(node);
+function nextLogicalSibling(node) {
+	return isComment(node, "[") ? locateEndAnchor(node).nextSibling : isComment(node, "teleport start") ? locateEndAnchor(node, "teleport start", "teleport end").nextSibling : node.nextSibling;
 }
 function locateHydrationNodeImpl(consumeFragmentStart = false) {
 	let node;
@@ -192,18 +193,15 @@ function locateHydrationBoundaryClose(node, closeHint = null) {
 	let close = closeHint;
 	if (!close || !isComment(close, "]")) if (isComment(node, "]")) close = node;
 	else {
-		let candidate = locateNextNode(node);
-		while (candidate && !isComment(candidate, "]")) candidate = locateNextNode(candidate);
+		let candidate = nextLogicalSibling(node);
+		while (candidate && !isComment(candidate, "]")) candidate = nextLogicalSibling(candidate);
 		close = candidate;
 	}
 	if (!close) return node;
 	return close;
 }
-function handleMismatch(node, template) {
-	if (!isMismatchAllowed(node.parentElement, 1)) {
-		(process.env.NODE_ENV !== "production" || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && warn(`Hydration node mismatch:\n- rendered on server:`, node, node.nodeType === 3 ? `(text)` : isComment(node, "[[") ? `(start of block node)` : ``, `\n- expected on client:`, template);
-		logMismatchError();
-	}
+function handleMismatch(node, template, adoptChildren, ns) {
+	warnHydrationNodeMismatch(node, template);
 	if (isComment(node, "[")) removeFragmentNodes(node);
 	const shouldPreserveAnchor = isHydrationAnchor(node);
 	const container = /* @__PURE__ */ parentNode(node);
@@ -211,17 +209,46 @@ function handleMismatch(node, template) {
 	if (!shouldPreserveAnchor) remove(node, container);
 	if (template[0] !== "<") return container.insertBefore(/* @__PURE__ */ createTextNode(template), next);
 	const t = /* @__PURE__ */ createElement("template");
-	t.innerHTML = template;
-	const newNode = (/* @__PURE__ */ _child(t.content)).cloneNode(true);
-	if (node.nodeType === 1) {
-		newNode.innerHTML = node.innerHTML;
-		Array.from(node.attributes).forEach((attr) => {
-			newNode.setAttribute(attr.name, attr.value);
-		});
+	let newNode;
+	if (ns) {
+		const tag = ns === 1 ? "svg" : "math";
+		t.innerHTML = `<${tag}>${template}</${tag}>`;
+		newNode = (/* @__PURE__ */ _child(/* @__PURE__ */ _child(t.content))).cloneNode(true);
+	} else {
+		t.innerHTML = template;
+		newNode = (/* @__PURE__ */ _child(t.content)).cloneNode(true);
+	}
+	if (adoptChildren && node.nodeType === 1 && !newNode.firstChild) {
+		let child = node.firstChild;
+		while (child) {
+			const nextChild = child.nextSibling;
+			newNode.appendChild(child);
+			child = nextChild;
+		}
 	}
 	container.insertBefore(newNode, next);
 	return newNode;
 }
+function validateHydrationTarget(node, template) {
+	let expectedType;
+	if (template[0] !== "<") expectedType = 3;
+	else if (template[1] === "!") expectedType = 8;
+	else expectedType = 1;
+	if (node.nodeType !== expectedType) {
+		warnHydrationNodeMismatch(node, template);
+		return;
+	}
+	if (expectedType !== 1) return;
+	const match = START_TAG_RE.exec(template);
+	const expectedTag = match && match[1];
+	if (expectedTag && node.tagName.toLowerCase() !== expectedTag.toLowerCase()) warnHydrationNodeMismatch(node, template);
+}
+function warnHydrationNodeMismatch(node, expected) {
+	if (!isMismatchAllowed(node.parentElement, 1)) {
+		(process.env.NODE_ENV !== "production" || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && warn(`Hydration node mismatch:\n- rendered on server:`, node, node.nodeType === 3 ? `(text)` : isComment(node, "[[") ? `(start of block node)` : ``, `\n- expected on client:`, expected);
+		logMismatchError();
+	}
+}
 let hasLoggedMismatchError = false;
 const logMismatchError = () => {
 	if (hasLoggedMismatchError) return;
@@ -263,7 +290,7 @@ function cleanupHydrationTail(node, container) {
 	}
 	let current = node;
 	while (current && current.parentNode === container) {
-		const next = locateNextNode(current);
+		const next = nextLogicalSibling(current);
 		removeHydrationNode(current);
 		current = next;
 	}
@@ -294,7 +321,7 @@ function finalizeHydrationBoundary(close) {
 	let hasRemovableNode = false;
 	while (cur && cur !== close) {
 		if (!isHydrationAnchor(cur)) hasRemovableNode = true;
-		cur = locateNextNode(cur);
+		cur = nextLogicalSibling(cur);
 	}
 	if (!cur) return;
 	if (!hasRemovableNode) {
@@ -303,7 +330,7 @@ function finalizeHydrationBoundary(close) {
 	}
 	warnHydrationChildrenMismatch(close.parentElement);
 	while (node && node !== close) {
-		const next = locateNextNode(node);
+		const next = nextLogicalSibling(node);
 		if (!isHydrationAnchor(node)) removeHydrationNode(node, close);
 		node = next;
 	}
@@ -386,7 +413,7 @@ function locateChildByLogicalIndex(parent, logicalIndex) {
 			child.$idx = logicalIndex;
 			return parent.$llc = child;
 		}
-		child = isComment(child, "[") ? locateEndAnchor(child).nextSibling : child.nextSibling;
+		child = nextLogicalSibling(child);
 		fromIndex++;
 	}
 	return null;
@@ -440,6 +467,66 @@ function propGetter(rawProps, key) {
 	return rawProps[key] && resolveSource(rawProps[key]);
 }
 //#endregion
+//#region packages/runtime-vapor/src/renderEffect.ts
+var RenderEffect = class extends ReactiveEffect {
+	constructor(render, noLifecycle = false) {
+		super(noLifecycle ? render : void 0);
+		this.render = render;
+		const instance = currentInstance;
+		if (!!(process.env.NODE_ENV !== "production") && !this.subs && !isVaporComponent(instance)) warn("renderEffect called without active EffectScope or Vapor instance.");
+		const job = () => {
+			if (this.dirty) this.run();
+		};
+		if (instance) {
+			if (!!(process.env.NODE_ENV !== "production") && !noLifecycle) {
+				this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
+				this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
+			}
+			if (!!(process.env.NODE_ENV !== "production")) (instance.renderEffects || (instance.renderEffects = [])).push(this);
+			job.i = instance;
+		}
+		this.job = job;
+		this.i = instance;
+		this.flags |= 128;
+		this.job.flags |= 2;
+	}
+	fn() {
+		const instance = this.i;
+		const scope = this.subs ? this.subs.sub : void 0;
+		const hasUpdateHooks = instance && (instance.bu || instance.u);
+		if (!!(process.env.NODE_ENV !== "production") && instance) startMeasure(instance, `renderEffect`);
+		const prev = setCurrentInstance(instance, scope);
+		try {
+			if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
+				instance.isUpdating = true;
+				try {
+					instance.bu && invokeArrayFns(instance.bu);
+					this.render();
+				} catch (err) {
+					instance.isUpdating = false;
+					throw err;
+				}
+				let updateJob = this.updateJob;
+				if (!updateJob) updateJob = this.updateJob = () => {
+					instance.isUpdating = false;
+					instance.u && invokeArrayFns(instance.u);
+				};
+				queuePostFlushCb(updateJob);
+			} else this.render();
+		} finally {
+			setCurrentInstance(...prev);
+			if (!!(process.env.NODE_ENV !== "production") && instance) endMeasure(instance, `renderEffect`);
+		}
+	}
+	notify() {
+		if (!(this.flags & 256)) queueJob(this.job, this.i ? this.i.uid : void 0);
+	}
+};
+function renderEffect(fn, noLifecycle = false) {
+	if (inOnceSlot) return fn();
+	new RenderEffect(fn, noLifecycle).run();
+}
+//#endregion
 //#region packages/runtime-vapor/src/componentProps.ts
 function resolveSource(source) {
 	return isFunction(source) ? resolveFunctionSource(source) : source;
@@ -461,6 +548,36 @@ function resolveFunctionSource(source) {
 	}
 	return source();
 }
+function snapshotRawProps(rawProps) {
+	const snapshot = Object.create(null);
+	for (const key in rawProps) if (key !== "$") {
+		const value = resolveSource(rawProps[key]);
+		snapshot[key] = () => value;
+	}
+	const dynamicSources = rawProps.$;
+	if (dynamicSources) {
+		const snapshotSources = [];
+		for (let i = 0; i < dynamicSources.length; i++) {
+			const source = dynamicSources[i];
+			const value = Object.create(null);
+			if (isFunction(source)) {
+				const resolved = resolveFunctionSource(source);
+				for (const key in resolved) value[key] = resolved[key];
+				snapshotSources[i] = () => value;
+			} else {
+				for (const key in source) {
+					const resolved = resolveSource(source[key]);
+					value[key] = () => resolved;
+				}
+				snapshotSources[i] = value;
+			}
+		}
+		const symbols = Object.getOwnPropertySymbols(dynamicSources);
+		for (let i = 0; i < symbols.length; i++) snapshotSources[symbols[i]] = dynamicSources[symbols[i]];
+		snapshot.$ = snapshotSources;
+	}
+	return snapshot;
+}
 function stabilizeDynamicSourceValue(oldValue, value) {
 	if (!isPlainObject(oldValue) || !isPlainObject(value)) return value;
 	const oldKeys = Object.keys(oldValue);
@@ -472,7 +589,7 @@ function stabilizeDynamicSourceValue(oldValue, value) {
 	}
 	return oldValue;
 }
-function getPropsProxyHandlers(comp, once) {
+function getPropsProxyHandlers(comp) {
 	if (comp.__propsHandlers) return comp.__propsHandlers;
 	const propsOptions = normalizePropsOptions(comp)[0];
 	const emitsOptions = normalizeEmitsOptions(comp);
@@ -490,7 +607,7 @@ function getPropsProxyHandlers(comp, once) {
 				source = dynamicSources[i];
 				isDynamic = isFunction(source);
 				source = isDynamic ? resolveFunctionSource(source) : source;
-				for (rawKey in source) if (camelize(rawKey) === key) return resolvePropValue(propsOptions, key, isDynamic ? source[rawKey] : resolveFunctionSource(source[rawKey]), instance, resolveDefault);
+				for (rawKey in source) if (camelize(rawKey) === key) return resolvePropValue(propsOptions, key, isDynamic ? source[rawKey] : resolveSource(source[rawKey]), instance, resolveDefault);
 			}
 		}
 		for (const rawKey in rawProps) if (camelize(rawKey) === key) return resolvePropValue(propsOptions, key, resolveSource(rawProps[rawKey]), instance, resolveDefault);
@@ -498,8 +615,8 @@ function getPropsProxyHandlers(comp, once) {
 	};
 	const withOnceCache = (getter) => {
 		return ((instance, key) => {
-			const cache = instance.oncePropsCache || (instance.oncePropsCache = {});
-			if (!(key in cache)) {
+			const cache = instance.oncePropsCache || (instance.oncePropsCache = Object.create(null));
+			if (!hasOwn(cache, key)) {
 				pauseTracking();
 				try {
 					cache[key] = getter(instance, key);
@@ -511,15 +628,16 @@ function getPropsProxyHandlers(comp, once) {
 		});
 	};
 	const getOnceProp = withOnceCache(getProp);
+	const getMaybeOnceProp = (instance, key) => (instance.isOnce ? getOnceProp : getProp)(instance, key);
 	const propsHandlers = propsOptions ? {
-		get: (target, key) => (once ? getOnceProp : getProp)(target, key),
+		get: getMaybeOnceProp,
 		has: (_, key) => isProp(key),
 		ownKeys: () => Object.keys(propsOptions),
 		getOwnPropertyDescriptor(target, key) {
 			if (isProp(key)) return {
 				configurable: true,
 				enumerable: true,
-				get: () => (once ? getOnceProp : getProp)(target, key)
+				get: () => getMaybeOnceProp(target, key)
 			};
 		}
 	} : null;
@@ -535,15 +653,36 @@ function getPropsProxyHandlers(comp, once) {
 		else return false;
 	};
 	const getOnceAttr = withOnceCache((instance, key) => getAttr(instance.rawProps, key));
+	const onceAttrKeys = Symbol();
+	const getAttrKeys = (target) => getKeysFromRawProps(target.rawProps).filter(isAttr);
+	const getOnceAttrKeys = (target) => {
+		const cache = target.oncePropsCache || (target.oncePropsCache = Object.create(null));
+		if (!hasOwn(cache, onceAttrKeys)) {
+			pauseTracking();
+			try {
+				const keys = getAttrKeys(target);
+				cache[onceAttrKeys] = keys;
+				for (let i = 0; i < keys.length; i++) {
+					const key = keys[i];
+					if (!hasOwn(cache, key)) cache[key] = getAttr(target.rawProps, key);
+				}
+			} finally {
+				resetTracking();
+			}
+		}
+		return cache[onceAttrKeys];
+	};
+	const getMaybeOnceAttrKeys = (target) => target.isOnce ? getOnceAttrKeys(target) : getAttrKeys(target);
+	const getMaybeOnceAttr = (instance, key) => instance.isOnce ? getOnceAttrKeys(instance).includes(key) ? getOnceAttr(instance, key) : void 0 : getAttr(instance.rawProps, key);
 	const attrsHandlers = {
-		get: (target, key) => once ? getOnceAttr(target, key) : getAttr(target.rawProps, key),
-		has: (target, key) => hasAttr(target.rawProps, key),
-		ownKeys: (target) => getKeysFromRawProps(target.rawProps).filter(isAttr),
+		get: getMaybeOnceAttr,
+		has: (target, key) => target.isOnce ? getOnceAttrKeys(target).includes(key) : hasAttr(target.rawProps, key),
+		ownKeys: getMaybeOnceAttrKeys,
 		getOwnPropertyDescriptor(target, key) {
-			if (isString(key) && hasAttr(target.rawProps, key)) return {
+			if (isString(key) && (target.isOnce ? getOnceAttrKeys(target).includes(key) : hasAttr(target.rawProps, key))) return {
 				configurable: true,
 				enumerable: true,
-				get: () => once ? getOnceAttr(target, key) : getAttr(target.rawProps, key)
+				get: () => getMaybeOnceAttr(target, key)
 			};
 		}
 	};
@@ -565,7 +704,7 @@ function getAttrFromRawProps(rawProps, key) {
 			isDynamic = isFunction(source);
 			source = isDynamic ? resolveFunctionSource(source) : source;
 			if (source && hasOwn(source, key)) {
-				const value = isDynamic ? source[key] : resolveFunctionSource(source[key]);
+				const value = isDynamic ? source[key] : resolveSource(source[key]);
 				if (merged) merged.push(value);
 				else return value;
 			}
@@ -647,7 +786,7 @@ function resolveDynamicProps(props) {
 		const isDynamic = isFunction(source);
 		const resolved = isDynamic ? resolveFunctionSource(source) : source;
 		for (const key in resolved) {
-			const value = isDynamic ? resolved[key] : resolveFunctionSource(source[key]);
+			const value = isDynamic ? resolved[key] : resolveSource(source[key]);
 			if (key === "class" || key === "style") {
 				const existing = mergedRawProps[key];
 				if (isArray(existing)) existing.push(value);
@@ -687,18 +826,23 @@ function on(el, event, handler, options = {}) {
 	if (isArray(handler)) handler.forEach((fn) => on(el, event, fn, options));
 	else {
 		if (!handler) return;
-		addEventListener(el, event, handler, options);
-		if (options.effect) onEffectCleanup(() => {
-			el.removeEventListener(event, handler, options);
-		});
+		addEventListener(el, event, createInvoker(handler), options);
+	}
+}
+function onBinding(el, event, handler, options = {}) {
+	if (isArray(handler)) handler.forEach((fn) => onBinding(el, event, fn, options));
+	else {
+		if (!handler) return;
+		onEffectCleanup(addEventListener(el, event, createInvoker(handler), options));
 	}
 }
 function delegate(el, event, handler) {
 	const key = `$evt${event}`;
 	const existing = el[key];
-	if (existing) if (isArray(existing)) existing.push(handler);
-	else el[key] = [existing, handler];
-	else el[key] = handler;
+	const invoker = createInvoker(handler);
+	if (existing) if (isArray(existing)) existing.push(invoker);
+	else el[key] = [existing, invoker];
+	else el[key] = invoker;
 }
 /**
 * Event delegation borrowed from solid
@@ -737,7 +881,13 @@ const delegatedEventHandler = (e) => {
 	}
 };
 function setDynamicEvents(el, events) {
-	for (const name in events) on(el, name, events[name], { effect: true });
+	for (const name in events) onBinding(el, name, events[name]);
+}
+function withVaporModifiers(fn, modifiers) {
+	return createInvoker(typeof fn === "function" ? withModifiers(fn, modifiers) : fn);
+}
+function withVaporKeys(fn, modifiers) {
+	return createInvoker(typeof fn === "function" ? withKeys(fn, modifiers) : fn);
 }
 function createInvoker(handler) {
 	const i = currentInstance;
@@ -745,13 +895,16 @@ function createInvoker(handler) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/dom/prop.ts
-const hasFallthroughKey = (key) => currentInstance.hasFallthrough && key in currentInstance.attrs;
+const shouldSkipFallthroughKey = (el, key) => {
+	const instance = currentInstance;
+	return !isApplyingFallthroughProps && el.$root && instance.hasFallthrough && instance.type.inheritAttrs !== false && key in instance.attrs;
+};
 function setProp(el, key, value) {
 	if (key in el) setDOMProp(el, key, value);
 	else setAttr(el, key, value);
 }
 function setAttr(el, key, value, isSVG = false) {
-	if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) return;
+	if (shouldSkipFallthroughKey(el, key)) return;
 	if (key === "true-value") el._trueValue = value;
 	else if (key === "false-value") el._falseValue = value;
 	if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating$1 && !attributeHasMismatch(el, key, value)) {
@@ -767,7 +920,7 @@ function setAttr(el, key, value, isSVG = false) {
 	}
 }
 function setDOMProp(el, key, value, forceHydrate = false, attrName) {
-	if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) return;
+	if (shouldSkipFallthroughKey(el, key)) return;
 	if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating$1 && !attributeHasMismatch(el, key, value) && !shouldForceHydrate(el, key) && !forceHydrate) return;
 	const prev = el[key];
 	if (value === prev) return;
@@ -885,7 +1038,7 @@ function setStyleIncremental(el, value) {
 	patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
 }
 function setValue(el, value, forceHydrate = false) {
-	if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey("value")) return;
+	if (shouldSkipFallthroughKey(el, "value")) return;
 	el._value = value;
 	if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating$1 && !attributeHasMismatch(el, "value", getClientText(el, value)) && !shouldForceHydrate(el, "value") && !forceHydrate) return;
 	const oldValue = el.tagName === "OPTION" ? el.getAttribute("value") : el.value;
@@ -990,8 +1143,10 @@ function setDynamicProp(el, key, value, isSVG = false) {
 	let forceHydrate = false;
 	if (key === "class") setClass(el, value, isSVG);
 	else if (key === "style") setStyle(el, value);
-	else if (isOn(key)) on(el, key[2].toLowerCase() + key.slice(3), value, { effect: true });
-	else if ((forceHydrate = key[0] === ".") ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, value, isSVG)) if (key === "innerHTML") setHtml(el, value);
+	else if (isOn(key)) {
+		if (shouldSkipFallthroughKey(el, key)) return;
+		onBinding(el, key[2].toLowerCase() + key.slice(3), value);
+	} else if ((forceHydrate = key[0] === ".") ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, value, isSVG)) if (key === "innerHTML") setHtml(el, value);
 	else if (key === "textContent") setElementText(el, value);
 	else if (key === "value" && canSetValueDirectly(el.tagName)) setValue(el, value, forceHydrate);
 	else setDOMProp(el, key, value, forceHydrate);
@@ -1024,9 +1179,10 @@ function classHasMismatch(el, expected, isIncremental) {
 		if (expected) hasMismatch = Array.from(expectedClassSet).some((cls) => !actualClassSet.has(cls));
 	} else hasMismatch = !isSetEqual(actualClassSet, expectedClassSet);
 	if (hasMismatch) {
-		warnPropMismatch(el, "class", 2, actual, expected);
-		logMismatchError();
-		return true;
+		if (warnPropMismatch(el, "class", 2, actual, expected)) {
+			logMismatchError();
+			return true;
+		}
 	}
 	return false;
 }
@@ -1042,9 +1198,10 @@ function styleHasMismatch(el, value, normalizedValue, isIncremental, instance =
 		if (expected) hasMismatch = Array.from(expectedStyleMap.entries()).some(([key, val]) => actualStyleMap.get(key) !== val);
 	} else hasMismatch = !isMapEqual(actualStyleMap, expectedStyleMap);
 	if (hasMismatch) {
-		warnPropMismatch(el, "style", 3, actual, expected);
-		logMismatchError();
-		return true;
+		if (warnPropMismatch(el, "style", 3, actual, expected)) {
+			logMismatchError();
+			return true;
+		}
 	}
 	return false;
 }
@@ -1067,9 +1224,10 @@ function attributeHasMismatch(el, key, value) {
 	if (isValidHtmlOrSvgAttribute(el, key)) {
 		const { actual, expected } = getAttributeMismatch(el, key, value);
 		if (actual !== expected) {
-			warnPropMismatch(el, key, 4, actual, expected);
-			logMismatchError();
-			return true;
+			if (warnPropMismatch(el, key, 4, actual, expected)) {
+				logMismatchError();
+				return true;
+			}
 		}
 	}
 	return false;
@@ -1088,22 +1246,77 @@ function setScopeId(block, scopeIds) {
 	if (block instanceof Element) for (const id of scopeIds) block.setAttribute(id, "");
 	else if (isVaporComponent(block)) setScopeId(block.block, scopeIds);
 	else if (isArray(block)) for (const b of block) setScopeId(b, scopeIds);
-	else if (isFragment(block)) setScopeId(block.nodes, scopeIds);
+	else if (isFragment(block)) {
+		trackScopeIdFragment(block, scopeIds, false);
+		setScopeId(block.nodes, scopeIds);
+	}
+}
+const trackedScopeIdFragments = /* @__PURE__ */ new WeakMap();
+function trackScopeIdFragment(frag, scopeIds, recursive = true) {
+	if (isInteropEnabled && isInteropFragment(frag)) setInteropFragmentScopeIds(frag, scopeIds);
+	else if (trackFragmentScopeIds(frag, scopeIds)) (frag.onBeforeInsert || (frag.onBeforeInsert = [])).push((nodes) => setScopeId(nodes, scopeIds));
+	if (recursive) trackScopeIdsInBlock(frag.nodes, scopeIds);
+}
+function trackFragmentScopeIds(frag, scopeIds) {
+	const key = scopeIds.join(" ");
+	let trackedScopeIds = trackedScopeIdFragments.get(frag);
+	if (!trackedScopeIds) {
+		trackedScopeIds = /* @__PURE__ */ new Set();
+		trackedScopeIdFragments.set(frag, trackedScopeIds);
+	} else if (trackedScopeIds.has(key)) return false;
+	trackedScopeIds.add(key);
+	return true;
+}
+function setInteropFragmentScopeIds(frag, scopeIds) {
+	const vnode = frag.vnode;
+	if (!vnode) return;
+	const existing = vnode.slotScopeIds;
+	if (!existing) {
+		vnode.slotScopeIds = scopeIds;
+		return;
+	}
+	for (let i = 0; i < scopeIds.length; i++) if (!existing.includes(scopeIds[i])) existing.push(scopeIds[i]);
+}
+function trackScopeIdsInBlock(block, scopeIds) {
+	if (isVaporComponent(block)) trackScopeIdsInBlock(block.block, scopeIds);
+	else if (isArray(block)) for (const b of block) trackScopeIdsInBlock(b, scopeIds);
+	else if (isFragment(block)) trackScopeIdFragment(block, scopeIds);
+}
+const trackedInheritedScopeIdFragments = /* @__PURE__ */ new WeakMap();
+function trackInheritedScopeIdFragment(instance, frag) {
+	let trackedInstances = trackedInheritedScopeIdFragments.get(frag);
+	if (!trackedInstances) {
+		trackedInstances = /* @__PURE__ */ new WeakSet();
+		trackedInheritedScopeIdFragments.set(frag, trackedInstances);
+	} else if (trackedInstances.has(instance)) return;
+	trackedInstances.add(instance);
+	(frag.onUpdated || (frag.onUpdated = [])).push(() => applyInheritedScopeIdToRoot(instance));
+}
+function applyInheritedScopeIdToRoot(instance) {
+	const { scopeId } = instance;
+	if (!scopeId) return;
+	const root = getRootElement(instance, (frag) => trackInheritedScopeIdFragment(instance, frag));
+	if (root) root.setAttribute(scopeId, "");
+	return root;
+}
+function trackComponentScopeId(instance) {
+	const { parent, scopeId } = instance;
+	if (!parent || !scopeId) return;
+	getRootElement(instance, (frag) => trackInheritedScopeIdFragment(instance, frag));
 }
 function setComponentScopeId(instance) {
 	const { parent, scopeId } = instance;
 	if (!parent || !scopeId) return;
-	if (isArray(instance.block) && instance.block.length > 1) return;
-	const scopeIds = [];
-	const parentScopeId = parent && parent.type.__scopeId;
-	if (parentScopeId !== scopeId) scopeIds.push(scopeId);
-	else if (parentScopeId) scopeIds.push(parentScopeId);
-	if (isInteropEnabled && parent.subTree && parent.subTree.component === instance && parent.vnode.scopeId) {
-		scopeIds.push(parent.vnode.scopeId);
+	const root = applyInheritedScopeIdToRoot(instance);
+	if (isInteropEnabled && root && parent.subTree && parent.subTree.component === instance && parent.vnode.scopeId) {
+		root.setAttribute(parent.vnode.scopeId, "");
 		const inheritedScopeIds = getInheritedScopeIds(parent.vnode, parent.parent);
-		scopeIds.push(...inheritedScopeIds);
+		for (let i = 0; i < inheritedScopeIds.length; i++) root.setAttribute(inheritedScopeIds[i], "");
 	}
-	if (scopeIds.length > 0) setScopeId(instance.block, scopeIds);
+}
+function getCurrentScopeId() {
+	const scopeOwner = getScopeOwner();
+	return scopeOwner ? scopeOwner.type.__scopeId : void 0;
 }
 //#endregion
 //#region packages/runtime-vapor/src/componentSlots.ts
@@ -1112,6 +1325,15 @@ function setComponentScopeId(instance) {
 * When true, renderEffect should skip creating reactive effect.
 */
 let inOnceSlot = false;
+function withOnceSlot(fn, value = true) {
+	const prev = inOnceSlot;
+	try {
+		inOnceSlot = value;
+		return fn();
+	} finally {
+		inOnceSlot = prev;
+	}
+}
 /**
 * Current slot scopeIds for vdom interop
 */
@@ -1123,6 +1345,36 @@ function setCurrentSlotScopeIds(scopeIds) {
 		currentSlotScopeIds = scopeIds;
 	}
 }
+const rawSlotsOwnerMap = /* @__PURE__ */ new WeakMap();
+const rawSlotWrappersCache = /* @__PURE__ */ new WeakMap();
+function normalizeRawSlots(rawSlots) {
+	if (!rawSlots) return rawSlots;
+	const normalized = isFunction(rawSlots) ? { default: rawSlots } : rawSlots;
+	if (!rawSlotsOwnerMap.has(normalized)) rawSlotsOwnerMap.set(normalized, getScopeOwner());
+	return normalized;
+}
+function withSlotOwner(slots, fn) {
+	if (!rawSlotsOwnerMap.has(slots)) return fn();
+	const prevOwner = setCurrentSlotOwner(rawSlotsOwnerMap.get(slots) || null);
+	try {
+		return fn();
+	} finally {
+		setCurrentSlotOwner(prevOwner);
+	}
+}
+function getOwnedSlot(slots, key, slot) {
+	if (!rawSlotsOwnerMap.has(slots)) return slot;
+	let wrappers = rawSlotWrappersCache.get(slots);
+	if (!wrappers) rawSlotWrappersCache.set(slots, wrappers = /* @__PURE__ */ new Map());
+	const cached = wrappers.get(key);
+	if (cached && cached.slot === slot) return cached.wrapped;
+	const wrapped = ((...args) => withSlotOwner(slots, () => slot(...args)));
+	wrappers.set(key, {
+		slot,
+		wrapped
+	});
+	return wrapped;
+}
 const dynamicSlotsProxyHandlers = {
 	get: getSlot,
 	has: (target, key) => !!getSlot(target, key),
@@ -1135,17 +1387,14 @@ const dynamicSlotsProxyHandlers = {
 		};
 	},
 	ownKeys(target) {
-		let keys = Object.keys(target);
+		const keys = new Set(Object.keys(target).filter((k) => k !== "$"));
 		const dynamicSources = target.$;
-		if (dynamicSources) {
-			keys = keys.filter((k) => k !== "$");
-			for (const source of dynamicSources) if (isFunction(source)) {
-				const slot = resolveFunctionSource(source);
-				if (slot) if (isArray(slot)) for (const s of slot) keys.push(String(s.name));
-				else keys.push(String(slot.name));
-			} else keys.push(...Object.keys(source));
-		}
-		return keys;
+		if (dynamicSources) for (const source of dynamicSources) if (isFunction(source)) {
+			const slot = withSlotOwner(target, () => resolveFunctionSource(source));
+			if (slot) if (isArray(slot)) for (const s of slot) keys.add(String(s.name));
+			else keys.add(String(slot.name));
+		} else for (const key of Object.keys(source)) keys.add(key);
+		return [...keys];
 	},
 	set: NO,
 	deleteProperty: NO
@@ -1159,16 +1408,16 @@ function getSlot(target, key) {
 		while (i--) {
 			source = dynamicSources[i];
 			if (isFunction(source)) {
-				const slot = resolveFunctionSource(source);
+				const slot = withSlotOwner(target, () => resolveFunctionSource(source));
 				if (slot) {
 					if (isArray(slot)) {
-						for (let j = slot.length - 1; j >= 0; j--) if (String(slot[j].name) === key) return slot[j].fn;
-					} else if (String(slot.name) === key) return slot.fn;
+						for (let j = slot.length - 1; j >= 0; j--) if (String(slot[j].name) === key) return getOwnedSlot(target, key, slot[j].fn);
+					} else if (String(slot.name) === key) return getOwnedSlot(target, key, slot.fn);
 				}
-			} else if (hasOwn(source, key)) return source[key];
+			} else if (hasOwn(source, key)) return getOwnedSlot(target, key, source[key]);
 		}
 	}
-	if (hasOwn(target, key)) return target[key];
+	if (hasOwn(target, key)) return getOwnedSlot(target, key, target[key]);
 }
 /**
 * Tracks the slot owner (the component that defines the slot content).
@@ -1191,25 +1440,7 @@ function setCurrentSlotOwner(owner) {
 function getScopeOwner() {
 	return currentSlotOwner || currentInstance;
 }
-/**
-* Wrap a slot function to track the slot owner.
-*
-* This ensures:
-* 1. createSlot gets rawSlots from the correct instance (slot owner)
-* 2. elements inherit the slot owner's scopeId
-*/
-function withVaporCtx(fn) {
-	const owner = getScopeOwner();
-	return (...args) => {
-		const prevOwner = setCurrentSlotOwner(owner);
-		try {
-			return fn(...args);
-		} finally {
-			setCurrentSlotOwner(prevOwner);
-		}
-	};
-}
-function createSlot(name, rawProps, fallback, noSlotted, once) {
+function createSlot(name = "default", rawProps, fallback, flags = 0) {
 	if (isInteropEnabled && isCollectingVdomSlotVNodes) return;
 	const _insertionParent = insertionParent;
 	const _insertionAnchor = insertionAnchor;
@@ -1217,25 +1448,42 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
 	let hydrationCursor = null;
 	const instance = getScopeOwner();
 	const rawSlots = instance.rawSlots;
-	const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
-	const scopeId = !noSlotted && instance.type.__scopeId;
+	const scopeId = !(flags & 1) && instance.type.__scopeId;
 	const slotScopeIds = scopeId ? [`${scopeId}-s`] : null;
+	const once = !!(flags & 2);
+	const slotRoot = !!(flags & 4);
+	const slotProps = rawProps ? new Proxy(once ? snapshotRawProps(rawProps) : rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
+	if (once && fallback) {
+		const originalFallback = fallback;
+		fallback = (...args) => withOnceSlot(() => originalFallback(...args));
+	}
 	let fragment;
 	if (isRef(rawSlots._) && isInteropEnabled) {
 		if (isHydrating$1) hydrationCursor = enterHydrationCursor();
-		fragment = instance.appContext.vapor.vdomSlot(rawSlots._, name, slotProps, instance, fallback);
+		fragment = instance.appContext.vapor.vdomSlot(rawSlots._, name, slotProps, instance, fallback, once, slotRoot);
 	} else {
 		if (isHydrating$1) hydrationCursor = captureHydrationCursor();
-		const slotFragment = fragment = new SlotFragment();
-		slotFragment.forwarded = currentSlotOwner != null && currentSlotOwner !== currentInstance;
+		const isCustomElementSlot = !!(instance.ce || instance.parent && isAsyncWrapper(instance.parent) && instance.parent.ce);
+		const slotFragment = isHydrating$1 || !!fallback || !!getCurrentSlotBoundary() || isCustomElementSlot ? new SlotFragment(slotRoot) : void 0;
+		let dynamicFragment;
+		if (slotFragment) {
+			fragment = slotFragment;
+			if (isHydrating$1) slotFragment.forwarded = currentSlotOwner != null && currentSlotOwner !== currentInstance;
+		} else {
+			dynamicFragment = new DynamicFragment(!!(process.env.NODE_ENV !== "production") ? "slot" : void 0, false, false);
+			dynamicFragment.isSlot = true;
+			fragment = dynamicFragment;
+		}
 		const isDynamicName = isFunction(name);
 		const renderSlot = () => {
 			const slotName = isFunction(name) ? name() : name;
-			if (instance.ce || instance.parent && isAsyncWrapper(instance.parent) && instance.parent.ce) {
+			if (isCustomElementSlot) {
 				const el = /* @__PURE__ */ createElement("slot");
-				renderEffect(() => {
+				const setSlotProps = () => {
 					setDynamicProps(el, [slotProps, slotName !== "default" ? { name: slotName } : {}]);
-				});
+				};
+				if (once) setSlotProps();
+				else renderEffect(setSlotProps);
 				if (fallback) withOwnedSlotBoundary(slotFragment.parentSlotBoundary, () => {
 					const fallbackBlock = fallback();
 					slotFragment.customElementFallback = fallbackBlock;
@@ -1245,8 +1493,10 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
 				return;
 			}
 			const slot = getSlot(rawSlots, slotName);
-			if (slot) slotFragment.updateSlot(getBoundSlot(slot), fallback);
-			else slotFragment.updateSlot(void 0, fallback);
+			if (slot) if (slotFragment) slotFragment.updateSlot(getBoundSlot(slot), fallback);
+			else dynamicFragment.update(getBoundSlot(slot));
+			else if (slotFragment) slotFragment.updateSlot(void 0, fallback);
+			else dynamicFragment.update();
 		};
 		let cachedSlot;
 		let cachedBoundSlot;
@@ -1255,12 +1505,9 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
 				cachedSlot = slot;
 				cachedBoundSlot = () => {
 					const prevSlotScopeIds = setCurrentSlotScopeIds(slotScopeIds);
-					const prev = inOnceSlot;
 					try {
-						if (once) inOnceSlot = true;
-						return slot(slotProps);
+						return once ? withOnceSlot(() => slot(slotProps)) : slot(slotProps);
 					} finally {
-						inOnceSlot = prev;
 						setCurrentSlotScopeIds(prevSlotScopeIds);
 					}
 				};
@@ -1274,73 +1521,13 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
 		if (slotScopeIds) setScopeId(fragment, slotScopeIds);
 		if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
 	} else {
-		if (fragment.insert) fragment.hydrate();
+		if (isInteropEnabled && isInteropFragment(fragment)) fragment.hydrate();
+		if (slotScopeIds) trackScopeIdFragment(fragment, slotScopeIds);
 		exitHydrationCursor(hydrationCursor);
 	}
 	return fragment;
 }
 //#endregion
-//#region packages/runtime-vapor/src/renderEffect.ts
-var RenderEffect = class extends ReactiveEffect {
-	constructor(render) {
-		super();
-		this.render = render;
-		const instance = currentInstance;
-		if (!!(process.env.NODE_ENV !== "production") && !this.subs && !isVaporComponent(instance)) warn("renderEffect called without active EffectScope or Vapor instance.");
-		const job = () => {
-			if (this.dirty) this.run();
-		};
-		this.updateJob = () => {
-			instance.isUpdating = false;
-			instance.u && invokeArrayFns(instance.u);
-		};
-		if (instance) {
-			if (!!(process.env.NODE_ENV !== "production")) {
-				this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
-				this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
-			}
-			if (instance.type.ce) (instance.renderEffects || (instance.renderEffects = [])).push(this);
-			job.i = instance;
-		}
-		this.job = job;
-		this.i = instance;
-		this.flags |= 128;
-		this.job.flags |= 2;
-	}
-	fn() {
-		const instance = this.i;
-		const scope = this.subs ? this.subs.sub : void 0;
-		const hasUpdateHooks = instance && (instance.bu || instance.u);
-		if (!!(process.env.NODE_ENV !== "production") && instance) startMeasure(instance, `renderEffect`);
-		const prev = setCurrentInstance(instance, scope);
-		try {
-			if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
-				instance.isUpdating = true;
-				try {
-					instance.bu && invokeArrayFns(instance.bu);
-					this.render();
-				} catch (err) {
-					instance.isUpdating = false;
-					throw err;
-				}
-				queuePostFlushCb(this.updateJob);
-			} else this.render();
-		} finally {
-			setCurrentInstance(...prev);
-			if (!!(process.env.NODE_ENV !== "production") && instance) endMeasure(instance, `renderEffect`);
-		}
-	}
-	notify() {
-		if (!(this.flags & 256)) queueJob(this.job, this.i ? this.i.uid : void 0);
-	}
-};
-function renderEffect(fn, noLifecycle = false) {
-	if (inOnceSlot) return fn();
-	const effect = new RenderEffect(fn);
-	if (noLifecycle) effect.fn = fn;
-	effect.run();
-}
-//#endregion
 //#region packages/runtime-vapor/src/keepAlive.ts
 let isKeepAliveEnabled = false;
 let currentKeepAliveCtx = null;
@@ -1400,9 +1587,9 @@ function isVaporTransition(component) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/fragment.ts
+const EMPTY_BLOCK$1 = EMPTY_ARR;
 var VaporFragment = class {
 	constructor(nodes) {
-		this.vnode = null;
 		this.renderInstance = currentInstance;
 		this.slotOwner = currentSlotOwner;
 		this.inheritedSlotBoundary = currentSlotBoundary;
@@ -1411,24 +1598,32 @@ var VaporFragment = class {
 	}
 	runWithRenderCtx(fn, scope) {
 		const prevInstance = setCurrentInstance(this.renderInstance, scope);
-		const prevSlotOwner = setCurrentSlotOwner(this.slotOwner);
-		let prevKeepAliveCtx = null;
-		if (isKeepAliveEnabled) prevKeepAliveCtx = setCurrentKeepAliveCtx(this.keepAliveCtx || null);
-		const prevBoundary = setCurrentSlotBoundary(this.inheritedSlotBoundary);
 		try {
-			return fn();
+			return runWithFragmentCtx(this, fn);
 		} finally {
-			setCurrentSlotBoundary(prevBoundary);
-			if (isKeepAliveEnabled) setCurrentKeepAliveCtx(prevKeepAliveCtx);
-			setCurrentSlotOwner(prevSlotOwner);
 			setCurrentInstance(...prevInstance);
 		}
 	}
 };
+function runWithFragmentCtx(fragment, fn) {
+	const keepAliveCtx = isKeepAliveEnabled ? fragment.keepAliveCtx || null : null;
+	if (currentSlotOwner === fragment.slotOwner && currentSlotBoundary === fragment.inheritedSlotBoundary && (!isKeepAliveEnabled || currentKeepAliveCtx === keepAliveCtx)) return fn();
+	const prevSlotOwner = setCurrentSlotOwner(fragment.slotOwner);
+	let prevKeepAliveCtx = null;
+	if (isKeepAliveEnabled) prevKeepAliveCtx = setCurrentKeepAliveCtx(keepAliveCtx);
+	const prevBoundary = setCurrentSlotBoundary(fragment.inheritedSlotBoundary);
+	try {
+		return fn();
+	} finally {
+		setCurrentSlotBoundary(prevBoundary);
+		if (isKeepAliveEnabled) setCurrentKeepAliveCtx(prevKeepAliveCtx);
+		setCurrentSlotOwner(prevSlotOwner);
+	}
+}
 var ForFragment = class extends VaporFragment {
-	constructor(nodes) {
+	constructor(nodes, trackSlotBoundary) {
 		super(nodes);
-		trackSlotBoundaryDirtying(this);
+		if (trackSlotBoundary) trackSlotBoundaryDirtying(this);
 	}
 	onReset(fn) {
 		(this.resetListeners || (this.resetListeners = [])).push(fn);
@@ -1445,10 +1640,12 @@ var ForBlock = class extends VaporFragment {
 	}
 };
 function getDynamicCloseOwner(isSlot, forwardedSlot, anchorLabel, nodes, currentSlotEndAnchor) {
-	const valid = isValidBlock(nodes);
-	if (isSlot) return !forwardedSlot || valid ? 1 : 3;
+	if (isSlot) {
+		if (!forwardedSlot) return 1;
+		return isValidBlock(nodes) ? 1 : 3;
+	}
 	if (anchorLabel === "if" && isArray(nodes) && nodes.length > 1) return 1;
-	if (anchorLabel === "if" && !valid && currentSlotEndAnchor && isHydratingSlotFallbackActive()) return 2;
+	if (anchorLabel === "if" && currentSlotEndAnchor && isHydratingSlotFallbackActive() && !isValidBlock(nodes)) return 2;
 	return 0;
 }
 function queueAnchorInsert(parentNode$1, nextNode, createAnchor) {
@@ -1458,110 +1655,9 @@ function queueAnchorInsert(parentNode$1, nextNode, createAnchor) {
 	});
 }
 var DynamicFragment = class extends VaporFragment {
-	constructor(anchorLabel, keyed = false, locate = true) {
-		super([]);
-		this.hydrate = (isEmpty = false, isSlot = false) => {
-			if (!isHydrating$1) return;
-			let advanceAfterRestore = null;
-			let exitHydrationBoundary;
-			const reuseAnchor = (anchor) => {
-				this.anchor = markHydrationAnchor(anchor);
-				if (currentHydrationNode === this.anchor) advanceHydrationNode(this.anchor);
-				else {
-					exitHydrationBoundary = enterHydrationBoundary(this.anchor);
-					advanceAfterRestore = this.anchor;
-				}
-			};
-			const createRuntimeAnchor = () => this.anchor = markHydrationAnchor(!!(process.env.NODE_ENV !== "production") ? /* @__PURE__ */ createComment(this.anchorLabel) : /* @__PURE__ */ createTextNode());
-			const cleanupAndInsertRuntimeAnchor = (parentNode, nextNode, cleanupStart, cleanupUntil) => {
-				if (cleanupUntil) exitHydrationBoundary = enterHydrationBoundary(cleanupUntil);
-				else {
-					cleanupHydrationTail(cleanupStart);
-					setCurrentHydrationNode(null);
-				}
-				queueAnchorInsert(parentNode, nextNode, createRuntimeAnchor);
-			};
-			try {
-				if (isEmpty) {
-					if (isComment(currentHydrationNode, "")) {
-						reuseAnchor(currentHydrationNode);
-						return;
-					}
-					if (this.anchorLabel && currentHydrationNode && isComment(currentHydrationNode, "teleport anchor")) {
-						const parentNode$2 = /* @__PURE__ */ parentNode(currentHydrationNode);
-						const anchor = markHydrationAnchor(currentHydrationNode);
-						if (parentNode$2) {
-							queueAnchorInsert(parentNode$2, anchor, createRuntimeAnchor);
-							return;
-						}
-					}
-					if (!isSlot && this.anchorLabel && currentHydrationNode && !isHydratingSlotFallbackActive() && !isComment(currentHydrationNode, "]")) {
-						const parentNode$4 = /* @__PURE__ */ parentNode(currentHydrationNode);
-						const anchor = locateNextNode(currentHydrationNode);
-						const reusableAnchor = anchor && anchor.nodeType === 8 && isReusableDynamicFragmentAnchor(anchor, this.anchorLabel) && /* @__PURE__ */ parentNode(anchor) ? anchor : null;
-						if (parentNode$4) {
-							this.nodes = [];
-							if (reusableAnchor) reuseAnchor(reusableAnchor);
-							else cleanupAndInsertRuntimeAnchor(parentNode$4, anchor, currentHydrationNode, anchor);
-							return;
-						}
-					}
-				}
-				if (this.anchorLabel && !isValidBlock(this.nodes) && this.nodes instanceof Comment && isReusableDynamicFragmentAnchor(this.nodes, this.anchorLabel) && /* @__PURE__ */ parentNode(this.nodes)) {
-					const anchor = this.nodes;
-					this.nodes = [];
-					reuseAnchor(anchor);
-					return;
-				}
-				if (this.anchorLabel && !isValidBlock(this.nodes) && this.nodes instanceof Comment && !/* @__PURE__ */ parentNode(this.nodes) && currentHydrationNode) {
-					const parentNode$5 = /* @__PURE__ */ parentNode(currentHydrationNode);
-					const nextNode = locateNextNode(currentHydrationNode);
-					if (parentNode$5) {
-						this.nodes = [];
-						cleanupAndInsertRuntimeAnchor(parentNode$5, nextNode, currentHydrationNode, nextNode);
-						return;
-					}
-				}
-				const currentSlotEndAnchor = getCurrentSlotEndAnchor();
-				const forwardedSlot = this.forwarded;
-				const slotAnchor = isSlot ? currentSlotEndAnchor : null;
-				const closeOwner = getDynamicCloseOwner(isSlot, forwardedSlot, this.anchorLabel, this.nodes, currentSlotEndAnchor);
-				if (closeOwner === 1) {
-					const anchor = locateHydrationBoundaryClose(slotAnchor || currentHydrationNode, slotAnchor || null);
-					if (isComment(anchor, "]")) {
-						reuseAnchor(anchor);
-						return;
-					} else if (!!(process.env.NODE_ENV !== "production")) throw new Error(`Failed to locate ${this.anchorLabel} fragment anchor. this is likely a Vue internal bug.`);
-				} else if (closeOwner === 3 && currentSlotEndAnchor) {
-					const anchor = markHydrationAnchor(currentSlotEndAnchor);
-					queueAnchorInsert(anchor.parentNode, anchor.nextSibling, createRuntimeAnchor);
-					return;
-				} else if (closeOwner === 2 && currentSlotEndAnchor) {
-					const endAnchor = currentSlotEndAnchor;
-					queuePostFlushCb(() => {
-						const parentNode$6 = /* @__PURE__ */ parentNode(endAnchor);
-						if (!parentNode$6) return;
-						parentNode$6.insertBefore(createRuntimeAnchor(), endAnchor);
-					});
-					return;
-				}
-				let parentNode$3;
-				let nextNode;
-				if (this.anchorLabel === "if" && !isValidBlock(this.nodes) && currentSlotEndAnchor && currentHydrationNode === currentSlotEndAnchor) {
-					parentNode$3 = currentSlotEndAnchor.parentNode;
-					nextNode = currentSlotEndAnchor;
-				} else {
-					const node = findBlockNode(this.nodes);
-					parentNode$3 = node.parentNode;
-					nextNode = node.nextNode;
-				}
-				queueAnchorInsert(parentNode$3, nextNode, createRuntimeAnchor);
-			} finally {
-				exitHydrationBoundary && exitHydrationBoundary();
-				if (advanceAfterRestore && currentHydrationNode === advanceAfterRestore) advanceHydrationNode(advanceAfterRestore);
-			}
-		};
-		this.keyed = keyed;
+	constructor(anchorLabel, keyed = false, locate = true, trackSlotBoundary = false) {
+		super(EMPTY_BLOCK$1);
+		if (keyed) this.keyed = true;
 		if (isTransitionEnabled && currentInstance && isVaporTransition(currentInstance.type)) this.inTransition = true;
 		if (isHydrating$1) {
 			this.anchorLabel = anchorLabel;
@@ -1570,43 +1666,44 @@ var DynamicFragment = class extends VaporFragment {
 			this.anchor = !!(process.env.NODE_ENV !== "production") && anchorLabel ? /* @__PURE__ */ createComment(anchorLabel) : /* @__PURE__ */ createTextNode();
 			if (!!(process.env.NODE_ENV !== "production")) this.anchorLabel = anchorLabel;
 		}
-		this.registerSlotBoundaryDirty();
+		if (trackSlotBoundary) trackSlotBoundaryDirtying(this);
 	}
-	registerSlotBoundaryDirty() {
-		const boundary = this.inheritedSlotBoundary;
-		if (!boundary) return;
-		(this.onUpdated || (this.onUpdated = [])).push(() => boundary.markDirty());
-	}
-	update(render, key = render) {
+	update(render, key = render, noScope = false, shouldInsert = true) {
 		if (key === this.current) {
-			if (isHydrating$1 && this.anchorLabel !== "slot") this.hydrate(true);
+			if (isHydrating$1 && !this.isSlot) this.hydrate(true);
 			return;
 		}
 		const transition = isTransitionEnabled ? this.$transition : void 0;
+		const wasMounted = this.current !== void 0;
+		if (wasMounted) {
+			const onBeforeUpdate = this.onBeforeUpdate;
+			if (onBeforeUpdate) for (let i = 0; i < onBeforeUpdate.length; i++) onBeforeUpdate[i]();
+		}
 		if (transition && transition.state.isLeaving) {
 			this.current = key;
-			this.pending = {
+			const pending = this.pending;
+			if (pending) {
+				pending.render = render;
+				pending.key = key;
+				pending.noScope = noScope;
+			} else this.pending = {
 				render,
-				key
+				key,
+				noScope
 			};
 			return;
 		}
 		const instance = currentInstance;
 		const prevSub = setActiveSub();
-		const parent = isHydrating$1 ? null : this.anchor.parentNode;
-		if (this.scope) {
-			if (isKeepAliveEnabled) {
+		const parent = !isHydrating$1 && shouldInsert ? this.anchor.parentNode : null;
+		if (wasMounted) {
+			const scope = this.scope;
+			if (scope) {
 				let retainScope = false;
-				const keepAliveCtx = this.keepAliveCtx;
-				if (keepAliveCtx) {
-					const cacheKey = this.keyed ? withCurrentCacheKey(this.current, () => keepAliveCtx.processShapeFlag(this.nodes)) : keepAliveCtx.processShapeFlag(this.nodes);
-					if (cacheKey !== false) {
-						keepAliveCtx.cacheScope(cacheKey, this.current, this.scope);
-						retainScope = true;
-					}
-				}
-				if (!retainScope) this.scope.stop();
-			} else this.scope.stop();
+				const onBeforeRemove = this.onBeforeRemove;
+				if (onBeforeRemove) for (let i = 0; i < onBeforeRemove.length; i++) retainScope = onBeforeRemove[i](scope) || retainScope;
+				if (!retainScope) scope.stop();
+			}
 			const mode = transition && transition.mode;
 			if (mode && (mode !== "in-out" || mode === "in-out" && render) && (mode !== "out-in" || isValidBlock(this.nodes))) {
 				applyTransitionLeaveHooks(this.nodes, transition, () => {
@@ -1615,8 +1712,8 @@ var DynamicFragment = class extends VaporFragment {
 						const pending = this.pending;
 						if (pending) {
 							this.pending = void 0;
-							this.renderBranch(pending.render, transition, parent, pending.key);
-						} else this.renderBranch(render, transition, parent, key);
+							this.renderBranch(pending.render, transition, parent, pending.key, pending.noScope, true);
+						} else this.renderBranch(render, transition, parent, key, noScope, true);
 					} finally {
 						setCurrentInstance(...prevInstance);
 					}
@@ -1628,27 +1725,33 @@ var DynamicFragment = class extends VaporFragment {
 				}
 			} else parent && remove(this.nodes, parent);
 		}
-		const isRevivingDeferredBranch = isHydrating$1 && isInDeferredHydrationBoundary() && !!render && this.anchorLabel !== "slot" && !isValidBlock(this.nodes);
-		const reusingDeferredAnchor = isRevivingDeferredBranch && !!this.anchor && !!this.anchor.parentNode;
-		if (isRevivingDeferredBranch) {
-			let slotEndAnchor = null;
-			const anchor = this.anchor || (currentHydrationNode === (slotEndAnchor = getCurrentSlotEndAnchor()) ? slotEndAnchor : null);
-			if (anchor) setCurrentHydrationNode(markHydrationAnchor(anchor));
+		let reusingDeferredAnchor = false;
+		if (isHydrating$1) {
+			const isRevivingDeferredBranch = isInDeferredHydrationBoundary() && !!render && !this.isSlot && !isValidBlock(this.nodes);
+			reusingDeferredAnchor = isRevivingDeferredBranch && !!this.anchor && !!this.anchor.parentNode;
+			if (isRevivingDeferredBranch) {
+				let slotEndAnchor = null;
+				const anchor = this.anchor || (currentHydrationNode === (slotEndAnchor = getCurrentSlotEndAnchor()) ? slotEndAnchor : null);
+				if (anchor) setCurrentHydrationNode(markHydrationAnchor(anchor));
+			}
 		}
-		this.renderBranch(render, transition, parent, key);
+		this.renderBranch(render, transition, parent, key, noScope, wasMounted || !!parent);
 		setActiveSub(prevSub);
-		if (isHydrating$1 && this.anchorLabel !== "slot" && !reusingDeferredAnchor) this.hydrate(render == null);
+		if (isHydrating$1 && !this.isSlot && !reusingDeferredAnchor) this.hydrate(render == null);
 	}
-	renderBranch(render, transition, parent, key) {
+	renderBranch(render, transition, parent, key, noScope = false, notifyUpdated = !!parent) {
 		this.current = key;
 		if (render) {
 			const keepAliveCtx = isKeepAliveEnabled ? this.keepAliveCtx : null;
-			const scope = keepAliveCtx && keepAliveCtx.getScope(this.current);
-			if (scope) this.scope = scope;
-			else this.scope = new EffectScope$1();
+			const useScope = !noScope || !!this.hasFallthroughAttrs;
+			if (useScope) {
+				const scope = keepAliveCtx && keepAliveCtx.getScope(this.current);
+				if (scope) this.scope = scope;
+				else this.scope = new EffectScope$1();
+			} else this.scope = void 0;
 			const renderBranch = () => {
 				try {
-					this.nodes = this.runWithRenderCtx(() => this.scope.run(render) || []);
+					this.nodes = this.runWithRenderCtx(() => (useScope ? this.scope.run(render) : render()) || EMPTY_BLOCK$1, this.scope);
 				} finally {
 					const key = this.keyed ? this.current : this.$key;
 					if (key !== void 0 && (transition || this.inTransition || keepAliveCtx)) setBlockKey(this.nodes, key);
@@ -1659,20 +1762,117 @@ var DynamicFragment = class extends VaporFragment {
 			if (keepAliveCtx && this.keyed) withCurrentCacheKey(key, renderBranch);
 			else renderBranch();
 			if (parent) {
-				if (this.attrs) {
-					if (this.nodes instanceof Element) this.scope.run(() => {
-						renderEffect(() => applyFallthroughProps(this.nodes, this.attrs));
-					});
-					else if (!!(process.env.NODE_ENV !== "production") && (this.anchorLabel === "slot" || isArray(this.nodes) && this.nodes.length)) warnExtraneousAttributes(this.attrs);
-				}
+				const onBeforeInsert = this.onBeforeInsert;
+				if (onBeforeInsert) onBeforeInsert.forEach((hook) => hook(this.nodes));
 				insert(this.nodes, parent, this.anchor);
-				if (keepAliveCtx && transition && transition.mode === "out-in") keepAliveCtx.cacheBlock();
 			}
 		} else {
 			this.scope = void 0;
-			this.nodes = [];
+			this.nodes = EMPTY_BLOCK$1;
+		}
+		const onUpdated = this.onUpdated;
+		if (notifyUpdated && onUpdated) onUpdated.forEach((hook) => hook(this.nodes));
+	}
+	hydrate(isEmpty = false) {
+		if (!isHydrating$1) return;
+		let advanceAfterRestore = null;
+		let exitHydrationBoundary;
+		const reuseAnchor = (anchor) => {
+			this.anchor = markHydrationAnchor(anchor);
+			if (currentHydrationNode === this.anchor) advanceHydrationNode(this.anchor);
+			else {
+				exitHydrationBoundary = enterHydrationBoundary(this.anchor);
+				advanceAfterRestore = this.anchor;
+			}
+		};
+		const createRuntimeAnchor = () => this.anchor = markHydrationAnchor(!!(process.env.NODE_ENV !== "production") ? /* @__PURE__ */ createComment(this.anchorLabel) : /* @__PURE__ */ createTextNode());
+		const cleanupAndInsertRuntimeAnchor = (parentNode, nextNode, cleanupStart, cleanupUntil) => {
+			if (cleanupUntil) exitHydrationBoundary = enterHydrationBoundary(cleanupUntil);
+			else {
+				cleanupHydrationTail(cleanupStart);
+				setCurrentHydrationNode(null);
+			}
+			queueAnchorInsert(parentNode, nextNode, createRuntimeAnchor);
+		};
+		try {
+			if (isEmpty) {
+				if (isComment(currentHydrationNode, "")) {
+					reuseAnchor(currentHydrationNode);
+					return;
+				}
+				if (this.anchorLabel && currentHydrationNode && isComment(currentHydrationNode, "teleport anchor")) {
+					const parentNode$2 = /* @__PURE__ */ parentNode(currentHydrationNode);
+					const anchor = markHydrationAnchor(currentHydrationNode);
+					if (parentNode$2) {
+						queueAnchorInsert(parentNode$2, anchor, createRuntimeAnchor);
+						return;
+					}
+				}
+				if (!this.isSlot && this.anchorLabel && currentHydrationNode && !isHydratingSlotFallbackActive() && !isComment(currentHydrationNode, "]")) {
+					const parentNode$4 = /* @__PURE__ */ parentNode(currentHydrationNode);
+					const anchor = nextLogicalSibling(currentHydrationNode);
+					const reusableAnchor = anchor && anchor.nodeType === 8 && isReusableDynamicFragmentAnchor(anchor, this.anchorLabel) && /* @__PURE__ */ parentNode(anchor) ? anchor : null;
+					if (parentNode$4) {
+						this.nodes = EMPTY_BLOCK$1;
+						if (reusableAnchor) reuseAnchor(reusableAnchor);
+						else cleanupAndInsertRuntimeAnchor(parentNode$4, anchor, currentHydrationNode, anchor);
+						return;
+					}
+				}
+			}
+			if (this.anchorLabel && !isValidBlock(this.nodes) && this.nodes instanceof Comment && isReusableDynamicFragmentAnchor(this.nodes, this.anchorLabel) && /* @__PURE__ */ parentNode(this.nodes)) {
+				const anchor = this.nodes;
+				this.nodes = EMPTY_BLOCK$1;
+				reuseAnchor(anchor);
+				return;
+			}
+			if (this.anchorLabel && !isValidBlock(this.nodes) && this.nodes instanceof Comment && !/* @__PURE__ */ parentNode(this.nodes) && currentHydrationNode) {
+				const parentNode$5 = /* @__PURE__ */ parentNode(currentHydrationNode);
+				const nextNode = nextLogicalSibling(currentHydrationNode);
+				if (parentNode$5) {
+					this.nodes = EMPTY_BLOCK$1;
+					cleanupAndInsertRuntimeAnchor(parentNode$5, nextNode, currentHydrationNode, nextNode);
+					return;
+				}
+			}
+			const currentSlotEndAnchor = getCurrentSlotEndAnchor();
+			const forwardedSlot = this.isSlot ? this.forwarded : false;
+			const slotAnchor = this.isSlot ? currentSlotEndAnchor : null;
+			const closeOwner = getDynamicCloseOwner(!!this.isSlot, forwardedSlot, this.anchorLabel, this.nodes, currentSlotEndAnchor);
+			if (closeOwner === 1) {
+				const anchor = locateHydrationBoundaryClose(slotAnchor || currentHydrationNode, slotAnchor || null);
+				if (isComment(anchor, "]")) {
+					reuseAnchor(anchor);
+					return;
+				} else if (!!(process.env.NODE_ENV !== "production")) throw new Error(`Failed to locate ${this.anchorLabel} fragment anchor. this is likely a Vue internal bug.`);
+			} else if (closeOwner === 3 && currentSlotEndAnchor) {
+				const anchor = markHydrationAnchor(currentSlotEndAnchor);
+				queueAnchorInsert(anchor.parentNode, anchor.nextSibling, createRuntimeAnchor);
+				return;
+			} else if (closeOwner === 2 && currentSlotEndAnchor) {
+				const endAnchor = currentSlotEndAnchor;
+				queuePostFlushCb(() => {
+					const parentNode$6 = /* @__PURE__ */ parentNode(endAnchor);
+					if (!parentNode$6) return;
+					parentNode$6.insertBefore(createRuntimeAnchor(), endAnchor);
+				});
+				return;
+			}
+			let parentNode$3;
+			let nextNode;
+			if (this.anchorLabel === "if" && !isValidBlock(this.nodes) && currentSlotEndAnchor && currentHydrationNode === currentSlotEndAnchor) {
+				parentNode$3 = currentSlotEndAnchor.parentNode;
+				nextNode = currentSlotEndAnchor;
+			} else {
+				const node = findBlockBoundary(this.nodes);
+				parentNode$3 = node.parentNode;
+				nextNode = node.nextNode;
+			}
+			queueAnchorInsert(parentNode$3, nextNode, createRuntimeAnchor);
+		} finally {
+			exitHydrationBoundary && exitHydrationBoundary();
+			if (advanceAfterRestore && currentHydrationNode === advanceAfterRestore) advanceHydrationNode(advanceAfterRestore);
 		}
-		if (parent && this.onUpdated) this.onUpdated.forEach((hook) => hook(this.nodes));
 	}
 };
 let currentSlotBoundary = null;
@@ -1708,58 +1908,14 @@ function getRedirectedBoundary(boundary) {
 function trackSlotBoundaryDirtying(fragment) {
 	const boundary = currentSlotBoundary;
 	if (!boundary) return;
-	(fragment.onUpdated || (fragment.onUpdated = [])).push(() => boundary.markDirty());
-}
-function walkSlotFallbackBlock(block, node, fragment) {
-	if (block instanceof Node) return node(block);
-	if (isVaporComponent(block)) return walkSlotFallbackBlock(block.block, node, fragment);
-	if (isArray(block)) {
-		for (const child of block) if (walkSlotFallbackBlock(child, node, fragment)) return true;
-		return false;
-	}
-	return fragment(block, (block) => walkSlotFallbackBlock(block, node, fragment));
-}
-function resolveSlotFallbackCarrierOwner(block) {
-	let owner = null;
-	walkSlotFallbackBlock(block, () => false, (block) => {
-		owner = block;
-		return true;
-	});
-	return owner;
-}
-function findFirstSlotFallbackCarrierNode(block) {
-	let node = null;
-	walkSlotFallbackBlock(block, (value) => {
-		node = value;
-		return true;
-	}, (block, walk) => {
-		if (walk(block.nodes)) return true;
-		if (block.anchor) {
-			node = block.anchor;
-			return true;
-		}
-		return false;
-	});
-	return node;
-}
-function collectBlockNodes(block, nodes = [], includeComments = false) {
-	walkSlotFallbackBlock(block, (block) => {
-		if (includeComments || !(block instanceof Comment)) nodes.push(block);
-		return false;
-	}, (block) => {
-		collectBlockNodes(block.nodes, nodes, true);
-		if (block.anchor) nodes.push(block.anchor);
-		return false;
+	let prevValid = isValidBlock(fragment);
+	(fragment.onBeforeUpdate || (fragment.onBeforeUpdate = [])).push(() => {
+		prevValid = isValidBlock(fragment);
 	});
-	return nodes;
-}
-function mutateSlotFallbackCarrier(block, apply) {
-	walkSlotFallbackBlock(block, (block) => {
-		if (!(block instanceof Comment)) apply(block);
-		return false;
-	}, (block) => {
-		apply(block);
-		return false;
+	(fragment.onUpdated || (fragment.onUpdated = [])).push(() => {
+		const valid = isValidBlock(fragment);
+		if (valid !== prevValid) boundary.markDirty();
+		prevValid = valid;
 	});
 }
 function hasSlotFallback(boundary) {
@@ -1769,154 +1925,145 @@ function hasSlotFallback(boundary) {
 	}
 	return false;
 }
-function renderSlotFallback(boundary, scope, ...args) {
-	const [block, hasFallback] = renderSlotFallbackBlock(boundary || null, scope, args);
-	return hasFallback ? block : void 0;
-}
-function renderSlotFallbackBlock(boundary, scope, args) {
-	if (!boundary) return [[], false];
+function renderSlotFallback(boundary, scope) {
+	if (!boundary) return;
 	const localFallback = boundary.getFallback();
-	if (!localFallback) return renderSlotFallbackBlock(boundary.parent, scope, args);
-	const renderFallback = () => withOwnedSlotBoundary(getRedirectedBoundary(boundary), () => localFallback(...args));
-	const local = boundary.run(() => (scope ? scope.run(renderFallback) : renderFallback()) || [], scope);
-	if (isValidBlock(local)) return [local, true];
-	const [inherited] = renderSlotFallbackBlock(boundary.parent, scope, args);
-	return [resolveSlotFallbackCarrierOwner(local) ? [inherited, local] : inherited, true];
-}
-function getSlotEffectiveOutput(outlet) {
-	return outlet.activeFallback || outlet.getContent();
-}
-function isSlotFallbackContentValid(outlet) {
-	return outlet.isContentValid ? outlet.isContentValid() : isValidBlock(outlet.getContent());
-}
-function markSlotFallbackDirty(outlet) {
-	if (outlet.isDisposed && outlet.isDisposed()) return;
-	if (outlet.isRenderingFallback) {
-		if (isHydrating$1) outlet.pendingRecheck = true;
+	if (!localFallback) return renderSlotFallback(boundary.parent, scope);
+	const renderFallback = () => withOwnedSlotBoundary(getRedirectedBoundary(boundary), () => localFallback());
+	const local = boundary.run(() => scope.run(renderFallback) || [], scope);
+	if (isValidBlock(local)) return local;
+	const inherited = renderSlotFallback(boundary.parent, scope);
+	return inherited === void 0 ? local : inherited;
+}
+function detachBlock(block, parent) {
+	if (block instanceof Node) {
+		if (block.parentNode === parent) removeNode(block, parent);
+	} else if (isVaporComponent(block)) {
+		if (block.block) detachBlock(block.block, parent);
+	} else if (isArray(block)) for (let i = 0; i < block.length; i++) detachBlock(block[i], parent);
+	else {
+		detachBlock(block.nodes, parent);
+		if (!(block instanceof SlotFragment) && block.anchor && block.anchor.parentNode === parent) removeNode(block.anchor, parent);
+	}
+}
+function markSlotFallbackDirty(state) {
+	if (state.isDisposed()) return;
+	if (state.isRenderingFallback) {
+		state.pendingRecheck = true;
 		return;
 	}
-	if (outlet.isBusy && outlet.isBusy()) {
-		outlet.pendingRecheck = true;
+	if (state.isBusy()) {
+		state.pendingRecheck = true;
 		return;
 	}
-	recheckSlotFallback(outlet, true);
+	recheckSlotFallback(state, true);
 }
-function clearSlotFallback(outlet) {
-	if (outlet.activeFallback) {
-		const parentNode = outlet.getParentNode();
-		if (parentNode) remove(outlet.activeFallback, parentNode);
-		outlet.activeFallback = null;
+function clearSlotFallback(state) {
+	const fallback = state.activeFallback;
+	if (fallback) {
+		const parentNode = state.getParentNode();
+		if (parentNode) remove(fallback, parentNode);
+		state.activeFallback = null;
 	}
-	if (outlet.fallbackScope) {
-		outlet.fallbackScope.stop();
-		outlet.fallbackScope = void 0;
+	if (state.fallbackScope) {
+		state.fallbackScope.stop();
+		state.fallbackScope = void 0;
 	}
 }
-function renderSlotFallbackForOutlet(outlet) {
-	const scope = new EffectScope$1();
+function renderSlotFallbackState(state) {
+	const scope = new EffectScope$1(true);
 	let renderedFallback;
-	outlet.isRenderingFallback = true;
+	state.isRenderingFallback = true;
 	try {
-		renderedFallback = renderSlotFallback(outlet.boundary, scope) || void 0;
+		renderedFallback = renderSlotFallback(state.boundary, scope);
 	} catch (err) {
 		scope.stop();
 		throw err;
 	} finally {
-		outlet.isRenderingFallback = false;
+		state.isRenderingFallback = false;
 	}
 	if (!renderedFallback) {
 		scope.stop();
-		return { found: false };
+		return;
 	}
 	return {
-		found: true,
 		block: renderedFallback,
 		scope
 	};
 }
-function syncSlotFallbackOrder(outlet, block) {
-	if (!isFragment(block) || !isArray(block.nodes) || block.nodes.length < 2) return;
-	const carrierNodes = collectBlockNodes(outlet.getContent(), [], true);
-	const fallbackNodes = collectBlockNodes(block, [], true);
-	const lastNode = fallbackNodes[fallbackNodes.length - 1];
-	if (!carrierNodes.length || !lastNode) return;
-	const parentNode = carrierNodes[0].parentNode;
-	if (!parentNode || lastNode.parentNode !== parentNode) return;
-	let inOrder = true;
-	let nextNode = lastNode.nextSibling;
-	for (const carrierNode of carrierNodes) {
-		if (carrierNode.parentNode !== parentNode) return;
-		if (carrierNode !== nextNode) {
-			inOrder = false;
-			break;
+function insertActiveSlotFallback(state) {
+	const fallback = state.activeFallback;
+	if (isHydrating$1 || !fallback || !isValidBlock(fallback)) return;
+	const parentNode = state.getParentNode();
+	if (!parentNode) return;
+	insert(fallback, parentNode, state.getAnchor());
+}
+function commitSlotFallback(state, block, scope, detachContent) {
+	const parentNode = state.getParentNode();
+	if (detachContent && !isHydrating$1 && parentNode) detachBlock(state.getContent(), parentNode);
+	state.activeFallback = block;
+	state.fallbackScope = scope;
+	if (isTransitionEnabled) {
+		const transitionState = state;
+		if (transitionState.$transition) {
+			setBlockKey(block, "_fb");
+			transitionState.$transition = applyTransitionHooks(block, transitionState.$transition);
 		}
-		nextNode = carrierNode.nextSibling;
 	}
-	if (inOrder) return;
-	let anchor = lastNode.nextSibling;
-	for (let i = carrierNodes.length - 1; i >= 0; i--) {
-		const carrierNode = carrierNodes[i];
-		parentNode.insertBefore(carrierNode, anchor);
-		anchor = carrierNode;
-	}
-}
-function ensureSlotFallbackOrderHook(outlet, block) {
-	if (!isFragment(block)) return;
-	const fragment = block;
-	if (fragment.hasSlotFallbackOrderHook) return;
-	(fragment.onUpdated || (fragment.onUpdated = [])).push(() => syncSlotFallbackOrder(outlet, fragment));
-	fragment.hasSlotFallbackOrderHook = true;
+	insertActiveSlotFallback(state);
 }
-function insertActiveSlotFallback(outlet) {
-	if (isHydrating$1 || !outlet.activeFallback) return;
-	const parentNode = outlet.getParentNode();
-	if (!parentNode) return;
-	const carrierAnchor = findFirstSlotFallbackCarrierNode(outlet.getContent());
-	insert(outlet.activeFallback, parentNode, carrierAnchor && carrierAnchor.parentNode === parentNode ? carrierAnchor : outlet.getAnchor());
-}
-function commitSlotFallback(outlet, block, scope) {
-	outlet.activeFallback = block;
-	outlet.fallbackScope = scope;
-	ensureSlotFallbackOrderHook(outlet, block);
-	insertActiveSlotFallback(outlet);
-}
-function syncActiveSlotFallback(outlet) {
-	if (!outlet.activeFallback) return;
-	const activeFallback = outlet.activeFallback;
-	queuePostFlushCb(() => {
-		syncSlotFallbackOrder(outlet, activeFallback);
-	});
+function renderAndCommitSlotFallback(state, hadFallback) {
+	const result = renderSlotFallbackState(state);
+	clearSlotFallback(state);
+	if (result) {
+		commitSlotFallback(state, result.block, result.scope, !hadFallback);
+		if (state.pendingRecheck) {
+			state.pendingRecheck = false;
+			recheckSlotFallback(state, true);
+		}
+	}
 }
-function disposeSlotFallback(outlet) {
-	clearSlotFallback(outlet);
-	outlet.pendingRecheck = false;
-	outlet.lastEffectiveValid = void 0;
+function disposeSlotFallback(state) {
+	clearSlotFallback(state);
+	state.pendingRecheck = false;
+	state.lastNodesValid = void 0;
 }
-function recheckSlotFallback(outlet, force = false) {
-	if (outlet.isRenderingFallback) {
-		outlet.pendingRecheck = true;
+function recheckSlotFallback(state, force = false) {
+	if (state.isRenderingFallback) {
+		state.pendingRecheck = true;
 		return;
 	}
-	const prevValid = outlet.lastEffectiveValid === void 0 ? outlet.activeFallback ? isValidBlock(outlet.activeFallback) : isSlotFallbackContentValid(outlet) : outlet.lastEffectiveValid;
-	if (isSlotFallbackContentValid(outlet)) clearSlotFallback(outlet);
-	else {
-		if (force) clearSlotFallback(outlet);
-		if (outlet.activeFallback) insertActiveSlotFallback(outlet);
-		else {
-			const result = renderSlotFallbackForOutlet(outlet);
-			if (result.found) {
-				commitSlotFallback(outlet, result.block, result.scope);
-				if (outlet.pendingRecheck && outlet.rerunRecheckAfterFallbackRender !== false) {
-					outlet.pendingRecheck = false;
-					recheckSlotFallback(outlet, true);
-				}
-			} else clearSlotFallback(outlet);
-		}
+	const fallback = state.activeFallback;
+	const fallbackValid = fallback ? isValidBlock(fallback) : false;
+	const contentValid = state.isContentValid();
+	const prevNodesValid = state.lastNodesValid === void 0 ? fallback ? fallbackValid : contentValid : state.lastNodesValid;
+	if (!force && contentValid && !fallback && prevNodesValid) {
+		state.syncNodes();
+		state.lastNodesValid = true;
+		return;
 	}
-	const nextValid = outlet.activeFallback ? isValidBlock(outlet.activeFallback) : isSlotFallbackContentValid(outlet);
-	if (outlet.syncEffectiveOutput) outlet.syncEffectiveOutput();
-	outlet.lastEffectiveValid = nextValid;
-	if (prevValid !== nextValid) outlet.notifyFallbackValidityChange();
+	if (contentValid) {
+		const content = state.getContent();
+		const hadFallback = !!fallback;
+		clearSlotFallback(state);
+		if (!isHydrating$1 && hadFallback) {
+			const parentNode = state.getParentNode();
+			if (parentNode) insert(content, parentNode, state.getAnchor());
+		}
+	} else if (fallback) {
+		if (prevNodesValid) {
+			if (!fallbackValid && !hasSlotFallback(state.boundary.parent)) {
+				const parentNode = state.getParentNode();
+				if (parentNode) detachBlock(fallback, parentNode);
+			} else if (force) renderAndCommitSlotFallback(state, true);
+		} else if (fallbackValid) insertActiveSlotFallback(state);
+		else if (force) renderAndCommitSlotFallback(state, true);
+	} else renderAndCommitSlotFallback(state, false);
+	const nextFallback = state.activeFallback;
+	const nextNodesValid = nextFallback ? isValidBlock(nextFallback) : state.isContentValid();
+	state.syncNodes();
+	state.lastNodesValid = nextNodesValid;
+	if (prevNodesValid !== nextNodesValid) state.notifyFallbackValidityChange();
 }
 let currentHydratingSlotBoundaryState = null;
 function setCurrentHydratingSlotBoundaryState(state) {
@@ -1971,16 +2118,18 @@ function isReusableDynamicFragmentAnchor(node, anchorLabel) {
 	return isComment(node, anchorLabel) || isComment(node, "") && (anchorLabel === "dynamic-component" || anchorLabel === "async component" || anchorLabel === "keyed");
 }
 var SlotFragment = class extends DynamicFragment {
-	constructor() {
-		super(isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? "slot" : void 0, false, false);
+	constructor(notifyParent = false) {
+		super(isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? "slot" : void 0, false, false, false);
+		this.isSlot = true;
 		this.disposed = false;
 		this.forwarded = false;
 		this.parentSlotBoundary = getCurrentSlotBoundary();
 		this.activeFallback = null;
 		this.pendingRecheck = false;
 		this.isRenderingFallback = false;
-		this.rerunRecheckAfterFallbackRender = false;
+		this.content = EMPTY_BLOCK$1;
 		this.isUpdatingSlot = false;
+		this.notifyParent = notifyParent;
 		if (!isHydrating$1) this.insert = (parent, anchor) => this.insertSlot(parent, anchor);
 		this.remove = (parent) => this.removeSlot(parent);
 	}
@@ -1996,7 +2145,6 @@ var SlotFragment = class extends DynamicFragment {
 			markDirty: () => markSlotFallbackDirty(this)
 		};
 	}
-	registerSlotBoundaryDirty() {}
 	get fallbackBlock() {
 		return this.activeFallback;
 	}
@@ -2006,55 +2154,46 @@ var SlotFragment = class extends DynamicFragment {
 	get slotFallbackBoundary() {
 		return this.ensureSlotFallbackBoundary();
 	}
-	getEffectiveOutput() {
-		return getSlotEffectiveOutput(this);
-	}
 	insertSlot(parent, anchor) {
 		this.disposed = false;
-		if (this.fallbackBlock) {
-			insert(this.fallbackBlock, parent, anchor);
-			mutateSlotFallbackCarrier(this.nodes, (block) => insert(block, parent, anchor));
-			return;
-		}
 		insert(this.nodes, parent, anchor);
 	}
 	removeSlot(parent) {
 		this.disposed = true;
-		if (this.fallbackBlock) mutateSlotFallbackCarrier(this.nodes, (block) => remove(block, parent));
-		else remove(this.nodes, parent);
+		const nodes = this.nodes;
+		remove(nodes, parent);
+		if (this.activeFallback === nodes) this.activeFallback = null;
 		disposeSlotFallback(this);
 	}
+	updateContent(render, key) {
+		this.nodes = this.content;
+		this.update(render, key, false, !this.activeFallback);
+		this.content = this.nodes;
+	}
 	updateSlot(render, fallback, key = render || fallback) {
 		const prevLocalFallback = this.localFallback;
 		this.localFallback = fallback;
-		const fallbackChanged = prevLocalFallback !== fallback;
-		const fastSlotKey = key === void 0 ? render : key;
-		if (!isHydrating$1 && !fallback && !this.parentSlotBoundary && !this._slotFallbackBoundary) {
-			this.update(render, fastSlotKey);
-			return;
-		}
 		const boundary = this.slotFallbackBoundary;
-		const slotRender = render ? () => withOwnedSlotBoundary(boundary, render) : () => [];
-		const slotKey = key === void 0 ? slotRender : key;
+		const slotRender = render ? () => withOwnedSlotBoundary(boundary, render) : () => EMPTY_BLOCK$1;
 		this.isUpdatingSlot = true;
 		this.pendingRecheck = false;
 		try {
-			const shouldForce = fallbackChanged;
+			const shouldForce = prevLocalFallback !== fallback;
 			if (isHydrating$1) withHydratingSlotBoundary(() => {
 				const prev = isHydratingSlotFallbackActive();
 				try {
 					if (hasSlotFallback(boundary)) setCurrentHydratingSlotFallbackActive(true);
-					this.update(slotRender, slotKey);
-					const contentValid = isValidBlock(this.nodes);
+					this.updateContent(slotRender, key);
+					const contentValid = isValidBlock(this.content);
 					recheckSlotFallback(this, shouldForce);
 					if (!hasSlotFallback(boundary) || contentValid) setCurrentHydratingSlotFallbackActive(prev);
-					this.hydrate(!isValidBlock(this.getEffectiveOutput()), true);
+					this.hydrate(!isValidBlock(this.nodes));
 				} finally {
 					setCurrentHydratingSlotFallbackActive(prev);
 				}
 			});
 			else {
-				this.update(slotRender, slotKey);
+				this.updateContent(slotRender, key);
 				recheckSlotFallback(this, shouldForce);
 			}
 		} finally {
@@ -2063,7 +2202,7 @@ var SlotFragment = class extends DynamicFragment {
 		}
 	}
 	getContent() {
-		return this.nodes;
+		return this.content;
 	}
 	getParentNode() {
 		return this.anchor ? this.anchor.parentNode : null;
@@ -2077,16 +2216,28 @@ var SlotFragment = class extends DynamicFragment {
 	isDisposed() {
 		return this.disposed;
 	}
+	isContentValid() {
+		return isValidBlock(this.content);
+	}
+	syncNodes() {
+		this.nodes = this.activeFallback || this.content;
+	}
 	notifyFallbackValidityChange() {
-		if (this.parentSlotBoundary) this.parentSlotBoundary.markDirty();
+		if (this.notifyParent && this.parentSlotBoundary) this.parentSlotBoundary.markDirty();
 	}
 };
 function isFragment(val) {
 	return val instanceof VaporFragment;
 }
+function isInteropFragment(val) {
+	return val instanceof VaporFragment && val.vnode !== void 0;
+}
 function isDynamicFragment(val) {
 	return val instanceof DynamicFragment;
 }
+function isSlotFragment(val) {
+	return val instanceof DynamicFragment && !!val.isSlot;
+}
 //#endregion
 //#region packages/runtime-vapor/src/teleport.ts
 let isTeleportEnabled = false;
@@ -2111,29 +2262,38 @@ function isValidBlock(block) {
 	else if (isVaporComponent(block)) return isValidBlock(block.block);
 	else if (isArray(block)) return block.length > 0 && block.some(isValidBlock);
 	else {
-		const isBlockValid = block.isBlockValid;
-		if (isBlockValid) return isBlockValid.call(block);
+		if (isInteropEnabled && block.isBlockValid) return block.isBlockValid();
 		if (block.validityPending) return true;
-		const getEffectiveOutput = block.getEffectiveOutput;
-		return isValidBlock(getEffectiveOutput ? getEffectiveOutput.call(block) : block.nodes);
+		return isValidBlock(block.nodes);
 	}
 }
 function insert(block, parent, anchor = null, parentSuspense) {
-	anchor = anchor === 0 ? parent.$fc || /* @__PURE__ */ _child(parent) : anchor;
 	if (block instanceof Node) {
-		if (!isHydrating$1) if (isTransitionEnabled && block instanceof Element && block.$transition && !block.$transition.disabled) performTransitionEnter(block, block.$transition, () => parent.insertBefore(block, anchor), parentSuspense);
-		else parent.insertBefore(block, anchor);
-	} else if (isVaporComponent(block)) if (block.isMounted && !block.isDeactivated) insert(block.block, parent, anchor);
-	else mountComponent(block, parent, anchor);
-	else if (isArray(block)) for (const b of block) insert(b, parent, anchor);
-	else {
-		if (block.anchor) {
-			insert(block.anchor, parent, anchor);
-			anchor = block.anchor;
-		}
-		if (block.insert) block.insert(parent, anchor, block.$transition);
-		else insert(block.nodes, parent, anchor, parentSuspense);
+		insertNode(block, parent, anchor, parentSuspense);
+		return;
+	}
+	if (isVaporComponent(block)) {
+		anchor = anchor === 0 ? parent.$fc || /* @__PURE__ */ _child(parent) : anchor;
+		if (block.isMounted && !block.isDeactivated) insert(block.block, parent, anchor);
+		else mountComponent(block, parent, anchor);
+	} else if (isArray(block)) {
+		anchor = anchor === 0 ? parent.$fc || /* @__PURE__ */ _child(parent) : anchor;
+		for (const b of block) insert(b, parent, anchor);
+	} else insertFragment(block, parent, anchor, parentSuspense);
+}
+function insertNode(block, parent, anchor = null, parentSuspense) {
+	anchor = anchor === 0 ? parent.$fc || /* @__PURE__ */ _child(parent) : anchor;
+	if (!isHydrating$1) if (isTransitionEnabled && block instanceof Element && block.$transition && !block.$transition.disabled) performTransitionEnter(block, block.$transition, () => parent.insertBefore(block, anchor), parentSuspense);
+	else parent.insertBefore(block, anchor);
+}
+function insertFragment(block, parent, anchor = null, parentSuspense) {
+	anchor = anchor === 0 ? parent.$fc || /* @__PURE__ */ _child(parent) : anchor;
+	if (block.anchor) {
+		insertNode(block.anchor, parent, anchor, parentSuspense);
+		anchor = block.anchor;
 	}
+	if (block.insert) block.insert(parent, anchor, block.$transition);
+	else insert(block.nodes, parent, anchor, parentSuspense);
 }
 function move(block, parent, anchor = null, moveType = 1, parentComponent, parentSuspense) {
 	anchor = anchor === 0 ? parent.$fc || /* @__PURE__ */ _child(parent) : anchor;
@@ -2160,16 +2320,20 @@ function prepend(parent, ...blocks) {
 	while (i--) insert(blocks[i], parent, 0);
 }
 function remove(block, parent) {
-	if (block instanceof Node) if (isTransitionEnabled && block.$transition && block instanceof Element) performTransitionLeave(block, block.$transition, () => parent && parent.removeChild(block));
-	else parent && parent.removeChild(block);
+	if (block instanceof Node) removeNode(block, parent);
 	else if (isVaporComponent(block)) unmountComponent(block, parent);
 	else if (isArray(block)) for (let i = 0; i < block.length; i++) remove(block[i], parent);
-	else {
-		if (block.remove) block.remove(parent, block.$transition);
-		else remove(block.nodes, parent);
-		if (block.anchor) remove(block.anchor, parent);
-		if (block.scope) block.scope.stop();
-	}
+	else removeFragment(block, parent);
+}
+function removeNode(block, parent) {
+	if (isTransitionEnabled && block.$transition && block instanceof Element) performTransitionLeave(block, block.$transition, () => parent && parent.removeChild(block));
+	else parent && parent.removeChild(block);
+}
+function removeFragment(block, parent) {
+	if (block.remove) block.remove(parent, block.$transition);
+	else remove(block.nodes, parent);
+	if (block.anchor) removeNode(block.anchor, parent);
+	if (block.scope) block.scope.stop();
 }
 /**
 * dev / test only
@@ -2187,7 +2351,7 @@ function normalizeBlock(block) {
 	}
 	return nodes;
 }
-function findBlockNode(block) {
+function findBlockBoundary(block) {
 	const lastChild = findLastChild(block);
 	let { parentNode, nextSibling: nextNode } = lastChild;
 	if (nextNode && isComment(nextNode, "]") && isFragmentBlock(block) && !isComment(lastChild, "]")) nextNode = nextNode.nextSibling;
@@ -2214,73 +2378,42 @@ function isFragmentBlock(block) {
 //#endregion
 //#region packages/runtime-vapor/src/hmr.ts
 function hmrRerender(instance) {
-	const normalized = normalizeBlock(instance.block);
-	const parent = normalized[0].parentNode;
-	const anchor = normalized[normalized.length - 1].nextSibling;
-	instance.scope.reset();
+	const { parentNode, nextNode: anchor } = findBlockBoundary(instance.block);
+	const parent = parentNode;
+	if (instance.renderEffects) {
+		instance.renderEffects.forEach((e) => e.stop());
+		instance.renderEffects.length = 0;
+	}
 	remove(instance.block, parent);
 	const prev = setCurrentInstance(instance);
 	pushWarningContext(instance);
-	devRender(instance);
-	popWarningContext();
-	setCurrentInstance(...prev);
+	try {
+		devRender(instance);
+	} finally {
+		popWarningContext();
+		setCurrentInstance(...prev);
+	}
 	insert(instance.block, parent, anchor);
 }
 function hmrReload(instance, newComp) {
-	if (isKeepAliveEnabled && instance.parent && isKeepAlive(instance.parent)) {
-		instance.parent.hmrRerender();
+	const parentInstance = instance.parent;
+	if (parentInstance) {
+		parentInstance.hmrRerender();
 		return;
 	}
-	const normalized = normalizeBlock(instance.block);
-	const parent = normalized[0].parentNode;
-	const anchor = normalized[normalized.length - 1].nextSibling;
+	const { parentNode, nextNode: anchor } = findBlockBoundary(instance.block);
+	const parent = parentNode;
 	unmountComponent(instance, parent);
-	const parentInstance = instance.parent;
 	const prev = setCurrentInstance(parentInstance);
-	const newInstance = createComponent(newComp, instance.rawProps, instance.rawSlots, instance.isSingleRoot, void 0, instance.appContext);
-	setCurrentInstance(...prev);
-	mountComponent(newInstance, parent, anchor);
-	updateParentBlockOnHmrReload(parentInstance, instance, newInstance);
-	updateParentTeleportOnHmrReload(instance, newInstance);
-}
-/**
-* dev only
-* update parentInstance.block to ensure that the correct parent and
-* anchor are found during parentInstance HMR rerender/reload, as
-* `normalizeBlock` relies on the current instance.block
-*/
-function updateParentBlockOnHmrReload(parentInstance, instance, newInstance) {
-	if (parentInstance) parentInstance.block = replaceBlockInstance(parentInstance.block, instance, newInstance);
-}
-/**
-* dev only
-* during root component HMR reload, since the old component will be unmounted
-* and a new one will be mounted, we need to update the teleport's nodes
-* to ensure that the correct parent and anchor are found during parentInstance
-* HMR rerender/reload, as `normalizeBlock` relies on the current instance.block
-*/
-function updateParentTeleportOnHmrReload(instance, newInstance) {
-	const teleport = instance.parentTeleport;
-	if (teleport) {
-		newInstance.parentTeleport = teleport;
-		teleport.nodes = replaceBlockInstance(teleport.nodes, instance, newInstance);
-	}
-}
-function replaceBlockInstance(block, instance, newInstance) {
-	if (block === instance) return newInstance;
-	if (isArray(block)) {
-		for (let i = 0; i < block.length; i++) block[i] = replaceBlockInstance(block[i], instance, newInstance);
-		return block;
-	}
-	if (isVaporComponent(block)) {
-		block.block = replaceBlockInstance(block.block, instance, newInstance);
-		return block;
-	}
-	if (isFragment(block)) {
-		block.nodes = replaceBlockInstance(block.nodes, instance, newInstance);
-		return block;
+	let newInstance;
+	try {
+		newInstance = createComponent(newComp, instance.rawProps, instance.rawSlots, instance.isSingleRoot, void 0, instance.appContext);
+	} finally {
+		setCurrentInstance(...prev);
 	}
-	return block;
+	mountComponent(newInstance, parent, anchor);
+	const app = instance.appContext.app;
+	if (app && app._instance === instance) app._instance = newInstance;
 }
 //#endregion
 //#region packages/runtime-vapor/src/suspense.ts
@@ -2298,7 +2431,9 @@ function setParentSuspense(suspense) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/component.ts
-function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appContext = currentInstance && currentInstance.appContext || emptyContext, managedMount = false) {
+function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appContext = currentInstance && currentInstance.appContext || emptyContext, managedMount = false, ce) {
+	const wasInOnceSlot = inOnceSlot;
+	if (wasInOnceSlot) once = true;
 	if (isInteropEnabled && isCollectingVdomSlotVNodes) {
 		if (component.__vapor) return;
 		const owner = getScopeOwner();
@@ -2339,7 +2474,7 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
 			if (cached) return cached;
 		}
 		if (isInteropEnabled && appContext.vapor && !component.__vapor) {
-			const frag = appContext.vapor.vdomMount(component, currentInstance, rawProps, rawSlots);
+			const frag = appContext.vapor.vdomMount(component, currentInstance, rawProps, normalizeRawSlots(rawSlots), once);
 			if (isCollectingVdomSlotVNodes) return frag;
 			if (!isHydrating$1) {
 				if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
@@ -2347,14 +2482,14 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
 			return frag;
 		}
 		if (isTeleportEnabled && isVaporTeleport(component)) {
-			const frag = component.process(rawProps, rawSlots);
+			const frag = component.process(rawProps, normalizeRawSlots(rawSlots));
 			if (_insertionParent) onScopeDispose$1(() => frag.dispose(), true);
 			if (!isHydrating$1) {
 				if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
 			} else frag.hydrate();
 			return frag;
 		}
-		const instance = new VaporComponentInstance(component, rawProps, rawSlots, appContext, once);
+		const instance = new VaporComponentInstance(component, rawProps, rawSlots, appContext, once, ce);
 		if (isKeepAliveEnabled && currentKeepAliveCtx && !isAsyncWrapper(instance)) {
 			currentKeepAliveCtx.processShapeFlag(instance);
 			setCurrentKeepAliveCtx(null);
@@ -2375,7 +2510,10 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
 				instance.propsOptions = normalizePropsOptions(component);
 				instance.emitsOptions = normalizeEmitsOptions(component);
 			}
-			if (isHydrating$1 && isAsyncWrapper(instance) && component.__asyncHydrate && !component.__asyncResolved) component.__asyncHydrate(currentHydrationNode, instance, () => setupComponent(instance, component));
+			if (isHydrating$1 && isAsyncWrapper(instance) && component.__asyncHydrate && !component.__asyncResolved) {
+				const setup = () => setupComponent(instance, component);
+				component.__asyncHydrate(currentHydrationNode, instance, wasInOnceSlot ? () => withOnceSlot(setup, false) : setup);
+			} else if (wasInOnceSlot) withOnceSlot(() => setupComponent(instance, component), false);
 			else setupComponent(instance, component);
 		} finally {
 			if (!!(process.env.NODE_ENV !== "production")) {
@@ -2393,7 +2531,7 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
 		if (isSuspenseEnabled && isHydrating$1 && hydrationClose && instance.suspense && instance.asyncDep && !instance.asyncResolved && instance.restoreAsyncContext) {
 			deferHydrationBoundary = true;
 			instance.deferredHydrationBoundary = () => {
-				if (instance.block && hydrationClose && findBlockNode(instance.block).nextNode === hydrationClose.nextSibling) setCurrentHydrationNode(hydrationClose);
+				if (instance.block && hydrationClose && findBlockBoundary(instance.block).nextNode === hydrationClose.nextSibling) setCurrentHydrationNode(hydrationClose);
 				finalizeHydrationBoundary();
 			};
 			exitHydrationCursor(hydrationCursor);
@@ -2475,7 +2613,7 @@ const emptyContext = {
 	provides: /* @__PURE__ */ Object.create(null)
 };
 var VaporComponentInstance = class {
-	constructor(comp, rawProps, rawSlots, appContext, once) {
+	constructor(comp, rawProps, rawSlots, appContext, once, ce) {
 		this.accessedAttrs = false;
 		this.vapor = true;
 		this.uid = nextUid();
@@ -2498,6 +2636,7 @@ var VaporComponentInstance = class {
 		}
 		this.block = null;
 		this.scope = new EffectScope(true);
+		this.isOnce = !!once;
 		this.emit = emit.bind(null, this);
 		this.expose = expose.bind(null, this);
 		this.refs = EMPTY_OBJ;
@@ -2511,17 +2650,18 @@ var VaporComponentInstance = class {
 		this.asyncDep = null;
 		this.asyncResolved = false;
 		this.isMounted = this.isUnmounted = this.isUpdating = this.isDeactivated = false;
-		this.rawProps = rawProps || EMPTY_OBJ;
-		this.hasFallthrough = hasFallthroughAttrs(comp, rawProps);
+		this.rawProps = this.isOnce && rawProps ? snapshotRawProps(rawProps) : rawProps || EMPTY_OBJ;
+		this.hasFallthrough = hasFallthroughAttrs(comp, this.rawProps);
 		if (rawProps || comp.props) {
-			const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp, once);
+			const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp);
 			this.attrs = new Proxy(this, attrsHandlers);
 			this.props = comp.props ? new Proxy(this, propsHandlers) : isFunction(comp) ? this.attrs : EMPTY_OBJ;
 		} else this.props = this.attrs = EMPTY_OBJ;
-		this.rawSlots = rawSlots || EMPTY_OBJ;
-		this.slots = rawSlots ? rawSlots.$ ? new Proxy(rawSlots, dynamicSlotsProxyHandlers) : rawSlots : EMPTY_OBJ;
+		const normalizedRawSlots = normalizeRawSlots(rawSlots);
+		this.rawSlots = normalizedRawSlots || EMPTY_OBJ;
+		this.slots = normalizedRawSlots ? new Proxy(normalizedRawSlots, dynamicSlotsProxyHandlers) : EMPTY_OBJ;
 		this.scopeId = getCurrentScopeId();
-		if (comp.ce) comp.ce(this);
+		if (ce) ce(this);
 		if (!!(process.env.NODE_ENV !== "production")) if (this.props === this.attrs) this.accessedAttrs = true;
 		else {
 			const attrs = this.attrs;
@@ -2544,6 +2684,14 @@ function isVaporComponent(value) {
 	return value instanceof VaporComponentInstance;
 }
 /**
+* Resolve an asset component by name before passing it to the fallback helper;
+* a string passed directly to `createComponentWithFallback` is plain element
+* fallback, not a component name.
+*/
+function createAssetComponent(name, rawProps, rawSlots, isSingleRoot, once, maybeSelfReference, appContext) {
+	return createComponentWithFallback(resolveComponent(name, maybeSelfReference), rawProps, rawSlots, isSingleRoot, once, appContext);
+}
+/**
 * Used when a component cannot be resolved at compile time
 * and needs rely on runtime resolution - where it might fallback to a plain
 * element if the resolution fails.
@@ -2556,7 +2704,7 @@ function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot, onc
 				if (isComment(node, "")) advanceHydrationNode(node);
 				return node;
 			}
-			const nextAnchor = locateNextNode(currentHydrationNode);
+			const nextAnchor = nextLogicalSibling(currentHydrationNode);
 			if (nextAnchor && isReusableNullComponentAnchor(nextAnchor)) return nextAnchor;
 		}
 		return !!(process.env.NODE_ENV !== "production") ? /* @__PURE__ */ createComment("ndc") : /* @__PURE__ */ createTextNode("");
@@ -2568,12 +2716,17 @@ function isReusableNullComponentAnchor(node) {
 	return isComment(node, "") || isComment(node, "dynamic-component") || isComment(node, "async component") || isComment(node, "keyed");
 }
 function createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once) {
+	rawSlots = normalizeRawSlots(rawSlots);
 	const _insertionParent = insertionParent;
 	const _insertionAnchor = insertionAnchor;
 	let hydrationCursor = null;
 	if (isHydrating$1) hydrationCursor = enterHydrationCursor();
 	else resetInsertionState();
-	const el = isHydrating$1 ? adoptTemplate(currentHydrationNode, `<${comp}/>`) : /* @__PURE__ */ createElement(comp);
+	const defaultSlot = rawSlots && getSlot(rawSlots, "default");
+	const hasDynamicSlots = !!rawSlots && !!rawSlots.$;
+	const adoptHydrationChildren = !!defaultSlot;
+	const hydrationTemplate = hasDynamicSlots && !defaultSlot ? `<${comp}><!></${comp}>` : `<${comp}/>`;
+	const el = isHydrating$1 ? adoptTemplate(currentHydrationNode, hydrationTemplate, adoptHydrationChildren) : /* @__PURE__ */ createElement(comp);
 	el.$root = isSingleRoot;
 	if (!isHydrating$1) {
 		const scopeId = getCurrentScopeId();
@@ -2587,7 +2740,7 @@ function createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once) {
 	if (rawSlots) {
 		let nextNode = null;
 		if (isHydrating$1) {
-			nextNode = locateNextNode(el);
+			nextNode = nextLogicalSibling(el);
 			setCurrentHydrationNode(el.firstChild);
 		}
 		if (rawSlots.$) {
@@ -2642,7 +2795,7 @@ function mountComponent(instance, parent, anchor) {
 	if (!isHydrating$1) {
 		insert(instance.block, parent, anchor);
 		setComponentScopeId(instance);
-	}
+	} else trackComponentScopeId(instance);
 	if (instance.m) queuePostFlushCb(instance.m);
 	if (isKeepAliveEnabled && instance.shapeFlag & 256 && instance.a) queuePostFlushCb(instance.a);
 	instance.isMounted = true;
@@ -2708,18 +2861,65 @@ function handleSetupResult(setupResult, component, instance) {
 	else if (setupResult === EMPTY_OBJ && component.render) instance.block = callRender(component.render, instance, setupResult);
 	else instance.block = setupResult;
 	if (instance.hasFallthrough && component.inheritAttrs !== false && Object.keys(instance.attrs).length) {
-		const root = getRootElement(instance.block, (frag) => frag.attrs = instance.attrs, false);
-		if (root) renderEffect(() => {
-			const attrs = isFunction(component) && !(isTransitionEnabled ? isVaporTransition(component) : false) ? getFunctionalFallthrough(instance.attrs) : instance.attrs;
+		const getFallthroughAttrs = isFunction(component) && !(isTransitionEnabled ? isVaporTransition(component) : false) ? () => getFunctionalFallthrough(instance.attrs) : () => instance.attrs;
+		applyFallthroughAttrs(instance.block, instance, getFallthroughAttrs);
+	}
+	if (!!(process.env.NODE_ENV !== "production")) popWarningContext();
+}
+function applyFallthroughAttrs(block, instance, getFallthroughAttrs, scope) {
+	let hasSlotFragment = false;
+	let dynamicFragments;
+	const root = getRootElement(block, (frag) => {
+		if (frag.isSlot) hasSlotFragment = true;
+		else (dynamicFragments || (dynamicFragments = [])).push(frag);
+	}, false);
+	const dynamicRoot = root ? void 0 : getSingleDynamicRootChain(block);
+	const fragmentsToRegister = root ? dynamicFragments : dynamicRoot && dynamicRoot.fragments;
+	if (fragmentsToRegister) {
+		for (const frag of fragmentsToRegister) if (!frag.isSlot) registerDynamicFragmentFallthroughAttrs(frag, instance, getFallthroughAttrs);
+	}
+	if (root && !hasSlotFragment) {
+		const applyEffect = () => renderEffect(() => {
+			const attrs = getFallthroughAttrs();
 			if (attrs) applyFallthroughProps(root, attrs);
 		});
-		else if (!!(process.env.NODE_ENV !== "production") && (!instance.accessedAttrs && isArray(instance.block) && instance.block.length || isTeleportEnabled && isTeleportFragment(instance.block))) warnExtraneousAttributes(instance.attrs);
+		scope ? scope.run(applyEffect) : applyEffect();
+	} else if (!!(process.env.NODE_ENV !== "production") && (hasSlotFragment || dynamicRoot && dynamicRoot.hasNonSingleRoot || isTeleportEnabled && containsTeleportFragment(block) || !instance.accessedAttrs && isArray(block) && block.length)) warnExtraneousAttributes(instance.attrs);
+}
+function getSingleDynamicRootChain(block) {
+	if (block instanceof DynamicFragment) {
+		const { nodes } = block;
+		const nested = getSingleDynamicRootChain(nodes);
+		return {
+			fragments: nested ? [block, ...nested.fragments] : [block],
+			hasNonSingleRoot: nested ? nested.hasNonSingleRoot : isArray(nodes) && nodes.some((child) => !(child instanceof Comment))
+		};
+	}
+	if (isFragment(block) && !(isTeleportEnabled && isTeleportFragment(block))) return getSingleDynamicRootChain(block.nodes);
+	if (isArray(block)) {
+		let singleRoot;
+		let hasComment = false;
+		for (const child of block) {
+			if (child instanceof Comment) {
+				hasComment = true;
+				continue;
+			}
+			const childRoot = getSingleDynamicRootChain(child);
+			if (!childRoot || singleRoot) return;
+			singleRoot = childRoot;
+		}
+		return hasComment ? singleRoot : void 0;
 	}
-	if (!!(process.env.NODE_ENV !== "production")) popWarningContext();
 }
-function getCurrentScopeId() {
-	const scopeOwner = getScopeOwner();
-	return scopeOwner ? scopeOwner.type.__scopeId : void 0;
+function containsTeleportFragment(block) {
+	if (isTeleportFragment(block)) return true;
+	if (isArray(block)) return block.some((child) => !(child instanceof Comment) && containsTeleportFragment(child));
+	return isFragment(block) && containsTeleportFragment(block.nodes);
+}
+function registerDynamicFragmentFallthroughAttrs(frag, instance, getFallthroughAttrs) {
+	if (frag.hasFallthroughAttrs) return;
+	frag.hasFallthroughAttrs = true;
+	(frag.onBeforeInsert || (frag.onBeforeInsert = [])).push((nodes) => applyFallthroughAttrs(nodes, instance, getFallthroughAttrs, frag.scope));
 }
 //#endregion
 //#region packages/runtime-vapor/src/apiCreateApp.ts
@@ -2829,17 +3029,20 @@ function defineVaporAsyncComponent(source) {
 				frag.update(() => createInnerComp(resolvedComp, instance));
 				return frag;
 			}
+			frag.validityPending = true;
 			const onError = (err) => {
 				setPendingRequest(null);
 				handleError(err, instance, 13, !errorComponent);
 			};
 			if (suspensible && instance.suspense) return load().then(() => {
 				resolvedComp = getResolvedComp();
+				frag.validityPending = false;
 				if (resolvedComp) frag.update(() => createInnerComp(resolvedComp, instance));
 				return frag;
 			}).catch((err) => {
 				onError(err);
-				if (errorComponent) frag.update(() => createInnerComp(errorComponent, instance, { error: () => err }, {}));
+				frag.validityPending = false;
+				if (errorComponent) frag.update(() => createErrorComp(errorComponent, instance, err));
 				return frag;
 			});
 			const { loaded, error, delayed } = useAsyncComponentState(delay, timeout, onError);
@@ -2853,8 +3056,11 @@ function defineVaporAsyncComponent(source) {
 				resolvedComp = getResolvedComp();
 				let render;
 				if (loaded.value && resolvedComp) render = () => createInnerComp(resolvedComp, instance);
-				else if (error.value && errorComponent) render = () => createComponent(errorComponent, { error: () => error.value });
-				else if (loadingComponent && !delayed.value) render = () => createComponent(loadingComponent);
+				else if (error.value && errorComponent) {
+					const err = error.value;
+					render = () => createErrorComp(errorComponent, instance, err);
+				} else if (loadingComponent && !delayed.value) render = () => createInnerComp(loadingComponent, instance);
+				frag.validityPending = !render && !error.value;
 				frag.update(render);
 				if (isKeepAliveEnabled && frag.keepAliveCtx) frag.keepAliveCtx.cacheBlock();
 			});
@@ -2862,10 +3068,13 @@ function defineVaporAsyncComponent(source) {
 		}
 	});
 }
+function createErrorComp(comp, parent, error) {
+	return createInnerComp(comp, parent, { error: () => error }, {});
+}
 function createInnerComp(comp, parent, rawProps = parent.rawProps, rawSlots = parent.rawSlots) {
 	const prevInstance = setCurrentInstance(parent);
 	try {
-		return createComponent(comp, rawProps, rawSlots, void 0, void 0, parent.appContext);
+		return createComponent(comp, rawProps, rawSlots, void 0, parent.isOnce, parent.appContext);
 	} finally {
 		setCurrentInstance(...prevInstance);
 	}
@@ -2929,10 +3138,11 @@ function setDisplay(target, value) {
 		else el.style.display = "none";
 		else if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating$1) {
 			if (!value && el.style.display !== "none") {
-				warnPropMismatch(el, "style", 3, `display: ${el.style.display}`, "display: none");
-				logMismatchError();
-				el.style.display = "none";
-				el[vShowOriginalDisplay] = "";
+				if (warnPropMismatch(el, "style", 3, `display: ${el.style.display}`, "display: none")) {
+					logMismatchError();
+					el.style.display = "none";
+					el[vShowOriginalDisplay] = "";
+				}
 			}
 		} else el.style.display = value ? el[vShowOriginalDisplay] : "none";
 		el[vShowHidden] = !value;
@@ -3082,7 +3292,7 @@ function applyResolvedTransitionHooks(block, hooks) {
 		if (block.length === 1) block = block[0];
 		else if (block.length === 0) return { hooks };
 	}
-	if (hooks.applyGroup && block instanceof ForFragment) {
+	if (hooks.applyGroup && (block instanceof ForFragment || isSlotFragment(block) || isVaporComponent(block) && isSlotFragment(block.block))) {
 		hooks.applyGroup(block, hooks.props, hooks.state, hooks.instance);
 		return { hooks };
 	}
@@ -3295,7 +3505,7 @@ const VaporKeepAlive = /* @__PURE__ */ withKeepAliveEnabled(/* @__PURE__ */ defi
 				cache.forEach((cached) => {
 					unsetShapeFlag(cached);
 					if (cached !== current) {
-						const parentNode = findBlockNode(cached).parentNode;
+						const parentNode = findBlockBoundary(cached).parentNode;
 						if (parentNode) remove(cached, parentNode);
 					}
 				});
@@ -3387,7 +3597,7 @@ const VaporKeepAlive = /* @__PURE__ */ withKeepAliveEnabled(/* @__PURE__ */ defi
 			const cached = cache.get(key);
 			if (cached && (!current || cached !== current)) {
 				unsetShapeFlag(cached);
-				const parentNode = findBlockNode(cached).parentNode;
+				const parentNode = findBlockBoundary(cached).parentNode;
 				if (parentNode) remove(cached, parentNode);
 			} else if (current) unsetShapeFlag(current);
 			cache.delete(key);
@@ -3438,7 +3648,7 @@ const VaporKeepAlive = /* @__PURE__ */ withKeepAliveEnabled(/* @__PURE__ */ defi
 			keptAliveScopes.forEach((scope) => scope.stop());
 			keptAliveScopes.clear();
 		});
-		const prevCtx = setCurrentKeepAliveCtx({
+		const keepAliveCtx = {
 			processShapeFlag,
 			cacheBlock,
 			cacheScope(cacheKey, scopeLookupKey, scope) {
@@ -3453,11 +3663,14 @@ const VaporKeepAlive = /* @__PURE__ */ withKeepAliveEnabled(/* @__PURE__ */ defi
 			getScope(key) {
 				return deleteScope(key);
 			}
-		});
+		};
+		const prevCtx = setCurrentKeepAliveCtx(keepAliveCtx);
 		let children = slots.default();
 		setCurrentKeepAliveCtx(prevCtx);
+		registerDynamicFragmentHooks(children, keepAliveCtx);
 		if (isArray(children)) {
 			children = children.filter((child) => !(child instanceof Comment));
+			if (children.length === 1) registerDynamicFragmentHooks(children[0], keepAliveCtx);
 			if (children.length > 1) {
 				if (!!(process.env.NODE_ENV !== "production")) warn(`KeepAlive should contain exactly one component child.`);
 				return children;
@@ -3466,6 +3679,20 @@ const VaporKeepAlive = /* @__PURE__ */ withKeepAliveEnabled(/* @__PURE__ */ defi
 		return children;
 	}
 }));
+function registerDynamicFragmentHooks(block, keepAliveCtx) {
+	if (!isDynamicFragment(block)) return;
+	(block.onBeforeRemove || (block.onBeforeRemove = [])).push((scope) => {
+		const cacheKey = block.keyed ? withCurrentCacheKey(block.current, () => keepAliveCtx.processShapeFlag(block.nodes)) : keepAliveCtx.processShapeFlag(block.nodes);
+		if (cacheKey !== false) {
+			keepAliveCtx.cacheScope(cacheKey, block.current, scope);
+			return true;
+		}
+		return false;
+	});
+	(block.onUpdated || (block.onUpdated = [])).unshift(() => {
+		if (block.$transition && block.$transition.mode === "out-in") keepAliveCtx.cacheBlock(block);
+	});
+}
 const shouldCache = (block, props, interop = false) => {
 	const isAsync = isAsyncWrapper(interop ? block.vnode : block);
 	const type = interop && isInteropEnabled ? block.vnode.type : block.type;
@@ -3502,9 +3729,6 @@ function getInnerBlock(block) {
 	else if (isFragment(block)) return getInnerBlock(block.nodes);
 	return [void 0, false];
 }
-function isInteropFragment(block) {
-	return !!(isFragment(block) && block.vnode);
-}
 function getInstanceFromCache(cached) {
 	if (isVaporComponent(cached)) return cached;
 	if (isInteropEnabled) return cached.vnode.component;
@@ -3530,6 +3754,8 @@ function deactivate$1(instance, container) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/vdomInterop.ts
+const EMPTY_BLOCK = EMPTY_ARR;
+const EMPTY_VNODES = EMPTY_ARR;
 function filterReservedProps(props) {
 	const filtered = {};
 	for (const key in props) if (!isReservedProp(key)) filtered[key] = props[key];
@@ -3537,7 +3763,7 @@ function filterReservedProps(props) {
 }
 const vaporInteropImpl = {
 	mount(vnode, container, anchor, parentComponent, parentSuspense, onBeforeMount, onVnodeBeforeMount) {
-		let selfAnchor = vnode.anchor = /* @__PURE__ */ createTextNode();
+		const selfAnchor = vnode.anchor = /* @__PURE__ */ createTextNode();
 		if (isHydrating$1) queuePostFlushCb(() => container.insertBefore(selfAnchor, anchor));
 		else {
 			vnode.el = selfAnchor;
@@ -3555,7 +3781,9 @@ const vaporInteropImpl = {
 		const instance = vnode.component = createComponent(vnode.type, { $: dynamicPropSource }, rawSlots, void 0, void 0, parentComponent ? parentComponent.appContext : vnode.appContext, true);
 		instance.rawPropsRef = propsRef;
 		instance.rawSlotsRef = slotsRef;
-		ensureVNodeHookState(instance, vnode);
+		const vnodeHookState = ensureVNodeHookState(instance, vnode);
+		const applyScopeId = (vnode) => setInteropVnodeScopeId(instance, vnode, instance.parent);
+		vnodeHookState.postRootSyncHooks.push(applyScopeId);
 		if (parentComponent && isKeepAlive(parentComponent)) {
 			enableKeepAlive();
 			instance.shapeFlag = vnode.shapeFlag;
@@ -3574,6 +3802,7 @@ const vaporInteropImpl = {
 			vnode.dirs = null;
 		}
 		mountComponent(instance, container, selfAnchor);
+		if (!isHydrating$1) applyScopeId(vnodeHookState.vnode);
 		simpleSetCurrentInstance(prev);
 		return instance;
 	},
@@ -3594,6 +3823,7 @@ const vaporInteropImpl = {
 			instance.rawSlotsRef.value = normalizeInteropSlots(n2.children);
 			queuePostFlushCb(() => {
 				syncVNodeEl(n2, instance);
+				setInteropVnodeScopeId(instance, n2, instance.parent);
 				if (!instance.isUpdating) vnodeHookState.skipVnodeHooks = false;
 			});
 		}
@@ -3607,14 +3837,14 @@ const vaporInteropImpl = {
 				const anchor = vnode.anchor;
 				unmountComponent(instance, container);
 				if (!doRemove) {
-					const blockContainer = shouldUseCurrentParent(instance.block) ? anchor && anchor.parentNode : void 0;
+					const blockContainer = needsHostParentForRemove(instance.block) ? anchor && anchor.parentNode : void 0;
 					remove(instance.block, blockContainer);
 				}
 			}
 		} else if (vnode.vb) {
 			const anchor = vnode.anchor;
 			if (vnode.el && vnode.el !== anchor && isComment(vnode.el, "[")) slotStartAnchor = vnode.el;
-			const blockContainer = container || (shouldUseCurrentParent(vnode.vb) ? anchor && anchor.parentNode : void 0);
+			const blockContainer = container || (needsHostParentForRemove(vnode.vb) ? anchor && anchor.parentNode : void 0);
 			remove(vnode.vb, blockContainer);
 			stopVaporSlotScope(vnode);
 		}
@@ -3759,26 +3989,35 @@ const vaporSlotPropsProxyHandler = {
 	}
 };
 const vaporSlotWrappersCache = /* @__PURE__ */ new WeakMap();
-const vaporSlotsProxyHandler = { get(target, key) {
-	const slot = target[key];
-	if (isFunction(slot)) {
-		slot.__vapor = true;
-		let wrappers = vaporSlotWrappersCache.get(target);
-		if (!wrappers) vaporSlotWrappersCache.set(target, wrappers = /* @__PURE__ */ new Map());
-		const cached = wrappers.get(key);
-		if (cached && cached.slot === slot) return cached.wrapped;
-		const wrapped = (props) => {
-			return normalizeVaporSlotVNodes(slot, props) || [renderSlot({ [key]: slot }, key, props)];
-		};
-		wrapped.__vs = slot;
-		wrappers.set(key, {
-			slot,
-			wrapped
-		});
-		return wrapped;
+const vaporSlotsProxyHandler = {
+	get(target, key) {
+		const slot = isString(key) && !isInternalSlotKey(key) ? getSlot(target, key) : target[key];
+		if (isFunction(slot)) {
+			slot.__vapor = true;
+			let wrappers = vaporSlotWrappersCache.get(target);
+			if (!wrappers) vaporSlotWrappersCache.set(target, wrappers = /* @__PURE__ */ new Map());
+			const cached = wrappers.get(key);
+			if (cached && cached.slot === slot) return cached.wrapped;
+			const wrapped = (props) => {
+				return normalizeVaporSlotVNodes(slot, props) || [renderSlot({ [key]: slot }, key, props)];
+			};
+			wrapped.__vs = slot;
+			wrappers.set(key, {
+				slot,
+				wrapped
+			});
+			return wrapped;
+		}
+		return slot;
+	},
+	ownKeys(target) {
+		return Array.from(dynamicSlotsProxyHandlers.ownKeys(target)).filter((key) => isString(key) && !isInternalSlotKey(key));
+	},
+	getOwnPropertyDescriptor(target, key) {
+		if (!isString(key) || isInternalSlotKey(key)) return;
+		return dynamicSlotsProxyHandlers.getOwnPropertyDescriptor(target, key);
 	}
-	return slot;
-} };
+};
 const collectedVdomSlotVNodes = /* @__PURE__ */ new WeakMap();
 function normalizeVaporSlotVNodes(slot, props) {
 	if (props && hasVNodeSlotProps(props)) return;
@@ -3860,29 +4099,43 @@ function removeAttachedNodes(block, parent) {
 		if (block.parentNode === parent) remove(block, parent);
 	} else if (isArray(block)) for (let i = 0; i < block.length; i++) removeAttachedNodes(block[i], parent);
 }
-function appendVnodeUpdatedHook(vnode, hook) {
+function appendVnodeHook(vnode, key, hook) {
 	const props = vnode.props || (vnode.props = {});
-	const existing = props.onVnodeUpdated;
-	props.onVnodeUpdated = existing ? isArray(existing) ? [...existing, hook] : [existing, hook] : hook;
+	const existing = props[key];
+	props[key] = existing ? isArray(existing) ? [...existing, hook] : [existing, hook] : hook;
+}
+function trackFragmentVNodeUpdates(frag, vnode, syncNodes) {
+	const beforeUpdate = () => {
+		if (frag.onBeforeUpdate) frag.onBeforeUpdate.forEach((bu) => bu());
+	};
+	const updated = () => {
+		syncNodes();
+		if (frag.onUpdated) frag.onUpdated.forEach((u) => u());
+	};
+	appendVnodeHook(vnode, "onVnodeBeforeUpdate", beforeUpdate);
+	appendVnodeHook(vnode, "onVnodeUpdated", updated);
 }
-function trackFragmentVNodeUpdates(frag, vnode) {
-	const refresh = () => {
+function createVNodeFragment(vnode) {
+	const frag = createInteropFragment(EMPTY_BLOCK, vnode);
+	frag.$key = vnode.key;
+	let validityPending = !isHydrating$1;
+	const syncNodes = () => {
 		frag.nodes = resolveVNodeNodes(vnode);
-		frag.validityPending = false;
-		if (frag.onUpdated) frag.onUpdated.forEach((m) => m());
+		validityPending = false;
+	};
+	frag.isBlockValid = () => validityPending ? true : isValidBlock(frag.nodes);
+	trackFragmentVNodeUpdates(frag, vnode, syncNodes);
+	return {
+		frag,
+		syncNodes
 	};
-	appendVnodeUpdatedHook(vnode, refresh);
 }
 /**
 * Mount VNode in vapor
 */
 function mountVNode(internals, vnode, parentComponent) {
 	const suspense = parentSuspense || parentComponent && parentComponent.suspense;
-	const frag = new VaporFragment([]);
-	frag.validityPending = !isHydrating$1;
-	frag.vnode = vnode;
-	frag.$key = vnode.key;
-	trackFragmentVNodeUpdates(frag, vnode);
+	const { frag, syncNodes } = createVNodeFragment(vnode);
 	let isMounted = false;
 	const unmount = (parentNode, transition) => {
 		if (transition) setTransitionHooks(vnode, transition);
@@ -3895,8 +4148,7 @@ function mountVNode(internals, vnode, parentComponent) {
 		hydrateVNode(vnode, parentComponent);
 		onScopeDispose(unmount, true);
 		isMounted = true;
-		frag.nodes = resolveVNodeNodes(vnode);
-		frag.validityPending = false;
+		syncNodes();
 	};
 	frag.insert = (parentNode, anchor, transition) => {
 		if (isHydrating$1) return;
@@ -3915,8 +4167,7 @@ function mountVNode(internals, vnode, parentComponent) {
 			} else internals.m(vnode, parentNode, anchor, 2, parentComponent);
 			simpleSetCurrentInstance(prev);
 		}
-		frag.nodes = resolveVNodeNodes(vnode);
-		frag.validityPending = false;
+		syncNodes();
 		if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
 	};
 	frag.remove = unmount;
@@ -3925,15 +4176,12 @@ function mountVNode(internals, vnode, parentComponent) {
 /**
 * Mount vdom component in vapor
 */
-function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots) {
+function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots, once) {
 	const suspense = parentSuspense || parentComponent && parentComponent.suspense;
 	const useBridge = shouldUseRendererBridge(component);
 	const comp = useBridge ? ensureRendererBridge(component) : component;
-	const frag = new VaporFragment([]);
-	frag.validityPending = !isHydrating$1;
-	const vnode = frag.vnode = createVNode(comp, rawProps && extend({}, new Proxy(rawProps, rawPropsProxyHandlers)));
-	frag.$key = vnode.key;
-	trackFragmentVNodeUpdates(frag, vnode);
+	const vnode = createVNode(comp, rawProps && extend({}, new Proxy(rawProps, rawPropsProxyHandlers)));
+	const { frag, syncNodes } = createVNodeFragment(vnode);
 	if (!isCollectingVdomSlotVNodes && isKeepAliveEnabled && currentKeepAliveCtx) {
 		currentKeepAliveCtx.processShapeFlag(frag);
 		if (component.__asyncLoader) {
@@ -3946,8 +4194,8 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
 		}
 		setCurrentKeepAliveCtx(null);
 	}
-	const wrapper = new VaporComponentInstance(useBridge ? comp : { props: component.props }, rawProps, rawSlots, parentComponent ? parentComponent.appContext : void 0, void 0);
-	if (isCollectingVdomSlotVNodes) collectedVdomSlotVNodes.set(frag, createCollectedVDOMSlotVNode(component, rawProps, wrapper.slots));
+	const wrapper = new VaporComponentInstance(useBridge ? comp : { props: component.props }, rawProps, rawSlots, parentComponent ? parentComponent.appContext : void 0, once);
+	if (isCollectingVdomSlotVNodes) collectedVdomSlotVNodes.set(frag, createCollectedVDOMSlotVNode(component, rawProps, wrapper.rawSlots));
 	vnode.vi = (instance) => {
 		instance.props = shallowReactive(wrapper.props);
 		const attrs = createInternalObject();
@@ -3970,7 +4218,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
 				};
 			}
 		});
-		instance.slots = wrapper.slots === EMPTY_OBJ ? EMPTY_OBJ : new Proxy(wrapper.slots, vaporSlotsProxyHandler);
+		instance.slots = wrapper.rawSlots === EMPTY_OBJ ? EMPTY_OBJ : new Proxy(wrapper.rawSlots, vaporSlotsProxyHandler);
 	};
 	let rawRef = null;
 	let isMounted = false;
@@ -4001,8 +4249,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
 		if (!isHydrating$1) return;
 		hydrateVNode(vnode, parentComponent);
 		isMounted = true;
-		frag.nodes = resolveVNodeNodes(vnode);
-		frag.validityPending = false;
+		syncNodes();
 	};
 	vnode.scopeId = getCurrentScopeId() || null;
 	vnode.slotScopeIds = currentSlotScopeIds;
@@ -4020,8 +4267,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
 			} else internals.m(vnode, parentNode, anchor, 2, parentComponent);
 			simpleSetCurrentInstance(prev);
 		}
-		frag.nodes = resolveVNodeNodes(vnode);
-		frag.validityPending = false;
+		syncNodes();
 		if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
 	};
 	frag.remove = unmount;
@@ -4061,12 +4307,6 @@ function ensureRendererBridge(component) {
 	if (!bridge) rendererBridgeCache.set(component, bridge = (props, { slots }) => createVNode(component, props, slots));
 	return bridge;
 }
-function trackSlotVNodeUpdates(frag, vnode) {
-	trackSlotVNodeUpdatesWithRefresh(vnode, () => {
-		frag.nodes = resolveVNodeNodes(vnode);
-		if (frag.onUpdated) frag.onUpdated.forEach((m) => m());
-	});
-}
 function hasValidVNodeContent(vnode) {
 	return !!ensureValidVNode(vnode.type === Fragment && isArray(vnode.children) ? vnode.children : [vnode]);
 }
@@ -4074,13 +4314,12 @@ function isSlotOutletOnlyVNode(vnode) {
 	if (vnode.type === VaporSlot) return true;
 	return vnode.type === Fragment && isArray(vnode.children) && vnode.children.every((child) => isVNode(child) && isSlotOutletOnlyVNode(child));
 }
-function hydrateForwardedEmptySlotFragment(vnode, parentComponent) {
+function hydrateForwardedEmptySlotFragment(vnode, parentComponent, contentValid) {
 	if (vnode.type !== Fragment || !isArray(vnode.children)) return false;
 	const children = vnode.children;
 	const inheritedEmptySlotEndAnchor = isComment(currentHydrationNode, "]") && isComment(currentHydrationNode.previousSibling, "[") ? currentHydrationNode : null;
 	const slotEndAnchor = getCurrentSlotEndAnchor() || inheritedEmptySlotEndAnchor;
 	const slotStartAnchor = slotEndAnchor && slotEndAnchor.previousSibling;
-	const contentValid = hasValidVNodeContent(vnode);
 	if (!contentValid && currentHydrationNode === slotEndAnchor && slotStartAnchor && isComment(slotStartAnchor, "[")) {
 		vnode.el = slotStartAnchor;
 		vnode.anchor = slotEndAnchor;
@@ -4104,10 +4343,11 @@ function hydrateForwardedEmptySlotFragment(vnode, parentComponent) {
 	if (currentHydrationNode === fragmentEndAnchor) advanceHydrationNode(fragmentEndAnchor);
 	return true;
 }
-function trackSlotVNodeUpdatesWithRefresh(vnode, refresh) {
+function trackSlotVNodeUpdatesWithRefresh(vnode, refresh, beforeUpdate) {
 	const onUpdated = () => refresh();
 	const track = (node) => {
-		appendVnodeUpdatedHook(node, onUpdated);
+		if (beforeUpdate) appendVnodeHook(node, "onVnodeBeforeUpdate", beforeUpdate);
+		appendVnodeHook(node, "onVnodeUpdated", onUpdated);
 		if (node.type === Fragment && isArray(node.children)) node.children.forEach((child) => {
 			if (isVNode(child)) track(child);
 		});
@@ -4117,73 +4357,81 @@ function trackSlotVNodeUpdatesWithRefresh(vnode, refresh) {
 /**
 * Mount vdom slot in vapor
 */
-function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallback) {
+function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallback, once, slotRoot) {
 	const suspense = parentSuspense || parentComponent.suspense;
-	const frag = new VaporFragment([]);
-	trackSlotBoundaryDirtying(frag);
-	frag.validityPending = !isHydrating$1;
+	const frag = createInteropFragment();
+	let validityPending = !isHydrating$1;
 	const instance = currentInstance;
 	let isMounted = false;
 	const contentState = {
-		nodes: [],
+		nodes: EMPTY_BLOCK,
 		valid: false,
 		rendered: null
 	};
-	let currentParentNode;
-	let currentAnchor;
+	let currentParentNode = null;
+	let currentAnchor = null;
 	let disposed = false;
 	const scope = effectScope();
 	const inheritedBoundary = frag.inheritedSlotBoundary;
 	let isContentUpdateRecheck = false;
 	let localFallback;
-	let outlet;
+	let fallbackState;
+	frag.isBlockValid = () => {
+		if (validityPending) return true;
+		return fallbackState.activeFallback ? isValidBlock(fallbackState.activeFallback) : contentState.valid;
+	};
 	const boundary = {
 		get parent() {
 			return inheritedBoundary;
 		},
 		getFallback: () => localFallback,
-		run: (fn) => runWithFragmentRenderCtx(frag, fn),
-		markDirty: () => markSlotFallbackDirty(outlet)
+		run: (fn) => runWithFragmentCtx(frag, fn),
+		markDirty: () => markSlotFallbackDirty(fallbackState)
 	};
-	outlet = {
+	fallbackState = {
 		boundary,
 		activeFallback: null,
 		pendingRecheck: false,
 		isRenderingFallback: false,
 		getContent: () => contentState.nodes,
-		getParentNode: () => getSlotFallbackParentNode(currentParentNode, contentState.nodes),
-		getAnchor: () => currentAnchor || null,
+		getParentNode: () => currentParentNode,
+		getAnchor: () => currentAnchor,
+		isBusy: () => false,
 		isDisposed: () => disposed,
 		isContentValid: () => contentState.valid,
-		syncEffectiveOutput: () => {
-			frag.nodes = getSlotEffectiveOutput(outlet);
+		syncNodes: () => {
+			frag.nodes = fallbackState.activeFallback || contentState.nodes;
 		},
 		notifyFallbackValidityChange: () => {
-			if (!isContentUpdateRecheck && inheritedBoundary) inheritedBoundary.markDirty();
+			if (slotRoot && !isContentUpdateRecheck && inheritedBoundary) inheritedBoundary.markDirty();
 		}
 	};
-	localFallback = fallback ? () => fallback(internals, parentComponent) : void 0;
-	const setRenderedContent = (rendered) => {
+	if (slotRoot) trackSlotBoundaryDirtying(frag);
+	localFallback = fallback ? once ? () => withOnceSlot(() => fallback(internals, parentComponent)) : () => fallback(internals, parentComponent) : void 0;
+	const setRenderedContent = (rendered, knownValid) => {
 		contentState.rendered = rendered;
 		if (isVNode(rendered)) {
 			contentState.nodes = resolveVNodeNodes(rendered);
-			contentState.valid = hasValidVNodeContent(rendered);
+			contentState.valid = knownValid === void 0 ? hasValidVNodeContent(rendered) : knownValid;
 		} else if (rendered) {
 			contentState.nodes = rendered;
-			contentState.valid = isValidBlock(rendered);
+			contentState.valid = knownValid === void 0 ? isValidBlock(rendered) : knownValid;
 		} else {
-			contentState.nodes = [];
+			contentState.nodes = EMPTY_BLOCK;
 			contentState.valid = false;
 		}
-		frag.validityPending = false;
+		validityPending = false;
 	};
 	const notifyUpdated = () => {
-		if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
+		if (isMounted && frag.onUpdated) frag.onUpdated.forEach((u) => u());
+	};
+	const notifyBeforeUpdate = () => {
+		if (isMounted && frag.onBeforeUpdate) frag.onBeforeUpdate.forEach((bu) => bu());
 	};
 	const recheckAfterContentUpdate = (forceFallbackRecheck = false) => {
 		isContentUpdateRecheck = true;
 		try {
-			recheckSlotFallback(outlet, forceFallbackRecheck);
+			recheckSlotFallback(fallbackState, forceFallbackRecheck);
 		} finally {
 			isContentUpdateRecheck = false;
 		}
@@ -4194,7 +4442,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 	};
 	frag.insert = (parentNode, anchor) => {
 		if (isHydrating$1) return;
-		currentParentNode = parentNode || void 0;
+		currentParentNode = parentNode;
 		currentAnchor = anchor;
 		if (!isMounted) {
 			scope.run(render);
@@ -4202,29 +4450,30 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 		} else {
 			if (isVNode(contentState.rendered)) internals.m(contentState.rendered, parentNode, anchor, 2, parentComponent);
 			else if (contentState.rendered) insert(contentState.rendered, parentNode, anchor);
-			insertActiveSlotFallback(outlet);
+			insertActiveSlotFallback(fallbackState);
 		}
 		notifyUpdated();
 	};
 	frag.remove = (parentNode) => {
-		currentParentNode = parentNode || currentParentNode || void 0;
-		currentAnchor = currentAnchor || null;
+		if (parentNode) currentParentNode = parentNode;
 		scope.stop();
 		disposed = true;
 		if (isVNode(contentState.rendered)) internals.um(contentState.rendered, parentComponent, null, !!parentNode);
 		else if (contentState.rendered) remove(contentState.rendered, parentNode);
-		disposeSlotFallback(outlet);
+		disposeSlotFallback(fallbackState);
 	};
 	const render = () => {
 		const prev = currentInstance;
 		simpleSetCurrentInstance(instance);
 		try {
-			renderEffect(() => {
-				runWithFragmentRenderCtx(frag, () => withOwnedSlotBoundary(boundary, () => {
+			const renderSlotContent = () => {
+				notifyBeforeUpdate();
+				runWithFragmentCtx(frag, () => withOwnedSlotBoundary(boundary, () => {
 					let slotContent;
 					let slotContentValid = false;
 					if (slotsRef.value) {
-						slotContent = renderSlot(slotsRef.value, isFunction(name) ? name() : name, props);
+						const renderContent = () => renderSlot(slotsRef.value, isFunction(name) ? name() : name, props);
+						slotContent = once ? withOnceSlot(renderContent) : renderContent();
 						if (isVNode(slotContent)) if (slotContent.type === Fragment) {
 							const children = slotContent.children;
 							ensureVaporSlotFallback(children, localFallback);
@@ -4237,13 +4486,20 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 						if (isVNode(hydratedContent)) {
 							frag.vnode = hydratedContent;
 							frag.$key = getVNodeKey(hydratedContent);
-							trackSlotVNodeUpdates(frag, hydratedContent);
-							if (!hydrateForwardedEmptySlotFragment(hydratedContent, parentComponent)) hydrateVNode(hydratedContent, parentComponent);
-							setRenderedContent(hydratedContent);
+							const refreshSlotVNode = () => {
+								frag.nodes = resolveVNodeNodes(hydratedContent);
+								if (frag.onUpdated) frag.onUpdated.forEach((m) => m());
+							};
+							trackSlotVNodeUpdatesWithRefresh(hydratedContent, refreshSlotVNode, slotRoot ? notifyBeforeUpdate : void 0);
+							if (!hydrateForwardedEmptySlotFragment(hydratedContent, parentComponent, slotContentValid)) hydrateVNode(hydratedContent, parentComponent);
+							const hydratedEnd = hydratedContent.anchor;
+							currentParentNode = hydratedEnd.parentNode;
+							currentAnchor = hydratedEnd.nextSibling;
+							setRenderedContent(hydratedContent, slotContentValid);
 						} else if (hydratedContent) {
 							frag.vnode = null;
 							frag.$key = void 0;
-							setRenderedContent(hydratedContent);
+							setRenderedContent(hydratedContent, slotContentValid);
 						} else {
 							frag.vnode = null;
 							frag.$key = void 0;
@@ -4255,17 +4511,20 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 					if (isVNode(slotContent)) {
 						frag.vnode = slotContent;
 						frag.$key = getVNodeKey(slotContent);
-						trackSlotVNodeUpdatesWithRefresh(slotContent, () => {
+						const refreshSlotVNode = () => {
 							const prevValid = contentState.valid;
 							const prevOutput = frag.nodes;
 							setRenderedContent(slotContent);
 							recheckAfterContentUpdate();
 							if (contentState.valid !== prevValid || !isSameResolvedOutput(prevOutput, frag.nodes)) notifyUpdated();
-						});
+						};
+						trackSlotVNodeUpdatesWithRefresh(slotContent, refreshSlotVNode, slotRoot ? notifyBeforeUpdate : void 0);
 						const prevRendered = contentState.rendered;
-						if (prevRendered && !isVNode(prevRendered)) remove(prevRendered, currentParentNode);
-						internals.p(isVNode(prevRendered) ? prevRendered : null, slotContent, currentParentNode, currentAnchor, parentComponent, suspense, void 0, slotContent.slotScopeIds);
-						setRenderedContent(slotContent);
+						const prevIsVNode = isVNode(prevRendered);
+						const prevVNode = prevIsVNode && (!fallbackState.activeFallback || contentState.valid) ? prevRendered : null;
+						if (prevRendered && !prevIsVNode) remove(prevRendered, currentParentNode);
+						internals.p(prevVNode, slotContent, currentParentNode, currentAnchor, parentComponent, suspense, void 0, slotContent.slotScopeIds);
+						setRenderedContent(slotContent, slotContentValid);
 						finishContentUpdate();
 						return;
 					}
@@ -4276,7 +4535,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 						if (isVNode(prevRendered)) internals.um(prevRendered, parentComponent, null, true);
 						else if (prevRendered) remove(prevRendered, currentParentNode);
 						insert(slotContent, currentParentNode, currentAnchor);
-						setRenderedContent(slotContent);
+						setRenderedContent(slotContent, slotContentValid);
 						finishContentUpdate();
 						return;
 					}
@@ -4287,7 +4546,8 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 					setRenderedContent(null);
 					finishContentUpdate();
 				}));
-			});
+			};
+			once ? renderSlotContent() : renderEffect(renderSlotContent);
 		} finally {
 			simpleSetCurrentInstance(prev);
 		}
@@ -4295,23 +4555,25 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 	frag.hydrate = () => {
 		if (!isHydrating$1) return;
 		scope.run(render);
-		currentParentNode = currentHydrationNode.parentNode;
-		currentAnchor = currentHydrationNode;
+		if (!currentParentNode) {
+			currentAnchor = getCurrentSlotEndAnchor() || currentHydrationNode;
+			currentParentNode = currentAnchor.parentNode;
+		}
 		isMounted = true;
 	};
 	return frag;
 }
-function shouldUseCurrentParent(block) {
-	if (isVaporComponent(block)) return isKeepAlive(block) || shouldUseCurrentParent(block.block);
-	if (isArray(block)) return block.some(shouldUseCurrentParent);
-	if (isFragment(block)) return shouldUseCurrentParent(block.nodes);
+function needsHostParentForRemove(block) {
+	if (isVaporComponent(block)) return isKeepAlive(block) || needsHostParentForRemove(block.block);
+	if (isArray(block)) return block.some(needsHostParentForRemove);
+	if (isFragment(block)) return needsHostParentForRemove(block.nodes);
 	return false;
 }
 const vaporInteropPlugin = (app) => {
 	enableSuspense();
 	setInteropEnabled();
 	const internals = ensureRenderer().internals;
-	app._context.vapor = extend(vaporInteropImpl, {
+	app._context.vapor = extend({}, vaporInteropImpl, {
 		vdomMount: createVDOMComponent.bind(null, internals),
 		vdomUnmount: internals.umt,
 		vdomSlot: renderVDOMSlot.bind(null, internals),
@@ -4334,30 +4596,17 @@ function createFallback(fallback, parentComponent, isVNodeFallback) {
 	const internals = ensureRenderer().internals;
 	return () => {
 		if (isVNodeFallback()) {
-			const frag = createVNodeChildrenFragment(internals, () => fallback().map(normalizeVNode), parentComponent);
+			const frag = createVNodeChildrenFragment(internals, () => {
+				const children = fallback();
+				return children == null ? EMPTY_VNODES : normalizeInteropSlotValue(children);
+			}, parentComponent);
 			if (isHydrating$1 && frag.hydrate) frag.hydrate();
 			return frag;
 		}
 		return fallback();
 	};
 }
-const renderEmptyVNodes = () => [];
-function runWithFragmentRenderCtx(fragment, fn) {
-	const prevSlotOwner = setCurrentSlotOwner(fragment.slotOwner);
-	let prevKeepAliveCtx = null;
-	if (isKeepAliveEnabled) prevKeepAliveCtx = setCurrentKeepAliveCtx(fragment.keepAliveCtx || null);
-	try {
-		return withOwnedSlotBoundary(fragment.inheritedSlotBoundary, fn);
-	} finally {
-		if (isKeepAliveEnabled) setCurrentKeepAliveCtx(prevKeepAliveCtx);
-		setCurrentSlotOwner(prevSlotOwner);
-	}
-}
-function getSlotFallbackParentNode(currentParentNode, content) {
-	if (currentParentNode) return currentParentNode;
-	const carrierAnchor = findFirstSlotFallbackCarrierNode(content);
-	return carrierAnchor ? carrierAnchor.parentNode : null;
-}
+const renderEmptyVNodes = () => EMPTY_VNODES;
 function resolveInteropVaporSlotState(vnode) {
 	const slot = vnode.vs;
 	let state = slot.state;
@@ -4405,12 +4654,14 @@ function renderVaporSlot(vnode, parentComponent, parentSuspense) {
 	simpleSetCurrentInstance(parentComponent);
 	if (isSuspenseEnabled && parentSuspense) prevSuspense = setParentSuspense(parentSuspense);
 	try {
-		if (!vnode.vs || !vnode.vs.slot) return [];
+		if (!vnode.vs || !vnode.vs.slot) return EMPTY_BLOCK;
 		const slotState = resolveInteropVaporSlotState(vnode);
-		const frag = new VaporFragment([]);
-		frag.validityPending = !isHydrating$1;
+		const scopeIds = getInteropVaporSlotScopeIds(vnode, parentComponent);
+		const frag = createInteropFragment();
+		let validityPending = !isHydrating$1;
+		frag.isBlockValid = () => validityPending ? true : isValidBlock(frag.nodes);
 		const inheritedBoundary = frag.inheritedSlotBoundary;
-		let contentNodes = [];
+		let contentNodes = EMPTY_BLOCK;
 		let isResolvingContent = false;
 		let localFallback;
 		let outletFallback;
@@ -4418,13 +4669,13 @@ function renderVaporSlot(vnode, parentComponent, parentSuspense) {
 		let currentAnchor = null;
 		let slotScope;
 		let disposed = false;
-		let outlet;
+		let fallbackState;
 		let ownedSlotFragment;
 		let ownedSlotFragmentDirtyQueued = false;
 		const markInteropFallbackDirty = () => {
 			const target = ownedSlotFragment;
 			if (!target) {
-				markSlotFallbackDirty(outlet);
+				markSlotFallbackDirty(fallbackState);
 				return;
 			}
 			if (ownedSlotFragmentDirtyQueued) return;
@@ -4432,7 +4683,6 @@ function renderVaporSlot(vnode, parentComponent, parentSuspense) {
 			queuePostFlushCb(() => {
 				ownedSlotFragmentDirtyQueued = false;
 				markSlotFallbackDirty(target);
-				syncActiveSlotFallback(target);
 			});
 		};
 		const outletFallbackBoundary = {
@@ -4440,7 +4690,7 @@ function renderVaporSlot(vnode, parentComponent, parentSuspense) {
 				return inheritedBoundary;
 			},
 			getFallback: () => slotState.outletFallback.value ? outletFallback : void 0,
-			run: (fn) => runWithFragmentRenderCtx(frag, fn),
+			run: (fn) => runWithFragmentCtx(frag, fn),
 			markDirty: markInteropFallbackDirty
 		};
 		const localFallbackBoundary = {
@@ -4448,37 +4698,38 @@ function renderVaporSlot(vnode, parentComponent, parentSuspense) {
 				return outletFallbackBoundary;
 			},
 			getFallback: () => slotState.localFallback.value ? localFallback : void 0,
-			run: (fn) => runWithFragmentRenderCtx(frag, fn),
+			run: (fn) => runWithFragmentCtx(frag, fn),
 			markDirty: markInteropFallbackDirty
 		};
-		outlet = {
+		fallbackState = {
 			boundary: localFallbackBoundary,
 			activeFallback: null,
 			pendingRecheck: false,
 			isRenderingFallback: false,
 			getContent: () => contentNodes,
-			getParentNode: () => getSlotFallbackParentNode(currentParentNode, contentNodes),
+			getParentNode: () => currentParentNode,
 			getAnchor: () => currentAnchor,
 			isBusy: () => isResolvingContent,
 			isDisposed: () => disposed,
-			syncEffectiveOutput: () => {
-				frag.nodes = getSlotEffectiveOutput(outlet);
-				frag.validityPending = false;
+			isContentValid: () => isValidBlock(contentNodes),
+			syncNodes: () => {
+				frag.nodes = fallbackState.activeFallback || contentNodes;
+				validityPending = false;
 			},
 			notifyFallbackValidityChange: () => {
 				if (inheritedBoundary) inheritedBoundary.markDirty();
 			}
 		};
 		const takePendingRecheck = () => {
-			const shouldRecheck = outlet.pendingRecheck;
-			outlet.pendingRecheck = false;
+			const shouldRecheck = fallbackState.pendingRecheck;
+			fallbackState.pendingRecheck = false;
 			return shouldRecheck;
 		};
 		const dispose = (parentNode) => {
 			if (disposed) return;
-			currentParentNode = parentNode || currentParentNode;
+			if (parentNode) currentParentNode = parentNode;
 			disposed = true;
-			disposeSlotFallback(outlet);
+			disposeSlotFallback(fallbackState);
 			slotScope = void 0;
 			currentParentNode = null;
 			currentAnchor = null;
@@ -4486,22 +4737,23 @@ function renderVaporSlot(vnode, parentComponent, parentSuspense) {
 		try {
 			localFallback = createFallback(() => (slotState.localFallback.value || renderEmptyVNodes)(), parentComponent, () => !!slotState.localFallback.value && !!slotState.localFallback.value.__vdom);
 			outletFallback = createFallback(() => (slotState.outletFallback.value || renderEmptyVNodes)(), parentComponent, () => !!slotState.outletFallback.value && !!slotState.outletFallback.value.__vdom);
-			const preferSlotFragmentOwnership = !!slotState.localFallback.value || !!slotState.outletFallback.value;
-			outlet.pendingRecheck = false;
+			const hasInteropFallback = !!slotState.localFallback.value || !!slotState.outletFallback.value;
+			fallbackState.pendingRecheck = false;
 			const finalizeResolvedContent = (resolvedContent) => {
-				if (preferSlotFragmentOwnership && resolvedContent instanceof SlotFragment) return resolvedContent;
-				contentNodes = resolvedContent || [];
-				recheckSlotFallback(outlet, takePendingRecheck());
+				if (resolvedContent && scopeIds) setScopeId(resolvedContent, scopeIds);
+				if (hasInteropFallback && resolvedContent instanceof SlotFragment) return resolvedContent;
+				contentNodes = resolvedContent || EMPTY_BLOCK;
+				recheckSlotFallback(fallbackState, takePendingRecheck());
 				return resolvedContent;
 			};
 			let resolvedContent;
 			isResolvingContent = true;
 			try {
-				if (isHydrating$1) resolvedContent = withHydratingSlotBoundary(() => finalizeResolvedContent(runWithFragmentRenderCtx(frag, () => {
+				if (isHydrating$1) resolvedContent = withHydratingSlotBoundary(() => finalizeResolvedContent(runWithFragmentCtx(frag, () => {
 					const renderSlot = () => withOwnedSlotBoundary(localFallbackBoundary, () => invokeVaporSlot(vnode));
 					return hasSlotFallback(localFallbackBoundary) ? withHydratingSlotFallbackActive(renderSlot) : renderSlot();
 				})));
-				else resolvedContent = finalizeResolvedContent(runWithFragmentRenderCtx(frag, () => withOwnedSlotBoundary(localFallbackBoundary, () => invokeVaporSlot(vnode))));
+				else resolvedContent = finalizeResolvedContent(runWithFragmentCtx(frag, () => withOwnedSlotBoundary(localFallbackBoundary, () => invokeVaporSlot(vnode))));
 			} finally {
 				isResolvingContent = false;
 			}
@@ -4512,30 +4764,30 @@ function renderVaporSlot(vnode, parentComponent, parentSuspense) {
 					onScopeDispose(() => dispose(), true);
 				});
 			}
-			if (preferSlotFragmentOwnership && resolvedContent instanceof SlotFragment) {
+			if (hasInteropFallback && resolvedContent instanceof SlotFragment) {
 				ownedSlotFragment = resolvedContent;
 				trackInteropFallbackChanges(vnode.vs.scope, slotState, () => markInteropFallbackDirty());
 				dispose();
 				return resolvedContent;
 			}
-			outlet.pendingRecheck = false;
+			fallbackState.pendingRecheck = false;
 			frag.insert = (parentNode, anchor) => {
 				currentParentNode = parentNode;
 				currentAnchor = anchor;
-				if (outlet.activeFallback) {
-					insertActiveSlotFallback(outlet);
-					mutateSlotFallbackCarrier(contentNodes, (block) => insert(block, parentNode, anchor));
-				} else insert(frag.nodes, parentNode, anchor);
+				if (fallbackState.activeFallback) insertActiveSlotFallback(fallbackState);
+				else insert(frag.nodes, parentNode, anchor);
 			};
 			frag.remove = (parentNode) => {
-				if (outlet.activeFallback) mutateSlotFallbackCarrier(contentNodes, (block) => remove(block, parentNode));
-				else remove(frag.nodes, parentNode);
+				if (!fallbackState.activeFallback) remove(frag.nodes, parentNode);
 				dispose(parentNode);
 			};
 			trackInteropFallbackChanges(vnode.vs.scope, slotState, () => {
-				recheckSlotFallback(outlet, true);
-				syncActiveSlotFallback(outlet);
+				recheckSlotFallback(fallbackState, true);
 			});
+			if (isHydrating$1 && currentHydrationNode) {
+				currentAnchor = currentHydrationNode;
+				currentParentNode = currentAnchor.parentNode;
+			}
 			return frag;
 		} catch (e) {
 			dispose();
@@ -4584,7 +4836,8 @@ function ensureVNodeHookState(instance, vnode) {
 	if (!state) {
 		state = {
 			vnode,
-			skipVnodeHooks: false
+			skipVnodeHooks: false,
+			postRootSyncHooks: []
 		};
 		vnodeHookStateMap.set(instance, state);
 		(instance.bu || (instance.bu = [])).push(() => {
@@ -4592,7 +4845,11 @@ function ensureVNodeHookState(instance, vnode) {
 			const vnodeHook = state.vnode.props && state.vnode.props.onVnodeBeforeUpdate;
 			if (vnodeHook) callWithAsyncErrorHandling(vnodeHook, instance.parent, 7, [state.vnode, state.vnode]);
 		});
-		(instance.u || (instance.u = [])).unshift(() => syncVNodeEl(state.vnode, instance));
+		(instance.u || (instance.u = [])).unshift(() => {
+			syncVNodeEl(state.vnode, instance);
+			const hooks = state.postRootSyncHooks;
+			for (let i = 0; i < hooks.length; i++) hooks[i](state.vnode);
+		});
 		instance.u.push(() => {
 			if (state.skipVnodeHooks) {
 				state.skipVnodeHooks = false;
@@ -4606,24 +4863,24 @@ function ensureVNodeHookState(instance, vnode) {
 }
 function createVNodeChildrenFragment(internals, render, parentComponent) {
 	const suspense = parentSuspense || parentComponent && parentComponent.suspense;
-	const frag = new VaporFragment([]);
+	const frag = createInteropFragment();
 	let contentValid = false;
-	frag.validityPending = !isHydrating$1;
-	frag.isBlockValid = () => frag.validityPending ? true : contentValid;
+	let validityPending = !isHydrating$1;
+	frag.isBlockValid = () => validityPending ? true : contentValid;
 	let currentVNode = null;
-	let currentChildren = [];
+	let currentChildren = EMPTY_VNODES;
 	let currentParentNode = null;
 	let currentAnchor = null;
 	let isMounted = false;
 	let isRenderEffectStarted = false;
 	const scope = effectScope();
 	const syncResolvedNodes = (children = currentChildren) => {
-		const prevValid = frag.validityPending ? true : contentValid;
+		const prevValid = validityPending ? true : contentValid;
 		contentValid = !!ensureValidVNode(children);
-		if (children.length === 0) frag.nodes = [];
+		if (children.length === 0) frag.nodes = EMPTY_BLOCK;
 		else if (children.length === 1) frag.nodes = resolveVNodeNodes(children[0]);
 		else frag.nodes = children.map(resolveVNodeNodes);
-		frag.validityPending = false;
+		validityPending = false;
 		return prevValid !== contentValid;
 	};
 	const notifyUpdated = (validityChanged = false) => {
@@ -4635,7 +4892,7 @@ function createVNodeChildrenFragment(internals, render, parentComponent) {
 		simpleSetCurrentInstance(parentComponent);
 		try {
 			renderEffect(() => {
-				runWithFragmentRenderCtx(frag, () => {
+				runWithFragmentCtx(frag, () => {
 					const nextChildren = render();
 					if (isHydrating$1) {
 						nextChildren.forEach((vnode) => hydrateVNode(vnode, parentComponent));
@@ -4647,8 +4904,9 @@ function createVNodeChildrenFragment(internals, render, parentComponent) {
 					} else if (!isMounted) {
 						currentChildren = nextChildren;
 						currentVNode = createVNode(Fragment, null, nextChildren);
-						contentValid = !!ensureValidVNode(nextChildren);
-						frag.validityPending = false;
+						const wasPending = validityPending;
+						const validityChanged = syncResolvedNodes(nextChildren);
+						if (!wasPending) notifyUpdated(validityChanged);
 						return;
 					} else if (!currentVNode) {
 						currentChildren = nextChildren;
@@ -4734,7 +4992,23 @@ function normalizeInteropSlots(rawSlots) {
 	});
 	return normalized;
 }
+const interopSlotCache = /* @__PURE__ */ new WeakMap();
 function normalizeInteropSlot(rawSlot, ctx) {
+	let cache = interopSlotCache.get(rawSlot);
+	if (!cache) interopSlotCache.set(rawSlot, cache = {});
+	if (ctx) {
+		let ctxCache = cache.ctx;
+		if (!ctxCache) cache.ctx = ctxCache = /* @__PURE__ */ new WeakMap();
+		const cached = ctxCache.get(ctx);
+		if (cached) return cached;
+		const normalized = createNormalizedInteropSlot(rawSlot, ctx);
+		ctxCache.set(ctx, normalized);
+		return normalized;
+	}
+	if (cache.noCtx) return cache.noCtx;
+	return cache.noCtx = createNormalizedInteropSlot(rawSlot, ctx);
+}
+function createNormalizedInteropSlot(rawSlot, ctx) {
 	const normalized = withCtx((...args) => normalizeInteropSlotValue(rawSlot(...args)), ctx);
 	normalized._c = false;
 	return normalized;
@@ -4748,7 +5022,7 @@ function normalizeInteropDefaultSlot(value) {
 function normalizeInteropSlotValue(value) {
 	return isArray(value) ? value.map((child) => normalizeVNode(child)) : [normalizeVNode(value)];
 }
-const isInternalSlotKey = (key) => key === "_" || key === "_ctx" || key === "$stable";
+const isInternalSlotKey = (key) => key === "_" || key === "_ctx" || key === "$stable" || key === "$";
 const interopSlotsSourceHandlers = {
 	get(target, key) {
 		const slots = target.value;
@@ -4760,7 +5034,7 @@ const interopSlotsSourceHandlers = {
 	},
 	ownKeys(target) {
 		const slots = target.value;
-		return slots ? Object.keys(slots).filter((key) => !isInternalSlotKey(key)) : [];
+		return slots ? Object.keys(slots).filter((key) => !isInternalSlotKey(key)) : EMPTY_ARR;
 	},
 	getOwnPropertyDescriptor(target, key) {
 		const slots = target.value;
@@ -4780,6 +5054,48 @@ function createInteropRawSlots(slotsRef) {
 	});
 	return rawSlots;
 }
+const interopScopeIdRootMap = /* @__PURE__ */ new WeakMap();
+const interopScopeIdFragmentMap = /* @__PURE__ */ new WeakMap();
+function trackInteropScopeIdFragment(instance, frag) {
+	if (interopScopeIdFragmentMap.get(frag) === instance) return;
+	interopScopeIdFragmentMap.set(frag, instance);
+	(frag.onUpdated || (frag.onUpdated = [])).push(() => {
+		const state = vnodeHookStateMap.get(instance);
+		if (!state) return;
+		syncVNodeEl(state.vnode, instance);
+		setInteropVnodeScopeId(instance, state.vnode, instance.parent);
+	});
+}
+function setInteropVnodeScopeId(instance, vnode, parentComponent) {
+	const root = getRootElement(instance, (frag) => trackInteropScopeIdFragment(instance, frag));
+	if (!root) {
+		interopScopeIdRootMap.delete(instance);
+		return;
+	}
+	if (interopScopeIdRootMap.get(instance) === root) return;
+	interopScopeIdRootMap.set(instance, root);
+	const scopeIds = getInteropVnodeScopeIds(vnode, parentComponent);
+	if (!scopeIds) return;
+	for (let i = 0; i < scopeIds.length; i++) root.setAttribute(scopeIds[i], "");
+}
+function getInteropVnodeScopeIds(vnode, parentComponent) {
+	const scopeIds = [];
+	if (vnode.scopeId) scopeIds.push(vnode.scopeId);
+	if (vnode.slotScopeIds) scopeIds.push(...vnode.slotScopeIds);
+	scopeIds.push(...getInheritedScopeIds(vnode, parentComponent));
+	return scopeIds.length ? scopeIds : void 0;
+}
+function getInteropVaporSlotScopeIds(vnode, parentComponent) {
+	const scopeIds = [];
+	if (vnode.slotScopeIds) scopeIds.push(...vnode.slotScopeIds);
+	scopeIds.push(...getInheritedScopeIds(vnode, parentComponent));
+	return scopeIds.length ? scopeIds : void 0;
+}
+function createInteropFragment(nodes = EMPTY_BLOCK, vnode = null) {
+	const frag = new VaporFragment(nodes);
+	frag.vnode = vnode;
+	return frag;
+}
 //#endregion
 //#region packages/runtime-vapor/src/components/Teleport.ts
 const VaporTeleportImpl = {
@@ -4897,10 +5213,6 @@ var TeleportFragment = class extends VaporFragment {
 	}
 	bindChildren(block) {
 		if (this.parentComponent && this.parentComponent.ut) this.registerUpdateCssVars(block);
-		if (!!(process.env.NODE_ENV !== "production")) {
-			if (isVaporComponent(block)) block.parentTeleport = this;
-			else if (isArray(block)) block.forEach((node) => isVaporComponent(node) && (node.parentTeleport = this));
-		}
 	}
 	handleChildrenUpdate(children) {
 		if (isHydrating$1 || !this.parent || !this.mountContainer) {
@@ -4908,7 +5220,10 @@ var TeleportFragment = class extends VaporFragment {
 			return;
 		}
 		remove(this.nodes, this.mountContainer);
-		insert(this.nodes = children, this.mountContainer, this.mountAnchor);
+		this.nodes = children;
+		const onBeforeInsert = this.onBeforeInsert;
+		if (onBeforeInsert) onBeforeInsert.forEach((fn) => fn(this.nodes));
+		insert(children, this.mountContainer, this.mountAnchor);
 		this.bindChildren(this.nodes);
 		updateCssVars(this);
 	}
@@ -4916,6 +5231,8 @@ var TeleportFragment = class extends VaporFragment {
 		if (isTransitionEnabled && this.$transition && !this.isMounted) applyTransitionHooks(this.nodes, this.$transition);
 		if (this.isMounted) move(this.nodes, this.mountContainer = parent, this.mountAnchor = anchor, 2);
 		else {
+			const onBeforeInsert = this.onBeforeInsert;
+			if (onBeforeInsert) onBeforeInsert.forEach((fn) => fn(this.nodes));
 			insert(this.nodes, this.mountContainer = parent, this.mountAnchor = anchor);
 			this.isMounted = true;
 		}
@@ -5056,7 +5373,7 @@ const defineVaporSSRCustomElement = ((options, extraOptions) => {
 });
 var VaporElement = class extends VueElementBase {
 	constructor(def, props = {}, createAppFn = createVaporApp) {
-		super(def, props, createAppFn);
+		super(def, shallowReactive$1(props), createAppFn);
 	}
 	_needsHydration() {
 		const hydrate = vaporCustomElementHydrates.get(this.constructor);
@@ -5075,13 +5392,9 @@ var VaporElement = class extends VueElementBase {
 		this._app.mount(this._root);
 		if (!this.shadowRoot) this._renderSlots();
 	}
-	_update() {
-		if (!this._app) return;
-		const renderEffects = this._instance.renderEffects;
-		if (renderEffects) renderEffects.forEach((e) => e.run());
-	}
+	_update() {}
 	_unmount() {
-		this._app.unmount();
+		if (this._app) this._app.unmount();
 		if (this._instance && this._instance.ce) this._instance.ce = void 0;
 		this._app = this._instance = null;
 	}
@@ -5113,28 +5426,31 @@ var VaporElement = class extends VueElementBase {
 		else this._updateFragmentNodes(nodes, replacements);
 	}
 	_createComponent() {
-		this._def.ce = (instance) => {
+		const ce = (instance) => {
 			this._app._ceComponent = this._instance = instance;
 			if (!this.shadowRoot) this._instance.u = [this._renderSlots.bind(this)];
 			this._processInstance();
 		};
-		createComponent(this._def, this._props, void 0, void 0, void 0, this._app._context);
+		createComponent(this._def, this._props, void 0, void 0, void 0, this._app._context, false, ce);
 	}
 };
 //#endregion
 //#region packages/runtime-vapor/src/dom/template.ts
 let t;
 /* @__NO_SIDE_EFFECTS__ */
-function template(html, root, isStatic, ns) {
+function template(html, flags = 0, ns) {
+	const root = !!(flags & 1);
+	const isStatic = !!(flags & 2);
 	let node;
 	return () => {
 		if (isHydrating$1) {
 			let adopted = null;
 			if (isStatic) {
 				adopted = resolveHydrationTarget(currentHydrationNode);
+				if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && html !== "") validateHydrationTarget(adopted, html);
 				node = adopted.cloneNode(true);
 				advanceHydrationNode(adopted);
-			} else adopted = adoptTemplate(currentHydrationNode, html);
+			} else adopted = adoptTemplate(currentHydrationNode, html, false, ns);
 			if (root) adopted.$root = true;
 			return adopted;
 		}
@@ -5160,30 +5476,33 @@ function template(html, root, isStatic, ns) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/apiCreateIf.ts
-function createIf(condition, b1, b2, blockShape, once, index) {
+function createIf(condition, b1, b2, flags = 1) {
 	const _insertionParent = insertionParent;
 	const _insertionAnchor = insertionAnchor;
 	if (!isHydrating$1) resetInsertionState();
 	let hydrationCursor = null;
 	let branchShape;
 	let frag;
-	if (once) {
+	if (flags & 16) {
 		const ok = condition();
 		if (isHydrating$1) {
-			branchShape = decodeIfShape(blockShape, ok);
+			branchShape = decodeIfShape(flags, ok);
 			hydrationCursor = enterHydrationCursor(branchShape === 2);
 		}
 		frag = ok ? b1() : b2 ? b2() : [!!(process.env.NODE_ENV !== "production") ? /* @__PURE__ */ createComment("if") : /* @__PURE__ */ createTextNode()];
 	} else {
-		const keyed = index != null;
-		frag = isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if", keyed, false) : new DynamicFragment(void 0, keyed, false);
+		const index = flags >> 8;
+		const keyed = index > 0;
+		const keyBase = keyed ? (index - 1) * 2 : 0;
+		const trackSlotBoundary = !!(flags & 128);
+		frag = isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if", keyed, false, trackSlotBoundary) : new DynamicFragment(void 0, keyed, false, trackSlotBoundary);
 		renderEffect(() => {
 			const ok = condition();
 			if (isHydrating$1) {
-				branchShape = decodeIfShape(blockShape, ok);
+				branchShape = decodeIfShape(flags, ok);
 				hydrationCursor = enterHydrationCursor(branchShape === 2);
 			}
-			frag.update(ok ? b1 : b2, keyed ? `${index}${ok ? 0 : 1}` : void 0);
+			frag.update(ok ? b1 : b2, keyed ? keyBase + (ok ? 0 : 1) : void 0, isNoScopeBranch(flags, ok));
 		});
 	}
 	if (!isHydrating$1) {
@@ -5200,6 +5519,9 @@ function createIf(condition, b1, b2, blockShape, once, index) {
 function decodeIfShape(shape, ok) {
 	return shape >> (ok ? 0 : 2) & 3;
 }
+function isNoScopeBranch(flags, ok) {
+	return !!(flags & (ok ? 32 : 64));
+}
 //#endregion
 //#region packages/runtime-vapor/src/apiCreateFragment.ts
 /**
@@ -5240,14 +5562,17 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 	let isMounted = false;
 	let oldBlocks = [];
 	let newBlocks;
+	let newKeys;
 	let parent;
 	let parentAnchor;
 	let pendingHydrationAnchor = false;
 	if (!isHydrating$1) parentAnchor = !!(process.env.NODE_ENV !== "production") ? /* @__PURE__ */ createComment("for") : /* @__PURE__ */ createTextNode();
-	const frag = new ForFragment(oldBlocks);
+	const frag = new ForFragment(oldBlocks, !!(flags & 32));
 	const instance = currentInstance$1;
-	const canUseFastRemove = !!(flags & 1);
 	const isComponent = !!(flags & 2);
+	const canUseFastRemove = !!(flags & 1) && !isComponent;
+	const isSingleNode = !!(flags & 8);
+	const isFragment = !!(flags & 16);
 	const slotOwner = currentSlotOwner;
 	if (!!(process.env.NODE_ENV !== "production") && !instance) warn("createFor() can only be used inside setup()");
 	if (!isComponent) onScopeDispose$1(() => {
@@ -5261,8 +5586,15 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 		const newLength = source.values.length;
 		const oldLength = oldBlocks.length;
 		newBlocks = new Array(newLength);
+		newKeys = void 0;
+		if (getKey) {
+			newKeys = new Array(newLength);
+			for (let i = 0; i < newLength; i++) newKeys[i] = getKey(...getItem(source, i));
+		}
 		const prevSub = setActiveSub();
-		if (!isMounted) {
+		const wasMounted = isMounted;
+		if (wasMounted && frag.onBeforeUpdate) for (let i = 0; i < frag.onBeforeUpdate.length; i++) frag.onBeforeUpdate[i]();
+		if (!wasMounted) {
 			isMounted = true;
 			if (isHydrating$1) hydrateList(source, newLength);
 			else for (let i = 0; i < newLength; i++) mount(source, i);
@@ -5279,14 +5611,17 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 				}
 			} else if (!getKey) {
 				const commonLength = Math.min(newLength, oldLength);
-				for (let i = 0; i < commonLength; i++) update(newBlocks[i] = oldBlocks[i], getItem(source, i)[0]);
+				for (let i = 0; i < commonLength; i++) {
+					const item = getItem(source, i);
+					update(newBlocks[i] = oldBlocks[i], ...item);
+				}
 				for (let i = oldLength; i < newLength; i++) mount(source, i);
 				for (let i = newLength; i < oldLength; i++) unmount(oldBlocks[i]);
 			} else {
 				if (!!(process.env.NODE_ENV !== "production")) {
 					const keyToIndexMap = /* @__PURE__ */ new Map();
 					for (let i = 0; i < newLength; i++) {
-						const key = getKey(...getItem(source, i));
+						const key = newKeys[i];
 						if (key != null) {
 							if (keyToIndexMap.has(key)) warn(`Duplicate keys found during update:`, JSON.stringify(key), `Make sure keys are unique.`);
 							keyToIndexMap.set(key, i);
@@ -5302,7 +5637,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 				while (endOffset < commonLength) {
 					const index = newLength - endOffset - 1;
 					const item = getItem(source, index);
-					const key = getKey(...item);
+					const key = newKeys[index];
 					const existingBlock = oldBlocks[oldLength - endOffset - 1];
 					if (existingBlock.key !== key) break;
 					update(existingBlock, ...item);
@@ -5314,10 +5649,10 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 				const e3 = newLength - endOffset;
 				for (let i = 0; i < e1; i++) {
 					const currentItem = getItem(source, i);
-					const currentKey = getKey(...currentItem);
+					const currentKey = newKeys[i];
 					const oldBlock = oldBlocks[i];
 					const oldKey = oldBlock.key;
-					if (oldKey === currentKey) update(newBlocks[i] = oldBlock, currentItem[0]);
+					if (oldKey === currentKey) update(newBlocks[i] = oldBlock, ...currentItem);
 					else {
 						queuedBlocks[queuedBlocksLength++] = [
 							i,
@@ -5330,7 +5665,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 				for (let i = e1; i < e2; i++) oldKeyIndexPairs[oldKeyIndexPairsLength++] = [oldBlocks[i].key, i];
 				for (let i = e1; i < e3; i++) {
 					const blockItem = getItem(source, i);
-					const blockKey = getKey(...blockItem);
+					const blockKey = newKeys[i];
 					queuedBlocks[queuedBlocksLength++] = [
 						i,
 						blockItem,
@@ -5396,7 +5731,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 								const { item, key } = action;
 								moveLink(mount(source, index, anchorNode, item, key), nextBlock.prev, nextBlock);
 							} else if (action.block.next !== nextBlock) {
-								insert(action.block, parent, anchorNode);
+								insertForBlock(action.block, anchorNode);
 								moveLink(action.block, nextBlock.prev, nextBlock);
 							}
 						} else if ("source" in action) {
@@ -5407,7 +5742,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 						} else if (action.block.next !== void 0) {
 							let anchorNode = anchor ? normalizeAnchor(anchor.nodes) : parentAnchor;
 							if (!anchorNode.parentNode) anchorNode = parentAnchor;
-							insert(action.block, parent, anchorNode);
+							insertForBlock(action.block, anchorNode);
 							moveLink(action.block, blocksTail);
 							blocksTail = action.block;
 						}
@@ -5418,12 +5753,14 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 		}
 		frag.nodes = [oldBlocks = newBlocks];
 		if (parentAnchor) frag.nodes.push(parentAnchor);
-		if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
+		if (wasMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
 		setActiveSub(prevSub);
 	};
 	const needKey = renderItem.length > 1;
 	const needIndex = renderItem.length > 2;
-	const mount = (source, idx, anchor = parentAnchor, [item, key, index] = getItem(source, idx), key2 = getKey && getKey(item, key, index)) => {
+	const insertForBlock = isSingleNode ? (block, anchor) => insertNode(block.nodes, parent, anchor) : isFragment ? (block, anchor) => insertFragment(block.nodes, parent, anchor) : (block, anchor) => insert(block.nodes, parent, anchor);
+	const removeForBlock = isSingleNode ? (block) => removeNode(block.nodes, parent) : isFragment ? (block) => removeFragment(block.nodes, parent) : (block) => remove(block.nodes, parent);
+	const mount = (source, idx, anchor = parentAnchor, [item, key, index] = getItem(source, idx), key2 = newKeys ? newKeys[idx] : getKey && getKey(item, key, index)) => {
 		const itemRef = shallowRef$1(item);
 		const keyRef = needKey ? shallowRef$1(key) : void 0;
 		const indexRef = needIndex ? shallowRef$1(index) : void 0;
@@ -5440,8 +5777,15 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 			}
 		}
 		const block = newBlocks[idx] = new ForBlock(nodes, scope, itemRef, keyRef, indexRef, key2);
-		if (isTransitionEnabled && frag.$transition) applyTransitionHooks(block.nodes, frag.$transition);
-		if (parent) insert(block.nodes, parent, anchor);
+		if (isTransitionEnabled && frag.$transition) {
+			if (frag.$transition.applyGroup) setBlockKey(block.nodes, block.key);
+			applyTransitionHooks(block.nodes, frag.$transition);
+		}
+		if (parent) {
+			const onBeforeInsert = frag.onBeforeInsert;
+			if (onBeforeInsert) onBeforeInsert.forEach((fn) => fn(block.nodes));
+			insertForBlock(block, anchor);
+		}
 		return block;
 	};
 	function hydrateList(source, newLength) {
@@ -5465,7 +5809,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 					if (isComment(currentHydrationNode, "]")) {
 						nextNode = markHydrationAnchor(currentHydrationNode);
 						setCurrentHydrationNode(nextNode);
-					} else nextNode = locateNextNode(currentHydrationNode);
+					} else nextNode = nextLogicalSibling(currentHydrationNode);
 					mount(source, i);
 					if (nextNode) setCurrentHydrationNode(nextNode);
 				}
@@ -5502,7 +5846,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 	};
 	const unmount = (block, doRemove = true) => {
 		if (!isComponent) block.scope.stop();
-		if (doRemove) remove(block.nodes, parent);
+		if (doRemove) removeForBlock(block);
 	};
 	if (flags & 4) renderList();
 	else renderEffect(() => {
@@ -5623,11 +5967,14 @@ function normalizeSource(source) {
 			isReadonlySource = isReadonly(source);
 		}
 	} else if (isString(source)) values = source.split("");
-	else if (typeof source === "number") {
-		if (!!(process.env.NODE_ENV !== "production") && !Number.isInteger(source)) warn(`The v-for range expect an integer value but got ${source}.`);
+	else if (typeof source === "number") if (!!(process.env.NODE_ENV !== "production") && (!Number.isInteger(source) || source < 0)) {
+		warn(`The v-for range expects a positive integer value but got ${source}.`);
+		values = [];
+	} else {
 		values = new Array(source);
 		for (let i = 0; i < source; i++) values[i] = i + 1;
-	} else if (isObject(source)) if (source[Symbol.iterator]) values = Array.from(source);
+	}
+	else if (isObject(source)) if (source[Symbol.iterator]) values = Array.from(source);
 	else {
 		keys = Object.keys(source);
 		values = new Array(keys.length);
@@ -5656,23 +6003,35 @@ function getItem({ keys, values, needsWrap, isReadonlySource }, idx) {
 }
 function normalizeAnchor(node) {
 	if (node instanceof Node) return node;
-	else if (isArray(node)) return normalizeAnchor(node[0]);
-	else if (isVaporComponent(node)) return normalizeAnchor(node.block);
-	else return normalizeAnchor(node.nodes);
+	else if (isArray(node)) {
+		for (let i = 0; i < node.length; i++) {
+			const anchor = normalizeAnchor(node[i]);
+			if (anchor) return anchor;
+		}
+		return;
+	} else if (isVaporComponent(node)) return normalizeAnchor(node.block);
+	else {
+		const nodes = node.nodes;
+		return isValidBlock(nodes) ? normalizeAnchor(nodes) : node.anchor || normalizeAnchor(nodes);
+	}
 }
 function getRestElement(val, keys) {
 	const res = {};
 	for (const key in val) if (!keys.includes(key)) res[key] = val[key];
 	return res;
 }
-function getDefaultValue(val, defaultVal) {
-	return val === void 0 ? defaultVal : val;
+function getDefaultValue(val, getDefaultVal) {
+	return val === void 0 ? getDefaultVal() : val;
 }
 function isForBlock(block) {
 	return block instanceof ForBlock;
 }
 //#endregion
 //#region packages/runtime-vapor/src/apiTemplateRef.ts
+function getTemplateRefUpdateFragment(el) {
+	if (isDynamicFragment(el)) return el;
+	if (isVaporComponent(el) && isAsyncWrapper(el)) return el.block;
+}
 function ensureCleanup(el) {
 	let cleanupRef = refCleanups.get(el);
 	if (!cleanupRef) {
@@ -5690,8 +6049,8 @@ function createTemplateRefSetter() {
 	const oldRefMap = /* @__PURE__ */ new WeakMap();
 	const setRefMap = /* @__PURE__ */ new WeakMap();
 	return (el, ref, refFor, refKey) => {
-		if (isDynamicFragment(el) || isVaporComponent(el) && isAsyncWrapper(el)) {
-			const frag = isDynamicFragment(el) ? el : el.block;
+		const frag = getTemplateRefUpdateFragment(el);
+		if (frag) {
 			const doSet = () => {
 				if (isVaporComponent(el) && el.isDeactivated) return;
 				oldRefMap.set(el, setRef$1(instance, el, ref, oldRefMap.get(el), refFor, refKey));
@@ -5706,6 +6065,19 @@ function createTemplateRefSetter() {
 		return oldRef;
 	};
 }
+function setStaticTemplateRef(el, ref, refFor, refKey) {
+	const instance = currentInstance$1;
+	const oldRef = setRef$1(instance, el, ref, void 0, refFor, refKey);
+	const frag = getTemplateRefUpdateFragment(el);
+	if (frag) (frag.onUpdated || (frag.onUpdated = [])).push(() => {
+		if (isVaporComponent(el) && el.isDeactivated) return;
+		setRef$1(instance, el, ref, oldRef, refFor, refKey);
+	});
+	return oldRef;
+}
+function setTemplateRefBinding(el, getter, setter = createTemplateRefSetter(), refFor, refKey) {
+	renderEffect(() => setter(el, getter(), refFor, refKey));
+}
 /**
 * Function for handling a template ref
 */
@@ -5840,12 +6212,16 @@ function setVarsOnBlock(block, vars) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/apiCreateDynamicComponent.ts
-function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once) {
+function createDynamicComponent(getter, rawProps, rawSlots, flags = 0) {
+	const isSingleRoot = !!(flags & 1);
+	const once = !!(flags & 2);
+	const slotRoot = !!(flags & 4);
 	const _insertionParent = insertionParent;
 	const _insertionAnchor = insertionAnchor;
 	if (!isHydrating$1) resetInsertionState();
 	const hydrationCursor = isHydrating$1 ? captureHydrationCursor() : null;
-	const frag = isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("dynamic-component") : new DynamicFragment();
+	const frag = isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("dynamic-component", false, true, slotRoot) : new DynamicFragment(void 0, false, true, slotRoot);
+	const normalizedRawSlots = normalizeRawSlots(rawSlots);
 	const scopeOwner = getScopeOwner();
 	const renderFn = () => {
 		const value = getter();
@@ -5865,7 +6241,7 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once)
 				}
 				return frag;
 			}
-			return createComponentWithFallback(withScopeOwner(scopeOwner, () => resolveDynamicComponent(value)), rawProps, rawSlots, isSingleRoot, once, appContext);
+			return createComponentWithFallback(withScopeOwner(scopeOwner, () => resolveDynamicComponent(value)), rawProps, normalizedRawSlots, isSingleRoot, once, appContext);
 		}, value);
 	};
 	if (once) renderFn();
@@ -5965,6 +6341,7 @@ function withVaporDirectives(node, dirs) {
 //#region packages/runtime-vapor/src/components/TransitionGroup.ts
 const positionMap = /* @__PURE__ */ new WeakMap();
 const newPositionMap = /* @__PURE__ */ new WeakMap();
+const transitionGroupUpdateOwnerMap = /* @__PURE__ */ new WeakMap();
 let isForHydrationAnchorResolverRegistered = false;
 let currentForHydrationContainer;
 function ensureForHydrationAnchorResolver() {
@@ -5995,29 +6372,34 @@ const VaporTransitionGroup = /* @__PURE__ */ decorate(/* @__PURE__ */ defineVapo
 		ensureTransitionHooksRegistered();
 		const instance = currentInstance;
 		const state = useTransitionState();
-		let cssTransitionProps = resolveTransitionProps(props);
+		let cssTransitionProps;
 		const propsProxy = new Proxy({}, { get(_, key) {
 			return cssTransitionProps[key];
 		} });
-		renderEffect(() => {
-			cssTransitionProps = resolveTransitionProps(props);
-		});
-		let prevChildren;
+		renderEffect(() => cssTransitionProps = resolveTransitionProps(props), true);
+		let prevChildren = [];
+		let isUpdatePending = false;
+		let isUpdatedPending = false;
 		let slottedBlock = [];
-		onBeforeUpdate(() => {
+		const beforeUpdate = () => {
+			if (isUpdatePending) return;
+			isUpdatePending = true;
 			prevChildren = [];
 			const children = getTransitionBlocks(slottedBlock);
 			for (let i = 0; i < children.length; i++) {
 				const child = children[i];
 				const el = isValidTransitionBlock(child) && child.$transition ? getTransitionElement(child) : void 0;
-				if (el) {
+				if (el && !el[vShowHidden]) {
 					prevChildren.push(child);
 					child.$transition.disabled = true;
 					positionMap.set(child, el.getBoundingClientRect());
 				}
 			}
-		});
-		onUpdated(() => {
+		};
+		const flushUpdated = () => {
+			isUpdatedPending = false;
+			if (!isUpdatePending) return;
+			isUpdatePending = false;
 			if (!prevChildren.length) return;
 			const moveClass = props.moveClass || `${props.name || "v"}-move`;
 			const firstChild = getFirstConnectedChild(prevChildren);
@@ -6034,7 +6416,14 @@ const VaporTransitionGroup = /* @__PURE__ */ decorate(/* @__PURE__ */ defineVapo
 			forceReflow();
 			movedChildren.forEach((c) => handleMovedChildren(getTransitionElement(c), moveClass));
 			prevChildren = [];
-		});
+		};
+		const updated = () => {
+			if (!isUpdatePending || isUpdatedPending) return;
+			isUpdatedPending = true;
+			queuePostFlushCb(flushUpdated);
+		};
+		onBeforeUpdate(beforeUpdate);
+		onUpdated(updated);
 		const frag = new DynamicFragment("transition-group");
 		let currentTag;
 		let currentSlot;
@@ -6050,7 +6439,7 @@ const VaporTransitionGroup = /* @__PURE__ */ decorate(/* @__PURE__ */ defineVapo
 				ensureForHydrationAnchorResolver();
 				prevForHydrationContainer = currentForHydrationContainer;
 				currentForHydrationContainer = container;
-				nextNode = locateNextNode(container);
+				nextNode = nextLogicalSibling(container);
 				setCurrentHydrationNode(container.firstChild || container);
 			}
 			let block = slottedBlock;
@@ -6058,7 +6447,10 @@ const VaporTransitionGroup = /* @__PURE__ */ decorate(/* @__PURE__ */ defineVapo
 			try {
 				frag.update(() => {
 					block = slot && slot() || [];
-					transitionBlocks = applyGroupTransitionHooks(block, propsProxy, state, instance);
+					transitionBlocks = applyGroupTransitionHooks(block, propsProxy, state, instance, {
+						beforeUpdate,
+						updated
+					});
 					if (container) {
 						if (!isHydrating$1) insert(block, container);
 						return container;
@@ -6080,9 +6472,9 @@ const VaporTransitionGroup = /* @__PURE__ */ decorate(/* @__PURE__ */ defineVapo
 		return frag;
 	}
 }));
-function applyGroupTransitionHooks(block, props, state, instance) {
+function applyGroupTransitionHooks(block, props, state, instance, updateHooks) {
 	const fragments = [];
-	const children = getTransitionBlocks(block, (frag) => fragments.push(frag));
+	const children = getTransitionBlocks(block, (frag) => fragments.push(frag), (owner) => trackTransitionGroupUpdate(owner, updateHooks));
 	for (let i = 0; i < children.length; i++) {
 		const child = children[i];
 		if (isValidTransitionBlock(child)) {
@@ -6092,11 +6484,45 @@ function applyGroupTransitionHooks(block, props, state, instance) {
 	}
 	fragments.forEach((frag) => {
 		const hooks = resolveTransitionHooks(frag, props, state, instance);
-		hooks.applyGroup = applyGroupTransitionHooks;
+		hooks.applyGroup = (block, props, state, instance) => applyGroupTransitionHooks(block, props, state, instance, updateHooks);
 		frag.$transition = hooks;
 	});
 	return children;
 }
+function trackTransitionGroupUpdate(owner, updateHooks) {
+	const registeredHooks = transitionGroupUpdateOwnerMap.get(owner);
+	if (registeredHooks) {
+		registeredHooks.beforeUpdate = updateHooks.beforeUpdate;
+		registeredHooks.updated = updateHooks.updated;
+		return;
+	}
+	transitionGroupUpdateOwnerMap.set(owner, updateHooks);
+	if (isFragment(owner)) {
+		(owner.onBeforeUpdate || (owner.onBeforeUpdate = [])).push(() => updateHooks.beforeUpdate());
+		(owner.onUpdated || (owner.onUpdated = [])).push(() => updateHooks.updated());
+	} else {
+		let isPending = false;
+		const flushUpdated = () => {
+			isPending = false;
+			updateHooks.updated();
+		};
+		owner.scope.run(() => {
+			watch$1(() => {
+				const prev = setCurrentInstance(owner, owner.scope);
+				try {
+					return resolveDynamicProps(owner.rawProps);
+				} finally {
+					setCurrentInstance(...prev);
+				}
+			}, () => {
+				if (isPending) return;
+				isPending = true;
+				updateHooks.beforeUpdate();
+				queuePostFlushCb(flushUpdated);
+			});
+		});
+	}
+}
 function inheritKey(children, key) {
 	if (key === void 0 || children.length === 0) return;
 	for (let i = 0; i < children.length; i++) {
@@ -6104,25 +6530,30 @@ function inheritKey(children, key) {
 		child.$key = String(key) + String(child.$key != null ? child.$key : i);
 	}
 }
-function getTransitionBlocks(block, onFragment) {
+function getTransitionBlocks(block, onFragment, onUpdateOwner) {
 	let children = [];
 	if (block instanceof Element) children.push(block);
 	else if (isVaporComponent(block)) {
-		const blocks = getTransitionBlocks(block.block, onFragment);
+		const isRootSlot = block.block && isSlotFragment(block.block);
+		if (onUpdateOwner && !isRootSlot) onUpdateOwner(block);
+		const blocks = getTransitionBlocks(block.block, onFragment, isRootSlot ? onUpdateOwner : void 0);
 		inheritKey(blocks, block.$key);
 		children.push(...blocks);
 	} else if (isArray(block)) for (let i = 0; i < block.length; i++) {
 		const b = block[i];
-		const blocks = getTransitionBlocks(b, onFragment);
+		const blocks = getTransitionBlocks(b, onFragment, onUpdateOwner);
 		if (isForBlock(b)) blocks.forEach((block) => block.$key = b.key);
 		children.push(...blocks);
 	}
-	else if (isFragment(block)) if (isInteropEnabled && block.vnode) children.push(block);
-	else {
+	else if (isFragment(block)) {
 		if (onFragment) onFragment(block);
-		const blocks = getTransitionBlocks(block.nodes, onFragment);
-		inheritKey(blocks, block.$key);
-		children.push(...blocks);
+		if (onUpdateOwner) onUpdateOwner(block);
+		if (isInteropEnabled && block.vnode) children.push(block);
+		else {
+			const blocks = getTransitionBlocks(block.nodes, onFragment, onUpdateOwner);
+			inheritKey(blocks, block.$key);
+			children.push(...blocks);
+		}
 	}
 	return children;
 }
@@ -6149,4 +6580,4 @@ function getFirstConnectedChild(children) {
 	}
 }
 //#endregion
-export { DynamicFragment, VaporElement, VaporFragment, VaporKeepAlive, VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSelector, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockKey, setBlockText, setClass, setClassName, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, useVaporCssVars, vaporInteropPlugin, withAsyncContext, withVaporCtx, withVaporDirectives };
+export { DynamicFragment, VaporElement, VaporFragment, VaporKeepAlive, VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createAssetComponent, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSelector, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, onBinding, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockKey, setBlockText, setClass, setClassName, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, setValue, template, txt, useVaporCssVars, vaporInteropPlugin, withAsyncContext, withVaporDirectives, withVaporKeys, withVaporModifiers };