@synqauth/react 0.0.0-stage → 0.0.0

package/dist/index.js

@@ -0,0 +1,1107 @@
+'use client'
+import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { SynqError, problemError } from "@synqauth/js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/messages.ts
+/** The components' English words, which an app's own messages override one by one. */
+const DEFAULT_MESSAGES = {
+	signIn: "Sign in",
+	signOut: "Sign out",
+	manageAccount: "Manage account",
+	account: "Account",
+	loading: "Loading…",
+	save: "Save",
+	saving: "Saving…",
+	saved: "Saved",
+	cancel: "Cancel",
+	profile: "Profile",
+	name: "Name",
+	username: "Username",
+	waysToSignIn: "Ways to sign in",
+	remove: "Remove",
+	removeAccount: (provider, subject) => `Remove ${provider} ${subject}`,
+	providers: {
+		email: "Email",
+		solana: "Wallet",
+		google: "Google",
+		microsoft: "Microsoft",
+		discord: "Discord"
+	},
+	devices: "Devices",
+	signedIn: "Signed in",
+	thisDevice: "This device",
+	signOutDevice: (when) => `Sign out the session from ${when}`,
+	apps: (count) => count === 1 ? "1 app" : `${count} apps`,
+	wallets: "Wallets",
+	noWallets: "No wallets yet.",
+	primary: "Primary",
+	rename: "Rename",
+	renameWallet: (name) => `Rename ${name}`,
+	makePrimary: "Make primary",
+	makeWalletPrimary: (name) => `Make ${name} primary`,
+	walletName: (address) => `Name for ${address}`
+};
+//#endregion
+//#region src/mount.ts
+/** A request to `basePath`'s routes from the app's own page: same origin, with the cookie, never cached. */
+function mountRequest(basePath, fetcher) {
+	const base = `/${basePath.replace(/^\/+|\/+$/g, "")}`;
+	return (path, init = {}) => {
+		const headers = new Headers(init.headers);
+		if (!headers.has("accept")) headers.set("accept", "application/json");
+		return fetcher(`${base}/${path.replace(/^\/+/, "")}`, {
+			...init,
+			headers,
+			credentials: "same-origin",
+			cache: "no-store"
+		});
+	};
+}
+/** Calls the mount and reads its JSON; a problem it answers, or no answer at all, is the result's `error`. */
+async function call(request, path, init) {
+	let response;
+	try {
+		response = await request(path, init);
+	} catch (error) {
+		return failure(new SynqError("network_error", `The app couldn't be reached: ${String(error)}`, { cause: error }));
+	}
+	const text = await response.text();
+	let json;
+	try {
+		json = text ? JSON.parse(text) : void 0;
+	} catch {
+		json = void 0;
+	}
+	if (!response.ok) return failure(problemError(response.status, json !== null && typeof json === "object" ? json : {}));
+	return {
+		data: json,
+		error: null
+	};
+}
+function failure(error) {
+	return {
+		data: null,
+		error
+	};
+}
+//#endregion
+//#region src/store.ts
+const list = (path) => ({
+	path,
+	pick: (json) => json.data
+});
+const ROUTES = {
+	profile: {
+		path: "account/v1/profile",
+		pick: (json) => json
+	},
+	metadata: {
+		path: "account/v1/metadata",
+		pick: (json) => json
+	},
+	wallets: list("account/v1/wallets"),
+	accounts: list("account/v1/identities"),
+	sessions: list("account/v1/sessions")
+};
+const EMPTY = {
+	data: null,
+	error: null,
+	loading: false
+};
+const NO_RESOURCES = {
+	profile: EMPTY,
+	metadata: EMPTY,
+	wallets: EMPTY,
+	accounts: EMPTY,
+	sessions: EMPTY
+};
+function createStore(request, initial) {
+	let state = {
+		session: initial === void 0 ? {
+			status: "loading",
+			user: null,
+			expiresAt: null,
+			error: null
+		} : sessionOf(initial),
+		resources: NO_RESOURCES
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	const reads = /* @__PURE__ */ new Map();
+	let asking;
+	let running = false;
+	let failures = 0;
+	let retry;
+	let generation = 0;
+	function set(next) {
+		state = next;
+		for (const listener of listeners) listener();
+	}
+	function setResource(name, value) {
+		set({
+			...state,
+			resources: {
+				...state.resources,
+				[name]: value
+			}
+		});
+	}
+	function setSession(info) {
+		const next = sessionOf(info);
+		const same = next.user?.sub === state.session.user?.sub && next.status === state.session.status;
+		if (same && next.expiresAt === state.session.expiresAt && !state.session.error) return;
+		if (!same) {
+			generation += 1;
+			reads.clear();
+		}
+		set({
+			session: next,
+			resources: same ? state.resources : NO_RESOURCES
+		});
+	}
+	function notice(error) {
+		if (error?.status === 401) setSession(null);
+	}
+	const store = {
+		getState: () => state,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		refreshSession() {
+			asking ??= call(request, "session").then((result) => {
+				asking = void 0;
+				if (result.data) {
+					failures = 0;
+					setSession(result.data);
+					return;
+				}
+				const unknown = state.session.status === "loading" || state.session.status === "error";
+				const status = unknown ? "error" : state.session.status;
+				set({
+					...state,
+					session: {
+						...state.session,
+						status,
+						error: result.error
+					}
+				});
+				if (unknown && running) {
+					clearTimeout(retry);
+					retry = setTimeout(() => void store.refreshSession(), backoff(failures));
+					failures += 1;
+				}
+			});
+			return asking;
+		},
+		start() {
+			running = true;
+			const { status } = state.session;
+			if (status === "loading" || status === "error") store.refreshSession();
+		},
+		stop() {
+			running = false;
+			clearTimeout(retry);
+		},
+		setSession,
+		load(name) {
+			const running = reads.get(name);
+			if (running) return running;
+			const route = ROUTES[name];
+			const asked = generation;
+			setResource(name, {
+				...state.resources[name],
+				loading: true
+			});
+			const read = call(request, route.path).then((result) => {
+				const outcome = result.error ? result : {
+					data: route.pick(result.data),
+					error: null
+				};
+				if (asked !== generation) return outcome;
+				reads.delete(name);
+				setResource(name, outcome.error ? {
+					...state.resources[name],
+					error: outcome.error,
+					loading: false
+				} : {
+					data: outcome.data,
+					error: null,
+					loading: false
+				});
+				notice(outcome.error);
+				return outcome;
+			});
+			reads.set(name, read);
+			return read;
+		},
+		ensure(name) {
+			const resource = state.resources[name];
+			if (state.session.status !== "signed-in") return;
+			if (resource.loading || resource.data !== null || resource.error !== null) return;
+			store.load(name);
+		},
+		put(name, update) {
+			const data = update(state.resources[name].data);
+			if (data !== null) setResource(name, {
+				...state.resources[name],
+				data,
+				error: null
+			});
+		},
+		notice
+	};
+	return store;
+}
+/** Milliseconds before asking again after `failures` failures: 1, 2, 4... seconds, at most 30. */
+function backoff(failures) {
+	return Math.min(1e3 * 2 ** failures, 3e4);
+}
+function sessionOf(info) {
+	if (!info?.user) return {
+		status: "signed-out",
+		user: null,
+		expiresAt: null,
+		error: null
+	};
+	return {
+		status: "signed-in",
+		user: info.user,
+		expiresAt: info.expiresAt,
+		error: null
+	};
+}
+//#endregion
+//#region src/provider.tsx
+const SynqContext = createContext(null);
+/** How long after asking who is signed in the provider waits before asking again when the page is back in view. */
+const RECHECK_MS = 3e4;
+/** Synq for the components under it. Its route mount and `fetch` are read once, when it mounts. */
+function SynqProvider({ initialSession, basePath = "/api/auth", plugins, fetch: fetcher, navigate, messages, children }) {
+	const [{ store, request, base }] = useState(() => {
+		const base = `/${basePath.replace(/^\/+|\/+$/g, "")}`;
+		const request = mountRequest(base, fetcher ?? ((input, init) => fetch(input, init)));
+		return {
+			store: createStore(request, initialSession),
+			request,
+			base
+		};
+	});
+	useEffect(() => {
+		if (initialSession !== void 0) store.setSession(initialSession);
+	}, [store, initialSession]);
+	useEffect(() => {
+		store.start();
+		let asked = Date.now();
+		const recheck = () => {
+			if (document.visibilityState !== "visible" || Date.now() - asked < RECHECK_MS) return;
+			asked = Date.now();
+			store.refreshSession();
+		};
+		document.addEventListener("visibilitychange", recheck);
+		return () => {
+			document.removeEventListener("visibilitychange", recheck);
+			store.stop();
+		};
+	}, [store]);
+	const value = useMemo(() => ({
+		store,
+		request,
+		basePath: base,
+		navigate: navigate ?? ((url) => window.location.assign(url)),
+		plugins: Object.fromEntries((plugins ?? []).map((plugin) => [plugin.id, plugin.actions(request)])),
+		messages: {
+			...DEFAULT_MESSAGES,
+			...messages
+		}
+	}), [
+		store,
+		request,
+		base,
+		navigate,
+		plugins,
+		messages
+	]);
+	return /* @__PURE__ */ jsx(SynqContext, {
+		value,
+		children
+	});
+}
+function useSynqContext() {
+	const context = use(SynqContext);
+	if (!context) throw new Error("@synqauth/react: put the app inside <SynqProvider>");
+	return context;
+}
+/** A browser plugin's actions, typed by the plugin, which must be one of the provider's `plugins`. */
+function usePlugin(plugin) {
+	const { plugins } = useSynqContext();
+	if (!(plugin.id in plugins)) throw new Error(`@synqauth/react: pass the ${plugin.id} plugin to <SynqProvider plugins>`);
+	return plugins[plugin.id];
+}
+/** The components' words: the provider's `messages`, English for any it leaves out. */
+function useSynqMessages() {
+	return useSynqContext().messages;
+}
+//#endregion
+//#region src/hooks.ts
+function useSynqState(select) {
+	const { store } = useSynqContext();
+	const read = () => select(store.getState());
+	return useSyncExternalStore(store.subscribe, read, read);
+}
+/** Who is signed in. It reads the session alone, and asks the account API nothing. */
+function useSession() {
+	const { store } = useSynqContext();
+	const session = useSynqState((state) => state.session);
+	return useMemo(() => ({
+		status: session.status,
+		isLoaded: session.status !== "loading",
+		isSignedIn: session.status === "signed-in",
+		user: session.user,
+		expiresAt: session.expiresAt,
+		error: session.error,
+		refresh: () => store.refreshSession()
+	}), [session, store]);
+}
+/** Something the account API keeps, read once someone is signed in and shared by every component that asks. */
+function useAccountData(name) {
+	const { store } = useSynqContext();
+	const status = useSynqState((state) => state.session.status);
+	const resource = useSynqState((state) => state.resources[name]);
+	useEffect(() => {
+		if (status === "signed-in") store.ensure(name);
+	}, [
+		status,
+		store,
+		name
+	]);
+	return useMemo(() => ({
+		data: resource.data,
+		error: resource.error,
+		isLoading: resource.loading || status === "signed-in" && resource.data === null && resource.error === null,
+		reload: async () => {
+			await store.load(name);
+		}
+	}), [
+		resource,
+		status,
+		store,
+		name
+	]);
+}
+/** The person's wallets, the primary one marked. */
+function useWallets() {
+	return useAccountData("wallets");
+}
+/** The ways the person signs in: their email address, wallets, social accounts. */
+function useLinkedAccounts() {
+	return useAccountData("accounts");
+}
+/** The person's sessions at the brand, on every device. */
+function useAccountSessions() {
+	return useAccountData("sessions");
+}
+/** The signed-in person: their ID token's claims at once, then their profile and metadata. */
+function useUser() {
+	const session = useSession();
+	const profile = useAccountData("profile");
+	const metadata = useAccountData("metadata");
+	const { store } = useSynqContext();
+	const change = useChanges();
+	const update = useCallback(async (changes) => {
+		const result = await change("PATCH", "v1/profile", changes);
+		if (result.data) store.put("profile", () => result.data);
+		return result;
+	}, [change, store]);
+	return useMemo(() => ({
+		isLoaded: session.isLoaded,
+		isSignedIn: session.isSignedIn,
+		user: session.user,
+		profile: profile.data,
+		metadata: metadata.data,
+		isLoading: profile.isLoading || metadata.isLoading,
+		error: profile.error ?? metadata.error,
+		update,
+		reload: async () => {
+			await Promise.all([profile.reload(), metadata.reload()]);
+		}
+	}), [
+		session,
+		profile,
+		metadata,
+		update
+	]);
+}
+/** Everything the signed-in person can do. */
+function useAuth() {
+	const { store, request, basePath, navigate, plugins } = useSynqContext();
+	const session = useSession();
+	const change = useChanges();
+	const signingOut = useRef(null);
+	return useMemo(() => {
+		const signInUrl = (options = {}) => {
+			const params = new URLSearchParams({ returnTo: options.returnTo ?? currentPath() });
+			if (options.method) params.set("method", options.method);
+			if (options.loginHint) params.set("login_hint", options.loginHint);
+			if (options.prompt) params.set("prompt", options.prompt);
+			if (options.maxAge !== void 0) params.set("max_age", String(options.maxAge));
+			if (options.intent) params.set("intent", options.intent);
+			return `${basePath}/sign-in?${params.toString()}`;
+		};
+		const read = (name) => () => store.load(name);
+		const id = (value) => encodeURIComponent(value);
+		return {
+			isLoaded: session.isLoaded,
+			isSignedIn: session.isSignedIn,
+			userId: session.user?.sub ?? null,
+			signIn: (options) => navigate(signInUrl(options)),
+			signInUrl,
+			signOut() {
+				signingOut.current ??= call(request, "sign-out", { method: "POST" }).then((result) => {
+					signingOut.current = null;
+					if (result.error) return result;
+					store.setSession(null);
+					navigate(result.data.redirect);
+					return {
+						data: null,
+						error: null
+					};
+				});
+				return signingOut.current;
+			},
+			async link(method, options = {}) {
+				const result = await call(request, "link", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({
+						method,
+						returnTo: options.returnTo ?? currentPath()
+					})
+				});
+				if (result.error) return result;
+				navigate(result.data.redirect);
+				return {
+					data: null,
+					error: null
+				};
+			},
+			wallets: {
+				list: read("wallets"),
+				async rename(wallet, label) {
+					const result = await change("PATCH", `v1/wallets/${id(wallet)}`, { label });
+					const { data } = result;
+					if (data) store.put("wallets", (list) => list && list.map((w) => w.id === data.id ? data : w));
+					return result;
+				},
+				async setPrimary(wallet) {
+					const result = await change("PATCH", `v1/wallets/${id(wallet)}`, { primary: true });
+					const { data } = result;
+					if (data) store.put("wallets", (list) => list && list.map((w) => w.id === data.id ? data : {
+						...w,
+						primary: false
+					}));
+					return result;
+				}
+			},
+			accounts: {
+				list: read("accounts"),
+				async unlink(account) {
+					const result = await change("DELETE", `v1/identities/${id(account)}`);
+					if (!result.error) store.put("accounts", (list) => list && list.filter((a) => a.id !== account));
+					return result;
+				}
+			},
+			sessions: {
+				list: read("sessions"),
+				async end(ended) {
+					const result = await change("DELETE", `v1/sessions/${id(ended)}`);
+					if (!result.error) store.put("sessions", (list) => list && list.filter((s) => s.id !== ended));
+					return result;
+				}
+			},
+			plugins
+		};
+	}, [
+		store,
+		request,
+		basePath,
+		navigate,
+		plugins,
+		session,
+		change
+	]);
+}
+/**
+* Sends changes to the account API for one mounted component. Each change
+* carries an idempotency key minted here; the key is used again only when
+* no answer came back, so a retry is the same request to Synq. A change
+* asked again while it is under way joins it rather than sending another.
+*/
+function useChanges() {
+	const { store, request } = useSynqContext();
+	const keys = useRef(/* @__PURE__ */ new Map());
+	const running = useRef(/* @__PURE__ */ new Map());
+	return useCallback((method, path, body) => {
+		const json = body === void 0 ? void 0 : JSON.stringify(body);
+		const change = `${method} ${path} ${json ?? ""}`;
+		const already = running.current.get(change);
+		if (already) return already;
+		let key = keys.current.get(change);
+		if (!key) {
+			key = crypto.randomUUID();
+			keys.current.set(change, key);
+		}
+		const headers = new Headers({ "idempotency-key": key });
+		if (json !== void 0) headers.set("content-type", "application/json");
+		const sent = call(request, `account/${path}`, {
+			method,
+			headers,
+			body: json
+		}).then((result) => {
+			running.current.delete(change);
+			if (result.error?.code !== "network_error") keys.current.delete(change);
+			store.notice(result.error);
+			return result.error ? result : {
+				data: result.data ?? null,
+				error: null
+			};
+		});
+		running.current.set(change, sent);
+		return sent;
+	}, [store, request]);
+}
+function currentPath() {
+	if (typeof window === "undefined") return "/";
+	return `${window.location.pathname}${window.location.search}`;
+}
+//#endregion
+//#region src/components/SignedIn.tsx
+/** Shows its children only while someone is signed in. It renders no element of its own. */
+function SignedIn({ children }) {
+	return useSession().isSignedIn ? children : null;
+}
+//#endregion
+//#region src/components/SignedOut.tsx
+/** Shows its children only once the app has said nobody is signed in. It renders no element of its own. */
+function SignedOut({ children }) {
+	return useSession().status === "signed-out" ? children : null;
+}
+//#endregion
+//#region src/components/styling.ts
+/** The classes of an inner element: `synq-<name>` for each name, or none when unstyled. */
+function styler(unstyled) {
+	return (...names) => unstyled ? void 0 : names.map((name) => `synq-${name}`).join(" ");
+}
+/** The classes of a component's outer element: `synq` and its own when styled, and the app's. */
+function rootClass(unstyled, name, className) {
+	const names = unstyled ? [] : ["synq", `synq-${name}`];
+	if (className) names.push(className);
+	return names.length > 0 ? names.join(" ") : void 0;
+}
+/** What to tell the person when a change failed: the problem's field messages, or its detail. */
+function failureText(error) {
+	const fields = (error.cause?.errors ?? []).map((field) => field.message).filter((message) => typeof message === "string");
+	return fields.length > 0 ? fields.join(". ") : error.message;
+}
+/** A long address, shortened to its ends: `seedYs…dRKA`. */
+function shortAddress(address) {
+	return address.length > 12 ? `${address.slice(0, 6)}…${address.slice(-4)}` : address;
+}
+//#endregion
+//#region src/components/SignInButton.tsx
+/** A button that sends the browser to sign in, through the app's route mount. */
+function SignInButton({ unstyled, className, children, ...options }) {
+	const { signIn } = useAuth();
+	const m = useSynqMessages();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: rootClass(unstyled, "sign-in-button", className),
+		onClick: () => signIn(options),
+		children: children ?? m.signIn
+	});
+}
+//#endregion
+//#region src/components/UserButton.tsx
+/**
+* The signed-in person's picture and name, showing a panel to manage their
+* account or sign out: a disclosure (a button that shows and hides it), so
+* its link and button are reached with Tab as anywhere else. Escape or a
+* click elsewhere hides it. Nothing while nobody is signed in.
+*/
+function UserButton({ unstyled, className, accountHref }) {
+	const { user } = useSession();
+	const { signOut } = useAuth();
+	const m = useSynqMessages();
+	const [open, setOpen] = useState(false);
+	const root = useRef(null);
+	const trigger = useRef(null);
+	const panel = useId();
+	const c = styler(unstyled);
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (event) => {
+			if (event.key !== "Escape") return;
+			setOpen(false);
+			trigger.current?.focus();
+		};
+		const onPointer = (event) => {
+			if (!root.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("keydown", onKey);
+		document.addEventListener("pointerdown", onPointer);
+		return () => {
+			document.removeEventListener("keydown", onKey);
+			document.removeEventListener("pointerdown", onPointer);
+		};
+	}, [open]);
+	if (!user) return null;
+	const name = displayName(user, m.account);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: rootClass(unstyled, "user-button", className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: trigger,
+			type: "button",
+			className: c("user-button-trigger"),
+			"aria-expanded": open,
+			"aria-controls": panel,
+			onClick: () => setOpen((was) => !was),
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				user,
+				name,
+				className: c("avatar")
+			}), /* @__PURE__ */ jsx("span", {
+				className: c("user-button-name"),
+				children: name
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			id: panel,
+			hidden: !open,
+			className: c("menu"),
+			children: [accountHref && /* @__PURE__ */ jsx("a", {
+				href: accountHref,
+				className: c("menu-item"),
+				children: m.manageAccount
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: c("menu-item"),
+				onClick: () => void signOut(),
+				children: m.signOut
+			})]
+		})]
+	});
+}
+function Avatar({ user, name, className }) {
+	if (user.picture) return /* @__PURE__ */ jsx("img", {
+		className,
+		src: user.picture,
+		alt: "",
+		width: 32,
+		height: 32,
+		referrerPolicy: "no-referrer"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		"aria-hidden": "true",
+		children: initials(name)
+	});
+}
+/** What to call the person: their name, username or email address. */
+function displayName(user, fallback) {
+	return user.name ?? user.preferred_username ?? user.email ?? fallback;
+}
+function initials(name) {
+	return name.split(/[\s@._-]+/).filter(Boolean).slice(0, 2).map((word) => [...word][0].toUpperCase()).join("");
+}
+//#endregion
+//#region src/components/AccountManager.tsx
+const ALL = [
+	"profile",
+	"accounts",
+	"sessions"
+];
+/** Manage the signed-in person's account. Nothing while nobody is signed in. */
+function AccountManager({ unstyled, className, sections = ALL }) {
+	const { isSignedIn } = useSession();
+	if (!isSignedIn) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClass(unstyled, "account-manager", className),
+		children: sections.map((section) => section === "profile" ? /* @__PURE__ */ jsx(ProfileSection, { unstyled }, section) : section === "accounts" ? /* @__PURE__ */ jsx(AccountsSection, { unstyled }, section) : /* @__PURE__ */ jsx(SessionsSection, { unstyled }, section))
+	});
+}
+function Section({ title, unstyled, children }) {
+	const heading = useId();
+	const c = styler(unstyled);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": heading,
+		className: c("section"),
+		children: [/* @__PURE__ */ jsx("h2", {
+			id: heading,
+			className: c("heading"),
+			children: title
+		}), children]
+	});
+}
+/** What a section shows while its data is read, or when it couldn't be. */
+function Pending({ isLoading, error, unstyled }) {
+	const c = styler(unstyled);
+	const m = useSynqMessages();
+	if (isLoading) return /* @__PURE__ */ jsx("p", {
+		className: c("muted"),
+		children: m.loading
+	});
+	if (error) return /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: c("error"),
+		children: error.message
+	});
+	return null;
+}
+function ProfileSection({ unstyled }) {
+	const { profile, isLoading, error } = useUser();
+	const m = useSynqMessages();
+	return /* @__PURE__ */ jsx(Section, {
+		title: m.profile,
+		unstyled,
+		children: profile ? /* @__PURE__ */ jsx(ProfileForm, {
+			profile,
+			unstyled
+		}, profile.sub) : /* @__PURE__ */ jsx(Pending, {
+			isLoading,
+			error,
+			unstyled
+		})
+	});
+}
+function ProfileForm({ profile, unstyled }) {
+	const { update } = useUser();
+	const m = useSynqMessages();
+	const [name, setName] = useState(profile.name ?? "");
+	const [username, setUsername] = useState(profile.username ?? "");
+	const [saving, setSaving] = useState(false);
+	const [outcome, setOutcome] = useState(null);
+	const c = styler(unstyled);
+	const changes = {};
+	if ((name.trim() || null) !== profile.name) changes.name = name.trim() || null;
+	if ((username.trim() || null) !== profile.username) changes.username = username.trim() || null;
+	const changed = Object.keys(changes).length > 0;
+	async function save(event) {
+		event.preventDefault();
+		setSaving(true);
+		setOutcome(null);
+		const result = await update(changes);
+		setSaving(false);
+		setOutcome(result.error ? {
+			ok: false,
+			text: failureText(result.error)
+		} : {
+			ok: true,
+			text: m.saved
+		});
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		className: c("form"),
+		onSubmit: (event) => void save(event),
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.name
+				}), /* @__PURE__ */ jsx("input", {
+					className: c("input"),
+					name: "name",
+					autoComplete: "name",
+					maxLength: 200,
+					value: name,
+					onChange: (event) => setName(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.username
+				}), /* @__PURE__ */ jsx("input", {
+					className: c("input"),
+					name: "username",
+					autoComplete: "username",
+					maxLength: 64,
+					value: username,
+					onChange: (event) => setUsername(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: c("actions"),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					className: c("button", "button-primary"),
+					disabled: saving || !changed,
+					children: saving ? m.saving : m.save
+				}), outcome && /* @__PURE__ */ jsx("p", {
+					role: outcome.ok ? "status" : "alert",
+					className: c(outcome.ok ? "muted" : "error"),
+					children: outcome.text
+				})]
+			})
+		]
+	});
+}
+function AccountsSection({ unstyled }) {
+	const { data, isLoading, error } = useLinkedAccounts();
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	return /* @__PURE__ */ jsx(Section, {
+		title: m.waysToSignIn,
+		unstyled,
+		children: data ? /* @__PURE__ */ jsx("ul", {
+			className: c("list"),
+			children: data.map((account) => /* @__PURE__ */ jsx(AccountRow, {
+				account,
+				removable: data.length > 1,
+				unstyled
+			}, account.id))
+		}) : /* @__PURE__ */ jsx(Pending, {
+			isLoading,
+			error,
+			unstyled
+		})
+	});
+}
+function AccountRow({ account, removable, unstyled }) {
+	const { accounts } = useAuth();
+	const m = useSynqMessages();
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(null);
+	const c = styler(unstyled);
+	const provider = m.providers[account.provider] ?? capitalized(account.provider);
+	const subject = account.provider === "solana" ? shortAddress(account.subject) : account.subject;
+	async function remove() {
+		setBusy(true);
+		const result = await accounts.unlink(account.id);
+		setBusy(false);
+		setFailure(result.error ? failureText(result.error) : null);
+	}
+	return /* @__PURE__ */ jsxs("li", {
+		className: c("row"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: c("row-title"),
+				children: provider
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: c("muted"),
+				title: account.subject,
+				children: subject
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: c("button"),
+				disabled: busy || !removable,
+				"aria-label": m.removeAccount(provider, subject),
+				onClick: () => void remove(),
+				children: m.remove
+			}),
+			failure && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: c("error"),
+				children: failure
+			})
+		]
+	});
+}
+function SessionsSection({ unstyled }) {
+	const { data, isLoading, error } = useAccountSessions();
+	const { sessions } = useAuth();
+	const m = useSynqMessages();
+	const [failure, setFailure] = useState(null);
+	const c = styler(unstyled);
+	async function end(id) {
+		const result = await sessions.end(id);
+		setFailure(result.error ? failureText(result.error) : null);
+	}
+	return /* @__PURE__ */ jsxs(Section, {
+		title: m.devices,
+		unstyled,
+		children: [data ? /* @__PURE__ */ jsx("ul", {
+			className: c("list"),
+			children: data.map((session) => {
+				const when = session.signed_in_at ? formatDate(session.signed_in_at) : m.signedIn;
+				return /* @__PURE__ */ jsxs("li", {
+					className: c("row"),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: c("row-title"),
+							children: when
+						}),
+						session.current && /* @__PURE__ */ jsx("span", {
+							className: c("badge"),
+							children: m.thisDevice
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: c("muted"),
+							children: m.apps(session.apps.length)
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: c("button"),
+							"aria-label": m.signOutDevice(when),
+							onClick: () => void end(session.id),
+							children: m.signOut
+						})
+					]
+				}, session.id);
+			})
+		}) : /* @__PURE__ */ jsx(Pending, {
+			isLoading,
+			error,
+			unstyled
+		}), failure && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: c("error"),
+			children: failure
+		})]
+	});
+}
+function capitalized(provider) {
+	return provider.charAt(0).toUpperCase() + provider.slice(1);
+}
+function formatDate(iso) {
+	return new Intl.DateTimeFormat(void 0, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	}).format(new Date(iso));
+}
+//#endregion
+//#region src/components/WalletManager.tsx
+/** Manage the signed-in person's wallets. Nothing while nobody is signed in. */
+function WalletManager({ unstyled, className }) {
+	const { isSignedIn } = useSession();
+	const { data, isLoading, error } = useWallets();
+	const m = useSynqMessages();
+	const heading = useId();
+	const c = styler(unstyled);
+	if (!isSignedIn) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": heading,
+		className: rootClass(unstyled, "wallet-manager", className),
+		children: [/* @__PURE__ */ jsx("h2", {
+			id: heading,
+			className: c("heading"),
+			children: m.wallets
+		}), data ? data.length > 0 ? /* @__PURE__ */ jsx("ul", {
+			className: c("list"),
+			children: data.map((wallet) => /* @__PURE__ */ jsx(WalletRow, {
+				wallet,
+				unstyled
+			}, wallet.id))
+		}) : /* @__PURE__ */ jsx("p", {
+			className: c("muted"),
+			children: m.noWallets
+		}) : isLoading ? /* @__PURE__ */ jsx("p", {
+			className: c("muted"),
+			children: m.loading
+		}) : error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: c("error"),
+			children: error.message
+		})]
+	});
+}
+function WalletRow({ wallet, unstyled }) {
+	const { wallets } = useAuth();
+	const m = useSynqMessages();
+	const [editing, setEditing] = useState(false);
+	const [label, setLabel] = useState(wallet.label ?? "");
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(null);
+	const c = styler(unstyled);
+	const title = wallet.label ?? shortAddress(wallet.address);
+	async function rename(event) {
+		event.preventDefault();
+		setBusy(true);
+		const result = await wallets.rename(wallet.id, label.trim() || null);
+		setBusy(false);
+		setFailure(result.error ? failureText(result.error) : null);
+		if (!result.error) setEditing(false);
+	}
+	async function makePrimary() {
+		setBusy(true);
+		const result = await wallets.setPrimary(wallet.id);
+		setBusy(false);
+		setFailure(result.error ? failureText(result.error) : null);
+	}
+	return /* @__PURE__ */ jsxs("li", {
+		className: c("row"),
+		children: [editing ? /* @__PURE__ */ jsxs("form", {
+			className: c("form", "form-inline"),
+			onSubmit: (event) => void rename(event),
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: c("field"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: c("label"),
+						children: m.walletName(shortAddress(wallet.address))
+					}), /* @__PURE__ */ jsx("input", {
+						className: c("input"),
+						name: "label",
+						maxLength: 64,
+						value: label,
+						onChange: (event) => setLabel(event.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					className: c("button", "button-primary"),
+					disabled: busy,
+					children: m.save
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("button"),
+					onClick: () => {
+						setEditing(false);
+						setLabel(wallet.label ?? "");
+						setFailure(null);
+					},
+					children: m.cancel
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: c("row-title"),
+				title: wallet.address,
+				children: title
+			}),
+			wallet.label && /* @__PURE__ */ jsx("span", {
+				className: c("muted"),
+				title: wallet.address,
+				children: shortAddress(wallet.address)
+			}),
+			wallet.primary && /* @__PURE__ */ jsx("span", {
+				className: c("badge"),
+				children: m.primary
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: c("button"),
+				"aria-label": m.renameWallet(title),
+				onClick: () => setEditing(true),
+				children: m.rename
+			}),
+			!wallet.primary && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: c("button"),
+				disabled: busy,
+				"aria-label": m.makeWalletPrimary(title),
+				onClick: () => void makePrimary(),
+				children: m.makePrimary
+			})
+		] }), failure && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: c("error"),
+			children: failure
+		})]
+	});
+}
+//#endregion
+export { AccountManager, DEFAULT_MESSAGES, SignInButton, SignedIn, SignedOut, SynqProvider, UserButton, WalletManager, useAccountSessions, useAuth, useLinkedAccounts, usePlugin, useSession, useUser, useWallets };