@micha.bigler/ui-core-micha 2.13.0 → 2.15.0

package/WORK_ORDERS.md

@@ -11,6 +11,7 @@ rules are defined centrally in `webapps/AGENTS.md` → "Work-Order Register".
 | `ONB-*` | Onboarding wizard (steps, conditions, persistence) |
 | `PERF-*` | Performance improvements |
 | `NOTIF-*` | Shared notifications platform (dcm register is canonical; this repo's rows are its ucm-side WOs) |
+| `CHART-*` | Shared chart / data-viz kit (`ChartFrame` + MUI X-Charts presets + neutral palette/formatters) |
 
 Introduce a new prefix when none fits and add it here. New WOs always get a
 prefixed ID; never reuse a bare flat number across workstreams.
@@ -21,6 +22,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 |---|---|---|---|---|---|---|
 | ONB-1 | Per-app configurable notifications onboarding step | New `browserPush` prop `{nagUntil, showOnce}` on `OnboardingProvider`; parameterizes the `browser_push` descriptor's condition (default changes from implicit "all-channels" to "any-channel", stopping the over-nag); `showOnce` via a persisted `onboarding_seen` set (frozen-at-mount ref, no mid-session flicker) | 2026-07-17 | done | 1ae7c20 | Default behavior change affects cockpit and all consumers on their next ucm bump. jg-ferien companion WO pins the new version with `browserPush={{nagUntil: 'any-channel'}}` explicit (matches new default, but pinned explicitly per the WO). |
 | PERF-3B1 | Parallel auth bootstrap after CSRF | Starts auth-methods and current-user concurrently once CSRF is available, while preserving error handling and loading semantics. | 2026-07-19 | done | ee89329 | Independent `reviewer` + `sec_reviewer` passes both clean (no findings); one P3 test-coverage gap from the reviewer (missing mirror case: auth-methods rejects, current-user succeeds) closed with an added regression test — 45/45 tests green. Published as 2.10.1 (patch, no interface change) and pinned in jg-ferien alongside its PERF-3A companion WO. |
+| CHART-1 | Shared chart kit: themed `ChartFrame` + MUI X-Charts Bar/Line presets | Typed-agnostic `ChartFrame` (Paper + title + toolbar slot + loading/error/empty + responsive container + SVG/PNG export + a11y) wrapping any chart body via `children`; thin `BarChart`/`LineChart` presets over MUI X-Charts baking the governance chart contract (both-axis labels, legend-when-multiseries, tooltip, theme-token colours, responsive); neutral theme-aware palette + locale-aware formatters. Additive exports; publishes ucm 2.15.0. | 2026-07-30 | done | f1b3614 | Envelope authored by Expertenchat; `work-orders/CHART-1.md`. Operator approved the `@mui/x-charts` peerDependency 2026-07-30 (in-chat) before Codex ran. Codex-built direct (no nesting). Independent `reviewer` (background, author=Codex ≠ reviewer): found R1 (P1, real bug — 3 of 4 WO-required tests failed on actual execution: no RTL `cleanup()` between `render()` calls left stale DOM across the `ChartFrame` state-precedence/empty tests, and the `BarChart` responsive-sizing assertion called `.not.toContain(null)` on a `getAttribute('style')` that MUI's `sx` never sets inline — an invalid matcher call), R2 (P2 — `BarChart`/`LineChart` passed an invalid `tooltip={{trigger:'axis'}}` prop that isn't part of either component's real API per installed `@mui/x-charts@8.29.2` types; silently worked only via the library's own default, and the mocked tests couldn't catch it), R3 (P2 — `ChartFrame`'s chart region set both `aria-label` and `aria-labelledby`; per ARIA accessible-name computation `aria-labelledby` wins, so a caller-supplied `ariaLabel` override was silently discarded by assistive tech), R4 (P3 — the PNG export control was never actually clicked in the export test, only checked for presence). All four fixed by the orchestrator directly (in-scope reviewer-finding fixes, not a re-implementation): added `afterEach(cleanup)` to the three render-based test files, fixed the responsive-sizing assertion to tolerate `null`/empty inline style, moved tooltip config to the real `slotProps={{tooltip:{trigger:'axis'}}}` API (tests updated to match), suppressed `aria-labelledby` whenever a custom `ariaLabel` is supplied (with a new regression test), and added a PNG-export regression test asserting the callback fires. Re-verified: 16/16 scoped vitest tests green, `pnpm`/tsc build clean. hram adoption (pin bump + ~20 Results/Research panel migration) is a gated follow-on WO in the hram repo, gated on 2.15.0 published (publish-from-main CI on this push). SVG specialists (scatter/tornado/heatmap/CI/frontier) get frame+export in adoption but keep raw-SVG bodies — retiring raw SVG is a tracked future CHART-2. |
 | NOTIF-6 | NotificationsProvider + bell on canonical dcm feed/* API | Single-WS-owner `NotificationsProvider`/`useNotifications` (initial REST seed via `feedApi.js` + one `/ws/notifications/` socket, reconnect w/ backoff) + generic MUI `NotificationBell`; additive exports only | 2026-07-27 | done | 6c63fb9 | Codex-built direct (no nesting), independent `reviewer`: single-WS-owner invariant traced clean (no way to break it — `authenticated`/`replaceNotifications`/`refresh` all referentially stable across unrelated re-renders, re-render test is genuine not a no-op). R1 (P2, real bug): the `notification.status` WS handler patched item flags but never adjusted `unreadCount`, so the badge went stale after a cross-tab/cross-device mark — the test had locked in the stale count as expected behavior. Fixed: delta computed from before/after unread state on the WS patch path, mirroring `mark()`'s own logic; test corrected + a new cross-tab regression test added. 57 passing, build clean. No new npm dependency. Full history + backend contract: dcm's `WORK_ORDERS.md`/`docs/design/notifications-platform.md`. Publishes ucm 2.11.0 |
-| NOTIF-13 | Layer-1 transport extraction (pluggable realtime) | Extract the socket out of `NotificationsProvider` into a generic subscribe-by-message-type realtime primitive so a second domain (messaging) can ride the same socket; the catch-all that turns every non-`notification.status` message into a feed entry is replaced by explicit dispatch with unknown types ignored. Additive: `NotificationsProvider` stays the sole mount point, its context value unchanged. Full spec: [work-orders/NOTIF-13.md](work-orders/NOTIF-13.md). | 2026-07-29 | planned | | Tier 2 (cockpit consumes `NotificationsProvider` at 2.12.0 in prod). Phase A, the hinge: unblocks NOTIF-15 (jg bell adoption) and is the substrate for Phase B messaging. Canonical register row: django-core-micha `WORK_ORDERS.md`. Operator decision 2026-07-29: additive only, NO standalone `RealtimeProvider` apps must mount. Scope E (envelope contract + helper + doc) also touches dcm; note that the roadmap wording "dcm multi-stream consumer" overstates it — `push_to_users`/`NotificationConsumer` are already stream-agnostic. |
-| NOTIF-12 | Popup channel via the wizard renderer | Make `popup` a real delivery channel: extract the presentational dialog shell out of `OnboardingWizard`, render popup-eligible notifications through it, and record seen/dismissed on `NotificationRecipient` (design D-F7: renderer reuse only, NOT the onboarding progress store); dcm `PopupDispatcher` stops being a logging stub. Full spec: [work-orders/NOTIF-12.md](work-orders/NOTIF-12.md). | 2026-07-29 | planned | | Tier 2 (extracts a renderer cockpit+jg run in production; the roadmap label "uncritical" is about urgency, not blast radius). **HARD GATE: starts only after NOTIF-13 landed + published** — consumes its envelope contract and `subscribe()`, and edits the same ucm files (AGENTS.md overlap rule). **SHIPS WITH ZERO PRODUCERS, deliberately** (operator decision 2026-07-29, made with the evidence): no notification type declares `popup` in `eligible_channels` anywhere in dcm/jg/cockpit/hram/spesix/survey_app, so the channel is wired but inactive until an app opts a type in. WO therefore requires (a) CHANGELOG wording that does not overclaim (NOTIF-4 R1 precedent) and (b) a test-local producer type proving the path end-to-end, so it is not untested dead code. Was NOTIF-11 (renumbered 2026-07-29 for the jg cutover/drop split). |
+| NOTIF-13 | Layer-1 transport extraction (pluggable realtime) | Extract the socket out of `NotificationsProvider` into a generic subscribe-by-message-type realtime primitive so a second domain (messaging) can ride the same socket; the catch-all that turns every non-`notification.status` message into a feed entry is replaced by explicit dispatch with unknown types ignored. Additive: `NotificationsProvider` stays the sole mount point, its context value unchanged. Full spec: [work-orders/NOTIF-13.md](work-orders/NOTIF-13.md). | 2026-07-29 | done | ucm: 7a83ee9; dcm: de77335 | Tier 2 (cockpit consumes `NotificationsProvider` at 2.12.0 in prod). Phase A, the hinge: unblocks NOTIF-15 (jg bell adoption) and is the substrate for Phase B messaging. Canonical register row: django-core-micha `WORK_ORDERS.md`. Operator decision 2026-07-29: additive only, NO standalone `RealtimeProvider` apps must mount. Scope E (envelope contract + helper + doc) also touches dcm; note that the roadmap wording "dcm multi-stream consumer" overstates it — `push_to_users`/`NotificationConsumer` are already stream-agnostic. Codex failed twice on this WO with a genuine CLI/model-version error (`gpt-5.6-terra requires a newer version of Codex`), not a transient issue — orchestrator fell back to direct Claude implementation per the Codex→Claude fallback rule. Independent `reviewer` (sec_reviewer not required per WO): found R1 (P2, real bug — decoupling the REST seed from the socket connect opened a race where a live push arriving before the initial feed loaded would be silently discarded by `refresh()`'s unconditional `replaceNotifications()`; fixed via a `seeded` state gate restoring the exact original seed-then-connect ordering, re-verified 70/70 green), R2 (P3 — the WO's "must be called out in the CHANGELOG" has no home since ucm has no CHANGELOG.md convention at all; operator decision: document via commit message + this register entry only, no new file), R3 (register housekeeping, closed by this update). ucm full suite 70/70 + `pnpm build` clean; dcm notifications suite 92/92, full dcm suite 392/392. Published: ucm 2.13.0 (npm), dcm 2.33.0 (PyPI, verified live before this record) — no app pin bumps in this WO per spec. |
+| NOTIF-12 | Popup channel via the wizard renderer | Make `popup` a real delivery channel: extract the presentational dialog shell out of `OnboardingWizard`, render popup-eligible notifications through it, and record seen/dismissed on `NotificationRecipient` (design D-F7: renderer reuse only, NOT the onboarding progress store); dcm `PopupDispatcher` stops being a logging stub. Full spec: [work-orders/NOTIF-12.md](work-orders/NOTIF-12.md). | 2026-07-29 | done | ucm: c8e222f, d7bdcbe; dcm: django-core-micha 1612429, 82fd89f | Tier 2 (extracts a renderer cockpit+jg run in production; the roadmap label "uncritical" is about urgency, not blast radius). **HARD GATE: starts only after NOTIF-13 landed + published** — consumes its envelope contract and `subscribe()`, and edits the same ucm files (AGENTS.md overlap rule). **SHIPS WITH ZERO PRODUCERS, deliberately** (operator decision 2026-07-29, made with the evidence): no notification type declares `popup` in `eligible_channels` anywhere in dcm/jg/cockpit/hram/spesix/survey_app, so the channel is wired but inactive until an app opts a type in. WO therefore requires (a) CHANGELOG wording that does not overclaim (NOTIF-4 R1 precedent) and (b) a test-local producer type proving the path end-to-end, so it is not untested dead code. Was NOTIF-11 (renumbered 2026-07-29 for the jg cutover/drop split). **Gate satisfied 2026-07-30** (ucm 2.13.0 / dcm 2.33.0); WO re-verified against the landed NOTIF-13 code and corrected in `345631d`: NOTIF-13 shipped the envelope as a **domain**-level discriminator, so a popup payload built the same way as a chip payload would be indistinguishable from it - the WO now mandates a `channel` field inside the envelope (never a second envelope value) plus feed de-duplication by `notification_id`, without which chip+popup double-counts the unread badge. **Codex failed twice with the same genuine CLI/model-version error as NOTIF-13** (`gpt-5.6-terra requires a newer version of Codex`) — orchestrator implemented directly in Claude per the Codex→Claude fallback rule, both scopes. Independent `reviewer` (background agent, `fork_context=false`, full diff of both repos): found R1 (P1, real bug — the WS payload only carried `notification_id`, but `feed/mark/` resolves ids against `NotificationRecipient.pk`; every `markSeen`/`markDismissed` from a session-live-only popup would either no-op or corrupt an unrelated recipient row once a producer opts in — fixed by adding `recipient_id` to both `ChipDispatcher` and `PopupDispatcher` payloads, dcm-side, with regression tests), R2 (P2 — the reused dialog shell always showed the onboarding "Setup"/step-counter header even for a popup, a real mislabeling once any producer exists — fixed via an optional `title` override on `WizardDialogShell`, defaulting to the prior exact text so `OnboardingWizard` stays bit-for-bit unchanged; popup now shows its own notification title), R3 (P2 — coexistence only gated on a *blocking* onboarding step, so a non-blocking step (e.g. `browser_push`) and a popup could stack two simultaneous MUI dialogs — fixed by broadening the gate to any active onboarding step, with a new regression test). All three fixed and re-verified: ucm 88/88 vitest + `pnpm`/tsc build clean, dcm 95/95 pytest (notifications package). Published (once pushed): ucm 2.14.0 (npm, CI-gated on push to `main`), dcm 2.34.0 (PyPI, same). No app pin bumps in this WO per spec. Own orchestrator security/exposure pass in parallel with the reviewer: no findings (content rendering follows the existing `NotificationBell` i18n-interpolation pattern, no new WS consumer, `prefs.py`/`router.py`/`resolve_channels` untouched). |

package/dist/components/charts/BarChart.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
+import { useNeutralChartPalette } from './palette';
+function labelledAxis(axes, label, defaults) {
+    const values = (axes === null || axes === void 0 ? void 0 : axes.length) ? axes : [defaults];
+    return values.map((axis) => (Object.assign(Object.assign({}, axis), { label: axis.label || label })));
+}
+/**
+ * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
+ * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ */
+export function BarChart(_a) {
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect"]);
+    const neutralPalette = useNeutralChartPalette();
+    if (!xAxisLabel || !yAxisLabel) {
+        throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
+    }
+    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { series: series, xAxis: labelledAxis(xAxis, xAxisLabel, { scaleType: 'band', data: [] }), yAxis: labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' }), colors: palette || neutralPalette.categorical, hideLegend: series.length <= 1, slotProps: { tooltip: { trigger: 'axis' } } })) }));
+}

package/dist/components/charts/ChartFrame.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId, useRef, useState } from 'react';
+import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography, } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { exportChartPng, exportChartSvg } from './exportChart';
+/**
+ * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
+ */
+export function ChartFrame({ title, subtitle, toolbar, loading = false, error = false, isEmpty = false, emptyMessage, minHeight, aspect, exportOptions = false, onExportSvg, onExportPng, ariaLabel, children, variant = 'outlined', sx, }) {
+    const { t } = useTranslation();
+    const titleId = useId();
+    const chartRef = useRef(null);
+    const [exportError, setExportError] = useState(false);
+    const options = exportOptions === true ? {} : exportOptions || {};
+    const exportsEnabled = Boolean(exportOptions);
+    const hasCustomAriaLabel = Boolean(ariaLabel);
+    const chartLabel = ariaLabel || title;
+    const runExport = async (type) => {
+        setExportError(false);
+        try {
+            const filename = options.filename || 'chart';
+            const result = type === 'svg'
+                ? exportChartSvg(chartRef.current, `${filename}.svg`)
+                : await exportChartPng(chartRef.current, `${filename}.png`);
+            const callback = type === 'svg' ? onExportSvg : onExportPng;
+            callback === null || callback === void 0 ? void 0 : callback(result);
+        }
+        catch (_error) {
+            setExportError(true);
+        }
+    };
+    let content = children;
+    if (loading) {
+        content = _jsx(CircularProgress, { "aria-label": t('ChartFrame.LOADING') });
+    }
+    else if (error) {
+        content = _jsx(Alert, { severity: "error", children: typeof error === 'string' ? error : t('ChartFrame.ERROR_DEFAULT') });
+    }
+    else if (isEmpty) {
+        content = _jsx(Alert, { severity: "info", children: emptyMessage || t('ChartFrame.EMPTY_DEFAULT') });
+    }
+    return (_jsxs(Paper, { variant: variant, sx: Object.assign({ p: 2 }, sx), children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }, children: [_jsxs(Box, { children: [_jsx(Typography, { id: titleId, variant: "h6", children: title }), subtitle && _jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })] }), toolbar && _jsx(Box, { children: toolbar })] }), _jsx(Box, { ref: chartRef, role: "img", "aria-label": chartLabel, "aria-labelledby": hasCustomAriaLabel ? undefined : titleId, sx: {
+                    width: '100%',
+                    minHeight,
+                    aspectRatio: aspect,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: content }), exportError && _jsx(Alert, { severity: "error", sx: { mt: 2 }, children: t('ChartFrame.EXPORT_ERROR') }), exportsEnabled && (_jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", sx: { mt: 2 }, children: [options.svg !== false && (_jsx(Button, { size: "small", onClick: () => runExport('svg'), children: t('ChartFrame.EXPORT_SVG_LABEL') })), options.png !== false && (_jsx(Button, { size: "small", onClick: () => runExport('png'), children: t('ChartFrame.EXPORT_PNG_LABEL') }))] }))] }));
+}

package/dist/components/charts/LineChart.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import { LineChart as MuiLineChart } from '@mui/x-charts/LineChart';
+import { useNeutralChartPalette } from './palette';
+function labelledAxis(axes, label, defaults) {
+    const values = (axes === null || axes === void 0 ? void 0 : axes.length) ? axes : [defaults];
+    return values.map((axis) => (Object.assign(Object.assign({}, axis), { label: axis.label || label })));
+}
+/**
+ * Responsive MUI X-Charts line preset. xAxisLabel and yAxisLabel (including units) are required.
+ * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ */
+export function LineChart(_a) {
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect"]);
+    const neutralPalette = useNeutralChartPalette();
+    if (!xAxisLabel || !yAxisLabel) {
+        throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
+    }
+    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { series: series, xAxis: labelledAxis(xAxis, xAxisLabel, { scaleType: 'point', data: [] }), yAxis: labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' }), colors: palette || neutralPalette.categorical, hideLegend: series.length <= 1, slotProps: { tooltip: { trigger: 'axis' } } })) }));
+}

package/dist/components/charts/exportChart.js

@@ -0,0 +1,67 @@
+function findSvg(chartContainer) {
+    const svg = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector('svg');
+    if (!svg)
+        throw new Error('Chart container does not contain an SVG element.');
+    return svg;
+}
+function svgBlob(chartContainer) {
+    const svg = findSvg(chartContainer).cloneNode(true);
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    return new Blob([new XMLSerializer().serializeToString(svg)], { type: 'image/svg+xml;charset=utf-8' });
+}
+function download(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+}
+/** Serializes the first SVG rendered inside a chart container and downloads it. */
+export function exportChartSvg(chartContainer, filename = 'chart.svg') {
+    const blob = svgBlob(chartContainer);
+    download(blob, filename);
+    return blob;
+}
+/** Rasterizes the first SVG rendered inside a chart container at two-times scale and downloads it. */
+export function exportChartPng(chartContainer, filename = 'chart.png') {
+    const source = svgBlob(chartContainer);
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(source);
+        const image = new Image();
+        image.onload = () => {
+            try {
+                const svg = findSvg(chartContainer);
+                const width = Number(svg.getAttribute('width')) || svg.clientWidth || 1;
+                const height = Number(svg.getAttribute('height')) || svg.clientHeight || 1;
+                const canvas = document.createElement('canvas');
+                canvas.width = width * 2;
+                canvas.height = height * 2;
+                const context = canvas.getContext('2d');
+                context.fillStyle = 'white';
+                context.fillRect(0, 0, canvas.width, canvas.height);
+                context.drawImage(image, 0, 0, canvas.width, canvas.height);
+                canvas.toBlob((blob) => {
+                    URL.revokeObjectURL(url);
+                    if (!blob) {
+                        reject(new Error('Unable to create PNG export.'));
+                        return;
+                    }
+                    download(blob, filename);
+                    resolve(blob);
+                }, 'image/png');
+            }
+            catch (error) {
+                URL.revokeObjectURL(url);
+                reject(error);
+            }
+        };
+        image.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error('Unable to load chart SVG for PNG export.'));
+        };
+        image.src = url;
+    });
+}

