@fictjs/runtime 0.0.8 → 0.0.10

package/dist/slim.js

@@ -764,10 +764,17 @@ function effectScopeOper() {
 }
 function batch(fn) {
   ++batchDepth;
+  let hasError = false;
   try {
     return fn();
+  } catch (e) {
+    hasError = true;
+    throw e;
   } finally {
-    if (--batchDepth === 0) flush();
+    --batchDepth;
+    if (!hasError && batchDepth === 0) {
+      flush();
+    }
   }
 }
 function setActiveSub(sub) {
@@ -818,7 +825,7 @@ function effectRunDevtools(node) {
 function createSelector(source, equalityFn = (a, b) => a === b) {
   let current = source();
   const observers = /* @__PURE__ */ new Map();
-  effect(() => {
+  const dispose = effect(() => {
     const next = source();
     if (equalityFn(current, next)) return;
     const prevSig = observers.get(current);
@@ -827,6 +834,10 @@ function createSelector(source, equalityFn = (a, b) => a === b) {
     if (nextSig) nextSig(true);
     current = next;
   });
+  registerRootCleanup(() => {
+    dispose();
+    observers.clear();
+  });
   return (key) => {
     let sig = observers.get(key);
     if (!sig) {
@@ -887,7 +898,8 @@ function createRenderEffect(fn) {
         cleanup = maybeCleanup;
       }
     } catch (err) {
-      if (handleError(err, { source: "effect" }, rootForError)) {
+      const handled = handleError(err, { source: "effect" }, rootForError);
+      if (handled) {
         return;
       }
       throw err;
@@ -1115,6 +1127,85 @@ var DelegatedEvents = /* @__PURE__ */ new Set([
   "touchmove",
   "touchstart"
 ]);
+var SVGElements = /* @__PURE__ */ new Set([
+  "altGlyph",
+  "altGlyphDef",
+  "altGlyphItem",
+  "animate",
+  "animateColor",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "color-profile",
+  "cursor",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "font",
+  "font-face",
+  "font-face-format",
+  "font-face-name",
+  "font-face-src",
+  "font-face-uri",
+  "foreignObject",
+  "g",
+  "glyph",
+  "glyphRef",
+  "hkern",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "missing-glyph",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "tref",
+  "tspan",
+  "use",
+  "view",
+  "vkern"
+]);
 var SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
@@ -1200,2213 +1291,2257 @@ var UnitlessStyles = /* @__PURE__ */ new Set([
 // src/jsx.ts
 var Fragment = Symbol("Fragment");
 
-// src/node-ops.ts
-function toNodeArray(node) {
-  try {
-    if (Array.isArray(node)) {
-      let allNodes = true;
-      for (const item of node) {
-        let isItemNode = false;
-        try {
-          isItemNode = item instanceof Node;
-        } catch {
-          isItemNode = false;
-        }
-        if (!isItemNode) {
-          allNodes = false;
-          break;
-        }
-      }
-      if (allNodes) {
-        return node;
-      }
-      const result = [];
-      for (const item of node) {
-        result.push(...toNodeArray(item));
-      }
-      return result;
-    }
-    if (node === null || node === void 0 || node === false) {
-      return [];
-    }
-  } catch {
-    return [];
-  }
-  let isNode = false;
-  try {
-    isNode = node instanceof Node;
-  } catch {
-    isNode = false;
-  }
-  if (isNode) {
-    try {
-      if (node instanceof DocumentFragment) {
-        return Array.from(node.childNodes);
-      }
-    } catch {
-    }
-    return [node];
-  }
-  try {
-    if (typeof node === "object" && node !== null && "marker" in node) {
-      return toNodeArray(node.marker);
-    }
-  } catch {
+// src/hooks.ts
+var ctxStack = [];
+function assertRenderContext(ctx, hookName) {
+  if (!ctx.rendering) {
+    throw new Error(`${hookName} can only be used during render execution`);
   }
-  try {
-    return [document.createTextNode(String(node))];
-  } catch {
-    return [document.createTextNode("")];
+}
+function __fictUseContext() {
+  if (ctxStack.length === 0) {
+    const ctx2 = { slots: [], cursor: 0, rendering: true };
+    ctxStack.push(ctx2);
+    return ctx2;
   }
+  const ctx = ctxStack[ctxStack.length - 1];
+  ctx.cursor = 0;
+  ctx.rendering = true;
+  return ctx;
 }
-function insertNodesBefore(parent, nodes, anchor) {
-  if (nodes.length === 0) return;
-  if (nodes.length === 1) {
-    const node = nodes[0];
-    if (node === void 0 || node === null) return;
-    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);
-          return;
-        } catch {
-        }
-      }
-      throw e;
-    }
-    return;
+function __fictPushContext() {
+  const ctx = { slots: [], cursor: 0 };
+  ctxStack.push(ctx);
+  return ctx;
+}
+function __fictPopContext() {
+  ctxStack.pop();
+}
+function __fictResetContext() {
+  ctxStack.length = 0;
+}
+function __fictUseSignal(ctx, initial, slot) {
+  assertRenderContext(ctx, "__fictUseSignal");
+  const index = slot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = signal(initial);
   }
-  const doc = parent.ownerDocument;
-  if (doc) {
-    const frag = doc.createDocumentFragment();
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      if (node === void 0 || node === null) continue;
-      if (node.nodeType === 11) {
-        const childrenArr = Array.from(node.childNodes);
-        for (let j = 0; j < childrenArr.length; j++) {
-          frag.appendChild(childrenArr[j]);
-        }
-      } else {
-        if (node.ownerDocument !== doc) {
-          doc.adoptNode(node);
-        }
-        frag.appendChild(node);
-      }
-    }
-    parent.insertBefore(frag, anchor);
-    return;
+  return ctx.slots[index];
+}
+function __fictUseMemo(ctx, fn, slot) {
+  assertRenderContext(ctx, "__fictUseMemo");
+  const index = slot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = createMemo(fn);
   }
-  const insertSingle = (nodeToInsert, anchorNode) => {
-    if (nodeToInsert.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
-      parent.ownerDocument.adoptNode(nodeToInsert);
-    }
-    try {
-      parent.insertBefore(nodeToInsert, anchorNode);
-      return nodeToInsert;
-    } catch (e) {
-      if (parent.ownerDocument) {
-        try {
-          const clone = parent.ownerDocument.importNode(nodeToInsert, true);
-          parent.insertBefore(clone, anchorNode);
-          return clone;
-        } catch {
-        }
-      }
-      throw e;
-    }
-  };
-  for (let i = nodes.length - 1; i >= 0; i--) {
-    const node = nodes[i];
-    if (node === void 0 || node === null) continue;
-    const isFrag = node.nodeType === 11;
-    if (isFrag) {
-      const childrenArr = Array.from(node.childNodes);
-      for (let j = childrenArr.length - 1; j >= 0; j--) {
-        const child = childrenArr[j];
-        anchor = insertSingle(child, anchor);
-      }
-    } else {
-      anchor = insertSingle(node, anchor);
-    }
+  return ctx.slots[index];
+}
+function __fictUseEffect(ctx, fn, slot) {
+  assertRenderContext(ctx, "__fictUseEffect");
+  const index = slot ?? ctx.cursor++;
+  if (!ctx.slots[index]) {
+    ctx.slots[index] = createEffect(fn);
   }
 }
-function removeNodes(nodes) {
-  for (const node of nodes) {
-    node.parentNode?.removeChild(node);
+function __fictRender(ctx, fn) {
+  ctxStack.push(ctx);
+  ctx.cursor = 0;
+  ctx.rendering = true;
+  try {
+    return fn();
+  } finally {
+    ctx.rendering = false;
+    ctxStack.pop();
   }
 }
 
-// src/binding.ts
-function isReactive(value) {
-  return typeof value === "function" && value.length === 0;
+// 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 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);
-      }
-    } else if (fn && typeof fn.handleEvent === "function") {
-      fn.handleEvent.call(fn, event);
-    }
-  };
-  invoke(handler);
+function isPropGetter(value) {
+  return typeof value === "function" && propGetters.has(value);
 }
-var PRIMITIVE_PROXY = Symbol("fict:primitive-proxy");
-var PRIMITIVE_PROXY_RAW_VALUE = Symbol("fict:primitive-proxy:raw-value");
-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;
-    }
-  };
-  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);
-      }
-      const proto = getPrimitivePrototype(value);
-      if (proto && prop in proto) {
-        const descriptor = Reflect.get(proto, prop, value);
-        return typeof descriptor === "function" ? descriptor.bind(value) : descriptor;
-      }
-      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);
+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();
       }
-      return false;
+      return value;
     },
-    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;
+    set(target, prop, value, receiver) {
+      return Reflect.set(target, prop, value, receiver);
     },
-    ownKeys() {
-      const value = read();
-      if (value != null && (typeof value === "object" || typeof value === "function")) {
-        return Reflect.ownKeys(value);
-      }
-      const proto = getPrimitivePrototype(value);
-      return proto ? Reflect.ownKeys(proto) : [];
+    has(target, prop) {
+      return prop in target;
     },
-    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 bindText(textNode, getValue) {
-  return createRenderEffect(() => {
-    const value = formatTextValue(getValue());
-    if (textNode.data !== value) {
-      textNode.data = value;
+    ownKeys(target) {
+      return Reflect.ownKeys(target);
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      return Object.getOwnPropertyDescriptor(target, prop);
     }
   });
+  rawToProxy.set(props, proxy);
+  proxyToRaw.set(proxy, props);
+  return proxy;
 }
-function formatTextValue(value) {
-  if (value == null || value === false) {
-    return "";
+function unwrapProps(props) {
+  if (!props || typeof props !== "object") {
+    return props;
   }
-  return String(value);
+  return proxyToRaw.get(props) ?? props;
 }
-function createAttributeBinding(el, key, value, setter) {
-  if (isReactive(value)) {
-    createRenderEffect(() => {
-      setter(el, key, value());
-    });
-  } else {
-    setter(el, key, value);
+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 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 mergeProps(...sources) {
+  const validSources = sources.filter(
+    (s) => s != null && (typeof s === "object" || typeof s === "function")
+  );
+  if (validSources.length === 0) {
+    return {};
+  }
+  if (validSources.length === 1 && typeof validSources[0] === "object") {
+    return validSources[0];
+  }
+  const resolveSource = (src) => {
+    const value = typeof src === "function" ? src() : src;
+    if (!value || typeof value !== "object") return void 0;
+    return unwrapProps(value);
+  };
+  return new Proxy({}, {
+    get(_, prop) {
+      if (typeof prop === "symbol") {
+        return void 0;
+      }
+      for (let i = validSources.length - 1; i >= 0; i--) {
+        const src = validSources[i];
+        const raw = resolveSource(src);
+        if (!raw || !(prop in raw)) continue;
+        const value = raw[prop];
+        if (typeof src === "function" && !isPropGetter(value)) {
+          return __fictProp(() => {
+            const latest = resolveSource(src);
+            if (!latest || !(prop in latest)) return void 0;
+            return latest[prop];
+          });
+        }
+        return value;
+      }
+      return void 0;
+    },
+    has(_, prop) {
+      for (const src of validSources) {
+        const raw = resolveSource(src);
+        if (raw && prop in raw) {
+          return true;
+        }
+      }
+      return false;
+    },
+    ownKeys() {
+      const keys = /* @__PURE__ */ new Set();
+      for (const src of validSources) {
+        const raw = resolveSource(src);
+        if (raw) {
+          for (const key of Reflect.ownKeys(raw)) {
+            keys.add(key);
+          }
+        }
+      }
+      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;
     }
   });
 }
-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 useProp(getter) {
+  return __fictProp(createMemo(getter));
 }
-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 untrack2(fn) {
+  return untrack(fn);
+}
+
+// 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 bindStyle(el, getValue) {
-  let prev;
-  return createRenderEffect(() => {
-    const next = getValue();
-    applyStyle(el, next, prev);
-    prev = next;
-  });
+function createElement(node) {
+  return createElementWithContext(node, null);
 }
-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);
+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 createElementWithContext(node, namespace) {
+  if (node instanceof Node) {
+    return node;
+  }
+  if (node === null || node === void 0 || node === false) {
+    return document.createTextNode("");
+  }
+  if (typeof node === "object" && node !== null && !(node instanceof Node)) {
+    if ("marker" in node) {
+      const handle = node;
+      if (typeof handle.dispose === "function") {
+        registerRootCleanup(handle.dispose);
+      }
+      if (typeof handle.flush === "function") {
+        const runFlush = () => handle.flush && handle.flush();
+        if (typeof queueMicrotask === "function") {
+          queueMicrotask(runFlush);
+        } else {
+          Promise.resolve().then(runFlush).catch(() => void 0);
         }
       }
+      return createElement(handle.marker);
     }
-    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);
-      }
+    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));
     }
-  } 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 (Array.isArray(node)) {
+    const frag = document.createDocumentFragment();
+    for (const child of node) {
+      appendChildNode(frag, child, namespace);
     }
+    return frag;
   }
-}
-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);
+  if (typeof node === "string" || typeof node === "number") {
+    return document.createTextNode(String(node));
+  }
+  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 };
+        }
+        return Object.getOwnPropertyDescriptor(target, prop);
+      }
     });
