@oxy.so/services 11.2.0-oxy-one.2 → 11.2.0-oxy-one.4

package/src/ui/components/OxySignInRequestSurface.tsx

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

package/src/ui/components/PeableButton.tsx

@@ -6,23 +6,23 @@ import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewa
 import { LogoIcon } from './logo/LogoIcon';
 
 export interface PeableButtonProps {
-    style?: StyleProp<ViewStyle>;
-    textStyle?: StyleProp<TextStyle>;
-    text?: string;
-    disabled?: boolean;
-    amount: number | string;
-    currency?: string;
-    paymentItems?: PaymentItem[];
-    description?: string;
-    onPaymentResult?: (result: PaymentGatewayResult) => void;
-    /**
-     * Button background color. If not provided, uses variant ('white' or 'black').
-     */
-    color?: string;
-    /**
-     * Button color variant: 'white' (default) or 'black'. Ignored if color is set.
-     */
-    variant?: 'white' | 'black';
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  text?: string;
+  disabled?: boolean;
+  amount: number | string;
+  currency?: string;
+  paymentItems?: PaymentItem[];
+  description?: string;
+  onPaymentResult?: (result: PaymentGatewayResult) => void;
+  /**
+   * Button background color. If not provided, uses variant ('white' or 'black').
+   */
+  color?: string;
+  /**
+   * Button color variant: 'white' (default) or 'black'. Ignored if color is set.
+   */
+  variant?: 'white' | 'black';
 }
 
 /**
@@ -30,44 +30,52 @@ export interface PeableButtonProps {
  * - Only black or white by default, but can be customized with the color prop.
  */
 const PeableButton: React.FC<PeableButtonProps> = ({
-    style,
-    textStyle,
-    text = 'Pay',
-    disabled = false,
-    color,
-    variant = 'white',
+  style,
+  textStyle,
+  text = 'Pay',
+  disabled = false,
+  color,
+  variant = 'white',
 }) => {
-    const theme = useTheme();
-    const handlePress = () => {
-        console.warn('PeableButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.');
-    };
-    // Determine background and text color
-    const backgroundColor = color || (variant === 'black' ? theme.colors.text : theme.colors.background);
-    const textColor = variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
-
-    return (
-        <InverseButton
-            onPress={handlePress}
-            disabled={disabled}
-            style={[{ backgroundColor, borderColor: textColor, borderWidth: 1 }, style]}
-            textStyle={[{ color: textColor, fontWeight: '700' }, textStyle]}
-            icon={<LogoIcon height={16} color={textColor} style={{ marginRight: 6 }} />}
-        >
-            {text}
-        </InverseButton>
+  const theme = useTheme();
+  const handlePress = () => {
+    console.warn(
+      'PeableButton: The bottom sheet payment flow has been removed. Provide a custom onPress handler.',
     );
+  };
+  // Determine background and text color
+  const backgroundColor =
+    color || (variant === 'black' ? theme.colors.text : theme.colors.background);
+  const textColor =
+    variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
+
+  return (
+    <InverseButton
+      onPress={handlePress}
+      disabled={disabled}
+      style={[{ backgroundColor, borderColor: textColor, borderWidth: 1 }, style]}
+      textStyle={[{ color: textColor, fontWeight: '700' }, textStyle]}
+      icon={<LogoIcon height={16} color={textColor} style={{ marginRight: 6 }} />}
+    >
+      {text}
+    </InverseButton>
+  );
 };
 
 // Helper to determine if a color is dark (simple luminance check)
 function isColorDark(hex: string) {
-    let c = hex.replace('#', '');
-    if (c.length === 3) c = c.split('').map(x => x + x).join('');
-    if (c.length !== 6) return false;
-    const r = Number.parseInt(c.substr(0, 2), 16);
-    const g = Number.parseInt(c.substr(2, 2), 16);
-    const b = Number.parseInt(c.substr(4, 2), 16);
-    // Perceived luminance
-    return (0.299 * r + 0.587 * g + 0.114 * b) < 150;
+  let c = hex.replace('#', '');
+  if (c.length === 3)
+    c = c
+      .split('')
+      .map((x) => x + x)
+      .join('');
+  if (c.length !== 6) return false;
+  const r = Number.parseInt(c.substr(0, 2), 16);
+  const g = Number.parseInt(c.substr(2, 2), 16);
+  const b = Number.parseInt(c.substr(4, 2), 16);
+  // Perceived luminance
+  return 0.299 * r + 0.587 * g + 0.114 * b < 150;
 }
 
 export default PeableButton;

package/src/ui/components/ProfileButton.tsx

@@ -9,7 +9,11 @@ import { Avatar } from '@oxy.so/bloom/avatar';
 import * as Skeleton from '@oxy.so/bloom/skeleton';
 import { Text } from '@oxy.so/bloom/typography';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { getAccountDisplayName, getAccountFallbackHandle, getNormalizedUserHandle } from '@oxy.so/core';
+import {
+  getAccountDisplayName,
+  getAccountFallbackHandle,
+  getNormalizedUserHandle,
+} from '@oxy.so/core';
 import { useAuth } from '../hooks/useAuth';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
@@ -17,127 +21,172 @@ import { registerAccountDialogConsumerHooks } from '../navigation/accountDialogM
 import type { AccountDialogMenuItem } from '../navigation/accountDialogManager';
 
 export interface ProfileButtonProps {
-    /**
-     * Expanded row (avatar + name + handle + chevron) when `true` (default), or a
-     * bare avatar-only trigger when `false` (collapsed sidebar).
-     */
-    expanded?: boolean;
-    /**
-     * Avatar diameter in px. Defaults to 40 when expanded, 32 when collapsed.
-     */
-    avatarSize?: number;
-    /** Navigate to the "Manage account" surface (settings). */
-    onNavigateManage?: () => void;
-    /** Start the add-account / sign-in flow for an additional account. */
-    onAddAccount?: () => void;
-    /** Optional: navigate to the signed-in user's own profile. */
-    onNavigateProfile?: () => void;
-    /** App-owned actions rendered in the shared account menu. */
-    menuItems?: readonly AccountDialogMenuItem[];
-    /**
-     * Retained for source compatibility. The trigger now opens the unified
-     * `OxyAccountDialogScreen` (a centered / bottom-sheet modal) rather than an
-     * anchored popover, so popover placement no longer applies.
-     */
-    placement?: 'up' | 'down' | 'auto';
-    /**
-     * Extra className applied to the outer trigger. Kept for NativeWind consumers
-     * that layer utility classes on top; the component's own layout is driven by
-     * `StyleSheet` so it renders correctly with or without NativeWind.
-     */
-    className?: string;
-    /** Extra style applied to the outer trigger. */
-    style?: StyleProp<ViewStyle>;
+  /**
+   * Expanded row (avatar + name + handle + chevron) when `true` (default), or a
+   * bare avatar-only trigger when `false` (collapsed sidebar).
+   */
+  expanded?: boolean;
+  /**
+   * Avatar diameter in px. Defaults to 40 when expanded, 32 when collapsed.
+   */
+  avatarSize?: number;
+  /** Navigate to the "Manage account" surface (settings). */
+  onNavigateManage?: () => void;
+  /** Start the add-account / sign-in flow for an additional account. */
+  onAddAccount?: () => void;
+  /** Optional: navigate to the signed-in user's own profile. */
+  onNavigateProfile?: () => void;
+  /** App-owned actions rendered in the shared account menu. */
+  menuItems?: readonly AccountDialogMenuItem[];
+  /**
+   * Retained for source compatibility. The trigger now opens the unified
+   * `OxyAccountDialogScreen` (a centered / bottom-sheet modal) rather than an
+   * anchored popover, so popover placement no longer applies.
+   */
+  placement?: 'up' | 'down' | 'auto';
+  /**
+   * Extra className applied to the outer trigger. Kept for NativeWind consumers
+   * that layer utility classes on top; the component's own layout is driven by
+   * `StyleSheet` so it renders correctly with or without NativeWind.
+   */
+  className?: string;
+  /** Extra style applied to the outer trigger. */
+  style?: StyleProp<ViewStyle>;
 }
 
 /** Account business binding over Bloom's shared Button and Avatar. */
 const ProfileButton: React.FC<ProfileButtonProps> = ({
-    expanded = true,
-    avatarSize,
-    onNavigateManage,
-    onAddAccount,
-    onNavigateProfile,
-    menuItems,
-    className,
-    style,
+  expanded = true,
+  avatarSize,
+  onNavigateManage,
+  onAddAccount,
+  onNavigateProfile,
+  menuItems,
+  className,
+  style,
 }) => {
-    const {
-        user,
-        isAuthenticated,
-        isAuthResolved,
-        isPrivateApiPending,
-        signIn,
-    } = useAuth();
-    const { openAccountDialog, oxyServices } = useOxy();
-    const { colors } = useTheme();
-    const { t, locale } = useI18n();
+  const { user, isAuthenticated, isAuthResolved, isPrivateApiPending, signIn } = useAuth();
+  const { openAccountDialog, oxyServices } = useOxy();
+  const { colors } = useTheme();
+  const { t, locale } = useI18n();
 
-    const resolvedAvatarSize = avatarSize ?? (expanded ? 40 : 32);
+  const resolvedAvatarSize = avatarSize ?? (expanded ? 40 : 32);
 
-    const openDialog = useCallback(() => {
-        openAccountDialog('accounts');
-    }, [openAccountDialog]);
+  const openDialog = useCallback(() => {
+    openAccountDialog('accounts');
+  }, [openAccountDialog]);
 
-    useEffect(() => {
-        if (!onNavigateManage && !onAddAccount && !onNavigateProfile && !menuItems?.length) {
-            return undefined;
-        }
-        return registerAccountDialogConsumerHooks({
-            onNavigateManage,
-            onAddAccount,
-            onNavigateProfile,
-            menuItems,
-        });
-    }, [onNavigateManage, onAddAccount, onNavigateProfile, menuItems]);
-
-    const avatarUrl = useMemo(
-        () => (user?.avatar ? oxyServices.assets.publicUrl(user.avatar, 'thumb') : undefined),
-        [user?.avatar, oxyServices],
-    );
-
-    // ── Undetermined: skeleton circle, no interaction. ──────────────────────
-    if (!isAuthResolved || isPrivateApiPending) {
-        return (
-            <View
-                className={className}
-                style={style}
-                accessibilityElementsHidden
-                importantForAccessibility="no-hide-descendants"
-            >
-                <Skeleton.Circle size={resolvedAvatarSize} />
-            </View>
-        );
+  useEffect(() => {
+    if (!onNavigateManage && !onAddAccount && !onNavigateProfile && !menuItems?.length) {
+      return undefined;
     }
+    return registerAccountDialogConsumerHooks({
+      onNavigateManage,
+      onAddAccount,
+      onNavigateProfile,
+      menuItems,
+    });
+  }, [onNavigateManage, onAddAccount, onNavigateProfile, menuItems]);
 
-    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;
+  const avatarUrl = useMemo(
+    () => (user?.avatar ? oxyServices.assets.publicUrl(user.avatar, 'thumb') : undefined),
+    [user?.avatar, oxyServices],
+  );
 
+  // ── Undetermined: skeleton circle, no interaction. ──────────────────────
+  if (!isAuthResolved || isPrivateApiPending) {
     return (
-        <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>
-            }
-        />
+      <View
+        className={className}
+        style={style}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        <Skeleton.Circle size={resolvedAvatarSize} />
+      </View>
     );
+  }
+
+  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 (
+    <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>
+      }
+    />
+  );
 };
 
 export default ProfileButton;

