@protobase/ui 0.14.6 → 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,10 +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";
@@ -34,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 {
@@ -48,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, 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 () => {
@@ -86,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", {
@@ -105,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
@@ -145,24 +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" })
-	});
 	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
-		}),
-		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

@@ -14,6 +14,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
+	const [canSignUp, setCanSignUp] = useState(false);
 	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
 	const [platformSignIn, setPlatformSignIn] = useState();
@@ -46,6 +47,7 @@ const AuthProvider = ({ session: given, children }) => {
 		session.status().then(async (status) => {
 			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
+			setCanSignUp(Boolean(status.signUp));
 			setPasskeyDomains(status.passkeyDomains ?? []);
 			setSocialProviders(status.socialProviders);
 			setPlatformSignIn(status.platformSignIn);
@@ -66,6 +68,7 @@ const AuthProvider = ({ session: given, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		canSignUp,
 		passkeyDomains,
 		socialProviders,
 		signInProviders: socialProviders.map((id) => ({
@@ -76,11 +79,14 @@ const AuthProvider = ({ session: given, children }) => {
 		...organizations && { organizations },
 		markSignedOut,
 		recheck,
-		showSignIn: () => setState((current) => current.kind === "visitor" ? { kind: "signed-out" } : current),
-		...anonymous && { browse: () => setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current) },
+		...anonymous && { browse: () => {
+			setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current);
+		} },
 		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)),
+		sendSignUpCode: (email) => session.sendSignUpCode(email),
+		signUp: async (input) => enter(await session.signUp(input)),
 		signInWithPasskey: async (domain) => enter(await session.signInWithPasskey(domain)),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
@@ -102,6 +108,7 @@ const AuthProvider = ({ session: given, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		canSignUp,
 		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-form.js

@@ -14,7 +14,7 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith, onBrowse }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith, onSignUp, onBrowse }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const emailInput = useRef(null);
@@ -133,6 +133,19 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 					})
 				]
 			}),
+			onSignUp && /* @__PURE__ */ jsxs("p", {
+				className: "mt-4 text-center text-[13px] text-muted-foreground",
+				children: [
+					"New here?",
+					" ",
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onSignUp,
+						className: "font-medium text-primary-text hover:underline",
+						children: "Create an account"
+					})
+				]
+			}),
 			onBrowse && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onBrowse,

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

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-const SignInPage = ({ workspace, notice, onForgotPassword, onBrowse, onCodeSent, error: initialError }) => {
+const SignInPage = ({ workspace, notice, onForgotPassword, onSignUp, onBrowse, onCodeSent, error: initialError }) => {
 	const { signIn, signInSocial, signInProviders, signInMethods, passkeyDomains, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState(initialError);
@@ -27,6 +27,7 @@ const SignInPage = ({ workspace, notice, onForgotPassword, onBrowse, onCodeSent,
 		notice,
 		methods: signInMethods,
 		onForgotPassword,
+		onSignUp,
 		onBrowse,
 		providers: signInProviders,
 		onContinueWith: (provider) => void attempt(() => signInSocial(provider), signInMessage),

package/dist/auth/sign-in-prompt.d.ts

@@ -15,7 +15,8 @@ export type SignInPromptProps = {
 });
 /**
  * What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what
- * signing in gives and its benefits, with "Sign in" and, when the prompt names one, a page to make an account. As a page
+ * signing in gives and its benefits, with "Sign in" and a way to make an account: the page the prompt names, or the
+ * app's own sign-up when the server has it. As a page
  * it stands in for a list the visitor cannot see; as a dialog it answers a press on a button that needs an account.
  */
 export declare const SignInPrompt: (props: SignInPromptProps) => import("react").JSX.Element;

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,22 +18,27 @@ const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE_
 	}, benefit))
 }) : null;
 const Actions = ({ prompt }) => {
-	const { showSignIn } = useAuth();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp && /* @__PURE__ */ jsx("a", {
+	const { canSignUp } = useAuth();
+	const { open } = useSignInAddress();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp ? /* @__PURE__ */ jsx("a", {
 		href: prompt.signUp.href,
 		target: "_blank",
 		rel: "noreferrer",
 		className: buttonClass(),
 		children: prompt.signUp.label
+	}) : canSignUp && /* @__PURE__ */ jsx(Button, {
+		onClick: () => open("sign-up"),
+		children: "Create an account"
 	}), /* @__PURE__ */ jsx(Button, {
 		variant: "primary",
-		onClick: showSignIn,
+		onClick: () => open(),
 		children: "Sign in"
 	})] });
 };
 /**
 * What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what
-* signing in gives and its benefits, with "Sign in" and, when the prompt names one, a page to make an account. As a page
+* signing in gives and its benefits, with "Sign in" and a way to make an account: the page the prompt names, or the
+* app's own sign-up when the server has it. As a page
 * it stands in for a list the visitor cannot see; as a dialog it answers a press on a button that needs an account.
 */
 const SignInPrompt = (props) => {