@djangocfg/layouts 2.1.346 → 2.1.348

package/package.json

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

package/src/layouts/AuthLayout/README.md

@@ -100,7 +100,7 @@ import { AuthLayout } from '@djangocfg/layouts';
 | Step | Description |
 |---|---|
 | `identifier` | Email or phone input |
-| `otp` | 6-digit OTP code entry |
+| `otp` | 4-digit email OTP code entry |
 | `2fa` | TOTP or backup code verification |
 | `2fa-setup` | QR code + backup codes setup |
 | `success` | Full-screen success overlay → redirect |

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

@@ -2,6 +2,8 @@
 
 import React, { useEffect, useState } from 'react';
 
+import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
+import { useLayoutI18nOptional } from '../../../AppLayout/LayoutI18nProvider';
 import { AUTH } from '../../constants';
 import type { AuthStep } from '../../types';
 
@@ -44,12 +46,32 @@ export const AuthContainer: React.FC<AuthContainerProps> = ({
     }
   }, [isEntering]);
 
+  // Locale picker is mounted as the first child so it sits at the very
+  // top of the form column — visually paired with the form chrome (not
+  // floating in a viewport corner). Renders automatically when
+  // LayoutI18nProvider is mounted (BaseApp does this when the host app
+  // passes `i18n`); no prop gating needed.
+  const i18n = useLayoutI18nOptional();
+
   return (
     <div
       className={`auth-container ${className}`}
       data-entering={isEntering}
       data-step={step}
     >
+      {i18n ? (
+        <div className="auth-container__meta">
+          <LocaleSwitcher
+            variant="dropdown"
+            buttonVariant="ghost"
+            size="sm"
+            showFlag
+            showCode={false}
+            showTriggerLabel
+            className="auth-locale-trigger"
+          />
+        </div>
+      ) : null}
       {children}
     </div>
   );

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

@@ -13,12 +13,13 @@ export interface AuthOTPInputProps {
   disabled?: boolean;
   autoFocus?: boolean;
   size?: 'sm' | 'default' | 'lg';
+  length?: number;
 }
 
 /**
  * AuthOTPInput - Reusable OTP input with consistent styling
  *
- * Used in: OTPStep, TwoFactorStep, SetupStep
+ * Used in: OTPStep (email, 4 digits), TwoFactorStep (TOTP, 6 digits), SetupStep (TOTP, 6 digits)
  */
 export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
   value,
@@ -27,10 +28,11 @@ export const AuthOTPInput: React.FC<AuthOTPInputProps> = ({
   disabled = false,
   autoFocus = true,
   size,
+  length = AUTH.TOTP_LENGTH,
 }) => (
   <div className="auth-otp-container auth-otp-wrapper">
     <OTPInput
-      length={AUTH.OTP_LENGTH}
+      length={length}
       validationMode="numeric"
       pasteBehavior="clean"
       value={value}

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

@@ -66,7 +66,7 @@ export const OTPStep: React.FC = () => {
   const handleOTPComplete = useCallback(
     async (completedValue: string) => {
       if (submitState !== 'idle' || isLoading || isAutoSubmittingFromUrl.current) return;
-      if (completedValue.length !== AUTH.OTP_LENGTH) return;
+      if (completedValue.length !== AUTH.EMAIL_OTP_LENGTH) return;
 
       setSubmitState('submitting');
       const fakeEvent = { preventDefault: () => {} } as React.FormEvent;
@@ -96,6 +96,8 @@ export const OTPStep: React.FC = () => {
           onChange={setOtp}
           onComplete={handleOTPComplete}
           disabled={isLoading}
+          length={AUTH.EMAIL_OTP_LENGTH}
+          size="lg"
         />
 
         {config.isDevelopment && (
@@ -104,7 +106,7 @@ export const OTPStep: React.FC = () => {
 
         <AuthError message={error} />
 
-        <AuthButton loading={isLoading} disabled={otp.length < AUTH.OTP_LENGTH}>
+        <AuthButton loading={isLoading} disabled={otp.length < AUTH.EMAIL_OTP_LENGTH}>
           {content.button}
         </AuthButton>
 

package/src/layouts/AuthLayout/components/steps/SetupStep/SetupQRCode.tsx

@@ -117,7 +117,7 @@ export const SetupQRCode: React.FC<SetupQRCodeProps> = ({
 
         <AuthButton
           loading={isLoading}
-          disabled={confirmCode.length !== AUTH.OTP_LENGTH}
+          disabled={confirmCode.length !== AUTH.TOTP_LENGTH}
         >
           {content.button}
         </AuthButton>

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

@@ -105,7 +105,7 @@ export const TwoFactorStep: React.FC = () => {
 
           <AuthButton
             loading={is2FALoading}
-            disabled={!useBackupCode && twoFactorCode.length !== AUTH.OTP_LENGTH}
+            disabled={!useBackupCode && twoFactorCode.length !== AUTH.TOTP_LENGTH}
           >
             {content.button}
           </AuthButton>

package/src/layouts/AuthLayout/constants.ts

@@ -1,13 +1,18 @@
 /**
  * AuthLayout Constants
  *
- * All magic numbers extracted for clarity and maintainability.
+ * Code lengths come from the shared single source of truth in
+ * `@djangocfg/api/auth` (AUTH_CONSTANTS). Layout-only values (timings, sizes,
+ * routes) live here.
  */
 
+import { AUTH_CONSTANTS } from '@djangocfg/api/auth';
+
 export const AUTH = {
-  // Input lengths
-  OTP_LENGTH: 6,
-  BACKUP_CODE_MAX_LENGTH: 12,
+  // Input lengths (re-exported from @djangocfg/api/auth)
+  EMAIL_OTP_LENGTH: AUTH_CONSTANTS.EMAIL_OTP_LENGTH,
+  TOTP_LENGTH: AUTH_CONSTANTS.TOTP_LENGTH,
+  BACKUP_CODE_MAX_LENGTH: AUTH_CONSTANTS.BACKUP_CODE_MAX_LENGTH,
 
   // Timing (ms)
   ANIMATION_DURATION: 400,

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

@@ -26,6 +26,25 @@
   gap: 1.25rem;
 }
 
+/* Meta row at the top of the form — currently hosts the locale picker.
+   Right-aligned, tight, not eating much vertical space; feels like a
+   tab/utility chip rather than a floating control. */
+.auth-container__meta {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: -0.5rem;
+}
+
+.auth-locale-trigger {
+  height: 1.75rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+.auth-locale-trigger:hover {
+  color: hsl(var(--foreground));
+}
+
 .auth-container[data-entering="true"] {
   animation: authSlideIn 0.45s var(--spring-smooth) both;
 }

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

@@ -43,6 +43,45 @@
   outline: 1px solid hsl(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 */