kerfjs 0.3.1 → 0.5.0

package/dist/index.js

@@ -1,9 +1,19 @@
-import { isSafeHtml, listSafeHtml, flatten, collectLists, flattenWithoutListItems } from './chunk-WK5D3OO7.js';
-export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-WK5D3OO7.js';
-import { effect } from './chunk-IZJIKRCE.js';
-export { batch, computed, defineStore, effect, resetAllStores, signal } from './chunk-IZJIKRCE.js';
+import { isSafeHtml, listSafeHtml, flattenWithoutListItems, collectLists, flatten, granularListSafeHtml } from './chunk-WYJTMERY.js';
+export { Fragment, SafeHtml, isSafeHtml, raw } from './chunk-WYJTMERY.js';
+export { defineStore, resetAllStores } from './chunk-GQGJFCWL.js';
+import { effect } from './chunk-FN2ID4QO.js';
+export { batch, computed, effect, signal } from './chunk-FN2ID4QO.js';
 
 // src/delegate.ts
+var NON_BUBBLING = /* @__PURE__ */ new Set([
+  "focus",
+  "blur",
+  "scroll",
+  "load",
+  "error",
+  "mouseenter",
+  "mouseleave"
+]);
 function assertValidSelector(selector, fn) {
   try {
     document.createElement("div").matches(selector);
@@ -23,9 +33,10 @@ function delegate(rootEl, type, selector, handler) {
       handler(event, matched);
     }
   };
-  rootEl.addEventListener(type, listener);
+  const capture = NON_BUBBLING.has(type);
+  rootEl.addEventListener(type, listener, capture);
   return () => {
-    rootEl.removeEventListener(type, listener);
+    rootEl.removeEventListener(type, listener, capture);
   };
 }
 function delegateCapture(rootEl, type, selector, handler) {
@@ -44,25 +55,109 @@ function delegateCapture(rootEl, type, selector, handler) {
 }
 
 // src/each.ts
-var ROW_CACHE = /* @__PURE__ */ new WeakMap();
-var listCounter = null;
-function _setListCounter(c) {
-  listCounter = c;
+var ARRAY_SIGNAL_BRAND = /* @__PURE__ */ Symbol.for("kerfjs.ArraySignal");
+function isArraySignal(value) {
+  return typeof value === "object" && value !== null && value[ARRAY_SIGNAL_BRAND] === true;
+}
+var context = null;
+function _setRenderContext(c) {
+  context = c;
 }
 function each(items, render, key) {
-  const id = listCounter !== null ? String(listCounter.value++) : "orphan";
+  if (isArraySignal(items) && context !== null) {
+    return eachGranular(items, render, key);
+  }
+  const snapshotItems = isArraySignal(items) ? items.value : items;
+  return eachSnapshot(snapshotItems, render, key);
+}
+function eachSnapshot(items, render, key) {
+  let id;
+  if (context !== null) {
+    id = String(context.counter++);
+  } else {
+    id = "orphan";
+  }
+  return eachSnapshotById(items, render, key, id);
+}
+function eachGranular(sig, render, key) {
+  const ctx = context;
+  const id = String(ctx.counter++);
+  const previousBindingCount = ctx.bindingCounts.get(id);
+  const patches = sig._consumePatches();
+  const snapshot = sig.value;
+  if (previousBindingCount === void 0 || patches.length === 0) {
+    return eachSnapshotById(snapshot, render, key, 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, key, id);
+    }
+  }
+  if (previousBindingCount + netDelta !== snapshot.length) {
+    return eachSnapshotById(snapshot, render, key, id);
+  }
+  const renderFnInternal = (item, index) => {
+    const out = render(item, index);
+    return isSafeHtml(out) ? out.toString() : out;
+  };
+  const internalPatches = new Array(patches.length);
+  try {
+    for (let i = 0; i < patches.length; i++) {
+      const p = patches[i];
+      if (p.type === "insert" || p.type === "update") {
+        internalPatches[i] = {
+          type: p.type,
+          index: p.index,
+          item: p.item,
+          html: renderFnInternal(p.item, p.index)
+        };
+      } else {
+        internalPatches[i] = p;
+      }
+    }
+  } catch {
+    ctx.bindingCounts.delete(id);
+    return eachSnapshotById(snapshot, render, key, id);
+  }
+  return granularListSafeHtml(id, [], internalPatches);
+}
+function eachSnapshotById(items, render, key, id) {
+  let cache = null;
+  if (context !== null) {
+    let c = context.caches.get(id);
+    if (c === void 0) {
+      c = /* @__PURE__ */ new WeakMap();
+      context.caches.set(id, c);
+    }
+    cache = c;
+  }
   const segItems = new Array(items.length);
+  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 })).`
+      );
+    }
+    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()).`
+      );
+    }
+    seen.add(item);
     const k = key ? key(item, i) : void 0;
