@djangocfg/layouts 2.1.541 → 2.1.543

package/src/components/errors/README.md

@@ -48,7 +48,7 @@ This is a *user-facing recovery* path. `ErrorsTracker` below is the
 the generated API client and runtime, then renders a Sonner toast per error.
 
 Tracked error types: `validation` (zod response mismatch), `network` (failed/4xx/5xx
-requests, incl. a CORS heuristic), `centrifugo` (WS), and `runtime` (uncaught JS).
+requests, incl. a CORS heuristic), and `runtime` (uncaught JS).
 
 ```tsx
 import { ErrorTrackingProvider } from '@djangocfg/layouts'; // (or the module path)

package/src/configurator/auth/schema.ts

@@ -6,7 +6,7 @@
  *   - `authSplitSchema` / `authSplitUiSchema` — two-column card with sidebar
  *
  * Pair with `<JsonSchemaForm density="compact" schema={...} uiSchema={...}>`
- * from `@djangocfg/ui-tools` to get a ready-made sidebar configurator.
+ * from `@djangocfg/widget-forms` to get a ready-made sidebar configurator.
  */
 
 import type { CustomJsonSchema7, CustomJsonUiSchema7 } from '@djangocfg/ui-core/lib';

package/src/configurator/index.ts

@@ -1,7 +1,7 @@
 /**
  * JSON Schema descriptors for `<JsonSchemaForm>`-driven layout configurators.
  *
- * Drop a schema + uiSchema into `@djangocfg/ui-tools`'s `<JsonSchemaForm>` and
+ * Drop a schema + uiSchema into `@djangocfg/widget-forms`'s `<JsonSchemaForm>` and
  * you get a ready-made sidebar that edits the matching `<Layout>` props live.
  *
  * Public surface today:

package/src/configurator/private/schema.ts

@@ -8,7 +8,7 @@
  *   - `header.*`    → fields consumed by `HeaderConfig`
  *
  * Pair with `<JsonSchemaForm density="compact" schema={...} uiSchema={...}>`
- * from `@djangocfg/ui-tools` to get a ready-made sidebar configurator. The
+ * from `@djangocfg/widget-forms` to get a ready-made sidebar configurator. The
  * `defaultPrivateLayoutConfiguratorData` is a safe initial value that already
  * matches the schema (no nullable fields, no missing keys).
  *

package/src/layouts/AppLayout/BaseApp.tsx

@@ -15,7 +15,6 @@
  * - AuthProvider (authentication context)
  * - AuthDialog (global auth prompt dialog)
  * - AnalyticsProvider (Google Analytics, optional)
- * - CentrifugoProvider (WebSocket real-time, optional)
  * - PwaProvider (PWA installation, optional)
  * - ErrorTrackingProvider (error handling)
  * - ErrorBoundary (React error boundary, enabled by default)
@@ -49,9 +48,7 @@ import { SWRConfig } from 'swr';
 
 import { Devtools, devtools } from '@djangocfg/devtools';
 import { errorDetailToDevtoolsEvent } from '../../components/errors/ErrorsTracker';
-import { CfgCentrifugo } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
-import { CentrifugoProvider } from '@djangocfg/centrifugo';
 import { UiProviders } from '@djangocfg/ui-core/providers';
 import { NextRouterAdapter, NextLinkProvider } from '@djangocfg/ui-core/adapters/nextjs';
 import { NextIntlLinkBridge } from './NextIntlLinkBridge';
@@ -119,7 +116,7 @@ function AppErrorFallback({
  * BaseApp - Core providers wrapper for any React/Next.js app
  *
  * Includes: ThemeProvider, TooltipProvider, SWRConfig, AuthProvider, AnalyticsProvider,
- * CentrifugoProvider, ErrorTrackingProvider, ErrorBoundary (optional)
+ * ErrorTrackingProvider, ErrorBoundary (optional)
  * Also renders global Toaster and PageProgress components
  */
 export function BaseApp({
@@ -128,7 +125,6 @@ export function BaseApp({
   theme,
   auth,
   analytics,
-  centrifugo,
   errorTracking,
   errorBoundary,
   swr,
@@ -142,10 +138,6 @@ export function BaseApp({
   // ErrorBoundary is enabled by default
   const enableErrorBoundary = errorBoundary?.enabled !== false;
 
-  // Centrifugo configuration
-  const centrifugoUrl = centrifugo?.url || process.env.NEXT_PUBLIC_CENTRIFUGO_URL;
-  const centrifugoEnabled = centrifugo?.enabled !== false;
-
   // Devtools — capture + ingest + debug panel in one component.
   // Project prop is the default; the devtools prop overrides field by field.
   const devtoolsProps = {
@@ -164,7 +156,7 @@ export function BaseApp({
        * (useNavigate, useQueryState, etc.) to next/navigation so
        * server components, route loaders, and prefetch fire
        * correctly. Placed near the top so every provider below
-       * (Auth, Centrifugo, anything that may navigate) gets it.
+       * (Auth, anything that may navigate) gets it.
        */}
       <NextRouterAdapter>
       <NextLinkProvider>
@@ -192,41 +184,31 @@ export function BaseApp({
         >
           <AuthProvider config={authEnabled ? authConfig : undefined} enabled={authEnabled}>
             <AnalyticsProvider trackingId={analytics?.googleTrackingId}>
-              <CentrifugoProvider
-                enabled={centrifugoEnabled}
-                autoConnect={centrifugoEnabled && centrifugo?.autoConnect}
-                url={centrifugoUrl}
-                onTokenRefresh={async () => {
-                  const result = await CfgCentrifugo.cfgCentrifugoAuthTokenRetrieve({ throwOnError: true });
-                  return result.data.token;
-                }}
+              <ErrorTrackingProvider
+                validation={errorTracking?.validation}
+                cors={errorTracking?.cors}
+                network={errorTracking?.network}
+                onError={errorTracking?.onError}
+                onMonitorCapture={(d) => devtools.capture(errorDetailToDevtoolsEvent(d))}
               >
-                <ErrorTrackingProvider
-                  validation={errorTracking?.validation}
-                  cors={errorTracking?.cors}
-                  network={errorTracking?.network}
-                  onError={errorTracking?.onError}
-                  onMonitorCapture={(d) => devtools.capture(errorDetailToDevtoolsEvent(d))}
-                >
-                  <Devtools {...devtoolsProps} />
-                  <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)"
-                  />
+                <Devtools {...devtoolsProps} />
+                <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)"
+                />
 
-                  {/* Auth Dialog - only when auth is enabled */}
-                  {authEnabled && <AuthDialog authPath={authConfig?.routes?.auth} />}
-                </ErrorTrackingProvider>
-              </CentrifugoProvider>
+                {/* Auth Dialog - only when auth is enabled */}
+                {authEnabled && <AuthDialog authPath={authConfig?.routes?.auth} />}
+              </ErrorTrackingProvider>
             </AnalyticsProvider>
           </AuthProvider>
         </SWRConfig>

package/src/layouts/AppLayout/README.md

@@ -25,7 +25,7 @@ export default function RootLayout({ children }) {
         theme={{ defaultTheme: 'system', storageKey: 'myapp-theme' }}
         auth={{ apiUrl: process.env.NEXT_PUBLIC_API_URL,
                 routes: { auth: '/auth', defaultCallback: '/private' } }}
-        // analytics / centrifugo / monitor / errorTracking / debug — all optional
+        // analytics / monitor / errorTracking / debug — all optional
       >
         {children}
       </BaseApp>
@@ -78,7 +78,6 @@ interface BaseAppProps {
   theme?: ThemeConfig;         // defaultTheme, storageKey, style preset
   auth?: AuthConfig | false;   // false = no AuthProvider (fully public app)
   analytics?: AnalyticsConfig; // Google Analytics
-  centrifugo?: CentrifugoConfig;
   errorTracking?: ErrorTrackingConfig;
   errorBoundary?: ErrorBoundaryConfig; // enabled by default
   swr?: SWRConfigOptions;

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -104,7 +104,7 @@ export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
  * where a person stopped in the layout, and quietly becomes a no-op when an
  * app intentionally does not mount AnalyticsProvider.
  */
-const AuthFunnelTracker: React.FC = memo(() => {
+const AuthFunnelTracker: React.FC = memo(function AuthFunnelTracker() {
   const { step } = useAuthFormContext();
   const { event, isEnabled } = useAnalytics();
   const lastStep = React.useRef<string | null>(null);
@@ -119,13 +119,13 @@ const AuthFunnelTracker: React.FC = memo(() => {
 });
 
 /** Renders custom children only on the identifier step — hides them on otp / 2fa / etc. */
-const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = memo(({ children }) => {
+const AuthHeaderSlot: React.FC<{ children?: React.ReactNode }> = memo(function AuthHeaderSlot({ children }) {
   const { step } = useAuthFormContext();
   if (!children || step !== 'identifier') return null;
   return <>{children}</>;
 });
 
-const AuthContent: React.FC = memo(() => {
+const AuthContent: React.FC = memo(function AuthContent() {
   const { step } = useAuthFormContext();
 
   switch (step) {
@@ -145,7 +145,7 @@ const AuthContent: React.FC = memo(() => {
   }
 });
 
-const AuthSuccessOverlay: React.FC = memo(() => {
+const AuthSuccessOverlay: React.FC = memo(function AuthSuccessOverlay() {
   const { step, logo, redirectUrl } = useAuthFormContext();
 
   if (step !== 'success') {
@@ -162,11 +162,11 @@ interface AuthSuccessInlineProps {
   redirectDelay?: number;
 }
 
-const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(({
+const AuthSuccess: React.FC<AuthSuccessInlineProps> = memo(function AuthSuccess({
   logo,
   redirectUrl,
   redirectDelay = AUTH.REDIRECT_DELAY,
-}) => {
+}) {
   const router = useCfgRouter();
   const { routes } = useAuth();
   const t = useAppT();

package/src/layouts/AuthLayout/components/oauth/OAuthCallback.tsx

@@ -12,7 +12,8 @@ import {
 import { useAuthFormContext } from '../../context';
 
 export interface OAuthCallbackProps {
-  onSuccess?: (user: any, isNewUser: boolean, provider: string) => void;
+  /** `user` is the provider callback's user payload, untyped upstream — narrow it before reading fields. */
+  onSuccess?: (user: unknown, isNewUser: boolean, provider: string) => void;
   onError?: (error: string) => void;
   redirectUrl?: string;
 }

package/src/layouts/AuthLayout/context.tsx

@@ -67,7 +67,6 @@ export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
       marketingConsentConfig: marketingConsent,
       rememberMeConfig: rememberMe,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       authForm,
       sourceUrl,

package/src/layouts/AuthLayout/types.ts

@@ -20,7 +20,7 @@ export type {
 
 import type { AuthFormReturn } from '@djangocfg/api/auth';
 
-import type { AuthBackgroundConfig, AuthShellVariant, AuthShellContextValue } from './shells';
+import type { AuthBackgroundConfig, AuthShellVariant } from './shells';
 
 // Re-export shell types so consumers can import everything from ./types
 export type { AuthBackgroundConfig, AuthShellVariant, AuthShellContextValue } from './shells';
@@ -114,8 +114,11 @@ export interface AuthLayoutProps extends AuthLayoutConfig {
   onIdentifierSuccess?: (identifier: string) => void;
   /** Callback when OTP verification succeeds */
   onOTPSuccess?: () => void;
-  /** Callback when OAuth succeeds */
-  onOAuthSuccess?: (user: any, isNewUser: boolean, provider: string) => void;
+  /**
+   * Callback when OAuth succeeds. `user` is the provider callback's user
+   * payload, untyped upstream — narrow it before reading fields.
+   */
+  onOAuthSuccess?: (user: unknown, isNewUser: boolean, provider: string) => void;
   /** Callback on any error */
   onError?: (message: string) => void;
 }

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -8,22 +8,17 @@
 
 'use client';
 
-import React, { ReactNode } from 'react';
+import React from 'react';
 
 import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-core/components';
 
-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,
-  PrivateLayoutProps,
-  SidebarConfig,
-} from './types';
+import type { PrivateLayoutProps } from './types';
 
 export type {
   SidebarItem,

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

@@ -219,7 +219,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   // 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 dropdownSide = 'top' as const;
   const avatarClass = cn(
     'h-9 w-9 shrink-0 border border-transparent transition-colors',
     'group-hover:border-sidebar-border/70',

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

@@ -17,6 +17,8 @@ import { usePrivateLayoutContext } from '../context';
 import { useShellVisualState } from '../hooks';
 import { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
 
+const HEADER_ROW_CLASS = 'flex items-center gap-2 mb-2';
+
 function SidebarBrandRaw() {
   const { header, homeHref, brandTitle, brandMonogram, isMobile } =
     usePrivateLayoutContext();
@@ -39,14 +41,7 @@ function SidebarBrandRaw() {
 
   const customBrand = header?.brand;
 
-  const headerRowClass = useMemo(
-    () =>
-      cn(
-        'flex items-center gap-2 mb-2',
-        // content.showLabels ? 'px-2' : 'px-1.5',
-      ),
-    [content.showLabels],
-  );
+  const headerRowClass = HEADER_ROW_CLASS;
 
   const expandedHeader = useMemo(
     () => (

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

@@ -15,17 +15,21 @@ import { LucideIcon } from '../../../components';
 
 import type { SidebarFeaturedConfig } from '../types';
 
+// The accent names are the public prop's vocabulary; the status tokens they map
+// to carry the meaning and already define both themes, so no `dark:` pair here.
 const ACCENT_CLASS: Record<NonNullable<SidebarFeaturedConfig['accent']>, string> = {
-  green: 'bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 dark:bg-emerald-400/10 dark:hover:bg-emerald-400/15',
-  blue: 'bg-sky-500/10 text-sky-700 hover:bg-sky-500/15 dark:text-sky-300 dark:bg-sky-400/10 dark:hover:bg-sky-400/15',
-  amber: 'bg-amber-500/10 text-amber-800 hover:bg-amber-500/15 dark:text-amber-300 dark:bg-amber-400/10 dark:hover:bg-amber-400/15',
+  green: 'bg-success/10 text-success-foreground hover:bg-success/15',
+  blue: 'bg-info/10 text-info-foreground hover:bg-info/15',
+  amber: 'bg-warning/10 text-warning-foreground hover:bg-warning/15',
   primary: 'bg-primary/10 text-primary hover:bg-primary/15',
 };
 
+// Solid fill, so the text is the on-fill contrast color — `*-foreground` is the
+// tint for the soft surface above and fails contrast on the fill.
 const BADGE_ACCENT_CLASS: Record<NonNullable<SidebarFeaturedConfig['accent']>, string> = {
-  green: 'bg-emerald-500 text-white dark:bg-emerald-400 dark:text-emerald-950',
-  blue: 'bg-sky-500 text-white dark:bg-sky-400 dark:text-sky-950',
-  amber: 'bg-amber-500 text-white dark:bg-amber-400 dark:text-amber-950',
+  green: 'bg-success text-on-success',
+  blue: 'bg-info text-on-info',
+  amber: 'bg-warning text-on-warning',
   primary: 'bg-primary text-primary-foreground',
 };
 

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

@@ -25,6 +25,7 @@ import { usePrivateLayoutContext } from '../context';
 import { useShellVisualState } from '../hooks';
 import type { SidebarGroupConfig } from '../types';
 import { SidebarNavItem } from './SidebarNavItem';
+import { shallowEqualBy } from '../../../utils/shallowEqualBy';
 
 interface SidebarNavGroupProps {
   group: SidebarGroupConfig;
@@ -164,18 +165,17 @@ function groupShallowEqual(a: SidebarGroupConfig, b: SidebarGroupConfig): boolea
     a.icon === b.icon &&
     a.hideItemIcons === b.hideItemIcons &&
     a.dynamic === b.dynamic &&
-    a.items.length === b.items.length &&
-    a.items.every((ai, i) => {
-      const bi = b.items[i];
-      return (
+    shallowEqualBy(
+      a.items,
+      b.items,
+      (ai, bi) =>
         ai.href === bi.href &&
         ai.label === bi.label &&
         ai.icon === bi.icon &&
         ai.badge === bi.badge &&
         ai.badgeVariant === bi.badgeVariant &&
-        ai.tooltip === bi.tooltip
-      );
-    })
+        ai.tooltip === bi.tooltip,
+    )
   );
 }
 

package/src/layouts/PublicLayout/components/UserMenu.tsx

@@ -156,7 +156,6 @@ export function UserMenu({
 
   // Authenticated user
   const displayName = user.display_username || user.email || 'User';
-  const userInitial = displayName.charAt(0).toUpperCase();
   const userAvatar = user.avatar || '';
 
   if (variant === 'mobile') {

package/src/layouts/PublicLayout/footers/DefaultFooter/DefaultFooter.tsx

@@ -6,7 +6,7 @@
 
 'use client';
 
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { Laptop, Moon, Sun } from 'lucide-react';
 
 import { Button } from '@djangocfg/ui-core/components';

package/src/layouts/PublicLayout/hooks/useResponsiveOverflow.ts

@@ -58,17 +58,18 @@ export function useResponsiveOverflow({
     const available = container.clientWidth;
     if (available <= 0) return;
 
-    const widths: number[] = [];
-    for (let i = 0; i < total; i++) {
+    // Built with `from` rather than an index loop so `widths` and `total` cannot
+    // disagree on length — the two reads below then need no bounds check.
+    const widths = Array.from({ length: total }, (_, i) => {
       const el = itemElsRef.current[i];
-      widths.push(el ? Math.ceil(el.getBoundingClientRect().width) : 0);
-    }
+      return el ? Math.ceil(el.getBoundingClientRect().width) : 0;
+    });
 
     // Try to fit all first.
-    let usedAll = 0;
-    for (let i = 0; i < total; i++) {
-      usedAll += widths[i] + (i > 0 ? gap : 0);
-    }
+    const usedAll = widths.reduce(
+      (sum, width, i) => sum + width + (i > 0 ? gap : 0),
+      0,
+    );
     if (usedAll <= available) {
       setVisibleCount(total);
       setMeasured(true);
@@ -79,8 +80,10 @@ export function useResponsiveOverflow({
     const budget = available - moreWidth - gap;
     let used = 0;
     let fit = 0;
-    for (let i = 0; i < total; i++) {
-      const next = used + widths[i] + (i > 0 ? gap : 0);
+    // Iterating values, not indices: this loop breaks early, so `reduce` does
+    // not fit, and `entries()` still keeps each width tied to its position.
+    for (const [i, width] of widths.entries()) {
+      const next = used + width + (i > 0 ? gap : 0);
       if (next > budget) break;
       used = next;
       fit = i + 1;

package/src/layouts/PublicLayout/primitives/NavActions.tsx

@@ -10,6 +10,7 @@ import { UserMenu } from '../components/UserMenu';
 import type { UserMenuConfig } from '../../types';
 
 import { NavActionItem, type NavAction } from './NavActionItem';
+import { shallowEqualBy } from '../../../utils/shallowEqualBy';
 
 interface NavActionsProps {
   userMenu?: UserMenuConfig;
@@ -133,18 +134,15 @@ function NavActionsRaw({
  * skip on reference churn from parent re-renders.
  */
 function actionsEqual(a?: NavAction[], b?: NavAction[]): boolean {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  if (a.length !== b.length) return false;
-  return a.every((ai, i) => {
-    const bi = b[i];
-    return (
+  return shallowEqualBy(
+    a,
+    b,
+    (ai, bi) =>
       ai.label === bi.label &&
       ai.href === bi.href &&
       ai.variant === bi.variant &&
-      ai.external === bi.external
-    );
-  });
+      ai.external === bi.external,
+  );
 }
 
 /**

package/src/layouts/PublicLayout/primitives/NavDesktopItems.tsx

@@ -8,6 +8,7 @@ import { Button, Link } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import type { NavigationItem } from '../../types';
+import { navItemsShallowEqual } from '../../../utils/navItemsShallowEqual';
 import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
 import { useResponsiveOverflow } from '../hooks/useResponsiveOverflow';
 import type { PublicDesktopDropdownRenderer } from '../navbarTypes';
@@ -317,28 +318,6 @@ function NavDesktopItemsRaw({
   );
 }
 
-/**
- * Shallow equality for NavigationItem arrays. Compares href, label, external
- * and one-level-deep sub-items so that nav label/badge changes re-render,
- * but object-reference churn from parent is ignored.
- */
-function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  return a.every((ai, i) => {
-    const bi = b[i];
-    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
-    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
-    if (ai.items) {
-      return ai.items.every((sub, j) => {
-        const bsub = bi.items![j];
-        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
-      });
-    }
-    return true;
-  });
-}
-
 /**
  * Memoised desktop navigation row. Re-renders only when:
  * - the items array content changes (via navItemsShallowEqual),

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -40,11 +40,15 @@ export interface MobileDrawerShellProps {
   };
 }
 
+// Module-level so the "no navigation" case keeps one identity: a fresh `[]` per
+// render would make `mobileNavigation`'s memo recompute on every render.
+const NO_NAVIGATION: NavigationItem[] = [];
+
 export function MobileDrawerShell(props: MobileDrawerShellProps) {
   const context = usePublicLayoutOptional();
   const mobileMenuOpen = props.isOpen ?? context?.mobileMenuOpen ?? false;
   const closeMobileMenu = props.onClose ?? context?.closeMobileMenu ?? (() => {});
-  const navigation = props.navigation ?? [];
+  const navigation = props.navigation ?? NO_NAVIGATION;
   const userMenu = props.userMenu;
 
   const { isAuthenticated, user, routes } = useAuth();

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -29,6 +29,7 @@ import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { usePathnameWithoutLocale } from '../../../hooks';
+import { navItemsShallowEqual } from '../../../utils/navItemsShallowEqual';
 import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
 import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 import { usePublicLayoutOptional } from '../context';
@@ -259,10 +260,13 @@ function NavbarShellRaw(props: NavbarShellProps) {
   // this being present — same contract `NavControls` applies internally.
   const i18n = useLayoutI18nOptional();
 
-  // Close dropdowns when switching to mobile
+  // Close dropdowns when switching to mobile. Depends on `closeDropdown` alone,
+  // not on `dropdown`: the object changes identity whenever a menu opens, and
+  // depending on it would close the dropdown the moment it is opened.
+  const { closeDropdown } = dropdown;
   useEffect(() => {
-    if (isTabletOrBelow) dropdown.closeDropdown();
-  }, [isTabletOrBelow, dropdown.closeDropdown]);
+    if (isTabletOrBelow) closeDropdown();
+  }, [isTabletOrBelow, closeDropdown]);
 
   // Sync navbar surface into context
   const setNavbarSurface = context?.setNavbarSurface;
@@ -417,28 +421,6 @@ function NavbarShellRaw(props: NavbarShellProps) {
   );
 }
 
-/**
- * Shallow equality for NavigationItem arrays. Compares href, label, external
- * and one-level-deep sub-items so that nav label/badge changes re-render,
- * but object-reference churn from parent is ignored.
- */
-function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  return a.every((ai, i) => {
-    const bi = b[i];
-    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
-    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
-    if (ai.items) {
-      return ai.items.every((sub, j) => {
-        const bsub = bi.items![j];
-        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
-      });
-    }
-    return true;
-  });
-}
-
 /**
  * Memoised navbar orchestrator. Re-renders only when any config prop changes
  * (variant, position, nav items, actions, slots, etc.). The heavy inner JSX

package/src/layouts/types/index.ts

@@ -14,7 +14,6 @@ export type {
   ThemeConfig,
   ThemeStylePresetId,
   SWRConfigOptions,
-  CentrifugoConfig,
 } from './providers.types';
 
 // External provider configs (re-export for convenience)

package/src/layouts/types/layout.types.ts

@@ -21,7 +21,7 @@ import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/
 export type NextIntlRouting = object & { __nextIntlRouting?: never };
 
 // Import local provider configs
-import type { ThemeConfig, SWRConfigOptions, CentrifugoConfig } from './providers.types';
+import type { ThemeConfig, SWRConfigOptions } from './providers.types';
 import type { DevtoolsProps } from '@djangocfg/devtools';
 
 // ============================================================================
@@ -49,9 +49,6 @@ export interface BaseLayoutProps {
   /** Analytics configuration (from snippets/Analytics) */
   analytics?: AnalyticsConfig;
 
-  /** Centrifugo configuration */
-  centrifugo?: CentrifugoConfig;
-
   /** Error tracking configuration (from components/errors) */
   errorTracking?: ErrorTrackingConfig;