@columenlabs/lumen-ui 0.1.236 → 0.1.238

package/dist/assistant/settings.js

@@ -9,6 +9,7 @@ import { InfoLabel } from '../info-tip.js';
 import { errorText } from '../integrations.js';
 import { LumenSelector } from '../lumen-selector.js';
 import { lumenToast } from '../lumen-toast.js';
+import { SettingField } from '../setting-parts.js';
 import { ShareMeter } from '../share-meter.js';
 import { Badge } from '../ui/badge.js';
 import { Button } from '../ui/button.js';
@@ -67,26 +68,23 @@ function WithStatus({ client, children, }) {
     return _jsx(_Fragment, { children: children(q.data) });
 }
 /** One setting: its label (with an (i) when `info` says more) and its control. */
-function Row({ label, info, children }) {
-    return (_jsxs("div", { "data-slot": "setting-row", className: "flex flex-wrap items-center gap-x-4 gap-y-2 border-b py-3 last:border-b-0", children: [_jsx(Label, { className: "min-w-0 flex-1", children: _jsx(InfoLabel, { info: info, children: label }) }), _jsx("div", { className: "shrink-0", children: children })] }));
-}
 // ---------------------------------------------------------------- the assistant
 function General({ client }) {
     const { apply } = useApply(client);
     const set = (patch) => apply('settings', () => client.settings(patch));
     return (_jsx(WithStatus, { client: client, children: (s) => {
             const above = s.tiers.slice(s.tiers.findIndex((t) => t.id === s.tier) + 1);
-            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(Row, { label: "Tier", children: _jsx(LumenSelector, { label: "Tier", size: "sm", className: "w-44", value: s.tier, options: s.tiers.map((t) => ({
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(SettingField, { label: "Tier", children: _jsx(LumenSelector, { label: "Tier", size: "sm", className: "w-44", value: s.tier, options: s.tiers.map((t) => ({
                                 value: t.id,
                                 label: t.label,
                                 detail: t.model_label,
-                            })), onChange: (tier) => void set({ tier }) }) }), s.tiers.length > 1 && (_jsx(Row, { label: "Hand off the work", info: "On its own, a higher tier takes one task in its own section of the chat and sends back a memo. It costs more.", children: _jsx(LumenSelector, { label: "Hand off the work", size: "sm", className: "w-44", value: s.hand_off, options: HAND_OFF, onChange: (hand_off) => void set({ hand_off }) }) })), s.tiers.length > 1 && (_jsx(Row, { label: "Ask for advice", info: "A bigger tier reads the chat and sends a plan before hard questions. It runs no tools, at most twice an answer.", children: _jsx(LumenSelector, { label: "Ask for advice", size: "sm", className: "w-44", value: s.advice, options: [
+                            })), onChange: (tier) => void set({ tier }) }) }), s.tiers.length > 1 && (_jsx(SettingField, { label: "Hand off the work", info: "On its own, a higher tier takes one task in its own section of the chat and sends back a memo. It costs more.", children: _jsx(LumenSelector, { label: "Hand off the work", size: "sm", className: "w-44", value: s.hand_off, options: HAND_OFF, onChange: (hand_off) => void set({ hand_off }) }) })), s.tiers.length > 1 && (_jsx(SettingField, { label: "Ask for advice", info: "A bigger tier reads the chat and sends a plan before hard questions. It runs no tools, at most twice an answer.", children: _jsx(LumenSelector, { label: "Ask for advice", size: "sm", className: "w-44", value: s.advice, options: [
                                 { value: 'off', label: 'Off' },
                                 ...(above.length ? above : s.tiers).map((t) => ({
                                     value: t.id,
                                     label: t.label,
                                 })),
-                            ], onChange: (advice) => void set({ advice }) }) })), _jsx(Row, { label: "Screen", info: "Takes you to a page, a Settings row, a chart or a card when you ask. Each move has an Undo; nothing is saved.", children: _jsx(LumenSelector, { label: "Screen", size: "sm", className: "w-44", value: s.screen ?? 'move', options: [
+                            ], onChange: (advice) => void set({ advice }) }) })), _jsx(SettingField, { label: "Screen", info: "Takes you to a page, a Settings row, a chart or a card when you ask. Each move has an Undo; nothing is saved.", children: _jsx(LumenSelector, { label: "Screen", size: "sm", className: "w-44", value: s.screen ?? 'move', options: [
                                 { value: 'move', label: 'Move' },
                                 { value: 'off', label: 'Off' },
                             ], onChange: (screen) => void set({ screen: screen }) }) })] }));
@@ -173,10 +171,10 @@ function Providers({ client }) {
             // is exactly what the server may pay with.
             const rows = s.providers.filter((p) => !p.own_ways || p.own_ways.length > 0);
             const ownSet = rows.some(ownUsable);
-            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: rows.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), ownSet && (_jsx(Row, { label: "Answers run on", info: "Your own key or plan first, with the shared credits behind it; or the shared credits first.", children: _jsx(LumenSelector, { label: "Answers run on", size: "sm", className: "w-44", value: s.pay, options: [
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsx(LumenExpandList, { children: rows.map((p) => (_jsx(OwnProviderKey, { client: client, p: p }, p.id))) }), ownSet && (_jsx(SettingField, { label: "Answers run on", info: "Your own key or plan first, with the shared credits behind it; or the shared credits first.", children: _jsx(LumenSelector, { label: "Answers run on", size: "sm", className: "w-44", value: s.pay, options: [
                                 { value: 'own', label: 'Your own first' },
                                 { value: 'app', label: 'Shared credits first' },
-                            ], onChange: (pay) => void apply('pay', () => client.settings({ pay: pay })) }) })), ownSet && (_jsx(Row, { label: "Your keys may spend", info: "On your keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) })), _jsx(OwnKeyUsage, { client: client, always: ownSet })] }));
+                            ], onChange: (pay) => void apply('pay', () => client.settings({ pay: pay })) }) })), ownSet && (_jsx(SettingField, { label: "Your keys may spend", info: "On your keys, every provider together.", children: _jsx(CapInput, { label: "Your monthly cap", value: s.caps.own, onSave: (n) => void apply('own', () => client.ownCap(n)) }) })), _jsx(OwnKeyUsage, { client: client, always: ownSet })] }));
         } }));
 }
 /** One provider's shared key, which an admin sets for everyone. */
