marko 5.37.5 → 6.0.0-3.11

package/dist/debug/dom.js

@@ -0,0 +1,2111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dom.ts
+var dom_exports = {};
+__export(dom_exports, {
+  attr: () => attr,
+  attrTag: () => attrTag,
+  attrTags: () => attrTags,
+  attrs: () => attrs,
+  attrsEvents: () => attrsEvents,
+  childClosures: () => childClosures,
+  classAttr: () => classAttr,
+  closure: () => closure,
+  compat: () => compat,
+  conditional: () => conditional,
+  conditionalOnlyChild: () => conditionalOnlyChild,
+  controllable_detailsOrDialog_open: () => controllable_detailsOrDialog_open,
+  controllable_detailsOrDialog_open_effect: () => controllable_detailsOrDialog_open_effect,
+  controllable_input_checked: () => controllable_input_checked,
+  controllable_input_checkedValue: () => controllable_input_checkedValue,
+  controllable_input_checkedValue_effect: () => controllable_input_checkedValue_effect,
+  controllable_input_checked_effect: () => controllable_input_checked_effect,
+  controllable_input_value: () => controllable_input_value,
+  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,
+  createTemplate: () => createTemplate,
+  data: () => data,
+  dynamicClosure: () => dynamicClosure,
+  dynamicSubscribers: () => dynamicSubscribers,
+  dynamicTagAttrs: () => dynamicTagAttrs,
+  effect: () => effect,
+  forIn: () => forIn,
+  forOf: () => forOf,
+  forTo: () => forTo,
+  getAbortSignal: () => getAbortSignal,
+  html: () => html,
+  inChild: () => inChild,
+  inConditionalScope: () => inConditionalScope,
+  inLoopScope: () => inLoopScope,
+  init: () => init,
+  intersection: () => intersection,
+  intersections: () => intersections,
+  lifecycle: () => lifecycle,
+  loopIn: () => loopIn,
+  loopOf: () => loopOf,
+  loopTo: () => loopTo,
+  nextTagId: () => nextTagId,
+  nodeRef: () => nodeRef,
+  on: () => on,
+  partialAttrs: () => partialAttrs,
+  props: () => props,
+  register: () => register,
+  registerBoundSignal: () => registerBoundSignal,
+  registerSubscriber: () => registerSubscriber,
+  resetAbortSignal: () => resetAbortSignal,
+  run: () => run,
+  setTagVar: () => setTagVar,
+  setTagVarChange: () => setTagVarChange,
+  state: () => state,
+  styleAttr: () => styleAttr,
+  tagVarSignal: () => tagVarSignal,
+  tagVarSignalChange: () => tagVarSignalChange,
+  textContent: () => textContent,
+  value: () => value
+});
+module.exports = __toCommonJS(dom_exports);
+
+// src/common/attr-tag.ts
+var empty = [];
+var rest = true ? Symbol("Attribute Tag") : Symbol();
+function attrTag(attrs2) {
+  attrs2[Symbol.iterator] = attrTagIterator;
+  attrs2[rest] = empty;
+  return attrs2;
+}
+function attrTags(first, attrs2) {
+  if (first) {
+    if (first[rest] === empty) {
+      first[rest] = [attrs2];
+    } else {
+      first[rest].push(attrs2);
+    }
+    return first;
+  }
+  return attrTag(attrs2);
+}
+function* attrTagIterator() {
+  yield this;
+  yield* this[rest];
+}
+
+// src/common/for.ts
+function forIn(obj, cb) {
+  for (const key in obj) {
+    cb(key, obj[key]);
+  }
+}
+function forOf(list, cb) {
+  if (list) {
+    let i = 0;
+    for (const item of list) {
+      cb(item, i++);
+    }
+  }
+}
+function forTo(to, from, step, cb) {
+  const start = from || 0;
+  const delta = step || 1;
+  for (let steps = (to - start) / delta, i = 0; i <= steps; i++) {
+    cb(start + i * delta);
+  }
+}
+
+// src/dom/schedule.ts
+var runTask;
+var port2 = /* @__PURE__ */ (() => {
+  const { port1, port2: port22 } = new MessageChannel();
+  port1.onmessage = () => {
+    isScheduled = false;
+    if (true) {
+      const run2 = runTask;
+      runTask = void 0;
+      run2();
+    } else {
+      run();
+    }
+  };
+  return port22;
+})();
+var isScheduled;
+function schedule() {
+  if (!isScheduled) {
+    if (true) {
+      if (console.createTask) {
+        const task = console.createTask("queue");
+        runTask = () => task.run(run);
+      } else {
+        runTask = run;
+      }
+    }
+    isScheduled = true;
+    queueMicrotask(flushAndWaitFrame);
+  }
+}
+function flushAndWaitFrame() {
+  if (true) {
+    runTask();
+  } 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) {
+  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 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, 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 isEventHandler(name) {
+  return /^on[A-Z-]/.test(name);
+}
+function getEventHandlerName(name) {
+  return name[2] === "-" ? name.slice(3) : name.slice(2).toLowerCase();
+}
+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;
+  let j;
+  let k;
+  let nextSibling;
+  let oldScope;
+  let newScope;
+  outer: {
+    while (oldStartScope === newStartScope) {
+      ++oldStart;
+      ++newStart;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
+      }
+      oldStartScope = oldScopes[oldStart];
+      newStartScope = newScopes[newStart];
+    }
+    while (oldEndScope === newEndScope) {
+      --oldEnd;
+      --newEnd;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
+      }
+      oldEndScope = oldScopes[oldEnd];
+      newEndScope = newScopes[newEnd];
+    }
+  }
+  if (oldStart > oldEnd) {
+    if (newStart <= newEnd) {
+      k = newEnd + 1;
+      nextSibling = k < newScopes.length ? newScopes[k].___startNode : afterReference;
+      do {
+        insertBefore(newScopes[newStart++], parent, nextSibling);
+      } while (newStart <= newEnd);
+    }
+  } else if (newStart > newEnd) {
+    do {
+      removeAndDestroyScope(oldScopes[oldStart++]);
+    } while (oldStart <= oldEnd);
+  } else {
+    const oldLength = oldEnd - oldStart + 1;
+    const newLength = newEnd - newStart + 1;
+    const aNullable = oldScopes;
+    const sources = new Array(newLength);
+    for (i = 0; i < newLength; ++i) {
+      sources[i] = -1;
+    }
+    let pos = 0;
+    let synced = 0;
+    const keyIndex = /* @__PURE__ */ new Map();
+    for (j = newStart; j <= newEnd; ++j) {
+      keyIndex.set(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/resolve-cursor-position.ts
+function resolveCursorPosition(updatedValue, initialValue, initialPosition, inputType2) {
+  if (initialPosition !== initialValue.length || // short regex to match input types that delete backwards
+  /kw/.test(inputType2)) {
+    const before = initialValue.slice(0, initialPosition);
+    const after = initialValue.slice(initialPosition);
+    if (updatedValue.startsWith(before)) {
+      return initialPosition;
+    } else if (updatedValue.endsWith(after)) {
+      return updatedValue.length - after.length;
+    } else {
+      const relevantChars = stripSpacesAndPunctuation(before).length;
+      let pos = 0;
+      let relevantIndex = 0;
+      while (relevantIndex < relevantChars) {
+        if (stripSpacesAndPunctuation(updatedValue[pos])) relevantIndex++;
+        pos++;
+      }
+      return pos;
+    }
+  }
+  return -1;
+}
+function stripSpacesAndPunctuation(str) {
+  return str.replace(/[^\p{L}\p{N}]/gu, "");
+}
+
+// src/dom/controllable.ts
+function controllable_input_checked(scope, nodeAccessor, checked, checkedChange) {
+  setCheckboxValue(
+    scope,
+    nodeAccessor,
+    0 /* InputChecked */,
+    normalizeBoolProp(checked),
+    checkedChange
+  );
+}
+function controllable_input_checked_effect(scope, nodeAccessor) {
+  const el = scope[nodeAccessor];
+  syncControllable(el, "input", hasCheckboxChanged, () => {
+    const checkedChange = scope[nodeAccessor + ";" /* ControlledHandler */];
+    if (checkedChange) {
+      scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
+      checkedChange(el.checked);
+      run();
+      if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
+        el.checked = !el.checked;
+      }
+    }
+  });
+}
+function controllable_input_checkedValue(scope, nodeAccessor, checkedValue, checkedValueChange, value2) {
+  scope[nodeAccessor + ":" /* ControlledValue */] = checkedValue;
+  attr(scope[nodeAccessor], "value", value2);
+  setCheckboxValue(
+    scope,
+    nodeAccessor,
+    1 /* InputCheckedValue */,
+    Array.isArray(checkedValue) ? checkedValue.includes(value2) : checkedValue === value2,
+    checkedValueChange
+  );
+}
+function controllable_input_checkedValue_effect(scope, nodeAccessor) {
+  const el = scope[nodeAccessor];
+  syncControllable(el, "input", hasCheckboxChanged, () => {
+    const checkedValueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
+    if (checkedValueChange) {
+      const oldValue = scope[nodeAccessor + ":" /* ControlledValue */];
+      scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
+      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;
+      }
+    }
+  });
+}
+function controllable_input_value(scope, nodeAccessor, value2, valueChange) {
+  const el = scope[nodeAccessor];
+  const normalizedValue = normalizeStrProp(value2);
+  scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
+  if (valueChange) {
+    scope[nodeAccessor + "=" /* ControlledType */] = 0 /* InputChecked */;
+    scope[nodeAccessor + ":" /* ControlledValue */] = value2;
+    if (el.isConnected) {
+      setValueAndUpdateSelection(el, normalizedValue);
+    } else {
+      el.defaultValue = normalizedValue;
+    }
+  } else {
+    scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */;
+    el.defaultValue = normalizedValue;
+  }
+}
+function controllable_input_value_effect(scope, nodeAccessor) {
+  const el = scope[nodeAccessor];
+  if (isResuming) {
+    scope[nodeAccessor + ":" /* ControlledValue */] = el.defaultValue;
+  }
+  syncControllable(el, "input", hasValueChanged, (ev) => {
+    const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
+    if (valueChange) {
+      scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
+      if (ev) inputType = ev.inputType;
+      valueChange(el.value);
+      run();
+      if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
+        setValueAndUpdateSelection(
+          el,
+          scope[nodeAccessor + ":" /* ControlledValue */]
+        );
+      }
+      inputType = "";
+    }
+  });
+}
+function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
+  scope[nodeAccessor + ";" /* ControlledHandler */] = valueChange;
+  if (valueChange) {
+    scope[nodeAccessor + "=" /* ControlledType */] = 3 /* SelectValue */;
+    scope[nodeAccessor + ":" /* ControlledValue */] = value2;
+  } else {
+    scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */;
+  }
+  setSelectOptions(
+    scope[nodeAccessor],
+    value2,
+    valueChange
+  );
+}
+function controllable_select_value_effect(scope, nodeAccessor) {
+  const el = scope[nodeAccessor];
+  syncControllable(el, "input", hasSelectChanged, () => {
+    const valueChange = scope[nodeAccessor + ";" /* ControlledHandler */];
+    if (valueChange) {
+      scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
+      valueChange(
+        Array.isArray(scope[nodeAccessor + ":" /* ControlledValue */]) ? Array.from(el.selectedOptions, toValueProp) : el.value
+      );
+      run();
+      if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
+        setSelectOptions(
+          el,
+          scope[nodeAccessor + ":" /* ControlledValue */],
+          valueChange
+        );
+      }
+    }
+  });
+}
+function setSelectOptions(el, value2, valueChange) {
+  if (Array.isArray(value2)) {
+    for (const opt of el.options) {
+      const selected = value2.includes(opt.value);
+      if (valueChange) {
+        opt.selected = selected;
+      } else {
+        opt.defaultSelected = selected;
+      }
+    }
+  } else {
+    const normalizedValue = normalizeStrProp(value2);
+    if (valueChange) {
+      el.value = normalizedValue;
+    } else {
+      for (const opt of el.options) {
+        opt.defaultSelected = opt.value === normalizedValue;
+      }
+    }
+  }
+}
+function controllable_detailsOrDialog_open(scope, nodeAccessor, open, openChange) {
+  scope[nodeAccessor + ";" /* ControlledHandler */] = openChange;
+  if (openChange) {
+    scope[nodeAccessor + "=" /* ControlledType */] = 4 /* DetailsOrDialogOpen */;
+  } else {
+    scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */;
+  }
+  scope[nodeAccessor].open = normalizeBoolProp(open);
+}
+function controllable_detailsOrDialog_open_effect(scope, nodeAccessor) {
+  const el = scope[nodeAccessor];
+  const hasChanged = () => el.open !== scope[nodeAccessor + ":" /* ControlledValue */];
+  syncControllable(
+    el,
+    el.tagName === "DIALOG" ? "close" : "toggle",
+    hasChanged,
+    () => {
+      const openChange = scope[nodeAccessor + ";" /* ControlledHandler */];
+      if (openChange && hasChanged()) {
+        scope[nodeAccessor + "=" /* ControlledType */] = 6 /* Pending */;
+        openChange(el.open);
+        run();
+        if (scope[nodeAccessor + "=" /* ControlledType */] === 6 /* Pending */) {
+          el.open = !el.open;
+        }
+      }
+    }
+  );
+}
+var inputType = "";
+function setValueAndUpdateSelection(el, value2) {
+  const initialValue = el.value;
+  if (initialValue !== value2) {
+    if (el.getRootNode().activeElement === el) {
+      const initialPosition = el.selectionStart;
+      el.value = value2;
+      const updatedPosition = resolveCursorPosition(
+        el.value,
+        initialValue,
+        initialPosition,
+        inputType
+      );
+      if (~updatedPosition) {
+        el.setSelectionRange(updatedPosition, updatedPosition);
+      }
+    } else {
+      el.value = value2;
+    }
+  }
+}
+function setCheckboxValue(scope, nodeAccessor, type, checked, checkedChange) {
+  scope[nodeAccessor + ";" /* ControlledHandler */] = checkedChange;
+  if (checkedChange) {
+    scope[nodeAccessor + "=" /* ControlledType */] = type;
+    scope[nodeAccessor].checked = checked;
+  } else {
+    scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */;
+    scope[nodeAccessor].defaultChecked = checked;
+  }
+}
+var delegateFormControl = createDelegator();
+var formChangeHandlers = /* @__PURE__ */ new WeakMap();
+function syncControllable(el, event, hasChanged, onChange) {
+  formChangeHandlers.set(el, onChange);
+  delegateFormControl(el, event, onFormChange);
+  if (el.form) {
+    delegateFormControl(el.form, "reset", onFormReset);
+  }
+  if (isResuming && hasChanged(el)) {
+    queueMicrotask(onChange);
+  }
+}
+function onFormChange(ev) {
+  formChangeHandlers.get(ev.target)?.(ev);
+}
+function onFormReset(ev) {
+  const handlers = [];
+  for (const el of ev.target.elements) {
+    const handler = formChangeHandlers.get(el);
+    if (handler && hasFormElementChanged(el)) {
+      handlers.push(handler);
+    }
+  }
+  requestAnimationFrame(() => {
+    if (!ev.defaultPrevented) {
+      for (const change of handlers) {
+        change();
+      }
+    }
+  });
+}
+function hasValueChanged(el) {
+  return el.value !== el.defaultValue;
+}
+function hasCheckboxChanged(el) {
+  return el.checked !== el.defaultChecked;
+}
+function hasSelectChanged(el) {
+  for (const opt of el.options) {
+    if (opt.selected !== opt.defaultSelected) {
+      return true;
+    }
+  }
+}
+function hasFormElementChanged(el) {
+  return el.options ? hasSelectChanged(el) : hasValueChanged(el) || hasCheckboxChanged(el);
+}
+function normalizeStrProp(value2) {
+  return normalizeAttrValue(value2) || "";
+}
+function normalizeBoolProp(value2) {
+  return value2 != null && value2 !== false;
+}
+function updateList(arr, val, push) {
+  const index = arr.indexOf(val);
+  return (push ? !~index && [...arr, val] : ~index && arr.slice(0, index).concat(arr.slice(index + 1))) || arr;
+}
+function toValueProp(it) {
+  return it.value;
+}
+
+// src/dom/parse-html.ts
+var fallback = document.createTextNode("");
+var parser = /* @__PURE__ */ new Range();
+function parseHTML(html2) {
+  return parser.createContextualFragment(html2);
+}
+function parseHTMLOrSingleNode(html2) {
+  const content = parseHTML(html2);
+  if (!content.firstChild) return fallback;
+  return content.firstChild === content.lastChild && // If the firstChild is a comment it's possible its
+  // a single replaced node, in which case the walker can't replace
+  // the node itself.
+  content.firstChild.nodeType !== 8 ? content.firstChild : content;
+}
+
+// src/dom/dom.ts
+function attr(element, name, value2) {
+  setAttribute(element, name, normalizeAttrValue(value2));
+}
+function setAttribute(element, name, value2) {
+  if (element.getAttribute(name) != value2) {
+    if (value2 === void 0) {
+      element.removeAttribute(name);
+    } else {
+      element.setAttribute(name, value2);
+    }
+  }
+}
+function classAttr(element, value2) {
+  setAttribute(element, "class", classValue(value2) || void 0);
+}
+function styleAttr(element, value2) {
+  setAttribute(element, "style", styleValue(value2) || void 0);
+}
+function data(node, value2) {
+  const normalizedValue = normalizeString(value2);
+  if (node.data !== normalizedValue) {
+    node.data = normalizedValue;
+  }
+}
+function textContent(node, value2) {
+  const normalizedValue = normalizeString(value2);
+  if (node.textContent !== normalizedValue) {
+    node.textContent = normalizedValue;
+  }
+}
+function attrs(scope, nodeAccessor, nextAttrs) {
+  const el = scope[nodeAccessor];
+  for (const { name } of el.attributes) {
+    if (!(nextAttrs && (name in nextAttrs || hasAttrAlias(el, name, nextAttrs)))) {
+      el.removeAttribute(name);
+    }
+  }
+  attrsInternal(scope, nodeAccessor, nextAttrs);
+}
+function hasAttrAlias(element, attr2, nextAttrs) {
+  return attr2 === "checked" && element.tagName === "INPUT" && "checkedValue" in nextAttrs;
+}
+function partialAttrs(scope, nodeAccessor, nextAttrs, skip) {
+  const el = scope[nodeAccessor];
+  const partial = {};
+  for (const { name } of el.attributes) {
+    if (!skip[name] && !(nextAttrs && name in nextAttrs)) {
+      el.removeAttribute(name);
+    }
+  }
+  for (const key in nextAttrs) {
+    if (!skip[key]) partial[key] = nextAttrs[key];
+  }
+  attrsInternal(scope, nodeAccessor, partial);
+}
+function attrsInternal(scope, nodeAccessor, nextAttrs) {
+  const el = scope[nodeAccessor];
+  let events;
+  let skip;
+  switch (el.tagName) {
+    case "INPUT":
+      if ("checked" in nextAttrs || "checkedChange" in nextAttrs) {
+        controllable_input_checked(
+          scope,
+          nodeAccessor,
+          nextAttrs.checked,
+          nextAttrs.checkedChange
+        );
+      } else if ("checkedValue" in nextAttrs || "checkedValueChange" in nextAttrs) {
+        controllable_input_checkedValue(
+          scope,
+          nodeAccessor,
+          nextAttrs.checkedValue,
+          nextAttrs.checkedValueChange,
+          nextAttrs.value
+        );
+      } else if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+        controllable_input_value(
+          scope,
+          nodeAccessor,
+          nextAttrs.value,
+          nextAttrs.valueChange
+        );
+      } else {
+        break;
+      }
+      skip = /^(?:value|checked(?:Value)?)(?:Change)?$/;
+      break;
+    case "SELECT":
+      if ("value" in nextAttrs || "valueChange" in nextAttrs) {
+        controllable_select_value(
+          scope,
+          nodeAccessor,
+          nextAttrs.value,
+          nextAttrs.valueChange
+        );
+        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 ("open" in nextAttrs || "openChange" in nextAttrs) {
+        controllable_detailsOrDialog_open(
+          scope,
+          nodeAccessor,
+          nextAttrs.open,
+          nextAttrs.openChange
+        );
+        skip = /^open(?:Change)?$/;
+      }
+      break;
+  }
+  for (const name in nextAttrs) {
+    const value2 = nextAttrs[name];
+    switch (name) {
+      case "class":
+        classAttr(el, value2);
+        break;
+      case "style":
+        styleAttr(el, value2);
+        break;
+      case "renderBody":
+        break;
+      default: {
+        if (isEventHandler(name)) {
+          (events ||= scope[nodeAccessor + "~" /* EventAttributes */] = {})[getEventHandlerName(name)] = value2;
+        } else if (!skip?.test(name)) {
+          attr(el, name, value2);
+        }
+      }
+    }
+  }
+}
+function attrsEvents(scope, nodeAccessor) {
+  const el = scope[nodeAccessor];
+  const events = scope[nodeAccessor + "~" /* EventAttributes */];
+  switch (scope[nodeAccessor + "=" /* ControlledType */]) {
+    case 0 /* InputChecked */:
+      controllable_input_checked_effect(scope, nodeAccessor);
+      break;
+    case 1 /* InputCheckedValue */:
+      controllable_input_checkedValue_effect(scope, nodeAccessor);
+      break;
+    case 2 /* InputValue */:
+      controllable_input_value_effect(scope, nodeAccessor);
+      break;
+    case 3 /* SelectValue */:
+      controllable_select_value_effect(scope, nodeAccessor);
+      break;
+    case 4 /* DetailsOrDialogOpen */:
+      controllable_detailsOrDialog_open_effect(scope, nodeAccessor);
+      break;
+  }
+  for (const name in events) {
+    on(el, name, events[name]);
+  }
+}
+function html(scope, value2, index) {
+  const firstChild = scope[index];
+  const lastChild = scope[index + "-"] || firstChild;
+  const parentNode = firstChild.parentNode;
+  const afterReference = lastChild.nextSibling;
+  const newContent = parseHTML(value2 || value2 === 0 ? value2 + "" : "<!>");
+  scope[index] = newContent.firstChild;
+  scope[index + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild;
+  parentNode.insertBefore(newContent, firstChild);
+  let current = firstChild;
+  while (current !== afterReference) {
+    const next = current.nextSibling;
+    current.remove();
+    current = next;
+  }
+}
+function props(scope, nodeIndex, index) {
+  const nextProps = scope[index];
+  const prevProps = scope[index + "-"];
+  const node = scope[nodeIndex];
+  if (prevProps) {
+    for (const name in prevProps) {
+      if (!(name in nextProps)) {
+        node[name] = void 0;
+      }
+    }
+  }
+  for (const name in nextProps) {
+    node[name] = nextProps[name];
+  }
+  scope[index + "-"] = nextProps;
+}
+function normalizeAttrValue(value2) {
+  if (value2 || value2 === 0) {
+    return value2 === true ? "" : value2 + "";
+  }
+}
+function normalizeString(value2) {
+  return value2 || value2 === 0 ? value2 + "" : "\u200D";
+}
+function lifecycle(scope, index, thisObj) {
+  const instance = scope[index];
+  if (instance) {
+    Object.assign(instance, thisObj);
+    instance.onUpdate?.();
+  } else {
+    scope[index] = thisObj;
+    thisObj.onMount?.();
+    getAbortSignal(
+      scope,
+      "-" /* LifecycleAbortController */ + index
+    ).onabort = () => thisObj.onDestroy?.();
+  }
+}
+
+// src/dom/walker.ts
+var walker = /* @__PURE__ */ document.createTreeWalker(document);
+function trimWalkString(walkString) {
+  let end = walkString.length;
+  while (walkString.charCodeAt(--end) > 47 /* BeginChild */) ;
+  return walkString.slice(0, end + 1);
+}
+function walk(startNode, walkCodes, scope) {
+  walker.currentNode = startNode;
+  walkInternal(walkCodes, scope, scope, 0);
+  walker.currentNode = document.documentElement;
+}
+function walkInternal(walkCodes, scope, cleanupOwnerScope, 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;
+    if (value2 >= 117 /* Multiplier */) {
+      storedMultiplier = currentMultiplier * 10 /* Multiplier */ + value2 - 117 /* Multiplier */;
+    } else if (value2 >= 107 /* Out */) {
+      value2 = 10 /* Out */ * currentMultiplier + value2 - 107 /* Out */;
+      while (value2--) {
+        walker.parentNode();
+      }
+      walker.nextSibling();
+    } else if (value2 >= 97 /* Over */) {
+      value2 = 10 /* Over */ * currentMultiplier + value2 - 97 /* Over */;
+      while (value2--) {
+        walker.nextSibling();
+      }
+    } else if (value2 >= 67 /* Next */) {
+      value2 = 20 /* Next */ * currentMultiplier + value2 - 67 /* Next */;
+      while (value2--) {
+        walker.nextNode();
+      }
+    } else if (value2 === 47 /* BeginChild */) {
+      currentWalkIndex = walkInternal(
+        walkCodes,
+        scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global),
+        cleanupOwnerScope,
+        currentWalkIndex
+      );
+    } else if (value2 === 38 /* EndChild */) {
+      return currentWalkIndex;
+    } else if (value2 === 32 /* Get */) {
+      scope[true ? getDebugKey(currentScopeIndex++, walker.currentNode) : currentScopeIndex++] = walker.currentNode;
+    } else {
+      const newNode = scope[true ? getDebugKey(currentScopeIndex++, "#text") : currentScopeIndex++] = document.createTextNode("");
+      const current = walker.currentNode;
+      const parentNode = current.parentNode;
+      if (value2 !== 37 /* Replace */) {
+        throw new Error(`Unknown walk code: ${value2}`);
+      }
+      parentNode.replaceChild(newNode, current);
+      walker.currentNode = newNode;
+    }
+  }
+  return currentWalkIndex;
+}
+function getDebugKey(index, node) {
+  if (typeof node === "string") {
+    return `${node}/${index}`;
+  } else if (node.nodeType === 3 /* Text */) {
+    return `#text/${index}`;
+  } else if (node.nodeType === 8 /* Comment */) {
+    return `#comment/${index}`;
+  } else if (node.nodeType === 1 /* Element */) {
+    return `#${node.tagName.toLowerCase()}/${index}`;
+  }
+  return index;
+}
+
+// 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);
+    }
+  }
+  return newScope;
+}
+function createScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, ownerScope) {
+  if (typeof tagNameOrRenderer !== "string") {
+    return createScopeWithRenderer(tagNameOrRenderer, $global, ownerScope);
+  }
+  const newScope = createScope($global);
+  newScope._ = newScope.___cleanupOwner = ownerScope;
+  newScope[true ? `#${tagNameOrRenderer}/0` : 0] = newScope.___startNode = newScope.___endNode = document.createElement(tagNameOrRenderer);
+  return newScope;
+}
+function initRenderer(renderer, scope) {
+  const dom = renderer.___clone();
+  walk(
+    dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom,
+    renderer.___walks,
+    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);
+  }
+  return dom;
+}
+function dynamicTagAttrs(nodeAccessor, getRenderBody, inputIsArgs) {
+  return (scope, attrsOrOp) => {
+    const renderer = scope[nodeAccessor + "(" /* ConditionalRenderer */];
+    if (!renderer || attrsOrOp === DIRTY) {
+      return;
+    }
+    const childScope = scope[nodeAccessor + "!" /* ConditionalScope */];
+    if (attrsOrOp === MARK || attrsOrOp === CLEAN) {
+      return renderer.___args?.(childScope, attrsOrOp);
+    }
+    const 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) {
+      const attributes = attrsOrOp();
+      renderer.___args(
+        childScope,
+        inputIsArgs ? attributes : [
+          renderBody ? {
+            ...attributes,
+            renderBody
+          } : attributes
+        ]
+      );
+    }
+  };
+}
+function createRendererWithOwner(template, rawWalks, setup, getClosureSignals, getArgs) {
+  let args;
+  let closureSignals;
+  const id = true ? Symbol("Marko Renderer") : {};
+  const walks = rawWalks ? /* @__PURE__ */ trimWalkString(rawWalks) : " ";
+  return (owner) => {
+    return {
+      ___id: id,
+      ___template: template,
+      ___walks: walks,
+      ___setup: setup,
+      ___clone: _clone,
+      ___owner: owner,
+      ___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 _clone() {
+  return (this.___sourceNode ||= parseHTMLOrSingleNode(
+    this.___template
+  )).cloneNode(true);
+}
+
+// src/dom/control-flow.ts
+function patchConditionals(fn) {
+  conditional = fn(conditional);
+  conditionalOnlyChild = fn(conditionalOnlyChild);
+}
+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];
+    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;
+      } else {
+        op = CLEAN;
+      }
+    }
+    intersection2?.(scope, op);
+    renderBodyClosures(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;
+  }
+  insertBefore(
+    newScope,
+    prevScope.___startNode.parentNode,
+    prevScope.___startNode
+  );
+  removeAndDestroyScope(prevScope);
+}
+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;
+    let currentRenderer = scope[rendererAccessor];
+    let op = newRendererOrOp;
+    if (newRendererOrOp !== MARK && newRendererOrOp !== CLEAN) {
+      const normalizedRenderer = normalizeDynamicRenderer(newRendererOrOp);
+      if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
+        currentRenderer = scope[rendererAccessor] = normalizedRenderer;
+        setConditionalRendererOnlyChild(
+          scope,
+          nodeAccessor,
+          normalizedRenderer
+        );
+        fn && fn(scope);
+        op = DIRTY;
+      } else {
+        op = CLEAN;
+      }
+    }
+    intersection2?.(scope, op);
+    renderBodyClosures(currentRenderer, scope[childScopeAccessor], op);
+  };
+};
+function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
+  const prevScope = scope[nodeAccessor + "!" /* ConditionalScope */];
+  const referenceNode = scope[nodeAccessor];
+  referenceNode.textContent = "";
+  if (newRenderer) {
+    const newScope = scope[nodeAccessor + "!" /* ConditionalScope */] = createScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope);
+    insertBefore(newScope, referenceNode, null);
+  }
+  prevScope && destroyScope(prevScope);
+}
+var emptyMarkerMap = /* @__PURE__ */ new Map([[Symbol(), getEmptyScope(void 0)]]);
+var emptyMarkerArray = [
+  /* @__PURE__ */ getEmptyScope(void 0)
+];
+var emptyMap = /* @__PURE__ */ new Map();
+var emptyArray = [];
+function loopOf(nodeAccessor, renderer) {
+  return loop(
+    nodeAccessor,
+    renderer,
+    ([all, by = bySecondArg], cb) => {
+      if (typeof by === "string") {
+        forOf(
+          all,
+          (item, i) => cb(item[by], [item, i])
+        );
+      } else {
+        forOf(all, (item, i) => cb(by(item, i), [item, i]));
+      }
+    }
+  );
+}
+function loopIn(nodeAccessor, renderer) {
+  return loop(
+    nodeAccessor,
+    renderer,
+    ([obj, by = byFirstArg], cb) => forIn(obj, (key, value2) => cb(by(key, value2), [key, value2]))
+  );
+}
+function loopTo(nodeAccessor, renderer) {
+  return loop(
+    nodeAccessor,
+    renderer,
+    ([to, from, step, by = byFirstArg], cb) => forTo(to, from, step, (v) => cb(by(v), [v]))
+  );
+}
+function loop(nodeAccessor, renderer, forEach) {
+  const loopScopeAccessor = nodeAccessor + "!" /* LoopScopeArray */;
+  const 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);
+          }
+        }
+      }
+      return;
+    }
+    const referenceNode = scope[nodeAccessor];
+    const referenceIsMarker = referenceNode.nodeType === 8 || referenceNode.nodeType === 3;
+    const oldMap = scope[nodeAccessor + "(" /* LoopScopeMap */] || (referenceIsMarker ? emptyMarkerMap : emptyMap);
+    const oldArray = scope[nodeAccessor + "!" /* LoopScopeArray */] || Array.from(oldMap.values());
+    let newMap;
+    let newArray;
+    let afterReference;
+    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;
+      } else {
+      }
+      if (params) {
+        params(childScope, args);
+      }
+      if (closureSignals) {
+        for (const signal of closureSignals) {
+          signal(childScope, closureOp);
+        }
+      }
+      if (newMap) {
+        newMap.set(key, childScope);
+        newArray.push(childScope);
+      } else {
+        newMap = /* @__PURE__ */ new Map([[key, childScope]]);
+        newArray = [childScope];
+      }
+    });
+    if (!newMap) {
+      if (referenceIsMarker) {
+        newMap = emptyMarkerMap;
+        newArray = emptyMarkerArray;
+        getEmptyScope(referenceNode);
+      } else {
+        oldArray.forEach(destroyScope);
+        referenceNode.textContent = "";
+        newMap = emptyMap;
+        newArray = emptyArray;
+        needsReconciliation = false;
+      }
+    }
+    if (needsReconciliation) {
+      if (referenceIsMarker) {
+        if (oldMap === emptyMarkerMap) {
+          getEmptyScope(referenceNode);
+        }
+        const oldLastChild = oldArray[oldArray.length - 1];
+        afterReference = oldLastChild.___endNode.nextSibling;
+        parentNode = oldLastChild.___startNode.parentNode;
+      } else {
+        afterReference = null;
+        parentNode = referenceNode;
+      }
+      reconcile(parentNode, oldArray, newArray, afterReference);
+    }
+    scope[nodeAccessor + "(" /* LoopScopeMap */] = newMap;
+    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;
+}
+function byFirstArg(name) {
+  return name;
+}
+function isDifferentRenderer(a, b) {
+  return a !== b && (a?.___id || 0) !== b?.___id;
+}
+
+// src/dom/compat.ts
+var classIdToScope = /* @__PURE__ */ new Map();
+var compat = {
+  patchConditionals,
+  queueEffect,
+  init() {
+    register(SET_SCOPE_REGISTER_ID, (scope) => {
+      classIdToScope.set(scope.m5c, scope);
+    });
+  },
+  registerRenderer(fn) {
+    register(RENDERER_REGISTER_ID, fn);
+  },
+  isOp(value2) {
+    return value2 === MARK || value2 === CLEAN || value2 === DIRTY;
+  },
+  isRenderer(renderer) {
+    return renderer.___clone !== void 0;
+  },
+  getStartNode(scope) {
+    return scope.___startNode;
+  },
+  setScopeNodes(scope, startNode, endNode) {
+    scope.___startNode = startNode;
+    scope.___endNode = endNode;
+  },
+  runComponentEffects() {
+    runEffects(this.effects);
+  },
+  resolveRegistered(value2, {
+    runtimeId,
+    componentIdPrefix
+  }) {
+    if (Array.isArray(value2) && typeof value2[0] === "string") {
+      return getRegisteredWithScope(
+        value2[0],
+        value2.length === 2 && window[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.___scopeLookup[value2[1]]
+      );
+    }
+    return value2;
+  },
+  createRenderer(setup, clone, args) {
+    const renderer = createRenderer(
+      "",
+      void 0,
+      setup,
+      void 0,
+      args && (() => args)
+    );
+    renderer.___clone = clone;
+    return renderer;
+  },
+  render(out, component, renderer, input) {
+    let scope = component.scope;
+    if (!scope) {
+      scope = classIdToScope.get(component.id);
+      if (scope) {
+        component.scope = scope;
+        classIdToScope.delete(component.id);
+      }
+    }
+    const args = renderer.___args || noop;
+    let existing = false;
+    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);
+          }
+        }
+      } else {
+        args(scope, MARK);
+        existing = true;
+      }
+      args(scope, input);
+    });
+    if (!existing) {
+      return scope.___startNode === scope.___endNode ? scope.___startNode : scope.___startNode.parentNode;
+    }
+  }
+};
+function noop() {
+}
+
+// src/dom/template.ts
+var createTemplate = (templateId, ...rendererArgs) => {
+  const renderer = createRenderer(...rendererArgs);
+  renderer.mount = mount;
+  renderer._ = renderer;
+  if (true) {
+    renderer.render = () => {
+      throw new Error(
+        `render() is not implemented for the DOM compilation of a Marko template`
+      );
+    };
+  }
+  return register(templateId, renderer);
+};
+function mount(input = {}, reference, position) {
+  let scope, dom;
+  let { $global } = input;
+  if ($global) {
+    ({ $global, ...input } = input);
+    $global = {
+      runtimeId: DEFAULT_RUNTIME_ID,
+      renderId: DEFAULT_RENDER_ID,
+      ...$global
+    };
+  } else {
+    $global = {
+      runtimeId: DEFAULT_RUNTIME_ID,
+      renderId: DEFAULT_RENDER_ID
+    };
+  }
+  const args = this.___args;
+  const effects = prepareEffects(() => {
+    scope = createScope($global);
+    dom = initRenderer(this, scope);
+    if (args) {
+      args(scope, [input]);
+    }
+  });
+  switch (position) {
+    case "afterbegin":
+      reference.insertBefore(dom, reference.firstChild);
+      break;
+    case "afterend":
+      reference.parentElement.insertBefore(dom, reference.nextSibling);
+      break;
+    case "beforebegin":
+      reference.parentElement.insertBefore(dom, reference);
+      break;
+    default:
+      reference.appendChild(dom);
+      break;
+  }
+  runEffects(effects);
+  return {
+    update: (newInput) => {
+      if (args) {
+        runEffects(
+          prepareEffects(() => {
+            args(scope, MARK);
+            args(scope, [newInput]);
+          })
+        );
+      }
+    },
+    destroy: () => {
+      removeAndDestroyScope(scope);
+    }
+  };
+}