@molecule/app-settings-panel-react 1.0.0

package/dist/NotificationsSection.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useHttpClient, usePush, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Flex, Switch } from '@molecule/app-ui-react';
+import { disablePushOnCurrentDevice, enablePushOnCurrentDevice, readCurrentDevicePushEnabled, } from './pushToggle.js';
+/**
+ * Push-notification toggle section — the full receive-side enable chain:
+ * browser permission → runtime VAPID public key
+ * (`GET /api/devices/push/public-key`) → `pushManager.subscribe` with
+ * `applicationServerKey` → PATCH the subscription onto the current device
+ * row (`/api/devices/:id { pushSubscription, hasPushSubscription }`), which
+ * is where the api-side push fan-outs look for it.
+ *
+ * Initial state reflects SERVER truth (the current device row's
+ * `hasPushSubscription`), and every failure surfaces as an honest inline
+ * message — a dev build without a service worker fails fast instead of
+ * hanging the switch.
+ */
+export function NotificationsSection() {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const http = useHttpClient();
+    const { requestPermission, register, unregister } = usePush();
+    const [enabled, setEnabled] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        // Server truth for THIS device; resolves false (never throws) when the
+        // devices endpoint is unavailable.
+        readCurrentDevicePushEnabled(http).then((serverEnabled) => {
+            if (!cancelled && serverEnabled)
+                setEnabled(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [http]);
+    const failureMessage = (result) => {
+        switch (result.reason) {
+            case 'permission-denied':
+                return t('settings.pushPermissionDenied', undefined, {
+                    defaultValue: 'Notification permission was denied.',
+                });
+            case 'server-unconfigured':
+                return t('settings.pushServerUnavailable', undefined, {
+                    defaultValue: 'Push notifications are not configured on this server.',
+                });
+            case 'register-failed':
+                // The push provider throws already-localized messages (not supported /
+                // no service worker in a dev build / push-service rejection).
+                return (result.message ||
+                    t('settings.pushUpdateFailed', undefined, {
+                        defaultValue: 'Could not update push notification settings.',
+                    }));
+            case 'persist-failed':
+                return t('settings.pushUpdateFailed', undefined, {
+                    defaultValue: 'Could not update push notification settings.',
+                });
+        }
+    };
+    const handleToggle = async (next) => {
+        if (busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            if (next) {
+                const result = await enablePushOnCurrentDevice({ http, requestPermission, register });
+                if (result.ok) {
+                    setEnabled(true);
+                }
+                else {
+                    setError(failureMessage(result));
+                }
+            }
+            else {
+                const result = await disablePushOnCurrentDevice({ http, unregister });
+                // The switch goes off locally either way; a failed server clear is
+                // still reported so the user knows sends may continue.
+                setEnabled(false);
+                if (!result.ok) {
+                    setError(failureMessage(result));
+                }
+            }
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("section", { children: [_jsx("h3", { className: cm.cn(cm.sectionHeading, cm.sp('mb', 3)), children: t('settings.notifications') }), _jsxs(Flex, { align: "center", justify: "between", children: [_jsx("span", { className: cm.textSize('sm'), children: t('settings.pushNotifications') }), _jsx(Switch, { checked: enabled, disabled: busy, onChange: (e) => handleToggle(e.target.checked), size: "sm", "data-mol-id": "settings-push-toggle" })] }), error ? (_jsx("p", { className: cm.cn(cm.textSize('xs'), cm.textError, cm.sp('mt', 1)), role: "alert", "data-mol-id": "settings-push-error", children: error })) : null] }));
+}

package/dist/SettingsContainer.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement, type ReactNode } from 'react';
+/**
+ * Outer settings-panel layout: padded vertical stack that hosts the
+ * section sub-components. Publishes `onClose` to descendants via
+ * context so `<LogOutDeleteSection>` etc. can dismiss the panel
+ * after an action without explicit prop threading.
+ */
+export declare function SettingsContainer({ onClose, children, }: {
+    onClose: () => void;
+    children: ReactNode;
+}): ReactElement;
+//# sourceMappingURL=SettingsContainer.d.ts.map

package/dist/SettingsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsContainer.d.ts","sourceRoot":"","sources":["../src/SettingsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAA;AAMlE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB,GAAG,YAAY,CAQf"}

package/dist/SettingsContainer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { getClassMap } from '@molecule/app-ui';
+import { SettingsPanelContext } from './context.js';
+/**
+ * Outer settings-panel layout: padded vertical stack that hosts the
+ * section sub-components. Publishes `onClose` to descendants via
+ * context so `<LogOutDeleteSection>` etc. can dismiss the panel
+ * after an action without explicit prop threading.
+ */
+export function SettingsContainer({ onClose, children, }) {
+    const cm = getClassMap();
+    const value = useMemo(() => ({ onClose }), [onClose]);
+    return (_jsx(SettingsPanelContext.Provider, { value: value, children: _jsx("div", { className: cm.cn(cm.sp('p', 6), cm.stack(6)), children: children }) }));
+}

package/dist/ThisDeviceSection.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+/**
+ * "This device" detail strip — OS, browser, online/offline.
+ *
+ * Reads from `@molecule/app-device` (useDevice hook) + browser
+ * `navigator.onLine`. No side effects, no app-specific state.
+ */
+export declare function ThisDeviceSection(): JSX.Element;
+//# sourceMappingURL=ThisDeviceSection.d.ts.map

package/dist/ThisDeviceSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThisDeviceSection.d.ts","sourceRoot":"","sources":["../src/ThisDeviceSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAMhC;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,GAAG,CAAC,OAAO,CAuB/C"}

package/dist/ThisDeviceSection.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDevice, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Flex } from '@molecule/app-ui-react';
+/**
+ * "This device" detail strip — OS, browser, online/offline.
+ *
+ * Reads from `@molecule/app-device` (useDevice hook) + browser
+ * `navigator.onLine`. No side effects, no app-specific state.
+ */
+export function ThisDeviceSection() {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const { deviceInfo } = useDevice();
+    return (_jsxs("section", { children: [_jsx("h3", { className: cm.cn(cm.sectionHeading, cm.sp('mb', 3)), children: t('settings.thisDevice') }), _jsxs("dl", { className: cm.cn(cm.stack(1), cm.textSize('sm')), children: [_jsxs(Flex, { justify: "between", children: [_jsx("dt", { className: cm.textMuted, children: t('settings.platform') }), _jsx("dd", { children: deviceInfo.os.name || t('settings.unknown') })] }), _jsxs(Flex, { justify: "between", children: [_jsx("dt", { className: cm.textMuted, children: t('settings.browser') }), _jsx("dd", { children: deviceInfo.browser.name || t('settings.unknown') })] }), _jsxs(Flex, { justify: "between", children: [_jsx("dt", { className: cm.textMuted, children: t('settings.network') }), _jsx("dd", { children: navigator.onLine ? t('settings.online') : t('settings.offline') })] })] })] }));
+}

package/dist/TiersUpgradeSection.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from 'react';
+/**
+ * Billing section with full multi-tier upgrade flow.
+ *
+ * Replaces the simpler `<BillingSection>` for apps backed by
+ * `@molecule/api-payments-stripe` + `@molecule/api-resource-payment`
+ * — loads the user's current plan from `/api/billing/status`,
+ * loads available tiers from `/api/billing/tiers`, and renders an
+ * Upgrade modal with a Subscribe button per tier price. Subscribe
+ * POSTs to `/api/billing/checkout` and redirects to the Stripe
+ * checkout URL; paid users see a Cancel button that POSTs to
+ * `/api/billing/cancel`.
+ */
+export declare function TiersUpgradeSection(): JSX.Element;
+//# sourceMappingURL=TiersUpgradeSection.d.ts.map

package/dist/TiersUpgradeSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TiersUpgradeSection.d.ts","sourceRoot":"","sources":["../src/TiersUpgradeSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAuB,MAAM,OAAO,CAAA;AAkBrD;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,IAAI,GAAG,CAAC,OAAO,CA4LjD"}

package/dist/TiersUpgradeSection.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useHttpClient, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Alert, Button, Flex, Modal } from '@molecule/app-ui-react';
+/**
+ * Billing section with full multi-tier upgrade flow.
+ *
+ * Replaces the simpler `<BillingSection>` for apps backed by
+ * `@molecule/api-payments-stripe` + `@molecule/api-resource-payment`
+ * — loads the user's current plan from `/api/billing/status`,
+ * loads available tiers from `/api/billing/tiers`, and renders an
+ * Upgrade modal with a Subscribe button per tier price. Subscribe
+ * POSTs to `/api/billing/checkout` and redirects to the Stripe
+ * checkout URL; paid users see a Cancel button that POSTs to
+ * `/api/billing/cancel`.
+ */
+export function TiersUpgradeSection() {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const http = useHttpClient();
+    const [plan, setPlan] = useState('Free');
+    const [planKey, setPlanKey] = useState('free');
+    const [tiers, setTiers] = useState([]);
+    const [showUpgrade, setShowUpgrade] = useState(false);
+    const [upgradeLoading, setUpgradeLoading] = useState(null);
+    const [upgradeError, setUpgradeError] = useState('');
+    useEffect(() => {
+        let cancelled = false;
+        Promise.all([
+            http.get('/api/billing/status').catch(() => null),
+            http
+                .get('/api/billing/tiers')
+                .catch(() => null),
+        ])
+            .then(([statusRes, tiersRes]) => {
+            if (cancelled)
+                return;
+            const status = statusRes?.data ?? null;
+            if (status?.name)
+                setPlan(status.name);
+            if (status?.planKey)
+                setPlanKey(status.planKey);
+            const list = tiersRes?.data?.data ?? [];
+            if (Array.isArray(list)) {
+                setTiers(list.map((tier) => ({
+                    planKey: tier.key,
+                    name: tier.name,
+                    prices: (tier.prices || []).map((p) => ({
+                        stripePriceId: p.stripePriceId ?? undefined,
+                        interval: p.period,
+                        priceLabel: p.price,
+                    })),
+                })));
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [http]);
+    const handleStartCheckout = async (stripePriceId) => {
+        setUpgradeError('');
+        setUpgradeLoading(stripePriceId);
+        try {
+            const res = await http.post('/api/billing/checkout', { priceId: stripePriceId });
+            const data = res.data;
+            if (data?.checkoutUrl) {
+                window.location.href = data.checkoutUrl;
+                return;
+            }
+            if (data?.updated) {
+                setShowUpgrade(false);
+                return;
+            }
+            setUpgradeError(t('settings.billing.checkoutFailed', undefined, {
+                defaultValue: 'Could not start checkout.',
+            }));
+        }
+        catch (err) {
+            setUpgradeError(err instanceof Error
+                ? err.message
+                : t('settings.billing.checkoutFailed', undefined, {
+                    defaultValue: 'Could not start checkout.',
+                }));
+        }
+        finally {
+            setUpgradeLoading(null);
+        }
+    };
+    const handleCancelSubscription = async () => {
+        if (!window.confirm(t('settings.billing.cancelConfirm', undefined, {
+            defaultValue: 'Cancel your subscription?',
+        })))
+            return;
+        setUpgradeError('');
+        try {
+            await http.post('/api/billing/cancel', {});
+            setPlan('Free');
+            setPlanKey('free');
+        }
+        catch (err) {
+            setUpgradeError(err instanceof Error
+                ? err.message
+                : t('settings.billing.cancelFailed', undefined, {
+                    defaultValue: 'Could not cancel.',
+                }));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { children: [_jsx("h3", { className: cm.cn(cm.sectionHeading, cm.sp('mb', 3)), children: t('settings.billing', undefined, { defaultValue: 'Billing' }) }), _jsxs(Flex, { align: "center", justify: "between", children: [_jsxs("span", { className: cm.textSize('sm'), children: [t('settings.plan', undefined, { defaultValue: 'Plan' }), _jsx("strong", { children: plan })] }), planKey === 'free' ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUpgrade(true), children: t('settings.upgrade', undefined, { defaultValue: 'Upgrade' }) })) : (_jsx(Button, { variant: "outline", size: "sm", onClick: handleCancelSubscription, children: t('settings.billing.cancel', undefined, { defaultValue: 'Cancel' }) }))] })] }), _jsxs(Modal, { open: showUpgrade, onClose: () => setShowUpgrade(false), title: t('settings.billing.upgradeTitle', undefined, {
+                    defaultValue: 'Upgrade your plan',
+                }), children: [upgradeError ? (_jsx(Alert, { status: "error", className: cm.sp('mb', 4), children: upgradeError })) : null, tiers.length === 0 ? (_jsx("p", { className: cm.cn(cm.textSize('sm'), cm.textMuted), children: t('settings.billing.noTiers', undefined, {
+                            defaultValue: 'No paid plans configured.',
+                        }) })) : (_jsx("ul", { className: cm.stack(3), children: tiers
+                            .filter((tier) => tier.planKey !== 'free')
+                            .flatMap((tier) => tier.prices.filter((p) => p.stripePriceId).map((price) => ({ tier, price })))
+                            .map(({ tier, price }) => (_jsx("li", { className: cm.sp('p', 4), children: _jsxs(Flex, { align: "center", justify: "between", children: [_jsxs("div", { children: [_jsxs("p", { className: cm.fontWeight('semibold'), children: [tier.name, " (", price.interval, ")"] }), _jsx("p", { className: cm.cn(cm.textSize('xs'), cm.textMuted), children: price.priceLabel })] }), _jsx(Button, { size: "sm", loading: upgradeLoading === price.stripePriceId, onClick: () => price.stripePriceId && handleStartCheckout(price.stripePriceId), children: t('settings.billing.subscribe', undefined, {
+                                            defaultValue: 'Subscribe',
+                                        }) })] }) }, `${tier.planKey}-${price.stripePriceId}`))) }))] })] }));
+}

