@protobase/ui 0.45.19 → 0.45.21

package/dist/notifications/bell/push-control.js

@@ -0,0 +1,41 @@
+import { Button } from "../../primitives/button.js";
+import { text } from "./messages.js";
+import { BellOff, BellRing } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/notifications/bell/push-control.tsx
+/**
+* Push for this device at the foot of the panel: an offer to turn it on, that it is on with a way to turn it off, or
+* that the browser blocks it and how to allow it. Nothing while it is not known yet, or where this device cannot get it.
+*/
+const PushControl = ({ state, onTurnOn, onTurnOff }) => {
+	if (state === "loading" || state === "unsupported") return null;
+	if (state === "blocked") return /* @__PURE__ */ jsxs("p", {
+		className: "flex gap-2 border-t px-3 py-2.5 text-xs text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(BellOff, {
+			className: "mt-0.5 size-3.5 shrink-0",
+			"aria-hidden": true
+		}), text("pushBlocked")]
+	});
+	const on = state === "on";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 border-t px-3 py-2.5 text-xs text-muted-foreground",
+		children: [
+			/* @__PURE__ */ jsx(BellRing, {
+				className: "size-3.5 shrink-0",
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1",
+				children: text(on ? "pushOn" : "pushOff")
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: on ? "secondary" : "primary",
+				onClick: on ? onTurnOff : onTurnOn,
+				children: text(on ? "turnOff" : "turnOn")
+			})
+		]
+	});
+};
+//#endregion
+export { PushControl };

package/dist/notifications/bell/unread-label.js

@@ -0,0 +1,12 @@
+import { text } from "./messages.js";
+//#region src/notifications/bell/unread-label.ts
+const shownMax = 99;
+/** The count over the bell, or none while nothing is unread. */
+const unreadBadge = (count) => count === void 0 || count <= 0 ? void 0 : count > shownMax ? `${shownMax}+` : String(count);
+/** The bell's name for a screen reader, with how many are unread. */
+const bellLabel = (count) => {
+	if (count === void 0 || count <= 0) return text("notifications");
+	return count > shownMax ? text("notificationsManyUnread") : text("notificationsUnread", String(count));
+};
+//#endregion
+export { bellLabel, unreadBadge };

package/dist/notifications/bell/use-inbox.d.ts

@@ -0,0 +1,239 @@
+import { InboxNotification, InboxPage } from "@protobase/client";
+import { InfiniteData } from "@tanstack/react-query";
+//#region src/notifications/bell/use-inbox.d.ts
+/**
+ * How many of the signed-in user's notifications are unread, at most 100 (show `99+` from there): read on load, every
+ * half minute while the page is visible, on a return to it, and after the user opens or marks one read. It stops
+ * reading once the app refuses the user their history (`historyRefused`).
+ */
+export declare const useUnreadNotifications: ({ enabled }?: {
+  enabled?: boolean;
+}) => import("@tanstack/react-query").UseQueryResult<number, Error>;
+/**
+ * The signed-in user's notifications, newest first, a page at a time: `items` those loaded so far, `fetchNextPage`
+ * the next page while `hasNextPage`. Read only while `enabled`, such as while the panel is open.
+ */
+export declare const useInbox: ({ enabled }?: {
+  enabled?: boolean;
+}) => {
+  items: InboxNotification[];
+  data: InfiniteData<InboxPage, unknown>;
+  error: Error;
+  isError: true;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: true;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "error";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchNextPageError: boolean;
+  isFetchingNextPage: boolean;
+  isFetchPreviousPageError: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: InfiniteData<InboxPage, unknown>;
+  error: null;
+  isError: false;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: true;
+  isPlaceholderData: false;
+  status: "success";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: undefined;
+  error: Error;
+  isError: true;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: true;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "error";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: undefined;
+  error: null;
+  isError: false;
+  isPending: true;
+  isLoading: true;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "pending";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: undefined;
+  error: null;
+  isError: false;
+  isPending: true;
+  isLoadingError: false;
+  isRefetchError: false;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  isSuccess: false;
+  isPlaceholderData: false;
+  status: "pending";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isLoading: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+} | {
+  items: InboxNotification[];
+  data: InfiniteData<InboxPage, unknown>;
+  isError: false;
+  error: null;
+  isPending: false;
+  isLoading: false;
+  isLoadingError: false;
+  isRefetchError: false;
+  isSuccess: true;
+  isPlaceholderData: true;
+  isFetchNextPageError: false;
+  isFetchPreviousPageError: false;
+  status: "success";
+  fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetchingPreviousPage: boolean;
+  dataUpdatedAt: number;
+  errorUpdatedAt: number;
+  failureCount: number;
+  failureReason: Error | null;
+  errorUpdateCount: number;
+  isFetched: boolean;
+  isFetchedAfterMount: boolean;
+  isFetching: boolean;
+  isInitialLoading: boolean;
+  isPaused: boolean;
+  isRefetching: boolean;
+  isStale: boolean;
+  isEnabled: boolean;
+  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<InboxPage, unknown>, Error>>;
+  fetchStatus: import("@tanstack/react-query").FetchStatus;
+};
+/**
+ * Marks notifications read: `markRead(item)` one, as opening it does, and `markAllRead(newest)` all of them up to the
+ * newest one the user was shown, so one that arrives meanwhile stays unread. The panel and the count show it at once,
+ * and are read again once the server has it.
+ */
+export declare const useMarkNotificationsRead: () => {
+  markRead: (item: InboxNotification) => void;
+  markAllRead: import("@tanstack/react-query").UseMutateFunction<void, Error, InboxNotification, void>;
+  markingAll: boolean;
+};
+//#endregion

