@fictjs/runtime 0.0.7 → 0.0.9

package/dist/index.js

@@ -887,6 +887,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);
@@ -914,20 +915,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;
     }
@@ -950,7 +972,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();
@@ -960,7 +983,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));
+      }
     }
   }
 }
@@ -1568,2614 +1595,2545 @@ 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);
-      }
-      const proto = getPrimitivePrototype(value);
-      return proto ? Object.getOwnPropertyDescriptor(proto, prop) || void 0 : 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;
+    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;
+            }
+          };
+        }
       }
-    });
-  } else {
-    text.data = formatTextValue(value);
-  }
-  return text;
-}
-function bindText(textNode, getValue) {
-  return createRenderEffect(() => {
-    const value = formatTextValue(getValue());
-    if (textNode.data !== value) {
-      textNode.data = value;
+      return void 0;
     }
   });
 }
-function formatTextValue(value) {
-  if (value == null || value === false) {
-    return "";
-  }
-  return String(value);
+function useProp(getter) {
+  return __fictProp(createMemo(getter));
 }
-function createAttributeBinding(el, key, value, setter) {
-  if (isReactive(value)) {
-    createRenderEffect(() => {
-      setter(el, key, value());
-    });
-  } else {
-    setter(el, key, value);
+
+// src/transition.ts
+function startTransition(fn) {
+  const prev = setTransitionContext(true);
+  try {
+    fn();
+  } finally {
+    setTransitionContext(prev);
+    scheduleFlush();
   }
 }
-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));
-    }
-  });
+function useTransition() {
+  const pending = signal(false);
+  const start = (fn) => {
+    pending(true);
+    startTransition(() => {
+      try {
+        fn();
+      } finally {
+        pending(false);
+      }
+    });
+  };
+  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;
+    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 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;
+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;
     }
-  };
-  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;
+    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);
       }
-    };
-    registerRootCleanup(nullifyCleanup);
-    return () => {
-      cleanup2();
-      nullifyCleanup();
-    };
-  }
-  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;
-    });
   }
-  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);
+
+// 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");
     }
-  }
-  for (const prop in props) {
-    if (prop === "children") {
-      if (!skipChildren) {
-        prevProps.children = props.children;
+    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;
       }
-      continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
+    anchor = node;
   }
 }
-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);
+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 (value === prev) return prev;
-  if (prop === "ref") {
-    if (!skipRef && typeof value === "function") {
-      value(node);
+  removeBlockRange(block);
+}
+function collectBlockNodes(block) {
+  const nodes = [];
+  let cursor = block.start;
+  while (cursor) {
+    nodes.push(cursor);
+    if (cursor === block.end) {
+      break;
     }
-    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 (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;
+    cursor = cursor.nextSibling;
   }
-  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 (shouldDelegate || value) {
-      addEventListener(node, eventName, value, shouldDelegate);
-      if (shouldDelegate) delegateEvents([eventName]);
+  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;
+}
+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);
   }
-  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;
-    }
-  }
-  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;
-        }
-      } else {
-        block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn);
-      }
-      newNodeMap.set(key, block);
-      blocks.push(block);
-    }
-    for (const [key, managed] of nodeMap) {
-      if (!newNodeMap.has(key)) {
-        destroyRoot(managed.root);
-        removeBlockNodes(managed);
-      }
-    }
-    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];
-      }
-    }
-    nodeMap.clear();
-    for (const [k, v] of newNodeMap) {
-      nodeMap.set(k, v);
-    }
+  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 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;
+      }
+      if (oldBlocks.size > 0) {
+        for (const block of oldBlocks.values()) {
+          destroyRoot(block.root);
+          removeNodes(block.nodes);
+        }
+        oldBlocks.clear();
+      }
+      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;
-      }
-      throw err;
-    } finally {
-      popRoot(prev);
-      if (!handledError) {
-        flushOnMount(root);
-        currentRoot2 = root;
-      } else {
-        currentRoot2 = null;
+      } else if (result && typeof result.handleEvent === "function") {
+        result.handleEvent.call(result, event);
       }
+    } else if (fn && typeof fn.handleEvent === "function") {
+      fn.handleEvent.call(fn, event);
     }
