@barefootjs/jsx 0.17.1 → 0.18.0

package/src/__tests__/serialize-parsed-expr.test.ts

@@ -121,8 +121,10 @@ describe('serializeParsedExpr', () => {
   test('purity gate: a folded method call in the body → null', () => {
     // `.toUpperCase()` folds to `array-method`, outside the evaluator surface.
     expect(serializeParsedExpr(parseExpression('item.name.toUpperCase()'))).toBeNull()
-    // A higher-order call (`.filter`) likewise.
-    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => t)'))).toBeNull()
+    // A higher-order call OTHER than `.map`/`.filter` (#2094 widens only
+    // those two) still folds — `.some` returns a boolean-from-search, not a
+    // per-element transform, so it has no evaluator lowering.
+    expect(serializeParsedExpr(parseExpression('item.tags.some(t => t)'))).toBeNull()
     // An unsupported shape.
     expect(serializeParsedExpr(parseExpression('a instanceof B'))).toBeNull()
   })
@@ -159,8 +161,73 @@ describe('serializeParsedExpr', () => {
   })
 
   test('every other array-method still folds outside the evaluator surface', () => {
-    expect(serializeParsedExpr(parseExpression('item.tags.join(",")'))).toBeNull()
+    // `.join` is now serializable (#2094) — see the `.join` describe block
+    // below. `.slice` / `.flat` are not.
     expect(serializeParsedExpr(parseExpression('item.tags.slice(0, 1)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.flat()'))).toBeNull()
+  })
+
+  // ----- #2094: nested `.map` / `.filter` / `.join` inside a callback body --
+  test('`.join(sep?)` array-method serializes', () => {
+    expect(evalJSON('item.tags.join(",")')).toEqual({
+      kind: 'array-method',
+      method: 'join',
+      object: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'tags' },
+      args: [{ kind: 'literal', value: ',' }],
+    })
+    // No-arg form keeps an empty `args` (the evaluator defaults the separator).
+    expect(evalJSON('item.tags.join()')).toEqual({
+      kind: 'array-method',
+      method: 'join',
+      object: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'tags' },
+      args: [],
+    })
+  })
+
+  test('nested `.map(cb)` serializes as an ordinary call/member/arrow — NOT a bespoke wrapper', () => {
+    // Deliberately the SAME shape a top-level `.filter(t => t)` parses to —
+    // this is what lets the `eval-vectors.json` corpus (which carries the
+    // genuine `ParsedExpr`, unfiltered by `toEvalNode`) exercise the exact
+    // encoding the compiled-template embedded body uses.
+    expect(evalJSON("item.tags.map(t => '#' + t)")).toEqual({
+      kind: 'call',
+      callee: {
+        kind: 'member',
+        object: { kind: 'member', object: { kind: 'identifier', name: 'item' }, property: 'tags' },
+        property: 'map',
+        computed: false,
+      },
+      args: [
+        {
+          kind: 'arrow',
+          params: ['t'],
+          body: {
+            kind: 'binary',
+            op: '+',
+            left: { kind: 'literal', value: '#' },
+            right: { kind: 'identifier', name: 't' },
+          },
+        },
+      ],
+    })
+  })
+
+  test('nested `.filter(cb)` composed with `.length` and a comparison (the doc/#2038 shape) serializes', () => {
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => t.active).length > 0'))).not.toBeNull()
+  })
+
+  test('a 2-param nested arrow `(item, index)` serializes', () => {
+    expect(serializeParsedExpr(parseExpression('item.tags.map((t, i) => t.n + i)'))).not.toBeNull()
+  })
+
+  test('nested `.some`/`.find`/`.every`/`.sort`/`.reduce`/`.flat`/`.flatMap` still fold to null', () => {
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.some(p => p === t))'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.find(p => p === t))'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.every(p => p === t))'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.sort((a, b) => a - b).length > 0)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.reduce((a, b) => a + b, 0) > 0)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.flat().length > 0)'))).toBeNull()
+    expect(serializeParsedExpr(parseExpression('item.tags.filter(t => picked.flatMap(p => p).length > 0)'))).toBeNull()
   })
 
   test('a computed member value carries `computed: true` (plain access omits it)', () => {

package/src/__tests__/ssr-defaults.test.ts

@@ -82,6 +82,26 @@ describe('extractSsrDefaults', () => {
     expect(defaults?.initial).toEqual({ propName: 'initial', value: null })
   })
 
+  test('seeds every declared bare-props prop, including direct template reads (#2126)', () => {
+    // Template-stash adapters flatten `props.label` to the bare scalar
+    // `$label` even when no signal/memo references it (`<%= $label %>` in
+    // the body), so a prop the caller forgets to pass must still exist in
+    // the stash. Every prop declared on the props type gets an entry —
+    // not just the ones a signal / memo initializer reads.
+    const metadata = metadataFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function Greeting(props: { label?: string }) {
+        const [n, setN] = createSignal(0)
+        return <div><p>{props.label}</p><button onClick={() => setN(n() + 1)}>{n()}</button></div>
+      }
+    `)
+
+    const defaults = extractSsrDefaults(metadata)
+    expect(defaults?.label).toEqual({ propName: 'label', value: null })
+    expect(defaults?.n).toEqual({ value: 0 })
+  })
+
   test('memo derived from a signal evaluates through the chain', () => {
     const metadata = metadataFor(`
       'use client'

package/src/__tests__/staged-ir/11-template-primitive-registry.test.ts

@@ -5,14 +5,25 @@
  * rejections for callees the adapter promises it can render in template
  * scope.
  *
+ * #2069 extends this with two more acceptance mechanisms, tested in the
+ * two `describe` blocks at the bottom of this file:
+ *   - `RelocateEnv.loweringMatchers` — a THIRD acceptance path alongside
+ *     `templatePrimitives` / `acceptsTemplateCall`, for calls a
+ *     `LoweringPlugin` recognises structurally (never string-keyed).
+ *   - `RelocateEnv.aliasTargets` — one-hop alias resolution, so
+ *     `const fmt = customSerialize; fmt(x)` keys/matches as
+ *     `customSerialize`, not `fmt`.
+ *
  * No adapter populates the registry yet — the wiring is exercised here
- * via hand-built env objects. Phase 3 will fill the Hono predicate.
+ * via hand-built env objects. Phase 3 filled the Hono predicate; #2069
+ * adds the plugin-matcher and alias seams.
  */
 
 import { describe, test, expect } from 'bun:test'
 import type { RelocateEnv } from '../../relocate'
 import { isInlinableInTemplate } from '../../relocate'
 import type { BindingKind } from '../../types'
+import type { LoweringMatcher } from '../../lowering-registry'
 
 function envWith(
   bindings: Array<[string, BindingKind]>,
@@ -28,6 +39,8 @@ function envWith(
     allowFallback: options?.allowFallback ?? true,
     templatePrimitives: options?.templatePrimitives,
     acceptsTemplateCall: options?.acceptsTemplateCall,
+    loweringMatchers: options?.loweringMatchers,
+    aliasTargets: options?.aliasTargets,
   }
 }
 
@@ -256,3 +269,220 @@ describe('isInlinableInTemplate — adapter-aware acceptance (#1187 phase 2)', (
     })
   })
 })
