tutuca 0.9.82 → 0.9.83

package/dist/tutuca-dev.js

@@ -3293,6 +3293,90 @@ function use(fn) {
 }
 __name(use, "use");
 
+// src/chai-jest.js
+function jestMatchers(chai, utils) {
+  const A = chai.Assertion;
+  const m = (name, fn) => A.addMethod(name, fn);
+  m("toBe", function(expected) {
+    this.assert(Object.is(this._obj, expected), "expected #{this} to be #{exp}", "expected #{this} not to be #{exp}", expected, this._obj);
+  });
+  m("toEqual", function(expected) {
+    this.assert(utils.eql(this._obj, expected), "expected #{this} to deeply equal #{exp}", "expected #{this} not to deeply equal #{exp}", expected, this._obj, true);
+  });
+  m("toBeTruthy", function() {
+    this.assert(Boolean(this._obj), "expected #{this} to be truthy", "expected #{this} not to be truthy");
+  });
+  m("toBeFalsy", function() {
+    this.assert(!this._obj, "expected #{this} to be falsy", "expected #{this} not to be falsy");
+  });
+  m("toBeNull", function() {
+    this.assert(this._obj === null, "expected #{this} to be null", "expected #{this} not to be null");
+  });
+  m("toBeUndefined", function() {
+    this.assert(this._obj === undefined, "expected #{this} to be undefined", "expected #{this} not to be undefined");
+  });
+  m("toBeDefined", function() {
+    this.assert(this._obj !== undefined, "expected #{this} to be defined", "expected #{this} to be undefined");
+  });
+  m("toBeNaN", function() {
+    this.assert(Number.isNaN(this._obj), "expected #{this} to be NaN", "expected #{this} not to be NaN");
+  });
+  const compare = (name, op, word) => m(name, function(expected) {
+    this.assert(op(this._obj, expected), `expected #{this} to be ${word} #{exp}`, `expected #{this} not to be ${word} #{exp}`, expected);
+  });
+  compare("toBeGreaterThan", (a, b) => a > b, "greater than");
+  compare("toBeGreaterThanOrEqual", (a, b) => a >= b, "greater than or equal to");
+  compare("toBeLessThan", (a, b) => a < b, "less than");
+  compare("toBeLessThanOrEqual", (a, b) => a <= b, "less than or equal to");
+  m("toBeCloseTo", function(expected, numDigits = 2) {
+    const pass = Math.abs(expected - this._obj) < 10 ** -numDigits / 2;
+    this.assert(pass, `expected #{this} to be close to #{exp} (${numDigits} digits)`, `expected #{this} not to be close to #{exp} (${numDigits} digits)`, expected);
+  });
+  m("toContain", function(item) {
+    const obj = this._obj;
+    const ok = typeof obj === "string" ? obj.includes(item) : Array.from(obj).includes(item);
+    this.assert(ok, "expected #{this} to contain #{exp}", "expected #{this} not to contain #{exp}", item);
+  });
+  m("toHaveLength", function(length) {
+    const actual = this._obj == null ? undefined : this._obj.length;
+    this.assert(actual === length, "expected #{this} to have length #{exp}", "expected #{this} not to have length #{exp}", length, actual);
+  });
+  m("toMatch", function(expected) {
+    const obj = this._obj;
+    const ok = expected instanceof RegExp ? expected.test(obj) : String(obj).includes(expected);
+    this.assert(ok, "expected #{this} to match #{exp}", "expected #{this} not to match #{exp}", expected);
+  });
+  m("toHaveProperty", function(path, ...rest) {
+    const keys = Array.isArray(path) ? path : String(path).split(".");
+    let cur = this._obj;
+    let found = true;
+    for (const k of keys) {
+      if (cur != null && k in Object(cur))
+        cur = cur[k];
+      else {
+        found = false;
+        break;
+      }
+    }
+    const pass = found && (rest.length === 0 || utils.eql(cur, rest[0]));
+    this.assert(pass, "expected #{this} to have property #{exp}", "expected #{this} not to have property #{exp}", path);
+  });
+  m("toBeInstanceOf", function(ctor) {
+    this.assert(this._obj instanceof ctor, "expected #{this} to be an instance of #{exp}", "expected #{this} not to be an instance of #{exp}", ctor.name ?? ctor);
+  });
+  m("toThrow", function(expected) {
+    const a = new chai.Assertion(this._obj);
+    if (utils.flag(this, "negate")) {
+      expected === undefined ? a.to.not.throw() : a.to.not.throw(expected);
+    } else {
+      expected === undefined ? a.to.throw() : a.to.throw(expected);
+    }
+  });
+}
+
+// deps/chai.js
+use(jestMatchers);
+
 // deps/immutable.js
 function invariant(condition, error) {
   if (!condition)
@@ -8518,9 +8602,6 @@ class DynVal extends RenderNameVal {
   eval(stack) {
     return stack.lookupDynamic(this.name);
   }
-  toPathItem() {
-    return null;
-  }
   toString() {
     return `*${this.name}`;
   }
@@ -8758,7 +8839,7 @@ class ConstAttrs extends Attributes {
   toMacroVars() {
     const r = {};
     for (const name in this.items)
-      r[name] = `'${this.items[name]}'`;
+      r[name] = new ConstVal(`${this.items[name]}`).toString();
     return r;
   }
   isConstant() {
@@ -8864,6 +8945,76 @@ class RequestHandler {
   }
 }
 
+// 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/vdom.js
 var HTML_NS = "http://www.w3.org/1999/xhtml";
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -8891,6 +9042,7 @@ var NEVER_ASSIGN = new Set([
   "role",
   "popover"
 ]);
+var PROP_ATTR_NAME = { className: "class", htmlFor: "for" };
 function applyProperties(node, props) {
   const namespaced = isNamespaced(node);
   for (const name in props)
@@ -8909,15 +9061,22 @@ function setProp2(node, name, value, namespaced) {
   }
   if (typeof value === "function")
     return;
-  if (!namespaced && !NEVER_ASSIGN.has(name) && name in node) {
+  const usesProp = !namespaced && !NEVER_ASSIGN.has(name) && name in node;
+  if (usesProp && value != null) {
     try {
-      node[name] = value == null ? "" : value;
+      node[name] = value;
       return;
     } catch {}
   }
-  if (value == null || value === false && name[4] !== "-")
-    node.removeAttribute(name);
-  else
+  if (value == null || value === false && name[4] !== "-") {
+    if (usesProp) {
+      try {
+        node[name] = "";
+      } catch {}
+      node.removeAttribute(PROP_ATTR_NAME[name] ?? name);
+    } else
+      node.removeAttribute(name);
+  } else
     node.setAttribute(name, value);
 }
 function applyValueLast(node, value) {
@@ -9098,22 +9257,12 @@ function morphNode(domNode, source, target, opts) {
     }
     if (type3 === 1 && source.isSameKind(target)) {
       const propsDiff = diffProps(source.attrs, target.attrs);
-      let pendingValue;
-      let pendingChecked;
-      let applyValue = false;
-      let applyChecked = false;
+      const hasValue = propsDiff != null && "value" in propsDiff;
+      const hasChecked = propsDiff != null && "checked" in propsDiff;
       if (propsDiff) {
-        if ("value" in propsDiff || "checked" in propsDiff) {
-          const { value, checked, ...rest } = propsDiff;
+        if (hasValue || hasChecked) {
+          const { value: _v, checked: _c, ...rest } = propsDiff;
           applyProperties(domNode, rest);
-          if ("value" in propsDiff) {
-            pendingValue = value;
-            applyValue = true;
-          }
-          if ("checked" in propsDiff) {
-            pendingChecked = checked;
-            applyChecked = true;
-          }
         } else
           applyProperties(domNode, propsDiff);
       }
@@ -9121,14 +9270,12 @@ function morphNode(domNode, source, target, opts) {
         const ns = effectiveNs(target, opts);
         morphChildren(domNode, source.childs, target.childs, childOpts(target, ns, opts));
       }
-      if (!applyValue && source.tag === "SELECT" && target.attrs.value !== undefined) {
-        pendingValue = target.attrs.value;
-        applyValue = true;
-      }
-      if (applyValue)
-        applyValueLast(domNode, pendingValue);
-      if (applyChecked)
-        setProp2(domNode, "checked", pendingChecked, false);
+      if (hasValue)
+        applyValueLast(domNode, propsDiff.value);
+      else if (source.tag === "SELECT" && target.attrs.value !== undefined)
+        applyValueLast(domNode, target.attrs.value);
+      if (hasChecked)
+        setProp2(domNode, "checked", propsDiff.checked, false);
       return domNode;
     }
     if (type3 === 11) {
@@ -9249,74 +9396,229 @@ function h(tagName, properties, children, namespace) {
   return new VNode2(tag, props, normalizedChildren, key, namespace);
 }
 
-// src/anode.js
-function resolveDynProducer(comp, name) {
-  let producerComp, producerProvide;
-  const lk = comp?.lookup?.[name];
-  if (lk != null) {
-    producerComp = comp.scope?.lookupComponent(lk.compName);
-    producerProvide = producerComp?.provide?.[lk.provideName];
-  } else {
-    const p = comp?.provide?.[name];
-    if (p == null)
-      return null;
-    producerComp = comp;
-    producerProvide = p;
-  }
-  if (producerComp == null || producerProvide == null)
-    return null;
-  const pi = producerProvide.val?.toPathItem?.() ?? null;
-  return { producerCompId: producerComp.id, producerSteps: pi ? [pi] : [] };
-}
+// src/renderer.js
+var DATASET_ATTRS = ["nid", "cid", "eid", "vid", "si", "sk"];
 
-class BaseNode {
-  render(_stack, _rx) {
-    return null;
-  }
-  setDataAttr(key, val) {
-    console.warn("setDataAttr not implemented for", this, { key, val });
+class Renderer {
+  constructor(comps) {
+    this.comps = comps;
+    this.cache = new WeakMapDomCache;
+    this.renderTag = h;
   }
-  isConstant() {
-    return false;
+  renderFragment(childs) {
+    return new VFragment(childs);
   }
-  optimize() {}
-}
-
-class TextNode extends BaseNode {
-  constructor(val) {
-    super();
-    this.val = val;
+  renderComment(text) {
+    return new VComment(text);
   }
-  render(_stack, _rx) {
-    return this.val;
+  setNullCache() {
+    this.cache = new NullDomCache;
   }
-  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;
+  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];
   }
-  hasNewLine() {
-    for (let i = 0;i < this.val.length; i++) {
-      const c = this.val.charCodeAt(i);
-      if (c === 10 || c === 13)
-        return true;
+  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 false;
+    return dom.innerHTML;
   }
-  condenseWhiteSpace(replacement = "") {
-    this.val = replacement;
+  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);
   }
-  isConstant() {
-    return true;
+  renderIt(stack, node, key, viewName) {
+    const comp = this.comps.getCompFor(stack.it);
+    return comp ? this._rValComp(stack, stack.it, comp, node, key, viewName) : null;
   }
-  setDataAttr(_key, _val) {}
-}
-
-class CommentNode extends TextNode {
-  render(_stack, rx) {
+  _rValComp(stack, val, comp, node, key, viewName) {
+    const cacheKey = `${viewName ?? stack.viewsId ?? ""}-${key}`;
+    const cachePath = [node, val];
+    stack._pushDynBindValuesToArray(cachePath, comp);
+    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 filterAlwaysTrue = (_v, _k, _seq) => true;
+var nullLoopWith = (seq) => ({ iterData: { seq } });
+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");
+
+// src/util/env.js
+var isMac = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
+
+// src/anode.js
+function resolveDynProducer(comp, name) {
+  let producerComp, producerProvide;
+  const lk = comp?.lookup?.[name];
+  if (lk != null) {
+    producerComp = comp.scope?.lookupComponent(lk.compName);
+    producerProvide = producerComp?.provide?.[lk.provideName];
+  } else {
+    const p = comp?.provide?.[name];
+    if (p == null)
+      return null;
+    producerComp = comp;
+    producerProvide = p;
+  }
+  if (producerComp == null || producerProvide == null)
+    return null;
+  const pi = producerProvide.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);
   }
 }
@@ -9452,7 +9754,7 @@ class ANode extends BaseNode {
   }
 }
 function parseXOp(attrs, childs, opIdx, px) {
-  if (attrs.length === 0)
+  if (attrs.length <= opIdx)
     return maybeFragment(childs);
   const { name, value } = attrs[opIdx];
   const as = attrs.getNamedItem("as")?.value ?? null;
@@ -9773,8 +10075,6 @@ class IterInfo {
     return { seq, filter, loopWith, enricher };
   }
 }
-var filterAlwaysTrue = (_v, _k, _seq) => true;
-var nullLoopWith = (seq) => ({ iterData: { seq } });
 function xOp(consumed = [], { wrappable = false, wrapper = null } = {}) {
   return { consumed: new Set(consumed), wrappable, wrapper };
 }
@@ -9961,7 +10261,6 @@ class NodeEvent {
     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);
@@ -9992,96 +10291,15 @@ function compileModifiers(eventName, names) {
   };
 }
 
-// src/chai-jest.js
-function jestMatchers(chai, utils) {
-  const A = chai.Assertion;
-  const m = (name, fn) => A.addMethod(name, fn);
-  m("toBe", function(expected) {
-    this.assert(Object.is(this._obj, expected), "expected #{this} to be #{exp}", "expected #{this} not to be #{exp}", expected, this._obj);
-  });
-  m("toEqual", function(expected) {
-    this.assert(utils.eql(this._obj, expected), "expected #{this} to deeply equal #{exp}", "expected #{this} not to deeply equal #{exp}", expected, this._obj, true);
-  });
-  m("toBeTruthy", function() {
-    this.assert(Boolean(this._obj), "expected #{this} to be truthy", "expected #{this} not to be truthy");
-  });
-  m("toBeFalsy", function() {
-    this.assert(!this._obj, "expected #{this} to be falsy", "expected #{this} not to be falsy");
-  });
-  m("toBeNull", function() {
-    this.assert(this._obj === null, "expected #{this} to be null", "expected #{this} not to be null");
-  });
-  m("toBeUndefined", function() {
-    this.assert(this._obj === undefined, "expected #{this} to be undefined", "expected #{this} not to be undefined");
-  });
-  m("toBeDefined", function() {
-    this.assert(this._obj !== undefined, "expected #{this} to be defined", "expected #{this} to be undefined");
-  });
-  m("toBeNaN", function() {
-    this.assert(Number.isNaN(this._obj), "expected #{this} to be NaN", "expected #{this} not to be NaN");
-  });
-  const compare = (name, op, word) => m(name, function(expected) {
-    this.assert(op(this._obj, expected), `expected #{this} to be ${word} #{exp}`, `expected #{this} not to be ${word} #{exp}`, expected);
-  });
-  compare("toBeGreaterThan", (a, b) => a > b, "greater than");
-  compare("toBeGreaterThanOrEqual", (a, b) => a >= b, "greater than or equal to");
-  compare("toBeLessThan", (a, b) => a < b, "less than");
-  compare("toBeLessThanOrEqual", (a, b) => a <= b, "less than or equal to");
-  m("toBeCloseTo", function(expected, numDigits = 2) {
-    const pass = Math.abs(expected - this._obj) < 10 ** -numDigits / 2;
-    this.assert(pass, `expected #{this} to be close to #{exp} (${numDigits} digits)`, `expected #{this} not to be close to #{exp} (${numDigits} digits)`, expected);
-  });
-  m("toContain", function(item) {
-    const obj = this._obj;
-    const ok = typeof obj === "string" ? obj.includes(item) : Array.from(obj).includes(item);
-    this.assert(ok, "expected #{this} to contain #{exp}", "expected #{this} not to contain #{exp}", item);
-  });
-  m("toHaveLength", function(length) {
-    const actual = this._obj == null ? undefined : this._obj.length;
-    this.assert(actual === length, "expected #{this} to have length #{exp}", "expected #{this} not to have length #{exp}", length, actual);
-  });
-  m("toMatch", function(expected) {
-    const obj = this._obj;
-    const ok = expected instanceof RegExp ? expected.test(obj) : String(obj).includes(expected);
-    this.assert(ok, "expected #{this} to match #{exp}", "expected #{this} not to match #{exp}", expected);
-  });
-  m("toHaveProperty", function(path, ...rest) {
-    const keys = Array.isArray(path) ? path : String(path).split(".");
-    let cur = this._obj;
-    let found = true;
-    for (const k of keys) {
-      if (cur != null && k in Object(cur))
-        cur = cur[k];
-      else {
-        found = false;
-        break;
-      }
-    }
-    const pass = found && (rest.length === 0 || utils.eql(cur, rest[0]));
-    this.assert(pass, "expected #{this} to have property #{exp}", "expected #{this} not to have property #{exp}", path);
-  });
-  m("toBeInstanceOf", function(ctor) {
-    this.assert(this._obj instanceof ctor, "expected #{this} to be an instance of #{exp}", "expected #{this} not to be an instance of #{exp}", ctor.name ?? ctor);
-  });
-  m("toThrow", function(expected) {
-    const a = new chai.Assertion(this._obj);
-    if (utils.flag(this, "negate")) {
-      expected === undefined ? a.to.not.throw() : a.to.not.throw(expected);
-    } else {
-      expected === undefined ? a.to.throw() : a.to.throw(expected);
-    }
-  });
-}
-
-// src/util/parsectx.js
-class ParseCtxClassSetCollector extends ParseContext {
-  constructor(...args) {
-    super(...args);
-    this.classes = new Set;
-  }
-  _addClasses(s) {
-    for (const v of s.split(/\s+/)) {
-      this.classes.add(v);
+// src/util/parsectx.js
+class ParseCtxClassSetCollector extends ParseContext {
+  constructor(...args) {
+    super(...args);
+    this.classes = new Set;
+  }
+  _addClasses(s) {
+    for (const v of s.split(/\s+/)) {
+      this.classes.add(v);
     }
   }
   enterMacro(macroName, macroVars, macroSlots) {
@@ -10129,6 +10347,18 @@ class ParseCtxClassSetCollector extends ParseContext {
     return false;
   }
 }
+function collectAppClassesInSet(app) {
+  const classes = new Set;
+  for (const Comp of app.comps.byId.values()) {
+    for (const key in Comp.views) {
+      const view = Comp.views[key];
+      for (const name of view.ctx.classes) {
+        classes.add(name);
+      }
+    }
+  }
+  return classes;
+}
 
 // tools/core/html-tokenizer.js
 var CharCodes = {
@@ -12465,6 +12695,16 @@ var PARSE_ISSUES = {
   },
   "bad-value": { id: BAD_VALUE }
 };
+function protoHasMethod(proto, name) {
+  let cursor = proto;
+  while (cursor && cursor !== Object.prototype) {
+    const desc = Object.getOwnPropertyDescriptor(cursor, name);
+    if (desc !== undefined)
+      return typeof desc.value === "function";
+    cursor = Object.getPrototypeOf(cursor);
+  }
+  return false;
+}
 function collectProtoMethodNames(proto) {
   const out = [];
   let cursor = proto;
@@ -12723,7 +12963,7 @@ function checkEventHandlersHaveImpls(lx, Comp, referencedInputs) {
             referencedInputs?.add(handlerVal.name);
             const { name } = handlerVal;
             if (input[name] === undefined) {
-              const isMethodFix = proto[name] !== undefined;
+              const isMethodFix = protoHasMethod(proto, name);
               lx.error(INPUT_HANDLER_NOT_IMPLEMENTED, { name, handler, event, eventName, originAttr }, isMethodFix ? { kind: "add-prefix", from: name, to: `$${name}` } : replaceNameSuggestion(name, Object.keys(input)));
               if (isMethodFix) {
                 lx.hint(INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER, { name, handler, event, eventName, originAttr }, { kind: "add-prefix", from: name, to: `$${name}` });
@@ -12732,7 +12972,7 @@ function checkEventHandlersHaveImpls(lx, Comp, referencedInputs) {
           } else if (hvName === "MethodVal") {
             referencedInputs?.add(handlerVal.name);
             const { name } = handlerVal;
-            if (proto[name] === undefined) {
+            if (!protoHasMethod(proto, name)) {
               const isInputFix = input[name] !== undefined;
               lx.error(INPUT_HANDLER_METHOD_NOT_IMPLEMENTED, { name, handler, event, eventName, originAttr }, isInputFix ? { kind: "drop-prefix", from: `$${name}`, to: name } : replaceNameSuggestion(name, collectProtoMethodNames(proto)));
               if (isInputFix) {
@@ -12755,7 +12995,7 @@ var ATTR_VAL_CHECKERS = {
     const { name } = val;
     if (fields[name] !== undefined)
       return;
-    if (proto[name] !== undefined)
+    if (protoHasMethod(proto, name))
       lx.error(FIELD_VAL_IS_METHOD, { ...errCtx, val, name }, fixTo(`.${name}`, `$${name}`));
     else
       reportUnknownName(lx, FIELD_VAL_NOT_DEFINED, name, Object.keys(fields), { ...errCtx, val });
@@ -12763,7 +13003,7 @@ var ATTR_VAL_CHECKERS = {
   MethodVal({ lx, val, env, errCtx }) {
     const { fields, proto } = env;
     const { name } = val;
-    if (proto[name] !== undefined)
+    if (protoHasMethod(proto, name))
       return;
     if (fields[name] !== undefined)
       lx.error(METHOD_VAL_IS_FIELD, { ...errCtx, val, name }, fixTo(`$${name}`, `.${name}`));
@@ -14261,7 +14501,6 @@ class Transaction {
     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;
@@ -14315,7 +14554,7 @@ class InputEvent extends Transaction {
         return e.shiftKey;
       case "isCtrl":
       case "isCmd":
-        return isMac2 && e.metaKey || e.ctrlKey;
+        return isMac && e.metaKey || e.ctrlKey;
       case "key":
         return e.key;
       case "keyCode":
@@ -14738,7 +14977,6 @@ class DragInfo {
     return this.stack.lookupBind(name);
   }
 }
-
 // src/oo.js
 var BAD_VALUE2 = Symbol("BadValue");
 var nullCoercer = (v) => v;
@@ -15005,8 +15243,8 @@ class FieldSet extends Field {
   }
 }
 function mkCompField(field, scope, args) {
-  const Comp = scope.lookupComponent(field.type);
-  console.assert(Comp !== null, "component not found", { field });
+  const Comp = scope?.lookupComponent(field.type) ?? null;
+  console.assert(!scope || Comp !== null, "component not found", { field });
   return Comp?.make({ ...field.args, ...args }, { scope }) ?? null;
 }
 
@@ -15123,321 +15361,6 @@ function classFromData(name, { fields = {}, methods, statics }) {
 Component.fromSpec = (opts) => new Component(classFromData(opts.name, opts), opts);
 var component = (opts) => Component.fromSpec(opts);
 
-// 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);
-    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");
-
-// extra/klist.js
-class KList {
-  constructor(items = Map2(), order = List()) {
-    this.items = items;
-    this.order = order;
-    this.$ = 0;
-  }
-  _clonish(items, order) {
-    return new KList(items, order, this.$);
-  }
-  toJS() {
-    return this.order.toArray().map((k) => this.items.get(k));
-  }
-  set(k, v) {
-    const newOrder = this.items.has(k) ? this.order : this.order.push(k);
-    return this._clonish(this.items.set(k, v), newOrder, this.$);
-  }
-  get(k, dval = null) {
-    return this.items.get(k, dval);
-  }
-  _nextFreeKey() {
-    let cur = this.$;
-    while (true) {
-      const key = `§${cur}§`;
-      if (!this.items.has(key)) {
-        return [key, cur];
-      }
-      cur += 1;
-    }
-  }
-  push(v) {
-    const [key, next$] = this._nextFreeKey();
-    const newKList = this.set(key, v);
-    newKList.$ = next$;
-    return newKList;
-  }
-  get size() {
-    return this.items.size;
-  }
-  delete(k) {
-    if (this.items.has(k)) {
-      const newOrder = this.order.delete(this.order.indexOf(k));
-      return this._clonish(this.items.delete(k), newOrder);
-    }
-    return this;
-  }
-  moveKeyBeforeKey(k1, k2) {
-    const { order } = this;
-    return this.moveKeyIndexToIndex(order.indexOf(k1), order.indexOf(k2), 0);
-  }
-  moveKeyAfterKey(k1, k2) {
-    const { order } = this;
-    return this.moveKeyIndexToIndex(order.indexOf(k1), order.indexOf(k2), 1);
-  }
-  moveKeyIndexToIndex(source, target, offset) {
-    if (source === -1 || target === -1 || source === target) {
-      return this;
-    }
-    const { order } = this;
-    const newPos = target + offset;
-    const oldPos = newPos < source ? source + 1 : source;
-    const newOrder = order.insert(newPos, order.get(source)).delete(oldPos);
-    return this._clonish(this.items, newOrder);
-  }
-}
-var klistCoercer = (_) => null;
-
-class CheckTypeKList {
-  isValid(v) {
-    return v instanceof KList;
-  }
-  getMessage(_v) {
-    return "KList expected";
-  }
-}
-var CHECK_TYPE_KLIST = new CheckTypeKList;
-
-class FieldKList extends Field {
-  constructor(name, defaultValue = new KList) {
-    super("KList", name, CHECK_TYPE_KLIST, klistCoercer, defaultValue);
-  }
-  extendProtoForType(proto, uname) {
-    extendProtoForKeyed(proto, this.name, uname);
-    const { name } = this;
-    extendProtoForKeyed(proto, name, uname);
-    proto[`pushIn${uname}`] = function(v) {
-      return this.set(name, this.get(name).push(v));
-    };
-  }
-}
-KList.prototype[FIELD_CLASS] = FieldKList;
-KList.prototype[SEQ_INFO] = (seq, visit) => {
-  for (const k of seq.order)
-    visit(k, seq.items.get(k), "data-sk");
-};
 // index.js
 var css = String.raw;
 var html = String.raw;
@@ -15460,15 +15383,58 @@ async function compileClassesToStyle(app, compileClasses, styleId = "margaui-css
 async function compileClassesToStyleText(app, compileClasses, Ctx = ParseCtxClassSetCollector) {
   app.ParseContext = Ctx;
   app.compile();
-  const classes = new Set;
-  for (const Comp of app.comps.byId.values()) {
-    for (const key in Comp.views) {
-      const view = Comp.views[key];
-      for (const name of view.ctx.classes)
-        classes.add(name);
-    }
+  return await compileClasses(Array.from(collectAppClassesInSet(app)));
+}
+// src/util/testing.js
+var plainArrayIter = (seq, visit, start, end) => {
+  const [s, e] = normalizeRange(start, end, seq.length);
+  for (let i = s;i < e; i++)
+    visit(i, seq[i]);
+};
+var plainMapIter = (seq, visit, start, end) => {
+  const [s, e] = normalizeRange(start, end, seq.size);
+  let i = 0;
+  for (const [k, v] of seq.entries()) {
+    if (i >= e)
+      break;
+    if (i >= s)
+      visit(k, v);
+    i++;
   }
-  return await compileClasses(Array.from(classes));
+};
+function pickIter(seq) {
+  if (Array.isArray(seq))
+    return plainArrayIter;
+  if (seq instanceof Map)
+    return plainMapIter;
+  return getSeqInfo(seq);
+}
+function resolveAlter(Comp, name) {
+  if (name == null)
+    return null;
+  const fn = Comp.alter?.[name];
+  if (typeof fn !== "function") {
+    throw new Error(`alter handler '${name}' not found on component '${Comp.name}'`);
+  }
+  return fn;
+}
+function collectIterBindings(Comp, compInstance, seq, opts = {}) {
+  const whenFn = resolveAlter(Comp, opts.when) ?? filterAlwaysTrue;
+  const loopWithFn = resolveAlter(Comp, opts.loopWith) ?? nullLoopWith;
+  const enrichFn = resolveAlter(Comp, opts.enrichWith);
+  const it = compInstance;
+  const { iterData, start, end } = unpackLoopResult(loopWithFn.call(it, seq), seq);
+  const out = [];
+  const iter = pickIter(seq);
+  iter(seq, (key, value) => {
+    if (!whenFn.call(it, key, value, iterData))
+      return;
+    const binds = { key, value };
+    if (enrichFn)
+      enrichFn.call(it, binds, key, value, iterData);
+    out.push(binds);
+  }, start, end);
+  return out;
 }
 // tools/core/docs.js
 function getSignature(name, fn) {
@@ -15640,62 +15606,8 @@ function docComponents(normalized, { name = null } = {}) {
   const picked = name === null ? comps : comps.filter((c) => c.name === name);
   return new ComponentDocs({ items: getComponentsDocs(picked) });
 }
-// src/util/testing.js
-var filterAlwaysTrue2 = () => true;
-var nullLoopWith2 = (seq) => ({ iterData: { seq } });
-var plainArrayIter = (seq, visit, start, end) => {
-  const [s, e] = normalizeRange(start, end, seq.length);
-  for (let i = s;i < e; i++)
-    visit(i, seq[i]);
-};
-var plainMapIter = (seq, visit, start, end) => {
-  const [s, e] = normalizeRange(start, end, seq.size);
-  let i = 0;
-  for (const [k, v] of seq.entries()) {
-    if (i >= e)
-      break;
-    if (i >= s)
-      visit(k, v);
-    i++;
-  }
-};
-function pickIter(seq) {
-  if (Array.isArray(seq))
-    return plainArrayIter;
-  if (seq instanceof Map)
-    return plainMapIter;
-  return getSeqInfo(seq);
-}
-function resolveAlter(Comp, name) {
-  if (name == null)
-    return null;
-  const fn = Comp.alter?.[name];
-  if (typeof fn !== "function") {
-    throw new Error(`alter handler '${name}' not found on component '${Comp.name}'`);
-  }
-  return fn;
-}
-function collectIterBindings(Comp, compInstance, seq, opts = {}) {
-  const whenFn = resolveAlter(Comp, opts.when) ?? filterAlwaysTrue2;
-  const loopWithFn = resolveAlter(Comp, opts.loopWith) ?? nullLoopWith2;
-  const enrichFn = resolveAlter(Comp, opts.enrichWith);
-  const it = compInstance;
-  const { iterData, start, end } = unpackLoopResult(loopWithFn.call(it, seq), seq);
-  const out = [];
-  const iter = pickIter(seq);
-  iter(seq, (key, value) => {
-    if (!whenFn.call(it, key, value, iterData))
-      return;
-    const binds = { key, value };
-    if (enrichFn)
-      enrichFn.call(it, binds, key, value, iterData);
-    out.push(binds);
-  }, start, end);
-  return out;
-}
 
 // dev.js
-use(jestMatchers);
 async function test3(opts = {}) {
   const report = await runTests({ expect, ...opts });
   reportTestReportToConsole(report);
@@ -15867,7 +15779,6 @@ export {
   LintClassCollectorCtx,
   LOOKUP_TARGET_MALFORMED,
   LOOKUP_BAD_SHAPE,
-  KList,
   Set2 as ISet,
   INPUT_HANDLER_NOT_REFERENCED,
   INPUT_HANDLER_NOT_IMPLEMENTED,