@djangocfg/layouts 1.2.30 → 1.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.30",
-    "@djangocfg/og-image": "^1.2.30",
-    "@djangocfg/ui": "^1.2.30",
+    "@djangocfg/api": "^1.2.32",
+    "@djangocfg/og-image": "^1.2.32",
+    "@djangocfg/ui": "^1.2.32",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.30",
+    "@djangocfg/typescript-config": "^1.2.32",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/context/AccountsContext.tsx

@@ -13,8 +13,9 @@
 
 "use client";
 
-import { createContext, useContext, ReactNode, useState, useCallback } from 'react';
+import { createContext, useContext, ReactNode, useState, useCallback, useRef, useEffect } from 'react';
 import { getCachedProfile, setCachedProfile, clearProfileCache } from '../hooks/useProfileCache';
+import { authLogger } from '../../utils/logger';
 import {
   api,
   usePartialUpdateAccountsProfilePartialUpdate,
@@ -54,7 +55,7 @@ export interface AccountsContextValue {
   updateProfile: (data: UserProfileUpdateRequest) => Promise<User>;
   partialUpdateProfile: (data: PatchedUserProfileUpdateRequest) => Promise<User>;
   uploadAvatar: (formData: FormData) => Promise<User>;
-  refreshProfile: () => Promise<User | undefined>;
+  refreshProfile: (callerId?: string) => Promise<User | undefined>;
 
   // Authentication
   requestOTP: (data: OTPRequestRequest) => Promise<OTPRequestResponse>;
@@ -87,6 +88,19 @@ export function AccountsProvider({ children }: AccountsProviderProps) {
   const [isLoadingProfile, setIsLoadingProfile] = useState(false);
   const [profileError, setProfileError] = useState<Error | null>(null);
 
+  // Use refs to access current state without adding to dependencies
+  const profileRef = useRef<User | undefined>(profile);
+  const isLoadingRef = useRef(false);
+
+  // Keep refs in sync with state
+  useEffect(() => {
+    profileRef.current = profile;
+  }, [profile]);
+
+  useEffect(() => {
+    isLoadingRef.current = isLoadingProfile;
+  }, [isLoadingProfile]);
+
   // Mutation hooks
   const updateMutation = useUpdateAccountsProfileUpdateUpdate();
   const partialUpdateMutation = usePartialUpdateAccountsProfilePartialUpdate();
@@ -95,13 +109,29 @@ export function AccountsProvider({ children }: AccountsProviderProps) {
   const otpVerifyMutation = useCreateAccountsOtpVerifyCreate();
   const tokenRefreshMutation = useCreateAccountsTokenRefreshCreate();
 
-  // Refresh profile - fetch and cache
-  const refreshProfile = useCallback(async (): Promise<User | undefined> => {
+  // Refresh profile - fetch and cache with stable callback
+  const refreshProfile = useCallback(async (callerId?: string): Promise<User | undefined> => {
+    // Use refs to check current state without creating dependency
+    const currentProfile = profileRef.current;
+    const currentLoading = isLoadingRef.current;
+
+    // Prevent duplicate calls if profile is already loaded and not loading
+    if (currentProfile && !currentLoading) {
+      authLogger.debug(`Profile already loaded, returning cached (caller: ${callerId})`);
+      return currentProfile;
+    }
+
     setIsLoadingProfile(true);
+    isLoadingRef.current = true;
     setProfileError(null);
     try {
+      // Log caller for debugging excessive API calls using consola logger
+      if (callerId) {
+        authLogger.debug(`Profile refresh called by: ${callerId}`);
+      }
       const result = await getAccountsProfileRetrieve(api as unknown as API);
       setProfile(result);
+      profileRef.current = result;
       // Save to cache with 1 hour TTL
       setCachedProfile(result);
       return result;
@@ -111,27 +141,28 @@ export function AccountsProvider({ children }: AccountsProviderProps) {
       throw err;
     } finally {
       setIsLoadingProfile(false);
+      isLoadingRef.current = false;
     }
-  }, []);
+  }, []); // Empty dependencies - callback is stable
 
   // Update profile (full)
   const updateProfile = async (data: UserProfileUpdateRequest): Promise<User> => {
     const result = await updateMutation(data, api as unknown as API);
-    await refreshProfile();
+    await refreshProfile('AccountsContext.updateProfile');
     return result as User;
   };
 
   // Partial update profile
   const partialUpdateProfile = async (data: PatchedUserProfileUpdateRequest): Promise<User> => {
     const result = await partialUpdateMutation(data, api as unknown as API);
-    await refreshProfile();
+    await refreshProfile('AccountsContext.partialUpdateProfile');
     return result as User;
   };
 
   // Upload avatar
   const uploadAvatar = async (formData: FormData): Promise<User> => {
     const result = await avatarMutation(formData, api as unknown as API);
-    await refreshProfile();
+    await refreshProfile('AccountsContext.uploadAvatar');
     return result as User;
   };
 
@@ -149,7 +180,7 @@ export function AccountsProvider({ children }: AccountsProviderProps) {
     if (result.access && result.refresh) {
       api.setToken(result.access, result.refresh);
       // Refresh profile to load user data with new token
-      await refreshProfile();
+      await refreshProfile('AccountsContext.verifyOTP');
     }
 
     return result as OTPVerifyResponse;

package/src/auth/context/AuthContext.tsx

@@ -59,6 +59,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   // Use refs to avoid dependency issues
   const userRef = useRef(user);
   const configRef = useRef(config);
+  const isLoadingProfileRef = useRef(false);
 
   // Update refs when values change
   useEffect(() => {
@@ -93,43 +94,58 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     return false;
   }, [clearAuthState]);
 
-  // Simple profile loading without retry - now uses AccountsContext
-  const loadCurrentProfile = useCallback(async (): Promise<void> => {
-    // console.log('[AuthContext] loadCurrentProfile called');
+  // Simple profile loading without retry - now uses AccountsContext with memoization
+  const loadCurrentProfile = useCallback(async (callerId?: string): Promise<void> => {
+    const finalCallerId = callerId || 'AuthContext.loadCurrentProfile';
+
+    // Check if profile loading is already in progress
+    if (isLoadingProfileRef.current) {
+      authLogger.debug(`Profile loading already in progress, skipping duplicate call from: ${finalCallerId}`);
+      return;
+    }
+
+    authLogger.debug(`loadCurrentProfile called by: ${finalCallerId}`);
+
     try {
+      isLoadingProfileRef.current = true;
+
       // Ensure API clients are properly initialized with current token
       const isAuth = api.isAuthenticated();
       const token = api.getToken();
-      // console.log('[AuthContext] isAuthenticated:', isAuth, 'token:', token ? token.substring(0, 20) + '...' : 'null');
+      // authLogger.debug('isAuthenticated:', isAuth, 'token:', token ? token.substring(0, 20) + '...' : 'null');
 
       if (!isAuth) {
-        console.warn('[AuthContext] No valid authentication token, throwing error');
+        authLogger.warn('No valid authentication token, throwing error');
         throw new Error('No valid authentication token');
       }
 
-      // console.log('[AuthContext] Refreshing profile from AccountsContext...');
-      // Refresh profile from AccountsContext
-      const refreshedProfile = await accounts.refreshProfile();
+      // Check if profile is already loaded in AccountsContext to prevent duplicate API calls
+      if (accounts.profile && !accounts.isLoadingProfile) {
+        authLogger.debug('Profile already loaded in AccountsContext, skipping API call');
+        setInitialized(true);
+        return;
+      }
+
+      // Refresh profile from AccountsContext (now with memoization)
+      const refreshedProfile = await accounts.refreshProfile(finalCallerId);
 
       if (refreshedProfile) {
-        // console.log('[AuthContext] Profile loaded successfully:', refreshedProfile.id, 'is_staff:', refreshedProfile.is_staff, 'is_superuser:', refreshedProfile.is_superuser);
         authLogger.info('Profile loaded successfully:', refreshedProfile.id);
       } else {
-        console.warn('[AuthContext] Profile refresh returned undefined - but keeping tokens');
         authLogger.warn('Profile refresh returned undefined - but keeping tokens');
       }
 
       // Always mark as initialized if we have valid tokens
       // Don't clear tokens just because profile fetch failed
       setInitialized(true);
-      // console.log('[AuthContext] loadCurrentProfile completed, initialized=true');
     } catch (error) {
-      console.error('[AuthContext] Failed to load profile:', error);
       authLogger.error('Failed to load profile:', error);
       // Use global error handler first, fallback to clearing state
       if (!handleGlobalAuthError(error, 'loadCurrentProfile')) {
         clearAuthState('loadCurrentProfile:error');
       }
+    } finally {
+      isLoadingProfileRef.current = false;
     }
   }, [clearAuthState, handleGlobalAuthError, accounts]);
 

package/src/auth/context/types.ts

@@ -29,7 +29,7 @@ export interface AuthContextType {
   isLoading: boolean;
   isAuthenticated: boolean;
   isAdminUser: boolean;
-  loadCurrentProfile: () => Promise<void>;
+  loadCurrentProfile: (callerId?: string) => Promise<void>;
   checkAuthAndRedirect: () => Promise<void>;
 
   // Token Methods

package/src/auth/hooks/useAuthForm.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useAuth } from '../context';
 import { useAutoAuth } from './useAutoAuth';
 import { useLocalStorage } from './useLocalStorage';
+import { authLogger } from '../../utils/logger';
 
 export interface AuthFormState {
   identifier: string; // Email or phone number
@@ -269,7 +270,7 @@ export const useAuthForm = (options: UseAuthFormOptions): AuthFormState & AuthFo
   // Auto-detect OTP from URL query parameters
   useAutoAuth({
     onOTPDetected: (otp: string) => {
-      console.log('[useAuthForm] OTP detected, auto-submitting');
+      authLogger.info('OTP detected, auto-submitting');
       
       // Get saved identifier from auth context
       const savedEmail = getSavedEmail();

package/src/auth/hooks/useAutoAuth.ts

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+import { authLogger } from '../../utils/logger';
 
 export interface UseAutoAuthOptions {
   onOTPDetected?: (otp: string) => void;
@@ -21,7 +22,7 @@ export const useAutoAuth = (options: UseAutoAuthOptions = {}) => {
 
     // Handle OTP detection
     if (queryOtp && typeof queryOtp === 'string' && queryOtp.length === 6) {
-      console.log('[useAutoAuth] OTP detected in URL:', queryOtp);
+      authLogger.info('OTP detected in URL:', queryOtp);
       onOTPDetected?.(queryOtp);
     }
 

package/src/auth/hooks/useLocalStorage.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { authLogger } from '../../utils/logger';
 
 /**
  * Simple localStorage hook with better error handling
@@ -27,7 +28,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
         return item as T;
       }
     } catch (error) {
-      console.error(`Error reading localStorage key "${key}":`, error);
+      authLogger.error(`Error reading localStorage key "${key}":`, error);
       return initialValue;
     }
   });
@@ -41,13 +42,13 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
       
       // Limit to 1MB per item
       if (sizeInKB > 1024) {
-        console.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
+        authLogger.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
         return false;
       }
-      
+
       return true;
     } catch (error) {
-      console.error(`Error checking data size for key "${key}":`, error);
+      authLogger.error(`Error checking data size for key "${key}":`, error);
       return false;
     }
   };
@@ -72,7 +73,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error('Error clearing old localStorage data:', error);
+      authLogger.error('Error clearing old localStorage data:', error);
     }
   };
 
@@ -88,7 +89,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error('Error force clearing localStorage:', error);
+      authLogger.error('Error force clearing localStorage:', error);
     }
   };
 
@@ -99,7 +100,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
       
       // Check data size before attempting to save
       if (!checkDataSize(valueToStore)) {
-        console.warn(`Data size too large for key "${key}", removing key`);
+        authLogger.warn(`Data size too large for key "${key}", removing key`);
         // Remove the key if data is too large
         try {
           window.localStorage.removeItem(key);
@@ -127,10 +128,10 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
           window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
         } catch (storageError: any) {
           // If quota exceeded, clear old data and try again
-          if (storageError.name === 'QuotaExceededError' || 
-              storageError.code === 22 || 
+          if (storageError.name === 'QuotaExceededError' ||
+              storageError.code === 22 ||
               storageError.message?.includes('quota')) {
-            console.warn('localStorage quota exceeded, clearing old data...');
+            authLogger.warn('localStorage quota exceeded, clearing old data...');
             clearOldData();
             
             // Try again after clearing
@@ -143,7 +144,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
               }
               window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
             } catch (retryError) {
-              console.error(`Failed to set localStorage key "${key}" after clearing old data:`, retryError);
+              authLogger.error(`Failed to set localStorage key "${key}" after clearing old data:`, retryError);
               // If still fails, force clear all and try one more time
               try {
                 forceClearAll();
@@ -155,7 +156,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
                 }
                 window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
               } catch (finalError) {
-                console.error(`Failed to set localStorage key "${key}" after force clearing:`, finalError);
+                authLogger.error(`Failed to set localStorage key "${key}" after force clearing:`, finalError);
                 // If still fails, just update the state without localStorage
                 setStoredValue(valueToStore);
               }
@@ -166,7 +167,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error(`Error setting localStorage key "${key}":`, error);
+      authLogger.error(`Error setting localStorage key "${key}":`, error);
       // Still update the state even if localStorage fails
       const valueToStore = value instanceof Function ? value(storedValue) : value;
       setStoredValue(valueToStore);
@@ -183,17 +184,17 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
           window.localStorage.removeItem(`${key}_timestamp`);
         } catch (removeError: any) {
           // If removal fails due to quota, try to clear some data first
-          if (removeError.name === 'QuotaExceededError' || 
-              removeError.code === 22 || 
+          if (removeError.name === 'QuotaExceededError' ||
+              removeError.code === 22 ||
               removeError.message?.includes('quota')) {
-            console.warn('localStorage quota exceeded during removal, clearing old data...');
+            authLogger.warn('localStorage quota exceeded during removal, clearing old data...');
             clearOldData();
             
             try {
               window.localStorage.removeItem(key);
               window.localStorage.removeItem(`${key}_timestamp`);
             } catch (retryError) {
-              console.error(`Failed to remove localStorage key "${key}" after clearing:`, retryError);
+              authLogger.error(`Failed to remove localStorage key "${key}" after clearing:`, retryError);
               // If still fails, force clear all
               forceClearAll();
             }
@@ -203,7 +204,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error(`Error removing localStorage key "${key}":`, error);
+      authLogger.error(`Error removing localStorage key "${key}":`, error);
     }
   };
 

package/src/auth/hooks/useProfileCache.ts

@@ -36,7 +36,10 @@ export function getCachedProfile(): User | null {
     if (typeof window === 'undefined') return null;
 
     const cached = localStorage.getItem(CACHE_KEY);
-    if (!cached) return null;
+    if (!cached) {
+      profileLogger.debug('No cached profile found');
+      return null;
+    }
 
     const cachedData: CachedProfile = JSON.parse(cached);
 

package/src/auth/hooks/useSessionStorage.ts

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { authLogger } from '../../utils/logger';
 
 /**
  * Simple sessionStorage hook with better error handling
@@ -17,7 +18,7 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
       const item = window.sessionStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
-      console.error(`Error reading sessionStorage key "${key}":`, error);
+      authLogger.error(`Error reading sessionStorage key "${key}":`, error);
       return initialValue;
     }
   });
@@ -31,13 +32,13 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
       
       // Limit to 1MB per item
       if (sizeInKB > 1024) {
-        console.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
+        authLogger.warn(`Data size (${sizeInKB.toFixed(2)}KB) exceeds 1MB limit for key "${key}"`);
         return false;
       }
-      
+
       return true;
     } catch (error) {
-      console.error(`Error checking data size for key "${key}":`, error);
+      authLogger.error(`Error checking data size for key "${key}":`, error);
       return false;
     }
   };
@@ -62,7 +63,7 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error('Error clearing old sessionStorage data:', error);
+      authLogger.error('Error clearing old sessionStorage data:', error);
     }
   };
 
@@ -78,7 +79,7 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error('Error force clearing sessionStorage:', error);
+      authLogger.error('Error force clearing sessionStorage:', error);
     }
   };
 
@@ -89,7 +90,7 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
       
       // Check data size before attempting to save
       if (!checkDataSize(valueToStore)) {
-        console.warn(`Data size too large for key "${key}", removing key`);
+        authLogger.warn(`Data size too large for key "${key}", removing key`);
         // Remove the key if data is too large
         try {
           window.sessionStorage.removeItem(key);
@@ -112,10 +113,10 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
           window.sessionStorage.setItem(`${key}_timestamp`, Date.now().toString());
         } catch (storageError: any) {
           // If quota exceeded, clear old data and try again
-          if (storageError.name === 'QuotaExceededError' || 
-              storageError.code === 22 || 
+          if (storageError.name === 'QuotaExceededError' ||
+              storageError.code === 22 ||
               storageError.message?.includes('quota')) {
-            console.warn('sessionStorage quota exceeded, clearing old data...');
+            authLogger.warn('sessionStorage quota exceeded, clearing old data...');
             clearOldData();
             
             // Try again after clearing
@@ -123,14 +124,14 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
               window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
               window.sessionStorage.setItem(`${key}_timestamp`, Date.now().toString());
             } catch (retryError) {
-              console.error(`Failed to set sessionStorage key "${key}" after clearing old data:`, retryError);
+              authLogger.error(`Failed to set sessionStorage key "${key}" after clearing old data:`, retryError);
               // If still fails, force clear all and try one more time
               try {
                 forceClearAll();
                 window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
                 window.sessionStorage.setItem(`${key}_timestamp`, Date.now().toString());
               } catch (finalError) {
-                console.error(`Failed to set sessionStorage key "${key}" after force clearing:`, finalError);
+                authLogger.error(`Failed to set sessionStorage key "${key}" after force clearing:`, finalError);
                 // If still fails, just update the state without sessionStorage
                 setStoredValue(valueToStore);
               }
@@ -141,7 +142,7 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error(`Error setting sessionStorage key "${key}":`, error);
+      authLogger.error(`Error setting sessionStorage key "${key}":`, error);
       // Still update the state even if sessionStorage fails
       const valueToStore = value instanceof Function ? value(storedValue) : value;
       setStoredValue(valueToStore);
@@ -158,17 +159,17 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
           window.sessionStorage.removeItem(`${key}_timestamp`);
         } catch (removeError: any) {
           // If removal fails due to quota, try to clear some data first
-          if (removeError.name === 'QuotaExceededError' || 
-              removeError.code === 22 || 
+          if (removeError.name === 'QuotaExceededError' ||
+              removeError.code === 22 ||
               removeError.message?.includes('quota')) {
-            console.warn('sessionStorage quota exceeded during removal, clearing old data...');
+            authLogger.warn('sessionStorage quota exceeded during removal, clearing old data...');
             clearOldData();
             
             try {
               window.sessionStorage.removeItem(key);
               window.sessionStorage.removeItem(`${key}_timestamp`);
             } catch (retryError) {
-              console.error(`Failed to remove sessionStorage key "${key}" after clearing:`, retryError);
+              authLogger.error(`Failed to remove sessionStorage key "${key}" after clearing:`, retryError);
               // If still fails, force clear all
               forceClearAll();
             }
@@ -178,7 +179,7 @@ export function useSessionStorage<T>(key: string, initialValue: T) {
         }
       }
     } catch (error) {
-      console.error(`Error removing sessionStorage key "${key}":`, error);
+      authLogger.error(`Error removing sessionStorage key "${key}":`, error);
     }
   };
 

package/src/layouts/AppLayout/components/ErrorBoundary.tsx

@@ -11,6 +11,7 @@
 import React, { Component, ReactNode } from 'react';
 import { ErrorLayout } from '../../ErrorLayout';
 import { Bug } from 'lucide-react';
+import logger from '../../../utils/logger';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -46,8 +47,8 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     // Log error
-    console.error('ErrorBoundary caught error:', error);
-    console.error('Error info:', errorInfo);
+    logger.error('ErrorBoundary caught error:', error);
+    logger.error('Error info:', errorInfo);
 
     // Call optional callback
     this.props.onError?.(error, errorInfo);

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-08T09:39:52.478Z
+ * Last updated: 2025-11-10T07:27:36.920Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.30"
+    "version": "1.2.32"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.30"
+    "version": "1.2.32"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.30"
+    "version": "1.2.32"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.30"
+    "version": "1.2.32"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.30"
+    "version": "1.2.32"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.30"
+    "version": "1.2.32"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.30"
+    "version": "1.2.32"
   }
 ];
 

package/src/layouts/AppLayout/layouts/AdminLayout/AdminLayout.tsx

@@ -118,28 +118,39 @@ function AdminLayoutClient({
   const { isAdminUser, user, isLoading, isAuthenticated, loadCurrentProfile } = useAuth();
   // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
 
+  // Use ref instead of state to prevent re-renders
+  const profileLoadedRef = React.useRef(false);
+
+  // Memoize the callback to prevent useCfgApp from re-subscribing to events
+  const handleAuthToken = React.useCallback(async (authToken: string, refreshToken?: string) => {
+    // console.log('[AdminLayout] handleAuthToken called');
+    // console.log('[AdminLayout] authToken:', authToken.substring(0, 20) + '...', 'refreshToken:', refreshToken ? refreshToken.substring(0, 20) + '...' : 'null');
+
+    // Always set tokens in API client
+    api.setToken(authToken, refreshToken);
+    // console.log('[AdminLayout] Tokens set in API client');
+
+    // Load user profile after setting tokens - ONLY ONCE per session
+    if (!profileLoadedRef.current) {
+      // console.log('[AdminLayout] Loading user profile (first time)...');
+      await loadCurrentProfile('AdminLayout.onAuthTokenReceived');
+      profileLoadedRef.current = true;
+      // console.log('[AdminLayout] User profile loaded and marked as loaded');
+    } else {
+      // console.log('[AdminLayout] Profile already loaded, skipping duplicate call');
+    }
+
+    // Call custom handler if provided
+    if (config?.onAuthTokenReceived) {
+      // console.log('[AdminLayout] Calling custom onAuthTokenReceived handler');
+      config.onAuthTokenReceived(authToken, refreshToken);
+    }
+  }, [loadCurrentProfile, config?.onAuthTokenReceived]);
+
   // useCfgApp hook is called here to initialize iframe communication
   // Automatically sets tokens in API client when received from parent
   const { isEmbedded } = useCfgApp({
-    onAuthTokenReceived: async (authToken, refreshToken) => {
-      // console.log('[AdminLayout] onAuthTokenReceived called');
-      // console.log('[AdminLayout] authToken:', authToken.substring(0, 20) + '...', 'refreshToken:', refreshToken ? refreshToken.substring(0, 20) + '...' : 'null');
-
-      // Always set tokens in API client
-      api.setToken(authToken, refreshToken);
-      // console.log('[AdminLayout] Tokens set in API client');
-
-      // Load user profile after setting tokens
-      // console.log('[AdminLayout] Loading user profile...');
-      await loadCurrentProfile();
-      // console.log('[AdminLayout] User profile loaded');
-
-      // Call custom handler if provided
-      if (config?.onAuthTokenReceived) {
-        // console.log('[AdminLayout] Calling custom onAuthTokenReceived handler');
-        config.onAuthTokenReceived(authToken, refreshToken);
-      }
-    }
+    onAuthTokenReceived: handleAuthToken  // Stable reference
   });
 
   // console.log('[AdminLayout] isEmbedded:', isEmbedded);

package/src/layouts/AppLayout/layouts/AdminLayout/components/ParentSync.tsx

@@ -13,6 +13,7 @@ import { useRouter } from 'next/router';
 import { useAuth } from '../../../../../auth';
 import { useThemeContext } from '@djangocfg/ui';
 import { useCfgApp } from '../hooks/useApp';
+import { authLogger } from '../../../../../utils/logger';
 
 /**
  * ParentSync Component
@@ -65,7 +66,7 @@ function ParentSyncClient() {
     }
   }, [isEmbedded, parentTheme, setTheme]);
 
-  // 2. Send auth status from iframe → parent
+  // 2. Send auth status from iframe → parent (debounced to prevent spam)
   useEffect(() => {
     // Only send if embedded and mounted
     if (!isEmbedded || !isMounted) {
@@ -76,24 +77,34 @@ function ParentSyncClient() {
       return;
     }
 
-    const authData = {
-      isAuthenticated: auth.isAuthenticated,
-      isLoading: auth.isLoading,
-      hasUser: !!auth.user
-    };
+    // Use primitive values to avoid unnecessary re-renders from object reference changes
+    const isAuthenticated = auth.isAuthenticated;
+    const isLoading = auth.isLoading;
+    const hasUser = !!auth.user;
 
-    // console.log('[ParentSync] 📤 Sending auth status to parent:', authData);
+    // console.log('[ParentSync] 📤 Sending auth status to parent:', { isAuthenticated, isLoading, hasUser });
 
-    try {
-      window.parent.postMessage({
-        type: 'iframe-auth-status',
-        data: authData
-      }, '*');
-      // console.log('[ParentSync] ✅ Auth status sent successfully');
-    } catch (e) {
-      console.error('[ParentSync] ❌ Failed to send auth status:', e);
-    }
-  }, [auth.isAuthenticated, auth.isLoading, auth.user, isEmbedded, isMounted]);
+    // Debounce the postMessage to prevent excessive calls
+    const timeoutId = setTimeout(() => {
+      try {
+        window.parent.postMessage({
+          type: 'iframe-auth-status',
+          data: { isAuthenticated, isLoading, hasUser }
+        }, '*');
+        // authLogger.debug('Auth status sent successfully');
+      } catch (e) {
+        authLogger.error('Failed to send auth status:', e);
+      }
+    }, 100); // 100ms debounce
+
+    return () => clearTimeout(timeoutId);
+  }, [
+    auth.isAuthenticated,
+    auth.isLoading,
+    !!auth.user,  // Convert to boolean to prevent object reference changes
+    isEmbedded,
+    isMounted
+  ]);
 
   // 3. iframe-resize removed - was causing log spam
 
@@ -111,7 +122,7 @@ function ParentSyncClient() {
           data: { path: url }
         }, '*');
       } catch (e) {
-        console.error('[ParentSync] Failed to send navigation event:', e);
+        authLogger.error('Failed to send navigation event:', e);
       }
     };
 

package/src/layouts/AppLayout/layouts/AdminLayout/hooks/useApp.ts

@@ -6,6 +6,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
+import { authLogger } from '../../../../../utils/logger';
 
 export interface UseCfgAppReturn {
   /**
@@ -109,6 +110,9 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
       setReferrer(document.referrer);
     }
 
+    // Debounce timeout for parent-auth messages
+    let authTokenTimeout: NodeJS.Timeout | null = null;
+
     // Listen for messages from parent window
     const handleMessage = (event: MessageEvent) => {
       // console.log('[useCfgApp] RAW message event:', {
@@ -124,19 +128,28 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
       switch (type) {
         case 'parent-auth':
           // console.log('[useCfgApp] parent-auth message received');
-          // Receive authentication tokens from parent
-          if (data?.authToken && options?.onAuthTokenReceived) {
-            // console.log('[useCfgApp] Auth tokens found, calling onAuthTokenReceived callback');
-            // console.log('[useCfgApp] authToken:', data.authToken.substring(0, 20) + '...', 'refreshToken:', data.refreshToken ? data.refreshToken.substring(0, 20) + '...' : 'null');
-            try {
-              options.onAuthTokenReceived(data.authToken, data.refreshToken);
-              // console.log('[useCfgApp] onAuthTokenReceived callback completed successfully');
-            } catch (e) {
-              console.error('[useCfgApp] Failed to process auth tokens:', e);
-            }
-          } else {
-            console.warn('[useCfgApp] parent-auth message received but authToken or callback missing:', { hasToken: !!data?.authToken, hasCallback: !!options?.onAuthTokenReceived });
+
+          // Cancel previous timeout to debounce rapid auth messages
+          if (authTokenTimeout) {
+            clearTimeout(authTokenTimeout);
           }
+
+          // Debounce auth token processing to prevent rapid calls (300ms)
+          authTokenTimeout = setTimeout(() => {
+            // Receive authentication tokens from parent
+            if (data?.authToken && options?.onAuthTokenReceived) {
+              // console.log('[useCfgApp] Auth tokens found, calling onAuthTokenReceived callback');
+              // console.log('[useCfgApp] authToken:', data.authToken.substring(0, 20) + '...', 'refreshToken:', data.refreshToken ? data.refreshToken.substring(0, 20) + '...' : 'null');
+              try {
+                options.onAuthTokenReceived(data.authToken, data.refreshToken);
+                // authLogger.debug('onAuthTokenReceived callback completed successfully');
+              } catch (e) {
+                authLogger.error('Failed to process auth tokens:', e);
+              }
+            } else {
+              authLogger.warn('parent-auth message received but authToken or callback missing:', { hasToken: !!data?.authToken, hasCallback: !!options?.onAuthTokenReceived });
+            }
+          }, 300); // 300ms debounce
           break;
 
         case 'parent-theme':
@@ -148,9 +161,9 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
               if (data.themeMode) {
                 setParentThemeMode(data.themeMode);
               }
-              // console.log('[useCfgApp] Theme set successfully:', data.theme);
+              // authLogger.debug('Theme set successfully:', data.theme);
             } catch (e) {
-              console.error('[useCfgApp] Failed to process theme:', e);
+              authLogger.error('Failed to process theme:', e);
             }
           }
           break;
@@ -174,9 +187,9 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
             referrer: document.referrer
           }
         }, '*');
-        // console.log('[useCfgApp] iframe-ready message sent');
+        // authLogger.debug('iframe-ready message sent');
       } catch (e) {
-        console.error('[useCfgApp] Failed to notify parent about ready state:', e);
+        authLogger.error('Failed to notify parent about ready state:', e);
       }
     } else {
       // console.log('[useCfgApp] Not in iframe, skipping iframe-ready message');
@@ -184,6 +197,10 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
     return () => {
       window.removeEventListener('message', handleMessage);
+      // Clear timeout on cleanup
+      if (authTokenTimeout) {
+        clearTimeout(authTokenTimeout);
+      }
     };
   }, [options]);
 
@@ -200,7 +217,7 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
         }
       }, '*');
     } catch (e) {
-      console.error('[iframe] Failed to notify parent about navigation:', e);
+      authLogger.error('Failed to notify parent about navigation:', e);
     }
   }, [router.asPath, router.pathname, isEmbedded, isMounted]);
 

package/src/layouts/PaymentsLayout/components/CreatePaymentDialog.tsx

@@ -36,6 +36,7 @@ import { z } from 'zod';
 import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/api/cfg/contexts';
 import { PAYMENT_EVENTS, closePaymentsDialog } from '../events';
 import { openPaymentDetailsDialog } from '../events';
+import { paymentsLogger } from '../../../utils/logger';
 
 // Payment creation schema
 const PaymentCreateSchema = z.object({
@@ -139,7 +140,7 @@ export const CreatePaymentDialog: React.FC = () => {
         openPaymentDetailsDialog(String(paymentId));
       }
     } catch (error) {
-      console.error('Failed to create payment:', error);
+      paymentsLogger.error('Failed to create payment:', error);
     } finally {
       setIsSubmitting(false);
     }

package/src/layouts/ProfileLayout/components/AvatarSection.tsx

@@ -7,6 +7,7 @@ import { toast } from 'sonner';
 import { Avatar, AvatarFallback, Button } from '@djangocfg/ui/components';
 import { useAccountsContext } from '@djangocfg/layouts/auth/context';
 import { useAuth } from '../../../auth';
+import { profileLogger } from '../../../utils/logger';
 
 export const AvatarSection = () => {
   const { user } = useAuth();
@@ -58,7 +59,7 @@ export const AvatarSection = () => {
       setAvatarPreview(null);
     } catch (error) {
       toast.error('Failed to upload avatar');
-      console.error('Avatar upload error:', error);
+      profileLogger.error('Avatar upload error:', error);
     } finally {
       setIsUploading(false);
     }

package/src/utils/logger.ts

@@ -13,9 +13,11 @@ import { createConsola } from 'consola';
  * - 5: trace, verbose
  */
 const isDevelopment = process.env.NODE_ENV === 'development';
+const isStaticBuild = process.env.NEXT_PUBLIC_STATIC_BUILD === 'true';
+const showLogs = isDevelopment || isStaticBuild;
 
 export const logger = createConsola({
-  level: isDevelopment ? 4 : 1,  // dev: debug, production: errors only
+  level: showLogs ? 4 : 1,  // dev: debug, production: errors only
 }).withTag('layouts');
 
 // ─────────────────────────────────────────────────────────────────────────