@djangocfg/layouts 2.1.426 → 2.1.427

package/package.json

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

package/src/layouts/AppLayout/AppLayout.tsx

@@ -48,7 +48,6 @@ import type {
   ErrorTrackingConfig,
   ErrorBoundaryConfig,
   SWRConfigOptions,
-  PwaInstallConfig,
   DebugConfig,
   I18nLayoutConfig,
 } from '../types';
@@ -211,7 +210,6 @@ export interface AppLayoutBaseAppConfig {
   errorTracking?: ErrorTrackingConfig;
   swr?: SWRConfigOptions;
   errorBoundary?: ErrorBoundaryConfig;
-  pwaInstall?: PwaInstallConfig;
   monitor?: MonitorConfig;
   debug?: DebugConfig;
 }
@@ -273,9 +271,6 @@ export interface AppLayoutProps {
   /** Error boundary configuration */
   errorBoundary?: ErrorBoundaryConfig;
 
-  /** PWA Install configuration */
-  pwaInstall?: PwaInstallConfig;
-
   /** i18n configuration for locale switching (applies to all layouts) */
   i18n?: I18nLayoutConfig;
 
@@ -486,7 +481,6 @@ export function AppLayout(props: AppLayoutProps) {
   const errorTracking = baseAppConfig?.errorTracking ?? props.errorTracking;
   const errorBoundary = baseAppConfig?.errorBoundary ?? props.errorBoundary;
   const swr = baseAppConfig?.swr ?? props.swr;
-  const pwaInstall = baseAppConfig?.pwaInstall ?? props.pwaInstall;
   const monitor = baseAppConfig?.monitor ?? props.monitor;
   const debug = baseAppConfig?.debug ?? props.debug;
 
@@ -500,7 +494,6 @@ export function AppLayout(props: AppLayoutProps) {
       errorTracking={errorTracking}
       errorBoundary={errorBoundary}
       swr={swr}
-      pwaInstall={pwaInstall}
       monitor={monitor}
       debug={debug}
       i18n={i18n}

package/src/layouts/AppLayout/BaseApp.tsx

@@ -54,7 +54,6 @@ import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
 import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
 import { AuthDialog } from '../../snippets/AuthDialog';
-import { A2HSHint, PWAPageResumeManager, PwaProvider } from '@djangocfg/ui-nextjs/pwa';
 
 import type { BaseLayoutProps } from '../types/layout.types';
 import { LayoutI18nProvider } from './LayoutI18nProvider';
@@ -71,8 +70,7 @@ export type BaseAppProps = BaseLayoutProps;
  * BaseApp - Core providers wrapper for any React/Next.js app
  *
  * Includes: ThemeProvider, TooltipProvider, SWRConfig, AuthProvider, AnalyticsProvider,
- * CentrifugoProvider, PwaProvider, ErrorTrackingProvider,
- * ErrorBoundary (optional)
+ * CentrifugoProvider, ErrorTrackingProvider, ErrorBoundary (optional)
  * Also renders global Toaster and PageProgress components
  */
 export function BaseApp({
@@ -85,7 +83,6 @@ export function BaseApp({
   errorTracking,
   errorBoundary,
   swr,
-  pwaInstall,
   monitor,
   debug,
   i18n,
@@ -97,10 +94,6 @@ export function BaseApp({
   // ErrorBoundary is enabled by default
   const enableErrorBoundary = errorBoundary?.enabled !== false;
 
-  // Check if PWA Install is enabled
-  const pwaInstallEnabled = pwaInstall?.enabled === true;
-  const showInstallHint = pwaInstallEnabled && pwaInstall?.showInstallHint !== false;
-
   // Centrifugo configuration
   const centrifugoUrl = centrifugo?.url || process.env.NEXT_PUBLIC_CENTRIFUGO_URL;
   const centrifugoEnabled = centrifugo?.enabled !== false;
@@ -150,51 +143,35 @@ export function BaseApp({
                   return result.data.token;
                 }}
               >
-                <PwaProvider enabled={pwaInstallEnabled}>
-                  <ErrorTrackingProvider
-                    validation={errorTracking?.validation}
-                    cors={errorTracking?.cors}
-                    network={errorTracking?.network}
-                    onError={errorTracking?.onError}
-                    onMonitorCapture={(d) => FrontendMonitor.capture(errorDetailToMonitorEvent(d))}
-                  >
-                    <MonitorProvider {...monitorConfig} />
-                    <LayoutI18nProvider value={i18n}>
-                      {i18n?.routing ? (
-                        <NextIntlLinkBridge routing={i18n.routing}>{children}</NextIntlLinkBridge>
-                      ) : (
-                        children
-                      )}
-                    </LayoutI18nProvider>
-                    <NextTopLoader
-                      color="var(--primary)"
-                      height={3}
-                      showSpinner={false}
-                      shadow="0 0 10px var(--primary), 0 0 5px var(--primary)"
-                    />
-
-                    {/* PWA Install Hint */}
-                    {showInstallHint && (
-                      <A2HSHint
-                        resetAfterDays={pwaInstall?.resetAfterDays}
-                        delayMs={pwaInstall?.delayMs}
-                        logo={pwaInstall?.logo}
-                      />
-                    )}
-
-                    {/* PWA Page Resume Manager */}
-                    {pwaInstallEnabled && pwaInstall?.resumeLastPage && (
-                      <PWAPageResumeManager enabled={true} />
+                <ErrorTrackingProvider
+                  validation={errorTracking?.validation}
+                  cors={errorTracking?.cors}
+                  network={errorTracking?.network}
+                  onError={errorTracking?.onError}
+                  onMonitorCapture={(d) => FrontendMonitor.capture(errorDetailToMonitorEvent(d))}
+                >
+                  <MonitorProvider {...monitorConfig} />
+                  <LayoutI18nProvider value={i18n}>
+                    {i18n?.routing ? (
+                      <NextIntlLinkBridge routing={i18n.routing}>{children}</NextIntlLinkBridge>
+                    ) : (
+                      children
                     )}
-
-                    {/* Auth Dialog - only when auth is enabled */}
-                    {authEnabled && <AuthDialog authPath={authConfig?.routes?.auth} />}
-
-                    {/* Debug Panel — auto in dev, ?debug=1 in prod, disable with debug={{ enabled: false }} */}
-                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                    <DebugButton enabled={debugEnabled} {...(debugProps as any)} />
-                  </ErrorTrackingProvider>
-                </PwaProvider>
+                  </LayoutI18nProvider>
+                  <NextTopLoader
+                    color="var(--primary)"
+                    height={3}
+                    showSpinner={false}
+                    shadow="0 0 10px var(--primary), 0 0 5px var(--primary)"
+                  />
+
+                  {/* Auth Dialog - only when auth is enabled */}
+                  {authEnabled && <AuthDialog authPath={authConfig?.routes?.auth} />}
+
+                  {/* Debug Panel — auto in dev, ?debug=1 in prod, disable with debug={{ enabled: false }} */}
+                  {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                  <DebugButton enabled={debugEnabled} {...(debugProps as any)} />
+                </ErrorTrackingProvider>
               </CentrifugoProvider>
             </AnalyticsProvider>
           </AuthProvider>

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

@@ -3,12 +3,16 @@
 import React, { memo, useMemo } from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
+import { Preloader } from '@djangocfg/ui-core/components';
 
-import { AuthButton, AuthContainer, AuthHeader } from '../../shared';
+import { AuthContainer, AuthHeader } from '../../shared';
 
 /**
  * SetupLoading - Loading state for 2FA setup.
  *
+ * Uses the ui-core Preloader (text-primary spinner) so the "Setting up…"
+ * indicator stays clearly visible instead of the near-invisible chip spinner.
+ *
  * Memoised: no props; pure translation-driven component. Prevents
  * re-renders when parent orchestrators re-render for unrelated reasons.
  */
@@ -23,9 +27,7 @@ function SetupLoadingRaw() {
     <AuthContainer step="2fa-setup">
       <AuthHeader title={content.title} />
       <div className="auth-form-group">
-        <AuthButton loading disabled>
-          {content.button}
-        </AuthButton>
+        <Preloader variant="inline" text={content.button} className="py-4" />
       </div>
     </AuthContainer>
   );

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -42,8 +42,8 @@ export { SidebarBrandSwitcher } from './components';
 
 export { PrivateLayoutProps };
 
-const ProfileDialog = React.lazy(() =>
-  import('../ProfileLayout/ProfileDialog/ProfileDialog').then((m) => ({ default: m.ProfileDialog }))
+const SettingsDialog = React.lazy(() =>
+  import('../SettingsLayout/SettingsDialog').then((m) => ({ default: m.SettingsDialog }))
 );
 
 export function PrivateLayout({
@@ -55,6 +55,7 @@ export function PrivateLayout({
   contentScroll = 'auto',
   visual,
   requireAuth = true,
+  settings,
 }: PrivateLayoutProps) {
   const { isLoading, loadingText } = useAuthGuard({
     requireAuth,
@@ -104,7 +105,10 @@ export function PrivateLayout({
         </PrivateContent>
       </SidebarInset>
 
-      <ProfileDialog />
+      {/* Settings is the primary account dialog — always mounted so the
+          account-menu "Settings" item works out of the box. `settings` is
+          optional config (extra app sections / flags), not an on/off switch. */}
+      <SettingsDialog {...(settings ?? {})} />
     </SidebarProvider>
   );
 }

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

@@ -64,7 +64,11 @@ export function PrivateContent({
       : undefined;
 
   const scrollAreaClass = cn(
-    'min-h-0 flex-1 bg-card',
+    // The boxed content is the MAIN surface (Claude bg-100), not a raised card.
+    // `bg-background` keeps it the warm page tone; the slightly darker
+    // sidebar-canvas behind the inset gives the floating look. (`bg-card`, now
+    // lifted to 18.4%, made this big panel read too light.)
+    'min-h-0 flex-1 bg-background',
     scroll === 'auto' ? 'overflow-y-auto' : 'flex flex-col overflow-hidden',
     padding === 'default' && scroll === 'auto' && [
       'px-4 sm:px-6 lg:px-8',

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

@@ -11,9 +11,9 @@
 
 'use client';
 
-import { ChevronsUpDown, LogOut } from 'lucide-react';
+import { ChevronsUpDown, Languages, LogOut, Settings as SettingsIcon } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
@@ -22,21 +22,19 @@ import {
   AvatarFallback,
   AvatarImage,
   Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+  LanguageFlag,
+  MenuBuilder,
 } from '@djangocfg/ui-core/components';
+import type { MenuItem } from '@djangocfg/ui-core/components';
 import { cn, isDev } from '@djangocfg/ui-core/lib';
 import { useSidebar } from '@djangocfg/ui-core/components';
 
 import { useLogout } from '../../../hooks';
 import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 import { LucideIcon as LucideIconRender } from '../../../components';
+import { getLocaleMeta } from '../../_components/locale-switcher/localeMeta';
 import { useShellVisualState } from '../hooks';
-import { useProfileDialogStore } from '../../ProfileLayout/ProfileDialog/store';
+import { useSettingsDialogStore } from '../../SettingsLayout/store';
 
 import type { HeaderConfig } from '../types';
 
@@ -101,11 +99,6 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     setSidebarOpen(true);
   }, [setSidebarOpen]);
 
-  const onLogoutSelect = React.useCallback((e: Event) => {
-    e.preventDefault();
-    handleLogout();
-  }, [handleLogout]);
-
   // 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.
@@ -116,8 +109,10 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const secondary = header?.footerSecondaryAction;
 
   const triggerClassName = cn(
-    'group h-auto w-full gap-3 rounded-lg px-3 py-3 text-left',
+    'group h-auto w-full gap-3 rounded-lg px-3 py-3 text-left select-none',
     'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
+    // No focus ring on the menu trigger — the open menu is the affordance.
+    'focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
     content.isAccountCompact ? 'justify-center px-0 py-2' : 'min-h-[52px]',
   );
 
@@ -129,39 +124,16 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     'p-1.5',
     content.isAccountCompact ? 'min-w-60' : 'w-[var(--radix-dropdown-menu-trigger-width)] min-w-60',
   );
-  const dropdownSide: 'top' | 'right' = content.isAccountCompact ? 'right' : 'top';
+  // Always open UPWARD over the avatar (Claude pattern). The footer sits at the
+  // bottom of the rail in both expanded and collapsed states, so `top` reads
+  // correctly either way (vs. `right`, which floated off to the side).
+  const dropdownSide: 'top' = 'top';
   const avatarClass = cn(
     'h-9 w-9 shrink-0 border border-transparent transition-colors',
     'group-hover:border-sidebar-border/70',
   );
 
   const headerLabelText = account.email ?? (account.source === 'dev-fallback' ? 'No active session' : null);
-  const headerLabel = headerLabelText ? (
-    <DropdownMenuLabel className="truncate px-2 py-1.5 text-xs font-normal text-muted-foreground">
-      {headerLabelText}
-    </DropdownMenuLabel>
-  ) : null;
-
-  const accountLinksItems = accountLinks.map((item) => {
-    const Icon = item.icon;
-    return (
-      <DropdownMenuItem key={item.href} asChild>
-        <Link
-          href={item.href!}
-          className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
-        >
-          {Icon ? <Icon className="h-4 w-4 shrink-0 text-muted-foreground" /> : null}
-          <span className="truncate">{item.label}</span>
-        </Link>
-      </DropdownMenuItem>
-    );
-  });
-  const accountLinksBlock = accountLinks.length > 0 ? (
-    <>
-      {headerLabel ? <DropdownMenuSeparator /> : null}
-      {accountLinksItems}
-    </>
-  ) : null;
 
   const expandedMeta = content.isAccountCompact ? null : (
     <>
@@ -184,17 +156,96 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     </>
   );
 
-  const openProfileDialog = React.useCallback(() => {
-    useProfileDialogStore.getState().open();
+  // `accountAction: 'dialog'` opens the global SettingsDialog (mounted in
+  // PrivateLayout). Requires `settings` to be passed to PrivateLayout.
+  const openSettingsDialog = React.useCallback(() => {
+    useSettingsDialogStore.getState().open();
   }, []);
 
+  // ── Declarative account menu (Claude-style) — fed to MenuBuilder ──
+  const menuItems = React.useMemo<MenuItem[]>(() => {
+    const items: MenuItem[] = [];
+
+    // Email header.
+    if (headerLabelText) {
+      items.push({ kind: 'label', id: 'email', label: headerLabelText });
+    }
+
+    // Settings → opens the global SettingsDialog (⌘, like Claude).
+    items.push({
+      kind: 'item',
+      id: 'settings',
+      label: t('layouts.profile.settings') || 'Settings',
+      icon: SettingsIcon,
+      shortcut: '⇧⌘,',
+      onSelect: () => useSettingsDialogStore.getState().open(),
+    });
+
+    // Language → submenu with a radio group of locales (flag + native name,
+    // checkmark on the active one). Only when an i18n layout context is present.
+    if (layoutI18n && layoutI18n.locales.length > 1) {
+      items.push({
+        kind: 'submenu',
+        id: 'language',
+        label: t('layouts.profile.language') || 'Language',
+        icon: Languages,
+        items: [
+          {
+            kind: 'radio-group',
+            id: 'locale',
+            value: layoutI18n.locale,
+            onValueChange: layoutI18n.onLocaleChange,
+            options: layoutI18n.locales.map((code) => {
+              const meta = getLocaleMeta(code);
+              return {
+                id: code,
+                value: code,
+                label: meta.native,
+                icon: <LanguageFlag code={code} rounded className="h-3 w-4 shrink-0" />,
+              };
+            }),
+          },
+        ],
+      });
+    }
+
+    // App-provided account links (from header.groups).
+    if (accountLinks.length > 0) {
+      items.push({ kind: 'separator', id: 'sep-links' });
+      for (const link of accountLinks) {
+        items.push({
+          kind: 'item',
+          id: link.href!,
+          label: link.label,
+          icon: link.icon,
+          href: link.href,
+        });
+      }
+    }
+
+    // Log out (destructive). Let the menu close normally (no preventDefault) —
+    // the logout confirm dialog should appear over a CLOSED menu, not under a
+    // still-open one.
+    items.push({ kind: 'separator', id: 'sep-logout' });
+    items.push({
+      kind: 'item',
+      id: 'logout',
+      label: signOutLabel,
+      icon: LogOut,
+      variant: 'destructive',
+      onSelect: () => handleLogout(),
+    });
+
+    return items;
+  }, [headerLabelText, t, layoutI18n, accountLinks, signOutLabel, handleLogout]);
+
   const triggerButton = (
     <Button
       type="button"
       variant="ghost"
       aria-label={content.isAccountCompact ? account.displayName : undefined}
       className={triggerClassName}
-      onClick={header?.accountAction === 'dialog' ? openProfileDialog : onTriggerInteract}
+      onClick={header?.accountAction === 'dialog' ? openSettingsDialog : onTriggerInteract}
     >
       <Avatar className={avatarClass}>
         <AvatarImage src={account.avatarUrl} alt={account.displayName} />
@@ -209,7 +260,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     content.isAccountCompact ? 'px-0 pb-0' : 'px-2 pb-2',
   );
 
-  // Dialog mode: simple button that opens the global ProfileDialog
+  // Dialog mode: simple button that opens the global SettingsDialog
   if (header?.accountAction === 'dialog') {
     return (
       <div className={wrapperClass}>
@@ -220,33 +271,17 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
 
   return (
     <div className={wrapperClass}>
-      <DropdownMenu
+      <MenuBuilder
+        items={menuItems}
         open={isAccountMenuOpen}
         onOpenChange={setIsAccountMenuOpen}
+        side={dropdownSide}
+        align="start"
+        sideOffset={8}
+        contentClassName={dropdownContentClass}
       >
-        <DropdownMenuTrigger asChild>
-          {triggerButton}
-        </DropdownMenuTrigger>
-
-        <DropdownMenuContent
-          side={dropdownSide}
-          align="start"
-          sideOffset={8}
-          className={dropdownContentClass}
-        >
-          {headerLabel}
-          {accountLinksBlock}
-
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onSelect={onLogoutSelect}
-            className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-destructive focus:bg-destructive/10 focus:text-destructive"
-          >
-            <LogOut className="h-4 w-4 shrink-0" />
-            <span className="truncate">{signOutLabel}</span>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+        {triggerButton}
+      </MenuBuilder>
     </div>
   );
 }

package/src/layouts/PrivateLayout/types.ts

@@ -8,6 +8,7 @@ import type { ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
 
 import type { AppLayoutPublicChrome } from '../AppLayout/AppLayout';
+import type { SettingsDialogProps } from '../SettingsLayout/types';
 import type { LayoutVisualConfig } from '../types';
 import type { UserMenuConfig } from '../types';
 
@@ -225,4 +226,11 @@ export interface PrivateLayoutProps {
   requireAuth?: boolean;
   /** Reserved for `AppLayout` passthrough (`publicChrome`); unused in this layout. */
   publicChrome?: AppLayoutPublicChrome;
+  /**
+   * Mount the global SettingsDialog (Claude-style master/detail settings modal,
+   * hash-URL driven, openable via `useSettingsDialog()`). Pass a config object
+   * (even `{}`) to enable it with the built-in sections; omit to not mount it.
+   * Coexists with the legacy ProfileDialog — they are independent.
+   */
+  settings?: SettingsDialogProps;
 }