@oxy.so/services 9.2.0 → 10.0.0

package/lib/typescript/module/ui/components/FollowTargetButton.d.ts

@@ -55,7 +55,7 @@ export interface FollowTargetButtonProps {
     verb?: FollowVerb;
     /** Full override, for a verb the vocabulary above does not carry. */
     labels?: Partial<FollowLabels>;
-    size?: 'small' | 'medium' | 'large';
+    size?: 'sm' | 'md' | 'lg';
     style?: StyleProp<ViewStyle>;
     disabled?: boolean;
     /**

package/lib/typescript/module/ui/components/FollowTargetButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FollowTargetButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/FollowTargetButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBzD,OAAO,EAIL,KAAK,cAAc,EAEpB,MAAM,kBAAe,CAAC;AAEvB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;CAClB;AA2BD,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACrC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,kBAAkB,+DAkL7B,CAAC"}
+{"version":3,"file":"FollowTargetButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/FollowTargetButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBzD,OAAO,EAIL,KAAK,cAAc,EAEpB,MAAM,kBAAe,CAAC;AAEvB;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;CAClB;AA2BD,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACrC;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,kBAAkB,+DAkL7B,CAAC"}

package/lib/typescript/module/ui/components/PeableButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeableButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/PeableButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,oCAAiC,CAAC;AAGzF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4B7C,CAAC;AAcF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"PeableButton.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/PeableButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,oCAAiC,CAAC;AAGzF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED;;;GAGG;AACH,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2B7C,CAAC;AAcF,eAAe,YAAY,CAAC"}

package/lib/typescript/module/ui/components/surfaces/ActionSheetSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheetSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/surfaces/ActionSheetSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAExE;;;GAGG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM;IACrD,mEAAmE;IACnE,OAAO,EAAE,eAAe,CAAC;IACzB,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;CACvB;AAKD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,OAAO,EACP,KAAK,EACL,OAAO,EACP,OAAO,EACP,WAAW,GACd,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAuCjD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAC/C,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GACrD,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAIxB"}
+{"version":3,"file":"ActionSheetSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/surfaces/ActionSheetSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAExE;;;GAGG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM;IACrD,mEAAmE;IACnE,OAAO,EAAE,eAAe,CAAC;IACzB,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;CACvB;AAKD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,OAAO,EACP,KAAK,EACL,OAAO,EACP,OAAO,EACP,WAAW,GACd,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAwCjD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAC/C,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GACrD,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAIxB"}

package/lib/typescript/module/ui/screens/EditProfileFieldScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditProfileFieldScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/EditProfileFieldScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAqB,CAAC;AA0B3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACtB,aAAa,GACb,UAAU,GACV,KAAK,GACL,OAAO,GACP,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,OAAO,CAAC;AAgFd,UAAU,2BAA4B,SAAQ,eAAe;IACzD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;;AAqoBD,wBAAkD"}
+{"version":3,"file":"EditProfileFieldScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/EditProfileFieldScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAqB,CAAC;AA0B3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACtB,aAAa,GACb,UAAU,GACV,KAAK,GACL,OAAO,GACP,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,OAAO,CAAC;AAgFd,UAAU,2BAA4B,SAAQ,eAAe;IACzD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;;AAooBD,wBAAkD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/services",
-  "version": "9.2.0",
+  "version": "10.0.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -155,7 +155,7 @@
   },
   "dependencies": {
     "@expo/config-plugins": "57.0.9",
-    "@oxy.so/contracts": "^4.1.0",
+    "@oxy.so/contracts": "^4.3.0",
     "color": "^4.2.3"
   },
   "devDependencies": {
@@ -178,7 +178,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.19.43",
     "@types/react": "*",
-    "@oxy.so/bloom": "^5.1.0",
+    "@oxy.so/bloom": "^6.0.0",
     "copyfiles": "^2.4.1",
     "expo-clipboard": "~57.0.2",
     "expo-constants": "~57.0.5",
@@ -212,10 +212,10 @@
     "typescript": "^5.9.2",
     "zustand": "^5.0.14"
   },
-  "//@oxy.so/bloom": "RE-RAISE THIS FLOOR ON EVERY BREAKING BLOOM RELEASE, in the same commit as the root package.json catalog entry and the code that requires it. The breaking position is the MAJOR, so `^3.0.1` means `>=3.0.1 <4.0.0`: 3.x minors are admitted on semver's additive promise, and Bloom 4.0.0 is refused until someone raises this deliberately. The CAP is the part that is load-bearing. An earlier revision of this key recorded the opposite trade -- an uncapped `>=` floor, accepted so that intentionally-breaking Bloom 0.x minors would not be blocked -- and that trade is closed by evidence rather than by preference: an unbounded range is exactly what let `bun install` pair this package with Bloom 1.0.0 and emit no warning at all, and 1.0.0 broke it four ways (a deleted provider, a renamed confirm option, a renamed Chip fill, and two REMOVED SUBPATHS that fail at bundle time, before any typecheck runs). A floor is a claim about what was measured; a cap is the claim that nothing beyond it was. RAISED TO 3.0.1 from `^2.1.0`. Bloom 3.0.0 breaks exactly two things -- `PageHeader` defaults to `presentation=\"floating\"` and stops hiding the title under `transparent`, and `Field disabled` now reaches the control that reads the field context -- and THIS PACKAGE IMPORTS NEITHER: it renders no `PageHeader` and no `Field`, and 3.0 removes no subpath (unlike 2.0.0, which is why that floor cost code changes and this one does not). Its six `transparent` occurrences are CSS colour values, not the PageHeader prop. The cap had to move rather than widen to a union, because leaving `^2.1.0` in place is what made `bun install` resolve a SECOND, nested Bloom 2.12.4 under this package for any app on Bloom 3 -- two copies of a library whose 3.0 contracts (`control-surface`, `TopEdgeProvider`, `ScrollOffsetProvider`) are React contexts, so a provider from one copy cannot be read by a consumer from the other. Mention's `oxyRuntimeCompatibility` test is what caught it; nothing in a typecheck can. RAISED AGAIN TO 3.2.0 from `^3.0.1`, for the same class of reason the 2.x note records, only in the other direction: 3.2.0 ADDS the per-glyph icon subpaths (`@oxy.so/bloom/icons/RiAtLine`) that this package's screens now import instead of the `@oxy.so/bloom/icons` barrel, and a missing subpath fails at bundle time, in the consumer's Metro, long after this package has typechecked and shipped. `^3.0.1` would have admitted Bloom 3.0.1 and 3.1.0, neither of which has those subpaths, so the floor is the only thing standing between a consumer and a red build. Nothing else about 3.1.0 or 3.2.0 is required here; the cap stays at the major. RAISED TO ^4.2.0: FollowButton now delegates its visuals to Bloom media-header FollowButton with loading, textStyle and large size; the new shared UI contracts require one Bloom4 context across Services and its consumer. RAISED TO ^4.31.0: the sign-in and account screens type one-time codes into `InputOtp` with `type=\"alphanumeric\"` (the long sign-in code and backup codes), which 4.31.0 adds; older 4.x drops the letters. RAISED TO ^4.35.0: every password field passes `revealable` to `TextFieldInput` (the eye button, 4.35.0); older 4.x drops the prop silently and the password cannot be shown. The provider also mounts `@oxy.so/bloom/locale` (4.32.0+). RAISED TO ^5.1.0 (services 9.0.0, a major because consumers must move to Bloom 5 with it): Bloom 5.0.0 types `Card`'s `style` without radius, border width or `overflow` (geometry goes through `radius`/`border`/`clipContent`) and stops clipping a Card's children by default, so `BenefitList`'s `overflow: 'visible'` became both a type error and unnecessary; it is removed. The cap MOVES rather than widening to a `^4 || ^5` union, for the reason the 3.0.1 note records: a union lets an app resolve a second, nested Bloom copy and split the React contexts. The floor is 5.1.0 because that is the version measured here (every package builds and tests against it); 5.0.0 was not measured.",
+  "//@oxy.so/bloom": "Bloom peer tracks the measured major: ^6.0.0 includes canonical appearance/tone/size props and shared Surface. Keep its upper bound and the root catalog in sync to prevent duplicate context instances. Services 10 removes FollowButton small/medium/large aliases in favor of sm/md/lg.",
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/bloom": "^5.1.0",
+    "@oxy.so/bloom": "^6.0.0",
     "@oxy.so/core": "^3.2.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": ">=11.4.1",

package/src/ui/components/BenefitList.tsx

@@ -98,13 +98,12 @@ export const BenefitList: React.FC<BenefitListProps> = ({
     style,
 }) => (
     <Card
-        variant="outlined"
         radius="radius-20"
         border="hairline"
         elevation="s"
         className={className}
         style={[{ padding: SPACING['space-16'], gap: SPACING['space-16'] }, style]}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel} appearance="outline"
     >
         {children}
     </Card>

package/src/ui/components/FollowButton.tsx

@@ -19,7 +19,7 @@ const DEFAULT_FOLLOWED_ALL_LABEL = 'Following';
 
 /** Props shared by both single- and multi-user follow modes. */
 interface FollowButtonBaseProps {
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg';
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   disabled?: boolean;
@@ -67,7 +67,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
   oxyServices,
   initiallyFollowing,
   username,
-  size = 'medium',
+  size = 'md',
   onFollowChange,
   style,
   textStyle,
@@ -140,7 +140,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
 const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
   userIds,
   initiallyAllFollowing = false,
-  size = 'medium',
+  size = 'md',
   followAllLabel = DEFAULT_FOLLOW_ALL_LABEL,
   followedAllLabel = DEFAULT_FOLLOWED_ALL_LABEL,
   onFollowChange,

package/src/ui/components/FollowTargetButton.tsx

@@ -108,7 +108,7 @@ export interface FollowTargetButtonProps {
   verb?: FollowVerb;
   /** Full override, for a verb the vocabulary above does not carry. */
   labels?: Partial<FollowLabels>;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg';
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   /**
@@ -152,7 +152,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
   targetId,
   verb = 'follow',
   labels,
-  size = 'medium',
+  size = 'md',
   style,
   disabled = false,
   showOptions = true,
@@ -309,7 +309,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
         <DropdownMenuTrigger asChild disabled={disabled || isUnknown}>
           <Button
             appearance="subtle" tone="support"
-            size={size === 'large' ? 'large' : 'small'}
+            size={size === 'lg' ? 'lg' : 'sm'}
             icon={<ChevronDown width={16} />}
             disabled={disabled || isUnknown}
             accessibilityLabel={`${label} options`}

package/src/ui/components/PeableButton.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { Button } from '@oxy.so/bloom/button';
+import { InverseButton } from '@oxy.so/bloom/button';
 import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
 import { LogoIcon } from './logo/LogoIcon';
 
@@ -46,8 +46,7 @@ const PeableButton: React.FC<PeableButtonProps> = ({
     const textColor = variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
 
     return (
-        <Button
-            variant="inverse"
+        <InverseButton
             onPress={handlePress}
             disabled={disabled}
             style={[{ backgroundColor, borderColor: textColor, borderWidth: 1 }, style]}
@@ -55,7 +54,7 @@ const PeableButton: React.FC<PeableButtonProps> = ({
             icon={<LogoIcon height={16} color={textColor} style={{ marginRight: 6 }} />}
         >
             {text}
-        </Button>
+        </InverseButton>
     );
 };
 

package/src/ui/components/SurfaceHeaderAction.tsx

@@ -12,7 +12,7 @@ export interface SurfaceHeaderActionProps {
 
 /** Header actions share Bloom's sizing, surface, disabled and loading behavior. */
 export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({ label, onPress, loading, disabled }) => (
-  <Button size="medium" onPress={onPress} loading={loading} disabled={disabled}>
+  <Button size="md" onPress={onPress} loading={loading} disabled={disabled}>
     {label}
   </Button>
 );

package/src/ui/components/SurfaceScreen.tsx

@@ -88,7 +88,7 @@ const errorStyles = StyleSheet.create({
 function ScreenPending() {
   return (
     <View style={errorStyles.container}>
-      <Loading variant="spinner" size="large" />
+      <Loading variant="spinner" size="lg" />
     </View>
   );
 }

package/src/ui/components/__tests__/followButtonAccessibility.test.tsx

@@ -16,6 +16,7 @@ import {
 } from '../followButtonAccessibility';
 
 interface BloomFollowProps {
+  size?: 'sm' | 'md' | 'lg';
   following: boolean;
   label?: string;
   followingLabel?: string;
@@ -189,3 +190,11 @@ describe('FollowTargetButton names the state it shows', () => {
     expect(lastBloomProps()?.accessibilityLabel).toBe(label);
   });
 });
+
+
+it.each(['sm', 'md', 'lg'] as const)('forwards canonical %s geometry in both follow modes', size => {
+  render(<FollowButton userId="nate-id" size={size} />);
+  expect(lastBloomProps()?.size).toBe(size);
+  render(<FollowButton userIds={['a', 'b']} size={size} />);
+  expect(lastBloomProps()?.size).toBe(size);
+});

package/src/ui/components/authChooser/AccountsMenuView.tsx

@@ -385,7 +385,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
             spanning the surface. */}
         <Button
           appearance="subtle" tone="neutral"
-          size="small"
+          size="sm"
           onPress={handlers.onManage}
           accessibilityLabel={manageLabel}
         >

package/src/ui/components/authChooser/primitives.tsx

@@ -27,7 +27,7 @@ export const SubtleLink: React.FC<{
   testID?: string;
 }> = ({ label, onPress, disabled, testID }) => (
   <LinkButton
-    variant="secondary"
+    linkTone="secondary"
     size="sm"
     onPress={onPress}
     disabled={disabled}

package/src/ui/components/authChooser/requestSurfaces.tsx

@@ -40,7 +40,7 @@ const ROUTE_GLYPH_SIZE = 44;
  */
 export const PreparingSurface: React.FC = () => {
   const { t } = useI18n();
-  return <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} />;
+  return <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} />;
 };
 
 /** The leading glyph for a route whose surface is elsewhere (the phone, Commons). */

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -214,13 +214,13 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
                 <Button
                     appearance="solid" tone="accent"
                     onPress={onNext}
-                    size="small"
+                    size="sm"
                     icon={<Ionicons name="arrow-forward" size={16} />}
                     iconPosition="right"
                     disabled={paymentMethod === 'card' && !isCardValid}

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -77,10 +77,10 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
-                <Button appearance="solid" tone="accent" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                <Button appearance="solid" tone="accent" onPress={onNext} size="sm" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
                     {t('payment.actions.continue')}
                 </Button>
             </View>

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -105,13 +105,13 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
                 <Button
                     appearance="solid" tone="accent"
                     onPress={onPay}
-                    size="small"
+                    size="sm"
                     disabled={isPaying}
                     icon={isPaying ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Ionicons name="checkmark" size={16} />}
                     iconPosition="right"

package/src/ui/components/payment/PaymentSuccessStep.tsx

@@ -57,7 +57,7 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
                 </View>
             </View>
 
-            <Button appearance="solid" tone="accent" onPress={onDone} size="small" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
+            <Button appearance="solid" tone="accent" onPress={onDone} size="sm" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
                 {t('payment.actions.done')}
             </Button>
         </Animated.View>

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -145,10 +145,10 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onClose} size="small" icon={<Ionicons name="close" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onClose} size="sm" icon={<Ionicons name="close" size={16} />}>
                     {t('payment.actions.close')}
                 </Button>
-                <Button appearance="solid" tone="accent" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                <Button appearance="solid" tone="accent" onPress={onNext} size="sm" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
                     {t('payment.actions.continue')}
                 </Button>
             </View>

package/src/ui/components/signIn/OxyAuthScreen.tsx

@@ -103,7 +103,7 @@ export const OxyAuthLoading: React.FC = () => {
   const { t } = useI18n();
   return (
     <View className="min-h-[300px] items-center justify-center">
-      <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} testID="oxy-auth-loading" />
+      <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} testID="oxy-auth-loading" />
     </View>
   );
 };

