@columenlabs/lumen-ui 0.1.65 → 0.1.67

package/dist/people/sections.js

@@ -0,0 +1,332 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The People block's other pages: Invites (pending and expired, Resend and Revoke), Permissions
+// (each scope's levels and who holds what) and the Audit log.
+import { levelLabel, levelOf, levelsOf, } from '@columenlabs/lumen-ui-types/people';
+import { useQuery } from '@tanstack/react-query';
+import { AppWindowIcon, CircleDotIcon, ClockIcon, GitForkIcon, ListOrderedIcon, MailIcon, RotateCwIcon, ShieldCheckIcon, TagIcon, TextIcon, UserRoundIcon, XIcon, } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { LumenLayout } from '../lumen-layout.js';
+import { LumenSelector } from '../lumen-selector.js';
+import { useLumenLoad } from '../lumen-source.js';
+import { Tile, TileRow } from '../tile.js';
+import { Button } from '../ui/button.js';
+import { CopyLink } from './invite-drawer.js';
+import { LevelPicker, STATUS_LABEL, fromNow, peopleView, statusTone, topScopes, usePeopleAction, usePeopleQuery, useVisitView, when, withGrant, } from './shared.js';
+const INVITES_VIEW = peopleView('Invites', {
+    columns: ['email', 'access', 'invited_by', 'sent', 'status', 'expires', 'actions'],
+    chips: [{ key: 'status' }],
+    filters: { fields: ['status', 'invited_by'], default: [] },
+    group: { fields: ['status', 'invited_by'], default: null },
+    pagination: { on: true, size: 50 },
+    total: false,
+    cards: [{ id: 'invites', kind: 'table', w: 6, title: null }],
+});
+export function InvitesSection({ frame }) {
+    const { adapter, view } = frame;
+    const load = useLumenLoad(usePeopleQuery(adapter));
+    const act = usePeopleAction(adapter);
+    const layout = useVisitView(INVITES_VIEW);
+    const [links, setLinks] = useState({});
+    const rows = view.people.filter((p) => p.status === 'invited' || p.status === 'expired');
+    const expired = rows.filter((p) => p.status === 'expired');
+    const next = rows
+        .filter((p) => p.status === 'invited' && p.expiresAt)
+        .sort((a, b) => (a.expiresAt ?? 0) - (b.expiresAt ?? 0))[0];
+    const tops = topScopes(view.scopes);
+    const resend = async (p) => {
+        const r = await act(() => adapter.resend(p.id), `New invite for ${p.email}`);
+        const link = r?.result.link;
+        if (link && !r?.result.mail?.ok)
+            setLinks((l) => ({ ...l, [p.id]: link }));
+    };
+    const domain = {
+        id: 'invites',
+        rowKey: (p) => p.id,
+        text: (p) => [p.email, p.name],
+        fields: [
+            { key: 'email', label: 'Email', icon: MailIcon, value: (p) => p.email, format: 'text' },
+            {
+                key: 'access',
+                label: 'Access',
+                icon: AppWindowIcon,
+                value: (p) => p.role === 'admin'
+                    ? 'Admin'
+                    : tops
+                        .filter((s) => levelOf(p, s, view.scopes) !== levelsOf(s)[0]?.id)
+                        .map((s) => `${s.name} ${levelLabel(s, levelOf(p, s, view.scopes))}`)
+                        .join(', ') || 'None',
+                format: 'text',
+                maxWidth: '16rem',
+            },
+            {
+                key: 'invited_by',
+                label: 'Invited by',
+                icon: UserRoundIcon,
+                value: (p) => p.invitedBy ?? '—',
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            {
+                key: 'sent',
+                label: 'Sent',
+                icon: ClockIcon,
+                value: (p) => when(p.invitedAt),
+                format: 'text',
+            },
+            {
+                key: 'status',
+                label: 'Status',
+                icon: CircleDotIcon,
+                value: (p) => STATUS_LABEL[p.status],
+                tone: statusTone,
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            {
+                key: 'expires',
+                label: 'Expires',
+                icon: ClockIcon,
+                value: (p) => p.status === 'expired' ? `expired ${when(p.expiresAt)}` : fromNow(p.expiresAt),
+                format: 'text',
+            },
+            {
+                key: 'actions',
+                label: 'Actions',
+                icon: RotateCwIcon,
+                value: () => '',
+                render: (p) => (_jsxs("span", { className: "flex gap-1", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: [_jsxs(Button, { size: "xs", variant: "outline", onClick: () => resend(p), children: [_jsx(RotateCwIcon, {}), " Resend"] }), _jsxs(Button, { size: "xs", variant: "ghost", onClick: () => act(() => adapter.revoke(p.id), `Revoked the invite for ${p.email}`), children: [_jsx(XIcon, {}), " Revoke"] })] })),
+                format: 'text',
+                maxWidth: false,
+            },
+        ],
+    };
+    const shownLinks = Object.entries(links).filter(([id]) => rows.some((p) => p.id === id));
+    return (_jsx(LumenLayout, { crumbs: frame.crumbs, actions: _jsxs(_Fragment, { children: [expired.length > 0 && (_jsxs(Button, { size: "sm", variant: "outline", onClick: async () => {
+                        for (const p of expired)
+                            await resend(p);
+                    }, children: [_jsx(RotateCwIcon, {}), " Resend all expired"] })), frame.invite] }), intro: _jsxs("div", { className: "flex flex-col gap-3", children: [frame.tabs, _jsxs(TileRow, { fill: true, "aria-label": "Invites at a glance", children: [_jsx(Tile, { label: "Pending", value: rows.length - expired.length, caption: next ? `next expires ${fromNow(next.expiresAt)}` : 'none waiting' }), _jsx(Tile, { label: "Expired", value: expired.length, caption: "refused at sign-in" }), _jsx(Tile, { label: "Link life", value: `${view.inviteDays} d`, caption: "Resend restarts it" })] }), frame.mailNote, shownLinks.map(([id, link]) => (_jsxs("div", { className: "flex flex-col gap-1 text-sm", children: [_jsxs("span", { children: ["The email to ", _jsx("span", { className: "font-medium", children: id }), " did not go. Send the link another way:"] }), _jsx(CopyLink, { link: link })] }, id)))] }), domain: domain, ...layout, rows: rows, load: load, state: rows.length ? undefined : (_jsx("p", { className: "p-6 text-center text-muted-foreground text-sm", children: "No invites waiting." })), rowTitle: (p) => p.email }));
+}
+const PERMISSIONS_VIEW = peopleView('Permissions', {
+    columns: ['name', 'resource', 'level', 'from'],
+    chips: [{ key: 'from' }],
+    filters: { fields: ['from', 'level'], default: [] },
+    group: { fields: ['from', 'level'], default: null },
+    pagination: { on: true, size: 50 },
+    total: false,
+    cards: [{ id: 'holdings', kind: 'table', w: 6, title: 'Who has what' }],
+});
+export function PermissionsSection({ frame }) {
+    const { adapter, view } = frame;
+    const load = useLumenLoad(usePeopleQuery(adapter));
+    const act = usePeopleAction(adapter);
+    const layout = useVisitView(PERMISSIONS_VIEW);
+    const [scopeId, setScopeId] = useState(view.scopes[0]?.id ?? '');
+    const scope = view.scopes.find((s) => s.id === scopeId) ?? view.scopes[0];
+    const parent = scope?.parent ? view.scopes.find((s) => s.id === scope.parent) : undefined;
+    const rows = useMemo(() => {
+        if (!scope)
+            return [];
+        const low = levelsOf(scope)[0]?.id;
+        const out = [];
+        for (const p of view.people) {
+            const from = p.status === 'disabled'
+                ? 'Disabled'
+                : p.status === 'expired'
+                    ? 'Invite expired'
+                    : p.role === 'admin'
+                        ? 'Admin role'
+                        : 'Own grant';
+            if (scope.parent) {
+                for (const g of p.grants.filter((g) => g.scope === scope.id && g.resource))
+                    out.push({ key: `${p.id}\u0001${g.resource}`, person: p, resource: g.resource, from });
+                continue;
+            }
+            const has = p.grants.some((g) => g.scope === scope.id && !g.resource);
+            const level = levelOf(p, scope, view.scopes);
+            if (level === low && !has && p.role !== 'admin')
+                continue;
+            out.push({ key: p.id, person: p, from });
+        }
+        return out;
+    }, [scope, view]);
+    if (!scope)
+        return _jsx(LumenLayout, { crumbs: frame.crumbs, intro: frame.tabs, cards: [] });
+    const domain = {
+        id: 'permissions',
+        rowKey: (r) => r.key,
+        text: (r) => [r.person.email, r.person.name],
+        fields: [
+            {
+                key: 'name',
+                label: 'Person',
+                icon: UserRoundIcon,
+                value: (r) => r.person.name || r.person.email,
+                format: 'text',
+            },
+            {
+                key: 'resource',
+                label: scope.resourceLabel ?? 'Resource',
+                icon: TagIcon,
+                value: (r) => r.resource ?? '—',
+                format: 'text',
+            },
+            {
+                key: 'level',
+                label: 'Level',
+                icon: ShieldCheckIcon,
+                value: (r) => levelLabel(scope, levelOf(r.person, scope, view.scopes, r.resource)),
+                render: (r) => (_jsx(LevelPicker, { person: r.person, scope: scope, scopes: view.scopes, resource: r.resource, onPick: (l) => {
+                        const before = r.person.grants;
+                        void act(() => adapter.setAccess(r.person.id, withGrant(before, scope, l, r.resource)), `${scope.name}: ${levelLabel(scope, l)} for ${r.person.name || r.person.email}`, () => adapter.setAccess(r.person.id, before));
+                    } })),
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            {
+                key: 'from',
+                label: 'Comes from',
+                icon: GitForkIcon,
+                value: (r) => r.from,
+                tone: (r) => r.from === 'Admin role' ? 'sky' : r.from === 'Own grant' ? undefined : 'muted',
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+        ],
+    };
+    const levels = levelsOf(scope);
+    return (_jsx(LumenLayout, { crumbs: frame.crumbs, actions: _jsx(LumenSelector, { label: "Scope", size: "sm", value: scope.id, options: view.scopes.map((s) => ({
+                value: s.id,
+                label: s.name,
+                group: s.parent ? 'Inside an app' : 'Apps',
+                detail: s.parent ? view.scopes.find((x) => x.id === s.parent)?.name : undefined,
+            })), onChange: setScopeId }), intro: frame.tabs, domain: domain, ...layout, rows: rows, load: load, state: rows.length ? undefined : (_jsx("p", { className: "p-6 text-center text-muted-foreground text-sm", children: scope.parent
+                ? `No one holds a grant on a ${(scope.resourceLabel ?? 'resource').toLowerCase()} yet.`
+                : 'No one has access yet.' })), rowTitle: (r) => r.person.name || r.person.email, lead: [
+            {
+                id: 'levels',
+                w: 3,
+                title: `Levels for ${scope.name}`,
+                icon: ListOrderedIcon,
+                link: false,
+                children: (_jsxs("ol", { className: "flex flex-col gap-2 text-sm", children: [levels.map((l, i) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "num w-4 shrink-0 text-muted-foreground", children: i + 1 }), _jsx("span", { className: "w-20 shrink-0 font-medium", children: l.label }), _jsx("span", { className: "min-w-0 flex-1 text-muted-foreground", children: l.description ?? '' })] }, l.id))), parent && (_jsxs("li", { className: "pt-1 text-muted-foreground text-xs", children: ["No grant of its own: the level on ", parent.name, ", by rank."] }))] })),
+            },
+            {
+                id: 'roles',
+                w: 3,
+                title: 'Roles',
+                icon: ShieldCheckIcon,
+                link: false,
+                children: (_jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm", children: [_jsx("dt", { className: "font-medium", children: "Admin" }), _jsx("dd", { className: "text-muted-foreground", children: "The top level on every scope; manages People. One is always kept." }), _jsx("dt", { className: "font-medium", children: "Member" }), _jsx("dd", { className: "text-muted-foreground", children: "Only the levels set per scope. The default for invites." })] })),
+            },
+        ] }));
+}
+const AUDIT_VIEW = peopleView('Audit log', {
+    columns: ['time', 'actor', 'kind', 'detail', 'target', 'via'],
+    chips: [{ key: 'kind' }],
+    filters: { fields: ['actor', 'kind', 'target', 'via', 'outcome'], default: [] },
+    group: { fields: ['day', 'kind', 'actor'], default: 'day' },
+    pagination: { on: true, size: 100 },
+    total: false,
+    cards: [{ id: 'audit', kind: 'table', w: 6, title: null }],
+});
+const WINDOWS = [
+    { value: '1', label: 'Last 24 hours' },
+    { value: '7', label: 'Last 7 days' },
+    { value: '30', label: 'Last 30 days' },
+    { value: '365', label: 'Last year' },
+];
+export function AuditSection({ frame }) {
+    const { adapter } = frame;
+    const [days, setDays] = useState('30');
+    const since = useMemo(() => Date.now() - Number(days) * 86_400_000, [days]);
+    const q = useQuery({
+        queryKey: ['lumen-people', adapter.key, 'audit', 'log', days],
+        queryFn: () => adapter.audit?.({ since, limit: 1000 }) ?? Promise.resolve({ events: [] }),
+    });
+    const load = useLumenLoad(q);
+    const layout = useVisitView(AUDIT_VIEW);
+    const domain = {
+        id: 'audit',
+        rowKey: (e) => e.id,
+        text: (e) => [e.actor, e.target, e.detail],
+        fields: [
+            {
+                key: 'day',
+                label: 'Day',
+                icon: ClockIcon,
+                value: (e) => new Date(e.at).toLocaleDateString(undefined, {
+                    weekday: 'short',
+                    day: 'numeric',
+                    month: 'short',
+                }),
+                format: 'text',
+                groupable: true,
+            },
+            {
+                key: 'time',
+                label: 'When',
+                icon: ClockIcon,
+                value: (e) => new Date(e.at).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }),
+                format: 'text',
+            },
+            {
+                key: 'actor',
+                label: 'Who',
+                icon: UserRoundIcon,
+                value: (e) => e.actor,
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            {
+                key: 'kind',
+                label: 'Kind',
+                icon: TagIcon,
+                value: (e) => e.kind,
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            {
+                key: 'detail',
+                label: 'What changed',
+                icon: TextIcon,
+                value: (e) => (e.refused ? `${e.detail} refused: ${e.refused}` : e.detail),
+                tint: (e) => (e.refused ? 'color-mix(in oklch, var(--loss) 8%, transparent)' : undefined),
+                format: 'text',
+                maxWidth: '28rem',
+            },
+            {
+                key: 'target',
+                label: 'Target',
+                icon: UserRoundIcon,
+                value: (e) => e.target,
+                format: 'text',
+                filterable: true,
+            },
+            {
+                key: 'via',
+                label: 'From',
+                icon: AppWindowIcon,
+                value: (e) => e.via,
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+            {
+                key: 'outcome',
+                label: 'Outcome',
+                icon: CircleDotIcon,
+                value: (e) => (e.refused ? 'Refused' : 'Done'),
+                format: 'text',
+                filterable: true,
+                groupable: true,
+            },
+        ],
+    };
+    return (_jsx(LumenLayout, { crumbs: frame.crumbs, actions: _jsx(LumenSelector, { label: "Window", size: "sm", value: days, options: WINDOWS, onChange: setDays }), intro: frame.tabs, domain: domain, ...layout, rows: q.data?.events ?? [], load: load, rowTitle: (e) => e.detail }));
+}

package/dist/people/shared.d.ts

@@ -0,0 +1,51 @@
+import { type Grant, type PeopleView, type Person, type PersonStatus, type Scope } from '@columenlabs/lumen-ui-types/people';
+import { type CustomViewConfig } from '@columenlabs/lumen-ui-types/views';
+import { type ReactNode } from 'react';
+import type { Crumb } from '../page.js';
+import type { ViewChipTone } from '../view-model.js';
+import type { PeopleAdapter, WithSync } from './client.js';
+export declare const STATUS_LABEL: Record<PersonStatus, string>;
+export declare const statusTone: (p: Pick<Person, 'status'>) => ViewChipTone | undefined;
+/** `today 09:12`, `yesterday 18:42`, `24 Oct`, `24 Oct 2025`; a dash for never. */
+export declare function when(ts: number | null | undefined, now?: number): string;
+/** `in 5 d`, `in 3 h`, `2 d ago`: how far a time is from now. */
+export declare function fromNow(ts: number | null | undefined, now?: number): string;
+/** The top scopes (apps), in order; constructs inside one have a `parent`. */
+export declare const topScopes: (scopes: readonly Scope[]) => Scope[];
+/** Grants with one scope's (and resource's) level set; the lowest level drops the grant. */
+export declare function withGrant(grants: readonly Grant[], scope: Scope, level: string, resource?: string): Grant[];
+/** Why a person's role or status cannot change (the last or built-in admin), or null. */
+export declare const adminGuard: (people: readonly Person[], p: Person, fixed: readonly string[]) => string | null;
+/** Runs a change, says how it went, and reloads the People data. A sign-in sync that failed is
+ *  said too: the change stands, but the provider still has the old list. */
+export declare function usePeopleAction(adapter: PeopleAdapter): <R extends WithSync | undefined>(run: () => Promise<R>, done: string, undo?: () => Promise<unknown>) => Promise<R | null>;
+/** One person's level on one scope (or one resource of it): a chip that changes it at once. Admins
+ *  and people without access show what they hold, fixed, with why on hover. */
+export declare function LevelPicker({ person, scope, scopes, resource, onPick, disabled, }: {
+    person: Person;
+    scope: Scope;
+    scopes: readonly Scope[];
+    resource?: string;
+    onPick: (level: string) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare const levelText: (scope: Scope, p: Person, scopes: readonly Scope[], resource?: string) => string;
+/** A page's default view, parsed so every setting has its default. */
+export declare const peopleView: (name: string, config: Record<string, unknown>) => CustomViewConfig;
+/** A view config the person changes for the visit, with Reset back to the code's. */
+export declare function useVisitView(view: CustomViewConfig): {
+    config: CustomViewConfig;
+    onConfigChange: import("react").Dispatch<import("react").SetStateAction<CustomViewConfig>>;
+    onReset: () => void;
+};
+export declare const scopeKey: (s: Scope) => string;
+export declare function usePeopleQuery(adapter: PeopleAdapter): import("@tanstack/react-query").UseQueryResult<PeopleView, Error>;
+/** What every section's page shares: the data, its crumbs, the tabs and the Invite button. */
+export interface PeopleFrame {
+    adapter: PeopleAdapter;
+    view: PeopleView;
+    crumbs: Crumb[];
+    tabs: ReactNode;
+    mailNote: ReactNode;
+    invite: ReactNode;
+}

package/dist/people/shared.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// What the People screens share: times in words, a person's status, the level picker and how a
+// change reports back.
+import { checkAdminFloor, levelLabel, levelOf, levelsOf, } from '@columenlabs/lumen-ui-types/people';
+import { customViewConfigSchema } from '@columenlabs/lumen-ui-types/views';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useState } from 'react';
+import { errorText } from '../integrations.js';
+import { LumenSelector } from '../lumen-selector.js';
+import { lumenToast } from '../lumen-toast.js';
+export const STATUS_LABEL = {
+    active: 'Active',
+    invited: 'Invited',
+    expired: 'Expired',
+    disabled: 'Disabled',
+};
+export const statusTone = (p) => p.status === 'active'
+    ? 'gain'
+    : p.status === 'invited'
+        ? 'info'
+        : p.status === 'expired'
+            ? 'amber'
+            : 'muted';
+const DAY = 86_400_000;
+const sameDay = (a, b) => a.toDateString() === b.toDateString();
+/** `today 09:12`, `yesterday 18:42`, `24 Oct`, `24 Oct 2025`; a dash for never. */
+export function when(ts, now = Date.now()) {
+    if (!ts)
+        return '—';
+    const d = new Date(ts);
+    const n = new Date(now);
+    const time = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+    if (sameDay(d, n))
+        return `today ${time}`;
+    if (sameDay(d, new Date(now - DAY)))
+        return `yesterday ${time}`;
+    return d.toLocaleDateString(undefined, {
+        day: 'numeric',
+        month: 'short',
+        ...(d.getFullYear() === n.getFullYear() ? {} : { year: 'numeric' }),
+    });
+}
+/** `in 5 d`, `in 3 h`, `2 d ago`: how far a time is from now. */
+export function fromNow(ts, now = Date.now()) {
+    if (!ts)
+        return '—';
+    const ms = ts - now;
+    const abs = Math.abs(ms);
+    const n = abs >= DAY
+        ? `${Math.round(abs / DAY)} d`
+        : abs >= 3_600_000
+            ? `${Math.round(abs / 3_600_000)} h`
+            : `${Math.max(1, Math.round(abs / 60_000))} min`;
+    return ms >= 0 ? `in ${n}` : `${n} ago`;
+}
+/** The top scopes (apps), in order; constructs inside one have a `parent`. */
+export const topScopes = (scopes) => scopes.filter((s) => !s.parent);
+/** Grants with one scope's (and resource's) level set; the lowest level drops the grant. */
+export function withGrant(grants, scope, level, resource) {
+    const rest = grants.filter((g) => !(g.scope === scope.id && (g.resource ?? '') === (resource ?? '')));
+    return level === levelsOf(scope)[0]?.id
+        ? rest
+        : [...rest, { scope: scope.id, level, ...(resource ? { resource } : {}) }];
+}
+/** Why a person's role or status cannot change (the last or built-in admin), or null. */
+export const adminGuard = (people, p, fixed) => checkAdminFloor(people, { id: p.id, role: 'member' }, fixed);
+/** Runs a change, says how it went, and reloads the People data. A sign-in sync that failed is
+ *  said too: the change stands, but the provider still has the old list. */
+export function usePeopleAction(adapter) {
+    const qc = useQueryClient();
+    return useCallback(async (run, done, undo) => {
+        try {
+            const r = await run();
+            const sync = r?.access && !r.access.ok ? ` Sign-in sync: ${r.access.detail}` : '';
+            if (sync)
+                lumenToast.warning(`${done}.${sync}`);
+            else if (undo)
+                lumenToast.undo(done, () => {
+                    void undo()
+                        .then(() => qc.invalidateQueries({ queryKey: ['lumen-people', adapter.key] }))
+                        .catch((e) => lumenToast.error(errorText(e)));
+                });
+            else
+                lumenToast.success(done);
+            return r;
+        }
+        catch (e) {
+            lumenToast.error(errorText(e));
+            return null;
+        }
+        finally {
+            await qc.invalidateQueries({ queryKey: ['lumen-people', adapter.key] });
+        }
+    }, [adapter, qc]);
+}
+/** One person's level on one scope (or one resource of it): a chip that changes it at once. Admins
+ *  and people without access show what they hold, fixed, with why on hover. */
+export function LevelPicker({ person, scope, scopes, resource, onPick, disabled, }) {
+    const fixed = person.role === 'admin'
+        ? 'Admins hold the top level everywhere'
+        : person.status === 'disabled'
+            ? 'Disabled: no access'
+            : person.status === 'expired'
+                ? 'Invite expired: resend it first'
+                : null;
+    const own = person.grants.some((g) => g.scope === scope.id && (g.resource ?? '') === (resource ?? ''));
+    const parent = scope.parent ? scopes.find((s) => s.id === scope.parent) : undefined;
+    const value = levelOf(person, scope, scopes, resource);
+    return (_jsx("span", { title: fixed ?? undefined, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(LumenSelector, { trigger: "chip", size: "sm", label: `${scope.name} for ${person.name || person.email}`, disabled: disabled || !!fixed, value: value, options: levelsOf(scope).map((l) => ({
+                value: l.id,
+                label: !own && parent && l.id === value ? `${l.label} (from ${parent.name})` : l.label,
+                description: l.description,
+            })), onChange: (level) => level !== value && onPick(level) }) }));
+}
+export const levelText = (scope, p, scopes, resource) => levelLabel(scope, levelOf(p, scope, scopes, resource));
+/** A page's default view, parsed so every setting has its default. */
+export const peopleView = (name, config) => ({ ...customViewConfigSchema.parse(config), name });
+/** A view config the person changes for the visit, with Reset back to the code's. */
+export function useVisitView(view) {
+    const [config, setConfig] = useState(view);
+    return { config, onConfigChange: setConfig, onReset: () => setConfig(view) };
+}
+export const scopeKey = (s) => `scope_${s.id.replace(/[^a-z0-9]/gi, '_').toLowerCase()}`;
+export function usePeopleQuery(adapter) {
+    return useQuery({ queryKey: ['lumen-people', adapter.key], queryFn: () => adapter.view() });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,10 @@
       "types": "./dist/ui/*.d.ts",
       "default": "./dist/ui/*.js"
     },
+    "./people": {
+      "types": "./dist/people/index.d.ts",
+      "default": "./dist/people/index.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "files": [
@@ -41,7 +45,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.65",
+    "@columenlabs/lumen-ui-types": "0.1.67",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",