@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/hooks/useWebSSO.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Web SSO Hook
+ *
+ * Handles cross-domain SSO for web apps using FedCM (Federated Credential Management).
+ *
+ * FedCM is the modern, privacy-preserving standard for cross-domain identity federation.
+ * It works across completely different TLDs (alia.onl, mention.earth, homiio.com, etc.)
+ * without relying on third-party cookies.
+ *
+ * For browsers without FedCM support, users will need to click a sign-in button
+ * which triggers a popup-based authentication flow.
+ *
+ * This is called automatically by OxyContext on web platforms.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API
+ */
+import type { OxyServices } from '@oxyhq/core';
+import type { SessionLoginResponse } from '@oxyhq/core';
+interface UseWebSSOOptions {
+    oxyServices: OxyServices;
+    onSessionFound: (session: SessionLoginResponse) => Promise<void>;
+    onSSOUnavailable?: () => void;
+    onError?: (error: Error) => void;
+    enabled?: boolean;
+}
+interface UseWebSSOResult {
+    /** Manually trigger SSO check */
+    checkSSO: () => Promise<SessionLoginResponse | null>;
+    /** Trigger interactive FedCM sign-in (shows browser UI) */
+    signInWithFedCM: () => Promise<SessionLoginResponse | null>;
+    /** Whether SSO check is in progress */
+    isChecking: boolean;
+    /** Whether FedCM is supported in this browser */
+    isFedCMSupported: boolean;
+}
+/**
+ * Check if we're running in a web browser environment (not React Native)
+ */
+declare function isWebBrowser(): boolean;
+/**
+ * Hook for automatic cross-domain web SSO
+ *
+ * Uses FedCM (Federated Credential Management) - the modern browser-native
+ * identity federation API. This is the same technology that powers
+ * Google's cross-domain SSO (YouTube, Gmail, Maps, etc.).
+ *
+ * Key benefits:
+ * - Works across different TLDs (alia.onl ↔ mention.earth ↔ homiio.com)
+ * - No third-party cookies required
+ * - Privacy-preserving (browser mediates identity, IdP can't track)
+ * - Automatic silent sign-in after initial authentication
+ *
+ * For browsers without FedCM (Firefox, older browsers), automatic SSO
+ * is not possible. Users will see a sign-in button instead.
+ */
+export declare function useWebSSO({ oxyServices, onSessionFound, onSSOUnavailable, onError, enabled, }: UseWebSSOOptions): UseWebSSOResult;
+export { isWebBrowser };

package/src/ui/hooks/useWebSSO.js

