@djangocfg/layouts 2.1.422 → 2.1.424

package/package.json

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

package/src/components/errors/ErrorsTracker/components/ErrorToast.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { extractDomain, formatErrorTitle, formatZodIssues } from '../utils/formatters';
+import { extractDomain, formatErrorTitle, formatZodIssues, safeZodIssues } from '../utils/formatters';
 import { ErrorButtons } from './ErrorButtons';
 
 import type {
@@ -39,9 +39,11 @@ function buildValidationDescription(
 
   // Add error count
   if (config.showErrorCount) {
-    const count = detail.error.issues.length;
-    const plural = count === 1 ? 'error' : 'errors';
-    descriptionParts.push(`${count} ${plural}`);
+    const count = safeZodIssues(detail.error).length;
+    if (count > 0) {
+      const plural = count === 1 ? 'error' : 'errors';
+      descriptionParts.push(`${count} ${plural}`);
+    }
   }
 
   // Add formatted error messages

package/src/components/errors/ErrorsTracker/providers/ErrorTrackingProvider.tsx

@@ -302,9 +302,20 @@ export function ErrorTrackingProvider({
     if (validationConfig.enabled) {
       const handler = (event: Event) => {
         if (!(event instanceof CustomEvent)) return;
+        const raw = event.detail ?? {};
+        // The generated client dispatches `{ operation, method, path, issues,
+        // data, timestamp }` — i.e. `issues`/`data`, not a `ZodError` in
+        // `error`. Normalise into the ValidationErrorDetail shape so the toast
+        // can render issue count/messages (and never read undefined.issues).
+        const error =
+          raw.error && Array.isArray(raw.error.issues)
+            ? raw.error
+            : { issues: Array.isArray(raw.issues) ? raw.issues : [] };
         const detail: ValidationErrorDetail = {
-          ...event.detail,
+          ...raw,
           type: 'validation' as const,
+          error: error as ValidationErrorDetail['error'],
+          response: raw.response ?? raw.data,
         };
         handleError(detail, validationConfig);
       };

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

@@ -9,18 +9,31 @@ import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, Centri
 import type { MonitorEvent } from '@djangocfg/monitor';
 import { EventType, EventLevel } from '@djangocfg/monitor';
 
+/**
+ * Safely read Zod issues. The error toast must never crash itself, so we
+ * tolerate a missing/malformed `error` (e.g. a non-ZodError slipping through)
+ * instead of throwing `Cannot read properties of undefined (reading 'issues')`.
+ */
+export function safeZodIssues(error: ZodError | null | undefined): ZodError['issues'] {
+  const issues = (error as ZodError | undefined)?.issues;
+  return Array.isArray(issues) ? issues : [];
+}
+
 /**
  * Format Zod error issues for display
  */
 export function formatZodIssues(error: ZodError, maxIssues: number = 3): string {
-  const issues = error.issues.slice(0, maxIssues);
+  const allIssues = safeZodIssues(error);
+  if (allIssues.length === 0) return '';
+
+  const issues = allIssues.slice(0, maxIssues);
   const formatted = issues.map((issue) => {
     const path = issue.path.join('.') || 'root';
     return `${path}: ${issue.message}`;
   });
 
-  if (error.issues.length > maxIssues) {
-    formatted.push(`... and ${error.issues.length - maxIssues} more`);
+  if (allIssues.length > maxIssues) {
+    formatted.push(`... and ${allIssues.length - maxIssues} more`);
   }
 
   return formatted.join(', ');
@@ -30,6 +43,7 @@ export function formatZodIssues(error: ZodError, maxIssues: number = 3): string
  * Format validation error for clipboard
  */
 export function formatValidationErrorForClipboard(detail: ValidationErrorDetail): string {
+  const issues = safeZodIssues(detail.error);
   const errorData = {
     type: 'validation',
     timestamp: detail.timestamp.toISOString(),
@@ -38,7 +52,7 @@ export function formatValidationErrorForClipboard(detail: ValidationErrorDetail)
       method: detail.method,
       path: detail.path,
     },
-    validation_errors: detail.error.issues.map((issue) => ({
+    validation_errors: issues.map((issue) => ({
       path: issue.path.join('.') || 'root',
       message: issue.message,
       code: issue.code,
@@ -48,7 +62,7 @@ export function formatValidationErrorForClipboard(detail: ValidationErrorDetail)
       ...(('maximum' in issue) && { maximum: issue.maximum }),
     })),
     response: detail.response,
-    total_errors: detail.error.issues.length,
+    total_errors: issues.length,
   };
 
   return JSON.stringify(errorData, null, 2);

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -17,7 +17,7 @@ import { useAppT } from '@djangocfg/i18n';
 
 import { Suspense } from '../../components';
 import { OAuthCallback } from './components/oauth';
-import { IdentifierStep, OTPStep, SetupStep, TwoFactorStep } from './components/steps';
+import { IdentifierStep, OTPStep, TwoFactorStep } from './components/steps';
 import { AUTH } from './constants';
 import { AuthFormProvider, useAuthFormContext } from './context';
 import { AuthShell } from './shells';
@@ -25,6 +25,7 @@ import { AuthShell } from './shells';
 import './styles/auth.css';
 import './styles/centered-shell.css';
 import './styles/split-shell.css';
+import './styles/fullsplit-shell.css';
 
 import type { AuthLayoutProps } from './types';
 
@@ -43,7 +44,8 @@ export const useAuthLayoutContext = (): AuthLayoutContextValue => useContext(Aut
 
 export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
   const {
-    variant = 'centered',
+    variant = 'fullsplit',
+    mediaSide = 'left',
     background,
     sidebar,
     enableGithubAuth,
@@ -78,7 +80,7 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
           {/* Full-screen success overlay */}
           <AuthSuccessOverlay />
 
-          <AuthShell variant={variant} background={background} sidebar={sidebar} className={className}>
+          <AuthShell variant={variant} mediaSide={mediaSide} background={background} sidebar={sidebar} className={className}>
             {/* Handle OAuth callback when GitHub auth is enabled */}
             {oauthCallback}
 
@@ -99,7 +101,7 @@ const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = memo(({ childre
 });
 
 const AuthContent: React.FC = memo(() => {
-  const { step, setStep } = useAuthFormContext();
+  const { step } = useAuthFormContext();
 
   switch (step) {
     case 'identifier':
@@ -107,14 +109,9 @@ const AuthContent: React.FC = memo(() => {
     case 'otp':
       return <OTPStep />;
     case '2fa':
+      // Sign-in verifies an *existing* 2FA challenge only. Setting up 2FA is
+      // owned by ProfileLayout, so the flow never renders the setup step.
       return <TwoFactorStep />;
-    case '2fa-setup':
-      return (
-        <SetupStep
-          onComplete={() => setStep('success')}
-          onSkip={() => setStep('success')}
-        />
-      );
     case 'success':
       // Success is rendered as full-screen overlay, return null here
       return null;

package/src/layouts/AuthLayout/README.md

@@ -1,14 +1,39 @@
 # AuthLayout
 
-Shell-based authentication layout with two visual variants:
-- `centered` (default) — Apple HIG-style, frameless, centered, glow background
-- `split` — Two-column on desktop (form + sidebar), single-column on mobile
-
-Supports: email OTP, phone OTP, GitHub OAuth, 2FA (TOTP + backup codes).
+Shell-based authentication layout with three visual variants:
+- `fullsplit` **(default)** — **full-bleed 50/50** (the large-SaaS look —
+  Vercel / Linear / IBM). Desktop: edge-to-edge — `background` image on one side
+  (left by default, see `mediaSide`) with the `sidebar` (quote/brand) overlaid
+  and a soft bottom-up shadow scrim; form on a solid panel on the other side.
+  The photo fades in once loaded and gets a slow Ken Burns zoom. Mobile: the
+  image half drops away, leaving a plain centered form.
+- `centered` — Apple HIG-style, frameless, centered, glow background.
+- `split` — on desktop a two-column **frosted-glass** card (form + sidebar)
+  floating over the `background` image; on mobile it collapses to a plain,
+  frameless centered form (no image, no glass, no sidebar).
+
+The logo (when `logoUrl` is set) always renders above the form across all
+variants; the `sidebar` slot should carry the quote/illustration, not a second
+brand mark.
+
+Supports: email OTP, phone OTP, GitHub OAuth, and **verifying** an existing 2FA
+challenge (TOTP + backup codes).
+
+**Consent, not a checkbox.** There is no opt-in terms checkbox — continuing *is*
+the consent. When `termsUrl`/`privacyUrl` are set, a passive line ("By continuing
+you agree to the Terms and Privacy Policy") renders under the submit button with
+links that open in a new tab. The copy is intentionally hardcoded English (legal
+document names stay in English across locales) — see `shared/AuthConsent`.
+
+> **2FA setup is not part of the sign-in flow.** Authentication only verifies
+> identity — it checks the OTP and, if the account already has 2FA, prompts for
+> the TOTP/backup code. *Configuring* 2FA (QR + backup codes) lives in
+> **ProfileLayout** (`TwoFactorSection`). The sign-in flow never shows a setup
+> prompt.
 
 ## Usage
 
-### Centered variant (default)
+### Centered variant
 
 ```tsx
 import { AuthLayout } from '@djangocfg/layouts';
@@ -60,17 +85,17 @@ import { AuthLayout } from '@djangocfg/layouts';
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `variant` | `'centered' \| 'split'` | `'centered'` | Shell layout variant |
+| `variant` | `'centered' \| 'split' \| 'fullsplit'` | `'fullsplit'` | Shell layout variant |
+| `mediaSide` | `'left' \| 'right'` | `'left'` | Which side the image half sits on (`fullsplit` only) |
 | `background` | `AuthBackgroundConfig` | — | Background image/gradient/overlay/blur |
 | `sidebar` | `ReactNode` | — | Right column content (split variant only) |
 | `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 |
+| `logoUrl` | `string` | — | Logo shown above the form (centered only) and on the success screen |
+| `termsUrl` | `string` | — | Terms link — rendered in the passive consent line (opens in a new tab) |
+| `privacyUrl` | `string` | — | Privacy link — rendered in the passive consent line (opens in a new tab) |
 | `supportUrl` | `string` | — | Support page link |
 | `className` | `string` | — | Extra class on root element |
 | `children` | `ReactNode` | — | Custom header (identifier step only) |
@@ -97,16 +122,21 @@ import { AuthLayout } from '@djangocfg/layouts';
 
 ## Auth Steps
 
+The sign-in flow walks these steps:
+
 | Step | Description |
 |---|---|
 | `identifier` | Email or phone input |
 | `otp` | 4-digit email OTP code entry |
-| `2fa` | TOTP or backup code verification |
-| `2fa-setup` | QR code + backup codes setup |
+| `2fa` | TOTP or backup code verification (only if the account already has 2FA) |
 | `success` | Full-screen success overlay → redirect |
 
 `children` (custom header) are only rendered on the `identifier` step — hidden on all others.
 
+> The `AuthStep` union also includes `'2fa-setup'`, but the sign-in flow never
+> transitions to it. That value backs the standalone setup UI (`SetupStep` /
+> `SetupStepStandalone`) which **ProfileLayout** reuses for configuring 2FA.
+
 ## Architecture
 
 AuthLayout is built on a **shell pattern** (inspired by PublicLayout's navbar/footer slots):
@@ -116,15 +146,17 @@ AuthLayout/
 ├── shells/
 │   ├── AuthShell.tsx      — Orchestrator: loads bg image, dispatches variant
 │   ├── CenteredShell.tsx  — Apple-style frameless layout
-│   ├── SplitShell.tsx     — Two-column card layout
+│   ├── SplitShell.tsx     — Floating frosted-glass card layout
+│   ├── FullSplitShell.tsx — Full-bleed 50/50 layout
 │   ├── context.tsx        — Shell context (variant, hasSidebar)
 │   └── types.ts           — AuthShellVariant, AuthBackgroundConfig
 ├── components/steps/      — Auth step components (IdentifierStep, OTPStep, ...)
-├── components/shared/     — Reusable UI primitives (AuthButton, AuthHeader, ...)
+├── components/shared/     — Reusable UI primitives (AuthButton, AuthConsent, ...)
 ├── styles/
-│   ├── auth.css           — Shared form/button/input styles
-│   ├── centered-shell.css — Centered variant layout
-│   └── split-shell.css    — Split variant layout
+│   ├── auth.css            — Shared form/button/input styles
+│   ├── centered-shell.css  — Centered variant layout
+│   ├── split-shell.css     — Split variant layout
+│   └── fullsplit-shell.css — Full-bleed split variant layout
 ```
 
 Adding a new variant:

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

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { memo } from 'react';
+
+export interface AuthConsentProps {
+  termsUrl?: string;
+  privacyUrl?: string;
+  className?: string;
+}
+
+/**
+ * AuthConsent — passive consent line shown under the submit button.
+ *
+ * Replaces the old opt-in checkbox: continuing *is* the consent, so this only
+ * informs and links out. Shared by both the Centered and Split forms.
+ *
+ * The legal copy is intentionally hardcoded English and NOT translated:
+ * "Terms"/"Privacy Policy" are proper names of legal documents that stay in
+ * English across locales, and the one-line "By continuing…" boilerplate isn't
+ * worth a 17-locale i18n key. Links always open in a new tab.
+ *
+ * Renders nothing when neither legal URL is provided (no empty line).
+ *
+ * Memoised: re-renders only when the URL props or className change.
+ */
+function AuthConsentRaw({ termsUrl, privacyUrl, className = '' }: AuthConsentProps) {
+  if (!termsUrl && !privacyUrl) return null;
+
+  const link = (href: string, label: string) => (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="auth-consent-link">
+      {label}
+    </a>
+  );
+
+  return (
+    <p className={`auth-consent ${className}`}>
+      By continuing you agree to the{' '}
+      {termsUrl && link(termsUrl, 'Terms')}
+      {termsUrl && privacyUrl && ' and '}
+      {privacyUrl && link(privacyUrl, 'Privacy Policy')}
+      .
+    </p>
+  );
+}
+
+export const AuthConsent = memo(AuthConsentRaw);

package/src/layouts/AuthLayout/components/shared/index.ts

@@ -6,7 +6,7 @@ export { AuthError } from './AuthError';
 export { AuthButton } from './AuthButton';
 export { AuthLink } from './AuthLink';
 export { AuthOTPInput } from './AuthOTPInput';
-export { TermsCheckbox } from './TermsCheckbox';
+export { AuthConsent } from './AuthConsent';
 
 export type { AuthContainerProps } from './AuthContainer';
 export type { AuthHeaderProps } from './AuthHeader';
@@ -16,4 +16,4 @@ export type { AuthErrorProps } from './AuthError';
 export type { AuthButtonProps } from './AuthButton';
 export type { AuthLinkProps } from './AuthLink';
 export type { AuthOTPInputProps } from './AuthOTPInput';
-export type { TermsCheckboxProps } from './TermsCheckbox';
+export type { AuthConsentProps } from './AuthConsent';

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -11,21 +11,20 @@ import { useAuthLayoutContext } from '../../AuthLayout';
 import { useAuthFormContext } from '../../context';
 import {
   AuthButton,
+  AuthConsent,
   AuthContainer,
   AuthDivider,
   AuthError,
-  AuthFooter,
   AuthHeader,
-  TermsCheckbox,
 } from '../shared';
 
 /**
  * IdentifierStep - Apple-style email input step.
  *
  * Clean, minimal design with:
- * - Optional logo
+ * - Optional logo (hidden in the split variant — sidebar carries the brand)
  * - Single email input field
- * - Terms checkbox
+ * - Passive consent line (continuing = consent; no opt-in checkbox)
  * - OAuth options
  *
  * Memoised: this component has no props; it reads everything from
@@ -40,18 +39,15 @@ function IdentifierStepRaw() {
   const {
     identifier,
     isLoading,
-    acceptedTerms,
     error,
     isRateLimited,
     rateLimitLabel,
     logoUrl,
     termsUrl,
     privacyUrl,
-    supportUrl,
     enableGithubAuth,
     sourceUrl,
     setIdentifier,
-    setAcceptedTerms,
     setError,
     handleIdentifierSubmit,
   } = useAuthFormContext();
@@ -78,8 +74,6 @@ function IdentifierStepRaw() {
     onError: setError,
   });
 
-  const hasTerms = Boolean(termsUrl || privacyUrl);
-
   return (
     <AuthContainer step="identifier">
       {!hideHeader && <AuthHeader logo={logoUrl} title={content.title} subtitle={content.subtitle.email} />}
@@ -87,32 +81,31 @@ function IdentifierStepRaw() {
       <form onSubmit={handleIdentifierSubmit} className="auth-form-group">
         <Input
           type="email"
+          name="email"
           value={identifier}
           onChange={(e) => setIdentifier(e.target.value)}
           placeholder={content.placeholder.email}
           disabled={isLoading}
           required
           autoFocus
-          autoComplete="off"
+          autoComplete="email"
+          inputMode="email"
+          autoCapitalize="off"
+          spellCheck={false}
           className="auth-input"
         />
 
-        <TermsCheckbox
-          checked={acceptedTerms}
-          onChange={setAcceptedTerms}
-          termsUrl={termsUrl}
-          privacyUrl={privacyUrl}
-          disabled={isLoading}
-        />
-
         <AuthError message={error} />
 
         <AuthButton
           loading={isLoading}
-          disabled={!identifier || (hasTerms && !acceptedTerms) || isRateLimited}
+          disabled={!identifier || isRateLimited}
         >
           {isRateLimited ? `${content.button} (${rateLimitLabel})` : content.button}
         </AuthButton>
+
+        {/* Continuing implies consent — passive line, no opt-in checkbox. */}
+        <AuthConsent termsUrl={termsUrl} privacyUrl={privacyUrl} />
       </form>
 
       {enableGithubAuth && (
@@ -129,12 +122,6 @@ function IdentifierStepRaw() {
           </AuthButton>
         </>
       )}
-
-      <AuthFooter
-        termsUrl={termsUrl}
-        privacyUrl={privacyUrl}
-        supportUrl={supportUrl}
-      />
     </AuthContainer>
   );
 }

package/src/layouts/AuthLayout/context.tsx

@@ -25,7 +25,6 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   termsUrl,
   privacyUrl,
   enableGithubAuth = false,
-  enable2FASetup = true,
   logoUrl,
   redirectUrl,
   onIdentifierSuccess,
@@ -45,7 +44,6 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
     sourceUrl,
     redirectUrl,
     requireTermsAcceptance,
-    enable2FASetup,
   });
 
   const value: AuthFormContextType = useMemo(
@@ -57,7 +55,6 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       termsUrl,
       privacyUrl,
       enableGithubAuth,
-      enable2FASetup,
       logoUrl,
       redirectUrl,
     }),
@@ -69,7 +66,6 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       termsUrl,
       privacyUrl,
       enableGithubAuth,
-      enable2FASetup,
       logoUrl,
       redirectUrl,
     ]

package/src/layouts/AuthLayout/shells/AuthShell.tsx

@@ -6,6 +6,7 @@ import { useImageLoader } from '@djangocfg/ui-core/hooks';
 
 import { AuthShellProvider } from './context';
 import { CenteredShell } from './CenteredShell';
+import { FullSplitShell } from './FullSplitShell';
 import { SplitShell } from './SplitShell';
 import type { AuthShellProps } from './types';
 
@@ -27,13 +28,18 @@ import type { AuthShellProps } from './types';
 function AuthShellRaw({
   variant,
   children,
+  mediaSide = 'left',
   background,
   sidebar,
   className,
 }: AuthShellProps) {
   const { isLoaded: bgLoaded, hasError: bgError } = useImageLoader(background?.imageUrl);
 
-  const hasBgImage = Boolean(background?.imageUrl) && bgLoaded && !bgError;
+  // Build the image style as soon as a URL is provided (the image is
+  // pre-warmed by useImageLoader, so painting it doesn't flash). `bgLoaded`
+  // is passed through separately so the shell can fade the layer in once the
+  // download actually completes — a quiet preloader, no spinner.
+  const hasBgImage = Boolean(background?.imageUrl) && !bgError;
 
   const bgStyle = useMemo(() => {
     if (hasBgImage && background?.imageUrl) {
@@ -71,12 +77,15 @@ function AuthShellRaw({
     bgStyle,
     overlayStyle,
     blurValue,
+    bgLoaded,
   };
 
   return (
     <AuthShellProvider value={shellContext}>
       {variant === 'split' ? (
         <SplitShell {...commonShellProps} sidebar={sidebar} />
+      ) : variant === 'fullsplit' ? (
+        <FullSplitShell {...commonShellProps} mediaSide={mediaSide} sidebar={sidebar} />
       ) : (
         <CenteredShell {...commonShellProps} />
       )}

package/src/layouts/AuthLayout/shells/FullSplitShell.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { memo } from 'react';
+
+import type { ShellRenderProps } from './types';
+
+interface FullSplitShellProps extends ShellRenderProps {
+  sidebar?: React.ReactNode;
+}
+
+/**
+ * FullSplitShell — full-bleed 50/50 auth layout (the large-SaaS look).
+ *
+ * Desktop (>= lg): edge-to-edge. Left half is the background image with an
+ *   overlay and the `sidebar` content (brand + quote) laid over it; right half
+ *   is a solid `--background` panel with the centered form.
+ * Mobile (< lg): the image half is dropped entirely — just the plain centered
+ *   form on `--background`, like an ordinary sign-in screen.
+ *
+ * No floating card, no glass: the two halves meet edge-to-edge, which reads as
+ * a considered product layout rather than a panel hovering in space.
+ *
+ * Memoised: re-renders only when bgStyle, overlayStyle, blurValue, sidebar or
+ * children references change.
+ */
+function FullSplitShellRaw({
+  children,
+  className,
+  bgStyle,
+  overlayStyle,
+  blurValue,
+  mediaSide = 'left',
+  bgLoaded = false,
+  sidebar,
+}: FullSplitShellProps) {
+  return (
+    <div
+      className={`auth-shell-fullsplit ${className || ''}`}
+      data-media-side={mediaSide}
+    >
+      {/* Media half — `data-loaded` drives the image fade-in. */}
+      <div className="auth-shell-fullsplit__media">
+        {bgStyle && (
+          <div
+            className="auth-shell-fullsplit__bg"
+            style={bgStyle}
+            data-loaded={bgLoaded}
+          />
+        )}
+        {overlayStyle && (
+          <div
+            className="auth-shell-fullsplit__overlay"
+            style={{
+              ...overlayStyle,
+              backdropFilter: blurValue ? `blur(${blurValue})` : undefined,
+              WebkitBackdropFilter: blurValue ? `blur(${blurValue})` : undefined,
+            }}
+          />
+        )}
+        {sidebar && (
+          <div className="auth-shell-fullsplit__sidebar">{sidebar}</div>
+        )}
+      </div>
+
+      {/* Right: solid panel with the centered form */}
+      <div className="auth-shell-fullsplit__form">
+        <div className="auth-shell-fullsplit__form-inner">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export const FullSplitShell = memo(FullSplitShellRaw);