@djangocfg/layouts 2.1.357 → 2.1.359

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

@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@djangocfg/ui-core/components';
+
+import { ProfileForm } from '../ProfileForm';
+import { useProfileDialogStore } from './store';
+
+export interface ProfileDialogProps {
+  title?: string;
+}
+
+export const ProfileDialog: React.FC<ProfileDialogProps> = ({ title }) => {
+  const { isOpen, close, initialTab } = useProfileDialogStore();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && close()}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto p-0">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Profile</DialogTitle>
+        </DialogHeader>
+        <ProfileForm title={title} defaultTab={initialTab} />
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { ProfileDialog } from './ProfileDialog';
+export { useProfileDialogStore } from './store';

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

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+import type { ProfileTabValue } from '../hooks/useProfileTabs';
+
+interface ProfileDialogState {
+  isOpen: boolean;
+  initialTab: ProfileTabValue | undefined;
+  open: (options?: { initialTab?: ProfileTabValue }) => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+export const useProfileDialogStore = create<ProfileDialogState>((set) => ({
+  isOpen: false,
+  initialTab: undefined,
+  open: (options) => set({ isOpen: true, initialTab: options?.initialTab }),
+  close: () => set({ isOpen: false, initialTab: undefined }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+}));

package/src/layouts/ProfileLayout/{context.tsx → ProfileForm/context.tsx}

@@ -6,8 +6,8 @@ import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
 import { toast } from '@djangocfg/ui-core/hooks';
 
-import { profileLogger } from '../../utils/logger';
-import { useLogout } from '../../hooks';
+import { profileLogger } from '../../../utils/logger';
+import { useLogout } from '../../../hooks';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -19,6 +19,7 @@ export interface ProfileLabels {
   work: string;
   security: string;
   apiKeys: string;
+  preferences: string;
   firstName: string;
   lastName: string;
   phone: string;
@@ -79,6 +80,7 @@ export const ProfileProvider: React.FC<ProfileProviderProps> = ({ children, titl
     work: t('layouts.profilePage.work'),
     security: t('layouts.profilePage.security'),
     apiKeys: 'API Keys',
+    preferences: 'Preferences',
     firstName: t('layouts.profilePage.firstName'),
     lastName: t('layouts.profilePage.lastName'),
     phone: t('layouts.profilePage.phone'),

package/src/layouts/ProfileLayout/{ProfileLayout.tsx → ProfileForm/index.tsx}

@@ -12,11 +12,11 @@ import {
   TabsTrigger,
 } from '@djangocfg/ui-core/components';
 
-import { ApiKeySection, ProfileHeader, ProfileTab, TwoFactorSection } from './components';
+import { ApiKeySection, ProfileHeader, ProfileTab, TwoFactorSection } from '../components';
 import { ProfileProvider, useProfileContext } from './context';
-import { useProfileTabs } from './hooks/useProfileTabs';
-import type { ProfileLayoutProps } from './types';
-import type { ProfileTabValue } from './hooks/useProfileTabs';
+import { useProfileTabs } from '../hooks/useProfileTabs';
+import type { ProfileFormProps } from '../types';
+import type { ProfileTabValue } from '../hooks/useProfileTabs';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Built-in tab panels
@@ -49,15 +49,18 @@ function ProfileContent({
   enableDeleteAccount = true,
   tabs = [],
   slots,
-}: ProfileLayoutProps) {
+  defaultTab,
+}: ProfileFormProps) {
   const { labels } = useProfileContext();
   const { user, isLoading } = useAuth();
 
   const extraTabValues = React.useMemo(() => tabs.map((t) => t.value), [tabs]);
-  const { tab, setTab } = useProfileTabs({
+
+  const { tab, setTab, allowed } = useProfileTabs({
     enable2FA,
     enableAPIKeys,
     extraTabValues,
+    defaultTab,
   });
 
   const handleTabChange = React.useCallback(
@@ -136,7 +139,7 @@ function ProfileContent({
 // Export
 // ─────────────────────────────────────────────────────────────────────────────
 
-export const ProfileLayout: React.FC<ProfileLayoutProps> = ({ title, ...props }) => (
+export const ProfileForm: React.FC<ProfileFormProps> = ({ title, ...props }) => (
   <ProfileProvider title={title}>
     <ProfileContent title={title} {...props} />
   </ProfileProvider>

package/src/layouts/ProfileLayout/README.md

@@ -4,10 +4,12 @@ User profile page with tabbed interface: **Profile** | **Security** | **API Keys
 
 ## Usage
 
+### Standalone page
+
 ```tsx
-import { ProfileLayout } from '@djangocfg/layouts';
+import { ProfileForm } from '@djangocfg/layouts';
 
-<ProfileLayout
+<ProfileForm
   enable2FA
   enableAPIKeys
   enableDeleteAccount
@@ -19,6 +21,18 @@ import { ProfileLayout } from '@djangocfg/layouts';
 />
 ```
 
+### Dialog
+
+```tsx
+import { ProfileDialog, useProfileDialogStore } from '@djangocfg/layouts';
+
+// Open on a specific tab
+useProfileDialogStore.getState().open({ initialTab: 'security' });
+
+// In your layout (lazy-loaded)
+<ProfileDialog />
+```
+
 ## Props
 
 | Prop | Default | Description |
@@ -30,14 +44,60 @@ import { ProfileLayout } from '@djangocfg/layouts';
 | `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. |
+
+## Global Profile Dialog
+
+`ProfileDialog` is a Zustand-driven dialog that can be opened from anywhere:
+
+```tsx
+import { useProfileDialogStore } from '@djangocfg/layouts';
+
+const { open, close } = useProfileDialogStore();
+
+// Open on Profile tab
+open();
+
+// Open on Security tab
+open({ initialTab: 'security' });
+```
+
+Wire it into `PrivateLayout` for global access:
+
+```tsx
+import { PrivateLayout } from '@djangocfg/layouts';
+
+<PrivateLayout sidebar={...} header={...}>
+  {children}
+</PrivateLayout>
+// ProfileDialog is rendered automatically inside PrivateLayout
+```
+
+## Sidebar Account Button Modes
+
+The footer account button in `PrivateLayout` supports two modes via `HeaderConfig`:
+
+```tsx
+const header: HeaderConfig = {
+  // ...
+  accountAction: 'menu',   // Default — opens DropdownMenu with links, theme, logout
+  accountAction: 'dialog', // Opens ProfileDialog instead
+};
+```
 
 ## Architecture
 
 ```
 ProfileLayout/
-├── ProfileLayout.tsx     Shell: ProfileProvider → header + Tabs
-├── context.tsx           Root context (labels, onLogout, onFieldSave)
-├── types.ts              ProfileLayoutProps, ProfileTab, ProfileSlots
+├── ProfileForm/
+│   ├── index.tsx         Shell: ProfileProvider → header + Tabs
+│   └── context.tsx       Root context (labels, onLogout, onFieldSave)
+├── ProfileDialog/
+│   ├── ProfileDialog.tsx Dialog wrapper around ProfileForm
+│   └── store.ts          Zustand store (isOpen, initialTab, open/close)
+├── hooks/
+│   └── useProfileTabs.ts Local tab state (useState)
+├── types.ts              ProfileFormProps, ProfileTab, ProfileSlots
 └── components/
     ├── ProfileHeader     Avatar + name + dropdown menu
     ├── ProfileTab        Editable fields grid (first_name, last_name, phone, company, position)

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

@@ -6,7 +6,7 @@ import { parsePhoneNumberFromString } from 'libphonenumber-js';
 import { Button, Input, PhoneInput } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { useProfileContext } from '../context';
+import { useProfileContext } from '../ProfileForm/context';
 
 function formatPhone(raw: string): string {
   if (!raw) return '';

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

@@ -0,0 +1,56 @@
+/**
+ * Preferences Section
+ *
+ * Language + theme controls for ProfileForm.
+ * Uses ThemeToggle from ui-nextjs and LocaleSwitcherDropdown from _components.
+ */
+
+'use client';
+
+import React from 'react';
+
+import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LocaleSwitcherDropdown } from '../../_components/locale-switcher';
+import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+
+interface PreferencesSectionProps {
+  /** Extra className for the root. */
+  className?: string;
+}
+
+export const PreferencesSection: React.FC<PreferencesSectionProps> = ({
+  className,
+}) => {
+  const layoutI18n = useLayoutI18nOptional();
+
+  return (
+    <div className={cn('py-0', className)}>
+      {layoutI18n && (
+        <>
+          <div className="flex items-center justify-between py-3">
+            <span className="text-sm">Language</span>
+            <LocaleSwitcherDropdown
+              locale={layoutI18n.locale}
+              locales={layoutI18n.locales}
+              onChange={layoutI18n.onLocaleChange}
+              variant="outline"
+              size="sm"
+              showCode
+              showIcon={false}
+              showFlag
+              showTriggerLabel
+            />
+          </div>
+          <div className="h-px bg-border/60" />
+        </>
+      )}
+
+      <div className="flex items-center justify-between py-3">
+        <span className="text-sm">Theme</span>
+        <ThemeToggle size="default" />
+      </div>
+    </div>
+  );
+};

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

@@ -16,7 +16,7 @@ import {
 } from '@djangocfg/ui-core/components';
 
 import { AvatarSection } from './AvatarSection';
-import { useProfileContext } from '../context';
+import { useProfileContext } from '../ProfileForm/context';
 import type { ProfileSlots } from '../types';
 
 interface ProfileHeaderProps {

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

@@ -4,8 +4,8 @@ import React from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 
-import { EditableField, Section } from '.';
-import { useProfileContext } from '../context';
+import { EditableField, PreferencesSection, Section } from '.';
+import { useProfileContext } from '../ProfileForm/context';
 
 export const ProfileTab: React.FC = () => {
   const { labels, onFieldSave } = useProfileContext();
@@ -13,16 +13,22 @@ export const ProfileTab: React.FC = () => {
   if (!user) return null;
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 pt-4">
-      <Section title={labels.personalInfo}>
-        <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
-        <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
-        <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
-      </Section>
+    <div className="space-y-6 pt-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6">
+        <Section title={labels.personalInfo}>
+          <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
+          <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
+          <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
+        </Section>
+
+        <Section title={labels.work}>
+          <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
+          <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
+        </Section>
+      </div>
 
-      <Section title={labels.work}>
-        <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
-        <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
+      <Section title={labels.preferences ?? 'Preferences'}>
+        <PreferencesSection />
       </Section>
     </div>
   );

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

@@ -4,6 +4,7 @@ export type { ApiKeyLabels } from './ApiKeySection';
 export { AvatarSection } from './AvatarSection';
 export { DeleteAccountSection, DeleteAccountScreen } from './DeleteAccountSection';
 export { EditableField } from './EditableField';
+export { PreferencesSection } from './PreferencesSection';
 export { ProfileHeader } from './ProfileHeader';
 export { ProfileTab } from './ProfileTab';
 export { Section } from './Section';

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

@@ -1,8 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
-
-import { useQueryState, parseAsStringEnum } from '@djangocfg/ui-core/hooks';
+import { useMemo, useState, useCallback } from 'react';
 
 export type ProfileTabValue = 'profile' | 'security' | 'api-keys';
 
@@ -10,20 +8,21 @@ export interface UseProfileTabsOptions {
   enable2FA?: boolean;
   enableAPIKeys?: boolean;
   extraTabValues?: string[];
+  /** Initial active tab. Defaults to `'profile'`. */
+  defaultTab?: ProfileTabValue;
 }
 
 /**
- * Syncs the active profile tab with the URL query param `?tab=`.
+ * Manages the active profile tab with local React state.
  *
- * Falls back to `'profile'` when the param is missing or not allowed.
- * Setting the default value clears the key from the URL (no `?tab=profile`).
+ * Falls back to `'profile'` when `defaultTab` is missing or not allowed.
  *
  * @example
- * const { tab, setTab, allowed } = useProfileTabs({ enable2FA: true });
+ * const { tab, setTab, allowed } = useProfileTabs({ enable2FA: true, defaultTab: 'security' });
  * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
  */
 export function useProfileTabs(options: UseProfileTabsOptions = {}) {
-  const { enable2FA, enableAPIKeys, extraTabValues = [] } = options;
+  const { enable2FA, enableAPIKeys, extraTabValues = [], defaultTab } = options;
 
   const allowed = useMemo(() => {
     const base: ProfileTabValue[] = ['profile'];
@@ -32,12 +31,18 @@ export function useProfileTabs(options: UseProfileTabsOptions = {}) {
     return [...base, ...extraTabValues] as ProfileTabValue[];
   }, [enable2FA, enableAPIKeys, extraTabValues]);
 
-  const parser = useMemo(
-    () => parseAsStringEnum(allowed).withDefault('profile'),
-    [allowed],
+  const [tab, setTabState] = useState<ProfileTabValue>(
+    defaultTab && allowed.includes(defaultTab) ? defaultTab : 'profile',
   );
 
-  const [tab, setTab] = useQueryState('tab', parser, { replace: true });
+  const setTab = useCallback(
+    (value: ProfileTabValue) => {
+      if (allowed.includes(value)) {
+        setTabState(value);
+      }
+    },
+    [allowed],
+  );
 
   return { tab, setTab, allowed };
 }

package/src/layouts/ProfileLayout/index.ts

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

package/src/layouts/ProfileLayout/types.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { ProfileTabValue } from './hooks/useProfileTabs';
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Slot + Tab types
 // ─────────────────────────────────────────────────────────────────────────────
@@ -24,7 +26,7 @@ export interface ProfileSlots {
   footer?: React.ReactNode;
 }
 
-export interface ProfileLayoutProps {
+export interface ProfileFormProps {
   onUnauthenticated?: () => void;
   title?: string;
   enable2FA?: boolean;
@@ -34,4 +36,12 @@ export interface ProfileLayoutProps {
   tabs?: ProfileTab[];
   /** Named slots for additional content */
   slots?: ProfileSlots;
+  /**
+   * When provided, the active tab is controlled locally (no URL sync).
+   * Useful for dialogs where query-string pollution is undesirable.
+   */
+  defaultTab?: ProfileTabValue;
 }
+
+/** @deprecated Use ProfileFormProps instead */
+export type ProfileLayoutProps = ProfileFormProps;

package/src/layouts/_components/index.ts

@@ -27,3 +27,4 @@ export type {
   LocaleSwitcherSharedProps,
   LocaleSwitcherVariant,
 } from './LocaleSwitcher';
+

package/src/layouts/types/providers.types.ts

@@ -5,10 +5,10 @@
  * Note: Analytics, PWA, Push, and Error types are defined in their respective modules
  */
 
-import type { ThemeStyleConfig } from '../../theme/themeStyle.types';
+import type { ThemeStyleConfig } from '@djangocfg/ui-core/styles/presets';
 
 // Re-export for consumers that only import from `layouts/types`
-export type { ThemeStyleConfig, ThemeCssVarKey, ThemeCssVarMap, ThemeStylePresetId } from '../../theme/themeStyle.types';
+export type { ThemeStyleConfig, ThemeCssVarKey, ThemeCssVarMap, ThemeStylePresetId } from '@djangocfg/ui-core/styles/presets';
 
 // ============================================================================
 // Theme Configuration

package/src/theme/ThemeStyleBridge.tsx

@@ -2,9 +2,7 @@
 
 import { useEffect, useMemo } from 'react';
 
-import { buildThemeStyleSheet } from './buildThemeStyleSheet';
-
-import type { ThemeStyleConfig } from './themeStyle.types';
+import { buildThemeStyleSheet, type ThemeStyleConfig } from '@djangocfg/ui-core/styles/presets';
 
 const STYLE_ELEMENT_ID = 'djangocfg-baseapp-theme-style';
 

package/src/theme/index.ts

@@ -7,10 +7,8 @@ export type {
   ThemeCssVarSidebarKey,
   ThemeStyleConfig,
   ThemeStylePresetId,
-} from './themeStyle.types';
+} from '@djangocfg/ui-core/styles/presets';
 
-export { THEME_STYLE_PRESETS, THEME_STYLE_PRESET_ORDER } from './themeStylePresets';
-
-export { buildThemeStyleSheet } from './buildThemeStyleSheet';
+export { THEME_STYLE_PRESETS, THEME_STYLE_PRESET_ORDER, buildThemeStyleSheet } from '@djangocfg/ui-core/styles/presets';
 
 export { ThemeStyleBridge, type ThemeStyleBridgeProps } from './ThemeStyleBridge';

package/src/theme/buildThemeStyleSheet.ts

@@ -1,71 +0,0 @@
-import type { ThemeCssVarMap, ThemeStyleConfig, ThemeStylePresetId } from './themeStyle.types';
-import { THEME_STYLE_PRESETS } from './themeStylePresets';
-
-function mergeLayer(
-  base: ThemeCssVarMap | undefined,
-  over: ThemeCssVarMap | undefined
-): ThemeCssVarMap {
-  return { ...base, ...over };
-}
-
-/**
- * Tailwind v4 `rounded-*` utilities are backed by `--radius-*` scale variables (xs/sm/md/…),
- * not by our semantic `--radius`.
- *
- * When semantic `radius` is present, emit the derived scale too so the injected stylesheet
- * controls both semantic and Tailwind scale rounding across the UI.
- */
-function withTailwindRadiusScale(vars: ThemeCssVarMap): Array<[string, string]> {
-  const entries = Object.entries(vars);
-  const radius = vars.radius;
-  if (!radius) return entries;
-
-  const r = String(radius).trim();
-  if (!r) return entries;
-
-  const scale: Array<[string, string]> = [
-    ['radius-xs', `calc(${r} - 6px)`],
-    ['radius-sm', `calc(${r} - 4px)`],
-    ['radius-md', `calc(${r} - 2px)`],
-    ['radius-lg', r],
-    ['radius-xl', `calc(${r} + 4px)`],
-    ['radius-2xl', `calc(${r} + 8px)`],
-    ['radius-3xl', `calc(${r} + 12px)`],
-    ['radius-4xl', `calc(${r} + 16px)`],
-  ];
-
-  // Put derived values after semantic `radius` so they always win in the injected block.
-  return [...entries, ...scale];
-}
-
-/**
- * Build a small stylesheet fragment for injection after globals.
- * Order: preset (if not default) → `vars.light` / `vars.dark`.
- */
-export function buildThemeStyleSheet(style?: ThemeStyleConfig): string {
-  if (!style) return '';
-
-  const presetId: ThemeStylePresetId = style.preset ?? 'default';
-  const preset = THEME_STYLE_PRESETS[presetId] ?? THEME_STYLE_PRESETS.default;
-
-  const light = mergeLayer(preset.light, style.vars?.light);
-  const dark = mergeLayer(preset.dark, style.vars?.dark);
-
-  const blocks: string[] = [];
-
-  if (Object.keys(light).length > 0) {
-    const body = withTailwindRadiusScale(light)
-      .map(([k, v]) => `  --${k}: ${v};`)
-      .join('\n');
-    blocks.push(`:root {\n${body}\n}`);
-  }
-
-  if (Object.keys(dark).length > 0) {
-    const body = withTailwindRadiusScale(dark)
-      .map(([k, v]) => `  --${k}: ${v};`)
-      .join('\n');
-    blocks.push(`.dark {\n${body}\n}`);
-  }
-
-  return blocks.join('\n\n');
-}