-  });
-  const portalDispose = () => {
-    dispose();
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-    }
-    if (currentNodes.length > 0) {
-      removeNodes(currentNodes);
-    }
-    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;
+function bindClass(el, getValue) {
+  let prev = {};
+  return createRenderEffect(() => {
+    const next = getValue();
+    prev = applyClass(el, next, prev);
+  });
+}
+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);
   }
-  if (output instanceof Text) {
-    el.textContent = output.data;
-    return true;
+}
+function applyClass(el, value, prev) {
+  const prevState = prev && typeof prev === "object" ? prev : {};
+  if (typeof value === "string") {
+    el.className = value;
+    return {};
   }
-  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 (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];
+    }
+    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;
   }
-  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;
+  if (!value) {
+    for (const key of Object.keys(prevState)) {
+      if (key && key !== "undefined") {
+        toggleClassKey(el, key, false);
       }
-    } else if (output.nodeType === Node.TEXT_NODE) {
-      el.textContent = output.data;
-      return true;
     }
+    return {};
   }
-  return false;
-}
-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;
+  return prevState;
 }
-function isFragmentVNode(value) {
-  return value != null && typeof value === "object" && !(value instanceof Node) && value.type === Fragment;
+function classList(node, value, prev = {}) {
+  return applyClass(node, value, prev);
 }
-function normalizeChildren(children, result = []) {
-  if (children === void 0) {
-    return result;
+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;
   }
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      normalizeChildren(child, result);
+  let currentNodes = [];
+  let currentText = null;
+  let currentRoot2 = null;
+  const clearCurrentNodes = () => {
+    if (currentNodes.length > 0) {
+      removeNodes(currentNodes);
+      currentNodes = [];
     }
-    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; i < normalized.length; i++) {
-    if (!patchNode(nodes[i], normalized[i])) {
-      return false;
+  };
+  const setTextNode = (textValue, shouldInsert, parentNode) => {
+    if (!currentText) {
+      currentText = document.createTextNode(textValue);
+    } else if (currentText.data !== textValue) {
+      currentText.data = textValue;
     }
-  }
-  return true;
-}
-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 === end) break;
-    cursor = next;
-  }
-}
-function bumpBlockVersion(block) {
-  block.version(block.version() + 1);
-}
-
-// src/scope.ts
-function createScope() {
-  let dispose = null;
-  const stop = () => {
-    if (dispose) {
-      dispose();
-      dispose = null;
+    if (!shouldInsert) {
+      clearCurrentNodes();
+      return;
     }
+    if (currentNodes.length === 1 && currentNodes[0] === currentText) {
+      return;
+    }
+    clearCurrentNodes();
+    insertNodesBefore(parentNode, [currentText], marker);
+    currentNodes = [currentText];
   };
-  const run = (fn) => {
-    stop();
-    const { dispose: rootDispose, value } = createRoot(fn);
-    dispose = rootDispose;
-    return value;
-  };
-  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;
+    }
+    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));
+      }
+      nodes = toNodeArray(newNode);
+      if (parentNode) {
+        insertNodesBefore(parentNode, nodes, marker);
+      }
+    } finally {
+      popRoot(prev);
+      flushOnMount(root);
     }
+    currentRoot2 = root;
+    currentNodes = nodes;
   });
-  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();
+  return () => {
+    dispose();
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+      currentRoot2 = null;
+    }
+    clearCurrentNodes();
+    if (ownsMarker) {
+      marker.parentNode?.removeChild(marker);
+    }
+  };
 }
-function __fictResetContext() {
-  ctxStack.length = 0;
+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 {
+    marker,
+    dispose: () => {
+      dispose();
+      marker.parentNode?.removeChild(marker);
+    }
+  };
 }
-function __fictUseSignal(ctx, initial, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = signal(initial);
+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 ctx.slots[index];
 }
