@barefootjs/jsx 0.32.0 → 0.33.1

package/src/ir-to-client-js/control-flow/plan/build-inner-loop.ts

@@ -30,6 +30,8 @@ import {
 } from '../../utils.ts'
 import { buildChildRefBindings, buildStaticChildRefBindings } from '../shared.ts'
 import { renderPreamble, irToHtmlTemplate } from '../../html-template.ts'
+import { buildLoopChildConditionalsPlan } from './build-loop-child-arm.ts'
+import type { LoopChildConditionalPlan } from './loop-child-arm.ts'
 
 /**
  * Mirror of the helper in `build-loop-child-arm.ts` — kept local to avoid
@@ -160,6 +162,7 @@ function buildReactiveEmit(
   outerLoopParamBindings?: readonly LoopParamBinding[],
 ): InnerLoopReactiveEmit {
   const wrapInner = (expr: string) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings)
+  const wrapBoth = (expr: string) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings)
   const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings)
   const wrappedKey = inner.key
     ? wrapLoopParamAsAccessor(inner.key, inner.param, inner.paramBindings)
@@ -249,6 +252,21 @@ function buildReactiveEmit(
 
   const childRefs = buildChildRefBindings(inner.bindings.refs, inner.param, inner.paramBindings)
 
+  // Per-item conditionals inside THIS loop's own row (#2706) — same
+  // insert()-parity treatment the top-level loop's row conditionals
+  // already get (`buildLoopReactiveEffectsPlan`), now extended to a
+  // NESTED loop's row too. `scopeVar` is the row's own element
+  // (`__innerEl<uidSuffix>`, matching `stringifyInnerLoops`'s emission),
+  // and `wrapBoth` matches every other per-item expression in this emit
+  // (outer accessor, then inner accessor).
+  const conditionals: LoopChildConditionalPlan[] = buildLoopChildConditionalsPlan({
+    conditionals: inner.bindings.conditionals,
+    scopeVar: `__innerEl${uidSuffix}`,
+    wrap: wrapBoth,
+    loopParam: inner.param,
+    loopParamBindings: inner.paramBindings,
+  })
+
   return {
     mode: 'reactive',
     keyFn: loopKeyFn(inner),
@@ -261,6 +279,7 @@ function buildReactiveEmit(
     events,
     reactiveTexts,
     reactiveAttrs,
+    conditionals,
     childRefs,
   }
 }

package/src/ir-to-client-js/control-flow/plan/build-loop-child-arm.ts

@@ -190,6 +190,14 @@ export interface BuildBranchInnerLoopsArgs {
   innerLoops: readonly NestedLoop[] | undefined
   /** The variable expression naming the parent scope element (e.g. `__branchScope`). */
   scopeVar: string
+  /**
+   * The enclosing conditional's own slot id — every call site of this
+   * builder originates from a conditional branch's arm, so this is always
+   * a real id. Used as the `containerExpr` fallback (`findCondContainer`,
+   * #2705) for an inner loop whose IR never got a `containerSlotId` of its
+   * own (its wrapper element sits outside the branch's IR subtree).
+   */
+  condSlotId: string
   /** Outer loop param identifier (the conditional's enclosing loop). */
   outerLoopParam: string
   /** Outer loop param destructuring metadata. */
@@ -214,6 +222,7 @@ export function buildBranchInnerLoopsPlan(
   const {
     innerLoops,
     scopeVar,
+    condSlotId,
     outerLoopParam,
     outerLoopParamBindings,
     wrapOuter,
@@ -230,10 +239,15 @@ export function buildBranchInnerLoopsPlan(
 
     const csl = inner.containerSlotId
     // Inner loop's container: host-side `bf="<slot>"` slot marker first,
-    // then (bf-h, bf-m) when the container is itself a child scope.
+    // then (bf-h, bf-m) when the container is itself a child scope. When
+    // neither exists — the loop's own IR never got a `containerSlotId`
+    // because its wrapper element sits outside the branch's IR subtree
+    // (#2705) — resolve via the conditional's OWN comment marker instead
+    // of falling back to the whole branch scope, which may be several
+    // elements wider than the loop's actual container.
     const containerExpr = csl
       ? `(${scopeVar}.querySelector('[bf="${csl}"]') ?? ${scopeVar}.querySelector(\`[${BF_HOST}="\${__scopeId}"][${BF_AT}="${csl}"]\`) ?? ${scopeVar})`
-      : scopeVar
+      : `findCondContainer(${scopeVar}, '${condSlotId}')`
 
     const { head: paramHead, unwrap: paramUnwrap } = destructureLoopParam(inner.param, inner.paramBindings)
     const wrappedKey = inner.key
@@ -372,12 +386,14 @@ export function buildLoopChildConditionalsPlan(
         wrap,
         loopParam,
         loopParamBindings,
+        condId: cond.slotId,
       }),
       whenFalseArm: buildLoopChildArmPlan({
         branch: cond.whenFalse,
         wrap,
         loopParam,
         loopParamBindings,
+        condId: cond.slotId,
       }),
     })
   }