package/dist/context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Context published by `<SettingsContainer>` to its children.
+ *
+ * The container owns the dismiss-the-panel handler; sub-components
+ * that need to close after an action (logout, delete account, email
+ * error) read it from context rather than threading the prop down.
+ */
+export interface SettingsPanelContextValue {
+    onClose: () => void;
+}
+/** React context object for the settings panel; consume via `useSettingsPanelContext`. */
+export declare const SettingsPanelContext: import("react").Context<SettingsPanelContextValue | null>;
+/**
+ * Reads the `onClose` handler exposed by the parent `<SettingsContainer>`.
+ * Throws if used outside the container so component misuse is loud.
+ */
+export declare function useSettingsPanelContext(): SettingsPanelContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAID,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,2DAAM,CAAA;AAEvC;;;GAGG;AACH,wBAAgB,uBAAuB,IAAI,yBAAyB,CAQnE"}

package/dist/context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+const ctx = createContext(null);
+/** React context object for the settings panel; consume via `useSettingsPanelContext`. */
+export const SettingsPanelContext = ctx;
+/**
+ * Reads the `onClose` handler exposed by the parent `<SettingsContainer>`.
+ * Throws if used outside the container so component misuse is loud.
+ */
+export function useSettingsPanelContext() {
+    const value = useContext(ctx);
+    if (!value) {
+        throw new Error('Settings panel section components must be rendered inside <SettingsContainer>.');
+    }
+    return value;
+}