package/dist/notifications/bell/use-inbox.js

@@ -0,0 +1,91 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useCallback } from "react";
+import { isApiError } from "@protobase/client";
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/notifications/bell/use-inbox.ts
+const unreadRefreshMs = 3e4;
+/** Whether the app keeps the history from the user, as from a session its own sign-in does not mark as theirs. */
+const historyRefused = (error) => isApiError(error) && error.status === 403;
+/**
+* How many of the signed-in user's notifications are unread, at most 100 (show `99+` from there): read on load, every
+* half minute while the page is visible, on a return to it, and after the user opens or marks one read. It stops
+* reading once the app refuses the user their history (`historyRefused`).
+*/
+const useUnreadNotifications = ({ enabled = true } = {}) => {
+	const client = useClient();
+	return useQuery({
+		queryKey: keys.inboxUnread,
+		queryFn: () => client.notifications.unread(),
+		refetchInterval: (query) => historyRefused(query.state.error) ? false : unreadRefreshMs,
+		enabled
+	});
+};
+/**
+* The signed-in user's notifications, newest first, a page at a time: `items` those loaded so far, `fetchNextPage`
+* the next page while `hasNextPage`. Read only while `enabled`, such as while the panel is open.
+*/
+const useInbox = ({ enabled = true } = {}) => {
+	const client = useClient();
+	const query = useInfiniteQuery({
+		queryKey: keys.inboxPages,
+		queryFn: ({ pageParam }) => client.notifications.list(pageParam === "" ? {} : { cursor: pageParam }),
+		initialPageParam: "",
+		getNextPageParam: (page) => page.next ?? void 0,
+		enabled
+	});
+	const items = query.data?.pages.flatMap((page) => page.items) ?? [];
+	return {
+		...query,
+		items
+	};
+};
+const showRead = (queryClient, read) => {
+	const now = (/* @__PURE__ */ new Date()).toISOString();
+	let marked = 0;
+	queryClient.setQueryData(keys.inboxPages, (data) => data && {
+		...data,
+		pages: data.pages.map((page) => ({
+			...page,
+			items: page.items.map((item) => {
+				if (item.readAt !== null || !read(item)) return item;
+				marked += 1;
+				return {
+					...item,
+					readAt: now
+				};
+			})
+		}))
+	});
+	queryClient.setQueryData(keys.inboxUnread, (count) => count === void 0 ? count : Math.max(0, count - marked));
+};
+/**
+* Marks notifications read: `markRead(item)` one, as opening it does, and `markAllRead(newest)` all of them up to the
+* newest one the user was shown, so one that arrives meanwhile stays unread. The panel and the count show it at once,
+* and are read again once the server has it.
+*/
+const useMarkNotificationsRead = () => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const settled = () => queryClient.invalidateQueries({ queryKey: keys.inbox });
+	const one = useMutation({
+		mutationFn: (item) => client.notifications.markRead(item.id),
+		onMutate: (item) => showRead(queryClient, (shown) => shown.id === item.id),
+		onSettled: settled
+	});
+	const all = useMutation({
+		mutationFn: (newest) => client.notifications.markAllRead(newest.createdAt),
+		onMutate: (newest) => showRead(queryClient, (shown) => shown.createdAt <= newest.createdAt),
+		onSettled: settled
+	});
+	const markOne = one.mutate;
+	return {
+		markRead: useCallback((item) => {
+			if (item.readAt === null) markOne(item);
+		}, [markOne]),
+		markAllRead: all.mutate,
+		markingAll: all.isPending
+	};
+};
+//#endregion
+export { historyRefused, useInbox, useMarkNotificationsRead, useUnreadNotifications };

