@micha.bigler/ui-core-micha 3.6.0 → 3.8.0

package/dist/messaging/linkifyText.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Link } from '@mui/material';
+const HTTP_URL_PATTERN = /(https?:\/\/[^\s<>"']+)/g;
+function splitTrailingPunctuation(rawUrl) {
+    let url = rawUrl;
+    let trailing = '';
+    while (/[.,!?]$/.test(url)) {
+        trailing = `${url.slice(-1)}${trailing}`;
+        url = url.slice(0, -1);
+    }
+    const openingParentheses = (url.match(/\(/g) || []).length;
+    const closingParentheses = (url.match(/\)/g) || []).length;
+    if (closingParentheses > openingParentheses) {
+        trailing = `)${trailing}`;
+        url = url.slice(0, -1);
+    }
+    return { url, trailing };
+}
+export function linkifyText(text) {
+    var _a;
+    const value = String(text !== null && text !== void 0 ? text : '');
+    const parts = [];
+    let lastIndex = 0;
+    for (const match of value.matchAll(HTTP_URL_PATTERN)) {
+        const rawUrl = match[0];
+        const start = (_a = match.index) !== null && _a !== void 0 ? _a : 0;
+        if (start > lastIndex)
+            parts.push(value.slice(lastIndex, start));
+        const { url, trailing } = splitTrailingPunctuation(rawUrl);
+        parts.push(_jsx(Link, { href: url, target: "_blank", rel: "noopener noreferrer", children: url }, `url-${start}`));
+        if (trailing)
+            parts.push(trailing);
+        lastIndex = start + rawUrl.length;
+    }
+    if (lastIndex < value.length)
+        parts.push(value.slice(lastIndex));
+    return parts.length ? parts : [value];
+}

package/dist/pages/PasswordInvitePage.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // src/auth/pages/PasswordInvitePage.jsx
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { Typography } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { PasswordSetForm } from '../components/PasswordSetForm';
@@ -17,7 +17,9 @@ export function PasswordInvitePage() {
     const nextPath = searchParams.get('next');
     const [submitting, setSubmitting] = useState(false);
     const [errorKey, setErrorKey] = useState(null);
+    const [submitErrorKey, setSubmitErrorKey] = useState(null);
     const [successKey, setSuccessKey] = useState(null);
+    const [continueTarget, setContinueTarget] = useState(null);
     const [checked, setChecked] = useState(false);
     // Unterscheidung Invite-Link vs klassischer Reset
     const isInvite = location.pathname.startsWith('/invite/');
@@ -47,12 +49,12 @@ export function PasswordInvitePage() {
         check();
     }, [uid, token]);
     const handleSubmit = async (newPassword) => {
+        var _a, _b, _c;
         if (!uid || !token) {
-            setErrorKey('Auth.RESET_LINK_INVALID');
             return;
         }
         setSubmitting(true);
-        setErrorKey(null);
+        setSubmitErrorKey(null);
         setSuccessKey(null);
         try {
             await setNewPassword(uid, token, newPassword);
@@ -80,17 +82,30 @@ export function PasswordInvitePage() {
                         safeNextPath = parsed.pathname + parsed.search + parsed.hash;
                     }
                 }
-                catch (_a) {
+                catch (_d) {
                     // fall through to default redirect
                 }
             }
             const target = safeNextPath
                 ? `/login?next=${encodeURIComponent(safeNextPath)}`
                 : '/login';
-            navigate(target);
+            setContinueTarget(target);
         }
         catch (err) {
-            setErrorKey(err.code || 'Auth.RESET_PASSWORD_FAILED');
+            // Told apart by CODE, not by the presence of `messages` (a submission
+            // can fail with a link problem too, e.g. the token expires in the gap
+            // between the page's initial verifyResetToken check and this submit) —
+            // only a password rejection keeps the form; a link problem must still
+            // end in the same invalid-link state the initial check produces.
+            if (err.code === 'Auth.RESET_LINK_INVALID') {
+                setErrorKey(err.code);
+            }
+            else {
+                const responseMessages = ((_a = err.raw) === null || _a === void 0 ? void 0 : _a.messages) || ((_c = (_b = err.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.messages);
+                setSubmitErrorKey(Array.isArray(responseMessages) && responseMessages.length > 0
+                    ? responseMessages.join(' ')
+                    : t(err.code || 'Auth.RESET_PASSWORD_FAILED'));
+            }
         }
         finally {
             setSubmitting(false);
@@ -100,5 +115,5 @@ export function PasswordInvitePage() {
     if (!checked && !errorKey) {
         return (_jsx(NarrowPage, { title: t('Auth.PAGE_CHECKING_LINK_TITLE'), children: _jsx(Typography, { children: t('Auth.PAGE_CHECKING_LINK_TEXT') }) }));
     }
-    return (_jsxs(NarrowPage, { title: t(pageTitleKey), subtitle: t(pageSubtitleKey), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t(pageTitleKey)] }) }), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: t(errorKey) })), successKey && (_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) })), !successKey && !errorKey && (_jsx(PasswordSetForm, { onSubmit: handleSubmit, submitting: submitting }))] }));
+    return (_jsxs(NarrowPage, { title: t(pageTitleKey), subtitle: t(pageSubtitleKey), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t(pageTitleKey)] }) }), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: t(errorKey) })), successKey && (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) }), _jsx(Button, { variant: "contained", onClick: () => navigate(continueTarget), children: t('Auth.SIGNUP_GO_TO_LOGIN') })] })), submitErrorKey && !successKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: submitErrorKey })), !successKey && !errorKey && (_jsx(PasswordSetForm, { onSubmit: handleSubmit, submitting: submitting }))] }));
 }