package/dist/index.d.ts

@@ -0,0 +1,85 @@
+/**
+ * `@molecule/app-settings-panel-react` — composable, batteries-included
+ * settings panel.
+ *
+ * `<SettingsContainer onClose={…}>` owns the layout and publishes `onClose`
+ * via context; each section component is independent and loads its own data
+ * through hooks:
+ * - `<AccountSection>` — name/email edit (`PATCH /api/users/:id`).
+ * - `<AppearanceSection>` — dark-mode toggle (`useTheme()`).
+ * - `<AuthSection>` — password change + TOTP two-factor
+ *   (`POST /api/users/:id/verify-two-factor`).
+ * - `<NotificationsSection>` — web-push toggle (see the exported
+ *   `enablePushOnCurrentDevice` / `disablePushOnCurrentDevice` helpers and
+ *   their documented device-row contract).
+ * - `<BillingSection>` — read-only plan display (`GET /api/billing/status`),
+ *   or `<TiersUpgradeSection>` — full Stripe upgrade/cancel flow
+ *   (`/api/billing/tiers|checkout|cancel`). Use one or the other, not both.
+ * - `<DevicesSection>` / `<ThisDeviceSection>` — device list + current
+ *   device (`GET/DELETE /api/devices`).
+ * - `<LogOutDeleteSection>` — sign out + delete account
+ *   (`DELETE /api/users/:id`).
+ * Apps compose via JSX children — pick sections, order them, and interleave
+ * custom sections.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   AccountSection,
+ *   AppearanceSection,
+ *   AuthSection,
+ *   BillingSection,
+ *   DevicesSection,
+ *   LogOutDeleteSection,
+ *   NotificationsSection,
+ *   SettingsContainer,
+ *   ThisDeviceSection,
+ * } from '@molecule/app-settings-panel-react'
+ *
+ * function SettingsPanel({ onClose }: { onClose: () => void }) {
+ *   return (
+ *     <SettingsContainer onClose={onClose}>
+ *       <AccountSection />
+ *       <AppearanceSection />
+ *       <AuthSection />
+ *       <NotificationsSection />
+ *       <BillingSection />
+ *       <DevicesSection />
+ *       <ThisDeviceSection />
+ *       <LogOutDeleteSection />
+ *     </SettingsContainer>
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - Wiring prereqs: sections need the standard `@molecule/app-react`
+ *   provider stack — `<I18nProvider>`, `<HttpProvider>` (authenticated
+ *   client), `<AuthProvider>`, `<ThemeProvider>` (AppearanceSection), push +
+ *   device providers (NotificationsSection/ThisDeviceSection) — plus a
+ *   bonded ClassMap. `<BillingSection>` and `<LogOutDeleteSection>` also
+ *   call react-router's `useNavigate()` and throw outside a `<Router>`.
+ * - Section components throw if rendered outside `<SettingsContainer>`
+ *   (they read its context for `onClose`).
+ * - Server contract: the molecule API surface from
+ *   `@molecule/api-resource-user`, `@molecule/api-resource-device`,
+ *   `@molecule/api-two-factor`, and the billing endpoints
+ *   (`/api/billing/*`) wired by the payments stack. Missing read endpoints
+ *   degrade gracefully (sections render empty); the mutating actions do not.
+ * - Translations: `@molecule/app-locales-settings-panel` companion bond.
+ *
+ * @module
+ */
+export * from './AccountSection.js';
+export * from './AppearanceSection.js';
+export * from './AuthSection.js';
+export * from './BillingSection.js';
+export * from './context.js';
+export * from './DevicesSection.js';
+export * from './LogOutDeleteSection.js';
+export * from './NotificationsSection.js';
+export * from './pushToggle.js';
+export * from './SettingsContainer.js';
+export * from './ThisDeviceSection.js';
+export * from './TiersUpgradeSection.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA"}

