@djangocfg/layouts 2.1.303 → 2.1.307

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.303",
+  "version": "2.1.307",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.303",
-    "@djangocfg/centrifugo": "^2.1.303",
-    "@djangocfg/debuger": "^2.1.303",
-    "@djangocfg/i18n": "^2.1.303",
-    "@djangocfg/monitor": "^2.1.303",
-    "@djangocfg/ui-core": "^2.1.303",
-    "@djangocfg/ui-nextjs": "^2.1.303",
-    "@djangocfg/ui-tools": "^2.1.303",
+    "@djangocfg/api": "^2.1.307",
+    "@djangocfg/centrifugo": "^2.1.307",
+    "@djangocfg/debuger": "^2.1.307",
+    "@djangocfg/i18n": "^2.1.307",
+    "@djangocfg/monitor": "^2.1.307",
+    "@djangocfg/ui-core": "^2.1.307",
+    "@djangocfg/ui-nextjs": "^2.1.307",
+    "@djangocfg/ui-tools": "^2.1.307",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -110,15 +110,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.303",
-    "@djangocfg/centrifugo": "^2.1.303",
-    "@djangocfg/debuger": "^2.1.303",
-    "@djangocfg/i18n": "^2.1.303",
-    "@djangocfg/monitor": "^2.1.303",
-    "@djangocfg/typescript-config": "^2.1.303",
-    "@djangocfg/ui-core": "^2.1.303",
-    "@djangocfg/ui-nextjs": "^2.1.303",
-    "@djangocfg/ui-tools": "^2.1.303",
+    "@djangocfg/api": "^2.1.307",
+    "@djangocfg/centrifugo": "^2.1.307",
+    "@djangocfg/debuger": "^2.1.307",
+    "@djangocfg/i18n": "^2.1.307",
+    "@djangocfg/monitor": "^2.1.307",
+    "@djangocfg/typescript-config": "^2.1.307",
+    "@djangocfg/ui-core": "^2.1.307",
+    "@djangocfg/ui-nextjs": "^2.1.307",
+    "@djangocfg/ui-tools": "^2.1.307",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -38,6 +38,7 @@ import { ClientOnly, Suspense } from '../../components/core';
 import { usePathnameWithoutLocale } from '../../hooks';
 import { matchesPath } from '../../utils/pathMatcher';
 import { BaseApp } from './BaseApp';
