@columenlabs/lumen-ui 0.1.182 → 0.1.184

package/dist/expand-list.d.ts

@@ -9,11 +9,23 @@ export declare function LumenExpandList({ defaultOpen, className, children, }: {
  * One row that expands in place. Inside a LumenExpandList it opens by `id`; `open` and
  * `onOpenChange` make it controlled; alone it keeps its own state (`defaultOpen`).
  */
-export declare function LumenExpandRow({ id, name, meta, badge, icon, open: openProp, onOpenChange, defaultOpen, children, }: {
+export declare function LumenExpandRow({ id, name, meta, badge, status, toggle, actions, icon, open: openProp, onOpenChange, defaultOpen, children, }: {
     id?: string;
     name: ReactNode;
     meta?: ReactNode;
+    /** Old name for `status`. */
     badge?: ReactNode;
+    /** The thing's status pill (`SettingStatus`): Works, Failed, Not tested, Off, or a count. */
+    status?: ReactNode;
+    /** Turns the whole thing on or off: a switch in the header, outside the expand button. */
+    toggle?: {
+        checked: boolean;
+        onCheckedChange: (on: boolean) => void;
+        label: string;
+        disabled?: boolean;
+    };
+    /** The action bar under the rows (`SettingActions`). */
+    actions?: ReactNode;
     /** A logo or icon before the name. */
     icon?: ReactNode;
     open?: boolean;

package/dist/expand-list.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // A stack of rows that start collapsed and expand in place: a settings page's providers, channels or
 // accounts, each row's name, a line about it and a badge, its own settings inside. One row is open
-// at a time within a LumenExpandList.
+// at a time within a LumenExpandList. The header holds the thing's `status` pill and the `toggle` that
+// turns the whole thing on or off; the body is `SettingField` rows; `actions` is its action bar
+// (`SettingActions`: last result, Test, Remove). See setting-parts.tsx.
 import { ChevronRightIcon } from 'lucide-react';
 import { createContext, useContext, useState } from 'react';
 import { cn } from './lib/utils.js';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible.js';
+import { Switch } from './ui/switch.js';
 const ListCtx = createContext(null);
 /** Rows that start collapsed; opening one closes the others. `defaultOpen` names a row open at first. */
 export function LumenExpandList({ defaultOpen = null, className, children, }) {
@@ -16,7 +19,7 @@ export function LumenExpandList({ defaultOpen = null, className, children, }) {
  * One row that expands in place. Inside a LumenExpandList it opens by `id`; `open` and
  * `onOpenChange` make it controlled; alone it keeps its own state (`defaultOpen`).
  */
-export function LumenExpandRow({ id, name, meta, badge, icon, open: openProp, onOpenChange, defaultOpen = false, children, }) {
+export function LumenExpandRow({ id, name, meta, badge, status, toggle, actions, icon, open: openProp, onOpenChange, defaultOpen = false, children, }) {
     const list = useContext(ListCtx);
     const [own, setOwn] = useState(defaultOpen);
     const inList = list && id !== undefined;
@@ -29,5 +32,7 @@ export function LumenExpandRow({ id, name, meta, badge, icon, open: openProp, on
         else
             setOwn(o);
     };
-    return (_jsxs(Collapsible, { open: open, onOpenChange: change, className: "border-b last:border-b-0", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-3 px-1 py-3 text-left hover:bg-muted/50", children: [icon, _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", title: typeof name === 'string' ? name : undefined, children: name }), meta && (_jsx("span", { className: "block truncate text-xs text-muted-foreground", title: typeof meta === 'string' ? meta : undefined, children: meta }))] }), badge, _jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') })] }) }), _jsx(CollapsibleContent, { className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5", children: children })] }));
+    const chevron = (_jsx(ChevronRightIcon, { className: cn('size-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90') }));
+    const label = typeof name === 'string' ? name : undefined;
+    return (_jsxs(Collapsible, { open: open, onOpenChange: change, className: "border-b last:border-b-0", children: [_jsxs("div", { className: "flex w-full min-w-0 items-center gap-3 px-1 hover:bg-muted/50", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-3 py-3 text-left", children: [icon, _jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("span", { className: "shrink-0 truncate font-medium", title: label, children: name }), meta && (_jsx("span", { className: "min-w-0 truncate text-sm text-muted-foreground", title: typeof meta === 'string' ? meta : undefined, children: meta }))] }), status ?? badge, !toggle && chevron] }) }), toggle && (_jsxs(_Fragment, { children: [_jsx(Switch, { checked: toggle.checked, onCheckedChange: toggle.onCheckedChange, disabled: toggle.disabled, "aria-label": toggle.label }), _jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "-mr-1 flex min-h-10 min-w-8 items-center justify-center", "aria-label": `${open ? 'Collapse' : 'Expand'}${label ? ` ${label}` : ''}`, children: chevron }) })] }))] }), _jsxs(CollapsibleContent, { "data-slot": "expand-body", className: "grid grid-cols-1 gap-5 px-1 pt-1 pb-5 has-[[data-slot=setting-field]]:gap-0 has-[[data-slot=setting-field]]:pb-3 has-[[data-slot=setting-field]]:pl-8", children: [children, actions] })] }));
 }

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, type KeyTestRe
 export { ConnectionBadge, type ConnectionField, type ConnectionLine, ConnectionLogo, type ConnectionSignin, type ConnectionStatus, type ConnectionTest, type ConnectionWay, LumenConnection, type LumenConnectionProps, activeWay, connectionStatus, } from './connection.js';
 export { LumenChatgptSignin, type LumenChatgptSigninProps } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
+export { SettingActions, SettingField, type SettingHealth, SettingStatus, SettingValue, sectionHealth, settingHealth, } from './setting-parts.js';
 export { type Fact, FactList, type FactListProps } from './fact-list.js';
 export { LumenPageFooter, LumenPager, pageList } from './pager.js';
 export { clearPersistedQueries, createDeskQueryClient, type PersistOptions } from './query-client.js';

package/dist/index.js

@@ -62,6 +62,7 @@ export { ConnectionBlock, ErrorLine, IntegrationRow, KeyTestLine, TestBadge, err
 export { ConnectionBadge, ConnectionLogo, LumenConnection, activeWay, connectionStatus, } from './connection.js';
 export { LumenChatgptSignin } from './chatgpt-signin.js';
 export { LumenExpandList, LumenExpandRow } from './expand-list.js';
+export { SettingActions, SettingField, SettingStatus, SettingValue, sectionHealth, settingHealth, } from './setting-parts.js';
 export { FactList } from './fact-list.js';
 export { LumenPageFooter, LumenPager, pageList } from './pager.js';
 export { clearPersistedQueries, createDeskQueryClient } from './query-client.js';

package/dist/info-tip.js

@@ -25,7 +25,7 @@ export function InfoTip({ children, label = 'More about this', side = 'top', cla
                     // A 16px icon with a 24px hit area (WCAG 2.2 target size on a phone).
                     "relative inline-flex size-4 shrink-0 items-center justify-center rounded-full align-middle text-muted-foreground outline-none after:absolute after:-inset-1 after:content-[''] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", className), onFocus: () => later(true, 0), onBlur: () => later(false, 100), ...hover, children: _jsx(InfoIcon, { className: "size-3.5" }) }) }), _jsx(PopoverContent, { side: side, className: "w-72 text-muted-foreground text-xs leading-relaxed", 
                 // Focus stays on the (i): the tip is read, not worked in.
-                onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), ...hover, children: children })] }));
+                onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), ...hover, children: _jsx("div", { children: children }) })] }));
 }
 /** A label with its (i): `Link works for (i)`. */
 export function InfoLabel({ children, info, className, }) {

package/dist/notifications.js

@@ -1,21 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { AlertTriangleIcon, BellIcon, CheckIcon, CopyIcon, MailIcon, PlusIcon, RefreshCwIcon, Trash2Icon, WebhookIcon, XIcon, } from 'lucide-react';
+import { BellIcon, CheckIcon, MailIcon, PlusIcon, RefreshCwIcon, Trash2Icon, WebhookIcon, XIcon, } from 'lucide-react';
 import { useState } from 'react';
 // Settings ▸ Notifications: where the product tells the person something
 // happened: email to the sign-in address, ntfy (a private ntfy.sh topic per person, sent with their
 // own paid ntfy.sh token) and webhooks, then which event goes to which target. The app passes its
 // API base (`/api/notifications`), its product's name and the address email comes from.
 import { LumenConfirm } from './confirm.js';
+import { LumenExpandRow } from './expand-list.js';
 import { fetchWithin } from './fetch-within.js';
-import { ErrorLine, IntegrationRow, KeyTestLine, TestBadge, } from './integrations.js';
+import { ErrorLine } from './integrations.js';
 import { IconButton } from './page.js';
+import { SettingActions, SettingField, SettingStatus, SettingValue, settingHealth, } from './setting-parts.js';
 import { Badge } from './ui/badge.js';
 import { Button } from './ui/button.js';
 import { Checkbox } from './ui/checkbox.js';
 import { Input } from './ui/input.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
-import { Label } from './ui/label.js';
 const NTFY_IOS = 'https://apps.apple.com/us/app/ntfy/id1625396347';
 const NTFY_ANDROID = 'https://play.google.com/store/apps/details?id=io.heckel.ntfy';
 async function call(url, method = 'GET', body) {
@@ -39,34 +40,32 @@ function useNotifications(api, product, sender) {
     const send = (method, path, body) => call(`${api}${path}`, method, body ?? (method === 'DELETE' ? undefined : {}));
     return { q, set, reload, send, product, sender };
 }
-function Field({ id, label, children }) {
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-1.5", children: [_jsx(Label, { htmlFor: id, className: "text-xs text-muted-foreground", children: label }), children] }));
-}
-function Section({ title, children }) {
-    return (_jsxs("section", { className: "grid grid-cols-1 gap-2", children: [_jsx("h4", { className: "text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: title }), children] }));
-}
-function CopyField({ id, value }) {
-    const [copied, setCopied] = useState(false);
-    return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: id, readOnly: true, className: "num", value: value, onFocus: (e) => e.currentTarget.select() }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(InputGroupButton, { size: "xs", "aria-label": "Copy topic", onClick: () => {
-                        void navigator.clipboard.writeText(value);
-                        setCopied(true);
-                        setTimeout(() => setCopied(false), 1500);
-                    }, children: [copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}), copied ? 'Copied' : 'Copy'] }) })] }));
-}
-/** A test that answers refreshes the section. */
-function TestLine({ test, run, api }) {
-    return _jsx(KeyTestLine, { test: test, run: () => api.send('POST', run).then(api.set) });
+const ago = (t) => t ? `${t.ok ? 'Worked' : 'Failed'} ${new Date(t.at).toLocaleString()}` : undefined;
+function useTest(run, api) {
+    return () => api.send('POST', run).then(api.set);
 }
 // ── Email ──
-function Email({ status, api }) {
+function useEmail(status, api) {
     const create = useMutation({ mutationFn: () => api.send('POST', '/email'), onSuccess: api.set });
     const remove = useMutation({
         mutationFn: () => api.send('DELETE', '/email'),
         onSuccess: () => void api.reload(),
     });
+    return {
+        create,
+        remove,
+        toggle: {
+            checked: status.connected,
+            disabled: (!status.available && !status.connected) || create.isPending || remove.isPending,
+            label: 'Email on',
+            onCheckedChange: (on) => (on ? create.mutate() : remove.mutate()),
+        },
+    };
+}
+function EmailBody({ status, api, errors }) {
     if (!status.connected)
-        return status.available ? (_jsxs("div", { className: "grid grid-cols-1 gap-3", children: [_jsxs("p", { className: "text-sm", children: ["Get ", api.product, " alerts by email at the address you sign in with. Nothing to set up."] }), _jsx(ErrorLine, { error: create.error }), _jsx(IconButton, { icon: create.isPending ? RefreshCwIcon : MailIcon, label: "Turn on email", variant: "outline", className: "justify-self-start", disabled: create.isPending, busy: create.isPending, onClick: () => create.mutate() })] })) : (_jsx("p", { className: "text-sm", children: "Email is not set up on this server." }));
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-5", children: [_jsx(Section, { title: "Sends to", children: _jsxs("p", { className: "text-sm", children: [status.address, ", from ", api.sender] }) }), _jsx(Section, { title: "Test", children: _jsx(TestLine, { test: status.last_test, run: "/email/test", api: api }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ErrorLine, { error: remove.error }), _jsx("span", { className: "flex-1" }), _jsx(LumenConfirm, { title: "Turn off email notifications?", description: `${api.product} stops emailing you. You can turn it on again any time.`, action: "Turn off", onConfirm: () => remove.mutate(), children: _jsx(IconButton, { icon: Trash2Icon, label: "Turn off", variant: "destructive" }) })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(SettingField, { label: "Sends to", children: _jsx("span", { className: "truncate text-sm text-muted-foreground", children: status.available ? 'Your sign-in address, once on' : 'Not set up on this server' }) }), errors.map((e, i) => (_jsx(ErrorLine, { error: e }, i)))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SettingField, { label: "Sends to", info: `From ${api.sender}.`, children: _jsx(SettingValue, { label: "Address", value: status.address }) }), errors.map((e, i) => (_jsx(ErrorLine, { error: e }, i)))] }));
 }
 // ── ntfy ──
 /**
@@ -74,44 +73,76 @@ function Email({ status, api }) {
  * address, and the product sends from Cloudflare's shared ones, so sends go out under their paid account.
  */
 function NtfyToken({ token, api }) {
+    const [editing, setEditing] = useState(!token);
     const [value, setValue] = useState('');
     const save = useMutation({
         mutationFn: () => api.send('PUT', '/ntfy/token', { token: value.trim() }),
         onSuccess: (data) => {
             api.set(data);
             setValue('');
+            setEditing(false);
         },
     });
-    return (_jsxs(Section, { title: "Access token", children: [_jsxs("p", { className: "text-sm", children: ["This needs a paid account at", ' ', _jsx("a", { className: "underline", href: "https://ntfy.sh/account", target: "_blank", rel: "noreferrer", children: "ntfy.sh" }), ' ', "(Supporter or above): ntfy.sh limits free accounts by sending address, and ", api.product, ' ', "sends from Cloudflare's shared addresses. Open Account \u25B8 Access tokens, create one and paste it here."] }), token ? (_jsxs("p", { className: "text-sm", children: ["Saved ", _jsx("span", { className: "num", children: token })] })) : null, _jsxs("form", { className: "flex flex-wrap items-end gap-2", onSubmit: (e) => {
-                    e.preventDefault();
-                    if (value.trim())
-                        save.mutate();
-                }, children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Field, { id: "ntfy-token", label: token ? 'Replace token' : 'Access token', children: _jsx(Input, { id: "ntfy-token", type: "password", className: "num", autoComplete: "off", placeholder: "tk_\u2026", value: value, onChange: (e) => setValue(e.target.value) }) }) }), _jsxs(Button, { type: "submit", size: "sm", disabled: !value.trim() || save.isPending, children: [save.isPending ? _jsx(RefreshCwIcon, { className: "animate-spin" }) : _jsx(CheckIcon, {}), "Save"] })] }), _jsx(ErrorLine, { error: save.error })] }));
+    return (_jsx(SettingField, { label: "Token", htmlFor: "ntfy-token", info: _jsxs(_Fragment, { children: ["Needs a paid ntfy.sh account (Supporter or above): ntfy.sh limits free accounts by sending address, and ", api.product, " sends from Cloudflare's shared addresses. Create one at", ' ', _jsx("a", { className: "underline", href: "https://ntfy.sh/account", target: "_blank", rel: "noreferrer", children: "ntfy.sh" }), ' ', "under Account \u25B8 Access tokens."] }), children: token && !editing ? (_jsx(SettingValue, { label: "Access token", value: token, mono: true, onReplace: () => setEditing(true) })) : (_jsxs("form", { className: "min-w-0 flex-1", onSubmit: (e) => {
+                e.preventDefault();
+                if (value.trim())
+                    save.mutate();
+            }, children: [_jsxs(InputGroup, { className: "h-8", children: [_jsx(InputGroupInput, { id: "ntfy-token", type: "password", className: "num", autoComplete: "off", placeholder: "tk_\u2026", value: value, onChange: (e) => setValue(e.target.value) }), _jsxs(InputGroupAddon, { align: "inline-end", children: [token ? (_jsx(InputGroupButton, { type: "button", size: "icon-xs", "aria-label": "Cancel", title: "Cancel", onClick: () => {
+                                        setValue('');
+                                        setEditing(false);
+                                    }, children: _jsx(XIcon, {}) })) : null, _jsx(InputGroupButton, { type: "submit", size: "icon-xs", "aria-label": "Save token", title: "Save token", disabled: !value.trim() || save.isPending, children: save.isPending ? _jsx(RefreshCwIcon, { className: "animate-spin" }) : _jsx(CheckIcon, {}) })] })] }), _jsx(ErrorLine, { error: save.error })] })) }));
 }
