@djangocfg/layouts 2.1.20 → 2.1.21

package/src/layouts/shared/README.md

@@ -0,0 +1,86 @@
+# Shared Layout Types
+
+Universal type system for all layouts to avoid duplication and ensure consistency.
+
+## Overview
+
+This module provides shared TypeScript types used across all layout components in the `@djangocfg/layouts` package.
+
+## Available Types
+
+### Core Configuration Types
+
+- **`ThemeConfig`** - Theme settings (light/dark/system)
+- **`AuthConfig`** - Authentication configuration
+- **`ErrorTrackingConfig`** - Error tracking settings
+- **`ErrorBoundaryConfig`** - Error boundary options
+- **`SWRConfigOptions`** - SWR data fetching configuration
+- **`McpChatConfig`** - MCP AI chat widget settings
+
+### Layout Component Types
+
+- **`BaseLayoutProps`** - Base props for all layouts (includes all configs above)
+- **`NavigationItem`** - Single navigation item
+- **`NavigationSection`** - Group of navigation items
+- **`FooterLink`** - Footer link
+- **`FooterMenuSection`** - Footer menu section
+- **`FooterSocialLinks`** - Social media links
+- **`FooterConfig`** - Complete footer configuration
+
+## Usage
+
+### Import Types
+
+```typescript
+import type {
+  BaseLayoutProps,
+  McpChatConfig,
+  ThemeConfig,
+  FooterConfig,
+} from '@djangocfg/layouts';
+```
+
+### Extend Layout Props
+
+```typescript
+import type { BaseLayoutProps } from '@djangocfg/layouts';
+
+interface MyCustomLayoutProps extends BaseLayoutProps {
+  customProp?: string;
+}
+```
+
+### MCP Chat Configuration
+
+```typescript
+import { AppLayout } from '@djangocfg/layouts';
+
+<AppLayout
+  mcpChat={{
+    enabled: true,
+    autoDetectEnvironment: true,
+    title: 'My AI Assistant',
+    position: 'bottom-right',
+    enableStreaming: true,
+  }}
+>
+  {children}
+</AppLayout>
+```
+
+## Benefits
+
+1. **No Duplication** - Define types once, use everywhere
+2. **Type Safety** - Full TypeScript support across all layouts
+3. **Consistency** - All layouts use the same prop names and shapes
+4. **Easy Maintenance** - Update types in one place
+5. **Better DX** - IntelliSense shows all available options
+
+## File Structure
+
+```
+shared/
+├── types.ts        # All type definitions
+├── index.ts        # Type exports
+└── README.md       # This file
+```

package/src/layouts/shared/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Shared Layouts Exports
+ */
+
+export type {
+  ThemeConfig,
+  LayoutErrorTrackingConfig,
+  ErrorBoundaryConfig,
+  SWRConfigOptions,
+  McpChatConfig,
+  BaseLayoutProps,
+  NavigationItem,
+  NavigationSection,
+  FooterLink,
+  FooterMenuSection,
+  FooterSocialLinks,
+  FooterConfig,
+  UserMenuItem,
+  UserMenuGroup,
+  UserMenuConfig,
+} from './types';

package/src/layouts/shared/types.ts

