@protobase/ui 0.45.19 → 0.45.21

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

@@ -0,0 +1,165 @@
+import { ApiError } from "@protobase/client";
+//#region src/notifications/push/web-push.ts
+const keyBytes = (key) => Uint8Array.from(atob(key.replace(/-/g, "+").replace(/_/g, "/")), (char) => char.charCodeAt(0));
+const within = (ms, promise) => Promise.race([promise, new Promise((resolve) => setTimeout(resolve, ms))]);
+/** Someone else signed in while push was being turned on. */
+var SignedInChanged = class extends Error {};
+const isRefusal = (error, slug) => error instanceof ApiError && error.status === 409 && error.slug === slug;
+/**
+* Web Push for the signed-in user in this browser. It registers only from a click by someone signed in as themselves,
+* never on its own, except to renew the registration this browser already has for that same user. Signing out, or
+* someone else signing in, forgets the registration here first, closing what it showed, then unsubscribes and removes
+* the device, without waiting long on either.
+*/
+const webPush = ({ browser, records, devices, meta, user, waitMs = 3e3 }) => {
+	let metaRead;
+	const appMeta = () => metaRead ??= meta();
+	const forgetHere = async (registration) => {
+		await records.clear();
+		for (const shown of registration ? await registration.getNotifications() : []) shown.close();
+		await browser.clearBadge();
+	};
+	const unsubscribe = async (registration) => {
+		const subscription = await registration?.pushManager.getSubscription();
+		if (subscription) await subscription.unsubscribe();
+	};
+	const drop = async (registration) => {
+		await forgetHere(registration);
+		await unsubscribe(registration);
+	};
+	const register = async (subscription, record) => {
+		const keys = subscription.toJSON().keys ?? {};
+		const device = await devices.register({
+			kind: "web",
+			endpoint: subscription.endpoint,
+			keys: {
+				p256dh: keys.p256dh ?? "",
+				auth: keys.auth ?? ""
+			},
+			userAgent: browser.userAgent,
+			userId: record.userId
+		});
+		await records.write({
+			...record,
+			deviceId: device.id
+		});
+	};
+	const state = async () => {
+		if (!browser.supported || !(await appMeta()).webPushKey) return "unsupported";
+		if (browser.permission() === "denied") return "blocked";
+		const signedIn = user();
+		const registration = await browser.existingRegistration();
+		const [subscription, record] = await Promise.all([registration?.pushManager.getSubscription(), records.read()]);
+		return signedIn && subscription && record?.userId === signedIn.id && record.endpoint === subscription.endpoint ? "on" : "off";
+	};
+	/**
+	* Turns push on for the signed-in user, from their click: call it in the click handler itself. Asks for permission
+	* when the user has not answered yet, subscribes and registers the device. Does nothing without a click, for staff
+	* signed in as the user or for a visitor; a refusal or someone else signing in meanwhile leaves push off.
+	*/
+	const turnOn = async () => {
+		const signedIn = user();
+		if (!browser.supported || !browser.activated() || !signedIn?.own) return state();
+		if (browser.permission() === "default" && await browser.requestPermission() !== "granted") return state();
+		if (browser.permission() !== "granted") return state();
+		const { appName, webPushKey } = await appMeta();
+		if (!webPushKey) return "unsupported";
+		const same = () => user()?.id === signedIn.id && user()?.own === true;
+		const registration = await browser.registration();
+		if (!same()) return state();
+		const [held, earlier] = await Promise.all([registration.pushManager.getSubscription(), records.read()]);
+		if (held && (earlier?.userId !== signedIn.id || earlier.endpoint !== held.endpoint)) await drop(registration);
+		const subscribeAndRegister = async () => {
+			if (!same()) throw new SignedInChanged();
+			const subscription = await registration.pushManager.getSubscription() ?? await registration.pushManager.subscribe({
+				userVisibleOnly: true,
+				applicationServerKey: keyBytes(webPushKey)
+			});
+			const record = {
+				userId: signedIn.id,
+				endpoint: subscription.endpoint,
+				appName
+			};
+			await records.write(record);
+			if (!same()) throw new SignedInChanged();
+			await register(subscription, record);
+		};
+		try {
+			await subscribeAndRegister();
+		} catch (error) {
+			if (isRefusal(error, "device-held")) {
+				await drop(registration);
+				return retryOnce(registration, subscribeAndRegister);
+			}
+			await drop(registration);
+			if (error instanceof SignedInChanged || isRefusal(error, "other-user")) return "off";
+			throw error;
+		}
+		return "on";
+	};
+	const retryOnce = async (registration, attempt) => {
+		try {
+			await attempt();
+		} catch (error) {
+			await drop(registration);
+			if (error instanceof SignedInChanged || isRefusal(error, "device-held") || isRefusal(error, "other-user")) return "off";
+			throw error;
+		}
+		return "on";
+	};
+	/**
+	* Turns push off in this browser: forgets it here, unsubscribes and removes the device, waiting at most `waitMs` on
+	* the push service and the server. A removal that fails is left to the server, which drops the endpoint once the push
+	* service reports it gone.
+	*/
+	const turnOff = async () => {
+		if (!browser.supported) return;
+		const registration = await browser.existingRegistration();
+		const record = await records.read();
+		await forgetHere(registration);
+		await within(waitMs, Promise.allSettled([unsubscribe(registration), record?.deviceId ? devices.remove(record.deviceId) : Promise.resolve()]));
+	};
+	/** As `turnOff`, for a session already over, whose device the server can no longer be asked to remove. */
+	const forget = async () => {
+		if (!browser.supported) return;
+		const registration = await browser.existingRegistration();
+		await forgetHere(registration);
+		await within(waitMs, Promise.allSettled([unsubscribe(registration)]));
+	};
+	/**
+	* Takes the signed-in user in, on every load and sign-in: a registration here for anyone else, or without a record,
+	* is forgotten and unsubscribed; the user's own, when they signed in as themselves and the permission stands, is
+	* registered again, so the device follows their session and a renewed subscription. Nothing is ever registered anew.
+	*/
+	const adopt = async (signedIn) => {
+		if (!browser.supported) return;
+		const registration = await browser.existingRegistration();
+		const [subscription, record] = await Promise.all([registration?.pushManager.getSubscription(), records.read()]);
+		if (!registration) return record ? records.clear() : void 0;
+		if (!record || record.userId !== signedIn.id) return subscription || record ? drop(registration) : void 0;
+		if (!signedIn.own) return;
+		if (!subscription || browser.permission() !== "granted") return drop(registration);
+		if (record.endpoint !== subscription.endpoint && !record.renew) return drop(registration);
+		const renewed = {
+			userId: record.userId,
+			endpoint: subscription.endpoint,
+			appName: record.appName
+		};
+		await records.write(renewed);
+		try {
+			await register(subscription, renewed);
+		} catch (error) {
+			if (!isRefusal(error, "device-held") && !isRefusal(error, "other-user")) throw error;
+			await drop(registration);
+		}
+	};
+	return {
+		state,
+		turnOn,
+		turnOff,
+		forget,
+		adopt
+	};
+};
+//#endregion
+export { webPush };

