@protobase/ui 0.59.2 → 0.59.3

package/dist/app/app.js

@@ -10,6 +10,7 @@ import { humanize } from "../live/naming.js";
 import { text } from "./messages.js";
 import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
+import { useStatuses } from "../status/use-statuses.js";
 import { ProjectUiContext, useProjectUi } from "./pages/project-ui.js";
 import { RecordTitles, useRecordTitle } from "./titles/record-titles.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
@@ -62,6 +63,7 @@ import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
 import { StaffBanner } from "./staff-banner.js";
 import { useNavRecent } from "./use-nav-recent.js";
 import { LiveUpdateGate } from "./live-update/live-update-gate.js";
+import { useStatusMenu } from "../status/use-status-menu.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { viewOfList } from "@protobase/schema/internal";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -114,6 +116,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const Actions = shell?.actions;
 	const RightPanel = shell?.rightPanel;
 	const bell = meta.bell && user && !staff && /* @__PURE__ */ jsx(ShellBell, { own: shell?.bell });
+	const status = useStatusMenu(Boolean(meta.status && user && !staff));
+	const statuses = useStatuses().data;
 	const [assistantOpen, setAssistantOpen] = useState(false);
 	const assistantUrl = meta.assistant?.url;
 	const assistantButton = assistantUrl && /* @__PURE__ */ jsx(AssistantButton, {
@@ -187,7 +191,10 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	}) : organizationPage && (path === "/-/organization/members" || path === "/-/organization/invitations") ? !managesOrganization(current) ? /* @__PURE__ */ jsx(Notice, {
 		title: text("ownersOnly"),
 		children: text("onlyOwners")
-	}) : path === "/-/organization/members" ? /* @__PURE__ */ jsx(MembersPage, { current }) : /* @__PURE__ */ jsx(InvitationsPage, { current }) : organizationPage && path === "/-/organizations" || outsideOrganizations ? /* @__PURE__ */ jsx(OrganizationsPage, {
+	}) : path === "/-/organization/members" ? /* @__PURE__ */ jsx(MembersPage, {
+		current,
+		statuses
+	}) : /* @__PURE__ */ jsx(InvitationsPage, { current }) : organizationPage && path === "/-/organizations" || outsideOrganizations ? /* @__PURE__ */ jsx(OrganizationsPage, {
 		state: organizations,
 		basePath
 	}) : !address ? path === "/" ? /* @__PURE__ */ jsx(Notice, {
@@ -210,7 +217,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		recordKey: address.key
 	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, navItemId(address.resource, address.list));
 	const pluginNotice = admin && pluginsOff.length > 0;
-	return /* @__PURE__ */ jsx(AppShell, {
+	return /* @__PURE__ */ jsxs(AppShell, {
 		pageScroll: true,
 		sidebarMode: sidebarMode ?? "text-small",
 		activeItem: place ?? "",
@@ -242,6 +249,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			preference: theme.preference,
 			onChange: theme.choose
 		},
+		...status.menu && { status: status.menu },
 		roles: role.current?.active ? {
 			active: role.current.active,
 			roles: role.current.roles,
@@ -279,7 +287,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(RightPanel, {})
 		}), assistantPanel] }),
