@djangocfg/layouts 2.1.36 → 2.1.38

package/src/layouts/AppLayout/BaseApp.tsx

@@ -6,6 +6,11 @@
  * - TooltipProvider (tooltip positioning)
  * - SWRConfig (data fetching)
  * - AuthProvider (authentication context)
+ * - AuthDialog (global auth prompt dialog)
+ * - AnalyticsProvider (Google Analytics, optional)
+ * - CentrifugoProvider (WebSocket real-time, optional)
+ * - PwaProvider (PWA installation, optional)
+ * - DjangoPushProvider (Django web push integration, optional)
  * - ErrorTrackingProvider (error handling)
  * - ErrorBoundary (React error boundary, enabled by default)
  * - MCP Chat Widget (optional, lazy loaded)
@@ -14,10 +19,17 @@
  * ```tsx
  * import { BaseApp } from '@djangocfg/layouts';
  *
- * // With MCP Chat enabled
+ * // With PWA Install and Push Notifications
  * <BaseApp
  *   theme={{ defaultTheme: 'system' }}
  *   auth={{ loginPath: '/auth/login' }}
+ *   analytics={{ googleTrackingId: 'G-XXXXXXXXXX' }}
+ *   pwaInstall={{ enabled: true, logo: '/logo192.png' }}
+ *   pushNotifications={{
+ *     enabled: true,
+ *     vapidPublicKey: process.env.NEXT_PUBLIC_VAPID_KEY,
+ *     requirePWA: true
+ *   }}
  *   mcpChat={{ enabled: true, autoDetectEnvironment: true }}
  * >
  *   {children}
@@ -35,12 +47,18 @@
 import { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 import { SWRConfig } from 'swr';
-import { ThemeProvider, Toaster, TooltipProvider } from '@djangocfg/ui-nextjs';
+import { ThemeProvider, SonnerToaster, TooltipProvider } from '@djangocfg/ui-nextjs';
 import { AuthProvider } from '@djangocfg/api/auth';
+import { CentrifugoProvider } from '@djangocfg/centrifugo';
+import { getCentrifugoAuthTokenRetrieve } from '@djangocfg/api';
 import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
 import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
 import { PageProgress } from '../../components/core/PageProgress';
-import type { BaseLayoutProps } from '../shared/types';
+import { AnalyticsProvider } from '../../snippets/Analytics';
+import { PwaProvider, A2HSHint } from '../../snippets/PWAInstall';
+import { DjangoPushProvider, PushPrompt } from '../../snippets/PushNotifications';
+import { AuthDialog } from '../../snippets/AuthDialog';
+import type { BaseLayoutProps } from '../types/layout.types';
 
 // Lazy load MCP Chat Widget with dynamic import
 const AIChatWidget = dynamic(
@@ -54,21 +72,38 @@ export type BaseAppProps = BaseLayoutProps;
 /**
  * BaseApp - Core providers wrapper for any React/Next.js app
  *
- * Includes: ThemeProvider, TooltipProvider, SWRConfig, AuthProvider, ErrorTrackingProvider, ErrorBoundary (optional), MCP Chat (optional)
+ * Includes: ThemeProvider, TooltipProvider, SWRConfig, AuthProvider, AnalyticsProvider,
+ * CentrifugoProvider, PwaProvider, PushProvider, ErrorTrackingProvider,
+ * ErrorBoundary (optional), MCP Chat (optional)
  * Also renders global Toaster and PageProgress components
  */
 export function BaseApp({
   children,
   theme,
   auth,
+  analytics,
+  centrifugo,
   errorTracking,
   errorBoundary,
   swr,
   mcpChat,
+  pwaInstall,
+  pushNotifications,
 }: BaseAppProps) {
   // ErrorBoundary is enabled by default
   const enableErrorBoundary = errorBoundary?.enabled !== false;
 
+  // Check if PWA Install is enabled
+  const pwaInstallEnabled = pwaInstall?.enabled !== false;
+  const showInstallHint = pwaInstallEnabled && pwaInstall?.showInstallHint !== false;
+
+  // Check if Push Notifications is enabled
+  const pushEnabled = pushNotifications?.enabled !== false && !!pushNotifications?.vapidPublicKey;
+
+  // Centrifugo configuration
+  const centrifugoUrl = centrifugo?.url || process.env.NEXT_PUBLIC_CENTRIFUGO_URL;
+  const centrifugoEnabled = centrifugo?.enabled !== false;
+
   const content = (
     <ThemeProvider
       defaultTheme={theme?.defaultTheme || 'system'}
@@ -83,31 +118,73 @@ export function BaseApp({
           }}
         >
           <AuthProvider config={auth}>
-            <ErrorTrackingProvider
-              validation={errorTracking?.validation}
-              cors={errorTracking?.cors}
-              network={errorTracking?.network}
-              onError={errorTracking?.onError}
-            >
-              {children}
-              <PageProgress />
-              <Toaster />
+            <AnalyticsProvider trackingId={analytics?.googleTrackingId}>
+              <CentrifugoProvider
+                enabled={centrifugoEnabled}
+                autoConnect={centrifugoEnabled && centrifugo?.autoConnect}
+                url={centrifugoUrl}
+                onTokenRefresh={async () => {
+                  const response = await getCentrifugoAuthTokenRetrieve();
+                  return response.token;
+                }}
+              >
+                <PwaProvider enabled={pwaInstallEnabled}>
+                  <DjangoPushProvider
+                    vapidPublicKey={pushNotifications?.vapidPublicKey || ''}
+                    autoSubscribe={pushNotifications?.autoSubscribe}
+                  >
+                    <ErrorTrackingProvider
+                      validation={errorTracking?.validation}
+                      cors={errorTracking?.cors}
+                      network={errorTracking?.network}
+                      onError={errorTracking?.onError}
+                    >
+                      {children}
+                      <PageProgress />
+                      <SonnerToaster />
+
+                      {/* PWA Install Hint */}
+                      {showInstallHint && (
+                        <A2HSHint
+                          resetAfterDays={pwaInstall?.resetAfterDays}
+                          delayMs={pwaInstall?.delayMs}
+                          logo={pwaInstall?.logo}
+                        />
+                      )}
+
+                      {/* Push Notifications Prompt */}
+                      {pushEnabled && (
+                        <PushPrompt
+                          vapidPublicKey={pushNotifications!.vapidPublicKey}
+                          subscribeEndpoint={pushNotifications?.subscribeEndpoint}
+                          requirePWA={pushNotifications?.requirePWA ?? true}
+                          delayMs={pushNotifications?.delayMs}
+                          resetAfterDays={pushNotifications?.resetAfterDays}
+                        />
+                      )}
+
+                      {/* MCP Chat Widget - lazy loaded */}
+                      {mcpChat?.enabled && (
+                        <AIChatWidget
+                          apiEndpoint={mcpChat.apiEndpoint}
+                          title={mcpChat.title}
+                          placeholder={mcpChat.placeholder}
+                          greeting={mcpChat.greeting}
+                          position={mcpChat.position}
+                          variant={mcpChat.variant}
+                          enableStreaming={mcpChat.enableStreaming}
+                          autoDetectEnvironment={mcpChat.autoDetectEnvironment}
+                          className={mcpChat.className}
+                        />
+                      )}
 
-              {/* MCP Chat Widget - lazy loaded */}
-              {mcpChat?.enabled && (
-                <AIChatWidget
-                  apiEndpoint={mcpChat.apiEndpoint}
-                  title={mcpChat.title}
-                  placeholder={mcpChat.placeholder}
-                  greeting={mcpChat.greeting}
-                  position={mcpChat.position}
-                  variant={mcpChat.variant}
-                  enableStreaming={mcpChat.enableStreaming}
-                  autoDetectEnvironment={mcpChat.autoDetectEnvironment}
-                  className={mcpChat.className}
-                />
-              )}
-            </ErrorTrackingProvider>
+                      {/* Auth Dialog - global auth prompt */}
+                      <AuthDialog authPath={auth?.routes?.auth} />
+                    </ErrorTrackingProvider>
+                  </DjangoPushProvider>
+                </PwaProvider>
+              </CentrifugoProvider>
+            </AnalyticsProvider>
           </AuthProvider>
         </SWRConfig>
       </TooltipProvider>

package/src/layouts/AuthLayout/AuthContext.tsx

@@ -16,18 +16,24 @@ export const AuthProvider: React.FC<AuthProps> = ({
   privacyUrl,
   enablePhoneAuth = false, // Default to false for backward compatibility
   enableGithubAuth = false, // Default to false for backward compatibility
+  redirectUrl, // URL to redirect after successful OTP auth
   onIdentifierSuccess,
   onOTPSuccess,
   onError,
 }) => {
   const sourceUrl = sourceUrlProp || (typeof window !== 'undefined' ? window.location.origin : '');
 
-  // Use the auth form hook with required sourceUrl
+  // Require terms acceptance only if terms or privacy URL is provided
+  const requireTermsAcceptance = Boolean(termsUrl || privacyUrl);
+
+  // Use the auth form hook with required sourceUrl and redirectUrl
   const authForm = useAuthForm({
     onIdentifierSuccess,
     onOTPSuccess,
     onError,
     sourceUrl,
+    redirectUrl,
+    requireTermsAcceptance,
   });
 
   const value: AuthContextType = {

package/src/layouts/AuthLayout/OAuthProviders.tsx

@@ -15,11 +15,10 @@ import { useAuthContext } from './AuthContext';
  * Handles the OAuth flow initiation.
  */
 export const OAuthProviders: React.FC = () => {
-  const { enableGithubAuth, sourceUrl, error: contextError, setError } = useAuthContext();
+  const { enableGithubAuth, sourceUrl, setError } = useAuthContext();
 
   const {
     isLoading: isGithubLoading,
-    error: githubError,
     startGithubAuth,
   } = useGithubAuth({
     sourceUrl,
@@ -33,8 +32,6 @@ export const OAuthProviders: React.FC = () => {
     return null;
   }
 
-  const error = githubError || contextError;
-
   return (
     <div className="space-y-4">
       {/* Divider */}
@@ -74,12 +71,6 @@ export const OAuthProviders: React.FC = () => {
         )}
       </div>
 
-      {/* Error Message */}
-      {error && (
-        <div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
-          {error}
-        </div>
-      )}
     </div>
   );
 };

package/src/layouts/AuthLayout/OTPForm.tsx

@@ -79,6 +79,7 @@ export const OTPForm: React.FC = () => {
                 onChange={setOtp}
                 disabled={isLoading}
                 autoFocus={true}
+                autoSubmit={true}
                 size="lg"
               />
             </div>

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -51,7 +51,7 @@ import { SidebarProvider, SidebarInset, Preloader, ButtonLink } from '@djangocfg
 import { useAuth } from '@djangocfg/api/auth';
 import { PrivateSidebar, PrivateHeader, PrivateContent } from './components';
 import type { LucideIcon as LucideIconType } from 'lucide-react';
-import { UserMenuConfig } from '../shared/types';
+import { UserMenuConfig } from '../types';
 
 export interface SidebarItem {
   label: string;

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -30,7 +30,7 @@
 
 import { ReactNode, useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import type { NavigationItem, UserMenuConfig } from '../shared/types';
+import type { NavigationItem, UserMenuConfig } from '../types';
 import {
   PublicNavigation,
   PublicMobileDrawer,

package/src/layouts/PublicLayout/components/PublicMobileDrawer.tsx

@@ -20,7 +20,7 @@ import {
 import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 import { useAuth } from '@djangocfg/api/auth';
 import { UserMenu } from '../../_components/UserMenu';
-import type { NavigationItem, UserMenuConfig } from '../../shared/types';
+import type { NavigationItem, UserMenuConfig } from '../../types';
 
 interface PublicMobileDrawerProps {
   isOpen: boolean;

package/src/layouts/PublicLayout/components/PublicNavigation.tsx

@@ -15,7 +15,7 @@ import { cn } from '@djangocfg/ui-nextjs/lib';
 import { useIsMobile } from '@djangocfg/ui-nextjs/hooks';
 import { useAuth } from '@djangocfg/api/auth';
 import { UserMenu } from '../../_components/UserMenu';
-import type { NavigationItem, UserMenuConfig } from '../../shared/types';
+import type { NavigationItem, UserMenuConfig } from '../../types';
 
 interface PublicNavigationProps {
   logo?: string;

package/src/layouts/_components/UserMenu.tsx

@@ -47,7 +47,7 @@ import {
   Button,
 } from '@djangocfg/ui-nextjs/components';
 import { useAuth } from '@djangocfg/api/auth';
-import type { UserMenuGroup } from '../shared/types';
+import type { UserMenuGroup } from '../types';
 
 export interface UserMenuProps {
   /** Display variant */

package/src/layouts/index.ts

@@ -6,7 +6,7 @@
  */
 
 // Shared types (universal type system)
-export * from './shared';
+export * from './types';
 
 // Smart layout router
 export * from './AppLayout';

package/src/layouts/types/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Shared Layout Types - Central Export
+ *
+ * This is the main entry point for all layout types.
+ * Types are organized by category and imported from their source modules.
+ */
+
+// ============================================================================
+// Provider Configuration Types
+// ============================================================================
+
+// Local provider configs
+export type { ThemeConfig, SWRConfigOptions, McpChatConfig, CentrifugoConfig } from './providers.types';
+
+// External provider configs (re-export for convenience)
+export type { AnalyticsConfig } from '../../snippets/Analytics/types';
+export type { PwaInstallConfig } from '../../snippets/PWAInstall/types';
+export type { PushNotificationsConfig } from '../../snippets/PushNotifications/types';
+export type {
+  ErrorBoundaryConfig,
+  ErrorTrackingConfig,
+  ValidationErrorConfig,
+  CORSErrorConfig,
+  NetworkErrorConfig,
+} from '../../components/errors/types';
+
+// ============================================================================
+// UI Component Types
+// ============================================================================
+
+export type {
+  NavigationItem,
+  NavigationSection,
+  FooterLink,
+  FooterMenuSection,
+  FooterSocialLinks,
+  FooterConfig,
+  UserMenuItem,
+  UserMenuGroup,
+  UserMenuConfig,
+} from './ui.types';
+
+// ============================================================================
+// Layout Types
+// ============================================================================
+
+export type { BaseLayoutProps } from './layout.types';

package/src/layouts/types/layout.types.ts

@@ -0,0 +1,61 @@
+/**
+ * Base Layout Types
+ *
+ * Core layout configuration that combines all provider configs
+ */
+
+import type { ReactNode } from 'react';
+import type { AuthConfig } from '@djangocfg/api/auth';
+
+// Import provider configs from their modules
+import type { AnalyticsConfig } from '../../snippets/Analytics/types';
+import type { PwaInstallConfig } from '../../snippets/PWAInstall/types';
+import type { PushNotificationsConfig } from '../../snippets/PushNotifications/types';
+import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/errors/types';
+
+// Import local provider configs
+import type { ThemeConfig, SWRConfigOptions, McpChatConfig, CentrifugoConfig } from './providers.types';
+
+// ============================================================================
+// Base Layout Props
+// ============================================================================
+
+/**
+ * Base Layout Props
+ *
+ * Core configuration for BaseApp component.
+ * All provider configs are imported from their respective modules.
+ */
+export interface BaseLayoutProps {
+  children: ReactNode;
+
+  /** Theme configuration */
+  theme?: ThemeConfig;
+
+  /** Auth configuration */
+  auth?: AuthConfig;
+
+  /** Analytics configuration (from snippets/Analytics) */
+  analytics?: AnalyticsConfig;
+
+  /** Centrifugo configuration */
+  centrifugo?: CentrifugoConfig;
+
+  /** Error tracking configuration (from components/errors) */
+  errorTracking?: ErrorTrackingConfig;
+
+  /** SWR configuration */
+  swr?: SWRConfigOptions;
+
+  /** Error boundary configuration (from components/errors, enabled by default) */
+  errorBoundary?: ErrorBoundaryConfig;
+
+  /** MCP chat configuration */
+  mcpChat?: McpChatConfig;
+
+  /** PWA Install configuration (from snippets/PWAInstall) */
+  pwaInstall?: PwaInstallConfig;
+
+  /** Push Notifications configuration (from snippets/PushNotifications) */
+  pushNotifications?: PushNotificationsConfig;
+}

package/src/layouts/types/providers.types.ts

@@ -0,0 +1,65 @@
+/**
+ * Provider Configuration Types
+ *
+ * Configuration types for layout providers (theme, SWR, MCP chat, Centrifugo)
+ * Note: Analytics, PWA, Push, and Error types are defined in their respective modules
+ */
+
+// ============================================================================
+// Theme Configuration
+// ============================================================================
+
+export interface ThemeConfig {
+  defaultTheme?: 'light' | 'dark' | 'system';
+  storageKey?: string;
+}
+
+// ============================================================================
+// SWR Configuration
+// ============================================================================
+
+export interface SWRConfigOptions {
+  revalidateOnFocus?: boolean;
+  revalidateOnReconnect?: boolean;
+  dedupingInterval?: number;
+}
+
+// ============================================================================
+// MCP Chat Configuration
+// ============================================================================
+
+export interface McpChatConfig {
+  /** Enable MCP chat widget */
+  enabled?: boolean;
+  /** API endpoint for chat */
+  apiEndpoint?: string;
+  /** Chat widget title */
+  title?: string;
+  /** Input placeholder */
+  placeholder?: string;
+  /** Greeting message */
+  greeting?: string;
+  /** Widget position */
+  position?: 'bottom-right' | 'bottom-left';
+  /** Widget variant */
+  variant?: 'default' | 'minimal';
+  /** Enable streaming responses */
+  enableStreaming?: boolean;
+  /** Auto-detect environment (dev/prod) */
+  autoDetectEnvironment?: boolean;
+  /** Custom class name */
+  className?: string;
+}
+
+// ============================================================================
+// Centrifugo Configuration
+// ============================================================================
+
+export interface CentrifugoConfig {
+  /** Enable Centrifugo (default: true) */
+  enabled?: boolean;
+  /** Auto-connect on mount (default: false) */
+  autoConnect?: boolean;
+  /** Centrifugo server URL */
+  url?: string;
+}

package/src/layouts/types/ui.types.ts

@@ -0,0 +1,103 @@
+/**
+ * UI Component Types
+ *
+ * Types for layout UI components (navigation, footer, user menu)
+ */
+
+import type { LucideIcon } from 'lucide-react';
+
+// ============================================================================
+// Navigation Types
+// ============================================================================
+
+export interface NavigationItem {
+  label: string;
+  href: string;
+  icon?: LucideIcon | string;
+  badge?: string | number;
+  external?: boolean;
+}
+
+export interface NavigationSection {
+  title?: string;
+  items: NavigationItem[];
+}
+
+// ============================================================================
+// Footer Types
+// ============================================================================
+
+export interface FooterLink {
+  label: string;
+  path: string;
+  external?: boolean;
+}
+
+export interface FooterMenuSection {
+  title: string;
+  items: FooterLink[];
+}
+
+export interface FooterSocialLinks {
+  github?: string;
+  linkedin?: string;
+  twitter?: string;
+  telegram?: string;
+  youtube?: string;
+  facebook?: string;
+  instagram?: string;
+  whatsapp?: string;
+  email?: string;
+}
+
+export interface FooterConfig {
+  siteName?: string;
+  description?: string;
+  logo?: string;
+  badge?: {
+    icon: LucideIcon;
+    text: string;
+  };
+  socialLinks?: FooterSocialLinks;
+  links?: FooterLink[];
+  menuSections?: FooterMenuSection[];
+  copyright?: string;
+  credits?: {
+    text: string;
+    url?: string;
+  };
+  variant?: 'full' | 'simple';
+}
+
+// ============================================================================
+// User Menu Types
+// ============================================================================
+
+export interface UserMenuItem {
+  /** Menu item label */
+  label: string;
+  /** Link href (optional if onClick is provided) */
+  href?: string;
+  /** Icon component */
+  icon?: LucideIcon;
+  /** Visual variant */
+  variant?: 'default' | 'destructive';
+  /** Click handler (optional if href is provided) */
+  onClick?: () => void;
+  /** Open link in new tab */
+  external?: boolean;
+}
+
+export interface UserMenuGroup {
+  /** Optional group title (renders DropdownMenuLabel) */
+  title?: string;
+  /** Menu items in this group */
+  items: UserMenuItem[];
+}
+
+export interface UserMenuConfig {
+  /** Menu groups for authenticated users */
+  groups?: UserMenuGroup[];
+  /** Auth page path (for sign in button) */
+  authPath?: string;
+}

package/src/snippets/Analytics/index.ts

@@ -8,3 +8,4 @@ export { useAnalytics, Analytics } from './useAnalytics';
 export { AnalyticsProvider } from './AnalyticsProvider';
 export { AnalyticsEvent, AnalyticsCategory } from './events';
 export type { AnalyticsEventType, AnalyticsCategoryType } from './events';
+export type { AnalyticsConfig } from './types';

package/src/snippets/Analytics/types.ts

@@ -0,0 +1,10 @@
+/**
+ * Analytics Configuration Types
+ *
+ * Configuration for Google Analytics integration
+ */
+
+export interface AnalyticsConfig {
+  /** Google Analytics tracking ID (e.g., 'G-XXXXXXXXXX') */
+  googleTrackingId?: string;
+}

package/src/snippets/McpChat/context/ChatContext.tsx

@@ -98,6 +98,7 @@ export function ChatProvider({
   const [error, setError] = useState<Error | null>(null);
   const [isMinimized, setIsMinimized] = useState(false);
   const isHydratedRef = useRef(false);
+  const mobileResetRef = useRef(false);
 
   // Display mode with localStorage persistence
   const [storedMode, setStoredMode] = useLocalStorage<ChatDisplayMode>(storageKeys.mode, 'closed');
@@ -110,6 +111,14 @@ export function ChatProvider({
 
   const isMobile = useIsMobile();
 
+  // On mobile, always start closed on page load (don't restore state)
+  useEffect(() => {
+    if (isMobile && !mobileResetRef.current && storedMode !== 'closed') {
+      mobileResetRef.current = true;
+      setStoredMode('closed');
+    }
+  }, [isMobile, storedMode, setStoredMode]);
+
   // Generate user ID if not exists
   useEffect(() => {
     if (!userId) {