-function __fictUseMemo(ctx, fn, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createMemo(fn);
+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 ctx.slots[index];
 }
-function __fictUseEffect(ctx, fn, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createEffect(fn);
+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);
+      }
+      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 __fictRender(ctx, fn) {
-  ctxStack.push(ctx);
-  ctx.cursor = 0;
-  try {
-    return fn();
-  } finally {
-    ctxStack.pop();
+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);
   }
 }
-
-// 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);
+function bindEvent(el, eventName, handler, options2) {
+  if (handler == null) return () => {
   };
-  return {
-    read: () => {
-      version();
-      return value();
-    },
-    write: (next) => {
-      const prev = value();
-      if (!equals(prev, next)) {
-        value(next);
+  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;
+    };
+  }
+  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;
       }
-      bumpVersion();
-    },
-    force: () => {
-      bumpVersion();
-    },
-    peekVersion: () => version(),
-    peekValue: () => value()
+      throw err;
+    }
   };
+  el.addEventListener(eventName, wrapped, options2);
+  const cleanup = () => el.removeEventListener(eventName, wrapped, options2);
+  registerRootCleanup(cleanup);
+  return cleanup;
 }
-
-// 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);
+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 getter;
-}
-function isPropGetter(value) {
-  return typeof value === "function" && propGetters.has(value);
+  const cleanup = () => {
+    const refValue = getRef();
+    if (refValue && typeof refValue === "object" && "current" in refValue) {
+      refValue.current = null;
+    }
+  };
+  registerRootCleanup(cleanup);
+  return cleanup;
 }
-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;
+function spread(node, props = {}, isSVG = false, skipChildren = false) {
+  const prevProps = {};
+  if (!skipChildren && "children" in props) {
+    createRenderEffect(() => {
+      prevProps.children = props.children;
+    });
   }
-  const proxy = new Proxy(props, {
-    get(target, prop, receiver) {
-      const value = Reflect.get(target, prop, receiver);
-      if (isPropGetter(value)) {
-        return value();
-      }
-      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);
+  createRenderEffect(() => {
+    if (typeof props.ref === "function") {
+      ;
+      props.ref(node);
     }
   });
-  rawToProxy.set(props, proxy);
-  proxyToRaw.set(proxy, props);
-  return proxy;
+  createRenderEffect(() => {
+    assign(node, props, isSVG, true, prevProps, true);
+  });
+  return prevProps;
 }
-function unwrapProps(props) {
-  if (!props || typeof props !== "object") {
-    return props;
+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);
+    }
   }
-  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];
+  for (const prop in props) {
+    if (prop === "children") {
+      if (!skipChildren) {
+        prevProps.children = props.children;
+      }
+      continue;
+    }
+    const value = props[prop];
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
   }
-  return createPropsProxy(out);
 }
-function mergeProps(...sources) {
-  const validSources = sources.filter(
-    (s) => s != null && (typeof s === "object" || typeof s === "function")
-  );
-  if (validSources.length === 0) {
-    return {};
+function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
+  if (prop === "style") {
+    applyStyle(node, value, prev);
+    return value;
   }
-  if (validSources.length === 1 && typeof validSources[0] === "object") {
-    return validSources[0];
+  if (prop === "classList") {
+    return applyClass(node, value, prev);
   }
-  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);
-          }
-        }
-      }
-      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 (value === prev) return prev;
+  if (prop === "ref") {
+    if (!skipRef && typeof value === "function") {
+      value(node);
     }
-  });
-}
-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();
+    return value;
   }
