@djangocfg/layouts 2.0.8 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.38",
-    "@djangocfg/centrifugo": "^1.4.38",
-    "@djangocfg/ui": "^1.4.38",
+    "@djangocfg/api": "^1.4.40",
+    "@djangocfg/centrifugo": "^1.4.40",
+    "@djangocfg/ui": "^1.4.40",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -114,7 +114,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.38",
+    "@djangocfg/typescript-config": "^1.4.40",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/context/AuthContext.tsx

@@ -8,7 +8,7 @@ import React, {
 
 import { api, Enums } from '@djangocfg/api';
 import { useAccountsContext, AccountsProvider } from './AccountsContext';
-import { useLocalStorage, useQueryParams, useRouter } from '@djangocfg/ui/hooks';
+import { useLocalStorage, useQueryParams, useCfgRouter } from '@djangocfg/ui/hooks';
 import { getCachedProfile, clearProfileCache } from '../hooks/useProfileCache';
 
 import { authLogger } from '../../utils/logger';
@@ -50,7 +50,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   });
 
   const [initialized, setInitialized] = useState(false);
-  const router = useRouter();
+  const router = useCfgRouter();
   const pathname = usePathname();
   const queryParams = useQueryParams();
 
@@ -362,13 +362,14 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         }
 
         // Handle redirect logic here
+        // Use hardPush for full page reload - ensures all React contexts reinitialize
         const defaultCallback = config?.routes?.defaultCallback || defaultRoutes.defaultCallback;
 
         if (redirectUrl && redirectUrl !== defaultCallback) {
           clearRedirectUrl();
-          router.push(redirectUrl);
+          router.hardPush(redirectUrl);
         } else {
-          router.push(defaultCallback);
+          router.hardPush(defaultCallback);
         }
 
         return {
@@ -460,7 +461,11 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       accounts.logout(); // Clear tokens and profile
       setInitialized(true);
       setIsLoading(false);
-      pushToDefaultAuthCallbackUrl();
+
+      // Use hardReplace for full page reload + replace history
+      // This ensures contexts reinitialize AND back button won't return to protected page
+      const authCallbackUrl = config?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
+      router.hardReplace(authCallbackUrl);
     };
 
     // Use config.onConfirm if provided, otherwise use a simple confirm
@@ -482,7 +487,7 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         performLogout();
       }
     }
