@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-NQYBUO3K.js → chunk-RU3ZPNL6.js}

@@ -1,20 +1,52 @@
-import { Switch } from './chunk-YG3ZJHGU.js';
-import { List, ListRow } from './chunk-IVNRBPGC.js';
-import { SegmentedControl } from './chunk-5YNTNN5A.js';
-import { Progress } from './chunk-2ZZ7TDJ4.js';
-import { Amount, PriceRow } from './chunk-VBOXAEPI.js';
-import { TextField } from './chunk-ITTYJZWX.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React6 from 'react';
+import { List, ListRow } from './chunk-C4GTDLRC.js';
+import { Switch } from './chunk-FZGAAOKS.js';
+import { SegmentedControl } from './chunk-TQVAIKFD.js';
+import { Progress } from './chunk-5UTRIXQ6.js';
+import { Amount, PriceRow } from './chunk-QHAITQIF.js';
+import { usePayLabels } from './chunk-GEIGMWNF.js';
+import { TextField } from './chunk-7BUIKDD6.js';
+import { Badge } from './chunk-TN2ZNJUI.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React2 from 'react';
 import { Platform, ScrollView, Text, View, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { yearlySaving, planDelta, PLAN_COPY, planCta, yearlyMonthly, money } from '@btndprojects/loam-pay';
+import { yearlySaving, planDelta, planCta, yearlyMonthly, money } from '@btndprojects/loam-pay';
 
+// src/commerce/commerce-labels.ts
+var TOGGLE_ROW_LABELS = {
+  withDescription: (label, description) => `${label}, ${description}`
+};
+var NOTIFICATION_PREFERENCES_LABELS = {
+  systemOn: "System notifications are on. Turn categories off here rather than muting the whole app.",
+  systemOff: "Notifications are turned off for this app in system settings. Your choices below are kept, and take effect as soon as you turn them back on.",
+  openSettings: "Open Settings"
+};
+var DELETE_ACCOUNT_LABELS = {
+  title: "Delete account",
+  whatIsDeleted: "What is deleted",
+  whatIsKept: "What is kept, and why",
+  deletionCompletes: (duration) => `Deletion completes ${duration}.`,
+  typeToConfirm: (phrase) => `Type ${phrase} to confirm`,
+  confirm: "Delete my account",
+  busy: "Deleting\u2026",
+  keep: "Keep my account"
+};
+var MANAGE_SUBSCRIPTION_LABELS = {
+  statusActive: "Active",
+  statusTrial: "Trial",
+  statusCanceled: "Canceled",
+  statusPastDue: "Past due",
+  renews: "renews",
+  renewalLine: (price, renews, date) => `${price} \xB7 ${renews} ${date}`,
+  payment: "Payment",
+  paymentLine: (payment, method) => `${payment} \xB7 ${method}`,
+  cancel: "Cancel subscription"
+};
 function DeleteAccountScreen({
-  title = "Delete account",
+  title: titleProp,
   deletes,
   retains,
   duration,
@@ -22,15 +54,24 @@ function DeleteAccountScreen({
   confirmationLabel,
   confirmationValue,
   onConfirmationChange,
-  confirmLabel = "Delete my account",
+  confirmLabel: confirmLabelProp,
   onConfirm,
-  cancelLabel = "Keep my account",
-  onCancel
+  loading = false,
+  busyLabel: busyLabelProp,
+  cancelLabel: cancelLabelProp,
+  onCancel,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const labels = useLabels("deleteAccount", DELETE_ACCOUNT_LABELS, labelsProp);
+  const title = titleProp ?? labels.title;
+  const confirmLabel = confirmLabelProp ?? labels.confirm;
+  const busyLabel = busyLabelProp ?? labels.busy;
+  const cancelLabel = cancelLabelProp ?? labels.keep;
+  const confirmationName = confirmationLabel ?? labels.typeToConfirm(confirmationPhrase);
+  const theme = useLoamTheme("commerce");
   const isControlled = confirmationValue !== void 0;
-  const [internal, setInternal] = React6.useState("");
+  const [internal, setInternal] = React2.useState("");
   const typed = isControlled ? confirmationValue : internal;
   const armed = typed.trim() === confirmationPhrase;
   const change = (next) => {
@@ -40,45 +81,45 @@ function DeleteAccountScreen({
   return /* @__PURE__ */ jsxs(ScrollView, { style: styles.screen, contentContainerStyle: styles.scroll, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
     /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.caption, children: "What is deleted" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.caption, children: labels.whatIsDeleted }),
       deletes.map((d) => /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
         /* @__PURE__ */ jsx(Icon, { name: "trash", size: theme.icon.sm, color: theme.color.danger }),
         /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: d })
       ] }, d))
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.caption, children: "What is kept, and why" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.caption, children: labels.whatIsKept }),
       retains.map((r) => /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
         /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.sm, color: theme.color.text3 }),
         /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: r })
       ] }, r))
     ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.duration, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: `Deletion completes ${duration}.` }) }),
