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

package/WORK_ORDERS.md

@@ -24,7 +24,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
-| THEME-3 | Add the missing "subtle surface" baseline token | Adds `palette.background.subtle` (`#F4F5F6`, fixed baseline constant alongside `default`/`paper`) to `createAppTheme` and registers it in `THEME_COMPLETENESS_SURFACES`. Found by `cockpit/UI-6`: the `UI-4` design-language sheet's canonical token table names this as a baseline-supplied "inset surface" replacing `cockpit.surface2` (16 of 195 token reads in that WO), but the value was never actually wired into the shipped package — confirmed by grep, not assumed. `cockpit/UI-6` is blocked on this landing + publishing first, per this estate's own "gap in the shared kit is a ucm WO, not a local workaround" rule. Full spec: [work-orders/THEME-3.md](work-orders/THEME-3.md). `2.33.2` (patch). | 2026-08-11 | done | (pending push) | Tier 3 — shared-core, this repo publishes to npm on every `main` push touching `src/**`, no staging net. Codex implemented in one pass (stdin invocation), exit 0, `RESULT: DONE`, 17/17 of its own new tests green. **Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) ran concurrently — both clean, no findings.** Both independently re-derived the safety mechanism rather than trusting the WO's claim: `MUI_DEFAULT_THEME = createTheme()` never defines `background.subtle` (vanilla MUI only has `.default`/`.paper`), so `assertThemeComplete`'s `sameValue` check can never flag the new surface for any real adopter — the same unexempted treatment `background.default` already gets; `background.paper`'s exemption (needed because MUI's own default theme is also white) was correctly not copied. Both read `fitness-monitor`'s actual `theme.js`/`theme.test.js` directly (the one real production adopter, hard-asserting `assertThemeComplete(theme).findings` equals `[]`) and confirmed this diff cannot break it. `ui_reviewer` additionally grepped every sibling app repo under `webapps/` for `createAppTheme` — no other live consumer exists; cockpit's own adoption (`UI-6`) isn't wired yet. `reviewer` independently recomputed the contrast ratio in a throwaway script and got the same `5.3748:1` the diff claims (not the design sheet's `4.81:1`, which was computed on the sheet's own static canvas — a source discrepancy, not a functional risk; both clear AA). **Orchestrator's own verification:** built the package (`npm run build`) and attempted to run `fitness-monitor`'s real assertions against the fresh `dist/` via raw Node ESM import — hit a pre-existing (confirmed via `git show`, not introduced here) `tsc`-emitted extensionless-import quirk that only affects raw `node`, not the Vite/Vitest resolution every real consumer (incl. fitness-monitor's own suite) uses; fell back to the scoped vitest run instead. Tests: 17/17 green (`tests/createAppTheme.test.js` + `tests/themeCompleteness.test.js`), run by the Orchestrator. No visual/prototype gate — token-only change with no rendered specimen in this repo (per the Envelope); the rendered check happens downstream in `cockpit/UI-6`. Semver: patch, applied by the Orchestrator per the WO's own reasoning (additive, resolves automatically, no adopter code change needed) — confirmed rather than assumed by both reviews. Unblocks `cockpit/UI-6`, which was waiting on this landing + publish. |
+| THEME-3 | Add the missing "subtle surface" baseline token | Adds `palette.background.subtle` (`#F4F5F6`, fixed baseline constant alongside `default`/`paper`) to `createAppTheme` and registers it in `THEME_COMPLETENESS_SURFACES`. Found by `cockpit/UI-6`: the `UI-4` design-language sheet's canonical token table names this as a baseline-supplied "inset surface" replacing `cockpit.surface2` (16 of 195 token reads in that WO), but the value was never actually wired into the shipped package — confirmed by grep, not assumed. `cockpit/UI-6` is blocked on this landing + publishing first, per this estate's own "gap in the shared kit is a ucm WO, not a local workaround" rule. Full spec: [work-orders/THEME-3.md](work-orders/THEME-3.md). `2.33.2` (patch). | 2026-08-11 | done | 1b25117 | Tier 3 — shared-core, this repo publishes to npm on every `main` push touching `src/**`, no staging net. Codex implemented in one pass (stdin invocation), exit 0, `RESULT: DONE`, 17/17 of its own new tests green. **Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) ran concurrently — both clean, no findings.** Both independently re-derived the safety mechanism rather than trusting the WO's claim: `MUI_DEFAULT_THEME = createTheme()` never defines `background.subtle` (vanilla MUI only has `.default`/`.paper`), so `assertThemeComplete`'s `sameValue` check can never flag the new surface for any real adopter — the same unexempted treatment `background.default` already gets; `background.paper`'s exemption (needed because MUI's own default theme is also white) was correctly not copied. Both read `fitness-monitor`'s actual `theme.js`/`theme.test.js` directly (the one real production adopter, hard-asserting `assertThemeComplete(theme).findings` equals `[]`) and confirmed this diff cannot break it. `ui_reviewer` additionally grepped every sibling app repo under `webapps/` for `createAppTheme` — no other live consumer exists; cockpit's own adoption (`UI-6`) isn't wired yet. `reviewer` independently recomputed the contrast ratio in a throwaway script and got the same `5.3748:1` the diff claims (not the design sheet's `4.81:1`, which was computed on the sheet's own static canvas — a source discrepancy, not a functional risk; both clear AA). **Orchestrator's own verification:** built the package (`npm run build`) and attempted to run `fitness-monitor`'s real assertions against the fresh `dist/` via raw Node ESM import — hit a pre-existing (confirmed via `git show`, not introduced here) `tsc`-emitted extensionless-import quirk that only affects raw `node`, not the Vite/Vitest resolution every real consumer (incl. fitness-monitor's own suite) uses; fell back to the scoped vitest run instead. Tests: 17/17 green (`tests/createAppTheme.test.js` + `tests/themeCompleteness.test.js`), run by the Orchestrator. No visual/prototype gate — token-only change with no rendered specimen in this repo (per the Envelope); the rendered check happens downstream in `cockpit/UI-6`. Semver: patch, applied by the Orchestrator per the WO's own reasoning (additive, resolves automatically, no adopter code change needed) — confirmed rather than assumed by both reviews. Unblocks `cockpit/UI-6`, which was waiting on this landing + publish. |
 | CHART-7 | `ChartFrame` gains a `titleVariant` prop | Adds `titleVariant` (default `'h6'`, unchanged from today's hardcoded value) to `ChartFrame`, forwarded to the title `Typography` — lets a dense panel grid (e.g. fitness-monitor's seven body-composition panels beside one hero chart) render smaller titles that recede instead of competing with the one chart that matters. One prop, not a `slotProps.title` system — deliberately minimal per the WO. Precondition of fitness-monitor's `FM-12` (DS-10). `2.32.0` (minor, additive). Full spec: [work-orders/CHART-7.md](work-orders/CHART-7.md). | 2026-08-10 | done | 14020d0 | Envelope authored by Expertenchat, no design question (short-form WO). No preconditions. Orchestrator filled a minimal Implementation map (the whole change is two lines in `ChartFrame.jsx`), ran Codex (stdin invocation). Codex added `titleVariant = 'h6'` to the prop destructure, forwarded it to the title `Typography`, wrote all 3 required tests, and bumped `2.31.1` → `2.32.0` per the WO's own stated version target. **Independent `reviewer` + `ui_reviewer` (both Haiku, proportionate to a small low-risk diff) ran concurrently — both found NO findings**, including explicit confirmation that only the prop-destructure line and the one `Typography` line changed (padding, foot row, subtitle/toolbar/slots byte-for-byte unchanged) and that the default-regression test is non-vacuous. Re-verified: 13/13 scoped vitest tests green, `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)**: no existing harness specimen used `titleVariant`, so the Orchestrator added one (two `ChartFrame`s side by side, default vs. `titleVariant="subtitle2"`) to `dev/entries.jsx` — confirmed live at 375px and 1280px that the override renders visibly smaller/lighter than the unchanged h6 default. |
 | THEME-2 | Two defects from the THEME-1/CHART-6 landings: `warning.main` contrast, `grid` replacing instead of merging | Fixes `palette.warning.main` (`#C08A2C`, 3.038:1 on white — fails AA) to `#976100` (the existing `text` tone, ~5.2:1), `contrastText` to `#FFFFFF`; `warning.fill`/`.text`/`.fillText`/`.bg` unchanged. Adds a completeness-assertion rule checking every status channel's `.main` against `#FFFFFF` and `background.default` at 4.5:1. Fixes `BarChart`/`LineChart`'s `grid` prop silently replacing (not merging) a caller's partial grid object; the required audit of sibling object-valued defaults found a second live instance (`legendPosition`, same bug class) and fixed it too. `2.31.1` (patch). Full spec: [work-orders/THEME-2.md](work-orders/THEME-2.md). | 2026-08-10 | done | 7d5039f | Envelope authored by Expertenchat, both defects fully diagnosed up front (no design question). Preconditions (THEME-1 `2.30.0`, CHART-6 `2.31.0`) verified. Orchestrator filled the Implementation map with the exact current-state code pointers for both defects, then ran Codex (stdin invocation). Codex's own audit (per the WO's "close the mechanism" instruction) found the `legendPosition` partial-override bug beyond the named `grid` fix and fixed it too, exactly as the WO anticipated ("fix that too and say so"). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently — both found NO findings**, including the reviewer's own hand-computed contrast check confirming `#976100` clears 4.5:1 against both `#FFFFFF` (~5.22:1) and `background.default` (~5.00:1). One thing the Orchestrator itself fixed (not a reviewer finding): a pre-existing THEME-1 regression test (`tests/createAppTheme.test.js`) asserted `palette[status].main === palette[status].fill` for all four status channels — THEME-2 deliberately breaks that equality for `warning` only (the whole point of the fix), so the assertion was updated to special-case `warning` against its new intended invariant (`main === text`, `contrastText === '#FFFFFF'`) while `success`/`error`/`info` keep the original assertion. Re-verified after the fix: 58/58 scoped + adjacent vitest tests green (`tests/themeCompleteness.test.js`, `tests/chartDefaults.test.js`, `tests/createAppTheme.test.js`, `tests/chartsPalette.test.js`, `tests/BarChart.test.jsx`, `tests/LineChart.test.jsx`, `tests/TimeSeriesChart.test.jsx`), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry — the WO's own point was that no existing specimen exercised `.main` (the `StatusChip`'s `sx={{bgcolor:'...fill'}}` and the `MuiAlert` `standardWarning` override both bypass it), so a new Button/Chip/`Alert variant="filled"` specimen row was added and confirmed live at 375px and 1280px: the warning tone now renders visibly darker (brown, white text) than the still-unchanged lighter-amber `fill`-based chip beside it. The "Caller overrides" `LineChart` specimen's `grid` prop was also changed from a complete `{horizontal:true,vertical:true}` object (which wouldn't have visually proven the merge) to a genuinely partial `{vertical:true}` one — confirmed live at both widths showing BOTH grid directions post-fix. |
 | CHART-6 | Chart-chrome defaults in the three wrappers, plus two generic fixes hoisted up | Closes the chart-chrome default surface in `BarChart`/`LineChart`/`TimeSeriesChart`: baseline tick font size (from `theme.typography.caption`), a horizontal grid, `showMark:false` with a filled-marker fix when a caller opts markers back in, automatic bottom-margin growth for rotated tick labels, a new `legendPosition` prop (default bottom-start), and `TimeSeriesChart`'s own toolbar becoming the sole legend (MUI's redundant second legend removed). Hoists `chartLabels.js` (short granularity-aware tick-label formatters) and a generalised `yearTickInterval` from fitness-monitor. `2.31.0`. Full spec: [work-orders/CHART-6.md](work-orders/CHART-6.md). | 2026-08-10 | done | 6dedc62 | Envelope authored by Expertenchat (DS-4). Precondition (THEME-1 landed + published `2.30.0`) verified before start. Orchestrator filled the Implementation map with concrete MUI X-Charts source pointers (installed `8.29.2`, not the WO's stated `8.28.2` — flagged and verified against the actual installed source throughout), then ran Codex (stdin invocation, same as THEME-1). Codex implemented `src/components/charts/{chartDefaults,chartLabels,yearTickInterval}.js`, wired all three wrappers, wrote the 10 required tests, and used a wrapper-level `slots.mark` composition for the filled-marker fix (a deliberate, now-documented deviation from the WO's named `MuiMarkElement` theme-token mechanism — the wrapper-level fix applies to all 14 consumers immediately on this version bump, not only to apps that separately adopt `createAppTheme`). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently.** `reviewer` found **R1 (P2)** — the marker-fill deviation from the WO's specified mechanism was undocumented; fixed with an explanatory code comment (functionally correct either way, this was a disclosure gap, not a bug). `ui_reviewer` found **U1 (P3)** — `SeriesToggleDot`'s 12px dot used hardcoded pixels instead of `theme.spacing()`; fixed. Both reviewers otherwise found the six highest-risk invariants (default-vs-caller-override merge order, filled markers, rotated-tick margin math, the double-legend fix, `yearTickInterval`'s generalisation, `skipAnimation` passthrough) correct and non-vacuously tested. **A third, more serious bug was found by the Orchestrator's own DS-1 two-width rendered check (not by either reviewer, since both are static-diff reviews)**: `withAxisDefaults` in `chartDefaults.js` only applied `defaults.scaleType` when the caller passed NO `xAxis`/`yAxis` array at all — a caller-supplied axis with `data` but no explicit `scaleType` (exactly what the new dev-harness "Chart defaults" `LineChart` specimen used) silently lost the wrapper's `'point'`/`'band'` scale default entirely, leaving MUI's scale undefined and every rendered line/point position `NaN` (`<path> attribute d: Expected number, "MNaN,...`, confirmed live via `read_console_messages` and only reproducible through a real MUI scale computation — a mocked prop-assertion test structurally cannot catch it, the same class of bug CHART-1/3/4/5 have each found before in this kit). Fixed by spreading `defaults` before `axis` in the per-axis merge (caller's own explicit `scaleType`, if any, still wins); a new regression test added (`tests/chartDefaults.test.js`, "keeps the default scaleType on a caller-supplied axis that does not set one"), confirmed against both `BarChart`'s `'band'` and `LineChart`'s `'point'` defaults. Re-verified after all three fixes: 44/44 scoped vitest tests green (10 new + 34 existing adjacent chart tests, no regressions), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry (which now also carries the two new `LineChart` chart-chrome specimens per the WO's "at least one chart that set the props and one that did not" requirement) at 375px and 1280px — confirmed live: correct line rendering (post-fix), filled markers on the caller-override chart, horizontal grid, bottom-start vs. caller-chosen legend position, and rotated tick labels with adequate margin at 1280px. |
@@ -62,4 +62,4 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | SHELL-2 | AccountPage: from a horizontal tab strip to a grouped sidebar + mobile drawer | Measured live at 375 px on 2026-08-08 (running cockpit, host header neutralised so the numbers describe ucm alone): `AccountPage` does **not** break the layout -- all six sections render at document width 375. What fails is discoverability and the users table. The tab strip scroller is 343 px visible against 589 px of content with `overflow-x: auto`, 246 px of travel, and **`scrollButtons: 0`** -- Support and any consumer-injected section sit off screen with no arrow, no fade, no hint they exist (they do respond to a horizontal swipe, so this is a discoverability failure, not a reachability one -- unlike cockpit's own header tabs, which are `width: 0px` + `overflow: hidden` and genuinely unreachable). The users table renders 1045 px inside a 341 px `MuiTableContainer`; one third is visible and the `Aktionen` column sits ~700 px to the right. Adopts jg-ferien's `EventInfoPage` pattern (`SectionSwitcher.jsx`, driven from `EventInfoPage.jsx:1126-1159`) in **both** halves -- sticky grouped 280 px sidebar at `md`+, bottom drawer below `md` -- plus an in-page trigger bar, which the reference does not supply because jg's trigger lives in that app's own page header and `AccountPage` has none. | 2026-08-08 | blocked | | **Held back 2026-08-08 — reshaped into DS-11** (see `webapp-management/DESIGN_SYSTEM_PROGRAM.md`): do NOT implement this WO as written; the Envelope will be revised (open: keep the SHELL-2 ID or mint a new SHELL-* ID). Known corrections for the revision: publishing is version-gated, not per-push (this row's "publishes immediately" is imprecise), and the grouped-shell part becomes an inheritable ucm component with `AccountPage` as first consumer. Envelope: [work-orders/SHELL-2.md](work-orders/SHELL-2.md). Prototype: [work-orders/assets/SHELL-2-account-navigation.html](work-orders/assets/SHELL-2-account-navigation.html). Tier 2 (shared core) -- independent `reviewer` (Sonnet, full) **and** `ui_reviewer` concurrently, both mandatory before commit. **Operator decisions, settled 2026-08-08 and not to be renegotiated by implementer or reviewer:** both halves of the pattern, so the horizontal tab strip disappears **on desktop too** (asked explicitly, chosen deliberately, in full knowledge that 14 consumers inherit the desktop change on their next pin bump); fixed groups `Mein Konto` / `Verwaltung` / `Hilfe` / `Weitere`, with `extraTabs` gaining an **optional** `group` field, additive and backward compatible; no standalone "Uebersicht" entry above the groups (jg-ferien has one, `AccountPage` has no overview screen for it to point at, so none is invented); users table becomes a card list below `md` and stays a table at `md`+; the mobile trigger bar is the **sole** carrier of the current section name, so the section heading below it is **removed**, not merely undrawn -- desktop keeps its heading because it has no trigger bar. **Two contracts that must survive and are currently untested:** the `?tab=` URL contract incl. fallback to `profile` on an unknown *or* unpermitted value (`AccountPage.jsx:60`, `:180-186`) -- cockpit's `/user-management`, `/profile` and `/change-password` redirects all hang off it -- and the full `extraTabs` shape (`:146-155`), whose `label` may be a **function** and which supports `visible(context)`. `AccountPage` and `UserListComponent` have **zero tests today** (none of the 20 files under `tests/` touches either), so both test files are new, not extensions. **No staging net:** this repo has no `develop`; a push to `main` touching `src/**` or `package.json` publishes to npm immediately via `publish.yml`, so the independent review is the only gate and is not back-fillable. Version target `2.30.0` (minor -- `extraTabs` gains a public field; additive API is a minor under semver). Explicit non-goals: pagination/filtering for the user list, the sections' internal content, the six auth pages (measured clean at 375 px), and **cockpit's header** -- that toolbar is what inflates the document to 498 px on every route including `/account`, and it is a separate WO in the cockpit repo, sequenced after this one at the operator's choice. Carried-over trap from the reference: jg-ferien uses `env(safe-area-inset-bottom)` while its `index.html` omits `viewport-fit=cover`, so those insets resolve to zero there -- copy the padding, do not assume it does anything. |
 | SHELL-3 | Promote the mobile bottom navigation into the shared kit | Promotes jg-ferien's `MobileBottomNav` into ucm, shaped from **two** real cases (jg's existing bar + cockpit's destinations) as DS-6 required rather than from jg alone. Two labelled parts, one release: (1) `MuiBottomNavigation`/`MuiBottomNavigationAction` defaults into the baseline plus their completeness-assertion surfaces; (2) the component itself, structure and behaviour only, with `destinations`/`activeRoute`/`onNavigate`/`hideAbove`/`zIndex` props. Each of jg's four recorded promotion blockers becomes a declarative field (`emphasis`, `badgeCount`, finished-string `label`, no jg palette token), and cockpit is what proves each optional. Full spec: [work-orders/SHELL-3.md](work-orders/SHELL-3.md). | 2026-08-11 | done | 56de0c0, 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 | planned | | DS-18, first half. Envelope only (Approval Gate #1 pending). Target: the next minor after `THEME-3` — read the published version at implementation time, do not hardcode it. **Sequencing: strictly after `THEME-3`**, which was in flight in `tokens.js`/`themeCompleteness.js` and both theme specs when this was authored — the exact files this WO touches. Grounding, measured: **51** `.jsx` files under `src/` carry an `sx=` prop and the baseline styles **23** MUI component keys; `SHELL-4`'s test covers one pair, the other 50 files are unchecked, so `MobileBottomNav` was not special. **Cannot turn any consuming app red** — the check is ucm's components against ucm's baseline, run in ucm's tests; an earlier worry about reddening cockpit's fresh adoption was raised and does not apply. **Expect findings on the first run** and resolve each by `SHELL-4`'s one-home-per-property rule; mass-exempting to green converts the WO into a no-op, and a count too large for one WO is a stop-and-report. Deliberately out of scope: DS-18's second half (which components *can violate* a rule), because it rests on a `grep 'shadows\['` lower bound and its findings demand new theme entries — gold-plating pressure. Also out: app-side scanning, and any rendering-based per-component check. Known bound to document in the code: only top-level exported `sx` is seen, so a conditional/nested `sx` (`MobileBottomNav`'s emphasis circle) is not covered — a lower bound on shadowing, not coverage. |
+| 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 | <pending> | **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. DS-18, first half. Envelope only (Approval Gate #1 pending). Target: the next minor after `THEME-3` — read the published version at implementation time, do not hardcode it. **Sequencing: strictly after `THEME-3`**, which was in flight in `tokens.js`/`themeCompleteness.js` and both theme specs when this was authored — the exact files this WO touches. Grounding, measured: **51** `.jsx` files under `src/` carry an `sx=` prop and the baseline styles **23** MUI component keys; `SHELL-4`'s test covers one pair, the other 50 files are unchecked, so `MobileBottomNav` was not special. **Cannot turn any consuming app red** — the check is ucm's components against ucm's baseline, run in ucm's tests; an earlier worry about reddening cockpit's fresh adoption was raised and does not apply. **Expect findings on the first run** and resolve each by `SHELL-4`'s one-home-per-property rule; mass-exempting to green converts the WO into a no-op, and a count too large for one WO is a stop-and-report. Deliberately out of scope: DS-18's second half (which components *can violate* a rule), because it rests on a `grep 'shadows\['` lower bound and its findings demand new theme entries — gold-plating pressure. Also out: app-side scanning, and any rendering-based per-component check. Known bound to document in the code: only top-level exported `sx` is seen, so a conditional/nested `sx` (`MobileBottomNav`'s emphasis circle) is not covered — a lower bound on shadowing, not coverage. |

package/dist/auth/ReauthModal.js

@@ -5,6 +5,8 @@ import { useTranslation } from 'react-i18next';
 import apiClient from './apiClient';
 import { HEADLESS_BASE } from './authConfig';
 import { rejectReauth, resolveReauth, subscribe } from './reauth';
+export const REAUTH_MODAL_ALERT_SX = { mb: 2 };
+export const REAUTH_MODAL_TEXT_FIELD_SX = { mt: 1 };
 export function ReauthModal() {
     const { t } = useTranslation();
     const [open, setOpen] = useState(false);
@@ -37,5 +39,5 @@ export function ReauthModal() {
     const handleCancel = () => {
         rejectReauth(new Error('cancelled'));
     };
-    return (_jsx(Dialog, { open: open, onClose: handleCancel, maxWidth: "xs", fullWidth: true, children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(DialogTitle, { children: t('Auth.REAUTH_TITLE') }), _jsxs(DialogContent, { children: [error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), _jsx(TextField, { autoFocus: true, fullWidth: true, type: "password", label: t('Auth.LOGIN_PASSWORD_LABEL'), value: password, onChange: (e) => setPassword(e.target.value), disabled: loading, sx: { mt: 1 } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleCancel, disabled: loading, children: t('Auth.MFA_TOTP_CANCEL_BUTTON') }), _jsx(Button, { type: "submit", variant: "contained", disabled: loading || !password, children: loading ? t('Auth.MFA_TOTP_VERIFY_BUTTON_LOADING') : t('Auth.MFA_VERIFY') })] })] }) }));
+    return (_jsx(Dialog, { open: open, onClose: handleCancel, maxWidth: "xs", fullWidth: true, children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(DialogTitle, { children: t('Auth.REAUTH_TITLE') }), _jsxs(DialogContent, { children: [error && _jsx(Alert, { severity: "error", sx: REAUTH_MODAL_ALERT_SX, children: error }), _jsx(TextField, { autoFocus: true, fullWidth: true, type: "password", label: t('Auth.LOGIN_PASSWORD_LABEL'), value: password, onChange: (e) => setPassword(e.target.value), disabled: loading, sx: REAUTH_MODAL_TEXT_FIELD_SX })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleCancel, disabled: loading, children: t('Auth.MFA_TOTP_CANCEL_BUTTON') }), _jsx(Button, { type: "submit", variant: "contained", disabled: loading || !password, children: loading ? t('Auth.MFA_TOTP_VERIFY_BUTTON_LOADING') : t('Auth.MFA_VERIFY') })] })] }) }));
 }

