@oxy.so/bloom 5.0.0 → 5.1.1

package/src/file-upload/FileUpload.tsx

@@ -18,12 +18,14 @@ import { RiFileImageLine } from '../icons/remix/RiFileImageLine';
 import { RiFileTextLine } from '../icons/remix/RiFileTextLine';
 import { RiUploadCloud2Line } from '../icons/remix/RiUploadCloud2Line';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useMessages } from '../locale/messages';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { FILE_UPLOAD_MESSAGES } from './messages';
 import type { FileUploadFile, FileUploadLabels, FileUploadProps } from './types';
 
 /**
@@ -447,6 +449,7 @@ const FileUploadComponent = function FileUpload({
   style,
   testID,
 }: FileUploadProps) {
+  const { locale, messages } = useMessages(FILE_UPLOAD_MESSAGES);
   const theme = useTheme();
   // The drop zone draws a prompt but names itself with a prop, so a `Field`
   // around it is the other place the name can come from — and the field's
@@ -460,12 +463,12 @@ const FileUploadComponent = function FileUpload({
   const paint = useMemo(() => resolveFileUploadPaint(theme), [theme]);
 
   const labels: FileUploadLabels = {
-    prompt: IS_WEB ? 'Drag and drop to upload or' : 'Tap to',
-    select: IS_WEB ? 'select' : 'select a file',
-    uploading: (size) => `Uploading ${size}...`,
-    uploaded: 'Uploaded successfully!',
-    unsupported: (extensions) => `Only ${extensions} files are supported`,
-    tooLarge: (max) => `That file is larger than ${max}`,
+    prompt: IS_WEB ? messages.promptWeb : messages.promptNative,
+    select: IS_WEB ? messages.selectWeb : messages.selectNative,
+    uploading: messages.uploading,
+    uploaded: messages.uploaded,
+    unsupported: messages.unsupported,
+    tooLarge: messages.tooLarge,
     ...labelOverrides,
   };
 
@@ -540,7 +543,7 @@ const FileUploadComponent = function FileUpload({
       return;
     }
     if (next.size > maxBytes) {
-      reject(labels.tooLarge(formatFileSize(maxBytes)), next);
+      reject(labels.tooLarge(formatFileSize(maxBytes, locale)), next);
       return;
     }
 
@@ -649,7 +652,7 @@ const FileUploadComponent = function FileUpload({
       {...webDataSet({ bloomFileUpload: busy ? 'busy' : 'idle' })}
       accessibilityRole="button"
       nativeID={field.nativeID}
-      accessibilityLabel={field.accessibilityLabel ?? 'Upload a file'}
+      accessibilityLabel={field.accessibilityLabel ?? messages.uploadFile}
       aria-describedby={field.describedBy}
       aria-invalid={field.invalid || undefined}
       aria-busy={busy}
@@ -838,7 +841,7 @@ const FileUploadComponent = function FileUpload({
           </StaggerLine>
           <StaggerLine state={idleReveal} kind="line" order={3} reducedMotion={reducedMotion}>
             <Text variant="body-2-regular" style={{ color: paint.hint, textAlign: 'center' }}>
-              {allowedLabel} (max {formatFileSize(maxBytes)})
+              {allowedLabel} {messages.max(formatFileSize(maxBytes, locale))}
             </Text>
           </StaggerLine>
         </View>
@@ -889,7 +892,7 @@ const FileUploadComponent = function FileUpload({
             style={{ position: 'absolute', left: 0, right: 0 }}
           >
             <Text variant="body-2-regular" style={{ color: paint.status, textAlign: 'center' }}>
-              {labels.uploading(file ? formatFileSize(file.size) : '')}
+              {labels.uploading(file ? formatFileSize(file.size, locale) : '')}
             </Text>
           </StaggerLine>
           <StaggerLine

package/src/file-upload/messages.ts

@@ -0,0 +1,206 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/**
+ * Every fixed string the file upload draws or announces, in each Bloom
+ * language. Sizes and extensions arrive formatted. A caller's `labels` and
+ * `accessibilityLabel` still win.
+ */
+export interface FileUploadMessages {
+  /** The idle prompt before the accent word, on web (a drop zone) and on native (a tap target). */
+  promptWeb: string;
+  promptNative: string;
+  /** The accent-coloured action word that completes the prompt. */
+  selectWeb: string;
+  selectNative: string;
+  uploading: (size: string) => string;
+  uploaded: string;
+  unsupported: (extensions: string) => string;
+  tooLarge: (max: string) => string;
+  /** The hint's size limit after the accepted types: "(max 8 MB)". */
+  max: (size: string) => string;
+  /** The drop zone's name. */
+  uploadFile: string;
+}
+
+export const FILE_UPLOAD_MESSAGES: MessageCatalog<FileUploadMessages> = {
+  en: {
+    promptWeb: 'Drag and drop to upload or',
+    promptNative: 'Tap to',
+    selectWeb: 'select',
+    selectNative: 'select a file',
+    uploading: (size) => `Uploading ${size}...`,
+    uploaded: 'Uploaded successfully!',
+    unsupported: (extensions) => `Only ${extensions} files are supported`,
+    tooLarge: (max) => `That file is larger than ${max}`,
+    max: (size) => `(max ${size})`,
+    uploadFile: 'Upload a file',
+  },
+  es: {
+    promptWeb: 'Arrastra y suelta para subir o',
+    promptNative: 'Toca para',
+    selectWeb: 'selecciona',
+    selectNative: 'seleccionar un archivo',
+    uploading: (size) => `Subiendo ${size}...`,
+    uploaded: '¡Subido correctamente!',
+    unsupported: (extensions) => `Solo se admiten archivos ${extensions}`,
+    tooLarge: (max) => `El archivo supera ${max}`,
+    max: (size) => `(máx. ${size})`,
+    uploadFile: 'Subir un archivo',
+  },
+  ca: {
+    promptWeb: 'Arrossega i deixa anar per pujar o',
+    promptNative: 'Toca per',
+    selectWeb: 'selecciona',
+    selectNative: 'seleccionar un fitxer',
+    uploading: (size) => `Pujant ${size}...`,
+    uploaded: "S'ha pujat correctament!",
+    unsupported: (extensions) => `Només s'admeten fitxers ${extensions}`,
+    tooLarge: (max) => `El fitxer supera ${max}`,
+    max: (size) => `(màx. ${size})`,
+    uploadFile: 'Puja un fitxer',
+  },
+  de: {
+    promptWeb: 'Zum Hochladen hierher ziehen oder',
+    promptNative: 'Tippen, um',
+    selectWeb: 'auswählen',
+    selectNative: 'eine Datei auszuwählen',
+    uploading: (size) => `${size} wird hochgeladen...`,
+    uploaded: 'Erfolgreich hochgeladen!',
+    unsupported: (extensions) => `Nur ${extensions}-Dateien werden unterstützt`,
+    tooLarge: (max) => `Die Datei ist größer als ${max}`,
+    max: (size) => `(max. ${size})`,
+    uploadFile: 'Datei hochladen',
+  },
+  fr: {
+    promptWeb: 'Glissez-déposez pour importer ou',
+    promptNative: 'Touchez pour',
+    selectWeb: 'parcourir',
+    selectNative: 'choisir un fichier',
+    uploading: (size) => `Importation de ${size}...`,
+    uploaded: 'Importation réussie !',
+    unsupported: (extensions) => `Seuls les fichiers ${extensions} sont acceptés`,
+    tooLarge: (max) => `Ce fichier dépasse ${max}`,
+    max: (size) => `(max. ${size})`,
+    uploadFile: 'Importer un fichier',
+  },
+  it: {
+    promptWeb: 'Trascina qui per caricare oppure',
+    promptNative: 'Tocca per',
+    selectWeb: 'seleziona',
+    selectNative: 'selezionare un file',
+    uploading: (size) => `Caricamento di ${size}...`,
+    uploaded: 'Caricamento completato!',
+    unsupported: (extensions) => `Sono supportati solo file ${extensions}`,
+    tooLarge: (max) => `Il file supera ${max}`,
+    max: (size) => `(max ${size})`,
+    uploadFile: 'Carica un file',
+  },
+  pt: {
+    promptWeb: 'Arraste e solte para enviar ou',
+    promptNative: 'Toque para',
+    selectWeb: 'selecione',
+    selectNative: 'selecionar um arquivo',
+    uploading: (size) => `Enviando ${size}...`,
+    uploaded: 'Enviado com sucesso!',
+    unsupported: (extensions) => `Somente arquivos ${extensions} são aceitos`,
+    tooLarge: (max) => `O arquivo é maior que ${max}`,
+    max: (size) => `(máx. ${size})`,
+    uploadFile: 'Enviar um arquivo',
+  },
+  ru: {
+    promptWeb: 'Перетащите файл для загрузки или',
+    promptNative: 'Нажмите, чтобы',
+    selectWeb: 'выберите',
+    selectNative: 'выбрать файл',
+    uploading: (size) => `Загрузка ${size}...`,
+    uploaded: 'Файл загружен!',
+    unsupported: (extensions) => `Поддерживаются только файлы ${extensions}`,
+    tooLarge: (max) => `Файл больше ${max}`,
+    max: (size) => `(макс. ${size})`,
+    uploadFile: 'Загрузить файл',
+  },
+  tr: {
+    promptWeb: 'Yüklemek için sürükleyip bırakın ya da',
+    promptNative: 'Dokunarak',
+    selectWeb: 'seçin',
+    selectNative: 'dosya seçin',
+    uploading: (size) => `${size} yükleniyor...`,
+    uploaded: 'Başarıyla yüklendi!',
+    unsupported: (extensions) => `Yalnızca ${extensions} dosyaları desteklenir`,
+    tooLarge: (max) => `Bu dosya ${max} boyutundan büyük`,
+    max: (size) => `(en fazla ${size})`,
+    uploadFile: 'Dosya yükle',
+  },
+  ja: {
+    promptWeb: 'ドラッグ＆ドロップでアップロード、または',
+    promptNative: 'タップして',
+    selectWeb: 'ファイルを選択',
+    selectNative: 'ファイルを選択',
+    uploading: (size) => `${size} をアップロード中...`,
+    uploaded: 'アップロードしました',
+    unsupported: (extensions) => `${extensions} ファイルのみ対応しています`,
+    tooLarge: (max) => `ファイルが ${max} を超えています`,
+    max: (size) => `（最大 ${size}）`,
+    uploadFile: 'ファイルをアップロード',
+  },
+  zh: {
+    promptWeb: '拖放文件以上传，或',
+    promptNative: '点按以',
+    selectWeb: '选择文件',
+    selectNative: '选择文件',
+    uploading: (size) => `正在上传 ${size}...`,
+    uploaded: '上传成功！',
+    unsupported: (extensions) => `仅支持 ${extensions} 文件`,
+    tooLarge: (max) => `文件超过 ${max}`,
+    max: (size) => `（最大 ${size}）`,
+    uploadFile: '上传文件',
+  },
+  ar: {
+    promptWeb: 'اسحب الملف وأفلته للرفع أو',
+    promptNative: 'انقر',
+    selectWeb: 'اختر ملفًا',
+    selectNative: 'لاختيار ملف',
+    uploading: (size) => `جارٍ رفع ${size}...`,
+    uploaded: 'تم الرفع بنجاح!',
+    unsupported: (extensions) => `الملفات المدعومة: ${extensions} فقط`,
+    tooLarge: (max) => `حجم الملف أكبر من ${max}`,
+    max: (size) => `(الحد الأقصى ${size})`,
+    uploadFile: 'رفع ملف',
+  },
+  hi: {
+    promptWeb: 'अपलोड करने के लिए खींचें और छोड़ें या',
+    promptNative: 'टैप करके',
+    selectWeb: 'चुनें',
+    selectNative: 'फ़ाइल चुनें',
+    uploading: (size) => `${size} अपलोड हो रहा है...`,
+    uploaded: 'सफलतापूर्वक अपलोड हो गया!',
+    unsupported: (extensions) => `केवल ${extensions} फ़ाइलें समर्थित हैं`,
+    tooLarge: (max) => `यह फ़ाइल ${max} से बड़ी है`,
+    max: (size) => `(अधिकतम ${size})`,
+    uploadFile: 'फ़ाइल अपलोड करें',
+  },
+  bn: {
+    promptWeb: 'আপলোড করতে টেনে এনে ছাড়ুন অথবা',
+    promptNative: 'ট্যাপ করে',
+    selectWeb: 'বেছে নিন',
+    selectNative: 'একটি ফাইল বেছে নিন',
+    uploading: (size) => `${size} আপলোড হচ্ছে...`,
+    uploaded: 'সফলভাবে আপলোড হয়েছে!',
+    unsupported: (extensions) => `শুধু ${extensions} ফাইল সমর্থিত`,
+    tooLarge: (max) => `ফাইলটি ${max}-এর চেয়ে বড়`,
+    max: (size) => `(সর্বোচ্চ ${size})`,
+    uploadFile: 'একটি ফাইল আপলোড করুন',
+  },
+  id: {
+    promptWeb: 'Seret dan lepas untuk mengunggah atau',
+    promptNative: 'Ketuk untuk',
+    selectWeb: 'pilih',
+    selectNative: 'memilih file',
+    uploading: (size) => `Mengunggah ${size}...`,
+    uploaded: 'Berhasil diunggah!',
+    unsupported: (extensions) => `Hanya file ${extensions} yang didukung`,
+    tooLarge: (max) => `File melebihi ${max}`,
+    max: (size) => `(maks. ${size})`,
+    uploadFile: 'Unggah file',
+  },
+};

