@djangocfg/layouts 1.2.58 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.58",
+  "version": "1.4.1",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.58",
-    "@djangocfg/og-image": "^1.2.58",
-    "@djangocfg/ui": "^1.2.58",
+    "@djangocfg/api": "^1.4.1",
+    "@djangocfg/og-image": "^1.4.1",
+    "@djangocfg/ui": "^1.4.1",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.58",
+    "@djangocfg/typescript-config": "^1.4.1",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/index.ts

@@ -10,6 +10,9 @@ export * from './auth';
 // Layout components
 export * from './layouts';
 
+// Types
+export * from './types';
+
 // Snippets - Reusable UI components
 export * from './snippets';
 

package/src/layouts/AppLayout/AppLayout.tsx

@@ -29,17 +29,17 @@ import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import { AppContextProvider } from './context';
 import { CoreProviders } from './providers';
-import { Seo, PageProgress, ErrorBoundary } from './components';
+import { Seo, PageProgress, ErrorBoundary, UpdateNotifier } from './components';
 import { PublicLayout } from './layouts/PublicLayout';
 import { PrivateLayout } from './layouts/PrivateLayout';
 import { AuthLayout } from './layouts/AuthLayout';
 import { PagePreloader } from './layouts/AdminLayout/components';
 import { determineLayoutMode, getRedirectUrl } from './utils';
 import { useAuth } from '../../auth';
