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

package/WORK_ORDERS.md

@@ -59,3 +59,5 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | AUTH-2 | Translate backend auth error codes (stop leaking raw codes) | ucm surfaces raw backend/allauth error **codes**, not text: `apiClient.jsx:107` extracts `err.code`, components do `t(err.code)`/`setErrorKey(err.code)`, but the catalogue has no entries → users see literal `email_password_mismatch` / `password_too_short`. Affects **all** rendering auth screens (login/change-pw/MFA/profile). Fix = add de/fr/en i18n entries **keyed by the enumerated codes** → the existing `t(err.code)` resolves, **zero component/app change**. Does NOT reach the delegating invitation `PasswordSetForm` (that's AUTH-1). Full spec: [work-orders/AUTH-2.md](work-orders/AUTH-2.md). | 2026-08-06 | done | 84387cf, 103a252 | Tier 2 (shared-core). Same Codex→Claude fallback and reviewer pairing as AUTH-1 (one combined diff, both WOs landed together). **Keying decided: raw-code (drop-in)**, per the WO's own stated preference — no operator request for the namespaced `i18nKey` alternative. **Codes enumerated by reading the installed allauth/Django source directly** (not guessed): `email_password_mismatch`/`username_password_mismatch`/`phone_password_mismatch` (`allauth/headless/account/inputs.py` `LoginInput.clean`), `too_many_login_attempts`/`invalid_login`/`account_inactive`/`enter_current_password` (`allauth/account/adapter.py` error_messages + `allauth/headless/account/inputs.py` `ChangePasswordInput.clean_current_password` — confirmed this genuinely means "wrong current password", not merely "field left blank"), `incorrect_code` (`allauth/mfa/**`), `password_too_short`/`password_too_common`/`password_entirely_numeric`/`password_too_similar` (Django `contrib/auth/password_validation.py`, matching dcm's `AUTH_PASSWORD_VALIDATORS` baseline). Added de/fr/en/**sw** (file's established 4-locale convention, honoured over the WO text's literal "de/fr/en"). **`ui_reviewer` + `reviewer`: no AUTH-2-specific findings** (both spot-checked the code spellings independently against the same installed packages; no key collisions with existing `Auth.*` keys; `authErrorCodeRendering.test.jsx` proves a mapped code renders human text via a real i18next instance and a genuinely-uncoded error still falls back to the existing generic `Auth.PASSWORD_CHANGE_FAILED`). Gate: shared with AUTH-1 — full suite 322/322, `tsc` clean. **Published version correction**: see AUTH-1's row — the 2.28.0 tag was skipped by a CI runner backlog and never published; verified present in the npm tarball from **2.28.1** onward (currently 2.29.1). Companion: AUTH-1. |
 | AUTH-3 | SignUpPage showed the access-code-specific success message for every signup mode | Operator-observed live bug 2026-08-07: open self-registration (no access code) showed "Falls der Zugangscode für dieses Projekt gültig ist, wurde ein Einladungslink an X gesendet" — nonsensical when there is no code at all. Root cause: `SignUpPage.jsx`'s `handleSubmit` hardcoded `Auth.INVITE_REQUEST_SUCCESS` for every mode (open/access-code/email-domain/QR) regardless of the backend's actual response. | 2026-08-07 | done | 599e73d, b4e1fe7 | No WO file — operator-reported bug, fixed directly, same convention as MSG-6c/MSG-6d/MSG-6j. Tier 2 (shared-core). **Codex → Claude fallback**: one fresh probe made today (new day, prior confirmation was 2026-08-06) — still "workspace out of credits", stamped in `project_codex_quota_status` memory — implemented directly, author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit. **Root cause confirmed against the actual backend** (`django-core-micha` `register_request` view + `validate_access_code_or_error`): every signup mode's success response already carries a mode-agnostic, accurate `code: "Auth.INVITE_SENT"`; an invalid access code is never silently accepted, it raises a distinct 400 (`Auth.ACCESS_CODE_INVALID_OR_INACTIVE`) — so the old key's "if valid…" ambiguity never matched backend reality for any mode, not just the ones reported. Fix: `setSuccessKey(res?.code || 'Auth.INVITE_SENT')`, using the backend's own code; no component/app change beyond this. **Both reviewers independently flagged the same P3**: switching away from the old key silently dropped the `{{email}}` confirmation (`Auth.INVITE_SENT` had none). Fixed before commit — extended `Auth.INVITE_SENT`'s text to include `{{email}}` in all 4 locales (safe: it had exactly one consumer, this call site, confirmed by grep). `Auth.INVITE_REQUEST_SUCCESS` is now dead/orphaned (both reviewers flagged as P3, tracked here, not removed — out of this fix's scope). Gate: `tests/SignUpPage.test.jsx` 13/13 (3 new, proving the backend code wins over the old hardcoded key, and the no-code fallback); full suite 342/342, `tsc` clean. |
 | SHELL-2 | AccountPage: from a horizontal tab strip to a grouped sidebar + mobile drawer | Measured live at 375 px on 2026-08-08 (running cockpit, host header neutralised so the numbers describe ucm alone): `AccountPage` does **not** break the layout -- all six sections render at document width 375. What fails is discoverability and the users table. The tab strip scroller is 343 px visible against 589 px of content with `overflow-x: auto`, 246 px of travel, and **`scrollButtons: 0`** -- Support and any consumer-injected section sit off screen with no arrow, no fade, no hint they exist (they do respond to a horizontal swipe, so this is a discoverability failure, not a reachability one -- unlike cockpit's own header tabs, which are `width: 0px` + `overflow: hidden` and genuinely unreachable). The users table renders 1045 px inside a 341 px `MuiTableContainer`; one third is visible and the `Aktionen` column sits ~700 px to the right. Adopts jg-ferien's `EventInfoPage` pattern (`SectionSwitcher.jsx`, driven from `EventInfoPage.jsx:1126-1159`) in **both** halves -- sticky grouped 280 px sidebar at `md`+, bottom drawer below `md` -- plus an in-page trigger bar, which the reference does not supply because jg's trigger lives in that app's own page header and `AccountPage` has none. | 2026-08-08 | blocked | | **Held back 2026-08-08 — reshaped into DS-11** (see `webapp-management/DESIGN_SYSTEM_PROGRAM.md`): do NOT implement this WO as written; the Envelope will be revised (open: keep the SHELL-2 ID or mint a new SHELL-* ID). Known corrections for the revision: publishing is version-gated, not per-push (this row's "publishes immediately" is imprecise), and the grouped-shell part becomes an inheritable ucm component with `AccountPage` as first consumer. Envelope: [work-orders/SHELL-2.md](work-orders/SHELL-2.md). Prototype: [work-orders/assets/SHELL-2-account-navigation.html](work-orders/assets/SHELL-2-account-navigation.html). Tier 2 (shared core) -- independent `reviewer` (Sonnet, full) **and** `ui_reviewer` concurrently, both mandatory before commit. **Operator decisions, settled 2026-08-08 and not to be renegotiated by implementer or reviewer:** both halves of the pattern, so the horizontal tab strip disappears **on desktop too** (asked explicitly, chosen deliberately, in full knowledge that 14 consumers inherit the desktop change on their next pin bump); fixed groups `Mein Konto` / `Verwaltung` / `Hilfe` / `Weitere`, with `extraTabs` gaining an **optional** `group` field, additive and backward compatible; no standalone "Uebersicht" entry above the groups (jg-ferien has one, `AccountPage` has no overview screen for it to point at, so none is invented); users table becomes a card list below `md` and stays a table at `md`+; the mobile trigger bar is the **sole** carrier of the current section name, so the section heading below it is **removed**, not merely undrawn -- desktop keeps its heading because it has no trigger bar. **Two contracts that must survive and are currently untested:** the `?tab=` URL contract incl. fallback to `profile` on an unknown *or* unpermitted value (`AccountPage.jsx:60`, `:180-186`) -- cockpit's `/user-management`, `/profile` and `/change-password` redirects all hang off it -- and the full `extraTabs` shape (`:146-155`), whose `label` may be a **function** and which supports `visible(context)`. `AccountPage` and `UserListComponent` have **zero tests today** (none of the 20 files under `tests/` touches either), so both test files are new, not extensions. **No staging net:** this repo has no `develop`; a push to `main` touching `src/**` or `package.json` publishes to npm immediately via `publish.yml`, so the independent review is the only gate and is not back-fillable. Version target `2.30.0` (minor -- `extraTabs` gains a public field; additive API is a minor under semver). Explicit non-goals: pagination/filtering for the user list, the sections' internal content, the six auth pages (measured clean at 375 px), and **cockpit's header** -- that toolbar is what inflates the document to 498 px on every route including `/account`, and it is a separate WO in the cockpit repo, sequenced after this one at the operator's choice. Carried-over trap from the reference: jg-ferien uses `env(safe-area-inset-bottom)` while its `index.html` omits `viewport-fit=cover`, so those insets resolve to zero there -- copy the padding, do not assume it does anything. |
+| SHELL-3 | Promote the mobile bottom navigation into the shared kit | Promotes jg-ferien's `MobileBottomNav` into ucm, shaped from **two** real cases (jg's existing bar + cockpit's destinations) as DS-6 required rather than from jg alone. Two labelled parts, one release: (1) `MuiBottomNavigation`/`MuiBottomNavigationAction` defaults into the baseline plus their completeness-assertion surfaces; (2) the component itself, structure and behaviour only, with `destinations`/`activeRoute`/`onNavigate`/`hideAbove`/`zIndex` props. Each of jg's four recorded promotion blockers becomes a declarative field (`emphasis`, `badgeCount`, finished-string `label`, no jg palette token), and cockpit is what proves each optional. Full spec: [work-orders/SHELL-3.md](work-orders/SHELL-3.md). | 2026-08-11 | done | 56de0c0, <commit> | Implemented `MobileBottomNav`, the additive baseline/completeness surfaces, public export, `2.33.0` version bump, and a five-item/two-badge harness specimen. **Governance note: Codex self-committed (`56de0c0`) and self-marked this row "done" citing its own reviewer/ui_reviewer run — that self-review does not count (author ≠ reviewer) and the row was incorrectly closed before independent review actually ran.** Corrected here: the Orchestrator independently re-ran the scoped tests (22/22 green) and `tsc` (clean), then spawned genuinely independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) concurrently against the real diff. **`ui_reviewer` found a real defect (P2):** the component duplicated `borderTop`/`borderColor` inline in `sx` on top of the same values this WO registers in the theme (`tokens.js`/`createAppTheme.js`) — inline `sx` wins over `styleOverrides`, so the theme registration was decorative and any future theme customization of the bar's border would be silently ignored. Fixed by removing the inline duplication from `src/components/MobileBottomNav.jsx`; re-verified 22/22 green, `tsc` clean. **`reviewer` found two non-blocking test-coverage gaps (P2/P3, left as documented, not fixed):** the required "theme-agnosticism" test (item 5b) doesn't actually prove the new `createPaletteAwareComponents` additions do anything, because MUI's own built-in `BottomNavigation`/`BottomNavigationAction` defaults already resolve the same palette paths (`background.paper`/`text.secondary`/`primary.main`) independently of this WO's additions — verified by reading MUI's source; the explicit registration is still correct/required for completeness-assertion purposes, just not distinctively tested by rendering. The `emphasis` treatment's computed colours (raised icon, `background.paper` vs jg's `background.white`) have no dedicated assertion. **Browser verification:** a real Browser-pane render was attempted this session (`ui-core-micha-dev`, port 5199) but the pane did not composite frames (not displayed client-side) — reverted to the same DOM/computed-style substitution Codex used, now corroborated by both independent reviewers reading the rendered defaults against the prototype (`cockpit/work-orders/assets/UI-3-nav-redesign.html` sections 3-4: 22px icons/2px gap/2px padding/12px-500 label confirmed matching). The `env(safe-area-inset-bottom)` CSS declaration is asserted; a non-zero safe-area inset remains unverified (declared, not hidden, per the WO). Precondition of `cockpit/UI-3` and `jg-ferien/NAV-36`. |
+| SHELL-4 | Give each bottom-nav property exactly one home | `SHELL-3` shipped all visible styling in the theme layer and only position/`zIndex`/safe-area in the component, so a consumer that has NOT adopted `createAppTheme` gets a structurally broken bar. Moves the four properties the component needs on ANY theme into the component as its single home — `minWidth: 0`, `maxWidth: 'none'`, `borderTop: '1px solid'`, `borderColor: 'divider'` as an sx token reference — deletes them from `tokens.js`/`createAppTheme.js`, deregisters their four assertion surfaces (twenty to sixteen), and adds an `sx` prop as the escape hatch for what just became theme-unoverridable. Full spec: [work-orders/SHELL-4.md](work-orders/SHELL-4.md). | 2026-08-11 | done | this commit | Implemented the four-property layer move, narrowed completeness inventory, `sx` escape hatch, dual-theme harness specimen, and `2.33.1` patch bump. **Independent `reviewer` + `ui_reviewer` ran concurrently before commit.** `ui_reviewer`: NO FINDINGS. `reviewer` found one P2: object-spreading `sx` dropped standard MUI callback/array forms; fixed by flattening the caller value after the component defaults in an MUI `sx` array, with regression coverage for object, callback, and array precedence. Re-verified: 30/30 scoped tests green; `tsc -p tsconfig.build.json --noEmit` clean. **Rendered verification substitution:** no in-app or external browser instance was attached, so real 375px/1280px screenshots could not be obtained. Per the WO fallback, DOM/computed-style inspection under plain `createTheme()` at 375px with five actions confirmed `border-top-width: 1px`, `min-width: 0px`, `max-width: none`, and `flex-grow: 1`; the dual-theme harness specimen remains available for a later real-browser comparison. **Precondition of `jg-ferien/NAV-36`, which is `blocked` on it.** Root cause retained: `SHELL-3`'s `ui_reviewer` correctly found the component shadowing its own new theme defaults, and the fix (`586ac9c`) resolved the duplication by deleting the wrong copy — the defect was the duplication, not the location. The component/theme key-intersection test now mechanically guards that regression class, and a deregistered-surface exemption is asserted to remain harmless. |

package/dev/entries.jsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react';
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
+import InboxIcon from '@mui/icons-material/Inbox';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import ScheduleIcon from '@mui/icons-material/Schedule';
+import ViewKanbanIcon from '@mui/icons-material/ViewKanban';
 import {
   Alert,
   Box,
@@ -26,8 +31,10 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 import { AuthContext } from '../src/auth/AuthContext';
+import { MobileBottomNav } from '../src/components/MobileBottomNav';
 import { BarChart } from '../src/components/charts/BarChart';
 import { ChartFrame } from '../src/components/charts/ChartFrame';
 import { LineChart } from '../src/components/charts/LineChart';
@@ -60,6 +67,54 @@ function NotificationBellEntry() {
   );
 }
 
+const MOBILE_NAV_DESTINATIONS = [
+  { route: '/triage', label: 'Triage', icon: InboxIcon, badgeCount: 7 },
+  { route: '/board', label: 'Board', icon: ViewKanbanIcon, badgeCount: 3 },
+  { route: '/chat', label: 'Chat', icon: ChatBubbleOutlineIcon },
+  { route: '/status', label: 'Status', icon: ScheduleIcon },
+  { route: '/more', label: 'Mehr', icon: MoreHorizIcon, emphasis: true },
+];
+
+const PLAIN_MOBILE_NAV_THEME = createTheme();
+
+function MobileBottomNavEntry() {
+  const [activeRoute, setActiveRoute] = useState('/triage');
+
+  return (
+    <Box sx={{ minHeight: 180 }}>
+      <Typography variant="h6">Mobile bottom navigation</Typography>
+      <Typography color="text.secondary">
+        The baseline and plain-MUI variants use the same five destinations. Both keep their edge
+        and evenly divided actions; their label and icon density may differ.
+      </Typography>
+      <Stack direction={{ xs: 'column', lg: 'row' }} spacing={2} sx={{ mt: 2 }}>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="subtitle2">createAppTheme baseline</Typography>
+          <MobileBottomNav
+            destinations={MOBILE_NAV_DESTINATIONS}
+            activeRoute={activeRoute}
+            onNavigate={setActiveRoute}
+            hideAbove="xl"
+            sx={{ position: 'relative', width: '100%', mt: 1 }}
+          />
+        </Box>
+        <ThemeProvider theme={PLAIN_MOBILE_NAV_THEME}>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography variant="subtitle2">Plain createTheme</Typography>
+            <MobileBottomNav
+              destinations={MOBILE_NAV_DESTINATIONS}
+              activeRoute={activeRoute}
+              onNavigate={setActiveRoute}
+              hideAbove="xl"
+              sx={{ position: 'relative', width: '100%', mt: 1 }}
+            />
+          </Box>
+        </ThemeProvider>
+      </Stack>
+    </Box>
+  );
+}
+
 function BarChartEntry() {
   return (
     <ChartFrame title="Monthly cases" subtitle="Standalone BarChart entry" minHeight={360}>
@@ -403,6 +458,7 @@ function MessagingScopeConfigEntry() { return <MessagingProvider api={messagingH
 
 export const entries = [
   { id: 'theme-baseline', label: 'Theme / Shared baseline', Component: ThemeBaselineEntry },
+  { id: 'mobile-bottom-nav', label: 'Navigation / Mobile bottom nav', Component: MobileBottomNavEntry },
   { id: 'notification-bell', label: 'Notifications / Bell', Component: NotificationBellEntry },
   { id: 'bar-chart', label: 'Charts / BarChart', Component: BarChartEntry },
   { id: 'time-series-chart', label: 'Charts / TimeSeriesChart', Component: TimeSeriesChartEntry },

package/dev/main.jsx

@@ -30,12 +30,14 @@ function Harness() {
   const [mode, setMode] = useState('light');
   const [width, setWidth] = useState('desktop');
   const entry = entries.find((item) => item.id === entryId) || entries[0];
-  const effectiveMode = entry.id === 'theme-baseline' ? 'light' : mode;
+  const usesBaselineTheme = ['theme-baseline', 'mobile-bottom-nav'].includes(entry.id);
+  const usesBrowserViewport = entry.id === 'mobile-bottom-nav';
+  const effectiveMode = usesBaselineTheme ? 'light' : mode;
   const theme = useMemo(
-    () => entry.id === 'theme-baseline'
+    () => usesBaselineTheme
       ? createAppTheme({ palette: { primary: { main: '#3D5A99' } } })
       : createTheme({ palette: { mode } }),
-    [entry.id, mode],
+    [mode, usesBaselineTheme],
   );
   const viewportWidth = width === 'mobile' ? 390 : width === 'tablet' ? 768 : 1180;
   const Entry = entry.Component;
@@ -47,8 +49,12 @@ function Harness() {
         <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ mb: 3 }} alignItems={{ md: 'center' }}>
           <Typography variant="h5" sx={{ mr: 'auto' }}>ui-core-micha harness</Typography>
           <FormControl size="small" sx={{ minWidth: 220 }}><InputLabel id="entry-label">Entry</InputLabel><Select labelId="entry-label" label="Entry" value={entryId} onChange={(event) => setEntryId(event.target.value)}>{entries.map((item) => <MenuItem key={item.id} value={item.id}>{item.label}</MenuItem>)}</Select></FormControl>
-          <ButtonGroup size="small"><Button variant={effectiveMode === 'light' ? 'contained' : 'outlined'} onClick={() => setMode('light')}>Light</Button><Button disabled={entry.id === 'theme-baseline'} variant={effectiveMode === 'dark' ? 'contained' : 'outlined'} onClick={() => setMode('dark')}>Dark</Button></ButtonGroup>
-          <ButtonGroup size="small">{['mobile', 'tablet', 'desktop'].map((size) => <Button key={size} variant={width === size ? 'contained' : 'outlined'} onClick={() => setWidth(size)}>{size}</Button>)}</ButtonGroup>
+          <ButtonGroup size="small"><Button variant={effectiveMode === 'light' ? 'contained' : 'outlined'} onClick={() => setMode('light')}>Light</Button><Button disabled={usesBaselineTheme} variant={effectiveMode === 'dark' ? 'contained' : 'outlined'} onClick={() => setMode('dark')}>Dark</Button></ButtonGroup>
+          {usesBrowserViewport ? (
+            <Typography variant="caption" color="text.secondary">Use the browser viewport for this specimen</Typography>
+          ) : (
+            <ButtonGroup size="small">{['mobile', 'tablet', 'desktop'].map((size) => <Button key={size} variant={width === size ? 'contained' : 'outlined'} onClick={() => setWidth(size)}>{size}</Button>)}</ButtonGroup>
+          )}
         </Stack>
         <Paper variant="outlined" sx={{ width: viewportWidth, maxWidth: '100%', mx: 'auto', p: 3, overflow: 'hidden', containerType: 'inline-size' }}>
           <Entry />

package/dist/components/MobileBottomNav.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Badge from '@mui/material/Badge';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+const defaultZIndex = (theme) => theme.zIndex.drawer + 2;
+export const MOBILE_BOTTOM_NAV_ROOT_SX = {
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTop: '1px solid',
+    borderColor: 'divider',
+    paddingBottom: 'env(safe-area-inset-bottom)',
+};
+export const MOBILE_BOTTOM_NAV_ACTION_SX = {
+    minWidth: 0,
+    maxWidth: 'none',
+};
+export function MobileBottomNav({ destinations, activeRoute, onNavigate, hideAbove = 'md', zIndex = defaultZIndex, sx = {}, }) {
+    const theme = useTheme();
+    const isHidden = useMediaQuery(theme.breakpoints.up(hideAbove));
+    const callerSx = Array.isArray(sx) ? sx : [sx];
+    if (isHidden)
+        return null;
+    return (_jsx(BottomNavigation, { value: activeRoute, onChange: (_, route) => onNavigate(route), showLabels: true, sx: [
+            Object.assign(Object.assign({}, MOBILE_BOTTOM_NAV_ROOT_SX), { zIndex }),
+            ...callerSx,
+        ], children: destinations.map((destination) => {
+            var _a;
+            const Icon = destination.icon;
+            const selected = activeRoute === destination.route;
+            const icon = (_jsx(Icon, { sx: destination.emphasis ? {
+                    p: 0.8,
+                    borderRadius: '50%',
+                    backgroundColor: selected ? 'primary.main' : 'background.paper',
+                    color: selected ? 'primary.contrastText' : 'primary.main',
+                    boxShadow: 'none',
+                    transform: 'translateY(-4px)',
+                } : undefined }));
+            return (_jsx(BottomNavigationAction, { value: destination.route, label: (_a = destination.shortLabel) !== null && _a !== void 0 ? _a : destination.label, "aria-label": destination.shortLabel != null ? destination.label : undefined, "aria-current": selected ? 'page' : undefined, sx: MOBILE_BOTTOM_NAV_ACTION_SX, icon: destination.badgeCount ? (_jsx(Badge, { badgeContent: destination.badgeCount, color: "error", max: 99, children: icon })) : icon }, destination.route));
+        }) }));
+}

package/dist/index.js

@@ -30,6 +30,7 @@ export { RegistrationMethodsManager } from './components/RegistrationMethodsMana
 export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCard';
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
+export { MobileBottomNav } from './components/MobileBottomNav';
 // --- 6. Charts ---
 export { ChartFrame } from './components/charts/ChartFrame';
 export { BarChart } from './components/charts/BarChart';

package/dist/theme/createAppTheme.js

@@ -100,6 +100,21 @@ function createPaletteAwareComponents(palette) {
                 outlined: { borderColor: palette.controlBorder.main },
             },
         },
+        MuiBottomNavigation: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: palette.background.paper,
+                },
+            },
+        },
+        MuiBottomNavigationAction: {
+            styleOverrides: {
+                root: {
+                    color: palette.text.secondary,
+                    '&.Mui-selected': { color: palette.primary.main },
+                },
+            },
+        },
         MuiOutlinedInput: {
             styleOverrides: {
                 root: {

package/dist/theme/themeCompleteness.js

@@ -72,6 +72,22 @@ const COMPONENT_SURFACES = [
         var _a, _b, _c, _d, _e, _f;
         return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset;
     }),
+    componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
+    componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.gap'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'width'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'height'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.color'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontSize'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontWeight'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.lineHeight'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.maxWidth'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.whiteSpace'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.overflow'),
+    componentPath('MuiBottomNavigationAction', 'styleOverrides.label.textOverflow'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.label', '&.Mui-selected', 'fontSize'),
+    componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '&.Mui-selected', 'color'),
     componentPath('MuiTextField', 'defaultProps.variant'),
     componentPath('MuiTextField', 'styleOverrides.root.minHeight'),
     componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),

package/dist/theme/tokens.js

@@ -260,6 +260,30 @@ export const BASELINE_STATIC = {
                 },
             },
         },
+        MuiBottomNavigation: {
+            styleOverrides: {
+                root: { boxShadow: 'none' },
+            },
+        },
+        MuiBottomNavigationAction: {
+            styleOverrides: {
+                root: {
+                    padding: '0 2px',
+                    gap: '2px',
+                    '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
+                },
+                label: {
+                    fontSize: '12px',
+                    fontWeight: 500,
+                    lineHeight: 1.2,
+                    maxWidth: '100%',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    '&.Mui-selected': { fontSize: '12px' },
+                },
+            },
+        },
         MuiTextField: {
             defaultProps: { variant: 'outlined' },
             styleOverrides: { root: Object.assign({ minHeight: 40 }, coarseHitArea) },

package/package.json

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

package/src/components/MobileBottomNav.jsx

@@ -0,0 +1,82 @@
+import Badge from '@mui/material/Badge';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+
+const defaultZIndex = (theme) => theme.zIndex.drawer + 2;
+
+export const MOBILE_BOTTOM_NAV_ROOT_SX = {
+  position: 'fixed',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderTop: '1px solid',
+  borderColor: 'divider',
+  paddingBottom: 'env(safe-area-inset-bottom)',
+};
+
+export const MOBILE_BOTTOM_NAV_ACTION_SX = {
+  minWidth: 0,
+  maxWidth: 'none',
+};
+
+export function MobileBottomNav({
+  destinations,
+  activeRoute,
+  onNavigate,
+  hideAbove = 'md',
+  zIndex = defaultZIndex,
+  sx = {},
+}) {
+  const theme = useTheme();
+  const isHidden = useMediaQuery(theme.breakpoints.up(hideAbove));
+  const callerSx = Array.isArray(sx) ? sx : [sx];
+
+  if (isHidden) return null;
+
+  return (
+    <BottomNavigation
+      value={activeRoute}
+      onChange={(_, route) => onNavigate(route)}
+      showLabels
+      sx={[
+        { ...MOBILE_BOTTOM_NAV_ROOT_SX, zIndex },
+        ...callerSx,
+      ]}
+    >
+      {destinations.map((destination) => {
+        const Icon = destination.icon;
+        const selected = activeRoute === destination.route;
+        const icon = (
+          <Icon
+            sx={destination.emphasis ? {
+              p: 0.8,
+              borderRadius: '50%',
+              backgroundColor: selected ? 'primary.main' : 'background.paper',
+              color: selected ? 'primary.contrastText' : 'primary.main',
+              boxShadow: 'none',
+              transform: 'translateY(-4px)',
+            } : undefined}
+          />
+        );
+
+        return (
+          <BottomNavigationAction
+            key={destination.route}
+            value={destination.route}
+            label={destination.shortLabel ?? destination.label}
+            aria-label={destination.shortLabel != null ? destination.label : undefined}
+            aria-current={selected ? 'page' : undefined}
+            sx={MOBILE_BOTTOM_NAV_ACTION_SX}
+            icon={destination.badgeCount ? (
+              <Badge badgeContent={destination.badgeCount} color="error" max={99}>
+                {icon}
+              </Badge>
+            ) : icon}
+          />
+        );
+      })}
+    </BottomNavigation>
+  );
+}

package/src/index.js

@@ -48,6 +48,7 @@ export { RegistrationMethodsManager } from './components/RegistrationMethodsMana
 export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCard';
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
+export { MobileBottomNav } from './components/MobileBottomNav';
 
 // --- 6. Charts ---
 export { ChartFrame } from './components/charts/ChartFrame';

package/src/theme/createAppTheme.js

@@ -116,6 +116,21 @@ function createPaletteAwareComponents(palette) {
         outlined: { borderColor: palette.controlBorder.main },
       },
     },
+    MuiBottomNavigation: {
+      styleOverrides: {
+        root: {
+          backgroundColor: palette.background.paper,
+        },
+      },
+    },
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          color: palette.text.secondary,
+          '&.Mui-selected': { color: palette.primary.main },
+        },
+      },
+    },
     MuiOutlinedInput: {
       styleOverrides: {
         root: {

package/src/theme/themeCompleteness.js

@@ -96,6 +96,22 @@ const COMPONENT_SURFACES = [
     (theme) => theme.components?.MuiChip?.styleOverrides?.root
       ?.['@media (any-pointer: coarse)']?.['&::after']?.inset,
   ),
+  componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
+  componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.gap'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'width'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'height'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.color'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontSize'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.fontWeight'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.lineHeight'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.maxWidth'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.whiteSpace'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.overflow'),
+  componentPath('MuiBottomNavigationAction', 'styleOverrides.label.textOverflow'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.label', '&.Mui-selected', 'fontSize'),
+  componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '&.Mui-selected', 'color'),
   componentPath('MuiTextField', 'defaultProps.variant'),
   componentPath('MuiTextField', 'styleOverrides.root.minHeight'),
   componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),

package/src/theme/tokens.js

@@ -306,6 +306,30 @@ export const BASELINE_STATIC = {
         },
       },
     },
+    MuiBottomNavigation: {
+      styleOverrides: {
+        root: { boxShadow: 'none' },
+      },
+    },
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          padding: '0 2px',
+          gap: '2px',
+          '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
+        },
+        label: {
+          fontSize: '12px',
+          fontWeight: 500,
+          lineHeight: 1.2,
+          maxWidth: '100%',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          '&.Mui-selected': { fontSize: '12px' },
+        },
+      },
+    },
     MuiTextField: {
       defaultProps: { variant: 'outlined' },
       styleOverrides: { root: { minHeight: 40, ...coarseHitArea } },