@barefootjs/client 0.4.0 → 0.5.1

package/dist/runtime/component.d.ts

@@ -43,7 +43,7 @@ export interface CreateComponentSlotInfo {
     /** Slot id in the host (this child's `bf-m` value). */
     mount: string;
 }
-export declare function createComponent(nameOrDef: string | ComponentDef, props: Record<string, unknown>, key?: string | number, slot?: CreateComponentSlotInfo): HTMLElement;
+export declare function createComponent(nameOrDef: string | ComponentDef, props?: Record<string, unknown>, key?: string | number, slot?: CreateComponentSlotInfo): HTMLElement;
 /**
  * Get the props stored for a component element.
  * Used by reconcileList to pass props to an existing element.

package/dist/runtime/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAS3C,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAExD;AAWD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;;;GAGG;AACH;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,IAAI,CAAC,EAAE,uBAAuB,GAC7B,WAAW,CAoIb;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAE3F;AAuBD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAE7G;AAGD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CAiDR;AA+DD;;;;;GAKG;AACH;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAcjF"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/runtime/component.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAS3C,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAExD;AAWD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;;;GAGG;AACH;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACnC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,IAAI,CAAC,EAAE,uBAAuB,GAC7B,WAAW,CAyIb;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAE3F;AAuBD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAE7G;AAGD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CAiDR;AA+DD;;;;;GAKG;AACH;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEjD;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAcjF"}

package/dist/runtime/dynamic-text.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Dynamic text/JSX slot updater (#1663).
+ *
+ * The compiler wraps reactive child expressions (`<div>{expr}</div>`) in a
+ * `createEffect` that writes the value into the text node sitting between
+ * the slot's `<!--bf:sX-->` / `<!--/-->` comment markers. That was a pure
+ * `nodeValue = String(value)` assignment, which is correct for primitives
+ * but destroys a live `Node` — e.g. when `expr` is a JSX-returning call such
+ * as `{themeLogo(id)}` / `{LOGOS[id]()}` whose value is the `HTMLElement`
+ * returned by `createComponent`. Stringifying it produced
+ * `"[object HTMLElement]"` (and clobbered the server-rendered subtree).
+ *
+ * `__bfText` mirrors `__bfSlot` (the branch-template equivalent): when the
+ * value is a `Node`, it replaces the slot region with that node by identity;
+ * otherwise it behaves exactly like the previous text assignment. It returns
+ * the node that now occupies the slot so the caller can track it across
+ * reactive re-runs (the previous node is detached once replaced).
+ */
+export declare function __bfText(current: Node | null, value: unknown): Node | null;
+//# sourceMappingURL=dynamic-text.d.ts.map

package/dist/runtime/dynamic-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-text.d.ts","sourceRoot":"","sources":["../../src/runtime/dynamic-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AA4BH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CA0C1E"}

package/dist/runtime/index.d.ts