package/src/ui/components/signIn/OxyLinkCommonsPanel.tsx

@@ -204,7 +204,7 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
           <View style={styles.plateRow}>
-            <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} />
+            <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} />
           </View>
         </OxyAuthScreen>
       );

package/src/ui/components/signIn/OxyPasswordPanel.tsx

@@ -95,7 +95,7 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
       {/* The field names the switch ("Sign out everywhere else, switch, off")
           and, on web, its label toggles it. One row: label, then the switch. */}
       <Field label={t('signInSecurity.password.signOutOthers')} style={styles.row}>
-        <Switch value={signOutOthers} onValueChange={setSignOutOthers} testID="password-sign-out-others" />
+        <Switch checked={signOutOthers} onCheckedChange={setSignOutOthers} testID="password-sign-out-others" />
       </Field>
     </ReauthStep>
   );

package/src/ui/components/surfaces/ActionSheetSurface.tsx

@@ -72,7 +72,8 @@ export function ActionSheetSurface<T extends string>({
                 {options.map((option) => (
                     <Button
                         key={option.value}
-                        variant={option.destructive ? 'destructive' : 'primary'}
+                        appearance="solid"
+                        tone={option.destructive ? 'danger' : 'accent'}
                         onPress={() => surface.dismiss(option.value)}
                     >
                         {option.label}

package/src/ui/screens/AccountMembersScreen.tsx

@@ -291,7 +291,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
               <Text className="text-caption font-caption text-text-secondary px-space-4">
                 {t('accounts.members.invite.roleLabel') || 'Role'}
               </Text>
-              <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'} value={inviteRole} onValueChange={setInviteRole} size="small">
+              <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'} value={inviteRole} onValueChange={setInviteRole} size="sm">
                 {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
                   <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
                 </SegmentedControlItem>)}
@@ -372,7 +372,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                           {/* Role chips (editable) or static role label */}
                           {canEditThisRole ? (
                             <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'}
-                              value={member.role} onValueChange={role => handleChangeRole(member, role)} disabled={updateMutation.isPending} size="small">
+                              value={member.role} onValueChange={role => handleChangeRole(member, role)} disabled={updateMutation.isPending} size="sm">
                               {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
                                 <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
                               </SegmentedControlItem>)}
@@ -387,7 +387,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                           {(canTransferToThis || canRemoveThisMember) ? (
                             <View className="flex-row gap-space-16 pt-space-4">
                               {canTransferToThis ? (
-                                <Button appearance="plain" tone="neutral" size="small"
+                                <Button appearance="plain" tone="neutral" size="sm"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.transfer') || 'Transfer ownership'}
                                   onPress={() => confirmTransfer(member)}
@@ -400,7 +400,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                                 </Button>
                               ) : null}
                               {canRemoveThisMember ? (
-                                <Button appearance="plain" tone="neutral" size="small"
+                                <Button appearance="plain" tone="neutral" size="sm"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.remove') || 'Remove member'}
                                   onPress={() => confirmRemove(member)}

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -156,7 +156,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
 
                 <Button
                     appearance="solid" tone="accent"
-                    size="large"
+                    size="lg"
                     fullWidth
                     className="mt-space-24"
                     onPress={handleSubmit}

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -146,7 +146,7 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
     return (
         <View className="flex-1 bg-bg">
             {isLoading && !apps ? (
-                <Loading size="large" color={bloomTheme.colors.primary} />
+                <Loading size="lg" color={bloomTheme.colors.primary} />
             ) : (
                 <FlatList
                     data={apps ?? []}

package/src/ui/screens/DomainsScreen.tsx

@@ -94,7 +94,7 @@ const DomainsScreen: React.FC<BaseScreenProps> = () => {
     };
 
     if (domains.isPending && isAuthenticated) {
-        return <Loading size="large" color={bloomTheme.colors.primary} />;
+        return <Loading size="lg" color={bloomTheme.colors.primary} />;
     }
 
     return (

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -704,11 +704,10 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                         </TextField>
                     </View>
                     <Button
-                        variant="icon"
                         onPress={handleAddItem}
                         disabled={!newItemValue.trim()}
                         accessibilityLabel={addLabel}
-                        icon={<Ionicons name="add" size={20} color={bloomTheme.colors.primaryForeground} />}
+                        icon={<Ionicons name="add" size={20} color={bloomTheme.colors.primaryForeground} />} iconOnly tone="neutral" appearance="outline"
                     />
                 </View>
 

package/src/ui/screens/FileManagementScreen.tsx

@@ -776,13 +776,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 // Hide action buttons when selecting (in selectMode or bulk operations mode)
                 rightElement: (!selectMode && selectedIds.size === 0) ? (
                     <View className="flex-row items-center gap-1.5 ml-3">
-                        {(isImage || isVideo || file.contentType.includes('pdf')) ? <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                        {(isImage || isVideo || file.contentType.includes('pdf')) ? <Button appearance="subtle" tone="neutral" size="sm" iconOnly stopPropagation
                             accessibilityLabel={`Preview ${file.filename}`} onPress={() => handleFileOpen(file)}
                             icon={<Ionicons name="eye" size={18} color={colors.text} />} /> : null}
-                        <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                        <Button appearance="subtle" tone="neutral" size="sm" iconOnly stopPropagation
                             accessibilityLabel={`Download ${file.filename}`} onPress={() => handleFileDownload(file.id, file.filename)}
                             icon={<Ionicons name="download" size={18} color={colors.text} />} />
-                        <Button appearance="subtle" tone="danger" size="small" iconOnly stopPropagation loading={deletingId === file.id}
+                        <Button appearance="subtle" tone="danger" size="sm" iconOnly stopPropagation loading={deletingId === file.id}
                             accessibilityLabel={`Delete ${file.filename}`} onPress={() => confirmFileDelete(file.id, file.filename)}
                             icon={<Ionicons name="trash" size={18} color={colors.error} />} />
                     </View>
@@ -1144,7 +1144,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     style={{ maxWidth: '80%' }}
                 >
                     <SegmentedControl type="radio" label={t('fileManagement.viewMode') || 'File type'}
-                        value={viewMode} onValueChange={setViewMode} size="small">
+                        value={viewMode} onValueChange={setViewMode} size="sm">
                         {(['all', 'photos', 'videos', 'documents', 'audio'] as const).map(mode => (
                             <SegmentedControlItem key={mode} value={mode} accessibilityLabel={mode}>
                                 <MaterialCommunityIcons
@@ -1154,7 +1154,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         ))}
                     </SegmentedControl>
                 </ScrollView>
-                <Button appearance="subtle" tone="neutral" size="small"
+                <Button appearance="subtle" tone="neutral" size="sm"
                     accessibilityRole="button"
                     accessibilityLabel={t('fileManagement.a11y.sortBy', {
                         field: sortBy,

package/src/ui/screens/HistoryViewScreen.tsx

@@ -109,7 +109,7 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
                         />
                     </SettingsListGroup>
                     <SettingsListGroup title={t('history.recent') || 'Recent History'}>
-                        {isLoading ? <Loading size="large" color={bloomTheme.colors.text} text={t('history.loading') || 'Loading history...'} />
+                        {isLoading ? <Loading size="lg" color={bloomTheme.colors.text} text={t('history.loading') || 'Loading history...'} />
                          : history.length === 0 ? <Text className="text-text-secondary text-center p-space-40">{t('history.empty') || 'No history yet'}</Text>
                          : history.map(item => (
                             <SettingsListItem

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -197,7 +197,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
                                             </Text>
                                         </View>
                                     ) : canRemove ? (
-                                        <Button appearance="plain" tone="neutral" size="small" iconOnly stopPropagation
+                                        <Button appearance="plain" tone="neutral" size="sm" iconOnly stopPropagation
                                             onPress={() => handleRemove(entry.code)} disabled={isBusy}
                                             accessibilityLabel={`${t('language.remove')} ${entry.name}`}
                                             icon={<Ionicons name="close-circle" size={REMOVE_ICON_SIZE} color={bloomTheme.colors.textSecondary} />} />

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -112,7 +112,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
     if (documentType) {
         return (
                 <Loading
-                    size="large"
+                    size="lg"
                     color={bloomTheme.colors.text}
                     text={t('legal.opening') || 'Opening document...'}
                 />

package/src/ui/screens/NotificationsScreen.tsx

@@ -90,8 +90,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.pushEnabled}
-                                    onValueChange={() => toggle('pushEnabled')}
+                                    checked={values.pushEnabled}
+                                    onCheckedChange={() => toggle('pushEnabled')}
                                     disabled={isSaving}
                                 />
                             }
@@ -111,8 +111,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.emailDigest}
-                                    onValueChange={() => toggle('emailDigest')}
+                                    checked={values.emailDigest}
+                                    onCheckedChange={() => toggle('emailDigest')}
                                     disabled={isSaving}
                                 />
                             }
@@ -139,8 +139,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.securityAlerts}
-                                    onValueChange={() => toggle('securityAlerts')}
+                                    checked={values.securityAlerts}
+                                    onCheckedChange={() => toggle('securityAlerts')}
                                     disabled={isSaving}
                                 />
                             }
@@ -168,8 +168,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.marketingEmails}
-                                    onValueChange={() => toggle('marketingEmails')}
+                                    checked={values.marketingEmails}
+                                    onCheckedChange={() => toggle('marketingEmails')}
                                     disabled={isSaving}
                                 />
                             }

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -197,7 +197,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                 <Button
                     appearance="solid" tone="accent"
                     onPress={handleClose}
-                    size="small"
+                    size="sm"
                     icon={<Ionicons name="close" size={16} />}
                     iconPosition="right"
                 >

package/src/ui/screens/PreferencesScreen.tsx

@@ -158,8 +158,8 @@ const PreferencesScreen: React.FC<BaseScreenProps> = ({
                             }
                             rightElement={
                                 <Switch
-                                    value={reduceMotionPref}
-                                    onValueChange={handleReduceMotionToggle}
+                                    checked={reduceMotionPref}
+                                    onCheckedChange={handleReduceMotionToggle}
                                     disabled={isSaving}
                                 />
                             }