-function Ntfy({ status, api }) {
+function useNtfy(status, api) {
+    const [confirm, setConfirm] = useState(false);
     const create = useMutation({ mutationFn: () => api.send('POST', '/ntfy'), onSuccess: api.set });
     const remove = useMutation({
         mutationFn: () => api.send('DELETE', '/ntfy'),
         onSuccess: () => void api.reload(),
     });
+    return {
+        create,
+        remove,
+        confirm: (_jsx(LumenConfirm, { open: confirm, onOpenChange: setConfirm, title: "Turn off ntfy?", description: `${api.product} stops sending and forgets your topic. Turning on again makes a new topic, which your phone must subscribe to again.`, action: "Turn off", onConfirm: () => remove.mutateAsync() })),
+        toggle: {
+            checked: status.connected,
+            disabled: create.isPending || remove.isPending,
+            label: 'ntfy on',
+            onCheckedChange: (on) => (on ? create.mutate() : setConfirm(true)),
+        },
+    };
+}
+function NtfyBody({ status, api, errors }) {
     if (!status.connected)
-        return (_jsxs("div", { className: "grid grid-cols-1 gap-3", children: [_jsxs("p", { className: "text-sm", children: ["Get ", api.product, " alerts on your phone through the free ntfy app. ", api.product, " makes you a private topic (a random name only you know) and sends to it with the access token of your own paid ntfy.sh account."] }), _jsx(ErrorLine, { error: create.error }), _jsx(IconButton, { icon: create.isPending ? RefreshCwIcon : BellIcon, label: "Turn on ntfy", variant: "outline", className: "justify-self-start", disabled: create.isPending, busy: create.isPending, onClick: () => create.mutate() })] }));
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-5", children: [_jsxs(Section, { title: "Set up your phone", children: [_jsxs("ol", { className: "grid list-decimal grid-cols-1 gap-2 pl-5 text-sm", children: [_jsxs("li", { children: ["Install ntfy:", ' ', _jsx("a", { className: "underline", href: NTFY_IOS, target: "_blank", rel: "noreferrer", children: "iPhone" }), ' ', "or", ' ', _jsx("a", { className: "underline", href: NTFY_ANDROID, target: "_blank", rel: "noreferrer", children: "Android" }), "."] }), _jsx("li", { children: "Open it, tap + (Subscribe to topic) and paste your topic. Keep the server as ntfy.sh." }), _jsx("li", { children: "Allow notifications when your phone asks, add your access token below, then tap Test." })] }), _jsx(Field, { id: "ntfy-topic", label: "Your topic (keep it private: anyone with it can read it)", children: _jsx(CopyField, { id: "ntfy-topic", value: status.topic }) })] }), _jsx(NtfyToken, { token: status.token, api: api }), _jsx(Section, { title: "Test", children: _jsx(TestLine, { test: status.last_test, run: "/ntfy/test", api: api }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(ErrorLine, { error: remove.error }), _jsx("span", { className: "flex-1" }), _jsx(LumenConfirm, { title: "Turn off ntfy?", description: `${api.product} stops sending and forgets your topic. Turning on again makes a new topic, which your phone must subscribe to again.`, action: "Turn off", onConfirm: () => remove.mutate(), children: _jsx(IconButton, { icon: Trash2Icon, label: "Turn off", variant: "destructive" }) })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(SettingField, { label: "Topic", info: `${api.product} makes you a private topic (a random name only you know) and sends to it with the access token of your own paid ntfy.sh account.`, children: _jsx("span", { className: "truncate text-sm text-muted-foreground", children: "Made when you turn it on" }) }), errors.map((e, i) => (_jsx(ErrorLine, { error: e }, i)))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SettingField, { label: "Topic", stack: true, info: _jsxs(_Fragment, { children: ["Install ntfy (", _jsx("a", { className: "underline", href: NTFY_IOS, target: "_blank", rel: "noreferrer", children: "iPhone" }), ' ', "or", ' ', _jsx("a", { className: "underline", href: NTFY_ANDROID, target: "_blank", rel: "noreferrer", children: "Android" }), "), tap + and paste this topic, keeping the server as ntfy.sh. Keep it private: anyone with it can read it."] }), children: _jsx(SettingValue, { label: "Topic", value: status.topic, mono: true, copy: true }) }), _jsx(NtfyToken, { token: status.token, api: api }), errors.map((e, i) => (_jsx(ErrorLine, { error: e }, i)))] }));
 }
 // ── Webhooks ──
 function WebhookRow({ hook, api }) {
+    const [busy, setBusy] = useState(false);
     const remove = useMutation({
         mutationFn: () => api.send('DELETE', `/webhooks/${encodeURIComponent(hook.id)}`),
         onSuccess: () => void api.reload(),
     });
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-2 border-b pb-3 last:border-b-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(WebhookIcon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: hook.name }), _jsx("span", { className: "num min-w-0 flex-1 truncate text-xs text-muted-foreground", children: hook.url }), _jsx(LumenConfirm, { title: `Remove ${hook.name}?`, description: `${api.product} stops sending events to this address.`, action: "Remove", onConfirm: () => remove.mutate(), children: _jsx(IconButton, { icon: Trash2Icon, label: `Remove ${hook.name}`, variant: "destructive" }) })] }), hook.headers.length ? (_jsx("p", { className: "num text-xs text-muted-foreground", children: hook.headers.map((h) => `${h.name}: ${h.value}`).join(' · ') })) : null, _jsx(TestLine, { test: hook.last_test, run: `/webhooks/${encodeURIComponent(hook.id)}/test`, api: api }), _jsx(ErrorLine, { error: remove.error })] }));
+    const test = useTest(`/webhooks/${encodeURIComponent(hook.id)}/test`, api);
+    const headers = hook.headers.map((h) => `${h.name}: ${h.value}`).join(' · ');
+    return (_jsx(SettingField, { label: hook.name, info: headers ? `Headers: ${headers}` : undefined, end: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(SettingStatus, { health: settingHealth(true, hook.last_test), title: hook.last_test?.error ?? ago(hook.last_test) }), _jsx(IconButton, { icon: RefreshCwIcon, size: "icon-xs", label: `Test ${hook.name}`, busy: busy, disabled: busy, onClick: () => {
+                        setBusy(true);
+                        void test().finally(() => setBusy(false));
+                    } }), _jsx(LumenConfirm, { title: `Remove ${hook.name}?`, description: `${api.product} stops sending events to this address.`, action: "Remove", onConfirm: () => remove.mutateAsync(), children: _jsx(IconButton, { icon: Trash2Icon, size: "icon-xs", label: `Remove ${hook.name}`, className: "text-loss" }) })] }), children: _jsx(SettingValue, { label: "Address", value: hook.url, mono: true }) }));
 }
