@barefootjs/jsx 0.31.0 → 0.31.2

package/src/__tests__/aliased-destructured-prop-csr.test.ts

@@ -0,0 +1,112 @@
+/**
+ * Aliased (renaming) destructured props on the CSR/client-JS path (#2524).
+ *
+ * `_p` is uniformly keyed by the caller-facing property name
+ * (`sourceName ?? name` — see `ParamInfo.sourceName`'s docstring in
+ * `types.ts`) across every producer/consumer. Before this fix, client-JS
+ * emission kept reading `_p.<localBinding>` for a renaming destructure
+ * (`{ n: count }`), so `_p.count` read a property the caller never sent
+ * (the caller passes `n`) and the local binding hydrated to `undefined`.
+ *
+ * Mirrors `ssr-defaults.test.ts`'s aliased-prop describes (#2460) for the
+ * SSR-defaults half; this covers the generated `initXxx` extraction and
+ * the CSR `template:` lambda.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('aliased destructured props reach client JS under the caller-facing key (#2524)', () => {
+  test('{ text, n: count } — init extraction and template lambda both read `_p.n`, not `_p.count`', () => {
+    const source = `
+      'use client'
+      import { createEffect } from '@barefootjs/client'
+      export function Badge({ text, n: count }: { text: string; n: number }) {
+        createEffect(() => {
+          console.log(count)
+        })
+        return <span>{text}:{count}</span>
+      }
+    `
+    const result = compileJSX(source, 'Badge.tsx', { adapter })
+    const errors = result.errors.filter((e) => e.severity === 'error')
+    expect(errors).toEqual([])
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    // `initBadge` extracts the local binding `count` from the
+    // CALLER-facing key `n` — never the local key `count`.
+    expect(clientJs!.content).toContain('const count = _p.n')
+    expect(clientJs!.content).not.toContain('_p.count')
+    // The CSR `template:` lambda (module-scope SSR fallback) reads the
+    // same caller-facing key.
+    expect(clientJs!.content).toContain('escapeText(_p.n)')
+  })
+
+  test('{ text, n } — un-aliased: byte-identical to the pre-fix `_p.n` extraction', () => {
+    // `sourceName ?? name` is an identity for an un-aliased prop, so this
+    // case must be indistinguishable from before the rename-aware fix.
+    const source = `
+      'use client'
+      import { createEffect } from '@barefootjs/client'
+      export function Badge({ text, n }: { text: string; n: number }) {
+        createEffect(() => {
+          console.log(n)
+        })
+        return <span>{text}:{n}</span>
+      }
+    `
+    const result = compileJSX(source, 'Badge.tsx', { adapter })
+    const errors = result.errors.filter((e) => e.severity === 'error')
+    expect(errors).toEqual([])
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain('const n = _p.n')
+    expect(clientJs!.content).toContain('escapeText(_p.n)')
+  })
+
+  test('aliased controlled-signal prop — the accessor reads the caller-facing key', () => {
+    // `build-declaration-emit`'s controlled-signal path resolves
+    // `controlled.propName` (a LOCAL name) through the prop's
+    // `sourceName` before emitting the `_p.` accessor.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Toggle({ isOpen: open = false }: { isOpen?: boolean }) {
+        const [openState, setOpenState] = createSignal(open)
+        return <button onClick={() => setOpenState(!openState())}>{openState() ? 'on' : 'off'}</button>
+      }
+    `
+    const result = compileJSX(source, 'Toggle.tsx', { adapter })
+    const errors = result.errors.filter((e) => e.severity === 'error')
+    expect(errors).toEqual([])
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain('_p.isOpen')
+    expect(clientJs!.content).not.toContain('_p.open')
+  })
+
+  test('aliased event-handler prop — the handler const reads the caller-facing key', () => {
+    // `props-event-handlers` extracts the handler under its LOCAL name
+    // from the CALLER-facing `_p` key.
+    const source = `
+      'use client'
+      export function Clicker({ onPress: handlePress }: { onPress?: () => void }) {
+        return <button onClick={handlePress}>go</button>
+      }
+    `
+    const result = compileJSX(source, 'Clicker.tsx', { adapter })
+    const errors = result.errors.filter((e) => e.severity === 'error')
+    expect(errors).toEqual([])
+
+    const clientJs = result.files.find((f) => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain('const handlePress = _p.onPress')
+    expect(clientJs!.content).not.toContain('_p.handlePress')
+  })
+})

package/src/__tests__/css-layer-prefixer.test.ts

@@ -11,6 +11,9 @@ import {
   extractIdentifiers,
 } from '../css-layer-prefixer'
 import type { ComponentIR, IRElement, IRMetadata, IRTemplatePart, ConstantInfo, TemplateAttr, LiteralAttr } from '../types'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { HonoAdapter } from '../../../../packages/adapter-hono/src/adapter/hono-adapter'
 
 describe('prefixClass', () => {
   test('prefixes a simple class', () => {
@@ -452,4 +455,73 @@ describe('applyCssLayerPrefix', () => {
     const base = ir.metadata.localConstants.find(c => c.name === 'baseClasses')
     expect(base?.value).toBe("'layer-components:bg-primary'")
   })
+
+  test('multi-component file prefixes a shared const identically in every component IR (#2570)', () => {
+    // `sharedClasses` is used in CLASS position only by CompA; CompB reads it
+    // in a non-class expression. Per-IR application prefixed only CompA's
+    // copy, which — now that module-scope constants are hoisted to ONE
+    // module declaration — emitted the constant twice with different values
+    // ("tabsClasses has already been declared" in the site/ui build). The
+    // file-wide union must leave every IR's copy byte-identical.
+    const source = `
+      const sharedClasses = 'flex flex-col gap-2'
+
+      export function CompA() {
+        return <div className={sharedClasses + ' extra'}>a</div>
+      }
+
+      export function CompB() {
+        return <div data-cls={sharedClasses}>b</div>
+      }
+    `
+    const result = compileJSX(source, '/virtual/Tabs.tsx', {
+      adapter: new TestAdapter(),
+      cssLayerPrefix: 'components',
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')!.content
+
+    const declarations = template.match(/^const sharedClasses = .*$/gm) ?? []
+    expect(declarations).toHaveLength(1)
+    expect(declarations[0]).toContain('layer-components:flex')
+  })
+
+  test('prefixes a `Record`-shaped `as const` class map constant\'s typedValue (#2575)', () => {
+    // `preserveTypes` emitters (Hono) prefer `typedValue ?? value` when
+    // emitting a module-scope constant so `.tsx` output stays type-checked
+    // — see `generateModuleScopeDeclarations` in
+    // `packages/adapter-hono/src/adapter/hono-adapter.ts`'s base class.
+    // `applyCssLayerPrefixToFile` used to rewrite only `value`, leaving
+    // `typedValue` — the string Hono actually emits — unprefixed for any
+    // constant whose initializer carries type syntax (`as const`, a
+    // `satisfies`/`Record<...>` annotation, …). Regression for the fix:
+    // both strings must be prefixed together, and the `as const` assertion
+    // must survive the round trip verbatim.
+    const source = `
+      const toneClasses: Record<'info' | 'warn', string> = {
+        info: 'text-blue-500',
+        warn: 'text-amber-500',
+      } as const
+
+      export function Banner() {
+        return <div className={toneClasses.info}>hi</div>
+      }
+    `
+    const result = compileJSX(source, '/virtual/Banner.tsx', {
+      adapter: new HonoAdapter(),
+      cssLayerPrefix: 'components',
+    })
+    expect(result.errors.filter(e => e.severity === 'error')).toEqual([])
+    const template = result.files.find(f => f.type === 'markedTemplate')!.content
+
+    const declarations = [...template.matchAll(/^const toneClasses = [\s\S]*?\} as const$/gm)]
+    expect(declarations).toHaveLength(1)
+    const declaration = declarations[0][0]
+
+    // Classes are prefixed...
+    expect(declaration).toContain("info: 'layer-components:text-blue-500'")
+    expect(declaration).toContain("warn: 'layer-components:text-amber-500'")
+    // ...and the `as const` assertion survives the rewrite.
+    expect(declaration.trim().endsWith('} as const')).toBe(true)
+  })
 })

package/src/__tests__/form-control-value-ssr.test.ts

@@ -1,5 +1,5 @@
 /**
- * SSR projection of controlled form-control `value` (#2464 / #2465).
+ * SSR projection of controlled form-control `value` (#2464 / #2465 / #2466).
  *
  * `value` is not an attribute on `<textarea>` or `<select>` — emitting it
  * verbatim ships invalid HTML that browsers ignore, so no-JS and
@@ -9,6 +9,15 @@
  * and projects the value into element content (textarea) or per-option
  * `selected` comparisons (select — the shape `select-option-selected`
  * already proves across every adapter).
+ *
+ * `<option>`s rendered by a `.map()` loop get the same `selected`
+ * distribution, compared against the option's own value EXPRESSION rather
+ * than a literal (#2466). That makes `selected` an ordinary per-row
+ * reactive attribute, so it rides the loop's existing `applyItem` /
+ * `applyOuter` (or eager `mapArray` per-row effect) machinery — fixing the
+ * bug where an INDEX-KEYED reorder left `selected` attached to whichever
+ * physical `<option>` happened to have its `value` rewritten in place,
+ * instead of following the controlled signal's value.
  */
 
 import { describe, test, expect } from 'bun:test'
