@molecule/app-settings-panel-react 1.0.0

package/dist/AccountSection.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthClient, useHttpClient, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Flex, Input, Spinner } from '@molecule/app-ui-react';
+/**
+ * Account section — edits the user's display name + email. Fetches
+ * `/users/me` on mount to refresh the current user record (and write it
+ * back to the auth cache so subsequent reloads see the latest data). On
+ * blur of either field, PATCHes `/api/users/:id` with the changed field;
+ * reverts + shows an inline error if the request fails.
+ *
+ * The user resource's update handler accepts `name`, `username`, and
+ * `email`; this surfaces `name` + `email` (the universally-present
+ * profile fields). Apps that use a public `username` handle can extend
+ * this with a username field the same way.
+ */
+export function AccountSection() {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const authClient = useAuthClient();
+    const http = useHttpClient();
+    const cachedUser = authClient.getState().user;
+    const [email, setEmail] = useState(cachedUser?.email || '');
+    const [name, setName] = useState(cachedUser?.name || '');
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState('');
+    // Refresh the current user via the canonical `/users/me` endpoint on
+    // mount and push the result into the auth cache so reloads pick up
+    // fresh data. Failures are silent — the cached profile is the fallback.
+    useEffect(() => {
+        let cancelled = false;
+        http
+            .get('/api/users/me')
+            .then((res) => {
+            if (cancelled)
+                return;
+            const body = res.data ?? res;
+            const next = (body.props ?? body);
+            if (next && typeof next === 'object' && next.id) {
+                authClient.setUser(next);
+                setEmail((curr) => curr === (cachedUser?.email || '') ? next.email || curr : curr);
+                setName((curr) => curr === (cachedUser?.name || '') ? next.name || curr : curr);
+            }
+        })
+            .catch(() => {
+            /* refresh is best-effort */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [http, authClient, cachedUser?.email, cachedUser?.name]);
+    const saveField = async (field, value) => {
+        const currentUser = authClient.getState().user;
+        if (value === (currentUser?.[field] || ''))
+            return;
+        if (field === 'email' && !value)
+            return;
+        setSaving(true);
+        setError('');
+        try {
+            await http.patch(`/api/users/${currentUser?.id}`, { [field]: value });
+            // Update the auth cache so a reload reflects the new value.
+            if (currentUser)
+                authClient.setUser({ ...currentUser, [field]: value });
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t('settings.failedToUpdateProfile', undefined, {
+                    defaultValue: 'Failed to update profile',
+                }));
+            if (field === 'email')
+                setEmail(currentUser?.email || '');
+            else
+                setName(currentUser?.name || '');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs("section", { children: [_jsxs(Flex, { align: "center", gap: "sm", className: cm.sp('mb', 3), children: [_jsx("h3", { className: cm.sectionHeading, children: t('settings.account') }), saving && _jsx(Spinner, { size: "xs" })] }), _jsxs("div", { className: cm.stack(3), children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "settings-name", className: cm.formLabelSmall, children: t('settings.name', undefined, { defaultValue: 'Name' }) }), _jsx(Input, { id: "settings-name", type: "text", value: name, onChange: (e) => setName(e.target.value), onBlur: () => saveField('name', name), autoComplete: "name", size: "sm" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "settings-email", className: cm.formLabelSmall, children: t('settings.email') }), _jsx(Input, { id: "settings-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), onBlur: () => saveField('email', email), autoComplete: "email", size: "sm" }), error && (_jsx("p", { role: "alert", className: cm.cn(cm.textSize('xs'), cm.textError, cm.sp('mt', 1)), children: error }))] })] })] }));
+}

package/dist/AppearanceSection.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+/**
+ * Appearance section — dark-mode toggle wired to the theme bond.
+ *
+ * Apps that expose other appearance knobs (font size, density, etc.)
+ * can either add more sub-components to this package or render their
+ * own section in line with `<AppearanceSection>` via children.
+ */
+export declare function AppearanceSection(): JSX.Element;
+//# sourceMappingURL=AppearanceSection.d.ts.map

package/dist/AppearanceSection.d.ts.map

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

package/dist/AppearanceSection.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Flex, Switch } from '@molecule/app-ui-react';
+/**
+ * Appearance section — dark-mode toggle wired to the theme bond.
+ *
+ * Apps that expose other appearance knobs (font size, density, etc.)
+ * can either add more sub-components to this package or render their
+ * own section in line with `<AppearanceSection>` via children.
+ */
+export function AppearanceSection() {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const { mode, toggleTheme } = useTheme();
+    return (_jsxs("section", { children: [_jsx("h3", { className: cm.cn(cm.sectionHeading, cm.sp('mb', 3)), children: t('settings.appearance', undefined, { defaultValue: 'Appearance' }) }), _jsxs(Flex, { align: "center", justify: "between", children: [_jsx("span", { className: cm.textSize('sm'), children: t('settings.darkMode', undefined, { defaultValue: 'Dark mode' }) }), _jsx(Switch, { id: "settings-theme-toggle", "aria-label": t('theme.toggle', undefined, { defaultValue: 'Toggle theme' }), checked: mode === 'dark', onChange: () => toggleTheme(), size: "sm" })] })] }));
+}

package/dist/AuthSection.d.ts

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+/**
+ * Authentication section — change password (modal) + two-factor (TOTP) setup.
+ *
+ * Two-factor uses the real enrollment flow against the user resource's
+ * `POST /users/:id/verify-two-factor` endpoint (`@molecule/api-two-factor`):
+ * - Enable → `{action:'setup'}` returns a QR code + secret to scan into an
+ *   authenticator app → user enters the 6-digit code → `{action:'enable', token}`.
+ * - Disable → user enters a current code → `{action:'disable', token}`.
+ * The current status is read from `/users/me`. (This replaces the previous
+ * boolean toggle, which PATCHed `twoFactorEnabled` — a field the update
+ * handler deliberately ignores — so it never actually enrolled 2FA.)
+ *
+ * Auto-hides for OAuth-only users (`user.oauthServer` truthy) since
+ * password / 2FA wouldn't apply. If the app's API has no two-factor
+ * provider bonded, setup fails gracefully with an inline message.
+ */
+export declare function AuthSection(): JSX.Element | null;
+//# sourceMappingURL=AuthSection.d.ts.map

package/dist/AuthSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthSection.d.ts","sourceRoot":"","sources":["../src/AuthSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAchC;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CA8QhD"}

package/dist/AuthSection.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuth, useChangePassword, useHttpClient, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Alert, Button, Flex, Input, Modal } from '@molecule/app-ui-react';
+/**
+ * Authentication section — change password (modal) + two-factor (TOTP) setup.
+ *
+ * Two-factor uses the real enrollment flow against the user resource's
+ * `POST /users/:id/verify-two-factor` endpoint (`@molecule/api-two-factor`):
+ * - Enable → `{action:'setup'}` returns a QR code + secret to scan into an
+ *   authenticator app → user enters the 6-digit code → `{action:'enable', token}`.
+ * - Disable → user enters a current code → `{action:'disable', token}`.
+ * The current status is read from `/users/me`. (This replaces the previous
+ * boolean toggle, which PATCHed `twoFactorEnabled` — a field the update
+ * handler deliberately ignores — so it never actually enrolled 2FA.)
+ *
+ * Auto-hides for OAuth-only users (`user.oauthServer` truthy) since
+ * password / 2FA wouldn't apply. If the app's API has no two-factor
+ * provider bonded, setup fails gracefully with an inline message.
+ */
+export function AuthSection() {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const { user } = useAuth();
+    const http = useHttpClient();
+    const { status, error, changePassword, reset } = useChangePassword();
+    const [showModal, setShowModal] = useState(false);
+    const [currentPassword, setCurrentPassword] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const userId = user?.id;
+    const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
+    const [tfModal, setTfModal] = useState(null);
+    const [tfSetup, setTfSetup] = useState(null);
+    const [tfToken, setTfToken] = useState('');
+    const [tfLoading, setTfLoading] = useState(false);
+    const [tfError, setTfError] = useState('');
+    // Read the persisted 2FA status from /users/me on mount.
+    useEffect(() => {
+        let cancelled = false;
+        http
+            .get('/api/users/me')
+            .then((res) => {
+            if (cancelled)
+                return;
+            const body = res.data ?? res;
+            const u = (body.props ?? body);
+            setTwoFactorEnabled(Boolean(u?.twoFactorEnabled));
+        })
+            .catch(() => {
+            /* status read is best-effort; defaults to disabled */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [http]);
+    // OAuth users skip this section entirely.
+    if (user?.oauthServer)
+        return null;
+    const closeTf = () => {
+        setTfModal(null);
+        setTfSetup(null);
+        setTfToken('');
+        setTfError('');
+    };
+    const startEnable = async () => {
+        setTfError('');
+        setTfLoading(true);
+        setTfModal('enable');
+        try {
+            const res = await http.post(`/api/users/${userId}/verify-two-factor`, {
+                action: 'setup',
+            });
+            const data = (res.data ?? res);
+            setTfSetup(data);
+        }
+        catch (err) {
+            setTfError(err instanceof Error
+                ? err.message
+                : t('settings.twoFactorUnavailable', undefined, {
+                    defaultValue: 'Two-factor authentication is not available for this app.',
+                }));
+        }
+        finally {
+            setTfLoading(false);
+        }
+    };
+    const submitTf = async (action) => {
+        setTfError('');
+        setTfLoading(true);
+        try {
+            await http.post(`/api/users/${userId}/verify-two-factor`, { action, token: tfToken });
+            setTwoFactorEnabled(action === 'enable');
+            closeTf();
+        }
+        catch (err) {
+            setTfError(err instanceof Error
+                ? err.message
+                : t('settings.twoFactorInvalidCode', undefined, { defaultValue: 'Invalid code' }));
+        }
+        finally {
+            setTfLoading(false);
+        }
+    };
+    const handleChangePassword = async (e) => {
+        e.preventDefault();
+        try {
+            await changePassword(currentPassword, newPassword);
+            setShowModal(false);
+            setCurrentPassword('');
+            setNewPassword('');
+            reset();
+        }
+        catch (_error) {
+            // Error tracked in hook state — useChangePassword surfaces it via `error`.
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { children: [_jsx("h3", { className: cm.cn(cm.sectionHeading, cm.sp('mb', 3)), children: t('settings.authentication') }), _jsxs("div", { className: cm.stack(3), children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowModal(true), children: t('settings.changePassword') }), _jsxs(Flex, { align: "center", justify: "between", children: [_jsxs("span", { className: cm.textSize('sm'), children: [t('settings.twoFactor'), twoFactorEnabled ? (_jsx("span", { className: cm.cn(cm.textSize('xs'), cm.textSubtle, cm.sp('ml', 2)), children: t('settings.twoFactorOn', undefined, { defaultValue: 'On' }) })) : null] }), twoFactorEnabled ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                            setTfError('');
+                                            setTfToken('');
+                                            setTfModal('disable');
+                                        }, "data-mol-id": "two-factor-disable", children: t('settings.twoFactorDisable', undefined, { defaultValue: 'Disable' }) })) : (_jsx(Button, { variant: "outline", size: "sm", onClick: startEnable, "data-mol-id": "two-factor-enable", children: t('settings.twoFactorEnable', undefined, { defaultValue: 'Enable' }) }))] })] })] }), _jsxs(Modal, { open: showModal, onClose: () => {
+                    setShowModal(false);
+                    reset();
+                }, title: t('settings.changePasswordModal.title'), children: [error && (_jsx(Alert, { status: "error", className: cm.sp('mb', 4), children: error.message || t('settings.changePasswordModal.error') })), _jsxs("form", { onSubmit: handleChangePassword, className: cm.stack(4), children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "current-pw", className: cm.formLabel, children: t('settings.changePasswordModal.currentPassword') }), _jsx(Input, { id: "current-pw", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), autoComplete: "current-password", required: true })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "new-pw", className: cm.formLabel, children: t('settings.changePasswordModal.newPassword') }), _jsx(Input, { id: "new-pw", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), autoComplete: "new-password", required: true })] }), _jsx(Button, { type: "submit", fullWidth: true, loading: status === 'pending', children: status === 'pending'
+                                    ? t('settings.changePasswordModal.changing')
+                                    : t('settings.changePassword') })] })] }), _jsxs(Modal, { open: tfModal !== null, onClose: closeTf, title: tfModal === 'disable'
+                    ? t('settings.twoFactorDisableTitle', undefined, {
+                        defaultValue: 'Disable two-factor authentication',
+                    })
+                    : t('settings.twoFactorEnableTitle', undefined, {
+                        defaultValue: 'Enable two-factor authentication',
+                    }), children: [tfError && (_jsx(Alert, { status: "error", className: cm.sp('mb', 4), children: tfError })), tfModal === 'enable' && tfSetup?.QRImageUrl ? (_jsxs("div", { className: cm.cn(cm.stack(3), cm.sp('mb', 4)), children: [_jsx("p", { className: cm.cn(cm.textSize('sm'), cm.textMuted), children: t('settings.twoFactorScan', undefined, {
+                                    defaultValue: 'Scan this QR code with your authenticator app, then enter the 6-digit code.',
+                                }) }), _jsx("img", { src: tfSetup.QRImageUrl, alt: t('settings.twoFactorQrAlt', undefined, { defaultValue: 'Two-factor QR code' }), className: cm.cn('mx-auto', cm.maxW('xs')) }), tfSetup.secret ? (_jsx("p", { className: cm.cn(cm.textSize('xs'), cm.textSubtle, 'text-center break-all'), children: tfSetup.secret })) : null] })) : null, (tfModal === 'disable' || tfSetup) && (_jsxs("form", { onSubmit: (e) => {
+                            e.preventDefault();
+                            void submitTf(tfModal === 'disable' ? 'disable' : 'enable');
+                        }, className: cm.stack(4), children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "tf-token", className: cm.formLabel, children: t('settings.twoFactorCode', undefined, { defaultValue: 'Authentication code' }) }), _jsx(Input, { id: "tf-token", type: "text", value: tfToken, onChange: (e) => setTfToken(e.target.value), autoComplete: "one-time-code", required: true })] }), _jsx(Button, { type: "submit", color: tfModal === 'disable' ? 'error' : undefined, fullWidth: true, loading: tfLoading, children: tfModal === 'disable'
+                                    ? t('settings.twoFactorDisable', undefined, { defaultValue: 'Disable' })
+                                    : t('settings.twoFactorVerify', undefined, { defaultValue: 'Verify & enable' }) })] }))] })] }));
+}