-  } else {
-    applyClass(el, value, {});
+    const props = createPropsProxy(baseProps);
+    __fictPushContext();
+    try {
+      const rendered = vnode.type(props);
+      return createElementWithContext(rendered, namespace);
+    } catch (err) {
+      if (handleSuspend(err)) {
+        return document.createComment("fict:suspend");
+      }
+      handleError(err, { source: "render", componentName: vnode.type.name });
+      throw err;
+    } finally {
+      __fictPopContext();
+    }
+  }
+  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 bindClass(el, getValue) {
-  let prev = {};
-  return createRenderEffect(() => {
-    const next = getValue();
-    prev = applyClass(el, next, prev);
-  });
+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;
+    }
+    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 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 isBindingHandle(node) {
+  return node !== null && typeof node === "object" && "marker" in node && "dispose" in node && typeof node.dispose === "function";
 }
-function applyClass(el, value, prev) {
-  const prevState = prev && typeof prev === "object" ? prev : {};
-  if (typeof value === "string") {
-    el.className = value;
-    return {};
+function appendChildNode(parent, child, namespace) {
+  if (child === null || child === void 0 || child === false) {
+    return;
   }
-  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 (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);
     }
-    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;
+  }
+  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 prevState;
+    return;
   }
-  if (!value) {
-    for (const key of Object.keys(prevState)) {
-      if (key && key !== "undefined") {
-        toggleClassKey(el, key, false);
-      }
+  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;
     }
-    return {};
+    throw e;
   }
