@djangocfg/layouts 2.1.292 → 2.1.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.292",
+  "version": "2.1.294",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.292",
-    "@djangocfg/centrifugo": "^2.1.292",
-    "@djangocfg/debuger": "^2.1.292",
-    "@djangocfg/i18n": "^2.1.292",
-    "@djangocfg/monitor": "^2.1.292",
-    "@djangocfg/ui-core": "^2.1.292",
-    "@djangocfg/ui-nextjs": "^2.1.292",
-    "@djangocfg/ui-tools": "^2.1.292",
+    "@djangocfg/api": "^2.1.294",
+    "@djangocfg/centrifugo": "^2.1.294",
+    "@djangocfg/debuger": "^2.1.294",
+    "@djangocfg/i18n": "^2.1.294",
+    "@djangocfg/monitor": "^2.1.294",
+    "@djangocfg/ui-core": "^2.1.294",
+    "@djangocfg/ui-nextjs": "^2.1.294",
+    "@djangocfg/ui-tools": "^2.1.294",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -110,15 +110,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.292",
-    "@djangocfg/centrifugo": "^2.1.292",
-    "@djangocfg/debuger": "^2.1.292",
-    "@djangocfg/i18n": "^2.1.292",
-    "@djangocfg/monitor": "^2.1.292",
-    "@djangocfg/typescript-config": "^2.1.292",
-    "@djangocfg/ui-core": "^2.1.292",
-    "@djangocfg/ui-nextjs": "^2.1.292",
-    "@djangocfg/ui-tools": "^2.1.292",
+    "@djangocfg/api": "^2.1.294",
+    "@djangocfg/centrifugo": "^2.1.294",
+    "@djangocfg/debuger": "^2.1.294",
+    "@djangocfg/i18n": "^2.1.294",
+    "@djangocfg/monitor": "^2.1.294",
+    "@djangocfg/typescript-config": "^2.1.294",
+    "@djangocfg/ui-core": "^2.1.294",
+    "@djangocfg/ui-nextjs": "^2.1.294",
+    "@djangocfg/ui-tools": "^2.1.294",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AppLayout/BaseApp.tsx

@@ -48,6 +48,7 @@ import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
 import { Toaster, TooltipProvider } from '@djangocfg/ui-core/components';
 import { DialogProvider } from '@djangocfg/ui-core/lib/dialog-service';
+import { NextRouterAdapter } from '@djangocfg/ui-core/adapters/nextjs';
 import { ThemeProvider } from '@djangocfg/ui-nextjs/theme';
 import { ThemeStyleBridge } from '../../theme/ThemeStyleBridge';
 import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
