@djangocfg/layouts 1.2.19 → 1.2.21

package/package.json

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

package/src/auth/context/AuthContext.tsx

@@ -93,25 +93,36 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
 
   // Simple profile loading without retry - now uses AccountsContext
   const loadCurrentProfile = useCallback(async (): Promise<void> => {
+    // console.log('[AuthContext] loadCurrentProfile called');
     try {
       // Ensure API clients are properly initialized with current token
-      if (!api.isAuthenticated()) {
+      const isAuth = api.isAuthenticated();
+      const token = api.getToken();
+      // console.log('[AuthContext] isAuthenticated:', isAuth, 'token:', token ? token.substring(0, 20) + '...' : 'null');
+
+      if (!isAuth) {
+        console.warn('[AuthContext] 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();
 
       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')) {

package/src/layouts/AppLayout/AppLayout.tsx

@@ -110,6 +110,19 @@ function LayoutRouter({
   // Admin routes: Always show loading during SSR and initial client render
   // This prevents hydration mismatch when isAuthenticated differs between server/client
   if (isAdminRoute && !forceLayout) {
+    // In embedded mode (iframe), render AdminLayout immediately to receive postMessage
+    const isEmbedded = typeof window !== 'undefined' && window !== window.parent;
+
+    if (isEmbedded) {
+      // Skip loading checks - AdminLayout will handle auth via postMessage
+      return (
+        <AdminLayout enableParentSync={true}>
+          {children}
+        </AdminLayout>
+      );
+    }
+
+    // Standalone mode: show loading during initialization
     if (!isMounted || isLoading) {
       return (
         <div className="min-h-screen flex items-center justify-center">

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-02T05:58:03.758Z
+ * Last updated: 2025-11-02T11:45:27.117Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.19"
+    "version": "1.2.21"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.19"
+    "version": "1.2.21"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.19"
+    "version": "1.2.21"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.19"
+    "version": "1.2.21"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.19"
+    "version": "1.2.21"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.19"
+    "version": "1.2.21"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.19"
+    "version": "1.2.21"
   }
 ];
 

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

@@ -82,27 +82,68 @@ export function AdminLayout({
   config,
   enableParentSync = true
 }: AdminLayoutProps) {
-  const { user } = useAuth();
+  const [isMounted, setIsMounted] = React.useState(false);
+  const { user, isLoading, loadCurrentProfile } = useAuth();
+  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading);
+
+  // Track mount state to prevent hydration mismatch
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   // useCfgApp hook is called here to initialize iframe communication
   // Automatically sets tokens in API client when received from parent
   const { isEmbedded } = useCfgApp({
-    onAuthTokenReceived: (authToken, refreshToken) => {
+    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);
       }
     }
   });
 
+  // console.log('[AdminLayout] isEmbedded:', isEmbedded);
+
+  // During SSR and initial render, show loading to prevent hydration mismatch
+  if (!isMounted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-muted-foreground">Loading admin panel...</div>
+      </div>
+    );
+  }
+
+  // Show loading while auth is initializing (waiting for tokens from parent or profile loading)
+  if (isLoading) {
+    // console.log('[AdminLayout] Showing loading state - isLoading:', isLoading);
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-muted-foreground">Loading admin panel...</div>
+      </div>
+    );
+  }
+
   // Check if user has staff or superuser privileges
   const hasAdminAccess = user?.is_staff || user?.is_superuser;
+  // console.log('[AdminLayout] user:', user, 'hasAdminAccess:', hasAdminAccess, 'is_staff:', user?.is_staff, 'is_superuser:', user?.is_superuser);
 
   // Only render AdminLayout features for staff/superuser
   if (!hasAdminAccess) {
+    console.warn('[AdminLayout] Access denied - user does not have admin access');
+    // console.log('[AdminLayout] User details:', JSON.stringify(user, null, 2));
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
         <div className="text-center space-y-4 p-8">

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

@@ -9,6 +9,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import { useAuth } from '../../../../../auth';
 import { useThemeContext } from '@djangocfg/ui';
 import { useCfgApp } from '../hooks/useApp';
@@ -47,15 +48,20 @@ export function ParentSync() {
  * Separated to avoid SSR issues during static export
  */
 function ParentSyncClient() {
+  const router = useRouter();
   const auth = useAuth();
   const { setTheme } = useThemeContext();
   const { isEmbedded, isMounted, parentTheme } = useCfgApp();
 
   // 1. Sync theme from parent → iframe
   useEffect(() => {
+    // console.log('[ParentSync] Theme sync effect triggered - isEmbedded:', isEmbedded, 'parentTheme:', parentTheme);
     if (isEmbedded && parentTheme) {
-      // console.log('[ParentSync] 🎨 Syncing theme from parent:', parentTheme);
+      // console.log('[ParentSync] Syncing theme from parent:', parentTheme);
       setTheme(parentTheme);
+      // console.log('[ParentSync] setTheme called with:', parentTheme);
+    } else {
+      // console.log('[ParentSync] Skipping theme sync - isEmbedded:', isEmbedded, 'parentTheme:', parentTheme);
     }
   }, [isEmbedded, parentTheme, setTheme]);
 
@@ -89,94 +95,37 @@ function ParentSyncClient() {
     }
   }, [auth.isAuthenticated, auth.isLoading, auth.user, isEmbedded, isMounted]);
 
-  // 3. Send iframe height changes to parent for auto-resize
+  // 3. iframe-resize removed - was causing log spam
+
+  // 4. Send navigation events to parent (for "Open in New Window" button)
   useEffect(() => {
     // Only send if embedded and mounted
     if (!isEmbedded || !isMounted) {
       return;
     }
 
-    // Function to send height to parent
-    const sendHeight = () => {
-      const height = document.documentElement.scrollHeight;
-      // console.log('[ParentSync] 📏 Sending height to parent:', height);
-
+    const handleRouteChange = (url: string) => {
       try {
         window.parent.postMessage({
-          type: 'iframe-resize',
-          data: { height }
+          type: 'iframe-navigation',
+          data: { path: url }
         }, '*');
       } catch (e) {
-        console.error('[ParentSync] ❌ Failed to send height:', e);
+        console.error('[ParentSync] Failed to send navigation event:', e);
       }
     };
 
-    // Send initial height
-    sendHeight();
+    // Listen to Next.js router events
+    router.events.on('routeChangeComplete', handleRouteChange);
 
-    // Watch for content height changes with ResizeObserver
-    const resizeObserver = new ResizeObserver(() => {
-      sendHeight();
-    });
-
-    // Observe body element for size changes
-    resizeObserver.observe(document.body);
+    // Send initial route
+    handleRouteChange(router.asPath);
 
     // Cleanup
     return () => {
-      resizeObserver.disconnect();
+      router.events.off('routeChangeComplete', handleRouteChange);
     };
-  }, [isEmbedded, isMounted]);
-
-  // 4. Send navigation events to parent (for "Open in New Window" button)
-  useEffect(() => {
-    // Only send if embedded and mounted
-    if (!isEmbedded || !isMounted) {
-      return;
-    }
-
-    // Import Next.js router dynamically
-    import('next/router').then(({ default: Router }) => {
-      const handleRouteChange = (url: string) => {
-        // console.log('[ParentSync] 🔗 Route changed:', url);
-
-        try {
-          window.parent.postMessage({
-            type: 'iframe-navigation',
-            data: { path: url }
-          }, '*');
-        } catch (e) {
-          console.error('[ParentSync] ❌ Failed to send navigation event:', e);
-        }
-
-        // Also send height update after route change
-        setTimeout(() => {
-          const height = document.documentElement.scrollHeight;
-          try {
-            window.parent.postMessage({
-              type: 'iframe-resize',
-              data: { height }
-            }, '*');
-          } catch (e) {
-            console.error('[ParentSync] ❌ Failed to send height:', e);
-          }
-        }, 100);
-      };
-
-      // Listen to Next.js router events
-      Router.events.on('routeChangeComplete', handleRouteChange);
-
-      // Send initial route
-      handleRouteChange(Router.asPath);
-
-      // Cleanup
-      return () => {
-        Router.events.off('routeChangeComplete', handleRouteChange);
-      };
-    }).catch(err => {
-      console.warn('[ParentSync] Failed to load next/router:', err);
-    });
-  }, [isEmbedded, isMounted]);
+  }, [isEmbedded, isMounted, router]);
 
   // This component doesn't render anything
   return null;

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

@@ -94,13 +94,10 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
   const [parentThemeMode, setParentThemeMode] = useState<string | null>(null);
 
   useEffect(() => {
-    // Debug logging (uncomment for debugging)
-    // console.log('[useCfgApp] Hook initializing...');
     setIsMounted(true);
 
     // Check if running in iframe
     const inIframe = window.self !== window.top;
-    // console.log('[useCfgApp] Iframe detection:', { inIframe });
     setIsEmbedded(inIframe);
 
     // Check if running as standalone PWA
@@ -109,138 +106,84 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
     // Get referrer if embedded
     if (inIframe && document.referrer) {
-      // console.log('[useCfgApp] Referrer:', document.referrer);
       setReferrer(document.referrer);
     }
 
-    // Setup resize observer and interval for iframe height updates
-    let resizeObserver: ResizeObserver | null = null;
-    let checkHeightInterval: NodeJS.Timeout | null = null;
-
-    // Notify parent window that iframe is ready
-    if (inIframe) {
-      try {
-        // console.log('[useCfgApp] Sending iframe-ready message to parent');
-        window.parent.postMessage({
-          type: 'iframe-ready',
-          data: {
-            url: window.location.href,
-            referrer: document.referrer
-          }
-        }, '*'); // Use '*' or specific origin for security
-        // console.log('[useCfgApp] iframe-ready message sent');
-      } catch (e) {
-        console.error('[useCfgApp] Failed to notify parent:', e);
-      }
-
-      // Send current content height (both increases and decreases)
-      const sendHeight = () => {
-        try {
-          // Use body.scrollHeight to avoid iframe height feedback loop
-          // document.documentElement.scrollHeight includes iframe's own height!
-          const bodyScrollHeight = document.body.scrollHeight;
-          const bodyOffsetHeight = document.body.offsetHeight;
-          const height = Math.max(bodyScrollHeight, bodyOffsetHeight);
-
-          window.parent.postMessage({
-            type: 'iframe-resize',
-            data: { height }
-          }, '*');
-        } catch (e) {
-          console.error('[useCfgApp] Failed to send height:', e);
-        }
-      };
-
-      // Send height immediately after mount
-      setTimeout(sendHeight, 100);
-
-      // Watch for content size changes using ResizeObserver
-      resizeObserver = new ResizeObserver(() => {
-        sendHeight();
-      });
-
-      // Observe document body for size changes
-      resizeObserver.observe(document.body);
-
-      // Also observe on route changes and after data loads
-      checkHeightInterval = setInterval(sendHeight, 1000);
-    }
-
     // Listen for messages from parent window
     const handleMessage = (event: MessageEvent) => {
-      // console.log('[useCfgApp] Message received:', {
+      // console.log('[useCfgApp] RAW message event:', {
       //   origin: event.origin,
-      //   type: event.data?.type,
-      //   data: event.data?.data
+      //   source: event.source === window.parent ? 'parent' : 'other',
+      //   dataType: typeof event.data,
+      //   data: event.data
       // });
 
-      // Verify origin for security (optional - adjust for your needs)
-      // if (event.origin !== window.location.origin) return;
-
       const { type, data } = event.data || {};
+      // console.log('[useCfgApp] Received message:', type, data);
 
       switch (type) {
         case 'parent-auth':
-          // console.log('[useCfgApp] Processing parent-auth message');
+          // 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 {
-              // console.log('[useCfgApp] Calling onAuthTokenReceived');
               options.onAuthTokenReceived(data.authToken, data.refreshToken);
-              // console.log('[useCfgApp] Auth tokens received from parent');
+              // 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 });
           }
           break;
 
         case 'parent-theme':
-          // console.log('[useCfgApp] Processing parent-theme message');
+          // console.log('[useCfgApp] parent-theme message received:', data?.theme);
           // Receive theme from parent
           if (data?.theme) {
             try {
-              // console.log('[useCfgApp] Setting theme:', {
-              //   theme: data.theme,
-              //   themeMode: data.themeMode
-              // });
               setParentTheme(data.theme);
               if (data.themeMode) {
                 setParentThemeMode(data.themeMode);
               }
-              // console.log('[useCfgApp] Theme received from parent:', data.theme, 'mode:', data.themeMode);
+              // console.log('[useCfgApp] Theme set successfully:', data.theme);
             } catch (e) {
               console.error('[useCfgApp] Failed to process theme:', e);
             }
           }
           break;
 
-        case 'parent-resize':
-          // Handle parent window resize (optional)
-          // console.log('[useCfgApp] Parent resized:', data);
-          break;
-
         default:
-          // if (type) {
-          //   console.log('[useCfgApp] Unknown message type:', type);
-          // }
           break;
       }
     };
 
-    // console.log('[useCfgApp] Adding message event listener');
     window.addEventListener('message', handleMessage);
+    // console.log('[useCfgApp] Message listener registered, isEmbedded:', inIframe);
+
+    // Send iframe-ready since listener is registered
+    if (inIframe) {
+      try {
+        // console.log('[useCfgApp] Sending iframe-ready message to parent');
+        window.parent.postMessage({
+          type: 'iframe-ready',
+          data: {
+            url: window.location.href,
+            referrer: document.referrer
+          }
+        }, '*');
+        // console.log('[useCfgApp] iframe-ready message sent');
+      } catch (e) {
+        console.error('[useCfgApp] Failed to notify parent about ready state:', e);
+      }
+    } else {
+      // console.log('[useCfgApp] Not in iframe, skipping iframe-ready message');
+    }
 
     return () => {
-      // console.log('[useCfgApp] Cleaning up message event listener');
       window.removeEventListener('message', handleMessage);
-
-      // Cleanup resize observer and interval
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-      if (checkHeightInterval) {
-        clearInterval(checkHeightInterval);
-      }
     };
   }, [options]);
 

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardHeader.tsx

@@ -47,7 +47,7 @@ export function DashboardHeader({ isAdmin = false }: DashboardHeaderProps) {
 
   // Notification handler - TODO: implement notification system
   const handleNotificationClick = () => {
-    console.log('Notifications clicked');
+    // console.log('Notifications clicked');
   };
 
   return (