-  return prevState;
 }
-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;
+function appendChildren(parent, children, namespace) {
+  if (children === void 0) return;
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      appendChildren(parent, child, namespace);
+    }
+    return;
   }
-  let currentNodes = [];
-  let currentText = null;
-  let currentRoot2 = null;
-  const clearCurrentNodes = () => {
-    if (currentNodes.length > 0) {
-      removeNodes(currentNodes);
-      currentNodes = [];
+  appendChildNode(parent, children, namespace);
+}
+function applyRef(el, value) {
+  if (typeof value === "function") {
+    const refFn = value;
+    refFn(el);
+    if (getCurrentRoot()) {
+      registerRootCleanup(() => {
+        refFn(null);
+      });
     }
-  };
-  const setTextNode = (textValue, shouldInsert, parentNode) => {
-    if (!currentText) {
-      currentText = document.createTextNode(textValue);
-    } else if (currentText.data !== textValue) {
-      currentText.data = textValue;
+  } else if (value && typeof value === "object" && "current" in value) {
+    const refObj = value;
+    refObj.current = el;
+    if (getCurrentRoot()) {
+      registerRootCleanup(() => {
+        refObj.current = null;
+      });
     }
-    if (!shouldInsert) {
-      clearCurrentNodes();
-      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 (currentNodes.length === 1 && currentNodes[0] === currentText) {
-      return;
+    if (isEventKey(key)) {
+      bindEvent(
+        el,
+        eventNameFromProp(key),
+        value
+      );
+      continue;
     }
-    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 (key.slice(0, 3) === "on:") {
+      bindEvent(
+        el,
+        key.slice(3),
+        value,
+        false
+        // Non-delegated
+      );
+      continue;
     }
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-      currentRoot2 = null;
+    if (key.slice(0, 10) === "oncapture:") {
+      bindEvent(
+        el,
+        key.slice(10),
+        value,
+        true
+        // Capture
+      );
+      continue;
     }
-    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;
+    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 {
-          newNode = createFn ? createFn(value) : document.createTextNode(String(value));
+          el.innerHTML = htmlValue;
         }
-      } else {
-        newNode = createFn ? createFn(value) : document.createTextNode(String(value));
-      }
-      nodes = toNodeArray(newNode);
-      if (parentNode) {
-        insertNodesBefore(parentNode, nodes, marker);
       }
-    } finally {
-      popRoot(prev);
-      flushOnMount(root);
+      continue;
     }
-    currentRoot2 = root;
-    currentNodes = nodes;
-  });
-  return () => {
-    dispose();
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-      currentRoot2 = null;
+    if (ChildProperties.has(key)) {
+      createAttributeBinding(el, key, value, setProperty);
+      continue;
     }
-    clearCurrentNodes();
-    if (ownsMarker) {
-      marker.parentNode?.removeChild(marker);
+    if (key.slice(0, 5) === "attr:") {
+      createAttributeBinding(el, key.slice(5), value, setAttribute);
+      continue;
     }
-  };
-}
-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);
-      }
+    if (key.slice(0, 5) === "bool:") {
+      createAttributeBinding(el, key.slice(5), value, setBoolAttribute);
+      continue;
     }
-  });
-  return {
-    marker,
-    dispose: () => {
-      dispose();
-      marker.parentNode?.removeChild(marker);
+    if (key.slice(0, 5) === "prop:") {
+      createAttributeBinding(el, key.slice(5), value, setProperty);
+      continue;
     }
-  };
-}
-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);
+    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);
+      }
+      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;
+      }
     }
+    const attrName = Aliases[key] || key;
+    createAttributeBinding(el, attrName, value, setAttribute);
   }
 }
-function clearDelegatedEvents(doc = window.document) {
-  const e = doc[$$EVENTS];
-  if (e) {
-    for (const name of e.keys()) {
-      doc.removeEventListener(name, globalEventHandler);
+function toPropertyName(name) {
+  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
+}
+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);
+      }
     }
