@pubflow/react 0.2.1 → 0.3.3

package/dist/index.cjs

@@ -209,67 +209,36 @@ const PubflowContext = React.createContext({
     defaultInstance: 'default'
 });
 /**
- * Pubflow provider for React
+ * Pubflow Provider Component
  */
-function PubflowProvider({ children, config, instances, defaultInstance = 'default', onSessionExpired, onSessionRefreshed, showSessionAlerts = false, persistentCache = { enabled: false }, loginRedirectPath = '/login', publicPaths = ['/login', '/register', '/forgot-password'], enableDebugTools = false, theme = {} }) {
-    const [isInitialized, setIsInitialized] = React.useState(false);
+function PubflowProvider({ children, config, instances, defaultInstance = 'default', enableDebugTools = false, showSessionAlerts = false, persistentCache = { enabled: false }, theme = {}, loginRedirectPath = '/login', publicPaths = [] }) {
     const [contextValue, setContextValue] = React.useState({
         instances: {},
         defaultInstance
     });
-    // Configure debug tools
-    React.useEffect(() => {
-        if (enableDebugTools) {
-            console.log('Pubflow debug tools enabled');
-            // Add debug utilities to window object
-            if (typeof window !== 'undefined') {
-                window.pubflowDebug = {
-                    getInstances: () => contextValue.instances,
-                    getDefaultInstance: () => contextValue.defaultInstance,
-                    clearStorage: async () => {
-                        const storage = new BrowserStorageAdapter();
-                        await storage.removeItem('pubflow_session_id');
-                        await storage.removeItem('pubflow_user_data');
-                        console.log('Pubflow storage cleared');
-                    },
-                    loginRedirectPath,
-                    publicPaths,
-                    theme
-                };
-            }
-        }
-    }, [enableDebugTools]); // ✅ OPTIMIZED: Only enableDebugTools as dependency
-    // Handle session expiration
+    // Session handlers
     const handleSessionExpired = React.useCallback(() => {
-        if (showSessionAlerts) {
-            alert('Your session has expired. Please log in again.');
-        }
-        if (onSessionExpired) {
-            onSessionExpired();
+        if (showSessionAlerts && typeof window !== 'undefined') {
+            console.warn('Session expired');
         }
-    }, [onSessionExpired, showSessionAlerts]);
-    // Handle session refresh
+    }, [showSessionAlerts]);
     const handleSessionRefreshed = React.useCallback(() => {
-        if (showSessionAlerts) {
-            alert('Your session has been refreshed.');
+        if (showSessionAlerts && typeof window !== 'undefined') {
+            console.log('Session refreshed');
         }
-        if (onSessionRefreshed) {
-            onSessionRefreshed();
-        }
-    }, [onSessionRefreshed, showSessionAlerts]);
+    }, [showSessionAlerts]);
+    // Initialize instances
     React.useEffect(() => {
         let isMounted = true;
         const initialize = async () => {
             var _a, _b;
             try {
-                // Initialize instances
                 const instancesMap = {};
                 if (instances && instances.length > 0) {
                     // Initialize multiple instances
                     for (const instanceConfig of instances) {
                         if (!isMounted)
-                            return; // Prevent state updates if unmounted
-                        // Initialize configuration
+                            return;
                         const fullConfig = core.initConfig({
                             ...instanceConfig,
                             sessionConfig: {
@@ -278,38 +247,21 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                                 onSessionRefreshed: handleSessionRefreshed
                             }
                         }, instanceConfig.id);
-                        // Create storage adapter
                         const storage = new BrowserStorageAdapter({
                             prefix: (_a = fullConfig.storageConfig) === null || _a === void 0 ? void 0 : _a.prefix
                         });
-                        // Create API client
                         const apiClient = new core.ApiClient(fullConfig, storage);
-                        // Create auth service
                         const authService = new core.AuthService(apiClient, storage, fullConfig);
-                        // Get current user (optimized - no await in initialization)
+                        // Get current user (non-blocking)
                         let user = null;
                         let isAuthenticated = false;
-                        // Don't block initialization with API calls
-                        authService.getCurrentUser().then(currentUser => {
-                            if (isMounted && currentUser) {
-                                setContextValue(prev => ({
-                                    ...prev,
-                                    instances: {
-                                        ...prev.instances,
-                                        [instanceConfig.id]: {
-                                            ...prev.instances[instanceConfig.id],
-                                            user: currentUser,
-                                            isAuthenticated: true,
-                                            isLoading: false
-                                        }
-                                    }
-                                }));
-                            }
-                        }).catch(error => {
-                            console.error(`Error getting current user for instance ${instanceConfig.id}:`, error);
-                        });
-                        // Create instance with optimized functions
-                        const createInstanceFunctions = (id) => ({
+                        instancesMap[instanceConfig.id] = {
+                            config: fullConfig,
+                            apiClient,
+                            authService,
+                            user,
+                            isAuthenticated,
+                            isLoading: true,
                             login: async (credentials) => {
                                 const result = await authService.login(credentials);
                                 if (result.success && result.user && isMounted) {
@@ -317,10 +269,11 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                                         ...prev,
                                         instances: {
                                             ...prev.instances,
-                                            [id]: {
-                                                ...prev.instances[id],
+                                            [instanceConfig.id]: {
+                                                ...prev.instances[instanceConfig.id],
                                                 user: result.user,
-                                                isAuthenticated: true
+                                                isAuthenticated: true,
+                                                isLoading: false
                                             }
                                         }
                                     }));
@@ -334,10 +287,11 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                                         ...prev,
                                         instances: {
                                             ...prev.instances,
-                                            [id]: {
-                                                ...prev.instances[id],
+                                            [instanceConfig.id]: {
+                                                ...prev.instances[instanceConfig.id],
                                                 user: null,
-                                                isAuthenticated: false
+                                                isAuthenticated: false,
+                                                isLoading: false
                                             }
                                         }
                                     }));
@@ -350,31 +304,52 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                                         ...prev,
                                         instances: {
                                             ...prev.instances,
-                                            [id]: {
-                                                ...prev.instances[id],
+                                            [instanceConfig.id]: {
+                                                ...prev.instances[instanceConfig.id],
                                                 user: result.user || null,
-                                                isAuthenticated: result.isValid
+                                                isAuthenticated: result.isValid,
+                                                isLoading: false
                                             }
                                         }
                                     }));
                                 }
                                 return result;
                             }
-                        });
-                        instancesMap[instanceConfig.id] = {
-                            config: fullConfig,
-                            apiClient,
-                            authService,
-                            user,
-                            isAuthenticated,
-                            isLoading: true, // Start as loading
-                            ...createInstanceFunctions(instanceConfig.id)
                         };
+                        // Load user asynchronously
+                        authService.getCurrentUser().then(currentUser => {
+                            if (isMounted) {
+                                setContextValue(prev => ({
+                                    ...prev,
+                                    instances: {
+                                        ...prev.instances,
+                                        [instanceConfig.id]: {
+                                            ...prev.instances[instanceConfig.id],
+                                            user: currentUser,
+                                            isAuthenticated: !!currentUser,
+                                            isLoading: false
+                                        }
+                                    }
+                                }));
+                            }
+                        }).catch(() => {
+                            if (isMounted) {
+                                setContextValue(prev => ({
+                                    ...prev,
+                                    instances: {
+                                        ...prev.instances,
+                                        [instanceConfig.id]: {
+                                            ...prev.instances[instanceConfig.id],
+                                            isLoading: false
+                                        }
+                                    }
+                                }));
+                            }
+                        });
                     }
                 }
                 else if (config) {
-                    // Initialize single instance
-                    // Initialize configuration
+                    // Single instance mode (simplified)
                     const fullConfig = core.initConfig({
                         ...config,
                         sessionConfig: {
@@ -382,37 +357,22 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                             onSessionExpired: handleSessionExpired,
                             onSessionRefreshed: handleSessionRefreshed
                         }
-                    }, defaultInstance);
-                    // Create storage adapter
+                    }, config.id || defaultInstance);
                     const storage = new BrowserStorageAdapter({
                         prefix: (_b = fullConfig.storageConfig) === null || _b === void 0 ? void 0 : _b.prefix
                     });
