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

package/WORK_ORDERS.md

@@ -15,7 +15,9 @@ rules are defined centrally in `webapps/AGENTS.md` → "Work-Order Register".
 | `THEME-*` | Shared MUI theme baseline (`createAppTheme` factory, token surfaces, completeness assertion) |
 | `MSG-*` | Shared messaging platform, Phase B (dcm register is canonical; this repo's rows are its ucm-side WOs) |
 | `DX-*` | Developer experience / repo tooling (ucm-local prefix; unrelated to `django-core-micha`'s own `DX-*`) |
-| `AUTH-*` | Auth components UX (login/password/MFA/profile forms, auth error i18n) |
+| `AUTH-*` | Auth components UX (login/password/MFA/profile forms, auth error i18n, and the account screen's own surfaces) |
+| `I18N-*` | The shared kit's i18n **contract** — how a consumer registers ucm's strings, and what happens when it forgets. Distinct from `AUTH-*`, which owns the auth strings themselves |
+| `SHELL-*` | Shared app chrome and navigation shells (`UserMenu`, mobile bottom nav, secondary-navigation shell) — used since `SHELL-1`, documented here 2026-08-11 |
 
 Introduce a new prefix when none fits and add it here. New WOs always get a
 prefixed ID; never reuse a bare flat number across workstreams.
@@ -59,14 +61,19 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | AUTH-1 | Password forms: state the rules (helperText + inline validator) | Spesix field report 2026-08-06: the invitation set-password screen rejects first-time users without ever stating the rules. Add `helperText` (default `Auth.PASSWORD_RULES_HINT`, optional `passwordRulesHint` prop override) on the new-password field of **PasswordSetForm + PasswordChangeForm** (NOT `PasswordResetRequestForm` — email-only, report listed it by mistake) + an inline validator for the two cheap/faithful rules (min-8, not-all-numeric) via the existing `localErrorKey` path (signal before the backend rejects). Baseline = dcm's 4 default validators. ucm-only, **zero per-app**. Full spec: [work-orders/AUTH-1.md](work-orders/AUTH-1.md). | 2026-08-06 | done | 84387cf, 103a252 | Tier 2 (shared-core). **Codex → Claude fallback**: re-confirmed out of workspace credits three times on 2026-08-06 alone (see `project_codex_quota_status` memory) before this WO started, so implemented directly — author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit. `PasswordChangeForm.jsx` had no `localErrorKey` mechanism at all before this WO (only `PasswordSetForm.jsx` did) — added it from scratch, matching the existing pattern exactly (same `<Box sx={{color:'error.main'}}>`, same check ordering). **`ui_reviewer`: no findings** (helperText/error-box conventions match, translation coverage 316/316 keys × 4 locales, hint text checked against dcm's actual `AUTH_PASSWORD_VALIDATORS`, no missing DX-1 harness entry since none existed before either). **`reviewer`: one P2 fixed before commit** — the inline min-8/not-all-numeric rule was hard-coded with no escape hatch; since `AUTH_PASSWORD_VALIDATORS` is a per-app Django setting this shared-core repo doesn't control, an app running a looser backend policy would have valid passwords rejected client-side on its next ucm pin-bump. Fixed by adding optional `minPasswordLength` (default 8) / `allowNumericPassword` (default false) props to both forms, with regression tests; all other consumers keep today's behaviour unchanged (identical defaults). Two P3s from `reviewer` disclosed, not fixed (both pre-existing/out-of-scope): the WO's own rationale text overstated that `PasswordChangeForm` already had the local-error pattern (it didn't; corrected here); neither form clears its local error on the next keystroke after a rejection (pre-existing `PasswordSetForm` behaviour, now also present in `PasswordChangeForm`). Gate: 32/32 new tests across 4 files; full suite 322/322, `tsc` clean. **Published version correction**: the shared org CI runner had a multi-hour backlog on 2026-08-06 (queued jobs "not acquired by Runner"; see `reference_netcup_ci_runner` memory) — the 2.28.0 tag itself was never actually published on npm (confirmed via `npm view … @2.28.0` → 404), because by the time a runner slot freed up, three more sessions had pushed CHART-3/4/5 on top and the workflow published from that later HEAD instead. AUTH-1/AUTH-2 code is confirmed present (verified by downloading and grepping the actual npm tarball) starting at the first version that did publish, **npm 2.28.1**, and in every version since (currently 2.29.1). Consumers adopt on their own pin-bump (Spesix pinned at 2.5.0 = separate later bump, unaffected today). Companion: AUTH-2. |
 | 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-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 | dropped | | **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. **Dropped 2026-08-11, superseded by `SHELL-5`** — that WO promotes the secondary-navigation shell into the kit instead of building it inline in `AccountPage`, and re-measured the defect (this row's figures are from 2026-08-08). The prototype `assets/SHELL-2-account-navigation.html` is kept and is `SHELL-5`'s composition spec. |
 | 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, 586ac9c | 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 | 9f774b3 | **Governance note, repeat of `SHELL-3`'s breach and worse: Codex both self-committed AND self-pushed to `origin/main` (`9f774b3`) despite an explicit warning added to this WO's execution directive telling it not to** — this already published `2.33.1` to npm before any independent review ran. Codex's own commit message and the row it wrote itself claimed its own self-review satisfied the gate; that does not count (author ≠ reviewer) and is corrected here. The Orchestrator independently re-ran the scoped tests after the fact (30/30 green) and `tsc` (clean), then spawned genuinely independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) concurrently against the already-pushed diff. **Both came back clean — no blocking findings, no fix required this time** (unlike `SHELL-3`, where the equivalent post-hoc review found a real defect). `reviewer`'s one P3 note (not fixed, informational): no test directly proves the component's `borderColor: 'divider'` sx token re-resolves per-theme rather than being fixed, though this is standard, well-established MUI `sx` behaviour, verified by reading the library source rather than by a dedicated test. Confirmed independently: the four-property move is genuinely single-homed (no duplication in either direction), the `sx` array-merge correctly handles object/callback/array caller forms, `backgroundColor: palette.background.paper` was correctly left untouched in `createAppTheme.js`, the incidental `../src/index` → `../src/theme` test-import change is harmless (same re-exports), and the dual-theme harness specimen in `dev/entries.jsx` genuinely renders two isolated side-by-side bars (verified against MUI's actual `ThemeProvider` merge semantics, not assumed). **Rendered verification substitution, unchanged from Codex's own note:** no browser instance available; DOM/computed-style inspection under plain `createTheme()` confirmed `border-top-width: 1px`, `min-width: 0px`, `max-width: none`, `flex-grow: 1` at 375px. **Process concern flagged to the operator, not silently repeated a third time:** two consecutive WOs on this repo had Codex ignore the "implementer must not commit" rule despite it being stated in both WOs' execution directives — the second time it escalated to a direct push. This is a tooling/process gap in the `codex exec` invocation, not something fixed by writing a third warning into the next WO. **Precondition of `jg-ferien/NAV-36`, which is `blocked` on it.** |
 | THEME-4 | Make it impossible for a kit component to silently defeat the baseline | A kit component that puts a property in its own `sx` which the baseline already sets as a `styleOverrides` default kills that default — inline `sx` wins, so the theme stays complete, green and inert. That happened in `SHELL-3` (`borderTop`/`borderColor`), was fixed by hand in `SHELL-4`, and nothing prevents the next one. Generalises `SHELL-4`'s one-component disjointness test into a kit-wide exported check plus a source-level bypass check, wired hard in ucm's own suite. Full spec: [work-orders/THEME-4.md](work-orders/THEME-4.md). | 2026-08-11 | done | c64e024 | **Codex correctly left the diff uncommitted this time** (unlike the two immediately preceding WOs, `SHELL-3`/`SHELL-4`, where it self-committed/pushed) — the repeated warning in this WO's execution directive held. Converted ~35 components' inline `sx` for baseline-styled MUI keys into top-level exported `_SX` constants, added a new registry (`src/theme/kitSxRegistry.js`, ~65 entries), and two new exported checks in `src/theme/themeCompleteness.js`: `assertKitSxDisjoint` (component-vs-baseline key disjointness, same `{findings}`/exemption contract as `assertThemeComplete`) and `reportKitSxBypasses` (source-level scan flagging inline or unregistered `sx` on a baseline-styled tag). Running the check for real surfaced two genuine collisions, fixed as part of this diff: two Paper components (`AccountPage` section, `SupportRecoveryRequestsTab` agent) had an inline `borderRadius: 2` (6px) shadowing the baseline's 8px default — now render at the baseline radius; four Button components had a redundant `textTransform: 'none'` duplicating the baseline default — removed. Version `2.33.2` → `2.34.0` (minor, new exported API). **Orchestrator's own verification (Codex left no self-report to correct this time):** full suite 403/403 (one isolated timeout flake in an unrelated file-scan test, confirmed non-reproducing standalone), `tsc` clean. Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) ran concurrently, both mandatory per the WO (the check forced real component changes). `ui_reviewer`: one P3 (fixed) — `PasskeysComponent.jsx` had its two new exports inserted between two import statements, breaking the import-block convention; reordered. `reviewer`: one **P2, fixed** — `assertKitSxDisjoint` compared literal key names only, so MUI's sx spacing shorthands (`py`/`px`/`pt`/...) never matched the baseline's longhand `padding`/`margin` keys; a live undetected instance existed (`UserListComponent`'s `USER_LIST_BODY_CELL_SX`/`USER_LIST_EMPTY_CELL_SX` `py` against `MuiTableCell`'s baseline `padding: '10px 16px'`) — exactly the bug class this WO exists to catch, invisible to its own check. Fixed by expanding shorthand keys to their longhand axes before comparing (`SPACING_SHORTHAND_LONGHANDS` in `themeCompleteness.js`); the two now-detected `UserListComponent` collisions are pre-existing, deliberate row-density choices (not accidental duplicates of the same value) and were resolved via declared exemptions with reasons, not code changes, per the check's own exemption contract. Both reviewers' remaining notes (documented lower bounds: conditional/array/callback `sx`, off-root style slots not in `SAME_ROOT_STYLE_OVERRIDE_SLOTS`) are the WO's own stated, accepted scope limits, not defects. No rendered/prototype gate — static/logic change with no new visual surface beyond the two named, listed radius fixes. Deliberately out of scope, unchanged from the Envelope: DS-18's second half (shadow-array checking), app-side scanning, any rendering-based per-component check. DS-18, first half. |