package/dist/components/charts/formatters.js

@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next';
+export function formatPercentage(value, locale, options = {}) {
+    return new Intl.NumberFormat(locale, Object.assign({ style: 'percent', maximumFractionDigits: 1 }, options)).format(value);
+}
+export function formatCompact(value, locale, options = {}) {
+    return new Intl.NumberFormat(locale, Object.assign({ notation: 'compact', maximumFractionDigits: 1 }, options)).format(value);
+}
+export function formatRatio(value, locale, options = {}) {
+    return new Intl.NumberFormat(locale, Object.assign({ maximumFractionDigits: 2 }, options)).format(value);
+}
+/** Creates locale-aware formatter functions for use in chart axes and tooltips. */
+export function createChartFormatters(locale) {
+    return {
+        percentage: (value, options) => formatPercentage(value, locale, options),
+        compact: (value, options) => formatCompact(value, locale, options),
+        ratio: (value, options) => formatRatio(value, locale, options),
+    };
+}
+/** Resolves formatter locale from the active react-i18next instance. */
+export function useChartFormatters() {
+    const { i18n } = useTranslation();
+    return createChartFormatters(i18n.language);
+}

package/dist/components/charts/palette.js

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material/styles';
+/**
+ * Returns neutral chart colours derived only from the active MUI theme.
+ * Consumers may replace either array with their own domain palette.
+ */
+export function getNeutralChartPalette(theme) {
+    const palette = theme.palette;
+    const isDark = palette.mode === 'dark';
+    return {
+        categorical: isDark
+            ? [palette.primary.light, palette.secondary.light, palette.info.light, palette.success.light, palette.warning.light]
+            : [palette.primary.main, palette.secondary.main, palette.info.main, palette.success.main, palette.warning.main],
+        sequential: isDark
+            ? [palette.action.disabled, palette.text.secondary, palette.primary.light, palette.primary.main, palette.primary.dark]
+            : [palette.action.disabled, palette.divider, palette.text.secondary, palette.primary.light, palette.primary.main],
+    };
+}
+/** Resolves the kit's neutral palette from the nearest MUI ThemeProvider. */
+export function useNeutralChartPalette() {
+    return getNeutralChartPalette(useTheme());
+}

