@djangocfg/layouts 2.1.592 → 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/components/PrivateSidebarAccount.tsx

@@ -11,7 +11,7 @@
 
 'use client';
 
-import { ChevronDown, Languages, LogOut, Settings as SettingsIcon } from 'lucide-react';
+import { ChevronDown, Languages } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
 import React, { memo } from 'react';
 
@@ -29,13 +29,12 @@ import type { MenuItem } from '@djangocfg/ui-core/components';
 import { cn, isDev } from '@djangocfg/ui-core/lib';
 import { useSidebar } from '@djangocfg/ui-core/components';
 
-import { useLogout } from '../../../hooks';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../shared/LayoutI18nProvider';
 import { LucideIcon as LucideIconRender } from '../../../components';
 import { getLocaleMeta } from '../../_components/locale-switcher/localeMeta';
 import { usePeekPin } from '../hooks';
 import { usePrivateLayoutContext } from '../context';
-import { useSettingsDialogStore } from '../../SettingsLayout/store';
+import { useAccountMenuItems } from '../../SettingsLayout/hooks';
 
 import type { HeaderConfig } from '../types';
 
@@ -53,7 +52,6 @@ interface AccountView {
 
 function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const { user } = useAuth();
-  const handleLogout = useLogout();
   const t = useAppT();
   const layoutI18n = useLayoutI18nOptional();
   const { setOpen: setSidebarOpen } = useSidebar();
@@ -61,8 +59,6 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const [isAccountMenuOpen, setIsAccountMenuOpen] = React.useState(false);
   usePeekPin(isAccountMenuOpen);
 
-  const signOutLabel = t('layouts.profile.signOut');
-
   const accountLinks = React.useMemo(() => {
     if (!header?.groups?.length) return [];
     return header.groups.flatMap((g) => g.items.filter((i) => i.href));
@@ -99,27 +95,9 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
 
   const headerLabelText = account.email ?? (account.source === 'dev-fallback' ? 'No active session' : null);
 
-  // ── Declarative account menu (Claude-style) — fed to MenuBuilder ──
-  const menuItems = React.useMemo<MenuItem[]>(() => {
+  // Language submenu and the app's account links sit between the shared Settings shortcuts and Sign out.
+  const extraItems = React.useMemo<MenuItem[]>(() => {
     const items: MenuItem[] = [];
-
-    // Email header.
-    if (headerLabelText) {
-      items.push({ kind: 'label', id: 'email', label: headerLabelText });
-    }
-
-    // Settings → opens the global SettingsDialog (⌘, like Claude).
-    items.push({
-      kind: 'item',
-      id: 'settings',
-      label: t('layouts.profile.settings') || 'Settings',
-      icon: SettingsIcon,
-      shortcut: '⇧⌘,',
-      onSelect: () => useSettingsDialogStore.getState().open(),
-    });
-
-    // Language → submenu with a radio group of locales (flag + native name,
-    // checkmark on the active one). Only when an i18n layout context is present.
     if (layoutI18n && layoutI18n.locales.length > 1) {
       items.push({
         kind: 'submenu',
@@ -145,36 +123,17 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
         ],
       });
     }
-
-    // App-provided account links (from header.groups).
     if (accountLinks.length > 0) {
       items.push({ kind: 'separator', id: 'sep-links' });
       for (const link of accountLinks) {
-        items.push({
-          kind: 'item',
-          id: link.href!,
-          label: link.label,
-          icon: link.icon,
-          href: link.href,
-        });
+        items.push({ kind: 'item', id: link.href!, label: link.label, icon: link.icon, href: link.href });
       }
     }
-
-    // Log out (destructive). Let the menu close normally (no preventDefault) —
-    // the logout confirm dialog should appear over a CLOSED menu, not under a
-    // still-open one.
-    items.push({ kind: 'separator', id: 'sep-logout' });
-    items.push({
-      kind: 'item',
-      id: 'logout',
-      label: signOutLabel,
-      icon: LogOut,
-      variant: 'destructive',
-      onSelect: () => handleLogout(),
-    });
-
     return items;
-  }, [headerLabelText, t, layoutI18n, accountLinks, signOutLabel, handleLogout]);
+  }, [t, layoutI18n, accountLinks]);
+
+  // Shared with every host: email, Settings, section shortcuts, Sign out (logout confirm opens over a CLOSED menu).
+  const menuItems = useAccountMenuItems({ extra: extraItems, label: headerLabelText });
 
   // Hide entirely in production when there's no user (auth still loading or
   // /me failed and the parent guard hasn't redirected yet). In dev keep a

package/src/layouts/PublicLayout/footers/DefaultFooter/DefaultFooter.tsx

@@ -6,104 +6,18 @@
 
 'use client';
 
-import React, { memo, useEffect, useState } from 'react';
-import { Laptop, Moon, Sun } from 'lucide-react';
-
-import { Button } from '@djangocfg/ui-core/components';
-import { useForcedTheme, useThemeContext } from '@djangocfg/ui-core/theme';
+import React, { memo } from 'react';
 
 import { Link } from '@djangocfg/ui-core/components';
 
 import { LocaleSwitcher } from '../../../_components/LocaleSwitcher';
-import { useLayoutI18nOptional } from '../../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../../shared/LayoutI18nProvider';
+import { ThemeModeControl } from './ThemeModeControl';
 import { FooterMenuSections } from './FooterMenuSections';
 import { FooterProjectInfo } from './FooterProjectInfo';
 
 import type { DefaultFooterProps } from './types';
 
-interface ThemeModeControlProps {
-  /** What to do when the route forces a theme via `ThemeOverride`. */
-  lockedBehavior?: 'disable' | 'hide';
-  /** Tooltip shown when locked. */
-  lockedTitle?: string;
-}
-
-function ThemeModeControl({
-  lockedBehavior = 'disable',
-  lockedTitle = 'Theme is set for this page',
-}: ThemeModeControlProps) {
-  const { theme, setTheme } = useThemeContext();
-  const forcedTheme = useForcedTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const isLocked = Boolean(forcedTheme);
-  // When locked, the active item reflects the forced theme — not the user's pick.
-  const currentTheme: 'system' | 'light' | 'dark' = isLocked
-    ? forcedTheme!
-    : mounted
-      ? ((theme as 'system' | 'light' | 'dark' | undefined) || 'system')
-      : 'system';
-
-  // Prepare item descriptors above JSX — no inline conditionals in the tree.
-  const items: Array<{
-    key: 'system' | 'light' | 'dark';
-    icon: typeof Laptop;
-    label: string;
-  }> = [
-    { key: 'system', icon: Laptop, label: 'Use system theme' },
-    { key: 'light',  icon: Sun,    label: 'Use light theme' },
-    { key: 'dark',   icon: Moon,   label: 'Use dark theme' },
-  ];
-
-  const baseItemClass = 'h-8 w-8 rounded-full p-0 text-muted-foreground hover:text-foreground';
-  const activeItemClass = 'bg-background/80 text-foreground shadow-sm';
-  const lockedItemClass = 'cursor-not-allowed opacity-60 hover:text-muted-foreground';
-
-  if (isLocked && lockedBehavior === 'hide') {
-    return null;
-  }
-
-  const containerClass = [
-    'inline-flex items-center gap-1 rounded-full border border-border/60 bg-muted/30 p-1',
-    isLocked ? 'cursor-not-allowed' : '',
-  ].filter(Boolean).join(' ');
-  const containerTitle = isLocked ? lockedTitle : undefined;
-
-  return (
-    <div className={containerClass} title={containerTitle} aria-disabled={isLocked}>
-      {items.map((item) => {
-        const Icon = item.icon;
-        const isActive = currentTheme === item.key;
-        const className = [
-          baseItemClass,
-          isActive ? activeItemClass : '',
-          isLocked ? lockedItemClass : '',
-        ].filter(Boolean).join(' ');
-        const handleClick = isLocked ? undefined : () => setTheme(item.key);
-        return (
-          <Button
-            key={item.key}
-            type="button"
-            variant="ghost"
-            size="icon"
-            className={className}
-            onClick={handleClick}
-            disabled={isLocked}
-            aria-label={item.label}
-            title={isLocked ? lockedTitle : item.label}
-          >
-            <Icon className="h-4 w-4" />
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
 function DefaultFooterRaw({ config }: DefaultFooterProps) {
   const variant = config.variant ?? 'full';
   const shellClass = config.shell?.className;

package/src/layouts/PublicLayout/footers/DefaultFooter/ThemeModeControl.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Laptop, Moon, Sun } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+import { Button } from '@djangocfg/ui-core/components';
+import { useForcedTheme, useThemeContext } from '@djangocfg/ui-core/theme';
+
+interface ThemeModeControlProps {
+  /** What to do when the route forces a theme via `ThemeOverride`. */
+  lockedBehavior?: 'disable' | 'hide';
+  /** Tooltip shown when locked. */
+  lockedTitle?: string;
+}
+
+export function ThemeModeControl({
+  lockedBehavior = 'disable',
+  lockedTitle = 'Theme is set for this page',
+}: ThemeModeControlProps) {
+  const { theme, setTheme } = useThemeContext();
+  const forcedTheme = useForcedTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isLocked = Boolean(forcedTheme);
+  // When locked, the active item reflects the forced theme — not the user's pick.
+  const currentTheme: 'system' | 'light' | 'dark' = isLocked
+    ? forcedTheme!
+    : mounted
+      ? ((theme as 'system' | 'light' | 'dark' | undefined) || 'system')
+      : 'system';
+
+  // Prepare item descriptors above JSX — no inline conditionals in the tree.
+  const items: Array<{
+    key: 'system' | 'light' | 'dark';
+    icon: typeof Laptop;
+    label: string;
+  }> = [
+    { key: 'system', icon: Laptop, label: 'Use system theme' },
+    { key: 'light',  icon: Sun,    label: 'Use light theme' },
+    { key: 'dark',   icon: Moon,   label: 'Use dark theme' },
+  ];
+
+  const baseItemClass = 'h-8 w-8 rounded-full p-0 text-muted-foreground hover:text-foreground';
+  const activeItemClass = 'bg-background/80 text-foreground shadow-sm';
+  const lockedItemClass = 'cursor-not-allowed opacity-60 hover:text-muted-foreground';
+
+  if (isLocked && lockedBehavior === 'hide') {
+    return null;
+  }
+
+  const containerClass = [
+    'inline-flex items-center gap-1 rounded-full border border-border/60 bg-muted/30 p-1',
+    isLocked ? 'cursor-not-allowed' : '',
+  ].filter(Boolean).join(' ');
+  const containerTitle = isLocked ? lockedTitle : undefined;
+
+  return (
+    <div className={containerClass} title={containerTitle} aria-disabled={isLocked}>
+      {items.map((item) => {
+        const Icon = item.icon;
+        const isActive = currentTheme === item.key;
+        const className = [
+          baseItemClass,
+          isActive ? activeItemClass : '',
+          isLocked ? lockedItemClass : '',
+        ].filter(Boolean).join(' ');
+        const handleClick = isLocked ? undefined : () => setTheme(item.key);
+        return (
+          <Button
+            key={item.key}
+            type="button"
+            variant="ghost"
+            size="icon"
+            className={className}
+            onClick={handleClick}
+            disabled={isLocked}
+            aria-label={item.label}
+            title={isLocked ? lockedTitle : item.label}
+          >
+            <Icon className="h-4 w-4" />
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+import { portalPopoverCls } from './navDesktopStyles';
+
+export 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,
+  );
+}

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

@@ -8,7 +8,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { useThemeContext } from '@djangocfg/ui-core/theme';
 
 import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../shared/LayoutI18nProvider';
 
 export interface NavControlsProps {
   /** Show the theme (light / system / dark) pill. @default false */

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

@@ -2,7 +2,6 @@
 
 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';
@@ -12,6 +11,8 @@ import { navItemsShallowEqual } from '../../../utils/navItemsShallowEqual';
 import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
 import { useResponsiveOverflow } from '../hooks/useResponsiveOverflow';
 import type { PublicDesktopDropdownRenderer } from '../navbarTypes';
+import { DesktopDropdownPortal } from './DesktopDropdownPortal';
+import { labelCls, navItemActiveCls, navItemCls, popoverCls, subMenuLinkCls } from './navDesktopStyles';
 
 interface NavDesktopItemsProps {
   /** Full ordered item list; overflow is computed responsively. */
@@ -24,88 +25,6 @@ interface NavDesktopItemsProps {
   renderDesktopDropdown?: PublicDesktopDropdownRenderer;
 }
 
-// Corners come from ui-core's radius tokens, never raw Tailwind steps —
-// presets (`dense`, `windows`) retune those variables, and a hardcoded
-// `rounded-lg` would opt this navbar out of the active theme.
-//
-// Radius is chosen per element KIND, not unified across the bar: nav rows and
-// menu items take `rounded-control` (--radius-control, the token documented for
-// "nav items, inputs, chips"), their popover takes --radius-popover, while
-// BUTTONS stay pills like every other button in the product. Making the rows
-// pills too is what produced capsules floating inside a soft-cornered popover.
-const navItemCls = cn(
-  'inline-flex min-h-9 items-center justify-center gap-1 rounded-control border border-transparent px-4 py-1.5 text-sm !font-medium',
-  'ring-0 focus-visible:ring-0',
-  'text-foreground/90 transition-colors',
-  'surface-hover hover:text-foreground',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
-);
-
-const navItemActiveCls =
-  '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-control border-0 px-3 py-2 text-sm font-medium transition-colors',
-    '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',
-  );
-}
-
-// Real glass: low-opacity surface so the blur actually shows the page behind
-// 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-[var(--radius-popover)] 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-[var(--radius-popover)] 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,
   maxVisible,

package/src/layouts/PublicLayout/primitives/navDesktopStyles.ts

@@ -0,0 +1,42 @@
+import { cn } from '@djangocfg/ui-core/lib';
+
+// Corners come from ui-core's radius tokens, never raw Tailwind steps —
+// presets (`dense`, `windows`) retune those variables, and a hardcoded
+// `rounded-lg` would opt this navbar out of the active theme.
+//
+// Radius is chosen per element KIND, not unified across the bar: nav rows and
+// menu items take `rounded-control` (--radius-control, the token documented for
+// "nav items, inputs, chips"), their popover takes --radius-popover, while
+// BUTTONS stay pills like every other button in the product. Making the rows
+// pills too is what produced capsules floating inside a soft-cornered popover.
+export const navItemCls = cn(
+  'inline-flex min-h-9 items-center justify-center gap-1 rounded-control border border-transparent px-4 py-1.5 text-sm !font-medium',
+  'ring-0 focus-visible:ring-0',
+  'text-foreground/90 transition-colors',
+  'surface-hover hover:text-foreground',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
+);
+
+export const navItemActiveCls =
+  'border-transparent bg-accent text-foreground shadow-sm dark:bg-muted dark:shadow-none';
+
+export const labelCls = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
+
+export function subMenuLinkCls(active: boolean) {
+  return cn(
+    'flex min-h-9 min-w-0 max-w-[min(17rem,calc(100vw-5rem))] items-center rounded-control border-0 px-3 py-2 text-sm font-medium transition-colors',
+    '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',
+  );
+}
+
+// Real glass: low-opacity surface so the blur actually shows the page behind
+// it. The package-level nav-dropdown-glass utility keeps the frosted effect
+// present even when the consuming app does not scan layout sources.
+export const popoverCls =
+  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-[var(--radius-popover)] 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)]';
+
+export const portalPopoverCls =
+  'fixed z-[1200] min-w-[14.5rem] rounded-[var(--radius-popover)] 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)]';