@djangocfg/layouts 2.1.488 → 2.1.490

package/README.md

@@ -171,6 +171,18 @@ Wraps `Boundary` from `@djangocfg/ui-core` — same `variant`/`fallback`/`resetK
 
 For local UI widgets that should not report to backend, use `Boundary` from `@djangocfg/ui-core` directly.
 
+## Analytics and auth funnels
+
+`BaseApp` mounts the first-party `AnalyticsProvider` once and bridges events
+from `@djangocfg/api/auth`. `AuthLayout` adds a small `layouts.auth.step_viewed`
+breadcrumb at each visible step; the server-confirmed `auth_login_success`
+event remains the conversion source of truth.
+
+For a custom product goal, use `useAnalytics().event(name, props)` from
+`@djangocfg/analytics`. See that package's README for the typed event catalog,
+browser facade, and extension pattern. Do not create a second route listener or
+send analytics directly from a layout.
+
 ---
 
 ## Package exports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.488",
+  "version": "2.1.490",
   "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.488",
-    "@djangocfg/api": "^2.1.488",
-    "@djangocfg/centrifugo": "^2.1.488",
-    "@djangocfg/devtools": "^2.1.488",
-    "@djangocfg/i18n": "^2.1.488",
-    "@djangocfg/ui-core": "^2.1.488",
+    "@djangocfg/analytics": "^2.1.490",
+    "@djangocfg/api": "^2.1.490",
+    "@djangocfg/centrifugo": "^2.1.490",
+    "@djangocfg/devtools": "^2.1.490",
+    "@djangocfg/i18n": "^2.1.490",
+    "@djangocfg/ui-core": "^2.1.490",
     "@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.488",
-    "@djangocfg/api": "^2.1.488",
-    "@djangocfg/centrifugo": "^2.1.488",
-    "@djangocfg/devtools": "^2.1.488",
-    "@djangocfg/i18n": "^2.1.488",
-    "@djangocfg/typescript-config": "^2.1.488",
-    "@djangocfg/ui-core": "^2.1.488",
-    "@djangocfg/ui-tools": "^2.1.488",
+    "@djangocfg/analytics": "^2.1.490",
+    "@djangocfg/api": "^2.1.490",
+    "@djangocfg/centrifugo": "^2.1.490",
+    "@djangocfg/devtools": "^2.1.490",
+    "@djangocfg/i18n": "^2.1.490",
+    "@djangocfg/typescript-config": "^2.1.490",
+    "@djangocfg/ui-core": "^2.1.490",
+    "@djangocfg/ui-tools": "^2.1.490",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -13,6 +13,7 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
 
 import { consumeSavedRedirect, useAuth, useCfgRouter } from '@djangocfg/api/auth';
+import { useAnalytics } from '@djangocfg/analytics';
 import { useAppT } from '@djangocfg/i18n';
 
 import { Suspense } from '../../components';
@@ -81,6 +82,7 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
         <AuthLayoutContext.Provider value={layoutContextValue}>
           {/* Full-screen success overlay */}
           <AuthSuccessOverlay />
+          <AuthFunnelTracker />
 
           <AuthShell variant={variant} mediaSide={mediaSide} background={background} sidebar={sidebar} className={className}>
             {/* Handle OAuth callback when GitHub auth is enabled */}
@@ -95,6 +97,27 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
   );
 };
 
+/**
+ * A lightweight UI breadcrumb around the server-confirmed auth events.
+ *
+ * `auth_login_success` remains server-authoritative. This event only answers
+ * where a person stopped in the layout, and quietly becomes a no-op when an
+ * app intentionally does not mount AnalyticsProvider.
+ */
+const AuthFunnelTracker: React.FC = memo(() => {
+  const { step } = useAuthFormContext();
+  const { event, isEnabled } = useAnalytics();
+  const lastStep = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    if (!isEnabled || lastStep.current === step) return;
+    lastStep.current = step;
+    event('layouts.auth.step_viewed', { step });
+  }, [event, isEnabled, step]);
+
+  return null;
+});
+
 /** Renders custom children only on the identifier step — hides them on otp / 2fa / etc. */
 const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = memo(({ children }) => {
   const { step } = useAuthFormContext();