@@ -0,0 +1,215 @@
+/**
+ * Shared Types for All Layouts
+ *
+ * Universal type system to avoid duplication across layouts
+ */
+
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import type { AuthConfig } from '@djangocfg/api/auth';
+
+// ============================================================================
+// Theme Configuration
+// ============================================================================
+
+export interface ThemeConfig {
+  defaultTheme?: 'light' | 'dark' | 'system';
+  storageKey?: string;
+}
+
+// ============================================================================
+// Error Tracking Configuration
+// ============================================================================
+
+/**
+ * Error tracking configuration for layouts
+ * Note: Import detailed types from @djangocfg/layouts/components if needed
+ */
+export interface LayoutErrorTrackingConfig {
+  validation?: {
+    enabled?: boolean;
+    showToast?: boolean;
+  };
+  cors?: {
+    enabled?: boolean;
+    showToast?: boolean;
+  };
+  network?: {
+    enabled?: boolean;
+    showToast?: boolean;
+  };
+  onError?: (error: any) => boolean | void;
+}
+
+// ============================================================================
+// Error Boundary Configuration
+// ============================================================================
+
+export interface ErrorBoundaryConfig {
+  enabled?: boolean;
+  supportEmail?: string;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+// ============================================================================
+// 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;
+}
+
+// ============================================================================
+// Base Layout Props
+// ============================================================================
+
+export interface BaseLayoutProps {
+  children: ReactNode;
+
+  /** Theme configuration */
+  theme?: ThemeConfig;
+
+  /** Auth configuration */
+  auth?: AuthConfig;
+
+  /** Error tracking configuration */
+  errorTracking?: LayoutErrorTrackingConfig;
+
+  /** SWR configuration */
+  swr?: SWRConfigOptions;
+
+  /** Error boundary configuration (enabled by default) */
+  errorBoundary?: ErrorBoundaryConfig;
+
+  /** MCP chat configuration */
+  mcpChat?: McpChatConfig;
+}
+
+// ============================================================================
+// 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[];
+  /** Profile page path (used when no groups provided - backward compatibility) */
+  profilePath?: string;
+  /** Dashboard page path (used when no groups provided - backward compatibility) */
+  dashboardPath?: string;
+  /** Auth page path (for sign in button) */
+  authPath?: string;
+}

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

@@ -9,48 +9,109 @@ import { useAIChatContext, useAIChatContextOptional, AIChatProvider } from '../c
 import { useChatLayout } from '../hooks/useChatLayout';
 import { getMcpEndpoints, type ChatWidgetConfig } from '../types';
 
-// CSS for mysterious rotating border animation with multi-color ethereal effects
+// CSS for game-quality multi-layer animated border with smooth color flow
 const fabAnimationStyles = `
 @keyframes rotate-gradient {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+@keyframes rotate-gradient-reverse {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+
 @keyframes color-shift-glow {
   0%, 100% {
     box-shadow:
-      0 0 15px rgba(251, 191, 36, 0.4),
-      0 0 30px rgba(168, 85, 247, 0.2),
-      0 0 45px rgba(20, 184, 166, 0.1);
+      0 0 20px rgba(251, 191, 36, 0.5),
+      0 0 40px rgba(168, 85, 247, 0.3),
+      0 0 60px rgba(20, 184, 166, 0.2);
   }
-  25% {
+  33% {
     box-shadow:
-      0 0 18px rgba(168, 85, 247, 0.4),
-      0 0 35px rgba(20, 184, 166, 0.25),
-      0 0 50px rgba(251, 191, 36, 0.1);
+      0 0 20px rgba(168, 85, 247, 0.5),
+      0 0 40px rgba(20, 184, 166, 0.3),
+      0 0 60px rgba(251, 191, 36, 0.2);
   }
-  50% {
+  66% {
     box-shadow:
-      0 0 20px rgba(20, 184, 166, 0.4),
-      0 0 40px rgba(251, 191, 36, 0.2),
-      0 0 55px rgba(168, 85, 247, 0.15);
-  }
-  75% {
-    box-shadow:
-      0 0 17px rgba(236, 72, 153, 0.35),
-      0 0 32px rgba(168, 85, 247, 0.25),
-      0 0 48px rgba(20, 184, 166, 0.1);
+      0 0 20px rgba(20, 184, 166, 0.5),
+      0 0 40px rgba(236, 72, 153, 0.3),
+      0 0 60px rgba(168, 85, 247, 0.2);
   }
 }
+
 @keyframes icon-pulse {
   0%, 100% {
     opacity: 1;
     transform: scale(1);
-    filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.5));
+    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
   }
   50% {
     opacity: 0.85;
-    transform: scale(0.95);
-    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8));
+    transform: scale(1.15);
+    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 1));
+  }
+}
+
+@keyframes border-pulse {
+  0%, 100% {
+    opacity: 1;
+    filter: blur(0px);
+  }
+  50% {
+    opacity: 0.85;
+    filter: blur(0.5px);
+  }
+}
+
+@keyframes inner-glow-pulse {
+  0%, 100% {
+    box-shadow:
+      inset 0 0 15px rgba(251, 191, 36, 0.3),
+      inset 0 0 25px rgba(168, 85, 247, 0.2);
+  }
+  50% {
+    box-shadow:
+      inset 0 0 20px rgba(168, 85, 247, 0.35),
+      inset 0 0 30px rgba(20, 184, 166, 0.25);
+  }
+}
+
+@keyframes fab-entrance {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.08);
+  }
+  70% {
+    transform: scale(0.98);
+  }
+  85% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fab-glow-entrance {
+  0% {
+    box-shadow: 0 0 0 rgba(251, 191, 36, 0);
+  }
+  40% {
+    box-shadow:
+      0 0 25px rgba(251, 191, 36, 0.6),
+      0 0 50px rgba(168, 85, 247, 0.4),
+      0 0 75px rgba(20, 184, 166, 0.25);
+  }
+  100% {
+    box-shadow:
+      0 0 20px rgba(251, 191, 36, 0.5),
+      0 0 40px rgba(168, 85, 247, 0.3),
+      0 0 60px rgba(20, 184, 166, 0.2);
   }
 }
 `;