package/dist/index.js

@@ -0,0 +1,84 @@
+/**
+ * `@molecule/app-settings-panel-react` — composable, batteries-included
+ * settings panel.
+ *
+ * `<SettingsContainer onClose={…}>` owns the layout and publishes `onClose`
+ * via context; each section component is independent and loads its own data
+ * through hooks:
+ * - `<AccountSection>` — name/email edit (`PATCH /api/users/:id`).
+ * - `<AppearanceSection>` — dark-mode toggle (`useTheme()`).
+ * - `<AuthSection>` — password change + TOTP two-factor
+ *   (`POST /api/users/:id/verify-two-factor`).
+ * - `<NotificationsSection>` — web-push toggle (see the exported
+ *   `enablePushOnCurrentDevice` / `disablePushOnCurrentDevice` helpers and
+ *   their documented device-row contract).
+ * - `<BillingSection>` — read-only plan display (`GET /api/billing/status`),
+ *   or `<TiersUpgradeSection>` — full Stripe upgrade/cancel flow
+ *   (`/api/billing/tiers|checkout|cancel`). Use one or the other, not both.
+ * - `<DevicesSection>` / `<ThisDeviceSection>` — device list + current
+ *   device (`GET/DELETE /api/devices`).
+ * - `<LogOutDeleteSection>` — sign out + delete account
+ *   (`DELETE /api/users/:id`).
+ * Apps compose via JSX children — pick sections, order them, and interleave
+ * custom sections.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   AccountSection,
+ *   AppearanceSection,
+ *   AuthSection,
+ *   BillingSection,
+ *   DevicesSection,
+ *   LogOutDeleteSection,
+ *   NotificationsSection,
+ *   SettingsContainer,
+ *   ThisDeviceSection,
+ * } from '@molecule/app-settings-panel-react'
+ *
+ * function SettingsPanel({ onClose }: { onClose: () => void }) {
+ *   return (
+ *     <SettingsContainer onClose={onClose}>
+ *       <AccountSection />
+ *       <AppearanceSection />
+ *       <AuthSection />
+ *       <NotificationsSection />
+ *       <BillingSection />
+ *       <DevicesSection />
+ *       <ThisDeviceSection />
+ *       <LogOutDeleteSection />
+ *     </SettingsContainer>
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - Wiring prereqs: sections need the standard `@molecule/app-react`
+ *   provider stack — `<I18nProvider>`, `<HttpProvider>` (authenticated
+ *   client), `<AuthProvider>`, `<ThemeProvider>` (AppearanceSection), push +
+ *   device providers (NotificationsSection/ThisDeviceSection) — plus a
+ *   bonded ClassMap. `<BillingSection>` and `<LogOutDeleteSection>` also
+ *   call react-router's `useNavigate()` and throw outside a `<Router>`.
+ * - Section components throw if rendered outside `<SettingsContainer>`
+ *   (they read its context for `onClose`).
+ * - Server contract: the molecule API surface from
+ *   `@molecule/api-resource-user`, `@molecule/api-resource-device`,
+ *   `@molecule/api-two-factor`, and the billing endpoints
+ *   (`/api/billing/*`) wired by the payments stack. Missing read endpoints
+ *   degrade gracefully (sections render empty); the mutating actions do not.
+ * - Translations: `@molecule/app-locales-settings-panel` companion bond.
+ *
+ * @module
+ */
+export * from './AccountSection.js';
+export * from './AppearanceSection.js';
+export * from './AuthSection.js';
+export * from './BillingSection.js';
+export * from './context.js';
+export * from './DevicesSection.js';
+export * from './LogOutDeleteSection.js';
+export * from './NotificationsSection.js';
+export * from './pushToggle.js';
+export * from './SettingsContainer.js';
+export * from './ThisDeviceSection.js';
+export * from './TiersUpgradeSection.js';

