@djangocfg/layouts 2.1.264 → 2.1.266

package/README.md

@@ -124,10 +124,49 @@ import { AppLayout } from '@djangocfg/layouts';
 | **PrivateLayout** | App shell — sidebar + header |
 | **AuthLayout** | Sign-in flows |
 | **AdminLayout** | Admin console |
-| **ProfileLayout** | Profile + 2FA |
+| **ProfileLayout** | Profile page with avatar, editable fields, 2FA, and slot/tab system |
 
 **Brand:** `ThemeBrandMark` / **`ThemeBrandMarkImg`** for logo slots.
 
+### ProfileLayout — slots & tabs
+
+```tsx
+import { ProfileLayout } from '@djangocfg/layouts';
+import type { ProfileTab, ProfileSlots } from '@djangocfg/layouts';
+
+const tabs: ProfileTab[] = [
+  {
+    value: 'billing',
+    label: 'Billing',
+    content: <BillingSection />,
+  },
+];
+
+const slots: ProfileSlots = {
+  headerBadge:     <Badge>Pro</Badge>,           // next to user name
+  headerMenuItems: <DropdownMenuItem>…</DropdownMenuItem>, // in ⋯ menu
+  headerAfter:     <OnboardingBanner />,          // below avatar, above tabs
+  footer:          <LinkedAccounts />,            // below all tab content
+};
+
+<ProfileLayout
+  enable2FA
+  enableDeleteAccount
+  tabs={tabs}
+  slots={slots}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `enable2FA` | `boolean` | Show Security tab with 2FA management |
+| `enableDeleteAccount` | `boolean` | Show Delete account in `⋯` menu |
+| `tabs` | `ProfileTab[]` | Extra tabs appended after built-in ones |
+| `slots.headerBadge` | `ReactNode` | Rendered next to the user name (plan, role…) |
+| `slots.headerMenuItems` | `ReactNode` | Extra `DropdownMenuItem`s in the `⋯` menu |
+| `slots.headerAfter` | `ReactNode` | Below avatar row, above tabs |
+| `slots.footer` | `ReactNode` | Below all tab content |
+
 ---
 
 ## i18n on AppLayout

package/package.json

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

package/src/layouts/AuthLayout/components/steps/SetupStep/index.tsx

@@ -15,12 +15,8 @@ export interface SetupStepProps {
 }
 
 /**
- * SetupStep - Orchestrator for 2FA setup flow
- *
- * Delegates rendering to focused sub-components:
- * - SetupLoading: Initial loading state
- * - SetupQRCode: QR code scanning
- * - SetupComplete: Backup codes display
+ * SetupStep - Orchestrator for 2FA setup flow (requires AuthFormContext).
+ * For use outside AuthLayout use SetupStepStandalone.
  */
 export const SetupStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
   const { setStep } = useAuthFormContext();
@@ -89,3 +85,51 @@ export const SetupStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
   // Fallback to loading
   return <SetupLoading />;
 };
+
+/**
+ * SetupStepStandalone — same flow as SetupStep but without AuthFormContext.
+ * Use this inside ProfileLayout or any page outside AuthLayout.
+ */
+export const SetupStepStandalone: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
+  const {
+    isLoading,
+    error,
+    setupData,
+    backupCodes,
+    backupCodesWarning,
+    setupStep,
+    startSetup,
+    confirmSetup,
+  } = useTwoFactorSetup({ onComplete, onError: () => {} });
+
+  React.useEffect(() => {
+    if (setupStep === 'idle') startSetup();
+  }, [setupStep, startSetup]);
+
+  if (isLoading && !setupData) return <SetupLoading />;
+
+  if (setupStep === 'complete' && backupCodes) {
+    return (
+      <SetupComplete
+        backupCodes={backupCodes}
+        backupCodesWarning={backupCodesWarning}
+        onDone={() => onComplete?.()}
+      />
+    );
+  }
+
+  if (setupData) {
+    return (
+      <SetupQRCode
+        provisioningUri={setupData.provisioningUri}
+        secret={setupData.secret}
+        isLoading={isLoading}
+        error={error}
+        onConfirm={confirmSetup}
+        onSkip={onSkip}
+      />
+    );
+  }
+
+  return <SetupLoading />;
+};