@vue/runtime-vapor 3.6.0-alpha.4 → 3.6.0-alpha.6

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

@@ -1,11 +1,11 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.4
+* @vue/runtime-vapor v3.6.0-alpha.6
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { isMismatchAllowed, warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, TransitionPropsValidators, leaveCbKey, isAsyncWrapper, getComponentName, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, isKeepAlive, callWithAsyncErrorHandling, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, isRef, onMounted, onUpdated, onBeforeUnmount, resetShapeFlag, watch, matches, devtoolsComponentAdded, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, markAsyncBoundary, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation, createCanSetSetupRefChecker, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected } from '@vue/runtime-dom';
-import { invokeArrayFns, isArray, extend, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, camelize, stringifyStyle, EMPTY_OBJ, isFunction, NO, hasOwn, isReservedProp, EMPTY_ARR, YES, getGlobalThis, isPlainObject, isObject, remove as remove$1, looseEqual } from '@vue/shared';
-import { ReactiveEffect, setActiveSub, EffectScope, onEffectCleanup, pauseTracking, resetTracking, onScopeDispose as onScopeDispose$1, markRaw, unref, proxyRefs, watch as watch$1, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
+import { isMismatchAllowed, warn, callWithAsyncErrorHandling, currentInstance, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, queuePostFlushCb, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, watch, onMounted, onUpdated, onBeforeUnmount, isAsyncWrapper, getComponentName, matches, devtoolsComponentAdded, resetShapeFlag, isKeepAlive, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, isRef, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, setCurrentInstance, startMeasure, queueJob, TransitionPropsValidators, leaveCbKey, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, warnExtraneousAttributes, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, markAsyncBoundary, getFunctionalFallthrough, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, createCanSetSetupRefChecker, baseUseCssVars, setVarsOnNode, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation } from '@vue/runtime-dom';
+import { isArray, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, camelize, stringifyStyle, normalizeCssVarValue, getEscapedCssVarName, isFunction, extend, invokeArrayFns, isReservedProp, EMPTY_OBJ, hasOwn, EMPTY_ARR, NO, YES, isPromise, getGlobalThis, isPlainObject, isObject, remove as remove$1, NOOP, looseEqual } from '@vue/shared';
+import { onEffectCleanup, pauseTracking, resetTracking, ReactiveEffect, setActiveSub, EffectScope, onScopeDispose as onScopeDispose$1, markRaw, unref, proxyRefs, toRaw, watch as watch$1, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
 
 let insertionParent;
 let insertionAnchor;
@@ -336,814 +336,344 @@ function updateLastLogicalChild(parent, child2) {
   parent.$llc = child2;
 }
 
-class RenderEffect extends ReactiveEffect {
-  constructor(render) {
-    super();
-    this.render = render;
-    const instance = currentInstance;
-    if (!!(process.env.NODE_ENV !== "production") && true && !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 (!!(process.env.NODE_ENV !== "production") || instance.type.ce) {
-        (instance.renderEffects || (instance.renderEffects = [])).push(this);
-      }
-      job.i = instance;
+function addEventListener(el, event, handler, options) {
+  el.addEventListener(event, handler, options);
+  return () => el.removeEventListener(event, handler, options);
+}
+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);
+      });
     }
-    this.job = job;
-    this.i = instance;
   }
-  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);
-    if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
-      instance.isUpdating = true;
-      instance.bu && invokeArrayFns(instance.bu);
-      this.render();
-      queuePostFlushCb(this.updateJob);
+}
+function delegate(el, event, handler) {
+  const key = `$evt${event}`;
+  const existing = el[key];
+  if (existing) {
+    if (isArray(existing)) {
+      existing.push(handler);
     } else {
-      this.render();
-    }
-    setCurrentInstance(...prev);
-    if (!!(process.env.NODE_ENV !== "production") && instance) {
-      startMeasure(instance, `renderEffect`);
-    }
-  }
-  notify() {
-    const flags = this.flags;
-    if (!(flags & 256)) {
-      queueJob(this.job, this.i ? this.i.uid : void 0);
+      el[key] = [existing, handler];
     }
+  } else {
+    el[key] = handler;
   }
 }