package/dist/components/AccessCodeManager.js

@@ -7,14 +7,21 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
 // Pfad ggf. anpassen je nach Struktur: von src/auth/components zu src/auth/authApi
 import { fetchAccessCodes, createAccessCode, deleteAccessCode, } from '../auth/authApi';
+export const ACCESS_CODE_ACTION_SX = {
+    minWidth: 120,
+    height: 40,
+    whiteSpace: 'nowrap',
+};
+export const ACCESS_CODE_PRIMARY_ACTION_SX = Object.assign(Object.assign({}, ACCESS_CODE_ACTION_SX), { mt: 1 });
+export const ACCESS_CODE_ALERT_SX = { mb: 2 };
+export const ACCESS_CODE_VALUE_FIELD_SX = {
+    '& .MuiInputBase-input': {
+        fontFamily: 'monospace',
+        letterSpacing: '0.04em',
+    },
+};
 export function AccessCodeManager() {
     const { t } = useTranslation();
-    const actionButtonSx = {
-        minWidth: 120,
-        height: 40,
-        textTransform: 'none',
-        whiteSpace: 'nowrap',
-    };
     const [codes, setCodes] = useState([]);
     const [loading, setLoading] = useState(true);
     const [submitting, setSubmitting] = useState(false);
@@ -115,7 +122,7 @@ export function AccessCodeManager() {
     if (loading) {
         return (_jsx(Box, { sx: { py: 3, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, {}) }));
     }
-    return (_jsxs(Box, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey) })), copyNotice && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: copyNotice })), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_ACTIVE') }), codes.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Auth.ACCESS_CODE_NONE') })) : (_jsx(Stack, { spacing: 1, children: codes.map((code) => (_jsxs(Box, { sx: {
+    return (_jsxs(Box, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: ACCESS_CODE_ALERT_SX, children: t(errorKey) })), successKey && (_jsx(Alert, { severity: "success", sx: ACCESS_CODE_ALERT_SX, children: t(successKey) })), copyNotice && (_jsx(Alert, { severity: "info", sx: ACCESS_CODE_ALERT_SX, children: copyNotice })), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_ACTIVE') }), codes.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Auth.ACCESS_CODE_NONE') })) : (_jsx(Stack, { spacing: 1, children: codes.map((code) => (_jsxs(Box, { sx: {
                                 display: 'grid',
                                 gridTemplateColumns: '1fr auto auto',
                                 gap: 1,
@@ -127,12 +134,7 @@ export function AccessCodeManager() {
                                             readOnly: true,
                                             onFocus: (event) => event.target.select(),
                                         },
-                                    }, sx: {
-                                        '& .MuiInputBase-input': {
-                                            fontFamily: 'monospace',
-                                            letterSpacing: '0.04em',
-                                        },
-                                    } }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => handleCopyCode(code.code), startIcon: _jsx(ContentCopyIcon, { fontSize: "small" }), sx: actionButtonSx, children: t('Auth.ACCESS_CODE_COPY_BUTTON', t('Auth.MFA_RECOVERY_COPY_TOOLTIP', 'Kopieren')) }), _jsx(Button, { variant: "outlined", color: "error", size: "small", onClick: () => handleDelete(code.id), startIcon: _jsx(DeleteIcon, { fontSize: "small" }), sx: actionButtonSx, children: t('Common.DELETE', 'Löschen') })] }, code.id))) }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_GENERATE') }), _jsxs(Box, { sx: { maxWidth: 360 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.ACCESS_CODE_LENGTH_LABEL', { length }) }), _jsx(Slider, { min: 6, max: 32, step: 1, value: length, onChange: (_, val) => setLength(val), valueLabelDisplay: "auto", disabled: submitting })] }), _jsx(Button, { variant: "contained", size: "small", sx: Object.assign(Object.assign({}, actionButtonSx), { mt: 1 }), onClick: handleGenerateClick, disabled: submitting, children: submitting
+                                    }, sx: ACCESS_CODE_VALUE_FIELD_SX }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => handleCopyCode(code.code), startIcon: _jsx(ContentCopyIcon, { fontSize: "small" }), sx: ACCESS_CODE_ACTION_SX, children: t('Auth.ACCESS_CODE_COPY_BUTTON', t('Auth.MFA_RECOVERY_COPY_TOOLTIP', 'Kopieren')) }), _jsx(Button, { variant: "outlined", color: "error", size: "small", onClick: () => handleDelete(code.id), startIcon: _jsx(DeleteIcon, { fontSize: "small" }), sx: ACCESS_CODE_ACTION_SX, children: t('Common.DELETE', 'Löschen') })] }, code.id))) }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_GENERATE') }), _jsxs(Box, { sx: { maxWidth: 360 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.ACCESS_CODE_LENGTH_LABEL', { length }) }), _jsx(Slider, { min: 6, max: 32, step: 1, value: length, onChange: (_, val) => setLength(val), valueLabelDisplay: "auto", disabled: submitting })] }), _jsx(Button, { variant: "contained", size: "small", sx: ACCESS_CODE_PRIMARY_ACTION_SX, onClick: handleGenerateClick, disabled: submitting, children: submitting
                             ? t('Auth.SAVE_BUTTON_LOADING')
-                            : t('Auth.ACCESS_CODE_GENERATE_BUTTON') })] }), _jsxs(Box, { sx: { mb: 2, maxWidth: 360 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_MANUAL') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, alignItems: 'center' }, children: [_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), fullWidth: true, size: "small", value: manualCode, onChange: (e) => setManualCode(e.target.value), disabled: submitting }), _jsx(Button, { variant: "contained", size: "small", onClick: handleAddManual, disabled: submitting, sx: actionButtonSx, children: t('Auth.ACCESS_CODE_ADD_BUTTON') })] })] })] }));
+                            : t('Auth.ACCESS_CODE_GENERATE_BUTTON') })] }), _jsxs(Box, { sx: { mb: 2, maxWidth: 360 }, children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.ACCESS_CODE_SECTION_MANUAL') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, alignItems: 'center' }, children: [_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), fullWidth: true, size: "small", value: manualCode, onChange: (e) => setManualCode(e.target.value), disabled: submitting }), _jsx(Button, { variant: "contained", size: "small", onClick: handleAddManual, disabled: submitting, sx: ACCESS_CODE_ACTION_SX, children: t('Auth.ACCESS_CODE_ADD_BUTTON') })] })] })] }));
 }

package/dist/components/AccessCodeSingleUseToggle.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Alert, Box, FormControlLabel, Switch, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
+export const ACCESS_CODE_SINGLE_USE_ALERT_SX = { mb: 2 };
 export function AccessCodeSingleUseToggle({ canEdit = true, policy = null, onPolicyChange = null }) {
     const { t } = useTranslation();
     const [value, setValue] = useState(false);
@@ -55,5 +56,5 @@ export function AccessCodeSingleUseToggle({ canEdit = true, policy = null, onPol
             setBusy(false);
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_SINGLE_USE_TITLE', 'Access Code Single-Use') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.ACCESS_CODE_SINGLE_USE_HINT', 'When enabled, each access code can be redeemed only once. Recommended.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: value, disabled: busy || !canEdit, onChange: handleChange }), label: t('Auth.ACCESS_CODE_SINGLE_USE_TOGGLE', 'Codes are single-use') })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ACCESS_CODE_SINGLE_USE_TITLE', 'Access Code Single-Use') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.ACCESS_CODE_SINGLE_USE_HINT', 'When enabled, each access code can be redeemed only once. Recommended.') }), error && _jsx(Alert, { severity: "error", sx: ACCESS_CODE_SINGLE_USE_ALERT_SX, children: error }), success && _jsx(Alert, { severity: "success", sx: ACCESS_CODE_SINGLE_USE_ALERT_SX, children: success }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: value, disabled: busy || !canEdit, onChange: handleChange }), label: t('Auth.ACCESS_CODE_SINGLE_USE_TOGGLE', 'Codes are single-use') })] }));
 }

package/dist/components/AllowedEmailDomainsManager.js

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react';
 import { Alert, Box, Button, TextField, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
+export const ALLOWED_EMAIL_DOMAINS_ALERT_SX = { mb: 2 };
+export const ALLOWED_EMAIL_DOMAINS_BUTTON_SX = { mt: 2 };
 export function AllowedEmailDomainsManager({ domains = [], enabled = false, onPolicyChange, canEdit = true, }) {
     const { t } = useTranslation();
     const [domainsText, setDomainsText] = useState('');
@@ -39,5 +41,5 @@ export function AllowedEmailDomainsManager({ domains = [], enabled = false, onPo
     if (!enabled) {
         return null;
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ALLOWED_EMAIL_DOMAINS_TITLE', 'Allowed Email Domains') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.ALLOWED_EMAIL_DOMAINS_CARD_HINT', 'Only addresses from these domains can use email-domain sign-up.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsx(TextField, { label: t('Auth.ALLOWED_EMAIL_DOMAINS_LABEL', 'Allowed email domains'), helperText: t('Auth.ALLOWED_EMAIL_DOMAINS_HINT', 'One domain per line, e.g. example.org. You can leave this empty temporarily.'), multiline: true, minRows: 4, fullWidth: true, value: domainsText, onChange: (event) => setDomainsText(event.target.value), disabled: busy || !canEdit }), _jsx(Button, { variant: "contained", sx: { mt: 2 }, onClick: handleSave, disabled: busy || !canEdit, children: t('Common.SAVE', 'Save') })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.ALLOWED_EMAIL_DOMAINS_TITLE', 'Allowed Email Domains') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.ALLOWED_EMAIL_DOMAINS_CARD_HINT', 'Only addresses from these domains can use email-domain sign-up.') }), error && _jsx(Alert, { severity: "error", sx: ALLOWED_EMAIL_DOMAINS_ALERT_SX, children: error }), success && _jsx(Alert, { severity: "success", sx: ALLOWED_EMAIL_DOMAINS_ALERT_SX, children: success }), _jsx(TextField, { label: t('Auth.ALLOWED_EMAIL_DOMAINS_LABEL', 'Allowed email domains'), helperText: t('Auth.ALLOWED_EMAIL_DOMAINS_HINT', 'One domain per line, e.g. example.org. You can leave this empty temporarily.'), multiline: true, minRows: 4, fullWidth: true, value: domainsText, onChange: (event) => setDomainsText(event.target.value), disabled: busy || !canEdit }), _jsx(Button, { variant: "contained", sx: ALLOWED_EMAIL_DOMAINS_BUTTON_SX, onClick: handleSave, disabled: busy || !canEdit, children: t('Common.SAVE', 'Save') })] }));
 }

package/dist/components/AuthFactorRequirementCard.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Alert, Box, FormControl, FormControlLabel, Radio, RadioGroup, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
+export const AUTH_FACTOR_REQUIREMENT_ALERT_SX = { mb: 2 };
 export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
     const { t } = useTranslation();
     const [value, setValue] = useState('1');
@@ -52,5 +53,5 @@ export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
             setBusy(false);
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.AUTH_FACTOR_TITLE', 'Authentication Requirements') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.AUTH_FACTOR_HINT', 'Define the minimum number of authentication factors required for sign-in.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsx(FormControl, { children: _jsxs(RadioGroup, { value: value, onChange: handleChange, children: [_jsx(FormControlLabel, { value: "1", control: _jsx(Radio, { disabled: busy || !canEdit }), label: t('Auth.ONE_FACTOR_LABEL', 'Allow single-factor authentication') }), _jsx(FormControlLabel, { value: "2", control: _jsx(Radio, { disabled: busy || !canEdit }), label: t('Auth.TWO_FACTOR_LABEL', 'Require two-factor authentication') })] }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.AUTH_FACTOR_TITLE', 'Authentication Requirements') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.AUTH_FACTOR_HINT', 'Define the minimum number of authentication factors required for sign-in.') }), error && _jsx(Alert, { severity: "error", sx: AUTH_FACTOR_REQUIREMENT_ALERT_SX, children: error }), success && _jsx(Alert, { severity: "success", sx: AUTH_FACTOR_REQUIREMENT_ALERT_SX, children: success }), _jsx(FormControl, { children: _jsxs(RadioGroup, { value: value, onChange: handleChange, children: [_jsx(FormControlLabel, { value: "1", control: _jsx(Radio, { disabled: busy || !canEdit }), label: t('Auth.ONE_FACTOR_LABEL', 'Allow single-factor authentication') }), _jsx(FormControlLabel, { value: "2", control: _jsx(Radio, { disabled: busy || !canEdit }), label: t('Auth.TWO_FACTOR_LABEL', 'Require two-factor authentication') })] }) })] }));
 }

package/dist/components/BulkInviteCsvTab.js

@@ -3,6 +3,12 @@ import React, { useMemo, useState } from 'react';
 import { Box, Button, Typography, Alert, LinearProgress, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { sendAdminInvite } from '../auth/authApi';
+export const BULK_INVITE_ACTION_SX = {
+    minWidth: 120,
+    height: 40,
+    whiteSpace: 'nowrap',
+};
+export const BULK_INVITE_ALERT_SX = { mb: 2 };
 function parseEmailsFromCsv(text) {
     if (!text)
         return [];
@@ -26,12 +32,6 @@ function parseEmailsFromCsv(text) {
 }
 export function BulkInviteCsvTab({ inviteFn = (email) => sendAdminInvite(email), onCompleted, }) {
     const { t } = useTranslation();
-    const actionButtonSx = {
-        minWidth: 120,
-        height: 40,
-        textTransform: 'none',
-        whiteSpace: 'nowrap',
-    };
     const [emails, setEmails] = useState([]);
     const [results, setResults] = useState({});
     const [busy, setBusy] = useState(false);
@@ -95,7 +95,7 @@ export function BulkInviteCsvTab({ inviteFn = (email) => sendAdminInvite(email),
         if (onCompleted)
             onCompleted(nextResults);
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Account.BULK_INVITE_TITLE', 'Bulk Invite via CSV') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.BULK_INVITE_HINT', 'Upload a CSV file containing email addresses. Header "email" is supported.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }, children: [_jsxs(Button, { variant: "outlined", size: "small", component: "label", disabled: busy, sx: actionButtonSx, children: [t('Account.BULK_INVITE_UPLOAD', 'Upload CSV'), _jsx("input", { type: "file", accept: ".csv,text/csv", hidden: true, onChange: handleFile })] }), _jsx(Button, { variant: "contained", size: "small", sx: actionButtonSx, onClick: handleInviteAll, disabled: busy || emails.length === 0, children: t('Account.BULK_INVITE_SEND', 'Send Invites') }), _jsx(Typography, { variant: "body2", children: t('Account.BULK_INVITE_COUNT', '{{count}} emails loaded', { count: emails.length }) })] }), busy && (_jsx(Box, { sx: { mb: 2 }, children: _jsx(LinearProgress, { variant: "determinate", value: progress }) })), emails.length > 0 && (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Common.STATUS', 'Status') }), _jsx(TableCell, { children: t('Common.DETAILS', 'Details') })] }) }), _jsx(TableBody, { children: emails.map((email) => {
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Account.BULK_INVITE_TITLE', 'Bulk Invite via CSV') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Account.BULK_INVITE_HINT', 'Upload a CSV file containing email addresses. Header "email" is supported.') }), error && _jsx(Alert, { severity: "error", sx: BULK_INVITE_ALERT_SX, children: error }), success && _jsx(Alert, { severity: "success", sx: BULK_INVITE_ALERT_SX, children: success }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }, children: [_jsxs(Button, { variant: "outlined", size: "small", component: "label", disabled: busy, sx: BULK_INVITE_ACTION_SX, children: [t('Account.BULK_INVITE_UPLOAD', 'Upload CSV'), _jsx("input", { type: "file", accept: ".csv,text/csv", hidden: true, onChange: handleFile })] }), _jsx(Button, { variant: "contained", size: "small", sx: BULK_INVITE_ACTION_SX, onClick: handleInviteAll, disabled: busy || emails.length === 0, children: t('Account.BULK_INVITE_SEND', 'Send Invites') }), _jsx(Typography, { variant: "body2", children: t('Account.BULK_INVITE_COUNT', '{{count}} emails loaded', { count: emails.length }) })] }), busy && (_jsx(Box, { sx: { mb: 2 }, children: _jsx(LinearProgress, { variant: "determinate", value: progress }) })), emails.length > 0 && (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { children: t('Common.STATUS', 'Status') }), _jsx(TableCell, { children: t('Common.DETAILS', 'Details') })] }) }), _jsx(TableBody, { children: emails.map((email) => {
                                 const row = results[email];
                                 return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: email }), _jsx(TableCell, { children: row ? (row.ok ? t('Common.SUCCESS', 'Success') : t('Common.ERROR', 'Error')) : '-' }), _jsx(TableCell, { children: (row === null || row === void 0 ? void 0 : row.message) || '-' })] }, email));
                             }) })] }) })), done > 0 && (_jsxs(Typography, { variant: "body2", sx: { mt: 2 }, children: [t('Account.BULK_INVITE_PROGRESS', '{{done}} / {{total}} processed', { done, total }), ' - ', t('Account.BULK_INVITE_SUCCESS_COUNT', '{{count}} successful', { count: successCount })] }))] }));