@@ -0,0 +1,146 @@
+"use strict";
+/**
+ * Web SSO Hook
+ *
+ * Handles cross-domain SSO for web apps using FedCM (Federated Credential Management).
+ *
+ * FedCM is the modern, privacy-preserving standard for cross-domain identity federation.
+ * It works across completely different TLDs (alia.onl, mention.earth, homiio.com, etc.)
+ * without relying on third-party cookies.
+ *
+ * For browsers without FedCM support, users will need to click a sign-in button
+ * which triggers a popup-based authentication flow.
+ *
+ * This is called automatically by OxyContext on web platforms.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FedCM_API
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebSSO = useWebSSO;
+exports.isWebBrowser = isWebBrowser;
+const react_1 = require("react");
+/**
+ * Check if we're running in a web browser environment (not React Native)
+ */
+function isWebBrowser() {
+    return typeof window !== 'undefined' &&
+        typeof document !== 'undefined' &&
+        typeof document.documentElement !== 'undefined';
+}
+/**
+ * Check if we're on the identity provider domain (where FedCM would authenticate against itself)
+ * Only auth.oxy.so is the IdP - accounts.oxy.so is a client app like any other
+ */
+function isIdentityProvider() {
+    if (!isWebBrowser())
+        return false;
+    const hostname = window.location.hostname;
+    return hostname === 'auth.oxy.so';
+}
+/**
+ * Hook for automatic cross-domain web SSO
+ *
+ * Uses FedCM (Federated Credential Management) - the modern browser-native
+ * identity federation API. This is the same technology that powers
+ * Google's cross-domain SSO (YouTube, Gmail, Maps, etc.).
+ *
+ * Key benefits:
+ * - Works across different TLDs (alia.onl ↔ mention.earth ↔ homiio.com)
+ * - No third-party cookies required
+ * - Privacy-preserving (browser mediates identity, IdP can't track)
+ * - Automatic silent sign-in after initial authentication
+ *
+ * For browsers without FedCM (Firefox, older browsers), automatic SSO
+ * is not possible. Users will see a sign-in button instead.
+ */
+function useWebSSO({ oxyServices, onSessionFound, onSSOUnavailable, onError, enabled = true, }) {
+    const isCheckingRef = (0, react_1.useRef)(false);
+    const hasCheckedRef = (0, react_1.useRef)(false);
+    // Check FedCM support once
+    const fedCMSupported = isWebBrowser() && oxyServices.isFedCMSupported?.();
+    const checkSSO = (0, react_1.useCallback)(async () => {
+        if (!isWebBrowser() || isCheckingRef.current) {
+            return null;
+        }
+        // Don't use FedCM on the auth domain itself - it would authenticate against itself
+        if (isIdentityProvider()) {
+            onSSOUnavailable?.();
+            return null;
+        }
+        // FedCM is the only reliable cross-domain SSO mechanism
+        if (!fedCMSupported) {
+            onSSOUnavailable?.();
+            return null;
+        }
+        isCheckingRef.current = true;
+        try {
+            const session = await oxyServices.silentSignInWithFedCM?.();
+            if (session) {
+                await onSessionFound(session);
+                return session;
+            }
+            onSSOUnavailable?.();
+            return null;
+        }
+        catch (error) {
+            onSSOUnavailable?.();
+            onError?.(error instanceof Error ? error : new Error(String(error)));
+            return null;
+        }
+        finally {
+            isCheckingRef.current = false;
+        }
+    }, [oxyServices, onSessionFound, onSSOUnavailable, onError, fedCMSupported]);
+    /**
+     * Trigger interactive FedCM sign-in
+     * This shows the browser's native "Sign in with Oxy" prompt.
+     * Use this when silent mediation fails (user hasn't previously consented).
+     */
+    const signInWithFedCM = (0, react_1.useCallback)(async () => {
+        if (!isWebBrowser() || isCheckingRef.current) {
+            return null;
+        }
+        if (!fedCMSupported) {
+            onError?.(new Error('FedCM is not supported in this browser'));
+            return null;
+        }
+        isCheckingRef.current = true;
+        try {
+            const session = await oxyServices.signInWithFedCM?.();
+            if (session) {
+                await onSessionFound(session);
+                return session;
+            }
+            return null;
+        }
+        catch (error) {
+            onError?.(error instanceof Error ? error : new Error(String(error)));
+            return null;
+        }
+        finally {
+            isCheckingRef.current = false;
+        }
+    }, [oxyServices, onSessionFound, onError, fedCMSupported]);
+    // Auto-check SSO on mount (web only, FedCM only, not on auth domain)
+    (0, react_1.useEffect)(() => {
+        if (!enabled || !isWebBrowser() || hasCheckedRef.current || isIdentityProvider()) {
+            if (isIdentityProvider()) {
+                onSSOUnavailable?.();
+            }
+            return;
+        }
+        hasCheckedRef.current = true;
+        if (fedCMSupported) {
+            checkSSO();
+        }
+        else {
+            onSSOUnavailable?.();
+        }
+    }, [enabled, checkSSO, fedCMSupported, onSSOUnavailable]);
+    return {
+        checkSSO,
+        signInWithFedCM,
+        isChecking: isCheckingRef.current,
+        isFedCMSupported: fedCMSupported,
+    };
+}

package/src/ui/index.d.ts