+    /* @__PURE__ */ jsx(View, { style: styles.duration, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: labels.deletionCompletes(duration) }) }),
     /* @__PURE__ */ jsx(
       TextField,
       {
-        label: confirmationLabel ?? `Type ${confirmationPhrase} to confirm`,
+        label: confirmationName,
         value: typed,
         onChangeText: change,
         autoCapitalize: "characters",
         autoCorrect: false,
-        accessibilityLabel: confirmationLabel ?? `Type ${confirmationPhrase} to confirm`
+        accessibilityLabel: confirmationName
       }
     ),
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: confirmLabel,
-        accessibilityState: { disabled: !armed },
+        accessibilityLabel: loading ? busyLabel : confirmLabel,
+        accessibilityState: { disabled: !armed, busy: loading },
         disabled: !armed,
-        onPress: armed ? onConfirm : void 0,
+        onPress: armed && !loading ? onConfirm : void 0,
         style: ({ pressed }) => [
           styles.confirm,
           armed ? null : styles.confirmDisabled,
           pressed && armed ? styles.pressed : null
         ],
-        children: /* @__PURE__ */ jsx(Text, { style: [styles.confirmLabel, armed ? null : styles.confirmLabelDisabled], children: confirmLabel })
+        children: /* @__PURE__ */ jsx(Text, { style: [styles.confirmLabel, armed ? null : styles.confirmLabelDisabled], children: loading ? busyLabel : confirmLabel })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -168,6 +209,67 @@ var sheet = createStyleSheet((theme) => ({
   },
   pressed: { opacity: theme.state.pressedOpacity }
 }));
