kerfjs 1.0.1 → 2.0.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { captureRowBindings, isSafeHtml, listSafeHtml, newBindingContext, _setBindingContext, flattenWithoutListItems, wireBindings, collectLists, disposeRowBindings, flatten, wireRowBindings, granularListSafeHtml } from './chunk-QNYOMGI4.js';
-export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-QNYOMGI4.js';
-export { defineStore, resetAllStores } from './chunk-7SKIIA5P.js';
-import { warnIfInsideEffect, effect } from './chunk-4E26PO2C.js';
-export { batch, computed, effect, signal } from './chunk-4E26PO2C.js';
+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';
 
 // src/attrSelector.ts
 function cssEscapeIdent(value) {
@@ -94,33 +94,30 @@ function assertValidSelector(selector, fn) {
     );
   }
 }
-function delegate(rootEl, type, selector, handler) {
-  assertValidSelector(selector, "delegate");
-  warnIfInsideEffect("delegate");
-  const listener = (event) => {
+function makeListener(rootEl, selector, handler, match) {
+  return (event) => {
     const target = event.target;
     if (!(target instanceof Element)) return;
-    const matched = target.closest(selector);
+    const matched = match === "direct" ? target.matches(selector) ? target : null : target.closest(selector);
     if (matched !== null && rootEl.contains(matched)) {
       handler(event, matched);
     }
   };
+}
+function delegate(rootEl, type, selector, handler, options) {
+  assertValidSelector(selector, "delegate");
+  warnIfInsideEffect("delegate");
+  const listener = makeListener(rootEl, selector, handler, options?.match ?? "closest");
   const capture = NON_BUBBLING.has(type);
   rootEl.addEventListener(type, listener, capture);
   return () => {
     rootEl.removeEventListener(type, listener, capture);
   };
 }
-function delegateCapture(rootEl, type, selector, handler) {
+function delegateCapture(rootEl, type, selector, handler, options) {
   assertValidSelector(selector, "delegateCapture");
   warnIfInsideEffect("delegateCapture");
-  const listener = (event) => {
-    const target = event.target;
-    if (!(target instanceof Element)) return;
-    if (target.matches(selector) && rootEl.contains(target)) {
-      handler(event, target);
-    }
-  };
+  const listener = makeListener(rootEl, selector, handler, options?.match ?? "closest");
   rootEl.addEventListener(type, listener, true);
   return () => {
     rootEl.removeEventListener(type, listener, true);
@@ -130,8 +127,8 @@ function delegateCapture(rootEl, type, selector, handler) {
 // src/dev-each-warn.ts
 var warnedIds = /* @__PURE__ */ new Set();
 function isOptedIn() {
+  if (!isDevMode()) return false;
   const proc = globalThis.process;
-  if (proc?.env?.NODE_ENV === "production") return false;
   return proc?.env?.KERF_DEV_WARN_EACH_IN_MORPH_SKIP === "1";
 }
 function hasMorphSkipAncestor(el, root) {
@@ -153,8 +150,8 @@ function maybeWarnEachInMorphSkip(id, liveParent, rootEl) {
 }
 var warnedDupIds = /* @__PURE__ */ new Set();
 function isOptedInDupKeys() {
+  if (!isDevMode()) return false;
   const proc = globalThis.process;
-  if (proc?.env?.NODE_ENV === "production") return false;
   return proc?.env?.KERF_DEV_WARN_DUPLICATE_EACH_KEYS === "1";
 }
 function maybeWarnDuplicateCacheKeys(id, segItems) {
@@ -173,6 +170,28 @@ function maybeWarnDuplicateCacheKeys(id, segItems) {
   }
 }
 
+// src/list-render-state.ts
+function deriveListRenderState(bindingCount) {
+  if (bindingCount === void 0) return "unbound";
+  return bindingCount === 0 ? "empty" : "bound";
+}
+function decideListPath(state, patches, snapshotLength, previousBindingCount) {
+  if (state === "unbound") return { path: "snapshot", reason: "first-render" };
+  if (state === "empty") return { path: "snapshot", reason: "empty-binding" };
+  if (patches.length === 0) return { path: "snapshot", reason: "no-patches" };
+  let netDelta = 0;
+  for (const p of patches) {
+    if (p.type === "insert") netDelta += 1;
+    else if (p.type === "remove") netDelta -= 1;
+    else if (p.type === "replace") return { path: "snapshot", reason: "replace" };
+  }
+  const count = previousBindingCount ?? 0;
+  if (count + netDelta !== snapshotLength) {
+    return { path: "snapshot", reason: "count-drift" };
+  }
+  return { path: "granular" };
+}
+
 // src/each.ts
 var ARRAY_SIGNAL_BRAND = /* @__PURE__ */ Symbol.for("kerfjs.ArraySignal");
 function isArraySignal(value) {
@@ -204,18 +223,13 @@ function eachGranular(sig, render, cacheKey) {
   const previousBindingCount = ctx.bindingCounts.get(id);
   const patches = sig._consumePatches();
   const snapshot = sig.value;
-  if (previousBindingCount === void 0 || previousBindingCount === 0 || patches.length === 0) {
-    return eachSnapshotById(snapshot, render, cacheKey, id);
-  }
-  let netDelta = 0;
-  for (const p of patches) {
-    if (p.type === "insert") netDelta += 1;
-    else if (p.type === "remove") netDelta -= 1;
-    else if (p.type === "replace") {
-      return eachSnapshotById(snapshot, render, cacheKey, id);
-    }
-  }
-  if (previousBindingCount + netDelta !== snapshot.length) {
+  const decision = decideListPath(
+    deriveListRenderState(previousBindingCount),
+    patches,
+    snapshot.length,
+    previousBindingCount
+  );
+  if (decision.path === "snapshot") {
     return eachSnapshotById(snapshot, render, cacheKey, id);
   }
   if (cacheKey !== void 0) {
@@ -322,6 +336,11 @@ function getNodeKey(node) {
 }
 var EMPTY_OWNED = /* @__PURE__ */ new Set();
 function morph(liveRoot, template, ownedItems = EMPTY_OWNED) {
+  if (liveRoot == null) {
+    throw new Error(
+      'morph: liveRoot is null/undefined \u2014 pass the live element, e.g. morph(document.getElementById("app")!, template). A common cause is a typo in the id or selector that returns null at runtime even though the TypeScript types say Element.'
+    );
+  }
   const templateEl = isElementNode(template) ? template : parseTemplate(liveRoot, template);
   morphChildren(liveRoot, templateEl, ownedItems);
 }
@@ -415,7 +434,11 @@ function morphElement(fromEl, toEl, ownedItems) {
   }
   morphAttributes(fromEl, toEl);
   if (fromEl.dataset.morphSkipChildren !== void 0) return;
+  const syncTextareaValue = fromEl.tagName === "TEXTAREA" && fromEl !== document.activeElement && fromEl.textContent !== toEl.textContent;
   morphChildren(fromEl, toEl, ownedItems);
+  if (syncTextareaValue) {
+    fromEl.value = toEl.textContent;
+  }
 }
 function isUserAgentOwnedAttr(tagName, name) {
   return name === "open" && (tagName === "DETAILS" || tagName === "DIALOG");
@@ -433,6 +456,7 @@ function morphAttributes(fromEl, toEl) {
       }
     } else if (fromEl.getAttribute(name) !== value) {
       fromEl.setAttribute(name, value);
+      syncFormProp(fromEl, name, value, true);
     }
   }
   const fromAttrs = fromEl.attributes;
@@ -445,6 +469,7 @@ function morphAttributes(fromEl, toEl) {
       if (!toEl.hasAttributeNS(ns, name)) fromEl.removeAttributeNS(ns, name);
     } else if (!toEl.hasAttribute(name) && !isUserAgentOwnedAttr(fromTag, name)) {
       fromEl.removeAttribute(name);
+      syncFormProp(fromEl, name, "", false);
     }
   }
 }
@@ -468,13 +493,37 @@ 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 isOptedIn2() {
+function isOptedIn3() {
+  if (!isDevMode()) return false;
   const proc = globalThis.process;
-  if (proc?.env?.NODE_ENV === "production") return false;
   return proc?.env?.KERF_DEV_WARN_REBUILT_LISTENERS === "1";
 }
 function findAddEventListenerProto() {
@@ -516,7 +565,7 @@ function emitWarning() {
   );
 }
 function installListenerRebuildWarn(rootEl) {
-  if (!isOptedIn2()) return null;
+  if (!isOptedIn3()) return null;
   patchAddEventListenerOnce();
   const observer = new MutationObserver((mutations) => {
     if (warned) return;
@@ -535,6 +584,47 @@ function installListenerRebuildWarn(rootEl) {
   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) {
@@ -551,8 +641,8 @@ var SQUOTE = 39;
 var AMP = 38;
 var EQ = 61;
 var SLASH = 47;
-var TEXT_NODE2 = 3;
-var ELEMENT_NODE2 = 1;
+var TEXT_NODE3 = 3;
+var ELEMENT_NODE3 = 1;
 function isWhitespace(cc) {
   return cc === 32 || cc === 9 || cc === 10 || cc === 13;
 }
@@ -655,13 +745,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_NODE2) {
+      if (c.nodeType === TEXT_NODE3) {
         if (count === n) {
           result = c;
           return;
         }
         count++;
-      } else if (c.nodeType === ELEMENT_NODE2) {
+      } else if (c.nodeType === ELEMENT_NODE3) {
         walk(c);
       }
     }
@@ -760,6 +850,20 @@ function parseRowTemplate(html) {
   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`;
@@ -767,17 +871,13 @@ function rowContractError(index, html) {
     `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 isDevMode() {
-  const proc = globalThis.process;
-  return proc?.env?.NODE_ENV !== "production";
-}
-function maybeWarnMissingRowKey(rowEl, rowIndex, rowHtml, binding) {
+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(): row at index ${rowIndex} 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))}`
+    `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))}`
   );
 }
 
@@ -843,12 +943,12 @@ function reconcileGranular(binding, patches) {
   }
   if (focusSnap !== null) restoreFocus(focusSnap);
   if (items.length > 0) {
-    maybeWarnMissingRowKey(items[0].node, 0, items[0].html, binding);
+    maybeWarnMissingRowKey(items[0].node, items[0].html, binding);
   }
 }
 function applySingleInsert(liveParent, items, patch, tailAnchor) {
   const { html } = patch;
-  const newNode = parseSingleRow(html);
+  const newNode = parseSingleRow(html, patch.index);
   const anchor = patch.index < items.length ? items[patch.index].node : tailAnchor;
   liveParent.insertBefore(newNode, anchor);
   items.splice(patch.index, 0, {
@@ -867,12 +967,19 @@ function wireRowIfBound(node, bindings) {
 function applySingleUpdate(liveParent, items, patch) {
   const { html } = patch;
   const oldEntry = items[patch.index];
-  if (html === oldEntry.html) return;
+  if (html === oldEntry.html) {
+    items[patch.index] = reuseBound(patch, html, oldEntry);
+    return;
+  }
   if (tryAttributeOnlyFastPath(oldEntry.node, oldEntry.html, html) || tryTextContentFastPath(oldEntry.node, oldEntry.html, html)) {
     items[patch.index] = reuseBound(patch, html, oldEntry);
     return;
   }
-  const newNode = parseSingleRow(html);
+  const newNode = parseSingleRow(html, patch.index);
+  applyParsedRowUpdate(liveParent, items, patch, html, newNode);
+}
+function applyParsedRowUpdate(liveParent, items, patch, html, newNode) {
+  const oldEntry = items[patch.index];
   if (oldEntry.node.tagName === newNode.tagName) {
     _morphElement(oldEntry.node, newNode);
     items[patch.index] = reuseBound(patch, html, oldEntry);
@@ -890,13 +997,19 @@ function applySingleUpdate(liveParent, items, patch) {
   }
 }
 function reuseBound(patch, html, oldEntry) {
+  const kept = carryOrRewireRowBindings(
+    oldEntry.node,
+    oldEntry.bindings,
+    oldEntry.bindingDisposers,
+    patch.bindings
+  );
   return {
     ref: patch.item,
     cacheKey: void 0,
     html,
     node: oldEntry.node,
-    bindings: oldEntry.bindings,
-    bindingDisposers: oldEntry.bindingDisposers
+    bindings: kept.bindings,
+    bindingDisposers: kept.bindingDisposers
   };
 }
 function applyBulkUpdate(liveParent, items, patches, start, end) {
@@ -904,7 +1017,10 @@ function applyBulkUpdate(liveParent, items, patches, start, end) {
   for (let k = start; k < end; k++) {
     const p = patches[k];
     const oldEntry = items[p.index];
-    if (p.html === oldEntry.html) continue;
+    if (p.html === oldEntry.html) {
+      items[p.index] = reuseBound(p, p.html, oldEntry);
+      continue;
+    }
     if (tryAttributeOnlyFastPath(oldEntry.node, oldEntry.html, p.html) || tryTextContentFastPath(oldEntry.node, oldEntry.html, p.html)) {
       items[p.index] = reuseBound(p, p.html, oldEntry);
       continue;
@@ -916,50 +1032,24 @@ function applyBulkUpdate(liveParent, items, patches, start, end) {
   if (count !== morphChanges.length) {
     throw findOffendingChange(patches, morphChanges);
   }
-  const newNodes = new Array(morphChanges.length);
-  let child = tpl.content.firstElementChild;
-  for (let k = 0; k < newNodes.length; k++) {
-    newNodes[k] = child;
-    child = child.nextElementSibling;
-  }
+  const newNodes = collectTemplateChildren(tpl, morphChanges.length);
   for (let k = 0; k < morphChanges.length; k++) {
     const c = morphChanges[k];
     const p = patches[c.patchIdx];
-    const oldEntry = items[p.index];
-    if (oldEntry.node.tagName === newNodes[k].tagName) {
-      _morphElement(oldEntry.node, newNodes[k]);
-      items[p.index] = reuseBound(p, c.html, oldEntry);
-    } else {
-      disposeRowBindings(oldEntry.bindingDisposers);
-      liveParent.replaceChild(newNodes[k], oldEntry.node);
-      items[p.index] = {
-        ref: p.item,
-        cacheKey: void 0,
-        html: c.html,
-        node: newNodes[k],
-        bindings: p.bindings,
-        bindingDisposers: wireRowIfBound(newNodes[k], p.bindings)
-      };
-    }
+    applyParsedRowUpdate(liveParent, items, p, c.html, newNodes[k]);
   }
 }
 function applyBulkInsert(liveParent, items, patches, start, end, tailAnchor) {
   const startIdx = patches[start].index;
   const htmls = new Array(end - start);
   for (let k = start; k < end; k++) {
-    const p = patches[k];
-    htmls[k - start] = p.html;
+    htmls[k - start] = patches[k].html;
   }
   const { tpl, count } = parseRowTemplate(htmls.join(""));
   if (count !== htmls.length) {
     throw findOffendingInsert(patches, start, htmls);
   }
-  const newNodes = new Array(end - start);
-  let child = tpl.content.firstElementChild;
-  for (let k = 0; k < newNodes.length; k++) {
-    newNodes[k] = child;
-    child = child.nextElementSibling;
-  }
+  const newNodes = collectTemplateChildren(tpl, end - start);
   const anchor = startIdx < items.length ? items[startIdx].node : tailAnchor;
   liveParent.insertBefore(tpl.content, anchor);
   const newEntries = new Array(end - start);
@@ -977,21 +1067,10 @@ function applyBulkInsert(liveParent, items, patches, start, end, tailAnchor) {
   }
   items.splice(startIdx, 0, ...newEntries);
 }
-function parseSingleRow(html) {
-  const { tpl, count } = parseRowTemplate(html);
-  if (count !== 1) {
-    const reason = count === 0 ? "produced no top-level element" : `produced ${count} top-level elements; exactly one is required`;
-    throw new Error(
-      `each() granular reconcile: row render ${reason}. Each item's render must return exactly one element. Got HTML: ${JSON.stringify(truncateRowHtml(html))}`
-    );
-  }
-  return tpl.content.firstElementChild;
-}
 function findOffendingInsert(patches, start, htmls) {
   for (let i = 0; i < htmls.length; i++) {
     if (parseRowTemplate(htmls[i]).count !== 1) {
-      const p = patches[start + i];
-      return rowContractError(p.index, htmls[i]);
+      return rowContractError(patches[start + i].index, htmls[i]);
     }
   }
   return new Error("each(): bulk-insert mismatch with no per-row offender (kerf bug).");
@@ -999,8 +1078,7 @@ function findOffendingInsert(patches, start, htmls) {
 function findOffendingChange(patches, changes) {
   for (const c of changes) {
     if (parseRowTemplate(c.html).count !== 1) {
-      const p = patches[c.patchIdx];
-      return rowContractError(p.index, c.html);
+      return rowContractError(patches[c.patchIdx].index, c.html);
     }
   }
   return new Error("each(): bulk-update mismatch with no per-row offender (kerf bug).");
@@ -1023,40 +1101,45 @@ function tryInPlaceContentUpdate(binding, listSeg) {
   }
   if (focusSnap !== null) restoreFocus(focusSnap);
   binding.items = newRecord;
-  maybeWarnMissingRowKey(newRecord[0].node, 0, newRecord[0].html, binding);
+  maybeWarnMissingRowKey(newRecord[0].node, newRecord[0].html, binding);
   return true;
 }
 function updateRowInPlace(liveParent, old, ni, index) {
   if (old.html === ni.html || tryAttributeOnlyFastPath(old.node, old.html, ni.html) || tryTextContentFastPath(old.node, old.html, ni.html)) {
+    const kept = carryOrRewireRowBindings(old.node, old.bindings, old.bindingDisposers, ni.bindings);
     return {
       ref: ni.ref,
       cacheKey: ni.cacheKey,
       html: ni.html,
       node: old.node,
-      bindings: old.bindings,
-      bindingDisposers: old.bindingDisposers
+      bindings: kept.bindings,
+      bindingDisposers: kept.bindingDisposers
     };
   }
-  const newNode = parseSingleRow2(ni.html, index);
+  const newNode = parseSingleRow(ni.html, index);
   if (old.node.tagName === newNode.tagName) {
     _morphElement(old.node, newNode);
+    const kept = carryOrRewireRowBindings(old.node, old.bindings, old.bindingDisposers, ni.bindings);
     return {
       ref: ni.ref,
       cacheKey: ni.cacheKey,
       html: ni.html,
       node: old.node,
-      bindings: old.bindings,
-      bindingDisposers: old.bindingDisposers
+      bindings: kept.bindings,
+      bindingDisposers: kept.bindingDisposers
     };
   }
   disposeRowBindings(old.bindingDisposers);
   liveParent.replaceChild(newNode, old.node);
-  return { ref: ni.ref, cacheKey: ni.cacheKey, html: ni.html, node: newNode };
-}
-function parseSingleRow2(html, index) {
-  const { tpl, count } = parseRowTemplate(html);
-  if (count !== 1) throw rowContractError(index, html);
-  return tpl.content.firstElementChild;
+  const fresh = carryOrRewireRowBindings(newNode, void 0, void 0, ni.bindings);
+  return {
+    ref: ni.ref,
+    cacheKey: ni.cacheKey,
+    html: ni.html,
+    node: newNode,
+    bindings: fresh.bindings,
+    bindingDisposers: fresh.bindingDisposers
+  };
 }
 
 // src/list-reconcile-snapshot.ts
@@ -1072,7 +1155,7 @@ function reconcileSnapshot(binding, listSeg) {
   if (focusSnap !== null) restoreFocus(focusSnap);
   binding.items = newRecord;
   if (newRecord.length > 0) {
-    maybeWarnMissingRowKey(newRecord[0].node, 0, newRecord[0].html, binding);
+    maybeWarnMissingRowKey(newRecord[0].node, newRecord[0].html, binding);
   }
 }
 function classifyItems(oldItems, listSeg) {
@@ -1098,6 +1181,8 @@ function classifyItems(oldItems, listSeg) {
       removedItems.push(oi[0]);
     }
     newRecord[i] = {
+      // `node` placeholder is filled by `buildFreshNodes`; its parse-count
+      // check guarantees every fresh index gets a real element before use.
       ref: ni.ref,
       cacheKey: ni.cacheKey,
       html: ni.html,
@@ -1192,37 +1277,39 @@ function reconcileList(binding, listSeg) {
 }
 
 // src/mount.ts
-var LIST_MARKER_PREFIX = "kf-list:";
 var MOUNTED_MARKER = /* @__PURE__ */ Symbol.for("kerfjs.mounted");
+var NESTED_MOUNT_MSG = "mount: rootEl is already inside (or contains) a mounted tree. kerf supports one mount per tree \u2014 compose with plain functions that return JSX instead of nesting mounts.";
+function isMounted(el) {
+  return el[MOUNTED_MARKER] === true;
+}
+function setMounted(el, on) {
+  if (on) {
+    el[MOUNTED_MARKER] = true;
+  } else {
+    delete el[MOUNTED_MARKER];
+  }
+}
 function describeEl(el) {
   const tag = el.tagName.toLowerCase();
   const id = el.id ? `#${el.id}` : "";
   return `<${tag}${id}>`;
 }
 function assertNotInsideMountedTree(rootEl) {
-  if (rootEl[MOUNTED_MARKER] === true) {
+  if (isMounted(rootEl)) {
     throw new Error(
       `mount: ${describeEl(rootEl)} is already mounted. Call the disposer returned by the first mount() before mounting again. kerf supports one mount per element \u2014 compose with plain functions that return JSX instead of nesting mounts.`
     );
   }
   let ancestor = rootEl.parentElement;
   while (ancestor !== null) {
-    if (ancestor[MOUNTED_MARKER] === true) {
-      throw new Error(
-        "mount: rootEl is already inside (or contains) a mounted tree. kerf supports one mount per tree \u2014 compose with plain functions that return JSX instead of nesting mounts."
-      );
-    }
+    if (isMounted(ancestor)) throw new Error(NESTED_MOUNT_MSG);
     ancestor = ancestor.parentElement;
   }
   const stack = [];
   for (let i = 0; i < rootEl.children.length; i++) stack.push(rootEl.children[i]);
   while (stack.length > 0) {
     const cur = stack.pop();
-    if (cur[MOUNTED_MARKER] === true) {
-      throw new Error(
-        "mount: rootEl is already inside (or contains) a mounted tree. kerf supports one mount per tree \u2014 compose with plain functions that return JSX instead of nesting mounts."
-      );
-    }
+    if (isMounted(cur)) throw new Error(NESTED_MOUNT_MSG);
     for (let i = 0; i < cur.children.length; i++) stack.push(cur.children[i]);
   }
 }
@@ -1237,7 +1324,7 @@ function mount(rootEl, render) {
     if (owner.defaultView === null) document.adoptNode(rootEl);
   }
   assertNotInsideMountedTree(rootEl);
-  rootEl[MOUNTED_MARKER] = true;
+  setMounted(rootEl, true);
   const listenerWarnObserver = installListenerRebuildWarn(rootEl);
   const bindings = /* @__PURE__ */ new Map();
   const renderCtx = {
@@ -1247,8 +1334,10 @@ function mount(rootEl, render) {
   };
   const bindingCtx = newBindingContext();
   let bindingDisposers = [];
+  let prevWiredBindings = [];
   let isFirst = true;
   let prevStaticHtml = "";
+  const valueOnlyWarnCtx = { warned: false };
   const disposeEffect = effect(() => {
     renderCtx.counter = 0;
     bindingCtx.counter = 0;
@@ -1267,16 +1356,32 @@ function mount(rootEl, render) {
       runFirstRender(rootEl, segment, bindings);
       prevStaticHtml = flattenWithoutListItems(segment);
       bindingDisposers = wireBindings(rootEl, bindingCtx, bindingDisposers);
+      if (isOptedIn2()) prevWiredBindings = bindingCtx.list;
       isFirst = false;
     } else {
-      const nextStaticHtml = runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml);
+      const nextStaticHtml = runSubsequentRender(
+        rootEl,
+        segment,
+        bindings,
+        renderCtx,
+        prevStaticHtml,
+        valueOnlyWarnCtx
+      );
       if (nextStaticHtml !== prevStaticHtml) {
         bindingDisposers = wireBindings(rootEl, bindingCtx, bindingDisposers);
+        if (isOptedIn2()) prevWiredBindings = bindingCtx.list;
+      } else {
+        maybeWarnStaleBinding(prevWiredBindings, bindingCtx.list);
       }
       prevStaticHtml = nextStaticHtml;
     }
     for (const listSeg of collectLists(segment).values()) {
       const binding = bindings.get(listSeg.id);
+      if (binding === void 0) {
+        throw new Error(
+          "mount: an each() list appeared in the render output but its marker never reached the live DOM. The most common cause is an each() introduced inside a data-morph-skip subtree on a re-render \u2014 the morph leaves that subtree untouched, so the list can never bind. Move the each() outside the skipped subtree, or remove data-morph-skip from its ancestor."
+        );
+      }
       reconcileList(binding, listSeg);
       renderCtx.bindingCounts.set(listSeg.id, binding.items.length);
     }
@@ -1289,18 +1394,19 @@ function mount(rootEl, render) {
       for (const item of b.items) disposeRowBindings(item.bindingDisposers);
     }
     listenerWarnObserver?.disconnect();
-    delete rootEl[MOUNTED_MARKER];
+    setMounted(rootEl, false);
   };
 }
 function runFirstRender(rootEl, segment, bindings) {
   rootEl.innerHTML = flatten(segment, true);
   bindListsFromMarkers(rootEl, segment, bindings, true);
 }
-function runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml) {
+function runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml, valueOnlyWarnCtx) {
   const currentStaticHtml = flattenWithoutListItems(segment);
   if (currentStaticHtml === prevStaticHtml) {
     return prevStaticHtml;
   }
+  maybeWarnValueOnlyRerender(prevStaticHtml, currentStaticHtml, valueOnlyWarnCtx);
   cleanupOrphanBindings(segment, bindings, renderCtx);
   const template = rootEl.cloneNode(false);
   template.innerHTML = currentStaticHtml;
@@ -1345,7 +1451,7 @@ function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems) {
     }
     const binding = { liveParent, items, marker };
     if (items.length > 0) {
-      maybeWarnMissingRowKey(items[0].node, 0, items[0].html, binding);
+      maybeWarnMissingRowKey(items[0].node, items[0].html, binding);
     }
     maybeWarnEachInMorphSkip(id, liveParent, rootEl);
     bindings.set(id, binding);