-}
-function useTransition() {
-  const pending = signal(false);
-  const start = (fn) => {
-    pending(true);
-    startTransition(() => {
-      try {
-        fn();
-      } finally {
-        pending(false);
-      }
-    });
-  };
-  return [() => pending(), start];
-}
-function useDeferredValue(getValue) {
-  const deferredValue = signal(getValue());
-  createEffect(() => {
-    const newValue = getValue();
-    const currentDeferred = untrack(() => deferredValue());
-    if (currentDeferred !== newValue) {
-      startTransition(() => {
-        deferredValue(newValue);
-      });
-    }
-  });
-  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);
-  }
-  container.replaceChildren(dom);
-  container.setAttribute("data-fict-fine-grained", "1");
-  flushOnMount(root);
-  const teardown = () => {
-    destroyRoot(root);
-    container.innerHTML = "";
-  };
-  return teardown;
-}
-function createElement(node) {
-  if (node instanceof Node) {
-    return node;
+  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 === null || node === void 0 || node === false) {
-    return document.createTextNode("");
+  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 (typeof node === "object" && node !== null && !(node instanceof Node)) {
-    if ("marker" in node) {
-      return createElement(node.marker);
+  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);
     }
-    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));
+    if (shouldDelegate || value) {
+      addEventListener(node, eventName, value, shouldDelegate);
+      if (shouldDelegate) delegateEvents([eventName]);
     }
+    return value;
   }
-  if (Array.isArray(node)) {
-    const frag = document.createDocumentFragment();
-    for (const child of node) {
-      appendChildNode(frag, child);
-    }
-    return frag;
+  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 node === "string" || typeof node === "number") {
-    return document.createTextNode(String(node));
+  if (prop.slice(0, 5) === "bool:") {
+    if (value) node.setAttribute(prop.slice(5), "");
+    else node.removeAttribute(prop.slice(5));
+    return value;
   }
-  if (typeof node === "boolean") {
-    return document.createTextNode("");
+  if (prop.slice(0, 5) === "prop:") {
+    node[prop.slice(5)] = value;
+    return value;
   }
-  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");
+  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[toPropertyName2(propName)] = value;
+      } else {
+        node[propName] = value;
       }
-      handleError(err, { source: "render", componentName: vnode.type.name });
-      throw err;
+      return value;
     }
   }
-  if (vnode.type === Fragment) {
-    const frag = document.createDocumentFragment();
-    const children = vnode.props?.children;
-    appendChildren(frag, children);
-    return frag;
-  }
-  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 (isMathML) {
-      return t.firstChild;
+  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;
     }
-    return t.content.firstChild;
-  };
-  const fn = isImportNode ? () => untrack2(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
-  fn.cloneNode = fn;
-  return fn;
+  }
+  const attrName = Aliases[prop] || prop;
+  if (value == null) node.removeAttribute(attrName);
+  else node.setAttribute(attrName, String(value));
+  return value;
 }
-function isBindingHandle(node) {
-  return node !== null && typeof node === "object" && "marker" in node && "dispose" in node && typeof node.dispose === "function";
+function toPropertyName2(name) {
+  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
 }
-function appendChildNode(parent, child) {
-  if (child === null || child === void 0 || child === false) {
-    return;
-  }
-  if (isBindingHandle(child)) {
-    appendChildNode(parent, child.marker);
-    child.flush?.();
-    return;
-  }
-  if (typeof child === "function" && child.length === 0) {
-    const childGetter = child;
-    createChildBinding(parent, childGetter, createElement);
-    return;
-  }
-  if (Array.isArray(child)) {
-    for (const item of child) {
-      appendChildNode(parent, item);
-    }
-    return;
-  }
-  let domNode;
-  if (typeof child !== "object" || child === null) {
-    domNode = document.createTextNode(String(child ?? ""));
-  } else {
-    domNode = createElement(child);
-  }
-  if (domNode.nodeType === 11) {
-    const children = Array.from(domNode.childNodes);
-    for (const node of children) {
-      appendChildNode(parent, node);
+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;
     }
-    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);
+    pendingRender = false;
+    if (lastCondition === cond && currentNodes.length > 0) {
       return;
     }
-    throw e;
-  }
-}
-function appendChildren(parent, children) {
-  if (children === void 0) return;
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      appendChildren(parent, child);
+    if (lastCondition === cond && lastCondition === false && renderFalse === void 0) {
+      return;
     }
-    return;
-  }
-  appendChildNode(parent, children);
-}
-function applyRef(el, value) {
-  if (typeof value === "function") {
-    const refFn = value;
-    refFn(el);
-    if (getCurrentRoot()) {
-      registerRootCleanup(() => {
-        refFn(null);
-      });
+    lastCondition = cond;
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+      currentRoot2 = null;
     }
-  } else if (value && typeof value === "object" && "current" in value) {
-    const refObj = value;
-    refObj.current = el;
-    if (getCurrentRoot()) {
-      registerRootCleanup(() => {
-        refObj.current = null;
-      });
+    removeNodes(currentNodes);
+    currentNodes = [];
+    const render2 = cond ? renderTrue : renderFalse;
+    if (!render2) {
+      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;
-    }
-    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;
+    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);
+  }
+  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 {
+            el.setAttribute(key, String(value));
+          }
         }
