@marko/runtime-tags 0.1.19 → 0.1.21

package/dist/debug/dom.js

@@ -25,7 +25,6 @@ __export(dom_exports, {
   attrTags: () => attrTags,
   attrs: () => attrs,
   attrsEvents: () => attrsEvents,
-  changeHandler: () => changeHandler,
   childClosures: () => childClosures,
   classAttr: () => classAttr,
   closure: () => closure,
@@ -42,6 +41,8 @@ __export(dom_exports, {
   controllable_input_value_effect: () => controllable_input_value_effect,
   controllable_select_value: () => controllable_select_value,
   controllable_select_value_effect: () => controllable_select_value_effect,
+  controllable_textarea_value: () => controllable_input_value,
+  controllable_textarea_value_effect: () => controllable_input_value_effect,
   createRenderer: () => createRenderer,
   createRendererWithOwner: () => createRendererWithOwner,
   createScope: () => createScope,
@@ -50,6 +51,7 @@ __export(dom_exports, {
   dynamicClosure: () => dynamicClosure,
   dynamicSubscribers: () => dynamicSubscribers,
   dynamicTagAttrs: () => dynamicTagAttrs,
+  effect: () => effect,
   forIn: () => forIn,
   forOf: () => forOf,
   forTo: () => forTo,
@@ -59,7 +61,6 @@ __export(dom_exports, {
   inConditionalScope: () => inConditionalScope,
   inLoopScope: () => inLoopScope,
   init: () => init,
-  initValue: () => initValue,
   intersection: () => intersection,
   intersections: () => intersections,
   lifecycle: () => lifecycle,
@@ -70,18 +71,14 @@ __export(dom_exports, {
   nodeRef: () => nodeRef,
   on: () => on,
   partialAttrs: () => partialAttrs,
-  prepare: () => prepare,
   props: () => props,
-  queueControllableSource: () => queueControllableSource,
-  queueEffect: () => queueEffect,
-  queueSource: () => queueSource,
   register: () => register,
   registerBoundSignal: () => registerBoundSignal,
   registerSubscriber: () => registerSubscriber,
   resetAbortSignal: () => resetAbortSignal,
   run: () => run,
-  runEffects: () => runEffects,
   setTagVar: () => setTagVar,
+  state: () => state,
   styleAttr: () => styleAttr,
   tagVarSignal: () => tagVarSignal,
   value: () => value
@@ -134,6 +131,51 @@ function forTo(to, from, step, cb) {
   }
 }
 
+// src/dom/schedule.ts
+var task;
+var port2 = /* @__PURE__ */ (() => {
+  const { port1, port2: port22 } = new MessageChannel();
+  port1.onmessage = () => {
+    isScheduled = false;
+    if (true) {
+      task.run(run);
+      task = void 0;
+    } else {
+      run();
+    }
+  };
+  return port22;
+})();
+var isScheduled;
+function schedule() {
+  if (!isScheduled) {
+    if (true) {
+      task = console.createTask?.("queue") || {
+        run(fn) {
+          fn();
+        }
+      };
+    }
+    isScheduled = true;
+    queueMicrotask(flushAndWaitFrame);
+  }
+}
+function flushAndWaitFrame() {
+  if (true) {
+    task.run(run);
+  } else {
+    run();
+  }
+  requestAnimationFrame(triggerMacroTask);
+}
+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) {
@@ -163,12 +205,7 @@ function destroyScope(scope) {
   return scope;
 }
 function _destroyScope(scope) {
-  const cleanup = scope.___cleanup;
-  if (cleanup) {
-    for (const instance of cleanup) {
-      _destroyScope(instance);
-    }
-  }
+  scope.___cleanup?.forEach(_destroyScope);
   const controllers = scope.___abortControllers;
   if (controllers) {
     for (const ctrl of controllers.values()) {
@@ -204,90 +241,547 @@ function insertBefore(scope, parent, nextSibling) {
   }
 }
 
-// src/dom/abort-signal.ts
-function resetAbortSignal(scope, id) {
-  const controllers = scope.___abortControllers;
-  if (controllers) {
-    const ctrl = controllers.get(id);
-    if (ctrl) {
-      ctrl.abort();
-      controllers.delete(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();
   }
-}
-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());
+  w() {
+    this.___data.w();
+    this.___resume();
   }
-  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);
-}
-function stringifyClassObject(name, value2) {
-  return value2 ? name : "";
-}
-function styleValue(value2) {
-  return toDelimitedString(value2, ";", stringifyStyleObject);
-}
-var NON_DIMENSIONAL = /^(--|ta|or|li|z)|n-c|i(do|nk|m|t)|w$|we/;
-function stringifyStyleObject(name, value2) {
-  return value2 || value2 === 0 ? `${name}:${typeof value2 === "number" && value2 && !NON_DIMENSIONAL.test(name) ? value2 + "px" : value2}` : "";
-}
-function toDelimitedString(val, delimiter, stringify) {
-  switch (typeof val) {
-    case "string":
-      return val;
-    case "object":
-      if (val !== null) {
-        let result = "";
-        let curDelimiter = "";
-        if (Array.isArray(val)) {
-          for (const v of val) {
-            const part = toDelimitedString(v, delimiter, stringify);
-            if (part !== "") {
-              result += curDelimiter + part;
-              curDelimiter = delimiter;
+  ___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);
           }
-        } else {
-          for (const name in val) {
-            const v = val[name];
-            const part = stringify(name, v);
-            if (part !== "") {
-              result += curDelimiter + part;
-              curDelimiter = delimiter;
+          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;
           }
         }
-        return result;
       }
+    }
+    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]
+            );
+          }
+        }
+      } finally {
+        isResuming = false;
+      }
+    }
   }
-  return "";
+};
+var isResuming = false;
+function register(id, obj) {
+  registeredValues[id] = obj;
+  return obj;
 }
-function normalizeDynamicRenderer(value2) {
-  if (value2) return value2.renderBody || value2.default || value2;
+function registerBoundSignal(id, signal) {
+  registeredValues[id] = (scope) => (valueOrOp) => signal(scope, valueOrOp);
+  return signal;
 }
-
-// src/dom/reconcile.ts
-var WRONG_POS = 2147483647;
-function reconcile(parent, oldScopes, newScopes, 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];
+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 */;
+  return (scope, valueOrOp, valueChange) => {
+    if (rendering) {
+      const valueIsOp = valueOrOp === MARK || valueOrOp === CLEAN || valueOrOp === DIRTY;
+      valueSignal(
+        scope,
+        valueIsOp || valueChange || scope[markAccessor] === void 0 ? valueOrOp : CLEAN
+      );
+    } else if (valueChange) {
+      valueChange(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);
+var renderBodyClosures = (renderBody, childScope, op) => {
+  const signals = renderBody?.___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/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;
+  }
+  pendingEffects = [];
+  runEffects(effects);
+}
+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;
+  }
+  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);
+  }
+}
+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);
+  }
+}
+
+// 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 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());
+  }
+  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);
+}
+function stringifyClassObject(name, value2) {
+  return value2 ? name : "";
+}
+function styleValue(value2) {
+  return toDelimitedString(value2, ";", stringifyStyleObject);
+}
+var NON_DIMENSIONAL = /^(--|ta|or|li|z)|n-c|i(do|nk|m|t)|w$|we/;
+function stringifyStyleObject(name, value2) {
+  return value2 || value2 === 0 ? `${name}:${typeof value2 === "number" && value2 && !NON_DIMENSIONAL.test(name) ? value2 + "px" : value2}` : "";
+}
+function toDelimitedString(val, delimiter, stringify) {
+  switch (typeof val) {
+    case "string":
+      return val;
+    case "object":
+      if (val !== null) {
+        let result = "";
+        let curDelimiter = "";
+        if (Array.isArray(val)) {
+          for (const v of val) {
+            const part = toDelimitedString(v, delimiter, stringify);
+            if (part !== "") {
+              result += curDelimiter + part;
+              curDelimiter = delimiter;
+            }
+          }
+        } else {
+          for (const name in val) {
+            const v = val[name];
+            const part = stringify(name, v);
+            if (part !== "") {
+              result += curDelimiter + part;
+              curDelimiter = delimiter;
+            }
+          }
+        }
+        return result;
+      }
+  }
+  return "";
+}
+function normalizeDynamicRenderer(value2) {
+  if (value2) return value2.renderBody || value2.default || value2;
+}
+
+// src/dom/reconcile.ts
+var WRONG_POS = 2147483647;
+function reconcile(parent, oldScopes, newScopes, 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 i;
@@ -339,478 +833,150 @@ function reconcile(parent, oldScopes, newScopes, afterReference) {
     let pos = 0;
     let synced = 0;
     const keyIndex = /* @__PURE__ */ new Map();
-    for (j = newStart; j <= newEnd; ++j) {
-      keyIndex.set(newScopes[j], j);
-    }
-    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
-      oldScope = oldScopes[i];
-      j = keyIndex.get(oldScope);
-      if (j !== void 0) {
-        pos = pos > j ? WRONG_POS : j;
-        ++synced;
-        newScope = newScopes[j];
-        sources[j - newStart] = i;
-        aNullable[i] = null;
-      }
-    }
-    if (oldLength === oldScopes.length && synced === 0) {
-      for (; newStart < newLength; ++newStart) {
-        insertBefore(newScopes[newStart], parent, afterReference);
-      }
-      for (; oldStart < oldLength; ++oldStart) {
-        removeAndDestroyScope(oldScopes[oldStart]);
-      }
-    } else {
-      i = oldLength - synced;
-      while (i > 0) {
-        oldScope = aNullable[oldStart++];
-        if (oldScope !== null) {
-          removeAndDestroyScope(oldScope);
-          i--;
-        }
-      }
-      if (pos === WRONG_POS) {
-        const seq = longestIncreasingSubsequence(sources);
-        j = seq.length - 1;
-        k = newScopes.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);
-          } else {
-            if (j < 0 || i !== seq[j]) {
-              pos = i + newStart;
-              newScope = newScopes[pos++];
-              nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
-              insertBefore(newScope, parent, nextSibling);
-            } else {
-              --j;
-            }
-          }
-        }
-      } else if (synced !== newLength) {
-        k = newScopes.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);
-          }
-        }
-      }
-    }
-  }
-}
-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;
-      } else {
-        v = c;
-      }
-    }
-    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;
-}
-
-// 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)) {
-    defaultDelegator(element, type, handleDelegated);
-  }
-  handlersByElement.set(element, handler || void 0);
-}
-function createDelegator() {
-  const delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
-  return function ensureDelegated(node, type, handler) {
-    const root = node.getRootNode();
-    let delegatedEvents = delegatedEventsByRoot.get(root);
-    if (!delegatedEvents) {
-      delegatedEventsByRoot.set(root, delegatedEvents = /* @__PURE__ */ new Set());
-    }
-    if (!delegatedEvents.has(type)) {
-      delegatedEvents.add(type);
-      root.addEventListener(type, handler, true);
-    }
-  };
-}
-function handleDelegated(ev) {
-  let target = ev.target;
-  if (target) {
-    const handlersByElement = elementHandlersByEvent.get(ev.type);
-    handlersByElement.get(target)?.(ev, target);
-    if (ev.bubbles) {
-      while ((target = target.parentElement) && !ev.cancelBubble) {
-        handlersByElement.get(target)?.(ev, target);
-      }
-    }
-  }
-}
-
-// src/dom/schedule.ts
-var task;
-var port2 = /* @__PURE__ */ (() => {
-  const { port1, port2: port22 } = new MessageChannel();
-  port1.onmessage = () => {
-    isScheduled = false;
-    if (true) {
-      task.run(run);
-      task = void 0;
-    } else {
-      run();
-    }
-  };
-  return port22;
-})();
-var isScheduled;
-function schedule() {
-  if (!isScheduled) {
-    if (true) {
-      task = console.createTask?.("queue") || {
-        run(fn) {
-          fn();
-        }
-      };
-    }
-    isScheduled = true;
-    queueMicrotask(flushAndWaitFrame);
-  }
-}
-function flushAndWaitFrame() {
-  if (true) {
-    task.run(run);
-  } else {
-    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 initValue(valueAccessor, valueSignal) {
-  const markAccessor = valueAccessor + "#" /* Mark */;
-  return (scope, valueOrOp) => {
-    if (valueOrOp !== MARK && scope[markAccessor] === void 0) {
-      valueSignal(scope, valueOrOp);
-    }
-  };
-}
-function changeHandler(valueAccessor, fn) {
-  const markAccessor = valueAccessor + "#" /* Mark */;
-  return (scope, valueOrOp) => {
-    if (true) {
-      if (valueOrOp !== MARK && valueOrOp !== CLEAN && valueOrOp !== DIRTY) {
-        if (valueOrOp != null && typeof valueOrOp !== "function") {
-          throw new Error(
-            `Invalid value ${valueOrOp} for change handler '${valueAccessor}'`
-          );
-        } else if (scope[markAccessor] !== void 0) {
-          const prevValue = scope[valueAccessor];
-          if (prevValue && !valueOrOp) {
-            throw new Error(
-              `Change handler '${valueAccessor}' cannot change from a function to ${valueOrOp}`
-            );
-          } else if (!prevValue && valueOrOp) {
-            throw new Error(
-              `Change handler '${valueAccessor}' cannot change from a nullish to a function`
-            );
-          }
-        }
-      }
-    }
-    fn(scope, 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?.(scope, valueOrOp);
-          intersection2?.(scope, DIRTY);
-        }
-      }
-      scope[markAccessor]--;
+    for (j = newStart; j <= newEnd; ++j) {
+      keyIndex.set(newScopes[j], j);
     }
-  };
-}
-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);
+    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
+      oldScope = oldScopes[i];
+      j = keyIndex.get(oldScope);
+      if (j !== void 0) {
+        pos = pos > j ? WRONG_POS : j;
+        ++synced;
+        newScope = newScopes[j];
+        sources[j - newStart] = i;
+        aNullable[i] = null;
       }
