@djangocfg/layouts 2.1.482 → 2.1.484

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.482",
+  "version": "2.1.484",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.482",
-    "@djangocfg/api": "^2.1.482",
-    "@djangocfg/centrifugo": "^2.1.482",
-    "@djangocfg/devtools": "^2.1.482",
-    "@djangocfg/i18n": "^2.1.482",
-    "@djangocfg/ui-core": "^2.1.482",
+    "@djangocfg/analytics": "^2.1.484",
+    "@djangocfg/api": "^2.1.484",
+    "@djangocfg/centrifugo": "^2.1.484",
+    "@djangocfg/devtools": "^2.1.484",
+    "@djangocfg/i18n": "^2.1.484",
+    "@djangocfg/ui-core": "^2.1.484",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.482",
-    "@djangocfg/api": "^2.1.482",
-    "@djangocfg/centrifugo": "^2.1.482",
-    "@djangocfg/devtools": "^2.1.482",
-    "@djangocfg/i18n": "^2.1.482",
-    "@djangocfg/typescript-config": "^2.1.482",
-    "@djangocfg/ui-core": "^2.1.482",
-    "@djangocfg/ui-tools": "^2.1.482",
+    "@djangocfg/analytics": "^2.1.484",
+    "@djangocfg/api": "^2.1.484",
+    "@djangocfg/centrifugo": "^2.1.484",
+    "@djangocfg/devtools": "^2.1.484",
+    "@djangocfg/i18n": "^2.1.484",
+    "@djangocfg/typescript-config": "^2.1.484",
+    "@djangocfg/ui-core": "^2.1.484",
+    "@djangocfg/ui-tools": "^2.1.484",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/layouts/AuthLayout/README.md

@@ -50,7 +50,7 @@ import { AuthLayout } from '@djangocfg/layouts';
 
 <AuthLayout
   sourceUrl="https://myapp.com"
-  redirectUrl="/dashboard"
+  redirectUrl="/private"
   enableGithubAuth
   termsUrl="/terms"
   privacyUrl="/privacy"
