@djangocfg/layouts 1.2.32 → 1.2.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.32",
+  "version": "1.2.34",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.32",
-    "@djangocfg/og-image": "^1.2.32",
-    "@djangocfg/ui": "^1.2.32",
+    "@djangocfg/api": "^1.2.34",
+    "@djangocfg/og-image": "^1.2.34",
+    "@djangocfg/ui": "^1.2.34",
     "@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.32",
+    "@djangocfg/typescript-config": "^1.2.34",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/context/AuthContext.tsx

@@ -156,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();
@@ -183,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/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/PackageVersions/packageVersions.config.ts

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

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

@@ -118,39 +118,65 @@ 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
+  // 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);
 
-  // Memoize the callback to prevent useCfgApp from re-subscribing to events
+  // 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');
-    // console.log('[AdminLayout] authToken:', authToken.substring(0, 20) + '...', 'refreshToken:', refreshToken ? refreshToken.substring(0, 20) + '...' : 'null');
+    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');
+    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');
+      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');
+      console.log('[AdminLayout] Profile already loaded, skipping duplicate call');
     }
 
     // Call custom handler if provided
     if (config?.onAuthTokenReceived) {
-      // console.log('[AdminLayout] Calling custom onAuthTokenReceived handler');
+      console.log('[AdminLayout] Calling custom onAuthTokenReceived handler');
       config.onAuthTokenReceived(authToken, refreshToken);
     }
-  }, [loadCurrentProfile, config?.onAuthTokenReceived]);
+  }, []); // ← 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: handleAuthToken  // Stable reference
+    onAuthTokenReceived: handleAuthToken  // Now truly stable - never recreated
   });
 
   // console.log('[AdminLayout] isEmbedded:', isEmbedded);

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

@@ -4,6 +4,7 @@
 
 'use client';
 
+import React from 'react';
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { authLogger } from '../../../../../utils/logger';
@@ -94,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);
 
@@ -112,6 +121,8 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
     // 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) => {
@@ -127,7 +138,13 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
       switch (type) {
         case 'parent-auth':
-          // console.log('[useCfgApp] parent-auth message received');
+          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) {
@@ -136,18 +153,30 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
           // 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 && 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');
+            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 {
-                options.onAuthTokenReceived(data.authToken, data.refreshToken);
-                // authLogger.debug('onAuthTokenReceived callback completed successfully');
+                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: !!options?.onAuthTokenReceived });
+              authLogger.warn('parent-auth message received but authToken or callback missing:', { hasToken: !!data?.authToken, hasCallback: !!callbackRef.current });
             }
           }, 300); // 300ms debounce
           break;
@@ -202,7 +231,7 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
         clearTimeout(authTokenTimeout);
       }
     };
-  }, [options]);
+  }, []); // ← EMPTY DEPS - register listener ONCE
 
   // Notify parent about route changes
   useEffect(() => {

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