package/dist/components/LoginForm.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { Box, TextField, Button, Typography, Divider, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { SocialLoginButtons } from './SocialLoginButtons';
+export const LOGIN_FORM_DIVIDER_SX = { my: 2 };
 export function LoginForm({ onSubmit, onForgotPassword, onSocialLogin, socialProviders, onPasskeyLogin, onSignUp, error, // bereits übersetzter Text oder t(errorKey) aus dem Parent
 disabled = false, initialIdentifier = '', }) {
     const { t } = useTranslation();
@@ -21,6 +22,6 @@ disabled = false, initialIdentifier = '', }) {
     const supportsPasskey = !!onPasskeyLogin &&
         typeof window !== 'undefined' &&
         !!window.PublicKeyCredential;
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), supportsPasskey && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", fullWidth: true, type: "button", onClick: onPasskeyLogin, disabled: disabled, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') })] })), onSubmit && (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: disabled, children: t('Auth.PAGE_LOGIN_TITLE') })] })), onSocialLogin && (_jsxs(Box, { children: [_jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin, providers: socialProviders })] })), (onSignUp || onForgotPassword) && (_jsxs(Box, { children: [_jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: [onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, fullWidth: true, children: t('Auth.LOGIN_SIGNUP_BUTTON') })), onForgotPassword && (_jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, fullWidth: true, children: t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON') }))] })] }))] }));
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), supportsPasskey && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", fullWidth: true, type: "button", onClick: onPasskeyLogin, disabled: disabled, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }), _jsx(Divider, { sx: LOGIN_FORM_DIVIDER_SX, children: t('Auth.LOGIN_OR') })] })), onSubmit && (_jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: disabled, children: t('Auth.PAGE_LOGIN_TITLE') })] })), onSocialLogin && (_jsxs(Box, { children: [_jsx(Divider, { sx: LOGIN_FORM_DIVIDER_SX, children: t('Auth.LOGIN_OR') }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin, providers: socialProviders })] })), (onSignUp || onForgotPassword) && (_jsxs(Box, { children: [_jsx(Divider, { sx: LOGIN_FORM_DIVIDER_SX, children: t('Auth.LOGIN_OR') }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.5 }, children: [onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, fullWidth: true, children: t('Auth.LOGIN_SIGNUP_BUTTON') })), onForgotPassword && (_jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, fullWidth: true, children: t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON') }))] })] }))] }));
 }
 ;

