@estjs/template 0.0.17-beta.7 → 0.0.18-beta.1

package/dist/template.dev.js

@@ -1,6 +1,6 @@
 import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-PYFF2HI3.dev.js';
 import { normalizeClassName, SPREAD_NAME, isObject, warn, startsWith, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isString, isArray, kebabCase, camelCase, capitalize, HYDRATION_ANCHOR_ATTR, isBrowser, error, isPromise, isFunction, isOn, coerceArray, isNumber } from '@estjs/shared';
-import { effect, shallowReactive, isSignal, isComputed, isReactive, signal } from '@estjs/signals';
+import { effect, shallowReactive, isSignal, isComputed, isReactive, signal, untrack } from '@estjs/signals';
 
 var REF_KEY = "ref";
 var KEY_PROP = "key";
@@ -14,6 +14,24 @@ var FOR_COMPONENT = /* @__PURE__ */ Symbol("For Component" );
 var TRANSITION_COMPONENT = /* @__PURE__ */ Symbol("Transition Component" );
 var TRANSITION_GROUP_COMPONENT = /* @__PURE__ */ Symbol("TransitionGroup Component" );
 var DANGEROUS_DATA_MIME_RE = /^data:\s*(?:text\/html|text\/xml|application\/xhtml\+xml|image\/svg\+xml|application\/xml)/;
