@marinoscar/platform-web 0.1.0-next.3 → 0.1.0-next.4

package/dist/notifications/ui/NotificationSettingsPage.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Admin → Settings → Notifications (`/admin/settings/notifications`).
+ *
+ * Issue #225, epic #215. The `Notifications` card in `config/adminSections.tsx`
+ * routes here, and — per the MANDATORY settings-hub rules in `CLAUDE.md` — that
+ * registry entry is what makes this page reachable from the hub, the Console
+ * rail and the AppBar title resolver at once. It is deliberately NOT a fourth
+ * tab on an existing settings page: a tab gate is about CONTENT within one
+ * destination, and this is a destination of its own.
+ *
+ * NOTHING ENFORCES THESE VALUES YET, AND THAT IS NOT A BUG. #225 adds the
+ * setting, its persistence and this editor. The server-side enforcement — the
+ * browser channel consulting `browserEnabled` / `disabledEvents` before it
+ * writes a notification, and the non-admin read endpoint that lets the web app
+ * stop asking for OS permission when the capability is off — is issue #226.
+ * Until that lands, saving here changes the stored document and changes nothing
+ * an end user can observe.
+ *
+ * WHY THE CHECKBOX IS INVERTED RELATIVE TO THE STORED FIELD. The document
+ * stores `disabledEvents` (a suppression list), and this page renders a box
+ * that is CHECKED when the event is delivered. That matches
+ * `/settings/notifications`, where a switch being on means "you receive this" —
+ * two notification surfaces whose controls read in opposite directions would be
+ * a genuine hazard on a page whose whole job is silencing things. The inversion
+ * happens in exactly one place (`toggleEvent`), never in render.
+ *
+ * ONLY BROWSER-CAPABLE EVENTS ARE LISTED. `disabledEvents` suppresses the
+ * BROWSER notification; offering the control for an email-only event
+ * (`user.welcome`, `allowlist.invitation`) would render a checkbox that cannot
+ * do anything. The registry is the authority on which those are — this page
+ * filters on `declaredChannels.includes('browser')` and never restates the list.
+ *
+ * THE CHANNEL SWITCHES (PP-14.10). Beyond the browser switch, every channel an
+ * app registered (anything but the platform's `email`, `browser` and `push`,
+ * which are configured on their own pages) gets a switch of its own, drawn
+ * from `GET /api/notifications/channels` with the label the registry gave it.
+ * A switch writes `channels.<id>.enabled`; the section does not render at all
+ * while the deployment registers no such channel, so a deployment with only
+ * the platform's channels sees the page exactly as it was.
+ *
+ * `declaredChannels`, NOT `channels` (#521). `channels` is what a USER will
+ * receive: the API narrows it by this very policy, so a non-mandatory event
+ * this page has suppressed (or every one, while the switch is off) no longer
+ * lists `browser` there. Filtering on it made a suppressed event vanish from
+ * the one page that can lift the suppression. `declaredChannels` is the
+ * registry's declaration before policy, so a suppressed event stays listed,
+ * unchecked, and can be re-enabled.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Alert, Box, Button, Checkbox, Chip, CircularProgress, Divider, FormControlLabel, Stack, Switch, Typography, } from '@mui/material';
+import LockIcon from '@mui/icons-material/Lock';
+import { SystemSettingsSection } from './SystemSettingsSection.js';
+import { useNotificationChannels } from '../headless/useNotificationChannels.js';
+import { useNotificationEvents } from '../headless/useNotificationEvents.js';
+/**
+ * The channels the platform configures elsewhere (Email and Push on their own
+ * settings pages) or on this page's browser switch: no channel switch here.
+ */
+const PLATFORM_CHANNEL_IDS = ['email', 'browser', 'push'];
+const PAGE_TITLE = 'Notifications';
+const PAGE_DESCRIPTION = 'Turn browser notifications on or off for everyone, and suppress individual events.';
+/**
+ * The block, defaulted.
+ *
+ * A UI that crashes because a field is missing is worse than one that shows the
+ * documented defaults: this build can be deployed in front of an API that
+ * predates #225, and the response schema is the API's promise, not a guarantee
+ * about every server this bundle will ever talk to.
+ */
+const FALLBACK = {
+    browserEnabled: true,
+    disabledEvents: [],
+};
+/** Order-insensitive set comparison, so re-ordering alone is not "dirty". */
+function sameKeys(a, b) {
+    if (a.length !== b.length)
+        return false;
+    const left = [...a].sort();
+    const right = [...b].sort();
+    return left.every((key, index) => key === right[index]);
+}
+function EventRow({ event, enabled, disabled, onChange }) {
+    return (_jsx(Box, { sx: { py: 1.5 }, children: _jsx(FormControlLabel, { sx: { alignItems: 'flex-start', m: 0 }, control: _jsx(Checkbox, { checked: enabled, disabled: disabled, onChange: (e) => onChange(e.target.checked), slotProps: {
+                    input: {
+                        'aria-label': `Browser notification for ${event.label}`,
+                    },
+                }, sx: { mt: -1 } }), label: _jsxs(Box, { children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Typography, { variant: "subtitle2", children: event.label }), event.mandatory && (_jsx(Chip, { size: "small", icon: _jsx(LockIcon, {}), label: "Users cannot opt out", variant: "outlined" }))] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: event.description }), _jsx(Typography, { variant: "caption", color: "text.disabled", children: event.key })] }) }) }));
+}
+/**
+ * The `/admin/settings/notifications` page: the deployment-wide browser channel switch and the per-event suppression list (`system_settings:read`; writes gated by `system_settings:write`).
+ *
+ * @returns the page.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export default function NotificationSettingsPage(props = {}) {
+    return (_jsx(SystemSettingsSection, { slots: props.slots, title: PAGE_TITLE, description: PAGE_DESCRIPTION, requiredPermission: "system_settings:read", children: ({ settings, canWrite, isSaving, saveBranch }) => (_jsx(NotificationSettingsForm, { stored: settings.notifications ?? FALLBACK, canWrite: canWrite, isSaving: isSaving, onSave: (value) => saveBranch('notifications', value) })) }));
+}
+/**
+ * Split out from the page so the render prop stays a one-liner and the editing
+ * state has a component of its own to live in: the page owns the chrome, the
+ * form owns the pending edit.
+ *
+ * A BATCHED SAVE, unlike `/settings/notifications`, which PATCHes on every
+ * toggle. The reason is the shape of the data, not a style preference: the
+ * per-user matrix is a sparse map where each toggle is genuinely independent
+ * and a null-delete keeps absent keys absent, whereas `disabledEvents` is a
+ * single array that REPLACES wholesale. Saving per click would fire one full
+ * array write per checkbox and race with itself; here a local mirror is the
+ * correct model, because the local mirror IS the value being written.
+ */
+function NotificationSettingsForm({ stored, canWrite, isSaving, onSave }) {
+    const { events, isLoading, error } = useNotificationEvents();
+    const { channels: channelDescriptors } = useNotificationChannels();
+    // The channels an app registered, each with a switch of its own. Empty for a
+    // deployment with only the platform's channels (the section then renders
+    // nothing).
+    const appChannels = useMemo(() => (channelDescriptors ?? []).filter((channel) => !PLATFORM_CHANNEL_IDS.includes(channel.id)), [channelDescriptors]);
+    const [browserEnabled, setBrowserEnabled] = useState(stored.browserEnabled);
+    // Local edits of the channel switches, by channel id; a channel absent here
+    // shows its stored state (enabled when nothing is stored).
+    const [channelEdits, setChannelEdits] = useState({});
+    const storedChannelEnabled = (id) => stored.channels?.[id]?.enabled ?? true;
+    const channelEnabled = (id) => channelEdits[id] ?? storedChannelEnabled(id);
+    const [disabledEvents, setDisabledEvents] = useState(stored.disabledEvents);
+    // Re-seed from the server's answer whenever it changes — after a successful
+    // save, or after the hook re-fetches on a 409. The stored document is the
+    // source of truth and local state is only ever a pending edit of it.
+    useEffect(() => {
+        setBrowserEnabled(stored.browserEnabled);
+        setDisabledEvents(stored.disabledEvents);
+        setChannelEdits({});
+    }, [stored]);
+    // `declaredChannels`, not the policy-narrowed `channels`: see the file
+    // header. Filtering on `channels` would hide exactly the events this page
+    // has suppressed, leaving no way to re-enable them (#521).
+    const browserEvents = useMemo(() => (events ?? []).filter((event) => event.declaredChannels.includes('browser')), [events]);
+    // Only the switches that differ from what is stored: the PATCH merges per
+    // channel, so an unchanged channel is not sent.
+    const changedChannels = Object.fromEntries(Object.entries(channelEdits)
+        .filter(([id, enabled]) => enabled !== storedChannelEnabled(id))
+        .map(([id, enabled]) => [id, { enabled }]));
+    const hasChannelChanges = Object.keys(changedChannels).length > 0;
+    const isDirty = browserEnabled !== stored.browserEnabled ||
+        !sameKeys(disabledEvents, stored.disabledEvents) ||
+        hasChannelChanges;
+    const controlsDisabled = !canWrite || isSaving;
+    const toggleEvent = (key, enabled) => {
+        setDisabledEvents((current) => enabled ? current.filter((k) => k !== key) : [...new Set([...current, key])]);
+    };
+    const handleSave = () => {
+        void onSave({
+            browserEnabled,
+            disabledEvents,
+            ...(hasChannelChanges ? { channels: changedChannels } : {}),
+        });
+    };
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Browser notifications" }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: browserEnabled, disabled: controlsDisabled, onChange: (e) => setBrowserEnabled(e.target.checked) }), label: "Deliver browser notifications" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { ml: 4, mb: 2 }, children: "When off, no one receives browser notifications, whatever their own preferences say. Email is unaffected." }), appChannels.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Delivery channels" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Turn a channel off to stop every notification over it, for everyone. Browser, email and push are configured above and on their own pages." }), _jsx(Stack, { divider: _jsx(Divider, { flexItem: true }), children: appChannels.map((channel) => (_jsx(Box, { sx: { py: 1 }, children: _jsx(FormControlLabel, { sx: { alignItems: 'flex-start', m: 0 }, control: _jsx(Switch, { checked: channelEnabled(channel.id), disabled: controlsDisabled, onChange: (e) => setChannelEdits((current) => ({ ...current, [channel.id]: e.target.checked })), slotProps: { input: { 'aria-label': `Deliver ${channel.label} notifications` } } }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", children: channel.label }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: channel.description })] }) }) }, channel.id))) })] })), _jsx(Divider, { sx: { my: 3 } }), _jsx(Typography, { variant: "h6", gutterBottom: true, children: "Events" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Clear an event to stop showing its browser notification for everyone. Events that can only be delivered by email are not listed." }), !browserEnabled && (_jsx(Alert, { severity: "info", sx: { my: 2 }, children: "Browser notifications are off for everyone, so these choices are not in effect. They are kept, and apply again if you turn the switch back on." })), isLoading && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(CircularProgress, { size: 28 }) })), error && (_jsx(Alert, { severity: "error", sx: { my: 2 }, children: error })), !isLoading && !error && browserEvents.length === 0 && (_jsx(Alert, { severity: "info", sx: { my: 2 }, children: "No events in this deployment can be delivered as a browser notification, so there is nothing to suppress here." })), browserEvents.length > 0 && (_jsx(Stack, { divider: _jsx(Divider, { flexItem: true }), sx: { mt: 1 }, children: browserEvents.map((event) => (_jsx(EventRow, { event: event, enabled: !disabledEvents.includes(event.key), 
+                    // Greyed out, not hidden, when the channel is off: hiding them
+                    // would make the saved suppression list invisible and unrecoverable
+                    // without turning the switch back on first.
+                    disabled: controlsDisabled || !browserEnabled, onChange: (enabled) => toggleEvent(event.key, enabled) }, event.key))) })), _jsx(Box, { sx: { mt: 3 }, children: _jsx(Button, { variant: "contained", onClick: handleSave, disabled: controlsDisabled || !isDirty, children: isSaving ? 'Saving...' : 'Save Changes' }) })] }));
+}
+//# sourceMappingURL=NotificationSettingsPage.js.map

