@djangocfg/layouts 2.1.274 → 2.1.276

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,7 +1,3 @@
-/**
- * Footer Bottom Section Component
- */
-
 'use client';
 
 import Link from 'next/link';

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

@@ -1,7 +1,3 @@
-/**
- * Footer Menu Sections Component
- */
-
 'use client';
 
 import Link from 'next/link';

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,20 @@ 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';
-export {
-  PublicFooter,
-  FooterProjectInfo,
-  FooterMenuSections,
-  FooterBottom,
-  FooterSocialLinksComponent,
-  DjangoCFGLogo,
-} from './components/PublicFooter';
-export { ThemeBrandMark, ThemeBrandMarkImg } from './components/ThemeBrandMark';
-export type { ThemeBrandMarkProps, ThemeBrandMarkImgProps } from './components/ThemeBrandMark';
-export type {
-  PublicFooterProps,
-  PublicFooterConfig,
-  FooterProjectInfoProps,
-} from './components/PublicFooter';
-export { PublicLayoutProvider, usePublicLayout } from './context';
 
+// Primitives (for users who want to build a custom navbar)
+export { NavBrand, NavActions, NavActionItem, NavDesktopItems, ThemeBrandMark, ThemeBrandMarkImg } from './primitives';
+export type { NavAction, ThemeBrandMarkProps, ThemeBrandMarkImgProps } 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}
+    />
+  );
+}

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

@@ -0,0 +1,117 @@
+/**
+ * FloatingNavbar — rounded, inset shell with soft shadow.
+ *
+ * Pairs with FloatingMobileDrawer (matching rounding + shadow).
+ */
+
+'use client';
+
+import React from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { publicFloatingChromeClassName } from '../../publicShellShadow';
+import type { NavAction } from '../../primitives/NavActionItem';
+import { NavbarShell } from '../../shared';
+import type {
+  PublicDesktopDropdownRenderer,
+  PublicNavbarHeight,
+  PublicNavbarPosition,
+  PublicNavbarShellConfig,
+  PublicNavLayout,
+} from '../../navbarTypes';
+import type { NavigationItem, UserMenuConfig } from '../../../types';
+
+import { FloatingMobileDrawer } from './FloatingMobileDrawer';
+
+export interface FloatingNavbarConfig {
+  shell?: PublicNavbarShellConfig;
+  brand?: React.ReactNode;
+  /** @default '/' */
+  brandHref?: string;
+  navigation?: NavigationItem[];
+  userMenu?: UserMenuConfig;
+  /** @default 'sticky' */
+  navbarPosition?: PublicNavbarPosition;
+  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
+  desktopMaxPrimaryItems?: number;
+  /** @default 'default' */
+  navLayout?: PublicNavLayout;
+  /** @default 'md' */
+  navbarHeight?: PublicNavbarHeight;
+  /** @default false */
+  hideNavOnScroll?: boolean;
+  /** @default false */
+  transparent?: boolean;
+  /** @default 40 */
+  transparentThreshold?: number;
+  /** Typed CTA pills (Book a demo / Get started / …) before UserMenu. */
+  actions?: NavAction[];
+  /** Arbitrary ReactNode between actions and UserMenu. */
+  actionsLeadingSlot?: React.ReactNode;
+  /** Arbitrary ReactNode after the mobile toggle. */
+  actionsTrailingSlot?: React.ReactNode;
+}
+
+export interface FloatingNavbarProps {
+  config: FloatingNavbarConfig;
+}
+
+export function FloatingNavbar({ config }: FloatingNavbarProps) {
+  const navigation = config.navigation ?? [];
+  const rounding = config.shell?.rounding;
+  const containerClassName = config.shell?.className;
+  const position = config.navbarPosition ?? 'sticky';
+
+  const outerClassName = cn(
+    position === 'fixed' ? 'fixed' : position === 'static' ? 'static' : 'sticky',
+    'top-3 px-3 sm:px-4 lg:px-6',
+  );
+
+  const shapeClassName = cn(
+    'mx-auto w-full',
+    rounding ?? 'rounded-2xl',
+    publicFloatingChromeClassName,
+    containerClassName,
+    '!border-0 dark:!border dark:!border-border/75',
+  );
+
+  return (
+    <>
+      <NavbarShell
+        variant="floating"
+        position={position}
+        brand={config.brand}
+        brandHref={config.brandHref}
+        navigation={navigation}
+        userMenu={config.userMenu}
+        renderDesktopDropdown={config.renderDesktopDropdown}
+        desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
+        navLayout={config.navLayout}
+        navbarHeight={config.navbarHeight}
+        hideNavOnScroll={config.hideNavOnScroll}
+        transparent={config.transparent}
+        transparentThreshold={config.transparentThreshold}
+        actions={config.actions}
+        actionsLeadingSlot={config.actionsLeadingSlot}
+        actionsTrailingSlot={config.actionsTrailingSlot}
+        outerClassName={outerClassName}
+        shapeClassName={shapeClassName}
+        shapeForState={({ scrolled, transparent }) =>
+          cn(
+            transparent && 'transition-[background-color,backdrop-filter] duration-200 ease-out',
+            !transparent || scrolled
+              ? 'bg-background/72 backdrop-blur-[10px] dark:bg-card/80'
+              : 'bg-transparent backdrop-blur-0 dark:bg-transparent',
+          )
+        }
+      />
+      <FloatingMobileDrawer
+        navigation={navigation}
+        userMenu={config.userMenu}
+        containerClassName={containerClassName}
+        rounding={rounding}
+      />
+    </>
+  );
+}

package/src/layouts/PublicLayout/navbars/FloatingNavbar/index.ts

@@ -0,0 +1,3 @@
+export { FloatingNavbar } from './FloatingNavbar';
+export type { FloatingNavbarConfig, FloatingNavbarProps } from './FloatingNavbar';
+export { FloatingMobileDrawer } from './FloatingMobileDrawer';

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

@@ -0,0 +1,19 @@
+'use client';
+
+import React from 'react';
+
+import { MobileDrawerShell, type MobileDrawerShellProps } from '../../shared';
+
+type FlushMobileDrawerProps = Omit<MobileDrawerShellProps, 'panelClassName' | 'outerClassName'> & {
+  containerClassName?: string;
+};
+
+export function FlushMobileDrawer({ containerClassName, ...rest }: FlushMobileDrawerProps) {
+  return (
+    <MobileDrawerShell
+      {...rest}
+      outerClassName={containerClassName}
+      panelClassName="border border-border/40 dark:border-border/70 rounded-xl"
+    />
+  );
+}