@djangocfg/layouts 2.1.334 → 2.1.335

package/README.md

@@ -54,10 +54,30 @@ Use `BaseApp` directly when you don't need route-based layout switching — see
 |---|---|---|
 | **`PublicLayout`** | Marketing / docs. Slots for navbar (`Floating`/`Flush`/`Minimal`) + footer + locale + auth controls. | [README](./src/layouts/PublicLayout/README.md) |
 | **`PrivateLayout`** | Authenticated app shell — sidebar (collapsible icon rail, accordion groups, rail/featured/CTA slots) + popover account footer. | [README](./src/layouts/PrivateLayout/README.md) |
-| **`AuthLayout`** | Sign-in / sign-up flows. | [README](./src/layouts/AuthLayout/README.md) |
+| **`AuthLayout`** | Sign-in / sign-up flows. Shell-based: `centered` (default) or `split` (two-column desktop). | [README](./src/layouts/AuthLayout/README.md) |
 | **`AdminLayout`** | Admin console. | — |
 | **`ProfileLayout`** | Profile page — see below. |  |
 
+### `AuthLayout` shells
+
+Two visual variants, switchable via the `variant` prop:
+
+- **`centered`** — Apple HIG-style: frameless, centered form, animated glow background.
+- **`split`** — Two-column card on desktop (form left, customizable sidebar right); single-column on mobile. Background image/gradient with overlay + blur via the `background` prop.
+
+```tsx
+// Split variant with background image and testimonial sidebar
+<AuthLayout
+  variant="split"
+  background={{ imageUrl: '/bg.jpg', overlay: 'hsl(var(--background) / 0.6)', blur: '8px' }}
+  sidebar={<Testimonial />}
+>
+  {/* optional custom header, shown only on identifier step */}
+</AuthLayout>
+```
+
+Architecture: `AuthShell` orchestrator dispatches to `CenteredShell` or `SplitShell`. Add new variants by extending `AuthShellVariant` and creating a new shell component.
+
 ### `ProfileLayout`
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.334",
+  "version": "2.1.335",
   "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.334",
-    "@djangocfg/centrifugo": "^2.1.334",
-    "@djangocfg/debuger": "^2.1.334",
-    "@djangocfg/i18n": "^2.1.334",
-    "@djangocfg/monitor": "^2.1.334",
-    "@djangocfg/ui-core": "^2.1.334",
-    "@djangocfg/ui-nextjs": "^2.1.334",
+    "@djangocfg/api": "^2.1.335",
+    "@djangocfg/centrifugo": "^2.1.335",
+    "@djangocfg/debuger": "^2.1.335",
+    "@djangocfg/i18n": "^2.1.335",
+    "@djangocfg/monitor": "^2.1.335",
+    "@djangocfg/ui-core": "^2.1.335",
+    "@djangocfg/ui-nextjs": "^2.1.335",
     "@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.334",
-    "@djangocfg/centrifugo": "^2.1.334",
-    "@djangocfg/debuger": "^2.1.334",
-    "@djangocfg/i18n": "^2.1.334",
-    "@djangocfg/monitor": "^2.1.334",
-    "@djangocfg/typescript-config": "^2.1.334",
-    "@djangocfg/ui-core": "^2.1.334",
-    "@djangocfg/ui-nextjs": "^2.1.334",
-    "@djangocfg/ui-tools": "^2.1.334",
+    "@djangocfg/api": "^2.1.335",
+    "@djangocfg/centrifugo": "^2.1.335",
+    "@djangocfg/debuger": "^2.1.335",
+    "@djangocfg/i18n": "^2.1.335",
+    "@djangocfg/monitor": "^2.1.335",
+    "@djangocfg/typescript-config": "^2.1.335",
+    "@djangocfg/ui-core": "^2.1.335",
+    "@djangocfg/ui-nextjs": "^2.1.335",
+    "@djangocfg/ui-tools": "^2.1.335",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/configurator/auth/defaults.ts