@@ -0,0 +1,23 @@
+declare let OxyProvider: any;
+declare let OxySignInButton: any;
+declare let OxyLogo: any;
+declare let Avatar: any;
+declare let FollowButton: any;
+declare let OxyPayButton: any;
+declare let FontLoader: any;
+declare let setupFonts: any;
+declare let OxyIcon: any;
+declare let useOxy: any;
+declare let useAuth: any;
+declare let useFollow: any;
+declare let ProfileScreen: any;
+declare let useAuthStore: any;
+declare let useAccountStore: any;
+declare let fontFamilies: any;
+declare let fontStyles: any;
+declare let toast: any;
+declare let useStorage: any;
+export { OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useAuth, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast, useStorage, };
+export { handleAuthError, isInvalidSessionError, isTimeoutOrNetworkError, extractErrorMessage, } from './utils/errorHandlers';
+export type { HandleAuthErrorOptions } from './utils/errorHandlers';
+export type { UseStorageOptions, UseStorageResult } from './hooks/useStorage';

package/src/ui/index.js

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractErrorMessage = exports.isTimeoutOrNetworkError = exports.isInvalidSessionError = exports.handleAuthError = exports.useStorage = exports.toast = exports.fontStyles = exports.fontFamilies = exports.useAccountStore = exports.useAuthStore = exports.ProfileScreen = exports.useFollow = exports.useAuth = exports.useOxy = exports.OxyIcon = exports.setupFonts = exports.FontLoader = exports.OxyPayButton = exports.FollowButton = exports.Avatar = exports.OxyLogo = exports.OxySignInButton = exports.OxyProvider = void 0;
+/**
+ * UI Component exports - Frontend Only (with backend-safe fallbacks)
+ *
+ * This module exports all React/React Native UI components and hooks.
+ * In backend, all exports are no-ops or empty objects.
+ *
+ * NOTE: This entry point uses runtime detection which prevents tree-shaking.
+ * For better bundle optimization, use:
+ * - '@oxyhq/services/ui/client' for client bundles (tree-shakeable)
+ * - '@oxyhq/services/ui/server' for SSR environments (all noops)
+ *
+ * @example
+ * // Client bundle (tree-shakeable)
+ * import { OxyProvider, useOxy } from '@oxyhq/services/ui/client';
+ *
+ * // SSR (noops)
+ * import { OxyProvider, useOxy } from '@oxyhq/services/ui/server';
+ */
+const isFrontend_1 = __importDefault(require("./isFrontend"));
+// UI exports
+let OxyProvider;
+let OxySignInButton;
+let OxyLogo;
+let Avatar;
+let FollowButton;
+let OxyPayButton;
+let FontLoader;
+let setupFonts;
+let OxyIcon;
+let useOxy;
+let useAuth;
+let useFollow;
+let ProfileScreen;
+let useAuthStore;
+let useAccountStore;
+let fontFamilies;
+let fontStyles;
+let toast;
+let useStorage;
+if (isFrontend_1.default) {
+    exports.OxyProvider = OxyProvider = require('./components/OxyProvider').default;
+    exports.OxySignInButton = OxySignInButton = require('./components/OxySignInButton').default;
+    exports.OxyLogo = OxyLogo = require('./components/OxyLogo').default;
+    exports.Avatar = Avatar = require('./components/Avatar').default;
+    exports.FollowButton = FollowButton = require('./components/FollowButton').default;
+    exports.OxyPayButton = OxyPayButton = require('./components/OxyPayButton').default;
+    exports.FontLoader = FontLoader = require('./components/FontLoader').FontLoader;
+    exports.setupFonts = setupFonts = require('./components/FontLoader').setupFonts;
+    exports.OxyIcon = OxyIcon = require('./components/icon').OxyIcon;
+    exports.useOxy = useOxy = require('./context/OxyContext').useOxy;
+    exports.useAuth = useAuth = require('./hooks/useAuth').useAuth;
+    exports.useFollow = useFollow = require('./hooks').useFollow;
+    exports.ProfileScreen = ProfileScreen = require('./screens/ProfileScreen').default;
+    exports.useAuthStore = useAuthStore = require('./stores/authStore').useAuthStore;
+    exports.useAccountStore = useAccountStore = require('./stores/accountStore').useAccountStore;
+    exports.fontFamilies = fontFamilies = require('./styles/fonts').fontFamilies;
+    exports.fontStyles = fontStyles = require('./styles/fonts').fontStyles;
+    exports.toast = toast = require('../lib/sonner').toast;
+    exports.useStorage = useStorage = require('./hooks/useStorage').useStorage;
+}
+else {
+    // Backend: no-op fallbacks
+    const noopComponent = () => null;
+    const noopHook = () => ({});
+    const noopStorageResult = { storage: null, isReady: false };
+    exports.OxyProvider = OxyProvider = noopComponent;
+    exports.OxySignInButton = OxySignInButton = noopComponent;
+    exports.OxyLogo = OxyLogo = noopComponent;
+    exports.Avatar = Avatar = noopComponent;
+    exports.FollowButton = FollowButton = noopComponent;
+    exports.OxyPayButton = OxyPayButton = noopComponent;
+    exports.FontLoader = FontLoader = noopComponent;
+    exports.setupFonts = setupFonts = () => { };
+    exports.OxyIcon = OxyIcon = noopComponent;
+    exports.useOxy = useOxy = noopHook;
+    exports.useAuth = useAuth = noopHook;
+    exports.useFollow = useFollow = noopHook;
+    exports.ProfileScreen = ProfileScreen = noopComponent;
+    exports.useAuthStore = useAuthStore = noopHook;
+    exports.useAccountStore = useAccountStore = noopHook;
+    exports.fontFamilies = fontFamilies = {};
+    exports.fontStyles = fontStyles = {};
+    exports.toast = toast = () => { };
+    exports.useStorage = useStorage = () => noopStorageResult;
+}
+// Export error handler utilities (pure functions, no conditional needed)
+var errorHandlers_1 = require("./utils/errorHandlers");
+Object.defineProperty(exports, "handleAuthError", { enumerable: true, get: function () { return errorHandlers_1.handleAuthError; } });
+Object.defineProperty(exports, "isInvalidSessionError", { enumerable: true, get: function () { return errorHandlers_1.isInvalidSessionError; } });
+Object.defineProperty(exports, "isTimeoutOrNetworkError", { enumerable: true, get: function () { return errorHandlers_1.isTimeoutOrNetworkError; } });
+Object.defineProperty(exports, "extractErrorMessage", { enumerable: true, get: function () { return errorHandlers_1.extractErrorMessage; } });