package/dist/i18n/chartsTranslations.js

@@ -0,0 +1,38 @@
+export const chartsTranslations = {
+    'ChartFrame.LOADING': {
+        de: 'Diagramm wird geladen.',
+        fr: 'Chargement du graphique.',
+        en: 'Loading chart.',
+        sw: 'Inapakia chati.',
+    },
+    'ChartFrame.EMPTY_DEFAULT': {
+        de: 'Keine Daten verfügbar.',
+        fr: 'Aucune donnée disponible.',
+        en: 'No data available.',
+        sw: 'Hakuna data inayopatikana.',
+    },
+    'ChartFrame.ERROR_DEFAULT': {
+        de: 'Das Diagramm konnte nicht geladen werden.',
+        fr: 'Impossible de charger le graphique.',
+        en: 'The chart could not be loaded.',
+        sw: 'Chati haikuweza kupakiwa.',
+    },
+    'ChartFrame.EXPORT_SVG_LABEL': {
+        de: 'SVG exportieren',
+        fr: 'Exporter en SVG',
+        en: 'Export SVG',
+        sw: 'Hamisha SVG',
+    },
+    'ChartFrame.EXPORT_PNG_LABEL': {
+        de: 'PNG exportieren',
+        fr: 'Exporter en PNG',
+        en: 'Export PNG',
+        sw: 'Hamisha PNG',
+    },
+    'ChartFrame.EXPORT_ERROR': {
+        de: 'Das Diagramm konnte nicht exportiert werden.',
+        fr: 'Impossible d’exporter le graphique.',
+        en: 'The chart could not be exported.',
+        sw: 'Chati haikuweza kuhamishwa.',
+    },
+};

