@djangocfg/layouts 2.1.593 → 2.1.595

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.593",
+  "version": "2.1.595",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -90,11 +90,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.593",
-    "@djangocfg/api": "^2.1.593",
-    "@djangocfg/devtools": "^2.1.593",
-    "@djangocfg/i18n": "^2.1.593",
-    "@djangocfg/ui-core": "^2.1.593",
+    "@djangocfg/analytics": "^2.1.595",
+    "@djangocfg/api": "^2.1.595",
+    "@djangocfg/devtools": "^2.1.595",
+    "@djangocfg/i18n": "^2.1.595",
+    "@djangocfg/ui-core": "^2.1.595",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,12 +124,12 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.593",
-    "@djangocfg/api": "^2.1.593",
-    "@djangocfg/devtools": "^2.1.593",
-    "@djangocfg/i18n": "^2.1.593",
-    "@djangocfg/typescript-config": "^2.1.593",
-    "@djangocfg/ui-core": "^2.1.593",
+    "@djangocfg/analytics": "^2.1.595",
+    "@djangocfg/api": "^2.1.595",
+    "@djangocfg/devtools": "^2.1.595",
+    "@djangocfg/i18n": "^2.1.595",
+    "@djangocfg/typescript-config": "^2.1.595",
+    "@djangocfg/ui-core": "^2.1.595",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/layouts/SettingsLayout/SettingsDialog.tsx

@@ -19,6 +19,11 @@ import { buildBuiltinSections } from './sections';
 import { useSettingsDialogStore } from './store';
 import type { SettingsDialogProps } from './types';
 
+// Defaults must be module constants: a `= []` / `= {}` default is a new object each render, which would
+// re-run every effect and memo below that lists it.
+const NO_SECTIONS: NonNullable<SettingsDialogProps['sections']> = [];
+const NO_BUILTINS: NonNullable<SettingsDialogProps['builtins']> = {};
+
 /**
  * SettingsDialog — the globally-mounted settings modal.
  *
@@ -33,9 +38,9 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({
   syncUrl = true,
   urlKey = 'settings',
   title,
-  sections: appSections = [],
+  sections: appSections = NO_SECTIONS,
   groups,
-  builtins = {},
+  builtins = NO_BUILTINS,
   generalRows,
   initialSection,
   searchable = 'auto',

package/src/layouts/SettingsLayout/SettingsForm.tsx

@@ -26,11 +26,15 @@ import type { SettingsFormProps, SettingsSection } from './types';
  * `onSectionChange` to control it (the dialog does this, bound to its store).
  * Built-in sections are merged ahead of app `sections`; ids must be unique.
  */
