@djangocfg/layouts 2.1.226 → 2.1.228

package/README.md

@@ -57,15 +57,15 @@ export default function RootLayout({ children }) {
 | `errorTracking` | `ErrorTrackingConfig` | — | Validation/CORS/network error capture |
 | `errorBoundary` | `ErrorBoundaryConfig` | enabled | React error boundary |
 | `swr` | `SWRConfigOptions` | — | SWR data fetching config |
-| `pwaInstall` | `PwaInstallConfig` | — | PWA install prompt |
-| `mcpChat` | `McpChatConfig` | — | AI chat widget |
+| `pwaInstall` | `PwaInstallConfig` | — | PWA install prompt (from `@djangocfg/ui-nextjs/pwa`) |
 | `monitor` | `MonitorConfig` | — | Override monitor config (project/environment come from `project` prop by default) |
 | `debug` | `DebugConfig` | enabled | Debug panel config — see below |
 
 **Included automatically:**
 - ThemeProvider, TooltipProvider, SWRConfig, DialogProvider
 - AuthProvider + AuthDialog
-- AnalyticsProvider, CentrifugoProvider, PwaProvider
+- AnalyticsProvider, CentrifugoProvider
+- PwaProvider (from `@djangocfg/ui-nextjs/pwa`)
 - ErrorTrackingProvider, ErrorBoundary
 - MonitorProvider (auto-enabled via `project` prop)
 - DebugButton from `@djangocfg/debuger`
@@ -224,20 +224,6 @@ export default function NotFound() {
 }
 ```
 
-## PWA
-
-```tsx
-<BaseApp
-  pwaInstall={{
-    enabled: true,
-    showInstallHint: true,
-    logo: '/logo192.png',
-    delayMs: 3000,
-    resetAfterDays: 7,
-    resumeLastPage: true,
-  }}
->
-```
 
 ## Redirect
 

package/package.json

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

package/src/components/errors/ErrorLayout.tsx

@@ -20,7 +20,7 @@
 import React, { useMemo } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 import { getErrorContent } from './errorConfig';
 
@@ -113,7 +113,7 @@ export function ErrorLayout({
   illustration,
   supportEmail = 'support@example.com',
 }: ErrorLayoutProps) {
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
 
   const labels = useMemo(() => ({
     goBack: t('layouts.errors.goBack'),

package/src/components/errors/ErrorsTracker/index.ts

@@ -50,6 +50,7 @@ export {
   formatRuntimeErrorForClipboard,
   formatErrorTitle,
   extractDomain,
+  errorDetailToMonitorEvent,
 } from './utils/formatters';
 
 export {

package/src/components/errors/ErrorsTracker/utils/formatters.ts

@@ -5,7 +5,9 @@
  */
 
 import type { ZodError } from 'zod';
-import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, CentrifugoErrorDetail, RuntimeErrorDetail } from '../types';
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, CentrifugoErrorDetail, RuntimeErrorDetail, ErrorDetail } from '../types';
+import type { MonitorEvent } from '@djangocfg/monitor';
+import { EventType, EventLevel } from '@djangocfg/monitor';
 
 /**
  * Format Zod error issues for display
@@ -131,6 +133,26 @@ export function formatRuntimeErrorForClipboard(detail: RuntimeErrorDetail): stri
   return JSON.stringify(errorData, null, 2);
 }
 
+/**
+ * Convert ErrorDetail to MonitorEvent for forwarding to @djangocfg/monitor backend.
+ * Use via ErrorTrackingProvider.onMonitorCapture.
+ */
+export function errorDetailToMonitorEvent(detail: ErrorDetail): MonitorEvent {
+  const url = typeof window !== 'undefined' ? window.location.href : ''
+  switch (detail.type) {
+    case 'validation':
+      return { event_type: EventType.ERROR, level: EventLevel.WARNING, message: `Validation: ${detail.operation} ${detail.path}`, url }
+    case 'cors':
+      return { event_type: EventType.NETWORK_ERROR, level: EventLevel.ERROR, message: `CORS: ${detail.method} ${detail.url}`, http_method: detail.method, http_url: detail.url, url }
+    case 'network':
+      return { event_type: EventType.NETWORK_ERROR, level: detail.statusCode && detail.statusCode >= 500 ? EventLevel.ERROR : EventLevel.WARNING, message: `${detail.method} ${detail.url} → ${detail.statusCode ?? 'ERR'}`, http_method: detail.method, http_url: detail.url, http_status: detail.statusCode, url }
+    case 'centrifugo':
+      return { event_type: EventType.ERROR, level: EventLevel.ERROR, message: `Centrifugo ${detail.method}: ${detail.error}`, url }
+    case 'runtime':
+      return { event_type: EventType.JS_ERROR, level: EventLevel.ERROR, message: detail.message, stack_trace: detail.error?.stack, url }
+  }
+}
+
 /**
  * Format error title based on type
  */

package/src/hooks/useLogout.ts

@@ -3,39 +3,36 @@
 import { useCallback } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useAppT } from '@djangocfg/i18n';
 
 /**
- * Hook for logout with confirmation dialog
- *
- * Uses window.dialog.confirm for beautiful shadcn dialog
+ * Hook for logout with i18n confirmation dialog.
  *
  * @example
  * ```tsx
  * function UserMenu() {
  *   const handleLogout = useLogout();
- *
- *   return (
- *     <Button onClick={handleLogout}>Logout</Button>
- *   );
+ *   return <Button onClick={handleLogout}>Logout</Button>;
  * }
  * ```
  */
 export function useLogout() {
   const { logout } = useAuth();
+  const t = useAppT();
 
   const handleLogout = useCallback(async () => {
     const confirmed = await window.dialog.confirm({
-      title: 'Sign out',
-      message: 'Are you sure you want to sign out?',
-      confirmText: 'Sign out',
-      cancelText: 'Cancel',
+      title: t('api.logout.title'),
+      message: t('api.logout.message'),
+      confirmText: t('api.logout.confirm'),
+      cancelText: t('api.logout.cancel'),
       variant: 'destructive',
     });
 
     if (confirmed) {
       logout();
     }
-  }, [logout]);
+  }, [logout, t]);
 
   return handleLogout;
 }

package/src/layouts/AppLayout/AppLayout.tsx

@@ -46,7 +46,6 @@ import type {
   ErrorTrackingConfig,
   ErrorBoundaryConfig,
   SWRConfigOptions,
-  McpChatConfig,
   PwaInstallConfig,
   DebugConfig,
 } from '../types';
@@ -111,6 +110,15 @@ export interface AppLayoutProps {
    */
   noLayoutPaths?: string | string[];
 
+  /**
+   * Auth path prefix. When set, all routes starting with this path
+   * (and their localized variants like /ru/auth, /en/auth) render without
+   * any layout wrapper — fullscreen, no navbar/sidebar.
+   * @default '/auth'
+   * @example authPath="/auth" → skips layout for /auth, /auth/*, /ru/auth, /ru/auth/*, etc.
+   */
+  authPath?: string;
+
   /** Theme configuration */
   theme?: ThemeConfig;
 
@@ -132,9 +140,6 @@ export interface AppLayoutProps {
   /** Error boundary configuration */
   errorBoundary?: ErrorBoundaryConfig;
 
-  /** MCP Chat configuration */
-  mcpChat?: McpChatConfig;
-
   /** PWA Install configuration */
   pwaInstall?: PwaInstallConfig;
 
@@ -159,15 +164,24 @@ function AppLayoutContent({
   privateLayout,
   adminLayout,
   noLayoutPaths,
+  authPath = '/auth',
   i18n,
 }: AppLayoutProps) {
   // Use pathname without locale prefix for route matching
   const pathname = usePathnameWithoutLocale();
 
+  // Merge authPath into noLayoutPaths — auth pages are always fullscreen
+  const effectiveNoLayoutPaths = useMemo(() => {
+    const base = noLayoutPaths
+      ? (Array.isArray(noLayoutPaths) ? noLayoutPaths : [noLayoutPaths])
+      : []
+    return [...base, authPath]
+  }, [noLayoutPaths, authPath])
+
   // Check if current path should skip layout
   const shouldSkipLayout = useMemo(
-    () => matchesPath(pathname, noLayoutPaths),
-    [pathname, noLayoutPaths]
+    () => matchesPath(pathname, effectiveNoLayoutPaths),
+    [pathname, effectiveNoLayoutPaths]
   );
 
   const layoutMode = useMemo(
@@ -265,7 +279,6 @@ export function AppLayout(props: AppLayoutProps) {
     errorTracking,
     errorBoundary,
     swr,
-    mcpChat,
     pwaInstall,
     monitor,
     debug,
@@ -281,7 +294,6 @@ export function AppLayout(props: AppLayoutProps) {
       errorTracking={errorTracking}
       errorBoundary={errorBoundary}
       swr={swr}
-      mcpChat={mcpChat}
       pwaInstall={pwaInstall}
       monitor={monitor}
       debug={debug}

package/src/layouts/AppLayout/BaseApp.tsx

@@ -12,7 +12,6 @@
  * - PwaProvider (PWA installation, optional)
  * - ErrorTrackingProvider (error handling)
  * - ErrorBoundary (React error boundary, enabled by default)
- * - MCP Chat Widget (optional, lazy loaded)
  *
  * @example
  * ```tsx
@@ -24,7 +23,6 @@
  *   auth={{ loginPath: '/auth/login' }}
  *   analytics={{ googleTrackingId: 'G-XXXXXXXXXX' }}
  *   pwaInstall={{ enabled: true, logo: '/logo192.png' }}
- *   mcpChat={{ enabled: true, autoDetectEnvironment: true }}
  * >
  *   {children}
  * </BaseApp>
@@ -42,7 +40,8 @@ import dynamic from 'next/dynamic';
 import NextTopLoader from 'nextjs-toploader';
 import { SWRConfig } from 'swr';
 
-import { MonitorProvider } from '@djangocfg/monitor/client';
+import { MonitorProvider, FrontendMonitor } from '@djangocfg/monitor/client';
+import { errorDetailToMonitorEvent } from '../../components/errors/ErrorsTracker';
 import { getCentrifugoAuthTokenRetrieve } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
@@ -53,7 +52,7 @@ import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
 import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
 import { AuthDialog } from '../../snippets/AuthDialog';
-import { A2HSHint, PWAPageResumeManager, PwaProvider } from '../../snippets/PWAInstall';
+import { A2HSHint, PWAPageResumeManager, PwaProvider } from '@djangocfg/ui-nextjs/pwa';
 
 import type { BaseLayoutProps } from '../types/layout.types';
 
@@ -63,13 +62,6 @@ const DebugButton = dynamic(
   { ssr: false }
 );
 
-// Lazy load MCP Chat Widget with dynamic import
-const AIChatWidget = dynamic(
-  () => import('../../snippets/McpChat/components/AIChatWidget').then(mod => ({ default: mod.AIChatWidget })),
-  { ssr: false }
-);
-
-
 // For backwards compatibility, re-export as BaseAppProps
 export type BaseAppProps = BaseLayoutProps;
 
@@ -78,7 +70,7 @@ export type BaseAppProps = BaseLayoutProps;
  *
  * Includes: ThemeProvider, TooltipProvider, SWRConfig, AuthProvider, AnalyticsProvider,
  * CentrifugoProvider, PwaProvider, ErrorTrackingProvider,
- * ErrorBoundary (optional), MCP Chat (optional)
+ * ErrorBoundary (optional)
  * Also renders global Toaster and PageProgress components
  */
 export function BaseApp({
@@ -91,7 +83,6 @@ export function BaseApp({
   errorTracking,
   errorBoundary,
   swr,
-  mcpChat,
   pwaInstall,
   monitor,
   debug,
@@ -149,6 +140,7 @@ export function BaseApp({
                     cors={errorTracking?.cors}
                     network={errorTracking?.network}
                     onError={errorTracking?.onError}
+                    onMonitorCapture={(d) => FrontendMonitor.capture(errorDetailToMonitorEvent(d))}
                   >
                     <MonitorProvider {...monitorConfig} />
                     {children}
@@ -174,21 +166,6 @@ export function BaseApp({
                       <PWAPageResumeManager enabled={true} />
                     )}
 
-                    {/* MCP Chat Widget - lazy loaded */}
-                    {mcpChat?.enabled && (
-                      <AIChatWidget
-                        apiEndpoint={mcpChat.apiEndpoint}
-                        title={mcpChat.title}
-                        placeholder={mcpChat.placeholder}
-                        greeting={mcpChat.greeting}
-                        position={mcpChat.position}
-                        variant={mcpChat.variant}
-                        enableStreaming={mcpChat.enableStreaming}
-                        autoDetectEnvironment={mcpChat.autoDetectEnvironment}
-                        className={mcpChat.className}
-                      />
-                    )}
-
                     {/* Auth Dialog - global auth prompt */}
                     <AuthDialog authPath={auth?.routes?.auth} />
 

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -7,10 +7,12 @@
 
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import { useCfgRouter } from '@djangocfg/api/auth';
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
+
+import { GlowBackground } from '@djangocfg/ui-core/components';
 
 import { Suspense } from '../../components';
 import { OAuthCallback } from './components/oauth';
@@ -22,37 +24,64 @@ import './styles/auth.css';
 
 import type { AuthLayoutProps } from './types';
 
-export type { AuthLayoutProps };
+
+// ─── Layout-level context (header suppression, etc.) ─────────────────────────
+
+interface AuthLayoutContextValue {
+  /** True when the consumer passed custom children — step headers should be hidden */
+  hideHeader: boolean;
+}
+
+const AuthLayoutContext = createContext<AuthLayoutContextValue>({ hideHeader: false });
+
+export const useAuthLayoutContext = (): AuthLayoutContextValue => useContext(AuthLayoutContext);
+
+// ─── Layout ──────────────────────────────────────────────────────────────────
 
 export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
   const { enableGithubAuth, redirectUrl = AUTH.DEFAULT_REDIRECT, onOAuthSuccess, onError, className } = props;
+  const hideHeader = Boolean(props.children);
 
   return (
     <Suspense>
       <AuthFormProvider {...props}>
-        {/* Full-screen success overlay */}
-        <AuthSuccessOverlay />
-
-        <div className={`auth-layout ${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>
-          )}
-
-          {props.children}
-          <AuthContent />
-        </div>
+        <AuthLayoutContext.Provider value={{ hideHeader }}>
+          {/* Full-screen success overlay */}
+          <AuthSuccessOverlay />
+
+          <div className={`auth-layout ${className || ''}`}>
+            <GlowBackground />
+
+            {/* Content layer above glow */}
+            <div style={{ position: 'relative', zIndex: 1, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+              {/* 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>
+              )}
+
+              <AuthHeaderSlot>{props.children}</AuthHeaderSlot>
+              <AuthContent />
+            </div>
+          </div>
+        </AuthLayoutContext.Provider>
       </AuthFormProvider>
     </Suspense>
   );
 };
 
+/** Renders custom children only on the identifier step — hides them on otp / 2fa / etc. */
+const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const { step } = useAuthFormContext();
+  if (!children || step !== 'identifier') return null;
+  return <>{children}</>;
+};
+
 const AuthContent: React.FC = () => {
   const { step, setStep } = useAuthFormContext();
 
@@ -101,7 +130,7 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = ({
   redirectDelay = AUTH.REDIRECT_DELAY,
 }) => {
   const router = useCfgRouter();
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const [isVisible, setIsVisible] = useState(false);
 
   const successMessage = React.useMemo(() => t('layouts.auth.success.message'), [t]);

package/src/layouts/AuthLayout/README.md

@@ -0,0 +1,78 @@
+# AuthLayout
+
+Apple HIG-style authentication layout with animated mesh gradient background.
+
+Supports: email OTP, phone OTP, GitHub OAuth, 2FA (TOTP + backup codes).
+
+## Usage
+
+```tsx
+import { AuthLayout } from '@djangocfg/layouts';
+
+<AuthLayout
+  sourceUrl="https://myapp.com"
+  redirectUrl="/dashboard"
+  enableGithubAuth
+  termsUrl="/terms"
+  privacyUrl="/privacy"
+>
+  {/* Optional: custom header shown only on the identifier step */}
+  <div>
+    <h1>Welcome to MyApp</h1>
+    <p>Sign in to continue</p>
+  </div>
+</AuthLayout>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `sourceUrl` | `string` | — | App URL for analytics/tracking |
+| `redirectUrl` | `string` | `/dashboard` | Where to redirect after auth |
+| `enableGithubAuth` | `boolean` | `false` | Show GitHub OAuth button |
+| `enablePhoneAuth` | `boolean` | `false` | Allow phone number input |
+| `enable2FASetup` | `boolean` | `true` | Prompt 2FA setup after login |
+| `logoUrl` | `string` | — | Logo shown on success screen |
+| `termsUrl` | `string` | — | Terms of service link |
+| `privacyUrl` | `string` | — | Privacy policy link |
+| `supportUrl` | `string` | — | Support page link |
+| `className` | `string` | — | Extra class on root element |
+| `children` | `ReactNode` | — | Custom header (identifier step only) |
+
+## Callbacks
+
+```tsx
+<AuthLayout
+  onIdentifierSuccess={(identifier) => console.log('identifier:', identifier)}
+  onOTPSuccess={() => console.log('otp verified')}
+  onOAuthSuccess={(user, isNewUser, provider) => console.log(provider, user)}
+  onError={(message) => console.error(message)}
+/>
+```
+
+## Auth Steps
+
+| Step | Description |
+|---|---|
+| `identifier` | Email or phone input |
+| `otp` | 6-digit OTP code entry |
+| `2fa` | TOTP or backup code verification |
+| `2fa-setup` | QR code + backup codes setup |
+| `success` | Full-screen success overlay → redirect |
+
+`children` (custom header) are only rendered on the `identifier` step — hidden on all others.
+
+## Background
+
+The animated mesh gradient background (`GlowBackground`) is always rendered. It uses `position: absolute inset-0` inside the layout container and works on both light and dark themes.
+
+## Context
+
+Step components can access form state via `useAuthFormContext()`:
+
+```tsx
+import { useAuthFormContext } from '@djangocfg/layouts';
+
+const { step, identifier, isLoading } = useAuthFormContext();
+```

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

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 export interface AuthDividerProps {
   text?: string;
@@ -16,7 +16,7 @@ export const AuthDivider: React.FC<AuthDividerProps> = ({
   text,
   className = '',
 }) => {
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const defaultText = useMemo(() => t('layouts.auth.divider.or'), [t]);
   const dividerText = text ?? defaultText;
 

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

@@ -19,8 +19,16 @@ export const AuthError: React.FC<AuthErrorProps> = ({
   }
 
   return (
-    <div className={`auth-error ${className}`} role="alert">
-      {message}
+    <div className={`auth-error ${className}`} role="alert" aria-live="assertive">
+      <svg
+        className="auth-error-icon"
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 3.5a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4.5zm0 6.5a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5z" />
+      </svg>
+      <span>{message}</span>
     </div>
   );
 };

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

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 
-import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
+import { useAppT } from '@djangocfg/i18n';
 
 export interface AuthFooterProps {
   termsUrl?: string;
@@ -20,7 +20,7 @@ export const AuthFooter: React.FC<AuthFooterProps> = ({
   supportUrl,
   className = '',
 }) => {
-  const t = useTypedT<I18nTranslations>();
+  const t = useAppT();
   const labels = useMemo(() => ({
     terms: t('layouts.auth.footer.terms'),
     privacy: t('layouts.auth.footer.privacy'),

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

@@ -34,15 +34,16 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({
           alt=""
           className="auth-logo"
           aria-hidden="true"
+          draggable={false}
         />
       )}
       <h1 className="auth-title">{title}</h1>
       {subtitle && (
-        <p className="auth-subtitle">
+        <p className="auth-subtitle" aria-live="polite">
           {subtitle}
           {identifier && (
             <>
-              <br />
+              {' '}
               <span className="auth-identifier">{identifier}</span>
             </>
           )}

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

@@ -12,6 +12,7 @@ export interface AuthOTPInputProps {
   onComplete?: (value: string) => void;
   disabled?: boolean;
   autoFocus?: boolean;
+  size?: 'sm' | 'default' | 'lg';
 }
 
 /**
@@ -25,6 +26,7 @@ export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
   onComplete,
   disabled = false,
   autoFocus = true,
+  size,
 }) => (
   <div className="auth-otp-container auth-otp-wrapper">
     <OTPInput
@@ -36,7 +38,8 @@ export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
       onComplete={onComplete}
       disabled={disabled}
       autoFocus={autoFocus}
-      size="lg"
+      size={size}
+      fluid
     />
   </div>
 );