@djangocfg/layouts 2.1.256 → 2.1.259

package/src/layouts/AppLayout/index.ts

@@ -7,10 +7,16 @@ export type {
   AppLayoutProps,
   AppLayoutLayoutsConfig,
   AppLayoutBaseAppConfig,
+  AppLayoutLayoutComponentProps,
+  AppLayoutPublicChrome,
   LayoutMode,
   I18nLayoutConfig,
+  PublicMainTopSpacing,
+  PublicMainBottomSpacing,
 } from './AppLayout';
 
+export { mergeAppLayoutPublicChrome } from './AppLayout';
+
 export { BaseApp } from './BaseApp';
 export type { BaseAppProps } from './BaseApp';
 

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -15,7 +15,7 @@ import { useAuth } from '@djangocfg/api/auth';
 import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-nextjs/components';
 
-import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
+import type { AppLayoutPublicChrome, I18nLayoutConfig } from '../AppLayout/AppLayout';
 import { UserMenuConfig } from '../types';
 import { PrivateContent, PrivateSidebar } from './components';
 
@@ -92,6 +92,8 @@ export interface PrivateLayoutProps {
   contentPadding?: 'none' | 'default';
   /** i18n configuration for locale switching */
   i18n?: I18nLayoutConfig;
+  /** Reserved for `AppLayout` passthrough (`publicChrome`); unused in this layout. */
+  publicChrome?: AppLayoutPublicChrome;
 }
 
 export function PrivateLayout({

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

@@ -7,7 +7,7 @@
 
 import React, { ReactNode } from 'react';
 
-import { SidebarTrigger } from '@djangocfg/ui-nextjs/components';
+import { SidebarTrigger, useSidebar } from '@djangocfg/ui-nextjs/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 interface PrivateContentProps {
@@ -22,14 +22,25 @@ export function PrivateContent({
   padding = 'default',
   hasSidebar = true,
 }: PrivateContentProps) {
-  /** Space for fixed FAB + safe area so content does not sit under the button. */
+  const { isMobile, openMobile } = useSidebar();
+
+  /**
+   * Space for fixed FAB + safe area so content does not sit under the button.
+   * Tighter when the mobile drawer is closed (FAB only). When the drawer is open, a bit more
+   * room avoids the first line sitting under the overlay edge.
+   */
   const mobileFabClearance =
     hasSidebar &&
-    'max-md:pt-[max(4.75rem,calc(3.25rem+env(safe-area-inset-top,0px)))]';
+    (isMobile && !openMobile
+      ? 'max-md:pt-[max(3.75rem,calc(3rem+env(safe-area-inset-top,0px)))]'
+      : 'max-md:pt-[max(4rem,calc(3.25rem+env(safe-area-inset-top,0px)))]');
 
   const scrollAreaClass = cn(
     'min-h-0 flex-1 overflow-y-auto',
-    padding === 'default' && 'p-4 sm:p-6 lg:p-8',
+    padding === 'default' && [
+      'pt-4 px-4 sm:pt-6 sm:px-6 lg:pt-8 lg:px-8',
+      'pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))] lg:pb-[calc(2rem+env(safe-area-inset-bottom,0px))]',
+    ],
     mobileFabClearance,
   );
 

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

@@ -48,9 +48,9 @@ function navDensityFromCount(n: number): NavDensity {
  * Nav rows use semantic sidebar tokens so light/dark follows ui-core theme vars.
  */
 const navItemClass = cn(
-  'border-0 font-normal shadow-none transition-colors',
-  'text-sidebar-foreground/70',
-  'data-[active=true]:font-medium data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+  'border-0 font-medium shadow-none transition-colors',
+  'text-sidebar-foreground/80',
+  'data-[active=true]:font-semibold data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
   'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
   'data-[active=true]:hover:bg-sidebar-accent',
   '[&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/70 [&>svg]:opacity-85',

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -16,26 +16,31 @@
  * <PublicLayout
  *   navbar={
  *     <PublicNavbar
- *       logo="/logo.svg"
- *       siteName="My App"
- *       navigation={[
- *         { label: 'Home', href: '/' },
- *         { label: 'Docs', href: '/docs' }
- *       ]}
+ *       config={{
+ *         brand: <YourNavbarBrand />,
+ *         navigation: [
+ *           { label: 'Home', href: '/' },
+ *           { label: 'Docs', href: '/docs' },
+ *         ],
+ *       }}
  *     />
  *   }
  * >
  *   {children}
  * </PublicLayout>
  * ```
+ * Pass `brand` on `PublicNavbar` (`ReactNode` or string).
  */
 
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { PublicLayoutProvider } from './context';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { PublicLayoutProvider, usePublicLayoutOptional } from './context';
+import type { PublicNavbarSurface } from './navbarTypes';
 
 export interface PublicLayoutProps {
   children: ReactNode;
@@ -48,36 +53,96 @@ export interface PublicLayoutProps {
    */
   navbar?: ReactNode;
   footer?: ReactNode;
+  /**
+   * When `auto` (default), `<main>` gets a small top offset from `PublicNavigation` surface
+   * (`floating` vs `flush`). Set `none` if the page controls spacing itself.
+   */
+  contentTopSpacing?: 'auto' | 'none';
+  /**
+   * When `auto` (default), `<main>` gets bottom padding before the footer so the last block of
+   * page content is not flush against the footer edge. Set `none` if the page/footer slot handles it.
+   * `compact` uses a smaller gap than `auto`.
+   */
+  contentBottomSpacing?: 'auto' | 'none' | 'compact';
+}
+
+function PublicMain({
+  children,
+  contentTopSpacing,
+  contentBottomSpacing,
+}: {
+  children: ReactNode;
+  contentTopSpacing: 'auto' | 'none';
+  contentBottomSpacing: 'auto' | 'none' | 'compact';
+}) {
+  const ctx = usePublicLayoutOptional();
+  const variant = ctx?.navbarSurface?.variant;
+
+  const topClass =
+    contentTopSpacing === 'none'
+      ? undefined
+      : !variant
+        ? 'pt-4 sm:pt-5'
+        : variant === 'floating'
+          ? 'pt-2 sm:pt-3 lg:pt-4'
+          : 'pt-1 sm:pt-2 lg:pt-3';
+
+  const bottomClass =
+    contentBottomSpacing === 'none'
+      ? undefined
+      : contentBottomSpacing === 'compact'
+        ? 'pb-4 sm:pb-6 lg:pb-8'
+        : 'pb-8 sm:pb-10 lg:pb-12';
+
+  return (
+    <main className={cn('flex-1', topClass, bottomClass)}>
+      {children}
+    </main>
+  );
 }
 
 export function PublicLayout({
   children,
   navbar,
   footer,
+  contentTopSpacing = 'auto',
+  contentBottomSpacing = 'auto',
 }: PublicLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [navbarSurface, setNavbarSurfaceState] = useState<PublicNavbarSurface | null>(null);
   const pathname = usePathname();
 
+  const setNavbarSurface = useCallback((surface: PublicNavbarSurface | null) => {
+    setNavbarSurfaceState(surface);
+  }, []);
+
   // Close mobile menu on route change
   useEffect(() => {
     setMobileMenuOpen(false);
   }, [pathname]);
 
-  const contextValue = useMemo(() => ({
-    mobileMenuOpen,
-    toggleMobileMenu: () => setMobileMenuOpen((prev) => !prev),
-    closeMobileMenu: () => setMobileMenuOpen(false),
-  }), [
-    mobileMenuOpen,
-  ]);
+  const contextValue = useMemo(
+    () => ({
+      mobileMenuOpen,
+      toggleMobileMenu: () => setMobileMenuOpen((prev) => !prev),
+      closeMobileMenu: () => setMobileMenuOpen(false),
+      navbarSurface,
+      setNavbarSurface,
+    }),
+    [mobileMenuOpen, navbarSurface, setNavbarSurface],
+  );
 
   return (
     <PublicLayoutProvider value={contextValue}>
       <div className="min-h-screen flex flex-col">
         {navbar ?? null}
 
-        {/* Main Content */}
-        <main className="flex-1">{children}</main>
+        <PublicMain
+          contentTopSpacing={contentTopSpacing}
+          contentBottomSpacing={contentBottomSpacing}
+        >
+          {children}
+        </PublicMain>
 
         {footer ?? null}
       </div>

package/src/layouts/PublicLayout/components/PublicFooter/FooterProjectInfo.tsx

@@ -6,16 +6,15 @@
 
 import React from 'react';
 
-import { DjangoCFGLogo } from './DjangoCFGLogo';
 import { FooterSocialLinksComponent } from './FooterSocialLinks';
 
 import type { LucideIcon } from 'lucide-react';
 import type { FooterSocialLinks } from './types';
 
 export interface FooterProjectInfoProps {
-  siteName?: string;
+  /** Brand row: custom node, or a plain string (styled title). */
+  brand?: React.ReactNode;
   description?: string;
-  logo?: string;
   badge?: {
     icon: LucideIcon;
     text: string;
@@ -25,35 +24,29 @@ export interface FooterProjectInfoProps {
 }
 
 export function FooterProjectInfo({
-  siteName,
+  brand,
   description,
-  logo,
   badge,
   socialLinks,
   variant = 'desktop',
 }: FooterProjectInfoProps) {
   const isMobile = variant === 'mobile';
 
+  const showBrand = brand != null && brand !== '' && brand !== false;
+
   return (
     <div className={isMobile ? 'text-center space-y-4 mb-6' : 'space-y-4 lg:flex-shrink-0 lg:w-80'}>
-      <div className={isMobile ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2'}>
-        {logo ? (
-          <div className={isMobile ? 'w-6 h-6 flex items-center justify-center' : 'w-8 h-8 flex items-center justify-center'}>
-            <img
-              src={logo}
-              alt={`${siteName || 'Project'} Logo`}
-              className="w-full h-full object-contain"
-            />
-          </div>
-        ) : (
-          <DjangoCFGLogo size={isMobile ? 24 : 32} className="text-foreground" />
-        )}
-        {siteName && (
-          <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-lg font-semibold text-foreground'}>
-            {siteName}
-          </span>
-        )}
-      </div>
+      {showBrand && (
+        <div className={isMobile ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2'}>
+          {typeof brand === 'string' ? (
+            <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-lg font-semibold text-foreground'}>
+              {brand}
+            </span>
+          ) : (
+            brand
+          )}
+        </div>
+      )}
 
       {description && (
         <p className={isMobile ? 'text-muted-foreground text-sm leading-relaxed max-w-md mx-auto' : 'text-muted-foreground text-xs leading-relaxed max-w-xs'}>
@@ -63,7 +56,7 @@ export function FooterProjectInfo({
 
       {badge && !isMobile && (
         <div className="pt-2">
-          <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-gradient-to-r from-primary/80 to-secondary/60 border border-primary/30 shadow-brand text-xs font-semibold text-primary-foreground">
+          <span className="inline-flex items-center gap-2 rounded-full border border-primary/25 bg-primary/15 px-3 py-1 text-xs font-semibold text-primary">
             <badge.icon className="w-4 h-4" />
             {badge.text}
           </span>

package/src/layouts/PublicLayout/components/PublicFooter/PublicFooter.tsx

@@ -69,38 +69,40 @@ function ThemeModeControl() {
   );
 }
 
-export function PublicFooter({
-  projectInfo,
-  description,
-  badge,
-  socialLinks,
-  links = [],
-  menuSections = [],
-  showProjectInfo = true,
-  menuColumnMinWidth = 180,
-  menuMaxColumns = 5,
-  copyright: copyrightProp,
-  credits: creditsProp,
-  variant = 'full',
-  containerClassName,
-  i18n,
-}: PublicFooterProps) {
-  // Prepare data BEFORE render
+export function PublicFooter({ config }: PublicFooterProps) {
+  const variant = config.variant ?? 'full';
+  const shellClass = config.shell?.className;
+  const brandSlot = config.brand?.slot;
+  const description = config.brand?.description;
+  const badge = config.brand?.badge;
+  const showBrandColumn = config.brand?.showColumn ?? true;
+  const menuSections = config.menus?.sections ?? [];
+  const menuColumnMinWidth = config.menus?.columnMinWidth ?? 180;
+  const menuMaxColumns = config.menus?.maxColumns ?? 5;
+  const links = config.links ?? [];
+  const socialLinks = config.social;
+  const copyrightProp = config.meta?.copyright;
+  const creditsProp = config.meta?.credits;
+  const i18n = config.i18n;
+  const showThemeSwitcher = config.controls?.showThemeSwitcher !== false;
+  const showLocaleSwitcher =
+    config.controls?.showLocaleSwitcher !== false && Boolean(i18n);
+  const showFooterControlsRow = showThemeSwitcher || showLocaleSwitcher;
+
   const currentYear = new Date().getFullYear();
   const copyright = copyrightProp || `© ${currentYear}. All rights reserved.`;
   const credits = creditsProp;
 
-  // Simple variant - minimal footer
+  /** Extra space below footer on devices with a home indicator / gesture bar. */
+  const footerSafeBottom = 'pb-[env(safe-area-inset-bottom,0px)]';
+
+  const footerSurfaceClass =
+    'border-t border-border/60 bg-muted/35 mt-auto';
+
   if (variant === 'simple') {
     return (
-      <footer
-        className="border-t border-border/60 mt-auto"
-        style={{
-          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
-          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
-        }}
-      >
-        <div className={`mx-auto px-4 py-4 ${containerClassName || 'w-full'}`}>
+      <footer className={`${footerSurfaceClass} ${footerSafeBottom}`}>
+        <div className={`mx-auto px-4 py-4 ${shellClass || 'w-full'}`}>
           <div className="text-center">
             <div className="text-sm text-muted-foreground">{copyright}</div>
           </div>
@@ -109,27 +111,13 @@ export function PublicFooter({
     );
   }
 
-  // Compact variant - single line with logo and links
   if (variant === 'compact') {
     return (
-      <footer
-        className="border-t border-border/60 mt-auto"
-        style={{
-          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
-          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
-        }}
-      >
-        <div className={`mx-auto px-4 sm:px-6 lg:px-8 py-8 ${containerClassName || 'w-full'}`}>
-          {/* Main row: logo left, links right */}
+      <footer className={`${footerSurfaceClass} ${footerSafeBottom}`}>
+        <div className={`mx-auto px-4 sm:px-6 lg:px-8 py-8 ${shellClass || 'w-full'}`}>
           <div className="flex flex-col sm:flex-row items-center justify-between gap-6">
-            {/* Logo + Name */}
-            {projectInfo ?? (
-              <div className="flex items-center gap-3">
-                <span className="text-lg font-semibold text-foreground">Project</span>
-              </div>
-            )}
+            {brandSlot ? <div className="flex items-center gap-3">{brandSlot}</div> : null}
 
-            {/* Links */}
             {links.length > 0 && (
               <div className="flex flex-wrap items-center justify-center gap-6">
                 {links.map((link) =>
@@ -157,7 +145,6 @@ export function PublicFooter({
             )}
           </div>
 
-          {/* Bottom row: copyright + credits */}
           <div className="mt-6 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-muted-foreground">
             <span>{copyright}</span>
             {credits && (
@@ -182,16 +169,10 @@ export function PublicFooter({
 
   return (
     <>
-      <footer
-        className="lg:hidden border-t border-border/60 mt-auto"
-        style={{
-          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
-          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
-        }}
-      >
-        <div className={`mx-auto px-4 py-8 ${containerClassName || 'w-full'}`}>
-          {showProjectInfo && (
-            projectInfo ?? (
+      <footer className={`lg:hidden ${footerSurfaceClass} ${footerSafeBottom}`}>
+        <div className={`mx-auto px-4 py-8 ${shellClass || 'w-full'}`}>
+          {showBrandColumn && (
+            brandSlot ?? (
               <FooterProjectInfo
                 description={description}
                 socialLinks={socialLinks}
@@ -200,7 +181,6 @@ export function PublicFooter({
             )
           )}
 
-          {/* Quick Links */}
           {links.length > 0 && (
             <div className="flex flex-wrap justify-center gap-3 mb-6">
               {links.map((link) =>
@@ -242,33 +222,29 @@ export function PublicFooter({
             )}
           </div>
 
-          <div className="mt-5 pt-4 border-t border-border/60 flex items-center justify-center gap-2">
-            <ThemeModeControl />
-            {i18n && (
-              <LocaleSwitcher
-                locale={i18n.locale}
-                locales={i18n.locales}
-                onChange={i18n.onLocaleChange}
-                variant="outline"
-                size="default"
-                className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
-              />
-            )}
-          </div>
+          {showFooterControlsRow && (
+            <div className="mt-5 flex items-center justify-center gap-2 border-t border-border/60 pt-4">
+              {showThemeSwitcher && <ThemeModeControl />}
+              {showLocaleSwitcher && i18n && (
+                <LocaleSwitcher
+                  locale={i18n.locale}
+                  locales={i18n.locales}
+                  onChange={i18n.onLocaleChange}
+                  variant="outline"
+                  size="default"
+                  className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
+                />
+              )}
+            </div>
+          )}
         </div>
       </footer>
-      <footer
-        className="max-lg:hidden border-t border-border/60 mt-auto"
-        style={{
-          background: 'linear-gradient(to bottom, hsl(var(--accent) / 0.26), hsl(var(--background) / 0.97) 42%, hsl(var(--accent) / 0.34))',
-          boxShadow: 'inset 0 1px 0 hsl(var(--border) / 0.75), inset 0 14px 26px hsl(var(--accent) / 0.18)',
-        }}
-      >
-        <div className={`mx-auto px-6 sm:px-8 lg:px-10 py-14 ${containerClassName || 'w-full'}`}>
+      <footer className={`max-lg:hidden ${footerSurfaceClass} ${footerSafeBottom}`}>
+        <div className={`mx-auto px-6 sm:px-8 lg:px-10 py-14 ${shellClass || 'w-full'}`}>
           <div className="grid grid-cols-12 gap-10 lg:gap-14">
-            {showProjectInfo && (
+            {showBrandColumn && (
               <div className="col-span-12 lg:col-span-4">
-                {projectInfo ?? (
+                {brandSlot ?? (
                   <FooterProjectInfo
                     description={description}
                     badge={badge}
@@ -279,7 +255,7 @@ export function PublicFooter({
               </div>
             )}
 
-            <div className={showProjectInfo ? 'col-span-12 lg:col-span-8 lg:pl-8' : 'col-span-12'}>
+            <div className={showBrandColumn ? 'col-span-12 lg:col-span-8 lg:pl-8' : 'col-span-12'}>
               <FooterMenuSections
                 menuSections={menuSections}
                 minColumnWidth={menuColumnMinWidth}
@@ -288,12 +264,18 @@ export function PublicFooter({
             </div>
           </div>
 
-          <div className="mt-12 pt-5 border-t border-border/60 grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] items-center gap-4 lg:gap-6">
-            <div className="text-xs text-muted-foreground text-center lg:text-left lg:justify-self-start">
+          <div
+            className={
+              showFooterControlsRow
+                ? 'mt-12 grid grid-cols-1 items-center gap-4 border-t border-border/60 pt-5 lg:grid-cols-[1fr_auto_1fr] lg:gap-6'
+                : '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>
 
-            <div className="min-w-0 flex items-center justify-center gap-3 text-xs text-muted-foreground flex-wrap">
+            <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">
               {credits && (
                 credits.url ? (
                   <a href={credits.url} target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors whitespace-nowrap">
@@ -322,19 +304,21 @@ export function PublicFooter({
               )}
             </div>
 
-            <div className="flex items-center justify-center lg:justify-self-end gap-2">
-              <ThemeModeControl />
-              {i18n && (
-                <LocaleSwitcher
-                  locale={i18n.locale}
-                  locales={i18n.locales}
-                  onChange={i18n.onLocaleChange}
-                  variant="outline"
-                  size="default"
-                  className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
-                />
-              )}
-            </div>
+            {showFooterControlsRow && (
+              <div className="flex items-center justify-center gap-2 lg:justify-self-end">
+                {showThemeSwitcher && <ThemeModeControl />}
+                {showLocaleSwitcher && i18n && (
+                  <LocaleSwitcher
+                    locale={i18n.locale}
+                    locales={i18n.locales}
+                    onChange={i18n.onLocaleChange}
+                    variant="outline"
+                    size="default"
+                    className="h-10 rounded-full border-border/60 bg-muted/30 text-sm hover:bg-muted/40"
+                  />
+                )}
+              </div>
+            )}
           </div>
         </div>
       </footer>

package/src/layouts/PublicLayout/components/PublicFooter/index.ts

@@ -4,6 +4,7 @@
 
 export { PublicFooter } from './PublicFooter';
 export { FooterProjectInfo } from './FooterProjectInfo';
+export type { FooterProjectInfoProps } from './FooterProjectInfo';
 export { FooterMenuSections } from './FooterMenuSections';
 export { FooterBottom } from './FooterBottom';
 export { FooterSocialLinksComponent } from './FooterSocialLinks';
@@ -11,6 +12,7 @@ export { DjangoCFGLogo } from './DjangoCFGLogo';
 
 export type {
   PublicFooterProps,
+  PublicFooterConfig,
   FooterLink,
   FooterMenuSection,
   FooterSocialLinks,

package/src/layouts/PublicLayout/components/PublicFooter/types.ts

@@ -29,39 +29,49 @@ export interface FooterSocialLinks {
   email?: string;
 }
 
-export interface PublicFooterProps {
-  /** Custom project/brand block node (full control over footer brand area) */
-  projectInfo?: ReactNode;
-  /** Project description */
-  description?: string;
-  /** Optional badge */
-  badge?: {
-    icon: LucideIcon;
-    text: string;
+export interface PublicFooterConfig {
+  variant?: 'full' | 'compact' | 'simple';
+  shell?: {
+    className?: string;
+  };
+  brand?: {
+    /** Custom brand column (`ReactNode`) */
+    slot?: ReactNode;
+    description?: string;
+    showColumn?: boolean;
+    badge?: {
+      icon: LucideIcon;
+      text: string;
+    };
+  };
+  menus?: {
+    sections?: FooterMenuSection[];
+    columnMinWidth?: number;
+    maxColumns?: number;
   };
-  /** Social media links */
-  socialLinks?: FooterSocialLinks;
-  /** Quick links (bottom bar) */
   links?: FooterLink[];
-  /** Footer menu sections (desktop grid) */
-  menuSections?: FooterMenuSection[];
-  /** Show brand block (logo + project info) in footer */
-  showProjectInfo?: boolean;
-  /** Minimum width in pixels for each footer menu column */
-  menuColumnMinWidth?: number;
-  /** Soft max column count for menu grid */
-  menuMaxColumns?: number;
-  /** Copyright text (auto-generated if not provided) */
-  copyright?: string;
-  /** Credits */
-  credits?: {
-    text: string;
-    url?: string;
+  meta?: {
+    copyright?: string;
+    credits?: {
+      text: string;
+      url?: string;
+    };
   };
-  /** Variant: full (with all sections), compact (single line with logo and links), or simple (minimal) */
-  variant?: 'full' | 'compact' | 'simple';
-  /** Custom className for content container (e.g. "max-w-4xl" or "container") */
-  containerClassName?: string;
-  /** i18n configuration for language switcher */
+  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.
+   */
+  controls?: {
+    /** Light / system / dark toggle. @default true */
+    showThemeSwitcher?: boolean;
+    /** Requires `i18n`. @default true */
+    showLocaleSwitcher?: boolean;
+  };
+}
+
+export interface PublicFooterProps {
+  config: PublicFooterConfig;
 }