@@ -100,7 +100,7 @@ import { AuthLayout } from '@djangocfg/layouts';
 | `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 |
+| `redirectUrl` | `string` | `/private` | Where to redirect after auth |
 | `enableGithubAuth` | `boolean` | `false` | Show GitHub OAuth button |
 | `enablePhoneAuth` | `boolean` | `false` | Allow phone number input |
 | `logo` | `ReactNode` | — | Logo node shown above the form and on the success screen. Fills its slot (the layout sizes it); use a `currentColor` SVG for theme adaptivity |

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

@@ -48,9 +48,12 @@ function IdentifierStepRaw() {
     enableGithubAuth,
     sourceUrl,
     marketingConsent,
+    rememberMe,
     marketingConsentConfig,
+    rememberMeConfig,
     setIdentifier,
     setMarketingConsent,
+    setRememberMe,
     setError,
     handleIdentifierSubmit,
   } = useAuthFormContext();
@@ -100,6 +103,7 @@ function IdentifierStepRaw() {
   // GitHub OAuth
   const { isLoading: isGithubLoading, startGithubAuth } = useGithubAuth({
     sourceUrl,
+    rememberMe,
     onError: setError,
   });
 
@@ -142,6 +146,20 @@ function IdentifierStepRaw() {
           </label>
         )}
 
+        {rememberMeConfig?.enabled !== false && (
+          <label className="auth-remember">
+            <Checkbox
+              checked={rememberMe}
+              onCheckedChange={(checked) => setRememberMe(checked === true)}
+              disabled={isLoading}
+              className="auth-remember-checkbox"
+            />
+            <span className="auth-remember-label">
+              {rememberMeConfig?.label ?? 'Keep me signed in for 30 days'}
+            </span>
+          </label>
+        )}
+
         <AuthError message={error} />
 
         <AuthButton

package/src/layouts/AuthLayout/context.tsx

@@ -28,6 +28,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   logo,
   redirectUrl,
   marketingConsent,
+  rememberMe,
   onIdentifierSuccess,
   onOTPSuccess,
   onError,
@@ -64,6 +65,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       redirectUrl,
       // Renamed: `marketingConsent` (the name) is the checkbox STATE from the form hook.
       marketingConsentConfig: marketingConsent,
+      rememberMeConfig: rememberMe,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -76,6 +78,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       logo,
       redirectUrl,
       marketingConsent,
+      rememberMe,
     ]
   );
 

package/src/layouts/AuthLayout/types.ts

@@ -50,6 +50,14 @@ export interface AuthMarketingConsentConfig {
   defaultChecked?: boolean;
 }
 
+/** Persistent-login checkbox on the identifier step. */
+export interface AuthRememberMeConfig {
+  /** Render the checkbox. Default: true. */
+  enabled?: boolean;
+  /** Checkbox label. Default: "Keep me signed in for 30 days". */
+  label?: React.ReactNode;
+}
+
 export interface AuthLayoutConfig {
   /** Support page URL */
   supportUrl?: string;
@@ -64,10 +72,12 @@ export interface AuthLayoutConfig {
   /** Logo node rendered above the form and on the success screen. Pass any
    * React node — an inline-SVG brand component, an `<img>`, etc. */
   logo?: React.ReactNode;
-  /** URL to redirect after successful auth (default: /dashboard) */
+  /** URL to redirect after successful auth (default: /private) */
   redirectUrl?: string;
   /** Optional marketing-consent checkbox on the identifier step. Absent ⇒ no checkbox, OTP body unchanged. */
   marketingConsent?: AuthMarketingConsentConfig;
+  /** Optional persistent-login control. */
+  rememberMe?: AuthRememberMeConfig;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -77,8 +87,9 @@ export interface AuthLayoutConfig {
 // `marketingConsent` is omitted from the config side of the merge: the name is
 // taken by the checkbox *state* (boolean | null) from AuthFormReturn, so the
 // prop object is re-exposed as `marketingConsentConfig`.
-export interface AuthFormContextType extends AuthFormReturn, Omit<AuthLayoutConfig, 'marketingConsent'> {
+export interface AuthFormContextType extends AuthFormReturn, Omit<AuthLayoutConfig, 'marketingConsent' | 'rememberMe'> {
   marketingConsentConfig?: AuthMarketingConsentConfig;
+  rememberMeConfig?: AuthRememberMeConfig;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/src/layouts/PublicLayout/components/UserMenu.tsx

@@ -140,14 +140,14 @@ export function UserMenu({
     }
     if (disableAuth) {
       return (
-        <Button variant="default" size="sm" className="rounded-full px-5" disabled>
+        <Button variant="default" size="sm" className="h-9 rounded-full px-5" disabled>
           {labels.signIn}
         </Button>
       );
     }
     return (
       <Link href={resolvedAuthPath}>
-        <Button variant="default" size="sm" className="rounded-full px-5">
+        <Button variant="default" size="sm" className="h-9 rounded-full px-5">
           {labels.signIn}
         </Button>
       </Link>

package/src/layouts/PublicLayout/primitives/NavActionItem.tsx

@@ -22,10 +22,11 @@ export interface NavAction {
    * - `link`    — plain text link
    * - `ghost`   — transparent pill, fills on hover (default)
    * - `outline` — bordered pill
+   * - `secondary` — solid neutral pill (a real action, not the main CTA)
    * - `primary` — solid high-contrast pill (main CTA)
    * @default 'ghost'
    */
-  variant?: 'link' | 'ghost' | 'outline' | 'primary';
+  variant?: 'link' | 'ghost' | 'outline' | 'secondary' | 'primary';
   /** Hide on screens below lg (useful for secondary CTAs). @default false */
   hideOnSmall?: boolean;
   /** Optional inline icon (use lucide-react or any ReactNode). */
@@ -37,15 +38,27 @@ export interface NavAction {
 const baseCls =
   'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35';
 
+// Height is FIXED (`h-9`), not a `min-h-9` floor. With a minimum the pill grew
+// past its neighbours as soon as it carried an icon — the navbar's own UserMenu
+// login button is a ui-core `Button size="sm"` (a fixed `h-8`), so a growing CTA
+// sat visibly taller than the control right next to it. A nav action is a
+// control in a row of controls: its height must be a constant, and the label is
+// already truncated rather than wrapped.
 const variantCls: Record<NonNullable<NavAction['variant']>, string> = {
   link:
     'px-1.5 py-1 text-foreground/85 hover:text-foreground',
   ghost:
-    'px-4 py-1.5 min-h-9 text-foreground/90 hover:bg-accent/55 hover:text-foreground',
+    'h-9 px-4 text-foreground/90 hover:bg-accent/55 hover:text-foreground',
   outline:
-    'px-4 py-1.5 min-h-9 border border-border/70 text-foreground/90 hover:bg-accent/40 hover:text-foreground',
+    'h-9 px-4 border border-border/70 text-foreground/90 hover:bg-accent/40 hover:text-foreground',
+  // Filled but neutral — the middle rung between `outline` (which disappears
+  // into a dark navbar) and `primary` (which competes with the one real CTA).
+  // Uses the `secondary` token pair rather than a hand-mixed tint so it retunes
+  // with the active preset.
+  secondary:
+    'h-9 px-4 bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
   primary:
-    'px-4 py-1.5 min-h-9 bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
+    'h-9 px-4 bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
 };
 
 interface NavActionItemProps {