@@ -75,67 +136,103 @@ const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className })
   const fabStyles = getFabStyles(position);
   const floatingStyles = getFloatingStyles(position);
 
-  // Mode: closed - just show FAB with multi-color rotating border animation
+  // Mode: closed - just show FAB with game-quality multi-layer animated border
   if (displayMode === 'closed') {
     return (
       <Portal>
         <style>{fabAnimationStyles}</style>
         <div style={fabStyles} className={className || ''}>
-          {/* Outer glow container with color-shifting animation */}
+          {/* Outer glow container with entrance and color-shifting animations */}
           <div
             className="relative rounded-full"
             style={{
-              width: '64px',
-              height: '64px',
-              animation: 'color-shift-glow 6s ease-in-out infinite',
+              width: '68px',
+              height: '68px',
+              overflow: 'hidden',
+              animation: 'fab-entrance 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 0s 1 normal forwards, fab-glow-entrance 0.8s ease-out 0s 1 normal forwards, color-shift-glow 8s ease-in-out 0.6s infinite',
             }}
           >
-            {/* Border container - clips the rotating gradient */}
+            {/* Border container - multiple layers for depth */}
             <div
-              className="absolute rounded-full group"
+              className="absolute rounded-full"
               style={{
                 inset: '0',
                 overflow: 'hidden',
               }}
             >
-              {/* Rotating conic gradient - multi-color organic glow */}
+              {/* Layer 1: Base smooth gradient with more color stops */}
               <div
-                className="absolute"
+                className="absolute rounded-full"
                 style={{
-                  width: '200%',
-                  height: '200%',
-                  top: '-50%',
-                  left: '-50%',
+                  inset: '0',
                   background: `conic-gradient(
                     from 0deg,
-                    #fbbf24 0%,
-                    transparent 8%,
-                    #a855f7 18%,
-                    transparent 28%,
-                    #14b8a6 38%,
-                    transparent 52%,
-                    #ec4899 62%,
-                    transparent 75%,
-                    #fbbf24 88%,
-                    transparent 95%,
-                    #a855f7 100%
+                    rgba(251, 191, 36, 1) 0%,
+                    rgba(251, 191, 36, 0.7) 8%,
+                    rgba(251, 191, 36, 0) 15%,
+                    rgba(168, 85, 247, 0) 20%,
+                    rgba(168, 85, 247, 0.7) 28%,
+                    rgba(168, 85, 247, 1) 35%,
+                    rgba(168, 85, 247, 0.7) 42%,
+                    rgba(168, 85, 247, 0) 50%,
+                    rgba(20, 184, 166, 0) 55%,
+                    rgba(20, 184, 166, 0.7) 63%,
+                    rgba(20, 184, 166, 1) 70%,
+                    rgba(20, 184, 166, 0.7) 77%,
+                    rgba(20, 184, 166, 0) 85%,
+                    rgba(236, 72, 153, 0) 88%,
+                    rgba(236, 72, 153, 0.7) 93%,
+                    rgba(236, 72, 153, 1) 97%,
+                    rgba(251, 191, 36, 1) 100%
+                  )`,
+                  animation: 'rotate-gradient 7s linear infinite, border-pulse 4s ease-in-out infinite',
+                  filter: 'blur(1px)',
+                  opacity: 0.95,
+                }}
+              />
+
+              {/* Layer 2: Secondary gradient (counter-clockwise) - stronger */}
+              <div
+                className="absolute rounded-full"
+                style={{
+                  inset: '1px',
+                  background: `conic-gradient(
+                    from 180deg,
+                    rgba(168, 85, 247, 0.85) 0%,
+                    rgba(168, 85, 247, 0.5) 10%,
+                    rgba(168, 85, 247, 0) 20%,
+                    rgba(20, 184, 166, 0) 30%,
+                    rgba(20, 184, 166, 0.5) 40%,
+                    rgba(20, 184, 166, 0.85) 50%,
+                    rgba(20, 184, 166, 0.5) 60%,
+                    rgba(20, 184, 166, 0) 70%,
+                    rgba(251, 191, 36, 0) 75%,
+                    rgba(251, 191, 36, 0.5) 85%,
+                    rgba(251, 191, 36, 0.85) 95%,
+                    rgba(168, 85, 247, 0.85) 100%
                   )`,
-                  animation: 'rotate-gradient 5s linear infinite',
-                  opacity: 0.9,
+                  animation: 'rotate-gradient-reverse 9s linear infinite',
+                  filter: 'blur(0.75px)',
+                  opacity: 0.75,
                 }}
               />
-              {/* Inner mask - creates the thin organic border */}
+
+              {/* Inner mask with glowing edge */}
               <div
                 className="absolute rounded-full bg-background"
-                style={{ inset: '1.5px' }}
+                style={{
+                  inset: '4px',
+                  animation: 'inner-glow-pulse 5s ease-in-out infinite',
+                }}
               />
+
               {/* Main FAB button */}
               <Button
                 onClick={openChat}
                 variant="ghost"
-                className="absolute rounded-full hover:scale-105 transition-all duration-300 bg-background hover:bg-background/95 border-0"
+                className="absolute rounded-full hover:scale-105 transition-all duration-300 bg-background/80 hover:bg-background/95 border-0 backdrop-blur-sm"
                 style={{
-                  inset: '1.5px',
+                  inset: '2.5px',
                   width: 'auto',
                   height: 'auto',
                 }}
@@ -143,7 +240,7 @@ const AIChatWidgetInternal = React.memo<{ className?: string }>(({ className })
                 <Zap
                   className="h-6 w-6"
                   style={{
-                    animation: 'icon-pulse 2s ease-in-out infinite',
+                    animation: 'icon-pulse 2.5s ease-in-out infinite',
                     color: '#fbbf24',
                     fill: '#fbbf24',
                   }}
@@ -225,7 +322,7 @@ AIChatWidgetInternal.displayName = 'AIChatWidgetInternal';
  */
 export const AIChatWidget: React.FC<AIChatWidgetProps> = ({
   apiEndpoint,
-  title = 'DjangoCFG AI Assistant',
+  title = 'DjangoCFG AI',
   placeholder = 'Ask about DjangoCFG...',
   greeting = "Hi! I'm your DjangoCFG AI assistant powered by GPT. Ask me anything about configuration, features, or how to use the library.",
   position = 'bottom-right',

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

@@ -54,12 +54,13 @@ export function AskAIButton({
   className,
   ...buttonProps
 }: AskAIButtonProps) {
-  const { sendToChat, isChatAvailable } = useMcpChat();
+  const { sendToChat } = useMcpChat();
 
   const handleClick = () => {
     const detail: McpChatEventDetail = {
       message,
       autoSend,
+      // No displayMode - chat will use remembered mode automatically
     };
 
     if (contextData || source) {
@@ -73,16 +74,12 @@ export function AskAIButton({
     onSent?.();
   };
 
-  const isAvailable = isChatAvailable();
-
   return (
     <Button
       onClick={handleClick}
       variant={variant}
       size={size}
       className={className}
-      disabled={!isAvailable}
-      title={!isAvailable ? 'AI Chat not available' : undefined}
       {...buttonProps}
     >
       {showIcon && <Bot className="h-4 w-4 mr-2" />}