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

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

@@ -1,10 +1,10 @@
 /**
-* @vue/runtime-vapor v3.6.0-alpha.3
+* @vue/runtime-vapor v3.6.0-alpha.4
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
-import { isMismatchAllowed, warn, currentInstance, startMeasure, setCurrentInstance, queuePostFlushCb, queueJob, TransitionPropsValidators, leaveCbKey, isAsyncWrapper, getComponentName, baseResolveTransitionHooks, isTemplateNode, checkTransitionMode, resolveTransitionProps, useTransitionState, isKeepAlive, isRef, unsafeToTrustedHTML, patchStyle, mergeProps, shouldSetAsProp, toClassSet, isSetEqual, warnPropMismatch, toStyleMap, vShowHidden, isMapEqual, isValidHtmlOrSvgAttribute, getAttributeMismatch, 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, createCanSetSetupRefChecker, resolveDynamicComponent, vShowOriginalDisplay, vModelTextInit, vModelCheckboxInit, vModelSelectInit, vModelTextUpdate, vModelCheckboxUpdate, vModelGetValue, vModelSetSelected, onBeforeUpdate, hasCSSTransform, callPendingCbs, forceReflow, handleMovedChildren, baseApplyTranslation } from '@vue/runtime-dom';
-import { invokeArrayFns, isArray, extend, EMPTY_OBJ, isFunction, NO, hasOwn, normalizeClass, normalizeStyle, includeBooleanAttr, toDisplayString, isString, parseStringStyle, isOn, canSetValueDirectly, stringifyStyle, isReservedProp, EMPTY_ARR, camelize, YES, getGlobalThis, isObject, remove as remove$1, looseEqual } from '@vue/shared';
+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;
@@ -357,6 +357,8 @@ class RenderEffect extends ReactiveEffect {
       if (!!(process.env.NODE_ENV !== "production")) {
         this.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
         this.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
+      }
+      if (!!(process.env.NODE_ENV !== "production") || instance.type.ce) {
         (instance.renderEffects || (instance.renderEffects = [])).push(this);
       }
       job.i = instance;
@@ -544,7 +546,7 @@ function applyTransitionHooks(block, hooks, fallthroughAttrs = true, isResolved
     if (isFrag) setTransitionHooksOnFragment(block, hooks);
     return hooks;
   }
-  const { props, instance, state, delayedLeave } = hooks;
+  const { props, instance, state, delayedLeave, group } = hooks;
   let resolvedHooks = resolveTransitionHooks(
     child,
     props,
@@ -553,6 +555,7 @@ function applyTransitionHooks(block, hooks, fallthroughAttrs = true, isResolved
     (hooks2) => resolvedHooks = hooks2
   );
   resolvedHooks.delayedLeave = delayedLeave;
+  resolvedHooks.group = group;
   child.$transition = resolvedHooks;
   if (isFrag) setTransitionHooksOnFragment(block, resolvedHooks);
   if (fallthroughAttrs && instance.hasFallthrough) {
@@ -642,6 +645,9 @@ function findTransitionBlock(block, inFragment = false) {
 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);
@@ -832,160 +838,6 @@ function isFragment(val) {
   return val instanceof VaporFragment;
 }
 
-let currentSlotScopeIds = null;
-function setCurrentSlotScopeIds(scopeIds) {
-  const prev = currentSlotScopeIds;
-  currentSlotScopeIds = scopeIds;
-  return prev;
-}
-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];
-  }
-}
-function withVaporCtx(fn) {
-  const instance = currentInstance;
-  return (...args) => {
-    const prev = setCurrentInstance(instance);
-    try {
-      return fn(...args);
-    } finally {
-      setCurrentInstance(...prev);
-    }
-  };
-}
-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 slot = getSlot(rawSlots, isFunction(name) ? name() : name);
-      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;
-}
-
 function addEventListener(el, event, handler, options) {
   el.addEventListener(event, handler, options);
   return () => el.removeEventListener(event, handler, options);
@@ -1057,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) {
@@ -1066,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;
   }
@@ -1081,14 +942,22 @@ function setAttr(el, key, value) {
   }
   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, forceHydrate = false) {
+function setDOMProp(el, key, value, forceHydrate = false, attrName) {
   if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
     return;
   }
@@ -1122,9 +991,9 @@ function setDOMProp(el, key, value, forceHydrate = false) {
       );
     }
   }
-  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 {
@@ -1134,7 +1003,11 @@ function setClass(el, value) {
       return;
     }
     if (value !== el.$cls) {
-      el.className = el.$cls = value;
+      if (isSVG) {
+        el.setAttribute("class", el.$cls = value);
+      } else {
+        el.className = el.$cls = value;
+      }
     }
   }
 }
@@ -1296,26 +1169,26 @@ function setHtmlToBlock(block, value) {
     setHtmlToBlock(block.nodes, value);
   }
 }
-function setDynamicProps(el, args) {
+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);
+        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)) {
@@ -1333,8 +1206,13 @@ function setDynamicProp(el, key, value) {
     } else {
       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;
 }
@@ -1347,7 +1225,8 @@ function optimizePropertyLookup() {
   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");
@@ -1418,75 +1297,257 @@ function shouldForceHydrate(el, key) {
   tagName.includes("-");
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
-// @__NO_SIDE_EFFECTS__
-function defineVaporComponent(comp, extraOptions) {
-  if (isFunction(comp)) {
-    return /* @__PURE__ */ (() => extend({ name: comp.name }, extraOptions, {
-      setup: comp,
-      __vapor: true
-    }))();
+let currentSlotScopeIds = null;
+function setCurrentSlotScopeIds(scopeIds) {
+  try {
+    return currentSlotScopeIds;
+  } finally {
+    currentSlotScopeIds = scopeIds;
   }
-  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));
+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
+      };
     }