package/src/ui/isFrontend.d.ts

@@ -0,0 +1,2 @@
+declare const isFrontend: boolean;
+export default isFrontend;

package/src/ui/isFrontend.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Utility to detect if running in a frontend (browser or React Native) environment
+const isFrontend = typeof window !== 'undefined' ||
+    (typeof navigator !== 'undefined' && navigator.product === 'ReactNative');
+exports.default = isFrontend;

package/src/ui/navigation/bottomSheetManager.d.ts

@@ -0,0 +1,26 @@
+import type { RouteName } from './routes';
+/**
+ * Bottom Sheet State Manager
+ */
+export interface BottomSheetState {
+    currentScreen: RouteName | null;
+    screenProps: Record<string, unknown>;
+    currentStep?: number;
+    history: Array<{
+        screen: RouteName;
+        props: Record<string, unknown>;
+        step?: number;
+    }>;
+    isOpen: boolean;
+    fullScreen: boolean;
+}
+export declare const bottomSheetStore: import("zustand/vanilla").StoreApi<BottomSheetState>;
+export declare const getState: () => BottomSheetState;
+export declare const showBottomSheet: (screenOrConfig: RouteName | {
+    screen: RouteName;
+    props?: Record<string, unknown>;
+    fullScreen?: boolean;
+}) => void;
+export declare const closeBottomSheet: () => void;
+export declare const goBack: () => boolean;
+export declare const updateState: (updates: Partial<BottomSheetState>) => void;

