@oxy.so/bloom 4.32.0 → 4.33.0

package/src/locale/languages.ts

@@ -0,0 +1,45 @@
+/**
+ * The languages Bloom ships its own strings in — the fleet's app languages.
+ * A `MessageCatalog` must name every one of them, so adding a language here
+ * fails the type-check of every catalog until it is translated.
+ */
+export const BLOOM_LANGUAGES = [
+  'en',
+  'es',
+  'ca',
+  'de',
+  'fr',
+  'it',
+  'pt',
+  'ru',
+  'tr',
+  'ja',
+  'zh',
+  'ar',
+  'hi',
+  'bn',
+  'id',
+] as const;
+
+export type BloomLanguage = (typeof BLOOM_LANGUAGES)[number];
+
+const SUPPORTED = new Set<string>(BLOOM_LANGUAGES);
+
+/**
+ * The language a BCP 47 tag asks for, among Bloom's: its primary subtag
+ * (`es-MX` → `es`, `pt_BR` → `pt`, `ca-ES-valencia` → `ca`). Anything Bloom
+ * does not ship, and no tag at all, falls back to English.
+ */
+export function resolveBloomLanguage(locale: string | null | undefined): BloomLanguage {
+  const primary = locale?.split(/[-_]/)[0]?.toLowerCase();
+  return primary && SUPPORTED.has(primary) ? (primary as BloomLanguage) : 'en';
+}
+
+/** The runtime's own locale (the browser's, or the device's through Hermes' `Intl`). */
+export function runtimeLocale(): string | undefined {
+  try {
+    return new Intl.DateTimeFormat().resolvedOptions().locale;
+  } catch {
+    return undefined;
+  }
+}

package/src/locale/messages.ts

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+
+import { useBloomLocale } from './context';
+import { resolveBloomLanguage, runtimeLocale, type BloomLanguage } from './languages';
+
+/**
+ * A family's fixed strings in every Bloom language. The type makes each
+ * language REQUIRED and complete, so a missing translation is a type error
+ * rather than an English word inside a translated screen.
+ */
+export type MessageCatalog<M> = Readonly<Record<BloomLanguage, M>>;
+
+/** The catalog entry for `locale`, falling back to English for a language Bloom does not ship. */
+export function pickMessages<M>(catalog: MessageCatalog<M>, locale: string | undefined): M {
+  return catalog[resolveBloomLanguage(locale ?? runtimeLocale())];
+}
+
+/**
+ * The resolved locale (prop → `LocaleProvider` → runtime) and the family's
+ * strings in it. A component still lets its `labels` prop win over these.
+ */
+export function useMessages<M>(
+  catalog: MessageCatalog<M>,
+  localeProp?: string,
+): { locale: string | undefined; messages: M } {
+  const locale = useBloomLocale(localeProp);
+  const messages = useMemo(() => pickMessages(catalog, locale), [catalog, locale]);
+  return { locale, messages };
+}

package/src/locale/plural.ts

@@ -0,0 +1,53 @@
+import type { BloomLanguage } from './languages';
+
+export type PluralCategory = 'zero' | 'one' | 'two' | 'few' | 'many' | 'other';
+
+/**
+ * The CLDR cardinal category of a whole number, for Bloom's languages.
+ *
+ * Written out rather than read from `Intl.PluralRules` because Hermes — React
+ * Native's engine — does not implement `PluralRules`: a catalog that called it
+ * would pluralise on web and throw on a phone. Whole numbers only; a count of
+ * days or minutes is never fractional.
+ */
+export function pluralCategory(language: BloomLanguage, count: number): PluralCategory {
+  const n = Math.abs(Math.trunc(count));
+  const mod10 = n % 10;
+  const mod100 = n % 100;
+  switch (language) {
+    case 'ja':
+    case 'zh':
+    case 'id':
+      return 'other';
+    case 'fr':
+    case 'pt':
+    case 'hi':
+    case 'bn':
+      return n === 0 || n === 1 ? 'one' : 'other';
+    case 'ru':
+      if (mod10 === 1 && mod100 !== 11) return 'one';
+      if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return 'few';
+      return 'many';
+    case 'ar':
+      if (n === 0) return 'zero';
+      if (n === 1) return 'one';
+      if (n === 2) return 'two';
+      if (mod100 >= 3 && mod100 <= 10) return 'few';
+      if (mod100 >= 11) return 'many';
+      return 'other';
+    default:
+      return n === 1 ? 'one' : 'other';
+  }
+}
+
+/**
+ * Picks the form for `count`. `other` is required; a category a language
+ * uses but the caller left out falls back to it.
+ */
+export function plural(
+  language: BloomLanguage,
+  count: number,
+  forms: Partial<Record<PluralCategory, string>> & { other: string },
+): string {
+  return (forms[pluralCategory(language, count)] ?? forms.other).replace('{n}', String(count));
+}

package/src/provider/BloomProvider.tsx