-    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);
+  },
+  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));
         }
       }
-      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;
+    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);
@@ -1824,8 +1885,7 @@ const vaporSlotsProxyHandler = {
   }
 };
 let vdomHydrateNode;
-function createVDOMComponent(internals, component, rawProps, rawSlots) {
-  const parentInstance = currentInstance;
+function createVDOMComponent(internals, component, parentComponent, rawProps, rawSlots) {
   const frag = new VaporFragment([]);
   const vnode = frag.vnode = createVNode(
     component,
@@ -1834,7 +1894,10 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
   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);
@@ -1854,9 +1917,9 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
     if (vnode.shapeFlag & 256) {
       deactivate$1(
         vnode,
-        findParentKeepAlive(parentInstance).getStorageContainer(),
+        findParentKeepAlive(parentComponent).getStorageContainer(),
         internals,
-        parentInstance,
+        parentComponent,
         null
       );
       return;
@@ -1864,12 +1927,12 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
     internals.umt(vnode.component, null, !!parentNode);
   };
   frag.hydrate = () => {
-    hydrateVNode(vnode, parentInstance);
+    hydrateVNode(vnode, parentComponent);
     onScopeDispose(unmount, true);
     isMounted = true;
     frag.nodes = vnode.el;
   };
-  vnode.scopeId = parentInstance && parentInstance.type.__scopeId;
+  vnode.scopeId = currentInstance && currentInstance.type.__scopeId || null;
   vnode.slotScopeIds = currentSlotScopeIds;
   frag.insert = (parentNode, anchor, transition) => {
     if (isHydrating) return;
@@ -1879,21 +1942,21 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
         parentNode,
         anchor,
         internals,
-        parentInstance,
+        parentComponent,
         null,
         void 0,
         false
       );
     } else {
       const prev = currentInstance;
-      simpleSetCurrentInstance(parentInstance);
+      simpleSetCurrentInstance(parentComponent);
       if (!isMounted) {
         if (transition) setTransitionHooks$1(vnode, transition);
         internals.mt(
           vnode,
           parentNode,
           anchor,
-          parentInstance,
+          parentComponent,
           null,
           void 0,
           false
@@ -1907,7 +1970,7 @@ function createVDOMComponent(internals, component, rawProps, rawSlots) {
           parentNode,
           anchor,
           2,
-          parentInstance
+          parentComponent
         );
       }
       simpleSetCurrentInstance(prev);
@@ -2154,7 +2217,7 @@ function getPropsProxyHandlers(comp, once) {
         return resolvePropValue(
           propsOptions,
           key,
-          rawProps[rawKey](),
+          resolveSource(rawProps[rawKey]),
           instance,
           resolveDefault
         );
@@ -2257,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) {
@@ -2351,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.$) {
@@ -2485,6 +2549,7 @@ class TeleportFragment extends VaporFragment {
     };
     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(
@@ -2554,6 +2619,9 @@ class TeleportFragment extends VaporFragment {
           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(
@@ -2566,7 +2634,9 @@ class TeleportFragment extends VaporFragment {
     if (isTeleportDisabled(this.resolvedProps)) {
       mount(this.parent, this.anchor);
     } else {
-      if (isTeleportDeferred(this.resolvedProps)) {
+      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();
@@ -2774,13 +2844,15 @@ function setScopeId(block, scopeIds) {
   }
 }
 function setComponentScopeId(instance) {
-  const parent = instance.parent;
-  if (!parent) return;
+  const { parent, scopeId } = instance;
+  if (!parent || !scopeId) return;
   if (isArray(instance.block) && instance.block.length > 1) return;
   const scopeIds = [];
-  const scopeId = parent.type.__scopeId;
-  if (scopeId) {
+  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);
@@ -2866,8 +2938,9 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
   } else {
     resetInsertionState();
   }
-  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(currentInstance) && currentInstance.hasFallthrough) {
-    const attrs = currentInstance.attrs;
+  const parentInstance = getParentInstance();
+  if (isSingleRoot && component.inheritAttrs !== false && isVaporComponent(parentInstance) && parentInstance.hasFallthrough) {
+    const attrs = parentInstance.attrs;
     if (rawProps) {
       (rawProps.$ || (rawProps.$ = [])).push(
         () => attrs
@@ -2876,18 +2949,21 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
       rawProps = { $: [() => attrs] };
     }
   }
-  if (currentInstance && currentInstance.vapor && isKeepAlive(currentInstance)) {
-    const cached = currentInstance.getCachedComponent(
+  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
     );
+    setCurrentSlotConsumer(prevSlotConsumer2);
     if (!isHydrating) {
       if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor);
     } else {
@@ -2915,8 +2991,10 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
     rawProps,
     rawSlots,
     appContext,
-    once
+    once,
+    parentInstance
   );
+  const prevSlotConsumer = setCurrentSlotConsumer(null);
   if (!!(process.env.NODE_ENV !== "production") && component.__hmrId) {
     registerHMR(instance);
     instance.isSingleRoot = isSingleRoot;
@@ -2958,6 +3036,7 @@ function createComponent(component, rawProps, rawSlots, isSingleRoot, once, appC
   } else {
     setupComponent(instance, component);
   }
+  setCurrentSlotConsumer(prevSlotConsumer);
   onScopeDispose$1(() => unmountComponent(instance), true);
   if (_insertionParent || isHydrating) {
     mountComponent(instance, _insertionParent, _insertionAnchor);
@@ -3055,16 +3134,16 @@ const emptyContext = {
   provides: /* @__PURE__ */ Object.create(null)
 };
 class VaporComponentInstance {
-  constructor(comp, rawProps, rawSlots, appContext, once) {
+  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);
@@ -3088,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
@@ -3111,6 +3194,9 @@ function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot, onc
       appContext
     );
   }
+  return createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once);
+}
+function createPlainElement(comp, rawProps, rawSlots, isSingleRoot, once) {
   const _insertionParent = insertionParent;
   const _insertionAnchor = insertionAnchor;
   const _isLastInsertion = isLastInsertion;
@@ -3136,8 +3222,15 @@ function createComponentWithFallback(comp, rawProps, rawSlots, isSingleRoot, onc
       nextNode = locateNextNode(el);
       setCurrentHydrationNode(el.firstChild);
     }
-    if (rawSlots.$) ; else {
-      insert(getSlot(rawSlots, "default")(), el);
+    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);
@@ -3157,6 +3250,11 @@ function mountComponent(instance, parent, anchor) {
     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`);
   }
@@ -3224,7 +3322,7 @@ const mountApp = (app, container) => {
     }
     container.textContent = "";
   }
-  const instance = createComponent(
+  const instance = app._ceComponent || createComponent(
     app._component,
     app._props,
     null,
@@ -3241,7 +3339,7 @@ const hydrateApp = (app, container) => {
   optimizePropertyLookup();
   let instance;
   withHydration(container, () => {
-    instance = createComponent(
+    instance = app._ceComponent || createComponent(
       app._component,
       app._props,
       null,
@@ -3420,10 +3518,130 @@ function createInnerComp(comp, parent, frag) {
   return instance;
 }
 
+// @__NO_SIDE_EFFECTS__
+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
+    );
+  }
+}
+
 let t;
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
-function template(html, root) {
+function template(html, root, ns) {
   let node;
   return () => {
     if (isHydrating) {
@@ -3435,9 +3653,15 @@ function template(html, root) {
       return createTextNode(html);
     }
     if (!node) {
-      t = t || createElement("template");
-      t.innerHTML = html;
-      node = _child(t.content);
+      t = t || document.createElement("template");
+      if (ns) {
+        const tag = ns === 1 ? "svg" : "math";
+        t.innerHTML = `<${tag}>${html}</${tag}>`;
+        node = _child(_child(t.content));
+      } else {
+        t.innerHTML = html;
+        node = _child(t.content);
+      }
     }
     const ret = node.cloneNode(true);
     if (root) ret.$root = true;
@@ -3486,12 +3710,177 @@ function createKeyedFragment(key, render) {
   return frag;
 }
 
-class ForBlock extends VaporFragment {
-  constructor(nodes, scope, item, key, index, renderKey) {
-    super(nodes);
-    this.scope = scope;
-    this.itemRef = item;
-    this.keyRef = key;
+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);
+    this.scope = scope;
+    this.itemRef = item;
+    this.keyRef = key;
     this.indexRef = index;
     this.key = renderKey;
   }
@@ -3528,6 +3917,10 @@ const createFor = (src, renderItem, getKey, flags = 0, setup) => {
     const oldLength = oldBlocks.length;
     newBlocks = new Array(newLength);
     let isFallback = false;
+    const transitionHooks = frag.$transition;
+    if (transitionHooks && transitionHooks.group) {
+      triggerTransitionGroupUpdate(transitionHooks);
+    }
     const prevSub = setActiveSub();
     if (!isMounted) {
       isMounted = true;
@@ -4246,153 +4639,4 @@ function withVaporDirectives(node, dirs) {
   }
 }
 
-const positionMap = /* @__PURE__ */ new WeakMap();
-const newPositionMap = /* @__PURE__ */ new WeakMap();
-const decorate = (t) => {
-  delete t.props.mode;
-  t.__vapor = true;
-  return t;
-};
-const VaporTransitionGroup = decorate({
-  name: "VaporTransitionGroup",
-  props: /* @__PURE__ */ extend({}, TransitionPropsValidators, {
-    tag: String,
-    moveClass: String
-  }),
-  setup(props, { slots }) {
-    const instance = currentInstance;
-    const state = useTransitionState();
-    const cssTransitionProps = resolveTransitionProps(props);
-    let prevChildren;
-    let children;
-    const slottedBlock = slots.default && slots.default();
-    onBeforeUpdate(() => {
-      prevChildren = [];
-      children = getTransitionBlocks(slottedBlock);
-      if (children) {
-        for (let i = 0; i < children.length; i++) {
-          const child = children[i];
-          if (isValidTransitionBlock(child)) {
-            prevChildren.push(child);
-            child.$transition.disabled = true;
-            positionMap.set(
-              child,
-              getTransitionElement(child).getBoundingClientRect()
-            );
-          }
-        }
-      }
-    });
-    onUpdated(() => {
-      if (!prevChildren.length) {
-        return;
-      }
-      const moveClass = props.moveClass || `${props.name || "v"}-move`;
-      const firstChild = getFirstConnectedChild(prevChildren);
-      if (!firstChild || !hasCSSTransform(
-        firstChild,
-        firstChild.parentNode,
-        moveClass
-      )) {
-        prevChildren = [];
-        return;
-      }
-      prevChildren.forEach(callPendingCbs);
-      prevChildren.forEach((child) => {
-        child.$transition.disabled = false;
-        recordPosition(child);
-      });
-      const movedChildren = prevChildren.filter(applyTranslation);
-      forceReflow();
-      movedChildren.forEach(
-        (c) => handleMovedChildren(
-          getTransitionElement(c),
-          moveClass
-        )
-      );
-      prevChildren = [];
-    });
-    setTransitionHooksOnFragment(slottedBlock, {
-      props: cssTransitionProps,
-      state,
-      instance
-    });
-    children = getTransitionBlocks(slottedBlock);
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-      if (isValidTransitionBlock(child)) {
-        if (child.$key != null) {
-          setTransitionHooks(
-            child,
-            resolveTransitionHooks(child, cssTransitionProps, state, instance)
-          );
-        } 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;
-  }
-}
-
-export { VaporFragment, VaporKeepAliveImpl as VaporKeepAlive, VaporTeleportImpl as VaporTeleport, VaporTransition, VaporTransitionGroup, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createKeyedFragment, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, 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 };
+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 };