package/dist/notifications/ui/NotificationSettingsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationSettingsPage.js","sourceRoot":"","sources":["../../../src/notifications/ui/NotificationSettingsPage.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,KAAK,EACL,GAAG,EACH,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAEhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAG7E;;;GAGG;AACH,MAAM,oBAAoB,GAAsB,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AAE7E,MAAM,UAAU,GAAG,eAAe,CAAC;AACnC,MAAM,gBAAgB,GACpB,oFAAoF,CAAC;AAEvF;;;;;;;GAOG;AACH,MAAM,QAAQ,GAA+B;IAC3C,cAAc,EAAE,IAAI;IACpB,cAAc,EAAE,EAAE;CACnB,CAAC;AAEF,6EAA6E;AAC7E,SAAS,QAAQ,CAAC,CAAW,EAAE,CAAW;IACxC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IACxC,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,CAAC;AAUD,SAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB;IACrE,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAClB,KAAC,gBAAgB,IACf,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,EAAE,EACtC,OAAO,EACL,KAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAC3C,SAAS,EAAE;oBACT,KAAK,EAAE;wBACL,YAAY,EAAE,4BAA4B,KAAK,CAAC,KAAK,EAAE;qBACxD;iBACF,EACD,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,GACd,EAEJ,KAAK,EACH,MAAC,GAAG,eACF,MAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,CAAC,EACV,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,aAE9C,KAAC,UAAU,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,CAAC,KAAK,GAAc,EACzD,KAAK,CAAC,SAAS,IAAI,CAKlB,KAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAC,UAAU,GAClB,CACH,IACK,EACR,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,YAC/C,KAAK,CAAC,WAAW,GACP,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,YAChD,KAAK,CAAC,GAAG,GACC,IACT,GAER,GACE,CACP,CAAC;AACJ,CAAC;AAyBD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,QAAuC,EAAE;IACxF,OAAO,CACL,KAAC,qBAAqB,IACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,UAAU,EACjB,WAAW,EAAE,gBAAgB,EAC7B,kBAAkB,EAAC,sBAAsB,YAExC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACjD,KAAC,wBAAwB,IACvB,MAAM,EAAE,QAAQ,CAAC,aAAa,IAAI,QAAQ,EAC1C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,GACrD,CACH,GACqB,CACzB,CAAC;AACJ,CAAC;AASD;;;;;;;;;;;;GAYG;AACH,SAAS,wBAAwB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAa;IACjF,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC7D,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAEnE,6EAA6E;IAC7E,yEAAyE;IACzE,YAAY;IACZ,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAChG,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;IAC5E,4EAA4E;IAC5E,2DAA2D;IAC3D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IAC9E,MAAM,oBAAoB,GAAG,CAAC,EAAU,EAAW,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,IAAI,IAAI,CAAC;IAC7F,MAAM,cAAc,GAAG,CAAC,EAAU,EAAW,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAC;IAC7F,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,MAAM,CAAC,cAAc,CACtB,CAAC;IAEF,4EAA4E;IAC5E,0EAA0E;IAC1E,qEAAqE;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACzC,iBAAiB,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACzC,eAAe,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,uEAAuE;IACvE,0EAA0E;IAC1E,2DAA2D;IAC3D,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CACH,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAC9E,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,0EAA0E;IAC1E,gDAAgD;IAChD,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,CACxC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;SACzB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,OAAO,KAAK,oBAAoB,CAAC,EAAE,CAAC,CAAC;SAC/D,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAC7C,CAAC;IACF,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAElE,MAAM,OAAO,GACX,cAAc,KAAK,MAAM,CAAC,cAAc;QACxC,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC;QAChD,iBAAiB,CAAC;IAEpB,MAAM,gBAAgB,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC;IAE/C,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,OAAgB,EAAE,EAAE;QACpD,iBAAiB,CAAC,CAAC,OAAO,EAAE,EAAE,CAC5B,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAC7E,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,KAAK,MAAM,CAAC;YACV,cAAc;YACd,cAAc;YACd,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SAC5D,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,GAAG,eACF,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,YAAY,4CAExB,EAEb,KAAC,gBAAgB,IACf,OAAO,EACL,KAAC,MAAM,IACL,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GACpD,EAEJ,KAAK,EAAC,+BAA+B,GACrC,EACF,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,0HAG1D,EAEZ,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,8BACE,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI,EAE1B,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,YAAY,wCAExB,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,0JAGnD,EACb,KAAC,KAAK,IAAC,OAAO,EAAE,KAAC,OAAO,IAAC,QAAQ,SAAG,YACjC,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC5B,KAAC,GAAG,IAAkB,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACjC,KAAC,gBAAgB,IACf,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,EAAE,EACtC,OAAO,EACL,KAAC,MAAM,IACL,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,EACnC,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,EAEhF,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,WAAW,OAAO,CAAC,KAAK,gBAAgB,EAAE,EAAE,GAChF,EAEJ,KAAK,EACH,MAAC,GAAG,eACF,KAAC,UAAU,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,CAAC,KAAK,GAAc,EAC5D,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,YAC/C,OAAO,CAAC,WAAW,GACT,IACT,GAER,IArBM,OAAO,CAAC,EAAE,CAsBd,CACP,CAAC,GACI,IACP,CACJ,EAED,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI,EAE1B,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,YAAY,6BAExB,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,iJAGnD,EAEZ,CAAC,cAAc,IAAI,CAClB,KAAC,KAAK,IAAC,QAAQ,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,+JAG5B,CACT,EAMA,SAAS,IAAI,CACZ,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,EAAE,YAC3D,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,GAC1B,CACP,EAEA,KAAK,IAAI,CACR,KAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YAClC,KAAK,GACA,CACT,EAEA,CAAC,SAAS,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,CACrD,KAAC,KAAK,IAAC,QAAQ,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,+HAG5B,CACT,EAEA,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,KAAC,KAAK,IAAC,OAAO,EAAE,KAAC,OAAO,IAAC,QAAQ,SAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YAChD,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,QAAQ,IAEP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC;oBAC5C,+DAA+D;oBAC/D,oEAAoE;oBACpE,4CAA4C;oBAC5C,QAAQ,EAAE,gBAAgB,IAAI,CAAC,cAAc,EAC7C,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,CAAC,IAPjD,KAAK,CAAC,GAAG,CAQd,CACH,CAAC,GACI,CACT,EAED,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YAChB,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,gBAAgB,IAAI,CAAC,OAAO,YAErC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,GACjC,GACL,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/notifications/ui/PushConfigConfirmDialog.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The rotate / remove confirmation dialog for Web Push (VAPID) config,
+ * issue #355.
+ *
+ * ONE COMPONENT FOR BOTH INTENTS, mirroring `DbBackupRestoreDialog`'s reason
+ * for being one: rotate and remove need exactly the same safety machinery —
+ * a stated consequence and a TYPED CONFIRMATION LITERAL — and differ only in
+ * their copy and which literal they require. `action` selects between them
+ * and nothing else forks.
+ *
+ * THE TWO LITERALS ARE DIFFERENT WORDS ON PURPOSE (`ROTATE_CONFIRMATION` /
+ * `REMOVE_CONFIRMATION`, `services/pushConfig.ts`) — the same reasoning as
+ * `RESTORE`/`ROLLBACK`: a confirmation typed for the wrong dialog, or a body
+ * copied from one route to the other, must not satisfy the other action.
+ * The typed text is cleared every time the dialog opens or `action` changes,
+ * so a value typed for Rotate can never be reused to confirm Remove.
+ *
+ * ⚠ THE ROTATE WARNING'S RECOVERY CLAIM IS DELIBERATELY MODEST. As of this
+ * writing there is no client-side re-subscribe-on-reopen mechanism anywhere
+ * in this codebase (`docs/runbooks/vapid-keys.md` §4, checked directly) — a
+ * subscriber's browser must call `pushManager.subscribe` again through
+ * whatever flow does that (e.g. toggling notifications off and back on), and
+ * nothing makes that happen automatically just because the app is reopened.
+ * Do not soften this copy to "reopening the app fixes it" without re-reading
+ * that section first; it will be wrong again the moment it is written.
+ */
+export type PushConfigDialogAction = 'rotate' | 'remove';
+export interface PushConfigConfirmDialogProps {
+    /** `null` closes the dialog; a specific action opens it in that mode. */
+    action: PushConfigDialogAction | null;
+    isWorking: boolean;
+    /** The last failure from the hook's action, or `null`. */
+    error: string | null;
+    onConfirm: () => void;
+    onClose: () => void;
+}
+export declare function PushConfigConfirmDialog({ action, isWorking, error, onConfirm, onClose, }: PushConfigConfirmDialogProps): import("react").JSX.Element | null;
+/** For a component test asserting Rotate's literal doesn't satisfy Remove's dialog, and vice versa. */
+export declare const PUSH_CONFIG_CONFIRM_LITERALS: Record<PushConfigDialogAction, string>;
+//# sourceMappingURL=PushConfigConfirmDialog.d.ts.map