-    } 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);
+    if (oldLength === oldScopes.length && synced === 0) {
+      for (; newStart < newLength; ++newStart) {
+        insertBefore(newScopes[newStart], parent, afterReference);
+      }
+      for (; oldStart < oldLength; ++oldStart) {
+        removeAndDestroyScope(oldScopes[oldStart]);
       }
     } 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;
+      i = oldLength - synced;
+      while (i > 0) {
+        oldScope = aNullable[oldStart++];
+        if (oldScope !== null) {
+          removeAndDestroyScope(oldScope);
+          i--;
+        }
       }
-      if (--scope[markAccessor] === 0) {
-        if (op === DIRTY || scope[dirtyAccessor]) {
-          scope[dirtyAccessor] = false;
-          ownerScope ||= getOwnerScope(scope);
-          ownerValueAccessor2 ||= getOwnerValueAccessor(scope);
-          fn?.(scope, ownerScope[ownerValueAccessor2]);
-          intersection2?.(scope, DIRTY);
-        } else {
-          intersection2?.(scope, CLEAN);
+      if (pos === WRONG_POS) {
+        const seq = longestIncreasingSubsequence(sources);
+        j = seq.length - 1;
+        k = newScopes.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);
+          } else {
+            if (j < 0 || i !== seq[j]) {
+              pos = i + newStart;
+              newScope = newScopes[pos++];
+              nextSibling = pos < k ? newScopes[pos].___startNode : afterReference;
+              insertBefore(newScope, parent, nextSibling);
+            } else {
+              --j;
+            }
+          }
+        }
+      } else if (synced !== newLength) {
+        k = newScopes.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);
+          }
         }
