@djangocfg/layouts 1.2.24 → 1.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.24",
+  "version": "1.2.25",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -20,6 +20,16 @@
       "import": "./src/auth/index.ts",
       "default": "./src/auth/index.ts"
     },
+    "./auth/context": {
+      "types": "./src/auth/context/index.ts",
+      "import": "./src/auth/context/index.ts",
+      "default": "./src/auth/context/index.ts"
+    },
+    "./auth/hooks": {
+      "types": "./src/auth/hooks/index.ts",
+      "import": "./src/auth/hooks/index.ts",
+      "default": "./src/auth/hooks/index.ts"
+    },
     "./layouts": {
       "types": "./src/layouts/index.ts",
       "import": "./src/layouts/index.ts",
@@ -53,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.24",
-    "@djangocfg/og-image": "^1.2.24",
-    "@djangocfg/ui": "^1.2.24",
+    "@djangocfg/api": "^1.2.25",
+    "@djangocfg/og-image": "^1.2.25",
+    "@djangocfg/ui": "^1.2.25",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.24",
+    "@djangocfg/typescript-config": "^1.2.25",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/context/AccountsContext.tsx

@@ -0,0 +1,209 @@
+/**
+ * Accounts Context
+ *
+ * Manages user authentication and profile operations using generated SWR hooks
+ *
+ * Features:
+ * - OTP-based authentication
+ * - User profile management
+ * - Avatar upload
+ * - Profile updates
+ * - localStorage cache with TTL (1 hour)
+ */
+
+"use client";
+
+import { createContext, useContext, ReactNode, useState, useCallback } from 'react';
+import { getCachedProfile, setCachedProfile, clearProfileCache } from '../hooks/useProfileCache';
+import {
+  api,
+  usePartialUpdateAccountsProfilePartialUpdate,
+  useUpdateAccountsProfileUpdateUpdate,
+  useCreateAccountsProfileAvatarCreate,
+  useCreateAccountsOtpRequestCreate,
+  useCreateAccountsOtpVerifyCreate,
+  useCreateAccountsTokenRefreshCreate,
+  getAccountsProfileRetrieve,
+  PatchedUserProfileUpdateRequestSchema,
+  type User,
+  type UserProfileUpdateRequest,
+  type PatchedUserProfileUpdateRequest,
+  type OTPRequestRequest,
+  type OTPVerifyRequest,
+  type OTPRequestResponse,
+  type OTPVerifyResponse,
+  type TokenRefresh,
+  type API,
+} from '@djangocfg/api';
+
+// Re-export schemas for external use
+export { PatchedUserProfileUpdateRequestSchema };
+export type { PatchedUserProfileUpdateRequest };
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface AccountsContextValue {
+  // Current user profile
+  profile?: User;
+  isLoadingProfile: boolean;
+  profileError: Error | null;
+
+  // Profile operations
+  updateProfile: (data: UserProfileUpdateRequest) => Promise<User>;
+  partialUpdateProfile: (data: PatchedUserProfileUpdateRequest) => Promise<User>;
+  uploadAvatar: (formData: FormData) => Promise<User>;
+  refreshProfile: () => Promise<User | undefined>;
+
+  // Authentication
+  requestOTP: (data: OTPRequestRequest) => Promise<OTPRequestResponse>;
+  verifyOTP: (data: OTPVerifyRequest) => Promise<OTPVerifyResponse>;
+  refreshToken: (refresh: string) => Promise<TokenRefresh>;
+  logout: () => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const AccountsContext = createContext<AccountsContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider Component
+// ─────────────────────────────────────────────────────────────────────────
+
+interface AccountsProviderProps {
+  children: ReactNode;
+}
+
+export function AccountsProvider({ children }: AccountsProviderProps) {
+  // State management with localStorage cache
+  const [profile, setProfile] = useState<User | undefined>(() => {
+    // Initialize from cache on mount
+    const cached = getCachedProfile();
+    return cached || undefined;
+  });
+  const [isLoadingProfile, setIsLoadingProfile] = useState(false);
+  const [profileError, setProfileError] = useState<Error | null>(null);
+
+  // Mutation hooks
+  const updateMutation = useUpdateAccountsProfileUpdateUpdate();
+  const partialUpdateMutation = usePartialUpdateAccountsProfilePartialUpdate();
+  const avatarMutation = useCreateAccountsProfileAvatarCreate();
+  const otpRequestMutation = useCreateAccountsOtpRequestCreate();
+  const otpVerifyMutation = useCreateAccountsOtpVerifyCreate();
+  const tokenRefreshMutation = useCreateAccountsTokenRefreshCreate();
+
+  // Refresh profile - fetch and cache
+  const refreshProfile = useCallback(async (): Promise<User | undefined> => {
+    setIsLoadingProfile(true);
+    setProfileError(null);
+    try {
+      const result = await getAccountsProfileRetrieve(api as unknown as API);
+      setProfile(result);
+      // Save to cache with 1 hour TTL
+      setCachedProfile(result);
+      return result;
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error('Failed to fetch profile');
+      setProfileError(err);
+      throw err;
+    } finally {
+      setIsLoadingProfile(false);
+    }
+  }, []);
+
+  // Update profile (full)
+  const updateProfile = async (data: UserProfileUpdateRequest): Promise<User> => {
+    const result = await updateMutation(data, api as unknown as API);
+    await refreshProfile();
+    return result as User;
+  };
+
+  // Partial update profile
+  const partialUpdateProfile = async (data: PatchedUserProfileUpdateRequest): Promise<User> => {
+    const result = await partialUpdateMutation(data, api as unknown as API);
+    await refreshProfile();
+    return result as User;
+  };
+
+  // Upload avatar
+  const uploadAvatar = async (formData: FormData): Promise<User> => {
+    const result = await avatarMutation(formData, api as unknown as API);
+    await refreshProfile();
+    return result as User;
+  };
+
+  // Request OTP
+  const requestOTP = async (data: OTPRequestRequest): Promise<OTPRequestResponse> => {
+    const result = await otpRequestMutation(data, api as unknown as API);
+    return result as OTPRequestResponse;
+  };
+
+  // Verify OTP
+  const verifyOTP = async (data: OTPVerifyRequest): Promise<OTPVerifyResponse> => {
+    const result = await otpVerifyMutation(data, api as unknown as API);
+
+    // Automatically save tokens after successful verification
+    if (result.access && result.refresh) {
+      api.setToken(result.access, result.refresh);
+      // Refresh profile to load user data with new token
+      await refreshProfile();
+    }
+
+    return result as OTPVerifyResponse;
+  };
+
+  // Refresh token
+  const refreshToken = async (refresh: string): Promise<TokenRefresh> => {
+    const result = await tokenRefreshMutation({ refresh }, api as unknown as API);
+
+    // Automatically save new access token
+    if (result.access) {
+      api.setToken(result.access, refresh);
+    }
+
+    return result as TokenRefresh;
+  };
+
+  // Logout - clear tokens, profile state, and cache
+  const logout = useCallback(() => {
+    api.clearTokens();
+    setProfile(undefined);
+    setProfileError(null);
+    clearProfileCache();
+  }, []);
+
+  const value: AccountsContextValue = {
+    profile,
+    isLoadingProfile,
+    profileError,
+    updateProfile,
+    partialUpdateProfile,
+    uploadAvatar,
+    refreshProfile,
+    requestOTP,
+    verifyOTP,
+    refreshToken,
+    logout,
+  };
+
+  return (
+    <AccountsContext.Provider value={value}>
+      {children}
+    </AccountsContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function useAccountsContext(): AccountsContextValue {
+  const context = useContext(AccountsContext);
+  if (!context) {
+    throw new Error('useAccountsContext must be used within AccountsProvider');
+  }
+  return context;
+}

package/src/auth/context/AuthContext.tsx

@@ -4,8 +4,9 @@ import React, {
 } from 'react';
 
 import { api, Enums } from '@djangocfg/api';
-import { useAccountsContext, AccountsProvider } from '@djangocfg/api/cfg/contexts';
+import { useAccountsContext, AccountsProvider } from './AccountsContext';
 import { useLocalStorage } from '@djangocfg/ui/hooks';
+import { getCachedProfile, clearProfileCache } from '../hooks/useProfileCache';
 
 import { authLogger } from '../../utils/logger';
 import type { AuthConfig, AuthContextType, AuthProviderProps, UserProfile } from './types';
@@ -74,6 +75,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   const clearAuthState = useCallback((caller: string) => {
     authLogger.info('clearAuthState >> caller', caller);
     api.clearTokens();
+    clearProfileCache(); // Clear profile cache from localStorage
     // Note: user is now managed by AccountsContext, will auto-update
     setInitialized(true);
     setIsLoading(false);
@@ -148,9 +150,18 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       const hasTokens = hasValidTokens();
       authLogger.info('Has tokens:', hasTokens);
 
-      // If profile is already loaded (from SWR cache), we're initialized
-      if (user) {
-        authLogger.info('Profile already loaded from cache, skipping initialization');
+      // Check if profile is already loaded from cache (AccountsContext initialization)
+      if (userRef.current) {
+        authLogger.info('Profile already loaded from AccountsContext cache, skipping API request');
+        setInitialized(true);
+        setIsLoading(false);
+        return;
+      }
+
+      // Check if cache exists in localStorage (before userRef updates)
+      const cachedProfile = getCachedProfile();
+      if (cachedProfile) {
+        authLogger.info('Profile found in localStorage cache, skipping API request');
         setInitialized(true);
         setIsLoading(false);
         return;
@@ -159,6 +170,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       if (hasTokens) {
         setIsLoading(true);
         try {
+          authLogger.info('No cached profile found, loading from API...');
           await loadCurrentProfile();
         } catch (error) {
           authLogger.error('Failed to load profile during initialization:', error);
@@ -173,7 +185,8 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     };
 
     initializeAuth();
-  }, [initialized, user, loadCurrentProfile, clearAuthState]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialized]);
 
   // Redirect logic - only for unauthenticated users on protected pages
   useEffect(() => {

package/src/auth/context/index.ts

@@ -1,2 +1,4 @@
 export { AuthProvider, useAuth } from './AuthContext';
-export type { AuthConfig, AuthContextType, AuthProviderProps, UserProfile } from './types'; 
+export type { AuthConfig, AuthContextType, AuthProviderProps, UserProfile } from './types';
+export { AccountsProvider, useAccountsContext, PatchedUserProfileUpdateRequestSchema } from './AccountsContext';
+export type { AccountsContextValue, PatchedUserProfileUpdateRequest } from './AccountsContext'; 

package/src/auth/hooks/index.ts

@@ -3,4 +3,12 @@ export { useAuthGuard } from './useAuthGuard';
 export { useSessionStorage } from './useSessionStorage';
 export { useLocalStorage } from './useLocalStorage';
 export { useAuthForm } from './useAuthForm';
-export { useAutoAuth } from './useAutoAuth'; 
+export { useAutoAuth } from './useAutoAuth';
+export {
+  getCachedProfile,
+  setCachedProfile,
+  clearProfileCache,
+  hasValidCache,
+  getCacheMetadata,
+  type ProfileCacheOptions
+} from './useProfileCache'; 

package/src/auth/hooks/useProfileCache.ts

@@ -0,0 +1,141 @@
+/**
+ * Profile Cache Hook
+ *
+ * Provides localStorage-based caching for user profile with:
+ * - TTL (Time To Live) - default 1 hour
+ * - Version control for migrations
+ * - Automatic invalidation on expiry
+ */
+
+import type { User } from '@djangocfg/api';
+import { profileLogger } from '../../utils/logger';
+
+// Cache configuration
+const CACHE_KEY = 'user_profile_cache';
+const CACHE_VERSION = 1;
+const DEFAULT_TTL = 3600000; // 1 hour in milliseconds
+
+export interface ProfileCacheOptions {
+  /** Time to live in milliseconds (default: 1 hour) */
+  ttl?: number;
+}
+
+interface CachedProfile {
+  version: number;
+  data: User;
+  timestamp: number;
+  ttl: number;
+}
+
+/**
+ * Get cached profile from localStorage
+ * @returns User profile if valid cache exists, null otherwise
+ */
+export function getCachedProfile(): User | null {
+  try {
+    if (typeof window === 'undefined') return null;
+
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return null;
+
+    const cachedData: CachedProfile = JSON.parse(cached);
+
+    // Version check
+    if (cachedData.version !== CACHE_VERSION) {
+      profileLogger.warn('Cache version mismatch, clearing cache');
+      clearProfileCache();
+      return null;
+    }
+
+    // TTL check
+    const now = Date.now();
+    const age = now - cachedData.timestamp;
+    if (age > cachedData.ttl) {
+      profileLogger.info('Cache expired, clearing');
+      clearProfileCache();
+      return null;
+    }
+
+    profileLogger.debug('Cache hit, age:', Math.round(age / 1000), 'seconds');
+    return cachedData.data;
+  } catch (error) {
+    profileLogger.error('Error reading cache:', error);
+    clearProfileCache();
+    return null;
+  }
+}
+
+/**
+ * Save profile to localStorage cache
+ * @param profile - User profile to cache
+ * @param options - Cache options (TTL)
+ */
+export function setCachedProfile(profile: User, options?: ProfileCacheOptions): void {
+  try {
+    if (typeof window === 'undefined') return;
+
+    const cachedData: CachedProfile = {
+      version: CACHE_VERSION,
+      data: profile,
+      timestamp: Date.now(),
+      ttl: options?.ttl || DEFAULT_TTL,
+    };
+
+    localStorage.setItem(CACHE_KEY, JSON.stringify(cachedData));
+    profileLogger.debug('Profile cached, TTL:', cachedData.ttl / 1000, 'seconds');
+  } catch (error) {
+    profileLogger.error('Error writing cache:', error);
+  }
+}
+
+/**
+ * Clear profile cache from localStorage
+ */
+export function clearProfileCache(): void {
+  try {
+    if (typeof window === 'undefined') return;
+    localStorage.removeItem(CACHE_KEY);
+    profileLogger.debug('Cache cleared');
+  } catch (error) {
+    profileLogger.error('Error clearing cache:', error);
+  }
+}
+
+/**
+ * Check if cached profile is valid (exists and not expired)
+ */
+export function hasValidCache(): boolean {
+  return getCachedProfile() !== null;
+}
+
+/**
+ * Get cache metadata (age, TTL, etc.)
+ */
+export function getCacheMetadata(): {
+  exists: boolean;
+  age?: number;
+  ttl?: number;
+  expiresIn?: number;
+} | null {
+  try {
+    if (typeof window === 'undefined') return null;
+
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return { exists: false };
+
+    const cachedData: CachedProfile = JSON.parse(cached);
+    const now = Date.now();
+    const age = now - cachedData.timestamp;
+    const expiresIn = cachedData.ttl - age;
+
+    return {
+      exists: true,
+      age,
+      ttl: cachedData.ttl,
+      expiresIn: Math.max(0, expiresIn),
+    };
+  } catch (error) {
+    profileLogger.error('Error reading metadata:', error);
+    return null;
+  }
+}

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-04T07:41:20.959Z
+ * Last updated: 2025-11-05T19:45:52.509Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.24"
+    "version": "1.2.25"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.24"
+    "version": "1.2.25"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.24"
+    "version": "1.2.25"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.24"
+    "version": "1.2.25"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.24"
+    "version": "1.2.25"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.24"
+    "version": "1.2.25"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.24"
+    "version": "1.2.25"
   }
 ];
 

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

@@ -82,15 +82,42 @@ export function AdminLayout({
   config,
   enableParentSync = true
 }: AdminLayoutProps) {
+  // Only run on client side
   const [isMounted, setIsMounted] = React.useState(false);
-  const { user, isLoading, isAuthenticated, loadCurrentProfile } = useAuth();
-  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
 
   // 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>
+  );
+
+  // 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({
+  children,
+  config,
+  enableParentSync = true
+}: AdminLayoutProps) {
+  const { user, isLoading, isAuthenticated, loadCurrentProfile } = useAuth();
+  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
+
   // useCfgApp hook is called here to initialize iframe communication
   // Automatically sets tokens in API client when received from parent
   const { isEmbedded } = useCfgApp({
@@ -129,11 +156,6 @@ export function AdminLayout({
     </div>
   );
 
-  // During SSR and initial render, show loading to prevent hydration mismatch
-  if (!isMounted) {
-    return <LoadingState />;
-  }
-
   // 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

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -9,7 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@djangocfg/ui/components';
-import { AccountsProvider } from '@djangocfg/api/cfg/contexts';
+import { AccountsProvider } from '@djangocfg/layouts/auth/context';
 import { useAuth } from '../../auth';
 
 import { AvatarSection, ProfileForm } from './components';

package/src/layouts/ProfileLayout/components/AvatarSection.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { toast } from 'sonner';
 
 import { Avatar, AvatarFallback, Button } from '@djangocfg/ui/components';
-import { useAccountsContext } from '@djangocfg/api/cfg/contexts';
+import { useAccountsContext } from '@djangocfg/layouts/auth/context';
 import { useAuth } from '../../../auth';
 
 export const AvatarSection = () => {

package/src/layouts/ProfileLayout/components/ProfileForm.tsx

@@ -22,7 +22,7 @@ import {
   useAccountsContext,
   PatchedUserProfileUpdateRequestSchema,
   type PatchedUserProfileUpdateRequest
-} from '@djangocfg/api/cfg/contexts';
+} from '@djangocfg/layouts/auth/context';
 import { useAuth } from '../../../auth';
 
 export const ProfileForm = () => {

package/src/layouts/UILayout/core/UIGuideApp.client.tsx

@@ -0,0 +1,18 @@
+/**
+ * UI Guide App
+ *
+ * Complete UI Guide application with UILayout
+ * Uses config-driven approach with context for navigation
+ */
+
+'use client';
+
+import React from 'react';
+import UIGuideView from './UIGuideView';
+
+export function UIGuideApp() {
+  // UIGuideView now includes UIGuideLanding as 'overview' category
+  // and uses ShowcaseProvider context for navigation
+  // All component data comes from centralized config
+  return <UIGuideView />;
+}

package/src/layouts/UILayout/core/UIGuideApp.tsx

@@ -1,18 +1,33 @@
 /**
- * UI Guide App
+ * UI Guide App - Dynamic Import Wrapper
  *
- * Complete UI Guide application with UILayout
- * Uses config-driven approach with context for navigation
+ * Lazy loads the heavy UILayout library (~1.5MB with Mermaid, PrettyCode, etc.)
+ * Only loads when UI documentation page is accessed
  */
 
 'use client';
 
+import dynamic from 'next/dynamic';
 import React from 'react';
-import UIGuideView from './UIGuideView';
+
+// Dynamic import with loading state
+const UIGuideAppClient = dynamic(() => import('./UIGuideApp.client').then(mod => ({ default: mod.UIGuideApp })), {
+  ssr: false,
+  loading: () => (
+    <div className="min-h-screen bg-background flex items-center justify-center">
+      <div className="text-center space-y-4">
+        <div className="flex justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+        </div>
+        <div className="space-y-2">
+          <h2 className="text-xl font-semibold text-foreground">Loading UI Guide</h2>
+          <p className="text-sm text-muted-foreground">Preparing component showcase...</p>
+        </div>
+      </div>
+    </div>
+  ),
+});
 
 export function UIGuideApp() {
-  // UIGuideView now includes UIGuideLanding as 'overview' category
-  // and uses ShowcaseProvider context for navigation
-  // All component data comes from centralized config
-  return <UIGuideView />;
+  return <UIGuideAppClient />;
 }