tutuca 0.9.14 → 0.9.16

package/dist/tutuca-dev.js

@@ -112,9 +112,8 @@ class Path {
     let curVal = v;
     for (const step of this.steps) {
       curVal = step.lookup(curVal, NONE);
-      if (curVal === NONE) {
+      if (curVal === NONE)
         return dval;
-      }
     }
     return curVal;
   }
@@ -124,9 +123,8 @@ class Path {
     for (let i = 0;i < this.steps.length; i++) {
       intermediates[i] = curVal;
       curVal = this.steps[i].lookup(curVal, NONE);
-      if (curVal === NONE) {
+      if (curVal === NONE)
         return root;
-      }
     }
     let newVal = v;
     for (let i = this.steps.length - 1;i >= 0; i--) {
@@ -144,7 +142,7 @@ class Path {
         console.warn(`bad PathItem`, { root, curVal, step, path: this });
         return null;
       }
-      step.updateBindings(curVal, stack.binds.head.bindings);
+      step.updateBindings(curVal, stack.binds[0].bindings);
       stack = stack.enter(curVal, {}, step.isFrame);
     }
     return stack;
@@ -193,9 +191,8 @@ var EMPTY_META = {};
 function parseMetaComment(n) {
   if (n?.nodeType === 8 && n.textContent[0] === "§") {
     const m = parseMetaComment(n.previousSibling);
-    if (m !== EMPTY_META) {
+    if (m !== EMPTY_META)
       return m;
-    }
     try {
       return JSON.parse(n.textContent.slice(1, -1));
     } catch (err) {
@@ -218,9 +215,8 @@ function resolvePathStep(comp, nodeIds, vid) {
     const j = node.pathInNext ? i + 1 : i;
     const { si, sk, nid: nodeId } = nodeIds[j];
     const pi = node.pathInNext ? comp.getNodeForId(+nodeId, vid).val.toPathItem() : node.toPathItem();
-    if (pi !== null) {
+    if (pi !== null)
       return si !== undefined ? pi.withIndex(+si) : sk ? pi.withKey(sk) : pi;
-    }
   }
   return null;
 }
@@ -270,20 +266,12 @@ class ValParser {
   }
   allowFieldOnly() {
     this.okField = true;
-    this.okBind = false;
-    this.okComputed = false;
-    this.okDyn = false;
-    this.okType = false;
-    this.okRequest = false;
-    this.okName = false;
-    this.okConst = false;
-    this.okStrTpl = false;
-    this.okSeqAccess = false;
+    this.okBind = this.okComputed = this.okDyn = this.okType = this.okRequest = false;
+    this.okName = this.okConst = this.okStrTpl = this.okSeqAccess = false;
   }
   _parseSeqAccess(s, px) {
-    if (!this.okSeqAccess) {
+    if (!this.okSeqAccess)
       return null;
-    }
     const openSquareBracketIndex = s.indexOf("[");
     this.allowFieldOnly();
     const left = this.parse(s.slice(0, openSquareBracketIndex), px);
@@ -326,15 +314,14 @@ class ValParser {
         return this.okRequest ? parseReq(s.slice(1), px) : null;
     }
     const num = VALID_FLOAT_RE.test(s) ? parseFloat(s) : null;
-    if (Number.isFinite(num)) {
+    if (Number.isFinite(num))
       return this.okConst ? parseConst(num, px) : null;
-    } else if (s === "true" || s === "false") {
+    else if (s === "true" || s === "false")
       return this.okConst ? parseConst(s === "true", px) : null;
-    } else if (charCode >= 97 && charCode <= 122) {
+    else if (charCode >= 97 && charCode <= 122)
       return this.okName ? parseName(s, px) : null;
-    } else if (charCode >= 65 && charCode <= 90) {
+    else if (charCode >= 65 && charCode <= 90)
       return this.okType ? parseType(s, px) : null;
-    }
     return null;
   }
   parseDynamic(s, px) {
@@ -344,19 +331,13 @@ class ValParser {
   }
   parseEach(s, px) {
     this.allowFieldOnly();
-    this.okComputed = true;
-    this.okDyn = true;
+    this.okComputed = this.okDyn = true;
     return this.parse(s, px);
   }
   allowHandlerArg() {
     this.allowFieldOnly();
-    this.okBind = true;
-    this.okComputed = true;
-    this.okDyn = true;
-    this.okType = true;
-    this.okRequest = true;
-    this.okName = true;
-    this.okConst = true;
+    this.okBind = this.okComputed = this.okDyn = this.okType = this.okRequest = true;
+    this.okName = this.okConst = true;
   }
   parseHandlerArg(s, px) {
     this.allowHandlerArg();
@@ -379,25 +360,17 @@ class ValParser {
   }
   parseAll(s, px) {
     this.allowHandlerArg();
-    this.okStrTpl = true;
-    this.okSeqAccess = true;
+    this.okStrTpl = this.okSeqAccess = true;
     return this.parse(s, px);
   }
   parseCondValue(s, px) {
     this.allowFieldOnly();
-    this.okBind = true;
-    this.okComputed = true;
-    this.okDyn = true;
-    this.okConst = true;
+    this.okBind = this.okComputed = this.okDyn = this.okConst = true;
     return this.parse(s, px);
   }
   parseText(s, px) {
     this.allowFieldOnly();
-    this.okBind = true;
-    this.okComputed = true;
-    this.okDyn = true;
-    this.okConst = true;
-    this.okStrTpl = true;
+    this.okBind = this.okComputed = this.okDyn = this.okConst = this.okStrTpl = true;
     return this.parse(s, px);
   }
   parseRender(s, px) {
@@ -445,9 +418,8 @@ class StrTplVal extends VarVal {
   }
   eval(stack) {
     const strs = new Array(this.vals.length);
-    for (let i = 0;i < this.vals.length; i++) {
+    for (let i = 0;i < this.vals.length; i++)
       strs[i] = this.vals[i]?.eval(stack, "");
-    }
     return strs.join("");
   }
   static parse(s, px) {
@@ -603,15 +575,13 @@ function getValSubType(s) {
   for (let i = 0;i < s.length; i++) {
     switch (s.charCodeAt(i)) {
       case 91:
-        if (open > 0) {
+        if (open > 0)
           return VAL_SUB_TYPE_INVALID;
-        }
         open += 1;
         break;
       case 93:
-        if (close > 0 || open === 0) {
+        if (close > 0 || open === 0)
           return VAL_SUB_TYPE_INVALID;
-        }
         close += 1;
         break;
       case 123:
@@ -620,9 +590,8 @@ function getValSubType(s) {
         return VAL_SUB_TYPE_CONST_STRING;
     }
   }
-  if (open > 0 || close > 0) {
+  if (open > 0 || close > 0)
     return open === 1 && close === 1 ? VAL_SUB_TYPE_SEQ_ACCESS : VAL_SUB_TYPE_INVALID;
-  }
   return -1;
 }
 var vp = new ValParser;
@@ -683,14 +652,12 @@ class AttrParser {
     }
   }
   parseThen(s) {
-    if (this.ifAttr) {
+    if (this.ifAttr)
       this.ifAttr.thenVal = vp.parseAttr(s, this.px) ?? NOT_SET_VAL;
-    }
   }
   parseElse(value) {
-    if (this.ifAttr) {
+    if (this.ifAttr)
       this.ifAttr.elseVal = vp.parseAttr(value, this.px) ?? NOT_SET_VAL;
-    }
   }
   parseEvent(directiveName, value) {
     const [eventName, ...modifiers] = directiveName.slice(3).split("+");
@@ -749,25 +716,22 @@ class AttrParser {
         this.parseElse(s);
         return;
     }
-    if (directiveName.startsWith("on.")) {
+    if (directiveName.startsWith("on."))
       this.parseEvent(directiveName, s);
-    } else if (directiveName.startsWith("if.")) {
+    else if (directiveName.startsWith("if."))
       this.parseIf(directiveName, s);
-    } else if (directiveName.startsWith("then.")) {
+    else if (directiveName.startsWith("then."))
       this.parseThen(s);
-    } else if (directiveName.startsWith("else.")) {
+    else if (directiveName.startsWith("else."))
       this.parseElse(s);
-    }
   }
   _parseWhen(s) {
-    if (this.eachAttr !== null) {
+    if (this.eachAttr !== null)
       this.eachAttr.whenVal = vp.parseAlter(s, this.px);
-    }
   }
   _parseLoopWith(s) {
-    if (this.eachAttr !== null) {
+    if (this.eachAttr !== null)
       this.eachAttr.loopWithVal = vp.parseAlter(s, this.px);
-    }
   }
   parse(attributes, parseAll = false) {
     for (const { name, value } of attributes) {
@@ -794,9 +758,8 @@ class ConstAttrs extends Attributes {
   }
   static fromAttrs(attrs) {
     const attrsObj = {};
-    for (const attr of attrs) {
+    for (const attr of attrs)
       attrsObj[attr.name] = attr.val.eval(null);
-    }
     return new ConstAttrs(attrsObj);
   }
   setDataAttr(key, val) {
@@ -804,9 +767,8 @@ class ConstAttrs extends Attributes {
   }
   toMacroVars() {
     const r = {};
-    for (const name in this.items) {
+    for (const name in this.items)
       r[name] = `'${this.items[name]}'`;
-    }
     return r;
   }
   isConstant() {
@@ -817,7 +779,8 @@ class ConstAttrs extends Attributes {
 class DynAttrs extends Attributes {
   eval(stack) {
     const attrs = {};
-    for (const attr of this.items) {
+    for (let i = 0;i < this.items.length; i++) {
+      const attr = this.items[i];
       attrs[attr.name] = attr.eval(stack);
     }
     return attrs;
@@ -827,9 +790,8 @@ class DynAttrs extends Attributes {
   }
   toMacroVars() {
     const r = {};
-    for (const attr of this.items) {
+    for (const attr of this.items)
       r[attr.name] = attr.val.toString();
-    }
     return r;
   }
 }
@@ -889,17 +851,15 @@ class EventHandler {
   }
   getHandlerAndArgs(stack, _event) {
     const argValues = new Array(this.args.length);
-    for (let i = 0;i < argValues.length; i++) {
+    for (let i = 0;i < argValues.length; i++)
       argValues[i] = this.args[i].eval(stack);
-    }
     return [this.handlerVal.eval(stack), argValues];
   }
   static parse(s, px) {
     const [handlerName, ...rawArgs] = s.trim().split(/\s+/);
     const handlerVal = vp.parseHandlerName(handlerName, px);
-    if (handlerVal === null) {
+    if (handlerVal === null)
       return null;
-    }
     const args = new Array(rawArgs.length);
     vp.allowHandlerArg();
     for (let i = 0;i < rawArgs.length; i++) {
@@ -924,8 +884,8 @@ class RequestHandler {
 
 // src/anode.js
 class BaseNode {
-  render(_stack, rx) {
-    return rx.renderEmpty();
+  render(_stack, _rx) {
+    return null;
   }
   setDataAttr(key, val) {
     console.warn("setDataAttr not implemented for", this, { key, val });
@@ -941,8 +901,8 @@ class TextNode extends BaseNode {
     super();
     this.val = val;
   }
-  render(_stack, rx) {
-    return rx.renderText(this.val);
+  render(_stack, _rx) {
+    return this.val;
   }
   isWhiteSpace() {
     for (let i = 0;i < this.val.length; i++) {
@@ -1233,8 +1193,8 @@ class RenderEachNode extends RenderViewId {
 }
 
 class RenderTextNode extends ANode {
-  render(stack, rx) {
-    return rx.renderText(this.val.eval(stack));
+  render(stack, _rx) {
+    return this.val.eval(stack);
   }
 }
 
@@ -1272,13 +1232,13 @@ class WrapperNode extends ANode {
 
 class ShowNode extends WrapperNode {
   render(stack, rx) {
-    return this.val.eval(stack) ? this.node.render(stack, rx) : rx.renderEmpty();
+    return this.val.eval(stack) ? this.node.render(stack, rx) : null;
   }
 }
 
 class HideNode extends WrapperNode {
   render(stack, rx) {
-    return this.val.eval(stack) ? rx.renderEmpty() : this.node.render(stack, rx);
+    return this.val.eval(stack) ? null : this.node.render(stack, rx);
   }
 }
 
@@ -1451,7 +1411,7 @@ function condenseChildsWhites(childs) {
 }
 
 class View {
-  constructor(name, rawView, style = "", anode = null, ctx = null) {
+  constructor(name, rawView = "No View Defined", style = "", anode = null, ctx = null) {
     this.name = name;
     this.anode = anode;
     this.style = style;
@@ -1546,6 +1506,63 @@ function compileModifiers(eventName, names) {
   };
 }
 
+// src/util/parsectx.js
+class ParseCtxClassSetCollector extends ParseContext {
+  constructor(...args) {
+    super(...args);
+    this.classes = new Set;
+  }
+  _addClasses(s) {
+    for (const v of s.split(/\s+/)) {
+      this.classes.add(v);
+    }
+  }
+  enterMacro(macroName, macroVars, macroSlots) {
+    const { DOMParser: DP, Text, Comment, nodes, events, macroNodes } = this;
+    const frame = { macroName, macroVars, macroSlots };
+    const v = new ParseCtxClassSetCollector(DP, Text, Comment, nodes, events, macroNodes, frame, this);
+    v.classes = this.classes;
+    return v;
+  }
+  onAttributes(attrs, _wrapperAttrs, _textChild) {
+    if (Array.isArray(attrs.items)) {
+      for (const attr of attrs.items) {
+        if (attr.name !== "class") {
+          continue;
+        }
+        const { val, thenVal, elseVal } = attr;
+        if (thenVal !== undefined) {
+          this._maybeAddVal(thenVal);
+          this._maybeAddVal(elseVal);
+        } else {
+          this._maybeAddVal(val);
+        }
+      }
+    } else {
+      const attr = attrs.items.class;
+      if (attr) {
+        this._addClasses(attr);
+      }
+    }
+  }
+  _maybeAddVal(value) {
+    if (!this._maybeAddStrTpl(value) && typeof value?.val === "string") {
+      this._addClasses(value.val);
+    }
+  }
+  _maybeAddStrTpl(value) {
+    if (value?.vals !== undefined) {
+      for (const val of value.vals) {
+        if (val instanceof ConstVal && val.val !== "") {
+          this._addClasses(val.val);
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+}
+
 // src/cache.js
 class NullDomCache {
   get(_k, _cacheKey) {}
@@ -1563,11 +1580,10 @@ class WeakMapDomCache {
     this.map = new WeakMap;
   }
   _returnValue(r) {
-    if (r === undefined) {
+    if (r === undefined)
       this.miss += 1;
-    } else {
+    else
       this.hit += 1;
-    }
     return r;
   }
   get(k, cacheKey) {
@@ -1575,13 +1591,12 @@ class WeakMapDomCache {
   }
   set(k, cacheKey, v) {
     const cur = this.map.get(k);
-    if (cur) {
+    if (cur)
       cur[cacheKey] = v;
-    } else if (typeof k === "object") {
+    else if (typeof k === "object")
       this.map.set(k, { [cacheKey]: v });
-    } else {
+    else
       this.badKey += 1;
-    }
   }
   get2(k1, k2, cacheKey) {
     return this._returnValue(this.map.get(k1)?.get?.(k2)?.[cacheKey]);
@@ -1590,11 +1605,10 @@ class WeakMapDomCache {
     const cur1 = this.map.get(k1);
     if (cur1) {
       const cur = cur1.get(k2);
-      if (cur) {
+      if (cur)
         cur[cacheKey] = v;
-      } else {
+      else
         cur1.set(k2, { [cacheKey]: v });
-      }
     } else if (typeof k1 === "object" && typeof k2 === "object") {
       const cur = new WeakMap;
       cur.set(k2, { [cacheKey]: v });
@@ -1625,9 +1639,8 @@ class WeakMapComputedCache {
     const cur = this.map.get(v);
     if (cur) {
       const curValue = cur[key];
-      if (curValue !== undefined) {
+      if (curValue !== undefined)
         return curValue;
-      }
       const newValue2 = fn.call(v) ?? null;
       cur[key] = newValue2;
       return newValue2;
@@ -1675,9 +1688,8 @@ class Components {
   }
   compileStyles() {
     const styles = [];
-    for (const comp of this.byId.values()) {
+    for (const comp of this.byId.values())
       styles.push(comp.compileStyle());
-    }
     return styles.join(`
 `);
   }
@@ -1701,9 +1713,8 @@ class ComponentStack {
       this.comps.registerComponent(comp);
       this.byName[comp.name] = comp;
       const alias = aliases[comp.name];
-      if (alias) {
+      if (alias)
         this.byName[alias] = comp;
-      }
     }
   }
   registerMacros(macros) {
@@ -1713,9 +1724,8 @@ class ComponentStack {
     return this.comps.getCompFor(v);
   }
   registerRequestHandlers(handlers) {
-    for (const name in handlers) {
+    for (const name in handlers)
       this.reqsByName[name] = new RequestHandler(name, handlers[name]);
-    }
   }
   lookupRequest(name) {
     return this.reqsByName[name] ?? this.parent?.lookupRequest(name) ?? null;
@@ -1761,26 +1771,26 @@ var isString = (v) => typeof v === "string";
 var _compId = 0;
 
 class Component {
-  constructor(name, Class, view, views = {}, style = "", commonStyle = "", globalStyle = "", computed = {}, input = {}, logic = {}, bubble = {}, response = {}, alter = {}, dynamic = {}, on = {}) {
+  constructor(Class, o) {
     this.id = _compId++;
-    this.name = name;
+    this.name = o.name ?? "UnkComp";
     this.Class = Class;
-    this.views = { main: new View("main", view, style) };
-    this.commonStyle = commonStyle;
-    this.globalStyle = globalStyle;
-    this.computed = computed;
-    this.input = input;
-    this.logic = logic;
-    this.bubble = bubble;
-    this.response = response;
-    this.alter = alter;
-    this.on = { stackEnter: on?.stackEnter ?? defaultOnStackEnter };
-    for (const name2 in views) {
-      const v = views[name2];
-      const { view: view2, style: style2 } = isString(v) ? { view: v } : v;
-      this.views[name2] = new View(name2, view2, style2);
-    }
-    this._rawDynamic = dynamic;
+    this.views = { main: new View("main", o.view, o.style) };
+    this.commonStyle = o.commonStyle ?? "";
+    this.globalStyle = o.globalStyle ?? "";
+    this.computed = o.computed ?? {};
+    this.input = o.input ?? {};
+    this.logic = o.logic ?? {};
+    this.bubble = o.bubble ?? {};
+    this.response = o.response ?? {};
+    this.alter = o.alter ?? {};
+    this.on = { stackEnter: o.on?.stackEnter ?? defaultOnStackEnter };
+    for (const name in o.views ?? {}) {
+      const v = o.views[name];
+      const { view, style } = isString(v) ? { view: v } : v;
+      this.views[name] = new View(name, view, style);
+    }
+    this._rawDynamic = o.dynamic ?? {};
     this.dynamic = {};
     this.scope = null;
   }
@@ -1798,9 +1808,8 @@ class Component {
         }
       }
     }
-    for (const name in this.views) {
+    for (const name in this.views)
       this.views[name].compile(new ParseContext2, this.scope, this.id);
-    }
   }
   make(args, opts) {
     return this.Class.make(args, opts);
@@ -1817,14 +1826,12 @@ class Component {
   compileStyle() {
     const { id, commonStyle, globalStyle, views } = this;
     const styles = commonStyle ? [`[data-cid="${id}"]{${commonStyle}}`] : [];
-    if (globalStyle !== "") {
+    if (globalStyle !== "")
       styles.push(globalStyle);
-    }
     for (const name in views) {
       const { style } = views[name];
-      if (style !== "") {
+      if (style !== "")
         styles.push(`[data-cid="${id}"][data-vid="${name}"]{${style}}`);
-      }
     }
     return styles.join(`
 `);
@@ -1837,27 +1844,17 @@ function defaultOnStackEnter(stack) {
 // src/stack.js
 var STOP = Symbol("STOP");
 var NEXT = Symbol("NEXT");
-
-class Pair {
-  constructor(head, tail) {
-    this.head = head;
-    this.tail = tail;
-  }
-  push(v) {
-    return new Pair(v, this);
-  }
-  lookup(v, dv = null) {
-    const { tail } = this;
-    const r = this.head.lookup(v);
-    return r === STOP ? dv : r === NEXT ? tail !== null ? tail.lookup(v, dv) : dv : r;
-  }
-  *[Symbol.iterator]() {
-    let v = this;
-    while (v !== null) {
-      yield v.head;
-      v = v.tail;
-    }
+function lookup(chain, name, dv = null) {
+  let n = chain;
+  while (n !== null) {
+    const r = n[0].lookup(name);
+    if (r === STOP)
+      return dv;
+    if (r !== NEXT)
+      return r;
+    n = n[1];
   }
+  return dv;
 }
 
 class BindFrame {
@@ -1881,56 +1878,64 @@ class ObjectFrame {
     return v === undefined ? NEXT : v;
   }
 }
+function computeViewsId(views) {
+  let s = "";
+  let n = views;
+  while (n !== null) {
+    s += n[0];
+    n = n[1];
+  }
+  return s === "main" ? "" : s;
+}
 
 class Stack {
-  constructor(comps, it, binds, dynBinds, views, ctx = null) {
+  constructor(comps, it, binds, dynBinds, views, viewsId, ctx = null) {
     this.comps = comps;
     this.it = it;
     this.binds = binds;
     this.dynBinds = dynBinds;
     this.views = views;
+    this.viewsId = viewsId;
     this.ctx = ctx;
-    const viewsId = [...views].join("");
-    this.viewsId = viewsId === "main" ? "" : viewsId;
   }
   _enrichOnEnter() {
     return this.comps.getOnEnterFor(this.it).call(this.it, this) ?? this;
   }
   upToFrameBinds() {
-    const { comps, binds, dynBinds, views, ctx } = this;
-    return binds.head.isFrame ? this : new Stack(comps, binds.tail.head.it, binds.tail, dynBinds, views, ctx);
+    const { comps, binds, dynBinds, views, viewsId, ctx } = this;
+    return binds[0].isFrame ? this : new Stack(comps, binds[1][0].it, binds[1], dynBinds, views, viewsId, ctx);
   }
   static root(comps, it, ctx) {
-    const binds = new Pair(new BindFrame(it, { it }, true), null);
-    const dynBinds = new Pair(new ObjectFrame({}), null);
-    const views = new Pair("main", null);
-    return new Stack(comps, it, binds, dynBinds, views, ctx)._enrichOnEnter();
+    const binds = [new BindFrame(it, { it }, true), null];
+    const dynBinds = [new ObjectFrame({}), null];
+    const views = ["main", null];
+    return new Stack(comps, it, binds, dynBinds, views, "", ctx)._enrichOnEnter();
   }
   enter(it, bindings = {}, isFrame = true) {
-    const { comps, binds, dynBinds, views, ctx } = this;
-    const newBinds = binds.push(new BindFrame(it, bindings, isFrame));
-    return new Stack(comps, it, newBinds, dynBinds, views, ctx)._enrichOnEnter();
+    const { comps, binds, dynBinds, views, viewsId, ctx } = this;
+    const newBinds = [new BindFrame(it, bindings, isFrame), binds];
+    return new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx)._enrichOnEnter();
   }
   pushViewName(name) {
     const { comps, it, binds, dynBinds, views, ctx } = this;
-    return new Stack(comps, it, binds, dynBinds, views.push(name), ctx);
+    const newViews = [name, views];
+    return new Stack(comps, it, binds, dynBinds, newViews, computeViewsId(newViews), ctx);
   }
   withDynamicBindings(dynamics) {
     const dynObj = {};
     const comp = this.comps.getCompFor(this.it);
-    for (const dynName of dynamics) {
+    for (const dynName of dynamics)
       comp.dynamic[dynName].evalAndBind(this, dynObj);
-    }
-    const { comps, it, binds, views, ctx } = this;
-    const newDynBinds = this.dynBinds.push(new ObjectFrame(dynObj));
-    return new Stack(comps, it, binds, newDynBinds, views, ctx);
+    const { comps, it, binds, views, viewsId, ctx } = this;
+    const newDynBinds = [new ObjectFrame(dynObj), this.dynBinds];
+    return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
   lookupDynamic(name) {
     const d = this.comps.getCompFor(this.it)?.dynamic[name];
-    return d ? this.dynBinds.lookup(d.getSymbol(this)) ?? d.val.eval(this) : null;
+    return d ? lookup(this.dynBinds, d.getSymbol(this)) ?? d.val.eval(this) : null;
   }
   lookupBind(name) {
-    return this.binds.lookup(name);
+    return lookup(this.binds, name);
   }
   lookupType(name) {
     return this.comps.getCompFor(this.it).scope.lookupComponent(name);
@@ -1946,7 +1951,7 @@ class Stack {
     return this.ctx.lookupName(name);
   }
   lookupComputed(name) {
-    const node = this.binds.head.isFrame ? this.binds.head : this.binds.tail.head;
+    const node = this.binds[0].isFrame ? this.binds[0] : this.binds[1][0];
     return this.comps.lookupComputed(node.it, name);
   }
   getHandlerFor(name, key) {
@@ -1956,11 +1961,12 @@ class Stack {
     return this.comps.getRequestFor(this.it, name);
   }
   lookupBestView(views, defaultViewName) {
-    for (const viewName of this.views) {
-      const view = views[viewName];
-      if (view !== undefined) {
+    let n = this.views;
+    while (n !== null) {
+      const view = views[n[0]];
+      if (view !== undefined)
         return view;
-      }
+      n = n[1];
     }
     return views[defaultViewName];
   }
@@ -1978,9 +1984,8 @@ class State {
   set(val, info) {
     const old = this.val;
     this.val = val;
-    for (const sub of this.changeSubs) {
+    for (const sub of this.changeSubs)
       sub({ val, old, info, timestamp: Date.now() });
-    }
   }
   update(fn, info) {
     return this.set(fn(this.val), info);
@@ -2027,14 +2032,8 @@ class Transactor {
     return this.transactions.length > 0;
   }
   transactNext() {
-    if (this.hasPendingTransactions) {
+    if (this.hasPendingTransactions)
       this.transact(this.transactions.shift());
-    }
-  }
-  transactAll() {
-    while (this.hasPendingTransactions) {
-      this.transact(this.transactions.shift());
-    }
   }
   transact(transaction) {
     const curState = this.state.val;
@@ -2042,9 +2041,8 @@ class Transactor {
     if (newState !== undefined) {
       this.state.set(newState, { transaction });
       transaction.afterTransaction();
-    } else {
+    } else
       console.warn("undefined new state", { curState, transaction });
-    }
   }
   transactInputNow(path, event, eventHandler, dragInfo) {
     this.transact(new InputEvent(path, event, eventHandler, this, dragInfo));
@@ -2204,9 +2202,8 @@ class LogicEvent extends NameArgsTransaction {
   }
   afterTransaction() {
     const { path, name, args, opts } = this;
-    if (opts.bubbles && path.steps.length > 0) {
+    if (opts.bubbles && path.steps.length > 0)
       this.transactor.pushBubble(path.popStep(), name, args, opts, this);
-    }
   }
 }
 
@@ -2246,7 +2243,7 @@ class Task {
 }
 
 class Dispatcher {
-  constructor(path, transactor, parentTransaction = null) {
+  constructor(path, transactor, parentTransaction) {
     this.path = path;
     this.transactor = transactor;
     this.parent = parentTransaction;
@@ -2296,102 +2293,503 @@ class PathChanges extends PathBuilder {
   }
 }
 
-// src/app.js
-class App {
-  constructor(rootNode, renderFn, comps, renderer, ParseContext2) {
-    this.rootNode = rootNode;
-    this.comps = comps;
-    this.compStack = new ComponentStack(comps);
-    this.transactor = new Transactor(comps, null);
-    this.ParseContext = ParseContext2;
-    this.renderer = renderer;
-    this.renderFn = renderFn;
-    this.maxEventNodeDepth = Infinity;
-    this._transactNextBatchId = this._evictCacheId = null;
-    this._eventNames = new Set(["dragstart", "dragover", "dragend"]);
-    this.dragInfo = this.curDragOver = null;
-    this.transactor.onTransactionPushed = (_transaction) => {
-      if (this._transactNextBatchId === null) {
-        this._scheduleNextTransactionBatchExecution();
-      }
-    };
-    this._compiled = false;
+// src/vdom.js
+var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
+var isObject = (v) => v !== null && typeof v === "object";
+var prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b);
+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 (isObject(propValue))
+      patchObject(node, previous, propName, propValue);
+    else if (propName === "className")
+      node.setAttribute("class", propValue);
+    else
+      node[propName] = propValue;
   }
-  get state() {
-    return this.transactor.state;
+}
+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;
+}
+function patchObject(node, previous, propName, propValue) {
+  const previousValue = previous?.[propName];
+  if (isObject(previousValue) && prototypesDiffer(previousValue, propValue)) {
+    node[propName] = propValue;
+    return;
   }
-  handleEvent(e) {
-    const isDragStart = e.type === "dragstart";
-    const isDragOver = e.type === "dragover";
-    const isDragEnd = e.type === "dragend";
-    const { rootNode: root, maxEventNodeDepth: maxDepth, comps } = this;
-    const stopOnNoEvent = !(isDragOver || isDragStart || isDragEnd);
-    const [path, handlers] = Path.fromEvent(e, root, maxDepth, comps, stopOnNoEvent);
-    if (isDragOver) {
-      const dropTarget = getClosestDropTarget(e.target, this.rootNode, 50);
-      if (dropTarget !== null) {
-        e.preventDefault();
-        this._cleanDragOverAttrs();
-        this.curDragOver = dropTarget;
-        dropTarget.dataset.draggingover = this.dragInfo.type;
-      }
-    } else if (isDragStart) {
-      e.target.dataset.dragging = 1;
-      const rootValue = this.state.val;
-      const value = path.lookup(rootValue);
-      const type = e.target.dataset.dragtype ?? "?";
-      const stack = path.buildStack(this.makeStack(rootValue));
-      this.dragInfo = new DragInfo(path, stack, e, value, type, e.target);
-    } else if (isDragEnd) {
-      delete this.dragInfo.node.dataset.dragging;
-      this.dragInfo = null;
-      this._cleanDragOverAttrs();
-    }
-    if (path !== null && handlers !== null) {
-      for (const handler of handlers) {
-        this.transactor.transactInputNow(path, e, handler, this.dragInfo);
-      }
-    }
+  if (!isObject(node[propName]))
+    node[propName] = {};
+  const target = node[propName];
+  for (const k in propValue)
+    target[k] = propValue[k];
+}
+
+class VBase {
+}
+var getKey = (child) => child instanceof VNode ? child.key : undefined;
+var isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
+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));
+}
+
+class VText extends VBase {
+  constructor(text) {
+    super();
+    this.text = String(text);
   }
-  makeStack(rootValue) {
-    return Stack.root(this.comps, rootValue);
+  get nodeType() {
+    return 3;
   }
-  _cleanDragOverAttrs() {
-    if (this.curDragOver !== null) {
-      delete this.curDragOver.dataset.draggingover;
-      this.curDragOver = null;
-    }
+  isEqualTo(other) {
+    return other instanceof VText && this.text === other.text;
   }
-  render() {
-    const root = this.state.val;
-    const stack = this.makeStack(root);
-    return this.renderFn(this.renderer.renderRoot(stack, root), this.rootNode);
+  toDom(opts) {
+    return opts.document.createTextNode(this.text);
   }
-  onChange(callback) {
-    this.transactor.state.onChange(callback);
+}
+
+class VComment extends VBase {
+  constructor(text) {
+    super();
+    this.text = text;
   }
-  compile() {
-    for (const Comp of this.comps.byId.values()) {
-      Comp.compile(this.ParseContext);
-      for (const key in Comp.views) {
-        for (const name of Comp.views[key].ctx.genEventNames()) {
-          this._eventNames.add(name);
-        }
-      }
-    }
-    this._compiled = true;
+  get nodeType() {
+    return 8;
   }
-  start(opts) {
-    if (!this._compiled) {
-      this.compile();
+  isEqualTo(other) {
+    return other instanceof VComment && this.text === other.text;
+  }
+  toDom(opts) {
+    return opts.document.createComment(this.text);
+  }
+}
+
+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;
+  }
+}
+
+class VNode 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;
+  }
+  isEqualTo(other) {
+    if (this === other)
+      return true;
+    if (!(other instanceof VNode) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || 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);
+    applyProperties(node, this.attrs, {});
+    appendChildNodes(node, this.childs, opts);
+    return node;
+  }
+}
+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;
+      continue;
+    }
+    const aValue = a[aKey];
+    const bValue = b[aKey];
+    if (aValue === bValue)
+      continue;
+    if (isObject(aValue) && isObject(bValue)) {
+      if (prototypesDiffer(bValue, aValue)) {
+        diff ??= {};
+        diff[aKey] = bValue;
+      } else {
+        const objectDiff = diffProps(aValue, bValue);
+        if (objectDiff) {
+          diff ??= {};
+          diff[aKey] = objectDiff;
+        }
+      }
+    } else {
+      diff ??= {};
+      diff[aKey] = bValue;
+    }
+  }
+  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.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
+      const propsDiff = diffProps(source.attrs, target.attrs);
+      if (propsDiff)
+        applyProperties(domNode, propsDiff, source.attrs);
+      if (!target.attrs.dangerouslySetInnerHTML) {
+        morphChildren(domNode, source.childs, target.childs, opts);
+      }
+      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]);
+}
+var renderCache = new WeakMap;
+function render(vnode, container, options) {
+  const cached = renderCache.get(container);
+  const isFragment = vnode instanceof VFragment;
+  if (cached && cached.vnode instanceof VFragment === isFragment) {
+    const oldDom = isFragment ? container : cached.dom;
+    const newDom = morphNode(oldDom, cached.vnode, vnode, options);
+    renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
+    return newDom;
+  }
+  renderCache.delete(container);
+  const domNode = vnode.toDom(options);
+  container.replaceChildren(domNode);
+  renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
+  return domNode;
+}
+function h(tagName, properties, children) {
+  const tag = tagName.toUpperCase();
+  const props = {};
+  let key, namespace;
+  if (properties) {
+    for (const propName in properties) {
+      const propVal = properties[propName];
+      switch (propName) {
+        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;
+      }
+    }
+  }
+  const normalizedChildren = [];
+  addChild(normalizedChildren, children);
+  return new VNode(tag, props, normalizedChildren, key, namespace);
+}
+
+// src/app.js
+var _evs = "dragstart dragover dragend touchstart touchmove touchend touchcancel".split(" ");
+
+class App {
+  constructor(rootNode, comps, renderer, ParseContext2) {
+    this.rootNode = rootNode;
+    this.comps = comps;
+    this.compStack = new ComponentStack(comps);
+    this.transactor = new Transactor(comps, null);
+    this.ParseContext = ParseContext2;
+    this.renderer = renderer;
+    this.maxEventNodeDepth = Infinity;
+    this._transactNextBatchId = this._evictCacheId = null;
+    this._eventNames = new Set(_evs);
+    this.dragInfo = this.curDragOver = null;
+    this._touch = null;
+    this.transactor.onTransactionPushed = (_transaction) => {
+      if (this._transactNextBatchId === null)
+        this._scheduleNextTransactionBatchExecution();
+    };
+    this._compiled = false;
+    this._renderOpts = { document: rootNode.ownerDocument };
+  }
+  get state() {
+    return this.transactor.state;
+  }
+  handleEvent(e) {
+    const { type } = e;
+    if (type[0] === "t" && type.startsWith("touch")) {
+      this._handleTouchEvent(e);
+      return;
+    }
+    this._dispatchEvent(e);
+  }
+  _dispatchEvent(e) {
+    const { type } = e;
+    const isDrag = type === "dragover" || type === "dragstart" || type === "dragend";
+    const { rootNode: root, maxEventNodeDepth: maxDepth, comps } = this;
+    const [path, handlers] = Path.fromEvent(e, root, maxDepth, comps, !isDrag);
+    if (isDrag)
+      this._handleDragEvent(e, type, path);
+    if (path !== null && handlers !== null) {
+      for (const handler of handlers) {
+        this.transactor.transactInputNow(path, e, handler, this.dragInfo);
+      }
+    }
+  }
+  _handleTouchEvent(e) {
+    const { type } = e;
+    if (type === "touchstart") {
+      if (this._touch !== null || e.touches.length !== 1)
+        return;
+      const t = e.touches[0];
+      const draggable = t.target?.closest?.('[draggable="true"]');
+      if (!draggable)
+        return;
+      this._touch = makeTouchInfo(t.identifier, t.clientX, t.clientY, draggable, false);
+      return;
+    }
+    if (this._touch === null)
+      return;
+    const touch = findTouch(e, this._touch.id);
+    if (touch === null)
+      return;
+    const { rootNode, _touch } = this;
+    const { clientX, clientY } = touch;
+    const fire = (type2, target) => {
+      const e2 = { type: type2, target, clientX, clientY, preventDefault: NOOP };
+      this._dispatchEvent(e2);
+    };
+    if (type === "touchmove") {
+      if (!_touch.active) {
+        const dx = clientX - _touch.startX;
+        const dy = clientY - _touch.startY;
+        if (dx * dx + dy * dy < TOUCH_DRAG_THRESHOLD_SQ)
+          return;
+        _touch.active = true;
+        e.preventDefault();
+        fire("dragstart", _touch.target);
+      } else {
+        e.preventDefault();
+        fire("dragover", hitTest(rootNode, clientX, clientY));
+      }
+      return;
+    }
+    if (type === "touchend" || type === "touchcancel") {
+      if (_touch.active) {
+        if (type === "touchend")
+          fire("drop", hitTest(rootNode, clientX, clientY));
+        fire("dragend", _touch.target);
+      }
+      this._touch = null;
+    }
+  }
+  _handleDragEvent(e, type, path) {
+    if (type === "dragover") {
+      const dropTarget = getClosestDropTarget(e.target, this.rootNode, 50);
+      if (dropTarget !== null) {
+        e.preventDefault();
+        this._cleanDragOverAttrs();
+        this.curDragOver = dropTarget;
+        dropTarget.dataset.draggingover = this.dragInfo?.type ?? "_external";
+      }
+    } else if (type === "dragstart") {
+      e.target.dataset.dragging = 1;
+      const rootValue = this.state.val;
+      const value = path.lookup(rootValue);
+      const dragType = e.target.dataset.dragtype ?? "?";
+      const stack = path.buildStack(this.makeStack(rootValue));
+      this.dragInfo = new DragInfo(path, stack, e, value, dragType, e.target);
+    } else {
+      if (this.dragInfo !== null) {
+        delete this.dragInfo.node.dataset.dragging;
+        this.dragInfo = null;
+      }
+      this._cleanDragOverAttrs();
+    }
+  }
+  makeStack(rootValue) {
+    return Stack.root(this.comps, rootValue);
+  }
+  _cleanDragOverAttrs() {
+    if (this.curDragOver !== null) {
+      delete this.curDragOver.dataset.draggingover;
+      this.curDragOver = null;
     }
-    for (const name of this._eventNames) {
-      this.rootNode.addEventListener(name, this);
+  }
+  render() {
+    const root = this.state.val;
+    const stack = this.makeStack(root);
+    return render(this.renderer.renderRoot(stack, root), this.rootNode, this._renderOpts);
+  }
+  onChange(callback) {
+    this.transactor.state.onChange(callback);
+  }
+  compile() {
+    for (const Comp of this.comps.byId.values()) {
+      Comp.compile(this.ParseContext);
+      for (const key in Comp.views)
+        for (const name of Comp.views[key].ctx.genEventNames())
+          this._eventNames.add(name);
     }
+    this._compiled = true;
+  }
+  start(opts) {
+    if (!this._compiled)
+      this.compile();
+    for (const name of this._eventNames)
+      this.rootNode.addEventListener(name, this, listenerOpts(name));
     this.onChange((info) => {
-      if (info.val !== info.old) {
+      if (info.val !== info.old)
         this.render();
-      }
     });
     injectCss("tutuca-app", this.comps.compileStyles(), opts?.head ?? document.head);
     if (opts?.noCache) {
@@ -2404,9 +2802,8 @@ class App {
   }
   stop() {
     this.stopCacheEvictionInterval();
-    for (const name of this._eventNames) {
-      this.rootNode.removeEventListener(name, this);
-    }
+    for (const name of this._eventNames)
+      this.rootNode.removeEventListener(name, this, listenerOpts(name));
   }
   dispatchLogicAtRoot(name, args, opts) {
     return this.transactor.pushLogic(new Path([]), name, args, opts);
@@ -2420,12 +2817,10 @@ class App {
     this._transactNextBatchId = null;
     const startTs = Date.now();
     const t = this.transactor;
-    while (t.hasPendingTransactions && Date.now() - startTs < maxRunTimeMs) {
+    while (t.hasPendingTransactions && Date.now() - startTs < maxRunTimeMs)
       t.transactNext();
-    }
-    if (t.hasPendingTransactions) {
+    if (t.hasPendingTransactions)
       this._scheduleNextTransactionBatchExecution();
-    }
   }
   _scheduleNextTransactionBatchExecution() {
     this._transactNextBatchId = setTimeout(() => this._transactNextBatch(), 0);
@@ -2441,19 +2836,44 @@ class App {
 function injectCss(nodeId, style, styleTarget = document.head) {
   const styleNode = document.createElement("style");
   const currentNodeWithId = styleTarget.querySelector(`#${nodeId}`);
-  if (currentNodeWithId) {
+  if (currentNodeWithId)
     styleTarget.removeChild(currentNodeWithId);
-  }
   styleNode.id = nodeId;
   styleNode.innerHTML = style;
   styleTarget.appendChild(styleNode);
 }
+var TOUCH_DRAG_THRESHOLD_PX = 10;
+var TOUCH_DRAG_THRESHOLD_SQ = TOUCH_DRAG_THRESHOLD_PX * TOUCH_DRAG_THRESHOLD_PX;
+var NOOP = () => {};
+function findTouch(e, id) {
+  for (const t of e.changedTouches)
+    if (t.identifier === id)
+      return t;
+  for (const t of e.touches)
+    if (t.identifier === id)
+      return t;
+  return null;
+}
+var listenerOpts = (name) => name === "touchmove" ? { passive: false } : undefined;
+function makeTouchInfo(id, startX, startY, target, active) {
+  return { id, startX, startY, target, active };
+}
+function hitTest(rootNode, x, y) {
+  const root = rootNode.getRootNode();
+  let el = root.elementFromPoint?.(x, y) ?? null;
+  while (el?.shadowRoot) {
+    const next = el.shadowRoot.elementFromPoint(x, y);
+    if (next === null || next === el)
+      break;
+    el = next;
+  }
+  return el ?? rootNode;
+}
 function getClosestDropTarget(target, rootNode, count) {
   let node = target;
   while (count-- > 0 && node !== rootNode) {
-    if (node.dataset?.droptarget !== undefined) {
+    if (node.dataset?.droptarget !== undefined)
       return node;
-    }
     node = node.parentNode;
   }
   return null;
@@ -2473,63 +2893,6 @@ class DragInfo {
   }
 }
 
-// src/util/parsectx.js
-class ParseCtxClassSetCollector extends ParseContext {
-  constructor(...args) {
-    super(...args);
-    this.classes = new Set;
-  }
-  _addClasses(s) {
-    for (const v of s.split(/\s+/)) {
-      this.classes.add(v);
-    }
-  }
-  enterMacro(macroName, macroVars, macroSlots) {
-    const { DOMParser: DP, Text, Comment, nodes, events, macroNodes } = this;
-    const frame = { macroName, macroVars, macroSlots };
-    const v = new ParseCtxClassSetCollector(DP, Text, Comment, nodes, events, macroNodes, frame, this);
-    v.classes = this.classes;
-    return v;
-  }
-  onAttributes(attrs, _wrapperAttrs, _textChild) {
-    if (Array.isArray(attrs.items)) {
-      for (const attr of attrs.items) {
-        if (attr.name !== "class") {
-          continue;
-        }
-        const { val, thenVal, elseVal } = attr;
-        if (thenVal !== undefined) {
-          this._maybeAddVal(thenVal);
-          this._maybeAddVal(elseVal);
-        } else {
-          this._maybeAddVal(val);
-        }
-      }
-    } else {
-      const attr = attrs.items.class;
-      if (attr) {
-        this._addClasses(attr);
-      }
-    }
-  }
-  _maybeAddVal(value) {
-    if (!this._maybeAddStrTpl(value) && typeof value?.val === "string") {
-      this._addClasses(value.val);
-    }
-  }
-  _maybeAddStrTpl(value) {
-    if (value?.vals !== undefined) {
-      for (const val of value.vals) {
-        if (val instanceof ConstVal && val.val !== "") {
-          this._addClasses(val.val);
-        }
-      }
-      return true;
-    }
-    return false;
-  }
-}
-
 // deps/immutable.js
 function invariant(condition, error) {
   if (!condition)
@@ -3191,28 +3554,28 @@ function hashCollection(collection) {
   }
   const ordered = isOrdered(collection);
   const keyed = isKeyed(collection);
-  let h = ordered ? 1 : 0;
+  let h2 = ordered ? 1 : 0;
   collection.__iterate(keyed ? ordered ? (v, k) => {
-    h = 31 * h + hashMerge(hash(v), hash(k)) | 0;
+    h2 = 31 * h2 + hashMerge(hash(v), hash(k)) | 0;
   } : (v, k) => {
-    h = h + hashMerge(hash(v), hash(k)) | 0;
+    h2 = h2 + hashMerge(hash(v), hash(k)) | 0;
   } : ordered ? (v) => {
-    h = 31 * h + hash(v) | 0;
+    h2 = 31 * h2 + hash(v) | 0;
   } : (v) => {
-    h = h + hash(v) | 0;
+    h2 = h2 + hash(v) | 0;
   });
-  return murmurHashOfSize(collection.size, h);
+  return murmurHashOfSize(collection.size, h2);
 }
 var hashMerge = (a, b) => a ^ b + 2654435769 + (a << 6) + (a >> 2) | 0;
-function murmurHashOfSize(size, h) {
-  h = Math.imul(h, 3432918353);
-  h = Math.imul(h << 15 | h >>> -15, 461845907);
-  h = Math.imul(h << 13 | h >>> -13, 5);
-  h = (h + 3864292196 | 0) ^ size;
-  h = Math.imul(h ^ h >>> 16, 2246822507);
-  h = Math.imul(h ^ h >>> 13, 3266489909);
-  h = smi(h ^ h >>> 16);
-  return h;
+function murmurHashOfSize(size, h2) {
+  h2 = Math.imul(h2, 3432918353);
+  h2 = Math.imul(h2 << 15 | h2 >>> -15, 461845907);
+  h2 = Math.imul(h2 << 13 | h2 >>> -13, 5);
+  h2 = (h2 + 3864292196 | 0) ^ size;
+  h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
+  h2 = Math.imul(h2 ^ h2 >>> 13, 3266489909);
+  h2 = smi(h2 ^ h2 >>> 16);
+  return h2;
 }
 function quoteString(value) {
   try {
@@ -5325,7 +5688,7 @@ var List = (value) => {
   }
   assertNotInfinite(size);
   if (size > 0 && size < SIZE) {
-    return makeList(0, size, SHIFT, null, new VNode(iter.toArray()));
+    return makeList(0, size, SHIFT, null, new VNode2(iter.toArray()));
   }
   return empty.withMutations((list) => {
     list.setSize(size);
@@ -5516,7 +5879,7 @@ class ListImpl extends IndexedCollectionImpl {
 }
 List.isList = isList;
 
-class VNode {
+class VNode2 {
   constructor(array, ownerID) {
     this.array = array;
     this.ownerID = ownerID;
@@ -5527,7 +5890,7 @@ class VNode {
     }
     const originIndex = index >>> level & MASK;
     if (originIndex >= this.array.length) {
-      return new VNode([], ownerID);
+      return new VNode2([], ownerID);
     }
     const removingFirst = originIndex === 0;
     let newChild;
@@ -5753,7 +6116,7 @@ function editableVNode(node, ownerID) {
   if (ownerID && ownerID === node?.ownerID) {
     return node;
   }
-  return new VNode(node?.array.slice() ?? [], ownerID);
+  return new VNode2(node?.array.slice() ?? [], ownerID);
 }
 function listNodeFor(list, rawIndex) {
   if (rawIndex >= getTailOffset(list._capacity)) {
@@ -5791,7 +6154,7 @@ function setListBounds(list, begin, end) {
   let newRoot = list._root;
   let offsetShift = 0;
   while (newOrigin + offsetShift < 0) {
-    newRoot = new VNode(newRoot?.array.length ? [undefined, newRoot] : [], owner);
+    newRoot = new VNode2(newRoot?.array.length ? [undefined, newRoot] : [], owner);
     newLevel += SHIFT;
     offsetShift += 1 << newLevel;
   }
@@ -5804,11 +6167,11 @@ function setListBounds(list, begin, end) {
   const oldTailOffset = getTailOffset(oldCapacity);
   const newTailOffset = getTailOffset(newCapacity);
   while (newTailOffset >= 1 << newLevel + SHIFT) {
-    newRoot = new VNode(newRoot?.array.length ? [newRoot] : [], owner);
+    newRoot = new VNode2(newRoot?.array.length ? [newRoot] : [], owner);
     newLevel += SHIFT;
   }
   const oldTail = list._tail;
-  let newTail = newTailOffset < oldTailOffset ? listNodeFor(list, newCapacity - 1) : newTailOffset > oldTailOffset ? new VNode([], owner) : oldTail;
+  let newTail = newTailOffset < oldTailOffset ? listNodeFor(list, newCapacity - 1) : newTailOffset > oldTailOffset ? new VNode2([], owner) : oldTail;
   if (oldTail && newTailOffset > oldTailOffset && newOrigin < oldCapacity && oldTail.array.length) {
     newRoot = editableVNode(newRoot, owner);
     let node = newRoot;
@@ -6924,14 +7287,11 @@ class Field {
     return { type, defaultValue: dv?.toJS ? dv.toJS() : dv };
   }
   getFirstFailingCheck(v) {
-    if (!this.typeCheck.isValid(v)) {
+    if (!this.typeCheck.isValid(v))
       return this.typeCheck;
-    }
-    for (const check of this.checks) {
-      if (!check.isValid(v)) {
+    for (const check of this.checks)
+      if (!check.isValid(v))
         return check;
-      }
-    }
     return null;
   }
   isValid(v) {
@@ -6942,9 +7302,8 @@ class Field {
     return this;
   }
   coerceOr(v, defaultValue = null) {
-    if (this.isValid(v)) {
+    if (this.isValid(v))
       return v;
-    }
     const v1 = this.coercer(v);
     return this.isValid(v1) ? v1 : defaultValue;
   }
@@ -7102,9 +7461,8 @@ function extendProtoForKeyed(proto, name, uname) {
   proto[`updateIn${uname}At`] = function(i, fn) {
     const col = this.get(name);
     const v = col.get(i, NONE2);
-    if (v !== NONE2) {
+    if (v !== NONE2)
       return this.set(name, col.set(i, fn(v)));
-    }
     console.warn("key", i, "not found in", name, col);
     return this;
   };
@@ -7204,19 +7562,17 @@ class ClassBuilder {
         const args = {};
         for (const key in inArgs) {
           const field = fields[key];
-          if (compFields.has(key)) {
+          if (compFields.has(key))
             args[key] = mkCompField(field, opts.scope, inArgs[key]);
-          } else if (field === undefined) {
+          else if (field === undefined) {
             console.warn("extra argument to constructor:", name, key, inArgs);
             continue;
           }
           args[key] = field.coerceOrDefault(inArgs[key]);
         }
-        for (const key of compFields) {
-          if (args[key] === undefined) {
+        for (const key of compFields)
+          if (args[key] === undefined)
             args[key] = mkCompField(fields[key], opts.scope, inArgs[key]);
-          }
-        }
         return this(args);
       }
     };
@@ -7243,9 +7599,8 @@ class ClassBuilder {
     return this._mergeProto(this._statics, proto, "static");
   }
   _mergeProto(target, proto, _name) {
-    for (const k in proto) {
+    for (const k in proto)
       target[k] = proto[k];
-    }
     return this;
   }
   addField(name, dval, FieldCls) {
@@ -7277,70 +7632,74 @@ function classFromData(name, { fields = {}, methods, statics }) {
   for (const field in fields) {
     const value = fields[field];
     const type = typeof value;
-    if (type === "string") {
+    if (type === "string")
       b.addField(field, value, FieldString);
-    } else if (type === "number") {
+    else if (type === "number")
       b.addField(field, value, FieldFloat);
-    } else if (type === "boolean") {
+    else if (type === "boolean")
       b.addField(field, value, FieldBool);
-    } else if (List.isList(value) || Array.isArray(value)) {
+    else if (List.isList(value) || Array.isArray(value))
       b.addField(field, List(value), FieldList);
-    } else if (Set2.isSet(value) || value instanceof Set) {
+    else if (Set2.isSet(value) || value instanceof Set)
       b.addField(field, Set2(value), FieldSet);
-    } else if (OrderedMap.isOrderedMap(value)) {
+    else if (OrderedMap.isOrderedMap(value))
       b.addField(field, value, FieldOMap);
-    } else if (value?.type && value?.defaultValue !== undefined) {
+    else if (value?.type && value?.defaultValue !== undefined) {
       const Field2 = fieldsByTypeName[value.type] ?? FieldAny;
       b.addField(field, new Field2().coerceOr(value.defaultValue), Field2);
-    } else if (value?.component && value?.args !== undefined) {
+    } else if (value?.component && value?.args !== undefined)
       b.addCompField(field, value.component, value.args);
-    } else if (Map2.isMap(value) || value?.constructor === Object) {
+    else if (Map2.isMap(value) || value?.constructor === Object)
       b.addField(field, Map2(value), FieldMap);
-    } else {
+    else {
       const Field2 = fieldsByClass.get(value?.constructor) ?? FieldAny;
       b.addField(field, value, Field2);
     }
   }
-  if (methods) {
+  if (methods)
     b.methods(methods);
-  }
-  if (statics) {
+  if (statics)
     b.statics(statics);
-  }
   return b.build();
 }
-var component = (opts) => new Component(opts.name ?? "Comp", classFromData(opts.name, opts), opts.view ?? "Not Defined", opts.views, opts.style, opts.commonStyle ?? "", opts.globalStyle ?? "", opts.computed, opts.input, opts.logic, opts.bubble, opts.response, opts.alter, opts.dynamic, opts.on);
+var component = (opts) => new Component(classFromData(opts.name, opts), opts);
 
 // src/renderer.js
 var DATASET_ATTRS = ["nid", "cid", "eid", "vid", "si", "sk"];
 
 class Renderer {
-  constructor(comps, h, fragment, comment, renderFn, getSeqInfo, cache) {
+  constructor(comps) {
     this.comps = comps;
-    this.h = h;
-    this.fragment = fragment;
-    this.renderComment = comment;
-    this.renderFn = renderFn;
-    this.getSeqInfo = getSeqInfo ?? basicGetSeqInfo;
-    this.cache = cache ?? new WeakMapDomCache;
+    this.cache = new WeakMapDomCache;
+  }
+  getSeqInfo(seq) {
+    return isIndexed(seq) ? imIndexedIter : isKeyed(seq) ? imKeyedIter : seqInfoByClass.get(seq?.constructor) ?? unkIter;
+  }
+  renderTag(tag, attrs, childs) {
+    return h(tag, attrs, childs);
+  }
+  renderFragment(childs) {
+    return new VFragment(childs);
+  }
+  renderComment(text) {
+    return new VComment(text);
   }
   setNullCache() {
     this.cache = new NullDomCache;
   }
   renderToDOM(stack, val) {
     const rootNode = document.createElement("div");
-    this.renderFn(this.h("div", null, [this.renderRoot(stack, val)]), rootNode);
+    const rOpts = { document };
+    render(h("div", null, [this.renderRoot(stack, val)]), rootNode, rOpts);
     return rootNode.childNodes[0];
   }
   renderToString(stack, val, cleanAttrs = true) {
-    const dom = this.renderToDOM(stack, val, this.renderFn);
+    const dom = this.renderToDOM(stack, val);
     if (cleanAttrs) {
       const nodes = dom.querySelectorAll("[data-nid],[data-cid],[data-eid]");
-      for (const { dataset } of nodes) {
-        for (const name of DATASET_ATTRS) {
+      for (const { dataset } of nodes)
+        for (const name of DATASET_ATTRS)
           delete dataset[name];
-        }
-      }
     }
     return dom.innerHTML;
   }
@@ -7356,560 +7715,194 @@ class Renderer {
   _rValComp(stack, val, comp, nid, key, viewName) {
     const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
     const cachedNode = this.cache.get(val, cacheKey);
-    if (cachedNode) {
+    if (cachedNode)
       return cachedNode;
-    }
     const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
-    const meta = this.renderMetadata("Comp", { nid });
-    const dom = this.renderFragment([meta, this.renderView(view, stack)]);
+    const meta = this._renderMetadata({ $: "Comp", nid });
+    const dom = new VFragment([meta, this.renderView(view, stack)]);
     this.cache.set(val, cacheKey, dom);
     return dom;
   }
   pushEachEntry(r, nid, attrName, key, dom) {
-    r.push(this.renderMetadata("Each", { nid, [attrName]: key }), dom);
+    r.push(this._renderMetadata({ $: "Each", nid, [attrName]: key }), dom);
   }
   renderEach(stack, iterInfo, nodeId, viewName) {
     const { seq, filter, loopWith } = iterInfo.eval(stack);
-    const [attrName, gen] = this.getSeqInfo(seq);
     const r = [];
     const iterData = loopWith.call(stack.it, seq);
-    for (const [key, value] of gen(seq)) {
+    this.getSeqInfo(seq)(seq, (key, value, attrName) => {
       if (filter.call(stack.it, key, value, iterData)) {
         const newStack = stack.enter(value, { key }, true);
         const dom = this.renderIt(newStack, nodeId, key, viewName);
         this.pushEachEntry(r, nodeId, attrName, key, dom);
       }
-    }
+    });
     return r;
   }
   renderEachWhen(stack, iterInfo, view, nid) {
     const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
-    const [attrName, gen] = this.getSeqInfo(seq);
     const r = [];
     const iterData = loopWith.call(stack.it, seq);
-    for (const [key, value] of gen(seq)) {
-      if (filter.call(stack.it, key, value, iterData)) {
+    const it = stack.it;
+    this.getSeqInfo(seq)(seq, (key, value, attrName) => {
+      if (filter.call(it, key, value, iterData)) {
         const bindings = { key, value };
         const cacheKey = `${nid}-${key}`;
         let cachedNode;
         if (enricher) {
-          enricher.call(stack.it, bindings, key, value, iterData);
-          cachedNode = this.cache.get2(stack.it, value, cacheKey);
-        } else {
+          enricher.call(it, bindings, key, value, iterData);
+          cachedNode = this.cache.get2(it, value, cacheKey);
+        } else
           cachedNode = this.cache.get(value, cacheKey);
-        }
         if (cachedNode) {
           this.pushEachEntry(r, nid, attrName, key, cachedNode);
-          continue;
+          return;
         }
         const newStack = stack.enter(value, bindings, false);
         const dom = this.renderView(view, newStack);
         this.pushEachEntry(r, nid, attrName, key, dom);
-        if (enricher) {
-          this.cache.set2(stack.it, value, cacheKey, dom);
-        } else {
+        if (enricher)
+          this.cache.set2(it, value, cacheKey, dom);
+        else
           this.cache.set(value, cacheKey, dom);
-        }
       }
-    }
+    });
     return r;
   }
   renderView(view, stack) {
-    if (stack.binds.tail !== null) {
-      for (const binds of stack.binds.tail) {
-        if (!binds.isFrame)
-          continue;
-        if (stack.it !== binds.it)
+    let n = stack.binds[1];
+    while (n !== null) {
+      const b = n[0];
+      if (b.isFrame) {
+        if (stack.it !== b.it)
           break;
-        console.error("recursion detected", stack.it, binds.it);
-        return this.renderComment("RECURSION AVOIDED");
-      }
-    }
-    return view.render(stack, this);
-  }
-  renderText(text) {
-    return text;
-  }
-  renderMetadata(type, info) {
-    info.$ = type;
-    return this.renderComment(`§${JSON.stringify(info)}§`);
-  }
-  renderEmpty() {
-    return null;
-  }
-  renderTag(tagName, attrs, childs) {
-    return this.h(tagName, attrs, childs);
-  }
-  renderFragment(childs) {
-    return this.fragment(childs);
-  }
-}
-function* imIndexedEntries(seq) {
-  let i = 0;
-  for (const v of seq)
-    yield [i++, v];
-}
-function* imKeyedEntries(obj) {
-  for (const [key, value] of obj.toSeq().entries())
-    yield [key, value];
-}
-var seqInfoByClass = new Map;
-var idxInfo = ["si", imIndexedEntries];
-var keyInfo = ["sk", imKeyedEntries];
-var unkInfo = ["si", function* nullEntries(_obj) {}];
-function basicGetSeqInfo(seq) {
-  return isIndexed(seq) ? idxInfo : isKeyed(seq) ? keyInfo : seqInfoByClass.get(seq?.constructor) ?? unkInfo;
-}
-
-// extra/klist.js
-class KList {
-  constructor(items = Map2(), order = List()) {
-    this.items = items;
-    this.order = order;
-    this.$ = 0;
-  }
-  _clonish(items, order) {
-    return new KList(items, order, this.$);
-  }
-  toJS() {
-    return this.order.toArray().map((k) => this.items.get(k));
-  }
-  set(k, v) {
-    const newOrder = this.items.has(k) ? this.order : this.order.push(k);
-    return this._clonish(this.items.set(k, v), newOrder, this.$);
-  }
-  get(k, dval = null) {
-    return this.items.get(k, dval);
-  }
-  _nextFreeKey() {
-    let cur = this.$;
-    while (true) {
-      const key = `§${cur}§`;
-      if (!this.items.has(key)) {
-        return [key, cur];
-      }
-      cur += 1;
-    }
-  }
-  push(v) {
-    const [key, next$] = this._nextFreeKey();
-    const newKList = this.set(key, v);
-    newKList.$ = next$;
-    return newKList;
-  }
-  get size() {
-    return this.items.size;
-  }
-  delete(k) {
-    if (this.items.has(k)) {
-      const newOrder = this.order.delete(this.order.indexOf(k));
-      return this._clonish(this.items.delete(k), newOrder);
-    }
-    return this;
-  }
-  moveKeyBeforeKey(k1, k2) {
-    const { order } = this;
-    return this.moveKeyIndexToIndex(order.indexOf(k1), order.indexOf(k2), 0);
-  }
-  moveKeyAfterKey(k1, k2) {
-    const { order } = this;
-    return this.moveKeyIndexToIndex(order.indexOf(k1), order.indexOf(k2), 1);
-  }
-  moveKeyIndexToIndex(source, target, offset) {
-    if (source === -1 || target === -1 || source === target) {
-      return this;
-    }
-    const { order } = this;
-    const newPos = target + offset;
-    const oldPos = newPos < source ? source + 1 : source;
-    const newOrder = order.insert(newPos, order.get(source)).delete(oldPos);
-    return this._clonish(this.items, newOrder);
-  }
-}
-var klistCoercer = (_) => null;
-
-class CheckTypeKList {
-  isValid(v) {
-    return v instanceof KList;
-  }
-  getMessage(_v) {
-    return "KList expected";
-  }
-}
-var CHECK_TYPE_KLIST = new CheckTypeKList;
-
-class FieldKList extends Field {
-  constructor(name, defaultValue = new KList) {
-    super("KList", name, CHECK_TYPE_KLIST, klistCoercer, defaultValue);
-  }
-  extendProtoForType(proto, uname) {
-    extendProtoForKeyed(proto, this.name, uname);
-    const { name } = this;
-    extendProtoForKeyed(proto, name, uname);
-    proto[`pushIn${uname}`] = function(v) {
-      return this.set(name, this.get(name).push(v));
-    };
-  }
-}
-fieldsByClass.set(KList, FieldKList);
-function* klistEntries(seq) {
-  for (const k of seq.order) {
-    yield [k, seq.items.get(k)];
-  }
-}
-seqInfoByClass.set(KList, ["data-sk", klistEntries]);
-// src/vdom.js
-var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
-var isObject = (v) => v !== null && typeof v === "object";
-var prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b);
-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 (isObject(propValue)) {
-      patchObject(node, previous, propName, propValue);
-    } 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;
-  }
-}
-function patchObject(node, previous, propName, propValue) {
-  const previousValue = previous?.[propName];
-  if (isObject(previousValue) && prototypesDiffer(previousValue, propValue)) {
-    node[propName] = propValue;
-    return;
-  }
-  if (!isObject(node[propName])) {
-    node[propName] = {};
-  }
-  const target = node[propName];
-  for (const k in propValue) {
-    target[k] = propValue[k];
-  }
-}
-
-class VBase {
-}
-var getKey = (child) => child instanceof VNode2 ? child.key : undefined;
-var isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
-function childsEqual(a, b) {
-  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));
-  }
-}
-
-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);
-  }
-}
-
-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);
-  }
-}
-
-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;
+        console.error("recursion detected", stack.it, b.it);
+        return new VComment("RECURSION AVOIDED");
+      }
+      n = n[1];
     }
-    return childsEqual(this.childs, other.childs);
+    return view.render(stack, this);
   }
-  toDom(opts) {
-    const fragment = opts.document.createDocumentFragment();
-    appendChildNodes(fragment, this.childs, opts);
-    return fragment;
+  _renderMetadata(info) {
+    return new VComment(`§${JSON.stringify(info)}§`);
   }
 }
+var imIndexedIter = (seq, visit) => {
+  let i = 0;
+  for (const v of seq)
+    visit(i++, v, "si");
+};
+var imKeyedIter = (seq, visit) => {
+  for (const [k, v] of seq.toSeq().entries())
+    visit(k, v, "sk");
+};
+var unkIter = () => {};
+var seqInfoByClass = new Map;
 
-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;
+// extra/klist.js
+class KList {
+  constructor(items = Map2(), order = List()) {
+    this.items = items;
+    this.order = order;
+    this.$ = 0;
   }
-  isEqualTo(other) {
-    if (!(other instanceof VNode2) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.childs.length !== other.childs.length) {
-      return false;
-    }
-    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);
+  _clonish(items, order) {
+    return new KList(items, order, this.$);
   }
-  toDom(opts) {
-    const doc = opts.document;
-    const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
-    applyProperties(node, this.attrs, {});
-    appendChildNodes(node, this.childs, opts);
-    return node;
+  toJS() {
+    return this.order.toArray().map((k) => this.items.get(k));
   }
-}
-function diffProps(a, b) {
-  let diff = null;
-  for (const aKey in a) {
-    if (!Object.hasOwn(b, aKey)) {
-      diff ??= {};
-      diff[aKey] = undefined;
-      continue;
-    }
-    const aValue = a[aKey];
-    const bValue = b[aKey];
-    if (aValue === bValue)
-      continue;
-    if (isObject(aValue) && isObject(bValue)) {
-      if (prototypesDiffer(bValue, aValue)) {
-        diff ??= {};
-        diff[aKey] = bValue;
-      } else {
-        const objectDiff = diffProps(aValue, bValue);
-        if (objectDiff) {
-          diff ??= {};
-          diff[aKey] = objectDiff;
-        }
-      }
-    } else {
-      diff ??= {};
-      diff[aKey] = bValue;
-    }
+  set(k, v) {
+    const newOrder = this.items.has(k) ? this.order : this.order.push(k);
+    return this._clonish(this.items.set(k, v), newOrder, this.$);
   }
-  for (const bKey in b) {
-    if (!Object.hasOwn(a, bKey)) {
-      diff ??= {};
-      diff[bKey] = b[bKey];
-    }
+  get(k, dval = null) {
+    return this.items.get(k, dval);
   }
-  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.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
-      const propsDiff = diffProps(source.attrs, target.attrs);
-      if (propsDiff)
-        applyProperties(domNode, propsDiff, source.attrs);
-      if (!target.attrs.dangerouslySetInnerHTML) {
-        morphChildren(domNode, source.childs, target.childs, opts);
+  _nextFreeKey() {
+    let cur = this.$;
+    while (true) {
+      const key = `§${cur}§`;
+      if (!this.items.has(key)) {
+        return [key, cur];
       }
-      return domNode;
-    }
-    if (type === 11) {
-      morphChildren(domNode, source.childs, target.childs, opts);
-      return domNode;
+      cur += 1;
     }
   }
-  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;
+  push(v) {
+    const [key, next$] = this._nextFreeKey();
+    const newKList = this.set(key, v);
+    newKList.$ = next$;
+    return newKList;
   }
-  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;
+  get size() {
+    return this.items.size;
   }
-  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);
+  delete(k) {
+    if (this.items.has(k)) {
+      const newOrder = this.order.delete(this.order.indexOf(k));
+      return this._clonish(this.items.delete(k), newOrder);
     }
+    return this;
   }
-  for (let i = oldChilds.length - 1;i >= 0; i--) {
-    if (!used[i] && domNodes[i].parentNode === parentDom) {
-      parentDom.removeChild(domNodes[i]);
+  moveKeyBeforeKey(k1, k2) {
+    const { order } = this;
+    return this.moveKeyIndexToIndex(order.indexOf(k1), order.indexOf(k2), 0);
+  }
+  moveKeyAfterKey(k1, k2) {
+    const { order } = this;
+    return this.moveKeyIndexToIndex(order.indexOf(k1), order.indexOf(k2), 1);
+  }
+  moveKeyIndexToIndex(source, target, offset) {
+    if (source === -1 || target === -1 || source === target) {
+      return this;
     }
+    const { order } = this;
+    const newPos = target + offset;
+    const oldPos = newPos < source ? source + 1 : source;
+    const newOrder = order.insert(newPos, order.get(source)).delete(oldPos);
+    return this._clonish(this.items, newOrder);
   }
 }
-var renderCache = new WeakMap;
-function render(vnode, container, options) {
-  const cached = renderCache.get(container);
-  const isFragment = vnode instanceof VFragment;
-  if (cached && cached.vnode instanceof VFragment === isFragment) {
-    const oldDom = isFragment ? container : cached.dom;
-    const newDom = morphNode(oldDom, cached.vnode, vnode, options);
-    renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
-    return newDom;
+var klistCoercer = (_) => null;
+
+class CheckTypeKList {
+  isValid(v) {
+    return v instanceof KList;
   }
-  renderCache.delete(container);
-  const domNode = vnode.toDom(options);
-  container.replaceChildren(domNode);
-  renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
-  return domNode;
-}
-function h(tagName, properties, children) {
-  const tag = tagName.toUpperCase();
-  const props = {};
-  let key, namespace;
-  if (properties) {
-    for (const propName in properties) {
-      const propVal = properties[propName];
-      switch (propName) {
-        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;
-      }
-    }
+  getMessage(_v) {
+    return "KList expected";
   }
-  const normalizedChildren = [];
-  addChild(normalizedChildren, children);
-  return new VNode2(tag, props, normalizedChildren, key, namespace);
 }
+var CHECK_TYPE_KLIST = new CheckTypeKList;
 
+class FieldKList extends Field {
+  constructor(name, defaultValue = new KList) {
+    super("KList", name, CHECK_TYPE_KLIST, klistCoercer, defaultValue);
+  }
+  extendProtoForType(proto, uname) {
+    extendProtoForKeyed(proto, this.name, uname);
+    const { name } = this;
+    extendProtoForKeyed(proto, name, uname);
+    proto[`pushIn${uname}`] = function(v) {
+      return this.set(name, this.get(name).push(v));
+    };
+  }
+}
+fieldsByClass.set(KList, FieldKList);
+seqInfoByClass.set(KList, (seq, visit) => {
+  for (const k of seq.order)
+    visit(k, seq.items.get(k), "data-sk");
+});
 // index.js
 var css = String.raw;
 var html = String.raw;
-function macro(defaults, rawView) {
-  return new Macro(defaults, rawView);
-}
-var toNode = (nodeOrSelector) => typeof nodeOrSelector === "string" ? document.querySelector(nodeOrSelector) : nodeOrSelector;
+var macro = (defaults, rawView) => new Macro(defaults, rawView);
 function tutuca(nodeOrSelector) {
-  const rootNode = toNode(nodeOrSelector);
+  const rootNode = typeof nodeOrSelector === "string" ? document.querySelector(nodeOrSelector) : nodeOrSelector;
   const comps = new Components;
-  const fragment = (childs) => new VFragment(childs);
-  const comment = (text) => new VComment(text);
-  const ropts = { document };
-  const render1 = (vnode, cont) => render(vnode, cont, ropts);
-  const renderer = new Renderer(comps, h, fragment, comment, render1);
-  return new App(rootNode, render1, comps, renderer, ParseContext);
+  const renderer = new Renderer(comps);
+  return new App(rootNode, comps, renderer, ParseContext);
 }
 
 // extra.js
@@ -7927,9 +7920,8 @@ async function compileClassesToStyleText(app, compileClasses, extraCSSClasses, C
   for (const Comp of app.comps.byId.values()) {
     for (const key in Comp.views) {
       const view = Comp.views[key];
-      for (const name of view.ctx.classes) {
+      for (const name of view.ctx.classes)
         classes.add(name);
-      }
     }
   }
   return await compileClasses(Array.from(classes));
@@ -8155,6 +8147,7 @@ class LintParseContext extends ParseContext {
     this.attrs.push({ attrs, wrapperAttrs, textChild });
   }
 }
+
 // dev.js
 class LintClassCollectorCtx extends ParseCtxClassSetCollector {
   constructor(...args) {