package/dist/pages/SignUpPage.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Alert, Box, Button, Stack, TextField, Typography, } from '@mui/material';
@@ -117,7 +117,7 @@ export function SignUpPage() {
     const handleGoToLogin = () => {
         navigate('/login');
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: SIGN_UP_PAGE_ALERT_SX, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: SIGN_UP_PAGE_ALERT_SX, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || signupModes.length === 0 || (turnstileRequired && !turnstileToken), children: submitting
-                            ? t('Auth.SIGNUP_SUBMITTING')
-                            : t('Auth.SIGNUP_SUBMIT') })] }), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT'), ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN') })] }) })] }));
+    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), signupModes.length === 0 ? (_jsx(Alert, { severity: "info", sx: SIGN_UP_PAGE_ALERT_SX, children: t('Auth.SELF_SIGNUP_DISABLED', 'Self sign-up is currently disabled.') })) : (_jsxs(_Fragment, { children: [successKey && (_jsx(Alert, { severity: "success", sx: SIGN_UP_PAGE_ALERT_SX, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: SIGN_UP_PAGE_ALERT_SX, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || (turnstileRequired && !turnstileToken), children: submitting
+                                    ? t('Auth.SIGNUP_SUBMITTING')
+                                    : t('Auth.SIGNUP_SUBMIT') })] })] })), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT'), ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN') })] }) })] }));
 }

package/dist/theme/createAppTheme.js

@@ -1,6 +1,7 @@
 import './fonts';
 import { createTheme, darken, getContrastRatio } from '@mui/material/styles';
-import { BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS, BASELINE_PALETTE, BASELINE_STATIC, MOTION, } from './tokens';
+import { BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS, BASELINE_PALETTE, BASELINE_STATIC, MOTION, withMainShades, } from './tokens';
+import { calculateContrastRatio } from './themeCompleteness';
 function findFunction(value, path) {
     if (typeof value === 'function')
         return path;
@@ -40,6 +41,41 @@ function deriveFocusColour(primary, surfaces) {
     }
     return focus;
 }
