@fluenti/solid 0.2.0 → 0.3.0

package/src/plural.tsx

@@ -1,44 +1,11 @@
 import { Dynamic } from 'solid-js/web'
 import type { Component, JSX } from 'solid-js'
-import { hashMessage } from '@fluenti/core'
+import { hashMessage, buildICUPluralMessage, PLURAL_CATEGORIES, type PluralCategory } from '@fluenti/core/internal'
 import { useI18n } from './use-i18n'
 import { reconstruct, serializeRichForms } from './rich-dom'
 
-/** Plural category names in a stable order for ICU message building. */
-const PLURAL_CATEGORIES = ['zero', 'one', 'two', 'few', 'many', 'other'] as const
-
-type PluralCategory = (typeof PLURAL_CATEGORIES)[number]
-
-/**
- * Build an ICU plural message string from individual category props.
- *
- * Given `{ zero: "No items", one: "# item", other: "# items" }`,
- * produces `"{count, plural, =0 {No items} one {# item} other {# items}}"`.
- *
- * @internal
- */
-function buildICUPluralMessage(
-  forms: Partial<Record<PluralCategory, string>> & { other: string },
-  offset?: number,
-): string {
-  const parts: string[] = []
-  for (const cat of PLURAL_CATEGORIES) {
-    const text = forms[cat]
-    if (text !== undefined) {
-      // Map the `zero` prop to ICU `=0` exact match. In ICU MessageFormat,
-      // `zero` is a CLDR plural category that only activates in languages
-      // with a grammatical zero form (e.g. Arabic). The `=0` exact match
-      // works universally for the common "show this when count is 0" intent.
-      const key = cat === 'zero' ? '=0' : cat
-      parts.push(`${key} {${text}}`)
-    }
-  }
-  const offsetPrefix = offset ? `offset:${offset} ` : ''
-  return `{count, plural, ${offsetPrefix}${parts.join(' ')}}`
-}
-
 /** Props for the `<Plural>` component */