-    delete doc[$$EVENTS];
+    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 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 isEventKey(key) {
+  return key.startsWith("on") && key.length > 2 && key[2].toUpperCase() === key[2];
+}
+function eventNameFromProp(key) {
+  return key.slice(2).toLowerCase();
+}
+
+// src/node-ops.ts
+function toNodeArray(node) {
+  try {
+    if (Array.isArray(node)) {
+      let allNodes = true;
+      for (const item of node) {
+        let isItemNode = false;
+        try {
+          isItemNode = item instanceof Node;
+        } catch {
+          isItemNode = false;
+        }
+        if (!isItemNode) {
+          allNodes = false;
+          break;
         }
-        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 (allNodes) {
+        return node;
       }
-      if (node.parentNode === oriCurrentTarget) {
-        break;
+      const result = [];
+      for (const item of node) {
+        result.push(...toNodeArray(item));
       }
+      return result;
     }
-  } else {
-    walkUpTree();
+    if (node === null || node === void 0 || node === false) {
+      return [];
+    }
+  } catch {
+    return [];
   }
-  retarget(oriTarget);
-}
-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;
-    };
+  let isNode = false;
+  try {
+    isNode = node instanceof Node;
+  } catch {
+    isNode = false;
   }
-  const getHandler = isReactive(handler) ? handler : () => handler;
-  const wrapped = (event) => {
+  if (isNode) {
     try {
-      const resolved = getHandler();
-      callEventHandler(resolved, event, el);
-    } catch (err) {
-      if (handleError(err, { source: "event", eventName }, rootRef)) {
-        return;
+      if (node instanceof DocumentFragment) {
+        return Array.from(node.childNodes);
       }
-      throw err;
-    }
-  };
-  el.addEventListener(eventName, wrapped, options2);
-  const cleanup = () => el.removeEventListener(eventName, wrapped, options2);
-  registerRootCleanup(cleanup);
-  return cleanup;
-}
-function bindRef(el, ref) {
-  if (ref == null) return () => {
-  };
-  const getRef = isReactive(ref) ? ref : () => ref;
-  const applyRef2 = (refValue) => {
-    if (refValue == null) return;
-    if (typeof refValue === "function") {
-      refValue(el);
-    } else if (typeof refValue === "object" && "current" in refValue) {
-      refValue.current = el;
+    } catch {
     }
-  };
-  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 [node];
   }
-  const cleanup = () => {
-    const refValue = getRef();
-    if (refValue && typeof refValue === "object" && "current" in refValue) {
-      refValue.current = null;
+  try {
+    if (typeof node === "object" && node !== null && "marker" in node) {
+      return toNodeArray(node.marker);
     }
-  };
-  registerRootCleanup(cleanup);
-  return cleanup;
+  } catch {
+  }
+  try {
+    return [document.createTextNode(String(node))];
+  } catch {
+    return [document.createTextNode("")];
+  }
 }
-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;
+function insertNodesBefore(parent, nodes, anchor) {
+  if (nodes.length === 0) return;
+  if (nodes.length === 1) {
+    const node = nodes[0];
+    if (node === void 0 || node === null) return;
+    if (node.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
+      parent.ownerDocument.adoptNode(node);
     }
-    if (lastCondition === cond && lastCondition === false && renderFalse === void 0) {
-      return;
+    try {
+      parent.insertBefore(node, anchor);
+    } catch (e) {
+      if (parent.ownerDocument) {
+        try {
+          const clone = parent.ownerDocument.importNode(node, true);
+          parent.insertBefore(clone, anchor);
+          return;
+        } catch {
+        }
+      }
+      throw e;
     }
-    lastCondition = cond;
-    if (currentRoot2) {
-      destroyRoot(currentRoot2);
-      currentRoot2 = null;
+    return;
+  }
+  const doc = parent.ownerDocument;
+  if (doc) {
+    const frag = doc.createDocumentFragment();
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node === void 0 || node === null) continue;
+      if (node.nodeType === 11) {
+        const childrenArr = Array.from(node.childNodes);
+        for (let j = 0; j < childrenArr.length; j++) {
+          frag.appendChild(childrenArr[j]);
+        }
+      } else {
+        if (node.ownerDocument !== doc) {
+          doc.adoptNode(node);
+        }
+        frag.appendChild(node);
+      }
     }
-    removeNodes(currentNodes);
-    currentNodes = [];
-    const render2 = cond ? renderTrue : renderFalse;
-    if (!render2) {
-      return;
+    parent.insertBefore(frag, anchor);
+    return;
+  }
+  const insertSingle = (nodeToInsert, anchorNode) => {
+    if (nodeToInsert.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
+      parent.ownerDocument.adoptNode(nodeToInsert);
     }
-    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;
+      parent.insertBefore(nodeToInsert, anchorNode);
+      return nodeToInsert;
+    } catch (e) {
+      if (parent.ownerDocument) {
+        try {
+          const clone = parent.ownerDocument.importNode(nodeToInsert, true);
+          parent.insertBefore(clone, anchorNode);
+          return clone;
+        } catch {
+        }
       }
+      throw e;
     }
   };
-  const dispose = createRenderEffect(runConditional);
-  return {
-    marker: fragment,
-    flush: () => {
-      if (pendingRender) {
-        runConditional();
-      }
-    },
-    dispose: () => {
-      dispose();
-      if (currentRoot2) {
-        destroyRoot(currentRoot2);
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    if (node === void 0 || node === null) continue;
+    const isFrag = node.nodeType === 11;
+    if (isFrag) {
+      const childrenArr = Array.from(node.childNodes);
+      for (let j = childrenArr.length - 1; j >= 0; j--) {
+        const child = childrenArr[j];
+        anchor = insertSingle(child, anchor);
       }
-      removeNodes(currentNodes);
-      currentNodes = [];
-      startMarker.parentNode?.removeChild(startMarker);
-      endMarker.parentNode?.removeChild(endMarker);
+    } else {
+      anchor = insertSingle(node, anchor);
     }
-  };
+  }
 }
-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 nodeMap = /* @__PURE__ */ new Map();
-  let pendingItems = null;
-  const runListUpdate = () => {
-    const arr = items();
-    const parent = startMarker.parentNode;
-    if (!parent) {
-      pendingItems = arr;
-      return;
+function removeNodes(nodes) {
+  for (const node of nodes) {
+    node.parentNode?.removeChild(node);
+  }
+}
+
+// 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;
     }
-    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;
+    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 {
-        block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn);
+        while (bStart < bEnd) {
+          parentNode.insertBefore(b[bStart++], node);
+        }
       }
-      newNodeMap.set(key, block);
-      blocks.push(block);
-    }
-    for (const [key, managed] of nodeMap) {
-      if (!newNodeMap.has(key)) {
-        destroyRoot(managed.root);
-        removeBlockNodes(managed);
+    } else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        const nodeToRemove = a[aStart];
+        if (!map || !map.has(nodeToRemove)) {
+          nodeToRemove.parentNode?.removeChild(nodeToRemove);
+        }
+        aStart++;
       }
-    }
-    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];
+    } 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);
       }
     }
-    nodeMap.clear();
-    for (const [k, v] of newNodeMap) {
-      nodeMap.set(k, v);
+  }
+}
+
+// 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");
     }
-  };
-  const dispose = createRenderEffect(runListUpdate);
-  return {
-    marker: fragment,
-    flush: () => {
-      if (pendingItems !== null) {
-        runListUpdate();
+    if (node.nextSibling !== anchor) {
+      if (node.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
+        parent.ownerDocument.adoptNode(node);
       }
-    },
-    dispose: () => {
-      dispose();
-      for (const [, managed] of nodeMap) {
-        destroyRoot(managed.root);
-        removeBlockNodes(managed);
+      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;
       }
-      nodeMap.clear();
-      startMarker.parentNode?.removeChild(startMarker);
-      endMarker.parentNode?.removeChild(endMarker);
     }
-  };
+    anchor = node;
+  }
 }
-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);
-    }
-    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;
-    }
-  } finally {
-    popRoot(prev);
-    if (!handledError) {
-      flushOnMount(root);
-    } else {
-      destroyRoot(root);
-    }
+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);
   }
-  return {
-    nodes,
-    root,
-    value: valueSig,
-    index: indexSig,
-    version: versionSig,
-    start,
-    end,
-    valueProxy,
-    renderCurrent
-  };
+  removeBlockRange(block);
 }