package/dist/components/MFAComponent.js

@@ -7,6 +7,12 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetchRecoveryCodes, generateRecoveryCodes } from '../auth/authApi';
+export const MFA_ALERT_SX = { mb: 2 };
+export const MFA_CARD_SX = { mb: 3 };
+export const MFA_ACTIVE_CARD_SX = { bgcolor: '#f0fdf4' };
+export const MFA_TEXT_FIELD_SX = { mb: 2 };
+export const MFA_DIVIDER_SX = { my: 3 };
+export const MFA_RECOVERY_BUTTON_SX = { mt: 2 };
 export function MFAComponent() {
     const { t } = useTranslation();
     const [authenticators, setAuthenticators] = useState([]);
@@ -134,24 +140,24 @@ export function MFAComponent() {
     };
     if (loading)
         return _jsx(CircularProgress, {});
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_TOTP_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_TOTP_DESCRIPTION') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), totpAuthenticator ? (_jsx(Card, { variant: "outlined", sx: { mb: 3, bgcolor: '#f0fdf4' }, children: _jsxs(CardContent, { sx: {
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_TOTP_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_TOTP_DESCRIPTION') }), errorKey && (_jsx(Alert, { severity: "error", sx: MFA_ALERT_SX, children: t(errorKey) })), totpAuthenticator ? (_jsx(Card, { variant: "outlined", sx: [MFA_CARD_SX, MFA_ACTIVE_CARD_SX], children: _jsxs(CardContent, { sx: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                    }, children: [_jsx(Box, { children: _jsx(Typography, { variant: "subtitle1", color: "success.main", fontWeight: "bold", children: t('Auth.MFA_TOTP_STATUS_ACTIVE') }) }), _jsx(Button, { variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: handleDeleteTotp, children: t('Auth.MFA_TOTP_BUTTON_DISABLE') })] }) })) : (!isSettingUp && (_jsx(Button, { variant: "contained", onClick: handleStartSetup, children: t('Auth.MFA_TOTP_BUTTON_SETUP') }))), isSettingUp && totpData && (_jsx(Card, { variant: "outlined", sx: { mb: 3 }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.MFA_TOTP_QR_TITLE') }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 3, alignItems: "center", children: [_jsx(Box, { sx: { p: 2, bgcolor: 'white', border: '1px solid #eee' }, children: _jsx(QRCodeSVG, { value: totpData.key_uri, size: 150 }) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.MFA_TOTP_MANUAL_HINT') }), _jsx(Typography, { variant: "mono", sx: {
+                    }, children: [_jsx(Box, { children: _jsx(Typography, { variant: "subtitle1", color: "success.main", fontWeight: "bold", children: t('Auth.MFA_TOTP_STATUS_ACTIVE') }) }), _jsx(Button, { variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: handleDeleteTotp, children: t('Auth.MFA_TOTP_BUTTON_DISABLE') })] }) })) : (!isSettingUp && (_jsx(Button, { variant: "contained", onClick: handleStartSetup, children: t('Auth.MFA_TOTP_BUTTON_SETUP') }))), isSettingUp && totpData && (_jsx(Card, { variant: "outlined", sx: MFA_CARD_SX, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.MFA_TOTP_QR_TITLE') }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 3, alignItems: "center", children: [_jsx(Box, { sx: { p: 2, bgcolor: 'white', border: '1px solid #eee' }, children: _jsx(QRCodeSVG, { value: totpData.key_uri, size: 150 }) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: t('Auth.MFA_TOTP_MANUAL_HINT') }), _jsx(Typography, { variant: "mono", sx: {
                                                 fontFamily: 'monospace',
                                                 bgcolor: '#eee',
                                                 p: 1,
                                                 borderRadius: 1,
                                                 display: 'inline-block',
                                                 mb: 2,
-                                            }, children: totpData.secret }), _jsxs("form", { onSubmit: handleVerify, children: [_jsx(TextField, { label: t('Auth.MFA_TOTP_CODE_LABEL'), value: verifyCode, onChange: (e) => setVerifyCode(e.target.value), fullWidth: true, required: true, sx: { mb: 2 }, autoComplete: "off" }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
+                                            }, children: totpData.secret }), _jsxs("form", { onSubmit: handleVerify, children: [_jsx(TextField, { label: t('Auth.MFA_TOTP_CODE_LABEL'), value: verifyCode, onChange: (e) => setVerifyCode(e.target.value), fullWidth: true, required: true, sx: MFA_TEXT_FIELD_SX, autoComplete: "off" }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
                                                                 ? t('Auth.MFA_TOTP_VERIFY_BUTTON_LOADING')
                                                                 : t('Auth.MFA_TOTP_VERIFY_BUTTON') }), _jsx(Button, { onClick: () => {
                                                                 setIsSettingUp(false);
                                                                 setTotpData(null);
                                                                 setVerifyCode('');
-                                                            }, disabled: submitting, children: t('Auth.MFA_TOTP_CANCEL_BUTTON') })] })] })] })] })] }) })), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_RECOVERY_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_RECOVERY_DESCRIPTION') }), !showRecovery ? (_jsx(Button, { variant: "outlined", onClick: handleShowRecoveryCodes, children: t('Auth.MFA_RECOVERY_VIEW_BUTTON') })) : (_jsxs(Box, { sx: { bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }, children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Auth.MFA_RECOVERY_WARNING') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: Array.isArray(recoveryCodes) &&
+                                                            }, disabled: submitting, children: t('Auth.MFA_TOTP_CANCEL_BUTTON') })] })] })] })] })] }) })), _jsx(Divider, { sx: MFA_DIVIDER_SX }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_RECOVERY_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_RECOVERY_DESCRIPTION') }), !showRecovery ? (_jsx(Button, { variant: "outlined", onClick: handleShowRecoveryCodes, children: t('Auth.MFA_RECOVERY_VIEW_BUTTON') })) : (_jsxs(Box, { sx: { bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }, children: [_jsx(Alert, { severity: "warning", sx: MFA_ALERT_SX, children: t('Auth.MFA_RECOVERY_WARNING') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 2, children: Array.isArray(recoveryCodes) &&
                             recoveryCodes.map((code) => (_jsxs(Box, { sx: {
                                     bgcolor: 'white',
                                     border: '1px solid #ddd',
@@ -161,6 +167,6 @@ export function MFAComponent() {
                                     display: 'flex',
                                     alignItems: 'center',
                                     gap: 1,
-                                }, children: [code, _jsx(Tooltip, { title: t('Auth.MFA_RECOVERY_COPY_TOOLTIP'), children: _jsx(IconButton, { size: "small", onClick: () => handleCopyCode(code), children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }, code))) }), _jsx(Button, { sx: { mt: 2 }, size: "small", onClick: handleGenerateNewRecoveryCodes, children: t('Auth.MFA_RECOVERY_GENERATE_NEW') })] }))] }));
+                                }, children: [code, _jsx(Tooltip, { title: t('Auth.MFA_RECOVERY_COPY_TOOLTIP'), children: _jsx(IconButton, { size: "small", onClick: () => handleCopyCode(code), children: _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }, code))) }), _jsx(Button, { sx: MFA_RECOVERY_BUTTON_SX, size: "small", onClick: handleGenerateNewRecoveryCodes, children: t('Auth.MFA_RECOVERY_GENERATE_NEW') })] }))] }));
 }
 ;

