@djangocfg/layouts 1.2.18 → 1.2.20

package/package.json

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

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

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

@@ -94,13 +94,10 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
   const [parentThemeMode, setParentThemeMode] = useState<string | null>(null);
 
   useEffect(() => {
-    // Debug logging (uncomment for debugging)
-    // console.log('[useCfgApp] Hook initializing...');
     setIsMounted(true);
 
     // Check if running in iframe
     const inIframe = window.self !== window.top;
-    // console.log('[useCfgApp] Iframe detection:', { inIframe });
     setIsEmbedded(inIframe);
 
     // Check if running as standalone PWA
@@ -109,85 +106,19 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
     // Get referrer if embedded
     if (inIframe && document.referrer) {
-      // console.log('[useCfgApp] Referrer:', document.referrer);
       setReferrer(document.referrer);
     }
 
-    // Setup resize observer and interval for iframe height updates
-    let resizeObserver: ResizeObserver | null = null;
-    let checkHeightInterval: NodeJS.Timeout | null = null;
-
-    // Notify parent window that iframe is ready
-    if (inIframe) {
-      try {
-        // console.log('[useCfgApp] Sending iframe-ready message to parent');
-        window.parent.postMessage({
-          type: 'iframe-ready',
-          data: {
-            url: window.location.href,
-            referrer: document.referrer
-          }
-        }, '*'); // Use '*' or specific origin for security
-        // console.log('[useCfgApp] iframe-ready message sent');
-      } catch (e) {
-        console.error('[useCfgApp] Failed to notify parent:', e);
-      }
-
-      // Send current content height (both increases and decreases)
-      const sendHeight = () => {
-        try {
-          // Use body.scrollHeight to avoid iframe height feedback loop
-          // document.documentElement.scrollHeight includes iframe's own height!
-          const bodyScrollHeight = document.body.scrollHeight;
-          const bodyOffsetHeight = document.body.offsetHeight;
-          const height = Math.max(bodyScrollHeight, bodyOffsetHeight);
-
-          window.parent.postMessage({
-            type: 'iframe-resize',
-            data: { height }
-          }, '*');
-        } catch (e) {
-          console.error('[useCfgApp] Failed to send height:', e);
-        }
-      };
-
-      // Send height immediately after mount
-      setTimeout(sendHeight, 100);
-
-      // Watch for content size changes using ResizeObserver
-      resizeObserver = new ResizeObserver(() => {
-        sendHeight();
-      });
-
-      // Observe document body for size changes
-      resizeObserver.observe(document.body);
-
-      // Also observe on route changes and after data loads
-      checkHeightInterval = setInterval(sendHeight, 1000);
-    }
-
     // Listen for messages from parent window
     const handleMessage = (event: MessageEvent) => {
-      // console.log('[useCfgApp] Message received:', {
-      //   origin: event.origin,
-      //   type: event.data?.type,
-      //   data: event.data?.data
-      // });
-
-      // Verify origin for security (optional - adjust for your needs)
-      // if (event.origin !== window.location.origin) return;
-
       const { type, data } = event.data || {};
 
       switch (type) {
         case 'parent-auth':
-          // console.log('[useCfgApp] Processing parent-auth message');
           // Receive authentication tokens from parent
           if (data?.authToken && options?.onAuthTokenReceived) {
             try {
-              // console.log('[useCfgApp] Calling onAuthTokenReceived');
               options.onAuthTokenReceived(data.authToken, data.refreshToken);
-              // console.log('[useCfgApp] Auth tokens received from parent');
             } catch (e) {
               console.error('[useCfgApp] Failed to process auth tokens:', e);
             }
@@ -195,19 +126,13 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
           break;
 
         case 'parent-theme':
-          // console.log('[useCfgApp] Processing parent-theme message');
           // Receive theme from parent
           if (data?.theme) {
             try {
-              // console.log('[useCfgApp] Setting theme:', {
-              //   theme: data.theme,
-              //   themeMode: data.themeMode
-              // });
               setParentTheme(data.theme);
               if (data.themeMode) {
                 setParentThemeMode(data.themeMode);
               }
-              // console.log('[useCfgApp] Theme received from parent:', data.theme, 'mode:', data.themeMode);
             } catch (e) {
               console.error('[useCfgApp] Failed to process theme:', e);
             }
@@ -216,31 +141,32 @@ export function useCfgApp(options?: UseCfgAppOptions): UseCfgAppReturn {
 
         case 'parent-resize':
           // Handle parent window resize (optional)
-          // console.log('[useCfgApp] Parent resized:', data);
           break;
 
         default:
-          // if (type) {
-          //   console.log('[useCfgApp] Unknown message type:', type);
-          // }
           break;
       }
     };
 
-    // console.log('[useCfgApp] Adding message event listener');
     window.addEventListener('message', handleMessage);
 
+    // Send iframe-ready since listener is registered
+    if (inIframe) {
+      try {
+        window.parent.postMessage({
+          type: 'iframe-ready',
+          data: {
+            url: window.location.href,
+            referrer: document.referrer
+          }
+        }, '*');
+      } catch (e) {
+        console.error('[useCfgApp] Failed to notify parent about ready state:', e);
+      }
+    }
+
     return () => {
-      // console.log('[useCfgApp] Cleaning up message event listener');
       window.removeEventListener('message', handleMessage);
-
-      // Cleanup resize observer and interval
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-      if (checkHeightInterval) {
-        clearInterval(checkHeightInterval);
-      }
     };
   }, [options]);
 

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

@@ -1,60 +1,53 @@
 /**
  * Header Component
- * Adaptive header that renders mobile or desktop version
+ * Simple unified header for UI documentation
  */
 
 'use client';
 
 import React from 'react';
-import { useIsMobile } from '@djangocfg/ui';
-import { HeaderMobile } from './HeaderMobile';
-import { HeaderDesktop } from './HeaderDesktop';
+import { CopyAIButton } from './CopyAIButton';
 
 export interface HeaderProps {
-  /** Page title (desktop only) */
+  /** Page title */
   title?: string;
-  /** Project name (mobile only) */
+  /** Project name */
   projectName?: string;
-  /** Logo component (mobile only) */
+  /** Logo component */
   logo?: React.ReactNode;
-  /** Is sidebar open (mobile only) */
-  isSidebarOpen?: boolean;
-  /** Toggle sidebar callback (mobile only) */
-  onToggleSidebar?: () => void;
   /** Copy for AI callback - must return string */
   onCopyForAI?: () => string;
 }
 
 /**
  * Header Component
- * Automatically renders mobile or desktop version based on screen size
+ * Displays title and Copy for AI button
  */
 export function Header({
   title = 'UI Component Library',
   projectName = 'Django CFG',
   logo,
-  isSidebarOpen = false,
-  onToggleSidebar,
   onCopyForAI,
 }: HeaderProps) {
-  const isMobile = useIsMobile();
-
-  if (isMobile) {
-    return (
-      <HeaderMobile
-        projectName={projectName}
-        logo={logo}
-        isSidebarOpen={isSidebarOpen}
-        onToggleSidebar={onToggleSidebar}
-        onCopyForAI={onCopyForAI}
-      />
-    );
-  }
-
   return (
-    <HeaderDesktop
-      title={title}
-      onCopyForAI={onCopyForAI}
-    />
+    <header className="w-full border-b bg-background">
+      <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Left: Logo and Title */}
+          <div className="flex items-center gap-3">
+            {logo && <div className="flex-shrink-0">{logo}</div>}
+            <div className="flex flex-col">
+              <h1 className="text-lg font-semibold tracking-tight">{title}</h1>
+              <p className="text-xs text-muted-foreground hidden sm:block">{projectName}</p>
+            </div>
+          </div>
+
+          {/* Right: Copy for AI Button */}
+          {onCopyForAI && (
+            <CopyAIButton onCopyForAI={onCopyForAI} />
+          )}
+        </div>
+      </div>
+    </header>
   );
 }

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

@@ -147,12 +147,13 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
   {
     name: 'Tabs',
     category: 'navigation',
-    description: 'Tab navigation for switching between different views',
+    description: 'Tab navigation for switching between different views. Supports mobile sheet mode, sticky positioning, and auto-responsive behavior.',
     importPath: `import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';`,
-    example: `<Tabs defaultValue="account" className="w-[400px]">
-  <TabsList className="grid w-full grid-cols-2">
-    <TabsTrigger value="account">Account</TabsTrigger>
-    <TabsTrigger value="password">Password</TabsTrigger>
+    example: `// Basic tabs with equal-width tabs
+<Tabs defaultValue="account" className="w-[400px]">
+  <TabsList fullWidth>
+    <TabsTrigger value="account" flexEqual>Account</TabsTrigger>
+    <TabsTrigger value="password" flexEqual>Password</TabsTrigger>
   </TabsList>
   <TabsContent value="account">
     <div className="p-4 border rounded-md">
@@ -164,12 +165,32 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
       <p className="text-sm">Change your password here.</p>
     </div>
   </TabsContent>
+</Tabs>
+
+// Mobile-responsive tabs with sticky positioning
+<Tabs
+  defaultValue="account"
+  mobileSheet
+  mobileTitleText="Settings"
+  mobileSheetTitle="Navigation"
+  sticky
+>
+  <TabsList fullWidth>
+    <TabsTrigger value="account" flexEqual>Account</TabsTrigger>
+    <TabsTrigger value="password" flexEqual>Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">
+    Account content
+  </TabsContent>
+  <TabsContent value="password">
+    Password content
+  </TabsContent>
 </Tabs>`,
     preview: (
       <Tabs defaultValue="account" className="w-[400px]">
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="account">Account</TabsTrigger>
-          <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsList fullWidth>
+          <TabsTrigger value="account" flexEqual>Account</TabsTrigger>
+          <TabsTrigger value="password" flexEqual>Password</TabsTrigger>
         </TabsList>
         <TabsContent value="account">
           <div className="p-4 border rounded-md">

package/src/layouts/UILayout/context/ShowcaseContext.tsx

@@ -1,6 +1,6 @@
 /**
  * Showcase Context
- * Manages navigation state for ComponentShowcaseLayout
+ * Manages navigation state for UILayout
  */
 
 'use client';
@@ -10,9 +10,6 @@ import React, { createContext, useContext, useState, ReactNode } from 'react';
 interface ShowcaseContextValue {
   currentCategory: string;
   setCurrentCategory: (category: string) => void;
-  isSidebarOpen: boolean;
-  toggleSidebar: () => void;
-  closeSidebar: () => void;
 }
 
 const ShowcaseContext = createContext<ShowcaseContextValue | undefined>(undefined);
@@ -24,19 +21,12 @@ interface ShowcaseProviderProps {
 
 export function ShowcaseProvider({ children, defaultCategory = 'overview' }: ShowcaseProviderProps) {
   const [currentCategory, setCurrentCategory] = useState(defaultCategory);
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-
-  const toggleSidebar = () => setIsSidebarOpen(prev => !prev);
-  const closeSidebar = () => setIsSidebarOpen(false);
 
   return (
     <ShowcaseContext.Provider
       value={{
         currentCategory,
         setCurrentCategory,
-        isSidebarOpen,
-        toggleSidebar,
-        closeSidebar,
       }}
     >
       {children}

package/src/layouts/UILayout/core/UIGuideView.tsx

@@ -17,7 +17,7 @@ import { TailwindGuideRenderer } from '../components/TailwindGuideRenderer';
 function UIGuideContent() {
   const { currentCategory, setCurrentCategory } = useShowcase();
 
-  // For overview, show only landing page without layout
+  // For overview, show landing page without layout
   if (currentCategory === 'overview') {
     return <UIGuideLanding />;
   }
@@ -44,7 +44,7 @@ function UIGuideContent() {
         {currentCategory === 'tailwind4' && <TailwindGuideRenderer />}
 
         {/* All other categories use CategoryRenderer */}
-        {currentCategory !== 'tailwind4' && currentCategory !== 'overview' && (
+        {currentCategory !== 'tailwind4' && (
           <CategoryRenderer categoryId={currentCategory} />
         )}
       </div>

package/src/layouts/UILayout/core/UILayout.tsx

@@ -6,11 +6,9 @@
 'use client';
 
 import React from 'react';
-import { Sidebar } from '../components/layout/Sidebar';
+import { Tabs, TabsList, TabsTrigger } from '@djangocfg/ui';
 import { Header } from '../components/layout/Header';
-import { MobileOverlay } from '../components/layout/MobileOverlay';
 import { generateAIContext } from '../config';
-import { useShowcase } from '../context';
 import type { UILayoutProps } from '../types';
 
 
@@ -20,7 +18,7 @@ import type { UILayoutProps } from '../types';
  * Features:
  * - Config-driven: All component data comes from centralized config
  * - "Copy for AI": One-click export of all documentation
- * - Responsive: Mobile-first design with sidebar
+ * - Responsive: Auto-converts to mobile sheet menu on mobile
  * - Type-safe: Full TypeScript support
  *
  * @example
@@ -45,59 +43,58 @@ export function UILayout({
   logo,
   projectName = "Django CFG UI",
 }: UILayoutProps) {
-  const { isSidebarOpen, toggleSidebar, closeSidebar } = useShowcase();
-
-  const handleCategoryChange = (categoryId: string) => {
-    onCategoryChange?.(categoryId);
-    closeSidebar();
-  };
-
   const handleCopyForAI = () => {
     return generateAIContext();
   };
 
   return (
-    <div className="flex bg-background">
-      {/* Mobile Overlay - outside flex container for proper z-index stacking */}
-      <MobileOverlay
-        isOpen={isSidebarOpen}
-        onClose={closeSidebar}
+    <div className="flex flex-col min-h-screen bg-background">
+      {/* Header with Copy for AI button */}
+      <Header
+        title={title}
+        projectName={projectName}
+        logo={logo}
+        onCopyForAI={handleCopyForAI}
       />
 
-      {/* Sidebar with Sticky - parent must be scrollable for react-sticky-box */}
-      <div className="h-full sticky top-0">
-        <Sidebar
-          categories={categories}
-          currentCategory={currentCategory}
-          onCategoryChange={handleCategoryChange}
-          isOpen={isSidebarOpen}
-          projectName={projectName}
-          logo={logo}
-        />
+      {/* Category Navigation Tabs */}
+      <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3">
+        <Tabs
+          value={currentCategory}
+          onValueChange={onCategoryChange}
+          mobileSheet
+          mobileTitleText="UI Library"
+          mobileSheetTitle="Categories"
+          sticky
+        >
+          <TabsList fullWidth className="h-auto flex-wrap">
+            {categories.map((category) => (
+              <TabsTrigger
+                key={category.id}
+                value={category.id}
+                flexEqual
+                className="gap-2 whitespace-nowrap"
+              >
+                {category.icon}
+                <span>{category.label}</span>
+                {category.count !== undefined && (
+                  <span className="ml-1 text-xs opacity-60">({category.count})</span>
+                )}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
       </div>
 
       {/* Main Content */}
-      <main className="flex-1 flex flex-col min-w-0">
-        {/* Header with Copy for AI button */}
-        <Header
-          title={title}
-          projectName={projectName}
-          logo={logo}
-          isSidebarOpen={isSidebarOpen}
-          onToggleSidebar={toggleSidebar}
-          onCopyForAI={handleCopyForAI}
-        />
-
-        {/* Content Area */}
-        <div className="flex-1">
-          <div className="container max-w-7xl mx-auto p-6">
-            {description && (
-              <p className="text-sm text-muted-foreground mb-6">
-                {description}
-              </p>
-            )}
-            {children}
-          </div>
+      <main className="flex-1">
+        <div className="container max-w-7xl mx-auto p-6">
+          {description && (
+            <p className="text-sm text-muted-foreground mb-6">
+              {description}
+            </p>
+          )}
+          {children}
         </div>
       </main>
     </div>

package/src/layouts/UILayout/hooks/index.ts

@@ -3,7 +3,7 @@
  * Custom hooks for UILayout functionality
  */
 
-export { useSidebarState } from './useSidebarState';
 export { useAIExport } from './useAIExport';
 export { useCategoryNavigation } from './useCategoryNavigation';
 export { useComponentSearch } from './useComponentSearch';
+export { useSidebarState } from './useSidebarState';

package/src/layouts/UILayout/types/layout.ts

@@ -33,13 +33,11 @@ export interface UILayoutProps {
  * Defines layout dimensions and behavior
  */
 export interface LayoutConfig {
-  /** Sidebar width in pixels */
-  sidebarWidth?: number;
   /** Header height in pixels */
   headerHeight?: number;
   /** Container max width */
   containerMaxWidth?: string;
-  /** Enable sticky sidebar */
+  /** Enable sticky header */
   stickyHeader?: boolean;
 }