@columenlabs/lumen-ui 0.1.64 → 0.1.66

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { LumenEChart, type EChartOption, type ChartTokens, axisStyle, baseOption
 export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, type CardControls, type CardLink, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm, type LumenConfirmProps } from './confirm.js';
+export { InfoLabel, InfoTip } from './info-tip.js';
 export { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
 export { LumenBackupCodes, type LumenCodeMethod, type LumenPasskey, type LumenResult, LumenSecondStep, type LumenSecondStepProps, LumenSignInMethods, type LumenSignInMethodsProps, } from './lumen-security.js';
 export { LumenDateInput, type LumenDateInputProps, stepDate, } from './lumen-date-input.js';

package/dist/index.js

@@ -22,6 +22,7 @@ export { LumenEChart, axisStyle, baseOption, useChartTokens, } from './lumen-ech
 export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm } from './confirm.js';
+export { InfoLabel, InfoTip } from './info-tip.js';
 export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
 export { LumenBackupCodes, LumenSecondStep, LumenSignInMethods, } from './lumen-security.js';
 export { LumenDateInput, stepDate, } from './lumen-date-input.js';

package/dist/info-tip.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+/**
+ * The details of a label, behind an (i) beside it: shown on hover or focus, and on tap on a
+ * phone. The kit's one way to say more than a label: keep visible copy to a few words and put
+ * the rest here, never in a grey line under a field or a section title.
+ */
+export declare function InfoTip({ children, label, side, className, }: {
+    /** The details: a sentence or two, a short list. */
+    children: ReactNode;
+    /** The button's accessible name ("About Edit"). */
+    label?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+}): import("react").JSX.Element;
+/** A label with its (i): `Link works for (i)`. */
+export declare function InfoLabel({ children, info, className, }: {
+    children: ReactNode;
+    info?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/info-tip.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { cn } from './lib/utils.js';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
+/**
+ * The details of a label, behind an (i) beside it: shown on hover or focus, and on tap on a
+ * phone. The kit's one way to say more than a label: keep visible copy to a few words and put
+ * the rest here, never in a grey line under a field or a section title.
+ */
+export function InfoTip({ children, label = 'More about this', side = 'top', className, }) {
+    const [open, setOpen] = useState(false);
+    // Hover opens it after a beat and leaving closes it after one, so the pointer can cross to it.
+    const timer = useRef(null);
+    const later = (next, ms) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(next), ms);
+    };
+    const hover = {
+        onPointerEnter: (e) => e.pointerType === 'mouse' && later(true, 150),
+        onPointerLeave: (e) => e.pointerType === 'mouse' && later(false, 200),
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, className: cn('inline-flex size-4 shrink-0 items-center justify-center rounded-full align-middle text-muted-foreground outline-none 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 })] }));
+}
+/** A label with its (i): `Link works for (i)`. */
+export function InfoLabel({ children, info, className, }) {
+    return (_jsxs("span", { className: cn('inline-flex items-center gap-1', className), children: [children, info ? (_jsx(InfoTip, { label: typeof children === 'string' ? `About ${children}` : undefined, children: info })) : null] }));
+}

package/dist/people/client.d.ts

@@ -0,0 +1,55 @@
+import type { AuditEvent, AuditQuery, BulkOp, BulkResult, EmailCheck, EmailDraft, EmailSettingsView, Grant, InviteInput, InviteLink, InviteResult, PeopleView, Person, RemovePlan, Role, SyncStatus } from '@columenlabs/lumen-ui-types/people';
+/** What a change did to the sign-in provider's allow list, when the app keeps one in step. */
+export interface WithSync {
+    access?: SyncStatus | null;
+}
+export interface PeopleAdapter {
+    /** Names the cache its reads keep (two adapters on one page need two keys). */
+    key: string;
+    view(): Promise<PeopleView>;
+    invite(input: InviteInput): Promise<{
+        results: InviteResult[];
+    } & WithSync>;
+    update(id: string, change: {
+        name?: string;
+        role?: Role;
+        status?: 'active' | 'disabled';
+    }): Promise<{
+        person: Person;
+    } & WithSync>;
+    setAccess(id: string, grants: Grant[]): Promise<{
+        person: Person;
+    } & WithSync>;
+    resend(id: string): Promise<{
+        result: InviteResult;
+    } & WithSync>;
+    revoke(id: string): Promise<WithSync>;
+    removePlan(id: string): Promise<RemovePlan>;
+    remove(id: string): Promise<WithSync>;
+    /** One change over many people; without it the bulk bar runs them one by one. */
+    bulk?(ids: string[], op: BulkOp): Promise<BulkResult & WithSync>;
+    /** The audit log; without it the Audit page and a person's Recent activity hide. */
+    audit?(q?: AuditQuery): Promise<{
+        events: AuditEvent[];
+    }>;
+    /** Rewrites the sign-in provider's allow list now. */
+    sync?(): Promise<SyncStatus>;
+    /** The resources of a construct scope (a scope with a `parent`), to grant one. */
+    resources?(scope: string): Promise<{
+        id: string;
+        name: string;
+    }[]>;
+    /** Email through a Resend-style API (the Email settings section); left out, it hides. */
+    email?: {
+        view(): Promise<EmailSettingsView>;
+        check(draft: EmailDraft): Promise<EmailCheck>;
+        test(draft: EmailDraft): Promise<EmailCheck>;
+        save(draft: EmailDraft): Promise<EmailSettingsView>;
+        clear(): Promise<unknown>;
+    };
+    /** The invitee's side: what a link is for, and accepting it. */
+    invitation?(token: string): Promise<InviteLink>;
+    accept?(token: string): Promise<Person>;
+}
+/** The adapter over `peopleRoutes` mounted at `base` (`/api/people`). */
+export declare function peopleClient(base: string): PeopleAdapter;

package/dist/people/client.js

@@ -0,0 +1,39 @@
+import { apiJson } from '../api-fetch.js';
+/** The adapter over `peopleRoutes` mounted at `base` (`/api/people`). */
+export function peopleClient(base) {
+    const root = base.replace(/\/+$/, '');
+    const at = (path) => `${root}${path}`;
+    const id = (p) => encodeURIComponent(p);
+    const send = (method, path, body = {}) => apiJson(at(path), { method, body: JSON.stringify(body) }, 'people');
+    const get = (path) => apiJson(at(path), {}, 'people');
+    return {
+        key: root,
+        view: () => get('/'),
+        invite: (input) => send('POST', '/invites', input),
+        update: (p, change) => send('PATCH', `/${id(p)}`, change),
+        setAccess: (p, grants) => send('PUT', `/${id(p)}/access`, { grants }),
+        resend: (p) => send('POST', `/${id(p)}/resend`),
+        revoke: (p) => send('POST', `/${id(p)}/revoke`),
+        removePlan: (p) => get(`/${id(p)}/remove-plan`),
+        remove: (p) => send('DELETE', `/${id(p)}`),
+        bulk: (ids, op) => send('POST', '/bulk', { ids, op }),
+        audit: (q = {}) => {
+            const params = new URLSearchParams();
+            for (const [k, v] of Object.entries(q))
+                if (v !== undefined)
+                    params.set(k, String(v));
+            const qs = params.toString();
+            return get(`/audit${qs ? `?${qs}` : ''}`);
+        },
+        sync: () => send('POST', '/sync'),
+        email: {
+            view: () => get('/email'),
+            check: (draft) => send('POST', '/email/check', draft),
+            test: (draft) => send('POST', '/email/test', draft),
+            save: (draft) => send('PUT', '/email', draft),
+            clear: () => send('DELETE', '/email'),
+        },
+        invitation: (token) => get(`/invite/${id(token)}`),
+        accept: (token) => send('POST', `/invite/${id(token)}/accept`),
+    };
+}

package/dist/people/email-settings.d.ts

@@ -0,0 +1,7 @@
+import type { PeopleAdapter } from './client.js';
+/** The Email section's body. In LumenSettings its badge sits in the header and Save in the footer;
+ *  `inline` draws both in the body instead. */
+export declare function LumenEmailSettings({ adapter, inline, }: {
+    adapter: PeopleAdapter;
+    inline?: boolean;
+}): import("react").JSX.Element;

package/dist/people/email-settings.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { CableIcon, CheckIcon, CircleHelpIcon, GlobeIcon, MailIcon, PlugZapIcon, XIcon, } from 'lucide-react';
+import { useEffect, useId, useState } from 'react';
+import { SaveButton } from '../form-issues.js';
+import { InfoLabel } from '../info-tip.js';
+import { errorText } from '../integrations.js';
+import { LumenChoice } from '../lumen-choice.js';
+import { lumenToast } from '../lumen-toast.js';
+import { SettingsActions, SettingsFooter } from '../settings.js';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Spinner } from '../ui/spinner.js';
+import { when } from './shared.js';
+const blank = (v) => {
+    const route = v.current?.route ?? v.routes[0]?.id ?? '';
+    return {
+        route,
+        url: v.current?.url ?? v.routes.find((r) => r.id === route)?.url ?? '',
+        apiKey: '',
+        from: v.current?.from ?? '',
+        fromName: v.current?.fromName ?? '',
+    };
+};
+const same = (a, b) => a.route === b.route &&
+    a.url === b.url &&
+    (a.apiKey ?? '') === (b.apiKey ?? '') &&
+    a.from === b.from &&
+    a.fromName === b.fromName;
+/** The Email section's body. In LumenSettings its badge sits in the header and Save in the footer;
+ *  `inline` draws both in the body instead. */
+export function LumenEmailSettings({ adapter, inline = false, }) {
+    const api = adapter.email;
+    const q = useQuery({
+        queryKey: ['lumen-people', adapter.key, 'email'],
+        queryFn: () => api?.view() ?? Promise.reject(new Error('Email settings are not set up here.')),
+    });
+    if (!q.data)
+        return (_jsx("p", { className: "text-muted-foreground text-sm", children: q.isError ? errorText(q.error) : 'Loading…' }));
+    return _jsx(EmailForm, { adapter: adapter, view: q.data, inline: inline });
+}
+function EmailForm({ adapter, view, inline, }) {
+    const api = adapter.email;
+    const qc = useQueryClient();
+    const ids = useId();
+    const [draft, setDraft] = useState(() => blank(view));
+    const [replacing, setReplacing] = useState(!view.current);
+    const [result, setResult] = useState(null);
+    const [busy, setBusy] = useState(null);
+    useEffect(() => setDraft(blank(view)), [view]);
+    if (!api)
+        return null;
+    const route = view.routes.find((r) => r.id === draft.route);
+    const changed = !view.current || !same(draft, { ...blank(view), apiKey: '' });
+    const passed = !!result?.check.ok && same(result.for, draft);
+    const set = (patch) => setDraft((d) => ({ ...d, ...patch }));
+    const run = async (kind) => {
+        setBusy(kind);
+        try {
+            const check = await (kind === 'check' ? api.check(draft) : api.test(draft));
+            setResult({ for: draft, check });
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const save = async () => {
+        setBusy('save');
+        try {
+            const next = await api.save(draft);
+            qc.setQueryData(['lumen-people', adapter.key, 'email'], next);
+            await qc.invalidateQueries({ queryKey: ['lumen-people', adapter.key] });
+            setReplacing(false);
+            setResult(null);
+            lumenToast.success('Email saved. Invites now go out by email.');
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const issues = [];
+    if (!draft.url.trim())
+        issues.push({ where: 'Server address', message: 'Enter the address', target: `${ids}-url` });
+    if (replacing && !draft.apiKey?.trim())
+        issues.push({ where: 'API key', message: 'Enter the key', target: `${ids}-key` });
+    if (!draft.from.trim())
+        issues.push({
+            where: 'Address',
+            message: 'Enter who mail is sent from',
+            target: `${ids}-from`,
+        });
+    const ready = issues.length === 0;
+    if (ready && changed && !passed)
+        issues.push({ where: 'Test it', message: 'Check the connection or send a test first' });
+    const badge = passed ? (_jsx(Badge, { variant: "secondary", children: "Ready to save" })) : view.current ? (view.lastTest && !view.lastTest.ok ? (_jsx(Badge, { variant: "destructive", children: "Last test failed" })) : (_jsx(Badge, { variant: "secondary", className: "text-gain", children: "Working" }))) : (_jsx(Badge, { variant: "outline", children: "Not set up" }));
+    const footer = (_jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: passed
+                    ? 'Passed'
+                    : view.current
+                        ? `Saved by ${view.current.updatedBy ?? '—'} ${when(view.current.updatedAt)}`
+                        : 'Test to save' }), changed && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                    setDraft(blank(view));
+                    setReplacing(!view.current);
+                    setResult(null);
+                }, children: "Revert" })), _jsx(SaveButton, { issues: issues, busy: busy === 'save', disabled: !changed, onSave: save })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [inline ? (_jsx("div", { className: "flex justify-end pb-2", children: badge })) : (_jsx(SettingsActions, { children: badge })), _jsx(Step, { n: 1, title: "Reach the server through", children: _jsx(LumenChoice, { label: "Reach the server through", value: draft.route, options: view.routes.map((r) => ({
+                        value: r.id,
+                        icon: r.id === 'public' ? GlobeIcon : CableIcon,
+                        title: (_jsxs("span", { className: "flex w-full items-center gap-2", children: [r.label, r.state && (_jsx("span", { className: "ml-auto font-normal text-gain text-xs", children: r.state }))] })),
+                    })), onValueChange: (id) => {
+                        const next = view.routes.find((r) => r.id === id);
+                        set({ route: id, ...(next?.url && id !== draft.route ? { url: next.url } : {}) });
+                    } }) }), _jsxs(Step, { n: 2, title: "Email server", children: [_jsx(Labelled, { id: `${ids}-url`, label: _jsx(InfoLabel, { info: route?.urlInfo, children: "Server address" }), children: _jsx(Input, { id: `${ids}-url`, className: "font-code text-xs", value: draft.url, placeholder: route?.url ?? 'https://api.resend.com', onChange: (e) => set({ url: e.target.value }) }) }), _jsx(Labelled, { id: `${ids}-key`, label: "API key", children: replacing ? (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { id: `${ids}-key`, type: "password", autoComplete: "off", className: "font-code text-xs", value: draft.apiKey ?? '', onChange: (e) => set({ apiKey: e.target.value }) }), view.current && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                        setReplacing(false);
+                                        set({ apiKey: '' });
+                                    }, children: "Keep" }))] })) : (_jsxs("div", { className: "flex h-9 items-center gap-3 rounded-md border px-3 text-sm", children: [_jsx("span", { className: "font-code text-muted-foreground text-xs", children: view.current?.keyHint }), _jsx("span", { className: "ml-auto text-gain text-xs", children: "sealed" }), _jsx(Button, { size: "xs", variant: "link", onClick: () => setReplacing(true), children: "Replace" })] })) })] }), _jsx(Step, { n: 3, title: "Sent from", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [_jsx(Labelled, { id: `${ids}-name`, label: "Name", className: "sm:flex-1", children: _jsx(Input, { id: `${ids}-name`, value: draft.fromName, onChange: (e) => set({ fromName: e.target.value }) }) }), _jsx(Labelled, { id: `${ids}-from`, label: "Address", className: "sm:flex-[1.4]", children: _jsx(Input, { id: `${ids}-from`, type: "email", value: draft.from, placeholder: "hello@example.com", onChange: (e) => set({ from: e.target.value }) }) })] }) }), _jsxs(Step, { n: 4, title: "Test it", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", disabled: !ready || !!busy, onClick: () => run('check'), children: [busy === 'check' ? _jsx(Spinner, {}) : _jsx(PlugZapIcon, {}), " Check connection"] }), _jsxs(Button, { size: "sm", variant: "outline", disabled: !ready || !!busy, onClick: () => run('test'), children: [busy === 'test' ? _jsx(Spinner, {}) : _jsx(MailIcon, {}), " Send test to ", view.me] })] }), result && same(result.for, draft) && _jsx(Steps, { check: result.check }), !result && view.lastTest && (_jsxs("p", { className: "text-muted-foreground text-xs", children: ["Last ", view.lastTest.kind === 'test' ? 'test' : 'check', " ", when(view.lastTest.at), ":", ' ', view.lastTest.ok ? 'passed' : 'failed', "."] }))] }), inline ? (_jsx("div", { className: "border-t pt-3", children: footer })) : (_jsx(SettingsFooter, { children: footer }))] }));
+}
+function Step({ n, title, children }) {
+    return (_jsxs("section", { className: "flex gap-4 border-t py-5 first-of-type:border-t-0", "aria-label": title, children: [_jsx("span", { className: "num flex size-6 shrink-0 items-center justify-center rounded-full bg-muted font-semibold text-xs", children: n }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [_jsx("h3", { className: "font-medium text-sm", children: title }), children] })] }));
+}
+function Labelled({ id, label, className, children, }) {
+    return (_jsxs("div", { className: `flex min-w-0 flex-col gap-1.5 ${className ?? ''}`, children: [_jsx("label", { htmlFor: id, className: "text-muted-foreground text-xs", children: label }), children] }));
+}
+function Steps({ check }) {
+    return (_jsx("ul", { className: "flex flex-col gap-2 rounded-lg border bg-muted/50 px-3.5 py-3 text-sm", children: check.steps.map((s) => (_jsxs("li", { className: "flex items-center gap-2.5", children: [s.ok === true ? (_jsx(CheckIcon, { className: "size-4 shrink-0 text-gain" })) : s.ok === false ? (_jsx(XIcon, { className: "size-4 shrink-0 text-loss" })) : (_jsx(CircleHelpIcon, { className: "size-4 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 flex-1", children: s.text }), s.ms !== null && _jsxs("span", { className: "num text-muted-foreground text-xs", children: [s.ms, " ms"] })] }, s.id))) }));
+}

package/dist/people/index.d.ts

@@ -0,0 +1,7 @@
+export { type PeopleAdapter, peopleClient, type WithSync } from './client.js';
+export { InviteDrawer } from './invite-drawer.js';
+export { LumenInviteAccept } from './invite-accept.js';
+export { LumenPeople, type LumenPeopleProps, type PeopleSection } from './lumen-people.js';
+export { PersonDrawer } from './person-drawer.js';
+export { LevelPicker, type PeopleFrame } from './shared.js';
+export { LumenEmailSettings } from './email-settings.js';

package/dist/people/index.js

@@ -0,0 +1,9 @@
+// `@columenlabs/lumen-ui/people`: the People screens. The server side is `@columenlabs/lumen-people`;
+// the shapes and rules both share are `@columenlabs/lumen-ui-types/people`.
+export { peopleClient } from './client.js';
+export { InviteDrawer } from './invite-drawer.js';
+export { LumenInviteAccept } from './invite-accept.js';
+export { LumenPeople } from './lumen-people.js';
+export { PersonDrawer } from './person-drawer.js';
+export { LevelPicker } from './shared.js';
+export { LumenEmailSettings } from './email-settings.js';

package/dist/people/invite-accept.d.ts

@@ -0,0 +1,9 @@
+import type { PeopleAdapter } from './client.js';
+export declare function LumenInviteAccept({ adapter, token, onAccepted, onSwitchAccount, }: {
+    adapter: PeopleAdapter;
+    token: string;
+    /** After Accept: open the app. */
+    onAccepted: () => void;
+    /** Signs out so they can sign in with the invited email. */
+    onSwitchAccount?: () => void;
+}): import("react").JSX.Element;

package/dist/people/invite-accept.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// What an invite link opens: who invited them and to what, then Accept. An expired link, a link for
+// another email or one that no longer works each say so, with the way forward.
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { CheckIcon, LogOutIcon, MailWarningIcon, UserPlusIcon } from 'lucide-react';
+import { ApiError } from '../api-fetch.js';
+import { errorText } from '../integrations.js';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '../ui/empty.js';
+import { Spinner } from '../ui/spinner.js';
+import { when } from './shared.js';
+export function LumenInviteAccept({ adapter, token, onAccepted, onSwitchAccount, }) {
+    const q = useQuery({
+        queryKey: ['lumen-people', adapter.key, 'invite', token],
+        queryFn: () => adapter.invitation?.(token) ?? Promise.reject(new Error('Invites are not set up here.')),
+        retry: false,
+    });
+    const accept = useMutation({
+        mutationFn: () => adapter.accept?.(token) ?? Promise.reject(new Error('Invites are not set up here.')),
+        onSuccess: onAccepted,
+    });
+    const inv = q.data;
+    if (q.isPending)
+        return _jsx(Screen, { icon: _jsx(Spinner, {}), title: "Opening your invite\u2026" });
+    if (!inv)
+        return (_jsx(Screen, { icon: _jsx(MailWarningIcon, {}), title: "This invite link does not work", text: q.error instanceof ApiError && q.error.status === 404
+                ? 'It was used already, replaced by a newer invite, or revoked. Ask the person who invited you for a new one.'
+                : errorText(q.error) }));
+    if (inv.status === 'expired')
+        return (_jsx(Screen, { icon: _jsx(MailWarningIcon, {}), title: `This invite expired ${when(inv.expiresAt)}`, text: `Ask ${inv.invitedBy ?? 'the person who invited you'} to resend it. A new link works again from the day it is sent.` }));
+    if (inv.signedInAs.toLowerCase() !== inv.email)
+        return (_jsx(Screen, { icon: _jsx(MailWarningIcon, {}), title: "This invite is for another email", text: `It is for ${inv.email}. You are signed in as ${inv.signedInAs}.`, action: onSwitchAccount && (_jsxs(Button, { size: "sm", onClick: onSwitchAccount, children: [_jsx(LogOutIcon, {}), " Switch account"] })) }));
+    return (_jsx(Screen, { icon: _jsx(UserPlusIcon, {}), title: `Join ${inv.appName}`, text: `${inv.invitedBy ?? 'An admin'} invited ${inv.email}. You’ll get:`, action: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "flex flex-wrap justify-center gap-1.5", children: inv.access.map((a) => (_jsx(Badge, { variant: "secondary", children: a }, a))) }), accept.isError && _jsx("p", { className: "text-destructive text-sm", children: errorText(accept.error) }), _jsxs(Button, { disabled: accept.isPending, onClick: () => accept.mutate(), children: [accept.isPending ? _jsx(Spinner, {}) : _jsx(CheckIcon, {}), " Accept and open"] }), inv.expiresAt && (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["The link works until ", when(inv.expiresAt), "."] }))] }) }));
+}
+function Screen({ icon, title, text, action, }) {
+    return (_jsx("div", { className: "flex min-h-svh items-center justify-center p-4", children: _jsxs(Empty, { className: "max-w-md border", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: icon }), _jsx(EmptyTitle, { children: title }), text && _jsx(EmptyDescription, { children: text })] }), action && _jsx(EmptyContent, { children: action })] }) }));
+}

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