package/dist/i18n/notificationsTranslations.js

@@ -17,4 +17,6 @@ export const notificationsTranslations = {
     'NotificationSettings.PUSH_CONFLICT': { de: 'Dieses Gerät ist bereits mit einem anderen Konto für Push-Benachrichtigungen verbunden.', fr: 'Cet appareil est déjà associé à un autre compte pour les notifications push.', en: 'This device is already associated with another account for push notifications.', sw: 'Kifaa hiki tayari kimeunganishwa na akaunti nyingine kwa arifa za push.' },
     'NotificationSettings.PUSH_NOT_SUPPORTED': { de: 'Push-Benachrichtigungen werden von diesem Browser nicht unterstützt.', fr: 'Les notifications push ne sont pas prises en charge par ce navigateur.', en: 'Push notifications are not supported by this browser.', sw: 'Arifa za push hazitumiki na kivinjari hiki.' },
     'NotificationSettings.IOS_HINT': { de: 'Füge diese App zuerst zum Home-Bildschirm hinzu, um Push-Benachrichtigungen zu aktivieren.', fr: 'Ajoutez d’abord cette application à l’écran d’accueil pour activer les notifications push.', en: 'Add this app to your home screen first to enable push notifications.', sw: 'Ongeza programu hii kwenye skrini yako ya mwanzo kwanza ili kuwasha arifa za push.' },
+    'PopupSurface.CLOSE': { de: 'Schliessen', fr: 'Fermer', en: 'Close', sw: 'Funga' },
+    'PopupSurface.TITLE': { de: 'Benachrichtigung', fr: 'Notification', en: 'Notification', sw: 'Arifa' },
 };

