@columenlabs/lumen-ui 0.1.64 → 0.1.66

package/dist/people/lumen-people.js

@@ -0,0 +1,248 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LumenPeople: who may sign in, what each person may open, invites and the audit log, as one block
+// an app drops in with an adapter (`peopleClient(url)` over `@columenlabs/lumen-people`'s routes).
+import { levelLabel, levelOf, levelsOf, } from '@columenlabs/lumen-ui-types/people';
+import { AppWindowIcon, BanIcon, CircleDotIcon, ClockIcon, HistoryIcon, KeyRoundIcon, MailIcon, ShieldCheckIcon, Trash2Icon, TriangleAlertIcon, UserPlusIcon, UserRoundIcon, UsersIcon, XIcon, } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { LumenConfirm } from '../confirm.js';
+import { LumenBoundary } from '../lumen-boundary.js';
+import { LumenLayout } from '../lumen-layout.js';
+import { LumenPageState } from '../lumen-page-state.js';
+import { LumenSelector } from '../lumen-selector.js';
+import { useLumenLoad } from '../lumen-source.js';
+import { LumenTabs } from '../lumen-tabs.js';
+import { NoteLine } from '../note-line.js';
+import { Tile, TileRow } from '../tile.js';
+import { Button } from '../ui/button.js';
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '../ui/empty.js';
+import { InviteDrawer } from './invite-drawer.js';
+import { PersonDrawer } from './person-drawer.js';
+import { AuditSection, InvitesSection, PermissionsSection } from './sections.js';
+import { LevelPicker, STATUS_LABEL, fromNow, peopleView, scopeKey, statusTone, topScopes, usePeopleAction, usePeopleQuery, useVisitView, when, withGrant, } from './shared.js';
+export function LumenPeople({ adapter, crumbs = [], section: given, onSection, onSetUpMail, fields = [], }) {
+    const [own, setOwn] = useState('people');
+    const section = given ?? own;
+    const go = (s) => (onSection ? onSection(s) : setOwn(s));
+    const q = usePeopleQuery(adapter);
+    const [inviting, setInviting] = useState(false);
+    const titles = {
+        people: 'People',
+        invites: 'Invites',
+        permissions: 'Permissions',
+        audit: 'Audit log',
+    };
+    if (!q.data)
+        return (_jsx(LumenPageState, { crumbs: [...crumbs, { label: titles[section] }], title: titles[section], icon: UsersIcon, query: q }));
+    const view = q.data;
+    const pending = view.people.filter((p) => p.status === 'invited' || p.status === 'expired');
+    const tabs = [
+        { value: 'people', label: 'People', icon: UsersIcon },
+        {
+            value: 'invites',
+            label: 'Invites',
+            icon: MailIcon,
+            after: pending.length ? (_jsx("span", { className: "num text-muted-foreground", children: pending.length })) : undefined,
+        },
+        { value: 'permissions', label: 'Permissions', icon: KeyRoundIcon },
+        { value: 'audit', label: 'Audit log', icon: HistoryIcon, hidden: !adapter.audit },
+    ];
+    const frame = {
+        adapter,
+        view,
+        crumbs: [...crumbs, { label: titles[section] }],
+        tabs: onSection ? null : _jsx(LumenTabs, { tabs: tabs, value: section, onChange: go }),
+        mailNote: view.mail.configured ? null : (_jsx(NoteLine, { icon: TriangleAlertIcon, title: "Email is not set up.", note: "You can still invite: each invite gives you a link to send yourself.", action: onSetUpMail && (_jsx(Button, { size: "sm", variant: "outline", onClick: onSetUpMail, children: "Set up email" })) })),
+        invite: (_jsxs(Button, { size: "sm", onClick: () => setInviting(true), children: [_jsx(UserPlusIcon, {}), " Invite people"] })),
+    };
+    return (_jsxs(_Fragment, { children: [section === 'people' && (_jsx(PeopleList, { frame: frame, fields: fields, onInvite: () => setInviting(true) })), section === 'invites' && _jsx(InvitesSection, { frame: frame }), section === 'permissions' && _jsx(PermissionsSection, { frame: frame }), section === 'audit' && _jsx(AuditSection, { frame: frame }), _jsx(LumenBoundary, { where: "people-invite", what: "panel", children: _jsx(InviteDrawer, { adapter: adapter, view: view, open: inviting, onClose: () => setInviting(false), onSetUpMail: onSetUpMail }) })] }));
+}
+const LIST_VIEW = (scopes, extra) => peopleView('People', {
+    columns: [
+        'name',
+        'email',
+        'role',
+        'status',
+        ...topScopes(scopes).map(scopeKey),
+        ...extra,
+        'last',
+    ],
+    chips: [{ key: 'status' }, { key: 'role' }],
+    filters: { fields: ['role', 'status'], default: [] },
+    group: { fields: ['role', 'status'], default: null },
+    pagination: { on: true, size: 50 },
+    total: false,
+    cards: [{ id: 'people', kind: 'table', w: 6, title: null }],
+});
+function PeopleList({ frame, fields, onInvite, }) {
+    const { adapter, view } = frame;
+    const q = usePeopleQuery(adapter);
+    const load = useLumenLoad(q);
+    const act = usePeopleAction(adapter);
+    const layout = useVisitView(useMemo(() => LIST_VIEW(view.scopes, fields.map((f) => f.key)), [view.scopes, fields]));
+    const [openId, setOpenId] = useState(null);
+    const [picked, setPicked] = useState(new Set());
+    const people = view.people;
+    const open = people.find((p) => p.id === openId) ?? null;
+    const setLevel = (p, s, level) => {
+        const before = p.grants;
+        void act(() => adapter.setAccess(p.id, withGrant(before, s, level)), `${s.name}: ${levelLabel(s, level)} for ${p.name || p.email}`, () => adapter.setAccess(p.id, before));
+    };
+    const domain = {
+        id: 'people',
+        rowKey: (p) => p.id,
+        text: (p) => [p.email, p.name],
+        fields: [
+            {
+                key: 'name',
+                label: 'Name',
+                icon: UserRoundIcon,
+                value: (p) => p.name || p.email,
+                format: 'text',
+            },
+            {
+                key: 'email',
+                label: 'Email',
+                icon: MailIcon,
+                value: (p) => p.email,
+                format: 'text',
+                maxWidth: '16rem',
+            },
+            {
+                key: 'role',
+                label: 'Role',
+                icon: ShieldCheckIcon,
+                value: (p) => (p.role === 'admin' ? 'Admin' : 'Member'),
+                tone: (p) => (p.role === 'admin' ? 'sky' : undefined),
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            {
+                key: 'status',
+                label: 'Status',
+                icon: CircleDotIcon,
+                value: (p) => STATUS_LABEL[p.status],
+                tone: statusTone,
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            ...topScopes(view.scopes).map((s) => ({
+                key: scopeKey(s),
+                label: s.name,
+                icon: AppWindowIcon,
+                value: (p) => levelLabel(s, levelOf(p, s, view.scopes)),
+                render: (p) => (_jsx(LevelPicker, { person: p, scope: s, scopes: view.scopes, onPick: (l) => setLevel(p, s, l) })),
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            })),
+            ...fields,
+            {
+                key: 'invited_by',
+                label: 'Invited by',
+                icon: UserPlusIcon,
+                value: (p) => p.invitedBy ?? '—',
+                format: 'text',
+            },
+            {
+                key: 'expires',
+                label: 'Invite expires',
+                icon: ClockIcon,
+                value: (p) => (p.status === 'invited' ? fromNow(p.expiresAt) : '—'),
+                format: 'text',
+            },
+            {
+                key: 'last',
+                label: 'Last seen',
+                icon: ClockIcon,
+                value: (p) => when(p.lastSeen),
+                format: 'text',
+            },
+        ],
+    };
+    const admins = people.filter((p) => p.role === 'admin' && p.status === 'active');
+    const expired = people.filter((p) => p.status === 'expired').length;
+    const invited = people.filter((p) => p.status === 'invited').length;
+    const active = people.filter((p) => p.status === 'active').length;
+    const disabled = people.filter((p) => p.status === 'disabled').length;
+    const onlyMe = people.length <= 1;
+    return (_jsxs(_Fragment, { children: [_jsx(LumenLayout, { crumbs: frame.crumbs, actions: frame.invite, intro: _jsxs("div", { className: "flex flex-col gap-3", children: [frame.tabs, _jsxs(TileRow, { fill: true, "aria-label": "People at a glance", children: [_jsx(Tile, { label: "People", value: people.length, caption: `${active} active${disabled ? ` · ${disabled} disabled` : ''}` }), _jsx(Tile, { label: "Admins", value: admins.length, caption: "at least 1 always kept" }), _jsx(Tile, { label: "Invites pending", value: invited, caption: expired ? `${expired} expired` : 'none expired' }), view.sync ? (_jsx(Tile, { label: "Sign-in sync", value: view.sync.ok ? 'Synced' : 'Out of step', caption: view.sync.at ? when(view.sync.at) : view.sync.detail, valueClassName: view.sync.ok ? undefined : 'text-loss' })) : (_jsx(Tile, { label: "Email", value: view.mail.configured ? 'Working' : 'Not set up', caption: view.mail.from ?? 'links only' }))] }), frame.mailNote, picked.size > 0 && (_jsx(BulkBar, { frame: frame, ids: [...picked], onClear: () => setPicked(new Set()) }))] }), domain: domain, ...layout, rows: people, load: load, state: onlyMe ? _jsx(FirstRun, { mail: view.mail.configured, onInvite: onInvite }) : undefined, selection: { keys: picked, onChange: setPicked }, rowTitle: (p) => p.name || p.email, onOpen: (p) => setOpenId(p.id) }), _jsx(LumenBoundary, { where: "people-person", what: "panel", children: _jsx(PersonDrawer, { adapter: adapter, view: view, person: open, onClose: () => setOpenId(null) }) })] }));
+}
+/** One change over the ticked people. Apply clears the selection; Undo puts the change back. */
+function BulkBar({ frame, ids, onClear, }) {
+    const { adapter, view } = frame;
+    const act = usePeopleAction(adapter);
+    const [removing, setRemoving] = useState(false);
+    const chosen = view.people.filter((p) => ids.includes(p.id));
+    const invites = chosen.filter((p) => p.status === 'invited' || p.status === 'expired');
+    const n = chosen.length;
+    const many = (k) => (k === 1 ? '1 person' : `${k} people`);
+    /** A role, status, resend or remove over many: the adapter's bulk call, else one by one. */
+    const each = async (op, list) => {
+        if (adapter.bulk) {
+            const r = await adapter.bulk(list.map((p) => p.id), op);
+            if (r.failed.length)
+                throw new Error(`${r.failed.length} not changed: ${r.failed[0]?.error}`);
+            return r;
+        }
+        for (const p of list) {
+            if (op.op === 'role')
+                await adapter.update(p.id, { role: op.role });
+            else if (op.op === 'status')
+                await adapter.update(p.id, { status: op.status });
+            else if (op.op === 'resend')
+                await adapter.resend(p.id);
+            else if (op.op === 'remove')
+                await adapter.remove(p.id);
+        }
+        return {};
+    };
+    const levelOptions = topScopes(view.scopes).flatMap((s) => levelsOf(s).map((l) => ({
+        value: `${s.id}\u0001${l.id}`,
+        label: l.label,
+        group: s.name,
+        description: l.description,
+    })));
+    const setLevel = (pick) => {
+        const [sid, level] = pick.split('\u0001');
+        const s = view.scopes.find((x) => x.id === sid);
+        if (!s || !level)
+            return;
+        const members = chosen.filter((p) => p.role !== 'admin');
+        const before = new Map(members.map((p) => [p.id, p.grants]));
+        onClear();
+        void act(async () => {
+            for (const p of members)
+                await adapter.setAccess(p.id, withGrant(p.grants, s, level));
+            return undefined;
+        }, `${s.name}: ${levelLabel(s, level)} for ${many(members.length)}`, async () => {
+            for (const [id, g] of before)
+                await adapter.setAccess(id, g);
+        });
+    };
+    const setRole = (role) => {
+        const list = chosen.filter((p) => p.role !== role);
+        onClear();
+        void act(() => each({ op: 'role', role }, list), `${many(list.length)} made ${role === 'admin' ? 'admin' : 'member'}`, () => each({ op: 'role', role: role === 'admin' ? 'member' : 'admin' }, list));
+    };
+    const disable = () => {
+        const list = chosen.filter((p) => p.status === 'active');
+        onClear();
+        void act(() => each({ op: 'status', status: 'disabled' }, list), `${many(list.length)} disabled`, () => each({ op: 'status', status: 'active' }, list));
+    };
+    return (_jsxs("div", { role: "toolbar", "aria-label": "Change the ticked people", className: "flex flex-wrap items-center gap-2 rounded-lg border bg-muted px-3 py-2 text-sm", children: [_jsxs("span", { className: "num font-medium", children: [n, " selected"] }), _jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Set level on\u2026", placeholder: "Set level on\u2026", value: null, options: levelOptions, onChange: setLevel }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => setRole('admin'), children: [_jsx(ShieldCheckIcon, {}), " Make admin"] }), invites.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                    onClear();
+                    void act(() => each({ op: 'resend' }, invites), `New invites sent to ${many(invites.length)}`);
+                }, children: [_jsx(MailIcon, {}), " Resend invites"] })), _jsxs(Button, { size: "sm", variant: "outline", onClick: disable, children: [_jsx(BanIcon, {}), " Disable"] }), _jsxs(Button, { size: "sm", variant: "outline", className: "text-destructive", onClick: () => setRemoving(true), children: [_jsx(Trash2Icon, {}), " Remove"] }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": "Clear the selection", className: "ml-auto", onClick: onClear, children: _jsx(XIcon, {}) }), _jsx(LumenConfirm, { open: removing, onOpenChange: setRemoving, title: `Remove ${many(n)}?`, description: "Each part of the app deletes their data first, then they leave People. This cannot be undone.", typeToConfirm: "REMOVE", action: "Remove for good", busyAction: "Removing\u2026", onConfirm: async () => {
+                    const r = await act(() => each({ op: 'remove' }, chosen), `Removed ${many(n)}`);
+                    if (!r)
+                        throw new Error('Some people were not removed.');
+                    setRemoving(false);
+                    onClear();
+                } })] }));
+}
+/** Only the admin so far: what to do first. */
+function FirstRun({ mail, onInvite }) {
+    return (_jsxs(Empty, { children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(UsersIcon, {}) }), _jsx(EmptyTitle, { children: "It\u2019s just you so far" }), _jsxs(EmptyDescription, { children: ["Invite people and pick what each one can open. You can change it any time.", mail ? '' : ' Without email set up, each invite gives you a link to send.'] })] }), _jsx(EmptyContent, { children: _jsxs(Button, { size: "sm", onClick: onInvite, children: [_jsx(UserPlusIcon, {}), " Invite people"] }) })] }));
+}

