@djangocfg/layouts 1.2.4 → 1.2.6

package/package.json

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

package/src/auth/context/AuthContext.tsx

@@ -101,14 +101,16 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
 
       // Refresh profile from AccountsContext
       const refreshedProfile = await accounts.refreshProfile();
-      
+
       if (refreshedProfile) {
-        setInitialized(true);
         authLogger.info('Profile loaded successfully:', refreshedProfile.id);
       } else {
-        authLogger.warn('Profile refresh returned undefined');
-        clearAuthState('loadCurrentProfile:noProfile');
+        authLogger.warn('Profile refresh returned undefined - but keeping tokens');
       }
+
+      // Always mark as initialized if we have valid tokens
+      // Don't clear tokens just because profile fetch failed
+      setInitialized(true);
     } catch (error) {
       authLogger.error('Failed to load profile:', error);
       // Use global error handler first, fallback to clearing state
@@ -166,7 +168,8 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
   useEffect(() => {
     if (!initialized) return;
 
-    const isAuthenticated = !!userRef.current && api.isAuthenticated();
+    // Consider authenticated if we have valid tokens, even without profile
+    const isAuthenticated = api.isAuthenticated();
     const authRoute = config?.routes?.auth || defaultRoutes.auth;
     const isAuthPage = router.pathname === authRoute;
 
@@ -408,9 +411,12 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     () => ({
       user,
       isLoading,
-      isAuthenticated: !!user && api.isAuthenticated(),
+      // Consider authenticated if we have valid tokens, even without user profile
+      isAuthenticated: api.isAuthenticated(),
       loadCurrentProfile,
       checkAuthAndRedirect,
+      getToken: () => api.getToken(),
+      getRefreshToken: () => api.getRefreshToken(),
       getSavedEmail: () => storedEmail,
       saveEmail: setStoredEmail,
       clearSavedEmail: clearStoredEmail,
@@ -429,24 +435,24 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       saveCurrentUrlForRedirect,
     }),
     [
-      user, 
-      isLoading, 
-      loadCurrentProfile, 
-      checkAuthAndRedirect, 
+      user,
+      isLoading,
+      loadCurrentProfile,
+      checkAuthAndRedirect,
       storedEmail,
       setStoredEmail,
       clearStoredEmail,
       storedPhone,
       setStoredPhone,
       clearStoredPhone,
-      requestOTP, 
-      verifyOTP, 
-      refreshToken, 
-      logout, 
-      getSavedRedirectUrl, 
-      saveRedirectUrl, 
-      clearSavedRedirectUrl, 
-      getFinalRedirectUrl, 
+      requestOTP,
+      verifyOTP,
+      refreshToken,
+      logout,
+      getSavedRedirectUrl,
+      saveRedirectUrl,
+      clearSavedRedirectUrl,
+      getFinalRedirectUrl,
       useAndClearRedirectUrl,
       saveCurrentUrlForRedirect,
     ],

package/src/auth/context/types.ts

@@ -31,6 +31,10 @@ export interface AuthContextType {
   loadCurrentProfile: () => Promise<void>;
   checkAuthAndRedirect: () => Promise<void>;
 
+  // Token Methods
+  getToken: () => string | null;
+  getRefreshToken: () => string | null;
+
   // Email Methods
   getSavedEmail: () => string | null;
   saveEmail: (email: string) => void;

package/src/layouts/AppLayout/AppLayout.tsx

@@ -90,24 +90,42 @@ function LayoutRouter({
     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;
-
-    const isAuthRoute = config.routes.detectors.isAuthRoute(router.pathname);
-    const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
-    // const isPublicRoute = config.routes.detectors.isPublicRoute(router.pathname);
+  // Check route type (synchronous - works with SSR)
+  const isAuthRoute = config.routes.detectors.isAuthRoute(router.pathname);
+  const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
+
+  // Private routes: Always show loading during SSR and initial client render
+  // This prevents hydration mismatch when isAuthenticated differs between server/client
+  if (isPrivateRoute && !forceLayout) {
+    if (!isMounted || isLoading) {
+      return (
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-muted-foreground">Loading...</div>
+        </div>
+      );
+    }
 
-    if (isAuthRoute) return 'auth';
+    // After mount: check authentication
+    if (!isAuthenticated) {
+      // Redirect to auth (handled in PrivateLayout)
+      return (
+        <AuthLayout
+          termsUrl={config.auth?.termsUrl}
+          privacyUrl={config.auth?.privacyUrl}
+          supportUrl={config.auth?.supportUrl}
+          enablePhoneAuth={config.auth?.enablePhoneAuth}
+        />
+      );
+    }
 
-    if (isPrivateRoute) {
-      if (isAuthenticated) {
-        return 'private';
-      };
-      return 'auth';
-    };
+    return <PrivateLayout>{children}</PrivateLayout>;
+  }
 
+  // Determine layout mode for non-private routes
+  const getLayoutMode = (): 'public' | 'auth' => {
+    if (forceLayout === 'auth') return 'auth';
+    if (forceLayout === 'public') return 'public';
+    if (isAuthRoute) return 'auth';
     return 'public';
   };
 
@@ -121,9 +139,6 @@ function LayoutRouter({
 
     // Auth routes: render inside AuthLayout
     case 'auth':
-      // Check if we're on a private route that requires auth
-      const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
-
       return (
         <AuthLayout
           termsUrl={config.auth?.termsUrl}
@@ -131,22 +146,10 @@ function LayoutRouter({
           supportUrl={config.auth?.supportUrl}
           enablePhoneAuth={config.auth?.enablePhoneAuth}
         >
-          {/* Don't render children if redirected from private route */}
-          {!isPrivateRoute && children}
+          {children}
         </AuthLayout>
       );
 
-    // Private routes: wait for client-side hydration and auth check
-    case 'private':
-      if (!isMounted || isLoading) {
-        return (
-          <div className="min-h-screen flex items-center justify-center">
-            <div className="text-muted-foreground">Loading...</div>
-          </div>
-        );
-      }
-      return <PrivateLayout>{children}</PrivateLayout>;
-
     default:
       return <PublicLayout>{children}</PublicLayout>;
   }

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

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

@@ -21,6 +21,17 @@ import {
   Toggle,
   ToggleGroup,
   ToggleGroupItem,
+  Calendar,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
@@ -305,4 +316,118 @@ export const DATA_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'Calendar',
+    category: 'data',
+    description: 'Date picker calendar component',
+    importPath: `import { Calendar } from '@djangocfg/ui';`,
+    example: `<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  className="rounded-md border"
+/>`,
+    preview: (
+      <Calendar
+        mode="single"
+        className="rounded-md border"
+      />
+    ),
+  },
+  {
+    name: 'Carousel',
+    category: 'data',
+    description: 'Image and content carousel with navigation',
+    importPath: `import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@djangocfg/ui';`,
+    example: `<Carousel className="w-full max-w-xs">
+  <CarouselContent>
+    <CarouselItem>
+      <div className="p-6 border rounded-md">
+        <span className="text-4xl font-semibold">1</span>
+      </div>
+    </CarouselItem>
+    <CarouselItem>
+      <div className="p-6 border rounded-md">
+        <span className="text-4xl font-semibold">2</span>
+      </div>
+    </CarouselItem>
+    <CarouselItem>
+      <div className="p-6 border rounded-md">
+        <span className="text-4xl font-semibold">3</span>
+      </div>
+    </CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>`,
+    preview: (
+      <Carousel className="w-full max-w-xs">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-6 border rounded-md bg-muted/50">
+                <div className="flex aspect-square items-center justify-center">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </div>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    ),
+  },
+  {
+    name: 'Chart',
+    category: 'data',
+    description: 'Data visualization charts powered by Recharts',
+    importPath: `import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from '@djangocfg/ui';`,
+    example: `import { Bar, BarChart, XAxis, YAxis } from 'recharts';
+
+const chartConfig = {
+  sales: { label: "Sales", color: "hsl(var(--chart-1))" },
+  profit: { label: "Profit", color: "hsl(var(--chart-2))" },
+};
+
+const chartData = [
+  { month: "Jan", sales: 400, profit: 240 },
+  { month: "Feb", sales: 300, profit: 180 },
+  { month: "Mar", sales: 500, profit: 300 },
+];
+
+<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+  <BarChart data={chartData}>
+    <XAxis dataKey="month" />
+    <YAxis />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <ChartLegend content={<ChartLegendContent />} />
+    <Bar dataKey="sales" fill="var(--color-sales)" />
+    <Bar dataKey="profit" fill="var(--color-profit)" />
+  </BarChart>
+</ChartContainer>`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Chart components built on Recharts with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Bar, Line, Area, Pie charts</li>
+          <li>• Responsive container</li>
+          <li>• Theme-aware colors</li>
+          <li>• Tooltips and legends</li>
+          <li>• Customizable styling</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          See <strong>Recharts documentation</strong> for all chart types
+        </p>
+      </div>
+    ),
+  },
 ];

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

@@ -14,6 +14,7 @@ import {
   AvatarImage,
   Button,
   useToast,
+  Toaster,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
@@ -243,4 +244,47 @@ export const FEEDBACK_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'Toaster',
+    category: 'feedback',
+    description: 'Global toast notification container (works with Toast component)',
+    importPath: `import { Toaster, useToast } from '@djangocfg/ui';`,
+    example: `// Add Toaster once in your app layout
+<Toaster />
+
+// Then use the useToast hook anywhere
+function MyComponent() {
+  const { toast } = useToast();
+
+  return (
+    <Button
+      onClick={() => {
+        toast({
+          title: "Scheduled: Catch up",
+          description: "Friday, February 10, 2023 at 5:57 PM",
+        });
+      }}
+    >
+      Show Toast
+    </Button>
+  );
+}`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Toaster is the global container for Toast notifications:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Add once to your app layout</li>
+          <li>• Use with useToast hook</li>
+          <li>• Manages toast queue and positioning</li>
+          <li>• Accessible and keyboard navigable</li>
+          <li>• Works with Toast component</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          ℹ️ Different from Sonner - this is the built-in Toast system
+        </p>
+      </div>
+    ),
+  },
 ];

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

@@ -18,10 +18,39 @@ import {
   Textarea,
   Switch,
   Slider,
+  Combobox,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  PhoneInput,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Field,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
 export const FORM_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'Label',
+    category: 'forms',
+    description: 'Accessible label component for form inputs',
+    importPath: "import { Label } from '@djangocfg/ui';",
+    example: `<div className="space-y-2">
+  <Label htmlFor="email">Email address</Label>
+  <Input id="email" type="email" placeholder="Enter your email" />
+</div>`,
+    preview: (
+      <div className="space-y-2 max-w-sm">
+        <Label htmlFor="demo-email">Email address</Label>
+        <Input id="demo-email" type="email" placeholder="Enter your email" />
+      </div>
+    ),
+  },
   {
     name: 'Button',
     category: 'forms',
@@ -168,4 +197,169 @@ export const FORM_COMPONENTS: ComponentConfig[] = [
       <Slider defaultValue={[50]} max={100} step={1} className="w-[200px]" />
     ),
   },
+  {
+    name: 'Combobox',
+    category: 'forms',
+    description: 'Searchable dropdown with autocomplete',
+    importPath: "import { Combobox } from '@djangocfg/ui';",
+    example: `<Combobox
+  options={[
+    { value: "javascript", label: "JavaScript" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "python", label: "Python" },
+    { value: "rust", label: "Rust" },
+  ]}
+  placeholder="Select language..."
+  searchPlaceholder="Search language..."
+  emptyText="No language found."
+/>`,
+    preview: (
+      <Combobox
+        options={[
+          { value: "javascript", label: "JavaScript" },
+          { value: "typescript", label: "TypeScript" },
+          { value: "python", label: "Python" },
+          { value: "rust", label: "Rust" },
+        ]}
+        placeholder="Select language..."
+        searchPlaceholder="Search language..."
+        emptyText="No language found."
+        className="w-[200px]"
+      />
+    ),
+  },
+  {
+    name: 'InputOTP',
+    category: 'forms',
+    description: 'One-time password input component',
+    importPath: "import { InputOTP, InputOTPGroup, InputOTPSlot } from '@djangocfg/ui';",
+    example: `<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>`,
+    preview: (
+      <InputOTP maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    ),
+  },
+  {
+    name: 'PhoneInput',
+    category: 'forms',
+    description: 'International phone number input with country selector',
+    importPath: "import { PhoneInput } from '@djangocfg/ui';",
+    example: `<PhoneInput
+  defaultCountry="US"
+  placeholder="Enter phone number"
+  className="max-w-sm"
+/>`,
+    preview: (
+      <PhoneInput
+        defaultCountry="US"
+        placeholder="Enter phone number"
+        className="max-w-sm"
+      />
+    ),
+  },
+  {
+    name: 'Form',
+    category: 'forms',
+    description: 'React Hook Form wrapper with form validation',
+    importPath: "import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@djangocfg/ui';",
+    example: `// Requires react-hook-form
+import { useForm } from 'react-hook-form';
+
+function MyForm() {
+  const form = useForm();
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter username" {...field} />
+              </FormControl>
+              <FormDescription>
+                Your public display name
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          The Form component is a wrapper around React Hook Form with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Integrated form validation</li>
+          <li>• Accessible form fields</li>
+          <li>• Error message handling</li>
+          <li>• Field descriptions and labels</li>
+          <li>• Type-safe with TypeScript</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          See the <strong>react-hook-form</strong> documentation for usage examples
+        </p>
+      </div>
+    ),
+  },
+  {
+    name: 'Field',
+    category: 'forms',
+    description: 'Advanced field component with label, description and validation',
+    importPath: "import { Field, FieldGroup, FieldSet, FieldLegend } from '@djangocfg/ui';",
+    example: `<FieldSet>
+  <FieldLegend>Account Information</FieldLegend>
+  <FieldGroup>
+    <Field>
+      <FieldLabel>Username</FieldLabel>
+      <Input placeholder="Enter username" />
+      <FieldDescription>
+        Your unique username for the platform
+      </FieldDescription>
+      <FieldError>Username is required</FieldError>
+    </Field>
+  </FieldGroup>
+</FieldSet>`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Field component provides structured form fields with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Label and description support</li>
+          <li>• Error message handling</li>
+          <li>• Field grouping (FieldSet, FieldGroup)</li>
+          <li>• Accessible by default</li>
+          <li>• Consistent styling</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          Perfect for complex forms with validation
+        </p>
+      </div>
+    ),
+  },
 ];

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

@@ -15,6 +15,13 @@ import {
   Skeleton,
   AspectRatio,
   Sticky,
+  ScrollArea,
+  ScrollBar,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  Section,
+  SectionHeader,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
@@ -130,4 +137,92 @@ export const LAYOUT_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'ScrollArea',
+    category: 'layout',
+    description: 'Custom scrollable area with styled scrollbar',
+    importPath: "import { ScrollArea, ScrollBar } from '@djangocfg/ui';",
+    example: `<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+  <div className="space-y-4">
+    {Array.from({ length: 20 }).map((_, i) => (
+      <div key={i} className="text-sm">
+        Content item {i + 1}
+      </div>
+    ))}
+  </div>
+  <ScrollBar orientation="vertical" />
+</ScrollArea>`,
+    preview: (
+      <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+        <div className="space-y-4">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <div key={i} className="text-sm">
+              Content item {i + 1} - Scroll to see more content
+            </div>
+          ))}
+        </div>
+        <ScrollBar orientation="vertical" />
+      </ScrollArea>
+    ),
+  },
+  {
+    name: 'Resizable',
+    category: 'layout',
+    description: 'Resizable panel layout with draggable handles',
+    importPath: "import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@djangocfg/ui';",
+    example: `<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
+  <ResizablePanel defaultSize={50}>
+    <div className="flex h-[200px] items-center justify-center p-6">
+      <span className="font-semibold">Panel One</span>
+    </div>
+  </ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={50}>
+    <div className="flex h-[200px] items-center justify-center p-6">
+      <span className="font-semibold">Panel Two</span>
+    </div>
+  </ResizablePanel>
+</ResizablePanelGroup>`,
+    preview: (
+      <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">Panel One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">Panel Two</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    ),
+  },
+  {
+    name: 'Section',
+    category: 'layout',
+    description: 'Semantic section container with header',
+    importPath: "import { Section, SectionHeader } from '@djangocfg/ui';",
+    example: `<Section>
+  <SectionHeader
+    title="Section Title"
+    description="Section description goes here"
+  />
+  <div className="p-4">
+    Section content goes here...
+  </div>
+</Section>`,
+    preview: (
+      <Section>
+        <SectionHeader
+          title="Section Title"
+          subtitle="Section description goes here"
+        />
+        <div className="p-4 border-t">
+          <p className="text-sm">Section content goes here...</p>
+        </div>
+      </Section>
+    ),
+  },
 ];

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

@@ -16,6 +16,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  BreadcrumbNavigation,
   Tabs,
   TabsContent,
   TabsList,
@@ -27,6 +28,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  SSRPagination,
 } from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
@@ -241,4 +243,52 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
       </Pagination>
     ),
   },
+  {
+    name: 'BreadcrumbNavigation',
+    category: 'navigation',
+    description: 'Enhanced breadcrumb component with automatic path generation',
+    importPath: `import { BreadcrumbNavigation } from '@djangocfg/ui';`,
+    example: `<BreadcrumbNavigation
+  items={[
+    { label: "Home", href: "/" },
+    { label: "Products", href: "/products" },
+    { label: "Category", href: "/products/category" },
+    { label: "Item", href: "/products/category/item" },
+  ]}
+/>`,
+    preview: (
+      <BreadcrumbNavigation
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Products", href: "/products" },
+          { label: "Category", href: "/products/category" },
+          { label: "Item", href: "/products/category/item" },
+        ]}
+      />
+    ),
+  },
+  {
+    name: 'SSRPagination',
+    category: 'navigation',
+    description: 'Server-side rendered pagination component',
+    importPath: `import { SSRPagination } from '@djangocfg/ui';`,
+    example: `<SSRPagination
+  currentPage={2}
+  totalPages={10}
+  totalItems={100}
+  itemsPerPage={10}
+  hasNextPage={true}
+  hasPreviousPage={true}
+/>`,
+    preview: (
+      <SSRPagination
+        currentPage={2}
+        totalPages={10}
+        totalItems={100}
+        itemsPerPage={10}
+        hasNextPage={true}
+        hasPreviousPage={true}
+      />
+    ),
+  },
 ];

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

@@ -3,6 +3,22 @@
  */
 
 import React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+  Spinner,
+  Kbd,
+  TokenIcon,
+  Toaster,
+  InputGroup,
+  Item,
+} from '@djangocfg/ui';
 import type { ComponentConfig } from './types';
 
 export const SPECIALIZED_COMPONENTS: ComponentConfig[] = [
@@ -122,4 +138,238 @@ export const SPECIALIZED_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'ButtonGroup',
+    category: 'specialized',
+    description: 'Group buttons together with shared borders',
+    importPath: `import { ButtonGroup, Button } from '@djangocfg/ui';`,
+    example: `<ButtonGroup orientation="horizontal">
+  <Button variant="outline">Left</Button>
+  <Button variant="outline">Center</Button>
+  <Button variant="outline">Right</Button>
+</ButtonGroup>`,
+    preview: (
+      <div className="space-y-4">
+        <ButtonGroup orientation="horizontal">
+          <Button variant="outline">Left</Button>
+          <Button variant="outline">Center</Button>
+          <Button variant="outline">Right</Button>
+        </ButtonGroup>
+        <ButtonGroup orientation="vertical">
+          <Button variant="outline">Top</Button>
+          <Button variant="outline">Middle</Button>
+          <Button variant="outline">Bottom</Button>
+        </ButtonGroup>
+      </div>
+    ),
+  },
+  {
+    name: 'Empty',
+    category: 'specialized',
+    description: 'Empty state component for no data scenarios',
+    importPath: `import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '@djangocfg/ui';`,
+    example: `<Empty>
+  <EmptyHeader>
+    <EmptyMedia>
+      <svg>...</svg>
+    </EmptyMedia>
+    <EmptyTitle>No results found</EmptyTitle>
+    <EmptyDescription>
+      Try adjusting your search or filter to find what you're looking for.
+    </EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>Clear filters</Button>
+  </EmptyContent>
+</Empty>`,
+    preview: (
+      <Empty className="border">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+            </svg>
+          </EmptyMedia>
+          <EmptyTitle>No results found</EmptyTitle>
+          <EmptyDescription>
+            Try adjusting your search or filter to find what you're looking for.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button>Clear filters</Button>
+        </EmptyContent>
+      </Empty>
+    ),
+  },
+  {
+    name: 'Spinner',
+    category: 'specialized',
+    description: 'Loading spinner indicator',
+    importPath: `import { Spinner } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-4 items-center">
+  <Spinner />
+  <Spinner className="size-6" />
+  <Spinner className="size-8" />
+</div>`,
+    preview: (
+      <div className="flex gap-4 items-center">
+        <Spinner />
+        <Spinner className="size-6" />
+        <Spinner className="size-8" />
+      </div>
+    ),
+  },
+  {
+    name: 'Kbd',
+    category: 'specialized',
+    description: 'Keyboard key display component',
+    importPath: `import { Kbd } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-2">
+  <Kbd>⌘</Kbd>
+  <Kbd>K</Kbd>
+</div>`,
+    preview: (
+      <div className="space-y-4">
+        <div className="flex gap-2 items-center">
+          <span className="text-sm">Press</span>
+          <Kbd>⌘</Kbd>
+          <Kbd>K</Kbd>
+          <span className="text-sm">to open</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <span className="text-sm">Press</span>
+          <Kbd>Ctrl</Kbd>
+          <span className="text-sm">+</span>
+          <Kbd>C</Kbd>
+          <span className="text-sm">to copy</span>
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: 'TokenIcon',
+    category: 'specialized',
+    description: 'Cryptocurrency token icon component',
+    importPath: `import { TokenIcon } from '@djangocfg/ui';`,
+    example: `<div className="flex gap-4">
+  <TokenIcon symbol="btc" size={32} />
+  <TokenIcon symbol="eth" size={32} />
+  <TokenIcon symbol="usdt" size={32} />
+</div>`,
+    preview: (
+      <div className="flex gap-4 items-center">
+        <TokenIcon symbol="btc" size={32} />
+        <TokenIcon symbol="eth" size={32} />
+        <TokenIcon symbol="usdt" size={32} />
+        <TokenIcon symbol="bnb" size={32} />
+      </div>
+    ),
+  },
+  {
+    name: 'Sonner (Toaster)',
+    category: 'specialized',
+    description: 'Toast notifications powered by Sonner library',
+    importPath: `import { Toaster } from '@djangocfg/ui';
+import { toast } from 'sonner';`,
+    example: `// Add Toaster to your app layout
+<Toaster />
+
+// Then use toast anywhere in your app
+toast.success('Operation completed!');
+toast.error('Something went wrong');
+toast.info('New message received');
+toast.promise(
+  fetchData(),
+  {
+    loading: 'Loading...',
+    success: 'Data loaded!',
+    error: 'Failed to load',
+  }
+);`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Sonner is a powerful toast notification system with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Promise-based toasts</li>
+          <li>• Multiple variants (success, error, info, warning)</li>
+          <li>• Custom duration and position</li>
+          <li>• Action buttons support</li>
+          <li>• Dark mode support</li>
+        </ul>
+        <p className="text-xs text-muted-foreground mt-4">
+          See <strong>sonner</strong> documentation for API details
+        </p>
+      </div>
+    ),
+  },
+  {
+    name: 'InputGroup',
+    category: 'specialized',
+    description: 'Enhanced input with prefix/suffix addons',
+    importPath: `import { InputGroup, Input } from '@djangocfg/ui';`,
+    example: `<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <SearchIcon className="size-4" />
+  </InputGroupAddon>
+  <Input placeholder="Search..." />
+  <InputGroupAddon align="inline-end">
+    <Kbd>⌘K</Kbd>
+  </InputGroupAddon>
+</InputGroup>`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50 space-y-4">
+        <p className="text-sm text-muted-foreground">
+          InputGroup allows you to add prefixes and suffixes to inputs:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Icons and text addons</li>
+          <li>• Button addons</li>
+          <li>• Keyboard shortcuts display</li>
+          <li>• Currency and units</li>
+          <li>• Inline and block alignment</li>
+        </ul>
+        <InputGroup className="max-w-sm">
+          <div className="px-3 text-sm text-muted-foreground">$</div>
+          <input type="text" placeholder="0.00" className="flex-1 bg-transparent border-0 outline-none px-2" />
+          <div className="px-3 text-sm text-muted-foreground">USD</div>
+        </InputGroup>
+      </div>
+    ),
+  },
+  {
+    name: 'Item',
+    category: 'specialized',
+    description: 'List item component with variants and layouts',
+    importPath: `import { Item, ItemGroup } from '@djangocfg/ui';`,
+    example: `<ItemGroup>
+  <Item variant="outline" size="default">
+    <ItemIcon>
+      <FileIcon />
+    </ItemIcon>
+    <ItemContent>
+      <ItemTitle>Document.pdf</ItemTitle>
+      <ItemDescription>Updated 2 hours ago</ItemDescription>
+    </ItemContent>
+    <ItemAction>
+      <Button variant="ghost" size="sm">View</Button>
+    </ItemAction>
+  </Item>
+</ItemGroup>`,
+    preview: (
+      <div className="p-6 border rounded-md bg-muted/50">
+        <p className="text-sm text-muted-foreground mb-4">
+          Item component for building lists with:
+        </p>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          <li>• Multiple variants (default, outline, muted)</li>
+          <li>• Icon, content, and action slots</li>
+          <li>• Flexible layouts</li>
+          <li>• Separator support</li>
+          <li>• Perfect for file lists, notifications, etc.</li>
+        </ul>
+      </div>
+    ),
+  },
 ];

package/src/utils/logger.ts

@@ -3,7 +3,7 @@ import { createConsola } from 'consola';
 /**
  * Universal logger for @djangocfg/layouts
  * Uses consola for beautiful console logging
- * 
+ *
  * Log levels:
  * - 0: silent
  * - 1: fatal, error
@@ -12,8 +12,10 @@ import { createConsola } from 'consola';
  * - 4: debug
  * - 5: trace, verbose
  */
+const isDevelopment = process.env.NODE_ENV === 'development';
+
 export const logger = createConsola({
-  level: process.env.NODE_ENV === 'production' ? 3 : 4,
+  level: isDevelopment ? 4 : 1,  // dev: debug, production: errors only
 }).withTag('layouts');
 
 // ─────────────────────────────────────────────────────────────────────────