@@ -212,7 +210,7 @@ function SharedCap({ client, s }) {
     const { apply } = useApply(client);
     if (s.allowance?.period === 'once')
         return null;
-    return (_jsx(Row, { label: "Each person may spend", info: "A month on the shared keys, every provider together. Past it, a person's own key pays.", children: _jsx(CapInput, { label: "Allowance per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) }));
+    return (_jsx(SettingField, { label: "Each person may spend", info: "A month on the shared keys, every provider together. Past it, a person's own key pays.", children: _jsx(CapInput, { label: "Allowance per person", value: s.caps.app, onSave: (n) => void apply('cap', () => client.appCap(n)) }) }));
 }
 /** Admins only: the app's shared keys and what each person may spend on them. */
 function SharedKeys({ client }) {
@@ -243,15 +241,15 @@ function Models({ client }) {
             return (_jsxs("div", { className: "flex flex-col", children: [s.tiers.map((t) => {
                         const p = s.providers.find((x) => x.id === t.provider);
                         const keyless = p && !p.app.set && !p.app.from_env && !p.own.set && !p.plan?.set;
-                        return (_jsx(Row, { label: t.label, info: t.about, children: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [keyless && _jsxs(Badge, { variant: "outline", children: ["No ", p.label, " key"] }), _jsx(LumenSelector, { label: `${t.label} model`, size: "sm", className: "w-36 sm:w-44", value: t.model, options: models, onChange: (model) => set({ tiers: { [t.id]: { model } } }) }), _jsx(LumenSelector, { label: `${t.label} effort`, size: "sm", className: "w-24 sm:w-32", value: t.effort, options: EFFORTS, onChange: (effort) => set({ tiers: { [t.id]: { effort } } }) })] }) }, t.id));
+                        return (_jsx(SettingField, { label: t.label, info: t.about, children: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [keyless && _jsxs(Badge, { variant: "outline", children: ["No ", p.label, " key"] }), _jsx(LumenSelector, { label: `${t.label} model`, size: "sm", className: "w-36 sm:w-44", value: t.model, options: models, onChange: (model) => set({ tiers: { [t.id]: { model } } }) }), _jsx(LumenSelector, { label: `${t.label} effort`, size: "sm", className: "w-24 sm:w-32", value: t.effort, options: EFFORTS, onChange: (effort) => set({ tiers: { [t.id]: { effort } } }) })] }) }, t.id));
                     }), s.tasks.length > 1 &&
-                        s.tasks.map((task) => (_jsx(Row, { label: `${task.label} starts on`, children: _jsx(LumenSelector, { label: `${task.label} starts on`, size: "sm", className: "w-44", value: task.tier, options: tiers, onChange: (tier) => set({ tasks: { [task.id]: tier } }) }) }, task.id)))] }));
+                        s.tasks.map((task) => (_jsx(SettingField, { label: `${task.label} starts on`, children: _jsx(LumenSelector, { label: `${task.label} starts on`, size: "sm", className: "w-44", value: task.tier, options: tiers, onChange: (tier) => set({ tasks: { [task.id]: tier } }) }) }, task.id)))] }));
         } }));
 }
 // ---------------------------------------------------------------- tools
 function Tools({ client }) {
     const { apply } = useApply(client);
-    return (_jsx(WithStatus, { client: client, children: (s) => s.groups.length ? (_jsx("div", { className: "flex flex-col", children: s.groups.map((g) => (_jsx(Row, { label: g.label, info: g.about, children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: g.access, "aria-label": g.label, onValueChange: (v) => v &&
+    return (_jsx(WithStatus, { client: client, children: (s) => s.groups.length ? (_jsx("div", { className: "flex flex-col", children: s.groups.map((g) => (_jsx(SettingField, { label: g.label, info: g.about, children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: g.access, "aria-label": g.label, onValueChange: (v) => v &&
                         void apply('access', () => client.settings({ access: { [g.id]: v } })), children: ACCESS.filter((a) => (a.value !== 'draft' || g.drafts) && (a.value !== 'write' || g.writes)).map((a) => (_jsx(ToggleGroupItem, { value: a.value, children: a.label }, a.value))) }) }, g.id))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "This app gives the assistant no tools yet." })) }));
 }
 // ---------------------------------------------------------------- web
@@ -302,7 +300,7 @@ function ScrapeqlBlock({ client, s }) {
 }
 function Web({ client }) {
     const { apply } = useApply(client);
-    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(Row, { label: "Read the web", info: "A plain fetch of public pages and APIs from the server, never the app's own pages.", children: _jsx(Switch, { "aria-label": "Read the web", checked: s.web.fetch, onCheckedChange: (fetch) => void apply('web', () => client.settings({ web: { fetch } })) }) }), _jsx(ScrapeqlBlock, { client: client, s: s })] })) }));
+    return (_jsx(WithStatus, { client: client, children: (s) => (_jsxs("div", { className: "flex flex-col", children: [_jsx(SettingField, { label: "Read the web", info: "A plain fetch of public pages and APIs from the server, never the app's own pages.", children: _jsx(Switch, { "aria-label": "Read the web", checked: s.web.fetch, onCheckedChange: (fetch) => void apply('web', () => client.settings({ web: { fetch } })) }) }), _jsx(ScrapeqlBlock, { client: client, s: s })] })) }));
 }
 // ---------------------------------------------------------------- spend
 function Spend({ client }) {
@@ -346,7 +344,7 @@ function Allowance({ client }) {
                     : [{ where: 'What for', message: 'Say what it is for', target: whyId }]),
             ];
             const ask = () => void apply('request', () => requestMore(Number(pick), why.trim()), 'Request sent').then((ok) => ok && setWhy(''));
-            return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-2 border-b pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-semibold text-2xl tabular-nums", children: n(a.left) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: ["left of ", n(a.total), a.period === 'month' ? ' this month' : ''] })] }), _jsx(ShareMeter, { value: a.total > 0 ? a.used / a.total : 1, wide: true })] }), r && (_jsx(Row, { label: `Asked for ${n(r.amount)} · ${day(r.at)}`, info: r.why || undefined, children: _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [r.status === 'granted' && r.granted !== undefined && (_jsxs("span", { className: "tabular-nums", children: ["+", n(r.granted)] })), _jsx(RequestBadge, { r: r })] }) })), r?.status === 'open' ? (_jsx("p", { className: "pt-3 text-muted-foreground text-sm", children: "You can ask again once this one is decided." })) : (_jsxs("div", { className: "flex flex-col gap-2 pt-3", children: [_jsx(Input, { id: whyId, "aria-label": "What for", placeholder: "What it is for", className: "h-8 w-full", maxLength: 500, value: why, onChange: (e) => setWhy(e.target.value) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenSelector, { label: "Amount", size: "sm", className: "w-40", value: pick, options: a.amounts.map((x) => ({ value: String(x), label: n(x) })), onChange: (v) => setAmount(v) }), _jsx(SaveButton, { issues: issues, label: "Request more", icon: SendIcon, busy: busy === 'request', onSave: ask })] })] }))] }));
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-2 border-b pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-semibold text-2xl tabular-nums", children: n(a.left) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: ["left of ", n(a.total), a.period === 'month' ? ' this month' : ''] })] }), _jsx(ShareMeter, { value: a.total > 0 ? a.used / a.total : 1, wide: true })] }), r && (_jsx(SettingField, { label: `Asked for ${n(r.amount)} · ${day(r.at)}`, info: r.why || undefined, children: _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [r.status === 'granted' && r.granted !== undefined && (_jsxs("span", { className: "tabular-nums", children: ["+", n(r.granted)] })), _jsx(RequestBadge, { r: r })] }) })), r?.status === 'open' ? (_jsx("p", { className: "pt-3 text-muted-foreground text-sm", children: "You can ask again once this one is decided." })) : (_jsxs("div", { className: "flex flex-col gap-2 pt-3", children: [_jsx(Input, { id: whyId, "aria-label": "What for", placeholder: "What it is for", className: "h-8 w-full", maxLength: 500, value: why, onChange: (e) => setWhy(e.target.value) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenSelector, { label: "Amount", size: "sm", className: "w-40", value: pick, options: a.amounts.map((x) => ({ value: String(x), label: n(x) })), onChange: (v) => setAmount(v) }), _jsx(SaveButton, { issues: issues, label: "Request more", icon: SendIcon, busy: busy === 'request', onSave: ask })] })] }))] }));
         } }));
 }
 /** One request, opened in place to grant (any amount) or decline. */