-    const cached = ROW_CACHE.get(item);
     let html;
+    const cached = cache !== null ? cache.get(item) : void 0;
     if (cached !== void 0 && cached.key === k) {
       html = cached.html;
     } else {
       const out = render(item, i);
       html = isSafeHtml(out) ? out.toString() : out;
-      ROW_CACHE.set(item, { key: k, html });
+      if (cache !== null) cache.set(item, { key: k, html });
     }
     segItems[i] = { ref: item, cacheKey: k, html };
   }
@@ -84,16 +179,23 @@ function getNodeKey(node) {
   }
   return void 0;
 }
-function diff(liveRoot, templateRoot, listParents) {
-  diffChildren(liveRoot, templateRoot, listParents);
+function diff(liveRoot, templateRoot, ownedItems) {
+  diffChildren(liveRoot, templateRoot, ownedItems);
 }
-function diffChildren(fromParent, toParent, listParents) {
+function skipOwned(node, ownedItems) {
+  while (node !== null && node.nodeType === ELEMENT_NODE && ownedItems.has(node)) {
+    node = node.nextSibling;
+  }
+  return node;
+}
+function diffChildren(fromParent, toParent, ownedItems) {
   const keyed = /* @__PURE__ */ new Map();
   for (let c = fromParent.firstChild; c !== null; c = c.nextSibling) {
+    if (c.nodeType === ELEMENT_NODE && ownedItems.has(c)) continue;
     const k = getNodeKey(c);
     if (k !== void 0) keyed.set(k, c);
   }
-  let fromChild = fromParent.firstChild;
+  let fromChild = skipOwned(fromParent.firstChild, ownedItems);
   let toChild = toParent.firstChild;
   while (toChild !== null) {
     const toNext = toChild.nextSibling;
@@ -105,15 +207,15 @@ function diffChildren(fromParent, toParent, listParents) {
       if (matched !== fromChild) {
         fromParent.insertBefore(matched, fromChild);
       } else {
-        fromChild = fromChild.nextSibling;
+        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)) {
       matched = fromChild;
-      fromChild = fromChild.nextSibling;
+      fromChild = skipOwned(fromChild.nextSibling, ownedItems);
     }
     if (matched !== null) {
-      morphNode(matched, toChild, listParents);
+      morphNode(matched, toChild, ownedItems);
     } else {
       const cloned = toChild.cloneNode(true);
       fromParent.insertBefore(cloned, fromChild);
@@ -122,13 +224,15 @@ function diffChildren(fromParent, toParent, listParents) {
   }
   while (fromChild !== null) {
     const next = fromChild.nextSibling;
-    fromParent.removeChild(fromChild);
+    if (fromChild.nodeType !== ELEMENT_NODE || !ownedItems.has(fromChild)) {
+      fromParent.removeChild(fromChild);
+    }
     fromChild = next;
   }
 }
-function morphNode(fromNode, toNode, listParents) {
+function morphNode(fromNode, toNode, ownedItems) {
   if (fromNode.nodeType === ELEMENT_NODE) {
-    morphElement(fromNode, toNode, listParents);
+    morphElement(fromNode, toNode, ownedItems);
     return;
   }
   if (fromNode.nodeType === TEXT_NODE || fromNode.nodeType === COMMENT_NODE) {
@@ -137,7 +241,7 @@ function morphNode(fromNode, toNode, listParents) {
     if (fromText.data !== toText.data) fromText.data = toText.data;
   }
 }
-function morphElement(fromEl, toEl, listParents) {
+function morphElement(fromEl, toEl, ownedItems) {
   if (fromEl.tagName !== toEl.tagName) {
     const replacement = toEl.cloneNode(true);
     fromEl.parentNode?.replaceChild(replacement, fromEl);
@@ -151,8 +255,10 @@ function morphElement(fromEl, toEl, listParents) {
     if (isTextInputOrTextarea(fromEl)) preserveTextEntryState(fromEl, toEl);
   }
   morphAttributes(fromEl, toEl);
-  if (listParents.has(fromEl)) return;
-  diffChildren(fromEl, toEl, listParents);
+  diffChildren(fromEl, toEl, ownedItems);
+}
+function isUserAgentOwnedAttr(tagName, name) {
+  return name === "open" && (tagName === "DETAILS" || tagName === "DIALOG");
 }
 function morphAttributes(fromEl, toEl) {
   const toAttrs = toEl.attributes;
@@ -170,13 +276,14 @@ function morphAttributes(fromEl, toEl) {
     }
   }
   const fromAttrs = fromEl.attributes;
+  const fromTag = fromEl.tagName;
   for (let i = fromAttrs.length - 1; i >= 0; i--) {
     const attr = fromAttrs[i];
     const ns = attr.namespaceURI;
     const name = attr.localName;
     if (ns !== null) {
       if (!toEl.hasAttributeNS(ns, name)) fromEl.removeAttributeNS(ns, name);
-    } else if (!toEl.hasAttribute(name)) {
+    } else if (!toEl.hasAttribute(name) && !isUserAgentOwnedAttr(fromTag, name)) {
       fromEl.removeAttribute(name);
     }
   }
@@ -201,13 +308,249 @@ function preserveTextEntryState(fromEl, toEl) {
   }
 }
 
-// src/list-reconcile.ts
+// src/list-binding.ts
+function endAnchor(binding) {
+  if (binding.items.length > 0) {
+    return binding.items[binding.items.length - 1].node.nextElementSibling;
+  }
+  return binding.marker.nextElementSibling;
+}
+
+// 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 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))}`
+  );
+}
+
+// src/list-reconcile-granular.ts
+function reconcileGranular(binding, patches) {
+  const { liveParent } = binding;
+  const items = binding.items;
+  const focusSnap = captureFocus(liveParent);
+  let i = 0;
+  while (i < patches.length) {
+    const patch = patches[i];
+    if (patch.type === "replace") {
+      i += 1;
+      continue;
+    }
+    if (patch.type === "update") {
+      let runEnd = i + 1;
+      while (runEnd < patches.length && patches[runEnd].type === "update") {
+        runEnd += 1;
+      }
+      const runLen = runEnd - i;
+      if (runLen === 1) {
+        applySingleUpdate(liveParent, items, patch);
+      } else {
+        applyBulkUpdate(liveParent, items, patches, i, runEnd);
+      }
+      i = runEnd;
+      continue;
+    }
+    if (patch.type === "insert") {
+      let runEnd = i + 1;
+      while (runEnd < patches.length && patches[runEnd].type === "insert" && patches[runEnd].index === patches[runEnd - 1].index + 1) {
+        runEnd += 1;
+      }
+      const runLen = runEnd - i;
+      if (runLen === 1) {
+        applySingleInsert(liveParent, items, patch, endAnchor(binding));
+      } else {
+        applyBulkInsert(liveParent, items, patches, i, runEnd, endAnchor(binding));
+      }
+      i = runEnd;
+      continue;
+    }
+    if (patch.type === "remove") {
+      const entry = items[patch.index];
+      liveParent.removeChild(entry.node);
+      items.splice(patch.index, 1);
+      i += 1;
+      continue;
+    }
+    if (patch.type === "move") {
+      const moved = items[patch.from];
+      let anchorIdx = patch.to;
+      if (patch.from < patch.to) anchorIdx += 1;
+      const anchor = anchorIdx < items.length ? items[anchorIdx].node : endAnchor(binding);
+      liveParent.insertBefore(moved.node, anchor);
+      items.splice(patch.from, 1);
+      items.splice(patch.to, 0, moved);
+      i += 1;
+      continue;
+    }
+  }
+  if (focusSnap !== null) restoreFocus(focusSnap);
+}
+function applySingleInsert(liveParent, items, patch, tailAnchor) {
+  const { html } = patch;
+  const newNode = parseSingleRow(html);
+  const anchor = patch.index < items.length ? items[patch.index].node : tailAnchor;
+  liveParent.insertBefore(newNode, anchor);
+  items.splice(patch.index, 0, {
+    ref: patch.item,
+    cacheKey: void 0,
+    html,
+    node: newNode
+  });
+}
+function applySingleUpdate(liveParent, items, patch) {
+  const { html } = patch;
+  const oldEntry = items[patch.index];
+  if (html === oldEntry.html) return;
+  const newNode = parseSingleRow(html);
+  liveParent.replaceChild(newNode, oldEntry.node);
+  items[patch.index] = { ref: patch.item, cacheKey: void 0, html, node: newNode };
+}
+function applyBulkUpdate(liveParent, items, patches, start, end) {
+  const changes = [];
+  for (let k = start; k < end; k++) {
+    const p = patches[k];
+    if (p.html !== items[p.index].html) {
+      changes.push({ patchIdx: k, html: p.html });
+    }
+  }
+  if (changes.length === 0) return;
+  const { tpl, count } = parseRowTemplate(changes.map((c) => c.html).join(""));
+  if (count !== changes.length) {
+    throw findOffendingChange(patches, changes);
+  }
+  const newNodes = new Array(changes.length);
+  let child = tpl.content.firstElementChild;
+  for (let k = 0; k < newNodes.length; k++) {
+    newNodes[k] = child;
+    child = child.nextElementSibling;
+  }
+  for (let k = 0; k < changes.length; k++) {
+    const c = changes[k];
+    const p = patches[c.patchIdx];
+    const oldEntry = items[p.index];
+    liveParent.replaceChild(newNodes[k], oldEntry.node);
+    items[p.index] = { ref: p.item, cacheKey: void 0, html: c.html, node: 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;
+  }
+  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 anchor = startIdx < items.length ? items[startIdx].node : tailAnchor;
+  liveParent.insertBefore(tpl.content, anchor);
+  const newEntries = new Array(end - start);
+  for (let k = 0; k < newEntries.length; k++) {
+    const p = patches[start + k];
+    newEntries[k] = {
+      ref: p.item,
+      cacheKey: void 0,
+      html: htmls[k],
+      node: newNodes[k]
+    };
+  }
+  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 new Error("each(): bulk-insert mismatch with no per-row offender (kerf bug).");
+}
+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 new Error("each(): bulk-update mismatch with no per-row offender (kerf bug).");
+}
+
+// src/list-reconcile-snapshot.ts
+function reconcileSnapshot(binding, listSeg) {
+  const { liveParent } = binding;
+  const { newRecord, prevIdx, replacedNodes, freshIndices, freshHtmls } = classifyItems(binding.items, listSeg);
+  if (replacedNodes.length === 0 && freshIndices.length === 0 && isInOrder(prevIdx)) {
+    binding.items = newRecord;
+    return;
+  }
+  const tailAnchor = endAnchor(binding);
+  buildFreshNodes(newRecord, freshIndices, freshHtmls);
+  const focusSnap = captureFocus(liveParent);
+  removeOldNodes(liveParent, replacedNodes);
+  applyMoves(liveParent, newRecord, prevIdx, lis(prevIdx), tailAnchor);
+  if (focusSnap !== null) restoreFocus(focusSnap);
+  binding.items = newRecord;
+}
 function classifyItems(oldItems, listSeg) {
   const oldByRef = /* @__PURE__ */ new Map();
-  const oldIndex = /* @__PURE__ */ new Map();
   for (let i = 0; i < oldItems.length; i++) {
-    oldByRef.set(oldItems[i].ref, oldItems[i]);
-    oldIndex.set(oldItems[i].ref, i);
+    oldByRef.set(oldItems[i].ref, [oldItems[i], i]);
   }
   const newRecord = new Array(listSeg.items.length);
   const prevIdx = new Array(listSeg.items.length);
@@ -219,12 +562,12 @@ function classifyItems(oldItems, listSeg) {
     const oi = oldByRef.get(ni.ref);
     if (oi !== void 0) {
       oldByRef.delete(ni.ref);
-      if (oi.html === ni.html) {
-        newRecord[i] = oi;
-        prevIdx[i] = oldIndex.get(ni.ref);
+      if (oi[0].html === ni.html) {
+        newRecord[i] = oi[0];
+        prevIdx[i] = oi[1];
         continue;
       }
-      replacedNodes.push(oi.node);
+      replacedNodes.push(oi[0].node);
     }
     newRecord[i] = {
       ref: ni.ref,
@@ -236,32 +579,37 @@ function classifyItems(oldItems, listSeg) {
     freshIndices.push(i);
     freshHtmls.push(ni.html);
   }
-  for (const [, orphan] of oldByRef) replacedNodes.push(orphan.node);
+  for (const [, orphan] of oldByRef) replacedNodes.push(orphan[0].node);
   return { newRecord, prevIdx, replacedNodes, freshIndices, freshHtmls };
 }
 function buildFreshNodes(newRecord, freshIndices, freshHtmls) {
   if (freshHtmls.length === 0) return;
-  const tpl = document.createElement("template");
-  tpl.innerHTML = freshHtmls.join("");
+  const { tpl, count } = parseRowTemplate(freshHtmls.join(""));
+  if (count !== freshHtmls.length) {
+    throw findOffendingRow(newRecord, freshIndices, freshHtmls);
+  }
   let node = tpl.content.firstElementChild;
   for (const idx of freshIndices) {
-    if (node === null) {
-      throw new Error(
-        `each(): row render produced no top-level element. Each item's render must return exactly one element. Got HTML: ${newRecord[idx].html.slice(0, 120)}`
-      );
-    }
     const next = node.nextElementSibling;
     newRecord[idx].node = node;
     node = next;
   }
 }
+function findOffendingRow(newRecord, freshIndices, freshHtmls) {
+  for (let i = 0; i < freshHtmls.length; i++) {
+    if (parseRowTemplate(freshHtmls[i]).count !== 1) {
+      return rowContractError(freshIndices[i], newRecord[freshIndices[i]].html);
+    }
+  }
+  return new Error("each(): bulk-parse mismatch with no per-row offender (kerf bug).");
+}
 function removeOldNodes(liveParent, replacedNodes) {
   for (const node of replacedNodes) {
     if (node.parentElement === liveParent) liveParent.removeChild(node);
   }
 }
-function applyMoves(liveParent, newRecord, prevIdx, stable) {
-  let nextSibling = null;
+function applyMoves(liveParent, newRecord, prevIdx, stable, tailAnchor) {
+  let nextSibling = tailAnchor;
   for (let i = newRecord.length - 1; i >= 0; i--) {
     const node = newRecord[i].node;
     if (prevIdx[i] === -1 || !stable.has(i)) {
@@ -299,71 +647,138 @@ function lis(arr) {
   }
   return out;
 }
+function isInOrder(prevIdx) {
+  for (let i = 0; i < prevIdx.length; i++) {
+    if (prevIdx[i] !== i) return false;
+  }
+  return true;
+}
+
+// src/list-reconcile.ts
 function reconcileList(binding, listSeg) {
-  const { liveParent } = binding;
-  const { newRecord, prevIdx, replacedNodes, freshIndices, freshHtmls } = classifyItems(binding.items, listSeg);
-  buildFreshNodes(newRecord, freshIndices, freshHtmls);
-  removeOldNodes(liveParent, replacedNodes);
-  applyMoves(liveParent, newRecord, prevIdx, lis(prevIdx));
-  binding.items = newRecord;
+  if (listSeg.patches !== void 0 && binding.items.length > 0) {
+    reconcileGranular(binding, listSeg.patches);
+    return;
+  }
+  reconcileSnapshot(binding, listSeg);
 }
 
 // src/mount.ts
 var LIST_MARKER_PREFIX = "kf-list:";
 function mount(rootEl, render) {
+  if (rootEl == null) {
+    throw new Error(
+      'mount: rootEl is null/undefined \u2014 pass the live element, e.g. mount(document.getElementById("app")!, render). A common cause is a typo in the id or selector that returns null at runtime even though the TypeScript types say HTMLElement.'
+    );
+  }
   const bindings = /* @__PURE__ */ new Map();
-  const counter = { value: 0 };
+  const renderCtx = {
+    counter: 0,
+    caches: /* @__PURE__ */ new Map(),
+    bindingCounts: /* @__PURE__ */ new Map()
+  };
   let isFirst = true;
+  let prevStaticHtml = "";
   return effect(() => {
-    counter.value = 0;
-    _setListCounter(counter);
+    renderCtx.counter = 0;
+    _setRenderContext(renderCtx);
     let result;
     try {
       result = render();
     } finally {
-      _setListCounter(null);
+      _setRenderContext(null);
     }
-    const segment = isSafeHtml(result) ? result.__segment ?? { kind: "static", html: result.__html } : { kind: "static", html: result };
+    const segment = isSafeHtml(result) ? result.__segment ?? { kind: "static", html: result.__html } : { kind: "static", html: coerceRenderResult(result) };
     if (isFirst) {
-      rootEl.innerHTML = flatten(segment, true);
-      bindListsFromMarkers(rootEl, segment, bindings);
+      runFirstRender(rootEl, segment, bindings);
+      prevStaticHtml = flattenWithoutListItems(segment);
       isFirst = false;
     } else {
-      const template = rootEl.cloneNode(false);
-      template.innerHTML = flattenWithoutListItems(segment);
-      const listParents = /* @__PURE__ */ new Set();
-      for (const b of bindings.values()) listParents.add(b.liveParent);
-      diff(rootEl, template, listParents);
-      bindListsFromMarkers(rootEl, segment, bindings);
+      prevStaticHtml = runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml);
     }
     for (const listSeg of collectLists(segment).values()) {
       const binding = bindings.get(listSeg.id);
       reconcileList(binding, listSeg);
+      renderCtx.bindingCounts.set(listSeg.id, binding.items.length);
     }
   });
 }
-function bindListsFromMarkers(rootEl, segment, bindings) {
+function runFirstRender(rootEl, segment, bindings) {
+  rootEl.innerHTML = flatten(segment, true);
+  bindListsFromMarkers(rootEl, segment, bindings, true);
+}
+function runSubsequentRender(rootEl, segment, bindings, renderCtx, prevStaticHtml) {
+  const currentStaticHtml = flattenWithoutListItems(segment);
+  if (currentStaticHtml === prevStaticHtml) {
+    return prevStaticHtml;
+  }
+  cleanupOrphanBindings(segment, bindings, renderCtx);
+  const template = rootEl.cloneNode(false);
+  template.innerHTML = currentStaticHtml;
+  diff(rootEl, template, collectOwnedItems(bindings));
+  bindListsFromMarkers(rootEl, segment, bindings, false);
+  return currentStaticHtml;
+}
+function coerceRenderResult(result) {
+  if (result === null || result === void 0) return "";
+  if (result === false || result === true) return "";
+  return String(result);
+}
+function bindListsFromMarkers(rootEl, segment, bindings, inlinedItems) {
   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 listSeg = lists.get(id);
     const liveParent = marker.parentElement;
     const items = [];
-    let next = marker.nextElementSibling;
-    for (let i = 0; i < listSeg.items.length && next !== null; i++) {
-      items.push({
-        ref: listSeg.items[i].ref,
-        cacheKey: listSeg.items[i].cacheKey,
-        html: listSeg.items[i].html,
-        node: next
-      });
-      next = next.nextElementSibling;
-    }
-    bindings.set(id, { liveParent, items });
-    marker.remove();
+    if (inlinedItems) {
+      let next = marker.nextElementSibling;
+      for (let i = 0; i < listSeg.items.length && next !== null; i++) {
+        validateInlinedRowMatch(listSeg.items[i].html, i, next);
+        items.push({
+          ref: listSeg.items[i].ref,
+          cacheKey: listSeg.items[i].cacheKey,
+          html: listSeg.items[i].html,
+          node: next
+        });
+        next = next.nextElementSibling;
+      }
+    }
+    bindings.set(id, { liveParent, items, marker });
+  }
+}
+function validateInlinedRowMatch(expectedHtml, index, boundEl) {
+  if (boundEl.outerHTML === expectedHtml) return;
+  const { count } = parseRowTemplate(expectedHtml);
+  if (count === 1) return;
+  throw rowContractError(index, expectedHtml);
+}
+function collectOwnedItems(bindings) {
+  const owned = /* @__PURE__ */ new Set();
+  for (const b of bindings.values()) {
+    for (const item of b.items) owned.add(item.node);
+  }
+  return owned;
+}
+function cleanupOrphanBindings(segment, bindings, renderCtx) {
+  const liveIds = collectLists(segment);
+  for (const [id, binding] of bindings) {
+    if (liveIds.has(id)) continue;
+    for (const item of binding.items) {
+      if (item.node.parentElement !== null) {
+        item.node.parentElement.removeChild(item.node);
+      }
+    }
+    if (binding.marker.parentElement !== null) {
+      binding.marker.parentElement.removeChild(binding.marker);
+    }
+    bindings.delete(id);
+    renderCtx.bindingCounts.delete(id);
+    renderCtx.caches.delete(id);
   }
 }
 function collectComments(node, out) {