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

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

@@ -1,9 +1,9 @@
 /**
-  * @vue/runtime-vapor v3.6.0-beta.12
+  * @vue/runtime-vapor v3.6.0-beta.13
   * (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";
 //#region packages/runtime-vapor/src/insertionState.ts
@@ -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 (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;
+				}
+				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,30 @@ function resolveFunctionSource(source) {
 	}
 	return source();
 }
+function snapshotRawProps(rawProps) {
+	const snapshot = Object.create(null);
+	for (const key in rawProps) if (key !== "$") snapshot[key] = resolveSource(rawProps[key]);
+	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) value[key] = resolveSource(source[key]);
+				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 +583,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 +601,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 +609,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 +622,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 +647,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 +698,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 +780,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 +820,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 +875,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 +889,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 +914,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 +1032,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 +1137,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 +1173,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 +1192,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 +1218,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;
@@ -1112,6 +1264,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
 */
@@ -1209,7 +1370,7 @@ function withVaporCtx(fn) {
 		}
 	};
 }
-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,13 +1378,18 @@ 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 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);
 	} else {
 		if (isHydrating$1) hydrationCursor = captureHydrationCursor();
 		const slotFragment = fragment = new SlotFragment();
@@ -1233,9 +1399,11 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
 			const slotName = isFunction(name) ? name() : name;
 			if (instance.ce || instance.parent && isAsyncWrapper(instance.parent) && instance.parent.ce) {
 				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;
@@ -1255,12 +1423,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);
 					}
 				};
@@ -1280,67 +1445,6 @@ function createSlot(name, rawProps, fallback, noSlotted, once) {
 	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 +1504,9 @@ function isVaporTransition(component) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/fragment.ts
+const EMPTY_BLOCK = EMPTY_ARR;
 var VaporFragment = class {
 	constructor(nodes) {
-		this.vnode = null;
 		this.renderInstance = currentInstance;
 		this.slotOwner = currentSlotOwner;
 		this.inheritedSlotBoundary = currentSlotBoundary;
@@ -1411,9 +1515,15 @@ var VaporFragment = class {
 	}
 	runWithRenderCtx(fn, scope) {
 		const prevInstance = setCurrentInstance(this.renderInstance, scope);
+		const keepAliveCtx = isKeepAliveEnabled ? this.keepAliveCtx || null : null;
+		if (currentSlotOwner === this.slotOwner && currentSlotBoundary === this.inheritedSlotBoundary && (!isKeepAliveEnabled || currentKeepAliveCtx === keepAliveCtx)) try {
+			return fn();
+		} finally {
+			setCurrentInstance(...prevInstance);
+		}
 		const prevSlotOwner = setCurrentSlotOwner(this.slotOwner);
 		let prevKeepAliveCtx = null;
-		if (isKeepAliveEnabled) prevKeepAliveCtx = setCurrentKeepAliveCtx(this.keepAliveCtx || null);
+		if (isKeepAliveEnabled) prevKeepAliveCtx = setCurrentKeepAliveCtx(keepAliveCtx);
 		const prevBoundary = setCurrentSlotBoundary(this.inheritedSlotBoundary);
 		try {
 			return fn();
@@ -1445,10 +1555,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 +1570,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 = true) {
+		super(EMPTY_BLOCK);
+		if (keyed) this.keyed = true;
 		if (isTransitionEnabled && currentInstance && isVaporTransition(currentInstance.type)) this.inTransition = true;
 		if (isHydrating$1) {
 			this.anchorLabel = anchorLabel;
@@ -1570,14 +1581,9 @@ 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) {
 		if (key === this.current) {
 			if (isHydrating$1 && this.anchorLabel !== "slot") this.hydrate(true);
 			return;
@@ -1585,28 +1591,29 @@ var DynamicFragment = class extends VaporFragment {
 		const transition = isTransitionEnabled ? this.$transition : void 0;
 		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) {
+		if (this.current !== void 0) {
+			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 +1622,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);
+						} else this.renderBranch(render, transition, parent, key, noScope);
 					} finally {
 						setCurrentInstance(...prevInstance);
 					}
@@ -1628,27 +1635,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.anchorLabel !== "slot" && !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);
 		setActiveSub(prevSub);
 		if (isHydrating$1 && this.anchorLabel !== "slot" && !reusingDeferredAnchor) this.hydrate(render == null);
 	}
-	renderBranch(render, transition, parent, key) {
+	renderBranch(render, transition, parent, key, noScope = false) {
 		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, 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 +1672,119 @@ 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;
+		}
+		if (parent) {
+			const onUpdated = this.onUpdated;
+			if (onUpdated) onUpdated.forEach((hook) => hook(this.nodes));
+		}
+	}
+	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 = nextLogicalSibling(currentHydrationNode);
+					const reusableAnchor = anchor && anchor.nodeType === 8 && isReusableDynamicFragmentAnchor(anchor, this.anchorLabel) && /* @__PURE__ */ parentNode(anchor) ? anchor : null;
+					if (parentNode$4) {
+						this.nodes = EMPTY_BLOCK;
+						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;
+				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;
+					cleanupAndInsertRuntimeAnchor(parentNode$5, nextNode, currentHydrationNode, nextNode);
+					return;
+				}
+			}
+			const currentSlotEndAnchor = getCurrentSlotEndAnchor();
+			const forwardedSlot = isSlot ? this.forwarded : false;
+			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);
 		}
-		if (parent && this.onUpdated) this.onUpdated.forEach((hook) => hook(this.nodes));
 	}
 };
 let currentSlotBoundary = null;
