@barefootjs/client 0.21.2 → 0.21.4

package/dist/runtime/index.js

@@ -656,6 +656,21 @@ function isInsideNestedCommentScope(element, scope) {
   }
   return false;
 }
+function isInsideNestedChildScope(element, root) {
+  let current = element;
+  while (current !== root) {
+    const parent = current.parentNode;
+    if (!parent)
+      return false;
+    if (parent !== root && parent.nodeType === Node.ELEMENT_NODE && parent.hasAttribute(BF_SCOPE)) {
+      return true;
+    }
+    if (isTopLevelCommentScopeNode(current))
+      return true;
+    current = parent;
+  }
+  return false;
+}
 function isTopLevelCommentScopeNode(node) {
   const parent = node.parentNode;
   if (!parent)
@@ -712,6 +727,20 @@ function find(scope, selector, ignoreScope) {
     return findInPortals(scopeId, selector);
   return null;
 }
+function findCondTarget(scope, selector) {
+  const commentInfo = commentScopeRegistry.get(scope);
+  if (!commentInfo) {
+    return scope.querySelector(selector);
+  }
+  for (const candidate of candidatesInScope(scope, selector)) {
+    if (candidate.parentElement === commentInfo.commentNode.parentElement)
+      return candidate;
+    const nearestScope = candidate.closest(`[${BF_SCOPE}]`);
+    if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode))
+      return candidate;
+  }
+  return null;
+}
 function findInPortals(scopeId, selector) {
   const portals = document.querySelectorAll(`[${BF_PORTAL_OWNER}="${scopeId}"]`);
   for (const portal of portals) {
@@ -746,7 +775,14 @@ function qsa(el, selector) {
   }
   if (el.matches(selector))
     return el;
-  return el.querySelector(selector);
+  const first = el.querySelector(selector);
+  if (!first || !isInsideNestedChildScope(first, el))
+    return first;
+  for (const candidate of el.querySelectorAll(selector)) {
+    if (candidate !== first && !isInsideNestedChildScope(candidate, el))
+      return candidate;
+  }
+  return null;
 }
 function splitTopLevelCommas(selector) {
   const out = [];
@@ -2531,7 +2567,7 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
 }
 function autoFocusConditionalElement(region, id) {
   requestAnimationFrame(() => {
-    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
     if (condEl) {
       const autofocusEl = condEl.matches("[autofocus]") ? condEl : condEl.querySelector("[autofocus]");
       if (autofocusEl && typeof autofocusEl.focus === "function") {
@@ -2572,15 +2608,14 @@ function updateFragmentConditional(region, id, result) {
   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;
+    for (const comment of commentsInScope(scope)) {
+      if (comment.nodeValue === startMarker) {
+        startComment = comment;
         break;
       }
     }
   }
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : scope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(scope, `[${BF_COND}="${id}"]`);
   const endMarker = `bf-cond-end:${id}`;
   if (startComment) {
     const nodesToRemove = [];
@@ -2620,7 +2655,7 @@ function updateFragmentConditional(region, id, result) {
   }
 }
 function updateElementConditional(region, id, result) {
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
   if (!condEl)
     return;
   const { html, slots } = result;

package/dist/runtime/query.d.ts

@@ -30,11 +30,43 @@ export declare function findScope(name: string, idx: number, parent: Element | D
  * @returns The matching element or null
  */
 export declare function find(scope: Element | null, selector: string, ignoreScope?: boolean): Element | null;
+/**
+ * Find a conditional's own target (a `bf-c="id"` element, for `insert.ts`)
+ * within `scope`'s content range.
+ *
+ * Deliberately narrower than `find()`: for a regular (non-comment) scope,
+ * this is a **plain, unfiltered** `scope.querySelector(selector)` — not
+ * `find()`'s `belongsToScope`-gated search. `belongsToScope` accepts a
+ * candidate only if `candidate.closest('[bf-s]')` is *exactly* `scope` —
+ * which can never hold when `scope` itself carries no `bf-s`. That's the
+ * common case for `insert()`'s `region.bindScope`: a `mapArray` loop item's
+ * cloned template root (e.g. a `.comment-item` `<div>`) is keyed by
+ * `data-key` for reconciliation, not given its own `bf-s`, so any `bf-c`
+ * conditional inside that item would be rejected outright by
+ * `belongsToScope` — not because of any nested-child-scope subtlety, just
+ * because `scope` itself isn't `bf-s`-addressable. Using `find()` here
+ * previously broke exactly that shape (piconic-ai/barefootjs#2313's first
+ * attempt, caught by the `site/ui` e2e suite's `SocialThreadDemo`
+ * comment-editing test — a per-comment `editing` conditional inside a
+ * `sortedComments().map(...)` loop item with no `bf-s` of its own).
+ *
+ * A comment-scope proxy (fragment-root component) still gets the
+ * comment-range-bounded, nested-fragment-excluding search — the same rule
+ * `find()`'s comment branch uses — since that IS what's needed to walk past
+ * a fragment-root's own top-level siblings correctly (#2312).
+ */
+export declare function findCondTarget(scope: Element, selector: string): Element | null;
 /**
  * Find an element matching a selector, checking the element itself first,
  * then its descendants. Unlike querySelector() which only searches descendants,
  * this also matches the root element.
  *
+ * Descendant candidates that fall inside a nested child component's own
+ * scope are skipped (`isInsideNestedChildScope`) — compiler slot IDs
+ * (`bf="sN"`) are assigned independently per component file, so a slot
+ * number can coincidentally collide between `el`'s own template and a
+ * child component mounted somewhere inside it (#2316).
+ *
  * Used by compiler-generated code for event binding and attribute updates
  * on loop items where the target may be the loop item's root element itself.
  */
@@ -98,6 +130,22 @@ export declare function $c(scope: Element | null, ...ids: string[]): (Element |
  * walker-owned root fragments.
  */
 export declare function findCommentChildScope(scope: Element, parentIds: readonly string[], slotId: string): Element | null;
+/**
+ * Enumerate comment nodes in a scope's DOM range: the comment-scope
+ * sibling range for comment-anchored scopes, the element subtree
+ * otherwise. Mirrors candidatesInScope's notion of "where the scope's
+ * content lives", but yields comments instead of elements.
+ *
+ * Exported for `insert.ts`'s branch-swap path (`updateFragmentConditional`),
+ * which otherwise walked `scope`'s own descendants with a bare
+ * `document.createTreeWalker` — never finding a conditional's
+ * `bf-cond-start:`/`bf-cond-end:` markers when they sit as a *sibling* of
+ * the scope's comment-scope proxy rather than nested inside it (true for
+ * any fragment-root component's own top-level conditional, since the proxy
+ * is one specific top-level element and the conditional's markers may be
+ * others). See piconic-ai/sora's `ListSidebar` for the real-world repro.
+ */
+export declare function commentsInScope(scope: Element): Generator<Comment>;
 /**
  * Find Text nodes for reactive text expressions marked by comment nodes.
  * Expects marker format: <!--bf:sX-->text<!--/-->

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

@@ -1 +1 @@
-{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../src/runtime/query.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAGJ,CAAA;AAqCnC;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,EACjC,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,GAAG,IAAI,CAoDhB;AAiLD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAClB,KAAK,EAAE,OAAO,GAAG,IAAI,EACrB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,OAAO,GACpB,OAAO,GAAG,IAAI,CAiChB;AAuBD;;;;;;;GAOG;AACH,wBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0BxE;AA+CD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAU9E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,CAO1E;AAED;;;;;;;;GAQG;AACH,wBAAgB,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAO7E;AAED;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAE9E;AAkDD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,MAAM,EAAE,MAAM,GACb,OAAO,GAAG,IAAI,CAehB;AAmFD;;;;;;;GAOG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAkC3E;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAS3D;AAED,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,CAAA"}
+{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../src/runtime/query.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAGJ,CAAA;AAqCnC;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,EACjC,OAAO,CAAC,EAAE,OAAO,GAChB,OAAO,GAAG,IAAI,CAoDhB;AA2ND;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAClB,KAAK,EAAE,OAAO,GAAG,IAAI,EACrB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,OAAO,GACpB,OAAO,GAAG,IAAI,CAiChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAW/E;AAuBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAsCxE;AA+CD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAU9E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE,CAO1E;AAED;;;;;;;;GAQG;AACH,wBAAgB,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAO7E;AAED;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAE9E;AAkDD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,MAAM,EAAE,MAAM,GACb,OAAO,GAAG,IAAI,CAehB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAiB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAkBnE;AAyDD;;;;;;;GAOG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAkC3E;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAS3D;AAED,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,CAAA"}

package/dist/runtime/standalone.js

@@ -1064,6 +1064,21 @@ function isInsideNestedCommentScope(element, scope) {
   }
   return false;
 }
+function isInsideNestedChildScope(element, root) {
+  let current = element;
+  while (current !== root) {
+    const parent = current.parentNode;
+    if (!parent)
+      return false;
+    if (parent !== root && parent.nodeType === Node.ELEMENT_NODE && parent.hasAttribute(BF_SCOPE)) {
+      return true;
+    }
+    if (isTopLevelCommentScopeNode(current))
+      return true;
+    current = parent;
+  }
+  return false;
+}
 function isTopLevelCommentScopeNode(node) {
   const parent = node.parentNode;
   if (!parent)
@@ -1120,6 +1135,20 @@ function find(scope, selector, ignoreScope) {
     return findInPortals(scopeId, selector);
   return null;
 }
+function findCondTarget(scope, selector) {
+  const commentInfo = commentScopeRegistry.get(scope);
+  if (!commentInfo) {
+    return scope.querySelector(selector);
+  }
+  for (const candidate of candidatesInScope(scope, selector)) {
+    if (candidate.parentElement === commentInfo.commentNode.parentElement)
+      return candidate;
+    const nearestScope = candidate.closest(`[${BF_SCOPE}]`);
+    if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode))
+      return candidate;
+  }
+  return null;
+}
 function findInPortals(scopeId, selector) {
   const portals = document.querySelectorAll(`[${BF_PORTAL_OWNER}="${scopeId}"]`);
   for (const portal of portals) {
@@ -1154,7 +1183,14 @@ function qsa(el, selector) {
   }
   if (el.matches(selector))
     return el;
-  return el.querySelector(selector);
+  const first = el.querySelector(selector);
+  if (!first || !isInsideNestedChildScope(first, el))
+    return first;
+  for (const candidate of el.querySelectorAll(selector)) {
+    if (candidate !== first && !isInsideNestedChildScope(candidate, el))
+      return candidate;
+  }
+  return null;
 }
 function splitTopLevelCommas(selector) {
   const out = [];
@@ -2932,7 +2968,7 @@ function insert(scope, id, conditionFn, whenTrue, whenFalse, bfId) {
 }
 function autoFocusConditionalElement(region, id) {
   requestAnimationFrame(() => {
-    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+    const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
     if (condEl) {
       const autofocusEl = condEl.matches("[autofocus]") ? condEl : condEl.querySelector("[autofocus]");
       if (autofocusEl && typeof autofocusEl.focus === "function") {
@@ -2973,15 +3009,14 @@ function updateFragmentConditional(region, id, result) {
   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;
+    for (const comment of commentsInScope(scope)) {
+      if (comment.nodeValue === startMarker) {
+        startComment = comment;
         break;
       }
     }
   }
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : scope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(scope, `[${BF_COND}="${id}"]`);
   const endMarker = `bf-cond-end:${id}`;
   if (startComment) {
     const nodesToRemove = [];
@@ -3021,7 +3056,7 @@ function updateFragmentConditional(region, id, result) {
   }
 }
 function updateElementConditional(region, id, result) {
-  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : region.bindScope.querySelector(`[${BF_COND}="${id}"]`);
+  const condEl = region.anchor ? findCondElInRange(region.anchor, id) : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`);
   if (!condEl)
     return;
   const { html, slots } = result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.21.2",
+  "version": "0.21.4",
   "description": "BarefootJS client package: reactive primitives (SSR-safe) plus browser runtime under the `/runtime` subpath (compiler target)",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,7 +55,7 @@
     "directory": "packages/client"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.21.2"
+    "@barefootjs/shared": "0.21.4"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0"

package/src/runtime/insert.ts

@@ -7,7 +7,7 @@
  */
 
 import { createEffect, untrack } from '@barefootjs/client/reactive'
-import { find } from './query.ts'
+import { find, findCondTarget, commentsInScope } from './query.ts'
 import { setParentScopeId, parseHTML } from './component.ts'
 import { commentScopeRegistry, getCommentScopeBoundary } from './scope.ts'
 import { BF_COND, BF_SCOPE, BF_LOOP_ITEM } from '@barefootjs/shared'
@@ -342,7 +342,7 @@ function autoFocusConditionalElement(region: CondRegion, id: string): void {
   requestAnimationFrame(() => {
     const condEl = region.anchor
       ? findCondElInRange(region.anchor, id)
-      : region.bindScope.querySelector(`[${BF_COND}="${id}"]`)
+      : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`)
     if (condEl) {
       const autofocusEl = condEl.matches('[autofocus]')
         ? condEl
@@ -406,10 +406,15 @@ function updateFragmentConditional(region: CondRegion, id: string, result: Branc
   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 as Comment
+    // commentsInScope is comment-scope-aware: for a fragment-root
+    // component's scope (a comment-scope proxy element), it walks the
+    // proxy's *sibling* range rather than only `scope`'s own descendants —
+    // required when this conditional's markers are themselves a top-level
+    // sibling of the proxy, not nested inside it (a bare TreeWalker(scope)
+    // never finds them, silently freezing the branch after first render).
+    for (const comment of commentsInScope(scope)) {
+      if (comment.nodeValue === startMarker) {
+        startComment = comment
         break
       }
     }
@@ -417,7 +422,7 @@ function updateFragmentConditional(region: CondRegion, id: string, result: Branc
 
   const condEl = region.anchor
     ? findCondElInRange(region.anchor, id)
-    : scope.querySelector(`[${BF_COND}="${id}"]`)
+    : findCondTarget(scope, `[${BF_COND}="${id}"]`)
 
   const endMarker = `bf-cond-end:${id}`
 
@@ -486,9 +491,15 @@ function updateFragmentConditional(region: CondRegion, id: string, result: Branc
  * Update element conditional (single element with bf-c)
  */
 function updateElementConditional(region: CondRegion, id: string, result: BranchTemplateResult): void {
+  // findCondTarget, not find(): for a comment-scope proxy it resolves a
+  // top-level sibling conditional the same way first hydration does, but
+  // for a regular scope it's a plain scope.querySelector(...) — not
+  // find()'s belongsToScope-gated search, which requires scope itself to
+  // carry bf-s (a mapArray loop item's cloned root usually doesn't; see
+  // findCondTarget's doc comment in query.ts).
   const condEl = region.anchor
     ? findCondElInRange(region.anchor, id)
-    : region.bindScope.querySelector(`[${BF_COND}="${id}"]`)
+    : findCondTarget(region.bindScope, `[${BF_COND}="${id}"]`)
   if (!condEl) return
 
   const { html, slots } = result

package/src/runtime/query.ts

@@ -251,6 +251,48 @@ function isInsideNestedCommentScope(element: Element, scope: Element): boolean {
   return false
 }
 
+/**
+ * True if `element` sits inside a nested child component's own scope
+ * boundary somewhere on the path up to `root` — a plain `[bf-s]` element
+ * (a regular child component's root) or a fragment-rooted child's
+ * comment-scope range mounted as a sibling along that path.
+ *
+ * Generalizes `isInsideNestedCommentScope` (which only catches the
+ * comment-scope case) to also catch plain `bf-s` boundaries, for `qsa()`
+ * — the loose, unfiltered sibling of `find()`'s `belongsToScope`-gated
+ * search. Unlike `belongsToScope`, this walks up to `root` by object
+ * identity rather than requiring `root` itself to carry `bf-s`: `qsa()`'s
+ * roots include `insert()`'s whole-component branch scope (which does
+ * carry `bf-s`) but also loop-item template clones (which normally don't),
+ * so a `.closest('[bf-s]') === root` check can't be reused here.
+ *
+ * Without this, a slot number that happens to collide between a component
+ * and a nested child mounted earlier in its DOM (compiler slot IDs are
+ * assigned independently per component file, so collisions are expected)
+ * makes `qsa()` return the child's element instead of the component's own.
+ *
+ * Deliberately does NOT reject `element` itself for carrying `bf-s`
+ * (unlike `belongsToScope`'s own-scope check) — `qsa()` doubles as the
+ * lookup for a nested child component's *own* scope root (e.g. compiled
+ * `qsa(parentScope, '[bf-h="X"][bf-m="sN"], [bf-s$="_sN"]')` calls feeding
+ * `initChild()`), and that target legitimately carries `bf-s`. Only an
+ * *intermediate* `bf-s` between `element` and `root` — i.e. `element`
+ * nested inside some other, unrelated child scope — disqualifies it.
+ */
+function isInsideNestedChildScope(element: Element, root: Element): boolean {
+  let current: Node = element
+  while (current !== root) {
+    const parent: Node | null = current.parentNode
+    if (!parent) return false
+    if (parent !== root && parent.nodeType === Node.ELEMENT_NODE && (parent as Element).hasAttribute(BF_SCOPE)) {
+      return true
+    }
+    if (isTopLevelCommentScopeNode(current)) return true
+    current = parent
+  }
+  return false
+}
+
 /**
  * True if `node` falls inside a `<!--bf-scope:...-->` … `<!--bf-/scope:...-->`
  * range among its own siblings — i.e. `node` is (or is inside) a top-level
@@ -345,6 +387,44 @@ export function find(
   return null
 }
 
+/**
+ * Find a conditional's own target (a `bf-c="id"` element, for `insert.ts`)
+ * within `scope`'s content range.
+ *
+ * Deliberately narrower than `find()`: for a regular (non-comment) scope,
+ * this is a **plain, unfiltered** `scope.querySelector(selector)` — not
+ * `find()`'s `belongsToScope`-gated search. `belongsToScope` accepts a
+ * candidate only if `candidate.closest('[bf-s]')` is *exactly* `scope` —
+ * which can never hold when `scope` itself carries no `bf-s`. That's the
+ * common case for `insert()`'s `region.bindScope`: a `mapArray` loop item's
+ * cloned template root (e.g. a `.comment-item` `<div>`) is keyed by
+ * `data-key` for reconciliation, not given its own `bf-s`, so any `bf-c`
+ * conditional inside that item would be rejected outright by
+ * `belongsToScope` — not because of any nested-child-scope subtlety, just
+ * because `scope` itself isn't `bf-s`-addressable. Using `find()` here
+ * previously broke exactly that shape (piconic-ai/barefootjs#2313's first
+ * attempt, caught by the `site/ui` e2e suite's `SocialThreadDemo`
+ * comment-editing test — a per-comment `editing` conditional inside a
+ * `sortedComments().map(...)` loop item with no `bf-s` of its own).
+ *
+ * A comment-scope proxy (fragment-root component) still gets the
+ * comment-range-bounded, nested-fragment-excluding search — the same rule
+ * `find()`'s comment branch uses — since that IS what's needed to walk past
+ * a fragment-root's own top-level siblings correctly (#2312).
+ */
+export function findCondTarget(scope: Element, selector: string): Element | null {
+  const commentInfo = commentScopeRegistry.get(scope)
+  if (!commentInfo) {
+    return scope.querySelector(selector)
+  }
+  for (const candidate of candidatesInScope(scope, selector)) {
+    if (candidate.parentElement === commentInfo.commentNode.parentElement) return candidate
+    const nearestScope = candidate.closest(`[${BF_SCOPE}]`)
+    if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode)) return candidate
+  }
+  return null
+}
+
 /**
  * Search in portals owned by a scope.
  */
@@ -371,6 +451,12 @@ function findInPortals(scopeId: string, selector: string): Element | null {
  * then its descendants. Unlike querySelector() which only searches descendants,
  * this also matches the root element.
  *
+ * Descendant candidates that fall inside a nested child component's own
+ * scope are skipped (`isInsideNestedChildScope`) — compiler slot IDs
+ * (`bf="sN"`) are assigned independently per component file, so a slot
+ * number can coincidentally collide between `el`'s own template and a
+ * child component mounted somewhere inside it (#2316).
+ *
  * Used by compiler-generated code for event binding and attribute updates
  * on loop items where the target may be the loop item's root element itself.
  */
@@ -399,7 +485,19 @@ export function qsa(el: Element | null, selector: string): Element | null {
     return qsaChildScope(el, selector)
   }
   if (el.matches(selector)) return el
-  return el.querySelector(selector)
+
+  // Fast path: the overwhelmingly common case has no nested-child-scope
+  // collision, so a single querySelector() (matching the old behavior)
+  // resolves it without the cost of enumerating every match. Only fall
+  // back to the full querySelectorAll() scan — needed to skip past a
+  // rejected candidate to the next DOM-order match — when the first hit
+  // actually turns out to belong to a nested child scope.
+  const first = el.querySelector(selector)
+  if (!first || !isInsideNestedChildScope(first, el)) return first
+  for (const candidate of el.querySelectorAll(selector)) {
+    if (candidate !== first && !isInsideNestedChildScope(candidate, el)) return candidate
+  }
+  return null
 }
 
 /** Split a CSS selector list on top-level commas, ignoring commas inside
@@ -609,8 +707,17 @@ export function findCommentChildScope(
  * sibling range for comment-anchored scopes, the element subtree
  * otherwise. Mirrors candidatesInScope's notion of "where the scope's
  * content lives", but yields comments instead of elements.
+ *
+ * Exported for `insert.ts`'s branch-swap path (`updateFragmentConditional`),
+ * which otherwise walked `scope`'s own descendants with a bare
+ * `document.createTreeWalker` — never finding a conditional's
+ * `bf-cond-start:`/`bf-cond-end:` markers when they sit as a *sibling* of
+ * the scope's comment-scope proxy rather than nested inside it (true for
+ * any fragment-root component's own top-level conditional, since the proxy
+ * is one specific top-level element and the conditional's markers may be
+ * others). See piconic-ai/sora's `ListSidebar` for the real-world repro.
  */
-function* commentsInScope(scope: Element): Generator<Comment> {
+export function* commentsInScope(scope: Element): Generator<Comment> {
   const commentInfo = commentScopeRegistry.get(scope)
 
   if (commentInfo) {