@djangocfg/layouts 2.1.357 → 2.1.358

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.357",
+  "version": "2.1.358",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -84,13 +84,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.357",
-    "@djangocfg/centrifugo": "^2.1.357",
-    "@djangocfg/debuger": "^2.1.357",
-    "@djangocfg/i18n": "^2.1.357",
-    "@djangocfg/monitor": "^2.1.357",
-    "@djangocfg/ui-core": "^2.1.357",
-    "@djangocfg/ui-nextjs": "^2.1.357",
+    "@djangocfg/api": "^2.1.358",
+    "@djangocfg/centrifugo": "^2.1.358",
+    "@djangocfg/debuger": "^2.1.358",
+    "@djangocfg/i18n": "^2.1.358",
+    "@djangocfg/monitor": "^2.1.358",
+    "@djangocfg/ui-core": "^2.1.358",
+    "@djangocfg/ui-nextjs": "^2.1.358",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -105,7 +105,8 @@
     "swr": "^2.3.7",
     "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "zustand": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@djangocfg/monitor": {
@@ -120,21 +121,22 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.357",
-    "@djangocfg/centrifugo": "^2.1.357",
-    "@djangocfg/debuger": "^2.1.357",
-    "@djangocfg/i18n": "^2.1.357",
-    "@djangocfg/monitor": "^2.1.357",
-    "@djangocfg/typescript-config": "^2.1.357",
-    "@djangocfg/ui-core": "^2.1.357",
-    "@djangocfg/ui-nextjs": "^2.1.357",
-    "@djangocfg/ui-tools": "^2.1.357",
+    "@djangocfg/api": "^2.1.358",
+    "@djangocfg/centrifugo": "^2.1.358",
+    "@djangocfg/debuger": "^2.1.358",
+    "@djangocfg/i18n": "^2.1.358",
+    "@djangocfg/monitor": "^2.1.358",
+    "@djangocfg/typescript-config": "^2.1.358",
+    "@djangocfg/ui-core": "^2.1.358",
+    "@djangocfg/ui-nextjs": "^2.1.358",
+    "@djangocfg/ui-tools": "^2.1.358",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "eslint": "^9.37.0",
     "next-intl": "^4.9.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "zustand": "^5.0.4"
   },
   "publishConfig": {
     "access": "public"

package/src/configurator/private/schema.ts

@@ -37,6 +37,7 @@ export interface PrivateLayoutConfiguratorData {
   header: {
     userPlan: string;
     showSecondaryAction: boolean;
+    accountAction: 'menu' | 'dialog';
   };
 }
 
@@ -126,6 +127,12 @@ export const privateLayoutConfiguratorSchema: CustomJsonSchema7 = {
           title: 'Footer secondary action',
           description: 'Adds a download-style icon button inside the footer trigger with a pulsing accent dot.',
         },
+        accountAction: {
+          type: 'string',
+          title: 'Account action',
+          enum: ['menu', 'dialog'],
+          description: "'menu' opens a dropdown; 'dialog' opens the global ProfileDialog.",
+        },
       },
     },
   },
@@ -165,6 +172,10 @@ export const privateLayoutConfiguratorUiSchema: CustomJsonUiSchema7 = {
   header: {
     'ui:collapsible': true,
     showSecondaryAction: { 'ui:widget': 'switch' },
+    accountAction: {
+      'ui:widget': 'radio',
+      'ui:options': { inline: true },
+    },
   },
 };
 
