@oxy.so/services 3.1.0 → 4.0.1

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,13 @@
 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 { RiLoginBoxLine } from '@oxy.so/bloom/icons/RiLoginBoxLine';
+import { RiMoreLine } from '@oxy.so/bloom/icons/RiMoreLine';
+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 +19,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 +53,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 +75,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 +112,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} />
+                        : <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 ? <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}

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

@@ -107,7 +107,7 @@ const SignInEntryView: React.FC<SignInEntryViewProps> = ({
       ) : null}
 
       <Button
-        variant="primary"
+        appearance="solid" tone="accent"
         onPress={web ? alternatives.onSignInWithPasskey : onContinueWithOxy}
         style={styles.primaryButton}
         testID="continue-with-oxy"

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

@@ -49,7 +49,7 @@ const SignUpView: React.FC<SignUpViewProps> = ({
     return (
       <View style={styles.centeredBlock}>
         <Button
-          variant="primary"
+          appearance="solid" tone="accent"
           onPress={commonsInstalled ? onCreateIdentityInCommons : onGetCommons}
           style={styles.primaryButton}
         >
@@ -65,7 +65,7 @@ const SignUpView: React.FC<SignUpViewProps> = ({
       <Text style={[styles.mutedText, { color: theme.colors.textSecondary }]}>
         {t('accountSwitcher.passkeyHint')}
       </Text>
-      <Button variant="primary" onPress={onOpenHub} style={styles.primaryButton} testID="signup-open-identity">
+      <Button appearance="solid" tone="accent" onPress={onOpenHub} style={styles.primaryButton} testID="signup-open-identity">
         {t('signup.createAccount')}
       </Button>
       <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onBackToSignIn} />

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

@@ -81,7 +81,7 @@ export const GetCommonsPrompt: React.FC<{
       {t('accountSwitcher.commonsNotInstalled')}
     </Text>
     <Button
-      variant="primary"
+      appearance="solid" tone="accent"
       onPress={onGetCommons}
       style={styles.primaryButton}
       testID="get-commons-button"

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -1,5 +1,7 @@
 import type React from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { Card } from '@oxy.so/bloom/card';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { Button } from '@oxy.so/bloom/button';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -35,7 +37,7 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
 
     return (
         <View>
-            <View className="bg-secondary border-border p-[18px] rounded-[14px] border items-center">
+            <Card appearance="subtle" className="p-[18px] items-center">
                 <View className="mb-space-16">
                     <Ionicons
                         name={getFileIcon(file.contentType)}
@@ -87,11 +89,11 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
                         </View>
                     )}
                 </View>
-            </View>
+            </Card>
 
             <View style={{ gap: 8 }}>
                 <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     onPress={() => {
                         surface.dismiss();
                         onDownload(file.id, file.filename);
@@ -101,7 +103,7 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
                 </Button>
                 {isOwner ? (
                     <Button
-                        variant="destructive"
+                        appearance="solid" tone="danger"
                         onPress={() => {
                             surface.dismiss();
                             onDelete(file.id, file.filename);
@@ -110,7 +112,7 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
                         {t('common.actions.delete')}
                     </Button>
                 ) : null}
-                <Button variant="secondary" onPress={() => surface.dismiss()}>
+                <Button appearance="subtle" tone="neutral" onPress={() => surface.dismiss()}>
                     {t('common.cancel')}
                 </Button>
             </View>