@djangocfg/layouts 2.1.423 → 2.1.425

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.423",
+  "version": "2.1.425",
   "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.423",
-    "@djangocfg/centrifugo": "^2.1.423",
-    "@djangocfg/debuger": "^2.1.423",
-    "@djangocfg/i18n": "^2.1.423",
-    "@djangocfg/monitor": "^2.1.423",
-    "@djangocfg/ui-core": "^2.1.423",
-    "@djangocfg/ui-nextjs": "^2.1.423",
+    "@djangocfg/api": "^2.1.425",
+    "@djangocfg/centrifugo": "^2.1.425",
+    "@djangocfg/debuger": "^2.1.425",
+    "@djangocfg/i18n": "^2.1.425",
+    "@djangocfg/monitor": "^2.1.425",
+    "@djangocfg/ui-core": "^2.1.425",
+    "@djangocfg/ui-nextjs": "^2.1.425",
     "@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.423",
-    "@djangocfg/centrifugo": "^2.1.423",
-    "@djangocfg/debuger": "^2.1.423",
-    "@djangocfg/i18n": "^2.1.423",
-    "@djangocfg/monitor": "^2.1.423",
-    "@djangocfg/typescript-config": "^2.1.423",
-    "@djangocfg/ui-core": "^2.1.423",
-    "@djangocfg/ui-nextjs": "^2.1.423",
-    "@djangocfg/ui-tools": "^2.1.423",
+    "@djangocfg/api": "^2.1.425",
+    "@djangocfg/centrifugo": "^2.1.425",
+    "@djangocfg/debuger": "^2.1.425",
+    "@djangocfg/i18n": "^2.1.425",
+    "@djangocfg/monitor": "^2.1.425",
+    "@djangocfg/typescript-config": "^2.1.425",
+    "@djangocfg/ui-core": "^2.1.425",
+    "@djangocfg/ui-nextjs": "^2.1.425",
+    "@djangocfg/ui-tools": "^2.1.425",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

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

package/src/layouts/AuthLayout/shells/types.ts

@@ -12,11 +12,15 @@ import type { CSSProperties, ReactNode } from 'react';
 // ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * - `centered` — Apple-style frameless, centered, glow background (default).
- * - `split`    — Two-column: form left, sidebar right on desktop;
- *                single-column centered on mobile.
+ * - `centered`  — Apple-style frameless, centered, glow background (default).
+ * - `split`     — Floating two-column card: form left, sidebar right on
+ *                 desktop; single-column centered on mobile.
+ * - `fullsplit` — Full-bleed 50/50: edge-to-edge background image on the left
+ *                 (brand + quote overlaid), form on a solid panel on the right.
+ *                 Mobile collapses to a plain centered form. The large-SaaS
+ *                 look (Vercel / Linear / IBM).
  */
