@vue/runtime-vapor 3.6.0-alpha.5 → 3.6.0-alpha.7

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

@@ -1,11 +1,11 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.5
+* @vue/runtime-vapor v3.6.0-alpha.7
 * (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, callWithAsyncErrorHandling, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, isRef, watch, onMounted, onUpdated, onBeforeUnmount, 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, 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, baseUseCssVars, setVarsOnNode, 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, normalizeCssVarValue, getEscapedCssVarName, 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, computed, 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,855 +336,350 @@ 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
+function setDynamicEvents(el, events) {
+  for (const name in events) {
+    on(el, name, events[name], { effect: true });
+  }
+}
+function createInvoker(handler) {
+  const i = currentInstance;
+  return (...args) => callWithAsyncErrorHandling(
+    handler,
+    i,
+    5,
+    args
   );
-  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 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);
   }
-  const isFrag = isFragment(block);
-  const child = isResolved ? block : findTransitionBlock(block, isFrag);
-  if (!child) {
-    if (isFrag) setTransitionHooksOnFragment(block, hooks);
-    return hooks;
+}
+function setAttr(el, key, value, isSVG = false) {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+    return;
   }
-  const { props, instance, state, delayedLeave, group } = hooks;
-  let resolvedHooks = resolveTransitionHooks(
-    child,
-    props,
-    state,
-    instance,
-    (hooks2) => resolvedHooks = hooks2
-  );
-  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);
+  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);
+      }
+    }
   }
-  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 setDOMProp(el, key, value, forceHydrate = false, attrName) {
+  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;
-    } 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") || __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);
-      return;
-    }
-    this.current = key;
-    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)
-        );
-        parent && remove(this.nodes, parent);
-        if (mode === "out-in") {
-          setActiveSub(prevSub);
+}
+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;
         }
-      } else {
-        parent && remove(this.nodes, parent);
-      }
-    }
-    this.render(render, 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, transition, parent) {
-    if (render) {
-      const scope = this.getScope && this.getScope(this.current);
-      if (scope) {
-        this.scope = scope;
-      } else {
-        this.scope = new EffectScope();
-      }
-      this.nodes = this.scope.run(render) || [];
-      if (transition) {
-        this.$transition = applyTransitionHooks(this.nodes, transition);
-      }
-      if (this.beforeMount) {
-        this.beforeMount.forEach(
-          (hook) => hook(this.current, this.nodes, this.scope)
-        );
-      }
-      if (parent) {
-        insert(this.nodes, parent, this.anchor);
-        if (this.anchor.isConnected && this.updated) {
-          this.updated.forEach((hook) => hook(this.nodes));
-        }
-      }
-    } else {
-      this.scope = void 0;
-      this.nodes = [];
+        patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
+      });
+      return;
+    } else if (!styleHasMismatch(el, value, normalizedValue, true)) {
+      el[cacheKey] = normalizedValue;
+      return;
     }
   }
+  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 isDynamicFragment(val) {
-  return val instanceof DynamicFragment;
-}
-
-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 setHtml(el, value) {
+  value = value == null ? "" : unsafeToTrustedHTML(value);
+  if (el.$html !== value) {
+    el.innerHTML = el.$html = value;
   }
 }
