@djangocfg/layouts 1.2.34 → 1.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.34",
+  "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.34",
-    "@djangocfg/og-image": "^1.2.34",
-    "@djangocfg/ui": "^1.2.34",
+    "@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.34",
+    "@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-11T06:22:05.284Z
+ * Last updated: 2025-11-12T09:15:11.957Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.34"
+    "version": "1.2.35"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.34"
+    "version": "1.2.35"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.34"
+    "version": "1.2.35"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.34"
+    "version": "1.2.35"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.34"
+    "version": "1.2.35"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.34"
+    "version": "1.2.35"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.34"
+    "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';

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { authLogger } from '../../../../../utils/logger';
+import { consola } from 'consola';
 
 export interface UseCfgAppReturn {
   /**
@@ -86,6 +87,9 @@ export interface UseCfgAppOptions {
  * );
  * ```
  */
+// Global flag to track if iframe-ready was sent (persists across component remounts)
+let iframeReadySent = false;
+
 export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
   const router = useRouter();
   const [isMounted, setIsMounted] = useState(false);
@@ -138,11 +142,11 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
       switch (type) {
         case 'parent-auth':
-          console.log('[useCfgApp] parent-auth message received, authTokenProcessed:', authTokenProcessed);
+          consola.info('[useCfgApp] parent-auth message received', { authTokenProcessed });
 
           // Prevent processing if already handled
           if (authTokenProcessed) {
-            console.log('[useCfgApp] Auth tokens already processed, ignoring duplicate message');
+            consola.warn('[useCfgApp] Auth tokens already processed, ignoring duplicate message');
             return;
           }
 
@@ -155,21 +159,24 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
           authTokenTimeout = setTimeout(() => {
             // Double-check still not processed (race condition protection)
             if (authTokenProcessed) {
-              console.log('[useCfgApp] Auth tokens already processed during debounce, skipping');
+              consola.warn('[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');
+              consola.success('[useCfgApp] Auth tokens found, calling onAuthTokenReceived callback');
+              consola.debug('[useCfgApp] Tokens:', {
+                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');
+                consola.success('[useCfgApp] onAuthTokenReceived callback completed successfully');
               } catch (e) {
                 authLogger.error('Failed to process auth tokens:', e);
                 // Reset on error to allow retry
@@ -205,10 +212,10 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
     window.addEventListener('message', handleMessage);
     // console.log('[useCfgApp] Message listener registered, isEmbedded:', inIframe);
 
-    // Send iframe-ready since listener is registered
-    if (inIframe) {
+    // Send iframe-ready ONLY ONCE (even if component remounts)
+    if (inIframe && !iframeReadySent) {
       try {
-        // console.log('[useCfgApp] Sending iframe-ready message to parent');
+        consola.start('[useCfgApp] Sending iframe-ready message to parent (FIRST TIME)');
         window.parent.postMessage({
           type: 'iframe-ready',
           data: {
@@ -216,12 +223,13 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
             referrer: document.referrer
           }
         }, '*');
-        // authLogger.debug('iframe-ready message sent');
+        iframeReadySent = true; // Mark as sent to prevent duplicates
+        consola.success('[useCfgApp] iframe-ready message sent');
       } catch (e) {
         authLogger.error('Failed to notify parent about ready state:', e);
       }
-    } else {
-      // console.log('[useCfgApp] Not in iframe, skipping iframe-ready message');
+    } else if (inIframe && iframeReadySent) {
+      consola.info('[useCfgApp] iframe-ready already sent, skipping to prevent loop');
     }
 
     return () => {

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

@@ -13,6 +13,10 @@ export type { AdminLayoutProps } from './AdminLayout';
 export { useCfgApp, useApp } from './hooks';
 export type { UseCfgAppReturn, UseCfgAppOptions, UseAppReturn, UseAppOptions } from './hooks';
 
+// Context
+export { CfgAppProvider, useCfgAppContext } from './context';
+export type { CfgAppProviderProps } from './context';
+
 // Components
 export { ParentSync, AuthStatusSync } from './components';
 

package/src/layouts/AppLayout/layouts/AdminLayout/lottie/energizing.json

@@ -0,0 +1 @@
+{"nm":"Rander","ddd":0,"h":512,"w":512,"meta":{"g":"LottieFiles AE 2.0.4"},"layers":[{"ty":4,"nm":"Capa 2","sr":1,"st":0,"op":46,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.002,256,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.956,"y":0},"i":{"x":0.237,"y":1},"s":[120,120,100],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.395,"y":1},"s":[60,60,100],"t":40},{"s":[120,120,100],"t":46}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.002,256,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[1.638,-9.168],[0,0],[0,0],[-8.437,0],[0,0],[-5.944,5.985],[0,0]],"o":[[0,0],[0,0],[-5.944,5.985],[0,0],[-8.437,0],[0,0],[6.562,-6.613]],"v":[[75.715,-65.189],[73.984,-55.526],[-40.87,60.214],[-34.133,76.388],[-66.367,76.388],[-73.104,60.214],[59.634,-73.544]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.8196,0.3569],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[226.809,194.352],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 2","ix":2,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[1.061,-5.831],[0,0],[0,0],[-1.679,9.179],[0,0],[5.924,0],[0,0]],"o":[[0,0],[0,0],[-6.562,6.624],[0,0],[1.061,-5.831],[0,0],[5.934,0]],"v":[[25.334,-50.448],[8.686,40.722],[-9.249,58.802],[-25.32,50.416],[-6.9,-50.448],[-16.244,-61.646],[15.99,-61.646]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.8196,0.3569],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[233.82,332.386],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tr","a":{"a":0,"k":[233.82,332.386],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[233.82,332.386],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 2","ix":2,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[6.558,-6.608],[0,0],[-8.439,0],[0,0],[1.064,-5.829],[0,0],[-6.57,6.624],[0,0],[8.2,0.413],[0,0],[-1.005,5.629],[0,0]],"o":[[0,0],[-5.945,5.99],[0,0],[5.925,0],[0,0],[-1.676,9.178],[0,0],[5.782,-5.829],[0,0],[-5.71,-0.288],[0,0],[1.639,-9.166]],"v":[[30.44,-135.194],[-102.297,-1.434],[-95.559,14.745],[-38.427,14.745],[-29.089,25.943],[-47.507,126.802],[-31.43,135.192],[102.301,0.367],[96.039,-15.798],[38.063,-18.72],[29.196,-29.87],[46.521,-126.837]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9961,0.8941,0.3529],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[256.002,256],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Shape Layer 1","sr":1,"st":-41,"op":46,"ip":-39,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[6,22,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0,0,100],"t":13},{"s":[800,800,100],"t":30}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[252.5,252.5,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":13},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"s":[0],"t":30}],"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[30,30],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":13},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[3],"t":23},{"s":[0],"t":30}],"ix":5},"c":{"a":0,"k":[1,0.9647,0],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[6,22],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2}],"v":"4.8.0","fr":30,"op":46,"ip":0,"assets":[]}

package/src/layouts/PaymentsLayout/views/payments/components/PaymentsList.tsx

@@ -26,21 +26,26 @@ import {
   SelectTrigger,
   SelectValue,
   Skeleton,
+  useDRFPagination,
+  StaticPagination,
 } from '@djangocfg/ui';
-import { Plus, Search, Filter, ChevronLeft, ChevronRight, RefreshCw, ExternalLink } from 'lucide-react';
-import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
+import { Plus, Search, Filter, RefreshCw, ExternalLink } from 'lucide-react';
+import { api, Hooks } from '@djangocfg/api';
 import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
 
 export const PaymentsList: React.FC = () => {
+  // Local pagination state
+  const pagination = useDRFPagination(1, 20);
+
+  // Fetch payments with pagination
   const {
-    payments,
-    isLoadingPayments,
-    refreshPayments,
-  } = usePaymentsContext();
+    data: payments,
+    error,
+    isLoading: isLoadingPayments,
+    mutate: refreshPayments,
+  } = Hooks.usePaymentsPaymentsList(pagination.params, api as any);
 
   const paymentsList = payments?.results || [];
-  const currentPage = payments?.page || 1;
-  const pageSize = payments?.page_size || 20;
   const totalCount = payments?.count || 0;
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -88,22 +93,16 @@ export const PaymentsList: React.FC = () => {
     }
   };
 
-  const handleSearch = async (value: string) => {
+  const handleSearch = (value: string) => {
     setSearchTerm(value);
-    // TODO: Implement search/filter in PaymentsContext when API supports it
-    await refreshPayments();
+    // Client-side filtering only
   };
 
-  const handleStatusFilter = async (status: string) => {
+  const handleStatusFilter = (status: string) => {
     setStatusFilter(status);
-    // TODO: Implement status filter in PaymentsContext when API supports it
-    await refreshPayments();
+    // Client-side filtering only
   };
 
-  const handlePageChange = async (page: number) => {
-    // TODO: Implement pagination in PaymentsContext
-    await refreshPayments();
-  };
 
   // Filter payments client-side for now (until API supports filtering)
   const filteredPayments = paymentsList.filter((payment) => {
@@ -120,17 +119,13 @@ export const PaymentsList: React.FC = () => {
     return matchesSearch && matchesStatus;
   });
 
-  const totalPages = Math.ceil((totalCount || 0) / (pageSize || 20));
-  const showingFrom = ((currentPage || 1) - 1) * (pageSize || 20) + 1;
-  const showingTo = Math.min((currentPage || 1) * (pageSize || 20), totalCount || 0);
-
   return (
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center justify-between">
           <span>Payment History</span>
           <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={refreshPayments} disabled={isLoadingPayments}>
+            <Button variant="outline" size="sm" onClick={() => refreshPayments()} disabled={isLoadingPayments}>
               <RefreshCw className={`h-4 w-4 mr-2 ${isLoadingPayments ? 'animate-spin' : ''}`} />
               Refresh
             </Button>
@@ -267,38 +262,12 @@ export const PaymentsList: React.FC = () => {
               </Table>
             </div>
 
-            {/* Pagination */}
-            {totalPages > 1 && (
-              <div className="flex items-center justify-between">
-                <div className="text-sm text-muted-foreground">
-                  Showing {showingFrom} to {showingTo} of {totalCount} payments
-                </div>
-
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handlePageChange((currentPage || 1) - 1)}
-                    disabled={!currentPage || currentPage <= 1}
-                  >
-                    <ChevronLeft className="h-4 w-4" />
-                  </Button>
-
-                  <span className="text-sm">
-                    Page {currentPage || 1} of {totalPages}
-                  </span>
-
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handlePageChange((currentPage || 1) + 1)}
-                    disabled={!currentPage || currentPage >= totalPages}
-                  >
-                    <ChevronRight className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            )}
+            {/* DRF Pagination */}
+            <StaticPagination
+              data={payments}
+              onPageChange={pagination.setPage}
+              className="mt-4"
+            />
           </>
         )}
       </CardContent>

package/src/layouts/UILayout/config/components/tools.config.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
+import { JsonTree, PrettyCode, Mermaid, LottiePlayer } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
 // Sample data for demos
@@ -201,4 +201,34 @@ export const TOOLS_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'LottiePlayer',
+    category: 'tools',
+    description: 'Lottie animation player with size presets and playback controls',
+    importPath: `import { LottiePlayer } from '@djangocfg/ui';`,
+    example: `<LottiePlayer
+  src="https://lottie.host/embed/a0eb3923-2f93-4a2e-9c91-3e0b0f6f3b3e/WHJEbMDJLn.json"
+  size="md"
+  autoplay
+  loop
+/>
+
+// Custom size and speed
+<LottiePlayer
+  src={animationData}
+  width={300}
+  height={300}
+  speed={1.5}
+/>`,
+    preview: (
+      <div className="flex items-center justify-center p-8">
+        <LottiePlayer
+          src="https://lottie.host/embed/a0eb3923-2f93-4a2e-9c91-3e0b0f6f3b3e/WHJEbMDJLn.json"
+          size="md"
+          autoplay
+          loop
+        />
+      </div>
+    ),
+  },
 ];