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

package/dist/pages/AccountPage.js

@@ -2,13 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSearchParams } from 'react-router-dom';
-import { Tabs, Tab, Box, Typography, Alert, CircularProgress, Paper, Stack, } from '@mui/material';
+import { Box, Typography, Alert, CircularProgress, Paper, Stack, useMediaQuery, } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 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 { SectionNav } from '../layout/SectionNav';
 import { ProfileComponent } from '../components/ProfileComponent';
 import { SecurityComponent } from '../components/SecurityComponent';
 import { UserListComponent } from '../components/UserListComponent';
@@ -30,6 +32,8 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const [searchParams, setSearchParams] = useSearchParams();
     const [authPolicy, setAuthPolicy] = useState(null);
     const [authPolicyError, setAuthPolicyError] = useState('');
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // 1. URL State Management
     const currentTabRaw = searchParams.get('tab') || 'profile';
     const currentTab = ['invite', 'bulk-invite-csv', 'access'].includes(currentTabRaw)
@@ -116,6 +120,44 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
         });
         return list;
     }, [user, perms, t, isSuperUser, extraTabs, canViewUsers, canViewInvite]);
+    const groups = useMemo(() => {
+        const groupDefinitions = [
+            {
+                key: 'my-account',
+                label: t('Account.GROUP_MY_ACCOUNT', 'My account'),
+                values: new Set(['profile', 'security']),
+            },
+            {
+                key: 'management',
+                label: t('Account.GROUP_MANAGEMENT', 'Management'),
+                values: new Set(['users', 'invite']),
+            },
+            {
+                key: 'help',
+                label: t('Account.GROUP_HELP', 'Help'),
+                values: new Set(['support']),
+            },
+        ];
+        const assignedValues = new Set(groupDefinitions.flatMap((group) => [...group.values]));
+        const mappedGroups = groupDefinitions.map((group) => ({
+            key: group.key,
+            label: group.label,
+            items: tabs
+                .filter((tab) => group.values.has(tab.value))
+                .map((tab) => ({ key: tab.value, label: tab.label })),
+        }));
+        const extraItems = tabs
+            .filter((tab) => !assignedValues.has(tab.value))
+            .map((tab) => ({ key: tab.value, label: tab.label }));
+        if (extraItems.length > 0) {
+            mappedGroups.push({
+                key: 'more',
+                label: t('Account.GROUP_MORE', 'More'),
+                items: extraItems,
+            });
+        }
+        return mappedGroups.filter((group) => group.items.length > 0);
+    }, [tabs, t]);
     // 4. Loading & Auth Checks
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 10 }, children: _jsx(CircularProgress, {}) }));
@@ -131,5 +173,5 @@ export function AccountPage({ userListExtraColumns = [], userListExtraRowActions
     const activeExtraTab = builtInTabValues.has(safeTab)
         ? null
         : extraTabs.find((tab) => tab.value === safeTab);
-    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsx(Tabs, { value: safeTab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", sx: { mb: 3, borderBottom: 1, borderColor: 'divider' }, children: tabs.map((tab) => (_jsx(Tab, { label: tab.label, value: tab.value }, tab.value))) }), safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser, showNewColumn: userListShowNewColumn, showSuccessfulLoginColumn: userListShowSuccessfulLoginColumn, showRoleColumn: userListShowRoleColumn, onChangeRole: userListOnChangeRole, showDeleteAction: userListShowDeleteAction, canDeleteUser: userListCanDeleteUser, onDeleteUser: userListOnDeleteUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AuthFactorRequirementCard, { canEdit: canWriteAuthPolicy, policy: authPolicy }) })), canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canSendInvites && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(UserInviteComponent, {}) })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AccessCodeSingleUseToggle, { canEdit: canWriteAuthPolicy, policy: authPolicy, onPolicyChange: setAuthPolicy }) })), canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canManageSignupQr && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] }));
+    return (_jsxs(WidePage, { title: t('Account.TITLE', 'Account & Administration'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('Account.PAGE_TITLE', 'Account'), " \u2013 ", user.email] }) }), _jsxs(SectionNav, { mode: isMobile ? 'mobile' : 'desktop', groups: groups, activeKey: safeTab, onSelect: (key) => handleTabChange(null, key), children: [safeTab === 'profile' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProfileComponent, { onSubmit: handleProfileSubmit, showName: true, showPrivacy: true, showCookies: true }) })), safeTab === 'security' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), safeTab === 'users' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(UserListComponent, { roles: activeRoles, currentUser: user, extraColumns: userListExtraColumns, extraRowActions: userListExtraRowActions, extraContext: userListExtraContext, refreshTrigger: userListRefreshTrigger, canEditUser: userListCanEditUser, showNewColumn: userListShowNewColumn, showSuccessfulLoginColumn: userListShowSuccessfulLoginColumn, showRoleColumn: userListShowRoleColumn, onChangeRole: userListOnChangeRole, showDeleteAction: userListShowDeleteAction, canDeleteUser: userListCanDeleteUser, onDeleteUser: userListOnDeleteUser }) })), safeTab === 'invite' && (_jsx(Box, { sx: { mt: 2 }, children: _jsxs(Stack, { spacing: 2.5, children: [canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AuthFactorRequirementCard, { canEdit: canWriteAuthPolicy, policy: authPolicy }) })), canViewAuthPolicy && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(RegistrationMethodsManager, { policy: authPolicy, error: authPolicyError, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canSendInvites && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(UserInviteComponent, {}) })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsxs(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_MANAGER_TITLE', 'Access Codes') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.ACCESS_CODES_HINT', 'Manage access codes for self-registration.') }), _jsx(AccessCodeManager, {})] })), canManageAccessCodes && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_access_code) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AccessCodeSingleUseToggle, { canEdit: canWriteAuthPolicy, policy: authPolicy, onPolicyChange: setAuthPolicy }) })), canSendInvites && showBulkInviteCsvTab && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_admin_invite) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(BulkInviteCsvTab, Object.assign({}, bulkInviteCsvProps)) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(AllowedEmailDomainsManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_email_domain), domains: (authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allowed_email_domains) || [], onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canViewAuthPolicy && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupValidityManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days, onPolicyChange: setAuthPolicy, canEdit: canWriteAuthPolicy }) })), canManageSignupQr && Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr) && (_jsx(Paper, { variant: "outlined", sx: ACCOUNT_PAGE_SECTION_PAPER_SX, children: _jsx(QrSignupManager, { enabled: Boolean(authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.allow_self_signup_qr), expiryDays: authPolicy === null || authPolicy === void 0 ? void 0 : authPolicy.signup_qr_expiry_days }) }))] }) })), safeTab === 'support' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(SupportRecoveryRequestsTab, {}) })), activeExtraTab && (_jsx(Box, { sx: { mt: 2 }, children: (_a = activeExtraTab.render) === null || _a === void 0 ? void 0 : _a.call(activeExtraTab, { user, perms, isSuperUser, t }) }))] })] }));
 }