-function Webhooks({ hooks, api }) {
+function AddWebhook({ api }) {
+    const [open, setOpen] = useState(false);
     const [name, setName] = useState('');
     const [url, setUrl] = useState('');
     const [headers, setHeaders] = useState([]);
     const setHeader = (i, part, v) => setHeaders((hs) => hs.map((h, j) => (j === i ? { ...h, [part]: v } : h)));
     const filled = headers.filter((h) => h.name.trim() || h.value.trim());
+    const reset = () => {
+        setName('');
+        setUrl('');
+        setHeaders([]);
+        setOpen(false);
+    };
     const add = useMutation({
         mutationFn: () => api.send('POST', '/webhooks', {
             name: name.trim(),
@@ -120,16 +151,23 @@ function Webhooks({ hooks, api }) {
         }),
         onSuccess: (data) => {
             api.set(data);
-            setName('');
-            setUrl('');
-            setHeaders([]);
+            reset();
         },
     });
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-5", children: [_jsxs("p", { className: "text-sm", children: [api.product, " posts each event as JSON to your own addresses: Slack, Discord, Home Assistant, n8n or anything that takes a webhook."] }), hooks.length ? (_jsx(Section, { title: "Your webhooks", children: hooks.map((h) => (_jsx(WebhookRow, { hook: h, api: api }, h.id))) })) : null, _jsx(Section, { title: "Add a webhook", children: _jsxs("form", { className: "grid grid-cols-1 gap-3", onSubmit: (e) => {
-                        e.preventDefault();
-                        if (name.trim() && url.trim())
-                            add.mutate();
-                    }, children: [_jsx(Field, { id: "wh-name", label: "Name", children: _jsx(Input, { id: "wh-name", placeholder: "Discord", value: name, onChange: (e) => setName(e.target.value) }) }), _jsx(Field, { id: "wh-url", label: "Address (https)", children: _jsx(Input, { id: "wh-url", className: "num", autoComplete: "off", placeholder: "https://", value: url, onChange: (e) => setUrl(e.target.value) }) }), headers.length ? (_jsx(Field, { id: "wh-header-0", label: "Headers (sent with each post; hidden once saved)", children: _jsx("div", { className: "grid grid-cols-1 gap-2", children: headers.map((h, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: `wh-header-${i}`, className: "num w-2/5", autoComplete: "off", placeholder: "Authorization", "aria-label": "Header name", value: h.name, onChange: (e) => setHeader(i, 'name', e.target.value) }), _jsx(Input, { className: "num min-w-0 flex-1", type: "password", autoComplete: "off", placeholder: "Value", "aria-label": "Header value", value: h.value, onChange: (e) => setHeader(i, 'value', e.target.value) }), _jsx(IconButton, { type: "button", icon: XIcon, label: "Remove header", onClick: () => setHeaders((hs) => hs.filter((_, j) => j !== i)) })] }, i))) }) })) : null, _jsx(ErrorLine, { error: add.error }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headers.length < 5 ? (_jsx(IconButton, { type: "button", icon: PlusIcon, label: "Add header", variant: "outline", onClick: () => setHeaders((hs) => [...hs, { name: '', value: '' }]) })) : null, _jsx("span", { className: "flex-1" }), _jsxs(Button, { type: "submit", size: "sm", disabled: !name.trim() || !url.trim() || add.isPending, children: [add.isPending ? _jsx(RefreshCwIcon, { className: "animate-spin" }) : _jsx(PlusIcon, {}), "Add"] })] })] }) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Each post is ", _jsx("span", { className: "num", children: '{ event, title, message, click, at }' }), ". Messages name no account, holding or amount. For a Cloudflare Access service token, add the headers CF-Access-Client-Id and CF-Access-Client-Secret."] })] }));
+    if (!open)
+        return (_jsxs("button", { type: "button", className: "flex min-h-10 items-center gap-2 text-sm font-medium", onClick: () => setOpen(true), children: [_jsx(PlusIcon, { className: "size-4" }), "Add webhook"] }));
+    return (_jsxs("form", { className: "grid grid-cols-1", onSubmit: (e) => {
+            e.preventDefault();
+            if (name.trim() && url.trim())
+                add.mutate();
+        }, children: [_jsx(SettingField, { label: "Name", htmlFor: "wh-name", children: _jsx(Input, { id: "wh-name", className: "h-8", placeholder: "Discord", value: name, onChange: (e) => setName(e.target.value) }) }), _jsx(SettingField, { label: "Address", htmlFor: "wh-url", info: `${api.product} posts each event as JSON ({ event, title, message, click, at }) to this https address: Slack, Discord, Home Assistant, n8n or anything that takes a webhook. Messages name no account, holding or amount.`, children: _jsx(Input, { id: "wh-url", className: "num h-8", autoComplete: "off", placeholder: "https://", value: url, onChange: (e) => setUrl(e.target.value) }) }), headers.map((h, i) => (_jsxs(SettingField
+            // biome-ignore lint/suspicious/noArrayIndexKey: rows have no id until saved
+            , { label: `Header ${i + 1}`, htmlFor: `wh-header-${i}`, info: i === 0
+                    ? 'Sent with each post and hidden once saved. For a Cloudflare Access service token, add CF-Access-Client-Id and CF-Access-Client-Secret.'
+                    : undefined, end: _jsx(IconButton, { type: "button", icon: XIcon, size: "icon-xs", label: "Remove header", onClick: () => setHeaders((hs) => hs.filter((_, j) => j !== i)) }), children: [_jsx(Input, { id: `wh-header-${i}`, className: "num h-8 w-2/5", autoComplete: "off", placeholder: "Authorization", "aria-label": "Header name", value: h.name, onChange: (e) => setHeader(i, 'name', e.target.value) }), _jsx(Input, { className: "num h-8 min-w-0 flex-1", type: "password", autoComplete: "off", placeholder: "Value", "aria-label": "Header value", value: h.value, onChange: (e) => setHeader(i, 'value', e.target.value) })] }, i))), _jsxs("div", { className: "mt-1 flex min-h-10 items-center gap-2 border-t pt-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: _jsx(ErrorLine, { error: add.error }) }), headers.length < 5 ? (_jsx(IconButton, { type: "button", icon: PlusIcon, label: "Add header", variant: "outline", onClick: () => setHeaders((hs) => [...hs, { name: '', value: '' }]) })) : null, _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: reset, children: "Cancel" }), _jsxs(Button, { type: "submit", size: "sm", disabled: !name.trim() || !url.trim() || add.isPending, children: [add.isPending ? _jsx(RefreshCwIcon, { className: "animate-spin" }) : _jsx(CheckIcon, {}), "Add"] })] })] }));
+}
+function Webhooks({ hooks, api }) {
+    return (_jsxs(_Fragment, { children: [hooks.map((h) => (_jsx(WebhookRow, { hook: h, api: api }, h.id))), _jsx(AddWebhook, { api: api })] }));
 }
 // ── Events: one row per event, one column per target ──
 function EventCell({ event, target, name, api, }) {
@@ -161,6 +199,18 @@ function Events({ status, api }) {
     }
     return (_jsxs("div", { className: "grid grid-cols-1 gap-2", children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("div", { "aria-label": "Events", className: "grid min-w-max items-center", style: grid, children: [_jsxs("div", { className: "contents", children: [_jsx("span", { className: "pb-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase", children: "Event" }), targets.map((t) => (_jsx("span", { className: "truncate pb-1 text-center text-xs font-semibold tracking-wide text-muted-foreground uppercase", title: t.name, children: t.name }, t.id)))] }), groups.map((g) => (_jsxs("div", { className: "contents", children: [g.label ? (_jsx("span", { className: "border-t pt-3 pb-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase", style: { gridColumn: '1 / -1' }, children: g.label })) : null, g.events.map((e) => (_jsxs("div", { className: "contents", children: [_jsxs("span", { className: "flex min-w-0 items-baseline gap-2 border-t py-2 pr-3", title: `${e.label}: ${e.detail}`, children: [_jsx("span", { className: "truncate text-sm whitespace-nowrap sm:shrink-0", children: e.label }), _jsx("span", { className: "hidden truncate text-xs text-muted-foreground sm:inline", children: e.detail })] }), targets.map((t) => (_jsx("span", { className: "self-stretch border-t py-2", children: _jsx("span", { className: "flex h-full items-center justify-center", children: _jsx(EventCell, { event: e, target: t.id, name: t.name, api: api }) }) }, t.id)))] }, e.key)))] }, g.label ?? '')))] }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "A new target starts with every event on." })] }));
 }
+function Channels({ s, api, open, toggle, }) {
+    const email = useEmail(s.email, api);
+    const ntfy = useNtfy(s.ntfy, api);
+    const testEmail = useTest('/email/test', api);
+    const testNtfy = useTest('/ntfy/test', api);
+    const emailTest = s.email.connected ? s.email.last_test : null;
+    const ntfyTest = s.ntfy.connected ? s.ntfy.last_test : null;
+    const hooksFailed = s.webhooks.filter((h) => h.last_test?.ok === false);
+    return (_jsxs("div", { className: "grid grid-cols-1", children: [ntfy.confirm, _jsx(LumenExpandRow, { icon: _jsx(MailIcon, { className: "size-4 shrink-0 text-muted-foreground" }), name: "Email", meta: s.email.connected ? s.email.address : 'To your sign-in address', open: open === 'email', onOpenChange: toggle('email'), status: _jsx(SettingStatus, { health: settingHealth(s.email.connected, emailTest), title: emailTest?.error ?? ago(emailTest) }), toggle: email.toggle, actions: s.email.connected ? _jsx(SettingActions, { test: emailTest, onTest: testEmail }) : undefined, children: _jsx(EmailBody, { status: s.email, api: api, errors: [email.create.error, email.remove.error] }) }), _jsx(LumenExpandRow, { icon: _jsx(BellIcon, { className: "size-4 shrink-0 text-muted-foreground" }), name: "ntfy", meta: "Phone push through the ntfy app", open: open === 'ntfy', onOpenChange: toggle('ntfy'), status: _jsx(SettingStatus, { health: settingHealth(s.ntfy.connected, ntfyTest), title: ntfyTest?.error ?? ago(ntfyTest) }), toggle: ntfy.toggle, actions: s.ntfy.connected ? _jsx(SettingActions, { test: ntfyTest, onTest: testNtfy }) : undefined, children: _jsx(NtfyBody, { status: s.ntfy, api: api, errors: [ntfy.create.error, ntfy.remove.error] }) }), _jsx(LumenExpandRow, { icon: _jsx(WebhookIcon, { className: "size-4 shrink-0 text-muted-foreground" }), name: "Webhooks", meta: s.webhooks.length
+                    ? s.webhooks.map((h) => h.name).join(' · ')
+                    : 'Events posted to your own addresses', open: open === 'webhooks', onOpenChange: toggle('webhooks'), status: hooksFailed.length ? (_jsx(SettingStatus, { health: "failed", title: hooksFailed.map((h) => h.name).join(', ') })) : s.webhooks.length ? (_jsx(SettingStatus, { count: `${s.webhooks.length} webhook${s.webhooks.length === 1 ? '' : 's'}` })) : (_jsx(SettingStatus, { health: "off" })), children: _jsx(Webhooks, { hooks: s.webhooks, api: api }) })] }));
+}
 /** The Settings ▸ Notifications section's body. */
 export function NotificationsSettings({ api: base, product, sender, parts = 'all', }) {
     const api = useNotifications(base, product, sender);
@@ -173,7 +223,5 @@ export function NotificationsSettings({ api: base, product, sender, parts = 'all
     const s = api.q.data;
     if (parts === 'events')
         return _jsx(Events, { status: s, api: api });
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsxs("div", { className: "grid grid-cols-1", children: [_jsx(IntegrationRow, { name: "Email", meta: "To your sign-in address", open: open === 'email', onOpenChange: toggle('email'), badge: s.email.connected ? (_jsx(TestBadge, { test: s.email.last_test })) : (_jsx(Badge, { variant: "outline", children: "Off" })), children: _jsx(Email, { status: s.email, api: api }) }), _jsx(IntegrationRow, { name: "ntfy", meta: "Phone notifications through the ntfy app", open: open === 'ntfy', onOpenChange: toggle('ntfy'), badge: s.ntfy.connected ? (_jsx(TestBadge, { test: s.ntfy.last_test })) : (_jsx(Badge, { variant: "outline", children: "Off" })), children: _jsx(Ntfy, { status: s.ntfy, api: api }) }), _jsx(IntegrationRow, { name: "Webhooks", meta: s.webhooks.length
-                            ? s.webhooks.map((h) => h.name).join(' · ')
-                            : 'Events posted to your own addresses', open: open === 'webhooks', onOpenChange: toggle('webhooks'), badge: s.webhooks.length ? (s.webhooks.some((h) => h.last_test?.ok === false) ? (_jsxs(Badge, { variant: "outline", className: "text-loss", children: [_jsx(AlertTriangleIcon, {}), "Failed"] })) : (_jsxs(Badge, { variant: "outline", children: [s.webhooks.length, " webhook", s.webhooks.length === 1 ? '' : 's'] }))) : (_jsx(Badge, { variant: "outline", children: "None" })), children: _jsx(Webhooks, { hooks: s.webhooks, api: api }) })] }), parts === 'all' ? (_jsxs("section", { className: "grid grid-cols-1 gap-2", children: [_jsx("h4", { className: "font-medium", children: "Events" }), _jsx(Events, { status: s, api: api })] })) : null] }));
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsx(Channels, { s: s, api: api, open: open, toggle: toggle }), parts === 'all' ? (_jsxs("section", { className: "grid grid-cols-1 gap-2", children: [_jsx("h4", { className: "font-medium", children: "Events" }), _jsx(Events, { status: s, api: api })] })) : null] }));
 }

