@djangocfg/layouts 2.1.591 → 2.1.593

package/src/layouts/AuthLayout/layoutContext.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+export interface AuthLayoutContextValue {
+  /** True when the consumer passed custom children — step headers should be hidden */
+  hideHeader: boolean;
+  /**
+   * True when the brand is already rendered on the media half, so the form
+   * header must not repeat it.
+   *
+   * A statement about the DESKTOP layout only: `fullsplit` drops the media half
+   * below 1024px, where the logo above the form is the only brand left. CSS
+   * owns that half of the decision on the same breakpoint — see
+   * `.auth-header[data-brand-elsewhere]` in `auth.css`.
+   */
+  hasBrandPanel: boolean;
+}
+
+export const AuthLayoutContext = createContext<AuthLayoutContextValue>({
+  hideHeader: false,
+  hasBrandPanel: false,
+});
+
+export const useAuthLayoutContext = (): AuthLayoutContextValue => useContext(AuthLayoutContext);

package/src/layouts/AuthLayout/styles/split-shell.css

@@ -88,7 +88,6 @@
        through the panel as frosted glass. color-mix keeps it theme-aware. */
     background: color-mix(in oklab, var(--card) 72%, transparent);
     backdrop-filter: blur(20px) saturate(140%);
-    -webkit-backdrop-filter: blur(20px) saturate(140%);
     color: var(--card-foreground);
     outline: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
     box-shadow: 0 24px 64px hsl(0 0% 0% / 0.28);

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -1,9 +1,9 @@
 /**
  * Private Layout
  *
- * Authenticated shell: collapsible sidebar (icon rail vs expanded) + scrollable content.
- * Toggle lives in the sidebar header on desktop; on narrow viewports a `SidebarTrigger` sits in `PrivateContent` (opens the mobile Sheet).
- * Ctrl/Cmd + B still toggles the sidebar width.
+ * Authenticated shell: a docked, resizable sidebar + scrollable content.
+ * Collapsed, the sidebar leaves a trigger whose hover zone peeks it open over the page;
+ * on narrow viewports the same trigger opens a drawer. Ctrl/Cmd + B toggles it.
  *
  * Guarded: no session redirects to `header.authPath`. With `requireStaff`, a
  * signed-in non-staff user gets `ForbiddenState` instead — never a redirect,
@@ -18,9 +18,14 @@ import { Preloader } from '@djangocfg/ui-core/components';
 import { SidebarInset, SidebarProvider } from '@djangocfg/ui-core/components';
 
 import { ForbiddenState, PrivateContent, PrivateSidebar } from './components';
-import { useAuthGuard } from './hooks';
-import { useLayoutVisual } from './hooks';
-import { useSidebarDefaultOpen } from './hooks';
+import {
+  SidebarPeekProvider,
+  SidebarWidthContext,
+  useAuthGuard,
+  useLayoutVisual,
+  useSidebarDefaultOpen,
+  useSidebarWidth,
+} from './hooks';
 
 import type { PrivateLayoutProps } from './types';
 
@@ -67,6 +72,7 @@ export function PrivateLayout({
     useLayoutVisual(visual);
 
   const defaultOpen = useSidebarDefaultOpen();
+  const sidebarWidth = useSidebarWidth(Boolean(sidebar) && sidebar?.resizable !== false);
 
   if (isLoading) {
     return (
@@ -90,28 +96,33 @@ export function PrivateLayout({
   return (
     <SidebarProvider
       defaultOpen={defaultOpen}
-      style={providerStyle}
+      style={{ ...providerStyle, ...sidebarWidth.style }}
       className={providerClassName}
+      data-sidebar-resizing={sidebarWidth.dragging || undefined}
     >
-      {sidebar && (
-        <PrivateSidebar
-          sidebar={sidebar}
-          header={header}
-          pathname={pathname}
-          variant={sidebarVariant}
-        />
-      )}
-
-      <SidebarInset className={insetClassName}>
-        <PrivateContent
-          padding={contentPadding}
-          scroll={contentScroll}
-          hasSidebar={Boolean(sidebar)}
-          visual={visual}
-        >
-          {children}
-        </PrivateContent>
-      </SidebarInset>
+      <SidebarWidthContext.Provider value={sidebarWidth}>
+        <SidebarPeekProvider pathname={pathname ?? ''}>
+          {sidebar && (
+            <PrivateSidebar
+              sidebar={sidebar}
+              header={header}
+              pathname={pathname}
+              variant={sidebarVariant}
+            />
+          )}
+
+          <SidebarInset className={insetClassName}>
+            <PrivateContent
+              padding={contentPadding}
+              scroll={contentScroll}
+              hasSidebar={Boolean(sidebar)}
+              visual={visual}
+            >
+              {children}
+            </PrivateContent>
+          </SidebarInset>
+        </SidebarPeekProvider>
+      </SidebarWidthContext.Provider>
 
       {/* Settings is the primary account dialog — always mounted so the
           account-menu "Settings" item works out of the box. `settings` is

package/src/layouts/PrivateLayout/README.md

@@ -1,6 +1,6 @@
 # PrivateLayout
 
-Authenticated app shell — collapsible sidebar (icon-rail vs expanded) + scrollable content area.
+Authenticated app shell — a docked, resizable sidebar + scrollable content area. Collapsed, a trigger remains and hovering it peeks the sidebar open over the page; on mobile it is a drawer.
 
 ```tsx
 <PrivateLayout
@@ -81,13 +81,13 @@ thin-wrapper reference, and the **BaseApp README** for the provider root.
 
 ## Visual variants
 
-`boxed` (default) — `<SidebarInset>` becomes a rounded card; the wrapper paints `bg-sidebar` so the brand colour bleeds to the viewport edges. Mobile (<md) degrades to full-bleed automatically.
+`boxed` — opt in with `visual={{ variant: 'boxed' }}`. `<SidebarInset>` becomes a rounded card; the wrapper paints `bg-sidebar` so the brand colour bleeds to the viewport edges. Mobile (<md) degrades to full-bleed automatically.
 
-`full-bleed` — content stretches edge-to-edge next to the sidebar (legacy look). Opt in with `visual={{ variant: 'full-bleed' }}`.
+`full-bleed` (default) — flat, Claude-style: sidebar, one 1px border, page.
 
 | Field | Type | Default | Notes |
 |---|---|---|---|
-| `variant` | `'full-bleed' \| 'boxed'` | `'boxed'` | Switch between the two shells. |
+| `variant` | `'full-bleed' \| 'boxed'` | `'full-bleed'` | Switch between the two shells. |
 | `inset` | `number \| { x?: number; y?: number }` | `12` | Gap (px) between the card and the viewport edges (md+). |
 | `radius` | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | `'2xl'` | Card corner radius. |
 | `background` | `'sidebar' \| 'muted' \| 'card' \| 'background'` | `'sidebar'` | Canvas colour painted *behind* the boxed card. |
@@ -139,10 +139,11 @@ For pages like Kanban boards where the shell must be exactly one viewport tall a
 | `groups` | `SidebarGroupConfig[]` | Nav items grouped under labels. Set `group.label = ''` to render flat (no header). |
 | `homeHref` | `string` | Brand link target. |
 | `menuStart` / `menuEnd` | `ReactNode` | Free slots above / below `groups` in the scrollable column. |
-| `menuStartShowOnCollapsed` / `menuEndShowOnCollapsed` | `boolean` | Keep slots visible on the icon rail. |
+| `menuStartShowOnCollapsed` / `menuEndShowOnCollapsed` | `boolean` | Deprecated, no effect (no icon rail). |
+| `resizable` | `boolean` | Drag the sidebar edge (14–24rem, remembered under `cfg.layouts.sidebar-width`; double-click resets). Default `true`. |
 | `footer` | `ReactNode` | Custom footer node above the account block. |
-| `activeIndicator` | `'background' \| 'rail' \| 'both'` | Active item visual. Default `'background'` (legacy). `'rail'` paints a 2px primary stripe on the right edge (Vercel-style). |
-| `groupLabelStyle` | `'uppercase' \| 'plain'` | Label typography. Default `'uppercase'` (legacy ultra-light caps). Collapsible groups always render `plain`. |
+| `activeIndicator` | — | Deprecated, no effect. |
+| `groupLabelStyle` | — | Deprecated, no effect: labels are sentence case. |
 | `featured` | `SidebarFeaturedConfig` | Accent-tinted CTA tile rendered below groups (Mailersend-style). |
 
 `SidebarGroupConfig`:
@@ -152,7 +153,7 @@ For pages like Kanban boards where the shell must be exactly one viewport tall a
 | `label` | `string` | Group title. Empty string → flat group (no header). |
 | `items` | `SidebarItem[]` | Nav links. |
 | `dynamic` | `boolean` | Hide group when `items` is empty (for extension-driven groups). |
-| `collapsible` | `boolean` | Render as accordion. Label becomes a clickable trigger; auto-expanded if a child is active. Disabled on the icon rail. |
+| `collapsible` | `boolean` | Render as accordion. Label becomes a clickable trigger; auto-expanded if a child is active. |
 | `defaultOpen` | `boolean` | Initial open state for collapsible groups. |
 | `icon` | `string \| LucideIcon` | Icon for the trigger (collapsible only). |
 | `hideItemIcons` | `boolean` | Hide per-item icons inside the group. Defaults to `true` when `collapsible`. |
@@ -186,7 +187,7 @@ For pages like Kanban boards where the shell must be exactly one viewport tall a
 | `groups` | `UserMenuGroup[]` | Account links rendered inside the footer dropdown. |
 | `authPath` | `string` | Sign-in redirect target. |
 | `userPlan` | `string` | Subtitle under the display name (e.g. `"Max plan"`). |
-| `accountAction` | `'menu' \| 'dialog'` | Footer button behaviour. `'menu'` opens dropdown; `'dialog'` opens global ProfileDialog. Default `'menu'`. |
+| `accountAction` | — | Deprecated, no effect: the account footer always opens the menu. |
 | `footerSecondaryAction` | `{ icon, href?, onClick?, ariaLabel, pulse? }` | Optional secondary icon button inside the footer trigger (e.g. "Get apps" with pulsing dot). |
 
 The footer button opens a popover (`DropdownMenu`, `side="top"`) with: email, account links, **Language** (opens fullscreen `LocaleSwitcherDialog` if `LayoutI18nProvider` is mounted), **Theme** (cycles `light → dark → system`), and **Log out**. In dev mode the footer renders a `Guest (dev)` placeholder when there's no authenticated user, so debug controls stay reachable; in production the block hides itself.
@@ -233,7 +234,7 @@ const switcher: SidebarBrandSwitcherConfig = {
 | `onSelect` | `() => void` | Callback on select (alternative to `href`). |
 | `active` | `boolean` | Mark as currently selected (shows checkmark in dropdown). |
 
-On the collapsed icon-rail the switcher renders only the active item's avatar — no dropdown trigger.
+While the sidebar is peeked open the switcher menu keeps the panel open until it closes.
 
 ---
 
@@ -242,8 +243,6 @@ On the collapsed icon-rail the switcher renders only the active item's avatar
 ```tsx
 const sidebar: SidebarConfig = {
   homeHref: '/',
-  activeIndicator: 'rail',
-  groupLabelStyle: 'plain',
   groups: [
     {
       label: 'Email',
@@ -269,3 +268,12 @@ const header: HeaderConfig = {
   groups: [{ title: 'Account', items: [{ label: 'Settings', href: '/settings' }] }],
 };
 ```
+
+
+## Sidebar states
+
+| State | Behaviour |
+|---|---|
+| Docked | Width from `--sidebar-width`; drag the right edge, arrow keys, double-click to reset. |
+| Collapsed (desktop) | Hidden. A trigger stays top-left; hovering it (or the free area around it) 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 up to 22rem: 44px rows, 20px icons, close button, safe-area insets. Trigger is a 44px ghost button, top-left. |

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

@@ -1,6 +1,7 @@
 /**
- * Private layout main column — on narrow viewports a fixed menu FAB (`SidebarTrigger`) + scrollable area.
- * On viewports below `md`, the desktop sidebar is off-canvas; the trigger opens the `Drawer` from the ui-core sidebar.
+ * Private layout main column: the scroll surface, plus the sidebar trigger
+ * whenever the sidebar is not docked (collapsed on desktop, always on mobile).
+ * On desktop the trigger sits in a hover zone that peeks the sidebar open.
  */
 
 'use client';