-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;
-    }
-    if (handleError(err, { source: "renderChild" }, block.root)) {
-      handledError = true;
-      popRoot(prev);
-      destroyRoot(block.root);
-      block.nodes = [block.start, block.end];
-      return block;
-    }
-    throw err;
-  } finally {
-    if (!handledError) {
-      popRoot(prev);
-    }
-  }
-  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 (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));
-          }
-        }
-      }
-      if (typeof children === "string" || typeof children === "number" || children === null || children === void 0 || children === false) {
-        el.textContent = children === null || children === void 0 || children === false ? "" : String(children);
-        return true;
-      }
-      if (children && typeof children === "object" && !Array.isArray(children) && !(children instanceof Node)) {
-        const childVNode = children;
-        if (typeof childVNode.type === "string") {
-          const childEl = el.querySelector(childVNode.type);
-          if (childEl && patchElement(childEl, children)) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-  }
-  if (output instanceof Node) {
-    if (output.nodeType === Node.ELEMENT_NODE) {
-      const nextEl = output;
-      if (nextEl.tagName.toLowerCase() === el.tagName.toLowerCase()) {
-        el.textContent = nextEl.textContent;
-        return true;
-      }
-    } else if (output.nodeType === Node.TEXT_NODE) {
-      el.textContent = output.data;
-      return true;
-    }
-  }
-  return false;
-}
-function 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 isFragmentVNode(value) {
-  return value != null && typeof value === "object" && !(value instanceof Node) && value.type === Fragment;
-}
-function normalizeChildren(children, result = []) {
-  if (children === void 0) {
-    return result;
-  }
-  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 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;
+function collectBlockNodes(block) {
+  const nodes = [];
+  let cursor = block.start;
+  while (cursor) {
+    nodes.push(cursor);
+    if (cursor === block.end) {
+      break;
     }
+    cursor = cursor.nextSibling;
   }
-  return true;
-}
-function clearContent(block) {
-  const nodes = block.nodes.slice(1, Math.max(1, block.nodes.length - 1));
-  removeNodes(nodes);
+  return nodes;
 }
-function removeBlockNodes(block) {
+function removeBlockRange(block) {
   let cursor = block.start;
-  const end = block.end;
   while (cursor) {
     const next = cursor.nextSibling;
     cursor.parentNode?.removeChild(cursor);
-    if (cursor === end) break;
+    if (cursor === block.end) {
+      break;
+    }
     cursor = next;
   }
 }
-function bumpBlockVersion(block) {
-  block.version(block.version() + 1);
+function createVersionedSignalAccessor(initialValue) {
+  let current = initialValue;
+  let version = 0;
+  const track = signal(version);
+  function accessor(value) {
+    if (arguments.length === 0) {
+      track();
+      return current;
+    }
+    current = value;
+    version++;
+    track(version);
+  }
+  return accessor;
 }
-
-// src/scope.ts
-function createScope() {
-  let dispose = null;
-  const stop = () => {
-    if (dispose) {
-      dispose();
-      dispose = 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);
+    }
+    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 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 run = (fn) => {
-    stop();
-    const { dispose: rootDispose, value } = createRoot(fn);
-    dispose = rootDispose;
-    return value;
+  const container = {
+    startMarker,
+    endMarker,
+    blocks: /* @__PURE__ */ new Map(),
+    nextBlocks: /* @__PURE__ */ new Map(),
+    currentNodes: [startMarker, endMarker],
+    nextNodes: [],
+    orderedBlocks: [],
+    nextOrderedBlocks: [],
+    orderedIndexByKey: /* @__PURE__ */ new Map(),
+    dispose
   };
-  registerRootCleanup(stop);
-  return { run, stop };
+  return container;
 }
-function runInScope(flag, fn) {
-  const scope = createScope();
-  const evaluate = () => isReactive(flag) ? flag() : !!flag;
-  createEffect(() => {
-    const enabled = evaluate();
-    if (enabled) {
-      scope.run(fn);
+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 {
-      scope.stop();
+      const element = createElement(rendered);
+      nodes = toNodeArray(element);
     }
-  });
-  onCleanup(scope.stop);
-}
-
-// src/scheduler.ts
-function batch2(fn) {
-  return batch(fn);
-}
-function untrack2(fn) {
-  return untrack(fn);
-}
-
-// src/hooks.ts
-var ctxStack = [];
-function __fictUseContext() {
-  if (ctxStack.length === 0) {
-    const ctx2 = { slots: [], cursor: 0 };
-    ctxStack.push(ctx2);
-    return ctx2;
-  }
-  const ctx = ctxStack[ctxStack.length - 1];
-  ctx.cursor = 0;
-  return ctx;
-}
-function __fictPushContext() {
-  const ctx = { slots: [], cursor: 0 };
-  ctxStack.push(ctx);
-  return ctx;
-}
-function __fictPopContext() {
-  ctxStack.pop();
-}
-function __fictResetContext() {
-  ctxStack.length = 0;
-}
-function __fictUseSignal(ctx, initial, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = signal(initial);
-  }
-  return ctx.slots[index];
-}
-function __fictUseMemo(ctx, fn, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createMemo(fn);
-  }
-  return ctx.slots[index];
-}
-function __fictUseEffect(ctx, fn, slot) {
-  const index = slot ?? ctx.cursor++;
-  if (!ctx.slots[index]) {
-    ctx.slots[index] = createEffect(fn);
-  }
-}
-function __fictRender(ctx, fn) {
-  ctxStack.push(ctx);
-  ctx.cursor = 0;
-  try {
-    return fn();
   } finally {
-    ctxStack.pop();
-  }
-}
-
-// src/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;
+    setActiveSub(prevSub);
+    popRoot(prevRoot);
   }
-  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);
-    }
-  });
-  rawToProxy.set(props, proxy);
-  proxyToRaw.set(proxy, props);
-  return proxy;
+  return {
+    key,
+    nodes,
+    root,
+    item: itemSig,
+    index: indexSig,
+    rawItem: item,
+    rawIndex: index
+  };
 }
-function unwrapProps(props) {
-  if (!props || typeof props !== "object") {
-    return props;
-  }
-  return proxyToRaw.get(props) ?? props;
+function getFirstNodeAfter(marker) {
+  return marker.nextSibling;
 }
-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 createKeyedList(getItems, keyFn, renderItem, needsIndex) {
+  const resolvedNeedsIndex = arguments.length >= 4 ? !!needsIndex : renderItem.length > 1;
+  return createFineGrainedKeyedList(getItems, keyFn, renderItem, resolvedNeedsIndex);
 }
-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);
+function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
+  const container = createKeyedListContainer();
+  const hostRoot = getCurrentRoot();
+  const fragment = document.createDocumentFragment();
+  fragment.append(container.startMarker, container.endMarker);
+  let disposed = false;
+  let effectDispose;
+  let connectObserver = null;
+  let effectStarted = false;
+  let startScheduled = false;
+  const getConnectedParent = () => {
+    const endParent = container.endMarker.parentNode;
+    const startParent = container.startMarker.parentNode;
+    if (endParent && startParent && endParent === startParent && endParent.nodeType !== 11) {
+      return endParent;
+    }
+    return null;
   };
-  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;
+  const performDiff = () => {
+    if (disposed) return;
+    const parent = getConnectedParent();
+    if (!parent) return;
+    batch2(() => {
+      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 createdBlocks = [];
+      const newItems = getItems();
+      if (newItems.length === 0) {
+        if (oldBlocks.size > 0) {
+          for (const block of oldBlocks.values()) {
+            destroyRoot(block.root);
+          }
+          const range = document.createRange();
+          range.setStartAfter(container.startMarker);
+          range.setEndBefore(container.endMarker);
+          range.deleteContents();
         }
+        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;
       }
-      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);
+      const prevCount = prevOrderedBlocks.length;
+      let appendCandidate = prevCount > 0 && newItems.length >= prevCount;
+      const appendedBlocks = [];
+      newItems.forEach((item, index) => {
+        const key = keyFn(item, index);
+        let block = oldBlocks.get(key);
+        const existed = block !== void 0;
+        if (block) {
+          if (block.rawItem !== item) {
+            block.rawItem = item;
+            block.item(item);
+          }
+          if (needsIndex && block.rawIndex !== index) {
+            block.rawIndex = index;
+            block.index(index);
           }
         }
-      }
-      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;
-            }
-          };
+        if (block) {
+          newBlocks.set(key, block);
+          oldBlocks.delete(key);
+        } else {
+          const existingBlock = newBlocks.get(key);
+          if (existingBlock) {
+            destroyRoot(existingBlock.root);
+            removeNodes(existingBlock.nodes);
+          }
+          block = createKeyedBlock(key, item, index, renderItem, needsIndex, hostRoot);
+          createdBlocks.push(block);
         }
-      }
-      return void 0;
-    }
-  });
-}
-function useProp(getter) {
-  return __fictProp(createMemo(getter));
-}
-
-// 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 = "";
+        const resolvedBlock = block;
+        newBlocks.set(key, resolvedBlock);
+        const position = orderedIndexByKey.get(key);
+        if (position !== void 0) {
+          appendCandidate = false;
+          const prior = nextOrderedBlocks[position];
+          if (prior && prior !== resolvedBlock) {
+            destroyRoot(prior.root);
+            removeNodes(prior.nodes);
+          }
+          nextOrderedBlocks[position] = resolvedBlock;
+        } else {
+          if (appendCandidate) {
+            if (index < prevCount) {
+              if (!prevOrderedBlocks[index] || prevOrderedBlocks[index].key !== key) {
+                appendCandidate = false;
+              }
+            } else if (existed) {
+              appendCandidate = false;
+            }
+          }
+          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;
+        for (const block of createdBlocks) {
+          if (newBlocks.get(block.key) === block) {
+            flushOnMount(block.root);
+          }
+        }
+        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;
+      for (const block of createdBlocks) {
+        if (newBlocks.get(block.key) === block) {
+          flushOnMount(block.root);
+        }
+      }
+    });
   };