+import { useLayoutI18nOptional } from './LayoutI18nProvider';
 import { ForcedThemeProvider, ThemeOverride, resolveForcedTheme } from '@djangocfg/ui-nextjs/theme';
 
 import type {
@@ -159,10 +160,12 @@ function determineLayoutMode(
 /**
  * Props passed to every layout component (`public` / `private` / `admin`).
  * Use `publicChrome` to pass defaults for `FloatingNavbar` / `DefaultFooter` from `AppLayout`.
+ *
+ * Locale plumbing is no longer threaded as a prop — layouts read it from
+ * `useLayoutI18nOptional()` (mounted in `BaseApp`).
  */
 export interface AppLayoutLayoutComponentProps {
   children: ReactNode;
-  i18n?: I18nLayoutConfig;
   publicChrome?: AppLayoutPublicChrome;
 }
 
@@ -298,7 +301,6 @@ interface AppLayoutContentProps {
   adminLayout?: LayoutConfig;
   noLayoutPaths?: string | string[];
   authPath?: string;
-  i18n?: I18nLayoutConfig;
   publicChrome?: AppLayoutPublicChrome;
   themeOverrides?: ThemeOverrideRule[];
 }
@@ -316,12 +318,13 @@ function AppLayoutContent({
   adminLayout,
   noLayoutPaths,
   authPath = '/auth',
-  i18n,
   publicChrome,
   themeOverrides,
 }: AppLayoutContentProps) {
-  // Use pathname without locale prefix for route matching.
-  // Pass locale from i18n so strip is exact — avoids regex misfiring on /ui, /ko, etc.
+  // Use pathname without locale prefix for route matching. The current
+  // locale comes from the LayoutI18nProvider mounted by BaseApp — passing
+  // it explicitly avoids the regex misfiring on `/ui`, `/ko`, etc.
+  const i18n = useLayoutI18nOptional();
   const pathname = usePathnameWithoutLocale(i18n?.locale);
 
   // Merge authPath into noLayoutPaths — auth pages are always fullscreen
@@ -361,7 +364,7 @@ function AppLayoutContent({
           return (
             <ClientOnly>
               <Suspense>
-                <privateLayout.component i18n={i18n} publicChrome={publicChrome}>
+                <privateLayout.component publicChrome={publicChrome}>
                   {children}
                 </privateLayout.component>
               </Suspense>
@@ -374,7 +377,7 @@ function AppLayoutContent({
         return (
           <ClientOnly>
             <Suspense>
-              <adminLayout.component i18n={i18n} publicChrome={publicChrome}>
+              <adminLayout.component publicChrome={publicChrome}>
                 {children}
               </adminLayout.component>
             </Suspense>
@@ -385,7 +388,7 @@ function AppLayoutContent({
         if (!privateLayout) {
           if (publicLayout) {
             return (
-              <publicLayout.component i18n={i18n} publicChrome={publicChrome}>
+              <publicLayout.component publicChrome={publicChrome}>
                 {children}
               </publicLayout.component>
             );
@@ -395,7 +398,7 @@ function AppLayoutContent({
         return (
           <ClientOnly>
             <Suspense>
-              <privateLayout.component i18n={i18n} publicChrome={publicChrome}>
+              <privateLayout.component publicChrome={publicChrome}>
                 {children}
               </privateLayout.component>
             </Suspense>
@@ -409,7 +412,7 @@ function AppLayoutContent({
           return children;
         }
         return (
-          <publicLayout.component i18n={i18n} publicChrome={publicChrome}>
+          <publicLayout.component publicChrome={publicChrome}>
             {children}
           </publicLayout.component>
         );
@@ -480,6 +483,7 @@ export function AppLayout(props: AppLayoutProps) {
       pwaInstall={pwaInstall}
       monitor={monitor}
       debug={debug}
+      i18n={i18n}
     >
       <AppLayoutContent
         children={children}
@@ -488,7 +492,6 @@ export function AppLayout(props: AppLayoutProps) {
         adminLayout={adminLayout}
         noLayoutPaths={noLayoutPaths}
         authPath={authPath}
-        i18n={i18n}
         publicChrome={publicChrome}
         themeOverrides={themeOverrides}
       />

package/src/layouts/AppLayout/BaseApp.tsx

@@ -58,6 +58,7 @@ 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';
 
 // Lazy load DebugButton from @djangocfg/debuger
 const DebugButton = dynamic(
@@ -89,6 +90,7 @@ export function BaseApp({
   pwaInstall,
   monitor,
   debug,
+  i18n,
 }: BaseAppProps) {
   // ErrorBoundary is enabled by default
   const enableErrorBoundary = errorBoundary?.enabled !== false;
@@ -156,7 +158,7 @@ export function BaseApp({
                     onMonitorCapture={(d) => FrontendMonitor.capture(errorDetailToMonitorEvent(d))}
                   >
                     <MonitorProvider {...monitorConfig} />
-                    {children}
+                    <LayoutI18nProvider value={i18n}>{children}</LayoutI18nProvider>
                     <NextTopLoader
                       color="hsl(var(--primary))"
                       height={3}

package/src/layouts/AppLayout/LayoutI18nProvider.tsx

@@ -0,0 +1,59 @@
+/**
+ * LayoutI18nProvider — single source of truth for locale plumbing inside layouts.
+ *
+ * Mounted by `BaseApp` when `i18n` is passed. Every locale-aware component
+ * inside layouts (footer, navbar controls, mobile drawer, private sidebar
+ * account, UserMenu, LocaleSwitcher) reads from here instead of receiving
+ * `i18n` as a prop.
+ *
+ * Components that may render outside the provider (e.g. raw shells used in
+ * playground previews) should call `useLayoutI18nOptional()` and gracefully
+ * hide locale-related UI when it returns `null`.
+ */
+
+'use client';
+
+import * as React from 'react';
+
+import type { I18nLayoutConfig } from '../types/layout.types';
+
+const LayoutI18nContext = React.createContext<I18nLayoutConfig | null>(null);
+
+export interface LayoutI18nProviderProps {
+  value: I18nLayoutConfig | null | undefined;
+  children: React.ReactNode;
+}
+
+/**
+ * Provider — mount once at the app root (handled automatically by `BaseApp`).
+ * Passing `null`/`undefined` is fine: consumers fall back to "no locale switcher".
+ */
+export function LayoutI18nProvider({ value, children }: LayoutI18nProviderProps) {
+  // `null` keeps the context discriminator simple — `useLayoutI18nOptional`
+  // returns `null` whether the provider is missing or `value` is empty.
+  const stable = value ?? null;
+  return <LayoutI18nContext.Provider value={stable}>{children}</LayoutI18nContext.Provider>;
+}
+
+/**
+ * Throws when used outside the provider. Use for components that strictly
+ * require locale plumbing (the locale picker dialog, for instance).
+ */
+export function useLayoutI18n(): I18nLayoutConfig {
+  const ctx = React.useContext(LayoutI18nContext);
+  if (!ctx) {
+    throw new Error(
+      'useLayoutI18n must be used inside <LayoutI18nProvider> — pass `i18n` to <BaseApp> / <AppLayout>.',
+    );
+  }
+  return ctx;
+}
+
+/**
+ * Optional accessor — returns `null` outside the provider or when no `i18n`
+ * was configured. Use for opt-in mounts (footer locale switcher, navbar
+ * locale dropdown) that should silently disappear when locale support is off.
+ */
+export function useLayoutI18nOptional(): I18nLayoutConfig | null {
+  return React.useContext(LayoutI18nContext);
+}

package/src/layouts/AppLayout/index.ts

@@ -20,6 +20,13 @@ export { mergeAppLayoutPublicChrome } from './AppLayout';
 export { BaseApp } from './BaseApp';
 export type { BaseAppProps } from './BaseApp';
 
+export {
+  LayoutI18nProvider,
+  useLayoutI18n,
+  useLayoutI18nOptional,
+} from './LayoutI18nProvider';
+export type { LayoutI18nProviderProps } from './LayoutI18nProvider';
+
 // Re-export theme-override primitives so consumers can import both the
 // AppLayout config surface and the rule/theme types from one place.
 export {

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -16,7 +16,7 @@ import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-nextjs/components';
 
 import type { AppLayoutPublicChrome } from '../AppLayout/AppLayout';
-import type { I18nLayoutConfig, LayoutVisualConfig } from '../types';
+import type { LayoutVisualConfig } from '../types';
 import { UserMenuConfig } from '../types';
 import { PrivateContent, PrivateSidebar } from './components';
 
@@ -101,8 +101,6 @@ export interface PrivateLayoutProps {
   pathname?: string;
   /** Content padding */
   contentPadding?: 'none' | 'default';
-  /** i18n configuration for locale switching */
-  i18n?: I18nLayoutConfig;
   /**
    * Visual style of the shell. Defaults to `'boxed'` (inset rounded card on a
    * sidebar-coloured canvas). Pass `{ variant: 'full-bleed' }` for the legacy
@@ -124,7 +122,6 @@ export function PrivateLayout({
   header,
   pathname,
   contentPadding = 'default',
-  i18n,
   visual,
   requireAuth = true,
 }: PrivateLayoutProps) {
@@ -167,7 +164,6 @@ export function PrivateLayout({
         <PrivateSidebar
           sidebar={sidebar}
           header={header}
-          i18n={i18n}
           pathname={pathname}
           variant={sidebarVariant}
         />

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

@@ -29,7 +29,6 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { PrivateSidebarAccount } from '../../_components/PrivateSidebarAccount';
 import { LucideIcon } from '../../../components';
 
-import type { I18nLayoutConfig } from '../../types';
 import type { HeaderConfig, SidebarItem, SidebarConfig } from '../PrivateLayout';
 
 /** Few items → roomier rows; many items → tighter. Same breakpoints for demo, CarAPIS, etc. */
@@ -99,7 +98,6 @@ const RAIL_NAV = DENSITY.default;
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
   header?: HeaderConfig;
-  i18n?: I18nLayoutConfig;
   pathname?: string;
   /**
    * shadcn-sidebar `variant`. Used to trigger the inset/boxed visual:
@@ -109,7 +107,7 @@ interface PrivateSidebarProps {
   variant?: 'sidebar' | 'inset';
 }
 
-export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp, variant = 'sidebar' }: PrivateSidebarProps) {
+export function PrivateSidebar({ sidebar, header, pathname: pathnameProp, variant = 'sidebar' }: PrivateSidebarProps) {
   const pathnameFromNext = useNextPathname();
   const pathname = pathnameProp ?? pathnameFromNext;
   const { state, isMobile, setOpen, setOpenMobile } = useSidebar();
@@ -324,7 +322,7 @@ export function PrivateSidebar({ sidebar, header, i18n, pathname: pathnameProp,
 
       <SidebarFooter className="p-2">
         {footerExtra}
-        <PrivateSidebarAccount header={header} i18n={i18n} />
+        <PrivateSidebarAccount header={header} />
       </SidebarFooter>
     </Sidebar>
   );

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

@@ -15,6 +15,7 @@ import { useForcedTheme, useThemeContext } from '@djangocfg/ui-nextjs/theme';
 import { Link } from '@djangocfg/ui-core/components';
 
 import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
+import { useLayoutI18nOptional } from '../../../AppLayout/LayoutI18nProvider';
 import { FooterMenuSections } from './FooterMenuSections';
 import { FooterProjectInfo } from './FooterProjectInfo';
 
@@ -117,7 +118,7 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
   const socialLinks = config.social;
   const copyrightProp = config.meta?.copyright;
   const creditsProp = config.meta?.credits;
-  const i18n = config.i18n;
+  const i18n = useLayoutI18nOptional();
   const showThemeSwitcher = config.controls?.showThemeSwitcher !== false;
   const showLocaleSwitcher =
     config.controls?.showLocaleSwitcher !== false && Boolean(i18n);
@@ -260,12 +261,9 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
           {showFooterControlsRow && (
             <div className="mt-5 flex items-center justify-center gap-2 border-t border-border/60 pt-4">
               {showThemeSwitcher && <ThemeModeControl />}
-              {showLocaleSwitcher && i18n && (
+              {showLocaleSwitcher && (
                 <LocaleSwitcher
-                  locale={i18n.locale}
-                  locales={i18n.locales}
-                  onChange={i18n.onLocaleChange}
-                  variant="outline"
+                  buttonVariant="outline"
                   size="default"
                   className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
                 />
@@ -348,12 +346,9 @@ export function DefaultFooter({ config }: DefaultFooterProps) {
               <div className="flex items-center justify-center gap-2 lg:justify-self-end">
                 {slots?.bottomEnd}
                 {showThemeSwitcher && <ThemeModeControl />}
-                {showLocaleSwitcher && i18n && (
+                {showLocaleSwitcher && (
                   <LocaleSwitcher
-                    locale={i18n.locale}
-                    locales={i18n.locales}
-                    onChange={i18n.onLocaleChange}
-                    variant="outline"
+                    buttonVariant="outline"
                     size="default"
                     className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
                   />

package/src/layouts/PublicLayout/footers/DefaultFooter/types.ts

@@ -5,7 +5,7 @@
 import type { LucideIcon } from 'lucide-react';
 import type { ReactNode } from 'react';
 
-import type { FooterLink, FooterMenuSection, FooterSocialLinks, I18nLayoutConfig } from '../../../types';
+import type { FooterLink, FooterMenuSection, FooterSocialLinks } from '../../../types';
 
 export type { FooterLink, FooterMenuSection, FooterSocialLinks };
 
@@ -23,6 +23,15 @@ export interface DefaultFooterConfig {
       icon: LucideIcon;
       text: string;
     };
+    /**
+     * Logo node displayed in the locale-switcher dialog header.
+     * Falls back to a generic Globe glyph when omitted.
+     */
+    logo?: ReactNode;
+    /**
+     * Project name displayed beside the logo in the locale-switcher dialog.
+     */
+    name?: string;
   };
   menus?: {
     sections?: FooterMenuSection[];
@@ -38,16 +47,16 @@ export interface DefaultFooterConfig {
     };
   };
   social?: FooterSocialLinks;
-  i18n?: I18nLayoutConfig;
   /**
-   * Full (`variant: 'full'`) footer only — bottom row with theme and/or locale controls.
-   * - Locale: still requires `i18n`; omit `i18n` to hide the language switcher, or set
-   *   `showLocaleSwitcher: false` when you pass `i18n` but want the switcher elsewhere.
+   * Full (`variant: 'full'`) footer only — bottom row with theme and/or locale
+   * controls. The locale switcher reads its plumbing from `LayoutI18nProvider`
+   * (mounted by `BaseApp`); when the provider is empty, the switcher hides
+   * itself regardless of this flag.
    */
   controls?: {
     /** Light / system / dark toggle. @default true */
     showThemeSwitcher?: boolean;
-    /** Requires `i18n`. @default true */
+    /** @default true */
     showLocaleSwitcher?: boolean;
   };
   /**

package/src/layouts/PublicLayout/navbars/FloatingNavbar/FloatingNavbar.tsx

@@ -21,7 +21,7 @@ import type {
   PublicNavbarShellConfig,
   PublicNavLayout,
 } from '../../navbarTypes';
-import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../../types';
+import type { NavigationItem, UserMenuConfig } from '../../../types';
 
 import { FloatingMobileDrawer } from './FloatingMobileDrawer';
 
@@ -65,8 +65,6 @@ export interface FloatingNavbarConfig {
     /** Locale dropdown. Requires `i18n`. @default false */
     showLocaleSwitcher?: boolean;
   };
-  /** i18n config (current locale + locales + onLocaleChange). */
-  i18n?: I18nLayoutConfig;
 }
 
 export interface FloatingNavbarProps {
@@ -113,7 +111,6 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
         actionsLeadingSlot={config.actionsLeadingSlot}
         actionsTrailingSlot={config.actionsTrailingSlot}
         controls={config.controls}
-        i18n={config.i18n}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
         shapeForState={({ scrolled, transparent }) =>
@@ -131,7 +128,6 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
         containerClassName={containerClassName}
         rounding={rounding}
         controls={config.controls}
-        i18n={config.i18n}
       />
     </>
   );

package/src/layouts/PublicLayout/navbars/FlushNavbar/FlushNavbar.tsx

@@ -20,7 +20,7 @@ import type {
   PublicNavbarShellConfig,
   PublicNavLayout,
 } from '../../navbarTypes';
-import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../../types';
+import type { NavigationItem, UserMenuConfig } from '../../../types';
 
 import { FlushMobileDrawer } from './FlushMobileDrawer';
 
@@ -64,8 +64,6 @@ export interface FlushNavbarConfig {
     /** Locale dropdown. Requires `i18n`. @default false */
     showLocaleSwitcher?: boolean;
   };
-  /** i18n config (current locale + locales + onLocaleChange). */
-  i18n?: I18nLayoutConfig;
 }
 
 export interface FlushNavbarProps {
@@ -109,7 +107,6 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
         actionsLeadingSlot={config.actionsLeadingSlot}
         actionsTrailingSlot={config.actionsTrailingSlot}
         controls={config.controls}
-        i18n={config.i18n}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
         shapeForState={({ scrolled, transparent }) =>
@@ -126,7 +123,6 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
         userMenu={config.userMenu}
         containerClassName={containerClassName}
         controls={config.controls}
-        i18n={config.i18n}
       />
     </>
   );

package/src/layouts/PublicLayout/navbars/MinimalNavbar/MinimalNavbar.tsx

@@ -26,7 +26,7 @@ import type {
   PublicNavbarPosition,
   PublicNavLayout,
 } from '../../navbarTypes';
-import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../../types';
+import type { NavigationItem, UserMenuConfig } from '../../../types';
 
 import { MinimalMobileDrawer } from './MinimalMobileDrawer';
 
@@ -81,8 +81,6 @@ export interface MinimalNavbarConfig {
     /** Locale dropdown. Requires `i18n`. @default false */
     showLocaleSwitcher?: boolean;
   };
-  /** i18n config (current locale + locales + onLocaleChange). */
-  i18n?: I18nLayoutConfig;
 }
 
 export interface MinimalNavbarProps {
@@ -115,7 +113,6 @@ function MinimalActions({
           variant="desktop"
           groups={ctx.userMenu?.groups}
           authPath={ctx.userMenu?.authPath}
-          i18n={ctx.userMenu?.i18n}
         />
       </div>
 
@@ -168,7 +165,6 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
         transparent={transparent}
         transparentThreshold={config.transparentThreshold}
         controls={config.controls}
-        i18n={config.i18n}
         outerClassName={outerClassName}
         shapeClassName={shapeClassName}
         innerPadding={containerClassName}
@@ -187,7 +183,6 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
         userMenu={config.userMenu}
         containerClassName={containerClassName}
         controls={config.controls}
-        i18n={config.i18n}
       />
     </>
   );

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

@@ -7,12 +7,10 @@ import { Button } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
-import type { I18nLayoutConfig } from '../../types';
 import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
+import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 
 export interface NavControlsProps {
-  /** Optional i18n config. Required to render the locale switcher. */
-  i18n?: I18nLayoutConfig;
   /** Show the theme (light / system / dark) pill. @default false */
   showThemeSwitcher?: boolean;
   /** Show the locale dropdown. Requires `i18n`. @default false */
@@ -81,12 +79,12 @@ function ThemeModeControl({ size }: { size: 'compact' | 'default' }) {
  * to a navbar config.
  */
 export function NavControls({
-  i18n,
   showThemeSwitcher = false,
   showLocaleSwitcher = false,
   size = 'compact',
   className,
 }: NavControlsProps) {
+  const i18n = useLayoutI18nOptional();
   const renderLocale = showLocaleSwitcher && Boolean(i18n);
   if (!showThemeSwitcher && !renderLocale) return null;
 
@@ -98,12 +96,10 @@ export function NavControls({
   return (
     <div className={cn('inline-flex items-center gap-1.5', className)}>
       {showThemeSwitcher && <ThemeModeControl size={size} />}
-      {renderLocale && i18n && (
+      {renderLocale && (
         <LocaleSwitcher
-          locale={i18n.locale}
-          locales={i18n.locales}
-          onChange={i18n.onLocaleChange}
-          variant="outline"
+          variant="dialog"
+          buttonVariant="outline"
           size={size === 'compact' ? 'sm' : 'default'}
           showTriggerLabel={false}
           className={localeBtnClass}

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

@@ -22,7 +22,7 @@ import { usePublicLayoutOptional } from '../context';
 import { useMobileNavPanel } from '../hooks';
 import { NavControls } from '../primitives/NavControls';
 
-import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../types';
+import type { NavigationItem, UserMenuConfig } from '../../types';
 
 export interface MobileDrawerShellProps {
   isOpen?: boolean;
@@ -38,8 +38,6 @@ export interface MobileDrawerShellProps {
     showThemeSwitcher?: boolean;
     showLocaleSwitcher?: boolean;
   };
-  /** i18n config — required for the locale switcher row. */
-  i18n?: I18nLayoutConfig;
 }
 
 export function MobileDrawerShell(props: MobileDrawerShellProps) {
@@ -81,8 +79,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
   const hasSessionUser = Boolean(isAuthenticated && user);
   const showSignInFooter = !hasSessionUser;
   const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
-  const showLocaleSwitcher =
-    props.controls?.showLocaleSwitcher === true && Boolean(props.i18n);
+  const showLocaleSwitcher = props.controls?.showLocaleSwitcher === true;
   const showControlsRow = showThemeSwitcher || showLocaleSwitcher;
 
   return (
@@ -199,7 +196,6 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
           {showControlsRow && (
             <div className="shrink-0 border-t border-border/50 px-4 py-3 flex items-center justify-center gap-2">
               <NavControls
-                i18n={props.i18n}
                 showThemeSwitcher={showThemeSwitcher}
                 showLocaleSwitcher={showLocaleSwitcher}
                 size="default"

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

@@ -50,8 +50,6 @@ import { NavBrand } from '../primitives/NavBrand';
 import { NavControls } from '../primitives/NavControls';
 import { NavDesktopItems } from '../primitives/NavDesktopItems';
 
-import type { I18nLayoutConfig } from '../../types';
-
 const heightCls: Record<PublicNavbarHeight, string> = {
   sm: 'py-2',
   md: 'py-3.5',
@@ -136,8 +134,6 @@ export interface NavbarShellProps {
   actionsTrailingSlot?: ReactNode;
 
   // ── Theme + locale controls (rendered next to UserMenu on desktop) ────────
-  /** i18n config — enables the locale switcher. Same type as `DefaultFooter`. */
-  i18n?: I18nLayoutConfig;
   /** Toggle individual controls. Locale switcher also requires `i18n`. */
   controls?: {
     /** Light / system / dark pill. @default false */
@@ -267,12 +263,10 @@ export function NavbarShell(props: NavbarShellProps) {
   ) : null;
 
   const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
-  const showLocaleSwitcher =
-    props.controls?.showLocaleSwitcher === true && Boolean(props.i18n);
+  const showLocaleSwitcher = props.controls?.showLocaleSwitcher === true;
   const hasControls = showThemeSwitcher || showLocaleSwitcher;
   const controlsNode = hasControls ? (
     <NavControls
-      i18n={props.i18n}
       showThemeSwitcher={showThemeSwitcher}
       showLocaleSwitcher={showLocaleSwitcher}
     />