@djangocfg/layouts 1.2.20 → 1.2.22

package/package.json

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

package/src/auth/context/AuthContext.tsx

@@ -93,25 +93,36 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
 
   // Simple profile loading without retry - now uses AccountsContext
   const loadCurrentProfile = useCallback(async (): Promise<void> => {
+    // console.log('[AuthContext] loadCurrentProfile called');
     try {
       // Ensure API clients are properly initialized with current token
-      if (!api.isAuthenticated()) {
+      const isAuth = api.isAuthenticated();
+      const token = api.getToken();
+      // console.log('[AuthContext] isAuthenticated:', isAuth, 'token:', token ? token.substring(0, 20) + '...' : 'null');
+
+      if (!isAuth) {
+        console.warn('[AuthContext] No valid authentication token, throwing error');
         throw new Error('No valid authentication token');
       }
 
+      // console.log('[AuthContext] Refreshing profile from AccountsContext...');
       // Refresh profile from AccountsContext
       const refreshedProfile = await accounts.refreshProfile();
 
       if (refreshedProfile) {
+        // console.log('[AuthContext] Profile loaded successfully:', refreshedProfile.id, 'is_staff:', refreshedProfile.is_staff, 'is_superuser:', refreshedProfile.is_superuser);
         authLogger.info('Profile loaded successfully:', refreshedProfile.id);
       } else {
+        console.warn('[AuthContext] Profile refresh returned undefined - but keeping tokens');
         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);
+      // console.log('[AuthContext] loadCurrentProfile completed, initialized=true');
     } catch (error) {
+      console.error('[AuthContext] Failed to load profile:', error);
       authLogger.error('Failed to load profile:', error);
       // Use global error handler first, fallback to clearing state
       if (!handleGlobalAuthError(error, 'loadCurrentProfile')) {

package/src/layouts/AppLayout/AppLayout.tsx

@@ -110,6 +110,19 @@ function LayoutRouter({
   // Admin routes: Always show loading during SSR and initial client render
   // This prevents hydration mismatch when isAuthenticated differs between server/client
   if (isAdminRoute && !forceLayout) {
+    // In embedded mode (iframe), render AdminLayout immediately to receive postMessage
+    const isEmbedded = typeof window !== 'undefined' && window !== window.parent;
+
+    if (isEmbedded) {
+      // Skip loading checks - AdminLayout will handle auth via postMessage
+      return (
+        <AdminLayout enableParentSync={true}>
+          {children}
+        </AdminLayout>
+      );
+    }
+
+    // Standalone mode: show loading during initialization
     if (!isMounted || isLoading) {
       return (
         <div className="min-h-screen flex items-center justify-center">

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-11-02T09:59:18.371Z
+ * Last updated: 2025-11-03T06:46:24.174Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.20"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.20"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.20"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.20"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.20"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.20"
+    "version": "1.2.22"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.20"
+    "version": "1.2.22"
   }
 ];
 

package/src/layouts/AppLayout/layouts/AdminLayout/AdminLayout.tsx

@@ -82,27 +82,68 @@ export function AdminLayout({
   config,
   enableParentSync = true
 }: AdminLayoutProps) {
-  const { user } = useAuth();
+  const [isMounted, setIsMounted] = React.useState(false);
+  const { user, isLoading, loadCurrentProfile } = useAuth();
+  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading);
+
+  // Track mount state to prevent hydration mismatch
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   // useCfgApp hook is called here to initialize iframe communication
   // Automatically sets tokens in API client when received from parent
   const { isEmbedded } = useCfgApp({
-    onAuthTokenReceived: (authToken, refreshToken) => {
+    onAuthTokenReceived: async (authToken, refreshToken) => {
+      // console.log('[AdminLayout] onAuthTokenReceived called');
+      // console.log('[AdminLayout] authToken:', authToken.substring(0, 20) + '...', 'refreshToken:', refreshToken ? refreshToken.substring(0, 20) + '...' : 'null');
+
       // Always set tokens in API client
       api.setToken(authToken, refreshToken);
+      // console.log('[AdminLayout] Tokens set in API client');
+
+      // Load user profile after setting tokens
+      // console.log('[AdminLayout] Loading user profile...');
+      await loadCurrentProfile();
+      // console.log('[AdminLayout] User profile loaded');
 
       // Call custom handler if provided
       if (config?.onAuthTokenReceived) {
+        // console.log('[AdminLayout] Calling custom onAuthTokenReceived handler');
         config.onAuthTokenReceived(authToken, refreshToken);
       }
     }
   });
 
+  // console.log('[AdminLayout] isEmbedded:', isEmbedded);
+
+  // During SSR and initial render, show loading to prevent hydration mismatch
+  if (!isMounted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-muted-foreground">Loading admin panel...</div>
+      </div>
+    );
+  }
+
+  // Show loading while auth is initializing (waiting for tokens from parent or profile loading)
+  if (isLoading) {
+    // console.log('[AdminLayout] Showing loading state - isLoading:', isLoading);
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-muted-foreground">Loading admin panel...</div>
+      </div>
+    );
+  }
+
   // Check if user has staff or superuser privileges
   const hasAdminAccess = user?.is_staff || user?.is_superuser;
+  // console.log('[AdminLayout] user:', user, 'hasAdminAccess:', hasAdminAccess, 'is_staff:', user?.is_staff, 'is_superuser:', user?.is_superuser);
 
   // Only render AdminLayout features for staff/superuser
   if (!hasAdminAccess) {
+    console.warn('[AdminLayout] Access denied - user does not have admin access');
+    // console.log('[AdminLayout] User details:', JSON.stringify(user, null, 2));
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
         <div className="text-center space-y-4 p-8">

package/src/layouts/AppLayout/layouts/AdminLayout/components/ParentSync.tsx

@@ -9,6 +9,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import { useAuth } from '../../../../../auth';
 import { useThemeContext } from '@djangocfg/ui';
 import { useCfgApp } from '../hooks/useApp';
@@ -47,15 +48,20 @@ export function ParentSync() {
  * Separated to avoid SSR issues during static export
  */
 function ParentSyncClient() {
+  const router = useRouter();
   const auth = useAuth();
   const { setTheme } = useThemeContext();
   const { isEmbedded, isMounted, parentTheme } = useCfgApp();
 
   // 1. Sync theme from parent → iframe
   useEffect(() => {
+    // console.log('[ParentSync] Theme sync effect triggered - isEmbedded:', isEmbedded, 'parentTheme:', parentTheme);
     if (isEmbedded && parentTheme) {
-      // console.log('[ParentSync] 🎨 Syncing theme from parent:', parentTheme);
+      // console.log('[ParentSync] Syncing theme from parent:', parentTheme);
       setTheme(parentTheme);
+      // console.log('[ParentSync] setTheme called with:', parentTheme);
+    } else {
+      // console.log('[ParentSync] Skipping theme sync - isEmbedded:', isEmbedded, 'parentTheme:', parentTheme);
     }
   }, [isEmbedded, parentTheme, setTheme]);
 
@@ -89,94 +95,37 @@ function ParentSyncClient() {
     }
   }, [auth.isAuthenticated, auth.isLoading, auth.user, isEmbedded, isMounted]);
 
-  // 3. Send iframe height changes to parent for auto-resize
+  // 3. iframe-resize removed - was causing log spam
+
+  // 4. Send navigation events to parent (for "Open in New Window" button)
   useEffect(() => {
     // Only send if embedded and mounted
     if (!isEmbedded || !isMounted) {
       return;
     }
 
-    // Function to send height to parent
-    const sendHeight = () => {
-      const height = document.documentElement.scrollHeight;
-      // console.log('[ParentSync] 📏 Sending height to parent:', height);
-
+    const handleRouteChange = (url: string) => {
       try {
         window.parent.postMessage({
-          type: 'iframe-resize',
-          data: { height }
+          type: 'iframe-navigation',
+          data: { path: url }
         }, '*');
       } catch (e) {
-        console.error('[ParentSync] ❌ Failed to send height:', e);
+        console.error('[ParentSync] Failed to send navigation event:', e);
       }
     };
 
-    // Send initial height
-    sendHeight();
+    // Listen to Next.js router events
+    router.events.on('routeChangeComplete', handleRouteChange);
 
-    // Watch for content height changes with ResizeObserver
-    const resizeObserver = new ResizeObserver(() => {
-      sendHeight();
-    });
-
-    // Observe body element for size changes
-    resizeObserver.observe(document.body);
+    // Send initial route
+    handleRouteChange(router.asPath);
 
     // Cleanup
     return () => {
-      resizeObserver.disconnect();
+      router.events.off('routeChangeComplete', handleRouteChange);
     };
-  }, [isEmbedded, isMounted]);
-
-  // 4. Send navigation events to parent (for "Open in New Window" button)
-  useEffect(() => {
-    // Only send if embedded and mounted
-    if (!isEmbedded || !isMounted) {
-      return;
-    }
-
-    // Import Next.js router dynamically
-    import('next/router').then(({ default: Router }) => {
-      const handleRouteChange = (url: string) => {
-        // console.log('[ParentSync] 🔗 Route changed:', url);
-
-        try {
-          window.parent.postMessage({
-            type: 'iframe-navigation',
-            data: { path: url }
-          }, '*');
-        } catch (e) {
-          console.error('[ParentSync] ❌ Failed to send navigation event:', e);
-        }
-
-        // Also send height update after route change
-        setTimeout(() => {
-          const height = document.documentElement.scrollHeight;
-          try {
-            window.parent.postMessage({
-              type: 'iframe-resize',
-              data: { height }
-            }, '*');
-          } catch (e) {
-            console.error('[ParentSync] ❌ Failed to send height:', e);
-          }
-        }, 100);
-      };
-
-      // Listen to Next.js router events
-      Router.events.on('routeChangeComplete', handleRouteChange);
-
-      // Send initial route
-      handleRouteChange(Router.asPath);
-
-      // Cleanup
-      return () => {
-        Router.events.off('routeChangeComplete', handleRouteChange);
-      };
-    }).catch(err => {
-      console.warn('[ParentSync] Failed to load next/router:', err);
-    });
-  }, [isEmbedded, isMounted]);
+  }, [isEmbedded, isMounted, router]);
 
   // This component doesn't render anything
   return null;

package/src/layouts/AppLayout/layouts/AdminLayout/hooks/useApp.ts

@@ -111,21 +111,36 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
     // Listen for messages from parent window
     const handleMessage = (event: MessageEvent) => {
+      // console.log('[useCfgApp] RAW message event:', {
+      //   origin: event.origin,
+      //   source: event.source === window.parent ? 'parent' : 'other',
+      //   dataType: typeof event.data,
+      //   data: event.data
+      // });
+
       const { type, data } = event.data || {};
+      // console.log('[useCfgApp] Received message:', type, data);
 
       switch (type) {
         case 'parent-auth':
+          // console.log('[useCfgApp] parent-auth message received');
           // Receive authentication tokens from parent
           if (data?.authToken && options?.onAuthTokenReceived) {
+            // console.log('[useCfgApp] Auth tokens found, calling onAuthTokenReceived callback');
+            // console.log('[useCfgApp] authToken:', data.authToken.substring(0, 20) + '...', 'refreshToken:', data.refreshToken ? data.refreshToken.substring(0, 20) + '...' : 'null');
             try {
               options.onAuthTokenReceived(data.authToken, data.refreshToken);
+              // console.log('[useCfgApp] onAuthTokenReceived callback completed successfully');
             } catch (e) {
               console.error('[useCfgApp] Failed to process auth tokens:', e);
             }
+          } else {
+            console.warn('[useCfgApp] parent-auth message received but authToken or callback missing:', { hasToken: !!data?.authToken, hasCallback: !!options?.onAuthTokenReceived });
           }
           break;
 
         case 'parent-theme':
+          // console.log('[useCfgApp] parent-theme message received:', data?.theme);
           // Receive theme from parent
           if (data?.theme) {
             try {
@@ -133,26 +148,25 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
               if (data.themeMode) {
                 setParentThemeMode(data.themeMode);
               }
+              // console.log('[useCfgApp] Theme set successfully:', data.theme);
             } catch (e) {
               console.error('[useCfgApp] Failed to process theme:', e);
             }
           }
           break;
 
-        case 'parent-resize':
-          // Handle parent window resize (optional)
-          break;
-
         default:
           break;
       }
     };
 
     window.addEventListener('message', handleMessage);
+    // console.log('[useCfgApp] Message listener registered, isEmbedded:', inIframe);
 
     // Send iframe-ready since listener is registered
     if (inIframe) {
       try {
+        // console.log('[useCfgApp] Sending iframe-ready message to parent');
         window.parent.postMessage({
           type: 'iframe-ready',
           data: {
@@ -160,9 +174,12 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
             referrer: document.referrer
           }
         }, '*');
+        // console.log('[useCfgApp] iframe-ready message sent');
       } catch (e) {
         console.error('[useCfgApp] Failed to notify parent about ready state:', e);
       }
+    } else {
+      // console.log('[useCfgApp] Not in iframe, skipping iframe-ready message');
     }
 
     return () => {

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

@@ -47,7 +47,7 @@ export function DashboardHeader({ isAdmin = false }: DashboardHeaderProps) {
 
   // Notification handler - TODO: implement notification system
   const handleNotificationClick = () => {
-    console.log('Notifications clicked');
+    // console.log('Notifications clicked');
   };
 
   return (

package/src/layouts/UILayout/TOOLS_INTEGRATION.md

@@ -0,0 +1,216 @@
+# Developer Tools Integration
+
+## Overview
+
+Successfully integrated three developer tool components into the UILayout showcase:
+
+1. **JsonTree** - Interactive JSON viewer with expand/collapse functionality
+2. **PrettyCode** - Syntax-highlighted code display
+3. **Mermaid** - Diagram renderer with fullscreen support
+
+## Changes Made
+
+### 1. Created Tools Configuration
+
+**File**: `config/components/tools.config.tsx`
+
+- Defined 3 component configurations with examples and previews
+- Added sample data for demonstrations
+- Included comprehensive usage examples
+
+### 2. Updated Components Index
+
+**File**: `config/components/index.ts`
+
+- Added `TOOLS_COMPONENTS` export
+- Integrated tools into `COMPONENTS_CONFIG` array
+- Tools now available in component registry
+
+### 3. Added Developer Tools Category
+
+**File**: `config/categories.config.tsx`
+
+- Created new "Developer Tools" category
+- Added Wrench icon from lucide-react
+- Positioned between "Specialized" and "Blocks" categories
+- Description: "Developer utilities: JSON viewer, code syntax highlighting, Mermaid diagrams"
+
+### 4. Updated Tools Exports
+
+**File**: `packages/ui/src/tools/index.ts`
+
+- Ensured all tools are properly exported as named exports
+- Exported TypeScript types (Language, JsonTreeConfig)
+
+## Component Features
+
+### JsonTree
+
+**Features:**
+- Expand/collapse all functionality
+- Smart auto-expansion based on depth and collection size
+- Collection info display (array length, object keys count)
+- Copy to clipboard
+- Download as JSON file
+- Theme-aware colors using CSS variables
+- String truncation for long values
+- Configurable expansion limits
+
+**Configuration Options:**
+- `maxAutoExpandDepth` - Maximum depth to auto-expand (default: 2)
+- `maxAutoExpandArrayItems` - Max array items to auto-expand (default: 10)
+- `maxAutoExpandObjectKeys` - Max object keys to auto-expand (default: 5)
+- `maxStringLength` - String truncation threshold (default: 200)
+- `collectionLimit` - Collection size limit for performance (default: 50)
+- `showCollectionInfo` - Display collection metadata
+- `showExpandControls` - Show expand/collapse buttons
+- `showActionButtons` - Show copy/download buttons
+
+### PrettyCode
+
+**Features:**
+- Syntax highlighting with Prism
+- Automatic language detection
+- Theme support (dark/light)
+- Inline and block modes
+- Language badge display
+- Support for 15+ languages
+- Custom background colors
+- JSON auto-formatting
+
+**Supported Languages:**
+- JavaScript/TypeScript
+- Python
+- Bash/Shell
+- JSON, YAML, XML
+- HTML, CSS
+- SQL
+- Markdown
+- And more...
+
+### Mermaid
+
+**Features:**
+- Fullscreen modal view
+- Click to expand
+- ESC key to close
+- Theme-aware rendering
+- Semantic color variables
+- Support for all Mermaid diagram types
+- Responsive SVG sizing
+- Error handling with user feedback
+
+**Supported Diagrams:**
+- Flowchart / Graph
+- Sequence diagram
+- Class diagram
+- State diagram
+- Entity Relationship diagram
+- User Journey
+- Gantt chart
+- Pie chart
+- Git graph
+
+## Usage in UILayout
+
+The tools are now accessible through the UILayout navigation:
+
+1. Navigate to **Developer Tools** category in sidebar
+2. Click on any tool (JsonTree, PrettyCode, Mermaid)
+3. View live preview and usage examples
+4. Copy code examples for use in your project
+
+## Import Examples
+
+```tsx
+// Individual imports
+import { JsonTree } from '@djangocfg/ui';
+import { PrettyCode } from '@djangocfg/ui';
+import { Mermaid } from '@djangocfg/ui';
+
+// All at once
+import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
+```
+
+## Preview Examples
+
+### JsonTree Preview
+```tsx
+<JsonTree
+  title="User Data"
+  data={{
+    user: {
+      id: 1,
+      name: "John Doe",
+      profile: { bio: "Software engineer" }
+    }
+  }}
+  config={{
+    maxAutoExpandDepth: 2,
+    showCollectionInfo: true,
+    showExpandControls: true,
+  }}
+/>
+```
+
+### PrettyCode Preview
+```tsx
+<PrettyCode
+  data={pythonCode}
+  language="python"
+/>
+```
+
+### Mermaid Preview
+```tsx
+<Mermaid
+  chart={`
+    graph TD
+      A[Start] --> B{Decision}
+      B -->|Yes| C[OK]
+      B -->|No| D[End]
+  `}
+/>
+```
+
+## File Structure
+
+```
+UILayout/
+├── config/
+│   ├── components/
+│   │   ├── tools.config.tsx        # NEW - Tools configurations
+│   │   └── index.ts                # UPDATED - Added tools export
+│   └── categories.config.tsx       # UPDATED - Added tools category
+└── TOOLS_INTEGRATION.md           # THIS FILE
+```
+
+## Testing
+
+To verify the integration:
+
+1. Start the development server
+2. Navigate to UILayout showcase
+3. Check sidebar for "Developer Tools" category
+4. Verify all 3 components render correctly
+5. Test interactive features:
+   - JsonTree: expand/collapse, copy, download
+   - PrettyCode: syntax highlighting in different themes
+   - Mermaid: fullscreen view, ESC key close
+
+## Next Steps
+
+Potential enhancements:
+- Add search functionality to JsonTree
+- Add more code language examples to PrettyCode
+- Add more diagram type examples to Mermaid
+- Create composite examples combining multiple tools
+- Add performance benchmarks section
+
+## Notes
+
+- All components are theme-aware using CSS variables
+- All components support both light and dark modes
+- All components are fully responsive
+- No breaking changes to existing components
+- Backward compatible with existing UILayout structure

package/src/layouts/UILayout/config/categories.config.tsx

@@ -16,6 +16,7 @@ import {
   Boxes,
   Code2,
   Palette,
+  Wrench,
 } from 'lucide-react';
 import { getComponentCount } from './components';
 
@@ -83,6 +84,13 @@ export const CATEGORIES: ComponentCategory[] = [
     count: getComponentCount('specialized'),
     description: 'Advanced components like sidebar navigation and image handling',
   },
+  {
+    id: 'tools',
+    label: 'Developer Tools',
+    icon: <Wrench className="h-4 w-4" />,
+    count: getComponentCount('tools'),
+    description: 'Developer utilities: JSON viewer, code syntax highlighting, Mermaid diagrams',
+  },
   {
     id: 'blocks',
     label: 'Blocks',

package/src/layouts/UILayout/config/components/index.ts

@@ -11,6 +11,7 @@ export { OVERLAY_COMPONENTS } from './overlay.config';
 export { FEEDBACK_COMPONENTS } from './feedback.config';
 export { DATA_COMPONENTS } from './data.config';
 export { SPECIALIZED_COMPONENTS } from './specialized.config';
+export { TOOLS_COMPONENTS } from './tools.config';
 export { BLOCKS } from './blocks.config';
 export { HOOKS } from './hooks.config';
 
@@ -21,6 +22,7 @@ import { OVERLAY_COMPONENTS } from './overlay.config';
 import { FEEDBACK_COMPONENTS } from './feedback.config';
 import { DATA_COMPONENTS } from './data.config';
 import { SPECIALIZED_COMPONENTS } from './specialized.config';
+import { TOOLS_COMPONENTS } from './tools.config';
 import { BLOCKS } from './blocks.config';
 import { HOOKS } from './hooks.config';
 import type { ComponentConfig } from './types';
@@ -36,6 +38,7 @@ export const COMPONENTS_CONFIG: ComponentConfig[] = [
   ...FEEDBACK_COMPONENTS,
   ...DATA_COMPONENTS,
   ...SPECIALIZED_COMPONENTS,
+  ...TOOLS_COMPONENTS,
   ...BLOCKS,
   ...HOOKS,
 ];

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

@@ -0,0 +1,204 @@
+/**
+ * Developer Tools Components Configuration
+ */
+
+import React from 'react';
+import { JsonTree, PrettyCode, Mermaid } from '@djangocfg/ui';
+import type { ComponentConfig } from './types';
+
+// Sample data for demos
+const sampleJsonData = {
+  user: {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    profile: {
+      bio: "Software engineer",
+      location: "San Francisco",
+      interests: ["coding", "music", "travel"]
+    },
+    posts: [
+      { id: 1, title: "First Post", views: 120 },
+      { id: 2, title: "Second Post", views: 89 }
+    ]
+  },
+  settings: {
+    theme: "dark",
+    notifications: true,
+    language: "en"
+  }
+};
+
+const samplePythonCode = `def fibonacci(n):
+    """Calculate the nth Fibonacci number."""
+    if n <= 1:
+        return n
+    return fibonacci(n - 1) + fibonacci(n - 2)
+
+# Example usage
+result = fibonacci(10)
+print(f"The 10th Fibonacci number is: {result}")`;
+
+const sampleMermaidChart = `graph TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]`;
+
+export const TOOLS_COMPONENTS: ComponentConfig[] = [
+  {
+    name: 'JsonTree',
+    category: 'tools',
+    description: 'Interactive JSON tree viewer with expand/collapse, search, and export functionality',
+    importPath: `import { JsonTree } from '@djangocfg/ui';`,
+    example: `<JsonTree
+  title="User Data"
+  data={{
+    user: {
+      id: 1,
+      name: "John Doe",
+      email: "john@example.com",
+      profile: {
+        bio: "Software engineer",
+        interests: ["coding", "music"]
+      }
+    }
+  }}
+  config={{
+    maxAutoExpandDepth: 2,
+    showCollectionInfo: true,
+    showExpandControls: true,
+    showActionButtons: true,
+  }}
+/>`,
+    preview: (
+      <div className="h-[500px]">
+        <JsonTree
+          title="User Data"
+          data={sampleJsonData}
+          config={{
+            maxAutoExpandDepth: 2,
+            showCollectionInfo: true,
+            showExpandControls: true,
+            showActionButtons: true,
+          }}
+        />
+      </div>
+    ),
+  },
+  {
+    name: 'PrettyCode',
+    category: 'tools',
+    description: 'Syntax-highlighted code display with automatic language detection and theme support',
+    importPath: `import { PrettyCode } from '@djangocfg/ui';`,
+    example: `// Code as string
+<PrettyCode
+  data={pythonCode}
+  language="python"
+/>
+
+// JSON object (auto-formatted)
+<PrettyCode
+  data={{ user: "John", age: 30 }}
+  language="json"
+/>
+
+// Inline code
+<PrettyCode
+  data="const x = 42;"
+  language="javascript"
+  inline
+/>`,
+    preview: (
+      <div className="space-y-4">
+        {/* Block code example */}
+        <div className="h-[300px]">
+          <PrettyCode
+            data={samplePythonCode}
+            language="python"
+          />
+        </div>
+
+        {/* Inline code example */}
+        <div className="p-4 border rounded-md bg-muted/50">
+          <p className="text-sm text-muted-foreground mb-2">
+            Inline code example:
+          </p>
+          <div className="flex items-center gap-2">
+            <span className="text-sm">Run</span>
+            <PrettyCode
+              data="npm install @djangocfg/ui"
+              language="bash"
+              inline
+            />
+            <span className="text-sm">to install</span>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    name: 'Mermaid',
+    category: 'tools',
+    description: 'Interactive Mermaid diagram renderer with fullscreen view and theme support',
+    importPath: `import { Mermaid } from '@djangocfg/ui';`,
+    example: `<Mermaid
+  chart={\`
+    graph TD
+      A[Start] --> B{Is it?}
+      B -->|Yes| C[OK]
+      C --> D[Rethink]
+      D --> B
+      B -->|No| E[End]
+  \`}
+/>
+
+// Sequence diagram
+<Mermaid
+  chart={\`
+    sequenceDiagram
+      participant A as Alice
+      participant B as Bob
+      A->>B: Hello Bob!
+      B->>A: Hello Alice!
+  \`}
+/>
+
+// Flowchart
+<Mermaid
+  chart={\`
+    flowchart LR
+      A[Hard edge] -->|Link text| B(Round edge)
+      B --> C{Decision}
+      C -->|One| D[Result one]
+      C -->|Two| E[Result two]
+  \`}
+/>`,
+    preview: (
+      <div className="space-y-4">
+        <Mermaid chart={sampleMermaidChart} />
+
+        <div className="p-4 border rounded-md bg-muted/50">
+          <p className="text-sm text-muted-foreground mb-2">
+            Supported diagram types:
+          </p>
+          <ul className="space-y-1 text-sm text-muted-foreground">
+            <li>• Flowchart / Graph</li>
+            <li>• Sequence diagram</li>
+            <li>• Class diagram</li>
+            <li>• State diagram</li>
+            <li>• Entity Relationship diagram</li>
+            <li>• User Journey</li>
+            <li>• Gantt chart</li>
+            <li>• Pie chart</li>
+            <li>• Git graph</li>
+          </ul>
+          <p className="text-xs text-muted-foreground mt-3">
+            Click on diagram to view in fullscreen mode
+          </p>
+        </div>
+      </div>
+    ),
+  },
+];