@djangocfg/layouts 2.1.457 → 2.1.460

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.457",
+  "version": "2.1.460",
   "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.457",
-    "@djangocfg/centrifugo": "^2.1.457",
-    "@djangocfg/debuger": "^2.1.457",
-    "@djangocfg/i18n": "^2.1.457",
-    "@djangocfg/monitor": "^2.1.457",
-    "@djangocfg/ui-core": "^2.1.457",
+    "@djangocfg/api": "^2.1.460",
+    "@djangocfg/centrifugo": "^2.1.460",
+    "@djangocfg/i18n": "^2.1.460",
+    "@djangocfg/ui-core": "^2.1.460",
     "@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.460"
   },
   "peerDependenciesMeta": {
-    "@djangocfg/monitor": {
+    "@djangocfg/devtools": {
       "optional": true
     }
   },
@@ -125,21 +124,20 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.457",
-    "@djangocfg/centrifugo": "^2.1.457",
-    "@djangocfg/debuger": "^2.1.457",
-    "@djangocfg/i18n": "^2.1.457",
-    "@djangocfg/monitor": "^2.1.457",
-    "@djangocfg/typescript-config": "^2.1.457",
-    "@djangocfg/ui-core": "^2.1.457",
-    "@djangocfg/ui-tools": "^2.1.457",
+    "@djangocfg/api": "^2.1.460",
+    "@djangocfg/centrifugo": "^2.1.460",
+    "@djangocfg/i18n": "^2.1.460",
+    "@djangocfg/typescript-config": "^2.1.460",
+    "@djangocfg/ui-core": "^2.1.460",
+    "@djangocfg/ui-tools": "^2.1.460",
     "@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.460"
   },
   "publishConfig": {
     "access": "public"

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/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/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';