@micha.bigler/ui-core-micha 2.12.0 → 2.14.0

package/WORK_ORDERS.md

@@ -22,3 +22,5 @@ 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. |
 | 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 | 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 | 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). **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. |

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

@@ -33,7 +33,9 @@ export { authTranslations } from './i18n/authTranslations';
 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 ---
 export * from './onboarding/api';

package/dist/notifications/NotificationsProvider.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { AuthContext } from '../auth/AuthContext';
 import { getNotificationFeed, getUnreadCount, markNotifications } from './feedApi';
-const INITIAL_BACKOFF_MS = 1000;
-const MAX_BACKOFF_MS = 30000;
+import { DEFAULT_ENVELOPE, RealtimeContext, useRealtimeCore } from './realtime';
 const NotificationsContext = createContext(null);
 function normalizeNotification(notification) {
     var _a, _b, _c;
@@ -43,7 +42,6 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     const [notifications, setNotifications] = useState([]);
     const [unreadCount, setUnreadCount] = useState(0);
     const notificationsRef = useRef([]);
-    const socketRef = useRef(null);
     const replaceNotifications = useCallback((nextNotifications) => {
         notificationsRef.current = nextNotifications;
         setNotifications(nextNotifications);
@@ -61,94 +59,79 @@ export function NotificationsProvider({ children, wsUrlBase }) {
         setUnreadCount(nextUnreadCount);
         return { notifications: nextNotifications, unreadCount: nextUnreadCount };
     }, [authenticated, replaceNotifications]);
+    // Seeded gates the socket connect, not just `authenticated`: the prior single-purpose
+    // socket owner awaited the initial REST feed/unread-count fetch before opening the
+    // WebSocket, so a live push could never race an empty/incomplete `notificationsRef`.
+    // Preserved here rather than connecting immediately, since `refresh()`'s
+    // `replaceNotifications(...)` is unconditional and would silently drop a message that
+    // arrived and patched state before the initial REST response landed.
+    const [seeded, setSeeded] = useState(false);
+    const { subscribe } = useRealtimeCore({
+        active: authenticated && seeded,
+        wsUrl: getWebSocketUrl(wsUrlBase),
+    });
+    const handleRealtimeMessage = useCallback((data) => {
+        if (data.type === 'notification.status') {
+            let unreadDelta = 0;
+            const nextNotifications = notificationsRef.current.map((notification) => {
+                if (notification.notification_id !== data.notification_id)
+                    return notification;
+                const wasUnread = !notification.seen && !notification.dismissed;
+                const patched = patchStatus(notification, data.status || {});
+                const isUnread = !patched.seen && !patched.dismissed;
+                if (wasUnread !== isUnread) {
+                    unreadDelta += isUnread ? 1 : -1;
+                }
+                return patched;
+            });
+            replaceNotifications(nextNotifications);
+            if (unreadDelta) {
+                setUnreadCount((count) => Math.max(0, count + unreadDelta));
+            }
+            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]);
+    useEffect(() => {
+        if (!authenticated)
+            return undefined;
+        return subscribe(DEFAULT_ENVELOPE, handleRealtimeMessage);
+    }, [authenticated, subscribe, handleRealtimeMessage]);
     useEffect(() => {
         if (!authenticated) {
             replaceNotifications([]);
             setUnreadCount(0);
+            setSeeded(false);
             return undefined;
         }
-        let active = true;
-        let reconnectTimer = null;
-        let backoffMs = INITIAL_BACKOFF_MS;
-        const patchNotifications = (updater) => {
-            const nextNotifications = updater(notificationsRef.current);
-            replaceNotifications(nextNotifications);
-        };
-        const handleMessage = (event) => {
-            let data;
-            try {
-                data = JSON.parse(event.data);
-            }
-            catch (_a) {
-                return;
-            }
-            if (data.type === 'notification.status') {
-                let unreadDelta = 0;
-                patchNotifications((current) => current.map((notification) => {
-                    if (notification.notification_id !== data.notification_id)
-                        return notification;
-                    const wasUnread = !notification.seen && !notification.dismissed;
-                    const patched = patchStatus(notification, data.status || {});
-                    const isUnread = !patched.seen && !patched.dismissed;
-                    if (wasUnread !== isUnread) {
-                        unreadDelta += isUnread ? 1 : -1;
-                    }
-                    return patched;
-                }));
-                if (unreadDelta) {
-                    setUnreadCount((count) => Math.max(0, count + unreadDelta));
-                }
-                return;
-            }
-            const pushedNotification = normalizeNotificationPush(data);
-            patchNotifications((current) => [pushedNotification, ...current]);
-            setUnreadCount((count) => count + 1);
-        };
-        const connect = () => {
-            if (!active || socketRef.current)
-                return;
-            const socket = new WebSocket(getWebSocketUrl(wsUrlBase));
-            socketRef.current = socket;
-            socket.onopen = () => {
-                backoffMs = INITIAL_BACKOFF_MS;
-            };
-            socket.onmessage = handleMessage;
-            socket.onerror = () => {
-                socket.close();
-            };
-            socket.onclose = () => {
-                if (socketRef.current === socket) {
-                    socketRef.current = null;
-                }
-                if (!active || reconnectTimer)
-                    return;
-                reconnectTimer = setTimeout(() => {
-                    reconnectTimer = null;
-                    connect();
-                }, backoffMs);
-                backoffMs = Math.min(backoffMs * 2, MAX_BACKOFF_MS);
-            };
-        };
-        const seedAndConnect = async () => {
-            try {
-                await refresh();
-            }
-            catch (_a) {
-                // The live stream remains useful if the initial REST request is temporarily unavailable.
-            }
-            if (active)
-                connect();
-        };
-        seedAndConnect();
+        let cancelled = false;
+        refresh()
+            .catch(() => {
+            // The live stream remains useful if the initial REST request is temporarily unavailable.
+        })
+            .finally(() => {
+            if (!cancelled)
+                setSeeded(true);
+        });
         return () => {
-            active = false;
-            clearTimeout(reconnectTimer);
-            const socket = socketRef.current;
-            socketRef.current = null;
-            if (socket)
-                socket.close();
+            cancelled = true;
         };
-    }, [authenticated, refresh, replaceNotifications, wsUrlBase]);
+    }, [authenticated, refresh, replaceNotifications]);
     const mark = useCallback((action, ids) => {
         const selectedIds = Array.isArray(ids) ? ids : [];
         const selected = new Set(selectedIds);
@@ -176,14 +159,14 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     const markSeen = useCallback((ids) => mark('seen', ids), [mark]);
     const markDismissed = useCallback((ids) => mark('dismissed', ids), [mark]);
     const markDone = useCallback((ids) => mark('done', ids), [mark]);
-    return (_jsx(NotificationsContext.Provider, { value: {
-            notifications,
-            unreadCount,
-            markSeen,
-            markDismissed,
-            markDone,
-            refresh,
-        }, children: children }));
+    return (_jsx(RealtimeContext.Provider, { value: { subscribe }, children: _jsx(NotificationsContext.Provider, { value: {
+                notifications,
+                unreadCount,
+                markSeen,
+                markDismissed,
+                markDone,
+                refresh,
+            }, children: children }) }));
 }
 export function useNotifications() {
     const context = useContext(NotificationsContext);

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/notifications/realtime.js

@@ -0,0 +1,110 @@
+import { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+const INITIAL_BACKOFF_MS = 1000;
+const MAX_BACKOFF_MS = 30000;
+// Envelope discriminator for the notifications domain. A message with no
+// `envelope` field (pre-NOTIF-13 dcm) is treated as this default so an
+// un-bumped backend keeps working unchanged (backward-compat).
+export const DEFAULT_ENVELOPE = 'notification';
+const RealtimeContext = createContext(null);
+export function useRealtime() {
+    const context = useContext(RealtimeContext);
+    if (!context) {
+        throw new Error('useRealtime must be used within a NotificationsProvider');
+    }
+    return context;
+}
+export { RealtimeContext };
+/**
+ * Owns the single WebSocket connection and an envelope-keyed subscriber
+ * registry. Internal — consumed only by NotificationsProvider, which
+ * re-exposes `subscribe` via RealtimeContext so useRealtime() works without
+ * a separate provider apps have to mount.
+ *
+ * Backoff, reconnect, and cleanup semantics are unchanged from the prior
+ * single-purpose socket owner. `active`/`wsUrl` are primitives, so the
+ * effect does not re-run (and does not reconnect) on unrelated re-renders.
+ */
+export function useRealtimeCore({ active, wsUrl }) {
+    const socketRef = useRef(null);
+    const subscribersRef = useRef(new Map());
+    const subscribe = useCallback((envelope, handler) => {
+        const subscribers = subscribersRef.current;
+        if (!subscribers.has(envelope)) {
+            subscribers.set(envelope, new Set());
+        }
+        subscribers.get(envelope).add(handler);
+        return () => {
+            const handlers = subscribers.get(envelope);
+            if (!handlers)
+                return;
+            handlers.delete(handler);
+            if (handlers.size === 0) {
+                subscribers.delete(envelope);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (!active)
+            return undefined;
+        let isActive = true;
+        let reconnectTimer = null;
+        let backoffMs = INITIAL_BACKOFF_MS;
+        const handleMessage = (event) => {
+            var _a;
+            let data;
+            try {
+                data = JSON.parse(event.data);
+            }
+            catch (_b) {
+                return;
+            }
+            const envelope = (_a = data.envelope) !== null && _a !== void 0 ? _a : DEFAULT_ENVELOPE;
+            const handlers = subscribersRef.current.get(envelope);
+            if (!handlers || handlers.size === 0)
+                return;
+            handlers.forEach((handler) => {
+                try {
+                    handler(data);
+                }
+                catch (error) {
+                    console.error('Realtime subscriber error', error);
+                }
+            });
+        };
+        const connect = () => {
+            if (!isActive || socketRef.current)
+                return;
+            const socket = new WebSocket(wsUrl);
+            socketRef.current = socket;
+            socket.onopen = () => {
+                backoffMs = INITIAL_BACKOFF_MS;
+            };
+            socket.onmessage = handleMessage;
+            socket.onerror = () => {
+                socket.close();
+            };
+            socket.onclose = () => {
+                if (socketRef.current === socket) {
+                    socketRef.current = null;
+                }
+                if (!isActive || reconnectTimer)
+                    return;
+                reconnectTimer = setTimeout(() => {
+                    reconnectTimer = null;
+                    connect();
+                }, backoffMs);
+                backoffMs = Math.min(backoffMs * 2, MAX_BACKOFF_MS);
+            };
+        };
+        connect();
+        return () => {
+            isActive = false;
+            clearTimeout(reconnectTimer);
+            const socket = socketRef.current;
+            socketRef.current = null;
+            if (socket)
+                socket.close();
+        };
+    }, [active, wsUrl]);
+    return { subscribe };
+}

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.12.0",
+  "version": "2.14.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/i18n/notificationsTranslations.ts

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

@@ -46,7 +46,9 @@ export { authTranslations } from './i18n/authTranslations';
 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 ---