@oxy.so/services 9.1.0 → 10.0.0

package/src/ui/components/FollowTargetButton.tsx

@@ -32,7 +32,7 @@
  */
 
 import { memo, useCallback, useMemo } from 'react';
-import type { FollowApplicationMode, FollowStatus } from '@oxy.so/contracts';
+import type { FollowStatus } from '@oxy.so/contracts';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native';
 import { FollowButton as BloomFollowButton } from '@oxy.so/bloom/media-header';
@@ -51,6 +51,13 @@ import {
 import { toast } from '@oxy.so/bloom/toast';
 import { useFollowTarget } from '../hooks/useFollowTarget';
 import { useFollowTargetStore } from '../stores/followTargetStore';
+import {
+  buildFollowMenuItems,
+  FOLLOW_ACTION_LEAVES_ACTIVE,
+  resolveFollowPrimaryAction,
+  type FollowDuration,
+  type FollowMenuItem,
+} from './followRules';
 
 /**
  * The small vocabulary of verbs the ecosystem actually uses. An application
@@ -82,12 +89,6 @@ const VERB_LABELS: Record<FollowVerb, FollowLabels> = {
   watch: { idle: 'Watch', active: 'Watching', pending: 'Requested', disabled: 'Off here' },
 };
 
-/** A timed-follow choice offered in the menu. */
-export interface FollowDuration {
-  label: string;
-  seconds: number;
-}
-
 const HOUR = 60 * 60;
 
 /**
@@ -101,118 +102,13 @@ const DEFAULT_DURATIONS: FollowDuration[] = [
   { label: 'A week', seconds: 7 * 24 * HOUR },
 ];
 
-/**
- * Whether an action leaves the target ACTIVE in this application.
- *
- * One table, read by both the primary button and the menu, because the same
- * action reached from two controls once reported differently — and a rule
- * living in two switch statements is a rule that drifts. `Record` rather than
- * a function with a default, so a new action is a compile error instead of a
- * silent `false`.
- */
-export const FOLLOW_ACTION_LEAVES_ACTIVE: Record<
-  'follow' | 'follow-timed' | 'enable-here' | 'disable-here' | 'unfollow',
-  boolean
-> = {
-  follow: true,
-  'follow-timed': true,
-  // Re-enabling here does not change the global follow — the user already had
-  // it — but it does change whether this application acts on it, which is what
-  // a mirror is asking about.
-  'enable-here': true,
-  'disable-here': false,
-  unfollow: false,
-};
-
-/** One line in the disclosure menu. */
-export interface FollowMenuItem {
-  key: string;
-  label: string;
-  /** What the component should call. Named so the table below stays pure. */
-  action:
-    | { type: 'follow-timed'; seconds: number; durationLabel: string }
-    | { type: 'enable-here' }
-    | { type: 'disable-here' }
-    | { type: 'unfollow' };
-}
-
-/**
- * Which choices exist, given the state.
- *
- * Pure and exported because this is the product decision, not a rendering
- * detail: a timed follow is only offered before following, turning it off here
- * is only offered while following, and NEITHER is offered before the server has
- * answered — every one of them addresses a relationship that does not exist
- * yet, so offering them mid-write would mean sending a guessed id.
- */
-/**
- * What the main button should do for the current state.
- *
- * Exported because the product rule is not obvious from the label alone: a
- * follow switched off here still reads as "following" globally, so the primary
- * press must re-enable here — not unfollow everywhere.
- */
-export function resolveFollowPrimaryAction(input: {
-  isFollowing: boolean;
-  applicationMode: FollowApplicationMode;
-}): 'follow' | 'unfollow' | 'enable-here' {
-  if (!input.isFollowing) return 'follow';
-  if (input.applicationMode === 'disabled') return 'enable-here';
-  return 'unfollow';
-}
-
-export function buildFollowMenuItems(input: {
-  following: boolean;
-  applicationMode: FollowApplicationMode;
-  hasRelationship: boolean;
-  isPending: boolean;
-  durations: FollowDuration[] | false;
-  idleVerb: string;
-  applicationName: string;
-}): FollowMenuItem[] {
-  const items: FollowMenuItem[] = [];
-
-  if (!input.following) {
-    if (input.durations === false) return items;
-    for (const d of input.durations) {
-      items.push({
-        key: `for-${d.seconds}`,
-        label: `${input.idleVerb} for ${d.label.toLowerCase()}`,
-        action: { type: 'follow-timed', seconds: d.seconds, durationLabel: d.label },
-      });
-    }
-    return items;
-  }
-
-  if (!input.hasRelationship || input.isPending) return items;
-
-  items.push(
-    input.applicationMode === 'disabled'
-      ? { key: 'enable-here', label: `Show in ${input.applicationName}`, action: { type: 'enable-here' } }
-      : {
-          key: 'disable-here',
-          label: `Don’t show in ${input.applicationName}`,
-          action: { type: 'disable-here' },
-        }
-  );
-  items.push({
-    // Named for what it does. "Unfollow" beside "don't show here" would read as
-    // the same action twice, and the user would pick the wrong one.
-    key: 'unfollow-everywhere',
-    label: 'Unfollow everywhere',
-    action: { type: 'unfollow' },
-  });
-
-  return items;
-}
-
 export interface FollowTargetButtonProps {
   /** The registered target's id. Registration is separate — see the SDK. */
   targetId: string;
   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;
   /**
@@ -256,7 +152,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
   targetId,
   verb = 'follow',
   labels,
-  size = 'medium',
+  size = 'md',
   style,
   disabled = false,
   showOptions = true,
@@ -413,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/__tests__/followTargetButton.test.ts

@@ -16,7 +16,7 @@ import {
   buildFollowMenuItems,
   FOLLOW_ACTION_LEAVES_ACTIVE,
   resolveFollowPrimaryAction,
-} from '../FollowTargetButton';
+} from '../followRules';
 import {
   isCompleteFollowStatus,
   followRecordToStatus,

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/followRules.ts

@@ -0,0 +1,121 @@
+/**
+ * The follow button's product rules, without the button.
+ *
+ * Pure: no React, no Bloom. `FollowTargetButton` renders them, and an
+ * application drawing its own affordance (a chip grid, a compact row) imports
+ * them from here — through `@oxy.so/services/ui/client` — without paying for the
+ * button's dropdown menu.
+ */
+
+import type { FollowApplicationMode } from '@oxy.so/contracts';
+
+/** A timed-follow choice offered in the menu. */
+export interface FollowDuration {
+  label: string;
+  seconds: number;
+}
+
+/**
+ * Whether an action leaves the target ACTIVE in this application.
+ *
+ * One table, read by both the primary button and the menu, because the same
+ * action reached from two controls once reported differently — and a rule
+ * living in two switch statements is a rule that drifts. `Record` rather than
+ * a function with a default, so a new action is a compile error instead of a
+ * silent `false`.
+ */
+export const FOLLOW_ACTION_LEAVES_ACTIVE: Record<
+  'follow' | 'follow-timed' | 'enable-here' | 'disable-here' | 'unfollow',
+  boolean
+> = {
+  follow: true,
+  'follow-timed': true,
+  // Re-enabling here does not change the global follow — the user already had
+  // it — but it does change whether this application acts on it, which is what
+  // a mirror is asking about.
+  'enable-here': true,
+  'disable-here': false,
+  unfollow: false,
+};
+
+/** One line in the disclosure menu. */
+export interface FollowMenuItem {
+  key: string;
+  label: string;
+  /** What the component should call. Named so the table below stays pure. */
+  action:
+    | { type: 'follow-timed'; seconds: number; durationLabel: string }
+    | { type: 'enable-here' }
+    | { type: 'disable-here' }
+    | { type: 'unfollow' };
+}
+
+/**
+ * Which choices exist, given the state.
+ *
+ * Pure and exported because this is the product decision, not a rendering
+ * detail: a timed follow is only offered before following, turning it off here
+ * is only offered while following, and NEITHER is offered before the server has
+ * answered — every one of them addresses a relationship that does not exist
+ * yet, so offering them mid-write would mean sending a guessed id.
+ */
+/**
+ * What the main button should do for the current state.
+ *
+ * Exported because the product rule is not obvious from the label alone: a
+ * follow switched off here still reads as "following" globally, so the primary
+ * press must re-enable here — not unfollow everywhere.
+ */
+export function resolveFollowPrimaryAction(input: {
+  isFollowing: boolean;
+  applicationMode: FollowApplicationMode;
+}): 'follow' | 'unfollow' | 'enable-here' {
+  if (!input.isFollowing) return 'follow';
+  if (input.applicationMode === 'disabled') return 'enable-here';
+  return 'unfollow';
+}
+
+export function buildFollowMenuItems(input: {
+  following: boolean;
+  applicationMode: FollowApplicationMode;
+  hasRelationship: boolean;
+  isPending: boolean;
+  durations: FollowDuration[] | false;
+  idleVerb: string;
+  applicationName: string;
+}): FollowMenuItem[] {
+  const items: FollowMenuItem[] = [];
+
+  if (!input.following) {
+    if (input.durations === false) return items;
+    for (const d of input.durations) {
+      items.push({
+        key: `for-${d.seconds}`,
+        label: `${input.idleVerb} for ${d.label.toLowerCase()}`,
+        action: { type: 'follow-timed', seconds: d.seconds, durationLabel: d.label },
+      });
+    }
+    return items;
+  }
+
+  if (!input.hasRelationship || input.isPending) return items;
+
+  items.push(
+    input.applicationMode === 'disabled'
+      ? { key: 'enable-here', label: `Show in ${input.applicationName}`, action: { type: 'enable-here' } }
+      : {
+          key: 'disable-here',
+          label: `Don’t show in ${input.applicationName}`,
+          action: { type: 'disable-here' },
+        }
+  );
+  items.push({
+    // Named for what it does. "Unfollow" beside "don't show here" would read as
+    // the same action twice, and the user would pick the wrong one.
+    key: 'unfollow-everywhere',
+    label: 'Unfollow everywhere',
+    action: { type: 'unfollow' },
+  });
+
+  return items;
+}

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