@djangocfg/layouts 2.1.422 → 2.1.423

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.422",
+  "version": "2.1.423",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,13 +89,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.422",
-    "@djangocfg/centrifugo": "^2.1.422",
-    "@djangocfg/debuger": "^2.1.422",
-    "@djangocfg/i18n": "^2.1.422",
-    "@djangocfg/monitor": "^2.1.422",
-    "@djangocfg/ui-core": "^2.1.422",
-    "@djangocfg/ui-nextjs": "^2.1.422",
+    "@djangocfg/api": "^2.1.423",
+    "@djangocfg/centrifugo": "^2.1.423",
+    "@djangocfg/debuger": "^2.1.423",
+    "@djangocfg/i18n": "^2.1.423",
+    "@djangocfg/monitor": "^2.1.423",
+    "@djangocfg/ui-core": "^2.1.423",
+    "@djangocfg/ui-nextjs": "^2.1.423",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -126,15 +126,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.422",
-    "@djangocfg/centrifugo": "^2.1.422",
-    "@djangocfg/debuger": "^2.1.422",
-    "@djangocfg/i18n": "^2.1.422",
-    "@djangocfg/monitor": "^2.1.422",
-    "@djangocfg/typescript-config": "^2.1.422",
-    "@djangocfg/ui-core": "^2.1.422",
-    "@djangocfg/ui-nextjs": "^2.1.422",
-    "@djangocfg/ui-tools": "^2.1.422",
+    "@djangocfg/api": "^2.1.423",
+    "@djangocfg/centrifugo": "^2.1.423",
+    "@djangocfg/debuger": "^2.1.423",
+    "@djangocfg/i18n": "^2.1.423",
+    "@djangocfg/monitor": "^2.1.423",
+    "@djangocfg/typescript-config": "^2.1.423",
+    "@djangocfg/ui-core": "^2.1.423",
+    "@djangocfg/ui-nextjs": "^2.1.423",
+    "@djangocfg/ui-tools": "^2.1.423",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/errors/ErrorsTracker/components/ErrorToast.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { extractDomain, formatErrorTitle, formatZodIssues } from '../utils/formatters';
+import { extractDomain, formatErrorTitle, formatZodIssues, safeZodIssues } from '../utils/formatters';
 import { ErrorButtons } from './ErrorButtons';
 
 import type {
@@ -39,9 +39,11 @@ function buildValidationDescription(
 
   // Add error count
   if (config.showErrorCount) {
-    const count = detail.error.issues.length;
-    const plural = count === 1 ? 'error' : 'errors';
-    descriptionParts.push(`${count} ${plural}`);
+    const count = safeZodIssues(detail.error).length;
+    if (count > 0) {
+      const plural = count === 1 ? 'error' : 'errors';
+      descriptionParts.push(`${count} ${plural}`);
+    }
   }
 
   // Add formatted error messages

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

@@ -302,9 +302,20 @@ export function ErrorTrackingProvider({
     if (validationConfig.enabled) {
       const handler = (event: Event) => {
         if (!(event instanceof CustomEvent)) return;
+        const raw = event.detail ?? {};
+        // The generated client dispatches `{ operation, method, path, issues,
+        // data, timestamp }` — i.e. `issues`/`data`, not a `ZodError` in
+        // `error`. Normalise into the ValidationErrorDetail shape so the toast
+        // can render issue count/messages (and never read undefined.issues).
+        const error =
+          raw.error && Array.isArray(raw.error.issues)
+            ? raw.error
+            : { issues: Array.isArray(raw.issues) ? raw.issues : [] };
         const detail: ValidationErrorDetail = {
-          ...event.detail,
+          ...raw,
           type: 'validation' as const,
+          error: error as ValidationErrorDetail['error'],
+          response: raw.response ?? raw.data,
         };
         handleError(detail, validationConfig);
       };

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

@@ -9,18 +9,31 @@ import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, Centri
 import type { MonitorEvent } from '@djangocfg/monitor';
 import { EventType, EventLevel } from '@djangocfg/monitor';
 
+/**
+ * Safely read Zod issues. The error toast must never crash itself, so we
+ * tolerate a missing/malformed `error` (e.g. a non-ZodError slipping through)
+ * instead of throwing `Cannot read properties of undefined (reading 'issues')`.
+ */
+export function safeZodIssues(error: ZodError | null | undefined): ZodError['issues'] {
+  const issues = (error as ZodError | undefined)?.issues;
+  return Array.isArray(issues) ? issues : [];
+}
+
 /**
  * Format Zod error issues for display
  */
 export function formatZodIssues(error: ZodError, maxIssues: number = 3): string {
-  const issues = error.issues.slice(0, maxIssues);
+  const allIssues = safeZodIssues(error);
+  if (allIssues.length === 0) return '';
+
+  const issues = allIssues.slice(0, maxIssues);
   const formatted = issues.map((issue) => {
     const path = issue.path.join('.') || 'root';
     return `${path}: ${issue.message}`;
   });
 
-  if (error.issues.length > maxIssues) {
-    formatted.push(`... and ${error.issues.length - maxIssues} more`);
+  if (allIssues.length > maxIssues) {
+    formatted.push(`... and ${allIssues.length - maxIssues} more`);
   }
 
   return formatted.join(', ');
@@ -30,6 +43,7 @@ export function formatZodIssues(error: ZodError, maxIssues: number = 3): string
  * Format validation error for clipboard
  */
 export function formatValidationErrorForClipboard(detail: ValidationErrorDetail): string {
+  const issues = safeZodIssues(detail.error);
   const errorData = {
     type: 'validation',
     timestamp: detail.timestamp.toISOString(),
@@ -38,7 +52,7 @@ export function formatValidationErrorForClipboard(detail: ValidationErrorDetail)
       method: detail.method,
       path: detail.path,
     },
-    validation_errors: detail.error.issues.map((issue) => ({
+    validation_errors: issues.map((issue) => ({
       path: issue.path.join('.') || 'root',
       message: issue.message,
       code: issue.code,
@@ -48,7 +62,7 @@ export function formatValidationErrorForClipboard(detail: ValidationErrorDetail)
       ...(('maximum' in issue) && { maximum: issue.maximum }),
     })),
     response: detail.response,
-    total_errors: detail.error.issues.length,
+    total_errors: issues.length,
   };
 
   return JSON.stringify(errorData, null, 2);

package/src/layouts/ProfileLayout/ProfileDialog/ProfileDialog.tsx

@@ -17,7 +17,20 @@ export interface ProfileDialogProps {
 }
 
 export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
-  const { isOpen, close, initialTab } = useProfileDialogStore();
+  const {
+    isOpen,
+    close,
+    initialTab,
+    tabs,
+    slots,
+    enable2FA,
+    enableAPIKeys,
+    enableDeleteAccount,
+    title: storeTitle,
+  } = useProfileDialogStore();
+
+  // Title precedence: explicit dialog prop > value passed to open() > ProfileForm default.
+  const resolvedTitle = title ?? storeTitle;
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
@@ -25,7 +38,18 @@ export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
         <DialogHeader className="sr-only">
           <DialogTitle>Profile</DialogTitle>
         </DialogHeader>
-        <ProfileForm title={title} defaultTab={initialTab} />
+        {/* Undefined fields fall through to ProfileForm's own defaults
+          * (e.g. enableAPIKeys defaults to true), so this stays backward
+          * compatible with bare open() / open({ initialTab }). */}
+        <ProfileForm
+          title={resolvedTitle}
+          defaultTab={initialTab}
+          tabs={tabs}
+          slots={slots}
+          enable2FA={enable2FA}
+          enableAPIKeys={enableAPIKeys}
+          enableDeleteAccount={enableDeleteAccount}
+        />
       </DialogContent>
     </Dialog>
   );

package/src/layouts/ProfileLayout/ProfileDialog/index.ts

@@ -1,2 +1,4 @@
 export { ProfileDialog } from './ProfileDialog';
+export type { ProfileDialogProps } from './ProfileDialog';
 export { useProfileDialogStore } from './store';
+export type { ProfileDialogContent } from './store';

package/src/layouts/ProfileLayout/ProfileDialog/store.ts

@@ -1,19 +1,51 @@
 import { create } from 'zustand';
 
-import type { ProfileTabValue } from '../hooks/useProfileTabs';
+import type { ProfileTabValueOrCustom } from '../hooks/useProfileTabs';
+import type { ProfileSlots, ProfileTab } from '../types';
 
-interface ProfileDialogState {
+/**
+ * Content the dialog renders into <ProfileForm>. All optional — anything
+ * omitted in `open()` falls back to ProfileForm's own default. Lets any caller
+ * open the profile dialog with custom tabs/slots/flags in one line.
+ */
+export interface ProfileDialogContent {
+  initialTab?: ProfileTabValueOrCustom;
+  tabs?: ProfileTab[];
+  slots?: ProfileSlots;
+  enable2FA?: boolean;
+  enableAPIKeys?: boolean;
+  enableDeleteAccount?: boolean;
+  title?: string;
+}
+
+interface ProfileDialogState extends ProfileDialogContent {
   isOpen: boolean;
-  initialTab: ProfileTabValue | undefined;
-  open: (options?: { initialTab?: ProfileTabValue }) => void;
+  open: (options?: ProfileDialogContent) => void;
   close: () => void;
   toggle: () => void;
 }
 
+/** Content fields reset to undefined on close (keeps `isOpen` separate). */
+const EMPTY_CONTENT: Required<{ [K in keyof ProfileDialogContent]: undefined }> = {
+  initialTab: undefined,
+  tabs: undefined,
+  slots: undefined,
+  enable2FA: undefined,
+  enableAPIKeys: undefined,
+  enableDeleteAccount: undefined,
+  title: undefined,
+};
+
 export const useProfileDialogStore = create<ProfileDialogState>((set) => ({
   isOpen: false,
-  initialTab: undefined,
-  open: (options) => set({ isOpen: true, initialTab: options?.initialTab }),
-  close: () => set({ isOpen: false, initialTab: undefined }),
+  ...EMPTY_CONTENT,
+  open: (options) =>
+    set({
+      isOpen: true,
+      // Replace (not merge) content so a previous open()'s tabs/flags don't leak.
+      ...EMPTY_CONTENT,
+      ...options,
+    }),
+  close: () => set({ isOpen: false, ...EMPTY_CONTENT }),
   toggle: () => set((state) => ({ isOpen: !state.isOpen })),
 }));

package/src/layouts/ProfileLayout/ProfileForm/index.tsx

@@ -16,7 +16,6 @@ import { ApiKeySection, ProfileHeader, ProfileTab, TwoFactorSection } from '../c
 import { ProfileProvider, useProfileContext } from './context';
 import { useProfileTabs } from '../hooks/useProfileTabs';
 import type { ProfileFormProps } from '../types';
-import type { ProfileTabValue } from '../hooks/useProfileTabs';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Built-in tab panels
@@ -64,7 +63,7 @@ function ProfileContent({
   });
 
   const handleTabChange = React.useCallback(
-    (value: string) => setTab(value as ProfileTabValue),
+    (value: string) => setTab(value),
     [setTab],
   );
 

package/src/layouts/ProfileLayout/README.md

@@ -28,6 +28,7 @@ import { ProfileDialog, useProfileDialogStore } from '@djangocfg/layouts';
 
 // Open on a specific tab
 useProfileDialogStore.getState().open({ initialTab: 'security' });
+// …or with custom tabs/slots — see "Opening with custom content" below.
 
 // In your layout (lazy-loaded)
 <ProfileDialog />
@@ -44,7 +45,7 @@ useProfileDialogStore.getState().open({ initialTab: 'security' });
 | `tabs` | `[]` | Extra `ProfileTab[]` appended after built-in tabs |
 | `slots` | — | Named slots: `headerMenuItems`, `headerBadge`, `headerAfter`, `footer` |
 | `title` | i18n | Page title |
-| `defaultTab` | — | Initial active tab. When provided (e.g. by `ProfileDialog`), tabs start at this value. |
+| `defaultTab` | — | Initial active tab. Accepts a built-in value or a custom tab's `value`. When provided (e.g. by `ProfileDialog`), tabs start at this value. |
 
 ## Global Profile Dialog
 
@@ -62,6 +63,37 @@ open();
 open({ initialTab: 'security' });
 ```
 
+### Opening with custom content
+
+`open()` accepts the same content props as `ProfileForm` (all optional), so any
+caller can open the dialog with custom tabs / slots / flags — and start on a
+custom tab — in one line:
+
+```tsx
+useProfileDialogStore.getState().open({
+  initialTab: 'api-keys',
+  tabs: [{ value: 'api-keys', label: 'API keys', content: <MyApiKeysTab /> }],
+  enableAPIKeys: false, // hide the built-in API Keys tab
+});
+```
+
+The `open()` payload is typed as `ProfileDialogContent`:
+
+| Field | Type | Notes |
+|-------|------|-------|
+| `initialTab` | `string` | Built-in (`'profile' \| 'security' \| 'api-keys'`) **or** a custom tab's `value`. |
+| `tabs` | `ProfileTab[]` | Extra tabs appended after the built-in ones. |
+| `slots` | `ProfileSlots` | `headerMenuItems`, `headerBadge`, `headerAfter`, `footer`. |
+| `enable2FA` | `boolean` | Override the Security tab. |
+| `enableAPIKeys` | `boolean` | Override the built-in API Keys tab. |
+| `enableDeleteAccount` | `boolean` | Override Delete Account in the header dropdown. |
+| `title` | `string` | Dialog title (the `<ProfileDialog title>` prop wins if both set). |
+
+Each `open()` **replaces** the previous content (it does not merge), and `close()`
+clears it — so a bare `open()` always shows the default profile. Omitted fields
+fall through to `ProfileForm`'s own defaults, keeping `open()` / `open({ initialTab })`
+backward compatible.
+
 Wire it into `PrivateLayout` for global access:
 
 ```tsx
@@ -94,7 +126,7 @@ ProfileLayout/
 │   └── context.tsx       Root context (labels, onLogout, onFieldSave)
 ├── ProfileDialog/
 │   ├── ProfileDialog.tsx Dialog wrapper around ProfileForm
-│   └── store.ts          Zustand store (isOpen, initialTab, open/close)
+│   └── store.ts          Zustand store (isOpen + ProfileDialogContent: tabs/slots/flags/initialTab/title)
 ├── hooks/
 │   └── useProfileTabs.ts Local tab state (useState)
 ├── types.ts              ProfileFormProps, ProfileTab, ProfileSlots

package/src/layouts/ProfileLayout/components/EditableField.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
+import { toast } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { useProfileContext } from '../ProfileForm/context';
@@ -52,6 +53,9 @@ export const EditableField = ({
     try {
       await onSave(editValue);
       setIsEditing(false);
+    } catch {
+      // Keep editing mode open with the entered value so the user can retry.
+      toast.error(labels.failedToUpdate);
     } finally {
       setIsSaving(false);
     }

package/src/layouts/ProfileLayout/hooks/index.ts

@@ -1,2 +1,2 @@
 export { useProfileTabs } from './useProfileTabs';
-export type { ProfileTabValue, UseProfileTabsOptions } from './useProfileTabs';
+export type { ProfileTabValue, ProfileTabValueOrCustom, UseProfileTabsOptions } from './useProfileTabs';

package/src/layouts/ProfileLayout/hooks/useProfileTabs.ts

@@ -2,14 +2,22 @@
 
 import { useMemo, useState, useCallback } from 'react';
 
+/** Built-in tab values. */
 export type ProfileTabValue = 'profile' | 'security' | 'api-keys';
 
+/**
+ * Any tab value: a built-in one, or a custom tab's `value` string.
+ * `(string & {})` keeps the built-in literals as autocomplete hints while
+ * still accepting arbitrary strings (custom tabs added via `tabs`).
+ */
+export type ProfileTabValueOrCustom = ProfileTabValue | (string & {});
+
 export interface UseProfileTabsOptions {
   enable2FA?: boolean;
   enableAPIKeys?: boolean;
   extraTabValues?: string[];
-  /** Initial active tab. Defaults to `'profile'`. */
-  defaultTab?: ProfileTabValue;
+  /** Initial active tab. Defaults to `'profile'`. Accepts custom tab values. */
+  defaultTab?: ProfileTabValueOrCustom;
 }
 
 /**
@@ -25,18 +33,18 @@ export function useProfileTabs(options: UseProfileTabsOptions = {}) {
   const { enable2FA, enableAPIKeys, extraTabValues = [], defaultTab } = options;
 
   const allowed = useMemo(() => {
-    const base: ProfileTabValue[] = ['profile'];
+    const base: ProfileTabValueOrCustom[] = ['profile'];
     if (enable2FA) base.push('security');
     if (enableAPIKeys) base.push('api-keys');
-    return [...base, ...extraTabValues] as ProfileTabValue[];
+    return [...base, ...extraTabValues];
   }, [enable2FA, enableAPIKeys, extraTabValues]);
 
-  const [tab, setTabState] = useState<ProfileTabValue>(
+  const [tab, setTabState] = useState<ProfileTabValueOrCustom>(
     defaultTab && allowed.includes(defaultTab) ? defaultTab : 'profile',
   );
 
   const setTab = useCallback(
-    (value: ProfileTabValue) => {
+    (value: ProfileTabValueOrCustom) => {
       if (allowed.includes(value)) {
         setTabState(value);
       }

package/src/layouts/ProfileLayout/index.ts

@@ -2,6 +2,7 @@ export { ProfileForm, useProfileContext } from './ProfileForm';
 export { ProfileProvider } from './ProfileForm/context';
 export { useProfileTabs } from './hooks';
 export { ProfileDialog, useProfileDialogStore } from './ProfileDialog';
+export type { ProfileDialogProps, ProfileDialogContent } from './ProfileDialog';
 export type { ProfileLabels } from './ProfileForm/context';
 export type { ProfileFormProps, ProfileLayoutProps, ProfileTab, ProfileSlots } from './types';
-export type { ProfileTabValue, UseProfileTabsOptions } from './hooks';
+export type { ProfileTabValue, ProfileTabValueOrCustom, UseProfileTabsOptions } from './hooks';

package/src/layouts/ProfileLayout/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { ProfileTabValue } from './hooks/useProfileTabs';
+import type { ProfileTabValueOrCustom } from './hooks/useProfileTabs';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Slot + Tab types
@@ -39,8 +39,9 @@ export interface ProfileFormProps {
   /**
    * When provided, the active tab is controlled locally (no URL sync).
    * Useful for dialogs where query-string pollution is undesirable.
+   * Accepts a built-in value or a custom tab's `value`.
    */
-  defaultTab?: ProfileTabValue;
+  defaultTab?: ProfileTabValueOrCustom;
 }
 
 /** @deprecated Use ProfileFormProps instead */