-                    // Create API client
                     const apiClient = new core.ApiClient(fullConfig, storage);
-                    // Create auth service
                     const authService = new core.AuthService(apiClient, storage, fullConfig);
-                    // Get current user
-                    let user = null;
-                    let isAuthenticated = false;
-                    try {
-                        user = await authService.getCurrentUser();
-                        isAuthenticated = !!user;
-                    }
-                    catch (error) {
-                        console.error('Error getting current user:', error);
-                    }
-                    // Create instance
                     instancesMap[defaultInstance] = {
                         config: fullConfig,
                         apiClient,
                         authService,
-                        user,
-                        isAuthenticated,
-                        isLoading: false,
+                        user: null,
+                        isAuthenticated: false,
+                        isLoading: true,
                         login: async (credentials) => {
                             const result = await authService.login(credentials);
-                            if (result.success && result.user) {
-                                // Update instance
+                            if (result.success && result.user && isMounted) {
                                 setContextValue(prev => ({
                                     ...prev,
                                     instances: {
@@ -420,7 +380,8 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                                         [defaultInstance]: {
                                             ...prev.instances[defaultInstance],
                                             user: result.user,
-                                            isAuthenticated: true
+                                            isAuthenticated: true,
+                                            isLoading: false
                                         }
                                     }
                                 }));
@@ -429,65 +390,107 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                         },
                         logout: async () => {
                             await authService.logout();
-                            // Update instance
+                            if (isMounted) {
+                                setContextValue(prev => ({
+                                    ...prev,
+                                    instances: {
+                                        ...prev.instances,
+                                        [defaultInstance]: {
+                                            ...prev.instances[defaultInstance],
+                                            user: null,
+                                            isAuthenticated: false,
+                                            isLoading: false
+                                        }
+                                    }
+                                }));
+                            }
+                        },
+                        validateSession: async () => {
+                            const result = await authService.validateSession();
+                            if (isMounted) {
+                                setContextValue(prev => ({
+                                    ...prev,
+                                    instances: {
+                                        ...prev.instances,
+                                        [defaultInstance]: {
+                                            ...prev.instances[defaultInstance],
+                                            user: result.user || null,
+                                            isAuthenticated: result.isValid,
+                                            isLoading: false
+                                        }
+                                    }
+                                }));
+                            }
+                            return result;
+                        }
+                    };
+                    // Load user asynchronously
+                    authService.getCurrentUser().then(currentUser => {
+                        if (isMounted) {
                             setContextValue(prev => ({
                                 ...prev,
                                 instances: {
                                     ...prev.instances,
                                     [defaultInstance]: {
                                         ...prev.instances[defaultInstance],
-                                        user: null,
-                                        isAuthenticated: false
+                                        user: currentUser,
+                                        isAuthenticated: !!currentUser,
+                                        isLoading: false
                                     }
                                 }
                             }));
-                        },
-                        validateSession: async () => {
-                            const result = await authService.validateSession();
-                            // Update instance
+                        }
+                    }).catch(() => {
+                        if (isMounted) {
                             setContextValue(prev => ({
                                 ...prev,
                                 instances: {
                                     ...prev.instances,
                                     [defaultInstance]: {
                                         ...prev.instances[defaultInstance],
-                                        user: result.user || null,
-                                        isAuthenticated: result.isValid
+                                        isLoading: false
                                     }
                                 }
                             }));
-                            return result;
                         }
-                    };
+                    });
+                }
+                if (isMounted) {
+                    setContextValue({
+                        instances: instancesMap,
+                        defaultInstance
+                    });
                 }