-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 shouldDeferCheckStyleMismatch(el) {
-  return !!(process.env.NODE_ENV !== "production") && (!!currentInstance.getCssVars || Object.values(el.style).some((v) => v.startsWith("--")));
-}
-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;
-          }
-          patchStyle(el, el.$sty, el.$sty = normalizedValue);
-        });
-        return;
-      } else if (!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) {
-    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;
-    }
-  }
-  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 setBlockHtml(block, value) {
-  value = value == null ? "" : unsafeToTrustedHTML(value);
-  if (block.$html !== value) {
-    setHtmlToBlock(block, block.$html = value);
+function setBlockHtml(block, value) {
+  value = value == null ? "" : unsafeToTrustedHTML(value);
+  if (block.$html !== value) {
+    setHtmlToBlock(block, block.$html = value);
   }
 }
 function setHtmlToBlock(block, value) {
@@ -1352,208 +847,26 @@ 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
-      };
-    }
-  },
-  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]
+
+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) {
@@ -1603,7 +916,7 @@ const VaporKeepAliveImpl = defineVaporComponent({
     };
     const processFragment = (frag) => {
       const [innerBlock, interop] = getInnerBlock(frag.nodes);
-      if (!innerBlock && !shouldCache(innerBlock, props, interop)) return;
+      if (!innerBlock || !shouldCache(innerBlock, props, interop)) return;
       if (interop) {
         if (cache.has(innerBlock.vnode.type)) {
           innerBlock.vnode.shapeFlag |= 512;
@@ -1693,14 +1006,14 @@ const VaporKeepAliveImpl = defineVaporComponent({
       }
     }
     const injectKeepAliveHooks = (frag) => {
-      (frag.beforeTeardown || (frag.beforeTeardown = [])).push(
+      (frag.onBeforeTeardown || (frag.onBeforeTeardown = [])).push(
         (oldKey, nodes, scope) => {
           processFragment(frag);
           keptAliveScopes.set(oldKey, scope);
           return true;
         }
       );
-      (frag.beforeMount || (frag.beforeMount = [])).push(
+      (frag.onBeforeMount || (frag.onBeforeMount = [])).push(
         () => cacheFragment(frag)
       );
       frag.getScope = (key) => {
@@ -1795,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));
@@ -1814,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
     ];
@@ -1840,6 +1166,9 @@ const vaporInteropImpl = {
         vnode.transition
       );
     }
+    if (parentSuspense) {
+      setParentSuspense(prevSuspense);
+    }
     mountComponent(instance, container, selfAnchor);
     simpleSetCurrentInstance(prev);
     return instance;
@@ -1855,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);
     }
@@ -1865,8 +1197,10 @@ const vaporInteropImpl = {
   /**
    * vapor slot in vdom
    */
-  slot(n1, n2, container, anchor) {
+  slot(n1, n2, container, anchor, parentComponent) {
     if (!n1) {
+      const prev = currentInstance;
+      simpleSetCurrentInstance(parentComponent);
       let selfAnchor;
       const { slot, fallback } = n2.vs;
       const propsRef = n2.vs.ref = shallowRef(n2.props);
@@ -1875,6 +1209,7 @@ const vaporInteropImpl = {
         setFragmentFallback(slotBlock, createFallback(fallback));
         selfAnchor = slotBlock.anchor;
       }
+      simpleSetCurrentInstance(prev);
       if (!selfAnchor) selfAnchor = createTextNode();
       insert(n2.el = n2.anchor = selfAnchor, container, anchor);
       insert(n2.vb = slotBlock, container, selfAnchor);
@@ -1888,10 +1223,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);
   },
@@ -1959,8 +1294,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);
@@ -1995,7 +1329,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;
@@ -2039,7 +1373,7 @@ function createVDOMComponent(internals, component, parentComponent, rawProps, ra
       simpleSetCurrentInstance(prev);
     }
     frag.nodes = vnode.el;
-    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
+    if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
   };
   frag.remove = unmount;
   frag.setRef = (instance, ref, refFor, refKey) => {
@@ -2081,7 +1415,7 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
         internals.um(oldVNode, parentComponent, null);
       }
     };
-    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
+    if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
   };
   const render = (parentNode, anchor) => {
     renderEffect(() => {
@@ -2426,110 +1760,815 @@ function getKeysFromRawProps(rawProps) {
       }
     }
   }
-  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 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;
+  }
+}
+function resolveDynamicSlot(source) {
+  if (!source._cache) {
+    source._cache = computed(source);
+  }
+  return source._cache.value;
+}
+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 = resolveDynamicSlot(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 = resolveDynamicSlot(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 (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
+        );
+      });
+    };
+    this.slotOwner = currentSlotOwner;
+    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.onBeforeTeardown) {
+        preserveScope = this.onBeforeTeardown.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.renderBranch(render, transition, parent, instance)
+        );
+        parent && remove(this.nodes, parent);
+        if (mode === "out-in") {
+          setActiveSub(prevSub);
+          return;
         }
+      } else {
+        parent && remove(this.nodes, parent);
       }
     }
-  }
-  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]);
+    this.renderBranch(render, transition, parent, instance);
+    if (this.fallback) {
+      let invalidFragment = null;
+      if (isFragment(this.nodes)) {
+        setFragmentFallback(
+          this.nodes,
+          this.fallback,
+          (frag) => {
+            if (!isValidBlock(frag.nodes)) {
+              invalidFragment = frag;
+            }
+          }
+        );
+      }
+      if (!invalidFragment && !isValidBlock(this.nodes)) {
+        invalidFragment = this;
+      }
+      if (invalidFragment) {
+        parent && remove(this.nodes, parent);
+        const scope = this.scope || (this.scope = new EffectScope());
+        scope.run(() => {
+          if (invalidFragment !== this) {
+            renderFragmentFallback(invalidFragment);
+          } else {
+            this.nodes = this.fallback() || [];
+          }
+        });
+        parent && insert(this.nodes, parent, this.anchor);
+      }
     }