@@ -65,7 +74,7 @@ export function Pick() {
     expect(template).toContain(`((v()) === "b")`)
   })
 
-  test('an authored selected wins; dynamic option loops are left to hydrate', () => {
+  test('an authored selected wins; a `.map()` loop option gets a distributed selected binding (#2466)', () => {
     const { template } = compiled(`
 "use client"
 import { createSignal } from '@barefootjs/client'
@@ -89,7 +98,43 @@ export function Pick() {
     expect(template).toContain('selected={(false) || undefined}')
     expect(template).not.toContain('(v()) === "a"')
     expect(template).not.toMatch(/<select[^>]*value=/)
-  })
+    // The loop-rendered option compares against its own value EXPRESSION
+    // (the loop param `o`), not a literal — this is the #2466 half.
+    expect(template).toContain('((v()) === (o))')
+  }, 20000)
+
+  test('index-keyed .map() loop option: selected rides applyItem AND applyOuter (#2466)', () => {
+    const { clientJs } = compiled(`
+"use client"
+import { createSignal } from '@barefootjs/client'
+export function ReorderSelect() {
+  const [opts, setOpts] = createSignal([{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }])
+  const [val, setVal] = createSignal('b')
+  return (
+    <div>
+      <select value={val()} onChange={(e) => setVal(e.target.value)}>
+        {opts().map((o, i) => <option key={i} value={o.id}>{o.label}</option>)}
+      </select>
+      <button onClick={() => setOpts([...opts()].reverse())}>Reverse</button>
+    </div>
+  )
+}
+`)
+    // `key={i}` is index-keyed: nothing MOVES on reorder, so `value`/text are
+    // rewritten in place by applyItem — `selected` must be recomputed there
+    // too (item changed under a stationary row), not just at row creation.
+    expect(clientJs).toContain('mapArrayLazy(')
+    expect(clientJs).toContain('applyItem:')
+    expect(clientJs).toContain('applyOuter:')
+    // Every apply body (createRow, applyItem, applyOuter) recomputes
+    // `selected` from the item AND the outer controlled signal…
+    const computed = clientJs.match(/const __x = \(val\(\)\) === \(o\(\)\.id\)/g) ?? []
+    expect(computed.length).toBe(3)
+    // …and writes it as a DOM PROPERTY (not just an HTML attribute
+    // presence, which would not affect a live, already-rendered <option>).
+    const writes = clientJs.match(/\.selected = !!\(__x\)/g) ?? []
+    expect(writes.length).toBe(3)
+  }, 20000)
 
   test('textarea with explicit children is left untouched', () => {
     const { template } = compiled(`

package/src/__tests__/memo-deps-comments.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Memo/effect dependency extraction must read the token stream, not the raw
+ * body text: a doc comment (or string literal) mentioning `otherSignal()`
+ * inside a computation body is not a read and must not become a dependency.
+ *
+ * Regression pin for the phantom deps surfaced in #2581's review: slider's
+ * `percentage` memo gained `internalValue`/`controlledValue` deps in the
+ * regenerated `ui/meta/slider.json` purely because an explanatory comment
+ * inside the memo body named those getters in call syntax.
+ */
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+
+describe('dependency extraction ignores comments and strings', () => {
+  test('a comment naming another getter in call syntax is not a dep', () => {
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Slider() {
+        const [internalValue, setInternalValue] = createSignal(0)
+        const [controlledValue, setControlledValue] = createSignal<number | undefined>(undefined)
+        const [min, setMin] = createSignal(0)
+        const [max, setMax] = createSignal(100)
+        const currentValue = createMemo(() => controlledValue() ?? internalValue())
+        const percentage = createMemo(() => {
+          if (max() <= min()) return 0
+          // \`currentValue()\` mirrors \`controlledValue()\` and \`internalValue()\`
+          // in its type, so assert what's runtime-guaranteed.
+          return Math.max(0, Math.min(100, ((currentValue()! - min()) / (max() - min())) * 100))
+        })
+        return <div style={\`width: \${percentage()}%\`}>{currentValue()}</div>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Slider.tsx')
+    const percentage = ctx.memos.find(m => m.name === 'percentage')
+    expect(percentage).toBeDefined()
+    expect(percentage!.deps.sort()).toEqual(['currentValue', 'max', 'min'])
+  })
+
+  test('a string literal naming a getter in call syntax is not a dep', () => {
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Label() {
+        const [count, setCount] = createSignal(0)
+        const [label, setLabel] = createSignal('x')
+        const hint = createMemo(() => label() + ' (see count() for the number)')
+        return <span>{hint()}</span>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Label.tsx')
+    const hint = ctx.memos.find(m => m.name === 'hint')
+    expect(hint).toBeDefined()
+    expect(hint!.deps).toEqual(['label'])
+  })
+
+  test('a read AFTER a template-literal substitution still registers', () => {
+    // Trap for token-scan implementations: without a parser driving
+    // `reScanTemplateToken`, the template tail after `\${...}` is mis-lexed
+    // as a new template opener and swallows the following statement —
+    // xyflow's `visibleClass` shape, where `animated()` follows a
+    // substitution line and silently lost its dep.
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Edge() {
+        const [selected, setSelected] = createSignal(false)
+        const [animated, setAnimated] = createSignal(false)
+        const visibleClass = createMemo(() => {
+          let cls = 'edge'
+          if (selected()) cls += \` \${'edge-selected'}\`
+          if (animated()) cls += \` \${'edge-animated'}\`
+          return cls
+        })
+        return <div class={visibleClass()}>x</div>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Edge.tsx')
+    const visibleClass = ctx.memos.find(m => m.name === 'visibleClass')
+    expect(visibleClass).toBeDefined()
+    expect(visibleClass!.deps.sort()).toEqual(['animated', 'selected'])
+  })
+
+  test('genuine reads inside template-literal substitutions still register', () => {
+    const source = `
+      "use client"
+      import { createSignal, createMemo } from '@barefootjs/client'
+      export function Badge() {
+        const [tone, setTone] = createSignal('info')
+        const cls = createMemo(() => \`badge badge-\${tone()}\`)
+        return <span class={cls()}>x</span>
+      }
+    `
+    const ctx = analyzeComponent(source, 'Badge.tsx')
+    const cls = ctx.memos.find(m => m.name === 'cls')
+    expect(cls).toBeDefined()
+    expect(cls!.deps).toEqual(['tone'])
+  })
+})

package/src/__tests__/multi-return-sibling-diagnostic.test.ts

@@ -0,0 +1,241 @@
+/**
+ * Regression tests for #2556: a `'use client'` file where a component
+ * references a same-file sibling whose body is a multi-return JSX dispatch
+ * (`switch` / `if`-`else` chain) previously compiled clean with ZERO
+ * diagnostics, but the sibling produced no template — so the emitted
+ * `renderChild`/`initChild`/`createComponent` call referenced a component
+ * name with nothing registered under it, throwing
+ * `ReferenceError: <Name> is not defined` at SSR/hydrate time.
+ *
+ * Root cause: `listComponentFunctions`'s #932 "preserve verbatim helper"
+ * bypass is gated on `!hasUseClient` — in a `'use client'` file, a
+ * multi-return sibling like `NavIcon` below IS added to `componentNames`
+ * and asked to compile as a standalone component. But `visitComponentBody`
+ * only folds `if`/`else`-chain multi-return bodies into `conditionalReturns`
+ * (#1401); a top-level `switch` statement is preserved as a verbatim init
+ * statement instead, so `ctx.jsxReturn` stays null and
+ * `compileMultipleComponents`'s Pass-1 loop silently `continue`s past it —
+ * no entry, no template, no error. Meanwhile the referencing sibling's IR
+ * still holds a `component` reference to the dropped name.
+ *
+ * Fix: BF048 detects this structurally — after Pass 1, any name in
+ * `componentNames` that did not make it into `entries` is cross-referenced
+ * against every compiled sibling's IR component-reference graph (the same
+ * walk `@bf-child` import markers use, `collectComponentNamesFromIR`). A
+ * hit fails the compile instead of shipping a silent `ReferenceError`.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('Sibling multi-return JSX dispatch produces no template in a client file (#2556)', () => {
+  // Higher timeout: `.map()` in the source trips `needsTypeBasedDetection`,
+  // and building the one-time `ts.Program` for BF023/BF024's nullable-key
+  // check is slow the first time the TS API is touched in a fresh process
+  // (e.g. this file run in isolation) — well past bun's 5s default.
+  test('BF048: .map() loop child referencing a switch-dispatch sibling fails the compile', () => {
+    const source = `
+      "use client"
+      import { createSignal } from '@barefootjs/client'
+      function NavIcon({ name }: { name: string }) {
+        switch (name) {
+          case 'home': return <svg><path d="M1"/></svg>
+          case 'bell': return <svg><path d="M2"/></svg>
+          default: return null
+        }
+      }
+      export function Shell() {
+        const [n, setN] = createSignal(0)
+        return (
+          <nav onClick={() => setN(n() + 1)}>
+            {['home', 'bell'].map(item => <NavIcon key={item} name={item} />)}
+          </nav>
+        )
+      }
+    `
+
+    const result = compileJSX(source, 'Shell.tsx', { adapter })
+    const errs = result.errors.filter(e => e.severity === 'error')
+    expect(errs.length).toBeGreaterThan(0)
+    const bf048 = errs.find(e => e.code === 'BF048')
+    expect(bf048).toBeDefined()
+    expect(bf048!.message).toContain('NavIcon')
+    expect(bf048!.message).toContain('Shell')
+    expect(bf048!.message).toMatch(/did not compile to a template/)
+  }, 20000)
+
+  test('BF048: direct JSX tag (non-loop) referencing a switch-dispatch sibling fails the compile', () => {
+    const source = `
+      "use client"
+      import { createSignal } from '@barefootjs/client'
+      function StatusIcon({ status }: { status: string }) {
+        switch (status) {
+          case 'ok': return <span class="ok">OK</span>
+          case 'err': return <span class="err">ERR</span>
+          default: return null
+        }
+      }
+      export function Panel() {
+        const [n, setN] = createSignal(0)
+        return <div onClick={() => setN(n() + 1)}><StatusIcon status="ok" /></div>
+      }
+    `
+
+    const result = compileJSX(source, 'Panel.tsx', { adapter })
+    const errs = result.errors.filter(e => e.severity === 'error')
+    const bf048 = errs.find(e => e.code === 'BF048')
+    expect(bf048).toBeDefined()
+    expect(bf048!.message).toContain('StatusIcon')
+  })
+
+  test('legal neighbor: the identical switch-dispatch shape in a non-"use client" file compiles clean (#932)', () => {
+    // Same shape as the failing case above, but without the 'use client'
+    // directive: `listComponentFunctions`'s #932 bypass keeps NavIcon OFF
+    // `componentNames` entirely, so it is preserved verbatim in the marked
+    // template rather than compiled (and dropped) as a component. BF048
+    // must not fire here.
+    const source = `
+      function NavIcon({ name }: { name: string }) {
+        switch (name) {
+          case 'home': return <svg><path d="M1"/></svg>
+          case 'bell': return <svg><path d="M2"/></svg>
+          default: return null
+        }
+      }
+      export function Shell() {
+        return (
+          <nav>
+            {['home', 'bell'].map(item => <NavIcon key={item} name={item} />)}
+          </nav>
+        )
+      }
+    `
+
+    const result = compileJSX(source, 'Shell.tsx', { adapter })
+    const errs = result.errors.filter(e => e.severity === 'error')
+    expect(errs.filter(e => e.code === 'BF048')).toHaveLength(0)
+    expect(errs).toHaveLength(0)
+
+    const markedTemplate = result.files.find(f => f.type === 'markedTemplate')
+    expect(markedTemplate).toBeDefined()
+    expect(markedTemplate!.content).toContain('function NavIcon')
+  })
+
+  test('legal neighbor: a non-"use client" file never trips BF048, even when a sibling lands in componentNames', () => {
+    // The #932 bypass only skips NON-exported multi-return functions, so an
+    // exported switch-dispatch sibling in a non-client file IS in
+    // `componentNames` and produces no entry — the same set-difference shape
+    // BF048 keys on. But the diagnostic's premise (the 'use client' branch
+    // of #932, `ReferenceError` at hydrate time) doesn't apply outside
+    // client files, so BF048 is gated on a compiled client entry and must
+    // stay silent here.
+    const source = `
+      export function NavIcon({ name }: { name: string }) {
+        switch (name) {
+          case 'home': return <svg><path d="M1"/></svg>
+          case 'bell': return <svg><path d="M2"/></svg>
+          default: return null
+        }
+      }
+      export function Shell() {
+        return (
+          <nav>
+            {['home', 'bell'].map(item => <NavIcon key={item} name={item} />)}
+          </nav>
+        )
+      }
+    `
+
+    const result = compileJSX(source, 'Shell.tsx', { adapter })
+    const errs = result.errors.filter(e => e.severity === 'error')
+    expect(errs.filter(e => e.code === 'BF048')).toHaveLength(0)
+  })
+
+  test('legal neighbor: a "use client" sibling whose multi-return body DOES compile (if/else chain, #1401) stays clean', () => {
+    // if/else-if chains fold into `conditionalReturns` (#1401) and produce
+    // a real ternary template, so the sibling ends up in `entries` and the
+    // reference resolves. BF048 must not fire.
+    const source = `
+      "use client"
+      import { createSignal } from '@barefootjs/client'
+      function Badge({ kind }: { kind: string }) {
+        if (kind === 'ok') return <span class="ok">ok</span>
+        if (kind === 'warn') return <span class="warn">warn</span>
+        return <span class="err">err</span>
+      }
+      export function Panel() {
+        const [n, setN] = createSignal(0)
+        return (
+          <div onClick={() => setN(n() + 1)}>
+            <Badge kind="ok" />
+          </div>
+        )
+      }
+    `
+
+    const result = compileJSX(source, 'Panel.tsx', { adapter })
+    const errs = result.errors.filter(e => e.severity === 'error')
+    expect(errs.filter(e => e.code === 'BF048')).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    // Both the Panel and Badge components' hydrate() registrations exist
+    // with real templates — the sibling reference resolves. Badge is a
+    // non-exported sibling so its runtime key is file-scoped
+    // (`Badge__<hash>`); match on the `name: 'Badge'` metadata instead of
+    // the registry key.
+    expect(clientJs!.content).toMatch(/hydrate\('Badge[^']*',\s*\{[^}]*template:/s)
+    expect(clientJs!.content).toContain("name: 'Badge'")
+  })
+
+  test('legal neighbor: single-component "use client" multi-return root (#1401) is unaffected', () => {
+    // Only one component in the file, so `compileJSX` never enters the
+    // multi-component path where BF048 is computed at all.
+    const source = `
+      "use client"
+      import { createSignal } from '@barefootjs/client'
+      export function Toggle(props: { asChild?: boolean }) {
+        const [open, setOpen] = createSignal(false)
+        if (props.asChild) {
+          return <span onClick={() => setOpen(!open())}>child</span>
+        }
+        return <button onClick={() => setOpen(!open())}>toggle</button>
+      }
+    `
+
+    const result = compileJSX(source, 'Toggle.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    expect(clientJs!.content).toContain('template:')
+  })
+
+  test('legal neighbor: a component-scope local JSX factory does not trip BF048', () => {
+    // `listComponentFunctions` recurses into function bodies, so a local
+    // factory like `Inner` below lands in `componentNames` and produces no
+    // standalone template — but its call sites are handled by the
+    // JSX-function-inlining pass, not `createComponent`, so it is NOT the
+    // dropped-sibling shape. BF048's uncompiled-sibling set is restricted
+    // to module top-level declarations precisely so this stays legal (the
+    // first BF048 cut flagged it and broke the ir-dynamic-tag corpus).
+    // Two components so the multi-component path (where BF048 runs) engages.
+    const source = `
+      "use client"
+      import { createSignal } from '@barefootjs/client'
+      export function Demo() {
+        const Inner = () => <span>x</span>
+        const [n, setN] = createSignal(0)
+        return <div onClick={() => setN(n() + 1)}><Inner /></div>
+      }
+      export function Other() {
+        return <p>other</p>
+      }
+    `
+
+    const result = compileJSX(source, 'demo.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+  })
+})