@oxy.so/services 3.0.0 → 4.0.0

package/src/ui/components/FollowButton.tsx

@@ -5,13 +5,11 @@ import type {
   TextStyle,
   StyleProp,
 } from 'react-native';
-import { ActivityIndicator } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import { toast } from '@oxy.so/bloom/toast';
-import { Button } from '@oxy.so/bloom/button';
+import { FollowButton as BloomFollowButton } from '@oxy.so/bloom/media-header';
 import { useFollow, useFollowForButton } from '../hooks/useFollow';
 import { useFollowStore } from '../stores/followStore';
-import { useTheme } from '@oxy.so/bloom/theme';
 import type { OxyServices, BulkFollowResult, BulkUnfollowResult } from '@oxy.so/core';
 import { useShallow } from 'zustand/react/shallow';
 
@@ -69,7 +67,6 @@ const FollowButtonInner = memo(function FollowButtonInner({
   showLoadingState = true,
   preventParentActions = true,
 }: SingleFollowButtonProps & { oxyServices: OxyServices }) {
-  const { colors } = useTheme();
 
   const {
     isFollowing,
@@ -111,22 +108,16 @@ const FollowButtonInner = memo(function FollowButtonInner({
   const showSpinner = showLoadingState && isBusy;
 
   return (
-    <Button
-      variant={showFollowing ? 'secondary' : 'primary'}
+    <BloomFollowButton
+      following={showFollowing}
+      onFollowChange={() => { void handlePress(); }}
       size={size}
-      onPress={() => { void handlePress(); }}
+      loading={showSpinner}
       disabled={disabled || isBusy}
       style={style}
       textStyle={textStyle}
-      icon={showSpinner ? (
-        <ActivityIndicator
-          size="small"
-          color={showFollowing ? colors.text : colors.primaryForeground}
-        />
-      ) : undefined}
-    >
-      {showSpinner ? undefined : (isKnown ? (isFollowing ? 'Following' : 'Follow') : undefined)}
-    </Button>
+      label={isKnown || showSpinner ? 'Follow' : ''}
+    />
   );
 });
 
@@ -145,7 +136,6 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
   showLoadingState = true,
   preventParentActions = true,
 }: MultiFollowButtonProps) {
-  const { colors } = useTheme();
   const follow = useFollow(userIds);
   const followAllUsers = 'followAllUsers' in follow ? follow.followAllUsers : undefined;
   const unfollowAllUsers = 'unfollowAllUsers' in follow ? follow.unfollowAllUsers : undefined;
@@ -238,22 +228,17 @@ const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
   const showSpinner = showLoadingState && isLoading;
 
   return (
-    <Button
-      variant={allFollowing ? 'secondary' : 'primary'}
+    <BloomFollowButton
+      following={allFollowing}
+      onFollowChange={() => { void handlePress(); }}
+      label={followAllLabel}
+      followingLabel={followedAllLabel}
       size={size}
-      onPress={() => { void handlePress(); }}
+      loading={showSpinner}
       disabled={disabled || isLoading}
       style={style}
       textStyle={textStyle}
-      icon={showSpinner ? (
-        <ActivityIndicator
-          size="small"
-          color={allFollowing ? colors.text : colors.primaryForeground}
-        />
-      ) : undefined}
-    >
-      {showSpinner ? undefined : (allFollowing ? followedAllLabel : followAllLabel)}
-    </Button>
+    />
   );
 });
 

package/src/ui/components/FollowTargetButton.tsx

@@ -35,8 +35,13 @@ import { memo, useCallback, useMemo } from 'react';
 import type { FollowApplicationMode, 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';
 import { Button } from '@oxy.so/bloom/button';
-import { RiArrowDownSLine as ChevronDown } from '@oxy.so/bloom/icons';
+// Per glyph, never `@oxy.so/bloom/icons`. That barrel re-exports all 461 Remix
+// glyphs and Metro does not tree-shake, so one import of it here re-ships every
+// glyph — 313,123 B, measured — to every app in this package's graph, and no
+// consumer can opt out of what a dependency asks for.
+import { RiArrowDownSLine as ChevronDown } from '@oxy.so/bloom/icons/RiArrowDownSLine';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -376,18 +381,15 @@ export const FollowTargetButton = memo(function FollowTargetButton({
   );
 
   const primary = (
-    <Button
-      variant={isFollowing ? 'secondary' : 'primary'}
+    <BloomFollowButton
+      following={isFollowing}
+      label={isFollowing ? text.idle : label}
+      followingLabel={label}
       size={size}
-      // Unknown is not "not following": the button stays inert until the first
-      // read settles rather than inviting a follow that may already exist.
       disabled={disabled || isUnknown}
-      loading={isPending}
-      onPress={() => void handlePrimary()}
-      accessibilityLabel={label}
-    >
-      {label}
-    </Button>
+      loading={isPending || isUnknown}
+      onFollowChange={() => void handlePrimary()}
+    />
   );
 
   if (!showOptions || menuItems.length === 0) {
@@ -406,7 +408,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
         */}
         <DropdownMenuTrigger asChild disabled={disabled || isUnknown}>
           <Button
-            variant="secondary"
+            appearance="subtle" tone="support"
             size={size === 'large' ? 'large' : 'small'}
             icon={<ChevronDown width={16} />}
             disabled={disabled || isUnknown}

package/src/ui/components/OxyAuthPrompt.tsx

@@ -1,11 +1,6 @@
 import type React from 'react';
-import {
-    StyleSheet,
-    Text,
-    View,
-    type StyleProp,
-    type ViewStyle,
-} from 'react-native';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { useShallow } from 'zustand/react/shallow';
 import { useAuthStore } from '../stores/authStore';

package/src/ui/components/OxyConsentScreen.tsx

@@ -429,7 +429,7 @@ export function OxyConsentScreen({
       <View style={styles.actions}>
         <Button
           testID="consent-allow"
-          variant="primary"
+          appearance="solid" tone="accent"
           onPress={handleAllow}
           disabled={busy}
           loading={busy}
@@ -439,7 +439,7 @@ export function OxyConsentScreen({
         </Button>
         <Button
           testID="consent-deny"
-          variant="ghost"
+          appearance="plain" tone="neutral"
           onPress={onDeny}
           disabled={busy}
           style={styles.actionButton}

package/src/ui/components/OxySignInButton.tsx

@@ -65,7 +65,7 @@ export interface OxySignInButtonProps {
      */
     action?: OxySignInButtonAction;
 
-    /** `medium` (36 tall, 300 wide) or `small` (32 × 250). @default 'medium' */
+    /** `md` (36 tall, 300 wide) or `sm` (32 × 250). @default 'md' */
     size?: SocialButtonSize;
 
     /** Fill the container's width instead of the fixed 300 / 250. */
@@ -177,7 +177,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     variant = 'default',
     appearance,
     action = 'signIn',
-    size = 'medium',
+    size = 'md',
     fullWidth = false,
     iconOnly = false,
     onPress,

package/src/ui/components/OxySignInRequestSurface.tsx

@@ -150,7 +150,7 @@ export const OxySignInRequestSurface: React.FC<OxySignInRequestSurfaceProps> = (
     return (
       <View style={styles.centeredBlock}>
         {onRetry ? (
-          <Button variant="primary" onPress={onRetry} style={styles.primaryButton}>
+          <Button appearance="solid" tone="accent" onPress={onRetry} style={styles.primaryButton}>
             {t('common.actions.tryAgain')}
           </Button>
         ) : null}

package/src/ui/components/ProfileButton.tsx

@@ -1,13 +1,12 @@
 import type React from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import {
-    StyleSheet,
-    Platform,
     type StyleProp,
     type ViewStyle,
 } from 'react-native';
-import { View, Pressable } from 'react-native-css/components';
-import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
+import { View } from 'react-native-css/components';
+import * as Icons from '@oxy.so/bloom/icons';
+import { Button } from '@oxy.so/bloom/button';
 import { Avatar } from '@oxy.so/bloom/avatar';
 import * as Skeleton from '@oxy.so/bloom/skeleton';
 import { Text } from '@oxy.so/bloom/typography';
@@ -19,35 +18,6 @@ import { useI18n } from '../hooks/useI18n';
 import { registerAccountDialogConsumerHooks } from '../navigation/accountDialogManager';
 import type { AccountDialogMenuItem } from '../navigation/accountDialogManager';
 
-const isWeb = Platform.OS === 'web';
-
-/**
- * Web-only Bluesky-style hover animation timings, mirrored from
- * `social-app/src/view/shell/desktop/LeftNav.tsx`. The row background and the
- * name/handle/chevron opacity cross-fade quickly; the avatar shrink+slide is
- * slower and more deliberate. A short delay on the LEAVE transition keeps the
- * row from flickering when the pointer crosses a child boundary.
- */
-const BG_TRANSITION_MS = 150;
-const AVATAR_TRANSITION_MS = 250;
-const OPACITY_TRANSITION_MS = 150;
-const LEAVE_DELAY_MS = 50;
-
-/** Shrunk-avatar scale on hover, matching Bluesky's `scale: 2/3`. */
-const ACTIVE_AVATAR_SCALE = 2 / 3;
-
-/**
- * Reads the OS "reduce motion" preference on web. Guards `window`/`matchMedia`
- * so it is safe during SSR and on native (where it is never called). When
- * reduced motion is on, the avatar transform snaps instead of transitioning.
- */
-const prefersReducedMotion = (): boolean => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-        return false;
-    }
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-};
-
 export interface ProfileButtonProps {
     /**
      * Expanded row (avatar + name + handle + chevron) when `true` (default), or a
@@ -82,26 +52,7 @@ export interface ProfileButtonProps {
     style?: StyleProp<ViewStyle>;
 }
 
-/**
- * Self-contained sidebar account trigger, modeled on Bluesky's ProfileCard and
- * the Oxy inbox's `MailboxDrawer` footer. Pressing it opens the unified
- * {@link OxyAccountDialogScreen} — the single account switcher + sign-in surface — via
- * `useOxy().openAccountDialog`.
- *
- * Three auth states from {@link useAuth}:
- *  - **Undetermined** (`!isAuthResolved || isPrivateApiPending`): a neutral
- *    avatar-sized skeleton circle, no press.
- *  - **Signed in**: a pressable row — Bloom `Avatar` + display name + `@handle`
- *    + a chevron. Press opens the dialog on its `accounts` view.
- *  - **Signed out**: a "Sign in" row that calls `useAuth().signIn()` (which opens
- *    the dialog on its `signin` view).
- *
- * Styling uses react-native `StyleSheet` + the Bloom theme (via `useTheme`) so
- * the layout renders identically in EVERY consumer — including apps that do not
- * use NativeWind (e.g. the accounts app). Only the web hover animation keeps
- * dynamic inline `style` (the CSS transition/transform values), which is what
- * the `react-native-web-style.d.ts` augmentation exists for.
- */
+/** Account business binding over Bloom's shared Button and Avatar. */
 const ProfileButton: React.FC<ProfileButtonProps> = ({
     expanded = true,
     avatarSize,
@@ -123,11 +74,6 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     const { colors } = useTheme();
     const { t, locale } = useI18n();
 
-    // Web-only hover/focus tracking for the Bluesky-style reveal animation.
-    // Native has no hover, so these stay false and the row renders statically.
-    const [hovered, setHovered] = useState(false);
-    const [focused, setFocused] = useState(false);
-
     const resolvedAvatarSize = avatarSize ?? (expanded ? 40 : 32);
 
     const openDialog = useCallback(() => {
@@ -165,248 +111,35 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         );
     }
 
-    // ── Signed out: "Sign in" row. ──────────────────────────────────────────
-    if (!isAuthenticated || !user) {
-        const signInLabel = t('common.actions.signIn') || 'Sign in';
-        return (
-            <Pressable
-                className={className}
-                style={[styles.row, expanded && styles.rowExpanded, style]}
-                onPress={() => { void signIn(); }}
-                accessibilityRole="button"
-                accessibilityLabel={signInLabel}
-            >
-                <View
-                    style={[
-                        styles.avatarBadge,
-                        {
-                            width: resolvedAvatarSize,
-                            height: resolvedAvatarSize,
-                            backgroundColor: colors.backgroundSecondary,
-                        },
-                    ]}
-                >
-                    <MaterialCommunityIcons
-                        name="login"
-                        size={Math.round(resolvedAvatarSize * 0.5)}
-                        color={colors.icon}
-                    />
-                </View>
-                {expanded ? (
-                    <Text
-                        style={[styles.signInLabel, { color: colors.text }]}
-                        numberOfLines={1}
-                    >
-                        {signInLabel}
-                    </Text>
-                ) : null}
-            </Pressable>
-        );
-    }
-
-    // ── Signed in: avatar + identity + chevron. ─────────────────────────────
-    const displayName =
-        user?.name?.displayName ??
-        getNormalizedUserHandle(user) ??
-        getAccountDisplayName(null, locale);
-    const handle = getAccountFallbackHandle(user);
-    const handleLine = handle ? `@${handle}` : null;
-
-    const avatarNode = (
-        <Avatar
-            source={avatarUrl}
-            variant="thumb"
-            name={displayName}
-            size={resolvedAvatarSize}
-        />
-    );
-
-    // `active` combines hover and keyboard focus — exactly like Bluesky's
-    // `state.hovered || state.focused`. Only web ever sets these, so on native
-    // the row renders statically.
-    const active = hovered || focused;
-    const accountLabel = t('accountSwitcher.switchWhileSignedInAs', { name: displayName });
-
-    // Web-only pointer/focus handlers. RN-Web forwards `onHoverIn`/`onHoverOut`
-    // to the underlying element; native Pressable ignores them harmlessly, but
-    // we only attach them on web to keep the native path pristine.
-    const webInteractionProps = isWeb
-        ? {
-            onHoverIn: () => setHovered(true),
-            onHoverOut: () => setHovered(false),
-            onFocus: () => setFocused(true),
-            onBlur: () => setFocused(false),
-        }
-        : undefined;
-
-    if (!expanded) {
-        // Collapsed: avatar-only. On web, hovering just fades a subtle round
-        // background behind the avatar — no shrink, no text.
-        const collapsedBgStyle: ViewStyle | undefined = isWeb
-            ? {
-                backgroundColor: active ? colors.backgroundSecondary : 'transparent',
-                transitionProperty: 'background-color',
-                transitionDuration: `${BG_TRANSITION_MS}ms`,
-                transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
-            }
-            : undefined;
-        return (
-            <View className={className} style={style}>
-                <Pressable
-                    style={[styles.collapsedTrigger, collapsedBgStyle]}
-                    onPress={openDialog}
-                    accessibilityRole="button"
-                    accessibilityLabel={accountLabel}
-                    {...webInteractionProps}
-                >
-                    {avatarNode}
-                </Pressable>
-            </View>
-        );
-    }
-
-    // ── Expanded row animation ──────────────────────────────────────────────
-    // On native everything is statically visible (no hover exists). On web we
-    // reproduce Bluesky's reveal: the row fills with a subtle contrast bg, the
-    // avatar shrinks + slides left, and the name/handle/actions fade in from
-    // behind it. Keeping the identity hidden while inactive is what makes the
-    // negative margin intentional instead of an overlap.
-    const reducedMotion = isWeb && prefersReducedMotion();
-
-    // Slide the shrunk avatar left so its visual left edge stays put as it
-    // contracts. The avatar loses `size * (1 - scale)` of width; half of that
-    // (the left half, since scale is centered) is the offset, plus the row's
-    // left padding (8px) so it hugs the row edge like Bluesky's.
-    const activeAvatarTranslateX =
-        -(resolvedAvatarSize * (1 - ACTIVE_AVATAR_SCALE)) / 2 - 8;
-
-    const rowStyle: StyleProp<ViewStyle> = isWeb
-        ? {
-            backgroundColor: active ? colors.backgroundSecondary : 'transparent',
-            transitionProperty: 'background-color',
-            transitionDuration: `${BG_TRANSITION_MS}ms`,
-            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
-        }
-        : undefined;
-
-    const avatarWrapperStyle: ViewStyle | undefined = isWeb
-        ? {
-            zIndex: 10,
-            ...(reducedMotion
-                ? {}
-                : {
-                    transitionProperty: 'transform',
-                    transitionDuration: `${AVATAR_TRANSITION_MS}ms`,
-                    transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
-                }),
-            transform: active
-                ? [{ scale: ACTIVE_AVATAR_SCALE }, { translateX: activeAvatarTranslateX }]
-                : [{ scale: 1 }, { translateX: 0 }],
-        }
-        : undefined;
-
-    const identityStyle: ViewStyle | undefined = isWeb
-        ? {
-            marginLeft: -resolvedAvatarSize / 2,
-            opacity: active ? 1 : 0,
-            transitionProperty: 'opacity',
-            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
-            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
-        }
-        : undefined;
-
-    const actionStyle: ViewStyle | undefined = isWeb
-        ? {
-            opacity: active ? 1 : 0,
-            transitionProperty: 'opacity',
-            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
-            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
-        }
-        : undefined;
+    const signedIn = isAuthenticated && Boolean(user);
+    const displayName = signedIn
+        ? user?.name?.displayName ?? getNormalizedUserHandle(user) ?? getAccountDisplayName(null, locale)
+        : t('common.actions.signIn') || 'Sign in';
+    const handle = signedIn ? getAccountFallbackHandle(user) : undefined;
+    const label = signedIn ? t('accountSwitcher.switchWhileSignedInAs', { name: displayName }) : displayName;
 
     return (
-        <View className={className} style={[styles.fullWidth, style]}>
-            <Pressable
-                style={[styles.row, styles.rowExpanded, rowStyle]}
-                onPress={openDialog}
-                accessibilityRole="button"
-                accessibilityLabel={accountLabel}
-                {...webInteractionProps}
-            >
-                <View style={avatarWrapperStyle}>{avatarNode}</View>
-                <View style={[styles.identity, identityStyle]}>
-                    <Text
-                        style={[styles.displayName, { color: colors.text }]}
-                        numberOfLines={1}
-                    >
-                        {displayName}
-                    </Text>
-                    {handleLine ? (
-                        <Text
-                            style={[styles.handle, { color: colors.textSecondary }]}
-                            numberOfLines={1}
-                        >
-                            {handleLine}
-                        </Text>
-                    ) : null}
-                </View>
-                <View style={actionStyle}>
-                    <MaterialCommunityIcons
-                        name="dots-horizontal"
-                        size={18}
-                        color={colors.textSecondary}
-                    />
+        <Button
+            appearance="plain" tone="neutral"
+            className={className}
+            accessibilityLabel={label}
+            onPress={signedIn ? openDialog : () => { void signIn(); }}
+            style={[{ height: resolvedAvatarSize + 16, borderRadius: 9999, paddingLeft: 8, paddingRight: 8, ...(expanded ? { width: '100%' } : { width: resolvedAvatarSize + 16 }) }, style]}
+            trailing={
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, ...(expanded ? { flex: 1 } : {}) }}>
+                    {signedIn ? <Avatar source={avatarUrl} variant="thumb" name={displayName} size={resolvedAvatarSize} />
+                        : <Icons.RiLoginBoxLine width={resolvedAvatarSize / 2} height={resolvedAvatarSize / 2} color={colors.icon} />}
+                    {expanded ? <>
+                        <View style={{ flex: 1, minWidth: 0 }}>
+                            <Text variant="body-semibold" numberOfLines={1}>{displayName}</Text>
+                            {handle ? <Text variant="caption-1-regular" numberOfLines={1} style={{ color: colors.textSecondary }}>@{handle}</Text> : null}
+                        </View>
+                        {signedIn ? <Icons.RiMoreLine width={18} height={18} color={colors.textSecondary} /> : null}
+                    </> : null}
                 </View>
-            </Pressable>
-        </View>
+            }
+        />
     );
 };
 
-const styles = StyleSheet.create({
-    fullWidth: {
-        width: '100%',
-    },
-    // Shared trigger row (`flex-row items-center gap-3 rounded-full px-2 py-2`).
-    row: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-        borderRadius: 9999,
-        paddingHorizontal: 8,
-        paddingVertical: 8,
-    },
-    // `w-full` on the expanded row + its signed-out variant.
-    rowExpanded: {
-        width: '100%',
-    },
-    // Signed-out login badge (`items-center justify-center rounded-full`).
-    avatarBadge: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 9999,
-    },
-    // Signed-out label (`flex-1 font-semibold`).
-    signInLabel: {
-        flex: 1,
-        fontWeight: '600',
-    },
-    // Collapsed avatar-only trigger (`rounded-full`).
-    collapsedTrigger: {
-        borderRadius: 9999,
-    },
-    // Identity block (`min-w-0 flex-1`).
-    identity: {
-        flex: 1,
-        minWidth: 0,
-    },
-    // Display name (`font-bold`).
-    displayName: {
-        fontWeight: '700',
-    },
-    // Handle line (`text-xs`).
-    handle: {
-        fontSize: 12,
-    },
-});
-
 export default ProfileButton;

package/src/ui/components/ProfileSummaryCard.tsx

@@ -37,7 +37,6 @@ export interface ProfileSummaryCardProps {
 }
 
 const cardStyle: ViewStyle = {
-    borderRadius: 20,
     marginBottom: 16,
 };
 
@@ -76,7 +75,7 @@ const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
     );
 
     return (
-        <Card variant="filled" style={cardStyle}>
+        <Card appearance="subtle" radius="radius-20" style={cardStyle}>
             <View className="items-center px-space-20 py-space-24">
                 {avatarNode}
                 <H4 className="text-text" numberOfLines={1}>

package/src/ui/components/SurfaceHeaderAction.tsx

@@ -1,8 +1,5 @@
 import type React from 'react';
-import { ActivityIndicator, StyleSheet } from 'react-native';
-import { useTheme } from '@oxy.so/bloom/theme';
-import { PressableScale } from '@oxy.so/bloom/pressable-scale';
-import { Text } from '@oxy.so/bloom/typography';
+import { Button } from '@oxy.so/bloom/button';
 
 export interface SurfaceHeaderActionProps {
   /** Button label (e.g. a translated "Save"). */
@@ -13,48 +10,9 @@ export interface SurfaceHeaderActionProps {
   disabled?: boolean;
 }
 
-/**
- * A filled pill action for a surface's nav-header right slot — the canonical
- * "Save" affordance. Pass a memoized instance to `useSurfaceHeader({ right })`
- * so the header does not thrash between renders.
- */
-export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({
-  label,
-  onPress,
-  loading,
-  disabled,
-}) => {
-  const { colors } = useTheme();
-  const isDisabled = disabled || loading;
-  return (
-    <PressableScale
-      onPress={onPress}
-      disabled={isDisabled}
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      style={[styles.button, { backgroundColor: colors.primary, opacity: isDisabled ? 0.5 : 1 }]}
-    >
-      {loading ? (
-        <ActivityIndicator size="small" color={colors.primaryForeground} />
-      ) : (
-        <Text style={[styles.label, { color: colors.primaryForeground }]}>{label}</Text>
-      )}
-    </PressableScale>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    height: 36,
-    minWidth: 64,
-    paddingHorizontal: 14,
-    borderRadius: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '600',
-    letterSpacing: -0.2,
-  },
-});
+/** 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}>
+    {label}
+  </Button>
+);

package/src/ui/components/SurfaceScreen.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
-import { ActivityIndicator, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { ActivityIndicator, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { useStore } from 'zustand';
 import { useTheme } from '@oxy.so/bloom/theme';
 import {

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

@@ -362,7 +362,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
             variant, `small` the compact height; it hugs its label instead of
             spanning the surface. */}
         <Button
-          variant="secondary"
+          appearance="subtle" tone="neutral"
           size="small"
           onPress={handlers.onManage}
           accessibilityLabel={manageLabel}