@columenlabs/lumen-ui 0.1.237 → 0.1.239

package/dist/people/lumen-people.js

@@ -19,7 +19,7 @@ import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTi
 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';
+import { LevelPicker, STATUS_LABEL, fromNow, peopleView, scopeKey, statusTone, syncText, 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;
@@ -167,8 +167,13 @@ function PeopleList({ frame, fields, onInvite, }) {
     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: "Can\u2019t remove the last admin" }), _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) }) })] }));
+    // The first-run note stands in for the table only when it has no row; a lone admin is a row.
+    const none = people.length === 0;
+    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: "Can\u2019t remove the last admin" }), _jsx(Tile, { label: "Invites pending", value: invited, caption: expired ? `${expired} expired` : 'none expired' }), view.sync ? (_jsx(Tile, { label: "Sign-in sync", value: syncText(view.sync), caption: !view.sync.configured
+                                        ? 'Invites don’t reach sign-in'
+                                        : view.sync.at
+                                            ? when(view.sync.at)
+                                            : view.sync.detail, valueClassName: !view.sync.configured || 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: none ? _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, }) {

package/dist/people/person-drawer.js

@@ -14,7 +14,7 @@ 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';
+import { LevelPicker, STATUS_LABEL, adminGuard, fromNow, syncText, 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' },
@@ -47,7 +47,9 @@ export function PersonDrawer({ adapter, view, person, onClose, }) {
                             },
                             view.sync && {
                                 label: 'Sign-in provider',
-                                value: `${view.sync.ok ? 'Synced' : 'Out of step'} · ${when(view.sync.at)}`,
+                                value: view.sync.at
+                                    ? `${syncText(view.sync)} · ${when(view.sync.at)}`
+                                    : syncText(view.sync),
                             },
                         ] }) }), adapter.audit && _jsx(ActivitySection, { adapter: adapter, person: p }), _jsx(DangerSection, { adapter: adapter, person: p, guard: guard, onGone: onClose })] })) }));
 }

package/dist/people/shared.d.ts

@@ -1,4 +1,4 @@
-import { type Grant, type PeopleView, type Person, type PersonStatus, type Scope } from '@columenlabs/lumen-ui-types/people';
+import { type Grant, type PeopleView, type Person, type PersonStatus, type Scope, type SyncStatus } 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';
@@ -12,6 +12,8 @@ export declare const statusTone: (p: Pick<Person, 'status'>) => ViewChipTone | u
  */
 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. */
+/** A sign-in sync's one-word state: never set up is not a failed sync. */
+export declare const syncText: (s: Pick<SyncStatus, 'configured' | 'ok'>) => "Not set up" | "Out of step" | "Synced";
 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[];

package/dist/people/shared.js

@@ -53,6 +53,8 @@ export function when(ts, now = Date.now()) {
     }));
 }
 /** `in 5 d`, `in 3 h`, `2 d ago`: how far a time is from now. */
+/** A sign-in sync's one-word state: never set up is not a failed sync. */
+export const syncText = (s) => !s.configured ? 'Not set up' : s.ok ? 'Synced' : 'Out of step';
 export function fromNow(ts, now = Date.now()) {
     if (!ts)
         return '—';

package/dist/setting-parts.js

@@ -24,9 +24,12 @@ export function SettingField({ label, info, htmlFor, end, stack = false, classNa
     const query = useContext(SettingsSearch);
     if (query && !settingMatches(query, label, info))
         return null;
-    return (_jsxs("div", { "data-slot": "setting-field", "data-stack": stack || undefined, className: cn('flex min-h-10 min-w-0 items-center gap-3 border-t border-border/60 py-1.5 first:border-t-0', stack && 'max-sm:flex-wrap max-sm:gap-y-1.5', className), children: [_jsxs("div", { className: cn('flex w-32 shrink-0 items-center gap-1.5 max-sm:w-24', stack && 'max-sm:w-auto max-sm:flex-1', 
+    return (_jsxs("div", { "data-slot": "setting-field", "data-stack": stack || undefined, className: cn('flex min-h-10 min-w-0 items-center gap-3 border-t border-border/60 py-1.5 first:border-t-0', stack && 'max-sm:flex-wrap max-sm:gap-y-1.5', className), children: [_jsxs("div", { className: cn(
+                // At least the usual column, wider for a longer name, so a label is never cut; on a phone
+                // it may take up to half the row and wraps there instead of cutting.
+                'flex min-w-32 shrink-0 items-center gap-1.5 max-sm:min-w-24 max-sm:max-w-[50%] max-sm:shrink', stack && 'max-sm:w-auto max-sm:flex-1', 
                 // Nothing beside it but `end`: the label takes the row, so a short name never cuts off.
-                children === undefined && 'w-auto min-w-0 flex-1 shrink max-sm:w-auto'), children: [_jsx(Label, { htmlFor: htmlFor, className: "truncate font-normal text-muted-foreground", title: label, children: label }), info && _jsx(InfoTip, { label: `About ${label}`, children: info })] }), children !== undefined && (_jsx("div", { className: cn('flex min-w-0 max-w-md flex-1 items-center gap-2', stack && 'max-sm:order-2 max-sm:max-w-none max-sm:basis-full'), children: children })), end && _jsx("div", { className: cn('ml-auto shrink-0', stack && 'max-sm:order-1'), children: end })] }));
+                children === undefined && 'w-auto min-w-0 flex-1 shrink max-sm:w-auto'), children: [_jsx(Label, { htmlFor: htmlFor, className: "whitespace-nowrap font-normal text-muted-foreground max-sm:whitespace-normal max-sm:break-words", title: label, children: label }), info && _jsx(InfoTip, { label: `About ${label}`, children: info })] }), children !== undefined && (_jsx("div", { className: cn('flex min-w-0 max-w-md flex-1 items-center gap-2', stack && 'max-sm:order-2 max-sm:max-w-none max-sm:basis-full'), children: children })), end && _jsx("div", { className: cn('ml-auto shrink-0', stack && 'max-sm:order-1'), children: end })] }));
 }
 /** A value read in place: cut to one line with the full text on hover, with Copy and Replace inside. */
 export function SettingValue({ value, label, mono = false, copy = false, onReplace, replaceLabel = 'Replace', replaceIcon: ReplaceIcon = PencilIcon, }) {

package/package.json

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