tutuca 0.9.65 → 0.9.67

package/dist/tutuca.ext.js

@@ -0,0 +1,3828 @@
+// src/value.js
+import { is } from "immutable";
+
+// src/path.js
+var NONE = Symbol("NONE");
+
+class Step {
+  lookup(_v, dval = null) {
+    return dval;
+  }
+  setValue(root, _v) {
+    return root;
+  }
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, {}, true);
+  }
+  toAbstractPathStep() {
+    return this;
+  }
+}
+
+class BindStep extends Step {
+  constructor(binds) {
+    super();
+    this.binds = binds;
+  }
+  lookup(v, _dval) {
+    return v;
+  }
+  setValue(_root, v) {
+    return v;
+  }
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, { ...this.binds }, false);
+  }
+  withIndex(i) {
+    return new BindStep({ ...this.binds, key: i });
+  }
+  withKey(key) {
+    return new BindStep({ ...this.binds, key });
+  }
+  toAbstractPathStep() {
+    return null;
+  }
+}
+
+class FieldStep extends Step {
+  constructor(field) {
+    super();
+    this.field = field;
+  }
+  lookup(v, dval = null) {
+    return v?.get ? v.get(this.field, dval) : dval;
+  }
+  setValue(root, v) {
+    return root.set(this.field, v);
+  }
+  withIndex(i) {
+    return new SeqStep(this.field, i);
+  }
+  withKey(k) {
+    return new SeqStep(this.field, k);
+  }
+}
+
+class SeqStep extends Step {
+  constructor(field, key) {
+    super();
+    this.field = field;
+    this.key = key;
+  }
+  lookup(v, dval = null) {
+    const o = v?.get(this.field, null);
+    return o?.get ? o.get(this.key, dval) : dval;
+  }
+  setValue(root, v) {
+    const seq = root?.get(this.field, null);
+    return seq ? root.set(this.field, seq.set(this.key, v)) : root;
+  }
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, { key: this.key }, true);
+  }
+}
+
+class SeqAccessStep extends Step {
+  constructor(seqField, keyField) {
+    super();
+    this.seqField = seqField;
+    this.keyField = keyField;
+  }
+  lookup(v, dval = null) {
+    const seq = v?.get(this.seqField, NONE);
+    const key = v?.get(this.keyField, NONE);
+    return key !== NONE && seq?.get ? seq.get(key, dval) : dval;
+  }
+  setValue(root, v) {
+    const seq = root?.get(this.seqField, NONE);
+    const key = root?.get(this.keyField, NONE);
+    return seq === NONE || key === NONE ? root : root.set(this.seqField, seq.set(key, v));
+  }
+}
+
+class EachBindStep extends Step {
+  constructor(seqVal, key) {
+    super();
+    this.seqVal = seqVal;
+    this.key = key;
+  }
+  lookup(v, _dval) {
+    return v;
+  }
+  setValue(_root, v) {
+    return v;
+  }
+  enterFrame(stack, _prev, next) {
+    const item = this.seqVal.eval(stack)?.get(this.key, null);
+    return stack.enter(next, { key: this.key, value: item }, false);
+  }
+  toAbstractPathStep() {
+    return null;
+  }
+}
+
+class EachRenderItStep extends SeqStep {
+  enterFrame(stack, _prev, next) {
+    return stack.enter(next, { key: this.key, value: next }, false).enter(next, {}, true);
+  }
+  toAbstractPathStep() {
+    return new SeqStep(this.field, this.key);
+  }
+}
+function warnRawDynStep(op, step) {
+  console.warn(`Path.${op} reached a DynStep: call toTransactionPath() first`, step);
+}
+
+class DynStep extends Step {
+  constructor(producerCompId, producerSteps) {
+    super();
+    this.producerCompId = producerCompId;
+    this.producerSteps = producerSteps;
+    this.interiorCids = new Set;
+  }
+  teleportSteps() {
+    return this.producerSteps;
+  }
+  lookup(_v, dval = null) {
+    warnRawDynStep("lookup", this);
+    return dval;
+  }
+  setValue(root, _v) {
+    warnRawDynStep("setValue", this);
+    return root;
+  }
+  enterFrame(stack, _prev, _next) {
+    warnRawDynStep("enterFrame", this);
+    return stack;
+  }
+}
+
+class DynEachStep extends DynStep {
+  constructor(producerCompId, producerSteps, key) {
+    super(producerCompId, producerSteps);
+    this.key = key;
+  }
+  teleportSteps() {
+    const { producerSteps, key } = this;
+    if (producerSteps.length === 0)
+      return producerSteps;
+    const last = producerSteps[producerSteps.length - 1];
+    if (!(last instanceof FieldStep)) {
+      console.warn("DynEachStep: seq-access dynamic cannot be iterated", this);
+      return producerSteps;
+    }
+    return producerSteps.slice(0, -1).concat(new SeqStep(last.field, key));
+  }
+}
+
+class Path {
+  constructor(steps = []) {
+    this.steps = steps;
+  }
+  concat(steps) {
+    return new Path(this.steps.concat(steps));
+  }
+  popStep() {
+    return new Path(this.steps.slice(0, -1));
+  }
+  compact() {
+    const out = [];
+    for (const step of this.steps) {
+      const s = step.toAbstractPathStep();
+      if (s !== null) {
+        if (s !== step)
+          s._originCid = step._originCid;
+        out.push(s);
+      }
+    }
+    return new Path(out);
+  }
+  toTransactionPath() {
+    let hasDyn = false;
+    for (const step of this.steps)
+      if (step instanceof DynStep) {
+        hasDyn = true;
+        break;
+      }
+    if (!hasDyn)
+      return this;
+    const out = [];
+    for (const step of this.steps) {
+      if (step instanceof DynStep) {
+        while (out.length > 0 && step.interiorCids.has(out[out.length - 1]._originCid))
+          out.pop();
+        for (const ts of step.teleportSteps()) {
+          ts._originCid = step.producerCompId;
+          out.push(ts);
+        }
+      } else
+        out.push(step);
+    }
+    return new Path(out);
+  }
+  lookup(v, dval = null) {
+    let curVal = v;
+    for (const step of this.steps) {
+      curVal = step.lookup(curVal, NONE);
+      if (curVal === NONE)
+        return dval;
+    }
+    return curVal;
+  }
+  setValue(root, v) {
+    const intermediates = new Array(this.steps.length);
+    let curVal = root;
+    for (let i = 0;i < this.steps.length; i++) {
+      intermediates[i] = curVal;
+      curVal = this.steps[i].lookup(curVal, NONE);
+      if (curVal === NONE)
+        return root;
+    }
+    let newVal = v;
+    for (let i = this.steps.length - 1;i >= 0; i--) {
+      newVal = this.steps[i].setValue(intermediates[i], newVal);
+      intermediates[i] = newVal;
+    }
+    return newVal;
+  }
+  buildStack(stack) {
+    let prev = stack.it;
+    for (const step of this.steps) {
+      const next = step.lookup(prev, NONE);
+      if (next === NONE) {
+        console.warn("bad PathItem", { root: stack.it, step, path: this });
+        return null;
+      }
+      stack = step.enterFrame(stack, prev, next);
+      prev = next;
+    }
+    return stack;
+  }
+  static fromNodeAndEventName(node, eventName, rootNode, maxDepth, comps, stopOnNoEvent = true) {
+    const pathSteps = [];
+    const pendingDyns = [];
+    const bubbles = BUBBLING_EVENTS.has(eventName);
+    let depth = 0;
+    let eventIds = [];
+    let handlers = null;
+    let nodeIds = [];
+    let isLeafComponent = true;
+    const crossComponent = (cidNum, vid) => {
+      const comp = comps.getComponentForId(cidNum);
+      let pushStep = true;
+      if (handlers === null && (isLeafComponent || bubbles)) {
+        handlers = findHandlers(comp, eventIds, vid, eventName);
+        if (handlers === null) {
+          if (isLeafComponent && stopOnNoEvent && !bubbles)
+            return false;
+        } else if (!isLeafComponent) {
+          pathSteps.length = 0;
+          pendingDyns.length = 0;
+          pushStep = false;
+        }
+      }
+      isLeafComponent = false;
+      for (const dyn of pendingDyns)
+        dyn.interiorCids.add(cidNum);
+      if (pushStep) {
+        const step = resolvePathStep(comp, nodeIds, vid);
+        if (step) {
+          step._originCid = cidNum;
+          pathSteps.push(step);
+          if (step instanceof DynStep) {
+            step.interiorCids.add(cidNum);
+            pendingDyns.push(step);
+          }
+        }
+      }
+      for (let i = pendingDyns.length - 1;i >= 0; i--)
+        if (pendingDyns[i].producerCompId === cidNum)
+          pendingDyns.splice(i, 1);
+      eventIds = [];
+      nodeIds = [];
+      return true;
+    };
+    while (node && node !== rootNode && depth < maxDepth) {
+      if (node?.dataset) {
+        const { eid, cid, vid } = node.dataset;
+        if (eid !== undefined)
+          eventIds.push(eid);
+        const metas = metaChain(node.previousSibling);
+        let sawComp = false;
+        for (let i = 0;i < metas.length; i++) {
+          const m = metas[i];
+          if (m.$ === "Comp") {
+            sawComp = true;
+            if (!crossComponent(m.cid, m.vid))
+              return NO_EVENT_INFO;
+            const outer = metas[i + 1];
+            if (outer?.$ === "Each" && outer.nid === m.nid) {
+              nodeIds.push({ nid: outer.nid, si: outer.si, sk: outer.sk });
+              i += 1;
+            } else {
+              nodeIds.push({ nid: m.nid });
+            }
+          } else {
+            nodeIds.push({ nid: m.nid, si: m.si, sk: m.sk });
+          }
+        }
+        if (!sawComp && cid !== undefined && !crossComponent(+cid, vid))
+          return NO_EVENT_INFO;
+      }
+      depth += 1;
+      node = node.parentNode;
+    }
+    if (pendingDyns.length > 0)
+      console.warn("event reconstruction: dynamic-var producer not found", pendingDyns);
+    return [new Path(pathSteps.reverse()), handlers];
+  }
+  static fromEvent(e, rNode, maxDepth, comps, stopOnNoEvent = true) {
+    const { type, target } = e;
+    return Path.fromNodeAndEventName(target, type, rNode, maxDepth, comps, stopOnNoEvent);
+  }
+}
+function metaChain(n) {
+  const out = [];
+  while (n?.nodeType === 8 && n.textContent[0] === "§") {
+    try {
+      out.push(JSON.parse(n.textContent.slice(1, -1)));
+    } catch (err) {
+      console.warn(err, n);
+    }
+    n = n.previousSibling;
+  }
+  return out;
+}
+function findHandlers(comp, eventIds, vid, eventName) {
+  for (const eid of eventIds) {
+    const handlers = comp.getEventForId(+eid, vid).getHandlersFor(eventName);
+    if (handlers !== null)
+      return handlers;
+  }
+  return null;
+}
+
+class StepCtx {
+  constructor(comp, nodeIds, idx, vid) {
+    this.comp = comp;
+    this.nodeIds = nodeIds;
+    this.idx = idx;
+    this.vid = vid;
+  }
+  get meta() {
+    return this.nodeIds[this.idx];
+  }
+  get key() {
+    const m = this.meta;
+    return m.si !== undefined ? +m.si : m.sk;
+  }
+  get hasKey() {
+    const m = this.meta;
+    return m.si !== undefined || m.sk !== undefined;
+  }
+  next() {
+    const { idx, nodeIds } = this;
+    return idx + 1 < nodeIds.length ? new StepCtx(this.comp, nodeIds, idx + 1, this.vid) : null;
+  }
+  resolveNode() {
+    return this.comp.getNodeForId(+this.meta.nid, this.vid);
+  }
+  applyKey(pi) {
+    if (pi === null)
+      return null;
+    const m = this.meta;
+    if (m.si !== undefined)
+      return pi.withIndex(+m.si);
+    if (m.sk !== undefined)
+      return pi.withKey(m.sk);
+    return pi;
+  }
+}
+function resolvePathStep(comp, nodeIds, vid) {
+  for (let i = 0;i < nodeIds.length; i++) {
+    const ctx = new StepCtx(comp, nodeIds, i, vid);
+    const step = ctx.resolveNode().toPathStep(ctx);
+    if (step !== null)
+      return step;
+  }
+  return null;
+}
+var NO_EVENT_INFO = [null, null];
+var BUBBLING_EVENTS = new Set(["drop"]);
+
+class PathBuilder {
+  constructor() {
+    this.pathChanges = [];
+  }
+  add(pathChange) {
+    this.pathChanges.push(pathChange);
+    return this;
+  }
+  field(name) {
+    return this.add(new FieldStep(name));
+  }
+  index(name, index) {
+    return this.add(new SeqStep(name, index));
+  }
+  key(name, key) {
+    return this.add(new SeqStep(name, key));
+  }
+}
+
+// src/value.js
+var VALID_VAL_ID_RE = /^[a-zA-Z][a-zA-Z0-9_]*\??$/;
+var isValidValId = (name) => VALID_VAL_ID_RE.test(name);
+var VALID_FLOAT_RE = /^-?[0-9]+(\.[0-9]+)?$/;
+var STR_TPL_SPLIT_RE = /(\{[^}]+\})/g;
+var mkVal = (name, Cls) => isValidValId(name) ? new Cls(name) : null;
+var VAL_TOKEN_RE = /\$'(?:[^'\\]|\\.)*'|'(?:[^'\\]|\\.)*'|\S+/g;
+var tokenizeValue = (s) => s.match(VAL_TOKEN_RE) ?? [];
+var unescapeStr = (s) => s.replace(/\\(['\\])/g, "$1");
+var K_CONST = 1;
+var K_STRTPL = 2;
+var K_FIELD = 4;
+var K_BIND = 8;
+var K_DYN = 16;
+var K_NAME = 32;
+var K_TYPE = 64;
+var K_REQUEST = 128;
+var K_SEQ = 256;
+var K_STR = 512;
+var K_METHOD = 1024;
+var G_BOOL = K_FIELD | K_METHOD | K_BIND | K_DYN | K_CONST;
+var G_TEXT = G_BOOL | K_STRTPL;
+var G_COMPONENT = K_FIELD | K_SEQ | K_DYN;
+var G_SEQUENCE = K_FIELD | K_DYN;
+var G_FIELD = K_FIELD | K_METHOD | K_CONST | K_STR | K_SEQ;
+var G_VALUE = K_FIELD | K_METHOD | K_BIND | K_DYN | K_NAME | K_TYPE | K_REQUEST | K_CONST;
+var G_PRED_ARG = G_BOOL | K_STR;
+var G_HANDLER_ARG = G_VALUE | K_STR;
+var G_ALL = G_VALUE | K_STRTPL | K_SEQ;
+function sizeOf(v) {
+  if (v == null)
+    return null;
+  const s = v.size;
+  if (typeof s === "number")
+    return s;
+  const l = v.length;
+  return typeof l === "number" ? l : null;
+}
+var predTruthy = (v) => {
+  const n = sizeOf(v);
+  return n === null ? !!v : n > 0;
+};
+var PREDICATES = {
+  "empty?": { name: "empty?", arity: 1, fn: (v) => v == null || sizeOf(v) === 0 },
+  "truthy?": { name: "truthy?", arity: 1, fn: predTruthy },
+  "falsy?": { name: "falsy?", arity: 1, fn: (v) => !predTruthy(v) },
+  "null?": { name: "null?", arity: 1, fn: (v) => v == null },
+  "equals?": { name: "equals?", arity: 2, fn: (a, b) => is(a, b) }
+};
+
+class ValParser {
+  constructor() {
+    this.bindValIt = new BindVal("it");
+    this.nullConstVal = new ConstVal(null);
+  }
+  const(v) {
+    return new ConstVal(v);
+  }
+  parseToken(s, px) {
+    const c0 = s.charCodeAt(0);
+    if (c0 === 39)
+      return s.length >= 2 && s.charCodeAt(s.length - 1) === 39 ? new ConstVal(unescapeStr(s.slice(1, -1)), K_STR | K_STRTPL) : null;
+    if (c0 === 36 && s.charCodeAt(1) === 39)
+      return s.length >= 3 && s.charCodeAt(s.length - 1) === 39 ? StrTplVal.parse(s.slice(2, -1), px) : null;
+    if (s.indexOf("[") !== -1 || s.indexOf("]") !== -1)
+      return this._parseSeqAccess(s, px);
+    if (s.indexOf("{") !== -1 || s.indexOf("}") !== -1)
+      return null;
+    switch (c0) {
+      case 94: {
+        const name = s.slice(1);
+        const newS = px.frame.macroVars?.[name];
+        if (newS !== undefined) {
+          const tokens = tokenizeValue(newS.trim());
+          if (tokens.length !== 1)
+            return null;
+          const val = this.parseToken(tokens[0], px);
+          if (val instanceof ConstVal)
+            val.fromMacroVar = true;
+          return val;
+        }
+        px.onParseIssue("bad-value", { role: "macro-var", name, value: s });
+        return null;
+      }
+      case 36:
+        return mkVal(s.slice(1), MethodVal);
+      case 64:
+        return mkVal(s.slice(1), BindVal);
+      case 42:
+        return mkVal(s.slice(1), DynVal);
+      case 46:
+        return mkVal(s.slice(1), FieldVal);
+      case 33:
+        return mkVal(s.slice(1), RequestVal);
+    }
+    const num = VALID_FLOAT_RE.test(s) ? parseFloat(s) : null;
+    if (Number.isFinite(num))
+      return new ConstVal(num);
+    if (s === "true" || s === "false")
+      return new ConstVal(s === "true");
+    if (c0 >= 97 && c0 <= 122)
+      return mkVal(s, NameVal);
+    if (c0 >= 65 && c0 <= 90)
+      return mkVal(s, TypeVal);
+    return null;
+  }
+  _parseSeqAccess(s, px) {
+    const open = s.indexOf("[");
+    const close = s.indexOf("]");
+    if (open < 1 || close !== s.length - 1 || close < open || s.indexOf("[", open + 1) !== -1)
+      return null;
+    const left = this.parseToken(s.slice(0, open), px);
+    const right = this.parseToken(s.slice(open + 1, close), px);
+    return left instanceof FieldVal && right instanceof FieldVal ? new SeqAccessVal(left, right) : null;
+  }
+  _parseSingle(s, px, group) {
+    const tokens = tokenizeValue(s.trim());
+    if (tokens.length !== 1)
+      return null;
+    const val = this.parseToken(tokens[0], px);
+    return val !== null && kindOf(val) & group ? val : null;
+  }
+  parseBool(s, px) {
+    const t = s.trim();
+    const tokens = tokenizeValue(t);
+    if (tokens.length !== 1)
+      return tokens.length === 0 ? null : this._parsePredicate(t, tokens, px);
+    const val = this.parseToken(tokens[0], px);
+    return val !== null && kindOf(val) & G_BOOL ? val : null;
+  }
+  parseText(s, px) {
+    return this._parseSingle(s, px, G_TEXT);
+  }
+  parseComponent(s, px) {
+    return this._parseSingle(s, px, G_COMPONENT);
+  }
+  parseSequence(s, px) {
+    return this._parseSingle(s, px, G_SEQUENCE);
+  }
+  parseField(s, px) {
+    return this._parseSingle(s, px, G_FIELD);
+  }
+  parseHandlerArg(s, px) {
+    return this._parseSingle(s, px, G_HANDLER_ARG);
+  }
+  parseMacroAttr(s, px) {
+    return this._parseSingle(s, px, G_ALL);
+  }
+  parseInputHandler(s, px) {
+    return this._parseHandler(s, px, "input", true, true);
+  }
+  parseAlterHandler(s, px) {
+    const r = this._parseHandler(s, px, "alter", false, false);
+    return r === null ? null : r.handlerVal;
+  }
+  _parseHandler(s, px, namespace, allowArgs, report) {
+    const tokens = tokenizeValue(s.trim());
+    const headTok = tokens[0] ?? "";
+    const head = headTok === "" ? null : this.parseToken(headTok, px);
+    const hk = kindOf(head);
+    let handlerVal;
+    if (hk & K_METHOD)
+      handlerVal = head;
+    else if (hk & K_NAME)
+      handlerVal = new HandlerNameVal(head.name, namespace);
+    else {
+      if (report)
+        px.onParseIssue("bad-value", { role: "handler-name", value: headTok });
+      return null;
+    }
+    if (!allowArgs)
+      return tokens.length === 1 ? { handlerVal, args: [] } : null;
+    const args = new Array(tokens.length - 1);
+    for (let i = 1;i < tokens.length; i++) {
+      const val = this.parseToken(tokens[i], px);
+      if (val !== null && kindOf(val) & G_HANDLER_ARG)
+        args[i - 1] = val;
+      else {
+        if (report)
+          px.onParseIssue("bad-value", { role: "handler-arg", value: tokens[i] });
+        args[i - 1] = this.nullConstVal;
+      }
+    }
+    return { handlerVal, args };
+  }
+  _parsePredicate(s, tokens, px) {
+    const predName = tokens[0];
+    const pred = PREDICATES[predName];
+    if (pred === undefined) {
+      px.onParseIssue("bad-value", { role: "predicate", value: predName });
+      return null;
+    }
+    const arity = tokens.length - 1;
+    if (arity !== pred.arity) {
+      px.onParseIssue("bad-value", { role: "predicate-arity", value: s, predicate: predName });
+      return null;
+    }
+    const args = new Array(arity);
+    for (let i = 0;i < arity; i++) {
+      const tok = tokens[i + 1];
+      const val = this.parseToken(tok, px);
+      if (val === null || !(kindOf(val) & G_PRED_ARG)) {
+        px.onParseIssue("bad-value", { role: "predicate-arg", value: tok });
+        return null;
+      }
+      args[i] = val;
+    }
+    return new PredicateVal(pred, args);
+  }
+}
+function kindOf(val) {
+  if (val === null)
+    return 0;
+  if (val instanceof ConstVal)
+    return val.kind;
+  if (val instanceof StrTplVal)
+    return K_STRTPL;
+  if (val instanceof SeqAccessVal)
+    return K_SEQ;
+  if (val instanceof FieldVal)
+    return K_FIELD;
+  if (val instanceof MethodVal)
+    return K_METHOD;
+  if (val instanceof BindVal)
+    return K_BIND;
+  if (val instanceof DynVal)
+    return K_DYN;
+  if (val instanceof RequestVal)
+    return K_REQUEST;
+  if (val instanceof TypeVal)
+    return K_TYPE;
+  if (val instanceof NameVal)
+    return K_NAME;
+  return 0;
+}
+
+class BaseVal {
+  render(_stack, _rx) {}
+  eval(_stack) {}
+  toPathItem() {
+    return null;
+  }
+  evalAsHandler(stack) {
+    return this.eval(stack);
+  }
+}
+
+class ConstVal extends BaseVal {
+  constructor(val, kind = K_CONST) {
+    super();
+    this.val = val;
+    this.kind = kind;
+  }
+  render(_stack, _rx) {
+    return this.val;
+  }
+  eval(_stack) {
+    return this.val;
+  }
+  toString() {
+    const v = this.val;
+    return typeof v === "string" ? `'${v.replace(/(['\\])/g, "\\$1")}'` : `${v}`;
+  }
+}
+
+class PredicateVal extends BaseVal {
+  constructor(pred, args) {
+    super();
+    this.pred = pred;
+    this.args = args;
+  }
+  eval(stack) {
+    const n = this.args.length;
+    const vals = new Array(n);
+    for (let i = 0;i < n; i++)
+      vals[i] = this.args[i].eval(stack);
+    return this.pred.fn(...vals);
+  }
+  toString() {
+    return `${this.pred.name} ${this.args.map(String).join(" ")}`;
+  }
+}
+
+class VarVal extends BaseVal {
+}
+
+class StrTplVal extends VarVal {
+  constructor(vals) {
+    super();
+    this.vals = vals;
+  }
+  render(stack, _rx) {
+    return this.eval(stack);
+  }
+  eval(stack) {
+    const strs = new Array(this.vals.length);
+    for (let i = 0;i < this.vals.length; i++)
+      strs[i] = this.vals[i]?.eval(stack, "");
+    return strs.join("");
+  }
+  toLiteralSource() {
+    let out = "";
+    for (const v of this.vals) {
+      if (!(v instanceof ConstVal) || v.fromMacroVar)
+        return null;
+      out += v.val;
+    }
+    return new ConstVal(out).toString();
+  }
+  static parse(s, px) {
+    const parts = unescapeStr(s).split(STR_TPL_SPLIT_RE);
+    const vals = new Array(parts.length);
+    for (let i = 0;i < parts.length; i++) {
+      const part = parts[i];
+      const isExpr = part[0] === "{" && part.at(-1) === "}";
+      vals[i] = isExpr ? vp.parseText(part.slice(1, -1), px) : new ConstVal(part);
+    }
+    let lo = 0;
+    let hi = vals.length;
+    const isTrimmable = (v) => v instanceof ConstVal && v.val === "" && !v.fromMacroVar;
+    while (lo < hi && isTrimmable(vals[lo]))
+      lo++;
+    while (hi > lo && isTrimmable(vals[hi - 1]))
+      hi--;
+    return new StrTplVal(lo === 0 && hi === vals.length ? vals : vals.slice(lo, hi));
+  }
+}
+
+class NameVal extends VarVal {
+  constructor(name) {
+    super();
+    this.name = name;
+  }
+  eval(stack) {
+    return stack.lookupName(this.name);
+  }
+  toString() {
+    return this.name;
+  }
+}
+
+class HandlerNameVal extends NameVal {
+  constructor(name, namespace) {
+    super(name);
+    this.namespace = namespace;
+  }
+  eval(stack) {
+    return stack.getHandlerFor(this.name, this.namespace) ?? mk404Handler(this.namespace, this.name);
+  }
+}
+var mk404Handler = (type, name) => function(...args) {
+  console.warn("handler not found", { type, name, args }, this);
+  return this;
+};
+
+class TypeVal extends NameVal {
+  eval(stack) {
+    return stack.lookupType(this.name);
+  }
+}
+
+class RequestVal extends NameVal {
+  eval(stack) {
+    return stack.lookupRequest(this.name);
+  }
+  toString() {
+    return `!${this.name}`;
+  }
+}
+
+class RenderVal extends BaseVal {
+  render(stack, _rx) {
+    return this.eval(stack);
+  }
+}
+
+class RenderNameVal extends RenderVal {
+  constructor(name) {
+    super();
+    this.name = name;
+  }
+}
+
+class BindVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupBind(this.name);
+  }
+  toString() {
+    return `@${this.name}`;
+  }
+}
+
+class DynVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupDynamic(this.name);
+  }
+  toPathItem() {
+    return null;
+  }
+  toString() {
+    return `*${this.name}`;
+  }
+}
+
+class FieldVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupFieldRaw(this.name);
+  }
+  toPathItem() {
+    return new FieldStep(this.name);
+  }
+  toString() {
+    return `.${this.name}`;
+  }
+}
+
+class MethodVal extends RenderNameVal {
+  eval(stack) {
+    return stack.lookupMethod(this.name);
+  }
+  evalAsHandler(stack) {
+    return stack.lookupFieldRaw(this.name);
+  }
+  toString() {
+    return `$${this.name}`;
+  }
+}
+
+class SeqAccessVal extends RenderVal {
+  constructor(seqVal, keyVal) {
+    super();
+    this.seqVal = seqVal;
+    this.keyVal = keyVal;
+  }
+  toPathItem() {
+    return new SeqAccessStep(this.seqVal.name, this.keyVal.name);
+  }
+  eval(stack) {
+    const key = this.keyVal.eval(stack);
+    return this.seqVal.eval(stack)?.get(key, null);
+  }
+  toString() {
+    return `${this.seqVal}[${this.keyVal}]`;
+  }
+}
+var vp = new ValParser;
+
+// src/attribute.js
+class Attributes {
+  constructor(items) {
+    this.items = items;
+  }
+  eval(_stack) {
+    return {};
+  }
+  static parse(attributes, px, parseAll = false) {
+    return getAttrParser(px).parse(attributes, parseAll);
+  }
+  isConstant() {
+    return false;
+  }
+}
+var booleanAttrsRaw = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected";
+var booleanAttrs = new Set(booleanAttrsRaw.split(","));
+
+class AttrParser {
+  constructor(px) {
+    this.clear(px);
+  }
+  clear(px) {
+    this.px = px;
+    this.attrs = null;
+    this.hasDynamic = false;
+    this.wrapperAttrs = null;
+    this.textChild = null;
+    this.eachAttr = null;
+    this.ifAttr = null;
+    this.events = null;
+  }
+  parseAttr(name, value, parseAll = false) {
+    const val = parseAll ? vp.parseMacroAttr(value, this.px) : vp.parseText(value, this.px);
+    if (val !== null) {
+      this.attrs ??= [];
+      this.attrs.push(new Attr(name, val));
+      this.hasDynamic ||= !(val instanceof ConstVal);
+    } else
+      this.px.onParseIssue("bad-value", { role: "attr", attr: name, value });
+  }
+  pushWrapper(name, raw, val) {
+    const node = { name, val, raw };
+    this.wrapperAttrs ??= [];
+    this.wrapperAttrs.push(node);
+    return node;
+  }
+  parseIf(directiveName, value) {
+    const dynVal = vp.parseBool(value, this.px);
+    if (dynVal) {
+      this.ifAttr = new IfAttr(directiveName.slice(3), dynVal);
+      this.attrs ??= [];
+      this.attrs.push(this.ifAttr);
+      this.hasDynamic = true;
+    } else {
+      const info = { role: "if", attr: directiveName.slice(3), value };
+      this.px.onParseIssue("bad-value", info);
+    }
+  }
+  parseThen(s) {
+    if (this.ifAttr)
+      this.ifAttr.thenVal = vp.parseText(s, this.px) ?? NOT_SET_VAL;
+  }
+  parseElse(value) {
+    if (this.ifAttr)
+      this.ifAttr.elseVal = vp.parseText(value, this.px) ?? NOT_SET_VAL;
+  }
+  parseEvent(directiveName, value) {
+    const [eventName, ...modifiers] = directiveName.slice(3).split("+");
+    const handler = EventHandler.parse(value, this.px);
+    if (handler) {
+      if (this.events === null) {
+        this.events = this.px.registerEvents();
+        this.attrs ??= [];
+        this.attrs.push(new ConstAttr("data-eid", vp.const(this.events.id)));
+      }
+      this.events.add(eventName, handler, modifiers);
+    }
+  }
+  _parseDirectiveValue(directiveName, s, parserFn) {
+    const val = parserFn.call(vp, s, this.px);
+    if (val === null) {
+      const info = { role: "directive", directive: directiveName, value: s };
+      this.px.onParseIssue("bad-value", info);
+    }
+    return val;
+  }
+  parseDirective(s, directiveName) {
+    switch (directiveName) {
+      case "dangerouslysetinnerhtml":
+        this.attrs ??= [];
+        this.attrs.push(new RawHtmlAttr(this._parseDirectiveValue(directiveName, s, vp.parseText)));
+        this.hasDynamic = true;
+        return;
+      case "slot":
+        this.pushWrapper("slot", s, vp.const(s));
+        return;
+      case "push-view":
+        this.pushWrapper("push-view", s, this._parseDirectiveValue(directiveName, s, vp.parseText));
+        return;
+      case "text":
+        this.textChild = this._parseDirectiveValue(directiveName, s, vp.parseText);
+        return;
+      case "show":
+        this.pushWrapper("show", s, this._parseDirectiveValue(directiveName, s, vp.parseBool));
+        return;
+      case "hide":
+        this.pushWrapper("hide", s, this._parseDirectiveValue(directiveName, s, vp.parseBool));
+        return;
+      case "each": {
+        const val = this._parseDirectiveValue(directiveName, s, vp.parseSequence);
+        this.eachAttr = this.pushWrapper("each", s, val);
+        return;
+      }
+      case "enrich-with":
+        if (this.eachAttr !== null)
+          this.eachAttr.enrichWithVal = this._parseDirectiveValue(directiveName, s, vp.parseAlterHandler);
+        else
+          this.pushWrapper("scope", s, this._parseDirectiveValue(directiveName, s, vp.parseAlterHandler));
+        return;
+      case "when":
+        this._parseWhen(s);
+        return;
+      case "loop-with":
+        this._parseLoopWith(s);
+        return;
+      case "then":
+        this.parseThen(s);
+        return;
+      case "else":
+        this.parseElse(s);
+        return;
+    }
+    if (directiveName.startsWith("on."))
+      this.parseEvent(directiveName, s);
+    else if (directiveName.startsWith("if."))
+      this.parseIf(directiveName, s);
+    else if (directiveName.startsWith("then."))
+      this.parseThen(s);
+    else if (directiveName.startsWith("else."))
+      this.parseElse(s);
+    else {
+      const info = { name: directiveName, value: s };
+      this.px.onParseIssue("unknown-directive", info);
+    }
+  }
+  _parseWhen(s) {
+    if (this.eachAttr !== null)
+      this.eachAttr.whenVal = this._parseDirectiveValue("when", s, vp.parseAlterHandler);
+  }
+  _parseLoopWith(s) {
+    if (this.eachAttr !== null)
+      this.eachAttr.loopWithVal = this._parseDirectiveValue("loop-with", s, vp.parseAlterHandler);
+  }
+  parse(attributes, parseAll = false) {
+    for (const { name, value } of attributes) {
+      const charCode = name.charCodeAt(0);
+      if (charCode === 58)
+        this.parseAttr(name === ":viewbox" ? "viewBox" : name.slice(1), value, parseAll);
+      else if (charCode === 64)
+        this.parseDirective(value, name.slice(1));
+      else {
+        this.attrs ??= [];
+        const constVal = value === "" && booleanAttrs.has(name) ? true : value;
+        this.attrs.push(new ConstAttr(name, vp.const(constVal)));
+      }
+    }
+    const { attrs, hasDynamic } = this;
+    const pAttrs = hasDynamic ? new DynAttrs(attrs) : ConstAttrs.fromAttrs(attrs ?? []);
+    return [pAttrs, this.wrapperAttrs, this.textChild];
+  }
+}
+
+class ConstAttrs extends Attributes {
+  eval(_stack) {
+    return this.items;
+  }
+  static fromAttrs(attrs) {
+    const attrsObj = {};
+    for (const attr of attrs)
+      attrsObj[attr.name] = attr.val.eval(null);
+    return new ConstAttrs(attrsObj);
+  }
+  setDataAttr(key, val) {
+    this.items[key] = val;
+  }
+  toMacroVars() {
+    const r = {};
+    for (const name in this.items)
+      r[name] = `'${this.items[name]}'`;
+    return r;
+  }
+  isConstant() {
+    return true;
+  }
+}
+
+class DynAttrs extends Attributes {
+  eval(stack) {
+    const attrs = {};
+    for (let i = 0;i < this.items.length; i++) {
+      const attr = this.items[i];
+      attrs[attr.name] = attr.eval(stack);
+    }
+    return attrs;
+  }
+  setDataAttr(key, val) {
+    this.items.push(new ConstAttr(key, new ConstVal(val)));
+  }
+  toMacroVars() {
+    const r = {};
+    for (const attr of this.items)
+      r[attr.name] = attr.val.toString();
+    return r;
+  }
+}
+
+class BaseAttr {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+class Attr extends BaseAttr {
+  constructor(name, val) {
+    super(name);
+    this.val = val;
+  }
+  eval(stack) {
+    return this.val.eval(stack);
+  }
+}
+
+class ConstAttr extends Attr {
+}
+
+class RawHtmlAttr extends Attr {
+  constructor(val) {
+    super("dangerouslySetInnerHTML", val ?? vp.nullConstVal);
+  }
+  eval(stack) {
+    return { __html: `${this.val.eval(stack)}` };
+  }
+}
+var NOT_SET_VAL = vp.nullConstVal;
+
+class IfAttr extends BaseAttr {
+  constructor(name, condVal) {
+    super(name);
+    this.condVal = condVal;
+    this.thenVal = this.elseVal = NOT_SET_VAL;
+  }
+  get anyBranchIsSet() {
+    return this.thenVal !== NOT_SET_VAL || this.elseVal !== NOT_SET_VAL;
+  }
+  eval(stack) {
+    return this.condVal.eval(stack) ? this.thenVal.eval(stack) : this.elseVal.eval(stack);
+  }
+}
+var _attrParser = null;
+function getAttrParser(px) {
+  _attrParser ??= new AttrParser(px);
+  _attrParser.clear(px);
+  return _attrParser;
+}
+
+class EventHandler {
+  constructor(handlerVal, args = []) {
+    this.handlerVal = handlerVal;
+    this.args = args;
+  }
+  getHandlerAndArgs(stack, _event) {
+    const argValues = new Array(this.args.length);
+    for (let i = 0;i < argValues.length; i++)
+      argValues[i] = this.args[i].eval(stack);
+    return [this.handlerVal.evalAsHandler(stack), argValues];
+  }
+  static parse(s, px) {
+    const r = vp.parseInputHandler(s, px);
+    return r === null ? null : new EventHandler(r.handlerVal, r.args);
+  }
+}
+
+class RequestHandler {
+  constructor(name, fn) {
+    this.name = name;
+    this.fn = fn;
+  }
+  toHandlerArg(disp) {
+    const f = (...args) => disp.request(this.name, args);
+    f.withOpts = (...args) => disp.request(this.name, args.slice(0, -1), args.at(-1));
+    return f;
+  }
+}
+
+// src/vdom.js
+var HTML_NS = "http://www.w3.org/1999/xhtml";
+var isNamespaced = (node) => {
+  const ns = node.namespaceURI;
+  return ns !== null && ns !== HTML_NS;
+};
+var NEVER_ASSIGN = new Set([
+  "width",
+  "height",
+  "href",
+  "list",
+  "form",
+  "tabIndex",
+  "download",
+  "rowSpan",
+  "colSpan",
+  "role",
+  "popover"
+]);
+function applyProperties(node, props, _previous) {
+  const namespaced = isNamespaced(node);
+  for (const name in props)
+    setProp(node, name, props[name], namespaced);
+}
+function setProp(node, name, value, namespaced) {
+  if (name === "dangerouslySetInnerHTML") {
+    if (value === undefined)
+      node.replaceChildren();
+    else
+      node.innerHTML = value.__html ?? "";
+    return;
+  }
+  if (typeof value === "function")
+    return;
+  if (!namespaced && !NEVER_ASSIGN.has(name) && name in node) {
+    try {
+      node[name] = value == null ? "" : value;
+      return;
+    } catch {}
+  }
+  if (value == null || value === false && name[4] !== "-")
+    node.removeAttribute(name);
+  else
+    node.setAttribute(name, value);
+}
+
+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);
+  }
+  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;
+    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;
+  }
+  isSameKind(other) {
+    return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+  }
+  isEqualTo(other) {
+    if (this === other)
+      return true;
+    if (!(other instanceof VNode) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
+      return false;
+    }
+    if (this.attrs !== other.attrs) {
+      for (const key in this.attrs)
+        if (this.attrs[key] !== other.attrs[key])
+          return false;
+      for (const key in other.attrs)
+        if (!Object.hasOwn(this.attrs, key))
+          return false;
+    }
+    return childsEqual(this.childs, other.childs);
+  }
+  toDom(opts) {
+    const doc = opts.document;
+    const node = this.namespace === null ? doc.createElement(this.tag) : doc.createElementNS(this.namespace, this.tag);
+    if (this.tag === "SELECT" && "value" in this.attrs) {
+      const { value, ...rest } = this.attrs;
+      applyProperties(node, rest, {});
+      appendChildNodes(node, this.childs, opts);
+      applyProperties(node, { value }, {});
+    } else {
+      applyProperties(node, this.attrs, {});
+      appendChildNodes(node, this.childs, opts);
+    }
+    return node;
+  }
+}
+function diffProps(a, b) {
+  if (a === b)
+    return null;
+  let diff = null;
+  for (const aKey in a) {
+    if (!Object.hasOwn(b, aKey)) {
+      diff ??= {};
+      diff[aKey] = undefined;
+    } else if (a[aKey] !== b[aKey]) {
+      diff ??= {};
+      diff[aKey] = b[aKey];
+    }
+  }
+  for (const bKey in b) {
+    if (!Object.hasOwn(a, bKey)) {
+      diff ??= {};
+      diff[bKey] = b[bKey];
+    }
+  }
+  return diff;
+}
+function morphNode(domNode, source, target, opts) {
+  if (source === target || source.isEqualTo(target))
+    return domNode;
+  const type = source.nodeType;
+  if (type === target.nodeType) {
+    if (type === 3 || type === 8) {
+      domNode.data = target.text;
+      return domNode;
+    }
+    if (type === 1 && source.isSameKind(target)) {
+      const propsDiff = diffProps(source.attrs, target.attrs);
+      const isSelect = source.tag === "SELECT";
+      if (propsDiff) {
+        if (isSelect && "value" in propsDiff) {
+          const { value: _v, ...rest } = propsDiff;
+          applyProperties(domNode, rest, source.attrs);
+        } else
+          applyProperties(domNode, propsDiff, source.attrs);
+      }
+      if (!target.attrs.dangerouslySetInnerHTML)
+        morphChildren(domNode, source.childs, target.childs, opts);
+      if (isSelect && target.attrs.value !== undefined)
+        applyProperties(domNode, { value: target.attrs.value }, source.attrs);
+      return domNode;
+    }
+    if (type === 11) {
+      morphChildren(domNode, source.childs, target.childs, opts);
+      return domNode;
+    }
+  }
+  const newNode = target.toDom(opts);
+  domNode.parentNode?.replaceChild(newNode, domNode);
+  return newNode;
+}
+function morphChildren(parentDom, oldChilds, newChilds, opts) {
+  if (oldChilds.length === 0) {
+    appendChildNodes(parentDom, newChilds, opts);
+    return;
+  }
+  if (newChilds.length === 0) {
+    parentDom.replaceChildren();
+    return;
+  }
+  if (oldChilds.length === newChilds.length) {
+    let hasKey = false;
+    for (let i = 0;i < oldChilds.length; i++) {
+      if (getKey(oldChilds[i]) != null || getKey(newChilds[i]) != null) {
+        hasKey = true;
+        break;
+      }
+    }
+    if (!hasKey) {
+      let dom = parentDom.firstChild;
+      for (let i = 0;i < oldChilds.length; i++) {
+        const next = dom.nextSibling;
+        morphNode(dom, oldChilds[i], newChilds[i], opts);
+        dom = next;
+      }
+      return;
+    }
+  }
+  const domNodes = Array.from(parentDom.childNodes);
+  const oldKeyMap = Object.create(null);
+  for (let i = 0;i < oldChilds.length; i++) {
+    const key = getKey(oldChilds[i]);
+    if (key != null)
+      oldKeyMap[key] = i;
+  }
+  const used = new Uint8Array(oldChilds.length);
+  let unkeyedCursor = 0;
+  for (let j = 0;j < newChilds.length; j++) {
+    const newChild = newChilds[j];
+    const newKey = getKey(newChild);
+    let oldIdx = -1;
+    if (newKey != null) {
+      if (newKey in oldKeyMap && !used[oldKeyMap[newKey]])
+        oldIdx = oldKeyMap[newKey];
+    } else {
+      while (unkeyedCursor < oldChilds.length) {
+        if (!used[unkeyedCursor] && getKey(oldChilds[unkeyedCursor]) == null) {
+          oldIdx = unkeyedCursor++;
+          break;
+        }
+        unkeyedCursor++;
+      }
+    }
+    if (oldIdx >= 0) {
+      used[oldIdx] = 1;
+      const newDom = morphNode(domNodes[oldIdx], oldChilds[oldIdx], newChild, opts);
+      const ref = parentDom.childNodes[j] ?? null;
+      if (newDom !== ref)
+        parentDom.insertBefore(newDom, ref);
+    } else {
+      const ref = parentDom.childNodes[j] ?? null;
+      parentDom.insertBefore(newChild.toDom(opts), ref);
+    }
+  }
+  for (let i = oldChilds.length - 1;i >= 0; i--)
+    if (!used[i] && domNodes[i].parentNode === parentDom)
+      parentDom.removeChild(domNodes[i]);
+}
+function render(vnode, container, options, prev) {
+  const isFragment = vnode instanceof VFragment;
+  if (prev && prev.vnode instanceof VFragment === isFragment) {
+    const oldDom = isFragment ? container : prev.dom;
+    const newDom = morphNode(oldDom, prev.vnode, vnode, options);
+    return { vnode, dom: isFragment ? container : newDom };
+  }
+  const domNode = vnode.toDom(options);
+  container.replaceChildren(domNode);
+  return { vnode, dom: isFragment ? container : domNode };
+}
+function h(tagName, properties, children, namespace) {
+  const props = {};
+  let key;
+  if (properties) {
+    for (const propName in properties) {
+      const propVal = properties[propName];
+      if (propName === "key")
+        key = propVal;
+      else if (propName === "namespace")
+        namespace = namespace ?? propVal;
+      else
+        props[propName] = propVal;
+    }
+  }
+  const c = tagName.charCodeAt(0);
+  const tag = namespace == null && c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
+  const normalizedChildren = [];
+  addChild(normalizedChildren, children);
+  return new VNode(tag, props, normalizedChildren, key, namespace);
+}
+
+// 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() {}
+}
+
+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) {}
+}
+
+class CommentNode extends TextNode {
+  render(_stack, rx) {
+    return rx.renderComment(this.val);
+  }
+}
+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;
+}
+
+class ChildsNode extends BaseNode {
+  constructor(childs) {
+    super();
+    this.childs = childs;
+  }
+  isConstant() {
+    return this.childs.every((v) => v.isConstant());
+  }
+  optimize() {
+    optimizeChilds(this.childs);
+  }
+}
+
+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();
+  }
+}
+
+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);
+  }
+}
+var maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs);
+var VALID_NODE_RE = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+
+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;
+    }
+  }
+}
+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 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);
+  }
+}
+
+class Macro {
+  constructor(defaults, rawView) {
+    this.defaults = defaults;
+    this.rawView = rawView;
+  }
+  expand(px) {
+    return ANode.parse(this.rawView, px);
+  }
+}
+
+class RenderViewId extends ANode {
+  constructor(nodeId, val, viewId) {
+    super(nodeId, val);
+    this.viewId = viewId;
+  }
+  setDataAttr(_key, _val) {}
+}
+
+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);
+  }
+}
+
+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;
+  }
+}
+
+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;
+  }
+}
+
+class RenderTextNode extends ANode {
+  render(stack, _rx) {
+    return this.val.eval(stack);
+  }
+  setDataAttr(_key, _val) {}
+}
+
+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);
+  }
+}
+
+class WrapperNode extends ANode {
+  constructor(nodeId, val, node = null) {
+    super(nodeId, val);
+    this.node = node;
+  }
+  wrapNode(node) {
+    this.node = node;
+  }
+  setDataAttr(key, val) {
+    this.node.setDataAttr(key, val);
+  }
+  optimize() {
+    this.node = optimizeNode(this.node);
+  }
+  static register = false;
+}
+
+class ShowNode extends WrapperNode {
+  render(stack, rx) {
+    return this.val.eval(stack) ? this.node.render(stack, rx) : null;
+  }
+}
+
+class HideNode extends WrapperNode {
+  render(stack, rx) {
+    return this.val.eval(stack) ? null : this.node.render(stack, rx);
+  }
+}
+
+class PushViewNameNode extends WrapperNode {
+  render(stack, rx) {
+    return this.node.render(stack.pushViewName(this.val.eval(stack)), rx);
+  }
+}
+
+class SlotNode extends WrapperNode {
+  optimize() {
+    this.node.optimize();
+  }
+}
+
+class ScopeNode extends WrapperNode {
+  render(stack, rx) {
+    const binds = this.val.evalAsHandler(stack)?.call(stack.it) ?? {};
+    return this.node.render(stack.enter(stack.it, binds, false), rx);
+  }
+  toPathStep(_ctx) {
+    return new BindStep({});
+  }
+  wrapNode(node) {
+    this.node = node;
+    this.node.setDataAttr("data-nid", this.nodeId);
+  }
+  static register = true;
+}
+
+class EachNode extends WrapperNode {
+  constructor(nodeId, val) {
+    super(nodeId, val);
+    this.iterInfo = new IterInfo(val, null, null, null);
+  }
+  render(stack, rx) {
+    return rx.renderEachWhen(stack, this.iterInfo, this.node, this.nodeId);
+  }
+  toPathStep(ctx) {
+    return ctx.hasKey ? new EachBindStep(this.val, ctx.key) : null;
+  }
+  static register = true;
+}
+
+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 };
+  }
+}
+var filterAlwaysTrue = (_v, _k, _seq) => true;
+var nullLoopWith = (seq) => ({ iterData: { seq } });
+var X_OP_CONSUMED = {
+  slot: new Set,
+  text: new Set,
+  render: new Set(["as"]),
+  "render-it": new Set(["as"]),
+  "render-each": new Set(["as", "when", "loop-with"]),
+  show: new Set,
+  hide: new Set
+};
+var X_OP_WRAPPABLE = new Set(["text", "render", "render-it", "render-each"]);
+var X_ATTR_WRAPPERS = { show: ShowNode, hide: HideNode };
+var WRAPPER_NODES = {
+  slot: SlotNode,
+  show: ShowNode,
+  hide: HideNode,
+  each: EachNode,
+  scope: ScopeNode,
+  "push-view": PushViewNameNode
+};
+
+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);
+  }
+}
+var _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";
+var HTML_BLOCK_TAGS = new Set(_htmlBlockTags.split(","));
+var isBlockDomNode = (n) => {
+  const node = n instanceof FragmentNode ? n.childs[0] : n;
+  return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
+};
+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 View {
+  constructor(name, rawView = "No View Defined", style = "", anode = null, ctx = null) {
+    this.name = name;
+    this.anode = anode;
+    this.style = style;
+    this.ctx = ctx;
+    this.rawView = rawView;
+  }
+  compile(ctx, scope, cid) {
+    this.ctx = ctx;
+    this.anode = ANode.parse(this.rawView, ctx);
+    this.anode.setDataAttr("data-cid", cid);
+    this.anode.setDataAttr("data-vid", this.name);
+    this.ctx.compile(scope);
+    if (ctx.cacheConstNodes)
+      this.anode = optimizeNode(this.anode);
+  }
+  render(stack, rx) {
+    return this.anode.render(stack, rx);
+  }
+}
+
+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;
+  }
+}
+var isMac = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
+var fwdIfCtxPred = (pred) => (w) => (that, f, args, ctx) => pred(ctx) ? w(that, f, args, ctx) : that;
+var fwdIfKey = (keyName) => fwdIfCtxPred((ctx) => ctx.e.key === keyName);
+var fwdCtrl = fwdIfCtxPred(({ e }) => isMac && e.metaKey || e.ctrlKey);
+var fwdMeta = fwdIfCtxPred(({ e }) => e.metaKey);
+var fwdAlt = fwdIfCtxPred(({ e }) => e.altKey);
+var metaWraps = { ctrl: fwdCtrl, cmd: fwdCtrl, meta: fwdMeta, alt: fwdAlt };
+var MOD_WRAPPERS_BY_EVENT = {
+  keydown: {
+    send: fwdIfKey("Enter"),
+    cancel: fwdIfKey("Escape"),
+    ...metaWraps
+  },
+  click: { ...metaWraps }
+};
+var identityModifierWrapper = (f, _ctx) => f;
+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);
+  };
+}
+
+// src/components.js
+class Components {
+  constructor() {
+    this.getComponentSymbol = Symbol("getComponent");
+    this.byId = new Map;
+  }
+  registerComponent(comp) {
+    comp.Class.prototype[this.getComponentSymbol] = () => comp;
+    this.byId.set(comp.id, comp);
+  }
+  getComponentForId(id) {
+    return this.byId.get(id) ?? null;
+  }
+  getCompFor(v) {
+    return v?.[this.getComponentSymbol]?.() ?? null;
+  }
+  getOnEnterFor(v) {
+    return this.getCompFor(v)?.on.stackEnter ?? defaultOnStackEnter;
+  }
+  getHandlerFor(v, name, key) {
+    return this.getCompFor(v)?.[key][name] ?? null;
+  }
+  getRequestFor(v, name) {
+    return this.getCompFor(v)?.scope.lookupRequest(name) ?? null;
+  }
+  compileStyles() {
+    const styles = [];
+    for (const comp of this.byId.values())
+      styles.push(comp.compileStyle());
+    return styles.join(`
+`);
+  }
+}
+
+class ComponentStack {
+  constructor(comps = new Components, parent = null) {
+    this.comps = comps;
+    this.parent = parent;
+    this.byName = {};
+    this.reqsByName = {};
+    this.macros = {};
+  }
+  enter() {
+    return new ComponentStack(this.comps, this);
+  }
+  registerComponents(comps, opts) {
+    const { aliases = {} } = opts ?? {};
+    for (let i = 0;i < comps.length; i++) {
+      const comp = comps[i];
+      comp.scope = this.enter();
+      this.comps.registerComponent(comp);
+      this.byName[comp.name] = comp;
+    }
+    for (const alias in aliases) {
+      const comp = this.byName[aliases[alias]];
+      console.assert(this.byName[alias] === undefined, "alias overrides component", alias);
+      if (comp !== undefined)
+        this.byName[alias] = comp;
+      else
+        console.warn("alias", alias, "to inexistent component", aliases[alias]);
+    }
+  }
+  registerMacros(macros) {
+    for (const key in macros) {
+      const lower = key.toLowerCase();
+      console.assert(this.macros[lower] === undefined, "macro key collision", lower);
+      this.macros[lower] = macros[key];
+    }
+  }
+  getCompFor(v) {
+    return this.comps.getCompFor(v);
+  }
+  registerRequestHandlers(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;
+  }
+  lookupComponent(name) {
+    return this.byName[name] ?? this.parent?.lookupComponent(name) ?? null;
+  }
+  lookupMacro(name) {
+    return this.macros[name] ?? this.parent?.lookupMacro(name) ?? null;
+  }
+}
+
+class Dynamic {
+  constructor(name, val, symbol) {
+    this.name = name;
+    this.val = val;
+    this.symbol = symbol;
+  }
+  getSymbol(_stack) {
+    return this.symbol;
+  }
+  evalAndBind(stack, binds) {
+    binds[this.getSymbol(stack)] = this.val.eval(stack);
+  }
+}
+
+class DynamicAlias extends Dynamic {
+  constructor(name, val, compName, dynName) {
+    super(name, val, null);
+    this.compName = compName;
+    this.dynName = dynName;
+  }
+  _resolveSymbol(stack) {
+    return stack.lookupType(this.compName)?.dynamic[this.dynName]?.symbol ?? null;
+  }
+  getSymbol(stack) {
+    this.symbol ??= this._resolveSymbol(stack);
+    return this.symbol;
+  }
+}
+var isString = (v) => typeof v === "string";
+var _rawSpecKeys = "name view style commonStyle globalStyle input receive bubble response alter on views dynamic fields methods statics";
+var KNOWN_SPEC_KEYS = new Set(_rawSpecKeys.split(" "));
+var _compId = 0;
+
+class Component {
+  constructor(Class, o) {
+    this.id = _compId++;
+    this.name = o.name ?? "UnkComp";
+    this.Class = Class;
+    this.views = { main: new View("main", o.view, o.style) };
+    this.commonStyle = o.commonStyle ?? "";
+    this.globalStyle = o.globalStyle ?? "";
+    this.input = o.input ?? {};
+    this.receive = o.receive ?? {};
+    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;
+    this.extra = {};
+    for (const key of Object.keys(o))
+      if (!KNOWN_SPEC_KEYS.has(key))
+        this.extra[key] = o[key];
+  }
+  compile(ParseContext2) {
+    for (const name in this.views)
+      this.views[name].compile(new ParseContext2, this.scope, this.id);
+    for (const key in this._rawDynamic) {
+      const dinfo = this._rawDynamic[key];
+      if (isString(dinfo)) {
+        const val = vp.parseField(dinfo, this.views.main.ctx);
+        this.dynamic[key] = new Dynamic(key, val, Symbol(key));
+      } else if (isString(dinfo?.default) && isString(dinfo?.for)) {
+        const val = vp.parseField(dinfo.default, this.views.main.ctx);
+        const [compName, dynName] = dinfo.for.split(".");
+        if (isString(compName) && isString(dynName))
+          this.dynamic[key] = new DynamicAlias(key, val, compName, dynName);
+      }
+    }
+  }
+  make(args, opts) {
+    return this.Class.make(args, opts ?? { scope: this.scope });
+  }
+  getView(name) {
+    return this.views[name] ?? this.views.main;
+  }
+  getEventForId(id, name = "main") {
+    return this.getView(name).ctx.getEventForId(id);
+  }
+  getNodeForId(id, name = "main") {
+    return this.getView(name).ctx.getNodeForId(id);
+  }
+  compileStyle() {
+    const { id, commonStyle, globalStyle, views } = this;
+    const styles = commonStyle ? [`[data-cid="${id}"]{${commonStyle}}`] : [];
+    if (globalStyle !== "")
+      styles.push(globalStyle);
+    for (const name in views) {
+      const { style } = views[name];
+      if (style !== "")
+        styles.push(`[data-cid="${id}"][data-vid="${name}"]{${style}}`);
+    }
+    return styles.join(`
+`);
+  }
+}
+function defaultOnStackEnter() {
+  return null;
+}
+
+// src/stack.js
+var STOP = Symbol("STOP");
+var NEXT = Symbol("NEXT");
+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 {
+  constructor(it, binds, isFrame) {
+    this.it = it;
+    this.binds = binds;
+    this.isFrame = isFrame;
+  }
+  lookup(name) {
+    const v = this.binds[name];
+    return v === undefined ? this.isFrame ? STOP : NEXT : v;
+  }
+}
+
+class ObjectFrame {
+  constructor(binds) {
+    this.binds = binds;
+  }
+  lookup(key) {
+    const v = this.binds[key];
+    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, viewsId, ctx = null) {
+    this.comps = comps;
+    this.it = it;
+    this.binds = binds;
+    this.dynBinds = dynBinds;
+    this.views = views;
+    this.viewsId = viewsId;
+    this.ctx = ctx;
+  }
+  _enrichOnEnter() {
+    return this.withDynamicBinds(this.comps.getOnEnterFor(this.it).call(this.it));
+  }
+  static root(comps, it, ctx) {
+    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, viewsId, ctx } = this;
+    const newBinds = [new BindFrame(it, bindings, isFrame), binds];
+    const stack = new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx);
+    return isFrame ? stack._enrichOnEnter() : stack;
+  }
+  pushViewName(name) {
+    const { comps, it, binds, dynBinds, views, ctx } = this;
+    const newViews = [name, views];
+    return new Stack(comps, it, binds, dynBinds, newViews, computeViewsId(newViews), ctx);
+  }
+  withDynamicBinds(dynamics) {
+    if (dynamics == null || dynamics.length === 0)
+      return this;
+    const dynObj = {};
+    const comp = this.comps.getCompFor(this.it);
+    for (const dynName of dynamics)
+      comp.dynamic[dynName].evalAndBind(this, dynObj);
+    const newDynBinds = [new ObjectFrame(dynObj), this.dynBinds];
+    const { comps, it, binds, views, viewsId, ctx } = this;
+    return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
+  }
+  _pushDynBindValuesToArray(arr, dyns) {
+    for (const k in dyns)
+      arr.push(this._lookupDynamicWithDynVal(dyns[k]));
+  }
+  _lookupDynamicWithDynVal(d) {
+    return lookup(this.dynBinds, d.getSymbol(this)) ?? d.val?.eval(this) ?? null;
+  }
+  lookupDynamic(name) {
+    const d = this.comps.getCompFor(this.it)?.dynamic[name];
+    return d ? this._lookupDynamicWithDynVal(d) : null;
+  }
+  lookupBind(name) {
+    return lookup(this.binds, name);
+  }
+  lookupType(name) {
+    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];
+  }
+}
+
+// src/transactor.js
+class State {
+  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 State(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 Stack.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;
+  }
+  lookupName(_name) {
+    return null;
+  }
+}
+var isMac2 = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
+var toNullIfNaN = (v) => Number.isNaN(v) ? null : v;
+function getValue(e) {
+  return e.target.type === "checkbox" ? e.target.checked : (e instanceof CustomEvent ? e.detail : e.target.value) ?? null;
+}
+
+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 Stack.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;
+  }
+}
+
+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)]];
+  }
+}
+
+class ResponseEvent extends NameArgsTransaction {
+  handlerProp = "response";
+}
+
+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);
+  }
+}
+
+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;
+  }
+}
+
+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);
+    }
+  }
+}
+
+class Dispatcher {
+  constructor(path, transactor, parentTransaction) {
+    this.path = path;
+    this.transactor = transactor;
+    this.parent = parentTransaction;
+  }
+  get at() {
+    return new PathChanges(this);
+  }
+  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);
+  }
+}
+
+class EventContext extends Dispatcher {
+  get name() {
+    return this.parent?.name ?? null;
+  }
+  get targetPath() {
+    return this.parent.targetPath;
+  }
+  stopPropagation() {
+    return this.parent.stopPropagation();
+  }
+}
+
+class PathChanges extends PathBuilder {
+  constructor(dispatcher) {
+    super();
+    this.dispatcher = dispatcher;
+  }
+  send(name, args, opts) {
+    return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
+  }
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
+  }
+  buildPath() {
+    return this.dispatcher.path.concat(this.pathChanges);
+  }
+}
+
+// src/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 };
+    this._renderState = null;
+  }
+  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" || type === "drop";
+    const { rootNode: root, maxEventNodeDepth: maxDepth, comps, transactor } = 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)
+        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 < 100)
+          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, Infinity);
+      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 txnPath = path.compact().toTransactionPath();
+      const value = txnPath.lookup(rootValue);
+      const dragType = e.target.dataset.dragtype ?? "?";
+      const stack = path.toTransactionPath().buildStack(this.makeStack(rootValue));
+      this.dragInfo = new DragInfo(txnPath, stack, e, value, dragType, e.target);
+    } else if (type === "drop") {
+      e.preventDefault();
+      this._cleanDragOverAttrs();
+    } 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;
+    }
+  }
+  render() {
+    const root = this.state.val;
+    const stack = this.makeStack(root);
+    const { renderer, rootNode, _renderOpts, _renderState } = this;
+    const newState = render(renderer.renderRoot(stack, root), rootNode, _renderOpts, _renderState);
+    this._renderState = newState;
+    return newState.dom;
+  }
+  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;
+  }
+  subscribeToEvents(eventNames) {
+    for (const name of eventNames)
+      this.rootNode.addEventListener(name, this, listenerOpts(name));
+  }
+  recompileStyles(opts) {
+    injectCss("tutuca-app", this.comps.compileStyles(), opts?.head ?? document.head);
+  }
+  start(opts) {
+    if (!this._compiled)
+      this.compile();
+    this.subscribeToEvents(this._eventNames);
+    this.onChange((info) => {
+      if (info.val !== info.old)
+        this.render();
+    });
+    this.recompileStyles(opts);
+    if (opts?.noCache)
+      this.renderer.setNullCache();
+    else
+      this.startCacheEvictionInterval();
+    this.render();
+  }
+  stop() {
+    this.stopCacheEvictionInterval();
+    for (const name of this._eventNames)
+      this.rootNode.removeEventListener(name, this, listenerOpts(name));
+  }
+  sendAtRoot(name, args, opts) {
+    this.transactor.pushSend(new Path([]), name, args, opts);
+  }
+  registerComponents(comps, opts) {
+    const scope = this.compStack.enter();
+    scope.registerComponents(comps, opts);
+    return scope;
+  }
+  _transactNextBatch(maxRunTimeMs = 10) {
+    this._transactNextBatchId = null;
+    const startTs = Date.now();
+    const t = this.transactor;
+    while (t.hasPendingTransactions && Date.now() - startTs < maxRunTimeMs)
+      t.transactNext();
+    if (t.hasPendingTransactions)
+      this._scheduleNextTransactionBatchExecution();
+  }
+  _scheduleNextTransactionBatchExecution() {
+    this._transactNextBatchId = setTimeout(() => this._transactNextBatch(), 0);
+  }
+  startCacheEvictionInterval(intervalMs = 30000) {
+    this._evictCacheId = setInterval(() => this.renderer.cache.evict(), intervalMs);
+  }
+  stopCacheEvictionInterval() {
+    clearInterval(this._evictCacheId);
+    this._evictCacheId = null;
+  }
+}
+function injectCss(nodeId, style, styleTarget = document.head) {
+  const styleNode = document.createElement("style");
+  const currentNodeWithId = styleTarget.querySelector(`#${nodeId}`);
+  if (currentNodeWithId)
+    styleTarget.removeChild(currentNodeWithId);
+  styleNode.id = nodeId;
+  styleNode.innerHTML = style;
+  styleTarget.appendChild(styleNode);
+}
+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)
+      return node;
+    node = node.parentNode;
+  }
+  return null;
+}
+
+class DragInfo {
+  constructor(path, stack, e, val, type, node) {
+    this.path = path;
+    this.stack = stack;
+    this.e = e;
+    this.val = val;
+    this.type = type;
+    this.node = node;
+  }
+  lookupBind(name) {
+    return this.stack.lookupBind(name);
+  }
+}
+
+// src/renderer.js
+import { isIndexed, isKeyed } from "immutable";
+
+// src/cache.js
+class NullDomCache {
+  get(_keys, _cacheKey) {}
+  set(_keys, _cacheKey, _v) {}
+  evict() {
+    return { hit: 0, miss: 0, badKey: 0 };
+  }
+}
+
+class WeakMapDomCache {
+  constructor() {
+    this.hit = this.miss = this.badKey = 0;
+    this.keysByLen = new Map;
+  }
+  _returnValue(r) {
+    if (r === undefined)
+      this.miss += 1;
+    else
+      this.hit += 1;
+    return r;
+  }
+  get(keys, cacheKey) {
+    const len = keys.length;
+    let cur = this.keysByLen.get(len);
+    if (!cur)
+      return this._returnValue(undefined);
+    for (let i = 0;i < len - 1; i++) {
+      cur = cur.get(keys[i]);
+      if (!cur)
+        return this._returnValue(undefined);
+    }
+    return this._returnValue(cur.get(keys[len - 1])?.[cacheKey]);
+  }
+  set(keys, cacheKey, v) {
+    const len = keys.length;
+    let cur = this.keysByLen.get(len);
+    if (!cur) {
+      cur = new WeakMap;
+      this.keysByLen.set(len, cur);
+    }
+    for (let i = 0;i < len - 1; i++) {
+      const key = keys[i];
+      let next = cur.get(key);
+      if (!next) {
+        if (typeof key !== "object") {
+          this.badKey += 1;
+          return;
+        }
+        next = new WeakMap;
+        cur.set(key, next);
+      }
+      cur = next;
+    }
+    const lastKey = keys[len - 1];
+    const leaf = cur.get(lastKey);
+    if (leaf)
+      leaf[cacheKey] = v;
+    else if (typeof lastKey === "object")
+      cur.set(lastKey, { [cacheKey]: v });
+    else
+      this.badKey += 1;
+  }
+  evict() {
+    const { hit, miss, badKey } = this;
+    this.hit = this.miss = this.badKey = 0;
+    this.keysByLen = new Map;
+    return { hit, miss, badKey };
+  }
+}
+
+// src/renderer.js
+var DATASET_ATTRS = ["nid", "cid", "eid", "vid", "si", "sk"];
+
+class Renderer {
+  constructor(comps) {
+    this.comps = comps;
+    this.cache = new WeakMapDomCache;
+    this.renderTag = h;
+  }
+  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");
+    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);
+    if (cleanAttrs) {
+      const nodes = dom.querySelectorAll("[data-nid],[data-cid],[data-eid]");
+      for (const { dataset } of nodes)
+        for (const name of DATASET_ATTRS)
+          delete dataset[name];
+    }
+    return dom.innerHTML;
+  }
+  renderRoot(stack, val, viewName = null) {
+    const comp = this.comps.getCompFor(val);
+    if (comp === null)
+      return null;
+    return this._rValComp(stack, val, comp, comp.getView(viewName).anode, "ROOT", viewName);
+  }
+  renderIt(stack, node, key, viewName) {
+    const comp = this.comps.getCompFor(stack.it);
+    return comp ? this._rValComp(stack, stack.it, comp, node, key, viewName) : null;
+  }
+  _rValComp(stack, val, comp, node, key, viewName) {
+    const cacheKey = `${viewName ?? stack.viewsId ?? ""}-${key}`;
+    const cachePath = [node, val];
+    stack._pushDynBindValuesToArray(cachePath, comp.dynamic);
+    const cachedNode = this.cache.get(cachePath, cacheKey);
+    if (cachedNode)
+      return cachedNode;
+    const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
+    const meta = this._renderMetadata({
+      $: "Comp",
+      nid: node?.nodeId ?? null,
+      cid: comp.id,
+      vid: view.name
+    });
+    const dom = new VFragment([meta, this.renderView(view, stack)]);
+    this.cache.set(cachePath, cacheKey, dom);
+    return dom;
+  }
+  pushEachEntry(r, nid, attrName, key, dom) {
+    r.push(this._renderMetadata({ $: "Each", nid, [attrName]: key }), dom);
+  }
+  renderEach(stack, iterInfo, node, viewName) {
+    const { seq, filter, loopWith } = iterInfo.eval(stack);
+    const r = [];
+    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, 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];
+        const binds = { key, value };
+        const cacheKey = `${nid}-${key}`;
+        if (enricher)
+          enricher.call(it, binds, key, value, iterData);
+        const cachedNode = this.cache.get(cachePath, cacheKey);
+        if (cachedNode)
+          this.pushEachEntry(r, nid, attrName, key, cachedNode);
+        else {
+          const dom = this.renderView(view, stack.enter(value, binds, false));
+          this.pushEachEntry(r, nid, attrName, key, dom);
+          this.cache.set(cachePath, cacheKey, dom);
+        }
+      }
+    }, start, end);
+    return r;
+  }
+  renderView(view, stack) {
+    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, b.it);
+        return new VComment("RECURSION AVOIDED");
+      }
+      n = n[1];
+    }
+    return view.render(stack, this);
+  }
+  _renderMetadata(info) {
+    return new VComment(`§${JSON.stringify(info)}§`);
+  }
+}
+var getSeqInfo = (seq) => isIndexed(seq) ? imIndexedIter : isKeyed(seq) ? imKeyedIter : seq?.[SEQ_INFO] ?? unkIter;
+var 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];
+};
+var unpackLoopResult = (result, seq) => {
+  const r = result ?? {};
+  return { iterData: r.iterData ?? { seq }, start: r.start, end: r.end };
+};
+var 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");
+};
+var imKeyedIter = (seq, visit, start, end) => {
+  const [s, e] = normalizeRange(start, end, seq.size);
+  let i = 0;
+  for (const [k, v] of seq.toSeq().entries()) {
+    if (i >= e)
+      break;
+    if (i >= s)
+      visit(k, v, "sk");
+    i++;
+  }
+};
+var unkIter = () => {};
+var SEQ_INFO = Symbol.for("tutuca.seqInfo");
+
+// index.js
+export * from "immutable";
+import {
+  isMap,
+  isOrderedMap,
+  Map as Map2,
+  OrderedMap as OrderedMap2,
+  Set as Set2
+} from "immutable";
+
+// src/oo.js
+import { Map as IMap, Set as ISet, List, OrderedMap, Record } from "immutable";
+var BAD_VALUE = Symbol("BadValue");
+var nullCoercer = (v) => v;
+
+class Field {
+  constructor(type, name, typeCheck, coercer, defaultValue = null) {
+    this.type = type;
+    this.name = name;
+    this.typeCheck = typeCheck;
+    this.coercer = coercer;
+    this.checks = [];
+    this.defaultValue = defaultValue;
+  }
+  toDataDef() {
+    const { type, defaultValue: dv } = this;
+    return { type, defaultValue: dv?.toJS ? dv.toJS() : dv };
+  }
+  getFirstFailingCheck(v) {
+    if (!this.typeCheck.isValid(v))
+      return this.typeCheck;
+    for (const check of this.checks)
+      if (!check.isValid(v))
+        return check;
+    return null;
+  }
+  isValid(v) {
+    return this.getFirstFailingCheck(v) === null;
+  }
+  addCheck(check) {
+    this.checks.push(check);
+    return this;
+  }
+  coerceOr(v, defaultValue = null) {
+    if (this.isValid(v))
+      return v;
+    const v1 = this.coercer(v);
+    return this.isValid(v1) ? v1 : defaultValue;
+  }
+  coerceOrDefault(v) {
+    return this.coerceOr(v, this.defaultValue);
+  }
+  extendProtoForType(_proto, _uname) {}
+  extendProto(proto) {
+    const { name } = this;
+    const uname = name[0].toUpperCase() + name.slice(1);
+    const setName = `set${uname}`;
+    const that = this;
+    proto[setName] = function(v) {
+      const v1 = that.coerceOr(v, BAD_VALUE);
+      if (v1 === BAD_VALUE) {
+        console.warn("invalid value", v);
+        return this;
+      }
+      return this.set(name, v1);
+    };
+    proto[`update${uname}`] = function(fn) {
+      return this[setName](fn(this.get(name)));
+    };
+    proto[`reset${uname}`] = function() {
+      return this.set(name, that.defaultValue);
+    };
+    this.extendProtoForType(proto, uname);
+  }
+}
+
+class Check {
+  isValid(_v) {
+    return true;
+  }
+  getMessage(_v) {
+    return "Invalid";
+  }
+}
+
+class CheckTypeAny extends Check {
+}
+var CHECK_TYPE_ANY = new CheckTypeAny;
+
+class FnCheck extends Check {
+  constructor(isValidFn, getMessageFn) {
+    super();
+    this._isValid = isValidFn;
+    this._getMessage = getMessageFn;
+  }
+  isValid(v) {
+    return this._isValid(v);
+  }
+  getMessage(v) {
+    return this._getMessage(v);
+  }
+}
+var CHECK_TYPE_INT = new FnCheck((v) => Number.isInteger(v), () => "Integer expected");
+var CHECK_TYPE_FLOAT = new FnCheck((v) => Number.isFinite(v), () => "Float expected");
+var CHECK_TYPE_BOOL = new FnCheck((v) => typeof v === "boolean", () => "Boolean expected");
+var CHECK_TYPE_STRING = new FnCheck((v) => typeof v === "string", () => "String expected");
+var CHECK_TYPE_LIST = new FnCheck((v) => List.isList(v), () => "List expected");
+var CHECK_TYPE_MAP = new FnCheck((v) => IMap.isMap(v), () => "Map expected");
+var CHECK_TYPE_OMAP = new FnCheck((v) => OrderedMap.isOrderedMap(v), () => "OrderedMap expected");
+var CHECK_TYPE_SET = new FnCheck((v) => ISet.isSet(v), () => "Set expected");
+var boolCoercer = (v) => !!v;
+
+class FieldBool extends Field {
+  constructor(name, defaultValue = false) {
+    super("bool", name, CHECK_TYPE_BOOL, boolCoercer, defaultValue);
+  }
+  extendProtoForType(proto, uname) {
+    const { name } = this;
+    proto[`toggle${uname}`] = function() {
+      return this.set(name, !this.get(name, false));
+    };
+    proto[`set${uname}`] = function(v) {
+      return this.set(name, !!v);
+    };
+  }
+}
+
+class FieldAny extends Field {
+  constructor(name, defaultValue = null) {
+    super("any", name, CHECK_TYPE_ANY, nullCoercer, defaultValue);
+  }
+  toDataDef() {
+    const { defaultValue: dv } = this;
+    const type = getTypeName(dv) ?? "any";
+    return { type, defaultValue: dv?.toJS ? dv.toJS() : dv };
+  }
+}
+var stringCoercer = (v) => v?.toString?.() ?? "";
+
+class FieldString extends Field {
+  constructor(name, defaultValue = "") {
+    super("text", name, CHECK_TYPE_STRING, stringCoercer, defaultValue);
+  }
+  extendProtoForType(proto, _uname) {
+    extendProtoSized(proto, this.name, "", "length");
+  }
+}
+var intCoercer = (v) => Number.isFinite(v) ? Math.trunc(v) : null;
+
+class FieldInt extends Field {
+  constructor(name, defaultValue = 0) {
+    super("int", name, CHECK_TYPE_INT, intCoercer, defaultValue);
+  }
+}
+var floatCoercer = (_) => null;
+
+class FieldFloat extends Field {
+  constructor(name, defaultValue = 0) {
+    super("float", name, CHECK_TYPE_FLOAT, floatCoercer, defaultValue);
+  }
+}
+var getTypeName = (v) => v?.constructor?.getMetaClass?.()?.name;
+
+class CheckTypeName {
+  constructor(typeName) {
+    this.typeName = typeName;
+  }
+  isValid(v) {
+    return getTypeName(v) === this.typeName;
+  }
+  getMessage(v) {
+    const got = getTypeName(v);
+    return `Expected "${this.typeName}", got "${got}"`;
+  }
+}
+
+class FieldComp extends Field {
+  constructor(type, name, args) {
+    super(type, name, new CheckTypeName(type), nullCoercer, null);
+    this.args = args;
+  }
+  toDataDef() {
+    return { component: this.typeName, args: this.args };
+  }
+}
+var NONE2 = Symbol("NONE");
+function extendProtoForKeyed(proto, name, uname) {
+  extendProtoSized(proto, name, EMPTY_LIST);
+  proto[`setIn${uname}At`] = function(i, v) {
+    return this.set(name, this.get(name).set(i, v));
+  };
+  proto[`getIn${uname}At`] = function(i, dval) {
+    return this.get(name).get(i, dval);
+  };
+  proto[`updateIn${uname}At`] = function(i, fn) {
+    const col = this.get(name);
+    const v = col.get(i, NONE2);
+    if (v !== NONE2)
+      return this.set(name, col.set(i, fn(v)));
+    console.warn("key", i, "not found in", name, col);
+    return this;
+  };
+  extendDeleteInAt(proto, name, `${uname}At`);
+}
+function extendDeleteInAt(proto, name, uname) {
+  proto[`deleteIn${uname}`] = function(v) {
+    return this.set(name, this.get(name).delete(v));
+  };
+  proto[`removeIn${uname}`] = proto[`deleteIn${uname}`];
+}
+var EMPTY_LIST = List();
+var listCoercer = (v) => Array.isArray(v) ? List(v) : null;
+
+class FieldList extends Field {
+  constructor(name, defaultValue = EMPTY_LIST) {
+    super("list", name, CHECK_TYPE_LIST, listCoercer, defaultValue);
+  }
+  extendProtoForType(proto, uname) {
+    const { name } = this;
+    extendProtoForKeyed(proto, name, uname);
+    proto[`pushIn${uname}`] = function(v) {
+      return this.set(name, this.get(name).push(v));
+    };
+    proto[`insertIn${uname}At`] = function(i, v) {
+      return this.set(name, this.get(name).insert(i, v));
+    };
+  }
+}
+var imapCoercer = (v) => IMap(v);
+
+class FieldMap extends Field {
+  constructor(name, defaultValue = IMap()) {
+    super("map", name, CHECK_TYPE_MAP, imapCoercer, defaultValue);
+  }
+  extendProtoForType(proto, uname) {
+    extendProtoForKeyed(proto, this.name, uname);
+  }
+}
+var omapCoercer = (v) => OrderedMap(v);
+
+class FieldOMap extends Field {
+  constructor(name, defaultValue = OrderedMap()) {
+    super("omap", name, CHECK_TYPE_OMAP, omapCoercer, defaultValue);
+  }
+  extendProtoForType(proto, uname) {
+    extendProtoForKeyed(proto, this.name, uname);
+  }
+}
+function extendProtoSized(proto, name, defaultEmpty, propName = "size") {
+  proto[`${name}Len`] = function() {
+    return this.get(name, defaultEmpty)[propName];
+  };
+}
+var EMPTY_SET = ISet();
+var isetCoercer = (v) => Array.isArray(v) ? ISet(v) : v instanceof Set ? ISet(v) : null;
+
+class FieldSet extends Field {
+  constructor(name, defaultValue = EMPTY_SET) {
+    super("set", name, CHECK_TYPE_SET, isetCoercer, defaultValue);
+  }
+  extendProtoForType(proto, uname) {
+    const { name } = this;
+    extendProtoSized(proto, name, EMPTY_SET);
+    proto[`addIn${uname}`] = function(v) {
+      return this.set(name, this.get(name).add(v));
+    };
+    extendDeleteInAt(proto, name, uname);
+    proto[`hasIn${uname}`] = function(v) {
+      return this.get(name).has(v);
+    };
+    proto[`toggleIn${uname}`] = function(v) {
+      const current = this.get(name);
+      return this.set(name, current.has(v) ? current.delete(v) : current.add(v));
+    };
+  }
+}
+function mkCompField(field, scope, args) {
+  const Comp = scope.lookupComponent(field.type);
+  console.assert(Comp !== null, "component not found", { field });
+  return Comp?.make({ ...field.args, ...args }, { scope }) ?? null;
+}
+
+class ClassBuilder {
+  constructor(name) {
+    const fields = {};
+    const compFields = new Set;
+    this.name = name;
+    this.fields = fields;
+    this.compFields = compFields;
+    this._methods = {};
+    this._statics = {
+      make: function(inArgs = {}, opts = {}) {
+        const args = {};
+        for (const key in inArgs) {
+          const field = fields[key];
+          if (compFields.has(key))
+            args[key] = mkCompField(field, opts.scope, inArgs[key]);
+          else if (field === undefined)
+            console.warn("extra argument to constructor:", name, key, inArgs);
+          else
+            args[key] = field.coerceOrDefault(inArgs[key]);
+        }
+        for (const key of compFields)
+          if (args[key] === undefined)
+            args[key] = mkCompField(fields[key], opts.scope, inArgs[key]);
+        return this(args);
+      }
+    };
+  }
+  build() {
+    const fieldVals = {};
+    const proto = {};
+    const { name, _methods, fields } = this;
+    for (const fieldName in fields) {
+      const field = fields[fieldName];
+      fieldVals[fieldName] = field.defaultValue;
+      field.extendProto(proto);
+    }
+    const Class = { [name]: Record(fieldVals, name) }[name];
+    Object.assign(Class.prototype, proto, _methods);
+    const metaClass = { fields, name, methods: _methods };
+    Object.assign(Class, this._statics, { getMetaClass: () => metaClass });
+    return Class;
+  }
+  methods(proto) {
+    for (const k in proto)
+      this._methods[k] = proto[k];
+  }
+  statics(proto) {
+    for (const k in proto)
+      this._statics[k] = proto[k];
+  }
+  addField(name, dval, FieldCls) {
+    const field = new FieldCls(name, dval);
+    this.fields[name] = field;
+    return field;
+  }
+  addCompField(name, type, args) {
+    const field = new FieldComp(type, name, args);
+    this.compFields.add(name);
+    this.fields[name] = field;
+    return field;
+  }
+}
+var FIELD_CLASS = Symbol.for("tutuca.fieldClass");
+var fieldsByTypeName = {
+  text: FieldString,
+  int: FieldInt,
+  float: FieldFloat,
+  bool: FieldBool,
+  list: FieldList,
+  map: FieldMap,
+  omap: FieldOMap,
+  set: FieldSet,
+  any: FieldAny
+};
+function classFromData(name, { fields = {}, methods, statics }) {
+  const b = new ClassBuilder(name);
+  for (const field in fields) {
+    const value = fields[field];
+    const type = typeof value;
+    if (type === "string")
+      b.addField(field, value, FieldString);
+    else if (type === "number")
+      b.addField(field, value, FieldFloat);
+    else if (type === "boolean")
+      b.addField(field, value, FieldBool);
+    else if (List.isList(value) || Array.isArray(value))
+      b.addField(field, List(value), FieldList);
+    else if (ISet.isSet(value) || value instanceof Set)
+      b.addField(field, ISet(value), FieldSet);
+    else if (OrderedMap.isOrderedMap(value))
+      b.addField(field, value, FieldOMap);
+    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)
+      b.addCompField(field, value.component, value.args);
+    else if (IMap.isMap(value) || value?.constructor === Object)
+      b.addField(field, IMap(value), FieldMap);
+    else {
+      const Field2 = value?.[FIELD_CLASS] ?? FieldAny;
+      b.addField(field, value, Field2);
+    }
+  }
+  if (methods)
+    b.methods(methods);
+  if (statics)
+    b.statics(statics);
+  return b.build();
+}
+var component = (opts) => new Component(classFromData(opts.name, opts), opts);
+
+// index.js
+var css = String.raw;
+var html = String.raw;
+var macro = (defaults, rawView) => new Macro(defaults, rawView);
+function check(_app) {
+  return { error: 0, warn: 0, hint: 0, dummyCheck: true };
+}
+async function test(_opts) {
+  return null;
+}
+function collectIterBindings() {
+  console.warn("collectIterBindings is a no-op in the core tutuca build; use the tutuca-dev build for a functional implementation");
+  return [];
+}
+function tutuca(nodeOrSelector) {
+  const rootNode = typeof nodeOrSelector === "string" ? document.querySelector(nodeOrSelector) : nodeOrSelector;
+  const comps = new Components;
+  const renderer = new Renderer(comps);
+  return new App(rootNode, comps, renderer, ParseContext);
+}
+export {
+  tutuca,
+  test,
+  macro,
+  isOrderedMap as isOMap,
+  isMap as isIMap,
+  injectCss,
+  html,
+  css,
+  component,
+  collectIterBindings,
+  check,
+  SEQ_INFO,
+  ParseContext,
+  OrderedMap2 as OMap,
+  Set2 as ISet,
+  Map2 as IMap,
+  FIELD_CLASS
+};