@@ -11,6 +12,7 @@ import { SidebarTrigger, useSidebar } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import type { LayoutVisualConfig } from '../../types';
+import { useSidebarPeek } from '../hooks';
 
 interface PrivateContentProps {
   children: ReactNode;
@@ -42,61 +44,46 @@ export function PrivateContent({
   hasSidebar = true,
   visual,
 }: PrivateContentProps) {
-  const { isMobile, openMobile } = useSidebar();
+  const { isMobile, state } = useSidebar();
+  const peek = useSidebarPeek();
 
-  /**
-   * 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 &&
-    padding === 'default' &&
-    (isMobile && !openMobile
-      ? 'max-md:pt-[max(4.25rem,calc(3.5rem+env(safe-area-inset-top,0px)))]'
-      : 'max-md:pt-[max(4.5rem,calc(3.75rem+env(safe-area-inset-top,0px)))]');
+  const showTrigger = hasSidebar && (isMobile || state === 'collapsed');
 
-  const contentTopPaddingClass =
-    padding === 'default'
-      ? hasSidebar
-        ? 'md:pt-6 lg:pt-8'
-        : 'pt-4 sm:pt-6 lg:pt-8'
-      : undefined;
+  // The trigger floats over the top-left corner; reserve its row.
+  const topPadding = showTrigger
+    ? 'pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))]'
+    : hasSidebar
+      ? 'max-md:pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))] md:pt-6 lg:pt-8'
+      : 'pt-4 sm:pt-6 lg:pt-8';
 
   const scrollAreaClass = cn(
-    // The boxed content is the MAIN surface (Claude bg-100), not a raised card.
-    // `bg-background` keeps it the warm page tone; the slightly darker
-    // sidebar-canvas behind the inset gives the floating look. (`bg-card`, now
-    // lifted to 18.4%, made this big panel read too light.)
     'min-h-0 flex-1 bg-background',
     scroll === 'auto' ? 'overflow-y-auto' : 'flex flex-col overflow-hidden',
     padding === 'default' && scroll === 'auto' && [
       'px-4 sm:px-6 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))]',
+      topPadding,
     ],
-    scroll === 'auto' && contentTopPaddingClass,
-    mobileFabClearance,
   );
 
-  const mobileMenuFab = hasSidebar ? (
-    <SidebarTrigger
-      variant="secondary"
-      className={cn(
-        'fixed z-40 md:hidden',
-        'left-3 top-[max(0.75rem,env(safe-area-inset-top,0px))]',
-        'h-12 w-12 rounded-xl',
-        'border border-border shadow-md',
-        '[&_svg]:!h-6 [&_svg]:!w-6',
-        'touch-manipulation',
-      )}
-    />
-  ) : null;
-
   const innerWidthClass = MAX_WIDTH_CLASS[visual?.maxWidth ?? 'none'];
 
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-      {mobileMenuFab}
+    <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+      {showTrigger ? (
+        <div
+          data-sidebar="trigger-zone"
+          {...(isMobile ? undefined : peek?.zoneProps)}
+          className="absolute left-0 top-[env(safe-area-inset-top,0px)] z-20 flex size-14 items-center justify-center"
+        >
+          <SidebarTrigger
+            className={cn(
+              'text-muted-foreground hover:text-foreground',
+              isMobile ? 'size-11 [&_svg]:!size-5' : 'size-8',
+            )}
+          />
+        </div>
+      ) : null}
       <div className={scrollAreaClass}>
         {innerWidthClass ? <div className={innerWidthClass}>{children}</div> : children}
       </div>

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

@@ -1,22 +1,19 @@
+/**
+ * The sidebar: docked on desktop, a peek panel while collapsed, a drawer on mobile.
+ */
+
 'use client';
 
 import React from 'react';
 
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  useSidebar,
-} from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
+import { Sidebar, useSidebar } from '@djangocfg/ui-core/components';
 
-import { PrivateSidebarAccount } from './PrivateSidebarAccount';
 import { PrivateLayoutProvider } from '../context';
-import { useShellVisualState, useSidebarKeyboard } from '../hooks';
+import { useSidebarKeyboard } from '../hooks';
 import type { HeaderConfig, SidebarConfig } from '../types';
-import { SidebarBrand } from './SidebarBrand';
-import { SidebarNavGroup } from './SidebarNavGroup';
-import { SidebarSlots } from './SidebarSlots';
+import { SidebarBody } from './SidebarBody';
+import { SidebarPeek } from './SidebarPeek';
+import { SidebarResizeHandle } from './SidebarResizeHandle';
 
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
@@ -25,94 +22,28 @@ interface PrivateSidebarProps {
   variant?: 'sidebar' | 'inset';
 }
 
-export function PrivateSidebar({
-  sidebar,
-  header,
-  pathname: pathnameProp,
-  variant = 'sidebar',
-}: PrivateSidebarProps) {
+export function PrivateSidebar({ sidebar, header, pathname = '', variant = 'sidebar' }: PrivateSidebarProps) {
   const { state, isMobile, setOpenMobile } = useSidebar();
-  const pathname = pathnameProp ?? '';
+  const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
 
   React.useEffect(() => {
     if (isMobile) setOpenMobile(false);
   }, [pathname, isMobile, setOpenMobile]);
 
   return (
-    <PrivateLayoutProvider
-      sidebar={sidebar}
-      header={header}
-      pathname={pathname}
-      isMobile={isMobile}
-      state={state}
-    >
-      <PrivateSidebarInner
-        sidebar={sidebar}
-        header={header}
+    <PrivateLayoutProvider sidebar={sidebar} header={header} pathname={pathname} isMobile={isMobile}>
+      <Sidebar
+        ref={setSidebarRef}
+        collapsible="offcanvas"
         variant={variant}
-      />
+        onKeyDown={handleSidebarKeyDown}
+        // Collapsed: parked off-canvas. Inert keeps it out of tab order and the a11y tree.
+        inert={state === 'collapsed' && !isMobile}
+      >
+        <SidebarBody />
+        <SidebarResizeHandle />
+      </Sidebar>
+      <SidebarPeek />
     </PrivateLayoutProvider>
   );
 }
-
-interface PrivateSidebarInnerProps {
-  sidebar: SidebarConfig;
-  header?: HeaderConfig;
-  variant: 'sidebar' | 'inset';
-}
-
-function PrivateSidebarInner({ sidebar, header, variant }: PrivateSidebarInnerProps) {
-  const layoutVariant = variant === 'inset' ? 'boxed' : 'full-bleed';
-  const { modifiers } = useShellVisualState(layoutVariant);
-  const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
-
-  const sidebarRootClass = React.useMemo(
-    () =>
-      cn(
-        '[&>[data-sidebar=sidebar]]:bg-gradient-to-t [&>[data-sidebar=sidebar]]:from-sidebar/85 [&>[data-sidebar=sidebar]]:to-sidebar',
-        modifiers.sidebarRoot,
-        modifiers.sidebarInner.map((m) => `[&>[data-sidebar=sidebar]]:${m}`),
-      ),
-    [modifiers],
-  );
-
-  const sidebarContentClass = React.useMemo(
-    () => cn('gap-2', modifiers.sidebarContent),
-    [modifiers.sidebarContent],
-  );
-
-  const renderedGroups = React.useMemo(
-    () =>
-      sidebar.groups.map((group) => {
-        if (group.dynamic && group.items.length === 0) return null;
-        return (
-          <SidebarNavGroup
-            key={group.label || `__flat_${group.items.map((i) => i.href).join('|')}`}
-            group={group}
-          />
-        );
-      }),
-    [sidebar.groups],
-  );
-
-  return (
-    <Sidebar
-      ref={setSidebarRef}
-      collapsible="icon"
-      variant={variant}
-      className={sidebarRootClass}
-      onKeyDown={handleSidebarKeyDown}
-    >
-      <SidebarBrand />
-
-      <SidebarContent className={sidebarContentClass}>
-        <SidebarSlots />
-        {renderedGroups}
-      </SidebarContent>
-
-      <SidebarFooter className="p-0">
-        <PrivateSidebarAccount header={header} />
-      </SidebarFooter>
-    </Sidebar>
-  );
-}