@djangocfg/layouts 2.1.591 → 2.1.593

package/src/layouts/PrivateLayout/types.ts

@@ -88,26 +88,24 @@ export interface SidebarConfig {
    * (above `footer` + account block).
    */
   menuEnd?: ReactNode;
-  /**
-   * Keep `menuStart` visible when the desktop sidebar is collapsed to the
-   * icon rail. Default `false` — most slot content is full-width and looks
-   * broken at ~56px. Set `true` only when the slot renders well in compact mode.
-   */
+  /** @deprecated No effect: a collapsed sidebar is hidden, not an icon rail. */
   menuStartShowOnCollapsed?: boolean;
-  /** Same as `menuStartShowOnCollapsed`, but for `menuEnd`. Default `false`. */
+  /** @deprecated No effect: a collapsed sidebar is hidden, not an icon rail. */
   menuEndShowOnCollapsed?: boolean;
+  /**
+   * Let the user drag the sidebar's right edge (14–24rem, remembered; double-click
+   * resets). Default `true`.
+   */
+  resizable?: boolean;
   /** Custom footer component rendered at the bottom of the sidebar */
   footer?: ReactNode;
-  /** Active-state visual on nav items. Default `'background'` (legacy). */
+  /** @deprecated No effect: the active item is always a surface. */
   activeIndicator?: SidebarActiveIndicator;
-  /** Style of group labels. Default `'uppercase'` (legacy). Collapsible groups always use `plain`. */
+  /** @deprecated No effect: group labels are always sentence case. */
   groupLabelStyle?: SidebarGroupLabelStyle;
   /** Featured CTA tile rendered below all groups, above `menuEnd`. */
   featured?: SidebarFeaturedConfig;
-  /**
-   * Override the auto-calculated nav density. When omitted density is derived
-   * from total item count (comfortable ≤5, default ≤9, compact >9).
-   */
+  /** @deprecated No effect: rows are one desktop size and one 44px touch size. */
   density?: 'comfortable' | 'default' | 'compact';
 }
 
