@djangocfg/layouts 2.1.275 → 2.1.277

package/src/layouts/PublicLayout/{components/PublicFooter/PublicFooter.tsx → footers/DefaultFooter/DefaultFooter.tsx}

@@ -1,13 +1,11 @@
 /**
- * Public Layout Footer
+ * Default Public Footer
  *
- * Professional, flexible footer component for PublicLayout
- * Supports desktop/mobile responsive layouts, social links, menu sections
+ * Professional, flexible footer with full / compact / simple variants.
  */
 
 'use client';
 
-import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import { Laptop, Moon, Sun } from 'lucide-react';
 
@@ -15,10 +13,11 @@ import { Button } from '@djangocfg/ui-core/components';
 import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
 import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
+import { SmartNavLink } from '../../primitives/SmartNavLink';
 import { FooterMenuSections } from './FooterMenuSections';
 import { FooterProjectInfo } from './FooterProjectInfo';
 
-import type { PublicFooterProps } from './types';
+import type { DefaultFooterProps } from './types';
 
 function ThemeModeControl() {
   const { theme, setTheme } = useThemeContext();
@@ -69,7 +68,7 @@ function ThemeModeControl() {
   );
 }
 
-export function PublicFooter({ config }: PublicFooterProps) {
+export function DefaultFooter({ config }: DefaultFooterProps) {
   const variant = config.variant ?? 'full';
   const shellClass = config.shell?.className;
   const brandSlot = config.brand?.slot;
@@ -88,6 +87,7 @@ export function PublicFooter({ config }: PublicFooterProps) {
   const showLocaleSwitcher =
     config.controls?.showLocaleSwitcher !== false && Boolean(i18n);
   const showFooterControlsRow = showThemeSwitcher || showLocaleSwitcher;
+  const slots = config.slots;
 
   const currentYear = new Date().getFullYear();
   const copyright = copyrightProp || `© ${currentYear}. All rights reserved.`;
@@ -132,13 +132,13 @@ export function PublicFooter({ config }: PublicFooterProps) {
                       {link.label}
                     </a>
                   ) : (
-                    <Link
+                    <SmartNavLink
                       key={link.path}
                       href={link.path}
                       className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                     >
                       {link.label}
-                    </Link>
+                    </SmartNavLink>
                   )
                 )}
               </div>
@@ -195,13 +195,13 @@ export function PublicFooter({ config }: PublicFooterProps) {
                     {link.label}
                   </a>
                 ) : (
-                  <Link
+                  <SmartNavLink
                     key={link.path}
                     href={link.path}
                     className="text-xs text-muted-foreground hover:text-primary transition-colors"
                   >
                     {link.label}
-                  </Link>
+                  </SmartNavLink>
                 )
               )}
             </div>