+// Module constants: `= []` / `= {}` defaults are new objects every render and would defeat the memos below.
+const NO_SECTIONS: NonNullable<SettingsFormProps['sections']> = [];
+const NO_BUILTINS: NonNullable<SettingsFormProps['builtins']> = {};
+
 export const SettingsForm: React.FC<SettingsFormProps> = ({
   title,
-  sections: appSections = [],
+  sections: appSections = NO_SECTIONS,
   groups,
-  builtins = {},
+  builtins = NO_BUILTINS,
   generalRows,
   initialSection,
   searchable = 'auto',

package/src/layouts/SettingsLayout/components/AccountMenuButton.tsx

@@ -18,6 +18,11 @@ export interface AccountMenuButtonProps {
   /** Small muted text after the name (a plan). */
   plan?: string | null;
   className?: string;
+  /**
+   * Class hooks for the parts of the `row` trigger, so a host can restyle them without forking: a collapsed rail
+   * hides `name` and `chevron` from its own container query and centres the avatar.
+   */
+  classNames?: { avatar?: string; name?: string; chevron?: string };
 }
 
 /**
@@ -30,6 +35,7 @@ export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({
   extra,
   plan,
   className,
+  classNames,
 }) => {
   const { user } = useAuth();
   const items = useAccountMenuItems({ extra });
@@ -61,18 +67,21 @@ export const AccountMenuButton: React.FC<AccountMenuButtonProps> = ({
           className,
         )}
       >
-        <Avatar className="size-6 shrink-0">
+        <Avatar className={cn('size-6 shrink-0', classNames?.avatar)}>
           <AvatarImage src={user.avatar ?? ''} alt={name} />
           <AvatarFallback className="text-xs font-medium">{initial}</AvatarFallback>
         </Avatar>
         {isRow && (
           <>
-            <span className="flex min-w-0 items-baseline gap-1">
+            <span className={cn('flex min-w-0 items-baseline gap-1', classNames?.name)}>
               <span className="truncate text-sm">{name}</span>
               {plan ? <span className="shrink-0 text-xs text-muted-foreground">· {plan}</span> : null}
             </span>
             <ChevronDown
-              className="ml-auto size-4 shrink-0 opacity-50 transition-transform duration-150 group-data-[state=open]:rotate-180"
+              className={cn(
+                'ml-auto size-4 shrink-0 opacity-50 transition-transform duration-150 group-data-[state=open]:rotate-180',
+                classNames?.chevron,
+              )}
               aria-hidden
             />
           </>

package/src/layouts/SettingsLayout/hooks/useAccountMenuItems.ts

@@ -10,6 +10,8 @@ import type { MenuItem } from '@djangocfg/ui-core/components';
 import { useLogout } from '../../../hooks';
 import { useSettingsDialogStore } from '../store';
 
+const SETTINGS_SHORTCUT = '⇧⌘,';
+
 export interface UseAccountMenuItemsOptions {
   /** Items placed between the settings shortcuts and Sign out (language, app links). */
   extra?: MenuItem[];
@@ -18,7 +20,7 @@ export interface UseAccountMenuItemsOptions {
 }
 
 /**
- * The user menu every host shares: email, Settings, a shortcut per Settings section (built-in and the host's),
+ * The user menu every host shares: email, one row per Settings section (built-in and the host's, as in the dialog's sidebar),
  * then Sign out. Feed it to `MenuBuilder` with any trigger, so a site's own chrome gets the same menu as
  * `PrivateLayout`'s sidebar footer instead of a hand-rolled copy.
  */
@@ -35,23 +37,28 @@ export function useAccountMenuItems({ extra, label }: UseAccountMenuItemsOptions
     const items: MenuItem[] = [];
     if (headerLabel) items.push({ kind: 'label', id: 'email', label: headerLabel });
 
-    items.push({
-      kind: 'item',
-      id: 'settings',
-      label: settingsLabel,
-      icon: SettingsIcon,
-      shortcut: '⇧⌘,',
-      onSelect: () => useSettingsDialogStore.getState().open(),
-    });
-    for (const section of sections) {
+    // The menu mirrors the dialog's sidebar (same sections, order and icons) instead of adding a generic
+    // "Settings" row that opens the same first section. With no sections at all one "Settings" row stays.
+    if (sections.length === 0) {
+      items.push({
+        kind: 'item',
+        id: 'settings',
+        label: settingsLabel,
+        icon: SettingsIcon,
+        shortcut: SETTINGS_SHORTCUT,
+        onSelect: () => useSettingsDialogStore.getState().open(),
+      });
+    }
+    sections.forEach((section, index) => {
       items.push({
         kind: 'item',
         id: `settings-${section.id}`,
         label: section.label,
         icon: section.icon,
+        shortcut: index === 0 ? SETTINGS_SHORTCUT : undefined,
         onSelect: () => useSettingsDialogStore.getState().open(section.id),
       });
-    }
+    });
 
     if (extra?.length) items.push(...extra);
 

package/src/layouts/SettingsLayout/store.ts

@@ -43,9 +43,27 @@ interface SettingsDialogState {
   setSection: (sectionId: string) => void;
 }
 
-export const useSettingsDialogStore = create<SettingsDialogState>((set) => ({
+/**
+ * Same shortcuts, whatever the identity of the array or of the host's JSX labels. The dialog re-registers on
+ * every render of a host that passes `sections` inline; storing a fresh array each time would re-render every
+ * menu that reads `sections`, and when that menu shares a parent with the dialog the two feed each other.
+ * String labels are compared by value; a node label is trusted to follow its id.
+ */
+function sameMenuSections(a: SettingsMenuSection[], b: SettingsMenuSection[]): boolean {
+  if (a.length !== b.length) return false;
+  return a.every((x, i) => {
+    const y = b[i]!;
+    const sameLabel = typeof x.label === 'string' || typeof y.label === 'string' ? x.label === y.label : true;
+    return x.id === y.id && x.icon === y.icon && sameLabel;
+  });
+}
+
+export const useSettingsDialogStore = create<SettingsDialogState>((set, get) => ({
   sections: [],
-  setSections: (sections) => set({ sections }),
+  setSections: (sections) => {
+    if (sameMenuSections(get().sections, sections)) return;
+    set({ sections });
+  },
   isOpen: false,
   activeSection: null,
   open: (sectionId) =>