@@ -1878,6 +1990,13 @@ function commitSlotFallback(outlet, block, scope) {
 	outlet.activeFallback = block;
 	outlet.fallbackScope = scope;
 	ensureSlotFallbackOrderHook(outlet, block);
+	if (isTransitionEnabled) {
+		const transitionOutlet = outlet;
+		if (transitionOutlet.$transition) {
+			setBlockKey(block, "_fb");
+			transitionOutlet.$transition = applyTransitionHooks(block, transitionOutlet.$transition);
+		}
+	}
 	insertActiveSlotFallback(outlet);
 }
 function syncActiveSlotFallback(outlet) {
@@ -1972,7 +2091,7 @@ function isReusableDynamicFragmentAnchor(node, anchorLabel) {
 }
 var SlotFragment = class extends DynamicFragment {
 	constructor() {
-		super(isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? "slot" : void 0, false, false);
+		super(isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? "slot" : void 0, false, false, false);
 		this.disposed = false;
 		this.forwarded = false;
 		this.parentSlotBoundary = getCurrentSlotBoundary();
@@ -1996,7 +2115,6 @@ var SlotFragment = class extends DynamicFragment {
 			markDirty: () => markSlotFallbackDirty(this)
 		};
 	}
-	registerSlotBoundaryDirty() {}
 	get fallbackBlock() {
 		return this.activeFallback;
 	}
@@ -2119,21 +2237,32 @@ function isValidBlock(block) {
 	}
 }
 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 +2289,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
@@ -2298,7 +2431,12 @@ function setParentSuspense(suspense) {
 }
 //#endregion
 //#region packages/runtime-vapor/src/component.ts
+function normalizeRawSlots(rawSlots) {
+	return rawSlots && isFunction(rawSlots) ? { default: rawSlots } : rawSlots;
+}
 function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appContext = currentInstance && currentInstance.appContext || emptyContext, managedMount = false) {
+	const wasInOnceSlot = inOnceSlot;
+	if (wasInOnceSlot) once = true;
 	if (isInteropEnabled && isCollectingVdomSlotVNodes) {
 		if (component.__vapor) return;
 		const owner = getScopeOwner();
@@ -2339,7 +2477,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,7 +2485,7 @@ 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);
@@ -2375,7 +2513,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")) {
@@ -2498,6 +2639,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,15 +2653,16 @@ 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 ? normalizedRawSlots.$ ? new Proxy(normalizedRawSlots, dynamicSlotsProxyHandlers) : normalizedRawSlots : EMPTY_OBJ;
 		this.scopeId = getCurrentScopeId();
 		if (comp.ce) comp.ce(this);
 		if (!!(process.env.NODE_ENV !== "production")) if (this.props === this.attrs) this.accessedAttrs = true;
@@ -2544,6 +2687,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 +2707,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 +2719,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 +2743,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.$) {
@@ -2708,7 +2864,7 @@ 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);
+		const root = getRootElement(instance.block, (frag) => registerDynamicFragmentFallthroughAttrs(frag, instance.attrs), false);
 		if (root) renderEffect(() => {
 			const attrs = isFunction(component) && !(isTransitionEnabled ? isVaporTransition(component) : false) ? getFunctionalFallthrough(instance.attrs) : instance.attrs;
 			if (attrs) applyFallthroughProps(root, attrs);
@@ -2721,6 +2877,15 @@ function getCurrentScopeId() {
 	const scopeOwner = getScopeOwner();
 	return scopeOwner ? scopeOwner.type.__scopeId : void 0;
 }
+function registerDynamicFragmentFallthroughAttrs(frag, attrs) {
+	frag.hasFallthroughAttrs = true;
+	(frag.onBeforeInsert || (frag.onBeforeInsert = [])).push((nodes) => {
+		if (nodes instanceof Element) frag.scope.run(() => {
+			renderEffect(() => applyFallthroughProps(nodes, attrs));
+		});
+		else if (!!(process.env.NODE_ENV !== "production") && (frag.anchorLabel === "slot" || isArray(nodes) && nodes.length)) warnExtraneousAttributes(attrs);
+	});
+}
 //#endregion
 //#region packages/runtime-vapor/src/apiCreateApp.ts
 let _createApp;
@@ -2865,7 +3030,7 @@ function defineVaporAsyncComponent(source) {
 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 +3094,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 +3248,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 || block instanceof SlotFragment || isVaporComponent(block) && block.block instanceof SlotFragment)) {
 		hooks.applyGroup(block, hooks.props, hooks.state, hooks.instance);
 		return { hooks };
 	}
@@ -3438,7 +3604,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 +3619,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 +3635,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;
@@ -3555,7 +3738,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 +3759,7 @@ const vaporInteropImpl = {
 			vnode.dirs = null;
 		}
 		mountComponent(instance, container, selfAnchor);
+		if (!isHydrating$1) applyScopeId(vnodeHookState.vnode);
 		simpleSetCurrentInstance(prev);
 		return instance;
 	},