package/dist/components/MfaLoginComponent.js

@@ -4,6 +4,9 @@ import { Box, Typography, TextField, Button, Stack, Alert, Divider, Dialog, Dial
 import { useTranslation } from 'react-i18next';
 import { authenticateWithMFA, fetchCurrentUser, requestMfaSupportHelp } from '../auth/authApi';
 import { loginWithPasskey } from '../utils/authService';
+export const MFA_LOGIN_ALERT_SX = { mb: 2 };
+export const MFA_LOGIN_DIVIDER_SX = { my: 2 };
+export const MFA_LOGIN_TEXT_FIELD_SX = { mb: 2 };
 export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCancel }) {
     const { t } = useTranslation();
     const [code, setCode] = useState('');
@@ -87,6 +90,6 @@ export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCan
             setSubmitting(false);
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_SUBTITLE', 'Please confirm your login using one of the available methods.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), infoKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t(infoKey) })), _jsxs(Stack, { spacing: 2, children: [supportsWebauthn && (_jsx(Button, { variant: "contained", fullWidth: true, onClick: handlePasskey, disabled: submitting || helpRequested, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON', 'Use passkey / security key') })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), supportsTotpOrRecovery && (_jsxs(Box, { component: "form", onSubmit: handleSubmitCode, children: [_jsx(TextField, { label: t('Auth.MFA_CODE_LABEL', 'Authenticator code (or recovery code)'), value: code, onChange: (e) => setCode(e.target.value), fullWidth: true, disabled: submitting || helpRequested, autoComplete: "one-time-code", sx: { mb: 2 } }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: submitting || !code.trim() || helpRequested, children: t('Auth.MFA_VERIFY', 'Verify') })] })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { fullWidth: true, size: "small", variant: "outlined", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { fullWidth: true, size: "small", variant: "outlined", color: "secondary", onClick: openHelpDialog, disabled: submitting || helpRequested, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] }), _jsxs(Dialog, { open: helpDialogOpen, onClose: () => setHelpDialogOpen(false), fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Auth.MFA_HELP_DIALOG_TITLE', 'Need help with sign-in') }), _jsxs(DialogContent, { dividers: true, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_HELP_DIALOG_DESCRIPTION', 'Describe briefly why you cannot use the available methods. A support person will review your request.') }), _jsx(TextField, { label: t('Auth.MFA_HELP_MESSAGE_LABEL', 'Your message to support'), multiline: true, minRows: 3, fullWidth: true, value: helpMessage, onChange: (e) => setHelpMessage(e.target.value), disabled: submitting })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setHelpDialogOpen(false), disabled: submitting, children: t('Common.CANCEL', 'Cancel') }), _jsx(Button, { onClick: handleNeedHelp, disabled: submitting, variant: "contained", children: t('Auth.MFA_HELP_SUBMIT', 'Send request') })] })] })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_SUBTITLE', 'Please confirm your login using one of the available methods.') }), errorKey && (_jsx(Alert, { severity: "error", sx: MFA_LOGIN_ALERT_SX, children: t(errorKey) })), infoKey && (_jsx(Alert, { severity: "info", sx: MFA_LOGIN_ALERT_SX, children: t(infoKey) })), _jsxs(Stack, { spacing: 2, children: [supportsWebauthn && (_jsx(Button, { variant: "contained", fullWidth: true, onClick: handlePasskey, disabled: submitting || helpRequested, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON', 'Use passkey / security key') })), _jsx(Divider, { sx: MFA_LOGIN_DIVIDER_SX, children: t('Auth.LOGIN_OR') }), supportsTotpOrRecovery && (_jsxs(Box, { component: "form", onSubmit: handleSubmitCode, children: [_jsx(TextField, { label: t('Auth.MFA_CODE_LABEL', 'Authenticator code (or recovery code)'), value: code, onChange: (e) => setCode(e.target.value), fullWidth: true, disabled: submitting || helpRequested, autoComplete: "one-time-code", sx: MFA_LOGIN_TEXT_FIELD_SX }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: submitting || !code.trim() || helpRequested, children: t('Auth.MFA_VERIFY', 'Verify') })] })), _jsx(Divider, { sx: MFA_LOGIN_DIVIDER_SX, children: t('Auth.LOGIN_OR') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { fullWidth: true, size: "small", variant: "outlined", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { fullWidth: true, size: "small", variant: "outlined", color: "secondary", onClick: openHelpDialog, disabled: submitting || helpRequested, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] }), _jsxs(Dialog, { open: helpDialogOpen, onClose: () => setHelpDialogOpen(false), fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Auth.MFA_HELP_DIALOG_TITLE', 'Need help with sign-in') }), _jsxs(DialogContent, { dividers: true, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_HELP_DIALOG_DESCRIPTION', 'Describe briefly why you cannot use the available methods. A support person will review your request.') }), _jsx(TextField, { label: t('Auth.MFA_HELP_MESSAGE_LABEL', 'Your message to support'), multiline: true, minRows: 3, fullWidth: true, value: helpMessage, onChange: (e) => setHelpMessage(e.target.value), disabled: submitting })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setHelpDialogOpen(false), disabled: submitting, children: t('Common.CANCEL', 'Cancel') }), _jsx(Button, { onClick: handleNeedHelp, disabled: submitting, variant: "contained", children: t('Auth.MFA_HELP_SUBMIT', 'Send request') })] })] })] }));
 }
 ;

package/dist/components/PasskeysComponent.js

@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { fetchPasskeys, deletePasskey } from '../auth/authApi';
 import { registerPasskey } from '../utils/authService';
 import { FEATURES } from '../auth/authConfig';
+export const PASSKEYS_ALERT_SX = { mb: 2 };
+export const PASSKEYS_DIVIDER_SX = { mb: 2 };
 export function PasskeysComponent() {
     const { t } = useTranslation();
     const [passkeys, setPasskeys] = useState([]);
@@ -86,9 +88,9 @@ export function PasskeysComponent() {
     if (!FEATURES.passkeysEnabled) {
         return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.PASSKEYS_TITLE') }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Auth.PASSKEYS_DISABLED_PROJECT') })] }));
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.PASSKEYS_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: t('Auth.PASSKEYS_DESCRIPTION') }), !passkeysSupported && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.PASSKEY_BROWSER_NOT_SUPPORTED') })), messageKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(messageKey) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), passkeysSupported && (_jsx(Box, { sx: { mb: 3 }, children: _jsxs(Stack, { spacing: 2, direction: { xs: 'column', sm: 'row' }, alignItems: { xs: 'stretch', sm: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.PASSKEY_NAME_LABEL'), placeholder: t('Auth.PASSKEY_NAME_PLACEHOLDER'), value: name, onChange: (e) => setName(e.target.value), disabled: creating, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: handleCreate, disabled: creating, children: creating
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.PASSKEYS_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: t('Auth.PASSKEYS_DESCRIPTION') }), !passkeysSupported && (_jsx(Alert, { severity: "info", sx: PASSKEYS_ALERT_SX, children: t('Auth.PASSKEY_BROWSER_NOT_SUPPORTED') })), messageKey && (_jsx(Alert, { severity: "success", sx: PASSKEYS_ALERT_SX, children: t(messageKey) })), errorKey && (_jsx(Alert, { severity: "error", sx: PASSKEYS_ALERT_SX, children: t(errorKey) })), passkeysSupported && (_jsx(Box, { sx: { mb: 3 }, children: _jsxs(Stack, { spacing: 2, direction: { xs: 'column', sm: 'row' }, alignItems: { xs: 'stretch', sm: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.PASSKEY_NAME_LABEL'), placeholder: t('Auth.PASSKEY_NAME_PLACEHOLDER'), value: name, onChange: (e) => setName(e.target.value), disabled: creating, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: handleCreate, disabled: creating, children: creating
                                 ? t('Auth.PASSKEY_ADD_BUTTON_LOADING')
-                                : t('Auth.PASSKEY_ADD_BUTTON') })] }) })), _jsx(Divider, { sx: { mb: 2 } }), loading ? (_jsx(Box, { sx: { py: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.PASSKEY_EXISTING_TITLE') }), reloading && (_jsx(Box, { sx: { py: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 20 }) })), passkeys.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Auth.PASSKEY_NONE') })) : (_jsx(List, { dense: true, children: passkeys.map((pk) => (_jsxs(ListItem, { divider: true, children: [_jsx(ListItemText, { primary: pk.name || t('Auth.PASSKEY_DEFAULT_NAME'), secondary: pk.last_used_at
+                                : t('Auth.PASSKEY_ADD_BUTTON') })] }) })), _jsx(Divider, { sx: PASSKEYS_DIVIDER_SX }), loading ? (_jsx(Box, { sx: { py: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: t('Auth.PASSKEY_EXISTING_TITLE') }), reloading && (_jsx(Box, { sx: { py: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 20 }) })), passkeys.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Auth.PASSKEY_NONE') })) : (_jsx(List, { dense: true, children: passkeys.map((pk) => (_jsxs(ListItem, { divider: true, children: [_jsx(ListItemText, { primary: pk.name || t('Auth.PASSKEY_DEFAULT_NAME'), secondary: pk.last_used_at
                                         ? t('Auth.PASSKEY_LAST_USED_AT', {
                                             value: pk.last_used_at,
                                         })

package/dist/components/QrSignupManager.js

@@ -4,6 +4,7 @@ import { Alert, Box, Button, Stack, TextField, Typography, } from '@mui/material
 import { useTranslation } from 'react-i18next';
 import { QRCodeSVG } from 'qrcode.react';
 import { createSignupQr } from '../auth/authApi';
+export const QR_SIGNUP_MANAGER_ALERT_SX = { mb: 2 };
 const DEFAULT_EXPIRY_DAYS = 90;
 const DEFAULT_MAX_REDEMPTIONS = 1;
 function clampExpiryDays(value) {
@@ -257,7 +258,7 @@ export function QrSignupManager({ enabled = false, expiryDays = DEFAULT_EXPIRY_D
     if (!enabled) {
         return null;
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.SIGNUP_QR_MANAGER_TITLE', 'QR Signup') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.SIGNUP_QR_MANAGER_HINT', 'Generate and share QR signup links below.') }), _jsx(Box, { sx: { mb: 2 }, children: _jsx(TextField, { label: t('Auth.SIGNUP_QR_MAX_REDEMPTIONS_LABEL', 'Max redemptions'), type: "number", size: "small", value: maxRedemptions, onChange: (e) => setMaxRedemptions(e.target.value), inputProps: { min: 1, step: 1 }, helperText: t('Auth.SIGNUP_QR_MAX_REDEMPTIONS_HINT', 'How many people may sign up with the same QR. Default: 1.'), disabled: busy }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), copyState === 'copied' && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t('Auth.SIGNUP_QR_LINK_COPIED', 'Signup link copied.') })), copyState === 'error' && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Auth.SIGNUP_QR_COPY_UNAVAILABLE', 'Copying the link is not available in this browser.') })), (result === null || result === void 0 ? void 0 : result.signup_url) && (_jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Box, { sx: {
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.SIGNUP_QR_MANAGER_TITLE', 'QR Signup') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.SIGNUP_QR_MANAGER_HINT', 'Generate and share QR signup links below.') }), _jsx(Box, { sx: { mb: 2 }, children: _jsx(TextField, { label: t('Auth.SIGNUP_QR_MAX_REDEMPTIONS_LABEL', 'Max redemptions'), type: "number", size: "small", value: maxRedemptions, onChange: (e) => setMaxRedemptions(e.target.value), inputProps: { min: 1, step: 1 }, helperText: t('Auth.SIGNUP_QR_MAX_REDEMPTIONS_HINT', 'How many people may sign up with the same QR. Default: 1.'), disabled: busy }) }), error && _jsx(Alert, { severity: "error", sx: QR_SIGNUP_MANAGER_ALERT_SX, children: error }), success && _jsx(Alert, { severity: "success", sx: QR_SIGNUP_MANAGER_ALERT_SX, children: success }), copyState === 'copied' && (_jsx(Alert, { severity: "success", sx: QR_SIGNUP_MANAGER_ALERT_SX, children: t('Auth.SIGNUP_QR_LINK_COPIED', 'Signup link copied.') })), copyState === 'error' && (_jsx(Alert, { severity: "warning", sx: QR_SIGNUP_MANAGER_ALERT_SX, children: t('Auth.SIGNUP_QR_COPY_UNAVAILABLE', 'Copying the link is not available in this browser.') })), (result === null || result === void 0 ? void 0 : result.signup_url) && (_jsxs(Box, { sx: { mt: 1 }, children: [_jsx(Box, { sx: {
                             display: 'flex',
                             justifyContent: 'center',
                             alignItems: 'center',

package/dist/components/QrSignupValidityManager.js

@@ -3,6 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { Alert, Box, Button, Stack, TextField, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
+export const QR_SIGNUP_VALIDITY_ALERT_SX = { mb: 2 };
+export const QR_SIGNUP_VALIDITY_FIELD_SX = { flex: 1 };
+export const QR_SIGNUP_VALIDITY_BUTTON_SX = { minWidth: 120, mt: { sm: '8px' } };
 const DEFAULT_EXPIRY_DAYS = 90;
 function clampExpiryDays(value) {
     const parsed = parseInt(value, 10);
@@ -44,5 +47,5 @@ export function QrSignupValidityManager({ enabled = false, expiryDays = DEFAULT_
     if (!enabled) {
         return null;
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.SIGNUP_QR_VALIDITY_TITLE', 'QR Signup Validity') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.SIGNUP_QR_VALIDITY_HINT', 'Set the default validity for newly generated QR signup links.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 1.5, alignItems: { sm: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.SIGNUP_QR_EXPIRY_DAYS_LABEL', 'QR signup validity (days)'), helperText: t('Auth.SIGNUP_QR_EXPIRY_DAYS_HINT', 'Default validity for newly generated QR signup links.'), type: "number", value: currentExpiryDays, onChange: (event) => setCurrentExpiryDays(event.target.value), disabled: busy || !canEdit, sx: { flex: 1 } }), _jsx(Button, { variant: "contained", onClick: handleSave, disabled: busy || !canEdit, sx: { minWidth: 120, mt: { sm: '8px' } }, children: t('Common.SAVE', 'Save') })] })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.SIGNUP_QR_VALIDITY_TITLE', 'QR Signup Validity') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.SIGNUP_QR_VALIDITY_HINT', 'Set the default validity for newly generated QR signup links.') }), error && _jsx(Alert, { severity: "error", sx: QR_SIGNUP_VALIDITY_ALERT_SX, children: error }), success && _jsx(Alert, { severity: "success", sx: QR_SIGNUP_VALIDITY_ALERT_SX, children: success }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 1.5, alignItems: { sm: 'flex-start' }, children: [_jsx(TextField, { label: t('Auth.SIGNUP_QR_EXPIRY_DAYS_LABEL', 'QR signup validity (days)'), helperText: t('Auth.SIGNUP_QR_EXPIRY_DAYS_HINT', 'Default validity for newly generated QR signup links.'), type: "number", value: currentExpiryDays, onChange: (event) => setCurrentExpiryDays(event.target.value), disabled: busy || !canEdit, sx: QR_SIGNUP_VALIDITY_FIELD_SX }), _jsx(Button, { variant: "contained", onClick: handleSave, disabled: busy || !canEdit, sx: QR_SIGNUP_VALIDITY_BUTTON_SX, children: t('Common.SAVE', 'Save') })] })] }));
 }

