xladmin 0.4.0 → 0.6.0

package/README.md

@@ -34,6 +34,7 @@ You also need one router adapter:
 - `createAxiosAdminClient(...)`
 - `createFetchAdminClient(...)`
 - `createBrowserAdminRouter(...)`
+- `AdminCurrentUser`
 - admin types, i18n helpers, and default theme
 
 ## Minimal Example
@@ -67,6 +68,48 @@ export function AdminApp() {
 
 For framework routing, use one of the adapter packages instead of the default browser router.
 
+## Current User And Logout
+
+`Shell` shows a compact current-user panel pinned to the bottom of the sidebar when a user is available.
+By default it calls:
+
+- `client.getCurrentUser()` -> `GET /xladmin/me/`
+- `client.logout()` -> `POST /xladmin/logout/`
+
+After logout, `Shell` redirects to `/login`.
+
+```tsx
+<Shell
+  client={client}
+  models={models}
+  blocks={blocks}
+  basePath="/admin"
+  loginPath="/login"
+>
+  {content}
+</Shell>
+```
+
+If your application already has the user or a custom logout flow, pass them explicitly:
+
+```tsx
+<Shell
+  client={client}
+  models={models}
+  blocks={blocks}
+  basePath="/admin"
+  currentUser={{login: auth.user.email}}
+  onLogout={async () => {
+    await auth.logout();
+  }}
+  loginPath="/sign-in"
+>
+  {content}
+</Shell>
+```
+
+Set `currentUser={null}` to hide the sidebar user panel.
+
 ## Development
 
 ```bash

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import type { AdminChoicesResponse, AdminDeletePreviewResponse, AdminDetailResponse, AdminListResponse, AdminModelMeta, AdminModelsResponse, AdminObjectActionResponse } from './types';
+import type { AdminChoicesResponse, AdminDeletePreviewResponse, AdminDetailResponse, AdminCurrentUser, AdminListResponse, AdminModelMeta, AdminModelsResponse, AdminObjectActionResponse } from './types';
 export type AdminRequestOptions = {
     signal?: AbortSignal;
 };
@@ -11,6 +11,8 @@ export type AdminSelectionOptions = {
     selectionScope?: AdminSelectionScope;
 };
 export type AdminClient = {
+    getCurrentUser: () => Promise<AdminCurrentUser>;
+    logout: () => Promise<void>;
     getModels: () => Promise<AdminModelsResponse>;
     getModel: (slug: string) => Promise<AdminModelMeta>;
     getItems: (slug: string, params?: {

package/dist/components/Shell.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { type Theme } from '@mui/material/styles';
 import type { AdminClient } from '../client';
 import type { AdminRouter } from '../router';
-import type { AdminModelMeta, AdminModelsBlockMeta } from '../types';
+import type { AdminCurrentUser, AdminModelMeta, AdminModelsBlockMeta } from '../types';
 type AdminShellProps = {
     client: AdminClient;
     models: AdminModelMeta[];
@@ -12,7 +12,10 @@ type AdminShellProps = {
     children: ReactNode;
     theme?: Theme;
     router?: AdminRouter;
+    currentUser?: AdminCurrentUser | string | null;
+    loginPath?: string | null;
+    onLogout?: () => void | Promise<void>;
 };
 export type ShellProps = AdminShellProps;
-export declare function Shell({ client, models, blocks, basePath, locale, children, theme, router }: ShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function Shell({ client, models, blocks, basePath, locale, children, theme, router, currentUser, loginPath, onLogout, }: ShellProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/layout/Sidebar.d.ts

@@ -1,8 +1,11 @@
-import type { AdminModelMeta, AdminModelsBlockMeta } from '@xladmin-core/types';
+import type { AdminCurrentUser, AdminModelMeta, AdminModelsBlockMeta } from '@xladmin-core/types';
 type SidebarProps = {
     models: AdminModelMeta[];
     blocks: AdminModelsBlockMeta[];
     basePath: string;
+    currentUser?: AdminCurrentUser | null;
+    isLoggingOut?: boolean;
+    onLogout?: () => void;
 };
 export declare const Sidebar: import("react").NamedExoticComponent<SidebarProps>;
 export {};

package/dist/index.js

@@ -1,6 +1,12 @@
 // src/client.ts
 function createAdminClient(transport) {
   return {
+    async getCurrentUser() {
+      return await transportGet(transport, "/xladmin/me/");
+    },
+    async logout() {
+      await transportPost(transport, "/xladmin/logout/", {});
+    },
     async getModels() {
       return await transportGet(transport, "/xladmin/models/");
     },
@@ -148,7 +154,14 @@ function isWrappedTransportResponse(response) {
 }
 async function requestJson(fetchImpl, config, method, url, body, params, signal) {
   const response = await requestRaw(fetchImpl, config, method, url, body, params, signal);
-  return await response.json();
+  if (response.status === 204) {
+    return void 0;
+  }
+  const text = await response.text();
+  if (!text.trim()) {
+    return void 0;
+  }
+  return JSON.parse(text);
 }
 async function requestRaw(fetchImpl, config, method, url, body, params, signal) {
   var _a;
@@ -876,9 +889,13 @@ var FieldEditor = memo(function FieldEditor2({
             size: "small",
             required: field.required,
             sx: buildRequiredLabelSx(),
-            placeholder: (_a = field.placeholder) != null ? _a : void 0,
-            helperText: (_b = field.help_text) != null ? _b : void 0,
-            slotProps: { htmlInput: buildHtmlInputProps(field) }
+            helperText: (_a = field.help_text) != null ? _a : void 0,
+            slotProps: {
+              htmlInput: {
+                ...buildHtmlInputProps(field),
+                placeholder: (_b = field.placeholder) != null ? _b : void 0
+              }
+            }
           }
         }
       }
@@ -910,9 +927,13 @@ var FieldEditor = memo(function FieldEditor2({
             size: "small",
             required: field.required,
             sx: buildRequiredLabelSx(),
-            placeholder: (_c = field.placeholder) != null ? _c : void 0,
-            helperText: (_d = field.help_text) != null ? _d : void 0,
-            slotProps: { htmlInput: buildHtmlInputProps(field) }
+            helperText: (_c = field.help_text) != null ? _c : void 0,
+            slotProps: {
+              htmlInput: {
+                ...buildHtmlInputProps(field),
+                placeholder: (_d = field.placeholder) != null ? _d : void 0
+              }
+            }
           }
         }
       }
@@ -1044,8 +1065,8 @@ function renderChoiceEditor({
           listbox: { sx: { maxHeight: 240 } }
         },
         renderInput: (params) => (() => {
-          var _a2, _b;
-          const { InputProps, inputProps, ...textFieldParams } = params;
+          var _a2, _b, _c;
+          const { slotProps, ...textFieldParams } = params;
           return /* @__PURE__ */ jsx3(
             TextField,
             {
@@ -1056,15 +1077,16 @@ function renderChoiceEditor({
               placeholder: (_a2 = field.placeholder) != null ? _a2 : searchPlaceholder,
               helperText: (_b = field.help_text) != null ? _b : void 0,
               slotProps: {
+                inputLabel: slotProps.inputLabel,
                 input: {
-                  ...InputProps,
+                  ...slotProps.input,
                   endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
                     isLoadingChoices ? /* @__PURE__ */ jsx3(CircularProgress, { color: "inherit", size: 16 }) : null,
-                    InputProps.endAdornment
+                    (_c = slotProps.input) == null ? void 0 : _c.endAdornment
                   ] })
                 },
                 htmlInput: {
-                  ...inputProps,
+                  ...slotProps.htmlInput,
                   autoComplete: "new-password",
                   name: `admin-choice-${field.name}`
                 }
@@ -1104,8 +1126,8 @@ function renderChoiceEditor({
         listbox: { sx: { maxHeight: 240 } }
       },
       renderInput: (params) => (() => {
-        var _a2, _b;
-        const { InputProps, inputProps, ...textFieldParams } = params;
+        var _a2, _b, _c;
+        const { slotProps, ...textFieldParams } = params;
         return /* @__PURE__ */ jsx3(
           TextField,
           {
@@ -1116,15 +1138,16 @@ function renderChoiceEditor({
             placeholder: (_a2 = field.placeholder) != null ? _a2 : searchPlaceholder,
             helperText: (_b = field.help_text) != null ? _b : void 0,
             slotProps: {
+              inputLabel: slotProps.inputLabel,
               input: {
-                ...InputProps,
+                ...slotProps.input,
                 endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
                   isLoadingChoices ? /* @__PURE__ */ jsx3(CircularProgress, { color: "inherit", size: 16 }) : null,
-                  InputProps.endAdornment
+                  (_c = slotProps.input) == null ? void 0 : _c.endAdornment
                 ] })
               },
               htmlInput: {
-                ...inputProps,
+                ...slotProps.htmlInput,
                 autoComplete: "new-password",
                 name: `admin-choice-${field.name}`
               }
@@ -1294,8 +1317,8 @@ function stringifyJsonValue(value) {
 
 // src/components/layout/AdminMessageContext.tsx
 import { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
+import ErrorOutlinedIcon from "@mui/icons-material/ErrorOutlined";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { Box, Paper, Portal, Stack, Typography } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
@@ -1435,7 +1458,7 @@ function AdminMessageBubble({
           }
         }
       },
-      children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1.125, alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs2(Stack, { direction: "row", spacing: 1.125, sx: { alignItems: "center" }, children: [
         /* @__PURE__ */ jsx4(
           Box,
           {
@@ -1477,7 +1500,7 @@ function AdminMessageBubble({
 function getBubbleAppearance(theme, kind) {
   if (kind === "success") {
     return {
-      icon: CheckCircleOutlineIcon,
+      icon: CheckCircleOutlinedIcon,
       backgroundColor: alpha(theme.palette.success.main, 0.6),
       iconColor: theme.palette.common.white,
       iconBackgroundColor: alpha(theme.palette.common.white, 0.14),
@@ -1486,7 +1509,7 @@ function getBubbleAppearance(theme, kind) {
   }
   if (kind === "error") {
     return {
-      icon: ErrorOutlineIcon,
+      icon: ErrorOutlinedIcon,
       backgroundColor: alpha(theme.palette.error.main, 0.6),
       iconColor: theme.palette.common.white,
       iconBackgroundColor: alpha(theme.palette.common.white, 0.14),
@@ -2150,84 +2173,64 @@ function MainHeader({ title, subtitle, details, error, beforeTitle, beforeSubtit
       },
       children: [
         /* @__PURE__ */ jsxs7(Stack5, { spacing: 0.5, children: [
-          /* @__PURE__ */ jsxs7(
-            Stack5,
-            {
-              direction: "row",
-              spacing: 1.5,
-              alignItems: "center",
-              justifyContent: "space-between",
-              sx: { minWidth: 0 },
-              children: [
-                /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
-                  isMobile ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
-                    IconButton,
-                    {
-                      "aria-label": t("menu"),
-                      onClick: openMobileSidebar,
-                      size: "small",
-                      sx: { ml: -0.5 },
-                      children: /* @__PURE__ */ jsx13(MenuIcon, { fontSize: "small" })
-                    }
-                  ) }) : null,
-                  beforeTitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeTitle }) : null,
-                  /* @__PURE__ */ jsx13(
-                    Typography3,
-                    {
-                      variant: "h5",
-                      sx: {
-                        fontWeight: 600,
-                        lineHeight: "2.125rem",
-                        minWidth: 0
-                      },
-                      children: title
-                    }
-                  )
-                ] }),
-                actions ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: actions }) : null
-              ]
-            }
-          ),
-          subtitle && !details ? /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, alignItems: "center", sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1.5, sx: { minWidth: 0, alignItems: "center", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1, sx: { minWidth: 0, flex: 1, alignItems: "center" }, children: [
+              isMobile ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
+                IconButton,
+                {
+                  "aria-label": t("menu"),
+                  onClick: openMobileSidebar,
+                  size: "small",
+                  sx: { ml: -0.5 },
+                  children: /* @__PURE__ */ jsx13(MenuIcon, { fontSize: "small" })
+                }
+              ) }) : null,
+              beforeTitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeTitle }) : null,
+              /* @__PURE__ */ jsx13(
+                Typography3,
+                {
+                  variant: "h5",
+                  sx: {
+                    fontWeight: 600,
+                    lineHeight: "2.125rem",
+                    minWidth: 0
+                  },
+                  children: title
+                }
+              )
+            ] }),
+            actions ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: actions }) : null
+          ] }),
+          subtitle && !details ? /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, sx: { minWidth: 0, alignItems: "center" }, children: [
             beforeSubtitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
             /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
           ] }) : null,
           details ? /* @__PURE__ */ jsxs7(Stack5, { spacing: 0.5, children: [
-            /* @__PURE__ */ jsxs7(
-              Stack5,
-              {
-                direction: "row",
-                spacing: 0.5,
-                alignItems: "center",
-                justifyContent: "space-between",
-                sx: { minWidth: 0 },
-                children: [
-                  /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, alignItems: "center", sx: { minWidth: 0, flex: 1 }, children: [
-                    beforeSubtitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
-                    /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
-                  ] }),
-                  /* @__PURE__ */ jsx13(
-                    IconButton,
+            /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, sx: { minWidth: 0, alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 0.5, sx: { minWidth: 0, flex: 1, alignItems: "center" }, children: [
+                beforeSubtitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeSubtitle }) : null,
+                /* @__PURE__ */ jsx13(Typography3, { color: "text.secondary", sx: { lineHeight: "1rem", minWidth: 0 }, children: subtitle })
+              ] }),
+              /* @__PURE__ */ jsx13(
+                IconButton,
+                {
+                  "aria-label": isDetailsOpen ? t("hide_details") : t("show_details"),
+                  onClick: () => setIsDetailsOpen((current) => !current),
+                  size: "small",
+                  sx: { mr: -0.5 },
+                  children: /* @__PURE__ */ jsx13(
+                    ExpandMoreIcon3,
                     {
-                      "aria-label": isDetailsOpen ? t("hide_details") : t("show_details"),
-                      onClick: () => setIsDetailsOpen((current) => !current),
-                      size: "small",
-                      sx: { mr: -0.5 },
-                      children: /* @__PURE__ */ jsx13(
-                        ExpandMoreIcon3,
-                        {
-                          fontSize: "small",
-                          sx: {
-                            transform: isDetailsOpen ? "rotate(180deg)" : "rotate(0deg)",
-                            transition: "transform 0.2s ease"
-                          }
-                        }
-                      )
+                      fontSize: "small",
+                      sx: {
+                        transform: isDetailsOpen ? "rotate(180deg)" : "rotate(0deg)",
+                        transition: "transform 0.2s ease"
+                      }
                     }
                   )
-                ]
-              }
-            ),
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx13(Collapse, { in: isDetailsOpen, children: /* @__PURE__ */ jsx13(Box5, { sx: { pt: 0.5 }, children: details }) })
           ] }) : null
         ] }),
@@ -2638,7 +2641,7 @@ function DeletePreviewDialog({
       children: [
         /* @__PURE__ */ jsx16(DialogTitle3, { children: title }),
         /* @__PURE__ */ jsxs10(DialogContent3, { dividers: true, children: [
-          isLoading ? /* @__PURE__ */ jsxs10(Stack7, { spacing: 1.5, alignItems: "center", justifyContent: "center", sx: { minHeight: 180 }, children: [
+          isLoading ? /* @__PURE__ */ jsxs10(Stack7, { spacing: 1.5, sx: { minHeight: 180, alignItems: "center", justifyContent: "center" }, children: [
             /* @__PURE__ */ jsx16(CircularProgress2, { size: 28, thickness: 4.2, color: "inherit" }),
             /* @__PURE__ */ jsx16(Typography4, { color: "text.secondary", children: t("delete_preview_loading") })
           ] }) : null,
@@ -2796,7 +2799,7 @@ var ListFiltersSidebar = memo3(function ListFiltersSidebar2({
         overflow: "auto"
       },
       children: /* @__PURE__ */ jsxs11(Stack8, { spacing: 1.5, children: [
-        /* @__PURE__ */ jsxs11(Stack8, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxs11(Stack8, { direction: "row", spacing: 1, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
           /* @__PURE__ */ jsxs11(Stack8, { spacing: 0.25, children: [
             /* @__PURE__ */ jsx17(Typography5, { sx: { fontSize: 15, fontWeight: 700 }, children: t("filters") }),
             activeFiltersCount > 0 ? /* @__PURE__ */ jsx17(Typography5, { color: "text.secondary", sx: { fontSize: 12 }, children: t("active_filters", { count: activeFiltersCount }) }) : null
@@ -2949,8 +2952,8 @@ function ListFilterField({ client, slug, filter, value, onChange, debounceMs })
         },
         onInputChange: (_, nextInputValue) => setSearchValue(nextInputValue),
         renderInput: (params) => (() => {
-          var _a2;
-          const { InputProps, inputProps, ...textFieldParams } = params;
+          var _a2, _b2;
+          const { slotProps, ...textFieldParams } = params;
           return /* @__PURE__ */ jsx17(
             TextField2,
             {
@@ -2958,14 +2961,15 @@ function ListFilterField({ client, slug, filter, value, onChange, debounceMs })
               label: filter.label,
               placeholder: (_a2 = filter.placeholder) != null ? _a2 : t("search"),
               slotProps: {
+                inputLabel: slotProps.inputLabel,
                 input: {
-                  ...InputProps,
+                  ...slotProps.input,
                   endAdornment: /* @__PURE__ */ jsxs11(Fragment2, { children: [
                     isLoadingChoices ? /* @__PURE__ */ jsx17(CircularProgress3, { color: "inherit", size: 16 }) : null,
-                    InputProps.endAdornment
+                    (_b2 = slotProps.input) == null ? void 0 : _b2.endAdornment
                   ] })
                 },
-                htmlInput: inputProps
+                htmlInput: slotProps.htmlInput
               }
             }
           );
@@ -3866,7 +3870,7 @@ import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function ModelPageSkeleton() {
   return /* @__PURE__ */ jsxs13(Stack9, { spacing: 1.5, sx: { height: "100%", minHeight: 0 }, children: [
     /* @__PURE__ */ jsx20(MainHeaderSkeleton, { titleWidth: 240, subtitleWidth: "38%" }),
-    /* @__PURE__ */ jsx20(Paper6, { sx: { p: 1.5, borderRadius: "10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs13(Stack9, { direction: { xs: "column", lg: "row" }, spacing: 1.5, alignItems: { lg: "center" }, children: [
+    /* @__PURE__ */ jsx20(Paper6, { sx: { p: 1.5, borderRadius: "10px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs13(Stack9, { direction: { xs: "column", lg: "row" }, spacing: 1.5, sx: { alignItems: { lg: "center" } }, children: [
       /* @__PURE__ */ jsx20(Skeleton3, { variant: "rounded", width: 360, height: 40 }),
       /* @__PURE__ */ jsx20(Skeleton3, { variant: "rounded", width: 128, height: 40 }),
       /* @__PURE__ */ jsx20(Box10, { sx: { flex: 1 } }),
@@ -3979,14 +3983,13 @@ function ModelPage({ client, basePath, slug, router, renderBeforePagination }) {
           borderRadius: "10px",
           flexShrink: 0
         },
-        children: /* @__PURE__ */ jsxs14(Stack10, { direction: { xs: "column", lg: "row" }, spacing: 1.5, alignItems: { lg: "center" }, children: [
+        children: /* @__PURE__ */ jsxs14(Stack10, { direction: { xs: "column", lg: "row" }, spacing: 1.5, sx: { alignItems: { lg: "center" } }, children: [
           /* @__PURE__ */ jsxs14(
             Stack10,
             {
               direction: { xs: "column", xl: "row" },
               spacing: 1.5,
-              alignItems: { xl: "center" },
-              sx: { flex: 1, minWidth: 0 },
+              sx: { flex: 1, minWidth: 0, alignItems: { xl: "center" } },
               children: [
                 /* @__PURE__ */ jsx21(
                   SearchField,
@@ -3997,7 +4000,7 @@ function ModelPage({ client, basePath, slug, router, renderBeforePagination }) {
                     placeholder: t("search")
                   }
                 ),
-                controller.hasSelection ? /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0, flexWrap: "wrap" }, children: [
+                controller.hasSelection ? /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, sx: { minWidth: 0, flexWrap: "wrap", alignItems: "center" }, children: [
                   /* @__PURE__ */ jsx21(
                     Button5,
                     {
@@ -4025,7 +4028,7 @@ function ModelPage({ client, basePath, slug, router, renderBeforePagination }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, alignItems: "center", sx: { marginLeft: "auto" }, children: [
+          /* @__PURE__ */ jsxs14(Stack10, { direction: "row", spacing: 1, sx: { marginLeft: "auto", alignItems: "center" }, children: [
             beforePagination ? /* @__PURE__ */ jsx21(Box11, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforePagination }) : null,
             isMobile && controller.hasListFilters ? /* @__PURE__ */ jsx21(Tooltip, { title: t("filters"), children: /* @__PURE__ */ jsx21(
               IconButton3,
@@ -5073,7 +5076,7 @@ function ObjectPage({ client, slug, id, router }) {
 }
 
 // src/components/Shell.tsx
-import { useEffect as useEffect14, useMemo as useMemo11, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo11, useState as useState13 } from "react";
 import { Box as Box17, CssBaseline, Drawer, GlobalStyles, Stack as Stack14, useMediaQuery as useMediaQuery4 } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 
@@ -5244,7 +5247,8 @@ function Main({ children }) {
 
 // src/components/layout/Sidebar.tsx
 import { memo as memo8, useEffect as useEffect13, useRef as useRef7 } from "react";
-import { Box as Box16, ListItemButton as ListItemButton3, Typography as Typography8 } from "@mui/material";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { Box as Box16, IconButton as IconButton5, ListItemButton as ListItemButton3, Tooltip as Tooltip2, Typography as Typography8 } from "@mui/material";
 import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function getOffsetTopWithinContainer(element, container) {
   let offsetTop = element.offsetTop;
@@ -5255,7 +5259,14 @@ function getOffsetTopWithinContainer(element, container) {
   }
   return offsetTop;
 }
-var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
+var Sidebar = memo8(function Sidebar2({
+  models,
+  blocks,
+  basePath,
+  currentUser,
+  isLoggingOut = false,
+  onLogout
+}) {
   var _a;
   const t = useAdminTranslation();
   const { pathname } = useAdminLocation();
@@ -5338,59 +5349,123 @@ var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
       }
     };
   }, [activeModelSlug, blocks]);
-  return /* @__PURE__ */ jsx27(Box16, { sx: { height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs19(Box16, { sx: { height: "100%", overflow: "hidden", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx27(
+      Box16,
+      {
+        ref: scrollContainerRef,
+        sx: {
+          flex: 1,
+          minHeight: 0,
+          overflowY: "scroll",
+          overflowX: "hidden",
+          scrollbarGutter: "stable",
+          direction: "rtl",
+          ml: 0,
+          pl: 0
+        },
+        children: /* @__PURE__ */ jsxs19(Box16, { sx: { direction: "ltr", pl: 1 }, children: [
+          /* @__PURE__ */ jsx27(
+            NavLink,
+            {
+              href: basePath,
+              style: { textDecoration: "none", display: "block" },
+              onClick: () => startPendingNavigation(basePath, "overview"),
+              children: /* @__PURE__ */ jsx27(
+                ListItemButton3,
+                {
+                  selected: isOverviewActive,
+                  sx: {
+                    mb: 2,
+                    borderRadius: "8px",
+                    backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.18)" : "rgba(255, 255, 255, 0.035)",
+                    boxShadow: isOverviewActive ? "inset 0 0 0 1px rgba(255, 255, 255, 0.08)" : "none",
+                    "&:hover": {
+                      backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.055)"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx27(Typography8, { variant: "subtitle1", sx: { fontWeight: 700 }, children: t("overview") })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            ModelsBlocks,
+            {
+              models,
+              blocks,
+              basePath,
+              variant: "sidebar",
+              activeModelSlug,
+              onModelNavigate: (href) => startPendingNavigation(href, "model")
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx27(SidebarCurrentUser, { currentUser, isLoggingOut, onLogout })
+  ] });
+});
+function SidebarCurrentUser({ currentUser, isLoggingOut, onLogout }) {
+  if (!currentUser) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs19(
     Box16,
     {
-      ref: scrollContainerRef,
       sx: {
-        height: "100%",
-        overflowY: "scroll",
-        overflowX: "hidden",
-        scrollbarGutter: "stable",
-        direction: "rtl",
-        ml: 0,
-        pl: 0
+        flexShrink: 0,
+        ml: 1,
+        mt: 1.25,
+        borderRadius: "8px",
+        backgroundColor: "rgba(255, 255, 255, 0.02)",
+        boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.03)",
+        display: "flex",
+        alignItems: "center",
+        minHeight: 44,
+        px: 1,
+        gap: 1
       },
-      children: /* @__PURE__ */ jsxs19(Box16, { sx: { direction: "ltr", pl: 1 }, children: [
+      children: [
         /* @__PURE__ */ jsx27(
-          NavLink,
+          Typography8,
           {
-            href: basePath,
-            style: { textDecoration: "none", display: "block" },
-            onClick: () => startPendingNavigation(basePath, "overview"),
-            children: /* @__PURE__ */ jsx27(
-              ListItemButton3,
-              {
-                selected: isOverviewActive,
-                sx: {
-                  mb: 2,
-                  borderRadius: "8px",
-                  backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.18)" : "rgba(255, 255, 255, 0.035)",
-                  boxShadow: isOverviewActive ? "inset 0 0 0 1px rgba(255, 255, 255, 0.08)" : "none",
-                  "&:hover": {
-                    backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.055)"
-                  }
-                },
-                children: /* @__PURE__ */ jsx27(Typography8, { variant: "subtitle1", sx: { fontWeight: 700 }, children: t("overview") })
-              }
-            )
+            title: currentUser.login,
+            sx: {
+              flex: 1,
+              minWidth: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontSize: 13,
+              fontWeight: 650
+            },
+            children: currentUser.login
           }
         ),
-        /* @__PURE__ */ jsx27(
-          ModelsBlocks,
+        onLogout ? /* @__PURE__ */ jsx27(Tooltip2, { title: "Logout", children: /* @__PURE__ */ jsx27("span", { children: /* @__PURE__ */ jsx27(
+          IconButton5,
           {
-            models,
-            blocks,
-            basePath,
-            variant: "sidebar",
-            activeModelSlug,
-            onModelNavigate: (href) => startPendingNavigation(href, "model")
+            "aria-label": "Logout",
+            size: "small",
+            disabled: isLoggingOut,
+            onClick: onLogout,
+            sx: {
+              width: 32,
+              height: 32,
+              color: "text.secondary",
+              "&:hover": {
+                backgroundColor: "rgba(255, 255, 255, 0.08)",
+                color: "text.primary"
+              }
+            },
+            children: /* @__PURE__ */ jsx27(LogoutIcon, { sx: { fontSize: 18 } })
           }
-        )
-      ] })
+        ) }) }) : null
+      ]
     }
-  ) });
-});
+  );
+}
 
 // src/components/Shell.tsx
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -5398,8 +5473,19 @@ function normalizeAdminPath(path) {
   const normalizedPath = path.endsWith("/") && path !== "/" ? path.slice(0, -1) : path;
   return normalizedPath.replace(/^\/(ru|en)(?=\/|$)/, "") || "/";
 }
-function Shell({ client, models, blocks, basePath, locale, children, theme, router }) {
-  void client;
+function Shell({
+  client,
+  models,
+  blocks,
+  basePath,
+  locale,
+  children,
+  theme,
+  router,
+  currentUser,
+  loginPath = "/login",
+  onLogout
+}) {
   const activeTheme = theme != null ? theme : defaultAdminTheme;
   const resolvedRouter = useAdminRouter(router);
   const location = useAdminLocation(resolvedRouter);
@@ -5408,6 +5494,12 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState13(false);
   const [pendingPath, setPendingPath] = useState13(null);
   const [pendingView, setPendingView] = useState13(null);
+  const [loadedCurrentUser, setLoadedCurrentUser] = useState13(null);
+  const [isLoggingOut, setIsLoggingOut] = useState13(false);
+  const sidebarCurrentUser = useMemo11(
+    () => normalizeCurrentUser(currentUser === void 0 ? loadedCurrentUser : currentUser),
+    [currentUser, loadedCurrentUser]
+  );
   useEffect14(() => {
     if (isDesktopSidebar) {
       setIsMobileSidebarOpen(false);
@@ -5416,6 +5508,40 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
   useEffect14(() => {
     setIsMobileSidebarOpen(false);
   }, [pathname]);
+  useEffect14(() => {
+    if (currentUser !== void 0) {
+      return;
+    }
+    let isMounted = true;
+    client.getCurrentUser().then((response) => {
+      if (!isMounted) return;
+      setLoadedCurrentUser(response);
+    }).catch(() => {
+      if (!isMounted) return;
+      setLoadedCurrentUser(null);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [client, currentUser]);
+  const handleLogout = useCallback8(async () => {
+    if (isLoggingOut) {
+      return;
+    }
+    setIsLoggingOut(true);
+    try {
+      if (onLogout) {
+        await onLogout();
+      } else {
+        await client.logout();
+      }
+      if (loginPath) {
+        resolvedRouter.replace(loginPath);
+      }
+    } finally {
+      setIsLoggingOut(false);
+    }
+  }, [client, isLoggingOut, loginPath, onLogout, resolvedRouter]);
   const shellContextValue = useMemo11(() => ({
     isMobile: !isDesktopSidebar,
     openMobileSidebar: () => setIsMobileSidebarOpen(true),
@@ -5510,7 +5636,17 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
                     pl: 0,
                     pr: 1
                   },
-                  children: /* @__PURE__ */ jsx28(Sidebar, { models, blocks, basePath })
+                  children: /* @__PURE__ */ jsx28(
+                    Sidebar,
+                    {
+                      models,
+                      blocks,
+                      basePath,
+                      currentUser: sidebarCurrentUser,
+                      isLoggingOut,
+                      onLogout: handleLogout
+                    }
+                  )
                 }
               ),
               /* @__PURE__ */ jsx28(
@@ -5554,11 +5690,31 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
             }
           }
         },
-        children: /* @__PURE__ */ jsx28(Box17, { sx: { height: "100%", minHeight: 0, pr: 1.5 }, children: /* @__PURE__ */ jsx28(Sidebar, { models, blocks, basePath }) })
+        children: /* @__PURE__ */ jsx28(Box17, { sx: { height: "100%", minHeight: 0, pr: 1.5 }, children: /* @__PURE__ */ jsx28(
+          Sidebar,
+          {
+            models,
+            blocks,
+            basePath,
+            currentUser: sidebarCurrentUser,
+            isLoggingOut,
+            onLogout: handleLogout
+          }
+        ) })
       }
     )
   ] }) }) }) }) }) });
 }
+function normalizeCurrentUser(user) {
+  if (typeof user === "string") {
+    const login = user.trim();
+    return login ? { login } : null;
+  }
+  if (!user || !user.login.trim()) {
+    return null;
+  }
+  return user;
+}
 export {
   AdminLocaleProvider,
   AdminRouterProvider,

package/dist/types/index.d.ts

@@ -135,6 +135,12 @@ export type AdminModelsResponse = {
     items: AdminModelMeta[];
     blocks: AdminModelsBlockMeta[];
 };
+export type AdminCurrentUser = {
+    id?: string | number | null;
+    login: string;
+    email?: string | null;
+    name?: string | null;
+};
 export type AdminChoicesResponse = {
     items: Array<{
         id: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xladmin",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Framework-agnostic React + MUI admin frontend for xladmin.",
   "license": "MIT",
   "type": "module",
@@ -38,9 +38,9 @@
   "peerDependencies": {
     "@emotion/react": ">=11.14.0 <12.0.0",
     "@emotion/styled": ">=11.14.0 <12.0.0",
-    "@mui/icons-material": ">=7.0.0 <8.0.0",
-    "@mui/material": ">=7.0.0 <8.0.0",
-    "@mui/x-date-pickers": ">=8.0.0 <9.0.0",
+    "@mui/icons-material": ">=9.0.0 <10.0.0",
+    "@mui/material": ">=9.0.0 <10.0.0",
+    "@mui/x-date-pickers": ">=9.0.0 <10.0.0",
     "axios": ">=1.0.0 <2.0.0",
     "dayjs": ">=1.11.0 <2.0.0",
     "react": ">=19.0.0 <20.0.0",