@oxy.so/services 11.13.0 → 11.15.0

package/src/ui/hooks/queries/useSecurityQueries.ts

@@ -1,6 +1,6 @@
 import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
 import { queryKeys } from './queryKeys';
-import { useOxy } from '../../context/OxyContext';
+import { useOxy } from '../../context/oxyRuntimeContext';
 import type { SecurityActivity, SecurityActivityResponse, SecurityEventType } from '@oxy.so/core';
 
 /**

package/src/ui/hooks/queries/useServicesQueries.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { authenticatedApiCall } from '@oxy.so/core';
 import type { AccountStorageUsageResponse, ClientSession } from '@oxy.so/core';
 import { queryKeys } from './queryKeys';
-import { useOxy } from '../../context/OxyContext';
+import { useOxy } from '../../context/oxyRuntimeContext';
 import { fetchSessionsWithFallback, mapSessionsToClient } from '../../utils/sessionHelpers';
 
 // Per-account query scope. In the real-session switch model the active session

package/src/ui/hooks/queries/useSupervision.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useOxy } from '../../context/OxyContext';
+import { useOxy } from '../../context/oxyRuntimeContext';
 export const supervisionQueryKeys = {
   all: ['oxy', 'safety', 'supervision'] as const,
   account: (id: string, sessionId: string) =>

package/src/ui/hooks/useAuth.ts

@@ -27,7 +27,7 @@
  */
 
 import { useCallback } from 'react';
-import { useOxyAuthActions } from '../context/OxyContext';
+import { useOxyAuthActions } from '../context/oxyRuntimeContext';
 import type { User } from '@oxy.so/core';
 import { isWebBrowser } from '../utils/isWebBrowser';
 import { useOxyRuntime, useRuntimeSelector, type OxyRuntimeSnapshot } from '../runtime';

package/src/ui/hooks/useDeviceSwitcher.ts

@@ -5,7 +5,7 @@ import {
   type DeviceContext,
   type SwitcherPrincipalRow,
 } from '@oxy.so/core/session';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from './useI18n';
 import { useAccountDialogSnapshot } from './accountDialogSnapshot';
 

package/src/ui/hooks/useDisplayCurrency.ts

@@ -1,7 +1,7 @@
 import { useSyncExternalStore } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { authenticatedApiCall, type UserPreferences } from '@oxy.so/core';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useCurrentUser } from './queries/useAccountQueries';
 import { queryKeys } from './queries/queryKeys';
 import { useAuthStore } from '../stores/authStore';

package/src/ui/hooks/useFollow.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useFollowStore } from '../stores/followStore';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import type { OxyServices, BulkFollowResult, BulkUnfollowResult } from '@oxy.so/core';
 import { useShallow } from 'zustand/react/shallow';
 import { queryKeys } from './queries/queryKeys';

package/src/ui/hooks/useFollowTarget.ts

