marko 6.0.0-next.3.39 → 6.0.0-next.3.41

package/dist/debug/dom.mjs

@@ -100,35 +100,24 @@ function normalizeDynamicRenderer(value2) {
 }
 
 // src/dom/event.ts
-var elementHandlersByEvent = /* @__PURE__ */ new Map();
 var defaultDelegator = createDelegator();
 function on(element, type, handler) {
-  let handlersByElement = elementHandlersByEvent.get(type);
-  if (!handlersByElement) {
-    elementHandlersByEvent.set(type, handlersByElement = /* @__PURE__ */ new WeakMap());
-  }
-  if (!handlersByElement.has(element)) {
+  if (element["$" + type] === void 0) {
     defaultDelegator(element, type, handleDelegated);
   }
-  handlersByElement.set(element, handler || null);
+  element["$" + type] = handler || null;
 }
 function createDelegator() {
   const kEvents = Symbol();
   return function ensureDelegated(node, type, handler) {
-    const root = node.getRootNode();
-    (root[kEvents] ||= {})[type] ||= (root.addEventListener(type, handler, true), 1);
+    ((node = node.getRootNode())[kEvents] ||= {})[type] ||= (node.addEventListener(type, handler, true), 1);
   };
 }
 function handleDelegated(ev) {
   let target = !rendering && ev.target;
-  if (target) {
-    const handlersByElement = elementHandlersByEvent.get(ev.type);
-    handlersByElement.get(target)?.(ev, target);
-    if (ev.bubbles) {
-      while ((target = target.parentNode) && !ev.cancelBubble) {
-        handlersByElement.get(target)?.(ev, target);
-      }
-    }
+  while (target) {
+    target["$" + ev.type]?.(ev, target);
+    target = ev.bubbles && !ev.cancelBubble && target.parentNode;
   }
 }
 
@@ -425,7 +414,17 @@ function controllable_input_checkedValue_effect(scope, nodeAccessor) {
       );
       run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
-        el.checked = !el.checked;
+        if (el.name && el.type[0] === "r") {
+          for (const radio of el.getRootNode().querySelectorAll(
+            `[type=radio][name=${CSS.escape(el.name)}]`
+          )) {
+            if (radio.form === el.form) {
+              radio.checked = Array.isArray(oldValue) ? oldValue.includes(radio.value) : oldValue === radio.value;
+            }
+          }
+        } else {
+          el.checked = !el.checked;
+        }
       }
     }
   });
@@ -505,7 +504,7 @@ function controllable_select_value_effect(scope, nodeAccessor) {
       }
     }
   };
