@protobase/ui 0.60.1 → 0.62.0

package/dist/app/app.js

@@ -41,8 +41,10 @@ import { CreateRoute } from "./create/create-route.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta, navItemId } from "./nav-from-meta.js";
 import { ListPage } from "./list-page.js";
+import { usePresence } from "../presence/presence.js";
 import { MembersPage } from "../organizations/members-page.js";
 import { InvitationsPage } from "../organizations/invitations-page.js";
+import { PresenceProvider } from "../presence/presence-provider.js";
 import { reopenIn, useOrganizations } from "../organizations/use-organizations.js";
 import { OrganizationPage } from "../organizations/organization-page.js";
 import { OrganizationsPage } from "../organizations/organizations-page.js";
@@ -118,6 +120,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	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 presence = usePresence();
 	const [assistantOpen, setAssistantOpen] = useState(false);
 	const assistantUrl = meta.assistant?.url;
 	const assistantButton = assistantUrl && /* @__PURE__ */ jsx(AssistantButton, {
@@ -193,7 +196,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		children: text("onlyOwners")
 	}) : path === "/-/organization/members" ? /* @__PURE__ */ jsx(MembersPage, {
 		current,
-		statuses
+		statuses,
+		presence
 	}) : /* @__PURE__ */ jsx(InvitationsPage, { current }) : organizationPage && path === "/-/organizations" || outsideOrganizations ? /* @__PURE__ */ jsx(OrganizationsPage, {
 		state: organizations,
 		basePath
@@ -302,12 +306,12 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 		onUnauthenticated: markSignedOut,
 		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsxs(ToastProvider, { children: [!sidebarBanner && /* @__PURE__ */ jsx(NewVersionToast, {}), path === connectRoute ? /* @__PURE__ */ jsx(ConnectRoute, {}) : /* @__PURE__ */ jsx(PluginGate, {
 			ui,
-			children: /* @__PURE__ */ jsx(RecordTitles, { children: /* @__PURE__ */ jsx(Routes, {
+			children: /* @__PURE__ */ jsx(PresenceProvider, { children: /* @__PURE__ */ jsx(RecordTitles, { children: /* @__PURE__ */ jsx(Routes, {
 				workspace,
 				sidebarMode,
 				assistant,
 				runtime
-			}) })
+			}) }) })
 		})] }) })
 	});
 };

package/dist/app/marks/mark-people.js

@@ -0,0 +1,24 @@
+import { presenceOf } from "../../presence/presence.js";
+//#region src/app/marks/mark-people.ts
+/**
+* The marks as the sidebar draws them: each mark that names a `person` carries that person's presence and status, by
+* their user id, each left out when the app gives none for them.
+*/
+const markPeople = (marks, presence, statuses) => {
+	if (!marks) return;
+	const statusOf = new Map((statuses ?? []).map((status) => [status.userId, status]));
+	return Object.fromEntries(Object.entries(marks).map(([key, { person, ...mark }]) => {
+		if (person === void 0) return [key, mark];
+		const status = statusOf.get(person);
+		const shown = presenceOf(presence, person);
+		return [key, {
+			...mark,
+			person: {
+				...status && { status },
+				...shown && { presence: shown }
+			}
+		}];
+	}));
+};
+//#endregion
+export { markPeople };

package/dist/app/pages/merge-ui.d.ts

@@ -3,7 +3,8 @@ import { ProjectUi } from "./project-ui.js";
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
  * handlers, field types, drop rules, board drops, title rules and marks hooks are all kept, and one name defined by two configs is an error naming both; every shell slot
- * and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one.
+ * and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one,
+ * as is the presence hook.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
 //#endregion

package/dist/app/pages/merge-ui.js