+    setActiveSub(prevSub);
+    if (isHydrating) this.hydrate();
   }
-  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];
+  renderBranch(render, transition, parent, instance) {
+    if (render) {
+      const scope = this.getScope && this.getScope(this.current);
+      if (scope) {
+        this.scope = scope;
+      } else {
+        this.scope = new EffectScope();
+      }
+      const prevOwner = setCurrentSlotOwner(this.slotOwner);
+      const prev = parent && instance ? setCurrentInstance(instance) : void 0;
+      this.nodes = this.scope.run(render) || [];
+      if (prev !== void 0) setCurrentInstance(...prev);
+      setCurrentSlotOwner(prevOwner);
+      if (transition) {
+        this.$transition = applyTransitionHooks(this.nodes, transition);
+      }
+      if (this.onBeforeMount) {
+        this.onBeforeMount.forEach(
+          (hook) => hook(this.current, this.nodes, this.scope)
+        );
+      }
+      if (parent) {
+        if (this.attrs) {
+          if (this.nodes instanceof Element) {
+            this.scope.run(() => {
+              renderEffect(
+                () => applyFallthroughProps(this.nodes, this.attrs)
+              );
+            });
+          } else if (!!(process.env.NODE_ENV !== "production") && // preventing attrs fallthrough on slots
+          // consistent with VDOM slots behavior
+          (this.anchorLabel === "slot" || isArray(this.nodes) && this.nodes.length)) {
+            warnExtraneousAttributes(this.attrs);
           }
-        } else {
-          mergedRawProps[key] = value;
+        }
+        insert(this.nodes, parent, this.anchor);
+        if (this.onUpdated) {
+          this.onUpdated.forEach((hook) => hook(this.nodes));
         }
       }
+    } else {
+      this.scope = void 0;
+      this.nodes = [];
     }
   }
-  return mergedRawProps;
 }
