@djangocfg/layouts 2.1.307 → 2.1.308

package/README.md

@@ -87,7 +87,7 @@ Wraps `BaseApp` and picks **admin → private → public** layout by path (`matc
 
 | Component | Use |
 |---|---|
-| **`PublicLayout`** | Marketing / docs. Slots for navbar + footer. All anchors render through `<Link>` from `@djangocfg/ui-core/components` — wrap with `LinkProvider` higher in the tree to inject a locale-aware Link (e.g. `next-intl`). All three navbars accept `controls` + `i18n` to show theme / locale switchers next to UserMenu (same shape as `DefaultFooter.controls`). **[See PublicLayout README](./src/layouts/PublicLayout/README.md)** for full props, navbar variants (`FloatingNavbar` / `FlushNavbar` / `MinimalNavbar`), `DefaultFooter`, `NavAction`, `NavControls`, and hooks. |
+| **`PublicLayout`** | Marketing / docs. Slots for navbar + footer. All anchors render through `<Link>` from `@djangocfg/ui-core/components` — wrap with `LinkProvider` higher in the tree to inject a locale-aware Link (e.g. `next-intl`). All three navbars accept a `controls` block to show theme / locale switchers next to `UserMenu`; locale data flows from `LayoutI18nProvider` (mounted by `AppLayout` / `BaseApp` when you pass `i18n`). The locale switcher renders SVG country flags and matches the `UserMenu` avatar size at `size="icon"`. **[See PublicLayout README](./src/layouts/PublicLayout/README.md)** for full props, navbar variants (`FloatingNavbar` / `FlushNavbar` / `MinimalNavbar`), `DefaultFooter`, `NavAction`, `NavControls`, and hooks. |
 | **`PrivateLayout`** | App shell — sidebar + header. Defaults to the `boxed` visual (inset rounded card on a sidebar-coloured canvas); pass `visual={{ variant: 'full-bleed' }}` for the legacy edge-to-edge layout. |
 | **`AuthLayout`** | Sign-in flows. |
 | **`AdminLayout`** | Admin console. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.307",
+  "version": "2.1.308",
   "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.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",
+    "@djangocfg/api": "^2.1.308",
+    "@djangocfg/centrifugo": "^2.1.308",
+    "@djangocfg/debuger": "^2.1.308",
+    "@djangocfg/i18n": "^2.1.308",
+    "@djangocfg/monitor": "^2.1.308",
+    "@djangocfg/ui-core": "^2.1.308",
+    "@djangocfg/ui-nextjs": "^2.1.308",
+    "@djangocfg/ui-tools": "^2.1.308",
     "@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.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",
+    "@djangocfg/api": "^2.1.308",
+    "@djangocfg/centrifugo": "^2.1.308",
+    "@djangocfg/debuger": "^2.1.308",
+    "@djangocfg/i18n": "^2.1.308",
+    "@djangocfg/monitor": "^2.1.308",
+    "@djangocfg/typescript-config": "^2.1.308",
+    "@djangocfg/ui-core": "^2.1.308",
+    "@djangocfg/ui-nextjs": "^2.1.308",
+    "@djangocfg/ui-tools": "^2.1.308",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PublicLayout/README.md

@@ -7,7 +7,7 @@ import { PublicLayout, FloatingNavbar, DefaultFooter } from '@djangocfg/layouts'
 
 <PublicLayout
   navbar={<FloatingNavbar config={{ brand, navigation, userMenu, actions }} />}
-  footer={<DefaultFooter config={{ variant: 'full', menus: { sections }, i18n }} />}
+  footer={<DefaultFooter config={{ variant: 'full', menus: { sections } }} />}
 >
   {children}
 </PublicLayout>
@@ -74,8 +74,7 @@ Three variants. All share the same core props (below); only the chrome differs.
 | `transparentThreshold` | `number` | `40` | Px past which the nav becomes opaque. |
 | `desktopMaxPrimaryItems` | `number` | auto | Hard cap for primary items before overflow. |
 | `renderDesktopDropdown` | `(ctx) => ReactNode` | — | Replace default popover per-item. |
-| `controls` | `{ showThemeSwitcher?; showLocaleSwitcher? }` | — | Compact theme + locale pills next to UserMenu. See below. |
-| `i18n` | `{ locale, locales, onLocaleChange }` | — | Required for the locale switcher (same shape as `DefaultFooter.i18n`). |
+| `controls` | `{ showThemeSwitcher?; showLocaleSwitcher? }` | — | Compact theme + locale pills next to UserMenu. Locale data flows from `LayoutI18nProvider` (mounted by `BaseApp`); the switcher hides itself when no provider is present. See below. |
 
 ### Variant-only
 
@@ -94,10 +93,9 @@ Three variants. All share the same core props (below); only the chrome differs.
 
 ## Theme + locale controls (navbar)
 
-All three navbars accept an optional `controls` block and `i18n` config that
-mirrors `DefaultFooter`. When enabled, a compact `NavControls` pill is rendered
-on desktop right before `UserMenu`, and an equivalent row appears in the mobile
-drawer footer.
+All three navbars accept an optional `controls` block. When enabled, a compact
+`NavControls` pill is rendered on desktop right before `UserMenu`, and an
+equivalent row appears in the mobile drawer footer.
 
 ```tsx
 <FloatingNavbar
@@ -106,7 +104,6 @@ drawer footer.
     navigation,
     userMenu: { authPath: '/auth' },
     controls: { showThemeSwitcher: true, showLocaleSwitcher: true },
-    i18n: { locale, locales, onLocaleChange: changeLocale },
   }}
 />
 ```
@@ -114,7 +111,12 @@ drawer footer.
 | Control | Required | Notes |
 |---|---|---|
 | `controls.showThemeSwitcher` | — | Light / system / dark pill (uses `useThemeContext`). |
-| `controls.showLocaleSwitcher` | `i18n` | Globe dropdown. Silently hidden when `i18n` is omitted. |
+| `controls.showLocaleSwitcher` | `LayoutI18nProvider` | Locale switcher (icon-size pill matching `UserMenu` avatar). Hidden when no provider is mounted. |
+
+Locale data (`locale`, `locales`, `onLocaleChange`) is read from
+`LayoutI18nProvider`, which `BaseApp` (and `AppLayout`) mounts automatically
+when you pass an `i18n` config. The switcher renders SVG country flags via
+`country-flag-icons` — no emoji.
 
 Same shape works for `FlushNavbar` and `MinimalNavbar`. If you build a custom
 navbar with `NavbarShell`, the controls node is pre-built and delivered to
@@ -129,7 +131,6 @@ import { NavControls } from '@djangocfg/layouts';
 <NavControls
   showThemeSwitcher
   showLocaleSwitcher
-  i18n={{ locale, locales, onLocaleChange }}
   size="compact" // 'compact' (navbar) | 'default' (footer)
 />
 ```
