@protobase/ui 0.14.7 → 0.15.0

package/dist/app/app.d.ts

@@ -29,9 +29,9 @@ export type AppProps = {
   pluginLoader?: PluginLoader;
 };
 /**
- * The admin: sign-in first, or browsing as a visitor when the project has an anonymous role, then a sidebar from
- * `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent, in the theme
- * this browser chose, light, dark or the system's.
+ * The admin: the sign-in route first, `/-/sign-in`, or browsing as a visitor when the project has an anonymous role,
+ * then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its
+ * parent, in the theme this browser chose, light, dark or the system's.
  */
-export declare const App: ({ auth, workspace, ...rest }: AppProps) => import("react").JSX.Element;
+export declare const App: ({ auth, workspace, basePath, initialUrl, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -4,6 +4,8 @@ import { AuthProvider, useAuth } from "../auth/auth-provider.js";
 import { AccountSecurityPage } from "../account/account-security-page.js";
 import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
 import { ApiProvider } from "../data/api-provider.js";
+import { Router, useRouter } from "./router.js";
+import { useSignInAddress } from "../auth/use-sign-in-address.js";
 import { managesOrganization, organizationMenuItems, organizationPageTitles } from "../organizations/organization-paths.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
@@ -19,7 +21,6 @@ import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
-import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
 import { CreatePage } from "./create/create-page.js";
@@ -49,7 +50,8 @@ const placeOf = (address) => address?.kind === "page" ? address.page : address?.
 const recordOf = (address) => address?.kind === "record" ? address : void 0;
 const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const meta = useAdminMeta();
-	const { state, session, signOut, showSignIn, stopStaffSession, organizations: organizationSettings } = useAuth();
+	const { state, session, signOut, stopStaffSession, organizations: organizationSettings } = useAuth();
+	const signIn = useSignInAddress();
 	if (state.kind !== "signed-in" && state.kind !== "visitor") throw new Error("The shell is only rendered for a signed-in user or a visitor");
 	const user = state.kind === "signed-in" ? state.user : void 0;
 	const staff = state.kind === "signed-in" ? state.staff : void 0;
@@ -172,7 +174,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		breadcrumb,
 		user: acting && userToShell(acting),
 		onSignOut: user && (() => void signOut()),
-		onSignIn: user ? void 0 : showSignIn,
+		onSignIn: user ? void 0 : () => signIn.open(),
 		workspace: current?.organization?.name ?? workspace,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),
@@ -241,7 +243,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		]
 	});
 };
-const Authenticated = ({ baseUrl, client, sources, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
+const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
 	const { state, session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
@@ -249,34 +251,34 @@ const Authenticated = ({ baseUrl, client, sources, basePath, initialUrl, workspa
 		sources,
 		token: state.kind === "visitor" ? void 0 : session.token,
 		onUnauthenticated: markSignedOut,
-		children: /* @__PURE__ */ jsx(Router, {
-			basePath,
-			initialUrl,
-			children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(PluginGate, {
-				ui,
-				...pluginLoader && { loader: pluginLoader },
-				children: /* @__PURE__ */ jsx(Routes, {
-					workspace,
-					sidebarMode,
-					assistant,
-					runtime
-				})
-			}) }) })
-		})
+		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(PluginGate, {
+			ui,
+			...pluginLoader && { loader: pluginLoader },
+			children: /* @__PURE__ */ jsx(Routes, {
+				workspace,
+				sidebarMode,
+				assistant,
+				runtime
+			})
+		}) }) })
 	});
 };
 /**
-* The admin: sign-in first, or browsing as a visitor when the project has an anonymous role, then a sidebar from
-* `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent, in the theme
-* this browser chose, light, dark or the system's.
+* The admin: the sign-in route first, `/-/sign-in`, or browsing as a visitor when the project has an anonymous role,
+* then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its
+* parent, in the theme this browser chose, light, dark or the system's.
 */
