@estjs/template 0.0.16-beta.8 → 0.0.16

package/dist/{template.dev.esm.js → template.dev.js}

@@ -1,9 +1,7 @@
-import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-OEKE4VTS.dev.esm.js';
-import { normalizeClassName, isObject, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isString, isArray, kebabCase, camelCase, capitalize, isBrowser, error, isPromise, isFunction, isOn, coerceArray } from '@estjs/shared';
-import { effect, shallowReactive, isSignal, isComputed, signal } from '@estjs/signals';
+import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-R6JICOKI.dev.js';
+import { normalizeClassName, SPREAD_NAME, isObject, warn, startsWith, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isString, isArray, kebabCase, camelCase, capitalize, HYDRATION_ANCHOR_ATTR, isBrowser, error, isPromise, isFunction, isOn, coerceArray } from '@estjs/shared';
+import { effect, shallowReactive, isSignal, isComputed, isReactive, signal } from '@estjs/signals';
 
-// src/constants.ts
-var SPREAD_NAME = "_$spread$";
 var REF_KEY = "ref";
 var KEY_PROP = "key";
 var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -13,6 +11,8 @@ 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 TRANSITION_COMPONENT = /* @__PURE__ */ Symbol("Transition Component" );
+var TRANSITION_GROUP_COMPONENT = /* @__PURE__ */ Symbol("TransitionGroup Component" );
 function patchAttr(el, key, prev, next2) {
   if (key === KEY_PROP) {
     if (next2 == null) {
@@ -57,8 +57,8 @@ function patchAttr(el, key, prev, next2) {
     return;
   }
   const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
-  const isXlink = elementIsSVG && key.startsWith("xlink:");
-  const isXmlns = elementIsSVG && key.startsWith("xmlns:");
+  const isXlink = elementIsSVG && startsWith(key, "xlink:");
+  const isXmlns = elementIsSVG && startsWith(key, "xmlns:");
   const isBoolean = isSpecialBooleanAttr(key) || isBooleanAttr(key);
   if (prev === next2) {
     return;
@@ -96,7 +96,7 @@ function patchAttr(el, key, prev, 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:")) {
+    if (startsWith(v, "javascript:") || startsWith(v, "data:")) {
       return;
     }
   }
@@ -200,7 +200,7 @@ function setStyle(style, name, val) {
   if (priority) {
     val = val.replace(importantRE, "");
   }
-  if (name.startsWith("--")) {
+  if (startsWith(name, "--")) {
     if (priority) {
       style.setProperty(name, val, priority);
     } else {
@@ -217,7 +217,7 @@ function setStyle(style, name, val) {
 }
 function toCssPropertyName(name) {
   const hyphenated = kebabCase(name);
-  return name.startsWith("Webkit") || name.startsWith("Moz") || name.startsWith("ms") ? `-${hyphenated}` : hyphenated;
+  return startsWith(name, "Webkit") || startsWith(name, "Moz") || startsWith(name, "ms") ? `-${hyphenated}` : hyphenated;
 }
 function autoPrefix(style, rawName) {
   const cached = prefixCache[rawName];
@@ -319,6 +319,77 @@ function endHydration() {
   _teleportCallsiteAnchors.length = 0;
   _teleportTargetStarts.clear();
 }
+function claimHydratedNodes(parent, expected, before) {
+  var _a2, _b;
+  if (!_isHydrating || before && before.parentNode !== parent) return null;
+  if (expected.length === 0) return [];
+  const claimed = new Array(expected.length);
+  let cursor = before ? before.previousSibling : parent.lastChild;
+  for (let i = expected.length - 1; i >= 0; i--) {
+    if (!cursor) return null;
+    const expectedNode = expected[i];
+    const expectedType = expectedNode.nodeType;
+    if (expectedType === Node.TEXT_NODE) {
+      const expectedText = (_a2 = expectedNode.textContent) != null ? _a2 : "";
+      if (!expectedText || cursor.nodeType !== Node.TEXT_NODE) return null;
+      const existingText = (_b = cursor.textContent) != null ? _b : "";
+      if (existingText === expectedText) {
+        claimed[i] = cursor;
+        cursor = cursor.previousSibling;
+        continue;
+      }
+      if (!existingText.endsWith(expectedText)) return null;
+      const prefix = existingText.slice(0, existingText.length - expectedText.length);
+      if (!prefix) return null;
+      const prefixNode = document.createTextNode(prefix);
+      parent.insertBefore(prefixNode, cursor);
+      cursor.textContent = expectedText;
+      claimed[i] = cursor;
+      cursor = prefixNode;
+      continue;
+    }
+    if (cursor.nodeType !== expectedType) return null;
+    if (expectedType === Node.ELEMENT_NODE) {
+      if (cursor.tagName !== expectedNode.tagName) return null;
+    } else if (expectedType === Node.COMMENT_NODE && cursor.data !== expectedNode.data) {
+      return null;
+    }
+    claimed[i] = cursor;
+    cursor = cursor.previousSibling;
+  }
+  return claimed;
+}
+function resolveHydrationKey(parent) {
+  var _a2, _b, _c;
+  const el = parent;
+  return (_c = (_b = el.dataset.hk) != null ? _b : (_a2 = parent.closest("[data-hk]")) == null ? void 0 : _a2.dataset.hk) != null ? _c : null;
+}
+function hydrationMarker(parent, index) {
+  if (!_isHydrating || !parent || index < 0) return null;
+  const key = parent instanceof Element ? resolveHydrationKey(parent) : null;
+  const expected = key ? `${key}-${index}` : String(index);
+  let cursor = parent.firstChild;
+  while (cursor) {
+    if (cursor.nodeType === Node.COMMENT_NODE && cursor.data === expected) {
+      return cursor;
+    }
+    cursor = cursor.nextSibling;
+  }
+  return null;
+}
+function hydrationAnchor(parent, index) {
+  if (!_isHydrating || !(parent instanceof Element) || index < 0) return null;
+  const key = resolveHydrationKey(parent);
+  const expected = key ? `${key}-${index}` : String(index);
+  let cursor = parent.firstChild;
+  while (cursor) {
+    if (cursor instanceof Element && cursor.getAttribute(HYDRATION_ANCHOR_ATTR) === expected) {
+      return cursor;
+    }
+    cursor = cursor.nextSibling;
+  }
+  return null;
+}
 function getRenderedElement(html) {
   if (!isBrowser()) {
     return () => {
@@ -416,12 +487,17 @@ function reconcileArrays(parent, oldNodes, newNodes, anchor) {
 }
 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 findNewIndex = newLength <= 4 ? (node) => {
+    for (let i = start; i <= newEnd; i++) {
+      if (newNodes[i] === node) return i;
+    }
+    return void 0;
+  } : (() => {
+    const map = /* @__PURE__ */ new Map();
+    for (let i = start; i <= newEnd; i++) map.set(newNodes[i], i);
+    return (node) => map.get(node);
+  })();
   const newIndexToOldIndexMap = new Int32Array(newLength);
-  newIndexToOldIndexMap.fill(0);
   let patched = 0;
   let moved = false;
   let maxNewIndexSoFar = 0;
@@ -431,7 +507,7 @@ function reconcileUnknownSequence(parent, oldNodes, newNodes, start, oldEnd, new
       removeNode(oldNode);
       continue;
     }
-    const newIndex = newIndexMap.get(oldNode);
+    const newIndex = findNewIndex(oldNode);
     if (newIndex === void 0) {
       removeNode(oldNode);
     } else {
@@ -577,6 +653,14 @@ function insert(parent, nodeFactory, before) {
         isFirstRun = false;
         return;
       }
+      if (isFirstRun && isHydrating()) {
+        const hydratedNodes = claimHydratedNodes(parent, nodes, before);
+        if (hydratedNodes) {
+          renderedNodes = hydratedNodes;
+          isFirstRun = false;
+          return;
+        }
+      }
       renderedNodes = reconcileArrays(parent, renderedNodes, nodes, before);
       isFirstRun = false;
     };
@@ -723,14 +807,13 @@ function triggerUpdateHooks(scope) {
 
 // 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 (seen) {
+  if (pruneMissing) {
+    const sourceKeys = Object.getOwnPropertyNames(source);
     for (const key of Object.getOwnPropertyNames(target)) {
-      if (!seen.has(key)) delete target[key];
+      if (!sourceKeys.includes(key)) delete target[key];
     }
   }
 }
@@ -839,6 +922,9 @@ var Component = class {
     this.renderedNodes = [];
     this.firstChild = void 0;
     this.parentNode = void 0;
+    for (const key of Object.getOwnPropertyNames(this.reactiveProps)) {
+      delete this.reactiveProps[key];
+    }
   }
   /**
    * Apply props that bind to the root DOM element rather than flowing into
@@ -849,7 +935,7 @@ var Component = class {
   syncSpecialProps(props) {
     if (!props) return;
     const root = this.firstChild;
-    if (!root) return;
+    if (!root || !(root instanceof Element)) return;
     this.releaseSpecialProps();
     for (const key of Object.getOwnPropertyNames(props)) {
       if (key === REF_KEY) {
@@ -861,7 +947,22 @@ var Component = class {
         const value = readProp(props, key);
         if (!isFunction(value)) continue;
         const eventName = key.slice(2).toLowerCase();
-        this.rootEventCleanups.push(addEvent(root, eventName, value));
+        const target = root;
+        const slot = `_$${eventName}`;
+        const prev = target[slot];
+        if (isFunction(prev)) {
+          target[slot] = value;
+          this.rootEventCleanups.push(() => {
+            if (target[slot] === value) target[slot] = prev;
+          });
+          continue;
+        }
+        const fn = value;
+        const handler = (event) => {
+          if (target.disabled) return;
+          fn.call(target, event);
+        };
+        this.rootEventCleanups.push(addEvent(target, eventName, handler));
       }
     }
   }
@@ -1079,7 +1180,7 @@ function eventHandler(e) {
   reTargetEvent(e, oriTarget);
 }
 var $EVENTS = /* @__PURE__ */ Symbol("_$EVENTS");
-function delegateEvents(eventNames, document2 = window.document) {
+function delegateEvents(eventNames, document2 = globalThis.document) {
   const docWithEvents = document2;
   const eventSet = docWithEvents[$EVENTS] || (docWithEvents[$EVENTS] = /* @__PURE__ */ new Set());
   for (const name of eventNames) {
@@ -1089,7 +1190,7 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
-function clearDelegatedEvents(document2 = window.document) {
+function clearDelegatedEvents(document2 = globalThis.document) {
   const docWithEvents = document2;
   const eventSet = docWithEvents[$EVENTS];
   if (eventSet) {
@@ -1107,6 +1208,11 @@ function addEventListener(element, event, handler, options) {
 }
 
 // src/binding.ts
+var IDENTITY = (v) => v;
+var EMPTY_FILES = (() => {
+  if (typeof DataTransfer !== "undefined") return new DataTransfer().files;
+  return [];
+})();
 function writeValue(el, v) {
   const target = el;
   const next2 = v == null ? "" : String(v);
@@ -1115,10 +1221,11 @@ function writeValue(el, v) {
 var CHECKBOX = {
   event: "change",
   forceChange: true,
+  checkboxArray: true,
   read: (el) => el.checked,
   write(el, v) {
     const e = el;
-    const next2 = Boolean(v);
+    const next2 = isArray(v) ? v.map(String).includes(e.value) : Boolean(v);
     if (e.checked !== next2) e.checked = next2;
   }
 };
@@ -1139,17 +1246,15 @@ var FILE = {
   event: "change",
   forceChange: true,
   read: (el) => el.files,
-  write() {
+  write(el, v) {
+    if (v != null) return;
+    try {
+      el.files = EMPTY_FILES;
+    } catch (e) {
+    }
   }
-  // browsers forbid programmatic writes to file inputs
 };
-var TEXT = {
-  event: "input",
-  ime: true,
-  read: (el) => el.value,
-  write: writeValue
-};
-var TEXTAREA = {
+var TEXT_LIKE = {
   event: "input",
   ime: true,
   read: (el) => el.value,
@@ -1164,41 +1269,44 @@ var SELECT = {
   },
   write(el, v) {
     const s = el;
-    if (s.multiple) {
-      const selected = new Set((Array.isArray(v) ? v : []).map(String));
-      for (const opt of Array.from(s.options)) opt.selected = selected.has(opt.value);
-    } else {
-      writeValue(el, v);
-    }
+    if (!s.multiple) return writeValue(el, v);
+    const selected = new Set((isArray(v) ? v : []).map(String));
+    for (const opt of Array.from(s.options)) opt.selected = selected.has(opt.value);
   }
 };
+function customStrategy(prop) {
+  return {
+    event: "input",
+    read: (el) => el[prop],
+    write(el, v) {
+      el[prop] = v;
+    }
+  };
+}
 function resolve(node, prop) {
   switch (node.nodeName) {
     case "INPUT":
       if (prop === "checked") return node.type === "radio" ? RADIO : CHECKBOX;
       if (prop === "files") return FILE;
-      return TEXT;
+      if (prop === "value") return TEXT_LIKE;
+      return customStrategy(prop);
     case "SELECT":
       return SELECT;
     case "TEXTAREA":
-      return TEXTAREA;
+      return TEXT_LIKE;
     default:
-      return {
-        event: "input",
-        read: (el) => el[prop],
-        write(el, v) {
-          el[prop] = v;
-        }
-      };
+      return customStrategy(prop);
   }
 }
 function applyModifiers(v, trim, toNum) {
   if (!isString(v)) return v;
-  let s = v;
-  if (trim) s = s.trim();
-  if (toNum && s !== "") {
-    const n = Number(s);
-    if (!Number.isNaN(n)) return n;
+  const s = trim ? v.trim() : v;
+  if (toNum) {
+    const probe = trim ? s : s.trim();
+    if (probe !== "") {
+      const n = Number(probe);
+      if (!Number.isNaN(n)) return n;
+    }
   }
   return s;
 }
@@ -1206,44 +1314,54 @@ function isFocused(el) {
   const root = el.getRootNode();
   return (root instanceof Document || root instanceof ShadowRoot) && root.activeElement === el;
 }
+function shouldAutoCoerceNumber(node, prop) {
+  if (prop !== "value" || node.nodeName !== "INPUT") return false;
+  const t = node.type;
+  return t === "number" || t === "range";
+}
 function bindElement(node, prop, getter, setter, modifiers = {}) {
   if (!node) return;
-  const { event, read, write, forceChange, ime } = resolve(node, prop);
+  const { event, read, write, forceChange, ime, checkboxArray } = resolve(node, prop);
   const trim = modifiers.trim === true;
-  const toNum = modifiers.number === true;
+  const toNum = modifiers.number === true || shouldAutoCoerceNumber(node, prop);
   const lazy = modifiers.lazy === true;
   const shouldCast = (trim || toNum) && prop !== "files";
   const getModel = isFunction(getter) ? getter : () => getter;
-  const cast = shouldCast ? (v) => applyModifiers(v, trim, toNum) : (v) => v;
+  const cast = shouldCast ? (v) => applyModifiers(v, trim, toNum) : IDENTITY;
+  const computeNext = checkboxArray ? (raw) => {
+    const current = getModel();
+    if (!isArray(current)) return cast(raw);
+    const own = node.value;
+    const next2 = current.filter((item) => String(item) !== own);
+    if (raw) next2.push(own);
+    return next2;
+  } : cast;
   let composing = false;
   const eventName = lazy || forceChange ? "change" : event;
   const syncToModel = () => {
     if (composing) return;
     const raw = read(node);
     if (raw === void 0) return;
-    const next2 = cast(raw);
+    const next2 = computeNext(raw);
     if (!Object.is(getModel(), next2)) setter(next2);
   };
   addEventListener(node, eventName, syncToModel);
   if (!lazy && shouldCast && eventName !== "change") {
     addEventListener(node, "change", () => write(node, cast(read(node))));
   }
-  if (ime && !lazy) {
+  if (ime) {
     addEventListener(node, "compositionstart", () => {
       composing = true;
     });
     addEventListener(node, "compositionend", () => {
-      if (!composing) return;
       composing = false;
-      syncToModel();
+      if (!lazy) syncToModel();
     });
   }
   const runner = effect(() => {
     const value = getModel();
-    if (ime && !lazy && isFocused(node)) {
-      if (composing) return;
-      if (Object.is(cast(read(node)), value)) return;
-    }
+    if (ime && composing) return;
+    if (ime && !lazy && isFocused(node) && Object.is(cast(read(node)), value)) return;
     write(node, value);
   });
   if (getActiveScope()) {
@@ -1252,6 +1370,18 @@ function bindElement(node, prop, getter, setter, modifiers = {}) {
 }
 
 // src/utils.ts
+function unwrapSlotValue(raw) {
+  let v = raw;
+  if (Array.isArray(v) && v.length === 1) v = v[0];
+  return typeof v === "function" ? v() : v;
+}
+function useChildren(props) {
+  const desc = Object.getOwnPropertyDescriptor(props, "children");
+  if (desc == null ? void 0 : desc.get) {
+    return () => unwrapSlotValue(desc.get.call(props));
+  }
+  return () => unwrapSlotValue(props.children);
+}
 function omitProps(target, keys) {
   const excludeSet = new Set(keys);
   return new Proxy(target, {
@@ -1290,9 +1420,11 @@ function omitProps(target, keys) {
     }
   });
 }
-
-// src/components/Fragment.ts
 function Fragment(props) {
+  var _a2;
+  if (props && (((_a2 = Object.getOwnPropertyDescriptor(props, "children")) == null ? void 0 : _a2.get) || isReactive(props))) {
+    return [() => props.children];
+  }
   const children = props == null ? void 0 : props.children;
   if (children == null) return null;
   return children;
@@ -1811,7 +1943,11 @@ function For(props) {
   let entries = [];
   let fallbackNodes = [];
   const keyFn = props.key;
-  const renderFn = props.children;
+  const raw = props.children;
+  const renderFn = Array.isArray(raw) && raw.length === 1 && isFunction(raw[0]) ? raw[0] : props.children;
+  if (!isFunction(renderFn)) {
+    throw new TypeError("<For> requires `children` to be a function (item, index) => Node");
+  }
   const getList = () => {
     var _a2, _b;
     const input = props.each;
@@ -1820,26 +1956,20 @@ function For(props) {
     return input != null ? input : [];
   };
   const getKey = (item, index) => keyFn ? keyFn(item, index) : item;
-  const normalizeNodes = (value) => {
+  const mountValue = (value, parent, before) => {
+    if (value == null || value === false) return [];
     if (Array.isArray(value)) {
       const nodes = [];
-      for (const item of value) {
-        nodes.push(...normalizeNodes(item));
-      }
+      for (const child2 of value) nodes.push(...mountValue(child2, parent, before));
       return nodes;
     }
-    return [normalizeNode(value)];
-  };
-  const mountValue = (value, parent, before) => {
-    const nodes = normalizeNodes(value);
-    for (const node of nodes) {
-      if (before) {
-        parent.insertBefore(node, before);
-      } else {
-        parent.appendChild(node);
-      }
+    if (isComponent(value)) {
+      insertNode(parent, value, before != null ? before : void 0);
+      return value.renderedNodes;
     }
-    return nodes;
+    const node = normalizeNode(value);
+    insertNode(parent, node, before != null ? before : void 0);
+    return [node];
   };
   const mountFallback = (parent, before) => {
     if (!props.fallback) return;
@@ -1995,7 +2125,655 @@ function For(props) {
   return fragment;
 }
 For[FOR_COMPONENT] = true;
+function resolveTransitionClasses(props) {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const n = (_a2 = props.name) != null ? _a2 : "v";
+  const enterFrom = (_b = props.enterFromClass) != null ? _b : `${n}-enter-from`;
+  const enterActive = (_c = props.enterActiveClass) != null ? _c : `${n}-enter-active`;
+  const enterTo = (_d = props.enterToClass) != null ? _d : `${n}-enter-to`;
+  return {
+    enterFrom,
+    enterActive,
+    enterTo,
+    leaveFrom: (_e = props.leaveFromClass) != null ? _e : `${n}-leave-from`,
+    leaveActive: (_f = props.leaveActiveClass) != null ? _f : `${n}-leave-active`,
+    leaveTo: (_g = props.leaveToClass) != null ? _g : `${n}-leave-to`,
+    appearFrom: (_h = props.appearFromClass) != null ? _h : enterFrom,
+    appearActive: (_i = props.appearActiveClass) != null ? _i : enterActive,
+    appearTo: (_j = props.appearToClass) != null ? _j : enterTo
+  };
+}
+var toMs = (s) => {
+  if (!s) return 0;
+  if (s.endsWith("ms")) return Number(s.slice(0, -2).replace(",", "."));
+  return Number(s.slice(0, -1).replace(",", ".")) * 1e3;
+};
+function sumMs(delays, durations) {
+  const d = delays.split(", ");
+  const u = durations.split(", ");
+  let max = 0;
+  for (const [i, dur] of u.entries()) {
+    const total = toMs(dur) + toMs(d[i % d.length] || "0s");
+    if (total > max) max = total;
+  }
+  return max;
+}
+function getTransitionInfo(el, type) {
+  const s = getComputedStyle(el);
+  const tt = type !== "animation" ? sumMs(s.transitionDelay, s.transitionDuration) : 0;
+  const at = type !== "transition" ? sumMs(s.animationDelay, s.animationDuration) : 0;
+  if (tt === 0 && at === 0) return null;
+  return tt >= at ? { event: "transitionend", timeout: tt } : { event: "animationend", timeout: at };
+}
+function addClass(el, cls) {
+  for (const c of cls.split(/\s+/)) if (c) el.classList.add(c);
+}
+function removeClass(el, cls) {
+  for (const c of cls.split(/\s+/)) if (c) el.classList.remove(c);
+}
+function nextFrame(cb) {
+  requestAnimationFrame(() => requestAnimationFrame(cb));
+}
+function forceReflow(el) {
+  void el.offsetHeight;
+}
+function whenTransitionEnds(el, type, explicit, resolve2) {
+  if (explicit != null) {
+    setTimeout(resolve2, explicit);
+    return;
+  }
+  const info = getTransitionInfo(el, type);
+  if (!info) {
+    resolve2();
+    return;
+  }
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    el.removeEventListener(info.event, onEnd);
+    resolve2();
+  };
+  const onEnd = () => finish();
+  el.addEventListener(info.event, onEnd);
+  setTimeout(finish, info.timeout + 1);
+}
+function resolveDuration(d, dir) {
+  if (d == null) return null;
+  if (typeof d === "number") return d;
+  return d[dir];
+}
+function validateSlot(value) {
+  if (value == null || value === false) return null;
+  if (Array.isArray(value)) {
+    {
+      throw new Error(
+        "[essor] <Transition> expects a single root child. Use <TransitionGroup> for multiple children."
+      );
+    }
+  }
+  if (value instanceof Element) return value;
+  if (isComponent(value)) {
+    const comp = value;
+    if (comp.scope == null) {
+      const fragment = document.createDocumentFragment();
+      comp.mount(fragment);
+    }
+    if (comp.renderedNodes.length > 1) {
+      warn(
+        "[Transition] child component rendered multiple root nodes; only the first is animated. Wrap the children in a single element or use <TransitionGroup>."
+      );
+    }
+    const first = comp.firstChild;
+    if (first instanceof Element) return first;
+    {
+      warn("[Transition] child component did not render an Element root.");
+    }
+    return null;
+  }
+  {
+    warn("[Transition] received a non-element child; animation will be skipped.");
+  }
+  return null;
+}
+var ENTER_CB = /* @__PURE__ */ Symbol("enter_cb");
+var LEAVE_CB = /* @__PURE__ */ Symbol("leave_cb");
+function Transition(props) {
+  const anchor = document.createComment("");
+  const classes = resolveTransitionClasses(props);
+  const useCss = props.css !== false;
+  const readSlot = useChildren(props);
+  let state = "idle";
+  let currentEl = null;
+  let leavingEl = null;
+  let mounted = false;
+  let pendingRaw = void 0;
+  let hasPending = false;
+  let scheduled = false;
+  let disposed = false;
+  const enter = (el, phase) => {
+    var _a2;
+    const prevLeave = el[LEAVE_CB];
+    if (prevLeave) prevLeave(true);
+    state = "entering";
+    const fromCls = phase === "appear" ? classes.appearFrom : classes.enterFrom;
+    const activeCls = phase === "appear" ? classes.appearActive : classes.enterActive;
+    const toCls = phase === "appear" ? classes.appearTo : classes.enterTo;
+    (_a2 = props.onBeforeEnter) == null ? void 0 : _a2.call(props, el);
+    if (useCss) {
+      addClass(el, fromCls);
+      addClass(el, activeCls);
+    }
+    let called = false;
+    const done = (cancelled) => {
+      var _a3, _b;
+      if (called) return;
+      called = true;
+      el[ENTER_CB] = void 0;
+      if (useCss) {
+        removeClass(el, fromCls);
+        removeClass(el, activeCls);
+        removeClass(el, toCls);
+      }
+      if (cancelled) {
+        (_a3 = props.onEnterCancelled) == null ? void 0 : _a3.call(props, el);
+      } else {
+        state = "entered";
+        (_b = props.onAfterEnter) == null ? void 0 : _b.call(props, el);
+      }
+    };
+    el[ENTER_CB] = done;
+    nextFrame(() => {
+      if (called) return;
+      if (useCss) {
+        removeClass(el, fromCls);
+        addClass(el, toCls);
+      }
+      if (props.onEnter) {
+        props.onEnter(el, () => done(false));
+      } else if (useCss) {
+        const explicit = resolveDuration(props.duration, "enter");
+        whenTransitionEnds(el, props.type, explicit, () => done(false));
+      } else {
+        done(false);
+      }
+    });
+  };
+  const leave = (el, after) => {
+    var _a2;
+    const prevEnter = el[ENTER_CB];
+    if (prevEnter) {
+      prevEnter(true);
+      forceReflow(el);
+    }
+    state = "leaving";
+    (_a2 = props.onBeforeLeave) == null ? void 0 : _a2.call(props, el);
+    if (useCss) {
+      addClass(el, classes.leaveFrom);
+      addClass(el, classes.leaveActive);
+    }
+    let called = false;
+    const done = (cancelled) => {
+      var _a3, _b;
+      if (called) return;
+      called = true;
+      el[LEAVE_CB] = void 0;
+      if (useCss) {
+        removeClass(el, classes.leaveFrom);
+        removeClass(el, classes.leaveActive);
+        removeClass(el, classes.leaveTo);
+      }
+      if (cancelled) {
+        (_a3 = props.onLeaveCancelled) == null ? void 0 : _a3.call(props, el);
+      } else {
+        state = "idle";
+        after();
+        (_b = props.onAfterLeave) == null ? void 0 : _b.call(props, el);
+      }
+    };
+    el[LEAVE_CB] = done;
+    const explicit = resolveDuration(props.duration, "leave");
+    const hasCssInfo = useCss && !props.onLeave && explicit == null ? !!getTransitionInfo(el, props.type) : false;
+    if (!props.onLeave && explicit == null && !hasCssInfo) {
+      done(false);
+      return;
+    }
+    nextFrame(() => {
+      if (called) return;
+      if (useCss) {
+        removeClass(el, classes.leaveFrom);
+        addClass(el, classes.leaveTo);
+      }
+      if (props.onLeave) {
+        props.onLeave(el, () => done(false));
+      } else if (useCss) {
+        whenTransitionEnds(el, props.type, explicit, () => done(false));
+      } else {
+        done(false);
+      }
+    });
+  };
+  const commit = (next2, isFirst) => {
+    if (next2 && state === "leaving" && leavingEl) {
+      const reviving = leavingEl;
+      const leaveCb = reviving[LEAVE_CB];
+      if (leaveCb) leaveCb(true);
+      leavingEl = null;
+      currentEl = reviving;
+      enter(reviving, "enter");
+      return;
+    }
+    if (next2 === currentEl) return;
+    const outgoing = currentEl;
+    currentEl = next2;
+    if (outgoing) {
+      leavingEl = outgoing;
+      const captured = outgoing;
+      leave(captured, () => {
+        if (captured.parentNode) captured.parentNode.removeChild(captured);
+        if (leavingEl === captured) leavingEl = null;
+      });
+    }
+    if (next2 && anchor.parentNode) {
+      anchor.parentNode.insertBefore(next2, anchor);
+      if (isFirst && !props.appear) {
+        state = "entered";
+      } else {
+        enter(next2, isFirst && props.appear ? "appear" : "enter");
+      }
+    } else if (!outgoing && !next2) {
+      state = "idle";
+    }
+  };
+  const flush = () => {
+    scheduled = false;
+    if (disposed || !hasPending) return;
+    const raw = pendingRaw;
+    hasPending = false;
+    pendingRaw = void 0;
+    try {
+      commit(validateSlot(raw), false);
+    } catch (error4) {
+      console.error("[essor] <Transition>", error4);
+    }
+  };
+  const scheduleCommit = (raw) => {
+    pendingRaw = raw;
+    hasPending = true;
+    if (scheduled) return;
+    scheduled = true;
+    queueMicrotask(flush);
+  };
+  const effectRunner = effect(() => {
+    const raw = readSlot();
+    if (mounted) {
+      scheduleCommit(raw);
+    } else {
+      pendingRaw = raw;
+      hasPending = true;
+    }
+  });
+  onMount(() => {
+    mounted = true;
+    const initial = hasPending ? validateSlot(pendingRaw) : null;
+    hasPending = false;
+    pendingRaw = void 0;
+    commit(initial, true);
+  });
+  onCleanup(() => {
+    disposed = true;
+    effectRunner.stop();
+    for (const el of [currentEl, leavingEl]) {
+      if (!el) continue;
+      const ec = el[ENTER_CB];
+      const lc = el[LEAVE_CB];
+      ec == null ? void 0 : ec(true);
+      lc == null ? void 0 : lc(true);
+      if (el.parentNode) el.parentNode.removeChild(el);
+    }
+    currentEl = null;
+    leavingEl = null;
+    state = "idle";
+  });
+  return anchor;
+}
+Transition[TRANSITION_COMPONENT] = true;
+function isTransition(node) {
+  return !!node && !!node[TRANSITION_COMPONENT];
+}
+function resolveItemElement(raw, parent) {
+  if (raw == null || raw === false) return { el: null, comp: null };
+  if (Array.isArray(raw) && raw.length === 1) {
+    return resolveItemElement(raw[0], parent);
+  }
+  if (isFunction(raw)) {
+    return resolveItemElement(raw(), parent);
+  }
+  if (raw instanceof HTMLElement) {
+    return { el: raw, comp: null };
+  }
+  if (isComponent(raw)) {
+    const comp = raw;
+    if (comp.scope == null) {
+      comp.mount(parent);
+    }
+    if (comp.renderedNodes.length > 1) {
+      warn(
+        "[TransitionGroup] child component rendered multiple root nodes; only the first participates in enter/leave/move animations."
+      );
+    }
+    const first = comp.firstChild;
+    if (first instanceof HTMLElement) return { el: first, comp };
+    return { el: null, comp };
+  }
+  {
+    warn(
+      "[TransitionGroup] child render returned a non-element value; animations require Element or Component roots."
+    );
+  }
+  return { el: null, comp: null };
+}
+function saveStyles(el) {
+  return {
+    position: el.style.position,
+    top: el.style.top,
+    left: el.style.left,
+    width: el.style.width,
+    height: el.style.height
+  };
+}
+function restoreStyles(el, s) {
+  el.style.position = s.position;
+  el.style.top = s.top;
+  el.style.left = s.left;
+  el.style.width = s.width;
+  el.style.height = s.height;
+}
+function TransitionGroup(props) {
+  var _a2, _b, _c;
+  const tag = (_a2 = props.tag) != null ? _a2 : "div";
+  const wrapper = document.createElement(tag);
+  const classes = resolveTransitionClasses(props);
+  const useCss = props.css !== false;
+  const moveClass = (_c = props.moveClass) != null ? _c : `${(_b = props.name) != null ? _b : "v"}-move`;
+  const keyFn = props.key;
+  const rawChildren = props.children;
+  const childrenFn = Array.isArray(rawChildren) && rawChildren.length === 1 && isFunction(rawChildren[0]) ? rawChildren[0] : props.children;
+  if (!isFunction(childrenFn) || !isFunction(keyFn)) {
+    throw new TypeError(
+      "<TransitionGroup> requires `children: (item, index) => Node` and `key: (item, index) => unknown`"
+    );
+  }
+  const getList = () => {
+    var _a3, _b2;
+    const input = props.each;
+    if (isSignal(input)) return (_a3 = input.value) != null ? _a3 : [];
+    if (isFunction(input)) return (_b2 = input()) != null ? _b2 : [];
+    return input != null ? input : [];
+  };
+  let entries = [];
+  let mounted = false;
+  const renderEntry = (item, index) => {
+    const parentScope = getActiveScope();
+    const scope = createScope(parentScope);
+    let raw;
+    runWithScope(scope, () => {
+      raw = childrenFn(item, index);
+    });
+    const { el, comp } = resolveItemElement(raw, wrapper);
+    if (!el) {
+      disposeScope(scope);
+      return null;
+    }
+    return {
+      key: keyFn(item, index),
+      item,
+      el,
+      comp,
+      scope,
+      state: "entering"
+    };
+  };
+  const detachEntryDom = (entry) => {
+    if (entry.comp) {
+      for (const node of entry.comp.renderedNodes) {
+        if (node.parentNode === wrapper) wrapper.removeChild(node);
+      }
+      return;
+    }
+    if (entry.el.parentNode === wrapper) wrapper.removeChild(entry.el);
+  };
+  const disposeEntry = (entry) => {
+    var _a3, _b2;
+    (_a3 = entry.cancelEnter) == null ? void 0 : _a3.call(entry, true);
+    (_b2 = entry.cancelLeave) == null ? void 0 : _b2.call(entry, true);
+    if (entry.comp) entry.comp.destroy();
+    detachEntryDom(entry);
+    disposeScope(entry.scope);
+  };
+  const runEnter = (entry) => {
+    var _a3, _b2, _c2;
+    const el = entry.el;
+    (_a3 = entry.cancelLeave) == null ? void 0 : _a3.call(entry, true);
+    if (!useCss) {
+      entry.state = "present";
+      (_b2 = props.onAfterEnter) == null ? void 0 : _b2.call(props, el);
+      return;
+    }
+    (_c2 = props.onBeforeEnter) == null ? void 0 : _c2.call(props, el);
+    addClass(el, classes.enterFrom);
+    addClass(el, classes.enterActive);
+    let called = false;
+    const done = (cancelled) => {
+      var _a4, _b3;
+      if (called) return;
+      called = true;
+      entry.cancelEnter = void 0;
+      removeClass(el, classes.enterFrom);
+      removeClass(el, classes.enterActive);
+      removeClass(el, classes.enterTo);
+      if (cancelled) {
+        (_a4 = props.onEnterCancelled) == null ? void 0 : _a4.call(props, el);
+      } else {
+        entry.state = "present";
+        (_b3 = props.onAfterEnter) == null ? void 0 : _b3.call(props, el);
+      }
+    };
+    entry.cancelEnter = done;
+    entry.state = "entering";
+    nextFrame(() => {
+      if (called) return;
+      removeClass(el, classes.enterFrom);
+      addClass(el, classes.enterTo);
+      if (props.onEnter) {
+        props.onEnter(el, () => done(false));
+      } else {
+        const explicit = resolveDuration(props.duration, "enter");
+        whenTransitionEnds(el, props.type, explicit, () => done(false));
+      }
+    });
+  };
+  const runLeave = (entry, prevRect) => {
+    var _a3, _b2;
+    const el = entry.el;
+    if (entry.cancelEnter) {
+      entry.cancelEnter(true);
+      forceReflow(el);
+    }
+    entry.state = "leaving";
+    entry.savedStyles = saveStyles(el);
+    const parentRect = wrapper.getBoundingClientRect();
+    el.style.position = "absolute";
+    el.style.top = `${prevRect.top - parentRect.top}px`;
+    el.style.left = `${prevRect.left - parentRect.left}px`;
+    el.style.width = `${prevRect.width}px`;
+    el.style.height = `${prevRect.height}px`;
+    if (!useCss) {
+      if (entry.savedStyles) restoreStyles(el, entry.savedStyles);
+      detachEntryDom(entry);
+      disposeScope(entry.scope);
+      if (entry.comp) entry.comp.destroy();
+      (_a3 = props.onAfterLeave) == null ? void 0 : _a3.call(props, el);
+      return;
+    }
+    (_b2 = props.onBeforeLeave) == null ? void 0 : _b2.call(props, el);
+    addClass(el, classes.leaveFrom);
+    addClass(el, classes.leaveActive);
+    let called = false;
+    const done = (cancelled) => {
+      var _a4, _b3;
+      if (called) return;
+      called = true;
+      entry.cancelLeave = void 0;
+      removeClass(el, classes.leaveFrom);
+      removeClass(el, classes.leaveActive);
+      removeClass(el, classes.leaveTo);
+      if (cancelled) {
+        if (entry.savedStyles) restoreStyles(el, entry.savedStyles);
+        entry.savedStyles = void 0;
+        (_a4 = props.onLeaveCancelled) == null ? void 0 : _a4.call(props, el);
+        return;
+      }
+      if (entry.savedStyles) restoreStyles(el, entry.savedStyles);
+      entry.savedStyles = void 0;
+      detachEntryDom(entry);
+      disposeScope(entry.scope);
+      if (entry.comp) entry.comp.destroy();
+      (_b3 = props.onAfterLeave) == null ? void 0 : _b3.call(props, el);
+    };
+    entry.cancelLeave = done;
+    nextFrame(() => {
+      if (called) return;
+      removeClass(el, classes.leaveFrom);
+      addClass(el, classes.leaveTo);
+      if (props.onLeave) {
+        props.onLeave(el, () => done(false));
+      } else {
+        const explicit = resolveDuration(props.duration, "leave");
+        whenTransitionEnds(el, props.type, explicit, () => done(false));
+      }
+    });
+  };
+  const runMove = (entry, prevRect) => {
+    if (!useCss || entry.state !== "present") return;
+    const el = entry.el;
+    const newRect = el.getBoundingClientRect();
+    const dx = prevRect.left - newRect.left;
+    const dy = prevRect.top - newRect.top;
+    if (!dx && !dy) return;
+    const savedTransform = el.style.transform;
+    const savedTransition = el.style.transitionDuration;
+    el.style.transform = `translate(${dx}px, ${dy}px)`;
+    el.style.transitionDuration = "0s";
+    addClass(el, moveClass);
+    forceReflow(el);
+    el.style.transform = savedTransform;
+    el.style.transitionDuration = savedTransition;
+    const explicit = resolveDuration(props.duration, "enter");
+    whenTransitionEnds(el, props.type, explicit, () => {
+      removeClass(el, moveClass);
+    });
+  };
+  const snapshotPositions = () => {
+    for (const entry of entries) {
+      if (entry.state === "leaving") continue;
+      entry.prevRect = entry.el.getBoundingClientRect();
+    }
+  };
+  const reconcile = (newItems) => {
+    const byKey = /* @__PURE__ */ new Map();
+    for (const entry of entries) byKey.set(entry.key, entry);
+    const next2 = [];
+    for (const [i, item] of newItems.entries()) {
+      const key = keyFn(item, i);
+      const reused = byKey.get(key);
+      if (reused) {
+        byKey.delete(key);
+        reused.item = item;
+        next2.push(reused);
+      } else {
+        const fresh = renderEntry(item, i);
+        if (fresh) next2.push(fresh);
+      }
+    }
+    const leaving = [];
+    for (const entry of byKey.values()) {
+      if (entry.state !== "leaving") leaving.push(entry);
+    }
+    let anchor = null;
+    for (let i = next2.length - 1; i >= 0; i--) {
+      const el = next2[i].el;
+      if (el.parentNode !== wrapper || el.nextSibling !== anchor) {
+        wrapper.insertBefore(el, anchor);
+      }
+      anchor = el;
+    }
+    return { next: next2, leaving };
+  };
+  const update = (newItems, isInitial) => {
+    if (isInitial) {
+      const initial = [];
+      for (const [i, item] of newItems.entries()) {
+        const entry = renderEntry(item, i);
+        if (!entry) continue;
+        if (entry.el.parentNode !== wrapper) wrapper.appendChild(entry.el);
+        entry.state = "present";
+        initial.push(entry);
+      }
+      entries = initial;
+      return;
+    }
+    snapshotPositions();
+    const { next: next2, leaving } = reconcile(newItems);
+    for (const entry of next2) {
+      if (entry.state !== "present") runEnter(entry);
+    }
+    for (const entry of leaving) {
+      const rect = entry.prevRect;
+      if (!rect) {
+        {
+          warn("[TransitionGroup] leaving entry without prevRect \u2014 skipping leave animation");
+        }
+        continue;
+      }
+      runLeave(entry, rect);
+    }
+    for (const entry of next2) {
+      if (entry.state !== "present" || !entry.prevRect) continue;
+      runMove(entry, entry.prevRect);
+      entry.prevRect = void 0;
+    }
+    entries = next2.concat(leaving);
+  };
+  let pendingItems = null;
+  const effectRunner = effect(() => {
+    const list = getList();
+    if (!mounted) {
+      pendingItems = list;
+      return;
+    }
+    update(list, false);
+  });
+  onMount(() => {
+    mounted = true;
+    if (pendingItems) {
+      update(pendingItems, true);
+      pendingItems = null;
+    }
+  });
+  onCleanup(() => {
+    effectRunner.stop();
+    for (const entry of entries) disposeEntry(entry);
+    entries = [];
+    if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+  });
+  return wrapper;
+}
+TransitionGroup[TRANSITION_GROUP_COMPONENT] = true;
+function isTransitionGroup(node) {
+  return !!node && !!node[TRANSITION_GROUP_COMPONENT];
+}
 
-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
+export { Component, For, Fragment, Portal, Suspense, Transition, TransitionGroup, addEvent, addEventListener, beginHydration, bindElement, child, clearDelegatedEvents, consumeTeleportAnchor, consumeTeleportBlock, createApp, createComponent, createResource, defineAsyncComponent, delegateEvents, endHydration, getHydrationKey, getRenderedElement, hydrate, hydrationAnchor, hydrationMarker, inject, insert, isComponent, isFragment, isHydrating, isPortal, isSuspense, isTransition, isTransitionGroup, next, normalizeClass, nthChild, omitProps, onDestroy, onMount, onUpdate, patchAttr, patchAttrHydrate, patchClass, patchClassHydrate, patchStyle, patchStyleHydrate, provide, resetHydrationKey, setStyle, template };
+//# sourceMappingURL=template.dev.js.map
+//# sourceMappingURL=template.dev.js.map