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

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

@@ -1,247 +1,339 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.2
+* @vue/runtime-vapor v3.6.0-alpha.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, patchStyle, mergeProps, shouldSetAsProp, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, isRef, registerHMR, callWithErrorHandling, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, resolveDynamicComponent, vShowOriginalDisplay, vShowHidden, vModelTextInit, vModelCheckboxInit, vModelSelectInit, onMounted, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected } from '@vue/runtime-dom';
-import { isArray, invokeArrayFns, normalizeClass, normalizeStyle, parseStringStyle, isString, isOn, canSetValueDirectly, toDisplayString, extend, isFunction, EMPTY_OBJ, hasOwn, EMPTY_ARR, camelize, NO, YES, getGlobalThis, isObject, remove as remove$1, looseEqual } from '@vue/shared';
-import { setActiveSub, EffectScope, ReactiveEffect, onEffectCleanup, proxyRefs, onScopeDispose as onScopeDispose$1, markRaw, unref, watch, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
-
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function createTextNode(value = "") {
-  return document.createTextNode(value);
-}
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function createComment(data) {
-  return document.createComment(data);
-}
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function child(node) {
-  return node.firstChild;
-}
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function nthChild(node, i) {
-  return node.childNodes[i];
-}
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function next(node) {
-  return node.nextSibling;
-}
+import { isMismatchAllowed, warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, TransitionPropsValidators, leaveCbKey, isAsyncWrapper, getComponentName, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, isKeepAlive, callWithAsyncErrorHandling, unsafeToTrustedHTML, patchStyle, xlinkNS, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, isRef, onMounted, onUpdated, onBeforeUnmount, resetShapeFlag, watch, matches, devtoolsComponentAdded, ensureRenderer, shallowRef, simpleSetCurrentInstance, renderSlot, ensureVaporSlotFallback, createVNode, shallowReactive, createInternalObject, isEmitListener, onScopeDispose, activate as activate$1, setTransitionHooks as setTransitionHooks$1, normalizeRef, isVNode, Fragment, ensureHydrationRenderer, setRef as setRef$1, deactivate as deactivate$1, baseEmit, baseNormalizePropsOptions, pushWarningContext, validateProps, popWarningContext, resolvePropValue, resolveTeleportTarget, isTeleportDisabled, isTeleportDeferred, performTransitionEnter, performTransitionLeave, getInheritedScopeIds, registerHMR, endMeasure, unregisterHMR, nextUid, EffectScope as EffectScope$1, expose, callWithErrorHandling, createAppAPI, initFeatureFlags, setDevtoolsHook, flushOnAppMount, normalizeContainer, createAsyncComponentContext, markAsyncBoundary, useAsyncComponentState, performAsyncHydrate, handleError, VueElementBase, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation, createCanSetSetupRefChecker, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected } from '@vue/runtime-dom';
+import { invokeArrayFns, isArray, extend, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, camelize, stringifyStyle, EMPTY_OBJ, isFunction, NO, hasOwn, isReservedProp, EMPTY_ARR, YES, getGlobalThis, isPlainObject, isObject, remove as remove$1, looseEqual } from '@vue/shared';
+import { ReactiveEffect, setActiveSub, EffectScope, onEffectCleanup, pauseTracking, resetTracking, onScopeDispose as onScopeDispose$1, markRaw, unref, proxyRefs, watch as watch$1, isReactive, isShallow, shallowReadArray, isReadonly, toReadonly, toReactive, shallowRef as shallowRef$1, isRef as isRef$1, traverse } from '@vue/reactivity';
 
 let insertionParent;
 let insertionAnchor;
-function setInsertionState(parent, anchor) {
+let isLastInsertion;
+function setInsertionState(parent, anchor, last) {
   insertionParent = parent;
-  insertionAnchor = anchor;
+  isLastInsertion = last;
+  if (anchor !== void 0) {
+    if (isHydrating) {
+      insertionAnchor = anchor;
+    } else {
+      insertionAnchor = typeof anchor === "number" && anchor > 0 ? null : anchor;
+      if (anchor === 0 && !parent.$fc) {
+        parent.$fc = parent.firstChild;
+      }
+    }
+  } else {
+    insertionAnchor = void 0;
+  }
 }
 function resetInsertionState() {
-  insertionParent = insertionAnchor = void 0;
+  insertionParent = insertionAnchor = isLastInsertion = void 0;
 }
 
+const isHydratingStack = [];
 let isHydrating = false;
 let currentHydrationNode = null;
+function pushIsHydrating(value) {
+  isHydratingStack.push(isHydrating = value);
+}
+function popIsHydrating() {
+  isHydratingStack.pop();
+  isHydrating = isHydratingStack[isHydratingStack.length - 1] || false;
+}
+function runWithoutHydration(fn) {
+  try {
+    pushIsHydrating(false);
+    return fn();
+  } finally {
+    popIsHydrating();
+  }
+}
 let isOptimized$1 = false;
-function withHydration(container, fn) {
-  adoptTemplate = adoptTemplateImpl;
-  locateHydrationNode = locateHydrationNodeImpl;
+function performHydration(fn, setup, cleanup) {
   if (!isOptimized$1) {
-    Comment.prototype.$fs = void 0;
+    adoptTemplate = adoptTemplateImpl;
+    locateHydrationNode = locateHydrationNodeImpl;
+    Comment.prototype.$fe = void 0;
+    Node.prototype.$pns = void 0;
+    Node.prototype.$idx = void 0;
+    Node.prototype.$llc = void 0;
+    Node.prototype.$lpn = void 0;
+    Node.prototype.$lan = void 0;
+    Node.prototype.$lin = void 0;
+    Node.prototype.$curIdx = void 0;
     isOptimized$1 = true;
   }
-  isHydrating = true;
-  setInsertionState(container, 0);
+  enableHydrationNodeLookup();
+  pushIsHydrating(true);
+  setup();
   const res = fn();
-  resetInsertionState();
+  cleanup();
   currentHydrationNode = null;
-  isHydrating = false;
+  popIsHydrating();
+  if (!isHydrating) disableHydrationNodeLookup();
   return res;
 }
+function withHydration(container, fn) {
+  const setup = () => setInsertionState(container);
+  const cleanup = () => resetInsertionState();
+  return performHydration(fn, setup, cleanup);
+}
+function hydrateNode(node, fn) {
+  const setup = () => currentHydrationNode = node;
+  const cleanup = () => {
+  };
+  return performHydration(fn, setup, cleanup);
+}
 let adoptTemplate;
 let locateHydrationNode;
 const isComment = (node, data) => node.nodeType === 8 && node.data === data;
+function setCurrentHydrationNode(node) {
+  currentHydrationNode = node;
+}
+function locateNextSiblingOfParent(n) {
+  if (!n.parentNode) return null;
+  return n.parentNode.nextSibling || locateNextSiblingOfParent(n.parentNode);
+}
+function advanceHydrationNode(node) {
+  const ret = node.nextSibling || // pns is short for "parent next sibling"
+  node.$pns || (node.$pns = locateNextSiblingOfParent(node));
+  if (ret) setCurrentHydrationNode(ret);
+}
 function adoptTemplateImpl(node, template) {
   if (!(template[0] === "<" && template[1] === "!")) {
-    while (node.nodeType === 8) node = next(node);
-  }
-  if (!!(process.env.NODE_ENV !== "production")) {
-    const type = node.nodeType;
-    if (type === 8 && !template.startsWith("<!") || type === 1 && !template.startsWith(`<` + node.tagName.toLowerCase()) || type === 3 && template.trim() && !template.startsWith(node.data)) {
-      warn(`adopted: `, node);
-      warn(`template: ${template}`);
-      warn("hydration mismatch!");
+    while (node.nodeType === 8) {
+      node = node.nextSibling;
+      if (template.trim() === "" && isComment(node, "]") && isComment(node.previousSibling, "[")) {
+        node.before(node = createTextNode());
+        break;
+      }
     }
   }
-  currentHydrationNode = next(node);
+  const type = node.nodeType;
+  if (
+    // comment node
+    type === 8 && !template.startsWith("<!") || // element node
+    type === 1 && !template.startsWith(`<` + node.tagName.toLowerCase())
+  ) {
+    node = handleMismatch(node, template);
+  }
+  currentHydrationNode = node.nextSibling;
   return node;
 }
+function locateNextNode(node) {
+  return isComment(node, "[") ? _next(locateEndAnchor(node)) : isComment(node, "teleport start") ? _next(locateEndAnchor(node, "teleport start", "teleport end")) : _next(node);
+}
 function locateHydrationNodeImpl() {
   let node;
-  if (insertionAnchor === 0) {
-    node = child(insertionParent);
+  if (insertionAnchor !== void 0) {
+    const { $lpn: lastPrepend, $lan: lastAppend, firstChild } = insertionParent;
+    if (insertionAnchor === 0) {
+      node = insertionParent.$lpn = lastPrepend ? locateNextNode(lastPrepend) : firstChild;
+    } else if (insertionAnchor instanceof Node) {
+      const { $lin: lastInsertedNode } = insertionAnchor;
+      node = insertionAnchor.$lin = lastInsertedNode ? locateNextNode(lastInsertedNode) : insertionAnchor;
+    } else {
+      node = insertionParent.$lan = lastAppend ? locateNextNode(lastAppend) : insertionAnchor === null ? firstChild : locateChildByLogicalIndex(insertionParent, insertionAnchor);
+    }
+    insertionParent.$llc = node;
+    node.$idx = insertionParent.$curIdx = insertionParent.$curIdx === void 0 ? 0 : insertionParent.$curIdx + 1;
   } else {
-    node = insertionAnchor ? insertionAnchor.previousSibling : insertionParent ? insertionParent.lastChild : currentHydrationNode;
-    if (node && isComment(node, "]")) {
-      if (node.$fs) {
-        node = node.$fs;
-      } else {
-        let cur = node;
-        let curFragEnd = node;
-        let fragDepth = 0;
-        node = null;
-        while (cur) {
-          cur = cur.previousSibling;
-          if (cur) {
-            if (isComment(cur, "[")) {
-              curFragEnd.$fs = cur;
-              if (!fragDepth) {
-                node = cur;
-                break;
-              } else {
-                fragDepth--;
-              }
-            } else if (isComment(cur, "]")) {
-              curFragEnd = cur;
-              fragDepth++;
-            }
-          }
-        }
-      }
+    node = currentHydrationNode;
+    if (insertionParent && (!node || node.parentNode !== insertionParent)) {
+      node = insertionParent.firstChild;
     }
   }
   if (!!(process.env.NODE_ENV !== "production") && !node) {
-    warn("Hydration mismatch in ", insertionParent);
+    throw new Error(
+      `No current hydration node was found.
+this is likely a Vue internal bug.`
+    );
   }
   resetInsertionState();
   currentHydrationNode = node;
 }
-
-class VaporFragment {
-  constructor(nodes) {
-    this.nodes = nodes;
+function locateEndAnchor(node, open = "[", close = "]") {
+  if (node.$fe) {
+    return node.$fe;
   }
+  const stack = [node];
+  while ((node = node.nextSibling) && stack.length > 0) {
+    if (node.nodeType === 8) {
+      if (node.data === open) {
+        stack.push(node);
+      } else if (node.data === close) {
+        const matchingOpen = stack.pop();
+        matchingOpen.$fe = node;
+        if (stack.length === 0) return node;
+      }
+    }
+  }
+  return null;
 }
-class DynamicFragment extends VaporFragment {
-  constructor(anchorLabel) {
-    super([]);
-    this.anchor = !!(process.env.NODE_ENV !== "production") && anchorLabel ? createComment(anchorLabel) : createTextNode();
+function locateFragmentEndAnchor(label = "]") {
+  let node = currentHydrationNode;
+  while (node) {
+    if (isComment(node, label)) return node;
+    node = node.nextSibling;
   }
-  update(render, key = render) {
-    if (key === this.current) {
-      return;
-    }
-    this.current = key;
-    const prevSub = setActiveSub();
-    const parent = this.anchor.parentNode;
-    if (this.scope) {
-      this.scope.stop();
-      parent && remove(this.nodes, parent);
-    }
-    if (render) {
-      this.scope = new EffectScope();
-      this.nodes = this.scope.run(render) || [];
-      if (parent) insert(this.nodes, parent, this.anchor);
+  return null;
+}
+function handleMismatch(node, template) {
+  if (!isMismatchAllowed(node.parentElement, 1)) {
+    (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && warn(
+      `Hydration node mismatch:
+- rendered on server:`,
+      node,
+      node.nodeType === 3 ? `(text)` : isComment(node, "[[") ? `(start of block node)` : ``,
+      `
+- expected on client:`,
+      template
+    );
+    logMismatchError();
+  }
+  if (isComment(node, "[")) {
+    removeFragmentNodes(node);
+  }
+  const next = _next(node);
+  const container = parentNode(node);
+  remove(node, container);
+  if (template[0] !== "<") {
+    return container.insertBefore(createTextNode(template), next);
+  }
+  const t = createElement("template");
+  t.innerHTML = template;
+  const newNode = _child(t.content).cloneNode(true);
+  newNode.innerHTML = node.innerHTML;
+  Array.from(node.attributes).forEach((attr) => {
+    newNode.setAttribute(attr.name, attr.value);
+  });
+  container.insertBefore(newNode, next);
+  return newNode;
+}
+let hasLoggedMismatchError = false;
+const logMismatchError = () => {
+  if (hasLoggedMismatchError) {
+    return;
+  }
+  console.error("Hydration completed but contains mismatches.");
+  hasLoggedMismatchError = true;
+};
+function removeFragmentNodes(node, endAnchor) {
+  const end = endAnchor || locateEndAnchor(node);
+  while (true) {
+    const next = _next(node);
+    if (next && next !== end) {
+      remove(next, parentNode(node));
     } else {
-      this.scope = void 0;
-      this.nodes = [];
-    }
-    if (this.fallback && !isValidBlock(this.nodes)) {
-      parent && remove(this.nodes, parent);
-      this.nodes = (this.scope || (this.scope = new EffectScope())).run(this.fallback) || [];
-      parent && insert(this.nodes, parent, this.anchor);
+      break;
     }
-    setActiveSub(prevSub);
   }
 }
-function isFragment(val) {
-  return val instanceof VaporFragment;
+
+// @__NO_SIDE_EFFECTS__
+function createElement(tagName) {
+  return document.createElement(tagName);
 }
-function isBlock(val) {
-  return val instanceof Node || isArray(val) || isVaporComponent(val) || isFragment(val);
+// @__NO_SIDE_EFFECTS__
+function createTextNode(value = "") {
+  return document.createTextNode(value);
 }
-function isValidBlock(block) {
-  if (block instanceof Node) {
-    return !(block instanceof Comment);
-  } else if (isVaporComponent(block)) {
-    return isValidBlock(block.block);
-  } else if (isArray(block)) {
-    return block.length > 0 && block.every(isValidBlock);
-  } else {
-    return isValidBlock(block.nodes);
-  }
+// @__NO_SIDE_EFFECTS__
+function createComment(data) {
+  return document.createComment(data);
 }
-function insert(block, parent, anchor = null) {
-  anchor = anchor === 0 ? parent.firstChild : anchor;
-  if (block instanceof Node) {
-    if (!isHydrating) {
-      parent.insertBefore(block, anchor);
-    }
-  } else if (isVaporComponent(block)) {
-    if (block.isMounted) {
-      insert(block.block, parent, anchor);
-    } else {
-      mountComponent(block, parent, anchor);
-    }
-  } else if (isArray(block)) {
-    for (const b of block) {
-      insert(b, parent, anchor);
-    }
-  } else {
-    if (block.insert) {
-      block.insert(parent, anchor);
-    } else {
-      insert(block.nodes, parent, anchor);
-    }
-    if (block.anchor) insert(block.anchor, parent, anchor);
+// @__NO_SIDE_EFFECTS__
+function querySelector(selectors) {
+  return document.querySelector(selectors);
+}
+/*! @__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function parentNode(node) {
+  return node.parentNode;
+}
+const _txt = _child;
+const __txt = /* @__NO_SIDE_EFFECTS__ */ (node) => {
+  let n = node.firstChild;
+  if (!n) {
+    return node.appendChild(/* @__PURE__ */ createTextNode());
   }
+  return n;
+};
+// @__NO_SIDE_EFFECTS__
+function _child(node) {
+  return node.firstChild;
 }
-function prepend(parent, ...blocks) {
-  let i = blocks.length;
-  while (i--) insert(blocks[i], parent, 0);
+// @__NO_SIDE_EFFECTS__
+function __child(node, logicalIndex = 0) {
+  return locateChildByLogicalIndex(node, logicalIndex);
 }
-function remove(block, parent) {
-  if (block instanceof Node) {
-    parent && parent.removeChild(block);
-  } else if (isVaporComponent(block)) {
-    unmountComponent(block, parent);
-  } else if (isArray(block)) {
-    for (let i = 0; i < block.length; i++) {
-      remove(block[i], parent);
-    }
-  } else {
-    if (block.remove) {
-      block.remove(parent);
-    } else {
-      remove(block.nodes, parent);
-    }
-    if (block.anchor) remove(block.anchor, parent);
-    if (block.scope) {
-      block.scope.stop();
+// @__NO_SIDE_EFFECTS__
+function _nthChild(node, i) {
+  return node.childNodes[i];
+}
+// @__NO_SIDE_EFFECTS__
+function __nthChild(node, logicalIndex) {
+  return locateChildByLogicalIndex(node, logicalIndex);
+}
+// @__NO_SIDE_EFFECTS__
+function _next(node) {
+  return node.nextSibling;
+}
+// @__NO_SIDE_EFFECTS__
+function __next(node, logicalIndex) {
+  return locateChildByLogicalIndex(
+    node.parentNode,
+    logicalIndex
+  );
+}
+const txt = /* @__NO_SIDE_EFFECTS__ */ (...args) => {
+  return txt.impl(...args);
+};
+txt.impl = _txt;
+const child = /* @__NO_SIDE_EFFECTS__ */ (...args) => {
+  return child.impl(...args);
+};
+child.impl = _child;
+const next = /* @__NO_SIDE_EFFECTS__ */ (...args) => {
+  return next.impl(...args);
+};
+next.impl = _next;
+const nthChild = /* @__NO_SIDE_EFFECTS__ */ (...args) => {
+  return nthChild.impl(...args);
+};
+nthChild.impl = _nthChild;
+function enableHydrationNodeLookup() {
+  txt.impl = __txt;
+  child.impl = __child;
+  next.impl = __next;
+  nthChild.impl = __nthChild;
+}
+function disableHydrationNodeLookup() {
+  txt.impl = _txt;
+  child.impl = _child;
+  next.impl = _next;
+  nthChild.impl = _nthChild;
+}
+function locateChildByLogicalIndex(parent, logicalIndex) {
+  let child2 = parent.$llc || parent.firstChild;
+  let fromIndex = child2.$idx || 0;
+  while (child2) {
+    if (fromIndex === logicalIndex) {
+      child2.$idx = logicalIndex;
+      return parent.$llc = child2;
     }
+    child2 = isComment(child2, "[") ? (
+      // fragment start: jump to the node after the matching end anchor
+      locateEndAnchor(child2).nextSibling
+    ) : child2.nextSibling;
+    fromIndex++;
   }
+  return null;
 }
-function normalizeBlock(block) {
-  if (!!!(process.env.NODE_ENV !== "production") && true) {
-    throw new Error(
-      "normalizeBlock should not be used in production code paths"
-    );
-  }
-  const nodes = [];
-  if (block instanceof Node) {
-    nodes.push(block);
-  } else if (isArray(block)) {
-    block.forEach((child) => nodes.push(...normalizeBlock(child)));
-  } else if (isVaporComponent(block)) {
-    nodes.push(...normalizeBlock(block.block));
-  } else {
-    nodes.push(...normalizeBlock(block.nodes));
-    block.anchor && nodes.push(block.anchor);
-  }
-  return nodes;
+function updateLastLogicalChild(parent, child2) {
+  if (!isComment(child2, "]")) return;
+  child2.$idx = parent.$curIdx || 0;
+  parent.$llc = child2;
 }
 
 class RenderEffect extends ReactiveEffect {
@@ -266,6 +358,9 @@ class RenderEffect extends ReactiveEffect {
         this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
         this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
       }
+      if (!!(process.env.NODE_ENV !== "production") || instance.type.ce) {
+        (instance.renderEffects || (instance.renderEffects = [])).push(this);
+      }
       job.i = instance;
     }
     this.job = job;
@@ -307,70 +402,506 @@ function renderEffect(fn, noLifecycle = false) {
   effect.run();
 }
 
-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);
-    });
-  }
-}
-function delegate(el, event, handler) {
-  const key = `$evt${event}`;
-  const existing = el[key];
-  if (existing) {
-    if (isArray(existing)) {
-      existing.push(handler);
-    } else {
-      el[key] = [existing, handler];
-    }
-  } else {
-    el[key] = handler;
-  }
-}
-const delegatedEvents = /* @__PURE__ */ Object.create(null);
-const delegateEvents = (...names) => {
-  for (const name of names) {
-    if (!delegatedEvents[name]) {
-      delegatedEvents[name] = true;
-      document.addEventListener(name, delegatedEventHandler);
-    }
-  }
+const displayName = "VaporTransition";
+const decorate$1 = (t) => {
+  t.displayName = displayName;
+  t.props = TransitionPropsValidators;
+  t.__vapor = true;
+  return t;
 };
-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 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);
+      }
     }
-  });
-  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;
+    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);
           }
         }
       } else {
-        handlers(e);
-        if (e.cancelBubble) return;
+        isMounted = true;
       }
-    }
-    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
+    });
+    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;
+  }
+);
+const getTransitionHooksContext = (key, props, state, instance, postClone) => {
+  const { leavingNodes } = state;
+  const context = {
+    setLeavingNodeCache: (el) => {
+      leavingNodes.set(key, el);
+    },
+    unsetLeavingNodeCache: (el) => {
+      const leavingNode = leavingNodes.get(key);
+      if (leavingNode === el) {
+        leavingNodes.delete(key);
+      }
+    },
+    earlyRemove: () => {
+      const leavingNode = leavingNodes.get(key);
+      if (leavingNode && leavingNode[leaveCbKey]) {
+        leavingNode[leaveCbKey]();
+      }
+    },
+    cloneHooks: (block) => {
+      const hooks = resolveTransitionHooks(
+        block,
+        props,
+        state,
+        instance,
+        postClone
+      );
+      if (postClone) postClone(hooks);
+      return hooks;
+    }
+  };
+  return context;
+};
+function resolveTransitionHooks(block, props, state, instance, postClone) {
+  const context = getTransitionHooksContext(
+    String(block.$key),
+    props,
+    state,
+    instance,
+    postClone
+  );
+  const hooks = baseResolveTransitionHooks(
+    context,
+    props,
+    state,
+    instance
+  );
+  hooks.state = state;
+  hooks.props = props;
+  hooks.instance = instance;
+  return hooks;
+}
+function applyTransitionHooks(block, hooks, fallthroughAttrs = true, isResolved = false) {
+  if (isArray(block)) {
+    block = block.filter((b) => !(b instanceof Comment));
+    if (block.length === 1) {
+      block = block[0];
+    } else if (block.length === 0) {
+      return hooks;
+    }
+  }
+  const isFrag = isFragment(block);
+  const child = isResolved ? block : findTransitionBlock(block, isFrag);
+  if (!child) {
+    if (isFrag) setTransitionHooksOnFragment(block, hooks);
+    return hooks;
+  }
+  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);
+  }
+  return resolvedHooks;
+}
+function applyTransitionLeaveHooks(block, enterHooks, afterLeaveCb) {
+  const leavingBlock = findTransitionBlock(block);
+  if (!leavingBlock) return void 0;
+  const { props, state, instance } = enterHooks;
+  const leavingHooks = resolveTransitionHooks(
+    leavingBlock,
+    props,
+    state,
+    instance
+  );
+  leavingBlock.$transition = leavingHooks;
+  const { mode } = props;
+  if (mode === "out-in") {
+    state.isLeaving = true;
+    leavingHooks.afterLeave = () => {
+      state.isLeaving = false;
+      afterLeaveCb();
+      leavingBlock.$transition = void 0;
+      delete leavingHooks.afterLeave;
+    };
+  } else if (mode === "in-out") {
+    leavingHooks.delayLeave = (block2, earlyRemove, delayedLeave) => {
+      state.leavingNodes.set(String(leavingBlock.$key), leavingBlock);
+      block2[leaveCbKey] = () => {
+        earlyRemove();
+        block2[leaveCbKey] = void 0;
+        leavingBlock.$transition = void 0;
+        delete enterHooks.delayedLeave;
+      };
+      enterHooks.delayedLeave = () => {
+        delayedLeave();
+        leavingBlock.$transition = void 0;
+        delete enterHooks.delayedLeave;
+      };
+    };
+  }
+}
+function findTransitionBlock(block, inFragment = false) {
+  let child;
+  if (block instanceof Node) {
+    if (block instanceof Element) child = block;
+  } else if (isVaporComponent(block)) {
+    if (isAsyncWrapper(block) && !block.type.__asyncResolved) {
+      child = block;
+    } else {
+      if (getComponentName(block.type) === displayName) return void 0;
+      child = findTransitionBlock(block.block, inFragment);
+      if (child && child.$key === void 0) child.$key = block.uid;
+    }
+  } else if (isArray(block)) {
+    let hasFound = false;
+    for (const c of block) {
+      if (c instanceof Comment) continue;
+      if (isFragment(c)) inFragment = true;
+      const item = findTransitionBlock(c, inFragment);
+      if (!!(process.env.NODE_ENV !== "production") && hasFound) {
+        warn(
+          "<transition> can only be used on a single element or component. Use <transition-group> for lists."
+        );
+        break;
+      }
+      child = item;
+      hasFound = true;
+      if (!!!(process.env.NODE_ENV !== "production")) break;
+    }
+  } else if (isFragment(block)) {
+    inFragment = true;
+    if (block.insert) {
+      child = block;
+    } else {
+      child = findTransitionBlock(block.nodes, true);
+    }
+  }
+  if (!!(process.env.NODE_ENV !== "production") && !child && !inFragment) {
+    warn("Transition component has no valid child element");
+  }
+  return child;
+}
+function setTransitionHooksOnFragment(block, hooks) {
+  if (isFragment(block)) {
+    block.$transition = hooks;
+    if (block.nodes && isFragment(block.nodes)) {
+      setTransitionHooksOnFragment(block.nodes, hooks);
+    }
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      setTransitionHooksOnFragment(block[i], hooks);
+    }
+  }
+}
+function setTransitionHooks(block, hooks) {
+  if (isVaporComponent(block)) {
+    block = findTransitionBlock(block.block);
+    if (!block) return;
+  }
+  block.$transition = hooks;
+}
+
+class VaporFragment {
+  constructor(nodes) {
+    this.vnode = null;
+    this.nodes = nodes;
+  }
+}
+class ForFragment extends VaporFragment {
+  constructor(nodes) {
+    super(nodes);
+  }
+}
+class DynamicFragment extends VaporFragment {
+  constructor(anchorLabel) {
+    super([]);
+    this.hydrate = (isEmpty = false) => {
+      if (this.anchor) return;
+      if (this.anchorLabel === "if") {
+        if (isEmpty) {
+          this.anchor = locateFragmentEndAnchor("");
+          if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
+            throw new Error(
+              "Failed to locate if anchor. this is likely a Vue internal bug."
+            );
+          } else {
+            if (!!(process.env.NODE_ENV !== "production")) {
+              this.anchor.data = this.anchorLabel;
+            }
+            return;
+          }
+        }
+      } else if (this.anchorLabel === "slot") {
+        if (isEmpty && isComment(currentHydrationNode, "")) {
+          this.anchor = currentHydrationNode;
+          if (!!(process.env.NODE_ENV !== "production")) {
+            this.anchor.data = this.anchorLabel;
+          }
+          return;
+        }
+        this.anchor = locateFragmentEndAnchor();
+        if (!!(process.env.NODE_ENV !== "production") && !this.anchor) {
+          throw new Error(
+            "Failed to locate slot anchor. this is likely a Vue internal bug."
+          );
+        } else {
+          return;
+        }
+      }
+      const { parentNode, nextNode } = findBlockNode(this.nodes);
+      queuePostFlushCb(() => {
+        parentNode.insertBefore(
+          this.anchor = !!(process.env.NODE_ENV !== "production") ? createComment(this.anchorLabel) : createTextNode(),
+          nextNode
+        );
+      });
+    };
+    if (isHydrating) {
+      this.anchorLabel = anchorLabel;
+      locateHydrationNode();
+    } else {
+      this.anchor = !!(process.env.NODE_ENV !== "production") && anchorLabel ? createComment(anchorLabel) : createTextNode();
+    }
+  }
+  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;
+    const instance = currentInstance;
+    this.inKeepAlive = isKeepAlive(instance);
+    if (this.scope) {
+      if (this.inKeepAlive) {
+        instance.processFragment(this);
+        if (!this.keptAliveScopes) this.keptAliveScopes = /* @__PURE__ */ new Map();
+        this.keptAliveScopes.set(this.current, this.scope);
+      } else {
+        this.scope.stop();
+      }
+      const mode = transition && transition.mode;
+      if (mode) {
+        applyTransitionLeaveHooks(
+          this.nodes,
+          transition,
+          () => this.render(render, instance, transition, parent)
+        );
+        parent && remove(this.nodes, parent);
+        if (mode === "out-in") {
+          setActiveSub(prevSub);
+          return;
+        }
+      } else {
+        parent && remove(this.nodes, parent);
+      }
+    }
+    this.render(render, instance, transition, parent);
+    if (this.fallback) {
+      const hasNestedFragment = isFragment(this.nodes);
+      if (hasNestedFragment) {
+        setFragmentFallback(this.nodes, this.fallback);
+      }
+      const invalidFragment = findInvalidFragment(this);
+      if (invalidFragment) {
+        parent && remove(this.nodes, parent);
+        const scope = this.scope || (this.scope = new EffectScope());
+        scope.run(() => {
+          if (hasNestedFragment) {
+            renderFragmentFallback(invalidFragment);
+          } else {
+            this.nodes = this.fallback() || [];
+          }
+        });
+        parent && insert(this.nodes, parent, this.anchor);
+      }
+    }
+    setActiveSub(prevSub);
+    if (isHydrating) this.hydrate();
+  }
+  render(render, instance, transition, parent) {
+    if (render) {
+      const scope = this.inKeepAlive && this.keptAliveScopes ? this.keptAliveScopes.get(this.current) : void 0;
+      if (scope) {
+        this.scope = scope;
+        this.keptAliveScopes.delete(this.current);
+        this.scope.resume();
+      } else {
+        this.scope = new EffectScope();
+      }
+      this.nodes = this.scope.run(render) || [];
+      if (this.inKeepAlive) {
+        instance.cacheFragment(this);
+      }
+      if (transition) {
+        this.$transition = applyTransitionHooks(this.nodes, transition);
+      }
+      if (parent) insert(this.nodes, parent, this.anchor);
+    } else {
+      this.scope = void 0;
+      this.nodes = [];
+    }
+  }
+}
+function setFragmentFallback(fragment, fallback) {
+  if (fragment.fallback) {
+    const originalFallback = fragment.fallback;
+    fragment.fallback = () => {
+      const fallbackNodes = originalFallback();
+      if (isValidBlock(fallbackNodes)) {
+        return fallbackNodes;
+      }
+      return fallback();
+    };
+  } else {
+    fragment.fallback = fallback;
+  }
+  if (isFragment(fragment.nodes)) {
+    setFragmentFallback(fragment.nodes, fragment.fallback);
+  }
+}
+function renderFragmentFallback(fragment) {
+  if (fragment instanceof ForFragment) {
+    fragment.nodes[0] = [fragment.fallback() || []];
+  } else if (fragment instanceof DynamicFragment) {
+    fragment.update(fragment.fallback);
+  } else ;
+}
+function findInvalidFragment(fragment) {
+  if (isValidBlock(fragment.nodes)) return null;
+  return isFragment(fragment.nodes) ? findInvalidFragment(fragment.nodes) || fragment : fragment;
+}
+function isFragment(val) {
+  return val instanceof VaporFragment;
+}
+
+function addEventListener(el, event, handler, options) {
+  el.addEventListener(event, handler, options);
+  return () => el.removeEventListener(event, handler, options);
+}
+function on(el, event, handler, options = {}) {
+  addEventListener(el, event, handler, options);
+  if (options.effect) {
+    onEffectCleanup(() => {
+      el.removeEventListener(event, handler, options);
+    });
+  }
+}
+function delegate(el, event, handler) {
+  const key = `$evt${event}`;
+  const existing = el[key];
+  if (existing) {
+    if (isArray(existing)) {
+      existing.push(handler);
+    } else {
+      el[key] = [existing, handler];
+    }
+  } else {
+    el[key] = handler;
+  }
+}
+const delegatedEvents = /* @__PURE__ */ Object.create(null);
+const delegateEvents = (...names) => {
+  for (const name of names) {
+    if (!delegatedEvents[name]) {
+      delegatedEvents[name] = true;
+      document.addEventListener(name, delegatedEventHandler);
+    }
+  }
+};
+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;
+    }
+  });
+  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;
+      }
+    }
+    node = node.host && node.host !== node && node.host instanceof Node ? node.host : node.parentNode;
   }
 };
 function setDynamicEvents(el, events) {
@@ -378,6 +909,15 @@ function setDynamicEvents(el, events) {
     on(el, name, events[name], { effect: true });
   }
 }
