tutuca 0.13.2 → 0.14.0

package/dist/tutuca-extra.ext.js

@@ -76,8 +76,11 @@ var Step = class {
   }
   setDraftValue(_root, _v) {
   }
-  enterFrame(stack, next) {
-    return stack.enter(next, {}, true);
+  // Re-enter this step while rebuilding a stack. `renderPath` is the dispatch
+  // position AFTER this step: a rebuilt frame must carry the same render path
+  // the renderer had there, or the provides it publishes would be located wrong.
+  enterFrame(stack, next, renderPath) {
+    return stack.enter(next, {}, true, renderPath);
   }
   toAbstractPathStep() {
     return this;
@@ -102,8 +105,8 @@ var BindStep = class _BindStep extends Step {
   lookup(v, _dval) {
     return v;
   }
-  enterFrame(stack, next) {
-    return stack.enter(next, { ...this.binds }, false);
+  enterFrame(stack, next, renderPath) {
+    return stack.enter(next, { ...this.binds }, false, renderPath);
   }
   withIndex(i) {
     return new _BindStep({ ...this.binds, key: i });
@@ -120,9 +123,9 @@ var ScopeBindStep = class _ScopeBindStep extends BindStep {
     super(binds);
     this.val = val;
   }
-  enterFrame(stack, next) {
+  enterFrame(stack, next, renderPath) {
     const dyn = this.val.evalAsHandler(stack)?.call(stack.it) ?? {};
-    return stack.enter(next, { ...this.binds, ...dyn }, false);
+    return stack.enter(next, { ...this.binds, ...dyn }, false, renderPath);
   }
   withIndex(i) {
     return new _ScopeBindStep(this.val, { ...this.binds, key: i });
@@ -165,8 +168,8 @@ var SeqStep = class extends Step {
     const seq = readKey(root, this.field, null);
     if (seq != null) writeSeqKey(seq, this.key, v);
   }
-  enterFrame(stack, next) {
-    return stack.enter(next, { key: this.key }, true);
+  enterFrame(stack, next, renderPath) {
+    return stack.enter(next, { key: this.key }, true, renderPath);
   }
   toKey() {
     return { field: this.field, key: this.key };
@@ -212,60 +215,52 @@ var EachBindStep = class extends Step {
   }
   // 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) {
-    return stack.enter(next, this.iterInfo.enrichBinds(stack, this.key), false);
+  enterFrame(stack, next, renderPath) {
+    return stack.enter(next, this.iterInfo.enrichBinds(stack, this.key), false, renderPath);
   }
   toAbstractPathStep() {
     return null;
   }
 };
 var EachRenderItStep = class extends SeqStep {
-  enterFrame(stack, next) {
-    return stack.enter(next, { key: this.key, value: next }, false).enter(next, {}, true);
+  enterFrame(stack, next, renderPath) {
+    return stack.enter(next, { key: this.key, value: next }, false, renderPath).enter(next, {}, true, renderPath);
   }
   toAbstractPathStep() {
     return new SeqStep(this.field, this.key);
   }
 };
-function warnRawDynStep(op, step) {
-  console.warn(`Path.${op} reached a DynStep: call toTransactionPath() first`, step);
+function stepToJson(step) {
+  if (step instanceof SeqStep) return { f: step.field, k: step.key };
+  if (step instanceof FieldStep) return { f: step.field };
+  if (step instanceof SeqAccessStep) return { f: step.seqField, a: step.keyField };
+  return null;
 }
-var DynStep = class extends Step {
-  constructor(producerCompId, producerSteps) {
-    super();
-    this.producerCompId = producerCompId;
-    this.producerSteps = producerSteps;
-    this.interiorCids = /* @__PURE__ */ new Set();
-  }
-  // Steps spliced into the transaction path in place of this marker.
-  teleportSteps() {
-    return this.producerSteps;
-  }
-  lookup(_v, dval = null) {
-    warnRawDynStep("lookup", this);
-    return dval;
-  }
-  enterFrame(stack, _next) {
-    warnRawDynStep("enterFrame", this);
-    return stack;
-  }
-};
-var DynEachStep = class extends DynStep {
-  constructor(producerCompId, producerSteps, key) {
-    super(producerCompId, producerSteps);
-    this.key = key;
-  }
-  teleportSteps() {
-    const { producerSteps, key } = this;
-    if (producerSteps.length === 0) return producerSteps;
-    const last = producerSteps[producerSteps.length - 1];
-    if (!(last instanceof FieldStep)) {
-      console.warn("DynEachStep: seq-access dynamic cannot be iterated", this);
-      return producerSteps;
-    }
-    return producerSteps.slice(0, -1).concat(new SeqStep(last.field, key));
+function stepFromJson(j) {
+  if (j == null || typeof j.f !== "string") return null;
+  if (j.k !== void 0) return new SeqStep(j.f, j.k);
+  if (j.a !== void 0) return new SeqAccessStep(j.f, j.a);
+  return new FieldStep(j.f);
+}
+function pathToJson(path2) {
+  const out = [];
+  for (const step of path2.steps) {
+    const j = stepToJson(step);
+    if (j === null) return null;
+    out.push(j);
   }
-};
+  return out;
+}
+function pathFromJson(j) {
+  if (!Array.isArray(j)) return null;
+  const steps = [];
+  for (const item of j) {
+    const step = stepFromJson(item);
+    if (step === null) return null;
+    steps.push(step);
+  }
+  return new Path(steps);
+}
 var Path = class _Path {
   constructor(steps = []) {
     this.steps = steps;
@@ -276,40 +271,13 @@ var Path = class _Path {
   popStep() {
     return new _Path(this.steps.slice(0, -1));
   }
-  // The dispatch path: frame-only steps removed, one step per crossed component
-  // (DynStep included). `popStep` over it bubbles through every component.
+  // Frame-only steps removed, one step per crossed component: `popStep` over the
+  // result bubbles through every component.
   compact() {
     const out = [];
     for (const step of this.steps) {
       const s = step.toAbstractPathStep();
-      if (s !== null) {
-        if (s !== step) s._originCid = step._originCid;
-        out.push(s);
-      }
-    }
-    return new _Path(out);
-  }
-  // The abstract path used to apply a transaction: every DynStep is teleported —
-  // the steps interior to its producer..consumer span are dropped and the
-  // producer's own path spliced in — so a mutation lands on the data's real
-  // location. A path with no DynStep is returned unchanged.
-  toTransactionPath() {
-    let hasDyn = false;
-    for (const step of this.steps)
-      if (step instanceof DynStep) {
-        hasDyn = true;
-        break;
-      }
-    if (!hasDyn) return this;
-    const out = [];
-    for (const step of this.steps) {
-      if (step instanceof DynStep) {
-        while (out.length > 0 && step.interiorCids.has(out[out.length - 1]._originCid)) out.pop();
-        for (const ts of step.teleportSteps()) {
-          ts._originCid = step.producerCompId;
-          out.push(ts);
-        }
-      } else out.push(step);
+      if (s !== null) out.push(s);
     }
     return new _Path(out);
   }
@@ -317,7 +285,6 @@ var Path = class _Path {
   // key as it is *now* so a later lookup/setValue lands on the same item even if the
   // keyField changed meanwhile (e.g. the selected tab moved while an intent was in
   // flight). Returns a new Path with those steps replaced; `this` if nothing pinned.
-  // Must be called on a transaction path (no DynSteps — call toTransactionPath first).
   pinKeys(root) {
     let curVal = root;
     let out = null;
@@ -340,8 +307,8 @@ var Path = class _Path {
   }
   // The values entered along the path, root→leaf (root included): index 0 is `root`,
   // the last entry is the leaf this path resolves to. Stops early at the first
-  // unresolvable step. Call on a transaction path (no DynSteps). Used to walk the
-  // component instances on a dispatch path (filter via Components.getCompFor).
+  // unresolvable step. Used to walk the component instances on a dispatch path
+  // (filter via Components.getCompFor).
   resolveChain(root) {
     const out = [root];
     let curVal = root;
@@ -355,7 +322,7 @@ var Path = class _Path {
   // A flat `[{ field, key? }]` list of the addressing steps, skipping frame-only
   // steps (binds). Generic path introspection so tooling (e.g. the storybook
   // activity log) can identify which subtree a transaction touched without
-  // depending on Step internals. Call on a transaction path (no DynSteps).
+  // depending on Step internals.
   toKeys() {
     const out = [];
     for (const step of this.steps) {
@@ -376,62 +343,147 @@ var Path = class _Path {
     });
   }
   buildStack(stack) {
-    let prev = stack.it;
-    for (const step of this.steps) {
-      const next = step.lookup(prev, NONE);
-      if (next === NONE) {
-        console.warn("bad PathItem", { root: stack.it, step, path: this });
-        return null;
+    return walkItems(stack, this.steps, stack.renderPath ?? new DispatchPath(), this)?.[0] ?? null;
+  }
+};
+function walkItems(stack, items, renderPath, path2) {
+  let prev = stack.it;
+  for (const step of items) {
+    const next = step.lookup(prev, NONE);
+    if (next === NONE) {
+      console.warn("bad PathItem", { root: stack.it, step, path: path2 });
+      return null;
+    }
+    renderPath = renderPath.pushItem(step);
+    stack = step.enterFrame(stack, next, renderPath);
+    prev = next;
+  }
+  return [stack, renderPath];
+}
+var EMPTY_PATH = new Path([]);
+var DispatchPath = class _DispatchPath {
+  constructor(frames = [{ base: EMPTY_PATH, items: [] }]) {
+    this.frames = frames;
+  }
+  // Plain addressing steps in one frame based at the root: what a caller means
+  // by "this position" when it has no continuation of its own.
+  static ofSteps(steps) {
+    return new _DispatchPath([{ base: EMPTY_PATH, items: steps.slice() }]);
+  }
+  get top() {
+    return this.frames[this.frames.length - 1];
+  }
+  _withTopItems(items) {
+    const frames = this.frames.slice();
+    frames[frames.length - 1] = { base: this.top.base, items };
+    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) {
+    return this.concat([step]);
+  }
+  pushFrame(base) {
+    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.
+  canPop() {
+    const n = this.frames.length;
+    return n > 1 || n === 1 && this.frames[0].items.length > 0;
+  }
+  isRoot() {
+    return this.toTransactionPath().steps.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];
+    if (top.items.length > 0) return this._withTopItems(top.items.slice(0, -1));
+    if (n > 1) return new _DispatchPath(this.frames.slice(0, -1));
+    return this;
+  }
+  // Drop frame-only steps inside every frame independently; a frame's base is
+  // already addressing-only.
+  compact() {
+    return new _DispatchPath(
+      this.frames.map(({ base, items }) => ({ base, items: new Path(items).compact().steps }))
+    );
+  }
+  // A stable string for the ADDRESS this path denotes, for the render cache. The
+  // same immutable value can sit at two places in the tree, and a subtree rendered
+  // at one of them bakes that address in — the provides it publishes are located
+  // there. Frame-only steps address nothing, so they are compacted out: two sites
+  // that differ only in binds do render the same subtree.
+  get addressKey() {
+    this._addressKey ??= renderPathText(this.toTransactionPath().compact());
+    return this._addressKey;
+  }
+  // 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);
+  }
+  // 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`
+  // render performed — and then walks its ordinary items.
+  buildStack(stack) {
+    let renderPath = new _DispatchPath();
+    for (let i = 0; i < this.frames.length; i++) {
+      const { base, items } = this.frames[i];
+      if (i > 0 || base.steps.length > 0) {
+        const baseValue = base.lookup(stack.root, NONE);
+        if (baseValue === NONE) {
+          console.warn("bad frame base", { base, path: this });
+          return null;
+        }
+        renderPath = renderPath.pushFrame(base);
+        stack = stack.enter(baseValue, {}, true, renderPath);
       }
-      stack = step.enterFrame(stack, next);
-      prev = next;
+      const walked = walkItems(stack, items, renderPath, this);
+      if (walked === null) return null;
+      [stack, renderPath] = walked;
     }
     return stack;
   }
   static fromNodeAndEventName(node, eventName, rootNode, maxDepth, comps, stopOnNoEvent = true) {
-    const pathSteps = [];
-    const pendingDyns = [];
+    const parts = [];
     const bubbles = BUBBLING_EVENTS.has(eventName);
     let depth = 0;
     let eventIds = [];
     let handlers = null;
-    let nodeIds = [];
+    let nodeRefs = [];
     let isLeafComponent = true;
     const crossComponent = (cidNum, vid) => {
       const comp = comps.getComponentForId(cidNum);
-      let pushStep = true;
+      let pushPart = true;
       if (handlers === null && (isLeafComponent || bubbles)) {
         handlers = findHandlers(comp, eventIds, vid, eventName);
         if (handlers === null) {
           if (isLeafComponent && stopOnNoEvent && !bubbles) return false;
         } else if (!isLeafComponent) {
-          pathSteps.length = 0;
-          pendingDyns.length = 0;
-          pushStep = false;
+          parts.length = 0;
+          pushPart = false;
         }
       }
       isLeafComponent = false;
-      for (const dyn of pendingDyns) dyn.interiorCids.add(cidNum);
-      if (pushStep) {
-        const step = resolvePathStep(comp, nodeIds, vid);
-        if (step) {
-          step._originCid = cidNum;
-          pathSteps.push(step);
-          if (step instanceof DynStep) {
-            step.interiorCids.add(cidNum);
-            pendingDyns.push(step);
-          }
-        }
+      if (pushPart) {
+        const part = resolvePathPart(comp, nodeRefs, vid);
+        if (part) parts.push(part);
       }
-      for (let i = pendingDyns.length - 1; i >= 0; i--)
-        if (pendingDyns[i].producerCompId === cidNum) pendingDyns.splice(i, 1);
       eventIds = [];
-      nodeIds = [];
+      nodeRefs = [];
       return true;
     };
     while (node && node !== rootNode && depth < maxDepth) {
       if (node?.dataset) {
-        const { eid, cid, vid } = node.dataset;
+        const { eid, cid, vid, rp } = node.dataset;
         if (eid !== void 0) eventIds.push(eid);
         const metas = metaChain(node.previousSibling);
         let sawComp = false;
@@ -439,21 +491,47 @@ var Path = class _Path {
           if (m.$ === "Comp") {
             sawComp = true;
             if (!crossComponent(m.cid, m.vid)) return NO_EVENT_INFO;
-            nodeIds.push({ nid: m.nid });
+            nodeRefs.push({ nid: m.nid, base: pathFromJson(m.base) });
           } else {
-            nodeIds.push({ nid: m.nid, si: m.si, sk: m.sk });
+            nodeRefs.push({ nid: m.nid, si: m.si, sk: m.sk });
+          }
+        }
+        if (!sawComp && cid !== void 0) {
+          if (!crossComponent(+cid, vid)) return NO_EVENT_INFO;
+          if (rp !== void 0) {
+            const base = parseRenderPath(rp);
+            if (base !== null) nodeRefs.push({ base });
           }
         }
-        if (!sawComp && cid !== void 0 && !crossComponent(+cid, vid)) return NO_EVENT_INFO;
       }
       depth += 1;
       node = node.parentNode;
     }
-    if (pendingDyns.length > 0)
-      console.warn("event reconstruction: dynamic-var producer not found", pendingDyns);
-    return [new _Path(pathSteps.reverse()), handlers];
+    parts.reverse();
+    let path2 = new _DispatchPath();
+    for (const part of parts)
+      path2 = part.base !== void 0 ? path2.pushFrame(part.base) : path2.pushItem(part.step);
+    return [path2, handlers];
+  }
+};
+function keyedPath(path2, key) {
+  const steps = path2.steps;
+  const last = steps[steps.length - 1];
+  if (last instanceof SeqStep || last instanceof FieldStep)
+    return new Path(steps.slice(0, -1).concat(new SeqStep(last.field, key)));
+  return null;
+}
+function renderPathText(path2) {
+  return JSON.stringify(pathToJson(path2));
+}
+function parseRenderPath(text) {
+  try {
+    return pathFromJson(JSON.parse(text));
+  } catch (err) {
+    console.warn("bad render path", err, text);
+    return null;
   }
-};
+}
 function metaChain(n) {
   const out = [];
   while (n?.nodeType === 8 && n.textContent[0] === "§") {
@@ -506,20 +584,27 @@ var StepCtx = class _StepCtx {
     return pi;
   }
 };
-function resolvePathStep(comp, nodeIds, vid) {
-  for (let i = 0; i < nodeIds.length; i++) {
-    const ctx = new StepCtx(comp, nodeIds, i, vid);
-    const step = ctx.resolveNode().toPathStep(ctx);
-    if (step !== null) return step;
+function resolvePathPart(comp, nodeRefs, vid) {
+  for (let i = 0; i < nodeRefs.length; i++) {
+    const ref = nodeRefs[i];
+    if (ref.base != null) return { base: ref.base };
+    if (ref.nid === void 0 || ref.nid === null) continue;
+    const ctx = new StepCtx(comp, nodeRefs, i, vid);
+    const step = ctx.resolveNode()?.toPathStep(ctx) ?? null;
+    if (step !== null) return { step };
   }
   return null;
 }
 var NO_EVENT_INFO = [null, null];
 var BUBBLING_EVENTS = /* @__PURE__ */ new Set(["drop"]);
+var path = () => new PathBuilder();
 var PathBuilder = class {
   constructor() {
     this.pathChanges = [];
   }
+  toPath() {
+    return new Path(this.pathChanges);
+  }
   add(pathChange) {
     this.pathChanges.push(pathChange);
     return this;
@@ -656,31 +741,14 @@ function parseBool(s, px) {
   const val = parseToken(tokens[0], px);
   return val !== null && kindOf(val) & G_BOOL ? val : null;
 }
-function parseText(s, px) {
-  return _parseSingle(s, px, G_TEXT);
-}
-function parseComponent(s, px) {
-  return _parseSingle(s, px, G_COMPONENT);
-}
-function parseSequence(s, px) {
-  return _parseSingle(s, px, G_SEQUENCE);
-}
-function parseField(s, px) {
-  return _parseSingle(s, px, G_FIELD);
-}
-function parseProvide(s, px) {
-  return _parseSingle(s, px, G_PROVIDE);
-}
-function parseMacroAttr(s, px) {
-  return _parseSingle(s, px, G_ALL);
-}
-function parseReceiveHandler(s, px) {
-  return _parseHandler(s, px, "receive", true, true, false);
-}
-function parseAlterHandler(s, px) {
-  const r = _parseHandler(s, px, "alter", false, false, true);
-  return r === null ? null : r.handlerVal;
-}
+var parseText = (s, px) => _parseSingle(s, px, G_TEXT);
+var parseComponent = (s, px) => _parseSingle(s, px, G_COMPONENT);
+var parseSequence = (s, px) => _parseSingle(s, px, G_SEQUENCE);
+var parseField = (s, px) => _parseSingle(s, px, G_FIELD);
+var parseProvide = (s, px) => _parseSingle(s, px, G_PROVIDE);
+var parseMacroAttr = (s, px) => _parseSingle(s, px, G_ALL);
+var parseReceiveHandler = (s, px) => _parseHandler(s, px, "receive", true, true, false);
+var parseAlterHandler = (s, px) => _parseHandler(s, px, "alter", false, false, true)?.handlerVal ?? null;
 function _parseHandler(s, px, namespace, allowArgs, report, allowMethod) {
   const tokens = tokenizeValue(s.trim());
   const headTok = tokens[0] ?? "";
@@ -1369,19 +1437,9 @@ function childOpts(vnode, ns, opts) {
   const target = ns === SVG_NS && isForeignObject(vnode.tag) ? null : ns;
   return target === (opts.namespace ?? null) ? opts : { ...opts, namespace: target };
 }
-var NEVER_ASSIGN = /* @__PURE__ */ new Set([
-  "width",
-  "height",
-  "href",
-  "list",
-  "form",
-  "tabIndex",
-  "download",
-  "rowSpan",
-  "colSpan",
-  "role",
-  "popover"
-]);
+var NEVER_ASSIGN = new Set(
+  "width height href list form tabIndex download rowSpan colSpan role popover".split(" ")
+);
 var PROP_ATTR_NAME = { className: "class", htmlFor: "for" };
 function applyProperties(node, props) {
   const namespaced = isNamespaced(node);
@@ -1660,6 +1718,10 @@ function morphChildren(parentDom, oldChilds, newChilds, opts) {
     if (!used[i] && domNodes[i].parentNode === parentDom) parentDom.removeChild(domNodes[i]);
 }
 function render(vnode, container, options, prev) {
+  if (vnode == null) {
+    container.replaceChildren();
+    return { vnode: null, dom: null };
+  }
   const isFragment = vnode instanceof VFragment;
   if (prev && prev.vnode instanceof VFragment === isFragment) {
     const oldDom = isFragment ? container : prev.dom;
@@ -1699,13 +1761,16 @@ function h(tagName, properties, children, namespace) {
 }
 
 // src/anode.js
-function resolveDynProducer(comp, name) {
-  const own = comp?.provide?.[name];
-  const producerComp = own != null ? comp : comp?.scope?.lookupProvider(name) ?? null;
-  const producerProvide = own ?? producerComp?.provide?.[name];
-  if (producerComp == null || producerProvide == null) return null;
-  const pi = producerProvide.val?.toPathItem?.() ?? null;
-  return { producerCompId: producerComp.id, producerSteps: pi ? [pi] : [] };
+function renderTarget(val, stack) {
+  if (val instanceof DynVal) {
+    const loc = stack.lookupDynamicLocated(val.name);
+    if (loc?.path == null) return [loc?.value ?? null, stack.renderPath, null];
+    return [loc.value, stack.renderPath.pushFrame(loc.path), loc.path];
+  }
+  const step = val.toPathItem?.() ?? null;
+  if (step === null) return [val.eval(stack), stack.renderPath, null];
+  const path2 = stack.renderPath.pushItem(step);
+  return [val.eval(stack), path2, stack.pendingFrame ? path2.toTransactionPath() : null];
 }
 var BaseNode = class {
   render(_stack, _rx) {
@@ -2027,33 +2092,31 @@ var RenderViewId = class extends ANode {
   setDataAttr(_key, _val) {
   }
 };
-function dynRenderStep(comp, name, key) {
-  const p = resolveDynProducer(comp, name);
-  if (!p) return null;
-  return key === void 0 ? new DynStep(p.producerCompId, p.producerSteps) : new DynEachStep(p.producerCompId, p.producerSteps, key);
-}
 var RenderNode = class extends RenderViewId {
   render(stack, rx) {
-    const newStack = stack.enter(this.val.eval(stack), {}, true);
-    return rx.renderIt(newStack, this, "", this.evalViewName(stack));
+    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);
   }
+  // A `*name` target contributes no step: the site recorded the absolute base it
+  // resumed at, and event reconstruction turns that into a continuation frame.
   toPathStep(ctx) {
-    if (this.val instanceof DynVal) return dynRenderStep(ctx.comp, this.val.name);
+    if (this.val instanceof DynVal) return null;
     return super.toPathStep(ctx);
   }
 };
 var RenderItNode = class extends RenderViewId {
   render(stack, rx) {
-    const newStack = stack.enter(stack.it, {}, true);
-    return rx.renderIt(newStack, this, "", this.evalViewName(stack));
+    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);
   }
   toPathStep(ctx) {
     const next = ctx.next();
     if (next === null) return null;
     const nextNode = next.resolveNode();
     if (nextNode instanceof EachNode && next.hasKey) {
-      if (nextNode.val instanceof DynVal)
-        return dynRenderStep(ctx.comp, nextNode.val.name, next.key);
+      if (nextNode.val instanceof DynVal) return null;
       return new EachRenderItStep(nextNode.val.name, next.key);
     }
     return null;
@@ -2155,11 +2218,19 @@ var EachNode = class extends WrapperNode {
     this.iterInfo = new IterInfo(val, null, null, null);
   }
   render(stack, rx) {
-    return rx.renderEachWhen(stack, this.iterInfo, this.node, this.nodeId);
+    return rx.renderEachWhen(stack, this);
   }
   toPathStep(ctx) {
     return ctx.hasKey ? new EachBindStep(this.iterInfo, 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
+  // the step has to address it — `.rows` iterated at `key` IS `rows[key]`.
+  // Null for a dynamic sequence: `*rows` carries its own absolute path and enters
+  // a continuation frame instead (see Renderer.renderEachWhen).
+  itemStep(key) {
+    return this.val instanceof FieldVal ? new SeqStep(this.val.name, key) : null;
+  }
   static register = true;
 };
 var IterInfo = class {
@@ -2420,6 +2491,215 @@ function compileModifiers(eventName, names) {
   };
 }
 
+// src/stack.js
+var STOP = /* @__PURE__ */ Symbol("STOP");
+var NEXT = /* @__PURE__ */ Symbol("NEXT");
+var DEFAULT_ROUTE = ["dyn", "lex"];
+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;
+}
+var isTypeName = (s) => {
+  const c = s.charCodeAt(0);
+  return c >= 65 && c <= 90;
+};
+function lookup(chain, name, dv = null) {
+  let n = chain;
+  while (n !== null) {
+    const r = n[0].lookup(name);
+    if (r === STOP) return dv;
+    if (r !== NEXT) return r;
+    n = n[1];
+  }
+  return dv;
+}
+var BindFrame = class {
+  constructor(it, binds, isFrame) {
+    this.it = it;
+    this.binds = binds;
+    this.isFrame = isFrame;
+  }
+  lookup(name) {
+    const v = this.binds[name];
+    return v === void 0 ? this.isFrame ? STOP : NEXT : v;
+  }
+};
+var DynFrame = class {
+  constructor(binds, types) {
+    this.binds = binds;
+    this.types = types;
+  }
+  lookup(name) {
+    const v = (isTypeName(name) ? this.types : this.binds)[name];
+    return v === void 0 ? NEXT : v;
+  }
+};
+function computeViewsId(views) {
+  let s = "";
+  let n = views;
+  while (n !== null) {
+    s += n[0];
+    n = n[1];
+  }
+  return s === "main" ? "" : s;
+}
+var Stack = class _Stack {
+  constructor(fields) {
+    Object.assign(this, fields);
+  }
+  _with(patch) {
+    return new _Stack({ ...this, ...patch });
+  }
+  // Evaluate every provide the entered component publishes and push them as one
+  // dynBinds frame, keyed by NAME. A value is published together with the absolute
+  // path it lives at: the same declaration is read as `*name` AND resumed at by
+  // `<x render="*name">`, so a consumer needs both halves. Types go in the same
+  // frame's other map. No-op with no provides.
+  _pushProvides() {
+    const comp = this.comps.getCompFor(this.it);
+    if (comp == null) return this;
+    const { provide, provideType } = comp;
+    const binds = {};
+    const types = {};
+    let has = false;
+    const base = this._publishBase();
+    for (const k in provide) {
+      const step = provide[k].val.toPathItem?.() ?? null;
+      if (step === null) continue;
+      const value = provide[k].val.eval(this);
+      binds[k] = { value, path: base === null ? null : base.concat([step]) };
+      has = true;
+    }
+    for (const k in provideType) {
+      types[k] = provideType[k];
+      has = true;
+    }
+    if (!has) return this;
+    return this._with({ dynBinds: [new DynFrame(binds, types), this.dynBinds] });
+  }
+  // The absolute address of the component being entered, or null when this
+  // position cannot be written down as one. Frame-only steps carry bindings and
+  // address nothing, so they are compacted away first; what is left is checked
+  // against the value actually being rendered, because a scope CAN move the
+  // render position without contributing an addressing step (a plain `@each`
+  // body re-binds `it` to the item while its rebuild step is an identity).
+  //
+  // A null base still publishes the VALUE — `*name` reads it fine — but there is
+  // nowhere to resume, so `<x render="*name">` renders nothing rather than
+  // editing whatever happens to live at the address we guessed.
+  _publishBase() {
+    const base = this.renderPath.toTransactionPath().compact();
+    return base.lookup(this.root, NOT_FOUND) === this.it ? base : null;
+  }
+  static root(comps, it, ctx = null) {
+    return new _Stack({
+      comps,
+      root: it,
+      it,
+      binds: [new BindFrame(it, {}, true), null],
+      dynBinds: [new DynFrame({}, {}), null],
+      views: ["main", null],
+      viewsId: "",
+      renderPath: new DispatchPath(),
+      pendingFrame: false,
+      ctx
+    })._pushProvides();
+  }
+  // `renderPath` defaults to this stack's own: an ordinary scope does not move.
+  // `pendingFrame` clears on a component frame (which emits the base) and is
+  // inherited by transparent scopes, which have to carry it to the next boundary.
+  enter(it, bindings = {}, isFrame = true, renderPath = this.renderPath, pendingFrame = null) {
+    const stack = this._with({
+      it,
+      binds: [new BindFrame(it, bindings, isFrame), this.binds],
+      renderPath,
+      pendingFrame: pendingFrame ?? (isFrame ? false : this.pendingFrame)
+    });
+    return isFrame ? stack._pushProvides() : stack;
+  }
+  pushViewName(name) {
+    const views = [name, this.views];
+    return this._with({ views, viewsId: computeViewsId(views) });
+  }
+  // Published types are stable per scope and would only churn the render cache, so
+  // the cache key covers values alone.
+  _pushDynBindValuesToArray(arr, comp) {
+    for (const k in comp.provide) arr.push(this.lookupDynamic(k));
+    for (const k in comp.lookup) arr.push(this.lookupDynamic(k));
+  }
+  // `*name`: the nearest binding above (including this component's own provides,
+  // pushed on entering it), else a path registered in the component's lexical
+  // scope, else this component's declared default, else null.
+  //
+  // One chain walk and no producer resolution: a lookup names what it WANTS, so the
+  // frame it wants is keyed by that name. The default belongs to the CONSUMER's
+  // declaration and is evaluated against the consumer's stack, which is why it is
+  // consulted only after the whole chain has missed.
+  lookupDynamicLocated(name) {
+    if (isTypeName(name)) return null;
+    const v = lookup(this.dynBinds, name);
+    if (v != null) return v;
+    const comp = this.comps.getCompFor(this.it);
+    if (comp == null) return null;
+    const path2 = comp.scope?.lookupPath?.(name) ?? null;
+    if (path2 !== null) {
+      const value2 = path2.lookup(this.root, NOT_FOUND);
+      if (value2 !== NOT_FOUND) return { value: value2, path: path2 };
+    }
+    const dval = comp.lookup[name]?.val ?? null;
+    if (dval === null) return null;
+    const step = dval.toPathItem?.() ?? null;
+    const value = dval.eval(this);
+    return step === null ? { value, path: null } : { value, path: this.renderPath.toTransactionPath().concat([step]) };
+  }
+  lookupDynamic(name) {
+    if (isTypeName(name)) return lookup(this.dynBinds, name);
+    return this.lookupDynamicLocated(name)?.value ?? null;
+  }
+  lookupBind(name) {
+    return lookup(this.binds, name);
+  }
+  lookupFieldRaw(name) {
+    return this.it[name] ?? null;
+  }
+  lookupMethod(name) {
+    const fn = this.it[name];
+    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.
+  lookupEvent() {
+    return this.ctx?.event ?? null;
+  }
+  lookupDragInfo() {
+    return this.ctx?.dragInfo ?? null;
+  }
+  getHandlerFor(name, key) {
+    return this.comps.getHandlerFor(this.it, name, key);
+  }
+  lookupBestView(views, defaultViewName) {
+    let n = this.views;
+    while (n !== null) {
+      const view = views[n[0]];
+      if (view !== void 0) return view;
+      n = n[1];
+    }
+    return views[defaultViewName];
+  }
+};
+var NOT_FOUND = /* @__PURE__ */ Symbol("NOT_FOUND");
+
 // src/components.js
 var COMPONENT = /* @__PURE__ */ Symbol.for("tutuca.component");
 var Components = class {
@@ -2458,12 +2738,14 @@ var ComponentStack = class _ComponentStack {
     this.byName = {};
     this.intentsByName = {};
     this.macros = {};
+    this.paths = {};
   }
   enter() {
     return new _ComponentStack(this.comps, this);
   }
   registerComponents(comps, opts) {
-    const { aliases = {} } = opts ?? {};
+    const { aliases = {}, paths } = opts ?? {};
+    if (paths) this.registerPaths(paths);
     for (let i = 0; i < comps.length; i++) {
       const Comp = comps[i];
       Comp[COMPONENT].scope = this.enter();
@@ -2477,6 +2759,27 @@ var ComponentStack = class _ComponentStack {
       else console.warn("alias", alias, "to inexistent component", aliases[alias]);
     }
   }
+  // Register lowercase names as absolute paths from the app state root. A
+  // descendant that declares one in its `lookup` reads and renders `*name` without
+  // anything above it publishing one — which is what makes a session, a theme or a
+  // host-owned value available in its natural registration scope, instead of forcing
+  // an application root whose only job is to `provide` it. Register on a nested
+  // scope to narrow a name; nearest registration wins.
+  //
+  // Uppercase names are ignored: a component TYPE is what `lookupComponent` already
+  // answers, and a type has no path.
+  registerPaths(paths) {
+    for (const name in paths) {
+      if (isTypeName(name)) {
+        console.warn("registerPaths: a type name has no path", name);
+        continue;
+      }
+      this.paths[name] = paths[name].toPath?.() ?? paths[name];
+    }
+  }
+  lookupPath(name) {
+    return this.paths[name] ?? this.parent?.lookupPath(name) ?? null;
+  }
   registerMacros(macros) {
     for (const key in macros) {
       const lower = key.toLowerCase();
@@ -2508,17 +2811,16 @@ var ComponentStack = class _ComponentStack {
   lookupComponent(name) {
     return this.byName[name] ?? this.parent?.lookupComponent(name) ?? null;
   }
-  // The component in this scope chain that provides `name`, innermost first. A lookup
-  // names a value without naming its producer, so the render-target teleport
-  // (resolveDynProducer) recovers the producer here instead. Sound because
-  // PROVIDE_NAME_COLLISION keeps a provide name to one producer per chain; with two,
-  // this returns the innermost and the linter has already reported the ambiguity.
-  lookupProvider(name) {
+  // Whether anything in this scope chain provides `name`. Existence only: a lookup
+  // names what it WANTS and takes whoever is nearest above it at render time, so
+  // there is no producer to identify — several components may publish one name and
+  // the live render ancestry decides. Used by the linter to tell a lookup that can
+  // be satisfied from one that never will be.
+  hasProvider(name) {
     for (const compName in this.byName) {
-      const Comp = this.byName[compName];
-      if (Comp.provide?.[name] !== void 0) return Comp;
+      if (this.byName[compName].provide?.[name] !== void 0) return true;
     }
-    return this.parent?.lookupProvider(name) ?? null;
+    return this.parent?.hasProvider(name) ?? false;
   }
   lookupMacro(name) {
     return this.macros[name] ?? this.parent?.lookupMacro(name) ?? null;
@@ -2535,10 +2837,6 @@ var LookupInfo = class {
   }
 };
 var isString = (v) => typeof v === "string";
-var isTypeName = (s) => {
-  const c = s.charCodeAt(0);
-  return c >= 65 && c <= 90;
-};
 var _rawSpecKeys = "name view style commonStyle globalStyle receive intent alter views provide lookup fields methods statics";
 var KNOWN_SPEC_KEYS = new Set(_rawSpecKeys.split(" "));
 var _compId = 0;
@@ -2611,160 +2909,6 @@ var Component = class {
   }
 };
 
-// src/stack.js
-var STOP = /* @__PURE__ */ Symbol("STOP");
-var NEXT = /* @__PURE__ */ Symbol("NEXT");
-var DEFAULT_ROUTE = ["dyn", "lex"];
-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) {
-    const r = n[0].lookup(name);
-    if (r === STOP) return dv;
-    if (r !== NEXT) return r;
-    n = n[1];
-  }
-  return dv;
-}
-var BindFrame = class {
-  constructor(it, binds, isFrame) {
-    this.it = it;
-    this.binds = binds;
-    this.isFrame = isFrame;
-  }
-  lookup(name) {
-    const v = this.binds[name];
-    return v === void 0 ? this.isFrame ? STOP : NEXT : v;
-  }
-};
-var ObjectFrame = class {
-  constructor(binds) {
-    this.binds = binds;
-  }
-  lookup(key) {
-    const v = this.binds[key];
-    return v === void 0 ? NEXT : v;
-  }
-};
-function computeViewsId(views) {
-  let s = "";
-  let n = views;
-  while (n !== null) {
-    s += n[0];
-    n = n[1];
-  }
-  return s === "main" ? "" : s;
-}
-var Stack = class _Stack {
-  constructor(comps, it, binds, dynBinds, views, viewsId, ctx = null) {
-    this.comps = comps;
-    this.it = it;
-    this.binds = binds;
-    this.dynBinds = dynBinds;
-    this.views = views;
-    this.viewsId = viewsId;
-    this.ctx = ctx;
-  }
-  // Evaluate every provide the entered component publishes and push them as one
-  // dynBinds frame, keyed by NAME. Published types go in the same frame: a type name
-  // starts A-Z and a value name does not, so the two namespaces cannot collide and
-  // nearest-ancestor-wins falls out of frame order for both. No-op with no provides.
-  _pushProvides() {
-    const comp = this.comps.getCompFor(this.it);
-    if (comp == null) return this;
-    const { provide, provideType } = comp;
-    const dynObj = {};
-    let has = false;
-    for (const k in provide) {
-      dynObj[k] = provide[k].val.eval(this);
-      has = true;
-    }
-    for (const k in provideType) {
-      dynObj[k] = provideType[k];
-      has = true;
-    }
-    if (!has) return this;
-    const newDynBinds = [new ObjectFrame(dynObj), this.dynBinds];
-    const { comps, it, binds, views, viewsId, ctx } = this;
-    return new _Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
-  }
-  static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, {}, true), null];
-    const dynBinds = [new ObjectFrame({}), null];
-    const views = ["main", null];
-    return new _Stack(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();
-  }
-  enter(it, bindings = {}, isFrame = true) {
-    const { comps, binds, dynBinds, views, viewsId, ctx } = this;
-    const newBinds = [new BindFrame(it, bindings, isFrame), binds];
-    const stack = new _Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx);
-    return isFrame ? stack._pushProvides() : stack;
-  }
-  pushViewName(name) {
-    const { comps, it, binds, dynBinds, views, ctx } = this;
-    const newViews = [name, views];
-    return new _Stack(comps, it, binds, dynBinds, newViews, computeViewsId(newViews), ctx);
-  }
-  // Published types are stable per scope and would only churn the render cache, so
-  // the cache key covers values alone.
-  _pushDynBindValuesToArray(arr, comp) {
-    for (const k in comp.provide) arr.push(this.lookupDynamic(k));
-    for (const k in comp.lookup) arr.push(this.lookupDynamic(k));
-  }
-  // `*name`: the nearest binding above (including this component's own provides,
-  // pushed on entering it), else this component's declared default, else null.
-  lookupDynamic(name) {
-    const v = lookup(this.dynBinds, name);
-    if (v != null) return v;
-    const comp = this.comps.getCompFor(this.it);
-    return comp?.lookup[name]?.val?.eval(this) ?? null;
-  }
-  lookupBind(name) {
-    return lookup(this.binds, name);
-  }
-  lookupFieldRaw(name) {
-    return this.it[name] ?? null;
-  }
-  lookupMethod(name) {
-    const fn = this.it[name];
-    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.
-  lookupEvent() {
-    return this.ctx?.event ?? null;
-  }
-  lookupDragInfo() {
-    return this.ctx?.dragInfo ?? null;
-  }
-  getHandlerFor(name, key) {
-    return this.comps.getHandlerFor(this.it, name, key);
-  }
-  lookupBestView(views, defaultViewName) {
-    let n = this.views;
-    while (n !== null) {
-      const view = views[n[0]];
-      if (view !== void 0) return view;
-      n = n[1];
-    }
-    return views[defaultViewName];
-  }
-};
-
 // src/oo.js
 var BAD_VALUE = /* @__PURE__ */ Symbol("BadValue");
 var nullCoercer = (v) => v;
@@ -2797,9 +2941,22 @@ var CHECK_TYPE_LIST = Array.isArray;
 var CHECK_TYPE_OBJECT = isPlainObject;
 var CHECK_TYPE_MAP = (v) => v instanceof Map;
 var CHECK_TYPE_SET = (v) => v instanceof Set;
+var COERCE_NONE = (_v) => null;
+var COERCE_BOOL = (v) => !!v;
+var COERCE_STRING = (v) => v?.toString?.() ?? "";
+var COERCE_INT = (v) => Number.isFinite(v) ? Math.trunc(v) : null;
+var COERCE_LIST = (v) => Array.isArray(v) ? [...v] : null;
+var COERCE_OBJECT = (v) => isPlainObject(v) ? { ...v } : null;
+var 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;
+};
+var COERCE_SET = (v) => v instanceof Set || Array.isArray(v) ? new Set(v) : null;
 var FieldBool = class extends Field {
   constructor(name, defaultValue = false) {
-    super("bool", name, CHECK_TYPE_BOOL, (v) => !!v, defaultValue);
+    super("bool", name, CHECK_TYPE_BOOL, COERCE_BOOL, defaultValue);
   }
 };
 var FieldAny = class extends Field {
@@ -2809,23 +2966,17 @@ var FieldAny = class extends Field {
 };
 var FieldString = class extends Field {
   constructor(name, defaultValue = "") {
-    super("text", name, CHECK_TYPE_STRING, (v) => v?.toString?.() ?? "", defaultValue);
+    super("text", name, CHECK_TYPE_STRING, COERCE_STRING, defaultValue);
   }
 };
 var FieldInt = class extends Field {
   constructor(name, defaultValue = 0) {
-    super(
-      "int",
-      name,
-      CHECK_TYPE_INT,
-      (v) => Number.isFinite(v) ? Math.trunc(v) : null,
-      defaultValue
-    );
+    super("int", name, CHECK_TYPE_INT, COERCE_INT, defaultValue);
   }
 };
 var FieldFloat = class extends Field {
   constructor(name, defaultValue = 0) {
-    super("float", name, CHECK_TYPE_FLOAT, (_) => null, defaultValue);
+    super("float", name, CHECK_TYPE_FLOAT, COERCE_NONE, defaultValue);
   }
 };
 var metaOf = (v) => v?.constructor?.[COMPONENT] ?? v?.constructor?.getMetaClass?.();
@@ -2838,45 +2989,22 @@ var FieldComp = class extends Field {
 };
 var FieldList = class extends Field {
   constructor(name, defaultValue = []) {
-    super("list", name, CHECK_TYPE_LIST, (v) => Array.isArray(v) ? [...v] : null, defaultValue);
+    super("list", name, CHECK_TYPE_LIST, COERCE_LIST, defaultValue);
   }
 };
 var FieldObject = class extends Field {
   constructor(name, defaultValue = {}) {
-    super(
-      "object",
-      name,
-      CHECK_TYPE_OBJECT,
-      (v) => isPlainObject(v) ? { ...v } : null,
-      defaultValue
-    );
+    super("object", name, CHECK_TYPE_OBJECT, COERCE_OBJECT, defaultValue);
   }
 };
 var FieldMap = class extends Field {
   constructor(name, defaultValue = /* @__PURE__ */ new Map()) {
-    super(
-      "map",
-      name,
-      CHECK_TYPE_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;
-      },
-      defaultValue
-    );
+    super("map", name, CHECK_TYPE_MAP, COERCE_MAP, defaultValue);
   }
 };
 var FieldSet = class extends Field {
   constructor(name, defaultValue = /* @__PURE__ */ new Set()) {
-    super(
-      "set",
-      name,
-      CHECK_TYPE_SET,
-      (v) => v instanceof Set || Array.isArray(v) ? new Set(v) : null,
-      defaultValue
-    );
+    super("set", name, CHECK_TYPE_SET, COERCE_SET, defaultValue);
   }
 };
 function mkCompField(field, scope, args) {
@@ -2974,8 +3102,7 @@ function classFromData(name, { fields = {}, methods, statics }) {
     const value = fields[field];
     const type = typeof value;
     if (type === "string") b.addField(field, value, FieldString);
-    else if (type === "number")
-      b.addField(field, value, Number.isInteger(value) ? FieldInt : FieldFloat);
+    else if (type === "number") b.addField(field, value, FieldFloat);
     else if (type === "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);
@@ -3127,9 +3254,9 @@ var Transactor = class {
   // `.a[.selId]` render target reconstructed from a DOM event) against the root the
   // handler read, so pathKeys carries concrete keys instead of dropping the dynamic
   // step. No-op when nobody is observing.
-  _emitRecord(root, { kind, name, args, path, targetPath, handler, handlerName, matched, before, after, parent }) {
+  _emitRecord(root, { kind, name, args, path: path2, targetPath, handler, handlerName, matched, before, after, parent }) {
     if (this._observers.length === 0) return;
-    const pinned = path.pinKeys(root);
+    const pinned = path2.pinKeys(root);
     this._emit({
       kind,
       name,
@@ -3180,18 +3307,20 @@ var Transactor = class {
   // 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.
-  pushSend(path, name, args = [], parent = null, origin = null) {
-    const t = new SendEvent(path, this, name, args, parent);
-    t.origin = origin === null ? null : origin.toTransactionPath().pinKeys(this.state.val);
+  pushSend(path2, name, args = [], parent = null, origin = null, txnPath = null) {
+    const t = new SendEvent(path2, 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);
   }
   // 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
   // `opts.livePath` opts out of pinning the answer's destination keys.
-  pushIntent(path, name, args = [], opts = {}, parent = null) {
+  pushIntent(path2, name, args = [], opts = {}, parent = null) {
     const release = parent ? parent.completion.track() : null;
-    const walk = new IntentWalk(this, path, name, args, opts, parent, release);
+    const walk = new IntentWalk(this, path2, name, args, opts, parent, release);
     walk.advance();
     return walk;
   }
@@ -3225,16 +3354,17 @@ var Transactor = class {
       transaction._completion?.releaseSelf();
     }
   }
-  transactInputNow(path, event, eventHandler, dragInfo) {
-    this.transact(new InputEvent(path, event, eventHandler, this, dragInfo));
+  transactInputNow(path2, event, eventHandler, dragInfo) {
+    this.transact(new InputEvent(path2, event, eventHandler, this, dragInfo));
   }
 };
 function nullHandler() {
   return this;
 }
 var Transaction = class {
-  constructor(path, transactor, parentTransaction = null) {
-    this.path = path;
+  constructor(path2, transactor, parentTransaction = null) {
+    this.path = path2;
+    this.txnPath = null;
     this.transactor = transactor;
     this.parentTransaction = parentTransaction;
     this._completion = null;
@@ -3283,9 +3413,11 @@ var Transaction = class {
   getHandlerAndArgs(_root, _instance, _comps) {
     return null;
   }
-  // The path used to apply the mutation. Teleports dynamic-var renders so it lands on
-  // the data's real location (the dispatch `this.path` keeps intermediates).
+  // 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).
   getTransactionPath() {
+    if (this.txnPath !== null) return this.txnPath;
     return this.path.toTransactionPath().compact();
   }
   run(curRoot, comps) {
@@ -3303,15 +3435,16 @@ var Transaction = class {
   }
 };
 var InputEvent = class extends Transaction {
-  constructor(path, e, handler, transactor, dragInfo) {
-    super(path, transactor);
+  constructor(path2, e, handler, transactor, dragInfo) {
+    super(path2, transactor);
     this.e = e;
     this.handler = handler;
     this.dragInfo = dragInfo;
     this._dispatchPath = null;
   }
-  // Frame steps removed, DynStep + one step per crossed component kept: bubbling
-  // it visits every component (including intermediates of a dynamic-var render).
+  // Frame-only steps removed, one step per crossed component kept — inside every
+  // continuation frame independently, so bubbling it visits every component and
+  // then returns to the caller that wrote the `*name`.
   get dispatchPath() {
     this._dispatchPath ??= this.path.compact();
     return this._dispatchPath;
@@ -3346,11 +3479,11 @@ var InputEvent = class extends Transaction {
     this.transactor.pushIntent(this.dispatchPath, name, args, rest, this);
   }
   getHandlerAndArgs(root, _instance, comps) {
-    const stack = this.path.toTransactionPath().buildStack(Stack.root(comps, root, this));
+    const stack = this.path.buildStack(Stack.root(comps, root, this));
     const [handler, args] = this.handler.getHandlerAndArgs(stack, this);
     this._handlerArgs = [...args];
-    const path = this.dispatchPath;
-    args.push(new EventContext(path, this.transactor, this));
+    const path2 = this.dispatchPath;
+    args.push(new EventContext(path2, this.transactor, this));
     return [handler, args];
   }
   // The dispatched DOM event, read only through `e.<member>` handler args
@@ -3361,11 +3494,11 @@ var InputEvent = class extends Transaction {
   }
 };
 var NameArgsTransaction = class extends Transaction {
-  constructor(path, transactor, name, args, parentTransaction) {
-    super(path, transactor, parentTransaction);
+  constructor(path2, transactor, name, args, parentTransaction) {
+    super(path2, transactor, parentTransaction);
     this.name = name;
     this.args = args;
-    this.targetPath = path;
+    this.targetPath = path2;
   }
   handlerProp = null;
   // NameArgs verbs map their handler bucket straight to the observed kind:
@@ -3422,8 +3555,8 @@ var SendEvent = class extends NameArgsTransaction {
 };
 var IntentEvent = class extends NameArgsTransaction {
   handlerProp = "intent";
-  constructor(path, transactor, walk) {
-    super(path, transactor, walk.name, walk.args, walk.parent);
+  constructor(path2, transactor, walk) {
+    super(path2, transactor, walk.name, walk.args, walk.parent);
     this.walk = walk;
     this.targetPath = walk.origin;
   }
@@ -3450,17 +3583,17 @@ var PASS = /* @__PURE__ */ Symbol.for("tutuca.intent.pass");
 var REFUSAL_RING_CAP = 200;
 var INTENT_DEPTH = 64;
 var IntentWalk = class {
-  constructor(transactor, path, name, args, opts, parent, release) {
+  constructor(transactor, path2, name, args, opts, parent, release) {
     this.transactor = transactor;
     this.name = name;
     this.args = args;
     this.route = opts?.route ?? DEFAULT_ROUTE;
     this.parent = parent;
     this.release = release;
-    this.origin = path;
-    this.answerPath = opts?.livePath ? null : path.toTransactionPath().pinKeys(transactor.state.val);
+    this.origin = path2;
+    this.answerPath = opts?.livePath ? null : path2.toTransactionPath().pinKeys(transactor.state.val);
     this.legIndex = 0;
-    this.dynAt = path;
+    this.dynAt = path2;
     this.hops = 0;
     this.ended = false;
   }
@@ -3472,7 +3605,7 @@ var IntentWalk = class {
     while (this.legIndex < this.route.length) {
       const leg = this.route[this.legIndex];
       if (leg === "dyn") {
-        if (this.dynAt.steps.length === 0) {
+        if (!this.dynAt.canPop()) {
           this.legIndex++;
           continue;
         }
@@ -3569,8 +3702,8 @@ var IntentWalk = class {
     if (this.ended) return;
     this.ended = true;
     if (name === null) return this.release?.();
-    const path = this.answerPath ?? this.origin;
-    const t = new SendEvent(path, this.transactor, name, args, this.parent);
+    const t = new SendEvent(this.origin, this.transactor, name, args, this.parent);
+    t.txnPath = this.answerPath;
     t._isAnswer = true;
     this.transactor.pushTransaction(t);
     if (this.release) t.completion.whenSubtreeSettled().then(this.release);
@@ -3636,8 +3769,8 @@ var Completion = class {
   }
 };
 var Dispatcher = class {
-  constructor(path, transactor, parentTransaction, root = transactor.state.val) {
-    this.path = path;
+  constructor(path2, transactor, parentTransaction, root = transactor.state.val) {
+    this.path = path2;
     this.transactor = transactor;
     this.parent = parentTransaction;
     this.root = root;
@@ -3665,7 +3798,9 @@ var Dispatcher = class {
   // replayed; provides are pushed on every component frame either way, so a provide
   // that reads a loop binding is the one case this cannot reproduce faithfully.
   _stack() {
-    this._stackMemo ??= this.path.toTransactionPath().buildStack(Stack.root(this.transactor.comps, this.root, this.parent));
+    this._stackMemo ??= this.path.buildStack(
+      Stack.root(this.transactor.comps, this.root, this.parent)
+    );
     return this._stackMemo;
   }
   // Resolve a name the way the renderer would. `opts.route` takes the same legs in
@@ -3679,14 +3814,19 @@ var Dispatcher = class {
     );
   }
   // The `lex` leg without a Stack: the scope of the component whose handler is
-  // running, which is the leaf of this ctx's path.
+  // running, which is the leaf of this ctx's path. A type name resolves to the
+  // component registered under it; a value name to a path registered under it
+  // (see ComponentStack.registerPaths), read against the current root.
   _lookupLex(name) {
     let Comp = null;
     this.walkPath((c) => {
       Comp = c;
       return false;
     });
-    return Comp?.scope?.lookupComponent(name) ?? null;
+    const scope = Comp?.scope;
+    if (scope == null) return null;
+    if (isTypeName(name)) return scope.lookupComponent(name) ?? null;
+    return scope.lookupPath(name)?.lookup(this.root) ?? null;
   }
   // A component lookup is a value lookup constrained to a component. The `lex` leg
   // can only ever answer with one; the `dyn` leg reads a binding an ancestor
@@ -3708,8 +3848,8 @@ var Dispatcher = class {
   send(name, args) {
     return this.sendAtPath(this.path, name, args);
   }
-  sendAtPath(path, name, args) {
-    return this.transactor.pushSend(path, name, args, this.parent, this.path);
+  sendAtPath(path2, name, args) {
+    return this.transactor.pushSend(path2, name, args, this.parent, this.path);
   }
   // An intent is ROUTED: it names a job and walks until something answers. The verb
   // does not decide which scope answers — `opts.route` does, written here at the call
@@ -3717,8 +3857,8 @@ var Dispatcher = class {
   intent(name, args, opts) {
     return this.intentAtPath(this.path, name, args, opts);
   }
-  intentAtPath(path, name, args, opts) {
-    return this.transactor.pushIntent(path, name, args, opts, this.parent);
+  intentAtPath(path2, name, args, opts) {
+    return this.transactor.pushIntent(path2, name, args, opts, this.parent);
   }
 };
 var EventContext = class extends Dispatcher {
@@ -3747,7 +3887,14 @@ var EventContext = class extends Dispatcher {
       this.transactor.refuse("NO_SENDER", { name });
       return null;
     }
-    return this.sendAtPath(origin, name, args);
+    return this.transactor.pushSend(
+      origin,
+      name,
+      args,
+      this.parent,
+      this.path,
+      this.parent.originPinned
+    );
   }
   // End the walk answering nothing — "served, and no answer".
   stop() {
@@ -3779,7 +3926,7 @@ var PathChanges = class extends PathBuilder {
   }
 };
 function rootDispatcher(transactor) {
-  return new Dispatcher(new Path([]), transactor, null);
+  return new Dispatcher(new DispatchPath(), transactor, null);
 }
 
 // src/app.js
@@ -3820,7 +3967,7 @@ var App = class {
     const { type } = e;
     const isDrag = type === "dragover" || type === "dragstart" || type === "dragend" || type === "drop";
     const { rootNode: root, maxEventNodeDepth: maxDepth, comps, transactor } = this;
-    const [path, handlers] = Path.fromNodeAndEventName(
+    const [path2, handlers] = DispatchPath.fromNodeAndEventName(
       e.target,
       type,
       root,
@@ -3828,9 +3975,9 @@ var App = class {
       comps,
       !isDrag
     );
-    if (isDrag) this._handleDragEvent(e, type, path);
-    if (path !== null && handlers !== null)
-      for (const handler of handlers) transactor.transactInputNow(path, e, handler, this.dragInfo);
+    if (isDrag) this._handleDragEvent(e, type, path2);
+    if (path2 !== null && handlers !== null)
+      for (const handler of handlers) transactor.transactInputNow(path2, e, handler, this.dragInfo);
   }
   _handleTouchEvent(e) {
     const { type } = e;
@@ -3873,7 +4020,7 @@ var App = class {
       this._touch = null;
     }
   }
-  _handleDragEvent(e, type, path) {
+  _handleDragEvent(e, type, path2) {
     if (type === "dragover") {
       const dropTarget = getClosestDropTarget(e.target, this.rootNode, Infinity);
       if (dropTarget !== null) {
@@ -3885,10 +4032,10 @@ var App = class {
     } else if (type === "dragstart") {
       e.target.dataset.dragging = 1;
       const rootValue = this.state.val;
-      const txnPath = path.compact().toTransactionPath();
+      const txnPath = path2.compact().toTransactionPath();
       const value = txnPath.lookup(rootValue);
       const dragType = e.target.dataset.dragtype ?? "?";
-      const stack = path.toTransactionPath().buildStack(this.makeStack(rootValue));
+      const stack = path2.buildStack(this.makeStack(rootValue));
       this.dragInfo = new DragInfo(stack, value, dragType, e.target);
     } else if (type === "drop") {
       e.preventDefault();
@@ -3963,7 +4110,7 @@ var App = class {
       this.rootNode.removeEventListener(name, this, listenerOpts(name));
   }
   sendAtRoot(name, args) {
-    this.transactor.pushSend(new Path([]), name, args);
+    this.transactor.pushSend(new DispatchPath(), name, args);
   }
   registerComponents(comps, opts) {
     const scope = this.compStack.enter();
@@ -4181,7 +4328,20 @@ var WeakMapDomCache = class {
 };
 
 // src/renderer.js
-var DATASET_ATTRS = ["nid", "cid", "eid", "vid", "si", "sk"];
+var DATASET_ATTRS = ["nid", "cid", "eid", "vid", "si", "sk", "rp"];
+function stampRenderBase(vdom, text) {
+  if (vdom instanceof VNode)
+    return new VNode(
+      vdom.tag,
+      { ...vdom.attrs, "data-rp": text },
+      vdom.childs,
+      vdom.key,
+      vdom.namespace
+    );
+  if (vdom instanceof VFragment)
+    return new VFragment(vdom.childs.map((c) => stampRenderBase(c, text)));
+  return vdom;
+}
 var Renderer = class {
   constructor(comps) {
     this.comps = comps;
@@ -4218,17 +4378,17 @@ var Renderer = class {
     if (comp === null) return null;
     return this._rValComp(stack, val, comp, comp.getView(viewName).anode, "ROOT", viewName);
   }
-  renderIt(stack, node, key, viewName) {
+  renderIt(stack, node, key, viewName, base = null) {
     const comp = this.comps.getCompFor(stack.it);
-    return comp ? this._rValComp(stack, stack.it, comp, node, key, viewName) : null;
+    return comp ? this._rValComp(stack, stack.it, comp, node, key, 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
   // cache as a globally-unique object: node ids alone are unique only within a
   // single view, so the same value rendered by two components (e.g. through a
   // shared dynamic-var sequence) would otherwise collide in the cache.
-  _rValComp(stack, val, comp, node, key, viewName) {
-    const cacheKey = `${viewName ?? ""}${stack.viewsId ?? ""}${key}`;
+  _rValComp(stack, val, comp, node, key, viewName, base = null) {
+    const cacheKey = `${viewName ?? ""}${stack.viewsId ?? ""}${key}${stack.renderPath.addressKey}`;
     const cachePath = [node, val];
     stack._pushDynBindValuesToArray(cachePath, comp);
     const cachedNode = this.cache.get(cachePath, cacheKey);
@@ -4236,30 +4396,43 @@ var Renderer = class {
     const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
     const body = this.renderView(view, stack);
     if (body == null) return null;
+    const baseJson = base === null ? null : pathToJson(base);
     const meta = this._renderMetadata({
       $: "Comp",
       nid: node?.nodeId ?? null,
       cid: comp.id,
-      vid: view.name
+      vid: view.name,
+      ...baseJson === null ? null : { base: baseJson }
     });
-    const dom = new VFragment([meta, body]);
+    const dom = new VFragment([
+      meta,
+      baseJson === null ? body : stampRenderBase(body, JSON.stringify(baseJson))
+    ]);
     this.cache.set(cachePath, cacheKey, dom);
     return dom;
   }
   pushEachEntry(r, nid, attrName, key, dom) {
     r.push(this._renderMetadata({ $: "Each", nid, [attrName]: key }), dom);
   }
-  renderEachWhen(stack, iterInfo, view, nid) {
+  renderEachWhen(stack, each) {
+    const { iterInfo, node: view, nodeId: nid } = each;
     const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
+    const seqPath = iterInfo.val instanceof DynVal ? stack.lookupDynamicLocated(iterInfo.val.name)?.path ?? null : null;
     const r = [];
     const it = stack.it;
     const renderOne = (key, value, attrName, binds) => {
+      const itemBase = seqPath === null ? null : keyedPath(seqPath, key);
+      const itemStep = itemBase === null ? each.itemStep(key) : null;
+      const itemPath = itemBase !== null ? stack.renderPath.pushFrame(itemBase) : itemStep !== null ? stack.renderPath.pushItem(itemStep) : stack.renderPath;
       const cachePath = enricher ? [view, it, value] : [view, value];
-      const cacheKey = `${stack.viewsId ?? ""}${nid}${key}`;
+      const cacheKey = `${stack.viewsId ?? ""}${nid}${key}${itemPath.addressKey}`;
       const cachedNode = this.cache.get(cachePath, cacheKey);
       if (cachedNode) this.pushEachEntry(r, nid, attrName, key, cachedNode);
       else {
-        const dom = this.renderView(view, stack.enter(value, binds, false));
+        const dom = this.renderView(
+          view,
+          stack.enter(value, binds, false, itemPath, itemBase !== null)
+        );
         if (dom != null) this.pushEachEntry(r, nid, attrName, key, dom);
         this.cache.set(cachePath, cacheKey, dom);
       }
@@ -4371,6 +4544,7 @@ export {
   html,
   injectCss,
   macro,
+  path,
   phaseOps,
   resolveArgs,
   rootDispatcher,