-  return teardown;
-}
-function createElement(node) {
-  if (node instanceof Node) {
-    return node;
-  }
-  if (node === null || node === void 0 || node === false) {
-    return document.createTextNode("");
-  }
-  if (typeof node === "object" && node !== null && !(node instanceof Node)) {
-    if ("marker" in node) {
-      return createElement(node.marker);
-    }
-    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 (Array.isArray(node)) {
-    const frag = document.createDocumentFragment();
-    for (const child of node) {
-      appendChildNode(frag, child);
+  const disconnectObserver = () => {
+    connectObserver?.disconnect();
+    connectObserver = null;
+  };
+  const ensureEffectStarted = () => {
+    if (disposed || effectStarted) return effectStarted;
+    const parent = getConnectedParent();
+    if (!parent) return false;
+    const start = () => {
+      effectDispose = createRenderEffect(performDiff);
+      effectStarted = true;
+    };
+    if (hostRoot) {
+      const prev = pushRoot(hostRoot);
+      try {
+        start();
+      } finally {
+        popRoot(prev);
+      }
+    } else {
+      start();
     }
-    return frag;
-  }
-  if (typeof node === "string" || typeof node === "number") {
-    return document.createTextNode(String(node));
-  }
-  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 };
+    return true;
+  };
+  const waitForConnection = () => {
+    if (connectObserver || typeof MutationObserver === "undefined") return;
+    connectObserver = new MutationObserver(() => {
+      if (disposed) return;
+      if (getConnectedParent()) {
+        disconnectObserver();
+        if (ensureEffectStarted()) {
+          flush();
         }
-        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");
+    connectObserver.observe(document, { childList: true, subtree: true });
+  };
+  const scheduleStart = () => {
+    if (startScheduled || disposed || effectStarted) return;
+    startScheduled = true;
+    const run = () => {
+      startScheduled = false;
+      if (!ensureEffectStarted()) {
+        waitForConnection();
       }
-      handleError(err, { source: "render", componentName: vnode.type.name });
-      throw err;
+    };
+    if (typeof queueMicrotask === "function") {
+      queueMicrotask(run);
+    } else {
+      Promise.resolve().then(run).catch(() => void 0);
     }
-  }
-  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;
+  };
+  scheduleStart();
+  return {
+    get marker() {
+      scheduleStart();
+      return fragment;
+    },
+    startMarker: container.startMarker,
+    endMarker: container.endMarker,
+    // Flush pending items - call after markers are inserted into DOM
+    flush: () => {
+      if (disposed) return;
+      scheduleStart();
+      if (ensureEffectStarted()) {
+        flush();
+      } else {
+        waitForConnection();
+      }
+    },
+    dispose: () => {
+      disposed = true;
+      effectDispose?.();
+      disconnectObserver();
+      container.dispose();
     }
-    if (isMathML) {
-      return t.firstChild;
+  };
+}
+
+// src/binding.ts
+function isReactive(value) {
+  return typeof value === "function" && value.length === 0;
+}
+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);
+      }
+    } else if (fn && typeof fn.handleEvent === "function") {
+      fn.handleEvent.call(fn, event);
     }
-    return t.content.firstChild;
   };
-  const fn = isImportNode ? () => untrack2(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
-  fn.cloneNode = fn;
-  return fn;
+  invoke(handler);
 }
-function isBindingHandle(node) {
-  return node !== null && typeof node === "object" && "marker" in node && "dispose" in node && typeof node.dispose === "function";
+var PRIMITIVE_PROXY = Symbol("fict:primitive-proxy");
+function bindText(textNode, getValue) {
+  return createRenderEffect(() => {
+    const value = formatTextValue(getValue());
+    if (textNode.data !== value) {
+      textNode.data = value;
+    }
+  });
 }
-function appendChildNode(parent, child) {
-  if (child === null || child === void 0 || child === false) {
-    return;
+function formatTextValue(value) {
+  if (value == null || value === false) {
+    return "";
   }
-  if (isBindingHandle(child)) {
-    appendChildNode(parent, child.marker);
-    child.flush?.();
-    return;
+  return String(value);
+}
+function createAttributeBinding(el, key, value, setter) {
+  if (isReactive(value)) {
+    createRenderEffect(() => {
+      setter(el, key, value());
+    });
+  } else {
+    setter(el, key, value);
   }
-  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 bindAttribute(el, key, getValue) {
+  let prevValue = void 0;
+  return createRenderEffect(() => {
+    const value = getValue();
+    if (value === prevValue) return;
+    prevValue = value;
+    if (value === void 0 || value === null || value === false) {
+      el.removeAttribute(key);
+    } else if (value === true) {
+      el.setAttribute(key, "");
+    } else {
+      el.setAttribute(key, String(value));
     }
-    return;
-  }
-  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);
+  });
+}
+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;
     }
-    throw e;
-  }
+    ;
+    el[key] = next;
+  });
 }
-function appendChildren(parent, children) {
-  if (children === void 0) return;
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      appendChildren(parent, child);
-    }
-    return;
+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);
   }
-  appendChildNode(parent, children);
 }
-function applyRef(el, value) {
-  if (typeof value === "function") {
-    const refFn = value;
-    refFn(el);
-    if (getCurrentRoot()) {
-      registerRootCleanup(() => {
-        refFn(null);
-      });
-    }
-  } else if (value && typeof value === "object" && "current" in value) {
-    const refObj = value;
-    refObj.current = el;
-    if (getCurrentRoot()) {
-      registerRootCleanup(() => {
-        refObj.current = null;
-      });
-    }
-  }
+function bindStyle(el, getValue) {
+  const target = el;
+  let prev;
+  return createRenderEffect(() => {
+    const next = getValue();
+    applyStyle(target, next, prev);
+    prev = next;
+  });
 }
-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;
+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 (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;
+    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);
         }
       }
-      continue;
-    }
-    if (ChildProperties.has(key)) {
-      createAttributeBinding(el, key, value, setProperty);
-      continue;
-    }
-    if (key.slice(0, 5) === "attr:") {
-      createAttributeBinding(el, key.slice(5), value, setAttribute);
-      continue;
-    }
-    if (key.slice(0, 5) === "bool:") {
-      createAttributeBinding(el, key.slice(5), value, setBoolAttribute);
-      continue;
-    }
-    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
-        );
+    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 {
-        createAttributeBinding(el, propName, value, setProperty);
+        const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+        el.style.removeProperty(cssProperty);
       }
-      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 {
+    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 = "";
     }
-    const attrName = Aliases[key] || key;
-    createAttributeBinding(el, attrName, value, setAttribute);
   }
-  const children = props.children;
-  appendChildren(el, children);
 }
