@djangocfg/layouts 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.2",
-    "@djangocfg/og-image": "^1.2.2",
-    "@djangocfg/ui": "^1.2.2",
+    "@djangocfg/api": "^1.2.4",
+    "@djangocfg/og-image": "^1.2.4",
+    "@djangocfg/ui": "^1.2.4",
     "@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.2.2",
+    "@djangocfg/typescript-config": "^1.2.4",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/auth/context/AuthContext.tsx

@@ -32,7 +32,18 @@ const hasValidTokens = (): boolean => {
 // Internal provider that uses AccountsContext
 const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config }) => {
   const accounts = useAccountsContext();
-  const [isLoading, setIsLoading] = useState(true);
+
+  // Smart initial loading state: only true if we don't have tokens yet
+  const [isLoading, setIsLoading] = useState(() => {
+    // If we already have tokens and profile, don't show loading
+    if (typeof window !== 'undefined') {
+      const hasTokens = hasValidTokens();
+      // Only show loading on initial mount if no tokens
+      return !hasTokens;
+    }
+    return true;
+  });
+
   const [initialized, setInitialized] = useState(false);
   const router = useRouter();
 
@@ -113,7 +124,6 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
 
     const initializeAuth = async () => {
       authLogger.info('Initializing auth...');
-      setIsLoading(true);
 
       // Debug token state
       const token = api.getToken();
@@ -125,7 +135,16 @@ 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');
+        setInitialized(true);
+        setIsLoading(false);
+        return;
+      }
+
       if (hasTokens) {
+        setIsLoading(true);
         try {
           await loadCurrentProfile();
         } catch (error) {
@@ -133,15 +152,15 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
           // If profile loading fails, clear auth state
           clearAuthState('initializeAuth:loadProfileFailed');
         }
+        setIsLoading(false);
       } else {
         setInitialized(true);
+        setIsLoading(false);
       }
-
-      setIsLoading(false);
     };
 
     initializeAuth();
-  }, [initialized, loadCurrentProfile, clearAuthState]);
+  }, [initialized, user, loadCurrentProfile, clearAuthState]);
 
   // Redirect logic - only for unauthenticated users on protected pages
   useEffect(() => {

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-10-23T06:57:54.947Z
+ * Last updated: 2025-10-24T04:54:59.911Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.2"
+    "version": "1.2.4"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.2"
+    "version": "1.2.4"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.2"
+    "version": "1.2.4"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.2"
+    "version": "1.2.4"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.2"
+    "version": "1.2.4"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.2"
+    "version": "1.2.4"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.2"
+    "version": "1.2.4"
   }
 ];
 

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

@@ -10,7 +10,7 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import { User, ChevronDown, Crown, LogOut, Settings } from 'lucide-react';
-import { Button, ButtonLink, Card, CardContent } from '@djangocfg/ui/components';
+import { Button, ButtonLink, Card, CardContent, Avatar, AvatarImage, AvatarFallback } from '@djangocfg/ui/components';
 import { ThemeToggle } from '@djangocfg/ui/theme';
 import { useAppContext } from '../context';
 import { useAuth } from '../../../auth';
@@ -46,6 +46,14 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
 
   // === DATA PREPARATION (before rendering) ===
 
+  // Prepare user data
+  const userAvatar = user?.avatar || '';
+  const userEmail = user?.email || '';
+  const displayName = user?.display_username || userEmail || 'User';
+  const userInitial = displayName.charAt(0).toUpperCase();
+  const dashboardPath = publicLayout.userMenu.dashboardPath;
+  const profilePath = publicLayout.userMenu.profilePath;
+
   // Handle logout
   const handleLogout = React.useCallback(() => {
     logout();
@@ -66,7 +74,7 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
       type: 'link',
       icon: <Settings className="size-4" />,
       label: 'Profile',
-      href: publicLayout.userMenu.profilePath,
+      href: profilePath,
       variant: 'ghost',
     });
 
@@ -82,7 +90,7 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
     });
 
     return items;
