@micha.bigler/ui-core-micha 2.33.1 → 2.34.0

package/src/components/charts/ChartFrame.jsx

@@ -11,6 +11,9 @@ import {
 import { useTranslation } from 'react-i18next';
 import { exportChartPng, exportChartSvg } from './exportChart';
 
+export const CHART_FRAME_ROOT_SX = { p: 2 };
+export const CHART_FRAME_ALERT_SX = { mt: 2 };
+
 /**
  * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
  */
@@ -44,6 +47,7 @@ export function ChartFrame({
   const hasMeta = meta !== undefined && meta !== null && meta !== false && meta !== '';
   const hasCustomAriaLabel = Boolean(ariaLabel);
   const chartLabel = ariaLabel || title;
+  const callerSx = Array.isArray(sx) ? sx : [sx];
 
   const runExport = async (type) => {
     setExportError(false);
@@ -69,7 +73,7 @@ export function ChartFrame({
   }
 
   return (
-    <Paper variant={variant} sx={{ p: 2, ...sx }}>
+    <Paper variant={variant} sx={[CHART_FRAME_ROOT_SX, ...callerSx]}>
       <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }}>
         <Box>
           <Typography id={titleId} variant={titleVariant}>{title}</Typography>
@@ -101,7 +105,7 @@ export function ChartFrame({
         {content}
       </Box>
 
-      {exportError && <Alert severity="error" sx={{ mt: 2 }}>{t('ChartFrame.EXPORT_ERROR')}</Alert>}
+      {exportError && <Alert severity="error" sx={CHART_FRAME_ALERT_SX}>{t('ChartFrame.EXPORT_ERROR')}</Alert>}
 
       {/* `meta` opts the card into the single bordered foot row (meta left, exports right).
           Without it the markup below is byte-for-byte the pre-`meta` structure -- a bare Stack,

package/src/components/charts/TimeSeriesChart.jsx

@@ -32,6 +32,13 @@ import { useNeutralChartPalette } from './palette';
 // MUI measurement bug is actually resolved.
 const CHART_HEIGHT = 320;
 
+// Dynamic sx factories are outside the registry's documented top-level-object
+// lower bound; the series colour is data-dependent at render time.
+const seriesToggleSx = (colour) => ({
+  color: colour,
+  '&.Mui-checked': { color: colour },
+});
+
 // CHART-5: how many x-axis tick labels to show, evenly spread across
 // data.xLabels, regardless of container width or label length. Replaces
 // MUI's own collision-based tick filtering (which, given enough densely
@@ -240,10 +247,7 @@ export function TimeSeriesChart({
                   onChange={() => toggleSeries(series.key)}
                   icon={<SeriesToggleDot color={palette[index % palette.length]} active={false} />}
                   checkedIcon={<SeriesToggleDot color={palette[index % palette.length]} active />}
-                  sx={{
-                    color: palette[index % palette.length],
-                    '&.Mui-checked': { color: palette[index % palette.length] },
-                  }}
+                  sx={seriesToggleSx(palette[index % palette.length])}
                 />
               )}
               label={series.label}

package/src/index.js

@@ -4,7 +4,10 @@
 export {
   createAppTheme,
   assertThemeComplete,
+  assertKitSxDisjoint,
   calculateContrastRatio,
+  KIT_COMPONENT_SX_REGISTRY,
+  reportKitSxBypasses,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,
 } from './theme';

package/src/layout/PageLayout.jsx

@@ -2,9 +2,11 @@
 import React from 'react';
 import { Container, Box, Typography } from '@mui/material';
 
+export const PAGE_LAYOUT_CONTAINER_SX = { mt: 4 };
+
 // Layout for content pages with larger width (e.g. Profile, Welcome, Input)
 export const WidePage = ({ title, children, maxWidth = 'lg' }) => (
-  <Container maxWidth={maxWidth} sx={{ mt: 4 }}>
+  <Container maxWidth={maxWidth} sx={PAGE_LAYOUT_CONTAINER_SX}>
     {title && (
       <Typography variant="h4" gutterBottom>
         {title}
@@ -16,7 +18,7 @@ export const WidePage = ({ title, children, maxWidth = 'lg' }) => (
 
 // Layout for forms or narrow pages (e.g. Login, Reset, Invite)
 export const NarrowPage = ({ title, subtitle, children }) => (
-  <Container maxWidth="md" sx={{ mt: 4 }}>
+  <Container maxWidth="md" sx={PAGE_LAYOUT_CONTAINER_SX}>
     <Box sx={{ maxWidth: 480, mx: 'auto' }}>
       {title && (
         <Typography variant="h4" gutterBottom>

package/src/messaging/AttachmentList.jsx

@@ -7,6 +7,12 @@ import { useTranslation } from 'react-i18next';
 
 import { useMessaging } from './MessagingProvider';
 
+export const ATTACHMENT_LIST_LIGHTBOX_ACTION_SX = {
+  bgcolor: 'background.paper',
+  boxShadow: 1,
+};
+export const ATTACHMENT_LIST_ALERT_SX = { m: 2 };
+
 function isImage(attachment) { return attachment.content_type?.startsWith('image/'); }
 // `filename` is dcm's real, sanitized upload name (MSG-12) -- `id` is the
 // last-resort fallback for interop with a host still on a pre-MSG-12 pin.
@@ -117,15 +123,15 @@ export function AttachmentList({ attachments = [] }) {
     <Dialog open={Boolean(lightbox)} onClose={() => setLightbox(null)} maxWidth="lg" aria-label={lightbox ? nameOf(lightbox.attachment) : undefined}>
       {lightbox && <Box sx={{ position: 'relative', minWidth: 240, minHeight: lightbox.status === 'ready' ? undefined : 160, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <Stack direction="row" spacing={0.5} sx={{ position: 'absolute', top: 4, right: 4 }}>
-          {lightbox.status === 'ready' && <IconButton aria-label={t('MessagingAttachments.DOWNLOAD_ACTION')} onClick={() => download(lightbox.attachment)} sx={{ bgcolor: 'background.paper', boxShadow: 1 }}>
+          {lightbox.status === 'ready' && <IconButton aria-label={t('MessagingAttachments.DOWNLOAD_ACTION')} onClick={() => download(lightbox.attachment)} sx={ATTACHMENT_LIST_LIGHTBOX_ACTION_SX}>
             <DownloadIcon />
           </IconButton>}
-          <IconButton aria-label={t('MessagingAttachments.CLOSE_PREVIEW')} onClick={() => setLightbox(null)} sx={{ bgcolor: 'background.paper', boxShadow: 1 }}>
+          <IconButton aria-label={t('MessagingAttachments.CLOSE_PREVIEW')} onClick={() => setLightbox(null)} sx={ATTACHMENT_LIST_LIGHTBOX_ACTION_SX}>
             <CloseIcon />
           </IconButton>
         </Stack>
         {lightbox.status === 'loading' && <CircularProgress aria-label={t('MessagingAttachments.LOADING_PREVIEW')} sx={{ m: 4 }} />}
-        {lightbox.status === 'error' && <Alert severity="error" role="alert" sx={{ m: 2 }}>{t('MessagingAttachments.PREVIEW_ERROR')}</Alert>}
+        {lightbox.status === 'error' && <Alert severity="error" role="alert" sx={ATTACHMENT_LIST_ALERT_SX}>{t('MessagingAttachments.PREVIEW_ERROR')}</Alert>}
         {lightbox.status === 'ready' && <Box component="img" src={lightbox.url} alt={nameOf(lightbox.attachment)} sx={{ display: 'block', maxWidth: '90vw', maxHeight: '90vh' }} />}
       </Box>}
     </Dialog>

package/src/messaging/Composer.jsx

@@ -10,6 +10,8 @@ import { useTranslation } from 'react-i18next';
 import { compressImageForUpload } from './composerImageCompression';
 import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
 
+export const COMPOSER_EMOJI_BUTTON_SX = { fontSize: '1.15rem' };
+
 // A wider, Composer-only set (MSG-6i) -- deliberately separate from
 // ReactionBar's own QUICK_EMOJIS (5, curated for fast reactions). Mobile
 // users already have a full native emoji keyboard for free-form text; this
@@ -167,7 +169,7 @@ export function Composer({ conversationId, conversation, replyTarget = null, onR
       */}
       <Box role="group" aria-label={t('MessagingComposer.EMOJI_PICKER')} sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0.25, p: 0.5, maxWidth: 280 }}>
         {COMPOSER_EMOJIS.map((emoji) => (
-          <IconButton key={emoji} type="button" size="small" onClick={() => insertEmoji(emoji)} sx={{ fontSize: '1.15rem' }}>
+          <IconButton key={emoji} type="button" size="small" onClick={() => insertEmoji(emoji)} sx={COMPOSER_EMOJI_BUTTON_SX}>
             {emoji}
           </IconButton>
         ))}

package/src/messaging/DirectMessageLauncher.jsx

@@ -18,6 +18,8 @@ import { useTranslation } from 'react-i18next';
 
 import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
 
+export const DIRECT_MESSAGE_LAUNCHER_ALERT_SX = { mb: 1 };
+
 /**
  * Starts direct conversations from host-provided people. Candidate discovery is
  * intentionally outside messaging because memberships are host-domain data.
@@ -70,7 +72,7 @@ export function DirectMessageLauncher({ candidates = [], scope, onOpen }) {
       <Dialog open={open} onClose={closePicker} fullScreen={fullScreen} aria-labelledby={titleId}>
         <DialogTitle id={titleId}>{t('MessagingDirect.TITLE')}</DialogTitle>
         <DialogContent>
-          {error && <Alert severity="error" sx={{ mb: 1 }}>{error}</Alert>}
+          {error && <Alert severity="error" sx={DIRECT_MESSAGE_LAUNCHER_ALERT_SX}>{error}</Alert>}
           {starting && <Typography role="status" sx={{ mb: 1 }}><CircularProgress size={16} sx={{ mr: 1 }} />{t('MessagingDirect.STARTING')}</Typography>}
           {candidates.length === 0 ? (
             <Typography>{t('MessagingDirect.EMPTY')}</Typography>

package/src/messaging/MessageBubble.jsx

@@ -8,6 +8,29 @@ import { extractApiErrorMessage, useOptionalMessaging } from './MessagingProvide
 import { ReactionBar } from './ReactionBar';
 import { PollCard } from './PollCard';
 
+export const MESSAGE_BUBBLE_ROOT_SX = {
+  position: 'relative',
+  p: 1.25,
+  minWidth: 0,
+  overflowWrap: 'anywhere',
+  '& .message-actions': {
+    opacity: 0,
+    pointerEvents: 'none',
+    transition: 'opacity 120ms ease-in-out',
+  },
+  '&:hover .message-actions, &:focus-within .message-actions, &[data-actions-visible="true"] .message-actions': {
+    opacity: 1,
+    pointerEvents: 'auto',
+  },
+};
+export const MESSAGE_BUBBLE_ACTION_SX = {
+  position: 'absolute',
+  top: -12,
+  right: -12,
+  bgcolor: 'background.paper',
+  boxShadow: 1,
+};
+
 function senderName(message) {
   return message.sender?.display_name || message.sender?.username || message.sender_name || message.sender?.name;
 }
@@ -103,16 +126,15 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
         data-actions-visible={actionsVisible || undefined}
         onClick={revealActions}
         onContextMenu={canOpenMenu ? openMenu : undefined}
-        sx={{
-          position: 'relative', p: 1.25, minWidth: 0,
-          bgcolor: isOwn ? (theme) => alpha(theme.palette.primary.light, 0.24) : 'background.paper',
-          borderColor: isOwn ? (theme) => alpha(theme.palette.primary.main, 0.35) : 'divider',
-          overflowWrap: 'anywhere',
-          '& .message-actions': { opacity: 0, pointerEvents: 'none', transition: 'opacity 120ms ease-in-out' },
-          '&:hover .message-actions, &:focus-within .message-actions, &[data-actions-visible="true"] .message-actions': { opacity: 1, pointerEvents: 'auto' },
-        }}
+        sx={[
+          MESSAGE_BUBBLE_ROOT_SX,
+          {
+            bgcolor: isOwn ? (theme) => alpha(theme.palette.primary.light, 0.24) : 'background.paper',
+            borderColor: isOwn ? (theme) => alpha(theme.palette.primary.main, 0.35) : 'divider',
+          },
+        ]}
       >
-        {canOpenMenu && <IconButton className="message-actions" size="small" aria-label={t('MessagingActions.MENU')} onClick={openMenu} sx={{ position: 'absolute', top: -12, right: -12, bgcolor: 'background.paper', boxShadow: 1 }}><MoreVertIcon fontSize="small" /></IconButton>}
+        {canOpenMenu && <IconButton className="message-actions" size="small" aria-label={t('MessagingActions.MENU')} onClick={openMenu} sx={MESSAGE_BUBBLE_ACTION_SX}><MoreVertIcon fontSize="small" /></IconButton>}
         <Stack spacing={0.75}>
           {replyTo && <ButtonBase type="button" onClick={() => 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 }}>
             <Stack spacing={0} alignItems="flex-start">

package/src/messaging/PollCard.jsx

@@ -5,6 +5,10 @@ import { useTranslation } from 'react-i18next';
 
 import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
 
+export const POLL_CARD_ROOT_SX = { p: 1.5, minWidth: 260 };
+export const POLL_CARD_FORM_CONTROL_SX = { width: '100%', m: 0, alignItems: 'flex-start' };
+export const POLL_CARD_CHECKBOX_SX = { pt: 0.25 };
+
 /**
  * Independently mountable live poll view. Server authorization remains authoritative.
  *
@@ -124,19 +128,17 @@ export function PollCard({ message, canClose: canCloseProp }) {
     </Stack>;
     return { accessibleLabel, richLabel };
   };
-  const formControlSx = { width: '100%', m: 0, alignItems: 'flex-start' };
-
   // MSG-6j: a short question/option set could otherwise pull the whole `MessageBubble`
   // (`width: fit-content`) in tighter than comfortable to read. 260px stays under the
   // bubble's own `maxWidth: min(75%, 680px)` ceiling even at a 375px viewport (75% = 281px)
   // -- verified at that width, not just desktop.
-  return <Paper variant="outlined" sx={{ p: 1.5, minWidth: 260 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={1.5}>
+  return <Paper variant="outlined" sx={POLL_CARD_ROOT_SX} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={1.5}>
     <Typography variant="subtitle2">{poll.question}</Typography>
     {poll.allow_multiple
       ? (poll.options || []).map((option) => {
           const { accessibleLabel, richLabel } = optionLabel(option);
-          return <FormControlLabel key={option.id} disabled={closed} sx={formControlSx} label={richLabel}
-            control={<Checkbox checked={selected.includes(option.id)} inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={{ pt: 0.25 }} />} />;
+          return <FormControlLabel key={option.id} disabled={closed} sx={POLL_CARD_FORM_CONTROL_SX} label={richLabel}
+            control={<Checkbox checked={selected.includes(option.id)} inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={POLL_CARD_CHECKBOX_SX} />} />;
         })
       // No RadioGroup-level onChange: it would only ever hand back
       // `event.target.value`, a DOM string -- coercing a non-string option id
@@ -148,7 +150,7 @@ export function PollCard({ message, canClose: canCloseProp }) {
       : <RadioGroup value={selected[0] ?? ''} name={`poll-${poll.id}-options`}>
           {(poll.options || []).map((option) => {
             const { accessibleLabel, richLabel } = optionLabel(option);
-            return <FormControlLabel key={option.id} value={option.id} disabled={closed} sx={formControlSx} label={richLabel}
+            return <FormControlLabel key={option.id} value={option.id} disabled={closed} sx={POLL_CARD_FORM_CONTROL_SX} label={richLabel}
               control={<Radio inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={{ pt: 0.25 }} />} />;
           })}
         </RadioGroup>}

package/src/messaging/Thread.jsx

@@ -8,6 +8,8 @@ import { MESSAGING_ENVELOPE, useMessaging } from './MessagingProvider';
 import { ReadTicks } from './ReadTicks';
 import { useRealtime } from '../notifications/realtime';
 
+export const THREAD_DAY_SEPARATOR_SX = { flex: 1 };
+
 function chronological(messages) { return [...messages].sort((left, right) => new Date(left.created_at || 0) - new Date(right.created_at || 0)); }
 function replyToId(message) { return message.reply_to_id ?? message.reply_to; }
 // last_reply_at/reply_count are viewer-independent (always on serialize_message);
@@ -174,7 +176,7 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
             no vertical overflow). */}
         <Stack spacing={1} sx={{ pr: 2 }}>{datedRoots.map(({ message, showDateSeparator }) => {
           const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
-          return <Stack key={message.id} spacing={0.75}>{showDateSeparator && <Stack data-testid="day-separator" direction="row" alignItems="center" spacing={1}><Divider sx={{ flex: 1 }} /><Typography variant="caption" color="text.secondary">{new Date(message.created_at).toLocaleDateString(i18n?.language)}</Typography><Divider sx={{ flex: 1 }} /></Stack>}<MessageBubble message={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
+          return <Stack key={message.id} spacing={0.75}>{showDateSeparator && <Stack data-testid="day-separator" direction="row" alignItems="center" spacing={1}><Divider sx={THREAD_DAY_SEPARATOR_SX} /><Typography variant="caption" color="text.secondary">{new Date(message.created_at).toLocaleDateString(i18n?.language)}</Typography><Divider sx={THREAD_DAY_SEPARATOR_SX} /></Stack>}<MessageBubble message={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
             {(message.reply_count || replies.length) > 0 && (() => {
               const unread = hasUnreadReplies(message, cache.receipts, user?.id);
               const label = openThreads[message.id] ? t('MessagingThread.HIDE_REPLIES') : t('MessagingThread.SHOW_REPLIES', { count: message.reply_count || replies.length });

package/src/notifications/NotificationSettings.jsx

@@ -18,6 +18,21 @@ import {
   urlBase64ToUint8Array,
 } from './api';
 
+export const NOTIFICATION_SETTINGS_ALERT_SX = { mb: 2 };
+export const NOTIFICATION_SETTINGS_HINT_ALERT_SX = { mb: 1.5 };
+export const NOTIFICATION_SETTINGS_REACH_ALERT_SX = { mb: 1 };
+export const NOTIFICATION_SETTINGS_FORM_CONTROL_SX = { alignItems: 'flex-start', ml: 0 };
+export const NOTIFICATION_SETTINGS_PUSH_CONTROL_SX = {
+  alignItems: 'flex-start',
+  ml: 0,
+  mt: 1.5,
+};
+export const NOTIFICATION_SETTINGS_CATEGORY_CONTROL_SX = {
+  alignItems: 'center',
+  ml: 0,
+  display: 'flex',
+};
+
 function reachLabelKey(notificationType) {
   const noActiveChannel = notificationType.active && notificationType.has_active_channel === false;
   if (notificationType.active && notificationType.passive) {
@@ -210,23 +225,23 @@ export function NotificationSettings() {
       <Typography variant="body2" color="text.secondary" gutterBottom>
         {t('NotificationSettings.SUBTITLE')}
       </Typography>
-      {error && <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError('')}>{error}</Alert>}
-      {conflict && <Alert severity="warning" sx={{ mb: 2 }} onClose={() => setConflict('')}>{conflict}</Alert>}
+      {error && <Alert severity="error" sx={NOTIFICATION_SETTINGS_ALERT_SX} onClose={() => setError('')}>{error}</Alert>}
+      {conflict && <Alert severity="warning" sx={NOTIFICATION_SETTINGS_ALERT_SX} onClose={() => setConflict('')}>{conflict}</Alert>}
 
       <Box sx={{ py: 2 }}>
         <FormControlLabel
           control={<Switch checked={Boolean(preferences?.email_opt_in)} onChange={handleEmailToggle} disabled={savingEmail} />}
           label={<Box><Typography variant="body1">{t('NotificationSettings.EMAIL_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.EMAIL_HINT')}</Typography></Box>}
           labelPlacement="end"
-          sx={{ alignItems: 'flex-start', ml: 0 }}
+          sx={NOTIFICATION_SETTINGS_FORM_CONTROL_SX}
         />
       </Box>
 
       <Divider />
 
       <Box sx={{ py: 2 }}>
-        {iosNeedsInstall && <Alert severity="info" sx={{ mb: 1.5 }}>{t('NotificationSettings.IOS_HINT')}</Alert>}
-        {!pushSupported && !iosNeedsInstall && <Alert severity="warning" sx={{ mb: 1.5 }}>{t('NotificationSettings.PUSH_NOT_SUPPORTED')}</Alert>}
+        {iosNeedsInstall && <Alert severity="info" sx={NOTIFICATION_SETTINGS_HINT_ALERT_SX}>{t('NotificationSettings.IOS_HINT')}</Alert>}
+        {!pushSupported && !iosNeedsInstall && <Alert severity="warning" sx={NOTIFICATION_SETTINGS_HINT_ALERT_SX}>{t('NotificationSettings.PUSH_NOT_SUPPORTED')}</Alert>}
         <FormControlLabel
           control={(
             <Switch
@@ -237,7 +252,7 @@ export function NotificationSettings() {
           )}
           label={<Box><Typography variant="body1">{t('NotificationSettings.PUSH_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.PUSH_HINT')}</Typography></Box>}
           labelPlacement="end"
-          sx={{ alignItems: 'flex-start', ml: 0 }}
+          sx={NOTIFICATION_SETTINGS_FORM_CONTROL_SX}
         />
         <FormControlLabel
           control={(
@@ -249,7 +264,7 @@ export function NotificationSettings() {
           )}
           label={<Box><Typography variant="body1">{t('NotificationSettings.PUSH_PREVIEW_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.PUSH_PREVIEW_HINT')}</Typography></Box>}
           labelPlacement="end"
-          sx={{ alignItems: 'flex-start', ml: 0, mt: 1.5 }}
+          sx={NOTIFICATION_SETTINGS_PUSH_CONTROL_SX}
         />
       </Box>
 
@@ -266,7 +281,7 @@ export function NotificationSettings() {
               // reach description is static settings copy, not a status message.
               if (labelKey === 'NotificationSettings.REACH_NO_ACTIVE_CHANNEL') {
                 return (
-                  <Alert key={notificationType.key} severity="warning" sx={{ mb: 1 }}>
+                  <Alert key={notificationType.key} severity="warning" sx={NOTIFICATION_SETTINGS_REACH_ALERT_SX}>
                     <strong>{notificationType.label}</strong> — {reachText}
                   </Alert>
                 );
@@ -302,7 +317,7 @@ export function NotificationSettings() {
                 )}
                 label={row.label}
                 labelPlacement="end"
-                sx={{ alignItems: 'center', ml: 0, display: 'flex' }}
+                sx={NOTIFICATION_SETTINGS_CATEGORY_CONTROL_SX}
               />
             ))}
           </Box>

package/src/notifications/PopupSurface.jsx

@@ -8,6 +8,8 @@ import { WizardDialogShell } from '../onboarding/WizardDialogShell';
 import { useNotifications } from './NotificationsProvider';
 import { DEFAULT_ENVELOPE, useRealtime } from './realtime';
 
+export const POPUP_SURFACE_DISMISS_BUTTON_SX = { alignSelf: 'flex-end' };
+
 function PopupStepComponent({ onDismiss, ctx }) {
   const { t } = useTranslation();
   const content = ctx?.content || {};
@@ -17,7 +19,7 @@ function PopupStepComponent({ onDismiss, ctx }) {
       {content.body_key && (
         <Typography variant="body1">{t(content.body_key, content.params || {})}</Typography>
       )}
-      <Button onClick={onDismiss} sx={{ alignSelf: 'flex-end' }}>
+      <Button onClick={onDismiss} sx={POPUP_SURFACE_DISMISS_BUTTON_SX}>
         {t('PopupSurface.CLOSE')}
       </Button>
     </Stack>

package/src/onboarding/steps/BrowserPushStep.jsx

@@ -16,6 +16,8 @@ import {
   urlBase64ToUint8Array,
 } from '../../notifications/api';
 
+export const BROWSER_PUSH_FORM_CONTROL_LABEL_SX = { alignItems: 'flex-start', ml: 0 };
+
 export function BrowserPushStep({ onComplete, onDismiss, ctx }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
@@ -92,7 +94,7 @@ export function BrowserPushStep({ onComplete, onDismiss, ctx }) {
         control={<Switch checked={emailOptedIn} onChange={handleEmailToggle} disabled={savingEmail} />}
         label={<Box><Typography variant="body1">{t('Onboarding.EMAIL_NOTIFICATIONS_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('Onboarding.EMAIL_NOTIFICATIONS_HINT')}</Typography></Box>}
         labelPlacement="end"
-        sx={{ alignItems: 'flex-start', ml: 0 }}
+        sx={BROWSER_PUSH_FORM_CONTROL_LABEL_SX}
       />
       {pushSupported && (
         <Box>

package/src/pages/AccountPage.jsx

@@ -16,6 +16,8 @@ import { useTranslation } from 'react-i18next';
 // Internal context
 import { AuthContext } from '../auth/AuthContext';
 
+export const ACCOUNT_PAGE_SECTION_PAPER_SX = { p: 2.5 };
+
 // Falls die Komponenten noch lokal sind:
 import { WidePage } from '../layout/PageLayout';
 import { ProfileComponent } from '../components/ProfileComponent';
@@ -250,13 +252,13 @@ export function AccountPage({
         <Box sx={{ mt: 2 }}>
           <Stack spacing={2.5}>
             {canViewAuthPolicy && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <AuthFactorRequirementCard canEdit={canWriteAuthPolicy} policy={authPolicy} />
               </Paper>
             )}
 
             {canViewAuthPolicy && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <RegistrationMethodsManager
                   policy={authPolicy}
                   error={authPolicyError}
@@ -267,13 +269,13 @@ export function AccountPage({
             )}
 
             {canSendInvites && Boolean(authPolicy?.allow_admin_invite) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <UserInviteComponent />
               </Paper>
             )}
 
             {canManageAccessCodes && Boolean(authPolicy?.allow_self_signup_access_code) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <Typography variant="h6" gutterBottom>
                   {t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes')}
                 </Typography>
@@ -285,7 +287,7 @@ export function AccountPage({
             )}
 
             {canManageAccessCodes && Boolean(authPolicy?.allow_self_signup_access_code) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <AccessCodeSingleUseToggle
                   canEdit={canWriteAuthPolicy}
                   policy={authPolicy}
@@ -295,13 +297,13 @@ export function AccountPage({
             )}
 
             {canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy?.allow_admin_invite) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <BulkInviteCsvTab {...bulkInviteCsvProps} />
               </Paper>
             )}
 
             {canViewAuthPolicy && Boolean(authPolicy?.allow_self_signup_email_domain) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <AllowedEmailDomainsManager
                   enabled={Boolean(authPolicy?.allow_self_signup_email_domain)}
                   domains={authPolicy?.allowed_email_domains || []}
@@ -312,7 +314,7 @@ export function AccountPage({
             )}
 
             {canViewAuthPolicy && Boolean(authPolicy?.allow_self_signup_qr) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <QrSignupValidityManager
                   enabled={Boolean(authPolicy?.allow_self_signup_qr)}
                   expiryDays={authPolicy?.signup_qr_expiry_days}
@@ -323,7 +325,7 @@ export function AccountPage({
             )}
 
             {canManageSignupQr && Boolean(authPolicy?.allow_self_signup_qr) && (
-              <Paper variant="outlined" sx={{ p: 2.5, borderRadius: 2 }}>
+              <Paper variant="outlined" sx={ACCOUNT_PAGE_SECTION_PAPER_SX}>
                 <QrSignupManager
                   enabled={Boolean(authPolicy?.allow_self_signup_qr)}
                   expiryDays={authPolicy?.signup_qr_expiry_days}

package/src/pages/LoginPage.jsx

@@ -20,6 +20,8 @@ import { loginWithPasskey, startSocialLogin } from '../utils/authService';
 import { LoginForm } from '../components/LoginForm';
 import { MfaLoginComponent } from '../components/MfaLoginComponent';
 
+export const LOGIN_PAGE_ALERT_SX = { mb: 2 };
+
 export function LoginPage() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -284,25 +286,25 @@ export function LoginPage() {
       </Helmet>
 
       {errorKey && (
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Alert severity="error" sx={LOGIN_PAGE_ALERT_SX}>
           {t(errorKey)}
         </Alert>
       )}
 
       {recoveryFetching && !errorKey && (
-        <Alert severity="info" sx={{ mb: 2 }}>
+        <Alert severity="info" sx={LOGIN_PAGE_ALERT_SX}>
           {t('Auth.RECOVERY_LINK_VALIDATING', 'Validating recovery link…')}
         </Alert>
       )}
 
       {recoveryToken && !errorKey && (
-        <Alert severity="info" sx={{ mb: 2 }}>
+        <Alert severity="info" sx={LOGIN_PAGE_ALERT_SX}>
           {t('Auth.RECOVERY_LOGIN_WARNING', 'Recovery link validated. Please enter your password.')}
         </Alert>
       )}
 
       {twoFactorRequired && !recoveryToken && !recoveryFetching && (
-        <Alert severity="info" sx={{ mb: 2 }}>
+        <Alert severity="info" sx={LOGIN_PAGE_ALERT_SX}>
           {t('Auth.TWO_FACTOR_REQUIRED_HINT', 'This app requires two authentication factors for full access.')}
         </Alert>
       )}

package/src/pages/SignUpPage.jsx

@@ -21,6 +21,8 @@ import { AuthContext } from '../auth/AuthContext';
 import { submitRegistrationRequest } from '../auth/authApi';
 import { TurnstileWidget } from '../components/TurnstileWidget';
 
+export const SIGN_UP_PAGE_ALERT_SX = { mb: 2 };
+
 const TURNSTILE_SIGNUP_MODES = new Set([
   'self_signup_open',
   'self_signup_email_domain',
@@ -162,13 +164,13 @@ export function SignUpPage() {
       </Helmet>
 
       {successKey && (
-        <Alert severity="success" sx={{ mb: 2 }}>
+        <Alert severity="success" sx={SIGN_UP_PAGE_ALERT_SX}>
           {t(successKey, { email })}
         </Alert>
       )}
 
       {errorKey && (
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Alert severity="error" sx={SIGN_UP_PAGE_ALERT_SX}>
           {t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.'))}
         </Alert>
       )}

package/src/pages/SignupConfirmPage.jsx

@@ -20,6 +20,8 @@ import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { confirmRegistration } from '../auth/authApi';
 
+export const SIGNUP_CONFIRM_PAGE_ALERT_SX = { mb: 2 };
+
 export function SignupConfirmPage() {
   const { t } = useTranslation();
   const location = useLocation();
@@ -85,7 +87,7 @@ export function SignupConfirmPage() {
 
       {tokenMissing ? (
         <>
-          <Alert severity="error" sx={{ mb: 2 }}>
+          <Alert severity="error" sx={SIGNUP_CONFIRM_PAGE_ALERT_SX}>
             {t('Auth.PENDING_TOKEN_INVALID', 'This confirmation link is invalid or expired.')}
           </Alert>
           <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
@@ -100,7 +102,7 @@ export function SignupConfirmPage() {
       ) : (
         <>
           {errorKey && (
-            <Alert severity="error" sx={{ mb: 2 }}>
+            <Alert severity="error" sx={SIGNUP_CONFIRM_PAGE_ALERT_SX}>
               {t(errorKey, t('Auth.PENDING_TOKEN_INVALID', 'Could not confirm registration.'))}
             </Alert>
           )}

package/src/theme/index.js

@@ -1,10 +1,13 @@
 export { createAppTheme } from './createAppTheme';
 export {
   assertThemeComplete,
+  assertKitSxDisjoint,
   calculateContrastRatio,
+  reportKitSxBypasses,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,
 } from './themeCompleteness';
+export { KIT_COMPONENT_SX_REGISTRY } from './kitSxRegistry';
 export {
   formatShortTime,
   formatShortDate,