package/dist/pushToggle.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Framework-free logic behind the push-notifications toggle
+ * ({@link NotificationsSection}). Extracted so the full enable/disable chain —
+ * permission → runtime VAPID key fetch → subscribe → persist on the device
+ * row — is unit-testable without a browser.
+ *
+ * The server contract (shared by every molecule api):
+ *
+ * - `GET /api/devices/push/public-key` → `{ publicKey }` — the VAPID public
+ *   key the browser must pass as `applicationServerKey` (Chromium rejects
+ *   keyless subscriptions). 404/503 when push is not configured server-side.
+ * - `GET /api/devices` → the caller's device rows; the session's own device
+ *   is flagged `isCurrent: true`.
+ * - `PATCH /api/devices/:id { pushSubscription, hasPushSubscription }` —
+ *   persists the browser subscription where the api-side push fan-outs read
+ *   it. Without this PATCH the server never knows the subscription exists
+ *   and no push can ever reach the user.
+ *
+ * @module
+ */
+/** Minimal structural slice of `@molecule/app-http`'s HttpClient used here. */
+export interface PushToggleHttp {
+    get<T = unknown>(url: string): Promise<{
+        data: T;
+    }>;
+    patch<T = unknown>(url: string, data?: unknown): Promise<{
+        data: T;
+    }>;
+}
+/** Device row slice returned by `GET /api/devices`. */
+export interface PushToggleDevice {
+    id: string;
+    isCurrent?: boolean;
+    hasPushSubscription?: boolean;
+}
+/** Push token slice returned by `@molecule/app-push` `register()`. */
+export interface PushToggleToken {
+    value: string;
+    platform: 'web' | 'ios' | 'android';
+}
+/** Why an enable/disable attempt failed (mapped to i18n by the component). */
+export type PushToggleFailureReason = 'permission-denied' | 'server-unconfigured' | 'register-failed' | 'persist-failed';
+/** Result of an enable/disable attempt. */
+export type PushToggleResult = {
+    ok: true;
+} | {
+    ok: false;
+    reason: PushToggleFailureReason;
+    message?: string;
+};
+/**
+ * Picks the caller's own device row: the api flags the session device
+ * `isCurrent`; fall back to the first row for sessions predating the flag.
+ *
+ * @param devices - Rows from `GET /api/devices`.
+ * @returns The current device row, or `undefined` when the user has none.
+ */
+export declare const findCurrentDevice: (devices: PushToggleDevice[] | undefined) => PushToggleDevice | undefined;
+/**
+ * Converts an `@molecule/app-push` token into the device resource's
+ * `pushSubscription` shape (web PushSubscription JSON, FCM registration for
+ * Android, APNs registration for iOS).
+ *
+ * @param token - The push token returned by `register()`.
+ * @returns The `pushSubscription` value to PATCH onto the device row.
+ */
+export declare const subscriptionFromToken: (token: PushToggleToken) => unknown;
+/**
+ * Runs the full enable chain: browser permission → runtime VAPID public key
+ * (`GET /api/devices/push/public-key`) → `register({ vapidPublicKey })` →
+ * persist the subscription on the current device row.
+ *
+ * Every failure is returned as a typed reason (never thrown) so the UI can
+ * show an honest, specific message instead of hanging or silently reverting.
+ *
+ * @param deps - The http client + push actions from `usePush()`.
+ * @param deps.http - Authenticated http client (`useHttpClient()`).
+ * @param deps.requestPermission - `usePush().requestPermission`.
+ * @param deps.register - `usePush().register`.
+ * @returns `{ ok: true }` or a typed failure.
+ */
+export declare const enablePushOnCurrentDevice: (deps: {
+    http: PushToggleHttp;
+    requestPermission: () => Promise<string>;
+    register: (options?: {
+        vapidPublicKey?: string;
+    }) => Promise<PushToggleToken>;
+}) => Promise<PushToggleResult>;
+/**
+ * Disables push: unsubscribes the browser (best-effort — a dev build without
+ * a service worker has nothing to unsubscribe) and ALWAYS clears the server
+ * state so no further pushes target this device.
+ *
+ * @param deps - The http client + push action from `usePush()`.
+ * @param deps.http - Authenticated http client (`useHttpClient()`).
+ * @param deps.unregister - `usePush().unregister`.
+ * @returns `{ ok: true }` or a typed failure (server state not cleared).
+ */
+export declare const disablePushOnCurrentDevice: (deps: {
+    http: PushToggleHttp;
+    unregister: () => Promise<void>;
+}) => Promise<PushToggleResult>;
+/**
+ * Reads whether push is currently enabled for THIS device (server truth:
+ * the current device row's `hasPushSubscription`).
+ *
+ * @param http - Authenticated http client (`useHttpClient()`).
+ * @returns `true` when the current device has a stored subscription.
+ */
+export declare const readCurrentDevicePushEnabled: (http: PushToggleHttp) => Promise<boolean>;
+//# sourceMappingURL=pushToggle.d.ts.map