-function propsSetDevTrap(_, key) {
-  warn(
-    `Attempt to mutate prop ${JSON.stringify(key)} failed. Props are readonly.`
-  );
-  return true;
+function setFragmentFallback(fragment, fallback, onFragment) {
+  if (fragment.fallback) {
+    const originalFallback = fragment.fallback;
+    fragment.fallback = () => {
+      const fallbackNodes = originalFallback();
+      if (isValidBlock(fallbackNodes)) {
+        return fallbackNodes;
+      }
+      return fallback();
+    };
+  } else {
+    fragment.fallback = fallback;
+  }
+  if (onFragment) onFragment(fragment);
+  if (isFragment(fragment.nodes)) {
+    setFragmentFallback(fragment.nodes, fragment.fallback, onFragment);
+  }
 }
-function propsDeleteDevTrap(_, key) {
-  warn(
-    `Attempt to delete 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 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",
@@ -2602,7 +2641,7 @@ class TeleportFragment extends VaporFragment {
             setCurrentHydrationNode(targetNode.nextSibling);
           }
           if (!this.targetAnchor) {
-            this.mount(target);
+            this.mountChildren(target);
           } else {
             this.initChildren();
           }
@@ -2643,11 +2682,13 @@ class TeleportFragment extends VaporFragment {
     const nodes = this.nodes;
     if (this.parentComponent && this.parentComponent.ut) {
       if (isFragment(nodes)) {
-        (nodes.updated || (nodes.updated = [])).push(() => updateCssVars(this));
+        (nodes.onUpdated || (nodes.onUpdated = [])).push(
+          () => updateCssVars(this)
+        );
       } else if (isArray(nodes)) {
         nodes.forEach((node) => {
           if (isFragment(node)) {
-            (node.updated || (node.updated = [])).push(
+            (node.onUpdated || (node.onUpdated = [])).push(
               () => updateCssVars(this)
             );
           }
@@ -2672,55 +2713,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);
-        updateCssVars(this);
-      } 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);
       }
-    };
+      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) {
-      mount(this.parent, this.anchor);
+      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();
       }
     }
   }
@@ -2733,7 +2774,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("")
@@ -2963,12 +3004,9 @@ function hmrRerender(instance) {
   const normalized = normalizeBlock(instance.block);
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
+  instance.scope.reset();
   remove(instance.block, parent);
   const prev = setCurrentInstance(instance);
-  if (instance.renderEffects) {
-    instance.renderEffects.forEach((e) => e.stop());
-    instance.renderEffects = [];
-  }
   pushWarningContext(instance);
   devRender(instance);
   popWarningContext();
@@ -3037,10 +3075,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
       );
@@ -3048,21 +3090,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 {
@@ -3090,10 +3130,9 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
     rawProps,
     rawSlots,
     appContext,
-    once,
-    parentInstance
+    once
   );
-  const prevSlotConsumer = setCurrentSlotConsumer(null);
+  const prevSlotOwner = setCurrentSlotOwner(null);
   if (!!(process.env.NODE_ENV !== "production")) {
     registerHMR(instance);
     instance.isSingleRoot = isSingleRoot;
@@ -3133,7 +3172,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);
@@ -3144,6 +3190,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")) {
@@ -3154,49 +3201,44 @@ function setupComponent(instance, component) {
     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);
+  const isAsyncSetup = isPromise(setupResult);
+  if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) {
+    markAsyncBoundary(instance);
+  }
+  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 {
-    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) {
-    renderEffect(() => applyFallthroughProps(instance.block, instance.attrs));
+    handleSetupResult(setupResult, component, instance);
   }
   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(
@@ -3231,17 +3273,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];
@@ -3251,7 +3300,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);
@@ -3264,10 +3317,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
@@ -3305,7 +3372,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) {
@@ -3343,6 +3410,14 @@ 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);
+      mountComponent(instance, parent, anchor);
+    });
+    return;
+  }
   if (instance.shapeFlag & 512) {
     findParentKeepAlive(instance).activate(instance, parent, anchor);
     return;
@@ -3398,15 +3473,22 @@ 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;
@@ -3416,7 +3498,7 @@ function getRootElement(block) {
         hasComment = true;
         continue;
       }
-      const thisRoot = getRootElement(b);
+      const thisRoot = getRootElement(b, onDynamicFragment, recurse);
       if (!thisRoot || singleRoot) {
         return;
       }
@@ -3425,6 +3507,69 @@ function getRootElement(block) {
     return hasComment ? singleRoot : void 0;
   }
 }
+function isVaporTransition(component) {
+  return getComponentName(component) === "VaporTransition";
+}
+function handleSetupResult(setupResult, component, instance) {
+  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 (setupResult === EMPTY_OBJ && 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;
 const mountApp = (app, container) => {
@@ -3625,7 +3770,7 @@ function createInnerComp(comp, parent, frag) {
     appContext
   );
   if ($transition) setTransitionHooks(instance, $transition);
-  frag && frag.setRef && frag.setRef(instance);
+  frag && frag.setAsyncRef && frag.setAsyncRef(instance);
   return instance;
 }
 
@@ -3741,247 +3886,84 @@ class VaporElement extends VueElementBase {
     createComponent(
       this._def,
       this._props,
-      void 0,
-      void 0,
-      void 0,
-      this._app._context
-    );
-  }
-}
-
-let t;
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function template(html, root, ns) {
-  let node;
-  return () => {
-    if (isHydrating) {
-      const adopted = adoptTemplate(currentHydrationNode, html);
-      if (root) adopted.$root = true;
-      return adopted;
-    }
-    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 {
-      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));
-    }
+      void 0,
+      void 0,
+      void 0,
+      this._app._context
+    );
   }
-  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());
+
+let t;
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function template(html, root, ns) {
+  let node;
+  return () => {
+    if (isHydrating) {
+      const adopted = adoptTemplate(currentHydrationNode, html);
+      if (root) adopted.$root = true;
+      return adopted;
+    }
+    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 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 {
@@ -4026,10 +4008,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 && isMounted) {
-      triggerTransitionGroupUpdate(transitionHooks);
-    }
     const prevSub = setActiveSub();
     if (!isMounted) {
       isMounted = true;
@@ -4245,7 +4223,7 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     } else {
       oldBlocks = [];
     }
-    if (isMounted && frag.updated) frag.updated.forEach((m) => m());
+    if (isMounted && frag.onUpdated) frag.onUpdated.forEach((m) => m());
     setActiveSub(prevSub);
   };
   const needKey = renderItem.length > 1;
@@ -4274,7 +4252,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;
@@ -4455,6 +4433,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);
@@ -4465,12 +4455,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;
@@ -4478,11 +4466,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)) {
@@ -4497,7 +4485,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);
@@ -4534,7 +4522,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);
@@ -4548,7 +4536,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})`);
     }
@@ -4666,18 +4654,15 @@ function setDisplay(target, value) {
     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);
@@ -4780,12 +4765,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, useVaporCssVars, 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 { VaporElement, 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 };