@@ -36,7 +36,8 @@ const around = (wrappers) => {
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
 * handlers, field types, drop rules, board drops, title rules and marks hooks are all kept, and one name defined by two configs is an error naming both; every shell slot
-* and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one.
+* and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one,
+* as is the presence hook.
 */
 const mergeUi = (...uis) => {
 	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
@@ -51,6 +52,7 @@ const mergeUi = (...uis) => {
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
 	const logo = named.findLast(({ ui }) => ui.shell?.logo)?.ui.shell?.logo;
 	const bell = named.findLast(({ ui }) => ui.shell?.bell)?.ui.shell?.bell;
+	const presence = named.findLast(({ ui }) => ui.presence)?.ui.presence;
 	const beforeSignIn = around(named.flatMap(({ ui }) => ui.beforeSignIn ? [ui.beforeSignIn] : []));
 	const name = uis.at(-1)?.name;
 	return {
@@ -68,6 +70,7 @@ const mergeUi = (...uis) => {
 			...logo && { logo },
 			...bell && { bell }
 		} },
+		...presence && { presence },
 		...beforeSignIn && { beforeSignIn }
 	};
 };

package/dist/app/pages/project-ui.d.ts

@@ -1,3 +1,4 @@
+import { PresenceHook } from "../../presence/presence.js";
 import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
 import { BoardDrop } from "../displays/board-drop.js";
@@ -48,7 +49,7 @@ export type BeforeSignInProps = {
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
  * field types by the name a view's `.widget(name)` chooses, drop rules by the name a list's `drag.rule` gives, board
- * drops by the name a list's `drag.board` gives, title rules by the name a view's `.titleFrom` gives, marks hooks by the name a view's `nav.recent.marks` gives, and the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
+ * drops by the name a list's `drag.board` gives, title rules by the name a view's `.titleFrom` gives, marks hooks by the name a view's `nav.recent.marks` gives, the app's presence, and the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
  * (`import * as tasksUi from '...'`), their exported components included; `name` names it in their errors.
  */
 export type ProjectUi = {
@@ -66,6 +67,11 @@ export type ProjectUi = {
   titles?: Record<string, TitleRule>;
   /** How the sidebar marks a resource's records for the person reading, by the name a view's `nav.recent.marks` gives (see `MarksHook`). */
   marks?: Record<string, MarksHook>;
+  /**
+   * Who is online or away, by user id, from the app's own presence (see `PresenceHook`): the members page and the
+   * sidebar rows whose mark names a `person` show it beside each person's status.
+   */
+  presence?: PresenceHook;
   /**
    * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, `logo`
    * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`), and `bell` in the top bar in place of the

package/dist/app/use-nav-recent.js

@@ -1,12 +1,16 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { useStatuses } from "../status/use-statuses.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { useRecordTitle } from "./titles/record-titles.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
+import { usePresence } from "../presence/presence.js";
+import { markPeople } from "./marks/mark-people.js";
 import { recentMarks, recentRecords, recentRequest, recentRowDiffers } from "./nav-recent.js";
 import { useEffect, useMemo } from "react";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-nav-recent.ts
+const withPeople = (useMarks) => useMarks && (() => markPeople(useMarks(), usePresence(), useStatuses().data));
 const groupKey = ({ model, request }) => keys.navRecent(model.name, request.filter, request.orderBy, request.pageSize);
 /**
 * Refetches a group when a record of its resource is read anew (a record page, or an app following one) and shows
@@ -32,7 +36,8 @@ const useFollowRecords = (groups) => {
 /**
 * The records of every sidebar group (`nav.recent`), one list request each, under the `list` query key so that any
 * write to the resource refreshes them, as does reading one of their records anew. The server applies the caller's
-* access, as on the list page. A group that names `marks` gets the project UI's hook, which the sidebar calls.
+* access, as on the list page. A group that names `marks` gets the project UI's hook, which the sidebar calls, its
+* marks' people given their presence and status.
 */
 const useNavRecent = (meta, basePath, active) => {
 	const client = useClient();
@@ -48,7 +53,7 @@ const useNavRecent = (meta, basePath, active) => {
 				view,
 				recent,
 				request: recentRequest(model, view, recent),
-				useMarks: recentMarks(model.name, recent, marks)
+				useMarks: withPeople(recentMarks(model.name, recent, marks))
 			}] : [];
 		});
 	}, [meta, marks]);

package/dist/app-shell/nav.d.ts

@@ -1,14 +1,17 @@
+import "../status/status-mark.js";
 import "lucide-react";
 import "@protobase/schema";
 //#region src/app-shell/nav.d.ts
 /**
  * How a record under a sidebar entry stands out for the person reading, such as an unread conversation: `strong` draws
  * its title bold, `count` a badge at the end of its row (none at 0), and `label`, such as "3 mentions", is added to its
- * name for screen readers and its tooltip.
+ * name for screen readers and its tooltip. `person`, a user id, names the one person the record stands for, such as
+ * the other person in a direct message: the row shows their presence and status beside its title.
  */
 export type RecordMark = {
   strong?: boolean;
   count?: number;
   label?: string;
+  person?: string;
 };
 //#endregion

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

