@djangocfg/layouts 2.1.256 → 2.1.259

package/src/layouts/PublicLayout/publicShellShadow.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared “floating glass” chrome for navbar + mobile drawer.
+ *
+ * Light: barely-there lift. Dark: one soft outer shadow (border already defines the edge).
+ */
+export const publicFloatingChromeClassName =
+  [
+    '!border-0 ring-0 outline-none',
+    'shadow-[0_1px_6px_rgba(0,0,0,0.028)]',
+    'dark:!border dark:!border-border/75',
+    'dark:shadow-[0_3px_14px_rgba(0,0,0,0.07)]',
+  ].join(' ');

package/src/layouts/_components/PrivateSidebarAccount.tsx

@@ -30,6 +30,17 @@ import { LocaleSwitcher } from './LocaleSwitcher';
 import type { I18nLayoutConfig } from '../AppLayout/AppLayout';
 import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
 
+/** Radix portals (dropdown, select, popover) render outside the account node — ignore those clicks for “outside”. */
+function isPointerFromRadixOverlay(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof Element)) return false;
+  return Boolean(
+    target.closest('[data-radix-popper-content-wrapper]') ||
+      target.closest('[data-radix-dropdown-menu-content]') ||
+      target.closest('[data-radix-select-content]') ||
+      target.closest('[data-radix-popover-content]'),
+  );
+}
+
 interface PrivateSidebarAccountProps {
   header?: HeaderConfig;
   i18n?: I18nLayoutConfig;
@@ -53,9 +64,11 @@ export function PrivateSidebarAccount({ header, i18n }: PrivateSidebarAccountPro
 
     const handlePointerDown = (event: PointerEvent) => {
       const root = accountRootRef.current;
-      if (root && !root.contains(event.target as Node)) {
-        setAccountOpen(false);
-      }
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (root?.contains(target)) return;
+      if (isPointerFromRadixOverlay(target)) return;
+      setAccountOpen(false);
     };
 
     document.addEventListener('pointerdown', handlePointerDown);

package/src/layouts/_components/UserMenu.tsx

@@ -30,7 +30,7 @@
 
 'use client';
 
-import { ArrowRight, LogOut } from 'lucide-react';
+import { ArrowRight, Globe, LogOut } from 'lucide-react';
 import Link from 'next/link';
 import React, { useMemo } from 'react';
 
@@ -39,12 +39,26 @@ import { useAppT } from '@djangocfg/i18n';
 
 import { useLogout } from '../../hooks';
 import {
-    Avatar, AvatarFallback, AvatarImage, Button, DropdownMenu, DropdownMenuContent,
-    DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
-    DropdownMenuTrigger
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  getLanguageFlag,
 } from '@djangocfg/ui-core/components';
 
-import type { UserMenuGroup } from '../types';
+import { LOCALE_LABELS } from './LocaleSwitcher';
+
+import type { UserMenuGroup, UserMenuLocaleConfig } from '../types';
 
 export interface UserMenuProps {
   /** Display variant */
@@ -53,12 +67,18 @@ export interface UserMenuProps {
   groups?: UserMenuGroup[];
   /** Auth page path (for sign in button) */
   authPath?: string;
+  /**
+   * Language switching inside this menu (desktop: submenu; mobile: button row).
+   * Prefer this over nesting `<LocaleSwitcher />` in the same dropdown — nested menus close each other.
+   */
+  i18n?: UserMenuLocaleConfig;
 }
 
 export function UserMenu({
   variant = 'desktop',
   groups,
   authPath = '/auth',
+  i18n,
 }: UserMenuProps) {
   const { user, isAuthenticated } = useAuth();
   const handleLogout = useLogout();
@@ -69,36 +89,43 @@ export function UserMenu({
     signIn: t('layouts.profile.login'),
     signOut: t('layouts.profile.signOut'),
     userMenu: t('layouts.profile.userMenu'),
+    language: t('layouts.profile.language'),
   }), [t]);
 
   React.useEffect(() => {
     setMounted(true);
   }, []);
 
-  // Prepare menu groups
-  // Must be before early return to maintain hook order
-  const menuGroups: UserMenuGroup[] = React.useMemo(() => {
-    const allGroups: UserMenuGroup[] = [];
+  /** Profile links only; sign out rendered separately so we can insert locale UI between. */
+  const profileGroups: UserMenuGroup[] = React.useMemo(() => {
+    if (groups && groups.length > 0) return [...groups];
+    return [];
+  }, [groups]);
 
-    // Add custom groups if provided
-    if (groups && groups.length > 0) {
-      allGroups.push(...groups);
-    }
+  const signOutItem = React.useMemo(
+    () => ({
+      label: labels.signOut,
+      onClick: handleLogout,
+      icon: LogOut,
+      variant: 'destructive' as const,
+    }),
+    [handleLogout, labels.signOut],
+  );
 
-    // Always add Sign Out at the end
-    allGroups.push({
-      items: [
-        {
-          label: labels.signOut,
-          onClick: handleLogout,
-          icon: LogOut,
-          variant: 'destructive',
-        },
-      ],
-    });
+  /** Prepared locale UI data — avoid `i18n && i18n.locales.length` chains in JSX. */
+  const localeMenu = React.useMemo(() => {
+    const codes = i18n?.locales;
+    if (!i18n || !codes?.length) return null;
+    return {
+      codes,
+      current: i18n.locale,
+      onChange: i18n.onLocaleChange,
+    };
+  }, [i18n]);
 
-    return allGroups;
-  }, [groups, handleLogout, labels.signOut]);
+  const hasProfileGroups = profileGroups.length > 0;
+
+  const localeLabel = (code: string) => LOCALE_LABELS[code] || code.toUpperCase();
 
   if (!mounted) {
     return null;
@@ -111,7 +138,7 @@ export function UserMenu({
         <div className="pt-4 border-t border-border/50">
           <Link
             href={authPath}
-            className="group flex items-center justify-between rounded-lg px-2 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
+            className="group flex items-center justify-between rounded-full px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
           >
             <span>{labels.signIn}</span>
             <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
@@ -121,7 +148,7 @@ export function UserMenu({
     }
     return (
       <Link href={authPath}>
-        <Button variant="default" size="sm">
+        <Button variant="default" size="sm" className="rounded-full px-5">
           {labels.signIn}
         </Button>
       </Link>
@@ -151,7 +178,7 @@ export function UserMenu({
           </div>
         </div>
         <div className="space-y-1">
-          {menuGroups.map((group, groupIndex) => (
+          {profileGroups.map((group, groupIndex) => (
             <div key={groupIndex}>
               {group.title && (
                 <div className="px-4 py-2">
@@ -195,6 +222,44 @@ export function UserMenu({
               })}
             </div>
           ))}
+          {localeMenu && (
+            <div className="border-t border-border/50 px-4 pt-3">
+              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {labels.language}
+              </p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {localeMenu.codes.map((code) => {
+                  const flag = getLanguageFlag(code);
+                  const active = code === localeMenu.current;
+                  return (
+                    <button
+                      key={code}
+                      type="button"
+                      onClick={() => localeMenu.onChange(code)}
+                      className={`rounded-md border px-2.5 py-1.5 text-sm font-medium transition-colors ${
+                        active
+                          ? 'border-primary bg-accent text-foreground'
+                          : 'border-border/60 text-muted-foreground hover:bg-accent hover:text-foreground'
+                      }`}
+                    >
+                      {flag ? <span className="mr-1.5">{flag}</span> : null}
+                      {localeLabel(code)}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          <div>
+            <button
+              type="button"
+              onClick={signOutItem.onClick}
+              className="flex w-full items-center gap-3 rounded-sm px-4 py-3 text-left text-sm font-medium text-destructive transition-colors hover:bg-destructive/10"
+            >
+              <LogOut className="h-4 w-4" />
+              {signOutItem.label}
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -222,7 +287,7 @@ export function UserMenu({
           </div>
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {menuGroups.map((group, groupIndex) => (
+        {profileGroups.map((group, groupIndex) => (
           <React.Fragment key={groupIndex}>
             {groupIndex > 0 && <DropdownMenuSeparator />}
             <DropdownMenuGroup>
@@ -267,6 +332,44 @@ export function UserMenu({
             </DropdownMenuGroup>
           </React.Fragment>
         ))}
+        {localeMenu && (
+          <>
+            {hasProfileGroups && <DropdownMenuSeparator />}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger className="cursor-default">
+                <Globe className="mr-2 h-4 w-4" />
+                <span>{labels.language}</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                {localeMenu.codes.map((code) => {
+                  const flag = getLanguageFlag(code);
+                  return (
+                    <DropdownMenuItem
+                      key={code}
+                      onSelect={() => {
+                        localeMenu.onChange(code);
+                      }}
+                      className={code === localeMenu.current ? 'bg-accent' : ''}
+                    >
+                      {flag ? <span className="mr-2">{flag}</span> : null}
+                      {localeLabel(code)}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            onClick={signOutItem.onClick}
+            className="text-destructive focus:text-destructive"
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            <span>{signOutItem.label}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/layouts/types/index.ts

@@ -10,7 +10,15 @@
 // ============================================================================
 
 // Local provider configs
-export type { ThemeConfig, SWRConfigOptions, CentrifugoConfig } from './providers.types';
+export type {
+  ThemeConfig,
+  ThemeStyleConfig,
+  ThemeCssVarKey,
+  ThemeCssVarMap,
+  ThemeStylePresetId,
+  SWRConfigOptions,
+  CentrifugoConfig,
+} from './providers.types';
 
 // External provider configs (re-export for convenience)
 export type { AnalyticsConfig } from '../../snippets/Analytics/types';
@@ -36,6 +44,7 @@ export type {
   FooterConfig,
   UserMenuItem,
   UserMenuGroup,
+  UserMenuLocaleConfig,
   UserMenuConfig,
 } from './ui.types';
 

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

@@ -5,6 +5,11 @@
  * Note: Analytics, PWA, Push, and Error types are defined in their respective modules
  */
 
+import type { ThemeStyleConfig } from '../../theme/themeStyle.types';
+
+// Re-export for consumers that only import from `layouts/types`
+export type { ThemeStyleConfig, ThemeCssVarKey, ThemeCssVarMap, ThemeStylePresetId } from '../../theme/themeStyle.types';
+
 // ============================================================================
 // Theme Configuration
 // ============================================================================
@@ -12,6 +17,11 @@
 export interface ThemeConfig {
   defaultTheme?: 'light' | 'dark' | 'system';
   storageKey?: string;
+  /**
+   * Typed CSS variable presets and per-mode overrides (see `ThemeStyleBridge` in BaseApp).
+   * For heavy visual editing, use the playground Theme Configurator and export CSS instead.
+   */
+  style?: ThemeStyleConfig;
 }
 
 // ============================================================================

package/src/layouts/types/ui.types.ts

@@ -97,9 +97,18 @@ export interface UserMenuGroup {
   items: UserMenuItem[];
 }
 
+/** Optional locale switching inside the user menu (submenu on desktop; avoids nested `DropdownMenu` + portal issues). */
+export interface UserMenuLocaleConfig {
+  locale: string;
+  locales: string[];
+  onLocaleChange: (locale: string) => void;
+}
+
 export interface UserMenuConfig {
   /** Menu groups for authenticated users */
   groups?: UserMenuGroup[];
   /** Auth page path (for sign in button) */
   authPath?: string;
+  /** When set, language is rendered inside the user menu (not as a separate nested dropdown). */
+  i18n?: UserMenuLocaleConfig;
 }

package/src/theme/ThemeStyleBridge.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+
+import { buildThemeStyleSheet } from './buildThemeStyleSheet';
+
+import type { ThemeStyleConfig } from './themeStyle.types';
+
+const STYLE_ELEMENT_ID = 'djangocfg-baseapp-theme-style';
+
+export interface ThemeStyleBridgeProps {
+  style?: ThemeStyleConfig;
+}
+
+/**
+ * Injects merged theme CSS variables after globals (preset + typed overrides).
+ * Renders nothing; safe to mount once under ThemeProvider.
+ */
+export function ThemeStyleBridge({ style }: ThemeStyleBridgeProps) {
+  const css = useMemo(() => buildThemeStyleSheet(style), [style]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    let el = document.getElementById(STYLE_ELEMENT_ID) as HTMLStyleElement | null;
+    if (!css) {
+      el?.remove();
+      return;
+    }
+
+    if (!el) {
+      el = document.createElement('style');
+      el.id = STYLE_ELEMENT_ID;
+      document.head.appendChild(el);
+    }
+
+    el.textContent = css;
+  }, [css]);
+
+  return null;
+}

package/src/theme/buildThemeStyleSheet.ts

@@ -0,0 +1,71 @@
+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/index.ts

@@ -0,0 +1,16 @@
+export type {
+  ThemeCssVarChartKey,
+  ThemeCssVarChromeKey,
+  ThemeCssVarColorKey,
+  ThemeCssVarKey,
+  ThemeCssVarMap,
+  ThemeCssVarSidebarKey,
+  ThemeStyleConfig,
+  ThemeStylePresetId,
+} from './themeStyle.types';
+
+export { THEME_STYLE_PRESETS, THEME_STYLE_PRESET_ORDER } from './themeStylePresets';
+
+export { buildThemeStyleSheet } from './buildThemeStyleSheet';
+
+export { ThemeStyleBridge, type ThemeStyleBridgeProps } from './ThemeStyleBridge';

package/src/theme/themeStyle.types.ts

@@ -0,0 +1,89 @@
+/**
+ * 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;
+  };
+}