@djangocfg/layouts 2.1.569 → 2.1.570

package/package.json

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

package/src/layouts/AuthLayout/README.md

@@ -40,6 +40,17 @@ the only brand left and it returns. CSS owns that half of the rule
 (`.auth-header[data-brand-elsewhere]`) — a JS width branch would need a
 viewport the server does not have and would flicker on hydration.
 
+**The mark is a link to `/`** — the way out. A sign-in screen is otherwise a
+dead end: arrive by a direct link, or get bounced here by an expired session,
+and there is no route back to the site (Back has nowhere to return to either).
+There is no prop for it: every app has a root, and a localized app resolves `/`
+through next-intl's own `Link`, so `/ru/auth` returns to `/ru`. The href lives
+in `constants.ts` as `AUTH.HOME_URL`.
+
+The link carries `aria-label` from `layouts.navigation.home` rather than
+relying on its contents: `logo` is an opaque node, and a brand that is a bare
+SVG would otherwise announce as an unnamed link.
+
 `logo` is a **`ReactNode`** — an inline-SVG brand component, an `<img>`, a
 horizontal lock-up. **The slot fits the artwork, not the reverse:** it caps the
 height (44px in the form header, 2.5rem on the brand panel) and lets the width

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

@@ -2,6 +2,11 @@
 
 import React, { memo } from 'react';
 
+import { useAppT } from '@djangocfg/i18n';
+import { Link } from '@djangocfg/ui-core/components';
+
+import { AUTH } from '../../constants';
+
 export interface AuthBrandPanelProps {
   /** The brand node the app already passes to `AuthLayout` as `logo`. */
   logo: React.ReactNode;
@@ -31,11 +36,32 @@ export interface AuthBrandPanelProps {
  *
  * Text is light because it sits on the scrim `fullsplit-shell.css` paints over
  * the photo, not on a theme surface — so it does not follow `--foreground`.
+ *
+ * The mark is the way OUT. A sign-in screen is otherwise a dead end: arrive by
+ * a direct link or get bounced here by an expired session and there is no
+ * route back to the site — Back has nowhere to go either. A brand mark in the
+ * corner is where people already click to leave, so it is the control to make
+ * real rather than a second one to add. It always links to `AUTH.HOME_URL`;
+ * nothing to configure.
  */
 function AuthBrandPanelRaw({ logo, tagline, className = '' }: AuthBrandPanelProps) {
+  /*
+   * The label is read from the shared navigation catalogue rather than taken
+   * as a prop: it is the same word in all 17 locales, and a `logo` is an
+   * opaque node this component cannot read a name out of — a brand that is a
+   * bare SVG would otherwise announce as an unnamed link.
+   */
+  const t = useAppT();
+
   return (
     <div className={`auth-brand-panel ${className}`}>
-      <span className="auth-brand-panel__mark">{logo}</span>
+      <Link
+        href={AUTH.HOME_URL}
+        className="auth-brand-panel__mark"
+        aria-label={t('layouts.navigation.home')}
+      >
+        {logo}
+      </Link>
       {tagline && <p className="auth-brand-panel__tagline">{tagline}</p>}
     </div>
   );

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

@@ -2,6 +2,11 @@
 
 import React, { memo } from 'react';
 
+import { useAppT } from '@djangocfg/i18n';
+import { Link } from '@djangocfg/ui-core/components';
+
+import { AUTH } from '../../constants';
+
 export interface AuthHeaderProps {
   logo?: React.ReactNode;
   title: string;
@@ -34,13 +39,27 @@ function AuthHeaderRaw({
   brandElsewhere = false,
   className = '',
 }: AuthHeaderProps) {
+  const t = useAppT();
+  /*
+   * A link, not decoration — so no `aria-hidden`: it is the one way off this
+   * screen and must be reachable by keyboard and named for a screen reader.
+   * The name comes from the shared catalogue because `logo` is an opaque node
+   * this component cannot read a name out of; a brand that is a bare SVG
+   * would otherwise announce as an unnamed link.
+   */
+  const mark = logo ? (
+    <Link
+      href={AUTH.HOME_URL}
+      className="auth-logo"
+      aria-label={t('layouts.navigation.home')}
+    >
+      {logo}
+    </Link>
+  ) : null;
+
   return (
     <div className={`auth-header ${className}`} data-brand-elsewhere={brandElsewhere}>
-      {logo && (
-        <span className="auth-logo" aria-hidden="true">
-          {logo}
-        </span>
-      )}
+      {mark}
       <h1 className="auth-title">{title}</h1>
       {subtitle && (
         <p className="auth-subtitle" aria-live="polite">

package/src/layouts/AuthLayout/constants.ts

@@ -16,6 +16,19 @@ export const AUTH = {
   BACKUP_CODE_MAX_LENGTH: AUTH_CONSTANTS.BACKUP_CODE_MAX_LENGTH,
 
   // Timing (ms)
+  /**
+   * Where the brand mark links to — the way OUT of the sign-in screen.
+   *
+   * Sign-in is otherwise a dead end: a visitor who arrived by a direct link,
+   * or who was bounced here by an expired session, has no in-page route back
+   * and the browser's Back button has nowhere to return to.
+   *
+   * Not configurable, and the site ROOT rather than `redirectUrl` (which is
+   * where a *successful* sign-in lands — often a private page that would
+   * bounce a signed-out visitor straight back here). A localized app resolves
+   * this through next-intl's `Link`, so `/ru/auth` returns to `/ru`.
+   */
+  HOME_URL: '/',
   ANIMATION_DURATION: 400,
   AUTO_SUBMIT_DELAY: 100,
   COPY_FEEDBACK_DURATION: 2000,

package/src/layouts/AuthLayout/context.tsx

@@ -39,6 +39,7 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   const requireTermsAcceptance = Boolean(termsUrl || privacyUrl);
 
   // Use the auth form hook
+
   const authForm = useAuthForm({
     onIdentifierSuccess,
     onOTPSuccess,

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

@@ -116,6 +116,23 @@
   object-fit: contain;
 }
 
+/* As a link home it is a control, so it needs a visible focus ring and a
+   pointer state; as a decorative mark it stays inert. */
+a.auth-logo {
+  color: inherit;
+  border-radius: var(--auth-radius-sm);
+  transition: opacity 0.15s var(--spring-snappy);
+}
+
+a.auth-logo:hover {
+  opacity: 0.82;
+}
+
+a.auth-logo:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 4px;
+}
+
 @keyframes authLogoIn {
   from {
     opacity: 0;

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

@@ -110,6 +110,23 @@
   align-items: center;
   height: 2.5rem;
   max-width: 100%;
+  /* `align-self` keeps the hit area the width of the artwork: the panel is a
+     flex column, so a link would otherwise stretch the full column width and
+     swallow clicks well past the mark. */
+  align-self: flex-start;
+  color: inherit;
+  border-radius: var(--auth-radius-sm);
+  transition: opacity 0.15s var(--spring-snappy);
+}
+
+/* Only the link form reacts — a plain mark is not a control. */
+a.auth-brand-panel__mark:hover {
+  opacity: 0.82;
+}
+
+a.auth-brand-panel__mark:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 6px;
 }
 
 /* Same contract as `.auth-logo`: cap the height, let the width follow the