package/dist/package.js

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

package/dist/plugins/plugin-ui.js

@@ -32,7 +32,8 @@ const pluginUi = (plugin, module) => {
 	const shell = ui.shell && {
 		...ui.shell.actions && { actions: within(plugin, ui.shell.actions, "shell.actions") },
 		...ui.shell.rightPanel && { rightPanel: within(plugin, ui.shell.rightPanel, "shell.rightPanel") },
-		...ui.shell.logo && { logo: within(plugin, ui.shell.logo, "shell.logo") }
+		...ui.shell.logo && { logo: within(plugin, ui.shell.logo, "shell.logo") },
+		...ui.shell.bell && { bell: within(plugin, ui.shell.bell, "shell.bell") }
 	};
 	const beforeSignIn = ui.beforeSignIn && within(plugin, ui.beforeSignIn, "beforeSignIn");
 	return {

package/dist/primitives/button.d.ts

@@ -1,9 +1,11 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, Ref } from "react";
 //#region src/primitives/button.d.ts
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
-  size?: 'sm' | 'md';
+  /** `icon` is a square of the height of `sm`, for a button with an icon alone. */
+  size?: 'sm' | 'md' | 'icon';
   loading?: boolean;
+  ref?: Ref<HTMLButtonElement>;
 };
 /** A button's classes, for a link that looks like one. */
 export declare const buttonClass: ({ variant, size }?: Pick<ButtonProps, "variant" | "size">) => string;