@@ -8,7 +8,7 @@ export { createPortal, isSSRPortal, findSiblingSlot, cleanupPortalPlaceholder, t
 export { reconcileList, type RenderItemFn } from './list';
 export { reconcileElements, getLoopChildren, getLoopNodes } from './reconcile-elements';
 export { qsaItem, upsertChildItem } from './qsa-item';
-export { mapArray } from './map-array';
+export { mapArray, mapArrayAnchored } from './map-array';
 export { registerTemplate, getTemplate, hasTemplate, type TemplateFn } from './template';
 export { createComponent, renderChild, getPropsUpdateFn, getComponentProps, parseHTML, } from './component';
 export { applyRestAttrs } from './apply-rest-attrs';
@@ -19,6 +19,7 @@ export { hydrate, rehydrateAll, flushHydration, getRegisteredDef } from './hydra
 export { registerComponent, getComponentInit, initChild, upsertChild } from './registry';
 export { insert, type BranchConfig, type BranchTemplateResult } from './insert';
 export { __bfSlot } from './branch-slot';
+export { __bfText } from './dynamic-text';
 export { updateClientMarker } from './client-marker';
 export { hydratedScopes } from './hydration-state';
 export { render } from './render';

package/dist/runtime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,EACP,OAAO,EACP,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,QAAQ,GACd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAIlC,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,OAAO,GACb,MAAM,WAAW,CAAA;AAGlB,OAAO,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACvF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAGtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAGxF,OAAO,EACL,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,GACV,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnG,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxF,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGvD,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,EACP,OAAO,EACP,KAAK,EACL,KAAK,QAAQ,EACb,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,QAAQ,GACd,MAAM,6BAA6B,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAIlC,OAAO,EACL,aAAa,EACb,UAAU,EACV,cAAc,EACd,eAAe,EACf,KAAK,OAAO,GACb,MAAM,WAAW,CAAA;AAGlB,OAAO,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACvF,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAGxD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAGxF,OAAO,EACL,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,SAAS,GACV,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnG,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACnF,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxF,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGvD,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA"}

package/dist/runtime/index.js

@@ -113,6 +113,9 @@ var BF_SCOPE_COMMENT_PREFIX = "bf-scope:";
 var BF_LOOP_START = "bf-loop";
 var BF_LOOP_END = "bf-/loop";
 var BF_LOOP_ITEM = "bf-loop-i";
+function loopItemMarker(key) {
+  return `${BF_LOOP_ITEM}:${key}`;
+}
 function loopStartMarker(markerId) {
   return `${BF_LOOP_START}:${markerId}`;
 }
@@ -361,10 +364,18 @@ function getPortalScopeId(element) {
   return info?.scopeId ?? null;
 }
 function getCommentScopeBoundary(commentNode) {
+  const isLoopItem = commentNode.nodeValue?.startsWith(`${BF_LOOP_ITEM}:`) ?? false;
   let node = commentNode.nextSibling;
   while (node) {
-    if (node.nodeType === Node.COMMENT_NODE && node.nodeValue?.startsWith(BF_SCOPE_COMMENT_PREFIX)) {
-      return node;
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const value = node.nodeValue ?? "";
+      if (isLoopItem) {
+        if (value.startsWith(`${BF_LOOP_ITEM}:`) || value.startsWith(`${BF_LOOP_END}:`)) {
+          return node;
+        }
+      } else if (value.startsWith(BF_SCOPE_COMMENT_PREFIX)) {
+        return node;
+      }
     }
     node = node.nextSibling;
   }
@@ -941,7 +952,9 @@ function setParentScopeId(id) {
 }
 var propsUpdateMap = new WeakMap;
 var propsMap = new WeakMap;
-function createComponent(nameOrDef, props, key, slot) {
+function createComponent(nameOrDef, props = {}, key, slot) {
+  if (props == null)
+    props = {};
   if (typeof nameOrDef !== "string") {
     return createComponentFromDef(nameOrDef, props, key);
   }
@@ -1726,6 +1739,150 @@ function mapArray(accessor, container, getKey, renderItem, markerId) {
     }
   });
 }
+var ITEM_PREFIX = `${BF_LOOP_ITEM}:`;
+function isItemAnchor(node) {
+  return node.nodeType === Node.COMMENT_NODE && (node.nodeValue ?? "").startsWith(ITEM_PREFIX);
+}
+function collectAnchorRange(anchor, end) {
+  const nodes = [anchor];
+  let node = anchor.nextSibling;
+  while (node && node !== end) {
+    if (isItemAnchor(node))
+      break;
+    nodes.push(node);
+    node = node.nextSibling;
+  }
+  return nodes;
+}
+function findItemAnchors(start, end) {
+  const anchors = [];
+  let node = start.nextSibling;
+  while (node && node !== end) {
+    if (isItemAnchor(node))
+      anchors.push(node);
+    node = node.nextSibling;
+  }
+  return anchors;
+}
+function placeAnchorScope(scope, container, before, end) {
+  if (scope.pending) {
+    container.insertBefore(scope.pending, before);
+    scope.pending = null;
+    return;
+  }
+  for (const node of collectAnchorRange(scope.anchor, end)) {
+    container.insertBefore(node, before);
+  }
+}
+function removeAnchorScope(scope, end) {
+  for (const node of collectAnchorRange(scope.anchor, end)) {
+    node.parentNode?.removeChild(node);
+  }
+}
+function createAnchorScope(item, index, key, renderItem, existingAnchor) {
+  let dispose;
+  let setItem;
+  let returned;
+  createRoot((d) => {
+    dispose = d;
+    const [itemAccessor, itemSetter] = createSignal(item);
+    setItem = itemSetter;
+    returned = renderItem(itemAccessor, index, existingAnchor);
+    return;
+  });
+  if (existingAnchor) {
+    return { anchor: existingAnchor, pending: null, dispose, setItem };
+  }
+  const frag = returned;
+  const anchor = frag.firstChild;
+  if (anchor && !anchor.nodeValue?.startsWith(ITEM_PREFIX)) {
+    anchor.nodeValue = loopItemMarker(key);
+  }
+  return { anchor, pending: frag, dispose, setItem };
+}
+function mapArrayAnchored(accessor, container, getKey, renderItem, markerId) {
+  if (!container)
+    return;
+  const scopes = new Map;
+  let hydrated = false;
+  createEffect(() => {
+    const items = accessor();
+    if (!items)
+      return;
+    const { start, end } = findLoopMarkers2(container, markerId);
+    if (!start || !end)
+      return;
+    if (!hydrated) {
+      hydrated = true;
+      const existing = findItemAnchors(start, end);
+      if (existing.length > 0 && scopes.size === 0) {
+        for (let i = 0;i < existing.length && i < items.length; i++) {
+          const item = items[i];
+          const key = getKey ? getKey(item, i) : String(i);
+          scopes.set(key, createAnchorScope(item, i, key, renderItem, existing[i]));
+        }
+        for (let i = existing.length;i < items.length; i++) {
+          const item = items[i];
+          const key = getKey ? getKey(item, i) : String(i);
+          const scope = createAnchorScope(item, i, key, renderItem);
+          scopes.set(key, scope);
+          placeAnchorScope(scope, container, end, end);
+        }
+        for (let i = items.length;i < existing.length; i++) {
+          for (const node of collectAnchorRange(existing[i], end)) {
+            node.parentNode?.removeChild(node);
+          }
+        }
+        return;
+      }
+    }
+    const newKeys = new Set;
+    const warnedKeys = new Set;
+    const desiredOrder = [];
+    for (let i = 0;i < items.length; i++) {
+      const item = items[i];
+      const key = getKey ? getKey(item, i) : String(i);
+      if (newKeys.has(key) && !warnedKeys.has(key)) {
+        warnedKeys.add(key);
+        console.warn(`[BarefootJS] mapArrayAnchored: duplicate key "${key}" — items with this key collapse to a ` + `single DOM scope, so only the last one renders. Use a per-item identifier (e.g. \`key={item.id}\`).`);
+      }
+      newKeys.add(key);
+      const existing = scopes.get(key);
+      if (existing) {
+        existing.setItem(item);
+        desiredOrder.push(existing);
+      } else {
+        const scope = createAnchorScope(item, i, key, renderItem);
+        scopes.set(key, scope);
+        desiredOrder.push(scope);
+      }
+    }
+    for (const [key, scope] of scopes) {
+      if (!newKeys.has(key)) {
+        scope.dispose();
+        removeAnchorScope(scope, end);
+        scopes.delete(key);
+      }
+    }
+    let inOrder = true;
+    const domAnchors = findItemAnchors(start, end);
+    if (domAnchors.length !== desiredOrder.length) {
+      inOrder = false;
+    } else {
+      for (let i = 0;i < desiredOrder.length; i++) {
+        if (domAnchors[i] !== desiredOrder[i].anchor) {
+          inOrder = false;
+          break;
+        }
+      }
+    }
+    if (!inOrder) {
+      for (const scope of desiredOrder) {
+        placeAnchorScope(scope, container, end, end);
+      }
+    }
+  });
+}
 // src/runtime/apply-rest-attrs.ts
 import { createEffect as createEffect2 } from "@barefootjs/client/reactive";
 
@@ -1834,6 +1991,55 @@ function spreadAttrs(obj) {
 }
 // src/runtime/insert.ts
 import { createEffect as createEffect3, untrack as untrack2 } from "@barefootjs/client/reactive";
+function makeRegion(scope) {
+  if (scope.nodeType === Node.COMMENT_NODE) {
+    const anchor = scope;
+    const parentEl = anchor.parentElement;
+    const componentScope = parentEl?.closest(`[${BF_SCOPE}]`) ?? null;
+    const parentScopeId = componentScope?.getAttribute(BF_SCOPE) ?? null;
+    const proxyEl = document.createElement("bf-loop-item");
+    commentScopeRegistry.set(proxyEl, { commentNode: anchor, scopeId: parentScopeId ?? "" });
+    return { anchor, bindScope: proxyEl, parentScopeId };
+  }
+  const el = scope;
+  return { anchor: null, bindScope: el, parentScopeId: el.getAttribute(BF_SCOPE) };
+}
+function findCondElInRange(anchor, id) {
+  const sel = `[${BF_COND}="${id}"]`;
+  const boundary = getCommentScopeBoundary(anchor);
+  let node = anchor.nextSibling;
+  while (node && node !== boundary) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node;
+      if (el.matches?.(sel))
+        return el;
+      const inner = el.querySelector(sel);
+      if (inner)
+        return inner;
+    }
+    node = node.nextSibling;
+  }
+  return null;
+}
+function findCondStartInRange(anchor, id) {
+  const want = `bf-cond-start:${id}`;
+  const boundary = getCommentScopeBoundary(anchor);
+  let node = anchor.nextSibling;
+  while (node && node !== boundary) {
+    if (node.nodeType === Node.COMMENT_NODE && node.nodeValue === want) {
+      return node;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const w = document.createTreeWalker(node, NodeFilter.SHOW_COMMENT);
+      while (w.nextNode()) {
+        if (w.currentNode.nodeValue === want)
+          return w.currentNode;
+      }
+    }
+    node = node.nextSibling;
+  }
+  return null;
+}
 var EMPTY_SLOTS = [];
 function normalizeTemplate(value) {
   return typeof value === "string" ? { html: value, slots: EMPTY_SLOTS } : value;
@@ -1844,7 +2050,8 @@ function evalBranchTemplate(branch) {
 function insert(scope, id, conditionFn, whenTrue, whenFalse) {
   if (!scope)
     return;
-  const parentScopeId = scope.getAttribute(BF_SCOPE);
+  const region = makeRegion(scope);
+  const parentScopeId = region.parentScopeId;
   let isFragmentCond = false;
   try {
     const sampleTrue = evalBranchTemplate(whenTrue);
@@ -1887,23 +2094,23 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse) {
       } finally {
         setParentScopeId(null);
       }
-      const existingEl = find(scope, `[${BF_COND}="${id}"]`);
+      const existingEl = region.anchor ? findCondElInRange(region.anchor, id) : find(region.bindScope, `[${BF_COND}="${id}"]`);
       if (existingEl) {
         const expectedSig = getTemplateRootSignature(result2.html);
         const existingSig = existingEl.outerHTML.match(/^<[^>]+>/)?.[0] ?? null;
         if (isFragmentCond && (!expectedSig || existingSig !== expectedSig)) {
-          updateFragmentConditional(scope, id, result2);
+          updateFragmentConditional(region, id, result2);
         } else if (!isFragmentCond && expectedSig && existingSig && expectedSig !== existingSig) {
-          updateElementConditional(scope, id, result2);
+          updateElementConditional(region, id, result2);
         } else if (result2.slots.length > 0) {
-          updateElementConditional(scope, id, result2);
+          updateElementConditional(region, id, result2);
         }
       } else if (isFragmentCond) {
-        updateFragmentConditional(scope, id, result2);
+        updateFragmentConditional(region, id, result2);
       }
-      const cleanup2 = branch.bindEvents(scope, { isFirstRun: true });
+      const cleanup2 = branch.bindEvents(region.bindScope, { isFirstRun: true });
       branchCleanup = typeof cleanup2 === "function" ? cleanup2 : null;
-      autoFocusConditionalElement(scope, id);
+      autoFocusConditionalElement(region, id);
       return;
     }
     if (currCond === prevVal) {
@@ -1921,18 +2128,18 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse) {
       setParentScopeId(null);
     }
     if (isFragmentCond) {
-      updateFragmentConditional(scope, id, result);
+      updateFragmentConditional(region, id, result);
     } else {
-      updateElementConditional(scope, id, result);
+      updateElementConditional(region, id, result);
     }
-    const cleanup = branch.bindEvents(scope, { isFirstRun: false });
+    const cleanup = branch.bindEvents(region.bindScope, { isFirstRun: false });
     branchCleanup = typeof cleanup === "function" ? cleanup : null;
-    autoFocusConditionalElement(scope, id);
+    autoFocusConditionalElement(region, id);
   });
 }