package/dist/BillingSection.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from 'react';
+/**
+ * Billing section — current plan + Upgrade button.
+ *
+ * Fetches `/api/billing/status` on mount and uses the returned plan
+ * name as a more accurate label than the parent-supplied default.
+ * The `plan` prop remains a fallback (e.g. for offline rendering or
+ * apps that don't expose `/billing/status`).
+ *
+ * The Upgrade button navigates to `upgradeTo` (default `/settings`).
+ * Pass `upgradeTo="/billing"` or `upgradeTo="/pricing"` if your app
+ * routes elsewhere. Apps with a multi-tier checkout flow should use
+ * `<TiersUpgradeSection>` instead.
+ */
+export declare function BillingSection({ plan, upgradeTo, }?: {
+    plan?: string;
+    upgradeTo?: string;
+}): JSX.Element;
+//# sourceMappingURL=BillingSection.d.ts.map

package/dist/BillingSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSection.d.ts","sourceRoot":"","sources":["../src/BillingSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAuB,MAAM,OAAO,CAAA;AAOrD;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAa,EACb,SAAuB,GACxB,GAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,GAAG,CAAC,OAAO,CA2C1D"}

package/dist/BillingSection.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { useHttpClient, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Button, Flex } from '@molecule/app-ui-react';
+/**
+ * Billing section — current plan + Upgrade button.
+ *
+ * Fetches `/api/billing/status` on mount and uses the returned plan
+ * name as a more accurate label than the parent-supplied default.
+ * The `plan` prop remains a fallback (e.g. for offline rendering or
+ * apps that don't expose `/billing/status`).
+ *
+ * The Upgrade button navigates to `upgradeTo` (default `/settings`).
+ * Pass `upgradeTo="/billing"` or `upgradeTo="/pricing"` if your app
+ * routes elsewhere. Apps with a multi-tier checkout flow should use
+ * `<TiersUpgradeSection>` instead.
+ */
+export function BillingSection({ plan = 'Free', upgradeTo = '/settings', } = {}) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const http = useHttpClient();
+    const [livePlan, setLivePlan] = useState(null);
+    // Refresh the current plan from the bonded entitlements/billing
+    // status endpoint on mount. Fire-and-forget; the prop-supplied
+    // `plan` is the fallback if the fetch fails.
+    useEffect(() => {
+        let cancelled = false;
+        http
+            .get('/api/billing/status')
+            .then((res) => {
+            if (cancelled)
+                return;
+            const body = res.data ?? res;
+            const name = body?.name;
+            if (typeof name === 'string' && name)
+                setLivePlan(name);
+        })
+            .catch(() => {
+            /* fallback to the prop-supplied plan label */
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [http]);
+    return (_jsxs("section", { children: [_jsx("h3", { className: cm.cn(cm.sectionHeading, cm.sp('mb', 3)), children: t('settings.billing') }), _jsxs(Flex, { align: "center", justify: "between", children: [_jsxs("span", { className: cm.textSize('sm'), children: [t('settings.plan'), _jsx("strong", { children: livePlan ?? plan })] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => navigate(upgradeTo), children: t('settings.upgrade') })] })] }));
+}

package/dist/DevicesSection.d.ts

@@ -0,0 +1,30 @@
+import { type JSX, type ReactNode } from 'react';
+/** A user's registered device (subset rendered in the settings list). */
+export interface Device {
+    id: string;
+    name: string;
+    platform: string;
+    lastSeen?: string;
+    /** `true` for the device making the current request (the API marks it). */
+    isCurrent?: boolean;
+}
+/**
+ * Devices section — lists the user's registered devices and lets them
+ * revoke (sign out) any device other than the one they're currently using.
+ *
+ * Revoking deletes the device row (`DELETE /api/devices/:id`). The API's
+ * authorization layer enforces server-side revocation: it rejects that
+ * device's session the next time it makes a request (within the
+ * device-exists cache TTL), so the removed device is actually signed out —
+ * not just hidden from the list. The current device is labelled
+ * "This device" and is not revocable here (use Sign out for the current
+ * session). Recreates molecule v1's device-revocation behaviour.
+ *
+ * Apps that want a different trailing element per row can pass a
+ * `renderRowIcon` callback (which then replaces the built-in revoke
+ * control); pass `() => null` to suppress it entirely.
+ */
+export declare function DevicesSection({ renderRowIcon, }?: {
+    renderRowIcon?: (device: Device) => ReactNode;
+}): JSX.Element;
+//# sourceMappingURL=DevicesSection.d.ts.map

package/dist/DevicesSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevicesSection.d.ts","sourceRoot":"","sources":["../src/DevicesSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAA;AAMlF,yEAAyE;AACzE,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAA;CACzC,GAAG,GAAG,CAAC,OAAO,CA6HnB"}

package/dist/DevicesSection.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { useHttpClient, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Button, Flex, Icon, Spinner } from '@molecule/app-ui-react';
+/**
+ * Devices section — lists the user's registered devices and lets them
+ * revoke (sign out) any device other than the one they're currently using.
+ *
+ * Revoking deletes the device row (`DELETE /api/devices/:id`). The API's
+ * authorization layer enforces server-side revocation: it rejects that
+ * device's session the next time it makes a request (within the
+ * device-exists cache TTL), so the removed device is actually signed out —
+ * not just hidden from the list. The current device is labelled
+ * "This device" and is not revocable here (use Sign out for the current
+ * session). Recreates molecule v1's device-revocation behaviour.
+ *
+ * Apps that want a different trailing element per row can pass a
+ * `renderRowIcon` callback (which then replaces the built-in revoke
+ * control); pass `() => null` to suppress it entirely.
+ */
+export function DevicesSection({ renderRowIcon, } = {}) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const http = useHttpClient();
+    const [devices, setDevices] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [confirmingId, setConfirmingId] = useState(null);
+    const [revokingId, setRevokingId] = useState(null);
+    const load = useCallback(async () => {
+        try {
+            // GET /api/devices responds with the ARRAY itself (see the device
+            // resource's query handler) — response.data IS the rows. This used to
+            // read `response.data.data`, which is always undefined for that shape,
+            // so the section rendered "No devices" for everyone.
+            const response = await http.get('/api/devices');
+            setDevices(Array.isArray(response.data) ? response.data : []);
+        }
+        catch (_error) {
+            // Devices endpoint is optional; the section renders empty when unavailable.
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [http]);
+    useEffect(() => {
+        load();
+    }, [load]);
+    const revoke = async (id) => {
+        setRevokingId(id);
+        try {
+            await http.delete(`/api/devices/${id}`);
+            setConfirmingId(null);
+            await load();
+        }
+        catch (_error) {
+            // Best-effort — keep the row so the user can retry the revoke.
+        }
+        finally {
+            setRevokingId(null);
+        }
+    };
+    const trailing = (device) => {
+        if (renderRowIcon)
+            return renderRowIcon(device);
+        if (device.isCurrent)
+            return _jsx(Icon, { name: "chevron-right", size: 16, className: cm.textSubtle });
+        if (confirmingId === device.id) {
+            return (_jsxs(Flex, { align: "center", gap: "sm", children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: revokingId === device.id, onClick: () => setConfirmingId(null), children: t('common.cancel', undefined, { defaultValue: 'Cancel' }) }), _jsx(Button, { color: "error", size: "sm", loading: revokingId === device.id, onClick: () => revoke(device.id), "data-mol-id": "device-revoke-confirm", children: t('settings.signOutDevice', undefined, { defaultValue: 'Sign out' }) })] }));
+        }
+        return (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmingId(device.id), "data-mol-id": "device-revoke", children: t('settings.signOutDevice', undefined, { defaultValue: 'Sign out' }) }));
+    };
+    return (_jsxs("section", { children: [_jsxs(Flex, { align: "center", gap: "sm", className: cm.sp('mb', 3), children: [_jsx("h3", { className: cm.sectionHeading, children: t('settings.devices', undefined, { defaultValue: 'Devices' }) }), loading && _jsx(Spinner, { size: "xs" })] }), devices.length > 0 ? (_jsx("ul", { className: cm.stack(2), children: devices.map((device) => (_jsxs("li", { children: [_jsxs(Flex, { align: "center", justify: "between", className: cm.cn(cm.textSize('sm'), cm.sp('py', 1)), children: [_jsxs("span", { children: [device.name || device.platform, device.isCurrent ? (_jsx("span", { className: cm.cn(cm.textSize('xs'), cm.textSubtle, cm.sp('ml', 2)), children: t('settings.thisDevice', undefined, { defaultValue: 'This device' }) })) : null] }), trailing(device)] }), confirmingId === device.id ? (_jsx("p", { className: cm.cn(cm.textSize('xs'), cm.textMuted, cm.sp('mt', 1)), children: t('settings.revokeDeviceWarning', undefined, {
+                                defaultValue: "This device's access will be revoked shortly. Sign it out?",
+                            }) })) : null] }, device.id))) })) : (!loading && (_jsx("p", { className: cm.cn(cm.textSize('sm'), cm.textMuted), children: t('settings.noDevices', undefined, { defaultValue: 'No devices' }) })))] }));
+}

