@djangocfg/layouts 1.2.31 → 1.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.31",
+  "version": "1.2.33",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.31",
-    "@djangocfg/og-image": "^1.2.31",
-    "@djangocfg/ui": "^1.2.31",
+    "@djangocfg/api": "^1.2.33",
+    "@djangocfg/og-image": "^1.2.33",
+    "@djangocfg/ui": "^1.2.33",
     "@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.31",
+    "@djangocfg/typescript-config": "^1.2.33",
     "@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]);
 
@@ -140,6 +156,10 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     const initializeAuth = async () => {
       authLogger.info('Initializing auth...');
 
+      // Check if running in iframe (AdminLayout will handle auth via postMessage)
+      const isInIframe = typeof window !== 'undefined' && window.self !== window.top;
+      authLogger.info('Is in iframe:', isInIframe);
+
       // Debug token state
       const token = api.getToken();
       const refreshToken = api.getRefreshToken();
@@ -167,11 +187,21 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         return;
       }
 
+      // In iframe mode WITHOUT tokens yet - wait for AdminLayout to receive them via postMessage
+      // Don't initialize yet - AdminLayout.handleAuthToken will call loadCurrentProfile
+      if (isInIframe && !hasTokens) {
+        authLogger.info('Running in iframe without tokens - waiting for parent to send via postMessage');
+        authLogger.info('AdminLayout will handle auth initialization, skipping AuthContext init');
+        setInitialized(true); // Mark as initialized to prevent re-initialization
+        setIsLoading(false);
+        return;
+      }
+
       if (hasTokens) {
         setIsLoading(true);
         try {
           authLogger.info('No cached profile found, loading from API...');
-          await loadCurrentProfile();
+          await loadCurrentProfile('AuthContext.initializeAuth');
         } catch (error) {
           authLogger.error('Failed to load profile during initialization:', error);
           // If profile loading fails, clear auth state

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/index.ts

@@ -1,6 +1,6 @@
 /**
  * @djangocfg/layouts
- * 
+ *
  * Reusable layout components and authentication system
  */
 
@@ -13,3 +13,6 @@ export * from './layouts';
 // Snippets - Reusable UI components
 export * from './snippets';
 
+// Validation error tracking
+export * from './validation';
+

package/src/layouts/AppLayout/AppLayout.tsx

@@ -36,6 +36,7 @@ import { AdminLayout } from './layouts/AdminLayout';
 import { determineLayoutMode, getRedirectUrl } from './utils';
 import { useAuth } from '../../auth';
 import type { AppLayoutConfig } from './types';
+import type { ValidationErrorConfig } from '../../validation';
 
 export interface AppLayoutProps {
   children: ReactNode;
@@ -69,6 +70,12 @@ export interface AppLayoutProps {
    * @example showPackageVersions={true}
    */
   showPackageVersions?: boolean;
+  /**
+   * Configuration for validation error tracking
+   * @default { enableToast: true, maxErrors: 50 }
+   * @example validationConfig={{ enableToast: false }}
+   */
+  validationConfig?: Partial<ValidationErrorConfig>;
 }
 
 /**
@@ -249,7 +256,7 @@ function LayoutRouter({
  * </AppLayout>
  * ```
  */
-export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily, showPackageVersions }: AppLayoutProps) {
+export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily, showPackageVersions, validationConfig }: AppLayoutProps) {
   const router = useRouter();
 
   // Check if ErrorBoundary is enabled (default: true)
@@ -292,7 +299,7 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
         }} />
       )}
 
-      <CoreProviders config={config}>
+      <CoreProviders config={config} validationConfig={validationConfig}>
         {appContent}
       </CoreProviders>
     </>

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);