+
+/** A `LoweringMatcher` that recognises a bare-identifier call to `name`. */
+function matcherFor(name: string): LoweringMatcher {
+  return (callee, args) => {
+    if (callee.kind !== 'identifier' || callee.name !== name) return null
+    return { kind: 'helper-call', helper: 'test_helper', args }
+  }
+}
+
+describe('isInlinableInTemplate — loweringMatchers acceptance (#2069)', () => {
+  test('a call recognised by a registered matcher is accepted', () => {
+    const env = envWith(
+      [
+        ['customSerialize', 'module-import'],
+        ['config', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        loweringMatchers: [matcherFor('customSerialize')],
+      },
+    )
+    const r = isInlinableInTemplate('customSerialize(config)', env)
+    expect(r.ok).toBe(true)
+    expect(r.rewrittenValue).toContain('customSerialize')
+  })
+
+  test('without a matching matcher, the call is still rejected', () => {
+    const env = envWith(
+      [
+        ['customSerialize', 'module-import'],
+        ['config', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        loweringMatchers: [matcherFor('someOtherHelper')],
+      },
+    )
+    const r = isInlinableInTemplate('customSerialize(config)', env)
+    expect(r.ok).toBe(false)
+  })
+
+  test('templatePrimitives / acceptsTemplateCall / loweringMatchers are all independent acceptance paths', () => {
+    // Only the matcher accepts here — no string-keyed entry exists at all.
+    const env = envWith(
+      [
+        ['customSerialize', 'module-import'],
+        ['config', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        templatePrimitives: {},
+        acceptsTemplateCall: () => false,
+        loweringMatchers: [matcherFor('customSerialize')],
+      },
+    )
+    const r = isInlinableInTemplate('customSerialize(config)', env)
+    expect(r.ok).toBe(true)
+  })
+
+  describe('shadow guard applies to matcher acceptance too', () => {
+    test('a local binding shadowing the recognised name is refused', () => {
+      // `customSerialize` here is a component-local (e.g. reassigned from
+      // a prop), NOT the module import the plugin's `prepare()` resolved
+      // against. The matcher itself has no way to know this — the shadow
+      // guard in `isCallAcceptedByAdapter` is what keeps it from firing.
+      const env = envWith(
+        [
+          ['customSerialize', 'init-local'], // shadows the import
+          ['config', 'prop'],
+        ],
+        {
+          propsObjectName: null,
+          loweringMatchers: [matcherFor('customSerialize')],
+        },
+      )
+      const r = isInlinableInTemplate('customSerialize(config)', env)
+      expect(r.ok).toBe(false)
+    })
+
+    test('module-import / module-local bindings still activate the matcher', () => {
+      const env = envWith(
+        [
+          ['customSerialize', 'module-local'],
+          ['config', 'prop'],
+        ],
+        {
+          propsObjectName: null,
+          loweringMatchers: [matcherFor('customSerialize')],
+        },
+      )
+      const r = isInlinableInTemplate('customSerialize(config)', env)
+      expect(r.ok).toBe(true)
+    })
+  })
+})
+
+describe('isInlinableInTemplate — one-hop alias resolution (#2069 R2)', () => {
+  test('alias → registered builtin (templatePrimitives) is accepted', () => {
+    // const fmt = Math.floor; fmt(score)
+    const env = envWith(
+      [
+        ['fmt', 'init-local'],
+        ['Math', 'global'],
+        ['score', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        aliasTargets: new Map([['fmt', 'Math.floor']]),
+        templatePrimitives: {
+          'Math.floor': (args) => `Math.floor(${args[0]})`,
+        },
+      },
+    )
+    const r = isInlinableInTemplate('fmt(score)', env)
+    expect(r.ok).toBe(true)
+    expect(r.rewrittenValue).toContain('Math.floor')
+  })
+
+  test('aliased-namespace MEMBER callee resolves too (const m = Math; m.floor)', () => {
+    // The leftmost segment is spliced and the `.path` tail carried over —
+    // `m.floor(score)` keys the registry as `Math.floor` (Copilot review
+    // on #2097 pinned that this is intended, not bare-identifier-only).
+    const env = envWith(
+      [
+        ['m', 'init-local'],
+        ['Math', 'global'],
+        ['score', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        aliasTargets: new Map([['m', 'Math']]),
+        templatePrimitives: {
+          'Math.floor': (args) => `Math.floor(${args[0]})`,
+        },
+      },
+    )
+    const r = isInlinableInTemplate('m.floor(score)', env)
+    expect(r.ok).toBe(true)
+  })
+
+  test('alias → a loweringMatchers-recognised import is accepted', () => {
+    // const serialize = customSerialize; serialize(config)
+    const env = envWith(
+      [
+        ['serialize', 'init-local'],
+        ['customSerialize', 'module-import'],
+        ['config', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        aliasTargets: new Map([['serialize', 'customSerialize']]),
+        loweringMatchers: [matcherFor('customSerialize')],
+      },
+    )
+    const r = isInlinableInTemplate('serialize(config)', env)
+    expect(r.ok).toBe(true)
+    expect(r.rewrittenValue).toContain('customSerialize')
+  })
+
+  test('alias → alias chain is refused — only ONE hop is resolved', () => {
+    // const g = f (f is itself just another local, never resolved further)
+    const env = envWith(
+      [
+        ['g', 'init-local'],
+        ['f', 'init-local'],
+        ['config', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        aliasTargets: new Map([['g', 'f']]),
+        // Maximally permissive predicate — even this can't help, because
+        // the shadow guard rejects on `f`'s own (unsafe) binding kind
+        // before the predicate is ever consulted.
+        acceptsTemplateCall: () => true,
+      },
+    )
+    const r = isInlinableInTemplate('g(config)', env)
+    expect(r.ok).toBe(false)
+  })
+
+  test('alias → a non-import component-local helper is refused', () => {
+    // const h = helper (helper is a local function/const, not module-scope)
+    const env = envWith(
+      [
+        ['h', 'init-local'],
+        ['helper', 'init-local'],
+        ['config', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        aliasTargets: new Map([['h', 'helper']]),
+        acceptsTemplateCall: () => true,
+      },
+    )
+    const r = isInlinableInTemplate('h(config)', env)
+    expect(r.ok).toBe(false)
+  })
+
+  test('a plain non-alias init-local is unaffected by aliasTargets being present', () => {
+    // Baseline: aliasTargets has entries for OTHER names, but this
+    // reference isn't one of them — falls through to the ordinary
+    // init-local fallback, same as if aliasTargets were absent.
+    const env = envWith(
+      [
+        ['count', 'init-local'],
+        ['config', 'prop'],
+      ],
+      {
+        propsObjectName: null,
+        aliasTargets: new Map([['fmt', 'Math.floor']]),
+      },
+    )
+    const r = isInlinableInTemplate('count', env)
+    expect(r.ok).toBe(true) // fallback to 'undefined', not a rejection
+    expect(r.rewrittenValue).toBe('undefined')
+  })
+})

package/src/__tests__/tagged-template-interleave.test.ts

@@ -0,0 +1,268 @@
+/**
+ * Tagged-template interleave-tag desugaring (#2092, Refs #2069).
+ *
+ * The classname-tag idiom:
+ *
+ *   function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+ *     return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+ *   }
+ *   className={cn`base ${tone()}`}
+ *
+ * Before #2092 the compiler treated `cn\`...\`` as an opaque scalar leaf: a
+ * `TaggedTemplateExpression` falls through `expression-parser.ts` as
+ * `unsupported`, and every non-JS template adapter refused it with BF101.
+ *
+ * #2092 resolves the tag identifier one hop through same-file scope (reusing
+ * #2090's `findLocalConst` / `findLocalFunction`), structurally proves the
+ * resolved function matches the "interleave tag" catalogue (see
+ * `isInterleaveTagFunction` in `jsx-to-ir.ts`), and — only then — REWRITES
+ * the whole tagged template to the equivalent untagged template literal
+ * (`\`base \${(tone()) ?? ''}\``) before the rest of the compiler ever sees
+ * it. Everything else (dep analysis, template-literal parts, adapter emit,
+ * client-JS binding) runs unchanged against the rewritten node.
+ *
+ * These tests exercise the recognizer directly against the IR (so assertions
+ * don't depend on any one adapter's output formatting) via `analyzeComponent`
+ * + `jsxToIR`, matching `ir-sort-comparator.test.ts`'s style for the sibling
+ * #2090 feature.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import type { IRElement, ExpressionAttr } from '../types'
+
+/** Compile `source` and return the root element's `className` attribute
+ *  value from the IR (the IR keeps the JSX name `className`; adapters
+ *  render it as `class` later). */
+function classAttrValue(source: string, filename = 'TagDemo.tsx') {
+  const ctx = analyzeComponent(source, filename)
+  const ir = jsxToIR(ctx)
+  expect(ir).not.toBeNull()
+  expect(ir!.type).toBe('element')
+  const el = ir as IRElement
+  const attr = el.attrs.find(a => a.name === 'className')
+  expect(attr).toBeDefined()
+  return attr!.value
+}
+
+describe('tagged-template interleave-tag recognition (#2092)', () => {
+  test('recognized cn`base ${tone()}` desugars to the untagged template literal', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        const [tone, setTone] = createSignal('primary')
+        return <div onClick={() => setTone('secondary')} className={cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    const expr = (value as ExpressionAttr).expr
+    // The tag call is gone — replaced by the equivalent untagged template
+    // literal, each span wrapped in `(span) ?? ''`.
+    expect(expr).not.toMatch(/\bcn`/)
+    expect(expr).toBe("`base ${(tone()) ?? ''}`")
+  })
+
+  test('const-bound arrow interleave tag also resolves (findLocalConst path)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      const cn = (parts: TemplateStringsArray, ...args: unknown[]): string =>
+        parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+      export function TagDemo() {
+        const [tone, setTone] = createSignal('primary')
+        return <div onClick={() => setTone('secondary')} className={cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    expect((value as ExpressionAttr).expr).toBe("`base ${(tone()) ?? ''}`")
+  })
+
+  test('String(...)-wrapped span still matches the catalogue', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + String(args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        const [tone] = createSignal('primary')
+        return <div className={cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    expect((value as ExpressionAttr).expr).toBe("`base ${(tone()) ?? ''}`")
+  })
+
+  test('no-substitution template (no interpolation) desugars cleanly', () => {
+    const source = `
+      'use client'
+      function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        return <div className={cn\`base\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    // No spans at all — the rewrite produces a plain
+    // NoSubstitutionTemplateLiteral, not an "expression" carrying a call.
+    expect(value.kind).toBe('expression')
+    expect((value as ExpressionAttr).expr).toBe('`base`')
+    expect((value as ExpressionAttr).expr).not.toMatch(/\bcn`/)
+  })
+
+  test('escaped backtick / literal ${...} / backslash chunk survives the rewrite verbatim', () => {
+    // Chunk raw text (as written in source): `pre\` mid \${lit} end\\stop `
+    // — a literal backtick, a literal (non-substituting) `${lit}`, and a
+    // literal backslash, followed by the ONE real span `${tone()}`.
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        const [tone] = createSignal('primary')
+        return <div className={cn\`pre\\\` mid \\\${lit} end\\\\stop \${tone()} post\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    const expr = (value as ExpressionAttr).expr
+    // The escape sequences (backtick, `${`, backslash) must survive
+    // byte-for-byte in the rewritten source — using the COOKED text
+    // instead of `rawText` would either mis-parse the reconstructed
+    // template or silently turn `${lit}` into a real (broken) substitution.
+    expect(expr).toBe("`pre\\` mid \\${lit} end\\\\stop ${(tone()) ?? ''} post`")
+  })
+
+  test('imported tag identifier is NOT resolved — left untouched (today\'s BF101 path)', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      import { cn } from './cn-helper'
+      export function TagDemo() {
+        const [tone] = createSignal('primary')
+        return <div className={cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    // Unresolved (no same-file binding) — the tag call is preserved verbatim.
+    expect((value as ExpressionAttr).expr).toContain('cn`base')
+  })
+
+  test('cross-kind name collision (const + function binding) is NOT resolved', () => {
+    // Same ambiguity rule as resolveSortComparatorIdentifier (#2091 review):
+    // a name bound both as a const and as a `function` declaration can only
+    // occur across scopes, and FunctionInfo carries emission placement (not
+    // lexical position), so resolution refuses rather than guessing which
+    // tag the call site actually sees. The node stays opaque (BF101 path).
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        const [tone] = createSignal('primary')
+        const cn = (parts: TemplateStringsArray, ...args: unknown[]) =>
+          parts.reduce<string>((acc, p, i) => acc + p + '-' + (args[i] ?? ''), '')
+        return <div className={cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    expect((value as ExpressionAttr).expr).toContain('cn`base')
+  })
+
+  test('off-catalogue body (joins with a separator) is NOT recognized', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + '-' + (args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        const [tone] = createSignal('primary')
+        return <div className={cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    expect((value as ExpressionAttr).expr).toContain('cn`base')
+  })
+
+  test('computed tag (member expression) is NOT recognized', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      const helpers = {
+        cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+          return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+        },
+      }
+      export function TagDemo() {
+        const [tone] = createSignal('primary')
+        return <div className={helpers.cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    // Not even an Identifier tag — the recognizer only matches a bare
+    // identifier tag (`tryDesugarInterleaveTaggedTemplate` requires
+    // `ts.isIdentifier(expr.tag)`), so a computed tag is never attempted.
+    expect((value as ExpressionAttr).expr).toContain('helpers.cn`base')
+  })
+
+  test('non-rest second parameter is NOT recognized', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function cn(parts: TemplateStringsArray, args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        const [tone] = createSignal('primary')
+        return <div className={cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const value = classAttrValue(source)
+    expect(value.kind).toBe('expression')
+    expect((value as ExpressionAttr).expr).toContain('cn`base')
+  })
+
+  test('/* @client */ still defers a recognized interleave tag to the client', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      function cn(parts: TemplateStringsArray, ...args: unknown[]): string {
+        return parts.reduce<string>((acc, p, i) => acc + p + (args[i] ?? ''), '')
+      }
+      export function TagDemo() {
+        const [tone, setTone] = createSignal('primary')
+        return <div onClick={() => setTone('secondary')} className={/* @client */ cn\`base \${tone()}\`}>x</div>
+      }
+    `
+    const ctx = analyzeComponent(source, 'TagDemo.tsx')
+    const ir = jsxToIR(ctx)
+    expect(ir).not.toBeNull()
+    const el = ir as IRElement
+    const attr = el.attrs.find(a => a.name === 'className')
+    expect(attr).toBeDefined()
+    // The desugar still applies (the client-only directive doesn't block
+    // recognition — it's read independently from the original node), and
+    // the attribute is still flagged clientOnly so it defers to hydrate.
+    expect(attr!.clientOnly).toBe(true)
+    expect(attr!.value.kind).toBe('expression')
+    expect((attr!.value as ExpressionAttr).expr).toBe("`base ${(tone()) ?? ''}`")
+  })
+})