package/dist/index.js

@@ -27,16 +27,23 @@ export { RegistrationMethodsManager } from './components/RegistrationMethodsMana
 export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCard';
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
-// --- 6. Translations ---
+// --- 6. Charts ---
+export { ChartFrame } from './components/charts/ChartFrame';
+export { BarChart } from './components/charts/BarChart';
+export { LineChart } from './components/charts/LineChart';
+export { getNeutralChartPalette, useNeutralChartPalette } from './components/charts/palette';
+export { formatPercentage, formatCompact, formatRatio, createChartFormatters, useChartFormatters, } from './components/charts/formatters';
+// --- 7. Translations ---
 export { authTranslations } from './i18n/authTranslations';
-// --- 7. Notifications ---
+// --- 8. Notifications ---
 export { NotificationSettings } from './notifications/NotificationSettings';
 export * from './notifications/api';
 export { NotificationsProvider, useNotifications } from './notifications/NotificationsProvider';
 export { useRealtime } from './notifications/realtime';
 export { NotificationBell } from './notifications/NotificationBell';
+export { PopupSurface } from './notifications/PopupSurface';
 export { getNotificationFeed, getUnreadCount, markNotifications } from './notifications/feedApi';
-// --- 8. Onboarding ---
+// --- 9. Onboarding ---
 export * from './onboarding/api';
 export { selectActiveSteps } from './onboarding/stepSelection';
 export { OnboardingContext, OnboardingProvider, UNIVERSAL_STEP_DESCRIPTORS, useOnboarding, } from './onboarding/OnboardingProvider';