@@ -3594,6 +3780,7 @@ const vaporInteropImpl = {
 			instance.rawSlotsRef.value = normalizeInteropSlots(n2.children);
 			queuePostFlushCb(() => {
 				syncVNodeEl(n2, instance);
+				setInteropVnodeScopeId(instance, n2, instance.parent);
 				if (!instance.isUpdating) vnodeHookState.skipVnodeHooks = false;
 			});
 		}
@@ -3865,13 +4052,22 @@ function appendVnodeUpdatedHook(vnode, hook) {
 	const existing = props.onVnodeUpdated;
 	props.onVnodeUpdated = existing ? isArray(existing) ? [...existing, hook] : [existing, hook] : hook;
 }
+function appendVnodeBeforeUpdateHook(vnode, hook) {
+	const props = vnode.props || (vnode.props = {});
+	const existing = props.onVnodeBeforeUpdate;
+	props.onVnodeBeforeUpdate = existing ? isArray(existing) ? [...existing, hook] : [existing, hook] : hook;
+}
 function trackFragmentVNodeUpdates(frag, vnode) {
-	const refresh = () => {
+	const beforeUpdate = () => {
+		if (frag.onBeforeUpdate) for (let i = 0; i < frag.onBeforeUpdate.length; i++) frag.onBeforeUpdate[i]();
+	};
+	const updated = () => {
 		frag.nodes = resolveVNodeNodes(vnode);
 		frag.validityPending = false;
 		if (frag.onUpdated) frag.onUpdated.forEach((m) => m());
 	};
-	appendVnodeUpdatedHook(vnode, refresh);
+	appendVnodeBeforeUpdateHook(vnode, beforeUpdate);
+	appendVnodeUpdatedHook(vnode, updated);
 }
 /**
 * Mount VNode in vapor
@@ -3925,7 +4121,7 @@ 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;
@@ -3946,7 +4142,7 @@ 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);
+	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.slots));
 	vnode.vi = (instance) => {
 		instance.props = shallowReactive(wrapper.props);
@@ -4117,7 +4313,7 @@ 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) {
 	const suspense = parentSuspense || parentComponent.suspense;
 	const frag = new VaporFragment([]);
 	trackSlotBoundaryDirtying(frag);
@@ -4162,7 +4358,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 			if (!isContentUpdateRecheck && inheritedBoundary) inheritedBoundary.markDirty();
 		}
 	};
-	localFallback = fallback ? () => fallback(internals, parentComponent) : void 0;
+	localFallback = fallback ? once ? () => withOnceSlot(() => fallback(internals, parentComponent)) : () => fallback(internals, parentComponent) : void 0;
 	const setRenderedContent = (rendered) => {
 		contentState.rendered = rendered;
 		if (isVNode(rendered)) {
@@ -4219,12 +4415,13 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 		const prev = currentInstance;
 		simpleSetCurrentInstance(instance);
 		try {
-			renderEffect(() => {
+			const renderSlotContent = () => {
 				runWithFragmentRenderCtx(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);
@@ -4287,7 +4484,8 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
 					setRenderedContent(null);
 					finishContentUpdate();
 				}));
-			});
+			};
+			once ? renderSlotContent() : renderEffect(renderSlotContent);
 		} finally {
 			simpleSetCurrentInstance(prev);
 		}
@@ -4584,7 +4782,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 +4791,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;
@@ -4780,6 +4983,32 @@ 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 = [];
+	if (vnode.scopeId) scopeIds.push(vnode.scopeId);
+	if (vnode.slotScopeIds) scopeIds.push(...vnode.slotScopeIds);
+	scopeIds.push(...getInheritedScopeIds(vnode, parentComponent));
+	for (let i = 0; i < scopeIds.length; i++) root.setAttribute(scopeIds[i], "");
+}
 //#endregion
 //#region packages/runtime-vapor/src/components/Teleport.ts
 const VaporTeleportImpl = {
@@ -5125,16 +5354,19 @@ var VaporElement = class extends VueElementBase {
 //#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 +5392,32 @@ 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;
+		const index = flags >> 7;
+		const keyed = index > 0;
+		const keyBase = keyed ? (index - 1) * 2 : 0;
 		frag = isHydrating$1 || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if", keyed, false) : new DynamicFragment(void 0, keyed, false);
 		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 +5434,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,6 +5477,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 	let isMounted = false;
 	let oldBlocks = [];
 	let newBlocks;
+	let newKeys;
 	let parent;
 	let parentAnchor;
 	let pendingHydrationAnchor = false;
@@ -5248,6 +5486,8 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 	const instance = currentInstance$1;
 	const canUseFastRemove = !!(flags & 1);
 	const isComponent = !!(flags & 2);
+	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,7 +5501,13 @@ 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 && frag.onBeforeUpdate) for (let i = 0; i < frag.onBeforeUpdate.length; i++) frag.onBeforeUpdate[i]();
 		if (!isMounted) {
 			isMounted = true;
 			if (isHydrating$1) hydrateList(source, newLength);
@@ -5286,7 +5532,7 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 				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 +5548,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,7 +5560,7 @@ 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]);
@@ -5330,7 +5576,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 +5642,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 +5653,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;
 						}
@@ -5423,7 +5669,9 @@ const createFor = (src, renderItem, getKey, flags = 0) => {
 	};
 	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 +5688,11 @@ 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) insertForBlock(block, anchor);
 		return block;
 	};
 	function hydrateList(source, newLength) {
@@ -5465,7 +5716,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 +5753,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(() => {
@@ -5656,9 +5907,18 @@ 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 getEffectiveOutput = node.getEffectiveOutput;
+		const nodes = getEffectiveOutput ? getEffectiveOutput.call(node) : node.nodes;
+		return isValidBlock(nodes) ? normalizeAnchor(nodes) : node.anchor || normalizeAnchor(nodes);
+	}
 }
 function getRestElement(val, keys) {
 	const res = {};
@@ -5673,6 +5933,10 @@ function isForBlock(block) {
 }
 //#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 +5954,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 +5970,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
 */
@@ -5846,6 +6123,7 @@ function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once)
 	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 normalizedRawSlots = normalizeRawSlots(rawSlots);
 	const scopeOwner = getScopeOwner();
 	const renderFn = () => {
 		const value = getter();
@@ -5865,7 +6143,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 +6243,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,16 +6274,18 @@ 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++) {
@@ -6016,8 +6297,11 @@ const VaporTransitionGroup = /* @__PURE__ */ decorate(/* @__PURE__ */ defineVapo
 					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 +6318,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 +6341,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 +6349,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 +6374,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 +6386,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 +6432,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 instanceof SlotFragment;
+		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 +6482,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, withVaporCtx, withVaporDirectives, withVaporKeys, withVaporModifiers };