@pubflow/react 0.2.1 → 0.3.3

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { createStorageKey, initConfig, ApiClient, AuthService, BridgeApiService, validateWithSchema, FilterOperator } from '@pubflow/core';
 export * from '@pubflow/core';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useState, useEffect, useCallback, useContext } from 'react';
+import React, { createContext, useState, useCallback, useEffect, useContext } from 'react';
 import useSWR, { SWRConfig, useSWRConfig } from 'swr';
 
 /**
@@ -208,67 +208,36 @@ const PubflowContext = 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] = useState(false);
+function PubflowProvider({ children, config, instances, defaultInstance = 'default', enableDebugTools = false, showSessionAlerts = false, persistentCache = { enabled: false }, theme = {}, loginRedirectPath = '/login', publicPaths = [] }) {
     const [contextValue, setContextValue] = useState({
         instances: {},
         defaultInstance
     });
-    // Configure debug tools
-    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 = 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 = 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
     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 = initConfig({
                             ...instanceConfig,
                             sessionConfig: {
@@ -277,38 +246,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 ApiClient(fullConfig, storage);
-                        // Create auth service
                         const authService = new 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) {
@@ -316,10 +268,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
                                             }
                                         }
                                     }));
@@ -333,10 +286,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
                                             }
                                         }
                                     }));
@@ -349,31 +303,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 = initConfig({
                         ...config,
                         sessionConfig: {
@@ -381,37 +356,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 ApiClient(fullConfig, storage);
-                    // Create auth service
                     const authService = new 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: {
@@ -419,7 +379,8 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                                         [defaultInstance]: {
                                             ...prev.instances[defaultInstance],
                                             user: result.user,
-                                            isAuthenticated: true
+                                            isAuthenticated: true,
+                                            isLoading: false
                                         }
                                     }
                                 }));
@@ -428,65 +389,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 (jsx(SWRConfig, { value: { provider: persistentCache.provider }, children: jsx(PubflowContext.Provider, { value: contextValue, children: children }) }));
-    }
-    // Otherwise, just use the regular provider
-    return (jsx(PubflowContext.Provider, { value: contextValue, children: children }));
+    // Debug tools (simplified)
+    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 (jsx(PubflowContext.Provider, { value: contextValue, children: jsx(SWRConfig, { value: swrConfig, children: children }) }));
 }
 
 /**
@@ -502,7 +505,6 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
  */
 function useAuth(instanceId) {
     const context = useContext(PubflowContext);
-    const [isLoading, setIsLoading] = useState(false);
     if (!context) {
         throw new Error('useAuth must be used within a PubflowProvider');
     }
@@ -511,68 +513,14 @@ function useAuth(instanceId) {
     if (!pubflowInstance) {
         throw new Error(`Pubflow instance '${instance}' not found`);
     }
-    // Wrap login to handle loading state
-    const login = useCallback(async (credentials) => {
-        setIsLoading(true);
-        try {
-            return await pubflowInstance.login(credentials);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Wrap logout to handle loading state
-    const logout = useCallback(async () => {
-        setIsLoading(true);
-        try {
-            await pubflowInstance.logout();
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Wrap validateSession to handle loading state
-    const validateSession = useCallback(async () => {
-        setIsLoading(true);
-        try {
-            return await pubflowInstance.validateSession();
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Add refreshUser function to manually refresh user data
-    const refreshUser = useCallback(async () => {
-        setIsLoading(true);
-        try {
-            const result = await pubflowInstance.validateSession();
-            return result.user || null;
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [pubflowInstance]);
-    // Validate session on mount
-    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
     };
 }
 
@@ -8611,6 +8559,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
  */
@@ -8791,7 +8801,7 @@ function LoginForm({ config = {}, onSuccess, onError, onPasswordReset, onAccount
             textAlign: 'center'
         }
     };
-    return (jsxs("div", { className: className, style: styles.container, children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), 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 })] })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), 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 }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxs("div", { style: styles.checkboxContainer, children: [jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsx("button", { type: "submit", style: {
+    return (jsxs("div", { className: className, style: styles.container, children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), 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 })] })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), 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 }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxs("div", { style: styles.checkboxContainer, children: [jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsx("button", { type: "submit", style: {
                             ...styles.loginButton,
                             opacity: isLoading ? 0.8 : 1,
                             cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9041,7 +9051,7 @@ function PasswordResetForm({ config = {}, onSuccess, onError, onBackToLogin, res
     const renderStep = () => {
         switch (step) {
             case 'request':
-                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Reset Password" }), jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), 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 })] })] }), jsx("button", { type: "submit", style: {
+                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Reset Password" }), jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxs("div", { style: styles.errorContainer, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: styles.errorText, children: error })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxs("div", { style: styles.inputContainer, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), 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 })] })] }), jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9305,7 +9315,7 @@ function AccountCreationForm({ config = {}, onSuccess, onError, onBackToLogin })
     const renderStep = () => {
         switch (step) {
             case 'form':
-                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Create Account" }), jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), 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 && jsx("div", { style: styles.errorText, children: errors.name })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), 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 && jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), 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 && jsx("div", { style: styles.errorText, children: errors.email })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), 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 }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsx("div", { style: styles.errorText, children: errors.password })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), 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 }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsx("button", { type: "submit", style: {
+                return (jsxs(Fragment, { children: [jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsx("h1", { style: styles.title, children: "Create Account" }), jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), 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 && jsx("div", { style: styles.errorText, children: errors.name })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), 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 && jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), 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 && jsx("div", { style: styles.errorText, children: errors.email })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), 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 }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsx("div", { style: styles.errorText, children: errors.password })] }), jsxs("div", { style: styles.inputGroup, children: [jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), 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 }), jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9582,6 +9592,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 = 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 = 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
+    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
+    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 = 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
  *
@@ -9661,65 +9796,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;
-    useEffect(() => {
-        // Validate session on mount if configured
-        if (validateOnMount) {
-            validateSession().then(({ isValid }) => {
-                if (!isValid) {
-                    redirect(loginRedirectPath);
-                }
-            });
-        }
-    }, [validateOnMount, loginRedirectPath, validateSession, redirect]);
-    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
  *
@@ -9941,5 +10017,5 @@ function useRequireAuth(options = {}) {
     };
 }
 
-export { AccountCreationForm, AdvancedFilter, BridgeForm, BridgeList, BridgeTable, BridgeView, BrowserStorageAdapter, LoginForm, OfflineIndicator, PasswordResetForm, PubflowContext, PubflowProvider, ThemeProvider, createStyles, generateCSSVariables, useAuth, useBridgeApi, useBridgeApiRaw, useBridgeCrud, useBridgeMutation, useBridgeQuery, useNetworkStatus, useRequireAuth, useSearchQueryBuilder, useServerAuth, useTheme };
+export { AccountCreationForm, AdvancedFilter, BridgeForm, BridgeList, BridgeTable, BridgeView, BrowserStorageAdapter, LoginForm, OfflineIndicator, PasswordResetForm, PubflowContext, PubflowProvider, ThemeProvider, createStyles, generateCSSVariables, useAuth, useAuthGuard, useBridgeApi, useBridgeApiRaw, useBridgeCrud, useBridgeMutation, useBridgeQuery, useNetworkStatus, useRequireAuth, useSearchQueryBuilder, useSimpleAuthGuard, useTheme };
 //# sourceMappingURL=index.esm.js.map