@djangocfg/layouts 1.2.31 → 1.2.33

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-09T10:05:41.931Z
+ * Last updated: 2025-11-10T16:46:04.571Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.31"
+    "version": "1.2.33"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.31"
+    "version": "1.2.33"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.31"
+    "version": "1.2.33"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.31"
+    "version": "1.2.33"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.31"
+    "version": "1.2.33"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.31"
+    "version": "1.2.33"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.31"
+    "version": "1.2.33"
   }
 ];
 

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

@@ -118,28 +118,65 @@ function AdminLayoutClient({
   const { isAdminUser, user, isLoading, isAuthenticated, loadCurrentProfile } = useAuth();
   // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
 
+  // Use refs to prevent re-renders and maintain state across renders
+  const profileLoadedRef = React.useRef(false);
+  const tokensReceivedRef = React.useRef(false);
+  const loadCurrentProfileRef = React.useRef(loadCurrentProfile);
+
+  // Update ref when loadCurrentProfile changes (but don't trigger re-render)
+  React.useEffect(() => {
+    loadCurrentProfileRef.current = loadCurrentProfile;
+  }, [loadCurrentProfile]);
+
+  // Create a STABLE callback that NEVER changes (no dependencies)
+  // Use refs to access latest values without recreating the callback
+  const handleAuthToken = React.useCallback(async (authToken: string, refreshToken?: string) => {
+    console.log('[AdminLayout] handleAuthToken called, tokensReceived:', tokensReceivedRef.current, 'profileLoaded:', profileLoadedRef.current);
+
+    // Prevent duplicate token processing
+    if (tokensReceivedRef.current) {
+      console.log('[AdminLayout] Tokens already received and processed, ignoring duplicate');
+      return;
+    }
+
+    // Mark tokens as received IMMEDIATELY to prevent race conditions
+    tokensReceivedRef.current = true;
+
+    console.log('[AdminLayout] First time receiving tokens, processing...');
+    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)...');
+      try {
+        await loadCurrentProfileRef.current('AdminLayout.onAuthTokenReceived');
+        profileLoadedRef.current = true;
+        console.log('[AdminLayout] User profile loaded successfully');
+      } catch (error) {
+        console.error('[AdminLayout] Failed to load profile:', error);
+        // Reset flags on error so user can retry
+        tokensReceivedRef.current = false;
+        profileLoadedRef.current = false;
+      }
+    } 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);
+    }
+  }, []); // ← EMPTY DEPS - callback NEVER changes
+
   // 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  // Now truly stable - never recreated
   });
 
   // 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

@@ -4,8 +4,10 @@
 
 'use client';
 