-function toPropertyName(name) {
-  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
+function isUnitlessStyleProperty(prop) {
+  return UnitlessStyles.has(prop);
 }
-var setAttribute = (el, key, value) => {
-  if (value === void 0 || value === null || value === false) {
-    el.removeAttribute(key);
-    return;
-  }
-  if (value === true) {
-    el.setAttribute(key, "");
-    return;
+function createClassBinding(el, value) {
+  if (isReactive(value)) {
+    let prev = {};
+    createRenderEffect(() => {
+      const next = value();
+      prev = applyClass(el, next, prev);
+    });
+  } else {
+    applyClass(el, value, {});
   }
-  const valueType = typeof value;
-  if (valueType === "string" || valueType === "number") {
-    el.setAttribute(key, String(value));
-    return;
+}
+function bindClass(el, getValue) {
+  let prev = {};
+  let prevString;
+  return createRenderEffect(() => {
+    const next = getValue();
+    if (typeof next === "string") {
+      if (next === prevString) return;
+      prevString = next;
+      el.className = next;
+      prev = {};
+      return;
+    }
+    prevString = void 0;
+    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 (key in el) {
-    el[key] = value;
-    return;
+}
+function applyClass(el, value, prev) {
+  const prevState = prev && typeof prev === "object" ? prev : {};
+  if (typeof value === "string") {
+    el.className = 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 (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 (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);
+  if (!value) {
+    for (const key of Object.keys(prevState)) {
+      if (key && key !== "undefined") {
+        toggleClassKey(el, key, false);
       }
     }
-    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);
+    return {};
   }
-};
-function setAttributeNS(el, namespace, name, value) {
-  if (value == null) {
-    el.removeAttributeNS(namespace, name);
+  return prevState;
+}
+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 {
-    el.setAttributeNS(namespace, name, String(value));
+    marker = document.createComment("fict:insert");
+    parent.appendChild(marker);
+    createFn = markerOrCreateElement;
+    ownsMarker = true;
   }
-}
-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;
+  let currentNodes = [];
+  let currentText = null;
+  let currentRoot2 = null;
+  const clearCurrentNodes = () => {
+    if (currentNodes.length > 0) {
+      removeNodes(currentNodes);
+      currentNodes = [];
     }
-    while (a[aEnd - 1] === b[bEnd - 1]) {
-      aEnd--;
-      bEnd--;
+  };
+  const setTextNode = (textValue, shouldInsert, parentNode) => {
+    if (!currentText) {
+      currentText = document.createTextNode(textValue);
+    } else if (currentText.data !== textValue) {
+      currentText.data = textValue;
     }
-    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++;
+    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;
       }
-    } 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 (!parentNode) {
+        clearCurrentNodes();
+        return;
       }
-      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);
+      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 {
-            parentNode.replaceChild(b[bStart++], a[aStart++]);
+            newNode = document.createTextNode(String(value));
           }
-        } else {
-          aStart++;
         }
       } else {
-        const nodeToRemove = a[aStart++];
-        nodeToRemove.parentNode?.removeChild(nodeToRemove);
+        newNode = createFn ? createFn(value) : document.createTextNode(String(value));
+      }
+      nodes = toNodeArray(newNode);
+      if (parentNode) {
+        insertNodesBefore(parentNode, nodes, marker);
       }
+    } finally {
+      popRoot(prev);
+      flushOnMount(root);
     }
-  }
-}
-
-// 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");
+    currentRoot2 = root;
+    currentNodes = nodes;
+  });
+  return () => {
+    dispose();
+    if (currentRoot2) {
+      destroyRoot(currentRoot2);
+      currentRoot2 = null;
     }
-    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;
-      }
+    clearCurrentNodes();
+    if (ownsMarker) {
+      marker.parentNode?.removeChild(marker);
     }
-    anchor = node;
-  }
-}
-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);
-  }
-  removeBlockRange(block);
+  };
 }
-function collectBlockNodes(block) {
-  const nodes = [];
-  let cursor = block.start;
-  while (cursor) {
-    nodes.push(cursor);
-    if (cursor === block.end) {
-      break;
+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);
+      }
     }
-    cursor = cursor.nextSibling;
-  }
-  return nodes;
+  });
+  return {
+    marker,
+    dispose: () => {
+      dispose();
+      marker.parentNode?.removeChild(marker);
+    }
+  };
 }
-function removeBlockRange(block) {
-  let cursor = block.start;
-  while (cursor) {
-    const next = cursor.nextSibling;
-    cursor.parentNode?.removeChild(cursor);
-    if (cursor === block.end) {
-      break;
+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);
     }
-    cursor = next;
   }
 }
-function createVersionedSignalAccessor(initialValue) {
-  let current = initialValue;
-  let version = 0;
-  const track = signal(version);
-  function accessor(value) {
-    if (arguments.length === 0) {
-      track();
-      return current;
+function clearDelegatedEvents(doc = window.document) {
+  const e = doc[$$EVENTS];
+  if (e) {
+    for (const name of e.keys()) {
+      doc.removeEventListener(name, globalEventHandler);
     }
-    current = value;
-    version++;
-    track(version);
+    delete doc[$$EVENTS];
   }
-  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);
+function globalEventHandler(e) {
+  const asNode = (value) => value && typeof value.nodeType === "number" ? value : null;
+  const asElement = (value) => {
+    const n = asNode(value);
+    if (!n) return null;
+    if (n.nodeType === 1) return n;
+    return n.parentElement;
+  };
+  let node = asElement(e.target);
+  const key = `$$${e.type}`;
+  const dataKey = `${key}Data`;
+  const oriTarget = e.target;
+  const oriCurrentTarget = e.currentTarget;
+  let lastHandled = null;
+  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;
+      batch2(() => {
+        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;
     }
-    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 shadowHost = node.host;
+    if (shadowHost && typeof shadowHost !== "string" && !shadowHost._$host && (() => {
+      const targetNode = asNode(e.target);
+      return targetNode ? node.contains(targetNode) : false;
+    })()) {
+      retarget(shadowHost);
+    }
+    return true;
   };
-  const container = {
-    startMarker,
-    endMarker,
-    blocks: /* @__PURE__ */ new Map(),
-    nextBlocks: /* @__PURE__ */ new Map(),
-    currentNodes: [startMarker, endMarker],
-    nextNodes: [],
-    orderedBlocks: [],
-    nextOrderedBlocks: [],
-    orderedIndexByKey: /* @__PURE__ */ new Map(),
-    dispose
+  const walkUpTree = () => {
+    while (handleNode() && node) {
+      node = asElement(node._$host || node.parentNode || node.host);
+    }
   };
-  return container;
-}
-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;
+  Object.defineProperty(e, "currentTarget", {
+    configurable: true,
+    get() {
+      return node || document;
+    }
   });
-  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);
-    } else {
-      const element = createElement(rendered);
-      nodes = toNodeArray(element);
+  if (e.composedPath) {
+    const path = e.composedPath();
+    retarget(path[0]);
+    for (let i = 0; i < path.length - 2; i++) {
+      const nextNode = asElement(path[i]);
+      if (!nextNode || nextNode === lastHandled) continue;
+      node = nextNode;
+      if (!handleNode()) break;
+      lastHandled = node;
+      if (node._$host) {
+        node = node._$host;
+        walkUpTree();
+        break;
+      }
+      if (node.parentNode === oriCurrentTarget) {
+        break;
+      }
     }
-  } finally {
-    setActiveSub(prevSub);
-    popRoot(prevRoot);
-    flushOnMount(root);
+  } else {
+    walkUpTree();
   }
-  return {
-    key,
-    nodes,
-    root,
-    item: itemSig,
-    index: indexSig,
-    rawItem: item,
-    rawIndex: index
-  };
-}
-function getFirstNodeAfter(marker) {
-  return marker.nextSibling;
-}
-function createKeyedList(getItems, keyFn, renderItem, needsIndex) {
-  const resolvedNeedsIndex = arguments.length >= 4 ? !!needsIndex : renderItem.length > 1;
-  return createFineGrainedKeyedList(getItems, keyFn, renderItem, resolvedNeedsIndex);
+  retarget(oriTarget);
 }
-function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
-  const container = createKeyedListContainer();
-  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);
+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;
+    };
+  }
+  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 (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;
+      throw err;
+    }
+  };
+  el.addEventListener(eventName, wrapped, options2);
+  const cleanup = () => el.removeEventListener(eventName, wrapped, options2);
+  registerRootCleanup(cleanup);
+  return cleanup;
+}
+function bindRef(el, ref) {
+  if (ref == null) return () => {
+  };
+  const getRef = isReactive(ref) ? ref : () => ref;
+  const applyRef2 = (refValue) => {
+    if (refValue == null) return;
+    if (typeof refValue === "function") {
+      refValue(el);
+    } else if (typeof refValue === "object" && "current" in refValue) {
+      refValue.current = el;
+    }
+  };
+  const initialRef = getRef();
+  applyRef2(initialRef);
+  if (isReactive(ref)) {
+    const cleanup2 = createRenderEffect(() => {
+      const currentRef = getRef();
+      applyRef2(currentRef);
+    });
+    registerRootCleanup(cleanup2);
+    const nullifyCleanup = () => {
+      const currentRef = getRef();
+      if (currentRef && typeof currentRef === "object" && "current" in currentRef) {
+        currentRef.current = null;
+      }
+    };
+    registerRootCleanup(nullifyCleanup);
+    return () => {
+      cleanup2();
+      nullifyCleanup();
+    };
+  }
+  const cleanup = () => {
+    const refValue = getRef();
+    if (refValue && typeof refValue === "object" && "current" in refValue) {
+      refValue.current = null;
+    }
+  };
+  registerRootCleanup(cleanup);
+  return cleanup;
+}
+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;
+    }
+    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;
+    }
+    removeNodes(currentNodes);
+    currentNodes = [];
+    const render2 = cond ? renderTrue : renderFalse;
+    if (!render2) {
+      return;
+    }
+    const root = createRootContext(hostRoot);
+    const prev = pushRoot(root);
+    let handledError = false;
+    try {
+      const output = untrack(render2);
+      if (output == null || output === false) {
         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;
+      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 (oldBlocks.size > 0) {
-        for (const block of oldBlocks.values()) {
-          destroyRoot(block.root);
-          removeNodes(block.nodes);
-        }
-        oldBlocks.clear();
+      if (handleError(err, { source: "renderChild" }, root)) {
+        handledError = true;
+        destroyRoot(root);
+        return;
       }
-      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;
+      throw err;
+    } finally {
+      popRoot(prev);
+      if (!handledError) {
+        flushOnMount(root);
+        currentRoot2 = root;
+      } else {
+        currentRoot2 = null;
       }
-      container.blocks = newBlocks;
-      container.nextBlocks = oldBlocks;
-      container.orderedBlocks = nextOrderedBlocks;
-      container.nextOrderedBlocks = prevOrderedBlocks;
-    });
+    }
   };