package/dist/people/person-drawer.d.ts

@@ -0,0 +1,8 @@
+import { type PeopleView, type Person } from '@columenlabs/lumen-ui-types/people';
+import type { PeopleAdapter } from './client.js';
+export declare function PersonDrawer({ adapter, view, person, onClose, }: {
+    adapter: PeopleAdapter;
+    view: PeopleView;
+    person: Person | null;
+    onClose: () => void;
+}): import("react").JSX.Element;

package/dist/people/person-drawer.js

@@ -0,0 +1,109 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// One person: their access per scope, role, sign-in, recent activity and the danger zone.
+import { levelLabel, levelOf, levelsOf, } from '@columenlabs/lumen-ui-types/people';
+import { useQuery } from '@tanstack/react-query';
+import { AppWindowIcon, BanIcon, HistoryIcon, KeyRoundIcon, MailIcon, ShieldCheckIcon, Trash2Icon, TriangleAlertIcon, XIcon, } from 'lucide-react';
+import { useState } from 'react';
+import { LumenConfirm } from '../confirm.js';
+import { DrawerSection } from '../drawer-section.js';
+import { InfoLabel, InfoTip } from '../info-tip.js';
+import { errorText } from '../integrations.js';
+import { LumenDrawer } from '../lumen-drawer.js';
+import { LumenSelector } from '../lumen-selector.js';
+import { NoteLine } from '../note-line.js';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { LevelPicker, STATUS_LABEL, adminGuard, fromNow, topScopes, usePeopleAction, when, withGrant, } from './shared.js';
+const ROLES = [
+    { value: 'member', label: 'Member', description: 'Only the levels set per scope' },
+    { value: 'admin', label: 'Admin', description: 'Top level everywhere, and manages People' },
+];
+export function PersonDrawer({ adapter, view, person, onClose, }) {
+    const act = usePeopleAction(adapter);
+    const p = person;
+    const guard = p ? adminGuard(view.people, p, view.fixedAdmins) : null;
+    const pending = p?.status === 'invited' || p?.status === 'expired';
+    const who = p ? p.name || p.email : '';
+    const setLevel = (scopeId, level, resource) => {
+        if (!p)
+            return;
+        const scope = view.scopes.find((s) => s.id === scopeId);
+        if (!scope)
+            return;
+        const before = p.grants;
+        const next = withGrant(before, scope, level, resource);
+        void act(() => adapter.setAccess(p.id, next), `${scope.name}: ${levelLabel(scope, level)} for ${who}`, () => adapter.setAccess(p.id, before));
+    };
+    return (_jsx(LumenDrawer, { open: !!p, onClose: onClose, title: who, description: p ? `${p.email} · ${STATUS_LABEL[p.status]} · invited ${when(p.invitedAt)}` : undefined, footer: p && pending ? (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => act(() => adapter.revoke(p.id), `Revoked the invite for ${p.email}`).then((r) => r && onClose()), children: [_jsx(XIcon, {}), " Revoke"] }), _jsxs(Button, { size: "sm", onClick: () => act(() => adapter.resend(p.id), `New invite sent to ${p.email}`), children: [_jsx(MailIcon, {}), " Resend invite"] })] })) : undefined, children: p && (_jsxs(_Fragment, { children: [_jsx(AccessSection, { adapter: adapter, view: view, person: p, onLevel: setLevel }), _jsxs(DrawerSection, { icon: ShieldCheckIcon, title: "Role", defaultOpen: true, children: [_jsxs("div", { className: "flex items-center justify-between gap-3 py-1 text-sm", children: [_jsx(InfoLabel, { info: "Admins hold the top level on every scope and manage People. One active admin is always kept.", children: "Role" }), _jsx(LumenSelector, { trigger: "chip", size: "sm", label: `Role of ${who}`, disabled: !!guard && p.role === 'admin', value: p.role, options: ROLES, onChange: (role) => role !== p.role &&
+                                        void act(() => adapter.update(p.id, { role }), `${who} is now ${role === 'admin' ? 'an admin' : 'a member'}`, () => adapter.update(p.id, { role: p.role })) })] }), guard && p.role === 'admin' && _jsx(NoteLine, { icon: ShieldCheckIcon, title: guard })] }), _jsx(DrawerSection, { icon: KeyRoundIcon, title: "Sign-in", defaultOpen: true, children: _jsxs("dl", { className: "grid grid-cols-2 gap-x-3 gap-y-1.5 text-sm", children: [_jsx("dt", { className: "text-muted-foreground", children: "Last seen" }), _jsx("dd", { children: when(p.lastSeen) }), _jsx("dt", { className: "text-muted-foreground", children: "Invited by" }), _jsx("dd", { className: "truncate", children: p.invitedBy ?? '—' }), pending && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Invite" }), _jsx("dd", { children: p.status === 'expired'
+                                            ? `expired ${when(p.expiresAt)}`
+                                            : `expires ${fromNow(p.expiresAt)}` })] })), view.sync && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Sign-in provider" }), _jsxs("dd", { children: [view.sync.ok ? 'Synced' : 'Out of step', " \u00B7 ", when(view.sync.at)] })] }))] }) }), adapter.audit && _jsx(ActivitySection, { adapter: adapter, person: p }), _jsx(DangerSection, { adapter: adapter, person: p, guard: guard, onGone: onClose })] })) }));
+}
+/** Each app's level, then the person's grants on constructs inside it. */
+function AccessSection({ adapter, view, person: p, onLevel, }) {
+    const tops = topScopes(view.scopes);
+    const low = (id) => levelsOf(view.scopes.find((s) => s.id === id))[0]?.id;
+    const open = tops.filter((s) => levelOf(p, s, view.scopes) !== low(s.id)).length;
+    return (_jsx(DrawerSection, { icon: AppWindowIcon, title: "Access", hint: `${open} of ${tops.length}`, defaultOpen: true, children: _jsx("ul", { className: "flex flex-col gap-2 text-sm", children: tops.map((s) => {
+                const kids = view.scopes.filter((c) => c.parent === s.id);
+                return (_jsxs("li", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [s.name, _jsx(LevelPicker, { person: p, scope: s, scopes: view.scopes, onPick: (l) => onLevel(s.id, l) })] }), kids.map((k) => (_jsx(ResourceGrants, { adapter: adapter, view: view, person: p, scopeId: k.id, onLevel: onLevel }, k.id)))] }, s.id));
+            }) }) }));
+}
+/** The person's grants on one construct (Collections inside Recipes), and + Grant on another. */
+function ResourceGrants({ adapter, view, person: p, scopeId, onLevel, }) {
+    const scope = view.scopes.find((s) => s.id === scopeId);
+    const [adding, setAdding] = useState(false);
+    const list = useQuery({
+        queryKey: ['lumen-people', adapter.key, 'resources', scopeId],
+        queryFn: () => adapter.resources?.(scopeId) ?? Promise.resolve([]),
+        enabled: !!adapter.resources && adding,
+    });
+    if (!scope)
+        return null;
+    const held = p.grants.filter((g) => g.scope === scopeId && g.resource);
+    const name = (id) => list.data?.find((r) => r.id === id)?.name ?? id;
+    const noun = scope.resourceLabel ?? scope.name;
+    return (_jsxs("div", { className: "ml-3 flex flex-col gap-1.5 border-l pl-3", children: [held.map((g) => (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "truncate text-muted-foreground", children: name(g.resource ?? '') }), _jsx(LevelPicker, { person: p, scope: scope, scopes: view.scopes, resource: g.resource, onPick: (l) => onLevel(scopeId, l, g.resource) })] }, g.resource))), adapter.resources && p.role !== 'admin' && (_jsx(LumenSelector, { trigger: "chip", size: "sm", label: `Grant on a ${noun.toLowerCase()}`, placeholder: `+ Grant on a ${noun.toLowerCase()}`, value: null, open: adding, onOpenChange: setAdding, empty: list.isPending ? 'Loading…' : `No ${noun.toLowerCase()} to add`, options: (list.data ?? [])
+                    .filter((r) => !held.some((g) => g.resource === r.id))
+                    .map((r) => ({ value: r.id, label: r.name })), onChange: (r) => onLevel(scopeId, levelsOf(scope)[1]?.id ?? 'view', r) }))] }));
+}
+function ActivitySection({ adapter, person }) {
+    const q = useQuery({
+        queryKey: ['lumen-people', adapter.key, 'audit', person.id],
+        queryFn: () => adapter.audit?.({ target: person.id, limit: 5 }) ?? Promise.resolve(null),
+    });
+    const events = q.data?.events ?? [];
+    return (_jsx(DrawerSection, { icon: HistoryIcon, title: "Recent activity", count: events.length || null, children: q.isError ? (_jsx("p", { className: "text-destructive text-sm", children: errorText(q.error) })) : events.length ? (_jsx("ul", { className: "flex flex-col gap-1.5 text-sm", children: events.map((e) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "num w-24 shrink-0 text-muted-foreground", children: when(e.at) }), _jsxs("span", { className: "min-w-0 flex-1 truncate", title: e.detail, children: [e.actor, " \u00B7 ", e.detail] }), e.refused && _jsx(Badge, { variant: "destructive", children: "Refused" })] }, e.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: q.isPending ? 'Loading…' : 'Nothing yet.' })) }));
+}
+/** Disable or Enable, and Remove with what each part of the app does with their data first. */
+function DangerSection({ adapter, person: p, guard, onGone, }) {
+    const act = usePeopleAction(adapter);
+    const [plan, setPlan] = useState(null);
+    const [planError, setPlanError] = useState(null);
+    const [confirming, setConfirming] = useState(false);
+    const who = p.name || p.email;
+    const locked = !!guard && p.role === 'admin';
+    const openRemove = async () => {
+        setPlan(null);
+        setPlanError(null);
+        setConfirming(true);
+        try {
+            setPlan(await adapter.removePlan(p.id));
+        }
+        catch (e) {
+            setPlanError(errorText(e));
+        }
+    };
+    return (_jsxs(DrawerSection, { icon: TriangleAlertIcon, title: "Danger zone", children: [locked ? (_jsx(NoteLine, { icon: ShieldCheckIcon, title: guard })) : (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [p.status !== 'invited' && p.status !== 'expired' && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            const status = p.status === 'disabled' ? 'active' : 'disabled';
+                            void act(() => adapter.update(p.id, { status }), status === 'disabled' ? `${who} is disabled` : `${who} is enabled`, () => adapter.update(p.id, {
+                                status: p.status === 'disabled' ? 'disabled' : 'active',
+                            }));
+                        }, children: [_jsx(BanIcon, {}), " ", p.status === 'disabled' ? 'Enable' : 'Disable'] })), _jsxs(Button, { size: "sm", variant: "outline", className: "text-destructive", onClick: openRemove, children: [_jsx(Trash2Icon, {}), " Remove\u2026"] }), _jsx(InfoTip, { label: "About Disable and Remove", children: "Disable keeps their data and blocks sign-in. Remove asks each part of the app to delete their data first, then takes them out of People." })] })), _jsx(LumenConfirm, { open: confirming, onOpenChange: setConfirming, size: "default", title: `Remove ${who}?`, description: planError ? (planError) : plan ? (_jsxs("span", { className: "flex flex-col gap-2", children: [_jsx("span", { children: "This cannot be undone." }), _jsx("span", { className: "flex flex-col gap-1", children: plan.steps.map((s) => (_jsxs("span", { className: "flex justify-between gap-3", children: [_jsx("span", { children: s.label }), _jsx("span", { className: "text-muted-foreground", children: s.outcome })] }, s.label))) })] })) : ('Checking what removing them does…'), typeToConfirm: p.email, action: "Remove for good", busyAction: "Removing\u2026", onConfirm: async () => {
+                    const r = await act(() => adapter.remove(p.id), `Removed ${who}`);
+                    if (!r)
+                        throw new Error('Nothing was removed.');
+                    setConfirming(false);
+                    onGone();
+                } })] }));
+}

package/dist/people/sections.d.ts

@@ -0,0 +1,10 @@
+import { type PeopleFrame } from './shared.js';
+export declare function InvitesSection({ frame }: {
+    frame: PeopleFrame;
+}): import("react").JSX.Element;
+export declare function PermissionsSection({ frame }: {
+    frame: PeopleFrame;
+}): import("react").JSX.Element;
+export declare function AuditSection({ frame }: {
+    frame: PeopleFrame;
+}): import("react").JSX.Element;