-		children: content
+		children: [content, status.dialog]
 	});
 };
 const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {

package/dist/app-shell/app-shell.js

@@ -11,7 +11,7 @@ import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appName, appIcon, logo, actions, rightPanel, sidebarNotice, banner, forceExpanded, profileMenuOpen, navGroups, userMenu, account, bottomBar, onNavigate, onBack, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appName, appIcon, logo, actions, rightPanel, sidebarNotice, banner, forceExpanded, profileMenuOpen, navGroups, userMenu, account, bottomBar, onNavigate, onBack, onSignOut, signIn, organizations, roles, theme, status, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const noticeShown = useSidebarNoticeShown(sidebarMode);
 	const [drawerOpen, setDrawerOpen] = useState(false);
@@ -46,6 +46,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 		organizations,
 		roles,
 		theme,
+		status,
 		logo
 	});
 	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {

package/dist/app-shell/profile-menu.d.ts

@@ -1,2 +1,3 @@
 import "../primitives/badge.js";
+import { ReactNode } from "react";
 import "lucide-react";

package/dist/app-shell/profile-menu.js

@@ -5,12 +5,12 @@ import { Badge } from "../primitives/badge.js";
 import { SwitchGroup } from "./switch-group.js";
 import { ThemeSwitch } from "./theme-switch.js";
 import { useEffect, useRef, useState } from "react";
-import { ChevronsUpDown, LogOut } from "lucide-react";
+import { ChevronsUpDown, LogOut, SmilePlus } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/profile-menu.tsx
 const menuRow = "flex min-h-11 w-full items-center gap-2.5 px-3 py-1.5 text-left text-muted-foreground hover:bg-muted md:min-h-0";
 /** The person at the bottom of the sidebar; the menu is fixed to the viewport so a narrow sidebar cannot clip it. */
-const ProfileMenu = ({ user, compact, open: controlled, items = [], account, onNavigate, onSignOut, organizations, roles, theme }) => {
+const ProfileMenu = ({ user, compact, open: controlled, items = [], account, onNavigate, onSignOut, organizations, roles, theme, status }) => {
 	const activeRole = roles?.roles.find((role) => role.name === roles.active);
 	const [local, setLocal] = useState(false);
 	const open = controlled ?? local;
@@ -60,7 +60,13 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], account, onN
 				className: "ring-0"
 			}), !compact && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 				className: "min-w-0 flex-1 leading-tight",
-				children: [/* @__PURE__ */ jsx("span", {
+				children: [status?.mark ? /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate font-medium",
+						children: user.name
+					}), status.mark]
+				}) : /* @__PURE__ */ jsx("span", {
 					className: "block truncate font-medium",
 					children: user.name
 				}), /* @__PURE__ */ jsx(Badge, {
@@ -100,6 +106,22 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], account, onN
 						children: user.email
 					})]
 				}),