+var BOOLEAN_PROPERTY_ALIASES = {
+  allowfullscreen: "allowFullscreen",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  novalidate: "noValidate",
+  readonly: "readOnly"
+};
+function syncBooleanProperty(el, key, value) {
+  var _a2;
+  if (el.namespaceURI === SVG_NAMESPACE) return;
+  const prop = (_a2 = BOOLEAN_PROPERTY_ALIASES[key.toLowerCase()]) != null ? _a2 : key;
+  if (!(prop in el) || typeof el[prop] !== "boolean") return;
+  try {
+    el[prop] = value;
+  } catch (e) {
+  }
+}
 function isUnsafeUrl(value) {
   const v = value.replaceAll(/[\u0000-\u0020]+/g, "").toLowerCase();
   if (startsWith(v, "javascript:") || startsWith(v, "vbscript:")) {
@@ -90,14 +108,19 @@ function patchAttr(el, key, prev, next2) {
     } else {
       el.removeAttribute(key);
     }
+    if (isBoolean || lowerKey === "indeterminate") {
+      syncBooleanProperty(el, key, false);
+    }
     return;
   }
   if (isBoolean) {
-    if (includeBooleanAttr(next2)) {
+    const included = includeBooleanAttr(next2);
+    if (included) {
       el.setAttribute(key, "");
     } else {
       el.removeAttribute(key);
     }
+    syncBooleanProperty(el, key, included);
     return;
   }
   const attrValue = isSymbol(next2) ? String(next2) : next2;
@@ -326,19 +349,31 @@ function endHydration() {
   _teleportTargetStarts.clear();
 }
 function claimHydratedNodes(parent, expected, before) {
-  var _a2, _b;
+  var _a2, _b, _c;
   if (!_isHydrating || before && before.parentNode !== parent) return null;
   if (expected.length === 0) return [];
   const claimed = new Array(expected.length);
   let cursor = before ? before.previousSibling : parent.lastChild;
   for (let i = expected.length - 1; i >= 0; i--) {
-    if (!cursor) return null;
     const expectedNode = expected[i];
     const expectedType = expectedNode.nodeType;
     if (expectedType === Node.TEXT_NODE) {
       const expectedText = (_a2 = expectedNode.textContent) != null ? _a2 : "";
-      if (!expectedText || cursor.nodeType !== Node.TEXT_NODE) return null;
-      const existingText = (_b = cursor.textContent) != null ? _b : "";
+      if (expectedText === "") {
+        if ((cursor == null ? void 0 : cursor.nodeType) === Node.TEXT_NODE && ((_b = cursor.textContent) != null ? _b : "") === "") {
+          claimed[i] = cursor;
+          cursor = cursor.previousSibling;
+        } else {
+          const emptyNode = document.createTextNode("");
+          const anchor = i + 1 < expected.length ? claimed[i + 1] : before != null ? before : null;
+          parent.insertBefore(emptyNode, anchor);
+          claimed[i] = emptyNode;
+        }
+        continue;
+      }
+      if (!cursor) return null;
+      if (cursor.nodeType !== Node.TEXT_NODE) return null;
+      const existingText = (_c = cursor.textContent) != null ? _c : "";
       if (existingText === expectedText) {
         claimed[i] = cursor;
         cursor = cursor.previousSibling;
@@ -354,6 +389,7 @@ function claimHydratedNodes(parent, expected, before) {
       cursor = prefixNode;
       continue;
     }
+    if (!cursor) return null;
     if (cursor.nodeType !== expectedType) return null;
     if (expectedType === Node.ELEMENT_NODE) {
       if (cursor.tagName !== expectedNode.tagName) return null;
@@ -661,6 +697,8 @@ function insert(parent, nodeFactory, before) {
   const effectRunner = effect(() => {
     const executeUpdate = () => {
       const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
+      const rawType = typeof rawNodes;
+      const canPatchText = rawNodes == null || rawType === "string" || rawType === "number" || rawType === "boolean" || rawType === "symbol";
       const nodes = resolveNodes(rawNodes);
       if (isFirstRun && isHydrating() && nodes.every((node) => node instanceof Node && node.parentNode === parent)) {
         renderedNodes = nodes;
@@ -675,6 +713,13 @@ function insert(parent, nodeFactory, before) {
           return;
         }
       }
+      if (canPatchText && renderedNodes.length === 1 && nodes.length === 1 && renderedNodes[0].nodeType === Node.TEXT_NODE && nodes[0].nodeType === Node.TEXT_NODE) {
+        const current = renderedNodes[0];
+        const nextText = nodes[0].textContent;
+        if (current.textContent !== nextText) current.textContent = nextText;
+        isFirstRun = false;
+        return;
+      }
       renderedNodes = reconcileArrays(parent, renderedNodes, nodes, before);
       isFirstRun = false;
     };
@@ -721,7 +766,7 @@ function addEvent(el, event, handler, options) {
   const selector = options.delegate;
   const wrappedHandler = (e) => {
     const target = e.target;
-    if (target.matches(selector) || target.closest(selector)) {
+    if (target.closest(selector)) {
       handler.call(el, e);
     }
   };
@@ -954,28 +999,34 @@ var Component = class {
    */
   syncSpecialProps(props) {
     if (!props) return;
-    const root = this.firstChild;
-    if (!root || !(root instanceof Element)) return;
+    const roots = this.getRootElements();
+    if (roots.length === 0) return;
+    const refRoot = roots[0];
     this.releaseSpecialProps();
     for (const key of Reflect.ownKeys(props)) {
       if (!isString(key)) continue;
       if (key === REF_KEY) {
         const value = readDescriptorValue(props, key);
-        this.rootRefCleanup = this.bindRootRef(value, root);
+        this.rootRefCleanup = this.bindRootRef(value, refRoot);
         continue;
       }
       if (isOn(key)) {
         const value = readDescriptorValue(props, key);
         if (!isFunction(value)) continue;
         const eventName = key.slice(2).toLowerCase();
-        this.bindRootEvent(
-          root,
-          eventName,
-          value
-        );
+        for (const root of roots) {
+          this.bindRootEvent(root, eventName, value);
+        }
       }
     }
   }
+  getRootElements() {
+    const roots = [];
+    for (const node of this.renderedNodes) {
+      if (node instanceof Element) roots.push(node);
+    }
+    return roots;
+  }
   bindRootEvent(target, eventName, handler) {
     const slot = `_$${eventName}`;
     const prev = target[slot];
@@ -1183,7 +1234,9 @@ function eventHandler(e) {
     return true;
   };
   const walkUpTree = () => {
-    while (handleNode() && (node = node._$host || node.parentNode || node.host)) ;
+    while (handleNode() && (node = node._$host || node.parentNode || node.host)) {
+      if (node === oriCurrentTarget) break;
+    }
   };
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
@@ -1194,23 +1247,26 @@ function eventHandler(e) {
       return node || document;
     }
   });
-  if (e.composedPath) {
-    const path = e.composedPath();
-    reTargetEvent(e, path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        walkUpTree();
-        break;
-      }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
+  try {
+    if (e.composedPath) {
+      const path = e.composedPath();
+      reTargetEvent(e, path[0]);
+      for (let i = 0; i < path.length - 2; i++) {
+        node = path[i];
+        if (!handleNode()) break;
+        if (node._$host) {
+          node = node._$host;
+          walkUpTree();
+          break;
+        }
+        if (node.parentNode === oriCurrentTarget) {
+          break;
+        }
       }
-    }
-  } else walkUpTree();
-  reTargetEvent(e, oriTarget);
+    } else walkUpTree();
+  } finally {
+    reTargetEvent(e, oriTarget);
+  }
 }
 var $EVENTS = /* @__PURE__ */ Symbol("_$EVENTS");
 function delegateEvents(eventNames, document2 = globalThis.document) {
@@ -1248,6 +1304,7 @@ var EMPTY_FILES = (() => {
   if (typeof DataTransfer !== "undefined") return new DataTransfer().files;
   return [];
 })();
+var checkboxArraySnapshots = /* @__PURE__ */ new WeakMap();
 function writeValue(el, v) {
   const target = el;
   const next2 = v == null ? "" : String(v);
@@ -1364,11 +1421,16 @@ function bindElement(node, prop, getter, setter, modifiers = {}) {
   const getModel = isFunction(getter) ? getter : () => getter;
   const cast = shouldCast ? (v) => applyModifiers(v, trim, toNum) : IDENTITY;
   const computeNext = checkboxArray ? (raw) => {
+    var _a2;
     const current = getModel();
-    if (!isArray(current)) return cast(raw);
+    if (!isArray(current)) {
+      return cast(raw);
+    }
     const own = node.value;
-    const next2 = current.filter((item) => String(item) !== own);
+    const source = (_a2 = checkboxArraySnapshots.get(current)) != null ? _a2 : current;
+    const next2 = source.filter((item) => String(item) !== own);
     if (raw) next2.push(own);
+    checkboxArraySnapshots.set(current, next2);
     return next2;
   } : cast;
   let composing = false;
@@ -1395,6 +1457,9 @@ function bindElement(node, prop, getter, setter, modifiers = {}) {
   }
   const runner = effect(() => {
     const value = getModel();
+    if (checkboxArray) {
+      if (isArray(value)) checkboxArraySnapshots.set(value, [...value]);
+    }
     if (ime && composing) return;
     if (ime && !lazy && isFocused(node) && Object.is(cast(read(node)), value)) return;
     write(node, value);
@@ -1405,7 +1470,7 @@ function bindElement(node, prop, getter, setter, modifiers = {}) {
 }
 function unwrapSlotValue(raw) {
   let v = raw;
-  if (Array.isArray(v) && v.length === 1) v = v[0];
+  if (isArray(v) && v.length === 1) v = v[0];
   return isFunction(v) ? v() : v;
 }
 function useChildren(props) {
@@ -1486,7 +1551,9 @@ function Portal(props) {
   if (children == null) return placeholder;
   const parentScope = getActiveScope();
   let innerScope = null;
+  let disposed = false;
   const mountAt = (parent, before) => {
+    if (disposed || (parentScope == null ? void 0 : parentScope.isDestroyed)) return;
     innerScope = createScope(parentScope);
     runWithScope(innerScope, () => {
       insert(parent, () => children, before);
@@ -1499,6 +1566,7 @@ function Portal(props) {
     }
   };
   const apply = (disabled, target) => {
+    if (disposed) return;
     teardown();
     if (disabled) {
       const parent = placeholder.parentNode;
@@ -1531,11 +1599,13 @@ function Portal(props) {
       return;
     }
     queueMicrotask(() => {
+      if (disposed) return;
       if (!placeholder.parentNode) return;
       apply(evalDisabled(props), resolveTarget(props));
     });
   });
   onCleanup(() => {
+    disposed = true;
     effectRunner.stop();
     teardown();
   });
@@ -1581,12 +1651,15 @@ function resolveNodeValue(value) {
   if (isSignal(current) || isComputed(current)) {
     return resolveNodeValue(current.value);
   }
-  if (Array.isArray(current)) {
+  if (isArray(current)) {
     return current.map((item) => resolveNodeValue(item));
   }
   return current;
 }
 var SuspenseContext = /* @__PURE__ */ Symbol("SuspenseContext");
+function isAbortError(error4) {
+  return !!error4 && typeof error4 === "object" && error4.name === "AbortError";
+}
 function Suspense(props) {
   var _a2;
   if (!isBrowser()) {
@@ -1600,10 +1673,14 @@ function Suspense(props) {
   let mounted = true;
   let pending = 0;
   let mounting = false;
+  let boundaryVersion = 0;
+  let currentChildren = null;
   let contentScope = null;
   let parked = null;
   let fallbackScope = null;
   let resolved = null;
+  let hasResolved = false;
+  let manualReleases = [];
   const parkContent = () => {
     const off = document.createDocumentFragment();
     while (end.previousSibling && end.previousSibling !== start) {
@@ -1633,14 +1710,35 @@ function Suspense(props) {
     disposeScope(fallbackScope);
     fallbackScope = null;
   };
-  const mountContent = (children2) => {
+  const disposeContent = () => {
+    if (contentScope) {
+      disposeScope(contentScope);
+      contentScope = null;
+    }
+    if (parked) {
+      while (parked.firstChild) parked.firstChild.remove();
+      parked = null;
+    }
+  };
+  const mountContent = (children) => {
+    const scope = createScope(owner);
     mounting = true;
-    contentScope = createScope(owner);
-    runWithScope(contentScope, () => {
-      var _a3;
-      insert((_a3 = end.parentNode) != null ? _a3 : frag, () => resolveNodeValue(children2), end);
-    });
-    mounting = false;
+    contentScope = scope;
+    try {
+      runWithScope(scope, () => {
+        var _a3;
+        insert((_a3 = end.parentNode) != null ? _a3 : frag, () => resolveNodeValue(children), end);
+      });
+    } catch (error4) {
+      if (contentScope === scope) contentScope = null;
+      disposeScope(scope);
+      pending = 0;
+      manualReleases = [];
+      boundaryVersion++;
+      throw error4;
+    } finally {
+      mounting = false;
+    }
     if (pending && !parked) {
       parkContent();
       mountFallback();
@@ -1654,53 +1752,89 @@ function Suspense(props) {
   };
   const showContent = () => {
     if (!parked) return;
-    const hasSyncChildren = props.children != null && !isPromise(props.children);
-    if (contentScope == null && resolved == null && !hasSyncChildren) return;
+    const hasSyncChildren = currentChildren != null && !isPromise(currentChildren);
+    if (contentScope == null && !hasResolved && !hasSyncChildren) return;
     disposeFallback();
     restoreContent();
     if (!contentScope) {
-      if (resolved) {
+      if (hasResolved) {
         mountContent(resolved);
       } else if (hasSyncChildren) {
-        mountContent(props.children);
+        mountContent(currentChildren);
       }
     }
   };
-  const settle = () => {
+  const addPending = (version = boundaryVersion) => {
+    pending++;
+    showFallback();
+    const release = (() => {
+      if (!release.active) return;
+      release.active = false;
+      if (!mounted || version !== boundaryVersion) return;
+      if (--pending === 0) showContent();
+    });
+    release.active = true;
+    return release;
+  };
+  const settle = (release) => {
     if (!mounted) return;
-    if (--pending === 0) showContent();
+    release();
+  };
+  const dequeueManualRelease = () => {
+    while (manualReleases.length > 0) {
+      const release = manualReleases.shift();
+      if (release.active) return release;
+    }
+    return void 0;
   };
   const ctx = {
     register: (promise) => {
-      pending++;
-      showFallback();
-      promise.then(settle).catch((error4) => {
-        warn("[Suspense] Resource failed:", error4);
-        settle();
-      });
+      const release = addPending();
+      promise.then(
+        () => settle(release),
+        (error4) => {
+          if (!isAbortError(error4)) warn("[Suspense] Resource failed:", error4);
+          settle(release);
+        }
+      );
+      return release;
     },
     increment: () => {
-      pending++;
-      showFallback();
+      const release = addPending();
+      manualReleases.push(release);
+      return release;
     },
     decrement: () => {
-      pending = Math.max(0, pending - 1);
-      if (pending === 0) showContent();
+      const release = dequeueManualRelease();
+      if (release) settle(release);
     }
   };
   provide(SuspenseContext, ctx);
-  const children = props.children;
-  if (isPromise(children)) {
-    children.then((value) => {
-      resolved = value;
-    }).catch(() => {
-    });
-    ctx.register(children);
-  } else if (children != null) {
-    mountContent(children);
-  } else if (props.fallback != null) {
-    showFallback();
-  }
+  const renderChildren = (children) => {
+    const version = ++boundaryVersion;
+    currentChildren = children != null ? children : null;
+    pending = 0;
+    resolved = null;
+    hasResolved = false;
+    manualReleases = [];
+    disposeContent();
+    disposeFallback();
+    if (isPromise(children)) {
+      children.then((value) => {
+        if (!mounted || version !== boundaryVersion) return;
+        resolved = value;
+        hasResolved = true;
+      }).catch(() => {
+      });
+      ctx.register(children);
+    } else if (children != null) {
+      mountContent(children);
+    } else if (props.fallback != null) {
+      showFallback();
+    }
+  };
+  renderChildren(props.children);
+  onUpdate(() => renderChildren(props.children));
   onCleanup(() => {
     mounted = false;
     pending = 0;
@@ -1718,6 +1852,9 @@ Suspense[SUSPENSE_COMPONENT] = true;
 function isSuspense(node) {
   return !!node && !!node[SUSPENSE_COMPONENT];
 }
+function isAbortError2(error4) {
+  return !!error4 && typeof error4 === "object" && error4.name === "AbortError";
+}
 function createResource(fetcher, options) {
   const value = signal(options == null ? void 0 : options.initialValue);
   const loading = signal(true);
@@ -1752,7 +1889,7 @@ function createResource(fetcher, options) {
       }
     } catch (error_) {
       if (id !== fetchId) return;
-      if (error_ instanceof DOMException && error_.name === "AbortError") {
+      if (isAbortError2(error_)) {
         loading.value = false;
         return;
       }
@@ -1807,17 +1944,26 @@ function defineServerAsyncComponent(loader, ssr) {
 function defineClientAsyncComponent(loader, options) {
   const { loading, error: errorComp, delay = 200, timeout, onError } = options;
   let component = null;
-  let error4 = null;
+  let loadError = null;
   let status = "pending";
   let loadPromise = null;
-  const load = () => loadPromise != null ? loadPromise : loadPromise = loader().then((mod) => {
-    component = resolveModule(mod);
-    status = "resolved";
-  }).catch((error_) => {
-    error4 = error_ instanceof Error ? error_ : new Error(String(error_));
-    status = "errored";
-    loadPromise = null;
-  });
+  let loadId = 0;
+  const currentLoad = (id) => id !== loadId ? loadPromise != null ? loadPromise : void 0 : void 0;
+  const load = (forceId) => {
+    if (loadPromise && forceId === void 0) return loadPromise;
+    const id = forceId != null ? forceId : ++loadId;
+    loadPromise = loader().then((mod) => {
+      if (id !== loadId) return currentLoad(id);
+      component = resolveModule(mod);
+      status = "resolved";
+    }).catch((error_) => {
+      if (id !== loadId) return currentLoad(id);
+      loadError = error_ instanceof Error ? error_ : new Error(String(error_));
+      status = "errored";
+      loadPromise = null;
+    });
+    return loadPromise;
+  };
   load();
   function AsyncWrapper(props) {
     var _a2;
@@ -1829,6 +1975,7 @@ function defineClientAsyncComponent(loader, options) {
     let viewScope = null;
     let delayTimer = null;
     let timeoutTimer = null;
+    let instanceRetryId = 0;
     const clearTimers = () => {
       if (delayTimer != null) clearTimeout(delayTimer);
       if (timeoutTimer != null) clearTimeout(timeoutTimer);
@@ -1858,28 +2005,34 @@ function defineClientAsyncComponent(loader, options) {
       end.remove();
     });
     const retryWith = (retryProps) => () => {
+      if (!alive) return;
+      const retryLoadId = ++loadId;
       loadPromise = null;
       status = "pending";
-      error4 = null;
+      loadError = null;
+      instanceRetryId++;
+      const capturedRetry = instanceRetryId;
       if (loading) render(loading);
-      load().then(() => settle(retryProps));
+      load(retryLoadId).then(() => {
+        if (alive && capturedRetry === instanceRetryId) settle(retryProps);
+      });
     };
     const settle = (renderProps) => {
       if (!alive) return;
       clearTimers();
       if (status === "resolved" && component) {
         render(component, renderProps);
-      } else if (status === "errored" && error4) {
-        if (errorComp) render(errorComp, { error: error4, retry: retryWith(renderProps) });
-        if (onError) onError(error4, retryWith(renderProps));
+      } else if (status === "errored" && loadError) {
+        if (errorComp) render(errorComp, { error: loadError, retry: retryWith(renderProps) });
+        if (onError) onError(loadError, retryWith(renderProps));
       }
     };
     if (status === "resolved" && component) {
       render(component, props);
       return frag;
     }
-    if (status === "errored" && error4) {
-      if (errorComp) render(errorComp, { error: error4, retry: retryWith(props) });
+    if (status === "errored" && loadError) {
+      if (errorComp) render(errorComp, { error: loadError, retry: retryWith(props) });
       return frag;
     }
     const pending = load().then(() => settle(props));
@@ -1894,10 +2047,9 @@ function defineClientAsyncComponent(loader, options) {
     if (timeout != null) {
       timeoutTimer = setTimeout(() => {
         if (!alive || status !== "pending") return;
-        error4 = new Error(`[defineAsyncComponent] Timeout after ${timeout}ms`);
-        status = "errored";
-        if (errorComp) render(errorComp, { error: error4, retry: retryWith(props) });
-        if (onError) onError(error4, retryWith(props));
+        const err = new Error(`[defineAsyncComponent] Timeout after ${timeout}ms`);
+        if (errorComp) render(errorComp, { error: err, retry: retryWith(props) });
+        if (onError) onError(err, retryWith(props));
       }, timeout);
     }
     return frag;
@@ -1916,9 +2068,11 @@ function For(props) {
   fragment.appendChild(marker);
   let entries = [];
   let fallbackNodes = [];
+  let fallbackScope = null;
+  const ownerScope = getActiveScope();
   const keyFn = props.key;
   const raw = props.children;
-  const renderFn = Array.isArray(raw) && raw.length === 1 && isFunction(raw[0]) ? raw[0] : props.children;
+  const renderFn = isArray(raw) && raw.length === 1 && isFunction(raw[0]) ? raw[0] : props.children;
   if (!isFunction(renderFn)) {
     throw new TypeError("<For> requires `children` to be a function (item, index) => Node");
   }
@@ -1930,9 +2084,31 @@ function For(props) {
     return input != null ? input : [];
   };
   const getKey = (item, index) => keyFn ? keyFn(item, index) : item;
+  const formatKeyForWarning = (key) => {
+    if (typeof key === "string") return JSON.stringify(key);
+    return String(key);
+  };
+  const getKeys = (items) => {
+    const keys = new Array(items.length);
+    {
+      const seen = /* @__PURE__ */ new Set();
+      for (const [i, item] of items.entries()) {
+        const key = getKey(item, i);
+        keys[i] = key;
+        if (seen.has(key)) {
+          warn(
+            `[For] duplicate key ${formatKeyForWarning(key)} detected. Duplicate keys may cause rows to remount or lose state.`
+          );
+        } else {
+          seen.add(key);
+        }
+      }
+      return keys;
+    }
+  };
   const mountValue = (value, parent, before) => {
     if (value == null || value === false) return [];
-    if (Array.isArray(value)) {
+    if (isArray(value)) {
       const nodes = [];
       for (const child2 of value) nodes.push(...mountValue(child2, parent, before));
       return nodes;
@@ -1946,17 +2122,30 @@ function For(props) {
     return [node];
   };
   const mountFallback = (parent, before) => {
+    var _a2;
     if (!props.fallback) return;
-    const nodes = mountValue(props.fallback(), parent, before);
-    fallbackNodes = nodes;
+    fallbackScope = createScope((_a2 = getActiveScope()) != null ? _a2 : ownerScope);
+    try {
+      runWithScope(fallbackScope, () => {
+        fallbackNodes = mountValue(props.fallback(), parent, before);
+      });
+    } catch (error4) {
+      disposeScope(fallbackScope);
+      fallbackScope = null;
+      fallbackNodes = [];
+      throw error4;
+    }
   };
   const clearFallback = () => {
+    if (fallbackScope) {
+      disposeScope(fallbackScope);
+      fallbackScope = null;
+    }
     for (const node of fallbackNodes) {
       removeNode(node);
     }
     fallbackNodes = [];
   };
-  const ownerScope = getActiveScope();
   const renderItem = (item, index, parent, before, key = getKey(item, index)) => {
     var _a2;
     const parentScope = (_a2 = getActiveScope()) != null ? _a2 : ownerScope;
@@ -1988,10 +2177,9 @@ function For(props) {
         mountFallback(fragment, marker);
       } else {
         entries = new Array(newItems.length);
-        let idx = 0;
-        for (const newItem of newItems) {
-          entries[idx] = renderItem(newItem, idx, fragment, marker);
-          idx++;
+        const newKeys = getKeys(newItems);
+        for (const [i, newItem] of newItems.entries()) {
+          entries[i] = renderItem(newItem, i, fragment, marker, newKeys[i]);
         }
       }
       return;
@@ -2017,10 +2205,13 @@ function For(props) {
       }
       entries = new Array(newLen);
       const batchFragment2 = document.createDocumentFragment();
+      const newKeys2 = getKeys(newItems);
       for (let i = 0; i < newLen; i++) {
-        entries[i] = renderItem(newItems[i], i, batchFragment2, null);
+        entries[i] = renderItem(newItems[i], i, batchFragment2, null, newKeys2[i]);
       }
-      parent.insertBefore(batchFragment2, marker);
+      untrack(() => {
+        parent.insertBefore(batchFragment2, marker);
+      });
       return;
     }
     const oldKeyMap = /* @__PURE__ */ new Map();
@@ -2037,10 +2228,7 @@ function For(props) {
     const newIndexToOldIndex = new Int32Array(newLen);
     let moved = false;
     let maxOldSeen = 0;
-    const newKeys = new Array(newLen);
-    for (let i = 0; i < newLen; i++) {
-      newKeys[i] = getKey(newItems[i], i);
-    }
+    const newKeys = getKeys(newItems);
     for (let i = 0; i < newLen; i++) {
       const item = newItems[i];
       const key = newKeys[i];
@@ -2055,7 +2243,7 @@ function For(props) {
           else maxOldSeen = oldIndex;
         } else {
           if (!batchFragment) batchFragment = document.createDocumentFragment();
-          disposeItem(reused);
+          untrack(() => disposeItem(reused));
           newEntries[i] = renderItem(item, i, batchFragment, null, key);
         }
       } else {
@@ -2066,28 +2254,30 @@ function For(props) {
     for (const list of oldKeyMap.values()) {
       for (const [entry] of list) toRemove.push(entry);
     }
-    for (const entry of toRemove) disposeItem(entry);
-    const lis = moved ? getSequence(newIndexToOldIndex) : [];
-    let lisCursor = lis.length - 1;
-    let nextNode = marker;
-    for (let i = newLen - 1; i >= 0; i--) {
-      const entry = newEntries[i];
-      const nodes = entry.nodes;
-      const isFresh = newIndexToOldIndex[i] === 0;
-      const inLis = !isFresh && moved && lisCursor >= 0 && i === lis[lisCursor];
-      if (inLis) {
-        lisCursor--;
-        for (let j = nodes.length - 1; j >= 0; j--) nextNode = nodes[j];
-        continue;
-      }
-      for (let j = nodes.length - 1; j >= 0; j--) {
-        const node = nodes[j];
-        if (node.nextSibling !== nextNode) {
-          parent.insertBefore(node, nextNode);
+    for (const entry of toRemove) untrack(() => disposeItem(entry));
+    untrack(() => {
+      const lis = moved ? getSequence(newIndexToOldIndex) : [];
+      let lisCursor = lis.length - 1;
+      let nextNode = marker;
+      for (let i = newLen - 1; i >= 0; i--) {
+        const entry = newEntries[i];
+        const nodes = entry.nodes;
+        const isFresh = newIndexToOldIndex[i] === 0;
+        const inLis = !isFresh && moved && lisCursor >= 0 && i === lis[lisCursor];
+        if (inLis) {
+          lisCursor--;
+          for (let j = nodes.length - 1; j >= 0; j--) nextNode = nodes[j];
+          continue;
+        }
+        for (let j = nodes.length - 1; j >= 0; j--) {
+          const node = nodes[j];
+          if (node.nextSibling !== nextNode) {
+            parent.insertBefore(node, nextNode);
+          }
+          nextNode = node;
         }
-        nextNode = node;
       }
-    }
+    });
     entries = newEntries;
   }
   onCleanup(() => {
@@ -2150,21 +2340,40 @@ function addClass(el, cls) {
 function removeClass(el, cls) {
   for (const c of cls.split(/\s+/)) if (c) el.classList.remove(c);
 }
-function nextFrame(cb) {
-  requestAnimationFrame(() => requestAnimationFrame(cb));
+function nextFrameCancellable(cb) {
+  let cancelled = false;
+  let innerId = null;
+  const outerId = requestAnimationFrame(() => {
+    if (cancelled) return;
+    innerId = requestAnimationFrame(cb);
+  });
+  return () => {
+    cancelled = true;
+    cancelAnimationFrame(outerId);
+    if (innerId != null) cancelAnimationFrame(innerId);
+  };
 }
 function forceReflow(el) {
   void el.offsetHeight;
 }
 function whenTransitionEnds(el, type, explicit, resolve2) {
   if (explicit != null) {
-    setTimeout(resolve2, explicit);
-    return;
+    let done2 = false;
+    const timer2 = setTimeout(() => {
+      if (done2) return;
+      done2 = true;
+      resolve2();
+    }, explicit);
+    return () => {
+      done2 = true;
+      clearTimeout(timer2);
+    };
   }
   const info = getTransitionInfo(el, type);
   if (!info) {
     resolve2();
-    return;
+    return () => {
+    };
   }
   let done = false;
   const finish = () => {
@@ -2174,9 +2383,18 @@ function whenTransitionEnds(el, type, explicit, resolve2) {
     el.removeEventListener(info.event, onEnd);
     resolve2();
   };
-  const onEnd = () => finish();
+  const onEnd = (event) => {
+    if (event.target !== el) return;
+    finish();
+  };
   el.addEventListener(info.event, onEnd);
   const timer = setTimeout(finish, info.timeout + 1);
+  return () => {
+    if (done) return;
+    done = true;
+    clearTimeout(timer);
+    el.removeEventListener(info.event, onEnd);
+  };
 }
 function resolveDuration(d, dir) {
   if (d == null) return null;
@@ -2185,7 +2403,7 @@ function resolveDuration(d, dir) {
 }
 function validateSlot(value) {
   if (value == null || value === false) return null;
-  if (Array.isArray(value)) {
+  if (isArray(value)) {
     {
       throw new Error(
         "[essor] <Transition> expects a single root child. Use <TransitionGroup> for multiple children."
@@ -2231,8 +2449,26 @@ function Transition(props) {
   let hasPending = false;
   let scheduled = false;
   let disposed = false;
+  let cancelEnterWait = null;
+  let cancelLeaveWait = null;
+  const stopEnterWait = () => {
+    cancelEnterWait == null ? void 0 : cancelEnterWait();
+    cancelEnterWait = null;
+  };
+  const stopLeaveWait = () => {
+    cancelLeaveWait == null ? void 0 : cancelLeaveWait();
+    cancelLeaveWait = null;
+  };
   const enter = (el, phase) => {
     var _a2;
+    stopEnterWait();
+    let cancelWait = null;
+    const stopWait = () => {
+      cancelWait == null ? void 0 : cancelWait();
+      cancelWait = null;
+      if (cancelEnterWait === stopWait) cancelEnterWait = null;
+    };
+    cancelEnterWait = stopWait;
     const prevLeave = el[LEAVE_CB];
     if (prevLeave) prevLeave(true);
     state = "entering";
@@ -2249,6 +2485,7 @@ function Transition(props) {
       var _a3, _b;
       if (called) return;
       called = true;
+      stopWait();
       el[ENTER_CB] = void 0;
       if (useCss) {
         removeClass(el, fromCls);
@@ -2263,7 +2500,8 @@ function Transition(props) {
       }
     };
     el[ENTER_CB] = done;
-    nextFrame(() => {
+    cancelWait = nextFrameCancellable(() => {
+      cancelWait = null;
       if (called) return;
       if (useCss) {
         removeClass(el, fromCls);
@@ -2273,7 +2511,10 @@ function Transition(props) {
         props.onEnter(el, () => done(false));
       } else if (useCss) {
         const explicit = resolveDuration(props.duration, "enter");
-        whenTransitionEnds(el, props.type, explicit, () => done(false));
+        cancelWait = whenTransitionEnds(el, props.type, explicit, () => {
+          cancelWait = null;
+          done(false);
+        });
       } else {
         done(false);
       }
@@ -2281,6 +2522,14 @@ function Transition(props) {
   };
   const leave = (el, after) => {
     var _a2;
+    stopLeaveWait();
+    let cancelWait = null;
+    const stopWait = () => {
+      cancelWait == null ? void 0 : cancelWait();
+      cancelWait = null;
+      if (cancelLeaveWait === stopWait) cancelLeaveWait = null;
+    };
+    cancelLeaveWait = stopWait;
     const prevEnter = el[ENTER_CB];
     if (prevEnter) {
       prevEnter(true);
@@ -2297,6 +2546,7 @@ function Transition(props) {
       var _a3, _b;
       if (called) return;
       called = true;
+      stopWait();
       el[LEAVE_CB] = void 0;
       if (useCss) {
         removeClass(el, classes.leaveFrom);
@@ -2318,7 +2568,8 @@ function Transition(props) {
       done(false);
       return;
     }
-    nextFrame(() => {
+    cancelWait = nextFrameCancellable(() => {
+      cancelWait = null;
       if (called) return;
       if (useCss) {
         removeClass(el, classes.leaveFrom);
@@ -2327,7 +2578,10 @@ function Transition(props) {
       if (props.onLeave) {
         props.onLeave(el, () => done(false));
       } else if (useCss) {
-        whenTransitionEnds(el, props.type, explicit, () => done(false));
+        cancelWait = whenTransitionEnds(el, props.type, explicit, () => {
+          cancelWait = null;
+          done(false);
+        });
       } else {
         done(false);
       }
@@ -2402,6 +2656,8 @@ function Transition(props) {
   });
   onCleanup(() => {
     disposed = true;
+    stopEnterWait();
+    stopLeaveWait();
     effectRunner.stop();
     for (const el of [currentEl, leavingEl]) {
       if (!el) continue;
@@ -2423,7 +2679,7 @@ function isTransition(node) {
 }
 function resolveItemElement(raw, parent) {
   if (raw == null || raw === false) return { el: null, comp: null };
-  if (Array.isArray(raw) && raw.length === 1) {
+  if (isArray(raw) && raw.length === 1) {
     return resolveItemElement(raw[0], parent);
   }
   if (isFunction(raw)) {
@@ -2478,7 +2734,7 @@ function TransitionGroup(props) {
   const moveClass = (_c = props.moveClass) != null ? _c : `${(_b = props.name) != null ? _b : "v"}-move`;
   const keyFn = props.key;
   const rawChildren = props.children;
-  const childrenFn = Array.isArray(rawChildren) && rawChildren.length === 1 && isFunction(rawChildren[0]) ? rawChildren[0] : props.children;
+  const childrenFn = isArray(rawChildren) && rawChildren.length === 1 && isFunction(rawChildren[0]) ? rawChildren[0] : props.children;
   if (!isFunction(childrenFn) || !isFunction(keyFn)) {
     throw new TypeError(
       "<TransitionGroup> requires `children: (item, index) => Node` and `key: (item, index) => unknown`"
@@ -2529,9 +2785,12 @@ function TransitionGroup(props) {
     if (entry.el.parentNode === wrapper) wrapper.removeChild(entry.el);
   };
   const disposeEntry = (entry) => {
-    var _a3, _b2;
+    var _a3, _b2, _c2, _d, _e;
     (_a3 = entry.cancelEnter) == null ? void 0 : _a3.call(entry, true);
     (_b2 = entry.cancelLeave) == null ? void 0 : _b2.call(entry, true);
+    (_c2 = entry.cancelEnterWait) == null ? void 0 : _c2.call(entry);
+    (_d = entry.cancelLeaveWait) == null ? void 0 : _d.call(entry);
+    (_e = entry.cancelMoveWait) == null ? void 0 : _e.call(entry);
     if (entry.comp) entry.comp.destroy();
     detachEntryDom(entry);
     disposeScope(entry.scope);
@@ -2550,23 +2809,26 @@ function TransitionGroup(props) {
     addClass(el, classes.enterActive);
     let called = false;
     const done = (cancelled) => {
-      var _a4, _b3;
+      var _a4, _b3, _c3;
       if (called) return;
       called = true;
       entry.cancelEnter = void 0;
+      (_a4 = entry.cancelEnterWait) == null ? void 0 : _a4.call(entry);
+      entry.cancelEnterWait = void 0;
       removeClass(el, classes.enterFrom);
       removeClass(el, classes.enterActive);
       removeClass(el, classes.enterTo);
       if (cancelled) {
-        (_a4 = props.onEnterCancelled) == null ? void 0 : _a4.call(props, el);
+        (_b3 = props.onEnterCancelled) == null ? void 0 : _b3.call(props, el);
       } else {
         entry.state = "present";
-        (_b3 = props.onAfterEnter) == null ? void 0 : _b3.call(props, el);
+        (_c3 = props.onAfterEnter) == null ? void 0 : _c3.call(props, el);
       }
     };
     entry.cancelEnter = done;
     entry.state = "entering";
-    nextFrame(() => {
+    entry.cancelEnterWait = nextFrameCancellable(() => {
+      entry.cancelEnterWait = void 0;
       if (called) return;
       removeClass(el, classes.enterFrom);
       addClass(el, classes.enterTo);
@@ -2574,7 +2836,10 @@ function TransitionGroup(props) {
         props.onEnter(el, () => done(false));
       } else {
         const explicit = resolveDuration(props.duration, "enter");
-        whenTransitionEnds(el, props.type, explicit, () => done(false));
+        entry.cancelEnterWait = whenTransitionEnds(el, props.type, explicit, () => {
+          entry.cancelEnterWait = void 0;
+          done(false);
+        });
       }
     });
   };
@@ -2606,17 +2871,19 @@ function TransitionGroup(props) {
     addClass(el, classes.leaveActive);
     let called = false;
     const done = (cancelled) => {
-      var _a4, _b3;
+      var _a4, _b3, _c2;
       if (called) return;
       called = true;
       entry.cancelLeave = void 0;
+      (_a4 = entry.cancelLeaveWait) == null ? void 0 : _a4.call(entry);
+      entry.cancelLeaveWait = void 0;
       removeClass(el, classes.leaveFrom);
       removeClass(el, classes.leaveActive);
       removeClass(el, classes.leaveTo);
       if (cancelled) {
         if (entry.savedStyles) restoreStyles(el, entry.savedStyles);
         entry.savedStyles = void 0;
-        (_a4 = props.onLeaveCancelled) == null ? void 0 : _a4.call(props, el);
+        (_b3 = props.onLeaveCancelled) == null ? void 0 : _b3.call(props, el);
         return;
       }
       if (entry.savedStyles) restoreStyles(el, entry.savedStyles);
@@ -2624,10 +2891,11 @@ function TransitionGroup(props) {
       detachEntryDom(entry);
       disposeScope(entry.scope);
       if (entry.comp) entry.comp.destroy();
-      (_b3 = props.onAfterLeave) == null ? void 0 : _b3.call(props, el);
+      (_c2 = props.onAfterLeave) == null ? void 0 : _c2.call(props, el);
     };
     entry.cancelLeave = done;
-    nextFrame(() => {
+    entry.cancelLeaveWait = nextFrameCancellable(() => {
+      entry.cancelLeaveWait = void 0;
       if (called) return;
       removeClass(el, classes.leaveFrom);
       addClass(el, classes.leaveTo);
@@ -2635,11 +2903,15 @@ function TransitionGroup(props) {
         props.onLeave(el, () => done(false));
       } else {
         const explicit = resolveDuration(props.duration, "leave");
-        whenTransitionEnds(el, props.type, explicit, () => done(false));
+        entry.cancelLeaveWait = whenTransitionEnds(el, props.type, explicit, () => {
+          entry.cancelLeaveWait = void 0;
+          done(false);
+        });
       }
     });
   };
   const runMove = (entry, prevRect) => {
+    var _a3;
     if (!useCss || entry.state !== "present") return;
     const el = entry.el;
     const newRect = el.getBoundingClientRect();
@@ -2655,7 +2927,9 @@ function TransitionGroup(props) {
     el.style.transform = savedTransform;
     el.style.transitionDuration = savedTransition;
     const explicit = resolveDuration(props.duration, "enter");
-    whenTransitionEnds(el, props.type, explicit, () => {
+    (_a3 = entry.cancelMoveWait) == null ? void 0 : _a3.call(entry);
+    entry.cancelMoveWait = whenTransitionEnds(el, props.type, explicit, () => {
+      entry.cancelMoveWait = void 0;
       removeClass(el, moveClass);
     });
   };