Interpolation, plurals and a missing key

// apps/docs/examples/i18n/translator.tsx'use client';
import {useState} from 'react';
import {  createTranslateFunction,  type LocaleTranslations,} from '@workspace/active-i18n';import {Button} from '@workspace/active-ui/components/primitives/button';import {  Tabs,  TabsList,  TabsTrigger,} from '@workspace/active-ui/components/primitives/tabs';
// The host's dictionaries: one tree per language, keyed by namespace.const DICTIONARIES: Record<'en' | 'nl' | 'ar', LocaleTranslations> = {  en: {    inbox: {      greeting: 'Hello {{name}}',      messages: {one: '{{count}} new message', other: '{{count}} new messages'},    },  },  nl: {    inbox: {      greeting: 'Hallo {{name}}',      messages: {        one: '{{count}} nieuw bericht',        other: '{{count}} nieuwe berichten',      },    },  },  ar: {    inbox: {      greeting: 'مرحبًا {{name}}',      messages: {        zero: 'لا توجد رسائل جديدة',        one: 'رسالة جديدة واحدة',        two: 'رسالتان جديدتان',        few: '{{count}} رسائل جديدة',        many: '{{count}} رسالة جديدة',        other: '{{count}} رسالة جديدة',      },    },  },};
/** A translator per language: interpolation, CLDR plurals and a missing key. */export default function Translator() {  const [locale, setLocale] = useState<'en' | 'nl' | 'ar'>('en');  const [count, setCount] = useState(2);  // Filled while this render translates: the translator reports a miss  // through the callback and still returns the raw key.  const missing: string[] = [];  const t = createTranslateFunction(DICTIONARIES[locale], locale, {    onMissingKey: ({key}) => missing.push(key),  });  return (    <div className="flex flex-col gap-4">      <Tabs        value={locale}        onValueChange={(value) => setLocale(value as 'en' | 'nl' | 'ar')}      >        <TabsList aria-label="Language">          <TabsTrigger value="en">English</TabsTrigger>          <TabsTrigger value="nl">Nederlands</TabsTrigger>          <TabsTrigger value="ar">العربية</TabsTrigger>        </TabsList>      </Tabs>      <div        lang={locale}        dir={locale === 'ar' ? 'rtl' : 'ltr'}        className="flex flex-col gap-1"      >        <p data-i18n-greeting>{t('inbox.greeting', {name: 'Ada'})}</p>        <p data-i18n-count={count}>{t('inbox.messages', {count})}</p>        <p className="text-muted-foreground font-mono text-sm">          {t('inbox.archived')}        </p>      </div>      <div className="flex flex-wrap items-center gap-2">        <Button          variant="outline"          size="sm"          onClick={() => setCount((n) => Math.max(0, n - 1))}        >          Fewer        </Button>        <Button          variant="outline"          size="sm"          onClick={() => setCount((n) => n + 1)}        >          More        </Button>        <span className="text-muted-foreground text-sm">count = {count}</span>      </div>      <p className="text-muted-foreground text-sm">        Missing keys reported:{' '}        {missing.length > 0 ? missing.join(', ') : 'none'}      </p>    </div>  );}