@djangocfg/layouts 1.0.6 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.0.6",
-    "@djangocfg/og-image": "^1.0.6",
-    "@djangocfg/ui": "^1.0.6",
+    "@djangocfg/api": "^1.1.0",
+    "@djangocfg/og-image": "^1.1.0",
+    "@djangocfg/ui": "^1.1.0",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.0.6",
+    "@djangocfg/typescript-config": "^1.1.0",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -21,7 +21,7 @@ import React, { ReactNode, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { AppContextProvider } from './context';
 import { CoreProviders } from './providers';
-import { Seo, PageProgress } from './components';
+import { Seo, PageProgress, ErrorBoundary } from './components';
 import { PublicLayout } from './layouts/PublicLayout';
 import { PrivateLayout } from './layouts/PrivateLayout';
 import { AuthLayout } from './layouts/AuthLayout';
@@ -32,6 +32,25 @@ import type { AppLayoutConfig } from './types';
 export interface AppLayoutProps {
   children: ReactNode;
   config: AppLayoutConfig;
+  /**
+   * Disable layout rendering (Navigation, Sidebar, Footer)
+   * Only providers and SEO remain active
+   * Useful for custom layouts like landing pages
+   */
+  disableLayout?: boolean;
+  /**
+   * Force a specific layout regardless of route
+   * Overrides automatic layout detection
+   * @example forceLayout="public" - always use PublicLayout
+   */
+  forceLayout?: 'public' | 'private' | 'auth';
+  /**
+   * Font family to apply globally
+   * Accepts Next.js font object or CSS font-family string
+   * @example fontFamily={manrope.style.fontFamily}
+   * @example fontFamily="Inter, sans-serif"
+   */
+  fontFamily?: string;
 }
 
 /**
@@ -40,7 +59,17 @@ export interface AppLayoutProps {
  * Determines which layout to use based on route
  * Uses AppContext - no props passed down!
  */
-function LayoutRouter({ children }: { children: ReactNode }) {
+function LayoutRouter({
+  children,
+  disableLayout,
+  forceLayout,
+  config
+}: {
+  children: ReactNode;
+  disableLayout?: boolean;
+  forceLayout?: 'public' | 'private' | 'auth';
+  config: AppLayoutConfig;
+}) {
   const router = useRouter();
   const { isAuthenticated, isLoading } = useAuth();
   const [isMounted, setIsMounted] = useState(false);
@@ -50,8 +79,16 @@ function LayoutRouter({ children }: { children: ReactNode }) {
     setIsMounted(true);
   }, []);
 
+  // If layout is disabled, render children directly (providers still active!)
+  if (disableLayout) {
+    return <>{children}</>;
+  }
+
   // Determine layout mode based on route (synchronous - works with SSR)
   const getLayoutMode = (): 'public' | 'private' | 'auth' => {
+    // If forceLayout is specified, use it
+    if (forceLayout) return forceLayout;
+
     if (router.pathname.startsWith('/auth')) return 'auth';
     if (router.pathname.startsWith('/private')) return 'private';
     return 'public';
@@ -65,9 +102,20 @@ function LayoutRouter({ children }: { children: ReactNode }) {
     case 'public':
       return <PublicLayout>{children}</PublicLayout>;
 
-    // Auth routes: render immediately (SSR enabled)
+    // Auth routes: render inside PublicLayout with Navigation/Footer
     case 'auth':
-      return <AuthLayout>{children}</AuthLayout>;
+      return (
+        <PublicLayout>
+          <AuthLayout
+            termsUrl={config.auth?.termsUrl}
+            privacyUrl={config.auth?.privacyUrl}
+            supportUrl={config.auth?.supportUrl}
+            enablePhoneAuth={config.auth?.enablePhoneAuth}
+          >
+            {children}
+          </AuthLayout>
+        </PublicLayout>
+      );
 
     // Private routes: wait for client-side hydration and auth check
     case 'private':
@@ -87,31 +135,81 @@ function LayoutRouter({ children }: { children: ReactNode }) {
  *
  * Single entry point for all layout logic
  * Wrap your app once in _app.tsx
+ *
+ * @example
+ * ```tsx
+ * // With layout (default - auto-detect)
+ * <AppLayout config={appLayoutConfig}>
+ *   <Component {...pageProps} />
+ * </AppLayout>
+ *
+ * // With custom font
+ * <AppLayout config={appLayoutConfig} fontFamily={manrope.style.fontFamily}>
+ *   <Component {...pageProps} />
+ * </AppLayout>
+ *
+ * // Without layout (providers still active)
+ * <AppLayout config={appLayoutConfig} disableLayout>
+ *   <CustomLandingPage />
+ * </AppLayout>
+ *
+ * // Force public layout for all pages
+ * <AppLayout config={appLayoutConfig} forceLayout="public">
+ *   <Component {...pageProps} />
+ * </AppLayout>
+ * ```
  */
-export function AppLayout({ children, config }: AppLayoutProps) {
-  return (
-    <CoreProviders config={config}>
-      <AppContextProvider config={config}>
-        {/* SEO Meta Tags */}
-        <Seo
-          pageConfig={{
-            title: config.app.name,
-            description: config.app.description,
-            ogImage: {
+export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily }: AppLayoutProps) {
+  // Check if ErrorBoundary is enabled (default: true)
+  const enableErrorBoundary = config.errors?.enableErrorBoundary !== false;
+  const supportEmail = config.errors?.supportEmail;
+  const onError = config.errors?.onError;
+
+  const content = (
+    <>
+      {/* Global Font Styles */}
+      {fontFamily && (
+        <style dangerouslySetInnerHTML={{
+          __html: `html { font-family: ${fontFamily}; }`
+        }} />
+      )}
+
+      <CoreProviders config={config}>
+        <AppContextProvider config={config}>
+          {/* SEO Meta Tags */}
+          <Seo
+            pageConfig={{
               title: config.app.name,
-              subtitle: config.app.description,
-            },
-          }}
-          icons={config.app.icons}
-          siteUrl={config.app.siteUrl}
-        />
-
-        {/* Loading Progress Bar */}
-        <PageProgress />
-
-        {/* Smart Layout Router */}
-        <LayoutRouter>{children}</LayoutRouter>
-      </AppContextProvider>
-    </CoreProviders>
+              description: config.app.description,
+              ogImage: {
+                title: config.app.name,
+                subtitle: config.app.description,
+              },
+            }}
+            icons={config.app.icons}
+            siteUrl={config.app.siteUrl}
+          />
+
+          {/* Loading Progress Bar */}
+          <PageProgress />
+
+          {/* Smart Layout Router */}
+          <LayoutRouter disableLayout={disableLayout} forceLayout={forceLayout} config={config}>
+            {children}
+          </LayoutRouter>
+        </AppContextProvider>
+      </CoreProviders>
+    </>
   );
+
+  // Wrap with ErrorBoundary if enabled
+  if (enableErrorBoundary) {
+    return (
+      <ErrorBoundary supportEmail={supportEmail} onError={onError}>
+        {content}
+      </ErrorBoundary>
+    );
+  }
+
+  return content;
 }

package/src/layouts/AppLayout/components/ErrorBoundary.tsx

@@ -0,0 +1,99 @@
+/**
+ * ErrorBoundary - Automatic Error Handling
+ *
+ * Built-in React Error Boundary for AppLayout
+ * Catches all runtime errors and displays ErrorLayout
+ * No manual setup required - works automatically!
+ */
+
+'use client';
+
+import React, { Component, ReactNode } from 'react';
+import { ErrorLayout } from '../../ErrorLayout';
+import { Bug } from 'lucide-react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  /** Callback when error occurs */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  /** Custom fallback UI */
+  fallback?: (error: Error, reset: () => void) => ReactNode;
+  /** Support email for error pages */
+  supportEmail?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: React.ErrorInfo;
+}
+
+/**
+ * ErrorBoundary Component
+ *
+ * Automatically wraps all AppLayout children
+ * Catches React errors and shows ErrorLayout
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Log error
+    console.error('ErrorBoundary caught error:', error);
+    console.error('Error info:', errorInfo);
+
+    // Call optional callback
+    this.props.onError?.(error, errorInfo);
+
+    // Store error info in state
+    this.setState({ errorInfo });
+  }
+
+  resetError = () => {
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      // Use custom fallback if provided
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error, this.resetError);
+      }
+
+      // Default error UI using ErrorLayout
+      return (
+        <ErrorLayout
+          title="Application Error"
+          description="Something went wrong while rendering the page. Try refreshing or going back."
+          illustration={<Bug className="w-24 h-24 text-destructive/50" strokeWidth={1.5} />}
+          supportEmail={this.props.supportEmail}
+          actions={
+            <div className="flex gap-4">
+              <button
+                onClick={() => window.location.reload()}
+                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium"
+              >
+                Refresh Page
+              </button>
+              <button
+                onClick={() => window.history.back()}
+                className="px-6 py-3 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors font-medium"
+              >
+                Go Back
+              </button>
+            </div>
+          }
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/layouts/AppLayout/components/PageProgress.tsx

@@ -5,8 +5,13 @@ const PageProgress = () => {
     const router = useRouter();
     const [loading, setLoading] = useState(false);
     const [progress, setProgress] = useState(0);
+    const [mounted, setMounted] = useState(false);
     const progressTimer = useRef<NodeJS.Timeout | null>(null);
 
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
     // Simulate realistic progress
     const startFakeProgress = () => {
         // Clear any existing timer
@@ -43,12 +48,14 @@ const PageProgress = () => {
             progressTimer.current = null;
         }
 
-        // Jump to 100% and then hide after animation duration
+        // Jump to 100% and then hide after showing completion
         setProgress(100);
         setTimeout(() => {
             setLoading(false);
-            setProgress(0);
-        }, 300);
+            setTimeout(() => {
+                setProgress(0);
+            }, 300); // Wait for fade out animation
+        }, 500); // Show 100% for half a second
     };
 
     useEffect(() => {
@@ -81,22 +88,32 @@ const PageProgress = () => {
         };
     }, [router.events]);
 
-    if (!loading && progress === 0) {
+    if (!mounted) {
         return null;
     }
 
     return (
         <div
-            className={`fixed top-0 left-0 w-full h-1 z-50 transition-opacity duration-300 ${
+            data-page-progress="root"
+            data-loading={loading}
+            data-progress={progress}
+            className={`fixed top-0 left-0 w-full transition-opacity duration-300 ${
                 loading ? 'opacity-100' : 'opacity-0'
             }`}
+            style={{
+                zIndex: 99999,
+                height: '3px',
+            }}
         >
-            <div className="w-full h-full bg-gray-200">
-                <div
-                    className="h-full bg-blue-600 transition-all duration-200 ease-linear"
-                    style={{ width: `${progress}%` }}
-                />
-            </div>
+            <div
+                className="h-full transition-all duration-200 ease-linear"
+                style={{
+                    width: `${progress}%`,
+                    background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%)',
+                    boxShadow: '0 0 10px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.2)',
+                    filter: 'drop-shadow(0 0 8px rgba(59, 130, 246, 0.8))',
+                }}
+            />
         </div>
     );
 };

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

@@ -4,3 +4,4 @@
 
 export { default as Seo } from './Seo';
 export { default as PageProgress } from './PageProgress';
+export { ErrorBoundary } from './ErrorBoundary';

package/src/layouts/AppLayout/layouts/AuthLayout/AuthContext.tsx

@@ -12,7 +12,7 @@ export const AuthProvider: React.FC<AuthProps> = ({
   supportUrl,
   termsUrl,
   privacyUrl,
-  enablePhoneAuth = true, // Default to true for backward compatibility
+  enablePhoneAuth = false, // Default to true for backward compatibility
   onIdentifierSuccess,
   onOTPSuccess,
   onError,

package/src/layouts/AppLayout/layouts/AuthLayout/AuthHelp.tsx

@@ -53,7 +53,7 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
       <div
         className={`flex items-center justify-between p-3 bg-muted/30 rounded-sm border border-border ${className}`}
       >
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center gap-2">
           {getChannelIcon()}
           <span className="text-sm text-muted-foreground">{getHelpText()}</span>
         </div>
@@ -78,13 +78,13 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
 
   return (
     <div
-      className={`space-y-3 p-3 bg-muted/30 rounded-sm border border-border ${className}`}
+      className={`flex flex-col gap-3 p-3 bg-muted/30 rounded-sm border border-border ${className}`}
     >
-      <div className="flex items-start space-x-2">
+      <div className="flex items-start gap-3">
         {getChannelIcon()}
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <h4 className="text-sm font-medium text-foreground">{helpData.title}</h4>
-          <div className="text-xs text-muted-foreground space-y-0.5">
+          <div className="flex flex-col gap-0.5 text-xs text-muted-foreground">
             {helpData.tips.map((tip, index) => (
               <p key={index}>{tip}</p>
             ))}

package/src/layouts/AppLayout/layouts/AuthLayout/AuthLayout.tsx

@@ -10,9 +10,9 @@ export const AuthLayout: React.FC<AuthProps> = (props) => {
   return (
     <AuthProvider {...props}>
       <div
-        className={`min-h-screen flex flex-col items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8 ${props.className || ''}`}
+        className={`flex flex-col items-center justify-center bg-background py-6 px-4 sm:py-12 sm:px-6 lg:px-8 ${props.className || ''}`}
       >
-        <div className="max-w-md w-full space-y-8 flex-1 flex flex-col justify-center">
+        <div className="w-full sm:max-w-md space-y-8">
           {props.children}
 
           <AuthContent />

package/src/layouts/AppLayout/layouts/AuthLayout/IdentifierForm.tsx

@@ -179,7 +179,7 @@ export const IdentifierForm: React.FC = () => {
               </TabsContent>
 
               {/* Terms and Conditions */}
-              <div className="flex items-start space-x-3">
+              <div className="flex items-start gap-3">
                 <Checkbox
                   id="terms"
                   checked={acceptedTerms}
@@ -262,7 +262,7 @@ export const IdentifierForm: React.FC = () => {
             </div>
 
             {/* Terms and Conditions */}
-            <div className="flex items-start space-x-3">
+            <div className="flex items-start gap-3">
               <Checkbox
                 id="terms-email"
                 checked={acceptedTerms}

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardHeader.tsx

@@ -65,7 +65,7 @@ export function DashboardHeader() {
   };
 
   return (
-    <header className="sticky top-0 py-2 z-50 h-16 flex items-center justify-between px-4 shrink-0 bg-background border-b border-border">
+    <header className="sticky top-0 py-2 z-10 h-16 flex items-center justify-between px-4 shrink-0 bg-background border-b border-border">
       {/* Left side */}
       <div className="flex items-center gap-4">
         <SidebarTrigger className="-ml-1" />

package/src/layouts/AppLayout/layouts/PublicLayout/components/Footer.tsx

@@ -148,7 +148,7 @@ export function Footer() {
             </div>
 
             {/* Right Column - Footer Menu Sections */}
-            <div className="grid grid-cols-2 gap-8">
+            <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 flex-1">
               {footer.menuSections.map((section) => {
                 // Single item section - render as direct link
                 if (section.items.length === 1) {

package/src/layouts/AppLayout/layouts/PublicLayout/components/MobileMenu.tsx

@@ -76,6 +76,17 @@ export function MobileMenu() {
     closeMobileMenu();
   };
 
+  // Prepare menu sections before render
+  const singleItemSections = React.useMemo(
+    () => publicLayout.navigation.menuSections.filter(s => s.items.length === 1),
+    [publicLayout.navigation.menuSections]
+  );
+
+  const multipleItemsSections = React.useMemo(
+    () => publicLayout.navigation.menuSections.filter(s => s.items.length > 1),
+    [publicLayout.navigation.menuSections]
+  );
+
   if (!shouldRender) return null;
 
   // Portal to body to avoid z-index and positioning issues
@@ -138,37 +149,18 @@ export function MobileMenu() {
 
             {/* Navigation Sections */}
             <div className="space-y-6">
-              {publicLayout.navigation.menuSections.map((section) => {
-                // Single item section
-                if (section.items.length === 1) {
-                  const item = section.items[0];
-                  if (!item) return null;
-
-                  return (
-                    <div key={section.title} className="space-y-2">
-                      <Link
-                        href={item.path}
-                        className={`block px-4 py-3 rounded-sm text-base font-medium transition-colors ${
-                          isActive(item.path)
-                            ? 'text-primary border border-primary/20 bg-primary/[0.1]'
-                            : 'text-muted-foreground hover:text-primary hover:bg-accent/50'
-                        }`}
-                        onClick={handleNavigate}
-                      >
-                        {item.label}
-                      </Link>
-                    </div>
-                  );
-                }
-
-                // Multiple items section
-                return (
-                  <div key={section.title} className="space-y-3">
-                    <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                      {section.title}
-                    </h3>
-                    <div className="space-y-1">
-                      {section.items.map((item) => (
+              {/* Group all single-item sections into "Menu" */}
+              {singleItemSections.length > 0 && (
+                <div className="space-y-3">
+                  <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    Menu
+                  </h3>
+                  <div className="space-y-1">
+                    {singleItemSections.map((section) => {
+                      const item = section.items[0];
+                      if (!item) return null;
+
+                      return (
                         <Link
                           key={item.path}
                           href={item.path}
@@ -181,15 +173,40 @@ export function MobileMenu() {
                         >
                           {item.label}
                         </Link>
-                      ))}
-                    </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {/* Render multiple-items sections normally */}
+              {multipleItemsSections.map((section) => (
+                <div key={section.title} className="space-y-3">
+                  <h3 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    {section.title}
+                  </h3>
+                  <div className="space-y-1">
+                    {section.items.map((item) => (
+                      <Link
+                        key={item.path}
+                        href={item.path}
+                        className={`block px-4 py-3 rounded-sm text-base font-medium transition-colors ${
+                          isActive(item.path)
+                            ? 'bg-accent text-accent-foreground'
+                            : 'text-foreground hover:bg-accent hover:text-accent-foreground'
+                        }`}
+                        onClick={handleNavigate}
+                      >
+                        {item.label}
+                      </Link>
+                    ))}
                   </div>
-                );
-              })}
+                </div>
+              ))}
             </div>
 
             {/* Bottom spacer */}
-            <div className="h-20"></div>
+            <div style={{ height: '15vh' }}></div>
           </div>
         </div>
       </div>