tutuca 0.9.62 → 0.9.64

package/dist/tutuca-cli.js

@@ -4674,7 +4674,12 @@ class ValParser {
         const newS = px.frame.macroVars?.[name];
         if (newS !== undefined) {
           const tokens = tokenizeValue(newS.trim());
-          return tokens.length === 1 ? this.parseToken(tokens[0], px) : null;
+          if (tokens.length !== 1)
+            return null;
+          const val = this.parseToken(tokens[0], px);
+          if (val instanceof ConstVal)
+            val.fromMacroVar = true;
+          return val;
         }
         px.onParseIssue("bad-value", { role: "macro-var", name, value: s });
         return null;
@@ -4924,7 +4929,7 @@ var init_value = __esm(() => {
     toLiteralSource() {
       let out = "";
       for (const v of this.vals) {
-        if (!(v instanceof ConstVal))
+        if (!(v instanceof ConstVal) || v.fromMacroVar)
           return null;
         out += v.val;
       }
@@ -4940,9 +4945,10 @@ var init_value = __esm(() => {
       }
       let lo = 0;
       let hi = vals.length;
-      while (lo < hi && vals[lo] instanceof ConstVal && vals[lo].val === "")
+      const isTrimmable = (v) => v instanceof ConstVal && v.val === "" && !v.fromMacroVar;
+      while (lo < hi && isTrimmable(vals[lo]))
         lo++;
-      while (hi > lo && vals[hi - 1] instanceof ConstVal && vals[hi - 1].val === "")
+      while (hi > lo && isTrimmable(vals[hi - 1]))
         hi--;
       return new StrTplVal(lo === 0 && hi === vals.length ? vals : vals.slice(lo, hi));
     }
@@ -5344,6 +5350,331 @@ var init_attribute = __esm(() => {
   };
 });
 
+// src/vdom.js
+function applyProperties(node, props, previous) {
+  const namespaced = isNamespaced(node);
+  for (const propName in props) {
+    const propValue = props[propName];
+    if (propValue === undefined)
+      removeProperty(node, propName, previous);
+    else if (propName === "dangerouslySetInnerHTML")
+      node.innerHTML = propValue.__html ?? "";
+    else if (propName === "className")
+      node.setAttribute("class", propValue);
+    else if (namespaced || isHtmlAttribute(propName))
+      node.setAttribute(propName, propValue);
+    else
+      node[propName] = propValue;
+  }
+}
+function removeProperty(node, propName, previous) {
+  const previousValue = previous[propName];
+  if (propName === "dangerouslySetInnerHTML")
+    node.replaceChildren();
+  else if (propName === "className")
+    node.removeAttribute("class");
+  else if (propName === "htmlFor")
+    node.removeAttribute("for");
+  else if (isNamespaced(node) || typeof previousValue === "string" || isHtmlAttribute(propName))
+    node.removeAttribute(propName);
+  else
+    node[propName] = null;
+}
+
+class VBase {
+}
+function childsEqual(a, b) {
+  if (a === b)
+    return true;
+  for (let i = 0;i < a.length; i++)
+    if (!a[i].isEqualTo(b[i]))
+      return false;
+  return true;
+}
+function appendChildNodes(parent, childs, opts) {
+  for (const child of childs)
+    parent.appendChild(child.toDom(opts));
+}
+function addChild(normalizedChildren, child) {
+  if (child == null)
+    return;
+  if (isIterable(child)) {
+    for (const c of child)
+      addChild(normalizedChildren, c);
+  } else if (child instanceof VBase) {
+    if (child instanceof VFragment)
+      normalizedChildren.push(...child.childs);
+    else
+      normalizedChildren.push(child);
+  } else
+    normalizedChildren.push(new VText(child));
+}
+function diffProps(a, b) {
+  if (a === b)
+    return null;
+  let diff = null;
+  for (const aKey in a) {
+    if (!Object.hasOwn(b, aKey)) {
+      diff ??= {};
+      diff[aKey] = undefined;
+    } else if (a[aKey] !== b[aKey]) {
+      diff ??= {};
+      diff[aKey] = b[aKey];
+    }
+  }
+  for (const bKey in b) {
+    if (!Object.hasOwn(a, bKey)) {
+      diff ??= {};
+      diff[bKey] = b[bKey];
+    }
+  }
+  return diff;
+}
+function morphNode(domNode, source, target, opts) {
+  if (source === target || source.isEqualTo(target))
+    return domNode;
+  const type = source.nodeType;
+  if (type === target.nodeType) {
+    if (type === 3 || type === 8) {
+      domNode.data = target.text;
+      return domNode;
+    }
+    if (type === 1 && source.isSameKind(target)) {
+      const propsDiff = diffProps(source.attrs, target.attrs);
+      const isSelect = source.tag === "SELECT";
+      if (propsDiff) {
+        if (isSelect && "value" in propsDiff) {
+          const { value: _v, ...rest } = propsDiff;
+          applyProperties(domNode, rest, source.attrs);
+        } else
+          applyProperties(domNode, propsDiff, source.attrs);
+      }
+      if (!target.attrs.dangerouslySetInnerHTML)
+        morphChildren(domNode, source.childs, target.childs, opts);
+      if (isSelect && target.attrs.value !== undefined)
+        applyProperties(domNode, { value: target.attrs.value }, source.attrs);
+      return domNode;
+    }
+    if (type === 11) {
+      morphChildren(domNode, source.childs, target.childs, opts);
+      return domNode;
+    }
+  }
+  const newNode = target.toDom(opts);
+  domNode.parentNode?.replaceChild(newNode, domNode);
+  return newNode;
+}
+function morphChildren(parentDom, oldChilds, newChilds, opts) {
+  if (oldChilds.length === 0) {
+    appendChildNodes(parentDom, newChilds, opts);
+    return;
+  }
+  if (newChilds.length === 0) {
+    parentDom.replaceChildren();
+    return;
+  }
+  if (oldChilds.length === newChilds.length) {
+    let hasKey = false;
+    for (let i = 0;i < oldChilds.length; i++) {
+      if (getKey(oldChilds[i]) != null || getKey(newChilds[i]) != null) {
+        hasKey = true;
+        break;
+      }
+    }
+    if (!hasKey) {
+      let dom = parentDom.firstChild;
+      for (let i = 0;i < oldChilds.length; i++) {
+        const next = dom.nextSibling;
+        morphNode(dom, oldChilds[i], newChilds[i], opts);
+        dom = next;
+      }
+      return;
+    }
+  }
+  const domNodes = Array.from(parentDom.childNodes);
+  const oldKeyMap = Object.create(null);
+  for (let i = 0;i < oldChilds.length; i++) {
+    const key = getKey(oldChilds[i]);
+    if (key != null)
+      oldKeyMap[key] = i;
+  }
+  const used = new Uint8Array(oldChilds.length);
+  let unkeyedCursor = 0;
+  for (let j = 0;j < newChilds.length; j++) {
+    const newChild = newChilds[j];
+    const newKey = getKey(newChild);
+    let oldIdx = -1;
+    if (newKey != null) {
+      if (newKey in oldKeyMap && !used[oldKeyMap[newKey]])
+        oldIdx = oldKeyMap[newKey];
+    } else {
+      while (unkeyedCursor < oldChilds.length) {
+        if (!used[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
+          oldIdx = unkeyedCursor++;
+          break;
+        }
+        unkeyedCursor++;
+      }
+    }
+    if (oldIdx >= 0) {
+      used[oldIdx] = 1;
+      const newDom = morphNode(domNodes[oldIdx], oldChilds[oldIdx], newChild, opts);
+      const ref = parentDom.childNodes[j] ?? null;
+      if (newDom !== ref)
+        parentDom.insertBefore(newDom, ref);
+    } else {
+      const ref = parentDom.childNodes[j] ?? null;
+      parentDom.insertBefore(newChild.toDom(opts), ref);
+    }
+  }
+  for (let i = oldChilds.length - 1;i >= 0; i--)
+    if (!used[i] && domNodes[i].parentNode === parentDom)
+      parentDom.removeChild(domNodes[i]);
+}
+function render(vnode, container, options, prev) {
+  const isFragment = vnode instanceof VFragment;
+  if (prev && prev.vnode instanceof VFragment === isFragment) {
+    const oldDom = isFragment ? container : prev.dom;
+    const newDom = morphNode(oldDom, prev.vnode, vnode, options);
+    return { vnode, dom: isFragment ? container : newDom };
+  }
+  const domNode = vnode.toDom(options);
+  container.replaceChildren(domNode);
+  return { vnode, dom: isFragment ? container : domNode };
+}
+function h(tagName, properties, children, namespace) {
+  const props = {};
+  let key;
+  if (properties) {
+    for (const propName in properties) {
+      const propVal = properties[propName];
+      switch (propName) {
+        case "key":
+          key = propVal;
+          break;
+        case "namespace":
+          namespace = namespace ?? propVal;
+          break;
+        case "class":
+          props.className = propVal;
+          break;
+        case "for":
+          props.htmlFor = propVal;
+          break;
+        default:
+          props[propName] = isHtmlAttribute(propName) ? String(propVal) : propVal;
+      }
+    }
+  }
+  const c = tagName.charCodeAt(0);
+  const tag = namespace == null && c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
+  const normalizedChildren = [];
+  addChild(normalizedChildren, children);
+  return new VNode2(tag, props, normalizedChildren, key, namespace);
+}
+var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a"), HTML_NS = "http://www.w3.org/1999/xhtml", isNamespaced = (node) => {
+  const ns = node.namespaceURI;
+  return ns !== null && ns !== HTML_NS;
+}, getKey = (child) => child instanceof VNode2 ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode2;
+var init_vdom = __esm(() => {
+  VText = class VText extends VBase {
+    constructor(text) {
+      super();
+      this.text = String(text);
+    }
+    get nodeType() {
+      return 3;
+    }
+    isEqualTo(other) {
+      return other instanceof VText && this.text === other.text;
+    }
+    toDom(opts) {
+      return opts.document.createTextNode(this.text);
+    }
+  };
+  VComment = class VComment extends VBase {
+    constructor(text) {
+      super();
+      this.text = text;
+    }
+    get nodeType() {
+      return 8;
+    }
+    isEqualTo(other) {
+      return other instanceof VComment && this.text === other.text;
+    }
+    toDom(opts) {
+      return opts.document.createComment(this.text);
+    }
+  };
+  VFragment = class VFragment extends VBase {
+    constructor(childs) {
+      super();
+      this.childs = [];
+      addChild(this.childs, childs);
+    }
+    get nodeType() {
+      return 11;
+    }
+    isEqualTo(other) {
+      if (!(other instanceof VFragment) || this.childs.length !== other.childs.length)
+        return false;
+      return childsEqual(this.childs, other.childs);
+    }
+    toDom(opts) {
+      const fragment = opts.document.createDocumentFragment();
+      appendChildNodes(fragment, this.childs, opts);
+      return fragment;
+    }
+  };
+  VNode2 = class VNode2 extends VBase {
+    constructor(tag, attrs, childs, key, namespace) {
+      super();
+      this.tag = tag;
+      this.attrs = attrs ?? {};
+      this.childs = childs ?? [];
+      this.key = key != null ? String(key) : undefined;
+      this.namespace = typeof namespace === "string" ? namespace : null;
+    }
+    get nodeType() {
+      return 1;
+    }
+    isSameKind(other) {
+      return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+    }
+    isEqualTo(other) {
+      if (this === other)
+        return true;
+      if (!(other instanceof VNode2) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
+        return false;
+      }
+      if (this.attrs !== other.attrs) {
+        for (const key in this.attrs)
+          if (this.attrs[key] !== other.attrs[key])
+            return false;
+        for (const key in other.attrs)
+          if (!Object.hasOwn(this.attrs, key))
+            return false;
+      }
+      return childsEqual(this.childs, other.childs);
+    }
+    toDom(opts) {
+      const doc = opts.document;
+      const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
+      if (this.tag === "SELECT" && "value" in this.attrs) {
+        const { value, ...rest } = this.attrs;
+        applyProperties(node, rest, {});
+        appendChildNodes(node, this.childs, opts);
+        applyProperties(node, { value }, {});
+      } else {
+        applyProperties(node, this.attrs, {});
+        appendChildNodes(node, this.childs, opts);
+      }
+      return node;
+    }
+  };
+});
+
 // src/anode.js
 function resolveDynProducer(comp, dynName) {
   const dyn = comp?.dynamic?.[dynName];
@@ -5655,6 +5986,7 @@ var init_anode = __esm(() => {
   init_attribute();
   init_path();
   init_value();
+  init_vdom();
   TextNode = class TextNode extends BaseNode {
     constructor(val) {
       super();
@@ -5705,16 +6037,17 @@ var init_anode = __esm(() => {
     }
   };
   DomNode = class DomNode extends ChildsNode {
-    constructor(tagName, attrs, childs) {
+    constructor(tagName, attrs, childs, namespace = null) {
       super(childs);
       this.tagName = tagName;
       this.attrs = attrs;
+      this.namespace = namespace;
     }
     render(stack, rx) {
       const childNodes = new Array(this.childs.length);
       for (let i = 0;i < childNodes.length; i++)
         childNodes[i] = this.childs[i]?.render?.(stack, rx) ?? null;
-      return rx.renderTag(this.tagName, this.attrs.eval(stack), childNodes);
+      return rx.renderTag(this.tagName, this.attrs.eval(stack), childNodes, this.namespace);
     }
     setDataAttr(key, val) {
       this.attrs.setDataAttr(key, val);
@@ -5792,7 +6125,9 @@ var init_anode = __esm(() => {
           if (textChild)
             childs.unshift(new RenderTextNode(null, textChild));
           const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
-          return wrap(new DomNode(tag, nAttrs, domChilds), px, wrappers);
+          const ns = node.namespaceURI;
+          const namespace = ns && ns !== HTML_NS ? ns : null;
+          return wrap(new DomNode(tag, nAttrs, domChilds, namespace), px, wrappers);
         }
         return new CommentNode(`Error: InvalidTagName ${tag}`);
       } finally {
@@ -13337,455 +13672,134 @@ var init_transactor = __esm(() => {
       this._dispatchPath = null;
     }
     get dispatchPath() {
-      this._dispatchPath ??= this.path.compact();
-      return this._dispatchPath;
-    }
-    buildRootStack(root, comps) {
-      return Stack2.root(comps, root, this);
-    }
-    getHandlerAndArgs(root, _instance, comps) {
-      const stack = this.buildStack(root, comps);
-      const [handler, args] = this.handler.getHandlerAndArgs(stack, this);
-      const path = this.dispatchPath;
-      let dispatcher;
-      for (let i = 0;i < args.length; i++) {
-        if (args[i]?.toHandlerArg) {
-          dispatcher ??= new Dispatcher(path, this.transactor, this);
-          args[i] = args[i].toHandlerArg(dispatcher);
-        }
-      }
-      args.push(new EventContext(path, this.transactor, this));
-      return [handler, args];
-    }
-    lookupName(name) {
-      const { e } = this;
-      switch (name) {
-        case "value":
-          return getValue(e);
-        case "valueAsInt":
-          return toNullIfNaN(parseInt(getValue(e), 10));
-        case "valueAsFloat":
-          return toNullIfNaN(parseFloat(getValue(e)));
-        case "target":
-          return e.target;
-        case "event":
-          return e;
-        case "isAlt":
-          return e.altKey;
-        case "isShift":
-          return e.shiftKey;
-        case "isCtrl":
-        case "isCmd":
-          return isMac2 && e.metaKey || e.ctrlKey;
-        case "key":
-          return e.key;
-        case "keyCode":
-          return e.keyCode;
-        case "isUpKey":
-          return e.key === "ArrowUp";
-        case "isDownKey":
-          return e.key === "ArrowDown";
-        case "isSend":
-          return e.key === "Enter";
-        case "isCancel":
-          return e.key === "Escape";
-        case "isTabKey":
-          return e.key === "Tab";
-        case "ctx":
-          return new EventContext(this.dispatchPath, this.transactor, this);
-        case "dragInfo":
-          return this.dragInfo;
-      }
-      return null;
-    }
-  };
-  NameArgsTransaction = class NameArgsTransaction extends Transaction {
-    constructor(path, transactor, name, args, parentTransaction, opts = {}) {
-      super(path, transactor, parentTransaction);
-      this.name = name;
-      this.args = args;
-      this.opts = opts;
-      this.targetPath = path;
-    }
-    handlerProp = null;
-    getHandlerForName(comp) {
-      const handlers = comp?.[this.handlerProp];
-      return handlers?.[this.name] ?? handlers?.$unknown ?? nullHandler;
-    }
-    getHandlerAndArgs(_root, instance, comps) {
-      const handler = this.getHandlerForName(comps.getCompFor(instance));
-      return [handler, [...this.args, new EventContext(this.path, this.transactor, this)]];
-    }
-  };
-  ResponseEvent = class ResponseEvent extends NameArgsTransaction {
-    handlerProp = "response";
-  };
-  SendEvent = class SendEvent extends NameArgsTransaction {
-    handlerProp = "receive";
-    run(rootVal, comps) {
-      return this.opts.skipSelf ? rootVal : this.updateRootValue(rootVal, comps);
-    }
-    afterTransaction() {
-      const { path, name, args, opts, targetPath } = this;
-      if (opts.bubbles && path.steps.length > 0)
-        this.transactor.pushBubble(path.popStep(), name, args, opts, this, targetPath);
-    }
-  };
-  BubbleEvent = class BubbleEvent extends SendEvent {
-    handlerProp = "bubble";
-    constructor(path, transactor, name, args, parent, opts, targetPath) {
-      super(path, transactor, name, args, parent, opts);
-      this.targetPath = targetPath ?? path;
-    }
-    stopPropagation() {
-      this.opts.bubbles = false;
-    }
-  };
-  EventContext = class EventContext extends Dispatcher {
-    get name() {
-      return this.parent?.name ?? null;
-    }
-    get targetPath() {
-      return this.parent.targetPath;
-    }
-    stopPropagation() {
-      return this.parent.stopPropagation();
-    }
-  };
-  PathChanges = class PathChanges extends PathBuilder {
-    constructor(dispatcher) {
-      super();
-      this.dispatcher = dispatcher;
-    }
-    send(name, args, opts) {
-      return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
-    }
-    bubble(name, args, opts) {
-      return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
-    }
-    buildPath() {
-      return this.dispatcher.path.concat(this.pathChanges);
-    }
-  };
-});
-
-// src/vdom.js
-function applyProperties(node, props, previous) {
-  for (const propName in props) {
-    const propValue = props[propName];
-    if (propValue === undefined)
-      removeProperty(node, propName, previous);
-    else if (isHtmlAttribute(propName))
-      node.setAttribute(propName, propValue);
-    else if (propName === "dangerouslySetInnerHTML")
-      node.innerHTML = propValue.__html ?? "";
-    else if (propName === "className")
-      node.setAttribute("class", propValue);
-    else
-      node[propName] = propValue;
-  }
-}
-function removeProperty(node, propName, previous) {
-  const previousValue = previous[propName];
-  if (propName === "dangerouslySetInnerHTML")
-    node.replaceChildren();
-  else if (propName === "className")
-    node.removeAttribute("class");
-  else if (propName === "htmlFor")
-    node.removeAttribute("for");
-  else if (typeof previousValue === "string" || isHtmlAttribute(propName))
-    node.removeAttribute(propName);
-  else
-    node[propName] = null;
-}
-
-class VBase {
-}
-function childsEqual(a, b) {
-  if (a === b)
-    return true;
-  for (let i = 0;i < a.length; i++)
-    if (!a[i].isEqualTo(b[i]))
-      return false;
-  return true;
-}
-function appendChildNodes(parent, childs, opts) {
-  for (const child of childs)
-    parent.appendChild(child.toDom(opts));
-}
-function addChild(normalizedChildren, child) {
-  if (child == null)
-    return;
-  if (isIterable(child)) {
-    for (const c of child)
-      addChild(normalizedChildren, c);
-  } else if (child instanceof VBase) {
-    if (child instanceof VFragment)
-      normalizedChildren.push(...child.childs);
-    else
-      normalizedChildren.push(child);
-  } else
-    normalizedChildren.push(new VText(child));
-}
-function diffProps(a, b) {
-  if (a === b)
-    return null;
-  let diff = null;
-  for (const aKey in a) {
-    if (!Object.hasOwn(b, aKey)) {
-      diff ??= {};
-      diff[aKey] = undefined;
-    } else if (a[aKey] !== b[aKey]) {
-      diff ??= {};
-      diff[aKey] = b[aKey];
-    }
-  }
-  for (const bKey in b) {
-    if (!Object.hasOwn(a, bKey)) {
-      diff ??= {};
-      diff[bKey] = b[bKey];
-    }
-  }
-  return diff;
-}
-function morphNode(domNode, source, target, opts) {
-  if (source === target || source.isEqualTo(target))
-    return domNode;
-  const type3 = source.nodeType;
-  if (type3 === target.nodeType) {
-    if (type3 === 3 || type3 === 8) {
-      domNode.data = target.text;
-      return domNode;
-    }
-    if (type3 === 1 && source.isSameKind(target)) {
-      const propsDiff = diffProps(source.attrs, target.attrs);
-      const isSelect = source.tag === "SELECT";
-      if (propsDiff) {
-        if (isSelect && "value" in propsDiff) {
-          const { value: _v, ...rest } = propsDiff;
-          applyProperties(domNode, rest, source.attrs);
-        } else
-          applyProperties(domNode, propsDiff, source.attrs);
-      }
-      if (!target.attrs.dangerouslySetInnerHTML)
-        morphChildren(domNode, source.childs, target.childs, opts);
-      if (isSelect && target.attrs.value !== undefined)
-        applyProperties(domNode, { value: target.attrs.value }, source.attrs);
-      return domNode;
-    }
-    if (type3 === 11) {
-      morphChildren(domNode, source.childs, target.childs, opts);
-      return domNode;
-    }
-  }
-  const newNode = target.toDom(opts);
-  domNode.parentNode?.replaceChild(newNode, domNode);
-  return newNode;
-}
-function morphChildren(parentDom, oldChilds, newChilds, opts) {
-  if (oldChilds.length === 0) {
-    appendChildNodes(parentDom, newChilds, opts);
-    return;
-  }
-  if (newChilds.length === 0) {
-    parentDom.replaceChildren();
-    return;
-  }
-  if (oldChilds.length === newChilds.length) {
-    let hasKey = false;
-    for (let i = 0;i < oldChilds.length; i++) {
-      if (getKey(oldChilds[i]) != null || getKey(newChilds[i]) != null) {
-        hasKey = true;
-        break;
-      }
+      this._dispatchPath ??= this.path.compact();
+      return this._dispatchPath;
     }
-    if (!hasKey) {
-      let dom = parentDom.firstChild;
-      for (let i = 0;i < oldChilds.length; i++) {
-        const next = dom.nextSibling;
-        morphNode(dom, oldChilds[i], newChilds[i], opts);
-        dom = next;
-      }
-      return;
+    buildRootStack(root, comps) {
+      return Stack2.root(comps, root, this);
     }
-  }
-  const domNodes = Array.from(parentDom.childNodes);
-  const oldKeyMap = Object.create(null);
-  for (let i = 0;i < oldChilds.length; i++) {
-    const key = getKey(oldChilds[i]);
-    if (key != null)
-      oldKeyMap[key] = i;
-  }
-  const used2 = new Uint8Array(oldChilds.length);
-  let unkeyedCursor = 0;
-  for (let j = 0;j < newChilds.length; j++) {
-    const newChild = newChilds[j];
-    const newKey = getKey(newChild);
-    let oldIdx = -1;
-    if (newKey != null) {
-      if (newKey in oldKeyMap && !used2[oldKeyMap[newKey]])
-        oldIdx = oldKeyMap[newKey];
-    } else {
-      while (unkeyedCursor < oldChilds.length) {
-        if (!used2[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
-          oldIdx = unkeyedCursor++;
-          break;
+    getHandlerAndArgs(root, _instance, comps) {
+      const stack = this.buildStack(root, comps);
+      const [handler, args] = this.handler.getHandlerAndArgs(stack, this);
+      const path = this.dispatchPath;
+      let dispatcher;
+      for (let i = 0;i < args.length; i++) {
+        if (args[i]?.toHandlerArg) {
+          dispatcher ??= new Dispatcher(path, this.transactor, this);
+          args[i] = args[i].toHandlerArg(dispatcher);
         }
-        unkeyedCursor++;
       }
+      args.push(new EventContext(path, this.transactor, this));
+      return [handler, args];
     }
-    if (oldIdx >= 0) {
-      used2[oldIdx] = 1;
-      const newDom = morphNode(domNodes[oldIdx], oldChilds[oldIdx], newChild, opts);
-      const ref = parentDom.childNodes[j] ?? null;
-      if (newDom !== ref)
-        parentDom.insertBefore(newDom, ref);
-    } else {
-      const ref = parentDom.childNodes[j] ?? null;
-      parentDom.insertBefore(newChild.toDom(opts), ref);
-    }
-  }
-  for (let i = oldChilds.length - 1;i >= 0; i--)
-    if (!used2[i] && domNodes[i].parentNode === parentDom)
-      parentDom.removeChild(domNodes[i]);
-}
-function render(vnode, container, options, prev) {
-  const isFragment = vnode instanceof VFragment;
-  if (prev && prev.vnode instanceof VFragment === isFragment) {
-    const oldDom = isFragment ? container : prev.dom;
-    const newDom = morphNode(oldDom, prev.vnode, vnode, options);
-    return { vnode, dom: isFragment ? container : newDom };
-  }
-  const domNode = vnode.toDom(options);
-  container.replaceChildren(domNode);
-  return { vnode, dom: isFragment ? container : domNode };
-}
-function h(tagName, properties, children) {
-  const c = tagName.charCodeAt(0);
-  const tag = c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
-  const props = {};
-  let key, namespace;
-  if (properties) {
-    for (const propName in properties) {
-      const propVal = properties[propName];
-      switch (propName) {
+    lookupName(name) {
+      const { e } = this;
+      switch (name) {
+        case "value":
+          return getValue(e);
+        case "valueAsInt":
+          return toNullIfNaN(parseInt(getValue(e), 10));
+        case "valueAsFloat":
+          return toNullIfNaN(parseFloat(getValue(e)));
+        case "target":
+          return e.target;
+        case "event":
+          return e;
+        case "isAlt":
+          return e.altKey;
+        case "isShift":
+          return e.shiftKey;
+        case "isCtrl":
+        case "isCmd":
+          return isMac2 && e.metaKey || e.ctrlKey;
         case "key":
-          key = propVal;
-          break;
-        case "namespace":
-          namespace = propVal;
-          break;
-        case "class":
-          props.className = propVal;
-          break;
-        case "for":
-          props.htmlFor = propVal;
-          break;
-        default:
-          props[propName] = isHtmlAttribute(propName) ? String(propVal) : propVal;
+          return e.key;
+        case "keyCode":
+          return e.keyCode;
+        case "isUpKey":
+          return e.key === "ArrowUp";
+        case "isDownKey":
+          return e.key === "ArrowDown";
+        case "isSend":
+          return e.key === "Enter";
+        case "isCancel":
+          return e.key === "Escape";
+        case "isTabKey":
+          return e.key === "Tab";
+        case "ctx":
+          return new EventContext(this.dispatchPath, this.transactor, this);
+        case "dragInfo":
+          return this.dragInfo;
       }
+      return null;
     }
-  }
-  const normalizedChildren = [];
-  addChild(normalizedChildren, children);
-  return new VNode2(tag, props, normalizedChildren, key, namespace);
-}
-var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a"), getKey = (child) => child instanceof VNode2 ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode2;
-var init_vdom = __esm(() => {
-  VText = class VText extends VBase {
-    constructor(text) {
-      super();
-      this.text = String(text);
-    }
-    get nodeType() {
-      return 3;
+  };
+  NameArgsTransaction = class NameArgsTransaction extends Transaction {
+    constructor(path, transactor, name, args, parentTransaction, opts = {}) {
+      super(path, transactor, parentTransaction);
+      this.name = name;
+      this.args = args;
+      this.opts = opts;
+      this.targetPath = path;
     }
-    isEqualTo(other) {
-      return other instanceof VText && this.text === other.text;
+    handlerProp = null;
+    getHandlerForName(comp) {
+      const handlers = comp?.[this.handlerProp];
+      return handlers?.[this.name] ?? handlers?.$unknown ?? nullHandler;
     }
-    toDom(opts) {
-      return opts.document.createTextNode(this.text);
+    getHandlerAndArgs(_root, instance, comps) {
+      const handler = this.getHandlerForName(comps.getCompFor(instance));
+      return [handler, [...this.args, new EventContext(this.path, this.transactor, this)]];
     }
   };
-  VComment = class VComment extends VBase {
-    constructor(text) {
-      super();
-      this.text = text;
+  ResponseEvent = class ResponseEvent extends NameArgsTransaction {
+    handlerProp = "response";
+  };
+  SendEvent = class SendEvent extends NameArgsTransaction {
+    handlerProp = "receive";
+    run(rootVal, comps) {
+      return this.opts.skipSelf ? rootVal : this.updateRootValue(rootVal, comps);
     }
-    get nodeType() {
-      return 8;
+    afterTransaction() {
+      const { path, name, args, opts, targetPath } = this;
+      if (opts.bubbles && path.steps.length > 0)
+        this.transactor.pushBubble(path.popStep(), name, args, opts, this, targetPath);
     }
-    isEqualTo(other) {
-      return other instanceof VComment && this.text === other.text;
+  };
+  BubbleEvent = class BubbleEvent extends SendEvent {
+    handlerProp = "bubble";
+    constructor(path, transactor, name, args, parent, opts, targetPath) {
+      super(path, transactor, name, args, parent, opts);
+      this.targetPath = targetPath ?? path;
     }
-    toDom(opts) {
-      return opts.document.createComment(this.text);
+    stopPropagation() {
+      this.opts.bubbles = false;
     }
   };
-  VFragment = class VFragment extends VBase {
-    constructor(childs) {
-      super();
-      this.childs = [];
-      addChild(this.childs, childs);
-    }
-    get nodeType() {
-      return 11;
+  EventContext = class EventContext extends Dispatcher {
+    get name() {
+      return this.parent?.name ?? null;
     }
-    isEqualTo(other) {
-      if (!(other instanceof VFragment) || this.childs.length !== other.childs.length)
-        return false;
-      return childsEqual(this.childs, other.childs);
+    get targetPath() {
+      return this.parent.targetPath;
     }
-    toDom(opts) {
-      const fragment = opts.document.createDocumentFragment();
-      appendChildNodes(fragment, this.childs, opts);
-      return fragment;
+    stopPropagation() {
+      return this.parent.stopPropagation();
     }
   };
-  VNode2 = class VNode2 extends VBase {
-    constructor(tag, attrs, childs, key, namespace) {
+  PathChanges = class PathChanges extends PathBuilder {
+    constructor(dispatcher) {
       super();
-      this.tag = tag;
-      this.attrs = attrs ?? {};
-      this.childs = childs ?? [];
-      this.key = key != null ? String(key) : undefined;
-      this.namespace = typeof namespace === "string" ? namespace : null;
-    }
-    get nodeType() {
-      return 1;
+      this.dispatcher = dispatcher;
     }
-    isSameKind(other) {
-      return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+    send(name, args, opts) {
+      return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
     }
-    isEqualTo(other) {
-      if (this === other)
-        return true;
-      if (!(other instanceof VNode2) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
-        return false;
-      }
-      if (this.attrs !== other.attrs) {
-        for (const key in this.attrs)
-          if (this.attrs[key] !== other.attrs[key])
-            return false;
-        for (const key in other.attrs)
-          if (!Object.hasOwn(this.attrs, key))
-            return false;
-      }
-      return childsEqual(this.childs, other.childs);
+    bubble(name, args, opts) {
+      return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
     }
-    toDom(opts) {
-      const doc = opts.document;
-      const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
-      if (this.tag === "SELECT" && "value" in this.attrs) {
-        const { value, ...rest } = this.attrs;
-        applyProperties(node, rest, {});
-        appendChildNodes(node, this.childs, opts);
-        applyProperties(node, { value }, {});
-      } else {
-        applyProperties(node, this.attrs, {});
-        appendChildNodes(node, this.childs, opts);
-      }
-      return node;
+    buildPath() {
+      return this.dispatcher.path.concat(this.pathChanges);
     }
   };
 });
@@ -13896,7 +13910,7 @@ class App {
       const txnPath = path.compact().toTransactionPath();
       const value = txnPath.lookup(rootValue);
       const dragType = e.target.dataset.dragtype ?? "?";
-      const stack = txnPath.buildStack(this.makeStack(rootValue));
+      const stack = path.toTransactionPath().buildStack(this.makeStack(rootValue));
       this.dragInfo = new DragInfo(txnPath, stack, e, value, dragType, e.target);
     } else if (type3 === "drop") {
       e.preventDefault();