-                // Set context value
-                setContextValue({
-                    instances: instancesMap,
-                    defaultInstance
-                });
-                // Set initialized
-                setIsInitialized(true);
             }
             catch (error) {
                 console.error('Error initializing Pubflow:', error);
             }
         };
         initialize();
-        // Cleanup function
         return () => {
             isMounted = false;
         };
     }, [config, instances, defaultInstance, handleSessionExpired, handleSessionRefreshed]);
-    // Show loading state
-    if (!isInitialized) {
-        return null;
-    }
-    // If persistent cache is enabled, wrap with SWRConfig
-    if (persistentCache.enabled && persistentCache.provider) {
-        return (jsxRuntime.jsx(useSWR.SWRConfig, { value: { provider: persistentCache.provider }, children: jsxRuntime.jsx(PubflowContext.Provider, { value: contextValue, children: children }) }));
-    }
-    // Otherwise, just use the regular provider
-    return (jsxRuntime.jsx(PubflowContext.Provider, { value: contextValue, children: children }));
+    // Debug tools (simplified)
+    React.useEffect(() => {
+        if (enableDebugTools && typeof window !== 'undefined') {
+            window.pubflowDebug = {
+                getInstances: () => contextValue.instances,
+                getDefaultInstance: () => contextValue.defaultInstance
+            };
+        }
+    }, [enableDebugTools]);
+    // SWR configuration
+    const swrConfig = {
+        revalidateOnFocus: false,
+        revalidateOnReconnect: true,
+        ...(persistentCache.enabled && {
+            provider: () => new Map(),
+            isOnline: () => true,
+            isVisible: () => true
+        })
+    };
+    return (jsxRuntime.jsx(PubflowContext.Provider, { value: contextValue, children: jsxRuntime.jsx(useSWR.SWRConfig, { value: swrConfig, children: children }) }));
 }
 
 /**
@@ -503,7 +506,6 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
  */
 function useAuth(instanceId) {
     const context = React.useContext(PubflowContext);
-    const [isLoading, setIsLoading] = React.useState(false);
     if (!context) {
         throw new Error('useAuth must be used within a PubflowProvider');
     }
@@ -512,68 +514,14 @@ function useAuth(instanceId) {
     if (!pubflowInstance) {
         throw new Error(`Pubflow instance '${instance}' not found`);
     }
-    // Wrap login to handle loading state
-    const login = React.useCallback(async (credentials) => {
-        setIsLoading(true);
-        try {
-            return await pubflowInstance.login(credentials);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Wrap logout to handle loading state
-    const logout = React.useCallback(async () => {
-        setIsLoading(true);
-        try {
-            await pubflowInstance.logout();
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Wrap validateSession to handle loading state
-    const validateSession = React.useCallback(async () => {
-        setIsLoading(true);
-        try {
-            return await pubflowInstance.validateSession();
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Add refreshUser function to manually refresh user data
-    const refreshUser = React.useCallback(async () => {
-        setIsLoading(true);
-        try {
-            const result = await pubflowInstance.validateSession();
-            return result.user || null;
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Validate session on mount
-    React.useEffect(() => {
-        const validate = async () => {
-            try {
-                await validateSession();
-            }
-            catch (error) {
-                console.error('Error validating session:', error);
-            }
-        };
-        validate();
-    }, [validateSession]);
     return {
         // Ensure user is never undefined
         user: pubflowInstance.user || null,
         isAuthenticated: pubflowInstance.isAuthenticated,
-        isLoading,
-        login,
-        logout,
-        validateSession,
-        refreshUser
+        isLoading: pubflowInstance.isLoading,
+        login: pubflowInstance.login,
+        logout: pubflowInstance.logout,
+        validateSession: pubflowInstance.validateSession
     };
 }
 
@@ -8612,6 +8560,68 @@ function BridgeList({ renderItem, showPagination = true, showSearch = true, show
                                 }) })), renderPagination()] })] })] }));
 }
 