+				status && /* @__PURE__ */ jsx("div", {
+					className: "border-b py-1",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "menuitem",
+						className: menuRow,
+						onClick: () => {
+							setLocal(false);
+							status.onOpen();
+						},
+						children: [/* @__PURE__ */ jsx(SmilePlus, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: status.label
+						})]
+					})
+				}),
 				organizations && (organizations.current || organizations.others.length > 0) && /* @__PURE__ */ jsx(SwitchGroup, {
 					label: text("organizations"),
 					...organizations.current && { current: {

package/dist/app-shell/sidebar.js

@@ -13,7 +13,7 @@ import { Fragment } from "react";
 import { LogIn } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, account, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo, notice }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, account, onNavigate, onSignOut, signIn, organizations, roles, theme, status, sticky, logo: SidebarLogo = Logo, notice }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -70,7 +70,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						onSignOut,
 						organizations,
 						roles,
-						theme
+						theme,
+						status
 					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
 						theme,
 						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-muted-foreground md:min-h-0"

package/dist/data/api-provider.d.ts

@@ -71,6 +71,12 @@ export declare const useClient: () => {
     markRead: (id: string) => Promise<void>;
     markAllRead: (upTo: string) => Promise<void>;
   };
+  status: {
+    own: () => Promise<import("@protobase/client").PersonStatus | null>;
+    set: (status: import("@protobase/client").StatusInput) => Promise<import("@protobase/client").PersonStatus | null>;
+    clear: () => Promise<void>;
+    people: () => Promise<import("@protobase/client").PersonStatus[]>;
+  };
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -144,6 +150,12 @@ export declare const useResourceClient: (resource: string) => {
     markRead: (id: string) => Promise<void>;
     markAllRead: (upTo: string) => Promise<void>;
   };
+  status: {
+    own: () => Promise<import("@protobase/client").PersonStatus | null>;
+    set: (status: import("@protobase/client").StatusInput) => Promise<import("@protobase/client").PersonStatus | null>;
+    clear: () => Promise<void>;
+    people: () => Promise<import("@protobase/client").PersonStatus[]>;
+  };
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/data/meta-data.d.ts

@@ -50,6 +50,8 @@ export type MetaData = {
   };
   /** Whether the top bar draws the notification bell: the app has notifications and their `ui` is not false (see `ShellBell`). */
   bell?: boolean;
+  /** Whether people set their own status and see those they share an organization with (see `useStatuses`). */
+  status?: boolean;
   /** The language the app's screens are in for everyone, when it sets one (see `AppLocale`). */
   locale?: Locale;
   /** The hosts besides the app's own whose images are drawn with the page's referrer (see `FileImage`). */

package/dist/data/query-keys.js

@@ -164,6 +164,14 @@ const keys = {
 	inboxPages: ["inbox", "pages"],
 	/** The people of the organization the session of this user works in (`useMembers`). */
 	members: (userId) => ["members", userId],
+	/** The statuses of everyone who shares an organization with this user (`useStatuses`). */
+	statuses: (userId) => ["statuses", userId],
+	/** This user's own status (`useOwnStatus`). */
+	ownStatus: (userId) => [
+		"statuses",
+		userId,
+		"own"
+	],
 	/** A public form, as `/-/forms/<name>` draws it. */
 	publicForm: (name) => ["public-form", name]
 };

package/dist/data/use-meta.js

@@ -45,6 +45,7 @@ const useMeta = () => {
 				...result.meta.errorReporting && { errorReporting: result.meta.errorReporting },
 				...result.meta.maps && { maps: result.meta.maps },
 				...result.meta.notifications?.bell && { bell: true },
+				...result.meta.status && { status: true },
 				...result.meta.locale && { locale: result.meta.locale },
 				...result.meta.files && { files: result.meta.files },
 				...result.meta.plugins && { plugins: result.meta.plugins },

package/dist/index.d.ts

@@ -30,7 +30,9 @@ import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { PushState } from "./notifications/push/web-push.js";
 import { SignedInUser, useSignedInUser } from "./auth/use-signed-in-user.js";
-import { MembersResult, useMembers } from "./people/use-members.js";
+import { Member, MembersResult, useMembers } from "./people/use-members.js";
+import { AvailabilityMark, StatusMark, StatusMarkProps } from "./status/status-mark.js";
+import { statusRefreshMs, useOwnStatus, useStatuses } from "./status/use-statuses.js";
 import { usePushNotifications } from "./notifications/push/use-push-notifications.js";
 import { useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./notifications/bell/use-inbox.js";
 import { SignInPrompt, SignInPromptProps } from "./auth/sign-in-prompt.js";
@@ -84,4 +86,4 @@ import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { RecordPicker, RecordPickerProps } from "./app/record-picker.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MarksHook, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, type RecordMark, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type SignedInUser, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, type TitleReader, type TitleRule, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useUnreadNotifications, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, AvailabilityMark, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MarksHook, type Member, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, type RecordMark, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type SignedInUser, Spinner, StatusMark, type StatusMarkProps, type Step, StepList, type StepState, Textarea, type TextareaProps, type TitleReader, type TitleRule, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, statusRefreshMs, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, useOwnStatus, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useStatuses, useUnreadNotifications, useUpdateRecord };

package/dist/index.js

@@ -12,6 +12,7 @@ import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { Segmented } from "./primitives/segmented.js";
 import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
+import { statusRefreshMs, useOwnStatus, useStatuses } from "./status/use-statuses.js";
 import { useMembers } from "./people/use-members.js";
 import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { OtpInput } from "./primitives/otp-input.js";
@@ -54,6 +55,7 @@ import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { Form } from "./app/create/form.js";
+import { AvailabilityMark, StatusMark } from "./status/status-mark.js";
 import { usePushNotifications } from "./notifications/push/use-push-notifications.js";
 import { useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./notifications/bell/use-inbox.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
@@ -63,4 +65,4 @@ import { useSignedInUser } from "./auth/use-signed-in-user.js";
 import { Carousel } from "./carousel/carousel.js";
 import { Choices } from "./primitives/choices.js";
 import { RecordPicker } from "./app/record-picker.js";
-export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, Carousel, ChatDivider, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MentionBox, MentionedText, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useUnreadNotifications, useUpdateRecord };
+export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, AvailabilityMark, Button, Carousel, ChatDivider, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MentionBox, MentionedText, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StatusMark, StepList, Textarea, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, statusRefreshMs, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, useOwnStatus, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useStatuses, useUnreadNotifications, useUpdateRecord };

package/dist/organizations/members-page.js

@@ -9,6 +9,7 @@ import { text } from "./messages.js";
 import { AppRolesPicker } from "./app-roles-picker.js";
 import { grantableRoles, organizationRoleLabel } from "./organization-paths.js";
 import { PersonRow } from "../people/person-row.js";
+import { StatusMark } from "../status/status-mark.js";
 import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -19,7 +20,7 @@ const assignableOrganizationRoles = (current) => current?.role === "owner" ? [
 	"admin",
 	"member"
 ] : ["admin", "member"];
-const MemberRow = ({ member, current, onChanged }) => {
+const MemberRow = ({ member, current, status, onChanged }) => {
 	const { session, organizations } = useAuth();
 	const organizationId = current.organization.id;
 	const { busy, error, run } = useAction();
@@ -33,6 +34,7 @@ const MemberRow = ({ member, current, onChanged }) => {
 		email: member.email,
 		self,
 		error,
+		...status && { status: /* @__PURE__ */ jsx(StatusMark, { status }) },
 		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("select", {
 			"aria-label": text("roleOf", member.name),
 			value: member.role,
@@ -71,9 +73,10 @@ const MemberRow = ({ member, current, onChanged }) => {
 };
 /**
 * The members of the organization one works in, for its owners and admins: organization roles, which decide who
-* manages it, and app roles, which decide what each sees and does; only roles the person may give can change.
+* manages it, and app roles, which decide what each sees and does; only roles the person may give can change. In an
+* app with status, `statuses` puts each member's beside their name (see `useStatuses`).
 */
-const MembersPage = ({ current }) => {
+const MembersPage = ({ current, statuses }) => {
 	const { session } = useAuth();
 	const [members, setMembers] = useState();
 	const [error, setError] = useState();
@@ -96,6 +99,7 @@ const MembersPage = ({ current }) => {
 				children: members.map((member) => /* @__PURE__ */ jsx(MemberRow, {
 					member,
 					current,
+					status: statuses?.find((status) => status.userId === member.userId),
 					onChanged: load
 				}, `${member.id}/${member.role}/${member.appRoles.join()}`))
 			}) : !error && /* @__PURE__ */ jsxs("div", {

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.59.2";
+var version = "0.59.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/people/person-row.js

@@ -2,14 +2,20 @@ import { SectionError } from "../account/account-section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/people/person-row.tsx
 /** Someone in a list of people: their name, " (you)" on one's own row, their address, what can be done and their roles. */
-const PersonRow = ({ name, email, self, actions, children, error }) => /* @__PURE__ */ jsxs("li", {
+const PersonRow = ({ name, email, self, actions, children, error, status }) => /* @__PURE__ */ jsxs("li", {
 	className: "flex flex-col gap-2 px-3 py-3",
 	children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center gap-2",
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsxs("span", {
+				children: [status ? /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "truncate font-medium",
+						children: [name, self && " (you)"]
+					}), status]
+				}) : /* @__PURE__ */ jsxs("span", {
 					className: "block truncate font-medium",
 					children: [name, self && " (you)"]
 				}), /* @__PURE__ */ jsx("span", {

package/dist/people/use-members.d.ts

@@ -1,14 +1,19 @@
-import { OrganizationPerson } from "@protobase/client";
+import { OrganizationPerson, PersonStatus } from "@protobase/client";
 import { UseQueryResult } from "@tanstack/react-query";
 //#region src/people/use-members.d.ts
-export type MembersResult = UseQueryResult<OrganizationPerson[]> & {
+/** A member, with their status in an app with `status: {}` when they have one that holds (see `useStatuses`). */
+export type Member = OrganizationPerson & {
+  status?: PersonStatus;
+};
+export type MembersResult = UseQueryResult<Member[]> & {
   /** The member with this user id; an unknown one reads the list again (see `asksAgainFor`). */
-  member: (id: string) => OrganizationPerson | undefined;
+  member: (id: string) => Member | undefined;
 };
 /**
  * The members of the organization the session works in, as `{ id, name, image? }` with `id` the user id that
  * `.author()` stores and mentions hold, by name, readable by every member and without addresses. Read again on focus
- * once 30 s old, and when `member` is asked for an id it lacks. Without organizations or the app's auth it fails
+ * once 30 s old, and when `member` is asked for an id it lacks. In an app with `status: {}`, each carries their
+ * status, which is read again every 15 seconds (see `useStatuses`). Without organizations or the app's auth it fails
  * saying so.
  */
 export declare const useMembers: () => MembersResult;

package/dist/people/use-members.js

@@ -1,5 +1,6 @@
 import { useOptionalAuth } from "../auth/auth-provider.js";
 import { keys } from "../data/query-keys.js";
+import { useStatuses } from "../status/use-statuses.js";
 import { useCallback, useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 //#region src/people/use-members.ts
@@ -7,10 +8,22 @@ import { useQuery } from "@tanstack/react-query";
 const unknownIdRefetchMs = 1e4;
 /** Whether an id the list lacks reads it again: once it has loaded, is not being read, and is old enough. */
 const asksAgainFor = (query, now = Date.now()) => query.isSuccess && !query.isFetching && now - query.dataUpdatedAt >= 1e4;
+/** The members, each with their status when they have one. */
+const withStatuses = (people, statuses) => {
+	const byUser = new Map(statuses.map((status) => [status.userId, status]));
+	return people.map((person) => {
+		const status = byUser.get(person.id);
+		return status ? {
+			...person,
+			status
+		} : person;
+	});
+};
 /**
 * The members of the organization the session works in, as `{ id, name, image? }` with `id` the user id that
 * `.author()` stores and mentions hold, by name, readable by every member and without addresses. Read again on focus
-* once 30 s old, and when `member` is asked for an id it lacks. Without organizations or the app's auth it fails
+* once 30 s old, and when `member` is asked for an id it lacks. In an app with `status: {}`, each carries their
+* status, which is read again every 15 seconds (see `useStatuses`). Without organizations or the app's auth it fails
 * saying so.
 */
 const useMembers = () => {
@@ -24,7 +37,9 @@ const useMembers = () => {
 			return auth.session.organizations.people();
 		}
 	});
-	const byId = useMemo(() => new Map((query.data ?? []).map((person) => [person.id, person])), [query.data]);
+	const statuses = useStatuses().data;
+	const data = useMemo(() => query.data && (statuses ? withStatuses(query.data, statuses) : query.data), [query.data, statuses]);
+	const byId = useMemo(() => new Map((data ?? []).map((person) => [person.id, person])), [data]);
 	const { refetch } = query;
 	const member = useCallback((id) => {
 		const found = byId.get(id);
@@ -37,8 +52,9 @@ const useMembers = () => {
 	]);
 	return {
 		...query,
+		data,
 		member
 	};
 };
 //#endregion
-export { asksAgainFor, unknownIdRefetchMs, useMembers };
+export { asksAgainFor, unknownIdRefetchMs, useMembers, withStatuses };