@protobase/ui 0.45.19 → 0.45.21

package/dist/app/app.js

@@ -49,6 +49,7 @@ import { actingUser } from "../roles/acting-user.js";
 import { useActiveRole } from "../roles/use-active-role.js";
 import { startAddress } from "./start-address.js";
 import { ProjectLogo } from "./project-logo.js";
+import { ShellBell } from "./shell-bell.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
 import { RecordPage } from "./record-page.js";
@@ -114,6 +115,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const { shell } = useProjectUi();
 	const Actions = shell?.actions;
 	const RightPanel = shell?.rightPanel;
+	const bell = meta.bell && user && !staff && /* @__PURE__ */ jsx(ShellBell, { own: shell?.bell });
 	const [assistantOpen, setAssistantOpen] = useState(false);
 	const assistantUrl = meta.assistant?.url;
 	const assistantButton = assistantUrl && /* @__PURE__ */ jsx(AssistantButton, {
@@ -254,12 +256,13 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			groups: search.groups,
 			onSelect: open
 		} : void 0,
-		actions: (Actions || reloadButton || runtimeButton || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		actions: (Actions || bell || reloadButton || runtimeButton || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			Actions && /* @__PURE__ */ jsx(CustomBoundary, {
 				name: "shell.actions",
 				fallback: null,
 				children: /* @__PURE__ */ jsx(Actions, {})
 			}),
+			bell,
 			reloadButton,
 			runtimeButton,
 			assistantButton

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

@@ -3,7 +3,7 @@ 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 and board drops 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, 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.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
 //#endregion

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

@@ -36,7 +36,7 @@ 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 and board drops 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, 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.
 */
 const mergeUi = (...uis) => {
 	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
@@ -48,6 +48,7 @@ const mergeUi = (...uis) => {
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	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 beforeSignIn = around(named.flatMap(({ ui }) => ui.beforeSignIn ? [ui.beforeSignIn] : []));
 	const name = uis.at(-1)?.name;
 	return {
@@ -57,10 +58,11 @@ const mergeUi = (...uis) => {
 		...Object.keys(fields).length > 0 && { fields },
 		...Object.keys(dropRules).length > 0 && { dropRules },
 		...Object.keys(boardDrops).length > 0 && { boardDrops },
-		...(actionSlot || rightPanel || logo) && { shell: {
+		...(actionSlot || rightPanel || logo || bell) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel },
-			...logo && { logo }
+			...logo && { logo },
+			...bell && { bell }
 		} },
 		...beforeSignIn && { beforeSignIn }
 	};

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

@@ -61,13 +61,16 @@ export type ProjectUi = {
   /** Which columns of a board take a card and what a drop there writes, by the name a view's `drag.board` gives (see `BoardDrop`). */
   boardDrops?: Record<string, BoardDrop>;
   /**
-   * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, and `logo`
-   * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`).
+   * 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
+   * notification bell, where that would be: with notifications on and their `ui` not false, for someone signed in as
+   * themselves.
    */
   shell?: {
     actions?: ComponentType;
     rightPanel?: ComponentType;
     logo?: ComponentType<ShellLogoProps>;
+    bell?: ComponentType;
   };
   /**
    * Drawn around the pages someone signed out sees, only for a plugin the app loads before sign-in (`beforeSignIn` in

package/dist/app/shell-bell.js

@@ -0,0 +1,12 @@
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { NotificationBell } from "../notifications/bell/notification-bell.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/shell-bell.tsx
+/** The top bar's notification bell, or the project's or a plugin's `shell.bell` in its place. */
+const ShellBell = ({ own: Own }) => Own ? /* @__PURE__ */ jsx(CustomBoundary, {
+	name: "shell.bell",
+	fallback: null,
+	children: /* @__PURE__ */ jsx(Own, {})
+}) : /* @__PURE__ */ jsx(NotificationBell, {});
+//#endregion
+export { ShellBell };

package/dist/auth/auth-provider.js

@@ -1,8 +1,9 @@
 import { nativeAuthFetch } from "../app/native-auth-fetch.js";
+import { pushNotifications } from "../notifications/push/push-notifications.js";
 import { providerName, withoutSignInLink } from "./provider-link.js";
 import { text } from "./messages.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { createAuthSession } from "@protobase/client";
+import { createAuthSession, createClient } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/auth-provider.tsx
 const AuthContext = createContext(null);
@@ -32,7 +33,11 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 	const [beforeSignIn, setBeforeSignIn] = useState([]);
 	const [locale, setLocale] = useState();
 	const signedOutState = useCallback(() => anonymous ? { kind: "visitor" } : { kind: "signed-out" }, [anonymous]);
-	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
+	const forgetPush = useRef(async () => {});
+	const markSignedOut = useCallback(() => {
+		forgetPush.current();
+		setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current);
+	}, []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
 	const session = useMemo(() => given ?? createAuthSession({
@@ -44,6 +49,36 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 		origin,
 		nativeBridge
 	]);
+	const pushUser = useRef(void 0);
+	pushUser.current = state.kind === "signed-in" ? {
+		id: state.user.id,
+		own: !state.staff
+	} : void 0;
+	const push = useMemo(() => {
+		const client = createClient({
+			baseUrl: `${origin ?? globalThis.location?.origin ?? ""}/api/v1`,
+			token: ({ refresh }) => session.token({ refresh })
+		});
+		const meta = async () => {
+			const answer = await client.meta();
+			if (answer.status !== "modified") throw new Error("The app answered /meta without its content");
+			return {
+				appName: answer.meta.appName,
+				...answer.meta.notifications?.webPushKey && { webPushKey: answer.meta.notifications.webPushKey }
+			};
+		};
+		return pushNotifications({
+			...nativeBridge && { nativeBridge },
+			devices: client.devices,
+			meta,
+			user: () => pushUser.current
+		});
+	}, [
+		session,
+		origin,
+		nativeBridge
+	]);
+	forgetPush.current = push.forget;
 	const enter = useCallback(async (user) => {
 		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
 		setState(missing.length > 0 ? {
@@ -55,7 +90,11 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 			user,
 			...staff && { staff }
 		});
-	}, [session]);
+		if (missing.length === 0) push.adopt({
+			id: user.id,
+			own: !staff
+		});
+	}, [session, push]);
 	const finish = useCallback(async (result) => result.kind === "two-factor" ? setState({
 		kind: "two-factor",
 		methods: result.methods
@@ -134,14 +173,18 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 			window.location.assign(await session.account.linkProvider(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
 		},
 		stopStaffSession: async () => {
+			await push.forget();
 			await session.staff.stop();
 			setState(signedOutState());
 		},
 		signOut: async () => {
+			await push.turnOff();
 			await session.signOut();
 			setState(signedOutState());
-		}
+		},
+		push
 	}), [
+		push,
 		state,
 		session,
 		signInMethods,

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

@@ -57,6 +57,19 @@ export declare const useClient: () => {
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
   live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
+  devices: {
+    register: (device: import("@protobase/client").WebDeviceRegistration) => Promise<import("@protobase/client").RegisteredDevice>;
+    remove: (id: string) => Promise<void>;
+  };
+  notifications: {
+    list: ({ cursor, limit }?: {
+      cursor?: string;
+      limit?: number;
+    }) => Promise<import("@protobase/client").InboxPage>;
+    unread: () => Promise<number>;
+    markRead: (id: string) => Promise<void>;
+    markAllRead: (upTo: string) => Promise<void>;
+  };
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -116,6 +129,19 @@ export declare const useResourceClient: (resource: string) => {
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
   live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
+  devices: {
+    register: (device: import("@protobase/client").WebDeviceRegistration) => Promise<import("@protobase/client").RegisteredDevice>;
+    remove: (id: string) => Promise<void>;
+  };
+  notifications: {
+    list: ({ cursor, limit }?: {
+      cursor?: string;
+      limit?: number;
+    }) => Promise<import("@protobase/client").InboxPage>;
+    unread: () => Promise<number>;
+    markRead: (id: string) => Promise<void>;
+    markAllRead: (upTo: string) => Promise<void>;
+  };
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

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

@@ -46,6 +46,8 @@ export type MetaData = {
     style: string;
     layers?: MapLayerModel[];
   };
+  /** Whether the top bar draws the notification bell: the app has notifications and their `ui` is not false (see `ShellBell`). */
+  bell?: 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

@@ -156,6 +156,12 @@ const keys = {
 		key,
 		path
 	],
+	/** Everything of the signed-in user's notification history. */
+	inbox: ["inbox"],
+	/** How many of the user's notifications are unread. */
+	inboxUnread: ["inbox", "unread"],
+	/** The pages of the user's notification history. */
+	inboxPages: ["inbox", "pages"],
 	/** A public form, as `/-/forms/<name>` draws it. */
 	publicForm: (name) => ["public-form", name]
 };

package/dist/data/use-meta.js

@@ -43,6 +43,7 @@ const useMeta = () => {
 				...result.meta.runtime && { runtime: result.meta.runtime },
 				...result.meta.errorReporting && { errorReporting: result.meta.errorReporting },
 				...result.meta.maps && { maps: result.meta.maps },
+				...result.meta.notifications?.bell && { bell: 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

@@ -25,6 +25,9 @@ import { ListDisplayRow, RecordCardProps } from "./app/displays/list-displays.js
 import { ListDisplay, useListDisplay } from "./app/displays/display-context.js";
 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 { 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";
 import { ResponsiveDialog, ResponsiveDialogProps } from "./primitives/responsive-dialog.js";
 import { OtpInput, OtpInputProps } from "./primitives/otp-input.js";
@@ -66,4 +69,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, ChatMessage, 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, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, allowDelayMs, buttonClass, definePlugin, defineUi, diffStats, isConflict, isFramed, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, 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, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, 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, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, allowDelayMs, buttonClass, definePlugin, defineUi, diffStats, isConflict, isFramed, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };

package/dist/index.js

@@ -48,9 +48,11 @@ import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
 import { Form } from "./app/create/form.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";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { Choices } from "./primitives/choices.js";
 import { RecordPicker } from "./app/record-picker.js";
-export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, definePlugin, defineUi, diffStats, isConflict, isFramed, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, definePlugin, defineUi, diffStats, isConflict, isFramed, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };

package/dist/notifications/bell/messages.js

@@ -0,0 +1,40 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/notifications/bell/messages.ts
+const text = defineMessages({
+	en: {
+		notifications: "Notifications",
+		notificationsUnread: (count) => `Notifications, ${count} unread`,
+		notificationsManyUnread: "Notifications, more than 99 unread",
+		markAllRead: "Mark all as read",
+		empty: "No notifications yet",
+		showMore: "Show more",
+		loadFailed: "Your notifications could not be loaded.",
+		tryAgain: "Try again",
+		unread: "Unread",
+		opensNewTab: "(opens in a new tab)",
+		pushOff: "Get notifications on this device, even when the app is closed.",
+		turnOn: "Turn on",
+		pushOn: "Notifications are on for this device.",
+		turnOff: "Turn off",
+		pushBlocked: "Notifications are blocked on this device. To get them, allow notifications for this site in your browser or device settings."
+	},
+	nl: {
+		notifications: "Meldingen",
+		notificationsUnread: (count) => `Meldingen, ${count} ongelezen`,
+		notificationsManyUnread: "Meldingen, meer dan 99 ongelezen",
+		markAllRead: "Alles als gelezen markeren",
+		empty: "Nog geen meldingen",
+		showMore: "Meer tonen",
+		loadFailed: "Je meldingen konden niet worden geladen.",
+		tryAgain: "Opnieuw proberen",
+		unread: "Ongelezen",
+		opensNewTab: "(opent in een nieuw tabblad)",
+		pushOff: "Ontvang meldingen op dit apparaat, ook als de app gesloten is.",
+		turnOn: "Inschakelen",
+		pushOn: "Meldingen staan op dit apparaat aan.",
+		turnOff: "Uitschakelen",
+		pushBlocked: "Meldingen zijn op dit apparaat geblokkeerd. Je kunt ze voor deze site toestaan in de instellingen van je browser of apparaat."
+	}
+});
+//#endregion
+export { text };

package/dist/notifications/bell/notification-bell.js

@@ -0,0 +1,91 @@
+import { Badge } from "../../primitives/badge.js";
+import { Button } from "../../primitives/button.js";
+import { useRouter } from "../../app/router.js";
+import { usePopoverMenu } from "../../primitives/popover-menu.js";
+import { usePushNotifications } from "../push/use-push-notifications.js";
+import { NotificationPanel } from "./notification-panel.js";
+import { notificationTarget } from "./notification-target.js";
+import { PushControl } from "./push-control.js";
+import { historyRefused, useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./use-inbox.js";
+import { bellLabel, unreadBadge } from "./unread-label.js";
+import { useState } from "react";
+import { Bell } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/notifications/bell/notification-bell.tsx
+/**
+* The top bar's bell: how many of the signed-in user's notifications are unread, and the panel it opens, their inbox,
+* which ends with push for this device. The panel loads its notifications when it opens; opening one closes it.
+*/
+const NotificationBell = () => {
+	const { open, setOpen, place, button, menu } = usePopoverMenu();
+	const unread = useUnreadNotifications();
+	const inbox = useInbox({ enabled: open });
+	const { markRead, markAllRead, markingAll } = useMarkNotificationsRead();
+	const push = usePushNotifications();
+	const { navigate, basePath } = useRouter();
+	const [now, setNow] = useState(Date.now);
+	const badge = unreadBadge(unread.data);
+	const label = bellLabel(unread.data);
+	const origin = window.location.origin;
+	if (historyRefused(unread.error)) return null;
+	const toggle = () => {
+		if (!open) {
+			setNow(Date.now());
+			unread.refetch();
+			if (inbox.data) inbox.refetch();
+		}
+		setOpen(!open);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+		ref: button,
+		size: "icon",
+		variant: "ghost",
+		"aria-label": label,
+		title: label,
+		"aria-haspopup": "dialog",
+		"aria-expanded": open,
+		onClick: toggle,
+		className: "relative max-md:size-9",
+		children: [/* @__PURE__ */ jsx(Bell, { className: "size-4 max-md:size-5" }), badge && /* @__PURE__ */ jsx(Badge, {
+			tone: "red",
+			dot: false,
+			className: "pointer-events-none absolute -top-1 -right-1.5 h-4 min-w-4 justify-center px-1 text-[10px] font-semibold max-md:top-0 max-md:right-0",
+			children: badge
+		})]
+	}), open && createPortal(/* @__PURE__ */ jsx("div", {
+		ref: menu,
+		role: "dialog",
+		"aria-label": bellLabel(void 0),
+		style: place ?? { visibility: "hidden" },
+		className: "fixed z-50 w-[min(22rem,calc(100%-0.5rem))] rounded-md border bg-background shadow-pop",
+		children: /* @__PURE__ */ jsx(NotificationPanel, {
+			items: inbox.items,
+			loading: inbox.isPending,
+			failed: inbox.isError,
+			onRetry: () => void inbox.refetch(),
+			hasMore: inbox.hasNextPage,
+			loadingMore: inbox.isFetchingNextPage,
+			onMore: () => void inbox.fetchNextPage(),
+			onMarkAllRead: markAllRead,
+			markingAll,
+			targetOf: (item) => notificationTarget(item.url, {
+				origin,
+				basePath
+			}),
+			onNavigate: (path) => navigate(path),
+			onOpen: (item) => {
+				markRead(item);
+				setOpen(false);
+			},
+			footer: /* @__PURE__ */ jsx(PushControl, {
+				state: push.state,
+				onTurnOn: () => void push.turnOn(),
+				onTurnOff: () => void push.turnOff()
+			}),
+			now
+		})
+	}), document.body)] });
+};
+//#endregion
+export { NotificationBell };

package/dist/notifications/bell/notification-item.js

@@ -0,0 +1,75 @@
+import { cn } from "../../lib/cn.js";
+import { RouteLink } from "../../primitives/route-link.js";
+import { toneDots } from "../../primitives/badge.js";
+import { formatRelativeTime } from "../../format/date.js";
+import { text } from "./messages.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/notifications/bell/notification-item.tsx
+const row = "flex w-full gap-2.5 px-3 py-2.5 text-left";
+/**
+* One notification of the panel: unread ones in bold beside a dot, its text, and how long ago it came. A notification
+* with a url is a link to it, followed in the app for the app's own pages and opened in a new tab for another site;
+* one without is not a link.
+*/
+const NotificationItem = ({ item, target, onNavigate, onOpen, now }) => {
+	const unread = item.readAt === null;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? toneDots.blue : "bg-transparent"),
+		children: unread && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: text("unread")
+		})
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("block text-body text-foreground", unread && "font-semibold"),
+				children: item.title
+			}),
+			item.body && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 line-clamp-2 block text-xs text-muted-foreground",
+				children: item.body
+			}),
+			/* @__PURE__ */ jsx("time", {
+				dateTime: item.createdAt,
+				className: "mt-0.5 block text-xs text-faint-foreground",
+				children: formatRelativeTime((now - Date.parse(item.createdAt)) / 1e3)
+			}),
+			target?.kind === "external" && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: text("opensNewTab")
+			})
+		]
+	})] });
+	const opened = () => onOpen(item);
+	const middle = (event) => {
+		if (event.button === 1) opened();
+	};
+	if (!target) return /* @__PURE__ */ jsx("div", {
+		className: row,
+		children: content
+	});
+	if (target.kind === "app") return /* @__PURE__ */ jsx(RouteLink, {
+		to: {
+			href: target.href,
+			onFollow: () => onNavigate(target.path)
+		},
+		onClick: opened,
+		onAuxClick: middle,
+		className: cn(row, "hover:bg-muted"),
+		children: content
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href: target.href,
+		onClick: opened,
+		onAuxClick: middle,
+		className: cn(row, "hover:bg-muted"),
+		...target.kind === "external" && {
+			target: "_blank",
+			rel: "noopener"
+		},
+		children: content
+	});
+};
+//#endregion
+export { NotificationItem };