package/dist/components/RegistrationMethodsManager.js

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react';
 import { Alert, Box, CircularProgress, FormControlLabel, Stack, Switch, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
+export const REGISTRATION_METHODS_ALERT_SX = { mb: 2 };
+export const REGISTRATION_METHODS_INFO_SX = { mt: 2 };
 const EMPTY_POLICY = {
     allow_admin_invite: true,
     allow_self_signup_access_code: false,
@@ -49,5 +51,5 @@ export function RegistrationMethodsManager({ policy: authPolicy, error = '', onP
     if (!authPolicy && !error) {
         return (_jsx(Box, { sx: { py: 3, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 28 }) }));
     }
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.REGISTRATION_METHODS_TITLE', 'Registration Methods') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.REGISTRATION_METHODS_HINT', 'Choose which signup and invite flows are active for this app.') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error }), saveError && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: saveError }), success && _jsx(Alert, { severity: "success", sx: { mb: 2 }, children: success }), _jsxs(Stack, { spacing: 1, children: [_jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_admin_invite), onChange: toggle('allow_admin_invite'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.ADMIN_INVITE_LABEL', 'Admin invite') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_access_code), onChange: toggle('allow_self_signup_access_code'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_ACCESS_CODE_LABEL', 'Self-signup with access code') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_open), onChange: toggle('allow_self_signup_open'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_OPEN_LABEL', 'Open self-signup') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_email_domain), onChange: toggle('allow_self_signup_email_domain'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_EMAIL_DOMAIN_LABEL', 'Self-signup by email domain') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_qr), onChange: toggle('allow_self_signup_qr'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_QR_LABEL', 'Self-signup by QR') })] }), policyState.allow_self_signup_email_domain && !(policyState.allowed_email_domains || []).length && (_jsx(Alert, { severity: "info", sx: { mt: 2 }, children: t('Auth.EMAIL_DOMAIN_CURRENTLY_BLOCKED_HINT', 'Email-domain signup is enabled, but it stays blocked until at least one allowed domain is saved.') }))] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.REGISTRATION_METHODS_TITLE', 'Registration Methods') }), _jsx(Typography, { variant: "body2", sx: { mb: 2, color: 'text.secondary' }, children: t('Auth.REGISTRATION_METHODS_HINT', 'Choose which signup and invite flows are active for this app.') }), error && _jsx(Alert, { severity: "error", sx: REGISTRATION_METHODS_ALERT_SX, children: error }), saveError && _jsx(Alert, { severity: "error", sx: REGISTRATION_METHODS_ALERT_SX, children: saveError }), success && _jsx(Alert, { severity: "success", sx: REGISTRATION_METHODS_ALERT_SX, children: success }), _jsxs(Stack, { spacing: 1, children: [_jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_admin_invite), onChange: toggle('allow_admin_invite'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.ADMIN_INVITE_LABEL', 'Admin invite') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_access_code), onChange: toggle('allow_self_signup_access_code'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_ACCESS_CODE_LABEL', 'Self-signup with access code') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_open), onChange: toggle('allow_self_signup_open'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_OPEN_LABEL', 'Open self-signup') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_email_domain), onChange: toggle('allow_self_signup_email_domain'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_EMAIL_DOMAIN_LABEL', 'Self-signup by email domain') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: Boolean(policyState.allow_self_signup_qr), onChange: toggle('allow_self_signup_qr'), disabled: Boolean(busyField) || !canEdit })), label: t('Auth.SIGNUP_QR_LABEL', 'Self-signup by QR') })] }), policyState.allow_self_signup_email_domain && !(policyState.allowed_email_domains || []).length && (_jsx(Alert, { severity: "info", sx: REGISTRATION_METHODS_INFO_SX, children: t('Auth.EMAIL_DOMAIN_CURRENTLY_BLOCKED_HINT', 'Email-domain signup is enabled, but it stays blocked until at least one allowed domain is saved.') }))] }));
 }