package/src/ui/navigation/bottomSheetManager.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateState = exports.goBack = exports.closeBottomSheet = exports.showBottomSheet = exports.getState = exports.bottomSheetStore = void 0;
+const routes_1 = require("./routes");
+const vanilla_1 = require("zustand/vanilla");
+const initialState = {
+    currentScreen: null,
+    screenProps: {},
+    currentStep: undefined,
+    history: [],
+    isOpen: false,
+    fullScreen: false,
+};
+exports.bottomSheetStore = (0, vanilla_1.createStore)(() => initialState);
+const getState = () => exports.bottomSheetStore.getState();
+exports.getState = getState;
+const showBottomSheet = (screenOrConfig) => {
+    const screen = typeof screenOrConfig === 'string' ? screenOrConfig : screenOrConfig.screen;
+    const props = typeof screenOrConfig === 'string' ? {} : (screenOrConfig.props || {});
+    const fullScreen = typeof screenOrConfig === 'string' ? false : (screenOrConfig.fullScreen ?? false);
+    if (!(0, routes_1.isValidRoute)(screen)) {
+        if (__DEV__)
+            console.warn(`[BottomSheet] Invalid route: ${screen}`);
+        return;
+    }
+    const state = exports.bottomSheetStore.getState();
+    // Push current screen to history if navigating to different screen
+    if (state.currentScreen && state.currentScreen !== screen) {
+        exports.bottomSheetStore.setState({
+            history: [...state.history, {
+                    screen: state.currentScreen,
+                    props: state.screenProps,
+                    step: state.currentStep,
+                }],
+        });
+    }
+    exports.bottomSheetStore.setState({
+        currentScreen: screen,
+        screenProps: props,
+        currentStep: typeof props.initialStep === 'number' ? props.initialStep : undefined,
+        isOpen: true,
+        fullScreen,
+    });
+};
+exports.showBottomSheet = showBottomSheet;
+const closeBottomSheet = () => {
+    exports.bottomSheetStore.setState(initialState);
+};
+exports.closeBottomSheet = closeBottomSheet;
+const goBack = () => {
+    const { history } = exports.bottomSheetStore.getState();
+    if (history.length > 0) {
+        const prev = history[history.length - 1];
+        exports.bottomSheetStore.setState({
+            currentScreen: prev.screen,
+            screenProps: prev.props,
+            currentStep: prev.step,
+            history: history.slice(0, -1),
+        });
+        return true;
+    }
+    return false;
+};
+exports.goBack = goBack;
+const updateState = (updates) => {
+    exports.bottomSheetStore.setState((state) => ({ ...state, ...updates }));
+};
+exports.updateState = updateState;

package/src/ui/navigation/routes.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+export type RouteName = 'OxyAuth' | 'AccountOverview' | 'AccountSettings' | 'AccountCenter' | 'AccountSwitcher' | 'AccountVerification' | 'SessionManagement' | 'PaymentGateway' | 'Profile' | 'LanguageSelector' | 'PrivacySettings' | 'SearchSettings' | 'FileManagement' | 'HelpSupport' | 'FAQ' | 'Feedback' | 'LegalDocuments' | 'AppInfo' | 'PremiumSubscription' | 'WelcomeNewUser' | 'UserLinks' | 'HistoryView' | 'SavesCollections' | 'EditProfileField' | 'LearnMoreUsernames' | 'KarmaCenter' | 'KarmaLeaderboard' | 'KarmaRewards' | 'KarmaRules' | 'AboutKarma' | 'KarmaFAQ' | 'FollowersList' | 'FollowingList';
+export declare const getScreenComponent: (routeName: RouteName) => ComponentType<BaseScreenProps> | undefined;
+export declare const isValidRoute: (routeName: string) => routeName is RouteName;