package/dist/notifications/push/push-browser.js

@@ -0,0 +1,23 @@
+import { serviceWorkerFile } from "@protobase/schema/internal";
+//#region src/notifications/push/push-browser.ts
+/** The page's own browser. */
+const windowPushBrowser = (win = window) => {
+	const { navigator } = win;
+	return {
+		supported: "serviceWorker" in navigator && "PushManager" in win && "Notification" in win && "userActivation" in navigator,
+		permission: () => win.Notification.permission,
+		requestPermission: () => win.Notification.requestPermission(),
+		activated: () => navigator.userActivation.isActive,
+		existingRegistration: () => navigator.serviceWorker.getRegistration("/"),
+		registration: async () => {
+			if (!await navigator.serviceWorker.getRegistration("/")) await navigator.serviceWorker.register(`/${serviceWorkerFile}`);
+			return navigator.serviceWorker.ready;
+		},
+		clearBadge: async () => {
+			if ("clearAppBadge" in navigator) await navigator.clearAppBadge();
+		},
+		userAgent: navigator.userAgent.replace(/[\u0000-\u001f\u007f]/g, "").slice(0, 512)
+	};
+};
+//#endregion
+export { windowPushBrowser };

package/dist/notifications/push/push-notifications.js

@@ -0,0 +1,27 @@
+import { windowPushBrowser } from "./push-browser.js";
+import { indexedDbPushRecords } from "./push-records.js";
+import { webPush } from "./web-push.js";
+//#region src/notifications/push/push-notifications.ts
+const noPush = {
+	state: async () => "unsupported",
+	turnOn: async () => "unsupported",
+	turnOff: async () => {},
+	forget: async () => {},
+	adopt: async () => {}
+};
+/**
+* The push of this page, the one place its transport is chosen: Web Push in a browser; none in the iOS or Android app
+* (`nativeBridge`) yet, nor where the page has no window.
+*/
+const pushNotifications = ({ nativeBridge, ...options }) => {
+	if (nativeBridge || typeof window === "undefined") return noPush;
+	const browser = windowPushBrowser();
+	if (!browser.supported) return noPush;
+	return webPush({
+		...options,
+		browser,
+		records: indexedDbPushRecords()
+	});
+};
+//#endregion
+export { pushNotifications };

package/dist/notifications/push/push-records.js

@@ -0,0 +1,23 @@
+import { pushRecord } from "@protobase/schema/internal";
+//#region src/notifications/push/push-records.ts
+/** The push record in IndexedDB, at the database, store and key the service worker reads (`pushRecord`). */
+const indexedDbPushRecords = (factory = indexedDB) => {
+	const request = (mode, act) => new Promise((resolve, reject) => {
+		const opened = factory.open(pushRecord.database, 1);
+		opened.onupgradeneeded = () => opened.result.createObjectStore(pushRecord.store);
+		opened.onerror = () => reject(opened.error);
+		opened.onsuccess = () => {
+			const db = opened.result;
+			const asked = act(db.transaction(pushRecord.store, mode).objectStore(pushRecord.store));
+			asked.onsuccess = () => (db.close(), resolve(asked.result));
+			asked.onerror = () => (db.close(), reject(asked.error));
+		};
+	});
+	return {
+		read: () => request("readonly", (store) => store.get(pushRecord.key)),
+		write: async (record) => void await request("readwrite", (store) => store.put(record, pushRecord.key)),
+		clear: async () => void await request("readwrite", (store) => store.delete(pushRecord.key))
+	};
+};
+//#endregion
+export { indexedDbPushRecords };

package/dist/notifications/push/use-push-notifications.d.ts

