@estjs/template 0.0.15-beta.13 → 0.0.15-beta.17

package/dist/template.dev.esm.js

@@ -1,597 +1,461 @@
-import { error, isHTMLElement, isPrimitive, isFalsy, isNull, isObject, isArray, isHtmlInputElement, isHtmlSelectElement, isHtmlTextAreaElement, isFunction, hasChanged, isPromise, coerceArray, startsWith, isString, isBrowser, normalizeClassName, camelCase, capitalize, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isUndefined, isNumber, isTextNode } from '@estjs/shared';
-import { effect, shallowReactive, isSignal, isComputed, signal, memoEffect, untrack } from '@estjs/signals';
+import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-3E4EK64L.dev.esm.js';
+import { normalizeClassName, isObject, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isString, isArray, camelCase, capitalize, isBrowser, error, isPromise, isFunction, isOn, isNull, isUndefined, isNumber, isBoolean, coerceArray, isHTMLElement, isPrimitive, isFalsy } from '@estjs/shared';
+import { effect, shallowReactive, isSignal, isComputed, signal } from '@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 __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-var activeScope = null;
-var scopeId = 0;
-function getActiveScope() {
-  return activeScope;
-}
-function setActiveScope(scope) {
-  activeScope = scope;
-}
-function createScope(parent = activeScope) {
-  const scope = {
-    id: ++scopeId,
-    parent,
-    children: null,
-    // Lazy initialized
-    provides: null,
-    // Lazy initialized
-    cleanup: null,
-    // Lazy initialized
-    onMount: null,
-    // Lazy initialized
-    onUpdate: null,
-    // Lazy initialized
-    onDestroy: null,
-    // Lazy initialized
-    isMounted: false,
-    isDestroyed: false
-  };
-  if (parent) {
-    if (!parent.children) {
-      parent.children = /* @__PURE__ */ new Set();
+// 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" );
+function patchAttr(el, key, prev, next2) {
+  if (key === KEY_PROP) {
+    if (next2 == null) {
+      el.removeAttribute(key);
+    } else {
+      el.setAttribute(key, String(next2));
     }
-    parent.children.add(scope);
-  }
-  return scope;
-}
-function runWithScope(scope, fn) {
-  const prevScope = activeScope;
-  activeScope = scope;
-  try {
-    return fn();
-  } finally {
-    activeScope = prevScope;
-  }
-}
-function disposeScope(scope) {
-  var _a2, _b, _c, _d, _e;
-  if (!scope || scope.isDestroyed) {
     return;
   }
-  if (scope.children) {
-    while (scope.children.size > 0) {
-      const child = scope.children.values().next().value;
-      if (child) {
-        disposeScope(child);
+  if (key === SPREAD_NAME) {
+    const prevObj = isObject(prev) ? prev : null;
+    const nextObj = isObject(next2) ? next2 : null;
+    {
+      if (next2 != null && !nextObj) {
+        warn("spread attribute must be an object");
       }
     }
-  }
-  if (scope.onDestroy) {
-    for (const hook of scope.onDestroy) {
-      try {
-        hook();
-      } catch (error_) {
-        {
-          error(`Scope(${scope.id}): Error in destroy hook:`, error_);
+    if (prevObj) {
+      for (const attrKey in prevObj) {
+        if (attrKey === SPREAD_NAME) {
+          {
+            warn("nested spread attributes are ignored");
+          }
+          continue;
+        }
+        if (!nextObj || !(attrKey in nextObj)) {
+          patchAttr(el, attrKey, prevObj[attrKey], null);
         }
       }
     }
-    scope.onDestroy.clear();
-  }
-  if (scope.cleanup) {
-    for (const fn of scope.cleanup) {
-      try {
-        fn();
-      } catch (error_) {
-        {
-          error(`Scope(${scope.id}): Error in cleanup:`, error_);
+    if (nextObj) {
+      for (const attrKey in nextObj) {
+        if (attrKey === SPREAD_NAME) {
+          {
+            warn("nested spread attributes are ignored");
+          }
+          continue;
         }
+        patchAttr(el, attrKey, prevObj == null ? void 0 : prevObj[attrKey], nextObj[attrKey]);
       }
     }
-    scope.cleanup.clear();
+    return;
+  }
+  const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
+  const isXlink = elementIsSVG && key.startsWith("xlink:");
+  const isXmlns = elementIsSVG && key.startsWith("xmlns:");
+  const isBoolean2 = isSpecialBooleanAttr(key) || isBooleanAttr(key);
+  if (prev === next2) {
+    return;
   }
-  if ((_a2 = scope.parent) == null ? void 0 : _a2.children) {
-    scope.parent.children.delete(scope);
+  if (key.length > 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110) {
+    return;
   }
-  (_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);
-  scope.parent = null;
-  scope.isDestroyed = true;
-}
-function onCleanup(fn) {
-  const scope = activeScope;
-  if (!scope) {
+  const lowerKey = key.toLowerCase();
+  if (lowerKey === "innerhtml" || lowerKey === "srcdoc") {
     {
-      error("onCleanup() must be called within a scope");
+      warn(`${key} updates are ignored by patchAttr`);
     }
     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 NORMAL_COMPONENT = /* @__PURE__ */ Symbol("Normal Component" );
-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 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));
-  }
-  return hash < 0 ? -hash : hash;
-}
-var symbolIdCounter = 0;
-function normalizeKey(key) {
-  if (isFalsy(key)) {
-    return void 0;
-  }
-  if (isString(key)) {
-    if (key.length <= MAX_KEY_LENGTH) {
-      return key;
-    }
-    {
-      warn(
-        `[Key System] Key length exceeds ${MAX_KEY_LENGTH} characters. Consider using a shorter identifier.`
-      );
+  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 `${key.slice(0, MAX_KEY_LENGTH - 10)}_${simpleHash(key).toString(36)}`;
+    return;
   }
-  if (isNumber(key)) {
-    {
-      if (key !== key) {
-        warn("[Key System] NaN cannot be used as a key");
-        return void 0;
-      }
-      if (!Number.isFinite(key)) {
-        warn("[Key System] Infinity cannot be used as a key");
-        return void 0;
-      }
+  if (isBoolean2) {
+    if (includeBooleanAttr(next2)) {
+      el.setAttribute(key, "");
+    } else {
+      el.removeAttribute(key);
     }
-    return String(key);
+    return;
   }
-  if (isSymbol(key)) {
-    const globalKey = Symbol.keyFor(key);
-    if (globalKey) {
-      return `_s.${globalKey}`;
+  const attrValue = isSymbol(next2) ? String(next2) : next2;
+  const isUrlAttr = lowerKey === "href" || lowerKey === "src" || lowerKey === "xlink:href" || lowerKey === "action" || lowerKey === "formaction" || lowerKey === "poster";
+  if (isUrlAttr && isString(attrValue)) {
+    const v = attrValue.trim().toLowerCase();
+    if (v.startsWith("javascript:") || v.startsWith("data:")) {
+      return;
     }
-    const desc = key.description;
-    return desc ? `_s.${desc}` : `${symbolIdCounter++}`;
   }
-  return String(key);
-}
-var NODE_KEY_SYMBOL = /* @__PURE__ */ Symbol("essor.key");
-function setNodeKey(node, key) {
-  if (isComponent(node)) {
+  if (isXlink) {
+    el.setAttributeNS(XLINK_NAMESPACE, key, String(attrValue));
     return;
   }
-  if (!node || node.nodeType === Node.DOCUMENT_NODE) {
-    {
-      warn("[Key System] Cannot set key on invalid node");
-    }
+  if (isXmlns) {
+    el.setAttributeNS(XMLNS_NAMESPACE, key, String(attrValue));
     return;
   }
-  const normalizedKey = normalizeKey(key);
-  if (isFalsy(normalizedKey)) {
-    delete node[NODE_KEY_SYMBOL];
+  if (elementIsSVG) {
+    el.setAttribute(key, String(attrValue));
   } else {
-    node[NODE_KEY_SYMBOL] = normalizedKey;
+    if (key in el) {
+      try {
+        el[key] = attrValue;
+      } catch (e) {
+        el.setAttribute(key, String(attrValue));
+      }
+    } else {
+      el.setAttribute(key, String(attrValue));
+    }
   }
 }
-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 (isHTMLElement(node)) {
-    return node;
-  }
-  if (isPrimitive(node)) {
-    const textContent = isFalsy(node) ? "" : String(node);
-    return document.createTextNode(textContent);
+function patchClass(el, prev, next2, isSVG = false) {
+  if (prev === next2) {
+    return;
   }
-  return node;
-}
-function isSameNode(a, b) {
-  const keyA = getNodeKey(a);
-  const keyB = getNodeKey(b);
-  if (keyA !== keyB) {
-    return false;
+  const normalizedNext = normalizeClass(next2);
+  if (!normalizedNext) {
+    el.removeAttribute("class");
+    return;
   }
-  const aIsComponent = isComponent(a);
-  const bIsComponent = isComponent(b);
-  if (aIsComponent && bIsComponent) {
-    return a.component === b.component;
+  const normalizedPrev = isString(prev) ? prev : normalizeClass(prev);
+  if (normalizedPrev === normalizedNext) {
+    return;
   }
-  if (aIsComponent !== bIsComponent) {
-    return false;
+  if (isSVG) {
+    el.setAttribute("class", normalizedNext);
+  } else {
+    el.className = normalizedNext;
   }
-  if (isPrimitive(a) || isPrimitive(b)) {
-    return a === b;
+}
+var normalizeClass = normalizeClassName;
+var importantRE = /\s*!important$/;
+var prefixes = ["Webkit", "Moz", "ms"];
+var prefixCache = {};
+function patchStyle(el, prev, next2) {
+  const style = el.style;
+  if (next2 && isString(next2)) {
+    if (prev !== next2) {
+      style.cssText = next2;
+    }
+    return;
   }
-  const aNode = a;
-  const bNode = b;
-  if (aNode.nodeType !== bNode.nodeType) {
-    return false;
+  if (!next2) {
+    if (prev) {
+      el.removeAttribute("style");
+    }
+    return;
   }
-  if (aNode.nodeType === Node.ELEMENT_NODE) {
-    return aNode.tagName === bNode.tagName;
+  if (prev && !isString(prev)) {
+    const prevObj = prev;
+    for (const key in prevObj) {
+      if (!next2 || next2[key] == null) {
+        setStyle(style, key, "");
+      }
+    }
+  } else if (prev && 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 && isObject(next2) && next2[key] == null) {
+        setStyle(style, key, "");
+      }
+    }
   }
-  return true;
-}
-function shallowCompare(a, b) {
-  if (a === b) return true;
-  if (isNull(a) || isNull(b)) return false;
-  if (!isObject(a) || !isObject(b)) return false;
-  if (isArray(a) !== isArray(b)) return false;
-  const aRecord = a;
-  const bRecord = b;
-  const aKeys = Object.keys(aRecord);
-  const bKeys = Object.keys(bRecord);
-  if (aKeys.length !== bKeys.length) return false;
-  for (const key of aKeys) {
-    if (!(key in bRecord) || aRecord[key] !== bRecord[key]) {
-      return false;
+  if (next2 && !isString(next2)) {
+    const nextObj = next2;
+    for (const key in nextObj) {
+      const value = nextObj[key];
+      if ((!prev || isString(prev) || prev[key] !== value) && value != null) {
+        setStyle(style, key, value);
+      }
     }
   }
-  return true;
 }
-function removeNode(node) {
-  if (!node) return;
-  if (isComponent(node)) {
-    node.destroy();
+function setStyle(style, name, val) {
+  if (isArray(val)) {
+    for (const element of val) {
+      setStyle(style, name, element);
+    }
     return;
   }
-  const element = node;
-  if (element.parentElement) {
-    element.remove();
+  if (val == null || val === "") {
+    val = "";
   }
-}
-function insertNode(parent, child, before) {
-  if (!parent || !child) return;
-  if (isComponent(child)) {
-    const beforeNode2 = isComponent(before) ? before.firstChild : before;
-    child.mount(parent, beforeNode2);
+  if (name.startsWith("--")) {
+    style.setProperty(name, val);
     return;
   }
-  const beforeNode = isComponent(before) ? before.firstChild : before;
-  if (beforeNode) {
-    parent.insertBefore(child, beforeNode);
+  const prefixed = autoPrefix(style, name);
+  if (isString(val) && importantRE.test(val)) {
+    style.setProperty(camelCase(prefixed), val.replace(importantRE, ""), "important");
   } else {
-    parent.appendChild(child);
+    style[prefixed] = val;
   }
 }
-function replaceNode(parent, newNode, oldNode) {
-  if (!parent || !newNode || !oldNode || newNode === oldNode) return;
-  const beforeNode = isComponent(oldNode) ? oldNode.beforeNode : oldNode.nextSibling;
-  removeNode(oldNode);
-  insertNode(parent, newNode, beforeNode);
-}
-function getFirstDOMNode(node) {
-  if (!node) {
-    return;
+function autoPrefix(style, rawName) {
+  const cached = prefixCache[rawName];
+  if (cached) {
+    return cached;
   }
-  if (isComponent(node)) {
-    return node.firstChild;
+  let name = camelCase(rawName);
+  if (name !== "filter" && name in style) {
+    return prefixCache[rawName] = name;
   }
-  if (isPrimitive(node)) {
-    return void 0;
+  name = capitalize(name);
+  for (const prefix of prefixes) {
+    const prefixed = prefix + name;
+    if (prefixed in style) {
+      return prefixCache[rawName] = prefixed;
+    }
   }
-  return node;
+  return rawName;
 }
-function transferKey(oldNode, newNode) {
-  if (isComponent(oldNode) || isComponent(newNode)) {
-    return;
-  }
-  const oldKey = getNodeKey(oldNode);
-  if (oldKey && !getNodeKey(newNode)) {
-    setNodeKey(newNode, oldKey);
-  }
+
+// src/hydration.ts
+var _hydrationKey = 0;
+function getHydrationKey() {
+  return String(_hydrationKey++);
 }
-function patch(parent, oldNode, newNode) {
-  if (newNode === oldNode) {
-    return oldNode;
-  }
-  const oldIsElement = isHTMLElement(oldNode);
-  const newIsElement = isHTMLElement(newNode);
-  if (newIsElement && oldIsElement) {
-    if (newNode.isEqualNode(oldNode)) {
-      return oldNode;
+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 (isTextNode(oldNode) && 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);
-    }
+  {
+    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 (!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;
+    }
+    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;
@@ -601,7 +465,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;
@@ -633,260 +497,253 @@ function getSequence(arr) {
   return result;
 }
 
-// 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 (isHtmlInputElement(node)) {
-    bindInputElement(node, setter);
-  } else if (isHtmlSelectElement(node)) {
-    bindSelectElement(node, setter);
-  } else if (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;
+// src/dom.ts
+function removeNode(node) {
+  if (!node) return;
+  if (isComponent(node)) {
+    node.destroy();
+  } else {
+    const element = node;
+    if (element.parentNode) {
+      element.remove();
+    }
   }
 }
-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);
+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) {
+        error("insertNode: child is not a Node", child2);
+      }
     }
-  });
+    parent.appendChild(child2);
+  }
+}
+function normalizeNode(node) {
+  if (isHTMLElement(node)) {
+    return node;
+  }
+  if (isPrimitive(node)) {
+    return document.createTextNode(isFalsy(node) ? "" : String(node));
+  }
+  return node;
 }
 function insert(parent, nodeFactory, before) {
   if (!parent) return;
+  const ownerScope = getActiveScope();
   let renderedNodes = [];
-  const currentScope = getActiveScope();
-  const cleanup = effect(() => {
-    const run = () => {
+  let isFirstRun = true;
+  const resolveNodes = (raw) => {
+    if (raw instanceof Node) return [raw];
+    if (isNull(raw) || isUndefined(raw) || isString(raw) || isNumber(raw) || isBoolean(raw)) {
+      return [normalizeNode(raw)];
+    }
+    return coerceArray(raw).map((item) => isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
+  };
+  const effectRunner = effect(() => {
+    const executeUpdate = () => {
       const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
-      const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap(normalizeNode);
-      renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+      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 (currentScope) {
-      runWithScope(currentScope, run);
+    if (ownerScope && !ownerScope.isDestroyed) {
+      runWithScope(ownerScope, executeUpdate);
     } else {
-      run();
+      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 registerScopedHook(scope, listKey, hook) {
+  let hookList = scope[listKey];
+  if (!hookList) {
+    hookList = [];
+    scope[listKey] = hookList;
+  }
+  hookList.push(hook);
+}
+function executeHooks(hooks, scopeId, phase) {
+  const len = hooks.length;
+  if (len === 0) return;
+  let pending;
+  for (let i = 0; i < len; i++) {
+    try {
+      const result = hooks[i]();
+      if (isPromise(result)) {
+        const safePromise = result.catch((error_) => {
+          if (true) {
+            error(`Scope(${scopeId}): Async ${phase} hook rejected:`, error_);
+          }
+        });
+        (pending || (pending = [])).push(safePromise);
+      }
+    } catch (error_) {
+      {
+        error(`Scope(${scopeId}): Error in ${phase} hook:`, error_);
+      }
+    }
+  }
+  if (!pending) return;
+  return Promise.all(pending).then(() => {
+  });
 }
-function registerMountHook(hook) {
+function onMount(hook) {
   const scope = getActiveScope();
   if (!scope) {
-    {
-      error("onMount() must be called within a scope");
-    }
+    error("onMount() must be called within a scope");
     return;
   }
   if (scope.isMounted) {
     try {
-      hook();
-    } catch (error_) {
-      {
-        error(`Scope(${scope.id}): Error in mount hook:`, error_);
+      const result = hook();
+      if (isPromise(result)) {
+        result.catch((error_) => {
+          if (true) error(`Scope(${scope.id}): Async mount hook rejected:`, error_);
+        });
       }
+    } catch (error_) {
+      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) {
-    {
-      error("onUpdate() must be called within a scope");
-    }
+    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) {
-    {
-      error("onDestroy() must be called within a scope");
-    }
+    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) {
-            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_) {
-        {
-          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_COMPONENT;
+_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 props (reactive and snapshot)
-    this.reactiveProps = {};
-    this._propSnapshots = {};
-    // Component lifecycle state
     this.state = 0 /* INITIAL */;
-    // Parent scope captured at construction time for correct hierarchy
-    this.parentScope = null;
-    // @ts-ignore
-    this[_a] = true;
-    this.key = props.key ? normalizeKey(props.key) : getComponentKey(component);
-    this.reactiveProps = shallowReactive(__spreadValues({}, props));
+    this.beforeNode = void 0;
+    this.renderedNodes = [];
+    this.firstChild = void 0;
+    this.parentNode = void 0;
+    this.rootEventCleanups = [];
     this.parentScope = getActiveScope();
-    for (const key in props) {
-      const val = props[key];
-      if (isObject(val)) {
-        this._propSnapshots[key] = isArray(val) ? [...val] : __spreadValues({}, val);
-      }
-    }
-  }
-  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;
+    const container = {};
+    syncDescriptors(container, props);
+    this.reactiveProps = shallowReactive(container);
   }
+  /**
+   * 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, _b;
+    var _a2;
     this.parentNode = parentNode;
     this.beforeNode = beforeNode;
     this.state = 1 /* MOUNTING */;
@@ -897,177 +754,128 @@ var Component = class {
       this.state = 2 /* MOUNTED */;
       return this.renderedNodes;
     }
-    const parentScope = (_a2 = this.parentScope) != null ? _a2 : getActiveScope();
-    this.scope = createScope(parentScope);
-    setActiveScope(this.scope);
-    let result = this.component(this.reactiveProps);
-    if (isFunction(result)) {
-      result = result(this.reactiveProps);
-    }
-    if (isSignal(result) || isComputed(result)) {
-      result = result.value;
-    }
-    const renderedNodes = (_b = insert(parentNode, result, beforeNode)) != null ? _b : [];
+    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 (isFunction(result)) {
+        result = result(this.reactiveProps);
+      }
+      if (isSignal(result) || isComputed(result)) {
+        result = result.value;
+      }
+      return (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
+    });
     this.renderedNodes = renderedNodes;
-    this.applyProps(this.props);
+    this.firstChild = renderedNodes[0];
+    this.syncSpecialProps(this.props);
     this.state = 2 /* MOUNTED */;
-    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;
-    this._propSnapshots = prevNode._propSnapshots;
-    this._updateReactiveProps(this.props);
-    if (!this.isConnected && this.parentNode) {
-      this.mount(this.parentNode, this.beforeNode);
-      return this;
-    }
-    if (this.scope) {
-      setActiveScope(this.scope);
-      this.applyProps(this.props);
-      triggerUpdateHooks(this.scope);
-    }
-    return this;
-  }
   /**
-   * Update reactive props by comparing with current values
+   * 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.
    */
-  _updateReactiveProps(props) {
-    for (const key in props) {
-      if (key === "key") continue;
-      const newValue = props[key];
-      const oldValue = this.reactiveProps[key];
-      if (newValue === oldValue && !this._propSnapshots[key]) continue;
-      const isNewValueObject = isObject(newValue);
-      if (isNewValueObject) {
-        const snapshot = this._propSnapshots[key];
-        if (snapshot && shallowCompare(newValue, snapshot)) continue;
-        const newSnapshot = isArray(newValue) ? [...newValue] : __spreadValues({}, newValue);
-        this.reactiveProps[key] = newSnapshot;
-        this._propSnapshots[key] = newSnapshot;
-      } else {
-        if (hasChanged(newValue, oldValue)) {
-          this.reactiveProps[key] = newValue;
-          if (this._propSnapshots[key]) {
-            delete this._propSnapshots[key];
-          }
-        }
-      }
-    }
-  }
-  unwrapRenderResult(result) {
-    if (isFunction(result)) {
-      result = result(this.reactiveProps);
-    }
-    if (isSignal(result) || isComputed(result)) {
-      result = result.value;
-    }
-    if (isComponent(result)) {
-      result = result.mount(this.parentNode, this.beforeNode);
-    }
-    if (isPromise(result)) {
-      result = result.then((r) => this.unwrapRenderResult(r));
-    }
-    return result;
-  }
-  forceUpdate() {
-    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 (isFunction(result)) {
-          result = result(this.reactiveProps);
-        }
-        if (isSignal(result) || isComputed(result)) {
-          result = result.value;
-        }
-        const newNodes = coerceArray(result);
-        const anchor = this._getAnchorNode();
-        if (!this.parentNode) return;
-        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;
-    }
+  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);
   }
   /**
-   * Get anchor node for insertion
+   * Tear down and re-mount the component at its current insertion point.
+   * No-op if the component has never been mounted.
    */
-  _getAnchorNode() {
-    if (this.beforeNode) return this.beforeNode;
-    if (this.renderedNodes.length > 0) {
-      const lastNode = this.renderedNodes[this.renderedNodes.length - 1];
-      const lastDom = getFirstDOMNode(lastNode);
-      if (lastDom) {
-        return lastDom.nextSibling;
-      }
-    }
-    return void 0;
+  forceUpdate() {
+    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 */;
-    for (const node of this.renderedNodes) {
-      removeNode(node);
-    }
     const scope = this.scope;
-    if (scope) {
-      disposeScope(scope);
-      this.scope = null;
-    }
+    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) {
+  /**
+   * 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 firstElement = this.firstChild;
-    for (const [propName, propValue] of Object.entries(props)) {
-      if (startsWith(propName, EVENT_PREFIX)) {
-        if (!firstElement || !isHTMLElement(firstElement)) return;
-        const eventName = propName.slice(EVENT_PREFIX.length).toLowerCase();
-        addEventListener(firstElement, eventName, propValue);
-      } else if (propName === REF_KEY && isSignal(propValue)) {
-        propValue.value = firstElement;
+    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 (isOn(key) && isFunction(value)) {
+        const eventName = key.slice(2).toLowerCase();
+        this.rootEventCleanups.push(addEvent(root, eventName, value));
       }
     }
-    this.props = props;
+  }
+  /**
+   * 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;
+    }
+  }
+  /**
+   * Bind the root ref prop and return a cleanup that restores the previous ref state.
+   */
+  bindRootRef(value, root) {
+    if (isFunction(value)) {
+      value(root);
+      return () => value(null);
+    }
+    if (isSignal(value)) {
+      const previousValue = value.value;
+      value.value = root;
+      return () => {
+        if (value.value === root) {
+          value.value = previousValue;
+        }
+      };
+    }
+    return void 0;
   }
 };
 function isComponent(node) {
-  return !!node && !!node[NORMAL_COMPONENT];
+  return !!node && !!node["normal" /* NORMAL */];
 }
 function createComponent(componentFn, props) {
   if (isComponent(componentFn)) {
@@ -1093,17 +901,72 @@ function template(html) {
 function createApp(component, target) {
   const container = isString(target) ? document.querySelector(target) : target;
   if (!container) {
-    error(`Target element not found: ${target}`);
+    {
+      warn(`Target element not found: ${target}`);
+    }
     return;
   }
-  const existingContext = container.innerHTML;
-  if (existingContext) {
-    error(`Target element is not empty, it will be delete: ${target}`);
+  const existingContent = container.innerHTML;
+  if (existingContent) {
+    {
+      warn(`Target element is not empty, it will be cleared: ${target}`);
+    }
     container.innerHTML = "";
   }
-  const rootComponent = isComponent(component) ? component : 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 = isString(target) ? document.querySelector(target) : target;
+  if (!container) {
+    {
+      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();
@@ -1129,68 +992,66 @@ 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 reTarget(event, value) {
-  Object.defineProperty(event, "target", {
+function reTargetEvent(e, value) {
+  Object.defineProperty(e, "target", {
     configurable: true,
     value
   });
 }
-function handleNodeEvent(node, event, key) {
-  const handler = node[`_$${key}`];
-  if (handler && isFunction(handler) && !node.disabled) {
-    const data = node[`${key}Data`];
-    data ? handler.call(node, data, event) : handler.call(node, event);
-    if (event.cancelBubble) return false;
-  }
-  if (node.host && !isString(node.host) && !node.host._$host && isFunction(node.contains) && node.contains(event.target)) {
-    reTarget(event, node.host);
-  }
-  return true;
-}
-function walkUpTree(startNode, event, key) {
-  let node = startNode;
-  while (handleNodeEvent(node, event, key) && (node = node._$host || node.parentNode || node.host)) ;
-  return node;
-}
-function eventHandler(event) {
-  let node = event.target;
-  const key = `${event.type}`;
-  const oriTarget = event.target;
-  const oriCurrentTarget = event.currentTarget;
-  Object.defineProperty(event, "currentTarget", {
+function eventHandler(e) {
+  let node = e.target;
+  const key = e.type;
+  const oriTarget = e.target;
+  const oriCurrentTarget = e.currentTarget;
+  const handleNode = () => {
+    const handler = node[`_$${key}`];
+    if (handler && isFunction(handler) && !node.disabled) {
+      const data = node[`${key}Data`];
+      data ? handler.call(node, data, e) : handler.call(node, e);
+      if (e.cancelBubble) return false;
+    }
+    if (node.host && !isString(node.host) && !node.host._$host && isFunction(node.contains) && node.contains(e.target)) {
+      reTargetEvent(e, node.host);
+    }
+    return true;
+  };
+  const walkUpTree = () => {
+    while (handleNode() && (node = node._$host || node.parentNode || node.host)) ;
+  };
+  Object.defineProperty(e, "currentTarget", {
     configurable: true,
+    /**
+     * Returns the current delegated target for the event.
+     */
     get() {
       return node || document;
     }
   });
-  if (event.composedPath) {
-    const path = event.composedPath();
-    reTarget(event, path[0]);
+  if (e.composedPath) {
+    const path = e.composedPath();
+    reTargetEvent(e, path[0]);
     for (let i = 0; i < path.length - 2; i++) {
       node = path[i];
-      if (!handleNodeEvent(node, event, key)) break;
+      if (!handleNode()) break;
       if (node._$host) {
         node = node._$host;
-        node = walkUpTree(node, event, key);
+        walkUpTree();
         break;
       }
       if (node.parentNode === oriCurrentTarget) {
         break;
       }
     }
-  } else {
-    node = walkUpTree(node, event, key);
-  }
-  reTarget(event, oriTarget);
+  } else walkUpTree();
+  reTargetEvent(e, oriTarget);
 }
 var $EVENTS = /* @__PURE__ */ Symbol("_$EVENTS");
 function delegateEvents(eventNames, document2 = window.document) {
@@ -1203,424 +1064,354 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
-
-// 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);
-    }
-  });
-}
-
-// src/hydration/shared.ts
-var isHydrationActive = false;
-function startHydration() {
-  isHydrationActive = true;
-}
-function endHydration() {
-  isHydrationActive = false;
-}
-function isHydrating() {
-  return isHydrationActive;
-}
-var hydrationCounter = 0;
-function getHydrationKey() {
-  return `${hydrationCounter++}`;
-}
-function resetHydrationKey() {
-  hydrationCounter = 0;
-}
-
-// src/hydration/hydration.ts
-var DATA_IDX_REGEX = /^\d+-\d+$/;
-function getRenderedElement(temp) {
-  return () => {
-    if (!isBrowser()) {
-      return null;
-    }
-    const key = getHydrationKey();
-    const node = document.querySelector(`[data-hk="${key}"]`);
-    if (node) {
-      return node;
-    }
-    return template(temp)();
-  };
-}
-function mapSSRNodes(templateEl, idx) {
-  const hk = templateEl.dataset.hk;
-  if (!hk) {
-    return mapNodes(templateEl, idx);
-  }
-  const nodesList = [];
-  const elements = templateEl.querySelectorAll(`[data-idx^="${hk}"]`);
-  if (elements.length > 0) {
-    nodesList.push(
-      ...Array.from(elements).filter((item) => {
-        const idxAttr = item.dataset.idx;
-        return idxAttr !== null && DATA_IDX_REGEX.test(idxAttr);
-      }).map((item) => {
-        const idxAttr = item.dataset.idx || "";
-        const [hkPart, idxPart] = idxAttr.split("-");
-        return {
-          hk: hkPart,
-          idx: idxPart,
-          node: item
-        };
-      })
-    );
-  }
-  const commentNodes = [];
-  const walkNodes = (node) => {
-    if (node.nodeType === Node.COMMENT_NODE && node.textContent && DATA_IDX_REGEX.test(node.textContent)) {
-      const [hkPart, idxPart] = node.textContent.split("-");
-      commentNodes.push({
-        hk: hkPart,
-        idx: idxPart,
-        node
-      });
-    }
-    let child = node.firstChild;
-    while (child) {
-      walkNodes(child);
-      child = child.nextSibling;
-    }
-  };
-  walkNodes(templateEl);
-  nodesList.push(...commentNodes);
-  const nodes = [templateEl];
-  idx.forEach((indexValue) => {
-    const node = nodesList.find((item) => item.idx === String(indexValue));
-    if (node) {
-      nodes.push(node.node);
-    }
-  });
-  return nodes;
-}
-function hydrate(component, container) {
-  startHydration();
-  resetHydrationKey();
-  try {
-    const rootElement = isString(container) ? document.querySelector(container) : container;
-    if (!rootElement) {
-      error("Hydration error: Root element not found");
-      return void 0;
-    }
-    const rootComponent = createComponent(component);
-    rootComponent.mount(rootElement);
-    endHydration();
-    return rootComponent;
-  } catch (error_) {
-    error("Hydration error:", error_);
-    endHydration();
-    return void 0;
-  }
-}
-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;
-  }
-  if (!normalizedNext) {
-    el.removeAttribute("class");
-  } else if (isSVG) {
-    el.setAttribute("class", normalizedNext);
-  } else {
-    el.className = normalizedNext;
-  }
-}
-function normalizeClass(value) {
-  return normalizeClassName(value);
-}
-var importantRE = /\s*!important$/;
-var prefixes = ["Webkit", "Moz", "ms"];
-var prefixCache = {};
-function patchStyle(el, prev, next) {
-  const style = el.style;
-  const isCssString = isString(next);
-  if (isHydrating()) {
-    return;
-  }
-  if (next && isCssString) {
-    if (prev !== next) {
-      style.cssText = next;
-    }
-    return;
-  }
-  if (!next) {
-    if (prev) {
-      el.removeAttribute("style");
-    }
-    return;
-  }
-  if (prev && !isString(prev)) {
-    for (const key in prev) {
-      if (!next || next[key] == null) {
-        setStyle(style, key, "");
-      }
-    }
-  } else if (prev && 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 && isObject(next) && next[key] == null) {
-          setStyle(style, key, "");
-        }
-      }
-    }
-  }
-  if (next && !isString(next)) {
-    for (const key in next) {
-      const value = next[key];
-      if ((!prev || isString(prev) || prev[key] !== value) && value != null) {
-        setStyle(style, key, value);
-      }
-    }
-  }
-}
-function setStyle(style, name, val) {
-  if (isArray(val)) {
-    for (const element of val) {
-      setStyle(style, name, element);
+function clearDelegatedEvents(document2 = window.document) {
+  const docWithEvents = document2;
+  const eventSet = docWithEvents[$EVENTS];
+  if (eventSet) {
+    for (const name of eventSet.keys()) {
+      document2.removeEventListener(name, eventHandler);
     }
-    return;
-  }
-  if (val == null || val === "") {
-    val = "";
-  }
-  if (name.startsWith("--")) {
-    style.setProperty(name, val);
-    return;
-  }
-  const prefixed = autoPrefix(style, name);
-  if (isString(val) && importantRE.test(val)) {
-    style.setProperty(camelCase(prefixed), val.replace(importantRE, ""), "important");
-  } else {
-    style[prefixed] = val;
+    delete docWithEvents[$EVENTS];
   }
 }
-function autoPrefix(style, rawName) {
-  const cached = prefixCache[rawName];
-  if (cached) {
-    return cached;
-  }
-  let name = camelCase(rawName);
-  if (name !== "filter" && name in style) {
-    return prefixCache[rawName] = name;
-  }
-  name = capitalize(name);
-  for (const prefix of prefixes) {
-    const prefixed = prefix + name;
-    if (prefixed in style) {
-      return prefixCache[rawName] = prefixed;
-    }
+function addEventListener(element, event, handler, options) {
+  const cleanup = addEvent(element, event, handler, options);
+  if (getActiveScope()) {
+    onCleanup(cleanup);
   }
-  return rawName;
 }
-function patchAttr(el, key, prev, next) {
-  if (key === KEY_PROP) {
-    if (next == null) {
-      setNodeKey(el, void 0);
-    } else {
-      setNodeKey(el, String(next));
-    }
-    return;
-  }
-  if (key === SPREAD_NAME) {
-    {
-      if (!isObject(next)) {
-        warn("spread attribute must be an object");
-      }
-    }
-    Object.keys(next).forEach((k) => {
-      patchAttr(el, k, prev == null ? void 0 : prev[k], next == null ? void 0 : next[k]);
-    });
-    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 = isSpecialBooleanAttr(key) || isBooleanAttr(key);
-  if (prev === next) {
-    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;
   }
-  const lowerKey = key.toLowerCase();
-  if (lowerKey.length > 2 && lowerKey.charCodeAt(0) === 111 && lowerKey.charCodeAt(1) === 110) {
-    return;
+};
+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;
   }
-  if (lowerKey === "innerhtml") {
-    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 == null) {
-    if (isXlink) {
-      el.removeAttributeNS(XLINK_NAMESPACE, key.slice(6));
-    } else if (isXmlns) {
-      const localName = key.slice(6);
-      el.removeAttributeNS(XMLNS_NAMESPACE, localName);
+};
+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;
+  }
+};
+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 {
-      el.removeAttribute(key);
+      const next2 = v == null ? "" : String(v);
+      if (s.value !== next2) s.value = next2;
     }
-    return;
-  }
-  if (isXlink) {
-    el.setAttributeNS(XLINK_NAMESPACE, key, String(next));
-    return;
   }
-  if (isXmlns) {
-    el.setAttributeNS(XMLNS_NAMESPACE, key, String(next));
-    return;
+};
+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 (isBoolean) {
-    if (includeBooleanAttr(next)) {
-      el.setAttribute(key, "");
-    } else {
-      el.removeAttribute(key);
+};
+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;
     }
-    return;
+  };
+}
+function castValue(val, trim, number) {
+  if (!isString(val)) return val;
+  if (trim) val = val.trim();
+  if (number && val !== "") {
+    const parsed = Number(val);
+    if (!Number.isNaN(parsed)) return parsed;
   }
-  const attrValue = isSymbol(next) ? String(next) : next;
-  const isUrlAttr = lowerKey === "href" || lowerKey === "src" || lowerKey === "xlink:href";
-  if (isUrlAttr && isString(attrValue)) {
-    const v = attrValue.trim().toLowerCase();
-    if (v.startsWith("javascript:") || v.startsWith("data:")) {
+  return val;
+}
+function isFocused(node) {
+  const root = node.getRootNode();
+  return (root instanceof Document || root instanceof ShadowRoot) && root.activeElement === node;
+}
+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 = () => 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;
     }
+    const next2 = transform(raw);
+    if (!Object.is(readModel(), next2)) {
+      setter(next2);
+    }
+  };
+  addEventListener(node, eventName, syncFromDom);
+  if (!lazy && !isFiles && (trim || number) && eventName !== "change") {
+    addEventListener(node, "change", () => {
+      strategy.write(node, transform(strategy.read(node)));
+    });
   }
-  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));
+  if (strategy.needsComposition && !lazy) {
+    addEventListener(node, "compositionstart", () => {
+      composing = true;
+    });
+    addEventListener(node, "compositionend", () => {
+      if (!composing) return;
+      composing = false;
+      syncFromDom();
+    });
+  }
+  const runner = 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) {
-      error("Fragment component requires props");
-      return null;
-    }
-  }
-  if (!(props == null ? void 0 : props.children)) {
-    error("Fragment component requires children");
-    return null;
-  }
-  const { children } = props;
-  return children;
+  if (!props || props.children == null) return null;
+  return props.children;
 }
 Fragment[FRAGMENT_COMPONENT] = true;
 function isFragment(node) {
   return !!node && !!node[FRAGMENT_COMPONENT];
 }
+function resolveTarget(props) {
+  const raw = isFunction(props.target) ? props.target() : props.target;
+  if (raw == null) return null;
+  if (isString(raw)) return document.querySelector(raw);
+  return raw;
+}
+function evalDisabled(props) {
+  return isFunction(props.disabled) ? !!props.disabled() : !!props.disabled;
+}
 function Portal(props) {
+  if (isHydrating()) {
+    const adopted = tryHydratePortal(props);
+    if (adopted) return adopted;
+  }
   const placeholder = document.createComment("portal");
   placeholder[PORTAL_COMPONENT] = true;
-  const children = props.children;
-  if (children) {
-    const childArray = isArray(children) ? children : [children];
-    const nodes = [];
-    onMount(() => {
-      const targetElement = isString(props.target) ? document.querySelector(props.target) : props.target;
-      if (!targetElement) {
-        {
-          warn(`[Portal] Target element not found: ${props.target}`);
-        }
-        return;
+  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) {
+      {
+        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 (!isString(node) && node.parentNode === targetElement) {
-            targetElement.removeChild(node);
-          }
-        });
-      });
+      return;
+    }
+    mountAt(target);
+  };
+  let mounted = false;
+  const effectRunner = 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_COMPONENT] = true;
+function tryHydratePortal(props) {
+  if (evalDisabled(props)) return null;
+  const anchor = consumeTeleportAnchor();
+  if (!anchor) {
+    {
+      warn("[Portal] hydration mismatch: no <!--teleport-anchor--> at call site.");
+    }
+    return null;
+  }
+  const target = resolveTarget(props);
+  if (!target) {
+    {
+      warn(`[Portal] hydration mismatch: target not found: ${String(props.target)}`);
+    }
+    return null;
+  }
+  const block = consumeTeleportBlock(target);
+  if (!block) {
+    {
+      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_COMPONENT];
 }
+function clearContainer(el) {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+}
+function resolveNodeValue(value) {
+  let current = value;
+  while (isFunction(current)) {
+    current = current();
+  }
+  if (isSignal(current) || isComputed(current)) {
+    return resolveNodeValue(current.value);
+  }
+  return current;
+}
 var SuspenseContext = /* @__PURE__ */ Symbol("SuspenseContext");
 function Suspense(props) {
-  if (isUndefined(document)) {
-    const fallback = props.fallback;
-    if (fallback) {
-      return String(fallback || "");
-    }
-    return "";
+  var _a2;
+  if (!isBrowser()) {
+    return (_a2 = props.fallback) != null ? _a2 : "";
   }
   const container = document.createElement("div");
   container.style.display = "contents";
@@ -1628,19 +1419,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 (isArray(current)) {
+      const nodes = [];
+      for (const item of current) {
+        const materialized = materializeChild(item);
+        if (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 = 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 && !isPromise(props.children);
@@ -1648,9 +1462,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 && !isPromise(props.children)) {
@@ -1658,33 +1470,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 = 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 = {
@@ -1697,9 +1493,9 @@ function Suspense(props) {
         if (pendingCount === 0) {
           showChildren();
         }
-      }).catch((error8) => {
+      }).catch((error4) => {
         {
-          warn("[Suspense] Resource failed:", error8);
+          warn("[Suspense] Resource failed:", error4);
         }
         if (!isMounted) return;
         pendingCount--;
@@ -1713,7 +1509,7 @@ function Suspense(props) {
       showFallback();
     },
     decrement: () => {
-      pendingCount--;
+      pendingCount = Math.max(0, pendingCount - 1);
       if (pendingCount === 0) {
         showChildren();
       }
@@ -1734,9 +1530,10 @@ function Suspense(props) {
   }
   onDestroy(() => {
     isMounted = false;
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
+    pendingCount = 0;
+    resolvedChildren = null;
+    clearContainer(container);
+    container.remove();
   });
   return container;
 }
@@ -1747,19 +1544,25 @@ function isSuspense(node) {
 function createResource(fetcher, options) {
   const value = signal(options == null ? void 0 : options.initialValue);
   const loading = signal(true);
-  const error8 = signal(null);
+  const error4 = signal(null);
   const state = 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;
+    error4.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) {
@@ -1769,31 +1572,33 @@ function createResource(fetcher, options) {
       }
     } catch (error_) {
       if (currentFetchId === fetchId) {
-        error8.value = error_ instanceof Error ? error_ : new Error(String(error_));
+        error4.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 = error4;
   resource.state = state;
   const actions = {
     mutate: (newValue) => {
       value.value = newValue;
       state.value = "ready";
       loading.value = false;
-      error8.value = null;
+      error4.value = null;
     },
     refetch: () => __async(null, null, function* () {
       yield fetch();
@@ -1801,89 +1606,274 @@ function createResource(fetcher, options) {
   };
   return [resource, actions];
 }
+function resolveModule(mod) {
+  return 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((error4) => {
+      cachedError = error4 instanceof Error ? error4 : new Error(String(error4));
+      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 fallbackNode = null;
-  const keyFn = props.keyFn;
+  let fallbackNodes = [];
+  const keyFn = props.key;
   const renderFn = props.children;
   const getList = () => {
     var _a2, _b;
     const input = props.each;
     if (isSignal(input)) return (_a2 = input.value) != null ? _a2 : [];
-    if (typeof input === "function") return (_b = input()) != null ? _b : [];
+    if (isFunction(input)) return (_b = input()) != null ? _b : [];
     return input != null ? input : [];
   };
   const getKey = (item) => keyFn ? keyFn(item) : item;
-  const renderItem = (item, index, parent, before) => {
-    var _a2;
-    const prevScope = getActiveScope();
-    const scope = createScope(prevScope);
-    setActiveScope(scope);
-    let node;
-    try {
-      const result = renderFn(item, index);
-      if (isComponent(result)) {
-        result.mount(parent, before);
-        node = (_a2 = result.firstChild) != null ? _a2 : document.createComment("empty");
+  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 {
-        node = result;
-        if (!node.parentNode) {
-          if (before) {
-            parent.insertBefore(node, before);
-          } else {
-            parent.appendChild(node);
-          }
-        }
+        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);
       }
-    } finally {
-      setActiveScope(prevScope);
     }
-    return { key: getKey(item), node, scope };
+    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);
-    if (entry.node.parentNode) {
-      entry.node.parentNode.removeChild(entry.node);
+    for (const node of entry.nodes) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
     }
   };
-  memoEffect(
-    ({ prev }) => {
-      var _a2;
-      const newItems = getList();
-      if (prev === newItems) return { prev: newItems };
-      const parent = marker.parentNode;
-      if (!parent) {
-        if (newItems.length === 0) {
-          if (props.fallback) {
-            const fb = props.fallback();
-            if (isComponent(fb)) {
-              fb.mount(fragment, marker);
-              fallbackNode = (_a2 = fb.firstChild) != null ? _a2 : document.createComment("empty");
-            } else {
-              fallbackNode = fb;
-              fragment.insertBefore(fallbackNode, marker);
-            }
-          }
-          return { prev: newItems };
-        }
+  const effectRunner = effect(() => {
+    const newItems = getList();
+    const parent = marker.parentNode;
+    if (!parent) {
+      if (newItems.length === 0) {
+        mountFallback(fragment, marker);
+      } else {
         entries = new Array(newItems.length);
-        for (const [i, newItem] of newItems.entries()) {
-          entries[i] = renderItem(newItem, i, fragment, marker);
+        let idx = 0;
+        for (const newItem of newItems) {
+          entries[idx] = renderItem(newItem, idx, fragment, marker);
+          idx++;
         }
-        return { prev: newItems };
       }
-      untrack(() => reconcile(parent, newItems));
-      return { prev: newItems };
-    },
-    {
-      prev: []
+      return;
     }
-  );
+    reconcile(parent, newItems);
+  });
   function reconcile(parent, newItems) {
-    var _a2;
     const oldLen = entries.length;
     const newLen = newItems.length;
     if (newLen === 0) {
@@ -1891,22 +1881,14 @@ function For(props) {
         disposeItem(entries[i]);
       }
       entries = [];
-      if (props.fallback && !fallbackNode) {
-        const fb = props.fallback();
-        if (isComponent(fb)) {
-          fb.mount(parent, marker);
-          fallbackNode = (_a2 = fb.firstChild) != null ? _a2 : document.createComment("empty");
-        } else {
-          fallbackNode = fb;
-          parent.insertBefore(fallbackNode, marker);
-        }
+      if (props.fallback && fallbackNodes.length === 0) {
+        mountFallback(parent, marker);
       }
       return;
     }
-    if (oldLen === 0 || fallbackNode) {
-      if (fallbackNode) {
-        if (fallbackNode.parentNode) fallbackNode.parentNode.removeChild(fallbackNode);
-        fallbackNode = null;
+    if (oldLen === 0 || fallbackNodes.length > 0) {
+      if (fallbackNodes.length > 0) {
+        clearFallback();
       }
       entries = new Array(newLen);
       const batchFragment2 = document.createDocumentFragment();
@@ -1920,46 +1902,76 @@ function For(props) {
     for (let i = 0; i < oldLen; i++) {
       const entry = entries[i];
       const list = oldKeyMap.get(entry.key);
-      if (list) {
-        list.push(entry);
-      } else {
-        oldKeyMap.set(entry.key, [entry]);
-      }
+      const pair = [entry, i];
+      if (list) list.push(pair);
+      else oldKeyMap.set(entry.key, [pair]);
     }
     const newEntries = new Array(newLen);
     const toRemove = [];
-    const batchFragment = document.createDocumentFragment();
+    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 = getKey(item);
+      const key = newKeys[i];
       const oldList = oldKeyMap.get(key);
       if (oldList && oldList.length > 0) {
-        newEntries[i] = oldList.shift();
+        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 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;
       }
-    }
-    for (const entry of toRemove) {
-      disposeItem(entry);
-    }
-    for (let i = 0; i < newLen; i++) {
-      const node = newEntries[i].node;
-      parent.insertBefore(node, marker);
     }
     entries = newEntries;
   }
   onCleanup(() => {
+    effectRunner.stop();
     for (const entry of entries) {
       disposeItem(entry);
     }
-    if (fallbackNode && fallbackNode.parentNode) {
-      fallbackNode.parentNode.removeChild(fallbackNode);
-    }
+    entries = [];
+    clearFallback();
     if (marker.parentNode) {
       marker.parentNode.removeChild(marker);
     }
@@ -1968,6 +1980,6 @@ function For(props) {
 }
 For[FOR_COMPONENT] = true;
 
-export { Component, For, Fragment, Portal, Suspense, addEvent, addEventListener, bindElement, createApp, createComponent, createResource, createScope, delegateEvents, disposeScope, endHydration, getActiveScope, getFirstDOMNode, getHydrationKey, getRenderedElement, hydrate, inject, insert, insertNode, isComponent, isFragment, isHydrating, isPortal, isSameNode, isSuspense, mapNodes, mapSSRNodes, normalizeClass, normalizeNode, omitProps, onCleanup, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, removeNode, replaceNode, resetHydrationKey, runWithScope, setActiveScope, setStyle, shallowCompare, startHydration, template };
+export { Component, For, Fragment, Portal, Suspense, addEvent, addEventListener, beginHydration, bindElement, child, clearDelegatedEvents, consumeTeleportAnchor, consumeTeleportBlock, createApp, createComponent, createResource, defineAsyncComponent, delegateEvents, endHydration, getHydrationKey, getRenderedElement, hydrate, inject, insert, isComponent, isFragment, isHydrating, isPortal, isSuspense, next, normalizeClass, nthChild, omitProps, onDestroy, onMount, onUpdate, patchAttr, patchAttrHydrate, patchClass, patchClassHydrate, patchStyle, patchStyleHydrate, provide, resetHydrationKey, setStyle, template };
 //# sourceMappingURL=template.dev.esm.js.map
 //# sourceMappingURL=template.dev.esm.js.map