@djangocfg/layouts 2.1.613 → 2.1.616

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.613",
+  "version": "2.1.616",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -91,11 +91,11 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.613",
-    "@djangocfg/api": "^2.1.613",
-    "@djangocfg/devtools": "^2.1.613",
-    "@djangocfg/i18n": "^2.1.613",
-    "@djangocfg/ui-core": "^2.1.613",
+    "@djangocfg/analytics": "^2.1.616",
+    "@djangocfg/api": "^2.1.616",
+    "@djangocfg/devtools": "^2.1.616",
+    "@djangocfg/i18n": "^2.1.616",
+    "@djangocfg/ui-core": "^2.1.616",
     "@hookform/resolvers": "^5.2.2 || ^7.0.2",
     "consola": "^3.4.2",
     "lucide-react": "^1.68.0",
@@ -120,16 +120,15 @@
   },
   "dependencies": {
     "libphonenumber-js": "^1.13.15",
-    "nextjs-toploader": "^3.9.17",
     "qrcode.react": "^4.2.0"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.613",
-    "@djangocfg/api": "^2.1.613",
-    "@djangocfg/devtools": "^2.1.613",
-    "@djangocfg/i18n": "^2.1.613",
-    "@djangocfg/typescript-config": "^2.1.613",
-    "@djangocfg/ui-core": "^2.1.613",
+    "@djangocfg/analytics": "^2.1.616",
+    "@djangocfg/api": "^2.1.616",
+    "@djangocfg/devtools": "^2.1.616",
+    "@djangocfg/i18n": "^2.1.616",
+    "@djangocfg/typescript-config": "^2.1.616",
+    "@djangocfg/ui-core": "^2.1.616",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",

package/src/index.ts

@@ -35,10 +35,6 @@ export * from './layouts';
 // Typed theme style bridge + presets (BaseApp `theme.style`)
 export * from './theme';
 
-// Re-export useRouter from nextjs-toploader for progress bar support
-// Use this instead of 'next/navigation' useRouter for router.push() to trigger progress
-export { useRouter } from 'nextjs-toploader/app';
-
 // Snippets - Reusable UI components (includes Analytics)
 export * from './snippets';
 

package/src/layouts/AppLayout/BaseApp.tsx

@@ -43,7 +43,6 @@
 'use client';
 
 import { nodeEnv } from "@djangocfg/ui-core/lib";
-import NextTopLoader from 'nextjs-toploader';
 import { SWRConfig } from 'swr';
 
 import { Devtools, devtools } from '@djangocfg/devtools';
@@ -52,6 +51,7 @@ import { AuthProvider } from '@djangocfg/api/auth';
 import { UiProviders } from '@djangocfg/ui-core/providers';
 import { useScrollToTop } from '@djangocfg/ui-core/hooks';
 import { NextRouterAdapter, NextLinkProvider } from '@djangocfg/ui-core/adapters/nextjs';
+import { RouteProgressProvider } from '@djangocfg/ui-core/route-progress';
 import { NextIntlLinkBridge } from './NextIntlLinkBridge';
 import { ThemeProvider } from '@djangocfg/ui-core/theme';
 import { AppErrorFallback } from '../../components/errors/AppErrorFallback';
@@ -107,6 +107,7 @@ export function BaseApp({
   devtools: devtoolsConfig,
   i18n,
   pwaMeta = true,
+  progressBar = true,
 }: BaseAppProps) {
   // auth=false disables AuthProvider entirely (public apps with no login)
   const authEnabled = auth !== false;
@@ -138,6 +139,10 @@ export function BaseApp({
        * correctly. Placed near the top so every provider below
        * (Auth, anything that may navigate) gets it.
        */}
+      <RouteProgressProvider
+        enabled={progressBar !== false}
+        {...(typeof progressBar === 'object' ? progressBar : {})}
+      >
       <NextRouterAdapter>
       <NextLinkProvider>
       {/* Single top-level boundary lives inside UiProviders. We feed it the
@@ -180,13 +185,6 @@ export function BaseApp({
                     )}
                   </ProjectNameProvider>
                 </LayoutI18nProvider>
-                <NextTopLoader
-                  color="var(--primary)"
-                  height={3}
-                  showSpinner={false}
-                  shadow="0 0 10px var(--primary), 0 0 5px var(--primary)"
-                />
-
                 {/* Auth Dialog - only when auth is enabled */}
                 {authEnabled && <AuthDialog authPath={authConfig?.routes?.auth} />}
               </ErrorTrackingProvider>
@@ -196,6 +194,7 @@ export function BaseApp({
       </UiProviders>
       </NextLinkProvider>
       </NextRouterAdapter>
+      </RouteProgressProvider>
     </ThemeProvider>
     </>
   );

package/src/layouts/AuthLayout/styles/auth.css

@@ -79,8 +79,10 @@
   height: 1.25rem;
 }
 
-/* The locale stays at the right edge even when the link is hidden. */
-.auth-topbar > :last-child {
+/* The locale stays at the right edge even when the link is hidden. `:not(:first-child)`
+   keeps the rule off the link itself: without a locale switcher the link is the
+   only child, hence also `:last-child`, and it would be pushed to the right. */
+.auth-topbar > :last-child:not(:first-child) {
   margin-inline-start: auto;
 }
 

package/src/layouts/PrivateLayout/README.md

@@ -280,7 +280,7 @@ const header: HeaderConfig = {
 |---|---|
 | Docked | Width from `--sidebar-width`; drag the right edge, arrow keys, double-click to reset. |
 | Collapsed (desktop) | Hidden. The top bar (toggle top-left, title, actions, avatar) shows; resting the pointer at the left screen edge (not on the toggle) floats the sidebar over the page. The panel stays while the pointer is on it or a menu opened from it is open; Esc, navigation and moving away close it. Clicking the trigger docks it. |
-| Mobile (< md) | Drawer 88vw wide (max 22rem, the dimmed strip taps it closed) and full height (`fixed inset-y-0`: the real visible area in a browser tab and in an iOS standalone PWA): 40px rows (44px hit area), 14px text, 20px icons, 8px container gutter + 10px row padding (icon column and logo at 18px; dividers, highlighted rows and footer share the 8px gutter), header is the brand only (48px under safe-top, no toggle or close button; it closes by backdrop tap, swipe, Escape or navigating). Three zones: pinned header (gets a bottom hairline once the nav scrolls), the nav as the ONLY scroller (`overscroll-contain`), pinned footer with a full-width top border and its own background; the drawer panel itself is `overflow-hidden` (`DrawerContent bare`). Header and footer respect the safe areas on top, bottom and sides (at least 1rem vertically). On a phone (below md) the layout draws a plain top bar: `safe-top + 3rem` tall (`--layout-bar-height`, `0px` from md up and without a sidebar), `bg-background` with a 1px bottom border, holding the sidebar toggle (the same ghost button as in the sidebar header) and `header.title`. It overlays the content column and slides away (`transform`, 200ms) on scroll-down and back on scroll-up or at the top, using the same `useNavbarScroll` policy as `PublicLayout` driven by the content scroller; it stays while the drawer is open, a field has focus, or the page is not scrollable. Content starts below the bar for every page, so pages do nothing; apps may use `--layout-bar-height` to offset their own sticky elements. `PrivateLayout` takes `topBar={{ title, actions }}` (types: `PrivateTopBarConfig`): `title` replaces `header.title` in the bar, `actions` is a ReactNode on the right (vertically centred, never shrinks the toggle; the title takes the rest and truncates). The same bar shows on desktop while the sidebar is collapsed (static, no auto-hide) and carries the account avatar for a signed-in user (`topBar.account={false}` to opt out); on a phone the drawer then has no footer account. Recommended actions are compact ghost icon `Button`s (36px); several are fine, keep them few. The toggle stays left and is not configurable. It is rendered by the phone bar only; desktop shows nothing (the sidebar is the navigation). |
+| Mobile (< md) | Drawer 88vw wide (max 22rem, the dimmed strip taps it closed) and full height (`fixed inset-y-0`: the real visible area in a browser tab and in an iOS standalone PWA): 40px rows (44px hit area), 14px text, 20px icons, 8px container gutter + 10px row padding (icon column and logo at 18px; dividers, highlighted rows and footer share the 8px gutter), header is the brand only (48px under safe-top, no toggle or close button; it closes by backdrop tap, swipe, Escape or navigating). Three zones: pinned header (gets a bottom hairline once the nav scrolls), the nav as the ONLY scroller (`overscroll-contain`), pinned footer with a full-width top border and its own background; the drawer panel itself is `overflow-hidden` (`DrawerContent bare`). Header and footer respect the safe areas on top, bottom and sides (at least 1rem vertically). On a phone (below md) the layout draws a plain top bar: `safe-top + 3rem` tall (`--layout-bar-height`, `0px` from md up and without a sidebar), `bg-background` with a 1px bottom border, holding the sidebar toggle (the same ghost button as in the sidebar header) and `header.title`. It overlays the content column and never hides on scroll. Content starts below the bar for every page, so pages do nothing; apps may use `--layout-bar-height` to offset their own sticky elements. `PrivateLayout` takes `topBar={{ title, actions }}` (types: `PrivateTopBarConfig`): `title` replaces `header.title` in the bar, `actions` is a ReactNode on the right (vertically centred, never shrinks the toggle; the title takes the rest and truncates). The same bar shows on desktop while the sidebar is collapsed (static: it never hides on scroll) and carries the account avatar for a signed-in user (`topBar.account={false}` to opt out); on a phone the drawer then has no footer account. Recommended actions are compact ghost icon `Button`s (36px); several are fine, keep them few. The toggle stays left and is not configurable. It is rendered by the phone bar only; desktop shows nothing (the sidebar is the navigation). |
 
 Row metrics (`geometry.ts`): desktop rows 36px, mobile rows 40px (with a 44px hit area from an invisible `::after`), both `text-sm` with 16px (desktop) or 20px (mobile) icons and group labels in `text-xs`. Safe-area insets only exist when the host app sets `viewportFit: "cover"` in its Next.js `viewport` export; without it the offsets fall back to the fixed minimums. For an installed iOS PWA also set `appleWebApp.statusBarStyle` (`black-translucent` draws the page under the status bar and relies on the insets; `default` keeps it below). The drawer height is pinned with `inset-y-0` rather than `100dvh`, which can disagree with the visible area in standalone mode.
 

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

@@ -85,13 +85,13 @@ describe('PrivateContent top bar', () => {
     expect(bar.className).toContain('pt-[var(--safe-top');
     expect(bar.className).toContain('pl-[calc(var(--safe-left');
     expect(bar.className).toContain('pr-[calc(var(--safe-right');
-    // Overlays the column (transform-hidden), so hiding never reflows; the content pads by the bar height.
+    // Overlays the column; the content pads by the bar height. It never moves on scroll.
     expect(bar.className).toMatch(/\babsolute\b/);
-    expect(bar.className).toContain('transition-transform');
+    expect(bar.className).not.toContain('translate');
+    expect(bar.hasAttribute('data-hidden')).toBe(false);
     expect((bar.nextElementSibling as HTMLElement).className).toContain('layout-bar-height');
     expect(bar.querySelector('[data-sidebar="trigger"]')!.className).not.toMatch(/\b(rounded-full|border|shadow)/);
     expect(bar.textContent).toBe('Acme');
-    expect(bar.getAttribute('data-hidden')).toBe('false');
     // Content is the next sibling: it starts under the bar and carries no trigger offsets.
     const scroller = bar.nextElementSibling as HTMLElement;
     expect(scroller.className).not.toContain('layout-trigger');
@@ -114,77 +114,16 @@ describe('PrivateContent top bar', () => {
     expect(scroller.className).toMatch(/\boverflow-y-auto\b/);
   });
 
-  describe('phone auto-hide', () => {
-    function mountPhone(isPhone = true) {
+  it('never hides on scroll, on a phone or on desktop', () => {
+    for (const isPhone of [true, false]) {
       phone = isPhone;
-      // Deferred like a real frame: useScroll's store expects the id to be assigned before the callback runs.
-      let id = 0;
-      vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
-        void Promise.resolve().then(() => cb(0));
-        return ++id;
-      });
-      const el = render(false, 'default', 'Acme');
-      const bar = el.querySelector('[data-sidebar="topbar"]') as HTMLElement;
+      const bar = render(false, 'default', 'Acme').querySelector('[data-sidebar="topbar"]') as HTMLElement;
       const scroller = bar.nextElementSibling as HTMLElement;
-      Object.defineProperty(scroller, 'scrollHeight', { configurable: true, value: 3000 });
-      Object.defineProperty(scroller, 'clientHeight', { configurable: true, value: 800 });
-      const scrollTo = (top: number) =>
-        act(async () => {
-          scroller.scrollTop = top;
-          scroller.dispatchEvent(new Event('scroll'));
-          await Promise.resolve();
-          await Promise.resolve();
-        });
-      return { el, bar, scroller, scrollTo };
+      scroller.scrollTop = 400;
+      scroller.dispatchEvent(new Event('scroll'));
+      expect(bar.hasAttribute('data-hidden')).toBe(false);
+      expect(bar.className).not.toContain('translate');
     }
-    afterEach(() => vi.unstubAllGlobals());
-
-    it('hides on scroll down, shows on scroll up and at the top', async () => {
-      const { bar, scrollTo } = mountPhone();
-      expect(bar.getAttribute('data-hidden')).toBe('false');
-      await scrollTo(120);
-      await scrollTo(200);
-      expect(bar.getAttribute('data-hidden')).toBe('true');
-      await scrollTo(180);
-      await scrollTo(150);
-      expect(bar.getAttribute('data-hidden')).toBe('false');
-      await scrollTo(300);
-      await scrollTo(400);
-      expect(bar.getAttribute('data-hidden')).toBe('true');
-      await scrollTo(0);
-      expect(bar.getAttribute('data-hidden')).toBe('false');
-    });
-
-    it('desktop (sidebar collapsed): the bar is static and never hides', async () => {
-      const { bar, scrollTo } = mountPhone(false);
-      await scrollTo(120);
-      await scrollTo(400);
-      expect(bar.getAttribute('data-hidden')).toBe('false');
-    });
-
-    it('stays visible while the drawer is open', async () => {
-      const { bar, scrollTo } = mountPhone();
-      act(() => (bar.querySelector('[data-sidebar="trigger"]') as HTMLElement).click());
-      await scrollTo(120);
-      await scrollTo(400);
-      expect(bar.getAttribute('data-hidden')).toBe('false');
-    });
-
-    it('stays visible while a field has focus', async () => {
-      const { el, bar, scrollTo } = mountPhone();
-      act(() => (el.querySelector('input') as HTMLInputElement).focus());
-      await scrollTo(120);
-      await scrollTo(400);
-      expect(bar.getAttribute('data-hidden')).toBe('false');
-    });
-
-    it('never hides when the content is not scrollable', async () => {
-      const { bar, scroller, scrollTo } = mountPhone();
-      Object.defineProperty(scroller, 'scrollHeight', { configurable: true, value: 800 });
-      await scrollTo(120);
-      await scrollTo(400);
-      expect(bar.getAttribute('data-hidden')).toBe('false');
-    });
   });
 
   describe('topBar content', () => {

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

@@ -2,8 +2,8 @@
  * Private layout main column: the scroll surface, plus ONE top bar whenever the sidebar is not visible: always on a
  * phone (below md), on desktop while the sidebar is collapsed. Same markup and props at every width: sidebar toggle,
  * title, actions, account avatar. Height `--layout-bar-height` = safe-top + 3rem; it overlays the column and the
- * content has that height as top padding, so pages need to know nothing about it. Below md it slides away on
- * scroll-down (same `useNavbarScroll` policy as PublicLayout, driven by the content scroller); on desktop it is static.
+ * content has that height as top padding, so pages need to know nothing about it. It never hides on scroll (owner decision,
+ * 2026-11-05: it got in the way): static at every width.
  * `--layout-bar-height` is `0px` only when no bar is shown (docked sidebar, or no sidebar at all).
  */
 
@@ -17,7 +17,6 @@ import { cn } from '@djangocfg/ui-core/lib';
 import type { LayoutVisualConfig } from '../../types';
 import type { HeaderConfig } from '../types';
 import { LAYOUT_BAR_HEIGHT } from '../geometry';
-import { useNavbarScroll } from '../../PublicLayout/hooks/useNavbarScroll';
 import { PrivateSidebarTrigger } from './PrivateSidebarTrigger';
 import { PrivateTopBarAccount } from './PrivateTopBarAccount';
 
@@ -77,22 +76,9 @@ export function PrivateContent({
     scrollRef.current?.scrollTo?.({ top: 0 });
   }, [pathname]);
 
-  const { isMobile, state, openMobile } = useSidebar();
+  const { isMobile, state } = useSidebar();
 
   const showBar = hasSidebar && (isMobile || state === 'collapsed');
-  const mobileBar = showBar && isMobile;
-
-  // Auto-hide: the content scroller (the document never scrolls) drives the shared navbar policy. The bar stays put
-  // while the drawer is open or a field has focus (iOS keyboard), and when there is nothing to scroll.
-  const { hidden: scrolledAway } = useNavbarScroll({ hideNavOnScroll: mobileBar, target: scrollRef, respectReducedMotion: false });
-  const [fieldFocused, setFieldFocused] = React.useState(false);
-  const onFocusChange = (e: React.FocusEvent) => {
-    const el = e.target as HTMLElement;
-    setFieldFocused(
-      e.type === 'focus' && (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || el.isContentEditable),
-    );
-  };
-  const barHidden = mobileBar && scrolledAway && !openMobile && !fieldFocused;
 
   const topPadding = showBar
     ? 'pt-[calc(var(--layout-bar-height)+1rem)]'
@@ -122,8 +108,7 @@ export function PrivateContent({
       {showBar ? (
         <div
           data-sidebar="topbar"
-          data-hidden={barHidden ? 'true' : 'false'}
-          className="absolute inset-x-0 top-0 z-20 box-border flex h-[var(--layout-bar-height)] shrink-0 items-center gap-1 transition-transform duration-200 ease-out motion-reduce:transition-none data-[hidden=true]:-translate-y-full border-b border-border bg-background pl-[calc(var(--safe-left,env(safe-area-inset-left,0px))+0.75rem)] pr-[calc(var(--safe-right,env(safe-area-inset-right,0px))+0.75rem)] pt-[var(--safe-top,env(safe-area-inset-top,0px))]"
+          className="absolute inset-x-0 top-0 z-20 box-border flex h-[var(--layout-bar-height)] shrink-0 items-center gap-1 border-b border-border bg-background pl-[calc(var(--safe-left,env(safe-area-inset-left,0px))+0.75rem)] pr-[calc(var(--safe-right,env(safe-area-inset-right,0px))+0.75rem)] pt-[var(--safe-top,env(safe-area-inset-top,0px))]"
         >
           <PrivateSidebarTrigger className="text-muted-foreground hover:text-foreground" />
           <span className="min-w-0 flex-1 truncate text-base font-semibold tracking-tight">
@@ -147,7 +132,7 @@ export function PrivateContent({
           ) : null}
         </div>
       ) : null}
-      <div ref={scrollRef} className={scrollAreaClass} onFocusCapture={onFocusChange} onBlurCapture={onFocusChange}>
+      <div ref={scrollRef} className={scrollAreaClass}>
         {innerWidthClass ? <div className={innerWidthClass}>{children}</div> : children}
       </div>
     </div>

package/src/layouts/types/layout.types.ts

@@ -34,6 +34,13 @@ import type { DevtoolsProps } from '@djangocfg/devtools';
  * Core configuration for BaseApp component.
  * All provider configs are imported from their respective modules.
  */
+/** Tuning for the top loading bar, see `BaseLayoutProps.progressBar`. */
+export interface RouteProgressOptions {
+  color?: string;
+  height?: number;
+  shouldShow?: (from: URL, to: URL) => boolean;
+}
+
 export interface BaseLayoutProps {
   children: ReactNode;
 
@@ -79,6 +86,15 @@ export interface BaseLayoutProps {
    * pass `false` to opt out.
    */
   pwaMeta?: boolean;
+
+  /**
+   * The top loading bar shown while moving between pages (`@djangocfg/ui-core/route-progress`). On by default;
+   * `false` removes it for the whole app. An object tunes it: `color`, `height` (px) and `shouldShow(from, to)`,
+   * the app's route rule (default: the pathname changes, so `?tab=2` and `#hash` never show it). A page or
+   * section can silence the bar, and the jump to the top, while it is mounted:
+   * `useNavigationBehavior({ progress: false, scroll: false })`.
+   */
+  progressBar?: boolean | RouteProgressOptions;
 }
 
 /** Devtools config for BaseApp — the `<Devtools>` props minus children. */