package/src/ui/components/ProfileSummaryCard.tsx

@@ -17,83 +17,83 @@ import AvatarCameraBadge from './AvatarCameraBadge';
  * badge overlay.
  */
 export interface ProfileSummaryCardProps {
-    /** Primary display name shown under the avatar. */
-    displayName: string;
-    /** Resolved avatar thumbnail URL (undefined → initials fallback). */
-    avatarUri?: string;
-    /** Avatar diameter in px. Defaults to 72. */
-    avatarSize?: number;
-    /**
-     * Secondary lines rendered beneath the name (e.g. `@handle`, email).
-     * Falsy entries are skipped so callers can pass conditional values inline.
-     */
-    lines?: Array<string | null | undefined | false>;
-    /** When provided, the avatar is pressable (e.g. opens the avatar picker). */
-    onAvatarPress?: () => void;
-    /** Render the camera badge overlay. Only meaningful with `onAvatarPress`. */
-    showCameraBadge?: boolean;
-    /** Accessibility label for the pressable avatar. */
-    avatarAccessibilityLabel?: string;
+  /** Primary display name shown under the avatar. */
+  displayName: string;
+  /** Resolved avatar thumbnail URL (undefined → initials fallback). */
+  avatarUri?: string;
+  /** Avatar diameter in px. Defaults to 72. */
+  avatarSize?: number;
+  /**
+   * Secondary lines rendered beneath the name (e.g. `@handle`, email).
+   * Falsy entries are skipped so callers can pass conditional values inline.
+   */
+  lines?: Array<string | null | undefined | false>;
+  /** When provided, the avatar is pressable (e.g. opens the avatar picker). */
+  onAvatarPress?: () => void;
+  /** Render the camera badge overlay. Only meaningful with `onAvatarPress`. */
+  showCameraBadge?: boolean;
+  /** Accessibility label for the pressable avatar. */
+  avatarAccessibilityLabel?: string;
 }
 
 const cardStyle: ViewStyle = {
-    marginBottom: 16,
+  marginBottom: 16,
 };
 
 const pressableStyle: ViewStyle = {
-    position: 'relative',
+  position: 'relative',
 };
 
 const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