package/src/ui/navigation/routes.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidRoute = exports.getScreenComponent = void 0;
+// Lazy screen loaders - functions that return screen components on-demand
+// This breaks the require cycle by deferring imports until screens are actually needed
+const screenLoaders = {
+    OxyAuth: () => require('../screens/OxyAuthScreen').default,
+    AccountOverview: () => require('../screens/AccountOverviewScreen').default,
+    AccountSettings: () => require('../screens/AccountSettingsScreen').default,
+    AccountCenter: () => require('../screens/AccountCenterScreen').default,
+    AccountSwitcher: () => require('../screens/AccountSwitcherScreen').default,
+    AccountVerification: () => require('../screens/AccountVerificationScreen').default,
+    SessionManagement: () => require('../screens/SessionManagementScreen').default,
+    PaymentGateway: () => require('../screens/PaymentGatewayScreen').default,
+    Profile: () => require('../screens/ProfileScreen').default,
+    LanguageSelector: () => require('../screens/LanguageSelectorScreen').default,
+    PrivacySettings: () => require('../screens/PrivacySettingsScreen').default,
+    SearchSettings: () => require('../screens/SearchSettingsScreen').default,
+    FileManagement: () => require('../screens/FileManagementScreen').default,
+    HelpSupport: () => require('../screens/HelpSupportScreen').default,
+    FAQ: () => require('../screens/FAQScreen').default,
+    Feedback: () => require('../screens/FeedbackScreen').default,
+    LegalDocuments: () => require('../screens/LegalDocumentsScreen').default,
+    AppInfo: () => require('../screens/AppInfoScreen').default,
+    PremiumSubscription: () => require('../screens/PremiumSubscriptionScreen').default,
+    WelcomeNewUser: () => require('../screens/WelcomeNewUserScreen').default,
+    UserLinks: () => require('../screens/UserLinksScreen').default,
+    HistoryView: () => require('../screens/HistoryViewScreen').default,
+    SavesCollections: () => require('../screens/SavesCollectionsScreen').default,
+    EditProfileField: () => require('../screens/EditProfileFieldScreen').default,
+    // Informational screens
+    LearnMoreUsernames: () => require('../screens/LearnMoreUsernamesScreen').default,
+    // Karma screens
+    KarmaCenter: () => require('../screens/karma/KarmaCenterScreen').default,
+    KarmaLeaderboard: () => require('../screens/karma/KarmaLeaderboardScreen').default,
+    KarmaRewards: () => require('../screens/karma/KarmaRewardsScreen').default,
+    KarmaRules: () => require('../screens/karma/KarmaRulesScreen').default,
+    AboutKarma: () => require('../screens/karma/KarmaAboutScreen').default,
+    KarmaFAQ: () => require('../screens/karma/KarmaFAQScreen').default,
+    // User list screens (followers/following)
+    FollowersList: () => require('../screens/FollowersListScreen').default,
+    FollowingList: () => require('../screens/FollowingListScreen').default,
+};
+// Cache loaded components to avoid re-requiring
+const screenCache = new Map();
+// Helper function to get a screen component by route name (lazy loaded)
+const getScreenComponent = (routeName) => {
+    // Return cached component if available
+    if (screenCache.has(routeName)) {
+        return screenCache.get(routeName);
+    }
+    // Lazy load the component
+    const loader = screenLoaders[routeName];
+    if (loader) {
+        try {
+            const component = loader();
+            screenCache.set(routeName, component);
+            return component;
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error(`[Routes] Failed to load screen: ${routeName}`, error);
+            }
+            return undefined;
+        }
+    }
+    return undefined;
+};
+exports.getScreenComponent = getScreenComponent;
+// Helper function to check if a route exists
+// Uses the screenLoaders object to check existence without loading the screen
+const isValidRoute = (routeName) => {
+    return routeName in screenLoaders;
+};
+exports.isValidRoute = isValidRoute;

package/src/ui/screens/AccountCenterScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const AccountCenterScreen: React.FC<BaseScreenProps>;
+export default AccountCenterScreen;