@djangocfg/layouts 2.1.279 → 2.1.281

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

@@ -0,0 +1,50 @@
+/**
+ * LinkComponentContext
+ *
+ * Dependency-injects the Link component used by navbars, footers, and mobile
+ * drawers. Apps wire in their own i18n-aware Link (e.g. next-intl's
+ * `createNavigation().Link`) so internal navigation picks up the locale
+ * prefix. Default falls back to plain `next/link`.
+ */
+
+'use client';
+
+import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
+import React, {
+  createContext,
+  useContext,
+  type AnchorHTMLAttributes,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
+
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+
+export type LinkComponentProps = Omit<NextLinkProps, 'passHref' | 'legacyBehavior'> &
+  AnchorProps & {
+    children?: ReactNode;
+  };
+
+export type LinkComponent = ComponentType<LinkComponentProps>;
+
+const LinkComponentContext = createContext<LinkComponent>(NextLink as LinkComponent);
+
+export interface LinkComponentProviderProps {
+  value: LinkComponent;
+  children: ReactNode;
+}
+
+export function LinkComponentProvider({
+  value,
+  children,
+}: LinkComponentProviderProps) {
+  return (
+    <LinkComponentContext.Provider value={value}>
+      {children}
+    </LinkComponentContext.Provider>
+  );
+}
+
+export function useLinkComponent(): LinkComponent {
+  return useContext(LinkComponentContext);
+}

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

@@ -11,7 +11,7 @@ import React, { type ReactNode } from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { SmartNavLink } from './SmartNavLink';
+import { useLinkComponent } from './LinkComponentContext';
 
 export interface NavAction {
   label: string;
@@ -55,6 +55,7 @@ interface NavActionItemProps {
 }
 
 export function NavActionItem({ action, className }: NavActionItemProps) {
+  const Link = useLinkComponent();
   const variant = action.variant ?? 'ghost';
   const cls = cn(
     baseCls,
@@ -88,8 +89,8 @@ export function NavActionItem({ action, className }: NavActionItemProps) {
     );
   }
   return (
-    <SmartNavLink href={action.href} className={cls} onClick={action.onClick}>
+    <Link href={action.href} className={cls} onClick={action.onClick}>
       {content}
-    </SmartNavLink>
+    </Link>
   );
 }

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

@@ -23,6 +23,11 @@ interface NavActionsProps {
   leadingSlot?: ReactNode;
   /** Arbitrary slot rendered after the mobile toggle (desktop + mobile). */
   trailingSlot?: ReactNode;
+  /**
+   * Theme / locale controls rendered right before UserMenu (desktop only).
+   * Built by `NavbarShell` from `config.controls` + `config.i18n`.
+   */
+  controlsSlot?: ReactNode;
 }
 
 export function NavActions({
@@ -34,6 +39,7 @@ export function NavActions({
   actions,
   leadingSlot,
   trailingSlot,
+  controlsSlot,
 }: NavActionsProps) {
   const hasActions = actions && actions.length > 0;
 
@@ -49,6 +55,8 @@ export function NavActions({
 
       {leadingSlot && <div className="hidden lg:flex shrink-0 items-center">{leadingSlot}</div>}
 
+      {controlsSlot && <div className="hidden lg:flex shrink-0 items-center">{controlsSlot}</div>}
+
       <div className="hidden lg:flex">
         <UserMenu
           variant="desktop"

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

@@ -2,7 +2,7 @@
 
 import React, { type ReactNode } from 'react';
 
-import { SmartNavLink } from './SmartNavLink';
+import { useLinkComponent } from './LinkComponentContext';
 
 interface NavBrandProps {
   brand?: ReactNode;
@@ -10,16 +10,18 @@ interface NavBrandProps {
 }
 
 export function NavBrand({ brand, brandHref = '/' }: NavBrandProps) {
+  const Link = useLinkComponent();
+
   if (brand == null || brand === '' || brand === false) return null;
 
   if (typeof brand === 'string') {
     return (
-      <SmartNavLink
+      <Link
         href={brandHref}
         className="font-bold text-[15px] text-foreground hover:opacity-90 transition-opacity"
       >
         {brand}
-      </SmartNavLink>
+      </Link>
     );
   }
 

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

@@ -0,0 +1,114 @@
+'use client';
+
+import { Laptop, Moon, Sun } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+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';
+
+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 */
+  showLocaleSwitcher?: boolean;
+  /** Visual size. `compact` matches navbar row, `default` matches footer. @default 'compact' */
+  size?: 'compact' | 'default';
+  /** Extra classes for the outer container. */
+  className?: string;
+}
+
+function ThemeModeControl({ size }: { size: 'compact' | 'default' }) {
+  const { theme, setTheme } = useThemeContext();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const currentTheme = mounted ? (theme || 'system') : 'system';
+  const isActive = (value: 'system' | 'light' | 'dark') => currentTheme === value;
+
+  const btnSize = size === 'compact' ? 'h-7 w-7' : 'h-8 w-8';
+  const iconSize = size === 'compact' ? 'h-3.5 w-3.5' : 'h-4 w-4';
+  const baseItemClass = `${btnSize} rounded-full p-0 text-muted-foreground hover:text-foreground`;
+  const activeItemClass = 'bg-background/80 text-foreground shadow-sm';
+
+  return (
+    <div className="inline-flex items-center gap-0.5 rounded-full border border-border/60 bg-muted/30 p-0.5">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(baseItemClass, isActive('system') && activeItemClass)}
+        onClick={() => setTheme('system')}
+        aria-label="Use system theme"
+      >
+        <Laptop className={iconSize} />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(baseItemClass, isActive('light') && activeItemClass)}
+        onClick={() => setTheme('light')}
+        aria-label="Use light theme"
+      >
+        <Sun className={iconSize} />
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn(baseItemClass, isActive('dark') && activeItemClass)}
+        onClick={() => setTheme('dark')}
+        aria-label="Use dark theme"
+      >
+        <Moon className={iconSize} />
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Navbar-sized theme + locale controls. Mirrors `DefaultFooter` controls but
+ * tuned for a navbar row. Rendered by `NavActions` when `controls` are passed
+ * to a navbar config.
+ */
+export function NavControls({
+  i18n,
+  showThemeSwitcher = false,
+  showLocaleSwitcher = false,
+  size = 'compact',
+  className,
+}: NavControlsProps) {
+  const renderLocale = showLocaleSwitcher && Boolean(i18n);
+  if (!showThemeSwitcher && !renderLocale) return null;
+
+  const localeBtnClass =
+    size === 'compact'
+      ? 'h-8 rounded-full border-border/60 bg-muted/30 px-2.5 text-xs hover:bg-muted/40'
+      : 'h-9 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40';
+
+  return (
+    <div className={cn('inline-flex items-center gap-1.5', className)}>
+      {showThemeSwitcher && <ThemeModeControl size={size} />}
+      {renderLocale && i18n && (
+        <LocaleSwitcher
+          locale={i18n.locale}
+          locales={i18n.locales}
+          onChange={i18n.onLocaleChange}
+          variant="outline"
+          size={size === 'compact' ? 'sm' : 'default'}
+          showTriggerLabel={false}
+          className={localeBtnClass}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -10,7 +10,7 @@ import type { NavigationItem } from '../../types';
 import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
 import { useResponsiveOverflow } from '../hooks/useResponsiveOverflow';
 import type { PublicDesktopDropdownRenderer } from '../navbarTypes';
-import { SmartNavLink } from './SmartNavLink';
+import { useLinkComponent } from './LinkComponentContext';
 
 interface NavDesktopItemsProps {
   /** Full ordered item list; overflow is computed responsively. */
@@ -57,6 +57,7 @@ export function NavDesktopItems({
   dropdown,
   renderDesktopDropdown,
 }: NavDesktopItemsProps) {
+  const Link = useLinkComponent();
   const { openDropdownKey, scheduleOpen, scheduleClose, closeDropdown } = dropdown;
 
   const { visibleCount, containerRef, itemRef, measured } = useResponsiveOverflow({
@@ -91,9 +92,9 @@ export function NavDesktopItems({
                     <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
                   </a>
                 ) : (
-                  <SmartNavLink href={sub.href} className={subMenuLinkCls(subActive)}>
+                  <Link href={sub.href} className={subMenuLinkCls(subActive)}>
                     <span className="min-w-0 truncate" title={sub.label}>{sub.label}</span>
-                  </SmartNavLink>
+                  </Link>
                 )}
               </div>
             );
@@ -149,13 +150,13 @@ export function NavDesktopItems({
 
     const active = isActivePath(item.href);
     return (
-      <SmartNavLink
+      <Link
         key={item.href}
         href={item.href}
         className={cn(navItemCls, active && navItemActiveCls)}
       >
         <span className={labelCls} title={item.label}>{item.label}</span>
-      </SmartNavLink>
+      </Link>
     );
   };
 
@@ -235,9 +236,9 @@ export function NavDesktopItems({
                   const active = isGroupActive(item);
                   return (
                     <div key={`overflow-${item.href}`} className="rounded-full">
-                      <SmartNavLink href={item.href} className={subMenuLinkCls(active)}>
+                      <Link href={item.href} className={subMenuLinkCls(active)}>
                         <span className="min-w-0 truncate" title={item.label}>{item.label}</span>
-                      </SmartNavLink>
+                      </Link>
                     </div>
                   );
                 })}

package/src/layouts/PublicLayout/primitives/index.ts

@@ -2,17 +2,17 @@ export { NavBrand } from './NavBrand';
 export { NavActions } from './NavActions';
 export { NavActionItem } from './NavActionItem';
 export type { NavAction } from './NavActionItem';
+export { NavControls } from './NavControls';
+export type { NavControlsProps } from './NavControls';
 export { NavDesktopItems } from './NavDesktopItems';
 export { ThemeBrandMark, ThemeBrandMarkImg } from './ThemeBrandMark';
 export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './ThemeBrandMark';
 export {
-  ExternalPrefixesProvider,
-  useExternalPrefixes,
-  isExternalPrefixHref,
-} from './ExternalPrefixesContext';
+  LinkComponentProvider,
+  useLinkComponent,
+} from './LinkComponentContext';
 export type {
-  ExternalPrefixes,
-  ExternalPrefixesProviderProps,
-} from './ExternalPrefixesContext';
-export { SmartNavLink } from './SmartNavLink';
-export type { SmartNavLinkProps } from './SmartNavLink';
+  LinkComponent,
+  LinkComponentProps,
+  LinkComponentProviderProps,
+} from './LinkComponentContext';

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

@@ -19,9 +19,10 @@ import { usePathnameWithoutLocale } from '../../../hooks';
 import { UserMenu } from '../../_components/UserMenu';
 import { usePublicLayoutOptional } from '../context';
 import { useMobileNavPanel } from '../hooks';
-import { SmartNavLink } from '../primitives/SmartNavLink';
+import { useLinkComponent } from '../primitives/LinkComponentContext';
+import { NavControls } from '../primitives/NavControls';
 
-import type { NavigationItem, UserMenuConfig } from '../../types';
+import type { I18nLayoutConfig, NavigationItem, UserMenuConfig } from '../../types';
 
 export interface MobileDrawerShellProps {
   isOpen?: boolean;
@@ -32,9 +33,17 @@ export interface MobileDrawerShellProps {
   outerClassName?: string;
   /** Panel surface (bg, border, rounding, shadow). */
   panelClassName?: string;
+  /** Optional theme/locale controls shown as a row inside the drawer footer. */
+  controls?: {
+    showThemeSwitcher?: boolean;
+    showLocaleSwitcher?: boolean;
+  };
+  /** i18n config — required for the locale switcher row. */
+  i18n?: I18nLayoutConfig;
 }
 
 export function MobileDrawerShell(props: MobileDrawerShellProps) {
+  const Link = useLinkComponent();
   const context = usePublicLayoutOptional();
   const mobileMenuOpen = props.isOpen ?? context?.mobileMenuOpen ?? false;
   const closeMobileMenu = props.onClose ?? context?.closeMobileMenu ?? (() => {});
@@ -70,6 +79,10 @@ 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 showControlsRow = showThemeSwitcher || showLocaleSwitcher;
 
   return (
     <>
@@ -133,7 +146,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                   const parentOnlySectionOpen = hasChildNav && anyChildActive;
                   return (
                     <div key={item.href}>
-                      <SmartNavLink
+                      <Link
                         href={item.href}
                         onClick={closeMobileMenu}
                         title={item.label}
@@ -148,13 +161,13 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                         )}
                       >
                         {item.label}
-                      </SmartNavLink>
+                      </Link>
                       {hasChildNav && (
                         <div className="ml-3 mt-1.5 space-y-1 border-l border-border/40 pl-3">
                           {childItems.map((subItem) => {
                             const subActive = isActivePath(subItem.href);
                             return (
-                              <SmartNavLink
+                              <Link
                                 key={`${item.href}-${subItem.href}`}
                                 href={subItem.href}
                                 onClick={closeMobileMenu}
@@ -168,7 +181,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                                 )}
                               >
                                 {subItem.label}
-                              </SmartNavLink>
+                              </Link>
                             );
                           })}
                         </div>
@@ -180,9 +193,20 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
             </div>
           </div>
 
+          {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"
+              />
+            </div>
+          )}
+
           {showSignInFooter && (
             <div className="shrink-0 border-t border-border/50 p-4">
-              <SmartNavLink
+              <Link
                 href={userMenu?.authPath || '/auth'}
                 onClick={closeMobileMenu}
                 className="block"
@@ -194,7 +218,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                     aria-hidden
                   />
                 </Button>
-              </SmartNavLink>
+              </Link>
             </div>
           )}
         </div>

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

@@ -46,8 +46,11 @@ import type { NavigationItem, UserMenuConfig } from '../../types';
 import { NavActions } from '../primitives/NavActions';
 import type { NavAction } from '../primitives/NavActionItem';
 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',
@@ -113,6 +116,17 @@ export interface NavbarShellProps {
   /** Arbitrary ReactNode after the mobile toggle. */
   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 */
+    showThemeSwitcher?: boolean;
+    /** Locale dropdown. Requires `i18n`. @default false */
+    showLocaleSwitcher?: boolean;
+  };
+
   // ── Props override (used by variants that proxy ctx differently) ──────────
   mobileMenuOpen?: boolean;
   onMobileMenuToggle?: () => void;
@@ -124,6 +138,11 @@ export interface NavbarActionsContext {
   toggleMobileMenu: () => void;
   toggleMobileLabel: string;
   navLayout: PublicNavLayout;
+  /**
+   * Pre-built theme/locale controls node. `null` when both toggles are off.
+   * Variants with a custom `renderActions` can choose where to place it.
+   */
+  controls: ReactNode | null;
 }
 
 export function NavbarShell(props: NavbarShellProps) {
@@ -224,6 +243,18 @@ export function NavbarShell(props: NavbarShellProps) {
     />
   ) : null;
 
+  const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
+  const showLocaleSwitcher =
+    props.controls?.showLocaleSwitcher === true && Boolean(props.i18n);
+  const hasControls = showThemeSwitcher || showLocaleSwitcher;
+  const controlsNode = hasControls ? (
+    <NavControls
+      i18n={props.i18n}
+      showThemeSwitcher={showThemeSwitcher}
+      showLocaleSwitcher={showLocaleSwitcher}
+    />
+  ) : null;
+
   const actionsNode = props.renderActions ? (
     props.renderActions({
       userMenu,
@@ -231,6 +262,7 @@ export function NavbarShell(props: NavbarShellProps) {
       toggleMobileMenu,
       toggleMobileLabel,
       navLayout,
+      controls: controlsNode,
     })
   ) : (
     <NavActions
@@ -242,6 +274,7 @@ export function NavbarShell(props: NavbarShellProps) {
       actions={props.actions}
       leadingSlot={props.actionsLeadingSlot}
       trailingSlot={props.actionsTrailingSlot}
+      controlsSlot={controlsNode}
     />
   );
 

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -27,7 +27,7 @@ import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
 import { useLogout } from '../../hooks';
 import { LocaleSwitcher } from './LocaleSwitcher';
 
-import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+import type { I18nLayoutConfig } from '../types';
 import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
 
 /** Radix portals (dropdown, select, popover) render outside the account node — ignore those clicks for “outside”. */

package/src/layouts/types/index.ts

@@ -52,4 +52,4 @@ export type {
 // Layout Types
 // ============================================================================
 
-export type { BaseLayoutProps, DebugConfig } from './layout.types';
+export type { BaseLayoutProps, DebugConfig, I18nLayoutConfig } from './layout.types';

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

@@ -70,3 +70,16 @@ export interface DebugConfig extends DebugButtonProps {
   enabled?: boolean;
 }
 
+/**
+ * i18n configuration consumed by layouts, navbars, footer controls, and the
+ * UserMenu locale row. Same shape as `@djangocfg/nextjs`'s `useLocaleSwitcher`.
+ */
+export interface I18nLayoutConfig {
+  /** Current locale (e.g. `"en"`, `"ru"`, `"pt-BR"`). */
+  locale: string;
+  /** Available locales. */
+  locales: string[];
+  /** Called when the user picks a new locale. */
+  onLocaleChange: (locale: string) => void;
+}
+

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

@@ -1,69 +0,0 @@
-/**
- * ExternalPrefixesContext
- *
- * Provides a list of path prefixes that should be treated as "outside" the
- * Next.js App Router (e.g. a catch-all served by Nextra). Consumers inside the
- * navbar (`SmartNavLink`) check whether the `href` starts with any configured
- * prefix; if so, they render a native `<a>` (full page load) instead of a
- * `next/link` that would fetch an RSC payload the route cannot produce.
- *
- * Default: `[]` — so behaviour is unchanged for consumers who do not opt in.
- */
-
-'use client';
-
-import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
-
-export type ExternalPrefixes = readonly string[];
-
-const ExternalPrefixesContext = createContext<ExternalPrefixes>([]);
-
-export interface ExternalPrefixesProviderProps {
-  /** List of path prefixes treated as external to the App Router. */
-  value?: ExternalPrefixes;
-  children: ReactNode;
-}
-
-export function ExternalPrefixesProvider({
-  value,
-  children,
-}: ExternalPrefixesProviderProps) {
-  const resolved = useMemo<ExternalPrefixes>(() => value ?? [], [value]);
-  return (
-    <ExternalPrefixesContext.Provider value={resolved}>
-      {children}
-    </ExternalPrefixesContext.Provider>
-  );
-}
-
-export function useExternalPrefixes(): ExternalPrefixes {
-  return useContext(ExternalPrefixesContext);
-}
-
-/**
- * Returns true if `href` is a string that starts with any of the provided
- * external prefixes. Non-string hrefs (objects, `next/link` URL shape) always
- * return false — those are App Router internal.
- *
- * Matches the prefix exactly or at a path-boundary (`/`, `?`, `#`) so that
- * `/docs` in the prefix list matches `/docs`, `/docs/`, `/docs/foo`, `/docs?x=1`,
- * `/docs#bar` — but NOT `/docsearch` (which should stay an App Router link).
- */
-export function isExternalPrefixHref(
-  href: unknown,
-  prefixes: ExternalPrefixes,
-): href is string {
-  if (typeof href !== 'string' || prefixes.length === 0) return false;
-  for (const prefix of prefixes) {
-    if (!prefix) continue;
-    if (href === prefix) return true;
-    if (
-      href.startsWith(`${prefix}/`) ||
-      href.startsWith(`${prefix}?`) ||
-      href.startsWith(`${prefix}#`)
-    ) {
-      return true;
-    }
-  }
-  return false;
-}