@barefootjs/client 0.21.0 → 0.21.3

package/dist/runtime/index.js

@@ -640,7 +640,41 @@ function belongsToScope(element, scope) {
   if (element.getAttribute(BF_SCOPE))
     return false;
   const nearestScope = element.closest(`[${BF_SCOPE}]`);
-  return nearestScope === scope;
+  if (nearestScope !== scope)
+    return false;
+  return !isInsideNestedCommentScope(element, scope);
+}
+function isInsideNestedCommentScope(element, scope) {
+  let current = element;
+  while (current !== scope) {
+    const parent = current.parentNode;
+    if (!parent)
+      return false;
+    if (isTopLevelCommentScopeNode(current))
+      return true;
+    current = parent;
+  }
+  return false;
+}
+function isTopLevelCommentScopeNode(node) {
+  const parent = node.parentNode;
+  if (!parent)
+    return false;
+  let depth = 0;
+  let sib = parent.firstChild;
+  while (sib) {
+    if (sib === node)
+      return depth > 0;
+    if (sib.nodeType === Node.COMMENT_NODE) {
+      const value = sib.nodeValue ?? "";
+      if (value.startsWith(BF_SCOPE_COMMENT_PREFIX))
+        depth++;
+      else if (value.startsWith(BF_SCOPE_COMMENT_END_PREFIX) && depth > 0)
+        depth--;
+    }
+    sib = sib.nextSibling;
+  }
+  return false;
 }
 function isInCommentScopeRange(element, commentNode) {
   const boundary = getCommentScopeBoundary(commentNode);
@@ -665,7 +699,8 @@ function find(scope, selector, ignoreScope) {
     if (commentInfo) {
       if (candidate.parentElement === commentInfo.commentNode.parentElement)
         return candidate;
-      if (!candidate.closest(`[${BF_SCOPE}]`))
+      const nearestScope = candidate.closest(`[${BF_SCOPE}]`);
+      if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode))
         return candidate;
     } else {
       if (belongsToScope(candidate, scope))
@@ -677,6 +712,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) {
@@ -2496,7 +2545,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") {
@@ -2537,15 +2586,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 = [];
@@ -2585,7 +2633,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,6 +30,32 @@ 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,
@@ -98,6 +124,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;AA6HD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAClB,KAAK,EAAE,OAAO,GAAG,IAAI,EACrB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,OAAO,GACpB,OAAO,GAAG,IAAI,CA2BhB;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;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;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAW/E;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;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

@@ -1048,7 +1048,41 @@ function belongsToScope(element, scope) {
   if (element.getAttribute(BF_SCOPE))
     return false;
   const nearestScope = element.closest(`[${BF_SCOPE}]`);
-  return nearestScope === scope;
+  if (nearestScope !== scope)
+    return false;
+  return !isInsideNestedCommentScope(element, scope);
+}
+function isInsideNestedCommentScope(element, scope) {
+  let current = element;
+  while (current !== scope) {
+    const parent = current.parentNode;
+    if (!parent)
+      return false;
+    if (isTopLevelCommentScopeNode(current))
+      return true;
+    current = parent;
+  }
+  return false;
+}
+function isTopLevelCommentScopeNode(node) {
+  const parent = node.parentNode;
+  if (!parent)
+    return false;
+  let depth = 0;
+  let sib = parent.firstChild;
+  while (sib) {
+    if (sib === node)
+      return depth > 0;
+    if (sib.nodeType === Node.COMMENT_NODE) {
+      const value = sib.nodeValue ?? "";
+      if (value.startsWith(BF_SCOPE_COMMENT_PREFIX))
+        depth++;
+      else if (value.startsWith(BF_SCOPE_COMMENT_END_PREFIX) && depth > 0)
+        depth--;
+    }
+    sib = sib.nextSibling;
+  }
+  return false;
 }
 function isInCommentScopeRange(element, commentNode) {
   const boundary = getCommentScopeBoundary(commentNode);
@@ -1073,7 +1107,8 @@ function find(scope, selector, ignoreScope) {
     if (commentInfo) {
       if (candidate.parentElement === commentInfo.commentNode.parentElement)
         return candidate;
-      if (!candidate.closest(`[${BF_SCOPE}]`))
+      const nearestScope = candidate.closest(`[${BF_SCOPE}]`);
+      if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode))
         return candidate;
     } else {
       if (belongsToScope(candidate, scope))
@@ -1085,6 +1120,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) {
@@ -2897,7 +2946,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") {
@@ -2938,15 +2987,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 = [];
@@ -2986,7 +3034,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.0",
+  "version": "0.21.3",
   "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.0"
+    "@barefootjs/shared": "0.21.3"
   },
   "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

@@ -8,7 +8,7 @@
 
 import { commentScopeRegistry, getCommentScopeBoundary } from './scope.ts'
 import { hydratedScopes } from './hydration-state.ts'
-import { BF_SCOPE, BF_SLOT, BF_PORTAL_OWNER, BF_PARENT_OWNED_PREFIX, BF_SCOPE_COMMENT_PREFIX } from '@barefootjs/shared'
+import { BF_SCOPE, BF_SLOT, BF_PORTAL_OWNER, BF_PARENT_OWNED_PREFIX, BF_SCOPE_COMMENT_PREFIX, BF_SCOPE_COMMENT_END_PREFIX } from '@barefootjs/shared'
 
 /** CSS attribute-value escape with a fallback for environments lacking CSS.escape. */
 export const cssEscape: (s: string) => string =
@@ -222,7 +222,59 @@ function belongsToScope(element: Element, scope: Element): boolean {
 
   // Check if nearest scope matches
   const nearestScope = element.closest(`[${BF_SCOPE}]`)
-  return nearestScope === scope
+  if (nearestScope !== scope) return false
+
+  // A fragment-rooted child mounted between `element` and `scope` has no
+  // `bf-s` element of its own (#2302) — `closest()` walks straight past it
+  // to `scope`, so a slot search on `scope` can wrongly claim a descendant
+  // that actually belongs to that nested child's comment scope. Reject it.
+  return !isInsideNestedCommentScope(element, scope)
+}
+
+/**
+ * True if some ancestor of `element` (strictly below `scope`) is a
+ * top-level node of a fragment-rooted child's `<!--bf-scope:...-->` range —
+ * i.e. `element` structurally belongs to a nested child component even
+ * though that child has no `bf-s`-attributed element for `.closest()` to
+ * stop at, and regardless of whether `commentScopeRegistry` has registered
+ * it yet (a parent's own slot lookups can run before its child-scope
+ * lookups register the child, #2302).
+ */
+function isInsideNestedCommentScope(element: Element, scope: Element): boolean {
+  let current: Node = element
+  while (current !== scope) {
+    const parent: Node | null = current.parentNode
+    if (!parent) return false
+    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
+ * element of a fragment-rooted child mounted as `node`'s sibling. Single
+ * left-to-right pass over the sibling list with a nesting depth counter, so
+ * a nested child's own begin/end pair doesn't prematurely close an outer
+ * one. Missing end markers (older SSR output) leave depth un-decremented,
+ * matching `getCommentScopeBoundary`'s legacy end-of-parent fallback.
+ */
+function isTopLevelCommentScopeNode(node: Node): boolean {
+  const parent = node.parentNode
+  if (!parent) return false
+  let depth = 0
+  let sib: Node | null = parent.firstChild
+  while (sib) {
+    if (sib === node) return depth > 0
+    if (sib.nodeType === Node.COMMENT_NODE) {
+      const value = (sib as Comment).nodeValue ?? ''
+      if (value.startsWith(BF_SCOPE_COMMENT_PREFIX)) depth++
+      else if (value.startsWith(BF_SCOPE_COMMENT_END_PREFIX) && depth > 0) depth--
+    }
+    sib = sib.nextSibling
+  }
+  return false
 }
 
 /**
@@ -271,10 +323,16 @@ export function find(
     if (ignoreScope) return candidate
     if (commentInfo) {
       // Comment scope: top-level siblings in the comment range are always
-      // accepted (even if they have bf-s, like proxy elements). Descendants
-      // are accepted only if not inside a nested bf-s scope.
+      // accepted (even if they have bf-s, like proxy elements). A descendant
+      // nested inside one of those siblings is accepted unless a *nested*
+      // child scope sits between it and this one — i.e. its nearest bf-s
+      // ancestor falls within this comment's own sibling range. An ancestor
+      // bf-s element outside that range doesn't disqualify the candidate:
+      // a fragment-root child mounted inside a normal parent island always
+      // has one, and `.closest()` alone can't tell the two apart (#2302).
       if (candidate.parentElement === commentInfo.commentNode.parentElement) return candidate
-      if (!candidate.closest(`[${BF_SCOPE}]`)) return candidate
+      const nearestScope = candidate.closest(`[${BF_SCOPE}]`)
+      if (!nearestScope || !isInCommentScopeRange(nearestScope, commentInfo.commentNode)) return candidate
     } else {
       if (belongsToScope(candidate, scope)) return candidate
     }
@@ -287,6 +345,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.
  */
@@ -551,8 +647,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) {