@@ -117,6 +118,14 @@ export function BaseApp({
       storageKey={theme?.storageKey}
     >
       <ThemeStyleBridge style={theme?.style} />
+      {/*
+       * NextRouterAdapter wires @djangocfg/ui-core router hooks
+       * (useNavigate, useQueryState, etc.) to next/navigation so
+       * server components, route loaders, and prefetch fire
+       * correctly. Placed near the top so every provider below
+       * (Auth, Centrifugo, anything that may navigate) gets it.
+       */}
+      <NextRouterAdapter>
       <DialogProvider>
       <TooltipProvider>
         <SWRConfig
@@ -182,6 +191,7 @@ export function BaseApp({
         </SWRConfig>
       </TooltipProvider>
       </DialogProvider>
+      </NextRouterAdapter>
     </ThemeProvider>
   );
 

package/src/layouts/PublicLayout/README.md

@@ -70,6 +70,7 @@ Three variants. All share the same core props (below); only the chrome differs.
 | `actionsTrailingSlot` | `ReactNode` | — | Arbitrary node after the mobile toggle. |
 | `navbarPosition` | `'sticky' \| 'fixed' \| 'static'` | `'sticky'` | |
 | `navbarHeight` | `'sm' \| 'md' \| 'lg'` | `'md'` | `py-2` / `py-3.5` / `py-5`. |
+| `insetX` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| string` | `'sm'` | Horizontal inset of the inner row. Token → responsive `px-*`; pass any Tailwind class to override. |
 | `navLayout` | `'default' \| 'brand-left' \| 'centered' \| 'split'` | `'default'` | Desktop arrangement. |
 | `hideNavOnScroll` | `boolean` | `false` | Slide up on scroll-down, back on scroll-up. |
 | `transparent` | `boolean` | `false` (Minimal: `true`) | Transparent at top, opaque after `transparentThreshold`. |

package/src/layouts/PublicLayout/index.ts

@@ -20,6 +20,7 @@ export type {
   PublicNavbarShellConfig,
   PublicNavLayout,
   PublicNavbarHeight,
+  PublicNavbarInsetX,
   PublicDesktopDropdownRenderer,
   PublicDesktopDropdownRenderProps,
 } from './navbarTypes';

package/src/layouts/PublicLayout/navbarTypes.ts

@@ -33,6 +33,21 @@ export type PublicNavLayout = 'default' | 'brand-left' | 'centered' | 'split';
  */
 export type PublicNavbarHeight = 'sm' | 'md' | 'lg';
 
+/**
+ * Horizontal inset between the navbar's outer edge and its inner row
+ * (brand + nav + actions). Tuned per breakpoint so wide screens get a
+ * bit more breathing room than mobile.
+ *
+ * - `none` → no padding (edge-to-edge, e.g. embedded app shells)
+ * - `xs`   → `px-2 sm:px-3 lg:px-4`
+ * - `sm`   → `px-3 sm:px-4 lg:px-6`  (default — symmetric, compact)
+ * - `md`   → `px-4 sm:px-6 lg:px-8`
+ * - `lg`   → `px-6 sm:px-8 lg:px-12`
+ *
+ * Pass a string instead to use any Tailwind class (escape hatch).
+ */
+export type PublicNavbarInsetX = 'none' | 'xs' | 'sm' | 'md' | 'lg' | (string & {});
+
 export interface PublicNavbarSurface {
   variant: PublicNavbarVariant;
   position: PublicNavbarPosition;

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

@@ -16,6 +16,7 @@ import { NavbarShell } from '../../shared';
 import type {
   PublicDesktopDropdownRenderer,
   PublicNavbarHeight,
+  PublicNavbarInsetX,
   PublicNavbarPosition,
   PublicNavbarShellConfig,
   PublicNavLayout,
@@ -39,6 +40,8 @@ export interface FloatingNavbarConfig {
   navLayout?: PublicNavLayout;
   /** @default 'md' */
   navbarHeight?: PublicNavbarHeight;
+  /** Horizontal inset of the inner row. @default 'sm' */
+  insetX?: PublicNavbarInsetX;
   /** @default false */
   hideNavOnScroll?: boolean;
   /** @default false */
@@ -102,6 +105,7 @@ export function FloatingNavbar({ config }: FloatingNavbarProps) {
         desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
         navLayout={config.navLayout}
         navbarHeight={config.navbarHeight}
+        insetX={config.insetX}
         hideNavOnScroll={config.hideNavOnScroll}
         transparent={config.transparent}
         transparentThreshold={config.transparentThreshold}

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

@@ -15,6 +15,7 @@ import { NavbarShell } from '../../shared';
 import type {
   PublicDesktopDropdownRenderer,
   PublicNavbarHeight,
+  PublicNavbarInsetX,
   PublicNavbarPosition,
   PublicNavbarShellConfig,
   PublicNavLayout,
@@ -38,6 +39,8 @@ export interface FlushNavbarConfig {
   navLayout?: PublicNavLayout;
   /** @default 'md' */
   navbarHeight?: PublicNavbarHeight;
+  /** Horizontal inset of the inner row. @default 'sm' */
+  insetX?: PublicNavbarInsetX;
   /** @default false */
   hideNavOnScroll?: boolean;
   /** @default false */
@@ -98,6 +101,7 @@ export function FlushNavbar({ config }: FlushNavbarProps) {
         desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
         navLayout={config.navLayout}
         navbarHeight={config.navbarHeight}
+        insetX={config.insetX}
         hideNavOnScroll={config.hideNavOnScroll}
         transparent={config.transparent}
         transparentThreshold={config.transparentThreshold}

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

@@ -22,6 +22,7 @@ import { NavbarShell, type NavbarActionsContext } from '../../shared';
 import type {
   PublicDesktopDropdownRenderer,
   PublicNavbarHeight,
+  PublicNavbarInsetX,
   PublicNavbarPosition,
   PublicNavLayout,
 } from '../../navbarTypes';
@@ -52,6 +53,8 @@ export interface MinimalNavbarConfig {
   navLayout?: PublicNavLayout;
   /** @default 'md' */
   navbarHeight?: PublicNavbarHeight;
+  /** Horizontal inset of the inner row. @default 'sm' */
+  insetX?: PublicNavbarInsetX;
   /** @default false */
   hideNavOnScroll?: boolean;
   /**
@@ -160,6 +163,7 @@ export function MinimalNavbar({ config }: MinimalNavbarProps) {
         desktopMaxPrimaryItems={config.desktopMaxPrimaryItems}
         navLayout={config.navLayout}
         navbarHeight={config.navbarHeight}
+        insetX={config.insetX}
         hideNavOnScroll={config.hideNavOnScroll}
         transparent={transparent}
         transparentThreshold={config.transparentThreshold}

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

@@ -37,6 +37,7 @@ import {
 import type {
   PublicDesktopDropdownRenderer,
   PublicNavbarHeight,
+  PublicNavbarInsetX,
   PublicNavbarPosition,
   PublicNavbarVariant,
   PublicNavLayout,
@@ -57,6 +58,20 @@ const heightCls: Record<PublicNavbarHeight, string> = {
   lg: 'py-5',
 };
 
+/** Token → Tailwind class for the inner-row horizontal padding. */
+const insetXCls: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
+  none: '',
+  xs: 'px-2 sm:px-3 lg:px-4',
+  sm: 'px-3 sm:px-4 lg:px-6',
+  md: 'px-4 sm:px-6 lg:px-8',
+  lg: 'px-6 sm:px-8 lg:px-12',
+};
+
+function resolveInsetX(value: PublicNavbarInsetX | undefined): string {
+  if (!value) return insetXCls.sm;
+  return value in insetXCls ? insetXCls[value as keyof typeof insetXCls] : value;
+}
+
 interface ShapeInputs {
   /** true at scrollY >= threshold */
   scrolled: boolean;
@@ -85,7 +100,11 @@ export interface NavbarShellProps {
   // ── Layout ────────────────────────────────────────────────────────────────
   navLayout?: PublicNavLayout;
   navbarHeight?: PublicNavbarHeight;
-  /** Inner padding for the row container. */
+  /** Horizontal inset between outer edge and the inner row.
+   *  @default 'sm' */
+  insetX?: PublicNavbarInsetX;
+  /** Full override for the row container (escape hatch).
+   *  When set, wins over `insetX`. */
   innerPadding?: string;
 
   // ── Scroll behavior ───────────────────────────────────────────────────────
@@ -159,7 +178,8 @@ export function NavbarShell(props: NavbarShellProps) {
     desktopMaxPrimaryItems: desktopMaxPrimaryItemsProp,
     navLayout = 'default',
     navbarHeight = 'md',
-    innerPadding = 'w-full pl-6 pr-3 sm:px-4 lg:px-6',
+    insetX,
+    innerPadding,
     hideNavOnScroll = false,
     transparent = false,
     transparentThreshold = 40,
@@ -324,10 +344,12 @@ export function NavbarShell(props: NavbarShellProps) {
     }
   })();
 
+  const innerPaddingCls = innerPadding ?? cn('w-full', resolveInsetX(insetX));
+
   return (
     <div ref={navOuterRef} className={outerCls}>
       <nav className={cn(shapeClassName, surfaceCls)}>
-        <div className={innerPadding}>{row}</div>
+        <div className={innerPaddingCls}>{row}</div>
       </nav>
     </div>
   );