@@ -0,0 +1,101 @@
+/**
+ * AuthLayout configurator defaults, presets, and image catalogue.
+ */
+
+import type { AuthPlaygroundConfig, AuthCenteredConfig, AuthSplitConfig } from './types';
+
+export const BG_IMAGES = [
+  {
+    label: 'Mountains',
+    value: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80',
+  },
+  {
+    label: 'Night City',
+    value: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1920&q=80',
+  },
+  {
+    label: 'Abstract Mesh',
+    value: 'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=1920&q=80',
+  },
+  {
+    label: 'Ocean Waves',
+    value: 'https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=1920&q=80',
+  },
+  {
+    label: 'Forest Fog',
+    value: 'https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80',
+  },
+] as const;
+
+export const defaultCenteredConfig: AuthCenteredConfig = {
+  background: {
+    enabled: false,
+    imageUrl: BG_IMAGES[0].value,
+    gradient: 'linear-gradient(135deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--background)) 100%)',
+    overlay: 'hsl(var(--background) / 0.6)',
+    blur: '8px',
+  },
+  form: {
+    showLogo: true,
+    showTerms: true,
+    showGithub: true,
+    showSupport: true,
+  },
+};
+
+export const defaultSplitConfig: AuthSplitConfig = {
+  background: {
+    enabled: true,
+    imageUrl: BG_IMAGES[0].value,
+    gradient: '',
+    overlay: 'hsl(var(--background) / 0.6)',
+    blur: '8px',
+  },
+  sidebar: {
+    enabled: true,
+    showQuote: true,
+    showAuthor: true,
+  },
+  form: {
+    showLogo: true,
+    showTerms: true,
+    showGithub: true,
+    showSupport: true,
+  },
+};
+
+/** Full config used when the caller still needs a single object (e.g. URL encode). */
+export const defaultConfig: AuthPlaygroundConfig = {
+  variant: 'centered',
+  ...defaultCenteredConfig,
+  sidebar: { enabled: false, showQuote: true, showAuthor: true },
+};
+
+export const presets = {
+  centered: defaultCenteredConfig,
+  split: defaultSplitConfig,
+} as const;
+
+export function detectPreset(config: AuthPlaygroundConfig): 'centered' | 'split' | 'custom' {
+  if (deepEqual(config, { variant: 'centered', ...defaultCenteredConfig, sidebar: { enabled: false, showQuote: true, showAuthor: true } })) {
+    return 'centered';
+  }
+  if (deepEqual(config, { variant: 'split', ...defaultSplitConfig })) {
+    return 'split';
+  }
+  return 'custom';
+}
+
+function deepEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false;
+  const ak = Object.keys(a as Record<string, unknown>);
+  const bk = Object.keys(b as Record<string, unknown>);
+  if (ak.length !== bk.length) return false;
+  for (const k of ak) {
+    if (!deepEqual((a as Record<string, unknown>)[k], (b as Record<string, unknown>)[k])) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/configurator/auth/index.ts

@@ -0,0 +1,36 @@
+/**
+ * AuthLayout configurator — schemas, defaults, and presets.
+ *
+ * Two independent schemas are provided:
+ *   - `authCenteredSchema` + `authCenteredUiSchema` — Apple-style frameless
+ *   - `authSplitSchema` + `authSplitUiSchema` — two-column card with sidebar
+ *
+ * Use `defaultCenteredConfig` / `defaultSplitConfig` as safe initial values.
+ */
+
+export type {
+  AuthPlaygroundConfig,
+  AuthCenteredConfig,
+  AuthSplitConfig,
+  AuthShellVariant,
+  PresetKind,
+  AuthBackgroundConfig,
+  AuthSidebarConfig,
+  AuthFormConfig,
+} from './types';
+
+export {
+  BG_IMAGES,
+  defaultCenteredConfig,
+  defaultSplitConfig,
+  defaultConfig,
+  presets,
+  detectPreset,
+} from './defaults';
+
+export {
+  authCenteredSchema,
+  authCenteredUiSchema,
+  authSplitSchema,
+  authSplitUiSchema,
+} from './schema';

package/src/configurator/auth/schema.ts

@@ -0,0 +1,205 @@
+/**
+ * JSON Schema + uiSchema for an AuthLayout configurator UI.
+ *
+ * Two independent schemas are exported:
+ *   - `authCenteredSchema` / `authCenteredUiSchema` — Apple-style frameless shell
+ *   - `authSplitSchema` / `authSplitUiSchema` — two-column card with sidebar
+ *
+ * Pair with `<JsonSchemaForm density="compact" schema={...} uiSchema={...}>`
+ * from `@djangocfg/ui-tools` to get a ready-made sidebar configurator.
+ */
+
+import type { CustomJsonSchema7, CustomJsonUiSchema7 } from '@djangocfg/ui-core/lib';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Centered variant
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const authCenteredSchema: CustomJsonSchema7 = {
+  type: 'object',
+  properties: {
+    background: {
+      type: 'object',
+      title: 'Background',
+      properties: {
+        enabled: {
+          type: 'boolean',
+          title: 'Enable custom background',
+          description: 'When off, uses the default GlowBackground.',
+        },
+        imageUrl: {
+          type: 'string',
+          title: 'Image',
+          enum: [
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80',
+            'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1920&q=80',
+            'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=1920&q=80',
+            'https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=1920&q=80',
+            'https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80',
+          ],
+          enumNames: ['Mountains', 'Night City', 'Abstract Mesh', 'Ocean Waves', 'Forest Fog'],
+          description: 'Full-bleed background image (loaded via useImageLoader).',
+        },
+        gradient: {
+          type: 'string',
+          title: 'CSS gradient',
+          description: 'Fallback when no image or image fails to load.',
+        },
+        overlay: {
+          type: 'string',
+          title: 'Overlay color',
+          description: 'e.g. hsl(var(--background) / 0.6)',
+        },
+        blur: {
+          type: 'string',
+          title: 'Backdrop blur',
+          description: 'e.g. 8px, 12px',
+        },
+      },
+    },
+    form: {
+      type: 'object',
+      title: 'Form options',
+      properties: {
+        showLogo: { type: 'boolean', title: 'Logo on success screen' },
+        showTerms: { type: 'boolean', title: 'Terms checkbox' },
+        showGithub: { type: 'boolean', title: 'GitHub OAuth button' },
+        showSupport: { type: 'boolean', title: 'Support link in footer' },
+      },
+    },
+  },
+};
+
+export const authCenteredUiSchema: CustomJsonUiSchema7 = {
+  background: {
+    'ui:collapsible': true,
+    'ui:groups': [
+      { title: 'Toggle', fields: ['enabled'], defaultOpen: true },
+      { title: 'Style', fields: ['imageUrl', 'gradient', 'overlay', 'blur'], defaultOpen: true },
+    ],
+    enabled: { 'ui:widget': 'switch' },
+    imageUrl: {
+      'ui:widget': 'select',
+      'ui:disabledWhen': { path: 'background.enabled', eq: false },
+    },
+    gradient: { 'ui:disabledWhen': { path: 'background.enabled', eq: false } },
+    overlay: { 'ui:disabledWhen': { path: 'background.enabled', eq: false } },
+    blur: { 'ui:disabledWhen': { path: 'background.enabled', eq: false } },
+  },
+  form: {
+    'ui:collapsible': true,
+    showLogo: { 'ui:widget': 'switch' },
+    showTerms: { 'ui:widget': 'switch' },
+    showGithub: { 'ui:widget': 'switch' },
+    showSupport: { 'ui:widget': 'switch' },
+  },
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Split variant
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const authSplitSchema: CustomJsonSchema7 = {
+  type: 'object',
+  properties: {
+    background: {
+      type: 'object',
+      title: 'Background',
+      properties: {
+        enabled: {
+          type: 'boolean',
+          title: 'Enable custom background',
+          description: 'When off, uses plain background.',
+        },
+        imageUrl: {
+          type: 'string',
+          title: 'Image',
+          enum: [
+            'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80',
+            'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=1920&q=80',
+            'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=1920&q=80',
+            'https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=1920&q=80',
+            'https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80',
+          ],
+          enumNames: ['Mountains', 'Night City', 'Abstract Mesh', 'Ocean Waves', 'Forest Fog'],
+          description: 'Full-bleed background image (loaded via useImageLoader).',
+        },
+        gradient: {
+          type: 'string',
+          title: 'CSS gradient',
+          description: 'Fallback when no image or image fails to load.',
+        },
+        overlay: {
+          type: 'string',
+          title: 'Overlay color',
+          description: 'e.g. hsl(var(--background) / 0.6)',
+        },
+        blur: {
+          type: 'string',
+          title: 'Backdrop blur',
+          description: 'e.g. 8px, 12px',
+        },
+      },
+    },
+    sidebar: {
+      type: 'object',
+      title: 'Sidebar',
+      properties: {
+        enabled: {
+          type: 'boolean',
+          title: 'Show sidebar',
+          description: 'Right column content — visible on desktop only.',
+        },
+        showQuote: { type: 'boolean', title: 'Show quote' },
+        showAuthor: { type: 'boolean', title: 'Show author' },
+      },
+    },
+    form: {
+      type: 'object',
+      title: 'Form options',
+      properties: {
+        showLogo: { type: 'boolean', title: 'Logo on success screen' },
+        showTerms: { type: 'boolean', title: 'Terms checkbox' },
+        showGithub: { type: 'boolean', title: 'GitHub OAuth button' },
+        showSupport: { type: 'boolean', title: 'Support link in footer' },
+      },
+    },
+  },
+};
+
+export const authSplitUiSchema: CustomJsonUiSchema7 = {
+  background: {
+    'ui:collapsible': true,
+    'ui:groups': [
+      { title: 'Toggle', fields: ['enabled'], defaultOpen: true },
+      { title: 'Style', fields: ['imageUrl', 'gradient', 'overlay', 'blur'], defaultOpen: true },
+    ],
+    enabled: { 'ui:widget': 'switch' },
+    imageUrl: {
+      'ui:widget': 'select',
+      'ui:disabledWhen': { path: 'background.enabled', eq: false },
+    },
+    gradient: { 'ui:disabledWhen': { path: 'background.enabled', eq: false } },
+    overlay: { 'ui:disabledWhen': { path: 'background.enabled', eq: false } },
+    blur: { 'ui:disabledWhen': { path: 'background.enabled', eq: false } },
+  },
+  sidebar: {
+    'ui:collapsible': true,
+    enabled: { 'ui:widget': 'switch' },
+    showQuote: {
+      'ui:widget': 'switch',
+      'ui:disabledWhen': { path: 'sidebar.enabled', eq: false },
+    },
+    showAuthor: {
+      'ui:widget': 'switch',
+      'ui:disabledWhen': { path: 'sidebar.enabled', eq: false },
+    },
+  },
+  form: {
+    'ui:collapsible': true,
+    showLogo: { 'ui:widget': 'switch' },
+    showTerms: { 'ui:widget': 'switch' },
+    showGithub: { 'ui:widget': 'switch' },
+    showSupport: { 'ui:widget': 'switch' },
+  },
+};

package/src/configurator/auth/types.ts

@@ -0,0 +1,48 @@
+/**
+ * AuthLayout configurator types
+ */
+
+export type AuthShellVariant = 'centered' | 'split';
+export type PresetKind = 'centered' | 'split' | 'custom';
+
+export interface AuthBackgroundConfig {
+  enabled: boolean;
+  imageUrl: string;
+  gradient: string;
+  overlay: string;
+  blur: string;
+}
+
+export interface AuthSidebarConfig {
+  enabled: boolean;
+  showQuote: boolean;
+  showAuthor: boolean;
+}
+
+export interface AuthFormConfig {
+  showLogo: boolean;
+  showTerms: boolean;
+  showGithub: boolean;
+  showSupport: boolean;
+}
+
+/** Full config used by the playground and embed page. */
+export interface AuthPlaygroundConfig {
+  variant: AuthShellVariant;
+  background: AuthBackgroundConfig;
+  sidebar: AuthSidebarConfig;
+  form: AuthFormConfig;
+}
+
+/** Centered-only subset (no sidebar). */
+export interface AuthCenteredConfig {
+  background: AuthBackgroundConfig;
+  form: AuthFormConfig;
+}
+
+/** Split-only subset (always has sidebar + background). */
+export interface AuthSplitConfig {
+  background: AuthBackgroundConfig;
+  sidebar: AuthSidebarConfig;
+  form: AuthFormConfig;
+}

package/src/configurator/index.ts

@@ -6,9 +6,11 @@
  *
  * Public surface today:
  *   - `private` — `PrivateLayout` configurator (shell + sidebar + header)
+ *   - `auth`    — `AuthLayout` configurator (centered / split variants)
  *
  * Public + theme configurators are not exported yet — they currently live in
  * the demo app while the schema shape is iterated on.
  */
 
 export * from './private';
+export * from './auth';

package/src/layouts/AppLayout/BaseApp.tsx

@@ -192,7 +192,8 @@ export function BaseApp({
                     <AuthDialog authPath={auth?.routes?.auth} />
 
                     {/* Debug Panel — auto in dev, ?debug=1 in prod, disable with debug={{ enabled: false }} */}
-                    <DebugButton enabled={debugEnabled} {...debugProps} />
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                    <DebugButton enabled={debugEnabled} {...(debugProps as any)} />
                   </ErrorTrackingProvider>
                 </PwaProvider>
               </CentrifugoProvider>

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,30 +1,33 @@
 /**
- * Auth Layout - Apple Style
+ * Auth Layout
+ *
+ * Shell-based authentication layout with two variants:
+ * - `centered` (default) — Apple-style frameless, centered, glow background
+ * - `split` — Two-column on desktop (form + sidebar), single-column on mobile
  *
- * Minimal, clean authentication layout with smooth animations.
  * Supports: email/phone OTP, OAuth (GitHub), 2FA (TOTP + backup codes)
  */
 
 'use client';
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext } from 'react';
 
 import { useCfgRouter } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 
-import { GlowBackground } from '@djangocfg/ui-core/components';
-
 import { Suspense } from '../../components';
 import { OAuthCallback } from './components/oauth';
 import { IdentifierStep, OTPStep, SetupStep, TwoFactorStep } from './components/steps';
 import { AUTH } from './constants';
 import { AuthFormProvider, useAuthFormContext } from './context';
+import { AuthShell } from './shells';
 
 import './styles/auth.css';
+import './styles/centered-shell.css';
+import './styles/split-shell.css';
 
 import type { AuthLayoutProps } from './types';
 
-
 // ─── Layout-level context (header suppression, etc.) ─────────────────────────
 
 interface AuthLayoutContextValue {
@@ -39,8 +42,19 @@ export const useAuthLayoutContext = (): AuthLayoutContextValue => useContext(Aut
 // ─── Layout ──────────────────────────────────────────────────────────────────
 
 export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
-  const { enableGithubAuth, redirectUrl = AUTH.DEFAULT_REDIRECT, onOAuthSuccess, onError, className } = props;
-  const hideHeader = Boolean(props.children);
+  const {
+    variant = 'centered',
+    background,
+    sidebar,
+    enableGithubAuth,
+    redirectUrl = AUTH.DEFAULT_REDIRECT,
+    onOAuthSuccess,
+    onError,
+    className,
+    children,
+  } = props;
+
+  const hideHeader = Boolean(children);
 
   return (
     <Suspense>
@@ -49,26 +63,21 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
           {/* 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>
+          <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>
+            )}
+
+            <AuthHeaderSlot>{children}</AuthHeaderSlot>
+            <AuthContent />
+          </AuthShell>
         </AuthLayoutContext.Provider>
       </AuthFormProvider>
     </Suspense>
@@ -131,11 +140,11 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = ({
 }) => {
   const router = useCfgRouter();
   const t = useAppT();
-  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = React.useState(false);
 
   const successMessage = React.useMemo(() => t('layouts.auth.success.message'), [t]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const animTimer = setTimeout(() => setIsVisible(true), AUTH.ANIMATION_START_DELAY);
     const redirectTimer = setTimeout(() => {
       const finalUrl = redirectUrl || AUTH.DEFAULT_REDIRECT;