-const App = ({ auth, workspace, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
+const App = ({ auth, workspace, basePath, initialUrl, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 	session: auth,
-	children: /* @__PURE__ */ jsx(AuthGate, {
-		workspace,
-		children: /* @__PURE__ */ jsx(Authenticated, {
+	children: /* @__PURE__ */ jsx(Router, {
+		basePath,
+		initialUrl,
+		children: /* @__PURE__ */ jsx(AuthGate, {
 			workspace,
-			...rest
+			children: /* @__PURE__ */ jsx(Authenticated, {
+				workspace,
+				...rest
+			})
 		})
 	})
 }) });

package/dist/app/record-page.js

@@ -3,13 +3,13 @@ import { formatRelativeTime } from "../format/date.js";
 import { Button } from "../primitives/button.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { useNavigationGuard, useRouter } from "./router.js";
 import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { displayValue } from "../live/display-value.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
-import { useNavigationGuard, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";

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

@@ -1,6 +1,6 @@
 import { useClient } from "../../data/api-provider.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { useRouter } from "../router.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { searchFields, searchFilter, searchPlaceholder, searchTargets, toHit } from "./search-model.js";
 import { useMemo, useState } from "react";

package/dist/app/use-app-address.js

@@ -1,7 +1,7 @@
 import { useIsXs } from "../lib/use-media-query.js";
+import { Link, useRouter } from "./router.js";
 import { changedList, currentAddress, listDefaults, listedResource } from "./current-address.js";
 import { useAdminMeta } from "./meta-gate.js";
-import { Link, useRouter } from "./router.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { appPath, readAppPath } from "@protobase/schema";

package/dist/auth/auth-gate.js

@@ -3,6 +3,7 @@ import { providerMessage } from "./auth-messages.js";
 import { readProviderError, readSignInLink, withoutSignInLink } from "./provider-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button } from "../primitives/button.js";
+import { useRouter } from "../app/router.js";
 import { EmailCodePage } from "./email-code-page.js";
 import { FirstRunPage } from "./first-run-page.js";
 import { readResetLink, withoutResetLink } from "./reset-link.js";
@@ -10,11 +11,13 @@ import { ForgotPasswordPage } from "./forgot-password-page.js";
 import { ProviderSignInPage } from "./provider-sign-in-page.js";
 import { ResetPasswordPage } from "./reset-password-page.js";
 import { SetupRequiredPage } from "./setup-required-page.js";
+import { signInPath } from "./sign-in-address.js";
 import { SignInPage } from "./sign-in-page.js";
 import { SignUpPage } from "./sign-up-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 { useSignInAddress } from "./use-sign-in-address.js";
 import { readInvitationLink, withoutInvitationLink } from "../organizations/invitation-link.js";
 import { InvitationPage } from "../organizations/invitation-page.js";
 import { useCallback, useEffect, useState } from "react";
@@ -35,8 +38,7 @@ const firstPage = () => {
 	const invitation = readInvitationLink(href);
 	if (invitation) return {
 		kind: "invitation",
-		token: invitation.token,
-		signingIn: false
+		token: invitation.token
 	};
 	const provider = readSignInLink(href);
 	if (provider) return {
@@ -49,33 +51,62 @@ const firstPage = () => {
 		providerError
 	} : { kind: "sign-in" };
 };
-const forgetResetLink = () => window.history.replaceState(window.history.state, "", withoutResetLink(window.location.href));
-const forgetStaffLink = () => window.history.replaceState(window.history.state, "", withoutStaffLink(window.location.href));
-const forgetSignInLink = () => window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
-const forgetInvitationLink = () => window.history.replaceState(window.history.state, "", withoutInvitationLink(window.location.href));
+/** Moves to `to`, below the base path, in place of this page in the tab's history, as soon as it shows. */
+const Redirect = ({ to }) => {
+	const { navigate } = useRouter();
+	useEffect(() => navigate(to, { replace: true }), [navigate, to]);
+	return null;
+};
 /**
 * Shows the app when the user is signed in (or the server has no login), or to a visitor when the project lets them
-* browse, and the right page otherwise: the sign-in steps, or the page an emailed reset link, an invitation link or a
-* staff link opened. An invited person with an account signs in first and comes back to the invitation.
+* browse, and the right page otherwise: the step of the sign-in route the address names, or the page an emailed reset
+* link, an invitation link or a staff link opened. Someone signed out without a visitor's browsing goes to the sign-in
+* route, and signing in comes back to the page the route was opened from. An invited person with an account signs in
+* first and comes back to the invitation.
 */
 const AuthGate = ({ workspace, children }) => {
-	const { state, recheck, passwordReset, signOut, signInProviders, showSignIn, canSignUp, entry, showSignUp, browse } = useAuth();
+	const { state, recheck, passwordReset, signOut, signInProviders, canSignUp, browse } = useAuth();
+	const { path, params, basePath, navigate } = useRouter();
+	const { address, next, open, leave } = useSignInAddress();
 	const [page, setPage] = useState(firstPage);
+	const [codeEmail, setCodeEmail] = useState();
+	const [signUpEmail, setSignUpEmail] = useState();
+	const href = new URL(`${basePath}${path}${params.size > 0 ? `?${params}` : ""}`, window.location.origin).href;
+	const forget = useCallback((without) => {
+		const below = without(href).slice(basePath.length);
+		navigate(below.startsWith("/") ? below : `/${below}`, { replace: true });
+	}, [
+		href,
+		basePath,
+		navigate
+	]);
+	const entered = state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required";
 	useEffect(() => {
-		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => {
-			if (current.kind === "provider-sign-in") forgetSignInLink();
-			return current.kind === "email-code" || current.kind === "provider-sign-in" || current.kind === "sign-in" && (current.notice || current.error || current.providerError) ? { kind: "sign-in" } : current;
-		});
-	}, [state.kind]);
+		if (!entered) return;
+		if (page.kind === "provider-sign-in") forget(withoutSignInLink);
+		if (page.kind === "provider-sign-in" || page.kind === "sign-in" && (page.notice || page.error || page.providerError)) setPage({ kind: "sign-in" });
+		setCodeEmail(void 0);
+		setSignUpEmail(void 0);
+	}, [
+		entered,
+		page,
+		forget
+	]);
+	const providerErrorLeft = address !== void 0 && readProviderError(href) !== void 0;
 	useEffect(() => {
-		if (state.kind === "signed-out" && page.kind === "sign-in" && page.providerError) forgetSignInLink();
-	}, [state.kind, page]);
+		if (!entered && page.kind === "sign-in" && page.providerError && providerErrorLeft) forget(withoutSignInLink);
+	}, [
+		entered,
+		page,
+		providerErrorLeft,
+		forget
+	]);
 	const signInFailed = useCallback((error) => setPage({
 		kind: "sign-in",
 		error
 	}), []);
 	const leaveResetPage = (next) => {
-		forgetResetLink();
+		forget(withoutResetLink);
 		setPage(next);
 	};
 	const passwordChanged = async () => {
@@ -87,7 +118,7 @@ const AuthGate = ({ workspace, children }) => {
 	};
 	const backToSignIn = () => {
 		setPage({ kind: "sign-in" });
-		signOut().then(showSignIn);
+		signOut().then(() => open("sign-in", { replace: true }));
 	};
 	switch (state.kind) {
 		case "loading": return /* @__PURE__ */ jsxs("div", {
@@ -106,36 +137,33 @@ const AuthGate = ({ workspace, children }) => {
 		});
 		case "needs-admin": return /* @__PURE__ */ jsx(FirstRunPage, { onCheckAgain: recheck });
 	}
+	if (state.kind === "signed-in" && address) return /* @__PURE__ */ jsx(Redirect, { to: next ?? "/" });
 	if (page.kind === "reset-password") return /* @__PURE__ */ jsx(ResetPasswordPage, {
 		token: page.token,
 		onDone: () => void passwordChanged(),
-		onRequestNewLink: passwordReset ? () => leaveResetPage({ kind: "forgot-password" }) : void 0,
+		onRequestNewLink: passwordReset ? () => {
+			setPage({ kind: "sign-in" });
+			navigate(signInPath({ step: "forgot-password" }), { replace: true });
+		} : void 0,
 		onBack: () => leaveResetPage({ kind: "sign-in" })
 	});
 	if (page.kind === "staff-sign-in") return /* @__PURE__ */ jsx(StaffSignInPage, {
 		link: page.link,
 		onBack: () => {
-			forgetStaffLink();
+			forget(withoutStaffLink);
 			setPage({ kind: "sign-in" });
 		}
 	});
 	const signedOut = state.kind === "signed-out" || state.kind === "visitor";
-	if (page.kind === "invitation" && (state.kind === "signed-in" || signedOut && !page.signingIn)) return /* @__PURE__ */ jsx(InvitationPage, {
+	if (page.kind === "invitation" && (state.kind === "signed-in" || signedOut && !address)) return /* @__PURE__ */ jsx(InvitationPage, {
 		token: page.token,
 		onDone: () => {
-			forgetInvitationLink();
+			forget(withoutInvitationLink);
 			setPage({ kind: "sign-in" });
 		},
-		onSignIn: () => {
-			setPage({
-				...page,
-				signingIn: true
-			});
-			showSignIn();
-		}
+		onSignIn: () => open()
 	});
 	if (state.kind === "signed-in") return children;
-	if (state.kind === "visitor" && page.kind === "sign-in" && !page.notice && !page.error && !page.providerError) return children;
 	if (state.kind === "two-factor") return /* @__PURE__ */ jsx(TwoFactorPage, {
 		methods: state.methods,
 		onBack: backToSignIn
@@ -146,26 +174,52 @@ const AuthGate = ({ workspace, children }) => {
 		workspace,
 		onFailed: signInFailed
 	});
-	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" })
-	});
-	if (canSignUp && entry === "sign-up" && page.kind === "sign-in") return /* @__PURE__ */ jsx(SignUpPage, { workspace });
 	const signIn = page.kind === "sign-in" ? page : { kind: "sign-in" };
+	if (!address) {
+		const message = signIn.notice || signIn.error || signIn.providerError;
+		return state.kind === "visitor" && !message ? children : /* @__PURE__ */ jsx(Redirect, { to: signInPath({ next }) });
+	}
+	const step = {
+		"sign-in": true,
+		"forgot-password": passwordReset,
+		"email-code": codeEmail !== void 0,
+		"sign-up": canSignUp,
+		"sign-up-code": canSignUp && signUpEmail !== void 0
+	}[address.step] ? address.step : "sign-in";
+	const backTo = (target) => () => open(target, { replace: true });
+	const onBrowse = browse && (() => {
+		browse();
+		leave();
+	});
+	if (step === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { onBack: backTo("sign-in") });
+	if (step === "email-code") return /* @__PURE__ */ jsx(EmailCodePage, {
+		email: codeEmail,
+		onBack: backTo("sign-in")
+	});
+	if (step === "sign-up" || step === "sign-up-code") return /* @__PURE__ */ jsx(SignUpPage, {
+		workspace,
+		email: step === "sign-up-code" ? signUpEmail : void 0,
+		onCodeSent: (email) => {
+			setSignUpEmail(email);
+			open("sign-up-code");
+		},
+		onBack: backTo("sign-up"),
+		onSignIn: () => open("sign-in"),
+		onBrowse
+	}, step);
 	const providerError = signIn.providerError && providerMessage(signIn.providerError, signInProviders.length === 1 ? signInProviders[0].name : "the provider");
 	const error = signIn.error ?? providerError;
 	return /* @__PURE__ */ jsx(SignInPage, {
 		workspace,
 		notice: signIn.notice,
 		error,
-		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0,
-		onCodeSent: (email) => setPage({
-			kind: "email-code",
-			email
-		}),
-		onSignUp: canSignUp ? showSignUp : void 0,
-		onBrowse: browse
+		onForgotPassword: passwordReset ? () => open("forgot-password") : void 0,
+		onCodeSent: (email) => {
+			setCodeEmail(email);
+			open("email-code");
+		},
+		onSignUp: canSignUp ? () => open("sign-up") : void 0,
+		onBrowse
 	}, error);
 };
 //#endregion

package/dist/auth/auth-provider.js

@@ -15,7 +15,6 @@ const AuthProvider = ({ session: given, children }) => {
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
 	const [canSignUp, setCanSignUp] = useState(false);
-	const [entry, setEntry] = useState("sign-in");
 	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
 	const [platformSignIn, setPlatformSignIn] = useState();
@@ -29,7 +28,6 @@ const AuthProvider = ({ session: given, children }) => {
 	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()]);
-		setEntry("sign-in");
 		setState(missing.length > 0 ? {
 			kind: "setup-required",
 			user,
@@ -71,7 +69,6 @@ const AuthProvider = ({ session: given, children }) => {
 		signInMethods,
 		passwordReset,
 		canSignUp,
-		entry,
 		passkeyDomains,
 		socialProviders,
 		signInProviders: socialProviders.map((id) => ({
@@ -82,16 +79,7 @@ const AuthProvider = ({ session: given, children }) => {
 		...organizations && { organizations },
 		markSignedOut,
 		recheck,
-		showSignIn: () => {
-			setEntry("sign-in");
-			setState((current) => current.kind === "visitor" ? { kind: "signed-out" } : current);
-		},
-		showSignUp: () => {
-			setEntry("sign-up");
-			setState((current) => current.kind === "visitor" ? { kind: "signed-out" } : current);
-		},
 		...anonymous && { browse: () => {
-			setEntry("sign-in");
 			setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current);
 		} },
 		signIn: async (email, password) => finish(await session.signIn(email, password)),
@@ -121,7 +109,6 @@ const AuthProvider = ({ session: given, children }) => {
 		signInMethods,
 		passwordReset,
 		canSignUp,
-		entry,
 		passkeyDomains,
 		socialProviders,
 		platformSignIn,

package/dist/auth/sign-in-address.js

@@ -0,0 +1,47 @@
+//#region src/auth/sign-in-address.ts
+/** The path of the sign-in route, below the app's base path. Its steps and the page to come back to are in its query. */
+const signInRoute = "/-/sign-in";
+/** The names of the sign-in route's query parameters: the step it shows, and the page to come back to after it. */
+const signInParams = {
+	step: "step",
+	next: "next"
+};
+/**
+* A step of signing in or making an account, each with an address of its own: Back from a step returns to the one
+* before. `email-code` and `sign-up-code` enter the code emailed to an address the step before asked for.
+*/
+const signInSteps = [
+	"sign-in",
+	"forgot-password",
+	"email-code",
+	"sign-up",
+	"sign-up-code"
+];
+const isStep = (value) => signInSteps.includes(value);
+const localPage = (next) => {
+	if (!next?.startsWith("/")) return void 0;
+	const url = new URL(next, "http://local");
+	if (url.origin !== "http://local" || url.pathname === "/-/sign-in") return void 0;
+	return `${url.pathname}${url.search}`;
+};
+/** The path below the base path of a step of the sign-in route, coming back to `next` after it, the start by default. */
+const signInPath = ({ step = "sign-in", next } = {}) => {
+	const params = new URLSearchParams();
+	if (step !== "sign-in") params.set(signInParams.step, step);
+	const page = localPage(next);
+	if (page && page !== "/") params.set(signInParams.next, page);
+	const query = params.toString();
+	return query ? `${signInRoute}?${query}` : signInRoute;
+};
+/** The sign-in route's step and the page to come back to, for the path below the base path; `undefined` elsewhere. */
+const readSignInAddress = (path, params) => {
+	if (path !== "/-/sign-in") return void 0;
+	const step = params.get(signInParams.step);
+	const next = localPage(params.get(signInParams.next));
+	return {
+		step: isStep(step) ? step : "sign-in",
+		...next && { next }
+	};
+};
+//#endregion
+export { readSignInAddress, signInParams, signInPath, signInRoute, signInSteps };

package/dist/auth/sign-in-prompt.js

@@ -1,5 +1,6 @@
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
+import { useSignInAddress } from "./use-sign-in-address.js";
 import { namedIcon } from "../app/named-icon.js";
 import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
 import { useId } from "react";
@@ -17,7 +18,8 @@ const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE_
 	}, benefit))
 }) : null;
 const Actions = ({ prompt }) => {
-	const { showSignIn, canSignUp, showSignUp } = useAuth();
+	const { canSignUp } = useAuth();
+	const { open } = useSignInAddress();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp ? /* @__PURE__ */ jsx("a", {
 		href: prompt.signUp.href,
 		target: "_blank",
@@ -25,11 +27,11 @@ const Actions = ({ prompt }) => {
 		className: buttonClass(),
 		children: prompt.signUp.label
 	}) : canSignUp && /* @__PURE__ */ jsx(Button, {
-		onClick: showSignUp,
+		onClick: () => open("sign-up"),
 		children: "Create an account"
 	}), /* @__PURE__ */ jsx(Button, {
 		variant: "primary",
-		onClick: showSignIn,
+		onClick: () => open(),
 		children: "Sign in"
 	})] });
 };

package/dist/auth/sign-up-page.js

@@ -10,9 +10,8 @@ import { jsx } from "react/jsx-runtime";
 * Makes an account on a server with open sign-up: the address, then the code emailed to it with the person's name and
 * password. The new account is signed in, and sets up what the sign-in policy requires as after any sign-in.
 */
-const SignUpPage = ({ workspace }) => {
-	const { signInMethods, sendSignUpCode, signUp, showSignIn, browse } = useAuth();
-	const [email, setEmail] = useState();
+const SignUpPage = ({ workspace, email, onCodeSent, onBack, onSignIn, onBrowse }) => {
+	const { signInMethods, sendSignUpCode, signUp } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
 	const [notice, setNotice] = useState();
@@ -32,11 +31,11 @@ const SignUpPage = ({ workspace }) => {
 		workspace,
 		busy,
 		error,
-		onSignIn: showSignIn,
-		onBrowse: browse,
+		onSignIn,
+		onBrowse,
 		onSubmit: (address) => void attempt(async () => {
 			await sendSignUpCode(address);
-			setEmail(address);
+			onCodeSent(address);
 		})
 	});
 	return /* @__PURE__ */ jsx(SignUpDetailsForm, {
@@ -45,10 +44,7 @@ const SignUpPage = ({ workspace }) => {
 		busy,
 		error,
 		notice,
-		onBack: () => {
-			setError(void 0);
-			setEmail(void 0);
-		},
+		onBack,
 		onResend: () => void attempt(async () => {
 			await sendSignUpCode(email);
 			setNotice("A new code is on its way. Only the newest one works.");

package/dist/auth/use-sign-in-address.js

@@ -0,0 +1,27 @@
+import { withoutSignInLink } from "./provider-link.js";
+import { useRouter } from "../app/router.js";
+import { readSignInAddress, signInPath } from "./sign-in-address.js";
+import { useCallback, useMemo } from "react";
+//#region src/auth/use-sign-in-address.ts
+/**
+* The sign-in route as logical values, and the ways to move along it: `address` is the step it shows, or `undefined` on
+* any other page; `next` is the page to come back to; `open` shows a step, and `leave` goes back to `next` in place of
+* the route in the tab's history. Components read and write the sign-in route through this hook, never its query.
+*/
+const useSignInAddress = () => {
+	const { path, params, navigate } = useRouter();
+	const address = useMemo(() => readSignInAddress(path, params), [path, params]);
+	const here = withoutSignInLink(new URL(params.size > 0 ? `${path}?${params}` : path, "http://local").href);
+	const next = address ? address.next : here;
+	return {
+		address,
+		next,
+		open: useCallback((step = "sign-in", options) => navigate(signInPath({
+			step,
+			next
+		}), options), [navigate, next]),
+		leave: useCallback(() => navigate(next ?? "/", { replace: true }), [navigate, next])
+	};
+};
+//#endregion
+export { useSignInAddress };

package/dist/package.js

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