@djangocfg/layouts 2.1.462 → 2.1.464

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.462",
+  "version": "2.1.464",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,10 +89,10 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.462",
-    "@djangocfg/centrifugo": "^2.1.462",
-    "@djangocfg/i18n": "^2.1.462",
-    "@djangocfg/ui-core": "^2.1.462",
+    "@djangocfg/api": "^2.1.464",
+    "@djangocfg/centrifugo": "^2.1.464",
+    "@djangocfg/i18n": "^2.1.464",
+    "@djangocfg/ui-core": "^2.1.464",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -109,7 +109,7 @@
     "tailwindcss-animate": "^1.0.7",
     "zod": "^4.3.6",
     "zustand": "^5.0.0",
-    "@djangocfg/devtools": "^2.1.462"
+    "@djangocfg/devtools": "^2.1.464"
   },
   "peerDependenciesMeta": {
     "@djangocfg/devtools": {
@@ -124,12 +124,12 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.462",
-    "@djangocfg/centrifugo": "^2.1.462",
-    "@djangocfg/i18n": "^2.1.462",
-    "@djangocfg/typescript-config": "^2.1.462",
-    "@djangocfg/ui-core": "^2.1.462",
-    "@djangocfg/ui-tools": "^2.1.462",
+    "@djangocfg/api": "^2.1.464",
+    "@djangocfg/centrifugo": "^2.1.464",
+    "@djangocfg/i18n": "^2.1.464",
+    "@djangocfg/typescript-config": "^2.1.464",
+    "@djangocfg/ui-core": "^2.1.464",
+    "@djangocfg/ui-tools": "^2.1.464",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
@@ -137,7 +137,7 @@
     "next-intl": "^4.9.1",
     "typescript": "^5.9.3",
     "zustand": "^5.0.9",
-    "@djangocfg/devtools": "^2.1.462"
+    "@djangocfg/devtools": "^2.1.464"
   },
   "publishConfig": {
     "access": "public"

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

@@ -87,7 +87,6 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
     rounding ?? 'rounded-2xl',
     publicFloatingChromeClassName,
     containerClassName,
-    '!border-0 dark:!border dark:!border-border/75',
   );
 
   return (

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

@@ -2,6 +2,7 @@
 
 import { ChevronDown } from 'lucide-react';
 import React, { memo } from 'react';
+import { createPortal } from 'react-dom';
 
 import { Button, Link } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
@@ -23,22 +24,22 @@ interface NavDesktopItemsProps {
 }
 
 const navItemCls = cn(
-  'inline-flex min-h-9 items-center justify-center gap-1 rounded-full border-0 px-4 py-1.5 text-sm font-medium',
+  'inline-flex min-h-9 items-center justify-center gap-1 rounded-full border border-transparent px-4 py-1.5 text-sm !font-medium',
   'ring-0 focus-visible:ring-0',
   'text-foreground/90 transition-colors',
-  'hover:bg-accent/55 hover:text-foreground',
+  'surface-hover hover:text-foreground',
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
 );
 
 const navItemActiveCls =
-  'border-0 bg-accent font-semibold text-foreground shadow-sm dark:bg-muted dark:shadow-none';
+  'border-transparent bg-accent text-foreground shadow-sm dark:bg-muted dark:shadow-none';
 
 const labelCls = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
 
 function subMenuLinkCls(active: boolean) {
   return cn(
     'flex min-h-9 min-w-0 max-w-[min(17rem,calc(100vw-5rem))] items-center rounded-full border-0 px-4 py-2 text-sm font-medium transition-colors',
-    'hover:bg-accent/55',
+    'surface-hover',
     active
       ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:bg-muted/90 dark:shadow-none'
       : 'border-0 text-foreground/90',
@@ -46,10 +47,54 @@ function subMenuLinkCls(active: boolean) {
 }
 
 // Real glass: low-opacity surface so the blur actually shows the page behind
-// it. backdrop-blur-2xl + saturate gives the frosted look; the previous
-// bg-card/80 (80% opaque) let almost nothing through, so the blur was invisible.
+// it. The package-level nav-dropdown-glass utility keeps the frosted effect
+// present even when the consuming app does not scan layout sources.
 const popoverCls =
-  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-white/10 bg-background/55 backdrop-blur-2xl backdrop-saturate-150 dark:bg-card/55 p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.45)]';
+  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 nav-dropdown-glass p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.45)]';
+
+const portalPopoverCls =
+  'fixed z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 nav-dropdown-glass backdrop-blur-[5px] backdrop-saturate-150 p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.45)]';
+
+function DesktopDropdownPortal({
+  anchor,
+  children,
+  onMouseEnter,
+  onMouseLeave,
+}: {
+  anchor: HTMLElement;
+  children: React.ReactNode;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+}) {
+  const [position, setPosition] = React.useState({ left: 0, top: 0 });
+
+  React.useLayoutEffect(() => {
+    const updatePosition = () => {
+      const rect = anchor.getBoundingClientRect();
+      setPosition({ left: rect.left, top: rect.bottom + 4 });
+    };
+
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [anchor]);
+
+  return createPortal(
+    <div
+      className={portalPopoverCls}
+      style={position}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}
 
 function NavDesktopItemsRaw({
   items,
@@ -60,6 +105,7 @@ function NavDesktopItemsRaw({
   renderDesktopDropdown,
 }: NavDesktopItemsProps) {
   const { openDropdownKey, scheduleOpen, scheduleClose, closeDropdown } = dropdown;
+  const [portalAnchor, setPortalAnchor] = React.useState<{ key: string; element: HTMLElement } | null>(null);
 
   const { visibleCount, containerRef, itemRef, measured } = useResponsiveOverflow({
     total: items.length,
@@ -115,11 +161,24 @@ function NavDesktopItemsRaw({
         </div>
       );
 
+      const defaultPortalPopover = isOpen && portalAnchor?.key === key ? (
+        <DesktopDropdownPortal
+          anchor={portalAnchor.element}
+          onMouseEnter={() => { scheduleOpen(key); }}
+          onMouseLeave={() => scheduleClose(key)}
+        >
+          {defaultItems}
+        </DesktopDropdownPortal>
+      ) : null;
+
       return (
         <div
           key={key}
           className="relative"
-          onMouseEnter={() => scheduleOpen(key)}
+          onMouseEnter={(event) => {
+            setPortalAnchor({ key, element: event.currentTarget });
+            scheduleOpen(key);
+          }}
           onMouseLeave={() => scheduleClose(key)}
         >
           <Button
@@ -145,7 +204,7 @@ function NavDesktopItemsRaw({
           {isOpen && (
             renderDesktopDropdown
               ? renderDesktopDropdown({ item, isOpen, isActive, close: closeDropdown, defaultPopover, defaultItems })
-              : defaultPopover
+              : defaultPortalPopover
           )}
         </div>
       );

package/src/layouts/PublicLayout/publicShellShadow.ts

@@ -1,11 +1,11 @@
 /**
  * Shared “floating glass” chrome for navbar + mobile drawer.
  *
- * Light: barely-there lift. Dark: one soft outer shadow (border already defines the edge).
+ * Both themes use a semantic border; dark gets a slightly stronger edge.
  */
 export const publicFloatingChromeClassName =
   [
-    '!border-0 ring-0 outline-none',
+    'border border-border/55 ring-0 outline-none',
     'shadow-[0_1px_6px_rgba(0,0,0,0.028)]',
     'dark:!border dark:!border-border/75',
     'dark:shadow-[0_3px_14px_rgba(0,0,0,0.07)]',

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

@@ -182,7 +182,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                                   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
                                   subActive
                                     ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted/90 dark:shadow-none'
-                                    : 'border-0 text-muted-foreground hover:bg-accent/55 hover:text-foreground',
+                                    : 'border-0 text-muted-foreground surface-hover hover:text-foreground',
                                 )}
                               >
                                 {subItem.label}
@@ -230,4 +230,3 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
     </>
   );
 }
-