@djangocfg/layouts 2.1.358 → 2.1.360

package/src/layouts/PrivateLayout/context.tsx

@@ -41,8 +41,6 @@ export interface PrivateLayoutContextValue {
   isExpanded: boolean;
   /** Whether the sidebar is collapsed to icon rail */
   isCollapsed: boolean;
-  /** Whether the sidebar is temporarily hover-expanded overlay */
-  isHoverExpanded: boolean;
   /** Nav density based on total item count */
   density: NavDensity;
   /** Density tokens for the current state */
@@ -94,7 +92,6 @@ interface PrivateLayoutProviderProps {
   pathname: string;
   isMobile: boolean;
   state: 'expanded' | 'collapsed';
-  isHoverExpanded?: boolean;
 }
 
 // ============================================================================
@@ -108,7 +105,6 @@ export function PrivateLayoutProvider({
   pathname,
   isMobile,
   state,
-  isHoverExpanded = false,
 }: PrivateLayoutProviderProps) {
   const homeHref = sidebar?.homeHref || '/';
   const brandTitle = header?.title?.trim() || 'Dashboard';
@@ -127,8 +123,7 @@ export function PrivateLayoutProvider({
   const isExpanded = state === 'expanded';
   const isCollapsed = state === 'collapsed';
 
-  /** Expanded or hover-expanded: follow item-count tier; collapsed rail: fixed `default` sizing so icons stay uniform. */
-  const menuNav = isCollapsed && !isHoverExpanded ? RAIL_NAV : DENSITY[density];
+  const menuNav = isCollapsed ? RAIL_NAV : DENSITY[density];
 
   const isActive = React.useCallback(
     (href: string) => {
@@ -144,7 +139,7 @@ export function PrivateLayoutProvider({
     [pathname, allItems],
   );
 
-  const collapsedRail = !isMobile && isCollapsed && !isHoverExpanded;
+  const collapsedRail = !isMobile && isCollapsed;
 
   const hasMenuStart = sidebar?.menuStart != null && sidebar.menuStart !== false;
   const hasMenuEnd = sidebar?.menuEnd != null && sidebar.menuEnd !== false;
@@ -166,7 +161,6 @@ export function PrivateLayoutProvider({
       isMobile,
       isExpanded,
       isCollapsed,
-      isHoverExpanded,
       density,
       menuNav,
       activeIndicator,
@@ -187,7 +181,6 @@ export function PrivateLayoutProvider({
       isMobile,
       isExpanded,
       isCollapsed,
-      isHoverExpanded,
       density,
       menuNav,
       activeIndicator,

package/src/layouts/PrivateLayout/hooks/index.ts

@@ -4,11 +4,6 @@
 
 export { useAuthGuard } from './useAuthGuard';
 export { useLayoutVisual } from './useLayoutVisual';
-export {
-  useHoverExpand,
-  blockSidebarCollapse,
-  allowSidebarCollapse,
-} from './useHoverExpand';
 export { useShellVisualState } from './useShellVisualState';
 export { useSidebarKeyboard } from './useSidebarKeyboard';
 export { useSidebarDefaultOpen } from './useSidebarDefaultOpen';

package/src/layouts/PrivateLayout/hooks/useShellVisualState.ts

@@ -2,7 +2,7 @@
  * Shell Visual State Hook
  *
  * Centralizes ALL visual decisions for the sidebar + content pair:
- * - sidebar state: expanded | hover-overlay | collapsed-rail
+ * - sidebar state: expanded | collapsed-rail
  * - layout variant: boxed (inset) | full-bleed
  * - what to show/hide in each state
  * - CSS modifiers for sidebar root, inner shell, and content inset
@@ -28,9 +28,7 @@ export interface ShellVisualFlags {
   isExpanded: boolean;
   /** Collapsed to icon rail */
   isCollapsed: boolean;
-  /** Temporary hover-expand overlay on desktop rail */
-  isHoverOverlay: boolean;
-  /** True only in desktop collapsed rail without hover */
+  /** True only in desktop collapsed rail */
   isRail: boolean;
 }
 
@@ -58,12 +56,8 @@ export interface ShellContentFlags {
 // ============================================================================
 
 export interface ShellChromeFlags {
-  /** Sidebar casts a shadow (overlay mode) */
-  showShadow: boolean;
   /** Right border/separator on sidebar */
   showBorder: boolean;
-  /** Internal right padding inside sidebar (overlay breathing room) */
-  needsInternalPadding: boolean;
   /** Content inset should have margin to make room for sidebar */
   contentHasSidebarGap: boolean;
   /** Sidebar width is fixed to icon-rail */
@@ -101,107 +95,36 @@ export interface ShellVisualState {
 export function useShellVisualState(
   layoutVariant?: LayoutVisualConfig['variant'],
 ): ShellVisualState {
-  const { isMobile, isExpanded, isCollapsed, isHoverExpanded } =
-    usePrivateLayoutContext();
+  const { isMobile, isExpanded, isCollapsed } = usePrivateLayoutContext();
 
-  const isRail = !isMobile && isCollapsed && !isHoverExpanded;
-  const isHoverOverlay = !isMobile && isCollapsed && isHoverExpanded;
+  const isRail = !isMobile && isCollapsed;
   const variant = layoutVariant ?? 'boxed';
 
   return useMemo(() => {
-    // ------------------------------------------------------------------------
-    // Content visibility
-    // ------------------------------------------------------------------------
-    const showLabels = isExpanded || isHoverOverlay;
+    const showLabels = isExpanded || isMobile;
     const showGroupLabels = showLabels;
     const showBadgeText = showLabels;
     const showTooltips = isRail;
     const isAccountCompact = isRail;
     const hideSlots = isRail;
 
-    // ------------------------------------------------------------------------
-    // Chrome
-    // ------------------------------------------------------------------------
-    // Only hover-overlay is an overlay — it needs shadow + border + padding.
-    // Persistent expanded is part of the layout flow — no shadow.
-    const showShadow = isHoverOverlay;
-    const showBorder = isHoverOverlay;
-    const needsInternalPadding = isHoverOverlay;
-
-    // Content gap: only persistent expanded pushes the inset.
-    // Hover-overlay is temporary — content must NOT shift.
-    // Collapsed rail also leaves a gap (the rail itself is narrow but present).
     const contentHasSidebarGap = isExpanded || isRail;
     const isRailWidth = isRail;
+    const showBorder = false;
 
-    // ------------------------------------------------------------------------
-    // Modifiers
-    // ------------------------------------------------------------------------
     const sidebarRoot: string[] = [];
     const sidebarInner: string[] = [];
     const sidebarContent: string[] = [];
 
-    if (isHoverOverlay) {
-      sidebarRoot.push('z-50', '!w-[var(--sidebar-width)]', 'min-w-[var(--sidebar-width)]');
-      // Allow scroll inside hover-expanded overlay — shadcn hardcodes
-      // overflow-hidden on div[data-sidebar=sidebar]; override it here.
-      sidebarInner.push('!overflow-auto');
-      // Extra right padding on content so text doesn't hug the right edge
-      sidebarContent.push('!overflow-auto', 'pr-4');
-
-      if (showShadow) {
-        sidebarInner.push(
-          'shadow-[4px_0_24px_-4px_rgba(0,0,0,0.08)]',
-          'dark:shadow-[4px_0_24px_-4px_rgba(0,0,0,0.25)]',
-        );
-      }
-      if (showBorder) {
-        sidebarInner.push('border-r', 'border-sidebar-border/30');
-      }
-      // Hide the shadcn gradient border line on hover overlay
-      sidebarInner.push('[&>div[aria-hidden]]:hidden');
-    }
-
-    // Boxed variant: inner sidebar gets rounded corners when persistent expanded
     if (variant === 'boxed' && isExpanded) {
       sidebarInner.push('rounded-sm');
     }
 
     return {
-      flags: {
-        isMobile,
-        isExpanded,
-        isCollapsed,
-        isHoverOverlay,
-        isRail,
-      },
-      content: {
-        showLabels,
-        showGroupLabels,
-        showBadgeText,
-        showTooltips,
-        isAccountCompact,
-        hideSlots,
-      },
-      chrome: {
-        showShadow,
-        showBorder,
-        needsInternalPadding,
-        contentHasSidebarGap,
-        isRailWidth,
-      },
-      modifiers: {
-        sidebarRoot,
-        sidebarInner,
-        sidebarContent,
-      },
+      flags: { isMobile, isExpanded, isCollapsed, isRail },
+      content: { showLabels, showGroupLabels, showBadgeText, showTooltips, isAccountCompact, hideSlots },
+      chrome: { showBorder, contentHasSidebarGap, isRailWidth },
+      modifiers: { sidebarRoot, sidebarInner, sidebarContent },
     };
-  }, [
-    isMobile,
-    isExpanded,
-    isCollapsed,
-    isHoverOverlay,
-    isRail,
-    variant,
-  ]);
+  }, [isMobile, isExpanded, isCollapsed, isRail, variant]);
 }

package/src/layouts/PrivateLayout/hooks/useSidebarDefaultOpen.ts

@@ -1,11 +1,16 @@
 /**
- * Reads the sidebar open/closed state from the cookie written by shadcn-sidebar.
- * Falls back to `true` (expanded) when no cookie exists.
+ * Resolves the default sidebar open/closed state.
+ *
+ * Priority:
+ *   1. Cookie written by shadcn-sidebar (user's last explicit choice)
+ *   2. Viewport width — collapse by default on tablet and below (< 1024px lg)
+ *   3. Expanded (large desktop, no cookie)
  *
  * Must run on the client — returns `true` during SSR.
  */
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const COLLAPSE_BELOW_PX = 1024; // Tailwind lg
 
 export function useSidebarDefaultOpen(): boolean {
   if (typeof document === 'undefined') return true;
@@ -14,8 +19,14 @@ export function useSidebarDefaultOpen(): boolean {
     .split('; ')
     .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`));
 
-  if (!match) return true;
+  if (match) {
+    return match.split('=')[1] === 'true';
+  }
+
+  // No cookie — first visit. Collapse on smaller screens.
+  if (typeof window !== 'undefined') {
+    return window.innerWidth >= COLLAPSE_BELOW_PX;
+  }
 
-  const value = match.split('=')[1];
-  return value === 'true';
+  return true;
 }

package/src/layouts/PrivateLayout/index.ts

@@ -4,6 +4,7 @@
 
 export { PrivateLayout } from './PrivateLayout';
 export { PrivateLayoutProvider, usePrivateLayoutContext } from './context';
+export { SidebarBrandSwitcher } from './components';
 export type {
   PrivateLayoutProps,
   SidebarItem,
@@ -13,4 +14,6 @@ export type {
   SidebarActiveIndicator,
   SidebarGroupLabelStyle,
   SidebarFeaturedConfig,
+  SidebarBrandSwitcherConfig,
+  SidebarBrandSwitcherItem,
 } from './types';

package/src/layouts/PrivateLayout/types.ts

@@ -111,11 +111,46 @@ export interface SidebarConfig {
   density?: 'comfortable' | 'default' | 'compact';
 }
 
+// ============================================================================
+// Brand Switcher Types
+// ============================================================================
+
+export interface SidebarBrandSwitcherItem {
+  /** Display name */
+  label: string;
+  /** Avatar image URL or initials fallback */
+  avatar?: string;
+  /** Single letter shown when `avatar` is absent */
+  monogram?: string;
+  /** Navigation target on select */
+  href?: string;
+  /** Callback on select (alternative to href) */
+  onSelect?: () => void;
+  /** Mark as currently active */
+  active?: boolean;
+  /** Small secondary line under label (e.g. plan name, role) */
+  description?: string;
+}
+
+export interface SidebarBrandSwitcherConfig {
+  items: SidebarBrandSwitcherItem[];
+  /** Label for "add new" action at the bottom of the dropdown. Omit to hide. */
+  addLabel?: string;
+  /** Called when "add new" is clicked */
+  onAdd?: () => void;
+}
+
 // ============================================================================
 // Header Config
 // ============================================================================
 
 export interface HeaderConfig {
+  /**
+   * Brand switcher config. When provided, replaces the static brand header
+   * with a dropdown for switching workspaces/accounts/projects.
+   * Takes priority over `brand`, `title`, `brandIcon`, `brandLetter`.
+   */
+  switcher?: SidebarBrandSwitcherConfig;
   /** Custom header brand node (same idea as PublicNavbar `brand`). */
   brand?: ReactNode;
   /** Shown next to the logo when the sidebar is expanded */

package/src/layouts/types/providers.types.ts

@@ -5,10 +5,10 @@
  * Note: Analytics, PWA, Push, and Error types are defined in their respective modules
  */
 
-import type { ThemeStyleConfig } from '../../theme/themeStyle.types';
+import type { ThemeStyleConfig } from '@djangocfg/ui-core/styles/presets';
 
 // Re-export for consumers that only import from `layouts/types`
-export type { ThemeStyleConfig, ThemeCssVarKey, ThemeCssVarMap, ThemeStylePresetId } from '../../theme/themeStyle.types';
+export type { ThemeStyleConfig, ThemeCssVarKey, ThemeCssVarMap, ThemeStylePresetId } from '@djangocfg/ui-core/styles/presets';
 
 // ============================================================================
 // Theme Configuration

package/src/theme/ThemeStyleBridge.tsx

@@ -2,9 +2,7 @@
 
 import { useEffect, useMemo } from 'react';
 
-import { buildThemeStyleSheet } from './buildThemeStyleSheet';
-
-import type { ThemeStyleConfig } from './themeStyle.types';
+import { buildThemeStyleSheet, type ThemeStyleConfig } from '@djangocfg/ui-core/styles/presets';
 
 const STYLE_ELEMENT_ID = 'djangocfg-baseapp-theme-style';
 

package/src/theme/index.ts

@@ -7,10 +7,8 @@ export type {
   ThemeCssVarSidebarKey,
   ThemeStyleConfig,
   ThemeStylePresetId,
-} from './themeStyle.types';
+} from '@djangocfg/ui-core/styles/presets';
 
-export { THEME_STYLE_PRESETS, THEME_STYLE_PRESET_ORDER } from './themeStylePresets';
-
-export { buildThemeStyleSheet } from './buildThemeStyleSheet';
+export { THEME_STYLE_PRESETS, THEME_STYLE_PRESET_ORDER, buildThemeStyleSheet } from '@djangocfg/ui-core/styles/presets';
 
 export { ThemeStyleBridge, type ThemeStyleBridgeProps } from './ThemeStyleBridge';

package/src/theme/buildThemeStyleSheet.ts

@@ -1,71 +0,0 @@
-import type { ThemeCssVarMap, ThemeStyleConfig, ThemeStylePresetId } from './themeStyle.types';
-import { THEME_STYLE_PRESETS } from './themeStylePresets';
-
-function mergeLayer(
-  base: ThemeCssVarMap | undefined,
-  over: ThemeCssVarMap | undefined
-): ThemeCssVarMap {
-  return { ...base, ...over };
-}
-
-/**
- * Tailwind v4 `rounded-*` utilities are backed by `--radius-*` scale variables (xs/sm/md/…),
- * not by our semantic `--radius`.
- *
- * When semantic `radius` is present, emit the derived scale too so the injected stylesheet
- * controls both semantic and Tailwind scale rounding across the UI.
- */
-function withTailwindRadiusScale(vars: ThemeCssVarMap): Array<[string, string]> {
-  const entries = Object.entries(vars);
-  const radius = vars.radius;
-  if (!radius) return entries;
-
-  const r = String(radius).trim();
-  if (!r) return entries;
-
-  const scale: Array<[string, string]> = [
-    ['radius-xs', `calc(${r} - 6px)`],
-    ['radius-sm', `calc(${r} - 4px)`],
-    ['radius-md', `calc(${r} - 2px)`],
-    ['radius-lg', r],
-    ['radius-xl', `calc(${r} + 4px)`],
-    ['radius-2xl', `calc(${r} + 8px)`],
-    ['radius-3xl', `calc(${r} + 12px)`],
-    ['radius-4xl', `calc(${r} + 16px)`],
-  ];
-
-  // Put derived values after semantic `radius` so they always win in the injected block.
-  return [...entries, ...scale];
-}
-
-/**
- * Build a small stylesheet fragment for injection after globals.
- * Order: preset (if not default) → `vars.light` / `vars.dark`.
- */
-export function buildThemeStyleSheet(style?: ThemeStyleConfig): string {
-  if (!style) return '';
-
-  const presetId: ThemeStylePresetId = style.preset ?? 'default';
-  const preset = THEME_STYLE_PRESETS[presetId] ?? THEME_STYLE_PRESETS.default;
-
-  const light = mergeLayer(preset.light, style.vars?.light);
-  const dark = mergeLayer(preset.dark, style.vars?.dark);
-
-  const blocks: string[] = [];
-
-  if (Object.keys(light).length > 0) {
-    const body = withTailwindRadiusScale(light)
-      .map(([k, v]) => `  --${k}: ${v};`)
-      .join('\n');
-    blocks.push(`:root {\n${body}\n}`);
-  }
-
-  if (Object.keys(dark).length > 0) {
-    const body = withTailwindRadiusScale(dark)
-      .map(([k, v]) => `  --${k}: ${v};`)
-      .join('\n');
-    blocks.push(`.dark {\n${body}\n}`);
-  }
-
-  return blocks.join('\n\n');
-}

package/src/theme/themeStyle.types.ts

@@ -1,89 +0,0 @@
-/**
- * Typed theme token overrides for BaseApp (`theme.style`).
- *
- * Values are raw HSL components as in ui-core CSS, e.g. `192 90% 35%` (no `hsl()` wrapper).
- * **`radius`** accepts any valid CSS length (`0.75rem`, `1rem`, …).
- *
- * ### Parity with the Theme Configurator playground
- *
- * The playground (`apps/playground`) uses **`ThemeData`**: nested objects (`colors.primary`, `radius`, …).
- * This package maps the **same semantics** onto **global CSS variables** (`--primary`, `--radius`, …) that
- * `buildThemeStyleSheet` injects. Playground-only buckets (**`shadows`**, **`typography`**, **`spacing`**, …)
- * are **not** represented here — export full CSS from the configurator when you need those.
- *
- * Rough mapping: `colors.*` → kebab key without `Foreground` → `*-foreground`; `radius` → `radius`;
- * `sidebar.*` → `sidebar-*`.
- */
-
-/** Core semantic colors (HSL triplets) */
-export type ThemeCssVarColorKey =
-  | 'background'
-  | 'foreground'
-  | 'card'
-  | 'card-foreground'
-  | 'popover'
-  | 'popover-foreground'
-  | 'primary'
-  | 'primary-foreground'
-  | 'secondary'
-  | 'secondary-foreground'
-  | 'muted'
-  | 'muted-foreground'
-  | 'accent'
-  | 'accent-foreground'
-  | 'destructive'
-  | 'destructive-foreground';
-
-/** Layout / focus tokens — `radius` is usually a length, rest are HSL or shared with colors */
-export type ThemeCssVarChromeKey = 'border' | 'input' | 'ring' | 'radius';
-
-export type ThemeCssVarSidebarKey =
-  | 'sidebar-background'
-  | 'sidebar-foreground'
-  | 'sidebar-primary'
-  | 'sidebar-primary-foreground'
-  | 'sidebar-accent'
-  | 'sidebar-accent-foreground'
-  | 'sidebar-border'
-  | 'sidebar-ring';
-
-export type ThemeCssVarChartKey = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
-
-/**
- * Keys that match `--${key}` in `ui-core` theme files (`light.css` / `dark.css`).
- * Use `ThemeCssVarMap` for partial overrides on top of a preset.
- */
-export type ThemeCssVarKey =
-  | ThemeCssVarColorKey
-  | ThemeCssVarChromeKey
-  | ThemeCssVarSidebarKey
-  | ThemeCssVarChartKey;
-
-/** Partial map of semantic variables for one color mode */
-export type ThemeCssVarMap = Partial<Record<ThemeCssVarKey, string>>;
-
-/** Built-in bundles in `THEME_STYLE_PRESETS` — see README preset table. */
-export type ThemeStylePresetId =
-  | 'default'
-  | 'django-cfg'
-  | 'ios'
-  | 'soft'
-  | 'dense'
-  | 'high-contrast';
-
-/**
- * Optional style layer: named preset + per-mode overrides.
- * Merged as: globals (CSS imports) → **preset** → **`vars.light` / `vars.dark`** (later wins).
- */
-export interface ThemeStyleConfig {
-  /**
-   * Built-in token bundle. Use `'default'` or omit to rely only on imported CSS + `vars`.
-   * @default 'default'
-   */
-  preset?: ThemeStylePresetId;
-  /** Fine-grained overrides on top of globals and preset */
-  vars?: {
-    light?: ThemeCssVarMap;
-    dark?: ThemeCssVarMap;
-  };
-}