@djangocfg/layouts 2.1.433 → 2.1.434

package/package.json

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

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -121,24 +121,24 @@ const AuthContent: React.FC = memo(() => {
 });
 
 const AuthSuccessOverlay: React.FC = memo(() => {
-  const { step, logoUrl, redirectUrl } = useAuthFormContext();
+  const { step, logo, redirectUrl } = useAuthFormContext();
 
   if (step !== 'success') {
     return null;
   }
 
-  return <AuthSuccess logoUrl={logoUrl} redirectUrl={redirectUrl} />;
+  return <AuthSuccess logo={logo} redirectUrl={redirectUrl} />;
 });
 
 // AuthSuccess component - Apple-style success screen
 interface AuthSuccessInlineProps {
-  logoUrl?: string;
+  logo?: React.ReactNode;
   redirectUrl?: string;
   redirectDelay?: number;
 }
 
 const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
-  logoUrl,
+  logo,
   redirectUrl,
   redirectDelay = AUTH.REDIRECT_DELAY,
 }) => {
@@ -164,13 +164,13 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
   return (
     <div className="auth-success-overlay">
       <div className="auth-success-content">
-        {logoUrl ? (
-          <img
-            src={logoUrl}
-            alt=""
+        {logo ? (
+          <span
             className="auth-success-logo"
             style={{ opacity: isVisible ? 1 : 0 }}
-          />
+          >
+            {logo}
+          </span>
         ) : (
           <div
             className="auth-success-check"

package/src/layouts/AuthLayout/README.md

@@ -12,10 +12,20 @@ Shell-based authentication layout with three visual variants:
   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
+The logo (when `logo` is set) always renders above the form across all
 variants; the `sidebar` slot should carry the quote/illustration, not a second
 brand mark.
 
+`logo` is a **`ReactNode`** — pass an inline-SVG brand component, an `<img>`,
+whatever. The layout owns the size: the node is dropped into a fixed slot
+(`.auth-logo`, 56px; `.auth-success-logo`, 72px) and stretched to fill it
+(`width/height: 100%`), so a `currentColor` SVG inherits the slot's size and
+the surrounding text color — no per-theme asset swap needed.
+
+```tsx
+<AuthLayout logo={<BrandMark className="text-foreground" />} … />
+```
+
 Supports: email OTP, phone OTP, GitHub OAuth, and **verifying** an existing 2FA
 challenge (TOTP + backup codes).
 
@@ -93,7 +103,7 @@ import { AuthLayout } from '@djangocfg/layouts';
 | `redirectUrl` | `string` | `/dashboard` | Where to redirect after auth |
 | `enableGithubAuth` | `boolean` | `false` | Show GitHub OAuth button |
 | `enablePhoneAuth` | `boolean` | `false` | Allow phone number input |
-| `logoUrl` | `string` | — | Logo shown above the form (centered only) and on the success screen |
+| `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 |
 | `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 |

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

@@ -3,7 +3,7 @@
 import React, { memo } from 'react';
 
 export interface AuthHeaderProps {
-  logo?: string;
+  logo?: React.ReactNode;
   title: string;
   subtitle?: string;
   identifier?: string;
@@ -13,9 +13,8 @@ export interface AuthHeaderProps {
 /**
  * AuthHeader - Apple-style header with logo, title, and subtitle.
  *
- * Memoised: re-renders only when logo, title, subtitle, identifier or
- * className change. All props are primitives (strings), so the default
- * shallow comparison is sufficient.
+ * `logo` is any React node (inline-SVG brand component, `<img>`, …), rendered
+ * inside an `.auth-logo` wrapper so the existing logo sizing/spacing applies.
  */
 function AuthHeaderRaw({
   logo,
@@ -27,13 +26,9 @@ function AuthHeaderRaw({
   return (
     <div className={`auth-header ${className}`}>
       {logo && (
-        <img
-          src={logo}
-          alt=""
-          className="auth-logo"
-          aria-hidden="true"
-          draggable={false}
-        />
+        <span className="auth-logo" aria-hidden="true">
+          {logo}
+        </span>
       )}
       <h1 className="auth-title">{title}</h1>
       {subtitle && (

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

@@ -35,7 +35,7 @@ function AuthOTPInputRaw({
   length = AUTH.TOTP_LENGTH,
 }: AuthOTPInputProps) {
   return (
-    <div className="auth-otp-container auth-otp-wrapper">
+    <div className="auth-otp-container">
       <OTPInput
         length={length}
         validationMode="numeric"
@@ -46,7 +46,6 @@ function AuthOTPInputRaw({
         disabled={disabled}
         autoFocus={autoFocus}
         size={size}
-        fluid
       />
     </div>
   );

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

@@ -42,7 +42,7 @@ function IdentifierStepRaw() {
     error,
     isRateLimited,
     rateLimitLabel,
-    logoUrl,
+    logo,
     termsUrl,
     privacyUrl,
     enableGithubAuth,
@@ -76,7 +76,7 @@ function IdentifierStepRaw() {
 
   return (
     <AuthContainer step="identifier">
-      {!hideHeader && <AuthHeader logo={logoUrl} title={content.title} subtitle={content.subtitle.email} />}
+      {!hideHeader && <AuthHeader logo={logo} title={content.title} subtitle={content.subtitle.email} />}
 
       <form onSubmit={handleIdentifierSubmit} className="auth-form-group">
         <Input

package/src/layouts/AuthLayout/context.tsx

@@ -25,7 +25,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   termsUrl,
   privacyUrl,
   enableGithubAuth = false,
-  logoUrl,
+  logo,
   redirectUrl,
   onIdentifierSuccess,
   onOTPSuccess,
@@ -55,7 +55,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       termsUrl,
       privacyUrl,
       enableGithubAuth,
-      logoUrl,
+      logo,
       redirectUrl,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -66,7 +66,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       termsUrl,
       privacyUrl,
       enableGithubAuth,
-      logoUrl,
+      logo,
       redirectUrl,
     ]
   );

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

@@ -71,14 +71,23 @@
 }
 
 .auth-logo {
+  /* The slot owns the size; the logo node (inline-SVG/<img>) fills it. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 56px;
   height: 56px;
   margin-bottom: 0.75rem;
-  object-fit: contain;
   border-radius: 14px;
   animation: authLogoIn 0.5s var(--spring-bounce) both;
 }
 
+.auth-logo > * {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 @keyframes authLogoIn {
   from {
     opacity: 0;
@@ -469,44 +478,15 @@
 
 /* ===== OTP INPUT ===== */
 
+/* OTP cells are styled + sized by ui-core's `OTPInput` (fixed-size slots via
+ * its `size` prop). The layout only centers the cluster — no width/border
+ * overrides here (those fought the component and made the cells stretch). */
 .auth-otp-container {
   display: flex;
   justify-content: center;
   width: 100%;
 }
 
-.auth-otp-wrapper {
-  display: flex;
-  gap: 0.375rem;
-  width: 100%;
-}
-
-.auth-otp-wrapper input {
-  width: 3rem;
-  height: 3.5rem;
-  font-size: 1.375rem;
-  font-weight: 600;
-  text-align: center;
-  letter-spacing: -0.01em;
-  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:
-    border-color 0.18s,
-    box-shadow 0.18s;
-}
-
-.auth-otp-wrapper input:focus {
-  outline: none;
-  border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 12%, transparent);
-}
-
-.auth-otp-wrapper input:disabled {
-  opacity: 0.45;
-}
-
 /* ===== QR CODE ===== */
 
 .auth-qr-container {
@@ -597,13 +577,22 @@
 }
 
 .auth-success-logo {
+  /* The slot owns the size; the logo node fills it. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 72px;
   height: 72px;
-  object-fit: contain;
   border-radius: 16px;
   animation: authSuccessIn 0.5s var(--spring-bounce) both;
 }
 
+.auth-success-logo > * {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .auth-success-check {
   width: 72px;
   height: 72px;
@@ -708,12 +697,6 @@
   .auth-title {
     font-size: 1.375rem;
   }
-
-  .auth-otp-wrapper input {
-    width: 2.625rem;
-    height: 3.25rem;
-    font-size: 1.125rem;
-  }
 }
 
 /* ===== REDUCED MOTION ===== */

package/src/layouts/AuthLayout/types.ts

@@ -40,8 +40,9 @@ export interface AuthLayoutConfig {
   sourceUrl: string;
   /** Enable GitHub OAuth button */
   enableGithubAuth?: boolean;
-  /** Logo URL for success screen (SVG recommended) */
-  logoUrl?: string;
+  /** 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) */
   redirectUrl?: string;
 }

package/src/layouts/PublicLayout/index.ts

@@ -36,14 +36,10 @@ export {
   NavActionItem,
   NavControls,
   NavDesktopItems,
-  ThemeBrandMark,
-  ThemeBrandMarkImg,
 } from './primitives';
 export type {
   NavAction,
   NavControlsProps,
-  ThemeBrandMarkProps,
-  ThemeBrandMarkImgProps,
 } from './primitives';
 
 // Navbar variants

package/src/layouts/PublicLayout/primitives/index.ts

@@ -5,5 +5,3 @@ export type { NavAction } from './NavActionItem';
 export { NavControls } from './NavControls';
 export type { NavControlsProps } from './NavControls';
 export { NavDesktopItems } from './NavDesktopItems';
-export { ThemeBrandMark, ThemeBrandMarkImg } from './ThemeBrandMark';
-export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './ThemeBrandMark';

package/src/testing/MockAuthFormProvider.tsx

@@ -53,7 +53,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
   termsUrl,
   privacyUrl,
   enableGithubAuth = false,
-  logoUrl,
+  logo,
   redirectUrl = '/dashboard',
 
   // Initial state
@@ -151,7 +151,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
       termsUrl,
       privacyUrl,
       enableGithubAuth,
-      logoUrl,
+      logo,
       redirectUrl,
     };
   }, [
@@ -174,7 +174,7 @@ export const MockAuthFormProvider: React.FC<MockAuthFormProviderProps> = ({
     termsUrl,
     privacyUrl,
     enableGithubAuth,
-    logoUrl,
+    logo,
     redirectUrl,
   ]);
 

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

@@ -1,75 +0,0 @@
-/**
- * Theme-aware brand mark for public chrome (navbar, footer).
- *
- * Uses two layers and Tailwind `dark:` so the correct asset is chosen with **no JS theme hook**
- * and **no hydration mismatch** — the same thing `next-themes` does for `html.dark` / class strategy.
- *
- * Prefer this over `useTheme().resolvedTheme` + one `<img>` unless you have a strong reason
- * (single-DOM node only).
- */
-
-'use client';
-
-import React, { type ReactNode } from 'react';
-
-import { cn } from '@djangocfg/ui-core/lib';
-
-export interface ThemeBrandMarkProps {
-  /**
-   * Mark when the app is in **light** appearance (`html` without `.dark`).
-   * Usually a dark-colored logo on a light bar.
-   */
-  light: ReactNode;
-  /**
-   * Mark when the app is in **dark** appearance (`html.dark`).
-   * Usually a light-colored logo on a dark bar.
-   */
-  dark: ReactNode;
-  /** Outer wrapper — keep sizing here (e.g. `h-5.5 w-auto`). */
-  className?: string;
-  /** `role="img"` label when children are decorative. */
-  'aria-label'?: string;
-}
-
-export function ThemeBrandMark({ light, dark, className, 'aria-label': ariaLabel }: ThemeBrandMarkProps) {
-  return (
-    <span
-      className={cn('inline-flex shrink-0 items-center justify-center', className)}
-      role={ariaLabel ? 'img' : undefined}
-      aria-label={ariaLabel}
-    >
-      <span className="flex items-center justify-center dark:hidden">{light}</span>
-      <span className="hidden items-center justify-center dark:flex">{dark}</span>
-    </span>
-  );
-}
-
-export interface ThemeBrandMarkImgProps {
-  /** Logo URL for light UI (no `html.dark`). */
-  srcLight: string;
-  /** Logo URL for dark UI (`html.dark`). */
-  srcDark: string;
-  alt?: string;
-  /** Applied to both images (e.g. `h-5.5 w-auto object-contain`). */
-  className?: string;
-  wrapperClassName?: string;
-  'aria-label'?: string;
-}
-
-export function ThemeBrandMarkImg({
-  srcLight,
-  srcDark,
-  alt = '',
-  className,
-  wrapperClassName,
-  'aria-label': ariaLabel,
-}: ThemeBrandMarkImgProps) {
-  return (
-    <ThemeBrandMark
-      className={wrapperClassName}
-      aria-label={ariaLabel}
-      light={<img src={srcLight} alt={alt} className={className} />}
-      dark={<img src={srcDark} alt={alt} className={className} />}
-    />
-  );
-}