package/src/file-upload/shared.ts

@@ -1,3 +1,5 @@
+import { formatFileSize as formatLocaleFileSize } from '../locale/format-number';
+
 /**
  * The size formatter, split out of `FileUpload.tsx` so a caller can have the
  * STRING without the component.
@@ -17,16 +19,6 @@
  * and a floor of 1 KB — a 200-byte attachment reading "0 KB" looks like a failed
  * upload.
  */
-export function formatFileSize(bytes: number): string {
-  const GB = 1024 * 1024 * 1024;
-  const MB = 1024 * 1024;
-  if (bytes >= GB) {
-    const gb = bytes / GB;
-    return `${gb >= 10 ? Math.round(gb) : Math.round(gb * 10) / 10} GB`;
-  }
-  if (bytes >= MB) {
-    const mb = bytes / MB;
-    return `${mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10} MB`;
-  }
-  return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+export function formatFileSize(bytes: number, locale?: string): string {
+  return formatLocaleFileSize(bytes, locale);
 }

package/src/file-upload/types.ts

@@ -19,17 +19,17 @@ export interface FileUploadFile {
 
 /** Visible copy, overridable for localisation. */
 export interface FileUploadLabels {
-  /** Idle prompt before the accent word. Default "Drag and drop to upload or" (web), "Tap to" (native). */
+  /** Idle prompt before the accent word. "Drag and drop to upload or" (web), "Tap to" (native) in English. */
   prompt: string;
-  /** The accent-coloured action word. Default "select" (web), "select a file" (native). */
+  /** The accent-coloured action word. "select" (web), "select a file" (native) in English. */
   select: string;
-  /** Default `` size => `Uploading ${size}...` ``. */
+  /** `` size => `Uploading ${size}...` `` in English. */
   uploading: (formattedSize: string) => string;
-  /** Default "Uploaded successfully!". */
+  /** "Uploaded successfully!" in English. */
   uploaded: string;
-  /** Default `` exts => `Only ${exts} files are supported` ``. */
+  /** `` exts => `Only ${exts} files are supported` `` in English. */
   unsupported: (extensions: string) => string;
-  /** Default `` max => `That file is larger than ${max}` ``. */
+  /** `` max => `That file is larger than ${max}` `` in English. */
   tooLarge: (formattedMax: string) => string;
 }
 
@@ -76,7 +76,7 @@ export interface FileUploadProps {
   renderFileIcon?: (file: FileUploadFile) => ReactNode;
   labels?: Partial<FileUploadLabels>;
   disabled?: boolean;
-  /** Accessible name of the drop zone. Default "Upload a file". */
+  /** Accessible name of the drop zone ("Upload a file" in English). */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/floating/types.ts

@@ -167,6 +167,7 @@ export interface FloatingPanelProps extends FloatingPositionProps {
  * is inherent to `asChild` rather than something this type can fix.
  */
 export interface TriggerHandleProps {
+  accessibilityHint?: string;
   onPress: (event: GestureResponderEvent) => void;
   onLongPress?: (event: GestureResponderEvent) => void;
   disabled?: boolean;

package/src/hooks/clipboard.ts

@@ -0,0 +1,27 @@
+/**
+ * The web clipboard, as one guarded call. React Native has no
+ * `navigator.clipboard` (and Bloom takes no clipboard peer), so on native — or
+ * in a browser that refuses the permission — there is nothing to write to and
+ * the caller decides what that means: the copy buttons leave their glyph
+ * unchanged, the share action reports nothing copied.
+ *
+ * Three families wrote this out for themselves (code, agent-chat twice).
+ */
+
+type ClipboardNavigator = { clipboard?: { writeText?: (value: string) => Promise<void> } };
+
+function webClipboard(): ClipboardNavigator['clipboard'] | undefined {
+  return typeof navigator === 'undefined' ? undefined : (navigator as ClipboardNavigator).clipboard;
+}
+
+/** Whether `writeClipboardText` can succeed here at all. */
+export function clipboardAvailable(): boolean {
+  return typeof webClipboard()?.writeText === 'function';
+}
+
+/** Writes `text` to the clipboard; rejects when there is none or the browser refuses. */
+export function writeClipboardText(text: string): Promise<void> {
+  const clipboard = webClipboard();
+  if (!clipboard?.writeText) return Promise.reject(new Error('clipboard unavailable'));
+  return clipboard.writeText(text);
+}

package/src/important-alerts-card/ImportantAlertsCard.tsx

@@ -19,11 +19,13 @@ import Animated, {
 import Svg, { Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
 
 import { BUTTON_SHADOW } from '../button/shared';
+import { useMessages } from '../locale/messages';
 import { resolveDashboardSurfaces, toneColor, type DashboardSurfaces } from '../stat-cards/tones';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
+import { IMPORTANT_ALERTS_CARD_MESSAGES } from './messages';
 import type {
   ImportantAlertsCardAlert,
   ImportantAlertsCardProps,
@@ -164,13 +166,16 @@ function TopFade({ color, visible }: { color: string; visible: boolean }) {
 function ImportantAlertsCardComponent({
   alerts,
   count,
-  title = 'Important alerts',
-  countCaption = 'this week',
+  title: titleProp,
+  countCaption: countCaptionProp,
   rangeLabel,
   height = CARD_HEIGHT,
   style,
   testID,
 }: ImportantAlertsCardProps) {
+  const { messages } = useMessages(IMPORTANT_ALERTS_CARD_MESSAGES);
+  const title = titleProp ?? messages.title;
+  const countCaption = countCaptionProp ?? messages.thisWeek;
   const theme = useTheme();
   const fill = useCardFill(style);
   const surfaces = useMemo(() => resolveDashboardSurfaces(theme, fill), [theme, fill]);

package/src/important-alerts-card/messages.ts

@@ -0,0 +1,26 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/** The alerts card's fixed words in each Bloom language. `title` and `countCaption` still win. */
+export interface ImportantAlertsCardMessages {
+  title: string;
+  /** The caption after the count. */
+  thisWeek: string;
+}
+
+export const IMPORTANT_ALERTS_CARD_MESSAGES: MessageCatalog<ImportantAlertsCardMessages> = {
+  en: { title: 'Important alerts', thisWeek: 'this week' },
+  es: { title: 'Alertas importantes', thisWeek: 'esta semana' },
+  ca: { title: 'Alertes importants', thisWeek: 'aquesta setmana' },
+  de: { title: 'Wichtige Hinweise', thisWeek: 'diese Woche' },
+  fr: { title: 'Alertes importantes', thisWeek: 'cette semaine' },
+  it: { title: 'Avvisi importanti', thisWeek: 'questa settimana' },
+  pt: { title: 'Alertas importantes', thisWeek: 'esta semana' },
+  ru: { title: 'Важные оповещения', thisWeek: 'на этой неделе' },
+  tr: { title: 'Önemli uyarılar', thisWeek: 'bu hafta' },
+  ja: { title: '重要なアラート', thisWeek: '今週' },
+  zh: { title: '重要提醒', thisWeek: '本周' },
+  ar: { title: 'تنبيهات مهمة', thisWeek: 'هذا الأسبوع' },
+  hi: { title: 'महत्वपूर्ण अलर्ट', thisWeek: 'इस सप्ताह' },
+  bn: { title: 'গুরুত্বপূর্ণ সতর্কতা', thisWeek: 'এই সপ্তাহে' },
+  id: { title: 'Peringatan penting', thisWeek: 'minggu ini' },
+};

package/src/important-alerts-card/types.ts

@@ -36,9 +36,9 @@ export interface ImportantAlertsCardProps {
    * `alerts.length` when the feed lists only the most recent ones.
    */
   count: number | string;
-  /** Card title. Defaults to `"Important alerts"`. */
+  /** Card title (`"Important alerts"` in English). */
   title?: string;
-  /** Caption after the count. Defaults to `"this week"`. */
+  /** Caption after the count (`"this week"` in English). */
   countCaption?: string;
   /** Label of the range pill in the corner (`"29 Jun - 5 Jul"`). Omit to hide the pill. */
   rangeLabel?: string;

package/src/item/Item.tsx

@@ -132,6 +132,18 @@ const ItemComponent = function Item({
     </View>
   );
 
+  const stateRole = role ?? accessibilityRole;
+  const selectedAria =
+    selected == null
+      ? null
+      : stateRole === 'option'
+        ? { 'aria-selected': selected }
+        : stateRole === 'radio' || stateRole === 'checkbox'
+          ? { 'aria-checked': selected }
+          : (stateRole == null || stateRole === 'button') && (onPress || onLongPress)
+            ? { 'aria-pressed': selected }
+            : null;
+
   if (onPress || onLongPress) {
     // `radio` and `checkbox` are roles BOTH platforms have, so they travel on
     // `accessibilityRole` as well rather than being web-only like `option`.
@@ -143,16 +155,6 @@ const ItemComponent = function Item({
     // toggle a PRESSED one, and `menuitem`/`listitem` carry neither, so those
     // emit nothing. React Native keeps reading `accessibilityState` below,
     // which is why both are set.
-    const selectedAria =
-      selected == null
-        ? null
-        : role === 'option'
-          ? { 'aria-selected': selected }
-          : role === 'radio' || role === 'checkbox'
-            ? { 'aria-checked': selected }
-            : role == null
-              ? { 'aria-pressed': selected }
-              : null;
     const handlePress = disabled || !onPress ? undefined : onPress;
     const handleLongPress = disabled || !onLongPress ? undefined : onLongPress;
     return (
@@ -192,7 +194,7 @@ const ItemComponent = function Item({
 
   return (
     <View
-      accessibilityRole={accessibilityRole ?? 'none'}
+      accessibilityRole={accessibilityRole ?? (role === 'radio' || role === 'checkbox' ? role : 'none')}
       {...(role ? { role } : {})}
       accessibilityLabel={
         accessibilityLabel ?? (typeof title === 'string' ? title : undefined)
@@ -203,6 +205,9 @@ const ItemComponent = function Item({
       // this the non-pressable row announced nothing. React Native folds
       // `aria-disabled` back into `accessibilityState`.
       aria-disabled={disabled || undefined}
+      accessibilityState={{ disabled, selected, expanded }}
+      aria-expanded={expanded}
+      {...selectedAria}
       style={disabled ? styles.disabled : undefined}>
       {content}
     </View>

package/src/job-board/JobBoard.tsx

@@ -14,16 +14,17 @@ import * as Skeleton from '../skeleton';
 import { surfaceFillVars, useSurfaceLevel } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { VEHICLE_ICON, VEHICLE_OPTIONS } from '../vehicle-picker';
+import { VEHICLE_ICON } from '../vehicle-picker';
+import { builtInVehicleOptions } from '../vehicle-picker/constants';
+import { VEHICLE_PICKER_MESSAGES } from '../vehicle-picker/messages';
 import type { VehicleKind } from '../vehicle-picker';
 import { JobCard } from './JobCard';
 import {
   JOB_BOARD_GEOMETRY,
-  JOB_BOARD_LABELS,
   JOB_BOARD_SORTS,
-  JOB_DISTANCE_BANDS,
+  jobDistanceBands,
   JOB_VEHICLE_KINDS,
-  JOB_WHEN_BANDS,
+  jobWhenBands,
 } from './constants';
 import {
   countActiveJobFilters,
@@ -33,6 +34,8 @@ import {
   toggleJobVehicle,
 } from './shared';
 import type { JobBoardBand, JobBoardFilter, JobBoardProps, JobBoardSort } from './types';
+import { useMessages } from '../locale/messages';
+import { JOB_BOARD_MESSAGES } from './messages';
 
 /**
  * The work on offer, filtered, ordered and counted.
@@ -79,9 +82,9 @@ function JobBoardComponent({
   filter: filterProp,
   defaultFilter,
   onFilterChange,
-  distanceBands = JOB_DISTANCE_BANDS,
+  distanceBands: distanceBandsProp,
   payBands,
-  whenBands = JOB_WHEN_BANDS,
+  whenBands: whenBandsProp,
   vehicleKinds = JOB_VEHICLE_KINDS,
   showCount = true,
   onRefresh,
@@ -95,14 +98,21 @@ function JobBoardComponent({
   density = 'comfortable',
   route,
   breakdown,
-  emptyTitle = 'No jobs right now',
-  emptyDescription = 'Nothing matches what you are looking for. Widen a filter, or pull the board again in a minute.',
+  emptyTitle: emptyTitleProp,
+  emptyDescription: emptyDescriptionProp,
   emptyAction,
   labels: labelOverrides,
-  accessibilityLabel = 'Jobs',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: JobBoardProps) {
+  const { messages: boardText } = useMessages(JOB_BOARD_MESSAGES);
+  const emptyTitle = emptyTitleProp ?? boardText.emptyTitle;
+  const emptyDescription = emptyDescriptionProp ?? boardText.emptyDescription;
+  const accessibilityLabel = accessibilityLabelProp ?? boardText.list;
+  const { messages: vehicleText } = useMessages(VEHICLE_PICKER_MESSAGES);
+  const distanceBands = useMemo(() => distanceBandsProp ?? jobDistanceBands(boardText), [distanceBandsProp, boardText]);
+  const whenBands = useMemo(() => whenBandsProp ?? jobWhenBands(boardText), [whenBandsProp, boardText]);
   const theme = useTheme();
   const ambient = useSurfaceLevel(0);
   const paint = useMemo(
@@ -111,12 +121,12 @@ function JobBoardComponent({
   );
   const labels = useMemo(
     () => ({
-      ...JOB_BOARD_LABELS,
+      ...boardText.labels,
       ...labelOverrides,
-      sortOptions: { ...JOB_BOARD_LABELS.sortOptions, ...labelOverrides?.sortOptions },
-      filters: { ...JOB_BOARD_LABELS.filters, ...labelOverrides?.filters },
+      sortOptions: { ...boardText.labels.sortOptions, ...labelOverrides?.sortOptions },
+      filters: { ...boardText.labels.filters, ...labelOverrides?.filters },
     }),
-    [labelOverrides],
+    [labelOverrides, boardText],
   );
   const [sort, setSort] = useControllableState<JobBoardSort>({
     value: sortProp,
@@ -154,9 +164,9 @@ function JobBoardComponent({
 
   const vehicleWords = useMemo(() => {
     const out = new Map<string, string>();
-    for (const option of VEHICLE_OPTIONS) out.set(option.value, option.label);
+    for (const option of builtInVehicleOptions(vehicleText)) out.set(option.value, option.label);
     return out;
-  }, []);
+  }, [vehicleText]);
 
   /** One dimension: a named, sideways-scrolling `radiogroup` of bands. */
   const bandRow = (