@micha.bigler/ui-core-micha 3.5.1 → 3.7.0

package/dist/messaging/MessageBubble.js

@@ -8,6 +8,7 @@ import { AttachmentList } from './AttachmentList';
 import { extractApiErrorMessage, useOptionalMessaging } from './MessagingProvider';
 import { ReactionBar } from './ReactionBar';
 import { PollCard } from './PollCard';
+import { linkifyText } from './linkifyText';
 export const MESSAGE_BUBBLE_ROOT_SX = {
     position: 'relative',
     p: 1.25,
@@ -155,5 +156,5 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
                         bgcolor: isOwn ? (theme) => alpha(theme.palette.primary.light, 0.24) : 'background.paper',
                         borderColor: isOwn ? (theme) => alpha(theme.palette.primary.main, 0.35) : 'divider',
                     },
-                ], children: [canOpenMenu && _jsx(IconButton, { className: "message-actions", size: "small", "aria-label": t('MessagingActions.MENU'), onClick: openMenu, sx: MESSAGE_BUBBLE_ACTION_SX, children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsxs(Stack, { spacing: 0.75, children: [replyTo && _jsx(ButtonBase, { type: "button", onClick: () => onJumpToMessage === null || onJumpToMessage === void 0 ? void 0 : onJumpToMessage(replyTo.id), sx: { display: 'block', width: '100%', px: 0.75, py: 0.5, textAlign: 'left', borderLeft: 3, borderColor: 'primary.main', bgcolor: 'action.hover', borderRadius: 0.5 }, children: _jsxs(Stack, { spacing: 0, alignItems: "flex-start", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: quoteLabel(replyTo, t) })] }) }), (conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct' && _jsx(Typography, { variant: "subtitle2", children: senderName(message) || t('MessagingThread.UNKNOWN_SENDER') }), !deleted && message.kind === 'announcement' && message.title && _jsx(Typography, { variant: "subtitle1", fontWeight: 700, children: message.title }), !deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && _jsx(Button, { type: "button", size: "small", onClick: () => onAnnouncementLink(message.link_target), children: t('MessagingAnnouncement.OPEN_LINK') }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), editing ? _jsxs(Stack, { spacing: 0.75, children: [_jsx(TextField, { label: t('MessagingActions.EDIT'), value: draft, onChange: (event) => setDraft(event.target.value), multiline: true, minRows: 2, autoFocus: true, disabled: saving }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "button", onClick: saveEdit, disabled: saving, children: t('MessagingActions.SAVE') }), _jsx(Button, { type: "button", onClick: () => setEditing(false), disabled: saving, children: t('MessagingActions.CANCEL') })] })] }) : _jsx(Typography, { sx: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || '' }), !deleted && _jsxs(Stack, { spacing: 0.75, children: [attachments.length > 0 && _jsx(AttachmentList, { attachments: attachments }), message.poll && _jsx(PollCard, { message: message })] }), hasMeta && _jsxs(Stack, { "data-testid": "message-meta", direction: "row", spacing: 0.5, justifyContent: "flex-end", alignItems: "center", flexWrap: "wrap", sx: { color: 'text.disabled', minWidth: 0, '& .MuiSvgIcon-root': { fontSize: '1rem' } }, children: [message.created_at && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", sx: { whiteSpace: 'nowrap' }, children: new Date(message.created_at).toLocaleTimeString(i18n === null || i18n === void 0 ? void 0 : i18n.language, { hour: '2-digit', minute: '2-digit' }) }), message.edited_at && !deleted && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", children: t('MessagingThread.EDITED') }), children] })] })] }), !deleted && (reactions.length > 0 || reactionPickerVisible) && _jsx(ReactionBar, { message: message, expanded: reactionPickerVisible, onExpandedChange: setReactionPickerVisible, sx: { mt: 0.5, ml: 0.75 } }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: closeMenu, children: [_jsx(MenuItem, { onClick: startReply, children: t('MessagingThread.REPLY') }), _jsx(MenuItem, { onClick: startReact, children: t('MessagingReactions.ADD') }), canAct && _jsx(MenuItem, { onClick: startEdit, children: t('MessagingActions.EDIT') }), canAct && _jsx(MenuItem, { onClick: () => { setConfirmingDelete(true); closeMenu(); }, children: t('MessagingActions.DELETE') }), _jsx(MenuItem, { onClick: copyMessage, children: t('MessagingActions.COPY') })] }), _jsxs(Dialog, { open: confirmingDelete, onClose: () => !saving && setConfirmingDelete(false), children: [_jsx(DialogTitle, { children: t('MessagingActions.DELETE_CONFIRM_TITLE') }), _jsx(DialogContent, { children: t('MessagingActions.DELETE_CONFIRM_BODY') }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setConfirmingDelete(false), disabled: saving, children: t('MessagingActions.CANCEL') }), _jsx(Button, { onClick: confirmDelete, disabled: saving, color: "error", children: t('MessagingActions.DELETE') })] })] })] }));
+                ], children: [canOpenMenu && _jsx(IconButton, { className: "message-actions", size: "small", "aria-label": t('MessagingActions.MENU'), onClick: openMenu, sx: MESSAGE_BUBBLE_ACTION_SX, children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsxs(Stack, { spacing: 0.75, children: [replyTo && _jsx(ButtonBase, { type: "button", onClick: () => onJumpToMessage === null || onJumpToMessage === void 0 ? void 0 : onJumpToMessage(replyTo.id), sx: { display: 'block', width: '100%', px: 0.75, py: 0.5, textAlign: 'left', borderLeft: 3, borderColor: 'primary.main', bgcolor: 'action.hover', borderRadius: 0.5 }, children: _jsxs(Stack, { spacing: 0, alignItems: "flex-start", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') }) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: quoteLabel(replyTo, t) })] }) }), (conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct' && _jsx(Typography, { variant: "subtitle2", children: senderName(message) || t('MessagingThread.UNKNOWN_SENDER') }), !deleted && message.kind === 'announcement' && message.title && _jsx(Typography, { variant: "subtitle1", fontWeight: 700, children: message.title }), !deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && _jsx(Button, { type: "button", size: "small", onClick: () => onAnnouncementLink(message.link_target), children: t('MessagingAnnouncement.OPEN_LINK') }), error && _jsx(Alert, { severity: "error", role: "alert", children: error }), editing ? _jsxs(Stack, { spacing: 0.75, children: [_jsx(TextField, { label: t('MessagingActions.EDIT'), value: draft, onChange: (event) => setDraft(event.target.value), multiline: true, minRows: 2, autoFocus: true, disabled: saving }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "button", onClick: saveEdit, disabled: saving, children: t('MessagingActions.SAVE') }), _jsx(Button, { type: "button", onClick: () => setEditing(false), disabled: saving, children: t('MessagingActions.CANCEL') })] })] }) : _jsx(Typography, { sx: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: deleted ? t('MessagingThread.DELETED') : linkifyText((message.kind === 'announcement' ? message.body : (message.body || message.title)) || '') }), !deleted && _jsxs(Stack, { spacing: 0.75, children: [attachments.length > 0 && _jsx(AttachmentList, { attachments: attachments }), message.poll && _jsx(PollCard, { message: message })] }), hasMeta && _jsxs(Stack, { "data-testid": "message-meta", direction: "row", spacing: 0.5, justifyContent: "flex-end", alignItems: "center", flexWrap: "wrap", sx: { color: 'text.disabled', minWidth: 0, '& .MuiSvgIcon-root': { fontSize: '1rem' } }, children: [message.created_at && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", sx: { whiteSpace: 'nowrap' }, children: new Date(message.created_at).toLocaleTimeString(i18n === null || i18n === void 0 ? void 0 : i18n.language, { hour: '2-digit', minute: '2-digit' }) }), message.edited_at && !deleted && _jsx(Typography, { component: "span", variant: "caption", color: "inherit", children: t('MessagingThread.EDITED') }), children] })] })] }), !deleted && (reactions.length > 0 || reactionPickerVisible) && _jsx(ReactionBar, { message: message, expanded: reactionPickerVisible, onExpandedChange: setReactionPickerVisible, sx: { mt: 0.5, ml: 0.75 } }), _jsxs(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: closeMenu, children: [_jsx(MenuItem, { onClick: startReply, children: t('MessagingThread.REPLY') }), _jsx(MenuItem, { onClick: startReact, children: t('MessagingReactions.ADD') }), canAct && _jsx(MenuItem, { onClick: startEdit, children: t('MessagingActions.EDIT') }), canAct && _jsx(MenuItem, { onClick: () => { setConfirmingDelete(true); closeMenu(); }, children: t('MessagingActions.DELETE') }), _jsx(MenuItem, { onClick: copyMessage, children: t('MessagingActions.COPY') })] }), _jsxs(Dialog, { open: confirmingDelete, onClose: () => !saving && setConfirmingDelete(false), children: [_jsx(DialogTitle, { children: t('MessagingActions.DELETE_CONFIRM_TITLE') }), _jsx(DialogContent, { children: t('MessagingActions.DELETE_CONFIRM_BODY') }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setConfirmingDelete(false), disabled: saving, children: t('MessagingActions.CANCEL') }), _jsx(Button, { onClick: confirmDelete, disabled: saving, color: "error", children: t('MessagingActions.DELETE') })] })] })] }));
 }

package/dist/messaging/ReadTicks.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import DoneAllOutlinedIcon from '@mui/icons-material/DoneAllOutlined';
 import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
-import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
+import { ButtonBase, List, ListItem, Popover, Tooltip, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMessaging } from './MessagingProvider';
@@ -49,6 +49,8 @@ export function ReadTicks({ messageId, conversation }) {
     const hasCounts = typeof status.read_count === 'number' && typeof status.recipient_count === 'number';
     if (!hasCounts && (conversation === null || conversation === void 0 ? void 0 : conversation.kind) !== 'direct')
         return null;
+    if (hasCounts && status.recipient_count === 0)
+        return null;
     // The server never returns DM detail; enforce the same carve-out defensively.
     const detail = (conversation === null || conversation === void 0 ? void 0 : conversation.kind) === 'direct' ? null : recipientDetail;
     const recipients = (detail === null || detail === void 0 ? void 0 : detail.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean)) || [];
@@ -71,8 +73,8 @@ export function ReadTicks({ messageId, conversation }) {
         const label = t('MessagingReadTicks.READ_RATIO', { read: status.read_count, total: status.recipient_count });
         const ratio = _jsxs(Typography, { component: "span", variant: "caption", color: "inherit", children: [status.read_count, "/", status.recipient_count] });
         if (!recipients.length)
-            return _jsx("span", { role: "img", "aria-label": label, children: ratio });
-        return _jsxs(_Fragment, { children: [_jsx(ButtonBase, { "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": Boolean(anchorEl), onClick: (event) => setAnchorEl(event.currentTarget), sx: { display: 'inline-flex' }, children: ratio }), _jsx(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), children: _jsx(List, { "aria-label": t('MessagingReadTicks.RECIPIENTS'), children: recipients.map((recipient) => _jsx(ListItem, { children: recipient }, recipient)) }) })] });
+            return _jsx(Tooltip, { title: label, describeChild: true, children: _jsx("span", { role: "img", "aria-label": label, children: ratio }) });
+        return _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: label, describeChild: true, children: _jsx(ButtonBase, { "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": Boolean(anchorEl), onClick: (event) => setAnchorEl(event.currentTarget), sx: { display: 'inline-flex' }, children: ratio }) }), _jsx(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), children: _jsx(List, { "aria-label": t('MessagingReadTicks.RECIPIENTS'), children: recipients.map((recipient) => _jsx(ListItem, { children: recipient }, recipient)) }) })] });
     }
     const label = allRead ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.SENT');
     const StatusIcon = allRead ? DoneAllOutlinedIcon : DoneOutlinedIcon;

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/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/utils/auth-errors.js

@@ -17,7 +17,7 @@ export function extractErrorInfo(error) {
     }
     // Fallback for generic Django errors
     if (typeof data.detail === 'string') {
-        return { status, code: 'GENERIC', message: data.detail, raw: data };
+        return { status, code: null, message: data.detail, raw: data };
     }
     return { status, code: null, message: null, raw: data };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "3.5.1",
+  "version": "3.7.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>