@@ -439,10 +455,12 @@ interface BuildLoopChildArmArgs {
   wrap: (expr: string) => string
   loopParam: string
   loopParamBindings?: readonly LoopParamBinding[]
+  /** The enclosing conditional's own slot id — threaded to `buildBranchInnerLoopsPlan`'s `condSlotId` (#2705). */
+  condId: string
 }
 
 function buildLoopChildArmPlan(args: BuildLoopChildArmArgs): LoopChildArmPlan {
-  const { branch, wrap, loopParam, loopParamBindings } = args
+  const { branch, wrap, loopParam, loopParamBindings, condId } = args
   return {
     events: buildBranchEventBindingsPlan({
       events: branch.events,
@@ -455,6 +473,7 @@ function buildLoopChildArmPlan(args: BuildLoopChildArmArgs): LoopChildArmPlan {
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: '__branchScope',
+      condSlotId: condId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap,

package/src/ir-to-client-js/control-flow/plan/build-reactive-effects.ts

@@ -110,8 +110,8 @@ export function buildReactiveEffectsPlan(
         wrappedCondition: wrap(cond.condition),
         whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
         whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
         ...(cond.readsPreamble && { readsPreamble: true }),
       })
     }
@@ -130,6 +130,8 @@ function buildOuterArm(
   wrap: (expr: string) => string,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  /** The conditional's own slot id — threaded to `buildBranchInnerLoopsPlan`'s `condSlotId` (#2705). */
+  condSlotId: string,
   profileComponentName?: string,
 ): LoopChildArmPlan {
   return {
@@ -145,6 +147,7 @@ function buildOuterArm(
     innerLoops: buildBranchInnerLoopsPlan({
       innerLoops: branch.innerLoops,
       scopeVar: '__branchScope',
+      condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
       wrapOuter: wrap,

package/src/ir-to-client-js/control-flow/plan/inner-loop.ts

@@ -17,6 +17,7 @@ import type {
   LoopParamBinding,
 } from '../../../types.ts'
 import type { LoopChildRefBinding } from './loop.ts'
+import type { LoopChildConditionalPlan } from './loop-child-arm.ts'
 
 /**
  * Body-entry statements emitted in order at the top of a `mapArray`
@@ -148,6 +149,17 @@ export interface InnerLoopReactiveEmit {
   reactiveTexts: readonly InnerLoopText[]
   /** Pre-wrapped reactive attribute effects for the inner-item body. */
   reactiveAttrs: readonly InnerLoopReactiveAttr[]
+  /**
+   * Per-item conditionals inside THIS loop's own row (#2706) — each gets
+   * its own `insert()` call, the same insert()-parity the top-level loop's
+   * row conditionals already have (`ReactiveEffectsPlan.conditionals`).
+   * Before this field existed, a per-item conditional inside a nested
+   * loop's row was baked into the static row template ONCE at row
+   * creation and never revisited — silently frozen against later signal
+   * changes — while its reactive text still (unsoundly) assumed insert()
+   * kept the branch's marker around.
+   */
+  conditionals: readonly LoopChildConditionalPlan[]
   /** Pre-wrapped imperative ref callbacks for the inner-item body (#1244). */
   childRefs: readonly LoopChildRefBinding[]
 }

package/src/ir-to-client-js/control-flow/stringify/inner-loop.ts

@@ -14,6 +14,7 @@
  *     <indent>  emitComponentAndEventSetup(...)
  *     <indent>  recurse on childLevels
  *     <indent>  reactive text effects
+ *     <indent>  per-item conditionals: insert() over __innerEl<uid> (#2706)
  *     <indent>  return __innerEl<uid>
  *     <indent>}) }
  *
@@ -36,6 +37,7 @@ import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { emitMultiRootTemplateCloneLines, namespaceWrapForTemplate } from './template-parse.ts'
 import { emitLoopChildRefs } from './loop.ts'
 import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
+import { stringifyLoopChildConditionals } from './loop-child-arm.ts'
 import type {
   InnerLoopPlan,
   InnerLoopsPlan,
@@ -139,6 +141,13 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc:
     }
     lines.push(`${indent}  }${profileBindingId(pc, attr.slotId)}) }`)
   }
+  // Per-item conditionals inside THIS loop's own row (#2706) — each is a
+  // real `insert()` over `__innerEl<uid>`, not a bake-once-at-creation
+  // ternary. Mirrors `stringifyBranchInnerLoops`'s identical call for a
+  // branch-scoped inner loop's own conditionals.
+  if (emit.conditionals.length > 0) {
+    stringifyLoopChildConditionals(lines, emit.conditionals, `${indent}  `, pc)
+  }
   // Imperative ref callbacks fire on every renderItem invocation, which
   // means every mount: SSR hydration, initial CSR creation, and same-key
   // remount after unmount (#1244).

package/src/ir-to-client-js/control-flow/stringify/lazy-row.ts

@@ -553,7 +553,13 @@ function seedDiffersExpr(target: string, a: LazyRowAttrBinding): string {
   if (a.attrName === 'dangerouslySetInnerHTML' || html === 'dangerouslySetInnerHTML') return 'true'
   if (html === 'style') return `${target}.getAttribute('style') !== styleToCss(__x)`
   if (html === 'class') return `${target}.getAttribute('class') !== (__x != null ? String(__x) : null)`
-  if (html === 'value') return `${target}.value !== String(__x)`
+  // Mirrors `emitValueUpdateStatements`'s runtime `'value' in target` gate
+  // (#2716): a target with no native `.value` property never gets one
+  // written, so the seed-diff must compare against the ATTRIBUTE it would
+  // actually receive there, not the (absent) property.
+  if (html === 'value') {
+    return `('value' in ${target} ? ${target}.value !== String(__x) : ${target}.getAttribute('value') !== String(__x))`
+  }
   if (isBooleanAttr(html)) return `${target}.${html} !== !!(__x)`
   if (a.meta.presenceOrUndefined) {
     // Compare the VALUE the writer would produce, not just presence.

package/src/ir-to-client-js/element-refs.ts

@@ -71,6 +71,14 @@ export function generateElementRefs(ctx: ClientJsContext): string {
     regularSlots.delete(slotId)
   }
 
+  // The component's own `comment: true` root slot needs no `$c` ref at
+  // all — its consumers (provider-and-child-inits.ts, emit-reactive.ts)
+  // reference `__scope` directly instead (#2649, see
+  // `ClientJsContext.commentScopeRootSlotId`'s docstring).
+  if (ctx.commentScopeRootSlotId) {
+    componentSlots.delete(ctx.commentScopeRootSlotId)
+  }
+
   if (regularSlots.size === 0 && componentSlots.size === 0) return ''
 
   const refLines: string[] = []

package/src/ir-to-client-js/emit-reactive.ts

@@ -28,6 +28,57 @@ function bindingIdArg(ctx: ClientJsContext, slotId: string | undefined): string
   return `, ${JSON.stringify(`${ctx.componentName}#binding:${slotId}`)}`
 }
 
+/**
+ * Generate statements that write a `value` HTML ATTRIBUTE the developer
+ * wrote directly on an element (`<div value={x}>`, a loop row's `<li
+ * value={x}>`, …) — SSR renders that same attribute, so hydration keeping
+ * it in sync is exactly the contract. Gated at runtime to elements that
+ * ALREADY expose a native `.value` IDL property (`'value' in target` —
+ * form controls, but also e.g. `<li value>`; the same duck-type check
+ * `applyRestAttrs` uses, deliberately not a tag-name allowlist), because
+ * for those `setAttribute('value', x)` only sets the INITIAL HTML
+ * attribute and the live property is required after user interaction; any
+ * other element falls back to a plain attribute write, which still matches
+ * what SSR rendered there. Writing the live property unconditionally would
+ * plant an expando SSR never had — a hydrated/SSR DOM-state divergence and a
+ * hazard for anything that duck-types form controls via `'value' in el`
+ * (#2716).
+ *
+ * NOT for the child-component-root `value` MIRROR (`emitReactivePropBindings`
+ * / `emitReactiveChildProps` reflecting a named prop onto a child's root
+ * element) — that mechanism has no SSR-rendered counterpart at all
+ * regardless of prop name, so an attribute fallback there would itself
+ * plant a fresh SSR/hydrate divergence; see `emitChildValueMirrorStatements`.
+ */
+function emitValueUpdateStatements(target: string, expression: string): string[] {
+  return [
+    `const __val = String(${expression})`,
+    `if ('value' in ${target}) { if (${target}.value !== __val) ${target}.value = __val } else { ${target}.setAttribute('value', __val) }`,
+  ]
+}
+
+/**
+ * `value`-prop write for the CHILD-ROOT MIRROR mechanism
+ * (`emitReactivePropBindings` / `emitReactiveChildProps`, both reactively
+ * reflect a parent-passed NAMED PROP onto a child component's root DOM
+ * element). Unlike a developer-authored `value=` attribute
+ * (`emitValueUpdateStatements`), this mirror has NO SSR-rendered
+ * counterpart at all — SSR never puts a `value` attribute on a child's
+ * root just because the parent passed a `value` prop. So a root WITHOUT a
+ * native `.value` property gets NOTHING written — not even an attribute
+ * (confirmed against the oracle's structural-HTML comparison, #2716: an
+ * attribute fallback here reintroduced a fresh SSR/hydrate divergence one
+ * layer down from the IDL-property expando this replaces). A root that
+ * already exposes `.value` (`'value' in target`, same duck-type gate as
+ * the direct-attribute case) still gets the live controlled-value
+ * property.
+ */
+function emitChildValueMirrorStatements(target: string, expression: string): string[] {
+  return [
+    `if ('value' in ${target}) { const __val = String(${expression}); if (${target}.value !== __val) ${target}.value = __val }`,
+  ]
+}
+
 /**
  * Generate JS statements to update a DOM attribute reactively.
  * Centralizes the attribute-type dispatch (value, class, boolean, presence, generic)
@@ -55,10 +106,7 @@ export function emitAttrUpdate(target: string, attrName: string, expression: str
     ]
   }
   if (htmlName === 'value') {
-    return [
-      `const __val = String(${expression})`,
-      `if (${target}.value !== __val) ${target}.value = __val`,
-    ]
+    return emitValueUpdateStatements(target, expression)
   }
   if (isBooleanAttr(htmlName)) {
     return [`${target}.${htmlName} = !!(${expression})`]
@@ -462,37 +510,43 @@ export function emitReactivePropBindings(lines: string[], ctx: ClientJsContext):
     }
 
     for (const [slotId, props] of propsBySlot) {
-      const v = varSlotId(slotId)
-      lines.push(`    if (_${v}) {`)
+      // The component's own `comment: true` root child IS `__scope` — no
+      // `$c` ref was declared for it (element-refs.ts), so reference
+      // `__scope` directly instead of a `_sN` var that doesn't exist
+      // (#2649, see `ClientJsContext.commentScopeRootSlotId`'s docstring).
+      const ref = slotId === ctx.commentScopeRootSlotId ? '__scope' : `_${varSlotId(slotId)}`
+      lines.push(`    if (${ref}) {`)
       for (const prop of props) {
         const value = `${prop.expression}()`
         if (prop.propName === 'selected') {
           if (prop.componentName === 'TabsContent') {
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
             lines.push(`      if (${value}) {`)
-            lines.push(`        _${v}.classList.remove('hidden')`)
+            lines.push(`        ${ref}.classList.remove('hidden')`)
             lines.push(`      } else {`)
-            lines.push(`        _${v}.classList.add('hidden')`)
+            lines.push(`        ${ref}.classList.add('hidden')`)
             lines.push(`      }`)
           } else {
             // Update data-state and aria-selected attributes.
             // Visual styling is driven by CSS data-[state=active/inactive]: selectors.
-            lines.push(`      _${v}.setAttribute('aria-selected', String(${value}))`)
-            lines.push(`      _${v}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
-            lines.push(`      _${v}.setAttribute('tabindex', ${value} ? '0' : '-1')`)
+            lines.push(`      ${ref}.setAttribute('aria-selected', String(${value}))`)
+            lines.push(`      ${ref}.setAttribute('data-state', ${value} ? 'active' : 'inactive')`)
+            lines.push(`      ${ref}.setAttribute('tabindex', ${value} ? '0' : '-1')`)
           }
-        // Use DOM property assignment for value and boolean attrs.
-        // setAttribute('value', x) only sets the initial HTML attribute; after user
-        // interaction the DOM property diverges, so .value = x is required.
+        // Use DOM property assignment for value and boolean attrs, but only
+        // on genuine form controls — see `emitChildValueMirrorStatements`'s
+        // docstring (#2716). `ref` here is a named prop's MIRROR target
+        // element (a child component's arbitrary root), not necessarily a
+        // form control, and this mirror has no SSR-rendered counterpart to
+        // fall back to.
         // Boolean attrs (disabled, checked, etc.) treat any attribute presence as
         // truthy, so setAttribute('disabled', 'false') still disables the element.
         } else if (prop.propName === 'value') {
-          lines.push(`      const __val = String(${value})`)
-          lines.push(`      if (_${v}.value !== __val) _${v}.value = __val`)
+          for (const stmt of emitChildValueMirrorStatements(ref, value)) lines.push(`      ${stmt}`)
         } else if (isBooleanAttr(prop.propName)) {
-          lines.push(`      _${v}.${prop.propName} = !!(${value})`)
+          lines.push(`      ${ref}.${prop.propName} = !!(${value})`)
         } else {
-          lines.push(`      _${v}.setAttribute('${prop.propName}', String(${value}))`)
+          lines.push(`      ${ref}.setAttribute('${prop.propName}', String(${value}))`)
         }
       }
       lines.push(`    }`)
@@ -520,13 +574,27 @@ export function emitReactiveChildProps(lines: string[], ctx: ClientJsContext): v
 
     for (const [, props] of propsByComponent) {
       const first = props[0]
+      // The component's own `comment: true` root child IS `__scope` — query
+      // it directly rather than through `$c`, which cannot tell "I already
+      // am this slot" apart from a coincidentally-matching descendant
+      // (#2649, see `ClientJsContext.commentScopeRootSlotId`'s docstring).
+      const isCommentRoot = first.slotId !== null && first.slotId === ctx.commentScopeRootSlotId
       const varSuffix = first.slotId ? varSlotId(first.slotId).replace(/-/g, '_') : first.componentName
-      const varName = `__${first.componentName}_${varSuffix}El`
-      const selectorArg = first.slotId ? first.slotId : first.componentName
-      lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`)
+      const varName = isCommentRoot ? '__scope' : `__${first.componentName}_${varSuffix}El`
+      if (!isCommentRoot) {
+        const selectorArg = first.slotId ? first.slotId : first.componentName
+        lines.push(`    const [${varName}] = $c(__scope, '${selectorArg}')`)
+      }
       lines.push(`    if (${varName}) {`)
       for (const prop of props) {
-        for (const stmt of emitAttrUpdate(varName, prop.attrName, prop.expression, prop)) {
+        // `value` is the CHILD-ROOT MIRROR case, not a developer-authored
+        // attribute — route it through the no-SSR-fallback helper instead
+        // of `emitAttrUpdate`'s generic (attribute-fallback) dispatch;
+        // see `emitChildValueMirrorStatements`'s docstring (#2716).
+        const stmts = toHtmlAttrName(prop.attrName) === 'value'
+          ? emitChildValueMirrorStatements(varName, prop.expression)
+          : emitAttrUpdate(varName, prop.attrName, prop.expression, prop)
+        for (const stmt of stmts) {
           lines.push(`      ${stmt}`)
         }
       }

package/src/ir-to-client-js/imports.ts

@@ -11,6 +11,11 @@ import { identifierCallPattern } from '../identifier-pattern.ts'
 export const RUNTIME_IMPORT_CANDIDATES = [
   'createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount',
   'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect',
+  // Resolves the real DOM container for a loop nested inside a loop-row
+  // conditional's branch when the conditional's wrapper element carries no
+  // `bf="<slot>"` marker of its own (#2705) — see `findCondContainer`'s
+  // docstring (runtime/insert.ts) for why the marker collector can't see it.
+  'findCondContainer',
   'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild',
   // Connects a template-clone loop row before the body's tail runs, so a child
   // that inits inside it resolves context against real ancestors rather than

package/src/ir-to-client-js/index.ts

@@ -185,6 +185,10 @@ function createContext(
     refElements: [],
     childInits: [],
     deferredChildSlots: new Set(),
+    // Mirrors `emit-registration.ts`'s `isCommentScope` component-root
+    // disjunct (not the fragment disjunct — that case is disambiguated at
+    // runtime by `commentScopeRegistry`, not by this slot-id shortcut).
+    commentScopeRootSlotId: ir.root.type === 'component' ? ir.root.slotId : null,
     reactiveProps: [],
     reactiveChildProps: [],
     reactiveAttrs: [],

package/src/ir-to-client-js/phases/provider-and-child-inits.ts

@@ -39,7 +39,11 @@ export function emitProviderAndChildInits(lines: string[], ctx: ClientJsContext)
         lines.push(`  upsertChild(__scope, '${registryName}', '${child.slotId}', ${child.propsExpr})`)
         continue
       }
-      const scopeRef = child.slotId ? `_${varSlotId(child.slotId)}` : '__scope'
+      // The component's own `comment: true` root child IS `__scope` (no
+      // separate DOM node exists for it to be looked up at) — see
+      // `ClientJsContext.commentScopeRootSlotId`'s docstring (#2649).
+      const isCommentRoot = child.slotId !== null && child.slotId === ctx.commentScopeRootSlotId
+      const scopeRef = !child.slotId || isCommentRoot ? '__scope' : `_${varSlotId(child.slotId)}`
       lines.push(`  initChild('${registryName}', ${scopeRef}, ${child.propsExpr})`)
     }
   }

package/src/ir-to-client-js/types.ts

@@ -102,6 +102,27 @@ export interface ClientJsContext {
    * registration-template emit so both agree on which children defer.
    */
   deferredChildSlots: Set<string>
+  /**
+   * Slot id of the component's own root, when the ENTIRE render is a single
+   * child component call (`ir.root.type === 'component'` — the IR shape is
+   * the sole source of truth; `emit-registration.ts`'s `isCommentScope`
+   * derives the def's `comment: true` from the same shape). Such a child
+   * never gets its own DOM node: `materializeComponent`/`renderChild` leave
+   * `bf-s` unset and the child's markup becomes `__scope` itself (#2649).
+   * A generic `$c(__scope, slotId)` lookup for this one slot is therefore
+   * not just redundant but actively ambiguous — a genuine grandchild
+   * nested inside it can derive a `bf-s` whose suffix collides with this
+   * same slot id (see `component.ts`'s `_parentScopeId` push), and
+   * `$cSingle` cannot tell "I already am this slot" apart from "a
+   * coincidentally-matching descendant is this slot" from the DOM alone.
+   * Emission sites that would otherwise query this slot via `$c`
+   * (`element-refs.ts`, `provider-and-child-inits.ts`,
+   * `emit-reactive.ts`) use `__scope` directly instead, sidestepping the
+   * ambiguity entirely rather than trying to make the query precise
+   * enough to resolve it. `null` for a component whose root is a regular
+   * element/fragment (the overwhelmingly common case).
+   */
+  commentScopeRootSlotId: string | null
   reactiveProps: ReactiveComponentProp[]
   reactiveChildProps: ReactiveChildProp[]
   reactiveAttrs: ReactiveAttribute[]