@oxy.so/bloom 5.0.0 → 5.1.1

package/src/menu-item/messages.ts

@@ -0,0 +1,275 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { MenuItemDiet } from './types';
+
+/**
+ * Every fixed string the menu-item family draws or announces, in each Bloom
+ * language. Names and prices arrive formatted. A caller's `dietLabels`,
+ * `spiceLabel`, `addLabel`, `unavailableLabel`, a group's `ruleLabel` and the
+ * options' `*Label` props still win.
+ */
+export interface MenuItemMessages {
+  diets: Record<MenuItemDiet, string>;
+  /** The word the flames are announced with. */
+  spicy: string;
+  /** The flames in words: "Spicy 2 of 3". `label` is `spicy` or the caller's word. */
+  spiceOf: (label: string, level: number, max: number) => string;
+  /** A discounted price in the row's name: "€9, originally €12". */
+  originally: (price: string, original: string) => string;
+  /** How many are already in the basket, in the row's name. */
+  inBasket: (count: number) => string;
+  soldOut: string;
+  /** Names the add control: "Add Margherita". */
+  addItem: (name: string) => string;
+  /** A group's rule in words. */
+  choose: (count: number) => string;
+  chooseRange: (min: number, max: number) => string;
+  upTo: (count: number) => string;
+  optional: string;
+  quantity: string;
+  addToBasket: string;
+  /** Names the set of questions. */
+  options: string;
+}
+
+export const MENU_ITEM_MESSAGES: MessageCatalog<MenuItemMessages> = {
+  en: {
+    diets: { vegetarian: 'Vegetarian', vegan: 'Vegan', 'gluten-free': 'Gluten-free', 'dairy-free': 'Dairy-free', halal: 'Halal', kosher: 'Kosher' },
+    spicy: 'Spicy',
+    spiceOf: (label, level, max) => `${label} ${level} of ${max}`,
+    originally: (price, original) => `${price}, originally ${original}`,
+    inBasket: (n) => `${n} in basket`,
+    soldOut: 'Sold out',
+    addItem: (name) => `Add ${name}`,
+    choose: (n) => `Choose ${n}`,
+    chooseRange: (min, max) => `Choose ${min} to ${max}`,
+    upTo: (n) => `Up to ${n}`,
+    optional: 'Optional',
+    quantity: 'Quantity',
+    addToBasket: 'Add to basket',
+    options: 'Options',
+  },
+  es: {
+    diets: { vegetarian: 'Vegetariano', vegan: 'Vegano', 'gluten-free': 'Sin gluten', 'dairy-free': 'Sin lácteos', halal: 'Halal', kosher: 'Kosher' },
+    spicy: 'Picante',
+    spiceOf: (label, level, max) => `${label} ${level} de ${max}`,
+    originally: (price, original) => `${price}, antes ${original}`,
+    inBasket: (n) => `${n} en la cesta`,
+    soldOut: 'Agotado',
+    addItem: (name) => `Añadir ${name}`,
+    choose: (n) => `Elige ${n}`,
+    chooseRange: (min, max) => `Elige de ${min} a ${max}`,
+    upTo: (n) => `Hasta ${n}`,
+    optional: 'Opcional',
+    quantity: 'Cantidad',
+    addToBasket: 'Añadir a la cesta',
+    options: 'Opciones',
+  },
+  ca: {
+    diets: { vegetarian: 'Vegetarià', vegan: 'Vegà', 'gluten-free': 'Sense gluten', 'dairy-free': 'Sense lactis', halal: 'Halal', kosher: 'Caixer' },
+    spicy: 'Picant',
+    spiceOf: (label, level, max) => `${label} ${level} de ${max}`,
+    originally: (price, original) => `${price}, abans ${original}`,
+    inBasket: (n) => `${n} a la cistella`,
+    soldOut: 'Esgotat',
+    addItem: (name) => `Afegeix ${name}`,
+    choose: (n) => `Tria'n ${n}`,
+    chooseRange: (min, max) => `Tria'n de ${min} a ${max}`,
+    upTo: (n) => `Fins a ${n}`,
+    optional: 'Opcional',
+    quantity: 'Quantitat',
+    addToBasket: 'Afegeix a la cistella',
+    options: 'Opcions',
+  },
+  de: {
+    diets: { vegetarian: 'Vegetarisch', vegan: 'Vegan', 'gluten-free': 'Glutenfrei', 'dairy-free': 'Laktosefrei', halal: 'Halal', kosher: 'Koscher' },
+    spicy: 'Scharf',
+    spiceOf: (label, level, max) => `${label} ${level} von ${max}`,
+    originally: (price, original) => `${price}, statt ${original}`,
+    inBasket: (n) => `${n} im Warenkorb`,
+    soldOut: 'Ausverkauft',
+    addItem: (name) => `${name} hinzufügen`,
+    choose: (n) => `${n} auswählen`,
+    chooseRange: (min, max) => `${min} bis ${max} auswählen`,
+    upTo: (n) => `Bis zu ${n}`,
+    optional: 'Optional',
+    quantity: 'Menge',
+    addToBasket: 'In den Warenkorb',
+    options: 'Optionen',
+  },
+  fr: {
+    diets: { vegetarian: 'Végétarien', vegan: 'Végan', 'gluten-free': 'Sans gluten', 'dairy-free': 'Sans lactose', halal: 'Halal', kosher: 'Casher' },
+    spicy: 'Épicé',
+    spiceOf: (label, level, max) => `${label} ${level} sur ${max}`,
+    originally: (price, original) => `${price}, au lieu de ${original}`,
+    inBasket: (n) => `${n} dans le panier`,
+    soldOut: 'Épuisé',
+    addItem: (name) => `Ajouter ${name}`,
+    choose: (n) => `Choisissez-en ${n}`,
+    chooseRange: (min, max) => `Choisissez-en de ${min} à ${max}`,
+    upTo: (n) => `Jusqu'à ${n}`,
+    optional: 'Facultatif',
+    quantity: 'Quantité',
+    addToBasket: 'Ajouter au panier',
+    options: 'Options',
+  },
+  it: {
+    diets: { vegetarian: 'Vegetariano', vegan: 'Vegano', 'gluten-free': 'Senza glutine', 'dairy-free': 'Senza lattosio', halal: 'Halal', kosher: 'Kosher' },
+    spicy: 'Piccante',
+    spiceOf: (label, level, max) => `${label} ${level} su ${max}`,
+    originally: (price, original) => `${price}, prima ${original}`,
+    inBasket: (n) => `${n} nel carrello`,
+    soldOut: 'Esaurito',
+    addItem: (name) => `Aggiungi ${name}`,
+    choose: (n) => `Scegline ${n}`,
+    chooseRange: (min, max) => `Scegline da ${min} a ${max}`,
+    upTo: (n) => `Fino a ${n}`,
+    optional: 'Facoltativo',
+    quantity: 'Quantità',
+    addToBasket: 'Aggiungi al carrello',
+    options: 'Opzioni',
+  },
+  pt: {
+    diets: { vegetarian: 'Vegetariano', vegan: 'Vegano', 'gluten-free': 'Sem glúten', 'dairy-free': 'Sem lactose', halal: 'Halal', kosher: 'Kosher' },
+    spicy: 'Picante',
+    spiceOf: (label, level, max) => `${label} ${level} de ${max}`,
+    originally: (price, original) => `${price}, antes ${original}`,
+    inBasket: (n) => `${n} na sacola`,
+    soldOut: 'Esgotado',
+    addItem: (name) => `Adicionar ${name}`,
+    choose: (n) => `Escolha ${n}`,
+    chooseRange: (min, max) => `Escolha de ${min} a ${max}`,
+    upTo: (n) => `Até ${n}`,
+    optional: 'Opcional',
+    quantity: 'Quantidade',
+    addToBasket: 'Adicionar à sacola',
+    options: 'Opções',
+  },
+  ru: {
+    diets: { vegetarian: 'Вегетарианское', vegan: 'Веганское', 'gluten-free': 'Без глютена', 'dairy-free': 'Без лактозы', halal: 'Халяль', kosher: 'Кошерное' },
+    spicy: 'Острота',
+    spiceOf: (label, level, max) => `${label}: ${level} из ${max}`,
+    originally: (price, original) => `${price}, вместо ${original}`,
+    inBasket: (n) => `В корзине: ${n}`,
+    soldOut: 'Нет в наличии',
+    addItem: (name) => `Добавить «${name}»`,
+    choose: (n) => `Выберите ${n}`,
+    chooseRange: (min, max) => `Выберите от ${min} до ${max}`,
+    upTo: (n) => `До ${n}`,
+    optional: 'Необязательно',
+    quantity: 'Количество',
+    addToBasket: 'В корзину',
+    options: 'Параметры',
+  },
+  tr: {
+    diets: { vegetarian: 'Vejetaryen', vegan: 'Vegan', 'gluten-free': 'Glutensiz', 'dairy-free': 'Laktozsuz', halal: 'Helal', kosher: 'Koşer' },
+    spicy: 'Acılık',
+    spiceOf: (label, level, max) => `${label} ${max} üzerinden ${level}`,
+    originally: (price, original) => `${price}, önceki fiyat ${original}`,
+    inBasket: (n) => `Sepette ${n} adet`,
+    soldOut: 'Tükendi',
+    addItem: (name) => `${name} ekle`,
+    choose: (n) => `${n} seçin`,
+    chooseRange: (min, max) => `${min}–${max} arası seçin`,
+    upTo: (n) => `En fazla ${n}`,
+    optional: 'İsteğe bağlı',
+    quantity: 'Adet',
+    addToBasket: 'Sepete ekle',
+    options: 'Seçenekler',
+  },
+  ja: {
+    diets: { vegetarian: 'ベジタリアン', vegan: 'ヴィーガン', 'gluten-free': 'グルテンフリー', 'dairy-free': '乳製品不使用', halal: 'ハラール', kosher: 'コーシャ' },
+    spicy: '辛さ',
+    spiceOf: (label, level, max) => `${label} ${level}/${max}`,
+    originally: (price, original) => `${price}（通常 ${original}）`,
+    inBasket: (n) => `カートに${n}点`,
+    soldOut: '売り切れ',
+    addItem: (name) => `${name}を追加`,
+    choose: (n) => `${n}つ選択`,
+    chooseRange: (min, max) => `${min}〜${max}つ選択`,
+    upTo: (n) => `${n}つまで`,
+    optional: '任意',
+    quantity: '数量',
+    addToBasket: 'カートに追加',
+    options: 'オプション',
+  },
+  zh: {
+    diets: { vegetarian: '素食', vegan: '纯素', 'gluten-free': '无麸质', 'dairy-free': '无乳制品', halal: '清真', kosher: '犹太洁食' },
+    spicy: '辣度',
+    spiceOf: (label, level, max) => `${label} ${level}/${max}`,
+    originally: (price, original) => `${price}，原价 ${original}`,
+    inBasket: (n) => `购物车中 ${n} 份`,
+    soldOut: '已售罄',
+    addItem: (name) => `添加${name}`,
+    choose: (n) => `选择 ${n} 项`,
+    chooseRange: (min, max) => `选择 ${min} 至 ${max} 项`,
+    upTo: (n) => `最多 ${n} 项`,
+    optional: '可选',
+    quantity: '数量',
+    addToBasket: '加入购物车',
+    options: '选项',
+  },
+  ar: {
+    diets: { vegetarian: 'نباتي', vegan: 'نباتي صرف', 'gluten-free': 'خالٍ من الغلوتين', 'dairy-free': 'خالٍ من الألبان', halal: 'حلال', kosher: 'كوشر' },
+    spicy: 'حار',
+    spiceOf: (label, level, max) => `${label} ${level} من ${max}`,
+    originally: (price, original) => `${price}، بدلًا من ${original}`,
+    inBasket: (n) => `في السلة: ${n}`,
+    soldOut: 'نفدت الكمية',
+    addItem: (name) => `إضافة ${name}`,
+    choose: (n) => `اختر ${n}`,
+    chooseRange: (min, max) => `اختر من ${min} إلى ${max}`,
+    upTo: (n) => `حتى ${n}`,
+    optional: 'اختياري',
+    quantity: 'الكمية',
+    addToBasket: 'أضف إلى السلة',
+    options: 'الخيارات',
+  },
+  hi: {
+    diets: { vegetarian: 'शाकाहारी', vegan: 'वीगन', 'gluten-free': 'ग्लूटेन-मुक्त', 'dairy-free': 'डेयरी-मुक्त', halal: 'हलाल', kosher: 'कोशर' },
+    spicy: 'तीखा',
+    spiceOf: (label, level, max) => `${label} ${max} में से ${level}`,
+    originally: (price, original) => `${price}, पहले ${original}`,
+    inBasket: (n) => `बास्केट में ${n}`,
+    soldOut: 'बिक गया',
+    addItem: (name) => `${name} जोड़ें`,
+    choose: (n) => `${n} चुनें`,
+    chooseRange: (min, max) => `${min} से ${max} चुनें`,
+    upTo: (n) => `${n} तक`,
+    optional: 'वैकल्पिक',
+    quantity: 'मात्रा',
+    addToBasket: 'बास्केट में जोड़ें',
+    options: 'विकल्प',
+  },
+  bn: {
+    diets: { vegetarian: 'নিরামিষ', vegan: 'ভিগান', 'gluten-free': 'গ্লুটেন-মুক্ত', 'dairy-free': 'দুগ্ধজাত-মুক্ত', halal: 'হালাল', kosher: 'কোশার' },
+    spicy: 'ঝাল',
+    spiceOf: (label, level, max) => `${label} ${max}-এর মধ্যে ${level}`,
+    originally: (price, original) => `${price}, আগে ছিল ${original}`,
+    inBasket: (n) => `ঝুড়িতে ${n}টি`,
+    soldOut: 'বিক্রি শেষ',
+    addItem: (name) => `${name} যোগ করুন`,
+    choose: (n) => `${n}টি বেছে নিন`,
+    chooseRange: (min, max) => `${min} থেকে ${max}টি বেছে নিন`,
+    upTo: (n) => `সর্বোচ্চ ${n}টি`,
+    optional: 'ঐচ্ছিক',
+    quantity: 'পরিমাণ',
+    addToBasket: 'ঝুড়িতে যোগ করুন',
+    options: 'বিকল্প',
+  },
+  id: {
+    diets: { vegetarian: 'Vegetarian', vegan: 'Vegan', 'gluten-free': 'Bebas gluten', 'dairy-free': 'Bebas susu', halal: 'Halal', kosher: 'Kosher' },
+    spicy: 'Pedas',
+    spiceOf: (label, level, max) => `${label} ${level} dari ${max}`,
+    originally: (price, original) => `${price}, sebelumnya ${original}`,
+    inBasket: (n) => `${n} di keranjang`,
+    soldOut: 'Habis',
+    addItem: (name) => `Tambah ${name}`,
+    choose: (n) => `Pilih ${n}`,
+    chooseRange: (min, max) => `Pilih ${min} sampai ${max}`,
+    upTo: (n) => `Hingga ${n}`,
+    optional: 'Opsional',
+    quantity: 'Jumlah',
+    addToBasket: 'Tambah ke keranjang',
+    options: 'Opsi',
+  },
+};

