@djangocfg/layouts 2.1.355 → 2.1.357

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.355",
+  "version": "2.1.357",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -84,13 +84,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.355",
-    "@djangocfg/centrifugo": "^2.1.355",
-    "@djangocfg/debuger": "^2.1.355",
-    "@djangocfg/i18n": "^2.1.355",
-    "@djangocfg/monitor": "^2.1.355",
-    "@djangocfg/ui-core": "^2.1.355",
-    "@djangocfg/ui-nextjs": "^2.1.355",
+    "@djangocfg/api": "^2.1.357",
+    "@djangocfg/centrifugo": "^2.1.357",
+    "@djangocfg/debuger": "^2.1.357",
+    "@djangocfg/i18n": "^2.1.357",
+    "@djangocfg/monitor": "^2.1.357",
+    "@djangocfg/ui-core": "^2.1.357",
+    "@djangocfg/ui-nextjs": "^2.1.357",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -120,15 +120,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.355",
-    "@djangocfg/centrifugo": "^2.1.355",
-    "@djangocfg/debuger": "^2.1.355",
-    "@djangocfg/i18n": "^2.1.355",
-    "@djangocfg/monitor": "^2.1.355",
-    "@djangocfg/typescript-config": "^2.1.355",
-    "@djangocfg/ui-core": "^2.1.355",
-    "@djangocfg/ui-nextjs": "^2.1.355",
-    "@djangocfg/ui-tools": "^2.1.355",
+    "@djangocfg/api": "^2.1.357",
+    "@djangocfg/centrifugo": "^2.1.357",
+    "@djangocfg/debuger": "^2.1.357",
+    "@djangocfg/i18n": "^2.1.357",
+    "@djangocfg/monitor": "^2.1.357",
+    "@djangocfg/typescript-config": "^2.1.357",
+    "@djangocfg/ui-core": "^2.1.357",
+    "@djangocfg/ui-nextjs": "^2.1.357",
+    "@djangocfg/ui-tools": "^2.1.357",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AdminLayout/AdminLayout.tsx

@@ -38,7 +38,8 @@
 
 import { ReactNode } from 'react';
 
-import { PrivateLayout, PrivateLayoutProps} from '../PrivateLayout/PrivateLayout';
+import { PrivateLayout } from '../PrivateLayout';
+import type { PrivateLayoutProps } from '../PrivateLayout';
 
 export interface AdminLayoutProps extends PrivateLayoutProps {
   children: ReactNode;

package/src/layouts/AppLayout/AppLayout.tsx

@@ -32,7 +32,7 @@
 
 'use client';
 
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode, memo, useMemo } from 'react';
 
 import { ClientOnly, Suspense } from '../../components/core';
 import { usePathnameWithoutLocale } from '../../hooks';
