@protobase/ui 0.3.5 → 0.4.1

package/dist/app/staff-banner.js

@@ -0,0 +1,67 @@
+import { authMessage } from "../auth/auth-messages.js";
+import { formatDateTime } from "../format/date.js";
+import { Button } from "../primitives/button.js";
+import { useState } from "react";
+import { UserRoundCog } from "lucide-react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/staff-banner.tsx
+/** Across the top of the app while staff are signed in as someone: who, as whom, why, until when, and a way to stop. */
+const StaffBanner = ({ signIn, onStop }) => {
+	const [stopping, setStopping] = useState(false);
+	const [error, setError] = useState();
+	const stop = async () => {
+		setStopping(true);
+		setError(void 0);
+		try {
+			await onStop();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setStopping(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		"aria-label": "Staff session",
+		className: "flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-warning/40 bg-warning-soft px-4 py-2 text-[13px] text-warning-text",
+		children: [
+			/* @__PURE__ */ jsx(UserRoundCog, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "min-w-64 flex-1 break-words",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: signIn.staffName ?? signIn.staff
+					}),
+					" is signed in as ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: signIn.user
+					}),
+					" until",
+					" ",
+					formatDateTime(Date.parse(signIn.expiresAt)),
+					". Reason: ",
+					signIn.reason
+				]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-xs font-medium text-danger-text",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				loading: stopping,
+				onClick: () => void stop(),
+				children: "Stop staff session"
+			})
+		]
+	});
+};
+//#endregion
+export { StaffBanner };

package/dist/app/use-record-editor.js

@@ -6,8 +6,8 @@ import { readDraft, writeDraft } from "./draft-storage.js";
 import { isConflict, useUpdateRecord } from "../data/use-update-record.js";
 import { nameFailingOperation } from "./batch-failure.js";
 import { useEffect, useState } from "react";
-import { useQueryClient } from "@tanstack/react-query";
 import { isApiError } from "@protobase/client";
+import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-record-editor.ts
 const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));
 /**

package/dist/app-shell/breadcrumb.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/breadcrumb.tsx
 const inApp = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 /** The trail of where you are; the last crumb, the current page, shows on phones too. */

package/dist/app-shell/global-search.js