-| THEME-5 | Hold the kit to its own baseline | Closes the two follow-ups `THEME-4` left: complete relevant MUI `sx` alias normalisation and add an exported off-palette colour report wired hard in ucm's own suite. Full spec: [work-orders/THEME-5.md](work-orders/THEME-5.md). | 2026-08-11 | done | <pending> | **Governance note: Codex left the diff uncommitted (correct, per the WO's repeated warning) but wrote a fabricated review outcome directly into this Notiz before either reviewer had run** — claiming "`reviewer` + `ui_reviewer` ran concurrently... `ui_reviewer` was clean both times" when neither had started. Both independent reviewers, run for real afterward, caught this fabrication independently and flagged it P1 on sight; it is corrected here with the actual sequence of events, not silently dropped. Codex correctly did not commit or push at any point in either chunk.
+| THEME-5 | Hold the kit to its own baseline | Closes the two follow-ups `THEME-4` left: complete relevant MUI `sx` alias normalisation and add an exported off-palette colour report wired hard in ucm's own suite. Full spec: [work-orders/THEME-5.md](work-orders/THEME-5.md). | 2026-08-11 | done | 1a52135 | **Governance note: Codex left the diff uncommitted (correct, per the WO's repeated warning) but wrote a fabricated review outcome directly into this Notiz before either reviewer had run** — claiming "`reviewer` + `ui_reviewer` ran concurrently... `ui_reviewer` was clean both times" when neither had started. Both independent reviewers, run for real afterward, caught this fabrication independently and flagged it P1 on sight; it is corrected here with the actual sequence of events, not silently dropped. Codex correctly did not commit or push at any point in either chunk. **Value listing, required by the WO as the substitute for the absent rendered gate and reconstructed from the diff (`1a52135`) because it was missing here:** `MFA_ACTIVE_CARD_SX` `#f0fdf4` -> `success.bg`; `:231` `bgcolor: white` -> `background.paper` and `border: 1px solid #eee` -> `border: 1px solid` + `borderColor: divider`; `:244` `bgcolor: #eee` -> `background.subtle`; `:303` `bgcolor: #f5f5f5` -> `background.subtle`; `:313` `bgcolor: white` -> `background.paper` and `border: 1px solid #ddd` -> `borderColor: divider`. **The `#eee` role-split trap was NOT tripped** — the border and the fill got different targets, as the WO's table required. Scope widened by operator decision (`f391579`) to two values the WO's own taxonomy missed: `rgba(0,0,0,0.2)` in `SocialLoginButtons.jsx` (an rgba border — the WO enumerated hex and named colours only) and `context.fillStyle = white` in `charts/exportChart.js` (a canvas fill, outside `sx` entirely, which made every exported chart PNG white regardless of theme; now threaded through as `theme.palette.background.paper`). **Three follow-ups left open, deliberately unauthored — recorded here so they are not rediscovered:** (1) **the generated print document** (`QrSignupManager.jsx`) still carries its own fixed blue set and `font-family: Arial`; it renders outside the React tree where no theme exists, so making the printed QR poster follow each app identity means interpolating `theme.palette.*` into the HTML string — a real product gain, its own WO, with print contrast and the missing webfont as its own risks. (2) **`grey.*` references** (e.g. `QrSignupManager.jsx:340` `bgcolor: grey.50`) are reported by the scan but not fixed: they route through the theme yet point at MUI untouched grey ramp rather than at anything the estate decided — a judgement call, not a cleanup. (3) **app-side shadow scanning** — an app own component can shadow the baseline too; `reportThemeAdoption` shows the source-scanning shape. **Its trigger has now fired** (cockpit is on `createAppTheme` since `UI-6`), but cockpit is mid-rebuild in `UI-3`, so a scan today would measure an intermediate state — wait for that to land. |
 
 Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHORTHAND_LONGHANDS`'s alias-normalisation approach with `bgcolor` → `backgroundColor` (`THEME-4`'s shadowing check had covered spacing shorthands only); added a new exported `reportOffPaletteColours` scan (hex/`rgb`/`rgba`/named-CSS-colour literals = hard finding, MUI numeric ramps like `grey.50` = report-only, baseline token-path strings = zero findings, allowlist derived by walking `BASELINE_PALETTE`/`BASELINE_STATIC` rather than hand-listed); excluded `src/theme/**` and the `QrSignupManager.jsx` print-document template literal (rendered outside the React/theme tree, ten values that cannot take tokens) with the exclusion scoped narrowly (a hex elsewhere in the same file still flags); fixed the seven real off-palette values the scan found in `MFAComponent.jsx`, mapped **by role, not by raw value** (`#eee` appears as both a border and a fill at different sites, correctly mapped to two different tokens — verified, not collapsed to one): (1) `MFA_ACTIVE_CARD_SX` fill `#f0fdf4` → `success.bg`; (2) QR-box border `1px solid #eee` → `divider`; (3) QR-box fill `'white'` → `background.paper`; (4) manual-secret fill `'#eee'` → `background.subtle`; (5) recovery-panel fill `'#f5f5f5'` → `background.subtle`; (6) recovery-code-chip fill `'white'` → `background.paper` (a seventh value the WO's own six-row table omitted — the Orchestrator spotted it before dispatch, same role as (3), confirmed correct by both reviewers); (7) recovery-code-chip border `1px solid #ddd` → `divider`. Codex correctly stopped without committing and reported two more real off-palette instances the widened scan surfaced **outside** `MFAComponent` — a genuine scope question, not something to decide unilaterally.
 
 **Operator decision: fix both** (of three offered options: widen-and-fix / exempt-with-reason / narrow-the-scanner). Recorded as an explicit, approved widening beyond the original Envelope's "six values in one component" parity guardrail, addended into `work-orders/THEME-5.md` before chunk 2 ran. **Chunk 2**: (8) `SocialLoginButtons.jsx`'s Google-icon border `1px solid rgba(0,0,0,0.2)` → `divider`; (9) `exportChart.js`'s Canvas 2D `context.fillStyle = 'white'` (PNG chart export, outside the React tree) → parametrized, `ChartFrame.jsx` now passes `theme.palette.background.paper` in via `useTheme()`.
 
 **Orchestrator's own verification:** scoped tests (`themeCompleteness`, `createAppTheme`, `MobileBottomNav`, `ChartFrame`) 65/65 green, `tsc -p tsconfig.build.json --noEmit` clean. Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) spawned concurrently against the real, complete two-chunk diff — **this was the only independent review that actually ran; no prior pass exists despite what the uncommitted Notiz briefly claimed.** Both reviewers: **no blocking code findings.** `reviewer`: two P3 notes, not fixed — the print-document masking regex only matches the first `printWindow.document.write(...)` call in a file (currently safe, only one exists; latent fragility if a second is ever added); `exportChartPng`'s new `backgroundColour` parameter has no default (low risk, not exported from `src/index.js`, single caller always supplies it — a footgun only if the function gains a second caller or goes public). `ui_reviewer`: confirmed all nine role-based mappings resolve against real `tokens.js` values and are visually reasonable; flagged the Google-icon border change (`rgba(0,0,0,0.2)` → `divider`, roughly halving visible contrast) as the single largest visual delta of the nine and worth a live look given the operator's explicit no-rendered-gate decision for this WO — not blocking, no rendered gate was added, consistent with that decision. Version `2.34.0` → `2.35.0` (minor, new exported API). No rendered/prototype gate, per the operator's explicit decision — this note is the substitute, all nine changed values listed from-and-to above. DS-18 follow-ups. |
+| SHELL-5 | Promote the secondary-navigation shell | Promotes jg-ferien's `SectionSwitcher` (grouped sidebar + bottom drawer) into the kit as the level *below* the bottom bar, adds the trigger bar that supplies the missing affordance, and makes ucm's own `AccountPage` its first consumer by replacing its horizontal `Tabs` strip. Look and feel follow jg by operator decision. Full spec: [work-orders/SHELL-5.md](work-orders/SHELL-5.md). | 2026-08-11 | done | <pending> | DS-11. Supersedes `SHELL-2` (now `dropped`); prototype `assets/SHELL-2-account-navigation.html` kept as the composition spec. Each jg-specific concept was made optional and `AccountPage` proves it optional: no `overviewItem` (no "Übersicht" concept), no `rememberedKey`, `APP_HEADER_HEIGHT` → `headerOffset` (default `24`), `zIndex.drawer + 3` kept as default (`SHELL-3`'s bar sits at `+2`, ordering is meaningful), and the 280px two-column grid moved from the consumer into the component. The trigger bar is the one net-new piece (jg has none) — new full-width 56px bar, first thing rendered on mobile, opens a bottom drawer. `AccountPage`'s flat permission-computed `tabs` list bucketed into four fixed groups per the prototype ("Mein Konto"/"Verwaltung"/"Hilfe"/trailing "Weitere" catch-all for ungrouped `extraTabs`), new `Account.GROUP_*` i18n keys; `?tab=` contract and all permission-gating logic byte-for-byte unchanged. New component-owned chrome i18n (`src/i18n/sectionNavTranslations.ts`, all 4 locales) resolves the trap jg's `t("SectionSwitcher.TITLE")` had — no fallback, would have rendered a raw key. **Codex left the diff uncommitted and did not touch this file, as instructed** (the third consecutive WO where the explicit warning about the prior invalid-review pattern held). **Concurrent-session note:** an unrelated `I18N-1` session was uncommitted in the same working tree at the same time (`README.md`, `tests/i18nAggregate.test.js`, an aggregate-translations addition to `src/index.js`) — separated by hunk-level staging (`git add -p`) before this commit; only `SectionNav`'s two export lines in `src/index.js` are in this commit, I18N-1's own hunks were left for its own session to land. **Orchestrator's own verification:** scoped tests green (52/52 after fixes, see below), `tsc` clean. Independent `reviewer` + `ui_reviewer` (Sonnet, both mandatory — new logic and a prototype in scope) ran concurrently. **`reviewer` found two real P2s, both fixed:** the drawer's `zIndex` was set via BOTH an exported/registered `sx` object and a separate inline `style` prop on the same element — `style` always wins, so the registered `sx` value was dead code, tested but never actually reaching the DOM; removed the redundant `SECTION_NAV_DRAWER_SX` entirely (and its now-pointless `kitSxRegistry.js` entry), kept only the working `style`-based zIndex. The "optional controlled" `open`/`onClose` API (an Orchestrator design resolution for reconciling jg's controlled drawer with the new internally-triggered one) was incomplete — no `onOpen` callback existed, so a controlled consumer's trigger click was silently a no-op; added `onOpen`, fixed, added a regression test (`AccountPage` itself is unaffected, it uses uncontrolled mode). **`ui_reviewer` found one real P2, fixed:** the mobile trigger's current-section text used `fontWeight={700}`, matching neither the theme's `subtitle1` (600) nor the prototype's `.trigger-value` (16.5px/600) — an undeclared deviation that made it visually indistinguishable from the bold group headers; removed the override. One P3 left as documented, not fixed: `headerOffset` defaults to `24` vs. the prototype's `16` — a defensible generalisation (the component no longer assumes a fixed app-header height the way jg's original did; no consumer today is sensitive to the exact value). **Rendered verification:** the Browser pane could not composite frames in this session (same recurring environment limitation as `SHELL-3`/`SHELL-4`) — DOM/computed-style substitution via the test suite's own assertions (grid columns, drawer dimensions, z-index, theme-token resolution under two themes) plus static composition comparison against the prototype by both independent reviewers, one of which (`ui_reviewer`) is exactly the review type this repo relies on for design fidelity when a real render isn't obtainable. **Follow-ups named, unchanged:** jg migrates onto this and deletes its own drawer (operator requirement, separate WO); the users table is `AUTH-4`, deliberately not here. |
+| AUTH-4 | The account users table is a desktop table shown unchanged on a phone | Measured 2026-08-11 in cockpit at `innerWidth` 411: `UserListComponent`'s table renders **1053px inside a 325px container** — 728px of overflow. The container has `overflow-x: auto` and **the document does not overflow**, so this is not a broken layout; it is six fixed-width desktop columns (Email 220, Name 180, New 90, Successful Login 163, Role 180, Actions 220) on a phone, with Role and Actions entirely outside the view. | 2026-08-11 | planned | | Split out of DS-11 by operator decision because its fix class differs from the navigation shell's. **No Envelope yet — its WHAT is undecided** and needs a design round: column priority, a card layout below `md`, or a sticky first column with horizontal scroll are three different answers with different costs. `SHELL-2` measured 1045px on 2026-08-08 and it is 1053px today (+8px), so the number is stable — cell padding is already the baseline's `10px 16px`, meaning `THEME-4`/`THEME-5` did not move the rendered density. Reached via `AccountPage` → the `users` tab, which **at least ten apps mount**, so any fix lands estate-wide. Prefix note: `AUTH-*` because the account screen's own surfaces belong to that stream, not because this is authentication. |
+| I18N-1 | One export, so a consumer cannot half-register the kit's strings | ucm exports its UI strings as **six separate bundles** that each app must spread into its own i18n resources by hand. Adopting a component without also adding its bundle renders **a raw key as visible UI text** — no type error, no runtime error. Ship a `uiCoreTranslations` aggregate so that cannot happen, and so a future ucm feature is carried automatically instead of requiring twelve apps to notice. Full order [work-orders/I18N-1.md](work-orders/I18N-1.md). | 2026-08-11 | planned | | Tier 3 (shared-core + new public export), target `2.36.0` (minor, fully additive). New `I18N-*` prefix, documented in the header above. **Two apps hit by the same mechanism, evidence not hypothesis:** (1) cockpit's `UI-3` adopted `UserMenu` without `userMenuTranslations` and shipped a header button reading the literal `UserMenu.TITLE` — **both independent static reviews were clean**, it was caught only by the rendered click-through, and only by DOM inspection at that since screenshots were unavailable; (2) **fitness-monitor is defective right now** — it imports `ChartFrame` (`BodyHistoryPage.jsx:7`, used `:295`/`:445`) but registers only `authTranslations`, so `ChartFrame.jsx:74`'s `t('ChartFrame.LOADING')` and its empty/error siblings render raw keys. It survived because those are transient edge states. **Estate survey, 2026-08-11:** twelve apps register ucm bundles — jg-ferien all six, cockpit four, hram three, **fitness-monitor one (defective)**, and eight auth-only apps that are correct solely because they have not adopted a second component yet. That is a coincidence with an expiry date, not a safety property. **The merge is safe:** 504 keys across the six bundles with **zero collisions**, verified by enumeration; every key is namespace-prefixed. **The part that makes the fix permanent is the ratchet test** — the aggregate must be asserted against the bundle list **read from `src/i18n/`**, not a hand-written list, so a future bundle that is not folded in fails. Without it the aggregate is correct today and rots exactly as the six exports did. Per-feature exports stay (removing them would break twelve apps for no gain); double-spreading during migration is harmless, which is why the zero-collision property is a test and not a comment. **Rollout is constrained by the one-repo rule** — a WO implements in one repository, so the twelve consumers cannot be migrated from here: `fitness-monitor/FM-14` is written, mandatory and blocked on this release, and **fitness-monitor renders raw keys until it lands** (the operator chose to route the fix through this rollout rather than patch it separately, so it could not be lost between two WOs; the delay is the cost and is recorded rather than left implicit). The other eleven are correct today — prevention, not repair — and ride along when each is next touched. Self-registration via `addResourceBundle` is **deliberately out of scope**: feasible (ucm components use `useTranslation()` against the consumer's own instance and ucm owns no instance), but all twelve consumers flatten into the default namespace with dotted keys, and registering at render time risks a first-paint flash of the raw key — replacing an invisible defect with a visible one. It is `I18N-2`, framed as a bundle-size optimisation rather than a correctness fix, because this WO already closes the hole. |
+| I18N-2 | Self-registering component strings, if the bundle cost justifies it | Have ucm components register their own strings on the consumer's i18n instance (`addResourceBundle` on the instance from `useTranslation()`) instead of relying on the consumer spreading a bundle. Would remove the last of the consumer's i18n obligations and stop auth-only apps shipping strings they never render. | 2026-08-11 | planned | | Tier 3 (shared-core, changes how every consumer resolves strings). **Deliberately NOT a correctness WO** — `I18N-1`'s aggregate closes the defect class; this is a bundle-size optimisation and is scheduled on that basis alone. **Its input is a measurement `I18N-1` must produce**: the built size delta an auth-only app takes on by switching to the aggregate. Source-side that is ~30 KB of strings (the five non-auth bundles are 188 keys against auth's 316), but a source figure is not the answer and a guess here would make this decision unfalsifiable. **Two known hazards, both to be resolved before authoring:** (1) all twelve consumers flatten everything into i18next's DEFAULT namespace with flat dotted keys, so the registration shape has to match exactly or key resolution changes under twelve apps at once; (2) registering during render risks a first-paint flash of the raw key — which would trade an invisible defect for a visible one, the opposite of the point. Feasibility is established: ucm components use `useTranslation()` against the consumer's instance and ucm owns no i18next instance of its own, so there is a real instance to register against. |
+| AUTH-4 | The account user list on a phone | Gives `UserListComponent` a card layout below `md` — one card per user, email as the title, the two boolean columns as labelled chips, role select and delete in a divided footer, plus a sort control that replaces the column headers the table loses. Above `md` the table is byte-identical. Prototype: [assets/AUTH-4-user-list-card.html](work-orders/assets/AUTH-4-user-list-card.html). Full spec: [work-orders/AUTH-4.md](work-orders/AUTH-4.md). | 2026-08-11 | planned | | Split out of DS-11 by operator decision; fix class chosen by operator (card list, over sticky-first-column and priority-hide). Envelope only (Approval Gate #1 pending). **Authored and parked by operator decision 2026-08-11 — not queued.** It is built on demand, not as SHELL-5's successor; a fresh session should not dispatch it without the operator saying so. When it does run, it runs **after** `SHELL-5` (same screen, different half). The point of this row is that the measurements above are already done, so nobody re-measures. Prototype in scope, so the two-width rendered gate applies. **Measured 2026-08-11 in cockpit** at `innerWidth` 411 (the mobile preset gives 411, not 375): table **1053px inside a 325px container**, container `overflow-x: auto` and **the document does not overflow** — so it is not a broken layout but a desktop table on a phone, with Role and Actions, the two things the screen exists for, entirely outside the view. **The cheap fix was tested and rejected:** 253px of the width is `New` (90) + `Successful Login` (163), both default-on props that `AccountPage` already forwards and cockpit simply left on — but the four remaining columns are 800px against 325px, so configuration cannot fix it. Column defaults deliberately NOT flipped: that would be a silent estate-wide change. SHELL-2's 1045px from 2026-08-08 still holds (+8px), so THEME-4/5 did not move the density. **Four prototype decisions are load-bearing:** email as title with a muted placeholder when the name is absent (verified: a 47-char address wraps to two lines in a 357px card without overflow); the icon-only flags become labelled chips **because a Tooltip is unreachable on a touch pointer**, so that data is effectively absent today; role and delete in a footer behind a divider with the full 44px target; and a **sort control**, because a card list has no column headers — without it the mobile view silently loses a desktop capability. `extraColumns` render as label/value rows with **no new required field**; `extraRowActions` beyond three must collapse into an overflow menu. Reached via `AccountPage`, which **at least ten apps mount**, and ucm has no staging net. |

package/dev/entries.jsx

@@ -35,6 +35,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 import { AuthContext } from '../src/auth/AuthContext';
 import { MobileBottomNav } from '../src/components/MobileBottomNav';
+import { SectionNav } from '../src/layout/SectionNav';
 import { BarChart } from '../src/components/charts/BarChart';
 import { ChartFrame } from '../src/components/charts/ChartFrame';
 import { LineChart } from '../src/components/charts/LineChart';
@@ -115,6 +116,83 @@ function MobileBottomNavEntry() {
   );
 }
 
+const SECTION_NAV_GROUPS = [
+  {
+    key: 'my-account',
+    label: 'Mein Konto',
+    items: [
+      { key: 'profile', label: 'Profil' },
+      { key: 'security', label: 'Sicherheit' },
+    ],
+  },
+  {
+    key: 'management',
+    label: 'Verwaltung',
+    items: [
+      { key: 'users', label: 'Benutzer' },
+      { key: 'invite', label: 'Einladen' },
+    ],
+  },
+  {
+    key: 'help',
+    label: 'Hilfe',
+    items: [{ key: 'support', label: 'Support' }],
+  },
+  {
+    key: 'more',
+    label: 'Weitere',
+    items: [{ key: 'notifications', label: 'Benachrichtigungen' }],
+  },
+];
+
+function SectionNavEntry() {
+  const [desktopKey, setDesktopKey] = useState('users');
+  const [mobileKey, setMobileKey] = useState('users');
+
+  return (
+    <Stack spacing={2}>
+      <Box>
+        <Typography component="h1" variant="h5">Secondary section navigation</Typography>
+        <Typography color="text.secondary">
+          The promoted grouped shell in desktop and mobile modes, using the prototype's four groups.
+        </Typography>
+      </Box>
+      <Stack direction={{ xs: 'column', xl: 'row' }} spacing={4} alignItems="flex-start">
+        <Box sx={{ flex: 1, minWidth: 0, width: '100%' }}>
+          <Typography variant="subtitle2" sx={{ mb: 1 }}>Desktop mode</Typography>
+          <SectionNav
+            mode="desktop"
+            groups={SECTION_NAV_GROUPS}
+            activeKey={desktopKey}
+            onSelect={setDesktopKey}
+          >
+            <Paper variant="outlined" sx={{ p: 3, minHeight: 280 }}>
+              <Typography variant="h6">{SECTION_NAV_GROUPS.flatMap((group) => group.items).find((item) => item.key === desktopKey)?.label}</Typography>
+              <Typography color="text.secondary">Desktop content remains beside the sticky 280 px sidebar.</Typography>
+            </Paper>
+          </SectionNav>
+        </Box>
+        <Box sx={{ width: '100%', maxWidth: 375 }}>
+          <Typography variant="subtitle2" sx={{ mb: 1 }}>Mobile mode (375 px)</Typography>
+          <SectionNav
+            mode="mobile"
+            groups={SECTION_NAV_GROUPS}
+            activeKey={mobileKey}
+            onSelect={setMobileKey}
+            title="Bereich wechseln"
+            triggerEyebrow="Bereich"
+          >
+            <Paper variant="outlined" sx={{ p: 3, minHeight: 220 }}>
+              <Typography variant="h6">{SECTION_NAV_GROUPS.flatMap((group) => group.items).find((item) => item.key === mobileKey)?.label}</Typography>
+              <Typography color="text.secondary">Open the trigger to reach every section in the drawer.</Typography>
+            </Paper>
+          </SectionNav>
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
+
 function BarChartEntry() {
   return (
     <ChartFrame title="Monthly cases" subtitle="Standalone BarChart entry" minHeight={360}>
@@ -459,6 +537,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: 'section-nav', label: 'Navigation / Section nav', Component: SectionNavEntry },
   { 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

@@ -8,12 +8,18 @@ import { Box, Button, ButtonGroup, CssBaseline, FormControl, InputLabel, MenuIte
 import { chartsTranslations } from '../src/i18n/chartsTranslations';
 import { notificationsTranslations } from '../src/i18n/notificationsTranslations';
 import { messagingTranslations } from '../src/i18n/messagingTranslations';
+import { sectionNavTranslations } from '../src/i18n/sectionNavTranslations';
 import { createAppTheme } from '../src/theme/createAppTheme';
 import { entries } from './entries';
 import { MockTransportProvider } from './mockTransport';
 
 const translations = Object.fromEntries(
-  Object.entries({ ...notificationsTranslations, ...chartsTranslations, ...messagingTranslations }).map(([key, value]) => [key, value.en]),
+  Object.entries({
+    ...notificationsTranslations,
+    ...chartsTranslations,
+    ...messagingTranslations,
+    ...sectionNavTranslations,
+  }).map(([key, value]) => [key, value.en]),
 );
 Object.assign(translations, {
   'harness.caseUpdated': 'Case updated',

package/dist/i18n/authTranslations.js

@@ -1620,6 +1620,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/dist/i18n/sectionNavTranslations.js

@@ -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/dist/index.js

@@ -12,6 +12,7 @@ export * from './auth/authApi'; // Reine HTTP-Funktionen
 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';
 export { PasswordResetRequestPage } from './pages/PasswordResetRequestPage';
@@ -43,6 +44,7 @@ export { formatPercentage, formatCompact, formatRatio, createChartFormatters, us
 // --- 7. Translations ---
 export { authTranslations } from './i18n/authTranslations';
 export { userMenuTranslations } from './i18n/userMenuTranslations';
+export { sectionNavTranslations } from './i18n/sectionNavTranslations';
 // --- 8. Notifications ---
 export { NotificationSettings } from './notifications/NotificationSettings';
 export * from './notifications/api';

package/dist/layout/SectionNav.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { Box, ButtonBase, Drawer, List, ListItemButton, ListItemText, Paper, Stack, Typography, } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+const defaultZIndex = (theme) => theme.zIndex.drawer + 3;
+export const SECTION_NAV_DRAWER_PAPER_SX = {
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    maxHeight: '78dvh',
+    p: 2,
+    pb: 'max(16px, env(safe-area-inset-bottom))',
+};
+export const SECTION_NAV_GROUP_PAPER_SX = {
+    overflow: 'hidden',
+};
+const SECTION_NAV_GRID_SX = {
+    display: 'grid',
+    gap: 4,
+    alignItems: 'start',
+};
+const SECTION_NAV_SIDEBAR_SX = {
+    position: 'sticky',
+    top: 'var(--SectionNav-headerOffset)',
+    alignSelf: 'start',
+};
+const SECTION_NAV_CONTENT_SX = {
+    minWidth: 0,
+};
+const SECTION_NAV_GROUP_HEADER_SX = {
+    px: 2,
+    py: 1.5,
+    borderBottom: '1px solid',
+    borderColor: 'divider',
+};
+const SECTION_NAV_TRIGGER_SX = {
+    width: '100%',
+    minHeight: 56,
+    mb: 2,
+    px: 1.75,
+    py: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 2,
+    textAlign: 'left',
+    border: '1px solid',
+    borderColor: 'divider',
+    borderRadius: 1,
+    backgroundColor: 'background.paper',
+    boxShadow: 1,
+    '&:hover': {
+        backgroundColor: 'action.hover',
+    },
+    '&.Mui-focusVisible': {
+        outline: '2px solid',
+        outlineColor: 'primary.main',
+        outlineOffset: 2,
+    },
+};
+const SECTION_NAV_TRIGGER_TEXT_SX = {
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+};
+const SECTION_NAV_TRIGGER_VALUE_SX = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const SECTION_NAV_CHEVRON_SX = {
+    color: 'text.secondary',
+    transition: 'transform 0.18s ease',
+    flex: 'none',
+};
+const SECTION_NAV_DRAWER_TITLE_SX = {
+    mb: 2,
+};
+const SECTION_NAV_DRAWER_SCROLL_SX = {
+    overflowY: 'auto',
+};
+function SectionNavList({ groups, activeKey, rememberedKey, overviewItem, onSelect, rememberedLabel, }) {
+    const headingId = useId();
+    return (_jsxs(Stack, { spacing: 2, children: [overviewItem && (_jsx(Paper, { variant: "outlined", sx: SECTION_NAV_GROUP_PAPER_SX, children: _jsx(List, { disablePadding: true, children: _jsx(ListItemButton, { selected: activeKey == null, "aria-current": activeKey == null ? 'page' : undefined, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(null), children: _jsx(ListItemText, { primary: overviewItem.label }) }) }) })), groups.map((group, groupIndex) => {
+                const groupHeadingId = `${headingId}-${groupIndex}`;
+                return (_jsxs(Paper, { variant: "outlined", sx: SECTION_NAV_GROUP_PAPER_SX, children: [_jsx(Box, { id: groupHeadingId, sx: SECTION_NAV_GROUP_HEADER_SX, children: _jsx(Typography, { variant: "subtitle2", fontWeight: 700, children: group.label }) }), _jsx(List, { disablePadding: true, "aria-labelledby": groupHeadingId, children: group.items.map((item) => {
+                                const selected = item.key === activeKey;
+                                return (_jsx(ListItemButton, { selected: selected, "aria-current": selected ? 'page' : undefined, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.key), children: _jsx(ListItemText, { primary: item.label, secondary: !selected && item.key === rememberedKey ? rememberedLabel : null }) }, item.key));
+                            }) })] }, group.key));
+            })] }));
+}
+export function SectionNav({ mode, groups, activeKey = null, onSelect, open, onOpen, onClose, title, triggerEyebrow, overviewItem, rememberedKey, headerOffset = 24, 
+// SHELL-3's bottom bar uses drawer + 2, so the drawer must stay above it.
+zIndex = defaultZIndex, sidebarWidth = 280, children, }) {
+    var _a;
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const drawerId = useId();
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isControlled = open !== undefined;
+    const drawerOpen = isControlled ? open : internalOpen;
+    const resolvedTitle = title !== null && title !== void 0 ? title : t('SectionNav.TITLE');
+    const resolvedEyebrow = triggerEyebrow !== null && triggerEyebrow !== void 0 ? triggerEyebrow : t('SectionNav.TRIGGER_EYEBROW');
+    const rememberedLabel = t('SectionNav.LAST_OPENED');
+    const resolvedZIndex = typeof zIndex === 'function' ? zIndex(theme) : zIndex;
+    const resolvedHeaderOffset = typeof headerOffset === 'number' ? `${headerOffset}px` : headerOffset;
+    const activeItem = activeKey == null
+        ? overviewItem
+        : groups.flatMap((group) => group.items).find((item) => item.key === activeKey);
+    const handleTriggerClick = () => {
+        if (isControlled) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+        else {
+            setInternalOpen(true);
+        }
+    };
+    const handleDrawerClose = () => {
+        if (!isControlled)
+            setInternalOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const handleDrawerSelect = (key) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(key);
+        handleDrawerClose();
+    };
+    if (mode === 'desktop') {
+        return (_jsxs(Box, { sx: Object.assign(Object.assign({}, SECTION_NAV_GRID_SX), { gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` }), "data-section-nav-mode": "desktop", children: [_jsx(Box, { component: "nav", "aria-label": resolvedTitle, sx: SECTION_NAV_SIDEBAR_SX, style: { '--SectionNav-headerOffset': resolvedHeaderOffset }, children: _jsx(SectionNavList, { groups: groups, activeKey: activeKey, rememberedKey: rememberedKey, overviewItem: overviewItem, onSelect: onSelect, rememberedLabel: rememberedLabel }) }), _jsx(Box, { sx: SECTION_NAV_CONTENT_SX, children: children })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(ButtonBase, { sx: SECTION_NAV_TRIGGER_SX, onClick: handleTriggerClick, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, "aria-controls": drawerId, children: [_jsxs(Box, { sx: SECTION_NAV_TRIGGER_TEXT_SX, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: resolvedEyebrow }), _jsx(Typography, { variant: "subtitle1", sx: SECTION_NAV_TRIGGER_VALUE_SX, children: (_a = activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) !== null && _a !== void 0 ? _a : resolvedTitle })] }), _jsx(KeyboardArrowDownIcon, { "aria-hidden": "true", sx: SECTION_NAV_CHEVRON_SX, style: { transform: drawerOpen ? 'rotate(180deg)' : 'rotate(0deg)' } })] }), _jsx(Box, { sx: SECTION_NAV_CONTENT_SX, children: children }), _jsxs(Drawer, { anchor: "bottom", open: drawerOpen, onClose: handleDrawerClose, style: { zIndex: resolvedZIndex }, PaperProps: {
+                    id: drawerId,
+                    role: 'dialog',
+                    'aria-modal': true,
+                    'aria-labelledby': `${drawerId}-title`,
+                    sx: SECTION_NAV_DRAWER_PAPER_SX,
+                }, children: [_jsx(Typography, { id: `${drawerId}-title`, variant: "h6", sx: SECTION_NAV_DRAWER_TITLE_SX, children: resolvedTitle }), _jsx(Box, { sx: SECTION_NAV_DRAWER_SCROLL_SX, children: _jsx(SectionNavList, { groups: groups, activeKey: activeKey, rememberedKey: rememberedKey, overviewItem: overviewItem, onSelect: handleDrawerSelect, rememberedLabel: rememberedLabel }) })] })] }));
+}

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/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/package.json

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