@@ -45,6 +52,7 @@ export { CookieConsentStep } from './onboarding/steps/CookieConsentStep';
 export { CompleteNameStep } from './onboarding/steps/CompleteNameStep';
 export { BrowserPushStep } from './onboarding/steps/BrowserPushStep';
 export { PwaInstallStep } from './onboarding/steps/PwaInstallStep';
-// --- 9. Translations ---
+// --- 10. Translations ---
 export { notificationsTranslations } from './i18n/notificationsTranslations';
 export { onboardingTranslations } from './i18n/onboardingTranslations';
+export { chartsTranslations } from './i18n/chartsTranslations';

package/dist/notifications/NotificationsProvider.js

@@ -91,6 +91,19 @@ export function NotificationsProvider({ children, wsUrlBase }) {
             return;
         }
         const pushedNotification = normalizeNotificationPush(data);
+        // NOTIF-12 D2: a notification routed to more than one channel (e.g. chip
+        // + popup) arrives as multiple WS messages sharing one notification_id.
+        // Fold repeats into the existing feed entry (last-write-wins on content)
+        // instead of appending a duplicate and double-incrementing the badge.
+        const existingIndex = pushedNotification.notification_id == null
+            ? -1
+            : notificationsRef.current.findIndex((notification) => notification.notification_id === pushedNotification.notification_id);
+        if (existingIndex !== -1) {
+            const nextNotifications = notificationsRef.current.map((notification, index) => (index === existingIndex
+                ? Object.assign(Object.assign({}, notification), { notification_type: pushedNotification.notification_type, content: pushedNotification.content }) : notification));
+            replaceNotifications(nextNotifications);
+            return;
+        }
         replaceNotifications([pushedNotification, ...notificationsRef.current]);
         setUnreadCount((count) => count + 1);
     }, [replaceNotifications]);

