@protobase/ui 0.3.4 → 0.4.1

package/dist/app/runtime/runtime-status.js

@@ -0,0 +1,25 @@
+import { formatDateTime } from "../../format/date.js";
+import { isApiError } from "@protobase/client";
+//#region src/app/runtime/runtime-status.ts
+/** The top bar shows the update button only when there is an update and the endpoint wants it shown. */
+const showsUpdateButton = (status) => Boolean(status?.updateAvailable && status.indicator);
+const policyLabels = {
+	immediate: "Updates as soon as a release is out",
+	weekly: "Updates at a set time every week",
+	scheduled: "Updates at the time set for this release",
+	manual: "Updates only when asked to"
+};
+/** When the latest version will be applied on its own, in words. */
+const nextUpdateText = (status) => {
+	if (status.updating) return "Updating now";
+	if (status.nextUpdateAt) return `${policyLabels[status.policy]}: next on ${formatDateTime(Date.parse(status.nextUpdateAt))} UTC`;
+	return policyLabels[status.policy];
+};
+/** Why "Update now" failed, in words. */
+const updateErrorText = (error) => {
+	if (isApiError(error) && error.status === 409) return "Already on the latest version, or an update is running.";
+	if (isApiError(error) && error.status === 403) return "Only an admin can update the runtime.";
+	return "The update could not be started. Try again later.";
+};
+//#endregion
+export { nextUpdateText, showsUpdateButton, updateErrorText };

package/dist/app/runtime/runtime-update.js

@@ -0,0 +1,77 @@
+import { Button } from "../../primitives/button.js";
+import { Dialog } from "../../primitives/dialog.js";
+import { nextUpdateText, showsUpdateButton, updateErrorText } from "./runtime-status.js";
+import { useRuntimeClient, useRuntimeStatus } from "./use-runtime-status.js";
+import { useState } from "react";
+import { ArrowUpCircle } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/runtime/runtime-update.tsx
+const Row = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex justify-between gap-4 py-1 text-[13px]",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ jsx("span", {
+		className: "font-medium tabular-nums",
+		children: value
+	})]
+});
+/**
+* The top bar's runtime update button, shown while the endpoint reports an update and wants it shown, and the dialog
+* it opens: the versions, when the update policy applies the latest one, and "Update now". Below `md` only the icon shows.
+*/
+const RuntimeUpdate = ({ client }) => {
+	const { status, update, requesting, error, checkError } = useRuntimeStatus(client);
+	const [open, setOpen] = useState(false);
+	if (!status || !open && !showsUpdateButton(status)) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+		size: "sm",
+		variant: "ghost",
+		"aria-label": "Update available",
+		title: "Update available",
+		onClick: () => setOpen(true),
+		className: "max-md:size-9 max-md:p-0",
+		children: [/* @__PURE__ */ jsx(ArrowUpCircle, { className: "size-3.5 text-primary" }), /* @__PURE__ */ jsx("span", {
+			className: "max-md:sr-only",
+			children: "Update"
+		})]
+	}), open && /* @__PURE__ */ jsxs(Dialog, {
+		title: "Runtime update",
+		description: nextUpdateText(status),
+		onClose: () => setOpen(false),
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: () => setOpen(false),
+			children: "Close"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			loading: requesting,
+			disabled: status.updating || !status.updateAvailable,
+			onClick: () => void update(),
+			children: status.updating ? "Updating…" : "Update now"
+		})] }),
+		children: [
+			/* @__PURE__ */ jsx(Row, {
+				label: "Current version",
+				value: status.version
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "Latest version",
+				value: status.latest
+			}),
+			error !== void 0 && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-3 text-[13px] text-danger-text",
+				children: updateErrorText(error)
+			}),
+			checkError !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "mt-3 text-[13px] text-muted-foreground",
+				children: "The status could not be checked again; this is the last one read."
+			})
+		]
+	})] });
+};
+const OwnRuntimeUpdate = ({ url }) => /* @__PURE__ */ jsx(RuntimeUpdate, { client: useRuntimeClient(url) });
+/** The update button for the endpoint `/meta` names, signed in as the user; `client` replaces it in stories and tests. */
+const RuntimeUpdateButton = ({ url, client }) => client ? /* @__PURE__ */ jsx(RuntimeUpdate, { client }) : /* @__PURE__ */ jsx(OwnRuntimeUpdate, { url });
+//#endregion
+export { RuntimeUpdateButton };

package/dist/app/runtime/use-runtime-status.js

@@ -0,0 +1,59 @@
+import { useApiToken } from "../../auth/use-api-token.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createRuntimeClient } from "@protobase/client";
+//#region src/app/runtime/use-runtime-status.ts
+/** How often the status is read again: rarely, and more often while an update runs so the button goes away when it is done. */
+const refreshMs = 18e5;
+const updatingRefreshMs = 3e4;
+/** A client of the runtime endpoint at `url`, authenticated as the signed-in user; `undefined` until their token is there. */
+const useRuntimeClient = (url) => {
+	const token = useApiToken();
+	const latest = useRef(token);
+	latest.current = token;
+	const ready = token !== void 0;
+	return useMemo(() => ready ? createRuntimeClient({
+		url,
+		token: () => latest.current
+	}) : void 0, [url, ready]);
+};
+/**
+* The runtime's status, read on load and every half hour after, and `update` to apply the latest version now.
+* `status` keeps the last answer when a later read fails, which `checkError` then holds; `error` is why "Update now" failed.
+*/
+const useRuntimeStatus = (client) => {
+	const [status, setStatus] = useState();
+	const [requesting, setRequesting] = useState(false);
+	const [error, setError] = useState();
+	const [checkError, setCheckError] = useState();
+	const updating = status?.updating ?? false;
+	useEffect(() => {
+		if (!client) return;
+		let active = true;
+		const read = () => client.status().then((next) => {
+			if (!active) return;
+			setStatus(next);
+			setCheckError(void 0);
+		}, (reason) => active && setCheckError(reason));
+		read();
+		const timer = setInterval(() => void read(), updating ? updatingRefreshMs : refreshMs);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, [client, updating]);
+	return {
+		status,
+		update: useCallback(async () => {
+			if (!client) return;
+			setRequesting(true);
+			setError(void 0);
+			await client.update().then(setStatus, setError);
+			setRequesting(false);
+		}, [client]),
+		requesting,
+		error,
+		checkError
+	};
+};
+//#endregion
+export { useRuntimeClient, useRuntimeStatus };

package/dist/app/sensitive-field.js

@@ -6,8 +6,8 @@ import { displayValue } from "../live/display-value.js";
 import { toDraft } from "../live/field-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeOff } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 //#region src/app/sensitive-field.tsx
 const mask = "••••••••••";

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 };