+/**
+ * Asset Utilities for Pubflow React
+ *
+ * Utilities for handling assets like logos, images, and other media files
+ * Supports both external URLs and internal assets with proper Vite/bundler integration
+ */
+/**
+ * Process asset URL - supports both external URLs and internal assets
+ *
+ * @param assetUrl - The asset URL to process
+ * @returns Processed URL ready for use in src attributes
+ */
+function processAssetUrl(assetUrl) {
+    // Return non-string values as-is (React components, null, undefined)
+    if (!assetUrl || typeof assetUrl !== 'string') {
+        return assetUrl;
+    }
+    // Return empty string as-is (no logo case)
+    if (assetUrl.trim() === '') {
+        return '';
+    }
+    // Check if it's an external URL (starts with http:// or https://)
+    if (assetUrl.startsWith('http://') || assetUrl.startsWith('https://')) {
+        return assetUrl;
+    }
+    // Check if it's a data URL (base64 encoded image)
+    if (assetUrl.startsWith('data:')) {
+        return assetUrl;
+    }
+    // Check if it's already a processed Vite asset (starts with /)
+    if (assetUrl.startsWith('/')) {
+        return assetUrl;
+    }
+    // Check if it's a blob URL
+    if (assetUrl.startsWith('blob:')) {
+        return assetUrl;
+    }
+    // For relative paths or simple filenames, assume they're in the public directory
+    // This handles cases like 'logo.svg', './logo.png', '../assets/logo.jpg', etc.
+    if (assetUrl.includes('.')) {
+        // Remove leading ./ if present
+        const cleanPath = assetUrl.replace(/^\.\//, '');
+        // If it starts with ../, keep it as is (relative to current directory)
+        if (assetUrl.startsWith('../')) {
+            return assetUrl;
+        }
+        // For simple filenames or paths, prepend with /
+        return `/${cleanPath}`;
+    }
+    // Return as-is for any other cases
+    return assetUrl;
+}
+/**
+ * Process logo URL specifically - alias for processAssetUrl with better naming
+ *
+ * @param logoUrl - The logo URL to process
+ * @returns Processed URL ready for use in img src
+ */
+function processLogoUrl(logoUrl) {
+    return processAssetUrl(logoUrl);
+}
+
 /**
  * Professional login form component
  */
@@ -8792,7 +8802,7 @@ function LoginForm({ config = {}, onSuccess, onError, onPasswordReset, onAccount
             textAlign: 'center'
         }
     };
-    return (jsxRuntime.jsxs("div", { className: className, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsxRuntime.jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Enter your password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxContainer, children: [jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsxRuntime.jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsxRuntime.jsx("button", { type: "submit", style: {
+    return (jsxRuntime.jsxs("div", { className: className, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsxRuntime.jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Enter your password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxContainer, children: [jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsxRuntime.jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsxRuntime.jsx("button", { type: "submit", style: {
                             ...styles.loginButton,
                             opacity: isLoading ? 0.8 : 1,
                             cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9042,7 +9052,7 @@ function PasswordResetForm({ config = {}, onSuccess, onError, onBackToLogin, res
     const renderStep = () => {
         switch (step) {
             case 'request':
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Reset Password" }), jsxRuntime.jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxRuntime.jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsx("button", { type: "submit", style: {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Reset Password" }), jsxRuntime.jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxRuntime.jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9306,7 +9316,7 @@ function AccountCreationForm({ config = {}, onSuccess, onError, onBackToLogin })
     const renderStep = () => {
         switch (step) {
             case 'form':
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Create Account" }), jsxRuntime.jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxRuntime.jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your first name", value: formData.name, onChange: (e) => updateField('name', e.target.value), autoComplete: "given-name", disabled: isLoading, required: true })] }), errors.name && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.name })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your last name", value: formData.lastName, onChange: (e) => updateField('lastName', e.target.value), autoComplete: "family-name", disabled: isLoading, required: true })] }), errors.lastName && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: formData.email, onChange: (e) => updateField('email', e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] }), errors.email && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.email })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Create a password", value: formData.password, onChange: (e) => updateField('password', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.password })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showConfirmPassword ? 'text' : 'password', style: styles.input, placeholder: "Confirm your password", value: formData.confirmPassword, onChange: (e) => updateField('confirmPassword', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsxRuntime.jsx("button", { type: "submit", style: {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Create Account" }), jsxRuntime.jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxRuntime.jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your first name", value: formData.name, onChange: (e) => updateField('name', e.target.value), autoComplete: "given-name", disabled: isLoading, required: true })] }), errors.name && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.name })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your last name", value: formData.lastName, onChange: (e) => updateField('lastName', e.target.value), autoComplete: "family-name", disabled: isLoading, required: true })] }), errors.lastName && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: formData.email, onChange: (e) => updateField('email', e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] }), errors.email && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.email })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Create a password", value: formData.password, onChange: (e) => updateField('password', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.password })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showConfirmPassword ? 'text' : 'password', style: styles.input, placeholder: "Confirm your password", value: formData.confirmPassword, onChange: (e) => updateField('confirmPassword', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsxRuntime.jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9583,6 +9593,131 @@ function createStyles(theme) {
     };
 }
 
+/**
+ * Authentication Guard Hook for React
+ *
+ * Framework-agnostic hook for handling authentication validation and redirects
+ */
+/**
+ * Hook for handling authentication validation and redirects
+ *
+ * This hook is framework-agnostic and requires the user to provide
+ * their own redirect function (e.g., Next.js router, React Router, etc.)
+ *
+ * @param options Hook options
+ * @returns Authentication guard result
+ */
+function useAuthGuard({ validateOnMount = true, allowedTypes = ['authenticated'], instanceId, onRedirect, onSessionExpired, loginRedirectPath = '/login', accessDeniedPath = '/access-denied', enableLogging = false } = {}) {
+    const { user, isAuthenticated, isLoading, validateSession } = useAuth(instanceId);
+    // Check if user is authorized based on user type
+    const isAuthorized = React.useCallback(() => {
+        if (!isAuthenticated || !user) {
+            return false;
+        }
+        // If allowedTypes includes 'authenticated', any authenticated user is allowed
+        if (allowedTypes.includes('authenticated')) {
+            return true;
+        }
+        // Check specific user types
+        const userType = user.userType || user.user_type || '';
+        return allowedTypes.some(type => type.toLowerCase() === userType.toLowerCase());
+    }, [isAuthenticated, user, allowedTypes]);
+    const authorized = isAuthorized();
+    // Determine redirect reason
+    const getRedirectReason = React.useCallback(() => {
+        if (isLoading) {
+            return null;
+        }
+        if (!isAuthenticated) {
+            return 'unauthenticated';
+        }
+        if (!authorized) {
+            return 'unauthorized';
+        }
+        return null;
+    }, [isLoading, isAuthenticated, authorized]);
+    const redirectReason = getRedirectReason();
+    // Validate session on mount
+    React.useEffect(() => {
+        if (validateOnMount && isAuthenticated) {
+            validateSession().then(({ isValid }) => {
+                if (!isValid) {
+                    if (enableLogging) {
+                        console.warn('useAuthGuard: Session validation failed');
+                    }
+                    // Call session expired handler
+                    if (onSessionExpired) {
+                        onSessionExpired();
+                    }
+                    // Redirect to login
+                    if (onRedirect) {
+                        onRedirect(loginRedirectPath, 'session-expired');
+                    }
+                }
+            }).catch(error => {
+                if (enableLogging) {
+                    console.error('useAuthGuard: Session validation error:', error);
+                }
+            });
+        }
+    }, [validateOnMount, isAuthenticated, validateSession, onSessionExpired, onRedirect, loginRedirectPath, enableLogging]);
+    // Handle authentication redirects
+    React.useEffect(() => {
+        if (isLoading || !onRedirect) {
+            return;
+        }
+        if (!isAuthenticated) {
+            if (enableLogging) {
+                console.warn('useAuthGuard: User not authenticated, redirecting to login');
+            }
+            onRedirect(loginRedirectPath, 'unauthenticated');
+            return;
+        }
+        if (!authorized) {
+            if (enableLogging) {
+                console.warn('useAuthGuard: User not authorized for this page, redirecting to access denied');
+            }
+            onRedirect(accessDeniedPath, 'unauthorized');
+            return;
+        }
+    }, [isLoading, isAuthenticated, authorized, onRedirect, loginRedirectPath, accessDeniedPath, enableLogging]);
+    return {
+        user,
+        isAuthenticated,
+        isLoading,
+        isAuthorized: authorized,
+        validateSession,
+        redirectReason
+    };
+}
+/**
+ * Simple authentication guard hook with automatic redirects
+ *
+ * This is a simplified version that uses window.location for redirects
+ * Suitable for simple React apps without complex routing
+ *
+ * @param options Hook options
+ * @returns Authentication guard result
+ */
+function useSimpleAuthGuard(options = {}) {
+    var _a;
+    const handleRedirect = React.useCallback((path, reason) => {
+        if (typeof window !== 'undefined') {
+            // Add current path as redirect parameter
+            const currentPath = window.location.pathname + window.location.search;
+            const redirectUrl = reason === 'unauthenticated'
+                ? `${path}?redirect=${encodeURIComponent(currentPath)}`
+                : path;
+            window.location.href = redirectUrl;
+        }
+    }, []);
+    return useAuthGuard({
+        ...options,
+        onRedirect: handleRedirect,
+        enableLogging: (_a = options.enableLogging) !== null && _a !== void 0 ? _a : true
+    });
+}
+
 /**
  * Bridge API Raw Hook for React
  *
@@ -9662,65 +9797,6 @@ function useBridgeApiRaw(instanceId) {
     };
 }
 
-/**
- * Server Authentication Hook for React
- *
- * Provides a hook for handling authentication with automatic redirects
- */
-/**
- * Hook for handling authentication with automatic redirects
- *
- * @param options Hook options
- * @returns Authentication hook result
- */
-function useServerAuth({ loginRedirectPath = '/login', allowedTypes = ['authenticated'], validateOnMount = true, instanceId, onRedirect } = {}) {
-    const { user, isAuthenticated, isLoading, validateSession } = useAuth(instanceId);
-    // Default redirect function
-    const defaultRedirect = (path) => {
-        if (typeof window !== 'undefined') {
-            const currentPath = window.location.pathname;
-            const redirectUrl = `${path}?redirect=${encodeURIComponent(currentPath)}`;
-            window.location.href = redirectUrl;
-        }
-    };
-    const redirect = onRedirect || defaultRedirect;
-    React.useEffect(() => {
-        // Validate session on mount if configured
-        if (validateOnMount) {
-            validateSession().then(({ isValid }) => {
-                if (!isValid) {
-                    redirect(loginRedirectPath);
-                }
-            });
-        }
-    }, [validateOnMount, loginRedirectPath, validateSession, redirect]);
-    React.useEffect(() => {
-        // Skip if still loading
-        if (isLoading) {
-            return;
-        }
-        // Redirect if not authenticated
-        if (!isAuthenticated) {
-            redirect(loginRedirectPath);
-            return;
-        }
-        // Check user type if allowedTypes doesn't include 'authenticated'
-        if (!allowedTypes.includes('authenticated') && user) {
-            const userType = user.userType || '';
-            const isAllowed = allowedTypes.some(type => type.toLowerCase() === userType.toLowerCase());
-            if (!isAllowed) {
-                redirect('/access-denied');
-            }
-        }
-    }, [isLoading, isAuthenticated, user, allowedTypes, loginRedirectPath, redirect]);
-    return {
-        user,
-        isAuthenticated,
-        isLoading,
-        validateSession
-    };
-}
-
 /**
  * Search Query Builder Hook for React
  *
@@ -9958,6 +10034,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.createStyles = createStyles;
 exports.generateCSSVariables = generateCSSVariables;
 exports.useAuth = useAuth;
+exports.useAuthGuard = useAuthGuard;
 exports.useBridgeApi = useBridgeApi;
 exports.useBridgeApiRaw = useBridgeApiRaw;
 exports.useBridgeCrud = useBridgeCrud;
@@ -9966,7 +10043,7 @@ exports.useBridgeQuery = useBridgeQuery;
 exports.useNetworkStatus = useNetworkStatus;
 exports.useRequireAuth = useRequireAuth;
 exports.useSearchQueryBuilder = useSearchQueryBuilder;
-exports.useServerAuth = useServerAuth;
+exports.useSimpleAuthGuard = useSimpleAuthGuard;
 exports.useTheme = useTheme;
 Object.keys(core).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {