tutuca 0.9.63 → 0.9.65

package/dist/tutuca-cli.js

@@ -5350,588 +5350,917 @@ var init_attribute = __esm(() => {
   };
 });
 
-// src/anode.js
-function resolveDynProducer(comp, dynName) {
-  const dyn = comp?.dynamic?.[dynName];
-  if (dyn == null)
-    return null;
-  let producerComp, producerDyn;
-  if (dyn.compName != null) {
-    producerComp = comp.scope?.lookupComponent(dyn.compName);
-    producerDyn = producerComp?.dynamic?.[dyn.dynName];
-  } else {
-    producerComp = comp;
-    producerDyn = dyn;
+// 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;
   }
-  if (producerComp == null || producerDyn == null)
-    return null;
-  const pi = producerDyn.val?.toPathItem?.() ?? null;
-  return { producerCompId: producerComp.id, producerSteps: pi ? [pi] : [] };
 }
-
-class BaseNode {
-  render(_stack, _rx) {
-    return null;
-  }
-  setDataAttr(key, val) {
-    console.warn("setDataAttr not implemented for", this, { key, val });
-  }
-  isConstant() {
-    return false;
-  }
-  optimize() {}
+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;
 }
-function optimizeChilds(childs) {
-  for (let i = 0;i < childs.length; i++) {
-    const child = childs[i];
-    if (child.isConstant())
-      childs[i] = new RenderOnceNode(child);
-    else
-      child.optimize();
-  }
+
+class VBase {
 }
-function optimizeNode(node) {
-  if (node.isConstant())
-    return new RenderOnceNode(node);
-  node.optimize();
-  return node;
+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 parseXOp(attrs, childs, opIdx, px) {
-  if (attrs.length === 0)
-    return maybeFragment(childs);
-  const { name, value } = attrs[opIdx];
-  const as = attrs.getNamedItem("as")?.value ?? null;
-  let node;
-  switch (name) {
-    case "slot":
-      node = new SlotNode(null, vp.const(value), maybeFragment(childs));
-      break;
-    case "text":
-      node = px.addNodeIf(RenderTextNode, parseXOpVal(name, value, px, vp.parseText));
-      break;
-    case "render":
-      node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
-      break;
-    case "render-it":
-      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
-      break;
-    case "render-each":
-      node = RenderEachNode.parse(px, vp, value, as, attrs);
-      break;
-    case "show": {
-      const val = parseXOpVal(name, value, px, vp.parseBool);
-      node = px.addNodeIf(ShowNode, val, maybeFragment(childs));
-      break;
-    }
-    case "hide": {
-      const val = parseXOpVal(name, value, px, vp.parseBool);
-      node = px.addNodeIf(HideNode, val, maybeFragment(childs));
-      break;
-    }
-    default:
-      px.onParseIssue("unknown-x-op", { name, value });
-      return new CommentNode(`Error: InvalidSpecialTagOp ${name}=${value}`);
-  }
-  return processXExtras(node, attrs, name, opIdx + 1, px);
+function appendChildNodes(parent, childs, opts) {
+  for (const child of childs)
+    parent.appendChild(child.toDom(opts));
 }
-function parseXOpVal(opName, value, px, parserFn) {
-  const val = parserFn.call(vp, value, px);
-  if (val === null)
-    px.onParseIssue("bad-value", { role: "x-op", op: opName, value });
-  return val;
+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 processXExtras(node, attrs, opName, startIdx, px) {
-  const consumed = X_OP_CONSUMED[opName];
-  const wrappable = X_OP_WRAPPABLE.has(opName);
-  const wrappers = [];
-  for (let i = startIdx;i < attrs.length; i++) {
-    const a = attrs[i];
-    const aName = a.name;
-    if (consumed.has(aName))
-      continue;
-    if (wrappable && X_ATTR_WRAPPERS[aName]) {
-      wrappers.push([X_ATTR_WRAPPERS[aName], vp.parseBool(a.value, px)]);
-      continue;
+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];
     }
-    const issueInfo = { op: opName, name: aName, value: a.value };
-    px.onParseIssue("unknown-x-attr", issueInfo);
   }
-  for (let i = wrappers.length - 1;i >= 0; i--) {
-    const [Cls, val] = wrappers[i];
-    const wrapper = px.addNodeIf(Cls, val, node);
-    if (wrapper !== null)
-      node = wrapper;
+  for (const bKey in b) {
+    if (!Object.hasOwn(a, bKey)) {
+      diff ??= {};
+      diff[bKey] = b[bKey];
+    }
   }
-  return node;
+  return diff;
 }
-function wrap(node, px, wrappers) {
-  if (wrappers) {
-    for (let i = wrappers.length - 1;i >= 0; i--) {
-      const wrapperNode = makeWrapperNode(wrappers[i], px);
-      if (wrapperNode) {
-        wrapperNode.wrapNode(node);
-        node = wrapperNode;
+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;
     }
   }
-  return node;
+  const newNode = target.toDom(opts);
+  domNode.parentNode?.replaceChild(newNode, domNode);
+  return newNode;
 }
-function makeWrapperNode(data, px) {
-  const Cls = WRAPPER_NODES[data.name];
-  const node = Cls.register ? px.addNodeIf(Cls, data.val) : data.val && new Cls(null, data.val);
-  if (node !== null && data.name === "each") {
-    node.iterInfo.enrichWithVal = data.enrichWithVal ?? null;
-    node.iterInfo.whenVal = data.whenVal ?? null;
-    node.iterInfo.loopWithVal = data.loopWithVal ?? null;
+function morphChildren(parentDom, oldChilds, newChilds, opts) {
+  if (oldChilds.length === 0) {
+    appendChildNodes(parentDom, newChilds, opts);
+    return;
   }
-  return node;
-}
-
-class IterInfo {
-  constructor(val, whenVal, loopWithVal, enrichWithVal) {
-    this.val = val;
-    this.whenVal = whenVal;
-    this.loopWithVal = loopWithVal;
-    this.enrichWithVal = enrichWithVal;
+  if (newChilds.length === 0) {
+    parentDom.replaceChildren();
+    return;
   }
-  eval(stack) {
-    const seq = this.val.eval(stack) ?? [];
-    const filter = this.whenVal?.evalAsHandler(stack) ?? filterAlwaysTrue;
-    const loopWith = this.loopWithVal?.evalAsHandler(stack) ?? nullLoopWith;
-    const enricher = this.enrichWithVal?.evalAsHandler(stack) ?? null;
-    return { seq, filter, loopWith, enricher };
+  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;
+    }
   }
-}
-
-class ParseContext {
-  constructor(document2, Text, Comment, nodes, events, macroNodes, frame, parent) {
-    this.nodes = nodes ?? [];
-    this.events = events ?? [];
-    this.macroNodes = macroNodes ?? [];
-    this.parent = parent ?? null;
-    this.frame = frame ?? {};
-    this.document = document2 ?? globalThis.document;
-    this.Text = Text ?? globalThis.Text;
-    this.Comment = Comment ?? globalThis.Comment;
-    this.cacheConstNodes = true;
-    this.currentTag = null;
-  }
-  isInsideMacro(name) {
-    return this.frame.macroName === name || this.parent?.isInsideMacro(name);
-  }
-  enterMacro(macroName, macroVars, macroSlots) {
-    const { document: document2, Text, Comment, nodes, events, macroNodes } = this;
-    const frame = { macroName, macroVars, macroSlots };
-    return new ParseContext(document2, Text, Comment, nodes, events, macroNodes, frame, this);
-  }
-  parseHTML(html) {
-    const t = this.document.createElement("template");
-    t.innerHTML = html;
-    return t.content.childNodes;
+  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;
   }
-  addNodeIf(Class, val, extra) {
-    if (val !== null) {
-      const nodeId = this.nodes.length;
-      const node = new Class(nodeId, val, extra);
-      this.nodes.push(node);
-      return node;
+  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++;
+      }
     }
-    return null;
-  }
-  registerEvents() {
-    const id = this.events.length;
-    const events = new NodeEvents(id);
-    this.events.push(events);
-    return events;
-  }
-  newMacroNode(macroName, mAttrs, childs) {
-    const anySlot = [];
-    const slots = { _: new FragmentNode(anySlot) };
-    for (const child of childs)
-      if (child instanceof SlotNode)
-        slots[child.val.val] = child.node;
-      else if (!(child instanceof TextNode) || !child.isWhiteSpace())
-        anySlot.push(child);
-    const node = new MacroNode(macroName, mAttrs, slots, this);
-    this.macroNodes.push(node);
-    return node;
-  }
-  compile(scope) {
-    for (let i = 0;i < this.macroNodes.length; i++)
-      this.macroNodes[i].compile(scope);
-  }
-  *genEventNames() {
-    for (const event of this.events)
-      yield* event.genEventNames();
-  }
-  getEventForId(id) {
-    return this.events[id] ?? null;
-  }
-  getNodeForId(id) {
-    return this.nodes[id] ?? null;
-  }
-  onAttributes(_attrs, _wrapperAttrs, _textChild, _isMacroCall, _tag) {}
-  onParseIssue(kind, info) {
-    console.warn(`tutuca parse issue [${kind}]`, info);
-  }
-}
-function condenseChildsWhites(childs) {
-  if (childs.length === 0)
-    return childs;
-  let changed = false;
-  if (childs[0].isWhiteSpace?.()) {
-    childs[0].condenseWhiteSpace();
-    changed = true;
-  }
-  const last = childs.length - 1;
-  if (last > 0 && childs[last].isWhiteSpace?.()) {
-    childs[last].condenseWhiteSpace();
-    changed = true;
-  }
-  for (let i = 1;i < last; i++) {
-    const cur = childs[i];
-    if (cur.isWhiteSpace?.() && cur.hasNewLine()) {
-      const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
-      cur.condenseWhiteSpace(bothBlock ? "" : " ");
-      if (bothBlock)
-        changed = true;
+    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);
     }
   }
-  return changed ? childs.filter((c) => !(c instanceof TextNode && c.val === "")) : childs;
-}
-
-class NodeEvents {
-  constructor(id) {
-    this.id = id;
-    this.handlers = [];
-  }
-  add(name, handlerCall, modifiers) {
-    this.handlers.push(new NodeEvent(name, handlerCall, modifiers));
-  }
-  *genEventNames() {
-    for (const handler of this.handlers)
-      yield handler.name;
-  }
-  getHandlersFor(eventName) {
-    let r = null;
-    for (const handler of this.handlers)
-      if (handler.handlesEventName(eventName)) {
-        r ??= [];
-        r.push(handler);
-      }
-    return r;
-  }
+  for (let i = oldChilds.length - 1;i >= 0; i--)
+    if (!used[i] && domNodes[i].parentNode === parentDom)
+      parentDom.removeChild(domNodes[i]);
 }
-
-class NodeEvent {
-  constructor(name, handlerCall, modifiers) {
-    this.name = name;
-    this.handlerCall = handlerCall;
-    this.modifierWrapper = compileModifiers(name, modifiers);
-    this.modifiers = modifiers;
-  }
-  handlesEventName(name) {
-    return this.name === name;
-  }
-  getHandlerAndArgs(stack, event) {
-    const r = this.handlerCall.getHandlerAndArgs(stack, event);
-    r[0] = this.modifierWrapper(r[0], event);
-    return r;
+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 compileModifiers(eventName, names) {
-  if (names.length === 0)
-    return identityModifierWrapper;
-  const wrappers = MOD_WRAPPERS_BY_EVENT[eventName] ?? {};
-  let w = (that, f, args, _ctx) => f.apply(that, args);
-  for (const name of names) {
-    const wrapper = wrappers[name];
-    if (wrapper !== undefined)
-      w = wrapper(w);
+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;
+      }
+    }
   }
-  return (f, ctx) => function(...args) {
-    return w(this, f, args, ctx);
-  };
+  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 TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ seq }), X_OP_CONSUMED, X_OP_WRAPPABLE, X_ATTR_WRAPPERS, WRAPPER_NODES, _htmlBlockTags = "ADDRESS,ARTICLE,ASIDE,BLOCKQUOTE,CAPTION,COL,COLGROUP,DETAILS,DIALOG,DIV,DD,DL,DT,FIELDSET,FIGCAPTION,FIGURE,FOOTER,FORM,H1,H2,H3,H4,H5,H6,HEADER,HGROUP,HR,LEGEND,LI,MAIN,MENU,NAV,OL,P,PRE,SECTION,SUMMARY,TABLE,TBODY,TD,TFOOT,TH,THEAD,TR,UL", HTML_BLOCK_TAGS, isBlockDomNode = (n) => {
-  const node = n instanceof FragmentNode ? n.childs[0] : n;
-  return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
-}, isMac, fwdIfCtxPred = (pred) => (w) => (that, f, args, ctx) => pred(ctx) ? w(that, f, args, ctx) : that, fwdIfKey = (keyName) => fwdIfCtxPred((ctx) => ctx.e.key === keyName), fwdCtrl, fwdMeta, fwdAlt, metaWraps, MOD_WRAPPERS_BY_EVENT, identityModifierWrapper = (f, _ctx) => f;
-var init_anode = __esm(() => {
-  init_attribute();
-  init_path();
-  init_value();
-  TextNode = class TextNode extends BaseNode {
-    constructor(val) {
+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.val = val;
-    }
-    render(_stack, _rx) {
-      return this.val;
-    }
-    isWhiteSpace() {
-      for (let i = 0;i < this.val.length; i++) {
-        const c = this.val.charCodeAt(i);
-        if (!(c === 32 || c === 10 || c === 9 || c === 13))
-          return false;
-      }
-      return true;
-    }
-    hasNewLine() {
-      for (let i = 0;i < this.val.length; i++) {
-        const c = this.val.charCodeAt(i);
-        if (c === 10 || c === 13)
-          return true;
-      }
-      return false;
+      this.text = String(text);
     }
-    condenseWhiteSpace(replacement = "") {
-      this.val = replacement;
+    get nodeType() {
+      return 3;
     }
-    isConstant() {
-      return true;
+    isEqualTo(other) {
+      return other instanceof VText && this.text === other.text;
     }
-    setDataAttr(_key, _val) {}
-  };
-  CommentNode = class CommentNode extends TextNode {
-    render(_stack, rx) {
-      return rx.renderComment(this.val);
+    toDom(opts) {
+      return opts.document.createTextNode(this.text);
     }
   };
-  ChildsNode = class ChildsNode extends BaseNode {
-    constructor(childs) {
+  VComment = class VComment extends VBase {
+    constructor(text) {
       super();
-      this.childs = childs;
+      this.text = text;
     }
-    isConstant() {
-      return this.childs.every((v) => v.isConstant());
+    get nodeType() {
+      return 8;
     }
-    optimize() {
-      optimizeChilds(this.childs);
-    }
-  };
-  DomNode = class DomNode extends ChildsNode {
-    constructor(tagName, attrs, childs) {
-      super(childs);
-      this.tagName = tagName;
-      this.attrs = attrs;
-    }
-    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);
-    }
-    setDataAttr(key, val) {
-      this.attrs.setDataAttr(key, val);
-    }
-    isConstant() {
-      return this.attrs.isConstant() && super.isConstant();
-    }
-  };
-  FragmentNode = class FragmentNode extends ChildsNode {
-    render(stack, rx) {
-      return rx.renderFragment(this.childs.map((c) => c?.render(stack, rx)));
+    isEqualTo(other) {
+      return other instanceof VComment && this.text === other.text;
     }
-    setDataAttr(key, val) {
-      for (const child of this.childs)
-        child.setDataAttr(key, val);
+    toDom(opts) {
+      return opts.document.createComment(this.text);
     }
   };
-  VALID_NODE_RE = /^[a-zA-Z][a-zA-Z0-9-]*$/;
-  ANode = class ANode extends BaseNode {
-    constructor(nodeId, val) {
+  VFragment = class VFragment extends VBase {
+    constructor(childs) {
       super();
-      this.nodeId = nodeId;
-      this.val = val;
+      this.childs = [];
+      addChild(this.childs, childs);
     }
-    toPathStep(ctx) {
-      return ctx.applyKey(this.val?.toPathItem?.() ?? null);
+    get nodeType() {
+      return 11;
     }
-    static parse(html, px) {
-      const nodes = px.parseHTML(html);
-      if (nodes.length === 0)
-        return new CommentNode("Empty View in ANode.parse");
-      if (nodes.length === 1)
-        return ANode.fromDOM(nodes[0], px);
-      const childs = [];
-      for (let i = 0;i < nodes.length; i++) {
-        const child = ANode.fromDOM(nodes[i], px);
-        if (child !== null)
-          childs.push(child);
-      }
-      const trimmed = condenseChildsWhites(childs);
-      if (trimmed.length === 0)
-        return new CommentNode("Empty View in ANode.parse");
-      return maybeFragment(trimmed);
+    isEqualTo(other) {
+      if (!(other instanceof VFragment) || this.childs.length !== other.childs.length)
+        return false;
+      return childsEqual(this.childs, other.childs);
     }
-    static fromDOM(node, px) {
-      if (node instanceof px.Text)
-        return new TextNode(node.textContent);
-      else if (node instanceof px.Comment)
-        return new CommentNode(node.textContent);
-      const { childNodes, attributes: attrs, tagName: tag } = node;
-      const childs = [];
-      for (let i = 0;i < childNodes.length; i++) {
-        const child = ANode.fromDOM(childNodes[i], px);
-        if (child !== null)
-          childs.push(child);
-      }
-      const prevTag = px.currentTag;
-      px.currentTag = tag;
-      try {
-        const isPseudoX = attrs[0]?.name === "@x";
-        if (tag === "X" || isPseudoX)
-          return parseXOp(attrs, childs, isPseudoX ? 1 : 0, px);
-        else if (tag.charCodeAt(1) === 58 && tag.charCodeAt(0) === 88) {
-          const macroName = tag.slice(2).toLowerCase();
-          if (macroName === "slot") {
-            const slotName = attrs.getNamedItem("name")?.value ?? "_";
-            return px.frame.macroSlots[slotName] ?? maybeFragment(childs);
-          }
-          const [nAttrs, wrappers] = Attributes.parse(attrs, px, true);
-          px.onAttributes(nAttrs, wrappers, null, true, tag);
-          return wrap(px.newMacroNode(macroName, nAttrs.toMacroVars(), childs), px, wrappers);
-        } else if (VALID_NODE_RE.test(tag)) {
-          const [nAttrs, wrappers, textChild] = Attributes.parse(attrs, px);
-          px.onAttributes(nAttrs, wrappers, textChild, false, tag);
-          if (textChild)
-            childs.unshift(new RenderTextNode(null, textChild));
-          const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
-          return wrap(new DomNode(tag, nAttrs, domChilds), px, wrappers);
-        }
-        return new CommentNode(`Error: InvalidTagName ${tag}`);
-      } finally {
-        px.currentTag = prevTag;
-      }
+    toDom(opts) {
+      const fragment = opts.document.createDocumentFragment();
+      appendChildNodes(fragment, this.childs, opts);
+      return fragment;
     }
   };
-  MacroNode = class MacroNode extends BaseNode {
-    constructor(name, attrs, slots, px) {
+  VNode2 = class VNode2 extends VBase {
+    constructor(tag, attrs, childs, key, namespace) {
       super();
-      this.name = name;
-      this.attrs = attrs;
-      this.slots = slots;
-      this.px = px;
-      this.node = null;
-      this.dataAttrs = {};
-    }
-    compile(scope) {
-      const { name, attrs, slots } = this;
-      if (this.px.isInsideMacro(name))
-        throw new Error(`Recursive macro expansion: ${name}`);
-      const macro = scope.lookupMacro(name);
-      if (macro === null)
-        this.node = new CommentNode(`bad macro: ${name}`);
-      else {
-        const vars = { ...macro.defaults, ...attrs };
-        this.node = macro.expand(this.px.enterMacro(name, vars, slots));
-        for (const key in this.dataAttrs)
-          this.node.setDataAttr(key, this.dataAttrs[key]);
-      }
-    }
-    render(stack, rx) {
-      return this.node.render(stack, rx);
-    }
-    setDataAttr(key, val) {
-      this.dataAttrs[key] = val;
-    }
-    isConstant() {
-      return this.node.isConstant();
-    }
-    optimize() {
-      this.node = optimizeNode(this.node);
-    }
-  };
-  RenderViewId = class RenderViewId extends ANode {
-    constructor(nodeId, val, viewId) {
-      super(nodeId, val);
-      this.viewId = viewId;
-    }
-  };
-  RenderNode = class RenderNode extends RenderViewId {
-    render(stack, rx) {
-      const newStack = stack.enter(this.val.eval(stack), {}, true);
-      return rx.renderIt(newStack, this, "", this.viewId);
+      this.tag = tag;
+      this.attrs = attrs ?? {};
+      this.childs = childs ?? [];
+      this.key = key != null ? String(key) : undefined;
+      this.namespace = typeof namespace === "string" ? namespace : null;
     }
-    toPathStep(ctx) {
-      if (this.val instanceof DynVal) {
-        const p = resolveDynProducer(ctx.comp, this.val.name);
-        return p ? new DynStep(p.producerCompId, p.producerSteps) : null;
-      }
-      return super.toPathStep(ctx);
+    get nodeType() {
+      return 1;
     }
-  };
-  RenderItNode = class RenderItNode extends RenderViewId {
-    render(stack, rx) {
-      const newStack = stack.enter(stack.it, {}, true);
-      return rx.renderIt(newStack, this, "", this.viewId);
+    isSameKind(other) {
+      return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
     }
-    toPathStep(ctx) {
-      const next = ctx.next();
-      if (next === null)
-        return null;
-      const nextNode = next.resolveNode();
-      if (nextNode instanceof EachNode && next.hasKey) {
-        if (nextNode.val instanceof DynVal) {
-          const p = resolveDynProducer(ctx.comp, nextNode.val.name);
-          return p ? new DynEachStep(p.producerCompId, p.producerSteps, next.key) : null;
-        }
-        return new EachRenderItStep(nextNode.val.name, next.key);
+    isEqualTo(other) {
+      if (this === other)
+        return true;
+      if (!(other instanceof VNode2) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
+        return false;
       }
-      return null;
-    }
-  };
-  RenderEachNode = class RenderEachNode extends RenderViewId {
-    constructor(nodeId, val, viewId) {
-      super(nodeId, val, viewId);
-      this.iterInfo = new IterInfo(val, null, null, null);
-    }
-    render(stack, rx) {
-      return rx.renderEach(stack, this.iterInfo, this, this.viewId);
-    }
-    toPathStep(ctx) {
-      if (this.val instanceof DynVal) {
-        if (!ctx.hasKey)
-          return null;
-        const p = resolveDynProducer(ctx.comp, this.val.name);
-        return p ? new DynEachStep(p.producerCompId, p.producerSteps, ctx.key) : null;
+      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 super.toPathStep(ctx);
+      return childsEqual(this.childs, other.childs);
     }
-    static parse(px, vp2, s, as, attrs) {
-      const node = px.addNodeIf(RenderEachNode, parseXOpVal("render-each", s, px, vp2.parseSequence), as);
-      if (node !== null) {
-        const attrParser = getAttrParser(px);
-        attrParser.eachAttr = attrParser.pushWrapper("each", s, node.val);
-        const when = attrs.getNamedItem("when");
-        if (when)
-          attrParser._parseWhen(when.value);
-        const lWith = attrs.getNamedItem("loop-with");
-        if (lWith)
-          attrParser._parseLoopWith(lWith.value);
-        node.iterInfo.whenVal = attrParser.eachAttr.whenVal ?? null;
-        node.iterInfo.loopWithVal = attrParser.eachAttr.loopWithVal ?? null;
+    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;
     }
   };
-  RenderTextNode = class RenderTextNode extends ANode {
-    render(stack, _rx) {
-      return this.val.eval(stack);
-    }
-  };
-  RenderOnceNode = class RenderOnceNode extends BaseNode {
-    constructor(node) {
-      super();
-      this.node = node;
-      this._render = (stack, rx) => {
-        const dom = node.render(stack, rx);
-        this._render = (_stack, _rx) => dom;
-        return dom;
-      };
-    }
-    render(stack, rx) {
+});
+
+// src/anode.js
+function resolveDynProducer(comp, dynName) {
+  const dyn = comp?.dynamic?.[dynName];
+  if (dyn == null)
+    return null;
+  let producerComp, producerDyn;
+  if (dyn.compName != null) {
+    producerComp = comp.scope?.lookupComponent(dyn.compName);
+    producerDyn = producerComp?.dynamic?.[dyn.dynName];
+  } else {
+    producerComp = comp;
+    producerDyn = dyn;
+  }
+  if (producerComp == null || producerDyn == null)
+    return null;
+  const pi = producerDyn.val?.toPathItem?.() ?? null;
+  return { producerCompId: producerComp.id, producerSteps: pi ? [pi] : [] };
+}
+
+class BaseNode {
+  render(_stack, _rx) {
+    return null;
+  }
+  setDataAttr(key, val) {
+    console.warn("setDataAttr not implemented for", this, { key, val });
+  }
+  isConstant() {
+    return false;
+  }
+  optimize() {}
+}
+function optimizeChilds(childs) {
+  for (let i = 0;i < childs.length; i++) {
+    const child = childs[i];
+    if (child.isConstant())
+      childs[i] = new RenderOnceNode(child);
+    else
+      child.optimize();
+  }
+}
+function optimizeNode(node) {
+  if (node.isConstant())
+    return new RenderOnceNode(node);
+  node.optimize();
+  return node;
+}
+function parseXOp(attrs, childs, opIdx, px) {
+  if (attrs.length === 0)
+    return maybeFragment(childs);
+  const { name, value } = attrs[opIdx];
+  const as = attrs.getNamedItem("as")?.value ?? null;
+  let node;
+  switch (name) {
+    case "slot":
+      node = new SlotNode(null, vp.const(value), maybeFragment(childs));
+      break;
+    case "text":
+      node = px.addNodeIf(RenderTextNode, parseXOpVal(name, value, px, vp.parseText));
+      break;
+    case "render":
+      node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
+      break;
+    case "render-it":
+      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+      break;
+    case "render-each":
+      node = RenderEachNode.parse(px, vp, value, as, attrs);
+      break;
+    case "show": {
+      const val = parseXOpVal(name, value, px, vp.parseBool);
+      node = px.addNodeIf(ShowNode, val, maybeFragment(childs));
+      break;
+    }
+    case "hide": {
+      const val = parseXOpVal(name, value, px, vp.parseBool);
+      node = px.addNodeIf(HideNode, val, maybeFragment(childs));
+      break;
+    }
+    default:
+      px.onParseIssue("unknown-x-op", { name, value });
+      return new CommentNode(`Error: InvalidSpecialTagOp ${name}=${value}`);
+  }
+  return processXExtras(node, attrs, name, opIdx + 1, px);
+}
+function parseXOpVal(opName, value, px, parserFn) {
+  const val = parserFn.call(vp, value, px);
+  if (val === null)
+    px.onParseIssue("bad-value", { role: "x-op", op: opName, value });
+  return val;
+}
+function processXExtras(node, attrs, opName, startIdx, px) {
+  const consumed = X_OP_CONSUMED[opName];
+  const wrappable = X_OP_WRAPPABLE.has(opName);
+  const wrappers = [];
+  for (let i = startIdx;i < attrs.length; i++) {
+    const a = attrs[i];
+    const aName = a.name;
+    if (consumed.has(aName))
+      continue;
+    if (wrappable && X_ATTR_WRAPPERS[aName]) {
+      wrappers.push([X_ATTR_WRAPPERS[aName], vp.parseBool(a.value, px)]);
+      continue;
+    }
+    const issueInfo = { op: opName, name: aName, value: a.value };
+    px.onParseIssue("unknown-x-attr", issueInfo);
+  }
+  for (let i = wrappers.length - 1;i >= 0; i--) {
+    const [Cls, val] = wrappers[i];
+    const wrapper = px.addNodeIf(Cls, val, node);
+    if (wrapper !== null)
+      node = wrapper;
+  }
+  return node;
+}
+function wrap(node, px, wrappers) {
+  if (wrappers) {
+    for (let i = wrappers.length - 1;i >= 0; i--) {
+      const wrapperNode = makeWrapperNode(wrappers[i], px);
+      if (wrapperNode) {
+        wrapperNode.wrapNode(node);
+        node = wrapperNode;
+      }
+    }
+  }
+  return node;
+}
+function makeWrapperNode(data, px) {
+  const Cls = WRAPPER_NODES[data.name];
+  const node = Cls.register ? px.addNodeIf(Cls, data.val) : data.val && new Cls(null, data.val);
+  if (node !== null && data.name === "each") {
+    node.iterInfo.enrichWithVal = data.enrichWithVal ?? null;
+    node.iterInfo.whenVal = data.whenVal ?? null;
+    node.iterInfo.loopWithVal = data.loopWithVal ?? null;
+  }
+  return node;
+}
+
+class IterInfo {
+  constructor(val, whenVal, loopWithVal, enrichWithVal) {
+    this.val = val;
+    this.whenVal = whenVal;
+    this.loopWithVal = loopWithVal;
+    this.enrichWithVal = enrichWithVal;
+  }
+  eval(stack) {
+    const seq = this.val.eval(stack) ?? [];
+    const filter = this.whenVal?.evalAsHandler(stack) ?? filterAlwaysTrue;
+    const loopWith = this.loopWithVal?.evalAsHandler(stack) ?? nullLoopWith;
+    const enricher = this.enrichWithVal?.evalAsHandler(stack) ?? null;
+    return { seq, filter, loopWith, enricher };
+  }
+}
+
+class ParseContext {
+  constructor(document2, Text, Comment, nodes, events, macroNodes, frame, parent) {
+    this.nodes = nodes ?? [];
+    this.events = events ?? [];
+    this.macroNodes = macroNodes ?? [];
+    this.parent = parent ?? null;
+    this.frame = frame ?? {};
+    this.document = document2 ?? globalThis.document;
+    this.Text = Text ?? globalThis.Text;
+    this.Comment = Comment ?? globalThis.Comment;
+    this.cacheConstNodes = true;
+    this.currentTag = null;
+  }
+  isInsideMacro(name) {
+    return this.frame.macroName === name || this.parent?.isInsideMacro(name);
+  }
+  enterMacro(macroName, macroVars, macroSlots) {
+    const { document: document2, Text, Comment, nodes, events, macroNodes } = this;
+    const frame = { macroName, macroVars, macroSlots };
+    return new ParseContext(document2, Text, Comment, nodes, events, macroNodes, frame, this);
+  }
+  parseHTML(html) {
+    const t = this.document.createElement("template");
+    t.innerHTML = html;
+    return t.content.childNodes;
+  }
+  addNodeIf(Class, val, extra) {
+    if (val !== null) {
+      const nodeId = this.nodes.length;
+      const node = new Class(nodeId, val, extra);
+      this.nodes.push(node);
+      return node;
+    }
+    return null;
+  }
+  registerEvents() {
+    const id = this.events.length;
+    const events = new NodeEvents(id);
+    this.events.push(events);
+    return events;
+  }
+  newMacroNode(macroName, mAttrs, childs) {
+    const anySlot = [];
+    const slots = { _: new FragmentNode(anySlot) };
+    for (const child of childs)
+      if (child instanceof SlotNode)
+        slots[child.val.val] = child.node;
+      else if (!(child instanceof TextNode) || !child.isWhiteSpace())
+        anySlot.push(child);
+    const node = new MacroNode(macroName, mAttrs, slots, this);
+    this.macroNodes.push(node);
+    return node;
+  }
+  compile(scope) {
+    for (let i = 0;i < this.macroNodes.length; i++)
+      this.macroNodes[i].compile(scope);
+  }
+  *genEventNames() {
+    for (const event of this.events)
+      yield* event.genEventNames();
+  }
+  getEventForId(id) {
+    return this.events[id] ?? null;
+  }
+  getNodeForId(id) {
+    return this.nodes[id] ?? null;
+  }
+  onAttributes(_attrs, _wrapperAttrs, _textChild, _isMacroCall, _tag) {}
+  onParseIssue(kind, info) {
+    console.warn(`tutuca parse issue [${kind}]`, info);
+  }
+}
+function condenseChildsWhites(childs) {
+  if (childs.length === 0)
+    return childs;
+  let changed = false;
+  if (childs[0].isWhiteSpace?.()) {
+    childs[0].condenseWhiteSpace();
+    changed = true;
+  }
+  const last = childs.length - 1;
+  if (last > 0 && childs[last].isWhiteSpace?.()) {
+    childs[last].condenseWhiteSpace();
+    changed = true;
+  }
+  for (let i = 1;i < last; i++) {
+    const cur = childs[i];
+    if (cur.isWhiteSpace?.() && cur.hasNewLine()) {
+      const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
+      cur.condenseWhiteSpace(bothBlock ? "" : " ");
+      if (bothBlock)
+        changed = true;
+    }
+  }
+  return changed ? childs.filter((c) => !(c instanceof TextNode && c.val === "")) : childs;
+}
+
+class NodeEvents {
+  constructor(id) {
+    this.id = id;
+    this.handlers = [];
+  }
+  add(name, handlerCall, modifiers) {
+    this.handlers.push(new NodeEvent(name, handlerCall, modifiers));
+  }
+  *genEventNames() {
+    for (const handler of this.handlers)
+      yield handler.name;
+  }
+  getHandlersFor(eventName) {
+    let r = null;
+    for (const handler of this.handlers)
+      if (handler.handlesEventName(eventName)) {
+        r ??= [];
+        r.push(handler);
+      }
+    return r;
+  }
+}
+
+class NodeEvent {
+  constructor(name, handlerCall, modifiers) {
+    this.name = name;
+    this.handlerCall = handlerCall;
+    this.modifierWrapper = compileModifiers(name, modifiers);
+    this.modifiers = modifiers;
+  }
+  handlesEventName(name) {
+    return this.name === name;
+  }
+  getHandlerAndArgs(stack, event) {
+    const r = this.handlerCall.getHandlerAndArgs(stack, event);
+    r[0] = this.modifierWrapper(r[0], event);
+    return r;
+  }
+}
+function compileModifiers(eventName, names) {
+  if (names.length === 0)
+    return identityModifierWrapper;
+  const wrappers = MOD_WRAPPERS_BY_EVENT[eventName] ?? {};
+  let w = (that, f, args, _ctx) => f.apply(that, args);
+  for (const name of names) {
+    const wrapper = wrappers[name];
+    if (wrapper !== undefined)
+      w = wrapper(w);
+  }
+  return (f, ctx) => function(...args) {
+    return w(this, f, args, ctx);
+  };
+}
+var TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ iterData: { seq } }), X_OP_CONSUMED, X_OP_WRAPPABLE, X_ATTR_WRAPPERS, WRAPPER_NODES, _htmlBlockTags = "ADDRESS,ARTICLE,ASIDE,BLOCKQUOTE,CAPTION,COL,COLGROUP,DETAILS,DIALOG,DIV,DD,DL,DT,FIELDSET,FIGCAPTION,FIGURE,FOOTER,FORM,H1,H2,H3,H4,H5,H6,HEADER,HGROUP,HR,LEGEND,LI,MAIN,MENU,NAV,OL,P,PRE,SECTION,SUMMARY,TABLE,TBODY,TD,TFOOT,TH,THEAD,TR,UL", HTML_BLOCK_TAGS, isBlockDomNode = (n) => {
+  const node = n instanceof FragmentNode ? n.childs[0] : n;
+  return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
+}, isMac, fwdIfCtxPred = (pred) => (w) => (that, f, args, ctx) => pred(ctx) ? w(that, f, args, ctx) : that, fwdIfKey = (keyName) => fwdIfCtxPred((ctx) => ctx.e.key === keyName), fwdCtrl, fwdMeta, fwdAlt, metaWraps, MOD_WRAPPERS_BY_EVENT, identityModifierWrapper = (f, _ctx) => f;
+var init_anode = __esm(() => {
+  init_attribute();
+  init_path();
+  init_value();
+  init_vdom();
+  TextNode = class TextNode extends BaseNode {
+    constructor(val) {
+      super();
+      this.val = val;
+    }
+    render(_stack, _rx) {
+      return this.val;
+    }
+    isWhiteSpace() {
+      for (let i = 0;i < this.val.length; i++) {
+        const c = this.val.charCodeAt(i);
+        if (!(c === 32 || c === 10 || c === 9 || c === 13))
+          return false;
+      }
+      return true;
+    }
+    hasNewLine() {
+      for (let i = 0;i < this.val.length; i++) {
+        const c = this.val.charCodeAt(i);
+        if (c === 10 || c === 13)
+          return true;
+      }
+      return false;
+    }
+    condenseWhiteSpace(replacement = "") {
+      this.val = replacement;
+    }
+    isConstant() {
+      return true;
+    }
+    setDataAttr(_key, _val) {}
+  };
+  CommentNode = class CommentNode extends TextNode {
+    render(_stack, rx) {
+      return rx.renderComment(this.val);
+    }
+  };
+  ChildsNode = class ChildsNode extends BaseNode {
+    constructor(childs) {
+      super();
+      this.childs = childs;
+    }
+    isConstant() {
+      return this.childs.every((v) => v.isConstant());
+    }
+    optimize() {
+      optimizeChilds(this.childs);
+    }
+  };
+  DomNode = class DomNode extends ChildsNode {
+    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, this.namespace);
+    }
+    setDataAttr(key, val) {
+      this.attrs.setDataAttr(key, val);
+    }
+    isConstant() {
+      return this.attrs.isConstant() && super.isConstant();
+    }
+  };
+  FragmentNode = class FragmentNode extends ChildsNode {
+    render(stack, rx) {
+      return rx.renderFragment(this.childs.map((c) => c?.render(stack, rx)));
+    }
+    setDataAttr(key, val) {
+      for (const child of this.childs)
+        child.setDataAttr(key, val);
+    }
+  };
+  VALID_NODE_RE = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+  ANode = class ANode extends BaseNode {
+    constructor(nodeId, val) {
+      super();
+      this.nodeId = nodeId;
+      this.val = val;
+    }
+    toPathStep(ctx) {
+      return ctx.applyKey(this.val?.toPathItem?.() ?? null);
+    }
+    static parse(html, px) {
+      const nodes = px.parseHTML(html);
+      if (nodes.length === 0)
+        return new CommentNode("Empty View in ANode.parse");
+      if (nodes.length === 1)
+        return ANode.fromDOM(nodes[0], px);
+      const childs = [];
+      for (let i = 0;i < nodes.length; i++) {
+        const child = ANode.fromDOM(nodes[i], px);
+        if (child !== null)
+          childs.push(child);
+      }
+      const trimmed = condenseChildsWhites(childs);
+      if (trimmed.length === 0)
+        return new CommentNode("Empty View in ANode.parse");
+      return maybeFragment(trimmed);
+    }
+    static fromDOM(node, px) {
+      if (node instanceof px.Text)
+        return new TextNode(node.textContent);
+      else if (node instanceof px.Comment)
+        return new CommentNode(node.textContent);
+      const { childNodes, attributes: attrs, tagName: tag } = node;
+      const childs = [];
+      for (let i = 0;i < childNodes.length; i++) {
+        const child = ANode.fromDOM(childNodes[i], px);
+        if (child !== null)
+          childs.push(child);
+      }
+      const prevTag = px.currentTag;
+      px.currentTag = tag;
+      try {
+        const isPseudoX = attrs[0]?.name === "@x";
+        if (tag === "X" || isPseudoX)
+          return parseXOp(attrs, childs, isPseudoX ? 1 : 0, px);
+        else if (tag.charCodeAt(1) === 58 && tag.charCodeAt(0) === 88) {
+          const macroName = tag.slice(2).toLowerCase();
+          if (macroName === "slot") {
+            const slotName = attrs.getNamedItem("name")?.value ?? "_";
+            return px.frame.macroSlots[slotName] ?? maybeFragment(childs);
+          }
+          const [nAttrs, wrappers] = Attributes.parse(attrs, px, true);
+          px.onAttributes(nAttrs, wrappers, null, true, tag);
+          return wrap(px.newMacroNode(macroName, nAttrs.toMacroVars(), childs), px, wrappers);
+        } else if (VALID_NODE_RE.test(tag)) {
+          const [nAttrs, wrappers, textChild] = Attributes.parse(attrs, px);
+          px.onAttributes(nAttrs, wrappers, textChild, false, tag);
+          if (textChild)
+            childs.unshift(new RenderTextNode(null, textChild));
+          const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
+          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 {
+        px.currentTag = prevTag;
+      }
+    }
+  };
+  MacroNode = class MacroNode extends BaseNode {
+    constructor(name, attrs, slots, px) {
+      super();
+      this.name = name;
+      this.attrs = attrs;
+      this.slots = slots;
+      this.px = px;
+      this.node = null;
+      this.dataAttrs = {};
+    }
+    compile(scope) {
+      const { name, attrs, slots } = this;
+      if (this.px.isInsideMacro(name))
+        throw new Error(`Recursive macro expansion: ${name}`);
+      const macro = scope.lookupMacro(name);
+      if (macro === null)
+        this.node = new CommentNode(`bad macro: ${name}`);
+      else {
+        const vars = { ...macro.defaults, ...attrs };
+        this.node = macro.expand(this.px.enterMacro(name, vars, slots));
+        for (const key in this.dataAttrs)
+          this.node.setDataAttr(key, this.dataAttrs[key]);
+      }
+    }
+    render(stack, rx) {
+      return this.node.render(stack, rx);
+    }
+    setDataAttr(key, val) {
+      this.dataAttrs[key] = val;
+    }
+    isConstant() {
+      return this.node.isConstant();
+    }
+    optimize() {
+      this.node = optimizeNode(this.node);
+    }
+  };
+  RenderViewId = class RenderViewId extends ANode {
+    constructor(nodeId, val, viewId) {
+      super(nodeId, val);
+      this.viewId = viewId;
+    }
+  };
+  RenderNode = class RenderNode extends RenderViewId {
+    render(stack, rx) {
+      const newStack = stack.enter(this.val.eval(stack), {}, true);
+      return rx.renderIt(newStack, this, "", this.viewId);
+    }
+    toPathStep(ctx) {
+      if (this.val instanceof DynVal) {
+        const p = resolveDynProducer(ctx.comp, this.val.name);
+        return p ? new DynStep(p.producerCompId, p.producerSteps) : null;
+      }
+      return super.toPathStep(ctx);
+    }
+  };
+  RenderItNode = class RenderItNode extends RenderViewId {
+    render(stack, rx) {
+      const newStack = stack.enter(stack.it, {}, true);
+      return rx.renderIt(newStack, this, "", this.viewId);
+    }
+    toPathStep(ctx) {
+      const next = ctx.next();
+      if (next === null)
+        return null;
+      const nextNode = next.resolveNode();
+      if (nextNode instanceof EachNode && next.hasKey) {
+        if (nextNode.val instanceof DynVal) {
+          const p = resolveDynProducer(ctx.comp, nextNode.val.name);
+          return p ? new DynEachStep(p.producerCompId, p.producerSteps, next.key) : null;
+        }
+        return new EachRenderItStep(nextNode.val.name, next.key);
+      }
+      return null;
+    }
+  };
+  RenderEachNode = class RenderEachNode extends RenderViewId {
+    constructor(nodeId, val, viewId) {
+      super(nodeId, val, viewId);
+      this.iterInfo = new IterInfo(val, null, null, null);
+    }
+    render(stack, rx) {
+      return rx.renderEach(stack, this.iterInfo, this, this.viewId);
+    }
+    toPathStep(ctx) {
+      if (this.val instanceof DynVal) {
+        if (!ctx.hasKey)
+          return null;
+        const p = resolveDynProducer(ctx.comp, this.val.name);
+        return p ? new DynEachStep(p.producerCompId, p.producerSteps, ctx.key) : null;
+      }
+      return super.toPathStep(ctx);
+    }
+    static parse(px, vp2, s, as, attrs) {
+      const node = px.addNodeIf(RenderEachNode, parseXOpVal("render-each", s, px, vp2.parseSequence), as);
+      if (node !== null) {
+        const attrParser = getAttrParser(px);
+        attrParser.eachAttr = attrParser.pushWrapper("each", s, node.val);
+        const when = attrs.getNamedItem("when");
+        if (when)
+          attrParser._parseWhen(when.value);
+        const lWith = attrs.getNamedItem("loop-with");
+        if (lWith)
+          attrParser._parseLoopWith(lWith.value);
+        node.iterInfo.whenVal = attrParser.eachAttr.whenVal ?? null;
+        node.iterInfo.loopWithVal = attrParser.eachAttr.loopWithVal ?? null;
+      }
+      return node;
+    }
+  };
+  RenderTextNode = class RenderTextNode extends ANode {
+    render(stack, _rx) {
+      return this.val.eval(stack);
+    }
+  };
+  RenderOnceNode = class RenderOnceNode extends BaseNode {
+    constructor(node) {
+      super();
+      this.node = node;
+      this._render = (stack, rx) => {
+        const dom = node.render(stack, rx);
+        this._render = (_stack, _rx) => dom;
+        return dom;
+      };
+    }
+    render(stack, rx) {
       return this._render(stack, rx);
     }
   };
@@ -13107,691 +13436,370 @@ class Stack2 {
     return this.comps.getCompFor(this.it).scope.lookupComponent(name);
   }
   lookupFieldRaw(name) {
-    return this.it[name] ?? null;
-  }
-  lookupMethod(name) {
-    const fn = this.it[name];
-    return fn instanceof Function ? fn.call(this.it) : null;
-  }
-  lookupName(name) {
-    return this.ctx.lookupName(name);
-  }
-  getHandlerFor(name, key) {
-    return this.comps.getHandlerFor(this.it, name, key);
-  }
-  lookupRequest(name) {
-    return this.comps.getRequestFor(this.it, name);
-  }
-  lookupBestView(views, defaultViewName) {
-    let n = this.views;
-    while (n !== null) {
-      const view = views[n[0]];
-      if (view !== undefined)
-        return view;
-      n = n[1];
-    }
-    return views[defaultViewName];
-  }
-}
-var STOP, NEXT;
-var init_stack = __esm(() => {
-  STOP = Symbol("STOP");
-  NEXT = Symbol("NEXT");
-});
-
-// src/transactor.js
-class State2 {
-  constructor(val) {
-    this.val = val;
-    this.changeSubs = [];
-  }
-  onChange(cb) {
-    this.changeSubs.push(cb);
-  }
-  set(val, info) {
-    const old = this.val;
-    this.val = val;
-    for (const sub of this.changeSubs)
-      sub({ val, old, info, timestamp: Date.now() });
-  }
-  update(fn, info) {
-    return this.set(fn(this.val), info);
-  }
-}
-
-class Transactor {
-  constructor(comps, rootValue) {
-    this.comps = comps;
-    this.transactions = [];
-    this.state = new State2(rootValue);
-    this.onTransactionPushed = () => {};
-  }
-  pushTransaction(t) {
-    this.transactions.push(t);
-    this.onTransactionPushed(t);
-  }
-  pushSend(path, name, args = [], opts = {}, parent = null) {
-    this.pushTransaction(new SendEvent(path, this, name, args, parent, opts));
-  }
-  pushBubble(path, name, args = [], opts = {}, parent = null, targetPath = null) {
-    const newOpts = opts.skipSelf ? { ...opts, skipSelf: false } : opts;
-    this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts, targetPath));
-  }
-  async pushRequest(path, name, args = [], opts = {}, parent = null) {
-    const curRoot = this.state.val;
-    const curLeaf = path.toTransactionPath().lookup(curRoot);
-    const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
-    const resHandlerName = opts?.onResName ?? name;
-    const push = (specificName, baseName, singleArg, result, error) => {
-      const resArgs = specificName ? [singleArg] : [result, error];
-      const t = new ResponseEvent(path, this, specificName ?? baseName, resArgs, parent);
-      this.pushTransaction(t);
-    };
-    try {
-      const result = await handler.fn.apply(null, args);
-      push(opts?.onOkName, resHandlerName, result, result, null);
-    } catch (error) {
-      push(opts?.onErrorName, resHandlerName, error, null, error);
-    }
-  }
-  get hasPendingTransactions() {
-    return this.transactions.length > 0;
-  }
-  transactNext() {
-    if (this.hasPendingTransactions)
-      this.transact(this.transactions.shift());
-  }
-  transact(transaction) {
-    const curState = this.state.val;
-    const newState = transaction.run(curState, this.comps);
-    if (newState !== undefined) {
-      this.state.set(newState, { transaction });
-      transaction.afterTransaction();
-    } else
-      console.warn("undefined new state", { curState, transaction });
-  }
-  transactInputNow(path, event, eventHandler, dragInfo) {
-    this.transact(new InputEvent(path, event, eventHandler, this, dragInfo));
-  }
-}
-function mkReq404(name) {
-  const fn = () => {
-    throw new Error(`Request not found: ${name}`);
-  };
-  return { fn };
-}
-function nullHandler() {
-  return this;
-}
-
-class Transaction {
-  constructor(path, transactor, parentTransaction = null) {
-    this.path = path;
-    this.transactor = transactor;
-    this.parentTransaction = parentTransaction;
-    this._task = null;
-  }
-  get task() {
-    this._task ??= new Task;
-    return this._task;
-  }
-  getCompletionPromise() {
-    return this.task.promise;
-  }
-  setParent(parentTransaction) {
-    this.parentTransaction = parentTransaction;
-    parentTransaction.task.addDep(this.task);
-  }
-  run(rootValue, comps) {
-    return this.updateRootValue(rootValue, comps);
-  }
-  afterTransaction() {}
-  buildRootStack(root, comps) {
-    return Stack2.root(comps, root);
-  }
-  buildStack(root, comps) {
-    return this.path.toTransactionPath().buildStack(this.buildRootStack(root, comps));
-  }
-  callHandler(root, instance, comps) {
-    const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
-    return handler.apply(instance, args);
-  }
-  getHandlerAndArgs(_root, _instance, _comps) {
-    return null;
-  }
-  updateRootValue(curRoot, comps) {
-    const txnPath = this.path.toTransactionPath();
-    const curLeaf = txnPath.lookup(curRoot);
-    const newLeaf = this.callHandler(curRoot, curLeaf, comps);
-    this._task?.complete?.({ value: newLeaf, old: curLeaf });
-    return curLeaf !== newLeaf ? txnPath.setValue(curRoot, newLeaf) : curRoot;
+    return this.it[name] ?? null;
   }
-  lookupName(_name) {
-    return null;
+  lookupMethod(name) {
+    const fn = this.it[name];
+    return fn instanceof Function ? fn.call(this.it) : null;
   }
-}
-function getValue(e) {
-  return e.target.type === "checkbox" ? e.target.checked : (e instanceof CustomEvent ? e.detail : e.target.value) ?? null;
-}
-
-class Task {
-  constructor() {
-    this.deps = [];
-    this.val = this.resolve = this.reject = null;
-    this.promise = new Promise((res, rej) => {
-      this.resolve = res;
-      this.reject = rej;
-    });
-    this.isCompleted = false;
+  lookupName(name) {
+    return this.ctx.lookupName(name);
   }
-  addDep(task) {
-    console.assert(!this.isCompleted, "addDep for completed task", this, task);
-    this.deps.push(task);
-    task.promise.then((_) => this._check());
+  getHandlerFor(name, key) {
+    return this.comps.getHandlerFor(this.it, name, key);
   }
-  complete(val) {
-    this.val = val;
-    this._check();
+  lookupRequest(name) {
+    return this.comps.getRequestFor(this.it, name);
   }
-  _check() {
-    if (this.deps.every((task) => task.isCompleted)) {
-      this.isCompleted = true;
-      this.resolve(this);
+  lookupBestView(views, defaultViewName) {
+    let n = this.views;
+    while (n !== null) {
+      const view = views[n[0]];
+      if (view !== undefined)
+        return view;
+      n = n[1];
     }
+    return views[defaultViewName];
   }
 }
+var STOP, NEXT;
+var init_stack = __esm(() => {
+  STOP = Symbol("STOP");
+  NEXT = Symbol("NEXT");
+});
 
-class Dispatcher {
-  constructor(path, transactor, parentTransaction) {
-    this.path = path;
-    this.transactor = transactor;
-    this.parent = parentTransaction;
+// src/transactor.js
+class State2 {
+  constructor(val) {
+    this.val = val;
+    this.changeSubs = [];
   }
-  get at() {
-    return new PathChanges(this);
+  onChange(cb) {
+    this.changeSubs.push(cb);
   }
-  send(name, args, opts) {
-    return this.sendAtPath(this.path, name, args, opts);
+  set(val, info) {
+    const old = this.val;
+    this.val = val;
+    for (const sub of this.changeSubs)
+      sub({ val, old, info, timestamp: Date.now() });
   }
-  bubble(name, args, opts) {
-    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
+  update(fn, info) {
+    return this.set(fn(this.val), info);
   }
-  sendAtPath(path, name, args, opts) {
-    return this.transactor.pushSend(path, name, args, opts, this.parent);
+}
+
+class Transactor {
+  constructor(comps, rootValue) {
+    this.comps = comps;
+    this.transactions = [];
+    this.state = new State2(rootValue);
+    this.onTransactionPushed = () => {};
   }
-  request(name, args, opts) {
-    return this.requestAtPath(this.path, name, args, opts);
+  pushTransaction(t) {
+    this.transactions.push(t);
+    this.onTransactionPushed(t);
   }
-  requestAtPath(path, name, args, opts) {
-    return this.transactor.pushRequest(path, name, args, opts, this.parent);
+  pushSend(path, name, args = [], opts = {}, parent = null) {
+    this.pushTransaction(new SendEvent(path, this, name, args, parent, opts));
   }
-  lookupTypeFor(name, inst) {
-    return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
+  pushBubble(path, name, args = [], opts = {}, parent = null, targetPath = null) {
+    const newOpts = opts.skipSelf ? { ...opts, skipSelf: false } : opts;
+    this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts, targetPath));
   }
-}
-var isMac2, toNullIfNaN = (v) => Number.isNaN(v) ? null : v, InputEvent, NameArgsTransaction, ResponseEvent, SendEvent, BubbleEvent, EventContext, PathChanges;
-var init_transactor = __esm(() => {
-  init_path();
-  init_stack();
-  isMac2 = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
-  InputEvent = class InputEvent extends Transaction {
-    constructor(path, e, handler, transactor, dragInfo) {
-      super(path, transactor);
-      this.e = e;
-      this.handler = handler;
-      this.dragInfo = dragInfo;
-      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);
+  async pushRequest(path, name, args = [], opts = {}, parent = null) {
+    const curRoot = this.state.val;
+    const curLeaf = path.toTransactionPath().lookup(curRoot);
+    const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
+    const resHandlerName = opts?.onResName ?? name;
+    const push = (specificName, baseName, singleArg, result, error) => {
+      const resArgs = specificName ? [singleArg] : [result, error];
+      const t = new ResponseEvent(path, this, specificName ?? baseName, resArgs, parent);
+      this.pushTransaction(t);
+    };
+    try {
+      const result = await handler.fn.apply(null, args);
+      push(opts?.onOkName, resHandlerName, result, result, null);
+    } catch (error) {
+      push(opts?.onErrorName, resHandlerName, error, null, error);
     }
-  };
-});
-
-// 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;
+  }
+  get hasPendingTransactions() {
+    return this.transactions.length > 0;
+  }
+  transactNext() {
+    if (this.hasPendingTransactions)
+      this.transact(this.transactions.shift());
+  }
+  transact(transaction) {
+    const curState = this.state.val;
+    const newState = transaction.run(curState, this.comps);
+    if (newState !== undefined) {
+      this.state.set(newState, { transaction });
+      transaction.afterTransaction();
+    } else
+      console.warn("undefined new state", { curState, transaction });
+  }
+  transactInputNow(path, event, eventHandler, dragInfo) {
+    this.transact(new InputEvent(path, event, eventHandler, this, dragInfo));
   }
 }
-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 mkReq404(name) {
+  const fn = () => {
+    throw new Error(`Request not found: ${name}`);
+  };
+  return { fn };
 }
-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 nullHandler() {
+  return this;
 }
-function diffProps(a, b) {
-  if (a === b)
+
+class Transaction {
+  constructor(path, transactor, parentTransaction = null) {
+    this.path = path;
+    this.transactor = transactor;
+    this.parentTransaction = parentTransaction;
+    this._task = null;
+  }
+  get task() {
+    this._task ??= new Task;
+    return this._task;
+  }
+  getCompletionPromise() {
+    return this.task.promise;
+  }
+  setParent(parentTransaction) {
+    this.parentTransaction = parentTransaction;
+    parentTransaction.task.addDep(this.task);
+  }
+  run(rootValue, comps) {
+    return this.updateRootValue(rootValue, comps);
+  }
+  afterTransaction() {}
+  buildRootStack(root, comps) {
+    return Stack2.root(comps, root);
+  }
+  buildStack(root, comps) {
+    return this.path.toTransactionPath().buildStack(this.buildRootStack(root, comps));
+  }
+  callHandler(root, instance, comps) {
+    const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
+    return handler.apply(instance, args);
+  }
+  getHandlerAndArgs(_root, _instance, _comps) {
     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];
-    }
+  updateRootValue(curRoot, comps) {
+    const txnPath = this.path.toTransactionPath();
+    const curLeaf = txnPath.lookup(curRoot);
+    const newLeaf = this.callHandler(curRoot, curLeaf, comps);
+    this._task?.complete?.({ value: newLeaf, old: curLeaf });
+    return curLeaf !== newLeaf ? txnPath.setValue(curRoot, newLeaf) : curRoot;
+  }
+  lookupName(_name) {
+    return null;
   }
-  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;
+function getValue(e) {
+  return e.target.type === "checkbox" ? e.target.checked : (e instanceof CustomEvent ? e.detail : e.target.value) ?? null;
+}
+
+class Task {
+  constructor() {
+    this.deps = [];
+    this.val = this.resolve = this.reject = null;
+    this.promise = new Promise((res, rej) => {
+      this.resolve = res;
+      this.reject = rej;
+    });
+    this.isCompleted = false;
+  }
+  addDep(task) {
+    console.assert(!this.isCompleted, "addDep for completed task", this, task);
+    this.deps.push(task);
+    task.promise.then((_) => this._check());
+  }
+  complete(val) {
+    this.val = val;
+    this._check();
+  }
+  _check() {
+    if (this.deps.every((task) => task.isCompleted)) {
+      this.isCompleted = true;
+      this.resolve(this);
     }
   }
-  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;
+
+class Dispatcher {
+  constructor(path, transactor, parentTransaction) {
+    this.path = path;
+    this.transactor = transactor;
+    this.parent = parentTransaction;
   }
-  if (newChilds.length === 0) {
-    parentDom.replaceChildren();
-    return;
+  get at() {
+    return new PathChanges(this);
   }
-  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;
+  send(name, args, opts) {
+    return this.sendAtPath(this.path, name, args, opts);
+  }
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
+  }
+  sendAtPath(path, name, args, opts) {
+    return this.transactor.pushSend(path, name, args, opts, this.parent);
+  }
+  request(name, args, opts) {
+    return this.requestAtPath(this.path, name, args, opts);
+  }
+  requestAtPath(path, name, args, opts) {
+    return this.transactor.pushRequest(path, name, args, opts, this.parent);
+  }
+  lookupTypeFor(name, inst) {
+    return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
+  }
+}
+var isMac2, toNullIfNaN = (v) => Number.isNaN(v) ? null : v, InputEvent, NameArgsTransaction, ResponseEvent, SendEvent, BubbleEvent, EventContext, PathChanges;
+var init_transactor = __esm(() => {
+  init_path();
+  init_stack();
+  isMac2 = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
+  InputEvent = class InputEvent extends Transaction {
+    constructor(path, e, handler, transactor, dragInfo) {
+      super(path, transactor);
+      this.e = e;
+      this.handler = handler;
+      this.dragInfo = dragInfo;
+      this._dispatchPath = null;
     }
-  }
-  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;
+    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);
         }
-        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);
     }
   };
 });
@@ -14195,20 +14203,20 @@ class Renderer {
   renderEach(stack, iterInfo, node, viewName) {
     const { seq, filter, loopWith } = iterInfo.eval(stack);
     const r = [];
-    const iterData = loopWith.call(stack.it, seq);
+    const { iterData, start, end } = unpackLoopResult(loopWith.call(stack.it, seq), seq);
     getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(stack.it, key, value, iterData)) {
         const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
         this.pushEachEntry(r, node.nodeId, attrName, key, dom);
       }
-    });
+    }, start, end);
     return r;
   }
   renderEachWhen(stack, iterInfo, view, nid) {
     const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
     const r = [];
     const it = stack.it;
-    const iterData = loopWith.call(it, seq);
+    const { iterData, start, end } = unpackLoopResult(loopWith.call(it, seq), seq);
     getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(it, key, value, iterData)) {
         const cachePath = enricher ? [view, it, value] : [view, value];
@@ -14225,7 +14233,7 @@ class Renderer {
           this.cache.set(cachePath, cacheKey, dom);
         }
       }
-    });
+    }, start, end);
     return r;
   }
   renderView(view, stack) {
@@ -14246,13 +14254,29 @@ class Renderer {
     return new VComment(`§${JSON.stringify(info)}§`);
   }
 }
-var DATASET_ATTRS, getSeqInfo = (seq) => isIndexed(seq) ? imIndexedIter : isKeyed(seq) ? imKeyedIter : seq?.[SEQ_INFO] ?? unkIter, imIndexedIter = (seq, visit) => {
+var DATASET_ATTRS, getSeqInfo = (seq) => isIndexed(seq) ? imIndexedIter : isKeyed(seq) ? imKeyedIter : seq?.[SEQ_INFO] ?? unkIter, normalizeRange = (start, end, size) => {
+  let s = start == null ? 0 : start < 0 ? size + start : start;
+  let e = end == null ? size : end < 0 ? size + end : end;
+  s = s < 0 ? 0 : s > size ? size : s;
+  e = e < 0 ? 0 : e > size ? size : e;
+  return [s, e < s ? s : e];
+}, unpackLoopResult = (result, seq) => {
+  const r = result ?? {};
+  return { iterData: r.iterData ?? { seq }, start: r.start, end: r.end };
+}, imIndexedIter = (seq, visit, start, end) => {
+  const [s, e] = normalizeRange(start, end, seq.size);
+  for (let i = s;i < e; i++)
+    visit(i, seq.get(i), "si");
+}, imKeyedIter = (seq, visit, start, end) => {
+  const [s, e] = normalizeRange(start, end, seq.size);
   let i = 0;
-  for (const v of seq)
-    visit(i++, v, "si");
-}, imKeyedIter = (seq, visit) => {
-  for (const [k, v] of seq.toSeq().entries())
-    visit(k, v, "sk");
+  for (const [k, v] of seq.toSeq().entries()) {
+    if (i >= e)
+      break;
+    if (i >= s)
+      visit(k, v, "sk");
+    i++;
+  }
 }, unkIter = () => {}, SEQ_INFO;
 var init_renderer = __esm(() => {
   init_immutable();