@djangocfg/layouts 2.1.422 → 2.1.424

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,163 @@
+/**
+ * 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;
+    /* Soft shadow rising from the bottom: deep under the quote, easing to
+       nothing by the upper third so the photo stays open and bright up top.
+       The eased multi-stop curve avoids a hard "band" edge — reads as a
+       natural vignette, not a flat overlay. */
+    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%
+    );
+  }
+
+  /* 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/layouts/ProfileLayout/ProfileDialog/ProfileDialog.tsx

@@ -17,7 +17,20 @@ export interface ProfileDialogProps {
 }
 
 export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
-  const { isOpen, close, initialTab } = useProfileDialogStore();
+  const {
+    isOpen,
+    close,
+    initialTab,
+    tabs,
+    slots,
+    enable2FA,
+    enableAPIKeys,
+    enableDeleteAccount,
+    title: storeTitle,
+  } = useProfileDialogStore();
+
+  // Title precedence: explicit dialog prop > value passed to open() > ProfileForm default.
+  const resolvedTitle = title ?? storeTitle;
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
@@ -25,7 +38,18 @@ export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
         <DialogHeader className="sr-only">
           <DialogTitle>Profile</DialogTitle>
         </DialogHeader>
-        <ProfileForm title={title} defaultTab={initialTab} />
+        {/* Undefined fields fall through to ProfileForm's own defaults
+          * (e.g. enableAPIKeys defaults to true), so this stays backward
+          * compatible with bare open() / open({ initialTab }). */}
+        <ProfileForm
+          title={resolvedTitle}
+          defaultTab={initialTab}
+          tabs={tabs}
+          slots={slots}
+          enable2FA={enable2FA}
+          enableAPIKeys={enableAPIKeys}
+          enableDeleteAccount={enableDeleteAccount}
+        />
       </DialogContent>
     </Dialog>
   );

package/src/layouts/ProfileLayout/ProfileDialog/index.ts

@@ -1,2 +1,4 @@
 export { ProfileDialog } from './ProfileDialog';
+export type { ProfileDialogProps } from './ProfileDialog';
 export { useProfileDialogStore } from './store';
+export type { ProfileDialogContent } from './store';