package/dist/notifications/bell/notification-panel.js

@@ -0,0 +1,71 @@
+import { Spinner } from "../../primitives/spinner.js";
+import { Button } from "../../primitives/button.js";
+import { text } from "./messages.js";
+import { NotificationItem } from "./notification-item.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/notifications/bell/notification-panel.tsx
+/**
+* The bell's panel, the user's inbox: a heading with "Mark all as read", the newest notifications first, "Show more"
+* for older ones, and the footer. The list scrolls inside the panel: the panel is fixed to the viewport under the bell,
+* so the page cannot scroll it.
+*/
+const NotificationPanel = ({ items, loading, failed, onRetry, hasMore, loadingMore, onMore, onMarkAllRead, markingAll, targetOf, onNavigate, onOpen, footer, now }) => {
+	const newest = items[0];
+	const unread = items.some((item) => item.readAt === null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex max-h-[min(32rem,calc(100dvh-var(--pb-sticky-top,3rem)-1rem))] flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-11 items-center gap-2 border-b px-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "flex-1 text-body font-semibold",
+					children: text("notifications")
+				}), newest && unread && /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					loading: markingAll,
+					onClick: () => onMarkAllRead(newest),
+					children: text("markAllRead")
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+				children: [loading ? /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center py-8",
+					children: /* @__PURE__ */ jsx(Spinner, { className: "size-4" })
+				}) : failed ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-2 px-3 py-6 text-center text-body text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("p", { children: text("loadFailed") }), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: onRetry,
+						children: text("tryAgain")
+					})]
+				}) : items.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "px-3 py-8 text-center text-body text-muted-foreground",
+					children: text("empty")
+				}) : /* @__PURE__ */ jsx("ul", {
+					className: "divide-y",
+					children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NotificationItem, {
+						item,
+						target: targetOf(item),
+						onNavigate,
+						onOpen,
+						now
+					}) }, item.id))
+				}), hasMore && !loading && !failed && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center border-t py-2",
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "ghost",
+						loading: loadingMore,
+						onClick: onMore,
+						children: text("showMore")
+					})
+				})]
+			}),
+			footer
+		]
+	});
+};
+//#endregion
+export { NotificationPanel };

package/dist/notifications/bell/notification-target.js

@@ -0,0 +1,28 @@
+//#region src/notifications/bell/notification-target.ts
+const notificationTarget = (url, { origin, basePath }) => {
+	if (url === null) return void 0;
+	if (!URL.canParse(url, origin)) return void 0;
+	const target = new URL(url, origin);
+	if (target.protocol !== "http:" && target.protocol !== "https:") return void 0;
+	if (target.origin !== origin) return {
+		kind: "external",
+		href: target.href
+	};
+	const local = `${target.pathname}${target.search}${target.hash}`;
+	if (basePath === "") return {
+		kind: "app",
+		href: local,
+		path: local
+	};
+	if (target.pathname === basePath || target.pathname.startsWith(`${basePath}/`)) return {
+		kind: "app",
+		href: local,
+		path: local.slice(basePath.length) || "/"
+	};
+	return {
+		kind: "page",
+		href: local
+	};
+};
+//#endregion
+export { notificationTarget };