-    displayName,
-    avatarUri,
-    avatarSize = 72,
-    lines,
-    onAvatarPress,
-    showCameraBadge = false,
-    avatarAccessibilityLabel,
+  displayName,
+  avatarUri,
+  avatarSize = 72,
+  lines,
+  onAvatarPress,
+  showCameraBadge = false,
+  avatarAccessibilityLabel,
 }) => {
-    const avatar = <Avatar source={avatarUri} name={displayName} size={avatarSize} />;
+  const avatar = <Avatar source={avatarUri} name={displayName} size={avatarSize} />;
 
-    const avatarNode = onAvatarPress ? (
-        <PressableScale
-            onPress={onAvatarPress}
-            accessibilityRole="button"
-            accessibilityLabel={avatarAccessibilityLabel}
-            style={pressableStyle}
-            className="mb-space-12"
-        >
-            {avatar}
-            {showCameraBadge ? <AvatarCameraBadge /> : null}
-        </PressableScale>
-    ) : (
-        <View className="mb-space-12">{avatar}</View>
-    );
+  const avatarNode = onAvatarPress ? (
+    <PressableScale
+      onPress={onAvatarPress}
+      accessibilityRole="button"
+      accessibilityLabel={avatarAccessibilityLabel}
+      style={pressableStyle}
+      className="mb-space-12"
+    >
+      {avatar}
+      {showCameraBadge ? <AvatarCameraBadge /> : null}
+    </PressableScale>
+  ) : (
+    <View className="mb-space-12">{avatar}</View>
+  );
 
-    const subtitleLines = (lines ?? []).filter(
-        (line): line is string => typeof line === 'string' && line.length > 0,
-    );
+  const subtitleLines = (lines ?? []).filter(
+    (line): line is string => typeof line === 'string' && line.length > 0,
+  );
 
-    return (
-        <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}>
-                    {displayName}
-                </H4>
-                {subtitleLines.map((line, index) => (
-                    <Text
-                        // Subtitle order is stable within a render; index keys are safe here.
-                        key={`${index}-${line}`}
-                        className="text-text-secondary text-sm mt-space-2"
-                        numberOfLines={1}
-                    >
-                        {line}
-                    </Text>
-                ))}
-            </View>
-        </Card>
-    );
+  return (
+    <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}>
+          {displayName}
+        </H4>
+        {subtitleLines.map((line, index) => (
+          <Text
+            // biome-ignore lint/suspicious/noArrayIndexKey: subtitle order is stable within a render; index keys are safe here.
+            key={`${index}-${line}`}
+            className="text-text-secondary text-sm mt-space-2"
+            numberOfLines={1}
+          >
+            {line}
+          </Text>
+        ))}
+      </View>
+    </Card>
+  );
 };
 
 export default ProfileSummaryCard;