package/dist/notifications/PopupSurface.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useOnboarding } from '../onboarding/OnboardingProvider';
+import { WizardDialogShell } from '../onboarding/WizardDialogShell';
+import { useNotifications } from './NotificationsProvider';
+import { DEFAULT_ENVELOPE, useRealtime } from './realtime';
+function PopupStepComponent({ onDismiss, ctx }) {
+    const { t } = useTranslation();
+    const content = (ctx === null || ctx === void 0 ? void 0 : ctx.content) || {};
+    return (_jsxs(Stack, { spacing: 2, children: [content.body_key && (_jsx(Typography, { variant: "body1", children: t(content.body_key, content.params || {}) })), _jsx(Button, { onClick: onDismiss, sx: { alignSelf: 'flex-end' }, children: t('PopupSurface.CLOSE') })] }));
+}
+const POPUP_STEP = { blocking: false, Component: PopupStepComponent };
+/**
+ * Renders popup-eligible notifications (NOTIF-12) through the onboarding
+ * wizard's dialog shell, reusing only the renderer (design D-F7) — status
+ * lives on NotificationRecipient via the existing feed/mark path, never in
+ * the onboarding progress store.
+ *
+ * Deliberately session-live only: it watches the raw realtime stream for
+ * `channel === "popup"` messages rather than the already-seeded feed list,
+ * since the feed carries no per-channel discriminator (see NotificationsProvider).
+ */
+export function PopupSurface() {
+    var _a;
+    const { t } = useTranslation();
+    const { markSeen, markDismissed } = useNotifications();
+    const { subscribe } = useRealtime();
+    const onboarding = useOnboarding();
+    const [queue, setQueue] = useState([]);
+    const seenIdsRef = useRef(new Set());
+    const handleRealtimeMessage = useCallback((data) => {
+        if (data.type === 'notification.status')
+            return;
+        if (data.channel !== 'popup')
+            return;
+        setQueue((previous) => {
+            var _a;
+            if (previous.some((item) => item.notification_id === data.notification_id))
+                return previous;
+            return [...previous, {
+                    notification_id: data.notification_id,
+                    // recipient_id is the id feed/mark/ actually resolves against
+                    // (NotificationRecipient.pk, not Notification.pk). Fall back to
+                    // notification_id only for an older dcm that predates it — matching
+                    // NotificationsProvider's own normalizeNotificationPush precedent.
+                    markId: (_a = data.recipient_id) !== null && _a !== void 0 ? _a : data.notification_id,
+                    content: data.content || {},
+                }];
+        });
+    }, []);
+    useEffect(() => subscribe(DEFAULT_ENVELOPE, handleRealtimeMessage), [subscribe, handleRealtimeMessage]);
+    // Any active onboarding step — blocking or not — must win: OnboardingWizard
+    // renders its own dialog for as long as onboarding.activeSteps is non-empty,
+    // and two independent MUI Dialogs must never be mounted at once.
+    const onboardingActive = Boolean((_a = onboarding === null || onboarding === void 0 ? void 0 : onboarding.activeSteps) === null || _a === void 0 ? void 0 : _a.length);
+    const activePopup = queue[0];
+    useEffect(() => {
+        if (!activePopup || onboardingActive)
+            return;
+        if (activePopup.markId == null)
+            return;
+        if (seenIdsRef.current.has(activePopup.notification_id))
+            return;
+        seenIdsRef.current.add(activePopup.notification_id);
+        markSeen([activePopup.markId]);
+    }, [activePopup, onboardingActive, markSeen]);
+    const dismissActivePopup = useCallback(() => {
+        if (!activePopup)
+            return;
+        if (activePopup.markId != null)
+            markDismissed([activePopup.markId]);
+        setQueue((previous) => previous.filter((item) => item.notification_id !== activePopup.notification_id));
+    }, [activePopup, markDismissed]);
+    if (!activePopup || onboardingActive)
+        return null;
+    return (_jsx(WizardDialogShell, { step: POPUP_STEP, stepIndex: 0, total: 1, onComplete: dismissActivePopup, onDismiss: dismissActivePopup, ctx: { content: activePopup.content }, title: activePopup.content.title_key
+            ? t(activePopup.content.title_key, activePopup.content.params || {})
+            : t('PopupSurface.TITLE') }));
+}
+export default PopupSurface;

package/dist/onboarding/OnboardingWizard.js

@@ -1,16 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Box from '@mui/material/Box';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import LinearProgress from '@mui/material/LinearProgress';
-import Typography from '@mui/material/Typography';
 import { AuthContext } from '../auth/AuthContext';
 import { useOnboarding } from './OnboardingProvider';