package/dist/LogOutDeleteSection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Bottom actions section — Log out + Delete account.
+ *
+ * Owns the delete-account modal internally (the trigger lives in the
+ * same section so the modal lives here too). Reads `onClose` from
+ * the `<SettingsContainer>` context to dismiss the panel after either
+ * action and navigates to `/login`.
+ */
+export declare function LogOutDeleteSection(): React.JSX.Element;
+//# sourceMappingURL=LogOutDeleteSection.d.ts.map

package/dist/LogOutDeleteSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogOutDeleteSection.d.ts","sourceRoot":"","sources":["../src/LogOutDeleteSection.tsx"],"names":[],"mappings":"AAUA;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAoFvD"}

package/dist/LogOutDeleteSection.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useNavigate } from 'react-router';
+import { useAuth, useHttpClient, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Alert, Button, Input, Modal } from '@molecule/app-ui-react';
+import { useSettingsPanelContext } from './context.js';
+/**
+ * Bottom actions section — Log out + Delete account.
+ *
+ * Owns the delete-account modal internally (the trigger lives in the
+ * same section so the modal lives here too). Reads `onClose` from
+ * the `<SettingsContainer>` context to dismiss the panel after either
+ * action and navigates to `/login`.
+ */
+export function LogOutDeleteSection() {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { user, logout } = useAuth();
+    const http = useHttpClient();
+    const { onClose } = useSettingsPanelContext();
+    const [showModal, setShowModal] = useState(false);
+    const [password, setPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const handleLogout = async () => {
+        await logout();
+        onClose();
+        navigate('/login');
+    };
+    const handleDelete = async (e) => {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        try {
+            await http.delete(`/api/users/${user?.id}`, { data: { password } });
+            await logout();
+            onClose();
+            navigate('/login');
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : t('settings.failedToDeleteAccount'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: cm.stack(3), children: [_jsx(Button, { color: "error", fullWidth: true, onClick: handleLogout, "data-mol-id": "user-menu-logout", children: t('settings.logOut', undefined, { defaultValue: 'Sign out' }) }), _jsx(Button, { variant: "ghost", fullWidth: true, onClick: () => setShowModal(true), "data-mol-id": "user-menu-delete-account", children: t('settings.deleteAccount', undefined, { defaultValue: 'Delete account' }) })] }), _jsxs(Modal, { open: showModal, onClose: () => setShowModal(false), title: t('settings.deleteAccountModal.title'), children: [_jsx("p", { className: cm.cn(cm.textSize('sm'), cm.textMuted, cm.sp('mb', 4)), children: t('settings.deleteAccountModal.warning') }), error && (_jsx(Alert, { status: "error", className: cm.sp('mb', 4), children: error })), _jsxs("form", { onSubmit: handleDelete, className: cm.stack(4), children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "delete-pw", className: cm.formLabel, children: t('settings.deleteAccountModal.password') }), _jsx(Input, { id: "delete-pw", type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true })] }), _jsx(Button, { type: "submit", color: "error", fullWidth: true, loading: loading, children: loading ? t('settings.deleteAccountModal.deleting') : t('settings.deleteAccount') })] })] })] }));
+}

package/dist/NotificationsSection.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'react';
+/**
+ * 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 declare function NotificationsSection(): JSX.Element;
+//# sourceMappingURL=NotificationsSection.d.ts.map

package/dist/NotificationsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsSection.d.ts","sourceRoot":"","sources":["../src/NotificationsSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAchC;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,GAAG,CAAC,OAAO,CAiGlD"}