@barefootjs/jsx 0.17.0 → 0.18.0

package/src/jsx-to-ir.ts

@@ -23,6 +23,7 @@ import {
   type AttrValue,
   type IRTemplatePart,
   type LoopParamBinding,
+  type LoopBindingPathSegment,
   type RestExcludeKey,
   type FlatMapCallback,
   type FlatMapJsxFragment,
@@ -34,7 +35,8 @@ import {
 } from './types.ts'
 import { type AnalyzerContext, type MultiReturnJsxInfo, getSourceLocation, collectReactiveGetterNames } from './analyzer-context.ts'
 import { parseExpression, isSupported, parseBlockBody, foldBlockToExpr, predicateTernaryToLogical, tsNodeToParsedExpr, sortComparatorFromArrow, stringifyParsedExpr, cssKebabCase, type ParsedExpr } from './expression-parser.ts'
-import type { IRLoopSort } from './types.ts'
+import type { IRLoopSort, FunctionInfo } from './types.ts'
+import { formatParamWithType } from './module-exports.ts'
 import { createError, ErrorCodes, internalInvariant } from './errors.ts'
 import { CLIENT_BUILTIN_SOURCE, isClientBuiltinName, type ClientBuiltinTag } from './builtins.ts'
 import { containsReactiveExpression } from './reactivity-checker.ts'
@@ -1568,6 +1570,12 @@ function transformExpressionInner(
   node: ts.JsxExpression,
   isClientOnly: boolean,
 ): IRNode | null {
+  // #2092: `{cn\`base ${tone()}\`}` in JSX-child position — same desugar
+  // as the attribute path (`getAttributeValue`), applied first so every
+  // check below (JSX-constant inlining, the shared dispatcher, the
+  // scalar fallback's `ctx.getJS`) sees the untagged template literal.
+  expr = tryDesugarInterleaveTaggedTemplate(expr, ctx)
+
   // Check for bare signal/memo identifier (BF044)
   checkBareSignalOrMemoIdentifier(expr, ctx)
 
@@ -2440,35 +2448,57 @@ type SortExtractionResult = {
  * (eval-first) and the client's JS round-trip. Accepted catalogue: subtraction
  * (`a.f - b.f`, `a - b`, reverse for desc), `.localeCompare`, and the
  * relational-ternary sign forms; any of them `||`-chained for multi-key.
+ *
+ * A bare identifier callback (`.sort(byPrice)`, #2090) is resolved one hop
+ * through {@link resolveSortComparatorIdentifier} — a module- or
+ * component-scope `const byPrice = (a, b) => …` or `function byPrice(a, b)
+ * {…}` — before falling into the same arrow + catalogue gate below, so a
+ * resolved reference is byte-for-byte equivalent to inlining it. Alias
+ * chains (`const c2 = c1`) and imported/prop identifiers are NOT followed —
+ * they surface a distinct "could not be resolved" BF021.
  */
 function extractSortComparator(
   callback: ts.Expression,
   _method: 'sort' | 'toSorted',
   ctx: TransformContext
 ): SortExtractionResult {
-  const unsupported = (): SortExtractionResult => {
-    // Surface the OUTER callback source — users see the string they wrote.
-    const raw = ctx.getJS(callback)
-    return {
-      result: null,
-      unsupportedReason:
-        `Sort comparator '${raw}' is not a supported shape. Accepted:\n` +
-        `  (a, b) => a - b\n` +
-        `  (a, b) => a.field - b.field\n` +
-        `  (a, b) => a.localeCompare(b)\n` +
-        `  (a, b) => a.field.localeCompare(b.field)\n` +
-        `  (a, b) => a.field > b.field ? 1 : a.field < b.field ? -1 : 0\n` +
-        `  any of the above '||'-chained for multi-key tie-breaks\n` +
-        `(reverse the operands for descending order).`,
+  // Surface the OUTER callback source — users see the string they wrote
+  // (for an identifier callback, `ctx.getJS` returns just the bare name).
+  const outerRaw = ctx.getJS(callback)
+  const unsupported = (): SortExtractionResult => ({
+    result: null,
+    unsupportedReason:
+      `Sort comparator '${outerRaw}' is not a supported shape. Accepted:\n` +
+      `  (a, b) => a - b\n` +
+      `  (a, b) => a.field - b.field\n` +
+      `  (a, b) => a.localeCompare(b)\n` +
+      `  (a, b) => a.field.localeCompare(b.field)\n` +
+      `  (a, b) => a.field > b.field ? 1 : a.field < b.field ? -1 : 0\n` +
+      `  any of the above '||'-chained for multi-key tie-breaks\n` +
+      `(reverse the operands for descending order).`,
+  })
+
+  let resolvedNode: ts.Expression = callback
+  if (ts.isIdentifier(callback)) {
+    const resolved = resolveSortComparatorIdentifier(callback.text, ctx)
+    if (!resolved) {
+      return {
+        result: null,
+        unsupportedReason:
+          `Sort comparator '${outerRaw}' could not be resolved to a local function — ` +
+          `declare it in the same file or inline it.`,
+      }
     }
+    resolvedNode = resolved
   }
-  if (!ts.isArrowFunction(callback) && !ts.isFunctionExpression(callback)) {
+
+  if (!ts.isArrowFunction(resolvedNode) && !ts.isFunctionExpression(resolvedNode)) {
     return {
       result: null,
       unsupportedReason: 'Sort comparator must be an arrow function or function expression',
     }
   }
-  const arrow = tsNodeToParsedExpr(callback)
+  const arrow = tsNodeToParsedExpr(resolvedNode)
   if (arrow.kind !== 'arrow' || arrow.params.length !== 2) return unsupported()
   // Gate on the same catalogue the localeCompare fallback recovers, so the
   // hoist decision (and thus the SSR/client split) is byte-for-byte unchanged.
@@ -2483,6 +2513,47 @@ function extractSortComparator(
   }
 }
 
+/**
+ * Resolve a bare-identifier sort comparator callback (`.sort(byPrice)`,
+ * #2090) to its underlying arrow / function-expression node, ONE HOP only
+ * — no alias chains (`const c2 = c1` is not followed; `c2` resolves to the
+ * identifier `c1`, not a function, and is left unresolved).
+ *
+ * A name bound BOTH as a const and as a `function` declaration is refused
+ * outright. In valid JS that collision only occurs across scopes (a
+ * same-scope redeclaration is a syntax error), and `FunctionInfo` does not
+ * carry the source scope — component-body `function` declarations are
+ * hoisted to module scope for client emission, so its `isModule` reflects
+ * EMISSION placement, not lexical position. Picking either binding would
+ * risk compiling the comparator the call site can't actually see (Copilot
+ * review on #2091), so the ambiguity resolves to the loud unresolved
+ * BF021 instead of a guess. Within a single kind, the existing
+ * shadowing-aware lookups apply (`findLocalConst` / `findLocalFunction`:
+ * component scope beats module scope, last in source order); a binding
+ * that isn't an arrow / function expression fails resolution without any
+ * cross-kind fallback.
+ *
+ * Returns null when the name doesn't resolve to a local arrow /
+ * function-expression — covers the cross-kind ambiguity, a non-function
+ * const, an import, a prop, or a name with no local binding at all. The
+ * caller surfaces BF021 either way; the specific message (off-catalogue
+ * vs. unresolved) is decided by the caller, not here.
+ */
+function resolveSortComparatorIdentifier(name: string, ctx: TransformContext): ts.Expression | null {
+  const constInfo = findLocalConst(name, ctx)
+  const fnInfo = findLocalFunction(name, ctx)
+  if (constInfo && fnInfo) return null
+  if (constInfo) {
+    const ast = parseConstInitializer(constInfo)
+    return ast && (ts.isArrowFunction(ast) || ts.isFunctionExpression(ast)) ? ast : null
+  }
+  if (fnInfo) {
+    const ast = parseFunctionInfoAsExpr(fnInfo)
+    return ast && (ts.isArrowFunction(ast) || ts.isFunctionExpression(ast)) ? ast : null
+  }
+  return null
+}
+
 /**
  * Result type for extractFilterPredicate. The predicate is always an expression:
  * a block body is normalized to one via `foldBlockToExpr` +
@@ -2650,7 +2721,11 @@ function extractLoopParamBindings(
       : `${prefix}[${JSON.stringify(key)}]`
   }
 
-  const walk = (p: ts.ArrayBindingPattern | ts.ObjectBindingPattern, prefix: string): void => {
+  const walk = (
+    p: ts.ArrayBindingPattern | ts.ObjectBindingPattern,
+    prefix: string,
+    segments: readonly LoopBindingPathSegment[],
+  ): void => {
     if (unsupported) return
     if (ts.isArrayBindingPattern(p)) {
       const elements = p.elements
@@ -2676,14 +2751,16 @@ function extractLoopParamBindings(
             name: el.name.text,
             path: prefix,
             rest: { kind: 'array', from: index },
+            segments,
           })
           return
         }
         const path = `${prefix}[${index}]`
+        const nextSegments = [...segments, { kind: 'index', index } as const]
         if (ts.isIdentifier(el.name)) {
-          bindings.push({ name: el.name.text, path })
+          bindings.push({ name: el.name.text, path, segments: nextSegments })
         } else {
-          walk(el.name, path)
+          walk(el.name, path, nextSegments)
         }
       }
       return
@@ -2712,6 +2789,7 @@ function extractLoopParamBindings(
           name: el.name.text,
           path: prefix,
           rest: { kind: 'object', exclude: collectedKeys },
+          segments,
         })
         return
       }
@@ -2728,18 +2806,20 @@ function extractLoopParamBindings(
         unsupported = true
         return
       }
-      collectedKeys.push({ key: keyText, isIdent: isIdent(keyText) })
+      const keyIsIdent = isIdent(keyText)
+      collectedKeys.push({ key: keyText, isIdent: keyIsIdent })
       const path = appendDotAccess(prefix, keyText)
+      const nextSegments = [...segments, { kind: 'field', key: keyText, isIdent: keyIsIdent } as const]
       if (ts.isIdentifier(el.name)) {
-        bindings.push({ name: el.name.text, path })
+        bindings.push({ name: el.name.text, path, segments: nextSegments })
       } else {
-        walk(el.name, path)
+        walk(el.name, path, nextSegments)
       }
     }
   }
 
   if (ts.isArrayBindingPattern(pattern) || ts.isObjectBindingPattern(pattern)) {
-    walk(pattern, '')
+    walk(pattern, '', [])
     if (unsupported) return { unsupported: true }
     return bindings
   }
@@ -4043,6 +4123,13 @@ function getAttributeValue(attr: ts.JsxAttribute, ctx: TransformContext): AttrVa
       }
     }
 
+    // #2092: `className={cn\`base ${tone()}\`}` — a tagged template whose
+    // tag resolves to a recognized interleave function desugars to the
+    // equivalent untagged template literal, so every check below (static
+    // style object, template-literal parts, ternary, generic expression)
+    // sees it exactly as if the user had written the untagged form.
+    expr = tryDesugarInterleaveTaggedTemplate(expr, ctx)
+
     // BF062: AwaitExpression in attribute position
     if (ts.isAwaitExpression(expr)) {
       ctx.analyzer.errors.push(
@@ -4281,6 +4368,22 @@ function findLocalConst(name: string, ctx: TransformContext) {
   return pool[pool.length - 1]
 }
 
+/**
+ * Resolve a `function` declaration name with the same shadowing-aware
+ * lookup as {@link findLocalConst} — a component-scope declaration wins
+ * over a module-scope one of the same name, and among several
+ * component-scope declarations the last in source order wins.
+ *
+ * Returns undefined when no local function matches.
+ */
+function findLocalFunction(name: string, ctx: TransformContext) {
+  const matches = ctx.analyzer.localFunctions.filter(f => f.name === name)
+  if (matches.length === 0) return undefined
+  const fnScoped = matches.filter(f => !f.isModule)
+  const pool = fnScoped.length > 0 ? fnScoped : matches
+  return pool[pool.length - 1]
+}
+
 /**
  * Detect a PascalCase JSX tag that is really a *dynamic tag* local
  * (`const Tag = children.tag`) rather than a component reference.
@@ -4463,6 +4566,288 @@ function astText(node: ts.Node): string {
   return node.getText(node.getSourceFile())
 }
 
+/**
+ * Re-parse a `FunctionInfo` (a `function foo(...) {...}` declaration
+ * collected by the analyzer) into an anonymous `ts.FunctionExpression`, for
+ * the same reason `parseConstInitializer` re-parses a const's initializer
+ * text — the analyzer stores source text, not a live AST node tied to
+ * `ctx.sourceFile`.
+ *
+ * Wraps as `const __bf_resolve_fn__ = function(params) body` (an
+ * EXPRESSION position) rather than reparsing a standalone `function foo() {}`
+ * statement, because `convertNode` in expression-parser.ts only recognizes
+ * `ts.isArrowFunction` / `ts.isFunctionExpression` — not
+ * `ts.isFunctionDeclaration`. The returned node's parameters/body are then
+ * structurally identical to a function-expression sort comparator, so it
+ * flows through the existing `tsNodeToParsedExpr` → `sortComparatorFromArrow`
+ * path unchanged. Uses `typedParams`/`typedBody` when present (verbatim
+ * source, may carry type annotations that don't affect `ts.isIdentifier(p.name)`
+ * checks downstream) and falls back to reconstructing from `params`/`body`.
+ *
+ * Returns null when the source doesn't parse cleanly (e.g. no body).
+ * Memoized per `FunctionInfo` object identity — mirrors
+ * `constInitializerCache`.
+ */
+const functionInfoExprCache = new WeakMap<object, ts.Expression | null>()
+
+function parseFunctionInfoAsExpr(fn: FunctionInfo): ts.Expression | null {
+  const cached = functionInfoExprCache.get(fn as object)
+  if (cached !== undefined) return cached
+  const result = parseFunctionInfoAsExprImpl(fn)
+  functionInfoExprCache.set(fn as object, result)
+  return result
+}
+
+function parseFunctionInfoAsExprImpl(fn: FunctionInfo): ts.Expression | null {
+  if (!fn.body) return null
+  const params = fn.typedParams !== undefined
+    ? fn.typedParams
+    : fn.params.map(formatParamWithType).join(', ')
+  const body = fn.typedBody ?? fn.body
+  const wrapped = `const __bf_resolve_fn__ = function(${params}) ${body}`
+  const sf = ts.createSourceFile(
+    '__bf_resolve_fn.ts',
+    wrapped,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ true,
+    ts.ScriptKind.TS,
+  )
+  const stmt = sf.statements[0]
+  if (!stmt || !ts.isVariableStatement(stmt)) return null
+  const decl = stmt.declarationList.declarations[0]
+  if (!decl?.initializer) return null
+  return decl.initializer
+}
+
+// =============================================================================
+// Tagged-Template Interleave-Tag Desugaring (#2092, Refs #2069)
+// =============================================================================
+
+/**
+ * Recognize + desugar 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()}`}
+ *
+ * When `expr` is a top-level `ts.TaggedTemplateExpression` whose tag is an
+ * identifier resolving ONE HOP through same-file scope (`findLocalConst` /
+ * `findLocalFunction`, same shadowing preference as #2090's sort-comparator
+ * resolution) to a function structurally proven to be an "interleave tag"
+ * (see {@link isInterleaveTagFunction}), this rewrites the tagged template
+ * to the equivalent UNTAGGED template literal — each span wrapped in
+ * `(span) ?? ''` — and returns the new node. The entire existing pipeline
+ * (dep analysis, template-literal parts, adapter emit, client-JS binding)
+ * then processes the rewritten node exactly as if the user had written an
+ * untagged template literal directly; no adapter changes, no new IR node.
+ *
+ * Returns `expr` UNCHANGED when the tag doesn't resolve, resolves to
+ * something other than an arrow/function expression, or resolves but its
+ * body isn't the exact interleave-reduce shape (imported tags, computed
+ * tags like `obj.cn`, non-rest signatures, a tag that joins with `-`,
+ * etc.) — today's opaque-leaf behavior (adapter BF101) is preserved
+ * byte-for-byte for every other case.
+ *
+ * Top-level only (#2092 scope): a tagged template nested inside a ternary
+ * or map callback is not rewritten by this call — only the two call sites
+ * that receive an attribute value / JSX-child expression directly.
+ */
+function tryDesugarInterleaveTaggedTemplate(
+  expr: ts.Expression,
+  ctx: TransformContext,
+): ts.Expression {
+  if (!ts.isTaggedTemplateExpression(expr)) return expr
+  if (!ts.isIdentifier(expr.tag)) return expr
+
+  const resolvedTag = resolveInterleaveTagIdentifier(expr.tag.text, ctx)
+  if (!resolvedTag) return expr
+  if (!isInterleaveTagFunction(resolvedTag)) return expr
+
+  const rewritten = buildUntaggedTemplateLiteral(expr, ctx)
+  return rewritten ?? expr
+}
+
+/**
+ * Resolve a bare-identifier tag reference one hop through same-file scope
+ * — a `const cn = (parts, ...args) => …` or `function cn(parts, ...args)
+ * {…}` — reusing the exact `findLocalConst` / `findLocalFunction` lookup
+ * (and its shadowing preference) that #2090 established for sort
+ * comparators. Alias chains and imported/prop identifiers are NOT
+ * followed, matching that precedent. Returns null when nothing resolves.
+ */
+function resolveInterleaveTagIdentifier(name: string, ctx: TransformContext): ts.Expression | null {
+  const constInfo = findLocalConst(name, ctx)
+  const fnInfo = findLocalFunction(name, ctx)
+  // A name bound BOTH as a const and as a `function` declaration is the
+  // same cross-kind ambiguity `resolveSortComparatorIdentifier` refuses:
+  // it can only occur across scopes, and `FunctionInfo.isModule` reflects
+  // emission placement rather than lexical position, so picking either
+  // binding could desugar a tag the call site can't actually see. Refuse —
+  // the node stays opaque and keeps today's adapter BF101 (Copilot review
+  // on #2093).
+  if (constInfo && fnInfo) return null
+  if (constInfo) {
+    const ast = parseConstInitializer(constInfo)
+    return ast && (ts.isArrowFunction(ast) || ts.isFunctionExpression(ast)) ? ast : null
+  }
+  if (fnInfo) {
+    const ast = parseFunctionInfoAsExpr(fnInfo)
+    return ast && (ts.isArrowFunction(ast) || ts.isFunctionExpression(ast)) ? ast : null
+  }
+  return null
+}
+
+/**
+ * Structural catalogue gate for an "interleave tag" — the classname-cn
+ * idiom's tag function. Kept tight per #2092: a resolved tag that doesn't
+ * match EXACTLY this shape is left unrecognized (caller leaves the node
+ * untouched).
+ *
+ * Signature: exactly 2 params, first a plain (non-rest) identifier
+ * (`parts`), second a REST identifier param (`...args`). Type annotations
+ * are irrelevant — only the parsed structure is matched.
+ *
+ * Body (after the existing block-body → single-`return` folding that
+ * `tsNodeToParsedExpr` already performs):
+ *
+ *   parts.reduce((acc, p, i) => acc + p + (args[i] ?? ''), '')
+ *
+ * — receiver is the first param; the reduce callback has 3 plain
+ * identifier params; the callback body is a left-assoc `+` chain
+ * `(acc + p) + X` (any parenthesization — `tsNodeToParsedExpr` already
+ * discards parens) with `acc`/`p` the callback's first two params in
+ * that order; `X` is `args[i] ?? ''`, optionally wrapped in `String(...)`,
+ * with `args` the rest param and `i` the callback's third param; the
+ * reduce init arg is the empty string literal.
+ */
+function isInterleaveTagFunction(fn: ts.Expression): boolean {
+  if (!ts.isArrowFunction(fn) && !ts.isFunctionExpression(fn)) return false
+  if (fn.parameters.length !== 2) return false
+  const [partsParam, argsParam] = fn.parameters
+  if (!ts.isIdentifier(partsParam.name) || partsParam.dotDotDotToken) return false
+  if (!ts.isIdentifier(argsParam.name) || !argsParam.dotDotDotToken) return false
+
+  const parsed = tsNodeToParsedExpr(fn)
+  if (parsed.kind !== 'arrow') return false
+  return isInterleaveReduceCall(parsed.body, partsParam.name.text, argsParam.name.text)
+}
+
+/** Match `<partsName>.reduce((acc, p, i) => …, '')`. */
+function isInterleaveReduceCall(body: ParsedExpr, partsName: string, argsName: string): boolean {
+  if (body.kind !== 'call' || body.args.length !== 2) return false
+  const { callee, args } = body
+  if (callee.kind !== 'member' || callee.computed || callee.property !== 'reduce') return false
+  if (callee.object.kind !== 'identifier' || callee.object.name !== partsName) return false
+
+  const [callback, init] = args
+  if (init.kind !== 'literal' || init.literalType !== 'string' || init.value !== '') return false
+  if (callback.kind !== 'arrow' || callback.params.length !== 3) return false
+
+  const [acc, p, i] = callback.params
+  return isInterleaveReduceCallbackBody(callback.body, acc, p, i, argsName)
+}
+
+/** Match `(acc + p) + X` where X is the per-span interleave expression. */
+function isInterleaveReduceCallbackBody(
+  body: ParsedExpr,
+  acc: string,
+  p: string,
+  i: string,
+  argsName: string,
+): boolean {
+  if (body.kind !== 'binary' || body.op !== '+') return false
+  const { left, right } = body
+  if (left.kind !== 'binary' || left.op !== '+') return false
+  if (left.left.kind !== 'identifier' || left.left.name !== acc) return false
+  if (left.right.kind !== 'identifier' || left.right.name !== p) return false
+  return isInterleaveSpanExpr(right, i, argsName)
+}
+
+/** Match `args[i] ?? ''`, optionally wrapped in `String(...)`. */
+function isInterleaveSpanExpr(expr: ParsedExpr, i: string, argsName: string): boolean {
+  let inner = expr
+  if (
+    inner.kind === 'call' &&
+    inner.args.length === 1 &&
+    inner.callee.kind === 'identifier' &&
+    inner.callee.name === 'String'
+  ) {
+    inner = inner.args[0]
+  }
+  if (inner.kind !== 'logical' || inner.op !== '??') return false
+  if (inner.right.kind !== 'literal' || inner.right.literalType !== 'string' || inner.right.value !== '') {
+    return false
+  }
+  const idx = inner.left
+  if (idx.kind !== 'index-access') return false
+  if (idx.object.kind !== 'identifier' || idx.object.name !== argsName) return false
+  if (idx.index.kind !== 'identifier' || idx.index.name !== i) return false
+  return true
+}
+
+/**
+ * Build the untagged template literal equivalent to a recognized
+ * interleave-tag call: `cn\`base ${tone()}\`` → `` `base ${(tone()) ?? ''}` ``.
+ *
+ * Each literal chunk uses its RAW source text (`rawText`, falling back to
+ * the cooked `text` only if `rawText` is unexpectedly absent) so escapes
+ * (a literal backtick, `${`, or backslash inside a chunk) survive
+ * verbatim — pasting the COOKED text back into new template source would
+ * mis-parse or silently change meaning. Each span expression uses
+ * `ctx.getJS` (type-stripped, matching every other raw-text extraction in
+ * this file) wrapped as `${(<expr>) ?? ''}`.
+ *
+ * The assembled text is re-parsed the same way `parseConstInitializer`
+ * re-parses a const initializer (wrapped in `const __bf_… = (…)` so the
+ * result lands in expression position). Returns null if the reparse
+ * doesn't produce a clean template-literal expression (defensive; should
+ * not happen for well-formed input).
+ */
+function buildUntaggedTemplateLiteral(
+  node: ts.TaggedTemplateExpression,
+  ctx: TransformContext,
+): ts.Expression | null {
+  const template = node.template
+
+  let text: string
+  if (ts.isNoSubstitutionTemplateLiteral(template)) {
+    text = '`' + (template.rawText ?? template.text) + '`'
+  } else {
+    let body = template.head.rawText ?? template.head.text
+    for (const span of template.templateSpans) {
+      const spanText = ctx.getJS(span.expression)
+      body += '${(' + spanText + ') ?? \'\'}'
+      body += span.literal.rawText ?? span.literal.text
+    }
+    text = '`' + body + '`'
+  }
+
+  const wrapped = `const __bf_resolve_tagged__ = (${text})`
+  // ScriptKind.TSX (unlike the const/function-resolution re-parses above,
+  // which parse comparator/tag FUNCTION BODIES): the span expressions are
+  // verbatim attribute-position text from a .tsx component, so they were
+  // originally parsed under TSX rules — re-parsing them as plain TS can
+  // mis-parse or reject valid TSX span syntax and silently skip the
+  // rewrite (Copilot review on #2093).
+  const sf = ts.createSourceFile(
+    '__bf_resolve_tagged.tsx',
+    wrapped,
+    ts.ScriptTarget.Latest,
+    /* setParentNodes */ true,
+    ts.ScriptKind.TSX,
+  )
+  const stmt = sf.statements[0]
+  if (!stmt || !ts.isVariableStatement(stmt)) return null
+  const decl = stmt.declarationList.declarations[0]
+  if (!decl?.initializer) return null
+  const result = ts.isParenthesizedExpression(decl.initializer)
+    ? decl.initializer.expression
+    : decl.initializer
+  if (!ts.isTemplateExpression(result) && !ts.isNoSubstitutionTemplateLiteral(result)) return null
+  return result
+}
+
 /**
  * Parse a conditional (ternary) expression into structured form.
  * Only parses simple ternaries with string literal branches.