@djangocfg/layouts 2.1.434 → 2.1.436

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.434",
+  "version": "2.1.436",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.434",
-    "@djangocfg/centrifugo": "^2.1.434",
-    "@djangocfg/debuger": "^2.1.434",
-    "@djangocfg/i18n": "^2.1.434",
-    "@djangocfg/monitor": "^2.1.434",
-    "@djangocfg/ui-core": "^2.1.434",
+    "@djangocfg/api": "^2.1.436",
+    "@djangocfg/centrifugo": "^2.1.436",
+    "@djangocfg/debuger": "^2.1.436",
+    "@djangocfg/i18n": "^2.1.436",
+    "@djangocfg/monitor": "^2.1.436",
+    "@djangocfg/ui-core": "^2.1.436",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,14 +125,14 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.434",
-    "@djangocfg/centrifugo": "^2.1.434",
-    "@djangocfg/debuger": "^2.1.434",
-    "@djangocfg/i18n": "^2.1.434",
-    "@djangocfg/monitor": "^2.1.434",
-    "@djangocfg/typescript-config": "^2.1.434",
-    "@djangocfg/ui-core": "^2.1.434",
-    "@djangocfg/ui-tools": "^2.1.434",
+    "@djangocfg/api": "^2.1.436",
+    "@djangocfg/centrifugo": "^2.1.436",
+    "@djangocfg/debuger": "^2.1.436",
+    "@djangocfg/i18n": "^2.1.436",
+    "@djangocfg/monitor": "^2.1.436",
+    "@djangocfg/typescript-config": "^2.1.436",
+    "@djangocfg/ui-core": "^2.1.436",
+    "@djangocfg/ui-tools": "^2.1.436",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -53,20 +53,6 @@ export interface PublicLayoutProps {
    */
   navbar?: ReactNode;
   footer?: ReactNode;
-  /**
-   * Optional background layer rendered behind navbar and content.
-   * Use `position: fixed; inset: 0; pointer-events: none` (or similar) on the element
-   * so it fills the viewport without affecting layout flow.
-   *
-   * @example
-   * ```tsx
-   * backgroundSlot={
-   *   <div className="fixed inset-0 -z-10 pointer-events-none"
-   *        style={{ background: 'radial-gradient(ellipse 60% 50% at 10% 0%, violet, transparent)' }} />
-   * }
-   * ```
-   */
-  backgroundSlot?: ReactNode;
   /**
    * When `auto` (default), `<main>` gets a small top offset from `PublicNavigation` surface
    * (`floating` vs `flush`). Set `none` if the page controls spacing itself.
@@ -119,7 +105,6 @@ export function PublicLayout({
   children,
   navbar,
   footer,
-  backgroundSlot,
   contentTopSpacing = 'auto',
   contentBottomSpacing = 'auto',
 }: PublicLayoutProps) {
@@ -149,9 +134,6 @@ export function PublicLayout({
 
   return (
     <PublicLayoutProvider value={contextValue}>
-      {/* Background slot — renders behind everything, including the sticky navbar */}
-      {backgroundSlot ?? null}
-
       <div className="min-h-screen flex flex-col">
         {navbar ?? null}
 

package/src/layouts/PublicLayout/README.md

@@ -19,7 +19,6 @@ import { PublicLayout, FloatingNavbar, DefaultFooter } from '@djangocfg/layouts'
 |---|---|---|---|
 | `navbar` | `ReactNode` | — | Pick a variant (below) or drop in your own. |
 | `footer` | `ReactNode` | — | Usually `DefaultFooter`. |
-| `backgroundSlot` | `ReactNode` | — | Full-viewport layer behind navbar + content. Use `fixed inset-0 -z-10 pointer-events-none`. |
 | `contentTopSpacing` | `'auto' \| 'none'` | `'auto'` | Auto pads `<main>` based on the navbar variant. |
 | `contentBottomSpacing` | `'auto' \| 'none' \| 'compact'` | `'auto'` | Bottom breathing room before footer. |
 

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

@@ -98,7 +98,9 @@ export function NavControls({
       {showThemeSwitcher && <ThemeModeControl size={size} />}
       {renderLocale && (
         <LocaleSwitcher
-          variant="dialog"
+          // Navbars use the compact dropdown list (not the fullscreen dialog) —
+          // a popover menu fits a dense top bar far better than a modal.
+          variant="dropdown"
           buttonVariant="outline"
           size={size === 'compact' ? 'sm' : 'default'}
           showTriggerLabel={false}

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

@@ -45,8 +45,12 @@ function subMenuLinkCls(active: boolean) {
   );
 }
 
+// Surface mirrors the navbar shell's glass (bg-background/72 + 10px blur,
+// card-tinted in dark) so the dropdown reads as the same translucent material
+// as the bar it drops from — previously it was bg-background/95 + blur-sm, i.e.
+// near-opaque with nothing to blur, so it looked flat next to the glassy bar.
 const popoverCls =
-  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/95 backdrop-blur-sm p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]';
+  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/72 backdrop-blur-[10px] dark:bg-card/80 p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]';
 
 function NavDesktopItemsRaw({
   items,