@oxy.so/bloom 5.0.0 → 5.1.0

package/src/chart-cards/primitives/ChartCenterReadout.tsx

@@ -7,6 +7,7 @@ import { TABULAR } from './ChartHeader';
 import { FadeOnChange } from './FadeOnChange';
 import { formatNumber } from './format';
 import { useChartCardPalette } from './use-chart-palette';
+import { useBloomLocale } from '../../locale/context';
 
 export interface ChartCenterReadoutProps {
   value: number;
@@ -28,13 +29,15 @@ export interface ChartCenterReadoutProps {
  */
 export function ChartCenterReadout({
   value,
-  format = formatNumber,
+  format: formatProp,
   caption,
   fadeKey = 'rest',
   size = 'display',
   style,
   testID,
 }: ChartCenterReadoutProps) {
+  const locale = useBloomLocale();
+  const format = formatProp ?? ((value: number) => formatNumber(value, locale));
   const palette = useChartCardPalette();
   const display = useCountUpPrecise(value);
   return (

package/src/chart-cards/primitives/ChartHeader.tsx

@@ -9,6 +9,7 @@ import { FadeOnChange } from './FadeOnChange';
 import { formatNumber, type ChartDelta } from './format';
 import type { ChartRangeOption } from './use-chart-range';
 import { useChartCardPalette } from './use-chart-palette';
+import { useBloomLocale } from '../../locale/context';
 
 export const TABULAR: TextStyle = { fontVariant: ['tabular-nums'] };
 
@@ -47,7 +48,7 @@ export interface ChartHeadlineProps {
 export function ChartHeadline({
   label,
   value,
-  format = formatNumber,
+  format: formatProp,
   delta,
   hovering = false,
   fadeKey = 'rest',
@@ -55,6 +56,8 @@ export function ChartHeadline({
   style,
   testID,
 }: ChartHeadlineProps) {
+  const locale = useBloomLocale();
+  const format = formatProp ?? ((value: number) => formatNumber(value, locale));
   const palette = useChartCardPalette();
   const display = useCountUpPrecise(value ?? 0);
   const chip = delta

package/src/chart-cards/primitives/ChartRangePill.tsx

@@ -16,6 +16,8 @@ import { Text } from '../../typography';
 import type { ChartRangeOption } from './use-chart-range';
 import { useChartCardPalette } from './use-chart-palette';
 import { useWebTransition } from './use-web-transition';
+import { CHART_CARDS_MESSAGES } from '../messages';
+import { useMessages } from '../../locale/messages';
 
 const ICON = 16;
 /** `w-[188px]` on the period menu. */
@@ -97,10 +99,12 @@ export function ChartRangeSelect({
   ranges,
   value,
   onChange,
-  label = 'Change period',
+  label: labelProp,
   style,
   testID,
 }: ChartRangeSelectProps) {
+  const { messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const label = labelProp ?? chartText.changePeriod;
   const palette = useChartCardPalette();
   const [open, setOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
@@ -130,7 +134,7 @@ export function ChartRangeSelect({
         </Pressable>
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        label="Period"
+        label={chartText.period}
         side="bottom"
         align="end"
         minWidth={RANGE_MENU_WIDTH}

package/src/chart-cards/primitives/format.ts

@@ -1,38 +1,44 @@
 import type { ChartDeltaTone } from '../geometry';
 
+import {
+  formatCompactNumber,
+  formatInteger,
+  formatNumber as formatLocaleNumber,
+  formatPercent,
+  formatSignedPercent,
+} from '../../locale/format-number';
+
 /**
- * Number formatting shared by the chart cards. Pure and `Intl`-free, so it
- * formats identically on Hermes, JSC and every browser.
+ * Number formatting shared by the chart cards, in the reader's locale
+ * (`locale` is what the card resolved; `undefined` is the runtime's). They go
+ * through `locale/format-number.ts`, which uses the engine's
+ * `Intl.NumberFormat` — Hermes has it — and falls back to English grouping.
  */
 
-/** `1234567.8` → `"1,234,568"` — en-US grouping (`toLocaleString("en-US")`-equivalent) for whole numbers. */
-export function groupThousands(value: number): string {
-  const rounded = Math.round(value);
-  const digits = String(Math.abs(rounded)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  return rounded < 0 ? `-${digits}` : digits;
+/** `1234567.8` → `"1,234,568"` (en), `"1.234.568"` (de) — a whole number with grouping. */
+export function groupThousands(value: number, locale?: string): string {
+  return formatInteger(value, locale);
 }
 
 /**
- * En-US grouping that keeps up to three fraction
- * digits (`48.8` → `"48.8"`, `12500` → `"12,500"`).
+ * Grouping that keeps up to three fraction digits (`48.8` → `"48.8"`,
+ * `12500` → `"12,500"`, `"12.500"` in German). A value that rounds to zero
+ * reads `0`, never `-0`.
  */
-export function formatNumber(value: number): string {
+export function formatNumber(value: number, locale?: string): string {
   if (!Number.isFinite(value)) return String(value);
-  const fixed = (Math.round(Math.abs(value) * 1000) / 1000).toString();
-  const [int = '0', frac] = fixed.split('.');
-  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  const sign = value < 0 && Number(fixed) !== 0 ? '-' : '';
-  return frac ? `${sign}${grouped}.${frac}` : `${sign}${grouped}`;
+  const rounded = Math.round(value * 1000) / 1000;
+  return formatLocaleNumber(rounded === 0 ? 0 : rounded, locale);
 }
 
-/** Compact axis-tick format: `4.5K`, `13K`, or the rounded number under a thousand. */
-export function compactNumber(value: number): string {
-  return value >= 1000 ? `${Math.round(value / 100) / 10}K`.replace('.0K', 'K') : String(Math.round(value));
+/** Compact axis-tick format: `4.5K`, `13K` (en), `4,5 mil` (es); the rounded number under a thousand. */
+export function compactNumber(value: number, locale?: string): string {
+  return formatCompactNumber(value, locale);
 }
 
-/** `0.25` → `"25%"` — the 100% chart's axis. */
-export function percentTick(value: number): string {
-  return `${Math.round(value * 100)}%`;
+/** `0.25` → `"25%"` (en), `"25 %"` (fr), `"%25"` (tr) — the 100% chart's axis. */
+export function percentTick(value: number, locale?: string): string {
+  return formatPercent(value, locale);
 }
 
 export interface ChartDelta {
@@ -47,10 +53,16 @@ export interface ChartDelta {
  * (The dashboard revenue / orders cards compare two totals instead — that is
  * `describeDelta(current, previous)` in `geometry.ts`.)
  */
-export function describeDeltaRatio(delta: number): ChartDelta {
-  const pct = Math.round(Math.abs(delta) * 1000) / 10;
-  if (pct === 0) return { label: '0.0%', tone: 'neutral' };
-  return { label: `${delta > 0 ? '+' : '-'}${pct}%`, tone: delta > 0 ? 'positive' : 'negative' };
+export function describeDeltaRatio(delta: number, locale?: string): ChartDelta {
+  // Rounded to the tenth of a percent it is shown at, so the sign and the tone
+  // agree with the number on screen.
+  const rounded = Math.round(delta * 1000) / 1000;
+  // Zero keeps its tenth ("0.0%"); anything else shows a tenth only when it has one ("+5.2%", "-5%").
+  if (rounded === 0) return { label: formatPercent(0, locale, 1), tone: 'neutral' };
+  return {
+    label: formatSignedPercent(rounded, locale, { minimum: 0, maximum: 1 }),
+    tone: rounded > 0 ? 'positive' : 'negative',
+  };
 }
 
 /** Decimal places a value carries, capped at 2 — what the count-up must preserve. */

package/src/chat-composer/shared.ts

@@ -44,7 +44,6 @@ import { RiRestaurantLine } from '../icons/remix/RiRestaurantLine';
 import { RiShareForwardLine } from '../icons/remix/RiShareForwardLine';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import { RiUserLine } from '../icons/remix/RiUserLine';
-import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import type {
   AttachmentMenuItem,
@@ -57,6 +56,7 @@ import type {
 } from './types';
 import { COMMON_MESSAGES } from '../locale/common-messages';
 import { CHAT_COMPOSER_MESSAGES, type AttachmentMenuItemId, type ChatComposerMessages } from './messages';
+import { formatClock } from '../locale/format-number';
 
 // ---------------------------------------------------------------------------
 //  Palette
@@ -95,12 +95,8 @@ export interface ChatComposerPalette {
   focusRing: string;
 }
 
-/** Re-emit a resolved colour at `alpha` (parse-and-re-emit, never concatenation). */
-export function withAlpha(color: string, alpha: number): string {
-  const rgba = parseRgba(color);
-  if (!rgba) return color;
-  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${alpha})`;
-}
+/** Re-exported from `theme/color-utils`, which owns it (it was copied here). */
+export { withAlpha } from '../theme/color-utils';
 
 export function resolveChatComposerPalette(theme: Theme, backing?: string): ChatComposerPalette {
   const { accent } = resolveButtonRamps(theme);
@@ -187,12 +183,7 @@ export const SWAP_MS = 220;
  * bad one is worse than a composer that shows zero.
  */
 export function formatRecordingTime(seconds: number): string {
-  const total = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0;
-  const s = total % 60;
-  const m = Math.floor(total / 60) % 60;
-  const h = Math.floor(total / 3600);
-  const pad = (n: number) => (n < 10 ? `0${n}` : String(n));
-  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+  return formatClock(seconds);
 }
 
 /** The glyph of an {@link EmojiEntry}, whichever form it arrived in. */

package/src/checkout-summary/CheckoutConfirm.tsx

@@ -3,10 +3,8 @@ import { View } from 'react-native';
 
 import { ActionCardNote } from '../booking/ActionCard';
 import { Button } from '../button';
-import {
-  CHECKOUT_CONFIRM_BUSY_LABEL,
-  CHECKOUT_CONFIRM_LABEL,
-} from './constants';
+import { useMessages } from '../locale/messages';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 import { checkoutConfirmLabel } from './shared';
 import type { CheckoutConfirmProps } from './types';
 
@@ -45,18 +43,21 @@ import type { CheckoutConfirmProps } from './types';
  * inert for the whole flight.
  */
 function CheckoutConfirmComponent({
-  label = CHECKOUT_CONFIRM_LABEL,
+  label: labelProp,
   amount,
   secondaryAmount,
   terms,
   onConfirm,
   disabled = false,
   busy = false,
-  busyLabel = CHECKOUT_CONFIRM_BUSY_LABEL,
+  busyLabel: busyLabelProp,
   footer,
   style,
   testID,
 }: CheckoutConfirmProps) {
+  const { messages } = useMessages(CHECKOUT_SUMMARY_MESSAGES);
+  const label = labelProp ?? messages.placeOrder;
+  const busyLabel = busyLabelProp ?? messages.placingOrder;
   const latch = useRef(false);
   const [latched, setLatched] = useState(false);
 

package/src/checkout-summary/CheckoutSummary.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 
 import { AddressRow } from '../address';
 import { Divider } from '../divider';
+import { useMessages } from '../locale/messages';
 import { PriceSummary } from '../price-breakdown';
 import {
   SurfaceLevelProvider,
@@ -21,6 +22,7 @@ import {
   CHECKOUT_ROW_ICON,
   CHECKOUT_SECTION_GAP,
 } from './constants';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 import { checkoutRowName } from './shared';
 import type { CheckoutSummaryLine, CheckoutSummaryProps } from './types';
 
@@ -69,7 +71,7 @@ const NESTED_ROW_STYLE = {
  * padding reset, so there is one row's chrome rather than two.
  */
 function CheckoutSummaryComponent({
-  title = 'Review your order',
+  title: titleProp,
   address,
   delivery,
   payment,
@@ -82,6 +84,9 @@ function CheckoutSummaryComponent({
   style,
   testID,
 }: CheckoutSummaryProps) {
+  const { messages } = useMessages(CHECKOUT_SUMMARY_MESSAGES);
+  // `null` turns the heading off, so only `undefined` takes the default.
+  const title = titleProp === undefined ? messages.title : titleProp;
   const theme = useTheme();
   const level = useSurfaceLevelValue();
   const own = useSurfaceLevel(1);
@@ -106,7 +111,7 @@ function CheckoutSummaryComponent({
 
   const rows: ReactNode[] = [];
   if (address) {
-    const label = address.label ?? 'Deliver to';
+    const label = address.label ?? messages.deliverTo;
     rows.push(
       <CheckoutSummaryRow
         key="address"
@@ -161,7 +166,7 @@ function CheckoutSummaryComponent({
 
       <View
         role="group"
-        accessibilityLabel={accessibilityLabel ?? title ?? 'Order summary'}
+        accessibilityLabel={accessibilityLabel ?? title ?? messages.orderSummary}
         testID={id('group')}
         style={[
           {

package/src/checkout-summary/CheckoutSummaryRow.tsx

@@ -3,17 +3,17 @@ import { View } from 'react-native';
 
 import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
 import { Item } from '../item';
+import { useMessages } from '../locale/messages';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import {
   CHECKOUT_ROW_CHEVRON,
   CHECKOUT_ROW_GLYPH,
-  CHECKOUT_ROW_HINT,
-  CHECKOUT_ROW_PLACEHOLDER,
   CHECKOUT_ROW_TEXT_GAP,
   CHECKOUT_ROW_TILE,
 } from './constants';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 import { checkoutRowName, resolveCheckoutPaint } from './shared';
 import type { CheckoutSummaryRowProps } from './types';
 
@@ -46,7 +46,7 @@ function CheckoutSummaryRowComponent({
   icon: Icon,
   leading,
   value,
-  placeholder = CHECKOUT_ROW_PLACEHOLDER,
+  placeholder: placeholderProp,
   detail,
   badge,
   content,
@@ -57,6 +57,8 @@ function CheckoutSummaryRowComponent({
   style,
   testID,
 }: CheckoutSummaryRowProps) {
+  const { messages } = useMessages(CHECKOUT_SUMMARY_MESSAGES);
+  const placeholder = placeholderProp ?? messages.notChosen;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveCheckoutPaint(theme, surface), [theme, surface]);
@@ -155,7 +157,7 @@ function CheckoutSummaryRowComponent({
       // `docs/checkout-summary.mdx` and pinned in `CheckoutSummary.test.tsx`
       // rather than swapped for an `aria-describedby` that native would then
       // announce twice.
-      accessibilityHint={onPress ? (accessibilityHint ?? CHECKOUT_ROW_HINT) : accessibilityHint}
+      accessibilityHint={onPress ? (accessibilityHint ?? messages.opensPicker) : accessibilityHint}
       style={style}
       testID={testID}
     >

package/src/checkout-summary/constants.ts

@@ -3,6 +3,7 @@ import { RiChat3Line } from '../icons/remix/RiChat3Line';
 import { RiMapPin2Line } from '../icons/remix/RiMapPin2Line';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import type { BloomIconComponent } from '../icons/icon-component';
+import { CHECKOUT_SUMMARY_MESSAGES } from './messages';
 
 /**
  * The default glyph for each of the four rows a buyer checks. A caller that
@@ -16,15 +17,18 @@ export const CHECKOUT_ROW_ICON: Record<'address' | 'delivery' | 'payment' | 'not
   note: RiChat3Line,
 };
 
+// The English words below stay exported; the components speak
+// `CHECKOUT_SUMMARY_MESSAGES` in the resolved locale.
+
 /** Drawn in place of the value while nothing is chosen. */
-export const CHECKOUT_ROW_PLACEHOLDER = 'Not chosen yet';
+export const CHECKOUT_ROW_PLACEHOLDER = CHECKOUT_SUMMARY_MESSAGES.en.notChosen;
 
 /** The row's hint: what pressing it opens. */
-export const CHECKOUT_ROW_HINT = 'Opens the picker';
+export const CHECKOUT_ROW_HINT = CHECKOUT_SUMMARY_MESSAGES.en.opensPicker;
 
 /** The default words on the confirm control. */
-export const CHECKOUT_CONFIRM_LABEL = 'Place order';
-export const CHECKOUT_CONFIRM_BUSY_LABEL = 'Placing your order';
+export const CHECKOUT_CONFIRM_LABEL = CHECKOUT_SUMMARY_MESSAGES.en.placeOrder;
+export const CHECKOUT_CONFIRM_BUSY_LABEL = CHECKOUT_SUMMARY_MESSAGES.en.placingOrder;
 
 /**
  * The separator between the confirm label and the amount. A MIDDLE DOT rather

package/src/checkout-summary/messages.ts

@@ -0,0 +1,160 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/**
+ * Every fixed string the checkout summary draws or announces, in each Bloom
+ * language. A caller's `title`, `label`, `placeholder`, `busyLabel`,
+ * `accessibilityHint` and `accessibilityLabel` still win.
+ */
+export interface CheckoutSummaryMessages {
+  /** The heading above the rows. */
+  title: string;
+  /** Names the group when the heading is turned off. */
+  orderSummary: string;
+  /** The address row's label. */
+  deliverTo: string;
+  /** Drawn in place of a row's value while nothing is chosen. */
+  notChosen: string;
+  /** A pressable row's hint: what pressing it opens. */
+  opensPicker: string;
+  /** The confirm button, and what it announces while busy. */
+  placeOrder: string;
+  placingOrder: string;
+}
+
+export const CHECKOUT_SUMMARY_MESSAGES: MessageCatalog<CheckoutSummaryMessages> = {
+  en: {
+    title: 'Review your order',
+    orderSummary: 'Order summary',
+    deliverTo: 'Deliver to',
+    notChosen: 'Not chosen yet',
+    opensPicker: 'Opens the picker',
+    placeOrder: 'Place order',
+    placingOrder: 'Placing your order',
+  },
+  es: {
+    title: 'Revisa tu pedido',
+    orderSummary: 'Resumen del pedido',
+    deliverTo: 'Entregar en',
+    notChosen: 'Sin elegir',
+    opensPicker: 'Abre el selector',
+    placeOrder: 'Realizar pedido',
+    placingOrder: 'Realizando tu pedido',
+  },
+  ca: {
+    title: 'Revisa la comanda',
+    orderSummary: 'Resum de la comanda',
+    deliverTo: 'Entregar a',
+    notChosen: 'Encara no triat',
+    opensPicker: 'Obre el selector',
+    placeOrder: 'Fes la comanda',
+    placingOrder: 'Fent la comanda',
+  },
+  de: {
+    title: 'Bestellung prüfen',
+    orderSummary: 'Bestellübersicht',
+    deliverTo: 'Lieferung an',
+    notChosen: 'Noch nicht gewählt',
+    opensPicker: 'Öffnet die Auswahl',
+    placeOrder: 'Bestellung aufgeben',
+    placingOrder: 'Bestellung wird aufgegeben',
+  },
+  fr: {
+    title: 'Vérifiez votre commande',
+    orderSummary: 'Récapitulatif de la commande',
+    deliverTo: 'Livrer à',
+    notChosen: 'Pas encore choisi',
+    opensPicker: 'Ouvre le sélecteur',
+    placeOrder: 'Passer la commande',
+    placingOrder: 'Commande en cours',
+  },
+  it: {
+    title: 'Controlla il tuo ordine',
+    orderSummary: 'Riepilogo ordine',
+    deliverTo: 'Consegna a',
+    notChosen: 'Non ancora scelto',
+    opensPicker: 'Apre il selettore',
+    placeOrder: 'Effettua ordine',
+    placingOrder: 'Invio del tuo ordine',
+  },
+  pt: {
+    title: 'Revise seu pedido',
+    orderSummary: 'Resumo do pedido',
+    deliverTo: 'Entregar em',
+    notChosen: 'Ainda não escolhido',
+    opensPicker: 'Abre o seletor',
+    placeOrder: 'Fazer pedido',
+    placingOrder: 'Enviando seu pedido',
+  },
+  ru: {
+    title: 'Проверьте заказ',
+    orderSummary: 'Сводка заказа',
+    deliverTo: 'Адрес доставки',
+    notChosen: 'Не выбрано',
+    opensPicker: 'Открывает выбор',
+    placeOrder: 'Оформить заказ',
+    placingOrder: 'Оформляем заказ',
+  },
+  tr: {
+    title: 'Siparişini gözden geçir',
+    orderSummary: 'Sipariş özeti',
+    deliverTo: 'Teslimat adresi',
+    notChosen: 'Henüz seçilmedi',
+    opensPicker: 'Seçiciyi açar',
+    placeOrder: 'Siparişi ver',
+    placingOrder: 'Siparişin veriliyor',
+  },
+  ja: {
+    title: 'ご注文内容の確認',
+    orderSummary: '注文の概要',
+    deliverTo: 'お届け先',
+    notChosen: '未選択',
+    opensPicker: '選択画面を開きます',
+    placeOrder: '注文を確定する',
+    placingOrder: '注文を送信しています',
+  },
+  zh: {
+    title: '核对订单',
+    orderSummary: '订单摘要',
+    deliverTo: '送至',
+    notChosen: '尚未选择',
+    opensPicker: '打开选择器',
+    placeOrder: '提交订单',
+    placingOrder: '正在提交订单',
+  },
+  ar: {
+    title: 'راجع طلبك',
+    orderSummary: 'ملخص الطلب',
+    deliverTo: 'التوصيل إلى',
+    notChosen: 'لم يُختر بعد',
+    opensPicker: 'يفتح أداة الاختيار',
+    placeOrder: 'تأكيد الطلب',
+    placingOrder: 'جارٍ إرسال طلبك',
+  },
+  hi: {
+    title: 'अपना ऑर्डर जाँचें',
+    orderSummary: 'ऑर्डर सारांश',
+    deliverTo: 'यहाँ डिलीवर करें',
+    notChosen: 'अभी चुना नहीं गया',
+    opensPicker: 'चयनकर्ता खोलता है',
+    placeOrder: 'ऑर्डर करें',
+    placingOrder: 'आपका ऑर्डर दिया जा रहा है',
+  },
+  bn: {
+    title: 'আপনার অর্ডার যাচাই করুন',
+    orderSummary: 'অর্ডারের সারাংশ',
+    deliverTo: 'যেখানে ডেলিভারি হবে',
+    notChosen: 'এখনও বাছাই করা হয়নি',
+    opensPicker: 'নির্বাচক খোলে',
+    placeOrder: 'অর্ডার করুন',
+    placingOrder: 'আপনার অর্ডার দেওয়া হচ্ছে',
+  },
+  id: {
+    title: 'Tinjau pesananmu',
+    orderSummary: 'Ringkasan pesanan',
+    deliverTo: 'Kirim ke',
+    notChosen: 'Belum dipilih',
+    opensPicker: 'Membuka pemilih',
+    placeOrder: 'Buat pesanan',
+    placingOrder: 'Memproses pesananmu',
+  },
+};

package/src/code/CodeBlock.tsx

@@ -9,14 +9,11 @@ import { CodeLines } from './CodeLines';
 import { CODE_MESSAGES } from './messages';
 import { CARD_RADIUS, CONFIRM_MS, dataHook, IS_WEB, MONO_FAMILY, useCodePalette, useCodeWebCss } from './shared';
 import type { CodeBlockProps } from './types';
+import { writeClipboardText } from '../hooks/clipboard';
 
-async function writeClipboard(text: string): Promise<void> {
-  const nav =
-    typeof navigator === 'undefined'
-      ? undefined
-      : (navigator as { clipboard?: { writeText?: (value: string) => Promise<void> } });
-  if (!IS_WEB || !nav?.clipboard?.writeText) throw new Error('clipboard unavailable');
-  await nav.clipboard.writeText(text);
+function writeClipboard(text: string): Promise<void> {
+  if (!IS_WEB) return Promise.reject(new Error('clipboard unavailable'));
+  return writeClipboardText(text);
 }
 
 function mono(fontSize: number, lineHeight: number, extra: TextStyle): TextStyle {

package/src/composer-panel/shared.ts

@@ -22,7 +22,6 @@ import { RiShieldCheckLine } from '../icons/remix/RiShieldCheckLine';
 import { RiSlideshow3Line } from '../icons/remix/RiSlideshow3Line';
 import { RiSpeedUpFill } from '../icons/remix/RiSpeedUpFill';
 import { RiVideoLine } from '../icons/remix/RiVideoLine';
-import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import { COMPOSER_PANEL_MESSAGES, type ComposerPanelMessages } from './messages';
 import type {
@@ -84,12 +83,8 @@ export interface ComposerPalette {
   logo: string;
 }
 
-/** Re-emit a resolved colour at `alpha` (parse-and-re-emit, never string concatenation). */
-export function withAlpha(color: string, alpha: number): string {
-  const rgba = parseRgba(color);
-  if (!rgba) return color;
-  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${alpha})`;
-}
+/** Re-exported from `theme/color-utils`, which owns it (it was copied here). */
+export { withAlpha } from '../theme/color-utils';
 
 /** Canonical surfaces and foregrounds follow the preset's authored role pairs. */
 export function resolveComposerPalette(theme: Theme): ComposerPalette {

package/src/creator-studio/AudienceBreakdown.tsx

@@ -35,12 +35,13 @@ function AudienceBreakdownComponent({
   genders,
   sources,
   range,
-  format = groupThousands,
+  format: formatProp,
   labels: labelOverrides,
   style,
   testID,
 }: AudienceBreakdownProps) {
-  const { messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const { locale, messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const format = formatProp ?? ((value: number) => groupThousands(value, locale));
   const labels = { ...messages.breakdown, ...labelOverrides };
   const [width, setWidth] = useState(0);
   const onLayout = useCallback((event: LayoutChangeEvent) => {

package/src/creator-studio/PayoutSummaryCard.tsx

@@ -22,6 +22,7 @@ import { CREATOR_STUDIO_MESSAGES } from './messages';
 import type { PayoutSummaryCardLabels, PayoutSummaryCardProps } from './types';
 
 import { useChartCardSurfacePalette } from '../chart-cards/primitives/use-chart-palette';
+import { formatCurrency } from '../locale/format-number';
 /**
  * `PayoutSummaryCard`: what the artist has earned and when it arrives.
  *
@@ -45,7 +46,6 @@ export const PAYOUT_SUMMARY_LABELS: PayoutSummaryCardLabels = CREATOR_STUDIO_MES
 const PLOT_HEIGHT = 112;
 const BAR_RADIUS = 6;
 
-const defaultFormat = (value: number) => `$${groupThousands(Math.round(value))}`;
 
 function PayoutSummaryCardComponent({
   estimated,
@@ -53,14 +53,15 @@ function PayoutSummaryCardComponent({
   lastPayout,
   nextPayoutDate,
   months,
-  format = defaultFormat,
+  format: formatProp,
   onViewStatements,
   statementsHref,
   labels: labelOverrides,
   style,
   testID,
 }: PayoutSummaryCardProps) {
-  const { messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const { locale, messages } = useMessages(CREATOR_STUDIO_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatCurrency(Math.round(value), 'USD', locale));
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const labels = { ...messages.payout, ...labelOverrides };
@@ -71,7 +72,7 @@ function PayoutSummaryCardComponent({
   const categories = useMemo(() => months.map((m) => m.label), [months]);
   const max = Math.max(1, ...values);
   const anim = useChartProgress(values);
-  const chip = delta !== undefined ? describeDeltaRatio(delta) : undefined;
+  const chip = delta !== undefined ? describeDeltaRatio(delta, locale) : undefined;
   const chipPaint = chip
     ? chip.tone === 'positive'
       ? palette.positive