@fictjs/runtime 0.0.7 → 0.0.9

package/dist/index.dev.js

@@ -889,6 +889,7 @@ function createSelector(source, equalityFn = (a, b) => a === b) {
 // src/store.ts
 var PROXY = Symbol("fict:store-proxy");
 var TARGET = Symbol("fict:store-target");
+var ITERATE_KEY = Symbol("fict:iterate");
 function createStore(initialValue) {
   const unwrapped = unwrap(initialValue);
   const wrapped = wrap(unwrapped);
@@ -916,20 +917,41 @@ function wrap(value) {
       track(target, prop);
       return wrap(value2);
     },
+    has(target, prop) {
+      const result = Reflect.has(target, prop);
+      track(target, prop);
+      return result;
+    },
+    ownKeys(target) {
+      track(target, ITERATE_KEY);
+      return Reflect.ownKeys(target);
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      track(target, prop);
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    },
     set(target, prop, value2, receiver) {
       if (prop === PROXY || prop === TARGET) return false;
+      const hadKey = Object.prototype.hasOwnProperty.call(target, prop);
       const oldValue = Reflect.get(target, prop, receiver);
       if (oldValue === value2) return true;
       const result = Reflect.set(target, prop, value2, receiver);
       if (result) {
         trigger(target, prop);
+        if (!hadKey) {
+          trigger(target, ITERATE_KEY);
+        }
       }
       return result;
     },
     deleteProperty(target, prop) {
+      const hadKey = Object.prototype.hasOwnProperty.call(target, prop);
       const result = Reflect.deleteProperty(target, prop);
       if (result) {
         trigger(target, prop);
+        if (hadKey) {
+          trigger(target, ITERATE_KEY);
+        }
       }
       return result;
     }
@@ -952,7 +974,8 @@ function track(target, prop) {
   }
   let s = signals.get(prop);
   if (!s) {
-    s = signal(getLastValue(target, prop));
+    const initial = prop === ITERATE_KEY ? Reflect.ownKeys(target).length : getLastValue(target, prop);
+    s = signal(initial);
     signals.set(prop, s);
   }
   s();
@@ -962,7 +985,11 @@ function trigger(target, prop) {
   if (signals) {
     const s = signals.get(prop);
     if (s) {
-      s(getLastValue(target, prop));
+      if (prop === ITERATE_KEY) {
+        s(Reflect.ownKeys(target).length);
+      } else {
+        s(getLastValue(target, prop));
+      }
     }
   }
 }
@@ -1570,2631 +1597,2563 @@ function removeNodes(nodes) {
   }
 }
 
-// src/binding.ts
-function isReactive(value) {
-  return typeof value === "function" && value.length === 0;
+// src/hooks.ts
+var ctxStack = [];
+function __fictUseContext() {
+  if (ctxStack.length === 0) {
+    const ctx2 = { slots: [], cursor: 0 };
+    ctxStack.push(ctx2);
+    return ctx2;
+  }
+  const ctx = ctxStack[ctxStack.length - 1];
+  ctx.cursor = 0;
+  return ctx;
 }
-function unwrap2(value) {
-  return isReactive(value) ? value() : value;
+function __fictPushContext() {
+  const ctx = { slots: [], cursor: 0 };
+  ctxStack.push(ctx);
+  return ctx;
 }
-function callEventHandler(handler, event, node, data) {
-  if (!handler) return;
-  const context = node ?? event.currentTarget ?? void 0;
-  const invoke = (fn) => {
-    if (typeof fn === "function") {
-      const result = data === void 0 ? fn.call(context, event) : fn.call(context, data, event);
-      if (typeof result === "function" && result !== fn) {
-        if (data === void 0) {
-          ;
-          result.call(context, event);
-        } else {
-          ;
-          result.call(context, data, event);
-        }
-      } else if (result && typeof result.handleEvent === "function") {
-        ;
-        result.handleEvent.call(result, event);
+function __fictPopContext() {
+  ctxStack.pop();
+}
+function __fictResetContext() {
+  ctxStack.length = 0;
+}
+function __fictUseSignal(ctx, initial, slot) {
+  const index = slot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = signal(initial);
+  }
+  return ctx.slots[index];
+}
+function __fictUseMemo(ctx, fn, slot) {
+  const index = slot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = createMemo(fn);
+  }
+  return ctx.slots[index];
+}
+function __fictUseEffect(ctx, fn, slot) {
+  const index = slot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = createEffect(fn);
+  }
+}
+function __fictRender(ctx, fn) {
+  ctxStack.push(ctx);
+  ctx.cursor = 0;
+  try {
+    return fn();
+  } finally {
+    ctxStack.pop();
+  }
+}
+
+// src/props.ts
+var propGetters = /* @__PURE__ */ new WeakSet();
+var rawToProxy = /* @__PURE__ */ new WeakMap();
+var proxyToRaw = /* @__PURE__ */ new WeakMap();
+function __fictProp(getter) {
+  if (typeof getter === "function" && getter.length === 0) {
+    propGetters.add(getter);
+  }
+  return getter;
+}
+function isPropGetter(value) {
+  return typeof value === "function" && propGetters.has(value);
+}
+function createPropsProxy(props) {
+  if (!props || typeof props !== "object") {
+    return props;
+  }
+  if (proxyToRaw.has(props)) {
+    return props;
+  }
+  const cached = rawToProxy.get(props);
+  if (cached) {
+    return cached;
+  }
+  const proxy = new Proxy(props, {
+    get(target, prop, receiver) {
+      const value = Reflect.get(target, prop, receiver);
+      if (isPropGetter(value)) {
+        return value();
       }
-    } else if (fn && typeof fn.handleEvent === "function") {
-      fn.handleEvent.call(fn, event);
+      return value;
+    },
+    set(target, prop, value, receiver) {
+      return Reflect.set(target, prop, value, receiver);
+    },
+    has(target, prop) {
+      return prop in target;
+    },
+    ownKeys(target) {
+      return Reflect.ownKeys(target);
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      return Object.getOwnPropertyDescriptor(target, prop);
     }
-  };
-  invoke(handler);
+  });
+  rawToProxy.set(props, proxy);
+  proxyToRaw.set(proxy, props);
+  return proxy;
 }
-var PRIMITIVE_PROXY = Symbol("fict:primitive-proxy");
-var PRIMITIVE_PROXY_RAW_VALUE = Symbol("fict:primitive-proxy:raw-value");
-function unwrapPrimitive(value) {
-  if (value && typeof value === "object" && PRIMITIVE_PROXY in value) {
-    const getRawValue = value[PRIMITIVE_PROXY_RAW_VALUE];
-    if (typeof getRawValue === "function") {
-      return getRawValue();
-    }
+function unwrapProps(props) {
+  if (!props || typeof props !== "object") {
+    return props;
   }
-  return value;
+  return proxyToRaw.get(props) ?? props;
 }
-function createValueProxy(read) {
-  const getPrimitivePrototype = (value) => {
-    switch (typeof value) {
-      case "string":
-        return String.prototype;
-      case "number":
-        return Number.prototype;
-      case "boolean":
-        return Boolean.prototype;
-      case "bigint":
-        return BigInt.prototype;
-      case "symbol":
-        return Symbol.prototype;
-      default:
-        return void 0;
-    }
+function __fictPropsRest(props, exclude) {
+  const raw = unwrapProps(props);
+  const out = {};
+  const excludeSet = new Set(exclude);
+  for (const key of Reflect.ownKeys(raw)) {
+    if (excludeSet.has(key)) continue;
+    out[key] = raw[key];
+  }
+  return createPropsProxy(out);
+}
+function mergeProps(...sources) {
+  const validSources = sources.filter(
+    (s) => s != null && (typeof s === "object" || typeof s === "function")
+  );
+  if (validSources.length === 0) {
+    return {};
+  }
+  if (validSources.length === 1 && typeof validSources[0] === "object") {
+    return validSources[0];
+  }
+  const resolveSource = (src) => {
+    const value = typeof src === "function" ? src() : src;
+    if (!value || typeof value !== "object") return void 0;
+    return unwrapProps(value);
   };
-  const target = {};
-  const handler = {
-    get(_target, prop, receiver) {
-      if (prop === PRIMITIVE_PROXY) {
-        return true;
-      }
-      if (prop === PRIMITIVE_PROXY_RAW_VALUE) {
-        return () => read();
-      }
-      if (prop === Symbol.toPrimitive) {
-        return (hint) => {
-          const value2 = read();
-          if (value2 != null && (typeof value2 === "object" || typeof value2 === "function")) {
-            const toPrimitive = value2[Symbol.toPrimitive];
-            if (typeof toPrimitive === "function") {
-              return toPrimitive.call(value2, hint);
-            }
-            if (hint === "string") return value2.toString?.() ?? "[object Object]";
-            if (hint === "number") return value2.valueOf?.() ?? value2;
-            return value2.valueOf?.() ?? value2;
-          }
-          return value2;
-        };
-      }
-      if (prop === "valueOf") {
-        return () => {
-          const value2 = read();
-          if (value2 != null && (typeof value2 === "object" || typeof value2 === "function")) {
-            return typeof value2.valueOf === "function" ? value2.valueOf() : value2;
-          }
-          return value2;
-        };
-      }
-      if (prop === "toString") {
-        return () => String(read());
-      }
-      const value = read();
-      if (value != null && (typeof value === "object" || typeof value === "function")) {
-        return Reflect.get(value, prop, receiver === _target ? value : receiver);
+  return new Proxy({}, {
+    get(_, prop) {
+      if (typeof prop === "symbol") {
+        return void 0;
       }
-      const proto = getPrimitivePrototype(value);
-      if (proto && prop in proto) {
-        const descriptor = Reflect.get(proto, prop, value);
-        return typeof descriptor === "function" ? descriptor.bind(value) : descriptor;
+      for (let i = validSources.length - 1; i >= 0; i--) {
+        const src = validSources[i];
+        const raw = resolveSource(src);
+        if (!raw || !(prop in raw)) continue;
+        const value = raw[prop];
+        if (typeof src === "function" && !isPropGetter(value)) {
+          return __fictProp(() => {
+            const latest = resolveSource(src);
+            if (!latest || !(prop in latest)) return void 0;
+            return latest[prop];
+          });
+        }
+        return value;
       }
       return void 0;
     },
-    set(_target, prop, newValue, receiver) {
-      const value = read();
-      if (value != null && (typeof value === "object" || typeof value === "function")) {
-        return Reflect.set(value, prop, newValue, receiver === _target ? value : receiver);
+    has(_, prop) {
+      for (const src of validSources) {
+        const raw = resolveSource(src);
+        if (raw && prop in raw) {
+          return true;
+        }
       }
       return false;
     },
-    has(_target, prop) {
-      if (prop === PRIMITIVE_PROXY || prop === PRIMITIVE_PROXY_RAW_VALUE) {
-        return true;
-      }
-      const value = read();
-      if (value != null && (typeof value === "object" || typeof value === "function")) {
-        return prop in value;
-      }
-      const proto = getPrimitivePrototype(value);
-      return proto ? prop in proto : false;
-    },
     ownKeys() {
-      const value = read();
-      if (value != null && (typeof value === "object" || typeof value === "function")) {
-        return Reflect.ownKeys(value);
+      const keys = /* @__PURE__ */ new Set();
+      for (const src of validSources) {
+        const raw = resolveSource(src);
+        if (raw) {
+          for (const key of Reflect.ownKeys(raw)) {
+            keys.add(key);
+          }
+        }
       }
-      const proto = getPrimitivePrototype(value);
-      return proto ? Reflect.ownKeys(proto) : [];
+      return Array.from(keys);
     },
-    getOwnPropertyDescriptor(_target, prop) {
-      const value = read();
-      if (value != null && (typeof value === "object" || typeof value === "function")) {
-        return Object.getOwnPropertyDescriptor(value, prop);
+    getOwnPropertyDescriptor(_, prop) {
+      for (let i = validSources.length - 1; i >= 0; i--) {
+        const raw = resolveSource(validSources[i]);
+        if (raw && prop in raw) {
+          return {
+            enumerable: true,
+            configurable: true,
+            get: () => {
+              const value = raw[prop];
+              return value;
+            }
+          };
+        }
       }
-      const proto = getPrimitivePrototype(value);
-      return proto ? Object.getOwnPropertyDescriptor(proto, prop) || void 0 : void 0;
+      return void 0;
     }
-  };
-  return new Proxy(target, handler);
+  });
 }
-function createTextBinding(value) {
-  const text = document.createTextNode("");
-  if (isReactive(value)) {
-    createRenderEffect(() => {
-      const v = value();
-      const fmt = formatTextValue(v);
-      if (text.data !== fmt) {
-        text.data = fmt;
-      }
-    });
-  } else {
-    text.data = formatTextValue(value);
-  }
-  return text;
+function useProp(getter) {
+  return __fictProp(createMemo(getter));
 }
-function bindText(textNode, getValue) {
-  return createRenderEffect(() => {
-    const value = formatTextValue(getValue());
-    if (textNode.data !== value) {
-      textNode.data = value;
-    }
-  });
-}
-function formatTextValue(value) {
-  if (value == null || value === false) {
-    return "";
+
+// src/transition.ts
+function startTransition(fn) {
+  const prev = setTransitionContext(true);
+  try {
+    fn();
+  } finally {
+    setTransitionContext(prev);
+    scheduleFlush();
   }
-  return String(value);
 }
-function createAttributeBinding(el, key, value, setter) {
-  if (isReactive(value)) {
-    createRenderEffect(() => {
-      setter(el, key, value());
+function useTransition() {
+  const pending = signal(false);
+  const start = (fn) => {
+    pending(true);
+    startTransition(() => {
+      try {
+        fn();
+      } finally {
+        pending(false);
+      }
     });
-  } else {
-    setter(el, key, value);
-  }
-}
-function bindAttribute(el, key, getValue) {
-  let prevValue = void 0;
-  return createRenderEffect(() => {
-    const value = getValue();
-    if (value === prevValue) return;
-    prevValue = value;
-    if (value === void 0 || value === null || value === false) {
-      el.removeAttribute(key);
-    } else if (value === true) {
-      el.setAttribute(key, "");
-    } else {
-      el.setAttribute(key, String(value));
-    }
-  });
+  };
+  return [() => pending(), start];
 }
-function bindProperty(el, key, getValue) {
-  const PROPERTY_BINDING_KEYS = /* @__PURE__ */ new Set([
-    "value",
-    "checked",
-    "selected",
-    "disabled",
-    "readOnly",
-    "multiple",
-    "muted"
-  ]);
-  let prevValue = void 0;
-  return createRenderEffect(() => {
-    const next = getValue();
-    if (next === prevValue) return;
-    prevValue = next;
-    if (PROPERTY_BINDING_KEYS.has(key) && (next === void 0 || next === null)) {
-      const fallback = key === "checked" || key === "selected" ? false : "";
-      el[key] = fallback;
-      return;
+function useDeferredValue(getValue) {
+  const deferredValue = signal(getValue());
+  createEffect(() => {
+    const newValue = getValue();
+    const currentDeferred = untrack(() => deferredValue());
+    if (currentDeferred !== newValue) {
+      startTransition(() => {
+        deferredValue(newValue);
+      });
     }
-    ;
-    el[key] = next;
   });
+  return () => deferredValue();
 }
-function createStyleBinding(el, value) {
-  if (isReactive(value)) {
-    let prev;
-    createRenderEffect(() => {
-      const next = value();
-      applyStyle(el, next, prev);
-      prev = next;
-    });
-  } else {
-    applyStyle(el, value, void 0);
-  }
+
+// src/scheduler.ts
+function batch2(fn) {
+  return batch(fn);
 }
-function bindStyle(el, getValue) {
-  let prev;
-  return createRenderEffect(() => {
-    const next = getValue();
-    applyStyle(el, next, prev);
-    prev = next;
-  });
+function untrack2(fn) {
+  return untrack(fn);
 }
-function applyStyle(el, value, prev) {
-  if (typeof value === "string") {
-    el.style.cssText = value;
-  } else if (value && typeof value === "object") {
-    const styles = value;
-    if (typeof prev === "string") {
-      el.style.cssText = "";
-    }
-    if (prev && typeof prev === "object") {
-      const prevStyles = prev;
-      for (const key of Object.keys(prevStyles)) {
-        if (!(key in styles)) {
-          const cssProperty = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-          el.style.removeProperty(cssProperty);
-        }
-      }
-    }
-    for (const [prop, v] of Object.entries(styles)) {
-      if (v != null) {
-        const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-        const unitless = isUnitlessStyleProperty(prop) || isUnitlessStyleProperty(cssProperty);
-        const valueStr = typeof v === "number" && !unitless ? `${v}px` : String(v);
-        el.style.setProperty(cssProperty, valueStr);
-      } else {
-        const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-        el.style.removeProperty(cssProperty);
-      }
-    }
-  } else {
-    if (prev && typeof prev === "object") {
-      const prevStyles = prev;
-      for (const key of Object.keys(prevStyles)) {
-        const cssProperty = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-        el.style.removeProperty(cssProperty);
-      }
-    } else if (typeof prev === "string") {
-      el.style.cssText = "";
-    }
+
+// src/dom.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+function render(view, container) {
+  const root = createRootContext();
+  const prev = pushRoot(root);
+  let dom;
+  try {
+    const output = view();
+    dom = createElement(output);
+  } finally {
+    popRoot(prev);
   }
+  container.replaceChildren(dom);
+  container.setAttribute("data-fict-fine-grained", "1");
+  flushOnMount(root);
+  const teardown = () => {
+    destroyRoot(root);
+    container.innerHTML = "";
+  };
+  return teardown;
 }
-function isUnitlessStyleProperty(prop) {
-  return UnitlessStyles.has(prop);
-}
-function createClassBinding(el, value) {
-  if (isReactive(value)) {
-    let prev = {};
-    createRenderEffect(() => {
-      const next = value();
-      prev = applyClass(el, next, prev);
-    });
-  } else {
-    applyClass(el, value, {});
-  }
+function createElement(node) {
+  return createElementWithContext(node, null);
 }
-function bindClass(el, getValue) {
-  let prev = {};
-  return createRenderEffect(() => {
-    const next = getValue();
-    prev = applyClass(el, next, prev);
-  });
+function resolveNamespace(tagName, namespace) {
+  if (tagName === "svg") return "svg";
+  if (tagName === "math") return "mathml";
+  if (namespace === "mathml") return "mathml";
+  if (namespace === "svg") return "svg";
+  if (SVGElements.has(tagName)) return "svg";
+  return null;
 }
-function toggleClassKey(node, key, value) {
-  const classNames = key.trim().split(/\s+/);
-  for (let i = 0, len = classNames.length; i < len; i++) {
-    node.classList.toggle(classNames[i], value);
+function createElementWithContext(node, namespace) {
+  if (node instanceof Node) {
+    return node;
   }
-}
-function applyClass(el, value, prev) {
-  const prevState = prev && typeof prev === "object" ? prev : {};
-  if (typeof value === "string") {
-    el.className = value;
-    return {};
+  if (node === null || node === void 0 || node === false) {
+    return document.createTextNode("");
   }
-  if (value && typeof value === "object") {
-    const classes = value;
-    const classKeys = Object.keys(classes);
-    const prevKeys = Object.keys(prevState);
-    for (let i = 0, len = prevKeys.length; i < len; i++) {
-      const key = prevKeys[i];
-      if (!key || key === "undefined" || classes[key]) continue;
-      toggleClassKey(el, key, false);
-      delete prevState[key];
+  if (typeof node === "object" && node !== null && !(node instanceof Node)) {
+    if ("marker" in node) {
+      const handle = node;
+      if (typeof handle.dispose === "function") {
+        registerRootCleanup(handle.dispose);
+      }
+      return createElement(handle.marker);
     }
-    for (let i = 0, len = classKeys.length; i < len; i++) {
-      const key = classKeys[i];
-      const classValue = !!classes[key];
-      if (!key || key === "undefined" || prevState[key] === classValue || !classValue) continue;
-      toggleClassKey(el, key, true);
-      prevState[key] = classValue;
+    const nodeRecord = node;
+    if (nodeRecord[PRIMITIVE_PROXY]) {
+      const primitiveGetter = nodeRecord[Symbol.toPrimitive];
+      const value = typeof primitiveGetter === "function" ? primitiveGetter.call(node, "default") : node;
+      return document.createTextNode(value == null || value === false ? "" : String(value));
     }
-    return prevState;
   }
-  if (!value) {
-    for (const key of Object.keys(prevState)) {
-      if (key && key !== "undefined") {
-        toggleClassKey(el, key, false);
-      }
+  if (Array.isArray(node)) {
+    const frag = document.createDocumentFragment();
+    for (const child of node) {
+      appendChildNode(frag, child, namespace);
     }
-    return {};
+    return frag;
   }
-  return prevState;
-}
-function classList(node, value, prev = {}) {
-  return applyClass(node, value, prev);
-}
-function insert(parent, getValue, markerOrCreateElement, createElementFn) {
-  let marker;
-  let ownsMarker = false;
-  let createFn = createElementFn;
-  if (markerOrCreateElement instanceof Node) {
-    marker = markerOrCreateElement;
-    createFn = createElementFn;
-  } else {
-    marker = document.createComment("fict:insert");
-    parent.appendChild(marker);
-    createFn = markerOrCreateElement;
-    ownsMarker = true;
+  if (typeof node === "string" || typeof node === "number") {
+    return document.createTextNode(String(node));
   }
-  let currentNodes = [];
-  let currentText = null;
-  let currentRoot2 = null;
-  const clearCurrentNodes = () => {
-    if (currentNodes.length > 0) {
-      removeNodes(currentNodes);
-      currentNodes = [];
-    }
-  };
-  const setTextNode = (textValue, shouldInsert, parentNode) => {
-    if (!currentText) {
-      currentText = document.createTextNode(textValue);
-    } else if (currentText.data !== textValue) {
-      currentText.data = textValue;
-    }
-    if (!shouldInsert) {
-      clearCurrentNodes();
-      return;
-    }
-    if (currentNodes.length === 1 && currentNodes[0] === currentText) {
-      return;
-    }
-    clearCurrentNodes();
-    insertNodesBefore(parentNode, [currentText], marker);
-    currentNodes = [currentText];
-  };
-  const dispose = createRenderEffect(() => {
-    const value = getValue();
-    const parentNode = marker.parentNode;
-    const isPrimitive = value == null || value === false || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
-    if (isPrimitive) {
-      if (currentRoot2) {
-        destroyRoot(currentRoot2);
-        currentRoot2 = null;
-      }
-      if (!parentNode) {
-        clearCurrentNodes();
-        return;
-      }
-      const textValue = value == null || value === false ? "" : String(value);
-      const shouldInsert = value != null && value !== false;
-      setTextNode(textValue, shouldInsert, parentNode);
-      return;
-    }
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-      currentRoot2 = null;
-    }
-    clearCurrentNodes();
-    const root = createRootContext();
-    const prev = pushRoot(root);
-    let nodes = [];
-    try {
-      let newNode;
-      if (value instanceof Node) {
-        newNode = value;
-      } else if (Array.isArray(value)) {
-        if (value.every((v) => v instanceof Node)) {
-          newNode = value;
-        } else {
-          newNode = createFn ? createFn(value) : document.createTextNode(String(value));
+  if (typeof node === "boolean") {
+    return document.createTextNode("");
+  }
+  const vnode = node;
+  if (typeof vnode.type === "function") {
+    const rawProps = unwrapProps(vnode.props ?? {});
+    const baseProps = vnode.key === void 0 ? rawProps : new Proxy(rawProps, {
+      get(target, prop, receiver) {
+        if (prop === "key") return vnode.key;
+        return Reflect.get(target, prop, receiver);
+      },
+      has(target, prop) {
+        if (prop === "key") return true;
+        return prop in target;
+      },
+      ownKeys(target) {
+        const keys = new Set(Reflect.ownKeys(target));
+        keys.add("key");
+        return Array.from(keys);
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        if (prop === "key") {
+          return { enumerable: true, configurable: true, value: vnode.key };
         }
-      } else {
-        newNode = createFn ? createFn(value) : document.createTextNode(String(value));
+        return Object.getOwnPropertyDescriptor(target, prop);
       }
-      nodes = toNodeArray(newNode);
-      if (parentNode) {
-        insertNodesBefore(parentNode, nodes, marker);
+    });
+    const props = createPropsProxy(baseProps);
+    try {
+      __fictPushContext();
+      const rendered = vnode.type(props);
+      __fictPopContext();
+      return createElementWithContext(rendered, namespace);
+    } catch (err) {
+      __fictPopContext();
+      if (handleSuspend(err)) {
+        return document.createComment("fict:suspend");
       }
-    } finally {
-      popRoot(prev);
-      flushOnMount(root);
+      handleError(err, { source: "render", componentName: vnode.type.name });
+      throw err;
     }
-    currentRoot2 = root;
-    currentNodes = nodes;
-  });
-  return () => {
-    dispose();
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-      currentRoot2 = null;
+  }
+  if (vnode.type === Fragment) {
+    const frag = document.createDocumentFragment();
+    const children = vnode.props?.children;
+    appendChildren(frag, children, namespace);
+    return frag;
+  }
+  const tagName = typeof vnode.type === "string" ? vnode.type : "div";
+  const resolvedNamespace = resolveNamespace(tagName, namespace);
+  const el = resolvedNamespace === "svg" ? document.createElementNS(SVG_NS, tagName) : resolvedNamespace === "mathml" ? document.createElementNS(MATHML_NS, tagName) : document.createElement(tagName);
+  applyProps(el, vnode.props ?? {}, resolvedNamespace === "svg");
+  appendChildren(
+    el,
+    vnode.props?.children,
+    tagName === "foreignObject" ? null : resolvedNamespace
+  );
+  return el;
+}
+function template(html, isImportNode, isSVG, isMathML) {
+  let node = null;
+  const create = () => {
+    const t = isMathML ? document.createElementNS(MATHML_NS, "template") : document.createElement("template");
+    t.innerHTML = html;
+    if (isSVG) {
+      return t.content.firstChild.firstChild;
     }
-    clearCurrentNodes();
-    if (ownsMarker) {
-      marker.parentNode?.removeChild(marker);
+    if (isMathML) {
+      return t.firstChild;
     }
+    return t.content.firstChild;
   };
+  const fn = isImportNode ? () => untrack2(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  fn.cloneNode = fn;
+  return fn;
 }
-function createChildBinding(parent, getValue, createElementFn) {
-  const marker = document.createComment("fict:child");
-  parent.appendChild(marker);
-  const dispose = createRenderEffect(() => {
-    const root = createRootContext();
-    const prev = pushRoot(root);
-    let nodes = [];
-    let handledError = false;
-    try {
-      const value = getValue();
-      if (value == null || value === false) {
-        return;
-      }
-      const output = createElementFn(value);
-      nodes = toNodeArray(output);
-      const parentNode = marker.parentNode;
-      if (parentNode) {
-        insertNodesBefore(parentNode, nodes, marker);
-      }
-      return () => {
-        destroyRoot(root);
-        removeNodes(nodes);
-      };
-    } catch (err) {
-      if (handleSuspend(err, root)) {
-        handledError = true;
-        destroyRoot(root);
-        return;
-      }
-      if (handleError(err, { source: "renderChild" }, root)) {
-        handledError = true;
-        destroyRoot(root);
-        return;
-      }
-      throw err;
-    } finally {
-      popRoot(prev);
-      if (!handledError) {
-        flushOnMount(root);
-      }
+function isBindingHandle(node) {
+  return node !== null && typeof node === "object" && "marker" in node && "dispose" in node && typeof node.dispose === "function";
+}
+function appendChildNode(parent, child, namespace) {
+  if (child === null || child === void 0 || child === false) {
+    return;
+  }
+  if (isBindingHandle(child)) {
+    appendChildNode(parent, child.marker, namespace);
+    child.flush?.();
+    return;
+  }
+  if (typeof child === "function" && child.length === 0) {
+    const childGetter = child;
+    createChildBinding(parent, childGetter, (node) => createElementWithContext(node, namespace));
+    return;
+  }
+  if (Array.isArray(child)) {
+    for (const item of child) {
+      appendChildNode(parent, item, namespace);
     }
-  });
-  return {
-    marker,
-    dispose: () => {
-      dispose();
-      marker.parentNode?.removeChild(marker);
+    return;
+  }
+  let domNode;
+  if (typeof child !== "object" || child === null) {
+    domNode = document.createTextNode(String(child ?? ""));
+  } else {
+    domNode = createElementWithContext(child, namespace);
+  }
+  if (domNode.nodeType === 11) {
+    const children = Array.from(domNode.childNodes);
+    for (const node of children) {
+      appendChildNode(parent, node, namespace);
     }
-  };
+    return;
+  }
+  if (domNode.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
+    parent.ownerDocument.adoptNode(domNode);
+  }
+  try {
+    parent.appendChild(domNode);
+  } catch (e) {
+    if (parent.ownerDocument) {
+      const clone = parent.ownerDocument.importNode(domNode, true);
+      parent.appendChild(clone);
+      return;
+    }
+    throw e;
+  }
 }
-function delegateEvents(eventNames, doc = window.document) {
-  const e = doc[$$EVENTS] || (doc[$$EVENTS] = /* @__PURE__ */ new Set());
-  for (let i = 0, l = eventNames.length; i < l; i++) {
-    const name = eventNames[i];
-    if (!e.has(name)) {
-      e.add(name);
-      doc.addEventListener(name, globalEventHandler);
+function appendChildren(parent, children, namespace) {
+  if (children === void 0) return;
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      appendChildren(parent, child, namespace);
     }
+    return;
   }
+  appendChildNode(parent, children, namespace);
 }
-function clearDelegatedEvents(doc = window.document) {
-  const e = doc[$$EVENTS];
-  if (e) {
-    for (const name of e.keys()) {
-      doc.removeEventListener(name, globalEventHandler);
+function applyRef(el, value) {
+  if (typeof value === "function") {
+    const refFn = value;
+    refFn(el);
+    if (getCurrentRoot()) {
+      registerRootCleanup(() => {
+        refFn(null);
+      });
+    }
+  } else if (value && typeof value === "object" && "current" in value) {
+    const refObj = value;
+    refObj.current = el;
+    if (getCurrentRoot()) {
+      registerRootCleanup(() => {
+        refObj.current = null;
+      });
     }
-    delete doc[$$EVENTS];
   }
 }
-function globalEventHandler(e) {
-  let node = e.target;
-  const key = `$$${e.type}`;
-  const dataKey = `${key}Data`;
-  const oriTarget = e.target;
-  const oriCurrentTarget = e.currentTarget;
-  const retarget = (value) => Object.defineProperty(e, "target", {
-    configurable: true,
-    value
-  });
-  const handleNode = () => {
-    if (!node) return false;
-    const handler = node[key];
-    if (handler && !node.disabled) {
-      const resolveData = (value) => {
-        if (typeof value === "function") {
-          try {
-            const fn = value;
-            return fn.length > 0 ? fn(e) : fn();
-          } catch {
-            return value();
-          }
+function applyProps(el, props, isSVG = false) {
+  props = unwrapProps(props);
+  const tagName = el.tagName;
+  const isCE = tagName.includes("-") || "is" in props;
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children") continue;
+    if (key === "ref") {
+      applyRef(el, value);
+      continue;
+    }
+    if (isEventKey(key)) {
+      bindEvent(
+        el,
+        eventNameFromProp(key),
+        value
+      );
+      continue;
+    }
+    if (key.slice(0, 3) === "on:") {
+      bindEvent(
+        el,
+        key.slice(3),
+        value,
+        false
+        // Non-delegated
+      );
+      continue;
+    }
+    if (key.slice(0, 10) === "oncapture:") {
+      bindEvent(
+        el,
+        key.slice(10),
+        value,
+        true
+        // Capture
+      );
+      continue;
+    }
+    if (key === "class" || key === "className") {
+      createClassBinding(el, value);
+      continue;
+    }
+    if (key === "classList") {
+      createClassBinding(el, value);
+      continue;
+    }
+    if (key === "style") {
+      createStyleBinding(
+        el,
+        value
+      );
+      continue;
+    }
+    if (key === "dangerouslySetInnerHTML" && value && typeof value === "object") {
+      const htmlValue = value.__html;
+      if (htmlValue !== void 0) {
+        if (isReactive(htmlValue)) {
+          createAttributeBinding(el, "innerHTML", htmlValue, setInnerHTML);
+        } else {
+          el.innerHTML = htmlValue;
         }
-        return value;
-      };
-      const rawData = node[dataKey];
-      const hasData = rawData !== void 0;
-      const resolvedNodeData = hasData ? resolveData(rawData) : void 0;
-      if (typeof handler === "function") {
-        callEventHandler(handler, e, node, hasData ? resolvedNodeData : void 0);
-      } else if (Array.isArray(handler)) {
-        const tupleData = resolveData(handler[1]);
-        callEventHandler(handler[0], e, node, tupleData);
       }
-      if (e.cancelBubble) return false;
+      continue;
     }
-    const shadowHost = node.host;
-    if (shadowHost && typeof shadowHost !== "string" && !shadowHost._$host && node.contains(e.target)) {
-      retarget(shadowHost);
+    if (ChildProperties.has(key)) {
+      createAttributeBinding(el, key, value, setProperty);
+      continue;
     }
-    return true;
-  };
-  const walkUpTree = () => {
-    while (handleNode() && node) {
-      node = node._$host || node.parentNode || node.host;
+    if (key.slice(0, 5) === "attr:") {
+      createAttributeBinding(el, key.slice(5), value, setAttribute);
+      continue;
     }
-  };
-  Object.defineProperty(e, "currentTarget", {
-    configurable: true,
-    get() {
-      return node || document;
+    if (key.slice(0, 5) === "bool:") {
+      createAttributeBinding(el, key.slice(5), value, setBoolAttribute);
+      continue;
     }
-  });
-  if (e.composedPath) {
-    const path = e.composedPath();
-    retarget(path[0]);
-    for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
-      if (!handleNode()) break;
-      if (node._$host) {
-        node = node._$host;
-        walkUpTree();
-        break;
+    if (key.slice(0, 5) === "prop:") {
+      createAttributeBinding(el, key.slice(5), value, setProperty);
+      continue;
+    }
+    const propAlias = !isSVG ? getPropAlias(key, tagName) : void 0;
+    if (propAlias || !isSVG && Properties.has(key) || isCE && !isSVG) {
+      const propName = propAlias || key;
+      if (isCE && !Properties.has(key)) {
+        createAttributeBinding(
+          el,
+          toPropertyName(propName),
+          value,
+          setProperty
+        );
+      } else {
+        createAttributeBinding(el, propName, value, setProperty);
       }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
+      continue;
+    }
+    if (isSVG && key.indexOf(":") > -1) {
+      const [prefix, name] = key.split(":");
+      const ns = SVGNamespace[prefix];
+      if (ns) {
+        createAttributeBinding(
+          el,
+          key,
+          value,
+          (el2, _key, val) => setAttributeNS(el2, ns, name, val)
+        );
+        continue;
       }
     }
-  } else {
-    walkUpTree();
+    const attrName = Aliases[key] || key;
+    createAttributeBinding(el, attrName, value, setAttribute);
   }
-  retarget(oriTarget);
 }
-function addEventListener(node, name, handler, delegate) {
-  if (handler == null) return;
-  if (delegate) {
-    if (Array.isArray(handler)) {
-      ;
-      node[`$$${name}`] = handler[0];
-      node[`$$${name}Data`] = handler[1];
-    } else {
-      ;
-      node[`$$${name}`] = handler;
-    }
-  } else if (Array.isArray(handler)) {
-    const handlerFn = handler[0];
-    node.addEventListener(name, (e) => handlerFn.call(node, handler[1], e));
-  } else {
-    node.addEventListener(name, handler);
-  }
+function toPropertyName(name) {
+  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
 }
-function bindEvent(el, eventName, handler, options2) {
-  if (handler == null) return () => {
-  };
-  const rootRef = getCurrentRoot();
-  if (DelegatedEvents.has(eventName) && !options2) {
-    const key = `$$${eventName}`;
-    delegateEvents([eventName]);
-    const resolveHandler = isReactive(handler) ? handler : () => handler;
-    el[key] = function(...args) {
-      try {
-        const fn = resolveHandler();
-        callEventHandler(fn, args[0], el);
-      } catch (err) {
-        handleError(err, { source: "event", eventName }, rootRef);
-      }
-    };
-    return () => {
-      el[key] = void 0;
-    };
+var setAttribute = (el, key, value) => {
+  if (value === void 0 || value === null || value === false) {
+    el.removeAttribute(key);
+    return;
   }
-  const getHandler = isReactive(handler) ? handler : () => handler;
-  const wrapped = (event) => {
-    try {
-      const resolved = getHandler();
-      callEventHandler(resolved, event, el);
-    } catch (err) {
-      if (handleError(err, { source: "event", eventName }, rootRef)) {
-        return;
+  if (value === true) {
+    el.setAttribute(key, "");
+    return;
+  }
+  const valueType = typeof value;
+  if (valueType === "string" || valueType === "number") {
+    el.setAttribute(key, String(value));
+    return;
+  }
+  if (key in el) {
+    ;
+    el[key] = value;
+    return;
+  }
+  el.setAttribute(key, String(value));
+};
+var setProperty = (el, key, value) => {
+  if (value === void 0 || value === null) {
+    const fallback = key === "checked" || key === "selected" ? false : "";
+    el[key] = fallback;
+    return;
+  }
+  if (key === "style" && typeof value === "object" && value !== null) {
+    for (const k in value) {
+      const v = value[k];
+      if (v !== void 0) {
+        ;
+        el.style[k] = String(v);
       }
-      throw err;
-    }
-  };
-  el.addEventListener(eventName, wrapped, options2);
-  const cleanup = () => el.removeEventListener(eventName, wrapped, options2);
-  registerRootCleanup(cleanup);
-  return cleanup;
-}
-function bindRef(el, ref) {
-  if (ref == null) return () => {
-  };
-  const getRef = isReactive(ref) ? ref : () => ref;
-  const applyRef2 = (refValue) => {
-    if (refValue == null) return;
-    if (typeof refValue === "function") {
-      ;
-      refValue(el);
-    } else if (typeof refValue === "object" && "current" in refValue) {
-      ;
-      refValue.current = el;
     }
-  };
-  const initialRef = getRef();
-  applyRef2(initialRef);
-  if (isReactive(ref)) {
-    const cleanup2 = createRenderEffect(() => {
-      const currentRef = getRef();
-      applyRef2(currentRef);
-    });
-    registerRootCleanup(cleanup2);
-    const nullifyCleanup = () => {
-      const currentRef = getRef();
-      if (currentRef && typeof currentRef === "object" && "current" in currentRef) {
-        ;
-        currentRef.current = null;
-      }
-    };
-    registerRootCleanup(nullifyCleanup);
-    return () => {
-      cleanup2();
-      nullifyCleanup();
-    };
+    return;
   }
-  const cleanup = () => {
-    const refValue = getRef();
-    if (refValue && typeof refValue === "object" && "current" in refValue) {
-      ;
-      refValue.current = null;
-    }
-  };
-  registerRootCleanup(cleanup);
-  return cleanup;
-}
-function spread(node, props = {}, isSVG = false, skipChildren = false) {
-  const prevProps = {};
-  if (!skipChildren && "children" in props) {
-    createRenderEffect(() => {
-      prevProps.children = props.children;
-    });
+  ;
+  el[key] = value;
+};
+var setInnerHTML = (el, _key, value) => {
+  ;
+  el.innerHTML = value == null ? "" : String(value);
+};
+var setBoolAttribute = (el, key, value) => {
+  if (value) {
+    el.setAttribute(key, "");
+  } else {
+    el.removeAttribute(key);
+  }
+};
+function setAttributeNS(el, namespace, name, value) {
+  if (value == null) {
+    el.removeAttributeNS(namespace, name);
+  } else {
+    el.setAttributeNS(namespace, name, String(value));
   }
-  createRenderEffect(() => {
-    if (typeof props.ref === "function") {
-      ;
-      props.ref(node);
-    }
-  });
-  createRenderEffect(() => {
-    assign(node, props, isSVG, true, prevProps, true);
-  });
-  return prevProps;
 }
-function assign(node, props, isSVG = false, skipChildren = false, prevProps = {}, skipRef = false) {
-  props = props || {};
-  for (const prop in prevProps) {
-    if (!(prop in props)) {
-      if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props);
+function isEventKey(key) {
+  return key.startsWith("on") && key.length > 2 && key[2].toUpperCase() === key[2];
+}
+function eventNameFromProp(key) {
+  return key.slice(2).toLowerCase();
+}
+
+// src/reconcile.ts
+function reconcileArrays(parentNode, a, b) {
+  const bLength = b.length;
+  let aEnd = a.length;
+  let bEnd = bLength;
+  let aStart = 0;
+  let bStart = 0;
+  const after = aEnd > 0 ? a[aEnd - 1].nextSibling : null;
+  let map = null;
+  while (aStart < aEnd || bStart < bEnd) {
+    if (a[aStart] === b[bStart]) {
+      aStart++;
+      bStart++;
+      continue;
     }
-  }
-  for (const prop in props) {
-    if (prop === "children") {
-      if (!skipChildren) {
-        prevProps.children = props.children;
+    while (a[aEnd - 1] === b[bEnd - 1]) {
+      aEnd--;
+      bEnd--;
+    }
+    if (aEnd === aStart) {
+      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] ?? null : after;
+      const count = bEnd - bStart;
+      const doc = parentNode.ownerDocument;
+      if (count > 1 && doc) {
+        const frag = doc.createDocumentFragment();
+        for (let i = bStart; i < bEnd; i++) {
+          frag.appendChild(b[i]);
+        }
+        parentNode.insertBefore(frag, node);
+        bStart = bEnd;
+      } else {
+        while (bStart < bEnd) {
+          parentNode.insertBefore(b[bStart++], node);
+        }
+      }
+    } else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        const nodeToRemove = a[aStart];
+        if (!map || !map.has(nodeToRemove)) {
+          nodeToRemove.parentNode?.removeChild(nodeToRemove);
+        }
+        aStart++;
+      }
+    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+      const node = a[--aEnd].nextSibling;
+      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
+      parentNode.insertBefore(b[--bEnd], node);
+      a[aEnd] = b[bEnd];
+    } else {
+      if (!map) {
+        map = /* @__PURE__ */ new Map();
+        let i = bStart;
+        while (i < bEnd) {
+          map.set(b[i], i++);
+        }
+      }
+      const index = map.get(a[aStart]);
+      if (index != null) {
+        if (bStart < index && index < bEnd) {
+          let i = aStart;
+          let sequence = 1;
+          let t;
+          while (++i < aEnd && i < bEnd) {
+            t = map.get(a[i]);
+            if (t == null || t !== index + sequence) break;
+            sequence++;
+          }
+          if (sequence > index - bStart) {
+            const node = a[aStart];
+            while (bStart < index) {
+              parentNode.insertBefore(b[bStart++], node);
+            }
+          } else {
+            parentNode.replaceChild(b[bStart++], a[aStart++]);
+          }
+        } else {
+          aStart++;
+        }
+      } else {
+        const nodeToRemove = a[aStart++];
+        nodeToRemove.parentNode?.removeChild(nodeToRemove);
       }
-      continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
   }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
-  if (prop === "style") {
-    applyStyle(node, value, prev);
-    return value;
-  }
-  if (prop === "classList") {
-    return applyClass(node, value, prev);
-  }
-  if (value === prev) return prev;
-  if (prop === "ref") {
-    if (!skipRef && typeof value === "function") {
-      ;
-      value(node);
+
+// src/list-helpers.ts
+function moveNodesBefore(parent, nodes, anchor) {
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    if (!node || !(node instanceof Node)) {
+      throw new Error("Invalid node in moveNodesBefore");
     }
-    return value;
-  }
-  if (prop.slice(0, 3) === "on:") {
-    const eventName = prop.slice(3);
-    if (prev) node.removeEventListener(eventName, prev);
-    if (value) node.addEventListener(eventName, value);
-    return value;
+    if (node.nextSibling !== anchor) {
+      if (node.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
+        parent.ownerDocument.adoptNode(node);
+      }
+      try {
+        parent.insertBefore(node, anchor);
+      } catch (e) {
+        if (parent.ownerDocument) {
+          try {
+            const clone = parent.ownerDocument.importNode(node, true);
+            parent.insertBefore(clone, anchor);
+            continue;
+          } catch {
+          }
+        }
+        throw e;
+      }
+    }
+    anchor = node;
   }
-  if (prop.slice(0, 10) === "oncapture:") {
-    const eventName = prop.slice(10);
-    if (prev) node.removeEventListener(eventName, prev, true);
-    if (value) node.addEventListener(eventName, value, true);
-    return value;
+}
+function moveMarkerBlock(parent, block, anchor) {
+  const nodes = collectBlockNodes(block);
+  if (nodes.length === 0) return;
+  moveNodesBefore(parent, nodes, anchor);
+}
+function destroyMarkerBlock(block) {
+  if (block.root) {
+    destroyRoot(block.root);
   }
-  if (prop.slice(0, 2) === "on") {
-    const eventName = prop.slice(2).toLowerCase();
-    const shouldDelegate = DelegatedEvents.has(eventName);
-    if (!shouldDelegate && prev) {
-      const handler = Array.isArray(prev) ? prev[0] : prev;
-      node.removeEventListener(eventName, handler);
+  removeBlockRange(block);
+}
+function collectBlockNodes(block) {
+  const nodes = [];
+  let cursor = block.start;
+  while (cursor) {
+    nodes.push(cursor);
+    if (cursor === block.end) {
+      break;
     }
-    if (shouldDelegate || value) {
-      addEventListener(node, eventName, value, shouldDelegate);
-      if (shouldDelegate) delegateEvents([eventName]);
+    cursor = cursor.nextSibling;
+  }
+  return nodes;
+}
+function removeBlockRange(block) {
+  let cursor = block.start;
+  while (cursor) {
+    const next = cursor.nextSibling;
+    cursor.parentNode?.removeChild(cursor);
+    if (cursor === block.end) {
+      break;
     }
-    return value;
+    cursor = next;
   }
-  if (prop.slice(0, 5) === "attr:") {
-    if (value == null) node.removeAttribute(prop.slice(5));
-    else node.setAttribute(prop.slice(5), String(value));
-    return value;
-  }
-  if (prop.slice(0, 5) === "bool:") {
-    if (value) node.setAttribute(prop.slice(5), "");
-    else node.removeAttribute(prop.slice(5));
-    return value;
-  }
-  if (prop.slice(0, 5) === "prop:") {
-    ;
-    node[prop.slice(5)] = value;
-    return value;
-  }
-  if (prop === "class" || prop === "className") {
-    if (value == null) node.removeAttribute("class");
-    else node.className = String(value);
-    return value;
-  }
-  const isCE = node.nodeName.includes("-") || "is" in props;
-  if (!isSVG) {
-    const propAlias = getPropAlias(prop, node.tagName);
-    const isProperty = Properties.has(prop);
-    const isChildProp = ChildProperties.has(prop);
-    if (propAlias || isProperty || isChildProp || isCE) {
-      const propName = propAlias || prop;
-      if (isCE && !isProperty && !isChildProp) {
-        ;
-        node[toPropertyName(propName)] = value;
-      } else {
-        ;
-        node[propName] = value;
-      }
-      return value;
-    }
-  }
-  if (isSVG && prop.indexOf(":") > -1) {
-    const [prefix, name] = prop.split(":");
-    const ns = SVGNamespace[prefix];
-    if (ns) {
-      if (value == null) node.removeAttributeNS(ns, name);
-      else node.setAttributeNS(ns, name, String(value));
-      return value;
+}
+function createVersionedSignalAccessor(initialValue) {
+  let current = initialValue;
+  let version = 0;
+  const track2 = signal(version);
+  function accessor(value) {
+    if (arguments.length === 0) {
+      track2();
+      return current;
     }
+    current = value;
+    version++;
+    track2(version);
   }
-  const attrName = Aliases[prop] || prop;
-  if (value == null) node.removeAttribute(attrName);
-  else node.setAttribute(attrName, String(value));
-  return value;
-}
-function toPropertyName(name) {
-  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
+  return accessor;
 }
-function createConditional(condition, renderTrue, createElementFn, renderFalse) {
-  const startMarker = document.createComment("fict:cond:start");
-  const endMarker = document.createComment("fict:cond:end");
-  const fragment = document.createDocumentFragment();
-  fragment.append(startMarker, endMarker);
-  let currentNodes = [];
-  let currentRoot2 = null;
-  let lastCondition = void 0;
-  let pendingRender = false;
-  const conditionMemo = computed(condition);
-  const runConditional = () => {
-    const cond = conditionMemo();
-    const parent = startMarker.parentNode;
-    if (!parent) {
-      pendingRender = true;
-      return;
-    }
-    pendingRender = false;
-    if (lastCondition === cond && currentNodes.length > 0) {
-      return;
-    }
-    if (lastCondition === cond && lastCondition === false && renderFalse === void 0) {
-      return;
-    }
-    lastCondition = cond;
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-      currentRoot2 = null;
+function createKeyedListContainer() {
+  const startMarker = document.createComment("fict:list:start");
+  const endMarker = document.createComment("fict:list:end");
+  const dispose = () => {
+    for (const block of container.blocks.values()) {
+      destroyRoot(block.root);
     }
-    removeNodes(currentNodes);
-    currentNodes = [];
-    const render2 = cond ? renderTrue : renderFalse;
-    if (!render2) {
+    container.blocks.clear();
+    container.nextBlocks.clear();
+    if (!startMarker.parentNode || !endMarker.parentNode) {
+      container.currentNodes = [];
+      container.nextNodes = [];
+      container.orderedBlocks.length = 0;
+      container.nextOrderedBlocks.length = 0;
+      container.orderedIndexByKey.clear();
       return;
     }
-    const root = createRootContext();
-    const prev = pushRoot(root);
-    let handledError = false;
-    try {
-      const output = untrack(render2);
-      if (output == null || output === false) {
-        return;
-      }
-      const el = createElementFn(output);
-      const nodes = toNodeArray(el);
-      insertNodesBefore(parent, nodes, endMarker);
-      currentNodes = nodes;
-    } catch (err) {
-      if (handleSuspend(err, root)) {
-        handledError = true;
-        destroyRoot(root);
-        return;
-      }
-      if (handleError(err, { source: "renderChild" }, root)) {
-        handledError = true;
-        destroyRoot(root);
-        return;
-      }
-      throw err;
-    } finally {
-      popRoot(prev);
-      if (!handledError) {
-        flushOnMount(root);
-        currentRoot2 = root;
-      } else {
-        currentRoot2 = null;
-      }
-    }
+    const range = document.createRange();
+    range.setStartBefore(startMarker);
+    range.setEndAfter(endMarker);
+    range.deleteContents();
+    container.currentNodes = [];
+    container.nextNodes = [];
+    container.nextBlocks.clear();
+    container.orderedBlocks.length = 0;
+    container.nextOrderedBlocks.length = 0;
+    container.orderedIndexByKey.clear();
   };
-  const dispose = createRenderEffect(runConditional);
-  return {
-    marker: fragment,
-    flush: () => {
-      if (pendingRender) {
-        runConditional();
-      }
-    },
-    dispose: () => {
-      dispose();
-      if (currentRoot2) {
-        destroyRoot(currentRoot2);
-      }
-      removeNodes(currentNodes);
-      currentNodes = [];
-      startMarker.parentNode?.removeChild(startMarker);
-      endMarker.parentNode?.removeChild(endMarker);
+  const container = {
+    startMarker,
+    endMarker,
+    blocks: /* @__PURE__ */ new Map(),
+    nextBlocks: /* @__PURE__ */ new Map(),
+    currentNodes: [startMarker, endMarker],
+    nextNodes: [],
+    orderedBlocks: [],
+    nextOrderedBlocks: [],
+    orderedIndexByKey: /* @__PURE__ */ new Map(),
+    dispose
+  };
+  return container;
+}
+function createKeyedBlock(key, item, index, render2, needsIndex = true, hostRoot) {
+  const itemSig = createVersionedSignalAccessor(item);
+  const indexSig = needsIndex ? signal(index) : ((next) => {
+    if (arguments.length === 0) return index;
+    index = next;
+    return index;
+  });
+  const root = createRootContext(hostRoot);
+  const prevRoot = pushRoot(root);
+  const prevSub = setActiveSub(void 0);
+  let nodes = [];
+  try {
+    const rendered = render2(itemSig, indexSig, key);
+    if (rendered instanceof Node || Array.isArray(rendered) && rendered.every((n) => n instanceof Node)) {
+      nodes = toNodeArray(rendered);
+    } else {
+      const element = createElement(rendered);
+      nodes = toNodeArray(element);
     }
+  } finally {
+    setActiveSub(prevSub);
+    popRoot(prevRoot);
+    flushOnMount(root);
+  }
+  return {
+    key,
+    nodes,
+    root,
+    item: itemSig,
+    index: indexSig,
+    rawItem: item,
+    rawIndex: index
   };
 }
-function createList(items, renderItem, createElementFn, getKey) {
-  const startMarker = document.createComment("fict:list:start");
-  const endMarker = document.createComment("fict:list:end");
+function getFirstNodeAfter(marker) {
+  return marker.nextSibling;
+}
+function isNodeBetweenMarkers(node, startMarker, endMarker) {
+  let current = startMarker.nextSibling;
+  while (current && current !== endMarker) {
+    if (current === node) return true;
+    current = current.nextSibling;
+  }
+  return false;
+}
+function createKeyedList(getItems, keyFn, renderItem, needsIndex) {
+  const resolvedNeedsIndex = arguments.length >= 4 ? !!needsIndex : renderItem.length > 1;
+  return createFineGrainedKeyedList(getItems, keyFn, renderItem, resolvedNeedsIndex);
+}
+function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
+  const container = createKeyedListContainer();
+  const hostRoot = getCurrentRoot();
   const fragment = document.createDocumentFragment();
-  fragment.append(startMarker, endMarker);
-  const nodeMap = /* @__PURE__ */ new Map();
+  fragment.append(container.startMarker, container.endMarker);
   let pendingItems = null;
-  const runListUpdate = () => {
-    const arr = items();
-    const parent = startMarker.parentNode;
-    if (!parent) {
-      pendingItems = arr;
-      return;
-    }
-    pendingItems = null;
-    const newNodeMap = /* @__PURE__ */ new Map();
-    const blocks = [];
-    for (let i = 0; i < arr.length; i++) {
-      const item = arr[i];
-      const key = getKey ? getKey(item, i) : i;
-      const existing = nodeMap.get(key);
-      let block;
-      if (existing) {
-        const previousValue = existing.value();
-        if (!getKey && previousValue !== item) {
-          destroyRoot(existing.root);
-          removeBlockNodes(existing);
-          block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn);
-        } else {
-          const previousIndex = existing.index();
-          existing.value(item);
-          existing.index(i);
-          if (previousValue === item) {
-            bumpBlockVersion(existing);
-          }
-          const needsRerender = getKey ? true : previousValue !== item || previousIndex !== i;
-          block = needsRerender ? rerenderBlock(existing, createElementFn) : existing;
+  let disposed = false;
+  const performDiff = () => {
+    if (disposed) return;
+    batch2(() => {
+      const newItems = pendingItems || getItems();
+      pendingItems = null;
+      const oldBlocks = container.blocks;
+      const newBlocks = container.nextBlocks;
+      const prevOrderedBlocks = container.orderedBlocks;
+      const nextOrderedBlocks = container.nextOrderedBlocks;
+      const orderedIndexByKey = container.orderedIndexByKey;
+      newBlocks.clear();
+      nextOrderedBlocks.length = 0;
+      orderedIndexByKey.clear();
+      const endParent = container.endMarker.parentNode;
+      const startParent = container.startMarker.parentNode;
+      const parent = endParent && startParent && endParent === startParent && endParent.isConnected ? endParent : null;
+      if (!parent) {
+        pendingItems = newItems;
+        queueMicrotask(performDiff);
+        return;
+      }
+      if (newItems.length === 0) {
+        if (oldBlocks.size > 0) {
+          for (const block of oldBlocks.values()) {
+            destroyRoot(block.root);
+            removeNodes(block.nodes);
+          }
         }
-      } else {
-        block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn);
+        oldBlocks.clear();
+        newBlocks.clear();
+        prevOrderedBlocks.length = 0;
+        nextOrderedBlocks.length = 0;
+        orderedIndexByKey.clear();
+        container.currentNodes.length = 0;
+        container.currentNodes.push(container.startMarker, container.endMarker);
+        container.nextNodes.length = 0;
+        return;
       }
-      newNodeMap.set(key, block);
-      blocks.push(block);
-    }
-    for (const [key, managed] of nodeMap) {
-      if (!newNodeMap.has(key)) {
-        destroyRoot(managed.root);
-        removeBlockNodes(managed);
+      const prevCount = prevOrderedBlocks.length;
+      let appendCandidate = prevCount > 0 && newItems.length >= prevCount;
+      const appendedBlocks = [];
+      newItems.forEach((item, index) => {
+        const key = keyFn(item, index);
+        const existed = oldBlocks.has(key);
+        let block = oldBlocks.get(key);
+        if (block) {
+          if (block.rawItem !== item) {
+            block.rawItem = item;
+            block.item(item);
+          }
+          if (needsIndex && block.rawIndex !== index) {
+            block.rawIndex = index;
+            block.index(index);
+          }
+        }
+        const existingBlock = newBlocks.get(key);
+        if (existingBlock && existingBlock !== block) {
+          destroyRoot(existingBlock.root);
+          removeNodes(existingBlock.nodes);
+        }
+        if (block) {
+          newBlocks.set(key, block);
+          oldBlocks.delete(key);
+        } else {
+          const existingBlock2 = newBlocks.get(key);
+          if (existingBlock2) {
+            destroyRoot(existingBlock2.root);
+            removeNodes(existingBlock2.nodes);
+          }
+          block = createKeyedBlock(key, item, index, renderItem, needsIndex, hostRoot);
+        }
+        const resolvedBlock = block;
+        newBlocks.set(key, resolvedBlock);
+        const position = orderedIndexByKey.get(key);
+        if (position !== void 0) {
+          appendCandidate = false;
+        }
+        if (appendCandidate) {
+          if (index < prevCount) {
+            if (!prevOrderedBlocks[index] || prevOrderedBlocks[index].key !== key) {
+              appendCandidate = false;
+            }
+          } else if (existed) {
+            appendCandidate = false;
+          }
+        }
+        if (position !== void 0) {
+          const prior = nextOrderedBlocks[position];
+          if (prior && prior !== resolvedBlock) {
+            destroyRoot(prior.root);
+            removeNodes(prior.nodes);
+          }
+          nextOrderedBlocks[position] = resolvedBlock;
+        } else {
+          orderedIndexByKey.set(key, nextOrderedBlocks.length);
+          nextOrderedBlocks.push(resolvedBlock);
+        }
+        if (appendCandidate && index >= prevCount) {
+          appendedBlocks.push(resolvedBlock);
+        }
+      });
+      const canAppend = appendCandidate && prevCount > 0 && newItems.length > prevCount && oldBlocks.size === 0 && appendedBlocks.length > 0;
+      if (canAppend) {
+        const appendedNodes = [];
+        for (const block of appendedBlocks) {
+          for (let i = 0; i < block.nodes.length; i++) {
+            appendedNodes.push(block.nodes[i]);
+          }
+        }
+        if (appendedNodes.length > 0) {
+          insertNodesBefore(parent, appendedNodes, container.endMarker);
+          const currentNodes = container.currentNodes;
+          currentNodes.pop();
+          for (let i = 0; i < appendedNodes.length; i++) {
+            currentNodes.push(appendedNodes[i]);
+          }
+          currentNodes.push(container.endMarker);
+        }
+        container.blocks = newBlocks;
+        container.nextBlocks = oldBlocks;
+        container.orderedBlocks = nextOrderedBlocks;
+        container.nextOrderedBlocks = prevOrderedBlocks;
+        return;
       }
-    }
-    let anchor = endMarker;
-    for (let i = blocks.length - 1; i >= 0; i--) {
-      const block = blocks[i];
-      insertNodesBefore(parent, block.nodes, anchor);
-      if (block.nodes.length > 0) {
-        anchor = block.nodes[0];
+      if (oldBlocks.size > 0) {
+        for (const block of oldBlocks.values()) {
+          destroyRoot(block.root);
+          removeNodes(block.nodes);
+        }
+        oldBlocks.clear();
       }
-    }
-    nodeMap.clear();
-    for (const [k, v] of newNodeMap) {
-      nodeMap.set(k, v);
-    }
+      if (newBlocks.size > 0 || container.currentNodes.length > 0) {
+        const prevNodes = container.currentNodes;
+        const nextNodes = container.nextNodes;
+        nextNodes.length = 0;
+        nextNodes.push(container.startMarker);
+        for (let i = 0; i < nextOrderedBlocks.length; i++) {
+          const nodes = nextOrderedBlocks[i].nodes;
+          for (let j = 0; j < nodes.length; j++) {
+            nextNodes.push(nodes[j]);
+          }
+        }
+        nextNodes.push(container.endMarker);
+        reconcileArrays(parent, prevNodes, nextNodes);
+        container.currentNodes = nextNodes;
+        container.nextNodes = prevNodes;
+      }
+      container.blocks = newBlocks;
+      container.nextBlocks = oldBlocks;
+      container.orderedBlocks = nextOrderedBlocks;
+      container.nextOrderedBlocks = prevOrderedBlocks;
+    });
   };
-  const dispose = createRenderEffect(runListUpdate);
+  const effectDispose = createRenderEffect(performDiff);
   return {
     marker: fragment,
+    startMarker: container.startMarker,
+    endMarker: container.endMarker,
+    // Flush pending items - call after markers are inserted into DOM
     flush: () => {
       if (pendingItems !== null) {
-        runListUpdate();
+        performDiff();
       }
     },
     dispose: () => {
-      dispose();
-      for (const [, managed] of nodeMap) {
-        destroyRoot(managed.root);
-        removeBlockNodes(managed);
-      }
-      nodeMap.clear();
-      startMarker.parentNode?.removeChild(startMarker);
-      endMarker.parentNode?.removeChild(endMarker);
+      disposed = true;
+      effectDispose?.();
+      container.dispose();
     }
   };
 }
-function createShow(el, condition, displayValue) {
-  const originalDisplay = displayValue ?? el.style.display;
-  createRenderEffect(() => {
-    el.style.display = condition() ? originalDisplay : "none";
-  });
+
+// src/binding.ts
+function isReactive(value) {
+  return typeof value === "function" && value.length === 0;
 }
-function createPortal(container, render2, createElementFn) {
-  const parentRoot = getCurrentRoot();
-  const marker = document.createComment("fict:portal");
-  container.appendChild(marker);
-  let currentNodes = [];
-  let currentRoot2 = null;
-  const dispose = createRenderEffect(() => {
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-      currentRoot2 = null;
-    }
-    if (currentNodes.length > 0) {
-      removeNodes(currentNodes);
-      currentNodes = [];
-    }
-    const root = createRootContext();
-    const prev = pushRoot(root);
-    let handledError = false;
-    try {
-      const output = render2();
-      if (output != null && output !== false) {
-        const el = createElementFn(output);
-        const nodes = toNodeArray(el);
-        if (marker.parentNode) {
-          insertNodesBefore(marker.parentNode, nodes, marker);
+function unwrap2(value) {
+  return isReactive(value) ? value() : value;
+}
+function callEventHandler(handler, event, node, data) {
+  if (!handler) return;
+  const context = node ?? event.currentTarget ?? void 0;
+  const invoke = (fn) => {
+    if (typeof fn === "function") {
+      const result = data === void 0 ? fn.call(context, event) : fn.call(context, data, event);
+      if (typeof result === "function" && result !== fn) {
+        if (data === void 0) {
+          ;
+          result.call(context, event);
+        } else {
+          ;
+          result.call(context, data, event);
         }
-        currentNodes = nodes;
-      }
-    } catch (err) {
-      if (handleSuspend(err, root)) {
-        handledError = true;
-        destroyRoot(root);
-        currentNodes = [];
-        return;
-      }
-      if (handleError(err, { source: "renderChild" }, root)) {
-        handledError = true;
-        destroyRoot(root);
-        currentNodes = [];
-        return;
+      } else if (result && typeof result.handleEvent === "function") {
+        ;
+        result.handleEvent.call(result, event);
       }
-      throw err;
-    } finally {
-      popRoot(prev);
-      if (!handledError) {
-        flushOnMount(root);
-        currentRoot2 = root;
-      } else {
-        currentRoot2 = null;
-      }
-    }
-  });
-  const portalDispose = () => {
-    dispose();
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-    }
-    if (currentNodes.length > 0) {
-      removeNodes(currentNodes);
+    } else if (fn && typeof fn.handleEvent === "function") {
+      fn.handleEvent.call(fn, event);
     }
-    marker.parentNode?.removeChild(marker);
   };
-  if (parentRoot) {
-    parentRoot.destroyCallbacks.push(portalDispose);
+  invoke(handler);
+}
+var PRIMITIVE_PROXY = Symbol("fict:primitive-proxy");
+var PRIMITIVE_PROXY_RAW_VALUE = Symbol("fict:primitive-proxy:raw-value");
+function unwrapPrimitive(value) {
+  if (value && typeof value === "object" && PRIMITIVE_PROXY in value) {
+    const getRawValue = value[PRIMITIVE_PROXY_RAW_VALUE];
+    if (typeof getRawValue === "function") {
+      return getRawValue();
+    }
   }
-  return {
-    marker,
-    dispose: portalDispose
-  };
+  return value;
 }
-function mountBlock(initialValue, initialIndex, renderItem, parent, anchor, createElementFn) {
-  const start = document.createComment("fict:block:start");
-  const end = document.createComment("fict:block:end");
-  const valueSig = signal(initialValue);
-  const indexSig = signal(initialIndex);
-  const versionSig = signal(0);
-  const valueProxy = createValueProxy(() => {
-    versionSig();
-    return valueSig();
-  });
-  const renderCurrent = () => renderItem(valueProxy, indexSig());
-  const root = createRootContext();
-  const prev = pushRoot(root);
-  const nodes = [start];
-  let handledError = false;
-  try {
-    const output = renderCurrent();
-    if (output != null && output !== false) {
-      const el = createElementFn(output);
-      const rendered = toNodeArray(el);
-      nodes.push(...rendered);
+function createTextBinding(value) {
+  const text = document.createTextNode("");
+  if (isReactive(value)) {
+    createRenderEffect(() => {
+      const v = value();
+      const fmt = formatTextValue(v);
+      if (text.data !== fmt) {
+        text.data = fmt;
+      }
+    });
+  } else {
+    text.data = formatTextValue(value);
+  }
+  return text;
+}
+function bindText(textNode, getValue) {
+  return createRenderEffect(() => {
+    const value = formatTextValue(getValue());
+    if (textNode.data !== value) {
+      textNode.data = value;
     }
-    nodes.push(end);
-    insertNodesBefore(parent, nodes, anchor);
-  } catch (err) {
-    if (handleSuspend(err, root)) {
-      handledError = true;
-      nodes.push(end);
-      insertNodesBefore(parent, nodes, anchor);
-    } else if (handleError(err, { source: "renderChild" }, root)) {
-      handledError = true;
-      nodes.push(end);
-      insertNodesBefore(parent, nodes, anchor);
+  });
+}
+function formatTextValue(value) {
+  if (value == null || value === false) {
+    return "";
+  }
+  return String(value);
+}
+function createAttributeBinding(el, key, value, setter) {
+  if (isReactive(value)) {
+    createRenderEffect(() => {
+      setter(el, key, value());
+    });
+  } else {
+    setter(el, key, value);
+  }
+}
+function bindAttribute(el, key, getValue) {
+  let prevValue = void 0;
+  return createRenderEffect(() => {
+    const value = getValue();
+    if (value === prevValue) return;
+    prevValue = value;
+    if (value === void 0 || value === null || value === false) {
+      el.removeAttribute(key);
+    } else if (value === true) {
+      el.setAttribute(key, "");
     } else {
-      throw err;
+      el.setAttribute(key, String(value));
     }
-  } finally {
-    popRoot(prev);
-    if (!handledError) {
-      flushOnMount(root);
-    } else {
-      destroyRoot(root);
+  });
+}
+function bindProperty(el, key, getValue) {
+  const PROPERTY_BINDING_KEYS = /* @__PURE__ */ new Set([
+    "value",
+    "checked",
+    "selected",
+    "disabled",
+    "readOnly",
+    "multiple",
+    "muted"
+  ]);
+  let prevValue = void 0;
+  return createRenderEffect(() => {
+    const next = getValue();
+    if (next === prevValue) return;
+    prevValue = next;
+    if (PROPERTY_BINDING_KEYS.has(key) && (next === void 0 || next === null)) {
+      const fallback = key === "checked" || key === "selected" ? false : "";
+      el[key] = fallback;
+      return;
     }
+    ;
+    el[key] = next;
+  });
+}
+function createStyleBinding(el, value) {
+  const target = el;
+  if (isReactive(value)) {
+    let prev;
+    createRenderEffect(() => {
+      const next = value();
+      applyStyle(target, next, prev);
+      prev = next;
+    });
+  } else {
+    applyStyle(target, value, void 0);
   }
-  return {
-    nodes,
-    root,
-    value: valueSig,
-    index: indexSig,
-    version: versionSig,
-    start,
-    end,
-    valueProxy,
-    renderCurrent
-  };
 }
-function rerenderBlock(block, createElementFn) {
-  const currentContent = block.nodes.slice(1, Math.max(1, block.nodes.length - 1));
-  const currentNode = currentContent.length === 1 ? currentContent[0] : null;
-  clearRoot(block.root);
-  const prev = pushRoot(block.root);
-  let nextOutput;
-  let handledError = false;
-  try {
-    nextOutput = block.renderCurrent();
-  } catch (err) {
-    if (handleSuspend(err, block.root)) {
-      handledError = true;
-      popRoot(prev);
-      destroyRoot(block.root);
-      block.nodes = [block.start, block.end];
-      return block;
+function bindStyle(el, getValue) {
+  const target = el;
+  let prev;
+  return createRenderEffect(() => {
+    const next = getValue();
+    applyStyle(target, next, prev);
+    prev = next;
+  });
+}
+function applyStyle(el, value, prev) {
+  if (typeof value === "string") {
+    el.style.cssText = value;
+  } else if (value && typeof value === "object") {
+    const styles = value;
+    if (typeof prev === "string") {
+      el.style.cssText = "";
     }
-    if (handleError(err, { source: "renderChild" }, block.root)) {
-      handledError = true;
-      popRoot(prev);
-      destroyRoot(block.root);
-      block.nodes = [block.start, block.end];
-      return block;
+    if (prev && typeof prev === "object") {
+      const prevStyles = prev;
+      for (const key of Object.keys(prevStyles)) {
+        if (!(key in styles)) {
+          const cssProperty = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+          el.style.removeProperty(cssProperty);
+        }
+      }
     }
-    throw err;
-  } finally {
-    if (!handledError) {
-      popRoot(prev);
+    for (const [prop, v] of Object.entries(styles)) {
+      if (v != null) {
+        const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+        const unitless = isUnitlessStyleProperty(prop) || isUnitlessStyleProperty(cssProperty);
+        const valueStr = typeof v === "number" && !unitless ? `${v}px` : String(v);
+        el.style.setProperty(cssProperty, valueStr);
+      } else {
+        const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+        el.style.removeProperty(cssProperty);
+      }
     }
-  }
-  if (isFragmentVNode(nextOutput) && currentContent.length > 0) {
-    const patched = patchFragmentChildren(currentContent, nextOutput.props?.children);
-    if (patched) {
-      block.nodes = [block.start, ...currentContent, block.end];
-      return block;
+  } else {
+    if (prev && typeof prev === "object") {
+      const prevStyles = prev;
+      for (const key of Object.keys(prevStyles)) {
+        const cssProperty = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        el.style.removeProperty(cssProperty);
+      }
+    } else if (typeof prev === "string") {
+      el.style.cssText = "";
     }
   }
-  if (currentNode && patchNode(currentNode, nextOutput)) {
-    block.nodes = [block.start, currentNode, block.end];
-    return block;
-  }
-  clearContent(block);
-  if (nextOutput != null && nextOutput !== false) {
-    const newNodes = toNodeArray(
-      nextOutput instanceof Node ? nextOutput : createElementFn(nextOutput)
-    );
-    insertNodesBefore(block.start.parentNode, newNodes, block.end);
-    block.nodes = [block.start, ...newNodes, block.end];
+}
+function isUnitlessStyleProperty(prop) {
+  return UnitlessStyles.has(prop);
+}
+function createClassBinding(el, value) {
+  if (isReactive(value)) {
+    let prev = {};
+    createRenderEffect(() => {
+      const next = value();
+      prev = applyClass(el, next, prev);
+    });
   } else {
-    block.nodes = [block.start, block.end];
+    applyClass(el, value, {});
   }
-  return block;
 }
-function patchElement(el, output) {
-  if (output === null || output === void 0 || output === false || typeof output === "string" || typeof output === "number") {
-    el.textContent = output === null || output === void 0 || output === false ? "" : String(output);
-    return true;
-  }
-  if (output instanceof Text) {
-    el.textContent = output.data;
-    return true;
-  }
-  if (output && typeof output === "object" && !(output instanceof Node)) {
-    const vnode = output;
-    if (typeof vnode.type === "string" && vnode.type.toLowerCase() === el.tagName.toLowerCase()) {
-      const children = vnode.props?.children;
-      const props = vnode.props ?? {};
-      for (const [key, value] of Object.entries(props)) {
-        if (key === "children" || key === "key") continue;
-        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || value === void 0) {
-          if (key === "class" || key === "className") {
-            el.setAttribute("class", value === false || value === null ? "" : String(value));
-          } else if (key === "style" && typeof value === "string") {
-            ;
-            el.style.cssText = value;
-          } else if (value === false || value === null || value === void 0) {
-            el.removeAttribute(key);
-          } else if (value === true) {
-            el.setAttribute(key, "");
-          } else {
-            el.setAttribute(key, String(value));
-          }
-        }
-      }
-      if (typeof children === "string" || typeof children === "number" || children === null || children === void 0 || children === false) {
-        el.textContent = children === null || children === void 0 || children === false ? "" : String(children);
-        return true;
-      }
-      if (children && typeof children === "object" && !Array.isArray(children) && !(children instanceof Node)) {
-        const childVNode = children;
-        if (typeof childVNode.type === "string") {
-          const childEl = el.querySelector(childVNode.type);
-          if (childEl && patchElement(childEl, children)) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  if (output instanceof Node) {
-    if (output.nodeType === Node.ELEMENT_NODE) {
-      const nextEl = output;
-      if (nextEl.tagName.toLowerCase() === el.tagName.toLowerCase()) {
-        el.textContent = nextEl.textContent;
-        return true;
-      }
-    } else if (output.nodeType === Node.TEXT_NODE) {
-      el.textContent = output.data;
-      return true;
-    }
-  }
-  return false;
+function bindClass(el, getValue) {
+  let prev = {};
+  return createRenderEffect(() => {
+    const next = getValue();
+    prev = applyClass(el, next, prev);
+  });
 }
-function patchNode(currentNode, nextOutput) {
-  if (!currentNode) return false;
-  if (currentNode instanceof Text && (nextOutput === null || nextOutput === void 0 || nextOutput === false || typeof nextOutput === "string" || typeof nextOutput === "number" || nextOutput instanceof Text)) {
-    const nextText = nextOutput instanceof Text ? nextOutput.data : nextOutput === null || nextOutput === void 0 || nextOutput === false ? "" : String(nextOutput);
-    currentNode.data = nextText;
-    return true;
-  }
-  if (currentNode instanceof Element && patchElement(currentNode, nextOutput)) {
-    return true;
-  }
-  if (nextOutput instanceof Node && currentNode === nextOutput) {
-    return true;
+function toggleClassKey(node, key, value) {
+  const classNames = key.trim().split(/\s+/);
+  for (let i = 0, len = classNames.length; i < len; i++) {
+    node.classList.toggle(classNames[i], value);
   }
-  return false;
-}
-function isFragmentVNode(value) {
-  return value != null && typeof value === "object" && !(value instanceof Node) && value.type === Fragment;
 }
-function normalizeChildren(children, result = []) {
-  if (children === void 0) {
-    return result;
+function applyClass(el, value, prev) {
+  const prevState = prev && typeof prev === "object" ? prev : {};
+  if (typeof value === "string") {
+    el.className = value;
+    return {};
   }
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      normalizeChildren(child, result);
+  if (value && typeof value === "object") {
+    const classes = value;
+    const classKeys = Object.keys(classes);
+    const prevKeys = Object.keys(prevState);
+    for (let i = 0, len = prevKeys.length; i < len; i++) {
+      const key = prevKeys[i];
+      if (!key || key === "undefined" || classes[key]) continue;
+      toggleClassKey(el, key, false);
+      delete prevState[key];
     }
-    return result;
-  }
-  if (children === null || children === false) {
-    return result;
-  }
-  result.push(children);
-  return result;
-}
-function patchFragmentChildren(nodes, children) {
-  const normalized = normalizeChildren(children);
-  if (normalized.length !== nodes.length) {
-    return false;
+    for (let i = 0, len = classKeys.length; i < len; i++) {
+      const key = classKeys[i];
+      const classValue = !!classes[key];
+      if (!key || key === "undefined" || prevState[key] === classValue || !classValue) continue;
+      toggleClassKey(el, key, true);
+      prevState[key] = classValue;
+    }
+    return prevState;
   }
-  for (let i = 0; i < normalized.length; i++) {
-    if (!patchNode(nodes[i], normalized[i])) {
-      return false;
+  if (!value) {
+    for (const key of Object.keys(prevState)) {
+      if (key && key !== "undefined") {
+        toggleClassKey(el, key, false);
+      }
     }
+    return {};
   }
-  return true;
+  return prevState;
 }
-function clearContent(block) {
-  const nodes = block.nodes.slice(1, Math.max(1, block.nodes.length - 1));
-  removeNodes(nodes);
+function classList(node, value, prev = {}) {
+  return applyClass(node, value, prev);
 }
-function removeBlockNodes(block) {
-  let cursor = block.start;
-  const end = block.end;
-  while (cursor) {
-    const next = cursor.nextSibling;
-    cursor.parentNode?.removeChild(cursor);
-    if (cursor === end) break;
-    cursor = next;
+function insert(parent, getValue, markerOrCreateElement, createElementFn) {
+  const hostRoot = getCurrentRoot();
+  let marker;
+  let ownsMarker = false;
+  let createFn = createElementFn;
+  if (markerOrCreateElement instanceof Node) {
+    marker = markerOrCreateElement;
+    createFn = createElementFn;
+  } else {
+    marker = document.createComment("fict:insert");
+    parent.appendChild(marker);
+    createFn = markerOrCreateElement;
+    ownsMarker = true;
   }
-}
-function bumpBlockVersion(block) {
-  block.version(block.version() + 1);
-}
-
-// src/scope.ts
-function createScope() {
-  let dispose = null;
-  const stop = () => {
-    if (dispose) {
-      dispose();
-      dispose = null;
+  let currentNodes = [];
+  let currentText = null;
+  let currentRoot2 = null;
+  const clearCurrentNodes = () => {
+    if (currentNodes.length > 0) {
+      removeNodes(currentNodes);
+      currentNodes = [];
     }
   };
-  const run = (fn) => {
-    stop();
-    const { dispose: rootDispose, value } = createRoot(fn);
-    dispose = rootDispose;
-    return value;
+  const setTextNode = (textValue, shouldInsert, parentNode) => {
+    if (!currentText) {
+      currentText = document.createTextNode(textValue);
+    } else if (currentText.data !== textValue) {
+      currentText.data = textValue;
+    }
+    if (!shouldInsert) {
+      clearCurrentNodes();
+      return;
+    }
+    if (currentNodes.length === 1 && currentNodes[0] === currentText) {
+      return;
+    }
+    clearCurrentNodes();
+    insertNodesBefore(parentNode, [currentText], marker);
+    currentNodes = [currentText];
   };
-  registerRootCleanup(stop);
-  return { run, stop };
-}
-function runInScope(flag, fn) {
-  const scope = createScope();
-  const evaluate = () => isReactive(flag) ? flag() : !!flag;
-  createEffect(() => {
-    const enabled = evaluate();
-    if (enabled) {
-      scope.run(fn);
-    } else {
-      scope.stop();
+  const dispose = createRenderEffect(() => {
+    const value = getValue();
+    const parentNode = marker.parentNode;
+    const isPrimitive = value == null || value === false || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+    if (isPrimitive) {
+      if (currentRoot2) {
+        destroyRoot(currentRoot2);
+        currentRoot2 = null;
+      }
+      if (!parentNode) {
+        clearCurrentNodes();
+        return;
+      }
+      const textValue = value == null || value === false ? "" : String(value);
+      const shouldInsert = value != null && value !== false;
+      setTextNode(textValue, shouldInsert, parentNode);
+      return;
     }
-  });
-  onCleanup(scope.stop);
-}
-
-// src/hooks.ts
-var ctxStack = [];
-function __fictUseContext() {
-  if (ctxStack.length === 0) {
-    const ctx2 = { slots: [], cursor: 0 };
-    ctxStack.push(ctx2);
-    return ctx2;
-  }
-  const ctx = ctxStack[ctxStack.length - 1];
-  ctx.cursor = 0;
-  return ctx;
-}
-function __fictPushContext() {
-  const ctx = { slots: [], cursor: 0 };
-  ctxStack.push(ctx);
-  return ctx;
-}
-function __fictPopContext() {
-  ctxStack.pop();
-}
-function __fictResetContext() {
-  ctxStack.length = 0;
-}
-function __fictUseSignal(ctx, initial, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = signal(initial);
-  }
-  return ctx.slots[index];
-}
-function __fictUseMemo(ctx, fn, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createMemo(fn);
-  }
-  return ctx.slots[index];
-}
-function __fictUseEffect(ctx, fn, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createEffect(fn);
-  }
-}
-function __fictRender(ctx, fn) {
-  ctxStack.push(ctx);
-  ctx.cursor = 0;
-  try {
-    return fn();
-  } finally {
-    ctxStack.pop();
-  }
-}
-
-// src/versioned-signal.ts
-function createVersionedSignal(initialValue, options2) {
-  const equals = options2?.equals ?? Object.is;
-  const value = signal(initialValue);
-  const version = signal(0);
-  const bumpVersion = () => {
-    const next = version() + 1;
-    version(next);
-  };
-  return {
-    read: () => {
-      version();
-      return value();
-    },
-    write: (next) => {
-      const prev = value();
-      if (!equals(prev, next)) {
-        value(next);
-        return;
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+      currentRoot2 = null;
+    }
+    clearCurrentNodes();
+    const root = createRootContext(hostRoot);
+    const prev = pushRoot(root);
+    let nodes = [];
+    try {
+      let newNode;
+      if (value instanceof Node) {
+        newNode = value;
+      } else if (Array.isArray(value)) {
+        if (value.every((v) => v instanceof Node)) {
+          newNode = value;
+        } else {
+          if (createFn) {
+            const mapped = [];
+            for (const item of value) {
+              mapped.push(...toNodeArray(createFn(item)));
+            }
+            newNode = mapped;
+          } else {
+            newNode = document.createTextNode(String(value));
+          }
+        }
+      } else {
+        newNode = createFn ? createFn(value) : document.createTextNode(String(value));
       }
-      bumpVersion();
-    },
-    force: () => {
-      bumpVersion();
-    },
-    peekVersion: () => version(),
-    peekValue: () => value()
+      nodes = toNodeArray(newNode);
+      if (parentNode) {
+        insertNodesBefore(parentNode, nodes, marker);
+      }
+    } finally {
+      popRoot(prev);
+      flushOnMount(root);
+    }
+    currentRoot2 = root;
+    currentNodes = nodes;
+  });
+  return () => {
+    dispose();
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+      currentRoot2 = null;
+    }
+    clearCurrentNodes();
+    if (ownsMarker) {
+      marker.parentNode?.removeChild(marker);
+    }
   };
 }
-
-// src/props.ts
-var propGetters = /* @__PURE__ */ new WeakSet();
-var rawToProxy = /* @__PURE__ */ new WeakMap();
-var proxyToRaw = /* @__PURE__ */ new WeakMap();
-function __fictProp(getter) {
-  if (typeof getter === "function" && getter.length === 0) {
-    propGetters.add(getter);
-  }
-  return getter;
-}
-function isPropGetter(value) {
-  return typeof value === "function" && propGetters.has(value);
-}
-function createPropsProxy(props) {
-  if (!props || typeof props !== "object") {
-    return props;
-  }
-  if (proxyToRaw.has(props)) {
-    return props;
-  }
-  const cached = rawToProxy.get(props);
-  if (cached) {
-    return cached;
-  }
-  const proxy = new Proxy(props, {
-    get(target, prop, receiver) {
-      const value = Reflect.get(target, prop, receiver);
-      if (isPropGetter(value)) {
-        return value();
+function createChildBinding(parent, getValue, createElementFn) {
+  const marker = document.createComment("fict:child");
+  parent.appendChild(marker);
+  const hostRoot = getCurrentRoot();
+  const dispose = createRenderEffect(() => {
+    const root = createRootContext(hostRoot);
+    const prev = pushRoot(root);
+    let nodes = [];
+    let handledError = false;
+    try {
+      const value = getValue();
+      if (value == null || value === false) {
+        return;
+      }
+      const output = createElementFn(value);
+      nodes = toNodeArray(output);
+      const parentNode = marker.parentNode;
+      if (parentNode) {
+        insertNodesBefore(parentNode, nodes, marker);
+      }
+      return () => {
+        destroyRoot(root);
+        removeNodes(nodes);
+      };
+    } catch (err) {
+      if (handleSuspend(err, root)) {
+        handledError = true;
+        destroyRoot(root);
+        return;
+      }
+      if (handleError(err, { source: "renderChild" }, root)) {
+        handledError = true;
+        destroyRoot(root);
+        return;
+      }
+      throw err;
+    } finally {
+      popRoot(prev);
+      if (!handledError) {
+        flushOnMount(root);
       }
-      return value;
-    },
-    set(target, prop, value, receiver) {
-      return Reflect.set(target, prop, value, receiver);
-    },
-    has(target, prop) {
-      return prop in target;
-    },
-    ownKeys(target) {
-      return Reflect.ownKeys(target);
-    },
-    getOwnPropertyDescriptor(target, prop) {
-      return Object.getOwnPropertyDescriptor(target, prop);
     }
   });
-  rawToProxy.set(props, proxy);
-  proxyToRaw.set(proxy, props);
-  return proxy;
+  return {
+    marker,
+    dispose: () => {
+      dispose();
+      marker.parentNode?.removeChild(marker);
+    }
+  };
 }
-function unwrapProps(props) {
-  if (!props || typeof props !== "object") {
-    return props;
+function delegateEvents(eventNames, doc = window.document) {
+  const e = doc[$$EVENTS] || (doc[$$EVENTS] = /* @__PURE__ */ new Set());
+  for (let i = 0, l = eventNames.length; i < l; i++) {
+    const name = eventNames[i];
+    if (!e.has(name)) {
+      e.add(name);
+      doc.addEventListener(name, globalEventHandler);
+    }
   }
-  return proxyToRaw.get(props) ?? props;
 }
-function __fictPropsRest(props, exclude) {
-  const raw = unwrapProps(props);
-  const out = {};
-  const excludeSet = new Set(exclude);
-  for (const key of Reflect.ownKeys(raw)) {
-    if (excludeSet.has(key)) continue;
-    out[key] = raw[key];
+function clearDelegatedEvents(doc = window.document) {
+  const e = doc[$$EVENTS];
+  if (e) {
+    for (const name of e.keys()) {
+      doc.removeEventListener(name, globalEventHandler);
+    }
+    delete doc[$$EVENTS];
   }
-  return createPropsProxy(out);
 }
-function mergeProps(...sources) {
-  const validSources = sources.filter(
-    (s) => s != null && (typeof s === "object" || typeof s === "function")
-  );
-  if (validSources.length === 0) {
-    return {};
-  }
-  if (validSources.length === 1 && typeof validSources[0] === "object") {
-    return validSources[0];
-  }
-  const resolveSource = (src) => {
-    const value = typeof src === "function" ? src() : src;
-    if (!value || typeof value !== "object") return void 0;
-    return unwrapProps(value);
-  };
-  return new Proxy({}, {
-    get(_, prop) {
-      if (typeof prop === "symbol") {
-        return void 0;
-      }
-      for (let i = validSources.length - 1; i >= 0; i--) {
-        const src = validSources[i];
-        const raw = resolveSource(src);
-        if (!raw || !(prop in raw)) continue;
-        const value = raw[prop];
-        if (typeof src === "function" && !isPropGetter(value)) {
-          return __fictProp(() => {
-            const latest = resolveSource(src);
-            if (!latest || !(prop in latest)) return void 0;
-            return latest[prop];
-          });
-        }
-        return value;
-      }
-      return void 0;
-    },
-    has(_, prop) {
-      for (const src of validSources) {
-        const raw = resolveSource(src);
-        if (raw && prop in raw) {
-          return true;
-        }
-      }
-      return false;
-    },
-    ownKeys() {
-      const keys = /* @__PURE__ */ new Set();
-      for (const src of validSources) {
-        const raw = resolveSource(src);
-        if (raw) {
-          for (const key of Reflect.ownKeys(raw)) {
-            keys.add(key);
+function globalEventHandler(e) {
+  let node = e.target;
+  const key = `$$${e.type}`;
+  const dataKey = `${key}Data`;
+  const oriTarget = e.target;
+  const oriCurrentTarget = e.currentTarget;
+  const retarget = (value) => Object.defineProperty(e, "target", {
+    configurable: true,
+    value
+  });
+  const handleNode = () => {
+    if (!node) return false;
+    const handler = node[key];
+    if (handler && !node.disabled) {
+      const resolveData = (value) => {
+        if (typeof value === "function") {
+          try {
+            const fn = value;
+            return fn.length > 0 ? fn(e) : fn();
+          } catch {
+            return value();
           }
         }
+        return value;
+      };
+      const rawData = node[dataKey];
+      const hasData = rawData !== void 0;
+      const resolvedNodeData = hasData ? resolveData(rawData) : void 0;
+      if (typeof handler === "function") {
+        callEventHandler(handler, e, node, hasData ? resolvedNodeData : void 0);
+      } else if (Array.isArray(handler)) {
+        const tupleData = resolveData(handler[1]);
+        callEventHandler(handler[0], e, node, tupleData);
       }
-      return Array.from(keys);
-    },
-    getOwnPropertyDescriptor(_, prop) {
-      for (let i = validSources.length - 1; i >= 0; i--) {
-        const raw = resolveSource(validSources[i]);
-        if (raw && prop in raw) {
-          return {
-            enumerable: true,
-            configurable: true,
-            get: () => {
-              const value = raw[prop];
-              return value;
-            }
-          };
-        }
-      }
-      return void 0;
+      if (e.cancelBubble) return false;
+    }
+    const shadowHost = node.host;
+    if (shadowHost && typeof shadowHost !== "string" && !shadowHost._$host && node.contains(e.target)) {
+      retarget(shadowHost);
+    }
+    return true;
+  };
+  const walkUpTree = () => {
+    while (handleNode() && node) {
+      node = node._$host || node.parentNode || node.host;
+    }
+  };
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
     }
   });
+  if (e.composedPath) {
+    const path = e.composedPath();
+    retarget(path[0]);
+    for (let i = 0; i < path.length - 2; i++) {
+      node = path[i];
+      if (!handleNode()) break;
+      if (node._$host) {
+        node = node._$host;
+        walkUpTree();
+        break;
+      }
+      if (node.parentNode === oriCurrentTarget) {
+        break;
+      }
+    }
+  } else {
+    walkUpTree();
+  }
+  retarget(oriTarget);
 }
-function useProp(getter) {
-  return __fictProp(createMemo(getter));
-}
-
-// src/ref.ts
-function createRef() {
-  return { current: null };
-}
-
-// src/transition.ts
-function startTransition(fn) {
-  const prev = setTransitionContext(true);
-  try {
-    fn();
-  } finally {
-    setTransitionContext(prev);
-    scheduleFlush();
+function addEventListener(node, name, handler, delegate) {
+  if (handler == null) return;
+  if (delegate) {
+    if (Array.isArray(handler)) {
+      ;
+      node[`$$${name}`] = handler[0];
+      node[`$$${name}Data`] = handler[1];
+    } else {
+      ;
+      node[`$$${name}`] = handler;
+    }
+  } else if (Array.isArray(handler)) {
+    const handlerFn = handler[0];
+    node.addEventListener(name, (e) => handlerFn.call(node, handler[1], e));
+  } else {
+    node.addEventListener(name, handler);
   }
 }
-function useTransition() {
-  const pending = signal(false);
-  const start = (fn) => {
-    pending(true);
-    startTransition(() => {
+function bindEvent(el, eventName, handler, options2) {
+  if (handler == null) return () => {
+  };
+  const rootRef = getCurrentRoot();
+  if (DelegatedEvents.has(eventName) && !options2) {
+    const key = `$$${eventName}`;
+    delegateEvents([eventName]);
+    const resolveHandler = isReactive(handler) ? handler : () => handler;
+    el[key] = function(...args) {
       try {
-        fn();
-      } finally {
-        pending(false);
+        const fn = resolveHandler();
+        callEventHandler(fn, args[0], el);
+      } catch (err) {
+        handleError(err, { source: "event", eventName }, rootRef);
       }
-    });
+    };
+    return () => {
+      el[key] = void 0;
+    };
+  }
+  const getHandler = isReactive(handler) ? handler : () => handler;
+  const wrapped = (event) => {
+    try {
+      const resolved = getHandler();
+      callEventHandler(resolved, event, el);
+    } catch (err) {
+      if (handleError(err, { source: "event", eventName }, rootRef)) {
+        return;
+      }
+      throw err;
+    }
   };
-  return [() => pending(), start];
+  el.addEventListener(eventName, wrapped, options2);
+  const cleanup = () => el.removeEventListener(eventName, wrapped, options2);
+  registerRootCleanup(cleanup);
+  return cleanup;
 }
-function useDeferredValue(getValue) {
-  const deferredValue = signal(getValue());
-  createEffect(() => {
-    const newValue = getValue();
-    const currentDeferred = untrack(() => deferredValue());
-    if (currentDeferred !== newValue) {
-      startTransition(() => {
-        deferredValue(newValue);
-      });
+function bindRef(el, ref) {
+  if (ref == null) return () => {
+  };
+  const getRef = isReactive(ref) ? ref : () => ref;
+  const applyRef2 = (refValue) => {
+    if (refValue == null) return;
+    if (typeof refValue === "function") {
+      ;
+      refValue(el);
+    } else if (typeof refValue === "object" && "current" in refValue) {
+      ;
+      refValue.current = el;
     }
-  });
-  return () => deferredValue();
-}
-
-// src/scheduler.ts
-function batch2(fn) {
-  return batch(fn);
-}
-function untrack2(fn) {
-  return untrack(fn);
-}
-
-// src/dom.ts
-function render(view, container) {
-  const root = createRootContext();
-  const prev = pushRoot(root);
-  let dom;
-  try {
-    const output = view();
-    dom = createElement(output);
-  } finally {
-    popRoot(prev);
+  };
+  const initialRef = getRef();
+  applyRef2(initialRef);
+  if (isReactive(ref)) {
+    const cleanup2 = createRenderEffect(() => {
+      const currentRef = getRef();
+      applyRef2(currentRef);
+    });
+    registerRootCleanup(cleanup2);
+    const nullifyCleanup = () => {
+      const currentRef = getRef();
+      if (currentRef && typeof currentRef === "object" && "current" in currentRef) {
+        ;
+        currentRef.current = null;
+      }
+    };
+    registerRootCleanup(nullifyCleanup);
+    return () => {
+      cleanup2();
+      nullifyCleanup();
+    };
   }
-  container.replaceChildren(dom);
-  container.setAttribute("data-fict-fine-grained", "1");
-  flushOnMount(root);
-  const teardown = () => {
-    destroyRoot(root);
-    container.innerHTML = "";
+  const cleanup = () => {
+    const refValue = getRef();
+    if (refValue && typeof refValue === "object" && "current" in refValue) {
+      ;
+      refValue.current = null;
+    }
   };
-  return teardown;
+  registerRootCleanup(cleanup);
+  return cleanup;
 }
-function createElement(node) {
-  if (node instanceof Node) {
-    return node;
-  }
-  if (node === null || node === void 0 || node === false) {
-    return document.createTextNode("");
+function spread(node, props = {}, isSVG = false, skipChildren = false) {
+  const prevProps = {};
+  if (!skipChildren && "children" in props) {
+    createRenderEffect(() => {
+      prevProps.children = props.children;
+    });
   }
-  if (typeof node === "object" && node !== null && !(node instanceof Node)) {
-    if ("marker" in node) {
-      return createElement(node.marker);
+  createRenderEffect(() => {
+    if (typeof props.ref === "function") {
+      ;
+      props.ref(node);
     }
-    const nodeRecord = node;
-    if (nodeRecord[PRIMITIVE_PROXY]) {
-      const primitiveGetter = nodeRecord[Symbol.toPrimitive];
-      const value = typeof primitiveGetter === "function" ? primitiveGetter.call(node, "default") : node;
-      return document.createTextNode(value == null || value === false ? "" : String(value));
+  });
+  createRenderEffect(() => {
+    assign(node, props, isSVG, true, prevProps, true);
+  });
+  return prevProps;
+}
+function assign(node, props, isSVG = false, skipChildren = false, prevProps = {}, skipRef = false) {
+  props = props || {};
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props);
     }
   }
-  if (Array.isArray(node)) {
-    const frag = document.createDocumentFragment();
-    for (const child of node) {
-      appendChildNode(frag, child);
+  for (const prop in props) {
+    if (prop === "children") {
+      if (!skipChildren) {
+        prevProps.children = props.children;
+      }
+      continue;
     }
-    return frag;
+    const value = props[prop];
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
   }
-  if (typeof node === "string" || typeof node === "number") {
-    return document.createTextNode(String(node));
+}
+function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
+  if (prop === "style") {
+    applyStyle(node, value, prev);
+    return value;
   }
-  if (typeof node === "boolean") {
-    return document.createTextNode("");
+  if (prop === "classList") {
+    return applyClass(node, value, prev);
   }
-  const vnode = node;
-  if (typeof vnode.type === "function") {
-    const rawProps = unwrapProps(vnode.props ?? {});
-    const baseProps = vnode.key === void 0 ? rawProps : new Proxy(rawProps, {
-      get(target, prop, receiver) {
-        if (prop === "key") return vnode.key;
-        return Reflect.get(target, prop, receiver);
-      },
-      has(target, prop) {
-        if (prop === "key") return true;
-        return prop in target;
-      },
-      ownKeys(target) {
-        const keys = new Set(Reflect.ownKeys(target));
-        keys.add("key");
-        return Array.from(keys);
-      },
-      getOwnPropertyDescriptor(target, prop) {
-        if (prop === "key") {
-          return { enumerable: true, configurable: true, value: vnode.key };
-        }
-        return Object.getOwnPropertyDescriptor(target, prop);
-      }
-    });
-    const props = createPropsProxy(baseProps);
-    try {
-      __fictPushContext();
-      const rendered = vnode.type(props);
-      __fictPopContext();
-      return createElement(rendered);
-    } catch (err) {
-      __fictPopContext();
-      if (handleSuspend(err)) {
-        return document.createComment("fict:suspend");
-      }
-      handleError(err, { source: "render", componentName: vnode.type.name });
-      throw err;
+  if (value === prev) return prev;
+  if (prop === "ref") {
+    if (!skipRef && typeof value === "function") {
+      ;
+      value(node);
     }
+    return value;
   }
-  if (vnode.type === Fragment) {
-    const frag = document.createDocumentFragment();
-    const children = vnode.props?.children;
-    appendChildren(frag, children);
-    return frag;
+  if (prop.slice(0, 3) === "on:") {
+    const eventName = prop.slice(3);
+    if (prev) node.removeEventListener(eventName, prev);
+    if (value) node.addEventListener(eventName, value);
+    return value;
   }
-  const tagName = typeof vnode.type === "string" ? vnode.type : "div";
-  const el = document.createElement(tagName);
-  applyProps(el, vnode.props ?? {});
-  return el;
-}
-function template(html, isImportNode, isSVG, isMathML) {
-  let node = null;
-  const create = () => {
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    if (isSVG) {
-      return t.content.firstChild.firstChild;
+  if (prop.slice(0, 10) === "oncapture:") {
+    const eventName = prop.slice(10);
+    if (prev) node.removeEventListener(eventName, prev, true);
+    if (value) node.addEventListener(eventName, value, true);
+    return value;
+  }
+  if (prop.slice(0, 2) === "on") {
+    const eventName = prop.slice(2).toLowerCase();
+    const shouldDelegate = DelegatedEvents.has(eventName);
+    if (!shouldDelegate && prev) {
+      const handler = Array.isArray(prev) ? prev[0] : prev;
+      node.removeEventListener(eventName, handler);
     }
-    if (isMathML) {
-      return t.firstChild;
+    if (shouldDelegate || value) {
+      addEventListener(node, eventName, value, shouldDelegate);
+      if (shouldDelegate) delegateEvents([eventName]);
     }
-    return t.content.firstChild;
-  };
-  const fn = isImportNode ? () => untrack2(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
-  fn.cloneNode = fn;
-  return fn;
-}
-function isBindingHandle(node) {
-  return node !== null && typeof node === "object" && "marker" in node && "dispose" in node && typeof node.dispose === "function";
-}
-function appendChildNode(parent, child) {
-  if (child === null || child === void 0 || child === false) {
-    return;
+    return value;
   }
-  if (isBindingHandle(child)) {
-    appendChildNode(parent, child.marker);
-    child.flush?.();
-    return;
+  if (prop.slice(0, 5) === "attr:") {
+    if (value == null) node.removeAttribute(prop.slice(5));
+    else node.setAttribute(prop.slice(5), String(value));
+    return value;
   }
-  if (typeof child === "function" && child.length === 0) {
-    const childGetter = child;
-    createChildBinding(parent, childGetter, createElement);
-    return;
+  if (prop.slice(0, 5) === "bool:") {
+    if (value) node.setAttribute(prop.slice(5), "");
+    else node.removeAttribute(prop.slice(5));
+    return value;
   }
-  if (Array.isArray(child)) {
-    for (const item of child) {
-      appendChildNode(parent, item);
-    }
-    return;
+  if (prop.slice(0, 5) === "prop:") {
+    ;
+    node[prop.slice(5)] = value;
+    return value;
   }
-  let domNode;
-  if (typeof child !== "object" || child === null) {
-    domNode = document.createTextNode(String(child ?? ""));
-  } else {
-    domNode = createElement(child);
+  if (prop === "class" || prop === "className") {
+    if (value == null) node.removeAttribute("class");
+    else node.className = String(value);
+    return value;
   }
-  if (domNode.nodeType === 11) {
-    const children = Array.from(domNode.childNodes);
-    for (const node of children) {
-      appendChildNode(parent, node);
+  const isCE = node.nodeName.includes("-") || "is" in props;
+  if (!isSVG) {
+    const propAlias = getPropAlias(prop, node.tagName);
+    const isProperty = Properties.has(prop);
+    const isChildProp = ChildProperties.has(prop);
+    if (propAlias || isProperty || isChildProp || isCE) {
+      const propName = propAlias || prop;
+      if (isCE && !isProperty && !isChildProp) {
+        ;
+        node[toPropertyName2(propName)] = value;
+      } else {
+        ;
+        node[propName] = value;
+      }
+      return value;
     }
-    return;
   }
-  if (domNode.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
-    parent.ownerDocument.adoptNode(domNode);
-  }
-  try {
-    parent.appendChild(domNode);
-  } catch (e) {
-    if (parent.ownerDocument) {
-      const clone = parent.ownerDocument.importNode(domNode, true);
-      parent.appendChild(clone);
-      return;
+  if (isSVG && prop.indexOf(":") > -1) {
+    const [prefix, name] = prop.split(":");
+    const ns = SVGNamespace[prefix];
+    if (ns) {
+      if (value == null) node.removeAttributeNS(ns, name);
+      else node.setAttributeNS(ns, name, String(value));
+      return value;
     }
-    throw e;
   }
+  const attrName = Aliases[prop] || prop;
+  if (value == null) node.removeAttribute(attrName);
+  else node.setAttribute(attrName, String(value));
+  return value;
 }
-function appendChildren(parent, children) {
-  if (children === void 0) return;
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      appendChildren(parent, child);
-    }
-    return;
-  }
-  appendChildNode(parent, children);
+function toPropertyName2(name) {
+  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
 }
-function applyRef(el, value) {
-  if (typeof value === "function") {
-    const refFn = value;
-    refFn(el);
-    if (getCurrentRoot()) {
-      registerRootCleanup(() => {
-        refFn(null);
-      });
-    }
-  } else if (value && typeof value === "object" && "current" in value) {
-    const refObj = value;
-    refObj.current = el;
-    if (getCurrentRoot()) {
-      registerRootCleanup(() => {
-        refObj.current = null;
-      });
+function createConditional(condition, renderTrue, createElementFn, renderFalse) {
+  const startMarker = document.createComment("fict:cond:start");
+  const endMarker = document.createComment("fict:cond:end");
+  const fragment = document.createDocumentFragment();
+  fragment.append(startMarker, endMarker);
+  const hostRoot = getCurrentRoot();
+  let currentNodes = [];
+  let currentRoot2 = null;
+  let lastCondition = void 0;
+  let pendingRender = false;
+  const conditionMemo = computed(condition);
+  const runConditional = () => {
+    const cond = conditionMemo();
+    const parent = startMarker.parentNode;
+    if (!parent) {
+      pendingRender = true;
+      return;
     }
-  }
-}
-function applyProps(el, props, isSVG = false) {
-  props = unwrapProps(props);
-  const tagName = el.tagName;
-  const isCE = tagName.includes("-") || "is" in props;
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "children") continue;
-    if (key === "ref") {
-      applyRef(el, value);
-      continue;
+    pendingRender = false;
+    if (lastCondition === cond && currentNodes.length > 0) {
+      return;
     }
-    if (isEventKey(key)) {
-      bindEvent(
-        el,
-        eventNameFromProp(key),
-        value
-      );
-      continue;
+    if (lastCondition === cond && lastCondition === false && renderFalse === void 0) {
+      return;
     }
-    if (key.slice(0, 3) === "on:") {
-      bindEvent(
-        el,
-        key.slice(3),
-        value,
-        false
-        // Non-delegated
-      );
-      continue;
+    lastCondition = cond;
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+      currentRoot2 = null;
     }
-    if (key.slice(0, 10) === "oncapture:") {
-      bindEvent(
-        el,
-        key.slice(10),
-        value,
-        true
-        // Capture
-      );
-      continue;
+    removeNodes(currentNodes);
+    currentNodes = [];
+    const render2 = cond ? renderTrue : renderFalse;
+    if (!render2) {
+      return;
     }
-    if (key === "class" || key === "className") {
-      createClassBinding(el, value);
-      continue;
+    const root = createRootContext(hostRoot);
+    const prev = pushRoot(root);
+    let handledError = false;
+    try {
+      const output = untrack(render2);
+      if (output == null || output === false) {
+        return;
+      }
+      const el = createElementFn(output);
+      const nodes = toNodeArray(el);
+      insertNodesBefore(parent, nodes, endMarker);
+      currentNodes = nodes;
+    } catch (err) {
+      if (handleSuspend(err, root)) {
+        handledError = true;
+        destroyRoot(root);
+        return;
+      }
+      if (handleError(err, { source: "renderChild" }, root)) {
+        handledError = true;
+        destroyRoot(root);
+        return;
+      }
+      throw err;
+    } finally {
+      popRoot(prev);
+      if (!handledError) {
+        flushOnMount(root);
+        currentRoot2 = root;
+      } else {
+        currentRoot2 = null;
+      }
     }
-    if (key === "classList") {
-      createClassBinding(el, value);
-      continue;
+  };
+  const dispose = createRenderEffect(runConditional);
+  return {
+    marker: fragment,
+    flush: () => {
+      if (pendingRender) {
+        runConditional();
+      }
+    },
+    dispose: () => {
+      dispose();
+      if (currentRoot2) {
+        destroyRoot(currentRoot2);
+      }
+      removeNodes(currentNodes);
+      currentNodes = [];
+      startMarker.parentNode?.removeChild(startMarker);
+      endMarker.parentNode?.removeChild(endMarker);
     }
-    if (key === "style") {
-      createStyleBinding(
-        el,
-        value
-      );
-      continue;
+  };
+}
+function createList(items, renderItem, createElementFn, getKey) {
+  const startMarker = document.createComment("fict:list:start");
+  const endMarker = document.createComment("fict:list:end");
+  const fragment = document.createDocumentFragment();
+  fragment.append(startMarker, endMarker);
+  const hostRoot = getCurrentRoot();
+  const nodeMap = /* @__PURE__ */ new Map();
+  let pendingItems = null;
+  const runListUpdate = () => {
+    const arr = items();
+    const parent = startMarker.parentNode;
+    if (!parent) {
+      pendingItems = arr;
+      return;
     }
-    if (key === "dangerouslySetInnerHTML" && value && typeof value === "object") {
-      const htmlValue = value.__html;
-      if (htmlValue !== void 0) {
-        if (isReactive(htmlValue)) {
-          createAttributeBinding(el, "innerHTML", htmlValue, setInnerHTML);
+    pendingItems = null;
+    const newNodeMap = /* @__PURE__ */ new Map();
+    const blocks = [];
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i];
+      const key = getKey ? getKey(item, i) : i;
+      const existing = nodeMap.get(key);
+      let block;
+      if (existing) {
+        const previousValue = existing.value();
+        if (!getKey && previousValue !== item) {
+          destroyRoot(existing.root);
+          removeBlockNodes(existing);
+          block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn, hostRoot);
         } else {
-          el.innerHTML = htmlValue;
+          const previousIndex = existing.index();
+          existing.value(item);
+          existing.index(i);
+          const needsRerender = getKey ? true : previousValue !== item || previousIndex !== i;
+          block = needsRerender ? rerenderBlock(existing, createElementFn) : existing;
         }
+      } else {
+        block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn, hostRoot);
       }
-      continue;
-    }
-    if (ChildProperties.has(key)) {
-      createAttributeBinding(el, key, value, setProperty);
-      continue;
+      newNodeMap.set(key, block);
+      blocks.push(block);
     }
-    if (key.slice(0, 5) === "attr:") {
-      createAttributeBinding(el, key.slice(5), value, setAttribute);
-      continue;
+    for (const [key, managed] of nodeMap) {
+      if (!newNodeMap.has(key)) {
+        destroyRoot(managed.root);
+        removeBlockNodes(managed);
+      }
     }
-    if (key.slice(0, 5) === "bool:") {
-      createAttributeBinding(el, key.slice(5), value, setBoolAttribute);
-      continue;
+    let anchor = endMarker;
+    for (let i = blocks.length - 1; i >= 0; i--) {
+      const block = blocks[i];
+      insertNodesBefore(parent, block.nodes, anchor);
+      if (block.nodes.length > 0) {
+        anchor = block.nodes[0];
+      }
     }
-    if (key.slice(0, 5) === "prop:") {
-      createAttributeBinding(el, key.slice(5), value, setProperty);
-      continue;
+    nodeMap.clear();
+    for (const [k, v] of newNodeMap) {
+      nodeMap.set(k, v);
     }
-    const propAlias = !isSVG ? getPropAlias(key, tagName) : void 0;
-    if (propAlias || !isSVG && Properties.has(key) || isCE && !isSVG) {
-      const propName = propAlias || key;
-      if (isCE && !Properties.has(key)) {
-        createAttributeBinding(
-          el,
-          toPropertyName2(propName),
-          value,
-          setProperty
-        );
-      } else {
-        createAttributeBinding(el, propName, value, setProperty);
+  };
+  const dispose = createRenderEffect(runListUpdate);
+  return {
+    marker: fragment,
+    flush: () => {
+      if (pendingItems !== null) {
+        runListUpdate();
       }
-      continue;
-    }
-    if (isSVG && key.indexOf(":") > -1) {
-      const [prefix, name] = key.split(":");
-      const ns = SVGNamespace[prefix];
-      if (ns) {
-        createAttributeBinding(
-          el,
-          key,
-          value,
-          (el2, _key, val) => setAttributeNS(el2, ns, name, val)
-        );
-        continue;
+    },
+    dispose: () => {
+      dispose();
+      for (const [, managed] of nodeMap) {
+        destroyRoot(managed.root);
+        removeBlockNodes(managed);
       }
+      nodeMap.clear();
+      startMarker.parentNode?.removeChild(startMarker);
+      endMarker.parentNode?.removeChild(endMarker);
     }
-    const attrName = Aliases[key] || key;
-    createAttributeBinding(el, attrName, value, setAttribute);
-  }
-  const children = props.children;
-  appendChildren(el, children);
+  };
 }
-function toPropertyName2(name) {
-  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
+function createShow(el, condition, displayValue) {
+  const originalDisplay = displayValue ?? el.style.display;
+  createRenderEffect(() => {
+    el.style.display = condition() ? originalDisplay : "none";
+  });
 }
-var setAttribute = (el, key, value) => {
-  if (value === void 0 || value === null || value === false) {
-    el.removeAttribute(key);
-    return;
-  }
-  if (value === true) {
-    el.setAttribute(key, "");
-    return;
-  }
-  const valueType = typeof value;
-  if (valueType === "string" || valueType === "number") {
-    el.setAttribute(key, String(value));
-    return;
-  }
-  if (key in el) {
-    ;
-    el[key] = value;
-    return;
-  }
-  el.setAttribute(key, String(value));
-};
-var setProperty = (el, key, value) => {
-  if (value === void 0 || value === null) {
-    const fallback = key === "checked" || key === "selected" ? false : "";
-    el[key] = fallback;
-    return;
-  }
-  if (key === "style" && typeof value === "object" && value !== null) {
-    for (const k in value) {
-      const v = value[k];
-      if (v !== void 0) {
-        ;
-        el.style[k] = String(v);
-      }
-    }
-    return;
-  }
-  ;
-  el[key] = value;
-};
-var setInnerHTML = (el, _key, value) => {
-  el.innerHTML = value == null ? "" : String(value);
-};
-var setBoolAttribute = (el, key, value) => {
-  if (value) {
-    el.setAttribute(key, "");
-  } else {
-    el.removeAttribute(key);
-  }
-};
-function setAttributeNS(el, namespace, name, value) {
-  if (value == null) {
-    el.removeAttributeNS(namespace, name);
-  } else {
-    el.setAttributeNS(namespace, name, String(value));
-  }
-}
-function isEventKey(key) {
-  return key.startsWith("on") && key.length > 2 && key[2].toUpperCase() === key[2];
-}
-function eventNameFromProp(key) {
-  return key.slice(2).toLowerCase();
-}
-
-// src/error-boundary.ts
-function ErrorBoundary(props) {
-  const fragment = document.createDocumentFragment();
-  const marker = document.createComment("fict:error-boundary");
-  fragment.appendChild(marker);
-  const currentView = signal(props.children ?? null);
-  let cleanup;
-  let activeNodes = [];
-  let renderingFallback = false;
-  const toView = (err) => {
-    if (err != null) {
-      return typeof props.fallback === "function" ? props.fallback(err) : props.fallback;
-    }
-    return props.children ?? null;
-  };
-  const renderValue = (value) => {
-    if (cleanup) {
-      cleanup();
-      cleanup = void 0;
-    }
-    if (activeNodes.length) {
-      removeNodes(activeNodes);
-      activeNodes = [];
+function createPortal(container, render2, createElementFn) {
+  const parentRoot = getCurrentRoot();
+  const marker = document.createComment("fict:portal");
+  container.appendChild(marker);
+  let currentNodes = [];
+  let currentRoot2 = null;
+  const dispose = createRenderEffect(() => {
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+      currentRoot2 = null;
     }
-    if (value == null || value === false) {
-      return;
+    if (currentNodes.length > 0) {
+      removeNodes(currentNodes);
+      currentNodes = [];
     }
-    const root = createRootContext();
+    const root = createRootContext(parentRoot);
     const prev = pushRoot(root);
-    let nodes = [];
+    let handledError = false;
     try {
-      const output = createElement(value);
-      nodes = toNodeArray(output);
-      const parentNode = marker.parentNode;
-      if (parentNode) {
-        insertNodesBefore(parentNode, nodes, marker);
+      const output = render2();
+      if (output != null && output !== false) {
+        const el = createElementFn(output);
+        const nodes = toNodeArray(el);
+        if (marker.parentNode) {
+          insertNodesBefore(marker.parentNode, nodes, marker);
+        }
+        currentNodes = nodes;
       }
     } catch (err) {
-      popRoot(prev);
-      flushOnMount(root);
-      destroyRoot(root);
-      if (renderingFallback) {
-        throw err;
+      if (handleSuspend(err, root)) {
+        handledError = true;
+        destroyRoot(root);
+        currentNodes = [];
+        return;
       }
-      renderingFallback = true;
-      try {
-        renderValue(toView(err));
-      } finally {
-        renderingFallback = false;
+      if (handleError(err, { source: "renderChild" }, root)) {
+        handledError = true;
+        destroyRoot(root);
+        currentNodes = [];
+        return;
+      }
+      throw err;
+    } finally {
+      popRoot(prev);
+      if (!handledError) {
+        flushOnMount(root);
+        currentRoot2 = root;
+      } else {
+        currentRoot2 = null;
       }
-      props.onError?.(err);
-      return;
     }
-    popRoot(prev);
-    flushOnMount(root);
-    cleanup = () => {
-      destroyRoot(root);
-      removeNodes(nodes);
-    };
-    activeNodes = nodes;
-  };
-  createEffect(() => {
-    const value = currentView();
-    renderValue(value);
-  });
-  registerErrorHandler((err) => {
-    renderValue(toView(err));
-    props.onError?.(err);
-    return true;
   });
-  if (props.resetKeys !== void 0) {
-    const isGetter = typeof props.resetKeys === "function" && props.resetKeys.length === 0;
-    const getter = isGetter ? props.resetKeys : void 0;
-    let prev = isGetter ? getter() : props.resetKeys;
-    createEffect(() => {
-      const next = getter ? getter() : props.resetKeys;
-      if (prev !== next) {
-        prev = next;
-        renderValue(toView(null));
-      }
-    });
+  const portalDispose = () => {
+    dispose();
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+    }
+    if (currentNodes.length > 0) {
+      removeNodes(currentNodes);
+    }
+    marker.parentNode?.removeChild(marker);
+  };
+  if (parentRoot) {
+    parentRoot.destroyCallbacks.push(portalDispose);
   }
-  return fragment;
-}
-
-// src/suspense.ts
-function createSuspenseToken() {
-  let resolve;
-  let reject;
-  const promise = new Promise((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
   return {
-    token: {
-      then: promise.then.bind(promise)
-    },
-    resolve,
-    reject
+    marker,
+    dispose: portalDispose
   };
 }
-var isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
-function Suspense(props) {
-  const currentView = signal(props.children ?? null);
-  const pending = signal(0);
-  let resolvedOnce = false;
-  let epoch = 0;
-  const hostRoot = getCurrentRoot();
-  const toFallback = (err) => typeof props.fallback === "function" ? props.fallback(err) : props.fallback;
-  const switchView = (view) => {
-    currentView(view);
-    renderView(view);
-  };
-  const renderView = (view) => {
-    if (cleanup) {
-      cleanup();
-      cleanup = void 0;
-    }
-    if (activeNodes.length) {
-      removeNodes(activeNodes);
-      activeNodes = [];
+function mountBlock(initialValue, initialIndex, renderItem, parent, anchor, createElementFn, hostRoot) {
+  const start = document.createComment("fict:block:start");
+  const end = document.createComment("fict:block:end");
+  const valueSig = createVersionedSignalAccessor(initialValue);
+  const indexSig = signal(initialIndex);
+  const renderCurrent = () => renderItem(valueSig, indexSig);
+  const root = createRootContext(hostRoot);
+  const prev = pushRoot(root);
+  const nodes = [start];
+  let handledError = false;
+  try {
+    const output = renderCurrent();
+    if (output != null && output !== false) {
+      const el = createElementFn(output);
+      const rendered = toNodeArray(el);
+      nodes.push(...rendered);
     }
-    if (view == null || view === false) {
-      return;
+    nodes.push(end);
+    insertNodesBefore(parent, nodes, anchor);
+  } catch (err) {
+    if (handleSuspend(err, root)) {
+      handledError = true;
+      nodes.push(end);
+      insertNodesBefore(parent, nodes, anchor);
+    } else if (handleError(err, { source: "renderChild" }, root)) {
+      handledError = true;
+      nodes.push(end);
+      insertNodesBefore(parent, nodes, anchor);
+    } else {
+      throw err;
     }
-    const root = createRootContext(hostRoot);
-    const prev = pushRoot(root);
-    let nodes = [];
-    try {
-      const output = createElement(view);
-      nodes = toNodeArray(output);
-      const suspendedAttempt = nodes.length > 0 && nodes.every((node) => node instanceof Comment && node.data === "fict:suspend");
-      if (suspendedAttempt) {
-        popRoot(prev);
-        destroyRoot(root);
-        return;
-      }
-      const parentNode = marker.parentNode;
-      if (parentNode) {
-        insertNodesBefore(parentNode, nodes, marker);
-      }
-    } catch (err) {
-      popRoot(prev);
+  } finally {
+    popRoot(prev);
+    if (!handledError) {
       flushOnMount(root);
+    } else {
       destroyRoot(root);
-      handleError(err, { source: "render" });
-      return;
     }
-    popRoot(prev);
-    flushOnMount(root);
-    cleanup = () => {
-      destroyRoot(root);
-      removeNodes(nodes);
-    };
-    activeNodes = nodes;
+  }
+  return {
+    nodes,
+    root,
+    value: valueSig,
+    index: indexSig,
+    start,
+    end,
+    renderCurrent
   };
-  const fragment = document.createDocumentFragment();
-  const marker = document.createComment("fict:suspense");
-  fragment.appendChild(marker);
-  let cleanup;
-  let activeNodes = [];
-  const onResolveMaybe = () => {
-    if (!resolvedOnce) {
-      resolvedOnce = true;
-      props.onResolve?.();
+}
+function rerenderBlock(block, createElementFn) {
+  const currentContent = block.nodes.slice(1, Math.max(1, block.nodes.length - 1));
+  const currentNode = currentContent.length === 1 ? currentContent[0] : null;
+  clearRoot(block.root);
+  const prev = pushRoot(block.root);
+  let nextOutput;
+  let handledError = false;
+  try {
+    nextOutput = block.renderCurrent();
+  } catch (err) {
+    if (handleSuspend(err, block.root)) {
+      handledError = true;
+      popRoot(prev);
+      destroyRoot(block.root);
+      block.nodes = [block.start, block.end];
+      return block;
     }
-  };
-  registerSuspenseHandler((token) => {
-    const tokenEpoch = epoch;
-    pending(pending() + 1);
-    switchView(toFallback());
-    const thenable = token.then ? token : isThenable(token) ? token : null;
-    if (thenable) {
-      thenable.then(
-        () => {
-          if (epoch !== tokenEpoch) return;
-          pending(Math.max(0, pending() - 1));
-          if (pending() === 0) {
-            switchView(props.children ?? null);
-            onResolveMaybe();
-          }
-        },
-        (err) => {
-          if (epoch !== tokenEpoch) return;
-          pending(Math.max(0, pending() - 1));
-          props.onReject?.(err);
-          handleError(err, { source: "render" }, hostRoot);
-        }
-      );
-      return true;
+    if (handleError(err, { source: "renderChild" }, block.root)) {
+      handledError = true;
+      popRoot(prev);
+      destroyRoot(block.root);
+      block.nodes = [block.start, block.end];
+      return block;
     }
-    return false;
-  });
-  createEffect(() => {
-    renderView(currentView());
-  });
-  if (props.resetKeys !== void 0) {
-    const isGetter = typeof props.resetKeys === "function" && props.resetKeys.length === 0;
-    const getter = isGetter ? props.resetKeys : void 0;
-    let prev = isGetter ? getter() : props.resetKeys;
-    createEffect(() => {
-      const next = getter ? getter() : props.resetKeys;
-      if (prev !== next) {
-        prev = next;
-        epoch++;
-        pending(0);
-        switchView(props.children ?? null);
-      }
-    });
-  }
-  return fragment;
-}
-
-// src/reconcile.ts
-function reconcileArrays(parentNode, a, b) {
-  const bLength = b.length;
-  let aEnd = a.length;
-  let bEnd = bLength;
-  let aStart = 0;
-  let bStart = 0;
-  const after = aEnd > 0 ? a[aEnd - 1].nextSibling : null;
-  let map = null;
-  while (aStart < aEnd || bStart < bEnd) {
-    if (a[aStart] === b[bStart]) {
-      aStart++;
-      bStart++;
-      continue;
+    throw err;
+  } finally {
+    if (!handledError) {
+      popRoot(prev);
     }
-    while (a[aEnd - 1] === b[bEnd - 1]) {
-      aEnd--;
-      bEnd--;
+  }
+  if (isFragmentVNode(nextOutput) && currentContent.length > 0) {
+    const patched = patchFragmentChildren(currentContent, nextOutput.props?.children);
+    if (patched) {
+      block.nodes = [block.start, ...currentContent, block.end];
+      return block;
     }
-    if (aEnd === aStart) {
-      const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] ?? null : after;
-      const count = bEnd - bStart;
-      const doc = parentNode.ownerDocument;
-      if (count > 1 && doc) {
-        const frag = doc.createDocumentFragment();
-        for (let i = bStart; i < bEnd; i++) {
-          frag.appendChild(b[i]);
-        }
-        parentNode.insertBefore(frag, node);
-        bStart = bEnd;
-      } else {
-        while (bStart < bEnd) {
-          parentNode.insertBefore(b[bStart++], node);
-        }
-      }
-    } else if (bEnd === bStart) {
-      while (aStart < aEnd) {
-        const nodeToRemove = a[aStart];
-        if (!map || !map.has(nodeToRemove)) {
-          nodeToRemove.parentNode?.removeChild(nodeToRemove);
-        }
-        aStart++;
-      }
-    } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
-    } else {
-      if (!map) {
-        map = /* @__PURE__ */ new Map();
-        let i = bStart;
-        while (i < bEnd) {
-          map.set(b[i], i++);
-        }
-      }
-      const index = map.get(a[aStart]);
-      if (index != null) {
-        if (bStart < index && index < bEnd) {
-          let i = aStart;
-          let sequence = 1;
-          let t;
-          while (++i < aEnd && i < bEnd) {
-            t = map.get(a[i]);
-            if (t == null || t !== index + sequence) break;
-            sequence++;
-          }
-          if (sequence > index - bStart) {
-            const node = a[aStart];
-            while (bStart < index) {
-              parentNode.insertBefore(b[bStart++], node);
-            }
+  }
+  if (currentNode && patchNode(currentNode, nextOutput)) {
+    block.nodes = [block.start, currentNode, block.end];
+    return block;
+  }
+  clearContent(block);
+  if (nextOutput != null && nextOutput !== false) {
+    const newNodes = toNodeArray(
+      nextOutput instanceof Node ? nextOutput : createElementFn(nextOutput)
+    );
+    insertNodesBefore(block.start.parentNode, newNodes, block.end);
+    block.nodes = [block.start, ...newNodes, block.end];
+  } else {
+    block.nodes = [block.start, block.end];
+  }
+  return block;
+}
+function patchElement(el, output) {
+  if (output === null || output === void 0 || output === false || typeof output === "string" || typeof output === "number") {
+    el.textContent = output === null || output === void 0 || output === false ? "" : String(output);
+    return true;
+  }
+  if (output instanceof Text) {
+    el.textContent = output.data;
+    return true;
+  }
+  if (output && typeof output === "object" && !(output instanceof Node)) {
+    const vnode = output;
+    if (typeof vnode.type === "string" && vnode.type.toLowerCase() === el.tagName.toLowerCase()) {
+      const children = vnode.props?.children;
+      const props = vnode.props ?? {};
+      for (const [key, value] of Object.entries(props)) {
+        if (key === "children" || key === "key") continue;
+        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null || value === void 0) {
+          if (key === "class" || key === "className") {
+            el.setAttribute("class", value === false || value === null ? "" : String(value));
+          } else if (key === "style" && typeof value === "string") {
+            ;
+            el.style.cssText = value;
+          } else if (value === false || value === null || value === void 0) {
+            el.removeAttribute(key);
+          } else if (value === true) {
+            el.setAttribute(key, "");
           } else {
-            parentNode.replaceChild(b[bStart++], a[aStart++]);
+            el.setAttribute(key, String(value));
           }
-        } else {
-          aStart++;
         }
-      } else {
-        const nodeToRemove = a[aStart++];
-        nodeToRemove.parentNode?.removeChild(nodeToRemove);
       }
-    }
-  }
-}
-
-// src/list-helpers.ts
-function moveNodesBefore(parent, nodes, anchor) {
-  for (let i = nodes.length - 1; i >= 0; i--) {
-    const node = nodes[i];
-    if (!node || !(node instanceof Node)) {
-      throw new Error("Invalid node in moveNodesBefore");
-    }
-    if (node.nextSibling !== anchor) {
-      if (node.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
-        parent.ownerDocument.adoptNode(node);
+      if (typeof children === "string" || typeof children === "number" || children === null || children === void 0 || children === false) {
+        el.textContent = children === null || children === void 0 || children === false ? "" : String(children);
+        return true;
       }
-      try {
-        parent.insertBefore(node, anchor);
-      } catch (e) {
-        if (parent.ownerDocument) {
-          try {
-            const clone = parent.ownerDocument.importNode(node, true);
-            parent.insertBefore(clone, anchor);
-            continue;
-          } catch {
+      if (children && typeof children === "object" && !Array.isArray(children) && !(children instanceof Node)) {
+        const childVNode = children;
+        if (typeof childVNode.type === "string") {
+          const childEl = el.querySelector(childVNode.type);
+          if (childEl && patchElement(childEl, children)) {
+            return true;
           }
         }
-        throw e;
       }
+      return false;
+    }
+  }
+  if (output instanceof Node) {
+    if (output.nodeType === Node.ELEMENT_NODE) {
+      const nextEl = output;
+      if (nextEl.tagName.toLowerCase() === el.tagName.toLowerCase()) {
+        el.textContent = nextEl.textContent;
+        return true;
+      }
+    } else if (output.nodeType === Node.TEXT_NODE) {
+      el.textContent = output.data;
+      return true;
     }
-    anchor = node;
   }
+  return false;
 }
-function moveMarkerBlock(parent, block, anchor) {
-  const nodes = collectBlockNodes(block);
-  if (nodes.length === 0) return;
-  moveNodesBefore(parent, nodes, anchor);
+function patchNode(currentNode, nextOutput) {
+  if (!currentNode) return false;
+  if (currentNode instanceof Text && (nextOutput === null || nextOutput === void 0 || nextOutput === false || typeof nextOutput === "string" || typeof nextOutput === "number" || nextOutput instanceof Text)) {
+    const nextText = nextOutput instanceof Text ? nextOutput.data : nextOutput === null || nextOutput === void 0 || nextOutput === false ? "" : String(nextOutput);
+    currentNode.data = nextText;
+    return true;
+  }
+  if (currentNode instanceof Element && patchElement(currentNode, nextOutput)) {
+    return true;
+  }
+  if (nextOutput instanceof Node && currentNode === nextOutput) {
+    return true;
+  }
+  return false;
 }
-function destroyMarkerBlock(block) {
-  if (block.root) {
-    destroyRoot(block.root);
+function isFragmentVNode(value) {
+  return value != null && typeof value === "object" && !(value instanceof Node) && value.type === Fragment;
+}
+function normalizeChildren(children, result = []) {
+  if (children === void 0) {
+    return result;
   }
-  removeBlockRange(block);
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      normalizeChildren(child, result);
+    }
+    return result;
+  }
+  if (children === null || children === false) {
+    return result;
+  }
+  result.push(children);
+  return result;
 }
-function collectBlockNodes(block) {
-  const nodes = [];
-  let cursor = block.start;
-  while (cursor) {
-    nodes.push(cursor);
-    if (cursor === block.end) {
-      break;
+function patchFragmentChildren(nodes, children) {
+  const normalized = normalizeChildren(children);
+  if (normalized.length !== nodes.length) {
+    return false;
+  }
+  for (let i = 0; i < normalized.length; i++) {
+    if (!patchNode(nodes[i], normalized[i])) {
+      return false;
     }
-    cursor = cursor.nextSibling;
   }
-  return nodes;
+  return true;
 }
-function removeBlockRange(block) {
+function clearContent(block) {
+  const nodes = block.nodes.slice(1, Math.max(1, block.nodes.length - 1));
+  removeNodes(nodes);
+}
+function removeBlockNodes(block) {
   let cursor = block.start;
+  const end = block.end;
   while (cursor) {
     const next = cursor.nextSibling;
     cursor.parentNode?.removeChild(cursor);
-    if (cursor === block.end) {
-      break;
-    }
+    if (cursor === end) break;
     cursor = next;
   }
 }
-function createVersionedSignalAccessor(initialValue) {
-  let current = initialValue;
-  let version = 0;
-  const track2 = signal(version);
-  function accessor(value) {
-    if (arguments.length === 0) {
-      track2();
-      return current;
-    }
-    current = value;
-    version++;
-    track2(version);
-  }
-  return accessor;
-}
-function createKeyedListContainer() {
-  const startMarker = document.createComment("fict:list:start");
-  const endMarker = document.createComment("fict:list:end");
-  const dispose = () => {
-    for (const block of container.blocks.values()) {
-      destroyRoot(block.root);
+
+// src/scope.ts
+function createScope() {
+  let dispose = null;
+  const stop = () => {
+    if (dispose) {
+      dispose();
+      dispose = null;
     }
-    container.blocks.clear();
-    container.nextBlocks.clear();
-    const range = document.createRange();
-    range.setStartBefore(startMarker);
-    range.setEndAfter(endMarker);
-    range.deleteContents();
-    container.currentNodes = [];
-    container.nextNodes = [];
-    container.nextBlocks.clear();
-    container.orderedBlocks.length = 0;
-    container.nextOrderedBlocks.length = 0;
-    container.orderedIndexByKey.clear();
   };
-  const container = {
-    startMarker,
-    endMarker,
-    blocks: /* @__PURE__ */ new Map(),
-    nextBlocks: /* @__PURE__ */ new Map(),
-    currentNodes: [startMarker, endMarker],
-    nextNodes: [],
-    orderedBlocks: [],
-    nextOrderedBlocks: [],
-    orderedIndexByKey: /* @__PURE__ */ new Map(),
-    dispose
+  const run = (fn) => {
+    stop();
+    const { dispose: rootDispose, value } = createRoot(fn);
+    dispose = rootDispose;
+    return value;
   };
-  return container;
+  registerRootCleanup(stop);
+  return { run, stop };
 }
-function createKeyedBlock(key, item, index, render2, needsIndex = true) {
-  const itemSig = createVersionedSignalAccessor(item);
-  const indexSig = needsIndex ? signal(index) : ((next) => {
-    if (arguments.length === 0) return index;
-    index = next;
-    return index;
-  });
-  const root = createRootContext();
-  const prevRoot = pushRoot(root);
-  const prevSub = setActiveSub(void 0);
-  let nodes = [];
-  try {
-    const rendered = render2(itemSig, indexSig, key);
-    if (rendered instanceof Node || Array.isArray(rendered) && rendered.every((n) => n instanceof Node)) {
-      nodes = toNodeArray(rendered);
+function runInScope(flag, fn) {
+  const scope = createScope();
+  const evaluate = () => isReactive(flag) ? flag() : !!flag;
+  createEffect(() => {
+    const enabled = evaluate();
+    if (enabled) {
+      scope.run(fn);
     } else {
-      const element = createElement(rendered);
-      nodes = toNodeArray(element);
+      scope.stop();
     }
-  } finally {
-    setActiveSub(prevSub);
-    popRoot(prevRoot);
-    flushOnMount(root);
-  }
+  });
+  onCleanup(scope.stop);
+}
+
+// src/versioned-signal.ts
+function createVersionedSignal(initialValue, options2) {
+  const equals = options2?.equals ?? Object.is;
+  const value = signal(initialValue);
+  const version = signal(0);
+  const bumpVersion = () => {
+    const next = version() + 1;
+    version(next);
+  };
   return {
-    key,
-    nodes,
-    root,
-    item: itemSig,
-    index: indexSig,
-    rawItem: item,
-    rawIndex: index
+    read: () => {
+      version();
+      return value();
+    },
+    write: (next) => {
+      const prev = value();
+      if (!equals(prev, next)) {
+        value(next);
+        return;
+      }
+      bumpVersion();
+    },
+    force: () => {
+      bumpVersion();
+    },
+    peekVersion: () => version(),
+    peekValue: () => value()
   };
 }
-function getFirstNodeAfter(marker) {
-  return marker.nextSibling;
-}
-function isNodeBetweenMarkers(node, startMarker, endMarker) {
-  let current = startMarker.nextSibling;
-  while (current && current !== endMarker) {
-    if (current === node) return true;
-    current = current.nextSibling;
-  }
-  return false;
-}
-function createKeyedList(getItems, keyFn, renderItem, needsIndex) {
-  const resolvedNeedsIndex = arguments.length >= 4 ? !!needsIndex : renderItem.length > 1;
-  return createFineGrainedKeyedList(getItems, keyFn, renderItem, resolvedNeedsIndex);
+
+// src/ref.ts
+function createRef() {
+  return { current: null };
 }
-function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
-  const container = createKeyedListContainer();
+
+// src/error-boundary.ts
+function ErrorBoundary(props) {
   const fragment = document.createDocumentFragment();
-  fragment.append(container.startMarker, container.endMarker);
-  let pendingItems = null;
-  let disposed = false;
-  const performDiff = () => {
-    if (disposed) return;
-    batch2(() => {
-      const newItems = pendingItems || getItems();
-      pendingItems = null;
-      const oldBlocks = container.blocks;
-      const newBlocks = container.nextBlocks;
-      const prevOrderedBlocks = container.orderedBlocks;
-      const nextOrderedBlocks = container.nextOrderedBlocks;
-      const orderedIndexByKey = container.orderedIndexByKey;
-      newBlocks.clear();
-      nextOrderedBlocks.length = 0;
-      orderedIndexByKey.clear();
-      const endParent = container.endMarker.parentNode;
-      const startParent = container.startMarker.parentNode;
-      const parent = endParent && startParent && endParent === startParent && endParent.isConnected ? endParent : null;
-      if (!parent) {
-        pendingItems = newItems;
-        queueMicrotask(performDiff);
-        return;
-      }
-      if (newItems.length === 0) {
-        if (oldBlocks.size > 0) {
-          for (const block of oldBlocks.values()) {
-            destroyRoot(block.root);
-            removeNodes(block.nodes);
-          }
-        }
-        oldBlocks.clear();
-        newBlocks.clear();
-        prevOrderedBlocks.length = 0;
-        nextOrderedBlocks.length = 0;
-        orderedIndexByKey.clear();
-        container.currentNodes.length = 0;
-        container.currentNodes.push(container.startMarker, container.endMarker);
-        container.nextNodes.length = 0;
-        return;
+  const marker = document.createComment("fict:error-boundary");
+  fragment.appendChild(marker);
+  const currentView = signal(props.children ?? null);
+  const hostRoot = getCurrentRoot();
+  let cleanup;
+  let activeNodes = [];
+  let renderingFallback = false;
+  const toView = (err) => {
+    if (err != null) {
+      return typeof props.fallback === "function" ? props.fallback(err) : props.fallback;
+    }
+    return props.children ?? null;
+  };
+  const renderValue = (value) => {
+    if (cleanup) {
+      cleanup();
+      cleanup = void 0;
+    }
+    if (activeNodes.length) {
+      removeNodes(activeNodes);
+      activeNodes = [];
+    }
+    if (value == null || value === false) {
+      return;
+    }
+    const root = createRootContext(hostRoot);
+    const prev = pushRoot(root);
+    let nodes = [];
+    try {
+      const output = createElement(value);
+      nodes = toNodeArray(output);
+      const parentNode = marker.parentNode;
+      if (parentNode) {
+        insertNodesBefore(parentNode, nodes, marker);
       }
-      const prevCount = prevOrderedBlocks.length;
-      let appendCandidate = prevCount > 0 && newItems.length >= prevCount;
-      const appendedBlocks = [];
-      newItems.forEach((item, index) => {
-        const key = keyFn(item, index);
-        const existed = oldBlocks.has(key);
-        let block = oldBlocks.get(key);
-        if (block) {
-          if (block.rawItem !== item) {
-            block.rawItem = item;
-            block.item(item);
-          }
-          if (needsIndex && block.rawIndex !== index) {
-            block.rawIndex = index;
-            block.index(index);
-          }
-        }
-        const existingBlock = newBlocks.get(key);
-        if (existingBlock && existingBlock !== block) {
-          destroyRoot(existingBlock.root);
-          removeNodes(existingBlock.nodes);
-        }
-        if (block) {
-          newBlocks.set(key, block);
-          oldBlocks.delete(key);
-        } else {
-          const existingBlock2 = newBlocks.get(key);
-          if (existingBlock2) {
-            destroyRoot(existingBlock2.root);
-            removeNodes(existingBlock2.nodes);
-          }
-          block = createKeyedBlock(key, item, index, renderItem, needsIndex);
-        }
-        const resolvedBlock = block;
-        newBlocks.set(key, resolvedBlock);
-        const position = orderedIndexByKey.get(key);
-        if (position !== void 0) {
-          appendCandidate = false;
-        }
-        if (appendCandidate) {
-          if (index < prevCount) {
-            if (!prevOrderedBlocks[index] || prevOrderedBlocks[index].key !== key) {
-              appendCandidate = false;
-            }
-          } else if (existed) {
-            appendCandidate = false;
-          }
-        }
-        if (position !== void 0) {
-          const prior = nextOrderedBlocks[position];
-          if (prior && prior !== resolvedBlock) {
-            destroyRoot(prior.root);
-            removeNodes(prior.nodes);
-          }
-          nextOrderedBlocks[position] = resolvedBlock;
-        } else {
-          orderedIndexByKey.set(key, nextOrderedBlocks.length);
-          nextOrderedBlocks.push(resolvedBlock);
-        }
-        if (appendCandidate && index >= prevCount) {
-          appendedBlocks.push(resolvedBlock);
-        }
-      });
-      const canAppend = appendCandidate && prevCount > 0 && newItems.length > prevCount && oldBlocks.size === 0 && appendedBlocks.length > 0;
-      if (canAppend) {
-        const appendedNodes = [];
-        for (const block of appendedBlocks) {
-          for (let i = 0; i < block.nodes.length; i++) {
-            appendedNodes.push(block.nodes[i]);
-          }
-        }
-        if (appendedNodes.length > 0) {
-          insertNodesBefore(parent, appendedNodes, container.endMarker);
-          const currentNodes = container.currentNodes;
-          currentNodes.pop();
-          for (let i = 0; i < appendedNodes.length; i++) {
-            currentNodes.push(appendedNodes[i]);
-          }
-          currentNodes.push(container.endMarker);
-        }
-        container.blocks = newBlocks;
-        container.nextBlocks = oldBlocks;
-        container.orderedBlocks = nextOrderedBlocks;
-        container.nextOrderedBlocks = prevOrderedBlocks;
-        return;
+    } catch (err) {
+      popRoot(prev);
+      flushOnMount(root);
+      destroyRoot(root);
+      if (renderingFallback) {
+        throw err;
       }
-      if (oldBlocks.size > 0) {
-        for (const block of oldBlocks.values()) {
-          destroyRoot(block.root);
-          removeNodes(block.nodes);
-        }
-        oldBlocks.clear();
+      renderingFallback = true;
+      try {
+        renderValue(toView(err));
+      } finally {
+        renderingFallback = false;
       }
-      if (newBlocks.size > 0 || container.currentNodes.length > 0) {
-        const prevNodes = container.currentNodes;
-        const nextNodes = container.nextNodes;
-        nextNodes.length = 0;
-        nextNodes.push(container.startMarker);
-        for (let i = 0; i < nextOrderedBlocks.length; i++) {
-          const nodes = nextOrderedBlocks[i].nodes;
-          for (let j = 0; j < nodes.length; j++) {
-            nextNodes.push(nodes[j]);
-          }
-        }
-        nextNodes.push(container.endMarker);
-        reconcileArrays(parent, prevNodes, nextNodes);
-        container.currentNodes = nextNodes;
-        container.nextNodes = prevNodes;
+      props.onError?.(err);
+      return;
+    }
+    popRoot(prev);
+    flushOnMount(root);
+    cleanup = () => {
+      destroyRoot(root);
+      removeNodes(nodes);
+    };
+    activeNodes = nodes;
+  };
+  createEffect(() => {
+    const value = currentView();
+    renderValue(value);
+  });
+  registerErrorHandler((err) => {
+    renderValue(toView(err));
+    props.onError?.(err);
+    return true;
+  });
+  if (props.resetKeys !== void 0) {
+    const isGetter = typeof props.resetKeys === "function" && props.resetKeys.length === 0;
+    const getter = isGetter ? props.resetKeys : void 0;
+    let prev = isGetter ? getter() : props.resetKeys;
+    createEffect(() => {
+      const next = getter ? getter() : props.resetKeys;
+      if (prev !== next) {
+        prev = next;
+        renderValue(toView(null));
       }
-      container.blocks = newBlocks;
-      container.nextBlocks = oldBlocks;
-      container.orderedBlocks = nextOrderedBlocks;
-      container.nextOrderedBlocks = prevOrderedBlocks;
     });
-  };
-  const effectDispose = createRenderEffect(performDiff);
+  }
+  return fragment;
+}
+
+// src/suspense.ts
+function createSuspenseToken() {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
   return {
-    marker: fragment,
-    startMarker: container.startMarker,
-    endMarker: container.endMarker,
-    // Flush pending items - call after markers are inserted into DOM
-    flush: () => {
-      if (pendingItems !== null) {
-        performDiff();
-      }
+    token: {
+      then: promise.then.bind(promise)
     },
-    dispose: () => {
-      disposed = true;
-      effectDispose?.();
-      container.dispose();
+    resolve,
+    reject
+  };
+}
+var isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+function Suspense(props) {
+  const currentView = signal(props.children ?? null);
+  const pending = signal(0);
+  let resolvedOnce = false;
+  let epoch = 0;
+  const hostRoot = getCurrentRoot();
+  const toFallback = (err) => typeof props.fallback === "function" ? props.fallback(err) : props.fallback;
+  const switchView = (view) => {
+    currentView(view);
+    renderView(view);
+  };
+  const renderView = (view) => {
+    if (cleanup) {
+      cleanup();
+      cleanup = void 0;
+    }
+    if (activeNodes.length) {
+      removeNodes(activeNodes);
+      activeNodes = [];
     }
+    if (view == null || view === false) {
+      return;
+    }
+    const root = createRootContext(hostRoot);
+    const prev = pushRoot(root);
+    let nodes = [];
+    try {
+      const output = createElement(view);
+      nodes = toNodeArray(output);
+      const suspendedAttempt = nodes.length > 0 && nodes.every((node) => node instanceof Comment && node.data === "fict:suspend");
+      if (suspendedAttempt) {
+        popRoot(prev);
+        destroyRoot(root);
+        return;
+      }
+      const parentNode = marker.parentNode;
+      if (parentNode) {
+        insertNodesBefore(parentNode, nodes, marker);
+      }
+    } catch (err) {
+      popRoot(prev);
+      flushOnMount(root);
+      destroyRoot(root);
+      handleError(err, { source: "render" });
+      return;
+    }
+    popRoot(prev);
+    flushOnMount(root);
+    cleanup = () => {
+      destroyRoot(root);
+      removeNodes(nodes);
+    };
+    activeNodes = nodes;
   };
+  const fragment = document.createDocumentFragment();
+  const marker = document.createComment("fict:suspense");
+  fragment.appendChild(marker);
+  let cleanup;
+  let activeNodes = [];
+  const onResolveMaybe = () => {
+    if (!resolvedOnce) {
+      resolvedOnce = true;
+      props.onResolve?.();
+    }
+  };
+  registerSuspenseHandler((token) => {
+    const tokenEpoch = epoch;
+    pending(pending() + 1);
+    switchView(toFallback());
+    const thenable = token.then ? token : isThenable(token) ? token : null;
+    if (thenable) {
+      thenable.then(
+        () => {
+          if (epoch !== tokenEpoch) return;
+          pending(Math.max(0, pending() - 1));
+          if (pending() === 0) {
+            switchView(props.children ?? null);
+            onResolveMaybe();
+          }
+        },
+        (err) => {
+          if (epoch !== tokenEpoch) return;
+          pending(Math.max(0, pending() - 1));
+          props.onReject?.(err);
+          handleError(err, { source: "render" }, hostRoot);
+        }
+      );
+      return true;
+    }
+    return false;
+  });
+  createEffect(() => {
+    renderView(currentView());
+  });
+  if (props.resetKeys !== void 0) {
+    const isGetter = typeof props.resetKeys === "function" && props.resetKeys.length === 0;
+    const getter = isGetter ? props.resetKeys : void 0;
+    let prev = isGetter ? getter() : props.resetKeys;
+    createEffect(() => {
+      const next = getter ? getter() : props.resetKeys;
+      if (prev !== next) {
+        prev = next;
+        epoch++;
+        pending(0);
+        switchView(props.children ?? null);
+      }
+    });
+  }
+  return fragment;
 }
 export {
   $effect,