-export type AuthShellVariant = 'centered' | 'split';
+export type AuthShellVariant = 'centered' | 'split' | 'fullsplit';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Background Configuration
@@ -40,6 +44,8 @@ export interface AuthBackgroundConfig {
 export interface AuthShellProps {
   variant: AuthShellVariant;
   children: ReactNode;
+  /** Which side the media half sits on (fullsplit only). @default 'left' */
+  mediaSide?: 'left' | 'right';
   /** Background configuration — image, gradient, overlay, blur. */
   background?: AuthBackgroundConfig;
   /** Slot for the right column in split variant (testimonial, branding, etc.). */
@@ -54,6 +60,10 @@ export interface ShellRenderProps {
   bgStyle?: CSSProperties;
   overlayStyle?: CSSProperties;
   blurValue?: string;
+  /** Which side the media half sits on (fullsplit only). @default 'left' */
+  mediaSide?: 'left' | 'right';
+  /** True once the background image has finished loading (drives fade-in). */
+  bgLoaded?: boolean;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/src/layouts/AuthLayout/styles/auth.css

@@ -91,10 +91,10 @@
 }
 
 .auth-title {
-  font-size: 1.625rem;
-  font-weight: 700;
-  line-height: 1.15;
-  letter-spacing: -0.025em;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
   color: var(--foreground);
   margin: 0;
 }
@@ -124,8 +124,14 @@
   height: 3rem;
   padding: 0 0.875rem;
   font-size: 0.9375rem;
-  background: var(--input);
-  border: 1px solid var(--border);
+  /* The field is defined by its border, not a fill that fights its container.
+     `--input` alone matched `--border` (~90% on light) and dissolved; a fill
+     of `--card` would instead dissolve inside the Split card (also --card).
+     So: a recessed `--background` fill + a deliberately visible border that
+     bounds the field on both the frameless Centered shell and the --card
+     Split panel. */
+  background: var(--background);
+  border: 1px solid color-mix(in oklab, var(--border) 70%, var(--foreground));
   border-radius: var(--auth-radius-sm);
   color: var(--foreground);
   transition:
@@ -133,6 +139,10 @@
     box-shadow 0.18s var(--spring-snappy);
 }
 
+.auth-input:hover:not(:focus):not(:disabled) {
+  border-color: color-mix(in oklab, var(--border) 60%, var(--foreground));
+}
+
 .auth-input:focus {
   outline: none;
   border-color: var(--ring);
@@ -153,8 +163,8 @@
   height: 3rem;
   padding: 0 0.875rem;
   font-size: 0.9375rem;
-  background: var(--input);
-  border: 1px solid var(--border);
+  background: var(--background);
+  border: 1px solid color-mix(in oklab, var(--border) 70%, var(--foreground));
   border-radius: var(--auth-radius-sm);
   color: var(--foreground);
   transition:
@@ -195,7 +205,6 @@
 }
 
 .auth-button:disabled {
-  opacity: 0.45;
   cursor: not-allowed;
 }
 
@@ -204,10 +213,30 @@
   color: var(--primary-foreground);
 }
 