@@ -7,6 +7,7 @@ import { GlassBlurTargetProvider } from '../glass/blur-target';
 import { BottomEdgeProvider } from '../layout/bottom-edge';
 import { TopEdgeProvider } from '../layout/top-edge';
 import { ImageResolverProvider, type ImageResolver } from '../image-resolver';
+import { LocaleProvider } from '../locale/context';
 import { BloomHapticsProvider } from '../hooks/use-haptics';
 import { TabBarMinimizeProvider } from '../tab-bar/context';
 import { BloomThemeProvider, type BloomThemeProviderProps } from '../theme';
@@ -26,51 +27,54 @@ export function BloomProvider({
   imageResolver,
   haptics = true,
   scrollAdapter = noRouterAdapter,
+  locale,
   ...themeProps
 }: BloomProviderProps) {
   return (
     // `value` is passed unconditionally (null when unset) so toggling a resolver
     // never changes the tree shape and remounts everything below it.
     <ImageResolverProvider value={imageResolver ?? null}>
-      <BloomThemeProvider {...themeProps}>
-        <ScrollRestorationProvider adapter={scrollAdapter}>
-          <BloomHapticsProvider enabled={haptics}>
-            {/*
-              A PROVIDER, not an outlet, and the distinction is the one this
-              component's exclusion list encodes. Outlets stay out because a
-              second mount duplicates every surface they render; this renders NO
-              surface — a transparent container on Android and nothing at all
-              elsewhere — so a second mount duplicates nothing, and the nearest
-              one simply becomes the target for its subtree. Nor is its position
-              an app decision the way an outlet's is: it has no z-order and no
-              insets, and it must WRAP the content, which is exactly what this
-              provider already does with `children`.
-            */}
-            <GlassBlurTargetProvider>
+      <LocaleProvider locale={locale}>
+        <BloomThemeProvider {...themeProps}>
+          <ScrollRestorationProvider adapter={scrollAdapter}>
+            <BloomHapticsProvider enabled={haptics}>
               {/*
-                The bottom edge's claim registry. Also a provider, not an outlet:
-                it renders nothing and holds only the set of surfaces currently
-                parked at the bottom edge, so a tab bar can publish its footprint
-                and a FAB or a toast stack can read it without either importing
-                the other.
+                A PROVIDER, not an outlet, and the distinction is the one this
+                component's exclusion list encodes. Outlets stay out because a
+                second mount duplicates every surface they render; this renders NO
+                surface — a transparent container on Android and nothing at all
+                elsewhere — so a second mount duplicates nothing, and the nearest
+                one simply becomes the target for its subtree. Nor is its position
+                an app decision the way an outlet's is: it has no z-order and no
+                insets, and it must WRAP the content, which is exactly what this
+                provider already does with `children`.
               */}
-              <BottomEdgeProvider>
+              <GlassBlurTargetProvider>
                 {/*
-                  And the top edge's, for the same reason one edge further up: a
-                  floating `PageHeader` overlays the content rather than sitting
-                  above it, so the content has to be told how much of the edge is
-                  gone. Two registries rather than one keyed by edge, because a
-                  reader of either only ever wants one number and must not
-                  re-render when the other moves.
+                  The bottom edge's claim registry. Also a provider, not an outlet:
+                  it renders nothing and holds only the set of surfaces currently
+                  parked at the bottom edge, so a tab bar can publish its footprint
+                  and a FAB or a toast stack can read it without either importing
+                  the other.
                 */}
-                <TopEdgeProvider>
-                  <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
-                </TopEdgeProvider>
-              </BottomEdgeProvider>
-            </GlassBlurTargetProvider>
-          </BloomHapticsProvider>
-        </ScrollRestorationProvider>
-      </BloomThemeProvider>
+                <BottomEdgeProvider>
+                  {/*
+                    And the top edge's, for the same reason one edge further up: a
+                    floating `PageHeader` overlays the content rather than sitting
+                    above it, so the content has to be told how much of the edge is
+                    gone. Two registries rather than one keyed by edge, because a
+                    reader of either only ever wants one number and must not
+                    re-render when the other moves.
+                  */}
+                  <TopEdgeProvider>
+                    <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
+                  </TopEdgeProvider>
+                </BottomEdgeProvider>
+              </GlassBlurTargetProvider>
+            </BloomHapticsProvider>
+          </ScrollRestorationProvider>
+        </BloomThemeProvider>
+      </LocaleProvider>
     </ImageResolverProvider>
   );
 }

package/src/provider/types.ts

@@ -15,4 +15,10 @@ export interface BloomProviderProps extends Omit<BloomThemeProviderProps, 'child
   imageResolver?: ImageResolver;
   /** `false` disables haptic feedback app-wide (honored by every `useHaptics()` call). */
   haptics?: boolean;
+  /**
+   * BCP 47 locale for every Bloom component below — dates, month names and
+   * Bloom's own strings (Cancel, Apply, …). A component's own `locale` prop
+   * wins. Unset, components follow the runtime's locale.
+   */
+  locale?: string;
 }