@micha.bigler/ui-core-micha 2.26.4 → 2.28.2

package/DESIGN.md

@@ -24,7 +24,7 @@ These principles are the spec a **prototype** encodes and the implementation mat
 
 ## Craft
 
-10. **Prototype = spec, parity = guardrail.** Purely visual/UX — function stays. **"No behaviour / permission / data-contract change"** is the hard condition that goes into the WO.
+10. **Prototype = spec, parity = guardrail — both directions, within a DECLARED coverage.** Purely visual/UX — function stays; **"No behaviour / permission / data-contract change"** is the hard condition in the WO. Prototypes are routinely **partial** (tabs undrawn, flows stubbed), and nobody downstream can tell a deliberate omission from a required removal — so **prototype silence never authorizes a removal; the Envelope's "Replaces / removes" list does.** Every prototype therefore **declares what it covers and what it leaves untouched**. Inside the covered area each omission is resolved at authoring time into *removes* or *deliberately keeps*, leaving nothing ambiguous; outside it the prototype says nothing. Parity is then checked both ways **within that coverage**: everything drawn is present, and nothing listed as removed survives. **A redesign that ends up net-additive has failed**, however good its new parts — shipping MORE UI than before is the estate's recurring cleanup failure (status bands, duplicated badges, tip text layered on top of the very legacy the redesign was meant to replace).
 11. **Align to the shipped reality.** When related features land, pull the prototype onto them so it is a truthful spec, not a contradicting vision.
 12. **Avoid the generic "AI look"; take details seriously.** No cream / serif / neon default; embed the real font (CSP-safe as a data-URI, not a silent-fallback risk); `tabular-nums` for aligned numbers; a11y (role/aria on chart regions, focusable info). **Template tells to CUT** (unless the app's design system genuinely specifies them): monospace-uppercase **eyebrow / kicker labels** (e.g. `IMARA · ADVANCING RESILIENT HEALTH SYSTEMS`), decorative **pills / badges**, `FIG. 01 ·` / `F.01` **figure captions**, `↳`-prefixed **micro-links**, **oversized display** headlines, **sketchy / hand-drawn** styling, and **explanatory paragraphs that restate the UI** (help is on-demand — see #6). Restraint is the default; each of these is added only with a real reason.
 
@@ -35,3 +35,4 @@ For the **design craft** of a prototype (an HTML artifact) and its charts, load
 13. **Spacing / density = tool density, not document width.** A defined spacing rhythm, dense enough to scan and operate — not airy like a reading document. Use the theme's spacing scale; don't hand-pick pixel gaps.
 14. **Responsive = container-sized, not fixed px.** Layouts and charts size to their container; define breakpoint behaviour deliberately (what stacks, what hides, what scrolls) — the same container-responsive rule the charts already follow.
 15. **Motion = restrained and functional.** Transitions serve orientation/feedback (state change, reveal), never decoration. Short, few, purposeful; respect `prefers-reduced-motion`.
+16. **Prefer icons for secondary actions where the meaning is conventional.** A dense action row reads better as one labelled primary action plus **icon buttons** (preview, download, edit, delete, overflow) than as a row of text buttons — and a labelled `Button` is simply the cheapest thing to type, so implementations drift toward text-heavy rows the prototype never had. Conditions: use an **established glyph** (never invented iconography); always pair it with a **`Tooltip` AND an `aria-label`**, since an icon-only control otherwise has no accessible name; and **keep the text label** when the action is primary, destructive without a confirm step, or app-specific enough that no conventional icon exists. A tooltip may NAME an action — if it has to explain a concept, the control needs a label, or on-demand help (#6).

package/WORK_ORDERS.md

@@ -14,6 +14,7 @@ rules are defined centrally in `webapps/AGENTS.md` → "Work-Order Register".
 | `CHART-*` | Shared chart / data-viz kit (`ChartFrame` + MUI X-Charts presets + neutral palette/formatters) |
 | `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) |
 
 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.
@@ -22,6 +23,8 @@ prefixed ID; never reuse a bare flat number across workstreams.
 
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
+| CHART-4 | Fix `TimeSeriesChart` chart canvas rendering at zero height | Neither `ChartFrame` nor `BarChart` ever receive a height from `TimeSeriesChart` — MUI X-Charts' responsive container measures a zero-height parent and draws no bars/axes, while the legend (sized by its own content) renders regardless, which is why the live symptom was "legend shows, chart canvas doesn't". Fix supplies a preset default height (`CHART_HEIGHT = 320`, `minHeight` on `ChartFrame` + `height` forwarded to the real `MuiBarChart`), matching the working `dev/entries.jsx` reference pattern. Full spec: [work-orders/CHART-4.md](work-orders/CHART-4.md). | 2026-08-07 | done | f0953a1, fcb289b | Second, independent bug found live in jg-ferien immediately after CHART-3 + the ucm pin bump landed — CHART-3's own fix is what let this one become visible for the first time (it was previously masked by the permanently-empty-chart bug). Root cause of it shipping twice undetected: every test in `tests/TimeSeriesChart.test.jsx`/`tests/BarChart.test.jsx` mocks the real `@mui/x-charts/BarChart`, so no test has ever mounted the real chart and observed its size. **Codex out of credits, known up front** — implemented directly (author-flip, independent review mandatory). **Test-writing pitfall found and self-corrected during implementation**: first wrote an *unmocked* render test asserting the real chart SVG's `viewBox` height was non-zero — verified vacuous (stays green even fully reverting the fix, since jsdom's `ResizeObserver`/layout handling doesn't reproduce the real zero-height-parent browser behavior this bug depends on). Deleted; replaced with a `chartSpy`-mocked prop assertion (`props.height` non-zero) matching the file's existing convention, confirmed non-vacuous (fails pre-fix with `props.height` undefined). Independent `reviewer` + `ui_reviewer` ran concurrently: `reviewer` verified the fix mechanism end-to-end (no prop-name collision between `BarChart`'s own `minHeight`/`aspect` and the forwarded `height`) and the test's non-vacuity claim, no findings. `ui_reviewer`: two P3 informational notes, neither blocking — (U1) the fixed 320px height is a deliberate, documented exception to `DESIGN.md` #14 ("responsive = container-sized, not fixed px"), needed specifically because MUI X-Charts' own `ResizeObserver`-based height measurement is what caused CHART-4 in the first place; a code comment was added warning future readers not to "fix" this back to a responsive height without re-verifying the underlying MUI bug is resolved. (U2) `CHART_HEIGHT` uses 320 for both `ChartFrame.minHeight` and `BarChart.height`, vs. `dev/entries.jsx`'s 360/320 split — functionally harmless (WO explicitly permits one fixed value), no change made. 13/13 scoped vitest tests green, `tsc` build clean. Published: ucm 2.28.2 (patch, no interface change). No app pin bumps in this WO — jg-ferien picks it up on its next ucm bump. |
+| CHART-3 | Fix `TimeSeriesChart` rendering nothing on async data load | `visibleKeys` was a lazy `useState` initialized once from `data` at first mount; any host that fetches asynchronously after mount (the normal case, e.g. jg-ferien's `ActivitySection`) ends up with a permanently-empty `visibleKeys`, so `isDataEmpty` stays `true` forever and the chart body never renders even once real data arrives. Fix syncs newly-seen series keys to visible-by-default while preserving a user's manual toggle-off across data updates. Full spec: [work-orders/CHART-3.md](work-orders/CHART-3.md). | 2026-08-06 | done | 9a1bd9d, 48cefa8 | Found live in jg-ferien's Aktivität screen (ACT-3 consumer) — toolbar rendered, chart body stayed on `ChartFrame`'s empty state permanently. **Codex was out of workspace credits** (genuine quota error on invocation, no partial work) — orchestrator implemented directly per the Codex→Claude fallback rule; independence flip applies (author = orchestrator, so independent review was mandatory, not self-check). Independent `reviewer` + `ui_reviewer` both ran (background, concurrent): `ui_reviewer` found no findings; `reviewer` found R1 (P2, real bug — the seen-keys tracker was a `useRef` mutated during the render body alongside a paired `setVisibleKeys` call; under React concurrent rendering an interrupted/discarded render leaves the ref mutation applied while the paired state update is discarded, permanently hiding a key without it ever reaching `visibleKeys` — a different-shaped recurrence of the exact bug this WO exists to fix) and R2 (P3, test-file duplication — a second near-duplicate render helper). Both fixed: seen-keys tracking moved from a ref to a second `useState` (both states updated together in the render body, so a discarded render rolls both back together — React's documented pattern for this), and the duplicate test helper collapsed into the existing `renderChart`'s `rerenderWith`. Re-verified: 12/12 scoped vitest tests green (3 new CHART-3 regression tests, 2 of which confirmed non-vacuous by failing against the pre-fix code), `tsc` build clean. Published: ucm 2.28.1 (patch, no interface change). No app pin bumps in this WO — jg-ferien picks it up on its next ucm bump. |
 | ONB-1 | Per-app configurable notifications onboarding step | New `browserPush` prop `{nagUntil, showOnce}` on `OnboardingProvider`; parameterizes the `browser_push` descriptor's condition (default changes from implicit "all-channels" to "any-channel", stopping the over-nag); `showOnce` via a persisted `onboarding_seen` set (frozen-at-mount ref, no mid-session flicker) | 2026-07-17 | done | 1ae7c20 | Default behavior change affects cockpit and all consumers on their next ucm bump. jg-ferien companion WO pins the new version with `browserPush={{nagUntil: 'any-channel'}}` explicit (matches new default, but pinned explicitly per the WO). |
 | PERF-3B1 | Parallel auth bootstrap after CSRF | Starts auth-methods and current-user concurrently once CSRF is available, while preserving error handling and loading semantics. | 2026-07-19 | done | ee89329 | Independent `reviewer` + `sec_reviewer` passes both clean (no findings); one P3 test-coverage gap from the reviewer (missing mirror case: auth-methods rejects, current-user succeeds) closed with an added regression test — 45/45 tests green. Published as 2.10.1 (patch, no interface change) and pinned in jg-ferien alongside its PERF-3A companion WO. |
 | CHART-1 | Shared chart kit: themed `ChartFrame` + MUI X-Charts Bar/Line presets | Typed-agnostic `ChartFrame` (Paper + title + toolbar slot + loading/error/empty + responsive container + SVG/PNG export + a11y) wrapping any chart body via `children`; thin `BarChart`/`LineChart` presets over MUI X-Charts baking the governance chart contract (both-axis labels, legend-when-multiseries, tooltip, theme-token colours, responsive); neutral theme-aware palette + locale-aware formatters. Additive exports; publishes ucm 2.15.0. | 2026-07-30 | done | f1b3614 | Envelope authored by Expertenchat; `work-orders/CHART-1.md`. Operator approved the `@mui/x-charts` peerDependency 2026-07-30 (in-chat) before Codex ran. Codex-built direct (no nesting). Independent `reviewer` (background, author=Codex ≠ reviewer): found R1 (P1, real bug — 3 of 4 WO-required tests failed on actual execution: no RTL `cleanup()` between `render()` calls left stale DOM across the `ChartFrame` state-precedence/empty tests, and the `BarChart` responsive-sizing assertion called `.not.toContain(null)` on a `getAttribute('style')` that MUI's `sx` never sets inline — an invalid matcher call), R2 (P2 — `BarChart`/`LineChart` passed an invalid `tooltip={{trigger:'axis'}}` prop that isn't part of either component's real API per installed `@mui/x-charts@8.29.2` types; silently worked only via the library's own default, and the mocked tests couldn't catch it), R3 (P2 — `ChartFrame`'s chart region set both `aria-label` and `aria-labelledby`; per ARIA accessible-name computation `aria-labelledby` wins, so a caller-supplied `ariaLabel` override was silently discarded by assistive tech), R4 (P3 — the PNG export control was never actually clicked in the export test, only checked for presence). All four fixed by the orchestrator directly (in-scope reviewer-finding fixes, not a re-implementation): added `afterEach(cleanup)` to the three render-based test files, fixed the responsive-sizing assertion to tolerate `null`/empty inline style, moved tooltip config to the real `slotProps={{tooltip:{trigger:'axis'}}}` API (tests updated to match), suppressed `aria-labelledby` whenever a custom `ariaLabel` is supplied (with a new regression test), and added a PNG-export regression test asserting the callback fires. Re-verified: 16/16 scoped vitest tests green, `pnpm`/tsc build clean. hram adoption (pin bump + ~20 Results/Research panel migration) is a gated follow-on WO in the hram repo, gated on 2.15.0 published (publish-from-main CI on this push). SVG specialists (scatter/tornado/heatmap/CI/frontier) get frame+export in adoption but keep raw-SVG bodies — retiring raw SVG is a tracked future CHART-2. |
@@ -46,3 +49,5 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | SHELL-1 | A shared user menu: avatar, profile, logout | Measured 2026-08-04: **seven render sites across two apps** for two adjacent actions — spesix has an account link (`:184`) plus a separate logout (`:224`), and the same pair again at `:269`/`:307` for mobile; survey_app has account nav (`:67`), logout desktop (`:152`) and logout mobile (`:90`); jg-ferien has an avatar linking to `/account` and **no header logout at all** (it sits at the bottom of `/more`). The duplication is worse *within* each app than between them. ucm exports nothing header-shaped today and has no avatar component, though it has owned `logout` in `auth/AuthContext.jsx:132` all along. | 2026-08-04 | done | 8ef8cbf (WO), bf4cdd1 (impl) | Envelope: [work-orders/SHELL-1.md](work-orders/SHELL-1.md). New `SHELL-*` prefix for shared application-shell surfaces, distinct from `MSG-*`/`NOTIF-*`. **Design settled with the operator against an interactive prototype — the boundary is not to be renegotiated:** ucm owns the avatar, the menu, Profil (`/account`, verified identical in all four apps) and Abmelden; the host passes only account-related entries, already permission-filtered and already translated; **the context/structure picker never enters the menu.** That last point is measured, not assumed — spesix's `activeSchoolId` is consumed by **13 files** (Approvals/Budgets/Claims/AppLayout) and jg's `selectedEventId` by **18**; it re-scopes the entire application's data, so it stays a permanently visible control of its own. Operator 2026-08-04: org/structure pickers are app-specific and already solved where they live; a second route to them here would be the very duplication this WO removes. **Expected integration for spesix and survey_app is `<UserMenu resolveLink={navigate} />` and nothing else** — only jg passes an entry. Two traps carried over from elsewhere in this estate: an earlier prototype had Benachrichtigungen as a ucm built-in, but **only jg** embeds `NotificationSettings` and `?tab=notifications` exists only there, so three apps would have got a menu entry pointing at a route they lack — verify every built-in against every app; and **labels arrive as finished strings, never i18n keys**, which is exactly why `django-core-micha` MSG-13 is currently broken. Stated cost: **Profil goes from one tap to two in every app** (paid consciously — the price of the consolidation). hram is **unverified** (no header file under `components/`) — do not claim four apps benefit until someone looks. Scope E (dcm MSG-13 preview `Switch`) had already landed separately as NOTIF-14 (`72e6697`) before this WO started, so A-D ship alongside it in the same release. Host header rewires (spesix/survey_app/jg/hram) are four separate small WOs, one per app, including removing jg's now-redundant local `UserAvatar` — not done here. **Codex → Claude fallback**: Codex exited immediately on "workspace out of credits" (same failure as NOTIF-14) before writing any code, so this session implemented directly — author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit (WO's TIER line makes both mandatory). **Decisions stated per WO's explicit requirement** (both reviewers flagged these as initially undocumented, now recorded here): scope D icons — **no entry carries a leading or trailing icon** (uniform with none, avoids an unstated icon contract for host items); Profil/Abmelden i18n — **new `UserMenu.PROFILE`/`UserMenu.LOGOUT` keys** in a fresh `src/i18n/userMenuTranslations.ts`, not a reuse of `Account.TAB_PROFILE` (different UI surface, keeps the component independently consumable). New component `src/auth/UserMenu.jsx` mirrors `NotificationBell({ resolveLink })`'s exact anchor/Menu/onClose shape — no custom keyboard/focus-trap code, relies entirely on MUI `Menu`'s native Escape/click-outside/focus-return. Gate: `tests/UserMenu.test.jsx` (new, 6/6 passed, all WO-required cases incl. non-vacuous ordering + logout-stub assertions) + affected-areas set `tests/AuthContext.test.jsx` + `tests/NotificationSettings.test.jsx` (untouched by this diff, included per WO's test-scope note since scope E is in the same release) → 18/18 passed, 0 regressions; `tsc -p tsconfig.build.json --noEmit` clean. Both reviewers' only findings were the now-resolved documentation gaps above — no code-correctness findings from either. **HOTFIX 2026-08-04 (`b5b6abd`, published 2.26.1)**: operator screenshot feedback — two-letter avatar initials looked cramped in the 32px circle (MUI's default `Avatar` font-size doesn't auto-scale for a smaller width/height override). Added `fontSize: '0.8rem'`. Independent `reviewer`: no findings. **HOTFIX 2026-08-04 (`769f55d`, published 2.26.2)**: operator screenshot from hram — identity block showed the same email twice (display name falls back to `username` when no first/last name; on allauth email-login hosts `username === email`). The email line now only renders when it differs from the shown display name. Independent `reviewer`: no findings. |
 | CHART-2 | Time-series chart preset with range picker and series toggles | Extends CHART-1, whose `ChartFrame` already ships a **toolbar slot that no consumer uses yet**. Operator request 2026-08-04 from jg's activity chart, generalised: every app charting a time series wants a duration picker and per-series toggles, and `django-core-micha` ACT-1 will make activity data available to all of them. jg's `ActivitySection.jsx:9` currently imports `@mui/x-charts` directly and hand-rolls its own Paper/loading/error/empty. | 2026-08-04 | done | a277c82, abf11b0 | Envelope: [work-orders/CHART-2.md](work-orders/CHART-2.md). **Presentational only — the host fetches**; the component takes data plus callbacks and calls no endpoint. **The half most likely to be dropped: the range picker must emit a GRANULARITY alongside the window** — new `TimeSeriesChart` component emits `onRangeChange(rangeKey, granularity)` per the fixed table (1d→hour, 1w→4hour, 1m→day, 1y→month), test 1 asserts the exact emitted payload, non-vacuity confirmed by manually removing the granularity arg and observing the test fail. **Series toggles implemented as `Checkbox`+`FormControlLabel`** (this repo's established multi-choice pattern, matching `PollCard.jsx`); range picker as `RadioGroup`/`Radio`/`FormControlLabel` (same repo's deliberate single-choice convention, chosen over `ToggleButtonGroup` for which this repo has zero precedent). **Second y-axis: explicitly NOT added** — series toggles are the chosen fix (stated in the component's own JSDoc), not silently absent. **Color/identity stability**: each series' color is keyed to its original (unfiltered) index, not its position after toggling others off — verified independently by `reviewer`, prevents a toggle from shifting a *different* series' color. **Codex → Claude fallback**: Codex exited immediately on "workspace out of credits" before writing any code, so this session implemented directly — author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit (mandatory per WO tier), **both clean, no findings**. `ui_reviewer` confirmed accessible labels (series name text, not color alone), native MUI keyboard nav untouched, all 4 languages present for new i18n keys, host-supplied series labels never passed through `t()`. Gate: 9/9 new `TimeSeriesChart` tests + 25/25 across the full chart-component test set (`ChartFrame`/`BarChart`/`LineChart`/`chartsPalette`/`TimeSeriesChart`), `tsc --noEmit` clean. `ChartFrame`/`BarChart`/`LineChart`/`palette.js` confirmed untouched. |
 | MSG-6j | Poll option label collides with its vote-count/percent text at zero gap | Operator screenshots from jg-ferien production: `PollCard.jsx` renders each option's label and result text in a `Stack justifyContent="space-between"` with no `spacing`, inside a `MessageBubble` that is `width: fit-content` — since the bubble's own width is derived from this exact content, there is never leftover space for space-between to distribute, so label and vote-count/percent text end up flush against each other. Percentage math itself confirmed correct (operator's second screenshot showed the right numbers once both votes had landed) -- layout only. | 2026-08-04 | done | e47e243, c480bce | Envelope: [work-orders/MSG-6j.md](work-orders/MSG-6j.md). Two additive fixes: `spacing={1}` on the label/result row so space-between can never collapse to zero gap; `minWidth: 260` on the poll's `Paper`, reconciled against `MessageBubble`'s `maxWidth: min(75%, 680px)` ceiling at a 375px viewport (75% = 281px there). **Codex → Claude fallback**: Codex exited immediately on "workspace out of credits" (twice) before writing any code, so this session implemented directly — author-flip rule applied, independent `reviewer` ran before commit. **One finding addressed before commit**: a speculative `noWrap` added to the result-text `Typography` (not one of the WO's two prescribed fixes) risked silently ellipsizing the vote-count/percent text on a narrow squeeze instead of wrapping — worse than the reported bug for a sighted user, since the count would become invisible rather than merely tight. Reverted. **Disclosed, not fixed (P3, WO only required 375px verification)**: `minWidth: 260` can still exceed `MessageBubble`'s ceiling below ~347px viewport width (e.g. a 320px device) — a residual squeeze risk on narrower-than-tested devices. Live browser verification at 375px was not performed this round (port conflict with a concurrent session's dev server, unresolvable from this session) — relied on `getComputedStyle`-based regression tests instead, non-vacuity proven by temporarily removing the `spacing` fix and confirming the test fails. Gate: `tests/messagingPollRendering.test.jsx` 7/7 (2 new); full suite 278/279 (the one failure, `NotificationsProvider.test.jsx`, is an unrelated WebSocket-mock timing flake under full-suite load, confirmed passing 9/9 in isolation); `tsc -p tsconfig.build.json --noEmit` clean. Published as npm 2.26.3 (confirmed via `gh run list` on the publish workflow). **jg-ferien's ucm pin bump to 2.26.3 is a separate, not-yet-done step.** |
+| 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 as npm 2.28.0 (bundled with AUTH-2 in the same release). 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 as npm 2.28.0. Companion: AUTH-1. |

package/dist/components/PasswordChangeForm.js

@@ -6,22 +6,32 @@ import { useTranslation } from 'react-i18next';
  * A simplified form to handle password changes.
  * Does not require password confirmation.
  */
-export function PasswordChangeForm({ onSubmit, submitting = false }) {
+export function PasswordChangeForm({ onSubmit, submitting = false, passwordRulesHint, minPasswordLength = 8, allowNumericPassword = false, }) {
     const { t } = useTranslation();
     const [currentPassword, setCurrentPassword] = useState('');
     const [newPassword, setNewPassword] = useState('');
+    const [localErrorKey, setLocalErrorKey] = useState(null);
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!onSubmit)
             return;
+        setLocalErrorKey(null);
+        if (minPasswordLength > 0 && newPassword.length < minPasswordLength) {
+            setLocalErrorKey('Auth.PASSWORD_TOO_SHORT_LOCAL');
+            return;
+        }
+        if (!allowNumericPassword && /^\d+$/.test(newPassword)) {
+            setLocalErrorKey('Auth.PASSWORD_NUMERIC_LOCAL');
+            return;
+        }
         // Parent steuert Loading/Errors, hier nur Aufruf
         await onSubmit(currentPassword, newPassword);
         // Optional: Felder zurücksetzen bei Erfolg (macht dein Parent aktuell so)
         setCurrentPassword('');
         setNewPassword('');
     };
-    return (_jsx(Box, { component: "form", onSubmit: handleSubmit, sx: { maxWidth: 500 }, children: _jsxs(Stack, { spacing: 2, children: [_jsx(TextField, { label: t('Auth.CURRENT_PASSWORD_LABEL'), type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), required: true, fullWidth: true, disabled: submitting }), _jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL'), type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), required: true, fullWidth: true, disabled: submitting }), _jsx(Box, { children: _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
-                            ? t('Auth.CHANGE_PASSWORD_BUTTON_LOADING')
-                            : t('Auth.CHANGE_PASSWORD_BUTTON') }) })] }) }));
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { maxWidth: 500 }, children: [localErrorKey && (_jsx(Box, { sx: { color: 'error.main', fontSize: 14, mb: 2 }, children: t(localErrorKey) })), _jsxs(Stack, { spacing: 2, children: [_jsx(TextField, { label: t('Auth.CURRENT_PASSWORD_LABEL'), type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), required: true, fullWidth: true, disabled: submitting }), _jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL'), type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), required: true, fullWidth: true, disabled: submitting, helperText: passwordRulesHint || t('Auth.PASSWORD_RULES_HINT') }), _jsx(Box, { children: _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
+                                ? t('Auth.CHANGE_PASSWORD_BUTTON_LOADING')
+                                : t('Auth.CHANGE_PASSWORD_BUTTON') }) })] })] }));
 }
 ;

package/dist/components/PasswordSetForm.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
  * Simple form to set a new password (once, with confirmation).
  * Caller passes onSubmit(newPassword) and handles redirect / API call.
  */
-export function PasswordSetForm({ onSubmit, submitting = false }) {
+export function PasswordSetForm({ onSubmit, submitting = false, passwordRulesHint, minPasswordLength = 8, allowNumericPassword = false, }) {
     const { t } = useTranslation();
     const [password1, setPassword1] = useState('');
     const [password2, setPassword2] = useState('');
@@ -23,11 +23,19 @@ export function PasswordSetForm({ onSubmit, submitting = false }) {
             setLocalErrorKey('Auth.PASSWORD_SET_LOCAL_MISMATCH');
             return;
         }
+        if (minPasswordLength > 0 && password1.length < minPasswordLength) {
+            setLocalErrorKey('Auth.PASSWORD_TOO_SHORT_LOCAL');
+            return;
+        }
+        if (!allowNumericPassword && /^\d+$/.test(password1)) {
+            setLocalErrorKey('Auth.PASSWORD_NUMERIC_LOCAL');
+            return;
+        }
         if (onSubmit) {
             onSubmit(password1);
         }
     };
-    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [localErrorKey && (_jsx(Box, { sx: { color: 'error.main', fontSize: 14 }, children: t(localErrorKey) })), _jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password1, onChange: (e) => setPassword1(e.target.value), disabled: submitting }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password2, onChange: (e) => setPassword2(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
+    return (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }, children: [localErrorKey && (_jsx(Box, { sx: { color: 'error.main', fontSize: 14 }, children: t(localErrorKey) })), _jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password1, onChange: (e) => setPassword1(e.target.value), disabled: submitting, helperText: passwordRulesHint || t('Auth.PASSWORD_RULES_HINT') }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL'), type: "password", fullWidth: true, autoComplete: "new-password", value: password2, onChange: (e) => setPassword2(e.target.value), disabled: submitting }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
                     ? t('Auth.PASSWORD_SET_BUTTON_LOADING')
                     : t('Auth.PASSWORD_SET_BUTTON') })] }));
 }

package/dist/components/charts/TimeSeriesChart.js

@@ -8,6 +8,22 @@ import { useNeutralChartPalette } from './palette';
 // Fixed platform-wide range -> granularity mapping (operator decision, CHART-2 /
 // dcm ACT-1) — the resolution follows the window and is never an independent
 // caller-supplied control. Every preset lands between a dozen and fifty points.
+// Preset default height (CHART-4): MUI X-Charts' responsive container
+// measures its actual parent height via ResizeObserver and draws nothing
+// if that parent has none — ChartFrame's flex-centered content Box does
+// NOT stretch its child to fill available height (alignItems: 'center'),
+// so BarChart needs its own explicit size, not just ChartFrame's.
+// `height` forwards straight to MuiBarChart's own native height prop
+// (bypassing ResizeObserver-based measurement entirely), matching the
+// confirmed-working dev/entries.jsx BarChartEntry reference.
+// Deliberate, known exception to DESIGN.md #14 ("responsive = container-
+// sized, not fixed px"): width stays responsive (unset, still auto-
+// measured), only height is fixed, and only because MUI X-Charts' own
+// ResizeObserver-based height measurement is what silently produced a
+// zero-height chart in the first place (CHART-4). Do not "fix" this back
+// to a responsive/aspect-ratio height without re-verifying the underlying
+// MUI measurement bug is actually resolved.
+const CHART_HEIGHT = 320;
 const RANGE_OPTIONS = [
     { key: '1d', granularity: 'hour', labelKey: 'TimeSeriesChart.RANGE_1_DAY' },
     { key: '1w', granularity: '4hour', labelKey: 'TimeSeriesChart.RANGE_1_WEEK' },
@@ -33,9 +49,33 @@ export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, data,
     const palette = useNeutralChartPalette().categorical;
     const seriesConfig = (data === null || data === void 0 ? void 0 : data.series) || [];
     const [range, setRange] = useState(defaultRange);
-    // Series identity (keys) is assumed stable for a given chart instance — the
-    // toggle set is initialized once from the first data the chart receives.
-    const [visibleKeys, setVisibleKeys] = useState(() => new Set(seriesConfig.map((series) => series.key)));
+    // Series identity (keys) is NOT assumed stable at mount: the host commonly
+    // mounts with empty data and fills it asynchronously (fetch-after-mount),
+    // so visibleKeys must sync as new keys appear rather than being captured
+    // once. seenKeys tracks every key ever observed so that a key present in
+    // seriesConfig but absent from visibleKeys is recognized as a deliberate
+    // user toggle-off (stays off) rather than treated as new (defaulted
+    // visible) on the next data update. Both are plain state (not a ref) and
+    // updated together in the render body — React's documented pattern for
+    // syncing derived state from props — so an interrupted/discarded render
+    // (concurrent features) rolls both back together instead of leaving
+    // seenKeys mutated while the paired visibleKeys update is dropped.
+    const [seenKeys, setSeenKeys] = useState(() => new Set());
+    const [visibleKeys, setVisibleKeys] = useState(() => new Set());
+    const currentKeys = seriesConfig.map((series) => series.key);
+    const newKeys = currentKeys.filter((key) => !seenKeys.has(key));
+    if (newKeys.length > 0) {
+        setSeenKeys((previous) => {
+            const next = new Set(previous);
+            newKeys.forEach((key) => next.add(key));
+            return next;
+        });
+        setVisibleKeys((previous) => {
+            const next = new Set(previous);
+            newKeys.forEach((key) => next.add(key));
+            return next;
+        });
+    }
     const handleRangeChange = (event) => {
         const nextRange = event.target.value;
         setRange(nextRange);
@@ -62,6 +102,6 @@ export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, data,
                             color: palette[index % palette.length],
                             '&.Mui-checked': { color: palette[index % palette.length] },
                         } })), label: series.label }, series.key))) }))] }));
-    return (_jsx(ChartFrame, { title: title, subtitle: subtitle, toolbar: toolbar, loading: loading, error: error, isEmpty: isDataEmpty, children: !isDataEmpty && (_jsx(BarChart, { xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xAxis: [{ data: (data === null || data === void 0 ? void 0 : data.xLabels) || [] }], series: visibleSeries.map((series) => ({ data: series.data, label: series.label })), palette: visiblePalette })) }));
+    return (_jsx(ChartFrame, { title: title, subtitle: subtitle, toolbar: toolbar, loading: loading, error: error, isEmpty: isDataEmpty, minHeight: CHART_HEIGHT, children: !isDataEmpty && (_jsx(BarChart, { xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xAxis: [{ data: (data === null || data === void 0 ? void 0 : data.xLabels) || [] }], series: visibleSeries.map((series) => ({ data: series.data, label: series.label })), palette: visiblePalette, height: CHART_HEIGHT })) }));
 }
 export default TimeSeriesChart;

package/dist/i18n/authTranslations.js

@@ -882,6 +882,24 @@ export const authTranslations = {
         "en": "The passwords do not match.",
         "sw": "Manenosiri hayalingani."
     },
+    "Auth.PASSWORD_RULES_HINT": {
+        "de": "Mindestens 8 Zeichen, nicht nur Zahlen, kein gängiges Passwort.",
+        "fr": "Au moins 8 caractères, pas uniquement des chiffres, pas un mot de passe courant.",
+        "en": "At least 8 characters, not entirely numeric, not a commonly used password.",
+        "sw": "Angalau herufi 8, si tarakimu tu, si nenosiri linalotumika sana."
+    },
+    "Auth.PASSWORD_TOO_SHORT_LOCAL": {
+        "de": "Das Passwort muss mindestens 8 Zeichen lang sein.",
+        "fr": "Le mot de passe doit contenir au moins 8 caractères.",
+        "en": "The password must be at least 8 characters long.",
+        "sw": "Nenosiri linahitajika kuwa na angalau herufi 8."
+    },
+    "Auth.PASSWORD_NUMERIC_LOCAL": {
+        "de": "Das Passwort darf nicht nur aus Zahlen bestehen.",
+        "fr": "Le mot de passe ne peut pas être uniquement composé de chiffres.",
+        "en": "The password cannot be entirely numeric.",
+        "sw": "Nenosiri haliwezi kuwa na tarakimu tu."
+    },
     "Auth.PROFILE_LOAD_FAILED": {
         "de": "Profil konnte nicht geladen werden.",
         "fr": "Le profil n’a pas pu être chargé.",
@@ -1805,5 +1823,80 @@ export const authTranslations = {
         "fr": "Le mot de passe est incorrect.",
         "en": "The password is incorrect.",
         "sw": "Nenosiri si sahihi."
+    },
+    // Raw backend auth error codes (allauth-headless + Django password validators).
+    // Keyed by the exact code string so the existing `t(err.code)` call sites resolve
+    // as a drop-in, without any component change. See AUTH-2.
+    "email_password_mismatch": {
+        "de": "E-Mail-Adresse oder Passwort ist falsch.",
+        "fr": "Adresse e-mail ou mot de passe incorrect.",
+        "en": "Email address or password is incorrect.",
+        "sw": "Barua pepe au nenosiri sio sahihi."
+    },
+    "username_password_mismatch": {
+        "de": "Benutzername oder Passwort ist falsch.",
+        "fr": "Nom d'utilisateur ou mot de passe incorrect.",
+        "en": "Username or password is incorrect.",
+        "sw": "Jina la mtumiaji au nenosiri sio sahihi."
+    },
+    "phone_password_mismatch": {
+        "de": "Telefonnummer oder Passwort ist falsch.",
+        "fr": "Numéro de téléphone ou mot de passe incorrect.",
+        "en": "Phone number or password is incorrect.",
+        "sw": "Nambari ya simu au nenosiri sio sahihi."
+    },
+    "too_many_login_attempts": {
+        "de": "Zu viele fehlgeschlagene Anmeldeversuche. Bitte versuchen Sie es später erneut.",
+        "fr": "Trop de tentatives de connexion échouées. Veuillez réessayer plus tard.",
+        "en": "Too many failed login attempts. Please try again later.",
+        "sw": "Majaribio mengi ya kuingia yameshindwa. Tafadhali jaribu tena baadaye."
+    },
+    "invalid_login": {
+        "de": "Ungültige Anmeldedaten.",
+        "fr": "Données de connexion invalides.",
+        "en": "Invalid login credentials.",
+        "sw": "Taarifa za kuingia si sahihi."
+    },
+    "account_inactive": {
+        "de": "Dieses Konto ist derzeit inaktiv.",
+        "fr": "Ce compte est actuellement inactif.",
+        "en": "This account is currently inactive.",
+        "sw": "Akaunti hii haitumiki kwa sasa."
+    },
+    "enter_current_password": {
+        "de": "Das aktuelle Passwort ist falsch.",
+        "fr": "Le mot de passe actuel est incorrect.",
+        "en": "The current password is incorrect.",
+        "sw": "Nenosiri la sasa si sahihi."
+    },
+    "password_too_short": {
+        "de": "Das Passwort muss mindestens 8 Zeichen lang sein.",
+        "fr": "Le mot de passe doit contenir au moins 8 caractères.",
+        "en": "The password must be at least 8 characters long.",
+        "sw": "Nenosiri linahitajika kuwa na angalau herufi 8."
+    },
+    "password_too_common": {
+        "de": "Dieses Passwort ist zu gängig und leicht zu erraten.",
+        "fr": "Ce mot de passe est trop courant et facile à deviner.",
+        "en": "This password is too common and easy to guess.",
+        "sw": "Nenosiri hili linatumika sana na ni rahisi kubashiri."
+    },
+    "password_entirely_numeric": {
+        "de": "Das Passwort darf nicht nur aus Zahlen bestehen.",
+        "fr": "Le mot de passe ne peut pas être uniquement composé de chiffres.",
+        "en": "The password cannot be entirely numeric.",
+        "sw": "Nenosiri haliwezi kuwa na tarakimu tu."
+    },
+    "password_too_similar": {
+        "de": "Das Passwort ist Ihren persönlichen Daten zu ähnlich.",
+        "fr": "Le mot de passe est trop similaire à vos informations personnelles.",
+        "en": "The password is too similar to your personal information.",
+        "sw": "Nenosiri linafanana sana na taarifa zako binafsi."
+    },
+    "incorrect_code": {
+        "de": "Der eingegebene Code ist falsch.",
+        "fr": "Le code saisi est incorrect.",
+        "en": "The code you entered is incorrect.",
+        "sw": "Msimbo uliouweka si sahihi."
     }
 };

package/dist/i18n/notificationsTranslations.js

@@ -19,6 +19,14 @@ export const notificationsTranslations = {
     'NotificationSettings.PUSH_CONFLICT': { de: 'Dieses Gerät ist bereits mit einem anderen Konto für Push-Benachrichtigungen verbunden.', fr: 'Cet appareil est déjà associé à un autre compte pour les notifications push.', en: 'This device is already associated with another account for push notifications.', sw: 'Kifaa hiki tayari kimeunganishwa na akaunti nyingine kwa arifa za push.' },
     'NotificationSettings.PUSH_NOT_SUPPORTED': { de: 'Push-Benachrichtigungen werden von diesem Browser nicht unterstützt.', fr: 'Les notifications push ne sont pas prises en charge par ce navigateur.', en: 'Push notifications are not supported by this browser.', sw: 'Arifa za push hazitumiki na kivinjari hiki.' },
     'NotificationSettings.IOS_HINT': { de: 'Füge diese App zuerst zum Home-Bildschirm hinzu, um Push-Benachrichtigungen zu aktivieren.', fr: 'Ajoutez d’abord cette application à l’écran d’accueil pour activer les notifications push.', en: 'Add this app to your home screen first to enable push notifications.', sw: 'Ongeza programu hii kwenye skrini yako ya mwanzo kwanza ili kuwasha arifa za push.' },
+    'NotificationSettings.REACH_TITLE': { de: 'Wie du erreicht wirst', fr: 'Comment vous êtes joint', en: 'How you’re reached', sw: 'Jinsi unavyofikiwa' },
+    'NotificationSettings.REACH_ACTIVE': { de: 'Erreicht dich per E-Mail oder Push, je nach deiner Wahl oben.', fr: 'Vous joint par e-mail ou push, selon votre choix ci-dessus.', en: 'Reaches you by email or push, whichever you’ve chosen above.', sw: 'Inakufikia kwa barua pepe au push, kulingana na uchaguzi wako hapo juu.' },
+    'NotificationSettings.REACH_PASSIVE': { de: 'Wird angezeigt, wenn du nachschaust – keine E-Mail oder Push.', fr: 'Affiché seulement quand vous regardez – pas d’e-mail ni de push.', en: 'Shown only when you look – no email or push.', sw: 'Inaonyeshwa tu ukiangalia – hakuna barua pepe au push.' },
+    'NotificationSettings.REACH_BOTH': { de: 'Erreicht dich aktiv und bleibt zusätzlich sichtbar, wenn du nachschaust.', fr: 'Vous joint activement et reste visible quand vous regardez.', en: 'Reaches you actively, and also stays visible when you look.', sw: 'Inakufikia kikamilifu, na pia inabaki kuonekana ukiangalia.' },
+    'NotificationSettings.REACH_NO_ACTIVE_CHANNEL': { de: 'Kein E-Mail oder Push konfiguriert – diese Benachrichtigung erreicht dich derzeit nicht.', fr: 'Aucun e-mail ou push configuré – cette notification ne vous atteint pas actuellement.', en: 'No email or push configured – this notification does not currently reach you.', sw: 'Hakuna barua pepe au push iliyowekwa – arifa hii kwa sasa haikufikii.' },
+    'NotificationSettings.SUBSCRIPTIONS_TITLE': { de: 'Abonnements', fr: 'Abonnements', en: 'Subscriptions', sw: 'Usajili' },
+    'NotificationSettings.SUBSCRIPTIONS_SUBTITLE': { de: 'Ereignisse, für die du dich freiwillig anmelden kannst.', fr: 'Événements auxquels vous pouvez vous inscrire volontairement.', en: 'Events you can opt in to receive.', sw: 'Matukio unayoweza kujiunga kupokea.' },
+    'NotificationSettings.SUBSCRIPTION_ERROR': { de: 'Abonnement konnte nicht aktualisiert werden.', fr: 'Impossible de mettre à jour l’abonnement.', en: 'Subscription could not be updated.', sw: 'Usajili haukuweza kusasishwa.' },
     'PopupSurface.CLOSE': { de: 'Schliessen', fr: 'Fermer', en: 'Close', sw: 'Funga' },
     'PopupSurface.TITLE': { de: 'Benachrichtigung', fr: 'Notification', en: 'Notification', sw: 'Arifa' },
 };

package/dist/notifications/NotificationSettings.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
@@ -9,7 +9,20 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 import Typography from '@mui/material/Typography';
 import NotificationsIcon from '@mui/icons-material/Notifications';
-import { getNotificationPreferences, getVapidPublicKey, patchNotificationPreferences, removePushSubscription, savePushSubscription, urlBase64ToUint8Array, } from './api';
+import { getNotificationPreferences, getVapidPublicKey, patchNotificationPreferences, removePushSubscription, savePushSubscription, setNotificationCategorySubscription, urlBase64ToUint8Array, } from './api';
+function reachLabelKey(notificationType) {
+    const noActiveChannel = notificationType.active && notificationType.has_active_channel === false;
+    if (notificationType.active && notificationType.passive) {
+        // Scope C's bounded fallback: a "both" type still reaches the user passively
+        // (chip) when no active channel is configured -- it is not undelivered, so it
+        // must not show the "does not reach you" warning meant for active-only types.
+        return noActiveChannel ? 'NotificationSettings.REACH_PASSIVE' : 'NotificationSettings.REACH_BOTH';
+    }
+    if (notificationType.active) {
+        return noActiveChannel ? 'NotificationSettings.REACH_NO_ACTIVE_CHANNEL' : 'NotificationSettings.REACH_ACTIVE';
+    }
+    return 'NotificationSettings.REACH_PASSIVE';
+}
 function getPushSupport() {
     return typeof navigator !== 'undefined'
         && typeof window !== 'undefined'
@@ -26,6 +39,7 @@ function getIosInstallState() {
     return isIos && !standalone;
 }
 export function NotificationSettings() {
+    var _a, _b;
     const { t } = useTranslation();
     const [preferences, setPreferences] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -35,6 +49,7 @@ export function NotificationSettings() {
     const [pushSubscribed, setPushSubscribed] = useState(false);
     const [error, setError] = useState('');
     const [conflict, setConflict] = useState('');
+    const [savingSubscription, setSavingSubscription] = useState(null);
     const pushSupported = getPushSupport();
     const iosNeedsInstall = getIosInstallState();
     useEffect(() => {
@@ -134,6 +149,26 @@ export function NotificationSettings() {
             setSavingPreview(false);
         }
     };
+    const handleSubscriptionToggle = async (category, event) => {
+        var _a;
+        const requested = event.target.checked;
+        setSavingSubscription(category);
+        setError('');
+        try {
+            const result = await setNotificationCategorySubscription(category, requested);
+            // Reflect what the server actually recorded, not the checkbox's optimistic
+            // value -- a 2xx response with a different `subscribed` (e.g. a server-side
+            // clamp) must not be silently overridden by what the user clicked.
+            const confirmed = (_a = result === null || result === void 0 ? void 0 : result.subscribed) !== null && _a !== void 0 ? _a : requested;
+            setPreferences((current) => (Object.assign(Object.assign({}, current), { subscribable_categories: current.subscribable_categories.map((row) => (row.category === category ? Object.assign(Object.assign({}, row), { subscribed: confirmed }) : row)) })));
+        }
+        catch (_b) {
+            setError(t('NotificationSettings.SUBSCRIPTION_ERROR'));
+        }
+        finally {
+            setSavingSubscription(null);
+        }
+    };
     const handleDisablePush = async () => {
         setSavingPush(true);
         setError('');
@@ -158,6 +193,16 @@ export function NotificationSettings() {
     if (loading) {
         return _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(CircularProgress, {}) });
     }
-    return (_jsxs(Box, { sx: { maxWidth: 520 }, children: [_jsxs(Typography, { variant: "h6", gutterBottom: true, sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, {}), t('NotificationSettings.TITLE')] }), _jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: t('NotificationSettings.SUBTITLE') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(''), children: error }), conflict && _jsx(Alert, { severity: "warning", sx: { mb: 2 }, onClose: () => setConflict(''), children: conflict }), _jsx(Box, { sx: { py: 2 }, children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(preferences === null || preferences === void 0 ? void 0 : preferences.email_opt_in), onChange: handleEmailToggle, disabled: savingEmail }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.EMAIL_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.EMAIL_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }) }), _jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [iosNeedsInstall && _jsx(Alert, { severity: "info", sx: { mb: 1.5 }, children: t('NotificationSettings.IOS_HINT') }), !pushSupported && !iosNeedsInstall && _jsx(Alert, { severity: "warning", sx: { mb: 1.5 }, children: t('NotificationSettings.PUSH_NOT_SUPPORTED') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: pushSubscribed, onChange: (event) => (event.target.checked ? handleEnablePush() : handleDisablePush()), disabled: savingPush || !pushSupported || iosNeedsInstall })), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.PUSH_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.PUSH_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: (preferences === null || preferences === void 0 ? void 0 : preferences.push_preview_opt_in) !== false, onChange: handlePreviewToggle, disabled: savingPreview || !(preferences === null || preferences === void 0 ? void 0 : preferences.push_opt_in) })), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.PUSH_PREVIEW_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.PUSH_PREVIEW_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0, mt: 1.5 } })] })] }));
+    return (_jsxs(Box, { sx: { maxWidth: 520 }, children: [_jsxs(Typography, { variant: "h6", gutterBottom: true, sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, {}), t('NotificationSettings.TITLE')] }), _jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: t('NotificationSettings.SUBTITLE') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(''), children: error }), conflict && _jsx(Alert, { severity: "warning", sx: { mb: 2 }, onClose: () => setConflict(''), children: conflict }), _jsx(Box, { sx: { py: 2 }, children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(preferences === null || preferences === void 0 ? void 0 : preferences.email_opt_in), onChange: handleEmailToggle, disabled: savingEmail }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.EMAIL_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.EMAIL_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }) }), _jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [iosNeedsInstall && _jsx(Alert, { severity: "info", sx: { mb: 1.5 }, children: t('NotificationSettings.IOS_HINT') }), !pushSupported && !iosNeedsInstall && _jsx(Alert, { severity: "warning", sx: { mb: 1.5 }, children: t('NotificationSettings.PUSH_NOT_SUPPORTED') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: pushSubscribed, onChange: (event) => (event.target.checked ? handleEnablePush() : handleDisablePush()), disabled: savingPush || !pushSupported || iosNeedsInstall })), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.PUSH_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.PUSH_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: (preferences === null || preferences === void 0 ? void 0 : preferences.push_preview_opt_in) !== false, onChange: handlePreviewToggle, disabled: savingPreview || !(preferences === null || preferences === void 0 ? void 0 : preferences.push_opt_in) })), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.PUSH_PREVIEW_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.PUSH_PREVIEW_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0, mt: 1.5 } })] }), ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.notification_types) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: t('NotificationSettings.REACH_TITLE') }), preferences.notification_types.map((notificationType) => {
+                                const labelKey = reachLabelKey(notificationType);
+                                const reachText = t(labelKey);
+                                // Reserve Alert (a colored banner) for the one case that is actually a
+                                // warning -- an active-only type nobody can currently reach. Routine
+                                // reach description is static settings copy, not a status message.
+                                if (labelKey === 'NotificationSettings.REACH_NO_ACTIVE_CHANNEL') {
+                                    return (_jsxs(Alert, { severity: "warning", sx: { mb: 1 }, children: [_jsx("strong", { children: notificationType.label }), " \u2014 ", reachText] }, notificationType.key));
+                                }
+                                return (_jsxs(Box, { sx: { py: 0.5 }, children: [_jsx(Typography, { variant: "body2", children: notificationType.label }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: reachText })] }, notificationType.key));
+                            })] })] })), ((_b = preferences === null || preferences === void 0 ? void 0 : preferences.subscribable_categories) === null || _b === void 0 ? void 0 : _b.length) > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: t('NotificationSettings.SUBSCRIPTIONS_TITLE') }), _jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: t('NotificationSettings.SUBSCRIPTIONS_SUBTITLE') }), preferences.subscribable_categories.map((row) => (_jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(row.subscribed), onChange: (event) => handleSubscriptionToggle(row.category, event), disabled: savingSubscription === row.category })), label: row.label, labelPlacement: "end", sx: { alignItems: 'center', ml: 0, display: 'flex' } }, row.category)))] })] }))] }));
 }
 export default NotificationSettings;

package/dist/notifications/api.js

@@ -1,6 +1,7 @@
 import apiClient from '../auth/apiClient';
 const PREFERENCES_URL = '/api/notifications/preferences/';
 const PUSH_SUBSCRIPTION_URL = `${PREFERENCES_URL}push-subscription/`;
+const SUBSCRIPTIONS_URL = `${PREFERENCES_URL}subscriptions/`;
 export async function getNotificationPreferences() {
     const response = await apiClient.get(PREFERENCES_URL);
     return response.data;
@@ -9,6 +10,10 @@ export async function patchNotificationPreferences(patch) {
     const response = await apiClient.patch(PREFERENCES_URL, patch);
     return response.data;
 }
+export async function setNotificationCategorySubscription(category, subscribed) {
+    const response = await apiClient.post(SUBSCRIPTIONS_URL, { category, subscribed });
+    return response.data;
+}
 export async function getVapidPublicKey() {
     var _a;
     const response = await apiClient.get(`${PREFERENCES_URL}vapid-public-key/`);

package/package.json

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

package/src/components/PasswordChangeForm.jsx

@@ -6,15 +6,34 @@ import { useTranslation } from 'react-i18next';
  * A simplified form to handle password changes.
  * Does not require password confirmation.
  */
-export function PasswordChangeForm({ onSubmit, submitting = false }) {
+export function PasswordChangeForm({
+  onSubmit,
+  submitting = false,
+  passwordRulesHint,
+  minPasswordLength = 8,
+  allowNumericPassword = false,
+}) {
   const { t } = useTranslation();
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
+  const [localErrorKey, setLocalErrorKey] = useState(null);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!onSubmit) return;
 
+    setLocalErrorKey(null);
+
+    if (minPasswordLength > 0 && newPassword.length < minPasswordLength) {
+      setLocalErrorKey('Auth.PASSWORD_TOO_SHORT_LOCAL');
+      return;
+    }
+
+    if (!allowNumericPassword && /^\d+$/.test(newPassword)) {
+      setLocalErrorKey('Auth.PASSWORD_NUMERIC_LOCAL');
+      return;
+    }
+
     // Parent steuert Loading/Errors, hier nur Aufruf
     await onSubmit(currentPassword, newPassword);
 
@@ -25,6 +44,11 @@ export function PasswordChangeForm({ onSubmit, submitting = false }) {
 
   return (
     <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500 }}>
+      {localErrorKey && (
+        <Box sx={{ color: 'error.main', fontSize: 14, mb: 2 }}>
+          {t(localErrorKey)}
+        </Box>
+      )}
       <Stack spacing={2}>
         <TextField
           label={t('Auth.CURRENT_PASSWORD_LABEL')}
@@ -43,6 +67,7 @@ export function PasswordChangeForm({ onSubmit, submitting = false }) {
           required
           fullWidth
           disabled={submitting}
+          helperText={passwordRulesHint || t('Auth.PASSWORD_RULES_HINT')}
         />
         <Box>
           <Button

package/src/components/PasswordSetForm.jsx

@@ -7,7 +7,13 @@ import { useTranslation } from 'react-i18next';
  * Simple form to set a new password (once, with confirmation).
  * Caller passes onSubmit(newPassword) and handles redirect / API call.
  */
-export function PasswordSetForm({ onSubmit, submitting = false }) {
+export function PasswordSetForm({
+  onSubmit,
+  submitting = false,
+  passwordRulesHint,
+  minPasswordLength = 8,
+  allowNumericPassword = false,
+}) {
   const { t } = useTranslation();
 
   const [password1, setPassword1] = useState('');
@@ -28,6 +34,16 @@ export function PasswordSetForm({ onSubmit, submitting = false }) {
       return;
     }
 
+    if (minPasswordLength > 0 && password1.length < minPasswordLength) {
+      setLocalErrorKey('Auth.PASSWORD_TOO_SHORT_LOCAL');
+      return;
+    }
+
+    if (!allowNumericPassword && /^\d+$/.test(password1)) {
+      setLocalErrorKey('Auth.PASSWORD_NUMERIC_LOCAL');
+      return;
+    }
+
     if (onSubmit) {
       onSubmit(password1);
     }
@@ -53,6 +69,7 @@ export function PasswordSetForm({ onSubmit, submitting = false }) {
         value={password1}
         onChange={(e) => setPassword1(e.target.value)}
         disabled={submitting}
+        helperText={passwordRulesHint || t('Auth.PASSWORD_RULES_HINT')}
       />
 
       <TextField