@@ -0,0 +1,16 @@
+import { PushState } from "./web-push.js";
+//#region src/notifications/push/use-push-notifications.d.ts
+/**
+ * Push in this browser for the signed-in user, for a bell or an app's own button: `state` is `loading` until known,
+ * then `unsupported` (hide the button: no Web Push here, such as a tab on iPhone and iPad, or the app has no VAPID key),
+ * `off`, `on` or `blocked` (the user refused notifications in the browser's settings). Call `turnOn` straight from a
+ * click: the browser asks for permission only then, and without a click by someone signed in as themselves nothing
+ * happens. `turnOff` unsubscribes this browser and removes its device. `state` is read again on a return to the page
+ * and when the browser says the permission changed.
+ */
+export declare const usePushNotifications: () => {
+  state: "loading" | PushState;
+  turnOn: () => Promise<void>;
+  turnOff: () => Promise<void>;
+};
+//#endregion

package/dist/notifications/push/use-push-notifications.js

@@ -0,0 +1,37 @@
+import { useAuth } from "../../auth/auth-provider.js";
+import { watchNotificationPermission } from "./watch-permission.js";
+import { useCallback, useEffect, useState } from "react";
+//#region src/notifications/push/use-push-notifications.ts
+/**
+* Push in this browser for the signed-in user, for a bell or an app's own button: `state` is `loading` until known,
+* then `unsupported` (hide the button: no Web Push here, such as a tab on iPhone and iPad, or the app has no VAPID key),
+* `off`, `on` or `blocked` (the user refused notifications in the browser's settings). Call `turnOn` straight from a
+* click: the browser asks for permission only then, and without a click by someone signed in as themselves nothing
+* happens. `turnOff` unsubscribes this browser and removes its device. `state` is read again on a return to the page
+* and when the browser says the permission changed.
+*/
+const usePushNotifications = () => {
+	const { push, state: auth } = useAuth();
+	const userId = auth.kind === "signed-in" ? auth.user.id : void 0;
+	const [state, setState] = useState("loading");
+	useEffect(() => {
+		let current = true;
+		const read = () => void push.state().then((next) => current && setState(next));
+		read();
+		const stop = typeof window === "undefined" ? void 0 : watchNotificationPermission(read);
+		return () => {
+			current = false;
+			stop?.();
+		};
+	}, [push, userId]);
+	return {
+		state,
+		turnOn: useCallback(async () => setState(await push.turnOn()), [push]),
+		turnOff: useCallback(async () => {
+			await push.turnOff();
+			setState(await push.state());
+		}, [push])
+	};
+};
+//#endregion
+export { usePushNotifications };

package/dist/notifications/push/watch-permission.js

@@ -0,0 +1,31 @@
+//#region src/notifications/push/watch-permission.ts
+/**
+* Calls `onChange` whenever the page's notification permission may have changed until the returned function is called:
+* the Permissions API's change event, as when the user allows notifications from the address bar, and a return to the
+* page, as from the browser's or the phone's settings, which also covers a browser whose Permissions API does not know
+* notifications.
+*/
+const watchNotificationPermission = (onChange, win = window) => {
+	let status;
+	let stopped = false;
+	const visible = () => {
+		if (win.document.visibilityState === "visible") onChange();
+	};
+	win.addEventListener("focus", onChange);
+	win.document.addEventListener("visibilitychange", visible);
+	if ("permissions" in win.navigator) win.navigator.permissions.query({ name: "notifications" }).then((answer) => {
+		if (stopped) return;
+		status = answer;
+		answer.addEventListener("change", onChange);
+	}, (error) => {
+		if (!(error instanceof TypeError)) throw error;
+	});
+	return () => {
+		stopped = true;
+		win.removeEventListener("focus", onChange);
+		win.document.removeEventListener("visibilitychange", visible);
+		status?.removeEventListener("change", onChange);
+	};
+};
+//#endregion
+export { watchNotificationPermission };

package/dist/notifications/push/web-push.d.ts

@@ -0,0 +1,5 @@
+import "@protobase/client";
+//#region src/notifications/push/web-push.d.ts
+/** Whether this browser gets the signed-in user's push: it cannot, it does not, it does, or the user blocked it. */
+export type PushState = 'unsupported' | 'off' | 'on' | 'blocked';
+//#endregion