@djangocfg/layouts 1.2.18 → 1.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "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.19",
+    "@djangocfg/og-image": "^1.2.19",
+    "@djangocfg/ui": "^1.2.19",
     "@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.19",
     "@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-02T05:58:03.758Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.18"
+    "version": "1.2.19"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.18"
+    "version": "1.2.19"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.18"
+    "version": "1.2.19"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.18"
+    "version": "1.2.19"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.18"
+    "version": "1.2.19"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.18"
+    "version": "1.2.19"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.18"
+    "version": "1.2.19"
   }
 ];
 

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;
 }