marko 6.0.0-next.3.22 → 6.0.0-next.3.23

package/dist/debug/dom.js

@@ -25,11 +25,10 @@ __export(dom_exports, {
   attrTags: () => attrTags,
   attrs: () => attrs,
   attrsEvents: () => attrsEvents,
-  childClosures: () => childClosures,
   classAttr: () => classAttr,
-  closure: () => closure,
   compat: () => compat,
   conditional: () => conditional,
+  conditionalClosure: () => conditionalClosure,
   conditionalOnlyChild: () => conditionalOnlyChild,
   controllable_detailsOrDialog_open: () => controllable_detailsOrDialog_open,
   controllable_detailsOrDialog_open_effect: () => controllable_detailsOrDialog_open_effect,
@@ -49,7 +48,6 @@ __export(dom_exports, {
   createTemplate: () => createTemplate,
   data: () => data,
   dynamicClosure: () => dynamicClosure,
-  dynamicSubscribers: () => dynamicSubscribers,
   dynamicTagAttrs: () => dynamicTagAttrs,
   effect: () => effect,
   forIn: () => forIn,
@@ -58,12 +56,11 @@ __export(dom_exports, {
   getAbortSignal: () => getAbortSignal,
   html: () => html,
   inChild: () => inChild,
-  inConditionalScope: () => inConditionalScope,
-  inLoopScope: () => inLoopScope,
   init: () => init,
   intersection: () => intersection,
   intersections: () => intersections,
   lifecycle: () => lifecycle,
+  loopClosure: () => loopClosure,
   loopIn: () => loopIn,
   loopOf: () => loopOf,
   loopTo: () => loopTo,
@@ -177,564 +174,62 @@ function triggerMacroTask() {
   port2.postMessage(0);
 }
 
-// src/common/meta.ts
-var DEFAULT_RUNTIME_ID = "M";
-var DEFAULT_RENDER_ID = "_";
-
-// src/dom/scope.ts
-var debugID = 0;
-function createScope($global) {
-  const scope = {
-    ___client: 1,
-    $global
-  };
-  if (true) {
-    scope.___debugId = debugID++;
-  }
-  return scope;
-}
-var emptyScope = createScope({});
-function getEmptyScope(marker) {
-  emptyScope.___startNode = emptyScope.___endNode = marker;
-  return emptyScope;
-}
-function destroyScope(scope) {
-  _destroyScope(scope);
-  scope.___cleanupOwner?.___cleanup?.delete(scope);
-  const closureSignals = scope.___renderer?.___closureSignals;
-  if (closureSignals) {
-    for (const signal of closureSignals) {
-      signal.___unsubscribe?.(scope);
-    }
-  }
-  return scope;
-}
-function _destroyScope(scope) {
-  scope.___cleanup?.forEach(_destroyScope);
-  const controllers = scope.___abortControllers;
-  if (controllers) {
-    for (const ctrl of controllers.values()) {
-      ctrl.abort();
-    }
-  }
-}
-function onDestroy(scope) {
-  let parentScope = scope.___cleanupOwner;
-  while (parentScope && !parentScope.___cleanup?.has(scope)) {
-    (parentScope.___cleanup ||= /* @__PURE__ */ new Set()).add(scope);
-    scope = parentScope;
-    parentScope = scope.___cleanupOwner;
-  }
-}
-function removeAndDestroyScope(scope) {
-  destroyScope(scope);
-  let current = scope.___startNode;
-  const stop = scope.___endNode.nextSibling;
-  while (current !== stop) {
-    const next = current.nextSibling;
-    current.remove();
-    current = next;
-  }
-}
-function insertBefore(scope, parent, nextSibling) {
-  let current = scope.___startNode;
-  const stop = scope.___endNode.nextSibling;
-  while (current !== stop) {
-    const next = current.nextSibling;
-    parent.insertBefore(current, nextSibling);
-    current = next;
-  }
-}
-
-// src/dom/resume.ts
-var registeredValues = {};
-var Render = class {
-  ___scopeStack = [];
-  ___scopeLookup = {};
-  ___serializeContext = {
-    _: registeredValues
-  };
-  constructor(renders, runtimeId, renderId) {
-    this.___renders = renders;
-    this.___runtimeId = runtimeId;
-    this.___renderId = renderId;
-    this.___data = renders[renderId];
-    this.___resume();
-  }
-  w() {
-    this.___data.w();
-    this.___resume();
-  }
-  ___resume() {
-    const data2 = this.___data;
-    const serializeContext = this.___serializeContext;
-    const scopeLookup = this.___scopeLookup;
-    const visits = data2.v;
-    const cleanupOwners = /* @__PURE__ */ new Map();
-    if (visits.length) {
-      const commentPrefix = data2.i;
-      const commentPrefixLen = commentPrefix.length;
-      const cleanupMarkers = /* @__PURE__ */ new Map();
-      data2.v = [];
-      const sectionEnd = (visit, scopeId = this.___currentScopeId, curNode = visit) => {
-        const scope = scopeLookup[scopeId] ||= {};
-        let endNode = curNode;
-        while ((endNode = endNode.previousSibling).nodeType === 8) ;
-        scope.___endNode = endNode;
-        const startNode = scope.___startNode ||= endNode;
-        let len = cleanupMarkers.size;
-        for (const [markerScopeId, markerNode] of cleanupMarkers) {
-          if (!len--) break;
-          if (markerScopeId !== scopeId && startNode.compareDocumentPosition(markerNode) & 4 && curNode.compareDocumentPosition(markerNode) & 2) {
-            cleanupOwners.set("" + markerScopeId, scopeId);
-            cleanupMarkers.delete(markerScopeId);
-          }
-        }
-        cleanupMarkers.set(scopeId, visit);
-        return scope;
-      };
-      for (const visit of visits) {
-        const commentText = visit.data;
-        const token = commentText[commentPrefixLen];
-        const scopeId = parseInt(commentText.slice(commentPrefixLen + 1));
-        const scope = scopeLookup[scopeId] ||= {};
-        const dataIndex = commentText.indexOf(" ") + 1;
-        const data3 = dataIndex ? commentText.slice(dataIndex) : "";
-        if (token === "*" /* Node */) {
-          scope[data3] = visit.previousSibling;
-        } else if (token === "$" /* Cleanup */) {
-          cleanupMarkers.set(scopeId, visit);
-        } else if (token === "[" /* SectionStart */) {
-          if (this.___currentScopeId) {
-            if (data3) {
-              sectionEnd(visit);
-            }
-            this.___scopeStack.push(this.___currentScopeId);
-          }
-          this.___currentScopeId = scopeId;
-          scope.___startNode = visit;
-        } else if (token === "]" /* SectionEnd */) {
-          scope[data3] = visit;
-          if (scopeId < this.___currentScopeId) {
-            const currParent = visit.parentNode;
-            const startNode = sectionEnd(visit).___startNode;
-            if (currParent && currParent !== startNode.parentNode) {
-              currParent.prepend(startNode);
-            }
-            this.___currentScopeId = this.___scopeStack.pop();
-          }
-        } else if (token === "|" /* SectionSingleNodesEnd */) {
-          scope[true ? data3.slice(0, data3.indexOf(" ")) : parseInt(data3)] = visit;
-          const childScopeIds = JSON.parse(
-            "[" + data3.slice(data3.indexOf(" ") + 1) + "]"
-          );
-          let curNode = visit;
-          for (let i = childScopeIds.length - 1; i >= 0; i--) {
-            curNode = sectionEnd(visit, childScopeIds[i], curNode).___endNode;
-          }
-        }
-      }
-    }
-    const resumes = data2.r;
-    if (resumes) {
-      data2.r = [];
-      const len = resumes.length;
-      let i = 0;
-      try {
-        isResuming = true;
-        while (i < len) {
-          const resumeData = resumes[i++];
-          if (typeof resumeData === "function") {
-            const scopes = resumeData(serializeContext);
-            let { $global } = scopeLookup;
-            if (!$global) {
-              scopeLookup.$global = $global = scopes.$ || {};
-              $global.runtimeId = this.___runtimeId;
-              $global.renderId = this.___renderId;
-            }
-            for (const scopeId in scopes) {
-              if (scopeId !== "$") {
-                const scope = scopes[scopeId];
-                const prevScope = scopeLookup[scopeId];
-                scope.$global = $global;
-                if (prevScope !== scope) {
-                  scopeLookup[scopeId] = Object.assign(
-                    scope,
-                    prevScope
-                  );
-                }
-                const cleanupOwnerId = cleanupOwners.get(scopeId);
-                if (cleanupOwnerId) {
-                  scope.___cleanupOwner = scopes[cleanupOwnerId];
-                  onDestroy(scope);
-                }
-              }
-            }
-          } else if (i === len || typeof resumes[i] !== "string") {
-            delete this.___renders[this.___renderId];
-          } else {
-            registeredValues[resumes[i++]](
-              scopeLookup[resumeData],
-              scopeLookup[resumeData]
-            );
-          }
-        }
-      } finally {
-        isResuming = false;
-      }
-    }
-  }
-};
-var isResuming = false;
-function register(id, obj) {
-  registeredValues[id] = obj;
-  return obj;
-}
-function registerBoundSignal(id, signal) {
-  registeredValues[id] = (scope) => (valueOrOp) => signal(scope, valueOrOp);
-  return signal;
-}
-function getRegisteredWithScope(id, scope) {
-  const val = registeredValues[id];
-  return scope ? val(scope) : val;
-}
-function init(runtimeId = DEFAULT_RUNTIME_ID) {
-  if (true) {
-    if (!runtimeId.match(/^[_$a-z][_$a-z0-9]*$/i)) {
-      throw new Error(
-        `Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`
-      );
-    }
-  }
-  const resumeRender = (renderId) => resumeRender[renderId] = renders[renderId] = new Render(renders, runtimeId, renderId);
-  let renders;
-  if (window[runtimeId]) {
-    setRenders(window[runtimeId]);
-  } else {
-    Object.defineProperty(window, runtimeId, {
-      configurable: true,
-      set: setRenders
-    });
-  }
-  function setRenders(v) {
-    if (true) {
-      if (renders) {
-        throw new Error(
-          "Marko tried to initialize multiple times. It could be that there are multiple instances of Marko running on the page."
-        );
-      }
-    }
-    renders = v;
-    for (const renderId in v) {
-      resumeRender(renderId);
-    }
-    Object.defineProperty(window, runtimeId, {
-      configurable: true,
-      value: resumeRender
-    });
-  }
-}
-function registerSubscriber(id, signal) {
-  register(id, signal.___subscribe);
-  return signal;
-}
-function nodeRef(id, key) {
-  return register(id, (scope) => () => scope[key]);
-}
-
-// 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 {
-      queueSource(scope, valueSignal, valueOrOp);
-    }
-    return valueOrOp;
-  };
-}
-function value(valueAccessor, fn, getIntersection) {
-  const markAccessor = valueAccessor + "#" /* Mark */;
-  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
-  return (scope, valueOrOp) => {
-    if (valueOrOp === MARK) {
-      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
-        intersection2?.(scope, MARK);
-      }
-    } else if (valueOrOp !== DIRTY) {
-      const existing = scope[markAccessor] !== void 0;
-      if ((scope[markAccessor] ||= 1) === 1) {
-        if (valueOrOp === CLEAN || existing && scope[valueAccessor] === valueOrOp) {
-          intersection2?.(scope, CLEAN);
-        } else {
-          scope[valueAccessor] = valueOrOp;
-          fn && fn(scope, valueOrOp);
-          intersection2?.(scope, DIRTY);
-        }
-      }
-      scope[markAccessor]--;
-    }
-  };
-}
-var accessorId = 0;
-function intersection(count, fn, getIntersection) {
-  const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
-  const markAccessor = dirtyAccessor + "#" /* Mark */;
-  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
-  return (scope, op) => {
-    if (op === MARK) {
-      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
-        intersection2?.(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, 0);
-        intersection2?.(scope, DIRTY);
-      } else {
-        intersection2?.(scope, CLEAN);
-      }
-    } else {
-      scope[dirtyAccessor] ||= op === DIRTY;
-    }
-  };
-}
-var defaultGetOwnerScope = (scope) => scope._;
-function closure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, getIntersection) {
-  const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
-  const markAccessor = dirtyAccessor + 1;
-  const getOwnerValueAccessor = typeof ownerValueAccessor === "function" ? ownerValueAccessor : () => ownerValueAccessor;
-  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
-  return (scope, op) => {
-    if (op === MARK) {
-      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
-        intersection2?.(scope, MARK);
-      }
-    } else {
-      let ownerScope, ownerValueAccessor2;
-      if (scope[markAccessor] === void 0) {
-        ownerScope = getOwnerScope(scope);
-        ownerValueAccessor2 = getOwnerValueAccessor(scope);
-        const ownerMark = ownerScope[ownerValueAccessor2 + "#" /* Mark */];
-        const ownerHasRun = ownerMark === void 0 ? !ownerScope.___client : ownerMark === 0;
-        scope[markAccessor] = ownerHasRun ? 1 : 2;
-        op = DIRTY;
-      }
-      if (--scope[markAccessor] === 0) {
-        if (op === DIRTY || scope[dirtyAccessor]) {
-          scope[dirtyAccessor] = false;
-          ownerScope ||= getOwnerScope(scope);
-          ownerValueAccessor2 ||= getOwnerValueAccessor(scope);
-          fn && fn(scope, ownerScope[ownerValueAccessor2]);
-          intersection2?.(scope, DIRTY);
-        } else {
-          intersection2?.(scope, CLEAN);
-        }
-      } else {
-        scope[dirtyAccessor] ||= op === DIRTY;
-      }
-    }
-  };
-}
-function dynamicClosure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, getIntersection) {
-  const getOwnerValueAccessor = typeof ownerValueAccessor === "function" ? ownerValueAccessor : () => ownerValueAccessor;
-  const signalFn = closure(
-    getOwnerValueAccessor,
-    fn,
-    getOwnerScope,
-    getIntersection
-  );
-  const subscribeFns = /* @__PURE__ */ new WeakMap();
-  signalFn.___subscribe = (scope) => {
-    const subscribeFn = (value2) => signalFn(scope, value2);
-    const ownerScope = getOwnerScope(scope);
-    const providerSubscriptionsAccessor = getOwnerValueAccessor(scope) + "*" /* Subscribers */;
-    subscribeFns.set(scope, subscribeFn);
-    (ownerScope[providerSubscriptionsAccessor] ||= /* @__PURE__ */ new Set()).add(subscribeFn);
-  };
-  signalFn.___unsubscribe = (scope) => {
-    const ownerScope = getOwnerScope(scope);
-    const providerSubscriptionsAccessor = getOwnerValueAccessor(scope) + "*" /* Subscribers */;
-    ownerScope[providerSubscriptionsAccessor]?.delete(subscribeFns.get(scope));
-    subscribeFns.delete(scope);
-  };
-  return signalFn;
-}
-function childClosures(closureSignals, childAccessor) {
-  const signal = (scope, op) => {
-    const childScope = scope[childAccessor];
-    for (const closureSignal of closureSignals) {
-      closureSignal(childScope, op);
-    }
-  };
-  signal.___subscribe = (scope) => {
-    const childScope = scope[childAccessor];
-    for (const closureSignal of closureSignals) {
-      closureSignal.___subscribe?.(childScope);
-    }
-  };
-  signal.___unsubscribe = (scope) => {
-    const childScope = scope[childAccessor];
-    for (const closureSignal of closureSignals) {
-      closureSignal.___unsubscribe?.(childScope);
-    }
-  };
-  return signal;
-}
-function dynamicSubscribers(valueAccessor) {
-  const subscribersAccessor = valueAccessor + "*" /* Subscribers */;
-  return (scope, op) => {
-    const subscribers = scope[subscribersAccessor];
-    if (subscribers) {
-      for (const subscriber of subscribers) {
-        subscriber(op);
-      }
-    }
-  };
-}
-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 contentClosures = (content, childScope, op) => {
-  const signals = content?.___closureSignals;
-  if (signals) {
-    for (const signal of signals) {
-      signal(childScope, op);
-    }
-  }
-};
-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/scope.ts
+var pendingScopes = [];
+var debugID = 0;
+function createScope($global) {
+  const scope = {
+    ___pending: 1,
+    $global
   };
-}
-
-// src/dom/queue.ts
-var pendingSignals = [];
-var pendingEffects = [];
-var rendering = false;
-function queueSource(scope, signal, value2) {
-  schedule();
-  rendering = true;
-  signal(scope, MARK);
-  rendering = false;
-  pendingSignals.push(scope, signal, value2);
-  return value2;
-}
-function queueEffect(scope, fn) {
-  pendingEffects.push(scope, fn);
-}
-function run() {
-  const signals = pendingSignals;
-  const effects = pendingEffects;
-  try {
-    rendering = true;
-    pendingSignals = [];
-    runSignals(signals);
-  } finally {
-    rendering = false;
+  if (true) {
+    scope.___debugId = "client-" + debugID++;
   }
-  pendingEffects = [];
-  runEffects(effects);
+  pendingScopes.push(scope);
+  return scope;
 }
-function prepareEffects(fn) {
-  const prevSignals = pendingSignals;
-  const prevEffects = pendingEffects;
-  const preparedEffects = pendingEffects = [];
-  const preparedSignals = pendingSignals = [];
-  try {
-    rendering = true;
-    fn();
-    pendingSignals = prevSignals;
-    runSignals(preparedSignals);
-  } finally {
-    rendering = false;
-    pendingSignals = prevSignals;
-    pendingEffects = prevEffects;
+function finishPendingScopes() {
+  for (const scope of pendingScopes) {
+    scope.___pending = 0;
   }
-  return preparedEffects;
+  pendingScopes = [];
 }
-function runEffects(effects = pendingEffects) {
-  for (let i = 0; i < effects.length; i += 2 /* Total */) {
-    const scope = effects[i];
-    const fn = effects[i + 1];
-    fn(scope, scope);
-  }
+var emptyScope = createScope({});
+function getEmptyScope(marker) {
+  emptyScope.___startNode = emptyScope.___endNode = marker;
+  return emptyScope;
 }
-function runSignals(signals) {
-  for (let i = 0; i < signals.length; i += 3 /* Total */) {
-    const scope = signals[i + 0 /* Scope */];
-    const signal = signals[i + 1 /* Signal */];
-    const value2 = signals[i + 2 /* Value */];
-    signal(scope, value2);
+function destroyBranch(branch) {
+  branch.___destroyed = 1;
+  branch.___branchScopes?.forEach(destroyBranch);
+  if (branch.___abortScopes) {
+    for (const scope of branch.___abortScopes) {
+      for (const id in scope.___abortControllers) {
+        scope.___abortControllers[id]?.abort();
+      }
+    }
   }
 }
-
-// src/dom/abort-signal.ts
-function resetAbortSignal(scope, id) {
-  const controllers = scope.___abortControllers;
-  if (controllers) {
-    const ctrl = controllers.get(id);
-    if (ctrl) {
-      queueEffect(null, () => ctrl.abort());
-      controllers.delete(id);
-    }
+function removeAndDestroyBranch(branch) {
+  destroyBranch(branch);
+  let current = branch.___startNode;
+  const stop = branch.___endNode.nextSibling;
+  while (current !== stop) {
+    const next = current.nextSibling;
+    current.remove();
+    current = next;
   }
 }
-function getAbortSignal(scope, id) {
-  const controllers = scope.___abortControllers ||= /* @__PURE__ */ new Map();
-  let controller = controllers.get(id);
-  if (!controller) {
-    onDestroy(scope);
-    controllers.set(id, controller = new AbortController());
+function insertBefore(scope, parent, nextSibling) {
+  let current = scope.___startNode;
+  const stop = scope.___endNode.nextSibling;
+  while (current !== stop) {
+    const next = current.nextSibling;
+    parent.insertBefore(current, nextSibling);
+    current = next;
   }
-  return controller.signal;
 }
 
-// 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");
-
 // src/common/helpers.ts
 function classValue(value2) {
   return toDelimitedString(value2, " ", stringifyClassObject);
@@ -792,57 +287,57 @@ function normalizeDynamicRenderer(value2) {
 
 // src/dom/reconcile.ts
 var WRONG_POS = 2147483647;
-function reconcile(parent, oldScopes, newScopes, afterReference) {
+function reconcile(parent, oldBranches, newBranches, afterReference) {
   let oldStart = 0;
   let newStart = 0;
-  let oldEnd = oldScopes.length - 1;
-  let newEnd = newScopes.length - 1;
-  let oldStartScope = oldScopes[oldStart];
-  let newStartScope = newScopes[newStart];
-  let oldEndScope = oldScopes[oldEnd];
-  let newEndScope = newScopes[newEnd];
+  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 oldScope;
-  let newScope;
+  let oldBranch;
+  let newBranch;
   outer: {
-    while (oldStartScope === newStartScope) {
+    while (oldStartBranch === newStartBranch) {
       ++oldStart;
       ++newStart;
       if (oldStart > oldEnd || newStart > newEnd) {
         break outer;
       }
-      oldStartScope = oldScopes[oldStart];
-      newStartScope = newScopes[newStart];
+      oldStartBranch = oldBranches[oldStart];
+      newStartBranch = newBranches[newStart];
     }
-    while (oldEndScope === newEndScope) {
+    while (oldEndBranch === newEndBranch) {
       --oldEnd;
       --newEnd;
       if (oldStart > oldEnd || newStart > newEnd) {
         break outer;
       }
-      oldEndScope = oldScopes[oldEnd];
-      newEndScope = newScopes[newEnd];
+      oldEndBranch = oldBranches[oldEnd];
+      newEndBranch = newBranches[newEnd];
     }
   }
   if (oldStart > oldEnd) {
     if (newStart <= newEnd) {
       k = newEnd + 1;
-      nextSibling = k < newScopes.length ? newScopes[k].___startNode : afterReference;
+      nextSibling = k < newBranches.length ? newBranches[k].___startNode : afterReference;
       do {
-        insertBefore(newScopes[newStart++], parent, nextSibling);
+        insertBefore(newBranches[newStart++], parent, nextSibling);
       } while (newStart <= newEnd);
     }
   } else if (newStart > newEnd) {
     do {
-      removeAndDestroyScope(oldScopes[oldStart++]);
+      removeAndDestroyBranch(oldBranches[oldStart++]);
     } while (oldStart <= oldEnd);
   } else {
     const oldLength = oldEnd - oldStart + 1;
     const newLength = newEnd - newStart + 1;
-    const aNullable = oldScopes;
+    const aNullable = oldBranches;
     const sources = new Array(newLength);
     for (i = 0; i < newLength; ++i) {
       sources[i] = -1;
@@ -851,64 +346,64 @@ function reconcile(parent, oldScopes, newScopes, afterReference) {
     let synced = 0;
     const keyIndex = /* @__PURE__ */ new Map();
     for (j = newStart; j <= newEnd; ++j) {
-      keyIndex.set(newScopes[j], j);
+      keyIndex.set(newBranches[j], j);
     }
     for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
-      oldScope = oldScopes[i];
-      j = keyIndex.get(oldScope);
+      oldBranch = oldBranches[i];
+      j = keyIndex.get(oldBranch);
       if (j !== void 0) {
         pos = pos > j ? WRONG_POS : j;
         ++synced;
-        newScope = newScopes[j];
+        newBranch = newBranches[j];
         sources[j - newStart] = i;
         aNullable[i] = null;
       }
     }
-    if (oldLength === oldScopes.length && synced === 0) {
+    if (oldLength === oldBranches.length && synced === 0) {
       for (; newStart < newLength; ++newStart) {
-        insertBefore(newScopes[newStart], parent, afterReference);
+        insertBefore(newBranches[newStart], parent, afterReference);
       }
       for (; oldStart < oldLength; ++oldStart) {
-        removeAndDestroyScope(oldScopes[oldStart]);
+        removeAndDestroyBranch(oldBranches[oldStart]);
       }
     } else {
       i = oldLength - synced;
       while (i > 0) {
-        oldScope = aNullable[oldStart++];
-        if (oldScope !== null) {
-          removeAndDestroyScope(oldScope);
+        oldBranch = aNullable[oldStart++];
+        if (oldBranch !== null) {
+          removeAndDestroyBranch(oldBranch);
           i--;
         }
       }
       if (pos === WRONG_POS) {
         const seq = longestIncreasingSubsequence(sources);
         j = seq.length - 1;
-        k = newScopes.length;
+        k = newBranches.length;
         for (i = newLength - 1; i >= 0; --i) {
           if (sources[i] === -1) {
             pos = i + newStart;
-            newScope = newScopes[pos++];
-            nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
-            insertBefore(newScope, parent, nextSibling);
+            newBranch = newBranches[pos++];
+            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+            insertBefore(newBranch, parent, nextSibling);
           } else {
             if (j < 0 || i !== seq[j]) {
               pos = i + newStart;
-              newScope = newScopes[pos++];
-              nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
-              insertBefore(newScope, parent, nextSibling);
+              newBranch = newBranches[pos++];
+              nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+              insertBefore(newBranch, parent, nextSibling);
             } else {
               --j;
             }
           }
         }
       } else if (synced !== newLength) {
-        k = newScopes.length;
+        k = newBranches.length;
         for (i = newLength - 1; i >= 0; --i) {
           if (sources[i] === -1) {
             pos = i + newStart;
-            newScope = newScopes[pos++];
-            nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
-            insertBefore(newScope, parent, nextSibling);
+            newBranch = newBranches[pos++];
+            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+            insertBefore(newBranch, parent, nextSibling);
           }
         }
       }
@@ -1015,13 +510,229 @@ function resolveCursorPosition(updatedValue, initialValue, initialPosition, inpu
         if (stripSpacesAndPunctuation(updatedValue[pos])) relevantIndex++;
         pos++;
       }
-      return pos;
+      return pos;
+    }
+  }
+  return -1;
+}
+function stripSpacesAndPunctuation(str) {
+  return str.replace(/[^\p{L}\p{N}]/gu, "");
+}
+
+// src/common/meta.ts
+var DEFAULT_RUNTIME_ID = "M";
+var DEFAULT_RENDER_ID = "_";
+
+// src/dom/resume.ts
+var registeredValues = {};
+var Render = class {
+  ___scopeStack = [];
+  ___scopeLookup = {};
+  ___serializeContext = {
+    _: registeredValues
+  };
+  constructor(renders, runtimeId, renderId) {
+    this.___renders = renders;
+    this.___runtimeId = runtimeId;
+    this.___renderId = renderId;
+    this.___data = renders[renderId];
+    this.___resume();
+  }
+  w() {
+    this.___data.w();
+    this.___resume();
+  }
+  ___resume() {
+    const data2 = this.___data;
+    const serializeContext = this.___serializeContext;
+    const scopeLookup = this.___scopeLookup;
+    const visits = data2.v;
+    const branchIds = /* @__PURE__ */ new Set();
+    const parentBranchIds = /* @__PURE__ */ new Map();
+    if (visits.length) {
+      const commentPrefix = data2.i;
+      const commentPrefixLen = commentPrefix.length;
+      const closestBranchMarkers = /* @__PURE__ */ new Map();
+      data2.v = [];
+      const branchEnd = (branchId, visit, curNode) => {
+        const branch = scopeLookup[branchId] ||= {};
+        let endNode = curNode;
+        while ((endNode = endNode.previousSibling).nodeType === 8) ;
+        branch.___endNode = endNode;
+        branch.___startNode ||= endNode;
+        for (const [markerScopeId, markerNode] of closestBranchMarkers) {
+          if (branch.___startNode.compareDocumentPosition(markerNode) & 4 && curNode.compareDocumentPosition(markerNode) & 2) {
+            parentBranchIds.set(markerScopeId, branchId);
+            closestBranchMarkers.delete(markerScopeId);
+          }
+        }
+        branchIds.add(branchId);
+        closestBranchMarkers.set(branchId, visit);
+        return branch;
+      };
+      for (const visit of visits) {
+        const commentText = visit.data;
+        const dataIndex = commentText.indexOf(" ") + 1;
+        const scopeId = commentText.slice(
+          commentPrefixLen + 1,
+          dataIndex ? dataIndex - 1 : commentText.length
+        );
+        const scope = scopeLookup[scopeId] ||= {};
+        const data3 = dataIndex ? commentText.slice(dataIndex) : "";
+        const token = commentText[commentPrefixLen];
+        if (token === "*" /* Node */) {
+          scope[data3] = visit.previousSibling;
+        } else if (token === "$" /* ClosestBranch */) {
+          closestBranchMarkers.set(scopeId, visit);
+        } else if (token === "[" /* BranchStart */) {
+          if (this.___currentScopeId) {
+            if (dataIndex) {
+              branchEnd(this.___currentScopeId, visit, visit);
+            }
+            this.___scopeStack.push(this.___currentScopeId);
+          }
+          this.___currentScopeId = scopeId;
+          scope.___startNode = visit;
+        } else if (token === "]" /* BranchEnd */) {
+          scope[data3] = visit;
+          const curParent = visit.parentNode;
+          const startNode = branchEnd(
+            this.___currentScopeId,
+            visit,
+            visit
+          ).___startNode;
+          if (curParent !== startNode.parentNode) {
+            curParent.prepend(startNode);
+          }
+          this.___currentScopeId = this.___scopeStack.pop();
+        } else if (token === "|" /* BranchSingleNode */) {
+          let next = data3.indexOf(" ");
+          let curNode = scope[~next ? data3.slice(0, next) : data3] = visit;
+          while (~next) {
+            const start = next + 1;
+            next = data3.indexOf(" ", start);
+            const childScopeId = data3.slice(start, ~next ? next : data3.length);
+            curNode = branchEnd(childScopeId, visit, curNode).___endNode;
+          }
+        }
+      }
+    }
+    const resumes = data2.r;
+    if (resumes) {
+      data2.r = [];
+      const len = resumes.length;
+      let i = 0;
+      try {
+        isResuming = true;
+        while (i < len) {
+          const resumeData = resumes[i++];
+          if (typeof resumeData === "function") {
+            const scopes = resumeData(serializeContext);
+            let { $global } = scopeLookup;
+            if (!$global) {
+              scopeLookup.$global = $global = scopes.$ || {};
+              $global.runtimeId = this.___runtimeId;
+              $global.renderId = this.___renderId;
+            }
+            for (const scopeId in scopes) {
+              if (scopeId !== "$") {
+                const scope = scopes[scopeId];
+                const prevScope = scopeLookup[scopeId];
+                scope.$global = $global;
+                if (prevScope !== scope) {
+                  scopeLookup[scopeId] = Object.assign(
+                    scope,
+                    prevScope
+                  );
+                }
+                const parentBranchId = parentBranchIds.get(scopeId);
+                if (parentBranchId) {
+                  scope.___closestBranch = scopes[parentBranchId];
+                }
+                if (branchIds.has(scopeId)) {
+                  const branch = scope;
+                  const parentBranch = branch.___closestBranch;
+                  scope.___closestBranch = branch;
+                  if (parentBranch) {
+                    branch.___parentBranch = parentBranch;
+                    (parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(branch);
+                  }
+                }
+                if (true) {
+                  scope.___debugId = "server-" + scopeId;
+                }
+              }
+            }
+          } else if (i === len || typeof resumes[i] !== "string") {
+            delete this.___renders[this.___renderId];
+          } else {
+            registeredValues[resumes[i++]](
+              scopeLookup[resumeData],
+              scopeLookup[resumeData]
+            );
+          }
+        }
+      } finally {
+        isResuming = false;
+      }
+    }
+  }
+};
+var isResuming = false;
+function register(id, obj) {
+  registeredValues[id] = obj;
+  return obj;
+}
+function registerBoundSignal(id, signal) {
+  registeredValues[id] = (scope) => (valueOrOp) => signal(scope, valueOrOp);
+  return signal;
+}
+function getRegisteredWithScope(id, scope) {
+  const val = registeredValues[id];
+  return scope ? val(scope) : val;
+}
+function init(runtimeId = DEFAULT_RUNTIME_ID) {
+  if (true) {
+    if (!runtimeId.match(/^[_$a-z][_$a-z0-9]*$/i)) {
+      throw new Error(
+        `Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`
+      );
+    }
+  }
+  const resumeRender = (renderId) => resumeRender[renderId] = renders[renderId] = new Render(renders, runtimeId, renderId);
+  let renders;
+  if (window[runtimeId]) {
+    setRenders(window[runtimeId]);
+  } else {
+    Object.defineProperty(window, runtimeId, {
+      configurable: true,
+      set: setRenders
+    });
+  }
+  function setRenders(v) {
+    if (true) {
+      if (renders) {
+        throw new Error(
+          "Marko tried to initialize multiple times. It could be that there are multiple instances of Marko running on the page."
+        );
+      }
+    }
+    renders = v;
+    for (const renderId in v) {
+      resumeRender(renderId);
     }
+    Object.defineProperty(window, runtimeId, {
+      configurable: true,
+      value: resumeRender
+    });
   }
-  return -1;
 }
-function stripSpacesAndPunctuation(str) {
-  return str.replace(/[^\p{L}\p{N}]/gu, "");
+function registerSubscriber(id, signal) {
+  register(id, signal.___subscribe);
+  return signal;
+}
+function nodeRef(id, key) {
+  return register(id, (scope) => () => scope[key]);
 }
 
 // src/dom/controllable.ts
@@ -1123,10 +834,13 @@ function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
   } else {
     scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */;
   }
-  setSelectOptions(
-    scope[nodeAccessor],
-    value2,
-    valueChange
+  pendingEffects.unshift(
+    scope,
+    () => setSelectOptions(
+      scope[nodeAccessor],
+      value2,
+      valueChange
+    )
   );
 }
 function controllable_select_value_effect(scope, nodeAccessor) {
@@ -1339,7 +1053,8 @@ function textContent(node, value2) {
 }
 function attrs(scope, nodeAccessor, nextAttrs) {
   const el = scope[nodeAccessor];
-  for (const { name } of el.attributes) {
+  for (let i = el.attributes.length; i--; ) {
+    const { name } = el.attributes.item(i);
     if (!(nextAttrs && (name in nextAttrs || hasAttrAlias(el, name, nextAttrs)))) {
       el.removeAttribute(name);
     }
@@ -1352,7 +1067,8 @@ function hasAttrAlias(element, attr2, nextAttrs) {
 function partialAttrs(scope, nodeAccessor, nextAttrs, skip) {
   const el = scope[nodeAccessor];
   const partial = {};
-  for (const { name } of el.attributes) {
+  for (let i = el.attributes.length; i--; ) {
+    const { name } = el.attributes.item(i);
     if (!skip[name] && !(nextAttrs && name in nextAttrs)) {
       el.removeAttribute(name);
     }
@@ -1539,17 +1255,14 @@ function trimWalkString(walkString) {
 }
 function walk(startNode, walkCodes, scope) {
   walker.currentNode = startNode;
-  walkInternal(walkCodes, scope, scope, 0);
-  walker.currentNode = document.documentElement;
+  walkInternal(walkCodes, scope, 0);
+  walker.currentNode = document;
 }
-function walkInternal(walkCodes, scope, cleanupOwnerScope, currentWalkIndex) {
+function walkInternal(walkCodes, scope, currentWalkIndex) {
   let value2;
   let storedMultiplier = 0;
   let currentMultiplier = 0;
   let currentScopeIndex = 0;
-  if (cleanupOwnerScope !== scope) {
-    scope.___cleanupOwner = cleanupOwnerScope;
-  }
   while (value2 = walkCodes.charCodeAt(currentWalkIndex++)) {
     currentMultiplier = storedMultiplier;
     storedMultiplier = 0;
@@ -1572,12 +1285,10 @@ function walkInternal(walkCodes, scope, cleanupOwnerScope, currentWalkIndex) {
         walker.nextNode();
       }
     } else if (value2 === 47 /* BeginChild */) {
-      currentWalkIndex = walkInternal(
-        walkCodes,
-        scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global),
-        cleanupOwnerScope,
-        currentWalkIndex
-      );
+      const childScope = scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global);
+      childScope.___startNode = walker.currentNode;
+      childScope.___closestBranch = scope.___closestBranch;
+      currentWalkIndex = walkInternal(walkCodes, childScope, currentWalkIndex);
     } else if (value2 === 38 /* EndChild */) {
       return currentWalkIndex;
     } else if (value2 === 32 /* Get */) {
@@ -1609,26 +1320,40 @@ function getDebugKey(index, node) {
 }
 
 // src/dom/renderer.ts
-function createScopeWithRenderer(renderer, $global, ownerScope) {
-  const newScope = createScope($global);
-  newScope._ = newScope.___cleanupOwner = renderer.___owner || ownerScope;
-  newScope.___renderer = renderer;
-  initRenderer(renderer, newScope);
-  if (renderer.___closureSignals) {
-    for (const signal of renderer.___closureSignals) {
-      signal.___subscribe?.(newScope);
-    }
+function createBranchScopeWithRenderer(renderer, $global, parentScope) {
+  const branch = createBranch(
+    $global,
+    renderer.___owner || parentScope,
+    parentScope
+  );
+  if (true) {
+    branch.___renderer = renderer;
   }
-  return newScope;
+  initRenderer(renderer, branch);
+  return branch;
 }
-function createScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, ownerScope) {
+function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope) {
   if (typeof tagNameOrRenderer !== "string") {
-    return createScopeWithRenderer(tagNameOrRenderer, $global, ownerScope);
+    return createBranchScopeWithRenderer(
+      tagNameOrRenderer,
+      $global,
+      parentScope
+    );
+  }
+  const branch = createBranch($global, parentScope, parentScope);
+  branch[true ? `#${tagNameOrRenderer}/0` : 0] = branch.___startNode = branch.___endNode = document.createElement(tagNameOrRenderer);
+  return branch;
+}
+function createBranch($global, ownerScope, parentScope) {
+  const branch = createScope($global);
+  const parentBranch = parentScope.___closestBranch;
+  branch._ = ownerScope;
+  branch.___closestBranch = branch;
+  if (parentBranch) {
+    branch.___parentBranch = parentBranch;
+    (parentBranch.___branchScopes ||= /* @__PURE__ */ new Set()).add(branch);
   }
-  const newScope = createScope($global);
-  newScope._ = newScope.___cleanupOwner = ownerScope;
-  newScope[true ? `#${tagNameOrRenderer}/0` : 0] = newScope.___startNode = newScope.___endNode = document.createElement(tagNameOrRenderer);
-  return newScope;
+  return branch;
 }
 function initRenderer(renderer, scope) {
   const dom = renderer.___clone();
@@ -1640,7 +1365,7 @@ function initRenderer(renderer, scope) {
   scope.___startNode = dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom;
   scope.___endNode = dom.nodeType === 11 /* DocumentFragment */ ? dom.lastChild : dom;
   if (renderer.___setup) {
-    renderer.___setup(scope);
+    queueRender(scope, renderer.___setup);
   }
   return dom;
 }
@@ -1678,9 +1403,8 @@ function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
     }
   };
 }
-function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, getArgs) {
+function createRendererWithOwner(template, rawWalks, setup, getArgs) {
   let args;
-  let closureSignals;
   const id = true ? Symbol("Marko Renderer") : {};
   const walks = rawWalks ? /* @__PURE__ */ trimWalkString(rawWalks) : " ";
   return (owner) => {
@@ -1694,21 +1418,12 @@ function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, g
       ___sourceNode: void 0,
       get ___args() {
         return args ||= getArgs?.();
-      },
-      get ___closureSignals() {
-        return closureSignals ||= new Set(getClosureSignals?.());
       }
     };
   };
 }
-function createRenderer(template, walks, setup, getClosureSignals, getArgs) {
-  return createRendererWithOwner(
-    template,
-    walks,
-    setup,
-    getClosureSignals,
-    getArgs
-  )();
+function createRenderer(template, walks, setup, getArgs) {
+  return createRendererWithOwner(template, walks, setup, getArgs)();
 }
 function _clone() {
   return (this.___sourceNode ||= parseHTMLOrSingleNode(
@@ -1723,16 +1438,14 @@ function patchConditionals(fn) {
 }
 var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
-  const childScopeAccessor = nodeAccessor + "!" /* ConditionalScope */;
   let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
     if (newRendererOrOp === DIRTY) return;
-    let currentRenderer = scope[rendererAccessor];
+    const currentRenderer = scope[rendererAccessor];
     let op = newRendererOrOp;
     if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
       const normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
       if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
-        currentRenderer = scope[rendererAccessor] = normalizedRenderer;
         setConditionalRenderer(scope, nodeAccessor, normalizedRenderer);
         fn && fn(scope);
         op = DIRTY;
@@ -1741,46 +1454,22 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
       }
     }
     intersection2?.(scope, op);
-    contentClosures(currentRenderer, scope[childScopeAccessor], op);
   };
 };
-function inConditionalScope(signal, nodeAccessor) {
-  const scopeAccessor = nodeAccessor + "!" /* ConditionalScope */;
-  const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
-  return (scope, op) => {
-    const conditionalScope = scope[scopeAccessor];
-    if (conditionalScope) {
-      const conditionalRenderer = scope[rendererAccessor];
-      if (!conditionalRenderer?.___closureSignals || conditionalRenderer.___closureSignals.has(signal)) {
-        signal(conditionalScope, op);
-      }
-    }
-  };
-}
 function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
-  let newScope;
-  let prevScope = scope[nodeAccessor + "!" /* ConditionalScope */];
-  if (newRenderer) {
-    newScope = scope[nodeAccessor + "!" /* ConditionalScope */] = createScopeWithTagNameOrRenderer(
-      newRenderer,
-      scope.$global,
-      scope
-    );
-    prevScope = prevScope || getEmptyScope(scope[nodeAccessor]);
-  } else {
-    newScope = getEmptyScope(scope[nodeAccessor]);
-    scope[nodeAccessor + "!" /* ConditionalScope */] = void 0;
-  }
+  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : void 0;
+  const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyScope(scope[nodeAccessor]);
   insertBefore(
-    newScope,
-    prevScope.___startNode.parentNode,
-    prevScope.___startNode
+    newBranch || getEmptyScope(scope[nodeAccessor]),
+    prevBranch.___startNode.parentNode,
+    prevBranch.___startNode
   );
-  removeAndDestroyScope(prevScope);
+  removeAndDestroyBranch(prevBranch);
+  scope[nodeAccessor + "(" /* ConditionalRenderer */] = newRenderer;
+  scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
 var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersection) {
   const rendererAccessor = nodeAccessor + "(" /* ConditionalRenderer */;
-  const childScopeAccessor = nodeAccessor + "!" /* ConditionalScope */;
   let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
   return (scope, newRendererOrOp) => {
     if (newRendererOrOp === DIRTY) return;
@@ -1802,20 +1491,22 @@ var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersecti
       }
     }
     intersection2?.(scope, op);
-    contentClosures(currentRenderer, scope[childScopeAccessor], op);
   };
 };
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
-  const prevScope = scope[nodeAccessor + "!" /* ConditionalScope */];
+  const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
   const referenceNode = scope[nodeAccessor];
+  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : void 0;
   referenceNode.textContent = "";
-  if (newRenderer) {
-    const newScope = scope[nodeAccessor + "!" /* ConditionalScope */] = createScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope);
-    insertBefore(newScope, referenceNode, null);
+  if (newBranch) {
+    insertBefore(newBranch, referenceNode, null);
   }
-  prevScope && destroyScope(prevScope);
+  prevBranch && destroyBranch(prevBranch);
+  scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
-var emptyMarkerMap = /* @__PURE__ */ new Map([[Symbol(), getEmptyScope(void 0)]]);
+var emptyMarkerMap = /* @__PURE__ */ new Map([
+  [Symbol(), getEmptyScope(void 0)]
+]);
 var emptyMarkerArray = [
   /* @__PURE__ */ getEmptyScope(void 0)
 ];
@@ -1853,18 +1544,14 @@ function loopTo(nodeAccessor, renderer) {
 }
 function loop(nodeAccessor, renderer, forEach) {
   const loopScopeAccessor = nodeAccessor + "!" /* LoopScopeArray */;
-  const closureSignals = renderer.___closureSignals;
   const params = renderer.___args;
   return (scope, valueOrOp) => {
     if (valueOrOp === DIRTY) return;
     if (valueOrOp === MARK || valueOrOp === CLEAN) {
-      const loopScopes = scope[loopScopeAccessor] ?? scope[nodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
-      if (loopScopes !== emptyMarkerArray) {
-        for (const childScope of loopScopes) {
-          params?.(childScope, valueOrOp);
-          for (const signal of closureSignals) {
-            signal(childScope, valueOrOp);
-          }
+      const loopBranches = scope[loopScopeAccessor] ?? scope[nodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
+      if (loopBranches !== emptyMarkerArray) {
+        for (const branch of loopBranches) {
+          params?.(branch, valueOrOp);
         }
       }
       return;
@@ -1879,27 +1566,20 @@ function loop(nodeAccessor, renderer, forEach) {
     let parentNode;
     let needsReconciliation = true;
     forEach(valueOrOp, (key, args) => {
-      let childScope = oldMap.get(key);
-      let closureOp = CLEAN;
-      if (!childScope) {
-        childScope = createScopeWithRenderer(renderer, scope.$global, scope);
-        closureOp = DIRTY;
+      let branch = oldMap.get(key);
+      if (!branch) {
+        branch = createBranchScopeWithRenderer(renderer, scope.$global, scope);
       } else {
       }
       if (params) {
-        params(childScope, args);
-      }
-      if (closureSignals) {
-        for (const signal of closureSignals) {
-          signal(childScope, closureOp);
-        }
+        params(branch, args);
       }
       if (newMap) {
-        newMap.set(key, childScope);
-        newArray.push(childScope);
+        newMap.set(key, branch);
+        newArray.push(branch);
       } else {
-        newMap = /* @__PURE__ */ new Map([[key, childScope]]);
-        newArray = [childScope];
+        newMap = /* @__PURE__ */ new Map([[key, branch]]);
+        newArray = [branch];
       }
     });
     if (!newMap) {
@@ -1908,7 +1588,7 @@ function loop(nodeAccessor, renderer, forEach) {
         newArray = emptyMarkerArray;
         getEmptyScope(referenceNode);
       } else {
-        oldArray.forEach(destroyScope);
+        oldArray.forEach(destroyBranch);
         referenceNode.textContent = "";
         newMap = emptyMap;
         newArray = emptyArray;
@@ -1933,17 +1613,6 @@ function loop(nodeAccessor, renderer, forEach) {
     scope[nodeAccessor + "!" /* LoopScopeArray */] = newArray;
   };
 }
-function inLoopScope(signal, loopNodeAccessor) {
-  const loopScopeAccessor = loopNodeAccessor + "!" /* LoopScopeArray */;
-  return (scope, op) => {
-    const loopScopes = scope[loopScopeAccessor] ?? scope[loopNodeAccessor + "(" /* LoopScopeMap */]?.values() ?? [];
-    if (loopScopes !== emptyMarkerArray) {
-      for (const scope2 of loopScopes) {
-        signal(scope2, op);
-      }
-    }
-  };
-}
 function bySecondArg(_item, index) {
   return index;
 }
@@ -1954,6 +1623,298 @@ function isDifferentRenderer(a, b) {
   return a !== b && (a?.___id || 0) !== b?.___id;
 }
 
+// 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 {
+      queueSource(scope, valueSignal, valueOrOp);
+    }
+    return valueOrOp;
+  };
+}
+function value(valueAccessor, fn, getIntersection) {
+  const markAccessor = valueAccessor + "#" /* Mark */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
+  return (scope, valueOrOp) => {
+    if (valueOrOp === MARK) {
+      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
+        intersection2?.(scope, MARK);
+      }
+    } else if (valueOrOp !== DIRTY) {
+      const existing = scope[markAccessor] !== void 0;
+      if ((scope[markAccessor] ||= 1) === 1) {
+        if (valueOrOp === CLEAN || existing && scope[valueAccessor] === valueOrOp) {
+          intersection2?.(scope, CLEAN);
+        } else {
+          scope[valueAccessor] = valueOrOp;
+          fn && fn(scope, valueOrOp);
+          intersection2?.(scope, DIRTY);
+        }
+      }
+      scope[markAccessor]--;
+    }
+  };
+}
+var accessorId = 0;
+function intersection(count, fn, getIntersection) {
+  const dirtyAccessor = "?" /* Dynamic */ + accessorId++;
+  const markAccessor = dirtyAccessor + "#" /* Mark */;
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
+  return (scope, op) => {
+    if (op === MARK) {
+      if ((scope[markAccessor] = (scope[markAccessor] ?? 0) + 1) === 1) {
+        intersection2?.(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, 0);
+        intersection2?.(scope, DIRTY);
+      } else {
+        intersection2?.(scope, CLEAN);
+      }
+    } else {
+      scope[dirtyAccessor] ||= op === DIRTY;
+    }
+  };
+}
+function closure(fn, getIntersection) {
+  let intersection2 = getIntersection && ((scope, op) => (intersection2 = getIntersection())(scope, op));
+  return (scope, valueOrOp) => {
+    if (valueOrOp === MARK) {
+      intersection2?.(scope, MARK);
+    } else {
+      fn && fn(scope, valueOrOp);
+      intersection2?.(scope, DIRTY);
+    }
+  };
+}
+function loopClosure(ownerLoopNodeAccessor, fn, getIntersection) {
+  const signal = closure(fn, getIntersection);
+  const loopScopeAccessor = ownerLoopNodeAccessor + "!" /* LoopScopeArray */;
+  const loopScopeMapAccessor = ownerLoopNodeAccessor + "(" /* LoopScopeMap */;
+  const helperSignal = (ownerScope, value2) => {
+    const loopScopes = ownerScope[loopScopeAccessor] ?? ownerScope[loopScopeMapAccessor]?.values() ?? [];
+    if (loopScopes !== emptyMarkerArray) {
+      for (const scope of loopScopes) {
+        if (!scope.___pending) {
+          queueSource(scope, signal, value2);
+        }
+      }
+    }
+  };
+  helperSignal._ = signal;
+  return helperSignal;
+}
+function conditionalClosure(ownerConditionalNodeAccessor, getRenderer, fn, getIntersection) {
+  const signal = closure(fn, getIntersection);
+  const scopeAccessor = ownerConditionalNodeAccessor + "!" /* ConditionalScope */;
+  const rendererAccessor = ownerConditionalNodeAccessor + "(" /* ConditionalRenderer */;
+  const helperSignal = (scope, value2) => {
+    const conditionalScope = scope[scopeAccessor];
+    if (conditionalScope && !conditionalScope.___pending && scope[rendererAccessor]?.___id === getRenderer().___id) {
+      queueSource(conditionalScope, signal, value2);
+    }
+  };
+  helperSignal._ = signal;
+  return helperSignal;
+}
+var defaultGetOwnerScope = (scope) => scope._;
+function dynamicClosure(ownerValueAccessor, fn, getOwnerScope = defaultGetOwnerScope, getIntersection) {
+  const ownerSubscribersAccessor = ownerValueAccessor + "*" /* Subscribers */;
+  const _signal = closure(fn, getIntersection);
+  const helperSignal = (ownerScope, value2) => {
+    const subscribers = ownerScope[ownerSubscribersAccessor];
+    if (subscribers) {
+      for (const subscriber of subscribers) {
+        if (!subscriber.___pending) {
+          queueSource(subscriber, _signal, value2);
+        }
+      }
+    }
+  };
+  const setupSignal = (scope, value2) => {
+    _signal(scope, value2);
+    subscribe(scope);
+  };
+  const subscribe = (scope) => {
+    (getOwnerScope(scope)[ownerSubscribersAccessor] ||= /* @__PURE__ */ new Set()).add(scope);
+    getAbortSignal(scope, -1).addEventListener("abort", () => {
+      getOwnerScope(scope)[ownerSubscribersAccessor].delete(scope);
+    });
+  };
+  helperSignal._ = setupSignal;
+  helperSignal.___subscribe = subscribe;
+  return helperSignal;
+}
+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 pendingRender;
+var pendingEffects = [];
+var rendering = false;
+function queueSource(scope, signal, value2) {
+  schedule();
+  const prevRendering = rendering;
+  rendering = true;
+  signal(scope, MARK);
+  rendering = prevRendering;
+  queueRender(scope, signal, value2);
+  return value2;
+}
+function queueRender(scope, signal, value2) {
+  const nextRender = {
+    ___scope: scope,
+    ___signal: signal,
+    ___value: value2,
+    ___next: void 0
+  };
+  if (!pendingRender) {
+    pendingRender = nextRender;
+  } else if (comparePendingRenders(pendingRender, nextRender) < 0) {
+    if (rendering) {
+      throw new Error(
+        "attempted to queue a render before the currently executing render"
+      );
+    }
+    nextRender.___next = pendingRender;
+    pendingRender = nextRender;
+  } else {
+    let curRender = pendingRender;
+    while (curRender.___next && comparePendingRenders(curRender.___next, nextRender) >= 0) {
+      curRender = curRender.___next;
+    }
+    nextRender.___next = curRender.___next;
+    curRender.___next = nextRender;
+  }
+}
+function queueEffect(scope, fn) {
+  pendingEffects.push(scope, fn);
+}
+function run() {
+  const effects = pendingEffects;
+  try {
+    rendering = true;
+    runRenders();
+  } finally {
+    pendingRender = void 0;
+    rendering = false;
+  }
+  pendingEffects = [];
+  runEffects(effects);
+}
+function prepareEffects(fn) {
+  const prevRender = pendingRender;
+  const prevEffects = pendingEffects;
+  const preparedEffects = pendingEffects = [];
+  pendingRender = void 0;
+  try {
+    rendering = true;
+    fn();
+    runRenders();
+  } finally {
+    rendering = false;
+    pendingRender = prevRender;
+    pendingEffects = prevEffects;
+  }
+  return preparedEffects;
+}
+function runEffects(effects = pendingEffects) {
+  for (let i = 0; i < effects.length; i += 2 /* Total */) {
+    const scope = effects[i];
+    const fn = effects[i + 1];
+    fn(scope, scope);
+  }
+}
+function runRenders() {
+  while (pendingRender) {
+    if (!pendingRender.___scope.___closestBranch?.___destroyed) {
+      pendingRender.___signal(pendingRender.___scope, pendingRender.___value);
+    }
+    pendingRender = pendingRender.___next;
+  }
+  finishPendingScopes();
+}
+function comparePendingRenders(a, b) {
+  const aStart = ownerStartNode(a.___scope);
+  const bStart = ownerStartNode(b.___scope);
+  return aStart === bStart ? 0 : aStart ? bStart ? aStart.compareDocumentPosition(bStart) & 2 ? -1 : 1 : -1 : 1;
+}
+function ownerStartNode(scope) {
+  return (scope.___closestBranch || scope).___startNode;
+}
+
+// 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 getAbortSignal(scope, id) {
+  if (scope.___closestBranch) {
+    (scope.___closestBranch.___abortScopes ||= /* @__PURE__ */ new Set()).add(scope);
+  }
+  return ((scope.___abortControllers ||= {})[id] ||= new AbortController()).signal;
+}
+function abort(ctrl) {
+  ctrl.abort();
+}
+
+// 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");
+
 // src/dom/compat.ts
 var classIdToScope = /* @__PURE__ */ new Map();
 var compat = {
@@ -1983,6 +1944,11 @@ var compat = {
   runComponentEffects() {
     runEffects(this.effects);
   },
+  runComponentDestroy() {
+    if (this.scope) {
+      destroyBranch(this.scope);
+    }
+  },
   resolveRegistered(value2, {
     runtimeId,
     componentIdPrefix
@@ -1996,13 +1962,7 @@ var compat = {
     return value2;
   },
   createRenderer(setup, clone, args) {
-    const renderer = createRenderer(
-      "",
-      void 0,
-      setup,
-      void 0,
-      args && (() => args)
-    );
+    const renderer = createRenderer("", void 0, setup, args && (() => args));
     renderer.___clone = clone;
     return renderer;
   },
@@ -2026,13 +1986,9 @@ var compat = {
     }
     component.effects = prepareEffects(() => {
       if (!scope) {
-        scope = component.scope = createScopeWithRenderer(renderer, out.global);
-        const closures = renderer.___closureSignals;
-        if (closures) {
-          for (const signal of closures) {
-            signal(component.scope, CLEAN);
-          }
-        }
+        scope = component.scope = createScope(out.global);
+        scope._ = renderer.___owner;
+        initRenderer(renderer, scope);
       } else {
         applyArgs(scope, MARK);
         existing = true;
@@ -2062,7 +2018,7 @@ var createTemplate = (templateId, ...rendererArgs) => {
   return register(templateId, renderer);
 };
 function mount(input = {}, reference, position) {
-  let scope, dom;
+  let branch, dom;
   let { $global } = input;
   if ($global) {
     ({ $global, ...input } = input);
@@ -2079,10 +2035,10 @@ function mount(input = {}, reference, position) {
   }
   const args = this.___args;
   const effects = prepareEffects(() => {
-    scope = createScope($global);
-    dom = initRenderer(this, scope);
+    branch = createScope($global);
+    dom = initRenderer(this, branch);
     if (args) {
-      args(scope, [input]);
+      args(branch, [input]);
     }
   });
   switch (position) {
@@ -2105,14 +2061,14 @@ function mount(input = {}, reference, position) {
       if (args) {
         runEffects(
           prepareEffects(() => {
-            args(scope, MARK);
-            args(scope, [newInput]);
+            args(branch, MARK);
+            args(branch, [newInput]);
           })
         );
       }
     },
     destroy: () => {
-      removeAndDestroyScope(scope);
+      removeAndDestroyBranch(branch);
     }
   };
 }