@@ -241,6 +241,8 @@ export function PublicFooter({ config }: PublicFooterProps) {
       </footer>
       <footer className={`max-lg:hidden ${footerSurfaceClass} ${footerSafeBottom}`}>
         <div className={`mx-auto px-6 sm:px-8 lg:px-10 py-14 ${shellClass || 'w-full'}`}>
+          {slots?.aboveMenus && <div className="mb-10">{slots.aboveMenus}</div>}
+
           <div className="grid grid-cols-12 gap-10 lg:gap-14">
             {showBrandColumn && (
               <div className="col-span-12 lg:col-span-4">
@@ -264,6 +266,8 @@ export function PublicFooter({ config }: PublicFooterProps) {
             </div>
           </div>
 
+          {slots?.belowMenus && <div className="mt-10">{slots.belowMenus}</div>}
+
           <div
             className={
               showFooterControlsRow
@@ -271,8 +275,9 @@ export function PublicFooter({ config }: PublicFooterProps) {
                 : 'mt-12 flex flex-col gap-4 border-t border-border/60 pt-5 lg:flex-row lg:items-center lg:justify-between'
             }
           >
-            <div className="text-center text-xs text-muted-foreground lg:text-left lg:justify-self-start">
-              {copyright}
+            <div className="flex min-w-0 flex-wrap items-center justify-center gap-3 text-center text-xs text-muted-foreground lg:justify-self-start lg:text-left">
+              <span className="whitespace-nowrap">{copyright}</span>
+              {slots?.bottomStart}
             </div>
 
             <div className="flex min-w-0 flex-wrap items-center justify-center gap-3 text-center text-xs text-muted-foreground lg:justify-self-center">
@@ -297,15 +302,16 @@ export function PublicFooter({ config }: PublicFooterProps) {
                     {link.label}
                   </a>
                 ) : (
-                  <Link key={link.path} href={link.path} className="hover:text-foreground transition-colors whitespace-nowrap">
+                  <SmartNavLink key={link.path} href={link.path} className="hover:text-foreground transition-colors whitespace-nowrap">
                     {link.label}
-                  </Link>
+                  </SmartNavLink>
                 )
               )}
             </div>
 
-            {showFooterControlsRow && (
+            {(showFooterControlsRow || slots?.bottomEnd) && (
               <div className="flex items-center justify-center gap-2 lg:justify-self-end">
+                {slots?.bottomEnd}
                 {showThemeSwitcher && <ThemeModeControl />}
                 {showLocaleSwitcher && i18n && (
                   <LocaleSwitcher

package/src/layouts/PublicLayout/{components/PublicFooter → footers/DefaultFooter}/DjangoCFGLogo.tsx

@@ -1,9 +1,3 @@
-/**
- * DjangoCFG Logo Component
- *
- * Default SVG logo for DjangoCFG
- */
-
 'use client';
 
 import React from 'react';

package/src/layouts/PublicLayout/{components/PublicFooter → footers/DefaultFooter}/FooterBottom.tsx

@@ -1,12 +1,8 @@
-/**
- * Footer Bottom Section Component
- */
-
 'use client';
 
-import Link from 'next/link';
 import React from 'react';
 
+import { SmartNavLink } from '../../primitives/SmartNavLink';
 import { DjangoCFGLogo } from './DjangoCFGLogo';
 
 import type { FooterLink } from './types';
@@ -99,13 +95,13 @@ export function FooterBottom({
                   {link.label}
                 </a>
               ) : (
-                <Link
+                <SmartNavLink
                   key={link.path}
                   href={link.path}
                   className="text-xs text-muted-foreground hover:text-primary transition-colors"
                 >
                   {link.label}
-                </Link>
+                </SmartNavLink>
               )
             )}
           </div>

package/src/layouts/PublicLayout/{components/PublicFooter → footers/DefaultFooter}/FooterMenuSections.tsx

@@ -1,12 +1,9 @@
-/**
- * Footer Menu Sections Component
- */
-
 'use client';
 
-import Link from 'next/link';
 import React from 'react';
 
+import { SmartNavLink } from '../../primitives/SmartNavLink';
+
 import type { FooterMenuSection } from './types';
 
 export interface FooterMenuSectionsProps {
@@ -37,12 +34,12 @@ export function FooterMenuSections({
           <ul className="space-y-2">
             {section.items.map((item) => (
               <li key={item.path}>
-                <Link
+                <SmartNavLink
                   href={item.path}
                   className="text-sm text-foreground/90 hover:text-foreground transition-colors"
                 >
                   {item.label}
-                </Link>
+                </SmartNavLink>
               </li>
             ))}
           </ul>

package/src/layouts/PublicLayout/{components/PublicFooter → footers/DefaultFooter}/FooterProjectInfo.tsx

@@ -1,7 +1,3 @@
-/**
- * Footer Project Info Component
- */
-
 'use client';
 
 import React from 'react';

package/src/layouts/PublicLayout/{components/PublicFooter → footers/DefaultFooter}/FooterSocialLinks.tsx

@@ -1,7 +1,3 @@
-/**
- * Footer Social Links Component
- */
-
 'use client';
 
 import {
@@ -34,7 +30,6 @@ export function FooterSocialLinksComponent({
   className = 'flex space-x-4',
   iconClassName = 'w-5 h-5',
 }: FooterSocialLinksProps) {
-  // Prepare social links data BEFORE render
   const socialLinksData = socialLinks
     ? Object.entries(socialLinks)
         .filter(([_, url]) => url)

package/src/layouts/PublicLayout/{components/PublicFooter → footers/DefaultFooter}/index.ts

@@ -1,8 +1,4 @@
-/**
- * Public Footer Exports
- */
-
-export { PublicFooter } from './PublicFooter';
+export { DefaultFooter } from './DefaultFooter';
 export { FooterProjectInfo } from './FooterProjectInfo';
 export type { FooterProjectInfoProps } from './FooterProjectInfo';
 export { FooterMenuSections } from './FooterMenuSections';
@@ -10,10 +6,4 @@ export { FooterBottom } from './FooterBottom';
 export { FooterSocialLinksComponent } from './FooterSocialLinks';
 export { DjangoCFGLogo } from './DjangoCFGLogo';
 
-export type {
-  PublicFooterProps,
-  PublicFooterConfig,
-  FooterLink,
-  FooterMenuSection,
-  FooterSocialLinks,
-} from './types';
+export type { DefaultFooterProps, DefaultFooterConfig } from './types';

package/src/layouts/PublicLayout/{components/PublicFooter → footers/DefaultFooter}/types.ts

@@ -1,35 +1,16 @@
 /**
- * Public Footer Types
+ * Default Footer types.
  */
 
 import type { LucideIcon } from 'lucide-react';
 import type { ReactNode } from 'react';
+
 import type { I18nLayoutConfig } from '../../../AppLayout/AppLayout';
+import type { FooterLink, FooterMenuSection, FooterSocialLinks } from '../../../types';
 
-export interface FooterLink {
-  label: string;
-  path: string;
-  external?: boolean;
-}
+export type { FooterLink, FooterMenuSection, FooterSocialLinks };
 
-export interface FooterMenuSection {
-  title: string;
-  items: FooterLink[];
-}
-
-export interface FooterSocialLinks {
-  github?: string;
-  linkedin?: string;
-  twitter?: string;
-  telegram?: string;
-  youtube?: string;
-  facebook?: string;
-  instagram?: string;
-  whatsapp?: string;
-  email?: string;
-}
-
-export interface PublicFooterConfig {
+export interface DefaultFooterConfig {
   variant?: 'full' | 'compact' | 'simple';
   shell?: {
     className?: string;
@@ -70,8 +51,22 @@ export interface PublicFooterConfig {
     /** Requires `i18n`. @default true */
     showLocaleSwitcher?: boolean;
   };
+  /**
+   * Arbitrary ReactNode slots for custom content (newsletter, status badges,
+   * extra CTAs …). Only rendered in the `full` variant.
+   */
+  slots?: {
+    /** Rendered above the brand/menus grid. Full width. */
+    aboveMenus?: ReactNode;
+    /** Rendered between the menus grid and the bottom row. Full width. */
+    belowMenus?: ReactNode;
+    /** Rendered in the bottom row, next to the copyright. */
+    bottomStart?: ReactNode;
+    /** Rendered in the bottom row, next to controls. */
+    bottomEnd?: ReactNode;
+  };
 }
 
-export interface PublicFooterProps {
-  config: PublicFooterConfig;
+export interface DefaultFooterProps {
+  config: DefaultFooterConfig;
 }

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

@@ -0,0 +1 @@
+export * from './DefaultFooter';

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

@@ -4,3 +4,4 @@ export type { UseDropdownMenuReturn } from './useDropdownMenu';
 export { useNavbarScroll } from './useNavbarScroll';
 export type { UseNavbarScrollOptions, UseNavbarScrollReturn } from './useNavbarScroll';
 export { useNavbarViewportVars } from './useNavbarViewportVars';
+export { useResponsiveOverflow } from './useResponsiveOverflow';

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

@@ -0,0 +1,140 @@
+/**
+ * useResponsiveOverflow — figure out how many nav items fit in the available
+ * space, pushing the rest into a "More" dropdown.
+ *
+ * Strategy (SSR-safe, no flash):
+ *  1. On the server and first client render we return `count === total`; the
+ *     caller renders every item inside an *invisible* measurement layer plus
+ *     the live row (see caller). No layout is committed until the observer
+ *     runs.
+ *  2. After mount, a ResizeObserver on the container + per-item width reads
+ *     recompute `visibleCount` whenever the nav's available width changes.
+ *  3. We reserve space for a "More" chip when anything is overflowing, so the
+ *     chip itself never pushes the last visible item out (which would cause
+ *     thrash: n → n-1 → n → …).
+ */
+
+'use client';
+
+import { useCallback, useEffect, useRef, useState, type RefCallback } from 'react';
+
+interface Options {
+  total: number;
+  /** Approx width reserved for the "More" chip when overflow exists. */
+  moreWidth?: number;
+  /** Gap between items (must match the flex gap in px). */
+  gap?: number;
+  /** Min items that must always be visible (clamps lower bound to 1). */
+  minVisible?: number;
+}
+
+interface Result {
+  /** How many items fit. */
+  visibleCount: number;
+  /** Attach to the container that constrains width. */
+  containerRef: RefCallback<HTMLElement | null>;
+  /** Attach to each item in the measurement layer (call for every index 0..total-1). */
+  itemRef: (index: number) => RefCallback<HTMLElement | null>;
+  /** True once a measurement has happened — caller can hide the measure layer then. */
+  measured: boolean;
+}
+
+export function useResponsiveOverflow({
+  total,
+  moreWidth = 72,
+  gap = 4,
+  minVisible = 1,
+}: Options): Result {
+  const [visibleCount, setVisibleCount] = useState<number>(total);
+  const [measured, setMeasured] = useState(false);
+
+  const containerElRef = useRef<HTMLElement | null>(null);
+  const itemElsRef = useRef<Array<HTMLElement | null>>([]);
+  const roRef = useRef<ResizeObserver | null>(null);
+
+  const recompute = useCallback(() => {
+    const container = containerElRef.current;
+    if (!container) return;
+    const available = container.clientWidth;
+    if (available <= 0) return;
+
+    const widths: number[] = [];
+    for (let i = 0; i < total; i++) {
+      const el = itemElsRef.current[i];
+      widths.push(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);
+    }
+    if (usedAll <= available) {
+      setVisibleCount(total);
+      setMeasured(true);
+      return;
+    }
+
+    // Some overflow: reserve space for the "More" chip.
+    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);
+      if (next > budget) break;
+      used = next;
+      fit = i + 1;
+    }
+
+    const clamped = Math.max(minVisible, Math.min(total, fit));
+    setVisibleCount(clamped);
+    setMeasured(true);
+  }, [total, moreWidth, gap, minVisible]);
+
+  // Recompute when `total` changes (items added/removed).
+  useEffect(() => {
+    itemElsRef.current.length = total;
+    recompute();
+  }, [total, recompute]);
+
+  const containerRef = useCallback<RefCallback<HTMLElement | null>>(
+    (node) => {
+      // Tear down previous observer.
+      if (roRef.current) {
+        roRef.current.disconnect();
+        roRef.current = null;
+      }
+      containerElRef.current = node;
+      if (!node) return;
+      if (typeof ResizeObserver === 'undefined') {
+        recompute();
+        return;
+      }
+      const ro = new ResizeObserver(() => recompute());
+      ro.observe(node);
+      roRef.current = ro;
+      // Initial measurement — rAF to let children mount.
+      requestAnimationFrame(recompute);
+    },
+    [recompute],
+  );
+
+  const itemRef = useCallback(
+    (index: number): RefCallback<HTMLElement | null> =>
+      (node) => {
+        itemElsRef.current[index] = node;
+      },
+    [],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (roRef.current) {
+        roRef.current.disconnect();
+        roRef.current = null;
+      }
+    };
+  }, []);
+
+  return { visibleCount, containerRef, itemRef, measured };
+}

package/src/layouts/PublicLayout/index.ts

@@ -1,10 +1,18 @@
 /**
  * Public Layout exports
+ *
+ * Each navbar and footer is a self-contained variant — pick one and pass it
+ * into `PublicLayout` via the `navbar` / `footer` slots.
  */
 
+// Layout container
 export { PublicLayout } from './PublicLayout';
 export type { PublicLayoutProps } from './PublicLayout';
-export { PublicNavigation, PublicMobileDrawer, PublicNavbar } from './components';
+
+// Context
+export { PublicLayoutProvider, usePublicLayout } from './context';
+
+// Shared types
 export type {
   PublicNavbarSurface,
   PublicNavbarVariant,
@@ -12,28 +20,38 @@ export type {
   PublicNavbarShellConfig,
   PublicNavLayout,
   PublicNavbarHeight,
+  PublicDesktopDropdownRenderer,
+  PublicDesktopDropdownRenderProps,
 } from './navbarTypes';
+
+// Hook types (consumers occasionally want them)
 export type { UseNavbarScrollOptions, UseNavbarScrollReturn } from './hooks/useNavbarScroll';
 export type { UseDropdownMenuReturn } from './hooks/useDropdownMenu';
-export type {
-  PublicDesktopDropdownRenderer,
-  PublicDesktopDropdownRenderProps,
-} from './components/PublicNavigation';
-export type { PublicNavbarConfig, PublicNavbarProps } from './components/PublicNavbar';
+
+// Primitives (for users who want to build a custom navbar)
 export {
-  PublicFooter,
-  FooterProjectInfo,
-  FooterMenuSections,
-  FooterBottom,
-  FooterSocialLinksComponent,
-  DjangoCFGLogo,
-} from './components/PublicFooter';
-export { ThemeBrandMark, ThemeBrandMarkImg } from './components/ThemeBrandMark';
-export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './components/ThemeBrandMark';
+  NavBrand,
+  NavActions,
+  NavActionItem,
+  NavDesktopItems,
+  ThemeBrandMark,
+  ThemeBrandMarkImg,
+  ExternalPrefixesProvider,
+  useExternalPrefixes,
+  isExternalPrefixHref,
+  SmartNavLink,
+} from './primitives';
 export type {
-  PublicFooterProps,
-  PublicFooterConfig,
-  FooterProjectInfoProps,
-} from './components/PublicFooter';
-export { PublicLayoutProvider, usePublicLayout } from './context';
+  NavAction,
+  ThemeBrandMarkProps,
+  ThemeBrandMarkImgProps,
+  ExternalPrefixes,
+  ExternalPrefixesProviderProps,
+  SmartNavLinkProps,
+} from './primitives';
+
+// Navbar variants
+export * from './navbars';
 
+// Footer variants
+export * from './footers';

package/src/layouts/PublicLayout/navbarTypes.ts

@@ -1,8 +1,18 @@
 /**
- * Shared navbar surface types — used by PublicNavigation (registration) and PublicLayout (main offset).
+ * Shared navbar types — consumed by all navbar variants and PublicLayout main offset.
  */
 
-export type PublicNavbarVariant = 'floating' | 'flush';
+import type { ReactNode } from 'react';
+
+import type { NavigationItem } from '../types';
+
+/**
+ * Navbar chrome variant used for main-content top spacing.
+ * - `floating` — rounded, inset shell (extra top offset for main).
+ * - `flush`    — edge-to-edge bar with bottom border.
+ * - `minimal`  — no shell at all (eesel-style): transparent, borderless.
+ */
+export type PublicNavbarVariant = 'floating' | 'flush' | 'minimal';
 
 export type PublicNavbarPosition = 'sticky' | 'fixed' | 'static';
 
@@ -18,7 +28,7 @@ export type PublicNavLayout = 'default' | 'brand-left' | 'centered' | 'split';
 /**
  * Navbar vertical padding / height.
  * - `sm` → py-2
- * - `md` → py-3.5  (default, matches current)
+ * - `md` → py-3.5  (default)
  * - `lg` → py-5
  */
 export type PublicNavbarHeight = 'sm' | 'md' | 'lg';
@@ -28,10 +38,23 @@ export interface PublicNavbarSurface {
   position: PublicNavbarPosition;
 }
 
-/** Floating bar + mobile drawer shell (rounding, width / centering). */
+/** Outer shell (rounding, centering). Used by `floating` / `flush` navbars. */
 export interface PublicNavbarShellConfig {
   /** Tailwind rounding class (e.g. `rounded-3xl`). */
   rounding?: string;
   /** Strip + drawer wrapper (e.g. `mx-auto max-w-7xl`). */
   className?: string;
 }
+
+// ─── Desktop dropdown renderer ───────────────────────────────────────────────
+
+export interface PublicDesktopDropdownRenderProps {
+  item: NavigationItem;
+  isOpen: boolean;
+  isActive: boolean;
+  close: () => void;
+  defaultPopover: ReactNode;
+  defaultItems: ReactNode;
+}
+
+export type PublicDesktopDropdownRenderer = (props: PublicDesktopDropdownRenderProps) => ReactNode;

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

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { publicFloatingChromeClassName } from '../../publicShellShadow';
+import { MobileDrawerShell, type MobileDrawerShellProps } from '../../shared';
+
+type FloatingMobileDrawerProps = Omit<MobileDrawerShellProps, 'panelClassName' | 'outerClassName'> & {
+  /** Tailwind rounding for the drawer panel. @default 'rounded-2xl' */
+  rounding?: string;
+  /** Outer wrapper className (e.g. `mx-auto max-w-7xl`). */
+  containerClassName?: string;
+};
+
+export function FloatingMobileDrawer({
+  rounding,
+  containerClassName,
+  ...rest
+}: FloatingMobileDrawerProps) {
+  return (
+    <MobileDrawerShell
+      {...rest}
+      panelClassName={cn(publicFloatingChromeClassName, rounding ?? 'rounded-2xl')}
+      outerClassName={containerClassName}
+    />
+  );
+}