package/dist/theme/index.js

@@ -1,5 +1,5 @@
 export { createAppTheme } from './createAppTheme';
-export { assertThemeComplete, assertKitSxDisjoint, calculateContrastRatio, reportKitSxBypasses, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './themeCompleteness';
+export { assertThemeComplete, assertKitSxDisjoint, calculateContrastRatio, reportOffPaletteColours, reportKitSxBypasses, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './themeCompleteness';
 export { KIT_COMPONENT_SX_REGISTRY } from './kitSxRegistry';
 export { formatShortTime, formatShortDate, formatShortMonth, formatShortYear, } from '../components/charts/chartLabels';
 export { yearTickInterval } from '../components/charts/yearTickInterval';

package/dist/theme/kitSxRegistry.js

@@ -17,6 +17,7 @@ import { USER_INVITE_ACTION_SX, USER_INVITE_ALERT_SX } from '../components/UserI
 import { USER_LIST_ACTION_SX, USER_LIST_ALERT_SX, USER_LIST_BODY_CELL_SX, USER_LIST_EMPTY_CELL_SX, USER_LIST_HEADER_CELL_SX, } from '../components/UserListComponent';
 import { CHART_FRAME_ALERT_SX, CHART_FRAME_ROOT_SX } from '../components/charts/ChartFrame';
 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 { DIRECT_MESSAGE_LAUNCHER_ALERT_SX } from '../messaging/DirectMessageLauncher';
@@ -88,6 +89,8 @@ const SX_EXPORTS = {
     REGISTRATION_METHODS_INFO_SX,
     SECURITY_ALERT_SX,
     SECURITY_DIVIDER_SX,
+    SECTION_NAV_DRAWER_PAPER_SX,
+    SECTION_NAV_GROUP_PAPER_SX,
     SIGNUP_CONFIRM_PAGE_ALERT_SX,
     SIGN_UP_PAGE_ALERT_SX,
     SUPPORT_RECOVERY_AGENT_BUTTON_SX,
@@ -103,10 +106,11 @@ const SX_EXPORTS = {
     USER_LIST_HEADER_CELL_SX,
 };
 const SX_EXPORT_NAMES = new Map(Object.entries(SX_EXPORTS).map(([name, sx]) => [sx, name]));
-const entry = (component, muiComponent, sx) => ({
+const entry = (component, muiComponent, sx, slots) => ({
     component,
     muiComponent,
     sx,
+    slots,
     exportName: SX_EXPORT_NAMES.get(sx),
 });
 /**
@@ -160,6 +164,9 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('ChartFrame.root', 'MuiPaper', CHART_FRAME_ROOT_SX),
     entry('ChartFrame.alert', 'MuiAlert', CHART_FRAME_ALERT_SX),
     entry('PageLayout.container', 'MuiContainer', PAGE_LAYOUT_CONTAINER_SX),
+    entry('SectionNav.drawerPaper', 'MuiDrawer', SECTION_NAV_DRAWER_PAPER_SX, ['paper']),
+    entry('SectionNav.drawerPaperBase', 'MuiPaper', SECTION_NAV_DRAWER_PAPER_SX),
+    entry('SectionNav.groupPaper', 'MuiPaper', SECTION_NAV_GROUP_PAPER_SX),
     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),

package/dist/theme/themeCompleteness.js

@@ -1,5 +1,5 @@
 import { createTheme, getContrastRatio as getMuiContrastRatio } from '@mui/material/styles';
-import { STATUS_KEYS, TYPOGRAPHY_VARIANTS } from './tokens';
+import { BASELINE_PALETTE, BASELINE_STATIC, STATUS_KEYS, TYPOGRAPHY_VARIANTS, } from './tokens';
 import { KIT_COMPONENT_SX_REGISTRY } from './kitSxRegistry';
 const MUI_DEFAULT_THEME = createTheme();
 function getPath(value, path) {
@@ -342,18 +342,28 @@ const SAME_ROOT_STYLE_OVERRIDE_SLOTS = {
     MuiButton: ['root', 'contained', 'outlined'],
     MuiChip: ['root', 'outlined'],
 };
-// MUI's sx prop accepts CSS spacing shorthands (`py`, `px`, `pt`, ...) that
-// styleOverrides' plain CSS-in-JS objects do not -- a baseline `padding`
-// default and a component's own `sx={{ py: 1 }}` collide on the vertical
-// axis even though the two key strings never match literally. Each key is
-// expanded to the canonical longhand properties it can affect so the
-// disjointness check compares axes, not raw key spellings; a property
+// MUI's sx prop accepts aliases and CSS spacing shorthands that
+// styleOverrides' plain CSS-in-JS objects do not. Each known alias is
+// expanded to the canonical CSS properties it can affect so the
+// disjointness check compares effects, not raw key spellings; a property
 // outside this table expands to itself.
 const SPACING_SHORTHAND_LONGHANDS = {
+    bgcolor: ['backgroundColor'],
+    typography: [
+        'fontFamily',
+        'fontSize',
+        'fontStyle',
+        'fontWeight',
+        'letterSpacing',
+        'lineHeight',
+        'textTransform',
+    ],
     p: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
     padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
     px: ['paddingLeft', 'paddingRight'],
+    paddingX: ['paddingLeft', 'paddingRight'],
     py: ['paddingTop', 'paddingBottom'],
+    paddingY: ['paddingTop', 'paddingBottom'],
     pt: ['paddingTop'],
     pr: ['paddingRight'],
     pb: ['paddingBottom'],
@@ -361,7 +371,9 @@ const SPACING_SHORTHAND_LONGHANDS = {
     m: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
     margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
     mx: ['marginLeft', 'marginRight'],
+    marginX: ['marginLeft', 'marginRight'],
     my: ['marginTop', 'marginBottom'],
+    marginY: ['marginTop', 'marginBottom'],
     mt: ['marginTop'],
     mr: ['marginRight'],
     mb: ['marginBottom'],
@@ -383,14 +395,12 @@ function styleOverrideKeys(componentConfig, slots = ['root']) {
 }
 /**
  * Reports top-level property collisions between registered kit sx objects and
- * the baseline MUI component they target. Spacing shorthands (`py`/`px`/...)
- * are compared by the longhand axis they affect, not by literal key name --
- * see `SPACING_SHORTHAND_LONGHANDS`.
+ * the baseline MUI component they target. Known sx aliases are compared by
+ * the CSS properties they affect, not by literal key name.
  *
- * This is deliberately a lower bound on shadowing: conditional sx, nested sx,
- * callback results, and nested selector properties are not inspected. A clean
- * result therefore proves only that the registered top-level key sets are
- * disjoint; it is not proof that no component can shadow the baseline.
+ * This is deliberately a lower bound on shadowing: unknown normalisation gaps
+ * remain. A clean result proves only that the registered top-level key sets
+ * are disjoint; it is not proof that no component can shadow the baseline.
  */
 export function assertKitSxDisjoint(theme, { registry = KIT_COMPONENT_SX_REGISTRY, exemptions = [] } = {}) {
     var _a, _b, _c;
@@ -553,6 +563,200 @@ export function reportKitSxBypasses(sources = [], { registry } = {}) {
     }
     return { findings };
 }
+const BASIC_CSS_COLOUR_NAMES = new Set([
+    'aqua',
+    'black',
+    'blue',
+    'fuchsia',
+    'gray',
+    'green',
+    'grey',
+    'lime',
+    'maroon',
+    'navy',
+    'olive',
+    'purple',
+    'red',
+    'silver',
+    'teal',
+    'white',
+    'yellow',
+]);
+const MUI_DEFAULT_NUMERIC_RAMP_NAMES = new Set([
+    'amber',
+    'blue',
+    'bluegrey',
+    'brown',
+    'cyan',
+    'deeporange',
+    'deeppurple',
+    'green',
+    'grey',
+    'indigo',
+    'lightblue',
+    'lightgreen',
+    'lime',
+    'orange',
+    'pink',
+    'purple',
+    'red',
+    'teal',
+    'yellow',
+]);
+const HEX_COLOUR_PATTERN = /#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})(?![\da-f])/gi;
+const RGB_COLOUR_PATTERN = /rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+(?:\s*,\s*[\d.]+)?\s*\)/gi;
+const NAMED_COLOUR_PATTERN = new RegExp(`\\b(?:${[...BASIC_CSS_COLOUR_NAMES].join('|')})\\b`, 'gi');
+const COLOUR_PROPERTY_PATTERN = /\b(?:background(?:Color)?|bgcolor|border(?:Top|Right|Bottom|Left)?(?:Color)?|boxShadow|caretColor|color|fill|fillStyle|outline(?:Color)?|stroke|strokeStyle|textShadow|WebkitTextFillColor)\s*(?::|=)\s*$/;
+function colourKey(value) {
+    const colour = parseColour(value);
+    return colour ? `${colour.r},${colour.g},${colour.b},${colour.a}` : null;
+}
+function collectBaselineColourKeys(...roots) {
+    const keys = new Set();
+    const visit = (value) => {
+        if (typeof value === 'string') {
+            for (const match of value.matchAll(HEX_COLOUR_PATTERN)) {
+                const key = colourKey(match[0]);
+                if (key)
+                    keys.add(key);
+            }
+            for (const match of value.matchAll(RGB_COLOUR_PATTERN)) {
+                const key = colourKey(match[0]);
+                if (key)
+                    keys.add(key);
+            }
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(visit);
+            return;
+        }
+        if (value && typeof value === 'object')
+            Object.values(value).forEach(visit);
+    };
+    roots.forEach(visit);
+    return keys;
+}
+function maskComments(source) {
+    const characters = [...source];
+    let quote = null;
+    for (let index = 0; index < characters.length; index += 1) {
+        const character = characters[index];
+        if (quote) {
+            if (character === quote && characters[index - 1] !== '\\')
+                quote = null;
+            continue;
+        }
+        if (character === '"' || character === "'" || character === '`') {
+            quote = character;
+            continue;
+        }
+        if (character === '/' && characters[index + 1] === '/') {
+            for (; index < characters.length && characters[index] !== '\n'; index += 1) {
+                characters[index] = ' ';
+            }
+            index -= 1;
+        }
+        else if (character === '/' && characters[index + 1] === '*') {
+            characters[index] = ' ';
+            characters[index + 1] = ' ';
+            index += 2;
+            while (index < characters.length
+                && !(characters[index] === '*' && characters[index + 1] === '/')) {
+                if (characters[index] !== '\n' && characters[index] !== '\r')
+                    characters[index] = ' ';
+                index += 1;
+            }
+            if (index < characters.length) {
+                characters[index] = ' ';
+                characters[index + 1] = ' ';
+                index += 1;
+            }
+        }
+    }
+    return characters.join('');
+}
+function maskQrPrintDocument(source, path) {
+    if (!path.replaceAll('\\', '/').endsWith('/QrSignupManager.jsx'))
+        return source;
+    const call = /\bprintWindow\.document\.write\s*\(\s*`/g.exec(source);
+    if (!call)
+        return source;
+    const start = call.index + call[0].lastIndexOf('`');
+    let end = start + 1;
+    while (end < source.length) {
+        if (source[end] === '`' && source[end - 1] !== '\\')
+            break;
+        end += 1;
+    }
+    if (end >= source.length)
+        return source;
+    // The generated print document is standalone HTML rendered outside the
+    // React tree, where no application theme is available. Mask the region as
+    // one unit instead of accumulating permanent per-colour exemptions.
+    return source.slice(0, start)
+        + source.slice(start, end + 1).replace(/[^\r\n]/g, ' ')
+        + source.slice(end + 1);
+}
+function normalizedSources(sources) {
+    return sources.map((entry, index) => typeof entry === 'string'
+        ? { path: `source-${index + 1}`, source: entry }
+        : { path: entry.path || `source-${index + 1}`, source: entry.source || '' });
+}
+/**
+ * Reports colour literals in component source that do not come from the
+ * baseline palette, plus report-only uses of MUI's untouched numeric ramps.
+ */
+export function reportOffPaletteColours(sources = [], { palette = BASELINE_PALETTE, baselineStatic = BASELINE_STATIC } = {}) {
+    const allowedColours = collectBaselineColourKeys(palette, baselineStatic);
+    const findings = [];
+    const stringPattern = /(["'`])((?:\\.|(?!\1)[\s\S])*)\1/g;
+    for (const { path, source } of normalizedSources(sources)) {
+        const normalizedPath = path.replaceAll('\\', '/');
+        if (/(^|\/)src\/theme\//.test(normalizedPath))
+            continue;
+        const scanSource = maskComments(maskQrPrintDocument(source, normalizedPath));
+        for (const match of scanSource.matchAll(stringPattern)) {
+            const value = match[2].trim();
+            const line = source.slice(0, match.index).split(/\r?\n/).length;
+            const surface = `${path}:${line}.colour`;
+            for (const hex of value.matchAll(HEX_COLOUR_PATTERN)) {
+                if (!allowedColours.has(colourKey(hex[0]))) {
+                    findings.push({
+                        surface,
+                        reason: `Off-palette hex colour "${hex[0]}" is not derived from the baseline palette.`,
+                    });
+                }
+            }
+            for (const rgb of value.matchAll(RGB_COLOUR_PATTERN)) {
+                if (!allowedColours.has(colourKey(rgb[0]))) {
+                    findings.push({
+                        surface,
+                        reason: `Off-palette rgb colour "${rgb[0]}" is not derived from the baseline palette.`,
+                    });
+                }
+            }
+            const before = scanSource.slice(Math.max(0, match.index - 40), match.index);
+            const isColourProperty = COLOUR_PROPERTY_PATTERN.test(before);
+            const numericRamp = value.match(/^([a-z]+)\.(\d+)$/i);
+            if (isColourProperty && !numericRamp) {
+                for (const namedColour of value.matchAll(NAMED_COLOUR_PATTERN)) {
+                    findings.push({
+                        surface,
+                        reason: `Named CSS colour "${namedColour[0]}" bypasses the baseline palette.`,
+                    });
+                }
+            }
+            if (numericRamp && MUI_DEFAULT_NUMERIC_RAMP_NAMES.has(numericRamp[1].toLowerCase())) {
+                findings.push({
+                    surface,
+                    reason: `Report only: "${value}" uses MUI's untouched numeric palette ramp, not a baseline token.`,
+                });
+            }
+        }
+    }
+    return { findings };
+}
 /** Reports adoption signals as numbers; it never changes completeness. */
 export function reportThemeAdoption(sources = []) {
     const normalized = sources.map((entry, index) => typeof entry === 'string'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.34.0",
+  "version": "2.36.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/components/MFAComponent.jsx

@@ -22,7 +22,7 @@ import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetc
 
 export const MFA_ALERT_SX = { mb: 2 };
 export const MFA_CARD_SX = { mb: 3 };
-export const MFA_ACTIVE_CARD_SX = { bgcolor: '#f0fdf4' };
+export const MFA_ACTIVE_CARD_SX = { bgcolor: 'success.bg' };
 export const MFA_TEXT_FIELD_SX = { mb: 2 };
 export const MFA_DIVIDER_SX = { my: 3 };
 export const MFA_RECOVERY_BUTTON_SX = { mt: 2 };
@@ -228,7 +228,7 @@ export function MFAComponent() {
               alignItems="center"
             >
               {/* QR CODE */}
-              <Box sx={{ p: 2, bgcolor: 'white', border: '1px solid #eee' }}>
+              <Box sx={{ p: 2, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider' }}>
                 <QRCodeSVG value={totpData.key_uri} size={150} />
               </Box>
 
@@ -241,7 +241,7 @@ export function MFAComponent() {
                   variant="mono"
                   sx={{
                     fontFamily: 'monospace',
-                    bgcolor: '#eee',
+                    bgcolor: 'background.subtle',
                     p: 1,
                     borderRadius: 1,
                     display: 'inline-block',
@@ -300,7 +300,7 @@ export function MFAComponent() {
           {t('Auth.MFA_RECOVERY_VIEW_BUTTON')}
         </Button>
       ) : (
-        <Box sx={{ bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }}>
+        <Box sx={{ bgcolor: 'background.subtle', p: 2, borderRadius: 1 }}>
           <Alert severity="warning" sx={MFA_ALERT_SX}>
             {t('Auth.MFA_RECOVERY_WARNING')}
           </Alert>
@@ -310,8 +310,9 @@ export function MFAComponent() {
                 <Box
                   key={code}
                   sx={{
-                    bgcolor: 'white',
-                    border: '1px solid #ddd',
+                    bgcolor: 'background.paper',
+                    border: '1px solid',
+                    borderColor: 'divider',
                     p: 1,
                     borderRadius: 1,
                     fontFamily: 'monospace',

package/src/components/SocialLoginButtons.jsx

@@ -34,7 +34,8 @@ export function SocialLoginButtons({ onProviderClick, providers }) {
                 width: 24,
                 height: 24,
                 borderRadius: '50%',
-                border: '1px solid rgba(0,0,0,0.2)',
+                border: '1px solid',
+                borderColor: 'divider',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

package/src/components/charts/ChartFrame.jsx

@@ -9,6 +9,7 @@ import {
   Typography,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { useTheme } from '@mui/material/styles';
 import { exportChartPng, exportChartSvg } from './exportChart';
 
 export const CHART_FRAME_ROOT_SX = { p: 2 };
@@ -39,6 +40,7 @@ export function ChartFrame({
   sx,
 }) {
   const { t } = useTranslation();
+  const theme = useTheme();
   const titleId = useId();
   const chartRef = useRef(null);
   const [exportError, setExportError] = useState(false);
@@ -55,7 +57,11 @@ export function ChartFrame({
       const filename = options.filename || 'chart';
       const result = type === 'svg'
         ? exportChartSvg(chartRef.current, `${filename}.svg`)
-        : await exportChartPng(chartRef.current, `${filename}.png`);
+        : await exportChartPng(
+          chartRef.current,
+          `${filename}.png`,
+          theme.palette.background.paper,
+        );
       const callback = type === 'svg' ? onExportSvg : onExportPng;
       callback?.(result);
     } catch (_error) {

package/src/components/charts/exportChart.js

@@ -29,7 +29,7 @@ export function exportChartSvg(chartContainer, filename = 'chart.svg') {
 }
 
 /** Rasterizes the first SVG rendered inside a chart container at two-times scale and downloads it. */
-export function exportChartPng(chartContainer, filename = 'chart.png') {
+export function exportChartPng(chartContainer, filename = 'chart.png', backgroundColour) {
   const source = svgBlob(chartContainer);
 
   return new Promise((resolve, reject) => {
@@ -45,7 +45,7 @@ export function exportChartPng(chartContainer, filename = 'chart.png') {
         canvas.width = width * 2;
         canvas.height = height * 2;
         const context = canvas.getContext('2d');
-        context.fillStyle = 'white';
+        context.fillStyle = backgroundColour;
         context.fillRect(0, 0, canvas.width, canvas.height);
         context.drawImage(image, 0, 0, canvas.width, canvas.height);
         canvas.toBlob((blob) => {

package/src/i18n/authTranslations.ts

@@ -1667,6 +1667,30 @@ export const authTranslations = {
     "en": "Support",
     "sw": "Usaidizi"
   },
+  "Account.GROUP_MY_ACCOUNT": {
+    "de": "Mein Konto",
+    "fr": "Mon compte",
+    "en": "My account",
+    "sw": "Akaunti yangu"
+  },
+  "Account.GROUP_MANAGEMENT": {
+    "de": "Verwaltung",
+    "fr": "Administration",
+    "en": "Management",
+    "sw": "Usimamizi"
+  },
+  "Account.GROUP_HELP": {
+    "de": "Hilfe",
+    "fr": "Aide",
+    "en": "Help",
+    "sw": "Msaada"
+  },
+  "Account.GROUP_MORE": {
+    "de": "Weitere",
+    "fr": "Autres",
+    "en": "More",
+    "sw": "Zaidi"
+  },
   "Account.ACCESS_CODES_HINT": {
     "de": "Verwalten Sie Zugangscodes für die Selbstregistrierung.",
     "fr": "Gérer les codes d'accès pour l'auto-inscription.",

package/src/i18n/sectionNavTranslations.ts

@@ -0,0 +1,20 @@
+export const sectionNavTranslations = {
+  'SectionNav.TITLE': {
+    de: 'Bereich wechseln',
+    fr: 'Changer de section',
+    en: 'Switch section',
+    sw: 'Badilisha sehemu',
+  },
+  'SectionNav.TRIGGER_EYEBROW': {
+    de: 'Bereich',
+    fr: 'Section',
+    en: 'Section',
+    sw: 'Sehemu',
+  },
+  'SectionNav.LAST_OPENED': {
+    de: 'Zuletzt geöffnet',
+    fr: 'Ouvert en dernier',
+    en: 'Last opened',
+    sw: 'Iliyofunguliwa mwisho',
+  },
+};

package/src/index.js

@@ -7,6 +7,7 @@ export {
   assertKitSxDisjoint,
   calculateContrastRatio,
   KIT_COMPONENT_SX_REGISTRY,
+  reportOffPaletteColours,
   reportKitSxBypasses,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,
@@ -31,6 +32,7 @@ export * from './utils/authService';  // Service-Funktionen (Passkeys, Social)
 
 // --- 3. Layouts ---
 export { NarrowPage, WidePage } from './layout/PageLayout';
+export { SectionNav } from './layout/SectionNav';
 
 // --- 4. Pages (Vollständige Seiten für Routing) ---
 export { LoginPage } from './pages/LoginPage';
@@ -77,6 +79,7 @@ export {
 // --- 7. Translations ---
 export { authTranslations } from './i18n/authTranslations';
 export { userMenuTranslations } from './i18n/userMenuTranslations';
+export { sectionNavTranslations } from './i18n/sectionNavTranslations';
 
 // --- 8. Notifications ---
 export { NotificationSettings } from './notifications/NotificationSettings';