@barefootjs/jsx 0.31.7 → 0.31.9

package/src/__tests__/text-slot-escaping.test.ts

@@ -1,15 +1,23 @@
 /**
- * Text-slot HTML-escaping emit shape (#1694 + follow-up).
+ * Text-slot HTML-escaping emit shape (#1694 + follow-up, #2651).
  *
- * Pins which interpolations the client template wraps in `escapeText`:
- *   - a plain text slot (`{stringValue}`) IS escaped — it becomes the
- *     slot's text content under `innerHTML`;
+ * Pins which interpolations the client template wraps in an escape call:
+ *   - a plain, non-conditional dynamic text slot (`{stringValue}`) IS
+ *     escaped — it becomes the slot's text content under `innerHTML`. Since
+ *     #2651 this goes through `escapeTextOrMarkup`, not bare `escapeText`:
+ *     the slot is claim-plan `kind: 'markup'` (the value may be a live
+ *     `Node`, or a `bfMarkup()`-branded JSX-element-prop value), and
+ *     `escapeTextOrMarkup` is a strict superset of `escapeText` for every
+ *     non-branded value — this pin's actual escaping behaviour for a plain
+ *     string is unchanged, only the call name changed to match the
+ *     REACTIVE side's existing `escapeTextOrNode` classification;
  *   - a branch-slot expression (Child-position value inside a conditional
  *     `template()` arrow) is routed through `__bfSlot` and must NOT be
- *     wrapped in `escapeText`. `__bfSlot` returns raw `<!--bf-slot:N-->`
- *     markers for live nodes; escaping the whole call corrupts them and
- *     drops slotted content (the regression that broke `e2e-site-ui`).
- *     `__bfSlot` escapes its own plain-string path internally instead.
+ *     wrapped in either escape call. `__bfSlot` returns raw
+ *     `<!--bf-slot:N-->` markers for live nodes; escaping the whole call
+ *     corrupts them and drops slotted content (the regression that broke
+ *     `e2e-site-ui`). `__bfSlot` escapes its own plain-string path
+ *     internally instead.
  */
 
 import { describe, test, expect } from 'bun:test'
