@synqauth/react 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,2180 @@
+'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}`,
+	apiKeys: "API keys",
+	noApiKeys: "No API keys yet.",
+	newApiKey: "New API key",
+	api: "API",
+	keyScopes: "What it may do",
+	expires: "Expires",
+	never: "Never",
+	inDays: (days) => `In ${days} days`,
+	makeKey: "Make key",
+	makingKey: "Making…",
+	revoke: "Revoke",
+	revokeKey: (name) => `Revoke ${name}`,
+	revoked: "Revoked",
+	expired: "Expired",
+	lastUsed: (when) => `Last used ${when}`,
+	neverUsed: "Never used",
+	expiresOn: (when) => `Expires ${when}`,
+	copyKeyNow: "Copy this key now: you won’t see it again.",
+	copy: "Copy",
+	copied: "Copied",
+	done: "Done",
+	keyNeedsFreshSignIn: "Making a key needs a recent sign-in.",
+	signInAgain: "Sign in again",
+	email: "Email",
+	password: "Password",
+	signInWithPasskey: "Sign in with a passkey",
+	passkeyFor: (domain) => `Use a passkey for ${domain}`,
+	emailMeACode: "Email me a code",
+	or: "or",
+	code: "Code",
+	codeSentTo: (email) => `We sent a code to ${email}.`,
+	verifyYourEmail: (email) => `Enter the code we sent to ${email} to verify your email address.`,
+	verify: "Verify",
+	sendAnotherCode: "Send another code",
+	useAnotherWay: "Use another way",
+	skipForNow: "Skip for now",
+	forgotPassword: "Forgot your password?",
+	createAccount: "Create account",
+	newHere: "New here?",
+	haveAnAccount: "Have an account?",
+	continuingToSignIn: "Taking you to sign in…",
+	tryAgainIn: (seconds) => seconds < 60 ? `Try again in ${seconds} seconds.` : `Try again in ${Math.ceil(seconds / 60)} minutes.`,
+	signInProblems: {
+		missing: "Fill in every field.",
+		invalid_email: "Enter a valid email address.",
+		wrong_credentials: "That email and password don’t match.",
+		email_taken: "An account already uses that email address. Sign in instead.",
+		password_too_short: "That password is too short.",
+		password_too_long: "That password is too long.",
+		password_guessable: "That password is too easy to guess.",
+		password_breached: "That password has appeared in a data breach. Choose another.",
+		wrong_code: "That code isn’t right.",
+		code_expired: "That code has expired. Send another.",
+		code_used_up: "Too many tries with that code. Send another.",
+		address_suppressed: "Email to that address doesn’t arrive. Use another address.",
+		team_only: "Only the team can sign in here.",
+		send_failed: "The email couldn’t be sent. Try again.",
+		passkey_failed: "That passkey didn’t work. Try again.",
+		passkey_unknown: "That passkey isn’t for an account here.",
+		passkey_expired: "That took too long. Try your passkey again.",
+		passkey_cancelled: "No passkey was used.",
+		slow_down: "Wait a moment, then try again.",
+		locked: "Too many tries.",
+		limited: "Too many tries.",
+		expired: "That sign-in timed out. Start again.",
+		unavailable: "Sign-in isn’t working right now. Try again."
+	},
+	signInRefusals: {
+		disabled: "This account is disabled.",
+		deleting: "This account is being deleted.",
+		sign_up_closed: "New accounts can’t be made here.",
+		already_exists: "An account already uses that email 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"),
+	apiKeys: list("account/v1/api-keys"),
+	keyableApis: list("account/v1/apis")
+};
+const EMPTY = {
+	data: null,
+	error: null,
+	loading: false
+};
+const NO_RESOURCES = {
+	profile: EMPTY,
+	metadata: EMPTY,
+	wallets: EMPTY,
+	accounts: EMPTY,
+	sessions: EMPTY,
+	apiKeys: EMPTY,
+	keyableApis: 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 person's API keys for the brand's APIs (AERO-1693), revoked and expired ones too. */
+function useApiKeys() {
+	return useAccountData("apiKeys");
+}
+/** The brand's APIs that let the person make keys, with the scopes each defines. */
+function useKeyableApis() {
+	return useAccountData("keyableApis");
+}
+/** 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$1() });
+			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$1()
+					})
+				});
+				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;
+				}
+			},
+			apiKeys: {
+				list: read("apiKeys"),
+				async create(input) {
+					const result = await change("POST", "v1/api-keys", input);
+					const { data } = result;
+					if (data) {
+						const made = withoutKey(data);
+						store.put("apiKeys", (list) => list && [...list, made]);
+					}
+					return result;
+				},
+				async revoke(revoked) {
+					const result = await change("DELETE", `v1/api-keys/${id(revoked)}`);
+					if (!result.error) {
+						const at = (/* @__PURE__ */ new Date()).toISOString();
+						store.put("apiKeys", (list) => list && list.map((k) => k.id === revoked ? {
+							...k,
+							revoked_at: at
+						} : k));
+					}
+					return result;
+				}
+			},
+			plugins
+		};
+	}, [
+		store,
+		request,
+		basePath,
+		navigate,
+		plugins,
+		session,
+		change
+	]);
+}
+/** A new key as the list keeps it: its description, never the key itself. */
+function withoutKey(made) {
+	const copy = { ...made };
+	delete copy.key;
+	return copy;
+}
+/**
+* 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$1() {
+	if (typeof window === "undefined") return "/";
+	return `${window.location.pathname}${window.location.search}`;
+}
+//#endregion
+//#region src/sign-in.ts
+function webAuthn() {
+	return globalThis.PublicKeyCredential;
+}
+/** Whether this browser takes the issuer's passkeys from this page, and offers them as people type. */
+async function passkeyCapabilities() {
+	const statics = webAuthn();
+	if (!statics?.getClientCapabilities || !statics.parseRequestOptionsFromJSON) return {
+		supported: false,
+		autofill: false
+	};
+	try {
+		const capabilities = await statics.getClientCapabilities();
+		const supported = capabilities.relatedOrigins === true;
+		return {
+			supported,
+			autofill: supported && capabilities.conditionalGet === true
+		};
+	} catch {
+		return {
+			supported: false,
+			autofill: false
+		};
+	}
+}
+/** One sign-in on the app's own screens, through the route mount's `sign-in/flow`. */
+function useSignIn(options = {}) {
+	const { request, navigate, store } = useSynqContext();
+	const auth = useAuth();
+	const [step, setStep] = useState("start");
+	const [pending, setPending] = useState(0);
+	const [problem, setProblem] = useState(null);
+	const [email, setEmail] = useState(void 0);
+	const [canSkip, setCanSkip] = useState(false);
+	const [handover, setHandover] = useState(null);
+	const [relatedDomain, setRelatedDomain] = useState(null);
+	const [capabilities, setCapabilities] = useState({
+		supported: false,
+		autofill: false
+	});
+	const autofilling = useRef(null);
+	const latest = useRef(options);
+	useEffect(() => {
+		latest.current = options;
+	});
+	const { returnTo } = options;
+	useEffect(() => {
+		let live = true;
+		passkeyCapabilities().then((found) => {
+			if (live) setCapabilities(found);
+		});
+		return () => {
+			live = false;
+			autofilling.current?.abort();
+		};
+	}, []);
+	const actions = useMemo(() => {
+		async function post(body) {
+			setPending((n) => n + 1);
+			try {
+				const result = await call(request, "sign-in/flow", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({
+						...body,
+						returnTo: latest.current.returnTo ?? currentPath()
+					})
+				});
+				if (result.error) {
+					setProblem({
+						code: "unavailable",
+						message: result.error.message
+					});
+					return null;
+				}
+				return result.data;
+			} finally {
+				setPending((n) => n - 1);
+			}
+		}
+		/** Shows what the mount answered. */
+		async function show(answer) {
+			if (!answer) return;
+			switch (answer.status) {
+				case "signed-in":
+					autofilling.current?.abort();
+					setStep("done");
+					setProblem(null);
+					await store.refreshSession();
+					if (latest.current.onSignedIn) latest.current.onSignedIn(answer.returnTo);
+					else navigate(answer.returnTo);
+					return;
+				case "code-sent":
+					setStep("code");
+					setEmail(answer.email);
+					setProblem(null);
+					return;
+				case "verify-email":
+					setStep("verify-email");
+					setEmail(answer.email);
+					setCanSkip(answer.canSkip);
+					setProblem(null);
+					return;
+				case "passkey":
+					setRelatedDomain(answer.passkey.related?.rpId ?? null);
+					if (answer.problem) setProblem({
+						code: answer.problem,
+						message: answer.message ?? ""
+					});
+					return;
+				case "retry":
+					setProblem({
+						code: answer.problem,
+						message: answer.message,
+						...answer.retryAfter === void 0 ? {} : { retryAfter: answer.retryAfter }
+					});
+					return;
+				case "hosted":
+					autofilling.current?.abort();
+					setHandover(answer.hosted);
+					return;
+				case "refused":
+					setStep("start");
+					setProblem({
+						code: "refused",
+						reason: answer.reason,
+						message: answer.message
+					});
+					return;
+				case "expired":
+					setStep("start");
+					setProblem({
+						code: "expired",
+						message: answer.message
+					});
+					return;
+				case "restarted": return;
+			}
+		}
+		const run = async (body) => show(await post(body));
+		/** Asks Synq for a passkey's options, the browser for the passkey, and Synq to take it. */
+		async function passkey(related, mediation) {
+			const statics = webAuthn();
+			if (!statics?.parseRequestOptionsFromJSON) return;
+			autofilling.current?.abort();
+			const answer = await post({ step: "passkey-options" });
+			if (answer?.status !== "passkey") {
+				if (answer?.status === "hosted" && answer.hosted.reason === "passkey_unavailable") setCapabilities({
+					supported: false,
+					autofill: false
+				});
+				if (mediation) return;
+				return show(answer);
+			}
+			setRelatedDomain(answer.passkey.related?.rpId ?? null);
+			const chosen = related ? answer.passkey.related : void 0;
+			const controller = new AbortController();
+			if (mediation) autofilling.current = controller;
+			let credential;
+			try {
+				credential = await navigator.credentials.get({
+					publicKey: statics.parseRequestOptionsFromJSON(chosen?.options ?? answer.passkey.options),
+					signal: controller.signal,
+					...mediation ? { mediation } : {}
+				});
+			} catch (error) {
+				if (!mediation && !controller.signal.aborted) setProblem({
+					code: "passkey_cancelled",
+					message: String(error)
+				});
+				return;
+			} finally {
+				if (autofilling.current === controller) autofilling.current = null;
+			}
+			if (!credential) return;
+			await run({
+				step: "passkey",
+				credential: credential.toJSON(),
+				related: Boolean(chosen)
+			});
+		}
+		return {
+			password: {
+				signIn: ({ email: address, password }) => run({
+					step: "password",
+					email: address,
+					password
+				}),
+				signUp: ({ email: address, password }) => run({
+					step: "password",
+					screen: "sign-up",
+					email: address,
+					password
+				})
+			},
+			emailCode: {
+				send: (address) => run({
+					step: "email",
+					email: address
+				}),
+				verify: (code) => run({
+					step: "code",
+					code
+				}),
+				resend: () => run({ step: "resend" })
+			},
+			verifyEmail: {
+				verify: (code) => run({
+					step: "code",
+					code
+				}),
+				resend: () => run({ step: "resend" }),
+				skip: () => run({ step: "skip" })
+			},
+			passkeySignIn: ({ related = false } = {}) => passkey(related),
+			passkeyAutofill: () => passkey(false, "conditional"),
+			startOver: async () => {
+				autofilling.current?.abort();
+				await post({ step: "restart" });
+				setStep("start");
+				setProblem(null);
+				setEmail(void 0);
+				setCanSkip(false);
+				setHandover(null);
+			}
+		};
+	}, [
+		request,
+		navigate,
+		store
+	]);
+	const startAutofill = useCallback(() => capabilities.autofill ? actions.passkeyAutofill() : Promise.resolve(), [capabilities.autofill, actions]);
+	const continueOnHostedPage = useCallback((overrides = {}) => {
+		const method = overrides.method ?? handover?.method;
+		const loginHint = overrides.loginHint ?? handover?.loginHint ?? email;
+		auth.signIn({
+			...returnTo ? { returnTo } : {},
+			...method ? { method } : {},
+			...loginHint ? { loginHint } : {}
+		});
+	}, [
+		auth,
+		handover,
+		email,
+		returnTo
+	]);
+	return {
+		step,
+		pending: pending > 0,
+		problem,
+		email,
+		canSkip,
+		handover,
+		password: actions.password,
+		emailCode: actions.emailCode,
+		verifyEmail: actions.verifyEmail,
+		passkey: {
+			supported: capabilities.supported,
+			autofill: capabilities.autofill,
+			relatedDomain,
+			signIn: actions.passkeySignIn,
+			startAutofill
+		},
+		continueOnHostedPage,
+		startOver: actions.startOver
+	};
+}
+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/SignInForm.tsx
+const ALL_METHODS = [
+	"passkey",
+	"email",
+	"password"
+];
+/**
+* Sign-in on the app's own page: a passkey where the browser takes the
+* issuer's, then an emailed code or a password, and the code or the new
+* address's proof after. Whatever only the hosted page can do, it goes
+* there for.
+*/
+function SignInForm({ methods = ALL_METHODS, screen: initialScreen = "sign-in", returnTo, onSignedIn, unstyled, className }) {
+	const signIn = useSignIn({
+		...returnTo === void 0 ? {} : { returnTo },
+		...onSignedIn === void 0 ? {} : { onSignedIn }
+	});
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const [screen, setScreen] = useState(initialScreen);
+	const passwords = methods.includes("password");
+	const codes = methods.includes("email");
+	const passkeys = methods.includes("passkey") && signIn.passkey.supported;
+	const signingUp = screen === "sign-up" && passwords;
+	const { step, handover, continueOnHostedPage } = signIn;
+	useEffect(() => {
+		if (handover) continueOnHostedPage();
+	}, [handover, continueOnHostedPage]);
+	const root = rootClass(unstyled, "sign-in-form", className);
+	if (handover || step === "done") return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsx("p", {
+			className: c("muted"),
+			role: "status",
+			children: handover ? m.continuingToSignIn : m.signedIn
+		})
+	});
+	if (step === "code") return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsx(EmailCodeForm, {
+			signIn,
+			unstyled
+		})
+	});
+	if (step === "verify-email") return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsx(VerifyEmailForm, {
+			signIn,
+			unstyled
+		})
+	});
+	const others = codes || passwords;
+	return /* @__PURE__ */ jsx("div", {
+		className: root,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				passkeys && !signingUp ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(PasskeyButton, {
+						signIn,
+						unstyled
+					}),
+					signIn.passkey.relatedDomain ? /* @__PURE__ */ jsx(PasskeyButton, {
+						signIn,
+						related: true,
+						unstyled
+					}) : null,
+					others ? /* @__PURE__ */ jsx("p", {
+						className: c("muted"),
+						children: m.or
+					}) : null
+				] }) : null,
+				passwords ? /* @__PURE__ */ jsx(PasswordForm, {
+					signIn,
+					screen: signingUp ? "sign-up" : "sign-in",
+					emailCode: codes,
+					autofill: passkeys,
+					unstyled
+				}) : codes ? /* @__PURE__ */ jsx(EmailCodeForm, {
+					signIn,
+					autofill: passkeys,
+					unstyled
+				}) : signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+					problem: signIn.problem,
+					m,
+					c
+				}) : null,
+				passwords ? /* @__PURE__ */ jsxs("p", {
+					className: c("muted"),
+					children: [
+						signingUp ? m.haveAnAccount : m.newHere,
+						" ",
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: c("link"),
+							onClick: () => setScreen(signingUp ? "sign-in" : "sign-up"),
+							children: signingUp ? m.signIn : m.createAccount
+						})
+					]
+				}) : null
+			]
+		})
+	});
+}
+/** The button for a passkey: the brand's, or with `related` its own host's on its custom domain. */
+function PasskeyButton({ signIn, related = false, children, unstyled, className }) {
+	const m = useSynqMessages();
+	const domain = signIn.passkey.relatedDomain;
+	if (!signIn.passkey.supported || related && !domain) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: rootClass(unstyled, "button", className),
+		disabled: signIn.pending,
+		onClick: () => void signIn.passkey.signIn({ related }),
+		children: children ?? (related && domain ? m.passkeyFor(domain) : m.signInWithPasskey)
+	});
+}
+/**
+* An email address and a password: signs in, or with `screen="sign-up"`
+* makes an account. With `emailCode`, it offers a code by email for the
+* same address too.
+*/
+function PasswordForm({ signIn, screen = "sign-in", emailCode = false, autofill = false, unstyled, className }) {
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const signingUp = screen === "sign-up";
+	const onSubmit = (event) => {
+		event.preventDefault();
+		const data = new FormData(event.currentTarget);
+		const input = {
+			email: field(data, "email").trim(),
+			password: field(data, "password")
+		};
+		signingUp ? signIn.password.signUp(input) : signIn.password.signIn(input);
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: rootClass(unstyled, "password-form", className),
+		onSubmit,
+		"aria-busy": signIn.pending,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				/* @__PURE__ */ jsx(EmailField, {
+					signIn,
+					autofill: autofill && !signingUp,
+					signingUp,
+					c
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: c("field"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: c("label"),
+						children: m.password
+					}), /* @__PURE__ */ jsx("input", {
+						className: c("input"),
+						name: "password",
+						type: "password",
+						required: true,
+						autoComplete: signingUp ? "new-password" : "current-password"
+					})]
+				}),
+				signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+					problem: signIn.problem,
+					m,
+					c
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: c("actions"),
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: c("button", "button-primary"),
+						disabled: signIn.pending,
+						children: signingUp ? m.createAccount : m.signIn
+					}), emailCode && !signingUp ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: c("button"),
+						disabled: signIn.pending,
+						onClick: (event) => {
+							const email = event.currentTarget.form?.elements.namedItem("email");
+							if (!(email instanceof HTMLInputElement) || !email.reportValidity()) return;
+							signIn.emailCode.send(email.value.trim());
+						},
+						children: m.emailMeACode
+					}) : null]
+				}),
+				signingUp ? null : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("link"),
+					onClick: (event) => {
+						const email = event.currentTarget.form?.elements.namedItem("email");
+						const typed = email instanceof HTMLInputElement ? email.value.trim() : "";
+						signIn.continueOnHostedPage({
+							method: "password",
+							...typed ? { loginHint: typed } : {}
+						});
+					},
+					children: m.forgotPassword
+				})
+			]
+		})
+	});
+}
+/** An emailed code: the address to send it to, then the code it held. */
+function EmailCodeForm({ signIn, autofill = false, unstyled, className }) {
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const id = useId();
+	const root = rootClass(unstyled, "email-code-form", className);
+	const problem = signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+		problem: signIn.problem,
+		m,
+		c
+	}) : null;
+	if (signIn.step === "code") {
+		const onSubmit = (event) => {
+			event.preventDefault();
+			signIn.emailCode.verify(field(new FormData(event.currentTarget), "code").trim());
+		};
+		return /* @__PURE__ */ jsx("form", {
+			className: root,
+			onSubmit,
+			"aria-busy": signIn.pending,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: c("form"),
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: c("muted"),
+						id: `${id}-sent`,
+						children: m.codeSentTo(signIn.email ?? "")
+					}),
+					/* @__PURE__ */ jsx(OneTimeCodeInput, {
+						label: m.code,
+						"aria-describedby": `${id}-sent`,
+						unstyled
+					}),
+					problem,
+					/* @__PURE__ */ jsxs("div", {
+						className: c("actions"),
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "submit",
+								className: c("button", "button-primary"),
+								disabled: signIn.pending,
+								children: m.verify
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: c("button"),
+								disabled: signIn.pending,
+								onClick: () => void signIn.emailCode.resend(),
+								children: m.sendAnotherCode
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: c("button"),
+								disabled: signIn.pending,
+								onClick: () => void signIn.startOver(),
+								children: m.useAnotherWay
+							})
+						]
+					})
+				]
+			})
+		});
+	}
+	const onSubmit = (event) => {
+		event.preventDefault();
+		signIn.emailCode.send(field(new FormData(event.currentTarget), "email").trim());
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: root,
+		onSubmit,
+		"aria-busy": signIn.pending,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				/* @__PURE__ */ jsx(EmailField, {
+					signIn,
+					autofill,
+					signingUp: false,
+					c
+				}),
+				problem,
+				/* @__PURE__ */ jsx("div", {
+					className: c("actions"),
+					children: /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: c("button", "button-primary"),
+						disabled: signIn.pending,
+						children: m.emailMeACode
+					})
+				})
+			]
+		})
+	});
+}
+/** The code that proves a new account's address, or "Skip for now" where the brand allows. */
+function VerifyEmailForm({ signIn, unstyled, className }) {
+	const m = useSynqMessages();
+	const c = styler(unstyled);
+	const id = useId();
+	const onSubmit = (event) => {
+		event.preventDefault();
+		signIn.verifyEmail.verify(field(new FormData(event.currentTarget), "code").trim());
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: rootClass(unstyled, "verify-email-form", className),
+		onSubmit,
+		"aria-busy": signIn.pending,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: c("form"),
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: c("muted"),
+					id: `${id}-sent`,
+					children: m.verifyYourEmail(signIn.email ?? "")
+				}),
+				/* @__PURE__ */ jsx(OneTimeCodeInput, {
+					label: m.code,
+					"aria-describedby": `${id}-sent`,
+					unstyled
+				}),
+				signIn.problem ? /* @__PURE__ */ jsx(ProblemText, {
+					problem: signIn.problem,
+					m,
+					c
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: c("actions"),
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: c("button", "button-primary"),
+							disabled: signIn.pending,
+							children: m.verify
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: c("button"),
+							disabled: signIn.pending,
+							onClick: () => void signIn.verifyEmail.resend(),
+							children: m.sendAnotherCode
+						}),
+						signIn.canSkip ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: c("button"),
+							disabled: signIn.pending,
+							onClick: () => void signIn.verifyEmail.skip(),
+							children: m.skipForNow
+						}) : null
+					]
+				})
+			]
+		})
+	});
+}
+/** The field for an emailed code, named `code`: digits, filled from the message where the device can. */
+function OneTimeCodeInput({ label, unstyled, className, ...input }) {
+	const c = styler(unstyled);
+	return /* @__PURE__ */ jsxs("label", {
+		className: c("field"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: c("label"),
+			children: label
+		}), /* @__PURE__ */ jsx("input", {
+			className: [c("input", "code-input"), className].filter(Boolean).join(" ") || void 0,
+			name: "code",
+			required: true,
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			maxLength: 10,
+			autoComplete: "one-time-code",
+			autoFocus: true,
+			...input
+		})]
+	});
+}
+/** The address field, which offers passkeys as the person types where it may, and starts that. */
+function EmailField({ signIn, autofill, signingUp, c }) {
+	const m = useSynqMessages();
+	const offer = autofill && signIn.passkey.autofill && signIn.step === "start";
+	const startAutofill = signIn.passkey.startAutofill;
+	useEffect(() => {
+		if (offer) startAutofill();
+	}, [offer, startAutofill]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: c("field"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: c("label"),
+			children: m.email
+		}), /* @__PURE__ */ jsx("input", {
+			className: c("input"),
+			name: "email",
+			type: "email",
+			required: true,
+			autoComplete: signingUp ? "email" : offer ? "username webauthn" : "username",
+			defaultValue: signIn.email ?? ""
+		})]
+	});
+}
+/** What the person typed in a form's field. */
+function field(data, name) {
+	const value = data.get(name);
+	return typeof value === "string" ? value : "";
+}
+/** What went wrong, in the app's words where it gave them, and how long to wait. */
+function ProblemText({ problem, m, c }) {
+	const said = (problem.code === "refused" && problem.reason ? m.signInRefusals[problem.reason] : void 0) ?? m.signInProblems[problem.code] ?? problem.message;
+	const wait = problem.retryAfter === void 0 ? "" : ` ${m.tryAgainIn(problem.retryAfter)}`;
+	return /* @__PURE__ */ jsxs("p", {
+		className: c("error"),
+		role: "alert",
+		children: [said, wait]
+	});
+}
+//#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",
+	"apiKeys"
+];
+/** 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) : section === "sessions" ? /* @__PURE__ */ jsx(SessionsSection, { unstyled }, section) : /* @__PURE__ */ jsx(ApiKeysSection, { 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.handle ? `@${account.handle}` : 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
+		})]
+	});
+}
+/** How long a new key may last, in days: the account API takes up to 366. */
+const KEY_LIFETIMES = [
+	30,
+	90,
+	365
+];
+function ApiKeysSection({ unstyled }) {
+	const keys = useApiKeys();
+	const apis = useKeyableApis();
+	const m = useSynqMessages();
+	const [made, setMade] = useState(null);
+	const c = styler(unstyled);
+	if ((apis.data?.length ?? 0) === 0 && (keys.data?.length ?? 0) === 0) return null;
+	return /* @__PURE__ */ jsxs(Section, {
+		title: m.apiKeys,
+		unstyled,
+		children: [
+			made && /* @__PURE__ */ jsx(NewKey, {
+				made,
+				onDone: () => setMade(null),
+				unstyled
+			}),
+			keys.data ? keys.data.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: c("list"),
+				children: keys.data.map((key) => /* @__PURE__ */ jsx(ApiKeyRow, {
+					apiKey: key,
+					unstyled
+				}, key.id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: c("muted"),
+				children: m.noApiKeys
+			}) : /* @__PURE__ */ jsx(Pending, {
+				isLoading: keys.isLoading,
+				error: keys.error,
+				unstyled
+			}),
+			apis.data && apis.data.length > 0 && /* @__PURE__ */ jsx(NewKeyForm, {
+				apis: apis.data,
+				onMade: setMade,
+				unstyled
+			})
+		]
+	});
+}
+/** The key just made, shown this once, with a way to copy it. */
+function NewKey({ made, onDone, unstyled }) {
+	const m = useSynqMessages();
+	const [copied, setCopied] = useState(false);
+	const c = styler(unstyled);
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(made.key);
+			setCopied(true);
+		} catch {
+			setCopied(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: c("form"),
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: c("row-title"),
+				children: m.copyKeyNow
+			}),
+			/* @__PURE__ */ jsx("code", {
+				className: c("input"),
+				"aria-label": made.name,
+				children: made.key
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: c("actions"),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("button", "button-primary"),
+					onClick: () => void copy(),
+					children: copied ? m.copied : m.copy
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("button"),
+					onClick: onDone,
+					children: m.done
+				})]
+			})
+		]
+	});
+}
+function ApiKeyRow({ apiKey, unstyled }) {
+	const { apiKeys } = useAuth();
+	const m = useSynqMessages();
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(null);
+	const [shownAt] = useState(() => Date.now());
+	const c = styler(unstyled);
+	const expired = apiKey.expires_at !== null && Date.parse(apiKey.expires_at) <= shownAt;
+	const live = apiKey.revoked_at === null && !expired;
+	async function revoke() {
+		setBusy(true);
+		const result = await apiKeys.revoke(apiKey.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: apiKey.name
+			}),
+			apiKey.revoked_at !== null ? /* @__PURE__ */ jsx("span", {
+				className: c("badge"),
+				children: m.revoked
+			}) : expired && /* @__PURE__ */ jsx("span", {
+				className: c("badge"),
+				children: m.expired
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: c("muted"),
+				children: `${apiKey.prefix}… · ${apiKey.api.name} · ${apiKey.scopes.join(", ")}`
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: c("muted"),
+				children: [apiKey.last_used_at ? m.lastUsed(formatDate(apiKey.last_used_at)) : m.neverUsed, apiKey.expires_at && live ? ` · ${m.expiresOn(formatDate(apiKey.expires_at))}` : ""]
+			}),
+			live && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: c("button"),
+				disabled: busy,
+				"aria-label": m.revokeKey(apiKey.name),
+				onClick: () => void revoke(),
+				children: m.revoke
+			}),
+			failure && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: c("error"),
+				children: failure
+			})
+		]
+	});
+}
+function NewKeyForm({ apis, onMade, unstyled }) {
+	const { apiKeys, signIn } = useAuth();
+	const m = useSynqMessages();
+	const [api, setApi] = useState(apis[0].identifier);
+	const [name, setName] = useState("");
+	const [scopes, setScopes] = useState([]);
+	const [lifetime, setLifetime] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const [failure, setFailure] = useState(null);
+	const scopeLegend = useId();
+	const c = styler(unstyled);
+	const chosen = apis.find((a) => a.identifier === api) ?? apis[0];
+	async function make(event) {
+		event.preventDefault();
+		setBusy(true);
+		setFailure(null);
+		const result = await apiKeys.create({
+			api: chosen.identifier,
+			name: name.trim(),
+			scopes: [...scopes],
+			...lifetime === null ? {} : { expires_at: new Date(Date.now() + lifetime * 864e5).toISOString() }
+		});
+		setBusy(false);
+		if (result.error) {
+			setFailure({
+				text: failureText(result.error),
+				fresh: result.error.code === "fresh_sign_in_required"
+			});
+			return;
+		}
+		setName("");
+		setScopes([]);
+		onMade(result.data);
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		className: c("form"),
+		onSubmit: (event) => void make(event),
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: c("row-title"),
+				children: m.newApiKey
+			}),
+			apis.length > 1 && /* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.api
+				}), /* @__PURE__ */ jsx("select", {
+					className: c("input"),
+					value: chosen.identifier,
+					onChange: (event) => {
+						setApi(event.target.value);
+						setScopes([]);
+					},
+					children: apis.map((a) => /* @__PURE__ */ jsx("option", {
+						value: a.identifier,
+						children: a.name
+					}, a.identifier))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.name
+				}), /* @__PURE__ */ jsx("input", {
+					className: c("input"),
+					name: "key-name",
+					required: true,
+					maxLength: 100,
+					value: name,
+					onChange: (event) => setName(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				className: c("field"),
+				"aria-labelledby": scopeLegend,
+				children: [/* @__PURE__ */ jsx("legend", {
+					id: scopeLegend,
+					className: c("label"),
+					children: m.keyScopes
+				}), chosen.scopes.map((scope) => /* @__PURE__ */ jsxs("label", {
+					className: c("row"),
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: scopes.includes(scope.name),
+						onChange: (event) => setScopes((now) => event.target.checked ? [...now, scope.name] : now.filter((one) => one !== scope.name))
+					}), /* @__PURE__ */ jsx("span", { children: scope.description || scope.name })]
+				}, scope.name))]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: c("field"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: c("label"),
+					children: m.expires
+				}), /* @__PURE__ */ jsxs("select", {
+					className: c("input"),
+					value: lifetime === null ? "" : String(lifetime),
+					onChange: (event) => setLifetime(event.target.value === "" ? null : Number(event.target.value)),
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: m.never
+					}), KEY_LIFETIMES.map((days) => /* @__PURE__ */ jsx("option", {
+						value: days,
+						children: m.inDays(days)
+					}, days))]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: c("actions"),
+				children: /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					className: c("button", "button-primary"),
+					disabled: busy || name.trim() === "" || scopes.length === 0,
+					children: busy ? m.makingKey : m.makeKey
+				})
+			}),
+			failure && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: c("error"),
+				children: [/* @__PURE__ */ jsx("p", { children: failure.fresh ? m.keyNeedsFreshSignIn : failure.text }), failure.fresh && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: c("button"),
+					onClick: () => signIn({ maxAge: 300 }),
+					children: m.signInAgain
+				})]
+			})
+		]
+	});
+}
+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, EmailCodeForm, OneTimeCodeInput, PasskeyButton, PasswordForm, SignInButton, SignInForm, SignedIn, SignedOut, SynqProvider, UserButton, VerifyEmailForm, WalletManager, useAccountSessions, useApiKeys, useAuth, useKeyableApis, useLinkedAccounts, usePlugin, useSession, useSignIn, useUser, useWallets };