-        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++);
-        }
+      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;
       }
-      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++]);
+      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;
           }
-        } else {
-          aStart++;
         }
-      } else {
-        const nodeToRemove = a[aStart++];
-        nodeToRemove.parentNode?.removeChild(nodeToRemove);
       }
+      return false;
     }
   }
-}
-
-// 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);
-      }
-      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;
+  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 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;
+  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);
       }
-      if (oldBlocks.size > 0) {
-        for (const block of oldBlocks.values()) {
-          destroyRoot(block.root);
-          removeNodes(block.nodes);
-        }
-        oldBlocks.clear();
+    } catch (err) {
+      popRoot(prev);
+      flushOnMount(root);
+      destroyRoot(root);
+      if (renderingFallback) {
+        throw err;
       }
-      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;
+      renderingFallback = true;
+      try {
+        renderValue(toView(err));
+      } finally {
+        renderingFallback = false;
       }
-      container.blocks = newBlocks;
-      container.nextBlocks = oldBlocks;
-      container.orderedBlocks = nextOrderedBlocks;
-      container.nextOrderedBlocks = prevOrderedBlocks;
-    });
+      props.onError?.(err);
+      return;
+    }
+    popRoot(prev);
+    flushOnMount(root);
+    cleanup = () => {
+      destroyRoot(root);
+      removeNodes(nodes);
+    };
+    activeNodes = nodes;
   };
-  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) {
-        performDiff();
+  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));
       }
+    });
+  }
+  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)
     },
-    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, $memo, $state, Aliases, BooleanAttributes, ChildProperties, DelegatedEvents, ErrorBoundary, Fragment, Properties, SVGElements, SVGNamespace, Suspense, UnitlessStyles, __fictPopContext, __fictProp, __fictPropsRest, __fictPushContext, __fictRender, __fictResetContext, __fictUseContext, __fictUseEffect, __fictUseMemo, __fictUseSignal, addEventListener, assign, batch2 as batch, bindAttribute, bindClass, bindEvent, bindProperty, bindRef, bindStyle, bindText, callEventHandler, classList, clearDelegatedEvents, createAttributeBinding, createChildBinding, createClassBinding, createConditional, createEffect, createElement, createKeyedBlock, createKeyedList, createKeyedListContainer, createList, createMemo, createPortal, createPropsProxy, createRef, createRenderEffect, createRoot, createScope, createSelector, createShow, signal as createSignal, createStore, createStyleBinding, createSuspenseToken, createTextBinding, createVersionedSignal, delegateEvents, destroyMarkerBlock, effectScope, getDevtoolsHook, getFirstNodeAfter, getPropAlias, insert, insertNodesBefore, isNodeBetweenMarkers, isReactive, mergeProps, moveMarkerBlock, moveNodesBefore, onCleanup, onDestroy, onMount, __fictProp as prop, reconcileArrays, removeNodes, render, runInScope, setCycleProtectionOptions, spread, startTransition, template, toNodeArray, untrack2 as untrack, unwrap2 as unwrap, unwrapPrimitive, useDeferredValue, useProp, useTransition };