@@ -1,3 +1,6 @@
+import { text } from "../status/messages.js";
+import { availabilityLabel } from "../status/status-mark.js";
+import { heldStatus } from "@protobase/schema/internal";
 //#region src/app-shell/record-marks.ts
 const markRecords = (records, marks) => records.map((record) => {
 	const mark = marks && Object.hasOwn(marks, record.id) ? marks[record.id] : void 0;
@@ -6,9 +9,25 @@ const markRecords = (records, marks) => records.map((record) => {
 		mark
 	} : record;
 });
-/** What a sidebar record is called for screen readers and in its tooltip: its title, with its status and its mark's label. */
+const personWords = (person) => {
+	if (!person) return [];
+	const held = heldStatus(person.status);
+	return [
+		person.presence && text(person.presence),
+		held && held.availability !== "automatic" ? availabilityLabel(held.availability) : void 0,
+		held?.text ?? void 0
+	];
+};
+/**
+* What a sidebar record is called for screen readers and in its tooltip: its title, with its status, its person's
+* presence and status, and its mark's label.
+*/
 const recordNames = (record) => {
-	const extra = [record.status?.label, record.mark?.label].filter((part) => part !== void 0 && part !== "");
+	const extra = [
+		record.status?.label,
+		...personWords(record.mark?.person),
+		record.mark?.label
+	].filter((part) => part !== void 0 && part !== "");
 	return {
 		ariaLabel: [record.label, ...extra].join(", "),
 		title: extra.length === 0 ? record.label : `${record.label} (${extra.join(", ")})`

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

@@ -1,8 +1,9 @@
 import { cn } from "../lib/cn.js";
 import { subRow } from "./sidebar-rows.js";
 import { CountBadge } from "../primitives/count-badge.js";
-import { markRecords, recordNames } from "./record-marks.js";
 import { StatusDot } from "./status-dot.js";
+import { StatusMark } from "../status/status-mark.js";
+import { markRecords, recordNames } from "./record-marks.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-records.tsx
 const RecordRows = ({ records, mode, onNavigate }) => records.map((record) => {
@@ -28,6 +29,11 @@ const RecordRows = ({ records, mode, onNavigate }) => records.map((record) => {
 				className: "truncate",
 				children: record.label
 			}),
+			record.mark?.person && /* @__PURE__ */ jsx(StatusMark, {
+				...record.mark.person,
+				textShown: "hover",
+				className: "ml-1.5 shrink-0"
+			}),
 			/* @__PURE__ */ jsx(CountBadge, {
 				count: record.mark?.count,
 				className: "ml-auto shrink-0"

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { Presence, PresenceHook, usePresence } from "./presence/presence.js";
+import { AvailabilityMark, StatusMark, StatusMarkProps } from "./status/status-mark.js";
 import { RecordMark } from "./app-shell/nav.js";
 import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
@@ -31,7 +33,6 @@ 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 { 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";
@@ -86,4 +87,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, 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 };
+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 Presence, type PresenceHook, 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, usePresence, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useStatuses, useUnreadNotifications, useUpdateRecord };

package/dist/index.js

@@ -21,6 +21,7 @@ import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { LogoMark } from "./app-shell/logo.js";
+import { AvailabilityMark, StatusMark } from "./status/status-mark.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
@@ -55,7 +56,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 { usePresence } from "./presence/presence.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";
@@ -65,4 +66,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, 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 };
+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, usePresence, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useStatuses, useUnreadNotifications, useUpdateRecord };

package/dist/organizations/members-page.js

@@ -1,6 +1,7 @@
 import { useAuth } from "../auth/auth-provider.js";
 import { Spinner } from "../primitives/spinner.js";
 import { Button } from "../primitives/button.js";
+import { StatusMark } from "../status/status-mark.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { AccountSection, SectionError } from "../account/account-section.js";
 import { authMessage } from "../auth/auth-messages.js";
@@ -9,7 +10,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 { presenceOf } from "../presence/presence.js";
 import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +21,7 @@ const assignableOrganizationRoles = (current) => current?.role === "owner" ? [
 	"admin",
 	"member"
 ] : ["admin", "member"];
-const MemberRow = ({ member, current, status, onChanged }) => {
+const MemberRow = ({ member, current, status, presence, onChanged }) => {
 	const { session, organizations } = useAuth();
 	const organizationId = current.organization.id;
 	const { busy, error, run } = useAction();
@@ -34,7 +35,10 @@ const MemberRow = ({ member, current, status, onChanged }) => {
 		email: member.email,
 		self,
 		error,
-		...status && { status: /* @__PURE__ */ jsx(StatusMark, { status }) },
+		...(status || presence) && { status: /* @__PURE__ */ jsx(StatusMark, {
+			status,
+			presence
+		}) },
 		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("select", {
 			"aria-label": text("roleOf", member.name),
 			value: member.role,
@@ -74,9 +78,10 @@ const MemberRow = ({ member, current, status, 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. In an
-* app with status, `statuses` puts each member's beside their name (see `useStatuses`).
+* app with status, `statuses` puts each member's beside their name (see `useStatuses`), and `presence`, the app's, puts
+* whether they are online or away before it (see `usePresence`).
 */
-const MembersPage = ({ current, statuses }) => {
+const MembersPage = ({ current, statuses, presence }) => {
 	const { session } = useAuth();
 	const [members, setMembers] = useState();
 	const [error, setError] = useState();
@@ -100,6 +105,7 @@ const MembersPage = ({ current, statuses }) => {
 					member,
 					current,
 					status: statuses?.find((status) => status.userId === member.userId),
+					presence: presenceOf(presence, 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.60.1";
+var version = "0.62.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/presence/presence-dot.js

@@ -0,0 +1,17 @@
+import { StatusDot } from "../app-shell/status-dot.js";
+import { text } from "../status/messages.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/presence/presence-dot.tsx
+/** Online or away as a dot, named for screen readers and on hover. */
+const PresenceDot = ({ presence }) => {
+	const label = text(presence);
+	return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": label,
+		title: label,
+		className: "flex shrink-0",
+		children: /* @__PURE__ */ jsx(StatusDot, { tone: presence === "online" ? "success" : "neutral" })
+	});
+};
+//#endregion
+export { PresenceDot };

package/dist/presence/presence-provider.js

@@ -0,0 +1,36 @@
+import { useProjectUi } from "../app/pages/project-ui.js";
+import { PresenceContext, createPresenceStore } from "./presence.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/presence/presence-provider.tsx
+const PresenceReader = ({ usePresence, store }) => {
+	const presence = usePresence();
+	useEffect(() => store.set(presence), [store, presence]);
+	useEffect(() => () => store.set(void 0), [store]);
+	return null;
+};
+/**
+* Calls the project UI's `presence` hook once, for every place that shows presence beneath it (see `usePresence`).
+* A hook a plugin brings late, after the app first drew, starts its own reader, so the hooks never mix.
+*/
+const PresenceProvider = ({ children }) => {
+	const { presence } = useProjectUi();
+	const [store] = useState(createPresenceStore);
+	const [reader, setReader] = useState({
+		hook: presence,
+		key: 0
+	});
+	if (reader.hook !== presence) setReader({
+		hook: presence,
+		key: reader.key + 1
+	});
+	return /* @__PURE__ */ jsxs(PresenceContext.Provider, {
+		value: store,
+		children: [presence && /* @__PURE__ */ jsx(PresenceReader, {
+			usePresence: presence,
+			store
+		}, reader.key), children]
+	});
+};
+//#endregion
+export { PresenceProvider };

package/dist/presence/presence.d.ts

@@ -0,0 +1,14 @@
+//#region src/presence/presence.d.ts
+/** Whether someone has a page of the app open and in use, `away` when open but idle; by the app's own rule. */
+export type Presence = 'online' | 'away';
+/**
+ * The app's presence, by user id, as `presence` in `protobase.ui.tsx` gives it: a React hook, called once while the app
+ * shows, so it may use the app's own channels and live updates. Someone it leaves out has no page open, and shows no
+ * presence; returning undefined, as while it loads, shows none.
+ */
+export type PresenceHook = () => PresenceByUser | undefined;
+/** Presence by user id. */
+export type PresenceByUser = Readonly<Record<string, Presence>>;
+/** The app's presence by user id, undefined in an app that gives none (see `PresenceProvider`). */
+export declare const usePresence: () => Readonly<Record<string, Presence>> | undefined;
+//#endregion

package/dist/presence/presence.js

@@ -0,0 +1,31 @@
+import { createContext, useContext, useSyncExternalStore } from "react";
+//#region src/presence/presence.ts
+/** Holds the latest presence the app's hook gave, so the places that show it read it without calling the hook again. */
+const createPresenceStore = () => {
+	let latest;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => latest,
+		set: (presence) => {
+			if (presence === latest) return;
+			latest = presence;
+			for (const listener of listeners) listener();
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => void listeners.delete(listener);
+		}
+	};
+};
+const PresenceContext = createContext(void 0);
+const nobody = () => () => {};
+const none = () => void 0;
+/** The app's presence by user id, undefined in an app that gives none (see `PresenceProvider`). */
+const usePresence = () => {
+	const store = useContext(PresenceContext);
+	return useSyncExternalStore(store?.subscribe ?? nobody, store?.get ?? none, store?.get ?? none);
+};
+/** One person's presence, from presence by user id: nothing for someone it leaves out. */
+const presenceOf = (presence, userId) => presence && Object.hasOwn(presence, userId) ? presence[userId] : void 0;
+//#endregion
+export { PresenceContext, createPresenceStore, presenceOf, usePresence };