-  if (!controllableHandlers.has(el)) {
+  if (!el._) {
     new MutationObserver(() => {
       const value2 = scope[nodeAccessor + ":" /* ControlledValue */];
       if (Array.isArray(value2) ? value2.length !== el.selectedOptions.length || value2.some((value3, i) => value3 != el.selectedOptions[i].value) : el.value != value2) {
@@ -600,9 +599,8 @@ function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
   }
 }
 var controllableDelegate = createDelegator();
-var controllableHandlers = /* @__PURE__ */ new WeakMap();
 function syncControllable(el, event, hasChanged, onChange) {
-  if (!controllableHandlers.has(el)) {
+  if (!el._) {
     controllableDelegate(el, event, handleChange);
     if (el.form) {
       controllableDelegate(el.form, "reset", handleFormReset);
@@ -611,17 +609,16 @@ function syncControllable(el, event, hasChanged, onChange) {
       queueMicrotask(onChange);
     }
   }
-  controllableHandlers.set(el, onChange);
+  el._ = onChange;
 }
 function handleChange(ev) {
-  controllableHandlers.get(ev.target)?.(ev);
+  ev.target._?.(ev);
 }
 function handleFormReset(ev) {
   const handlers = [];
   for (const el of ev.target.elements) {
-    const handler = controllableHandlers.get(el);
-    if (handler && hasFormElementChanged(el)) {
-      handlers.push(handler);
+    if (el._ && hasFormElementChanged(el)) {
+      handlers.push(el._);
     }
   }
   requestAnimationFrame(() => {
@@ -942,11 +939,6 @@ function finishPendingScopes() {
   }
   pendingScopes = [];
 }
-var emptyBranch = createScope({});
-function getEmptyBranch(marker) {
-  emptyBranch.___startNode = emptyBranch.___endNode = marker;
-  return emptyBranch;
-}
 function destroyBranch(branch) {
   branch.___parentBranch?.___branchScopes?.delete(branch);
   destroyNestedBranches(branch);
@@ -973,936 +965,891 @@ function insertBranchBefore(branch, parentNode, nextSibling) {
   );
 }
 
-// src/dom/reconcile.ts
-var WRONG_POS = 2147483647;
-function reconcile(parent, oldBranches, newBranches, afterReference) {
-  let oldStart = 0;
-  let newStart = 0;
-  let oldEnd = oldBranches.length - 1;
-  let newEnd = newBranches.length - 1;
-  let oldStartBranch = oldBranches[oldStart];
-  let newStartBranch = newBranches[newStart];
-  let oldEndBranch = oldBranches[oldEnd];
-  let newEndBranch = newBranches[newEnd];
-  let i;
-  let j;
-  let k;
-  let nextSibling;
-  let oldBranch;
-  let newBranch;
-  outer: {
-    while (oldStartBranch === newStartBranch) {
-      ++oldStart;
-      ++newStart;
-      if (oldStart > oldEnd || newStart > newEnd) {
-        break outer;
-      }
-      oldStartBranch = oldBranches[oldStart];
-      newStartBranch = newBranches[newStart];
+// src/dom/schedule.ts
+var runTask;
+var port2 = /* @__PURE__ */ (() => {
+  const { port1, port2: port22 } = new MessageChannel();
+  port1.onmessage = () => {
+    isScheduled = false;
+    if (true) {
+      const run2 = runTask;
+      runTask = void 0;
+      run2();
+    } else {
+      run();
     }
-    while (oldEndBranch === newEndBranch) {
-      --oldEnd;
-      --newEnd;
-      if (oldStart > oldEnd || newStart > newEnd) {
-        break outer;
+  };
+  return port22;
+})();
+var isScheduled;
+function schedule() {
+  if (!isScheduled) {
+    if (true) {
+      if (console.createTask) {
+        const task = console.createTask("queue");
+        runTask = () => task.run(run);
+      } else {
+        runTask = run;
       }
-      oldEndBranch = oldBranches[oldEnd];
-      newEndBranch = newBranches[newEnd];
     }
+    isScheduled = true;
+    queueMicrotask(flushAndWaitFrame);
   }
-  if (oldStart > oldEnd) {
-    if (newStart <= newEnd) {
-      k = newEnd + 1;
-      nextSibling = k < newBranches.length ? newBranches[k].___startNode : afterReference;
-      do {
-        insertBranchBefore(newBranches[newStart++], parent, nextSibling);
-      } while (newStart <= newEnd);
-    }
-  } else if (newStart > newEnd) {
-    do {
-      removeAndDestroyBranch(oldBranches[oldStart++]);
-    } while (oldStart <= oldEnd);
+}
+function flushAndWaitFrame() {
+  if (true) {
+    runTask();
   } else {
-    const oldLength = oldEnd - oldStart + 1;
-    const newLength = newEnd - newStart + 1;
-    const aNullable = oldBranches;
-    const sources = new Array(newLength);
-    for (i = 0; i < newLength; ++i) {
-      sources[i] = -1;
-    }
-    let pos = 0;
-    let synced = 0;
-    const keyIndex = /* @__PURE__ */ new Map();
-    for (j = newStart; j <= newEnd; ++j) {
-      keyIndex.set(newBranches[j], j);
-    }
-    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
-      oldBranch = oldBranches[i];
-      j = keyIndex.get(oldBranch);
-      if (j !== void 0) {
-        pos = pos > j ? WRONG_POS : j;
-        ++synced;
-        newBranch = newBranches[j];
-        sources[j - newStart] = i;
-        aNullable[i] = null;
-      }
-    }
-    if (oldLength === oldBranches.length && synced === 0) {
-      for (; newStart < newLength; ++newStart) {
-        insertBranchBefore(newBranches[newStart], parent, afterReference);
-      }
-      for (; oldStart < oldLength; ++oldStart) {
-        removeAndDestroyBranch(oldBranches[oldStart]);
-      }
+    run();
+  }
+  requestAnimationFrame(triggerMacroTask);
+}
+function triggerMacroTask() {
+  port2.postMessage(0);
+}
+
+// src/dom/signals.ts
+var MARK = true ? Symbol("mark") : {};
+var CLEAN = true ? Symbol("clean") : {};
+var DIRTY = true ? Symbol("dirty") : {};
+function state(valueAccessor, fn, getIntersection) {
+  const valueSignal = value(valueAccessor, fn, getIntersection);
+  const markAccessor = valueAccessor + "#" /* Mark */;
+  const valueChangeAccessor = valueAccessor + "@" /* TagVariableChange */;
+  return (scope, valueOrOp, valueChange) => {
+    if (rendering) {
+      const valueIsOp = valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY;
+      valueSignal(
+        scope,
+        valueIsOp || (scope[valueChangeAccessor] = valueChange) || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
+      );
+    } else if (scope[valueChangeAccessor]) {
+      scope[valueChangeAccessor](valueOrOp);
     } else {
-      i = oldLength - synced;
-      while (i > 0) {
-        oldBranch = aNullable[oldStart++];
-        if (oldBranch !== null) {
-          removeAndDestroyBranch(oldBranch);
-          i--;
-        }
+      schedule();
+      queueSource(scope, valueSignal, valueOrOp);
+    }
+    return valueOrOp;
+  };
+}
+function value(valueAccessor, fn, getIntersection) {
+  const markAccessor = valueAccessor + "#" /* Mark */;
+  let intersection2;
+  return (scope, valueOrOp) => {
+    if (valueOrOp === MARK) {
+      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
+        getIntersection && (intersection2 ||= getIntersection())(scope, MARK);
       }
-      if (pos === WRONG_POS) {
-        const seq = longestIncreasingSubsequence(sources);
-        j = seq.length - 1;
-        k = newBranches.length;
-        for (i = newLength - 1; i >= 0; --i) {
-          if (sources[i] === -1) {
-            pos = i + newStart;
-            newBranch = newBranches[pos++];
-            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
-            insertBranchBefore(newBranch, parent, nextSibling);
-          } else {
-            if (j < 0 || i !== seq[j]) {
-              pos = i + newStart;
-              newBranch = newBranches[pos++];
-              nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
-              insertBranchBefore(newBranch, parent, nextSibling);
-            } else {
-              --j;
-            }
-          }
-        }
-      } else if (synced !== newLength) {
-        k = newBranches.length;
-        for (i = newLength - 1; i >= 0; --i) {
-          if (sources[i] === -1) {
-            pos = i + newStart;
-            newBranch = newBranches[pos++];
-            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
-            insertBranchBefore(newBranch, parent, nextSibling);
-          }
+    } else if (valueOrOp !== DIRTY) {
+      const existing = scope[markAccessor] !== void 0;
+      if ((scope[markAccessor] ||= 1) === 1) {
+        if (valueOrOp === CLEAN || existing && scope[valueAccessor] === valueOrOp) {
+          getIntersection && (intersection2 ||= getIntersection())(scope, CLEAN);
+        } else {
+          scope[valueAccessor] = valueOrOp;
+          fn && fn(scope, valueOrOp);
+          getIntersection && (intersection2 ||= getIntersection())(scope, DIRTY);
         }
       }
+      scope[markAccessor]--;
     }
-  }
+  };
 }
-function longestIncreasingSubsequence(a) {
-  const p = a.slice();
-  const result = [];
-  result.push(0);
-  let u;
-  let v;
-  for (let i = 0, il = a.length; i < il; ++i) {
-    if (a[i] === -1) {
-      continue;
-    }
-    const j = result[result.length - 1];
-    if (a[j] < a[i]) {
-      p[i] = j;
-      result.push(i);
-      continue;
-    }
-    u = 0;
-    v = result.length - 1;
-    while (u < v) {
-      const c = (u + v) / 2 | 0;
-      if (a[result[c]] < a[i]) {
-        u = c + 1;
+var accessorId = 0;
+function intersection(count, fn, getIntersection) {
+  const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
+  const markAccessor = dirtyAccessor + "#" /* Mark */;
+  let intersection2;
+  return (scope, op) => {
+    if (op === MARK) {
+      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
+        getIntersection && (intersection2 ||= getIntersection())(scope, MARK);
+      }
+    } else if (scope[markAccessor] === void 0) {
+      scope[markAccessor] = count - 1;
+      scope[dirtyAccessor] = true;
+    } else if (--scope[markAccessor] === 0) {
+      if (op === DIRTY || scope[dirtyAccessor]) {
+        scope[dirtyAccessor] = false;
+        fn(scope);
+        getIntersection && (intersection2 ||= getIntersection())(scope, DIRTY);
       } else {
-        v = c;
+        getIntersection && (intersection2 ||= getIntersection())(scope, CLEAN);
       }
+    } else {
+      scope[dirtyAccessor] ||= op === DIRTY;
     }
-    if (a[i] < a[result[u]]) {
-      if (u > 0) {
-        p[i] = result[u - 1];
+  };
+}
+function loopClosure(valueAccessor, ownerLoopNodeAccessor, fn, getIntersection) {
+  const childSignal = closure(valueAccessor, fn, getIntersection);
+  const loopScopeAccessor = ownerLoopNodeAccessor + "!" /* LoopScopeArray */;
+  const loopScopeMapAccessor = ownerLoopNodeAccessor + "(" /* LoopScopeMap */;
+  const ownerSignal = (ownerScope) => {
+    for (const scope of ownerScope[loopScopeAccessor] || ownerScope[loopScopeMapAccessor]?.values() || []) {
+      if (!scope.___pending) {
+        queueSource(scope, childSignal);
       }
-      result[u] = i;
     }
-  }
-  u = result.length;
-  v = result[u - 1];
-  while (u-- > 0) {
-    result[u] = v;
-    v = p[v];
-  }
-  return result;
-}
-
-// src/dom/walker.ts
-var walker = /* @__PURE__ */ document.createTreeWalker(document);
-function trimWalkString(walkString) {
-  let end = walkString.length;
-  while (walkString.charCodeAt(--end) > 47 /* BeginChild */) ;
-  return walkString.slice(0, end + 1);
+  };
+  ownerSignal._ = childSignal;
+  return ownerSignal;
 }
-function walk(startNode, walkCodes, branch) {
-  walker.currentNode = startNode;
-  walkInternal(0, walkCodes, branch);
-  walker.currentNode = document;
+function conditionalClosure(valueAccessor, ownerConditionalNodeAccessor, branch, fn, getIntersection) {
+  const childSignal = closure(valueAccessor, fn, getIntersection);
+  const scopeAccessor = ownerConditionalNodeAccessor + "!" /* ConditionalScope */;
+  const branchAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */;
+  const ownerSignal = (scope) => {
+    const ifScope = scope[scopeAccessor];
+    if (ifScope && !ifScope.___pending && scope[branchAccessor] === branch) {
+      queueSource(ifScope, childSignal);
+    }
+  };
+  ownerSignal._ = childSignal;
+  return ownerSignal;
 }
-function walkInternal(currentWalkIndex, walkCodes, scope) {
-  let value2;
-  let storedMultiplier = 0;
-  let currentMultiplier = 0;
-  let currentScopeIndex = 0;
-  while (value2 = walkCodes.charCodeAt(currentWalkIndex++)) {
-    currentMultiplier = storedMultiplier;
-    storedMultiplier = 0;
-    if (value2 >= 117 /* Multiplier */) {
-      storedMultiplier = currentMultiplier * 10 /* Multiplier */ + value2 - 117 /* Multiplier */;
-    } else if (value2 >= 107 /* Out */) {
-      value2 = 10 /* Out */ * currentMultiplier + value2 - 107 /* Out */;
-      while (value2--) {
-        walker.parentNode();
-      }
-      walker.nextSibling();
-    } else if (value2 >= 97 /* Over */) {
-      value2 = 10 /* Over */ * currentMultiplier + value2 - 97 /* Over */;
-      while (value2--) {
-        walker.nextSibling();
-      }
-    } else if (value2 >= 67 /* Next */) {
-      value2 = 20 /* Next */ * currentMultiplier + value2 - 67 /* Next */;
-      while (value2--) {
-        walker.nextNode();
+function dynamicClosure(valueAccessor, fn, getIntersection, getOwnerScope) {
+  const subscribersAccessor = "?" /* Dynamic */ + accessorId++;
+  const childSignal = closure(
+    valueAccessor,
+    fn,
+    getIntersection,
+    getOwnerScope
+  );
+  const ownerSignal = (ownerScope) => {
+    const subscribers = ownerScope[subscribersAccessor];
+    if (subscribers) {
+      for (const subscriber of subscribers) {
+        if (!subscriber.___pending) {
+          queueSource(subscriber, childSignal);
+        }
       }
-    } else if (value2 === 47 /* BeginChild */) {
-      currentWalkIndex = walkInternal(
-        currentWalkIndex,
-        walkCodes,
-        scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global, scope.___closestBranch)
+    }
+  };
+  const subscribe = (scope) => {
+    const owner = getOwnerScope ? getOwnerScope(scope) : scope._;
+    const subscribers = owner[subscribersAccessor] ||= /* @__PURE__ */ new Set();
+    if (!subscribers.has(scope)) {
+      subscribers.add(scope);
+      getAbortSignal(scope, -1).addEventListener(
+        "abort",
+        () => subscribers.delete(scope)
       );
-    } else if (value2 === 38 /* EndChild */) {
-      return currentWalkIndex;
-    } else if (value2 === 32 /* Get */) {
-      scope[true ? getDebugKey(currentScopeIndex++, walker.currentNode) : currentScopeIndex++] = walker.currentNode;
-    } else {
-      const newNode = scope[true ? getDebugKey(currentScopeIndex++, "#text") : currentScopeIndex++] = new Text();
-      const current = walker.currentNode;
-      const parentNode = current.parentNode;
-      if (value2 !== 37 /* Replace */) {
-        throw new Error(`Unknown walk code: ${value2}`);
-      }
-      parentNode.replaceChild(newNode, current);
-      walker.currentNode = newNode;
     }
-  }
-  return currentWalkIndex;
-}
-function getDebugKey(index, node) {
-  if (typeof node === "string") {
-    return `${node}/${index}`;
-  } else if (node.nodeType === 3 /* Text */) {
-    return `#text/${index}`;
-  } else if (node.nodeType === 8 /* Comment */) {
-    return `#comment/${index}`;
-  } else if (node.nodeType === 1 /* Element */) {
-    return `#${node.tagName.toLowerCase()}/${index}`;
-  }
-  return index;
+  };
+  ownerSignal.___subscribe = subscribe;
+  ownerSignal._ = (scope) => {
+    childSignal(scope);
+    subscribe(scope);
+  };
+  return ownerSignal;
 }
-
-// src/dom/renderer.ts
-function createBranchScopeWithRenderer(renderer, $global, parentScope, parentNode) {
-  const branch = createBranch(
-    $global,
-    renderer.___owner || parentScope,
-    parentScope
+function registerDynamicClosure(id, valueAccessor, fn, getIntersection, getOwnerScope) {
+  const signal = dynamicClosure(
+    valueAccessor,
+    fn,
+    getIntersection,
+    getOwnerScope
   );
-  if (true) {
-    branch.___renderer = renderer;
-  }
-  initBranch(renderer, branch, parentNode);
-  return branch;
+  register(id, signal.___subscribe);
+  return signal;
 }
-function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope, parentNode) {
-  if (typeof tagNameOrRenderer !== "string") {
-    return createBranchScopeWithRenderer(
-      tagNameOrRenderer,
-      $global,
-      parentScope,
-      parentNode
+function closure(valueAccessor, fn, getIntersection, getOwnerScope) {
+  let intersection2;
+  return (scope, op) => {
+    op || fn && fn(
+      scope,
+      (getOwnerScope ? getOwnerScope(scope) : scope._)[valueAccessor]
     );
+    getIntersection && (intersection2 ||= getIntersection())(scope, op ? MARK : DIRTY);
+  };
+}
+function setTagVar(scope, childAccessor, tagVarSignal2) {
+  scope[childAccessor]["/" /* TagVariable */] = (valueOrOp) => tagVarSignal2(scope, valueOrOp);
+}
+var tagVarSignal = (scope, valueOrOp) => scope["/" /* TagVariable */]?.(valueOrOp);
+function setTagVarChange(scope, changeHandler) {
+  scope["@" /* TagVariableChange */] = changeHandler;
+}
+var tagVarSignalChange = (scope, value2) => scope["@" /* TagVariableChange */]?.(value2);
+var tagIdsByGlobal = /* @__PURE__ */ new WeakMap();
+function nextTagId({ $global }) {
+  const id = tagIdsByGlobal.get($global) || 0;
+  tagIdsByGlobal.set($global, id + 1);
+  return "c" + $global.runtimeId + $global.renderId + id.toString(36);
+}
+function inChild(childAccessor, signal) {
+  return (scope, valueOrOp) => {
+    signal(scope[childAccessor], valueOrOp);
+  };
+}
+function intersections(signals) {
+  return (scope, op) => {
+    for (const signal of signals) {
+      signal(scope, op);
+    }
+  };
+}
+function effect(id, fn) {
+  register(id, fn);
+  return (scope) => {
+    queueEffect(scope, fn);
+  };
+}
+
+// src/dom/queue.ts
+var pendingRenders = [];
+var pendingEffects = [];
+var rendering = false;
+function queueSource(scope, signal, value2) {
+  const prevRendering = rendering;
+  rendering = true;
+  signal(scope, MARK);
+  rendering = prevRendering;
+  queueRender(scope, signal, value2);
+}
+function queueRender(scope, signal, value2) {
+  let i = pendingRenders.length;
+  const render = {
+    ___scope: scope,
+    ___signal: signal,
+    ___value: value2,
+    ___depth: scope.___closestBranch?.___branchDepth || 0,
+    ___index: i
+  };
+  pendingRenders.push(render);
+  while (i) {
+    const parentIndex = i - 1 >> 1;
+    const parent = pendingRenders[parentIndex];
+    if (comparePendingRenders(render, parent) >= 0) break;
+    pendingRenders[i] = parent;
+    i = parentIndex;
   }
-  const branch = createBranch($global, parentScope, parentScope);
-  branch[true ? `#${tagNameOrRenderer}/0` : 0] = branch.___startNode = branch.___endNode = document.createElementNS(
-    tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI,
-    tagNameOrRenderer
-  );
-  return branch;
+  pendingRenders[i] = render;
 }
-function createBranch($global, ownerScope, parentScope) {
-  const branch = createScope($global);
-  const parentBranch = parentScope.___closestBranch;
-  branch._ = ownerScope;
-  branch.___closestBranch = branch;
-  if (parentBranch) {
-    branch.___branchDepth = parentBranch.___branchDepth + 1;
-    branch.___parentBranch = parentBranch;
-    (parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(branch);
-  } else {
-    branch.___branchDepth = 1;
+function queueEffect(scope, fn) {
+  pendingEffects.push(scope, fn);
+}
+function run() {
+  const effects = pendingEffects;
+  try {
+    rendering = true;
+    runRenders();
+  } finally {
+    pendingRenders = [];
+    pendingEffects = [];
+    rendering = false;
   }
-  return branch;
+  runEffects(effects);
 }
-function initBranch(renderer, branch, parentNode) {
-  const clone = renderer.___clone(parentNode.namespaceURI);
-  const cloneParent = clone.parentNode;
-  if (cloneParent) {
-    walk(cloneParent.firstChild, renderer.___walks, branch);
-    branch.___startNode = cloneParent.firstChild;
-    branch.___endNode = cloneParent.lastChild;
-  } else {
-    walk(clone, renderer.___walks, branch);
-    branch.___startNode = branch.___endNode = clone;
+function prepareEffects(fn) {
+  const prevRenders = pendingRenders;
+  const prevEffects = pendingEffects;
+  const preparedEffects = pendingEffects = [];
+  pendingRenders = [];
+  try {
+    rendering = true;
+    fn();
+    runRenders();
+  } finally {
+    rendering = false;
+    pendingRenders = prevRenders;
+    pendingEffects = prevEffects;
   }
-  if (renderer.___setup) {
-    queueRender(branch, renderer.___setup);
+  return preparedEffects;
+}
+function runEffects(effects) {
+  for (let i = 0; i < effects.length; i += 2 /* Total */) {
+    const scope = effects[i];
+    const fn = effects[i + 1];
+    fn(scope, scope);
   }
 }
-function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
-  return (scope, attrsOrOp) => {
-    const renderer = scope[nodeAccessor + "(" /* ConditionalRenderer */];
-    if (!renderer || attrsOrOp === DIRTY) {
-      return;
-    }
-    const childScope = scope[nodeAccessor + "!" /* ConditionalScope */];
-    if (attrsOrOp === MARK || attrsOrOp === CLEAN) {
-      return renderer.___args?.(childScope, attrsOrOp);
-    }
-    const content = getContent?.(scope);
-    if (typeof renderer === "string") {
-      const nodeAccessor2 = true ? `#${renderer}/0` : 0;
-      if (renderer === "textarea" && content) {
-        throw new Error(
-          "A dynamic tag rendering a `<textarea>` cannot have `content` and must use the `value` attribute instead."
-        );
+function runRenders() {
+  while (pendingRenders.length) {
+    const render = pendingRenders[0];
+    const next = pendingRenders.pop();
+    if (render !== next) {
+      let i = 0;
+      const mid = pendingRenders.length >> 1;
+      const item = pendingRenders[0] = next;
+      while (i < mid) {
+        let bestChild = (i << 1) + 1;
+        const right = bestChild + 1;
+        if (right < pendingRenders.length && comparePendingRenders(
+          pendingRenders[right],
+          pendingRenders[bestChild]
+        ) < 0) {
+          bestChild = right;
+        }
+        if (comparePendingRenders(pendingRenders[bestChild], item) >= 0) {
+          break;
+        } else {
+          pendingRenders[i] = pendingRenders[bestChild];
+          i = bestChild;
+        }
       }
-      setConditionalRendererOnlyChild(
-        childScope,
-        nodeAccessor2,
-        content,
-        createBranchScopeWithTagNameOrRenderer
-      );
-      attrs(childScope, nodeAccessor2, attrsOrOp());
-    } else if (renderer.___args) {
-      const attributes = attrsOrOp();
-      renderer.___args(
-        childScope,
-        inputIsArgs ? attributes : [
-          content ? {
-            ...attributes,
-            content
-          } : attributes
-        ]
-      );
+      pendingRenders[i] = item;
     }
-  };
+    if (!render.___scope.___closestBranch?.___destroyed) {
+      render.___signal(render.___scope, render.___value);
+    }
+  }
+  finishPendingScopes();
 }
-function createRendererWithOwner(template, rawWalks, setup, getArgs) {
-  let args;
-  const id = true ? Symbol("Marko Renderer") : {};
-  const walks = rawWalks ? /* @__PURE__ */ trimWalkString(rawWalks) : " ";
-  return (owner) => {
-    return {
-      ___id: id,
-      ___template: template,
-      ___walks: walks,
-      ___setup: setup,
-      ___clone: _clone,
-      ___owner: owner,
-      get ___args() {
-        return args ||= getArgs?.();
-      }
-    };
-  };
+function comparePendingRenders(a, b) {
+  return a.___depth - b.___depth || a.___index - b.___index;
 }
-function createRenderer(template, walks, setup, getArgs) {
-  return createRendererWithOwner(template, walks, setup, getArgs)();
+
+// src/dom/abort-signal.ts
+function resetAbortSignal(scope, id) {
+  const ctrl = scope.___abortControllers?.[id];
+  if (ctrl) {
+    queueEffect(ctrl, abort);
+    scope.___abortControllers[id] = void 0;
+  }
 }
-function _clone(ns) {
-  return ((cloneCache[ns] ||= {})[this.___template] ||= createCloneableHTML(
-    this.___template,
-    ns
-  ))();
+function getAbortSignal(scope, id) {
+  if (scope.___closestBranch) {
+    (scope.___closestBranch.___abortScopes ||= /* @__PURE__ */ new Set()).add(scope);
+  }
+  return ((scope.___abortControllers ||= {})[id] ||= new AbortController()).signal;
 }
-var cloneCache = {};
-function createCloneableHTML(html2, ns) {
-  const { firstChild, lastChild } = parseHTML(html2, ns);
-  const parent = document.createElementNS(ns, "t");
-  insertChildNodes(parent, null, firstChild, lastChild);
-  return firstChild === lastChild && firstChild.nodeType < 8 /* Comment */ ? () => firstChild.cloneNode(true) : () => parent.cloneNode(true).firstChild;
+function abort(ctrl) {
+  ctrl.abort();
 }
 
-// src/dom/control-flow.ts
-function conditional(nodeAccessor, ...branches) {
-  const branchAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
-  return (scope, newBranchIndexOrOp) => {
-    if (newBranchIndexOrOp !== scope[branchAccessor] && newBranchIndexOrOp !== DIRTY && newBranchIndexOrOp !== MARK && newBranchIndexOrOp !== CLEAN) {
-      (scope[nodeAccessor].nodeType > 1 /* Element */ ? setConditionalRenderer : setConditionalRendererOnlyChild)(
-        scope,
-        nodeAccessor,
-        branches[scope[branchAccessor] = newBranchIndexOrOp],
-        createBranchScopeWithRenderer
-      );
-    }
-  };
-}
-function patchDynamicTag(fn) {
-  dynamicTag = fn(dynamicTag);
-}
-var dynamicTag = function dynamicTag2(nodeAccessor, fn, getIntersection) {
-  const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
-  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
-  return (scope, newRendererOrOp) => {
-    if (newRendererOrOp === DIRTY) return;
-    const currentRenderer = scope[rendererAccessor];
-    let op = newRendererOrOp;
-    if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
-      const normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
-      if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
-        scope[rendererAccessor] = normalizedRenderer;
-        setConditionalRenderer(
-          scope,
-          nodeAccessor,
-          normalizedRenderer,
-          createBranchScopeWithTagNameOrRenderer
-        );
-        fn && fn(scope);
-        op = DIRTY;
-      } else {
-        op = CLEAN;
+// src/common/compat-meta.ts
+var prefix = true ? "$compat_" : "$C_";
+var RENDERER_REGISTER_ID = prefix + (true ? "renderer" : "r");
+var SET_SCOPE_REGISTER_ID = prefix + (true ? "setScope" : "s");
+var RENDER_BODY_ID = prefix + (true ? "renderBody" : "b");
+
+// src/dom/reconcile.ts
+var WRONG_POS = 2147483647;
+function reconcile(parent, oldBranches, newBranches, afterReference) {
+  let oldStart = 0;
+  let newStart = 0;
+  let oldEnd = oldBranches.length - 1;
+  let newEnd = newBranches.length - 1;
+  let oldStartBranch = oldBranches[oldStart];
+  let newStartBranch = newBranches[newStart];
+  let oldEndBranch = oldBranches[oldEnd];
+  let newEndBranch = newBranches[newEnd];
+  let i;
+  let j;
+  let k;
+  let nextSibling;
+  let oldBranch;
+  let newBranch;
+  outer: {
+    while (oldStartBranch === newStartBranch) {
+      ++oldStart;
+      ++newStart;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
+      }
+      oldStartBranch = oldBranches[oldStart];
+      newStartBranch = newBranches[newStart];
+    }
+    while (oldEndBranch === newEndBranch) {
+      --oldEnd;
+      --newEnd;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
       }
+      oldEndBranch = oldBranches[oldEnd];
+      newEndBranch = newBranches[newEnd];
     }
-    intersection2?.(scope, op);
-  };
-};
-function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch2) {
-  const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]);
-  const newBranch = newRenderer ? createBranch2(
-    newRenderer,
-    scope.$global,
-    scope,
-    prevBranch.___endNode.parentNode
-  ) : getEmptyBranch(scope[nodeAccessor]);
-  if (prevBranch !== newBranch) {
-    insertBranchBefore(
-      newBranch,
-      prevBranch.___endNode.parentNode,
-      prevBranch.___endNode.nextSibling
-    );
-    removeAndDestroyBranch(prevBranch);
-    scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch;
   }
-}
-function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer, createBranch2) {
-  const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
-  const referenceNode = scope[nodeAccessor];
-  const newBranch = newRenderer && createBranch2(newRenderer, scope.$global, scope, referenceNode);
-  referenceNode.textContent = "";
-  if (newBranch) {
-    insertBranchBefore(newBranch, referenceNode, null);
-  }
-  prevBranch && destroyBranch(prevBranch);
-  scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
-}
-var emptyMarkerMap = /* @__PURE__ */ new Map([
-  [Symbol(), /* @__PURE__ */ getEmptyBranch(0)]
-]);
-var emptyMarkerArray = [
-  /* @__PURE__ */ getEmptyBranch(0)
-];
-var emptyMap = /* @__PURE__ */ new Map();
-var emptyArray = [];
-function loopOf(nodeAccessor, renderer) {
-  return loop(
-    nodeAccessor,
-    renderer,
-    ([all, by = bySecondArg], cb) => {
-      if (typeof by === "string") {
-        forOf(
-          all,
-          (item, i) => cb(item[by], [item, i])
-        );
-      } else {
-        forOf(all, (item, i) => cb(by(item, i), [item, i]));
-      }
+  if (oldStart > oldEnd) {
+    if (newStart <= newEnd) {
+      k = newEnd + 1;
+      nextSibling = k < newBranches.length ? newBranches[k].___startNode : afterReference;
+      do {
+        insertBranchBefore(newBranches[newStart++], parent, nextSibling);
+      } while (newStart <= newEnd);
     }
-  );
-}
-function loopIn(nodeAccessor, renderer) {
-  return loop(
-    nodeAccessor,
-    renderer,
-    ([obj, by = byFirstArg], cb) => forIn(obj, (key, value2) => cb(by(key, value2), [key, value2]))
-  );
-}
-function loopTo(nodeAccessor, renderer) {
-  return loop(
-    nodeAccessor,
-    renderer,
-    ([to, from, step, by = byFirstArg], cb) => forTo(to, from, step, (v) => cb(by(v), [v]))
-  );
-}
-function loop(nodeAccessor, renderer, forEach) {
-  const loopScopeAccessor = nodeAccessor + "!" /* LoopScopeArray */;
-  const params = renderer.___args;
-  return (scope, valueOrOp) => {
-    if (valueOrOp === DIRTY) return;
-    if (valueOrOp === MARK || valueOrOp === CLEAN) {
-      const loopBranches = scope[loopScopeAccessor] ?? scope[nodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
-      if (loopBranches !== emptyMarkerArray) {
-        for (const branch of loopBranches) {
-          params?.(branch, valueOrOp);
-        }
+  } else if (newStart > newEnd) {
+    do {
+      removeAndDestroyBranch(oldBranches[oldStart++]);
+    } while (oldStart <= oldEnd);
+  } else {
+    const oldLength = oldEnd - oldStart + 1;
+    const newLength = newEnd - newStart + 1;
+    const aNullable = oldBranches;
+    const sources = new Array(newLength);
+    for (i = 0; i < newLength; ++i) {
+      sources[i] = -1;
+    }
+    let pos = 0;
+    let synced = 0;
+    const keyIndex = /* @__PURE__ */ new Map();
+    for (j = newStart; j <= newEnd; ++j) {
+      keyIndex.set(newBranches[j], j);
+    }
+    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
+      oldBranch = oldBranches[i];
+      j = keyIndex.get(oldBranch);
+      if (j !== void 0) {
+        pos = pos > j ? WRONG_POS : j;
+        ++synced;
+        newBranch = newBranches[j];
+        sources[j - newStart] = i;
+        aNullable[i] = null;
       }
-      return;
     }
-    const referenceNode = scope[nodeAccessor];
-    const referenceIsMarker = referenceNode.nodeType > 1 /* Element */;
-    const oldMap = scope[nodeAccessor + "(" /* LoopScopeMap */] || (referenceIsMarker ? emptyMarkerMap : emptyMap);
-    const oldArray = scope[nodeAccessor + "!" /* LoopScopeArray */] || Array.from(oldMap.values());
-    const parentNode = referenceIsMarker ? referenceNode.parentNode || oldArray[0].___startNode.parentNode : referenceNode;
-    let newMap;
-    let newArray;
-    let afterReference;
-    let needsReconciliation = true;
-    forEach(valueOrOp, (key, args) => {
-      let branch = oldMap.get(key);
-      if (!branch) {
-        branch = createBranchScopeWithRenderer(
-          renderer,
-          scope.$global,
-          scope,
-          parentNode
-        );
-      } else {
+    if (oldLength === oldBranches.length && synced === 0) {
+      for (; newStart < newLength; ++newStart) {
+        insertBranchBefore(newBranches[newStart], parent, afterReference);
       }
-      if (params) {
-        params(branch, args);
+      for (; oldStart < oldLength; ++oldStart) {
+        removeAndDestroyBranch(oldBranches[oldStart]);
       }
-      if (newMap) {
-        newMap.set(key, branch);
-        newArray.push(branch);
-      } else {
-        newMap = /* @__PURE__ */ new Map([[key, branch]]);
-        newArray = [branch];
+    } else {
+      i = oldLength - synced;
+      while (i > 0) {
+        oldBranch = aNullable[oldStart++];
+        if (oldBranch !== null) {
+          removeAndDestroyBranch(oldBranch);
+          i--;
+        }
       }
-    });
-    if (!newMap) {
-      if (referenceIsMarker) {
-        newMap = emptyMarkerMap;
-        newArray = emptyMarkerArray;
-        getEmptyBranch(referenceNode);
-      } else {
-        oldArray.forEach(destroyBranch);
-        referenceNode.textContent = "";
-        newMap = emptyMap;
-        newArray = emptyArray;
-        needsReconciliation = false;
+      if (pos === WRONG_POS) {
+        const seq = longestIncreasingSubsequence(sources);
+        j = seq.length - 1;
+        k = newBranches.length;
+        for (i = newLength - 1; i >= 0; --i) {
+          if (sources[i] === -1) {
+            pos = i + newStart;
+            newBranch = newBranches[pos++];
+            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+            insertBranchBefore(newBranch, parent, nextSibling);
+          } else {
+            if (j < 0 || i !== seq[j]) {
+              pos = i + newStart;
+              newBranch = newBranches[pos++];
+              nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+              insertBranchBefore(newBranch, parent, nextSibling);
+            } else {
+              --j;
+            }
+          }
+        }
+      } else if (synced !== newLength) {
+        k = newBranches.length;
+        for (i = newLength - 1; i >= 0; --i) {
+          if (sources[i] === -1) {
+            pos = i + newStart;
+            newBranch = newBranches[pos++];
+            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+            insertBranchBefore(newBranch, parent, nextSibling);
+          }
+        }
       }
     }
-    if (needsReconciliation) {
-      if (referenceIsMarker) {
-        if (oldMap === emptyMarkerMap) {
-          getEmptyBranch(referenceNode);
-        }
-        const oldLastChild = oldArray[oldArray.length - 1];
-        afterReference = oldLastChild.___endNode.nextSibling;
+  }
+}
+function longestIncreasingSubsequence(a) {
+  const p = a.slice();
+  const result = [0];
+  let u;
+  let v;
+  for (let i = 0, il = a.length; i < il; ++i) {
+    if (a[i] === -1) {
+      continue;
+    }
+    const j = result[result.length - 1];
+    if (a[j] < a[i]) {
+      p[i] = j;
+      result.push(i);
+      continue;
+    }
+    u = 0;
+    v = result.length - 1;
+    while (u < v) {
+      const c = (u + v) / 2 | 0;
+      if (a[result[c]] < a[i]) {
+        u = c + 1;
       } else {
-        afterReference = null;
+        v = c;
       }
-      reconcile(parentNode, oldArray, newArray, afterReference);
     }
-    scope[nodeAccessor + "(" /* LoopScopeMap */] = newMap;
-    scope[nodeAccessor + "!" /* LoopScopeArray */] = newArray;
-  };
-}
-function bySecondArg(_item, index) {
-  return index;
+    if (a[i] < a[result[u]]) {
+      if (u > 0) {
+        p[i] = result[u - 1];
+      }
+      result[u] = i;
+    }
+  }
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
+  }
+  return result;
 }
-function byFirstArg(name) {
-  return name;
+
+// src/dom/walker.ts
+var walker = /* @__PURE__ */ document.createTreeWalker(document);
+function trimWalkString(walkString) {
+  let end = walkString.length;
+  while (walkString.charCodeAt(--end) > 47 /* BeginChild */) ;
+  return walkString.slice(0, end + 1);
 }
-function isDifferentRenderer(a, b) {
-  return a !== b && (a?.___id || 0) !== b?.___id;
+function walk(startNode, walkCodes, branch) {
+  walker.currentNode = startNode;
+  walkInternal(0, walkCodes, branch);
 }
-
-// src/dom/schedule.ts
-var runTask;
-var port2 = /* @__PURE__ */ (() => {
-  const { port1, port2: port22 } = new MessageChannel();
-  port1.onmessage = () => {
-    isScheduled = false;
-    if (true) {
-      const run2 = runTask;
-      runTask = void 0;
-      run2();
-    } else {
-      run();
-    }
-  };
-  return port22;
-})();
-var isScheduled;
-function schedule() {
-  if (!isScheduled) {
-    if (true) {
-      if (console.createTask) {
-        const task = console.createTask("queue");
-        runTask = () => task.run(run);
-      } else {
-        runTask = run;
+function walkInternal(currentWalkIndex, walkCodes, scope) {
+  let value2;
+  let storedMultiplier = 0;
+  let currentMultiplier = 0;
+  let currentScopeIndex = 0;
+  for (; currentWalkIndex < walkCodes.length; ) {
+    value2 = walkCodes.charCodeAt(currentWalkIndex++);
+    currentMultiplier = storedMultiplier;
+    storedMultiplier = 0;
+    if (value2 === 32 /* Get */) {
+      scope[true ? getDebugKey(currentScopeIndex++, walker.currentNode) : currentScopeIndex++] = walker.currentNode;
+    } else if (value2 === 37 /* Replace */) {
+      walker.currentNode.replaceWith(
+        walker.currentNode = scope[true ? getDebugKey(currentScopeIndex++, "#text") : currentScopeIndex++] = new Text()
+      );
+    } else if (value2 === 38 /* EndChild */) {
+      return currentWalkIndex;
+    } else if (value2 === 47 /* BeginChild */) {
+      currentWalkIndex = walkInternal(
+        currentWalkIndex,
+        walkCodes,
+        scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global, scope.___closestBranch)
+      );
+    } else if (value2 < 91 /* NextEnd */ + 1) {
+      value2 = 20 /* Next */ * currentMultiplier + value2 - 67 /* Next */;
+      while (value2--) {
+        walker.nextNode();
+      }
+    } else if (value2 < 106 /* OverEnd */ + 1) {
+      value2 = 10 /* Over */ * currentMultiplier + value2 - 97 /* Over */;
+      while (value2--) {
+        walker.nextSibling();
+      }
+    } else if (value2 < 116 /* OutEnd */ + 1) {
+      value2 = 10 /* Out */ * currentMultiplier + value2 - 107 /* Out */;
+      while (value2--) {
+        walker.parentNode();
+      }
+      walker.nextSibling();
+    } else {
+      if (value2 < 117 /* Multiplier */ || value2 > 126 /* MultiplierEnd */) {
+        throw new Error(`Unknown walk code: ${value2}`);
       }
+      storedMultiplier = currentMultiplier * 10 /* Multiplier */ + value2 - 117 /* Multiplier */;
     }
-    isScheduled = true;
-    queueMicrotask(flushAndWaitFrame);
   }
 }
-function flushAndWaitFrame() {
-  if (true) {
-    runTask();
-  } else {
-    run();
+function getDebugKey(index, node) {
+  if (typeof node === "string") {
+    return `${node}/${index}`;
+  } else if (node.nodeType === 3 /* Text */) {
+    return `#text/${index}`;
+  } else if (node.nodeType === 8 /* Comment */) {
+    return `#comment/${index}`;
+  } else if (node.nodeType === 1 /* Element */) {
+    return `#${node.tagName.toLowerCase()}/${index}`;
   }
-  requestAnimationFrame(triggerMacroTask);
-}
-function triggerMacroTask() {
-  port2.postMessage(0);
+  return index;
 }
 
-// src/dom/signals.ts
-var MARK = true ? Symbol("mark") : {};
-var CLEAN = true ? Symbol("clean") : {};
-var DIRTY = true ? Symbol("dirty") : {};
-function state(valueAccessor, fn, getIntersection) {
-  const valueSignal = value(valueAccessor, fn, getIntersection);
-  const markAccessor = valueAccessor + "#" /* Mark */;
-  const valueChangeAccessor = valueAccessor + "@" /* TagVariableChange */;
-  return (scope, valueOrOp, valueChange) => {
-    if (rendering) {
-      const valueIsOp = valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY;
-      valueSignal(
-        scope,
-        valueIsOp || (scope[valueChangeAccessor] = valueChange) || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
-      );
-    } else if (scope[valueChangeAccessor]) {
-      scope[valueChangeAccessor](valueOrOp);
-    } else {
-      schedule();
-      queueSource(scope, valueSignal, valueOrOp);
-    }
-    return valueOrOp;
-  };
+// src/dom/renderer.ts
+function createBranchScopeWithRenderer(renderer, $global, parentScope, parentNode) {
+  const branch = createBranch(
+    $global,
+    renderer.___owner || parentScope,
+    parentScope
+  );
+  if (true) {
+    branch.___renderer = renderer;
+  }
+  initBranch(renderer, branch, parentNode);
+  return branch;
 }
-function value(valueAccessor, fn, getIntersection) {
-  const markAccessor = valueAccessor + "#" /* Mark */;
-  let intersection2;
-  return (scope, valueOrOp) => {
-    if (valueOrOp === MARK) {
-      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
-        getIntersection && (intersection2 ||= getIntersection())(scope, MARK);
-      }
-    } else if (valueOrOp !== DIRTY) {
-      const existing = scope[markAccessor] !== void 0;
-      if ((scope[markAccessor] ||= 1) === 1) {
-        if (valueOrOp === CLEAN || existing && scope[valueAccessor] === valueOrOp) {
-          getIntersection && (intersection2 ||= getIntersection())(scope, CLEAN);
-        } else {
-          scope[valueAccessor] = valueOrOp;
-          fn && fn(scope, valueOrOp);
-          getIntersection && (intersection2 ||= getIntersection())(scope, DIRTY);
-        }
-      }
-      scope[markAccessor]--;
-    }
-  };
+function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope, parentNode) {
+  if (typeof tagNameOrRenderer !== "string") {
+    return createBranchScopeWithRenderer(
+      tagNameOrRenderer,
+      $global,
+      parentScope,
+      parentNode
+    );
+  }
+  const branch = createBranch($global, parentScope, parentScope);
+  branch[true ? `#${tagNameOrRenderer}/0` : 0] = branch.___startNode = branch.___endNode = document.createElementNS(
+    tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI,
+    tagNameOrRenderer
+  );
+  return branch;
 }
-var accessorId = 0;
-function intersection(count, fn, getIntersection) {
-  const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
-  const markAccessor = dirtyAccessor + "#" /* Mark */;
-  let intersection2;
-  return (scope, op) => {
-    if (op === MARK) {
-      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
-        getIntersection && (intersection2 ||= getIntersection())(scope, MARK);
-      }
-    } else if (scope[markAccessor] === void 0) {
-      scope[markAccessor] = count - 1;
-      scope[dirtyAccessor] = true;
-    } else if (--scope[markAccessor] === 0) {
-      if (op === DIRTY || scope[dirtyAccessor]) {
-        scope[dirtyAccessor] = false;
-        fn(scope);
-        getIntersection && (intersection2 ||= getIntersection())(scope, DIRTY);
-      } else {
-        getIntersection && (intersection2 ||= getIntersection())(scope, CLEAN);
-      }
-    } else {
-      scope[dirtyAccessor] ||= op === DIRTY;
-    }
-  };
+function createBranch($global, ownerScope, parentScope) {
+  const branch = createScope($global);
+  const parentBranch = parentScope.___closestBranch;
+  branch._ = ownerScope;
+  branch.___closestBranch = branch;
+  if (parentBranch) {
+    branch.___branchDepth = parentBranch.___branchDepth + 1;
+    branch.___parentBranch = parentBranch;
+    (parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(branch);
+  } else {
+    branch.___branchDepth = 1;
+  }
+  return branch;
 }
-function loopClosure(valueAccessor, ownerLoopNodeAccessor, fn, getIntersection) {
-  const childSignal = closure(valueAccessor, fn, getIntersection);
-  const loopScopeAccessor = ownerLoopNodeAccessor + "!" /* LoopScopeArray */;
-  const loopScopeMapAccessor = ownerLoopNodeAccessor + "(" /* LoopScopeMap */;
-  const ownerSignal = (ownerScope) => {
-    const loopScopes = ownerScope[loopScopeAccessor] ?? ownerScope[loopScopeMapAccessor]?.values() ?? [];
-    if (loopScopes !== emptyMarkerArray) {
-      for (const scope of loopScopes) {
-        if (!scope.___pending) {
-          queueSource(scope, childSignal);
-        }
-      }
-    }
-  };
-  ownerSignal._ = childSignal;
-  return ownerSignal;
+function initBranch(renderer, branch, parentNode) {
+  const clone = renderer.___clone(parentNode.namespaceURI);
+  const cloneParent = clone.parentNode;
+  if (cloneParent) {
+    walk(cloneParent.firstChild, renderer.___walks, branch);
+    branch.___startNode = cloneParent.firstChild;
+    branch.___endNode = cloneParent.lastChild;
+  } else {
+    walk(clone, renderer.___walks, branch);
+    branch.___startNode = branch.___endNode = clone;
+  }
+  if (renderer.___setup) {
+    queueRender(branch, renderer.___setup);
+  }
 }
-function conditionalClosure(valueAccessor, ownerConditionalNodeAccessor, branch, fn, getIntersection) {
-  const childSignal = closure(valueAccessor, fn, getIntersection);
-  const scopeAccessor = ownerConditionalNodeAccessor + "!" /* ConditionalScope */;
-  const branchAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */;
-  const ownerSignal = (scope) => {
-    const ifScope = scope[scopeAccessor];
-    if (ifScope && !ifScope.___pending && scope[branchAccessor] === branch) {
-      queueSource(ifScope, childSignal);
+function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
+  return (scope, attrsOrOp) => {
+    const renderer = scope[nodeAccessor + "(" /* ConditionalRenderer */];
+    if (!renderer || attrsOrOp === DIRTY) {
+      return;
     }
-  };
-  ownerSignal._ = childSignal;
-  return ownerSignal;
-}
-function dynamicClosure(valueAccessor, fn, getIntersection, getOwnerScope) {
-  const subscribersAccessor = "?" /* Dynamic */ + accessorId++;
-  const childSignal = closure(
-    valueAccessor,
-    fn,
-    getIntersection,
-    getOwnerScope
-  );
-  const ownerSignal = (ownerScope) => {
-    const subscribers = ownerScope[subscribersAccessor];
-    if (subscribers) {
-      for (const subscriber of subscribers) {
-        if (!subscriber.___pending) {
-          queueSource(subscriber, childSignal);
-        }
-      }
+    const childScope = scope[nodeAccessor + "!" /* ConditionalScope */];
+    if (attrsOrOp === MARK || attrsOrOp === CLEAN) {
+      return renderer.___args?.(childScope, attrsOrOp);
     }
-  };
-  const subscribe = (scope) => {
-    const owner = getOwnerScope ? getOwnerScope(scope) : scope._;
-    const subscribers = owner[subscribersAccessor] ||= /* @__PURE__ */ new Set();
-    if (!subscribers.has(scope)) {
-      subscribers.add(scope);
-      getAbortSignal(scope, -1).addEventListener(
-        "abort",
-        () => owner[subscribersAccessor].delete(scope)
+    const content = getContent?.(scope);
+    if (typeof renderer === "string") {
+      const nodeAccessor2 = true ? `#${renderer}/0` : 0;
+      if (renderer === "textarea" && content) {
+        throw new Error(
+          "A dynamic tag rendering a `<textarea>` cannot have `content` and must use the `value` attribute instead."
+        );
+      }
+      setConditionalRenderer(
+        childScope,
+        nodeAccessor2,
+        content,
+        createBranchScopeWithTagNameOrRenderer
+      );
+      attrs(childScope, nodeAccessor2, attrsOrOp());
+    } else if (renderer.___args) {
+      const attributes = attrsOrOp();
+      renderer.___args(
+        childScope,
+        inputIsArgs ? attributes : [
+          content ? {
+            ...attributes,
+            content
+          } : attributes
+        ]
       );
     }
   };
-  ownerSignal.___subscribe = subscribe;
-  ownerSignal._ = (scope) => {
-    childSignal(scope);
-    subscribe(scope);
-  };
-  return ownerSignal;
-}
-function registerDynamicClosure(id, valueAccessor, fn, getIntersection, getOwnerScope) {
-  const signal = dynamicClosure(
-    valueAccessor,
-    fn,
-    getIntersection,
-    getOwnerScope
-  );
-  register(id, signal.___subscribe);
-  return signal;
 }
-function closure(valueAccessor, fn, getIntersection, getOwnerScope) {
-  let intersection2;
-  return (scope, op) => {
-    op || fn && fn(
-      scope,
-      (getOwnerScope ? getOwnerScope(scope) : scope._)[valueAccessor]
-    );
-    getIntersection && (intersection2 ||= getIntersection())(scope, op ? MARK : DIRTY);
+function createRendererWithOwner(template, rawWalks, setup, getArgs) {
+  let args;
+  const id = true ? Symbol("Marko Renderer") : {};
+  const walks = rawWalks ? /* @__PURE__ */ trimWalkString(rawWalks) : " ";
+  return (owner) => {
+    return {
+      ___id: id,
+      ___template: template,
+      ___walks: walks,
+      ___setup: setup,
+      ___clone: _clone,
+      ___owner: owner,
+      get ___args() {
+        return args ||= getArgs?.();
+      }
+    };
   };
 }
-function setTagVar(scope, childAccessor, tagVarSignal2) {
-  scope[childAccessor]["/" /* TagVariable */] = (valueOrOp) => tagVarSignal2(scope, valueOrOp);
-}
-var tagVarSignal = (scope, valueOrOp) => scope["/" /* TagVariable */]?.(valueOrOp);
-function setTagVarChange(scope, changeHandler) {
-  scope["@" /* TagVariableChange */] = changeHandler;
+function createRenderer(template, walks, setup, getArgs) {
+  return createRendererWithOwner(template, walks, setup, getArgs)();
 }
-var tagVarSignalChange = (scope, value2) => scope["@" /* TagVariableChange */]?.(value2);
-var tagIdsByGlobal = /* @__PURE__ */ new WeakMap();
-function nextTagId({ $global }) {
-  const id = tagIdsByGlobal.get($global) || 0;
-  tagIdsByGlobal.set($global, id + 1);
-  return "c" + $global.runtimeId + $global.renderId + id.toString(36);
+function _clone(ns) {
+  return ((cloneCache[ns] ||= {})[this.___template] ||= createCloneableHTML(
+    this.___template,
+    ns
+  ))();
 }
-function inChild(childAccessor, signal) {
-  return (scope, valueOrOp) => {
-    signal(scope[childAccessor], valueOrOp);
-  };
+var cloneCache = {};
+function createCloneableHTML(html2, ns) {
+  const { firstChild, lastChild } = parseHTML(html2, ns);
+  const parent = document.createElementNS(ns, "t");
+  insertChildNodes(parent, null, firstChild, lastChild);
+  return firstChild === lastChild && firstChild.nodeType < 8 /* Comment */ ? () => firstChild.cloneNode(true) : () => parent.cloneNode(true).firstChild;
 }
-function intersections(signals) {
-  return (scope, op) => {
-    for (const signal of signals) {
-      signal(scope, op);
+
+// src/dom/control-flow.ts
+function conditional(nodeAccessor, ...branches) {
+  const branchAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
+  return (scope, newBranchIndexOrOp) => {
+    if (newBranchIndexOrOp !== scope[branchAccessor] && newBranchIndexOrOp !== DIRTY && newBranchIndexOrOp !== MARK && newBranchIndexOrOp !== CLEAN) {
+      setConditionalRenderer(
+        scope,
+        nodeAccessor,
+        branches[scope[branchAccessor] = newBranchIndexOrOp],
+        createBranchScopeWithRenderer
+      );
     }
   };
 }
-function effect(id, fn) {
-  register(id, fn);
-  return (scope) => {
-    queueEffect(scope, fn);
-  };
-}
-
-// src/dom/queue.ts
-var pendingRenders = [];
-var pendingEffects = [];
-var rendering = false;
-function queueSource(scope, signal, value2) {
-  const prevRendering = rendering;
-  rendering = true;
-  signal(scope, MARK);
-  rendering = prevRendering;
-  queueRender(scope, signal, value2);
+function patchDynamicTag(fn) {
+  dynamicTag = fn(dynamicTag);
 }
-function queueRender(scope, signal, value2) {
-  let i = pendingRenders.length;
-  const render = {
-    ___scope: scope,
-    ___signal: signal,
-    ___value: value2,
-    ___depth: scope.___closestBranch?.___branchDepth || 0,
-    ___index: i
+var dynamicTag = function dynamicTag2(nodeAccessor, fn, getIntersection) {
+  const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
+  return (scope, newRendererOrOp) => {
+    if (newRendererOrOp === DIRTY) return;
+    const currentRenderer = scope[rendererAccessor];
+    let op = newRendererOrOp;
+    if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
+      if (isDifferentRenderer(
+        currentRenderer,
+        scope[rendererAccessor] = normalizeDynamicRenderer(newRendererOrOp)
+      )) {
+        setConditionalRenderer(
+          scope,
+          nodeAccessor,
+          scope[rendererAccessor],
+          createBranchScopeWithTagNameOrRenderer
+        );
+        fn && fn(scope);
+        op = DIRTY;
+      } else {
+        op = CLEAN;
+      }
+    }
+    intersection2?.(scope, op);
   };
-  pendingRenders.push(render);
-  while (i) {
-    const parentIndex = i - 1 >> 1;
-    const parent = pendingRenders[parentIndex];
-    if (comparePendingRenders(render, parent) >= 0) break;
-    pendingRenders[i] = parent;
-    i = parentIndex;
+};
+function setConditionalRenderer(scope, nodeAccessor, newRenderer, createBranch2) {
+  const referenceNode = scope[nodeAccessor];
+  const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
+  const parentNode = referenceNode.nodeType > 1 /* Element */ ? (prevBranch?.___startNode || referenceNode).parentNode : referenceNode;
+  const newBranch = scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && createBranch2(newRenderer, scope.$global, scope, parentNode);
+  if (referenceNode === parentNode) {
+    if (prevBranch) {
+      destroyBranch(prevBranch);
+      referenceNode.textContent = "";
+    }
+    if (newBranch) {
+      insertBranchBefore(newBranch, parentNode, null);
+    }
+  } else if (prevBranch) {
+    if (newBranch) {
+      insertBranchBefore(newBranch, parentNode, prevBranch.___startNode);
+    } else {
+      parentNode.insertBefore(referenceNode, prevBranch.___startNode);
+    }
+    removeAndDestroyBranch(prevBranch);
+  } else if (newBranch) {
+    insertBranchBefore(newBranch, parentNode, referenceNode);
+    referenceNode.remove();
   }
-  pendingRenders[i] = render;
 }
-function queueEffect(scope, fn) {
-  pendingEffects.push(scope, fn);
-}
-function run() {
-  const effects = pendingEffects;
-  try {
-    rendering = true;
-    runRenders();
-  } finally {
-    pendingRenders = [];
-    pendingEffects = [];
-    rendering = false;
-  }
-  runEffects(effects);
+function loopOf(nodeAccessor, renderer) {
+  return loop(
+    nodeAccessor,
+    renderer,
+    ([all, by = bySecondArg], cb) => {
+      if (typeof by === "string") {
+        forOf(
+          all,
+          (item, i) => cb(item[by], [item, i])
+        );
+      } else {
+        forOf(all, (item, i) => cb(by(item, i), [item, i]));
+      }
+    }
+  );
 }
-function prepareEffects(fn) {
-  const prevRenders = pendingRenders;
-  const prevEffects = pendingEffects;
-  const preparedEffects = pendingEffects = [];
-  pendingRenders = [];
-  try {
-    rendering = true;
-    fn();
-    runRenders();
-  } finally {
-    rendering = false;
-    pendingRenders = prevRenders;
-    pendingEffects = prevEffects;
-  }
-  return preparedEffects;
+function loopIn(nodeAccessor, renderer) {
+  return loop(
+    nodeAccessor,
+    renderer,
+    ([obj, by = byFirstArg], cb) => forIn(obj, (key, value2) => cb(by(key, value2), [key, value2]))
+  );
 }
-function runEffects(effects) {
-  for (let i = 0; i < effects.length; i += 2 /* Total */) {
-    const scope = effects[i];
-    const fn = effects[i + 1];
-    fn(scope, scope);
-  }
+function loopTo(nodeAccessor, renderer) {
+  return loop(
+    nodeAccessor,
+    renderer,
+    ([to, from, step, by = byFirstArg], cb) => forTo(to, from, step, (v) => cb(by(v), [v]))
+  );
 }
-function runRenders() {
-  while (pendingRenders.length) {
-    const render = pendingRenders[0];
-    const next = pendingRenders.pop();
-    if (render !== next) {
-      let i = 0;
-      const mid = pendingRenders.length >> 1;
-      const item = pendingRenders[0] = next;
-      while (i < mid) {
-        let bestChild = (i << 1) + 1;
-        const right = bestChild + 1;
-        if (right < pendingRenders.length && comparePendingRenders(
-          pendingRenders[right],
-          pendingRenders[bestChild]
-        ) < 0) {
-          bestChild = right;
+function loop(nodeAccessor, renderer, forEach) {
+  const loopScopeAccessor = nodeAccessor + "!" /* LoopScopeArray */;
+  const params = renderer.___args;
+  return (scope, valueOrOp) => {
+    if (valueOrOp === DIRTY) {
+    } else if (valueOrOp === MARK || valueOrOp === CLEAN) {
+      if (params) {
+        for (const branch of scope[loopScopeAccessor] || scope[nodeAccessor + "(" /* LoopScopeMap */]?.values() || []) {
+          params(branch, valueOrOp);
         }
-        if (comparePendingRenders(pendingRenders[bestChild], item) >= 0) {
-          break;
-        } else {
-          pendingRenders[i] = pendingRenders[bestChild];
-          i = bestChild;
+      }
+    } else {
+      const referenceNode = scope[nodeAccessor];
+      const oldMap = scope[nodeAccessor + "(" /* LoopScopeMap */];
+      const oldArray = oldMap ? scope[nodeAccessor + "!" /* LoopScopeArray */] || [
+        ...oldMap.values()
+      ] : [];
+      const parentNode = referenceNode.nodeType > 1 /* Element */ ? referenceNode.parentNode || oldArray[0].___startNode.parentNode : referenceNode;
+      const newMap = scope[nodeAccessor + "(" /* LoopScopeMap */] = /* @__PURE__ */ new Map();
+      const newArray = scope[nodeAccessor + "!" /* LoopScopeArray */] = [];
+      forEach(valueOrOp, (key, args) => {
+        const branch = oldMap?.get(key) || createBranchScopeWithRenderer(
+          renderer,
+          scope.$global,
+          scope,
+          parentNode
+        );
+        params?.(branch, args);
+        newMap.set(key, branch);
+        newArray.push(branch);
+      });
+      let afterReference = null;
+      if (referenceNode !== parentNode) {
+        if (oldArray.length) {
+          afterReference = oldArray[oldArray.length - 1].___endNode.nextSibling;
+          if (!newArray.length) {
+            parentNode.insertBefore(referenceNode, afterReference);
+          }
+        } else if (newArray.length) {
+          afterReference = referenceNode.nextSibling;
+          referenceNode.remove();
         }
       }
-      pendingRenders[i] = item;
-    }
-    if (!render.___scope.___closestBranch?.___destroyed) {
-      render.___signal(render.___scope, render.___value);
+      reconcile(parentNode, oldArray, newArray, afterReference);
     }
-  }
-  finishPendingScopes();
-}
-function comparePendingRenders(a, b) {
-  return a.___depth - b.___depth || a.___index - b.___index;
+  };
 }
-
-// src/dom/abort-signal.ts
-function resetAbortSignal(scope, id) {
-  const ctrl = scope.___abortControllers?.[id];
-  if (ctrl) {
-    queueEffect(ctrl, abort);
-    scope.___abortControllers[id] = void 0;
-  }
+function bySecondArg(_item, index) {
+  return index;
 }
-function getAbortSignal(scope, id) {
-  if (scope.___closestBranch) {
-    (scope.___closestBranch.___abortScopes ||= /* @__PURE__ */ new Set()).add(scope);
-  }
-  return ((scope.___abortControllers ||= {})[id] ||= new AbortController()).signal;
+function byFirstArg(name) {
+  return name;
 }
-function abort(ctrl) {
-  ctrl.abort();
+function isDifferentRenderer(a, b) {
+  return a !== b && (a?.___id || 0) !== b?.___id;
 }
 
-// src/common/compat-meta.ts
-var prefix = true ? "$compat_" : "$C_";
-var RENDERER_REGISTER_ID = prefix + (true ? "renderer" : "r");
-var SET_SCOPE_REGISTER_ID = prefix + (true ? "setScope" : "s");
-var RENDER_BODY_ID = prefix + (true ? "renderBody" : "b");
-
 // src/dom/compat.ts
 var classIdToBranch = /* @__PURE__ */ new Map();
 var compat = {