-      } 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);
+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;
     }
-  };
-  signal.___unsubscribe = (scope) => {
-    const childScope = scope[childAccessor];
-    for (const closureSignal of closureSignals) {
-      closureSignal.___unsubscribe?.(childScope);
+    const j = result[result.length - 1];
+    if (a[j] < a[i]) {
+      p[i] = j;
+      result.push(i);
+      continue;
     }
-  };
-  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);
+    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 {
+        v = c;
       }
     }
-  };
-}
-function setTagVar(scope, childAccessor, tagVarSignal2) {
-  scope[childAccessor]["/" /* TagVariable */] = (valueOrOp) => tagVarSignal2(scope, valueOrOp);
-}
-var tagVarSignal = (scope, valueOrOp) => scope["/" /* TagVariable */]?.(valueOrOp);
-var renderBodyClosures = (renderBody, childScope, op) => {
-  const signals = renderBody?.___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);
+    if (a[i] < a[result[u]]) {
+      if (u > 0) {
+        p[i] = result[u - 1];
+      }
+      result[u] = i;
     }
-  };
-}
-
-// src/dom/queue.ts
-var currentBatch = [];
-var currentEffects = [];
-function queueControllableSource(scope, signal, changeHandler2, value2) {
-  if (changeHandler2) {
-    changeHandler2(value2);
-    return value2;
-  }
-  return queueSource(scope, signal, value2);
-}
-function queueSource(scope, signal, value2) {
-  schedule();
-  signal(scope, MARK);
-  currentBatch.push(scope, signal, value2);
-  return value2;
-}
-function queueEffect(scope, fn) {
-  currentEffects.push(scope, fn);
-}
-function run() {
-  try {
-    runBatch();
-  } finally {
-    currentBatch = [];
-  }
-  try {
-    runEffects();
-  } finally {
-    currentEffects = [];
   }
-}
-function runSync(fn, v) {
-  const prevBatch = currentBatch;
-  const prevEffects = currentEffects;
-  currentBatch = [];
-  currentEffects = [];
-  try {
-    fn(v);
-    runBatch();
-    currentBatch = prevBatch;
-    runEffects();
-  } finally {
-    currentBatch = prevBatch;
-    currentEffects = prevEffects;
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
   }
+  return result;
 }