package/dist/notifications/ui/PushConfigConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PushConfigConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/notifications/ui/PushConfigConfirmDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAgBH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,MAAM,WAAW,4BAA4B;IAC3C,yEAAyE;IACzE,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2BD,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EACT,OAAO,GACR,EAAE,4BAA4B,sCA0D9B;AAED,uGAAuG;AACvG,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAG/E,CAAC"}

package/dist/notifications/ui/PushConfigConfirmDialog.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The rotate / remove confirmation dialog for Web Push (VAPID) config,
+ * issue #355.
+ *
+ * ONE COMPONENT FOR BOTH INTENTS, mirroring `DbBackupRestoreDialog`'s reason
+ * for being one: rotate and remove need exactly the same safety machinery —
+ * a stated consequence and a TYPED CONFIRMATION LITERAL — and differ only in
+ * their copy and which literal they require. `action` selects between them
+ * and nothing else forks.
+ *
+ * THE TWO LITERALS ARE DIFFERENT WORDS ON PURPOSE (`ROTATE_CONFIRMATION` /
+ * `REMOVE_CONFIRMATION`, `services/pushConfig.ts`) — the same reasoning as
+ * `RESTORE`/`ROLLBACK`: a confirmation typed for the wrong dialog, or a body
+ * copied from one route to the other, must not satisfy the other action.
+ * The typed text is cleared every time the dialog opens or `action` changes,
+ * so a value typed for Rotate can never be reused to confirm Remove.
+ *
+ * ⚠ THE ROTATE WARNING'S RECOVERY CLAIM IS DELIBERATELY MODEST. As of this
+ * writing there is no client-side re-subscribe-on-reopen mechanism anywhere
+ * in this codebase (`docs/runbooks/vapid-keys.md` §4, checked directly) — a
+ * subscriber's browser must call `pushManager.subscribe` again through
+ * whatever flow does that (e.g. toggling notifications off and back on), and
+ * nothing makes that happen automatically just because the app is reopened.
+ * Do not soften this copy to "reopening the app fixes it" without re-reading
+ * that section first; it will be wrong again the moment it is written.
+ */
+import { useEffect, useState } from 'react';
+import { Alert, AlertTitle, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, } from '@mui/material';
+import { REMOVE_CONFIRMATION, ROTATE_CONFIRMATION } from '../headless/pushConfig.js';
+const COPY = {
+    rotate: {
+        title: 'Rotate the VAPID key pair?',
+        consequence: 'Rotating replaces the key pair. Every existing push subscriber stops receiving ' +
+            'notifications immediately. Recovery is not automatic — this app has no ' +
+            're-subscribe-on-reopen mechanism, so each subscriber has to re-trigger their ' +
+            "browser's subscribe flow (for example, turning notifications off and back on) " +
+            'before push works for them again.',
+        confirmLabel: 'Rotate keys',
+    },
+    remove: {
+        title: 'Remove the web push configuration?',
+        consequence: 'Removing deletes the stored key pair entirely — there is no key left to fall back ' +
+            'to. Every existing push subscriber stops receiving notifications, exactly as with ' +
+            'a rotation, and the same manual re-subscribe is needed to recover once a new key ' +
+            'pair is generated. This app keeps working; only web push stops.',
+        confirmLabel: 'Remove configuration',
+    },
+};
+export function PushConfigConfirmDialog({ action, isWorking, error, onConfirm, onClose, }) {
+    const [typed, setTyped] = useState('');
+    // Every opening starts from nothing — cleared on open AND on a switch
+    // between actions, so a literal typed for one can never carry over and
+    // satisfy the other. Mirrors `DbBackupRestoreDialog`.
+    useEffect(() => {
+        if (!action)
+            return;
+        setTyped('');
+    }, [action]);
+    if (!action)
+        return null;
+    const literal = action === 'rotate' ? ROTATE_CONFIRMATION : REMOVE_CONFIRMATION;
+    const copy = COPY[action];
+    const typedMatches = typed.trim() === literal;
+    return (_jsxs(Dialog, { open: !!action, onClose: onClose, maxWidth: "sm", fullWidth: true, children: [_jsx(DialogTitle, { children: copy.title }), _jsxs(DialogContent, { dividers: true, children: [error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsxs(Alert, { severity: "warning", children: [_jsx(AlertTitle, { children: "This cannot be undone" }), copy.consequence] }), _jsx(Box, { sx: { mt: 3 }, children: _jsx(TextField, { fullWidth: true, label: `Type ${literal} to confirm`, value: typed, onChange: (e) => setTyped(e.target.value), autoComplete: "off", slotProps: { htmlInput: { 'aria-label': `Type ${literal} to confirm` } }, helperText: "This must be typed exactly, in capitals. Nothing happens until it matches." }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, disabled: isWorking, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "error", disabled: !typedMatches || isWorking, onClick: onConfirm, children: isWorking ? 'Working…' : copy.confirmLabel })] })] }));
+}
+/** For a component test asserting Rotate's literal doesn't satisfy Remove's dialog, and vice versa. */
+export const PUSH_CONFIG_CONFIRM_LITERALS = {
+    rotate: ROTATE_CONFIRMATION,
+    remove: REMOVE_CONFIRMATION,
+};
+//# sourceMappingURL=PushConfigConfirmDialog.js.map

package/dist/notifications/ui/PushConfigConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PushConfigConfirmDialog.js","sourceRoot":"","sources":["../../../src/notifications/ui/PushConfigConfirmDialog.tsx"],"names":[],"mappings":"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"}

package/dist/notifications/ui/PushConfigPage.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Admin → Settings → Web Push (`/admin/settings/push`).
+ *
+ * Issue #355. A STANDALONE PAGE, exactly like `EmailSettingsPage.tsx` and for
+ * the same reason: this hits its own controller (`/api/admin/push-config`)
+ * with its own document, not the generic `system_settings` blob `SettingsHub`
+ * pages share — see `CLAUDE.md`'s "MANDATORY: Settings UI Pattern" §2 and
+ * `docs/specs/settings-ui.md`. One entry in `ADMIN_SECTIONS`
+ * (`config/adminSections.tsx`), one route in `App.tsx` gated on the same
+ * `push:read` string, no tab anywhere.
+ *
+ * =============================================================================
+ * THE PRIVATE KEY NEVER APPEARS HERE. THE PUBLIC KEY IS SHOWN IN FULL.
+ * =============================================================================
+ *
+ * `PushConfigAdminView.privateKeyStatus` is the masked view `SmtpPasswordStatus`
+ * already established the shape for — a hint, a timestamp, who set it, never
+ * the secret itself. `publicKey`, by contrast, is NOT secret: it is what a
+ * client-side `pushManager.subscribe()` call is given, so it is rendered in
+ * full, monospace, with a copy affordance, the same treatment
+ * `DbBackupRestoreDialog`'s `CopyableBlock` gives a paste-ready command.
+ *
+ * =============================================================================
+ * FOUR CARDS, IN THE ORDER AN ADMIN USES THEM (issue #627)
+ * =============================================================================
+ *
+ * Each card is its own `Paper`, `mt: 3` apart, `p: { xs: 2, sm: 3 }` inside.
+ *
+ * CONFIGURED (`configured: true`):
+ *
+ *   1. ENABLE WEB PUSH — the enable/disable switch and subject, saved
+ *      through `PUT` (non-destructive, keys retained either way). The
+ *      control an admin comes here to change most often, so it is first.
+ *   2. STATUS — read-only: the VAPID public key, subject, private-key
+ *      provenance, last update. Reference material, so it follows the
+ *      primary control rather than pushing it below the fold on a phone.
+ *   3. TEST & DIAGNOSTICS — `PushTestPanel` (issue #618): verification,
+ *      meaningful only once a key pair exists.
+ *   4. DANGER ZONE — the two destructive actions (Rotate, Remove) behind
+ *      `PushConfigConfirmDialog` and its two DIFFERENT typed literals
+ *      (`ROTATE` / `REMOVE`), so a confirmation typed for one can never
+ *      satisfy the other — see that component's header. Last, and in a card
+ *      of its own with an error-coloured outline, so it is never mistaken for
+ *      part of the everyday form above it.
+ *
+ * NOT CONFIGURED (`configured: false`):
+ *
+ *   1. GENERATE & ENABLE — a single action, with an optional subject field.
+ *      `POST /generate`.
+ *   2. STATUS — as above, stating that no key pair exists yet.
+ *
+ * Only one of the two sets is ever mounted, gated on `config.configured` —
+ * unlike `EmailSettingsPage`'s provider-specific fields, which stay mounted so
+ * switching between them loses nothing. There is no equivalent "switch back"
+ * gesture here: once a key pair exists, going back to unconfigured is what
+ * the Remove dialog is for, not a form control.
+ */
+import type { PageSlotsBase } from '../../core/index.js';
+/**
+ * The slots of {@link PushConfigPage}: the page-slot contract. `Sections` is drawn at both ends of the body, around the enable form, the key display, the diagnostics and the danger zone. The loading spinner and the load-error screen are not slotted.
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export type PushConfigPageSlots = PageSlotsBase;
+/**
+ * The props of {@link PushConfigPage}.
+ *
+ * @stability experimental
+ */
+export interface PushConfigPageProps {
+    /** Optional extension slots; omitted, the page renders exactly as it always did. */
+    slots?: PushConfigPageSlots;
+}
+/**
+ * The `/admin/settings/push` page: the Web Push (VAPID) key pair, generated, rotated and removed at run time (never an environment variable), and the test-push diagnostics.
+ *
+ * @returns the page.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export default function PushConfigPage(props?: PushConfigPageProps): import("react").JSX.Element;
+//# sourceMappingURL=PushConfigPage.d.ts.map

package/dist/notifications/ui/PushConfigPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PushConfigPage.d.ts","sourceRoot":"","sources":["../../../src/notifications/ui/PushConfigPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AA6BH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AA+EzD;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAC;AAEhD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,oFAAoF;IACpF,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,GAAE,mBAAwB,+BA0YrE"}

package/dist/notifications/ui/PushConfigPage.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Admin → Settings → Web Push (`/admin/settings/push`).
+ *
+ * Issue #355. A STANDALONE PAGE, exactly like `EmailSettingsPage.tsx` and for
+ * the same reason: this hits its own controller (`/api/admin/push-config`)
+ * with its own document, not the generic `system_settings` blob `SettingsHub`
+ * pages share — see `CLAUDE.md`'s "MANDATORY: Settings UI Pattern" §2 and
+ * `docs/specs/settings-ui.md`. One entry in `ADMIN_SECTIONS`
+ * (`config/adminSections.tsx`), one route in `App.tsx` gated on the same
+ * `push:read` string, no tab anywhere.
+ *
+ * =============================================================================
+ * THE PRIVATE KEY NEVER APPEARS HERE. THE PUBLIC KEY IS SHOWN IN FULL.
+ * =============================================================================
+ *
+ * `PushConfigAdminView.privateKeyStatus` is the masked view `SmtpPasswordStatus`
+ * already established the shape for — a hint, a timestamp, who set it, never
+ * the secret itself. `publicKey`, by contrast, is NOT secret: it is what a
+ * client-side `pushManager.subscribe()` call is given, so it is rendered in
+ * full, monospace, with a copy affordance, the same treatment
+ * `DbBackupRestoreDialog`'s `CopyableBlock` gives a paste-ready command.
+ *
+ * =============================================================================
+ * FOUR CARDS, IN THE ORDER AN ADMIN USES THEM (issue #627)
+ * =============================================================================
+ *
+ * Each card is its own `Paper`, `mt: 3` apart, `p: { xs: 2, sm: 3 }` inside.
+ *
+ * CONFIGURED (`configured: true`):
+ *
+ *   1. ENABLE WEB PUSH — the enable/disable switch and subject, saved
+ *      through `PUT` (non-destructive, keys retained either way). The
+ *      control an admin comes here to change most often, so it is first.
+ *   2. STATUS — read-only: the VAPID public key, subject, private-key
+ *      provenance, last update. Reference material, so it follows the
+ *      primary control rather than pushing it below the fold on a phone.
+ *   3. TEST & DIAGNOSTICS — `PushTestPanel` (issue #618): verification,
+ *      meaningful only once a key pair exists.
+ *   4. DANGER ZONE — the two destructive actions (Rotate, Remove) behind
+ *      `PushConfigConfirmDialog` and its two DIFFERENT typed literals
+ *      (`ROTATE` / `REMOVE`), so a confirmation typed for one can never
+ *      satisfy the other — see that component's header. Last, and in a card
+ *      of its own with an error-coloured outline, so it is never mistaken for
+ *      part of the everyday form above it.
+ *
+ * NOT CONFIGURED (`configured: false`):
+ *
+ *   1. GENERATE & ENABLE — a single action, with an optional subject field.
+ *      `POST /generate`.
+ *   2. STATUS — as above, stating that no key pair exists yet.
+ *
+ * Only one of the two sets is ever mounted, gated on `config.configured` —
+ * unlike `EmailSettingsPage`'s provider-specific fields, which stay mounted so
+ * switching between them loses nothing. There is no equivalent "switch back"
+ * gesture here: once a key pair exists, going back to unconfigured is what
+ * the Remove dialog is for, not a form control.
+ */
+import { useEffect, useState } from 'react';
+import { Alert, AlertTitle, Box, Button, Chip, Container, Divider, FormControlLabel, IconButton, Paper, Snackbar, Stack, Switch, TextField, Tooltip, Typography, } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import NotificationsActiveOutlinedIcon from '@mui/icons-material/NotificationsActiveOutlined';
+import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import VpnKeyOutlinedIcon from '@mui/icons-material/VpnKeyOutlined';
+import { Navigate } from 'react-router-dom';
+import { PageSlotsFrame } from '../../core/index.js';
+import { usePermissions } from '../../identity/index.js';
+import { usePushConfig } from '../headless/usePushConfig.js';
+import { LoadingSpinner } from './LoadingSpinner.js';
+import { PushConfigConfirmDialog, } from './PushConfigConfirmDialog.js';
+import { PushTestPanel } from './PushTestPanel.js';
+/** A `mailto:` or `https:` address — the VAPID subject/contact, exactly what `web-push` requires. */
+function validateSubject(raw) {
+    const trimmed = raw.trim();
+    if (!trimmed)
+        return null; // Optional — the API falls back to a default.
+    if (!/^mailto:[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed) && !/^https:\/\/\S+$/.test(trimmed)) {
+        return 'Must be a mailto: address or an https: URL, e.g. mailto:admin@example.com.';
+    }
+    return null;
+}
+/** What to say about the stored private key, mirroring `smtpPasswordHelperText` in `EmailSettingsPage.tsx`. */
+function privateKeyProvenance(status) {
+    if (!status.configured)
+        return 'No private key is stored.';
+    const which = status.hint ? ` (${status.hint})` : '';
+    const when = status.updatedAt ? ` on ${new Date(status.updatedAt).toLocaleString()}` : '';
+    const who = status.updatedByUserId ? ` by user ${status.updatedByUserId}` : '';
+    return `Private key last set${which}${when}${who}.`;
+}
+/** A single-line monospace value with a copy affordance — the public key is not secret, so it renders in full. */
+function CopyableField({ label, value }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 3000);
+        }
+        catch {
+            // Clipboard access denied or unavailable — the field is still selectable text.
+        }
+    };
+    return (_jsxs(Box, { children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center', mb: 0.5 }, children: [_jsx(Typography, { variant: "subtitle2", sx: { flexGrow: 1 }, children: label }), _jsx(Tooltip, { title: copied ? 'Copied' : `Copy ${label.toLowerCase()}`, children: _jsx(IconButton, { size: "small", onClick: () => void handleCopy(), "aria-label": `Copy ${label}`, children: copied ? _jsx(CheckIcon, { fontSize: "small", color: "success" }) : _jsx(ContentCopyIcon, { fontSize: "small" }) }) })] }), _jsx(Paper, { variant: "outlined", sx: { p: 1.5, overflowX: 'auto', backgroundColor: 'action.hover' }, children: _jsx(Typography, { component: "pre", sx: { m: 0, fontFamily: 'monospace', fontSize: '0.8125rem', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: value }) })] }));
+}
+/** The page subtitle (mirrors the `Web Push` card in `config/adminSections.tsx`). */
+const PUSH_DESCRIPTION = 'Generate a VAPID key pair, enable or rotate it, and control whether this deployment can send browser push notifications.';
+/**
+ * The `/admin/settings/push` page: the Web Push (VAPID) key pair, generated, rotated and removed at run time (never an environment variable), and the test-push diagnostics.
+ *
+ * @returns the page.
+ *
+ * @extensionPoint component
+ * @stability experimental
+ */
+export default function PushConfigPage(props = {}) {
+    const { slots } = props;
+    const { hasPermission } = usePermissions();
+    const { config, isLoading, loadError, isSaving, saveError, save, clearSaveError, isActing, actionError, clearActionError, generate, rotate, remove, } = usePushConfig();
+    // Draft state for the EMPTY-state subject field (feeds `generate`).
+    const [generateSubject, setGenerateSubject] = useState('');
+    // Draft state for the CONFIGURED-state form (feeds `save`).
+    const [enabledDraft, setEnabledDraft] = useState(false);
+    const [subjectDraft, setSubjectDraft] = useState('');
+    const [dialogAction, setDialogAction] = useState(null);
+    const [savedMessage, setSavedMessage] = useState(null);
+    // The server's response is the new baseline after every load AND every
+    // write — including a successful rotate/remove, which is how the form
+    // resyncs to a brand new public key or drops back to the empty state with
+    // no reload. Mirrors `EmailSettingsPage`.
+    useEffect(() => {
+        if (!config)
+            return;
+        if (!config.configured) {
+            setGenerateSubject('');
+            return;
+        }
+        setEnabledDraft(config.enabled);
+        setSubjectDraft(config.subject ?? '');
+    }, [config]);
+    // Defence, not the gate — `App.tsx` wraps the route in `RequirePermission`
+    // with this same string. This one catches the page mounted from anywhere
+    // else. It sits after every hook so the hook order never changes.
+    if (!hasPermission('push:read')) {
+        return _jsx(Navigate, { to: "/", replace: true });
+    }
+    const canWrite = hasPermission('push:write');
+    if (isLoading || !config) {
+        if (loadError) {
+            return (_jsx(Container, { maxWidth: "lg", children: _jsxs(Box, { sx: { py: 4 }, children: [_jsx(Typography, { variant: "h4", component: "h1", gutterBottom: true, children: "Web Push" }), _jsx(Alert, { severity: "error", children: loadError })] }) }));
+        }
+        return _jsx(LoadingSpinner, {});
+    }
+    const generateSubjectError = validateSubject(generateSubject);
+    const subjectError = validateSubject(subjectDraft);
+    const isFormDirty = enabledDraft !== config.enabled || subjectDraft.trim() !== (config.subject ?? '');
+    const handleGenerate = async (event) => {
+        event.preventDefault();
+        if (generateSubjectError || !canWrite)
+            return;
+        const trimmed = generateSubject.trim();
+        const ok = await generate(trimmed ? { subject: trimmed } : {});
+        if (ok)
+            setSavedMessage('Web push generated and enabled');
+    };
+    const handleSave = async (event) => {
+        event.preventDefault();
+        if (subjectError || !canWrite)
+            return;
+        const trimmed = subjectDraft.trim();
+        const ok = await save({ enabled: enabledDraft, subject: trimmed || null });
+        if (ok)
+            setSavedMessage('Web push configuration saved');
+    };
+    const handleDialogConfirm = async () => {
+        if (dialogAction === 'rotate') {
+            const ok = await rotate();
+            if (ok) {
+                setDialogAction(null);
+                setSavedMessage('Key pair rotated');
+            }
+            return;
+        }
+        if (dialogAction === 'remove') {
+            const ok = await remove();
+            if (ok) {
+                setDialogAction(null);
+                setSavedMessage('Web push configuration removed');
+            }
+        }
+    };
+    return (_jsx(Container, { maxWidth: "lg", children: _jsxs(Box, { sx: { py: 4 }, children: [_jsxs(PageSlotsFrame, { slots: slots, headerProps: { title: 'Web Push', description: PUSH_DESCRIPTION, readOnly: !canWrite, actions: null }, header: _jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h4", component: "h1", gutterBottom: true, children: "Web Push" }), _jsxs(Typography, { color: "text.secondary", sx: { mb: 2 }, children: [PUSH_DESCRIPTION, !canWrite && ' (read-only)'] })] }), children: [loadError && (_jsx(Alert, { severity: "error", sx: { mb: 3 }, children: loadError })), config.settingsError && (_jsxs(Alert, { severity: "warning", sx: { mb: 3 }, children: [_jsx(AlertTitle, { children: "The stored web push configuration could not be read" }), config.settingsError, _jsx(Box, { sx: { mt: 1 }, children: "Until it is repaired, the fields below are defaults rather than your saved values." })] })), config.configured && (_jsx(Paper, { component: "section", "aria-labelledby": "push-enable-heading", sx: { p: { xs: 2, sm: 3 } }, children: _jsxs(Box, { component: "form", onSubmit: handleSave, noValidate: true, children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center', mb: 2 }, children: [_jsx(NotificationsActiveOutlinedIcon, { color: "action" }), _jsx(Typography, { variant: "h6", id: "push-enable-heading", children: "Enable web push" })] }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: enabledDraft, onChange: (e) => setEnabledDraft(e.target.checked), disabled: !canWrite }), label: "Enable web push for this deployment" }), !enabledDraft && (_jsx(Alert, { severity: "info", sx: { mt: 1, mb: 1 }, children: "Web push is switched off \u2014 no browser push notifications are sent. The key pair is kept as it is, so switching this back on needs no regenerating." })), _jsx(Divider, { sx: { my: 3 } }), _jsx(TextField, { fullWidth: true, label: "Subject (contact address)", placeholder: "mailto:admin@example.com", value: subjectDraft, onChange: (e) => setSubjectDraft(e.target.value), disabled: !canWrite, error: !!subjectError, helperText: subjectError ??
+                                            'A mailto: address or an https: URL push services may contact if something goes wrong.' }), saveError && (_jsxs(Alert, { severity: "error", sx: { mt: 3 }, onClose: clearSaveError, children: [_jsx(AlertTitle, { children: "Could not save" }), saveError] })), _jsx(Divider, { sx: { my: 3 } }), _jsx(Box, { sx: {
+                                            display: 'flex',
+                                            flexDirection: { xs: 'column', sm: 'row' },
+                                            alignItems: { xs: 'stretch', sm: 'center' },
+                                            gap: 2,
+                                        }, children: _jsx(Button, { type: "submit", variant: "contained", disabled: !canWrite || !isFormDirty || !!subjectError || isSaving, children: isSaving ? 'Saving…' : 'Save changes' }) })] }) })), !config.configured && (_jsx(Paper, { component: "section", "aria-labelledby": "push-generate-heading", sx: { p: { xs: 2, sm: 3 } }, children: _jsxs(Box, { component: "form", onSubmit: handleGenerate, noValidate: true, children: [_jsx(Typography, { variant: "h6", id: "push-generate-heading", gutterBottom: true, children: "Generate a key pair" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Creates a new VAPID key pair and switches web push on immediately. This is a one-time action for a fresh deployment \u2014 once a key pair exists, use Rotate to replace it." }), _jsx(TextField, { fullWidth: true, label: "Subject (contact address)", placeholder: "mailto:admin@example.com", value: generateSubject, onChange: (e) => setGenerateSubject(e.target.value), disabled: !canWrite || isActing, error: !!generateSubjectError, helperText: generateSubjectError ??
+                                            'A mailto: address or an https: URL push services may contact if something goes wrong. Optional — leave blank for the deployment default.', sx: { mb: 2 } }), actionError && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: clearActionError, children: actionError })), _jsx(Button, { type: "submit", variant: "contained", disabled: !canWrite || isActing || !!generateSubjectError, children: isActing ? 'Generating…' : 'Generate & enable' })] }) })), _jsxs(Paper, { component: "section", "aria-labelledby": "push-status-heading", sx: { mt: 3, p: { xs: 2, sm: 3 } }, children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center', mb: 2 }, children: [_jsx(VpnKeyOutlinedIcon, { color: "action" }), _jsx(Typography, { variant: "h6", id: "push-status-heading", sx: { flexGrow: 1 }, children: "Status" }), !config.configured ? (_jsx(Chip, { label: "Not configured", color: "default", size: "small" })) : config.enabled ? (_jsx(Chip, { label: "Enabled", color: "success", size: "small" })) : (_jsx(Chip, { label: "Disabled", color: "warning", size: "small" }))] }), config.configured && config.publicKey ? (_jsxs(Stack, { spacing: 2, children: [_jsx(CopyableField, { label: "Public key", value: config.publicKey }), _jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Subject: ", config.subject || 'not set'] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: privateKeyProvenance(config.privateKeyStatus) })] })) : (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "No key pair has been generated yet. Web push is unavailable to every user until one is." })), config.updatedAt && (_jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 2 }, children: ["Last updated ", new Date(config.updatedAt).toLocaleString(), config.updatedBy?.email ? ` by ${config.updatedBy.email}` : ''] }))] }), config.configured && _jsx(PushTestPanel, { config: config, canWrite: canWrite }), config.configured && (_jsxs(Paper, { component: "section", variant: "outlined", "aria-labelledby": "push-danger-heading", sx: { mt: 3, p: { xs: 2, sm: 3 }, borderColor: 'error.main' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center', mb: 1 }, children: [_jsx(WarningAmberOutlinedIcon, { color: "error" }), _jsx(Typography, { variant: "h6", id: "push-danger-heading", color: "error", children: "Danger zone" })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Both actions below take every existing push subscriber offline until it re-subscribes. Neither can be undone." }), _jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 2, children: [_jsx(Button, { variant: "outlined", color: "error", disabled: !canWrite || isActing, onClick: () => setDialogAction('rotate'), children: "Rotate keys" }), _jsx(Button, { variant: "outlined", color: "error", disabled: !canWrite || isActing, onClick: () => setDialogAction('remove'), children: "Remove configuration" })] })] }))] }), _jsx(PushConfigConfirmDialog, { action: dialogAction, isWorking: isActing, error: actionError, onConfirm: () => void handleDialogConfirm(), onClose: () => {
+                        setDialogAction(null);
+                        clearActionError();
+                    } }), _jsx(Snackbar, { open: !!savedMessage, autoHideDuration: 3000, onClose: () => setSavedMessage(null), message: savedMessage })] }) }));
+}
+//# sourceMappingURL=PushConfigPage.js.map