-  }, [publicLayout.userMenu.profilePath, handleLogout]);
+  }, [profilePath, handleLogout]);
 
   // === UNIFIED MENU ITEM RENDERER ===
 
@@ -174,9 +182,9 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
         {isAuthenticated ? (
           <div className="flex items-center gap-3">
             {/* Dashboard button (only if not on dashboard) */}
-            {publicLayout.userMenu.dashboardPath && !isDashboard && (
+            {dashboardPath && !isDashboard && (
               <ButtonLink
-                href={publicLayout.userMenu.dashboardPath}
+                href={dashboardPath}
                 variant="default"
                 size="sm"
                 className="gap-2"
@@ -189,13 +197,23 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
             {/* User Dropdown */}
             <div className="relative">
               <button
-                className="flex items-center gap-2 px-3 py-2 rounded-sm text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50"
+                className="flex items-center gap-2 px-2 py-1.5 rounded-sm text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50 cursor-pointer"
                 onClick={toggleUserMenu}
                 aria-haspopup="true"
                 aria-expanded={userMenuOpen}
               >
-                <User className="size-4" />
-                <span className="max-w-[120px] truncate">{user?.email}</span>
+                <Avatar className="h-7 w-7 ring-1 ring-primary/20">
+                  <AvatarImage
+                    src={userAvatar}
+                    alt={displayName}
+                  />
+                  <AvatarFallback className="bg-primary/10 text-primary text-xs">
+                    {userInitial}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="max-w-[120px] truncate">
+                  {displayName}
+                </span>
                 <ChevronDown
                   className={`size-4 transition-transform ${
                     userMenuOpen ? 'rotate-180' : ''
@@ -207,13 +225,14 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
                 <>
                   {/* Backdrop */}
                   <div
-                    className="fixed inset-0 z-[9995]"
+                    className="fixed inset-0 z-[9995] bg-transparent"
                     onClick={closeUserMenu}
                     aria-hidden="true"
+                    style={{ cursor: 'default' }}
                   />
                   {/* Dropdown */}
                   <div
-                    className="absolute top-full right-0 mt-2 w-48 rounded-sm shadow-sm backdrop-blur-xl z-[9996] bg-popover border border-border"
+                    className="absolute top-full right-0 mt-2 w-52 rounded-sm shadow-sm backdrop-blur-xl z-[9996] bg-popover border border-border"
                     role="menu"
                     aria-label="User menu"
                   >
@@ -222,7 +241,7 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
                       <div className="px-3 py-2 text-sm mb-2 border-b border-border">
                         <div className="text-muted-foreground">Signed in as:</div>
                         <div className="font-medium truncate text-popover-foreground mt-1">
-                          {user?.email}
+                          {userEmail}
                         </div>
                       </div>
 
@@ -253,10 +272,10 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
           {/* User Info Header */}
           <div className="flex items-center gap-3 mb-4 p-3 rounded-sm border border-border bg-accent/70">
             <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden relative">
-              {user?.avatar ? (
+              {userAvatar ? (
                 <img
-                  src={user.avatar}
-                  alt={user?.email || 'User'}
+                  src={userAvatar}
+                  alt={displayName}
                   className="w-10 h-10 rounded-full object-cover"
                 />
               ) : (
@@ -270,7 +289,7 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
                 Signed in as
               </p>
               <p className="text-sm font-semibold truncate text-foreground">
-                {user?.email}
+                {displayName}
               </p>
             </div>
           </div>
@@ -278,9 +297,9 @@ export function UserMenu({ variant, onNavigate }: UserMenuProps) {
           {/* Action Buttons */}
           <div className="space-y-3">
             {/* Dashboard link */}
-            {publicLayout.userMenu.dashboardPath && (
+            {dashboardPath && (
               <ButtonLink
-                href={publicLayout.userMenu.dashboardPath}
+                href={dashboardPath}
                 variant="default"
                 size="sm"
                 className="w-full h-9 gap-2"

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

@@ -38,7 +38,7 @@ export function PrivateLayout({ children }: PrivateLayoutProps) {
 
   const { privateLayout, routes } = config;
 
-  // Redirect unauthenticated users
+  // Redirect unauthenticated users (only when not loading)
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
       const redirect = routes.detectors.getUnauthenticatedRedirect(
@@ -50,19 +50,8 @@ export function PrivateLayout({ children }: PrivateLayoutProps) {
     }
   }, [isLoading, isAuthenticated, routes]);
 
-  // Show loading state while checking auth
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" />
-          <p className="text-sm text-muted-foreground">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
   // Don't render content if user is not authenticated
+  // Note: Loading state is now handled in AppLayout, so we don't show it here
   if (!isAuthenticated) {
     return null;
   }

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

@@ -7,29 +7,18 @@
 
 'use client';
 
-import { Bell, LogIn, LogOut, User } from 'lucide-react';
+import { Bell } from 'lucide-react';
 import React from 'react';
 
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Badge,
   Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
   Separator,
   SidebarTrigger,
 } from '@djangocfg/ui';
 import { ThemeToggle } from '@djangocfg/ui/theme';
-import { useAuthDialog } from '../../../../../snippets';
 import { useAppContext } from '../../../context';
-import { useAuth } from '../../../../../auth';
 import { useNavigation } from '../../../hooks';
+import { UserMenu } from '../../../components';
 
 /**
  * Dashboard Header Component
@@ -47,10 +36,7 @@ import { useNavigation } from '../../../hooks';
  */
 export function DashboardHeader() {
   const { config } = useAppContext();
-  const { user } = useAuth();
   const { getPageTitle } = useNavigation();
-  const { openAuthDialog } = useAuthDialog();
-  const { logout } = useAuth();
 
   const { privateLayout } = config;
   const pageTitle = getPageTitle();
@@ -60,10 +46,6 @@ export function DashboardHeader() {
     console.log('Notifications clicked');
   };
 
-  const handleLogin = () => {
-    openAuthDialog();
-  };
-
   return (
     <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 */}
@@ -95,75 +77,8 @@ export function DashboardHeader() {
         {/* Theme Toggle */}
         <ThemeToggle />
 
-        {/* User menu or Login button */}
-        {user ? (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="flex items-center gap-2 p-2">
-                <Avatar className="h-8 w-8">
-                  <AvatarImage
-                    src={user.avatar || ''}
-                    alt={user.display_username || user.email || ''}
-                  />
-                  <AvatarFallback className="bg-primary/10 text-primary">
-                    {user.display_username?.charAt(0)?.toUpperCase() || 'U'}
-                  </AvatarFallback>
-                </Avatar>
-                <span className="hidden md:block text-sm font-medium">
-                  {user.display_username}
-                </span>
-              </Button>
-            </DropdownMenuTrigger>
-
-            <DropdownMenuContent align="end" className="w-48">
-              <DropdownMenuLabel className="p-0 font-normal">
-                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                  <Avatar className="h-8 w-8">
-                    <AvatarImage
-                      src={user.avatar || ''}
-                      alt={user.display_username || user.email || ''}
-                    />
-                    <AvatarFallback className="bg-primary/10 text-primary">
-                      {user.display_username?.charAt(0)?.toUpperCase() || 'U'}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-semibold">
-                      {user.display_username || user.full_name || user.email}
-                    </span>
-                    <span className="truncate text-xs text-muted-foreground">
-                      {user.email}
-                    </span>
-                  </div>
-                </div>
-              </DropdownMenuLabel>
-
-              <DropdownMenuSeparator />
-
-              <DropdownMenuItem asChild>
-                <a
-                  href={privateLayout.profileHref}
-                  className="flex items-center gap-2"
-                >
-                  <User className="h-4 w-4" />
-                  Profile
-                </a>
-              </DropdownMenuItem>
-
-              <DropdownMenuSeparator />
-
-              <DropdownMenuItem onClick={logout} className="gap-2">
-                <LogOut className="h-4 w-4" />
-                Logout
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ) : (
-          <Button onClick={handleLogin} size="sm" className="gap-2">
-            <LogIn className="h-4 w-4" />
-            <span className="hidden sm:inline">Sign In</span>
-          </Button>
-        )}
+        {/* User menu - unified component */}
+        <UserMenu variant="desktop" />
       </div>
     </header>
   );

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

@@ -41,7 +41,7 @@ export function Footer() {
         <div className="w-full px-4 py-8">
           {/* Project Info */}
           <div className="text-center space-y-4 mb-6">
-            <div className="flex items-center justify-center space-x-2">
+            <div className="flex items-center justify-center gap-2">
               <div className="w-6 h-6 flex items-center justify-center">
                 <img
                   src={app.logoPath}
@@ -95,10 +95,10 @@ export function Footer() {
           {/* Bottom Section */}
           <div className="border-t border-border pt-4">
             <div className="text-center space-y-2">
-              <div className="text-sm text-muted-foreground">
+              <div className="text-xs text-muted-foreground">
                 © {currentYear} {app.name}. All rights reserved.
               </div>
-              <div className="text-sm text-muted-foreground">
+              <div className="text-xs text-muted-foreground flex items-center justify-center gap-1">
                 Made with ❤️ by{' '}
                 <a
                   href="https://reforms.ai"
@@ -152,46 +152,26 @@ export function Footer() {
             </div>
 
             {/* Right Column - Footer Menu Sections */}
-            <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) {
-                  const item = section.items[0];
-                  if (!item) return null;
-
-                  return (
-                    <div key={section.title}>
-                      <Link
-                        href={item.path}
-                        className="text-muted-foreground hover:text-primary text-sm transition-colors"
-                      >
-                        {item.label}
-                      </Link>
-                    </div>
-                  );
-                }
-
-                // Multiple items - render as section
-                return (
-                  <div key={section.title}>
-                    <h3 className="text-lg font-semibold text-foreground mb-4">
-                      {section.title}
-                    </h3>
-                    <ul className="space-y-2">
-                      {section.items.map((item) => (
-                        <li key={item.path}>
-                          <Link
-                            href={item.path}
-                            className="text-muted-foreground hover:text-primary text-sm transition-colors"
-                          >
-                            {item.label}
-                          </Link>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                );
-              })}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 flex-1">
+              {footer.menuSections.map((section) => (
+                <div key={section.title}>
+                  <h3 className="text-sm font-semibold text-foreground mb-3">
+                    {section.title}
+                  </h3>
+                  <ul className="space-y-2">
+                    {section.items.map((item) => (
+                      <li key={item.path}>
+                        <Link
+                          href={item.path}
+                          className="text-muted-foreground hover:text-primary text-sm transition-colors"
+                        >
+                          {item.label}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
             </div>
           </div>
 

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

@@ -45,9 +45,9 @@ export function Navigation() {
   const { app, publicLayout } = config;
 
   return (
-    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-10 bg-background/80 border-border/30">
+    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-[100] bg-background/80 border-border/30 isolate">
       <div className="w-full px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
+        <div className="flex items-center justify-between py-2 min-h-[40px]">
           {/* Left side - Logo and Navigation Menu */}
           <div className="flex items-center gap-6">
             {/* Logo */}
@@ -153,10 +153,10 @@ export function Navigation() {
           {isMobile && (
           <button
             onClick={toggleMobileDrawer}
-            className="p-3 rounded-sm border shadow-sm transition-all duration-200 bg-card/50 hover:bg-card border-border/50 hover:border-primary/50 text-foreground hover:text-primary"
+            className="p-2 rounded-md transition-colors hover:bg-accent text-foreground hover:text-primary"
             aria-label="Toggle mobile menu"
           >
-            <Menu className="size-5" />
+            <Menu className="size-6" />
           </button>
           )}
         </div>

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

@@ -72,18 +72,23 @@ export const AvatarSection = () => {
   return (
     <div className="flex flex-col items-center mb-4">
       <div className="relative group">
-        <Avatar className="w-24 h-24 transition-transform group-hover:scale-105">
+        <Avatar
+          className="aspect-square rounded-full overflow-hidden ring-1 ring-foreground/20 transition-transform group-hover:scale-105"
+          style={{ width: '80px', height: '80px' }}
+        >
           {avatarPreview ? (
             <img
               src={avatarPreview}
               alt="Avatar preview"
-              className="w-full h-full object-cover rounded-full"
+              className="w-full h-full object-cover"
+              style={{ borderRadius: '50%' }}
             />
           ) : user?.avatar ? (
             <img
               src={user.avatar}
               alt="User avatar"
-              className="w-full h-full object-cover rounded-full"
+              className="w-full h-full object-cover"
+              style={{ borderRadius: '50%' }}
             />
           ) : (
             <AvatarFallback className="text-2xl font-semibold bg-gradient-to-br from-primary to-primary/80 text-primary-foreground">

package/src/layouts/UILayout/UIGuideLanding.tsx

@@ -18,6 +18,8 @@ import {
   Blocks,
   Github,
   BookOpen,
+  Layout,
+  CheckCircle2,
 } from 'lucide-react';
 import {
   SuperHero,
@@ -75,6 +77,7 @@ export function UIGuideLanding({
           { number: "11", label: "Hooks" },
           { number: "100%", label: "Type Safe" },
         ]}
+        showBackgroundSwitcher={true}
       />
 
       {/* Features Section using FeatureSection block */}
@@ -124,21 +127,25 @@ export function UIGuideLanding({
         columns={4}
         stats={[
           {
+            icon: <Layout className="w-6 h-6" />,
             number: "56+",
             label: "UI Components",
             description: "Production-ready",
           },
           {
+            icon: <Blocks className="w-6 h-6" />,
             number: "7",
             label: "Landing Blocks",
             description: "Pre-built sections",
           },
           {
+            icon: <Code2 className="w-6 h-6" />,
             number: "11",
             label: "React Hooks",
             description: "Custom utilities",
           },
           {
+            icon: <CheckCircle2 className="w-6 h-6" />,
             number: "100%",
             label: "Type Safe",
             description: "Full TypeScript",
@@ -160,39 +167,6 @@ export function UIGuideLanding({
         }}
         background="gradient"
       />
-
-      {/* Simple Footer */}
-      <footer className="border-t py-8 sm:py-10 md:py-12 bg-background">
-        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Package className="w-4 h-4" />
-              <span>Built with Radix UI + Tailwind CSS</span>
-            </div>
-            <div className="flex items-center gap-6">
-              <button
-                onClick={handleBrowseComponents}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Components
-              </button>
-              <button
-                onClick={handleViewBlocks}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Blocks
-              </button>
-              <button
-                onClick={() => window.open(githubUrl, '_blank')}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
-              >
-                <Github className="w-4 h-4" />
-                GitHub
-              </button>
-            </div>
-          </div>
-        </div>
-      </footer>
     </div>
   );
 }

package/src/layouts/UILayout/components/Sidebar.tsx

@@ -123,13 +123,6 @@ function SidebarContent({
           </div>
         </div>
       </div>
-
-      {/* Footer */}
-      <div className="border-t p-4">
-        <p className="text-xs text-muted-foreground">
-          Built with Radix UI + Tailwind CSS v4
-        </p>
-      </div>
     </div>
   );
 }

package/src/layouts/UILayout/config/components/blocks.config.tsx

@@ -12,7 +12,7 @@ import {
   StatsSection,
   TestimonialSection,
 } from '@djangocfg/ui/blocks';
-import { Sparkles, BookOpen, Zap, Shield, Code } from 'lucide-react';
+import { Sparkles, BookOpen, Zap, Shield, Code, Users, Building2, TrendingUp, Headphones } from 'lucide-react';
 import type { ComponentConfig } from './types';
 
 export const BLOCKS: ComponentConfig[] = [
@@ -60,7 +60,9 @@ export const BLOCKS: ComponentConfig[] = [
     { number: "6", label: "Hooks" },
     { number: "100%", label: "Type Safe" }
   ]}
-  scrollIndicator={false}
+  backgroundVariant="waves"
+  backgroundIntensity="medium"
+  showBackgroundSwitcher={true}
 />`,
     preview: (
       <SuperHero
@@ -82,7 +84,9 @@ export const BLOCKS: ComponentConfig[] = [
           { number: "6", label: "Hooks" },
           { number: "100%", label: "Type Safe" },
         ]}
-        scrollIndicator={false}
+        backgroundVariant="waves"
+        backgroundIntensity="medium"
+        showBackgroundSwitcher={true}
       />
     ),
   },
@@ -181,18 +185,20 @@ export const BLOCKS: ComponentConfig[] = [
     example: `<StatsSection
   title="Our Impact"
   stats={[
-    { number: "10K+", label: "Active Users" },
-    { number: "99.9%", label: "Uptime" }
+    { icon: <Users className="w-6 h-6" />, number: "10K+", label: "Active Users" },
+    { icon: <Building2 className="w-6 h-6" />, number: "500+", label: "Companies" },
+    { icon: <TrendingUp className="w-6 h-6" />, number: "99.9%", label: "Uptime" },
+    { icon: <Headphones className="w-6 h-6" />, number: "24/7", label: "Support" }
   ]}
 />`,
     preview: (
       <StatsSection
         title="Our Impact"
         stats={[
-          { number: "10K+", label: "Active Users" },
-          { number: "500+", label: "Companies" },
-          { number: "99.9%", label: "Uptime" },
-          { number: "24/7", label: "Support" }
+          { icon: <Users className="w-6 h-6" />, number: "10K+", label: "Active Users" },
+          { icon: <Building2 className="w-6 h-6" />, number: "500+", label: "Companies" },
+          { icon: <TrendingUp className="w-6 h-6" />, number: "99.9%", label: "Uptime" },
+          { icon: <Headphones className="w-6 h-6" />, number: "24/7", label: "Support" }
         ]}
       />
     ),

package/src/layouts/UILayout/config/tailwind.config.ts

@@ -30,6 +30,12 @@ export const TAILWIND_GUIDE: TailwindGuide = {
     "Use standard Tailwind classes only: py-16 sm:py-20 md:py-24 lg:py-32",
     "Responsive patterns: px-4 sm:px-6 lg:px-8",
     "Container pattern: container max-w-7xl mx-auto",
+    "IMPORTANT: Arbitrary values like h-[80px] may NOT work in v4 due to changed syntax",
+    "For fixed sizes: Use inline styles style={{ width: '80px', height: '80px' }} - always reliable",
+    "Spacing utilities (h-20, p-4, etc.) require --spacing-* variables defined in @theme block before Tailwind import",
+    "Import order is critical but hard to fix: changing order breaks other styles",
+    "Use aspect-square for maintaining 1:1 ratio (circles, squares)",
+    "Use overflow-hidden with rounded-full for perfect circles",
     "Avoid custom utilities like: section-padding, animate-*, shadow-brand",
     "Mobile-first approach with breakpoints: sm: (640px), md: (768px), lg: (1024px), xl: (1280px)",
     "Use CSS variables: var(--color-primary), var(--font-family-sans)"
@@ -53,6 +59,7 @@ export const TAILWIND_GUIDE: TailwindGuide = {
   --color-primary: #3b82f6;
   --color-secondary: #8b5cf6;
   --font-family-sans: ui-sans-serif, system-ui, sans-serif;
+  --spacing-20: 5rem; /* Required for h-20, w-20 to work */
 }`
     },
     {
@@ -65,6 +72,16 @@ export const TAILWIND_GUIDE: TailwindGuide = {
     </h1>
   </div>
 </section>`
+    },
+    {
+      title: "Fixed Sizes with Inline Styles",
+      description: "Most reliable way to set exact dimensions in v4",
+      code: `<Avatar
+  className="aspect-square rounded-full overflow-hidden ring-1 ring-foreground/20"
+  style={{ width: '80px', height: '80px' }}
+>
+  <AvatarImage src={avatar} alt="User" />
+</Avatar>`
     },
     {
       title: "Component Styling",