-  }, [accounts, pushToDefaultAuthCallbackUrl]);
+  }, [accounts, config?.routes?.defaultAuthCallback, router]);
 
   // Redirect URL methods
   const getSavedRedirectUrl = useCallback((): string | null => {

package/src/auth/hooks/useAuthGuard.ts

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 
 import { useAuth } from '../context';
-import { useRouter } from '@djangocfg/ui/hooks';
+import { useCfgRouter } from '@djangocfg/ui/hooks';
 
 interface UseAuthGuardOptions {
   redirectTo?: string;
@@ -13,7 +13,7 @@ interface UseAuthGuardOptions {
 export const useAuthGuard = (options: UseAuthGuardOptions = {}) => {
   const { redirectTo = '/auth', requireAuth = true } = options;
   const { isAuthenticated, isLoading } = useAuth();
-  const router = useRouter();
+  const router = useCfgRouter();
 
   useEffect(() => {
     if (!isLoading && requireAuth && !isAuthenticated) {

package/src/auth/hooks/useAutoAuth.ts

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import { useQueryParams, useRouter } from '@djangocfg/ui/hooks';
+import { useQueryParams, useCfgRouter } from '@djangocfg/ui/hooks';
 import { authLogger } from '../../utils/logger';
 
 export interface UseAutoAuthOptions {
@@ -18,7 +18,7 @@ export const useAutoAuth = (options: UseAutoAuthOptions = {}) => {
   const { onOTPDetected, cleanupUrl = true } = options;
   const queryParams = useQueryParams();
   const pathname = usePathname();
-  const router = useRouter();
+  const router = useCfgRouter();
 
   const isReady = !!pathname && !!queryParams.get('otp');
   const hasOTP = !!(queryParams.get('otp'));

package/src/auth/hooks/useGithubAuth.ts

@@ -1,9 +1,9 @@
 'use client';
 
 import { useCallback, useState } from 'react';
-import { useRouter } from 'next/navigation';
 
 import { api } from '@djangocfg/api';
+import { useCfgRouter } from '@djangocfg/ui/hooks';
 import { authLogger } from '../../utils/logger';
 import { Analytics, AnalyticsEvent, AnalyticsCategory } from '../../snippets/Analytics';
 
@@ -42,7 +42,7 @@ export interface UseGithubAuthReturn {
  */
 export const useGithubAuth = (options: UseGithubAuthOptions = {}): UseGithubAuthReturn => {
   const { sourceUrl, onSuccess, onError, redirectUrl } = options;
-  const router = useRouter();
+  const router = useCfgRouter();
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -155,8 +155,9 @@ export const useGithubAuth = (options: UseGithubAuthOptions = {}): UseGithubAuth
       onSuccess?.(response.user, response.is_new_user || false);
 
       // Redirect to dashboard or specified URL
+      // Use hardPush for full page reload - ensures all React contexts reinitialize
       const finalRedirectUrl = redirectUrl || '/dashboard';
-      router.push(finalRedirectUrl);
+      router.hardPush(finalRedirectUrl);
 
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'GitHub authentication failed';

package/src/components/RedirectPage/RedirectPage.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 import { useAuth } from '../../auth';
-import { useRouter } from '@djangocfg/ui/hooks';
+import { useCfgRouter } from '@djangocfg/ui/hooks';
 import { Preloader } from '@djangocfg/ui/components';
 
 export interface RedirectPageProps {
@@ -49,7 +49,7 @@ export function RedirectPage({
   loadingText = 'Loading...',
 }: RedirectPageProps) {
   const { isAuthenticated } = useAuth();
-  const router = useRouter();
+  const router = useCfgRouter();
 
   useEffect(() => {
     if (!isAuthenticated) {

package/src/components/core/ClientOnly.tsx

@@ -0,0 +1,73 @@
+/**
+ * ClientOnly Component
+ *
+ * Renders children only on the client side to prevent SSR hydration mismatch.
+ * Shows a fallback (loading state) during SSR and initial client mount.
+ *
+ * @example
+ * ```tsx
+ * import { ClientOnly } from '@djangocfg/layouts/components';
+ *
+ * // With default loading fallback
+ * <ClientOnly>
+ *   <ComponentThatUsesClientOnlyAPIs />
+ * </ClientOnly>
+ *
+ * // With custom fallback
+ * <ClientOnly fallback={<MyCustomLoader />}>
+ *   <ComponentThatUsesClientOnlyAPIs />
+ * </ClientOnly>
+ * ```
+ */
+
+'use client';
+
+import { useState, useEffect, ReactNode } from 'react';
+import { Preloader } from '@djangocfg/ui/components';
+
+export interface ClientOnlyProps {
+  children: ReactNode;
+  /**
+   * Fallback to show during SSR and initial mount
+   * @default Preloader with "Loading..." text
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * Default fallback - fullscreen preloader
+ */
+const defaultFallback = (
+  <Preloader
+    variant="fullscreen"
+    text="Loading..."
+    size="lg"
+    backdrop={true}
+    backdropOpacity={80}
+  />
+);
+
+/**
+ * ClientOnly - Prevents SSR hydration mismatch
+ *
+ * Use this to wrap components that:
+ * - Access browser-only APIs (window, localStorage, etc.)
+ * - Have different initial state on server vs client
+ * - Use authentication state that differs between SSR and CSR
+ */
+export function ClientOnly({
+  children,
+  fallback = defaultFallback,
+}: ClientOnlyProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+}

package/src/components/core/index.ts

@@ -2,6 +2,8 @@
  * Core components exports
  */
 
+export { ClientOnly } from './ClientOnly';
+export type { ClientOnlyProps } from './ClientOnly';
 export { JsonLd } from './JsonLd';
 export { LucideIcon } from './LucideIcon';
 export type { LucideIconProps } from './LucideIcon';

package/src/components/errors/ErrorLayout.tsx

@@ -73,13 +73,12 @@ function getErrorIcon(code?: string | number): React.ReactNode {
           viewBox="0 0 24 24"
           aria-hidden="true"
         >
-          {/* Server Error Icon */}
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 0l-6.849 6.849m0 0l-6.849-6.849m6.849 6.849V21m0 0h7.5M12 21v-7.5M7.5 21H3m7.5 0h7.5M3 18V9a4.5 4.5 0 014.5-4.5h9A4.5 4.5 0 0121 9v9a4.5 4.5 0 01-4.5 4.5h-9A4.5 4.5 0 013 18z"
-          />
+          {/* Server Error Icon - Server with X */}
+          <rect x="2" y="3" width="20" height="7" rx="1" strokeWidth={1.5} />
+          <rect x="2" y="14" width="20" height="7" rx="1" strokeWidth={1.5} />
+          <circle cx="6" cy="6.5" r="1" fill="currentColor" />
+          <circle cx="6" cy="17.5" r="1" fill="currentColor" />
+          <path strokeLinecap="round" strokeWidth={1.5} d="M22 2L2 22" />
         </svg>
       );
     case '403':

package/src/layouts/AppLayout/AppLayout.tsx

@@ -47,7 +47,7 @@ import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig
 import { AnalyticsProvider } from '../../snippets/Analytics';
 import { PageProgress } from '../../components/core/PageProgress';
 import { UpdateNotifier } from '../../components/UpdateNotifier';
-import { Suspense } from '../../components/core';
+import { Suspense, ClientOnly } from '../../components/core';
 
 export type LayoutMode = 'public' | 'private' | 'admin';
 
@@ -148,22 +148,22 @@ export interface AppLayoutProps {
 
 /**
  * AppLayout Content - Renders layout with all providers
+ *
+ * SSR is only enabled for publicLayout.
+ * Private and admin layouts are wrapped in ClientOnly to avoid hydration mismatch.
  */
 function AppLayoutContent({
   children,
   publicLayout,
   privateLayout,
   adminLayout,
-  theme,
-  auth,
   analytics,
   centrifugo,
-  errorTracking,
   errorBoundary,
   updateNotifier,
 }: AppLayoutProps) {
   const pathname = usePathname();
-  
+
   const layoutMode = useMemo(
     () => determineLayoutMode(
       pathname,
@@ -173,46 +173,51 @@ function AppLayoutContent({
     ),
     [pathname, adminLayout, privateLayout, publicLayout]
   );
-  
+
   const enableErrorBoundary = errorBoundary?.enabled !== false;
-  
+
   // Render appropriate layout based on mode
   const renderLayout = () => {
     switch (layoutMode) {
       case 'admin':
         if (!adminLayout && privateLayout) {
-          // Fallback to private layout if no admin layout provided
           return (
-            <Suspense>
-              <privateLayout.component>{children}</privateLayout.component>
-            </Suspense>
+            <ClientOnly>
+              <Suspense>
+                <privateLayout.component>{children}</privateLayout.component>
+              </Suspense>
+            </ClientOnly>
           );
         }
         if (!adminLayout) {
           return children;
         }
         return (
-          <Suspense>
-            <adminLayout.component>{children}</adminLayout.component>
-          </Suspense>
+          <ClientOnly>
+            <Suspense>
+              <adminLayout.component>{children}</adminLayout.component>
+            </Suspense>
+          </ClientOnly>
         );
-        
+
       case 'private':
         if (!privateLayout) {
-          // Fallback to public if no private layout provided
           if (publicLayout) {
             return <publicLayout.component>{children}</publicLayout.component>;
           }
           return children;
         }
         return (
-          <Suspense>
-            <privateLayout.component>{children}</privateLayout.component>
-          </Suspense>
+          <ClientOnly>
+            <Suspense>
+              <privateLayout.component>{children}</privateLayout.component>
+            </Suspense>
+          </ClientOnly>
         );
-        
+
       case 'public':
       default:
+        // Public layout renders with SSR (no ClientOnly wrapper)
         if (!publicLayout) {
           return children;
         }

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -1,19 +1,20 @@
 /**
  * Private Layout
- * 
+ *
  * Layout for authenticated user pages (dashboard, profile, etc.)
  * Import and use directly with props - no complex configs needed!
- * 
+ *
  * Features:
  * - Responsive sidebar with mobile burger menu
  * - Keyboard shortcut (Ctrl/Cmd + B) to toggle sidebar
  * - Header with sidebar trigger and user menu
  * - Configurable content padding
- * 
+ * - NO SSR - renders only on client to avoid hydration mismatch
+ *
  * @example
  * ```tsx
  * import { PrivateLayout } from '@djangocfg/layouts';
- * 
+ *
  * <PrivateLayout
  *   sidebar={{
  *     items: [
@@ -28,7 +29,7 @@
  * >
  *   {children}
  * </PrivateLayout>
- * 
+ *
  * Note: User data (name, email, avatar) is automatically loaded from useAuth() context
  * Keyboard shortcut: Ctrl/Cmd + B to toggle sidebar
  * ```
@@ -37,7 +38,7 @@
 'use client';
 
 import React, { ReactNode } from 'react';
-import { SidebarProvider, SidebarInset, Preloader, Button, ButtonLink } from '@djangocfg/ui/components';
+import { SidebarProvider, SidebarInset, Preloader, ButtonLink } from '@djangocfg/ui/components';
 import { useAuth } from '../../auth';
 import { PrivateSidebar, PrivateHeader, PrivateContent } from './components';
 import type { LucideIcon as LucideIconType } from 'lucide-react';
@@ -76,20 +77,10 @@ export function PrivateLayout({
   header,
   contentPadding = 'default',
 }: PrivateLayoutProps) {
-  const { isAuthenticated, isLoading, user } = useAuth();
-
-  // Debug logging in development
-  if (process.env.NODE_ENV === 'development') {
-    console.log('[PrivateLayout] Render state:', {
-      isLoading,
-      isAuthenticated,
-      hasUser: !!user,
-      hasSidebar: !!sidebar,
-      hasHeader: !!header,
-    });
-  }
+  const { isAuthenticated, isLoading } = useAuth();
 
   // Show loading state while auth is being checked
+  // Note: SSR hydration is handled by ClientOnly wrapper in AppLayout
   if (isLoading) {
     return (
       <Preloader
@@ -104,9 +95,6 @@ export function PrivateLayout({
 
   // Don't render if user is not authenticated
   if (!isAuthenticated) {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn('[PrivateLayout] User not authenticated, returning null');
-    }
     return (
       <div className="flex flex-col items-center justify-center min-h-screen gap-4">
         <h3 className="text-2xl font-bold">

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -10,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@djangocfg/ui/components';
-import { useEventListener, useRouter } from '@djangocfg/ui/hooks';
+import { useEventListener, useCfgRouter } from '@djangocfg/ui/hooks';
 
 // Re-export events for backwards compatibility
 export const DIALOG_EVENTS = {
@@ -31,7 +31,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
 }) => {
   const [open, setOpen] = useState(false);
   const [message, setMessage] = useState<string>('Please sign in to continue');
-  const router = useRouter();
+  const router = useCfgRouter();
 
   // Listen for open auth dialog event
   useEventListener(DIALOG_EVENTS.OPEN_AUTH_DIALOG, (payload: any) => {

package/src/snippets/McpChat/components/AIChatWidget.tsx

@@ -66,20 +66,7 @@ export interface AIChatWidgetProps extends ChatWidgetConfig {
  * Internal AI chat widget that uses context
  */
 const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className }) => {
-  const {
-    messages,
-    isLoading,
-    isMinimized,
-    config,
-    displayMode,
-    isMobile,
-    sendMessage,
-    openChat,
-    closeChat,
-    toggleMinimize,
-    setDisplayMode,
-    stopStreaming,
-  } = useAIChatContext();
+  const { config, displayMode, openChat } = useAIChatContext();
 
   // Use layout hook for consistent positioning
   const { getFabStyles, getFloatingStyles } = useChatLayout();
@@ -173,17 +160,7 @@ const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className })
   if (displayMode === 'sidebar') {
     return (
       <Portal>
-        <ChatSidebar
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onModeChange={setDisplayMode}
-          onStopStreaming={stopStreaming}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatSidebar />
       </Portal>
     );
   }
@@ -192,20 +169,7 @@ const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className })
   return (
     <Portal>
       <div style={floatingStyles} className={className || ''}>
-        <ChatPanel
-          messages={messages}
-          isLoading={isLoading}
-          onSendMessage={sendMessage}
-          onClose={closeChat}
-          onMinimize={toggleMinimize}
-          onModeChange={setDisplayMode}
-          onStopStreaming={stopStreaming}
-          isMinimized={isMinimized}
-          isMobile={isMobile}
-          title={config.title}
-          placeholder={config.placeholder}
-          greeting={config.greeting}
-        />
+        <ChatPanel />
       </div>
     </Portal>
   );

package/src/snippets/McpChat/components/ChatMessages.tsx

@@ -93,8 +93,8 @@ export const ChatMessages = forwardRef<ChatMessagesHandle, ChatMessagesProps>(
     const padding = largeGreetingIcon ? 'py-12' : 'py-8';
 
     return (
-      <ScrollArea ref={scrollAreaRef} className="h-full">
-        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4`}>
+      <ScrollArea ref={scrollAreaRef} className="h-full w-full">
+        <div className={`${isCompact ? 'p-3' : 'p-4'} space-y-4 max-w-full overflow-x-hidden`}>
           {/* Greeting */}
           {messages.length === 0 && greeting && (
             <div className={`text-center ${padding}`}>