@@ -311,7 +311,7 @@ interface AppLayoutContentProps {
  * SSR is only enabled for publicLayout.
  * Private and admin layouts are wrapped in ClientOnly to avoid hydration mismatch.
  */
-function AppLayoutContent({
+function AppLayoutContentRaw({
   children,
   publicLayout,
   privateLayout,
@@ -351,8 +351,18 @@ function AppLayoutContent({
     [pathname, adminLayout, privateLayout, publicLayout]
   );
 
-  // Render appropriate layout based on mode
-  const renderLayout = () => {
+  // Prepare everything above the JSX — no inline conditionals in return().
+  const hasThemeOverrides = Boolean(themeOverrides && themeOverrides.length > 0);
+  const forcedTheme = hasThemeOverrides
+    ? resolveForcedTheme(pathname, themeOverrides)
+    : null;
+  const themeOverrideElement = hasThemeOverrides
+    ? <ThemeOverride pathname={pathname} rules={themeOverrides!} />
+    : null;
+
+  // Memoize layout element so it doesn't re-render on every pathname change
+  // that doesn't affect layout mode (e.g. /dashboard/a → /dashboard/b).
+  const layoutElement = useMemo(() => {
     // Skip layout for noLayoutPaths (fullscreen pages)
     if (shouldSkipLayout) {
       return children;
@@ -417,17 +427,7 @@ function AppLayoutContent({
           </publicLayout.component>
         );
     }
-  };
-
-  // Prepare everything above the JSX — no inline conditionals in return().
-  const hasThemeOverrides = Boolean(themeOverrides && themeOverrides.length > 0);
-  const forcedTheme = hasThemeOverrides
-    ? resolveForcedTheme(pathname, themeOverrides)
-    : null;
-  const themeOverrideElement = hasThemeOverrides
-    ? <ThemeOverride pathname={pathname} rules={themeOverrides!} />
-    : null;
-  const layoutElement = renderLayout();
+  }, [shouldSkipLayout, layoutMode, publicLayout, privateLayout, adminLayout, publicChrome, children]);
 
   // No providers here - all providers now in BaseApp
   return (
@@ -438,6 +438,26 @@ function AppLayoutContent({
   );
 }
 
+/**
+ * Memoised layout content wrapper. Re-renders only when layout config props
+ * change (publicLayout, privateLayout, adminLayout, noLayoutPaths, etc.).
+ * The `children` prop is compared by reference — the consumer should wrap
+ * page content in React.memo or use stable element references to avoid
+ * unnecessary layout re-mounts on every parent render.
+ */
+const AppLayoutContent = memo(AppLayoutContentRaw, (prev, next) => {
+  return (
+    prev.children === next.children &&
+    prev.publicLayout === next.publicLayout &&
+    prev.privateLayout === next.privateLayout &&
+    prev.adminLayout === next.adminLayout &&
+    prev.noLayoutPaths === next.noLayoutPaths &&
+    prev.authPath === next.authPath &&
+    prev.publicChrome === next.publicChrome &&
+    prev.themeOverrides === next.themeOverrides
+  );
+});
+
 /**
  * AppLayout - Main Component with All Providers
  */

package/src/layouts/AppLayout/BaseApp.tsx

@@ -43,7 +43,7 @@ import { SWRConfig } from 'swr';
 
 import { MonitorProvider, FrontendMonitor } from '@djangocfg/monitor/client';
 import { errorDetailToMonitorEvent } from '../../components/errors/ErrorsTracker';
-import { CentrifugoAuth } from '@djangocfg/api';
+import { CfgCentrifugo } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
 import { Toaster, TooltipProvider } from '@djangocfg/ui-core/components';
@@ -146,7 +146,7 @@ export function BaseApp({
                 autoConnect={centrifugoEnabled && centrifugo?.autoConnect}
                 url={centrifugoUrl}
                 onTokenRefresh={async () => {
-                  const result = await CentrifugoAuth.cfgCentrifugoAuthTokenRetrieve({ throwOnError: true });
+                  const result = await CfgCentrifugo.cfgCentrifugoAuthTokenRetrieve({ throwOnError: true });
                   return result.data.token;
                 }}
               >

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -10,7 +10,7 @@
 
 'use client';
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, memo, useContext, useMemo } from 'react';
 
 import { useCfgRouter } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
@@ -56,24 +56,31 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
 
   const hideHeader = Boolean(children);
 
+  const layoutContextValue = useMemo(() => ({ hideHeader }), [hideHeader]);
+
+  const oauthCallback = useMemo(() => {
+    if (!enableGithubAuth) return null;
+    return (
+      <Suspense fallback={null}>
+        <OAuthCallback
+          redirectUrl={redirectUrl}
+          onSuccess={onOAuthSuccess ? (user, isNewUser) => onOAuthSuccess(user, isNewUser, 'github') : undefined}
+          onError={onError}
+        />
+      </Suspense>
+    );
+  }, [enableGithubAuth, redirectUrl, onOAuthSuccess, onError]);
+
   return (
     <Suspense>
       <AuthFormProvider {...props}>
-        <AuthLayoutContext.Provider value={{ hideHeader }}>
+        <AuthLayoutContext.Provider value={layoutContextValue}>
           {/* Full-screen success overlay */}
           <AuthSuccessOverlay />
 
           <AuthShell variant={variant} background={background} sidebar={sidebar} className={className}>
             {/* Handle OAuth callback when GitHub auth is enabled */}
-            {enableGithubAuth && (
-              <Suspense fallback={null}>
-                <OAuthCallback
-                  redirectUrl={redirectUrl}
-                  onSuccess={onOAuthSuccess ? (user, isNewUser) => onOAuthSuccess(user, isNewUser, 'github') : undefined}
-                  onError={onError}
-                />
-              </Suspense>
-            )}
+            {oauthCallback}
 
             <AuthHeaderSlot>{children}</AuthHeaderSlot>
             <AuthContent />
@@ -85,13 +92,13 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
 };
 
 /** Renders custom children only on the identifier step — hides them on otp / 2fa / etc. */
-const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = memo(({ children }) => {
   const { step } = useAuthFormContext();
   if (!children || step !== 'identifier') return null;
   return <>{children}</>;
-};
+});
 
-const AuthContent: React.FC = () => {
+const AuthContent: React.FC = memo(() => {
   const { step, setStep } = useAuthFormContext();
 
   switch (step) {
@@ -114,9 +121,9 @@ const AuthContent: React.FC = () => {
     default:
       return <IdentifierStep />;
   }
-};
+});
 
-const AuthSuccessOverlay: React.FC = () => {
+const AuthSuccessOverlay: React.FC = memo(() => {
   const { step, logoUrl, redirectUrl } = useAuthFormContext();
 
   if (step !== 'success') {
@@ -124,7 +131,7 @@ const AuthSuccessOverlay: React.FC = () => {
   }
 
   return <AuthSuccess logoUrl={logoUrl} redirectUrl={redirectUrl} />;
-};
+});
 
 // AuthSuccess component - Apple-style success screen
 interface AuthSuccessInlineProps {
@@ -133,7 +140,7 @@ interface AuthSuccessInlineProps {
   redirectDelay?: number;
 }
 
-const AuthSuccess: React.FC<AuthSuccessInlineProps> = ({
+const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
   logoUrl,
   redirectUrl,
   redirectDelay = AUTH.REDIRECT_DELAY,
@@ -196,4 +203,4 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = ({
       </div>
     </div>
   );
-};
+});

package/src/layouts/AuthLayout/components/oauth/OAuthCallback.tsx

@@ -2,7 +2,7 @@
 
 import { AlertCircle, Loader2 } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 
 import { useGithubAuth } from '@djangocfg/api/auth';
 import {
@@ -47,12 +47,16 @@ type CallbackStatus = 'processing' | 'error';
  *   );
  * }
  * ```
+ *
+ * Memoised: re-renders only when `onSuccess`, `onError`, or `redirectUrl`
+ * change. `onSuccess` and `onError` are compared by reference — callers
+ * should stabilise them with useCallback.
  */
-export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
+function OAuthCallbackRaw({
   onSuccess,
   onError,
   redirectUrl,
-}) => {
+}: OAuthCallbackProps) {
   const searchParams = useSearchParams();
   const { setStep, setTwoFactorSessionId, setShouldPrompt2FA } = useAuthFormContext();
   const [status, setStatus] = useState<CallbackStatus | null>(null);
@@ -171,4 +175,6 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
       </Card>
     </div>
   );
-};
+}
+
+export const OAuthCallback = memo(OAuthCallbackRaw);

package/src/layouts/AuthLayout/components/shared/AuthButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 export interface AuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary';
@@ -9,16 +9,20 @@ export interface AuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
 }
 
 /**
- * AuthButton - Apple-style button with loading state
+ * AuthButton - Apple-style button with loading state.
+ *
+ * Memoised: re-renders only when variant, loading, disabled, className or
+ * children change. Event handlers passed via ...props are compared by
+ * reference — the caller should stabilise them with useCallback.
  */
-export const AuthButton: React.FC<AuthButtonProps> = ({
+function AuthButtonRaw({
   variant = 'primary',
   loading = false,
   disabled,
   children,
   className = '',
   ...props
-}) => {
+}: AuthButtonProps) {
   const variantClass = variant === 'primary' ? 'auth-button-primary' : 'auth-button-secondary';
   const loadingClass = loading ? 'auth-button-loading' : '';
 
@@ -32,4 +36,6 @@ export const AuthButton: React.FC<AuthButtonProps> = ({
       {children}
     </button>
   );
-};
+}
+
+export const AuthButton = memo(AuthButtonRaw);

package/src/layouts/AuthLayout/components/shared/AuthContainer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 
 import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
 import { useLayoutI18nOptional } from '../../../AppLayout/LayoutI18nProvider';
@@ -14,19 +14,17 @@ export interface AuthContainerProps {
 }
 
 /**
- * AuthContainer - Apple-style minimal container with step animations
+ * AuthContainer - Apple-style minimal container with step animations.
  *
- * Features:
- * - Full viewport centering
- * - Max-width constraint (400px)
- * - Animate-in on step change
- * - No visible card/border
+ * Memoised: re-renders only when `step`, `className` or `children`
+ * reference change. Internal animation state is isolated and does
+ * not propagate upward.
  */
-export const AuthContainer: React.FC<AuthContainerProps> = ({
+function AuthContainerRaw({
   children,
   step,
   className = '',
-}) => {
+}: AuthContainerProps) {
   const [isEntering, setIsEntering] = useState(true);
   const [currentStep, setCurrentStep] = useState(step);
 
@@ -75,4 +73,6 @@ export const AuthContainer: React.FC<AuthContainerProps> = ({
       {children}
     </div>
   );
-};
+}
+
+export const AuthContainer = memo(AuthContainerRaw);

package/src/layouts/AuthLayout/components/shared/AuthDivider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 
@@ -10,12 +10,16 @@ export interface AuthDividerProps {
 }
 
 /**
- * AuthDivider - Minimal "or" divider
+ * AuthDivider - Minimal "or" divider.
+ *
+ * Memoised: re-renders only when `text` or `className` change.
+ * The default translation is memoised internally so it does not
+ * break the comparison on every render.
  */
-export const AuthDivider: React.FC<AuthDividerProps> = ({
+function AuthDividerRaw({
   text,
   className = '',
-}) => {
+}: AuthDividerProps) {
   const t = useAppT();
   const defaultText = useMemo(() => t('layouts.auth.divider.or'), [t]);
   const dividerText = text ?? defaultText;
@@ -25,4 +29,6 @@ export const AuthDivider: React.FC<AuthDividerProps> = ({
       {dividerText}
     </div>
   );
-};
+}
+
+export const AuthDivider = memo(AuthDividerRaw);

package/src/layouts/AuthLayout/components/shared/AuthError.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 export interface AuthErrorProps {
   message?: string | null;
@@ -8,12 +8,15 @@ export interface AuthErrorProps {
 }
 
 /**
- * AuthError - Subtle error display with shake animation
+ * AuthError - Subtle error display with shake animation.
+ *
+ * Memoised: re-renders only when `message` or `className` change.
+ * Returns null when message is empty — the null branch is stable.
  */
-export const AuthError: React.FC<AuthErrorProps> = ({
+function AuthErrorRaw({
   message,
   className = '',
-}) => {
+}: AuthErrorProps) {
   if (!message) {
     return null;
   }
@@ -31,4 +34,6 @@ export const AuthError: React.FC<AuthErrorProps> = ({
       <span>{message}</span>
     </div>
   );
-};
+}
+
+export const AuthError = memo(AuthErrorRaw);

package/src/layouts/AuthLayout/components/shared/AuthFooter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
 
@@ -12,14 +12,18 @@ export interface AuthFooterProps {
 }
 
 /**
- * AuthFooter - Minimal link row for terms, privacy, and support
+ * AuthFooter - Minimal link row for terms, privacy, and support.
+ *
+ * Memoised: re-renders only when URL props or className change.
+ * Translation labels are derived inside the component via useMemo
+ * so they do not break memoisation.
  */
-export const AuthFooter: React.FC<AuthFooterProps> = ({
+function AuthFooterRaw({
   termsUrl,
   privacyUrl,
   supportUrl,
   className = '',
-}) => {
+}: AuthFooterProps) {
   const t = useAppT();
   const labels = useMemo(() => ({
     terms: t('layouts.auth.footer.terms'),
@@ -53,4 +57,6 @@ export const AuthFooter: React.FC<AuthFooterProps> = ({
       ))}
     </div>
   );
-};
+}
+
+export const AuthFooter = memo(AuthFooterRaw);

package/src/layouts/AuthLayout/components/shared/AuthHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 export interface AuthHeaderProps {
   logo?: string;
@@ -11,21 +11,19 @@ export interface AuthHeaderProps {
 }
 
 /**
- * AuthHeader - Apple-style header with logo, title, and subtitle
+ * AuthHeader - Apple-style header with logo, title, and subtitle.
  *
- * Features:
- * - Optional logo with scale animation
- * - Large, bold title
- * - Muted subtitle
- * - Optional highlighted identifier
+ * Memoised: re-renders only when logo, title, subtitle, identifier or
+ * className change. All props are primitives (strings), so the default
+ * shallow comparison is sufficient.
  */
-export const AuthHeader: React.FC<AuthHeaderProps> = ({
+function AuthHeaderRaw({
   logo,
   title,
   subtitle,
   identifier,
   className = '',
-}) => {
+}: AuthHeaderProps) {
   return (
     <div className={`auth-header ${className}`}>
       {logo && (
@@ -51,4 +49,6 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({
       )}
     </div>
   );
-};
+}
+
+export const AuthHeader = memo(AuthHeaderRaw);

package/src/layouts/AuthLayout/components/shared/AuthLink.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 export interface AuthLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
@@ -8,14 +8,18 @@ export interface AuthLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElem
 }
 
 /**
- * AuthLink - Text link styled button/anchor
+ * AuthLink - Text link styled button/anchor.
+ *
+ * Memoised: re-renders only when `href`, `className`, `children` or
+ * event handlers change. Callers should stabilise `onClick` with
+ * useCallback to avoid unnecessary re-renders.
  */
-export const AuthLink: React.FC<AuthLinkProps> = ({
+function AuthLinkRaw({
   children,
   href,
   className = '',
   ...props
-}) => {
+}: AuthLinkProps) {
   if (href) {
     return (
       <a
@@ -38,4 +42,6 @@ export const AuthLink: React.FC<AuthLinkProps> = ({
       {children}
     </button>
   );
-};
+}
+
+export const AuthLink = memo(AuthLinkRaw);

package/src/layouts/AuthLayout/components/shared/AuthOTPInput.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { memo } from 'react';
 
 import { OTPInput } from '@djangocfg/ui-core/components';
 
@@ -17,11 +17,15 @@ export interface AuthOTPInputProps {
 }
 
 /**
- * AuthOTPInput - Reusable OTP input with consistent styling
+ * AuthOTPInput - Reusable OTP input with consistent styling.
  *
- * Used in: OTPStep (email, 4 digits), TwoFactorStep (TOTP, 6 digits), SetupStep (TOTP, 6 digits)
+ * Used in: OTPStep (email, 4 digits), TwoFactorStep (TOTP, 6 digits), SetupStep (TOTP, 6 digits).
+ *
+ * Memoised: re-renders only when value, disabled, autoFocus, size or length
+ * change. `onChange` and `onComplete` are compared by reference — callers
+ * should stabilise them with useCallback.
  */
-export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
+function AuthOTPInputRaw({
   value,
   onChange,
   onComplete,
@@ -29,19 +33,23 @@ export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
   autoFocus = true,
   size,
   length = AUTH.TOTP_LENGTH,
-}) => (
-  <div className="auth-otp-container auth-otp-wrapper">
-    <OTPInput
-      length={length}
-      validationMode="numeric"
-      pasteBehavior="clean"
-      value={value}
-      onChange={onChange}
-      onComplete={onComplete}
-      disabled={disabled}
-      autoFocus={autoFocus}
-      size={size}
-      fluid
-    />
-  </div>
-);
+}: AuthOTPInputProps) {
+  return (
+    <div className="auth-otp-container auth-otp-wrapper">
+      <OTPInput
+        length={length}
+        validationMode="numeric"
+        pasteBehavior="clean"
+        value={value}
+        onChange={onChange}
+        onComplete={onComplete}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        size={size}
+        fluid
+      />
+    </div>
+  );
+}
+
+export const AuthOTPInput = memo(AuthOTPInputRaw);