package/src/ui/components/RequireOxyAuth.tsx

@@ -75,7 +75,8 @@ export const RequireOxyAuth: React.FC<RequireOxyAuthProps> = ({
   bannerMessage,
   bannerActionLabel,
 }) => {
-  const { canUsePrivateApi, isPrivateApiPending, isAccountCacheReady, openAccountDialog } = useOxy();
+  const { canUsePrivateApi, isPrivateApiPending, isAccountCacheReady, openAccountDialog } =
+    useOxy();
 
   // Public app: render straight through. Cheap enough to short-circuit before
   // touching any gate UI.
@@ -128,7 +129,13 @@ interface SoftGateProps {
   onSignIn: () => void;
 }
 
-const SoftGate: React.FC<SoftGateProps> = ({ children, pending, message, actionLabel, onSignIn }) => {
+const SoftGate: React.FC<SoftGateProps> = ({
+  children,
+  pending,
+  message,
+  actionLabel,
+  onSignIn,
+}) => {
   const theme = useTheme();
   const [dismissed, setDismissed] = useState(false);
 
@@ -139,7 +146,12 @@ const SoftGate: React.FC<SoftGateProps> = ({ children, pending, message, actionL
   return (
     <View style={styles.softRoot}>
       {showBanner ? (
-        <View style={[styles.banner, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }]}>
+        <View
+          style={[
+            styles.banner,
+            { backgroundColor: theme.colors.card, borderColor: theme.colors.border },
+          ]}
+        >
           <LogoIcon height={20} color={theme.colors.primary} />
           <Text style={[styles.bannerText, { color: theme.colors.text }]} numberOfLines={2}>
             {message}