-  const effectDispose = createRenderEffect(performDiff);
+  const dispose = createRenderEffect(runConditional);
   return {
     marker: fragment,
-    startMarker: container.startMarker,
-    endMarker: container.endMarker,
-    // Flush pending items - call after markers are inserted into DOM
     flush: () => {
-      if (pendingItems !== null) {
-        performDiff();
-      }
+      if (pendingRender) {
+        runConditional();
+      }
     },
     dispose: () => {
-      disposed = true;
-      effectDispose?.();
-      container.dispose();
+      dispose();
+      if (currentRoot2) {
+        destroyRoot(currentRoot2);
+      }
+      removeNodes(currentNodes);
+      currentNodes = [];
+      startMarker.parentNode?.removeChild(startMarker);
+      endMarker.parentNode?.removeChild(endMarker);
+    }
+  };
+}
+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;
+    }
+    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 {
+          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);
+      }
+      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);
+    }
+  };
+  const dispose = createRenderEffect(runListUpdate);
+  return {
+    marker: fragment,
+    flush: () => {
+      if (pendingItems !== null) {
+        runListUpdate();
+      }
+    },
+    dispose: () => {
+      dispose();
+      for (const [, managed] of nodeMap) {
+        destroyRoot(managed.root);
+        removeBlockNodes(managed);
+      }
+      nodeMap.clear();
+      startMarker.parentNode?.removeChild(startMarker);
+      endMarker.parentNode?.removeChild(endMarker);
+    }
+  };
+}
+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);
+    }
+    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;
+    }
+  } finally {
+    popRoot(prev);
+    if (!handledError) {
+      flushOnMount(root);
+    } else {
+      destroyRoot(root);
+    }
+  }
+  return {
+    nodes,
+    root,
+    value: valueSig,
+    index: indexSig,
+    start,
+    end,
+    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;
+    }
+    if (handleError(err, { source: "renderChild" }, block.root)) {
+      handledError = true;
+      popRoot(prev);
+      destroyRoot(block.root);
+      block.nodes = [block.start, block.end];
+      return block;
+    }
+    throw err;
+  } finally {
+    if (!handledError) {
+      popRoot(prev);
+    }
+  }
+  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 (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));
+          }
+        }
+      }
+      if (typeof children === "string" || typeof children === "number" || children === null || children === void 0 || children === false) {
+        el.textContent = children === null || children === void 0 || children === false ? "" : String(children);
+        return true;
+      }
+      if (children && typeof children === "object" && !Array.isArray(children) && !(children instanceof Node)) {
+        const childVNode = children;
+        if (typeof childVNode.type === "string") {
+          const childEl = el.querySelector(childVNode.type);
+          if (childEl && patchElement(childEl, children)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+  }
+  if (output instanceof Node) {
+    if (output.nodeType === Node.ELEMENT_NODE) {
+      const nextEl = output;
+      if (nextEl.tagName.toLowerCase() === el.tagName.toLowerCase()) {
+        el.textContent = nextEl.textContent;
+        return true;
+      }
+    } else if (output.nodeType === Node.TEXT_NODE) {
+      el.textContent = output.data;
+      return true;
+    }
+  }
+  return false;
+}
+function 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 isFragmentVNode(value) {
+  return value != null && typeof value === "object" && !(value instanceof Node) && value.type === Fragment;
+}
+function normalizeChildren(children, result = []) {
+  if (children === void 0) {
+    return result;
+  }
+  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 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;
+    }
+  }
+  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;
+  }
+}
+
+// src/scope.ts
+function createScope() {
+  let dispose = null;
+  const stop = () => {
+    if (dispose) {
+      dispose();
+      dispose = null;
     }
   };
+  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();
+    }
+  });
+  onCleanup(scope.stop);
 }
 
 export { $state, Fragment, __fictPopContext, __fictProp, __fictPropsRest, __fictPushContext, __fictRender, __fictResetContext, __fictUseContext, __fictUseEffect, __fictUseMemo, __fictUseSignal, batch2 as batch, bindAttribute, bindClass, bindEvent, bindProperty, bindRef, bindStyle, bindText, clearDelegatedEvents, createConditional, createEffect, createElement, createKeyedBlock, createKeyedList, createKeyedListContainer, createList, createMemo, createPropsProxy, createRenderEffect, createScope, createSelector, signal as createSignal, delegateEvents, destroyMarkerBlock, effectScope, getFirstNodeAfter, insert, insertNodesBefore, mergeProps, moveMarkerBlock, onDestroy, __fictProp as prop, removeNodes, render, runInScope, template, toNodeArray, untrack2 as untrack, useProp };