@@ -0,0 +1,13 @@
+import { type PeopleView } from '@columenlabs/lumen-ui-types/people';
+import type { PeopleAdapter } from './client.js';
+export declare function InviteDrawer({ adapter, view, open, onClose, onSetUpMail, }: {
+    adapter: PeopleAdapter;
+    view: PeopleView;
+    open: boolean;
+    onClose: () => void;
+    /** Opens the app's email settings; shown when no email is set up. */
+    onSetUpMail?: () => void;
+}): import("react").JSX.Element;
+export declare function CopyLink({ link }: {
+    link: string;
+}): import("react").JSX.Element;

package/dist/people/invite-drawer.js

@@ -0,0 +1,116 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Invite people: many emails at once, a role, access per scope, how long the link works and a note.
+// Each result says whether the email went; when it did not, the link is there to copy.
+import { emailsIn, levelsOf, } from '@columenlabs/lumen-ui-types/people';
+import { CheckIcon, CopyIcon, MailIcon, TriangleAlertIcon, UserPlusIcon } from 'lucide-react';
+import { useId, useMemo, useState } from 'react';
+import { DrawerSection } from '../drawer-section.js';
+import { SaveButton } from '../form-issues.js';
+import { InfoLabel } from '../info-tip.js';
+import { LumenDrawer } from '../lumen-drawer.js';
+import { LumenSelector } from '../lumen-selector.js';
+import { lumenToast } from '../lumen-toast.js';
+import { NoteLine } from '../note-line.js';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { Textarea } from '../ui/textarea.js';
+import { topScopes, usePeopleAction, when, withGrant } from './shared.js';
+const DAYS = [1, 3, 7, 14, 30];
+const MAX = 50;
+export function InviteDrawer({ adapter, view, open, onClose, onSetUpMail, }) {
+    const act = usePeopleAction(adapter);
+    const ids = useId();
+    const [text, setText] = useState('');
+    const [role, setRole] = useState('member');
+    const [grants, setGrants] = useState([]);
+    const [days, setDays] = useState(view.inviteDays);
+    const [note, setNote] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [results, setResults] = useState(null);
+    const emails = useMemo(() => emailsIn(text), [text]);
+    const known = new Map(view.people.map((p) => [p.id, p]));
+    const fresh = emails.filter((e) => {
+        const p = known.get(e);
+        return !p || p.status === 'invited' || p.status === 'expired';
+    });
+    const issues = [];
+    if (!emails.length)
+        issues.push({ where: 'Emails', message: 'Add an email address', target: `${ids}-emails` });
+    else if (!fresh.length)
+        issues.push({
+            where: 'Emails',
+            message: 'Everyone here is already a member',
+            target: `${ids}-emails`,
+        });
+    if (emails.length > MAX)
+        issues.push({ where: 'Emails', message: `At most ${MAX} at once`, target: `${ids}-emails` });
+    const reset = () => {
+        setText('');
+        setRole('member');
+        setGrants([]);
+        setDays(view.inviteDays);
+        setNote('');
+        setResults(null);
+    };
+    const close = () => {
+        onClose();
+        reset();
+    };
+    const send = async () => {
+        setBusy(true);
+        const r = await act(() => adapter.invite({
+            emails,
+            role,
+            grants: role === 'admin' ? [] : grants,
+            days,
+            note: note.trim() || undefined,
+        }), emails.length === 1 ? `Invited ${emails[0]}` : `Invited ${fresh.length} people`);
+        setBusy(false);
+        if (r)
+            setResults(r.results);
+    };
+    return (_jsx(LumenDrawer, { open: open, onClose: close, title: "Invite people", footerStart: view.mail.configured
+            ? view.mail.from
+                ? `From ${view.mail.from}`
+                : 'By email'
+            : 'Links only', footer: results ? (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: reset, children: [_jsx(UserPlusIcon, {}), " Invite more"] }), _jsx(Button, { size: "sm", onClick: close, children: "Done" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: close, children: "Cancel" }), _jsx(SaveButton, { issues: issues, busy: busy, icon: view.mail.configured ? MailIcon : UserPlusIcon, label: view.mail.configured
+                        ? `Send ${fresh.length > 1 ? `${fresh.length} invites` : 'invite'}`
+                        : `Make ${fresh.length > 1 ? `${fresh.length} links` : 'link'}`, onSave: send })] })), children: results ? (_jsx(Results, { results: results })) : (_jsxs(_Fragment, { children: [!view.mail.configured && (_jsx(NoteLine, { icon: TriangleAlertIcon, title: "Email is not set up.", note: "Each invite gives you a link to send yourself.", action: onSetUpMail && (_jsx(Button, { size: "sm", variant: "outline", onClick: onSetUpMail, children: "Set up email" })) })), _jsx(DrawerSection, { title: "Who", count: emails.length || null, defaultOpen: true, children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { htmlFor: `${ids}-emails`, className: "font-medium text-sm", children: "Emails" }), _jsx(Textarea, { id: `${ids}-emails`, rows: 3, value: text, placeholder: "jo@example.com, ravi@example.org", onChange: (e) => setText(e.target.value) }), emails.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5", children: emails.map((e) => {
+                                    const p = known.get(e);
+                                    const member = p && p.status !== 'invited' && p.status !== 'expired';
+                                    return (_jsx(Badge, { variant: member ? 'outline' : 'secondary', className: member ? 'text-muted-foreground line-through' : undefined, title: member
+                                            ? 'Already a member: skipped'
+                                            : p
+                                                ? 'Invited before: sends a new link'
+                                                : undefined, children: e }, e));
+                                }) }))] }) }), _jsx(DrawerSection, { title: "Access", defaultOpen: true, children: _jsxs("ul", { className: "flex flex-col gap-2 text-sm", children: [_jsxs("li", { className: "flex items-center justify-between gap-3", children: [_jsx(InfoLabel, { info: "Admins hold the top level everywhere and manage People.", children: "Role" }), _jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Role", value: role, options: [
+                                            { value: 'member', label: 'Member' },
+                                            { value: 'admin', label: 'Admin' },
+                                        ], onChange: setRole })] }), role === 'member' &&
+                                topScopes(view.scopes).map((s) => {
+                                    const levels = levelsOf(s);
+                                    const value = grants.find((g) => g.scope === s.id && !g.resource)?.level ?? levels[0]?.id;
+                                    return (_jsxs("li", { className: "flex items-center justify-between gap-3", children: [s.name, _jsx(LumenSelector, { trigger: "chip", size: "sm", label: s.name, value: value, options: levels.map((l) => ({
+                                                    value: l.id,
+                                                    label: l.label,
+                                                    description: l.description,
+                                                })), onChange: (l) => setGrants((g) => withGrant(g, s, l)) })] }, s.id));
+                                })] }) }), _jsx(DrawerSection, { title: "Link and note", defaultOpen: true, children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(InfoLabel, { info: "Past this the link stops working and they are refused at sign-in until you resend.", children: "Link works for" }), _jsx(LumenSelector, { trigger: "chip", size: "sm", label: "Link works for", value: String(days), options: [...new Set([...DAYS, view.inviteDays])]
+                                            .sort((a, b) => a - b)
+                                            .map((d) => ({
+                                            value: String(d),
+                                            label: d === 1 ? '1 day' : `${d} days`,
+                                            detail: `until ${when(Date.now() + d * 86_400_000)}`,
+                                        })), onChange: (d) => setDays(Number(d)) })] }), view.mail.configured && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { htmlFor: `${ids}-note`, className: "font-medium", children: "A note in the email" }), _jsx(Textarea, { id: `${ids}-note`, rows: 2, maxLength: 500, value: note, placeholder: "Optional", onChange: (e) => setNote(e.target.value) })] }))] }) })] })) }));
+}
+/** One line per email: sent, link only (with Copy link), or skipped and why. */
+function Results({ results }) {
+    return (_jsx("ul", { className: "flex flex-col gap-3 py-3 text-sm", children: results.map((r) => (_jsxs("li", { className: "flex flex-col gap-1.5", children: [_jsxs("span", { className: "flex items-start gap-2", children: [r.ok && r.mail?.ok ? (_jsx(CheckIcon, { className: "mt-0.5 size-4 shrink-0 text-gain" })) : (_jsx(TriangleAlertIcon, { className: `mt-0.5 size-4 shrink-0 ${r.ok ? 'text-warning' : 'text-muted-foreground'}` })), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "font-medium", children: r.email }), ' ', _jsx("span", { className: "text-muted-foreground", children: !r.ok
+                                        ? `skipped: ${r.detail}`
+                                        : r.mail?.ok
+                                            ? `was emailed. The link works until ${when(r.person?.expiresAt)}.`
+                                            : `is invited, but the email did not go${r.mail?.detail ? ` (${r.mail.detail})` : ''}.` })] })] }), r.ok && r.link && !r.mail?.ok && _jsx(CopyLink, { link: r.link })] }, r.email))) }));
+}
+export function CopyLink({ link }) {
+    return (_jsxs("span", { className: "ml-6 flex items-center gap-2", children: [_jsx("code", { className: "min-w-0 flex-1 truncate rounded bg-muted px-2 py-1 text-xs", children: link }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => navigator.clipboard.writeText(link).then(() => lumenToast.success('Link copied. It is single use and tied to this email.'), () => lumenToast.error('Could not copy: select the link and copy it.')), children: [_jsx(CopyIcon, {}), " Copy link"] })] }));
+}

package/dist/people/lumen-people.d.ts

@@ -0,0 +1,18 @@
+import { type Person } from '@columenlabs/lumen-ui-types/people';
+import type { Crumb } from '../page.js';
+import type { ViewField } from '../view-model.js';
+import type { PeopleAdapter } from './client.js';
+export type PeopleSection = 'people' | 'invites' | 'permissions' | 'audit';
+export interface LumenPeopleProps {
+    adapter: PeopleAdapter;
+    /** The crumbs before the section's own (`[{ label: 'Admin' }]`). */
+    crumbs?: Crumb[];
+    /** The open section; left out, the block keeps it and shows its own tabs. */
+    section?: PeopleSection;
+    onSection?: (section: PeopleSection) => void;
+    /** Opens the app's email settings, offered while no email is set up. */
+    onSetUpMail?: () => void;
+    /** The app's own columns per person (their accounts, their storage). */
+    fields?: ViewField<Person>[];
+}
+export declare function LumenPeople({ adapter, crumbs, section: given, onSection, onSetUpMail, fields, }: LumenPeopleProps): import("react").JSX.Element;