@barefootjs/client 0.26.4 → 0.28.0

package/dist/runtime/index.js

@@ -1,14 +1,14 @@
 // src/runtime/index.ts
 import {
-  createSignal as createSignal2,
-  createEffect as createEffect4,
+  createSignal as createSignal3,
+  createEffect as createEffect5,
   createDisposableEffect,
   createMemo,
   createSelector,
   createRoot as createRoot3,
   onCleanup,
   onMount,
-  untrack as untrack3,
+  untrack as untrack4,
   batch,
   setProfilerSink,
   beginTurn,
@@ -1142,9 +1142,7 @@ function upsertChild(parent, name, slotId, props, key, anchorScope) {
   const ph = parent.getAttribute(BF_PLACEHOLDER) === phId ? parent : parent.querySelector(`[${BF_PLACEHOLDER}="${phId}"]`);
   if (ph) {
     const slot = slotId ? buildSlotInfo(parent, slotId, anchorScope) : undefined;
-    const comp = createComponent(name, props, key, slot);
-    ph.replaceWith(comp);
-    return comp;
+    return createComponent(name, props, key, slot, ph);
   }
   return null;
 }
@@ -1352,13 +1350,30 @@ var _parentScopeId = null;
 function setParentScopeId(id) {
   _parentScopeId = id;
 }
-var propsUpdateMap = new WeakMap;
-var propsMap = new WeakMap;
-function createComponent(nameOrDef, props = {}, key, slot) {
+var _rowMountPoint = null;
+function setRowMountPoint(p) {
+  const prev = _rowMountPoint;
+  _rowMountPoint = p;
+  return prev;
+}
+function takeRowMountPoint() {
+  const p = _rowMountPoint;
+  _rowMountPoint = null;
+  return p;
+}
+function createComponent(nameOrDef, props = {}, key, slot, mountAt) {
+  const element = materializeComponent(nameOrDef, props, key, slot, mountAt);
+  if (mountAt && mountAt.parentNode && element !== mountAt) {
+    mountAt.replaceWith(element);
+  }
+  return element;
+}
+function materializeComponent(nameOrDef, props = {}, key, slot, mountAt) {
   if (props == null)
     props = {};
+  const rowMount = mountAt ? null : takeRowMountPoint();
   if (typeof nameOrDef !== "string") {
-    return createComponentFromDef(nameOrDef, props, key);
+    return createComponentFromDef(nameOrDef, props, key, mountAt, rowMount);
   }
   const name = nameOrDef;
   const templateFn = getTemplate(name);
@@ -1418,8 +1433,13 @@ function createComponent(nameOrDef, props = {}, key, slot) {
   if (key !== undefined) {
     element.setAttribute(BF_KEY, String(key));
   }
-  const prevScope = setCurrentScope(element);
   const rootIsDeferredPlaceholder = element.hasAttribute(BF_PLACEHOLDER);
+  if (mountAt && !rootIsDeferredPlaceholder) {
+    mountAt.replaceWith(element);
+  } else if (rowMount && !rootIsDeferredPlaceholder) {
+    rowMount.container.insertBefore(element, rowMount.anchor);
+  }
+  const prevScope = setCurrentScope(element);
   let placeholderWrapper = null;
   if (rootIsDeferredPlaceholder) {
     placeholderWrapper = parseHTML("<div></div>").firstChild;
@@ -1445,24 +1465,8 @@ function createComponent(nameOrDef, props = {}, key, slot) {
   }
   setCurrentScope(prevScope);
   hydratedScopes.add(element);
-  propsMap.set(element, props);
-  registerPropsUpdate(element, name, props);
   return element;
 }
-function getComponentProps(element) {
-  return propsMap.get(element);
-}
-function registerPropsUpdate(element, name, _initialProps) {
-  propsUpdateMap.set(element, (newProps) => {
-    const init = getComponentInit(name);
-    if (init) {
-      init(element, newProps);
-    }
-  });
-}
-function getPropsUpdateFn(element) {
-  return propsUpdateMap.get(element);
-}
 function renderChild(name, props, key, slotSuffix) {
   const templateFn = getTemplate(name);
   const suffix = slotSuffix ? `_${slotSuffix}` : "";
@@ -1528,6 +1532,11 @@ function escapeText(value) {
     return "";
   return escapeAttr(value);
 }
+function escapeTextOrNode(value) {
+  if (typeof Node !== "undefined" && value instanceof Node)
+    return value;
+  return escapeText(value);
+}
 var SVG_NS = "http://www.w3.org/2000/svg";
 function parseHTML(html, parent) {
   const tpl = document.createElement("template");
@@ -1571,7 +1580,7 @@ function insertGetterChildren(element, children) {
     element.appendChild(document.createTextNode(String(children)));
   }
 }
-function createComponentFromDef(def, props, key) {
+function createComponentFromDef(def, props, key, mountAt, rowMount) {
   if (!def.template) {
     throw new Error("[BarefootJS] createComponent with ComponentDef requires a template function");
   }
@@ -1590,9 +1599,13 @@ function createComponentFromDef(def, props, key) {
   if (key !== undefined) {
     element.setAttribute(BF_KEY, String(key));
   }
+  if (mountAt) {
+    mountAt.replaceWith(element);
+  } else if (rowMount) {
+    rowMount.container.insertBefore(element, rowMount.anchor);
+  }
   def.init(element, props);
   hydratedScopes.add(element);
-  propsMap.set(element, props);
   return element;
 }
 
@@ -1650,7 +1663,7 @@ function createPortal(children, container = document.body, options) {
     }
   };
 }
-// src/runtime/reconcile-elements.ts
+// src/runtime/loop-markers.ts
 function findLoopMarkers(container, markerId) {
   let startMarker = null;
   let endMarker = null;
@@ -1695,14 +1708,6 @@ function getElementsBetweenMarkers(start, end) {
   }
   return elements;
 }
-function removeElementsBetweenMarkers(start, end) {
-  let node = start.nextSibling;
-  while (node && node !== end) {
-    const next = node.nextSibling;
-    node.parentNode?.removeChild(node);
-    node = next;
-  }
-}
 function getLoopChildren(container, markerId) {
   const { startMarker, endMarker } = findLoopMarkers(container, markerId);
   if (startMarker && endMarker) {
@@ -1723,159 +1728,6 @@ function getLoopNodes(container, markerId) {
   }
   return Array.from(container.childNodes);
 }
-function reconcileElements(container, items, getKey, renderItem, firstElement, markerId) {
-  if (!container || !items)
-    return;
-  const { startMarker, endMarker } = findLoopMarkers(container, markerId);
-  const existingByKey = new Map;
-  let hasKeyedChildren = false;
-  const loopChildren = startMarker ? getElementsBetweenMarkers(startMarker, endMarker) : Array.from(container.children);
-  for (const child of loopChildren) {
-    const el = child;
-    const key = el.dataset?.key;
-    if (key !== undefined) {
-      existingByKey.set(key, el);
-      hasKeyedChildren = true;
-    }
-  }
-  if (!hasKeyedChildren) {
-    if (items.length === 0) {
-      if (startMarker) {
-        removeElementsBetweenMarkers(startMarker, endMarker);
-      } else {
-        container.innerHTML = "";
-      }
-      return;
-    }
-    const fragment = document.createDocumentFragment();
-    for (let i = 0;i < items.length; i++) {
-      const el = i === 0 && firstElement ? firstElement : renderItem(items[i], i);
-      const key = getKey ? getKey(items[i], i) : String(i);
-      if (!el.dataset.key)
-        el.setAttribute(BF_KEY, key);
-      fragment.appendChild(el);
-    }
-    if (startMarker) {
-      removeElementsBetweenMarkers(startMarker, endMarker);
-      endMarker.parentNode.insertBefore(fragment, endMarker);
-    } else {
-      container.innerHTML = "";
-      container.appendChild(fragment);
-    }
-    return;
-  }
-  let insertAnchor = endMarker ?? null;
-  if (!startMarker) {
-    let foundKeyed = false;
-    for (const child of Array.from(container.childNodes)) {
-      if (child.nodeType === Node.ELEMENT_NODE && child.dataset.key !== undefined) {
-        foundKeyed = true;
-      } else if (foundKeyed) {
-        insertAnchor = child;
-        break;
-      }
-    }
-  }
-  let focusedKey = null;
-  const activeEl = document.activeElement;
-  if (activeEl && activeEl !== document.body) {
-    const tag = activeEl.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || activeEl.isContentEditable) {
-      for (const [key, el] of existingByKey) {
-        if (el.contains(activeEl)) {
-          focusedKey = key;
-          break;
-        }
-      }
-    }
-  }
-  const desiredElements = [];
-  const toRemove = [];
-  let focusTarget = null;
-  for (let i = 0;i < items.length; i++) {
-    const item = items[i];
-    const key = getKey ? getKey(item, i) : String(i);
-    const createEl = () => i === 0 && firstElement ? firstElement : renderItem(item, i);
-    const existing = existingByKey.get(key);
-    if (existing) {
-      existingByKey.delete(key);
-      if (existing.getAttribute(BF_SCOPE) && !hydratedScopes.has(existing)) {
-        const newEl = createEl();
-        if (!newEl.dataset.key)
-          newEl.setAttribute(BF_KEY, key);
-        desiredElements.push(newEl);
-        toRemove.push(existing);
-      } else if (focusedKey === key) {
-        const newEl = createEl();
-        if (!newEl.dataset.key)
-          newEl.setAttribute(BF_KEY, key);
-        focusTarget = prepareInputTransfer(existing, newEl);
-        desiredElements.push(newEl);
-        toRemove.push(existing);
-      } else {
-        const newEl = createEl();
-        if (!newEl.dataset.key)
-          newEl.setAttribute(BF_KEY, key);
-        desiredElements.push(newEl);
-        toRemove.push(existing);
-      }
-    } else {
-      const el = createEl();
-      if (!el.dataset.key)
-        el.setAttribute(BF_KEY, key);
-      desiredElements.push(el);
-    }
-  }
-  for (const el of existingByKey.values()) {
-    toRemove.push(el);
-  }
-  for (const el of toRemove) {
-    if (el.parentNode)
-      el.remove();
-  }
-  for (const el of desiredElements) {
-    container.insertBefore(el, insertAnchor);
-  }
-  if (focusTarget) {
-    focusTarget.target.focus();
-    if (typeof focusTarget.selectionStart === "number") {
-      focusTarget.target.selectionStart = focusTarget.selectionStart;
-      focusTarget.target.selectionEnd = focusTarget.selectionEnd;
-    }
-  }
-}
-function prepareInputTransfer(oldEl, newEl) {
-  const focused = oldEl.contains(document.activeElement) ? document.activeElement : null;
-  if (!focused)
-    return null;
-  const tag = focused.tagName;
-  const oldInputs = Array.from(oldEl.querySelectorAll(tag));
-  const idx = oldInputs.indexOf(focused);
-  if (idx < 0)
-    return null;
-  const newInputs = Array.from(newEl.querySelectorAll(tag));
-  const target = newInputs[idx];
-  if (!target)
-    return null;
-  target.value = focused.value;
-  return {
-    target,
-    selectionStart: focused.selectionStart,
-    selectionEnd: focused.selectionEnd
-  };
-}
-
-// src/runtime/list.ts
-function reconcileList(container, items, getKey, renderItem) {
-  if (!container || !items)
-    return;
-  if (items.length === 0) {
-    container.innerHTML = "";
-    return;
-  }
-  const firstElement = renderItem(items[0], 0);
-  reconcileElements(container, items, getKey, renderItem, firstElement);
-}
 // src/runtime/qsa-item.ts
 function* itemRootElements(primaryEl) {
   yield primaryEl;
@@ -1932,9 +1784,7 @@ function upsertChildItem(primaryEl, name, slotId, props, key, anchorScope) {
   const ph = qsaItem(primaryEl, `[data-bf-ph="${phId}"]`);
   if (ph) {
     const slot = slotId ? buildSlotInfo(primaryEl, slotId, anchorScope) : undefined;
-    const comp = createComponent(name, props, key, slot);
-    ph.replaceWith(comp);
-    return comp;
+    return createComponent(name, props, key, slot, ph);
   }
   return null;
 }
@@ -2047,7 +1897,7 @@ function removeScope(scope) {
       ex.remove();
   }
 }
-function createItemScope(item, index, renderItem, existingPrimary, existingExtras, existingStart) {
+function createItemScope(item, index, renderItem, existingPrimary, existingExtras, existingStart, rowMount) {
   let primaryEl;
   let dispose;
   let setItem;
@@ -2057,7 +1907,14 @@ function createItemScope(item, index, renderItem, existingPrimary, existingExtra
     dispose = d;
     const [itemAccessor, itemSetter] = createSignal(item);
     setItem = itemSetter;
-    primaryEl = renderItem(itemAccessor, index, existingPrimary);
+    const ownsRowMount = !existingPrimary && !!rowMount;
+    const prevRowMount = ownsRowMount ? setRowMountPoint(rowMount) : null;
+    try {
+      primaryEl = renderItem(itemAccessor, index, existingPrimary);
+    } finally {
+      if (ownsRowMount)
+        setRowMountPoint(prevRowMount);
+    }
     if (existingPrimary) {
       extras = existingExtras ?? [];
       startMarker = existingStart ?? null;
@@ -2071,6 +1928,9 @@ function createItemScope(item, index, renderItem, existingPrimary, existingExtra
     }
     return;
   });
+  if (rowMount && !existingPrimary && extras.length > 0 && primaryEl.parentNode) {
+    primaryEl.remove();
+  }
   return { startMarker, primaryEl, extras, dispose, setItem };
 }
 function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
@@ -2112,7 +1972,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         for (let i2 = existingRanges.length;i2 < items.length; i2++) {
           const item = items[i2];
           const key = getKey ? getKey(item, i2) : String(i2);
-          const scope = createItemScope(item, i2, renderItem);
+          const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, { container, anchor });
           if (!scope.primaryEl.dataset.key)
             scope.primaryEl.setAttribute(BF_KEY, key);
           scopes.set(key, scope);
@@ -2191,7 +2051,7 @@ function mapArray(accessor, container, getKey, renderItem, markerId, bfId) {
         existing.setItem(item);
         desiredOrder.push(existing);
       } else {
-        const scope = createItemScope(item, i2, renderItem);
+        const scope = createItemScope(item, i2, renderItem, undefined, undefined, undefined, { container, anchor });
         if (!scope.primaryEl.dataset.key)
           scope.primaryEl.setAttribute(BF_KEY, key);
         scopes.set(key, scope);
@@ -2387,6 +2247,198 @@ function mapArrayAnchored(accessor, container, getKey, renderItem, markerId, bfI
     }
   }, bfId);
 }
+// src/runtime/map-array-lazy.ts
+import { createEffect as createEffect2, createSignal as createSignal2, untrack as untrack2 } from "@barefootjs/client/reactive";
+function mapArrayLazy(accessor, container, getKey, plan, markerId, bfId) {
+  if (!container)
+    return;
+  const entries = new Map;
+  let entryList = [];
+  let hydrated = false;
+  const needsResubscribe = plan.applyOuter !== undefined;
+  const [generation, bumpGeneration] = needsResubscribe ? createSignal2(0) : [null, null];
+  let stranded = false;
+  const markStranded = () => {
+    if (needsResubscribe)
+      stranded = true;
+  };
+  const flushStranded = () => {
+    if (stranded && bumpGeneration) {
+      stranded = false;
+      bumpGeneration((n) => n + 1);
+    }
+  };
+  let cachedStart = null;
+  let cachedEnd = null;
+  const resolveMarkers = () => {
+    if (cachedStart && cachedEnd && cachedStart.isConnected && cachedEnd.isConnected) {
+      return { start: cachedStart, end: cachedEnd };
+    }
+    const found = findLoopMarkers2(container, markerId);
+    cachedStart = found.start;
+    cachedEnd = found.end;
+    return found;
+  };
+  const createEntry = (item, index, key) => {
+    const entry = {
+      key,
+      primaryEl: undefined,
+      item,
+      refs: null,
+      last: null
+    };
+    entry.primaryEl = untrack2(() => plan.createRow(entry, index));
+    if (!entry.primaryEl.dataset.key)
+      entry.primaryEl.setAttribute(BF_KEY, key);
+    markStranded();
+    return entry;
+  };
+  createEffect2(() => {
+    const items = accessor();
+    if (!items)
+      return;
+    const { start: startMarker, end: endMarker } = resolveMarkers();
+    const anchor = endMarker ?? null;
+    if (!hydrated) {
+      hydrated = true;
+      const doms = [];
+      for (let node = startMarker ? startMarker.nextSibling : container.firstChild;node && node !== anchor; node = node.nextSibling) {
+        if (node.nodeType === Node.ELEMENT_NODE)
+          doms.push(node);
+      }
+      if (doms.length > 0 && entries.size === 0) {
+        const list = [];
+        const shared = Math.min(doms.length, items.length);
+        for (let i2 = 0;i2 < shared; i2++) {
+          const el = doms[i2];
+          const ssrKey = el.getAttribute(BF_KEY);
+          const key = ssrKey !== null ? ssrKey : getKey ? getKey(items[i2], i2) : String(i2);
+          const entry = { key, primaryEl: el, item: items[i2], refs: null, last: null };
+          entries.set(key, entry);
+          list.push(entry);
+        }
+        for (let i2 = doms.length;i2 < items.length; i2++) {
+          const item = items[i2];
+          const key = getKey ? getKey(item, i2) : String(i2);
+          const entry = createEntry(item, i2, key);
+          entries.set(key, entry);
+          list.push(entry);
+          container.insertBefore(entry.primaryEl, anchor);
+        }
+        for (let i2 = items.length;i2 < doms.length; i2++)
+          doms[i2].remove();
+        entryList = list;
+        flushStranded();
+        return;
+      }
+    }
+    if (items.length === 0) {
+      if (entries.size > 0) {
+        if (startMarker && endMarker) {
+          const range = document.createRange();
+          range.setStartAfter(startMarker);
+          range.setEndBefore(endMarker);
+          range.deleteContents();
+        } else {
+          let actualNodeCount = 0;
+          for (let node = container.firstChild;node; node = node.nextSibling)
+            actualNodeCount++;
+          if (actualNodeCount === entries.size) {
+            container.textContent = "";
+          } else {
+            for (const entry of entries.values())
+              entry.primaryEl.remove();
+          }
+        }
+        entries.clear();
+        entryList = [];
+      }
+      return;
+    }
+    const newKeys = new Set;
+    const warnedKeys = new Set;
+    const desiredOrder = [];
+    for (let i2 = 0;i2 < items.length; i2++) {
+      const item = items[i2];
+      const key = getKey ? getKey(item, i2) : String(i2);
+      if (newKeys.has(key) && !warnedKeys.has(key)) {
+        warnedKeys.add(key);
+        console.warn(`[BarefootJS] mapArrayLazy: duplicate key "${key}" — items with this key collapse to a single DOM row, ` + `so only the last one renders. Use a per-item identifier (e.g. \`key={item.id}\`) for correct reconciliation.`);
+      }
+      newKeys.add(key);
+      const existing = entries.get(key);
+      if (existing) {
+        if (!Object.is(existing.item, item)) {
+          const prevItem = existing.item;
+          existing.item = item;
+          untrack2(() => plan.applyItem(existing, prevItem));
+          markStranded();
+        }
+        desiredOrder.push(existing);
+      } else {
+        const entry = createEntry(item, i2, key);
+        entries.set(key, entry);
+        desiredOrder.push(entry);
+      }
+    }
+    for (const [key, entry] of entries) {
+      if (!newKeys.has(key)) {
+        if (entry.primaryEl.parentNode)
+          entry.primaryEl.remove();
+        entries.delete(key);
+      }
+    }
+    const primaryElToDesiredIndex = new Map;
+    for (let i2 = 0;i2 < desiredOrder.length; i2++) {
+      primaryElToDesiredIndex.set(desiredOrder[i2].primaryEl, i2);
+    }
+    const domOrderIndices = [];
+    for (let node = startMarker ? startMarker.nextSibling : container.firstChild;node && node !== anchor; node = node.nextSibling) {
+      if (node.nodeType !== Node.ELEMENT_NODE)
+        continue;
+      const idx = primaryElToDesiredIndex.get(node);
+      if (idx !== undefined)
+        domOrderIndices.push(idx);
+    }
+    const stationary = new Array(desiredOrder.length).fill(false);
+    for (const pos of longestIncreasingSubsequenceIndices(domOrderIndices)) {
+      stationary[domOrderIndices[pos]] = true;
+    }
+    let i = 0;
+    while (i < desiredOrder.length) {
+      if (stationary[i]) {
+        i++;
+        continue;
+      }
+      let j = i;
+      while (j < desiredOrder.length && !stationary[j])
+        j++;
+      const before = j < desiredOrder.length ? desiredOrder[j].primaryEl : anchor;
+      if (j - i === 1) {
+        container.insertBefore(desiredOrder[i].primaryEl, before);
+      } else {
+        const runFragment = document.createDocumentFragment();
+        for (let k = i;k < j; k++)
+          runFragment.appendChild(desiredOrder[k].primaryEl);
+        container.insertBefore(runFragment, before);
+      }
+      i = j;
+    }
+    entryList = desiredOrder;
+    flushStranded();
+  }, bfId);
+  if (plan.applyOuter) {
+    const applyOuter = plan.applyOuter.bind(plan);
+    let seed = true;
+    createEffect2(() => {
+      if (generation)
+        generation();
+      const isSeed = seed;
+      seed = false;
+      applyOuter(entryList, isSeed);
+    });
+  }
+}
 // src/runtime/patch-leaf.ts
 function patchLeaf(el, html) {
   const tpl = document.createElement("template");
@@ -2412,35 +2464,44 @@ function patchLeaf(el, html) {
   }
   el.replaceChildren(...Array.from(next.childNodes));
 }
-// src/runtime/patch-slot-range.ts
-function patchSlotRange(scope, id, html) {
+// src/runtime/claim-slots.ts
+function resolvePath(root, path) {
+  let node = root;
+  for (const index of path) {
+    const child = node.childNodes[index];
+    if (!child)
+      return null;
+    node = child;
+  }
+  return node;
+}
+function isSlotComment(node, id) {
+  return node != null && node.nodeType === Node.COMMENT_NODE && node.nodeValue === `bf:${id}`;
+}
+function findOwnedMarker(root, id) {
   const marker = `bf:${id}`;
-  let start = null;
-  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-  while (walker.nextNode()) {
-    const comment = walker.currentNode;
+  const parentOwned = id.startsWith(BF_PARENT_OWNED_PREFIX);
+  const registryInfo = commentScopeRegistry.get(root);
+  const boundary = registryInfo ? registryInfo.commentNode.parentElement : root;
+  for (const comment of commentsInScope(root)) {
     if (comment.nodeValue !== marker)
       continue;
+    if (parentOwned)
+      return comment;
     let owned = true;
-    for (let el = comment.parentElement;el && el !== scope; el = el.parentElement) {
+    for (let el = comment.parentElement;el && el !== boundary; el = el.parentElement) {
       if (el.hasAttribute(BF_SCOPE)) {
         owned = false;
         break;
       }
     }
-    if (owned) {
-      start = comment;
-      break;
-    }
-  }
-  const parent = start?.parentNode;
-  if (!start || !parent) {
-    console.warn(`[barefootjs] preamble region marker bf:${id} not found in row; skipping patch`);
-    return;
+    if (owned)
+      return comment;
   }
+  return null;
+}
+function findMarkupEnd(start) {
   let depth = 0;
-  let end = null;
-  const toRemove = [];
   let node = start.nextSibling;
   while (node) {
     if (node.nodeType === Node.COMMENT_NODE) {
@@ -2448,28 +2509,195 @@ function patchSlotRange(scope, id, html) {
       if (value.startsWith("bf:")) {
         depth++;
       } else if (value === "/") {
-        if (depth === 0) {
-          end = node;
-          break;
-        }
+        if (depth === 0)
+          return node;
         depth--;
       }
     }
-    toRemove.push(node);
     node = node.nextSibling;
   }
+  return null;
+}
+function resolveAnchor(root, spec) {
+  if (spec.path.length > 0) {
+    const resolved = resolvePath(root, spec.path);
+    if (isSlotComment(resolved, spec.id))
+      return resolved;
+    console.warn(`[barefootjs] claim path for slot ${spec.id} did not resolve to its bf:${spec.id} marker; falling back to a scan`);
+  }
+  const found = findOwnedMarker(root, spec.id);
+  if (!found) {
+    console.warn(`[barefootjs] slot ${spec.id} marker not found; skipping`);
+  }
+  return found;
+}
+function claimMarkerlessText(root, spec) {
+  if (spec.path.length === 0) {
+    console.warn(`[barefootjs] markerless slot ${spec.id} has an empty path; skipping`);
+    return null;
+  }
+  const parentPath = spec.path.slice(0, -1);
+  const idx = spec.path[spec.path.length - 1];
+  const parent = resolvePath(root, parentPath);
+  if (!parent) {
+    console.warn(`[barefootjs] markerless claim path for slot ${spec.id} did not resolve to a parent node; skipping`);
+    return null;
+  }
+  const existing = parent.childNodes[idx];
+  if (existing && existing.nodeType === Node.TEXT_NODE) {
+    return { kind: "text", ref: existing };
+  }
+  const node = document.createTextNode("");
+  parent.insertBefore(node, existing ?? null);
+  return { kind: "text", ref: node };
+}
+function claimOne(root, spec) {
+  if (spec.kind === "text" && spec.markerless) {
+    return claimMarkerlessText(root, spec);
+  }
+  const anchor = resolveAnchor(root, spec);
+  if (!anchor)
+    return null;
+  if (spec.kind === "text") {
+    const next = anchor.nextSibling;
+    return { kind: "text", ref: next?.nodeType === Node.TEXT_NODE ? next : anchor };
+  }
+  const end = findMarkupEnd(anchor);
+  if (!end) {
+    console.warn(`[barefootjs] slot ${spec.id} has no end marker; skipping`);
+    return null;
+  }
+  return { kind: "markup", start: anchor, end, last: undefined };
+}
+function materializeText(slot) {
+  const anchor = slot.ref;
+  const parent = anchor.parentNode;
+  if (!parent)
+    return null;
+  const node = document.createTextNode("");
+  parent.insertBefore(node, anchor.nextSibling);
+  slot.ref = node;
+  return node;
+}
+function readText(slot) {
+  return slot.ref.nodeType === Node.TEXT_NODE ? slot.ref.nodeValue ?? "" : "";
+}
+function writeText(slot, value) {
+  const node = slot.ref.nodeType === Node.TEXT_NODE ? slot.ref : materializeText(slot);
+  if (!node)
+    return;
+  node.nodeValue = String(value ?? "");
+}
+function textOrNode(value) {
+  if (typeof Node !== "undefined" && value instanceof Node)
+    return value;
+  return String(value);
+}
+function promoteTextToMarkup(slot, id) {
+  const anchor = slot.ref.nodeType === Node.COMMENT_NODE ? slot.ref : isSlotComment(slot.ref.previousSibling, id) ? slot.ref.previousSibling : null;
+  if (!anchor) {
+    console.warn(`[barefootjs] slot ${id} was claimed as text and received a Node, but has no anchor marker to promote from; write ignored`);
+    return null;
+  }
+  const end = findMarkupEnd(anchor);
   if (!end) {
-    console.warn(`[barefootjs] preamble region bf:${id} has no end marker; skipping patch`);
+    console.warn(`[barefootjs] slot ${id} was claimed as text and received a Node, but has no end marker; write ignored`);
+    return null;
+  }
+  return { kind: "markup", start: anchor, end, last: undefined };
+}
+function clearMarkupRange(start, end) {
+  const parent = end.parentNode;
+  if (!parent)
     return;
+  let node = start.nextSibling;
+  while (node && node !== end) {
+    const next = node.nextSibling;
+    parent.removeChild(node);
+    node = next;
   }
-  for (const n of toRemove)
-    parent.removeChild(n);
+}
+function writeMarkup(ref, value) {
+  const { start, end } = ref;
+  const parent = end.parentNode;
+  if (!parent)
+    return;
+  if (value != null && value.__isSlot)
+    return;
+  if (typeof Node !== "undefined" && value instanceof Node) {
+    if (value === ref.last)
+      return;
+    clearMarkupRange(start, end);
+    parent.insertBefore(value, end);
+    ref.last = value;
+    return;
+  }
+  const text = String(value ?? "");
+  if (text === ref.last)
+    return;
+  clearMarkupRange(start, end);
   const tpl = document.createElement("template");
-  tpl.innerHTML = html;
+  tpl.innerHTML = text;
   parent.insertBefore(tpl.content, end);
+  ref.last = text;
+}
+function writeSlot(refs, id, value) {
+  const ref = refs.get(id);
+  if (!ref) {
+    console.warn(`[barefootjs] no claimed slot for id ${id}; write ignored`);
+    return;
+  }
+  if (ref.kind === "text") {
+    if (typeof Node !== "undefined" && value instanceof Node) {
+      const promoted = promoteTextToMarkup(ref, id);
+      if (!promoted)
+        return;
+      refs.set(id, promoted);
+      writeMarkup(promoted, value);
+      return;
+    }
+    writeText(ref, value);
+  } else {
+    writeMarkup(ref, value);
+  }
+}
+function readSlot(refs, id) {
+  const ref = refs.get(id);
+  if (!ref || ref.kind !== "text")
+    return null;
+  return readText(ref);
+}
+function claimSlots(root, plan) {
+  const refs = claimRefs(root, plan);
+  return { write: (id, value) => writeSlot(refs, id, value) };
+}
+function claimRefs(root, plan) {
+  const refs = new Map;
+  for (const spec of plan) {
+    const ref = claimOne(root, spec);
+    if (ref)
+      refs.set(spec.id, ref);
+  }
+  return refs;
+}
+function lazySlots(root, plan) {
+  let claimed = null;
+  return (id, value) => {
+    if (!claimed)
+      claimed = claimSlots(root, plan);
+    claimed.write(id, value);
+  };
+}
+function lazyClaimSlots(root, plan) {
+  let refs = null;
+  const ensure = () => refs ??= claimRefs(root, plan);
+  return {
+    write: (id, value) => writeSlot(ensure(), id, value),
+    read: (id) => readSlot(ensure(), id)
+  };
 }
 // src/runtime/apply-rest-attrs.ts
-import { createEffect as createEffect2 } from "@barefootjs/client/reactive";
+import { createEffect as createEffect3 } from "@barefootjs/client/reactive";
 
 // src/runtime/style.ts
 function styleToCss(value) {
@@ -2514,7 +2742,7 @@ function applyRestAttrs(el, source, excludeKeys) {
     }
   }
   const attrEntries = classified.filter(({ c }) => c.kind !== "ref" && c.kind !== "event" && c.kind !== "skip");
-  createEffect2(() => {
+  createEffect3(() => {
     for (const { key, c } of attrEntries) {
       const value = source[key];
       if (c.kind === "innerHTML") {
@@ -2590,7 +2818,7 @@ function date(recv, op) {
   return d[op]();
 }
 // src/runtime/insert.ts
-import { createEffect as createEffect3, untrack as untrack2 } from "@barefootjs/client/reactive";
+import { createEffect as createEffect4, untrack as untrack3 } from "@barefootjs/client/reactive";
 function makeRegion(scope) {
   if (scope.nodeType === Node.COMMENT_NODE) {
     const anchor = scope;
@@ -2645,7 +2873,7 @@ function normalizeTemplate(value) {
   return typeof value === "string" ? { html: value, slots: EMPTY_SLOTS } : value;
 }
 function evalBranchTemplate(branch) {
-  return untrack2(() => normalizeTemplate(branch.template()));
+  return untrack3(() => normalizeTemplate(branch.template()));
 }
 function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
   if (!scope)
@@ -2671,7 +2899,7 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
   }
   let prevCond;
   let branchCleanup = null;
-  createEffect3(() => {
+  createEffect4(() => {
     let currCond;
     try {
       currCond = Boolean(conditionFn());
@@ -2914,26 +3142,6 @@ function __bfText(current, value) {
   }
   return textNode;
 }
-// src/runtime/client-marker.ts
-function updateClientMarker(scope, id, value) {
-  if (!scope)
-    return;
-  const marker = `bf-client:${id}`;
-  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-  while (walker.nextNode()) {
-    if (walker.currentNode.nodeValue === marker) {
-      const comment = walker.currentNode;
-      let textNode = comment.nextSibling;
-      if (textNode?.nodeType !== Node.TEXT_NODE || !textNode.nodeValue?.startsWith("​")) {
-        textNode = document.createTextNode("​" + String(value ?? ""));
-        comment.parentNode?.insertBefore(textNode, comment.nextSibling);
-      } else {
-        textNode.nodeValue = "​" + String(value ?? "");
-      }
-      return;
-    }
-  }
-}
 // src/runtime/render.ts
 function render(container, nameOrDef, props = {}) {
   let name;
@@ -3014,9 +3222,9 @@ export {
   useContext,
   upsertChildItem,
   upsertChild,
-  updateClientMarker,
   unwrap,
-  untrack3 as untrack,
+  untrack4 as untrack,
+  textOrNode,
   textNodeAfterComment as tAfter,
   styleToCss,
   spreadAttrs,
@@ -3030,21 +3238,21 @@ export {
   rehydrateAll,
   registerTemplate,
   registerComponent,
-  reconcileList,
-  reconcileElements,
   queryHref,
   qsaItem,
   qsaChildScopes,
   qsaChildScope,
   qsa,
   provideContext,
-  patchSlotRange,
   patchLeaf,
   parseHTML,
   onMount,
   onCleanup,
+  mapArrayLazy,
   mapArrayAnchored,
   mapArray,
+  lazySlots,
+  lazyClaimSlots,
   isSSRPortal,
   insert,
   initChild,
@@ -3053,10 +3261,8 @@ export {
   hasTemplate,
   getTemplate,
   getRegisteredDef,
-  getPropsUpdateFn,
   getLoopNodes,
   getLoopChildren,
-  getComponentProps,
   getComponentInit,
   forwardProps,
   formatDate,
@@ -3064,24 +3270,26 @@ export {
   findSiblingSlot,
   findScope,
   find,
+  escapeTextOrNode,
   escapeText,
   escapeAttr,
   endTurn,
   disposeScope,
   date,
   cssEscape,
-  createSignal2 as createSignal,
+  createSignal3 as createSignal,
   createSelector,
   createSearchParams,
   createRoot3 as createRoot,
   createRecordingSink,
   createPortal,
   createMemo,
-  createEffect4 as createEffect,
+  createEffect5 as createEffect,
   createDisposableEffect,
   createContext,
   createComponent,
   cleanupPortalPlaceholder,
+  claimSlots,
   beginTurn,
   batch,
   applyRestAttrs,