@djangocfg/layouts 2.1.592 → 2.1.593

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.592",
+  "version": "2.1.593",
   "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.592",
-    "@djangocfg/api": "^2.1.592",
-    "@djangocfg/devtools": "^2.1.592",
-    "@djangocfg/i18n": "^2.1.592",
-    "@djangocfg/ui-core": "^2.1.592",
+    "@djangocfg/analytics": "^2.1.593",
+    "@djangocfg/api": "^2.1.593",
+    "@djangocfg/devtools": "^2.1.593",
+    "@djangocfg/i18n": "^2.1.593",
+    "@djangocfg/ui-core": "^2.1.593",
     "@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.592",
-    "@djangocfg/api": "^2.1.592",
-    "@djangocfg/devtools": "^2.1.592",
-    "@djangocfg/i18n": "^2.1.592",
-    "@djangocfg/typescript-config": "^2.1.592",
-    "@djangocfg/ui-core": "^2.1.592",
+    "@djangocfg/analytics": "^2.1.593",
+    "@djangocfg/api": "^2.1.593",
+    "@djangocfg/devtools": "^2.1.593",
+    "@djangocfg/i18n": "^2.1.593",
+    "@djangocfg/typescript-config": "^2.1.593",
+    "@djangocfg/ui-core": "^2.1.593",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/components/errors/ErrorLayout.tsx

@@ -23,6 +23,7 @@ import { Button } from '@djangocfg/ui-core/components';
 import { useAppT } from '@djangocfg/i18n';
 
 import { getErrorContent } from './errorConfig';