package/dist/pushToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pushToggle.d.ts","sourceRoot":"","sources":["../src/pushToggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+EAA+E;AAC/E,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAA;IACnD,KAAK,CAAC,CAAC,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAA;CACtE;AAED,uDAAuD;AACvD,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,KAAK,GAAG,KAAK,GAAG,SAAS,CAAA;CACpC;AAED,8EAA8E;AAC9E,MAAM,MAAM,uBAAuB,GACjC,mBAAmB,GAAG,qBAAqB,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAEpF,2CAA2C;AAC3C,MAAM,MAAM,gBAAgB,GAC1B;IAAE,EAAE,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,uBAAuB,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAC5B,SAAS,gBAAgB,EAAE,GAAG,SAAS,KACtC,gBAAgB,GAAG,SAGrB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,eAAe,KAAG,OAS9D,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,yBAAyB,GAAU,MAAM;IACpD,IAAI,EAAE,cAAc,CAAA;IACpB,iBAAiB,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;IACxC,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,eAAe,CAAC,CAAA;CAC9E,KAAG,OAAO,CAAC,gBAAgB,CAmD3B,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,0BAA0B,GAAU,MAAM;IACrD,IAAI,EAAE,cAAc,CAAA;IACpB,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC,KAAG,OAAO,CAAC,gBAAgB,CA0B3B,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,4BAA4B,GAAU,MAAM,cAAc,KAAG,OAAO,CAAC,OAAO,CASxF,CAAA"}