tutuca 0.14.0 → 0.15.0

package/dist/tutuca-cli.js

@@ -1073,7 +1073,7 @@ function pathFromJson(j) {
 function walkItems(stack, items, renderPath, path) {
   let prev = stack.it;
   for (const step of items) {
-    const next = step.lookup(prev, NONE);
+    const next = step.lookup(prev);
     if (next === NONE) {
       console.warn("bad PathItem", { root: stack.it, step, path });
       return null;
@@ -1132,18 +1132,12 @@ function resolvePathPart(comp, nodeRefs, vid) {
   }
   return null;
 }
-var NONE, readKey, writeKey, writeSeqKey, Step, BindStep, ScopeBindStep, FieldStep, SeqStep, SeqAccessStep, EachBindStep, EachRenderItStep, Path, EMPTY_PATH, DispatchPath, StepCtx, NO_EVENT_INFO, BUBBLING_EVENTS, PathBuilder;
+var NONE, writeKey, writeSeqKey, Step, BindStep, ScopeBindStep, FieldStep, SeqStep, SeqAccessStep, EachBindStep, EachRenderItStep, Path, EMPTY_PATH, DispatchPath, StepCtx, NO_EVENT_INFO, BUBBLING_EVENTS, PathBuilder;
 var init_path = __esm({
   "src/path.js"() {
     init_collection();
     init_immer2();
     NONE = /* @__PURE__ */ Symbol("NONE");
-    readKey = (value, key, dval = null) => {
-      if (value == null) return dval;
-      if (value instanceof Map) return value.has(key) ? value.get(key) : dval;
-      if (value instanceof Set) return value.has(key) ? key : dval;
-      return Object.hasOwn(value, key) ? value[key] : dval;
-    };
     writeKey = (value, key, next) => {
       if (value instanceof Map) value.set(key, next);
       else if (value instanceof Set) {
@@ -1151,16 +1145,8 @@ var init_path = __esm({
         value.add(next);
       } else value[key] = next;
     };
-    writeSeqKey = (value, key, next) => {
-      if (value instanceof Map || value instanceof Set || Array.isArray(value) || Object.hasOwn(value, key))
-        writeKey(value, key, next);
-      else if (typeof value?.set === "function") value.set(key, next);
-      else writeKey(value, key, next);
-    };
+    writeSeqKey = (value, key, next) => !(value instanceof Map || value instanceof Set || Array.isArray(value)) && !Object.hasOwn(value, key) && typeof value?.set === "function" ? value.set(key, next) : writeKey(value, key, next);
     Step = class {
-      lookup(_v, dval = null) {
-        return dval;
-      }
       setDraftValue(_root, _v) {
       }
       // Re-enter this step while rebuilding a stack. `renderPath` is the dispatch
@@ -1184,28 +1170,22 @@ var init_path = __esm({
         return null;
       }
     };
-    BindStep = class _BindStep extends Step {
+    BindStep = class extends Step {
       constructor(binds) {
         super();
         this.binds = binds;
       }
-      lookup(v, _dval) {
+      lookup(v) {
         return v;
       }
       enterFrame(stack, next, renderPath) {
         return stack.enter(next, { ...this.binds }, false, renderPath);
       }
-      withIndex(i) {
-        return new _BindStep({ ...this.binds, key: i });
-      }
-      withKey(key) {
-        return new _BindStep({ ...this.binds, key });
-      }
       toAbstractPathStep() {
         return null;
       }
     };
-    ScopeBindStep = class _ScopeBindStep extends BindStep {
+    ScopeBindStep = class extends BindStep {
       constructor(val, binds = {}) {
         super(binds);
         this.val = val;
@@ -1214,30 +1194,18 @@ var init_path = __esm({
         const dyn = this.val.evalAsHandler(stack)?.call(stack.it) ?? {};
         return stack.enter(next, { ...this.binds, ...dyn }, false, renderPath);
       }
-      withIndex(i) {
-        return new _ScopeBindStep(this.val, { ...this.binds, key: i });
-      }
-      withKey(key) {
-        return new _ScopeBindStep(this.val, { ...this.binds, key });
-      }
     };
     FieldStep = class extends Step {
       constructor(field) {
         super();
         this.field = field;
       }
-      lookup(v, dval = null) {
-        return readKey(v, this.field, dval);
+      lookup(v) {
+        return seqGet(v, this.field, NONE);
       }
       setDraftValue(root, v) {
         writeKey(root, this.field, v);
       }
-      withIndex(i) {
-        return new SeqStep(this.field, i);
-      }
-      withKey(k) {
-        return new SeqStep(this.field, k);
-      }
       toKey() {
         return { field: this.field };
       }
@@ -1248,11 +1216,11 @@ var init_path = __esm({
         this.field = field;
         this.key = key;
       }
-      lookup(v, dval = null) {
-        return seqGet(readKey(v, this.field, null), this.key, dval);
+      lookup(v) {
+        return seqGet(seqGet(v, this.field, null), this.key, NONE);
       }
       setDraftValue(root, v) {
-        const seq = readKey(root, this.field, null);
+        const seq = seqGet(root, this.field, null);
         if (seq != null) writeSeqKey(seq, this.key, v);
       }
       enterFrame(stack, next, renderPath) {
@@ -1268,20 +1236,20 @@ var init_path = __esm({
         this.seqField = seqField;
         this.keyField = keyField;
       }
-      lookup(v, dval = null) {
-        const seq = readKey(v, this.seqField, NONE);
-        const key = readKey(v, this.keyField, NONE);
-        return key !== NONE && seq !== NONE ? seqGet(seq, key, dval) : dval;
+      lookup(v) {
+        const seq = seqGet(v, this.seqField, NONE);
+        const key = seqGet(v, this.keyField, NONE);
+        return key !== NONE && seq !== NONE ? seqGet(seq, key, NONE) : NONE;
       }
       setDraftValue(root, v) {
-        const seq = readKey(root, this.seqField, NONE);
-        const key = readKey(root, this.keyField, NONE);
+        const seq = seqGet(root, this.seqField, NONE);
+        const key = seqGet(root, this.keyField, NONE);
         if (seq !== NONE && key !== NONE) writeSeqKey(seq, key, v);
       }
       // Resolve `keyField` against `v` now and freeze it as a literal-key `SeqStep`, so a
       // later lookup/setValue lands on this same item even if `keyField` changes meanwhile.
       pinKey(v) {
-        const key = readKey(v, this.keyField, NONE);
+        const key = seqGet(v, this.keyField, NONE);
         return key === NONE ? this : new SeqStep(this.seqField, key);
       }
       // The key is a *field reference* resolved live, so it is unknown without a value;
@@ -1292,18 +1260,18 @@ var init_path = __esm({
       }
     };
     EachBindStep = class extends Step {
-      constructor(iterInfo, key) {
+      constructor(eachNode, key) {
         super();
-        this.iterInfo = iterInfo;
+        this.eachNode = eachNode;
         this.key = key;
       }
-      lookup(v, _dval) {
+      lookup(v) {
         return v;
       }
       // Replay the renderer's per-item binds (key, value + any @enrich-with binds)
       // so a rebuilt stack matches the one @each rendered with.
       enterFrame(stack, next, renderPath) {
-        return stack.enter(next, this.iterInfo.enrichBinds(stack, this.key), false, renderPath);
+        return stack.enter(next, this.eachNode.enrichBinds(stack, this.key), false, renderPath);
       }
       toAbstractPathStep() {
         return null;
@@ -1324,9 +1292,6 @@ var init_path = __esm({
       concat(steps) {
         return new _Path(this.steps.concat(steps));
       }
-      popStep() {
-        return new _Path(this.steps.slice(0, -1));
-      }
       // Frame-only steps removed, one step per crossed component: `popStep` over the
       // result bubbles through every component.
       compact() {
@@ -1348,7 +1313,7 @@ var init_path = __esm({
           const step = this.steps[i];
           const pinned = step.pinKey(curVal);
           if (pinned !== step) (out ??= this.steps.slice())[i] = pinned;
-          curVal = step.lookup(curVal, NONE);
+          curVal = step.lookup(curVal);
           if (curVal === NONE) break;
         }
         return out ? new _Path(out) : this;
@@ -1356,7 +1321,7 @@ var init_path = __esm({
       lookup(v, dval = null) {
         let curVal = v;
         for (const step of this.steps) {
-          curVal = step.lookup(curVal, NONE);
+          curVal = step.lookup(curVal);
           if (curVal === NONE) return dval;
         }
         return curVal;
@@ -1369,7 +1334,7 @@ var init_path = __esm({
         const out = [root];
         let curVal = root;
         for (const step of this.steps) {
-          curVal = step.lookup(curVal, NONE);
+          curVal = step.lookup(curVal);
           if (curVal === NONE) break;
           out.push(curVal);
         }
@@ -1392,15 +1357,12 @@ var init_path = __esm({
         return produce(root, (draft) => {
           let parent = draft;
           for (let i = 0; i < this.steps.length - 1; i++) {
-            parent = this.steps[i].lookup(parent, NONE);
+            parent = this.steps[i].lookup(parent);
             if (parent === NONE) return;
           }
           this.steps.at(-1).setDraftValue(parent, v);
         });
       }
-      buildStack(stack) {
-        return walkItems(stack, this.steps, stack.renderPath ?? new DispatchPath(), this)?.[0] ?? null;
-      }
     };
     EMPTY_PATH = new Path([]);
     DispatchPath = class _DispatchPath {
@@ -1421,7 +1383,6 @@ var init_path = __esm({
         return new _DispatchPath(frames);
       }
       concat(steps) {
-        if (this.frames.length === 0) return _DispatchPath.ofSteps(steps);
         return this._withTopItems(this.top.items.concat(steps));
       }
       pushItem(step) {
@@ -1431,23 +1392,17 @@ var init_path = __esm({
         return new _DispatchPath(this.frames.concat({ base, items: [] }));
       }
       // Whether bubbling has anywhere left to go: another step in this frame, or a
-      // visual caller underneath it.
+      // visual caller underneath it. (A path always has at least one frame.)
       canPop() {
-        const n = this.frames.length;
-        return n > 1 || n === 1 && this.frames[0].items.length > 0;
-      }
-      isRoot() {
-        return this.toTransactionPath().steps.length === 0;
+        return this.frames.length > 1 || this.frames[0].items.length > 0;
       }
       // One component closer to the root. At the top of a frame that is popping back
       // to the visual caller, not to the producer's own parent — the caller is where
       // the `*name` was written, and where an unhandled message should keep going.
       popStep() {
-        const n = this.frames.length;
-        if (n === 0) return this;
-        const top = this.frames[n - 1];
+        const { top } = this;
         if (top.items.length > 0) return this._withTopItems(top.items.slice(0, -1));
-        if (n > 1) return new _DispatchPath(this.frames.slice(0, -1));
+        if (this.frames.length > 1) return new _DispatchPath(this.frames.slice(0, -1));
         return this;
       }
       // Drop frame-only steps inside every frame independently; a frame's base is
@@ -1469,8 +1424,8 @@ var init_path = __esm({
       // The active transaction address: the top frame's absolute base followed by
       // its ordinary descendant steps. This is where a mutation lands.
       toTransactionPath() {
-        const top = this.top;
-        return top === void 0 ? EMPTY_PATH : top.base.concat(top.items);
+        const { base, items } = this.top;
+        return base.concat(items);
       }
       // Rebuild the render stack this path was dispatched from. A frame with a base
       // re-enters at that absolute value first — replaying the resume a `*name`
@@ -1494,10 +1449,12 @@ var init_path = __esm({
         }
         return stack;
       }
-      static fromNodeAndEventName(node, eventName, rootNode, maxDepth, comps, stopOnNoEvent = true) {
+      // Reconstruct the dispatch position of a DOM event from the `data-*` stamps and
+      // `§…§` meta comments the renderer left on the way down. `stopOnNoEvent` is off for
+      // drag events, whose path is needed even where no handler is registered.
+      static fromNodeAndEventName(node, eventName, rootNode, comps, stopOnNoEvent = true) {
         const parts = [];
         const bubbles = BUBBLING_EVENTS.has(eventName);
-        let depth = 0;
         let eventIds = [];
         let handlers = null;
         let nodeRefs = [];
@@ -1523,7 +1480,7 @@ var init_path = __esm({
           nodeRefs = [];
           return true;
         };
-        while (node && node !== rootNode && depth < maxDepth) {
+        while (node && node !== rootNode) {
           if (node?.dataset) {
             const { eid, cid, vid, rp } = node.dataset;
             if (eid !== void 0) eventIds.push(eid);
@@ -1546,7 +1503,6 @@ var init_path = __esm({
               }
             }
           }
-          depth += 1;
           node = node.parentNode;
         }
         parts.reverse();
@@ -1581,13 +1537,6 @@ var init_path = __esm({
       resolveNode() {
         return this.comp.getNodeForId(+this.meta.nid, this.vid);
       }
-      applyKey(pi) {
-        if (pi === null) return null;
-        const m = this.meta;
-        if (m.si !== void 0) return pi.withIndex(+m.si);
-        if (m.sk !== void 0) return pi.withKey(m.sk);
-        return pi;
-      }
     };
     NO_EVENT_INFO = [null, null];
     BUBBLING_EVENTS = /* @__PURE__ */ new Set(["drop"]);
@@ -1615,14 +1564,6 @@ var init_path = __esm({
   }
 });
 
-// src/util/env.js
-var isMac;
-var init_env = __esm({
-  "src/util/env.js"() {
-    isMac = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
-  }
-});
-
 // src/value.js
 function sizeOf(v) {
   if (v == null) return null;
@@ -1759,25 +1700,12 @@ function _parsePredicate(s, tokens, px) {
   }
   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 val.kind;
-  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 NameVal) return K_NAME;
-  if (val instanceof EventMemberVal) return K_EVENT;
-  return 0;
-}
-var VALID_VAL_ID_RE, isValidValId, VALID_FLOAT_RE, STR_TPL_SPLIT_RE, mkVal, VAL_TOKEN_RE, tokenizeValue, unescapeStr, K_CONST, K_STRTPL, K_FIELD, K_BIND, K_DYN, K_NAME, K_SEQ, K_METHOD, K_EVENT, G_BOOL, G_TEXT, G_COMPONENT, G_SEQUENCE, G_PROVIDE, G_FIELD, G_VALUE, G_HANDLER_ARG, G_ALL, toNullIfNaN, predTruthy, PREDICATES, parseText, parseComponent, parseSequence, parseField, parseProvide, parseMacroAttr, parseReceiveHandler, parseAlterHandler, BaseVal, ConstVal, NULL_CONST_VAL, PredicateVal, VarVal, StrTplVal, NameVal, HandlerNameVal, mk404Handler, keyIs, macCtrl, nullSafe, EVENT_CONVENIENCES, EventMemberVal, RenderVal, RenderNameVal, BindVal, BindMemberVal, DynVal, FieldVal, MethodVal, SeqAccessVal;
+var isMac, VALID_VAL_ID_RE, isValidValId, VALID_FLOAT_RE, STR_TPL_SPLIT_RE, mkVal, VAL_TOKEN_RE, tokenizeValue, unescapeStr, K_CONST, K_STRTPL, K_FIELD, K_BIND, K_DYN, K_NAME, K_SEQ, K_METHOD, K_EVENT, G_BOOL, G_TEXT, G_COMPONENT, G_SEQUENCE, G_PROVIDE, G_FIELD, G_VALUE, G_HANDLER_ARG, G_ALL, toNullIfNaN, predTruthy, PREDICATES, parseText, parseComponent, parseSequence, parseField, parseProvide, parseMacroAttr, parseReceiveHandler, parseAlterHandler, kindOf, BaseVal, ConstVal, NULL_CONST_VAL, PredicateVal, StrTplVal, NameVal, HandlerNameVal, mk404Handler, keyIs, macCtrl, nullSafe, EVENT_CONVENIENCES, EventMemberVal, SigilNameVal, BindVal, BindMemberVal, DynVal, FieldVal, MethodVal, SeqAccessVal;
 var init_value = __esm({
   "src/value.js"() {
     init_collection();
     init_path();
-    init_env();
+    isMac = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
     VALID_VAL_ID_RE = /^[a-zA-Z][a-zA-Z0-9_]*\??$/;
     isValidValId = (name) => VALID_VAL_ID_RE.test(name);
     VALID_FLOAT_RE = /^-?[0-9]+(\.[0-9]+)?$/;
@@ -1824,9 +1752,10 @@ var init_value = __esm({
     parseMacroAttr = (s, px) => _parseSingle(s, px, G_ALL);
     parseReceiveHandler = (s, px) => _parseHandler(s, px, "receive", true, true, false);
     parseAlterHandler = (s, px) => _parseHandler(s, px, "alter", false, false, true)?.handlerVal ?? null;
+    kindOf = (val) => val?.kind ?? 0;
     BaseVal = class {
-      render(_stack, _rx) {
-      }
+      // No kind: never accepted by a group (PredicateVal, which only parseBool builds).
+      kind = 0;
       eval(_stack) {
       }
       toPathItem() {
@@ -1846,9 +1775,6 @@ var init_value = __esm({
         this.val = val;
         this.kind = kind;
       }
-      render(_stack, _rx) {
-        return this.val;
-      }
       eval(_stack) {
         return this.val;
       }
@@ -1874,9 +1800,7 @@ var init_value = __esm({
         return `${this.pred.name} ${this.args.map(String).join(" ")}`;
       }
     };
-    VarVal = class extends BaseVal {
-    };
-    StrTplVal = class _StrTplVal extends VarVal {
+    StrTplVal = class _StrTplVal extends BaseVal {
       constructor(vals) {
         super();
         this.vals = vals;
@@ -1889,9 +1813,6 @@ var init_value = __esm({
         for (const v of this.vals) if (!(v instanceof ConstVal) || v.fromMacroVar) return false;
         return true;
       }
-      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, "");
@@ -1928,7 +1849,8 @@ var init_value = __esm({
         return new _StrTplVal(lo === 0 && hi === vals.length ? vals : vals.slice(lo, hi));
       }
     };
-    NameVal = class extends VarVal {
+    NameVal = class extends BaseVal {
+      kind = K_NAME;
       constructor(name) {
         super();
         this.name = name;
@@ -1978,6 +1900,7 @@ var init_value = __esm({
       dragKey: nullSafe((info) => info.lookupBind("key"))
     };
     EventMemberVal = class extends BaseVal {
+      kind = K_EVENT;
       constructor(members) {
         super();
         this.members = members;
@@ -2000,24 +1923,21 @@ var init_value = __esm({
         return `e.${this.members.join(".")}`;
       }
     };
-    RenderVal = class extends BaseVal {
-      render(stack, _rx) {
-        return this.eval(stack);
-      }
-    };
-    RenderNameVal = class extends RenderVal {
+    SigilNameVal = class extends BaseVal {
       constructor(name) {
         super();
         this.name = name;
       }
+      toString() {
+        return this.sigil + this.name;
+      }
     };
-    BindVal = class extends RenderNameVal {
+    BindVal = class extends SigilNameVal {
+      kind = K_BIND;
+      sigil = "@";
       eval(stack) {
         return stack.lookupBind(this.name);
       }
-      toString() {
-        return `@${this.name}`;
-      }
     };
     BindMemberVal = class extends BindVal {
       constructor(name, member) {
@@ -2032,37 +1952,35 @@ var init_value = __esm({
         return `@${this.name}.${this.member}`;
       }
     };
-    DynVal = class extends RenderNameVal {
+    DynVal = class extends SigilNameVal {
+      kind = K_DYN;
+      sigil = "*";
       eval(stack) {
         return stack.lookupDynamic(this.name);
       }
-      toString() {
-        return `*${this.name}`;
-      }
     };
-    FieldVal = class extends RenderNameVal {
+    FieldVal = class extends SigilNameVal {
+      kind = K_FIELD;
+      sigil = ".";
       eval(stack) {
         return stack.lookupFieldRaw(this.name);
       }
       toPathItem() {
         return new FieldStep(this.name);
       }
-      toString() {
-        return `.${this.name}`;
-      }
     };
-    MethodVal = class extends RenderNameVal {
+    MethodVal = class extends SigilNameVal {
+      kind = K_METHOD;
+      sigil = "$";
       eval(stack) {
         return stack.lookupMethod(this.name);
       }
       evalAsHandler(stack) {
         return stack.lookupFieldRaw(this.name);
       }
-      toString() {
-        return `$${this.name}`;
-      }
     };
-    SeqAccessVal = class extends RenderVal {
+    SeqAccessVal = class extends BaseVal {
+      kind = K_SEQ;
       constructor(seqVal, keyVal) {
         super();
         this.seqVal = seqVal;
@@ -2097,11 +2015,11 @@ function parseDirectiveValue(px, directiveName, source, parser) {
 function parseIterationDirectives(attributes, px) {
   const parseNamed = (name) => {
     const attr = attributes.getNamedItem(`@${name}`);
-    return attr ? parseDirectiveValue(px, name, attr.value, parseAlterHandler) : null;
+    return attr ? parseIterDirective(px, name, attr.value) : null;
   };
   return { whenVal: parseNamed("when"), loopWithVal: parseNamed("loop-with") };
 }
-var Attributes, booleanAttrsRaw, booleanAttrs, AttrParser, ConstAttrs, DynAttrs, BaseAttr, Attr, ConstAttr, RawHtmlAttr, NOT_SET_VAL, IfAttr, EventHandler;
+var Attributes, booleanAttrsRaw, booleanAttrs, ITER_DIRECTIVES, parseIterDirective, AttrParser, ConstAttrs, DynAttrs, BaseAttr, Attr, ConstAttr, RawHtmlAttr, NOT_SET_VAL, IfAttr, EventHandler;
 var init_attribute = __esm({
   "src/attribute.js"() {
     init_value();
@@ -2109,15 +2027,18 @@ var init_attribute = __esm({
       constructor(items) {
         this.items = items;
       }
-      static parse(attributes, px, parseAll = false) {
-        return new AttrParser(px).parse(attributes, parseAll);
-      }
       isConstant() {
         return false;
       }
     };
     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";
     booleanAttrs = new Set(booleanAttrsRaw.split(","));
+    ITER_DIRECTIVES = {
+      when: "whenVal",
+      "loop-with": "loopWithVal",
+      "enrich-with": "enrichWithVal"
+    };
+    parseIterDirective = (px, name, s) => parseDirectiveValue(px, name, s, parseAlterHandler);
     AttrParser = class {
       constructor(px) {
         this.px = px;
@@ -2155,11 +2076,22 @@ var init_attribute = __esm({
           this.px.onParseIssue("bad-value", info);
         }
       }
-      parseThen(s) {
-        if (this.ifAttr) this.ifAttr.thenVal = parseText(s, this.px) ?? NOT_SET_VAL;
+      // `@then` / `@else` fill the branches of the `@if.<attr>` on the same element.
+      parseBranch(slot, name, s) {
+        if (this.ifAttr === null) return this._orphan(name, s, "if");
+        this.ifAttr[slot] = parseText(s, this.px) ?? NOT_SET_VAL;
+      }
+      // `@when` / `@loop-with` / `@enrich-with` amend the `@each` on the same element. A
+      // loop-less `@enrich-with` is a scope of its own; the other two need the loop.
+      parseIter(name, s) {
+        const val = parseIterDirective(this.px, name, s);
+        if (this.eachAttr !== null) this.eachAttr[ITER_DIRECTIVES[name]] = val;
+        else if (name === "enrich-with") this.pushWrapper("scope", s, val);
+        else this._orphan(name, s, "each");
       }
-      parseElse(value) {
-        if (this.ifAttr) this.ifAttr.elseVal = parseText(value, this.px) ?? NOT_SET_VAL;
+      // A directive that only means something next to another one, written alone.
+      _orphan(name, value, needs) {
+        this.px.onParseIssue("orphan-directive", { name, value, needs });
       }
       parseEvent(directiveName, value) {
         const [eventName, ...modifiers] = directiveName.slice(3).split("+");
@@ -2173,77 +2105,51 @@ var init_attribute = __esm({
           this.events.add(eventName, handler, modifiers);
         }
       }
-      _parseDirectiveValue(directiveName, s, parserFn) {
-        return parseDirectiveValue(this.px, directiveName, s, parserFn);
-      }
       parseDirective(s, directiveName) {
         switch (directiveName) {
           case "dangerouslysetinnerhtml":
             this.attrs ??= [];
-            this.attrs.push(new RawHtmlAttr(this._parseDirectiveValue(directiveName, s, parseText)));
+            this.attrs.push(new RawHtmlAttr(parseDirectiveValue(this.px, directiveName, s, parseText)));
             this.hasDynamic = true;
             return;
           case "push-view":
-            this.pushWrapper("push-view", s, this._parseDirectiveValue(directiveName, s, parseText));
+            this.pushWrapper("push-view", s, parseDirectiveValue(this.px, directiveName, s, parseText));
             return;
           case "text":
-            this.textChild = this._parseDirectiveValue(directiveName, s, parseText);
+            this.textChild = parseDirectiveValue(this.px, directiveName, s, parseText);
             return;
           case "show":
-            this.pushWrapper("show", s, this._parseDirectiveValue(directiveName, s, parseBool));
+            this.pushWrapper("show", s, parseDirectiveValue(this.px, directiveName, s, parseBool));
             return;
           case "hide":
-            this.pushWrapper("hide", s, this._parseDirectiveValue(directiveName, s, parseBool));
+            this.pushWrapper("hide", s, parseDirectiveValue(this.px, directiveName, s, parseBool));
             return;
           case "each": {
-            const val = this._parseDirectiveValue(directiveName, s, parseSequence);
+            const val = parseDirectiveValue(this.px, directiveName, s, parseSequence);
             this.eachAttr = this.pushWrapper("each", s, val);
             return;
           }
-          case "enrich-with":
-            if (this.eachAttr !== null)
-              this.eachAttr.enrichWithVal = this._parseDirectiveValue(
-                directiveName,
-                s,
-                parseAlterHandler
-              );
-            else
-              this.pushWrapper(
-                "scope",
-                s,
-                this._parseDirectiveValue(directiveName, s, parseAlterHandler)
-              );
-            return;
           case "when":
-            this._parseWhen(s);
-            return;
           case "loop-with":
-            this._parseLoopWith(s);
+          case "enrich-with":
+            this.parseIter(directiveName, s);
             return;
           case "then":
-            this.parseThen(s);
+            this.parseBranch("thenVal", directiveName, s);
             return;
           case "else":
-            this.parseElse(s);
+            this.parseBranch("elseVal", directiveName, 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 if (directiveName.startsWith("then.")) this.parseBranch("thenVal", directiveName, s);
+        else if (directiveName.startsWith("else.")) this.parseBranch("elseVal", directiveName, 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, parseAlterHandler);
-      }
-      _parseLoopWith(s) {
-        if (this.eachAttr !== null)
-          this.eachAttr.loopWithVal = this._parseDirectiveValue("loop-with", s, parseAlterHandler);
-      }
       parse(attributes, parseAll = false) {
         for (const { name, value } of attributes) {
           const charCode = name.charCodeAt(0);
@@ -2504,6 +2410,17 @@ function addChild(normalizedChildren, child) {
     else normalizedChildren.push(child);
   } else normalizedChildren.push(new VText(child));
 }
+function applyAttrs(node, attrs, placeChildren) {
+  const hasValue = "value" in attrs;
+  const hasChecked = "checked" in attrs;
+  if (hasValue || hasChecked) {
+    const { value: _v, checked: _c, ...rest } = attrs;
+    applyProperties(node, rest);
+  } else applyProperties(node, attrs);
+  placeChildren();
+  if (hasValue) applyValueLast(node, attrs.value);
+  if (hasChecked) setProp(node, "checked", attrs.checked, isNamespaced(node));
+}
 function diffProps(a, b) {
   if (a === b) return null;
   let diff = null;
@@ -2534,22 +2451,16 @@ function morphNode(domNode, source, target, opts) {
     }
     if (type3 === 1 && source.isSameKind(target)) {
       const propsDiff = diffProps(source.attrs, target.attrs);
-      const hasValue = propsDiff != null && "value" in propsDiff;
-      const hasChecked = propsDiff != null && "checked" in propsDiff;
-      if (propsDiff) {
-        if (hasValue || hasChecked) {
-          const { value: _v, checked: _c, ...rest } = propsDiff;
-          applyProperties(domNode, rest);
-        } else applyProperties(domNode, propsDiff);
-      }
-      if (!target.attrs.dangerouslySetInnerHTML) {
+      const placeChildren = () => {
+        if (target.attrs.dangerouslySetInnerHTML) return;
         const ns = effectiveNs(target, opts);
         morphChildren(domNode, source.childs, target.childs, childOpts(target, ns, opts));
+      };
+      if (propsDiff) applyAttrs(domNode, propsDiff, placeChildren);
+      else placeChildren();
+      if (!(propsDiff && "value" in propsDiff) && source.tag === "SELECT") {
+        if (target.attrs.value !== void 0) applyValueLast(domNode, target.attrs.value);
       }
-      if (hasValue) applyValueLast(domNode, propsDiff.value);
-      else if (source.tag === "SELECT" && target.attrs.value !== void 0)
-        applyValueLast(domNode, target.attrs.value);
-      if (hasChecked) setProp(domNode, "checked", propsDiff.checked, false);
       return domNode;
     }
     if (type3 === 11) {
@@ -2769,16 +2680,7 @@ var init_vdom = __esm({
         const createOpts = attrs.is != null ? { is: attrs.is } : void 0;
         const node = ns === null ? doc.createElement(tag, createOpts) : doc.createElementNS(ns, tag, createOpts);
         const cOpts = childOpts(this, ns, opts);
-        if ("value" in attrs || "checked" in attrs) {
-          const { value, checked, ...rest } = attrs;
-          applyProperties(node, rest);
-          appendChildNodes(node, this.childs, cOpts);
-          if (value !== void 0) applyValueLast(node, value);
-          if (checked !== void 0) setProp(node, "checked", checked, false);
-        } else {
-          applyProperties(node, attrs);
-          appendChildNodes(node, this.childs, cOpts);
-        }
+        applyAttrs(node, attrs, () => appendChildNodes(node, this.childs, cOpts));
         return node;
       }
     };
@@ -2797,13 +2699,6 @@ function renderTarget(val, stack) {
   const path = stack.renderPath.pushItem(step);
   return [val.eval(stack), path, stack.pendingFrame ? path.toTransactionPath() : null];
 }
-function optimizeChilds(childs) {
-  for (let i = 0; i < childs.length; i++) {
-    const child = childs[i];
-    if (child.isConstant()) childs[i] = new RenderOnceNode(child);
-    else child.optimize();
-  }
-}
 function optimizeNode(node) {
   if (node.isConstant()) return new RenderOnceNode(node);
   node.optimize();
@@ -2919,7 +2814,7 @@ function xOp(consumed = [], { wrappable = false, wrapper = null, ignoresChildren
   return { consumed: new Set(consumed), wrappable, wrapper, ignoresChildren };
 }
 function trimEdgeWhite(node) {
-  if (!node.isWhiteSpace?.()) return false;
+  if (!node.isWhiteSpace()) return false;
   node.condenseWhiteSpace();
   return true;
 }
@@ -2930,7 +2825,7 @@ function condenseChildsWhites(childs) {
   if (last > 0 && trimEdgeWhite(childs[last])) emptied = true;
   for (let i = 1; i < last; i++) {
     const cur = childs[i];
-    if (!(cur.isWhiteSpace?.() && cur.hasNewLine())) continue;
+    if (!(cur.isWhiteSpace() && cur.hasNewLine())) continue;
     const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
     cur.condenseWhiteSpace(bothBlock ? "" : " ");
     if (bothBlock) emptied = true;
@@ -2957,7 +2852,7 @@ function compileModifiers(eventName, names) {
     return w(this, f, args, ctx);
   };
 }
-var BaseNode, TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment, VALID_NODE_RE, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, IterInfo, X_OPS, WRAPPER_NODES, ParseContext, _htmlBlockTags, HTML_BLOCK_TAGS, isBlockDomNode, isEmptyText, isIgnorableXChild, hasMeaningfulChilds, View, NodeEvents, NodeEvent, fwdIfCtxPred, fwdIfEventPred, fwdIfKey, fwdCtrl, fwdMeta, fwdAlt, MOD_WRAPPERS_FOR_ANY_EVENT, MOD_WRAPPERS_BY_EVENT, MOD_EFFECTS, NO_WRAPPERS, identityModifierWrapper;
+var BaseNode, TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment, VALID_NODE_RE, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, IterInfo, X_OPS, WRAPPER_NODES, ParseContext, _htmlBlockTags, HTML_BLOCK_TAGS, isBlockDomNode, isEmptyText, isIgnorableXChild, hasMeaningfulChilds, NodeEvents, NodeEvent, fwdIfCtxPred, fwdIfEventPred, fwdIfKey, fwdCtrl, fwdMeta, fwdAlt, MOD_WRAPPERS_FOR_ANY_EVENT, MOD_WRAPPERS_BY_EVENT, MOD_EFFECTS, NO_WRAPPERS, identityModifierWrapper;
 var init_anode = __esm({
   "src/anode.js"() {
     init_attribute();
@@ -2969,8 +2864,11 @@ var init_anode = __esm({
       render(_stack, _rx) {
         return null;
       }
-      setDataAttr(key, val) {
-        console.warn("setDataAttr not implemented for", this, { key, val });
+      // Stamp a `data-*` attribute on the element(s) this node renders. A no-op for
+      // nodes that produce no element of their own (text, `<x render*>`): a view whose
+      // root is one of those records its component boundary in the `§Comp§` meta
+      // comment instead (see Renderer._rValComp).
+      setDataAttr(_key, _val) {
       }
       isConstant() {
         return false;
@@ -3009,8 +2907,6 @@ var init_anode = __esm({
       isConstant() {
         return true;
       }
-      setDataAttr(_key, _val) {
-      }
     };
     CommentNode = class extends TextNode {
       render(_stack, rx) {
@@ -3026,7 +2922,8 @@ var init_anode = __esm({
         return this.childs.every((v) => v.isConstant());
       }
       optimize() {
-        optimizeChilds(this.childs);
+        const { childs } = this;
+        for (let i = 0; i < childs.length; i++) childs[i] = optimizeNode(childs[i]);
       }
     };
     DomNode = class extends ChildsNode {
@@ -3038,8 +2935,7 @@ var init_anode = __esm({
       }
       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;
+        for (let i = 0; i < childNodes.length; i++) childNodes[i] = this.childs[i].render(stack, rx);
         return rx.renderTag(this.tagName, this.attrs.eval(stack), childNodes, this.namespace);
       }
       setDataAttr(key, val) {
@@ -3051,7 +2947,7 @@ var init_anode = __esm({
     };
     FragmentNode = class extends ChildsNode {
       render(stack, rx) {
-        return rx.renderFragment(this.childs.map((c) => c?.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);
@@ -3065,8 +2961,10 @@ var init_anode = __esm({
         this.nodeId = nodeId;
         this.val = val;
       }
-      toPathStep(ctx) {
-        return ctx.applyKey(this.val?.toPathItem?.() ?? null);
+      // The addressing step this node contributes to an event's dispatch path, given
+      // the `StepCtx` of the meta that named it; null when it addresses nothing.
+      toPathStep(_ctx) {
+        return this.val?.toPathItem?.() ?? null;
       }
       static parse(html, px) {
         const nodes = px.parseHTML(html);
@@ -3082,8 +2980,8 @@ var init_anode = __esm({
         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);
+        if (node.nodeType === 3) return new TextNode(node.textContent);
+        if (node.nodeType === 8) return new CommentNode(node.textContent);
         const { childNodes, attributes: attrs, tagName: tag } = node;
         const childs = [];
         for (let i = 0; i < childNodes.length; i++) {
@@ -3101,11 +2999,11 @@ var init_anode = __esm({
               const slotName = attrs.getNamedItem("name")?.value ?? "_";
               return px.frame.macroSlots[slotName] ?? maybeFragment(childs);
             }
-            const [nAttrs, wrappers] = Attributes.parse(attrs, px, true);
+            const [nAttrs, wrappers] = new AttrParser(px).parse(attrs, 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);
+            const [nAttrs, wrappers, textChild] = new AttrParser(px).parse(attrs);
             px.onAttributes(nAttrs, wrappers, textChild, false, tag);
             if (textChild) childs.unshift(new RenderTextNode(null, textChild));
             const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
@@ -3164,17 +3062,12 @@ var init_anode = __esm({
       evalViewName(stack) {
         return this.viewVal ? this.viewVal.eval(stack) : null;
       }
-      // A `<x render*>` produces no DOM element of its own to carry `data-cid`;
-      // when it is a view's root the component boundary is recorded in the `Comp`
-      // meta comment instead (see Renderer._rValComp), so this is a no-op.
-      setDataAttr(_key, _val) {
-      }
     };
     RenderNode = class extends RenderViewId {
       render(stack, rx) {
         const [value, renderPath, base] = renderTarget(this.val, stack);
         const newStack = stack.enter(value, {}, true, renderPath, false);
-        return rx.renderIt(newStack, this, "", this.evalViewName(stack), base);
+        return rx.renderIt(newStack, this, this.evalViewName(stack), base);
       }
       // A `*name` target contributes no step: the site recorded the absolute base it
       // resumed at, and event reconstruction turns that into a continuation frame.
@@ -3187,7 +3080,7 @@ var init_anode = __esm({
       render(stack, rx) {
         const base = stack.pendingFrame ? stack.renderPath.toTransactionPath() : null;
         const newStack = stack.enter(stack.it, {}, true, stack.renderPath, false);
-        return rx.renderIt(newStack, this, "", this.evalViewName(stack), base);
+        return rx.renderIt(newStack, this, this.evalViewName(stack), base);
       }
       toPathStep(ctx) {
         const next = ctx.next();
@@ -3204,9 +3097,6 @@ var init_anode = __esm({
       render(stack, _rx) {
         return this.val.eval(stack);
       }
-      // Renders to a text node, which can't carry `data-cid`.
-      setDataAttr(_key, _val) {
-      }
     };
     RenderOnceNode = class extends BaseNode {
       constructor(node) {
@@ -3281,13 +3171,29 @@ var init_anode = __esm({
     EachNode = class extends WrapperNode {
       constructor(nodeId, val) {
         super(nodeId, val);
-        this.iterInfo = new IterInfo(val, null, null, null);
+        this.iterInfo = new IterInfo();
       }
       render(stack, rx) {
         return rx.renderEachWhen(stack, this);
       }
+      // The sequence and the three loop handlers, resolved against `stack`.
+      evalIter(stack) {
+        const { whenVal, loopWithVal, enrichWithVal } = this.iterInfo;
+        return {
+          seq: this.val.eval(stack) ?? [],
+          filter: whenVal?.evalAsHandler(stack) ?? filterAlwaysTrue,
+          loopWith: loopWithVal?.evalAsHandler(stack) ?? nullLoopWith,
+          enricher: enrichWithVal?.evalAsHandler(stack) ?? null
+        };
+      }
+      // Rebuild the per-item binds for `key` (see iteration.js bindsForKey).
+      enrichBinds(stack, key) {
+        const { seq, filter, loopWith, enricher } = this.evalIter(stack);
+        const ctx = makeLoopCtx(stack, filter);
+        return bindsForKey({ seq, it: stack.it, loopWith, enricher, ctx }, key);
+      }
       toPathStep(ctx) {
-        return ctx.hasKey ? new EachBindStep(this.iterInfo, ctx.key) : null;
+        return ctx.hasKey ? new EachBindStep(this, ctx.key) : null;
       }
       // Where one item lives, for the render path. `@each` re-binds `it` to the item
       // whether or not the body is a component, so the position moves either way and
@@ -3300,24 +3206,10 @@ var init_anode = __esm({
       static register = true;
     };
     IterInfo = class {
-      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 };
-      }
-      // Rebuild the per-item binds for `key` (see iteration.js bindsForKey).
-      enrichBinds(stack, key) {
-        const { seq, filter, loopWith, enricher } = this.eval(stack);
-        const ctx = makeLoopCtx(stack, filter);
-        return bindsForKey({ seq, it: stack.it, loopWith, enricher, ctx }, key);
+      constructor() {
+        this.whenVal = null;
+        this.loopWithVal = null;
+        this.enrichWithVal = null;
       }
     };
     X_OPS = {
@@ -3342,26 +3234,31 @@ var init_anode = __esm({
       scope: ScopeNode,
       "push-view": PushViewNameNode
     };
-    ParseContext = class _ParseContext {
-      constructor(document2, Text, Comment, nodes, events2, macroNodes, frame, parent) {
-        this.nodes = nodes ?? [];
-        this.events = events2 ?? [];
-        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;
+    ParseContext = class {
+      constructor(document2 = globalThis.document) {
+        this.document = document2;
+        this.nodes = [];
+        this.events = [];
+        this.macroNodes = [];
+        this.parent = null;
+        this.frame = {};
         this.currentTag = null;
       }
       isInsideMacro(name) {
         return this.frame.macroName === name || this.parent?.isInsideMacro(name);
       }
+      // A macro body parses in a child context that shares every accumulator with
+      // its parent (nodes, events, macroNodes, and whatever a subclass collects) and
+      // differs only in its frame. Cloned rather than constructed so a subclass
+      // keeps collecting inside macro bodies without re-implementing this — the
+      // lint and class-set contexts used to lose (or had to copy) exactly that.
       enterMacro(macroName, macroVars, macroSlots) {
-        const { document: document2, Text, Comment, nodes, events: events2, macroNodes } = this;
-        const frame = { macroName, macroVars, macroSlots };
-        return new _ParseContext(document2, Text, Comment, nodes, events2, macroNodes, frame, this);
+        const child = Object.create(Object.getPrototypeOf(this));
+        return Object.assign(child, this, {
+          frame: { macroName, macroVars, macroSlots },
+          parent: this,
+          currentTag: null
+        });
       }
       parseHTML(html) {
         const t = this.document.createElement("template");
@@ -3426,33 +3323,8 @@ var init_anode = __esm({
       return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
     };
     isEmptyText = (c) => c instanceof TextNode && c.val === "";
-    isIgnorableXChild = (c) => c instanceof CommentNode || (c.isWhiteSpace?.() ?? false);
+    isIgnorableXChild = (c) => c instanceof CommentNode || c.isWhiteSpace();
     hasMeaningfulChilds = (childs) => childs.some((c) => !isIgnorableXChild(c));
-    View = class {
-      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) {
-        if (this.anode === null) {
-          throw new Error(
-            `tutuca: view "${this.name}" was rendered before it was compiled — its component is not registered in this app/scope. Source: ${String(this.rawView).slice(0, 80).replace(/\s+/g, " ")}…`
-          );
-        }
-        return this.anode.render(stack, rx);
-      }
-    };
     NodeEvents = class {
       constructor(id) {
         this.id = id;
@@ -3467,7 +3339,7 @@ var init_anode = __esm({
       getHandlersFor(eventName) {
         let r = null;
         for (const handler of this.handlers)
-          if (handler.handlesEventName(eventName)) {
+          if (handler.name === eventName) {
             r ??= [];
             r.push(handler);
           }
@@ -3481,9 +3353,6 @@ var init_anode = __esm({
         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);
@@ -3518,21 +3387,6 @@ var init_anode = __esm({
 });
 
 // src/stack.js
-function routeLookup(route, lex, dyn) {
-  for (let i = 0; i < route.length; i++) {
-    const leg = route[i];
-    if (leg === "dyn") {
-      const v = dyn();
-      if (v != null) return v;
-    } else if (leg === "lex") {
-      const v = lex();
-      if (v != null) return v;
-    } else {
-      console.warn("unknown lookup route leg", leg, '- expected "dyn" or "lex"');
-    }
-  }
-  return null;
-}
 function lookup(chain, name, dv = null) {
   let n = chain;
   while (n !== null) {
@@ -3605,9 +3459,9 @@ var init_stack = __esm({
         let has2 = false;
         const base = this._publishBase();
         for (const k in provide) {
-          const step = provide[k].val.toPathItem?.() ?? null;
+          const step = provide[k].toPathItem?.() ?? null;
           if (step === null) continue;
-          const value = provide[k].val.eval(this);
+          const value = provide[k].eval(this);
           binds[k] = { value, path: base === null ? null : base.concat([step]) };
           has2 = true;
         }
@@ -3687,7 +3541,7 @@ var init_stack = __esm({
           const value2 = path.lookup(this.root, NOT_FOUND);
           if (value2 !== NOT_FOUND) return { value: value2, path };
         }
-        const dval = comp.lookup[name]?.val ?? null;
+        const dval = comp.lookup[name] ?? null;
         if (dval === null) return null;
         const step = dval.toPathItem?.() ?? null;
         const value = dval.eval(this);
@@ -3708,9 +3562,10 @@ var init_stack = __esm({
         return fn instanceof Function ? fn.call(this.it) : null;
       }
       // The dispatched DOM event / drag info, read only by EventMemberVal's
-      // `e.<member>` handler args. Null outside a live event transaction.
+      // `e.<member>` handler args. Null outside a live event transaction (`ctx` is
+      // then a send/intent transaction, which carries no `e`).
       lookupEvent() {
-        return this.ctx?.event ?? null;
+        return this.ctx?.e ?? null;
       }
       lookupDragInfo() {
         return this.ctx?.dragInfo ?? null;
@@ -3733,10 +3588,9 @@ var init_stack = __esm({
 });
 
 // src/components.js
-var COMPONENT, Components, ComponentStack, ProvideInfo, LookupInfo, isString, _rawSpecKeys, KNOWN_SPEC_KEYS, _compId, Component;
+var COMPONENT, Components, ComponentStack, isString, _rawSpecKeys, KNOWN_SPEC_KEYS, COMPONENT_METHODS;
 var init_components = __esm({
   "src/components.js"() {
-    init_anode();
     init_stack();
     init_value();
     COMPONENT = /* @__PURE__ */ Symbol.for("tutuca.component");
@@ -3745,7 +3599,7 @@ var init_components = __esm({
         this.byId = /* @__PURE__ */ new Map();
       }
       registerComponent(Comp) {
-        this.byId.set(Comp[COMPONENT].id, Comp);
+        this.byId.set(Comp.id, Comp);
       }
       getComponentForId(id) {
         return this.byId.get(id) ?? null;
@@ -3765,7 +3619,7 @@ var init_components = __esm({
       }
       compileStyles() {
         const styles2 = [];
-        for (const Comp of this.byId.values()) styles2.push(Comp[COMPONENT].compileStyle());
+        for (const Comp of this.byId.values()) styles2.push(Comp.compileStyle());
         return styles2.join("\n");
       }
     };
@@ -3786,7 +3640,7 @@ var init_components = __esm({
         if (paths) this.registerPaths(paths);
         for (let i = 0; i < comps.length; i++) {
           const Comp = comps[i];
-          Comp[COMPONENT].scope = this.enter();
+          Comp.scope = this.enter();
           this.comps.registerComponent(Comp);
           this.byName[Comp.name] = Comp;
         }
@@ -3812,7 +3666,7 @@ var init_components = __esm({
             console.warn("registerPaths: a type name has no path", name);
             continue;
           }
-          this.paths[name] = paths[name].toPath?.() ?? paths[name];
+          this.paths[name] = paths[name].toPath();
         }
       }
       lookupPath(name) {
@@ -3864,77 +3718,41 @@ var init_components = __esm({
         return this.macros[name] ?? this.parent?.lookupMacro(name) ?? null;
       }
     };
-    ProvideInfo = class {
-      constructor(val) {
-        this.val = val;
-      }
-    };
-    LookupInfo = class {
-      constructor(val) {
-        this.val = val;
-      }
-    };
     isString = (v) => typeof v === "string";
     _rawSpecKeys = "name view style commonStyle globalStyle receive intent alter views provide lookup fields methods statics";
     KNOWN_SPEC_KEYS = new Set(_rawSpecKeys.split(" "));
-    _compId = 0;
-    Component = class {
-      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.receive = o.receive ?? {};
-        this.intent = o.intent ?? {};
-        this.alter = o.alter ?? {};
-        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._rawProvide = o.provide ?? {};
-        this._rawLookup = o.lookup ?? [];
-        this.provide = {};
-        this.provideType = {};
-        this.lookup = {};
-        this.scope = null;
-        this.spec = o;
-        this.extra = {};
-        for (const key of Object.keys(o)) if (!KNOWN_SPEC_KEYS.has(key)) this.extra[key] = o[key];
-      }
+    COMPONENT_METHODS = {
       compile(ParseContext2) {
         for (const name in this.views)
           this.views[name].compile(new ParseContext2(), this.scope, this.id);
         const ctx = this.views.main.ctx;
         for (const key in this._rawProvide) {
           if (isTypeName(key)) {
-            if (this._rawProvide[key] === "self") this.provideType[key] = this.Class;
+            if (this._rawProvide[key] === "self") this.provideType[key] = this;
             continue;
           }
           const val = parseProvide(this._rawProvide[key], ctx);
-          if (val) this.provide[key] = new ProvideInfo(val);
+          if (val) this.provide[key] = val;
         }
         for (const entry of this._rawLookup) {
           const name = isString(entry) ? entry : isString(entry?.name) ? entry.name : null;
           if (name === null) continue;
           const defStr = isString(entry?.default) ? entry.default : null;
-          this.lookup[name] = new LookupInfo(defStr === null ? null : parseField(defStr, ctx));
+          this.lookup[name] = defStr === null ? null : parseField(defStr, ctx);
         }
         for (const key in this.lookup)
           if (this.provide[key] !== void 0)
             console.warn("name declared in both provide and lookup", this.name, key);
-      }
+      },
       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);
-      }
+      },
+      getEventForId(id, viewName) {
+        return this.getView(viewName).ctx.getEventForId(id);
+      },
+      getNodeForId(id, viewName) {
+        return this.getView(viewName).ctx.getNodeForId(id);
+      },
       compileStyle() {
         const { id, commonStyle, globalStyle, views } = this;
         const styles2 = commonStyle ? [`[data-cid="${id}"]{${commonStyle}}`] : [];
@@ -3949,6 +3767,63 @@ var init_components = __esm({
   }
 });
 
+// src/util/parsectx.js
+var ParseCtxClassSetCollector;
+var init_parsectx = __esm({
+  "src/util/parsectx.js"() {
+    init_anode();
+    init_value();
+    ParseCtxClassSetCollector = class extends ParseContext {
+      constructor(...args) {
+        super(...args);
+        this.classes = /* @__PURE__ */ new Set();
+      }
+      _addClasses(s) {
+        for (const v of s.split(/\s+/)) {
+          this.classes.add(v);
+        }
+      }
+      onAttributes(attrs, _wrapperAttrs, _textChild, _isMacroCall, _tag) {
+        if (Array.isArray(attrs.items)) {
+          for (const attr of attrs.items) {
+            if (attr.name !== "class") {
+              continue;
+            }
+            const { val, thenVal, elseVal } = attr;
+            if (thenVal !== void 0) {
+              this._maybeAddVal(thenVal);
+              this._maybeAddVal(elseVal);
+            } else {
+              this._maybeAddVal(val);
+            }
+          }
+        } else {
+          const attr = attrs.items.class;
+          if (attr) {
+            this._addClasses(attr);
+          }
+        }
+      }
+      _maybeAddVal(value) {
+        if (!this._maybeAddStrTpl(value) && typeof value?.val === "string") {
+          this._addClasses(value.val);
+        }
+      }
+      _maybeAddStrTpl(value) {
+        if (value?.vals !== void 0) {
+          for (const val of value.vals) {
+            if (val instanceof ConstVal && val.val !== "") {
+              this._addClasses(val.val);
+            }
+          }
+          return true;
+        }
+        return false;
+      }
+    };
+  }
+});
+
 // tools/core/html-tokenizer.js
 function isWhitespace(c) {
   return c === CharCodes.Space || c === CharCodes.NewLine || c === CharCodes.Tab || c === CharCodes.FormFeed || c === CharCodes.CarriageReturn;
@@ -6900,7 +6775,7 @@ function checkLookupsHaveProviders(lx, Comp) {
   for (const name in Comp.lookup) {
     if (isTypeName2(name)) continue;
     if (scope.hasProvider?.(name) || scope.lookupPath?.(name)) continue;
-    const info = { name, hasDefault: Comp.lookup[name].val != null };
+    const info = { name, hasDefault: Comp.lookup[name] != null };
     if (info.hasDefault) lx.hint(LOOKUP_NO_PROVIDER, info);
     else lx.error(LOOKUP_NO_PROVIDER, info);
   }
@@ -6921,11 +6796,12 @@ function checkUnreferencedDynamics(lx, Comp, referencedDynamics) {
     }
   }
 }
-var KNOWN_COMPONENT_SPEC_KEYS, EMPTY_SET, FRAMEWORK_WELL_KNOWN_EXTRAS, KNOWN_DIRECTIVE_NAMES, isTypeName2, ALT_HANDLER_NOT_DEFINED, ALT_HANDLER_NOT_REFERENCED, DYN_VAL_NOT_DEFINED, DYN_ALIAS_NOT_REFERENCED, PROVIDE_NOT_ADDRESSABLE, PROVIDE_TYPE_BAD_SHAPE, LOOKUP_BAD_SHAPE, LOOKUP_NO_PROVIDER, RENDER_IT_OUTSIDE_OF_LOOP, UNKNOWN_EVENT_MODIFIER, RECEIVE_HANDLER_NOT_IMPLEMENTED, EVENT_HANDLER_METHOD_NOT_ALLOWED, HANDLER_NAME_COLLISION, FIELD_VAL_NOT_DEFINED, FIELD_VAL_IS_METHOD, METHOD_VAL_NOT_DEFINED, METHOD_VAL_IS_FIELD, DUPLICATE_ATTR_DEFINITION, IF_NO_BRANCH_SET, UNKNOWN_COMPONENT_NAME, UNKNOWN_MACRO_ARG, UNKNOWN_DIRECTIVE, UNKNOWN_X_OP, UNKNOWN_X_ATTR, X_OP_IGNORES_CHILDREN, MAYBE_DROP_AT_PREFIX, MAYBE_ADD_AT_PREFIX, BAD_VALUE, UNSUPPORTED_EXPR_SYNTAX, BINDING_MEMBER_TOO_DEEP, SUGGEST_BINDING_MEMBER, REDUNDANT_TEMPLATE_STRING, PLACEHOLDERLESS_TEMPLATE_STRING, CONSTANT_CONDITION, UNKNOWN_COMPONENT_SPEC_KEY, COMP_FIELD_BAD_SHAPE, ASYNC_HANDLER, TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE, GLOBAL_SELECTOR_IN_SCOPED_STYLE, FIELD_METHOD_NAME_COLLISION, X_KNOWN_OP_NAMES, X_KNOWN_ATTR_NAMES, HOST_DIRECTIVE_ONLY_NAMES, LEVEL_WARN2, LEVEL_ERROR2, LEVEL_HINT, PARSE_ISSUES, BINDING_MEMBER_TOO_DEEP_RE, UNSUPPORTED_EXPR_GUIDANCE, HTML_LINT_OPTS, NO_WRAPPERS2, ANY_EVENT_MODIFIERS, fixTo, BOOL_CONDITION_ORIGINS, isBoolConditionCtx, ATTR_VAL_CHECKERS, NODE_KIND_TO_CTX, HANDLER_CHANNELS, ASYNC_HANDLER_HELP, NON_NESTABLE_AT_RULE, GLOBAL_LEADING_SELECTOR, IGNORE_DIRECTIVE, blankRun, STYLE_TO_GLOBAL_HELP, KNOWN_LOOKUP_KEYS, LintContext, LintParseContext;
+var KNOWN_COMPONENT_SPEC_KEYS, EMPTY_SET, FRAMEWORK_WELL_KNOWN_EXTRAS, KNOWN_DIRECTIVE_NAMES, isTypeName2, ALT_HANDLER_NOT_DEFINED, ALT_HANDLER_NOT_REFERENCED, DYN_VAL_NOT_DEFINED, DYN_ALIAS_NOT_REFERENCED, PROVIDE_NOT_ADDRESSABLE, PROVIDE_TYPE_BAD_SHAPE, LOOKUP_BAD_SHAPE, LOOKUP_NO_PROVIDER, RENDER_IT_OUTSIDE_OF_LOOP, UNKNOWN_EVENT_MODIFIER, RECEIVE_HANDLER_NOT_IMPLEMENTED, EVENT_HANDLER_METHOD_NOT_ALLOWED, HANDLER_NAME_COLLISION, FIELD_VAL_NOT_DEFINED, FIELD_VAL_IS_METHOD, METHOD_VAL_NOT_DEFINED, METHOD_VAL_IS_FIELD, DUPLICATE_ATTR_DEFINITION, IF_NO_BRANCH_SET, UNKNOWN_COMPONENT_NAME, UNKNOWN_MACRO_ARG, UNKNOWN_DIRECTIVE, ORPHAN_DIRECTIVE, UNKNOWN_X_OP, UNKNOWN_X_ATTR, X_OP_IGNORES_CHILDREN, MAYBE_DROP_AT_PREFIX, MAYBE_ADD_AT_PREFIX, BAD_VALUE, UNSUPPORTED_EXPR_SYNTAX, BINDING_MEMBER_TOO_DEEP, SUGGEST_BINDING_MEMBER, REDUNDANT_TEMPLATE_STRING, PLACEHOLDERLESS_TEMPLATE_STRING, CONSTANT_CONDITION, UNKNOWN_COMPONENT_SPEC_KEY, COMP_FIELD_BAD_SHAPE, ASYNC_HANDLER, TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE, GLOBAL_SELECTOR_IN_SCOPED_STYLE, FIELD_METHOD_NAME_COLLISION, X_KNOWN_OP_NAMES, X_KNOWN_ATTR_NAMES, HOST_DIRECTIVE_ONLY_NAMES, LEVEL_WARN2, LEVEL_ERROR2, LEVEL_HINT, PARSE_ISSUES, BINDING_MEMBER_TOO_DEEP_RE, UNSUPPORTED_EXPR_GUIDANCE, HTML_LINT_OPTS, NO_WRAPPERS2, ANY_EVENT_MODIFIERS, fixTo, BOOL_CONDITION_ORIGINS, isBoolConditionCtx, ATTR_VAL_CHECKERS, NODE_KIND_TO_CTX, HANDLER_CHANNELS, ASYNC_HANDLER_HELP, NON_NESTABLE_AT_RULE, GLOBAL_LEADING_SELECTOR, IGNORE_DIRECTIVE, blankRun, STYLE_TO_GLOBAL_HELP, KNOWN_LOOKUP_KEYS, LintContext, LintParseContext;
 var init_lint_check = __esm({
   "tools/core/lint-check.js"() {
     init_anode();
     init_components();
+    init_parsectx();
     init_htmllinter();
     init_closest_name();
     KNOWN_COMPONENT_SPEC_KEYS = new Set(
@@ -6975,6 +6851,7 @@ var init_lint_check = __esm({
     UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME";
     UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG";
     UNKNOWN_DIRECTIVE = "UNKNOWN_DIRECTIVE";
+    ORPHAN_DIRECTIVE = "ORPHAN_DIRECTIVE";
     UNKNOWN_X_OP = "UNKNOWN_X_OP";
     UNKNOWN_X_ATTR = "UNKNOWN_X_ATTR";
     X_OP_IGNORES_CHILDREN = "X_OP_IGNORES_CHILDREN";
@@ -7009,6 +6886,7 @@ var init_lint_check = __esm({
     LEVEL_HINT = "hint";
     PARSE_ISSUES = {
       "unknown-directive": { id: UNKNOWN_DIRECTIVE, candidates: KNOWN_DIRECTIVE_NAMES },
+      "orphan-directive": { id: ORPHAN_DIRECTIVE },
       "unknown-x-op": { id: UNKNOWN_X_OP, candidates: X_KNOWN_OP_NAMES, atPrefix: X_KNOWN_OP_NAMES },
       "unknown-x-attr": {
         id: UNKNOWN_X_ATTR,
@@ -7163,13 +7041,14 @@ var init_lint_check = __esm({
         this.reports.push({ id, info, level, context: { ...this.frame }, suggestion });
       }
     };
-    LintParseContext = class extends ParseContext {
-      constructor(document2, Text, Comment) {
-        super(document2, Text, Comment);
+    LintParseContext = class extends ParseCtxClassSetCollector {
+      constructor(document2) {
+        super(document2);
         this.attrs = [];
         this.parseIssues = [];
       }
       onAttributes(attrs, wrapperAttrs, textChild, isMacroCall = false, tag = null) {
+        super.onAttributes(attrs, wrapperAttrs, textChild, isMacroCall, tag);
         this.attrs.push({ attrs, wrapperAttrs, textChild, isMacroCall, tag });
       }
       onParseIssue(kind, info) {
@@ -7325,6 +7204,12 @@ var init_lint_rules = __esm({
         group: "Templates / events",
         summary: "`@directive` name is not recognized (typo or unsupported)."
       },
+      {
+        code: ORPHAN_DIRECTIVE,
+        level: "error",
+        group: "Templates / events",
+        summary: "`@when` / `@loop-with` without an `@each`, or `@then` / `@else` without an `@if`, on the same element — the directive is ignored."
+      },
       {
         code: UNKNOWN_X_OP,
         level: "error",
@@ -7593,6 +7478,8 @@ function lintIdToMessage(id, info) {
       return `Argument '${info.name}' is not declared in macro '${info.macroName}'`;
     case "UNKNOWN_DIRECTIVE":
       return `Unknown directive '@${info.name}=${JSON.stringify(info.value)}'${fmtTagSuffix(info)}`;
+    case "ORPHAN_DIRECTIVE":
+      return `'@${info.name}=${JSON.stringify(info.value)}' needs an '@${info.needs}' on the same element — it was ignored${fmtTagSuffix(info)}`;
     case "UNKNOWN_X_OP":
       return `Unknown <x> op '${info.name}=${JSON.stringify(info.value)}'${fmtTagSuffix(info)}`;
     case "UNKNOWN_X_ATTR":
@@ -13064,45 +12951,6 @@ var init_list = __esm({
 });
 
 // src/oo.js
-function mkCompField(field, scope, args) {
-  const Comp = scope?.lookupComponent(field.type) ?? null;
-  if (Comp === null)
-    console.warn(
-      scope ? `component field "${field.name}": component "${field.type}" not found in scope` : `component field "${field.name}": cannot resolve component "${field.type}" — built without a registered scope (use ${field.type}.make({}) as the default, or build via a registered component)`
-    );
-  return Comp?.make({ ...field.args, ...args }, { scope }) ?? null;
-}
-function fieldFromDescriptor(name, value) {
-  const FieldCls = fieldsByTypeName[value.type] ?? FieldAny;
-  const probe = new FieldCls(name);
-  return [FieldCls, probe.coerceOr(value.defaultValue, probe.defaultValue)];
-}
-function classFromData(name, { fields = {}, methods, statics }) {
-  const b = new ClassBuilder(name);
-  for (const field in fields) {
-    const value = fields[field];
-    const type3 = typeof value;
-    if (type3 === "string") b.addField(field, value, FieldString);
-    else if (type3 === "number") b.addField(field, value, FieldFloat);
-    else if (type3 === "boolean") b.addField(field, value, FieldBool);
-    else if (Array.isArray(value)) b.addField(field, [...value], FieldList);
-    else if (value instanceof Set) b.addField(field, new Set(value), FieldSet);
-    else if (value instanceof Map) b.addField(field, new Map(value), FieldMap);
-    else if (value?.type && Object.hasOwn(value, "defaultValue")) {
-      const [FieldCls, dval] = fieldFromDescriptor(field, value);
-      b.addField(field, dval, FieldCls);
-    } else if (value?.component && value?.args !== void 0)
-      b.addCompField(field, value.component, value.args);
-    else if (isPlainObject(value)) b.addField(field, { ...value }, FieldObject);
-    else {
-      const FieldCls = value?.[FIELD_CLASS] ?? FieldAny;
-      b.addField(field, value, FieldCls);
-    }
-  }
-  if (methods) b.methods(methods);
-  if (statics) b.statics(statics);
-  return b.build();
-}
 function validateDraftFields(current2, draft) {
   const meta = metaOf(current2);
   if (!meta) return;
@@ -13117,226 +12965,41 @@ function validateDraftFields(current2, draft) {
     }
   }
 }
-function assertNoReservedComponentStatics(statics = {}) {
-  for (const name in statics) {
-    if (RESERVED_COMPONENT_STATICS.has(name)) {
-      throw new TypeError(`component static "${name}" is reserved by the framework`);
-    }
-  }
-}
-var BAD_VALUE2, nullCoercer, Field, CHECK_TYPE_ANY, CHECK_TYPE_INT, CHECK_TYPE_FLOAT, CHECK_TYPE_BOOL, CHECK_TYPE_STRING, CHECK_TYPE_LIST, CHECK_TYPE_OBJECT, CHECK_TYPE_MAP, CHECK_TYPE_SET, COERCE_NONE, COERCE_BOOL, COERCE_STRING, COERCE_INT, COERCE_LIST, COERCE_OBJECT, COERCE_MAP, COERCE_SET, FieldBool, FieldAny, FieldString, FieldInt, FieldFloat, metaOf, getTypeName, FieldComp, FieldList, FieldObject, FieldMap, FieldSet, ClassBuilder, FIELD_CLASS, fieldsByTypeName, META_KEYS, RESERVED_COMPONENT_STATICS;
+var BAD_VALUE2, COERCE_NONE, COERCE_MAP, FIELD_TYPES, metaOf, RESERVED_COMPONENT_STATICS;
 var init_oo = __esm({
   "src/oo.js"() {
     init_collection();
     init_components();
-    init_immer2();
     BAD_VALUE2 = /* @__PURE__ */ Symbol("BadValue");
-    nullCoercer = (v) => v;
-    Field = class {
-      constructor(type3, name, typeCheck, coercer, defaultValue = null) {
-        this.type = type3;
-        this.name = name;
-        this.typeCheck = typeCheck;
-        this.coercer = coercer;
-        this.defaultValue = defaultValue;
-      }
-      isValid(v) {
-        return this.typeCheck(v);
-      }
-      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);
-      }
-    };
-    CHECK_TYPE_ANY = (_v) => true;
-    CHECK_TYPE_INT = Number.isInteger;
-    CHECK_TYPE_FLOAT = Number.isFinite;
-    CHECK_TYPE_BOOL = (v) => typeof v === "boolean";
-    CHECK_TYPE_STRING = (v) => typeof v === "string";
-    CHECK_TYPE_LIST = Array.isArray;
-    CHECK_TYPE_OBJECT = isPlainObject;
-    CHECK_TYPE_MAP = (v) => v instanceof Map;
-    CHECK_TYPE_SET = (v) => v instanceof Set;
     COERCE_NONE = (_v) => null;
-    COERCE_BOOL = (v) => !!v;
-    COERCE_STRING = (v) => v?.toString?.() ?? "";
-    COERCE_INT = (v) => Number.isFinite(v) ? Math.trunc(v) : null;
-    COERCE_LIST = (v) => Array.isArray(v) ? [...v] : null;
-    COERCE_OBJECT = (v) => isPlainObject(v) ? { ...v } : null;
     COERCE_MAP = (v) => {
       if (v instanceof Map) return new Map(v);
       if (Array.isArray(v) || isPlainObject(v))
         return new Map(Array.isArray(v) ? v : Object.entries(v));
       return null;
     };
-    COERCE_SET = (v) => v instanceof Set || Array.isArray(v) ? new Set(v) : null;
-    FieldBool = class extends Field {
-      constructor(name, defaultValue = false) {
-        super("bool", name, CHECK_TYPE_BOOL, COERCE_BOOL, defaultValue);
-      }
-    };
-    FieldAny = class extends Field {
-      constructor(name, defaultValue = null) {
-        super("any", name, CHECK_TYPE_ANY, nullCoercer, defaultValue);
-      }
-    };
-    FieldString = class extends Field {
-      constructor(name, defaultValue = "") {
-        super("text", name, CHECK_TYPE_STRING, COERCE_STRING, defaultValue);
-      }
-    };
-    FieldInt = class extends Field {
-      constructor(name, defaultValue = 0) {
-        super("int", name, CHECK_TYPE_INT, COERCE_INT, defaultValue);
-      }
-    };
-    FieldFloat = class extends Field {
-      constructor(name, defaultValue = 0) {
-        super("float", name, CHECK_TYPE_FLOAT, COERCE_NONE, defaultValue);
-      }
-    };
-    metaOf = (v) => v?.constructor?.[COMPONENT] ?? v?.constructor?.getMetaClass?.();
-    getTypeName = (v) => metaOf(v)?.name ?? null;
-    FieldComp = class extends Field {
-      constructor(type3, name, args) {
-        super(type3, name, (v) => getTypeName(v) === type3, nullCoercer, null);
-        this.args = args;
-      }
-    };
-    FieldList = class extends Field {
-      constructor(name, defaultValue = []) {
-        super("list", name, CHECK_TYPE_LIST, COERCE_LIST, defaultValue);
-      }
-    };
-    FieldObject = class extends Field {
-      constructor(name, defaultValue = {}) {
-        super("object", name, CHECK_TYPE_OBJECT, COERCE_OBJECT, defaultValue);
-      }
-    };
-    FieldMap = class extends Field {
-      constructor(name, defaultValue = /* @__PURE__ */ new Map()) {
-        super("map", name, CHECK_TYPE_MAP, COERCE_MAP, defaultValue);
-      }
-    };
-    FieldSet = class extends Field {
-      constructor(name, defaultValue = /* @__PURE__ */ new Set()) {
-        super("set", name, CHECK_TYPE_SET, COERCE_SET, defaultValue);
-      }
+    FIELD_TYPES = {
+      any: [(_v) => true, COERCE_NONE, () => null],
+      text: [(v) => typeof v === "string", (v) => v?.toString?.() ?? "", () => ""],
+      int: [Number.isInteger, (v) => Number.isFinite(v) ? Math.trunc(v) : null, () => 0],
+      float: [Number.isFinite, COERCE_NONE, () => 0],
+      bool: [(v) => typeof v === "boolean", (v) => !!v, () => false],
+      list: [Array.isArray, (v) => Array.isArray(v) ? [...v] : null, () => []],
+      object: [isPlainObject, (v) => isPlainObject(v) ? { ...v } : null, () => ({})],
+      map: [(v) => v instanceof Map, COERCE_MAP, () => /* @__PURE__ */ new Map()],
+      set: [
+        (v) => v instanceof Set,
+        (v) => v instanceof Set || Array.isArray(v) ? new Set(v) : null,
+        () => /* @__PURE__ */ new Set()
+      ]
     };
-    ClassBuilder = class {
-      constructor(name) {
-        this.name = name;
-        this.fields = {};
-        this.compFields = /* @__PURE__ */ new Set();
-        this._methods = {};
-        this._statics = {};
-      }
-      build() {
-        const { name, fields, compFields, _methods } = this;
-        const defaults = Object.fromEntries(
-          Object.entries(fields).map(([fieldName, field]) => [fieldName, field.defaultValue])
-        );
-        const Class = {
-          [name]: class {
-            constructor(values = {}) {
-              Object.assign(this, defaults, values);
-            }
-          }
-        }[name];
-        Class[DRAFTABLE] = true;
-        Object.assign(Class.prototype, _methods);
-        const metaClass = { fields, name, methods: _methods };
-        Object.assign(
-          Class,
-          {
-            getMetaClass: () => metaClass,
-            make(inArgs = {}, opts = {}) {
-              const args = {};
-              const scope = opts.scope ?? this[COMPONENT]?.scope ?? this.scope;
-              for (const key in inArgs) {
-                const field = fields[key];
-                if (compFields.has(key)) args[key] = mkCompField(field, scope, inArgs[key]);
-                else if (field === void 0)
-                  console.warn("extra argument to constructor:", name, key, inArgs);
-                else args[key] = field.coerceOrDefault(inArgs[key]);
-              }
-              for (const key of compFields)
-                if (args[key] === void 0) args[key] = mkCompField(fields[key], scope, inArgs[key]);
-              return freeze(new this(args), true);
-            }
-          },
-          this._statics
-        );
-        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, type3, args) {
-        const field = new FieldComp(type3, name, args);
-        this.compFields.add(name);
-        this.fields[name] = field;
-        return field;
-      }
-    };
-    FIELD_CLASS = /* @__PURE__ */ Symbol.for("tutuca.fieldClass");
-    fieldsByTypeName = {
-      text: FieldString,
-      int: FieldInt,
-      float: FieldFloat,
-      bool: FieldBool,
-      list: FieldList,
-      object: FieldObject,
-      map: FieldMap,
-      set: FieldSet,
-      any: FieldAny
-    };
-    META_KEYS = "name id fields methods views receive intent alter provide provideType lookup spec extra commonStyle globalStyle scope _rawProvide _rawLookup".split(
-      " "
-    );
+    metaOf = (v) => v?.constructor?.getMetaClass?.();
     RESERVED_COMPONENT_STATICS = /* @__PURE__ */ new Set([
-      ...META_KEYS,
-      "make",
-      "getMetaClass",
-      ...Object.getOwnPropertyNames(Component.prototype)
+      ..."name id fields methods views receive intent alter provide provideType lookup spec extra commonStyle globalStyle scope _rawProvide _rawLookup make getMetaClass".split(
+        " "
+      ),
+      ...Object.keys(COMPONENT_METHODS)
     ]);
-    Component.fromSpec = (opts) => {
-      assertNoReservedComponentStatics(opts.statics);
-      const Class = classFromData(opts.name, opts);
-      const comp = new Component(Class, opts);
-      const metaClass = Class.getMetaClass();
-      comp.fields = metaClass.fields;
-      comp.methods = metaClass.methods;
-      Class.getMetaClass = () => comp;
-      Class[COMPONENT] = comp;
-      for (const key of META_KEYS)
-        if (!Object.hasOwn(Class, key))
-          Object.defineProperty(Class, key, {
-            get() {
-              return comp[key];
-            },
-            set(v) {
-              comp[key] = v;
-            },
-            configurable: true
-          });
-      for (const key of Object.getOwnPropertyNames(Component.prototype))
-        if (key !== "constructor" && !Object.hasOwn(Class, key))
-          Class[key] = (...args) => comp[key](...args);
-      return Class;
-    };
   }
 });
 
@@ -13344,6 +13007,17 @@ var init_oo = __esm({
 function nullHandler() {
   return this;
 }
+function subscribe(list, cb) {
+  list.push(cb);
+  return () => {
+    const i = list.indexOf(cb);
+    if (i !== -1) list.splice(i, 1);
+  };
+}
+function warnUnknownLeg(what, leg) {
+  console.warn(`unknown ${what} route leg`, leg, '- expected "dyn" or "lex"');
+  return null;
+}
 function warnNotIntent(verb) {
   console.warn(`ctx.${verb}() is only meaningful in an "intent" handler - ignored`);
 }
@@ -13396,14 +13070,7 @@ var init_transactor = __esm({
       // carry: kind, name, args, path, pathKeys, targetPath, handler, handlerName,
       // matched, before, after, parent, timestamp. Purely observational.
       observe(cb) {
-        this._observers.push(cb);
-        return () => {
-          const i = this._observers.indexOf(cb);
-          if (i !== -1) this._observers.splice(i, 1);
-        };
-      }
-      _emit(record) {
-        for (const cb of this._observers) cb(record);
+        return subscribe(this._observers, cb);
       }
       // Record a refusal: a dispatch the runtime could not carry out. Kinds are
       // open strings; today the runtime raises NO_HANDLER (a receive name with no
@@ -13422,11 +13089,7 @@ var init_transactor = __esm({
       // Subscribe to refusal records as they happen. Returns an unsubscribe fn,
       // like observe().
       observeRefusals(cb) {
-        this._refusalObservers.push(cb);
-        return () => {
-          const i = this._refusalObservers.indexOf(cb);
-          if (i !== -1) this._refusalObservers.splice(i, 1);
-        };
+        return subscribe(this._refusalObservers, cb);
       }
       // Build and dispatch one observer record. Pins field-resolved keys (e.g. a
       // `.a[.selId]` render target reconstructed from a DOM event) against the root the
@@ -13435,7 +13098,7 @@ var init_transactor = __esm({
       _emitRecord(root, { kind, name, args, path, targetPath, handler, handlerName, matched, before, after, parent }) {
         if (this._observers.length === 0) return;
         const pinned = path.pinKeys(root);
-        this._emit({
+        const record = {
           kind,
           name,
           args: args ?? null,
@@ -13449,14 +13112,14 @@ var init_transactor = __esm({
           after,
           parent,
           timestamp: Date.now()
-        });
+        };
+        for (const cb of this._observers) cb(record);
       }
       // The observer record for a settled transaction. The resolved handler
       // (`_resolvedHandler`/`_matched`) and per-leaf before/after (`_before`/`_after`)
       // were captured while the handler ran (see callHandler / Transaction.run).
       _emitTransaction(transaction, root) {
         if (this._observers.length === 0) return;
-        if (transaction._resolvedHandler === void 0) return;
         this._emitRecord(root, {
           kind: transaction.observeKind,
           name: transaction.observeName,
@@ -13470,28 +13133,22 @@ var init_transactor = __esm({
           parent: transaction.parentTransaction
         });
       }
-      // Make `child` a tracked unit of `parent`'s subtree: the parent's completion stays open
-      // until the child's *whole* subtree settles. Tracking happens at dispatch time — during
-      // the parent's handler or afterTransaction — while the parent's self-unit is still held,
-      // so the parent counter can't reach zero before the child is registered. Returns `child`.
-      _link(child, parent) {
-        if (parent) {
-          const release = parent.completion.track();
-          child.completion.whenSubtreeSettled().then(release);
-        }
-        return child;
-      }
       // `origin` is where the message came FROM, pinned now for the same reason an
       // intent's answerPath is: a reply must reach the sender that asked even if a key
       // moved while the message was in flight. Null when nobody is waiting — a host
       // sendAtRoot or a view's own `@on.*` — and ctx.sendReply refuses on that.
+      //
+      // The parent's subtree stays open until this message's whole subtree settles. The
+      // unit is taken now, at dispatch — during the parent's handler or afterTransaction,
+      // while the parent's self-unit is still held — so its counter can't reach zero first.
       pushSend(path, name, args = [], parent = null, origin = null, txnPath = null) {
         const t = new SendEvent(path, this, name, args, parent);
         t.txnPath = txnPath;
         t.origin = origin;
         t.originPinned = origin === null ? null : origin.toTransactionPath().pinKeys(this.state.val);
         this.pushTransaction(t);
-        return this._link(t, parent);
+        if (parent) t.completion.carry(parent.completion.track());
+        return t;
       }
       // Raise an intent: a job the sender did not address, walked along a route until
       // something answers. `opts.route` is a list of legs (see DEFAULT_ROUTE) and
@@ -13515,7 +13172,7 @@ var init_transactor = __esm({
         return this.transactions.length > 0;
       }
       transactNext() {
-        if (this.hasPendingTransactions) this.transact(this.transactions.shift());
+        this.transact(this.transactions.shift());
       }
       transact(transaction) {
         try {
@@ -13528,8 +13185,7 @@ var init_transactor = __esm({
           } else console.warn("undefined new state", { curState, transaction });
         } finally {
           transaction.ensureWalkAdvanced?.();
-          transaction._completion?.ensureSelfSettled();
-          transaction._completion?.releaseSelf();
+          transaction._completion?.finish();
         }
       }
       transactInputNow(path, event, eventHandler, dragInfo) {
@@ -13559,41 +13215,41 @@ var init_transactor = __esm({
       whenSubtreeSettled() {
         return this.completion.whenSubtreeSettled();
       }
-      afterTransaction() {
-      }
-      // Ending a walk and forwarding belong to the two dispatch buckets; the base warns
-      // rather than throwing, so a stray call from the wrong place is a message and not a
-      // crash. `walk` is undefined here, which is how ctx.reply/ctx.fail tell the two apart.
-      stop() {
-        warnNotIntent("stop");
-      }
-      forward(_opts) {
-        console.warn('ctx.forward() needs a "receive" or "intent" handler - ignored');
-      }
-      // The kind reported to observers (see Transactor.observe); null on the base.
-      get observeKind() {
-        return null;
-      }
-      // The name reported to observers; null on the base. Overridden by NameArgs (the
-      // dispatched message name) and InputEvent (the DOM event type). Kept separate from
-      // `name`/`ctx.name` so it can't change handler-visible behavior.
-      get observeName() {
-        return null;
-      }
+      // Every transaction kind defines `observeKind` / `observeName` (what observers see;
+      // kept apart from `name`/`ctx.name` so they can't change handler-visible behavior),
+      // `getHandlerAndArgs(root, instance, comps)`, and the three `_forward*` hooks below.
       callHandler(root, instance, draft, comps) {
         const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
         this._resolvedHandler = handler;
         return handler.apply(instance, [draft, ...args]);
       }
-      getHandlerAndArgs(_root, _instance, _comps) {
-        return null;
+      // `forward` is where a name can LEAVE the component: the message being handled is
+      // raised again as an INTENT under the same name (`_forwardName()`) with the same
+      // arguments unless `opts.args` says otherwise, from the position `_forwardPath()`
+      // names. Deferred to afterTransaction so the state the handler produced is in place
+      // before the walk starts. (`IntentEvent` overrides both: in an intent body, forward
+      // amends the walk that is already running.)
+      forward(opts) {
+        this._forward = opts ?? {};
+      }
+      afterTransaction() {
+        const f = this._forward;
+        if (f === void 0) return;
+        this._forward = void 0;
+        const name = this._forwardName();
+        if (name === void 0) {
+          this.transactor.refuse("FORWARD_NO_NAME", {});
+          return;
+        }
+        const { args = this._forwardArgs(), ...rest } = f;
+        this.transactor.pushIntent(this._forwardPath(), name, args, rest, this);
       }
       // The path used to apply the mutation: the ACTIVE frame of the dispatch path, so
       // an event inside a `<x render="*name">` subtree updates the value where it
       // really lives (the dispatch `this.path` keeps the visual callers, for bubbling).
+      // `txnPath`, when pinned by the sender, wins.
       getTransactionPath() {
-        if (this.txnPath !== null) return this.txnPath;
-        return this.path.toTransactionPath().compact();
+        return this.txnPath ?? this.path.toTransactionPath();
       }
       run(curRoot, comps) {
         const txnPath = this.getTransactionPath();
@@ -13624,6 +13280,13 @@ var init_transactor = __esm({
         this._dispatchPath ??= this.path.compact();
         return this._dispatchPath;
       }
+      // Only a DOM event's path carries frame-only bind steps (they replay the handler's
+      // arguments, but address no state); the compacted path is where the mutation lands,
+      // so a handler inside @each still updates the component that owns the view. Every
+      // other transaction is dispatched at an already-compacted position.
+      getTransactionPath() {
+        return this.dispatchPath.toTransactionPath();
+      }
       // A DOM event is an ADDRESSED message like any other — it reaches the component that
       // owns the view and stops. It keeps its own class only because it resolves its handler
       // from the compiled view and runs synchronously, not because it is a different channel.
@@ -13633,25 +13296,20 @@ var init_transactor = __esm({
       get observeName() {
         return this.e?.type ?? null;
       }
-      // A view's name is a message. `forward` is where that name can LEAVE the component:
-      // it becomes an intent with the same name and the same arguments, so a view that says
-      // `@on.click="saveDraft .text"` never has to change when an ancestor takes the job over.
-      // (A `$method` handler has a name too, so forwarding one raises an intent under it.)
-      forward(opts) {
-        this._forward = opts ?? {};
-      }
-      afterTransaction() {
-        const f = this._forward;
-        if (f === void 0) return;
-        this._forward = void 0;
-        const { args = this._handlerArgs ?? [], ...rest } = f;
+      // A view's name is a message, and forwarding it means a view that says
+      // `@on.click="saveDraft .text"` never has to change when an ancestor takes the job
+      // over. (A `$method` handler has a name too, so forwarding one raises an intent under
+      // it.) `handler` is a NodeEvent, whose own `name` is the DOM event type; the MESSAGE
+      // name is the one the view wrote, on the handler call it wraps.
+      _forwardName() {
         const hv = this.handler?.handlerCall?.handlerVal ?? this.handler?.handlerVal;
-        const name = hv?.name;
-        if (name === void 0) {
-          this.transactor.refuse("FORWARD_NO_NAME", {});
-          return;
-        }
-        this.transactor.pushIntent(this.dispatchPath, name, args, rest, this);
+        return hv?.name;
+      }
+      _forwardArgs() {
+        return this._handlerArgs ?? [];
+      }
+      _forwardPath() {
+        return this.dispatchPath;
       }
       getHandlerAndArgs(root, _instance, comps) {
         const stack = this.path.buildStack(Stack.root(comps, root, this));
@@ -13661,12 +13319,6 @@ var init_transactor = __esm({
         args.push(new EventContext(path, this.transactor, this));
         return [handler, args];
       }
-      // The dispatched DOM event, read only through `e.<member>` handler args
-      // (src/value.js EventMemberVal via Stack.lookupEvent). There is no bare
-      // implicit-name vocabulary anymore: every arg carries a sigil.
-      get event() {
-        return this.e;
-      }
     };
     NameArgsTransaction = class extends Transaction {
       constructor(path, transactor, name, args, parentTransaction) {
@@ -13684,6 +13336,17 @@ var init_transactor = __esm({
       get observeName() {
         return this.name;
       }
+      // `forward` in a RECEIVE body starts a walk: the message that arrived becomes an
+      // intent, keeping its name and payload.
+      _forwardName() {
+        return this.name;
+      }
+      _forwardArgs() {
+        return this.args;
+      }
+      _forwardPath() {
+        return this.path;
+      }
       getHandlerForName(comp) {
         const handlers = comp?.[this.handlerProp];
         const exact = handlers?.[this.name];
@@ -13714,19 +13377,6 @@ var init_transactor = __esm({
       get observeKind() {
         return this._isAnswer ? "answer" : "receive";
       }
-      // `forward` in a RECEIVE body starts a walk: the message that arrived becomes an
-      // intent, keeping its name and payload. This is what lets a view's name leave the
-      // component without the view changing.
-      forward(opts) {
-        this._forward = opts ?? {};
-      }
-      afterTransaction() {
-        const f = this._forward;
-        if (f === void 0) return;
-        this._forward = void 0;
-        const { args = this.args, ...rest } = f;
-        this.transactor.pushIntent(this.path, this.name, args, rest, this);
-      }
     };
     IntentEvent = class extends NameArgsTransaction {
       handlerProp = "intent";
@@ -13740,9 +13390,6 @@ var init_transactor = __esm({
       forward(opts) {
         this.walk.amend(opts, this.path);
       }
-      stop() {
-        this.walk.finish(null, null);
-      }
       afterTransaction() {
         this.ensureWalkAdvanced();
       }
@@ -13792,7 +13439,7 @@ var init_transactor = __esm({
             this.legIndex++;
             return this._tryLex();
           }
-          console.warn("unknown intent route leg", leg, '- expected "dyn" or "lex"');
+          warnUnknownLeg("intent", leg);
           this.legIndex++;
         }
         this.exhaust("noHandler");
@@ -13881,7 +13528,7 @@ var init_transactor = __esm({
         t.txnPath = this.answerPath;
         t._isAnswer = true;
         this.transactor.pushTransaction(t);
-        if (this.release) t.completion.whenSubtreeSettled().then(this.release);
+        if (this.release) t.completion.carry(this.release);
       }
     };
     Completion = class {
@@ -13889,12 +13536,12 @@ var init_transactor = __esm({
         this.val = void 0;
         this.selfSettled = false;
         this.subtreeSettled = false;
-        this.pending = 1;
+        this.pending = 0;
         this._selfResolve = null;
         this._selfPromise = null;
         this._subtreeResolve = null;
         this._subtreePromise = null;
-        this._selfReleased = false;
+        this._releaseSelf = this.track();
       }
       whenSettled() {
         if (this.selfSettled) return Promise.resolve(this.val);
@@ -13917,38 +13564,38 @@ var init_transactor = __esm({
         this.val = val;
         this._selfResolve?.(val);
       }
-      // Settle self even when no handler produced a value (undefined-state / throw paths).
-      ensureSelfSettled() {
-        if (!this.selfSettled) this.markSelfSettled(this.val);
+      // The transaction is done processing: self is settled (with the value the handler
+      // produced, or none on the undefined-state / throw paths) and the self-unit goes.
+      finish() {
+        this.markSelfSettled(this.val);
+        this._releaseSelf();
       }
-      // Register an outstanding unit; returns a one-shot release.
+      // Register an outstanding unit; returns its one-shot release. The subtree settles
+      // when the last unit is released.
       track() {
         this.pending++;
         let done = false;
         return () => {
           if (done) return;
           done = true;
-          this._release();
+          if (--this.pending === 0) {
+            this.subtreeSettled = true;
+            this._subtreeResolve?.(this.val);
+          }
         };
       }
-      releaseSelf() {
-        if (this._selfReleased) return;
-        this._selfReleased = true;
-        this._release();
-      }
-      _release() {
-        if (--this.pending === 0) {
-          this.subtreeSettled = true;
-          this._subtreeResolve?.(this.val);
-        }
+      // Hand a unit held elsewhere to this subtree: `release` runs once this transaction
+      // and everything it spawned have settled.
+      carry(release) {
+        this.whenSubtreeSettled().then(release);
       }
     };
     Dispatcher = class {
-      constructor(path, transactor, parentTransaction, root = transactor.state.val) {
+      constructor(path, transactor, parentTransaction) {
         this.path = path;
         this.transactor = transactor;
         this.parent = parentTransaction;
-        this.root = root;
+        this.root = transactor.state.val;
       }
       // Walk the component instances on this ctx's path, leaf→root, calling
       // callback(Component, instance). Return false from the callback to stop early.
@@ -13981,12 +13628,14 @@ var init_transactor = __esm({
       // Resolve a name the way the renderer would. `opts.route` takes the same legs in
       // the same spelling as `ctx.intent` — `["dyn"]` the render ancestry, `["lex"]` the
       // registration scope, default both.
+      // Legs are tried in route order, like the intent walker's; an unknown leg warns and
+      // is skipped, and an empty route resolves to null.
       lookup(name, opts) {
-        return routeLookup(
-          opts?.route ?? DEFAULT_ROUTE,
-          () => this._lookupLex(name),
-          () => this._stack()?.lookupDynamic(name) ?? null
-        );
+        for (const leg of opts?.route ?? DEFAULT_ROUTE) {
+          const v = leg === "dyn" ? this._stack()?.lookupDynamic(name) ?? null : leg === "lex" ? this._lookupLex(name) : warnUnknownLeg("lookup", leg);
+          if (v != null) return v;
+        }
+        return null;
       }
       // The `lex` leg without a Stack: the scope of the component whose handler is
       // running, which is the leaf of this ctx's path. A type name resolves to the
@@ -14071,9 +13720,10 @@ var init_transactor = __esm({
           this.parent.originPinned
         );
       }
-      // End the walk answering nothing — "served, and no answer".
+      // End the walk answering nothing — "served, and no answer". Like reply/fail,
+      // legal only in an `intent` handler.
       stop() {
-        return this.parent.stop();
+        return this.parent.walk === void 0 ? warnNotIntent("stop") : this.parent.walk.finish(null, null);
       }
       // From an `intent` body: hand the intent to the next hop, optionally amending it.
       // From a `receive` body: turn the message that arrived into an intent. One word from
@@ -14152,7 +13802,6 @@ var init_app = __esm({
         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;
@@ -14179,12 +13828,11 @@ var init_app = __esm({
       _dispatchEvent(e) {
         const { type: type3 } = e;
         const isDrag = type3 === "dragover" || type3 === "dragstart" || type3 === "dragend" || type3 === "drop";
-        const { rootNode: root, maxEventNodeDepth: maxDepth, comps, transactor } = this;
+        const { rootNode, comps, transactor } = this;
         const [path, handlers] = DispatchPath.fromNodeAndEventName(
           e.target,
           type3,
-          root,
-          maxDepth,
+          rootNode,
           comps,
           !isDrag
         );
@@ -14293,10 +13941,9 @@ var init_app = __esm({
       }
       compile() {
         for (const Comp of this.comps.byId.values()) {
-          const meta = Comp[COMPONENT];
-          meta.compile(this.ParseContext);
-          for (const key in meta.views)
-            for (const name of meta.views[key].ctx.genEventNames()) this._eventNames.add(name);
+          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;
       }
@@ -14319,6 +13966,8 @@ var init_app = __esm({
       }
       stop() {
         this.stopCacheEvictionInterval();
+        clearTimeout(this._transactNextBatchId);
+        this._transactNextBatchId = null;
         for (const name of this._eventNames)
           this.rootNode.removeEventListener(name, this, listenerOpts(name));
       }
@@ -14407,28 +14056,21 @@ var init_cache = __esm({
       set(_keys, _cacheKey, _v) {
       }
       evict() {
-        return { hit: 0, miss: 0, badKey: 0 };
       }
     };
     WeakMapDomCache = class {
       constructor() {
-        this.hit = this.miss = this.badKey = 0;
         this.keysByLen = /* @__PURE__ */ new Map();
       }
-      _returnValue(r) {
-        if (r === void 0) 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(void 0);
+        if (!cur) return void 0;
         for (let i = 0; i < len - 1; i++) {
           cur = cur.get(keys[i]);
-          if (!cur) return this._returnValue(void 0);
+          if (!cur) return void 0;
         }
-        return this._returnValue(cur.get(keys[len - 1])?.[cacheKey]);
+        return cur.get(keys[len - 1])?.[cacheKey];
       }
       set(keys, cacheKey, v) {
         const len = keys.length;
@@ -14441,10 +14083,7 @@ var init_cache = __esm({
           const key = keys[i];
           let next = cur.get(key);
           if (!next) {
-            if (!isWeakKey(key)) {
-              this.badKey += 1;
-              return;
-            }
+            if (!isWeakKey(key)) return;
             next = /* @__PURE__ */ new WeakMap();
             cur.set(key, next);
           }
@@ -14454,13 +14093,9 @@ var init_cache = __esm({
         const leaf = cur.get(lastKey);
         if (leaf) leaf[cacheKey] = v;
         else if (isWeakKey(lastKey)) cur.set(lastKey, { [cacheKey]: v });
-        else this.badKey += 1;
       }
       evict() {
-        const { hit, miss, badKey } = this;
-        this.hit = this.miss = this.badKey = 0;
         this.keysByLen = /* @__PURE__ */ new Map();
-        return { hit, miss, badKey };
       }
     };
   }
@@ -14480,7 +14115,7 @@ function stampRenderBase(vdom, text) {
     return new VFragment(vdom.childs.map((c) => stampRenderBase(c, text)));
   return vdom;
 }
-var DATASET_ATTRS, Renderer;
+var Renderer;
 var init_renderer = __esm({
   "src/renderer.js"() {
     init_cache();
@@ -14488,12 +14123,18 @@ var init_renderer = __esm({
     init_path();
     init_value();
     init_vdom();
-    DATASET_ATTRS = ["nid", "cid", "eid", "vid", "si", "sk", "rp"];
     Renderer = class {
       constructor(comps) {
         this.comps = comps;
         this.cache = new WeakMapDomCache();
-        this.renderTag = h;
+      }
+      // Parse nodes build their VDOM through the renderer, never by importing vdom.js
+      // themselves: a component may have been compiled by ANOTHER copy of the library
+      // (a docs example imports the dist bundle while the host app runs from src), and
+      // `render()` recognizes VNodes by `instanceof` against ITS copy's classes. Going
+      // through `rx` guarantees the rendering copy makes them.
+      renderTag(tag, attrs, childs, namespace) {
+        return h(tag, attrs, childs, namespace);
       }
       renderFragment(childs) {
         return new VFragment(childs);
@@ -14504,30 +14145,16 @@ var init_renderer = __esm({
       setNullCache() {
         this.cache = new NullDomCache();
       }
-      // Library utilities for consumers embedding tutuca: render a value to a detached
-      // DOM node / an HTML string. Not called by the framework itself.
-      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, base = null) {
+      // Render `stack.it` at a `<x render*>` site (`node`). `base` is the absolute
+      // path the site resumed at, when it rendered a `*name` (see _rValComp).
+      renderIt(stack, node, viewName, base = null) {
         const comp = this.comps.getCompFor(stack.it);
-        return comp ? this._rValComp(stack, stack.it, comp, node, key, viewName, base) : null;
+        return comp ? this._rValComp(stack, stack.it, comp, node, "", viewName, base) : null;
       }
       // `node` is the parse node of the render site (`<x render>` / `render-it` /
       // `render-each`, or the view's root anode for the app root). It keys the
@@ -14562,9 +14189,9 @@ var init_renderer = __esm({
         r.push(this._renderMetadata({ $: "Each", nid, [attrName]: key }), dom);
       }
       renderEachWhen(stack, each2) {
-        const { iterInfo, node: view, nodeId: nid } = each2;
-        const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
-        const seqPath = iterInfo.val instanceof DynVal ? stack.lookupDynamicLocated(iterInfo.val.name)?.path ?? null : null;
+        const { val: seqVal, node: view, nodeId: nid } = each2;
+        const { seq, filter, loopWith, enricher } = each2.evalIter(stack);
+        const seqPath = seqVal instanceof DynVal ? stack.lookupDynamicLocated(seqVal.name)?.path ?? null : null;
         const r = [];
         const it = stack.it;
         const renderOne = (key, value, attrName, binds) => {
@@ -14617,9 +14244,7 @@ var init_renderer = __esm({
 
 // src/util/render.js
 function reindexComponents(comps) {
-  for (let i = 0; i < comps.length; i++) {
-    comps[i][COMPONENT].id = i;
-  }
+  for (let i = 0; i < comps.length; i++) comps[i].id = i;
 }
 function serializeContainer(container) {
   for (const input of container.querySelectorAll("input")) {
@@ -14628,19 +14253,19 @@ function serializeContainer(container) {
   }
   return container.innerHTML;
 }
-function renderToHTMLNode(document2, components, macros, rootState, ParseContext2, opts = { noCache: true }) {
+function renderToHTMLNode(document2, components, macros, rootState, ParseContext2, { noCache = true, paths = null, intentHandlers = null, view = null } = {}) {
   const container = document2.createElement("div");
   document2.body.appendChild(container);
   reindexComponents(components);
   const comps = new Components();
   const renderer = new Renderer(comps);
   const app = new App(container, comps, renderer, ParseContext2);
-  const scope = app.registerComponents(components, { paths: opts.paths });
+  const scope = app.registerComponents(components, { paths });
   if (macros) scope.registerMacros(macros);
-  if (opts.intentHandlers) scope.registerIntentHandlers(opts.intentHandlers);
-  app.rootViewName = opts.view ?? null;
+  if (intentHandlers) scope.registerIntentHandlers(intentHandlers);
+  app.rootViewName = view;
   app.transactor.state.set(rootState);
-  app.start(opts);
+  app.start({ noCache });
   return {
     container,
     app,
@@ -14650,14 +14275,14 @@ function renderToHTMLNode(document2, components, macros, rootState, ParseContext
     }
   };
 }
-async function renderToHTMLDriven(document2, components, macros, rootState, ParseContext2, { phase = null, intentHandlers = null, view = null } = {}) {
+async function renderToHTMLDriven(document2, components, macros, rootState, ParseContext2, { phase = null, ...opts } = {}) {
   const { container, app, cleanup } = renderToHTMLNode(
     document2,
     components,
     macros,
     rootState,
     ParseContext2,
-    { noCache: true, intentHandlers, view }
+    opts
   );
   try {
     if (phase) {
@@ -15599,23 +15224,30 @@ function installSkill(skill, root, scope, force, dotAgents, dryRun, opts) {
     });
   }
   const target = targetDir(scope, skill.name, dotAgents);
-  if (targetHasSkillFiles(target) && !force) {
-    emitError(opts, {
-      code: CODES.SKILL_TARGET_EXISTS,
-      message: `${target} already contains skill files`,
-      hint: "Re-run with --force to overwrite, or --dry-run to see what would change."
-    });
-  }
   const baseDir = dotAgents ? ".agents/skills" : ".claude/skills";
   const rel = scope === "project" ? `${baseDir}/${skill.name}` : target;
+  const exists = targetHasSkillFiles(target);
   if (dryRun) {
     const files = walkFiles(src, { match: () => true }).map((f) => relative(src, f));
     process.stdout.write(`would install ${skill.name} skill → ${rel}
 `);
     for (const f of files) process.stdout.write(`  + ${f}
 `);
+    if (exists) {
+      process.stdout.write(
+        `  note: ${rel} already contains skill files; re-run with --force to overwrite them
+`
+      );
+    }
     return;
   }
+  if (exists && !force) {
+    emitError(opts, {
+      code: CODES.SKILL_TARGET_EXISTS,
+      message: `${target} already contains skill files`,
+      hint: "Re-run with --force to overwrite, or --dry-run to see what would change."
+    });
+  }
   mkdirSync2(target, { recursive: true });
   cpSync(src, target, { recursive: true });
   process.stdout.write(`installed ${skill.name} skill → ${rel}
@@ -15713,16 +15345,16 @@ async function createNodeEnv() {
   const dom = new JSDOM("<!DOCTYPE html><html><head></head><body></body></html>", {
     virtualConsole
   });
-  const { document: document2, Text, Comment } = dom.window;
+  const { document: document2 } = dom.window;
   globalThis.document = document2;
   class HeadlessParseContext extends ParseContext {
     constructor() {
-      super(document2, Text, Comment);
+      super(document2);
     }
   }
   class HeadlessLintParseContext extends LintParseContext {
     constructor() {
-      super(document2, Text, Comment);
+      super(document2);
     }
   }
   return {
@@ -15731,7 +15363,7 @@ async function createNodeEnv() {
     LintParseContext: HeadlessLintParseContext
   };
 }
-var init_env2 = __esm({
+var init_env = __esm({
   "tools/cli/env.js"() {
     init_anode();
     init_lint_check();
@@ -16232,7 +15864,7 @@ var init_storybook = __esm({
     init_chai2();
     init_module();
     init_test();
-    init_env2();
+    init_env();
     init_errors();
     init_pkg();
     init_walk();
@@ -16417,7 +16049,7 @@ export async function resolve(specifier, context, nextResolve) {
 init_errors();
 
 // tools/cli/with-module.js
-init_env2();
+init_env();
 init_errors();
 import { statSync as statSync2 } from "node:fs";
 import { parseArgs as parseArgs4 } from "node:util";