@@ -167,11 +165,7 @@ export interface HeaderConfig {
   brandLetter?: string;
   /** User menu groups (account panel in the sidebar footer) */
   groups?: UserMenuConfig['groups'];
-  /**
-   * Behaviour of the footer account button.
-   * - `'menu'` (default) — opens a DropdownMenu with account links, locale/theme controls, and sign-out.
-   * - `'dialog'` — opens the global ProfileDialog (managed via Zustand store).
-   */
+  /** @deprecated No effect: the footer account button always opens the account menu. */
   accountAction?: 'menu' | 'dialog';
   /** Auth page path (for sign in button) */
   authPath?: string;
@@ -213,9 +207,8 @@ export interface PrivateLayoutProps {
    */
   contentScroll?: 'auto' | 'hidden';
   /**
-   * Visual style of the shell. Defaults to `'boxed'` (inset rounded card on a
-   * sidebar-coloured canvas). Pass `{ variant: 'full-bleed' }` for the legacy
-   * edge-to-edge layout.
+   * Visual style of the shell. Defaults to `'full-bleed'` (flat, Claude-style:
+   * sidebar + border + page). Pass `{ variant: 'boxed' }` for the inset rounded card.
    */
   visual?: LayoutVisualConfig;
   /**

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)]';

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

@@ -16,7 +16,6 @@
 'use client';
 
 import React, {
-  type ReactNode,
   memo,
   useEffect,
   useLayoutEffect,
@@ -31,190 +30,24 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { usePathnameWithoutLocale } from '../../../hooks';
 import { navItemsShallowEqual } from '../../../utils/navItemsShallowEqual';
 import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
-import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { useLayoutI18nOptional } from '../../../shared/LayoutI18nProvider';
 import { usePublicLayoutOptional } from '../context';
 import {
   useDropdownMenu,
   useNavbarScroll,
   useNavbarViewportVars,
 } from '../hooks';
-import type {
-  PublicDesktopDropdownRenderer,
-  PublicNavbarHeight,
-  PublicNavbarInsetX,
-  PublicNavbarPosition,
-  PublicNavbarVariant,
-  PublicNavLayout,
-} from '../navbarTypes';
-import type { NavigationItem, UserMenuConfig } from '../../types';
+import type { NavigationItem } from '../../types';
 
 import { NavActions } from '../primitives/NavActions';
-import type { NavAction } from '../primitives/NavActionItem';
 import { NavBrand } from '../primitives/NavBrand';
 import { NavControls } from '../primitives/NavControls';
 import { NavDesktopItems } from '../primitives/NavDesktopItems';
 
 import { NavbarRowDesktop, NavbarRowMobile } from './navbarRows';
 
-/**
- * Vertical padding, per breakpoint. Two independent scales rather than one with
- * `sm:` steps inside it: the mobile row's tallest element is the 44px burger,
- * so padding there is pure added height, while the desktop row needs the extra
- * air to keep the link list off the panel edge.
- */
-const heightClsDesktop: Record<PublicNavbarHeight, string> = {
-  sm: 'py-2',
-  md: 'py-3.5',
-  lg: 'py-5',
-};
-
-const heightClsMobile: Record<PublicNavbarHeight, string> = {
-  sm: 'py-1.5',
-  md: 'py-2',
-  lg: 'py-3',
-};
-
-/**
- * Token → Tailwind class for the inner-row horizontal padding.
- *
- * Deliberately ASYMMETRIC at every breakpoint (`pl` > `pr`) to correct an
- * optical imbalance, not a measured one. On the left the gutter meets the
- * brand's glyphs directly; on the right it meets a button — an icon square on
- * phones, the Login pill on desktop — whose box carries its own internal
- * padding around the glyph. Equal `px` therefore *looks* lopsided, with a
- * conspicuous moat to the right of the last control.
- *
- * It also stacks with the navbar shell's own outer gutter (`px-3 sm:px-4
- * lg:px-6`), which is why the right side stays small in absolute terms: at
- * `lg` the symmetric version put ~48px between the Login button and the
- * viewport edge.
- */
-/** Desktop (`lg`+) horizontal inset. Right stays trimmed — see the note above. */
-const insetXClsDesktop: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
-  none: '',
-  xs: 'lg:pl-4 lg:pr-1.5',
-  sm: 'lg:pl-6 lg:pr-2',
-  md: 'lg:pl-8 lg:pr-3',
-  lg: 'lg:pl-12 lg:pr-5',
-};
-
-/** Mobile horizontal inset — tighter, and asymmetric for the same reason. */
-const insetXClsMobile: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
-  none: '',
-  xs: 'pl-3 pr-1',
-  sm: 'pl-4 pr-1.5',
-  md: 'pl-5 pr-2',
-  lg: 'pl-6 pr-3',
-};
-
-/**
- * Resolves the inset token into one class string covering both breakpoints.
- *
- * A caller may also pass raw Tailwind instead of a token; that escape hatch is
- * applied verbatim to both rows, since we cannot know how to split it.
- */
-function resolveInsetX(value: PublicNavbarInsetX | undefined): string {
-  const token = (value ?? 'sm') as keyof typeof insetXClsMobile;
-  if (!(token in insetXClsMobile)) return value as string;
-  return cn(insetXClsMobile[token], insetXClsDesktop[token]);
-}
-
-interface ShapeInputs {
-  /** true at scrollY >= threshold */
-  scrolled: boolean;
-  /** Matches `transparent` flag at the source. */
-  transparent: boolean;
-  /**
-   * true while the mobile drawer is open. A `transparent` bar MUST go opaque
-   * here regardless of scroll position: an open drawer means the brand + close
-   * button sit over page content, and a see-through bar leaves them floating on
-   * whatever is scrolled behind — the "navbar lost its background" bug.
-   */
-  menuOpen: boolean;
-}
-
-export interface NavbarShellProps {
-  // ── Surface identity (reported to context) ────────────────────────────────
-  variant: PublicNavbarVariant;
-  position: PublicNavbarPosition;
-
-  // ── Content ───────────────────────────────────────────────────────────────
-  brand?: ReactNode;
-  brandHref?: string;
-  navigation?: NavigationItem[];
-  userMenu?: UserMenuConfig;
-  renderDesktopDropdown?: PublicDesktopDropdownRenderer;
-  /**
-   * Hard cap for how many items to try to fit on desktop. Useful when a
-   * consumer wants to force a compact primary row even if more would fit.
-   * Defaults to the full list length (let the responsive measurer decide).
-   */
-  desktopMaxPrimaryItems?: number;
-
-  // ── Layout ────────────────────────────────────────────────────────────────
-  navLayout?: PublicNavLayout;
-  navbarHeight?: PublicNavbarHeight;
-  /** 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 ───────────────────────────────────────────────────────
-  hideNavOnScroll?: boolean;
-  transparent?: boolean;
-  transparentThreshold?: number;
-
-  // ── Chrome (per-variant) ──────────────────────────────────────────────────
-  /** Classes on the outer wrapper (fixed/sticky, top offset, outer x-padding). */
-  outerClassName?: string;
-  /** Classes for the `<nav>` element defining the shape (rounding, border, shadow). */
-  shapeClassName?: string;
-  /** Surface classes (bg, backdrop-blur). Driven by `shapeForState`. */
-  shapeForState?: (inputs: ShapeInputs) => string;
-
-  /**
-   * Replaces the default actions column (UserMenu + mobile-toggle).
-   * Variant owns the mobile toggle too. Receives helpers so it can build the
-   * right-hand side however it wants.
-   */
-  renderActions?: (ctx: NavbarActionsContext) => ReactNode;
-
-  // ── Default-actions slots (only used when `renderActions` is NOT provided) ─
-  /** Typed CTA pills (Book a demo / Get started / …) before UserMenu. */
-  actions?: NavAction[];
-  /** Arbitrary ReactNode between actions and UserMenu. */
-  actionsLeadingSlot?: ReactNode;
-  /** Arbitrary ReactNode after the mobile toggle. */
-  actionsTrailingSlot?: ReactNode;
-
-  // ── Theme + locale controls (rendered next to UserMenu on desktop) ────────
-  /** Toggle individual controls. Locale switcher also requires `i18n`. */
-  controls?: {
-    /** Light / system / dark pill. @default false */
-    showThemeSwitcher?: boolean;
-    /** Locale dropdown. Requires `i18n`. @default false */
-    showLocaleSwitcher?: boolean;
-  };
-
-  // ── Props override (used by variants that proxy ctx differently) ──────────
-  mobileMenuOpen?: boolean;
-  onMobileMenuToggle?: () => void;
-}
-
-export interface NavbarActionsContext {
-  userMenu?: UserMenuConfig;
-  mobileMenuOpen: boolean;
-  toggleMobileMenu: () => void;
-  toggleMobileLabel: string;
-  navLayout: PublicNavLayout;
-  /**
-   * Pre-built theme/locale controls node. `null` when both toggles are off.
-   * Variants with a custom `renderActions` can choose where to place it.
-   */
-  controls: ReactNode | null;
-}
+import { heightClsDesktop, heightClsMobile, resolveInsetX } from './navbarShellStyles';
+import type { NavbarShellProps } from './navbarShell.types';
 
 function NavbarShellRaw(props: NavbarShellProps) {
   const context = usePublicLayoutOptional();

package/src/layouts/PublicLayout/shared/index.ts

@@ -1,4 +1,4 @@
 export { NavbarShell } from './NavbarShell';
-export type { NavbarShellProps, NavbarActionsContext } from './NavbarShell';
+export type { NavbarShellProps, NavbarActionsContext } from './navbarShell.types';
 export { MobileDrawerShell } from './MobileDrawerShell';
 export type { MobileDrawerShellProps } from './MobileDrawerShell';