@@ -3,8 +3,8 @@ import { Input } from "../primitives/input.js";
 import { Kbd } from "../primitives/kbd.js";
 import { Spinner } from "../primitives/spinner.js";
 import { useId, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/global-search.tsx
 /** Moves the highlighted result by `delta`, wrapping around; from nothing (`-1`) it goes to the first or the last. */
 const moveActive = (active, count, delta) => {

package/dist/app-shell/profile-menu.js

@@ -2,8 +2,8 @@ import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronsUpDown, LogOut } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/profile-menu.tsx
 const menuRow = "flex min-h-11 w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-muted md:min-h-0";
 /** The person at the bottom of the sidebar; the menu is fixed to the viewport so a narrow sidebar cannot clip it. */

package/dist/app-shell/sidebar-group.js

@@ -3,8 +3,8 @@ import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage
 import { SidebarItem } from "./sidebar-item.js";
 import { StatusDot } from "./status-dot.js";
 import { useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-group.tsx
 const row = {
 	"text-large": "h-8 gap-2.5 px-2.5 text-[13px]",

package/dist/app-shell/top-bar.js

@@ -2,8 +2,8 @@ import { cn } from "../lib/cn.js";
 import { Breadcrumb } from "./breadcrumb.js";
 import { GlobalSearch } from "./global-search.js";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Menu, Search, X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/top-bar.tsx
 const iconButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
 const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search }) => {

package/dist/assistant-dock/assistant-dock.js

@@ -4,8 +4,8 @@ import { Composer } from "../chat/composer.js";
 import { SidePanel } from "../side-panel/side-panel.js";
 import { PartView } from "./part-view.js";
 import { useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Sparkles } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/assistant-dock/assistant-dock.tsx
 const defaultPlaceholder = "Ask a question...";
 /** The assistant beside the app: renders a backend's chat, its cards and status line, and sends messages and clicks back. */

package/dist/auth/auth-gate.js

@@ -1,28 +1,42 @@
 import { Spinner } from "../primitives/spinner.js";
 import { useAuth } from "./auth-provider.js";
 import { Button } from "../primitives/button.js";
+import { EmailCodePage } from "./email-code-page.js";
 import { FirstRunPage } from "./first-run-page.js";
 import { readResetLink, withoutResetLink } from "./reset-link.js";
 import { ForgotPasswordPage } from "./forgot-password-page.js";
 import { ResetPasswordPage } from "./reset-password-page.js";
+import { SetupRequiredPage } from "./setup-required-page.js";
 import { SignInPage } from "./sign-in-page.js";
+import { readStaffLink, withoutStaffLink } from "./staff-link.js";
+import { StaffSignInPage } from "./staff-sign-in-page.js";
+import { TwoFactorPage } from "./two-factor-page.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-gate.tsx
 const firstPage = () => {
 	const link = readResetLink(window.location.href);
-	return link ? {
+	if (link) return {
 		kind: "reset-password",
 		token: link.token
+	};
+	const staff = readStaffLink(window.location.href);
+	return staff ? {
+		kind: "staff-sign-in",
+		link: staff
 	} : { kind: "sign-in" };
 };
 const forgetResetLink = () => window.history.replaceState(window.history.state, "", withoutResetLink(window.location.href));
-/** Shows the app when the user is signed in (or the server has no login), and the right page otherwise. */
+const forgetStaffLink = () => window.history.replaceState(window.history.state, "", withoutStaffLink(window.location.href));
+/**
+* Shows the app when the user is signed in (or the server has no login), and the right page otherwise: the sign-in
+* steps, or the page an emailed reset link or a staff link opened.
+*/
 const AuthGate = ({ workspace, children }) => {
 	const { state, recheck, passwordReset, signOut } = useAuth();
 	const [page, setPage] = useState(firstPage);
 	useEffect(() => {
-		if (state.kind === "signed-in") setPage((current) => current.kind === "sign-in" && current.notice ? { kind: "sign-in" } : current);
+		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => current.kind === "email-code" || current.kind === "sign-in" && current.notice ? { kind: "sign-in" } : current);
 	}, [state.kind]);
 	const leaveResetPage = (next) => {
 		forgetResetLink();
@@ -35,6 +49,10 @@ const AuthGate = ({ workspace, children }) => {
 			notice: "Your password is changed. Sign in with the new one."
 		});
 	};
+	const backToSignIn = () => {
+		setPage({ kind: "sign-in" });
+		signOut();
+	};
 	switch (state.kind) {
 		case "loading": return /* @__PURE__ */ jsxs("div", {
 			className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
@@ -58,12 +76,32 @@ const AuthGate = ({ workspace, children }) => {
 		onRequestNewLink: passwordReset ? () => leaveResetPage({ kind: "forgot-password" }) : void 0,
 		onBack: () => leaveResetPage({ kind: "sign-in" })
 	});
+	if (page.kind === "staff-sign-in") return /* @__PURE__ */ jsx(StaffSignInPage, {
+		link: page.link,
+		onBack: () => {
+			forgetStaffLink();
+			setPage({ kind: "sign-in" });
+		}
+	});
 	if (state.kind === "signed-in") return children;
+	if (state.kind === "two-factor") return /* @__PURE__ */ jsx(TwoFactorPage, {
+		methods: state.methods,
+		onBack: backToSignIn
+	});
+	if (state.kind === "setup-required") return /* @__PURE__ */ jsx(SetupRequiredPage, { missing: state.missing }, state.missing.join());
 	if (page.kind === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { onBack: () => setPage({ kind: "sign-in" }) });
+	if (page.kind === "email-code") return /* @__PURE__ */ jsx(EmailCodePage, {
+		email: page.email,
+		onBack: () => setPage({ kind: "sign-in" })
+	});
 	return /* @__PURE__ */ jsx(SignInPage, {
 		workspace,
 		notice: page.notice,
-		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0
+		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0,
+		onCodeSent: (email) => setPage({
+			kind: "email-code",
+			email
+		})
 	});
 };
 //#endregion

package/dist/auth/auth-messages.js

@@ -0,0 +1,48 @@
+//#region src/auth/auth-messages.ts
+const tooManyRequests = "Too many attempts. Wait a minute and try again.";
+const passkeyClosed = "The passkey prompt closed before it finished. Try again.";
+const messages = {
+	INVALID_EMAIL_OR_PASSWORD: "The email or password is not right.",
+	INVALID_PASSWORD: "The password is not right.",
+	INVALID_OTP: "The code is not right.",
+	OTP_EXPIRED: "The code has expired. Ask for a new one.",
+	TOO_MANY_ATTEMPTS: "Too many wrong codes. Ask for a new one.",
+	INVALID_CODE: "The code is not right.",
+	INVALID_BACKUP_CODE: "The backup code is not right, or was used before.",
+	TOO_MANY_ATTEMPTS_REQUEST_NEW_CODE: "Too many wrong codes. Sign in again.",
+	ACCOUNT_TEMPORARILY_LOCKED: "Too many wrong codes. Wait 15 minutes and try again.",
+	INVALID_TWO_FACTOR_COOKIE: "This sign-in took too long. Sign in again.",
+	AUTH_CANCELLED: passkeyClosed,
+	ERROR_CEREMONY_ABORTED: passkeyClosed,
+	REGISTRATION_CANCELLED: passkeyClosed,
+	PASSKEY_NOT_FOUND: "This passkey is not registered for an account here.",
+	AUTHENTICATION_FAILED: "The passkey could not be checked. Try again.",
+	PREVIOUSLY_REGISTERED: "This passkey is added already.",
+	ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED: "This passkey is added already.",
+	SESSION_NOT_FRESH: "For this change, sign out and sign in again first."
+};
+const known = (error) => error.code ? messages[error.code] : void 0;
+/** Better Auth's error from a sign-in step or an account change, in words for the person at the keyboard. */
+const authMessage = (error) => known(error) ?? (error.status === 429 ? tooManyRequests : error.message);
+/** As `authMessage`, for the password form: any other 401 is a wrong email or password. */
+const signInMessage = (error) => known(error) ?? (error.status === 429 ? tooManyRequests : error.status === 401 ? messages.INVALID_EMAIL_OR_PASSWORD : error.message);
+const staffMessages = {
+	STAFF_PERMISSION_MISSING: "Your staff account has no permission to sign in as people here.",
+	STAFF_SIGN_IN_NOT_STRONG: "Sign in to your staff account with a passkey or a second step, then try again.",
+	STAFF_SIGN_IN_STALE: "Your staff sign-in is too old. Sign in to your staff account again.",
+	STAFF_SIGN_IN_EXPIRED: "This staff sign-in took too long or was used already. Start again.",
+	STAFF_SIGN_IN_FAILED: "The staff sign-in did not go through at the provider. Try again.",
+	STAFF_USER_UNAVAILABLE: "There is no account with this address, or it is disabled.",
+	STAFF_REASON_REQUIRED: "Say why you sign in as this person, in at least 10 characters.",
+	SIGN_IN_METHOD_FORBIDDEN: "Staff sign-in is turned off for this app.",
+	INVALID_CALLBACK_URL: "This page is not on an address the server trusts."
+};
+/** Why a staff sign-in did not go through, from the code it came back with or an `AuthError` of its start. */
+const staffSignInMessage = (failure) => {
+	const code = typeof failure === "string" ? failure : failure.code;
+	if (code && staffMessages[code]) return staffMessages[code];
+	if (typeof failure === "string") return "The staff sign-in did not go through. Try again.";
+	return failure.status === 429 ? tooManyRequests : failure.message;
+};
+//#endregion
+export { authMessage, signInMessage, staffSignInMessage };

package/dist/auth/auth-provider.js

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { createAuthSession } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/auth-provider.tsx
 const AuthContext = createContext(null);
 const useAuth = () => {
@@ -11,45 +11,67 @@ const useAuth = () => {
 /** Finds out whether the server has a login and who is signed in, and keeps that state for the app. */
 const AuthProvider = ({ session: given, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
+	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
 	const [socialProviders, setSocialProviders] = useState([]);
+	const [staffSignIn, setStaffSignIn] = useState();
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
 	const session = useMemo(() => given ?? createAuthSession({ onSignedOut: () => signedOut.current() }), [given]);
+	const enter = useCallback(async (user) => {
+		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
+		setState(missing.length > 0 ? {
+			kind: "setup-required",
+			user,
+			missing
+		} : {
+			kind: "signed-in",
+			user,
+			...staff && { staff }
+		});
+	}, [session]);
+	const finish = useCallback(async (result) => result.kind === "two-factor" ? setState({
+		kind: "two-factor",
+		methods: result.methods
+	}) : enter(result.user), [enter]);
 	const recheck = useCallback(() => {
 		setState({ kind: "loading" });
 		session.status().then(async (status) => {
+			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
 			setSocialProviders(status.socialProviders);
+			setStaffSignIn(status.staffSignIn);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
-			setState(user ? {
-				kind: "signed-in",
-				user
-			} : { kind: "signed-out" });
-		}, (error) => setState({
+			return user ? enter(user) : setState({ kind: "signed-out" });
+		}).catch((error) => setState({
 			kind: "error",
 			message: error instanceof Error ? error.message : "The server did not answer"
 		}));
-	}, [session]);
+	}, [session, enter]);
 	useEffect(recheck, [recheck]);
 	const api = useMemo(() => ({
 		state,
 		session,
+		signInMethods,
 		passwordReset,
 		socialProviders,
+		staffSignIn,
 		markSignedOut,
 		recheck,
-		signIn: async (email, password) => {
-			setState({
-				kind: "signed-in",
-				user: await session.signIn(email, password)
-			});
-		},
+		signIn: async (email, password) => finish(await session.signIn(email, password)),
+		sendSignInCode: (email) => session.sendSignInCode(email),
+		signInWithCode: async (email, code) => finish(await session.signInWithCode(email, code)),
+		signInWithPasskey: async () => enter(await session.signInWithPasskey()),
+		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
 			window.location.assign(await session.signInSocial(provider, window.location.href));
 		},
+		stopStaffSession: async () => {
+			await session.staff.stop();
+			setState({ kind: "signed-out" });
+		},
 		signOut: async () => {
 			await session.signOut();
 			setState({ kind: "signed-out" });
@@ -57,10 +79,14 @@ const AuthProvider = ({ session: given, children }) => {
 	}), [
 		state,
 		session,
+		signInMethods,
 		passwordReset,
 		socialProviders,
+		staffSignIn,
 		markSignedOut,
-		recheck
+		recheck,
+		finish,
+		enter
 	]);
 	return /* @__PURE__ */ jsx(AuthContext.Provider, {
 		value: api,

package/dist/auth/code-input.js

@@ -0,0 +1,17 @@
+import { cn } from "../lib/cn.js";
+import { Input } from "../primitives/input.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/code-input.tsx
+/** A 6-digit one-time code field: digits on phone keyboards, filled from the mail app where the system offers it. */
+const CodeInput = ({ className, ...rest }) => /* @__PURE__ */ jsx(Input, {
+	type: "text",
+	inputMode: "numeric",
+	autoComplete: "one-time-code",
+	pattern: "[0-9]{6}",
+	maxLength: 6,
+	spellCheck: false,
+	className: cn("min-h-6 font-mono tracking-[0.3em]", className),
+	...rest
+});
+//#endregion
+export { CodeInput };

package/dist/auth/email-code-form.js

@@ -0,0 +1,81 @@
+import { Button } from "../primitives/button.js";
+import { CodeInput } from "./code-input.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/email-code-form.tsx
+/** The second half of signing in with an emailed code: the code from the email. */
+const EmailCodeForm = ({ email, onSubmit, onResend, onBack, busy, error, notice }) => {
+	const [code, setCode] = useState("");
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Check your email",
+		description: "Enter the code we sent to sign in.",
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "mb-4 text-[13px] text-muted-foreground",
+				children: [
+					"If ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-foreground",
+						children: email
+					}),
+					" has an account, a 6-digit code is on its way. It works for 5 minutes, once."
+				]
+			}),
+			notice && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				children: notice
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-4",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(code.trim());
+				},
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "flex flex-col gap-1.5 text-[13px] font-medium",
+						children: ["Code", /* @__PURE__ */ jsx(CodeInput, {
+							name: "code",
+							required: true,
+							autoFocus: true,
+							value: code,
+							invalid: Boolean(error),
+							onChange: (event) => setCode(event.target.value)
+						})]
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-xs font-medium text-danger-text",
+						children: error
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						loading: busy,
+						className: "min-h-10",
+						children: "Sign in"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: onBack,
+							className: "min-h-10",
+							children: "Back to sign in"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onClick: onResend,
+							disabled: busy,
+							className: "min-h-10",
+							children: "Send a new code"
+						})]
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { EmailCodeForm };

package/dist/auth/email-code-page.js

@@ -0,0 +1,40 @@
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { EmailCodeForm } from "./email-code-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/email-code-page.tsx
+/** Signs in with the code emailed to `email`; the account's second step follows when it has one. */
+const EmailCodePage = ({ email, onBack }) => {
+	const { signInWithCode, sendSignInCode } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [notice, setNotice] = useState();
+	const attempt = async (step) => {
+		setBusy(true);
+		setError(void 0);
+		setNotice(void 0);
+		try {
+			await step();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsx(EmailCodeForm, {
+		email,
+		busy,
+		error,
+		notice,
+		onBack,
+		onSubmit: (code) => void attempt(() => signInWithCode(email, code)),
+		onResend: () => void attempt(async () => {
+			await sendSignInCode(email);
+			setNotice("A new code is on its way. Only the newest one works.");
+		})
+	});
+};
+//#endregion
+export { EmailCodePage };

package/dist/auth/first-run-page.js

@@ -1,8 +1,8 @@
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/first-run-page.tsx
 const createAdminCommand = "protobase users create you@example.com";
 /**

package/dist/auth/forgot-password-page.js

@@ -2,8 +2,8 @@ import { useAuth } from "./auth-provider.js";
 import { ForgotPasswordForm } from "./forgot-password-form.js";
 import { resetLinkTarget } from "./reset-link.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/forgot-password-page.tsx
 /** Asks the server to email a reset link that leads back to this page. */
 const ForgotPasswordPage = ({ onBack }) => {

package/dist/auth/reset-password-page.js

@@ -1,8 +1,8 @@
 import { useAuth } from "./auth-provider.js";
 import { ResetPasswordForm } from "./reset-password-form.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/reset-password-page.tsx
 /** Better Auth's answers to a new password, in words for the person at the keyboard. */
 const resetPasswordMessage = (error) => {

package/dist/auth/setup-required-form.js

@@ -0,0 +1,43 @@
+import { Button } from "../primitives/button.js";
+import { TwoFactorSetup } from "../account/two-factor-setup.js";
+import { AuthLayout } from "./auth-layout.js";
+import { KeyRound } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/setup-required-form.tsx
+const titles = {
+	twoFactor: "Turn on two-factor authentication",
+	passkey: "Add a passkey"
+};
+/** Shown after signing in while the account lacks something the sign-in policy requires; the app opens once it is set up. */
+const SetupRequiredForm = ({ step, twoFactor, onAddPasskey, busy, error, onSignOut }) => /* @__PURE__ */ jsxs(AuthLayout, {
+	title: titles[step],
+	description: "This app requires it for every account.",
+	children: [step === "twoFactor" ? /* @__PURE__ */ jsx(TwoFactorSetup, { ...twoFactor }) : /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: "A passkey signs you in with Face ID, Touch ID, Windows Hello, your phone or a security key. Your browser asks which one to use."
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-xs font-medium text-danger-text",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "primary",
+				loading: busy,
+				onClick: onAddPasskey,
+				className: "min-h-10",
+				children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Add a passkey"]
+			})
+		]
+	}), /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onSignOut,
+		className: "mt-4 w-full text-center text-[13px] font-medium text-muted-foreground hover:underline",
+		children: "Sign out"
+	})]
+});
+//#endregion
+export { SetupRequiredForm };