+function clearsPageContrast(colour, surfaces, threshold) {
+    return surfaces.every((surface) => {
+        const ratio = calculateContrastRatio(colour, surface);
+        return Number.isFinite(ratio) && ratio >= threshold;
+    });
+}
+function deriveDarkenedPageColour(original, surfaces, threshold) {
+    if (clearsPageContrast(original, surfaces, threshold))
+        return original;
+    let colour = original;
+    for (let coefficient = 0.05; !clearsPageContrast(colour, surfaces, threshold); coefficient += 0.05) {
+        colour = darken(original, Math.min(coefficient, 0.9));
+        if (coefficient >= 0.9)
+            break;
+    }
+    return colour;
+}
+const RGBA_PATTERN = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d*\.?\d+)\s*\)$/;
+function deriveAlphaPageColour(original, surfaces, threshold) {
+    if (clearsPageContrast(original, surfaces, threshold))
+        return original;
+    const match = original.match(RGBA_PATTERN);
+    if (!match)
+        return original;
+    const [, red, green, blue, alphaText] = match;
+    let alpha = Number(alphaText);
+    let colour = original;
+    while (alpha < 1) {
+        alpha = Math.min(1, Number((alpha + 0.05).toFixed(2)));
+        colour = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+        if (clearsPageContrast(colour, surfaces, threshold))
+            return colour;
+    }
+    return colour;
+}
 function createPaletteAwareComponents(palette) {
     const stateTransition = `border-color ${MOTION.duration.fast}ms ${MOTION.easing.state}, color ${MOTION.duration.fast}ms ${MOTION.easing.state}, background-color ${MOTION.duration.fast}ms ${MOTION.easing.state}`;
     const autofill = {
@@ -151,21 +187,38 @@ function createPaletteAwareComponents(palette) {
  * objects are created, so runtime app/site overrides cannot leave stale values.
  */
 export function createAppTheme(appConfig = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     if (!((_a = appConfig === null || appConfig === void 0 ? void 0 : appConfig.palette) === null || _a === void 0 ? void 0 : _a.primary)) {
         throw new TypeError('createAppTheme: appConfig.palette.primary is required.');
     }
     validateStyleOverrides(appConfig.components);
     const paletteTheme = createTheme({ palette: appConfig.palette }, { palette: BASELINE_PALETTE }, { palette: appConfig.palette });
     const finalPalette = paletteTheme.palette;
-    const computedPalette = {
-        controlBorder: Object.assign(Object.assign({}, finalPalette.controlBorder), { focus: deriveFocusColour(finalPalette.primary.main, [
-                '#FFFFFF',
-                finalPalette.background.default,
-            ]) }),
-    };
+    const contrastSurfaces = ['#FFFFFF', finalPalette.background.default];
+    const derivedStatusEntries = {};
+    for (const status of ['success', 'warning', 'error', 'info']) {
+        if (((_c = (_b = appConfig.palette) === null || _b === void 0 ? void 0 : _b[status]) === null || _c === void 0 ? void 0 : _c.main) !== undefined)
+            continue;
+        const current = finalPalette[status];
+        const main = deriveDarkenedPageColour(current.main, contrastSurfaces, 4.5);
+        if (main !== current.main) {
+            derivedStatusEntries[status] = Object.assign(Object.assign({}, current), withMainShades(main, current.contrastText));
+        }
+    }
+    const derivedControlBorderEntries = {};
+    for (const state of ['main', 'hover', 'error']) {
+        if (((_e = (_d = appConfig.palette) === null || _d === void 0 ? void 0 : _d.controlBorder) === null || _e === void 0 ? void 0 : _e[state]) !== undefined)
+            continue;
+        const current = finalPalette.controlBorder[state];
+        const derived = state === 'error'
+            ? deriveDarkenedPageColour(current, contrastSurfaces, 3)
+            : deriveAlphaPageColour(current, contrastSurfaces, 3);
+        if (derived !== current)
+            derivedControlBorderEntries[state] = derived;
+    }
+    const computedPalette = Object.assign(Object.assign({}, derivedStatusEntries), { controlBorder: Object.assign(Object.assign(Object.assign({}, finalPalette.controlBorder), derivedControlBorderEntries), { focus: deriveFocusColour(finalPalette.primary.main, contrastSurfaces) }) });
     const resolvedPalette = Object.assign(Object.assign({}, finalPalette), computedPalette);
-    const fontFamily = ((_b = appConfig.typography) === null || _b === void 0 ? void 0 : _b.fontFamily) || BASELINE_STATIC.typography.fontFamily;
+    const fontFamily = ((_f = appConfig.typography) === null || _f === void 0 ? void 0 : _f.fontFamily) || BASELINE_STATIC.typography.fontFamily;
     return createTheme(Object.assign(Object.assign({}, BASELINE_STATIC), { typography: Object.assign(Object.assign({}, BASELINE_STATIC.typography), { fontFamily }), fontLoading: Object.assign(Object.assign({}, BASELINE_STATIC.fontLoading), { weights: [...BASELINE_STATIC.fontLoading.weights] }), palette: resolvedPalette, themeCompleteness: {
             baseline: true,
             exemptions: BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS.map((exemption) => (Object.assign({}, exemption))),

package/dist/theme/kitSxRegistry.js

@@ -20,7 +20,7 @@ import { CHART_FRAME_ALERT_SX, CHART_FRAME_ROOT_SX } from '../components/charts/
 import { PAGE_LAYOUT_CONTAINER_SX } from '../layout/PageLayout';
 import { SECTION_NAV_DRAWER_PAPER_SX, SECTION_NAV_GROUP_PAPER_SX, } from '../layout/SectionNav';
 import { ATTACHMENT_LIST_ALERT_SX, ATTACHMENT_LIST_LIGHTBOX_ACTION_SX, } from '../messaging/AttachmentList';
-import { COMPOSER_EMOJI_BUTTON_SX } from '../messaging/Composer';
+import { COMPOSER_EMOJI_BUTTON_SX, COMPOSER_MESSAGE_FIELD_SX, COMPOSER_SEND_BUTTON_SX, } from '../messaging/Composer';
 import { DIRECT_MESSAGE_LAUNCHER_ALERT_SX } from '../messaging/DirectMessageLauncher';
 import { MESSAGE_BUBBLE_ACTION_SX, MESSAGE_BUBBLE_ROOT_SX } from '../messaging/MessageBubble';
 import { POLL_CARD_CHECKBOX_SX, POLL_CARD_FORM_CONTROL_SX, POLL_CARD_ROOT_SX, } from '../messaging/PollCard';
@@ -51,6 +51,8 @@ const SX_EXPORTS = {
     CHART_FRAME_ALERT_SX,
     CHART_FRAME_ROOT_SX,
     COMPOSER_EMOJI_BUTTON_SX,
+    COMPOSER_MESSAGE_FIELD_SX,
+    COMPOSER_SEND_BUTTON_SX,
     DIRECT_MESSAGE_LAUNCHER_ALERT_SX,
     LOGIN_FORM_DIVIDER_SX,
     LOGIN_PAGE_ALERT_SX,
@@ -177,6 +179,8 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('AttachmentList.lightboxAction', 'MuiIconButton', ATTACHMENT_LIST_LIGHTBOX_ACTION_SX),
     entry('AttachmentList.alert', 'MuiAlert', ATTACHMENT_LIST_ALERT_SX),
     entry('Composer.emojiAction', 'MuiIconButton', COMPOSER_EMOJI_BUTTON_SX),
+    entry('Composer.messageField', 'MuiTextField', COMPOSER_MESSAGE_FIELD_SX),
+    entry('Composer.sendAction', 'MuiButton', COMPOSER_SEND_BUTTON_SX),
     entry('DirectMessageLauncher.alert', 'MuiAlert', DIRECT_MESSAGE_LAUNCHER_ALERT_SX),
     entry('MessageBubble.root', 'MuiPaper', MESSAGE_BUBBLE_ROOT_SX),
     entry('MessageBubble.action', 'MuiIconButton', MESSAGE_BUBBLE_ACTION_SX),

package/dist/theme/tokens.js

@@ -7,7 +7,7 @@ import { darken, lighten } from '@mui/material/styles';
 // though `text`/`fill`/`bg` are set correctly, so every status channel MUI
 // recognises (success/warning/error/info) must carry its own explicit
 // main/light/dark/contrastText, computed the same way augmentColor would.
-const withMainShades = (main, contrastText) => ({
+export const withMainShades = (main, contrastText) => ({
     main,
     light: lighten(main, 0.2),
     dark: darken(main, 0.3),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "sideEffects": [

package/src/auth/UserMenu.jsx

@@ -9,9 +9,11 @@ import {
   MenuItem,
   Typography,
 } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 import { AuthContext } from './AuthContext';
+import { calculateContrastRatio } from '../theme';
 
 function getInitials(user) {
   if (!user) return '';
@@ -30,8 +32,22 @@ function getDisplayName(user) {
 export function UserMenu({ resolveLink, items = [], profileLink = '/account', avatarSrc }) {
   const { t } = useTranslation();
   const { user, logout } = useContext(AuthContext);
+  const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const avatarBackground = theme.palette.primary.main;
+  // True white/black (theme.palette.common.*, always present on any MUI theme,
+  // never a source-level literal), not background.paper/ink.primary: contrast
+  // against true white and true black multiplies to a constant 21 regardless
+  // of the background's luminance, so max(contrastWhite, contrastBlack) is
+  // mathematically guaranteed to be >= sqrt(21) =~ 4.58 for ANY primary.main a
+  // consumer sets -- a near-black token like ink.primary (#212529, luminance
+  // ~0.018, not 0) does not carry that guarantee and left a real gap for a
+  // medium-luminance primary (caught by ui_reviewer, neither required test
+  // exercised the fallback branch that gap lived in).
+  const avatarText = calculateContrastRatio(theme.palette.common.white, avatarBackground) >= 4.5
+    ? theme.palette.common.white
+    : theme.palette.common.black;
 
   const handleClose = () => setAnchorEl(null);
 
@@ -57,7 +73,16 @@ export function UserMenu({ resolveLink, items = [], profileLink = '/account', av
         color="inherit"
         onClick={(event) => setAnchorEl(event.currentTarget)}
       >
-        <Avatar src={avatarSrc} sx={{ width: 32, height: 32, fontSize: '0.8rem' }}>
+        <Avatar
+          src={avatarSrc}
+          sx={{
+            width: 32,
+            height: 32,
+            fontSize: '0.8rem',
+            bgcolor: avatarBackground,
+            color: avatarText,
+          }}
+        >
           {avatarSrc ? null : getInitials(user)}
         </Avatar>
       </IconButton>

package/src/components/EmptyState.jsx

@@ -0,0 +1,38 @@
+import { Box, Button, Typography } from '@mui/material';
+import { cloneElement } from 'react';
+
+/**
+ * A shared, compact presentation for an empty section: optional decorative icon,
+ * title, supporting description, and an optional outlined action.
+ */
+export default function EmptyState({ icon, title, description, action, sx }) {
+  return (
+    <Box
+      sx={[{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 1,
+        p: 2,
+        textAlign: 'center',
+      }, sx]}
+    >
+      {icon && (
+        <Box sx={{ color: 'text.secondary', display: 'flex' }}>
+          {cloneElement(icon, { 'aria-hidden': true, focusable: false })}
+        </Box>
+      )}
+      <Typography component="p">{title}</Typography>
+      {description && (
+        <Typography component="p" variant="body2" color="text.secondary">
+          {description}
+        </Typography>
+      )}
+      {action && (
+        <Button type="button" variant="outlined" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      )}
+    </Box>
+  );
+}

package/src/components/UserListComponent.jsx

@@ -118,6 +118,7 @@ export function UserListComponent({
         await updateUserRole(userId, newRole);
       }
       await loadUsers();
+      alert(t('UserList.ROLE_UPDATE_SUCCESS', 'Role updated.'));
     } catch (err) {
       alert(t(err.code || 'Auth.USER_ROLE_UPDATE_FAILED'));
     }
@@ -588,6 +589,7 @@ export function UserListComponent({
               setPageSize(Number(event.target.value));
               setPage(0);
             }}
+            labelRowsPerPage={t('UserList.ROWS_PER_PAGE', 'Rows per page:')}
             rowsPerPageOptions={[10, 25, 50, 100]}
           />
         </Box>