@djangocfg/layouts 2.1.456 → 2.1.459

package/README.md

@@ -136,7 +136,7 @@ When `routing` is set, `BaseApp` mounts a locale-aware `<Link>` adapter so every
 
 ### `MonitorBoundary`
 
-Error boundary that automatically reports caught errors to `@djangocfg/monitor`. Use at page/layout level so unexpected render errors land in your backend dashboard.
+Error boundary that automatically reports caught errors to `@djangocfg/devtools`. Use at page/layout level so unexpected render errors land in your backend dashboard.
 
 ```tsx
 import { MonitorBoundary } from '@djangocfg/layouts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.456",
+  "version": "2.1.459",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,10 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.456",
-    "@djangocfg/centrifugo": "^2.1.456",
-    "@djangocfg/debuger": "^2.1.456",
-    "@djangocfg/i18n": "^2.1.456",
-    "@djangocfg/monitor": "^2.1.456",
-    "@djangocfg/ui-core": "^2.1.456",
+    "@djangocfg/api": "^2.1.459",
+    "@djangocfg/centrifugo": "^2.1.459",
+    "@djangocfg/i18n": "^2.1.459",
+    "@djangocfg/ui-core": "^2.1.459",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -110,10 +108,11 @@
     "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^4.3.6",
-    "zustand": "^5.0.0"
+    "zustand": "^5.0.0",
+    "@djangocfg/devtools": "^2.1.459"
   },
   "peerDependenciesMeta": {
-    "@djangocfg/monitor": {
+    "@djangocfg/devtools": {
       "optional": true
     }
   },
@@ -125,21 +124,20 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.456",
-    "@djangocfg/centrifugo": "^2.1.456",
-    "@djangocfg/debuger": "^2.1.456",
-    "@djangocfg/i18n": "^2.1.456",
-    "@djangocfg/monitor": "^2.1.456",
-    "@djangocfg/typescript-config": "^2.1.456",
-    "@djangocfg/ui-core": "^2.1.456",
-    "@djangocfg/ui-tools": "^2.1.456",
+    "@djangocfg/api": "^2.1.459",
+    "@djangocfg/centrifugo": "^2.1.459",
+    "@djangocfg/i18n": "^2.1.459",
+    "@djangocfg/typescript-config": "^2.1.459",
+    "@djangocfg/ui-core": "^2.1.459",
+    "@djangocfg/ui-tools": "^2.1.459",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.37.0",
     "next-intl": "^4.9.1",
     "typescript": "^5.9.3",
-    "zustand": "^5.0.9"
+    "zustand": "^5.0.9",
+    "@djangocfg/devtools": "^2.1.459"
   },
   "publishConfig": {
     "access": "public"

package/src/components/RedirectPage/RedirectPage.tsx

@@ -1,5 +1,4 @@
 'use client';
-import { DEFAULT_AUTH_PATH } from '@djangocfg/api/auth';
 
 import { useEffect } from 'react';
 
@@ -47,19 +46,20 @@ export interface RedirectPageProps {
  */
 export function RedirectPage({
   authenticatedPath = '/private',
-  unauthenticatedPath = DEFAULT_AUTH_PATH,
+  unauthenticatedPath,
   loadingText = 'Loading...',
 }: RedirectPageProps) {
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, routes } = useAuth();
   const router = useCfgRouter();
+  const resolvedUnauthPath = unauthenticatedPath ?? routes.auth;
 
   useEffect(() => {
     if (!isAuthenticated) {
-      router.hardPush(unauthenticatedPath);
+      router.hardPush(resolvedUnauthPath);
     } else {
       router.hardPush(authenticatedPath);
     }
-  }, [isAuthenticated, router, authenticatedPath, unauthenticatedPath]);
+  }, [isAuthenticated, router, authenticatedPath, resolvedUnauthPath]);
 
   return (
     <Preloader

package/src/components/errors/ErrorsTracker/index.ts

@@ -50,7 +50,7 @@ export {
   formatRuntimeErrorForClipboard,
   formatErrorTitle,
   extractDomain,
-  errorDetailToMonitorEvent,
+  errorDetailToDevtoolsEvent,
 } from './utils/formatters';
 
 export {

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

@@ -31,7 +31,7 @@ import React, {
 } from 'react';
 
 import { toast } from '@djangocfg/ui-core/hooks';
-import { useDebugMode, isProduction } from '@djangocfg/monitor/client';
+import { useDebugMode, isProduction } from '@djangocfg/devtools';
 
 import { createErrorToast } from '../components/ErrorToast';
 import { generateShortErrorId, getProductionToast } from '../utils/formatters';
@@ -171,7 +171,7 @@ export interface ErrorTrackingProviderProps {
   centrifugo?: Partial<CentrifugoErrorConfig>;
   runtime?: Partial<RuntimeErrorConfig>;
   onError?: (error: ErrorDetail) => boolean | void;
-  /** Called with the raw ErrorDetail for every tracked error. Wire to FrontendMonitor.capture() (via toMonitorEvent) to forward errors to the backend. */
+  /** Called with the raw ErrorDetail for every tracked error. Wire to devtools.capture() (via errorDetailToDevtoolsEvent) to forward errors to the backend. */
   onMonitorCapture?: (detail: ErrorDetail) => void;
 }
 

package/src/components/errors/ErrorsTracker/utils/formatters.ts

@@ -6,8 +6,8 @@
 
 import type { ZodError } from 'zod';
 import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, CentrifugoErrorDetail, RuntimeErrorDetail, ErrorDetail } from '../types';
-import type { MonitorEvent } from '@djangocfg/monitor';
-import { EventType, EventLevel } from '@djangocfg/monitor';
+import type { DevtoolsEvent } from '@djangocfg/devtools';
+import { EventType, EventLevel } from '@djangocfg/devtools';
 
 /**
  * Safely read Zod issues. The error toast must never crash itself, so we
@@ -148,10 +148,10 @@ export function formatRuntimeErrorForClipboard(detail: RuntimeErrorDetail): stri
 }
 
 /**
- * Convert ErrorDetail to MonitorEvent for forwarding to @djangocfg/monitor backend.
+ * Convert ErrorDetail to DevtoolsEvent for forwarding to the backend ingest.
  * Use via ErrorTrackingProvider.onMonitorCapture.
  */
-export function errorDetailToMonitorEvent(detail: ErrorDetail): MonitorEvent {
+export function errorDetailToDevtoolsEvent(detail: ErrorDetail): DevtoolsEvent {
   const url = typeof window !== 'undefined' ? window.location.href : ''
   switch (detail.type) {
     case 'validation':

package/src/components/errors/MonitorBoundary.tsx

@@ -5,12 +5,12 @@ import type {
   BoundaryProps,
   BoundaryResetDetails,
 } from '@djangocfg/ui-core/components';
-import { EventLevel, EventType, FrontendMonitor } from '@djangocfg/monitor/client';
+import { EventLevel, EventType, devtools } from '@djangocfg/devtools';
 import { useCallback } from 'react';
 import type { ErrorInfo, ReactNode } from 'react';
 
 export interface MonitorBoundaryProps extends Omit<BoundaryProps, 'onError' | 'onReset'> {
-  /** Forwarded to FrontendMonitor as `extra.source` so you can filter events by boundary. */
+  /** Forwarded to devtools as `extra.source` so you can filter events by boundary. */
   name?: string;
   /** Additional render-error handler called alongside the monitor capture. */
   onError?: (error: Error, info: ErrorInfo) => void;
@@ -27,7 +27,7 @@ function currentUrl(): string | undefined {
 
 function reportError(name: string | undefined, error: Error, info: ErrorInfo): void {
   try {
-    FrontendMonitor.capture({
+    devtools.capture({
       event_type: EventType.ERROR,
       level: EventLevel.ERROR,
       message: error.message || 'Unhandled React render error',
@@ -45,7 +45,7 @@ function reportError(name: string | undefined, error: Error, info: ErrorInfo): v
 
 function reportReset(name: string | undefined, details: BoundaryResetDetails): void {
   try {
-    FrontendMonitor.capture({
+    devtools.capture({
       event_type: EventType.ERROR,
       level: EventLevel.INFO,
       message: `Boundary recovered (${details.reason})`,
@@ -61,7 +61,7 @@ function reportReset(name: string | undefined, details: BoundaryResetDetails): v
 }
 
 /**
- * `Boundary` + automatic reporting to `@djangocfg/monitor`.
+ * `Boundary` + automatic reporting to `@djangocfg/devtools`.
  *
  * Use at page/layout level so unexpected render errors are captured in your backend.
  * For widgets you don't want to report (chat, embeds), use `Boundary` from ui-core directly.

package/src/components/errors/README.md

@@ -12,7 +12,7 @@ All boundaries here build on the single `Boundary` primitive in
 | File | What it does |
 |------|--------------|
 | `ErrorBoundary.tsx` | Thin wrapper over ui-core `Boundary` — i18n fallback + support email (for direct use; `BaseApp` no longer wraps it). |
-| `MonitorBoundary.tsx` | ui-core `Boundary` that also reports to `@djangocfg/monitor`. |
+| `MonitorBoundary.tsx` | ui-core `Boundary` that also reports to `@djangocfg/devtools`. |
 | `ErrorLayout.tsx` | Full-page error layout (`getErrorContent` / `ERROR_CODES`). |
 | `ErrorsTracker/` | Global runtime tracker — listens for error CustomEvents and shows toasts. |
 
@@ -63,5 +63,5 @@ internal proof wording (gated by `isDev`).
 
 - Env/feature flags come from the single source of truth: `isDev` from
   `@djangocfg/ui-core/lib`, `dpopEnabled` from `@djangocfg/api`.
-- Errors also flow to `@djangocfg/monitor` → `@djangocfg/debuger` panel for
+- Errors also flow to `@djangocfg/devtools` (backend ingest + debug panel) for
   inspection regardless of toast visibility.

package/src/layouts/AppLayout/BaseApp.tsx

@@ -47,8 +47,8 @@ import { nodeEnv } from "@djangocfg/ui-core/lib";
 import NextTopLoader from 'nextjs-toploader';
 import { SWRConfig } from 'swr';
 
-import { MonitorProvider, FrontendMonitor } from '@djangocfg/monitor/client';
-import { errorDetailToMonitorEvent } from '../../components/errors/ErrorsTracker';
+import { Devtools, devtools } from '@djangocfg/devtools';
+import { errorDetailToDevtoolsEvent } from '../../components/errors/ErrorsTracker';
 import { CfgCentrifugo } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
@@ -67,9 +67,6 @@ import type { BaseLayoutProps } from '../types/layout.types';
 import { LayoutI18nProvider } from './LayoutI18nProvider';
 
 import React from 'react';
-const DebugButton = React.lazy(() =>
-  import('@djangocfg/debuger').then((m) => ({ default: m.DebugButton }))
-);
 
 // For backwards compatibility, re-export as BaseAppProps
 export type BaseAppProps = BaseLayoutProps;
@@ -136,8 +133,7 @@ export function BaseApp({
   errorTracking,
   errorBoundary,
   swr,
-  monitor,
-  debug,
+  devtools: devtoolsConfig,
   i18n,
 }: BaseAppProps) {
   // auth=false disables AuthProvider entirely (public apps with no login)
@@ -151,15 +147,12 @@ export function BaseApp({
   const centrifugoUrl = centrifugo?.url || process.env.NEXT_PUBLIC_CENTRIFUGO_URL;
   const centrifugoEnabled = centrifugo?.enabled !== false;
 
-  // Debug panel — always mounted, DebugButton handles visibility itself
-  const { enabled: debugEnabled, ...debugProps } = debug ?? {};
-
-
-  // Monitor — project prop as default, override with monitor config
-  const monitorConfig = {
+  // Devtools — capture + ingest + debug panel in one component.
+  // Project prop is the default; the devtools prop overrides field by field.
+  const devtoolsProps = {
     project,
     environment: nodeEnv,
-    ...monitor,
+    ...devtoolsConfig,
   };
 
   const content = (
@@ -215,9 +208,9 @@ export function BaseApp({
                   cors={errorTracking?.cors}
                   network={errorTracking?.network}
                   onError={errorTracking?.onError}
-                  onMonitorCapture={(d) => FrontendMonitor.capture(errorDetailToMonitorEvent(d))}
+                  onMonitorCapture={(d) => devtools.capture(errorDetailToDevtoolsEvent(d))}
                 >
-                  <MonitorProvider {...monitorConfig} />
+                  <Devtools {...devtoolsProps} />
                   <LayoutI18nProvider value={i18n}>
                     {i18n?.routing ? (
                       <NextIntlLinkBridge routing={i18n.routing}>{children}</NextIntlLinkBridge>
@@ -234,10 +227,6 @@ export function BaseApp({
 
                   {/* Auth Dialog - only when auth is enabled */}
                   {authEnabled && <AuthDialog authPath={authConfig?.routes?.auth} />}
-
-                  {/* Debug Panel — auto in dev, ?debug=1 in prod, disable with debug={{ enabled: false }} */}
-                  {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                  <DebugButton enabled={debugEnabled} {...(debugProps as any)} />
                 </ErrorTrackingProvider>
               </CentrifugoProvider>
             </AnalyticsProvider>

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -12,7 +12,7 @@
 
 import React, { createContext, memo, useContext, useMemo } from 'react';
 
-import { useCfgRouter } from '@djangocfg/api/auth';
+import { consumeSavedRedirect, useAuth, useCfgRouter } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 
 import { Suspense } from '../../components';
@@ -49,7 +49,9 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
     background,
     sidebar,
     enableGithubAuth,
-    redirectUrl = AUTH.DEFAULT_REDIRECT,
+    // No default here — an unset prop falls through to the saved back-url /
+    // resolved routes.defaultCallback chain at navigation time (AuthSuccess).
+    redirectUrl,
     onOAuthSuccess,
     onError,
     className,
@@ -143,6 +145,7 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
   redirectDelay = AUTH.REDIRECT_DELAY,
 }) => {
   const router = useCfgRouter();
+  const { routes } = useAuth();
   const t = useAppT();
   const [isVisible, setIsVisible] = React.useState(false);
 
@@ -151,7 +154,9 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
   React.useEffect(() => {
     const animTimer = setTimeout(() => setIsVisible(true), AUTH.ANIMATION_START_DELAY);
     const redirectTimer = setTimeout(() => {
-      const finalUrl = redirectUrl || AUTH.DEFAULT_REDIRECT;
+      // Priority: saved back-url (where the guard bounced the user from,
+      // single-use) > the app's static redirectUrl prop > resolved default.
+      const finalUrl = consumeSavedRedirect() || redirectUrl || routes.defaultCallback;
       router.hardPush(finalUrl);
     }, redirectDelay);
 
@@ -159,7 +164,7 @@ const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
       clearTimeout(animTimer);
       clearTimeout(redirectTimer);
     };
-  }, [redirectUrl, redirectDelay, router]);
+  }, [redirectUrl, redirectDelay, router, routes.defaultCallback]);
 
   return (
     <div className="auth-success-overlay">

package/src/layouts/AuthLayout/components/oauth/OAuthCallback.tsx

@@ -1,11 +1,10 @@
 'use client';
-import { DEFAULT_AUTH_PATH } from '@djangocfg/api/auth';
 
 import { AlertCircle, Loader2 } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import React, { memo, useEffect, useState } from 'react';
 
-import { useGithubAuth } from '@djangocfg/api/auth';
+import { useAuth, useGithubAuth } from '@djangocfg/api/auth';
 import {
     Card, CardContent, CardDescription, CardHeader, CardTitle
 } from '@djangocfg/ui-core/components';
@@ -59,6 +58,7 @@ function OAuthCallbackRaw({
   redirectUrl,
 }: OAuthCallbackProps) {
   const searchParams = useSearchParams();
+  const { routes } = useAuth();
   const { setStep, setTwoFactorSessionId, setShouldPrompt2FA } = useAuthFormContext();
   const [status, setStatus] = useState<CallbackStatus | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -166,7 +166,7 @@ function OAuthCallbackRaw({
         {status === 'error' && (
           <CardContent className="text-center">
             <a
-              href={DEFAULT_AUTH_PATH}
+              href={routes.auth}
               className="text-primary hover:underline text-sm"
             >
               Try again

package/src/layouts/AuthLayout/constants.ts

@@ -2,8 +2,9 @@
  * AuthLayout Constants
  *
  * Code lengths come from the shared single source of truth in
- * `@djangocfg/api/auth` (AUTH_CONSTANTS). Layout-only values (timings, sizes,
- * routes) live here.
+ * `@djangocfg/api/auth` (AUTH_CONSTANTS). Layout-only values (timings, sizes)
+ * live here. Routes deliberately do NOT — they come resolved from
+ * `useAuth().routes` so an app's AuthConfig override is honored everywhere.
  */
 
 import { AUTH_CONSTANTS } from '@djangocfg/api/auth';
@@ -23,7 +24,4 @@ export const AUTH = {
 
   // Sizes (px)
   QR_CODE_SIZE: 160,
-
-  // Routes
-  DEFAULT_REDIRECT: '/dashboard',
 } as const;

package/src/layouts/PrivateLayout/hooks/useAuthGuard.ts

@@ -5,7 +5,6 @@
  */
 
 'use client';
-import { DEFAULT_AUTH_PATH } from '@djangocfg/api/auth';
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
@@ -19,6 +18,7 @@ import {
 
 interface UseAuthGuardOptions {
   requireAuth?: boolean;
+  /** Explicit override; defaults to the app's resolved `useAuth().routes.auth`. */
   authPath?: string;
   /**
    * Safety net: if auth is still "loading" this many ms after mount, stop
@@ -40,10 +40,11 @@ interface UseAuthGuardResult {
 
 export function useAuthGuard({
   requireAuth = true,
-  authPath = DEFAULT_AUTH_PATH,
+  authPath,
   loadingTimeoutMs = 8000,
 }: UseAuthGuardOptions): UseAuthGuardResult {
-  const { isAuthenticated, isLoading: authLoading, saveRedirectUrl } = useAuth();
+  const { isAuthenticated, isLoading: authLoading, saveRedirectUrl, routes } = useAuth();
+  const resolvedAuthPath = authPath ?? routes.auth;
   const router = useRouter();
   const [isRedirecting, setIsRedirecting] = useState(false);
 
@@ -84,10 +85,10 @@ export function useAuthGuard({
       const currentUrl = window.location.pathname + window.location.search;
       saveRedirectUrl(currentUrl);
       setIsRedirecting(true);
-      router.push(authPath);
+      router.push(resolvedAuthPath);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mounted, requireAuth, isAuthenticated, effectiveAuthLoading, isRedirecting, router, saveRedirectUrl, authPath]);
+  }, [mounted, requireAuth, isAuthenticated, effectiveAuthLoading, isRedirecting, router, saveRedirectUrl, resolvedAuthPath]);
 
   const isLoading = resolveGuardIsLoading(guardState);
   const loadingText = isRedirecting ? 'Redirecting to login...' : 'Authenticating...';

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

@@ -29,7 +29,6 @@
  */
 
 'use client';
-import { DEFAULT_AUTH_PATH } from '@djangocfg/api/auth';
 
 import { ArrowRight, Languages, LogOut } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
@@ -70,11 +69,12 @@ export interface UserMenuProps {
 export function UserMenu({
   variant = 'desktop',
   groups,
-  authPath = DEFAULT_AUTH_PATH,
+  authPath,
   disableAuth = false,
   i18n,
 }: UserMenuProps) {
-  const { user, isAuthenticated } = useAuth();
+  const { user, isAuthenticated, routes } = useAuth();
+  const resolvedAuthPath = authPath ?? routes.auth;
   const handleLogout = useLogout();
   const [mounted, setMounted] = React.useState(false);
   const t = useAppT();
@@ -129,7 +129,7 @@ export function UserMenu({
       return (
         <div className="pt-4 border-t border-border/50">
           <Link
-            href={authPath}
+            href={resolvedAuthPath}
             className="group flex items-center justify-between rounded-full px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
           >
             <span>{labels.signIn}</span>
@@ -146,7 +146,7 @@ export function UserMenu({
       );
     }
     return (
-      <Link href={authPath}>
+      <Link href={resolvedAuthPath}>
         <Button variant="default" size="sm" className="rounded-full px-5">
           {labels.signIn}
         </Button>

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -6,7 +6,6 @@
  */
 
 'use client';
-import { DEFAULT_AUTH_PATH } from '@djangocfg/api/auth';
 
 import { ArrowRight } from 'lucide-react';
 import React, { useMemo } from 'react';
@@ -48,7 +47,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
   const navigation = props.navigation ?? [];
   const userMenu = props.userMenu;
 
-  const { isAuthenticated, user } = useAuth();
+  const { isAuthenticated, user, routes } = useAuth();
   const pathname = usePathnameWithoutLocale();
   const t = useAppT();
   const { mounted, visible } = useMobileNavPanel({
@@ -212,7 +211,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
           {showSignInFooter && (
             <div className="shrink-0 border-t border-border/50 p-4">
               <Link
-                href={userMenu?.authPath || DEFAULT_AUTH_PATH}
+                href={userMenu?.authPath || routes.auth}
                 onClick={closeMobileMenu}
                 className="block"
               >

package/src/layouts/SettingsLayout/components/TwoFactorSection/TwoFactorSection.tsx

@@ -9,12 +9,6 @@ import {
   AlertDescription,
   Badge,
   Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
   OTPInput,
   Preloader,
   SettingRow,
@@ -49,69 +43,62 @@ function StatusBadge({ enabled }: { enabled: boolean }) {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Disable dialog
+// Disable confirmation — inline, not a dialog. Settings already lives in a
+// dialog; stacking a second modal on top fights its focus trap and dims the
+// context the user needs. Destructive confirmation expands in place instead
+// (progressive disclosure), so the device list stays visible while confirming.
 // ─────────────────────────────────────────────────────────────────────────────
 
-function DisableDialog({
-  open,
+function DisableConfirm({
   isLoading,
   error,
   onConfirm,
   onCancel,
 }: {
-  open: boolean;
   isLoading: boolean;
   error: string | null;
   onConfirm: (code: string) => void;
   onCancel: () => void;
 }) {
+  // Mounted fresh each time the confirmation opens — state starts clean.
   const [code, setCode] = useState('');
 
-  // Reset on open
-  useEffect(() => {
-    if (open) setCode('');
-  }, [open]);
-
   return (
-    <Dialog open={open} onOpenChange={(v) => !v && onCancel()}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <ShieldOff className="w-5 h-5 text-destructive" />
-            Disable Two-Factor Authentication
-          </DialogTitle>
-          <DialogDescription>
+    <div className="mt-3 space-y-4 rounded-lg border border-destructive/30 bg-destructive/5 p-4">
+      <div className="flex gap-2.5">
+        <ShieldOff className="mt-0.5 h-4 w-4 flex-shrink-0 text-destructive" />
+        <div className="space-y-1">
+          <p className="text-sm font-medium">Disable two-factor authentication?</p>
+          <p className="text-[13px] leading-relaxed text-muted-foreground">
             Enter the 6-digit code from your authenticator app to confirm.
             This will make your account less secure.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-2 space-y-4">
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-          <div className="flex justify-center">
-            <OTPInput
-              length={6}
-              validationMode="numeric"
-              pasteBehavior="clean"
-              value={code}
-              onChange={setCode}
-              disabled={isLoading}
-              autoFocus
-              size="lg"
-            />
-          </div>
+          </p>
         </div>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
 
-        <DialogFooter>
-          <Button variant="outline" onClick={onCancel} disabled={isLoading}>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <OTPInput
+          length={6}
+          validationMode="numeric"
+          pasteBehavior="clean"
+          value={code}
+          onChange={setCode}
+          disabled={isLoading}
+          autoFocus
+        />
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={onCancel} disabled={isLoading}>
             Cancel
           </Button>
           <Button
             variant="destructive"
+            size="sm"
             onClick={() => onConfirm(code)}
             disabled={isLoading || code.length !== 6}
           >
@@ -121,9 +108,9 @@ function DisableDialog({
               'Disable 2FA'
             )}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </div>
+      </div>
+    </div>
   );
 }
 
@@ -224,7 +211,7 @@ export const TwoFactorSection: React.FC = () => {
       variant="outline"
       size="sm"
       onClick={() => { clearError(); setShowDisable(true); }}
-      disabled={isLoading}
+      disabled={isLoading || showDisable}
       className="text-destructive hover:text-destructive hover:bg-destructive/10 border-destructive/30"
     >
       Disable
@@ -245,6 +232,16 @@ export const TwoFactorSection: React.FC = () => {
             action={statusAction}
           />
 
+          {/* Inline destructive confirmation (no nested dialog) */}
+          {showDisable && (
+            <DisableConfirm
+              isLoading={isLoading}
+              error={error}
+              onConfirm={handleDisableConfirm}
+              onCancel={handleDisableCancel}
+            />
+          )}
+
           {/* Fetch error */}
           {error && !showDisable && (
             <div className="py-3">
@@ -279,14 +276,6 @@ export const TwoFactorSection: React.FC = () => {
           </SettingsBlock>
         )}
       </div>
-
-      <DisableDialog
-        open={showDisable}
-        isLoading={isLoading}
-        error={error}
-        onConfirm={handleDisableConfirm}
-        onCancel={handleDisableCancel}
-      />
     </>
   );
 };

package/src/layouts/SettingsLayout/sections/builtins.tsx

@@ -25,13 +25,16 @@ interface BuildBuiltinArgs {
  * are left as plain strings here (the inner section bodies pull localized copy
  * from ProfileProvider); only the nav-level label/title live at this layer.
  *
- * Defaults: account on, security off (needs API support), apiKeys on.
+ * Defaults: everything on. Security (2FA management) is a built-in the user
+ * must be able to find without the app opting in — `/cfg/totp/*` ships with
+ * every django-cfg backend. Apps that truly lack it opt out explicitly via
+ * `builtins.security: false`.
  */
 export function buildBuiltinSections({
   builtins,
   enableDeleteAccount,
 }: BuildBuiltinArgs): SettingsSection[] {
-  const { account = true, security = false, apiKeys = true } = builtins;
+  const { account = true, security = true, apiKeys = true } = builtins;
   const sections: SettingsSection[] = [];
 
   if (account) {

package/src/layouts/types/index.ts

@@ -53,7 +53,7 @@ export type {
 
 export type {
   BaseLayoutProps,
-  DebugConfig,
+  DevtoolsConfig,
   I18nLayoutConfig,
   LayoutVisualVariant,
   LayoutVisualConfig,

package/src/layouts/types/layout.types.ts

@@ -22,7 +22,7 @@ export type NextIntlRouting = object & { __nextIntlRouting?: never };
 
 // Import local provider configs
 import type { ThemeConfig, SWRConfigOptions, CentrifugoConfig } from './providers.types';
-import type { MonitorConfig } from '@djangocfg/monitor';
+import type { DevtoolsProps } from '@djangocfg/devtools';
 
 // ============================================================================
 // Base Layout Props
@@ -37,7 +37,7 @@ import type { MonitorConfig } from '@djangocfg/monitor';
 export interface BaseLayoutProps {
   children: ReactNode;
 
-  /** Project name — used as default for monitor.project and debug panel title */
+  /** Project name — used as default for devtools.project */
   project?: string;
 
   /** Theme configuration */
@@ -61,11 +61,13 @@ export interface BaseLayoutProps {
   /** Error boundary configuration (from components/errors, enabled by default) */
   errorBoundary?: ErrorBoundaryConfig;
 
-  /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
-  monitor?: MonitorConfig;
-
-  /** Debug panel configuration */
-  debug?: DebugConfig;
+  /**
+   * Devtools configuration (`@djangocfg/devtools`): error/console capture with
+   * backend ingest + the floating debug panel. Capture is on by default;
+   * `devtools={{ button: false }}` hides the panel button, `ingest: false`
+   * keeps events local.
+   */
+  devtools?: DevtoolsConfig;
 
   /**
    * Locale-switching plumbing. Mounted into a `LayoutI18nProvider` inside
@@ -75,14 +77,8 @@ export interface BaseLayoutProps {
   i18n?: I18nLayoutConfig;
 }
 
-/** Debug panel config — enabled in development by default, pass enabled: true/false to override */
-export interface DebugConfig {
-  /** Set false to disable, true to force-enable. Default: process.env.NODE_ENV === 'development' */
-  enabled?: boolean;
-  className?: string;
-  /** Props forwarded to DebugPanel */
-  panel?: Record<string, unknown>;
-}
+/** Devtools config for BaseApp — the `<Devtools>` props minus children. */
+export type DevtoolsConfig = Omit<DevtoolsProps, 'children'>;
 
 /**
  * Brand block surfaced inside the locale-switcher dialog. Shared via

package/src/snippets/AuthDialog/AuthDialog.tsx

@@ -3,7 +3,7 @@
 import { LogIn } from 'lucide-react';
 import React, { useMemo } from 'react';
 
-import { DEFAULT_AUTH_PATH, useAuth, useCfgRouter } from '@djangocfg/api/auth';
+import { useAuth, useCfgRouter } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import {
     Button, Dialog, DialogContent, DialogHeader, DialogTitle
@@ -17,7 +17,7 @@ interface AuthDialogProps {
 
 export const AuthDialog: React.FC<AuthDialogProps> = ({
   onAuthRequired,
-  authPath = DEFAULT_AUTH_PATH
+  authPath
 }) => {
   const open = useDialogStore((s) => s.authOpen);
   const authOptions = useDialogStore((s) => s.authOptions);
@@ -32,7 +32,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
 
   const message = authOptions?.message || labels.pleaseSignIn;
   const router = useCfgRouter();
-  const { saveRedirectUrl } = useAuth();
+  const { saveRedirectUrl, routes } = useAuth();
 
   const handleClose = () => {
     resolveAuth(false);
@@ -49,7 +49,7 @@ export const AuthDialog: React.FC<AuthDialogProps> = ({
     if (onAuthRequired) {
       onAuthRequired();
     } else {
-      router.push(authPath);
+      router.push(authPath ?? routes.auth);
     }
 
     resolveAuth(true);

package/src/snippets/index.ts

@@ -8,6 +8,6 @@ export * from './Breadcrumbs';
 export * from './AuthDialog';
 export * from './Analytics';
 
-// MonitorProvider lives in @djangocfg/monitor/client — re-exported here for convenience
-export { MonitorProvider } from '@djangocfg/monitor/client';
-export type { MonitorProviderProps } from '@djangocfg/monitor/client';
+// Devtools lives in @djangocfg/devtools — re-exported here for convenience
+export { Devtools } from '@djangocfg/devtools';
+export type { DevtoolsProps } from '@djangocfg/devtools';

package/src/testing/MockAuthProvider.tsx

@@ -62,6 +62,7 @@ export const MockAuthProvider: React.FC<MockAuthProviderProps> = ({
     isLoading,
     isAuthenticated: isAuthenticated ?? Boolean(user),
     isAdminUser,
+    routes: { auth: '/auth', defaultCallback: '/', defaultAuthCallback: '/auth' },
 
     loadCurrentProfile: noopAsync,
     checkAuthAndRedirect: noopAsync,