+function createInvoker(handler) {
+  const i = currentInstance;
+  return (...args) => callWithAsyncErrorHandling(
+    handler,
+    i,
+    5,
+    args
+  );
+}
 
 const hasFallthroughKey = (key) => currentInstance.hasFallthrough && key in currentInstance.attrs;
 function setProp(el, key, value) {
@@ -387,7 +927,7 @@ function setProp(el, key, value) {
     setAttr(el, key, value);
   }
 }
-function setAttr(el, key, value) {
+function setAttr(el, key, value, isSVG = false) {
   if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
     return;
   }
@@ -396,19 +936,34 @@ function setAttr(el, key, 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 (value != null) {
-      el.setAttribute(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 {
-      el.removeAttribute(key);
+      if (value != null) {
+        el.setAttribute(key, value);
+      } else {
+        el.removeAttribute(key);
+      }
     }
   }
 }
-function setDOMProp(el, key, 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;
@@ -416,7 +971,9 @@ function setDOMProp(el, key, value) {
   let needRemove = false;
   if (value === "" || value == null) {
     const type = typeof prev;
-    if (value == null && type === "string") {
+    if (type === "boolean") {
+      value = includeBooleanAttr(value);
+    } else if (value == null && type === "string") {
       value = "";
       needRemove = true;
     } else if (type === "number") {
@@ -434,19 +991,35 @@ function setDOMProp(el, key, value) {
       );
     }
   }
-  needRemove && el.removeAttribute(key);
+  needRemove && el.removeAttribute(attrName || key);
 }
-function setClass(el, value) {
+function setClass(el, value, isSVG = false) {
   if (el.$root) {
     setClassIncremental(el, value);
-  } else if ((value = normalizeClass(value)) !== el.$cls) {
-    el.className = el.$cls = 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] = normalizeClass(value)) !== prev) {
+  if ((value = el[cacheKey] = normalizedValue) !== prev) {
     const nextList = value.split(/\s+/);
     if (value) {
       el.classList.add(...nextList);
@@ -462,23 +1035,31 @@ function setStyle(el, value) {
   if (el.$root) {
     setStyleIncremental(el, value);
   } else {
-    const prev = el.$sty;
-    value = el.$sty = normalizeStyle(value);
-    patchStyle(el, prev, value);
+    const normalizedValue = normalizeStyle(value);
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, false)) {
+      el.$sty = normalizedValue;
+      return;
+    }
+    patchStyle(el, el.$sty, el.$sty = normalizedValue);
   }
 }
 function setStyleIncremental(el, value) {
   const cacheKey = `$styi${isApplyingFallthroughProps ? "$" : ""}`;
-  const prev = el[cacheKey];
-  value = el[cacheKey] = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
-  patchStyle(el, prev, value);
-  return value;
+  const normalizedValue = isString(value) ? parseStringStyle(value) : normalizeStyle(value);
+  if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating && !styleHasMismatch(el, value, normalizedValue, true)) {
+    el[cacheKey] = normalizedValue;
+    return;
+  }
+  patchStyle(el, el[cacheKey], el[cacheKey] = normalizedValue);
 }
-function setValue(el, value) {
+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) {
@@ -489,56 +1070,149 @@ function setValue(el, 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) {
-  if (el.$txt !== (value = toDisplayString(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 setHtml(el, value) {
+function setBlockText(block, value) {
   value = value == null ? "" : value;
-  if (el.$html !== value) {
-    el.innerHTML = el.$html = value;
+  if (block.$txt !== value) {
+    setTextToBlock(block, block.$txt = value);
   }
 }
-function setDynamicProps(el, args) {
-  const props = args.length > 1 ? mergeProps(...args) : args[0];
-  const cacheKey = `$dprops${isApplyingFallthroughProps ? "$" : ""}`;
-  const prevKeys = el[cacheKey];
-  if (prevKeys) {
-    for (const key of prevKeys) {
-      if (!(key in props)) {
-        setDynamicProp(el, key, null);
-      }
-    }
+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 setHtmlToBlock(block, value) {
+  if (block instanceof Node) {
+    if (block instanceof Element) {
+      block.innerHTML = value;
+    } else if (!!(process.env.NODE_ENV !== "production")) {
+      warnCannotSetProp("innerHTML");
+    }
+  } else if (isVaporComponent(block)) {
+    setHtmlToBlock(block.block, value);
+  } else if (isArray(block)) {
+    if (!!(process.env.NODE_ENV !== "production")) {
+      warnCannotSetProp("innerHTML");
+    }
+  } else {
+    setHtmlToBlock(block.nodes, value);
+  }
+}
+function setDynamicProps(el, args, root, isSVG) {
+  const props = args.length > 1 ? mergeProps(...args) : args[0];
+  const cacheKey = `$dprops${isApplyingFallthroughProps ? "$" : ""}`;
+  const prevKeys = el[cacheKey];
+  if (root) el.$root = root;
+  if (prevKeys) {
+    for (const key of prevKeys) {
+      if (!(key in props)) {
+        setDynamicProp(el, key, null, isSVG);
+      }
+    }
   }
   for (const key of el[cacheKey] = Object.keys(props)) {
-    setDynamicProp(el, key, props[key]);
+    setDynamicProp(el, key, props[key], isSVG);
   }
 }
-function setDynamicProp(el, key, value) {
-  const isSVG = false;
+function setDynamicProp(el, key, value, isSVG = false) {
+  let forceHydrate = false;
   if (key === "class") {
-    setClass(el, value);
+    setClass(el, value, isSVG);
   } else if (key === "style") {
     setStyle(el, value);
   } else if (isOn(key)) {
     on(el, key[2].toLowerCase() + key.slice(3), value, { effect: true });
-  } else if (key[0] === "." ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, value, isSVG)) {
+  } else if (
+    // force hydrate v-bind with .prop modifiers
+    (forceHydrate = key[0] === ".") ? (key = key.slice(1), true) : key[0] === "^" ? (key = key.slice(1), false) : shouldSetAsProp(el, key, value, isSVG)
+  ) {
     if (key === "innerHTML") {
       setHtml(el, value);
     } else if (key === "textContent") {
       setElementText(el, value);
     } else if (key === "value" && canSetValueDirectly(el.tagName)) {
-      setValue(el, value);
+      setValue(el, value, forceHydrate);
     } else {
-      setDOMProp(el, key, value);
+      setDOMProp(el, key, value, forceHydrate);
     }
+  } else if (
+    // custom elements
+    el._isVueCE && (/[A-Z]/.test(key) || !isString(value))
+  ) {
+    setDOMProp(el, camelize(key), value, forceHydrate, key);
   } else {
-    setAttr(el, key, value);
+    setAttr(el, key, value, isSVG);
   }
   return value;
 }
@@ -547,19 +1221,535 @@ function optimizePropertyLookup() {
   if (isOptimized) return;
   isOptimized = true;
   const proto = Element.prototype;
-  proto.$evtclick = void 0;
+  proto.$transition = void 0;
+  proto.$key = void 0;
+  proto.$fc = proto.$evtclick = void 0;
   proto.$root = false;
-  proto.$html = proto.$txt = proto.$cls = proto.$sty = Text.prototype.$txt = "";
+  proto.$html = proto.$cls = proto.$sty = "";
+  Text.prototype.$txt = void 0;
+}
+function classHasMismatch(el, expected, isIncremental) {
+  const actual = el.getAttribute("class");
+  const actualClassSet = toClassSet(actual || "");
+  const expectedClassSet = toClassSet(expected);
+  let hasMismatch = false;
+  if (isIncremental) {
+    if (expected) {
+      hasMismatch = Array.from(expectedClassSet).some(
+        (cls) => !actualClassSet.has(cls)
+      );
+    }
+  } else {
+    hasMismatch = !isSetEqual(actualClassSet, expectedClassSet);
+  }
+  if (hasMismatch) {
+    warnPropMismatch(el, "class", 2, actual, expected);
+    logMismatchError();
+    return true;
+  }
+  return false;
+}
+function styleHasMismatch(el, value, normalizedValue, isIncremental) {
+  const actual = el.getAttribute("style");
+  const actualStyleMap = toStyleMap(actual || "");
+  const expected = isString(value) ? value : stringifyStyle(normalizedValue);
+  const expectedStyleMap = toStyleMap(expected);
+  if (el[vShowHidden]) {
+    expectedStyleMap.set("display", "none");
+  }
+  let hasMismatch = false;
+  if (isIncremental) {
+    if (expected) {
+      hasMismatch = Array.from(expectedStyleMap.entries()).some(
+        ([key, val]) => actualStyleMap.get(key) !== val
+      );
+    }
+  } else {
+    hasMismatch = !isMapEqual(actualStyleMap, expectedStyleMap);
+  }
+  if (hasMismatch) {
+    warnPropMismatch(el, "style", 3, actual, expected);
+    logMismatchError();
+    return true;
+  }
+  return false;
+}
+function attributeHasMismatch(el, key, value) {
+  if (isValidHtmlOrSvgAttribute(el, key)) {
+    const { actual, expected } = getAttributeMismatch(el, key, value);
+    if (actual !== expected) {
+      warnPropMismatch(el, key, 4, actual, expected);
+      logMismatchError();
+      return true;
+    }
+  }
+  return false;
+}
+function getClientText(el, value) {
+  if (value[0] === "\n" && (el.tagName === "PRE" || el.tagName === "TEXTAREA")) {
+    value = value.slice(1);
+  }
+  return value;
+}
+function shouldForceHydrate(el, key) {
+  const { tagName } = el;
+  return (tagName === "INPUT" || tagName === "OPTION") && (key.endsWith("value") || key === "indeterminate") || // force hydrate custom element dynamic props
+  tagName.includes("-");
+}
+
+let currentSlotScopeIds = null;
+function setCurrentSlotScopeIds(scopeIds) {
+  try {
+    return currentSlotScopeIds;
+  } finally {
+    currentSlotScopeIds = scopeIds;
+  }
+}
+const dynamicSlotsProxyHandlers = {
+  get: getSlot,
+  has: (target, key) => !!getSlot(target, key),
+  getOwnPropertyDescriptor(target, key) {
+    const slot = getSlot(target, key);
+    if (slot) {
+      return {
+        configurable: true,
+        enumerable: true,
+        value: slot
+      };
+    }
+  },
+  ownKeys(target) {
+    let keys = Object.keys(target);
+    const dynamicSources = target.$;
+    if (dynamicSources) {
+      keys = keys.filter((k) => k !== "$");
+      for (const source of dynamicSources) {
+        if (isFunction(source)) {
+          const slot = source();
+          if (isArray(slot)) {
+            for (const s of slot) keys.push(String(s.name));
+          } else {
+            keys.push(String(slot.name));
+          }
+        } else {
+          keys.push(...Object.keys(source));
+        }
+      }
+    }
+    return keys;
+  },
+  set: NO,
+  deleteProperty: NO
+};
+function getSlot(target, key) {
+  if (key === "$") return;
+  const dynamicSources = target.$;
+  if (dynamicSources) {
+    let i = dynamicSources.length;
+    let source;
+    while (i--) {
+      source = dynamicSources[i];
+      if (isFunction(source)) {
+        const slot = source();
+        if (slot) {
+          if (isArray(slot)) {
+            for (const s of slot) {
+              if (String(s.name) === key) return s.fn;
+            }
+          } else if (String(slot.name) === key) {
+            return slot.fn;
+          }
+        }
+      } else if (hasOwn(source, key)) {
+        return source[key];
+      }
+    }
+  }
+  if (hasOwn(target, key)) {
+    return target[key];
+  }
+}
+let currentSlotConsumer = null;
+function setCurrentSlotConsumer(consumer) {
+  try {
+    return currentSlotConsumer;
+  } finally {
+    currentSlotConsumer = consumer;
+  }
+}
+function getParentInstance() {
+  return currentSlotConsumer || currentInstance;
+}
+function withVaporCtx(fn) {
+  const owner = currentInstance;
+  return (...args) => {
+    const prev = setCurrentInstance(owner);
+    const prevConsumer = setCurrentSlotConsumer(prev[0]);
+    try {
+      return fn(...args);
+    } finally {
+      setCurrentInstance(...prev);
+      setCurrentSlotConsumer(prevConsumer);
+    }
+  };
+}
+function createSlot(name, rawProps, fallback, noSlotted) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  const instance = currentInstance;
+  const rawSlots = instance.rawSlots;
+  const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
+  let fragment;
+  if (isRef(rawSlots._)) {
+    if (isHydrating) locateHydrationNode();
+    fragment = instance.appContext.vapor.vdomSlot(
+      rawSlots._,
+      name,
+      slotProps,
+      instance,
+      fallback
+    );
+  } else {
+    fragment = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
+    const isDynamicName = isFunction(name);
+    const slotScopeIds = [];
+    if (!noSlotted) {
+      const scopeId = instance.type.__scopeId;
+      if (scopeId) {
+        slotScopeIds.push(`${scopeId}-s`);
+      }
+    }
+    const renderSlot = () => {
+      const slotName = isFunction(name) ? name() : name;
+      if (instance.ce || instance.parent && isAsyncWrapper(instance.parent) && instance.parent.ce) {
+        const el = createElement("slot");
+        renderEffect(() => {
+          setDynamicProps(el, [
+            slotProps,
+            slotName !== "default" ? { name: slotName } : {}
+          ]);
+        });
+        if (fallback) insert(fallback(), el);
+        fragment.nodes = el;
+        return;
+      }
+      const slot = getSlot(rawSlots, slotName);
+      if (slot) {
+        fragment.fallback = fallback;
+        fragment.update(
+          slot._bound || (slot._bound = () => {
+            const prevSlotScopeIds = setCurrentSlotScopeIds(
+              slotScopeIds.length > 0 ? slotScopeIds : null
+            );
+            try {
+              return slot(slotProps);
+            } finally {
+              setCurrentSlotScopeIds(prevSlotScopeIds);
+            }
+          })
+        );
+      } else {
+        fragment.update(fallback);
+      }
+    };
+    if (isDynamicName || rawSlots.$) {
+      renderEffect(renderSlot);
+    } else {
+      renderSlot();
+    }
+  }
+  if (!isHydrating) {
+    if (!noSlotted) {
+      const scopeId = instance.type.__scopeId;
+      if (scopeId) {
+        setScopeId(fragment, [`${scopeId}-s`]);
+      }
+    }
+    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor);
+  } else {
+    if (fragment.insert) {
+      fragment.hydrate();
+    }
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
+  }
+  return fragment;
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function defineVaporComponent(comp, extraOptions) {
+  if (isFunction(comp)) {
+    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
+      setup: comp,
+      __vapor: true
+    }))();
+  }
+  comp.__vapor = true;
+  return comp;
+}
+
+const VaporKeepAliveImpl = defineVaporComponent({
+  name: "VaporKeepAlive",
+  __isKeepAlive: true,
+  props: {
+    include: [String, RegExp, Array],
+    exclude: [String, RegExp, Array],
+    max: [String, Number]
+  },
+  setup(props, { slots }) {
+    if (!slots.default) {
+      return void 0;
+    }
+    const keepAliveInstance = currentInstance;
+    const cache = /* @__PURE__ */ new Map();
+    const keys = /* @__PURE__ */ new Set();
+    const storageContainer = createElement("div");
+    let current;
+    if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
+      keepAliveInstance.__v_cache = cache;
+    }
+    function shouldCache(instance) {
+      if (isAsyncWrapper(instance) && !instance.type.__asyncResolved) {
+        return false;
+      }
+      const { include, exclude } = props;
+      const name = getComponentName(
+        isAsyncWrapper(instance) ? instance.type.__asyncResolved : instance.type
+      );
+      return !(include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name));
+    }
+    function innerCacheBlock(key, instance) {
+      const { max } = props;
+      if (cache.has(key)) {
+        keys.delete(key);
+        keys.add(key);
+      } else {
+        keys.add(key);
+        if (max && keys.size > parseInt(max, 10)) {
+          pruneCacheEntry(keys.values().next().value);
+        }
+      }
+      cache.set(key, instance);
+      current = instance;
+    }
+    function cacheBlock() {
+      const block = keepAliveInstance.block;
+      const innerBlock = getInnerBlock(block);
+      if (!innerBlock || !shouldCache(innerBlock)) return;
+      let toCache;
+      let key;
+      let frag;
+      if (isFragment(block) && (frag = findInteropFragment(block))) {
+        toCache = frag;
+        key = frag.vnode.type;
+      } else {
+        toCache = innerBlock;
+        key = innerBlock.type;
+      }
+      innerCacheBlock(key, toCache);
+    }
+    onMounted(cacheBlock);
+    onUpdated(cacheBlock);
+    onBeforeUnmount(() => {
+      cache.forEach((cached, key) => {
+        const instance = getInstanceFromCache(cached);
+        if (!instance) return;
+        resetCachedShapeFlag(cached);
+        cache.delete(key);
+        if (current) {
+          const currentKey = isVaporComponent(current) ? current.type : current.vnode.type;
+          if (currentKey === key) {
+            const da = instance.da;
+            da && queuePostFlushCb(da);
+            return;
+          }
+        }
+        remove(cached, storageContainer);
+      });
+    });
+    keepAliveInstance.getStorageContainer = () => storageContainer;
+    keepAliveInstance.getCachedComponent = (comp) => {
+      return cache.get(comp);
+    };
+    keepAliveInstance.cacheComponent = (instance) => {
+      if (!shouldCache(instance)) return;
+      instance.shapeFlag |= 256;
+      innerCacheBlock(instance.type, instance);
+    };
+    keepAliveInstance.processFragment = (frag) => {
+      const innerBlock = getInnerBlock(frag.nodes);
+      if (!innerBlock) return;
+      const fragment = findInteropFragment(frag.nodes);
+      if (fragment) {
+        if (cache.has(fragment.vnode.type)) {
+          fragment.vnode.shapeFlag |= 512;
+        }
+        if (shouldCache(innerBlock)) {
+          fragment.vnode.shapeFlag |= 256;
+        }
+      } else {
+        if (cache.has(innerBlock.type)) {
+          innerBlock.shapeFlag |= 512;
+        }
+        if (shouldCache(innerBlock)) {
+          innerBlock.shapeFlag |= 256;
+        }
+      }
+    };
+    keepAliveInstance.cacheFragment = (fragment) => {
+      const innerBlock = getInnerBlock(fragment.nodes);
+      if (!innerBlock || !shouldCache(innerBlock)) return;
+      let toCache;
+      let key;
+      const frag = findInteropFragment(fragment);
+      if (frag) {
+        frag.vnode.shapeFlag |= 256;
+        toCache = frag;
+        key = frag.vnode.type;
+      } else {
+        innerBlock.shapeFlag |= 256;
+        toCache = innerBlock;
+        key = innerBlock.type;
+      }
+      innerCacheBlock(key, toCache);
+    };
+    keepAliveInstance.activate = (instance, parentNode, anchor) => {
+      current = instance;
+      activate(instance, parentNode, anchor);
+    };
+    keepAliveInstance.deactivate = (instance) => {
+      current = void 0;
+      deactivate(instance, storageContainer);
+    };
+    function resetCachedShapeFlag(cached) {
+      if (isVaporComponent(cached)) {
+        resetShapeFlag(cached);
+      } else {
+        resetShapeFlag(cached.vnode);
+      }
+    }
+    let children = slots.default();
+    if (isArray(children) && children.length > 1) {
+      if (!!(process.env.NODE_ENV !== "production")) {
+        warn(`KeepAlive should contain exactly one component child.`);
+      }
+      return children;
+    }
+    if (isVaporComponent(children)) {
+      children.shapeFlag |= 256;
+    } else if (isInteropFragment(children)) {
+      children.vnode.shapeFlag |= 256;
+    }
+    function pruneCache(filter) {
+      cache.forEach((cached, key) => {
+        const instance = getInstanceFromCache(cached);
+        if (!instance) return;
+        const name = getComponentName(instance.type);
+        if (name && !filter(name)) {
+          pruneCacheEntry(key);
+        }
+      });
+    }
+    function pruneCacheEntry(key) {
+      const cached = cache.get(key);
+      resetCachedShapeFlag(cached);
+      if (cached !== current) {
+        remove(cached);
+      }
+      cache.delete(key);
+      keys.delete(key);
+    }
+    watch(
+      () => [props.include, props.exclude],
+      ([include, exclude]) => {
+        include && pruneCache((name) => matches(include, name));
+        exclude && pruneCache((name) => !matches(exclude, name));
+      },
+      // prune post-render after `current` has been updated
+      { flush: "post", deep: true }
+    );
+    return children;
+  }
+});
+function getInnerBlock(block) {
+  if (isVaporComponent(block)) {
+    return block;
+  } else if (isInteropFragment(block)) {
+    return block.vnode;
+  } else if (isFragment(block)) {
+    return getInnerBlock(block.nodes);
+  }
+}
+function isInteropFragment(block) {
+  return !!(isFragment(block) && block.vnode);
+}
+function findInteropFragment(block) {
+  if (isInteropFragment(block)) {
+    return block;
+  }
+  if (isFragment(block)) {
+    return findInteropFragment(block.nodes);
+  }
+}
+function getInstanceFromCache(cached) {
+  if (isVaporComponent(cached)) {
+    return cached;
+  }
+  return cached.vnode.component;
+}
+function activate(instance, parentNode, anchor) {
+  insert(instance.block, parentNode, anchor);
+  queuePostFlushCb(() => {
+    instance.isDeactivated = false;
+    if (instance.a) invokeArrayFns(instance.a);
+  });
+  if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
+    devtoolsComponentAdded(instance);
+  }
+}
+function deactivate(instance, container) {
+  insert(instance.block, container);
+  queuePostFlushCb(() => {
+    if (instance.da) invokeArrayFns(instance.da);
+    instance.isDeactivated = true;
+  });
+  if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
+    devtoolsComponentAdded(instance);
+  }
+}
+function findParentKeepAlive(instance) {
+  let parent = instance;
+  while (parent) {
+    if (isKeepAlive(parent)) {
+      return parent;
+    }
+    parent = parent.parent;
+  }
+  return null;
 }
 
 const interopKey = Symbol(`interop`);
 const vaporInteropImpl = {
   mount(vnode, container, anchor, parentComponent) {
-    const selfAnchor = vnode.el = vnode.anchor = createTextNode();
-    container.insertBefore(selfAnchor, anchor);
+    let selfAnchor = vnode.el = vnode.anchor = createTextNode();
+    if (isHydrating) {
+      queuePostFlushCb(() => container.insertBefore(selfAnchor, anchor));
+    } else {
+      container.insertBefore(selfAnchor, anchor);
+    }
     const prev = currentInstance;
     simpleSetCurrentInstance(parentComponent);
-    const propsRef = shallowRef(vnode.props);
+    const props = {};
+    for (const key in vnode.props) {
+      if (!isReservedProp(key)) {
+        props[key] = vnode.props[key];
+      }
+    }
+    const propsRef = shallowRef(props);
     const slotsRef = shallowRef(vnode.children);
     const dynamicPropSource = [
       () => propsRef.value
@@ -573,10 +1763,20 @@ const vaporInteropImpl = {
       {
         _: slotsRef
         // pass the slots ref
-      }
+      },
+      void 0,
+      void 0,
+      parentComponent ? parentComponent.appContext : vnode.appContext
     );
     instance.rawPropsRef = propsRef;
     instance.rawSlotsRef = slotsRef;
+    if (isKeepAlive(parentComponent)) instance.shapeFlag = vnode.shapeFlag;
+    if (vnode.transition) {
+      setTransitionHooks(
+        instance,
+        vnode.transition
+      );
+    }
     mountComponent(instance, container, selfAnchor);
     simpleSetCurrentInstance(prev);
     return instance;
@@ -604,11 +1804,16 @@ const vaporInteropImpl = {
    */
   slot(n1, n2, container, anchor) {
     if (!n1) {
-      const selfAnchor = n2.el = n2.anchor = createTextNode();
-      insert(selfAnchor, container, anchor);
+      let selfAnchor;
       const { slot, fallback } = n2.vs;
       const propsRef = n2.vs.ref = shallowRef(n2.props);
       const slotBlock = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler));
+      if (fallback && isFragment(slotBlock)) {
+        setFragmentFallback(slotBlock, createFallback(fallback));
+        selfAnchor = slotBlock.anchor;
+      }
+      if (!selfAnchor) selfAnchor = createTextNode();
+      insert(n2.el = n2.anchor = selfAnchor, container, anchor);
       insert(n2.vb = slotBlock, container, selfAnchor);
     } else {
       n2.el = n2.anchor = n1.anchor;
@@ -619,6 +1824,44 @@ const vaporInteropImpl = {
   move(vnode, container, anchor) {
     insert(vnode.vb || vnode.component, container, anchor);
     insert(vnode.anchor, container, anchor);
+  },
+  hydrate(vnode, node, container, anchor, parentComponent) {
+    hydrateNode(
+      node,
+      () => this.mount(vnode, container, anchor, parentComponent)
+    );
+    return _next(node);
+  },
+  hydrateSlot(vnode, node) {
+    const { slot } = vnode.vs;
+    const propsRef = vnode.vs.ref = shallowRef(vnode.props);
+    hydrateNode(node, () => {
+      vnode.vb = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler));
+      vnode.anchor = vnode.el = currentHydrationNode;
+      if (!!(process.env.NODE_ENV !== "production") && !vnode.anchor) {
+        throw new Error(
+          `Failed to locate slot anchor. this is likely a Vue internal bug.`
+        );
+      }
+    });
+    return _next(vnode.anchor);
+  },
+  setTransitionHooks(component, hooks) {
+    setTransitionHooks(component, hooks);
+  },
+  activate(vnode, container, anchor, parentComponent) {
+    const cached = parentComponent.ctx.getCachedComponent(
+      vnode
+    );
+    vnode.el = cached.el;
+    vnode.component = cached.component;
+    vnode.anchor = cached.anchor;
+    activate(vnode.component, container, anchor);
+    insert(vnode.anchor, container, anchor);
+  },
+  deactivate(vnode, container) {
+    deactivate(vnode.component, container);
+    insert(vnode.anchor, container);
   }
 };
 const vaporSlotPropsProxyHandler = {
@@ -641,16 +1884,20 @@ const vaporSlotsProxyHandler = {
     return slot;
   }
 };
-function createVDOMComponent(internals, component, rawProps, rawSlots) {
+let vdomHydrateNode;
+function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots) {
   const frag = new VaporFragment([]);
-  const vnode = createVNode(
+  const vnode = frag.vnode = createVNode(
     component,
-    rawProps && new Proxy(rawProps, rawPropsProxyHandlers)
+    rawProps && extend({}, new Proxy(rawProps, rawPropsProxyHandlers))
   );
   const wrapper = new VaporComponentInstance(
     { props: component.props },
     rawProps,
-    rawSlots
+    rawSlots,
+    parentComponent ? parentComponent.appContext : void 0,
+    void 0,
+    parentComponent
   );
   vnode.vi = (instance) => {
     instance.props = shallowReactive(wrapper.props);
@@ -662,35 +1909,85 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
     }
     instance.slots = wrapper.slots === EMPTY_OBJ ? EMPTY_OBJ : new Proxy(wrapper.slots, vaporSlotsProxyHandler);
   };
+  let rawRef = null;
   let isMounted = false;
-  const parentInstance = currentInstance;
-  const unmount = (parentNode) => {
+  const unmount = (parentNode, transition) => {
+    if (rawRef) setRef$1(rawRef, null, null, vnode, true);
+    if (transition) setTransitionHooks$1(vnode, transition);
+    if (vnode.shapeFlag & 256) {
+      deactivate$1(
+        vnode,
+        findParentKeepAlive(parentComponent).getStorageContainer(),
+        internals,
+        parentComponent,
+        null
+      );
+      return;
+    }
     internals.umt(vnode.component, null, !!parentNode);
   };
-  frag.insert = (parentNode, anchor) => {
-    if (!isMounted) {
-      internals.mt(
+  frag.hydrate = () => {
+    hydrateVNode(vnode, parentComponent);
+    onScopeDispose(unmount, true);
+    isMounted = true;
+    frag.nodes = vnode.el;
+  };
+  vnode.scopeId = currentInstance && currentInstance.type.__scopeId || null;
+  vnode.slotScopeIds = currentSlotScopeIds;
+  frag.insert = (parentNode, anchor, transition) => {
+    if (isHydrating) return;
+    if (vnode.shapeFlag & 512) {
+      activate$1(
         vnode,
         parentNode,
         anchor,
-        parentInstance,
+        internals,
+        parentComponent,
         null,
         void 0,
         false
       );
-      onScopeDispose(unmount, true);
-      isMounted = true;
     } else {
-      internals.m(
-        vnode,
-        parentNode,
-        anchor,
-        2,
-        parentInstance
-      );
+      const prev = currentInstance;
+      simpleSetCurrentInstance(parentComponent);
+      if (!isMounted) {
+        if (transition) setTransitionHooks$1(vnode, transition);
+        internals.mt(
+          vnode,
+          parentNode,
+          anchor,
+          parentComponent,
+          null,
+          void 0,
+          false
+        );
+        if (rawRef) setRef$1(rawRef, null, null, vnode);
+        onScopeDispose(unmount, true);
+        isMounted = true;
+      } else {
+        internals.m(
+          vnode,
+          parentNode,
+          anchor,
+          2,
+          parentComponent
+        );
+      }
+      simpleSetCurrentInstance(prev);
     }
+    frag.nodes = vnode.el;
   };
   frag.remove = unmount;
+  frag.setRef = (instance, ref, refFor, refKey) => {
+    rawRef = normalizeRef(
+      {
+        ref,
+        ref_for: refFor,
+        ref_key: refKey
+      },
+      instance
+    );
+  };
   return frag;
 }
 function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallback) {
@@ -698,15 +1995,51 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
   let isMounted = false;
   let fallbackNodes;
   let oldVNode = null;
+  frag.fallback = fallback;
   frag.insert = (parentNode, anchor) => {
+    if (isHydrating) return;
     if (!isMounted) {
-      renderEffect(() => {
-        const vnode = renderSlot(
+      render(parentNode, anchor);
+      isMounted = true;
+    } else {
+      internals.m(
+        oldVNode,
+        parentNode,
+        anchor,
+        2,
+        parentComponent
+      );
+    }
+    frag.remove = (parentNode2) => {
+      if (fallbackNodes) {
+        remove(fallbackNodes, parentNode2);
+      } else if (oldVNode) {
+        internals.um(oldVNode, parentComponent, null);
+      }
+    };
+  };
+  const render = (parentNode, anchor) => {
+    renderEffect(() => {
+      let vnode;
+      let isValidSlot = false;
+      if (slotsRef.value) {
+        vnode = renderSlot(
           slotsRef.value,
           isFunction(name) ? name() : name,
           props
         );
-        if (vnode.children.length) {
+        let children = vnode.children;
+        ensureVaporSlotFallback(children, fallback);
+        isValidSlot = children.length > 0;
+      }
+      if (isValidSlot) {
+        if (isHydrating) {
+          if (isVNode(vnode)) {
+            hydrateVNode(vnode, parentComponent);
+            oldVNode = vnode;
+            frag.nodes = vnode.el;
+          }
+        } else {
           if (fallbackNodes) {
             remove(fallbackNodes, parentNode);
             fallbackNodes = void 0;
@@ -716,36 +2049,41 @@ function renderVDOMSlot(internals, slotsRef, name, props, parentComponent, fallb
             vnode,
             parentNode,
             anchor,
-            parentComponent
+            parentComponent,
+            null,
+            // parentSuspense
+            void 0,
+            // namespace
+            vnode.slotScopeIds
+            // pass slotScopeIds for :slotted styles
           );
           oldVNode = vnode;
-        } else {
-          if (fallback && !fallbackNodes) {
+          frag.nodes = vnode.el;
+        }
+      } else {
+        fallback = frag.fallback;
+        if (fallback && !fallbackNodes) {
+          fallbackNodes = fallback(internals, parentComponent);
+          if (isHydrating) {
+            if (isVNode(fallbackNodes)) {
+              hydrateVNode(fallbackNodes, parentComponent);
+              frag.nodes = fallbackNodes.el;
+            }
+          } else {
             if (oldVNode) {
               internals.um(oldVNode, parentComponent, null, true);
             }
-            insert(fallbackNodes = fallback(props), parentNode, anchor);
+            insert(fallbackNodes, parentNode, anchor);
+            frag.nodes = fallbackNodes;
           }
-          oldVNode = null;
         }
-      });
-      isMounted = true;
-    } else {
-      internals.m(
-        oldVNode,
-        parentNode,
-        anchor,
-        2,
-        parentComponent
-      );
-    }
-    frag.remove = (parentNode2) => {
-      if (fallbackNodes) {
-        remove(fallbackNodes, parentNode2);
-      } else if (oldVNode) {
-        internals.um(oldVNode, parentComponent, null);
+        oldVNode = null;
       }
-    };
+    });
+  };
+  frag.hydrate = () => {
+    render();
+    isMounted = true;
   };
   return frag;
 }
@@ -757,10 +2095,49 @@ const vaporInteropPlugin = (app) => {
     vdomSlot: renderVDOMSlot.bind(null, internals)
   });
   const mount = app.mount;
-  app.mount = (...args) => {
+  app.mount = ((...args) => {
     optimizePropertyLookup();
     return mount(...args);
-  };
+  });
+};
+function hydrateVNode(vnode, parentComponent) {
+  locateHydrationNode();
+  let node = currentHydrationNode;
+  while (isComment(node, "[") && // vnode is not a fragment
+  vnode.type !== Fragment && // not inside vdom slot
+  !(isVaporComponent(parentComponent) && isRef(parentComponent.rawSlots._))) {
+    node = node.nextSibling;
+  }
+  if (currentHydrationNode !== node) setCurrentHydrationNode(node);
+  if (!vdomHydrateNode) vdomHydrateNode = ensureHydrationRenderer().hydrateNode;
+  const nextNode = vdomHydrateNode(
+    currentHydrationNode,
+    vnode,
+    parentComponent,
+    null,
+    null,
+    false
+  );
+  if (nextNode) setCurrentHydrationNode(nextNode);
+  else advanceHydrationNode(node);
+}
+const createFallback = (fallback) => (internals, parentComponent) => {
+  const fallbackNodes = fallback();
+  if (isArray(fallbackNodes) && fallbackNodes.every(isVNode)) {
+    const frag = new VaporFragment([]);
+    frag.insert = (parentNode, anchor) => {
+      fallbackNodes.forEach((vnode) => {
+        internals.p(null, vnode, parentNode, anchor, parentComponent);
+      });
+    };
+    frag.remove = (parentNode) => {
+      fallbackNodes.forEach((vnode) => {
+        internals.um(vnode, parentComponent, null, true);
+      });
+    };
+    return frag;
+  }
+  return fallbackNodes;
 };
 
 function normalizeEmitsOptions(comp) {
@@ -802,7 +2179,7 @@ function propGetter(rawProps, key) {
 function resolveSource(source) {
   return isFunction(source) ? source() : source;
 }
-function getPropsProxyHandlers(comp) {
+function getPropsProxyHandlers(comp, once) {
   if (comp.__propsHandlers) {
     return comp.__propsHandlers;
   }
@@ -840,7 +2217,7 @@ function getPropsProxyHandlers(comp) {
         return resolvePropValue(
           propsOptions,
           key,
-          rawProps[rawKey](),
+          resolveSource(rawProps[rawKey]),
           instance,
           resolveDefault
         );
@@ -855,8 +2232,14 @@ function getPropsProxyHandlers(comp) {
       true
     );
   };
+  const getPropValue = once ? (...args) => {
+    pauseTracking();
+    const value = getProp(...args);
+    resetTracking();
+    return value;
+  } : getProp;
   const propsHandlers = propsOptions ? {
-    get: (target, key) => getProp(target, key),
+    get: (target, key) => getPropValue(target, key),
     has: (_, key) => isProp(key),
     ownKeys: () => Object.keys(propsOptions),
     getOwnPropertyDescriptor(target, key) {
@@ -864,7 +2247,7 @@ function getPropsProxyHandlers(comp) {
         return {
           configurable: true,
           enumerable: true,
-          get: () => getProp(target, key)
+          get: () => getPropValue(target, key)
         };
       }
     }
@@ -887,8 +2270,14 @@ function getPropsProxyHandlers(comp) {
       return false;
     }
   };
+  const getAttrValue = once ? (...args) => {
+    pauseTracking();
+    const value = getAttr(...args);
+    resetTracking();
+    return value;
+  } : getAttr;
   const attrsHandlers = {
-    get: (target, key) => getAttr(target.rawProps, key),
+    get: (target, key) => getAttrValue(target.rawProps, key),
     has: (target, key) => hasAttr(target.rawProps, key),
     ownKeys: (target) => getKeysFromRawProps(target.rawProps).filter(isAttr),
     getOwnPropertyDescriptor(target, key) {
@@ -896,7 +2285,7 @@ function getPropsProxyHandlers(comp) {
         return {
           configurable: true,
           enumerable: true,
-          get: () => getAttr(target.rawProps, key)
+          get: () => getAttrValue(target.rawProps, key)
         };
       }
     }
@@ -931,10 +2320,11 @@ function getAttrFromRawProps(rawProps, key) {
     }
   }
   if (hasOwn(rawProps, key)) {
+    const value = resolveSource(rawProps[key]);
     if (merged) {
-      merged.push(rawProps[key]());
+      merged.push(value);
     } else {
-      return rawProps[key]();
+      return value;
     }
   }
   if (merged && merged.length) {
@@ -1025,7 +2415,7 @@ function resolveDynamicProps(props) {
   const mergedRawProps = {};
   for (const key in props) {
     if (key !== "$") {
-      mergedRawProps[key] = props[key]();
+      mergedRawProps[key] = resolveSource(props[key]);
     }
   }
   if (props.$) {
@@ -1047,148 +2437,431 @@ function resolveDynamicProps(props) {
       }
     }
   }
-  return mergedRawProps;
-}
-function propsSetDevTrap(_, key) {
-  warn(
-    `Attempt to mutate prop ${JSON.stringify(key)} failed. Props are readonly.`
-  );
-  return true;
+  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)
+      };
+    }
+  }
+};
+
+const VaporTeleportImpl = {
+  name: "VaporTeleport",
+  __isTeleport: true,
+  __vapor: true,
+  process(props, slots) {
+    return new TeleportFragment(props, slots);
+  }
+};
+class TeleportFragment extends VaporFragment {
+  constructor(props, slots) {
+    super([]);
+    this.insert = (container, anchor) => {
+      if (isHydrating) return;
+      this.placeholder = !!(process.env.NODE_ENV !== "production") ? createComment("teleport start") : createTextNode();
+      insert(this.placeholder, container, anchor);
+      insert(this.anchor, container, anchor);
+      this.handlePropsUpdate();
+    };
+    this.remove = (parent = this.parent) => {
+      if (this.nodes) {
+        remove(this.nodes, this.mountContainer);
+        this.nodes = [];
+      }
+      if (this.targetStart) {
+        remove(this.targetStart, this.target);
+        this.targetStart = void 0;
+        remove(this.targetAnchor, this.target);
+        this.targetAnchor = void 0;
+      }
+      if (this.anchor) {
+        remove(this.anchor, this.anchor.parentNode);
+        this.anchor = void 0;
+      }
+      if (this.placeholder) {
+        remove(this.placeholder, parent);
+        this.placeholder = void 0;
+      }
+      this.mountContainer = void 0;
+      this.mountAnchor = void 0;
+    };
+    this.hydrate = () => {
+      const target = this.target = resolveTeleportTarget(
+        this.resolvedProps,
+        querySelector
+      );
+      const disabled = isTeleportDisabled(this.resolvedProps);
+      this.placeholder = currentHydrationNode;
+      if (target) {
+        const targetNode = target._lpa || target.firstChild;
+        if (disabled) {
+          this.hydrateDisabledTeleport(targetNode);
+        } else {
+          this.anchor = locateTeleportEndAnchor();
+          this.mountContainer = target;
+          let targetAnchor = targetNode;
+          while (targetAnchor) {
+            if (targetAnchor && targetAnchor.nodeType === 8) {
+              if (targetAnchor.data === "teleport start anchor") {
+                this.targetStart = targetAnchor;
+              } else if (targetAnchor.data === "teleport anchor") {
+                this.mountAnchor = this.targetAnchor = targetAnchor;
+                target._lpa = this.targetAnchor && this.targetAnchor.nextSibling;
+                break;
+              }
+            }
+            targetAnchor = targetAnchor.nextSibling;
+          }
+          if (targetNode) {
+            setCurrentHydrationNode(targetNode.nextSibling);
+          }
+          if (!this.targetAnchor) {
+            this.mount(target);
+          } else {
+            this.initChildren();
+          }
+        }
+      } else if (disabled) {
+        this.hydrateDisabledTeleport(currentHydrationNode);
+      }
+      advanceHydrationNode(this.anchor);
+    };
+    this.rawProps = props;
+    this.rawSlots = slots;
+    this.parentComponent = currentInstance;
+    this.anchor = isHydrating ? void 0 : !!(process.env.NODE_ENV !== "production") ? createComment("teleport end") : createTextNode();
+    renderEffect(() => {
+      this.resolvedProps = extend(
+        {},
+        new Proxy(
+          this.rawProps,
+          rawPropsProxyHandlers
+        )
+      );
+      this.handlePropsUpdate();
+    });
+    if (!isHydrating) {
+      this.initChildren();
+    }
+  }
+  get parent() {
+    return this.anchor ? this.anchor.parentNode : null;
+  }
+  initChildren() {
+    renderEffect(() => {
+      this.handleChildrenUpdate(
+        this.rawSlots.default && this.rawSlots.default()
+      );
+    });
+    if (!!(process.env.NODE_ENV !== "production")) {
+      const nodes = this.nodes;
+      if (isVaporComponent(nodes)) {
+        nodes.parentTeleport = this;
+      } else if (isArray(nodes)) {
+        nodes.forEach(
+          (node) => isVaporComponent(node) && (node.parentTeleport = this)
+        );
+      }
+    }
+  }
+  handleChildrenUpdate(children) {
+    if (!this.parent || isHydrating) {
+      this.nodes = children;
+      return;
+    }
+    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);
+      }
+      insert(
+        this.nodes,
+        this.mountContainer = parent,
+        this.mountAnchor = anchor
+      );
+    };
+    const mountToTarget = () => {
+      const target = this.target = resolveTeleportTarget(
+        this.resolvedProps,
+        querySelector
+      );
+      if (target) {
+        if (
+          // initial mount into target
+          !this.targetAnchor || // target changed
+          this.targetAnchor.parentNode !== target
+        ) {
+          insert(this.targetStart = createTextNode(""), target);
+          insert(this.targetAnchor = createTextNode(""), target);
+        }
+        if (this.parentComponent && this.parentComponent.isCE) {
+          (this.parentComponent.ce._teleportTargets || (this.parentComponent.ce._teleportTargets = /* @__PURE__ */ new Set())).add(target);
+        }
+        mount(target, this.targetAnchor);
+      } else if (!!(process.env.NODE_ENV !== "production")) {
+        warn(
+          `Invalid Teleport target on ${this.targetAnchor ? "update" : "mount"}:`,
+          target,
+          `(${typeof target})`
+        );
+      }
+    };
+    if (isTeleportDisabled(this.resolvedProps)) {
+      mount(this.parent, this.anchor);
+    } 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);
+      } else {
+        mountToTarget();
+      }
+    }
+  }
+  hydrateDisabledTeleport(targetNode) {
+    let nextNode = this.placeholder.nextSibling;
+    setCurrentHydrationNode(nextNode);
+    this.mountAnchor = this.anchor = locateTeleportEndAnchor(nextNode);
+    this.mountContainer = this.anchor.parentNode;
+    this.targetStart = targetNode;
+    this.targetAnchor = targetNode && targetNode.nextSibling;
+    this.initChildren();
+  }
+  mount(target) {
+    target.appendChild(this.targetStart = createTextNode(""));
+    target.appendChild(
+      this.mountAnchor = this.targetAnchor = createTextNode("")
+    );
+    if (!isMismatchAllowed(target, 1)) {
+      if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) {
+        warn(
+          `Hydration children mismatch on`,
+          target,
+          `
+Server rendered element contains fewer child nodes than client nodes.`
+        );
+      }
+      logMismatchError();
+    }
+    runWithoutHydration(this.initChildren.bind(this));
+  }
 }
-function propsDeleteDevTrap(_, key) {
-  warn(
-    `Attempt to delete prop ${JSON.stringify(key)} failed. Props are readonly.`
-  );
-  return true;
+function isVaporTeleport(value) {
+  return value === VaporTeleportImpl;
 }
-const rawPropsProxyHandlers = {
-  get: getAttrFromRawProps,
-  has: hasAttrFromRawProps,
-  ownKeys: getKeysFromRawProps,
-  getOwnPropertyDescriptor(target, key) {
-    if (hasAttrFromRawProps(target, key)) {
-      return {
-        configurable: true,
-        enumerable: true,
-        get: () => getAttrFromRawProps(target, key)
-      };
+function locateTeleportEndAnchor(node = currentHydrationNode) {
+  while (node) {
+    if (isComment(node, "teleport end")) {
+      return node;
     }
+    node = node.nextSibling;
   }
-};
+  return null;
+}
 
-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));
-        }
+function isBlock(val) {
+  return val instanceof Node || isArray(val) || isVaporComponent(val) || isFragment(val);
+}
+function isValidBlock(block) {
+  if (block instanceof Node) {
+    return !(block instanceof Comment);
+  } else if (isVaporComponent(block)) {
+    return isValidBlock(block.block);
+  } else if (isArray(block)) {
+    return block.length > 0 && block.some(isValidBlock);
+  } else {
+    return isValidBlock(block.nodes);
+  }
+}
+function insert(block, parent, anchor = null, parentSuspense) {
+  anchor = anchor === 0 ? parent.$fc || _child(parent) : anchor;
+  if (block instanceof Node) {
+    if (!isHydrating) {
+      if (block instanceof Element && block.$transition && !block.$transition.disabled) {
+        performTransitionEnter(
+          block,
+          block.$transition,
+          () => parent.insertBefore(block, anchor),
+          parentSuspense
+        );
+      } else {
+        parent.insertBefore(block, anchor);
       }
     }
-    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];
-      }
+  } else if (isVaporComponent(block)) {
+    if (block.isMounted && !block.isDeactivated) {
+      insert(block.block, parent, anchor);
+    } else {
+      mountComponent(block, parent, anchor);
+    }
+  } else if (isArray(block)) {
+    for (const b of block) {
+      insert(b, parent, anchor);
+    }
+  } else {
+    if (block.anchor) {
+      insert(block.anchor, parent, anchor);
+      anchor = block.anchor;
+    }
+    if (block.insert) {
+      block.insert(parent, anchor, block.$transition);
+    } else {
+      insert(block.nodes, parent, anchor, parentSuspense);
     }
-  }
-  if (hasOwn(target, key)) {
-    return target[key];
   }
 }
-function createSlot(name, rawProps, fallback) {
-  const _insertionParent = insertionParent;
-  const _insertionAnchor = insertionAnchor;
-  if (isHydrating) {
-    locateHydrationNode();
+function prepend(parent, ...blocks) {
+  let i = blocks.length;
+  while (i--) insert(blocks[i], parent, 0);
+}
+function remove(block, parent) {
+  if (block instanceof Node) {
+    if (block.$transition && block instanceof Element) {
+      performTransitionLeave(
+        block,
+        block.$transition,
+        () => parent && parent.removeChild(block)
+      );
+    } else {
+      parent && parent.removeChild(block);
+    }
+  } else if (isVaporComponent(block)) {
+    unmountComponent(block, parent);
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      remove(block[i], parent);
+    }
   } else {
-    resetInsertionState();
+    if (block.remove) {
+      block.remove(parent, block.$transition);
+    } else {
+      remove(block.nodes, parent);
+    }
+    if (block.anchor) remove(block.anchor, parent);
+    if (block.scope) {
+      block.scope.stop();
+      const scopes = block.keptAliveScopes;
+      if (scopes) {
+        scopes.forEach((scope) => scope.stop());
+        scopes.clear();
+      }
+    }
   }
-  const instance = currentInstance;
-  const rawSlots = instance.rawSlots;
-  const slotProps = rawProps ? new Proxy(rawProps, rawPropsProxyHandlers) : EMPTY_OBJ;
-  let fragment;
-  if (isRef(rawSlots._)) {
-    fragment = instance.appContext.vapor.vdomSlot(
-      rawSlots._,
-      name,
-      slotProps,
-      instance,
-      fallback
+}
+function normalizeBlock(block) {
+  if (!!!(process.env.NODE_ENV !== "production") && true) {
+    throw new Error(
+      "normalizeBlock should not be used in production code paths"
     );
+  }
+  const nodes = [];
+  if (block instanceof Node) {
+    nodes.push(block);
+  } else if (isArray(block)) {
+    block.forEach((child) => nodes.push(...normalizeBlock(child)));
+  } else if (isVaporComponent(block)) {
+    nodes.push(...normalizeBlock(block.block));
   } else {
-    fragment = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("slot") : new DynamicFragment();
-    const isDynamicName = isFunction(name);
-    const renderSlot = () => {
-      const slot = getSlot(rawSlots, isFunction(name) ? name() : name);
-      if (slot) {
-        fragment.update(
-          slot._bound || (slot._bound = () => {
-            const slotContent = slot(slotProps);
-            if (slotContent instanceof DynamicFragment) {
-              slotContent.fallback = fallback;
-            }
-            return slotContent;
-          })
-        );
-      } else {
-        fragment.update(fallback);
-      }
-    };
-    if (isDynamicName || rawSlots.$) {
-      renderEffect(renderSlot);
+    if (block instanceof TeleportFragment) {
+      nodes.push(block.placeholder, block.anchor);
     } else {
-      renderSlot();
+      nodes.push(...normalizeBlock(block.nodes));
+      block.anchor && nodes.push(block.anchor);
     }
   }
-  if (!isHydrating && _insertionParent) {
-    insert(fragment, _insertionParent, _insertionAnchor);
+  return nodes;
+}
+function findBlockNode(block) {
+  let { parentNode, nextSibling: nextNode } = findLastChild(block);
+  if (nextNode && isComment(nextNode, "]") && isFragmentBlock(block)) {
+    nextNode = nextNode.nextSibling;
+  }
+  return {
+    parentNode,
+    nextNode
+  };
+}
+function findLastChild(node) {
+  if (node && node instanceof Node) {
+    return node;
+  } else if (isArray(node)) {
+    return findLastChild(node[node.length - 1]);
+  } else if (isVaporComponent(node)) {
+    return findLastChild(node.block);
+  } else {
+    if (node.anchor) return node.anchor;
+    return findLastChild(node.nodes);
+  }
+}
+function isFragmentBlock(block) {
+  if (isArray(block)) {
+    return true;
+  } else if (isVaporComponent(block)) {
+    return isFragmentBlock(block.block);
+  } else if (isFragment(block)) {
+    return isFragmentBlock(block.nodes);
+  }
+  return false;
+}
+function setScopeId(block, scopeIds) {
+  if (block instanceof Element) {
+    for (const id of scopeIds) {
+      block.setAttribute(id, "");
+    }
+  } else if (isVaporComponent(block)) {
+    setScopeId(block.block, scopeIds);
+  } else if (isArray(block)) {
+    for (const b of block) {
+      setScopeId(b, scopeIds);
+    }
+  } else if (isFragment(block)) {
+    setScopeId(block.nodes, scopeIds);
+  }
+}
+function setComponentScopeId(instance) {
+  const { parent, scopeId } = instance;
+  if (!parent || !scopeId) return;
+  if (isArray(instance.block) && instance.block.length > 1) return;
+  const scopeIds = [];
+  const parentScopeId = parent && parent.type.__scopeId;
+  if (parentScopeId !== scopeId) {
+    scopeIds.push(scopeId);
+  } else {
+    if (parentScopeId) scopeIds.push(parentScopeId);
+  }
+  if (parent.subTree && parent.subTree.component === instance && parent.vnode.scopeId) {
+    scopeIds.push(parent.vnode.scopeId);
+    const inheritedScopeIds = getInheritedScopeIds(parent.vnode, parent.parent);
+    scopeIds.push(...inheritedScopeIds);
+  }
+  if (scopeIds.length > 0) {
+    setScopeId(instance.block, scopeIds);
   }
-  return fragment;
 }
 
 function hmrRerender(instance) {
@@ -1197,6 +2870,10 @@ function hmrRerender(instance) {
   const anchor = normalized[normalized.length - 1].nextSibling;
   remove(instance.block, parent);
   const prev = setCurrentInstance(instance);
+  if (instance.renderEffects) {
+    instance.renderEffects.forEach((e) => e.stop());
+    instance.renderEffects = [];
+  }
   pushWarningContext(instance);
   devRender(instance);
   popWarningContext();
@@ -1208,7 +2885,8 @@ function hmrReload(instance, newComp) {
   const parent = normalized[0].parentNode;
   const anchor = normalized[normalized.length - 1].nextSibling;
   unmountComponent(instance, parent);
-  const prev = setCurrentInstance(instance.parent);
+  const parentInstance = instance.parent;
+  const prev = setCurrentInstance(parentInstance);
   const newInstance = createComponent(
     newComp,
     instance.rawProps,
@@ -1217,43 +2895,106 @@ function hmrReload(instance, newComp) {
   );
   setCurrentInstance(...prev);
   mountComponent(newInstance, parent, anchor);
+  updateParentBlockOnHmrReload(parentInstance, instance, newInstance);
+  updateParentTeleportOnHmrReload(instance, newInstance);
+}
+function updateParentBlockOnHmrReload(parentInstance, instance, newInstance) {
+  if (parentInstance) {
+    if (parentInstance.block === instance) {
+      parentInstance.block = newInstance;
+    } else if (isArray(parentInstance.block)) {
+      for (let i = 0; i < parentInstance.block.length; i++) {
+        if (parentInstance.block[i] === instance) {
+          parentInstance.block[i] = newInstance;
+          break;
+        }
+      }
+    }
+  }
+}
+function updateParentTeleportOnHmrReload(instance, newInstance) {
+  const teleport = instance.parentTeleport;
+  if (teleport) {
+    newInstance.parentTeleport = teleport;
+    if (teleport.nodes === instance) {
+      teleport.nodes = newInstance;
+    } else if (isArray(teleport.nodes)) {
+      for (let i = 0; i < teleport.nodes.length; i++) {
+        if (teleport.nodes[i] === instance) {
+          teleport.nodes[i] = newInstance;
+          break;
+        }
+      }
+    }
+  }
 }
 
-function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext = currentInstance && currentInstance.appContext || emptyContext) {
+function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appContext = currentInstance && currentInstance.appContext || emptyContext) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
   if (isHydrating) {
     locateHydrationNode();
   } else {
     resetInsertionState();
   }
+  const parentInstance = getParentInstance();
+  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(parentInstance) && parentInstance.hasFallthrough) {
+    const attrs = parentInstance.attrs;
+    if (rawProps) {
+      (rawProps.$ || (rawProps.$ = [])).push(
+        () => attrs
+      );
+    } else {
+      rawProps = { $: [() => attrs] };
+    }
+  }
+  if (parentInstance && parentInstance.vapor && isKeepAlive(parentInstance)) {
+    const cached = parentInstance.getCachedComponent(
+      component
+    );
+    if (cached) return cached;
+  }
   if (appContext.vapor && !component.__vapor) {
+    const prevSlotConsumer2 = setCurrentSlotConsumer(null);
     const frag = appContext.vapor.vdomMount(
       component,
+      parentInstance,
       rawProps,
       rawSlots
     );
-    if (!isHydrating && _insertionParent) {
-      insert(frag, _insertionParent, _insertionAnchor);
+    setCurrentSlotConsumer(prevSlotConsumer2);
+    if (!isHydrating) {
+      if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+    } else {
+      frag.hydrate();
+      if (_isLastInsertion) {
+        advanceHydrationNode(_insertionParent);
+      }
     }
     return frag;
   }
-  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(currentInstance) && currentInstance.hasFallthrough) {
-    const attrs = currentInstance.attrs;
-    if (rawProps) {
-      (rawProps.$ || (rawProps.$ = [])).push(
-        () => attrs
-      );
+  if (isVaporTeleport(component)) {
+    const frag = component.process(rawProps, rawSlots);
+    if (!isHydrating) {
+      if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
     } else {
-      rawProps = { $: [() => attrs] };
+      frag.hydrate();
+      if (_isLastInsertion) {
+        advanceHydrationNode(_insertionParent);
+      }
     }
+    return frag;
   }
   const instance = new VaporComponentInstance(
     component,
     rawProps,
     rawSlots,
-    appContext
+    appContext,
+    once,
+    parentInstance
   );
+  const prevSlotConsumer = setCurrentSlotConsumer(null);
   if (!!(process.env.NODE_ENV !== "production") && component.__hmrId) {
     registerHMR(instance);
     instance.isSingleRoot = isSingleRoot;
@@ -1266,6 +3007,46 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext
     instance.propsOptions = normalizePropsOptions(component);
     instance.emitsOptions = normalizeEmitsOptions(component);
   }
+  if (isHydrating && isAsyncWrapper(instance) && component.__asyncHydrate && !component.__asyncResolved) {
+    const el = currentHydrationNode;
+    if (isComment(el, "[")) {
+      const end = _next(locateEndAnchor(el));
+      const block = instance.block = [el];
+      let cur = el;
+      while (true) {
+        let n = _next(cur);
+        if (n && n !== end) {
+          block.push(cur = n);
+        } else {
+          break;
+        }
+      }
+    } else {
+      instance.block = el;
+    }
+    instance.isMounted = true;
+    setCurrentHydrationNode(
+      isComment(el, "[") ? locateEndAnchor(el) : el.nextSibling
+    );
+    component.__asyncHydrate(
+      el,
+      instance,
+      () => setupComponent(instance, component)
+    );
+  } else {
+    setupComponent(instance, component);
+  }
+  setCurrentSlotConsumer(prevSlotConsumer);
+  onScopeDispose$1(() => unmountComponent(instance), true);
+  if (_insertionParent || isHydrating) {
+    mountComponent(instance, _insertionParent, _insertionAnchor);
+  }
+  if (isHydrating && _insertionAnchor !== void 0) {
+    advanceHydrationNode(_insertionParent);
+  }
+  return instance;
+}
+function setupComponent(instance, component) {
   const prevInstance = setCurrentInstance(instance);
   const prevSub = setActiveSub();
   if (!!(process.env.NODE_ENV !== "production")) {
@@ -1302,14 +3083,7 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext
     }
   }
   if (instance.hasFallthrough && component.inheritAttrs !== false && Object.keys(instance.attrs).length) {
-    const el = getRootElement(instance);
-    if (el) {
-      renderEffect(() => {
-        isApplyingFallthroughProps = true;
-        setDynamicProps(el, [instance.attrs]);
-        isApplyingFallthroughProps = false;
-      });
-    }
+    renderEffect(() => applyFallthroughProps(instance.block, instance.attrs));
   }
   setActiveSub(prevSub);
   setCurrentInstance(...prevInstance);
@@ -1317,13 +3091,16 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, appContext
     popWarningContext();
     endMeasure(instance, "init");
   }
-  onScopeDispose$1(() => unmountComponent(instance), true);
-  if (!isHydrating && _insertionParent) {
-    mountComponent(instance, _insertionParent, _insertionAnchor);
-  }
-  return instance;
 }
 let isApplyingFallthroughProps = false;
+function applyFallthroughProps(block, attrs) {
+  const el = getRootElement(block);
+  if (el) {
+    isApplyingFallthroughProps = true;
+    setDynamicProps(el, [attrs]);
+    isApplyingFallthroughProps = false;
+  }
+}
 function devRender(instance) {
   instance.block = (instance.type.render ? callWithErrorHandling(
     instance.type.render,
@@ -1357,16 +3134,16 @@ const emptyContext = {
   provides: /* @__PURE__ */ Object.create(null)
 };
 class VaporComponentInstance {
-  constructor(comp, rawProps, rawSlots, appContext) {
+  constructor(comp, rawProps, rawSlots, appContext, once, parent = currentInstance) {
     this.vapor = true;
     this.uid = nextUid();
     this.type = comp;
-    this.parent = currentInstance;
-    this.root = currentInstance ? currentInstance.root : this;
-    if (currentInstance) {
-      this.appContext = currentInstance.appContext;
-      this.provides = currentInstance.provides;
-      this.ids = currentInstance.ids;
+    this.parent = parent;
+    this.root = parent ? parent.root : this;
+    if (parent) {
+      this.appContext = parent.appContext;
+      this.provides = parent.provides;
+      this.ids = parent.ids;
     } else {
       this.appContext = appContext || emptyContext;
       this.provides = Object.create(this.appContext.provides);
@@ -1382,7 +3159,7 @@ class VaporComponentInstance {
     this.rawProps = rawProps || EMPTY_OBJ;
     this.hasFallthrough = hasFallthroughAttrs(comp, rawProps);
     if (rawProps || comp.props) {
-      const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp);
+      const [propsHandlers, attrsHandlers] = getPropsProxyHandlers(comp, once);
       this.attrs = new Proxy(this, attrsHandlers);
       this.props = comp.props ? new Proxy(this, propsHandlers) : isFunction(comp) ? this.attrs : EMPTY_OBJ;
     } else {
@@ -1390,6 +3167,10 @@ class VaporComponentInstance {
     }
     this.rawSlots = rawSlots || EMPTY_OBJ;
     this.slots = rawSlots ? rawSlots.$ ? new Proxy(rawSlots, dynamicSlotsProxyHandlers) : rawSlots : EMPTY_OBJ;
+    this.scopeId = currentInstance && currentInstance.type.__scopeId;
+    if (comp.ce) {
+      comp.ce(this);
+    }
   }
   /**
    * Expose `getKeysFromRawProps` on the instance so it can be used in code
@@ -1402,47 +3183,100 @@ class VaporComponentInstance {
 function isVaporComponent(value) {
   return value instanceof VaporComponentInstance;
 }
-function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot) {
+function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot, once, appContext) {
   if (!isString(comp)) {
-    return createComponent(comp, rawProps, rawSlots, isSingleRoot);
+    return createComponent(
+      comp,
+      rawProps,
+      rawSlots,
+      isSingleRoot,
+      once,
+      appContext
+    );
   }
+  return createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once);
+}
+function createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
   if (isHydrating) {
     locateHydrationNode();
   } else {
     resetInsertionState();
   }
-  const el = document.createElement(comp);
+  const el = isHydrating ? adoptTemplate(currentHydrationNode, `<${comp}/>`) : createElement(comp);
   el.$root = isSingleRoot;
+  if (!isHydrating) {
+    const scopeId = currentInstance.type.__scopeId;
+    if (scopeId) setScopeId(el, [scopeId]);
+  }
   if (rawProps) {
-    renderEffect(() => {
-      setDynamicProps(el, [resolveDynamicProps(rawProps)]);
-    });
+    const setFn = () => setDynamicProps(el, [resolveDynamicProps(rawProps)]);
+    if (once) setFn();
+    else renderEffect(setFn);
   }
   if (rawSlots) {
-    if (rawSlots.$) ; else {
-      insert(getSlot(rawSlots, "default")(), el);
+    let nextNode = null;
+    if (isHydrating) {
+      nextNode = locateNextNode(el);
+      setCurrentHydrationNode(el.firstChild);
+    }
+    if (rawSlots.$) {
+      const frag = new DynamicFragment(
+        isHydrating ? "" : !!(process.env.NODE_ENV !== "production") ? "slot" : void 0
+      );
+      renderEffect(() => frag.update(getSlot(rawSlots, "default")));
+      if (!isHydrating) insert(frag, el);
+    } else {
+      const block = getSlot(rawSlots, "default")();
+      if (!isHydrating) insert(block, el);
+    }
+    if (isHydrating) {
+      setCurrentHydrationNode(nextNode);
     }
   }
-  if (!isHydrating && _insertionParent) {
-    insert(el, _insertionParent, _insertionAnchor);
+  if (!isHydrating) {
+    if (_insertionParent) insert(el, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
   }
   return el;
 }
 function mountComponent(instance, parent, anchor) {
+  if (instance.shapeFlag & 512) {
+    findParentKeepAlive(instance).activate(instance, parent, anchor);
+    return;
+  }
+  const { root, type } = instance;
+  if (root && root.ce && // @ts-expect-error _def is private
+  root.ce._def.shadowRoot !== false) {
+    root.ce._injectChildStyle(type);
+  }
   if (!!(process.env.NODE_ENV !== "production")) {
     startMeasure(instance, `mount`);
   }
   if (instance.bm) invokeArrayFns(instance.bm);
-  insert(instance.block, parent, anchor);
-  if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m));
+  if (!isHydrating) {
+    insert(instance.block, parent, anchor);
+    setComponentScopeId(instance);
+  }
+  if (instance.m) queuePostFlushCb(instance.m);
+  if (instance.shapeFlag & 256 && instance.a) {
+    queuePostFlushCb(instance.a);
+  }
   instance.isMounted = true;
   if (!!(process.env.NODE_ENV !== "production")) {
     endMeasure(instance, `mount`);
   }
 }
 function unmountComponent(instance, parentNode) {
+  if (parentNode && instance.parent && instance.parent.vapor && instance.shapeFlag & 256) {
+    findParentKeepAlive(instance).deactivate(instance);
+    return;
+  }
   if (instance.isMounted && !instance.isUnmounted) {
     if (!!(process.env.NODE_ENV !== "production") && instance.type.__hmrId) {
       unregisterHMR(instance);
@@ -1452,7 +3286,7 @@ function unmountComponent(instance, parentNode) {
     }
     instance.scope.stop();
     if (instance.um) {
-      queuePostFlushCb(() => invokeArrayFns(instance.um));
+      queuePostFlushCb(instance.um);
     }
     instance.isUnmounted = true;
   }
@@ -1467,9 +3301,7 @@ function getExposed(instance) {
     }));
   }
 }
-function getRootElement({
-  block
-}) {
+function getRootElement(block) {
   if (block instanceof Element) {
     return block;
   }
@@ -1490,11 +3322,12 @@ const mountApp = (app, container) => {
     }
     container.textContent = "";
   }
-  const instance = createComponent(
+  const instance = app._ceComponent || createComponent(
     app._component,
     app._props,
     null,
     false,
+    false,
     app._context
   );
   mountComponent(instance, container);
@@ -1506,11 +3339,12 @@ const hydrateApp = (app, container) => {
   optimizePropertyLookup();
   let instance;
   withHydration(container, () => {
-    instance = createComponent(
+    instance = app._ceComponent || createComponent(
       app._component,
       app._props,
       null,
       false,
+      false,
       app._context
     );
     mountComponent(instance, container);
@@ -1536,7 +3370,12 @@ function postPrepareApp(app) {
   const mount = app.mount;
   app.mount = (container, ...args) => {
     container = normalizeContainer(container);
-    return mount(container, ...args);
+    const proxy = mount(container, ...args);
+    if (container instanceof Element) {
+      container.removeAttribute("v-cloak");
+      container.setAttribute("data-v-app", "");
+    }
+    return proxy;
   };
 }
 const createVaporApp = (comp, props) => {
@@ -1555,38 +3394,274 @@ const createVaporSSRApp = (comp, props) => {
   return app;
 };
 
-/*! #__NO_SIDE_EFFECTS__ */
+function defineVaporAsyncComponent(source) {
+  const {
+    load,
+    getResolvedComp,
+    setPendingRequest,
+    source: {
+      loadingComponent,
+      errorComponent,
+      delay,
+      hydrate: hydrateStrategy,
+      timeout,
+      suspensible = true
+    }
+  } = createAsyncComponentContext(source);
+  return defineVaporComponent({
+    name: "VaporAsyncComponentWrapper",
+    __asyncLoader: load,
+    __asyncHydrate(el, instance, hydrate) {
+      let isHydrated = false;
+      watch(
+        () => instance.attrs,
+        () => {
+          if (isHydrated) return;
+          instance.bu && invokeArrayFns(instance.bu);
+          const parent = parentNode(el);
+          load().then(() => {
+            if (instance.isUnmounted) return;
+            hydrate();
+            if (isComment(el, "[")) {
+              const endAnchor = locateEndAnchor(el);
+              removeFragmentNodes(el, endAnchor);
+              insert(instance.block, parent, endAnchor);
+            } else {
+              insert(instance.block, parent, el);
+              remove(el, parent);
+            }
+          });
+        },
+        { deep: true, once: true }
+      );
+      performAsyncHydrate(
+        el,
+        instance,
+        () => {
+          hydrateNode(el, () => {
+            hydrate();
+            insert(instance.block, parentNode(el), el);
+            isHydrated = true;
+          });
+        },
+        getResolvedComp,
+        load,
+        hydrateStrategy
+      );
+    },
+    get __asyncResolved() {
+      return getResolvedComp();
+    },
+    setup() {
+      const instance = currentInstance;
+      markAsyncBoundary(instance);
+      const frag = !!(process.env.NODE_ENV !== "production") || isHydrating ? new DynamicFragment("async component") : new DynamicFragment();
+      let resolvedComp = getResolvedComp();
+      if (resolvedComp) {
+        frag.update(() => createInnerComp(resolvedComp, instance, frag));
+        return frag;
+      }
+      const onError = (err) => {
+        setPendingRequest(null);
+        handleError(
+          err,
+          instance,
+          13,
+          !errorComponent
+        );
+      };
+      if (suspensible && instance.suspense) ;
+      const { loaded, error, delayed } = useAsyncComponentState(
+        delay,
+        timeout,
+        onError
+      );
+      load().then(() => {
+        loaded.value = true;
+      }).catch((err) => {
+        onError(err);
+        error.value = err;
+      });
+      renderEffect(() => {
+        resolvedComp = getResolvedComp();
+        let render;
+        if (loaded.value && resolvedComp) {
+          render = () => createInnerComp(resolvedComp, instance, frag);
+        } else if (error.value && errorComponent) {
+          render = () => createComponent(errorComponent, { error: () => error.value });
+        } else if (loadingComponent && !delayed.value) {
+          render = () => createComponent(loadingComponent);
+        }
+        if (instance.$transition) frag.$transition = instance.$transition;
+        frag.update(render);
+      });
+      return frag;
+    }
+  });
+}
+function createInnerComp(comp, parent, frag) {
+  const { rawProps, rawSlots, isSingleRoot, appContext, $transition } = parent;
+  const instance = createComponent(
+    comp,
+    rawProps,
+    rawSlots,
+    isSingleRoot,
+    void 0,
+    appContext
+  );
+  if (parent.parent && isKeepAlive(parent.parent)) {
+    parent.parent.cacheComponent(instance);
+    parent.parent.cacheComponent(parent);
+  }
+  if ($transition) setTransitionHooks(instance, $transition);
+  frag && frag.setRef && frag.setRef(instance);
+  return instance;
+}
+
 // @__NO_SIDE_EFFECTS__
-function defineVaporComponent(comp, extraOptions) {
-  if (isFunction(comp)) {
-    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
-      setup: comp,
-      __vapor: true
-    }))();
+function defineVaporCustomElement(options, extraOptions, _createApp) {
+  let Comp = defineVaporComponent(options, extraOptions);
+  if (isPlainObject(Comp)) Comp = extend({}, Comp, extraOptions);
+  class VaporCustomElement extends VaporElement {
+    constructor(initialProps) {
+      super(Comp, initialProps, _createApp);
+    }
+  }
+  VaporCustomElement.def = Comp;
+  return VaporCustomElement;
+}
+const defineVaporSSRCustomElement = (/* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
+  return /* @__PURE__ */ defineVaporCustomElement(options, extraOptions, createVaporSSRApp);
+});
+class VaporElement extends VueElementBase {
+  constructor(def, props = {}, createAppFn = createVaporApp) {
+    super(def, props, createAppFn);
+  }
+  _needsHydration() {
+    if (this.shadowRoot && this._createApp !== createVaporApp) {
+      return true;
+    } else {
+      if (!!(process.env.NODE_ENV !== "production") && this.shadowRoot) {
+        warn(
+          `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineVaporSSRCustomElement\`.`
+        );
+      }
+    }
+    return false;
+  }
+  _mount(def) {
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) && !def.name) {
+      def.name = "VaporElement";
+    }
+    this._app = this._createApp(this._def);
+    this._inheritParentContext();
+    if (this._def.configureApp) {
+      this._def.configureApp(this._app);
+    }
+    if (this.shadowRoot && this._createApp === createVaporSSRApp) {
+      withHydration(this._root, this._createComponent.bind(this));
+    } else {
+      this._createComponent();
+    }
+    this._app.mount(this._root);
+    if (!this.shadowRoot) {
+      this._renderSlots();
+    }
+  }
+  _update() {
+    if (!this._app) return;
+    const renderEffects = this._instance.renderEffects;
+    if (renderEffects) renderEffects.forEach((e) => e.run());
+  }
+  _unmount() {
+    {
+      this._app.unmount();
+    }
+    if (this._instance && this._instance.ce) {
+      this._instance.ce = void 0;
+    }
+    this._app = this._instance = null;
+  }
+  /**
+   * Only called when shadowRoot is false
+   */
+  _updateSlotNodes(replacements) {
+    this._updateFragmentNodes(
+      this._instance.block,
+      replacements
+    );
+  }
+  /**
+   * Replace slot nodes with their replace content
+   * @internal
+   */
+  _updateFragmentNodes(block, replacements) {
+    if (Array.isArray(block)) {
+      block.forEach((item) => this._updateFragmentNodes(item, replacements));
+      return;
+    }
+    if (!isFragment(block)) return;
+    const { nodes } = block;
+    if (Array.isArray(nodes)) {
+      const newNodes = [];
+      for (const node of nodes) {
+        if (node instanceof HTMLSlotElement) {
+          newNodes.push(...replacements.get(node));
+        } else {
+          this._updateFragmentNodes(node, replacements);
+          newNodes.push(node);
+        }
+      }
+      block.nodes = newNodes;
+    } else if (nodes instanceof HTMLSlotElement) {
+      block.nodes = replacements.get(nodes);
+    } else {
+      this._updateFragmentNodes(nodes, replacements);
+    }
+  }
+  _createComponent() {
+    this._def.ce = (instance) => {
+      this._app._ceComponent = this._instance = instance;
+      if (!this.shadowRoot) {
+        this._instance.u = [this._renderSlots.bind(this)];
+      }
+      this._processInstance();
+    };
+    createComponent(
+      this._def,
+      this._props,
+      void 0,
+      void 0,
+      void 0,
+      this._app._context
+    );
   }
-  comp.__vapor = true;
-  return comp;
 }
 
 let t;
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
-function template(html, root) {
+function template(html, root, ns) {
   let node;
   return () => {
     if (isHydrating) {
-      if (!!(process.env.NODE_ENV !== "production") && !currentHydrationNode) {
-        throw new Error("No current hydration node");
-      }
-      return adoptTemplate(currentHydrationNode, html);
+      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");
-      t.innerHTML = html;
-      node = child(t.content);
+      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;
@@ -1597,24 +3672,209 @@ function template(html, root) {
 function createIf(condition, b1, b2, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
-  if (isHydrating) {
-    locateHydrationNode();
-  } else {
-    resetInsertionState();
-  }
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
   let frag;
   if (once) {
     frag = condition() ? b1() : b2 ? b2() : [];
   } else {
-    frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
+    frag = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("if") : new DynamicFragment();
     renderEffect(() => frag.update(condition() ? b1 : b2));
   }
-  if (!isHydrating && _insertionParent) {
-    insert(frag, _insertionParent, _insertionAnchor);
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
+  }
+  return frag;
+}
+
+function createKeyedFragment(key, render) {
+  const _insertionParent = insertionParent;
+  const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("keyed") : new DynamicFragment();
+  renderEffect(() => {
+    frag.update(render, key());
+  });
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
   }
   return frag;
 }
 
+const positionMap = /* @__PURE__ */ new WeakMap();
+const newPositionMap = /* @__PURE__ */ new WeakMap();
+const decorate = (t) => {
+  delete t.props.mode;
+  t.__vapor = true;
+  return t;
+};
+const VaporTransitionGroup = decorate({
+  name: "VaporTransitionGroup",
+  props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
+    tag: String,
+    moveClass: String
+  }),
+  setup(props, { slots }) {
+    const instance = currentInstance;
+    const state = useTransitionState();
+    const cssTransitionProps = resolveTransitionProps(props);
+    let prevChildren;
+    let children;
+    const slottedBlock = slots.default && slots.default();
+    onBeforeUpdate(() => {
+      prevChildren = [];
+      children = getTransitionBlocks(slottedBlock);
+      if (children) {
+        for (let i = 0; i < children.length; i++) {
+          const child = children[i];
+          if (isValidTransitionBlock(child)) {
+            prevChildren.push(child);
+            child.$transition.disabled = true;
+            positionMap.set(
+              child,
+              getTransitionElement(child).getBoundingClientRect()
+            );
+          }
+        }
+      }
+    });
+    onUpdated(() => {
+      if (!prevChildren.length) {
+        return;
+      }
+      const moveClass = props.moveClass || `${props.name || "v"}-move`;
+      const firstChild = getFirstConnectedChild(prevChildren);
+      if (!firstChild || !hasCSSTransform(
+        firstChild,
+        firstChild.parentNode,
+        moveClass
+      )) {
+        prevChildren = [];
+        return;
+      }
+      prevChildren.forEach(callPendingCbs);
+      prevChildren.forEach((child) => {
+        child.$transition.disabled = false;
+        recordPosition(child);
+      });
+      const movedChildren = prevChildren.filter(applyTranslation);
+      forceReflow();
+      movedChildren.forEach(
+        (c) => handleMovedChildren(
+          getTransitionElement(c),
+          moveClass
+        )
+      );
+      prevChildren = [];
+    });
+    setTransitionHooksOnFragment(slottedBlock, {
+      props: cssTransitionProps,
+      state,
+      instance,
+      group: true
+    });
+    children = getTransitionBlocks(slottedBlock);
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (isValidTransitionBlock(child)) {
+        if (child.$key != null) {
+          const hooks = resolveTransitionHooks(
+            child,
+            cssTransitionProps,
+            state,
+            instance
+          );
+          hooks.group = true;
+          setTransitionHooks(child, hooks);
+        } else if (!!(process.env.NODE_ENV !== "production") && child.$key == null) {
+          warn(`<transition-group> children must be keyed`);
+        }
+      }
+    }
+    const tag = props.tag;
+    if (tag) {
+      const container = createElement(tag);
+      insert(slottedBlock, container);
+      if (instance.hasFallthrough) {
+        container.$root = true;
+        renderEffect(() => applyFallthroughProps(container, instance.attrs));
+      }
+      return container;
+    } else {
+      const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("transition-group") : new DynamicFragment();
+      renderEffect(() => frag.update(() => slottedBlock));
+      return frag;
+    }
+  }
+});
+function getTransitionBlocks(block) {
+  let children = [];
+  if (block instanceof Node) {
+    children.push(block);
+  } else if (isVaporComponent(block)) {
+    children.push(...getTransitionBlocks(block.block));
+  } else if (isArray(block)) {
+    for (let i = 0; i < block.length; i++) {
+      const b = block[i];
+      const blocks = getTransitionBlocks(b);
+      if (isForBlock(b)) blocks.forEach((block2) => block2.$key = b.key);
+      children.push(...blocks);
+    }
+  } else if (isFragment(block)) {
+    if (block.insert) {
+      children.push(block);
+    } else {
+      children.push(...getTransitionBlocks(block.nodes));
+    }
+  }
+  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;
+  }
+}
+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);
+    });
+  }
+}
+
 class ForBlock extends VaporFragment {
   constructor(nodes, scope, item, key, index, renderKey) {
     super(nodes);
@@ -1628,6 +3888,7 @@ class ForBlock extends VaporFragment {
 const createFor = (src, renderItem, getKey, flags = 0, setup) => {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
+  const _isLastInsertion = isLastInsertion;
   if (isHydrating) {
     locateHydrationNode();
   } else {
@@ -1638,8 +3899,11 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
   let newBlocks;
   let parent;
   let currentKey;
-  const parentAnchor = !!(process.env.NODE_ENV !== "production") ? createComment("for") : createTextNode();
-  const frag = new VaporFragment(oldBlocks);
+  let parentAnchor;
+  if (!isHydrating) {
+    parentAnchor = !!(process.env.NODE_ENV !== "production") ? createComment("for") : createTextNode();
+  }
+  const frag = new ForFragment(oldBlocks);
   const instance = currentInstance;
   const canUseFastRemove = !!(flags & 1);
   const isComponent = !!(flags & 2);
@@ -1652,15 +3916,37 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     const newLength = source.values.length;
     const oldLength = oldBlocks.length;
     newBlocks = new Array(newLength);
+    let isFallback = false;
+    const transitionHooks = frag.$transition;
+    if (transitionHooks && transitionHooks.group) {
+      triggerTransitionGroupUpdate(transitionHooks);
+    }
     const prevSub = setActiveSub();
     if (!isMounted) {
       isMounted = true;
       for (let i = 0; i < newLength; i++) {
-        mount(source, i);
+        const nodes = mount(source, i).nodes;
+        if (isHydrating) {
+          setCurrentHydrationNode(findBlockNode(nodes).nextNode);
+        }
+      }
+      if (isHydrating) {
+        parentAnchor = newLength === 0 ? currentHydrationNode.nextSibling : currentHydrationNode;
+        if (!!(process.env.NODE_ENV !== "production") && (!parentAnchor || parentAnchor && !isComment(parentAnchor, "]"))) {
+          throw new Error(
+            `v-for fragment anchor node was not found. this is likely a Vue internal bug.`
+          );
+        }
+        if (_insertionParent) {
+          updateLastLogicalChild(_insertionParent, parentAnchor);
+        }
       }
     } else {
       parent = parent || parentAnchor.parentNode;
       if (!oldLength) {
+        if (frag.fallback && frag.nodes[0].length > 0) {
+          remove(frag.nodes[0], parent);
+        }
         for (let i = 0; i < newLength; i++) {
           mount(source, i);
         }
@@ -1676,6 +3962,10 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
           parent.textContent = "";
           parent.appendChild(parentAnchor);
         }
+        if (frag.fallback) {
+          insert(frag.nodes[0] = frag.fallback(), parent, parentAnchor);
+          isFallback = true;
+        }
       } else if (!getKey) {
         const commonLength = Math.min(newLength, oldLength);
         for (let i = 0; i < commonLength; i++) {
@@ -1688,147 +3978,163 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
           unmount(oldBlocks[i]);
         }
       } else {
-        const sharedBlockCount = Math.min(oldLength, newLength);
-        const previousKeyIndexPairs = new Array(oldLength);
+        if (!!(process.env.NODE_ENV !== "production")) {
+          const keyToIndexMap = /* @__PURE__ */ new Map();
+          for (let i = 0; i < newLength; i++) {
+            const item = getItem(source, i);
+            const key = getKey(...item);
+            if (key != null) {
+              if (keyToIndexMap.has(key)) {
+                warn(
+                  `Duplicate keys found during update:`,
+                  JSON.stringify(key),
+                  `Make sure keys are unique.`
+                );
+              }
+              keyToIndexMap.set(key, i);
+            }
+          }
+        }
+        const commonLength = Math.min(oldLength, newLength);
+        const oldKeyIndexPairs = new Array(oldLength);
         const queuedBlocks = new Array(newLength);
-        let anchorFallback = parentAnchor;
         let endOffset = 0;
-        let startOffset = 0;
-        let queuedBlocksInsertIndex = 0;
-        let previousKeyIndexInsertIndex = 0;
-        while (endOffset < sharedBlockCount) {
-          const currentIndex = newLength - endOffset - 1;
-          const currentItem = getItem(source, currentIndex);
-          const currentKey2 = getKey(...currentItem);
+        let queuedBlocksLength = 0;
+        let oldKeyIndexPairsLength = 0;
+        while (endOffset < commonLength) {
+          const index = newLength - endOffset - 1;
+          const item = getItem(source, index);
+          const key = getKey(...item);
           const existingBlock = oldBlocks[oldLength - endOffset - 1];
-          if (existingBlock.key === currentKey2) {
-            update(existingBlock, ...currentItem);
-            newBlocks[currentIndex] = existingBlock;
-            endOffset++;
-            continue;
-          }
-          if (endOffset !== 0) {
-            anchorFallback = normalizeAnchor(newBlocks[currentIndex + 1].nodes);
-          }
-          break;
+          if (existingBlock.key !== key) break;
+          update(existingBlock, ...item);
+          newBlocks[index] = existingBlock;
+          endOffset++;
         }
-        while (startOffset < sharedBlockCount - endOffset) {
-          const currentItem = getItem(source, startOffset);
+        const e1 = commonLength - endOffset;
+        const e2 = oldLength - endOffset;
+        const e3 = newLength - endOffset;
+        for (let i = 0; i < e1; i++) {
+          const currentItem = getItem(source, i);
           const currentKey2 = getKey(...currentItem);
-          const previousBlock = oldBlocks[startOffset];
-          const previousKey = previousBlock.key;
-          if (previousKey === currentKey2) {
-            update(newBlocks[startOffset] = previousBlock, currentItem[0]);
+          const oldBlock = oldBlocks[i];
+          const oldKey = oldBlock.key;
+          if (oldKey === currentKey2) {
+            update(newBlocks[i] = oldBlock, currentItem[0]);
           } else {
-            queuedBlocks[queuedBlocksInsertIndex++] = [
-              startOffset,
-              currentItem,
-              currentKey2
-            ];
-            previousKeyIndexPairs[previousKeyIndexInsertIndex++] = [
-              previousKey,
-              startOffset
-            ];
+            queuedBlocks[queuedBlocksLength++] = [i, currentItem, currentKey2];
+            oldKeyIndexPairs[oldKeyIndexPairsLength++] = [oldKey, i];
           }
-          startOffset++;
         }
-        for (let i = startOffset; i < oldLength - endOffset; i++) {
-          previousKeyIndexPairs[previousKeyIndexInsertIndex++] = [
-            oldBlocks[i].key,
-            i
-          ];
+        for (let i = e1; i < e2; i++) {
+          oldKeyIndexPairs[oldKeyIndexPairsLength++] = [oldBlocks[i].key, i];
         }
-        const preparationBlockCount = Math.min(
-          newLength - endOffset,
-          sharedBlockCount
-        );
-        for (let i = startOffset; i < preparationBlockCount; i++) {
+        for (let i = e1; i < e3; i++) {
           const blockItem = getItem(source, i);
           const blockKey = getKey(...blockItem);
-          queuedBlocks[queuedBlocksInsertIndex++] = [i, blockItem, blockKey];
+          queuedBlocks[queuedBlocksLength++] = [i, blockItem, blockKey];
         }
-        if (!queuedBlocksInsertIndex && !previousKeyIndexInsertIndex) {
-          for (let i = preparationBlockCount; i < newLength - endOffset; i++) {
-            const blockItem = getItem(source, i);
-            const blockKey = getKey(...blockItem);
-            mount(source, i, anchorFallback, blockItem, blockKey);
+        queuedBlocks.length = queuedBlocksLength;
+        oldKeyIndexPairs.length = oldKeyIndexPairsLength;
+        const oldKeyIndexMap = new Map(oldKeyIndexPairs);
+        const opers = new Array(queuedBlocks.length);
+        let mountCounter = 0;
+        let opersLength = 0;
+        for (let i = queuedBlocks.length - 1; i >= 0; i--) {
+          const [index, item, key] = queuedBlocks[i];
+          const oldIndex = oldKeyIndexMap.get(key);
+          if (oldIndex !== void 0) {
+            oldKeyIndexMap.delete(key);
+            const reusedBlock = newBlocks[index] = oldBlocks[oldIndex];
+            update(reusedBlock, ...item);
+            opers[opersLength++] = { index, block: reusedBlock };
+          } else {
+            mountCounter++;
+            opers[opersLength++] = { source, index, item, key };
           }
-        } else {
-          queuedBlocks.length = queuedBlocksInsertIndex;
-          previousKeyIndexPairs.length = previousKeyIndexInsertIndex;
-          const previousKeyIndexMap = new Map(previousKeyIndexPairs);
-          const blocksToMount = [];
-          const relocateOrMountBlock = (blockIndex, blockItem, blockKey, anchorOffset) => {
-            const previousIndex = previousKeyIndexMap.get(blockKey);
-            if (previousIndex !== void 0) {
-              const reusedBlock = newBlocks[blockIndex] = oldBlocks[previousIndex];
-              update(reusedBlock, ...blockItem);
-              insert(
-                reusedBlock,
-                parent,
-                anchorOffset === -1 ? anchorFallback : normalizeAnchor(newBlocks[anchorOffset].nodes)
-              );
-              previousKeyIndexMap.delete(blockKey);
-            } else {
-              blocksToMount.push([
-                blockIndex,
-                blockItem,
-                blockKey,
-                anchorOffset
-              ]);
-            }
-          };
-          for (let i = queuedBlocks.length - 1; i >= 0; i--) {
-            const [blockIndex, blockItem, blockKey] = queuedBlocks[i];
-            relocateOrMountBlock(
-              blockIndex,
-              blockItem,
-              blockKey,
-              blockIndex < preparationBlockCount - 1 ? blockIndex + 1 : -1
-            );
+        }
+        const useFastRemove = mountCounter === newLength;
+        for (const leftoverIndex of oldKeyIndexMap.values()) {
+          unmount(
+            oldBlocks[leftoverIndex],
+            !(useFastRemove && canUseFastRemove),
+            !useFastRemove
+          );
+        }
+        if (useFastRemove) {
+          for (const selector of selectors) {
+            selector.cleanup();
           }
-          for (let i = preparationBlockCount; i < newLength - endOffset; i++) {
-            const blockItem = getItem(source, i);
-            const blockKey = getKey(...blockItem);
-            relocateOrMountBlock(i, blockItem, blockKey, -1);
+          if (canUseFastRemove) {
+            parent.textContent = "";
+            parent.appendChild(parentAnchor);
           }
-          const useFastRemove = blocksToMount.length === newLength;
-          for (const leftoverIndex of previousKeyIndexMap.values()) {
-            unmount(
-              oldBlocks[leftoverIndex],
-              !(useFastRemove && canUseFastRemove),
-              !useFastRemove
+        }
+        if (opers.length === mountCounter) {
+          for (const { source: source2, index, item, key } of opers) {
+            mount(
+              source2,
+              index,
+              index < newLength - 1 ? normalizeAnchor(newBlocks[index + 1].nodes) : parentAnchor,
+              item,
+              key
             );
           }
-          if (useFastRemove) {
-            for (const selector of selectors) {
-              selector.cleanup();
+        } else if (opers.length) {
+          let anchor = oldBlocks[0];
+          let blocksTail;
+          for (let i = 0; i < oldLength; i++) {
+            const block = oldBlocks[i];
+            if (oldKeyIndexMap.has(block.key)) {
+              continue;
             }
-            if (canUseFastRemove) {
-              parent.textContent = "";
-              parent.appendChild(parentAnchor);
+            block.prevAnchor = anchor;
+            anchor = oldBlocks[i + 1];
+            if (blocksTail !== void 0) {
+              blocksTail.next = block;
+              block.prev = blocksTail;
             }
+            blocksTail = block;
           }
-          for (const [
-            blockIndex,
-            blockItem,
-            blockKey,
-            anchorOffset
-          ] of blocksToMount) {
-            mount(
-              source,
-              blockIndex,
-              anchorOffset === -1 ? anchorFallback : normalizeAnchor(newBlocks[anchorOffset].nodes),
-              blockItem,
-              blockKey
-            );
+          for (const action of opers) {
+            const { index } = action;
+            if (index < newLength - 1) {
+              const nextBlock = newBlocks[index + 1];
+              let anchorNode = normalizeAnchor(nextBlock.prevAnchor.nodes);
+              if (!anchorNode.parentNode)
+                anchorNode = normalizeAnchor(nextBlock.nodes);
+              if ("source" in action) {
+                const { item, key } = action;
+                const block = mount(source, index, anchorNode, item, key);
+                moveLink(block, nextBlock.prev, nextBlock);
+              } else if (action.block.next !== nextBlock) {
+                insert(action.block, parent, anchorNode);
+                moveLink(action.block, nextBlock.prev, nextBlock);
+              }
+            } else if ("source" in action) {
+              const { item, key } = action;
+              const block = mount(source, index, parentAnchor, item, key);
+              moveLink(block, blocksTail);
+              blocksTail = block;
+            } else if (action.block.next !== void 0) {
+              let anchorNode = anchor ? normalizeAnchor(anchor.nodes) : parentAnchor;
+              if (!anchorNode.parentNode) anchorNode = parentAnchor;
+              insert(action.block, parent, anchorNode);
+              moveLink(action.block, blocksTail);
+              blocksTail = action.block;
+            }
+          }
+          for (const block of newBlocks) {
+            block.prevAnchor = block.next = block.prev = void 0;
           }
         }
       }
     }
-    frag.nodes = [oldBlocks = newBlocks];
-    if (parentAnchor) {
-      frag.nodes.push(parentAnchor);
+    if (!isFallback) {
+      frag.nodes = [oldBlocks = newBlocks];
+      if (parentAnchor) frag.nodes.push(parentAnchor);
+    } else {
+      oldBlocks = [];
     }
     setActiveSub(prevSub);
   };
@@ -1857,6 +4163,9 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
       indexRef,
       key2
     );
+    if (frag.$transition) {
+      applyTransitionHooks(block.nodes, frag.$transition, false);
+    }
     if (parent) insert(block.nodes, parent, anchor);
     return block;
   };
@@ -1892,15 +4201,17 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
   } else {
     renderEffect(renderList);
   }
-  if (!isHydrating && _insertionParent) {
-    insert(frag, _insertionParent, _insertionAnchor);
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    advanceHydrationNode(_isLastInsertion ? _insertionParent : parentAnchor);
   }
   return frag;
   function createSelector(source) {
     let operMap = /* @__PURE__ */ new Map();
     let activeKey = source();
     let activeOpers;
-    watch(source, (newValue) => {
+    watch$1(source, (newValue) => {
       if (activeOpers !== void 0) {
         for (const oper of activeOpers) {
           oper();
@@ -1940,6 +4251,21 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     }
   }
 };
+function moveLink(block, newPrev, newNext) {
+  const { prev: oldPrev, next: oldNext } = block;
+  if (oldPrev) oldPrev.next = oldNext;
+  if (oldNext) {
+    oldNext.prev = oldPrev;
+    if (block.prevAnchor !== block) {
+      oldNext.prevAnchor = block.prevAnchor;
+    }
+  }
+  if (newPrev) newPrev.next = block;
+  if (newNext) newNext.prev = block;
+  block.prev = newPrev;
+  block.next = newNext;
+  block.prevAnchor = block;
+}
 function createForSlots(rawSource, getSlot) {
   const source = normalizeSource(rawSource);
   const sourceLength = source.values.length;
@@ -2015,16 +4341,34 @@ function getRestElement(val, keys) {
 function getDefaultValue(val, defaultVal) {
   return val === void 0 ? defaultVal : val;
 }
+function isForBlock(block) {
+  return block instanceof ForBlock;
+}
 
 function createTemplateRefSetter() {
   const instance = currentInstance;
   return (...args) => setRef(instance, ...args);
 }
-function setRef(instance, el, ref, oldRef, refFor = false) {
+function setRef(instance, el, ref, oldRef, refFor = false, refKey) {
   if (!instance || instance.isUnmounted) return;
+  if (isFragment(el) && el.setRef) {
+    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);
+      return;
+    }
+    el = frag.nodes;
+  }
   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);
   if (oldRef != null && oldRef !== ref) {
     if (isString(oldRef)) {
       refs[oldRef] = null;
@@ -2051,28 +4395,30 @@ function setRef(instance, el, ref, oldRef, refFor = false) {
     if (_isString || _isRef) {
       const doSet = () => {
         if (refFor) {
-          existing = _isString ? !!(process.env.NODE_ENV !== "production") && hasOwn(setupState, ref) ? setupState[ref] : refs[ref] : ref.value;
+          existing = _isString ? !!(process.env.NODE_ENV !== "production") && canSetSetupRef(ref) ? setupState[ref] : refs[ref] : ref.value;
           if (!isArray(existing)) {
             existing = [refValue];
             if (_isString) {
               refs[ref] = existing;
-              if (!!(process.env.NODE_ENV !== "production") && hasOwn(setupState, ref)) {
+              if (!!(process.env.NODE_ENV !== "production") && canSetSetupRef(ref)) {
                 setupState[ref] = refs[ref];
                 existing = setupState[ref];
               }
             } else {
               ref.value = existing;
+              if (refKey) refs[refKey] = existing;
             }
           } else if (!existing.includes(refValue)) {
             existing.push(refValue);
           }
         } else if (_isString) {
           refs[ref] = refValue;
-          if (!!(process.env.NODE_ENV !== "production") && hasOwn(setupState, ref)) {
+          if (!!(process.env.NODE_ENV !== "production") && canSetSetupRef(ref)) {
             setupState[ref] = refValue;
           }
         } else if (_isRef) {
           ref.value = refValue;
+          if (refKey) refs[refKey] = refValue;
         } else if (!!(process.env.NODE_ENV !== "production")) {
           warn("Invalid template ref type:", ref, `(${typeof ref})`);
         }
@@ -2084,11 +4430,12 @@ function setRef(instance, el, ref, oldRef, refFor = false) {
             remove$1(existing, refValue);
           } else if (_isString) {
             refs[ref] = null;
-            if (!!(process.env.NODE_ENV !== "production") && hasOwn(setupState, ref)) {
+            if (!!(process.env.NODE_ENV !== "production") && canSetSetupRef(ref)) {
               setupState[ref] = null;
             }
           } else if (_isRef) {
             ref.value = null;
+            if (refKey) refs[refKey] = null;
           }
         });
       });
@@ -2107,29 +4454,35 @@ const getRefValue = (el) => {
   return el;
 };
 
-function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot) {
+function createDynamicComponent(getter, rawProps, rawSlots, isSingleRoot, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
-  if (isHydrating) {
-    locateHydrationNode();
-  } else {
-    resetInsertionState();
-  }
-  const frag = !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("dynamic-component") : new DynamicFragment();
-  renderEffect(() => {
+  const _isLastInsertion = isLastInsertion;
+  if (!isHydrating) resetInsertionState();
+  const frag = isHydrating || !!(process.env.NODE_ENV !== "production") ? new DynamicFragment("dynamic-component") : new DynamicFragment();
+  const renderFn = () => {
     const value = getter();
+    const appContext = currentInstance && currentInstance.appContext || emptyContext;
     frag.update(
       () => createComponentWithFallback(
         resolveDynamicComponent(value),
         rawProps,
         rawSlots,
-        isSingleRoot
+        isSingleRoot,
+        once,
+        appContext
       ),
       value
     );
-  });
-  if (!isHydrating && _insertionParent) {
-    insert(frag, _insertionParent, _insertionAnchor);
+  };
+  if (once) renderFn();
+  else renderEffect(renderFn);
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
+  } else {
+    if (_isLastInsertion) {
+      advanceHydrationNode(_insertionParent);
+    }
   }
   return frag;
 }
@@ -2147,6 +4500,12 @@ function applyVShow(target, source) {
       update.call(target, render, key);
       setDisplay(target, source());
     };
+  } else if (target instanceof VaporFragment && target.insert) {
+    const insert = target.insert;
+    target.insert = (parent, anchor) => {
+      insert.call(target, parent, anchor);
+      setDisplay(target, source());
+    };
   }
   renderEffect(() => setDisplay(target, source()));
 }
@@ -2154,18 +4513,54 @@ function setDisplay(target, value) {
   if (isVaporComponent(target)) {
     return setDisplay(target, value);
   }
-  if (isArray(target) && target.length === 1) {
-    return setDisplay(target[0], value);
+  if (isArray(target)) {
+    if (target.length === 0) return;
+    if (target.length === 1) return setDisplay(target[0], value);
   }
   if (target instanceof DynamicFragment) {
     return setDisplay(target.nodes, value);
   }
+  if (target instanceof VaporFragment && target.insert) {
+    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;
     }
-    el.style.display = value ? el[vShowOriginalDisplay] : "none";
+    if ($transition) {
+      if (value) {
+        $transition.beforeEnter(target);
+        el.style.display = el[vShowOriginalDisplay];
+        $transition.enter(target);
+      } else {
+        if (target.isConnected) {
+          $transition.leave(target, () => {
+            el.style.display = "none";
+          });
+        } else {
+          el.style.display = "none";
+        }
+      }
+    } else {
+      if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && isHydrating) {
+        if (!value && el.style.display !== "none") {
+          warnPropMismatch(
+            el,
+            "style",
+            3,
+            `display: ${el.style.display}`,
+            "display: none"
+          );
+          logMismatchError();
+          el.style.display = "none";
+          el[vShowOriginalDisplay] = "";
+        }
+      } else {
+        el.style.display = value ? el[vShowOriginalDisplay] : "none";
+      }
+    }
     el[vShowHidden] = !value;
   } else if (!!(process.env.NODE_ENV !== "production")) {
     warn(
@@ -2244,4 +4639,4 @@ function withVaporDirectives(node, dirs) {
   }
 }
 
-export { VaporFragment, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporComponent, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, vaporInteropPlugin, withVaporDirectives };
+export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert, isFragment, isVaporComponent, next, nthChild, on, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockText, setClass, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStyle, setText, setValue, template, txt, vaporInteropPlugin, withVaporCtx, withVaporDirectives };