-import type { AppLayoutConfig } from './types';
+import type { AppLayoutConfig, PageWithLayout, LayoutMode } from './types';
 import type { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '../../validation';
-import type { PageWithConfig } from '../../types/pageConfig';
 import { determinePageConfig } from '../../types/pageConfig';
+import packageJson from '../../../package.json';
 
 // Dynamic import for AdminLayout to prevent SSR hydration issues
 const AdminLayout = dynamic(
@@ -51,31 +51,16 @@ export interface AppLayoutProps {
   children: ReactNode;
   config: AppLayoutConfig;
   /**
-   * Next.js page component (for reading pageConfig)
+   * Next.js page component (for reading pageConfig and layout preferences)
+   * Pass Component from _app.tsx to enable smart layout detection
    * @example component={Component}
    */
-  component?: PageWithConfig | any;
+  component?: PageWithLayout | any;
   /**
    * Next.js page props (for reading dynamic pageConfig from SSR)
    * @example pageProps={pageProps}
    */
   pageProps?: Record<string, any>;
-  /**
-   * Disable layout rendering (Navigation, Sidebar, Footer)
-   * Only providers and SEO remain active
-   * Useful for custom layouts like landing pages
-   */
-  disableLayout?: boolean;
-  /**
-   * Force a specific layout regardless of route
-   * Overrides automatic layout detection
-   *
-   * @example forceLayout="public" - always use PublicLayout
-   * @example forceLayout="private" - always use PrivateLayout
-   * @example forceLayout="auth" - always use AuthLayout
-   * @example forceLayout="admin" - Django CFG admin mode with iframe integration
-   */
-  forceLayout?: 'public' | 'private' | 'auth' | 'admin';
   /**
    * Font family to apply globally
    * Accepts Next.js font object or CSS font-family string
@@ -84,11 +69,11 @@ export interface AppLayoutProps {
    */
   fontFamily?: string;
   /**
-   * Show package versions button in sidebar footer
-   * @default false
-   * @example showPackageVersions={true}
+   * Show update notifier (checks npm for new versions)
+   * @default true
+   * @example showUpdateNotifier={false}
    */
-  showPackageVersions?: boolean;
+  showUpdateNotifier?: boolean;
   /**
    * Validation error tracking configuration
    * @default { enabled: true, showToast: true, maxErrors: 50 }
@@ -109,18 +94,18 @@ export interface AppLayoutProps {
 /**
  * Layout Router Component
  *
- * Determines which layout to use based on route
- * Uses AppContext - no props passed down!
+ * Smart layout detection with priority:
+ * 1. component.getLayout (custom layout function)
+ * 2. component.layoutMode ('none' | 'public' | 'private' | 'auth' | 'admin')
+ * 3. Automatic route-based detection
  */
 function LayoutRouter({
   children,
-  disableLayout,
-  forceLayout,
+  component,
   config
 }: {
   children: ReactNode;
-  disableLayout?: boolean;
-  forceLayout?: 'public' | 'private' | 'auth' | 'admin';
+  component?: PageWithLayout | any;
   config: AppLayoutConfig;
 }) {
   const router = useRouter();
@@ -132,8 +117,18 @@ function LayoutRouter({
     setIsMounted(true);
   }, []);
 
-  // If layout is disabled, render children directly (providers still active!)
-  if (disableLayout) {
+  // Priority 1: Check if page has custom getLayout function
+  const hasCustomLayout = component && typeof component.getLayout === 'function';
+  if (hasCustomLayout) {
+    // Use custom layout - render children directly (getLayout applied in _app.tsx)
+    return <>{children}</>;
+  }
+
+  // Priority 2: Check component.layoutMode
+  const componentLayoutMode = component?.layoutMode;
+
+  // If layoutMode is 'none', render children directly
+  if (componentLayoutMode === 'none') {
     return <>{children}</>;
   }
 
@@ -144,7 +139,7 @@ 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) {
+  if ((isAdminRoute && !componentLayoutMode) || componentLayoutMode === 'admin') {
     // In embedded mode (iframe), render AdminLayout immediately to receive postMessage
     const isEmbedded = typeof window !== 'undefined' && window !== window.parent;
 
@@ -185,7 +180,7 @@ function LayoutRouter({
 
   // 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 ((isPrivateRoute && !componentLayoutMode) || componentLayoutMode === 'private') {
     if (!isMounted || isLoading) {
       return <PagePreloader />;
     }
@@ -206,11 +201,12 @@ function LayoutRouter({
     return <PrivateLayout>{children}</PrivateLayout>;
   }
 
-  // Determine layout mode for non-private routes
+  // Determine layout mode for non-private/admin routes
   const getLayoutMode = (): 'public' | 'auth' | 'admin' => {
-    if (forceLayout === 'auth') return 'auth';
-    if (forceLayout === 'public') return 'public';
-    if (forceLayout === 'admin') return 'admin';
+    // Priority: componentLayoutMode > auto-detect
+    if (componentLayoutMode === 'auth') return 'auth';
+    if (componentLayoutMode === 'public') return 'public';
+    if (componentLayoutMode === 'admin') return 'admin';
     if (isAuthRoute) return 'auth';
     return 'public';
   };
@@ -250,33 +246,35 @@ function LayoutRouter({
 /**
  * AppLayout - Main Component
  *
- * Single entry point for all layout logic
+ * Single entry point for all layout logic with smart layout detection
  * Wrap your app once in _app.tsx
  *
  * @example
  * ```tsx
- * // With layout (default - auto-detect)
- * <AppLayout config={appLayoutConfig}>
- *   <Component {...pageProps} />
+ * // Smart auto-detection (recommended)
+ * <AppLayout config={appLayoutConfig} component={Component} pageProps={pageProps}>
+ *   {Component.getLayout ? Component.getLayout(<Component {...pageProps} />) : <Component {...pageProps} />}
  * </AppLayout>
  *
  * // With custom font
- * <AppLayout config={appLayoutConfig} fontFamily={manrope.style.fontFamily}>
+ * <AppLayout config={appLayoutConfig} component={Component} fontFamily={inter.style.fontFamily}>
  *   <Component {...pageProps} />
  * </AppLayout>
  *
- * // Without layout (providers still active)
- * <AppLayout config={appLayoutConfig} disableLayout>
- *   <CustomLandingPage />
- * </AppLayout>
+ * // Page with custom layout (in page file)
+ * const Page: PageWithLayout = () => <div>Content</div>;
+ * Page.getLayout = (page) => <CustomLayout>{page}</CustomLayout>;
  *
- * // Force public layout for all pages
- * <AppLayout config={appLayoutConfig} forceLayout="public">
- *   <Component {...pageProps} />
- * </AppLayout>
+ * // Page with forced layout mode (in page file)
+ * const DashboardPage: PageWithLayout = () => <div>Dashboard</div>;
+ * DashboardPage.layoutMode = 'private';
+ *
+ * // Page without layout (in page file)
+ * const LandingPage: PageWithLayout = () => <FullPageDesign />;
+ * LandingPage.layoutMode = 'none';
  * ```
  */
-export function AppLayout({ children, config, component, pageProps, disableLayout = false, forceLayout, fontFamily, showPackageVersions, validation, cors, network }: AppLayoutProps) {
+export function AppLayout({ children, config, component, pageProps, fontFamily, showUpdateNotifier, validation, cors, network }: AppLayoutProps) {
   const router = useRouter();
 
   // Check if ErrorBoundary is enabled (default: true)
@@ -302,7 +300,7 @@ export function AppLayout({ children, config, component, pageProps, disableLayou
       };
 
   const appContent = (
-    <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
+    <AppContextProvider config={config} showUpdateNotifier={showUpdateNotifier}>
       {/* SEO Meta Tags */}
       <Seo
         pageConfig={finalPageConfig}
@@ -310,11 +308,14 @@ export function AppLayout({ children, config, component, pageProps, disableLayou
         siteUrl={config.app.siteUrl}
       />
 
+      {/* Update Notifier */}
+      <UpdateNotifier enabled={showUpdateNotifier} currentVersion={packageJson.version} />
+
       {/* Loading Progress Bar */}
       <PageProgress />
 
       {/* Smart Layout Router */}
-      <LayoutRouter disableLayout={disableLayout} forceLayout={forceLayout} config={config}>
+      <LayoutRouter component={component} config={config}>
         {children}
       </LayoutRouter>
     </AppContextProvider>

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

@@ -0,0 +1,170 @@
+/**
+ * Update Notifier Component
+ *
+ * Checks npm registry for @djangocfg package updates
+ * Shows toast notification when new version is available
+ * Uses localStorage to cache check and avoid spam
+ */
+
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { toast } from '@djangocfg/ui/hooks';
+
+const PACKAGE_NAME = '@djangocfg/layouts';
+const CHECK_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
+const CACHE_KEY = 'djangocfg_update_check';
+
+interface UpdateCheckCache {
+  lastCheck: number;
+  latestVersion: string;
+  dismissed: boolean;
+}
+
+export interface UpdateNotifierProps {
+  /**
+   * Enable update notifications
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Current package version (auto-injected from package.json)
+   */
+  currentVersion?: string;
+}
+
+/**
+ * Compare semver versions
+ * Returns true if newVersion > currentVersion
+ */
+function isNewerVersion(current: string, latest: string): boolean {
+  const parseCurrent = current.split('.').map(Number);
+  const parseLatest = latest.split('.').map(Number);
+
+  for (let i = 0; i < 3; i++) {
+    if (parseLatest[i] > parseCurrent[i]) return true;
+    if (parseLatest[i] < parseCurrent[i]) return false;
+  }
+  return false;
+}
+
+/**
+ * Fetch latest version from npm registry
+ */
+async function fetchLatestVersion(): Promise<string | null> {
+  try {
+    const response = await fetch(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' },
+    });
+
+    if (!response.ok) return null;
+
+    const data = await response.json();
+    return data.version || null;
+  } catch (error) {
+    console.warn('[UpdateNotifier] Failed to check for updates:', error);
+    return null;
+  }
+}
+
+/**
+ * Get cached update check data
+ */
+function getCache(): UpdateCheckCache | null {
+  if (typeof window === 'undefined') return null;
+
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (!cached) return null;
+
+    const data: UpdateCheckCache = JSON.parse(cached);
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Save update check data to cache
+ */
+function setCache(data: UpdateCheckCache): void {
+  if (typeof window === 'undefined') return;
+
+  try {
+    localStorage.setItem(CACHE_KEY, JSON.stringify(data));
+  } catch (error) {
+    console.warn('[UpdateNotifier] Failed to cache update check:', error);
+  }
+}
+
+export function UpdateNotifier({ enabled = false, currentVersion }: UpdateNotifierProps) {
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    if (!enabled || checked || typeof window === 'undefined') return;
+    if (!currentVersion) return;
+
+    const checkForUpdates = async () => {
+      // Check cache first
+      const cache = getCache();
+      const now = Date.now();
+
+      // If we checked recently, skip
+      if (cache && (now - cache.lastCheck) < CHECK_INTERVAL_MS) {
+        // Show notification if there's an update and it wasn't dismissed
+        if (cache.latestVersion && !cache.dismissed && isNewerVersion(currentVersion, cache.latestVersion)) {
+          showUpdateNotification(currentVersion, cache.latestVersion);
+        }
+        setChecked(true);
+        return;
+      }
+
+      // Fetch latest version from npm
+      const latestVersion = await fetchLatestVersion();
+
+      if (!latestVersion) {
+        setChecked(true);
+        return;
+      }
+
+      // Update cache
+      setCache({
+        lastCheck: now,
+        latestVersion,
+        dismissed: false,
+      });
+
+      // Show notification if newer version available
+      if (isNewerVersion(currentVersion, latestVersion)) {
+        showUpdateNotification(currentVersion, latestVersion);
+      }
+
+      setChecked(true);
+    };
+
+    // Check after a short delay to not block initial render
+    const timer = setTimeout(checkForUpdates, 2000);
+
+    return () => clearTimeout(timer);
+  }, [enabled, checked, currentVersion]);
+
+  return null; // This component doesn't render anything
+}
+
+/**
+ * Show update notification toast
+ */
+function showUpdateNotification(currentVersion: string, latestVersion: string) {
+  toast({
+    title: `📦 Update Available`,
+    description: `New version ${latestVersion} of @djangocfg packages is available. You're using ${currentVersion}. Run: pnpm update @djangocfg/layouts@latest`,
+    duration: 10000,
+  });
+
+  // Mark as dismissed in cache after showing
+  const cache = getCache();
+  if (cache) {
+    setCache({ ...cache, dismissed: true });
+  }
+}

package/src/layouts/AppLayout/components/UpdateNotifier/index.ts

@@ -0,0 +1,2 @@
+export { UpdateNotifier } from './UpdateNotifier';
+export type { UpdateNotifierProps } from './UpdateNotifier';

package/src/layouts/AppLayout/components/index.ts

@@ -5,7 +5,7 @@
 export { default as Seo } from './Seo';
 export { default as PageProgress } from './PageProgress';
 export { ErrorBoundary } from './ErrorBoundary';
-export { PackageVersions, getPackageVersions, getPackageVersion } from './PackageVersions';
+export { UpdateNotifier } from './UpdateNotifier';
 export { UserMenu } from './UserMenu';
-export type { PackageInfo } from './PackageVersions';
+export type { UpdateNotifierProps } from './UpdateNotifier';
 export type { UserMenuProps } from './UserMenu';

package/src/layouts/AppLayout/context/AppContext.tsx

@@ -43,7 +43,7 @@ interface AppContextValue {
   toggleSidebar: () => void;
 
   // Features
-  showPackageVersions?: boolean;
+  showUpdateNotifier?: boolean;
 }
 
 // ═══════════════════════════════════════════════════════════════════════════
@@ -59,7 +59,7 @@ const AppContext = createContext<AppContextValue | null>(null);
 export interface AppContextProviderProps {
   children: ReactNode;
   config: AppLayoutConfig;
-  showPackageVersions?: boolean;
+  showUpdateNotifier?: boolean;
 }
 
 /**
@@ -68,7 +68,7 @@ export interface AppContextProviderProps {
  * Provides unified application context to all child components
  * Manages layout state and exposes configuration
  */
-export function AppContextProvider({ children, config, showPackageVersions }: AppContextProviderProps) {
+export function AppContextProvider({ children, config, showUpdateNotifier }: AppContextProviderProps) {
   const router = useRouter();
 
   // UI state
@@ -117,7 +117,7 @@ export function AppContextProvider({ children, config, showPackageVersions }: Ap
     collapseSidebar,
     expandSidebar,
     toggleSidebar,
-    showPackageVersions,
+    showUpdateNotifier,
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

package/src/layouts/AppLayout/index.ts

@@ -1,7 +1,7 @@
 /**
  * AppLayout - Unified Application Layout System
  *
- * Single self-sufficient component for all layout needs
+ * Smart layout system with automatic detection
  */
 
 // Main component
@@ -19,6 +19,7 @@ export type {
   NavigationSection,
   DashboardMenuItem,
   DashboardMenuGroup,
+  PageWithLayout,
 } from './types';
 
 // Context and hooks

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

@@ -29,7 +29,6 @@ import {
 } from '@djangocfg/ui/components';
 import { useAppContext } from '../../../context';
 import { useNavigation } from '../../../hooks';
-import { PackageVersions } from '../../../components';
 
 export interface DashboardSidebarProps {
   isAdmin?: boolean;
@@ -49,7 +48,7 @@ export interface DashboardSidebarProps {
  * All data from context!
  */
 export function DashboardSidebar({ isAdmin = false }: DashboardSidebarProps) {
-  const { config, showPackageVersions } = useAppContext();
+  const { config } = useAppContext();
   const { currentPath } = useNavigation();
   const { state, isMobile } = useSidebar();
 
@@ -177,12 +176,6 @@ export function DashboardSidebar({ isAdmin = false }: DashboardSidebarProps) {
           </SidebarGroup>
         ))}
       </SidebarContent>
-
-      {showPackageVersions && (
-        <SidebarFooter>
-          <PackageVersions variant="sidebar" />
-        </SidebarFooter>
-      )}
     </Sidebar>
   );
 }

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

@@ -11,7 +11,6 @@ import React from 'react';
 import Link from 'next/link';
 import { useIsMobile } from '@djangocfg/ui/hooks';
 import { useAppContext } from '../../../context';
-import { PackageVersions } from '../../../components';
 
 /**
  * Footer Component
@@ -28,7 +27,7 @@ import { PackageVersions } from '../../../components';
  * All data from context!
  */
 export function Footer() {
-  const { config, showPackageVersions } = useAppContext();
+  const { config } = useAppContext();
   const isMobile = useIsMobile();
 
   const { app, publicLayout } = config;
@@ -60,9 +59,6 @@ export function Footer() {
 
           {/* Quick Links */}
           <div className="flex flex-wrap justify-center gap-4 mb-6 items-center">
-            {showPackageVersions && (
-              <PackageVersions variant="footer-minimal" />
-            )}
             {footer.links.docs && (
               <a
                 href={footer.links.docs}
@@ -193,9 +189,6 @@ export function Footer() {
               </a>
             </div>
             <div className="flex flex-wrap items-center gap-4">
-              {showPackageVersions && (
-                <PackageVersions variant="footer-minimal" />
-              )}
               {footer.links.docs && (
                 <a
                   href={footer.links.docs}

package/src/layouts/AppLayout/types/index.ts

@@ -8,3 +8,4 @@ export * from './config';
 export * from './layout';
 export * from './navigation';
 export * from './routes';
+export * from './page';

package/src/layouts/AppLayout/types/page.ts

@@ -0,0 +1,80 @@
+/**
+ * Page Type Definitions
+ *
+ * Universal types for Next.js pages with layout and SEO support
+ */
+
+import type { ReactElement, ReactNode } from 'react';
+import type { NextPage } from 'next';
+import type { PageConfig } from '../../../types/pageConfig';
+
+/**
+ * Layout mode types
+ *
+ * - 'public': Public layout (landing, docs, etc.)
+ * - 'private': Private layout (dashboard, authenticated pages)
+ * - 'auth': Auth layout (login, register, OTP)
+ * - 'admin': Admin layout (Django CFG iframe integration)
+ * - 'none': No layout (fully custom page)
+ */
+export type LayoutMode = 'public' | 'private' | 'auth' | 'admin' | 'none';
+
+/**
+ * Universal Page Type - combines layout and SEO configuration
+ *
+ * Extends NextPage with:
+ * - Layout control (getLayout, layoutMode)
+ * - SEO metadata (pageConfig)
+ *
+ * @example
+ * ```tsx
+ * // Custom layout using getLayout
+ * const Page: PageWithLayout = () => <div>Content</div>;
+ * Page.getLayout = (page) => <CustomLayout>{page}</CustomLayout>;
+ *
+ * // Force specific layout mode
+ * const DashboardPage: PageWithLayout = () => <div>Dashboard</div>;
+ * DashboardPage.layoutMode = 'private';
+ *
+ * // With SEO config
+ * const HomePage: PageWithLayout = () => <div>Home</div>;
+ * HomePage.pageConfig = {
+ *   title: 'Home Page',
+ *   description: 'Welcome to our site',
+ *   ogImage: { title: 'Home', subtitle: 'Welcome' }
+ * };
+ *
+ * // Disable all layouts
+ * const LandingPage: PageWithLayout = () => <FullPageDesign />;
+ * LandingPage.layoutMode = 'none';
+ * ```
+ */
+export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  /**
+   * Custom layout function
+   * When provided, AppLayout will use this instead of automatic layout detection
+   *
+   * @param page - The page component wrapped in React element
+   * @returns Layout-wrapped page
+   */
+  getLayout?: (page: ReactElement) => ReactNode;
+
+  /**
+   * Force specific layout mode
+   * Overrides automatic route detection
+   *
+   * - undefined: Auto-detect based on route
+   * - 'public': Always use PublicLayout
+   * - 'private': Always use PrivateLayout
+   * - 'auth': Always use AuthLayout
+   * - 'admin': Always use AdminLayout
+   * - 'none': No layout (page renders directly)
+   */
+  layoutMode?: LayoutMode;
+
+  /**
+   * Page SEO and metadata configuration
+   * Used for <head> tags, OpenGraph, Twitter cards, etc.
+   */
+  pageConfig?: PageConfig;
+};

package/src/layouts/AppLayout/types/routes.ts

@@ -41,8 +41,3 @@ export interface RouteDetectors {
   /** Get page title for route */
   getPageTitle: (path: string) => string;
 }
-
-/**
- * Layout mode based on route
- */
-export type LayoutMode = 'public' | 'private' | 'admin' | 'auth';

package/src/types/index.ts

@@ -1 +1,2 @@
-export type { PageConfig, PageWithConfig } from "./pageConfig";
+export type { PageConfig } from "./pageConfig";
+export { determinePageConfig } from "./pageConfig";

package/src/types/pageConfig.ts

@@ -54,16 +54,13 @@ export interface PageConfig {
   twitter?: TwitterConfig;
 }
 
-// Type for a Page component that includes page configuration
-export type PageWithConfig<T = {}> = FC<T> & {
-  pageConfig?: PageConfig;
-  [key: string]: any;
-};
-
 // --- Helper Function ---
+/**
+ * Determine final page config by merging static and dynamic configs
+ */
 export const determinePageConfig = (
-  Component: PageWithConfig,
-  pageProps: Record<string, any>, // Use a general type for pageProps
+  Component: any,
+  pageProps: Record<string, any>,
   defaultTitle?: string,
   defaultDescription?: string,
 ): PageConfig => {

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

@@ -1,101 +0,0 @@
-/**
- * Package Versions Display
- *
- * Shows all @djangocfg packages versions in a popover
- * Works in both sidebar (PrivateLayout) and footer (PublicLayout)
- */
-
-'use client';
-
-import React from 'react';
-import { Info, Package } from 'lucide-react';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@djangocfg/ui/components';
-import { Button } from '@djangocfg/ui/components';
-import { getPackageVersions } from './packageVersions.config';
-
-export interface PackageVersionsProps {
-  /**
-   * Display variant
-   * - 'sidebar': Adapts to sidebar collapsed state (PrivateLayout)
-   * - 'footer': Simple button for footer (PublicLayout)
-   * - 'footer-minimal': Only icon, no text (for compact footer)
-   */
-  variant?: 'sidebar' | 'footer' | 'footer-minimal';
-}
-
-export function PackageVersions({ variant = 'footer' }: PackageVersionsProps) {
-  // Try to use sidebar state if available (only in PrivateLayout)
-  let isCollapsed = false;
-  if (variant === 'sidebar') {
-    try {
-      // Dynamic import to avoid errors in PublicLayout
-      const { useSidebar } = require('@djangocfg/ui/components');
-      const { state } = useSidebar();
-      isCollapsed = state === 'collapsed';
-    } catch (e) {
-      // Sidebar not available, use default
-    }
-  }
-
-  const isSidebarVariant = variant === 'sidebar';
-  const isMinimalVariant = variant === 'footer-minimal';
-  const popoverAlign = isSidebarVariant ? 'start' : 'center';
-  const popoverSide = isSidebarVariant ? 'right' : 'top';
-
-  // Determine if we should show text
-  const showText = !isCollapsed && !isMinimalVariant;
-
-  // Get package versions dynamically
-  const packages = getPackageVersions();
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size={isCollapsed || isMinimalVariant ? "icon" : "sm"}
-          className={isSidebarVariant
-            ? "w-full justify-start text-xs text-muted-foreground hover:text-foreground"
-            : isMinimalVariant
-              ? "h-auto w-auto p-1 text-muted-foreground hover:text-primary transition-colors"
-              : "text-xs text-muted-foreground hover:text-foreground"
-          }
-          title={isMinimalVariant ? "Package Versions" : undefined}
-        >
-          <Info className={isMinimalVariant ? "h-3 w-3" : "h-3.5 w-3.5"} />
-          {showText && <span className="ml-2">Package Versions</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent align={popoverAlign} side={popoverSide} className="w-80">
-        <div className="space-y-3">
-          <div className="flex items-center gap-2">
-            <Package className="h-4 w-4 text-primary" />
-            <h4 className="font-semibold text-sm">Package Versions</h4>
-          </div>
-          <div className="space-y-1.5">
-            {packages.map((pkg) => (
-              <a
-                key={pkg.name}
-                href={`https://www.npmjs.com/package/${pkg.name}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center justify-between py-1.5 px-2 rounded-sm hover:bg-accent/50 transition-colors cursor-pointer group"
-              >
-                <span className="text-xs font-mono text-muted-foreground group-hover:text-foreground transition-colors">
-                  {pkg.name}
-                </span>
-                <span className="text-xs font-semibold bg-primary/10 text-primary px-2 py-0.5 rounded group-hover:bg-primary/20 transition-colors">
-                  v{pkg.version}
-                </span>
-              </a>
-            ))}
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/layouts/AppLayout/components/PackageVersions/index.ts

@@ -1,7 +0,0 @@
-/**
- * Package Versions Module
- */
-
-export { PackageVersions } from './PackageVersions';
-export { getPackageVersions, getPackageVersion } from './packageVersions.config';
-export type { PackageInfo } from './packageVersions.config';

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -1,65 +0,0 @@
-/**
- * Package Versions Configuration
- *
- * NOTE: This file is auto-generated by packages/scripts/sync-package-versions.js
- * Do not edit manually! Run 'make build' or 'pnpm sync-versions' to update.
- *
- * Versions are synced from actual package.json files in the monorepo.
- * This ensures compatibility with both monorepo (dev) and npm (production).
- */
-
-export interface PackageInfo {
-  name: string;
-  version: string;
-}
-
-/**
- * Package versions registry
- * Auto-synced from package.json files
- * Last updated: 2025-11-23T06:18:54.167Z
- */
-const PACKAGE_VERSIONS: PackageInfo[] = [
-  {
-    "name": "@djangocfg/ui",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/api",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/layouts",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/markdown",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/og-image",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/eslint-config",
-    "version": "1.2.58"
-  },
-  {
-    "name": "@djangocfg/typescript-config",
-    "version": "1.2.58"
-  }
-];
-
-/**
- * Get all package versions
- */
-export function getPackageVersions(): PackageInfo[] {
-  return PACKAGE_VERSIONS;
-}
-
-/**
- * Get single package version by name
- */
-export function getPackageVersion(packageName: string): string | undefined {
-  const packages = getPackageVersions();
-  return packages.find((pkg) => pkg.name === packageName)?.version;
-}