+/* Disabled primary: read as genuinely inactive — a flat neutral fill with
+   muted text — rather than a translucent version of the active blue, which
+   the old `opacity: .45` produced (it still looked clickable). */
+.auth-button-primary:disabled {
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+
+/* GitHub / OAuth: a quiet outline button so the email path (primary) stays
+   the single loudest action. `--secondary` in light is near-black, which made
+   the secondary path shout louder than the primary one — HIG wants one accent. */
 .auth-button-secondary {
-  background: var(--secondary);
-  color: var(--secondary-foreground);
-  border: none;
+  background: transparent;
+  color: var(--foreground);
+  border: 1px solid var(--border);
+}
+
+.auth-button-secondary:hover:not(:disabled) {
+  background: var(--accent);
+  opacity: 1;
+}
+
+.auth-button-secondary:disabled {
+  opacity: 0.45;
 }
 
 .auth-button:hover:not(:disabled) {
@@ -344,30 +373,26 @@
   opacity: 0.25;
 }
 
-/* ===== TERMS ===== */
+/* ===== CONSENT (passive line under the submit button) ===== */
 
-.auth-terms {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  font-size: 0.8125rem;
+.auth-consent {
+  margin: 0;
+  text-align: center;
+  font-size: 0.75rem;
   line-height: 1.5;
   color: var(--muted-foreground);
 }
 
-.auth-terms-checkbox {
-  margin-top: 0.125rem;
-  flex-shrink: 0;
-}
-
-.auth-terms a {
-  color: var(--primary);
-  text-decoration: none;
-  transition: opacity 0.15s;
+.auth-consent-link {
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
+  transition: color 0.15s;
 }
 
-.auth-terms a:hover {
-  opacity: 0.75;
+.auth-consent-link:hover {
+  color: var(--foreground);
 }
 
 /* ===== REMEMBER ME ===== */
@@ -463,8 +488,8 @@
   font-weight: 600;
   text-align: center;
   letter-spacing: -0.01em;
-  background: var(--input);
-  border: 1px solid var(--border);
+  background: var(--background);
+  border: 1px solid color-mix(in oklab, var(--border) 70%, var(--foreground));
   border-radius: var(--auth-radius-sm);
   color: var(--foreground);
   transition:
@@ -654,20 +679,17 @@
 
 /* ===== DEV NOTICE ===== */
 
+/* Uses the shared warning surface tokens (defined for both themes) instead of
+   hardcoded amber — keeps the dev banner consistent with the rest of the
+   system and drops the manual `.dark` override. */
 .auth-dev-notice {
   padding: 0.5rem 0.75rem;
   font-size: 0.75rem;
   text-align: center;
-  color: hsl(38 92% 40%);
-  background: hsl(38 92% 95%);
+  color: var(--warning-foreground);
+  background: var(--warning-background);
   border-radius: var(--auth-radius-xs);
-  border: 1px solid hsl(38 92% 80%);
-}
-
-.dark .auth-dev-notice {
-  color: hsl(38 92% 65%);
-  background: hsl(38 92% 15%);
-  border-color: hsl(38 92% 30%);
+  border: 1px solid var(--warning-border);
 }
 
 /* ===== INSTRUCTION ===== */

package/src/layouts/AuthLayout/styles/fullsplit-shell.css

@@ -0,0 +1,172 @@
+/**
+ * Full-Split Shell Styles
+ *
+ * Full-bleed 50/50 auth layout (Vercel / Linear / IBM style).
+ * Desktop (>= lg): edge-to-edge — image half (left) + form panel (right).
+ * Mobile (< lg): image half hidden; plain centered form on --background.
+ */
+
+.auth-shell-fullsplit {
+  position: relative;
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  background: var(--background);
+}
+
+/* ── Media half (left) — hidden on mobile ──────────────────────────────── */
+.auth-shell-fullsplit__media {
+  display: none;
+}
+
+.auth-shell-fullsplit__bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  /* Quiet preloader: the layer starts transparent and fades in only once the
+     image has actually downloaded (data-loaded="true"). No spinner, and the
+     form never waits on this — it renders immediately underneath. */
+  opacity: 0;
+  transition: opacity 0.6s var(--spring-smooth, ease-out);
+  /* Ken Burns — a slow, infinite zoom + drift that makes the hero photo
+     quietly "breathe". `alternate` reverses each cycle so it eases back
+     instead of hard-cutting to the start. Kept very slow (28s) and subtle
+     (max 1.08×) so it reads as life, not motion. The media half is
+     overflow:hidden, so the scaled-up image never reveals its edges. */
+  transform-origin: center;
+  animation: authKenBurns 28s ease-in-out infinite alternate;
+  will-change: transform, opacity;
+}
+
+.auth-shell-fullsplit__bg[data-loaded="true"] {
+  opacity: 1;
+}
+
+/* While the photo loads, the media half shows a calm base surface (not a
+   black void) so the split reads as intentional even on a slow connection. */
+.auth-shell-fullsplit__media {
+  background: var(--muted);
+}
+
+@keyframes authKenBurns {
+  from {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+  to {
+    transform: scale(1.08) translate3d(-1.5%, -1%, 0);
+  }
+}
+
+/* Honour reduced-motion: hold the photo still. */
+@media (prefers-reduced-motion: reduce) {
+  .auth-shell-fullsplit__bg {
+    animation: none;
+    transform: none;
+  }
+}
+
+.auth-shell-fullsplit__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* Sidebar content (brand top, quote bottom) over the photo. */
+.auth-shell-fullsplit__sidebar {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding: 3rem;
+  color: #fff;
+}
+
+/* ── Form half (right) ─────────────────────────────────────────────────── */
+.auth-shell-fullsplit__form {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem clamp(1.5rem, 5vw, 2.5rem);
+  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1rem));
+}
+
+.auth-shell-fullsplit__form-inner {
+  width: 100%;
+  max-width: 360px;
+}
+
+/* ── Desktop: reveal the image half, split 50/50 edge-to-edge ──────────── */
+@media (min-width: 1024px) {
+  /* Mirror: media on the right instead of the left. */
+  .auth-shell-fullsplit[data-media-side="right"] {
+    flex-direction: row-reverse;
+  }
+
+  .auth-shell-fullsplit__media {
+    display: block;
+    position: relative;
+    flex: 1;
+    overflow: hidden;
+    /* Always-present gradient scrim so brand/quote stay legible over any
+       photo, independent of any consumer-supplied overlay. Darkens bottom
+       (where the quote sits) and a touch at the top (brand). */
+    isolation: isolate;
+  }
+
+  .auth-shell-fullsplit__media::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    /* Two stacked scrims:
+       1. A strong shadow rising from the bottom (deep under the quote, easing
+          to nothing by the upper third) — the main legibility layer.
+       2. A faint shadow falling from the top so the brand mark stays readable
+          even over a bright sky. Kept light so the photo stays open.
+       Eased multi-stop curves avoid a hard "band" edge — natural vignette. */
+    background:
+      linear-gradient(
+        to top,
+        hsl(0 0% 0% / 0.78) 0%,
+        hsl(0 0% 0% / 0.55) 18%,
+        hsl(0 0% 0% / 0.28) 38%,
+        hsl(0 0% 0% / 0.08) 60%,
+        transparent 80%
+      ),
+      linear-gradient(
+        to bottom,
+        hsl(0 0% 0% / 0.32) 0%,
+        hsl(0 0% 0% / 0.12) 12%,
+        transparent 26%
+      );
+  }
+
+  /* Sidebar sits above the scrim. */
+  .auth-shell-fullsplit__sidebar {
+    z-index: 2;
+  }
+
+  .auth-shell-fullsplit__form {
+    flex: 1;
+    padding: 2.5rem;
+  }
+
+  .auth-shell-fullsplit__form-inner {
+    /* Slightly wider on the solid panel — it has room to breathe. */
+    max-width: 380px;
+  }
+}
+
+/* Wider split bias on very large screens — form panel stays a comfortable
+   reading width while the image takes the extra space. */
+@media (min-width: 1536px) {
+  .auth-shell-fullsplit__media {
+    flex: 1.25;
+  }
+}

package/src/layouts/AuthLayout/styles/split-shell.css

@@ -1,9 +1,11 @@
 /**
  * Split Shell Styles
  *
- * Two-column auth layout (desktop) / single-column (mobile).
- * Desktop: card with form left, sidebar right.
- * Mobile: centered form, sidebar hidden.
+ * Mobile (< xl): a plain, frameless centered form — no card, no background
+ *   image, no glass. Reads like an ordinary sign-in screen on small devices.
+ * Desktop (>= xl): a two-column frosted-glass card floating over the
+ *   background image — translucent --card + backdrop blur, form left,
+ *   sidebar right.
  */
 
 .auth-shell-split {
@@ -16,72 +18,29 @@
   padding: 1rem;
 }
 
-/* Background layers */
-.auth-shell-split__bg {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
+/* Background layers — hidden on mobile (plain form), shown on desktop. */
+.auth-shell-split__bg,
 .auth-shell-split__overlay {
+  display: none;
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
 }
 
-/* Card container */
+/* Card container.
+   Mobile: not a card at all — transparent, no border/shadow, just a centered
+   column. Desktop overrides below turn it into the frosted glass panel. */
 .auth-shell-split__card {
   position: relative;
   z-index: 1;
   display: flex;
+  flex-direction: column;
   width: 100%;
-  max-width: 420px;
-  background: var(--background);
+  max-width: 400px;
+  background: transparent;
   border-radius: var(--auth-radius);
-  outline: 1px solid var(--border);
-  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.08);
   overflow: hidden;
-  /* Apple-style frosted entry — the card "condenses" out of the
-     background. Uses the same spring curve (0.16, 1, 0.3, 1) that
-     iOS modal sheets ride on. We animate filter+transform+opacity
-     together so it reads as one continuous gesture, not three
-     stacked tweens. willChange hints the compositor to promote the
-     element ahead of the run; reset to auto on completion (CSS
-     `forwards` keeps the end state implicitly). */
-  animation: authShellCardEntry 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
-  will-change: transform, filter, opacity;
-}
-
-@keyframes authShellCardEntry {
-  0% {
-    opacity: 0;
-    transform: translateY(24px) scale(0.96);
-    filter: blur(10px);
-  }
-  60% {
-    /* Mid-keyframe lets the blur clear faster than the slide so the
-       form contents become readable while the card is still settling
-       — feels responsive instead of waiting on the animation. */
-    filter: blur(0);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    filter: blur(0);
-  }
-}
-
-/* Respect reduced-motion preference — fall back to a plain fade. */
-@media (prefers-reduced-motion: reduce) {
-  .auth-shell-split__card {
-    animation: authShellCardEntryReduced 200ms ease-out both;
-  }
-  @keyframes authShellCardEntryReduced {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
 }
 
 /* Form column */
@@ -90,7 +49,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem 1.5rem;
+  padding: 1rem 0.5rem;
 }
 
 .auth-shell-split__form-inner {
@@ -98,43 +57,87 @@
   max-width: 360px;
 }
 
-/* Sidebar column — hidden by default (mobile) */
+/* Sidebar column — hidden on mobile, shown on desktop. */
 .auth-shell-split__sidebar {
   display: none;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-  padding: 2.5rem 2rem;
-  background: color-mix(in oklab, var(--muted) 25%, transparent);
 }
 
-/* Desktop: show sidebar, expand card */
+/* ── Desktop: frosted-glass two-column card ──────────────────────────────── */
 @media (min-width: 1280px) {
+  .auth-shell-split__bg,
+  .auth-shell-split__overlay {
+    display: block;
+  }
+
   .auth-shell-split__card {
+    flex-direction: row;
     max-width: 960px;
+    /* Give the card real presence on desktop — a taller panel reads as a
+       considered layout rather than a thin strip, and gives the sidebar room
+       to breathe. */
+    min-height: 560px;
+    /* Translucent surface + backdrop blur so the background image reads
+       through the panel as frosted glass. color-mix keeps it theme-aware. */
+    background: color-mix(in oklab, var(--card) 72%, transparent);
+    backdrop-filter: blur(20px) saturate(140%);
+    -webkit-backdrop-filter: blur(20px) saturate(140%);
+    color: var(--card-foreground);
+    outline: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
+    box-shadow: 0 24px 64px hsl(0 0% 0% / 0.28);
+    /* Apple-style frosted entry — the card "condenses" out of the background.
+       Same spring curve (0.16, 1, 0.3, 1) iOS modal sheets ride on. */
+    animation: authShellCardEntry 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+    will-change: transform, filter, opacity;
   }
 
   .auth-shell-split__form {
-    padding: 2.5rem;
+    padding: 2.75rem;
   }
 
   .auth-shell-split__sidebar {
     display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 2rem;
+    padding: 2.75rem 2.25rem;
+    /* A subtle tint over the glass marks the brand column without becoming a
+       second opaque surface. */
+    background: color-mix(in oklab, var(--muted) 40%, transparent);
+    border-left: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
   }
 }
 
-/* Reduced padding on smaller tablets */
+/* Tablet (1024–1279): keep mobile's plain form but allow a touch more room. */
 @media (min-width: 1024px) and (max-width: 1279px) {
   .auth-shell-split__card {
-    max-width: 880px;
+    max-width: 420px;
   }
+}
 
-  .auth-shell-split__form {
-    padding: 2rem;
+@keyframes authShellCardEntry {
+  0% {
+    opacity: 0;
+    transform: translateY(24px) scale(0.96);
+    filter: blur(10px);
+  }
+  60% {
+    filter: blur(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
   }
+}
 
-  .auth-shell-split__sidebar {
-    display: flex;
-    padding: 2rem 1.5rem;
+/* Respect reduced-motion — fall back to a plain fade. */
+@media (prefers-reduced-motion: reduce) {
+  .auth-shell-split__card {
+    animation: authShellCardEntryReduced 200ms ease-out both;
+  }
+  @keyframes authShellCardEntryReduced {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 }

package/src/layouts/AuthLayout/types.ts

@@ -44,11 +44,6 @@ export interface AuthLayoutConfig {
   logoUrl?: string;
   /** URL to redirect after successful auth (default: /dashboard) */
   redirectUrl?: string;
-  /**
-   * Enable 2FA setup prompt after successful authentication.
-   * @default true
-   */
-  enable2FASetup?: boolean;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -64,8 +59,13 @@ export interface AuthFormContextType extends AuthFormReturn, AuthLayoutConfig {}
 export interface AuthLayoutProps extends AuthLayoutConfig {
   children?: React.ReactNode;
   className?: string;
-  /** Shell variant — controls the overall layout shape. @default 'centered' */
+  /** Shell variant — controls the overall layout shape. @default 'fullsplit' */
   variant?: AuthShellVariant;
+  /**
+   * Which side the media (image) half sits on in the `fullsplit` variant.
+   * Ignored by other variants. @default 'left'
+   */
+  mediaSide?: 'left' | 'right';
   /** Background configuration (image, gradient, overlay, blur). */
   background?: AuthBackgroundConfig;
   /** Slot for the right column in split variant (testimonial, branding, etc.). */

package/src/testing/MockAuthFormProvider.tsx

@@ -53,7 +53,6 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
   termsUrl,
   privacyUrl,
   enableGithubAuth = false,
-  enable2FASetup = true,
   logoUrl,
   redirectUrl = '/dashboard',
 
@@ -152,7 +151,6 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       termsUrl,
       privacyUrl,
       enableGithubAuth,
-      enable2FASetup,
       logoUrl,
       redirectUrl,
     };
@@ -176,7 +174,6 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
     termsUrl,
     privacyUrl,
     enableGithubAuth,
-    enable2FASetup,
     logoUrl,
     redirectUrl,
   ]);

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

@@ -1,72 +0,0 @@
-'use client';
-
-import React, { memo, useMemo } from 'react';
-
-import { useAppT } from '@djangocfg/i18n';
-import { Checkbox } from '@djangocfg/ui-core/components';
-
-export interface TermsCheckboxProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  termsUrl?: string;
-  privacyUrl?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-/**
- * TermsCheckbox - Compact terms acceptance checkbox.
- *
- * Memoised: re-renders only when checked, termsUrl, privacyUrl, disabled
- * or className change. `onChange` is compared by reference — callers
- * should stabilise it with useCallback.
- */
-function TermsCheckboxRaw({
-  checked,
-  onChange,
-  termsUrl,
-  privacyUrl,
-  disabled = false,
-  className = '',
-}: TermsCheckboxProps) {
-  const t = useAppT();
-  const labels = useMemo(() => ({
-    agree: t('layouts.auth.terms.agree'),
-    and: t('layouts.auth.terms.and'),
-    terms: t('layouts.auth.terms.terms'),
-    privacy: t('layouts.auth.terms.privacy'),
-  }), [t]);
-
-  // Don't render if no links provided
-  if (!termsUrl && !privacyUrl) {
-    return null;
-  }
-
-  return (
-    <div className={`auth-terms ${className}`}>
-      <Checkbox
-        id="auth-terms"
-        checked={checked}
-        onCheckedChange={onChange}
-        disabled={disabled}
-        className="auth-terms-checkbox"
-      />
-      <label htmlFor="auth-terms">
-        {labels.agree}{' '}
-        {termsUrl && (
-          <a href={termsUrl} target="_blank" rel="noopener noreferrer">
-            {labels.terms}
-          </a>
-        )}
-        {termsUrl && privacyUrl && ` ${labels.and} `}
-        {privacyUrl && (
-          <a href={privacyUrl} target="_blank" rel="noopener noreferrer">
-            {labels.privacy}
-          </a>
-        )}
-      </label>
-    </div>
-  );
-}
-
-export const TermsCheckbox = memo(TermsCheckboxRaw);