+import React from 'react';
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
+import { authLogger } from '../../../../../utils/logger';
 
 export interface UseCfgAppReturn {
   /**
@@ -93,6 +95,14 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
   const [parentTheme, setParentTheme] = useState<'light' | 'dark' | null>(null);
   const [parentThemeMode, setParentThemeMode] = useState<string | null>(null);
 
+  // Store callback in ref OUTSIDE useEffect so it's always available
+  const callbackRef = React.useRef(options?.onAuthTokenReceived);
+
+  // Update callback ref when options change (but don't re-register listener)
+  React.useEffect(() => {
+    callbackRef.current = options?.onAuthTokenReceived;
+  }, [options?.onAuthTokenReceived]);
+
   useEffect(() => {
     setIsMounted(true);
 
@@ -109,6 +119,11 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
       setReferrer(document.referrer);
     }
 
+    // Debounce timeout for parent-auth messages
+    let authTokenTimeout: NodeJS.Timeout | null = null;
+    // Track if we've already processed auth tokens
+    let authTokenProcessed = false;
+
     // Listen for messages from parent window
     const handleMessage = (event: MessageEvent) => {
       // console.log('[useCfgApp] RAW message event:', {
@@ -123,20 +138,47 @@ 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 });
+          console.log('[useCfgApp] parent-auth message received, authTokenProcessed:', authTokenProcessed);
+
+          // Prevent processing if already handled
+          if (authTokenProcessed) {
+            console.log('[useCfgApp] Auth tokens already processed, ignoring duplicate message');
+            return;
+          }
+
+          // Cancel previous timeout to debounce rapid auth messages
+          if (authTokenTimeout) {
+            clearTimeout(authTokenTimeout);
           }
+
+          // Debounce auth token processing to prevent rapid calls (300ms)
+          authTokenTimeout = setTimeout(() => {
+            // Double-check still not processed (race condition protection)
+            if (authTokenProcessed) {
+              console.log('[useCfgApp] Auth tokens already processed during debounce, skipping');
+              return;
+            }
+
+            // Receive authentication tokens from parent
+            if (data?.authToken && callbackRef.current) {
+              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');
+
+              // Mark as processed BEFORE calling callback
+              authTokenProcessed = true;
+
+              try {
+                callbackRef.current(data.authToken, data.refreshToken);
+                console.log('[useCfgApp] onAuthTokenReceived callback completed successfully');
+              } catch (e) {
+                authLogger.error('Failed to process auth tokens:', e);
+                // Reset on error to allow retry
+                authTokenProcessed = false;
+              }
+            } else {
+              authLogger.warn('parent-auth message received but authToken or callback missing:', { hasToken: !!data?.authToken, hasCallback: !!callbackRef.current });
+            }
+          }, 300); // 300ms debounce
           break;
 
         case 'parent-theme':
@@ -148,9 +190,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 +216,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,8 +226,12 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
     return () => {
       window.removeEventListener('message', handleMessage);
+      // Clear timeout on cleanup
+      if (authTokenTimeout) {
+        clearTimeout(authTokenTimeout);
+      }
     };
-  }, [options]);
+  }, []); // ← EMPTY DEPS - register listener ONCE
 
   // Notify parent about route changes
   useEffect(() => {
@@ -200,7 +246,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/AppLayout/providers/CoreProviders.tsx

@@ -9,11 +9,18 @@
 import React, { ReactNode } from 'react';
 import { ThemeProvider, Toaster } from '@djangocfg/ui';
 import { AuthProvider } from '../../../auth';
+import { ValidationErrorProvider } from '../../../validation';
 import type { AppLayoutConfig } from '../types';
+import type { ValidationErrorConfig } from '../../../validation';
 
 export interface CoreProvidersProps {
   children: ReactNode;
   config: AppLayoutConfig;
+  /**
+   * Configuration for validation error tracking
+   * @default { enableToast: true, maxErrors: 50 }
+   */
+  validationConfig?: Partial<ValidationErrorConfig>;
 }
 
 /**
@@ -22,9 +29,10 @@ export interface CoreProvidersProps {
  * Provides:
  * - ThemeProvider (dark/light mode)
  * - AuthProvider (authentication)
+ * - ValidationErrorProvider (Zod validation error tracking)
  * - Toaster (notifications)
  */
-export function CoreProviders({ children, config }: CoreProvidersProps) {
+export function CoreProviders({ children, config, validationConfig }: CoreProvidersProps) {
   return (
     <ThemeProvider>
       <AuthProvider
@@ -37,7 +45,9 @@ export function CoreProviders({ children, config }: CoreProvidersProps) {
           },
         }}
       >
-        {children}
+        <ValidationErrorProvider config={validationConfig}>
+          {children}
+        </ValidationErrorProvider>
       </AuthProvider>
 
       {/* Global toast notifications */}

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/layouts/UILayout/components/layout/Header/Header.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { CopyAIButton } from './CopyAIButton';
+import { TestValidationButton } from './TestValidationButton';
 
 export interface HeaderProps {
   /** Page title */
@@ -42,10 +43,16 @@ export function Header({
             </div>
           </div>
 
-          {/* Right: Copy for AI Button */}
-          {onCopyForAI && (
-            <CopyAIButton onCopyForAI={onCopyForAI} />
-          )}
+          {/* Right: Developer Tools */}
+          <div className="flex items-center gap-2">
+            {/* Test Validation Error Button (dev only) */}
+            <TestValidationButton size="sm" />
+
+            {/* Copy for AI Button */}
+            {onCopyForAI && (
+              <CopyAIButton onCopyForAI={onCopyForAI} />
+            )}
+          </div>
         </div>
       </div>
     </header>

package/src/layouts/UILayout/components/layout/Header/HeaderDesktop.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { CopyAIButton } from './CopyAIButton';
+import { TestValidationButton } from './TestValidationButton';
 
 interface HeaderDesktopProps {
   /** Page title */
@@ -31,13 +32,19 @@ export function HeaderDesktop({
           <h1 className="text-lg font-semibold">{title}</h1>
         </div>
 
-        {/* Copy for AI Button */}
-        <CopyAIButton
-          onCopyForAI={onCopyForAI}
-          size="sm"
-          showLabel={true}
-          className="gap-2"
-        />
+        {/* Developer Tools */}
+        <div className="flex items-center gap-2">
+          {/* Test Validation Error Button (dev only) */}
+          <TestValidationButton size="sm" />
+
+          {/* Copy for AI Button */}
+          <CopyAIButton
+            onCopyForAI={onCopyForAI}
+            size="sm"
+            showLabel={true}
+            className="gap-2"
+          />
+        </div>
       </div>
     </div>
   );