-function renderEffect(fn, noLifecycle = false) {
-  const effect = new RenderEffect(fn);
-  if (noLifecycle) {
-    effect.fn = fn;
+const delegatedEvents = /* @__PURE__ */ Object.create(null);
+const delegateEvents = (...names) => {
+  for (const name of names) {
+    if (!delegatedEvents[name]) {
+      delegatedEvents[name] = true;
+      document.addEventListener(name, delegatedEventHandler);
+    }
   }
-  effect.run();
-}
-
-const displayName = "VaporTransition";
-const decorate$1 = (t) => {
-  t.displayName = displayName;
-  t.props = TransitionPropsValidators;
-  t.__vapor = true;
-  return t;
 };
-const VaporTransition = /* @__PURE__ */ decorate$1(
-  (props, { slots, attrs }) => {
-    let resetDisplay;
-    if (isHydrating && currentHydrationNode && isTemplateNode(currentHydrationNode)) {
-      const {
-        content: { firstChild },
-        parentNode
-      } = currentHydrationNode;
-      if (firstChild) {
-        if (firstChild instanceof HTMLElement || firstChild instanceof SVGElement) {
-          const originalDisplay = firstChild.style.display;
-          firstChild.style.display = "none";
-          resetDisplay = () => firstChild.style.display = originalDisplay;
-        }
-        parentNode.replaceChild(firstChild, currentHydrationNode);
-        setCurrentHydrationNode(firstChild);
-      }
+const delegatedEventHandler = (e) => {
+  let node = e.composedPath && e.composedPath()[0] || e.target;
+  if (e.target !== node) {
+    Object.defineProperty(e, "target", {
+      configurable: true,
+      value: node
+    });
+  }
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
     }
-    const children = slots.default && slots.default();
-    if (!children) return;
-    const instance = currentInstance;
-    const { mode } = props;
-    checkTransitionMode(mode);
-    let resolvedProps;
-    let isMounted = false;
-    renderEffect(() => {
-      resolvedProps = resolveTransitionProps(props);
-      if (isMounted) {
-        if (isFragment(children)) {
-          children.$transition.props = resolvedProps;
-        } else {
-          const child = findTransitionBlock(children);
-          if (child) {
-            child.$transition.props = resolvedProps;
-            applyTransitionHooks(child, child.$transition, void 0, true);
+  });
+  while (node !== null) {
+    const handlers = node[`$evt${e.type}`];
+    if (handlers) {
+      if (isArray(handlers)) {
+        for (const handler of handlers) {
+          if (!node.disabled) {
+            handler(e);
+            if (e.cancelBubble) return;
           }
         }
       } else {
-        isMounted = true;
+        handlers(e);
+        if (e.cancelBubble) return;
       }
-    });
-    let fallthroughAttrs = true;
-    if (instance.hasFallthrough) {
-      renderEffect(() => {
-        const resolvedAttrs = extend({}, attrs);
-        const child = findTransitionBlock(children);
-        if (child) {
-          child.$root = true;
-          applyFallthroughProps(child, resolvedAttrs);
-          fallthroughAttrs = false;
-        }
-      });
-    }
-    const hooks = applyTransitionHooks(
-      children,
-      {
-        state: useTransitionState(),
-        props: resolvedProps,
-        instance
-      },
-      fallthroughAttrs
-    );
-    if (resetDisplay && resolvedProps.appear) {
-      const child = findTransitionBlock(children);
-      hooks.beforeEnter(child);
-      resetDisplay();
-      queuePostFlushCb(() => hooks.enter(child));
     }
-    return children;
+    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
   }
-);
-const getTransitionHooksContext = (key, props, state, instance, postClone) => {
-  const { leavingNodes } = state;
-  const context = {
-    setLeavingNodeCache: (el) => {
-      leavingNodes.set(key, el);
-    },
-    unsetLeavingNodeCache: (el) => {
-      const leavingNode = leavingNodes.get(key);
-      if (leavingNode === el) {
-        leavingNodes.delete(key);
-      }
-    },
-    earlyRemove: () => {
-      const leavingNode = leavingNodes.get(key);
-      if (leavingNode && leavingNode[leaveCbKey]) {
-        leavingNode[leaveCbKey]();
-      }
-    },
-    cloneHooks: (block) => {
-      const hooks = resolveTransitionHooks(
-        block,
-        props,
-        state,
-        instance,
-        postClone
-      );
-      if (postClone) postClone(hooks);
-      return hooks;
-    }
-  };
-  return context;
 };
-function resolveTransitionHooks(block, props, state, instance, postClone) {
-  const context = getTransitionHooksContext(
-    String(block.$key),
-    props,
-    state,
-    instance,
-    postClone
-  );
-  const hooks = baseResolveTransitionHooks(
-    context,
-    props,
-    state,
-    instance
-  );
-  hooks.state = state;
-  hooks.props = props;
-  hooks.instance = instance;
-  return hooks;
-}
-function applyTransitionHooks(block, hooks, fallthroughAttrs = true, isResolved = false) {
-  if (isArray(block)) {
-    block = block.filter((b) => !(b instanceof Comment));
-    if (block.length === 1) {
-      block = block[0];
-    } else if (block.length === 0) {
-      return hooks;
-    }
-  }
-  const isFrag = isFragment(block);
-  const child = isResolved ? block : findTransitionBlock(block, isFrag);
-  if (!child) {
-    if (isFrag) setTransitionHooksOnFragment(block, hooks);
-    return hooks;
+function setDynamicEvents(el, events) {
+  for (const name in events) {
+    on(el, name, events[name], { effect: true });
   }
-  const { props, instance, state, delayedLeave, group } = hooks;
-  let resolvedHooks = resolveTransitionHooks(
-    child,
-    props,
-    state,
-    instance,
-    (hooks2) => resolvedHooks = hooks2
+}
+function createInvoker(handler) {
+  const i = currentInstance;
+  return (...args) => callWithAsyncErrorHandling(
+    handler,
+    i,
+    5,
+    args
   );
-  resolvedHooks.delayedLeave = delayedLeave;
-  resolvedHooks.group = group;
-  child.$transition = resolvedHooks;
-  if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks);
-  if (fallthroughAttrs && instance.hasFallthrough) {
-    child.$root = true;
-    applyFallthroughProps(child, instance.attrs);
+}
+
+const hasFallthroughKey = (key) => currentInstance.hasFallthrough && key in currentInstance.attrs;
+function setProp(el, key, value) {
+  if (key in el) {
+    setDOMProp(el, key, value);
+  } else {
+    setAttr(el, key, value);
   }
-  return resolvedHooks;
 }
-function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
-  const leavingBlock = findTransitionBlock(block);
-  if (!leavingBlock) return void 0;
-  const { props, state, instance } = enterHooks;
-  const leavingHooks = resolveTransitionHooks(
-    leavingBlock,
-    props,
-    state,
-    instance
-  );
-  leavingBlock.$transition = leavingHooks;
-  const { mode } = props;
-  if (mode === "out-in") {
-    state.isLeaving = true;
-    leavingHooks.afterLeave = () => {
-      state.isLeaving = false;
-      afterLeaveCb();
-      leavingBlock.$transition = void 0;
-      delete leavingHooks.afterLeave;
-    };
-  } else if (mode === "in-out") {
-    leavingHooks.delayLeave = (block2, earlyRemove, delayedLeave) => {
-      state.leavingNodes.set(String(leavingBlock.$key), leavingBlock);
-      block2[leaveCbKey] = () => {
-        earlyRemove();
-        block2[leaveCbKey] = void 0;
-        leavingBlock.$transition = void 0;
-        delete enterHooks.delayedLeave;
-      };
-      enterHooks.delayedLeave = () => {
-        delayedLeave();
-        leavingBlock.$transition = void 0;
-        delete enterHooks.delayedLeave;
-      };
-    };
+function setAttr(el, key, value, isSVG = false) {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+    return;
   }
-}
-function findTransitionBlock(block, inFragment = false) {
-  let child;
-  if (block instanceof Node) {
-    if (block instanceof Element) child = block;
-  } else if (isVaporComponent(block)) {
-    if (isAsyncWrapper(block) && !block.type.__asyncResolved) {
-      child = block;
+  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 && !attributeHasMismatch(el, key, value)) {
+    el[`$${key}`] = value;
+    return;
+  }
+  if (value !== el[`$${key}`]) {
+    el[`$${key}`] = value;
+    if (isSVG && key.startsWith("xlink:")) {
+      if (value != null) {
+        el.setAttributeNS(xlinkNS, key, value);
+      } else {
+        el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
+      }
     } else {
-      if (getComponentName(block.type) === displayName) return void 0;
-      child = findTransitionBlock(block.block, inFragment);
-      if (child && child.$key === void 0) child.$key = block.uid;
-    }
-  } else if (isArray(block)) {
-    let hasFound = false;
-    for (const c of block) {
-      if (c instanceof Comment) continue;
-      if (isFragment(c)) inFragment = true;
-      const item = findTransitionBlock(c, inFragment);
-      if (!!(process.env.NODE_ENV !== "production") && hasFound) {
-        warn(
-          "<transition> can only be used on a single element or component. Use <transition-group> for lists."
-        );
-        break;
+      if (value != null) {
+        el.setAttribute(key, value);
+      } else {
+        el.removeAttribute(key);
       }
-      child = item;
-      hasFound = true;
-      if (!!!(process.env.NODE_ENV !== "production")) break;
     }
-  } else if (isFragment(block)) {
-    inFragment = true;
-    if (block.insert) {
-      child = block;
-    } else {
-      child = findTransitionBlock(block.nodes, true);
+  }
+}
+function setDOMProp(el, key, value, forceHydrate = false, attrName) {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+    return;
+  }
+  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !attributeHasMismatch(el, key, value) && !shouldForceHydrate(el, key) && !forceHydrate) {
+    return;
+  }
+  const prev = el[key];
+  if (value === prev) {
+    return;
+  }
+  let needRemove = false;
+  if (value === "" || value == null) {
+    const type = typeof prev;
+    if (type === "boolean") {
+      value = includeBooleanAttr(value);
+    } else if (value == null && type === "string") {
+      value = "";
+      needRemove = true;
+    } else if (type === "number") {
+      value = 0;
+      needRemove = true;
     }
   }
-  if (!!(process.env.NODE_ENV !== "production") && !child && !inFragment) {
-    warn("Transition component has no valid child element");
+  try {
+    el[key] = value;
+  } catch (e) {
+    if (!!(process.env.NODE_ENV !== "production") && !needRemove) {
+      warn(
+        `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: value ${value} is invalid.`,
+        e
+      );
+    }
   }
-  return child;
+  needRemove && el.removeAttribute(attrName || key);
 }
-function setTransitionHooksOnFragment(block, hooks) {
-  if (isFragment(block)) {
-    block.$transition = hooks;
-    if (block.nodes && isFragment(block.nodes)) {
-      setTransitionHooksOnFragment(block.nodes, hooks);
+function setClass(el, value, isSVG = false) {
+  if (el.$root) {
+    setClassIncremental(el, value);
+  } else {
+    value = normalizeClass(value);
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !classHasMismatch(el, value, false)) {
+      el.$cls = value;
+      return;
     }
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      setTransitionHooksOnFragment(block[i], hooks);
+    if (value !== el.$cls) {
+      if (isSVG) {
+        el.setAttribute("class", el.$cls = value);
+      } else {
+        el.className = el.$cls = value;
+      }
     }
   }
 }
-function setTransitionHooks(block, hooks) {
-  if (isVaporComponent(block)) {
-    block = findTransitionBlock(block.block);
-    if (!block) return;
+function setClassIncremental(el, value) {
+  const cacheKey = `$clsi${isApplyingFallthroughProps ? "$" : ""}`;
+  const normalizedValue = normalizeClass(value);
+  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !classHasMismatch(el, normalizedValue, true)) {
+    el[cacheKey] = normalizedValue;
+    return;
   }
-  block.$transition = hooks;
-}
-
-class VaporFragment {
-  constructor(nodes) {
-    this.vnode = null;
-    this.nodes = nodes;
+  const prev = el[cacheKey];
+  if ((value = el[cacheKey] = normalizedValue) !== prev) {
+    const nextList = value.split(/\s+/);
+    if (value) {
+      el.classList.add(...nextList);
+    }
+    if (prev) {
+      for (const cls of prev.split(/\s+/)) {
+        if (!nextList.includes(cls)) el.classList.remove(cls);
+      }
+    }
   }
 }
-class ForFragment extends VaporFragment {
-  constructor(nodes) {
-    super(nodes);
-  }
+function shouldDeferCheckStyleMismatch(el) {
+  return !!(process.env.NODE_ENV !== "production") && (!!currentInstance.getCssVars || Object.values(el.style).some((v) => v.startsWith("--")));
 }
-class DynamicFragment extends VaporFragment {
-  constructor(anchorLabel) {
-    super([]);
-    this.hydrate = (isEmpty = false) => {
-      if (this.anchor) return;
-      if (this.anchorLabel === "if") {
-        if (isEmpty) {
-          this.anchor = locateFragmentEndAnchor("");
-          if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
-            throw new Error(
-              "Failed to locate if anchor. this is likely a Vue internal bug."
-            );
-          } else {
-            if (!!(process.env.NODE_ENV !== "production")) {
-              this.anchor.data = this.anchorLabel;
-            }
+function setStyle(el, value) {
+  if (el.$root) {
+    setStyleIncremental(el, value);
+  } else {
+    const normalizedValue = normalizeStyle(value);
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating) {
+      if (shouldDeferCheckStyleMismatch(el)) {
+        const instance = currentInstance;
+        queuePostFlushCb(() => {
+          if (!styleHasMismatch(el, value, normalizedValue, false, instance)) {
+            el.$sty = normalizedValue;
             return;
           }
-        }
-      } else if (this.anchorLabel === "slot") {
-        if (isEmpty && isComment(currentHydrationNode, "")) {
-          this.anchor = currentHydrationNode;
-          if (!!(process.env.NODE_ENV !== "production")) {
-            this.anchor.data = this.anchorLabel;
-          }
-          return;
-        }
-        this.anchor = locateFragmentEndAnchor();
-        if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
-          throw new Error(
-            "Failed to locate slot anchor. this is likely a Vue internal bug."
-          );
-        } else {
-          return;
-        }
+          patchStyle(el, el.$sty, el.$sty = normalizedValue);
+        });
+        return;
+      } else if (!styleHasMismatch(el, value, normalizedValue, false)) {
+        el.$sty = normalizedValue;
+        return;
       }
-      const { parentNode, nextNode } = findBlockNode(this.nodes);
-      queuePostFlushCb(() => {
-        parentNode.insertBefore(
-          this.anchor = !!(process.env.NODE_ENV !== "production") ? createComment(this.anchorLabel) : createTextNode(),
-          nextNode
-        );
-      });
-    };
-    if (isHydrating) {
-      this.anchorLabel = anchorLabel;
-      locateHydrationNode();
-    } else {
-      this.anchor = !!(process.env.NODE_ENV !== "production") && anchorLabel ? createComment(anchorLabel) : createTextNode();
     }
+    patchStyle(el, el.$sty, el.$sty = normalizedValue);
   }
-  update(render, key = render) {
-    if (key === this.current) {
-      if (isHydrating) this.hydrate(true);
+}
+function setStyleIncremental(el, value) {
+  const cacheKey = `$styi${isApplyingFallthroughProps ? "$" : ""}`;
+  const normalizedValue = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
+  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating) {
+    if (shouldDeferCheckStyleMismatch(el)) {
+      const instance = currentInstance;
+      queuePostFlushCb(() => {
+        if (!styleHasMismatch(el, value, normalizedValue, true, instance)) {
+          el[cacheKey] = normalizedValue;
+          return;
+        }
+        patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
+      });
+      return;
+    } else if (!styleHasMismatch(el, value, normalizedValue, true)) {
+      el[cacheKey] = normalizedValue;
       return;
     }
-    this.current = key;
-    const prevSub = setActiveSub();
-    const parent = isHydrating ? null : this.anchor.parentNode;
-    const transition = this.$transition;
-    const instance = currentInstance;
-    this.inKeepAlive = isKeepAlive(instance);
-    if (this.scope) {
-      if (this.inKeepAlive) {
-        instance.processFragment(this);
-        if (!this.keptAliveScopes) this.keptAliveScopes = /* @__PURE__ */ new Map();
-        this.keptAliveScopes.set(this.current, this.scope);
-      } else {
-        this.scope.stop();
-      }
-      const mode = transition && transition.mode;
-      if (mode) {
-        applyTransitionLeaveHooks(
-          this.nodes,
-          transition,
-          () => this.render(render, instance, transition, parent)
-        );
-        parent && remove(this.nodes, parent);
-        if (mode === "out-in") {
-          setActiveSub(prevSub);
-          return;
-        }
-      } else {
-        parent && remove(this.nodes, parent);
-      }
-    }
-    this.render(render, instance, transition, parent);
-    if (this.fallback) {
-      const hasNestedFragment = isFragment(this.nodes);
-      if (hasNestedFragment) {
-        setFragmentFallback(this.nodes, this.fallback);
-      }
-      const invalidFragment = findInvalidFragment(this);
-      if (invalidFragment) {
-        parent && remove(this.nodes, parent);
-        const scope = this.scope || (this.scope = new EffectScope());
-        scope.run(() => {
-          if (hasNestedFragment) {
-            renderFragmentFallback(invalidFragment);
-          } else {
-            this.nodes = this.fallback() || [];
-          }
-        });
-        parent && insert(this.nodes, parent, this.anchor);
-      }
-    }
-    setActiveSub(prevSub);
-    if (isHydrating) this.hydrate();
-  }
-  render(render, instance, transition, parent) {
-    if (render) {
-      const scope = this.inKeepAlive && this.keptAliveScopes ? this.keptAliveScopes.get(this.current) : void 0;
-      if (scope) {
-        this.scope = scope;
-        this.keptAliveScopes.delete(this.current);
-        this.scope.resume();
-      } else {
-        this.scope = new EffectScope();
-      }
-      this.nodes = this.scope.run(render) || [];
-      if (this.inKeepAlive) {
-        instance.cacheFragment(this);
-      }
-      if (transition) {
-        this.$transition = applyTransitionHooks(this.nodes, transition);
-      }
-      if (parent) insert(this.nodes, parent, this.anchor);
-    } else {
-      this.scope = void 0;
-      this.nodes = [];
-    }
   }
+  patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
 }
-function setFragmentFallback(fragment, fallback) {
-  if (fragment.fallback) {
-    const originalFallback = fragment.fallback;
-    fragment.fallback = () => {
-      const fallbackNodes = originalFallback();
-      if (isValidBlock(fallbackNodes)) {
-        return fallbackNodes;
-      }
-      return fallback();
-    };
-  } else {
-    fragment.fallback = fallback;
+function setValue(el, value, forceHydrate = false) {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey("value")) {
+    return;
   }
-  if (isFragment(fragment.nodes)) {
-    setFragmentFallback(fragment.nodes, fragment.fallback);
+  el._value = value;
+  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !attributeHasMismatch(el, "value", getClientText(el, value)) && !shouldForceHydrate(el, "value") && !forceHydrate) {
+    return;
   }
-}
-function renderFragmentFallback(fragment) {
-  if (fragment instanceof ForFragment) {
-    fragment.nodes[0] = [fragment.fallback() || []];
-  } else if (fragment instanceof DynamicFragment) {
-    fragment.update(fragment.fallback);
-  } else ;
-}
-function findInvalidFragment(fragment) {
-  if (isValidBlock(fragment.nodes)) return null;
-  return isFragment(fragment.nodes) ? findInvalidFragment(fragment.nodes) || fragment : fragment;
-}
-function isFragment(val) {
-  return val instanceof VaporFragment;
-}
-
-function addEventListener(el, event, handler, options) {
-  el.addEventListener(event, handler, options);
-  return () => el.removeEventListener(event, handler, options);
-}
-function on(el, event, handler, options = {}) {
-  addEventListener(el, event, handler, options);
-  if (options.effect) {
-    onEffectCleanup(() => {
-      el.removeEventListener(event, handler, options);
-    });
+  const oldValue = el.tagName === "OPTION" ? el.getAttribute("value") : el.value;
+  const newValue = value == null ? "" : value;
+  if (oldValue !== newValue) {
+    el.value = newValue;
   }
-}
-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;
+  if (value == null) {
+    el.removeAttribute("value");
   }
 }
-const delegatedEvents = /* @__PURE__ */ Object.create(null);
-const delegateEvents = (...names) => {
-  for (const name of names) {
-    if (!delegatedEvents[name]) {
-      delegatedEvents[name] = true;
-      document.addEventListener(name, delegatedEventHandler);
+function setText(el, value) {
+  if (isHydrating) {
+    const clientText = getClientText(el.parentNode, value);
+    if (el.nodeValue == clientText) {
+      el.$txt = clientText;
+      return;
     }
+    (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && warn(
+      `Hydration text mismatch in`,
+      el.parentNode,
+      `
+  - rendered on server: ${JSON.stringify(el.data)}
+  - expected on client: ${JSON.stringify(value)}`
+    );
+    logMismatchError();
   }
-};
-const delegatedEventHandler = (e) => {
-  let node = e.composedPath && e.composedPath()[0] || e.target;
-  if (e.target !== node) {
-    Object.defineProperty(e, "target", {
-      configurable: true,
-      value: node
-    });
+  if (el.$txt !== value) {
+    el.nodeValue = el.$txt = value;
   }
-  Object.defineProperty(e, "currentTarget", {
-    configurable: true,
-    get() {
-      return node || document;
+}
+function setElementText(el, value) {
+  value = toDisplayString(value);
+  if (isHydrating) {
+    let clientText = getClientText(el, value);
+    if (el.textContent === clientText) {
+      el.$txt = clientText;
+      return;
     }
-  });
-  while (node !== null) {
-    const handlers = node[`$evt${e.type}`];
-    if (handlers) {
-      if (isArray(handlers)) {
-        for (const handler of handlers) {
-          if (!node.disabled) {
-            handler(e);
-            if (e.cancelBubble) return;
-          }
-        }
-      } else {
-        handlers(e);
-        if (e.cancelBubble) return;
-      }
+    if (!isMismatchAllowed(el, 0)) {
+      (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && warn(
+        `Hydration text content mismatch on`,
+        el,
+        `
+  - rendered on server: ${el.textContent}
+  - expected on client: ${clientText}`
+      );
+      logMismatchError();
     }
-    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
   }
-};
-function setDynamicEvents(el, events) {
-  for (const name in events) {
-    on(el, name, events[name], { effect: true });
+  if (el.$txt !== value) {
+    el.textContent = el.$txt = value;
   }
 }
-function createInvoker(handler) {
-  const i = currentInstance;
-  return (...args) => callWithAsyncErrorHandling(
-    handler,
-    i,
-    5,
-    args
+function setBlockText(block, value) {
+  value = value == null ? "" : value;
+  if (block.$txt !== value) {
+    setTextToBlock(block, block.$txt = value);
+  }
+}
+function warnCannotSetProp(prop) {
+  warn(
+    `Extraneous non-props attributes (${prop}) were passed to component but could not be automatically inherited because component renders text or multiple root nodes.`
   );
 }
-
-const hasFallthroughKey = (key) => currentInstance.hasFallthrough && key in currentInstance.attrs;
-function setProp(el, key, value) {
-  if (key in el) {
-    setDOMProp(el, key, value);
+function setTextToBlock(block, value) {
+  if (block instanceof Node) {
+    if (block instanceof Element) {
+      block.textContent = value;
+    } else if (!!(process.env.NODE_ENV !== "production")) {
+      warnCannotSetProp("textContent");
+    }
+  } else if (isVaporComponent(block)) {
+    setTextToBlock(block.block, value);
+  } else if (isArray(block)) {
+    if (!!(process.env.NODE_ENV !== "production")) {
+      warnCannotSetProp("textContent");
+    }
   } else {
-    setAttr(el, key, value);
+    setTextToBlock(block.nodes, value);
   }
 }
-function setAttr(el, key, value, isSVG = false) {
-  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(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 && !attributeHasMismatch(el, key, value)) {
-    el[`$${key}`] = value;
-    return;
-  }
-  if (value !== el[`$${key}`]) {
-    el[`$${key}`] = value;
-    if (isSVG && key.startsWith("xlink:")) {
-      if (value != null) {
-        el.setAttributeNS(xlinkNS, key, value);
-      } else {
-        el.removeAttributeNS(xlinkNS, key.slice(6, key.length));
-      }
-    } else {
-      if (value != null) {
-        el.setAttribute(key, value);
-      } else {
-        el.removeAttribute(key);
-      }
-    }
-  }
-}
-function setDOMProp(el, key, value, forceHydrate = false, attrName) {
-  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
-    return;
-  }
-  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !attributeHasMismatch(el, key, value) && !shouldForceHydrate(el, key) && !forceHydrate) {
-    return;
-  }
-  const prev = el[key];
-  if (value === prev) {
-    return;
-  }
-  let needRemove = false;
-  if (value === "" || value == null) {
-    const type = typeof prev;
-    if (type === "boolean") {
-      value = includeBooleanAttr(value);
-    } else if (value == null && type === "string") {
-      value = "";
-      needRemove = true;
-    } else if (type === "number") {
-      value = 0;
-      needRemove = true;
-    }
-  }
-  try {
-    el[key] = value;
-  } catch (e) {
-    if (!!(process.env.NODE_ENV !== "production") && !needRemove) {
-      warn(
-        `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: value ${value} is invalid.`,
-        e
-      );
-    }
-  }
-  needRemove && el.removeAttribute(attrName || key);
-}
-function setClass(el, value, isSVG = false) {
-  if (el.$root) {
-    setClassIncremental(el, value);
-  } else {
-    value = normalizeClass(value);
-    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !classHasMismatch(el, value, false)) {
-      el.$cls = value;
-      return;
-    }
-    if (value !== el.$cls) {
-      if (isSVG) {
-        el.setAttribute("class", el.$cls = value);
-      } else {
-        el.className = el.$cls = value;
-      }
-    }
-  }
-}
-function setClassIncremental(el, value) {
-  const cacheKey = `$clsi${isApplyingFallthroughProps ? "$" : ""}`;
-  const normalizedValue = normalizeClass(value);
-  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !classHasMismatch(el, normalizedValue, true)) {
-    el[cacheKey] = normalizedValue;
-    return;
-  }
-  const prev = el[cacheKey];
-  if ((value = el[cacheKey] = normalizedValue) !== prev) {
-    const nextList = value.split(/\s+/);
-    if (value) {
-      el.classList.add(...nextList);
-    }
-    if (prev) {
-      for (const cls of prev.split(/\s+/)) {
-        if (!nextList.includes(cls)) el.classList.remove(cls);
-      }
-    }
-  }
-}
-function setStyle(el, value) {
-  if (el.$root) {
-    setStyleIncremental(el, value);
-  } else {
-    const normalizedValue = normalizeStyle(value);
-    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, false)) {
-      el.$sty = normalizedValue;
-      return;
-    }
-    patchStyle(el, el.$sty, el.$sty = normalizedValue);
-  }
-}
-function setStyleIncremental(el, value) {
-  const cacheKey = `$styi${isApplyingFallthroughProps ? "$" : ""}`;
-  const normalizedValue = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
-  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, true)) {
-    el[cacheKey] = normalizedValue;
-    return;
-  }
-  patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
-}
-function setValue(el, value, forceHydrate = false) {
-  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey("value")) {
-    return;
-  }
-  el._value = value;
-  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !attributeHasMismatch(el, "value", getClientText(el, value)) && !shouldForceHydrate(el, "value") && !forceHydrate) {
-    return;
-  }
-  const oldValue = el.tagName === "OPTION" ? el.getAttribute("value") : el.value;
-  const newValue = value == null ? "" : value;
-  if (oldValue !== newValue) {
-    el.value = newValue;
-  }
-  if (value == null) {
-    el.removeAttribute("value");
-  }
-}
-function setText(el, value) {
-  if (isHydrating) {
-    const clientText = getClientText(el.parentNode, value);
-    if (el.nodeValue == clientText) {
-      el.$txt = clientText;
-      return;
-    }
-    (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && warn(
-      `Hydration text mismatch in`,
-      el.parentNode,
-      `
-  - rendered on server: ${JSON.stringify(el.data)}
-  - expected on client: ${JSON.stringify(value)}`
-    );
-    logMismatchError();
-  }
-  if (el.$txt !== value) {
-    el.nodeValue = el.$txt = value;
-  }
-}
-function setElementText(el, value) {
-  value = toDisplayString(value);
-  if (isHydrating) {
-    let clientText = getClientText(el, value);
-    if (el.textContent === clientText) {
-      el.$txt = clientText;
-      return;
-    }
-    if (!isMismatchAllowed(el, 0)) {
-      (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && warn(
-        `Hydration text content mismatch on`,
-        el,
-        `
-  - rendered on server: ${el.textContent}
-  - expected on client: ${clientText}`
-      );
-      logMismatchError();
-    }
-  }
-  if (el.$txt !== value) {
-    el.textContent = el.$txt = value;
-  }
-}
-function setBlockText(block, value) {
-  value = value == null ? "" : value;
-  if (block.$txt !== value) {
-    setTextToBlock(block, block.$txt = value);
-  }
-}
-function warnCannotSetProp(prop) {
-  warn(
-    `Extraneous non-props attributes (${prop}) were passed to component but could not be automatically inherited because component renders text or multiple root nodes.`
-  );
-}
-function setTextToBlock(block, value) {
-  if (block instanceof Node) {
-    if (block instanceof Element) {
-      block.textContent = value;
-    } else if (!!(process.env.NODE_ENV !== "production")) {
-      warnCannotSetProp("textContent");
-    }
-  } else if (isVaporComponent(block)) {
-    setTextToBlock(block.block, value);
-  } else if (isArray(block)) {
-    if (!!(process.env.NODE_ENV !== "production")) {
-      warnCannotSetProp("textContent");
-    }
-  } else {
-    setTextToBlock(block.nodes, value);
-  }
-}
-function setHtml(el, value) {
-  value = value == null ? "" : unsafeToTrustedHTML(value);
-  if (el.$html !== value) {
-    el.innerHTML = el.$html = value;
+function setHtml(el, value) {
+  value = value == null ? "" : unsafeToTrustedHTML(value);
+  if (el.$html !== value) {
+    el.innerHTML = el.$html = value;
   }
 }
 function setBlockHtml(block, value) {
@@ -1169,11 +699,10 @@ function setHtmlToBlock(block, value) {
     setHtmlToBlock(block.nodes, value);
   }
 }
-function setDynamicProps(el, args, root, isSVG) {
+function setDynamicProps(el, args, isSVG) {
   const props = args.length > 1 ? mergeProps(...args) : args[0];
   const cacheKey = `$dprops${isApplyingFallthroughProps ? "$" : ""}`;
   const prevKeys = el[cacheKey];
-  if (root) el.$root = root;
   if (prevKeys) {
     for (const key of prevKeys) {
       if (!(key in props)) {
@@ -1249,7 +778,7 @@ function classHasMismatch(el, expected, isIncremental) {
   }
   return false;
 }
-function styleHasMismatch(el, value, normalizedValue, isIncremental) {
+function styleHasMismatch(el, value, normalizedValue, isIncremental, instance = currentInstance) {
   const actual = el.getAttribute("style");
   const actualStyleMap = toStyleMap(actual || "");
   const expected = isString(value) ? value : stringifyStyle(normalizedValue);
@@ -1257,6 +786,9 @@ function styleHasMismatch(el, value, normalizedValue, isIncremental) {
   if (el[vShowHidden]) {
     expectedStyleMap.set("display", "none");
   }
+  if (instance) {
+    resolveCssVars(instance, el, expectedStyleMap);
+  }
   let hasMismatch = false;
   if (isIncremental) {
     if (expected) {
@@ -1274,6 +806,24 @@ function styleHasMismatch(el, value, normalizedValue, isIncremental) {
   }
   return false;
 }
+function resolveCssVars(instance, block, expectedMap) {
+  if (!instance.isMounted) return;
+  const rootBlocks = normalizeBlock(instance);
+  if (instance.getCssVars && normalizeBlock(block).every((b) => rootBlocks.includes(b))) {
+    const cssVars = instance.getCssVars();
+    for (const key in cssVars) {
+      const value = normalizeCssVarValue(cssVars[key]);
+      expectedMap.set(`--${getEscapedCssVarName(key, false)}`, value);
+    }
+  }
+  if (normalizeBlock(block).every((b) => rootBlocks.includes(b)) && instance.parent) {
+    resolveCssVars(
+      instance.parent,
+      instance.block,
+      expectedMap
+    );
+  }
+}
 function attributeHasMismatch(el, key, value) {
   if (isValidHtmlOrSvgAttribute(el, key)) {
     const { actual, expected } = getAttributeMismatch(el, key, value);
@@ -1297,232 +847,51 @@ function shouldForceHydrate(el, key) {
   tagName.includes("-");
 }
 
-let currentSlotScopeIds = null;
-function setCurrentSlotScopeIds(scopeIds) {
-  try {
-    return currentSlotScopeIds;
-  } finally {
-    currentSlotScopeIds = scopeIds;
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function defineVaporComponent(comp, extraOptions) {
+  if (isFunction(comp)) {
+    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
+      setup: comp,
+      __vapor: true
+    }))();
   }
+  comp.__vapor = true;
+  return comp;
 }
-const dynamicSlotsProxyHandlers = {
-  get: getSlot,
-  has: (target, key) => !!getSlot(target, key),
-  getOwnPropertyDescriptor(target, key) {
-    const slot = getSlot(target, key);
-    if (slot) {
-      return {
-        configurable: true,
-        enumerable: true,
-        value: slot
-      };
-    }
+
+const VaporKeepAliveImpl = defineVaporComponent({
+  name: "VaporKeepAlive",
+  __isKeepAlive: true,
+  props: {
+    include: [String, RegExp, Array],
+    exclude: [String, RegExp, Array],
+    max: [String, Number]
   },
-  ownKeys(target) {
-    let keys = Object.keys(target);
-    const dynamicSources = target.$;
-    if (dynamicSources) {
-      keys = keys.filter((k) => k !== "$");
-      for (const source of dynamicSources) {
-        if (isFunction(source)) {
-          const slot = source();
-          if (isArray(slot)) {
-            for (const s of slot) keys.push(String(s.name));
-          } else {
-            keys.push(String(slot.name));
-          }
-        } else {
-          keys.push(...Object.keys(source));
-        }
-      }
-    }
-    return keys;
-  },
-  set: NO,
-  deleteProperty: NO
-};
-function getSlot(target, key) {
-  if (key === "$") return;
-  const dynamicSources = target.$;
-  if (dynamicSources) {
-    let i = dynamicSources.length;
-    let source;
-    while (i--) {
-      source = dynamicSources[i];
-      if (isFunction(source)) {
-        const slot = source();
-        if (slot) {
-          if (isArray(slot)) {
-            for (const s of slot) {
-              if (String(s.name) === key) return s.fn;
-            }
-          } else if (String(slot.name) === key) {
-            return slot.fn;
-          }
-        }
-      } else if (hasOwn(source, key)) {
-        return source[key];
-      }
-    }
-  }
-  if (hasOwn(target, key)) {
-    return target[key];
-  }
-}
-let currentSlotConsumer = null;
-function setCurrentSlotConsumer(consumer) {
-  try {
-    return currentSlotConsumer;
-  } finally {
-    currentSlotConsumer = consumer;
-  }
-}
-function getParentInstance() {
-  return currentSlotConsumer || currentInstance;
-}
-function withVaporCtx(fn) {
-  const owner = currentInstance;
-  return (...args) => {
-    const prev = setCurrentInstance(owner);
-    const prevConsumer = setCurrentSlotConsumer(prev[0]);
-    try {
-      return fn(...args);
-    } finally {
-      setCurrentInstance(...prev);
-      setCurrentSlotConsumer(prevConsumer);
-    }
-  };
-}
-function createSlot(name, rawProps, fallback, noSlotted) {
-  const _insertionParent = insertionParent;
-  const _insertionAnchor = insertionAnchor;
-  const _isLastInsertion = isLastInsertion;
-  if (!isHydrating) resetInsertionState();
-  const instance = currentInstance;
-  const rawSlots = instance.rawSlots;
-  const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
-  let fragment;
-  if (isRef(rawSlots._)) {
-    if (isHydrating) locateHydrationNode();
-    fragment = instance.appContext.vapor.vdomSlot(
-      rawSlots._,
-      name,
-      slotProps,
-      instance,
-      fallback
-    );
-  } else {
-    fragment = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
-    const isDynamicName = isFunction(name);
-    const slotScopeIds = [];
-    if (!noSlotted) {
-      const scopeId = instance.type.__scopeId;
-      if (scopeId) {
-        slotScopeIds.push(`${scopeId}-s`);
-      }
-    }
-    const renderSlot = () => {
-      const slotName = isFunction(name) ? name() : name;
-      if (instance.ce || instance.parent && isAsyncWrapper(instance.parent) && instance.parent.ce) {
-        const el = createElement("slot");
-        renderEffect(() => {
-          setDynamicProps(el, [
-            slotProps,
-            slotName !== "default" ? { name: slotName } : {}
-          ]);
-        });
-        if (fallback) insert(fallback(), el);
-        fragment.nodes = el;
-        return;
-      }
-      const slot = getSlot(rawSlots, slotName);
-      if (slot) {
-        fragment.fallback = fallback;
-        fragment.update(
-          slot._bound || (slot._bound = () => {
-            const prevSlotScopeIds = setCurrentSlotScopeIds(
-              slotScopeIds.length > 0 ? slotScopeIds : null
-            );
-            try {
-              return slot(slotProps);
-            } finally {
-              setCurrentSlotScopeIds(prevSlotScopeIds);
-            }
-          })
-        );
-      } else {
-        fragment.update(fallback);
-      }
-    };
-    if (isDynamicName || rawSlots.$) {
-      renderEffect(renderSlot);
-    } else {
-      renderSlot();
-    }
-  }
-  if (!isHydrating) {
-    if (!noSlotted) {
-      const scopeId = instance.type.__scopeId;
-      if (scopeId) {
-        setScopeId(fragment, [`${scopeId}-s`]);
-      }
-    }
-    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
-  } else {
-    if (fragment.insert) {
-      fragment.hydrate();
-    }
-    if (_isLastInsertion) {
-      advanceHydrationNode(_insertionParent);
-    }
-  }
-  return fragment;
-}
-
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function defineVaporComponent(comp, extraOptions) {
-  if (isFunction(comp)) {
-    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
-      setup: comp,
-      __vapor: true
-    }))();
-  }
-  comp.__vapor = true;
-  return comp;
-}
-
-const VaporKeepAliveImpl = defineVaporComponent({
-  name: "VaporKeepAlive",
-  __isKeepAlive: true,
-  props: {
-    include: [String, RegExp, Array],
-    exclude: [String, RegExp, Array],
-    max: [String, Number]
-  },
-  setup(props, { slots }) {
-    if (!slots.default) {
-      return void 0;
+  setup(props, { slots }) {
+    if (!slots.default) {
+      return void 0;
     }
     const keepAliveInstance = currentInstance;
     const cache = /* @__PURE__ */ new Map();
     const keys = /* @__PURE__ */ new Set();
     const storageContainer = createElement("div");
+    const keptAliveScopes = /* @__PURE__ */ new Map();
     let current;
     if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
       keepAliveInstance.__v_cache = cache;
     }
-    function shouldCache(instance) {
-      if (isAsyncWrapper(instance) && !instance.type.__asyncResolved) {
-        return false;
-      }
-      const { include, exclude } = props;
-      const name = getComponentName(
-        isAsyncWrapper(instance) ? instance.type.__asyncResolved : instance.type
-      );
-      return !(include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name));
-    }
-    function innerCacheBlock(key, instance) {
+    keepAliveInstance.getStorageContainer = () => storageContainer;
+    keepAliveInstance.getCachedComponent = (comp) => cache.get(comp);
+    keepAliveInstance.activate = (instance, parentNode, anchor) => {
+      current = instance;
+      activate(instance, parentNode, anchor);
+    };
+    keepAliveInstance.deactivate = (instance) => {
+      current = void 0;
+      deactivate(instance, storageContainer);
+    };
+    const innerCacheBlock = (key, instance) => {
       const { max } = props;
       if (cache.has(key)) {
         keys.delete(key);
@@ -1535,116 +904,49 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
       cache.set(key, instance);
       current = instance;
-    }
-    function cacheBlock() {
-      const block = keepAliveInstance.block;
-      const innerBlock = getInnerBlock(block);
-      if (!innerBlock || !shouldCache(innerBlock)) return;
-      let toCache;
-      let key;
-      let frag;
-      if (isFragment(block) && (frag = findInteropFragment(block))) {
-        toCache = frag;
-        key = frag.vnode.type;
-      } else {
-        toCache = innerBlock;
-        key = innerBlock.type;
-      }
-      innerCacheBlock(key, toCache);
-    }
-    onMounted(cacheBlock);
-    onUpdated(cacheBlock);
-    onBeforeUnmount(() => {
-      cache.forEach((cached, key) => {
-        const instance = getInstanceFromCache(cached);
-        if (!instance) return;
-        resetCachedShapeFlag(cached);
-        cache.delete(key);
-        if (current) {
-          const currentKey = isVaporComponent(current) ? current.type : current.vnode.type;
-          if (currentKey === key) {
-            const da = instance.da;
-            da && queuePostFlushCb(da);
-            return;
-          }
-        }
-        remove(cached, storageContainer);
-      });
-    });
-    keepAliveInstance.getStorageContainer = () => storageContainer;
-    keepAliveInstance.getCachedComponent = (comp) => {
-      return cache.get(comp);
     };
-    keepAliveInstance.cacheComponent = (instance) => {
-      if (!shouldCache(instance)) return;
-      instance.shapeFlag |= 256;
-      innerCacheBlock(instance.type, instance);
+    const cacheBlock = () => {
+      const block = keepAliveInstance.block;
+      const [innerBlock, interop] = getInnerBlock(block);
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
+      innerCacheBlock(
+        interop ? innerBlock.vnode.type : innerBlock.type,
+        innerBlock
+      );
     };
-    keepAliveInstance.processFragment = (frag) => {
-      const innerBlock = getInnerBlock(frag.nodes);
-      if (!innerBlock) return;
-      const fragment = findInteropFragment(frag.nodes);
-      if (fragment) {
-        if (cache.has(fragment.vnode.type)) {
-          fragment.vnode.shapeFlag |= 512;
+    const processFragment = (frag) => {
+      const [innerBlock, interop] = getInnerBlock(frag.nodes);
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
+      if (interop) {
+        if (cache.has(innerBlock.vnode.type)) {
+          innerBlock.vnode.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock)) {
-          fragment.vnode.shapeFlag |= 256;
+        if (shouldCache(innerBlock, props, true)) {
+          innerBlock.vnode.shapeFlag |= 256;
         }
       } else {
         if (cache.has(innerBlock.type)) {
           innerBlock.shapeFlag |= 512;
         }
-        if (shouldCache(innerBlock)) {
+        if (shouldCache(innerBlock, props)) {
           innerBlock.shapeFlag |= 256;
         }
       }
     };
-    keepAliveInstance.cacheFragment = (fragment) => {
-      const innerBlock = getInnerBlock(fragment.nodes);
-      if (!innerBlock || !shouldCache(innerBlock)) return;
-      let toCache;
+    const cacheFragment = (fragment) => {
+      const [innerBlock, interop] = getInnerBlock(fragment.nodes);
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
       let key;
-      const frag = findInteropFragment(fragment);
-      if (frag) {
-        frag.vnode.shapeFlag |= 256;
-        toCache = frag;
-        key = frag.vnode.type;
+      if (interop) {
+        innerBlock.vnode.shapeFlag |= 256;
+        key = innerBlock.vnode.type;
       } else {
         innerBlock.shapeFlag |= 256;
-        toCache = innerBlock;
         key = innerBlock.type;
       }
-      innerCacheBlock(key, toCache);
-    };
-    keepAliveInstance.activate = (instance, parentNode, anchor) => {
-      current = instance;
-      activate(instance, parentNode, anchor);
-    };
-    keepAliveInstance.deactivate = (instance) => {
-      current = void 0;
-      deactivate(instance, storageContainer);
+      innerCacheBlock(key, innerBlock);
     };
-    function resetCachedShapeFlag(cached) {
-      if (isVaporComponent(cached)) {
-        resetShapeFlag(cached);
-      } else {
-        resetShapeFlag(cached.vnode);
-      }
-    }
-    let children = slots.default();
-    if (isArray(children) && children.length > 1) {
-      if (!!(process.env.NODE_ENV !== "production")) {
-        warn(`KeepAlive should contain exactly one component child.`);
-      }
-      return children;
-    }
-    if (isVaporComponent(children)) {
-      children.shapeFlag |= 256;
-    } else if (isInteropFragment(children)) {
-      children.vnode.shapeFlag |= 256;
-    }
-    function pruneCache(filter) {
+    const pruneCache = (filter) => {
       cache.forEach((cached, key) => {
         const instance = getInstanceFromCache(cached);
         if (!instance) return;
@@ -1653,8 +955,8 @@ const VaporKeepAliveImpl = defineVaporComponent({
           pruneCacheEntry(key);
         }
       });
-    }
-    function pruneCacheEntry(key) {
+    };
+    const pruneCacheEntry = (key) => {
       const cached = cache.get(key);
       resetCachedShapeFlag(cached);
       if (cached !== current) {
@@ -1662,7 +964,7 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
       cache.delete(key);
       keys.delete(key);
-    }
+    };
     watch(
       () => [props.include, props.exclude],
       ([include, exclude]) => {
@@ -1672,29 +974,103 @@ const VaporKeepAliveImpl = defineVaporComponent({
       // prune post-render after `current` has been updated
       { flush: "post", deep: true }
     );
+    onMounted(cacheBlock);
+    onUpdated(cacheBlock);
+    onBeforeUnmount(() => {
+      cache.forEach((cached, key) => {
+        const instance = getInstanceFromCache(cached);
+        if (!instance) return;
+        resetCachedShapeFlag(cached);
+        cache.delete(key);
+        if (current) {
+          const currentKey = isVaporComponent(current) ? current.type : current.vnode.type;
+          if (currentKey === key) {
+            const da = instance.da;
+            da && queuePostFlushCb(da);
+            return;
+          }
+        }
+        remove(cached, storageContainer);
+      });
+      keptAliveScopes.forEach((scope) => scope.stop());
+      keptAliveScopes.clear();
+    });
+    let children = slots.default();
+    if (isArray(children)) {
+      children = children.filter((child) => !(child instanceof Comment));
+      if (children.length > 1) {
+        if (!!(process.env.NODE_ENV !== "production")) {
+          warn(`KeepAlive should contain exactly one component child.`);
+        }
+        return children;
+      }
+    }
+    const injectKeepAliveHooks = (frag) => {
+      (frag.beforeTeardown || (frag.beforeTeardown = [])).push(
+        (oldKey, nodes, scope) => {
+          processFragment(frag);
+          keptAliveScopes.set(oldKey, scope);
+          return true;
+        }
+      );
+      (frag.beforeMount || (frag.beforeMount = [])).push(
+        () => cacheFragment(frag)
+      );
+      frag.getScope = (key) => {
+        const scope = keptAliveScopes.get(key);
+        if (scope) {
+          keptAliveScopes.delete(key);
+          return scope;
+        }
+      };
+    };
+    if (isVaporComponent(children)) {
+      children.shapeFlag |= 256;
+      if (isAsyncWrapper(children)) {
+        injectKeepAliveHooks(children.block);
+      }
+    } else if (isInteropFragment(children)) {
+      children.vnode.shapeFlag |= 256;
+    } else if (isDynamicFragment(children)) {
+      processFragment(children);
+      injectKeepAliveHooks(children);
+      if (isVaporComponent(children.nodes) && isAsyncWrapper(children.nodes)) {
+        injectKeepAliveHooks(children.nodes.block);
+      }
+    }
     return children;
   }
 });
+const shouldCache = (block, props, interop = false) => {
+  const isAsync = !interop && isAsyncWrapper(block);
+  const type = interop ? block.vnode.type : block.type;
+  if (isAsync && !type.__asyncResolved) {
+    return true;
+  }
+  const { include, exclude } = props;
+  const name = getComponentName(isAsync ? type.__asyncResolved : type);
+  return !(include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name));
+};
+const resetCachedShapeFlag = (cached) => {
+  if (isVaporComponent(cached)) {
+    resetShapeFlag(cached);
+  } else {
+    resetShapeFlag(cached.vnode);
+  }
+};
 function getInnerBlock(block) {
   if (isVaporComponent(block)) {
-    return block;
+    return [block, false];
   } else if (isInteropFragment(block)) {
-    return block.vnode;
+    return [block, true];
   } else if (isFragment(block)) {
     return getInnerBlock(block.nodes);
   }
+  return [void 0, false];
 }
 function isInteropFragment(block) {
   return !!(isFragment(block) && block.vnode);
 }
-function findInteropFragment(block) {
-  if (isInteropFragment(block)) {
-    return block;
-  }
-  if (isFragment(block)) {
-    return findInteropFragment(block.nodes);
-  }
-}
 function getInstanceFromCache(cached) {
   if (isVaporComponent(cached)) {
     return cached;
@@ -1732,9 +1108,18 @@ function findParentKeepAlive(instance) {
   return null;
 }
 
+let parentSuspense = null;
+function setParentSuspense(suspense) {
+  try {
+    return parentSuspense;
+  } finally {
+    parentSuspense = suspense;
+  }
+}
+
 const interopKey = Symbol(`interop`);
 const vaporInteropImpl = {
-  mount(vnode, container, anchor, parentComponent) {
+  mount(vnode, container, anchor, parentComponent, parentSuspense) {
     let selfAnchor = vnode.el = vnode.anchor = createTextNode();
     if (isHydrating) {
       queuePostFlushCb(() => container.insertBefore(selfAnchor, anchor));
@@ -1751,6 +1136,10 @@ const vaporInteropImpl = {
     }
     const propsRef = shallowRef(props);
     const slotsRef = shallowRef(vnode.children);
+    let prevSuspense = null;
+    if (parentSuspense) {
+      prevSuspense = setParentSuspense(parentSuspense);
+    }
     const dynamicPropSource = [
       () => propsRef.value
     ];
@@ -1777,6 +1166,9 @@ const vaporInteropImpl = {
         vnode.transition
       );
     }
+    if (parentSuspense) {
+      setParentSuspense(prevSuspense);
+    }
     mountComponent(instance, container, selfAnchor);
     simpleSetCurrentInstance(prev);
     return instance;
@@ -1792,8 +1184,11 @@ const vaporInteropImpl = {
   },
   unmount(vnode, doRemove) {
     const container = doRemove ? vnode.anchor.parentNode : void 0;
-    if (vnode.component) {
-      unmountComponent(vnode.component, container);
+    const instance = vnode.component;
+    if (instance) {
+      if (instance.block) {
+        unmountComponent(instance, container);
+      }
     } else if (vnode.vb) {
       remove(vnode.vb, container);
     }
@@ -1825,10 +1220,10 @@ const vaporInteropImpl = {
     insert(vnode.vb || vnode.component, container, anchor);
     insert(vnode.anchor, container, anchor);
   },
-  hydrate(vnode, node, container, anchor, parentComponent) {
+  hydrate(vnode, node, container, anchor, parentComponent, parentSuspense) {
     hydrateNode(
       node,
-      () => this.mount(vnode, container, anchor, parentComponent)
+      () => this.mount(vnode, container, anchor, parentComponent, parentSuspense)
     );
     return _next(node);
   },
@@ -1896,8 +1291,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
     rawProps,
     rawSlots,
     parentComponent ? parentComponent.appContext : void 0,
-    void 0,
-    parentComponent
+    void 0
   );
   vnode.vi = (instance) => {
     instance.props = shallowReactive(wrapper.props);
@@ -1932,7 +1326,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
     isMounted = true;
     frag.nodes = vnode.el;
   };
-  vnode.scopeId = currentInstance && currentInstance.type.__scopeId || null;
+  vnode.scopeId = getCurrentScopeId() || null;
   vnode.slotScopeIds = currentSlotScopeIds;
   frag.insert = (parentNode, anchor, transition) => {
     if (isHydrating) return;
@@ -1976,6 +1370,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
       simpleSetCurrentInstance(prev);
     }
     frag.nodes = vnode.el;
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
   };
   frag.remove = unmount;
   frag.setRef = (instance, ref, refFor, refKey) => {
@@ -2017,6 +1412,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
         internals.um(oldVNode, parentComponent, null);
       }
     };
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
   };
   const render = (parentNode, anchor) => {
     renderEffect(() => {
@@ -2342,129 +1738,819 @@ function hasAttrFromRawProps(rawProps, key) {
         return true;
       }
     }
-  }
-  return hasOwn(rawProps, key);
-}
-function getKeysFromRawProps(rawProps) {
-  const keys = [];
-  for (const key in rawProps) {
-    if (key !== "$") keys.push(key);
-  }
-  const dynamicSources = rawProps.$;
-  if (dynamicSources) {
-    let i = dynamicSources.length;
-    let source;
-    while (i--) {
-      source = resolveSource(dynamicSources[i]);
-      for (const key in source) {
-        keys.push(key);
+  }
+  return hasOwn(rawProps, key);
+}
+function getKeysFromRawProps(rawProps) {
+  const keys = [];
+  for (const key in rawProps) {
+    if (key !== "$") keys.push(key);
+  }
+  const dynamicSources = rawProps.$;
+  if (dynamicSources) {
+    let i = dynamicSources.length;
+    let source;
+    while (i--) {
+      source = resolveSource(dynamicSources[i]);
+      for (const key in source) {
+        keys.push(key);
+      }
+    }
+  }
+  return Array.from(new Set(keys));
+}
+function normalizePropsOptions(comp) {
+  const cached = comp.__propsOptions;
+  if (cached) return cached;
+  const raw = comp.props;
+  if (!raw) return EMPTY_ARR;
+  const normalized = {};
+  const needCastKeys = [];
+  baseNormalizePropsOptions(raw, normalized, needCastKeys);
+  return comp.__propsOptions = [normalized, needCastKeys];
+}
+function resolveDefault(factory, instance) {
+  const prev = setCurrentInstance(instance);
+  const res = factory.call(null, instance.props);
+  setCurrentInstance(...prev);
+  return res;
+}
+function hasFallthroughAttrs(comp, rawProps) {
+  if (rawProps) {
+    if (rawProps.$ || !comp.props) {
+      return true;
+    } else {
+      const propsOptions = normalizePropsOptions(comp)[0];
+      for (const key in rawProps) {
+        if (!hasOwn(propsOptions, camelize(key))) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+function setupPropsValidation(instance) {
+  const rawProps = instance.rawProps;
+  if (!rawProps) return;
+  renderEffect(
+    () => {
+      pushWarningContext(instance);
+      validateProps(
+        resolveDynamicProps(rawProps),
+        instance.props,
+        normalizePropsOptions(instance.type)[0]
+      );
+      popWarningContext();
+    },
+    true
+    /* noLifecycle */
+  );
+}
+function resolveDynamicProps(props) {
+  const mergedRawProps = {};
+  for (const key in props) {
+    if (key !== "$") {
+      mergedRawProps[key] = resolveSource(props[key]);
+    }
+  }
+  if (props.$) {
+    for (const source of props.$) {
+      const isDynamic = isFunction(source);
+      const resolved = isDynamic ? source() : source;
+      for (const key in resolved) {
+        const value = isDynamic ? resolved[key] : resolved[key]();
+        if (key === "class" || key === "style") {
+          const existing = mergedRawProps[key];
+          if (isArray(existing)) {
+            existing.push(value);
+          } else {
+            mergedRawProps[key] = [existing, value];
+          }
+        } else {
+          mergedRawProps[key] = value;
+        }
+      }
+    }
+  }
+  return mergedRawProps;
+}
+function propsSetDevTrap(_, key) {
+  warn(
+    `Attempt to mutate prop ${JSON.stringify(key)} failed. Props are readonly.`
+  );
+  return true;
+}
+function propsDeleteDevTrap(_, key) {
+  warn(
+    `Attempt to delete prop ${JSON.stringify(key)} failed. Props are readonly.`
+  );
+  return true;
+}
+const rawPropsProxyHandlers = {
+  get: getAttrFromRawProps,
+  has: hasAttrFromRawProps,
+  ownKeys: getKeysFromRawProps,
+  getOwnPropertyDescriptor(target, key) {
+    if (hasAttrFromRawProps(target, key)) {
+      return {
+        configurable: true,
+        enumerable: true,
+        get: () => getAttrFromRawProps(target, key)
+      };
+    }
+  }
+};
+
+let inOnceSlot = false;
+let currentSlotScopeIds = null;
+function setCurrentSlotScopeIds(scopeIds) {
+  try {
+    return currentSlotScopeIds;
+  } finally {
+    currentSlotScopeIds = scopeIds;
+  }
+}
+const dynamicSlotsProxyHandlers = {
+  get: getSlot,
+  has: (target, key) => !!getSlot(target, key),
+  getOwnPropertyDescriptor(target, key) {
+    const slot = getSlot(target, key);
+    if (slot) {
+      return {
+        configurable: true,
+        enumerable: true,
+        value: slot
+      };
+    }
+  },
+  ownKeys(target) {
+    let keys = Object.keys(target);
+    const dynamicSources = target.$;
+    if (dynamicSources) {
+      keys = keys.filter((k) => k !== "$");
+      for (const source of dynamicSources) {
+        if (isFunction(source)) {
+          const slot = source();
+          if (isArray(slot)) {
+            for (const s of slot) keys.push(String(s.name));
+          } else {
+            keys.push(String(slot.name));
+          }
+        } else {
+          keys.push(...Object.keys(source));
+        }
+      }
+    }
+    return keys;
+  },
+  set: NO,
+  deleteProperty: NO
+};
+function getSlot(target, key) {
+  if (key === "$") return;
+  const dynamicSources = target.$;
+  if (dynamicSources) {
+    let i = dynamicSources.length;
+    let source;
+    while (i--) {
+      source = dynamicSources[i];
+      if (isFunction(source)) {
+        const slot = source();
+        if (slot) {
+          if (isArray(slot)) {
+            for (const s of slot) {
+              if (String(s.name) === key) return s.fn;
+            }
+          } else if (String(slot.name) === key) {
+            return slot.fn;
+          }
+        }
+      } else if (hasOwn(source, key)) {
+        return source[key];
+      }
+    }
+  }
+  if (hasOwn(target, key)) {
+    return target[key];
+  }
+}
+let currentSlotOwner = null;
+function setCurrentSlotOwner(owner) {
+  try {
+    return currentSlotOwner;
+  } finally {
+    currentSlotOwner = owner;
+  }
+}
+function getScopeOwner() {
+  return currentSlotOwner || currentInstance;
+}
+function withVaporCtx(fn) {
+  const owner = currentInstance;
+  return (...args) => {
+    const prevOwner = setCurrentSlotOwner(owner);
+    try {
+      return fn(...args);
+    } finally {
+      setCurrentSlotOwner(prevOwner);
+    }
+  };
+}
+function createSlot(name, rawProps, fallback, noSlotted, once) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  const instance = getScopeOwner();
+  const rawSlots = instance.rawSlots;
+  const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
+  let fragment;
+  if (isRef(rawSlots._)) {
+    if (isHydrating) locateHydrationNode();
+    fragment = instance.appContext.vapor.vdomSlot(
+      rawSlots._,
+      name,
+      slotProps,
+      instance,
+      fallback
+    );
+  } else {
+    fragment = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
+    const isDynamicName = isFunction(name);
+    const slotScopeIds = [];
+    if (!noSlotted) {
+      const scopeId = instance.type.__scopeId;
+      if (scopeId) {
+        slotScopeIds.push(`${scopeId}-s`);
+      }
+    }
+    const renderSlot = () => {
+      const slotName = isFunction(name) ? name() : name;
+      if (instance.ce || instance.parent && isAsyncWrapper(instance.parent) && instance.parent.ce) {
+        const el = createElement("slot");
+        renderEffect(() => {
+          setDynamicProps(el, [
+            slotProps,
+            slotName !== "default" ? { name: slotName } : {}
+          ]);
+        });
+        if (fallback) insert(fallback(), el);
+        fragment.nodes = el;
+        return;
+      }
+      const slot = getSlot(rawSlots, slotName);
+      if (slot) {
+        fragment.fallback = fallback;
+        fragment.update(
+          slot._bound || (slot._bound = () => {
+            const prevSlotScopeIds = setCurrentSlotScopeIds(
+              slotScopeIds.length > 0 ? slotScopeIds : null
+            );
+            const prev = inOnceSlot;
+            try {
+              if (once) inOnceSlot = true;
+              return slot(slotProps);
+            } finally {
+              inOnceSlot = prev;
+              setCurrentSlotScopeIds(prevSlotScopeIds);
+            }
+          })
+        );
+      } else {
+        fragment.update(fallback);
+      }
+    };
+    if (!once && (isDynamicName || rawSlots.$)) {
+      renderEffect(renderSlot);
+    } else {
+      renderSlot();
+    }
+  }
+  if (!isHydrating) {
+    if (!noSlotted) {
+      const scopeId = instance.type.__scopeId;
+      if (scopeId) {
+        setScopeId(fragment, [`${scopeId}-s`]);
+      }
+    }
+    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
+  } else {
+    if (fragment.insert) {
+      fragment.hydrate();
+    }
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
+  }
+  return fragment;
+}
+
+class RenderEffect extends ReactiveEffect {
+  constructor(render) {
+    super();
+    this.render = render;
+    const instance = currentInstance;
+    if (!!(process.env.NODE_ENV !== "production") && true && !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 (!!(process.env.NODE_ENV !== "production") || instance.type.ce) {
+        (instance.renderEffects || (instance.renderEffects = [])).push(this);
+      }
+      job.i = instance;
+    }
+    this.job = job;
+    this.i = instance;
+  }
+  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);
+    if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
+      instance.isUpdating = true;
+      instance.bu && invokeArrayFns(instance.bu);
+      this.render();
+      queuePostFlushCb(this.updateJob);
+    } else {
+      this.render();
+    }
+    setCurrentInstance(...prev);
+    if (!!(process.env.NODE_ENV !== "production") && instance) {
+      startMeasure(instance, `renderEffect`);
+    }
+  }
+  notify() {
+    const flags = this.flags;
+    if (!(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();
+}
+
+const displayName = "VaporTransition";
+const decorate$1 = (t) => {
+  t.displayName = displayName;
+  t.props = TransitionPropsValidators;
+  t.__vapor = true;
+  return t;
+};
+const VaporTransition = /* @__PURE__ */ decorate$1(
+  (props, { slots }) => {
+    let resetDisplay;
+    if (isHydrating && currentHydrationNode && isTemplateNode(currentHydrationNode)) {
+      const {
+        content: { firstChild },
+        parentNode
+      } = currentHydrationNode;
+      if (firstChild) {
+        if (firstChild instanceof HTMLElement || firstChild instanceof SVGElement) {
+          const originalDisplay = firstChild.style.display;
+          firstChild.style.display = "none";
+          resetDisplay = () => firstChild.style.display = originalDisplay;
+        }
+        parentNode.replaceChild(firstChild, currentHydrationNode);
+        setCurrentHydrationNode(firstChild);
+      }
+    }
+    const children = slots.default && slots.default();
+    if (!children) return;
+    const instance = currentInstance;
+    const { mode } = props;
+    checkTransitionMode(mode);
+    let resolvedProps;
+    let isMounted = false;
+    renderEffect(() => {
+      resolvedProps = resolveTransitionProps(props);
+      if (isMounted) {
+        if (isFragment(children)) {
+          children.$transition.props = resolvedProps;
+        } else {
+          const child = findTransitionBlock(children);
+          if (child) {
+            child.$transition.props = resolvedProps;
+            applyTransitionHooks(child, child.$transition, true);
+          }
+        }
+      } else {
+        isMounted = true;
+      }
+    });
+    const hooks = applyTransitionHooks(children, {
+      state: useTransitionState(),
+      props: resolvedProps,
+      instance
+    });
+    if (resetDisplay && resolvedProps.appear) {
+      const child = findTransitionBlock(children);
+      hooks.beforeEnter(child);
+      resetDisplay();
+      queuePostFlushCb(() => hooks.enter(child));
+    }
+    return children;
+  }
+);
+const getTransitionHooksContext = (key, props, state, instance, postClone) => {
+  const { leavingNodes } = state;
+  const context = {
+    setLeavingNodeCache: (el) => {
+      leavingNodes.set(key, el);
+    },
+    unsetLeavingNodeCache: (el) => {
+      const leavingNode = leavingNodes.get(key);
+      if (leavingNode === el) {
+        leavingNodes.delete(key);
+      }
+    },
+    earlyRemove: () => {
+      const leavingNode = leavingNodes.get(key);
+      if (leavingNode && leavingNode[leaveCbKey]) {
+        leavingNode[leaveCbKey]();
+      }
+    },
+    cloneHooks: (block) => {
+      const hooks = resolveTransitionHooks(
+        block,
+        props,
+        state,
+        instance,
+        postClone
+      );
+      if (postClone) postClone(hooks);
+      return hooks;
+    }
+  };
+  return context;
+};
+function resolveTransitionHooks(block, props, state, instance, postClone) {
+  const context = getTransitionHooksContext(
+    String(block.$key),
+    props,
+    state,
+    instance,
+    postClone
+  );
+  const hooks = baseResolveTransitionHooks(
+    context,
+    props,
+    state,
+    instance
+  );
+  hooks.state = state;
+  hooks.props = props;
+  hooks.instance = instance;
+  return hooks;
+}
+function applyTransitionHooks(block, hooks, isResolved = false) {
+  if (isArray(block)) {
+    block = block.filter((b) => !(b instanceof Comment));
+    if (block.length === 1) {
+      block = block[0];
+    } else if (block.length === 0) {
+      return hooks;
+    }
+  }
+  const isFrag = isFragment(block);
+  const child = isResolved ? block : findTransitionBlock(block, isFrag);
+  if (!child) {
+    if (isFrag) setTransitionHooksOnFragment(block, hooks);
+    return hooks;
+  }
+  const { props, instance, state, delayedLeave } = hooks;
+  let resolvedHooks = resolveTransitionHooks(
+    child,
+    props,
+    state,
+    instance,
+    (hooks2) => resolvedHooks = hooks2
+  );
+  resolvedHooks.delayedLeave = delayedLeave;
+  child.$transition = resolvedHooks;
+  if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks);
+  return resolvedHooks;
+}
+function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
+  const leavingBlock = findTransitionBlock(block);
+  if (!leavingBlock) return void 0;
+  const { props, state, instance } = enterHooks;
+  const leavingHooks = resolveTransitionHooks(
+    leavingBlock,
+    props,
+    state,
+    instance
+  );
+  leavingBlock.$transition = leavingHooks;
+  const { mode } = props;
+  if (mode === "out-in") {
+    state.isLeaving = true;
+    leavingHooks.afterLeave = () => {
+      state.isLeaving = false;
+      afterLeaveCb();
+      leavingBlock.$transition = void 0;
+      delete leavingHooks.afterLeave;
+    };
+  } else if (mode === "in-out") {
+    leavingHooks.delayLeave = (block2, earlyRemove, delayedLeave) => {
+      state.leavingNodes.set(String(leavingBlock.$key), leavingBlock);
+      block2[leaveCbKey] = () => {
+        earlyRemove();
+        block2[leaveCbKey] = void 0;
+        leavingBlock.$transition = void 0;
+        delete enterHooks.delayedLeave;
+      };
+      enterHooks.delayedLeave = () => {
+        delayedLeave();
+        leavingBlock.$transition = void 0;
+        delete enterHooks.delayedLeave;
+      };
+    };
+  }
+}
+function findTransitionBlock(block, inFragment = false) {
+  let child;
+  if (block instanceof Node) {
+    if (block instanceof Element) child = block;
+  } else if (isVaporComponent(block)) {
+    if (isAsyncWrapper(block) && !block.type.__asyncResolved) {
+      child = block;
+    } else {
+      if (getComponentName(block.type) === displayName) return void 0;
+      child = findTransitionBlock(block.block, inFragment);
+      if (child && child.$key === void 0) child.$key = block.uid;
+    }
+  } else if (isArray(block)) {
+    let hasFound = false;
+    for (const c of block) {
+      if (c instanceof Comment) continue;
+      if (isFragment(c)) inFragment = true;
+      const item = findTransitionBlock(c, inFragment);
+      if (!!(process.env.NODE_ENV !== "production") && hasFound) {
+        warn(
+          "<transition> can only be used on a single element or component. Use <transition-group> for lists."
+        );
+        break;
+      }
+      child = item;
+      hasFound = true;
+      if (!!!(process.env.NODE_ENV !== "production")) break;
+    }
+  } else if (isFragment(block)) {
+    inFragment = true;
+    if (block.insert) {
+      child = block;
+    } else {
+      child = findTransitionBlock(block.nodes, true);
+    }
+  }
+  if (!!(process.env.NODE_ENV !== "production") && !child && !inFragment) {
+    warn("Transition component has no valid child element");
+  }
+  return child;
+}
+function setTransitionHooksOnFragment(block, hooks) {
+  if (isFragment(block)) {
+    block.$transition = hooks;
+    if (block.nodes && isFragment(block.nodes)) {
+      setTransitionHooksOnFragment(block.nodes, hooks);
+    }
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      setTransitionHooksOnFragment(block[i], hooks);
+    }
+  }
+}
+function setTransitionHooks(block, hooks) {
+  if (isVaporComponent(block)) {
+    block = findTransitionBlock(block.block);
+    if (!block) return;
+  }
+  block.$transition = hooks;
+}
+
+class VaporFragment {
+  constructor(nodes) {
+    this.vnode = null;
+    this.nodes = nodes;
+  }
+}
+class ForFragment extends VaporFragment {
+  constructor(nodes) {
+    super(nodes);
+  }
+}
+class DynamicFragment extends VaporFragment {
+  constructor(anchorLabel) {
+    super([]);
+    this.hydrate = (isEmpty = false) => {
+      if (this.anchor) return;
+      if (this.anchorLabel === "if") {
+        if (isEmpty) {
+          this.anchor = locateFragmentEndAnchor("");
+          if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
+            throw new Error(
+              "Failed to locate if anchor. this is likely a Vue internal bug."
+            );
+          } else {
+            if (!!(process.env.NODE_ENV !== "production")) {
+              this.anchor.data = this.anchorLabel;
+            }
+            return;
+          }
+        }
+      } else if (this.anchorLabel === "slot") {
+        if (isEmpty && isComment(currentHydrationNode, "")) {
+          this.anchor = currentHydrationNode;
+          if (!!(process.env.NODE_ENV !== "production")) {
+            this.anchor.data = this.anchorLabel;
+          }
+          return;
+        }
+        this.anchor = locateFragmentEndAnchor();
+        if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
+          throw new Error(
+            "Failed to locate slot anchor. this is likely a Vue internal bug."
+          );
+        } else {
+          return;
+        }
+      }
+      const { parentNode, nextNode } = findBlockNode(this.nodes);
+      queuePostFlushCb(() => {
+        parentNode.insertBefore(
+          this.anchor = !!(process.env.NODE_ENV !== "production") ? createComment(this.anchorLabel) : createTextNode(),
+          nextNode
+        );
+      });
+    };
+    if (isHydrating) {
+      this.anchorLabel = anchorLabel;
+      locateHydrationNode();
+    } else {
+      this.anchor = !!(process.env.NODE_ENV !== "production") && anchorLabel ? createComment(anchorLabel) : createTextNode();
+      if (!!(process.env.NODE_ENV !== "production")) this.anchorLabel = anchorLabel;
+    }
+  }
+  update(render, key = render) {
+    if (key === this.current) {
+      if (isHydrating) this.hydrate(true);
+      return;
+    }
+    this.current = key;
+    const instance = currentInstance;
+    const prevSub = setActiveSub();
+    const parent = isHydrating ? null : this.anchor.parentNode;
+    const transition = this.$transition;
+    if (this.scope) {
+      let preserveScope = false;
+      if (this.beforeTeardown) {
+        preserveScope = this.beforeTeardown.some(
+          (hook) => hook(this.current, this.nodes, this.scope)
+        );
+      }
+      if (!preserveScope) {
+        this.scope.stop();
+      }
+      const mode = transition && transition.mode;
+      if (mode) {
+        applyTransitionLeaveHooks(
+          this.nodes,
+          transition,
+          () => this.render(render, transition, parent, instance)
+        );
+        parent && remove(this.nodes, parent);
+        if (mode === "out-in") {
+          setActiveSub(prevSub);
+          return;
+        }
+      } else {
+        parent && remove(this.nodes, parent);
+      }
+    }
+    this.render(render, transition, parent, instance);
+    if (this.fallback) {
+      const hasNestedFragment = isFragment(this.nodes);
+      if (hasNestedFragment) {
+        setFragmentFallback(this.nodes, this.fallback);
+      }
+      const invalidFragment = findInvalidFragment(this);
+      if (invalidFragment) {
+        parent && remove(this.nodes, parent);
+        const scope = this.scope || (this.scope = new EffectScope());
+        scope.run(() => {
+          if (hasNestedFragment) {
+            renderFragmentFallback(invalidFragment);
+          } else {
+            this.nodes = this.fallback() || [];
+          }
+        });
+        parent && insert(this.nodes, parent, this.anchor);
       }
     }
+    setActiveSub(prevSub);
+    if (isHydrating) this.hydrate();
   }
-  return Array.from(new Set(keys));
-}
-function normalizePropsOptions(comp) {
-  const cached = comp.__propsOptions;
-  if (cached) return cached;
-  const raw = comp.props;
-  if (!raw) return EMPTY_ARR;
-  const normalized = {};
-  const needCastKeys = [];
-  baseNormalizePropsOptions(raw, normalized, needCastKeys);
-  return comp.__propsOptions = [normalized, needCastKeys];
-}
-function resolveDefault(factory, instance) {
-  const prev = setCurrentInstance(instance);
-  const res = factory.call(null, instance.props);
-  setCurrentInstance(...prev);
-  return res;
-}
-function hasFallthroughAttrs(comp, rawProps) {
-  if (rawProps) {
-    if (rawProps.$ || !comp.props) {
-      return true;
-    } else {
-      const propsOptions = normalizePropsOptions(comp)[0];
-      for (const key in rawProps) {
-        if (!hasOwn(propsOptions, camelize(key))) {
-          return true;
+  render(render, transition, parent, instance) {
+    if (render) {
+      const scope = this.getScope && this.getScope(this.current);
+      if (scope) {
+        this.scope = scope;
+      } else {
+        this.scope = new EffectScope();
+      }
+      let prev;
+      if (parent && instance) prev = setCurrentInstance(instance);
+      this.nodes = this.scope.run(render) || [];
+      if (parent && instance) setCurrentInstance(...prev);
+      if (transition) {
+        this.$transition = applyTransitionHooks(this.nodes, transition);
+      }
+      if (this.beforeMount) {
+        this.beforeMount.forEach(
+          (hook) => hook(this.current, this.nodes, this.scope)
+        );
+      }
+      if (parent) {
+        if (this.attrs) {
+          if (this.nodes instanceof Element) {
+            renderEffect(
+              () => applyFallthroughProps(this.nodes, this.attrs)
+            );
+          } else if (!!(process.env.NODE_ENV !== "production") && // preventing attrs fallthrough on slots
+          // consistent with VDOM slots behavior
+          (this.anchorLabel === "slot" || isArray(this.nodes) && this.nodes.length)) {
+            warnExtraneousAttributes(this.attrs);
+          }
+        }
+        insert(this.nodes, parent, this.anchor);
+        if (this.updated) {
+          this.updated.forEach((hook) => hook(this.nodes));
         }
       }
+    } else {
+      this.scope = void 0;
+      this.nodes = [];
     }
   }
-  return false;
-}
-function setupPropsValidation(instance) {
-  const rawProps = instance.rawProps;
-  if (!rawProps) return;
-  renderEffect(
-    () => {
-      pushWarningContext(instance);
-      validateProps(
-        resolveDynamicProps(rawProps),
-        instance.props,
-        normalizePropsOptions(instance.type)[0]
-      );
-      popWarningContext();
-    },
-    true
-    /* noLifecycle */
-  );
 }
-function resolveDynamicProps(props) {
-  const mergedRawProps = {};
-  for (const key in props) {
-    if (key !== "$") {
-      mergedRawProps[key] = resolveSource(props[key]);
-    }
-  }
-  if (props.$) {
-    for (const source of props.$) {
-      const isDynamic = isFunction(source);
-      const resolved = isDynamic ? source() : source;
-      for (const key in resolved) {
-        const value = isDynamic ? resolved[key] : resolved[key]();
-        if (key === "class" || key === "style") {
-          const existing = mergedRawProps[key];
-          if (isArray(existing)) {
-            existing.push(value);
-          } else {
-            mergedRawProps[key] = [existing, value];
-          }
-        } else {
-          mergedRawProps[key] = value;
-        }
+function setFragmentFallback(fragment, fallback) {
+  if (fragment.fallback) {
+    const originalFallback = fragment.fallback;
+    fragment.fallback = () => {
+      const fallbackNodes = originalFallback();
+      if (isValidBlock(fallbackNodes)) {
+        return fallbackNodes;
       }
-    }
+      return fallback();
+    };
+  } else {
+    fragment.fallback = fallback;
+  }
+  if (isFragment(fragment.nodes)) {
+    setFragmentFallback(fragment.nodes, fragment.fallback);
   }
-  return mergedRawProps;
 }
-function propsSetDevTrap(_, key) {
-  warn(
-    `Attempt to mutate prop ${JSON.stringify(key)} failed. Props are readonly.`
-  );
-  return true;
+function renderFragmentFallback(fragment) {
+  if (fragment instanceof ForFragment) {
+    fragment.nodes[0] = [fragment.fallback() || []];
+  } else if (fragment instanceof DynamicFragment) {
+    fragment.update(fragment.fallback);
+  } else ;
 }
-function propsDeleteDevTrap(_, key) {
-  warn(
-    `Attempt to delete prop ${JSON.stringify(key)} failed. Props are readonly.`
-  );
-  return true;
+function findInvalidFragment(fragment) {
+  if (isValidBlock(fragment.nodes)) return null;
+  return isFragment(fragment.nodes) ? findInvalidFragment(fragment.nodes) || fragment : fragment;
+}
+function isFragment(val) {
+  return val instanceof VaporFragment;
+}
+function isDynamicFragment(val) {
+  return val instanceof DynamicFragment;
 }
-const rawPropsProxyHandlers = {
-  get: getAttrFromRawProps,
-  has: hasAttrFromRawProps,
-  ownKeys: getKeysFromRawProps,
-  getOwnPropertyDescriptor(target, key) {
-    if (hasAttrFromRawProps(target, key)) {
-      return {
-        configurable: true,
-        enumerable: true,
-        get: () => getAttrFromRawProps(target, key)
-      };
-    }
-  }
-};
 
 const VaporTeleportImpl = {
   name: "VaporTeleport",
@@ -2537,7 +2623,7 @@ class TeleportFragment extends VaporFragment {
             setCurrentHydrationNode(targetNode.nextSibling);
           }
           if (!this.targetAnchor) {
-            this.mount(target);
+            this.mountChildren(target);
           } else {
             this.initChildren();
           }
@@ -2559,6 +2645,7 @@ class TeleportFragment extends VaporFragment {
           rawPropsProxyHandlers
         )
       );
+      this.isDisabled = isTeleportDisabled(this.resolvedProps);
       this.handlePropsUpdate();
     });
     if (!isHydrating) {
@@ -2574,8 +2661,21 @@ class TeleportFragment extends VaporFragment {
         this.rawSlots.default && this.rawSlots.default()
       );
     });
+    const nodes = this.nodes;
+    if (this.parentComponent && this.parentComponent.ut) {
+      if (isFragment(nodes)) {
+        (nodes.updated || (nodes.updated = [])).push(() => updateCssVars(this));
+      } else if (isArray(nodes)) {
+        nodes.forEach((node) => {
+          if (isFragment(node)) {
+            (node.updated || (node.updated = [])).push(
+              () => updateCssVars(this)
+            );
+          }
+        });
+      }
+    }
     if (!!(process.env.NODE_ENV !== "production")) {
-      const nodes = this.nodes;
       if (isVaporComponent(nodes)) {
         nodes.parentTeleport = this;
       } else if (isArray(nodes)) {
@@ -2593,53 +2693,55 @@ class TeleportFragment extends VaporFragment {
     remove(this.nodes, this.mountContainer);
     insert(this.nodes = children, this.mountContainer, this.mountAnchor);
   }
-  handlePropsUpdate() {
-    if (!this.parent || isHydrating) return;
-    const mount = (parent, anchor) => {
-      if (this.$transition) {
-        applyTransitionHooks(this.nodes, this.$transition);
+  mount(parent, anchor) {
+    if (this.$transition) {
+      applyTransitionHooks(this.nodes, this.$transition);
+    }
+    insert(
+      this.nodes,
+      this.mountContainer = parent,
+      this.mountAnchor = anchor
+    );
+  }
+  mountToTarget() {
+    const target = this.target = resolveTeleportTarget(
+      this.resolvedProps,
+      querySelector
+    );
+    if (target) {
+      if (
+        // initial mount into target
+        !this.targetAnchor || // target changed
+        this.targetAnchor.parentNode !== target
+      ) {
+        insert(this.targetStart = createTextNode(""), target);
+        insert(this.targetAnchor = createTextNode(""), target);
       }
-      insert(
-        this.nodes,
-        this.mountContainer = parent,
-        this.mountAnchor = anchor
-      );
-    };
-    const mountToTarget = () => {
-      const target = this.target = resolveTeleportTarget(
-        this.resolvedProps,
-        querySelector
-      );
-      if (target) {
-        if (
-          // initial mount into target
-          !this.targetAnchor || // target changed
-          this.targetAnchor.parentNode !== target
-        ) {
-          insert(this.targetStart = createTextNode(""), target);
-          insert(this.targetAnchor = createTextNode(""), target);
-        }
-        if (this.parentComponent && this.parentComponent.isCE) {
-          (this.parentComponent.ce._teleportTargets || (this.parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
-        }
-        mount(target, this.targetAnchor);
-      } else if (!!(process.env.NODE_ENV !== "production")) {
-        warn(
-          `Invalid Teleport target on ${this.targetAnchor ? "update" : "mount"}:`,
-          target,
-          `(${typeof target})`
-        );
+      if (this.parentComponent && this.parentComponent.isCE) {
+        (this.parentComponent.ce._teleportTargets || (this.parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
       }
-    };
-    if (isTeleportDisabled(this.resolvedProps)) {
-      mount(this.parent, this.anchor);
+      this.mount(target, this.targetAnchor);
+      updateCssVars(this);
+    } else if (!!(process.env.NODE_ENV !== "production")) {
+      warn(
+        `Invalid Teleport target on ${this.targetAnchor ? "update" : "mount"}:`,
+        target,
+        `(${typeof target})`
+      );
+    }
+  }
+  handlePropsUpdate() {
+    if (!this.parent || isHydrating) return;
+    if (this.isDisabled) {
+      this.mount(this.parent, this.anchor);
+      updateCssVars(this);
     } else {
       if (isTeleportDeferred(this.resolvedProps) || // force defer when the parent is not connected to the DOM,
       // typically due to an early insertion caused by setInsertionState.
       !this.parent.isConnected) {
-        queuePostFlushCb(mountToTarget);
+        queuePostFlushCb(this.mountToTarget.bind(this));
       } else {
-        mountToTarget();
+        this.mountToTarget();
       }
     }
   }
@@ -2652,7 +2754,7 @@ class TeleportFragment extends VaporFragment {
     this.targetAnchor = targetNode && targetNode.nextSibling;
     this.initChildren();
   }
-  mount(target) {
+  mountChildren(target) {
     target.appendChild(this.targetStart = createTextNode(""));
     target.appendChild(
       this.mountAnchor = this.targetAnchor = createTextNode("")
@@ -2683,6 +2785,25 @@ function locateTeleportEndAnchor(node = currentHydrationNode) {
   }
   return null;
 }
+function updateCssVars(frag) {
+  const ctx = frag.parentComponent;
+  if (ctx && ctx.ut) {
+    let node, anchor;
+    if (frag.isDisabled) {
+      node = frag.placeholder;
+      anchor = frag.anchor;
+    } else {
+      node = frag.targetStart;
+      anchor = frag.targetAnchor;
+    }
+    while (node && node !== anchor) {
+      if (node.nodeType === 1)
+        node.setAttribute("data-v-owner", String(ctx.uid));
+      node = node.nextSibling;
+    }
+    ctx.ut();
+  }
+}
 
 function isBlock(val) {
   return val instanceof Node || isArray(val) || isVaporComponent(val) || isFragment(val);
@@ -2765,11 +2886,6 @@ function remove(block, parent) {
     if (block.anchor) remove(block.anchor, parent);
     if (block.scope) {
       block.scope.stop();
-      const scopes = block.keptAliveScopes;
-      if (scopes) {
-        scopes.forEach((scope) => scope.stop());
-        scopes.clear();
-      }
     }
   }
 }
@@ -2881,6 +2997,10 @@ function hmrRerender(instance) {
   insert(instance.block, parent, anchor);
 }
 function hmrReload(instance, newComp) {
+  if (instance.parent && isKeepAlive(instance.parent)) {
+    instance.parent.hmrRerender();
+    return;
+  }
   const normalized = normalizeBlock(instance.block);
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
@@ -2938,10 +3058,14 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
   } else {
     resetInsertionState();
   }
-  const parentInstance = getParentInstance();
-  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(parentInstance) && parentInstance.hasFallthrough) {
-    const attrs = parentInstance.attrs;
-    if (rawProps) {
+  let prevSuspense = null;
+  if (currentInstance && currentInstance.suspense) {
+    prevSuspense = setParentSuspense(currentInstance.suspense);
+  }
+  if ((isSingleRoot || // transition has attrs fallthrough
+  currentInstance && isVaporTransition(currentInstance.type)) && component.inheritAttrs !== false && isVaporComponent(currentInstance) && currentInstance.hasFallthrough) {
+    const attrs = currentInstance.attrs;
+    if (rawProps && rawProps !== EMPTY_OBJ) {
       (rawProps.$ || (rawProps.$ = [])).push(
         () => attrs
       );
@@ -2949,21 +3073,19 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
       rawProps = { $: [() => attrs] };
     }
   }
-  if (parentInstance && parentInstance.vapor && isKeepAlive(parentInstance)) {
-    const cached = parentInstance.getCachedComponent(
+  if (currentInstance && currentInstance.vapor && isKeepAlive(currentInstance)) {
+    const cached = currentInstance.getCachedComponent(
       component
     );
     if (cached) return cached;
   }
   if (appContext.vapor && !component.__vapor) {
-    const prevSlotConsumer2 = setCurrentSlotConsumer(null);
     const frag = appContext.vapor.vdomMount(
       component,
-      parentInstance,
+      currentInstance,
       rawProps,
       rawSlots
     );
-    setCurrentSlotConsumer(prevSlotConsumer2);
     if (!isHydrating) {
       if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
     } else {
@@ -2991,17 +3113,14 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
     rawProps,
     rawSlots,
     appContext,
-    once,
-    parentInstance
+    once
   );
-  const prevSlotConsumer = setCurrentSlotConsumer(null);
-  if (!!(process.env.NODE_ENV !== "production") && component.__hmrId) {
+  const prevSlotOwner = setCurrentSlotOwner(null);
+  if (!!(process.env.NODE_ENV !== "production")) {
     registerHMR(instance);
     instance.isSingleRoot = isSingleRoot;
     instance.hmrRerender = hmrRerender.bind(null, instance);
     instance.hmrReload = hmrReload.bind(null, instance);
-  }
-  if (!!(process.env.NODE_ENV !== "production")) {
     pushWarningContext(instance);
     startMeasure(instance, `init`);
     instance.propsOptions = normalizePropsOptions(component);
@@ -3036,7 +3155,14 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
   } else {
     setupComponent(instance, component);
   }
-  setCurrentSlotConsumer(prevSlotConsumer);
+  if (!!(process.env.NODE_ENV !== "production")) {
+    popWarningContext();
+    endMeasure(instance, "init");
+  }
+  if (currentInstance && currentInstance.suspense) {
+    setParentSuspense(prevSuspense);
+  }
+  setCurrentSlotOwner(prevSlotOwner);
   onScopeDispose$1(() => unmountComponent(instance), true);
   if (_insertionParent || isHydrating) {
     mountComponent(instance, _insertionParent, _insertionAnchor);
@@ -3047,6 +3173,7 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
   return instance;
 }
 function setupComponent(instance, component) {
+  var _a;
   const prevInstance = setCurrentInstance(instance);
   const prevSub = setActiveSub();
   if (!!(process.env.NODE_ENV !== "production")) {
@@ -3056,50 +3183,45 @@ function setupComponent(instance, component) {
   const setupResult = setupFn ? callWithErrorHandling(setupFn, instance, 0, [
     instance.props,
     instance
-  ]) || EMPTY_OBJ : EMPTY_OBJ;
-  if (!!(process.env.NODE_ENV !== "production") && !isBlock(setupResult)) {
-    if (isFunction(component)) {
-      warn(`Functional vapor component must return a block directly.`);
-      instance.block = [];
-    } else if (!component.render) {
-      warn(
-        `Vapor component setup() returned non-block value, and has no render function.`
-      );
-      instance.block = [];
-    } else {
-      instance.devtoolsRawSetupState = setupResult;
-      instance.setupState = proxyRefs(setupResult);
-      devRender(instance);
-    }
-  } else {
-    if (!setupFn && component.render) {
-      instance.block = callWithErrorHandling(
-        component.render,
-        instance,
-        1
-      );
-    } else {
-      instance.block = setupResult;
-    }
+  ]) || EMPTY_OBJ : EMPTY_OBJ;
+  const isAsyncSetup = isPromise(setupResult);
+  if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) {
+    markAsyncBoundary(instance);
   }
-  if (instance.hasFallthrough && component.inheritAttrs !== false && Object.keys(instance.attrs).length) {
-    renderEffect(() => applyFallthroughProps(instance.block, instance.attrs));
+  if (isAsyncSetup) {
+    {
+      instance.asyncDep = setupResult;
+      if (!!(process.env.NODE_ENV !== "production") && !instance.suspense) {
+        const name = (_a = getComponentName(component)) != null ? _a : "Anonymous";
+        warn(
+          `Component <${name}>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered.`
+        );
+      }
+    }
+  } else {
+    handleSetupResult(setupResult, component, instance, setupFn);
   }
   setActiveSub(prevSub);
   setCurrentInstance(...prevInstance);
-  if (!!(process.env.NODE_ENV !== "production")) {
-    popWarningContext();
-    endMeasure(instance, "init");
-  }
 }
 let isApplyingFallthroughProps = false;
-function applyFallthroughProps(block, attrs) {
-  const el = getRootElement(block);
-  if (el) {
-    isApplyingFallthroughProps = true;
-    setDynamicProps(el, [attrs]);
-    isApplyingFallthroughProps = false;
-  }
+function applyFallthroughProps(el, attrs) {
+  isApplyingFallthroughProps = true;
+  setDynamicProps(el, [attrs]);
+  isApplyingFallthroughProps = false;
+}
+function createDevSetupStateProxy(instance) {
+  const { setupState } = instance;
+  return new Proxy(setupState, {
+    get(target, key, receiver) {
+      if (isString(key) && !key.startsWith("__v") && !hasOwn(toRaw(setupState), key)) {
+        warn(
+          `Property ${JSON.stringify(key)} was accessed during render but is not defined on instance.`
+        );
+      }
+      return Reflect.get(target, key, receiver);
+    }
+  });
 }
 function devRender(instance) {
   instance.block = (instance.type.render ? callWithErrorHandling(
@@ -3134,17 +3256,24 @@ const emptyContext = {
   provides: /* @__PURE__ */ Object.create(null)
 };
 class VaporComponentInstance {
-  constructor(comp, rawProps, rawSlots, appContext, once, parent = currentInstance) {
+  constructor(comp, rawProps, rawSlots, appContext, once) {
+    /**
+     * dev only flag to track whether $attrs was used during render.
+     * If $attrs was used during render then the warning for failed attrs
+     * fallthrough can be suppressed.
+     */
+    this.accessedAttrs = false;
     this.vapor = true;
     this.uid = nextUid();
     this.type = comp;
-    this.parent = parent;
-    this.root = parent ? parent.root : this;
-    if (parent) {
-      this.appContext = parent.appContext;
-      this.provides = parent.provides;
-      this.ids = parent.ids;
+    this.parent = currentInstance;
+    if (currentInstance) {
+      this.root = currentInstance.root;
+      this.appContext = currentInstance.appContext;
+      this.provides = currentInstance.provides;
+      this.ids = currentInstance.ids;
     } else {
+      this.root = this;
       this.appContext = appContext || emptyContext;
       this.provides = Object.create(this.appContext.provides);
       this.ids = ["", 0, 0];
@@ -3154,7 +3283,11 @@ class VaporComponentInstance {
     this.emit = emit.bind(null, this);
     this.expose = expose.bind(null, this);
     this.refs = EMPTY_OBJ;
-    this.emitted = this.exposed = this.exposeProxy = this.propsDefaults = this.suspense = null;
+    this.emitted = this.exposed = this.exposeProxy = this.propsDefaults = null;
+    this.suspense = parentSuspense;
+    this.suspenseId = parentSuspense ? parentSuspense.pendingId : 0;
+    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);
@@ -3167,10 +3300,24 @@ class VaporComponentInstance {
     }
     this.rawSlots = rawSlots || EMPTY_OBJ;
     this.slots = rawSlots ? rawSlots.$ ? new Proxy(rawSlots, dynamicSlotsProxyHandlers) : rawSlots : EMPTY_OBJ;
-    this.scopeId = currentInstance && currentInstance.type.__scopeId;
+    this.scopeId = getCurrentScopeId();
     if (comp.ce) {
       comp.ce(this);
     }
+    if (!!(process.env.NODE_ENV !== "production")) {
+      if (this.props === this.attrs) {
+        this.accessedAttrs = true;
+      } else {
+        const attrs = this.attrs;
+        const instance = this;
+        this.attrs = new Proxy(attrs, {
+          get(target, key, receiver) {
+            instance.accessedAttrs = true;
+            return Reflect.get(target, key, receiver);
+          }
+        });
+      }
+    }
   }
   /**
    * Expose `getKeysFromRawProps` on the instance so it can be used in code
@@ -3208,7 +3355,7 @@ function createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once) {
   const el = isHydrating ? adoptTemplate(currentHydrationNode, `<${comp}/>`) : createElement(comp);
   el.$root = isSingleRoot;
   if (!isHydrating) {
-    const scopeId = currentInstance.type.__scopeId;
+    const scopeId = getCurrentScopeId();
     if (scopeId) setScopeId(el, [scopeId]);
   }
   if (rawProps) {
@@ -3246,6 +3393,19 @@ function createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once) {
   return el;
 }
 function mountComponent(instance, parent, anchor) {
+  if (instance.suspense && instance.asyncDep && !instance.asyncResolved) {
+    const component = instance.type;
+    instance.suspense.registerDep(instance, (setupResult) => {
+      handleSetupResult(
+        setupResult,
+        component,
+        instance,
+        isFunction(component) ? component : component.setup
+      );
+      mountComponent(instance, parent, anchor);
+    });
+    return;
+  }
   if (instance.shapeFlag & 512) {
     findParentKeepAlive(instance).activate(instance, parent, anchor);
     return;
@@ -3301,16 +3461,102 @@ function getExposed(instance) {
     }));
   }
 }
-function getRootElement(block) {
+function getRootElement(block, onDynamicFragment, recurse = true) {
   if (block instanceof Element) {
     return block;
   }
-  if (block instanceof DynamicFragment) {
+  if (recurse && isVaporComponent(block)) {
+    return getRootElement(block.block, onDynamicFragment, recurse);
+  }
+  if (isFragment(block) && !(block instanceof TeleportFragment)) {
+    if (block instanceof DynamicFragment && onDynamicFragment) {
+      onDynamicFragment(block);
+    }
     const { nodes } = block;
     if (nodes instanceof Element && nodes.$root) {
       return nodes;
     }
+    return getRootElement(nodes, onDynamicFragment, recurse);
+  }
+  if (isArray(block)) {
+    let singleRoot;
+    let hasComment = false;
+    for (const b of block) {
+      if (b instanceof Comment) {
+        hasComment = true;
+        continue;
+      }
+      const thisRoot = getRootElement(b, onDynamicFragment, recurse);
+      if (!thisRoot || singleRoot) {
+        return;
+      }
+      singleRoot = thisRoot;
+    }
+    return hasComment ? singleRoot : void 0;
+  }
+}
+function isVaporTransition(component) {
+  return getComponentName(component) === "VaporTransition";
+}
+function handleSetupResult(setupResult, component, instance, setupFn) {
+  if (!!(process.env.NODE_ENV !== "production")) {
+    pushWarningContext(instance);
+  }
+  if (!!(process.env.NODE_ENV !== "production") && !isBlock(setupResult)) {
+    if (isFunction(component)) {
+      warn(`Functional vapor component must return a block directly.`);
+      instance.block = [];
+    } else if (!component.render) {
+      warn(
+        `Vapor component setup() returned non-block value, and has no render function.`
+      );
+      instance.block = [];
+    } else {
+      if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
+        instance.devtoolsRawSetupState = setupResult;
+      }
+      instance.setupState = proxyRefs(setupResult);
+      if (!!(process.env.NODE_ENV !== "production")) {
+        instance.setupState = createDevSetupStateProxy(instance);
+      }
+      devRender(instance);
+    }
+  } else {
+    if (!setupFn && component.render) {
+      instance.block = callWithErrorHandling(
+        component.render,
+        instance,
+        1
+      );
+    } else {
+      instance.block = setupResult;
+    }
+  }
+  if (instance.hasFallthrough && component.inheritAttrs !== false && Object.keys(instance.attrs).length) {
+    const root = getRootElement(
+      instance.block,
+      // attach attrs to root dynamic fragments for applying during each update
+      (frag) => frag.attrs = instance.attrs,
+      false
+    );
+    if (root) {
+      renderEffect(() => {
+        const attrs = isFunction(component) && !isVaporTransition(component) ? getFunctionalFallthrough(instance.attrs) : instance.attrs;
+        if (attrs) applyFallthroughProps(root, attrs);
+      });
+    } else if (!!(process.env.NODE_ENV !== "production") && (!instance.accessedAttrs && isArray(instance.block) && instance.block.length || // preventing attrs fallthrough on Teleport
+    // consistent with VDOM Teleport behavior
+    instance.block instanceof TeleportFragment)) {
+      warnExtraneousAttributes(instance.attrs);
+    }
   }
+  if (!!(process.env.NODE_ENV !== "production")) {
+    popWarningContext();
+  }
+}
+function getCurrentScopeId() {
+  const scopeOwner = getScopeOwner();
+  return scopeOwner ? scopeOwner.type.__scopeId : void 0;
 }
 
 let _createApp;
@@ -3500,21 +3746,19 @@ function defineVaporAsyncComponent(source) {
   });
 }
 function createInnerComp(comp, parent, frag) {
-  const { rawProps, rawSlots, isSingleRoot, appContext, $transition } = parent;
+  const { rawProps, rawSlots, appContext, $transition } = parent;
   const instance = createComponent(
     comp,
     rawProps,
     rawSlots,
-    isSingleRoot,
+    // rawProps is shared and already contains fallthrough attrs.
+    // so isSingleRoot should be undefined
+    void 0,
     void 0,
     appContext
   );
-  if (parent.parent && isKeepAlive(parent.parent)) {
-    parent.parent.cacheComponent(instance);
-    parent.parent.cacheComponent(parent);
-  }
   if ($transition) setTransitionHooks(instance, $transition);
-  frag && frag.setRef && frag.setRef(instance);
+  frag && frag.setAsyncRef && frag.setAsyncRef(instance);
   return instance;
 }
 
@@ -3652,227 +3896,62 @@ function template(html, root, ns) {
     if (html[0] !== "<") {
       return createTextNode(html);
     }
-    if (!node) {
-      t = t || document.createElement("template");
-      if (ns) {
-        const tag = ns === 1 ? "svg" : "math";
-        t.innerHTML = `<${tag}>${html}</${tag}>`;
-        node = _child(_child(t.content));
-      } else {
-        t.innerHTML = html;
-        node = _child(t.content);
-      }
-    }
-    const ret = node.cloneNode(true);
-    if (root) ret.$root = true;
-    return ret;
-  };
-}
-
-function createIf(condition, b1, b2, once) {
-  const _insertionParent = insertionParent;
-  const _insertionAnchor = insertionAnchor;
-  const _isLastInsertion = isLastInsertion;
-  if (!isHydrating) resetInsertionState();
-  let frag;
-  if (once) {
-    frag = condition() ? b1() : b2 ? b2() : [];
-  } else {
-    frag = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
-    renderEffect(() => frag.update(condition() ? b1 : b2));
-  }
-  if (!isHydrating) {
-    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
-  } else {
-    if (_isLastInsertion) {
-      advanceHydrationNode(_insertionParent);
-    }
-  }
-  return frag;
-}
-
-function createKeyedFragment(key, render) {
-  const _insertionParent = insertionParent;
-  const _insertionAnchor = insertionAnchor;
-  const _isLastInsertion = isLastInsertion;
-  if (!isHydrating) resetInsertionState();
-  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed") : new DynamicFragment();
-  renderEffect(() => {
-    frag.update(render, key());
-  });
-  if (!isHydrating) {
-    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
-  } else {
-    if (_isLastInsertion) {
-      advanceHydrationNode(_insertionParent);
-    }
-  }
-  return frag;
-}
-
-const positionMap = /* @__PURE__ */ new WeakMap();
-const newPositionMap = /* @__PURE__ */ new WeakMap();
-const decorate = (t) => {
-  delete t.props.mode;
-  t.__vapor = true;
-  return t;
-};
-const VaporTransitionGroup = decorate({
-  name: "VaporTransitionGroup",
-  props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
-    tag: String,
-    moveClass: String
-  }),
-  setup(props, { slots }) {
-    const instance = currentInstance;
-    const state = useTransitionState();
-    const cssTransitionProps = resolveTransitionProps(props);
-    let prevChildren;
-    let children;
-    const slottedBlock = slots.default && slots.default();
-    onBeforeUpdate(() => {
-      prevChildren = [];
-      children = getTransitionBlocks(slottedBlock);
-      if (children) {
-        for (let i = 0; i < children.length; i++) {
-          const child = children[i];
-          if (isValidTransitionBlock(child)) {
-            prevChildren.push(child);
-            child.$transition.disabled = true;
-            positionMap.set(
-              child,
-              getTransitionElement(child).getBoundingClientRect()
-            );
-          }
-        }
-      }
-    });
-    onUpdated(() => {
-      if (!prevChildren.length) {
-        return;
-      }
-      const moveClass = props.moveClass || `${props.name || "v"}-move`;
-      const firstChild = getFirstConnectedChild(prevChildren);
-      if (!firstChild || !hasCSSTransform(
-        firstChild,
-        firstChild.parentNode,
-        moveClass
-      )) {
-        prevChildren = [];
-        return;
-      }
-      prevChildren.forEach(callPendingCbs);
-      prevChildren.forEach((child) => {
-        child.$transition.disabled = false;
-        recordPosition(child);
-      });
-      const movedChildren = prevChildren.filter(applyTranslation);
-      forceReflow();
-      movedChildren.forEach(
-        (c) => handleMovedChildren(
-          getTransitionElement(c),
-          moveClass
-        )
-      );
-      prevChildren = [];
-    });
-    setTransitionHooksOnFragment(slottedBlock, {
-      props: cssTransitionProps,
-      state,
-      instance,
-      group: true
-    });
-    children = getTransitionBlocks(slottedBlock);
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-      if (isValidTransitionBlock(child)) {
-        if (child.$key != null) {
-          const hooks = resolveTransitionHooks(
-            child,
-            cssTransitionProps,
-            state,
-            instance
-          );
-          hooks.group = true;
-          setTransitionHooks(child, hooks);
-        } else if (!!(process.env.NODE_ENV !== "production") && child.$key == null) {
-          warn(`<transition-group> children must be keyed`);
-        }
-      }
-    }
-    const tag = props.tag;
-    if (tag) {
-      const container = createElement(tag);
-      insert(slottedBlock, container);
-      if (instance.hasFallthrough) {
-        container.$root = true;
-        renderEffect(() => applyFallthroughProps(container, instance.attrs));
-      }
-      return container;
-    } else {
-      const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("transition-group") : new DynamicFragment();
-      renderEffect(() => frag.update(() => slottedBlock));
-      return frag;
-    }
-  }
-});
-function getTransitionBlocks(block) {
-  let children = [];
-  if (block instanceof Node) {
-    children.push(block);
-  } else if (isVaporComponent(block)) {
-    children.push(...getTransitionBlocks(block.block));
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      const b = block[i];
-      const blocks = getTransitionBlocks(b);
-      if (isForBlock(b)) blocks.forEach((block2) => block2.$key = b.key);
-      children.push(...blocks);
-    }
-  } else if (isFragment(block)) {
-    if (block.insert) {
-      children.push(block);
-    } else {
-      children.push(...getTransitionBlocks(block.nodes));
+    if (!node) {
+      t = t || document.createElement("template");
+      if (ns) {
+        const tag = ns === 1 ? "svg" : "math";
+        t.innerHTML = `<${tag}>${html}</${tag}>`;
+        node = _child(_child(t.content));
+      } else {
+        t.innerHTML = html;
+        node = _child(t.content);
+      }
     }
-  }
-  return children;
-}
-function isValidTransitionBlock(block) {
-  return !!(block instanceof Element || isFragment(block) && block.insert);
-}
-function getTransitionElement(c) {
-  return isFragment(c) ? c.nodes : c;
-}
-function recordPosition(c) {
-  newPositionMap.set(c, getTransitionElement(c).getBoundingClientRect());
+    const ret = node.cloneNode(true);
+    if (root) ret.$root = true;
+    return ret;
+  };
 }
-function applyTranslation(c) {
-  if (baseApplyTranslation(
-    positionMap.get(c),
-    newPositionMap.get(c),
-    getTransitionElement(c)
-  )) {
-    return c;
+
+function createIf(condition, b1, b2, once) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  let frag;
+  if (once) {
+    frag = condition() ? b1() : b2 ? b2() : [];
+  } else {
+    frag = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
+    renderEffect(() => frag.update(condition() ? b1 : b2));
   }
-}
-function getFirstConnectedChild(children) {
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    const el = getTransitionElement(child);
-    if (el.isConnected) return el;
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
   }
+  return frag;
 }
-function triggerTransitionGroupUpdate(transition) {
-  const { instance } = transition;
-  if (!instance.isUpdating) {
-    instance.isUpdating = true;
-    if (instance.bu) invokeArrayFns(instance.bu);
-    queuePostFlushCb(() => {
-      instance.isUpdating = false;
-      if (instance.u) invokeArrayFns(instance.u);
-    });
+
+function createKeyedFragment(key, render) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed") : new DynamicFragment();
+  renderEffect(() => {
+    frag.update(render, key());
+  });
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
   }
+  return frag;
 }
 
 class ForBlock extends VaporFragment {
@@ -3917,10 +3996,6 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     const oldLength = oldBlocks.length;
     newBlocks = new Array(newLength);
     let isFallback = false;
-    const transitionHooks = frag.$transition;
-    if (transitionHooks && transitionHooks.group) {
-      triggerTransitionGroupUpdate(transitionHooks);
-    }
     const prevSub = setActiveSub();
     if (!isMounted) {
       isMounted = true;
@@ -4136,6 +4211,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     } else {
       oldBlocks = [];
     }
+    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
     setActiveSub(prevSub);
   };
   const needKey = renderItem.length > 1;
@@ -4164,7 +4240,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
       key2
     );
     if (frag.$transition) {
-      applyTransitionHooks(block.nodes, frag.$transition, false);
+      applyTransitionHooks(block.nodes, frag.$transition);
     }
     if (parent) insert(block.nodes, parent, anchor);
     return block;
@@ -4345,6 +4421,18 @@ function isForBlock(block) {
   return block instanceof ForBlock;
 }
 
+const refCleanups = /* @__PURE__ */ new WeakMap();
+function ensureCleanup(el) {
+  let cleanupRef = refCleanups.get(el);
+  if (!cleanupRef) {
+    refCleanups.set(el, cleanupRef = { fn: NOOP });
+    onScopeDispose$1(() => {
+      cleanupRef.fn();
+      refCleanups.delete(el);
+    });
+  }
+  return cleanupRef;
+}
 function createTemplateRefSetter() {
   const instance = currentInstance;
   return (...args) => setRef(instance, ...args);
@@ -4355,12 +4443,10 @@ function setRef(instance, el, ref, oldRef, refFor = false, refKey) {
     el.setRef(instance, ref, refFor, refKey);
     return;
   }
-  const isVaporComp = isVaporComponent(el);
-  if (isVaporComp && isAsyncWrapper(el)) {
-    const i = el;
-    const frag = i.block;
-    if (!i.type.__asyncResolved) {
-      frag.setRef = (i2) => setRef(instance, i2, ref, oldRef, refFor);
+  if (isVaporComponent(el) && isAsyncWrapper(el)) {
+    const frag = el.block;
+    if (!el.type.__asyncResolved) {
+      frag.setAsyncRef = (i) => setRef(instance, i, ref, oldRef, refFor);
       return;
     }
     el = frag.nodes;
@@ -4368,11 +4454,11 @@ function setRef(instance, el, ref, oldRef, refFor = false, refKey) {
   const setupState = !!(process.env.NODE_ENV !== "production") ? instance.setupState || {} : null;
   const refValue = getRefValue(el);
   const refs = instance.refs === EMPTY_OBJ ? instance.refs = {} : instance.refs;
-  const canSetSetupRef = createCanSetSetupRefChecker(setupState);
+  const canSetSetupRef = !!(process.env.NODE_ENV !== "production") ? createCanSetSetupRefChecker(setupState) : NO;
   if (oldRef != null && oldRef !== ref) {
     if (isString(oldRef)) {
       refs[oldRef] = null;
-      if (!!(process.env.NODE_ENV !== "production") && hasOwn(setupState, oldRef)) {
+      if (!!(process.env.NODE_ENV !== "production") && canSetSetupRef(oldRef)) {
         setupState[oldRef] = null;
       }
     } else if (isRef$1(oldRef)) {
@@ -4387,7 +4473,7 @@ function setRef(instance, el, ref, oldRef, refFor = false, refKey) {
       ]);
     };
     invokeRefSetter(refValue);
-    onScopeDispose$1(() => invokeRefSetter());
+    ensureCleanup(el).fn = () => invokeRefSetter(null);
   } else {
     const _isString = isString(ref);
     const _isRef = isRef$1(ref);
@@ -4424,7 +4510,7 @@ function setRef(instance, el, ref, oldRef, refFor = false, refKey) {
         }
       };
       queuePostFlushCb(doSet, -1);
-      onScopeDispose$1(() => {
+      ensureCleanup(el).fn = () => {
         queuePostFlushCb(() => {
           if (isArray(existing)) {
             remove$1(existing, refValue);
@@ -4438,7 +4524,7 @@ function setRef(instance, el, ref, oldRef, refFor = false, refKey) {
             if (refKey) refs[refKey] = null;
           }
         });
-      });
+      };
     } else if (!!(process.env.NODE_ENV !== "production")) {
       warn("Invalid template ref type:", ref, `(${typeof ref})`);
     }
@@ -4454,6 +4540,45 @@ const getRefValue = (el) => {
   return el;
 };
 
+function useVaporCssVars(getter) {
+  const instance = currentInstance;
+  baseUseCssVars(
+    instance,
+    () => resolveParentNode(instance.block),
+    getter,
+    (vars) => setVars(instance, vars)
+  );
+}
+function resolveParentNode(block) {
+  if (block instanceof Node) {
+    return block.parentNode;
+  } else if (isArray(block)) {
+    return resolveParentNode(block[0]);
+  } else if (isVaporComponent(block)) {
+    return resolveParentNode(block.block);
+  } else {
+    return resolveParentNode(block.nodes);
+  }
+}
+function setVars(instance, vars) {
+  if (instance.ce) {
+    setVarsOnNode(instance.ce, vars);
+  } else {
+    setVarsOnBlock(instance.block, vars);
+  }
+}
+function setVarsOnBlock(block, vars) {
+  if (block instanceof Node) {
+    setVarsOnNode(block, vars);
+  } else if (isArray(block)) {
+    block.forEach((child) => setVarsOnBlock(child, vars));
+  } else if (isVaporComponent(block)) {
+    setVarsOnBlock(block.block, vars);
+  } else {
+    setVarsOnBlock(block.nodes, vars);
+  }
+}
+
 function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
@@ -4511,24 +4636,21 @@ function applyVShow(target, source) {
 }
 function setDisplay(target, value) {
   if (isVaporComponent(target)) {
-    return setDisplay(target, value);
+    return setDisplay(target.block, value);
   }
   if (isArray(target)) {
     if (target.length === 0) return;
     if (target.length === 1) return setDisplay(target[0], value);
   }
-  if (target instanceof DynamicFragment) {
-    return setDisplay(target.nodes, value);
-  }
-  if (target instanceof VaporFragment && target.insert) {
+  if (isFragment(target)) {
     return setDisplay(target.nodes, value);
   }
-  const { $transition } = target;
   if (target instanceof Element) {
     const el = target;
     if (!(vShowOriginalDisplay in el)) {
       el[vShowOriginalDisplay] = el.style.display === "none" ? "" : el.style.display;
     }
+    const { $transition } = target;
     if ($transition) {
       if (value) {
         $transition.beforeEnter(target);
@@ -4631,12 +4753,167 @@ const applyDynamicModel = (el, get, set, modifiers) => {
 };
 
 function withVaporDirectives(node, dirs) {
+  const element = isVaporComponent(node) ? getRootElement(node.block) : node;
+  if (!element) {
+    if (!!(process.env.NODE_ENV !== "production")) {
+      warn(
+        `Runtime directive used on component with non-element root node. The directives will not function as intended.`
+      );
+    }
+    return;
+  }
   for (const [dir, value, argument, modifiers] of dirs) {
     if (dir) {
-      const ret = dir(node, value, argument, modifiers);
+      const ret = dir(element, value, argument, modifiers);
       if (ret) onScopeDispose(ret);
     }
   }
 }
 
-export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockText, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, vaporInteropPlugin, withVaporCtx, withVaporDirectives };
+const positionMap = /* @__PURE__ */ new WeakMap();
+const newPositionMap = /* @__PURE__ */ new WeakMap();
+const decorate = (t) => {
+  delete t.props.mode;
+  t.__vapor = true;
+  return t;
+};
+const VaporTransitionGroup = decorate({
+  name: "VaporTransitionGroup",
+  props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
+    tag: String,
+    moveClass: String
+  }),
+  setup(props, { slots }) {
+    const instance = currentInstance;
+    const state = useTransitionState();
+    const cssTransitionProps = resolveTransitionProps(props);
+    let prevChildren;
+    let children;
+    const slottedBlock = slots.default && slots.default();
+    onBeforeUpdate(() => {
+      prevChildren = [];
+      children = getTransitionBlocks(slottedBlock);
+      if (children) {
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          if (isValidTransitionBlock(child)) {
+            prevChildren.push(child);
+            child.$transition.disabled = true;
+            positionMap.set(
+              child,
+              getTransitionElement(child).getBoundingClientRect()
+            );
+          }
+        }
+      }
+    });
+    onUpdated(() => {
+      if (!prevChildren.length) {
+        return;
+      }
+      const moveClass = props.moveClass || `${props.name || "v"}-move`;
+      const firstChild = getFirstConnectedChild(prevChildren);
+      if (!firstChild || !hasCSSTransform(
+        firstChild,
+        firstChild.parentNode,
+        moveClass
+      )) {
+        prevChildren = [];
+        return;
+      }
+      prevChildren.forEach(callPendingCbs);
+      prevChildren.forEach((child) => {
+        child.$transition.disabled = false;
+        recordPosition(child);
+      });
+      const movedChildren = prevChildren.filter(applyTranslation);
+      forceReflow();
+      movedChildren.forEach(
+        (c) => handleMovedChildren(
+          getTransitionElement(c),
+          moveClass
+        )
+      );
+      prevChildren = [];
+    });
+    setTransitionHooksOnFragment(slottedBlock, {
+      props: cssTransitionProps,
+      state,
+      instance
+    });
+    children = getTransitionBlocks(slottedBlock);
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (isValidTransitionBlock(child)) {
+        if (child.$key != null) {
+          const hooks = resolveTransitionHooks(
+            child,
+            cssTransitionProps,
+            state,
+            instance
+          );
+          setTransitionHooks(child, hooks);
+        } else if (!!(process.env.NODE_ENV !== "production")) {
+          warn(`<transition-group> children must be keyed`);
+        }
+      }
+    }
+    const tag = props.tag;
+    if (tag) {
+      const container = createElement(tag);
+      insert(slottedBlock, container);
+      return container;
+    } else {
+      return slottedBlock;
+    }
+  }
+});
+function getTransitionBlocks(block) {
+  let children = [];
+  if (block instanceof Node) {
+    children.push(block);
+  } else if (isVaporComponent(block)) {
+    children.push(...getTransitionBlocks(block.block));
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      const b = block[i];
+      const blocks = getTransitionBlocks(b);
+      if (isForBlock(b)) blocks.forEach((block2) => block2.$key = b.key);
+      children.push(...blocks);
+    }
+  } else if (isFragment(block)) {
+    if (block.insert) {
+      children.push(block);
+    } else {
+      children.push(...getTransitionBlocks(block.nodes));
+    }
+  }
+  return children;
+}
+function isValidTransitionBlock(block) {
+  return !!(block instanceof Element || isFragment(block) && block.insert);
+}
+function getTransitionElement(c) {
+  return isFragment(c) ? c.nodes : c;
+}
+function recordPosition(c) {
+  newPositionMap.set(c, getTransitionElement(c).getBoundingClientRect());
+}
+function applyTranslation(c) {
+  if (baseApplyTranslation(
+    positionMap.get(c),
+    newPositionMap.get(c),
+    getTransitionElement(c)
+  )) {
+    return c;
+  }
+}
+function getFirstConnectedChild(children) {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const el = getTransitionElement(child);
+    if (el.isConnected) return el;
+  }
+}
+
+export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockText, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, useVaporCssVars, vaporInteropPlugin, withVaporCtx, withVaporDirectives };