package/dist/components/SecurityComponent.js

@@ -10,6 +10,8 @@ import { MFAComponent } from './MFAComponent';
 import { changePassword } from '../auth/authApi';
 import { startSocialLogin } from '../utils/authService';
 import { AuthContext } from '../auth/AuthContext';
+export const SECURITY_ALERT_SX = { mb: 2 };
+export const SECURITY_DIVIDER_SX = { my: 3 };
 export function SecurityComponent({ fromRecovery = false, fromWeakLogin = false, }) {
     const { t } = useTranslation();
     const { authMethods } = useContext(AuthContext);
@@ -56,6 +58,6 @@ export function SecurityComponent({ fromRecovery = false, fromWeakLogin = false,
             setErrorKey(err.code || 'Auth.PASSWORD_CHANGE_FAILED');
         }
     };
-    return (_jsxs(Box, { children: [fromRecovery && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Security.RECOVERY_LOGIN_WARNING') })), fromWeakLogin && (_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: t('Security.WEAK_LOGIN_WARNING') })), messageKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(messageKey) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), canChangePassword && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.LOGIN_PASSWORD_LABEL') }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), needsDividerAfter('password') && _jsx(Divider, { sx: { my: 3 } })] })), socialLoginEnabled && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Security.SOCIAL_SECTION_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: t('Security.SOCIAL_SECTION_DESCRIPTION') }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick, providers: socialProviders }), needsDividerAfter('social') && _jsx(Divider, { sx: { my: 3 } })] })), passkeysEnabled && (_jsxs(_Fragment, { children: [_jsx(PasskeysComponent, {}), needsDividerAfter('passkeys') && _jsx(Divider, { sx: { my: 3 } })] })), mfaEnabled && _jsx(MFAComponent, {})] }));
+    return (_jsxs(Box, { children: [fromRecovery && (_jsx(Alert, { severity: "warning", sx: SECURITY_ALERT_SX, children: t('Security.RECOVERY_LOGIN_WARNING') })), fromWeakLogin && (_jsx(Alert, { severity: "warning", sx: SECURITY_ALERT_SX, children: t('Security.WEAK_LOGIN_WARNING') })), messageKey && (_jsx(Alert, { severity: "success", sx: SECURITY_ALERT_SX, children: t(messageKey) })), errorKey && (_jsx(Alert, { severity: "error", sx: SECURITY_ALERT_SX, children: t(errorKey) })), canChangePassword && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.LOGIN_PASSWORD_LABEL') }), _jsx(PasswordChangeForm, { onSubmit: handlePasswordChange }), needsDividerAfter('password') && _jsx(Divider, { sx: SECURITY_DIVIDER_SX })] })), socialLoginEnabled && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Security.SOCIAL_SECTION_TITLE') }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: t('Security.SOCIAL_SECTION_DESCRIPTION') }), _jsx(SocialLoginButtons, { onProviderClick: handleSocialClick, providers: socialProviders }), needsDividerAfter('social') && _jsx(Divider, { sx: SECURITY_DIVIDER_SX })] })), passkeysEnabled && (_jsxs(_Fragment, { children: [_jsx(PasskeysComponent, {}), needsDividerAfter('passkeys') && _jsx(Divider, { sx: SECURITY_DIVIDER_SX })] })), mfaEnabled && _jsx(MFAComponent, {})] }));
 }
 ;

