@estjs/template 0.0.15-beta.9 → 0.0.16-beta.1

package/dist/template.dev.cjs.js

@@ -3,21 +3,20 @@
 var shared = require('@estjs/shared');
 var signals = require('@estjs/signals');
 
-var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
 };
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -39,14 +38,23 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+
+// src/constants.ts
+var SPREAD_NAME = "_$spread$";
+var REF_KEY = "ref";
+var KEY_PROP = "key";
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var XLINK_NAMESPACE = "http://www.w3.org/2000/xlink";
+var XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
+var FRAGMENT_COMPONENT = /* @__PURE__ */ Symbol("Fragment Component" );
+var PORTAL_COMPONENT = /* @__PURE__ */ Symbol("Portal Component" );
+var SUSPENSE_COMPONENT = /* @__PURE__ */ Symbol("Suspense Component" );
+var FOR_COMPONENT = /* @__PURE__ */ Symbol("For Component" );
 var activeScope = null;
 var scopeId = 0;
 function getActiveScope() {
   return activeScope;
 }
-function setActiveScope(scope) {
-  activeScope = scope;
-}
 function createScope(parent = activeScope) {
   const scope = {
     id: ++scopeId,
@@ -84,52 +92,61 @@ function runWithScope(scope, fn) {
   }
 }
 function disposeScope(scope) {
-  var _a2, _b, _c, _d, _e;
+  var _a2;
   if (!scope || scope.isDestroyed) {
     return;
   }
-  if (scope.children) {
-    while (scope.children.size > 0) {
-      const child = scope.children.values().next().value;
-      if (child) {
-        disposeScope(child);
+  scope.isDestroyed = true;
+  if (scope.children && scope.children.size > 0) {
+    for (const child2 of scope.children) {
+      if (child2) {
+        child2.parent = null;
+        disposeScope(child2);
       }
     }
+    scope.children.clear();
   }
-  if (scope.onDestroy) {
-    for (const hook of scope.onDestroy) {
-      try {
-        hook();
-      } catch (error_) {
-        {
-          shared.error(`Scope(${scope.id}): Error in destroy hook:`, error_);
+  const prevScope = activeScope;
+  activeScope = scope;
+  try {
+    if (scope.onDestroy) {
+      for (let i = 0; i < scope.onDestroy.length; i++) {
+        try {
+          scope.onDestroy[i]();
+        } catch (error_) {
+          if (true) {
+            shared.error(`Scope(${scope.id}): Error in destroy hook:`, error_);
+          }
         }
       }
+      scope.onDestroy = null;
     }
-    scope.onDestroy.clear();
-  }
-  if (scope.cleanup) {
-    for (const fn of scope.cleanup) {
-      try {
-        fn();
-      } catch (error_) {
-        {
-          shared.error(`Scope(${scope.id}): Error in cleanup:`, error_);
+    if (scope.cleanup) {
+      for (let i = 0; i < scope.cleanup.length; i++) {
+        try {
+          scope.cleanup[i]();
+        } catch (error_) {
+          if (true) {
+            shared.error(`Scope(${scope.id}): Error in cleanup:`, error_);
+          }
         }
       }
+      scope.cleanup = null;
     }
-    scope.cleanup.clear();
+  } finally {
+    activeScope = prevScope;
   }
   if ((_a2 = scope.parent) == null ? void 0 : _a2.children) {
     scope.parent.children.delete(scope);
   }
-  (_b = scope.children) == null ? void 0 : _b.clear();
-  (_c = scope.provides) == null ? void 0 : _c.clear();
-  (_d = scope.onMount) == null ? void 0 : _d.clear();
-  (_e = scope.onUpdate) == null ? void 0 : _e.clear();
-  setActiveScope(scope.parent);
+  if (scope.provides) {
+    scope.provides.clear();
+    scope.provides = null;
+  }
+  scope.onMount = null;
+  scope.onUpdate = null;
+  scope.children = null;
   scope.parent = null;
-  scope.isDestroyed = true;
 }
 function onCleanup(fn) {
   const scope = activeScope;
@@ -140,466 +157,453 @@ function onCleanup(fn) {
     return;
   }
   if (!scope.cleanup) {
-    scope.cleanup = /* @__PURE__ */ new Set();
-  }
-  scope.cleanup.add(fn);
-}
-
-// src/constants.ts
-var EVENT_PREFIX = "on";
-var SPREAD_NAME = "_$spread$";
-var REF_KEY = "ref";
-var KEY_PROP = "key";
-var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-var XLINK_NAMESPACE = "http://www.w3.org/2000/xlink";
-var XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
-var MAX_KEY_LENGTH = 1e3;
-var componentKeyPrefixCache = /* @__PURE__ */ new WeakMap();
-function getComponentKey(type) {
-  let prefix = componentKeyPrefixCache.get(type);
-  if (!prefix) {
-    const name = type.name || "anonymous";
-    const hash = simpleHash(type.toString()).toString(36);
-    prefix = `${name}_${hash}`;
-    componentKeyPrefixCache.set(type, prefix);
-  }
-  return prefix;
-}
-function simpleHash(str) {
-  let hash = 0;
-  const len = str.length < 100 ? str.length : 100;
-  for (let i = 0; i < len; i++) {
-    hash = Math.trunc((hash << 5) - hash + str.charCodeAt(i));
+    scope.cleanup = [];
   }
-  return hash < 0 ? -hash : hash;
+  scope.cleanup.push(fn);
 }
-var symbolIdCounter = 0;
-function normalizeKey(key) {
-  if (shared.isFalsy(key)) {
-    return void 0;
-  }
-  if (shared.isString(key)) {
-    if (key.length <= MAX_KEY_LENGTH) {
-      return key;
-    }
-    {
-      shared.warn(
-        `[Key System] Key length exceeds ${MAX_KEY_LENGTH} characters. Consider using a shorter identifier.`
-      );
+function patchAttr(el, key, prev, next2) {
+  if (key === KEY_PROP) {
+    if (next2 == null) {
+      el.removeAttribute(key);
+    } else {
+      el.setAttribute(key, String(next2));
     }
-    return `${key.slice(0, MAX_KEY_LENGTH - 10)}_${simpleHash(key).toString(36)}`;
+    return;
   }
-  if (shared.isNumber(key)) {
+  if (key === SPREAD_NAME) {
+    const prevObj = shared.isObject(prev) ? prev : null;
+    const nextObj = shared.isObject(next2) ? next2 : null;
     {
-      if (key !== key) {
-        shared.warn("[Key System] NaN cannot be used as a key");
-        return void 0;
+      if (next2 != null && !nextObj) {
+        shared.warn("spread attribute must be an object");
       }
-      if (!Number.isFinite(key)) {
-        shared.warn("[Key System] Infinity cannot be used as a key");
-        return void 0;
+    }
+    if (prevObj) {
+      for (const attrKey in prevObj) {
+        if (attrKey === SPREAD_NAME) {
+          {
+            shared.warn("nested spread attributes are ignored");
+          }
+          continue;
+        }
+        if (!nextObj || !(attrKey in nextObj)) {
+          patchAttr(el, attrKey, prevObj[attrKey], null);
+        }
       }
     }
-    return String(key);
-  }
-  if (shared.isSymbol(key)) {
-    const globalKey = Symbol.keyFor(key);
-    if (globalKey) {
-      return `_s.${globalKey}`;
+    if (nextObj) {
+      for (const attrKey in nextObj) {
+        if (attrKey === SPREAD_NAME) {
+          {
+            shared.warn("nested spread attributes are ignored");
+          }
+          continue;
+        }
+        patchAttr(el, attrKey, prevObj == null ? void 0 : prevObj[attrKey], nextObj[attrKey]);
+      }
     }
-    const desc = key.description;
-    return desc ? `_s.${desc}` : `${symbolIdCounter++}`;
+    return;
   }
-  return String(key);
-}
-var NODE_KEY_SYMBOL = /* @__PURE__ */ Symbol("essor.key");
-function setNodeKey(node, key) {
-  if (isComponent(node)) {
+  const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
+  const isXlink = elementIsSVG && key.startsWith("xlink:");
+  const isXmlns = elementIsSVG && key.startsWith("xmlns:");
+  const isBoolean2 = shared.isSpecialBooleanAttr(key) || shared.isBooleanAttr(key);
+  if (prev === next2) {
     return;
   }
-  if (!node || node.nodeType === Node.DOCUMENT_NODE) {
+  if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110) {
+    return;
+  }
+  const lowerKey = key.toLowerCase();
+  if (lowerKey === "innerhtml" || lowerKey === "srcdoc") {
     {
-      shared.warn("[Key System] Cannot set key on invalid node");
+      shared.warn(`${key} updates are ignored by patchAttr`);
     }
     return;
   }
-  const normalizedKey = normalizeKey(key);
-  if (shared.isFalsy(normalizedKey)) {
-    delete node[NODE_KEY_SYMBOL];
-  } else {
-    node[NODE_KEY_SYMBOL] = normalizedKey;
-  }
-}
-function getNodeKey(node) {
-  if (!node) return void 0;
-  return isComponent(node) ? node.key : node[NODE_KEY_SYMBOL];
-}
-
-// src/utils/node.ts
-function normalizeNode(node) {
-  if (shared.isHTMLElement(node)) {
-    return node;
+  if (next2 == null) {
+    if (isXlink) {
+      el.removeAttributeNS(XLINK_NAMESPACE, key.slice(6));
+    } else if (isXmlns) {
+      const localName = key.slice(6);
+      el.removeAttributeNS(XMLNS_NAMESPACE, localName);
+    } else {
+      el.removeAttribute(key);
+    }
+    return;
   }
-  if (shared.isPrimitive(node)) {
-    const textContent = shared.isFalsy(node) ? "" : String(node);
-    return document.createTextNode(textContent);
+  if (isBoolean2) {
+    if (shared.includeBooleanAttr(next2)) {
+      el.setAttribute(key, "");
+    } else {
+      el.removeAttribute(key);
+    }
+    return;
   }
-  return node;
-}
-function isSameNode(a, b) {
-  const keyA = getNodeKey(a);
-  const keyB = getNodeKey(b);
-  if (keyA !== keyB) {
-    return false;
+  const attrValue = shared.isSymbol(next2) ? String(next2) : next2;
+  const isUrlAttr = lowerKey === "href" || lowerKey === "src" || lowerKey === "xlink:href" || lowerKey === "action" || lowerKey === "formaction" || lowerKey === "poster";
+  if (isUrlAttr && shared.isString(attrValue)) {
+    const v = attrValue.trim().toLowerCase();
+    if (v.startsWith("javascript:") || v.startsWith("data:")) {
+      return;
+    }
   }
-  const aIsComponent = isComponent(a);
-  const bIsComponent = isComponent(b);
-  if (aIsComponent && bIsComponent) {
-    return a.component === b.component;
+  if (isXlink) {
+    el.setAttributeNS(XLINK_NAMESPACE, key, String(attrValue));
+    return;
   }
-  if (aIsComponent !== bIsComponent) {
-    return false;
+  if (isXmlns) {
+    el.setAttributeNS(XMLNS_NAMESPACE, key, String(attrValue));
+    return;
   }
-  if (shared.isPrimitive(a) || shared.isPrimitive(b)) {
-    return a === b;
+  if (elementIsSVG) {
+    el.setAttribute(key, String(attrValue));
+  } else {
+    if (key in el) {
+      try {
+        el[key] = attrValue;
+      } catch (e) {
+        el.setAttribute(key, String(attrValue));
+      }
+    } else {
+      el.setAttribute(key, String(attrValue));
+    }
   }
-  const aNode = a;
-  const bNode = b;
-  if (aNode.nodeType !== bNode.nodeType) {
-    return false;
+}
+function patchClass(el, prev, next2, isSVG = false) {
+  if (prev === next2) {
+    return;
   }
-  if (aNode.nodeType === Node.ELEMENT_NODE) {
-    return aNode.tagName === bNode.tagName;
+  const normalizedNext = normalizeClass(next2);
+  if (!normalizedNext) {
+    el.removeAttribute("class");
+    return;
   }
-  return true;
-}
-function shallowCompare(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  if (Array.isArray(a) !== Array.isArray(b)) return false;
-  for (const key in a) {
-    if (a[key] !== b[key]) return false;
+  const normalizedPrev = shared.isString(prev) ? prev : normalizeClass(prev);
+  if (normalizedPrev === normalizedNext) {
+    return;
   }
-  for (const key in b) {
-    if (!(key in a)) return false;
+  if (isSVG) {
+    el.setAttribute("class", normalizedNext);
+  } else {
+    el.className = normalizedNext;
   }
-  return true;
 }
-function removeNode(node) {
-  if (!node) return;
-  try {
-    if (isComponent(node)) {
-      node.destroy();
-    } else {
-      const element = node;
-      if (element.parentElement) {
-        element.remove();
-      }
+var normalizeClass = shared.normalizeClassName;
+var importantRE = /\s*!important$/;
+var prefixes = ["Webkit", "Moz", "ms"];
+var prefixCache = {};
+function patchStyle(el, prev, next2) {
+  const style = el.style;
+  if (next2 && shared.isString(next2)) {
+    if (prev !== next2) {
+      style.cssText = next2;
     }
-  } catch (_error) {
-    shared.error("Failed to remove node:", _error);
+    return;
   }
-}
-function insertNode(parent, child, before) {
-  if (!parent || !child) return;
-  try {
-    const beforeNode = isComponent(before) ? before.firstChild : before;
-    if (isComponent(child)) {
-      child.mount(parent, beforeNode);
-      return;
+  if (!next2) {
+    if (prev) {
+      el.removeAttribute("style");
     }
-    if (beforeNode) {
-      parent.insertBefore(child, beforeNode);
-    } else {
-      if (true) {
-        if (!child) {
-          shared.error("insertNode: child is not a Node", child);
-        }
+    return;
+  }
+  if (prev && !shared.isString(prev)) {
+    const prevObj = prev;
+    for (const key in prevObj) {
+      if (!next2 || next2[key] == null) {
+        setStyle(style, key, "");
+      }
+    }
+  } else if (prev && shared.isString(prev)) {
+    const declRE = /(?:^|;)\s*([a-z][a-z\d-]*)\s*:/gi;
+    let match;
+    while ((match = declRE.exec(prev)) !== null) {
+      const key = match[1].trim();
+      if (key && next2 && shared.isObject(next2) && next2[key] == null) {
+        setStyle(style, key, "");
       }
-      parent.appendChild(child);
     }
-  } catch (_error) {
-    shared.error("Failed to insert node:", _error);
   }
-}
-function replaceNode(parent, newNode, oldNode) {
-  if (!parent || !newNode || !oldNode || newNode === oldNode) return;
-  try {
-    const beforeNode = isComponent(oldNode) ? oldNode.beforeNode : oldNode.nextSibling;
-    removeNode(oldNode);
-    insertNode(parent, newNode, beforeNode);
-  } catch (_error) {
-    shared.error("Failed to replace node:", _error);
+  if (next2 && !shared.isString(next2)) {
+    const nextObj = next2;
+    for (const key in nextObj) {
+      const value = nextObj[key];
+      if ((!prev || shared.isString(prev) || prev[key] !== value) && value != null) {
+        setStyle(style, key, value);
+      }
+    }
   }
 }
-function getFirstDOMNode(node) {
-  if (!node) {
+function setStyle(style, name, val) {
+  if (shared.isArray(val)) {
+    for (const element of val) {
+      setStyle(style, name, element);
+    }
     return;
   }
-  if (isComponent(node)) {
-    return node.firstChild;
-  }
-  if (shared.isPrimitive(node)) {
-    return void 0;
+  if (val == null || val === "") {
+    val = "";
   }
-  return node;
-}
-function transferKey(oldNode, newNode) {
-  if (isComponent(oldNode) || isComponent(newNode)) {
+  if (name.startsWith("--")) {
+    style.setProperty(name, val);
     return;
   }
-  const oldKey = getNodeKey(oldNode);
-  if (oldKey && !getNodeKey(newNode)) {
-    setNodeKey(newNode, oldKey);
+  const prefixed = autoPrefix(style, name);
+  if (shared.isString(val) && importantRE.test(val)) {
+    style.setProperty(shared.camelCase(prefixed), val.replace(importantRE, ""), "important");
+  } else {
+    style[prefixed] = val;
   }
 }
-function patch(parent, oldNode, newNode) {
-  if (newNode === oldNode) {
-    return oldNode;
+function autoPrefix(style, rawName) {
+  const cached = prefixCache[rawName];
+  if (cached) {
+    return cached;
+  }
+  let name = shared.camelCase(rawName);
+  if (name !== "filter" && name in style) {
+    return prefixCache[rawName] = name;
+  }
+  name = shared.capitalize(name);
+  for (const prefix of prefixes) {
+    const prefixed = prefix + name;
+    if (prefixed in style) {
+      return prefixCache[rawName] = prefixed;
+    }
   }
-  const oldIsElement = shared.isHTMLElement(oldNode);
-  const newIsElement = shared.isHTMLElement(newNode);
-  if (newIsElement && oldIsElement) {
-    if (newNode.isEqualNode(oldNode)) {
-      return oldNode;
+  return rawName;
+}
+
+// src/hydration.ts
+var _hydrationKey = 0;
+function getHydrationKey() {
+  return String(_hydrationKey++);
+}
+function resetHydrationKey() {
+  _hydrationKey = 0;
+}
+var _isHydrating = false;
+function isHydrating() {
+  return _isHydrating;
+}
+var _registry = /* @__PURE__ */ new Map();
+function gatherHydratable(root) {
+  const nodes = root.querySelectorAll("[data-hk]");
+  for (const node of nodes) {
+    const key = node.dataset.hk;
+    if (key != null && !_registry.has(key)) {
+      _registry.set(key, node);
     }
-    if (oldNode.tagName === newNode.tagName) {
-      const oldAttrs = oldNode.attributes;
-      const newAttrs = newNode.attributes;
-      for (let i = oldAttrs.length - 1; i >= 0; i--) {
-        const attrName = oldAttrs[i].name;
-        if (!newNode.hasAttribute(attrName)) {
-          oldNode.removeAttribute(attrName);
-        }
-      }
-      for (let i = 0, len = newAttrs.length; i < len; i++) {
-        const attr = newAttrs[i];
-        if (oldNode.getAttribute(attr.name) !== attr.value) {
-          oldNode.setAttribute(attr.name, attr.value);
-        }
+  }
+}
+var _teleportCallsiteAnchors = [];
+var _teleportTargetStarts = /* @__PURE__ */ new Map();
+function gatherTeleportAnchors() {
+  if (typeof document === "undefined") return;
+  const walker = document.createNodeIterator(document.body, NodeFilter.SHOW_COMMENT);
+  let node;
+  while (node = walker.nextNode()) {
+    const data = node.data;
+    if (data === "teleport-anchor") {
+      _teleportCallsiteAnchors.push(node);
+    } else if (data === "teleport-start") {
+      const parent = node.parentElement;
+      if (!parent) continue;
+      let bucket = _teleportTargetStarts.get(parent);
+      if (!bucket) {
+        bucket = [];
+        _teleportTargetStarts.set(parent, bucket);
       }
-      transferKey(oldNode, newNode);
-      return oldNode;
+      bucket.push(node);
     }
   }
-  if (shared.isTextNode(oldNode) && shared.isTextNode(newNode)) {
-    if (oldNode.textContent !== newNode.textContent) {
-      oldNode.textContent = newNode.textContent;
+}
+function consumeTeleportAnchor() {
+  var _a2;
+  return (_a2 = _teleportCallsiteAnchors.shift()) != null ? _a2 : null;
+}
+function consumeTeleportBlock(target) {
+  const bucket = _teleportTargetStarts.get(target);
+  const start = bucket == null ? void 0 : bucket.shift();
+  if (!start) return null;
+  const nodes = [];
+  let cursor = start.nextSibling;
+  while (cursor) {
+    if (cursor.nodeType === Node.COMMENT_NODE && cursor.data === "teleport-end") {
+      return { start, end: cursor, nodes };
     }
-    transferKey(oldNode, newNode);
-    return oldNode;
+    nodes.push(cursor);
+    cursor = cursor.nextSibling;
   }
-  const oldIsComponent = isComponent(oldNode);
-  const newIsComponent = isComponent(newNode);
-  if (oldIsComponent && newIsComponent) {
-    if (oldNode.component === newNode.component) {
-      return newNode.update(oldNode);
-    }
+  {
+    shared.warn("[Portal] hydration: orphaned <!--teleport-start--> without matching <!--teleport-end-->");
   }
-  replaceNode(parent, newNode, oldNode);
-  return newNode;
+  return null;
 }
-function patchChildren(parent, oldChildren, newChildren, anchor) {
-  const oldLength = oldChildren.length;
-  const newLength = newChildren.length;
-  if (oldLength === 0 && newLength === 0) {
-    return [];
+function beginHydration(root) {
+  _isHydrating = true;
+  _hydrationKey = 0;
+  _registry.clear();
+  _teleportCallsiteAnchors.length = 0;
+  _teleportTargetStarts.clear();
+  gatherHydratable(root);
+  gatherTeleportAnchors();
+}
+function endHydration() {
+  _isHydrating = false;
+  _registry.clear();
+  _teleportCallsiteAnchors.length = 0;
+  _teleportTargetStarts.clear();
+}
+function getRenderedElement(html) {
+  if (!shared.isBrowser()) {
+    return () => {
+      throw new Error("[essor] getRenderedElement called in non-browser environment");
+    };
   }
+  let _csrFactory = null;
+  return () => {
+    if (!_isHydrating) {
+      if (!_csrFactory) _csrFactory = template(html);
+      return _csrFactory();
+    }
+    const key = getHydrationKey();
+    const node = _registry.get(key);
+    if (node) {
+      _registry.delete(key);
+      return node;
+    }
+    shared.warn(`[essor] hydration mismatch: no SSR element for key "${key}"`);
+    if (!_csrFactory) _csrFactory = template(html);
+    return _csrFactory();
+  };
+}
+function patchClassHydrate(el, prev, next2, isSVG) {
+  if (_isHydrating) return;
+  patchClass(el, prev, next2, isSVG);
+}
+function patchAttrHydrate(el, key, prev, next2) {
+  if (_isHydrating) return;
+  patchAttr(el, key, prev, next2);
+}
+function patchStyleHydrate(el, prev, next2) {
+  if (_isHydrating) return;
+  patchStyle(el, prev, next2);
+}
+
+// src/reconcile.ts
+function resolveInsertAnchor(parent, candidate) {
+  return candidate && candidate.parentNode === parent ? candidate : null;
+}
+function reconcileArrays(parent, oldNodes, newNodes, anchor) {
+  const fallbackAnchor = resolveInsertAnchor(parent, anchor);
+  const oldLength = oldNodes.length;
+  const newLength = newNodes.length;
+  if (oldLength === 0 && newLength === 0) return newNodes;
   if (oldLength === 0) {
     for (let i = 0; i < newLength; i++) {
-      insertNode(parent, newChildren[i], anchor);
+      insertNode(parent, newNodes[i], fallbackAnchor);
     }
-    return newChildren;
+    return newNodes;
   }
   if (newLength === 0) {
     for (let i = 0; i < oldLength; i++) {
-      removeNode(oldChildren[i]);
+      removeNode(oldNodes[i]);
     }
     return [];
   }
-  if (oldLength === 1 && newLength === 1) {
-    const oldNode = oldChildren[0];
-    const newNode = newChildren[0];
-    if (isSameNode(oldNode, newNode)) {
-      patch(parent, oldNode, newNode);
-      newChildren[0] = oldNode;
-    } else {
-      replaceNode(parent, newNode, oldNode);
-    }
-    return newChildren;
-  }
-  if (oldLength === 2 && newLength === 2) {
-    const o0 = oldChildren[0];
-    const o1 = oldChildren[1];
-    const n0 = newChildren[0];
-    const n1 = newChildren[1];
-    if (isSameNode(o0, n0) && isSameNode(o1, n1)) {
-      patch(parent, o0, n0);
-      patch(parent, o1, n1);
-      newChildren[0] = o0;
-      newChildren[1] = o1;
-      return newChildren;
-    }
-    if (isSameNode(o0, n1) && isSameNode(o1, n0)) {
-      patch(parent, o0, n1);
-      patch(parent, o1, n0);
-      const dom1 = getFirstDOMNode(o1);
-      const dom0 = getFirstDOMNode(o0);
-      if (dom1 && dom0 && dom1.parentNode === parent) {
-        parent.insertBefore(dom1, dom0);
-      }
-      newChildren[0] = o1;
-      newChildren[1] = o0;
-      return newChildren;
-    }
-  }
-  return patchKeyedChildren(parent, oldChildren, newChildren, anchor);
-}
-function patchKeyedChildren(parent, oldChildren, newChildren, anchor) {
-  let oldStartIdx = 0;
-  let newStartIdx = 0;
-  let oldEndIdx = oldChildren.length - 1;
-  let newEndIdx = newChildren.length - 1;
-  let oldStartNode = oldChildren[0];
-  let oldEndNode = oldChildren[oldEndIdx];
-  let newStartNode = newChildren[0];
-  let newEndNode = newChildren[newEndIdx];
-  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-    if (!oldStartNode) {
-      oldStartNode = oldChildren[++oldStartIdx];
-    } else if (!oldEndNode) {
-      oldEndNode = oldChildren[--oldEndIdx];
-    } else if (isSameNode(oldStartNode, newStartNode)) {
-      patch(parent, oldStartNode, newStartNode);
-      newChildren[newStartIdx] = oldStartNode;
-      oldStartNode = oldChildren[++oldStartIdx];
-      newStartNode = newChildren[++newStartIdx];
+  let start = 0;
+  let oldEnd = oldLength - 1;
+  let newEnd = newLength - 1;
+  while (start <= oldEnd && start <= newEnd) {
+    if (oldNodes[start] === newNodes[start]) {
+      start++;
     } else {
       break;
     }
   }
-  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-    if (!oldStartNode) {
-      oldStartNode = oldChildren[++oldStartIdx];
-    } else if (!oldEndNode) {
-      oldEndNode = oldChildren[--oldEndIdx];
-    } else if (isSameNode(oldEndNode, newEndNode)) {
-      patch(parent, oldEndNode, newEndNode);
-      newChildren[newEndIdx] = oldEndNode;
-      oldEndNode = oldChildren[--oldEndIdx];
-      newEndNode = newChildren[--newEndIdx];
+  while (oldEnd >= start && newEnd >= start) {
+    if (oldNodes[oldEnd] === newNodes[newEnd]) {
+      oldEnd--;
+      newEnd--;
     } else {
       break;
     }
   }
-  if (oldStartIdx > oldEndIdx) {
-    if (newStartIdx <= newEndIdx) {
-      const anchorNode = newEndIdx + 1 < newChildren.length ? getFirstDOMNode(newChildren[newEndIdx + 1]) : anchor;
-      for (let i = newStartIdx; i <= newEndIdx; i++) {
-        insertNode(parent, newChildren[i], anchorNode);
+  if (start > oldEnd) {
+    if (start <= newEnd) {
+      const nextPos = newEnd + 1;
+      const nextNode = resolveInsertAnchor(
+        parent,
+        nextPos < newLength ? newNodes[nextPos] : fallbackAnchor
+      );
+      for (let i = start; i <= newEnd; i++) {
+        insertNode(parent, newNodes[i], nextNode);
       }
     }
-  } else if (newStartIdx > newEndIdx) {
-    for (let i = oldStartIdx; i <= oldEndIdx; i++) {
-      const node = oldChildren[i];
-      if (node) {
-        removeNode(node);
-      }
+  } else if (start > newEnd) {
+    for (let i = start; i <= oldEnd; i++) {
+      removeNode(oldNodes[i]);
     }
   } else {
-    patchUnknownSequence(
-      parent,
-      oldChildren,
-      newChildren,
-      oldStartIdx,
-      oldEndIdx,
-      newStartIdx,
-      newEndIdx,
-      anchor
-    );
+    reconcileUnknownSequence(parent, oldNodes, newNodes, start, oldEnd, newEnd, fallbackAnchor);
   }
-  return newChildren;
+  return newNodes;
 }
-function patchUnknownSequence(parent, oldChildren, newChildren, oldStartIdx, oldEndIdx, newStartIdx, newEndIdx, anchor) {
-  const newLength = newEndIdx - newStartIdx + 1;
-  let keyToNewIndexMap;
-  for (let i = newStartIdx; i <= newEndIdx; i++) {
-    const key = getNodeKey(newChildren[i]);
-    if (key !== void 0) {
-      if (!keyToNewIndexMap) {
-        keyToNewIndexMap = /* @__PURE__ */ Object.create(null);
-      }
-      keyToNewIndexMap[key] = i;
-    }
+function reconcileUnknownSequence(parent, oldNodes, newNodes, start, oldEnd, newEnd, anchor) {
+  const newLength = newEnd - start + 1;
+  const newIndexMap = /* @__PURE__ */ new Map();
+  for (let i = start; i <= newEnd; i++) {
+    newIndexMap.set(newNodes[i], i);
   }
   const newIndexToOldIndexMap = new Int32Array(newLength);
+  newIndexToOldIndexMap.fill(0);
+  let patched = 0;
   let moved = false;
   let maxNewIndexSoFar = 0;
-  let patched = 0;
-  for (let i = oldStartIdx; i <= oldEndIdx; i++) {
-    const oldNode = oldChildren[i];
-    if (!oldNode) continue;
+  for (let i = start; i <= oldEnd; i++) {
+    const oldNode = oldNodes[i];
     if (patched >= newLength) {
       removeNode(oldNode);
       continue;
     }
-    let newIndex;
-    const oldKey = getNodeKey(oldNode);
-    if (oldKey !== void 0 && keyToNewIndexMap && oldKey in keyToNewIndexMap) {
-      newIndex = keyToNewIndexMap[oldKey];
-    } else {
-      for (let j2 = newStartIdx; j2 <= newEndIdx; j2++) {
-        if (newIndexToOldIndexMap[j2 - newStartIdx] === 0 && oldKey === void 0 && getNodeKey(newChildren[j2]) === void 0 && isSameNode(oldNode, newChildren[j2])) {
-          newIndex = j2;
-          break;
-        }
-      }
-    }
+    const newIndex = newIndexMap.get(oldNode);
     if (newIndex === void 0) {
       removeNode(oldNode);
     } else {
-      newIndexToOldIndexMap[newIndex - newStartIdx] = i + 1;
+      newIndexToOldIndexMap[newIndex - start] = i + 1;
       if (newIndex >= maxNewIndexSoFar) {
         maxNewIndexSoFar = newIndex;
       } else {
         moved = true;
       }
-      patch(parent, oldNode, newChildren[newIndex]);
-      newChildren[newIndex] = oldNode;
       patched++;
     }
   }
   const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : [];
   let j = increasingNewIndexSequence.length - 1;
-  let cachedAnchor = anchor;
   for (let i = newLength - 1; i >= 0; i--) {
-    const nextIndex = newStartIdx + i;
-    const nextNode = newChildren[nextIndex];
+    const nextIndex = start + i;
+    const nextNode = newNodes[nextIndex];
+    const anchorNode = resolveInsertAnchor(
+      parent,
+      nextIndex + 1 < newNodes.length ? newNodes[nextIndex + 1] : anchor
+    );
     if (newIndexToOldIndexMap[i] === 0) {
-      insertNode(parent, nextNode, cachedAnchor);
-      cachedAnchor = getFirstDOMNode(nextNode) || cachedAnchor;
+      insertNode(parent, nextNode, anchorNode);
     } else if (moved) {
       if (j < 0 || i !== increasingNewIndexSequence[j]) {
-        const domNode = getFirstDOMNode(nextNode);
-        if (domNode && domNode.parentNode === parent) {
-          insertNode(parent, domNode, cachedAnchor);
-        }
-        cachedAnchor = domNode || cachedAnchor;
+        insertNode(parent, nextNode, anchorNode);
       } else {
-        cachedAnchor = getFirstDOMNode(nextNode) || cachedAnchor;
         j--;
       }
-    } else {
-      cachedAnchor = getFirstDOMNode(nextNode) || cachedAnchor;
     }
   }
 }
 function getSequence(arr) {
+  const p = new Int32Array(arr.length);
+  const result = [0];
   const len = arr.length;
-  if (len === 0) return [];
-  if (len === 1) return arr[0] !== 0 ? [0] : [];
-  const result = [];
-  const p = new Int32Array(len);
   let i;
   let j;
   let u;
@@ -609,7 +613,7 @@ function getSequence(arr) {
     const arrI = arr[i];
     if (arrI !== 0) {
       j = result[result.length - 1];
-      if (result.length === 0 || arr[j] < arrI) {
+      if (arr[j] < arrI) {
         p[i] = j;
         result.push(i);
         continue;
@@ -641,273 +645,251 @@ function getSequence(arr) {
   return result;
 }
 
-// src/utils/shared.ts
-var isHydrationActive = false;
-function startHydration() {
-  isHydrationActive = true;
+// src/dom.ts
+function removeNode(node) {
+  if (!node) return;
+  if (isComponent(node)) {
+    node.destroy();
+  } else {
+    const element = node;
+    if (element.parentNode) {
+      element.remove();
+    }
+  }
 }
-function endHydration() {
-  isHydrationActive = false;
+function insertNode(parent, child2, before) {
+  if (!parent || !child2) return;
+  const beforeNode = isComponent(before) ? before.firstChild : before;
+  if (isComponent(child2)) {
+    child2.mount(parent, beforeNode);
+    return;
+  }
+  if (beforeNode) {
+    parent.insertBefore(child2, beforeNode);
+  } else {
+    {
+      if (!child2) {
+        shared.error("insertNode: child is not a Node", child2);
+      }
+    }
+    parent.appendChild(child2);
+  }
 }
-function isHydrating() {
-  return isHydrationActive;
-}
-
-// src/binding.ts
-function addEventListener(element, event, handler, options) {
-  element.addEventListener(event, handler, options);
-  onCleanup(() => {
-    element.removeEventListener(event, handler, options);
-  });
-}
-function bindElement(node, key, defaultValue, setter) {
-  if (shared.isHtmlInputElement(node)) {
-    bindInputElement(node, setter);
-  } else if (shared.isHtmlSelectElement(node)) {
-    bindSelectElement(node, setter);
-  } else if (shared.isHtmlTextAreaElement(node)) {
-    addEventListener(node, "input", () => {
-      setter(node.value);
-    });
-  }
-}
-function bindInputElement(node, setter) {
-  switch (node.type) {
-    case "checkbox":
-      addEventListener(node, "change", () => {
-        setter(Boolean(node.checked));
-      });
-      break;
-    case "radio":
-      addEventListener(node, "change", () => {
-        setter(node.checked ? node.value : "");
-      });
-      break;
-    case "file":
-      addEventListener(node, "change", () => {
-        setter(node.files);
-      });
-      break;
-    case "number":
-    case "range":
-      addEventListener(node, "input", () => {
-        setter(node.value || "");
-      });
-      break;
-    case "date":
-    case "datetime-local":
-    case "month":
-    case "time":
-    case "week":
-      addEventListener(node, "change", () => {
-        setter(node.value || "");
-      });
-      break;
-    default:
-      addEventListener(node, "input", () => {
-        setter(node.value);
-      });
-      break;
+function normalizeNode(node) {
+  if (shared.isHTMLElement(node)) {
+    return node;
   }
-}
-function bindSelectElement(node, setter) {
-  addEventListener(node, "change", () => {
-    if (node.multiple) {
-      const values = Array.from(node.options).filter((option) => option.selected).map((option) => option.value);
-      setter(values);
-    } else {
-      setter(node.value);
-    }
-  });
-}
-var isFirstRun = true;
-function executeReactiveUpdate(ownerScope, parent, nodeFactory, before, renderedNodes) {
-  const executeUpdate = () => {
-    const rawNodes = shared.isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
-    const nodes = shared.coerceArray(rawNodes).map((item) => shared.isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
-    if (isFirstRun && isHydrating()) {
-      isFirstRun = false;
-      return renderedNodes;
-    }
-    return patchChildren(parent, renderedNodes, nodes, before);
-  };
-  if (ownerScope && !ownerScope.isDestroyed) {
-    return runWithScope(ownerScope, executeUpdate);
+  if (shared.isPrimitive(node)) {
+    return document.createTextNode(shared.isFalsy(node) ? "" : String(node));
   }
-  return executeUpdate();
+  return node;
 }
 function insert(parent, nodeFactory, before) {
   if (!parent) return;
   const ownerScope = getActiveScope();
   let renderedNodes = [];
-  const cleanup = signals.effect(() => {
-    renderedNodes = executeReactiveUpdate(ownerScope, parent, nodeFactory, before, renderedNodes);
+  let isFirstRun = true;
+  const resolveNodes = (raw) => {
+    if (raw instanceof Node) return [raw];
+    if (shared.isNull(raw) || shared.isUndefined(raw) || shared.isString(raw) || shared.isNumber(raw) || shared.isBoolean(raw)) {
+      return [normalizeNode(raw)];
+    }
+    return shared.coerceArray(raw).map((item) => shared.isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
+  };
+  const effectRunner = signals.effect(() => {
+    const executeUpdate = () => {
+      const rawNodes = shared.isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
+      const nodes = resolveNodes(rawNodes);
+      if (isFirstRun && isHydrating() && nodes.every((node) => node instanceof Node && node.parentNode === parent)) {
+        renderedNodes = nodes;
+        isFirstRun = false;
+        return;
+      }
+      renderedNodes = reconcileArrays(parent, renderedNodes, nodes, before);
+      isFirstRun = false;
+    };
+    if (ownerScope && !ownerScope.isDestroyed) {
+      runWithScope(ownerScope, executeUpdate);
+    } else {
+      executeUpdate();
+    }
   });
   onCleanup(() => {
-    cleanup();
-    renderedNodes.forEach((node) => removeNode(node));
-    renderedNodes.length = 0;
+    effectRunner.stop();
+    for (const node of renderedNodes) removeNode(node);
+    renderedNodes = [];
   });
   return renderedNodes;
 }
-function mapNodes(template2, indexes) {
-  const len = indexes.length;
-  const tree = new Array(len);
-  const indexSet = new Set(indexes);
-  let index = 1;
-  let found = 0;
-  const walk = (node) => {
-    if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-      if (indexSet.has(index)) {
-        tree[found++] = node;
-        if (found === len) return true;
-      }
-      index++;
-    }
-    let child = node.firstChild;
-    while (child) {
-      if (walk(child)) return true;
-      child = child.nextSibling;
+function child(node) {
+  return (node == null ? void 0 : node.firstChild) || null;
+}
+function next(node, step = 1) {
+  while (node && step > 0) {
+    node = node.nextSibling;
+    step--;
+  }
+  return node || null;
+}
+function nthChild(node, index) {
+  if (!node || index < 0) return null;
+  let current = node.firstChild;
+  while (current && index > 0) {
+    current = current.nextSibling;
+    index--;
+  }
+  return current || null;
+}
+
+// src/operations/event.ts
+function addEvent(el, event, handler, options) {
+  if (!(options == null ? void 0 : options.delegate)) {
+    el.addEventListener(event, handler, options);
+    return () => el.removeEventListener(event, handler, options);
+  }
+  const selector = options.delegate;
+  const wrappedHandler = (e) => {
+    const target = e.target;
+    if (target.matches(selector) || target.closest(selector)) {
+      handler.call(el, e);
     }
-    return false;
   };
-  walk(template2);
-  return tree;
+  const _a2 = options, { delegate: _ } = _a2, nativeOptions = __objRest(_a2, ["delegate"]);
+  el.addEventListener(event, wrappedHandler, nativeOptions);
+  return () => {
+    el.removeEventListener(event, wrappedHandler, nativeOptions);
+  };
 }
-function registerMountHook(hook) {
+function registerScopedHook(scope, listKey, hook) {
+  let hookList = scope[listKey];
+  if (!hookList) {
+    hookList = [];
+    scope[listKey] = hookList;
+  }
+  hookList.push(hook);
+}
+function executeHooks(hooks, scopeId2, phase) {
+  const len = hooks.length;
+  if (len === 0) return;
+  let pending;
+  for (let i = 0; i < len; i++) {
+    try {
+      const result = hooks[i]();
+      if (shared.isPromise(result)) {
+        const safePromise = result.catch((error_) => {
+          if (true) {
+            shared.error(`Scope(${scopeId2}): Async ${phase} hook rejected:`, error_);
+          }
+        });
+        (pending || (pending = [])).push(safePromise);
+      }
+    } catch (error_) {
+      {
+        shared.error(`Scope(${scopeId2}): Error in ${phase} hook:`, error_);
+      }
+    }
+  }
+  if (!pending) return;
+  return Promise.all(pending).then(() => {
+  });
+}
+function onMount(hook) {
   const scope = getActiveScope();
   if (!scope) {
-    {
-      shared.error("onMount() must be called within a scope");
-    }
+    shared.error("onMount() must be called within a scope");
     return;
   }
   if (scope.isMounted) {
     try {
-      hook();
-    } catch (error_) {
-      {
-        shared.error(`Scope(${scope.id}): Error in mount hook:`, error_);
+      const result = hook();
+      if (shared.isPromise(result)) {
+        result.catch((error_) => {
+          if (true) shared.error(`Scope(${scope.id}): Async mount hook rejected:`, error_);
+        });
       }
+    } catch (error_) {
+      shared.error(`Scope(${scope.id}): Error in mount hook:`, error_);
     }
     return;
   }
-  if (!scope.onMount) {
-    scope.onMount = /* @__PURE__ */ new Set();
-  }
-  scope.onMount.add(hook);
+  registerScopedHook(scope, "onMount", hook);
 }
-function registerUpdateHook(hook) {
+function onUpdate(hook) {
   const scope = getActiveScope();
   if (!scope) {
-    {
-      shared.error("onUpdate() must be called within a scope");
-    }
+    shared.error("onUpdate() must be called within a scope");
     return;
   }
-  if (!scope.onUpdate) {
-    scope.onUpdate = /* @__PURE__ */ new Set();
-  }
-  scope.onUpdate.add(hook);
+  registerScopedHook(scope, "onUpdate", hook);
 }
-function registerDestroyHook(hook) {
+function onDestroy(hook) {
   const scope = getActiveScope();
   if (!scope) {
-    {
-      shared.error("onDestroy() must be called within a scope");
-    }
+    shared.error("onDestroy() must be called within a scope");
     return;
   }
-  if (!scope.onDestroy) {
-    scope.onDestroy = /* @__PURE__ */ new Set();
-  }
-  scope.onDestroy.add(hook);
+  registerScopedHook(scope, "onDestroy", hook);
 }
 function triggerMountHooks(scope) {
-  if (!scope || scope.isDestroyed || scope.isMounted) {
+  if (scope.isDestroyed) {
     return;
   }
-  scope.isMounted = true;
-  if (scope.onMount) {
-    runWithScope(scope, () => {
-      for (const hook of scope.onMount) {
-        try {
-          hook();
-        } catch (error_) {
-          if (true) {
-            shared.error(`Scope(${scope.id}): Error in mount hook:`, error_);
-          }
-        }
-      }
-    });
+  if (!scope.onMount || scope.onMount.length === 0) {
+    scope.isMounted = true;
+    return;
   }
+  const mountHooks = scope.onMount;
+  const result = runWithScope(scope, () => executeHooks(mountHooks, scope.id, "mount"));
+  mountHooks.length = 0;
+  scope.isMounted = true;
+  return result;
 }
 function triggerUpdateHooks(scope) {
-  if (!scope || scope.isDestroyed) {
-    return;
+  if (scope.isDestroyed || !scope.onUpdate || scope.onUpdate.length === 0) return;
+  return runWithScope(scope, () => executeHooks(scope.onUpdate, scope.id, "update"));
+}
+
+// src/component.ts
+function syncDescriptors(target, source, pruneMissing = false) {
+  const seen = pruneMissing ? /* @__PURE__ */ new Set() : null;
+  for (const key of Object.getOwnPropertyNames(source)) {
+    seen == null ? void 0 : seen.add(key);
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
   }
-  if (scope.onUpdate) {
-    for (const hook of scope.onUpdate) {
-      try {
-        hook();
-      } catch (error_) {
-        {
-          shared.error(`Scope(${scope.id}): Error in update hook:`, error_);
-        }
-      }
+  if (seen) {
+    for (const key of Object.getOwnPropertyNames(target)) {
+      if (!seen.has(key)) delete target[key];
     }
   }
 }
-function onMount(hook) {
-  registerMountHook(hook);
-}
-function onDestroy(hook) {
-  registerDestroyHook(hook);
-}
-function onUpdate(hook) {
-  registerUpdateHook(hook);
+function readProp(source, key) {
+  const descriptor = Object.getOwnPropertyDescriptor(source, key);
+  return descriptor.get ? descriptor.get.call(source) : descriptor.value;
 }
-
-// src/component.ts
 var _a;
 _a = "normal" /* NORMAL */;
 var Component = class {
   constructor(component, props = {}) {
     this.component = component;
     this.props = props;
-    // component rendered nodes (supports arrays and fragments)
-    this.renderedNodes = [];
-    // component scope (unified context management)
+    this[_a] = true;
     this.scope = null;
-    // component parent node
-    this.parentNode = void 0;
-    // component before node
-    this.beforeNode = void 0;
-    // component reactive props
-    this.reactiveProps = {};
-    // component state
     this.state = 0 /* INITIAL */;
-    // parent scope captured at construction time
-    this.parentScope = null;
-    // component type
-    // @ts-ignore
-    this[_a] = true;
-    this.key = props.key ? normalizeKey(props.key) : getComponentKey(component);
-    this.reactiveProps = signals.shallowReactive(__spreadValues({}, props || {}));
+    this.beforeNode = void 0;
+    this.renderedNodes = [];
+    this.firstChild = void 0;
+    this.parentNode = void 0;
+    this.rootEventCleanups = [];
     this.parentScope = getActiveScope();
+    const container = {};
+    syncDescriptors(container, props);
+    this.reactiveProps = signals.shallowReactive(container);
   }
-  get isConnected() {
-    return this.state === 2 /* MOUNTED */;
-  }
-  get firstChild() {
-    for (const node of this.renderedNodes) {
-      const dom = getFirstDOMNode(node);
-      if (dom) {
-        return dom;
-      }
-    }
-    return void 0;
-  }
+  /**
+   * Mount the component into `parentNode` (optionally before `beforeNode`).
+   * If already rendered, the existing DOM is re-inserted without re-running
+   * the component function.
+   */
   mount(parentNode, beforeNode) {
     var _a2;
     this.parentNode = parentNode;
@@ -920,9 +902,9 @@ var Component = class {
       this.state = 2 /* MOUNTED */;
       return this.renderedNodes;
     }
-    const parent = (_a2 = this.parentScope) != null ? _a2 : getActiveScope();
-    this.scope = createScope(parent);
-    const renderedNodes = runWithScope(this.scope, () => {
+    const scope = createScope((_a2 = this.parentScope) != null ? _a2 : getActiveScope());
+    this.scope = scope;
+    const renderedNodes = runWithScope(scope, () => {
       var _a3;
       let result = this.component(this.reactiveProps);
       if (shared.isFunction(result)) {
@@ -931,157 +913,113 @@ var Component = class {
       if (signals.isSignal(result) || signals.isComputed(result)) {
         result = result.value;
       }
-      const nodes = (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
-      return nodes;
+      return (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
     });
     this.renderedNodes = renderedNodes;
-    runWithScope(this.scope, () => {
-      this.applyProps(this.props || {});
-    });
+    this.firstChild = renderedNodes[0];
+    this.syncSpecialProps(this.props);
     this.state = 2 /* MOUNTED */;
-    if (this.scope) {
-      triggerMountHooks(this.scope);
-    }
+    triggerMountHooks(scope);
     return this.renderedNodes;
   }
-  update(prevNode) {
-    if (this.key !== prevNode.key) {
-      this.mount(prevNode.parentNode, prevNode.beforeNode);
-      return this;
-    }
-    this.parentNode = prevNode.parentNode;
-    this.beforeNode = prevNode.beforeNode;
-    this.scope = prevNode.scope;
-    this.parentScope = prevNode.parentScope;
-    this.renderedNodes = prevNode.renderedNodes;
-    this.state = prevNode.state;
-    this.reactiveProps = prevNode.reactiveProps;
-    if (!this.props || Object.keys(this.props).length === 0) {
-      if (!this.isConnected && this.parentNode) {
-        this.mount(this.parentNode, this.beforeNode);
-        return this;
-      }
-      if (this.scope) {
-        runWithScope(this.scope, () => {
-          this.applyProps(this.props || {});
-        });
-        triggerUpdateHooks(this.scope);
-      }
-      return this;
-    }
-    let hasChanges = false;
-    for (const key in this.props) {
-      if (key === "key") continue;
-      const newValue = this.props[key];
-      const oldValue = this.reactiveProps[key];
-      if (Object.is(oldValue, newValue)) {
-        continue;
-      }
-      if (shared.isObject(oldValue) && shared.isObject(newValue)) {
-        if (shallowCompare(oldValue, newValue)) {
-          continue;
-        }
-      }
-      this.reactiveProps[key] = newValue;
-      hasChanges = true;
-    }
-    if (!this.isConnected && this.parentNode) {
-      this.mount(this.parentNode, this.beforeNode);
-    }
-    if (this.scope && (hasChanges || !this.isConnected)) {
-      runWithScope(this.scope, () => {
-        this.applyProps(this.props || {});
-      });
-      if (hasChanges) {
-        triggerUpdateHooks(this.scope);
-      }
-    }
-    return this;
+  /**
+   * Re-install props into the same `reactiveProps` container (preserving
+   * any closures already holding a reference to it) and re-apply
+   * refs/events against the current root element.
+   */
+  update(props) {
+    this.props = props;
+    const scope = this.scope;
+    if (!scope || scope.isDestroyed) return;
+    syncDescriptors(
+      this.reactiveProps,
+      props != null ? props : {},
+      /* pruneMissing */
+      true
+    );
+    this.syncSpecialProps(props);
+    triggerUpdateHooks(scope);
   }
+  /**
+   * Tear down and re-mount the component at its current insertion point.
+   * No-op if the component has never been mounted.
+   */
   forceUpdate() {
-    return __async(this, null, function* () {
-      yield Promise.resolve();
-      if (this.state === 5 /* DESTROYED */ || !this.parentNode || !this.scope) {
-        return;
-      }
-      const originalNodes = [...this.renderedNodes];
-      try {
-        runWithScope(this.scope, () => {
-          let result = this.component(this.reactiveProps);
-          if (shared.isFunction(result)) {
-            result = result(this.reactiveProps);
-          }
-          if (signals.isSignal(result) || signals.isComputed(result)) {
-            result = result.value;
-          }
-          const newNodes = shared.coerceArray(result);
-          if (this.parentNode) {
-            let anchor = this.beforeNode;
-            if (!anchor && this.renderedNodes.length > 0) {
-              const lastNode = this.renderedNodes[this.renderedNodes.length - 1];
-              const lastDom = getFirstDOMNode(lastNode);
-              if (lastDom) {
-                anchor = lastDom.nextSibling;
-              }
-            }
-            for (const node of this.renderedNodes) {
-              removeNode(node);
-            }
-            for (const node of newNodes) {
-              insertNode(this.parentNode, node, anchor);
-            }
-            this.renderedNodes = newNodes;
-          }
-        });
-        if (this.scope) {
-          triggerUpdateHooks(this.scope);
-        }
-      } catch (error8) {
-        this.renderedNodes = originalNodes;
-        throw error8;
-      }
-    });
+    if (!this.parentNode) return;
+    const parent = this.parentNode;
+    const before = this.beforeNode;
+    this.destroy();
+    this.mount(parent, before);
   }
   /**
-   * Destroy component
+   * Dispose the scope, remove all rendered nodes, and clear bookkeeping.
+   * Idempotent: subsequent calls are no-ops.
    */
   destroy() {
-    if (this.state === 4 /* DESTROYING */ || this.state === 5 /* DESTROYED */) {
-      return;
-    }
-    this.state = 4 /* DESTROYING */;
     const scope = this.scope;
-    if (scope) {
-      disposeScope(scope);
-      this.scope = null;
-    }
-    for (const node of this.renderedNodes) {
-      removeNode(node);
-    }
+    if (!scope || scope.isDestroyed) return;
+    this.scope = null;
+    this.releaseSpecialProps();
+    disposeScope(scope);
+    for (const node of this.renderedNodes) removeNode(node);
     this.renderedNodes = [];
+    this.firstChild = void 0;
     this.parentNode = void 0;
-    this.beforeNode = void 0;
-    this.parentScope = null;
-    this.reactiveProps = {};
-    this.props = {};
-    this.state = 5 /* DESTROYED */;
   }
-  applyProps(props) {
-    if (!props) {
-      return;
+  /**
+   * Apply props that bind to the root DOM element rather than flowing into
+   * the component body: `ref` (signal/function) and `onXxx` event handlers.
+   * The render-facing `reactiveProps` already has those keys; here we just
+   * wire them to the actual DOM node.
+   */
+  syncSpecialProps(props) {
+    if (!props) return;
+    const root = this.firstChild;
+    if (!root) return;
+    this.releaseSpecialProps();
+    for (const key of Object.getOwnPropertyNames(props)) {
+      const value = readProp(props, key);
+      if (key === REF_KEY) {
+        this.rootRefCleanup = this.bindRootRef(value, root);
+        continue;
+      }
+      if (shared.isOn(key) && shared.isFunction(value)) {
+        const eventName = key.slice(2).toLowerCase();
+        this.rootEventCleanups.push(addEvent(root, eventName, value));
+      }
+    }
+  }
+  /**
+   * Remove all listeners/ref bindings currently attached to the root element.
+   */
+  releaseSpecialProps() {
+    for (const cleanup of this.rootEventCleanups) {
+      cleanup();
+    }
+    this.rootEventCleanups.length = 0;
+    if (this.rootRefCleanup) {
+      this.rootRefCleanup();
+      this.rootRefCleanup = void 0;
     }
-    const firstElement = this.firstChild;
-    for (const [propName, propValue] of Object.entries(props)) {
-      if (shared.startsWith(propName, EVENT_PREFIX) && firstElement) {
-        const eventName = propName.slice(2).toLowerCase();
-        if (shared.isHTMLElement(firstElement)) {
-          addEventListener(firstElement, eventName, propValue);
+  }
+  /**
+   * Bind the root ref prop and return a cleanup that restores the previous ref state.
+   */
+  bindRootRef(value, root) {
+    if (shared.isFunction(value)) {
+      value(root);
+      return () => value(null);
+    }
+    if (signals.isSignal(value)) {
+      const previousValue = value.value;
+      value.value = root;
+      return () => {
+        if (value.value === root) {
+          value.value = previousValue;
         }
-      } else if (propName === REF_KEY && signals.isSignal(propValue)) {
-        propValue.value = firstElement;
-      }
+      };
     }
-    this.props = props;
+    return void 0;
   }
 };
 function isComponent(node) {
@@ -1111,17 +1049,72 @@ function template(html) {
 function createApp(component, target) {
   const container = shared.isString(target) ? document.querySelector(target) : target;
   if (!container) {
-    shared.error(`Target element not found: ${target}`);
+    {
+      shared.warn(`Target element not found: ${target}`);
+    }
     return;
   }
-  const existingContext = container.innerHTML;
-  if (existingContext) {
-    shared.error(`Target element is not empty, it will be delete: ${target}`);
+  const existingContent = container.innerHTML;
+  if (existingContent) {
+    {
+      shared.warn(`Target element is not empty, it will be cleared: ${target}`);
+    }
     container.innerHTML = "";
   }
-  const rootComponent = createComponent(component);
-  rootComponent.mount(container);
-  return rootComponent;
+  const scope = createScope();
+  let rootNode;
+  try {
+    runWithScope(scope, () => {
+      const mountedRoot = createComponent(component);
+      if (isComponent(mountedRoot)) {
+        rootNode = mountedRoot;
+        insertNode(container, mountedRoot);
+      }
+    });
+  } catch (error_) {
+    disposeScope(scope);
+    throw error_;
+  }
+  return {
+    root: rootNode,
+    unmount: () => {
+      disposeScope(scope);
+      rootNode == null ? void 0 : rootNode.destroy();
+    }
+  };
+}
+function hydrate(component, target) {
+  const container = shared.isString(target) ? document.querySelector(target) : target;
+  if (!container) {
+    {
+      shared.warn(`[essor] hydrate: target element not found: ${target}`);
+    }
+    return;
+  }
+  beginHydration(container);
+  const scope = createScope();
+  let rootNode;
+  try {
+    runWithScope(scope, () => {
+      const mountedRoot = createComponent(component);
+      if (isComponent(mountedRoot)) {
+        rootNode = mountedRoot;
+        insert(container, mountedRoot);
+      }
+    });
+  } catch (error_) {
+    disposeScope(scope);
+    throw error_;
+  } finally {
+    endHydration();
+  }
+  return {
+    root: rootNode,
+    unmount: () => {
+      disposeScope(scope);
+      rootNode == null ? void 0 : rootNode.destroy();
+    }
+  };
 }
 function provide(key, value) {
   const scope = getActiveScope();
@@ -1147,24 +1140,25 @@ function inject(key, defaultValue) {
   let current = scope;
   while (current) {
     if (current.provides) {
-      const value = current.provides.get(key);
-      if (value) {
-        return value;
+      if (current.provides.has(key)) {
+        return current.provides.get(key);
       }
     }
     current = current.parent;
   }
   return defaultValue;
 }
+function reTargetEvent(e, value) {
+  Object.defineProperty(e, "target", {
+    configurable: true,
+    value
+  });
+}
 function eventHandler(e) {
   let node = e.target;
-  const key = `${e.type}`;
+  const key = e.type;
   const oriTarget = e.target;
   const oriCurrentTarget = e.currentTarget;
-  const reTarget = (value) => Object.defineProperty(e, "target", {
-    configurable: true,
-    value
-  });
   const handleNode = () => {
     const handler = node[`_$${key}`];
     if (handler && shared.isFunction(handler) && !node.disabled) {
@@ -1173,7 +1167,7 @@ function eventHandler(e) {
       if (e.cancelBubble) return false;
     }
     if (node.host && !shared.isString(node.host) && !node.host._$host && shared.isFunction(node.contains) && node.contains(e.target)) {
-      reTarget(node.host);
+      reTargetEvent(e, node.host);
     }
     return true;
   };
@@ -1182,13 +1176,16 @@ function eventHandler(e) {
   };
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
+    /**
+     * Returns the current delegated target for the event.
+     */
     get() {
       return node || document;
     }
   });
   if (e.composedPath) {
     const path = e.composedPath();
-    reTarget(path[0]);
+    reTargetEvent(e, path[0]);
     for (let i = 0; i < path.length - 2; i++) {
       node = path[i];
       if (!handleNode()) break;
@@ -1202,7 +1199,7 @@ function eventHandler(e) {
       }
     }
   } else walkUpTree();
-  reTarget(oriTarget);
+  reTargetEvent(e, oriTarget);
 }
 var $EVENTS = /* @__PURE__ */ Symbol("_$EVENTS");
 function delegateEvents(eventNames, document2 = window.document) {
@@ -1215,325 +1212,354 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+function clearDelegatedEvents(document2 = window.document) {
+  const docWithEvents = document2;
+  const eventSet = docWithEvents[$EVENTS];
+  if (eventSet) {
+    for (const name of eventSet.keys()) {
+      document2.removeEventListener(name, eventHandler);
+    }
+    delete docWithEvents[$EVENTS];
+  }
+}
+function addEventListener(element, event, handler, options) {
+  const cleanup = addEvent(element, event, handler, options);
+  if (getActiveScope()) {
+    onCleanup(cleanup);
+  }
+}
 
-// src/utils/props.ts
-function omitProps(target, keys) {
-  const excludeSet = new Set(keys);
-  return new Proxy(target, {
-    // Intercept property reads
-    get(obj, prop) {
-      if (excludeSet.has(prop)) {
-        return void 0;
-      }
-      return Reflect.get(obj, prop);
-    },
-    // Intercept property enumeration (for...in, Object.keys, etc.)
-    ownKeys(obj) {
-      return Reflect.ownKeys(obj).filter((key) => !excludeSet.has(key));
-    },
-    // Intercept property descriptor retrieval
-    getOwnPropertyDescriptor(obj, prop) {
-      if (excludeSet.has(prop)) {
-        return void 0;
-      }
-      return Reflect.getOwnPropertyDescriptor(obj, prop);
-    },
-    // Intercept the 'in' operator
-    has(obj, prop) {
-      if (excludeSet.has(prop)) {
-        return false;
-      }
-      return Reflect.has(obj, prop);
-    }
-  });
-}
-function patchClass(el, prev, next, isSVG = false) {
-  if (prev === next) {
-    return;
-  }
-  if (isHydrating()) {
-    return;
-  }
-  const normalizedNext = normalizeClass(next);
-  const normalizedPrev = normalizeClass(prev);
-  if (normalizedNext && normalizedPrev === normalizedNext) {
-    return;
+// src/binding.ts
+var INPUT_CHECKBOX_CHECKED = {
+  event: "change",
+  forceChangeEvent: true,
+  read: (n) => n.checked,
+  write: (n, v) => {
+    const el = n;
+    const next2 = Boolean(v);
+    if (el.checked !== next2) el.checked = next2;
   }
-  if (!normalizedNext) {
-    el.removeAttribute("class");
-  } else if (isSVG) {
-    el.setAttribute("class", normalizedNext);
-  } else {
-    el.className = normalizedNext;
+};
+var INPUT_RADIO_CHECKED = {
+  event: "change",
+  forceChangeEvent: true,
+  read: (n) => {
+    const el = n;
+    return el.checked ? el.value : "";
+  },
+  write: (n, v) => {
+    const el = n;
+    const next2 = String(v) === el.value;
+    if (el.checked !== next2) el.checked = next2;
   }
-}
-function normalizeClass(value) {
-  return shared.normalizeClassName(value);
-}
-var importantRE = /\s*!important$/;
-var prefixes = ["Webkit", "Moz", "ms"];
-var prefixCache = {};
-function patchStyle(el, prev, next) {
-  const style = el.style;
-  const isCssString = shared.isString(next);
-  if (isHydrating()) {
-    return;
+};
+var INPUT_FILE_FILES = {
+  event: "change",
+  forceChangeEvent: true,
+  read: (n) => n.files,
+  // Browsers do not allow programmatic writes to <input type="file">.
+  write: () => {
   }
-  if (next && isCssString) {
-    if (prev !== next) {
-      style.cssText = next;
-    }
-    return;
+};
+var INPUT_VALUE = {
+  event: "input",
+  needsComposition: true,
+  read: (n) => n.value,
+  write: (n, v) => {
+    const el = n;
+    const next2 = v == null ? "" : String(v);
+    if (el.value !== next2) el.value = next2;
   }
-  if (!next) {
-    if (prev) {
-      el.removeAttribute("style");
+};
+var SELECT_VALUE = {
+  event: "change",
+  forceChangeEvent: true,
+  read: (n) => {
+    const s = n;
+    return s.multiple ? Array.from(s.selectedOptions, (o) => o.value) : s.value;
+  },
+  write: (n, v) => {
+    const s = n;
+    if (s.multiple) {
+      const set = new Set((Array.isArray(v) ? v : []).map(String));
+      for (const opt of Array.from(s.options)) opt.selected = set.has(opt.value);
+    } else {
+      const next2 = v == null ? "" : String(v);
+      if (s.value !== next2) s.value = next2;
     }
-    return;
   }
-  if (prev && !shared.isString(prev)) {
-    for (const key in prev) {
-      if (!next || next[key] == null) {
-        setStyle(style, key, "");
-      }
-    }
-  } else if (prev && shared.isString(prev)) {
-    const prevStyles = prev.split(";");
-    for (const stylePart of prevStyles) {
-      const colonIndex = stylePart.indexOf(":");
-      if (colonIndex > 0) {
-        const key = stylePart.slice(0, colonIndex).trim();
-        if (next && shared.isObject(next) && next[key] == null) {
-          setStyle(style, key, "");
-        }
-      }
-    }
+};
+var TEXTAREA_VALUE = {
+  event: "input",
+  needsComposition: true,
+  read: (n) => n.value,
+  write: (n, v) => {
+    const el = n;
+    const next2 = v == null ? "" : String(v);
+    if (el.value !== next2) el.value = next2;
   }
-  if (next && !shared.isString(next)) {
-    for (const key in next) {
-      const value = next[key];
-      if ((!prev || shared.isString(prev) || prev[key] !== value) && value != null) {
-        setStyle(style, key, value);
-      }
+};
+function resolveStrategy(node, prop) {
+  const tag = node.nodeName;
+  if (tag === "INPUT") {
+    const type = node.type;
+    if (prop === "checked") {
+      return type === "radio" ? INPUT_RADIO_CHECKED : INPUT_CHECKBOX_CHECKED;
+    }
+    if (prop === "files") return INPUT_FILE_FILES;
+    return INPUT_VALUE;
+  }
+  if (tag === "SELECT") return SELECT_VALUE;
+  if (tag === "TEXTAREA") return TEXTAREA_VALUE;
+  return {
+    event: "input",
+    read: (n) => n[prop],
+    write: (n, v) => {
+      n[prop] = v;
     }
-  }
+  };
 }
-function setStyle(style, name, val) {
-  if (shared.isArray(val)) {
-    for (const element of val) {
-      setStyle(style, name, element);
-    }
-    return;
-  }
-  if (val == null || val === "") {
-    val = "";
-  }
-  if (name.startsWith("--")) {
-    style.setProperty(name, val);
-    return;
-  }
-  const prefixed = autoPrefix(style, name);
-  if (typeof val === "string" && importantRE.test(val)) {
-    style.setProperty(shared.camelCase(prefixed), val.replace(importantRE, ""), "important");
-  } else {
-    style[prefixed] = val;
+function castValue(val, trim, number) {
+  if (!shared.isString(val)) return val;
+  if (trim) val = val.trim();
+  if (number && val !== "") {
+    const parsed = Number(val);
+    if (!Number.isNaN(parsed)) return parsed;
   }
+  return val;
 }
-function autoPrefix(style, rawName) {
-  const cached = prefixCache[rawName];
-  if (cached) {
-    return cached;
-  }
-  let name = shared.camelCase(rawName);
-  if (name !== "filter" && name in style) {
-    return prefixCache[rawName] = name;
-  }
-  name = shared.capitalize(name);
-  for (const prefix of prefixes) {
-    const prefixed = prefix + name;
-    if (prefixed in style) {
-      return prefixCache[rawName] = prefixed;
-    }
-  }
-  return rawName;
+function isFocused(node) {
+  const root = node.getRootNode();
+  return (root instanceof Document || root instanceof ShadowRoot) && root.activeElement === node;
 }
-function patchAttr(el, key, prev, next) {
-  if (key === KEY_PROP) {
-    if (next == null) {
-      setNodeKey(el, void 0);
-    } else {
-      setNodeKey(el, String(next));
+function bindElement(node, prop, getter, setter, modifiers = {}) {
+  if (!node) return;
+  const strategy = resolveStrategy(node, prop);
+  const { trim, number, lazy } = modifiers;
+  const isFiles = prop === "files";
+  const readModel = () => shared.isFunction(getter) ? getter() : getter;
+  const transform = (v) => isFiles ? v : castValue(v, trim, number);
+  const eventName = lazy || strategy.forceChangeEvent ? "change" : strategy.event;
+  let composing = false;
+  const syncFromDom = () => {
+    if (composing) return;
+    const raw = strategy.read(node);
+    if (raw === void 0) return;
+    if (isFiles) {
+      setter(raw);
+      return;
     }
-    return;
-  }
-  if (key === SPREAD_NAME) {
-    {
-      if (!shared.isObject(next)) {
-        shared.warn("spread attribute must be an object");
-      }
+    const next2 = transform(raw);
+    if (!Object.is(readModel(), next2)) {
+      setter(next2);
     }
-    Object.keys(next).forEach((k) => {
-      patchAttr(el, k, prev == null ? void 0 : prev[k], next == null ? void 0 : next[k]);
+  };
+  addEventListener(node, eventName, syncFromDom);
+  if (!lazy && !isFiles && (trim || number) && eventName !== "change") {
+    addEventListener(node, "change", () => {
+      strategy.write(node, transform(strategy.read(node)));
     });
-    return;
-  }
-  if (isHydrating()) {
-    return;
   }
-  const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
-  const isXlink = elementIsSVG && key.startsWith("xlink:");
-  const isXmlns = elementIsSVG && key.startsWith("xmlns:");
-  const isBoolean = shared.isSpecialBooleanAttr(key) || shared.isBooleanAttr(key);
-  if (prev === next) {
-    return;
-  }
-  const lowerKey = key.toLowerCase();
-  if (lowerKey.length > 2 && lowerKey.charCodeAt(0) === 111 && lowerKey.charCodeAt(1) === 110) {
-    return;
-  }
-  if (lowerKey === "innerhtml") {
-    return;
-  }
-  if (next == null) {
-    if (isXlink) {
-      el.removeAttributeNS(XLINK_NAMESPACE, key.slice(6));
-    } else if (isXmlns) {
-      const localName = key.slice(6);
-      el.removeAttributeNS(XMLNS_NAMESPACE, localName);
-    } else {
-      el.removeAttribute(key);
-    }
-    return;
-  }
-  if (isXlink) {
-    el.setAttributeNS(XLINK_NAMESPACE, key, String(next));
-    return;
-  }
-  if (isXmlns) {
-    el.setAttributeNS(XMLNS_NAMESPACE, key, String(next));
-    return;
-  }
-  if (isBoolean) {
-    if (shared.includeBooleanAttr(next)) {
-      el.setAttribute(key, "");
-    } else {
-      el.removeAttribute(key);
-    }
-    return;
-  }
-  const attrValue = shared.isSymbol(next) ? String(next) : next;
-  const isUrlAttr = lowerKey === "href" || lowerKey === "src" || lowerKey === "xlink:href";
-  if (isUrlAttr && typeof attrValue === "string") {
-    const v = attrValue.trim().toLowerCase();
-    if (v.startsWith("javascript:") || v.startsWith("data:")) {
-      return;
-    }
+  if (strategy.needsComposition && !lazy) {
+    addEventListener(node, "compositionstart", () => {
+      composing = true;
+    });
+    addEventListener(node, "compositionend", () => {
+      if (!composing) return;
+      composing = false;
+      syncFromDom();
+    });
   }
-  if (elementIsSVG) {
-    el.setAttribute(key, String(attrValue));
-  } else {
-    if (key in el) {
-      try {
-        el[key] = attrValue;
-      } catch (e) {
-        el.setAttribute(key, String(attrValue));
-      }
-    } else {
-      el.setAttribute(key, String(attrValue));
+  const runner = signals.effect(() => {
+    const value = readModel();
+    if (strategy.needsComposition && !lazy && isFocused(node)) {
+      if (composing) return;
+      const current = transform(strategy.read(node));
+      if (Object.is(current, value)) return;
     }
+    strategy.write(node, value);
+  });
+  if (getActiveScope()) {
+    onCleanup(() => runner.stop());
   }
 }
 
-// src/operations/event.ts
-function addEvent(el, event, handler, options) {
-  if (!(options == null ? void 0 : options.delegate)) {
-    el.addEventListener(event, handler, options);
-    return () => el.removeEventListener(event, handler, options);
-  }
-  const selector = options.delegate;
-  const wrappedHandler = (e) => {
-    const target = e.target;
-    if (target.matches(selector) || target.closest(selector)) {
-      handler.call(el, e);
+// src/utils.ts
+function omitProps(target, keys) {
+  const excludeSet = new Set(keys);
+  return new Proxy(target, {
+    /**
+     * Returns a property unless it is excluded by the proxy.
+     */
+    get(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return void 0;
+      }
+      return Reflect.get(obj, prop);
+    },
+    /**
+     * Returns the enumerable keys that are not excluded from the proxy.
+     */
+    ownKeys(obj) {
+      return Reflect.ownKeys(obj).filter((key) => !excludeSet.has(key));
+    },
+    /**
+     * Returns the property descriptor unless the key is excluded.
+     */
+    getOwnPropertyDescriptor(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return void 0;
+      }
+      return Reflect.getOwnPropertyDescriptor(obj, prop);
+    },
+    /**
+     * Returns whether the requested value exists.
+     */
+    has(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return false;
+      }
+      return Reflect.has(obj, prop);
     }
-  };
-  const cleanOptions = __spreadValues({}, options);
-  cleanOptions.delegate = void 0;
-  el.addEventListener(event, wrappedHandler, cleanOptions);
-  return () => {
-    el.removeEventListener(event, wrappedHandler, cleanOptions);
-  };
+  });
 }
+
+// src/components/Fragment.ts
 function Fragment(props) {
-  {
-    if (!props) {
-      shared.error("Fragment component requires props");
-      return null;
-    }
-    if (!props.children) {
-      shared.error("Fragment component requires children");
-      return null;
-    }
-  }
-  return props == null ? void 0 : props.children;
+  if (!props || props.children == null) return null;
+  return props.children;
 }
-Fragment["fragment" /* FRAGMENT */] = true;
+Fragment[FRAGMENT_COMPONENT] = true;
 function isFragment(node) {
-  return !!node && !!node["fragment" /* FRAGMENT */];
+  return !!node && !!node[FRAGMENT_COMPONENT];
+}
+function resolveTarget(props) {
+  const raw = shared.isFunction(props.target) ? props.target() : props.target;
+  if (raw == null) return null;
+  if (shared.isString(raw)) return document.querySelector(raw);
+  return raw;
+}
+function evalDisabled(props) {
+  return shared.isFunction(props.disabled) ? !!props.disabled() : !!props.disabled;
 }
 function Portal(props) {
-  if (typeof document === "undefined") {
-    const children2 = props.children;
-    if (!children2) return "";
-    const childArray = shared.isArray(children2) ? children2 : [children2];
-    return childArray.map((child) => String(child || "")).join("");
+  if (isHydrating()) {
+    const adopted = tryHydratePortal(props);
+    if (adopted) return adopted;
   }
   const placeholder = document.createComment("portal");
-  placeholder["portal" /* PORTAL */] = true;
-  const children = props.children;
-  if (children) {
-    const childArray = shared.isArray(children) ? children : [children];
-    const nodes = [];
-    onMount(() => {
-      const targetElement = shared.isString(props.target) ? document.querySelector(props.target) : props.target;
-      if (!targetElement) {
-        {
-          shared.warn(`[Portal] Target element not found: ${props.target}`);
-        }
-        return;
+  placeholder[PORTAL_COMPONENT] = true;
+  const { children } = props;
+  if (children == null) return placeholder;
+  const ownerScope = getActiveScope();
+  let innerScope = null;
+  const mountAt = (parent, before) => {
+    innerScope = createScope(ownerScope);
+    runWithScope(innerScope, () => {
+      insert(parent, () => children, before);
+    });
+  };
+  const teardown = () => {
+    if (innerScope) {
+      disposeScope(innerScope);
+      innerScope = null;
+    }
+  };
+  const apply = (disabled, target) => {
+    teardown();
+    if (disabled) {
+      const parent = placeholder.parentNode;
+      if (!parent) return;
+      mountAt(parent, placeholder);
+      return;
+    }
+    if (!target) {
+      {
+        shared.warn(`[Portal] Target element not found: ${String(props.target)}`);
       }
-      childArray.forEach((child) => {
-        if (child != null) {
-          const normalized = normalizeNode(child);
-          if (normalized) {
-            insertNode(targetElement, normalized);
-            nodes.push(normalized);
-          }
-        }
-      });
-      onCleanup(() => {
-        nodes.forEach((node) => {
-          if (typeof node !== "string" && node.parentNode === targetElement) {
-            targetElement.removeChild(node);
-          }
-        });
-      });
+      return;
+    }
+    mountAt(target);
+  };
+  let mounted = false;
+  const effectRunner = signals.effect(() => {
+    const disabled = evalDisabled(props);
+    const target = disabled ? null : resolveTarget(props);
+    if (mounted) {
+      apply(disabled, target);
+    }
+  });
+  onMount(() => {
+    mounted = true;
+    const disabled = evalDisabled(props);
+    const target = disabled ? null : resolveTarget(props);
+    if (disabled || target) {
+      apply(disabled, target);
+      return;
+    }
+    queueMicrotask(() => {
+      if (!placeholder.parentNode) return;
+      apply(evalDisabled(props), resolveTarget(props));
     });
-  }
+  });
+  onCleanup(() => {
+    effectRunner.stop();
+    teardown();
+  });
   return placeholder;
 }
-Portal["portal" /* PORTAL */] = true;
+Portal[PORTAL_COMPONENT] = true;
+function tryHydratePortal(props) {
+  if (evalDisabled(props)) return null;
+  const anchor = consumeTeleportAnchor();
+  if (!anchor) {
+    {
+      shared.warn("[Portal] hydration mismatch: no <!--teleport-anchor--> at call site.");
+    }
+    return null;
+  }
+  const target = resolveTarget(props);
+  if (!target) {
+    {
+      shared.warn(`[Portal] hydration mismatch: target not found: ${String(props.target)}`);
+    }
+    return null;
+  }
+  const block = consumeTeleportBlock(target);
+  if (!block) {
+    {
+      shared.warn(
+        `[Portal] hydration mismatch: no <!--teleport-start--> in target ${String(props.target)}`
+      );
+    }
+    return null;
+  }
+  anchor[PORTAL_COMPONENT] = true;
+  return anchor;
+}
 function isPortal(node) {
-  return !!node && !!node["portal" /* PORTAL */];
+  return !!node && !!node[PORTAL_COMPONENT];
+}
+function clearContainer(el) {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+}
+function resolveNodeValue(value) {
+  let current = value;
+  while (shared.isFunction(current)) {
+    current = current();
+  }
+  if (signals.isSignal(current) || signals.isComputed(current)) {
+    return resolveNodeValue(current.value);
+  }
+  return current;
 }
 var SuspenseContext = /* @__PURE__ */ Symbol("SuspenseContext");
 function Suspense(props) {
-  if (shared.isUndefined(document)) {
-    const fallback = props.fallback;
-    if (fallback) {
-      return String(fallback || "");
-    }
-    return "";
+  var _a2;
+  if (!shared.isBrowser()) {
+    return (_a2 = props.fallback) != null ? _a2 : "";
   }
   const container = document.createElement("div");
   container.style.display = "contents";
@@ -1541,19 +1567,42 @@ function Suspense(props) {
   let pendingCount = 0;
   let isShowingFallback = false;
   let resolvedChildren = null;
-  const showFallback = () => {
-    if (isShowingFallback) return;
-    isShowingFallback = true;
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
+  const materializeChild = (value) => {
+    const current = resolveNodeValue(value);
+    if (shared.isArray(current)) {
+      const nodes = [];
+      for (const item of current) {
+        const materialized = materializeChild(item);
+        if (shared.isArray(materialized)) {
+          nodes.push(...materialized);
+        } else {
+          nodes.push(materialized);
+        }
+      }
+      return nodes;
     }
-    if (props.fallback != null) {
-      const normalized = normalizeNode(props.fallback);
-      if (normalized) {
-        insertNode(container, normalized);
+    return normalizeNode(current);
+  };
+  const insertMaterializedChild = (value) => {
+    const normalized = materializeChild(value);
+    const nodes = shared.isArray(normalized) ? normalized : [normalized];
+    for (const node of nodes) {
+      if (node != null) {
+        insertNode(container, node);
       }
     }
   };
+  const renderFallbackContent = () => {
+    clearContainer(container);
+    if (props.fallback != null) {
+      insertMaterializedChild(props.fallback);
+    }
+  };
+  const showFallback = () => {
+    if (isShowingFallback) return;
+    isShowingFallback = true;
+    renderFallbackContent();
+  };
   const showChildren = () => {
     if (!isShowingFallback) return;
     const hasContent = resolvedChildren || props.children != null && !shared.isPromise(props.children);
@@ -1561,9 +1610,7 @@ function Suspense(props) {
       return;
     }
     isShowingFallback = false;
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
+    clearContainer(container);
     if (resolvedChildren) {
       renderChildren(resolvedChildren);
     } else if (props.children != null && !shared.isPromise(props.children)) {
@@ -1571,33 +1618,17 @@ function Suspense(props) {
     }
   };
   const renderChildren = (children2) => {
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
+    if (isShowingFallback) return;
+    clearContainer(container);
     if (children2 == null) return;
-    const currentScope = getActiveScope();
     const childArray = shared.isArray(children2) ? children2 : [children2];
-    childArray.forEach((child) => {
-      if (child != null) {
-        if (isComponent(child)) {
-          child.parentContext = currentScope;
-        }
-        const normalized = normalizeNode(child);
-        if (normalized) {
-          insertNode(container, normalized);
-        }
+    for (const child2 of childArray) {
+      if (child2 != null) {
+        insertMaterializedChild(child2);
       }
-    });
+    }
     if (isShowingFallback) {
-      while (container.firstChild) {
-        container.removeChild(container.firstChild);
-      }
-      if (props.fallback != null) {
-        const normalized = normalizeNode(props.fallback);
-        if (normalized) {
-          insertNode(container, normalized);
-        }
-      }
+      renderFallbackContent();
     }
   };
   const suspenseContext = {
@@ -1610,9 +1641,9 @@ function Suspense(props) {
         if (pendingCount === 0) {
           showChildren();
         }
-      }).catch((error8) => {
+      }).catch((error5) => {
         {
-          shared.warn("[Suspense] Resource failed:", error8);
+          shared.warn("[Suspense] Resource failed:", error5);
         }
         if (!isMounted) return;
         pendingCount--;
@@ -1626,7 +1657,7 @@ function Suspense(props) {
       showFallback();
     },
     decrement: () => {
-      pendingCount--;
+      pendingCount = Math.max(0, pendingCount - 1);
       if (pendingCount === 0) {
         showChildren();
       }
@@ -1647,32 +1678,39 @@ function Suspense(props) {
   }
   onDestroy(() => {
     isMounted = false;
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
+    pendingCount = 0;
+    resolvedChildren = null;
+    clearContainer(container);
+    container.remove();
   });
   return container;
 }
-Suspense["suspense" /* SUSPENSE */] = true;
+Suspense[SUSPENSE_COMPONENT] = true;
 function isSuspense(node) {
-  return !!node && !!node["suspense" /* SUSPENSE */];
+  return !!node && !!node[SUSPENSE_COMPONENT];
 }
 function createResource(fetcher, options) {
   const value = signals.signal(options == null ? void 0 : options.initialValue);
   const loading = signals.signal(true);
-  const error8 = signals.signal(null);
+  const error5 = signals.signal(null);
   const state = signals.signal("pending");
   let fetchId = 0;
   let currentPromise = null;
+  let suspenseRegistered = false;
+  const suspenseContext = inject(SuspenseContext, null);
   const fetch = () => __async(null, null, function* () {
     const currentFetchId = ++fetchId;
     loading.value = true;
     state.value = "pending";
-    error8.value = null;
+    error5.value = null;
+    suspenseRegistered = false;
+    if (suspenseContext) {
+      suspenseContext.increment();
+    }
     try {
       const promise = fetcher();
-      currentPromise = promise.then(() => {
-      }).catch(() => {
+      currentPromise = promise;
+      promise.catch(() => {
       });
       const result = yield promise;
       if (currentFetchId === fetchId) {
@@ -1682,31 +1720,33 @@ function createResource(fetcher, options) {
       }
     } catch (error_) {
       if (currentFetchId === fetchId) {
-        error8.value = error_ instanceof Error ? error_ : new Error(String(error_));
+        error5.value = error_ instanceof Error ? error_ : new Error(String(error_));
         state.value = "errored";
         loading.value = false;
       }
+    } finally {
+      if (suspenseContext) {
+        suspenseContext.decrement();
+      }
     }
   });
   fetch();
   const resource = (() => {
-    if (loading.value && currentPromise) {
-      const suspenseContext = inject(SuspenseContext, null);
-      if (suspenseContext) {
-        suspenseContext.register(currentPromise);
-      }
+    if (!suspenseRegistered && loading.value && currentPromise && suspenseContext) {
+      suspenseRegistered = true;
+      suspenseContext.register(currentPromise);
     }
     return value.value;
   });
   resource.loading = loading;
-  resource.error = error8;
+  resource.error = error5;
   resource.state = state;
   const actions = {
     mutate: (newValue) => {
       value.value = newValue;
       state.value = "ready";
       loading.value = false;
-      error8.value = null;
+      error5.value = null;
     },
     refetch: () => __async(null, null, function* () {
       yield fetch();
@@ -1714,51 +1754,425 @@ function createResource(fetcher, options) {
   };
   return [resource, actions];
 }
+function resolveModule(mod) {
+  return shared.isFunction(mod) ? mod : mod.default;
+}
+function renderInto(el, fn, props) {
+  const comp = new Component(fn, props);
+  comp.mount(el);
+  return comp;
+}
+function defineAsyncComponent(loader, options = {}) {
+  const { delay = 200, timeout, ssr = "blocking", onError } = options;
+  if (typeof window === "undefined") {
+    if (ssr === "client-only") {
+      const placeholder = () => "";
+      placeholder.__asyncLoader = loader;
+      placeholder.__asyncResolved = () => null;
+      return placeholder;
+    }
+    let ssrResolved = null;
+    let ssrPromise = null;
+    const ssrLoad = () => {
+      if (ssrPromise) return ssrPromise;
+      ssrPromise = loader().then((mod) => {
+        ssrResolved = resolveModule(mod);
+      }).catch(() => {
+      });
+      return ssrPromise;
+    };
+    ssrLoad();
+    const ssrWrapper = (props) => {
+      if (ssrResolved) {
+        return ssrResolved(props);
+      }
+      return "";
+    };
+    ssrWrapper.__asyncLoader = ssrLoad;
+    ssrWrapper.__asyncResolved = () => ssrResolved;
+    return ssrWrapper;
+  }
+  let cachedComponent = null;
+  let cachedError = null;
+  let cachedStatus = "pending";
+  let loadPromise = null;
+  function load() {
+    if (loadPromise) return loadPromise;
+    loadPromise = loader().then((mod) => {
+      cachedComponent = resolveModule(mod);
+      cachedStatus = "resolved";
+    }).catch((error5) => {
+      cachedError = error5 instanceof Error ? error5 : new Error(String(error5));
+      cachedStatus = "errored";
+      loadPromise = null;
+    });
+    return loadPromise;
+  }
+  load();
+  function AsyncWrapper(props) {
+    var _a2;
+    if (cachedStatus === "resolved" && cachedComponent) {
+      const el = document.createElement("div");
+      el.style.display = "contents";
+      const comp = renderInto(el, cachedComponent, props);
+      onCleanup(() => comp.destroy());
+      return el;
+    }
+    if (cachedStatus === "errored" && cachedError) {
+      const el = document.createElement("div");
+      el.style.display = "contents";
+      if (options.error) {
+        let alive2 = true;
+        let currentComp2 = null;
+        const swap2 = (fn, swapProps) => {
+          if (!alive2) return;
+          currentComp2 == null ? void 0 : currentComp2.destroy();
+          currentComp2 = renderInto(el, fn, swapProps);
+        };
+        const retry = () => {
+          loadPromise = null;
+          cachedStatus = "pending";
+          cachedError = null;
+          if (options.loading) swap2(options.loading);
+          load().then(() => {
+            if (!alive2) return;
+            if (cachedStatus === "resolved" && cachedComponent) {
+              swap2(cachedComponent, props);
+            } else if (cachedStatus === "errored" && cachedError) {
+              if (options.error) swap2(options.error, { error: cachedError, retry });
+            }
+          });
+        };
+        swap2(options.error, { error: cachedError, retry });
+        onDestroy(() => {
+          alive2 = false;
+          currentComp2 == null ? void 0 : currentComp2.destroy();
+          currentComp2 = null;
+        });
+      }
+      return el;
+    }
+    const container = document.createElement("div");
+    container.style.display = "contents";
+    let alive = true;
+    let currentComp = null;
+    let delayTimer = null;
+    let timeoutTimer = null;
+    const swap = (fn, swapProps) => {
+      if (!alive) return;
+      currentComp == null ? void 0 : currentComp.destroy();
+      currentComp = renderInto(container, fn, swapProps);
+    };
+    const retryWith = (retryProps) => () => {
+      loadPromise = null;
+      cachedStatus = "pending";
+      cachedError = null;
+      if (options.loading) swap(options.loading);
+      load().then(() => {
+        if (cachedStatus === "resolved" && cachedComponent) {
+          swap(cachedComponent, retryProps);
+        } else if (cachedStatus === "errored" && cachedError) {
+          if (options.error) {
+            swap(options.error, {
+              error: cachedError,
+              retry: retryWith(retryProps)
+            });
+          }
+        }
+      });
+    };
+    onDestroy(() => {
+      alive = false;
+      currentComp == null ? void 0 : currentComp.destroy();
+      currentComp = null;
+      if (delayTimer != null) clearTimeout(delayTimer);
+      if (timeoutTimer != null) clearTimeout(timeoutTimer);
+    });
+    const suspenseCtx = (_a2 = inject(SuspenseContext)) != null ? _a2 : null;
+    const showResolved = (compFn) => swap(compFn, props);
+    const showError = (err) => {
+      if (options.error) swap(options.error, { error: err, retry: retryWith(props) });
+    };
+    const showLoading = () => {
+      if (options.loading) swap(options.loading);
+    };
+    const instancePromise = load().then(() => {
+      if (!alive) return;
+      if (cachedStatus === "resolved" && cachedComponent) {
+        showResolved(cachedComponent);
+      } else if (cachedStatus === "errored" && cachedError) {
+        showError(cachedError);
+        if (onError) onError(cachedError, retryWith(props));
+      }
+      if (delayTimer != null) clearTimeout(delayTimer);
+      if (timeoutTimer != null) clearTimeout(timeoutTimer);
+    });
+    if (suspenseCtx) {
+      suspenseCtx.register(instancePromise);
+    }
+    if (delay > 0) {
+      delayTimer = setTimeout(() => {
+        if (alive && cachedStatus === "pending") {
+          showLoading();
+        }
+      }, delay);
+    } else if (options.loading) {
+      showLoading();
+    }
+    if (timeout != null) {
+      timeoutTimer = setTimeout(() => {
+        if (alive && cachedStatus === "pending") {
+          const err = new Error(`[defineAsyncComponent] Timeout after ${timeout}ms`);
+          cachedError = err;
+          cachedStatus = "errored";
+          showError(err);
+          if (onError) onError(err, retryWith(props));
+        }
+      }, timeout);
+    }
+    return container;
+  }
+  AsyncWrapper.__asyncLoader = load;
+  AsyncWrapper.__asyncResolved = () => cachedComponent;
+  return AsyncWrapper;
+}
+function For(props) {
+  const fragment = document.createDocumentFragment();
+  const marker = document.createComment("");
+  fragment.appendChild(marker);
+  let entries = [];
+  let fallbackNodes = [];
+  const keyFn = props.key;
+  const renderFn = props.children;
+  const getList = () => {
+    var _a2, _b;
+    const input = props.each;
+    if (signals.isSignal(input)) return (_a2 = input.value) != null ? _a2 : [];
+    if (shared.isFunction(input)) return (_b = input()) != null ? _b : [];
+    return input != null ? input : [];
+  };
+  const getKey = (item) => keyFn ? keyFn(item) : item;
+  const normalizeNodes = (value) => {
+    if (Array.isArray(value)) {
+      const nodes = [];
+      for (const item of value) {
+        nodes.push(...normalizeNodes(item));
+      }
+      return nodes;
+    }
+    return [normalizeNode(value)];
+  };
+  const mountValue = (value, parent, before) => {
+    const nodes = normalizeNodes(value);
+    for (const node of nodes) {
+      if (before) {
+        parent.insertBefore(node, before);
+      } else {
+        parent.appendChild(node);
+      }
+    }
+    return nodes;
+  };
+  const mountFallback = (parent, before) => {
+    if (!props.fallback) return;
+    const nodes = mountValue(props.fallback(), parent, before);
+    fallbackNodes = nodes;
+  };
+  const clearFallback = () => {
+    for (const node of fallbackNodes) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    fallbackNodes = [];
+  };
+  const renderItem = (item, index, parent, before) => {
+    const parentScope = getActiveScope();
+    const scope = createScope(parentScope);
+    let mountedNodes = [];
+    runWithScope(scope, () => {
+      mountedNodes = mountValue(renderFn(item, index), parent, before);
+    });
+    return { key: getKey(item), item, nodes: mountedNodes, scope };
+  };
+  const disposeItem = (entry) => {
+    disposeScope(entry.scope);
+    for (const node of entry.nodes) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  };
+  const effectRunner = signals.effect(() => {
+    const newItems = getList();
+    const parent = marker.parentNode;
+    if (!parent) {
+      if (newItems.length === 0) {
+        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++;
+        }
+      }
+      return;
+    }
+    reconcile(parent, newItems);
+  });
+  function reconcile(parent, newItems) {
+    const oldLen = entries.length;
+    const newLen = newItems.length;
+    if (newLen === 0) {
+      for (let i = 0; i < oldLen; i++) {
+        disposeItem(entries[i]);
+      }
+      entries = [];
+      if (props.fallback && fallbackNodes.length === 0) {
+        mountFallback(parent, marker);
+      }
+      return;
+    }
+    if (oldLen === 0 || fallbackNodes.length > 0) {
+      if (fallbackNodes.length > 0) {
+        clearFallback();
+      }
+      entries = new Array(newLen);
+      const batchFragment2 = document.createDocumentFragment();
+      for (let i = 0; i < newLen; i++) {
+        entries[i] = renderItem(newItems[i], i, batchFragment2, null);
+      }
+      parent.insertBefore(batchFragment2, marker);
+      return;
+    }
+    const oldKeyMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < oldLen; i++) {
+      const entry = entries[i];
+      const list = oldKeyMap.get(entry.key);
+      const pair = [entry, i];
+      if (list) list.push(pair);
+      else oldKeyMap.set(entry.key, [pair]);
+    }
+    const newEntries = new Array(newLen);
+    const toRemove = [];
+    let batchFragment = null;
+    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]);
+    }
+    for (let i = 0; i < newLen; i++) {
+      const item = newItems[i];
+      const key = newKeys[i];
+      const oldList = oldKeyMap.get(key);
+      if (oldList && oldList.length > 0) {
+        const [reused, oldIndex] = oldList.shift();
+        if (Object.is(reused.item, item)) {
+          reused.item = item;
+          newEntries[i] = reused;
+          newIndexToOldIndex[i] = oldIndex + 1;
+          if (oldIndex < maxOldSeen) moved = true;
+          else maxOldSeen = oldIndex;
+        } else {
+          if (!batchFragment) batchFragment = document.createDocumentFragment();
+          disposeItem(reused);
+          newEntries[i] = renderItem(item, i, batchFragment, null);
+        }
+      } else {
+        if (!batchFragment) batchFragment = document.createDocumentFragment();
+        newEntries[i] = renderItem(item, i, batchFragment, null);
+      }
+    }
+    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);
+        }
+        nextNode = node;
+      }
+    }
+    entries = newEntries;
+  }
+  onCleanup(() => {
+    effectRunner.stop();
+    for (const entry of entries) {
+      disposeItem(entry);
+    }
+    entries = [];
+    clearFallback();
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
+  });
+  return fragment;
+}
+For[FOR_COMPONENT] = true;
 
 exports.Component = Component;
+exports.For = For;
 exports.Fragment = Fragment;
 exports.Portal = Portal;
 exports.Suspense = Suspense;
 exports.addEvent = addEvent;
 exports.addEventListener = addEventListener;
+exports.beginHydration = beginHydration;
 exports.bindElement = bindElement;
+exports.child = child;
+exports.clearDelegatedEvents = clearDelegatedEvents;
+exports.consumeTeleportAnchor = consumeTeleportAnchor;
+exports.consumeTeleportBlock = consumeTeleportBlock;
 exports.createApp = createApp;
 exports.createComponent = createComponent;
 exports.createResource = createResource;
-exports.createScope = createScope;
+exports.defineAsyncComponent = defineAsyncComponent;
 exports.delegateEvents = delegateEvents;
-exports.disposeScope = disposeScope;
 exports.endHydration = endHydration;
-exports.getActiveScope = getActiveScope;
-exports.getFirstDOMNode = getFirstDOMNode;
+exports.getHydrationKey = getHydrationKey;
+exports.getRenderedElement = getRenderedElement;
+exports.hydrate = hydrate;
 exports.inject = inject;
 exports.insert = insert;
-exports.insertNode = insertNode;
 exports.isComponent = isComponent;
 exports.isFragment = isFragment;
 exports.isHydrating = isHydrating;
 exports.isPortal = isPortal;
-exports.isSameNode = isSameNode;
 exports.isSuspense = isSuspense;
-exports.mapNodes = mapNodes;
+exports.next = next;
 exports.normalizeClass = normalizeClass;
-exports.normalizeNode = normalizeNode;
+exports.nthChild = nthChild;
 exports.omitProps = omitProps;
-exports.onCleanup = onCleanup;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
 exports.onUpdate = onUpdate;
 exports.patchAttr = patchAttr;
+exports.patchAttrHydrate = patchAttrHydrate;
 exports.patchClass = patchClass;
+exports.patchClassHydrate = patchClassHydrate;
 exports.patchStyle = patchStyle;
+exports.patchStyleHydrate = patchStyleHydrate;
 exports.provide = provide;
-exports.removeNode = removeNode;
-exports.replaceNode = replaceNode;
-exports.runWithScope = runWithScope;
-exports.setActiveScope = setActiveScope;
+exports.resetHydrationKey = resetHydrationKey;
 exports.setStyle = setStyle;
-exports.shallowCompare = shallowCompare;
-exports.startHydration = startHydration;
 exports.template = template;
 //# sourceMappingURL=template.dev.cjs.js.map
 //# sourceMappingURL=template.dev.cjs.js.map