@djangocfg/layouts 1.2.5 → 1.2.7

package/package.json

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

package/src/auth/context/AuthContext.tsx

@@ -101,14 +101,16 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
 
       // Refresh profile from AccountsContext
       const refreshedProfile = await accounts.refreshProfile();
-      
+
       if (refreshedProfile) {
-        setInitialized(true);
         authLogger.info('Profile loaded successfully:', refreshedProfile.id);
       } else {
-        authLogger.warn('Profile refresh returned undefined');
-        clearAuthState('loadCurrentProfile:noProfile');
+        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);
     } catch (error) {
       authLogger.error('Failed to load profile:', error);
       // Use global error handler first, fallback to clearing state
@@ -166,7 +168,8 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   useEffect(() => {
     if (!initialized) return;
 
-    const isAuthenticated = !!userRef.current && api.isAuthenticated();
+    // Consider authenticated if we have valid tokens, even without profile
+    const isAuthenticated = api.isAuthenticated();
     const authRoute = config?.routes?.auth || defaultRoutes.auth;
     const isAuthPage = router.pathname === authRoute;
 
@@ -408,7 +411,8 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     () => ({
       user,
       isLoading,
-      isAuthenticated: !!user && api.isAuthenticated(),
+      // Consider authenticated if we have valid tokens, even without user profile
+      isAuthenticated: api.isAuthenticated(),
       loadCurrentProfile,
       checkAuthAndRedirect,
       getToken: () => api.getToken(),

package/src/layouts/AppLayout/AppLayout.tsx

@@ -6,12 +6,19 @@
  * - Applies correct layout automatically
  * - Manages all state through context
  * - Zero prop drilling
+ * - Optional Django CFG admin mode with iframe integration
  *
  * Usage in _app.tsx:
  * ```tsx
+ * // Standard usage
  * <AppLayout config={appLayoutConfig}>
  *   <Component {...pageProps} />
  * </AppLayout>
+ *
+ * // Django CFG admin mode (with iframe integration)
+ * <AppLayout config={appLayoutConfig} isCfgAdmin={true}>
+ *   <Component {...pageProps} />
+ * </AppLayout>
  * ```
  */
 
@@ -25,6 +32,7 @@ import { Seo, PageProgress, ErrorBoundary } from './components';
 import { PublicLayout } from './layouts/PublicLayout';
 import { PrivateLayout } from './layouts/PrivateLayout';
 import { AuthLayout } from './layouts/AuthLayout';
+import { CfgLayout } from './layouts/CfgLayout';
 import { determineLayoutMode, getRedirectUrl } from './utils';
 import { useAuth } from '../../auth';
 import type { AppLayoutConfig } from './types';
@@ -41,9 +49,13 @@ export interface AppLayoutProps {
   /**
    * Force a specific layout regardless of route
    * Overrides automatic layout detection
+   *
    * @example forceLayout="public" - always use PublicLayout
+   * @example forceLayout="private" - always use PrivateLayout
+   * @example forceLayout="auth" - always use AuthLayout
+   * @example forceLayout="admin" - Django CFG admin mode with iframe integration
    */
-  forceLayout?: 'public' | 'private' | 'auth';
+  forceLayout?: 'public' | 'private' | 'auth' | 'admin';
   /**
    * Font family to apply globally
    * Accepts Next.js font object or CSS font-family string
@@ -73,7 +85,7 @@ function LayoutRouter({
 }: {
   children: ReactNode;
   disableLayout?: boolean;
-  forceLayout?: 'public' | 'private' | 'auth';
+  forceLayout?: 'public' | 'private' | 'auth' | 'admin';
   config: AppLayoutConfig;
 }) {
   const router = useRouter();
@@ -85,29 +97,49 @@ function LayoutRouter({
     setIsMounted(true);
   }, []);
 
+  const isAdminMode = forceLayout === 'admin';
   // If layout is disabled, render children directly (providers still active!)
-  if (disableLayout) {
+  if (disableLayout || isAdminMode) {
     return <>{children}</>;
   }
 
-  // Determine layout mode based on route (synchronous - works with SSR)
-  const getLayoutMode = (): 'public' | 'private' | 'auth' => {
-    // If forceLayout is specified, use it
-    if (forceLayout) return forceLayout;
+  // Check route type (synchronous - works with SSR)
+  const isAuthRoute = config.routes.detectors.isAuthRoute(router.pathname);
+  const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
 
-    const isAuthRoute = config.routes.detectors.isAuthRoute(router.pathname);
-    const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
-    // const isPublicRoute = config.routes.detectors.isPublicRoute(router.pathname);
+  // Private routes: Always show loading during SSR and initial client render
+  // This prevents hydration mismatch when isAuthenticated differs between server/client
+  if (isPrivateRoute && !forceLayout) {
+    if (!isMounted || isLoading) {
+      return (
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-muted-foreground">Loading...</div>
+        </div>
+      );
+    }
 
-    if (isAuthRoute) return 'auth';
+    // After mount: check authentication
+    if (!isAuthenticated) {
+      // Redirect to auth (handled in PrivateLayout)
+      return (
+        <AuthLayout
+          termsUrl={config.auth?.termsUrl}
+          privacyUrl={config.auth?.privacyUrl}
+          supportUrl={config.auth?.supportUrl}
+          enablePhoneAuth={config.auth?.enablePhoneAuth}
+        />
+      );
+    }
 
-    if (isPrivateRoute) {
-      if (isAuthenticated) {
-        return 'private';
-      };
-      return 'auth';
-    };
+    return <PrivateLayout>{children}</PrivateLayout>;
+  }
 
+  // Determine layout mode for non-private routes
+  const getLayoutMode = (): 'public' | 'auth' | 'admin' => {
+    if (forceLayout === 'auth') return 'auth';
+    if (forceLayout === 'public') return 'public';
+    if (isAuthRoute) return 'auth';
+    if (isAdminMode) return 'admin';
     return 'public';
   };
 
@@ -115,15 +147,15 @@ function LayoutRouter({
 
   // Render appropriate layout
   switch (layoutMode) {
+    case 'admin':
+      return <CfgLayout>{children}</CfgLayout>;
+      break;
     // Public routes: render immediately (SSR enabled)
     case 'public':
       return <PublicLayout>{children}</PublicLayout>;
 
     // Auth routes: render inside AuthLayout
     case 'auth':
-      // Check if we're on a private route that requires auth
-      const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
-
       return (
         <AuthLayout
           termsUrl={config.auth?.termsUrl}
@@ -131,22 +163,10 @@ function LayoutRouter({
           supportUrl={config.auth?.supportUrl}
           enablePhoneAuth={config.auth?.enablePhoneAuth}
         >
-          {/* Don't render children if redirected from private route */}
-          {!isPrivateRoute && children}
+          {children}
         </AuthLayout>
       );
 
-    // Private routes: wait for client-side hydration and auth check
-    case 'private':
-      if (!isMounted || isLoading) {
-        return (
-          <div className="min-h-screen flex items-center justify-center">
-            <div className="text-muted-foreground">Loading...</div>
-          </div>
-        );
-      }
-      return <PrivateLayout>{children}</PrivateLayout>;
-
     default:
       return <PublicLayout>{children}</PublicLayout>;
   }
@@ -189,6 +209,9 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
   const supportEmail = config.errors?.supportEmail;
   const onError = config.errors?.onError;
 
+  // Determine if admin mode is enabled (Django CFG iframe integration)
+  const isAdminMode = forceLayout === 'admin';
+
   const content = (
     <>
       {/* Global Font Styles */}
@@ -199,29 +222,33 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
       )}
 
       <CoreProviders config={config}>
-        <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
-          {/* SEO Meta Tags */}
-          <Seo
-            pageConfig={{
-              title: config.app.name,
-              description: config.app.description,
-              ogImage: {
+        {/* CfgLayout must be inside CoreProviders to access AuthProvider */}
+        {/* Only enable ParentSync when in admin mode */}
+        <CfgLayout enableParentSync={isAdminMode}>
+          <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
+            {/* SEO Meta Tags */}
+            <Seo
+              pageConfig={{
                 title: config.app.name,
-                subtitle: config.app.description,
-              },
-            }}
-            icons={config.app.icons}
-            siteUrl={config.app.siteUrl}
-          />
-
-          {/* Loading Progress Bar */}
-          <PageProgress />
-
-          {/* Smart Layout Router */}
-          <LayoutRouter disableLayout={disableLayout} forceLayout={forceLayout} config={config}>
-            {children}
-          </LayoutRouter>
-        </AppContextProvider>
+                description: config.app.description,
+                ogImage: {
+                  title: config.app.name,
+                  subtitle: config.app.description,
+                },
+              }}
+              icons={config.app.icons}
+              siteUrl={config.app.siteUrl}
+            />
+
+            {/* Loading Progress Bar */}
+            <PageProgress />
+
+            {/* Smart Layout Router */}
+            <LayoutRouter disableLayout={disableLayout} forceLayout={forceLayout} config={config}>
+              {children}
+            </LayoutRouter>
+          </AppContextProvider>
+        </CfgLayout>
       </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-10-25T06:54:45.462Z
+ * Last updated: 2025-10-28T04:15:24.707Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.5"
+    "version": "1.2.7"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.5"
+    "version": "1.2.7"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.5"
+    "version": "1.2.7"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.5"
+    "version": "1.2.7"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.5"
+    "version": "1.2.7"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.5"
+    "version": "1.2.7"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.5"
+    "version": "1.2.7"
   }
 ];
 