-export interface PluralProps {
+export interface FluentiPluralProps {
   /** The numeric value to pluralise */
   value: number
   /** Override the auto-generated synthetic ICU message id */
@@ -61,7 +28,7 @@ export interface PluralProps {
   many?: string | JSX.Element
   /** Fallback message when no category-specific prop matches */
   other: string | JSX.Element
-  /** Wrapper element tag name (default: `'span'`) */
+  /** Wrapper element tag name. Defaults to no wrapper (Fragment). */
   tag?: string
 }
 
@@ -90,7 +57,7 @@ export interface PluralProps {
  * <Plural value={count()} zero="No items" one="# item" other="# items" />
  * ```
  */
-export const Plural: Component<PluralProps> = (props) => {
+export const Plural: Component<FluentiPluralProps> = (props) => {
   const { t } = useI18n()
 
   /** Resolve a category prop value — handles string, accessor function, and JSX */
@@ -131,6 +98,10 @@ export const Plural: Component<PluralProps> = (props) => {
       { count: props.value },
     )
 
-    return (<Dynamic component={props.tag ?? 'span'}>{components.length > 0 ? reconstruct(translated, components) : translated}</Dynamic>) as JSX.Element
+    const result = components.length > 0 ? reconstruct(translated, components) : translated
+    if (props.tag) {
+      return (<Dynamic component={props.tag}>{result}</Dynamic>) as JSX.Element
+    }
+    return (<>{result}</>) as JSX.Element
   }) as unknown as JSX.Element
 }

package/src/provider.tsx

@@ -1,16 +1,16 @@
 import { createContext } from 'solid-js'
 import type { ParentComponent } from 'solid-js'
-import { createI18nContext } from './context'
-import type { I18nConfig, I18nContext } from './context'
+import { createFluentiContext } from './context'
+import type { FluentiConfig, FluentiContext } from './context'
 
 /** Solid context object for i18n — used internally by useI18n() */
-export const I18nCtx = createContext<I18nContext>()
+export const I18nCtx = createContext<FluentiContext>()
 
 /**
  * Provide i18n context to the component tree.
  *
  */
-export const I18nProvider: ParentComponent<I18nConfig> = (props) => {
-  const ctx = createI18nContext(props)
+export const I18nProvider: ParentComponent<FluentiConfig> = (props) => {
+  const ctx = createFluentiContext(props)
   return <I18nCtx.Provider value={ctx}>{props.children}</I18nCtx.Provider>
 }

package/src/rich-dom.tsx

@@ -11,12 +11,7 @@ function resolveValue(value: unknown): unknown {
   return value
 }
 
-export function offsetIndices(message: string, offset: number): string {
-  if (offset === 0) return message
-  return message
-    .replace(/<(\d+)(\/?>)/g, (_match, index: string, suffix: string) => `<${Number(index) + offset}${suffix}`)
-    .replace(/<\/(\d+)>/g, (_match, index: string) => `</${Number(index) + offset}>`)
-}
+import { offsetIndices } from '@fluenti/core/internal'
 
 export function extractMessage(value: unknown): {
   message: string
@@ -50,7 +45,11 @@ export function extractMessage(value: unknown): {
     const inner = extractMessage(Array.from(resolved.childNodes))
     components.push((resolved as Element).cloneNode(false))
     components.push(...inner.components)
-    message += `<${idx}>${offsetIndices(inner.message, idx + 1)}</${idx}>`
+    if (inner.message === '' && inner.components.length === 0) {
+      message += `<${idx}/>`
+    } else {
+      message += `<${idx}>${offsetIndices(inner.message, idx + 1)}</${idx}>`
+    }
   }
 
   visit(value)
@@ -77,31 +76,39 @@ export function reconstruct(
   translated: string,
   components: Node[],
 ): JSX.Element {
-  const tagRe = /<(\d+)>([\s\S]*?)<\/\1>/g
+  const combinedRe = /<(\d+)(?:\/>|(>)([\s\S]*?)<\/\1>)/g
   const result: unknown[] = []
   let lastIndex = 0
   let match: RegExpExecArray | null
 
-  tagRe.lastIndex = 0
-  match = tagRe.exec(translated)
+  combinedRe.lastIndex = 0
+  match = combinedRe.exec(translated)
   while (match !== null) {
     if (match.index > lastIndex) {
       result.push(translated.slice(lastIndex, match.index))
     }
 
     const idx = Number(match[1])
+    const isSelfClosing = match[2] === undefined
     const template = components[idx]
-    const inner = reconstruct(match[2]!, components)
-    if (template) {
-      const clone = template.cloneNode(false)
-      appendChild(clone, inner)
-      result.push(clone)
+
+    if (isSelfClosing) {
+      if (template) {
+        result.push(template.cloneNode(false))
+      }
     } else {
-      result.push(match[2]!)
+      const inner = reconstruct(match[2] !== undefined ? match[3]! : '', components)
+      if (template) {
+        const clone = template.cloneNode(false)
+        appendChild(clone, inner)
+        result.push(clone)
+      } else {
+        result.push(match[3] ?? '')
+      }
     }
 
-    lastIndex = tagRe.lastIndex
-    match = tagRe.exec(translated)
+    lastIndex = combinedRe.lastIndex
+    match = combinedRe.exec(translated)
   }
 
   if (lastIndex < translated.length) {
@@ -139,32 +146,3 @@ export function serializeRichForms<T extends string>(
   return { messages, components }
 }
 
-export function buildICUSelectMessage(forms: Record<string, string>): string {
-  return `{value, select, ${Object.entries(forms).map(([key, text]) => `${key} {${text}}`).join(' ')}}`
-}
-
-export function normalizeSelectForms(forms: Record<string, string>): {
-  forms: Record<string, string>
-  valueMap: Record<string, string>
-} {
-  const normalized: Record<string, string> = {}
-  const valueMap: Record<string, string> = {}
-  let index = 0
-
-  for (const [key, text] of Object.entries(forms)) {
-    if (key === 'other') {
-      normalized['other'] = text
-      continue
-    }
-
-    const safeKey = /^[A-Za-z0-9_]+$/.test(key) ? key : `case_${index++}`
-    normalized[safeKey] = text
-    valueMap[key] = safeKey
-  }
-
-  if (normalized['other'] === undefined) {
-    normalized['other'] = ''
-  }
-
-  return { forms: normalized, valueMap }
-}

package/src/select.tsx

@@ -1,11 +1,11 @@
 import type { Component, JSX } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
-import { hashMessage } from '@fluenti/core'
+import { hashMessage, buildICUSelectMessage, normalizeSelectForms } from '@fluenti/core/internal'
 import { useI18n } from './use-i18n'
-import { buildICUSelectMessage, normalizeSelectForms, reconstruct, serializeRichForms } from './rich-dom'
+import { reconstruct, serializeRichForms } from './rich-dom'
 
 /** Props for the `<Select>` component */
-export interface SelectProps {
+export interface FluentiSelectProps {
   /** The value to match against prop keys */
   value: string
   /** Override the auto-generated synthetic ICU message id */
@@ -23,7 +23,7 @@ export interface SelectProps {
    * @example `{ male: 'He', female: 'She' }`
    */
   options?: Record<string, string | JSX.Element>
-  /** Wrapper element tag name (default: `span`) */
+  /** Wrapper element tag name. Defaults to no wrapper (Fragment). */
   tag?: string
   /** Additional key/message pairs for matching (attrs fallback) */
   [key: string]: unknown
@@ -51,11 +51,9 @@ export interface SelectProps {
  *
  * Falls back to the `other` prop when no key matches.
  */
-export const SelectComp: Component<SelectProps> = (props) => {
+export const SelectComp: Component<FluentiSelectProps> = (props) => {
   const { t } = useI18n()
 
-  const resolvedTag = () => props.tag ?? 'span'
-
   const content = () => {
     const forms: Record<string, unknown> = props.options !== undefined
       ? { ...props.options, other: props.other }
@@ -86,5 +84,10 @@ export const SelectComp: Component<SelectProps> = (props) => {
     return components.length > 0 ? reconstruct(translated, components) : translated
   }
 
-  return (<Dynamic component={resolvedTag()}>{content()}</Dynamic>) as JSX.Element
+  return (() => {
+    if (props.tag) {
+      return (<Dynamic component={props.tag}>{content()}</Dynamic>) as JSX.Element
+    }
+    return (<>{content()}</>) as JSX.Element
+  }) as unknown as JSX.Element
 }

package/src/server.ts

@@ -1,7 +1,8 @@
-import { createFluent } from '@fluenti/core'
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { createFluentiCore } from '@fluenti/core'
 import type {
-  FluentInstanceExtended,
-  FluentConfigExtended,
+  FluentiCoreInstanceFull,
+  FluentiCoreConfigFull,
   Locale,
   Messages,
   DateFormatOptions,
@@ -58,46 +59,78 @@ export interface ServerI18n {
    * Get a fully configured i18n instance for the current request.
    * Messages are loaded lazily and cached.
    */
-  getI18n: () => Promise<FluentInstanceExtended & { locale: string }>
+  getI18n: () => Promise<FluentiCoreInstanceFull & { locale: string }>
+
+  /**
+   * Run a callback with per-request locale isolation.
+   *
+   * Uses `AsyncLocalStorage` to scope locale and instance to the callback,
+   * preventing cross-request locale leakage in concurrent SSR environments.
+   *
+   * @example
+   * ```ts
+   * // In your SolidStart middleware
+   * export function middleware(event) {
+   *   const locale = detectLocaleFromEvent(event)
+   *   return withLocale(locale, () => handleRequest(event))
+   * }
+   * ```
+   */
+  withLocale: <T>(locale: string, fn: () => T | Promise<T>) => Promise<T>
+}
+
+/** Per-request store shape */
+interface RequestStore {
+  locale: string | null
+  instance: (FluentiCoreInstanceFull & { locale: string }) | null
 }
 
 /**
  * Create server-side i18n utilities for SolidStart.
  *
- * Unlike React's `createServerI18n` which uses `React.cache()` for RSC
- * per-request isolation, this version uses a simple module-level store
- * matching SolidStart's synchronous rendering model.
- *
- * For per-request isolation in SolidStart, use `getRequestEvent()` in
- * your `resolveLocale` callback, or call `setLocale()` in your
- * entry-server middleware.
- *
- * **⚠️ SSR Concurrency Warning**: This function uses module-level state for locale
- * and cached instance. In concurrent SSR environments (e.g. multiple simultaneous
- * requests), this can cause cross-request locale leakage. For per-request isolation:
- * - Use `getRequestEvent()` in SolidStart to scope locale per request
- * - Or create a separate `createServerI18n()` per request context
- * - Consider using AsyncLocalStorage for true per-request isolation (future)
+ * Uses `AsyncLocalStorage` for per-request isolation of locale state.
+ * Wrap each request in `withLocale(locale, fn)` for safe concurrent SSR,
+ * or use `setLocale()` / `getI18n()` directly if concurrency is not a concern.
  *
  * @example
  * ```ts
  * // lib/i18n.server.ts
  * import { createServerI18n } from '@fluenti/solid/server'
  *
- * export const { setLocale, getI18n } = createServerI18n({
+ * export const { setLocale, getI18n, withLocale } = createServerI18n({
  *   loadMessages: (locale) => import(`../locales/compiled/${locale}.ts`),
  *   fallbackLocale: 'en',
  * })
  * ```
+ *
+ * @example Per-request isolation (recommended for concurrent SSR):
+ * ```ts
+ * // src/middleware.ts
+ * import { withLocale } from './lib/i18n.server'
+ *
+ * export function middleware(event) {
+ *   const locale = detectLocaleFromEvent(event)
+ *   return withLocale(locale, () => handleRequest(event))
+ * }
+ * ```
  */
 export function createServerI18n(config: ServerI18nConfig): ServerI18n {
-  let currentLocale: string | null = null
-  let cachedInstance: (FluentInstanceExtended & { locale: string }) | null = null
+  const als = new AsyncLocalStorage<RequestStore>()
+
+  // Module-level message cache — safe to share across requests (keyed by locale)
   const messageCache = new Map<string, Messages>()
 
+  // Module-level fallback store for when ALS context is not active
+  let fallbackStore: RequestStore = { locale: null, instance: null }
+
+  function getStore(): RequestStore {
+    return als.getStore() ?? fallbackStore
+  }
+
   function setLocale(locale: string): void {
-    currentLocale = locale
-    cachedInstance = null
+    const store = getStore()
+    store.locale = locale
+    store.instance = null
   }
 
   async function loadLocaleMessages(locale: string): Promise<Messages> {
@@ -114,28 +147,7 @@ export function createServerI18n(config: ServerI18nConfig): ServerI18n {
     return messages
   }
 
-  async function getI18n(): Promise<FluentInstanceExtended & { locale: string }> {
-    // If setLocale() was never called, try the resolveLocale fallback.
-    if (!currentLocale && config.resolveLocale) {
-      currentLocale = await config.resolveLocale()
-    }
-
-    const locale = currentLocale
-
-    if (!locale) {
-      throw new Error(
-        '[fluenti] No locale set. Call setLocale(locale) in your entry-server or layout before using getI18n(), ' +
-          'or provide a resolveLocale function in createServerI18n config to auto-detect locale ' +
-          'in server functions and other contexts where the layout does not run.',
-      )
-    }
-
-    // Return cached instance if locale hasn't changed
-    if (cachedInstance && cachedInstance.locale === locale) {
-      return cachedInstance
-    }
-
-    // Load messages for current locale (and fallback if configured)
+  async function buildInstance(locale: string): Promise<FluentiCoreInstanceFull & { locale: string }> {
     const allMessages: Record<string, Messages> = {}
     allMessages[locale] = await loadLocaleMessages(locale)
 
@@ -143,7 +155,7 @@ export function createServerI18n(config: ServerI18nConfig): ServerI18n {
       allMessages[config.fallbackLocale] = await loadLocaleMessages(config.fallbackLocale)
     }
 
-    const fluentConfig: FluentConfigExtended = {
+    const fluentConfig: FluentiCoreConfigFull = {
       locale,
       messages: allMessages,
     }
@@ -153,9 +165,42 @@ export function createServerI18n(config: ServerI18nConfig): ServerI18n {
     if (config.numberFormats !== undefined) fluentConfig.numberFormats = config.numberFormats
     if (config.missing !== undefined) fluentConfig.missing = config.missing
 
-    cachedInstance = createFluent(fluentConfig)
-    return cachedInstance
+    return createFluentiCore(fluentConfig)
+  }
+
+  async function getI18n(): Promise<FluentiCoreInstanceFull & { locale: string }> {
+    const store = getStore()
+
+    // If setLocale() was never called, try the resolveLocale fallback.
+    if (!store.locale && config.resolveLocale) {
+      store.locale = await config.resolveLocale()
+    }
+
+    const locale = store.locale
+
+    if (!locale) {
+      throw new Error(
+        '[fluenti] No locale set. Call setLocale(locale) in your entry-server or layout before using getI18n(), ' +
+          'or provide a resolveLocale function in createServerI18n config to auto-detect locale ' +
+          'in server functions and other contexts where the layout does not run.',
+      )
+    }
+
+    // Return cached instance if locale hasn't changed
+    if (store.instance && store.instance.locale === locale) {
+      return store.instance
+    }
+
+    store.instance = await buildInstance(locale)
+    return store.instance
+  }
+
+  async function withLocale<T>(locale: string, fn: () => T | Promise<T>): Promise<T> {
+    const store: RequestStore = { locale, instance: null }
+    return als.run(store, async () => {
+      return fn()
+    })
   }
 
-  return { setLocale, getI18n }
+  return { setLocale, getI18n, withLocale }
 }

package/src/solid-runtime.ts

@@ -1,134 +1,15 @@
-import { resolve } from 'node:path'
-import type { RuntimeGenerator, RuntimeGeneratorOptions } from '@fluenti/vite-plugin'
-
-export const solidRuntimeGenerator: RuntimeGenerator = {
-  generateRuntime(options: RuntimeGeneratorOptions): string {
-    const { catalogDir, locales, sourceLocale, defaultBuildLocale } = options
-    const defaultLocale = defaultBuildLocale || sourceLocale
-    const absoluteCatalogDir = resolve(process.cwd(), catalogDir)
-    const runtimeKey = 'fluenti.runtime.solid'
-    const lazyLocales = locales.filter((locale) => locale !== defaultLocale)
-
-    return `
-import { createSignal } from 'solid-js'
-import { createStore, reconcile } from 'solid-js/store'
-import __defaultMsgs from '${absoluteCatalogDir}/${defaultLocale}.js'
-
-const [__catalog, __setCatalog] = createStore({ ...__defaultMsgs })
-const [__currentLocale, __setCurrentLocale] = createSignal('${defaultLocale}')
-const __loadedLocales = new Set(['${defaultLocale}'])
-const [__loading, __setLoading] = createSignal(false)
-const __cache = new Map()
-const __normalizeMessages = (mod) => mod.default ?? mod
-
-const __loaders = {
-${lazyLocales.map((l) => `  '${l}': () => import('${absoluteCatalogDir}/${l}.js'),`).join('\n')}
-}
-
-async function __switchLocale(locale) {
-  if (__loadedLocales.has(locale)) {
-    __setCatalog(reconcile(__cache.get(locale) || __defaultMsgs))
-    __setCurrentLocale(locale)
-    return
-  }
-  __setLoading(true)
-  try {
-    const mod = __normalizeMessages(await __loaders[locale]())
-    __cache.set(locale, mod)
-    __loadedLocales.add(locale)
-    __setCatalog(reconcile(mod))
-    __setCurrentLocale(locale)
-  } finally {
-    __setLoading(false)
-  }
-}
-
-async function __preloadLocale(locale) {
-  if (__loadedLocales.has(locale) || !__loaders[locale]) return
-  try {
-    const mod = __normalizeMessages(await __loaders[locale]())
-    __cache.set(locale, mod)
-    __loadedLocales.add(locale)
-  } catch (e) { console.warn('[fluenti] preload failed:', locale, e) }
-}
-
-globalThis[Symbol.for('${runtimeKey}')] = { __switchLocale, __preloadLocale }
-
-export { __catalog, __switchLocale, __preloadLocale, __currentLocale, __loading, __loadedLocales }
-`
-  },
-
-  generateRouteRuntime(options: RuntimeGeneratorOptions): string {
-    const { catalogDir, locales, sourceLocale, defaultBuildLocale } = options
-    const defaultLocale = defaultBuildLocale || sourceLocale
-    const absoluteCatalogDir = resolve(process.cwd(), catalogDir)
-    const runtimeKey = 'fluenti.runtime.solid'
-    const lazyLocales = locales.filter((locale) => locale !== defaultLocale)
-
-    return `
-import { createSignal } from 'solid-js'
-import { createStore, reconcile } from 'solid-js/store'
-import __defaultMsgs from '${absoluteCatalogDir}/${defaultLocale}.js'
-
-const [__catalog, __setCatalog] = createStore({ ...__defaultMsgs })
-const [__currentLocale, __setCurrentLocale] = createSignal('${defaultLocale}')
-const __loadedLocales = new Set(['${defaultLocale}'])
-const [__loading, __setLoading] = createSignal(false)
-const __cache = new Map()
-const __loadedRoutes = new Set()
-const __normalizeMessages = (mod) => mod.default ?? mod
-
-const __loaders = {
-${lazyLocales.map((l) => `  '${l}': () => import('${absoluteCatalogDir}/${l}.js'),`).join('\n')}
-}
-
-const __routeLoaders = {}
-
-function __registerRouteLoader(routeId, locale, loader) {
-  const key = routeId + ':' + locale
-  __routeLoaders[key] = loader
-}
-
-async function __loadRoute(routeId, locale) {
-  const key = routeId + ':' + (locale || __currentLocale())
-  if (__loadedRoutes.has(key)) return
-  const loader = __routeLoaders[key]
-  if (!loader) return
-  const mod = __normalizeMessages(await loader())
-  __setCatalog(reconcile({ ...__catalog, ...mod }))
-  __loadedRoutes.add(key)
-}
-
-async function __switchLocale(locale) {
-  if (locale === __currentLocale()) return
-  __setLoading(true)
-  try {
-    if (__cache.has(locale)) {
-      __setCatalog(reconcile(__cache.get(locale)))
-    } else {
-      const mod = __normalizeMessages(await __loaders[locale]())
-      __cache.set(locale, mod)
-      __setCatalog(reconcile(mod))
-    }
-    __loadedLocales.add(locale)
-    __setCurrentLocale(locale)
-  } finally {
-    __setLoading(false)
-  }
-}
-
-async function __preloadLocale(locale) {
-  if (__cache.has(locale) || !__loaders[locale]) return
-  try {
-    const mod = __normalizeMessages(await __loaders[locale]())
-    __cache.set(locale, mod)
-    __loadedLocales.add(locale)
-  } catch (e) { console.warn('[fluenti] preload failed:', locale, e) }
-}
-
-globalThis[Symbol.for('${runtimeKey}')] = { __switchLocale, __preloadLocale }
-
-export { __catalog, __switchLocale, __preloadLocale, __loadRoute, __registerRouteLoader, __currentLocale, __loading, __loadedLocales }
-`
-  },
-}
+import { createRuntimeGenerator } from '@fluenti/vite-plugin'
+import type { RuntimeGenerator } from '@fluenti/vite-plugin'
+
+export const solidRuntimeGenerator: RuntimeGenerator = createRuntimeGenerator({
+  imports: `import { createSignal } from 'solid-js'\nimport { createStore, reconcile } from 'solid-js/store'`,
+  catalogInit: 'const [__catalog, __setCatalog] = createStore({ ...__defaultMsgs })',
+  localeInit: (defaultLocale) => `const [__currentLocale, __setCurrentLocale] = createSignal('${defaultLocale}')`,
+  loadingInit: 'const [__loading, __setLoading] = createSignal(false)',
+  catalogUpdate: (msgs) => `__setCatalog(reconcile(${msgs}))`,
+  catalogMerge: (msgs) => `__setCatalog(reconcile({ ...__catalog, ...${msgs} }))`,
+  localeUpdate: (locale) => `__setCurrentLocale(${locale})`,
+  loadingUpdate: (value) => `__setLoading(${value})`,
+  localeRead: '__currentLocale()',
+  runtimeKey: 'fluenti.runtime.solid.v1',
+})

package/src/trans.tsx

@@ -8,14 +8,14 @@ import { extractMessage as extractDomMessage, reconstruct as reconstructDomMessa
 export type RichComponent = Component<{ children?: JSX.Element }>
 
 /** Props for the `<Trans>` component */
-export interface TransProps {
+export interface FluentiTransProps {
   /** Override auto-generated hash ID */
   id?: string
   /** Message context used for identity and translator disambiguation */
   context?: string
   /** Translator-facing note preserved in extraction catalogs */
   comment?: string
-  /** Wrapper element tag name (default: `'span'`) — used in children-only mode */
+  /** Wrapper element tag name. Defaults to no wrapper (Fragment). */
   tag?: string
   /** Children — the content to translate (legacy API) */
   children?: JSX.Element
@@ -192,7 +192,7 @@ function renderTokens(
  * <Trans>Click <a href="/next">here</a> to continue</Trans>
  * ```
  */
-export const Trans: Component<TransProps> = (props) => {
+export const Trans: Component<FluentiTransProps> = (props) => {
   const { t } = useI18n()
   const resolvedChildren = resolveChildren(() => props.children)
   // message + components API (including build-time __message/__components)
@@ -235,7 +235,10 @@ export const Trans: Component<TransProps> = (props) => {
       : translated
 
     if (Array.isArray(result) && result.length > 1) {
-      return (<Dynamic component={props.tag ?? 'span'}>{result}</Dynamic>) as JSX.Element
+      if (props.tag) {
+        return (<Dynamic component={props.tag}>{result}</Dynamic>) as JSX.Element
+      }
+      return (<>{result}</>) as JSX.Element
     }
 
     return result as JSX.Element