@@ -160,7 +161,7 @@ actions={[
 Three variants: `full` (default) with brand column + menus + controls; `compact` (one row + bottom); `simple` (copyright only).
 
 ```tsx
-<DefaultFooter config={{ variant: 'full', menus: { sections }, i18n, slots }} />
+<DefaultFooter config={{ variant: 'full', menus: { sections }, slots }} />
 ```
 
 | Prop (`config.*`) | Type | Default | Role |
@@ -178,9 +179,8 @@ Three variants: `full` (default) with brand column + menus + controls; `compact`
 | `social` | `FooterSocialLinks` | — | Social icon row under brand. |
 | `meta.copyright` | `string` | `© ${year}. All rights reserved.` | |
 | `meta.credits` | `{ text: string; url?: string }` | — | |
-| `i18n` | `{ locale, locales, onLocaleChange }` | — | Required for the locale switcher. |
 | `controls.showThemeSwitcher` | `boolean` | `true` | Full variant only. |
-| `controls.showLocaleSwitcher` | `boolean` | `true` (if `i18n`) | Full variant only. |
+| `controls.showLocaleSwitcher` | `boolean` | `true` | Full variant only. Reads locale from `LayoutI18nProvider`; hidden when no provider is mounted. |
 | `slots.aboveMenus` | `ReactNode` | — | Above the brand/menus grid (full variant). |
 | `slots.belowMenus` | `ReactNode` | — | Between menus and bottom row. |
 | `slots.bottomStart` | `ReactNode` | — | Next to copyright. |

package/src/layouts/_components/locale-switcher/LocaleSwitcherDropdown.tsx

@@ -44,22 +44,38 @@ export function LocaleSwitcherDropdown({
 }: LocaleSwitcherDropdownProps) {
   const currentMeta = getLocaleMeta(locale, labels);
   const currentLabel = showCode ? locale.toUpperCase() : currentMeta.native;
+  const isIconOnly = size === 'icon';
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant={variant} size={size} className={className}>
-          {showFlag ? (
-            <LanguageFlag
-              code={locale}
-              rounded
-              className={cn('h-3 w-4 shrink-0', showTriggerLabel && 'mr-1.5')}
-            />
-          ) : showIcon ? (
-            <Globe className={cn('h-4 w-4 shrink-0', showTriggerLabel && 'mr-1')} />
-          ) : null}
-          {showTriggerLabel && <span>{currentLabel}</span>}
-        </Button>
+        {isIconOnly ? (
+          <Button
+            variant={variant}
+            size={size}
+            aria-label={currentLabel}
+            className={cn('overflow-hidden rounded-full p-0', className)}
+          >
+            {showFlag ? (
+              <LanguageFlag code={locale} className="h-full w-full object-cover" />
+            ) : (
+              <Globe className="h-4 w-4" aria-hidden />
+            )}
+          </Button>
+        ) : (
+          <Button variant={variant} size={size} className={className}>
+            {showFlag ? (
+              <LanguageFlag
+                code={locale}
+                rounded
+                className={cn('h-3 w-4 shrink-0', showTriggerLabel && 'mr-1.5')}
+              />
+            ) : showIcon ? (
+              <Globe className={cn('h-4 w-4 shrink-0', showTriggerLabel && 'mr-1')} />
+            ) : null}
+            {showTriggerLabel && <span>{currentLabel}</span>}
+          </Button>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         {locales.map((code) => {

package/src/layouts/_components/locale-switcher/LocaleSwitcherTrigger.tsx

@@ -48,6 +48,35 @@ export const LocaleSwitcherTrigger = React.forwardRef<
 ) {
   const meta = getLocaleMeta(locale, labels);
   const labelText = showCode ? locale.toUpperCase() : meta.native;
+  const isIconOnly = size === 'icon';
+
+  // Icon-only trigger: full-bleed flag inside a circular pill that lines up
+  // with neighbouring avatars / icon buttons. No padding, no inner gap.
+  if (isIconOnly) {
+    return (
+      <Button
+        ref={ref}
+        type="button"
+        variant={variant}
+        size={size}
+        onClick={onClick}
+        aria-label={ariaLabel ?? labelText}
+        className={cn(
+          'overflow-hidden rounded-full p-0',
+          className,
+        )}
+      >
+        {showFlag ? (
+          <LanguageFlag
+            code={locale}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <Globe className="h-4 w-4" aria-hidden />
+        )}
+      </Button>
+    );
+  }
 
   return (
     <Button