@@ -27,7 +35,7 @@ function getClientJs(source: string, filename: string): string {
 }
 
 describe('text-slot escaping', () => {
-  test('a plain text slot is wrapped in escapeText', () => {
+  test('a plain text slot is wrapped in escapeTextOrMarkup (#2651)', () => {
     const clientJs = getClientJs(
       `'use client'
        export function Label({ text }: { text: string }) {
@@ -35,10 +43,10 @@ describe('text-slot escaping', () => {
        }`,
       'Label.tsx',
     )
-    expect(clientJs).toMatch(/<!--bf:\w+-->\$\{escapeText\(_p\.text\)\}<!--\/-->/)
+    expect(clientJs).toMatch(/<!--bf:\w+-->\$\{escapeTextOrMarkup\(_p\.text\)\}<!--\/-->/)
   })
 
-  test('a branch-slot expression is NOT wrapped in escapeText', () => {
+  test('a branch-slot expression is NOT wrapped in escapeTextOrMarkup or escapeText', () => {
     const clientJs = getClientJs(
       `'use client'
        import { createSignal } from '@barefootjs/client'
@@ -50,7 +58,8 @@ describe('text-slot escaping', () => {
     )
     // The branch value goes through __bfSlot (raw markers preserved)…
     expect(clientJs).toMatch(/\$\{__bfSlot\(/)
-    // …and must never be double-wrapped by the text escape.
+    // …and must never be double-wrapped by either text-escape call.
+    expect(clientJs).not.toMatch(/escapeTextOrMarkup\(\s*__bfSlot/)
     expect(clientJs).not.toMatch(/escapeText\(\s*__bfSlot/)
   })
 })

package/src/ir-to-client-js/collect-elements.ts

@@ -7,7 +7,7 @@ import type { ClientJsContext, ConditionalBranchChildComponent, ConditionalBranc
 import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from './utils.ts'
 import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope, anyNameIn } from './reactivity.ts'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
-import { templateRootIsSvg } from './control-flow/stringify/template-parse.ts'
+import { detectRootNamespaceWrapTag } from './control-flow/stringify/template-parse.ts'
 import { expandDynamicPropValue, expandConstantForReactivity } from './prop-handling.ts'
 import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
 import { walkIR, stopAt } from './walker.ts'
@@ -463,6 +463,29 @@ function jsxChildrenContainComponent(nodes: IRNode[]): boolean {
   return false
 }
 
+/**
+ * Narrow gate for branding a `jsx-children` getter's value with `bfMarkup()`
+ * (#2651). The constructor (`jsx-to-ir.ts`'s `processComponentProps`) always
+ * stores exactly one node here (`AttrValueOf.jsxChildren([...])`), so
+ * `nodes[0]` is the whole payload; `irChildrenToJsExpr` (`html-template.ts`)
+ * turns a single `'element'` node into ONE HTML-string template literal —
+ * the same shape the `renderChild` / `irToComponentTemplateWithOpts` /
+ * `generateCsrTemplateWithOpts` "jsx-children" doors always produce (they
+ * join every child into one string regardless of shape), and the shape
+ * this fixture's `header={<strong>Title</strong>}` exercises.
+ *
+ * Deliberately narrow — NOT a general "does this reduce to one string"
+ * check: a `'fragment'` node (`header={<>text<strong/></>}`, multiple
+ * children) or a `'conditional'` node reduces through `irChildrenToJsExpr`
+ * to an array literal or a nested ternary of un-escaped-vs-escaped parts,
+ * for which `escapeTextOrNode`/`escapeTextOrMarkup` have no (array) or an
+ * unproven (ternary) contract. Those shapes are left unbranded — see
+ * #2651's door inventory — rather than guessed at here.
+ */
+function isSingleElementJsxChildren(nodes: IRNode[]): boolean {
+  return nodes.length === 1 && nodes[0].type === 'element'
+}
+
 /** Build rest spread names from context (rest/props spreads handled by applyRestAttrs, not spreadAttrs). */
 function buildRestSpreadNames(ctx: ClientJsContext): Set<string> {
   const names = new Set<string>()
@@ -502,6 +525,15 @@ function buildComponentPropsExpr(props: IRProp[], ctx: ClientJsContext): string
         const jsxExpr = irChildrenToJsExpr(prop.value.children)
         if (jsxChildrenContainComponent(prop.value.children)) {
           propsForInit.push(`get ${quotePropName(prop.name)}() { return __slot(() => ${jsxExpr}) }`)
+        } else if (prop.name !== 'children' && isSingleElementJsxChildren(prop.value.children)) {
+          // Brand (#2651): `jsxExpr` is the single HTML-string template
+          // literal `irChildrenToJsExpr` builds for a lone 'element' node —
+          // see `isSingleElementJsxChildren`'s docstring for why only this
+          // shape is branded here. Excludes an explicit `children={<jsx/>}`
+          // prop (out of scope, unchanged) — the child's `{children}`
+          // interpolation is a bare passthrough with no unwrap call, so a
+          // branded object there would stringify to `[object Object]`.
+          propsForInit.push(`get ${quotePropName(prop.name)}() { return bfMarkup(${jsxExpr}) }`)
         } else {
           propsForInit.push(`get ${quotePropName(prop.name)}() { return ${jsxExpr} }`)
         }
@@ -761,10 +793,11 @@ export function collectElements(
           }
           skeletonTemplate = buildLoopSkeletonTemplate(l.children[0], skeletonSafeSlots) ?? undefined
           // Direct child-index paths (perf, #2143): only attempted when the
-          // skeleton itself hoisted, and skipped for SVG roots for now (the
-          // `<svg>`-wrap namespace fix-up is orthogonal and untested against
-          // this path model — safe fallback to qsa/$t for those loops).
-          if (skeletonTemplate && !templateRootIsSvg(skeletonTemplate)) {
+          // skeleton itself hoisted, and skipped for SVG/MathML roots for
+          // now (the `<svg>`/`<math>`-wrap namespace fix-up is orthogonal
+          // and untested against this path model — safe fallback to
+          // qsa/$t for those loops).
+          if (skeletonTemplate && !detectRootNamespaceWrapTag(skeletonTemplate)) {
             skeletonPaths = computeSkeletonSlotPaths(l.children[0], skeletonSafeSlots) ?? undefined
           }
         }

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

@@ -33,7 +33,7 @@
 import { keyAttrName, profileBindingId, varSlotId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
-import { emitMultiRootTemplateCloneLines, templateRootIsSvg } from './template-parse.ts'
+import { emitMultiRootTemplateCloneLines, namespaceWrapForTemplate } from './template-parse.ts'
 import { emitLoopChildRefs } from './loop.ts'
 import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
 import type {
@@ -83,15 +83,15 @@ function emitReactive(lines: string[], inner: InnerLoopPlan, indent: string, pc:
     lines.push(`${innerIndent}  __innerEl${uid}.__bfExtras = __innerExtras${uid}`)
     lines.push(`${indent}  }`)
   } else {
-    // SVG-rooted item templates must parse inside a synthetic `<svg>` wrap
-    // (#2219): `template.innerHTML` parses in the HTML namespace, so a bare
-    // `<line>`/`<circle>` root clones as an HTMLUnknownElement and the SVG
-    // renderer silently draws nothing. Mirrors `templateRootIsSvg` handling
-    // on the top-level (#135/#1088) and branch-arm paths; HTML-rooted
-    // templates keep byte-identical output.
-    const isSvg = templateRootIsSvg(emit.wrappedTemplate)
-    const innerHtml = isSvg ? `<svg>${emit.wrappedTemplate}</svg>` : emit.wrappedTemplate
-    const childPath = isSvg ? '.firstElementChild.firstElementChild' : '.firstElementChild'
+    // SVG/MathML-rooted item templates must parse inside a synthetic
+    // namespace wrap (#2219, #1096): `template.innerHTML` parses in the
+    // HTML namespace, so a bare `<line>`/`<circle>`/`<mrow>` root clones as
+    // an HTMLUnknownElement and the SVG/MathML renderer silently draws
+    // nothing. Mirrors `namespaceWrapForTemplate` handling on the top-level
+    // (#135/#1088) and branch-arm paths; HTML-rooted templates keep
+    // byte-identical output.
+    const { wrapTag, childPath } = namespaceWrapForTemplate(emit.wrappedTemplate)
+    const innerHtml = wrapTag ? `<${wrapTag}>${emit.wrappedTemplate}</${wrapTag}>` : emit.wrappedTemplate
     lines.push(`${indent}  let __innerEl${uid} = __existing ?? (() => { const __t = document.createElement('template'); __t.innerHTML = \`${innerHtml}\`; return __t.content${childPath}.cloneNode(true) })()`)
   }
   if (emit.wrappedKey) {

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

@@ -14,7 +14,7 @@
 import { varSlotId, DATA_BF_PH, keyAttrName, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
-import { templateRootIsSvg } from './template-parse.ts'
+import { namespaceWrapForTemplate } from './template-parse.ts'
 import { emitListenerLine } from './event-listener.ts'
 import { nameForRegistryRef } from '../../component-scope.ts'
 import { claimPlanLiteral, claimWriterVarName, type ClaimSlotSpec } from './claim-plan.ts'
@@ -139,9 +139,8 @@ export function stringifyBranchInnerLoops(
       lines.push(`${indent}  ${inner.paramUnwrap}`)
     }
     {
-      const isSvg = templateRootIsSvg(inner.wrappedTemplate)
-      const innerHtml = isSvg ? `<svg>${inner.wrappedTemplate}</svg>` : inner.wrappedTemplate
-      const childPath = isSvg ? '.firstElementChild.firstElementChild' : '.firstElementChild'
+      const { wrapTag, childPath } = namespaceWrapForTemplate(inner.wrappedTemplate)
+      const innerHtml = wrapTag ? `<${wrapTag}>${inner.wrappedTemplate}</${wrapTag}>` : inner.wrappedTemplate
       lines.push(`${indent}  let __bel${uid} = __existing ?? (() => { const __t = document.createElement('template'); __t.innerHTML = \`${innerHtml}\`; return __t.content${childPath}.cloneNode(true) })()`)
     }
     if (inner.wrappedKey) {

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

@@ -32,7 +32,7 @@
 import { emitRefCall, varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { stringifyReactiveEffects } from './reactive-effects.ts'
-import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateDecl, hoistedCloneExpr, templateRootIsSvg, multiRootTemplateNeedsSvgWrap } from './template-parse.ts'
+import { emitTemplateCloneInline, emitLoopItemElementSetup, emitHoistedTemplateDecl, hoistedCloneExpr, namespaceWrapForTemplate, multiRootNamespaceWrapForTemplate, wrapHtmlForNamespace } from './template-parse.ts'
 import { buildSkeletonPathPlan, type SkeletonPathPlan } from './skeleton-paths.ts'
 import { stringifyComponentLoop } from './component-loop.ts'
 import { stringifyCompositeLoop } from './composite-loop.ts'
@@ -401,17 +401,21 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
   lines.push(`      let __iterEl = ${containerVar}.children[${childIndexExpr}]`)
   if (csrMaterialize) {
     lines.push(`      if (!__iterEl) {`)
-    // SVG-rooted item templates parse inside a synthetic `<svg>` wrap and
-    // descend one extra level (#2219) — `template.innerHTML` alone parses in
-    // the HTML namespace and the materialized elements would never draw.
-    // Mirrors `templateRootIsSvg` handling on the reactive clone paths;
-    // HTML-rooted templates keep byte-identical output. Multi-root fragments
-    // use the fragment-aware predicate so an `<svg>`-container-first fragment
-    // isn't over-wrapped (#2233 Copilot review).
-    const isSvg = csrMaterialize.bodyIsMultiRoot
-      ? multiRootTemplateNeedsSvgWrap(csrMaterialize.itemTemplate)
-      : templateRootIsSvg(csrMaterialize.itemTemplate)
-    const itemHtml = isSvg ? `<svg>${csrMaterialize.itemTemplate}</svg>` : csrMaterialize.itemTemplate
+    // SVG/MathML-rooted item templates parse inside a synthetic namespace
+    // wrap and descend one extra level (#2219, #1096) — `template.innerHTML`
+    // alone parses in the HTML namespace and the materialized elements
+    // would never draw. Reads the wrap decision AND descent path through
+    // the same single door as the reactive clone emitters
+    // (`namespaceWrapForTemplate`, #2662 Copilot review) so a future
+    // namespace or fragment-rule tweak can't update one path and miss the
+    // other; HTML-rooted templates keep byte-identical
+    // output. Multi-root fragments use the fragment-aware predicate so a
+    // `<svg>`/`<math>`-container-first fragment isn't over-wrapped (#2233
+    // Copilot review).
+    const { wrapTag, childPath } = csrMaterialize.bodyIsMultiRoot
+      ? multiRootNamespaceWrapForTemplate(csrMaterialize.itemTemplate)
+      : namespaceWrapForTemplate(csrMaterialize.itemTemplate)
+    const itemHtml = wrapHtmlForNamespace(csrMaterialize.itemTemplate, wrapTag)
     if (csrMaterialize.bodyIsMultiRoot) {
       // Multi-root: clone every top-level sibling of the per-item template and
       // insert them in order. `__iterEl` is the first root (the one reactive
@@ -420,7 +424,7 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
       lines.push(`        __mtpl.innerHTML = \`${itemHtml}\``)
       lines.push(`        const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)
       lines.push(`        let __first = null`)
-      lines.push(`        let __sib = __mtpl.content${isSvg ? '.firstElementChild' : ''}.firstElementChild`)
+      lines.push(`        let __sib = __mtpl.content${childPath}.firstElementChild`)
       lines.push(`        while (__sib) {`)
       lines.push(`          const __next = __sib.nextElementSibling`)
       lines.push(`          const __cloned = __sib.cloneNode(true)`)
@@ -432,7 +436,7 @@ export function stringifyStaticLoop(lines: string[], plan: StaticLoopPlan): void
     } else {
       lines.push(`        const __tpl = document.createElement('template')`)
       lines.push(`        __tpl.innerHTML = \`${itemHtml}\``)
-      lines.push(`        const __cloned = __tpl.content${isSvg ? '.firstElementChild' : ''}.firstElementChild`)
+      lines.push(`        const __cloned = __tpl.content${childPath}`)
       lines.push(`        if (__cloned) {`)
       lines.push(`          const __anchor = ${containerVar}.children[${childIndexExpr}] ?? null`)
       lines.push(`          ${containerVar}.insertBefore(__cloned, __anchor)`)

package/src/ir-to-client-js/control-flow/stringify/template-parse.ts

@@ -1,7 +1,7 @@
 /**
  * Helpers for emitting code that parses a template literal into a DOM
- * element clone, while preserving the SVG namespace when the loop body
- * root is an SVG element.
+ * element clone, while preserving the SVG/MathML namespace when the loop
+ * body root is a foreign-content element.
  *
  * Background (#135): the standard pattern
  *   `const __tpl = document.createElement('template')`
@@ -14,10 +14,14 @@
  * Editor block when a new edge `<path>` was appended via mapArray and
  * never showed up on the canvas.
  *
- * Fix: when the template's root tag is an SVG element, wrap the parsed
- * markup in a synthetic `<svg>` so the HTML5 parser walks into SVG
- * foreign content and assigns the correct namespace, then descend one
- * extra level to get the real root.
+ * Fix: when the template's root tag is an SVG (or, #1096, MathML) element,
+ * wrap the parsed markup in the matching synthetic namespace root
+ * (`<svg>` / `<math>`) so the HTML5 parser walks into foreign content and
+ * assigns the correct namespace, then descend one extra level to get the
+ * real root. The two namespaces share every byte of this machinery —
+ * only the wrap tag name differs — so `detectRootNamespaceWrapTag` and
+ * `namespaceWrapForTemplate` below are the single door every emitter
+ * (in this file and its consumers) reads the wrap decision through.
  */
 
 import { findInterpolationEnd, findTopLevelTemplateLiterals } from '../../../scanner/js-scanner.ts'
@@ -37,73 +41,140 @@ const SVG_ROOT_TAGS = new Set([
 ])
 
 /**
- * Decide whether a template literal needs SVG-context parsing.
- * Looks at the first opening tag in the literal. The check is purely
- * lexical so that interpolations inside attribute values do not
- * confuse it.
+ * MathML root tags (#1096 — port of the SVG fix above). `math` itself is
+ * included alongside the element vocabulary, mirroring how `svg` is
+ * included in `SVG_ROOT_TAGS`: a template whose bare root is the
+ * namespace container tag also needs the parser nudge (unlike the
+ * MULTI-ROOT fragment case in `multiRootTemplateNeedsNamespaceWrap`,
+ * where a container-first fragment already parses correctly on its own).
+ */
+const MATHML_ROOT_TAGS = new Set([
+  'math',
+  'mrow', 'mfrac', 'msup', 'msub', 'msubsup', 'mn', 'mi', 'mo', 'mtext',
+  'munder', 'mover', 'munderover', 'mtable', 'mtr', 'mtd',
+  'msqrt', 'mroot', 'mstyle', 'merror', 'mpadded', 'mphantom', 'menclose',
+  'semantics', 'annotation', 'annotation-xml',
+])
+
+/** Namespaces whose root tags need the synthetic-wrap parser nudge. */
+export type NamespaceWrapTag = 'svg' | 'math'
+
+/**
+ * Look up which foreign-content namespace (if any) a single tag name
+ * belongs to. Case-insensitive fallback mirrors `templateRootIsSvg`'s
+ * original comment: SVG/MathML element names are case-sensitive in JSX
+ * (e.g. `linearGradient`, `annotation-xml`) but the canonical lower-case
+ * set is checked first, then the lower-cased tag, so both spellings match.
+ */
+function namespaceForTag(tag: string): NamespaceWrapTag | null {
+  if (SVG_ROOT_TAGS.has(tag) || SVG_ROOT_TAGS.has(tag.toLowerCase())) return 'svg'
+  if (MATHML_ROOT_TAGS.has(tag) || MATHML_ROOT_TAGS.has(tag.toLowerCase())) return 'math'
+  return null
+}
+
+/**
+ * Decide whether a template literal needs foreign-content (SVG or MathML)
+ * parsing, and which. Looks at the first opening tag in the literal. The
+ * check is purely lexical so that interpolations inside attribute values
+ * do not confuse it.
  *
  * Three shapes are recognised:
- *   1. Direct element root — `<circle .../>`
+ *   1. Direct element root — `<circle .../>` / `<mrow>...</mrow>`
  *   2. Conditional body (#1088) — `${cond ? `<circle .../>` : `<rect .../>`}`
- *      where every result-position template literal starts with an SVG
- *      tag. The compiler emits this shape for `.map(s => cond ? <a/> : <b/>)`
- *      bodies; without the wrap the cloned element ends up in the xhtml
- *      namespace and renders nothing.
+ *      where every result-position template literal (recursively) resolves
+ *      to the SAME namespace. The compiler emits this shape for
+ *      `.map(s => cond ? <a/> : <b/>)` bodies; without the wrap the cloned
+ *      element ends up in the xhtml namespace and renders nothing.
  *   3. Reactive-conditional body — a branch wrapped in `<!--bf-cond-start:sX-->`
  *      / `<!--bf-cond-end:sX-->` markers (emitted for nested reactive
  *      conditionals). The check skips leading HTML comments and recurses
  *      into the inner `${...}`.
  *
- * Mixed-namespace branches (one HTML, one SVG) intentionally fall through
- * to no-wrap so the user sees the same broken output as before instead of
- * a silent over-wrap into a `<foreignObject>`-style mismatch.
+ * Mixed-namespace branches (HTML+SVG, HTML+MathML, or SVG+MathML)
+ * intentionally fall through to no-wrap so the user sees the same broken
+ * output as before instead of a silent over-wrap that would drag one
+ * branch into the wrong foreign-content namespace.
  */
-export function templateRootIsSvg(template: string): boolean {
+export function detectRootNamespaceWrapTag(template: string): NamespaceWrapTag | null {
   const stripped = stripLeadingNonContent(template)
 
   // Shape 1: direct element root.
   const m = stripped.match(/^<\s*([A-Za-z][A-Za-z0-9-]*)/)
-  if (m) {
-    // SVG element names are case-sensitive in JSX (e.g., `linearGradient`)
-    // and arrive lowercased to the renderer for the kebab-cased forms;
-    // match case-insensitively against the canonical lower-case set, but
-    // keep the canonical name's casing in the lookup table so JSX names
-    // like `clipPath` still match.
-    const tag = m[1]
-    if (SVG_ROOT_TAGS.has(tag)) return true
-    return SVG_ROOT_TAGS.has(tag.toLowerCase())
-  }
+  if (m) return namespaceForTag(m[1])
 
   // Shapes 2 & 3: single `${...}` interpolation whose result-position
-  // template literals all (recursively) resolve to SVG roots (Option A in
-  // #1088).
+  // template literals all (recursively) resolve to the SAME namespace
+  // (Option A in #1088, generalised to MathML in #1096).
   const branches = extractConditionalBranchTemplates(stripped)
-  if (branches === null || branches.length === 0) return false
-  return branches.every(templateRootIsSvg)
+  if (branches === null || branches.length === 0) return null
+  let result: NamespaceWrapTag | null | undefined
+  for (const branch of branches) {
+    const branchNs = detectRootNamespaceWrapTag(branch)
+    if (result === undefined) {
+      result = branchNs
+    } else if (result !== branchNs) {
+      return null
+    }
+  }
+  return result ?? null
 }
 
 /**
  * Wrap decision for MULTI-ROOT (fragment) templates, where the synthetic
- * `<svg>` wrap swallows every sibling root at once (#2233 Copilot review).
+ * namespace wrap swallows every sibling root at once (#2233 Copilot
+ * review, generalised to MathML in #1096).
  *
- * `templateRootIsSvg` inspects only the FIRST root tag. For single-root
- * templates that's exact, but a fragment whose first root is an `<svg>`
- * CONTAINER (`<><svg/><span/></>`) doesn't need the wrap at all — the
- * HTML parser enters foreign content at `<svg>` on its own — and wrapping
- * would drag the HTML siblings into the SVG namespace (`<span>` becomes an
- * SVGUnknownElement, silently undrawn). So `<svg>`-first fragments skip
- * the wrap; only leaf-rooted fragments (`<line>`, `<circle>`, ...) get it.
+ * `detectRootNamespaceWrapTag` inspects only the FIRST root tag. For
+ * single-root templates that's exact, but a fragment whose first root is
+ * the namespace CONTAINER itself (`<><svg/><span/></>`, `<><math/><span/></>`)
+ * doesn't need the wrap at all — the HTML parser enters foreign content at
+ * `<svg>`/`<math>` on its own — and wrapping would drag the HTML siblings
+ * into the foreign namespace (`<span>` becomes an SVGUnknownElement/etc.,
+ * silently undrawn). So container-first fragments skip the wrap; only
+ * leaf-rooted fragments (`<line>`, `<circle>`, `<mrow>`, ...) get it.
  *
- * Known edge (degenerate, pre-existing): an `<svg>`-first fragment with
- * SVG-LEAF siblings (`<><svg/><line/></>`) leaves the bare leaf siblings
- * in the HTML namespace — exactly the pre-#2219 behavior. Deciding that
- * shape correctly needs a scan of every top-level root tag; not worth the
- * parser until a real component hits it.
+ * Known edge (degenerate, pre-existing): a container-first fragment with
+ * LEAF siblings of the same namespace (`<><svg/><line/></>`) leaves the
+ * bare leaf siblings in the HTML namespace — exactly the pre-#2219
+ * behavior. Deciding that shape correctly needs a scan of every top-level
+ * root tag; not worth the parser until a real component hits it.
  */
-export function multiRootTemplateNeedsSvgWrap(template: string): boolean {
+export function multiRootTemplateNeedsNamespaceWrap(template: string): NamespaceWrapTag | null {
   const m = stripLeadingNonContent(template).match(/^<\s*([A-Za-z][A-Za-z0-9-]*)/)
-  if (m && m[1].toLowerCase() === 'svg') return false
-  return templateRootIsSvg(template)
+  if (m) {
+    const tagLower = m[1].toLowerCase()
+    if (tagLower === 'svg' || tagLower === 'math') return null
+  }
+  return detectRootNamespaceWrapTag(template)
+}
+
+/**
+ * Single door for the "wrap tag + descent path" pair every namespace-aware
+ * clone site needs. Consumers outside this file (`inner-loop.ts`,
+ * `loop-child-arm.ts`, `loop.ts`) read the wrap decision through this
+ * function instead of re-deriving `isSvg ? '<svg>' : ...` locally — keeps
+ * the SVG/MathML wrap code path in exactly one place (#1096).
+ */
+export function namespaceWrapForTemplate(template: string): { wrapTag: NamespaceWrapTag | null; childPath: string } {
+  const wrapTag = detectRootNamespaceWrapTag(template)
+  return {
+    wrapTag,
+    childPath: wrapTag ? '.firstElementChild.firstElementChild' : '.firstElementChild',
+  }
+}
+
+/** `namespaceWrapForTemplate`, but for the multi-root fragment predicate. */
+export function multiRootNamespaceWrapForTemplate(template: string): { wrapTag: NamespaceWrapTag | null; childPath: string } {
+  const wrapTag = multiRootTemplateNeedsNamespaceWrap(template)
+  return {
+    wrapTag,
+    childPath: wrapTag ? '.firstElementChild' : '',
+  }
+}
+
+/** Wrap `html` in the namespace's synthetic root tag, or return it as-is. */
+export function wrapHtmlForNamespace(html: string, wrapTag: NamespaceWrapTag | null): string {
+  return wrapTag ? `<${wrapTag}>${html}</${wrapTag}>` : html
 }
 
 /**
@@ -159,14 +230,13 @@ function extractConditionalBranchTemplates(template: string): string[] | null {
  *
  *   ` const __tpl = document.createElement('template'); __tpl.innerHTML = \`${template}\`; return __tpl.content.firstElementChild.cloneNode(true) `
  *
- * For SVG roots, the `innerHTML` is wrapped in `<svg>...</svg>` and the
- * traversal descends one extra level.
+ * For SVG/MathML roots, the `innerHTML` is wrapped in the matching
+ * namespace root tag and the traversal descends one extra level.
  */
 export function emitTemplateCloneInline(template: string): string {
-  if (templateRootIsSvg(template)) {
-    return `const __tpl = document.createElement('template'); __tpl.innerHTML = \`<svg>${template}</svg>\`; return __tpl.content.firstElementChild.firstElementChild.cloneNode(true)`
-  }
-  return `const __tpl = document.createElement('template'); __tpl.innerHTML = \`${template}\`; return __tpl.content.firstElementChild.cloneNode(true)`
+  const { wrapTag, childPath } = namespaceWrapForTemplate(template)
+  const html = wrapHtmlForNamespace(template, wrapTag)
+  return `const __tpl = document.createElement('template'); __tpl.innerHTML = \`${html}\`; return __tpl.content${childPath}.cloneNode(true)`
 }
 
 /**
@@ -177,13 +247,14 @@ export function emitTemplateCloneInline(template: string): string {
  * STATIC-ONLY skeleton produced by `buildLoopSkeletonTemplate` (dynamic attrs
  * omitted, text markers empty) — never the per-row interpolated `template`.
  *
- * SVG namespace wrap mirrors `emitTemplateCloneLines` (#135 / #1088):
- * `templateRootIsSvg` is re-checked against the skeleton (same root tag as
- * the interpolated template, so the same wrap decision applies).
+ * Namespace wrap mirrors `emitTemplateCloneLines` (#135 / #1088 / #1096):
+ * `detectRootNamespaceWrapTag` is re-checked against the skeleton (same
+ * root tag as the interpolated template, so the same wrap decision
+ * applies).
  */
 export function emitHoistedTemplateDecl(lines: string[], indent: string, tplVar: string, skeletonTemplate: string): void {
-  const isSvg = templateRootIsSvg(skeletonTemplate)
-  const html = isSvg ? `<svg>${skeletonTemplate}</svg>` : skeletonTemplate
+  const { wrapTag } = namespaceWrapForTemplate(skeletonTemplate)
+  const html = wrapHtmlForNamespace(skeletonTemplate, wrapTag)
   lines.push(`${indent}const ${tplVar} = document.createElement('template')`)
   lines.push(`${indent}${tplVar}.innerHTML = \`${html}\``)
 }
@@ -194,9 +265,7 @@ export function emitHoistedTemplateDecl(lines: string[], indent: string, tplVar:
  * `emitTemplateCloneInline` / `emitTemplateCloneLines` parse-and-clone.
  */
 export function hoistedCloneExpr(tplVar: string, skeletonTemplate: string): string {
-  return templateRootIsSvg(skeletonTemplate)
-    ? `${tplVar}.content.firstElementChild.firstElementChild.cloneNode(true)`
-    : `${tplVar}.content.firstElementChild.cloneNode(true)`
+  return `${tplVar}.content${namespaceWrapForTemplate(skeletonTemplate).childPath}.cloneNode(true)`
 }
 
 /**
@@ -204,17 +273,12 @@ export function hoistedCloneExpr(tplVar: string, skeletonTemplate: string): stri
  * Returns three statements with no trailing newlines.
  */
 export function emitTemplateCloneLines(template: string, indent: string): string[] {
-  if (templateRootIsSvg(template)) {
-    return [
-      `${indent}const __tpl = document.createElement('template')`,
-      `${indent}__tpl.innerHTML = \`<svg>${template}</svg>\``,
-      `${indent}return __tpl.content.firstElementChild.firstElementChild.cloneNode(true)`,
-    ]
-  }
+  const { wrapTag, childPath } = namespaceWrapForTemplate(template)
+  const html = wrapHtmlForNamespace(template, wrapTag)
   return [
     `${indent}const __tpl = document.createElement('template')`,
-    `${indent}__tpl.innerHTML = \`${template}\``,
-    `${indent}return __tpl.content.firstElementChild.cloneNode(true)`,
+    `${indent}__tpl.innerHTML = \`${html}\``,
+    `${indent}return __tpl.content${childPath}.cloneNode(true)`,
   ]
 }
 
@@ -312,13 +376,13 @@ export function emitMultiRootTemplateCloneLines(
   varEl: string,
   varExtras: string,
 ): string[] {
-  const isSvg = multiRootTemplateNeedsSvgWrap(template)
-  // Wrap in `<svg>` so the parser walks into SVG foreign content; we then
-  // descend one level to pick up the per-item roots.
-  const innerHtmlExpr = isSvg ? `\`<svg>${template}</svg>\`` : `\`${template}\``
+  const { wrapTag, childPath } = multiRootNamespaceWrapForTemplate(template)
+  // Wrap in the namespace's root tag so the parser walks into foreign
+  // content; we then descend one level to pick up the per-item roots.
+  const innerHtmlExpr = `\`${wrapHtmlForNamespace(template, wrapTag)}\``
   // `parent` is the element whose direct children are the per-item roots
-  // (the `<svg>` wrap for SVG, the template's content for HTML).
-  const parentExpr = isSvg ? `__tpl.content.firstElementChild` : `__tpl.content`
+  // (the namespace wrap for SVG/MathML, the template's content for HTML).
+  const parentExpr = `__tpl.content${childPath}`
   return [
     `${indent}const __tpl = document.createElement('template')`,
     `${indent}__tpl.innerHTML = ${innerHtmlExpr}`,

package/src/ir-to-client-js/csr-substitute.ts

@@ -452,8 +452,9 @@ export function buildSignalMemoEnv(
   for (const s of signals) {
     // Env signals (#2057) have no static initial value to bake — their getter
     // is a live request-scoped read (`searchParams().get(k)`). Leave it in the
-    // CSR template as a real call, exactly as the pre-#2057 bare `searchParams()`
-    // import was (it was never a substitutable signal).
+    // CSR template as a real call; `emitRegistrationAndHydration`'s
+    // `buildTemplateDefPart` (#2654) gives the template lambda its own
+    // `const [<getter>] = <envFactory>()` prelude so the call resolves.
     if (s.envReader) continue
     substitutions.set(s.getter, {
       kind: 'call',