@@ -17,7 +17,7 @@
 
 import { useCallback, useEffect } from 'react';
 import type { FollowStatus } from '@oxy.so/contracts';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import {
   isCompleteFollowStatus,
   isFollowedGlobally,

package/src/ui/hooks/useI18n.ts

@@ -1,5 +1,5 @@
 import { useMemo, useSyncExternalStore } from 'react';
-import { useOptionalOxy } from '../context/OxyContext';
+import { useOptionalOxy } from '../context/oxyRuntimeContext';
 import { getLocalesVersion, subscribeLocales, translate } from '@oxy.so/core';
 
 /**

package/src/ui/hooks/useLanguageManagement.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ApiError, User, SupportedLanguage } from '@oxy.so/core';
 import {
   FALLBACK_LOCALE,
@@ -35,8 +35,8 @@ export interface UseLanguageManagementResult {
    */
   currentLanguage: string;
   /**
-   * The ordered account locales (primary first) when signed in, or the single
-   * guest override when signed out. Empty only before the guest override loads
+   * The ordered account locales (primary first) when signed in, or the locally
+   * persisted selection when signed out. Empty only before the guest override loads
    * and no device locale resolves.
    */
   languages: string[];
@@ -50,6 +50,8 @@ export interface UseLanguageManagementResult {
    * then follows the refreshed `user`.
    */
   setLanguage: (locale: string) => Promise<void>;
+  /** Persist an ordered guest selection, primary first. */
+  setLanguages: (locales: readonly string[]) => Promise<void>;
   hydrateLanguage: () => Promise<void>;
 }
 
@@ -150,21 +152,35 @@ export const useLanguageManagement = ({
   // The device locale is fixed for the lifetime of the runtime.
   const deviceLanguage = useMemo(resolveDeviceLocale, []);
 
-  // The locally-owned guest override (a single locale). `null` until loaded
-  // from storage or explicitly set; the derived locale falls back to the device
-  // locale while it is `null`.
-  const [guestLanguage, setGuestLanguage] = useState<string | null>(null);
+  // The guest selection is persisted in order, with the first locale primary.
+  // Until it loads, the UI uses the device locale.
+  const [guestLanguages, setGuestLanguages] = useState<string[]>([]);
+  const selectionVersion = useRef(0);
 
   const loadLanguageFromStorage = useCallback(async (): Promise<void> => {
     if (!storage) {
       return;
     }
 
+    const version = selectionVersion.current;
     try {
       const savedLanguageRaw = await storage.getItem(languageKey);
-      const normalized = savedLanguageRaw ? normalizeLocale(savedLanguageRaw) : undefined;
-      if (normalized) {
-        setGuestLanguage(normalized);
+      // Migrate the former single locale without discarding existing preferences.
+      let stored: unknown = savedLanguageRaw;
+      if (savedLanguageRaw?.startsWith('[')) {
+        stored = JSON.parse(savedLanguageRaw);
+      }
+      const entries = Array.isArray(stored) ? stored : [stored];
+      const normalized = [
+        ...new Set(
+          entries.flatMap((entry) => {
+            const locale = typeof entry === 'string' ? normalizeLocale(entry) : undefined;
+            return locale ? [locale] : [];
+          }),
+        ),
+      ];
+      if (normalized.length && version === selectionVersion.current) {
+        setGuestLanguages(normalized);
       }
     } catch (error) {
       const message = extractErrorMessage(error, 'Failed to load language preference');
@@ -189,20 +205,26 @@ export const useLanguageManagement = ({
     });
   }, [loadLanguageFromStorage, logger]);
 
-  const setLanguage = useCallback(
-    async (locale: string): Promise<void> => {
+  const setLanguages = useCallback(
+    async (locales: readonly string[]): Promise<void> => {
       if (!storage) {
         throw new Error('Storage not initialized');
       }
 
-      const normalized = normalizeLocale(locale);
-      if (!normalized) {
-        throw new Error(`Unsupported locale: ${locale}`);
-      }
-
+      const normalized = [
+        ...new Set(
+          locales.map((locale) => {
+            const canonical = normalizeLocale(locale);
+            if (!canonical) throw new Error(`Unsupported locale: ${locale}`);
+            return canonical;
+          }),
+        ),
+      ];
+      if (!normalized.length) throw new Error('At least one language is required');
+      const version = ++selectionVersion.current;
       try {
-        await storage.setItem(languageKey, normalized);
-        setGuestLanguage(normalized);
+        await storage.setItem(languageKey, JSON.stringify(normalized));
+        if (version === selectionVersion.current) setGuestLanguages(normalized);
       } catch (error) {
         const message = extractErrorMessage(error, 'Failed to save language preference');
         onError?.({
@@ -221,19 +243,21 @@ export const useLanguageManagement = ({
     [languageKey, logger, onError, storage],
   );
 
+  const setLanguage = useCallback((locale: string) => setLanguages([locale]), [setLanguages]);
+
   const languages = useMemo<string[]>(() => {
     if (user) {
       return getUserLanguages(user);
     }
-    return guestLanguage ? [guestLanguage] : [];
-  }, [user, guestLanguage]);
+    return guestLanguages;
+  }, [user, guestLanguages]);
 
   const currentLanguage = useMemo<string>(() => {
     if (user) {
       return getPrimaryLanguage(user) ?? FALLBACK_LOCALE;
     }
-    return guestLanguage ?? deviceLanguage;
-  }, [user, guestLanguage, deviceLanguage]);
+    return guestLanguages[0] ?? deviceLanguage;
+  }, [user, guestLanguages, deviceLanguage]);
 
   const metadata = useMemo(() => getLanguageMetadata(currentLanguage), [currentLanguage]);
   const languageName = useMemo(() => getLanguageName(currentLanguage), [currentLanguage]);
@@ -249,6 +273,7 @@ export const useLanguageManagement = ({
     languageName,
     nativeLanguageName,
     setLanguage,
+    setLanguages,
     hydrateLanguage: loadLanguageFromStorage,
   };
 };

package/src/ui/hooks/useOxyEvent.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 
 /**
  * Subscribe to a named server-pushed Socket.IO event (e.g. `civic:attested`)

package/src/ui/hooks/useSurfaceHeader.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, useLayoutEffect, useRef } from 'react';
+import { createContext, useCallback, useContext, useLayoutEffect, useRef } from 'react';
 import type { DialogHeaderConfig } from '@oxy.so/bloom/dialog';
 
 /**
@@ -24,6 +24,7 @@ export type SurfaceHeaderContent = Pick<
   | 'titleContent'
   | 'subtitle'
   | 'largeTitle'
+  | 'titleLayout'
   | 'left'
   | 'right'
   | 'onBack'
@@ -139,6 +140,7 @@ function surfaceHeaderContentEqual(
     a.titleContent === b.titleContent &&
     a.subtitle === b.subtitle &&
     a.largeTitle === b.largeTitle &&
+    a.titleLayout === b.titleLayout &&
     a.left === b.left &&
     a.right === b.right &&
     !!a.onBack === !!b.onBack &&
@@ -165,6 +167,11 @@ function surfaceHeaderContentEqual(
  * the object for us (i.e. anything not compiled by the React Compiler).
  */
 export function useSurfaceHeader(content: SurfaceHeaderContent | null | undefined): void {
+  const liveContent = useRef(content);
+  useLayoutEffect(() => {
+    liveContent.current = content;
+  });
+  const onBack = useCallback(() => liveContent.current?.onBack?.(), []);
   const ctx = useContext(SurfaceHeaderContext);
   const set = ctx?.setContent;
   const setRef = useRef(set);
@@ -177,7 +184,47 @@ export function useSurfaceHeader(content: SurfaceHeaderContent | null | undefine
   useLayoutEffect(() => {
     const s = setRef.current;
     if (!s) return;
-    const next = content ?? null;
+    // Compare presentation values, but dispatch events to the latest committed
+    // screen state. Typing in a form must not leave Save bound to its old values.
+    const next: SurfaceHeaderContent | null = content
+      ? {
+          ...content,
+          ...(content.onBack ? { onBack } : {}),
+          ...(content.primaryAction
+            ? {
+                primaryAction: {
+                  ...content.primaryAction,
+                  onPress: () => liveContent.current?.primaryAction?.onPress(),
+                },
+              }
+            : {}),
+          ...(content.actions
+            ? {
+                actions: content.actions.map((action, index) => ({
+                  ...action,
+                  onPress: () => liveContent.current?.actions?.[index]?.onPress(),
+                })),
+              }
+            : {}),
+          ...(content.search
+            ? {
+                search: {
+                  ...content.search,
+                  onValueChange: (value) => liveContent.current?.search?.onValueChange(value),
+                  onSubmit: () => liveContent.current?.search?.onSubmit?.(),
+                },
+              }
+            : {}),
+          ...(content.segments
+            ? {
+                segments: {
+                  ...content.segments,
+                  onChange: (value) => liveContent.current?.segments?.onChange(value),
+                },
+              }
+            : {}),
+        }
+      : null;
     if (lastRef.current !== undefined && surfaceHeaderContentEqual(lastRef.current, next)) return;
     lastRef.current = next;
     s(next);
@@ -187,6 +234,7 @@ export function useSurfaceHeader(content: SurfaceHeaderContent | null | undefine
   useLayoutEffect(
     () => () => {
       lastRef.current = undefined;
+      liveContent.current = null;
       setRef.current?.(null);
     },
     [],

package/src/ui/hooks/useUsernameAvailability.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { usernameSchema } from '@oxy.so/contracts';
+import { useOxy } from '../context/oxyRuntimeContext';
+
+type CheckResult = { candidate: string; status: 'available' | 'taken' | 'error' };
+
+/** Debounced server check; a response only applies to the draft that requested it. */
+export function useUsernameAvailability(value: string, enabled: boolean) {
+  const { oxyServices, user } = useOxy();
+  const candidate = value.trim();
+  const parsed = usernameSchema.safeParse(candidate);
+  const invalid = parsed.success ? undefined : parsed.error.issues[0]?.message;
+  const unchanged = candidate.toLowerCase() === user?.username?.toLowerCase();
+  const [result, setResult] = useState<CheckResult>();
+  const [attempt, setAttempt] = useState(0);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: attempt explicitly retries the same candidate.
+  useEffect(() => {
+    if (!enabled || invalid || unchanged) return;
+    setResult(undefined);
+    let active = true;
+    const timer = setTimeout(() => {
+      void oxyServices.auth.checkUsername(candidate).then(
+        ({ available }) => {
+          if (active) setResult({ candidate, status: available ? 'available' : 'taken' });
+        },
+        () => {
+          if (active) setResult({ candidate, status: 'error' });
+        },
+      );
+    }, 350);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [candidate, enabled, invalid, unchanged, oxyServices, attempt]);
+
+  const status = !enabled
+    ? 'idle'
+    : unchanged
+      ? 'unchanged'
+      : invalid
+        ? 'invalid'
+        : result?.candidate === candidate
+          ? result.status
+          : 'checking';
+  return {
+    candidate,
+    status,
+    invalid,
+    canSave: status === 'available' || status === 'unchanged',
+    retry: () => {
+      setResult(undefined);
+      setAttempt((value) => value + 1);
+    },
+  };
+}

package/src/ui/icons/subsetGlyphMaps.ts

@@ -66,7 +66,6 @@ export const ioniconsGlyphMap = {
   "footsteps": 62254,
   "gift": 62263,
   "gift-outline": 62264,
-  "globe-outline": 62288,
   "grid": 62293,
   "hand-left": 62299,
   "hardware-chip-outline": 62309,
@@ -93,6 +92,7 @@ export const ioniconsGlyphMap = {
   "location-outline": 62405,
   "lock-closed": 62407,
   "log-out-outline": 62417,
+  "mail": 62512,
   "musical-notes": 62569,
   "navigate": 62572,
   "open": 62599,
@@ -147,7 +147,6 @@ export const materialCommunityIconsGlyphMap = {
   "account-eye-outline": 987771,
   "account-group": 985161,
   "account-multiple": 983054,
-  "account-multiple-outline": 983055,
   "account-outline": 983059,
   "account-plus": 983060,
   "account-search": 983062,
@@ -236,6 +235,7 @@ export const materialCommunityIconsGlyphMap = {
   "folder-open-outline": 986575,
   "folder-outline": 983638,
   "folder-zip-outline": 985017,
+  "forward": 983693,
   "function": 983701,
   "ghost": 983712,
   "gift": 986692,
@@ -249,6 +249,7 @@ export const materialCommunityIconsGlyphMap = {
   "image": 983785,
   "image-multiple-outline": 983791,
   "image-outline": 985462,
+  "inbox": 984711,
   "information": 983804,
   "information-outline": 983805,
   "key": 983814,
@@ -261,6 +262,7 @@ export const materialCommunityIconsGlyphMap = {
   "lock-outline": 983873,
   "logout": 983875,
   "magnify": 983881,
+  "mail": 986811,
   "map-marker": 983886,
   "map-marker-multiple": 983888,
   "map-marker-outline": 985049,
@@ -272,7 +274,6 @@ export const materialCommunityIconsGlyphMap = {
   "network": 984819,
   "null": 985058,
   "numeric": 983968,
-  "opacity": 984524,
   "open-in-app": 984011,
   "openid": 984013,
   "palette": 984024,
@@ -304,7 +305,6 @@ export const materialCommunityIconsGlyphMap = {
   "shield-search": 986522,
   "signature": 986619,
   "solid": 984717,
-  "sort": 984250,
   "sort-alphabetical-variant": 984251,
   "sort-numeric-variant": 984254,
   "star": 984270,

package/src/ui/index.ts

@@ -15,6 +15,11 @@
 /// <reference path="../types/react-native-classname.d.ts" />
 /// <reference path="../types/react-native-web-style.d.ts" />
 
+import { registerScreens } from './navigation/routes';
+import { screenComponents } from './navigation/screenComponents';
+
+registerScreens(screenComponents);
+
 // Components
 export { default as OxyProvider } from './components/OxyProvider';
 export { default as OxySignInButton } from './components/OxySignInButton';

package/src/ui/navigation/__tests__/bottomSheetManager.test.ts

@@ -0,0 +1,37 @@
+import { createSurfaceNavStack } from '../surfaceNavStack';
+import { showBottomSheet, goBack } from '../bottomSheetManager';
+import { presentRoute, topMorphableSurface } from '../surfaces';
+
+jest.mock('../surfaces', () => ({
+  presentRoute: jest.fn(),
+  topMorphableSurface: jest.fn(),
+  closeAllRouteSurfaces: jest.fn(),
+}));
+
+describe('imperative navigation preserves the visible surface history', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('morphs an open detached account menu and backs to it instead of presenting a new root', () => {
+    const stack = createSurfaceNavStack('AccountDialog');
+    jest
+      .mocked(topMorphableSurface)
+      .mockReturnValue({ navigate: stack.navigate, goBack: stack.goBack } as ReturnType<
+        typeof topMorphableSurface
+      >);
+    showBottomSheet('ManageAccount');
+    expect(presentRoute).not.toHaveBeenCalled();
+    expect(stack.getTop().route).toBe('ManageAccount');
+    expect(stack.canGoBack()).toBe(true);
+    expect(goBack()).toBe(true);
+    expect(stack.getTop().route).toBe('AccountDialog');
+    expect(goBack()).toBe(false);
+    expect(stack.store.getState().closing).toBe(false);
+  });
+
+  it('opens a root only when there is no existing surface', () => {
+    jest.mocked(topMorphableSurface).mockReturnValue(undefined);
+    showBottomSheet('HelpSupport');
+    expect(presentRoute).toHaveBeenCalledWith('HelpSupport', {});
+    expect(goBack()).toBe(false);
+  });
+});

package/src/ui/navigation/__tests__/surfaceNavStack.test.ts

@@ -40,6 +40,20 @@ describe('createSurfaceNavStack', () => {
     expect(stack.getTop().step).toBe(1);
   });
 
+  it('backs through wizard history before leaving a drilled-in route', () => {
+    const stack = createSurfaceNavStack('AccountDialog');
+    stack.navigate('LegalDocuments', { initialStep: 2 });
+    expect(stack.goBack()).toBe(true);
+    expect(stack.getTop()).toMatchObject({ route: 'LegalDocuments', step: 1 });
+    expect(stack.goBack()).toBe(true);
+    expect(stack.getTop()).toMatchObject({ route: 'LegalDocuments', step: 0 });
+    expect(stack.goBack()).toBe(true);
+    expect(stack.getTop().route).toBe('AccountDialog');
+    expect(stack.canGoBack()).toBe(false);
+    expect(stack.goBack()).toBe(false);
+    expect(stack.store.getState().closing).toBe(false);
+  });
+
   it('requestDismiss flips closing once', () => {
     const stack = createSurfaceNavStack('ManageAccount');
     stack.requestDismiss('done');
@@ -185,3 +199,16 @@ describe('pushSurfaceBackHandler', () => {
     expect(calls).toEqual(['top']);
   });
 });
+
+it('reports forward and backward content transitions without changing root navigation', () => {
+  const stack = createSurfaceNavStack('ManageAccount');
+  expect(stack.store.getState().direction).toBe('none');
+  stack.navigate('EditProfile');
+  expect(stack.store.getState().direction).toBe('forward');
+  stack.goBack();
+  expect(stack.store.getState().direction).toBe('backward');
+  stack.setStep(2);
+  expect(stack.store.getState().direction).toBe('forward');
+  stack.setStep(1);
+  expect(stack.store.getState().direction).toBe('backward');
+});

package/src/ui/navigation/accountDialogManager.ts

@@ -10,16 +10,30 @@
  * view) from a non-React call site.
  */
 
+import type { ReactNode } from 'react';
 import type { AccountDialogView } from '@oxy.so/core/session';
 
 /** An app-owned action rendered inside the shared account menu. */
 export interface AccountDialogMenuItem {
   key: string;
   label: string;
-  icon?: string;
+  /** An icon name or an app-owned icon element. */
+  icon?: ReactNode;
+  description?: string;
+  badge?: string;
+  disabled?: boolean;
+  /** Default false: close the account dialog before navigating. */
+  keepOpen?: boolean;
   onPress: () => void;
 }
 
+/** App-owned group, rendered as one rounded card in the account menu. */
+export interface AccountDialogMenuSection {
+  key: string;
+  title?: string;
+  items: readonly AccountDialogMenuItem[];
+}
+
 /**
  * Live open/close handles registered by the mounted provider. `open` presents
  * the `AccountDialog` surface (and points its view); `close` dismisses it. Both
@@ -40,6 +54,7 @@ export interface AccountDialogConsumerHooks {
   onAddAccount?: () => void;
   onNavigateProfile?: () => void;
   menuItems?: readonly AccountDialogMenuItem[];
+  menuSections?: readonly AccountDialogMenuSection[];
 }
 
 let controls: AccountDialogControls | null = null;

package/src/ui/navigation/bottomSheetManager.ts

@@ -1,7 +1,7 @@
 import type { RouteName } from './routes';
 import { isValidRoute } from './routes';
 import { getSurfaceConfig } from './surfaceRegistry';
-import { closeAllRouteSurfaces, presentRoute, topRouteSurface } from './surfaces';
+import { closeAllRouteSurfaces, presentRoute, topMorphableSurface } from './surfaces';
 
 /**
  * Bottom-sheet manager — the INTERNAL adapter that keeps the historical
@@ -37,7 +37,7 @@ export const showBottomSheet = (
     return;
   }
 
-  const top = topRouteSurface();
+  const top = topMorphableSurface();
   if (top && !getSurfaceConfig(screen, props).stacks) {
     top.navigate(screen, props);
   } else {
@@ -55,6 +55,6 @@ export const closeBottomSheet = (): void => {
  * frame was popped, `false` when the surface is already at its root frame.
  */
 export const goBack = (): boolean => {
-  const top = topRouteSurface();
+  const top = topMorphableSurface();
   return top ? top.goBack() : false;
 };