@djangocfg/layouts 2.1.221 → 2.1.223

package/README.md

@@ -36,7 +36,6 @@ export default function RootLayout({ children }) {
           theme={{ defaultTheme: 'dark', storageKey: 'my-theme' }}
           auth={{ apiUrl: process.env.NEXT_PUBLIC_API_URL }}
           analytics={{ googleTrackingId: 'G-XXXXXXXXXX' }}
-          debug={true}
         >
           {children}
         </BaseApp>
@@ -61,7 +60,7 @@ export default function RootLayout({ children }) {
 | `pwaInstall` | `PwaInstallConfig` | — | PWA install prompt |
 | `mcpChat` | `McpChatConfig` | — | AI chat widget |
 | `monitor` | `MonitorConfig` | — | Override monitor config (project/environment come from `project` prop by default) |
-| `debug` | `boolean` | `true` | Debug panel — `Cmd+D` or `?debug=1` to open |
+| `debug` | `DebugConfig` | enabled | Debug panel config — see below |
 
 **Included automatically:**
 - ThemeProvider, TooltipProvider, SWRConfig, DialogProvider
@@ -69,7 +68,7 @@ export default function RootLayout({ children }) {
 - AnalyticsProvider, CentrifugoProvider, PwaProvider
 - ErrorTrackingProvider, ErrorBoundary
 - MonitorProvider (auto-enabled via `project` prop)
-- DebugButton from `@djangocfg/debuger` (disable with `debug={false}`)
+- DebugButton from `@djangocfg/debuger`
 - NextTopLoader, Toaster
 
 ## AppLayout
@@ -90,7 +89,6 @@ export default function RootLayout({ children }) {
           project="my-app"
           theme={{ defaultTheme: 'system' }}
           auth={{ apiUrl: process.env.NEXT_PUBLIC_API_URL }}
-          debug={true}
 
           publicLayout={{ component: PublicLayout, enabledPath: ['/', '/legal', '/contact'] }}
           privateLayout={{ component: PrivateLayout, enabledPath: ['/dashboard', '/profile'] }}
@@ -162,10 +160,10 @@ import { PublicLayout, PrivateLayout, AuthLayout, AdminLayout, ProfileLayout } f
 
 ## Monitor & Debug
 
-Both are auto-enabled via `project` prop — no extra config needed.
+Both auto-enabled via `project` prop — no extra config needed.
 
 ```tsx
-// Monitor auto-starts, window.monitor available in DevTools:
+// window.monitor available in DevTools:
 window.monitor.error('Something broke', { context: 'checkout' })
 window.monitor.warn('Slow response', { ms: 2500 })
 window.monitor.flush()   // send buffer immediately
@@ -181,7 +179,26 @@ Override monitor defaults:
 >
 ```
 
-Debug panel: `Cmd+D` or `?debug=1` in URL. Disable: `debug={false}`.
+### Debug panel
+
+`Cmd+D` or `?debug=1` in URL to open.
+
+```tsx
+// enabled by default (omit or pass empty object)
+<BaseApp project="my-app">
+
+// disable
+<BaseApp debug={{ enabled: false }}>
+
+// custom tabs (e.g. Zustand store viewer)
+import type { CustomDebugTab } from '@djangocfg/debuger';
+
+const myTabs: CustomDebugTab[] = [
+  { id: 'store', label: 'Stores', icon: Database, panel: StoreTab },
+];
+
+<AppLayout debug={{ panel: { tabs: myTabs } }}>
+```
 
 ## Error Tracking
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.221",
+  "version": "2.1.223",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,13 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.221",
-    "@djangocfg/centrifugo": "^2.1.221",
-    "@djangocfg/i18n": "^2.1.221",
-    "@djangocfg/monitor": "^2.1.221",
-    "@djangocfg/ui-core": "^2.1.221",
-    "@djangocfg/ui-nextjs": "^2.1.221",
-    "@djangocfg/ui-tools": "^2.1.221",
+    "@djangocfg/api": "^2.1.223",
+    "@djangocfg/centrifugo": "^2.1.223",
+    "@djangocfg/i18n": "^2.1.223",
+    "@djangocfg/monitor": "^2.1.223",
+    "@djangocfg/debuger": "^2.1.223",
+    "@djangocfg/ui-core": "^2.1.223",
+    "@djangocfg/ui-nextjs": "^2.1.223",
+    "@djangocfg/ui-tools": "^2.1.223",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -102,21 +103,21 @@
     }
   },
   "dependencies": {
-    "@djangocfg/debuger": "^2.1.221",
     "nextjs-toploader": "^3.9.17",
     "qrcode.react": "^4.2.0",
     "react-ga4": "^2.1.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.221",
-    "@djangocfg/i18n": "^2.1.221",
-    "@djangocfg/centrifugo": "^2.1.221",
-    "@djangocfg/monitor": "^2.1.221",
-    "@djangocfg/typescript-config": "^2.1.221",
-    "@djangocfg/ui-core": "^2.1.221",
-    "@djangocfg/ui-nextjs": "^2.1.221",
-    "@djangocfg/ui-tools": "^2.1.221",
+    "@djangocfg/api": "^2.1.223",
+    "@djangocfg/i18n": "^2.1.223",
+    "@djangocfg/centrifugo": "^2.1.223",
+    "@djangocfg/monitor": "^2.1.223",
+    "@djangocfg/debuger": "^2.1.223",
+    "@djangocfg/typescript-config": "^2.1.223",
+    "@djangocfg/ui-core": "^2.1.223",
+    "@djangocfg/ui-nextjs": "^2.1.223",
+    "@djangocfg/ui-tools": "^2.1.223",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -48,6 +48,7 @@ import type {
   SWRConfigOptions,
   McpChatConfig,
   PwaInstallConfig,
+  DebugConfig,
 } from '../types';
 import type { AuthConfig } from '@djangocfg/api/auth';
 import type { MonitorConfig } from '@djangocfg/monitor';
@@ -143,8 +144,7 @@ export interface AppLayoutProps {
   /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
   monitor?: MonitorConfig;
 
-  /** Debug panel — set false to disable. Default: true */
-  debug?: boolean;
+  debug?: DebugConfig;
 }
 
 /**

package/src/layouts/AppLayout/BaseApp.tsx

@@ -107,6 +107,10 @@ export function BaseApp({
   const centrifugoUrl = centrifugo?.url || process.env.NEXT_PUBLIC_CENTRIFUGO_URL;
   const centrifugoEnabled = centrifugo?.enabled !== false;
 
+  // Debug panel — enabled by default, disabled with { enabled: false }
+  const { enabled: debugEnabled = true, ...debugProps } = debug ?? {};
+
+
   // Monitor — project prop as default, override with monitor config
   const monitorConfig = {
     project,
@@ -188,8 +192,8 @@ export function BaseApp({
                     {/* Auth Dialog - global auth prompt */}
                     <AuthDialog authPath={auth?.routes?.auth} />
 
-                    {/* Debug Panel — enabled by default, disable with debug={false} */}
-                    {debug !== false && <DebugButton />}
+                    {/* Debug Panel — enabled by default, disable with debug={{ enabled: false }} */}
+                    {debugEnabled && <DebugButton {...debugProps} />}
                   </ErrorTrackingProvider>
                 </PwaProvider>
               </CentrifugoProvider>

package/src/layouts/types/index.ts

@@ -43,4 +43,4 @@ export type {
 // Layout Types
 // ============================================================================
 
-export type { BaseLayoutProps } from './layout.types';
+export type { BaseLayoutProps, DebugConfig } from './layout.types';

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

@@ -8,6 +8,7 @@ import type { ReactNode } from 'react';
 import type { AuthConfig } from '@djangocfg/api/auth';
 
 // Import provider configs from their modules
+import type { DebugButtonProps } from '@djangocfg/debuger';
 import type { AnalyticsConfig } from '../../snippets/Analytics/types';
 import type { PwaInstallConfig } from '../../snippets/PWAInstall/types';
 import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/errors/types';
@@ -62,6 +63,12 @@ export interface BaseLayoutProps {
   /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
   monitor?: MonitorConfig;
 
-  /** Debug panel — set false to disable. Default: true */
-  debug?: boolean;
+  /** Debug panel configuration */
+  debug?: DebugConfig;
+}
+
+/** Debug panel config — enabled by default, pass enabled: false to disable */
+export interface DebugConfig extends DebugButtonProps {
+  /** Set false to disable the debug panel. Default: true */
+  enabled?: boolean;
 }