package/src/layouts/AppLayout/index.ts

@@ -29,3 +29,15 @@ export { useLayoutMode, useNavigation } from './hooks';
 export { PublicLayout } from './layouts/PublicLayout';
 export { PrivateLayout } from './layouts/PrivateLayout';
 export { AuthLayout } from './layouts/AuthLayout';
+
+// CfgLayout - Django CFG iframe integration
+export { CfgLayout } from './layouts/CfgLayout';
+export { useCfgApp, useApp } from './layouts/CfgLayout';
+export { ParentSync, AuthStatusSync } from './layouts/CfgLayout';
+export type {
+  CfgLayoutConfig,
+  UseCfgAppReturn,
+  UseCfgAppOptions,
+  UseAppReturn,
+  UseAppOptions
+} from './layouts/CfgLayout';

package/src/layouts/AppLayout/layouts/CfgLayout/CfgLayout.tsx

@@ -0,0 +1,104 @@
+// ============================================================================
+// CfgLayout - Django CFG Layout with iframe Integration
+// ============================================================================
+// Universal layout component that handles:
+// - iframe embedding detection
+// - Parent ↔ iframe communication (postMessage)
+// - Theme synchronization from Django Unfold
+// - Auth token passing from parent window (automatically sets in API client)
+// - Auth status reporting to parent window
+// - Automatic layout disable in iframe mode
+//
+// This is a lightweight wrapper that can be used with any layout system
+// (AppLayout, custom layouts, etc.)
+
+'use client';
+
+import React, { ReactNode } from 'react';
+import { ParentSync } from './components';
+import { useCfgApp } from './hooks';
+import type { CfgLayoutConfig } from './types';
+import { api } from '@djangocfg/api';
+
+export interface CfgLayoutProps {
+  children: ReactNode;
+  config?: CfgLayoutConfig;
+  /**
+   * Whether to render ParentSync component
+   * Set to false if you want to handle sync manually
+   * @default true
+   */
+  enableParentSync?: boolean;
+}
+
+/**
+ * CfgLayout - Universal Layout Component for Django CFG
+ *
+ * Provides iframe integration features:
+ * - Auto-detects iframe embedding
+ * - Syncs theme from parent window (Django Unfold)
+ * - Receives auth tokens from parent window and automatically sets them in API client
+ * - Sends auth status to parent window
+ * - Provides useApp hook data via context
+ *
+ * Usage:
+ * ```tsx
+ * // Wrap your app in _app.tsx - no config needed!
+ * <CfgLayout>
+ *   <AppLayout config={appLayoutConfig}>
+ *     <Component {...pageProps} />
+ *   </AppLayout>
+ * </CfgLayout>
+ * ```
+ *
+ * Or with custom auth handler:
+ * ```tsx
+ * <CfgLayout config={{
+ *   onAuthTokenReceived: (authToken, refreshToken) => {
+ *     // Custom logic before/after setting tokens
+ *     console.log('Tokens received');
+ *   }
+ * }}>
+ *   <AppLayout config={appLayoutConfig}>
+ *     <Component {...pageProps} />
+ *   </AppLayout>
+ * </CfgLayout>
+ * ```
+ *
+ * Use useCfgApp hook directly:
+ * ```tsx
+ * import { useCfgApp } from '@djangocfg/layouts/CfgLayout';
+ *
+ * function MyComponent() {
+ *   const { isEmbedded, disableLayout, parentTheme } = useCfgApp();
+ *   // ...
+ * }
+ * ```
+ */
+export function CfgLayout({
+  children,
+  config,
+  enableParentSync = true
+}: CfgLayoutProps) {
+  // useCfgApp hook is called here to initialize iframe communication
+  // Automatically sets tokens in API client when received from parent
+  useCfgApp({
+    onAuthTokenReceived: (authToken, refreshToken) => {
+      // Always set tokens in API client
+      api.setToken(authToken, refreshToken);
+
+      // Call custom handler if provided
+      if (config?.onAuthTokenReceived) {
+        config.onAuthTokenReceived(authToken, refreshToken);
+      }
+    }
+  });
+
+  return (
+    <>
+      {/* ParentSync handles theme sync and auth status reporting */}
+      {enableParentSync && <ParentSync />}
+      {children}
+    </>
+  );
+}