package/dist/primitives/button.js

@@ -10,7 +10,8 @@ const variants = {
 };
 const sizes = {
 	sm: "h-7 px-2.5 text-body gap-1.5",
-	md: "h-8 px-3 text-body gap-2"
+	md: "h-8 px-3 text-body gap-2",
+	icon: "size-7 text-body"
 };
 /** A button's classes, for a link that looks like one. */
 const buttonClass = ({ variant = "secondary", size = "md" } = {}) => cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size]);

package/dist/primitives/popover-menu.js

@@ -3,19 +3,21 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 const gap = 4;
 /**
 * Below the button, or above it when the viewport has no room underneath; its right edge at the button's, or further
-* right when that would push its left edge off the viewport, as for a button near the left edge.
+* right when that would push its left edge off the viewport, as for a button near the left edge. `width` is where a
+* fixed element's `right` counts from.
 */
-const placeMenu = (button, menu) => {
+const placeMenu = (button, menu, width) => {
 	const below = button.bottom + gap;
 	return {
 		top: below + menu.height > window.innerHeight - gap ? Math.max(gap, button.top - gap - menu.height) : below,
-		right: Math.max(gap, Math.min(window.innerWidth - button.right, window.innerWidth - gap - menu.width))
+		right: Math.max(gap, Math.min(width - button.right, width - gap - menu.width))
 	};
 };
 /**
 * A menu opened by a button and drawn fixed, portalled to the body, under or over the button: it closes on a click
-* outside, Escape, and a scroll or resize, which would move the button away from it. `place` is undefined until the
-* menu is measured, so it is drawn hidden for that first frame.
+* outside, Escape, and a scroll or resize, which would move the button away from it; a scroll inside the menu keeps it.
+* `place` is undefined until the menu is measured, so it is drawn hidden for that first frame. The menu is a `ul` unless
+* `T` names another element, such as a panel's `div`.
 */
 const usePopoverMenu = () => {
 	const [open, setOpen] = useState(false);
@@ -27,18 +29,22 @@ const usePopoverMenu = () => {
 			setPlace(void 0);
 			return;
 		}
+		menu.current.style.right = "0px";
+		const width = menu.current.getBoundingClientRect().right;
 		setPlace(placeMenu(button.current.getBoundingClientRect(), {
 			width: menu.current.offsetWidth,
 			height: menu.current.offsetHeight
-		}));
+		}, width));
 	}, [open]);
 	useEffect(() => {
 		if (!open) return;
-		const inside = (target) => button.current?.contains(target) || menu.current?.contains(target);
+		const inside = (target) => target instanceof Node && Boolean(button.current?.contains(target) || menu.current?.contains(target));
 		const close = (event) => {
 			if (event instanceof KeyboardEvent ? event.key === "Escape" : !inside(event.target)) setOpen(false);
 		};
-		const dismiss = () => setOpen(false);
+		const dismiss = (event) => {
+			if (!inside(event.target)) setOpen(false);
+		};
 		document.addEventListener("mousedown", close);
 		document.addEventListener("keydown", close);
 		document.addEventListener("scroll", dismiss, true);