kerfjs 2.0.0 → 3.0.0-beta.1

package/dist/index.js

@@ -1,8 +1,12 @@
-import { captureRowBindings, isSafeHtml, listSafeHtml, syncFormProp, newBindingContext, _setBindingContext, flattenWithoutListItems, wireBindings, collectLists, disposeRowBindings, flatten, LIST_MARKER_PREFIX, wireRowBindings, granularListSafeHtml, carryOrRewireRowBindings } from './chunk-RYZHZBHE.js';
-export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-RYZHZBHE.js';
-export { defineStore, resetAllStores } from './chunk-KFUDM3VP.js';
-import { warnIfInsideEffect, effect, isDevMode } from './chunk-NU7YHYEV.js';
-export { batch, computed, effect, signal } from './chunk-NU7YHYEV.js';
+import { itemVersion } from './chunk-QIP723L4.js';
+import { parseRowTemplate, rowContractError, parseSingleRow, collectTemplateChildren } from './chunk-YHH7OUFA.js';
+import { captureRowBindings, listSafeHtml, boundTextNodeOf, syncFormProp, newBindingContext, wireBindings, disposeRowBindings, isSafeHtml, wireRowBindings, _setBindingContext, TEXT_MARKER_PREFIX, ROW_TEXT_PREFIX, carryOrRewireRowBindings, granularListSafeHtml } from './chunk-JVVU2RQO.js';
+export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-JVVU2RQO.js';
+import { LIST_MARKER_PREFIX, flattenWithoutListItems, collectLists, flatten } from './chunk-GY4XV2UV.js';
+export { defineStore, resetAllStores } from './chunk-SAYPJ6XR.js';
+import { effect } from './chunk-3APBEVHF.js';
+export { batch, computed, effect, signal } from './chunk-3APBEVHF.js';
+import { devHooks } from './chunk-VVDJLWMP.js';
 
 // src/attrSelector.ts
 function cssEscapeIdent(value) {
@@ -106,7 +110,7 @@ function makeListener(rootEl, selector, handler, match) {
 }
 function delegate(rootEl, type, selector, handler, options) {
   assertValidSelector(selector, "delegate");
-  warnIfInsideEffect("delegate");
+  devHooks.delegateInEffect?.("delegate");
   const listener = makeListener(rootEl, selector, handler, options?.match ?? "closest");
   const capture = NON_BUBBLING.has(type);
   rootEl.addEventListener(type, listener, capture);
@@ -116,7 +120,7 @@ function delegate(rootEl, type, selector, handler, options) {
 }
 function delegateCapture(rootEl, type, selector, handler, options) {
   assertValidSelector(selector, "delegateCapture");
-  warnIfInsideEffect("delegateCapture");
+  devHooks.delegateInEffect?.("delegateCapture");
   const listener = makeListener(rootEl, selector, handler, options?.match ?? "closest");
   rootEl.addEventListener(type, listener, true);
   return () => {
@@ -124,52 +128,6 @@ function delegateCapture(rootEl, type, selector, handler, options) {
   };
 }
 
-// src/dev-each-warn.ts
-var warnedIds = /* @__PURE__ */ new Set();
-function isOptedIn() {
-  if (!isDevMode()) return false;
-  const proc = globalThis.process;
-  return proc?.env?.KERF_DEV_WARN_EACH_IN_MORPH_SKIP === "1";
-}
-function hasMorphSkipAncestor(el, root) {
-  let ancestor = el.parentElement;
-  while (ancestor !== null && ancestor !== root) {
-    if (ancestor.dataset.morphSkip !== void 0) return true;
-    ancestor = ancestor.parentElement;
-  }
-  return false;
-}
-function maybeWarnEachInMorphSkip(id, liveParent, rootEl) {
-  if (!isOptedIn()) return;
-  if (warnedIds.has(id)) return;
-  if (!hasMorphSkipAncestor(liveParent, rootEl)) return;
-  warnedIds.add(id);
-  console.warn(
-    `kerf: each() list '${id}' is inside a data-morph-skip subtree. The keyed reconciler still updates the list rows, but any static signal-reactive JSX inside the same skipped ancestor (e.g. <p>{count.value}</p>) is frozen \u2014 the morph never visits it. Remove data-morph-skip from any element that contains reactive JSX content and reserve it for truly library-owned hosts. Set KERF_DEV_WARN_EACH_IN_MORPH_SKIP=0 (or unset it) to silence this warning.`
-  );
-}
-var warnedDupIds = /* @__PURE__ */ new Set();
-function isOptedInDupKeys() {
-  if (!isDevMode()) return false;
-  const proc = globalThis.process;
-  return proc?.env?.KERF_DEV_WARN_DUPLICATE_EACH_KEYS === "1";
-}
-function maybeWarnDuplicateCacheKeys(id, segItems) {
-  if (!isOptedInDupKeys()) return;
-  if (warnedDupIds.has(id)) return;
-  const seen = /* @__PURE__ */ new Set();
-  for (const si of segItems) {
-    if (seen.has(si.cacheKey)) {
-      warnedDupIds.add(id);
-      console.warn(
-        `kerf: each() list '${id}' has duplicate cacheKey values (duplicate: ${String(si.cacheKey)}). The cacheKey function should return a unique value per row so kerf can tell apart items for memoization \u2014 duplicate values cause some rows to return stale cached HTML when external state that affects their render changes. Set KERF_DEV_WARN_DUPLICATE_EACH_KEYS=0 (or unset it) to silence this warning.`
-      );
-      return;
-    }
-    seen.add(si.cacheKey);
-  }
-}
-
 // src/list-render-state.ts
 function deriveListRenderState(bindingCount) {
   if (bindingCount === void 0) return "unbound";
@@ -198,60 +156,138 @@ function isArraySignal(value) {
   return typeof value === "object" && value !== null && value[ARRAY_SIGNAL_BRAND] === true;
 }
 var context = null;
+var renderingRow = false;
+function inRowScope(fn) {
+  const prev = renderingRow;
+  renderingRow = true;
+  try {
+    return fn();
+  } finally {
+    renderingRow = prev;
+  }
+}
 function _setRenderContext(c) {
   context = c;
 }
-function each(items, render, cacheKey) {
+function _resetCallOrderListState(ctx) {
+  const isCallOrderId = (id) => !id.startsWith("k:");
+  for (const map of [ctx.caches, ctx.bindingCounts, ctx.bindingSources]) {
+    for (const id of Array.from(map.keys())) {
+      if (isCallOrderId(id)) map.delete(id);
+    }
+  }
+}
+function isEachOptions(v) {
+  return typeof v === "object" && v !== null;
+}
+var VALID_KEY = /^[A-Za-z0-9_.:/-]+$/;
+function assertValidKey(key) {
+  if (typeof key !== "string" || !VALID_KEY.test(key) || key.includes("--")) {
+    throw new Error(
+      `each(): invalid list key ${JSON.stringify(key)}. A key must be a non-empty string of letters, digits, or _ . : / - (and may not contain "--"), because kerf writes it into the list's marker comment in the DOM. Use a short stable identifier, e.g. { key: 'results' }.`
+    );
+  }
+}
+function claimKey(ctx, key) {
+  assertValidKey(key);
+  if (renderingRow) {
+    throw new Error(
+      `each(): list key ${JSON.stringify(key)} was used by an each() inside a row render. A nested each() is not reconciled \u2014 the row is flattened to HTML, so the inner list never binds and would render as static markup. Render the inner collection with plain .map() (it re-renders with its row), or restructure to a flat list.`
+    );
+  }
+  if (ctx.keysThisRender.has(key)) {
+    throw new Error(
+      `each(): duplicate list key ${JSON.stringify(key)}. Every keyed each() in a mount must have its own key \u2014 two lists sharing one would share the same cache, binding and DOM anchor. Give each list a distinct key.`
+    );
+  }
+  ctx.keysThisRender.add(key);
+  return `k:${key}`;
+}
+function each(items, render, cacheKeyOrOptions) {
+  const useOptions = isEachOptions(cacheKeyOrOptions);
+  const cacheKey = useOptions ? cacheKeyOrOptions.cacheKey : cacheKeyOrOptions;
+  const listKey = useOptions ? cacheKeyOrOptions.key : void 0;
   if (isArraySignal(items) && context !== null) {
-    return eachGranular(items, render, cacheKey);
+    return eachGranular(items, render, cacheKey, listKey);
   }
   const snapshotItems = isArraySignal(items) ? items.value : items;
-  return eachSnapshot(snapshotItems, render, cacheKey);
+  return eachSnapshot(snapshotItems, render, cacheKey, listKey);
 }
-function eachSnapshot(items, render, cacheKey) {
+function eachSnapshot(items, render, cacheKey, listKey) {
   let id;
   if (context !== null) {
-    id = String(context.counter++);
+    id = listKey !== void 0 ? claimKey(context, listKey) : String(context.counter++);
   } else {
     id = "orphan";
   }
   return eachSnapshotById(items, render, cacheKey, id);
 }
-function eachGranular(sig, render, cacheKey) {
+function assertObjectItem(item, index) {
+  if (typeof item !== "object" || item === null) {
+    throw new Error(
+      `each(): items must be objects (the per-item HTML cache is a WeakMap), got ${item === null ? "null" : typeof item} at index ${index}. Wrap primitives if you need to iterate them, e.g. items.map(v => ({ v })).`
+    );
+  }
+}
+function eachGranular(sig, render, cacheKey, listKey) {
   const ctx = context;
-  const id = String(ctx.counter++);
+  const id = listKey !== void 0 ? claimKey(ctx, listKey) : String(ctx.counter++);
   const previousBindingCount = ctx.bindingCounts.get(id);
   const patches = sig._consumePatches();
   const snapshot = sig.value;
-  const decision = decideListPath(
+  const previousSource = ctx.bindingSources.get(id);
+  const sourceReused = ctx.bindingSources.has(id) && previousSource !== sig;
+  if (sourceReused && listKey === void 0) ctx.shiftCandidates.push(id);
+  const decision = sourceReused ? { path: "snapshot" } : decideListPath(
     deriveListRenderState(previousBindingCount),
     patches,
     snapshot.length,
     previousBindingCount
   );
   if (decision.path === "snapshot") {
-    return eachSnapshotById(snapshot, render, cacheKey, id);
+    return eachSnapshotById(snapshot, render, cacheKey, id, sig);
+  }
+  let staleIndexShift = false;
+  if (render.length >= 2 && devHooks.staleIndexEnabled?.() === true) {
+    const rendered = [];
+    for (let i = 0; i < previousBindingCount; i++) rendered.push(i);
+    for (const p of patches) {
+      if (p.type === "insert") rendered.splice(p.index, 0, p.index);
+      else if (p.type === "remove") rendered.splice(p.index, 1);
+      else if (p.type === "move") {
+        const [moved] = rendered.splice(p.from, 1);
+        rendered.splice(p.to, 0, moved);
+      }
+    }
+    for (let i = 0; i < rendered.length; i++) {
+      if (rendered[i] !== i) {
+        staleIndexShift = true;
+        break;
+      }
+    }
   }
   if (cacheKey !== void 0) {
-    const cache = ctx.caches.get(id);
+    const cache2 = ctx.caches.get(id);
     for (let i = 0; i < snapshot.length; i++) {
       const item = snapshot[i];
       const k = cacheKey(item, i);
-      const cached = cache.get(item);
+      const cached = cache2.get(item);
       if (cached !== void 0 && cached.cacheKey !== k) {
-        return eachSnapshotById(snapshot, render, cacheKey, id);
+        return eachSnapshotById(snapshot, render, cacheKey, id, sig);
       }
     }
   }
-  const renderRow = (item, index) => captureRowBindings(() => {
+  const renderRow = (item, index) => captureRowBindings(() => inRowScope(() => {
     const out = render(item, index);
     return isSafeHtml(out) ? out.toString() : out;
-  });
+  }));
   const internalPatches = new Array(patches.length);
+  const cache = ctx.caches.get(id);
   try {
     for (let i = 0; i < patches.length; i++) {
       const p = patches[i];
       if (p.type === "insert" || p.type === "update") {
+        assertObjectItem(p.item, p.index);
         const { html, bindings } = renderRow(p.item, p.index);
         internalPatches[i] = {
           type: p.type,
@@ -260,17 +296,25 @@ function eachGranular(sig, render, cacheKey) {
           html,
           bindings
         };
+        cache?.set(p.item, {
+          cacheKey: cacheKey ? cacheKey(p.item, p.index) : void 0,
+          html,
+          bindings,
+          version: itemVersion(p.item),
+          index: p.index
+        });
       } else {
         internalPatches[i] = p;
       }
     }
   } catch {
     ctx.bindingCounts.delete(id);
-    return eachSnapshotById(snapshot, render, cacheKey, id);
+    return eachSnapshotById(snapshot, render, cacheKey, id, sig);
   }
-  return granularListSafeHtml(id, [], internalPatches);
+  if (staleIndexShift) devHooks.staleIndex?.(id);
+  return granularListSafeHtml(id, [], internalPatches, sig);
 }
-function eachSnapshotById(items, render, cacheKey, id) {
+function eachSnapshotById(items, render, cacheKey, id, source) {
   let cache = null;
   if (context !== null) {
     let c = context.caches.get(id);
@@ -284,11 +328,7 @@ function eachSnapshotById(items, render, cacheKey, id) {
   const seen = /* @__PURE__ */ new Set();
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
-    if (typeof item !== "object" || item === null) {
-      throw new Error(
-        `each(): items must be objects (the per-item HTML cache is a WeakMap), got ${item === null ? "null" : typeof item} at index ${i}. Wrap primitives if you need to iterate them, e.g. items.map(v => ({ v })).`
-      );
-    }
+    assertObjectItem(item, i);
     if (seen.has(item)) {
       throw new Error(
         `each(): the same object reference appears at multiple indices in items (first seen earlier, again at index ${i}). The per-item HTML cache is keyed on object identity, so duplicate references break the keyed reconciler and can leak DOM nodes on re-render. Use a fresh object per row (e.g. items.map(o => ({ ...o })) before passing to each()).`
@@ -296,27 +336,60 @@ function eachSnapshotById(items, render, cacheKey, id) {
     }
     seen.add(item);
     const k = cacheKey ? cacheKey(item, i) : void 0;
+    const version = itemVersion(item);
     let html;
     let bindings;
     const cached = cache !== null ? cache.get(item) : void 0;
-    if (cached !== void 0 && cached.cacheKey === k) {
+    if (cached !== void 0 && cached.cacheKey === k && cached.version === version) {
       html = cached.html;
       bindings = cached.bindings;
+      if (cached.index !== i && render.length >= 2 && devHooks.staleIndexEnabled?.() === true) {
+        devHooks.staleIndex?.(id);
+      }
     } else {
-      const captured = captureRowBindings(() => {
+      const captured = captureRowBindings(() => inRowScope(() => {
         const out = render(item, i);
         return isSafeHtml(out) ? out.toString() : out;
-      });
+      }));
       html = captured.html;
       bindings = captured.bindings;
-      if (cache !== null) cache.set(item, { cacheKey: k, html, bindings });
+      if (cache !== null) cache.set(item, { cacheKey: k, html, bindings, version, index: i });
     }
     segItems[i] = { ref: item, cacheKey: k, html, bindings };
   }
   if (cacheKey !== void 0) {
-    maybeWarnDuplicateCacheKeys(id, segItems);
+    devHooks.duplicateCacheKeys?.(id, segItems);
+  }
+  return listSafeHtml(id, segItems, source);
+}
+
+// src/list-reconcile-focus.ts
+function captureFocus(liveParent) {
+  const active = document.activeElement;
+  if (active === null || active === document.body) return null;
+  if (!liveParent.contains(active)) return null;
+  const el = active;
+  let selStart = null;
+  let selEnd = null;
+  if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
+    try {
+      selStart = el.selectionStart;
+      selEnd = el.selectionEnd;
+    } catch {
+    }
+  }
+  return { el, selStart, selEnd };
+}
+function restoreFocus(snap) {
+  if (document.activeElement === snap.el) return;
+  if (!snap.el.isConnected) return;
+  snap.el.focus();
+  if (snap.selStart !== null && snap.selEnd !== null) {
+    try {
+      snap.el.setSelectionRange(snap.selStart, snap.selEnd);
+    } catch {
+    }
   }
-  return listSafeHtml(id, segItems);
 }
 
 // src/morph.ts
@@ -342,7 +415,9 @@ function morph(liveRoot, template, ownedItems = EMPTY_OWNED) {
     );
   }
   const templateEl = isElementNode(template) ? template : parseTemplate(liveRoot, template);
+  const focusSnap = captureFocus(liveRoot);
   morphChildren(liveRoot, templateEl, ownedItems);
+  if (focusSnap !== null) restoreFocus(focusSnap);
 }
 function _morphElement(fromEl, toEl, ownedItems = EMPTY_OWNED) {
   morphElement(fromEl, toEl, ownedItems);
@@ -355,12 +430,37 @@ function parseTemplate(liveRoot, template) {
   el.innerHTML = String(template);
   return el;
 }
+function protectionTag(node) {
+  const { dataset } = node;
+  return (dataset.morphSkip !== void 0 ? "s" : "") + (dataset.morphSkipChildren !== void 0 ? "c" : "") + (dataset.morphPreserve !== void 0 ? "p" : "");
+}
+var MARKER_PREFIXES = [LIST_MARKER_PREFIX, TEXT_MARKER_PREFIX, ROW_TEXT_PREFIX];
+function isMarker(node) {
+  if (node.nodeType !== COMMENT_NODE) return false;
+  const { data } = node;
+  return MARKER_PREFIXES.some((prefix) => data.startsWith(prefix));
+}
+function markersPairable(a, b) {
+  if (!isMarker(a) && !isMarker(b)) return true;
+  return a.data === b.data;
+}
 function skipOwned(node, ownedItems) {
   while (node !== null && node.nodeType === ELEMENT_NODE && ownedItems.has(node)) {
     node = node.nextSibling;
   }
   return node;
 }
+function isListMarker(node) {
+  return node.nodeType === COMMENT_NODE && node.data.startsWith(LIST_MARKER_PREFIX);
+}
+function afterListRegion(marker, ownedItems) {
+  let last = marker;
+  for (let r = marker.nextSibling; r !== null; r = r.nextSibling) {
+    if (isListMarker(r)) break;
+    if (r.nodeType === ELEMENT_NODE && ownedItems.has(r)) last = r;
+  }
+  return last.nextSibling;
+}
 function morphChildren(fromParent, toParent, ownedItems) {
   const keyed = /* @__PURE__ */ new Map();
   for (let c = fromParent.firstChild; c !== null; c = c.nextSibling) {
@@ -383,9 +483,47 @@ function morphChildren(fromParent, toParent, ownedItems) {
         fromChild = skipOwned(fromChild.nextSibling, ownedItems);
       }
     }
-    if (matched === null && fromChild !== null && fromChild.nodeType === toChild.nodeType && (toChild.nodeType !== ELEMENT_NODE || fromChild.tagName === toChild.tagName && getNodeKey(fromChild) === void 0)) {
+    if (matched === null && fromChild !== null && fromChild.nodeType === toChild.nodeType && markersPairable(fromChild, toChild) && (toChild.nodeType !== ELEMENT_NODE || fromChild.tagName === toChild.tagName && getNodeKey(fromChild) === void 0 && toKey === void 0 && protectionTag(fromChild) === protectionTag(toChild))) {
       matched = fromChild;
-      fromChild = skipOwned(fromChild.nextSibling, ownedItems);
+      fromChild = skipOwned(
+        isListMarker(matched) ? afterListRegion(matched, ownedItems) : fromChild.nextSibling,
+        ownedItems
+      );
+      if (matched.nodeType === COMMENT_NODE && fromChild !== null) {
+        const owned = boundTextNodeOf(matched);
+        if (owned !== null && fromChild === owned) {
+          fromChild = skipOwned(owned.nextSibling, ownedItems);
+        }
+      }
+    }
+    if (matched === null && toChild.nodeType === ELEMENT_NODE && fromChild !== null && toKey === void 0) {
+      const toTag = toChild.tagName;
+      for (let scan = fromChild.nextSibling; scan !== null; scan = scan.nextSibling) {
+        if (scan.nodeType !== ELEMENT_NODE) continue;
+        const el = scan;
+        if (ownedItems.has(el)) continue;
+        if (el.tagName !== toTag || getNodeKey(el) !== void 0) continue;
+        if (protectionTag(el) !== protectionTag(toChild)) continue;
+        matched = el;
+        fromParent.insertBefore(el, fromChild);
+        break;
+      }
+    }
+    if (matched === null && fromChild !== null && toChild.nodeType === COMMENT_NODE && toChild.data.startsWith(LIST_MARKER_PREFIX)) {
+      const wantData = toChild.data;
+      for (let scan = fromChild.nextSibling; scan !== null; scan = scan.nextSibling) {
+        if (scan.nodeType !== COMMENT_NODE || scan.data !== wantData) continue;
+        const regionEnd = afterListRegion(scan, ownedItems);
+        const run = [];
+        for (let r = scan; r !== null && r !== regionEnd; r = r.nextSibling) {
+          run.push(r);
+        }
+        const focusSnap = captureFocus(fromParent);
+        for (const node of run) fromParent.insertBefore(node, fromChild);
+        if (focusSnap !== null) restoreFocus(focusSnap);
+        matched = scan;
+        break;
+      }
     }
     if (matched !== null) {
       morphNode(matched, toChild, ownedItems);
@@ -493,144 +631,12 @@ function preserveTextEntryState(fromEl, toEl) {
   }
 }
 
-// src/dev-binding-warn.ts
-var warnedHoles = /* @__PURE__ */ new Set();
-function isOptedIn2() {
-  if (!isDevMode()) return false;
-  const proc = globalThis.process;
-  return proc?.env?.KERF_DEV_WARN_STALE_BINDING === "1";
-}
-function describeHole(b) {
-  return b.kind === "attr" ? `attr '${b.attr}' (id '${b.id}')` : `text (id '${b.id}')`;
-}
-function maybeWarnStaleBinding(prevWired, current) {
-  if (!isOptedIn2()) return;
-  const n = Math.min(prevWired.length, current.length);
-  for (let i = 0; i < n; i++) {
-    const cur = current[i];
-    if (prevWired[i].signal === cur.signal) continue;
-    if (warnedHoles.has(cur.id)) continue;
-    warnedHoles.add(cur.id);
-    console.warn(
-      `kerf: fine-grained binding ${describeHole(cur)} switched to a different signal instance on a render whose static-surrounds HTML was byte-for-byte unchanged. On that fast path kerf keeps the original binding effect and does NOT re-bind, so this hole is now stale \u2014 it still tracks the FIRST signal instance and will not reflect the new one. Bind one computed that switches internally (e.g. class={computed(() => cond.value ? sigA.value : sigB.value)}) instead of switching which signal instance you bind (see docs/2-reactivity \xA72.9). Set KERF_DEV_WARN_STALE_BINDING=0 (or unset it) to silence this warning.`
-    );
-  }
-}
-
-// src/dev-listener-warn.ts
-var LISTENER_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.devListener");
-var patched = false;
-var warned = false;
-function isOptedIn3() {
-  if (!isDevMode()) return false;
-  const proc = globalThis.process;
-  return proc?.env?.KERF_DEV_WARN_REBUILT_LISTENERS === "1";
-}
-function findAddEventListenerProto() {
-  const probe = document.createElement("div");
-  let proto = Object.getPrototypeOf(probe);
-  while (!Object.prototype.hasOwnProperty.call(proto, "addEventListener")) {
-    proto = Object.getPrototypeOf(proto);
-  }
-  return proto;
-}
-function patchAddEventListenerOnce() {
-  if (patched) return;
-  patched = true;
-  const proto = findAddEventListenerProto();
-  const orig = proto.addEventListener;
-  proto.addEventListener = function(type, listener, options) {
-    if (this instanceof Element) {
-      this[LISTENER_MARKER] = true;
-    }
-    return orig.call(this, type, listener, options);
-  };
-}
-function hasMarkedListener(el) {
-  if (el[LISTENER_MARKER] === true) return true;
-  const stack = [];
-  for (let i = 0; i < el.children.length; i++) stack.push(el.children[i]);
-  while (stack.length > 0) {
-    const cur = stack.pop();
-    if (cur[LISTENER_MARKER] === true) return true;
-    for (let i = 0; i < cur.children.length; i++) stack.push(cur.children[i]);
-  }
-  return false;
-}
-function emitWarning() {
-  if (warned) return;
-  warned = true;
-  console.warn(
-    "kerf: a node inside a mount()-managed tree was removed/rebuilt while carrying an imperative addEventListener listener. The listener is gone with the old node. Use `delegate(rootEl, 'click', '[data-action=\"...\"]', handler)` so the listener lives on a stable ancestor and survives re-renders, or wrap the host in `data-morph-skip` if the subtree is library-owned (Monaco, xterm, D3 charts). Set KERF_DEV_WARN_REBUILT_LISTENERS=0 (or unset it) to silence this warning."
-  );
-}
-function installListenerRebuildWarn(rootEl) {
-  if (!isOptedIn3()) return null;
-  patchAddEventListenerOnce();
-  const observer = new MutationObserver((mutations) => {
-    if (warned) return;
-    for (const m of mutations) {
-      for (let i = 0; i < m.removedNodes.length; i++) {
-        const removed = m.removedNodes[i];
-        if (!(removed instanceof Element)) continue;
-        if (hasMarkedListener(removed)) {
-          emitWarning();
-          return;
-        }
-      }
-    }
-  });
-  observer.observe(rootEl, { childList: true, subtree: true });
-  return observer;
-}
-
-// src/dev-rerender-warn.ts
-function isOptedIn4() {
-  const proc = globalThis.process;
-  if (proc?.env?.KERF_DEV_WARN_VALUE_ONLY_RERENDER !== "1") return false;
-  return isDevMode();
-}
-var ELEMENT_NODE2 = 1;
-var TEXT_NODE2 = 3;
-var COMMENT_NODE2 = 8;
-function _isValueOnlyDiff(a, b) {
-  const an = a.childNodes;
-  const bn = b.childNodes;
-  if (an.length !== bn.length) return false;
-  for (let i = 0; i < an.length; i++) {
-    const x = an[i];
-    const y = bn[i];
-    if (x.nodeType !== y.nodeType) return false;
-    if (x.nodeType === ELEMENT_NODE2) {
-      if (x.tagName !== y.tagName) return false;
-      if (!_isValueOnlyDiff(x, y)) return false;
-    } else if (x.nodeType === COMMENT_NODE2) {
-      if (x.data !== y.data) return false;
-    } else if (x.nodeType !== TEXT_NODE2) {
-      return false;
-    }
-  }
-  return true;
-}
-function maybeWarnValueOnlyRerender(prevHtml, nextHtml, ctx) {
-  if (ctx.warned || !isOptedIn4()) return;
-  const a = document.createElement("template");
-  const b = document.createElement("template");
-  a.innerHTML = prevHtml;
-  b.innerHTML = nextHtml;
-  if (!_isValueOnlyDiff(a.content, b.content)) return;
-  ctx.warned = true;
-  console.warn(
-    "kerf: this re-render changed only text content and attribute values \u2014 no structural change \u2014 so every changed hole could be a fine-grained binding instead. Values bind, structure re-renders: pass the signal/computed itself ({count}, class={sig}) rather than reading .value in the hole, and each change updates just that node with no render re-run (a mount whose render reads no .value never re-renders at all). See docs/2-reactivity \xA72.9. Set KERF_DEV_WARN_VALUE_ONLY_RERENDER=0 (or unset it) to silence this warning."
-  );
-}
-
 // src/list-binding.ts
 function endAnchor(binding) {
   if (binding.items.length > 0) {
-    return binding.items[binding.items.length - 1].node.nextElementSibling;
+    return binding.items[binding.items.length - 1].node.nextSibling;
   }
-  return binding.marker.nextElementSibling;
+  return binding.marker.nextSibling;
 }
 
 // src/list-reconcile-fast-paths.ts
@@ -641,8 +647,8 @@ var SQUOTE = 39;
 var AMP = 38;
 var EQ = 61;
 var SLASH = 47;
-var TEXT_NODE3 = 3;
-var ELEMENT_NODE3 = 1;
+var TEXT_NODE2 = 3;
+var ELEMENT_NODE2 = 1;
 function isWhitespace(cc) {
   return cc === 32 || cc === 9 || cc === 10 || cc === 13;
 }
@@ -667,12 +673,15 @@ function tryAttributeOnlyFastPath(liveNode, oldHtml, newHtml) {
   for (const [name, rawValue] of newTag.attrs) {
     const oldValue = oldTag.attrs.get(name);
     if (oldValue === rawValue) continue;
-    liveNode.setAttribute(name, unescapeAttrValue(rawValue));
+    const value = unescapeAttrValue(rawValue);
+    liveNode.setAttribute(name, value);
+    syncFormProp(liveNode, name, value, true);
   }
   for (const name of oldTag.attrs.keys()) {
     if (newTag.attrs.has(name)) continue;
     if (isUserAgentOwnedAttr2(liveTagUpper, name)) continue;
     liveNode.removeAttribute(name);
+    syncFormProp(liveNode, name, "", false);
   }
   return true;
 }
@@ -701,11 +710,16 @@ function tryTextContentFastPath(liveNode, oldHtml, newHtml) {
   const newTextEnd = textEnd + (newHtml.length - oldHtml.length);
   const oldText = oldHtml.slice(textStart + 1, textEnd);
   const newText = newHtml.slice(textStart + 1, newTextEnd);
+  if (oldHtml.lastIndexOf("<!--kfb", textStart) !== -1) return false;
   const textIdx = countTextNodesBefore(oldHtml, textStart + 1);
   const targetNode = nthTextNodeDescendant(liveNode, textIdx);
   if (targetNode === null) return false;
   if (targetNode.nodeValue !== oldText) return false;
   targetNode.nodeValue = newText;
+  const host = targetNode.parentNode;
+  if (host !== null && host.tagName === "TEXTAREA" && host !== document.activeElement) {
+    host.value = newText;
+  }
   return true;
 }
 function containsDataMorphSkip(html) {
@@ -745,13 +759,13 @@ function nthTextNodeDescendant(root, n) {
   function walk(node) {
     for (let c = node.firstChild; c !== null; c = c.nextSibling) {
       if (result !== null) return;
-      if (c.nodeType === TEXT_NODE3) {
+      if (c.nodeType === TEXT_NODE2) {
         if (count === n) {
           result = c;
           return;
         }
         count++;
-      } else if (c.nodeType === ELEMENT_NODE3) {
+      } else if (c.nodeType === ELEMENT_NODE2) {
         walk(c);
       }
     }
@@ -811,76 +825,6 @@ function isUserAgentOwnedAttr2(tagNameUpper, name) {
   return name === "open" && (tagNameUpper === "DETAILS" || tagNameUpper === "DIALOG");
 }
 
-// src/list-reconcile-focus.ts
-function captureFocus(liveParent) {
-  const active = document.activeElement;
-  if (active === null || active === document.body) return null;
-  if (!liveParent.contains(active)) return null;
-  const el = active;
-  let selStart = null;
-  let selEnd = null;
-  if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
-    try {
-      selStart = el.selectionStart;
-      selEnd = el.selectionEnd;
-    } catch {
-    }
-  }
-  return { el, selStart, selEnd };
-}
-function restoreFocus(snap) {
-  if (document.activeElement === snap.el) return;
-  if (!snap.el.isConnected) return;
-  snap.el.focus();
-  if (snap.selStart !== null && snap.selEnd !== null) {
-    try {
-      snap.el.setSelectionRange(snap.selStart, snap.selEnd);
-    } catch {
-    }
-  }
-}
-
-// src/utils/rowContract.ts
-var ROW_HTML_SNIPPET_MAX = 120;
-function truncateRowHtml(html) {
-  return html.length > ROW_HTML_SNIPPET_MAX ? html.slice(0, ROW_HTML_SNIPPET_MAX) + "\u2026" : html;
-}
-function parseRowTemplate(html) {
-  const tpl = document.createElement("template");
-  tpl.innerHTML = html;
-  return { tpl, count: tpl.content.children.length };
-}
-function parseSingleRow(html, index) {
-  const { tpl, count } = parseRowTemplate(html);
-  if (count !== 1) throw rowContractError(index, html);
-  return tpl.content.firstElementChild;
-}
-function collectTemplateChildren(tpl, n) {
-  const nodes = new Array(n);
-  let child = tpl.content.firstElementChild;
-  for (let k = 0; k < n; k++) {
-    nodes[k] = child;
-    child = child.nextElementSibling;
-  }
-  return nodes;
-}
-function rowContractError(index, html) {
-  const { count } = parseRowTemplate(html);
-  const reason = count === 0 ? "produced no top-level element" : `produced ${count} top-level elements; exactly one is required`;
-  return new Error(
-    `each(): row render at index ${index} ${reason}. Each item's render must return exactly one element \u2014 wrap multiple roots in a single parent (e.g. <li>...</li>). Got HTML: ${JSON.stringify(truncateRowHtml(html))}`
-  );
-}
-function maybeWarnMissingRowKey(rowEl, rowHtml, binding) {
-  if (!isDevMode()) return;
-  if (binding.warnedMissingKey === true) return;
-  binding.warnedMissingKey = true;
-  if (rowEl.id !== "" || rowEl.hasAttribute("data-key")) return;
-  console.warn(
-    `kerf each(): the first row has no \`id\` or \`data-key\` attribute. Without one, rows match positionally \u2014 an insert/remove at the head shifts every row's identity, so focused inputs jump to the wrong row, mid-edit textareas swap content with their neighbor, and any per-row state silently follows the wrong item. Add \`data-key={item.id}\` (or set \`id\`) to the top-level element returned by the row render. Row HTML: ${JSON.stringify(truncateRowHtml(rowHtml))}`
-  );
-}
-
 // src/list-reconcile-granular.ts
 function reconcileGranular(binding, patches) {
   const { liveParent } = binding;
@@ -943,12 +887,12 @@ function reconcileGranular(binding, patches) {
   }
   if (focusSnap !== null) restoreFocus(focusSnap);
   if (items.length > 0) {
-    maybeWarnMissingRowKey(items[0].node, items[0].html, binding);
+    devHooks.missingRowKey?.(items[0].node, items[0].html, binding);
   }
 }
 function applySingleInsert(liveParent, items, patch, tailAnchor) {
   const { html } = patch;
-  const newNode = parseSingleRow(html, patch.index);
+  const newNode = parseSingleRow(html, patch.index, liveParent);
   const anchor = patch.index < items.length ? items[patch.index].node : tailAnchor;
   liveParent.insertBefore(newNode, anchor);
   items.splice(patch.index, 0, {
@@ -975,7 +919,7 @@ function applySingleUpdate(liveParent, items, patch) {
     items[patch.index] = reuseBound(patch, html, oldEntry);
     return;
   }
-  const newNode = parseSingleRow(html, patch.index);
+  const newNode = parseSingleRow(html, patch.index, liveParent);
   applyParsedRowUpdate(liveParent, items, patch, html, newNode);
 }
 function applyParsedRowUpdate(liveParent, items, patch, html, newNode) {
@@ -1028,11 +972,11 @@ function applyBulkUpdate(liveParent, items, patches, start, end) {
     morphChanges.push({ patchIdx: k, html: p.html });
   }
   if (morphChanges.length === 0) return;
-  const { tpl, count } = parseRowTemplate(morphChanges.map((c) => c.html).join(""));
+  const { content, count } = parseRowTemplate(morphChanges.map((c) => c.html).join(""), liveParent);
   if (count !== morphChanges.length) {
-    throw findOffendingChange(patches, morphChanges);
+    throw findOffendingChange(patches, morphChanges, liveParent);
   }
-  const newNodes = collectTemplateChildren(tpl, morphChanges.length);
+  const newNodes = collectTemplateChildren(content, morphChanges.length);
   for (let k = 0; k < morphChanges.length; k++) {
     const c = morphChanges[k];
     const p = patches[c.patchIdx];
@@ -1045,13 +989,13 @@ function applyBulkInsert(liveParent, items, patches, start, end, tailAnchor) {
   for (let k = start; k < end; k++) {
     htmls[k - start] = patches[k].html;
   }
-  const { tpl, count } = parseRowTemplate(htmls.join(""));
+  const { content, count } = parseRowTemplate(htmls.join(""), liveParent);
   if (count !== htmls.length) {
-    throw findOffendingInsert(patches, start, htmls);
+    throw findOffendingInsert(patches, start, htmls, liveParent);
   }
-  const newNodes = collectTemplateChildren(tpl, end - start);
+  const newNodes = collectTemplateChildren(content, end - start);
   const anchor = startIdx < items.length ? items[startIdx].node : tailAnchor;
-  liveParent.insertBefore(tpl.content, anchor);
+  liveParent.insertBefore(content, anchor);
   const newEntries = new Array(end - start);
   for (let k = 0; k < newEntries.length; k++) {
     const p = patches[start + k];
@@ -1067,18 +1011,18 @@ function applyBulkInsert(liveParent, items, patches, start, end, tailAnchor) {
   }
   items.splice(startIdx, 0, ...newEntries);
 }
-function findOffendingInsert(patches, start, htmls) {
+function findOffendingInsert(patches, start, htmls, liveParent) {
   for (let i = 0; i < htmls.length; i++) {
-    if (parseRowTemplate(htmls[i]).count !== 1) {
-      return rowContractError(patches[start + i].index, htmls[i]);
+    if (parseRowTemplate(htmls[i], liveParent).count !== 1) {
+      return rowContractError(patches[start + i].index, htmls[i], liveParent);
     }
   }
   return new Error("each(): bulk-insert mismatch with no per-row offender (kerf bug).");
 }
-function findOffendingChange(patches, changes) {
+function findOffendingChange(patches, changes, liveParent) {
   for (const c of changes) {
-    if (parseRowTemplate(c.html).count !== 1) {
-      return rowContractError(patches[c.patchIdx].index, c.html);
+    if (parseRowTemplate(c.html, liveParent).count !== 1) {
+      return rowContractError(patches[c.patchIdx].index, c.html, liveParent);
     }
   }
   return new Error("each(): bulk-update mismatch with no per-row offender (kerf bug).");
@@ -1101,7 +1045,7 @@ function tryInPlaceContentUpdate(binding, listSeg) {
   }
   if (focusSnap !== null) restoreFocus(focusSnap);
   binding.items = newRecord;
-  maybeWarnMissingRowKey(newRecord[0].node, newRecord[0].html, binding);
+  devHooks.missingRowKey?.(newRecord[0].node, newRecord[0].html, binding);
   return true;
 }
 function updateRowInPlace(liveParent, old, ni, index) {
@@ -1116,7 +1060,7 @@ function updateRowInPlace(liveParent, old, ni, index) {
       bindingDisposers: kept.bindingDisposers
     };
   }
-  const newNode = parseSingleRow(ni.html, index);
+  const newNode = parseSingleRow(ni.html, index, liveParent);
   if (old.node.tagName === newNode.tagName) {
     _morphElement(old.node, newNode);
     const kept = carryOrRewireRowBindings(old.node, old.bindings, old.bindingDisposers, ni.bindings);
@@ -1148,14 +1092,14 @@ function reconcileSnapshot(binding, listSeg) {
   const { liveParent } = binding;
   const { newRecord, prevIdx, removedItems, freshIndices, freshHtmls } = classifyItems(binding.items, listSeg);
   const tailAnchor = endAnchor(binding);
-  buildFreshNodes(newRecord, freshIndices, freshHtmls);
+  buildFreshNodes(newRecord, freshIndices, freshHtmls, liveParent);
   const focusSnap = captureFocus(liveParent);
   removeOldNodes(liveParent, removedItems);
   applyMoves(liveParent, newRecord, prevIdx, lis(prevIdx), tailAnchor);
   if (focusSnap !== null) restoreFocus(focusSnap);
   binding.items = newRecord;
   if (newRecord.length > 0) {
-    maybeWarnMissingRowKey(newRecord[0].node, newRecord[0].html, binding);
+    devHooks.missingRowKey?.(newRecord[0].node, newRecord[0].html, binding);
   }
 }
 function classifyItems(oldItems, listSeg) {
@@ -1196,13 +1140,13 @@ function classifyItems(oldItems, listSeg) {
   for (const [, orphan] of oldByRef) removedItems.push(orphan[0]);
   return { newRecord, prevIdx, removedItems, freshIndices, freshHtmls };
 }
-function buildFreshNodes(newRecord, freshIndices, freshHtmls) {
+function buildFreshNodes(newRecord, freshIndices, freshHtmls, liveParent) {
   if (freshHtmls.length === 0) return;
-  const { tpl, count } = parseRowTemplate(freshHtmls.join(""));
+  const { content, count } = parseRowTemplate(freshHtmls.join(""), liveParent);
   if (count !== freshHtmls.length) {
-    throw findOffendingRow(newRecord, freshIndices, freshHtmls);
+    throw findOffendingRow(newRecord, freshIndices, freshHtmls, liveParent);
   }
-  let node = tpl.content.firstElementChild;
+  let node = content.firstElementChild;
   for (const idx of freshIndices) {
     const next = node.nextElementSibling;
     const item = newRecord[idx];
@@ -1213,10 +1157,10 @@ function buildFreshNodes(newRecord, freshIndices, freshHtmls) {
     node = next;
   }
 }
-function findOffendingRow(newRecord, freshIndices, freshHtmls) {
+function findOffendingRow(newRecord, freshIndices, freshHtmls, liveParent) {
   for (let i = 0; i < freshHtmls.length; i++) {
-    if (parseRowTemplate(freshHtmls[i]).count !== 1) {
-      return rowContractError(freshIndices[i], newRecord[freshIndices[i]].html);
+    if (parseRowTemplate(freshHtmls[i], liveParent).count !== 1) {
+      return rowContractError(freshIndices[i], newRecord[freshIndices[i]].html, liveParent);
     }
   }
   return new Error("each(): bulk-parse mismatch with no per-row offender (kerf bug).");
@@ -1325,12 +1269,17 @@ function mount(rootEl, render) {
   }
   assertNotInsideMountedTree(rootEl);
   setMounted(rootEl, true);
-  const listenerWarnObserver = installListenerRebuildWarn(rootEl);
+  const listenerWarnObserver = devHooks.listenerRebuild?.(rootEl) ?? null;
   const bindings = /* @__PURE__ */ new Map();
   const renderCtx = {
     counter: 0,
     caches: /* @__PURE__ */ new Map(),
-    bindingCounts: /* @__PURE__ */ new Map()
+    bindingCounts: /* @__PURE__ */ new Map(),
+    bindingSources: /* @__PURE__ */ new Map(),
+    keysThisRender: /* @__PURE__ */ new Set(),
+    shiftCandidates: [],
+    warnedShiftIds: /* @__PURE__ */ new Set(),
+    rebuiltLists: /* @__PURE__ */ new Set()
   };
   const bindingCtx = newBindingContext();
   let bindingDisposers = [];
@@ -1338,28 +1287,43 @@ function mount(rootEl, render) {
   let isFirst = true;
   let prevStaticHtml = "";
   const valueOnlyWarnCtx = { warned: false };
-  const disposeEffect = effect(() => {
+  const runRenderPass = () => {
     renderCtx.counter = 0;
+    renderCtx.keysThisRender.clear();
+    renderCtx.shiftCandidates.length = 0;
     bindingCtx.counter = 0;
     bindingCtx.list = [];
     _setRenderContext(renderCtx);
     _setBindingContext(bindingCtx);
-    let result;
     try {
-      result = render();
+      return render();
     } finally {
       _setRenderContext(null);
       _setBindingContext(null);
     }
-    const segment = isSafeHtml(result) ? result.__segment ?? { kind: "static", html: result.__html } : { kind: "static", html: coerceRenderResult(result) };
+  };
+  const disposeEffect = effect(() => {
+    let result = runRenderPass();
+    const countChanged = renderCtx.previousCallCount !== void 0 && renderCtx.previousCallCount !== renderCtx.counter;
+    if (countChanged) {
+      for (const id of renderCtx.shiftCandidates) {
+        if (renderCtx.warnedShiftIds.has(id)) continue;
+        renderCtx.warnedShiftIds.add(id);
+        devHooks.listIdShift?.(id);
+      }
+      _resetCallOrderListState(renderCtx);
+      result = runRenderPass();
+    }
+    let segment = resultToSegment(result);
     if (isFirst) {
       runFirstRender(rootEl, segment, bindings);
       prevStaticHtml = flattenWithoutListItems(segment);
+      devHooks.parserRepair?.(prevStaticHtml);
       bindingDisposers = wireBindings(rootEl, bindingCtx, bindingDisposers);
-      if (isOptedIn2()) prevWiredBindings = bindingCtx.list;
+      if (devHooks.staleBindingEnabled?.() === true) prevWiredBindings = bindingCtx.list;
       isFirst = false;
     } else {
-      const nextStaticHtml = runSubsequentRender(
+      let nextStaticHtml = runSubsequentRender(
         rootEl,
         segment,
         bindings,
@@ -1367,14 +1331,28 @@ function mount(rootEl, render) {
         prevStaticHtml,
         valueOnlyWarnCtx
       );
+      if (anyRebuiltListIsGranular(segment, renderCtx.rebuiltLists)) {
+        for (const id of renderCtx.rebuiltLists) renderCtx.bindingCounts.delete(id);
+        result = runRenderPass();
+        segment = resultToSegment(result);
+        nextStaticHtml = runSubsequentRender(
+          rootEl,
+          segment,
+          bindings,
+          renderCtx,
+          prevStaticHtml,
+          valueOnlyWarnCtx
+        );
+      }
       if (nextStaticHtml !== prevStaticHtml) {
         bindingDisposers = wireBindings(rootEl, bindingCtx, bindingDisposers);
-        if (isOptedIn2()) prevWiredBindings = bindingCtx.list;
+        if (devHooks.staleBindingEnabled?.() === true) prevWiredBindings = bindingCtx.list;
       } else {
-        maybeWarnStaleBinding(prevWiredBindings, bindingCtx.list);
+        devHooks.staleBinding?.(prevWiredBindings, bindingCtx.list);
       }
       prevStaticHtml = nextStaticHtml;
     }
+    const expectedCounts = devHooks.listInvariantsEnabled?.() === true ? /* @__PURE__ */ new Map() : null;
     for (const listSeg of collectLists(segment).values()) {
       const binding = bindings.get(listSeg.id);
       if (binding === void 0) {
@@ -1384,7 +1362,14 @@ function mount(rootEl, render) {
       }
       reconcileList(binding, listSeg);
       renderCtx.bindingCounts.set(listSeg.id, binding.items.length);
+      renderCtx.bindingSources.set(listSeg.id, listSeg.source);
+      expectedCounts?.set(
+        listSeg.id,
+        listSeg.patches !== void 0 && listSeg.source !== void 0 ? listSeg.source.value.length : listSeg.items.length
+      );
     }
+    renderCtx.previousCallCount = renderCtx.counter;
+    devHooks.listInvariants?.(rootEl, bindings, expectedCounts ?? void 0);
   });
   return () => {
     disposeEffect();
@@ -1402,16 +1387,17 @@ function runFirstRender(rootEl, segment, bindings) {
   bindListsFromMarkers(rootEl, segment, bindings, true);
 }
 function runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml, valueOnlyWarnCtx) {
+  renderCtx.rebuiltLists.clear();
   const currentStaticHtml = flattenWithoutListItems(segment);
   if (currentStaticHtml === prevStaticHtml) {
     return prevStaticHtml;
   }
-  maybeWarnValueOnlyRerender(prevStaticHtml, currentStaticHtml, valueOnlyWarnCtx);
+  devHooks.valueOnlyRerender?.(prevStaticHtml, currentStaticHtml, valueOnlyWarnCtx);
   cleanupOrphanBindings(segment, bindings, renderCtx);
   const template = rootEl.cloneNode(false);
   template.innerHTML = currentStaticHtml;
   morph(rootEl, template, collectOwnedItems(bindings));
-  bindListsFromMarkers(rootEl, segment, bindings, false);
+  bindListsFromMarkers(rootEl, segment, bindings, false, renderCtx.rebuiltLists);
   return currentStaticHtml;
 }
 function coerceRenderResult(result) {
@@ -1419,21 +1405,44 @@ function coerceRenderResult(result) {
   if (result === false || result === true) return "";
   return String(result);
 }
-function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems) {
+function resultToSegment(result) {
+  return isSafeHtml(result) ? result.__segment ?? { kind: "static", html: result.__html } : { kind: "static", html: coerceRenderResult(result) };
+}
+function anyRebuiltListIsGranular(segment, rebuilt) {
+  if (rebuilt.size === 0) return false;
+  const lists = collectLists(segment);
+  for (const id of rebuilt) {
+    if (lists.get(id)?.patches !== void 0) return true;
+  }
+  return false;
+}
+function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems, rebuiltLists) {
   const lists = collectLists(segment);
   const found = [];
   collectComments(rootEl, found);
   for (const marker of found) {
     if (!marker.data.startsWith(LIST_MARKER_PREFIX)) continue;
     const id = marker.data.slice(LIST_MARKER_PREFIX.length);
-    if (bindings.has(id)) continue;
+    const existing = bindings.get(id);
+    if (existing !== void 0) {
+      if (existing.marker === marker && rootEl.contains(existing.marker)) continue;
+      for (const item of existing.items) {
+        disposeRowBindings(item.bindingDisposers);
+        if (rootEl.contains(item.node)) {
+          item.node.parentElement?.removeChild(item.node);
+        }
+      }
+      bindings.delete(id);
+      rebuiltLists?.add(id);
+      devHooks.listRebind?.(id, marker.parentElement);
+    }
     const listSeg = lists.get(id);
     const liveParent = marker.parentElement;
     const items = [];
     if (inlinedItems) {
       let next = marker.nextElementSibling;
       for (let i = 0; i < listSeg.items.length && next !== null; i++) {
-        validateInlinedRowMatch(listSeg.items[i].html, i, next);
+        validateInlinedRowMatch(listSeg.items[i].html, i, next, liveParent);
         const rowBindings = listSeg.items[i].bindings;
         const bound = {
           ref: listSeg.items[i].ref,
@@ -1451,17 +1460,25 @@ function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems) {
     }
     const binding = { liveParent, items, marker };
     if (items.length > 0) {
-      maybeWarnMissingRowKey(items[0].node, items[0].html, binding);
+      devHooks.missingRowKey?.(items[0].node, items[0].html, binding);
     }
-    maybeWarnEachInMorphSkip(id, liveParent, rootEl);
+    devHooks.eachInMorphSkip?.(id, liveParent, rootEl);
     bindings.set(id, binding);
   }
 }
-function validateInlinedRowMatch(expectedHtml, index, boundEl) {
+function validateInlinedRowMatch(expectedHtml, index, boundEl, liveParent) {
   if (boundEl.outerHTML === expectedHtml) return;
-  const { count } = parseRowTemplate(expectedHtml);
-  if (count === 1) return;
-  throw rowContractError(index, expectedHtml);
+  const { content, count } = parseRowTemplate(expectedHtml, liveParent);
+  if (count !== 1) throw rowContractError(index, expectedHtml, liveParent);
+  const expectedTag = content.firstElementChild.tagName;
+  if (boundEl.tagName !== expectedTag) throw rowStructureError(index, boundEl.tagName, expectedTag);
+}
+function rowStructureError(index, gotTag, wantTag) {
+  const got = gotTag.toLowerCase();
+  const want = wantTag.toLowerCase();
+  return new Error(
+    `each(): row ${index} renders <${want}>, but the HTML parser wrapped the rows in <${got}> \u2014 so kerf cannot bind one row per element. This happens when an each() of <${want}> sits directly inside a table: the parser inserts <${got}> around the whole run. Put the each() inside an explicit <${got}> (e.g. <table><${got}>{each(...)}</${got}></table>) so the rows are the direct children kerf binds.`
+  );
 }
 function collectOwnedItems(bindings) {
   const owned = /* @__PURE__ */ new Set();
@@ -1485,6 +1502,7 @@ function cleanupOrphanBindings(segment, bindings, renderCtx) {
     }
     bindings.delete(id);
     renderCtx.bindingCounts.delete(id);
+    renderCtx.bindingSources.delete(id);
     renderCtx.caches.delete(id);
   }
 }