-function autoFocusConditionalElement(scope, id) {
+function autoFocusConditionalElement(region, id) {
   requestAnimationFrame(() => {
-    const condEl = scope.querySelector(`[${BF_COND}="${id}"]`);
+    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
     if (condEl) {
       const autofocusEl = condEl.matches("[autofocus]") ? condEl : condEl.querySelector("[autofocus]");
       if (autofocusEl && typeof autofocusEl.focus === "function") {
@@ -1965,18 +2172,23 @@ function spliceSlots(fragment, slots) {
   }
   return fragment;
 }
-function updateFragmentConditional(scope, id, result) {
+function updateFragmentConditional(region, id, result) {
   const { html, slots } = result;
+  const scope = region.bindScope;
   const startMarker = `bf-cond-start:${id}`;
   let startComment = null;
-  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
-  while (walker.nextNode()) {
-    if (walker.currentNode.nodeValue === startMarker) {
-      startComment = walker.currentNode;
-      break;
+  if (region.anchor) {
+    startComment = findCondStartInRange(region.anchor, id);
+  } else {
+    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_COMMENT);
+    while (walker.nextNode()) {
+      if (walker.currentNode.nodeValue === startMarker) {
+        startComment = walker.currentNode;
+        break;
+      }
     }
   }
-  const condEl = scope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : scope.querySelector(`[${BF_COND}="${id}"]`);
   const endMarker = `bf-cond-end:${id}`;
   if (startComment) {
     const nodesToRemove = [];
@@ -2015,8 +2227,8 @@ function updateFragmentConditional(scope, id, result) {
     }
   }
 }
-function updateElementConditional(scope, id, result) {
-  const condEl = scope.querySelector(`[${BF_COND}="${id}"]`);
+function updateElementConditional(region, id, result) {
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
   if (!condEl)
     return;
   const { html, slots } = result;
@@ -2041,6 +2253,58 @@ function __bfSlot(value, slots) {
   }
   return String(value);
 }
+// src/runtime/dynamic-text.ts
+var END_MARKER = "/";
+function clearSlotRegion(start, keep) {
+  let n = start.nextSibling;
+  while (n && !(n.nodeType === Node.COMMENT_NODE && n.nodeValue === END_MARKER)) {
+    const next = n.nextSibling;
+    if (n !== keep)
+      n.parentNode?.removeChild(n);
+    n = next;
+  }
+}
+function slotStart(node) {
+  let n = node.previousSibling;
+  while (n && n.nodeType !== Node.COMMENT_NODE)
+    n = n.previousSibling;
+  return n;
+}
+function __bfText(current, value) {
+  if (!current)
+    return current;
+  if (value != null && value.__isSlot)
+    return current;
+  if (typeof Node !== "undefined" && value instanceof Node) {
+    if (value === current)
+      return current;
+    const start2 = current.previousSibling;
+    if (start2 && start2.nodeType === Node.COMMENT_NODE) {
+      clearSlotRegion(start2);
+      start2.parentNode?.insertBefore(value, start2.nextSibling);
+      return value;
+    }
+    current.parentNode?.replaceChild(value, current);
+    return value;
+  }
+  const text = String(value ?? "");
+  if (current.nodeType === Node.TEXT_NODE) {
+    current.nodeValue = text;
+    const start2 = slotStart(current);
+    if (start2 && start2.nodeType === Node.COMMENT_NODE)
+      clearSlotRegion(start2, current);
+    return current;
+  }
+  const start = current.previousSibling;
+  const textNode = (current.ownerDocument ?? document).createTextNode(text);
+  if (start && start.nodeType === Node.COMMENT_NODE) {
+    clearSlotRegion(start);
+    start.parentNode?.insertBefore(textNode, start.nextSibling);
+  } else {
+    current.parentNode?.replaceChild(textNode, current);
+  }
+  return textNode;
+}
 // src/runtime/client-marker.ts
 function updateClientMarker(scope, id, value) {
   if (!scope)
@@ -2161,6 +2425,7 @@ export {
   parseHTML,
   onMount,
   onCleanup,
+  mapArrayAnchored,
   mapArray,
   isSSRPortal,
   insert,
@@ -2194,6 +2459,7 @@ export {
   applyRestAttrs,
   __slot,
   __bf_swap,
+  __bfText,
   __bfSlot,
   $t,
   $c,

package/dist/runtime/insert.d.ts

@@ -71,5 +71,5 @@ export interface BranchConfig {
  * @param whenTrue - Branch config for when condition is true
  * @param whenFalse - Branch config for when condition is false
  */
-export declare function insert(scope: Element | null, id: string, conditionFn: () => boolean, whenTrue: BranchConfig, whenFalse: BranchConfig): void;
+export declare function insert(scope: Element | Comment | null, id: string, conditionFn: () => boolean, whenTrue: BranchConfig, whenFalse: BranchConfig): void;
 //# sourceMappingURL=insert.d.ts.map

package/dist/runtime/insert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"insert.d.ts","sourceRoot":"","sources":["../../src/runtime/insert.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,EAAE,CAAA;CACd;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,QAAQ,EAAE,MAAM,MAAM,GAAG,oBAAoB,CAAA;IAE7C;;;;;;OAMG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAA;CACrF;AAyBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CACpB,KAAK,EAAE,OAAO,GAAG,IAAI,EACrB,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,MAAM,OAAO,EAC1B,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,YAAY,GACtB,IAAI,CAsIN"}
+{"version":3,"file":"insert.d.ts","sourceRoot":"","sources":["../../src/runtime/insert.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAmFH;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,EAAE,CAAA;CACd;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,QAAQ,EAAE,MAAM,MAAM,GAAG,oBAAoB,CAAA;IAE7C;;;;;;OAMG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAA;CACrF;AAyBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CACpB,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,EAC/B,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,MAAM,OAAO,EAC1B,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,YAAY,GACtB,IAAI,CA+IN"}

package/dist/runtime/map-array.d.ts

@@ -29,4 +29,13 @@
  *                     When `existing` is undefined, creates a new element and returns it.
  */
 export declare function mapArray<T>(accessor: () => T[], container: HTMLElement | null, getKey: ((item: T, index: number) => string) | null, renderItem: (item: () => T, index: number, existing?: HTMLElement) => HTMLElement, markerId?: string): void;
+/**
+ * Per-item scoped list rendering for whole-item conditionals (#1665).
+ *
+ * Same call shape as `mapArray`, but `renderItem` returns a `DocumentFragment`
+ * (CSR, first child = `bf-loop-i:KEY` anchor) or the existing anchor Comment
+ * (hydration). Items may render zero elements; the anchor is the stable
+ * identity and position.
+ */
+export declare function mapArrayAnchored<T>(accessor: () => T[], container: HTMLElement | null, getKey: ((item: T, index: number) => string) | null, renderItem: (item: () => T, index: number, existing?: Comment) => DocumentFragment | Comment, markerId?: string): void;
 //# sourceMappingURL=map-array.d.ts.map

package/dist/runtime/map-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"map-array.d.ts","sourceRoot":"","sources":["../../src/runtime/map-array.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AA4LH;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,KAAK,WAAW,EACjF,QAAQ,CAAC,EAAE,MAAM,GAChB,IAAI,CAwKN"}
+{"version":3,"file":"map-array.d.ts","sourceRoot":"","sources":["../../src/runtime/map-array.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AA6LH;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,KAAK,WAAW,EACjF,QAAQ,CAAC,EAAE,MAAM,GAChB,IAAI,CAwKN;AAqHD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,QAAQ,EAAE,MAAM,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,EACnD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,gBAAgB,GAAG,OAAO,EAC5F,QAAQ,CAAC,EAAE,MAAM,GAChB,IAAI,CA+FN"}

package/dist/runtime/scope.d.ts

@@ -22,7 +22,13 @@ export declare const commentScopeRegistry: WeakMap<Element, CommentScopeInfo>;
 export declare function getPortalScopeId(element: Element): string | null;
 /**
  * Find the end boundary for a comment-based scope.
- * The boundary is the next bf-scope: comment or the end of the parent's children.
+ *
+ * The boundary depends on the anchor's kind:
+ *  - `bf-scope:` anchor (fragment-root component): boundary is the next
+ *    `bf-scope:` comment or the end of the parent's children (unchanged).
+ *  - `bf-loop-i:<key>` anchor (loop item, #1665): boundary is the next
+ *    loop-item anchor (`bf-loop-i:*`) or the loop end marker (`bf-/loop:*`),
+ *    so one item's range never bleeds into the next item or past the loop.
  */
 export declare function getCommentScopeBoundary(commentNode: Comment): Node | null;
 //# sourceMappingURL=scope.d.ts.map

package/dist/runtime/scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../src/runtime/scope.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,oCAA2C,CAAA;AAE5E;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAGhE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAUzE"}
+{"version":3,"file":"scope.d.ts","sourceRoot":"","sources":["../../src/runtime/scope.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,oCAA2C,CAAA;AAE5E;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAGhE;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAiBzE"}