package/dist/assistant/usage-history.js

@@ -6,6 +6,7 @@ import { DetailsTable } from '../details-table.js';
 import { IconButton } from '../icon-button.js';
 import { InfoLabel } from '../info-tip.js';
 import { cn } from '../lib/utils.js';
+import { SettingField } from '../setting-parts.js';
 import { Label } from '../ui/label.js';
 import { Spinner } from '../ui/spinner.js';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group.js';
@@ -119,7 +120,7 @@ export function OwnKeyUsage({ client, always }) {
         .filter((e) => e.at >= since && !seen.has(e.id) && seen.add(e.id))
         .sort((a, b) => b.at - a.at);
     const total = sessions.reduce((a, e) => a + (e.own_usd ?? 0), 0);
-    return (_jsxs("div", { "data-slot": "setting-row", className: "flex flex-col gap-2 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Label, { className: "min-w-0 flex-1", children: _jsx(InfoLabel, { info: "Each chat and run your own key or plan paid for, by its last use.", children: "Spent on your keys" }) }), _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: range, "aria-label": "Range", onValueChange: (v) => v && setRange(v), children: OWN_RANGES.map((r) => (_jsx(ToggleGroupItem, { value: r.id, "aria-label": `Last ${r.id}`, children: r.id }, r.id))) })] }), sessions.length ? (_jsx(DetailsTable, { head: [
+    return (_jsxs("div", { className: "flex flex-col gap-2 border-t border-border/60 pb-3 first:border-t-0", children: [_jsx(SettingField, { label: "Spent on your keys", info: "Each chat and run your own key or plan paid for, by its last use.", className: "border-t-0", end: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: range, "aria-label": "Range", onValueChange: (v) => v && setRange(v), children: OWN_RANGES.map((r) => (_jsx(ToggleGroupItem, { value: r.id, "aria-label": `Last ${r.id}`, children: r.id }, r.id))) }) }), sessions.length ? (_jsx(DetailsTable, { head: [
                     { label: 'Session', grow: true },
                     { label: 'Date', hideOnPhone: true },
                     { label: 'Amount', right: true },

package/dist/assistant-screen.js

@@ -162,7 +162,7 @@ function ScreenProvider({ children }) {
                 return null;
             const want = m.row.toLowerCase();
             const row = await waitFor(() => [
-                ...document.querySelectorAll('[data-slot="settings"] [data-slot="setting-row"]'),
+                ...document.querySelectorAll('[data-slot="settings"] [data-slot="setting-field"]'),
             ].find((el) => el.querySelector('label')?.textContent?.trim().toLowerCase().includes(want)));
             if (!row)
                 return `no row "${m.row}" in that section`;

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.d.ts

@@ -1,5 +1,8 @@
 import { type ComponentType, type ReactNode } from 'react';
 import { type KeyTestResult } from './integrations.js';
+/** What Settings' search box holds: a `SettingField` whose label or info misses it hides. */
+export declare const SettingsSearch: import("react").Context<string>;
+export declare const settingMatches: (query: string, ...texts: ReactNode[]) => boolean;
 /** One setting inside an item: its label, then its control group, then an optional switch at the end. */
 export declare function SettingField({ label, info, htmlFor, end, stack, className, children, }: {
     /** The setting's own name ("Keys", "Webhook"), never the thing's ("Plaid keys"). */
@@ -14,7 +17,7 @@ export declare function SettingField({ label, info, htmlFor, end, stack, classNa
     className?: string;
     /** The control: an input, a picker, a `SettingValue`, a ToggleGroup. Its own buttons sit inside it. */
     children?: ReactNode;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 /** A value read in place: cut to one line with the full text on hover, with Copy and Replace inside. */
 export declare function SettingValue({ value, label, mono, copy, onReplace, replaceLabel, replaceIcon: ReplaceIcon, }: {
     value: string;

package/dist/setting-parts.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // A row is never a lone button ("Last test", "Remove keys"), and a label never repeats the thing's name.
 // Built on shadcn's Field and InputGroup parts.
 import { AlertTriangleIcon, CheckIcon, CopyIcon, PencilIcon, RefreshCwIcon, Trash2Icon, } from 'lucide-react';
-import { useState } from 'react';
+import { createContext, useContext, useState } from 'react';
 import { LumenConfirm } from './confirm.js';
 import { IconButton } from './icon-button.js';
 import { InfoTip } from './info-tip.js';
@@ -16,8 +16,14 @@ import { cn } from './lib/utils.js';
 import { Badge } from './ui/badge.js';
 import { InputGroup, InputGroupAddon, InputGroupButton } from './ui/input-group.js';
 import { Label } from './ui/label.js';
+/** What Settings' search box holds: a `SettingField` whose label or info misses it hides. */
+export const SettingsSearch = createContext('');
+export const settingMatches = (query, ...texts) => texts.some((t) => typeof t === 'string' && t.toLowerCase().includes(query.toLowerCase()));
 /** One setting inside an item: its label, then its control group, then an optional switch at the end. */
 export function SettingField({ label, info, htmlFor, end, stack = false, className, children, }) {
+    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', 
                 // 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 })] }));

package/dist/settings.d.ts

@@ -31,13 +31,17 @@ export declare function SettingsActions({ children }: {
 export declare function SettingsFooter({ children }: {
     children: ReactNode;
 }): import("react").ReactPortal | null;
-/** One setting: title and description on the left, its control on the right. */
+/**
+ * One setting: the kit's `SettingField` (docs/parts/settings.md), with `description` behind its (i).
+ * Kept so older call sites build; it draws nothing of its own. New code uses `SettingField`.
+ * @deprecated Use `SettingField`.
+ */
 export declare function SettingRow({ label, description, htmlFor, children, }: {
     label: string;
     description?: ReactNode;
     htmlFor?: string;
     children: ReactNode;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;
 /** Light, dark or system: in Settings with labels, in the profile menu as icons with tooltips. */
 export declare function ThemeToggle({ compact }: {
     compact?: boolean;

package/dist/settings.js

@@ -13,7 +13,7 @@ import { useAssistantMoves } from './assistant-screen.js';
 import { InfoTip } from './info-tip.js';
 import { LumenSelector } from './lumen-selector.js';
 import { FONTS, FONT_SIZES, setPref, usePrefs, } from './prefs.js';
-import { SettingStatus } from './setting-parts.js';
+import { SettingField, SettingStatus, SettingsSearch, settingMatches as matches, } from './setting-parts.js';
 import { TimeZoneSelect } from './status.js';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from './ui/dialog.js';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
@@ -29,8 +29,6 @@ const THEMES = [
     { value: 'system', label: 'Follow the device', short: 'System', icon: MonitorIcon },
 ];
 /** The Settings search text; rows that do not match it hide. */
-const SearchContext = createContext('');
-const matches = (query, ...texts) => texts.some((t) => typeof t === 'string' && t.toLowerCase().includes(query.toLowerCase()));
 /** The open section's header slot for its actions (Add and Resync sit by the
  *  title, not on a sub-header). Each section gets its own, so search results keep theirs apart. */
 const ActionsSlot = createContext(null);
@@ -51,12 +49,13 @@ function ActionsScope({ children, }) {
     const [foot, setFoot] = useState(null);
     return (_jsx(ActionsSlot.Provider, { value: el, children: _jsx(FooterSlot.Provider, { value: foot, children: children(setEl, setFoot) }) }));
 }
-/** One setting: title and description on the left, its control on the right. */
+/**
+ * One setting: the kit's `SettingField` (docs/parts/settings.md), with `description` behind its (i).
+ * Kept so older call sites build; it draws nothing of its own. New code uses `SettingField`.
+ * @deprecated Use `SettingField`.
+ */
 export function SettingRow({ label, description, htmlFor, children, }) {
-    const query = useContext(SearchContext);
-    if (query && !matches(query, label, description))
-        return null;
-    return (_jsxs("div", { "data-slot": "setting-row", className: "flex items-center gap-4 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx(Label, { htmlFor: htmlFor, className: "truncate", children: label }), description && _jsx(InfoTip, { label: `About ${label}`, children: description })] }), _jsx("div", { className: "shrink-0", children: children })] }));
+    return (_jsx(SettingField, { label: label, info: description, htmlFor: htmlFor, children: children }));
 }
 /** Light, dark or system: in Settings with labels, in the profile menu as icons with tooltips. */
 export function ThemeToggle({ compact = false }) {
@@ -148,7 +147,7 @@ export function LumenSettings({ open, section, onOpen, onClose, appLabel, profil
         if (!q)
             return;
         const ids = [...(pane.current?.querySelectorAll('[data-settings-section]') ?? [])]
-            .filter((el) => el.dataset.whole === 'true' || el.querySelector('[data-slot=setting-row]'))
+            .filter((el) => el.dataset.whole === 'true' || el.querySelector('[data-slot=setting-field]'))
             .map((el) => el.dataset.settingsSection ?? '');
         setFound((f) => (f.join() === ids.join() ? f : ids));
     });
@@ -201,6 +200,6 @@ export function LumenSettings({ open, section, onOpen, onClose, appLabel, profil
                             const whole = matches(q, s.title, s.description);
                             return (_jsx(ActionsScope, { children: (slot) => (_jsxs("div", { "data-settings-section": s.id, "data-whole": whole, "aria-labelledby": `settings-${s.id}-title`, className: whole
                                         ? 'flex flex-col gap-3'
-                                        : 'hidden flex-col gap-3 has-[[data-slot=setting-row]]:flex', children: [header(s, slot), _jsx(Separator, {}), _jsx(SearchContext.Provider, { value: whole ? '' : q, children: s.content })] })) }, s.id));
+                                        : 'hidden flex-col gap-3 has-[[data-slot=setting-field]]:flex', children: [header(s, slot), _jsx(Separator, {}), _jsx(SettingsSearch.Provider, { value: whole ? '' : q, children: s.content })] })) }, s.id));
                         }), !found.length && (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["No settings match \u201C", q, "\u201D."] }))] })) : (_jsx(ActionsScope, { children: (slot, footer) => (_jsxs("section", { "aria-labelledby": `settings-${current.id}-title`, className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex shrink-0 flex-col gap-3 px-4 pt-4 md:px-6 md:pt-6", children: [header(current, slot), _jsx(Separator, {})] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-4 pt-3 pb-4 *:shrink-0 md:px-6 [&:has(+[data-slot=settings-footer]:empty)]:end-fade", children: current.content }), _jsx("div", { ref: footer, "data-slot": "settings-footer", className: "flex min-h-12 shrink-0 items-center justify-end gap-2 border-t px-4 py-2 empty:hidden md:px-6", children: current.footer })] })) }, current.id))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.236",
+  "version": "0.1.238",
   "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.236",
+    "@columenlabs/lumen-ui-types": "0.1.238",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",