+var DEFAULT_LABELS = {
+  platformNote: "Billed by the app store on your account. Prices come from its catalogue.",
+  restorePurchase: "Restore purchase",
+  close: "Close",
+  bestValue: "Best value",
+  planLine: (name, price, period) => `${name} \xB7 ${price} ${period}`,
+  planSpoken: (name, price, period) => `${name} ${price} ${period}`,
+  notNow: "Not now",
+  restorePurchases: "Restore purchases",
+  meterReadout: (value, max, unit) => `${value} of ${max}${unit ? ` ${unit}` : ""}`,
+  save: "Save",
+  perYear: "a year",
+  samePrice: "Same price",
+  billedYearlyTail: "billed yearly",
+  yourPlan: "Your plan",
+  included: "Included",
+  notIncluded: "Not included",
+  featureState: (state) => `${state}: `,
+  comparisonCell: (label, included) => `${label}: ${included ? "included" : "not included"}`,
+  billingPeriod: "Billing period",
+  plansCompared: "Plans compared",
+  feature: "Feature",
+  choosePlanRow: "Choose a plan",
+  creditedNextInvoice: "credited to your next invoice",
+  today: "today",
+  then: "then",
+  cadenceFrom: (cadence, date) => `${cadence} from ${date}`,
+  monthly: "monthly",
+  midCycleChange: (currency) => `Mid-cycle change \xB7 ${currency}`,
+  unusedTime: (plan, daysLeft, cycleDays) => `Unused ${plan}, ${daysLeft} of ${cycleDays} days`,
+  sameDays: (plan, daysLeft) => `${plan} for the same ${daysLeft} days`,
+  creditOnNextInvoice: "Credit on your next invoice",
+  chargedToday: "Charged today",
+  fromDate: (date, cadence) => `From ${date}, ${cadence}`,
+  moveTo: (plan) => `Move to ${plan}`,
+  upgrade: "upgrade",
+  downgrade: "downgrade",
+  planArrow: (from, to) => `${from} \u2192 ${to}`,
+  perCycle: "per cycle",
+  confirmChange: (way) => `Confirm ${way}`,
+  keepCurrentPlan: "Keep current plan",
+  subscription: "Subscription",
+  plan: "Plan",
+  seats: (count) => `${count} seats`,
+  billedYearly: "Billed yearly",
+  billedMonthly: "Billed monthly",
+  renews: "Renews",
+  method: "Method",
+  trialDaysLeft: (days) => `${days} ${days === 1 ? "day" : "days"} left in your trial`,
+  trialUsed: "Trial used",
+  days: "days",
+  graceTitle: "We could not charge your card",
+  updatePaymentMethod: "Update payment method",
+  graceSchedule: (day) => `due \xB7 day ${day} of the retry schedule`,
+  accessEnds: (date) => `Access ends ${date}.`,
+  cancelPlan: (plan) => `Cancel ${plan}`,
+  staysActiveUntil: (plan, date) => React2.createElement(React2.Fragment, null, `${plan} stays active until `, date, "."),
+  whatYouLose: (date) => `What you lose on ${date}`,
+  whyCancelling: "Why are you cancelling?",
+  keepMyPlan: "Keep my plan"
+};
 var INDICATOR = { ring: 20, dot: 10 };
 function Paywall({
   title,
@@ -181,19 +283,23 @@ function Paywall({
   onPurchase,
   busy = false,
   legalText,
-  restoreLabel = "Restore purchase",
+  restoreLabel: restoreLabelProp,
   onRestore,
   footNote,
   links = [],
   onLinkPress,
   onClose,
-  closeLabel = "Close"
+  closeLabel: closeLabelProp,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const restoreLabel = restoreLabelProp ?? labels.restorePurchase;
+  const closeLabel = closeLabelProp ?? labels.close;
+  const theme = useLoamTheme("commerce");
   const fallback = plans.find((p) => p.recommended)?.id ?? plans[0]?.id;
   const isControlled = selectedPlanId !== void 0;
-  const [internal, setInternal] = React6.useState(fallback);
+  const [internal, setInternal] = React2.useState(fallback);
   const selected = isControlled ? selectedPlanId : internal;
   const select = (id) => {
     if (!isControlled) setInternal(id);
@@ -230,7 +336,7 @@ function Paywall({
           Pressable,
           {
             accessibilityRole: "radio",
-            accessibilityLabel: `${plan.name} ${plan.price} ${plan.period}`,
+            accessibilityLabel: labels.planSpoken(plan.name, plan.price, plan.period),
             accessibilityState: { checked: on, selected: on },
             "aria-checked": on,
             onPress: () => select(plan.id),
@@ -242,14 +348,8 @@ function Paywall({
             children: [
               /* @__PURE__ */ jsx(View, { style: [styles.indicator, on ? styles.indicatorOn : null], children: on ? /* @__PURE__ */ jsx(View, { style: styles.indicatorDot }) : null }),
               /* @__PURE__ */ jsxs(View, { style: styles.planMain, children: [
-                plan.recommended ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: plan.recommendedLabel ?? "Best value" }) : null,
-                /* @__PURE__ */ jsxs(Text, { style: styles.planTitle, children: [
-                  plan.name,
-                  " \xB7 ",
-                  plan.price,
-                  " ",
-                  plan.period
-                ] }),
+                plan.recommended ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: plan.recommendedLabel ?? labels.bestValue }) : null,
+                /* @__PURE__ */ jsx(Text, { style: styles.planTitle, children: labels.planLine(plan.name, plan.price, plan.period) }),
                 plan.note ? /* @__PURE__ */ jsx(Text, { style: styles.planNote, children: plan.note }) : null
               ] })
             ]
@@ -419,7 +519,6 @@ var sheet2 = createStyleSheet((theme) => ({
   rowBadge: { alignSelf: "flex-start" }
 }));
 var WEB_BLUR = Platform.OS === "web";
-var WEB_BLUR_STYLE = { filter: "blur(8px) saturate(0.6)", opacity: 0.7 };
 var FADE_STEPS = [0.25, 0.5, 0.75, 0.92];
 function PaywallGate({
   children,
@@ -479,7 +578,15 @@ function PaywallGate({
         "aria-hidden": true,
         style: [
           treatment === "dim" ? styles.dimmed : null,
-          treatment === "blur" && WEB_BLUR ? WEB_BLUR_STYLE : null,
+          treatment === "blur" && WEB_BLUR ? (
+            // react-native-web forwards `filter` as CSS; cast because RN's own
+            // `filter` type is the new-architecture array form. `blur.md`
+            // matches the web component's `--blur-md`.
+            {
+              filter: `blur(${theme.blur.md}px) saturate(0.6)`,
+              opacity: theme.opacity[72]
+            }
+          ) : null,
           fade ? { maxHeight: preview + theme.space.s8, overflow: "hidden" } : null
         ],
         children: [
@@ -497,7 +604,7 @@ var sheet3 = createStyleSheet((theme) => ({
   fill: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 },
   // The frosted fallback: opaque enough that no row of sample text is
   // legible through it, translucent enough that the shape still shows.
-  veil: { backgroundColor: theme.color.surface, opacity: 0.72 },
+  veil: { backgroundColor: theme.color.surface, opacity: theme.opacity[72] },
   dimmed: { opacity: theme.state.disabledOpacity },
   fadeBands: { position: "absolute", left: 0, right: 0, bottom: 0 },
   fadeBand: { height: theme.space.s2, backgroundColor: theme.color.bg },
@@ -528,7 +635,9 @@ var sheet3 = createStyleSheet((theme) => ({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accentSoft
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
   },
   lockRegular: { width: theme.ctl.md, height: theme.ctl.md },
   lockCompact: { width: theme.ctl.sm, height: theme.ctl.sm },
@@ -540,7 +649,7 @@ var sheet3 = createStyleSheet((theme) => ({
     lineHeight: theme.type.caption2.lineHeight,
     letterSpacing: theme.tracking.caps,
     textTransform: "uppercase",
-    color: theme.color.accent
+    color: theme.color.accentStrong
   },
   title: {
     fontFamily: theme.font.sans,
@@ -573,10 +682,13 @@ function MeterBar({
   size = "md",
   animate = false,
   accessibilityLabel,
+  labels: labelsProp,
   style
 }) {
   const { styles } = useStyles(sheet4);
-  const readout = `${value.toLocaleString()} of ${max.toLocaleString()}${unit ? ` ${unit}` : ""}`;
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const locale = useLoamLocale();
+  const readout = labels.meterReadout(value.toLocaleString(locale), max.toLocaleString(locale), unit);
   const name = accessibilityLabel ?? (label ? `${label}: ${readout}` : readout);
   return /* @__PURE__ */ jsxs(View, { style: [styles.block, style], children: [
     label == null && unit == null ? null : /* @__PURE__ */ jsxs(View, { style: styles.readoutRow, children: [
@@ -632,17 +744,19 @@ function SavingsChip({
   savingMinor,
   plan,
   currency,
-  label = "Save",
-  per = "a year",
+  label,
+  per,
   locale,
+  labels: labelsProp,
   style
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("commerce");
   const { styles } = useStyles(sheet5);
   const saving = savingMinor ?? (plan ? yearlySaving(plan) : null);
   if (saving == null) return null;
   return /* @__PURE__ */ jsxs(View, { style: [styles.savingChip, style], children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.savingWord, children: label }),
+    /* @__PURE__ */ jsx(Text, { style: styles.savingWord, children: label ?? labels.save }),
     /* @__PURE__ */ jsx(
       Amount,
       {
@@ -654,22 +768,25 @@ function SavingsChip({
         style: { color: theme.color.goodOnSoft }
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles.savingWord, children: per })
+    /* @__PURE__ */ jsx(Text, { style: styles.savingWord, children: per ?? labels.perYear })
   ] });
 }
 function PlanPriceDelta({
   fromMinor,
   toMinor,
   currency,
-  unit = PLAN_COPY.perSeat,
-  sameLabel = "Same price",
+  unit,
+  sameLabel,
   locale,
+  labels: labelsProp,
   style
 }) {
   const { styles } = useStyles(sheet5);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
   const delta = planDelta(fromMinor, toMinor);
   if (delta === 0) {
-    return /* @__PURE__ */ jsx(Text, { style: [styles.deltaUnit, style], children: sameLabel });
+    return /* @__PURE__ */ jsx(Text, { style: [styles.deltaUnit, style], children: sameLabel ?? labels.samePrice });
   }
   return /* @__PURE__ */ jsxs(View, { style: [styles.deltaRow, style], children: [
     /* @__PURE__ */ jsx(
@@ -684,7 +801,7 @@ function PlanPriceDelta({
         locale
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles.deltaUnit, children: unit })
+    /* @__PURE__ */ jsx(Text, { style: styles.deltaUnit, children: unit ?? pay.perSeat })
   ] });
 }
 function PlanFeatureRow({
@@ -692,16 +809,18 @@ function PlanFeatureRow({
   included = true,
   detail,
   stateLabel,
+  labels: labelsProp,
   style
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("commerce");
   const { styles } = useStyles(sheet5);
-  const state = stateLabel ?? (included ? "Included" : "Not included");
+  const state = stateLabel ?? (included ? labels.included : labels.notIncluded);
   return /* @__PURE__ */ jsxs(
     View,
     {
       role: "listitem",
-      accessibilityLabel: `${state}: ${label}${detail ? `. ${detail}` : ""}`,
+      accessibilityLabel: `${labels.featureState(state)}${label}${detail ? `. ${detail}` : ""}`,
       style: [styles.featureRow, style],
       children: [
         /* @__PURE__ */ jsx(
@@ -727,28 +846,44 @@ function PlanPriceCell({
   size = "lg",
   savingMinor,
   locale,
-  style
+  labels: labelsProp,
+  style,
+  motion = "full"
 }) {
   const { styles } = useStyles(sheet5);
-  const words = planCta(plan).price;
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const words = planCta(plan, pay).price;
   const perMonth = yearlyMonthly(plan);
   const yearly = cadence === "yr" && plan.yearly != null ? plan.yearly : null;
   const headline = yearly != null && perMonth != null ? perMonth : plan.price;
   return /* @__PURE__ */ jsxs(View, { style: [styles.priceCell, style], children: [
     /* @__PURE__ */ jsx(View, { style: styles.priceHeadline, children: words ? /* @__PURE__ */ jsx(Text, { style: size === "hero" ? styles.priceWordsHero : styles.priceWords, children: words }) : headline == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Amount, { minor: headline, currency, size, weight: "bold", locale }),
-      /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: PLAN_COPY.perSeat })
+      /* @__PURE__ */ jsx(
+        Amount,
+        {
+          minor: headline,
+          currency,
+          size,
+          weight: "bold",
+          locale,
+          roll: true,
+          motion
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: pay.perSeat })
     ] }) }),
     yearly == null ? null : /* @__PURE__ */ jsxs(View, { style: styles.yearlyRow, children: [
       /* @__PURE__ */ jsx(Amount, { minor: yearly, currency, size: "sm", weight: "bold", locale }),
-      /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: "billed yearly" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: labels.billedYearlyTail }),
       /* @__PURE__ */ jsx(
         SavingsChip,
         {
           savingMinor,
           plan,
           currency,
-          locale
+          locale,
+          labels: labelsProp
         }
       )
     ] })
@@ -762,13 +897,19 @@ function PlanCard({
   isCurrent = false,
   savingMinor,
   ctaLabel,
-  currentLabel = "Your plan",
+  currentLabel: currentLabelProp,
   onSelect,
+  loading = false,
+  locked = false,
   locale,
+  labels: labelsProp,
   style
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("commerce");
   const { styles } = useStyles(sheet5);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const currentLabel = currentLabelProp ?? labels.yourPlan;
   const recommended = highlighted ?? plan.popular ?? false;
   return /* @__PURE__ */ jsxs(
     View,
@@ -785,7 +926,7 @@ function PlanCard({
       children: [
         /* @__PURE__ */ jsxs(View, { style: styles.cardHead, children: [
           /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.planName, children: plan.name }),
-          recommended ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: PLAN_COPY.popularBadge }) : null,
+          recommended ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: pay.popularBadge }) : null,
           isCurrent ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", outline: true, children: currentLabel }) : null
         ] }),
         /* @__PURE__ */ jsx(
@@ -795,12 +936,13 @@ function PlanCard({
             currency,
             cadence,
             savingMinor,
-            locale
+            locale,
+            labels: labelsProp
           }
         ),
         /* @__PURE__ */ jsx(Text, { style: styles.blurb, children: plan.blurb }),
         /* @__PURE__ */ jsx(View, { style: styles.rule }),
-        /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.featureList, children: plan.features.map((feature) => /* @__PURE__ */ jsx(PlanFeatureRow, { label: feature }, feature)) }),
+        /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.featureList, children: plan.features.map((feature) => /* @__PURE__ */ jsx(PlanFeatureRow, { label: feature, labels: labelsProp }, feature)) }),
         isCurrent ? (
           // Not a disabled button: a dead control invites the press that teaches
           // nothing. The marker states the fact and takes no tab stop.
@@ -813,8 +955,9 @@ function PlanCard({
           {
             fullWidth: true,
             variant: recommended ? "primary" : "outline",
-            onPress: () => onSelect?.(plan.id),
-            children: ctaLabel ?? planCta(plan).cta
+            loading,
+            onPress: locked ? void 0 : () => onSelect?.(plan.id),
+            children: ctaLabel ?? planCta(plan, pay).cta
           }
         )
       ]
@@ -824,29 +967,41 @@ function PlanCard({
 function BillingPeriodToggle({
   value,
   onValueChange,
-  monthlyLabel = PLAN_COPY.cadenceMonthly,
-  yearlyLabel = PLAN_COPY.cadenceYearly,
+  monthlyLabel,
+  yearlyLabel,
   size = "md",
   savingMinor,
   currency,
   locale,
+  labels: labelsProp,
   style
 }) {
   const { styles } = useStyles(sheet5);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
   return /* @__PURE__ */ jsxs(View, { style: [styles.toggleRow, style], children: [
     /* @__PURE__ */ jsx(
       SegmentedControl,
       {
+        accessibilityLabel: labels.billingPeriod,
         size,
         value,
         onValueChange: (next) => onValueChange(next),
         items: [
-          { value: "mo", label: monthlyLabel },
-          { value: "yr", label: yearlyLabel }
+          { value: "mo", label: monthlyLabel ?? pay.cadenceMonthly },
+          { value: "yr", label: yearlyLabel ?? pay.cadenceYearly }
         ]
       }
     ),
-    savingMinor != null && currency ? /* @__PURE__ */ jsx(SavingsChip, { savingMinor, currency, locale }) : null
+    savingMinor != null && currency ? /* @__PURE__ */ jsx(
+      SavingsChip,
+      {
+        savingMinor,
+        currency,
+        locale,
+        labels: labelsProp
+      }
+    ) : null
   ] });
 }
 function PlanGrid({
@@ -856,9 +1011,11 @@ function PlanGrid({
   onCadenceChange,
   onSelect,
   currentPlanId,
+  pendingPlanId,
   savings,
   hideIds,
   locale,
+  labels: labelsProp,
   style
 }) {
   const { styles } = useStyles(sheet5);
@@ -870,7 +1027,8 @@ function PlanGrid({
         value: cadence,
         onValueChange: onCadenceChange,
         currency,
-        locale
+        locale,
+        labels: labelsProp
       }
     ) : null,
     /* @__PURE__ */ jsx(View, { style: styles.gridStack, children: shown.map((plan) => /* @__PURE__ */ jsx(
@@ -882,7 +1040,10 @@ function PlanGrid({
         isCurrent: currentPlanId === plan.id,
         savingMinor: savings?.[plan.id],
         onSelect,
-        locale
+        loading: pendingPlanId === plan.id,
+        locked: pendingPlanId != null,
+        locale,
+        labels: labelsProp
       },
       plan.id
     )) })
@@ -1051,11 +1212,13 @@ function ProrationLine({
   currency,
   effectiveLabel,
   nextMinor,
-  nextCadenceLabel = "monthly",
+  nextCadenceLabel,
   locale,
+  labels: labelsProp,
   style
 }) {
   const { styles } = useStyles(sheet6);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
   const downgrade = prorationWay(proration) === "downgrade";
   return /* @__PURE__ */ jsxs(View, { style: [styles.prorationLine, style], children: [
     /* @__PURE__ */ jsx(
@@ -1069,12 +1232,12 @@ function ProrationLine({
         locale
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: downgrade ? "credited to your next invoice" : "today" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: downgrade ? labels.creditedNextInvoice : labels.today }),
     nextMinor == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Text, { style: styles.prorationSep, children: "\xB7" }),
-      /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: "then" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: labels.then }),
       /* @__PURE__ */ jsx(Amount, { minor: nextMinor, currency, size: "sm", weight: "bold", locale }),
-      /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: `${nextCadenceLabel} from ${effectiveLabel}` })
+      /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: labels.cadenceFrom(nextCadenceLabel ?? labels.monthly, effectiveLabel) })
     ] })
   ] });
 }
@@ -1087,20 +1250,23 @@ function ProrationTable({
   cycleDays = proration.cycleDays,
   effectiveLabel,
   nextMinor,
-  nextCadenceLabel = "monthly",
+  nextCadenceLabel,
   caption,
-  note = PLAN_COPY.prorationNote,
+  note,
   locale,
+  labels: labelsProp,
   style
 }) {
   const { styles } = useStyles(sheet6);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
   const downgrade = prorationWay(proration) === "downgrade";
   return /* @__PURE__ */ jsxs(View, { style: [styles.prorationTable, style], children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: caption ?? `Mid-cycle change \xB7 ${currency}` }),
+    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: caption ?? labels.midCycleChange(currency) }),
     /* @__PURE__ */ jsx(
       PriceRow,
       {
-        label: `Unused ${fromName}, ${daysLeft} of ${cycleDays} days`,
+        label: labels.unusedTime(fromName, daysLeft, cycleDays),
         minor: -proration.credit,
         currency,
         tone: "good",
@@ -1111,7 +1277,7 @@ function ProrationTable({
     /* @__PURE__ */ jsx(
       PriceRow,
       {
-        label: `${toName} for the same ${daysLeft} days`,
+        label: labels.sameDays(toName, daysLeft),
         minor: proration.charge,
         currency,
         noSymbol: true,
@@ -1121,7 +1287,7 @@ function ProrationTable({
     /* @__PURE__ */ jsx(
       PriceRow,
       {
-        label: downgrade ? "Credit on your next invoice" : "Charged today",
+        label: downgrade ? labels.creditOnNextInvoice : labels.chargedToday,
         minor: downgrade ? proration.refund : proration.dueNow,
         currency,
         tone: downgrade ? "good" : void 0,
@@ -1134,26 +1300,26 @@ function ProrationTable({
     nextMinor == null ? null : /* @__PURE__ */ jsx(
       PriceRow,
       {
-        label: `From ${effectiveLabel}, ${nextCadenceLabel}`,
+        label: labels.fromDate(effectiveLabel, nextCadenceLabel ?? labels.monthly),
         minor: nextMinor,
         currency,
         noSymbol: true,
         locale
       }
     ),
-    note === false ? null : /* @__PURE__ */ jsx(Text, { style: styles.prorationNote, children: note })
+    note === false ? null : /* @__PURE__ */ jsx(Text, { style: styles.prorationNote, children: note === void 0 ? pay.prorationNote : note })
   ] });
 }
-function toPaywallPlan(plan, currency, cadence, savingMinor, isCurrent, currentLabel, locale) {
-  const words = planCta(plan).price;
+function toPaywallPlan(plan, currency, cadence, savingMinor, isCurrent, currentLabel, locale, labels, pay) {
+  const words = planCta(plan, pay).price;
   const perMonth = yearlyMonthly(plan);
   const yearly = cadence === "yr" && plan.yearly != null ? plan.yearly : null;
   const headline = yearly != null && perMonth != null ? perMonth : plan.price;
   const saving = savingMinor ?? yearlySaving(plan);
   const notes = [];
-  if (yearly != null) notes.push(`${money(yearly, currency, { locale })} billed yearly`);
+  if (yearly != null) notes.push(`${money(yearly, currency, { locale })} ${labels.billedYearlyTail}`);
   if (yearly != null && saving != null) {
-    notes.push(`Save ${money(saving, currency, { locale })} a year`);
+    notes.push(`${labels.save} ${money(saving, currency, { locale })} ${labels.perYear}`);
   }
   notes.push(plan.blurb);
   if (isCurrent) notes.push(currentLabel);
@@ -1161,10 +1327,10 @@ function toPaywallPlan(plan, currency, cadence, savingMinor, isCurrent, currentL
     id: plan.id,
     name: plan.name,
     price: words || (headline == null ? "" : money(headline, currency, { locale })),
-    period: words ? "" : PLAN_COPY.perSeat,
+    period: words ? "" : pay.perSeat,
     note: notes.join(" \xB7 "),
     recommended: plan.popular ?? false,
-    recommendedLabel: PLAN_COPY.popularBadge
+    recommendedLabel: pay.popularBadge
   };
 }
 function PaywallSurface({
@@ -1178,40 +1344,58 @@ function PaywallSurface({
   onCadenceChange,
   onPickPlan,
   currentPlanId,
-  currentLabel = "Your plan",
+  pendingPlanId,
+  currentLabel: currentLabelProp,
   savings,
   hideIds,
   featureOffer,
   billing = "ours",
-  platformNote = "Billed by the app store on your account. Prices come from its catalogue.",
+  platformNote: platformNoteProp,
   legalText,
   footNote,
-  dismissLabel = "Not now",
+  dismissLabel: dismissLabelProp,
   onDismiss,
-  restoreLabel = "Restore purchases",
+  restoreLabel: restoreLabelProp,
   onRestore,
   upgradeLabel,
   onUpgrade,
-  locale,
+  locale: localeProp,
+  labels: labelsProp,
   style
 }) {
   const { styles } = useStyles(sheet6);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const currentLabel = currentLabelProp ?? labels.yourPlan;
+  const platformNote = platformNoteProp ?? labels.platformNote;
+  const dismissLabel = dismissLabelProp ?? labels.notNow;
+  const restoreLabel = restoreLabelProp ?? labels.restorePurchases;
   const canDismiss = variant !== "hard" && Boolean(onDismiss);
   const showMeter = (variant === "metered" || variant === "trial") && meter != null;
   const offer = variant === "feature" ? featureOffer : void 0;
-  const shown = React6.useMemo(() => {
+  const shown = React2.useMemo(() => {
     const list = plans ?? [];
     return hideIds?.length ? list.filter((p) => !hideIds.includes(p.id)) : list;
   }, [plans, hideIds]);
-  const [selected, setSelected] = React6.useState(
+  const [selected, setSelected] = React2.useState(
     () => shown.find((p) => p.popular)?.id ?? shown[0]?.id
   );
   const selectedPlan = shown.find((p) => p.id === selected);
   const footer = /* @__PURE__ */ jsx(View, { style: styles.footerNotes, children: footNote ? /* @__PURE__ */ jsx(Text, { style: styles.footNote, children: footNote }) : null });
   const slot = /* @__PURE__ */ jsxs(View, { style: styles.slot, children: [
     billing === "platform" ? /* @__PURE__ */ jsx(Text, { style: styles.platformNote, children: platformNote }) : null,
-    showMeter && meter ? /* @__PURE__ */ jsx(MeterBar, { ...meter }) : null,
-    onCadenceChange ? /* @__PURE__ */ jsx(BillingPeriodToggle, { value: cadence, onValueChange: onCadenceChange }) : null
+    showMeter && meter ? /* @__PURE__ */ jsx(MeterBar, { labels: labelsProp, ...meter }) : null,
+    onCadenceChange ? /* @__PURE__ */ jsx(
+      BillingPeriodToggle,
+      {
+        value: cadence,
+        onValueChange: onCadenceChange,
+        locale,
+        labels: labelsProp
+      }
+    ) : null
   ] });
   if (offer) {
     return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: title, style: [styles.featureSurface, style], children: [
@@ -1229,11 +1413,15 @@ function PaywallSurface({
           savingMinor: offer.savingMinor,
           highlighted: true,
           ctaLabel: upgradeLabel,
+          loading: pendingPlanId === offer.plan.id,
+          locked: pendingPlanId != null,
           onSelect: () => {
             onUpgrade?.();
             onPickPlan?.(offer.plan.id);
           },
-          locale
+          locale,
+          labels: labelsProp,
+          currentLabel: currentLabelProp
         }
       ),
       offer.proration && offer.effectiveLabel ? /* @__PURE__ */ jsx(
@@ -1243,7 +1431,8 @@ function PaywallSurface({
           currency,
           effectiveLabel: offer.effectiveLabel,
           nextMinor: offer.nextMinor,
-          locale
+          locale,
+          labels: labelsProp
         }
       ) : null,
       /* @__PURE__ */ jsx(Text, { style: styles.legal, children: legalText }),
@@ -1276,19 +1465,23 @@ function PaywallSurface({
           savings?.[plan.id],
           currentPlanId === plan.id,
           currentLabel,
-          locale
+          locale,
+          labels,
+          pay
         )
       ),
       selectedPlanId: selected,
       onSelectPlan: setSelected,
-      ctaLabel: selectedPlan ? planCta(selectedPlan).cta : restoreLabel,
+      ctaLabel: selectedPlan ? planCta(selectedPlan, pay).cta : restoreLabel,
+      busy: pendingPlanId != null,
       onPurchase: (id) => onPickPlan?.(id),
       legalText,
       footNote: footer,
       restoreLabel,
       onRestore,
       onClose: canDismiss ? onDismiss : void 0,
-      closeLabel: dismissLabel
+      closeLabel: dismissLabel,
+      labels: labelsProp
     }
   ) });
 }
@@ -1401,10 +1594,10 @@ var sheet6 = createStyleSheet((theme) => ({
   }
 }));
 var STATUS = {
-  active: { variant: "good", label: "Active" },
-  trial: { variant: "info", label: "Trial" },
-  canceled: { variant: "neutral", label: "Canceled" },
-  "past-due": { variant: "warn", label: "Past due" }
+  active: { variant: "good", label: "statusActive" },
+  trial: { variant: "info", label: "statusTrial" },
+  canceled: { variant: "neutral", label: "statusCanceled" },
+  "past-due": { variant: "warn", label: "statusPastDue" }
 };
 function ManageSubscription({
   planName,
@@ -1412,36 +1605,32 @@ function ManageSubscription({
   statusLabel,
   price,
   renewalDate,
-  renewalLabel = "renews",
+  renewalLabel: renewalLabelProp,
   paymentMethod,
-  paymentLabel = "Payment",
+  paymentLabel: paymentLabelProp,
   actions = [],
   onAction,
-  cancelLabel = "Cancel subscription",
+  cancelLabel: cancelLabelProp,
   onCancel,
-  cancelNote
+  cancelNote,
+  cancelBusy = false,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet7);
-  const theme = useLoamTheme();
+  const labels = useLabels("manageSubscription", MANAGE_SUBSCRIPTION_LABELS, labelsProp);
+  const renewalLabel = renewalLabelProp ?? labels.renews;
+  const paymentLabel = paymentLabelProp ?? labels.payment;
+  const cancelLabel = cancelLabelProp ?? labels.cancel;
+  const theme = useLoamTheme("commerce");
   const badge = STATUS[status];
   return /* @__PURE__ */ jsxs(ScrollView, { style: styles.screen, contentContainerStyle: styles.scroll, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.cardHead, children: [
         /* @__PURE__ */ jsx(Text, { style: styles.planName, children: planName }),
-        /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: badge.variant, size: "sm", children: statusLabel ?? badge.label })
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
-        price,
-        " \xB7 ",
-        renewalLabel,
-        " ",
-        renewalDate
+        /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: badge.variant, size: "sm", children: statusLabel ?? labels[badge.label] })
       ] }),
-      paymentMethod ? /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
-        paymentLabel,
-        " \xB7 ",
-        paymentMethod
-      ] }) : null
+      /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.renewalLine(price, renewalLabel, renewalDate) }),
+      paymentMethod ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.paymentLine(paymentLabel, paymentMethod) }) : null
     ] }),
     actions.length > 0 ? /* @__PURE__ */ jsx(List, { children: actions.map((a) => /* @__PURE__ */ jsx(
       ListRow,
@@ -1460,7 +1649,8 @@ function ManageSubscription({
         {
           accessibilityRole: "button",
           accessibilityLabel: cancelLabel,
-          onPress: onCancel,
+          accessibilityState: { busy: cancelBusy },
+          onPress: cancelBusy ? void 0 : onCancel,
           style: ({ pressed }) => [styles.cancel, pressed ? styles.cancelPressed : null],
           children: /* @__PURE__ */ jsx(Text, { style: styles.cancelLabel, children: cancelLabel })
         }
@@ -1532,10 +1722,12 @@ function ToggleRow({
   onValueChange,
   disabled = false,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet8);
-  const announced = accessibilityLabel ?? (description ? `${label}, ${description}` : label);
+  const labels = useLabels("toggleRow", TOGGLE_ROW_LABELS, labelsProp);
+  const announced = accessibilityLabel ?? (description ? labels.withDescription(label, description) : label);
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -1598,7 +1790,7 @@ function SettingsScreen({
   onToggle
 }) {
   const { styles } = useStyles(sheet9);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("commerce");
   return /* @__PURE__ */ jsx(ScrollView, { style: styles.screen, contentContainerStyle: styles.scroll, children: groups.map((group) => /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
     group.title ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: group.title }) : null,
     /* @__PURE__ */ jsx(List, { children: group.rows.map((row) => {
@@ -1694,20 +1886,19 @@ var sheet9 = createStyleSheet((theme) => ({
     color: theme.color.text3
   }
 }));
-var SYSTEM_NOTE = {
-  on: "System notifications are on. Turn categories off here rather than muting the whole app.",
-  off: "Notifications are turned off for this app in system settings. Your choices below are kept, and take effect as soon as you turn them back on."
-};
 function NotificationPreferences({
   systemEnabled = true,
   systemNote,
-  systemActionLabel = "Open Settings",
+  systemActionLabel: systemActionLabelProp,
   onOpenSystemSettings,
   categories,
-  onChange
+  onChange,
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet10);
-  const note = systemNote ?? (systemEnabled ? SYSTEM_NOTE.on : SYSTEM_NOTE.off);
+  const labels = useLabels("notificationPreferences", NOTIFICATION_PREFERENCES_LABELS, labelsProp);
+  const systemActionLabel = systemActionLabelProp ?? labels.openSettings;
+  const note = systemNote ?? (systemEnabled ? labels.systemOn : labels.systemOff);
   return /* @__PURE__ */ jsxs(ScrollView, { style: styles.screen, contentContainerStyle: styles.scroll, children: [
     /* @__PURE__ */ jsxs(
       View,