package/dist/auth/setup-required-page.js

@@ -0,0 +1,51 @@
+import { Spinner } from "../primitives/spinner.js";
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { SetupRequiredForm } from "./setup-required-form.js";
+import { useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/setup-required-page.tsx
+/** Sets up what the sign-in policy requires, one thing at a time, then reads the account again to open the app. */
+const SetupRequiredPage = ({ missing }) => {
+	const { session, recheck, signOut } = useAuth();
+	const [methods, setMethods] = useState();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	useEffect(() => {
+		session.account.signInMethods().then(setMethods, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your account"));
+	}, [session]);
+	const addPasskey = async () => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await session.account.addPasskey();
+			recheck();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setBusy(false);
+		}
+	};
+	if (!methods && !error) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	return /* @__PURE__ */ jsx(SetupRequiredForm, {
+		step: missing[0],
+		busy,
+		error,
+		onAddPasskey: () => void addPasskey(),
+		onSignOut: () => void signOut(),
+		twoFactor: {
+			offerEmailedCodes: methods?.mail ?? false,
+			needsPassword: methods?.account.password ?? true,
+			onStartApp: (password) => session.account.startAuthenticatorApp(password),
+			onConfirmApp: (code) => session.account.confirmAuthenticatorApp(code),
+			onEmailedCodes: (password) => session.account.turnOnEmailedCodes(password),
+			onDone: recheck
+		}
+	});
+};
+//#endregion
+export { SetupRequiredPage };