@djangocfg/layouts 1.2.33 → 1.2.35

package/package.json

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

package/src/layouts/AppLayout/AppLayout.tsx

@@ -26,18 +26,25 @@
 
 import React, { ReactNode, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import dynamic from 'next/dynamic';
 import { AppContextProvider } from './context';
 import { CoreProviders } from './providers';
 import { Seo, PageProgress, ErrorBoundary } from './components';
 import { PublicLayout } from './layouts/PublicLayout';
 import { PrivateLayout } from './layouts/PrivateLayout';
 import { AuthLayout } from './layouts/AuthLayout';
-import { AdminLayout } from './layouts/AdminLayout';
+import { PagePreloader } from './layouts/AdminLayout/components';
 import { determineLayoutMode, getRedirectUrl } from './utils';
 import { useAuth } from '../../auth';
 import type { AppLayoutConfig } from './types';
 import type { ValidationErrorConfig } from '../../validation';
 
+// Dynamic import for AdminLayout to prevent SSR hydration issues
+const AdminLayout = dynamic(
+  () => import('./layouts/AdminLayout').then((mod) => ({ default: mod.AdminLayout })),
+  { ssr: false }
+);
+
 export interface AppLayoutProps {
   children: ReactNode;
   config: AppLayoutConfig;
@@ -131,11 +138,7 @@ function LayoutRouter({
 
     // Standalone mode: show loading during initialization
     if (!isMounted || isLoading) {
-      return (
-        <div className="min-h-screen flex items-center justify-center">
-          <div className="text-muted-foreground">Loading...</div>
-        </div>
-      );
+      return <PagePreloader text="Loading admin..." />;
     }
 
     // After mount: check authentication
@@ -163,11 +166,7 @@ function LayoutRouter({
   // 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>
-      );
+      return <PagePreloader />;
     }
 
     // After mount: check authentication

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

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

@@ -16,11 +16,12 @@
 
 import React, { ReactNode } from 'react';
 import { ShieldAlert } from 'lucide-react';
-import { ParentSync } from './components';
-import { useCfgApp } from './hooks';
+import { ParentSync, PagePreloader } from './components';
+import { CfgAppProvider, useCfgAppContext } from './context';
 import type { AdminLayoutConfig } from './types';
 import { api } from '@djangocfg/api';
 import { useAuth } from '../../../../auth';
+import { consola } from 'consola';
 
 export interface AdminLayoutProps {
   children: ReactNode;
@@ -82,41 +83,18 @@ export function AdminLayout({
   config,
   enableParentSync = true
 }: AdminLayoutProps) {
-  // Only run on client side
-  const [isMounted, setIsMounted] = React.useState(false);
-
-  // Track mount state to prevent hydration mismatch
-  React.useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // Minimalist loading component
-  const LoadingState = () => (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '0ms' }} />
-        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '150ms' }} />
-        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
-        <span className="ml-2">Loading...</span>
-      </div>
-    </div>
+  return (
+    <AdminLayoutClientWithProvider config={config} enableParentSync={enableParentSync}>{children}</AdminLayoutClientWithProvider>
   );
-
-  // During SSR and initial render, show loading to prevent hydration mismatch
-  if (!isMounted) {
-    return <LoadingState />;
-  }
-
-  return <AdminLayoutClient config={config} enableParentSync={enableParentSync}>{children}</AdminLayoutClient>;
 }
 
-function AdminLayoutClient({
+// Wrapper component that provides CfgAppProvider with auth callback
+function AdminLayoutClientWithProvider({
   children,
   config,
-  enableParentSync = true
+  enableParentSync
 }: AdminLayoutProps) {
-  const { isAdminUser, user, isLoading, isAuthenticated, loadCurrentProfile } = useAuth();
-  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
+  const { loadCurrentProfile } = useAuth();
 
   // Use refs to prevent re-renders and maintain state across renders
   const profileLoadedRef = React.useRef(false);
@@ -131,74 +109,82 @@ function AdminLayoutClient({
   // 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);
+    consola.info('[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');
+      consola.warn('[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');
+    consola.start('[AdminLayout] First time receiving tokens, processing...');
+    consola.debug('[AdminLayout] Tokens:', {
+      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');
+    consola.success('[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)...');
+      consola.start('[AdminLayout] Loading user profile (first time)...');
       try {
         await loadCurrentProfileRef.current('AdminLayout.onAuthTokenReceived');
         profileLoadedRef.current = true;
-        console.log('[AdminLayout] User profile loaded successfully');
+        consola.success('[AdminLayout] User profile loaded successfully');
       } catch (error) {
-        console.error('[AdminLayout] Failed to load profile:', error);
+        consola.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');
+      consola.info('[AdminLayout] Profile already loaded, skipping duplicate call');
     }
 
     // Call custom handler if provided
     if (config?.onAuthTokenReceived) {
-      console.log('[AdminLayout] Calling custom onAuthTokenReceived handler');
+      consola.info('[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: handleAuthToken  // Now truly stable - never recreated
-  });
+  return (
+    <CfgAppProvider options={{
+      onAuthTokenReceived: handleAuthToken
+    }}>
+      <AdminLayoutClient config={config} enableParentSync={enableParentSync}>{children}</AdminLayoutClient>
+    </CfgAppProvider>
+  );
+}
+
+function AdminLayoutClient({
+  children,
+  config,
+  enableParentSync = true
+}: AdminLayoutProps) {
+  const { isAdminUser, user, isLoading, isAuthenticated } = useAuth();
+  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
+
+  // Get embedding state from context (provided by CfgAppProvider wrapper)
+  const { isEmbedded } = useCfgAppContext();
 
   // console.log('[AdminLayout] isEmbedded:', isEmbedded);
 
-  // Minimalist loading component
-  const LoadingState = () => (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '0ms' }} />
-        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '150ms' }} />
-        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
-        <span className="ml-2">Loading...</span>
-      </div>
-    </div>
-  );
-
   // Show loading while auth is initializing (waiting for tokens from parent or profile loading)
   // OR if user object is not loaded yet (null/undefined)
   // OR if authentication status is not yet determined
   if (isLoading || !user || !isAuthenticated) {
     // console.log('[AdminLayout] Showing loading state - isLoading:', isLoading, 'user:', user, 'isAuthenticated:', isAuthenticated);
-    return <LoadingState />;
+    return <PagePreloader text="Authenticating..." size="lg" />;
   }
 
   // Only show "Access Denied" when we are CERTAIN user doesn't have permissions

package/src/layouts/AppLayout/layouts/AdminLayout/components/PagePreloader.example.tsx

@@ -0,0 +1,98 @@
+/**
+ * PagePreloader - Usage Examples
+ *
+ * This file contains examples of how to use the PagePreloader component
+ */
+
+import { PagePreloader, PagePreloaderDark } from './PagePreloader';
+
+// ============================================================================
+// Example 1: Basic Usage
+// ============================================================================
+export function Example1_Basic() {
+  return <PagePreloader />;
+}
+
+// ============================================================================
+// Example 2: Custom Text
+// ============================================================================
+export function Example2_CustomText() {
+  return <PagePreloader text="Loading your dashboard..." />;
+}
+
+// ============================================================================
+// Example 3: Different Sizes
+// ============================================================================
+export function Example3_DifferentSizes() {
+  return (
+    <>
+      <PagePreloader size="sm" text="Small" />
+      <PagePreloader size="md" text="Medium" />
+      <PagePreloader size="lg" text="Large" />
+      <PagePreloader size="xl" text="Extra Large" />
+    </>
+  );
+}
+
+// ============================================================================
+// Example 4: Dark Variant
+// ============================================================================
+export function Example4_Dark() {
+  return <PagePreloaderDark text="Loading..." />;
+}
+
+// ============================================================================
+// Example 5: No Text
+// ============================================================================
+export function Example5_NoText() {
+  return <PagePreloader showText={false} />;
+}
+
+// ============================================================================
+// Example 6: No Backdrop
+// ============================================================================
+export function Example6_NoBackdrop() {
+  return <PagePreloader backdrop={false} />;
+}
+
+// ============================================================================
+// Example 7: Custom Backdrop Opacity
+// ============================================================================
+export function Example7_CustomBackdropOpacity() {
+  return <PagePreloader backdropOpacity={50} text="50% opacity backdrop" />;
+}
+
+// ============================================================================
+// Example 8: Conditional Loading
+// ============================================================================
+export function Example8_ConditionalLoading({ isLoading }: { isLoading: boolean }) {
+  if (!isLoading) return null;
+  return <PagePreloader text="Loading data..." />;
+}
+
+// ============================================================================
+// Example 9: With Custom Styling
+// ============================================================================
+export function Example9_CustomStyling() {
+  return (
+    <PagePreloader
+      className="bg-gradient-to-br from-blue-500 to-purple-600"
+      text="Loading..."
+    />
+  );
+}
+
+// ============================================================================
+// Example 10: In AdminLayout
+// ============================================================================
+export function Example10_InAdminLayout() {
+  // Usage in AdminLayout component
+  const isLoading = true; // Replace with actual loading state
+
+  return (
+    <>
+      {isLoading && <PagePreloader text="Loading application..." />}
+      {/* Rest of your app */}
+    </>
+  );
+}

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

@@ -0,0 +1,149 @@
+/**
+ * PagePreloader Component
+ *
+ * Full-page loading indicator with Lottie animation
+ */
+
+'use client';
+
+import React from 'react';
+import { LottiePlayer } from '@djangocfg/ui/tools';
+import energizingAnimation from '../lottie/energizing.json';
+
+export interface PagePreloaderProps {
+  /**
+   * Custom loading text
+   * @default 'Loading...'
+   */
+  text?: string;
+
+  /**
+   * Show loading text
+   * @default true
+   */
+  showText?: boolean;
+
+  /**
+   * Animation size
+   * @default 'lg'
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * Whether to show backdrop
+   * @default true
+   */
+  backdrop?: boolean;
+
+  /**
+   * Backdrop opacity (0-100)
+   * @default 80
+   */
+  backdropOpacity?: number;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * PagePreloader - Full-page loading indicator with energizing animation
+ *
+ * Features:
+ * - Lottie animation with energizing effect
+ * - Customizable text and size
+ * - Optional backdrop
+ * - Smooth fade-in animation
+ *
+ * Usage:
+ * ```tsx
+ * // Basic usage
+ * <PagePreloader />
+ *
+ * // With custom text
+ * <PagePreloader text="Loading your data..." />
+ *
+ * // Different size
+ * <PagePreloader size="xl" />
+ *
+ * // Without backdrop
+ * <PagePreloader backdrop={false} />
+ *
+ * // Custom styling
+ * <PagePreloader className="bg-gradient-to-br from-blue-500 to-purple-600" />
+ * ```
+ */
+export function PagePreloader({
+  text = 'Loading...',
+  showText = true,
+  size = 'lg',
+  backdrop = true,
+  backdropOpacity = 80,
+  className,
+}: PagePreloaderProps) {
+  // Generate backdrop opacity classes based on opacity value with explicit light/dark variants
+  const getBackdropClasses = () => {
+    if (!backdrop) return 'bg-transparent';
+
+    // Use explicit light/dark classes for reliable theme support
+    if (backdropOpacity >= 90) {
+      return 'bg-white dark:bg-gray-950'; // Full opacity
+    } else if (backdropOpacity >= 70) {
+      return 'bg-white/90 dark:bg-gray-950/90'; // 90% opacity
+    } else if (backdropOpacity >= 50) {
+      return 'bg-white/80 dark:bg-gray-950/80'; // 80% opacity
+    } else {
+      return 'bg-white/60 dark:bg-gray-950/60'; // 60% opacity
+    }
+  };
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center ${getBackdropClasses()} ${className || ''}`}
+    >
+      <div className="flex flex-col items-center gap-6 animate-in fade-in duration-300">
+        {/* Lottie Animation */}
+        <div className="relative">
+          <LottiePlayer
+            src={energizingAnimation}
+            size={size}
+            autoplay
+            loop
+            speed={1}
+          />
+        </div>
+
+        {/* Loading Text */}
+        {showText && (
+          <div className="flex flex-col items-center gap-2">
+            <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
+              {text}
+            </p>
+            <div className="flex gap-1">
+              <span className="h-2 w-2 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400" style={{ animationDelay: '0ms' }} />
+              <span className="h-2 w-2 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400" style={{ animationDelay: '150ms' }} />
+              <span className="h-2 w-2 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400" style={{ animationDelay: '300ms' }} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * PagePreloaderDark - Dark variant of PagePreloader
+ *
+ * Same as PagePreloader but forces dark backdrop
+ * Note: Regular PagePreloader now uses semantic theme colors,
+ * so this is only needed for specific dark-only use cases
+ */
+export function PagePreloaderDark(props: Omit<PagePreloaderProps, 'className'>) {
+  return (
+    <PagePreloader
+      {...props}
+      className="bg-gray-950/95"
+    />
+  );
+}

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

@@ -12,7 +12,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useAuth } from '../../../../../auth';
 import { useThemeContext } from '@djangocfg/ui';
-import { useCfgApp } from '../hooks/useApp';
+import { useCfgAppContext } from '../context';
 import { authLogger } from '../../../../../utils/logger';
 
 /**
@@ -52,7 +52,7 @@ function ParentSyncClient() {
   const router = useRouter();
   const auth = useAuth();
   const { setTheme } = useThemeContext();
-  const { isEmbedded, isMounted, parentTheme } = useCfgApp();
+  const { isEmbedded, isMounted, parentTheme } = useCfgAppContext();
 
   // 1. Sync theme from parent → iframe
   useEffect(() => {

package/src/layouts/AppLayout/layouts/AdminLayout/components/index.ts

@@ -1 +1,3 @@
 export { ParentSync, AuthStatusSync } from './ParentSync';
+export { PagePreloader, PagePreloaderDark } from './PagePreloader';
+export type { PagePreloaderProps } from './PagePreloader';

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

@@ -0,0 +1,48 @@
+// ============================================================================
+// CfgApp Context - Shared App State
+// ============================================================================
+// Provides useCfgApp state to child components without duplicate hook calls
+
+'use client';
+
+import React, { createContext, useContext, ReactNode } from 'react';
+import { UseCfgAppReturn, useCfgApp, UseCfgAppOptions } from '../hooks/useApp';
+
+const CfgAppContext = createContext<UseCfgAppReturn | null>(null);
+
+export interface CfgAppProviderProps {
+  children: ReactNode;
+  options?: UseCfgAppOptions;
+}
+
+/**
+ * Provider for CfgApp state
+ *
+ * Should be used once at the top level (e.g., AdminLayout)
+ * to avoid multiple useCfgApp() calls which cause duplicate
+ * message listeners and iframe-ready signals
+ */
+export function CfgAppProvider({ children, options }: CfgAppProviderProps) {
+  const cfgApp = useCfgApp(options);
+
+  return (
+    <CfgAppContext.Provider value={cfgApp}>
+      {children}
+    </CfgAppContext.Provider>
+  );
+}
+
+/**
+ * Hook to consume CfgApp state
+ *
+ * @throws Error if used outside CfgAppProvider
+ */
+export function useCfgAppContext(): UseCfgAppReturn {
+  const context = useContext(CfgAppContext);
+
+  if (!context) {
+    throw new Error('useCfgAppContext must be used within CfgAppProvider');
+  }
+
+  return context;
+}

package/src/layouts/AppLayout/layouts/AdminLayout/context/index.ts

@@ -0,0 +1,2 @@
+export { CfgAppProvider, useCfgAppContext } from './CfgAppContext';
+export type { CfgAppProviderProps } from './CfgAppContext';