-function prepare(fn) {
-  const prevBatch = currentBatch;
-  const prevEffects = currentEffects;
-  const preparedEffects = currentEffects = [];
-  currentBatch = [];
-  try {
-    fn();
-    runBatch();
-  } finally {
-    currentBatch = prevBatch;
-    currentEffects = prevEffects;
+
+// 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());
   }
-  return preparedEffects;
-}
-function runEffects(effects = currentEffects) {
-  for (let i = 0; i < effects.length; i += 2 /* Total */) {
-    const scope = effects[i];
-    const fn = effects[i + 1];
-    fn(scope);
+  if (!handlersByElement.has(element)) {
+    defaultDelegator(element, type, handleDelegated);
   }
+  handlersByElement.set(element, handler || void 0);
 }
-function runBatch() {
-  for (let i = 0; i < currentBatch.length; i += 3 /* Total */) {
-    const scope = currentBatch[i + 0 /* Scope */];
-    const signal = currentBatch[i + 1 /* Signal */];
-    const value2 = currentBatch[i + 2 /* Value */];
-    signal(scope, value2);
+function createDelegator() {
+  const delegatedEventsByRoot = /* @__PURE__ */ new WeakMap();
+  return function ensureDelegated(node, type, handler) {
+    const root = node.getRootNode();
+    let delegatedEvents = delegatedEventsByRoot.get(root);
+    if (!delegatedEvents) {
+      delegatedEventsByRoot.set(root, delegatedEvents = /* @__PURE__ */ new Set());
+    }
+    if (!delegatedEvents.has(type)) {
+      delegatedEvents.add(type);
+      root.addEventListener(type, handler, true);
+    }
+  };
+}
+function handleDelegated(ev) {
+  let target = ev.target;
+  if (target) {
+    const handlersByElement = elementHandlersByEvent.get(ev.type);
+    handlersByElement.get(target)?.(ev, target);
+    if (ev.bubbles) {
+      while ((target = target.parentElement) && !ev.cancelBubble) {
+        handlersByElement.get(target)?.(ev, target);
+      }
+    }
   }
 }
 
@@ -841,205 +1007,6 @@ 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 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]
-            );
-          }
-        }
-      } 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/controllable.ts
 function controllable_input_checked(scope, nodeAccessor, checked, checkedChange) {
   setCheckboxValue(
@@ -1056,7 +1023,8 @@ function controllable_input_checked_effect(scope, nodeAccessor) {
     const checkedChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (checkedChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      runSync(checkedChange, el.checked);
+      checkedChange(el.checked);
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         el.checked = !el.checked;
       }
@@ -1081,10 +1049,10 @@ function controllable_input_checkedValue_effect(scope, nodeAccessor) {
     if (checkedValueChange) {
       const oldValue = scope[nodeAccessor + ":" /* ControlledValue */];
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      runSync(
-        checkedValueChange,
+      checkedValueChange(
         Array.isArray(oldValue) ? updateList(oldValue, el.value, el.checked) : el.checked ? el.value : void 0
       );
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         el.checked = !el.checked;
       }
@@ -1118,7 +1086,8 @@ function controllable_input_value_effect(scope, nodeAccessor) {
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
       if (ev) inputType = ev.inputType;
-      runSync(valueChange, el.value);
+      valueChange(el.value);
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         setValueAndUpdateSelection(
           el,
@@ -1149,10 +1118,10 @@ function controllable_select_value_effect(scope, nodeAccessor) {
     const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
     if (valueChange) {
       scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-      runSync(
-        valueChange,
+      valueChange(
         Array.isArray(scope[nodeAccessor + ":" /* ControlledValue */]) ? Array.from(el.selectedOptions, toValueProp) : el.value
       );
+      run();
       if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
         setSelectOptions(
           el,
@@ -1205,7 +1174,8 @@ function controllable_detailsOrDialog_open_effect(scope, nodeAccessor) {
       const openChange = scope[nodeAccessor + ";" /* ControlledHandler */];
       if (openChange) {
         scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
-        runSync(openChange, el.open);
+        openChange(el.open);
+        run();
         if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
           el.open = !el.open;
         }
@@ -1289,12 +1259,7 @@ function hasSelectChanged(el) {
   }
 }
 function hasFormElementChanged(el) {
-  switch (el.tagName) {
-    case "INPUT":
-      return hasValueChanged(el) || hasCheckboxChanged(el);
-    case "SELECT":
-      return hasSelectChanged(el);
-  }
+  return el.options ? hasSelectChanged(el) : hasValueChanged(el) || hasCheckboxChanged(el);
 }
 function normalizeStrProp(value2) {
   return normalizeAttrValue(value2) || "";
@@ -1378,14 +1343,14 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
   let skip;
   switch (el.tagName) {
     case "INPUT":
-      if (nextAttrs.checkedChange) {
+      if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
         controllable_input_checked(
           scope,
           nodeAccessor,
           nextAttrs.checked,
           nextAttrs.checkedChange
         );
-      } else if (nextAttrs.checkedValue || nextAttrs.checkedValueChange) {
+      } else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
         controllable_input_checkedValue(
           scope,
           nodeAccessor,
@@ -1393,7 +1358,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
           nextAttrs.checkedValueChange,
           nextAttrs.value
         );
-      } else if (nextAttrs.valueChange) {
+      } else if ("value" in nextAttrs || "valueChange" in nextAttrs) {
         controllable_input_value(
           scope,
           nodeAccessor,
@@ -1406,7 +1371,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
       skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
       break;
     case "SELECT":
-      if (nextAttrs.value || nextAttrs.valueChange) {
+      if ("value" in nextAttrs || "valueChange" in nextAttrs) {
         controllable_select_value(
           scope,
           nodeAccessor,
@@ -1416,9 +1381,20 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
         skip = /^value(?:Change)?$/;
       }
       break;
+    case "TEXTAREA":
+      if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+        controllable_input_value(
+          scope,
+          nodeAccessor,
+          nextAttrs.value,
+          nextAttrs.valueChange
+        );
+        skip = /^value(?:Change)?$/;
+      }
+      break;
     case "DETAILS":
     case "DIALOG":
-      if (nextAttrs.openChange) {
+      if ("open" in nextAttrs || "openChange" in nextAttrs) {
         controllable_detailsOrDialog_open(
           scope,
           nodeAccessor,
@@ -1655,6 +1631,11 @@ function dynamicTagAttrs(nodeAccessor, getRenderBody, inputIsArgs) {
     const renderBody = getRenderBody?.(scope);
     if (typeof renderer === "string") {
       const nodeAccessor2 = true ? `#${renderer}/0` : 0;
+      if (renderer === "textarea" && renderBody) {
+        throw new Error(
+          "A dynamic tag rendering a `<textarea>` cannot have a `renderBody` and must use the `value` attribute instead."
+        );
+      }
       setConditionalRendererOnlyChild(childScope, nodeAccessor2, renderBody);
       attrs(childScope, nodeAccessor2, attrsOrOp());
     } else if (renderer.___args) {
@@ -1671,7 +1652,7 @@ function dynamicTagAttrs(nodeAccessor, getRenderBody, inputIsArgs) {
     }
   };
 }
-function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, hasUserEffects = 0, getArgs) {
+function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, getArgs) {
   let args;
   let closureSignals;
   const id = true ? Symbol("Marko Renderer") : {};
@@ -1684,7 +1665,6 @@ function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, h
       ___setup: setup,
       ___clone: _clone,
       ___owner: owner,
-      ___hasUserEffects: hasUserEffects,
       ___sourceNode: void 0,
       get ___args() {
         return args ||= getArgs?.();
@@ -1695,13 +1675,12 @@ function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, h
     };
   };
 }
-function createRenderer(template, walks, setup, getClosureSignals, hasUserEffects, getArgs) {
+function createRenderer(template, walks, setup, getClosureSignals, getArgs) {
   return createRendererWithOwner(
     template,
     walks,
     setup,
     getClosureSignals,
-    hasUserEffects,
     getArgs
   )();
 }
@@ -1729,7 +1708,7 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
       if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
         currentRenderer = scope[rendererAccessor] = normalizedRenderer;
         setConditionalRenderer(scope, nodeAccessor, normalizedRenderer);
-        fn?.(scope);
+        fn && fn(scope);
         op = DIRTY;
       } else {
         op = CLEAN;
@@ -1790,7 +1769,7 @@ var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersecti
           nodeAccessor,
           normalizedRenderer
         );
-        fn?.(scope);
+        fn && fn(scope);
         op = DIRTY;
       } else {
         op = CLEAN;
@@ -1903,11 +1882,7 @@ function loop(nodeAccessor, renderer, forEach) {
         newArray = emptyMarkerArray;
         getEmptyScope(referenceNode);
       } else {
-        if (renderer.___hasUserEffects) {
-          for (let i = 0; i < oldArray.length; i++) {
-            destroyScope(oldArray[i]);
-          }
-        }
+        oldArray.forEach(destroyScope);
         referenceNode.textContent = "";
         newMap = emptyMap;
         newArray = emptyArray;
@@ -2000,7 +1975,6 @@ var compat = {
       void 0,
       setup,
       void 0,
-      1,
       args && (() => args)
     );
     renderer.___clone = clone;
@@ -2017,7 +1991,7 @@ var compat = {
     }
     const args = renderer.___args || noop;
     let existing = false;
-    component.effects = prepare(() => {
+    component.effects = prepareEffects(() => {
       if (!scope) {
         scope = component.scope = createScopeWithRenderer(renderer, out.global);
         const closures = renderer.___closureSignals;
@@ -2041,7 +2015,8 @@ function noop() {
 }
 
 // src/dom/template.ts
-var createTemplate = (renderer, templateId) => {
+var createTemplate = (templateId, ...rendererArgs) => {
+  const renderer = createRenderer(...rendererArgs);
   renderer.mount = mount;
   renderer._ = renderer;
   if (true) {
@@ -2070,7 +2045,7 @@ function mount(input = {}, reference, position) {
     };
   }
   const args = this.___args;
-  const effects = prepare(() => {
+  const effects = prepareEffects(() => {
     scope = createScope($global);
     dom = initRenderer(this, scope);
     if (args) {
@@ -2095,10 +2070,12 @@ function mount(input = {}, reference, position) {
   return {
     update: (newInput) => {
       if (args) {
-        runSync(() => {
-          args(scope, MARK);
-          args(scope, [newInput]);
-        });
+        runEffects(
+          prepareEffects(() => {
+            args(scope, MARK);
+            args(scope, [newInput]);
+          })
+        );
       }
     },
     destroy: () => {