@@ -186,5 +197,6 @@ export const defaultPrivateLayoutConfiguratorData: PrivateLayoutConfiguratorData
   header: {
     userPlan: 'Pro plan',
     showSecondaryAction: false,
+    accountAction: 'menu',
   },
 };

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -9,6 +9,7 @@
 'use client';
 
 import React, { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
 
 import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-core/components';
@@ -18,6 +19,7 @@ import type { LayoutVisualConfig } from '../types';
 import { PrivateContent, PrivateSidebar } from './components';
 import { useAuthGuard } from './hooks';
 import { useLayoutVisual } from './hooks';
+import { useSidebarDefaultOpen } from './hooks';
 
 import type {
   HeaderConfig,
@@ -37,6 +39,12 @@ export type {
 
 export { PrivateLayoutProps };
 
+// Lazy-load ProfileDialog so the profile bundle is only fetched when opened.
+const ProfileDialog = dynamic(
+  () => import('../ProfileLayout/ProfileDialog/ProfileDialog').then((m) => m.ProfileDialog),
+  { ssr: false },
+);
+
 export function PrivateLayout({
   children,
   sidebar,
@@ -55,6 +63,8 @@ export function PrivateLayout({
   const { providerStyle, providerClassName, insetClassName, sidebarVariant } =
     useLayoutVisual(visual);
 
+  const defaultOpen = useSidebarDefaultOpen();
+
   if (isLoading) {
     return (
       <Preloader
@@ -69,7 +79,7 @@ export function PrivateLayout({
 
   return (
     <SidebarProvider
-      defaultOpen={true}
+      defaultOpen={defaultOpen}
       style={providerStyle}
       className={providerClassName}
     >
@@ -92,6 +102,8 @@ export function PrivateLayout({
           {children}
         </PrivateContent>
       </SidebarInset>
+
+      <ProfileDialog />
     </SidebarProvider>
   );
 }

package/src/layouts/PrivateLayout/components/PrivateSidebar.tsx

@@ -51,7 +51,7 @@ export function PrivateSidebar({
   }, [pathname, isMobile, setOpenMobile]);
 
   const collapsedRail = !isMobile && state === 'collapsed';
-  const { isHoverExpanded, onMouseEnter, onMouseLeave } = useHoverExpand({
+  const { isHoverExpanded, onMouseEnter, onMouseLeave, setHoverExpanded } = useHoverExpand({
     enabled: collapsedRail,
   });
 
@@ -69,7 +69,7 @@ export function PrivateSidebar({
         header={header}
         variant={variant}
         collapsedRail={collapsedRail}
-        setOpen={setOpen}
+        setHoverExpanded={setHoverExpanded}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       />
@@ -87,7 +87,7 @@ interface PrivateSidebarInnerProps {
   header?: HeaderConfig;
   variant: 'sidebar' | 'inset';
   collapsedRail: boolean;
-  setOpen: (open: boolean) => void;
+  setHoverExpanded: (value: boolean) => void;
   onMouseEnter: () => void;
   onMouseLeave: () => void;
 }
@@ -97,7 +97,7 @@ function PrivateSidebarInner({
   header,
   variant,
   collapsedRail,
-  setOpen,
+  setHoverExpanded,
   onMouseEnter,
   onMouseLeave,
 }: PrivateSidebarInnerProps) {
@@ -105,26 +105,20 @@ function PrivateSidebarInner({
   const { modifiers } = useShellVisualState(layoutVariant);
   const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
 
-  /**
-   * Click on the collapsed icon-rail expands the sidebar — but only on empty
-   * areas. Native interactive elements (nav links, the trigger, account menu,
-   * tooltips) keep their original behaviour: we bail out as soon as the click
-   * target sits inside a `button`, `a`, or anything explicitly marked
-   * non-expandable via `data-no-expand`.
-   */
+  const railExpandHintClass = collapsedRail ? 'cursor-pointer' : undefined;
+
+  /** Click on the collapsed rail acts like a hover — temporary expand, not persistent. */
   const expandOnRailClick = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       const interactive = (event.target as Element | null)?.closest(
         'a, button, [role="menuitem"], [data-no-expand]',
       );
       if (interactive) return;
-      setOpen(true);
+      setHoverExpanded(true);
     },
-    [setOpen],
+    [setHoverExpanded],
   );
 
-  const railExpandHintClass = collapsedRail ? 'cursor-pointer' : undefined;
-
   const sidebarRootClass = React.useMemo(
     () =>
       cn(

package/src/layouts/PrivateLayout/components/PrivateSidebarAccount.tsx

@@ -1,7 +1,8 @@
 /**
  * Sidebar account: rich footer trigger (avatar + name + plan + optional secondary
- * action) opens a popover (DropdownMenu) upward with email, account links, locale +
- * theme controls, and sign-out. Replaces the legacy inline collapsible.
+ * action) opens a popover (DropdownMenu) upward with email, account links, and
+ * sign-out. Language and theme controls live inside ProfileLayout / PreferencesSection
+ * so they are not duplicated here.
  *
  * Reads `isAccountMenuOpen` / `setIsAccountMenuOpen` directly from
  * PrivateLayoutContext so the parent sidebar can block collapse while the menu
@@ -10,7 +11,7 @@
 
 'use client';
 
-import { ChevronRight, ChevronsUpDown, Globe, LogOut, Monitor, Moon, Sun } from 'lucide-react';
+import { ChevronsUpDown, LogOut } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
 import React, { memo, useMemo } from 'react';
 
@@ -30,15 +31,13 @@ import {
 } from '@djangocfg/ui-core/components';
 import { cn, isDev } from '@djangocfg/ui-core/lib';
 import { useSidebar } from '@djangocfg/ui-core/components';
-import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
 import { useLogout } from '../../../hooks';
-import { LocaleSwitcherDialog } from '../../_components/locale-switcher';
-import { getLocaleMeta } from '../../_components/locale-switcher/localeMeta';
 import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 import { LucideIcon as LucideIconRender } from '../../../components';
 import { useShellVisualState } from '../hooks';
 import { blockSidebarCollapse, allowSidebarCollapse } from '../hooks/useHoverExpand';
+import { useProfileDialogStore } from '../../ProfileLayout/ProfileDialog/store';
 
 import type { HeaderConfig } from '../types';
 
@@ -62,8 +61,6 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const { setOpen: setSidebarOpen } = useSidebar();
   const { content } = useShellVisualState();
   const [isAccountMenuOpen, setIsAccountMenuOpen] = React.useState(false);
-  const { theme, setTheme } = useThemeContext();
-  const [langDialogOpen, setLangDialogOpen] = React.useState(false);
 
   const signOutLabel = t('layouts.profile.signOut');
 
@@ -110,21 +107,6 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     handleLogout();
   }, [handleLogout]);
 
-  const onLanguageSelect = React.useCallback((e: Event) => {
-    // Keep the dropdown closed (default behaviour) but defer dialog mount to
-    // the next tick so Radix has time to unmount the dropdown overlay first
-    // (avoids the "two open overlays steal focus" bug).
-    e.preventDefault();
-    setTimeout(() => setLangDialogOpen(true), 0);
-  }, []);
-
-  const onThemeSelect = React.useCallback((e: Event) => {
-    e.preventDefault();
-    // Cycle: light → dark → system → light
-    const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light';
-    setTheme(next);
-  }, [theme, setTheme]);
-
   // Hide entirely in production when there's no user (auth still loading or
   // /me failed and the parent guard hasn't redirected yet). In dev keep a
   // placeholder so the footer + Log out are reachable for debugging.
@@ -135,7 +117,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const secondary = header?.footerSecondaryAction;
 
   const triggerClassName = cn(
-    'group h-auto w-full gap-3 rounded-none px-3 py-3 text-left',
+    'group h-auto w-full gap-3 rounded-lg px-3 py-3 text-left',
     'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
     content.isAccountCompact ? 'justify-center px-0 py-2' : 'min-h-[52px]',
   );
@@ -182,40 +164,6 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     </>
   ) : null;
 
-  const currentLocaleLabel = layoutI18n
-    ? getLocaleMeta(layoutI18n.locale).native
-    : null;
-  const languageItem = layoutI18n ? (
-    <DropdownMenuItem
-      onSelect={onLanguageSelect}
-      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
-    >
-      <Globe className="h-4 w-4 shrink-0 text-muted-foreground" />
-      <span className="flex-1 truncate">Language</span>
-      <span className="ml-auto flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
-        {currentLocaleLabel}
-        <ChevronRight className="h-3.5 w-3.5" aria-hidden />
-      </span>
-    </DropdownMenuItem>
-  ) : null;
-
-  const themeIcon = theme === 'dark'
-    ? <Moon className="h-4 w-4 shrink-0 text-muted-foreground" />
-    : theme === 'light'
-      ? <Sun className="h-4 w-4 shrink-0 text-muted-foreground" />
-      : <Monitor className="h-4 w-4 shrink-0 text-muted-foreground" />;
-  const themeValueLabel = theme === 'dark' ? 'Dark' : theme === 'light' ? 'Light' : 'System';
-  const themeItem = (
-    <DropdownMenuItem
-      onSelect={onThemeSelect}
-      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
-    >
-      {themeIcon}
-      <span className="flex-1 truncate">Theme</span>
-      <span className="ml-auto shrink-0 text-xs text-muted-foreground">{themeValueLabel}</span>
-    </DropdownMenuItem>
-  );
-
   const expandedMeta = content.isAccountCompact ? null : (
     <>
       <span className="flex min-w-0 flex-1 flex-col text-left">
@@ -230,13 +178,49 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
       </span>
       <span className="flex shrink-0 items-center gap-1.5">
         {secondaryButton}
-        <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
+        {header?.accountAction !== 'dialog' ? (
+          <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
+        ) : null}
       </span>
     </>
   );
 
+  const openProfileDialog = React.useCallback(() => {
+    useProfileDialogStore.getState().open();
+  }, []);
+
+  const triggerButton = (
+    <Button
+      type="button"
+      variant="ghost"
+      aria-label={content.isAccountCompact ? account.displayName : undefined}
+      className={triggerClassName}
+      onClick={header?.accountAction === 'dialog' ? openProfileDialog : onTriggerInteract}
+    >
+      <Avatar className={avatarClass}>
+        <AvatarImage src={account.avatarUrl} alt={account.displayName} />
+        <AvatarFallback className="text-sm font-semibold">{userInitial}</AvatarFallback>
+      </Avatar>
+      {expandedMeta}
+    </Button>
+  );
+
+  const wrapperClass = cn(
+    'w-full min-w-0',
+    content.isAccountCompact ? 'px-0 pb-0' : 'px-2 pb-2',
+  );
+
+  // Dialog mode: simple button that opens the global ProfileDialog
+  if (header?.accountAction === 'dialog') {
+    return (
+      <div className={wrapperClass}>
+        {triggerButton}
+      </div>
+    );
+  }
+
   return (
-    <div className="w-full min-w-0 border-t border-sidebar-border/40">
+    <div className={wrapperClass}>
       <DropdownMenu
         open={isAccountMenuOpen}
         onOpenChange={(open) => {
@@ -246,19 +230,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
         }}
       >
         <DropdownMenuTrigger asChild>
-          <Button
-            type="button"
-            variant="ghost"
-            aria-label={content.isAccountCompact ? account.displayName : undefined}
-            className={triggerClassName}
-            onClick={onTriggerInteract}
-          >
-            <Avatar className={avatarClass}>
-              <AvatarImage src={account.avatarUrl} alt={account.displayName} />
-              <AvatarFallback className="text-sm font-semibold">{userInitial}</AvatarFallback>
-            </Avatar>
-            {expandedMeta}
-          </Button>
+          {triggerButton}
         </DropdownMenuTrigger>
 
         <DropdownMenuContent
@@ -270,10 +242,6 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
           {headerLabel}
           {accountLinksBlock}
 
-          <DropdownMenuSeparator />
-          {languageItem}
-          {themeItem}
-
           <DropdownMenuSeparator />
           <DropdownMenuItem
             onSelect={onLogoutSelect}
@@ -284,25 +252,13 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-
-      {layoutI18n ? (
-        <LocaleSwitcherDialog
-          open={langDialogOpen}
-          onOpenChange={setLangDialogOpen}
-          locale={layoutI18n.locale}
-          locales={layoutI18n.locales}
-          onChange={layoutI18n.onLocaleChange}
-          brand={layoutI18n.brand}
-          i18nLabels={layoutI18n.dialogLabels}
-        />
-      ) : null}
     </div>
   );
 }
 
 /**
  * Memoised account footer. Re-renders only when the `header` prop reference
- * changes. Internal reactive data (user from useAuth, theme, locale) are
+ * changes. Internal reactive data (user from useAuth, locale) are
  * consumed via hooks and still update independently.
  */
 export const PrivateSidebarAccount = memo(PrivateSidebarAccountRaw);

package/src/layouts/PrivateLayout/components/SidebarBrand.tsx

@@ -17,7 +17,7 @@ import { usePrivateLayoutContext } from '../context';
 import { useShellVisualState } from '../hooks';
 
 function SidebarBrandRaw() {
-  const { header, homeHref, brandTitle, brandMonogram, isMobile } =
+  const { header, homeHref, brandTitle, brandMonogram, isMobile, isHoverExpanded } =
     usePrivateLayoutContext();
   const { content } = useShellVisualState();
 
@@ -41,8 +41,8 @@ function SidebarBrandRaw() {
   const headerRowClass = useMemo(
     () =>
       cn(
-        'flex items-center gap-2',
-        content.showLabels ? 'px-2' : 'px-1.5',
+        'flex items-center gap-2 mb-2',
+        // content.showLabels ? 'px-2' : 'px-1.5',
       ),
     [content.showLabels],
   );
@@ -147,10 +147,13 @@ function SidebarBrandRaw() {
       cn(
         'pb-2',
         isMobile
-          ? 'px-4 pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
-          : 'px-2 pt-3.5',
+          ? 'pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
+          : 'pt-3.5',
+        // Hover-expanded overlay: SidebarHeader from ui-core forces paddingLeft/Right to 0
+        // when state is collapsed. Override it so content has breathing room.
+        !isMobile && isHoverExpanded && '!px-2',
       ),
-    [isMobile],
+    [isMobile, isHoverExpanded],
   );
 
   return <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>;

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

@@ -11,3 +11,4 @@ export {
 } from './useHoverExpand';
 export { useShellVisualState } from './useShellVisualState';
 export { useSidebarKeyboard } from './useSidebarKeyboard';
+export { useSidebarDefaultOpen } from './useSidebarDefaultOpen';

package/src/layouts/PrivateLayout/hooks/useHoverExpand.ts

@@ -30,11 +30,13 @@ interface UseHoverExpandResult {
   onMouseEnter: () => void;
   /** Attach to the sidebar root element */
   onMouseLeave: () => void;
+  /** Programmatically set hover-expanded state (for click-to-expand) */
+  setHoverExpanded: (value: boolean) => void;
 }
 
 export function useHoverExpand({
-  enterDelay = 250,
-  leaveDelay = 150,
+  enterDelay = 2000,
+  leaveDelay = 450,
   enabled = true,
 }: UseHoverExpandOptions = {}): UseHoverExpandResult {
   const [isHoverExpanded, setIsHoverExpanded] = useState(false);
@@ -89,7 +91,12 @@ export function useHoverExpand({
     return () => clearTimers();
   }, [clearTimers]);
 
-  return { isHoverExpanded, onMouseEnter, onMouseLeave };
+  const setHoverExpanded = useCallback((value: boolean) => {
+    clearTimers();
+    setIsHoverExpanded(value);
+  }, [clearTimers]);
+
+  return { isHoverExpanded, onMouseEnter, onMouseLeave, setHoverExpanded };
 }
 
 /** Dispatch from any descendant to block sidebar collapse while e.g. a dropdown is open. */

package/src/layouts/PrivateLayout/hooks/useShellVisualState.ts

@@ -142,7 +142,7 @@ export function useShellVisualState(
     const sidebarContent: string[] = [];
 
     if (isHoverOverlay) {
-      sidebarRoot.push('z-50', '!w-[var(--sidebar-width)]');
+      sidebarRoot.push('z-50', '!w-[var(--sidebar-width)]', 'min-w-[var(--sidebar-width)]');
       // Allow scroll inside hover-expanded overlay — shadcn hardcodes
       // overflow-hidden on div[data-sidebar=sidebar]; override it here.
       sidebarInner.push('!overflow-auto');

package/src/layouts/PrivateLayout/hooks/useSidebarDefaultOpen.ts

@@ -0,0 +1,21 @@
+/**
+ * Reads the sidebar open/closed state from the cookie written by shadcn-sidebar.
+ * Falls back to `true` (expanded) when no cookie exists.
+ *
+ * Must run on the client — returns `true` during SSR.
+ */
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+
+export function useSidebarDefaultOpen(): boolean {
+  if (typeof document === 'undefined') return true;
+
+  const match = document.cookie
+    .split('; ')
+    .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`));
+
+  if (!match) return true;
+
+  const value = match.split('=')[1];
+  return value === 'true';
+}

package/src/layouts/PrivateLayout/types.ts

@@ -132,6 +132,12 @@ export interface HeaderConfig {
   brandLetter?: string;
   /** User menu groups (account panel in the sidebar footer) */
   groups?: UserMenuConfig['groups'];
+  /**
+   * Behaviour of the footer account button.
+   * - `'menu'` (default) — opens a DropdownMenu with account links, locale/theme controls, and sign-out.
+   * - `'dialog'` — opens the global ProfileDialog (managed via Zustand store).
+   */
+  accountAction?: 'menu' | 'dialog';
   /** Auth page path (for sign in button) */
   authPath?: string;
   /** Subtitle under the display name in the sidebar footer (e.g. "Max plan"). */

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