package/src/menu-item/parts.tsx

@@ -8,11 +8,12 @@ import { RiLeafLine } from '../icons/remix/RiLeafLine';
 import { RiPlantLine } from '../icons/remix/RiPlantLine';
 import { useImageResolver } from '../image-resolver/context';
 import { resolvePhoto } from '../listing-card/shared';
+import { useMessages } from '../locale/messages';
 import {
-  MENU_ITEM_DIET_LABELS,
   MENU_ITEM_SPICE_MAX,
   MENU_ITEM_WASH_OPACITY,
 } from './constants';
+import { MENU_ITEM_MESSAGES } from './messages';
 import { describeSpice, spiceLevel, uniqueDiets } from './shared';
 
 import type { MenuItemDiet, MenuItemRowProps } from './types';
@@ -60,6 +61,7 @@ export interface MenuItemDietsProps {
  * diet twice.
  */
 export function MenuItemDiets({ diets, labels, surface, glyphColor, glyph, leading, style, testID }: MenuItemDietsProps) {
+  const { messages } = useMessages(MENU_ITEM_MESSAGES);
   const unique = uniqueDiets(diets);
   if (unique.length === 0 && leading == null) return null;
   return (
@@ -82,7 +84,7 @@ export function MenuItemDiets({ diets, labels, surface, glyphColor, glyph, leadi
             startIcon={Glyph ? <Glyph width={glyph} height={glyph} fill={glyphColor} /> : undefined}
             testID={testID ? `${testID}-diet-${diet}` : undefined}
           >
-            {labels?.[diet] ?? MENU_ITEM_DIET_LABELS[diet]}
+            {labels?.[diet] ?? messages.diets[diet]}
           </Chip>
         );
       })}
@@ -113,6 +115,7 @@ export interface MenuItemSpiceProps {
  * component correct on its own, anywhere else.
  */
 export function MenuItemSpice({ level, label, color, glyph, style, testID }: MenuItemSpiceProps) {
+  const { messages } = useMessages(MENU_ITEM_MESSAGES);
   const shown = spiceLevel(level);
   if (shown === 0) return null;
   return (
@@ -122,7 +125,7 @@ export function MenuItemSpice({ level, label, color, glyph, style, testID }: Men
       // `aria-label` and no role is not announced there, while on native
       // `accessible` + the label is already one node with one name.
       {...(IS_WEB ? { role: 'img' as const } : null)}
-      accessibilityLabel={describeSpice(shown, label)}
+      accessibilityLabel={describeSpice(shown, label, messages)}
       style={[{ flexDirection: 'row', alignItems: 'center', gap: 1 }, style]}
       testID={testID ? `${testID}-spice` : undefined}
     >

package/src/menu-item/shared.ts

@@ -6,7 +6,8 @@
 import { surfaceFillOn, surfaceTextOn, hairlineOn, type SurfaceTextPaint } from '../styles/surface-levels';
 import { resolveAccentColors } from '../theme/accent-colors';
 import type { Theme } from '../theme/types';
-import { MENU_ITEM_DIET_LABELS, MENU_ITEM_SPICE_MAX } from './constants';
+import { MENU_ITEM_SPICE_MAX } from './constants';
+import { MENU_ITEM_MESSAGES, type MenuItemMessages } from './messages';
 import type { MenuItemDiet, MenuItemOption, MenuItemOptionGroup, MenuItemRowProps } from './types';
 
 export interface MenuItemPaint extends SurfaceTextPaint {
@@ -54,8 +55,12 @@ export function spiceLevel(spice: number | undefined): number {
 }
 
 /** "Spicy 2 of 3" — the flames in words, since a glyph run announces nothing. */
-export function describeSpice(level: number, label = 'Spicy'): string {
-  return `${label} ${level} of ${MENU_ITEM_SPICE_MAX}`;
+export function describeSpice(
+  level: number,
+  label?: string,
+  messages: MenuItemMessages = MENU_ITEM_MESSAGES.en,
+): string {
+  return messages.spiceOf(label ?? messages.spicy, level, MENU_ITEM_SPICE_MAX);
 }
 
 /**
@@ -77,17 +82,18 @@ export function composeMenuItemName(
     | 'unavailable'
     | 'unavailableLabel'
   >,
+  messages: MenuItemMessages = MENU_ITEM_MESSAGES.en,
 ): string {
   const parts: string[] = [props.name];
   for (const diet of uniqueDiets(props.diets)) {
-    parts.push(props.dietLabels?.[diet] ?? MENU_ITEM_DIET_LABELS[diet]);
+    parts.push(props.dietLabels?.[diet] ?? messages.diets[diet]);
   }
   const heat = spiceLevel(props.spice);
-  if (heat > 0) parts.push(describeSpice(heat, props.spiceLabel));
-  if (props.originalPrice) parts.push(`${props.price}, originally ${props.originalPrice}`);
+  if (heat > 0) parts.push(describeSpice(heat, props.spiceLabel, messages));
+  if (props.originalPrice) parts.push(messages.originally(props.price, props.originalPrice));
   else parts.push(props.price);
-  if (props.quantity && props.quantity > 0) parts.push(`${props.quantity} in basket`);
-  if (props.unavailable) parts.push(props.unavailableLabel ?? 'Sold out');
+  if (props.quantity && props.quantity > 0) parts.push(messages.inBasket(props.quantity));
+  if (props.unavailable) parts.push(props.unavailableLabel ?? messages.soldOut);
   return parts.join(', ');
 }
 
@@ -116,16 +122,20 @@ export function optionGroupRule(group: Pick<MenuItemOptionGroup, 'min' | 'max'>)
 /**
  * The rule in words — "Choose 1", "Up to 3", "Choose 2 to 4", "Optional".
  *
- * English, and overridable per group with `ruleLabel`. The one case worth
+ * In the given messages' language (English by default), and overridable per
+ * group with `ruleLabel`. The one case worth
  * naming is `max: 1, min: 0`: "Up to 1" is not a sentence anybody says, so a
  * single optional choice reads as "Optional".
  */
-export function describeOptionRule(group: Pick<MenuItemOptionGroup, 'min' | 'max' | 'ruleLabel'>): string {
+export function describeOptionRule(
+  group: Pick<MenuItemOptionGroup, 'min' | 'max' | 'ruleLabel'>,
+  messages: MenuItemMessages = MENU_ITEM_MESSAGES.en,
+): string {
   if (group.ruleLabel != null) return group.ruleLabel;
   const { min, max } = optionGroupRule(group);
-  if (min === max) return `Choose ${max}`;
-  if (min === 0) return max === 1 ? 'Optional' : `Up to ${max}`;
-  return `Choose ${min} to ${max}`;
+  if (min === max) return messages.choose(max);
+  if (min === 0) return max === 1 ? messages.optional : messages.upTo(max);
+  return messages.chooseRange(min, max);
 }
 
 /**

package/src/menu-item/types.ts

@@ -38,7 +38,7 @@ export interface MenuItemRowProps {
    * reader whether one is enough.
    */
   spice?: number;
-  /** The word the flames are announced with. Default `"Spicy"` (as "Spicy 2 of 3"). */
+  /** The word the flames are announced with (`"Spicy"` in English, as "Spicy 2 of 3"). */
   spiceLabel?: string;
   /**
    * How many are already in the basket. Drawn ONCE: in the `Stepper` when
@@ -51,11 +51,11 @@ export interface MenuItemRowProps {
   onQuantityChange?: (quantity: number) => void;
   /** The add control. Drawn while nothing is in the basket yet. */
   onAdd?: () => void;
-  /** Names the add control, which draws no text. Default `"Add <name>"`. */
+  /** Names the add control, which draws no text (`"Add <name>"` in English). */
   addLabel?: string;
   /** Sold out: the photo washes toward the page, the row dims and every control goes. */
   unavailable?: boolean;
-  /** Default `"Sold out"`. */
+  /** `"Sold out"` in English. */
   unavailableLabel?: string;
   /** Opens the dish — its options, its full description. */
   onPress?: () => void;
@@ -117,7 +117,7 @@ export interface MenuItemOptionsProps {
   /** How many of the dish. Without `onQuantityChange` no quantity row is drawn. */
   quantity?: number;
   onQuantityChange?: (quantity: number) => void;
-  /** The quantity row's title. Default `"Quantity"`. */
+  /** The quantity row's title (`"Quantity"` in English). */
   quantityLabel?: string;
   /**
    * The running price, PRE-FORMATTED — "€16.40". The app recomputes it as the
@@ -126,7 +126,7 @@ export interface MenuItemOptionsProps {
   total?: string;
   /** The footer button. Without it no footer is drawn. */
   onSubmit?: () => void;
-  /** The footer button's label. Default `"Add to basket"`. */
+  /** The footer button's label (`"Add to basket"` in English). */
   submitLabel?: string;
   /** Blocks the footer button — a required group with nothing chosen. */
   submitDisabled?: boolean;
@@ -134,7 +134,7 @@ export interface MenuItemOptionsProps {
   disabled?: boolean;
   /** A node above the groups — the dish's own photo, name and description. */
   header?: ReactNode;
-  /** Names the set of questions. Default `"Options"`. */
+  /** Names the set of questions (`"Options"` in English). */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/message-media/FileMessage.tsx

@@ -95,7 +95,7 @@ function FileMessageComponent({
   testID,
 }: FileMessageProps) {
   const common = useCommonMessages();
-  const { messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
+  const { locale, messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
   const cancelLabel = cancelLabelProp ?? common.cancel;
   const downloadLabel = downloadLabelProp ?? messages.download;
   const theme = useTheme();
@@ -111,7 +111,7 @@ function FileMessageComponent({
   );
   const [hovered, handlers] = useHovered();
 
-  const size = sizeLabel ?? (typeof sizeBytes === 'number' ? formatFileSize(sizeBytes) : undefined);
+  const size = sizeLabel ?? (typeof sizeBytes === 'number' ? formatFileSize(sizeBytes, locale) : undefined);
   const type = typeLabel ?? fileTypeLabel(name, mimeType, messages);
   const meta = fileMetaLine([size, type, metaLabel]);
 

package/src/message-media/VideoMessage.tsx

@@ -130,14 +130,14 @@ function VideoMessageComponent({
 }: VideoMessageProps) {
   const theme = useTheme();
   const common = useCommonMessages();
-  const { messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
+  const { locale, messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
   const paint = useMemo(
     () => resolveMessageMediaPaint(theme, tone, onColor, bubbleColor),
     [theme, tone, onColor, bubbleColor],
   );
 
   const clock = durationLabel ?? (typeof duration === 'number' ? formatDuration(duration) : undefined);
-  const size = sizeLabel ?? (typeof sizeBytes === 'number' ? formatFileSize(sizeBytes) : undefined);
+  const size = sizeLabel ?? (typeof sizeBytes === 'number' ? formatFileSize(sizeBytes, locale) : undefined);
   const name = accessibilityLabel ?? fileMetaLine([messages.video, clock]);
   const sending = state === 'sending';
 

package/src/message-media/VoiceMessage.tsx

@@ -237,12 +237,15 @@ const Waveform = memo(function Waveform({
 
 function SpeedPill({
   rate,
+  locale,
   label,
   onPress,
   paint,
   testID,
 }: {
   rate: VoicePlaybackRate;
+  /** Formats the rate on the pill. */
+  locale: string | undefined;
   /** The pill's name, "Playback speed, 1.5×". */
   label: string;
   onPress: () => void;
@@ -270,7 +273,7 @@ function SpeedPill({
       testID={testID}
     >
       <Text variant="caption-2-medium" style={{ color: paint.text }}>
-        {formatPlaybackRate(rate)}
+        {formatPlaybackRate(rate, locale)}
       </Text>
     </Pressable>
   );
@@ -325,7 +328,7 @@ function VoiceMessageComponent({
   testID,
 }: VoiceMessageProps) {
   const theme = useTheme();
-  const { messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
+  const { locale, messages } = useMessages(MESSAGE_MEDIA_MESSAGES);
   const transcribeLabel = transcribeLabelProp ?? messages.transcribe;
   const hideTranscriptLabel = hideTranscriptLabelProp ?? messages.hideTranscript;
   const seekLabel = seekLabelProp ?? messages.seek;
@@ -420,8 +423,9 @@ function VoiceMessageComponent({
         <View style={{ flexGrow: 1 }} />
         {rate !== undefined && onRateChange ? (
           <SpeedPill
+            locale={locale}
             rate={rate}
-            label={messages.playbackSpeed(formatPlaybackRate(rate))}
+            label={messages.playbackSpeed(formatPlaybackRate(rate, locale))}
             paint={paint}
             onPress={() => onRateChange(nextPlaybackRate(rate))}
             testID={testID ? `${testID}-rate` : undefined}

package/src/message-media/shared.ts

@@ -6,6 +6,8 @@ import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
 import type { Theme } from '../theme/types';
 import { MESSAGE_MEDIA_MESSAGES, type MessageMediaMessages } from './messages';
 import type { FileKind, MessageTone, VoicePlaybackRate } from './types';
+import { formatMultiplier } from '../locale/format-number';
+import { clamp01 } from '../styles/clamp';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -474,7 +476,6 @@ export const WAVEFORM_MIN_BAR = 0.18;
 export function resampleWaveform(samples: readonly number[], count: number): number[] {
   const bars = Math.max(1, Math.floor(count));
   if (samples.length === 0) return Array.from({ length: bars }, () => 0);
-  const clamp01 = (v: number) => (Number.isFinite(v) ? Math.min(1, Math.max(0, v)) : 0);
   if (samples.length === bars) return samples.map(clamp01);
   if (samples.length < bars) {
     return Array.from({ length: bars }, (_, i) =>
@@ -516,8 +517,8 @@ export function nextPlaybackRate(rate: VoicePlaybackRate): VoicePlaybackRate {
 }
 
 /** `"1×"`, `"1.5×"`, `"2×"` — the multiplication sign, not the letter x. */
-export function formatPlaybackRate(rate: VoicePlaybackRate): string {
-  return `${rate}×`;
+export function formatPlaybackRate(rate: VoicePlaybackRate, locale?: string): string {
+  return formatMultiplier(rate, locale);
 }
 
 // ---------------------------------------------------------------------------

package/src/offering-badge/OfferingBadge.tsx

@@ -1,7 +1,9 @@
 import React, { memo } from 'react';
 
 import { Badge } from '../badge';
-import { OFFERING_BADGE_RUNG, OFFERING_ICONS, OFFERING_LABELS, OFFERING_TONES } from './shared';
+import { useMessages } from '../locale/messages';
+import { OFFERING_BADGE_MESSAGES } from './messages';
+import { OFFERING_BADGE_RUNG, OFFERING_ICONS, OFFERING_TONES } from './shared';
 import type { OfferingBadgeProps } from './types';
 
 /**
@@ -26,11 +28,12 @@ function OfferingBadgeComponent({
   style,
   testID,
 }: OfferingBadgeProps) {
+  const { messages } = useMessages(OFFERING_BADGE_MESSAGES);
   const Icon = icon === true ? OFFERING_ICONS[offering] : icon === false ? undefined : icon;
 
   return (
     <Badge
-      content={label ?? OFFERING_LABELS[offering]}
+      content={label ?? messages.offerings[offering]}
       icon={Icon}
       size={OFFERING_BADGE_RUNG[size]}
       color={OFFERING_TONES[offering]}

package/src/offering-badge/messages.ts

@@ -0,0 +1,28 @@
+import type { Offering } from '../listing-card/types';
+import type { MessageCatalog } from '../locale/messages';
+
+/**
+ * The word each offering is drawn with, in each Bloom language. A caller's
+ * `label` still wins.
+ */
+export interface OfferingBadgeMessages {
+  offerings: Record<Offering, string>;
+}
+
+export const OFFERING_BADGE_MESSAGES: MessageCatalog<OfferingBadgeMessages> = {
+  en: { offerings: { long_term_rent: 'For rent', sale: 'For sale', short_term_rent: 'Vacation rental', exchange: 'Swap' } },
+  es: { offerings: { long_term_rent: 'En alquiler', sale: 'En venta', short_term_rent: 'Alquiler vacacional', exchange: 'Intercambio' } },
+  ca: { offerings: { long_term_rent: 'En lloguer', sale: 'En venda', short_term_rent: 'Lloguer turístic', exchange: 'Intercanvi' } },
+  de: { offerings: { long_term_rent: 'Zu vermieten', sale: 'Zu verkaufen', short_term_rent: 'Ferienwohnung', exchange: 'Tausch' } },
+  fr: { offerings: { long_term_rent: 'À louer', sale: 'À vendre', short_term_rent: 'Location de vacances', exchange: 'Échange' } },
+  it: { offerings: { long_term_rent: 'In affitto', sale: 'In vendita', short_term_rent: 'Casa vacanze', exchange: 'Scambio' } },
+  pt: { offerings: { long_term_rent: 'Para alugar', sale: 'À venda', short_term_rent: 'Aluguel por temporada', exchange: 'Troca' } },
+  ru: { offerings: { long_term_rent: 'Аренда', sale: 'Продажа', short_term_rent: 'Посуточно', exchange: 'Обмен' } },
+  tr: { offerings: { long_term_rent: 'Kiralık', sale: 'Satılık', short_term_rent: 'Tatil kiralık', exchange: 'Takas' } },
+  ja: { offerings: { long_term_rent: '賃貸', sale: '売買', short_term_rent: 'バケーションレンタル', exchange: '交換' } },
+  zh: { offerings: { long_term_rent: '出租', sale: '出售', short_term_rent: '度假短租', exchange: '置换' } },
+  ar: { offerings: { long_term_rent: 'للإيجار', sale: 'للبيع', short_term_rent: 'إيجار سياحي', exchange: 'مقايضة' } },
+  hi: { offerings: { long_term_rent: 'किराए पर', sale: 'बिक्री के लिए', short_term_rent: 'छुट्टियों का किराया', exchange: 'अदला-बदली' } },
+  bn: { offerings: { long_term_rent: 'ভাড়া', sale: 'বিক্রয়', short_term_rent: 'ছুটির ভাড়া', exchange: 'বিনিময়' } },
+  id: { offerings: { long_term_rent: 'Disewakan', sale: 'Dijual', short_term_rent: 'Sewa liburan', exchange: 'Tukar' } },
+};

package/src/offering-badge/shared.ts

@@ -7,18 +7,17 @@ import { RiSuitcaseLine } from '../icons/remix/RiSuitcaseLine';
 import type { Offering } from '../listing-card/types';
 import type { AccentTone } from '../theme/accent-colors';
 import type { Theme } from '../theme/types';
+import { OFFERING_BADGE_MESSAGES } from './messages';
 import type { OfferingBadgeSize, OfferingBadgeVariant } from './types';
 
 /** Every offering, in the order a listing lists them. */
 export const OFFERINGS: readonly Offering[] = ['long_term_rent', 'sale', 'short_term_rent', 'exchange'];
 
-/** The English default labels. Apps in other languages pass `label`. */
-export const OFFERING_LABELS: Readonly<Record<Offering, string>> = {
-  long_term_rent: 'For rent',
-  sale: 'For sale',
-  short_term_rent: 'Vacation rental',
-  exchange: 'Swap',
-};
+/**
+ * The English labels. `OfferingBadge` speaks `OFFERING_BADGE_MESSAGES` in the
+ * resolved locale; a caller's `label` still wins.
+ */
+export const OFFERING_LABELS: Readonly<Record<Offering, string>> = OFFERING_BADGE_MESSAGES.en.offerings;
 
 export const OFFERING_ICONS: Readonly<Record<Offering, BloomIconComponent>> = {
   long_term_rent: RiKey2Line,

package/src/offering-badge/types.ts

@@ -20,7 +20,7 @@ export type OfferingBadgeIcon = BloomIconComponent;
 export interface OfferingBadgeProps {
   /** What the listing is offered as. Picks the default label, icon and tint. */
   offering: Offering;
-  /** Replaces the default label ("For rent", "For sale", "Vacation rental", "Swap"). */
+  /** Replaces the localised label ("For rent", "For sale", "Vacation rental", "Swap" in English). */
   label?: string;
   /**
    * `true` (default) draws the offering's own icon, `false` none, a component