+import { WizardDialogShell } from './WizardDialogShell';
 export function OnboardingWizard() {
-    const { t } = useTranslation();
     const onboarding = useOnboarding();
     const authContext = useContext(AuthContext);
     const [sessionDismissed, setSessionDismissed] = useState(() => new Set());
@@ -37,8 +30,6 @@ export function OnboardingWizard() {
         return null;
     const { dismissStep, ctx } = onboarding;
     const total = totalRef.current || visibleSteps.length;
-    const progress = total > 1 ? Math.round((completed / total) * 100) : 0;
-    const StepComponent = currentStep.Component;
     const completeCurrentStep = () => {
         var _a, _b;
         setSessionDismissed((previous) => new Set([...previous, currentStep.id]));
@@ -52,6 +43,6 @@ export function OnboardingWizard() {
             dismissStep(currentStep.id);
         completeCurrentStep();
     };
-    return (_jsxs(Dialog, { open: true, fullWidth: true, maxWidth: "sm", disableEscapeKeyDown: currentStep.blocking, onClose: currentStep.blocking ? undefined : dismissCurrentStep, children: [_jsxs(DialogTitle, { sx: { pb: 0 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: _jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: total > 1 ? t('Onboarding.STEP_COUNTER', { current: completed + 1, total }) : t('Onboarding.SETUP') }) }), total > 1 && _jsx(LinearProgress, { variant: "determinate", value: progress, sx: { mt: 1, borderRadius: 1 } })] }), _jsx(DialogContent, { sx: { pt: 2 }, children: _jsx(StepComponent, { onComplete: completeCurrentStep, onDismiss: dismissCurrentStep, ctx: ctx }) })] }));
+    return (_jsx(WizardDialogShell, { step: currentStep, stepIndex: completed, total: total, onComplete: completeCurrentStep, onDismiss: dismissCurrentStep, ctx: ctx }));
 }
 export default OnboardingWizard;

package/dist/onboarding/WizardDialogShell.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import LinearProgress from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+/**
+ * Presentational dialog shell shared by OnboardingWizard and the popup
+ * notification surface (NOTIF-12). Owns only the dialog frame, the
+ * counter/progress header, and the onComplete/onDismiss/ctx child contract —
+ * step selection, dismissal persistence, and any progress store stay with
+ * the caller.
+ */
+export function WizardDialogShell({ step, stepIndex, total, onComplete, onDismiss, ctx, title }) {
+    const { t } = useTranslation();
+    const progress = total > 1 ? Math.round((stepIndex / total) * 100) : 0;
+    const StepComponent = step.Component;
+    // `title` lets a non-onboarding caller (e.g. the popup surface) supply its
+    // own header instead of the onboarding-specific step counter/"Setup" copy.
+    // Omitted by OnboardingWizard, so its header text is unchanged.
+    const headerLabel = title !== null && title !== void 0 ? title : (total > 1
+        ? t('Onboarding.STEP_COUNTER', { current: stepIndex + 1, total })
+        : t('Onboarding.SETUP'));
+    return (_jsxs(Dialog, { open: true, fullWidth: true, maxWidth: "sm", disableEscapeKeyDown: step.blocking, onClose: step.blocking ? undefined : onDismiss, children: [_jsxs(DialogTitle, { sx: { pb: 0 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: _jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: headerLabel }) }), total > 1 && _jsx(LinearProgress, { variant: "determinate", value: progress, sx: { mt: 1, borderRadius: 1 } })] }), _jsx(DialogContent, { sx: { pt: 2 }, children: _jsx(StepComponent, { onComplete: onComplete, onDismiss: onDismiss, ctx: ctx }) })] }));
+}
+export default WizardDialogShell;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -12,6 +12,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.3.11",
+    "@mui/x-charts": "^8.0.0",
     "axios": "^1.16.1",
     "i18next": "^25.10.10 || ^26.0.0",
     "qrcode.react": "^4.2.0",
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@mui/icons-material": "^7.3.11",
+    "@mui/x-charts": "^8.0.0",
     "@testing-library/react": "^16.3.2",
     "i18next": "^26.2.0",
     "jsdom": "^29.1.1",

package/src/components/charts/BarChart.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
+import { useNeutralChartPalette } from './palette';
+
+function labelledAxis(axes, label, defaults) {
+  const values = axes?.length ? axes : [defaults];
+  return values.map((axis) => ({ ...axis, label: axis.label || label }));
+}
+
+/**
+ * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
+ * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ */
+export function BarChart({
+  series = [],
+  xAxisLabel,
+  yAxisLabel,
+  xAxis,
+  yAxis,
+  palette,
+  minHeight,
+  aspect,
+  ...chartProps
+}) {
+  const neutralPalette = useNeutralChartPalette();
+  if (!xAxisLabel || !yAxisLabel) {
+    throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
+  }
+
+  return (
+    <Box data-testid="bar-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
+      <MuiBarChart
+        {...chartProps}
+        series={series}
+        xAxis={labelledAxis(xAxis, xAxisLabel, { scaleType: 'band', data: [] })}
+        yAxis={labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' })}
+        colors={palette || neutralPalette.categorical}
+        hideLegend={series.length <= 1}
+        slotProps={{ tooltip: { trigger: 'axis' } }}
+      />
+    </Box>
+  );
+}