+import { getErrorIcon } from './errorGlyphs';
 
 export interface ErrorLayoutProps {
   /** Error code (e.g., "404", "500", "403") - if provided, auto-configures title/description/icon */
@@ -69,170 +70,6 @@ export interface ErrorLayoutProps {
  * weight comes from a soft radial glow on the wrapper, not the icon itself.
  */
 
-interface GlyphSpec {
-  /** Accent tint used for the glow and the gradient stop. */
-  accent: string;
-  /** viewBox for the inner SVG. Default 24 24. */
-  viewBox?: string;
-  /** Inner SVG children. Must use `currentColor` for stroke. */
-  paths: React.ReactNode;
-}
-
-const GLYPH_SPECS: Record<string, GlyphSpec> = {
-  // 404 — magnifier over a page corner (not-found)
-  '404': {
-    accent: 'rgb(139 92 246)', // violet-500
-    paths: (
-      <>
-        <path d="M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7.5" />
-        <path d="M13.5 3 19 8.5" />
-        <path d="M13 3v4a2 2 0 0 0 2 2h4" />
-        <circle cx="11" cy="14.5" r="2.5" />
-        <path d="m13 16.5 2 2" />
-      </>
-    ),
-  },
-  // 500 — server stack with a warning bolt (server-side failure)
-  '500': {
-    accent: 'rgb(239 68 68)', // red-500
-    paths: (
-      <>
-        <rect x="3" y="4" width="18" height="6" rx="1.5" />
-        <rect x="3" y="14" width="18" height="6" rx="1.5" />
-        <path d="M7 7h.01" />
-        <path d="M7 17h.01" />
-        <path d="m15 6-2 4h3l-2 4" strokeLinejoin="round" />
-      </>
-    ),
-  },
-  // 502 — two servers with a broken link between
-  '502': {
-    accent: 'rgb(249 115 22)', // orange-500
-    paths: (
-      <>
-        <rect x="3" y="4" width="8" height="16" rx="1.5" />
-        <rect x="13" y="4" width="8" height="16" rx="1.5" />
-        <path d="M6 8h.01" />
-        <path d="M16 8h.01" />
-        <path d="M11 11.5h-1" />
-        <path d="M14 12.5h-1" />
-        <path d="m11 10 2 4" strokeLinejoin="round" />
-      </>
-    ),
-  },
-  // 503 — power off / plug pulled
-  '503': {
-    accent: 'rgb(249 115 22)', // orange-500
-    paths: (
-      <>
-        <path d="M12 2v10" />
-        <path d="M18.4 6.6a9 9 0 1 1-12.77 0" />
-      </>
-    ),
-  },
-  // 504 — clock with slash (gateway timeout)
-  '504': {
-    accent: 'rgb(234 179 8)', // yellow-500
-    paths: (
-      <>
-        <circle cx="12" cy="12" r="9" />
-        <path d="M12 7v5l3 2" />
-      </>
-    ),
-  },
-  // 408 — clock (request timeout)
-  '408': {
-    accent: 'rgb(234 179 8)', // yellow-500
-    paths: (
-      <>
-        <circle cx="12" cy="12" r="9" />
-        <path d="M12 7v5l3 2" />
-      </>
-    ),
-  },
-  // 403 — shield with a prohibition line (forbidden)
-  '403': {
-    accent: 'rgb(239 68 68)', // red-500
-    paths: (
-      <>
-        <path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z" />
-        <path d="m9 9 6 6" strokeLinejoin="round" />
-      </>
-    ),
-  },
-  // 401 — key (auth required)
-  '401': {
-    accent: 'rgb(59 130 246)', // blue-500
-    paths: (
-      <>
-        <circle cx="8" cy="15" r="4" />
-        <path d="m10.8 12.2 8.2-8.2" />
-        <path d="m17 5 3 3" />
-        <path d="m15 7 2 2" />
-      </>
-    ),
-  },
-  // 400 — general alert triangle (bad request)
-  '400': {
-    accent: 'rgb(234 179 8)', // yellow-500
-    paths: (
-      <>
-        <path d="m12 3 10 18H2L12 3Z" strokeLinejoin="round" />
-        <path d="M12 9v5" />
-        <path d="M12 17.5h.01" />
-      </>
-    ),
-  },
-};
-
-const DEFAULT_GLYPH: GlyphSpec = {
-  accent: 'rgb(113 113 122)', // zinc-500
-  paths: (
-    <>
-      <circle cx="12" cy="12" r="9" />
-      <path d="M12 8v4" />
-      <path d="M12 16h.01" />
-    </>
-  ),
-};
-
-/**
- * Render the glyph for a given code, wrapped in a container with a soft radial
- * glow behind the icon. Returns `null` if nothing should be shown.
- */
-function getErrorIcon(code?: string | number): React.ReactNode {
-  if (code === undefined || code === null || code === '') return null;
-  const c = String(code);
-  const spec = GLYPH_SPECS[c] ?? DEFAULT_GLYPH;
-
-  return (
-    <div
-      className="relative mx-auto flex size-28 items-center justify-center"
-      aria-hidden="true"
-    >
-      {/* soft radial glow */}
-      <div
-        className="pointer-events-none absolute inset-0 rounded-full blur-2xl opacity-60"
-        style={{
-          background: `radial-gradient(circle at 50% 50%, ${spec.accent} 0%, transparent 65%)`,
-        }}
-      />
-      {/* icon */}
-      <svg
-        className="relative size-20"
-        viewBox={spec.viewBox ?? '0 0 24 24'}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={1.25}
-        strokeLinecap="round"
-        style={{ color: spec.accent }}
-      >
-        {spec.paths}
-      </svg>
-    </div>
-  );
-}
-
 /**
  * ErrorLayout Component
  */

package/src/components/errors/ErrorsTracker/providers/ErrorTrackingProvider.tsx

@@ -33,6 +33,7 @@ import React, {
 import { toast } from '@djangocfg/ui-core/hooks';
 import { useDebugMode, isProduction } from '@djangocfg/devtools';
 
+import { generateErrorId, shouldShowError, shouldThrottleProdToast } from './errorDedupe';
 import { createErrorToast } from '../components/ErrorToast';
 import { generateShortErrorId, getProductionToast } from '../utils/formatters';
 import {
@@ -59,106 +60,6 @@ import type {
 } from '../types';
 const ErrorTrackingContext = createContext<ErrorTrackingContextValue | undefined>(undefined);
 
-/**
- * Generate unique ID for error
- */
-let errorIdCounter = 0;
-function generateErrorId(type: string): string {
-  return `${type}-error-${Date.now()}-${++errorIdCounter}`;
-}
-
-/**
- * Generate deduplication key for error
- * Used to prevent duplicate toasts for the same error
- */
-function getErrorDedupeKey(detail: ErrorDetail): string {
-  switch (detail.type) {
-    case 'validation':
-      return `validation:${detail.path}:${detail.method}`;
-    case 'cors':
-      return `cors:${detail.url}`;
-    case 'network':
-      return `network:${detail.url}:${detail.statusCode || 'unknown'}`;
-    case 'runtime':
-      return `runtime:${detail.source}:${detail.message.slice(0, 50)}`;
-    default:
-      return `unknown:${Date.now()}`;
-  }
-}
-
-/** Deduplication window in ms - same errors within this window are ignored */
-const DEDUPE_WINDOW_MS = 5000;
-
-/** Max entries in deduplication map before forced cleanup */
-const DEDUPE_MAX_ENTRIES = 50;
-
-/** Map to track recent errors for deduplication (browser-only) */
-let recentErrors: Map<string, number> | null = null;
-
-function getRecentErrorsMap(): Map<string, number> {
-  // Lazy init - only create in browser
-  if (typeof window === 'undefined') {
-    // Return dummy map for SSR (won't persist)
-    return new Map();
-  }
-  if (!recentErrors) {
-    recentErrors = new Map();
-  }
-  return recentErrors;
-}
-
-/**
- * Check if error should be shown (not a duplicate)
- * Returns true if error should be shown, false if it's a duplicate
- */
-function shouldShowError(detail: ErrorDetail): boolean {
-  const map = getRecentErrorsMap();
-  const key = getErrorDedupeKey(detail);
-  const now = Date.now();
-  const lastSeen = map.get(key);
-
-  // Clean up old entries when map gets too large
-  if (map.size > DEDUPE_MAX_ENTRIES) {
-    for (const [k, timestamp] of map.entries()) {
-      if (now - timestamp > DEDUPE_WINDOW_MS) {
-        map.delete(k);
-      }
-    }
-    // If still too large after cleanup, clear oldest half
-    if (map.size > DEDUPE_MAX_ENTRIES) {
-      const entries = Array.from(map.entries())
-        .sort((a, b) => a[1] - b[1])
-        .slice(0, Math.floor(map.size / 2));
-      for (const [k] of entries) {
-        map.delete(k);
-      }
-    }
-  }
-
-  // Check if we've seen this error recently
-  if (lastSeen && now - lastSeen < DEDUPE_WINDOW_MS) {
-    return false; // Duplicate, don't show
-  }
-
-  // Mark as seen
-  map.set(key, now);
-  return true;
-}
-
-/** Throttle production toasts — max 1 per type within this window */
-const PROD_TOAST_THROTTLE_MS = 3000;
-let lastProdToastByType: Map<string, number> | null = null;
-
-function shouldThrottleProdToast(type: string): boolean {
-  if (typeof window === 'undefined') return false;
-  if (!lastProdToastByType) lastProdToastByType = new Map();
-  const now = Date.now();
-  const last = lastProdToastByType.get(type);
-  if (last && now - last < PROD_TOAST_THROTTLE_MS) return true;
-  lastProdToastByType.set(type, now);
-  return false;
-}
-
 export interface ErrorTrackingProviderProps {
   children: ReactNode;
   validation?: Partial<ValidationErrorConfig>;

package/src/components/errors/ErrorsTracker/providers/errorDedupe.ts

@@ -0,0 +1,101 @@
+import type { ErrorDetail } from '../types';
+
+/**
+ * Generate unique ID for error
+ */
+let errorIdCounter = 0;
+export function generateErrorId(type: string): string {
+  return `${type}-error-${Date.now()}-${++errorIdCounter}`;
+}
+
+/**
+ * Generate deduplication key for error
+ * Used to prevent duplicate toasts for the same error
+ */
+function getErrorDedupeKey(detail: ErrorDetail): string {
+  switch (detail.type) {
+    case 'validation':
+      return `validation:${detail.path}:${detail.method}`;
+    case 'cors':
+      return `cors:${detail.url}`;
+    case 'network':
+      return `network:${detail.url}:${detail.statusCode || 'unknown'}`;
+    case 'runtime':
+      return `runtime:${detail.source}:${detail.message.slice(0, 50)}`;
+    default:
+      return `unknown:${Date.now()}`;
+  }
+}
+
+/** Deduplication window in ms - same errors within this window are ignored */
+const DEDUPE_WINDOW_MS = 5000;
+
+/** Max entries in deduplication map before forced cleanup */
+const DEDUPE_MAX_ENTRIES = 50;
+
+/** Map to track recent errors for deduplication (browser-only) */
+let recentErrors: Map<string, number> | null = null;
+
+function getRecentErrorsMap(): Map<string, number> {
+  // Lazy init - only create in browser
+  if (typeof window === 'undefined') {
+    // Return dummy map for SSR (won't persist)
+    return new Map();
+  }
+  if (!recentErrors) {
+    recentErrors = new Map();
+  }
+  return recentErrors;
+}
+
+/**
+ * Check if error should be shown (not a duplicate)
+ * Returns true if error should be shown, false if it's a duplicate
+ */
+export function shouldShowError(detail: ErrorDetail): boolean {
+  const map = getRecentErrorsMap();
+  const key = getErrorDedupeKey(detail);
+  const now = Date.now();
+  const lastSeen = map.get(key);
+
+  // Clean up old entries when map gets too large
+  if (map.size > DEDUPE_MAX_ENTRIES) {
+    for (const [k, timestamp] of map.entries()) {
+      if (now - timestamp > DEDUPE_WINDOW_MS) {
+        map.delete(k);
+      }
+    }
+    // If still too large after cleanup, clear oldest half
+    if (map.size > DEDUPE_MAX_ENTRIES) {
+      const entries = Array.from(map.entries())
+        .sort((a, b) => a[1] - b[1])
+        .slice(0, Math.floor(map.size / 2));
+      for (const [k] of entries) {
+        map.delete(k);
+      }
+    }
+  }
+
+  // Check if we've seen this error recently
+  if (lastSeen && now - lastSeen < DEDUPE_WINDOW_MS) {
+    return false; // Duplicate, don't show
+  }
+
+  // Mark as seen
+  map.set(key, now);
+  return true;
+}
+
+/** Throttle production toasts — max 1 per type within this window */
+const PROD_TOAST_THROTTLE_MS = 3000;
+let lastProdToastByType: Map<string, number> | null = null;
+
+export function shouldThrottleProdToast(type: string): boolean {
+  if (typeof window === 'undefined') return false;
+  if (!lastProdToastByType) lastProdToastByType = new Map();
+  const now = Date.now();
+  const last = lastProdToastByType.get(type);
+  if (last && now - last < PROD_TOAST_THROTTLE_MS) return true;
+  lastProdToastByType.set(type, now);
+  return false;
+}

package/src/components/errors/errorGlyphs.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import React from 'react';
+
+interface GlyphSpec {
+  /** Accent tint used for the glow and the gradient stop. */
+  accent: string;
+  /** viewBox for the inner SVG. Default 24 24. */
+  viewBox?: string;
+  /** Inner SVG children. Must use `currentColor` for stroke. */
+  paths: React.ReactNode;
+}
+
+const GLYPH_SPECS: Record<string, GlyphSpec> = {
+  // 404 — magnifier over a page corner (not-found)
+  '404': {
+    accent: 'rgb(139 92 246)', // violet-500
+    paths: (
+      <>
+        <path d="M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7.5" />
+        <path d="M13.5 3 19 8.5" />
+        <path d="M13 3v4a2 2 0 0 0 2 2h4" />
+        <circle cx="11" cy="14.5" r="2.5" />
+        <path d="m13 16.5 2 2" />
+      </>
+    ),
+  },
+  // 500 — server stack with a warning bolt (server-side failure)
+  '500': {
+    accent: 'rgb(239 68 68)', // red-500
+    paths: (
+      <>
+        <rect x="3" y="4" width="18" height="6" rx="1.5" />
+        <rect x="3" y="14" width="18" height="6" rx="1.5" />
+        <path d="M7 7h.01" />
+        <path d="M7 17h.01" />
+        <path d="m15 6-2 4h3l-2 4" strokeLinejoin="round" />
+      </>
+    ),
+  },
+  // 502 — two servers with a broken link between
+  '502': {
+    accent: 'rgb(249 115 22)', // orange-500
+    paths: (
+      <>
+        <rect x="3" y="4" width="8" height="16" rx="1.5" />
+        <rect x="13" y="4" width="8" height="16" rx="1.5" />
+        <path d="M6 8h.01" />
+        <path d="M16 8h.01" />
+        <path d="M11 11.5h-1" />
+        <path d="M14 12.5h-1" />
+        <path d="m11 10 2 4" strokeLinejoin="round" />
+      </>
+    ),
+  },
+  // 503 — power off / plug pulled
+  '503': {
+    accent: 'rgb(249 115 22)', // orange-500
+    paths: (
+      <>
+        <path d="M12 2v10" />
+        <path d="M18.4 6.6a9 9 0 1 1-12.77 0" />
+      </>
+    ),
+  },
+  // 504 — clock with slash (gateway timeout)
+  '504': {
+    accent: 'rgb(234 179 8)', // yellow-500
+    paths: (
+      <>
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 7v5l3 2" />
+      </>
+    ),
+  },
+  // 408 — clock (request timeout)
+  '408': {
+    accent: 'rgb(234 179 8)', // yellow-500
+    paths: (
+      <>
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 7v5l3 2" />
+      </>
+    ),
+  },
+  // 403 — shield with a prohibition line (forbidden)
+  '403': {
+    accent: 'rgb(239 68 68)', // red-500
+    paths: (
+      <>
+        <path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z" />
+        <path d="m9 9 6 6" strokeLinejoin="round" />
+      </>
+    ),
+  },
+  // 401 — key (auth required)
+  '401': {
+    accent: 'rgb(59 130 246)', // blue-500
+    paths: (
+      <>
+        <circle cx="8" cy="15" r="4" />
+        <path d="m10.8 12.2 8.2-8.2" />
+        <path d="m17 5 3 3" />
+        <path d="m15 7 2 2" />
+      </>
+    ),
+  },
+  // 400 — general alert triangle (bad request)
+  '400': {
+    accent: 'rgb(234 179 8)', // yellow-500
+    paths: (
+      <>
+        <path d="m12 3 10 18H2L12 3Z" strokeLinejoin="round" />
+        <path d="M12 9v5" />
+        <path d="M12 17.5h.01" />
+      </>
+    ),
+  },
+};
+
+const DEFAULT_GLYPH: GlyphSpec = {
+  accent: 'rgb(113 113 122)', // zinc-500
+  paths: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 8v4" />
+      <path d="M12 16h.01" />
+    </>
+  ),
+};
+
+/**
+ * Render the glyph for a given code, wrapped in a container with a soft radial
+ * glow behind the icon. Returns `null` if nothing should be shown.
+ */
+export function getErrorIcon(code?: string | number): React.ReactNode {
+  if (code === undefined || code === null || code === '') return null;
+  const c = String(code);
+  const spec = GLYPH_SPECS[c] ?? DEFAULT_GLYPH;
+
+  return (
+    <div
+      className="relative mx-auto flex size-28 items-center justify-center"
+      aria-hidden="true"
+    >
+      {/* soft radial glow */}
+      <div
+        className="pointer-events-none absolute inset-0 rounded-full blur-2xl opacity-60"
+        style={{
+          background: `radial-gradient(circle at 50% 50%, ${spec.accent} 0%, transparent 65%)`,
+        }}
+      />
+      {/* icon */}
+      <svg
+        className="relative size-20"
+        viewBox={spec.viewBox ?? '0 0 24 24'}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        style={{ color: spec.accent }}
+      >
+        {spec.paths}
+      </svg>
+    </div>
+  );
+}

package/src/layouts/AppLayout/BaseApp.tsx

@@ -61,7 +61,7 @@ import { AnalyticsProvider } from '../../snippets/Analytics';
 import { AuthDialog } from '../../snippets/AuthDialog';
 
 import type { BaseLayoutProps } from '../types/layout.types';
-import { LayoutI18nProvider } from './LayoutI18nProvider';
+import { LayoutI18nProvider } from '../../shared/LayoutI18nProvider';
 
 import React from 'react';
 

package/src/layouts/AppLayout/index.ts

@@ -17,8 +17,8 @@ export {
   LayoutI18nProvider,
   useLayoutI18n,
   useLayoutI18nOptional,
-} from './LayoutI18nProvider';
-export type { LayoutI18nProviderProps } from './LayoutI18nProvider';
+} from '../../shared/LayoutI18nProvider';
+export type { LayoutI18nProviderProps } from '../../shared/LayoutI18nProvider';
 
 // Re-export theme-override primitives so consumers can force a theme on a
 // subtree (e.g. an always-dark marketing route) without depending on ui-core

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -13,7 +13,7 @@
 
 'use client';
 
-import React, { createContext, memo, useContext, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { consumeSavedRedirect, useAuth, useCfgRouter } from '@djangocfg/api/auth';
 import { useAnalytics } from '@djangocfg/analytics';
@@ -34,31 +34,11 @@ import './styles/split-shell.css';
 import './styles/fullsplit-shell.css';
 
 import type { AuthLayoutProps } from './types';
+import { AuthLayoutContext } from './layoutContext';
+export { useAuthLayoutContext } from './layoutContext';
 
 // ─── Layout-level context (header suppression, etc.) ─────────────────────────
 
-interface AuthLayoutContextValue {
-  /** True when the consumer passed custom children — step headers should be hidden */
-  hideHeader: boolean;
-  /**
-   * True when the brand is already rendered on the media half, so the form
-   * header must not repeat it.
-   *
-   * A statement about the DESKTOP layout only: `fullsplit` drops the media half
-   * below 1024px, where the logo above the form is the only brand left. CSS
-   * owns that half of the decision on the same breakpoint — see
-   * `.auth-header[data-brand-elsewhere]` in `auth.css`.
-   */
-  hasBrandPanel: boolean;
-}
-
-const AuthLayoutContext = createContext<AuthLayoutContextValue>({
-  hideHeader: false,
-  hasBrandPanel: false,
-});
-
-export const useAuthLayoutContext = (): AuthLayoutContextValue => useContext(AuthLayoutContext);
-
 /**
  * The provider itself, for harnesses that mount the steps without `AuthLayout`
  * (Storybook does, via `AuthShell`). Without it those previews always read the

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

@@ -8,7 +8,7 @@ import { useAppT } from '@djangocfg/i18n';
 import { Link } from '@djangocfg/ui-core/components';
 
 import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
-import { useLayoutI18nOptional } from '../../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../../shared/LayoutI18nProvider';
 import { AUTH } from '../../constants';
 
 export interface AuthTopBarProps {

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

@@ -7,7 +7,7 @@ import { useGithubAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { Checkbox, Input } from '@djangocfg/ui-core/components';
 
-import { useAuthLayoutContext } from '../../AuthLayout';
+import { useAuthLayoutContext } from '../../layoutContext';
 import { useAuthFormContext } from '../../context';
 import {
   AuthButton,