package/dist/components/SupportRecoveryRequestsTab.js

@@ -6,6 +6,9 @@ import CloseIcon from '@mui/icons-material/Close';
 import { useTranslation } from 'react-i18next';
 import { AuthContext } from '../auth/AuthContext';
 import { approveRecoveryRequest, fetchRecoveryRequests, fetchUsersList, rejectRecoveryRequest, updateUserSupportStatus, } from '../auth/authApi';
+export const SUPPORT_RECOVERY_AGENT_PAPER_SX = { p: 2, mb: 3 };
+export const SUPPORT_RECOVERY_ALERT_SX = { mb: 2 };
+export const SUPPORT_RECOVERY_AGENT_BUTTON_SX = { minWidth: 160 };
 export function SupportRecoveryRequestsTab() {
     const { t, i18n } = useTranslation();
     const { user } = useContext(AuthContext);
@@ -160,7 +163,7 @@ export function SupportRecoveryRequestsTab() {
     if (loading) {
         return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 4 }, children: _jsx(CircularProgress, {}) }));
     }
-    return (_jsxs(Box, { children: [canManageAgents && (_jsxs(Paper, { variant: "outlined", sx: { p: 2, mb: 3, borderRadius: 2 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.AGENTS_TITLE', 'Support agents') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.AGENTS_DESCRIPTION', 'Assign which users are allowed to handle support requests.') }), agentErrorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(agentErrorKey) })), _jsxs(Stack, { direction: { xs: 'column', md: 'row' }, spacing: 2, sx: { mb: 2, alignItems: { md: 'flex-start' } }, children: [_jsx(Autocomplete, { fullWidth: true, options: availableAgentCandidates, value: selectedAgentCandidate, loading: agentLoading, onChange: (_event, value) => setSelectedAgentCandidate(value), isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: getUserOptionLabel, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: t('Support.AGENTS_SELECT_LABEL', 'Select user'), placeholder: t('Support.AGENTS_SELECT_PLACEHOLDER', 'Choose a user') }))) }), _jsx(Button, { variant: "contained", onClick: handleAddAgent, disabled: !selectedAgentCandidate || agentLoading || Boolean(agentActionUserId), sx: { minWidth: 160 }, children: t('Support.AGENTS_ADD', 'Add as agent') })] }), agentLoading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(CircularProgress, { size: 24 }) })) : supportAgents.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.AGENTS_EMPTY', 'No support agents assigned yet.') })) : (_jsx(TableContainer, { component: Paper, variant: "outlined", children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { align: "right", children: t('Common.ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: supportAgents.map((agentUser) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getUserDisplayName(agentUser) || '-' }), _jsx(TableCell, { children: agentUser.email || '-' }), _jsx(TableCell, { align: "right", children: _jsx(IconButton, { size: "small", color: "error", onClick: () => handleRemoveAgent(agentUser), disabled: agentActionUserId === agentUser.id, "aria-label": t('Support.AGENTS_REMOVE', 'Remove support agent'), children: _jsx(CloseIcon, { fontSize: "small" }) }) })] }, agentUser.id))) })] }) }))] })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_REQUESTS_DESCRIPTION', 'Users who cannot complete MFA can request support. You can review their request and approve or reject it.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 2 }, children: [_jsx(Button, { variant: statusFilter === 'pending' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('pending'), children: t('Support.RECOVERY_FILTER_PENDING', 'Open') }), _jsx(Button, { variant: statusFilter === 'approved' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('approved'), children: t('Support.RECOVERY_FILTER_APPROVED', 'Approved') }), _jsx(Button, { variant: statusFilter === 'rejected' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('rejected'), children: t('Support.RECOVERY_FILTER_REJECTED', 'Rejected') })] }), requests.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.') })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Support.RECOVERY_COL_CREATED', 'Created') }), _jsx(TableCell, { children: t('Support.RECOVERY_USER', 'User') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_STATUS', 'Status') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: requests.map((req) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: req.created_at
+    return (_jsxs(Box, { children: [canManageAgents && (_jsxs(Paper, { variant: "outlined", sx: SUPPORT_RECOVERY_AGENT_PAPER_SX, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.AGENTS_TITLE', 'Support agents') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.AGENTS_DESCRIPTION', 'Assign which users are allowed to handle support requests.') }), agentErrorKey && (_jsx(Alert, { severity: "error", sx: SUPPORT_RECOVERY_ALERT_SX, children: t(agentErrorKey) })), _jsxs(Stack, { direction: { xs: 'column', md: 'row' }, spacing: 2, sx: { mb: 2, alignItems: { md: 'flex-start' } }, children: [_jsx(Autocomplete, { fullWidth: true, options: availableAgentCandidates, value: selectedAgentCandidate, loading: agentLoading, onChange: (_event, value) => setSelectedAgentCandidate(value), isOptionEqualToValue: (option, value) => option.id === value.id, getOptionLabel: getUserOptionLabel, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: t('Support.AGENTS_SELECT_LABEL', 'Select user'), placeholder: t('Support.AGENTS_SELECT_PLACEHOLDER', 'Choose a user') }))) }), _jsx(Button, { variant: "contained", onClick: handleAddAgent, disabled: !selectedAgentCandidate || agentLoading || Boolean(agentActionUserId), sx: SUPPORT_RECOVERY_AGENT_BUTTON_SX, children: t('Support.AGENTS_ADD', 'Add as agent') })] }), agentLoading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(CircularProgress, { size: 24 }) })) : supportAgents.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.AGENTS_EMPTY', 'No support agents assigned yet.') })) : (_jsx(TableContainer, { component: Paper, variant: "outlined", children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Profile.NAME_LABEL', 'Name') }), _jsx(TableCell, { children: t('Auth.EMAIL_LABEL', 'Email') }), _jsx(TableCell, { align: "right", children: t('Common.ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: supportAgents.map((agentUser) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: getUserDisplayName(agentUser) || '-' }), _jsx(TableCell, { children: agentUser.email || '-' }), _jsx(TableCell, { align: "right", children: _jsx(IconButton, { size: "small", color: "error", onClick: () => handleRemoveAgent(agentUser), disabled: agentActionUserId === agentUser.id, "aria-label": t('Support.AGENTS_REMOVE', 'Remove support agent'), children: _jsx(CloseIcon, { fontSize: "small" }) }) })] }, agentUser.id))) })] }) }))] })), _jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_REQUESTS_DESCRIPTION', 'Users who cannot complete MFA can request support. You can review their request and approve or reject it.') }), errorKey && (_jsx(Alert, { severity: "error", sx: SUPPORT_RECOVERY_ALERT_SX, children: t(errorKey) })), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 2 }, children: [_jsx(Button, { variant: statusFilter === 'pending' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('pending'), children: t('Support.RECOVERY_FILTER_PENDING', 'Open') }), _jsx(Button, { variant: statusFilter === 'approved' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('approved'), children: t('Support.RECOVERY_FILTER_APPROVED', 'Approved') }), _jsx(Button, { variant: statusFilter === 'rejected' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('rejected'), children: t('Support.RECOVERY_FILTER_REJECTED', 'Rejected') })] }), requests.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.') })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Support.RECOVERY_COL_CREATED', 'Created') }), _jsx(TableCell, { children: t('Support.RECOVERY_USER', 'User') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_STATUS', 'Status') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: requests.map((req) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: req.created_at
                                             ? new Date(req.created_at).toLocaleString(i18n === null || i18n === void 0 ? void 0 : i18n.language)
                                             : '-' }), _jsx(TableCell, { children: req.user_email || req.user }), _jsx(TableCell, { children: t(`Support.RECOVERY_STATUS_${req.status}`, req.status) }), _jsx(TableCell, { children: _jsx(Button, { variant: "contained", size: "small", onClick: () => openDialog(req), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_REVIEW', 'Review') }) })] }, req.id))) })] }) })), _jsxs(Dialog, { open: dialogOpen, onClose: closeDialog, fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Support.RECOVERY_REVIEW_DIALOG_TITLE', 'Review recovery request') }), _jsxs(DialogContent, { dividers: true, children: [selectedRequest && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_USER', 'User'), ":"] }), ' ', selectedRequest.user_email || selectedRequest.user] }), _jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [_jsxs("strong", { children: [t('Support.RECOVERY_REVIEW_CREATED', 'Requested at'), ":"] }), ' ', selectedRequest.created_at
                                                 ? new Date(selectedRequest.created_at).toLocaleString(i18n === null || i18n === void 0 ? void 0 : i18n.language)