package/dist/setting-parts.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+import { type KeyTestResult } from './integrations.js';
+/** One setting inside an item: its label, then its control group, then an optional switch at the end. */
+export declare function SettingField({ label, info, htmlFor, end, stack, className, children, }: {
+    /** The setting's own name ("Keys", "Webhook"), never the thing's ("Plaid keys"). */
+    label: string;
+    /** Details behind an (i) beside the label. */
+    info?: ReactNode;
+    htmlFor?: string;
+    /** A switch that turns this one setting on or off, at the row's end. */
+    end?: ReactNode;
+    /** On a phone, put the label (and `end`) above the control so a long value stays readable. */
+    stack?: boolean;
+    className?: string;
+    /** The control: an input, a picker, a `SettingValue`, a ToggleGroup. Its own buttons sit inside it. */
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** A value read in place: cut to one line with the full text on hover, with Copy and Replace inside. */
+export declare function SettingValue({ value, label, mono, copy, onReplace, replaceLabel, }: {
+    value: string;
+    /** The value's name for Copy's and Replace's accessible names. */
+    label: string;
+    mono?: boolean;
+    copy?: boolean;
+    onReplace?: () => void;
+    replaceLabel?: string;
+}): import("react").JSX.Element;
+/** The five words a thing's status takes: Works, Failed, Not tested, Off, or a count. */
+export type SettingHealth = 'works' | 'failed' | 'untested' | 'off';
+/** Where a thing stands from its switch and last test. */
+export declare function settingHealth(on: boolean, test: {
+    ok: boolean;
+} | null | undefined): SettingHealth;
+/** A section's health from its things: the worst one wins (Failed, then Not tested, then Works); Off when none is on. */
+export declare function sectionHealth(items: SettingHealth[]): SettingHealth | null;
+/** The status pill in a thing's header (or a section's title). Hover tells when and what. */
+export declare function SettingStatus({ health, count, title, dot, }: {
+    health?: SettingHealth | null;
+    /** A count instead of a state ("2 hooks"). */
+    count?: string;
+    /** What hover shows: the last test's time and detail, or which items are failing. */
+    title?: string;
+    /** Only the dot, for the Settings sidebar. */
+    dot?: boolean;
+}): import("react").JSX.Element | null;
+/** The thing's action bar: its last result on the left, then any `children`, Test and Remove. */
+export declare function SettingActions({ test, onTest, remove, children, }: {
+    /** The last test; its time shows, and its detail or error on hover. */
+    test?: KeyTestResult | null;
+    /** Runs the test; the app refreshes its own data when it settles. */
+    onTest?: () => Promise<unknown>;
+    /** Removes the thing (its keys, its sign-in): a trash icon that confirms first. */
+    remove?: {
+        label: string;
+        title?: ReactNode;
+        description?: ReactNode;
+        action?: string;
+        run: () => unknown;
+    };
+    /** Other actions on the whole thing (Sync now, Sign in again), icon first. */
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/setting-parts.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Settings parts: the three slots every thing in a Settings section is built from (docs/parts/settings.md).
+// Header: LumenExpandRow's icon, name, summary, `status` pill, `toggle` for the whole thing, chevron.
+// Rows: `SettingField`, one setting each: a short label right beside its control group, a switch for
+// that one setting at the row's end (`end`). Values a person reads or copies are `SettingValue`.
+// Action bar: `SettingActions`, the last result, Test and Remove (trash, confirms) for the whole thing.
+// A row is never a lone button ("Last test", "Remove keys"), and a label never repeats the thing's name.
+// Built on shadcn's Field and InputGroup parts.
+import { AlertTriangleIcon, CheckIcon, CopyIcon, PencilIcon, RefreshCwIcon, Trash2Icon, } from 'lucide-react';
+import { useState } from 'react';
+import { LumenConfirm } from './confirm.js';
+import { IconButton } from './icon-button.js';
+import { InfoTip } from './info-tip.js';
+import { errorText, useClock } from './integrations.js';
+import { cn } from './lib/utils.js';
+import { Badge } from './ui/badge.js';
+import { InputGroup, InputGroupAddon, InputGroupButton } from './ui/input-group.js';
+import { Label } from './ui/label.js';
+/** One setting inside an item: its label, then its control group, then an optional switch at the end. */
+export function SettingField({ label, info, htmlFor, end, stack = false, className, children, }) {
+    return (_jsxs("div", { "data-slot": "setting-field", "data-stack": stack || undefined, className: cn('flex min-h-10 min-w-0 items-center gap-3 border-b border-border/60 py-1.5 last:border-b-0', stack && 'max-sm:flex-wrap max-sm:gap-y-1.5', className), children: [_jsxs("div", { className: cn('flex w-32 shrink-0 items-center gap-1.5 max-sm:w-24', stack && 'max-sm:w-auto max-sm:flex-1'), children: [_jsx(Label, { htmlFor: htmlFor, className: "truncate font-normal text-muted-foreground", title: label, children: label }), info && _jsx(InfoTip, { label: `About ${label}`, children: info })] }), children !== undefined && (_jsx("div", { className: cn('flex min-w-0 max-w-md flex-1 items-center gap-2', stack && 'max-sm:order-2 max-sm:max-w-none max-sm:basis-full'), children: children })), end && _jsx("div", { className: cn('ml-auto shrink-0', stack && 'max-sm:order-1'), children: end })] }));
+}
+/** A value read in place: cut to one line with the full text on hover, with Copy and Replace inside. */
+export function SettingValue({ value, label, mono = false, copy = false, onReplace, replaceLabel = 'Replace', }) {
+    const [copied, setCopied] = useState(false);
+    const doCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    return (_jsxs(InputGroup, { className: "h-8 min-w-0", children: [_jsx("span", { className: cn('min-w-0 flex-1 truncate px-2.5 text-sm', mono && 'font-code text-xs'), title: value, children: value }), (copy || onReplace) && (_jsxs(InputGroupAddon, { align: "inline-end", children: [copy && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": copied ? 'Copied' : `Copy ${label.toLowerCase()}`, title: copied ? 'Copied' : `Copy ${label.toLowerCase()}`, onClick: () => void doCopy(), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) })), onReplace && (_jsx(InputGroupButton, { size: "icon-xs", "aria-label": `${replaceLabel} ${label.toLowerCase()}`, title: `${replaceLabel} ${label.toLowerCase()}`, onClick: onReplace, children: _jsx(PencilIcon, {}) }))] }))] }));
+}
+/** Where a thing stands from its switch and last test. */
+export function settingHealth(on, test) {
+    if (!on)
+        return 'off';
+    if (!test)
+        return 'untested';
+    return test.ok ? 'works' : 'failed';
+}
+/** A section's health from its things: the worst one wins (Failed, then Not tested, then Works); Off when none is on. */
+export function sectionHealth(items) {
+    if (!items.length)
+        return null;
+    for (const h of ['failed', 'untested', 'works'])
+        if (items.includes(h))
+            return h;
+    return 'off';
+}
+const HEALTH = {
+    works: { word: 'Works', cls: 'text-gain' },
+    failed: { word: 'Failed', cls: 'text-loss' },
+    untested: { word: 'Not tested', cls: 'text-muted-foreground' },
+    off: { word: 'Off', cls: 'text-muted-foreground' },
+};
+/** The status pill in a thing's header (or a section's title). Hover tells when and what. */
+export function SettingStatus({ health, count, title, dot = false, }) {
+    if (count !== undefined)
+        return (_jsx(Badge, { variant: "outline", className: "shrink-0", title: title, children: count }));
+    if (!health)
+        return null;
+    const h = HEALTH[health];
+    const mark = (_jsx("span", { "aria-hidden": true, className: cn('size-1.5 shrink-0 rounded-full', health === 'works' && 'bg-gain', health === 'failed' && 'bg-loss', (health === 'untested' || health === 'off') && 'border border-muted-foreground') }));
+    if (dot)
+        return (_jsx("span", { className: "ml-auto flex items-center", title: title ?? h.word, "aria-label": h.word, children: mark }));
+    return (_jsxs(Badge, { variant: "outline", className: cn('shrink-0 gap-1.5', h.cls), title: title, children: [mark, h.word] }));
+}
+/** The thing's action bar: its last result on the left, then any `children`, Test and Remove. */
+export function SettingActions({ test, onTest, remove, children, }) {
+    const clock = useClock();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const go = async () => {
+        if (!onTest)
+            return;
+        setPending(true);
+        setError(null);
+        try {
+            await onTest();
+        }
+        catch (e) {
+            setError(e);
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    const failed = error ? errorText(error) : test && !test.ok ? (test.error ?? 'Failed') : null;
+    return (_jsxs("div", { "data-slot": "setting-actions", className: "mt-1 flex min-h-10 min-w-0 items-center gap-2 border-t pt-2 text-sm", children: [_jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: pending ? (_jsx("span", { className: "text-muted-foreground", children: "Testing\u2026" })) : failed ? (_jsxs("span", { role: "alert", className: "flex min-w-0 items-center gap-1.5 text-loss", title: failed, children: [_jsx(AlertTriangleIcon, { className: "size-4 shrink-0" }), _jsx("span", { className: "truncate", children: failed })] })) : test ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-gain", title: test.detail ?? undefined, children: [_jsx(CheckIcon, { className: "size-4 shrink-0" }), _jsxs("span", { className: "truncate", children: ["Tested ", clock(test.at)] })] })) : onTest ? (_jsx("span", { className: "text-muted-foreground", children: "Not tested yet" })) : null }), children, onTest && (_jsx(IconButton, { icon: RefreshCwIcon, busy: pending, label: pending ? 'Testing…' : 'Test', variant: "outline", disabled: pending, onClick: () => void go() })), remove && (_jsx(LumenConfirm, { title: remove.title ?? `${remove.label}?`, description: remove.description, action: remove.action ?? 'Remove', onConfirm: remove.run, children: _jsx(IconButton, { icon: Trash2Icon, label: remove.label, variant: "outline", className: "text-loss" }) }))] }));
+}

package/dist/settings.d.ts

@@ -1,5 +1,6 @@
 import { SunIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
+import { type SettingHealth } from './setting-parts.js';
 /** A section an app adds to Settings, listed under the app's name. */
 export interface SettingsSectionDef {
     id: string;
@@ -12,6 +13,10 @@ export interface SettingsSectionDef {
     /** What the section's footer holds (a status line, Revert and Save). The footer is pinned under
      *  every section, empty when it has nothing; `SettingsFooter` fills it too. */
     footer?: ReactNode;
+    /** The section's state from its things (`sectionHealth`): a pill by the title, a dot in the list. */
+    health?: SettingHealth | null;
+    /** What hovering the section's pill says (which thing failed). */
+    healthTitle?: string;
 }
 /** A labelled group of sections in Settings: one per app when a product shows several apps' settings together. */
 export interface SettingsGroupDef {

package/dist/settings.js

@@ -13,6 +13,7 @@ import { useAssistantMoves } from './assistant-screen.js';
 import { InfoTip } from './info-tip.js';
 import { LumenSelector } from './lumen-selector.js';
 import { FONTS, FONT_SIZES, setPref, usePrefs, } from './prefs.js';
+import { SettingStatus } from './setting-parts.js';
 import { TimeZoneSelect } from './status.js';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from './ui/dialog.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
@@ -171,7 +172,7 @@ export function LumenSettings({ open, section, onOpen, onClose, appLabel, profil
         ...(sections.length ? [{ label: appLabel, items: sections.filter(shown) }] : []),
     ].filter((g) => g.items.length);
     const search = (_jsxs(InputGroup, { className: "bg-background", children: [_jsx(InputGroupAddon, { children: _jsx(SearchIcon, {}) }), _jsx(InputGroupInput, { type: "search", className: "[&::-webkit-search-cancel-button]:hidden", "aria-label": "Search settings", placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value) }), query && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": "Clear search", onClick: () => setQuery(''), children: _jsx(XIcon, {}) }) }))] }));
-    const header = (s, slot) => (_jsxs("div", { className: "flex items-end gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("h3", { id: `settings-${s.id}-title`, className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(s.icon, { className: "size-4 text-muted-foreground" }), s.title] }), s.description && (_jsx("p", { className: "truncate text-sm text-muted-foreground", title: typeof s.description === 'string' ? s.description : undefined, children: s.description }))] }), _jsx("div", { ref: slot, className: "flex shrink-0 items-center gap-2 empty:hidden" })] }));
+    const header = (s, slot) => (_jsxs("div", { className: "flex items-end gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("h3", { id: `settings-${s.id}-title`, className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(s.icon, { className: "size-4 text-muted-foreground" }), s.title, s.health && _jsx(SettingStatus, { health: s.health, title: s.healthTitle })] }), s.description && (_jsx("p", { className: "truncate text-sm text-muted-foreground", title: typeof s.description === 'string' ? s.description : undefined, children: s.description }))] }), _jsx("div", { ref: slot, className: "flex shrink-0 items-center gap-2 empty:hidden" })] }));
     return (_jsx(Dialog, { open: open, onOpenChange: (o) => {
             if (o)
                 onOpen(section);
@@ -186,7 +187,7 @@ export function LumenSettings({ open, section, onOpen, onClose, appLabel, profil
                     e.preventDefault();
                     setQuery('');
                 }
-            }, className: "flex h-[min(720px,calc(100svh-2rem))] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl md:flex-row", children: [_jsx(DialogTitle, { className: "sr-only", children: "Settings" }), _jsx(DialogDescription, { className: "sr-only", children: "Your preferences and this desk's settings." }), _jsxs("nav", { "aria-label": "Settings sections", className: "hidden min-h-0 w-56 shrink-0 flex-col border-r bg-sidebar pt-2 md:flex", children: [_jsx("div", { className: "shrink-0 px-2 pt-1 pb-1", children: search }), _jsx("div", { ref: navList, "data-slot": "settings-nav-list", className: "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain pb-2 *:shrink-0", children: navGroups.map((g) => (_jsxs(SidebarGroup, { className: "py-1", children: [_jsx(SidebarGroupLabel, { children: g.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: g.items.map((s) => (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: !q && s.id === current.id, className: s.sub ? 'pl-7' : undefined, onClick: () => go(s.id), children: [_jsx(s.icon, {}), _jsx("span", { children: s.title })] }) }, s.id))) }) })] }, g.label))) })] }), _jsxs("div", { className: "flex flex-col gap-2 border-b p-3 pr-12 md:hidden", children: [search, !q && (_jsx(LumenSelector, { label: "Settings section", className: "w-full", groups: navGroups.map((g) => ({
+            }, className: "flex h-[min(720px,calc(100svh-2rem))] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl md:flex-row", children: [_jsx(DialogTitle, { className: "sr-only", children: "Settings" }), _jsx(DialogDescription, { className: "sr-only", children: "Your preferences and this desk's settings." }), _jsxs("nav", { "aria-label": "Settings sections", className: "hidden min-h-0 w-56 shrink-0 flex-col border-r bg-sidebar pt-2 md:flex", children: [_jsx("div", { className: "shrink-0 px-2 pt-1 pb-1", children: search }), _jsx("div", { ref: navList, "data-slot": "settings-nav-list", className: "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain pb-2 *:shrink-0", children: navGroups.map((g) => (_jsxs(SidebarGroup, { className: "py-1", children: [_jsx(SidebarGroupLabel, { children: g.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: g.items.map((s) => (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: !q && s.id === current.id, className: s.sub ? 'pl-7' : undefined, onClick: () => go(s.id), children: [_jsx(s.icon, {}), _jsx("span", { children: s.title }), s.health && s.health !== 'off' && (_jsx(SettingStatus, { health: s.health, title: s.healthTitle, dot: true }))] }) }, s.id))) }) })] }, g.label))) })] }), _jsxs("div", { className: "flex flex-col gap-2 border-b p-3 pr-12 md:hidden", children: [search, !q && (_jsx(LumenSelector, { label: "Settings section", className: "w-full", groups: navGroups.map((g) => ({
                                 label: g.label,
                                 options: g.items.map((s) => ({
                                     value: s.id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.182",
+  "version": "0.1.184",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.182",
+    "@columenlabs/lumen-ui-types": "0.1.184",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",