@protobase/ui 0.19.0 → 0.19.1

package/dist/app/app.d.ts

@@ -25,7 +25,7 @@ export type AppProps = {
   assistant?: AssistantClient;
   /** A ready-made client of the runtime endpoint, for stories and tests; used only when `/meta` names one. */
   runtime?: RuntimeClient;
-  /** How the plugins `/meta` names are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
+  /** How the plugins are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
   pluginLoader?: PluginLoader;
 };
 /**
@@ -33,5 +33,5 @@ export type AppProps = {
  * 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, basePath, initialUrl, ...rest }: AppProps) => import("react").JSX.Element;
+export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -7,6 +7,9 @@ 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 { startErrorReporting } from "./error-reporting.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { useRecord } from "../data/use-record.js";
@@ -14,7 +17,6 @@ import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
-import { startErrorReporting } from "./error-reporting.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
@@ -22,7 +24,6 @@ import { breadcrumbFor } from "./breadcrumb-for.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
-import { CustomBoundary } from "./pages/custom-boundary.js";
 import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { MembersPage } from "../organizations/members-page.js";
@@ -244,7 +245,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		]
 	});
 };
-const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
+const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {
 	const { state, session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
@@ -254,7 +255,6 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 		onUnauthenticated: markSignedOut,
 		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(PluginGate, {
 			ui,
-			...pluginLoader && { loader: pluginLoader },
 			children: /* @__PURE__ */ jsx(Routes, {
 				workspace,
 				sidebarMode,
@@ -269,16 +269,19 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 * 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, basePath, initialUrl, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
+const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 	session: auth,
 	children: /* @__PURE__ */ jsx(Router, {
 		basePath,
 		initialUrl,
-		children: /* @__PURE__ */ jsx(AuthGate, {
-			workspace,
-			children: /* @__PURE__ */ jsx(Authenticated, {
+		children: /* @__PURE__ */ jsx(PluginSourceProvider, {
+			...pluginLoader && { loader: pluginLoader },
+			children: /* @__PURE__ */ jsx(AuthGate, {
 				workspace,
-				...rest
+				children: /* @__PURE__ */ jsx(Authenticated, {
+					workspace,
+					...rest
+				})
 			})
 		})
 	})

package/dist/app/custom-section.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "./pages/project-ui.js";
 import { Problem } from "./pages/problem.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordScope } from "./pages/record-scope.js";

package/dist/app/displays/custom-display.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "../pages/project-ui.js";
 import { Problem } from "../pages/problem.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
+import { useProjectUi } from "../pages/project-ui.js";
 import { ListDisplayProvider } from "./display-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";

package/dist/app/displays/map-display.js

@@ -1,10 +1,10 @@
 import { cn } from "../../lib/cn.js";
 import { Button } from "../../primitives/button.js";
+import { Problem } from "../pages/problem.js";
 import { humanize } from "../../live/naming.js";
 import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
-import { Problem } from "../pages/problem.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { RecordCard } from "./record-card.js";
 import { boundsAround, worldArea } from "../map/map-area.js";

package/dist/app/displays/record-card.js

@@ -1,4 +1,5 @@
 import { Badge } from "../../primitives/badge.js";
+import { CustomBoundary } from "../pages/custom-boundary.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
@@ -6,7 +7,6 @@ import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
-import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";

package/dist/app/pages/merge-ui.d.ts

@@ -3,7 +3,7 @@ import { ProjectUi } from "./project-ui.js";
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
  * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
- * is drawn, the extended configs' first.
+ * and `beforeSignIn` component is drawn, the extended configs' first.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
 //#endregion

package/dist/app/pages/merge-ui.js

@@ -25,10 +25,18 @@ const slot = (slots) => {
 	const All = () => slots.map((Slot, index) => /* @__PURE__ */ jsx(Slot, {}, index));
 	return All;
 };
+const around = (wrappers) => {
+	if (wrappers.length <= 1) return wrappers[0];
+	const All = ({ children, ...given }) => wrappers.reduceRight((inner, Wrapper) => /* @__PURE__ */ jsx(Wrapper, {
+		...given,
+		children: inner
+	}), children);
+	return All;
+};
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
 * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
-* is drawn, the extended configs' first.
+* and `beforeSignIn` component is drawn, the extended configs' first.
 */
 const mergeUi = (...uis) => {
 	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
@@ -37,6 +45,7 @@ const mergeUi = (...uis) => {
 	const fields = union("The field type", named, (ui) => ui.fields);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
+	const beforeSignIn = around(named.flatMap(({ ui }) => ui.beforeSignIn ? [ui.beforeSignIn] : []));
 	const name = uis.at(-1)?.name;
 	return {
 		...name && { name },
@@ -46,7 +55,8 @@ const mergeUi = (...uis) => {
 		...(actionSlot || rightPanel) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel }
-		} }
+		} },
+		...beforeSignIn && { beforeSignIn }
 	};
 };
 //#endregion

package/dist/app/pages/project-ui.d.ts

@@ -1,5 +1,5 @@
 import { FieldWidget } from "../field-types/field-widget.js";
-import { ComponentType } from "react";
+import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
 //#region src/app/pages/project-ui.d.ts
@@ -19,6 +19,21 @@ export type ActionContext = {
   navigate: (to: AppAddress) => void;
 };
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
+/** What a plugin's `beforeSignIn` component gets from the app, drawn around the pages someone signed out sees. */
+export type BeforeSignInProps = {
+  /** What the app shows someone signed out: the sign-in page, or the app a visitor browses. */
+  children: ReactNode;
+  /**
+   * Enters the app with a session something other than the sign-in page started, such as an endpoint that traded a
+   * one-time code for the session cookie: reads the session again and shows the app signed in. Resolves `false`, and
+   * changes nothing, when there is no session.
+   */
+  signedIn: () => Promise<boolean>;
+  /** The query parameters of the page's address, such as a one-time code a link carries. */
+  params: URLSearchParams;
+  /** Takes these query parameters, such as a used one-time code, out of the address, in place of it in the tab's history. */
+  removeParams: (names: string[]) => void;
+};
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
@@ -38,6 +53,11 @@ export type ProjectUi = {
     actions?: ComponentType;
     rightPanel?: ComponentType;
   };
+  /**
+   * Drawn around the pages someone signed out sees, only for a plugin the app loads before sign-in (`beforeSignIn` in
+   * `options.plugins`): its code runs for them, and it can sign them in (see `BeforeSignInProps`).
+   */
+  beforeSignIn?: ComponentType<BeforeSignInProps>;
 };
 /** A `protobase.ui.tsx` module as `import * as` gives it: components exported by name, the rest as the default export. */
 export type UiModule = {
@@ -47,9 +67,9 @@ export type UiModule = {
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 export declare const defineUi: (ui: ProjectUi) => ProjectUi;
 /**
- * Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
- * `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
- * project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+ * Typed identity, for `export default definePlugin({ name, components, actions, fields, shell, beforeSignIn })` in a
+ * plugin's `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in
+ * a project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
  */
 export declare const definePlugin: (plugin: ProjectUi) => ProjectUi;
 //#endregion

package/dist/app/pages/project-ui.js

@@ -3,9 +3,9 @@ import { createContext, useContext } from "react";
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 const defineUi = (ui) => ui;
 /**
-* Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
-* `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
-* project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+* Typed identity, for `export default definePlugin({ name, components, actions, fields, shell, beforeSignIn })` in a
+* plugin's `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in
+* a project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
 */
 const definePlugin = (plugin) => plugin;
 /** The project's UI, merged with the UI configs it extends and the plugins loaded; `PluginGate` or `ProjectUiProvider` provides it. */

package/dist/app/pages/render-node.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "./project-ui.js";
 import { Problem } from "./problem.js";
 import { CustomBoundary } from "./custom-boundary.js";
+import { useProjectUi } from "./project-ui.js";
 import { ActionBlock } from "./blocks/action.js";
 import { CardBlock } from "./blocks/card.js";
 import { CardRowBlock } from "./blocks/card-row.js";

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

@@ -1,5 +1,5 @@
-import { ActionCard } from "../action-card/action-card.js";
 import { reportRenderError } from "../app/error-reporting.js";
+import { ActionCard } from "../action-card/action-card.js";
 import { useProjectUi } from "../app/pages/project-ui.js";
 import { Component } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/auth/auth-gate.js

@@ -19,6 +19,7 @@ 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 { BeforeSignIn } from "../plugins/before-sign-in.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { signInPath } from "@protobase/schema";
@@ -62,9 +63,14 @@ const Redirect = ({ to }) => {
 * 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.
+* first and comes back to the invitation. The plugins the app loads before sign-in draw around what someone signed
+* out sees (see `BeforeSignIn`), while the gate keeps its state.
 */
 const AuthGate = ({ workspace, children }) => {
+	const page = useAuthPage(workspace, children);
+	return /* @__PURE__ */ jsx(BeforeSignIn, { children: page });
+};
+const useAuthPage = (workspace, children) => {
 	const { state, recheck, passwordReset, signOut, signInProviders, canSignUp, browse } = useAuth();
 	const { path, params, basePath, navigate } = useRouter();
 	const { address, next, open, link, leave } = useSignInAddress();

package/dist/auth/auth-provider.js

@@ -21,6 +21,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [staffSignIn, setStaffSignIn] = useState();
 	const [organizations, setOrganizations] = useState();
 	const [anonymous, setAnonymous] = useState(false);
+	const [beforeSignIn, setBeforeSignIn] = useState([]);
 	const signedOutState = useCallback(() => anonymous ? { kind: "visitor" } : { kind: "signed-out" }, [anonymous]);
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
@@ -54,6 +55,7 @@ const AuthProvider = ({ session: given, children }) => {
 			setStaffSignIn(status.staffSignIn);
 			setOrganizations(status.organizations);
 			setAnonymous(Boolean(status.anonymous));
+			setBeforeSignIn(status.plugins ?? []);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
 			return user ? enter(user) : setState({ kind: status.anonymous ? "visitor" : "signed-out" });
@@ -79,6 +81,13 @@ const AuthProvider = ({ session: given, children }) => {
 		...organizations && { organizations },
 		markSignedOut,
 		recheck,
+		beforeSignIn,
+		adoptSession: async () => {
+			const user = await session.session();
+			if (!user) return false;
+			await enter(user);
+			return true;
+		},
 		...anonymous && { browse: () => {
 			setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current);
 		} },
@@ -116,6 +125,7 @@ const AuthProvider = ({ session: given, children }) => {
 		staffSignIn,
 		organizations,
 		anonymous,
+		beforeSignIn,
 		signedOutState,
 		markSignedOut,
 		recheck,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
-import { ActionContext, ActionHandler, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
+import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
 import "./app/index.js";
@@ -42,4 +42,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResponsiveDialog, type ResponsiveDialogProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResponsiveDialog, type ResponsiveDialogProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -1,5 +1,9 @@
 import { OtpInput } from "./primitives/otp-input.js";
 import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
+import { uiFromModule } from "./app/pages/ui-from-module.js";
+import { mergeUi } from "./app/pages/merge-ui.js";
+import { usePlugin } from "./plugins/plugin-context.js";
+import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
 import { ChatMessage } from "./chat/chat-message.js";
@@ -25,10 +29,6 @@ import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
-import { uiFromModule } from "./app/pages/ui-from-module.js";
-import { mergeUi } from "./app/pages/merge-ui.js";
-import { usePlugin } from "./plugins/plugin-context.js";
-import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";

package/dist/package.js

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

package/dist/plugins/before-sign-in.js

@@ -0,0 +1,49 @@
+import { Spinner } from "../primitives/spinner.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { useRouter } from "../app/router.js";
+import { CustomBoundary } from "../app/pages/custom-boundary.js";
+import { mergePlugins } from "./merge-plugins.js";
+import { usePluginSource } from "./plugin-source.js";
+import { usePluginLoads } from "./use-plugin-loads.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/before-sign-in.tsx
+/**
+* Loads the plugins the setup status names to everyone, from the app's plugin source, and draws their `beforeSignIn`
+* components around `children` for someone signed out or a visitor, once they have loaded, or failed, or after a wait
+* (see `usePluginLoads`). Signed in, it draws `children` alone, and the plugins stay loaded for the app to merge with
+* the others `/meta` names. A `beforeSignIn` that throws leaves `children` as they are without it.
+*/
+const BeforeSignIn = ({ children }) => {
+	const { state, beforeSignIn, adoptSession } = useAuth();
+	const { path, params, navigate } = useRouter();
+	const { loads, settled } = usePluginLoads(beforeSignIn, usePluginSource());
+	const Around = useMemo(() => mergePlugins(void 0, loads).ui.beforeSignIn, [loads]);
+	const removeParams = useCallback((names) => {
+		const kept = new URLSearchParams(params);
+		for (const name of names) kept.delete(name);
+		navigate(kept.size > 0 ? `${path}?${kept}` : path, { replace: true });
+	}, [
+		path,
+		params,
+		navigate
+	]);
+	if (state.kind !== "signed-out" && state.kind !== "visitor") return children;
+	if (!settled) 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"]
+	});
+	if (!Around) return children;
+	return /* @__PURE__ */ jsx(CustomBoundary, {
+		name: "beforeSignIn",
+		fallback: children,
+		children: /* @__PURE__ */ jsx(Around, {
+			signedIn: adoptSession,
+			params,
+			removeParams,
+			children
+		})
+	});
+};
+//#endregion
+export { BeforeSignIn };

package/dist/plugins/plugin-gate.js

@@ -1,9 +1,9 @@
 import { Spinner } from "../primitives/spinner.js";
-import { ProjectUiContext } from "../app/pages/project-ui.js";
-import { useAdminMeta } from "../app/meta-gate.js";
-import { browserLoader } from "./load-plugin.js";
 import { mergePlugins } from "./merge-plugins.js";
+import { usePluginSource } from "./plugin-source.js";
 import { usePluginLoads } from "./use-plugin-loads.js";
+import { ProjectUiContext } from "../app/pages/project-ui.js";
+import { useAdminMeta } from "../app/meta-gate.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/plugins/plugin-gate.tsx
@@ -11,13 +11,13 @@ const PluginsOffContext = createContext([]);
 /** The plugins `/meta` names that the app did not load, and why. */
 const usePluginsOff = () => useContext(PluginsOffContext);
 /**
-* Loads the plugins `/meta` names and provides the project's UI config with theirs merged in. It draws its children
-* once they have loaded, or failed, or after a wait (see `usePluginLoads`); a plugin that fails is left out, and its
-* components draw what any missing component draws.
+* Loads the plugins `/meta` names, from the app's plugin source, and provides the project's UI config with theirs
+* merged in. It draws its children once they have loaded, or failed, or after a wait (see `usePluginLoads`); a plugin
+* that fails is left out, and its components draw what any missing component draws.
 */
-const PluginGate = ({ ui, loader = browserLoader, children }) => {
+const PluginGate = ({ ui, children }) => {
 	const { plugins = [] } = useAdminMeta();
-	const { loads, settled } = usePluginLoads(plugins, loader);
+	const { loads, settled } = usePluginLoads(plugins, usePluginSource());
 	const merged = useMemo(() => mergePlugins(ui, loads), [ui, loads]);
 	if (!settled) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",

package/dist/plugins/plugin-source.js

@@ -0,0 +1,32 @@
+import { browserLoader, loadPlugin } from "./load-plugin.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/plugin-source.tsx
+/** A source that loads with `loader` and keeps each plugin's load, so one named before and after sign-in loads once. */
+const createPluginSource = (loader) => {
+	const loads = /* @__PURE__ */ new Map();
+	return { load: (ref) => {
+		const key = JSON.stringify(ref);
+		const known = loads.get(key);
+		if (known) return known;
+		const load = loadPlugin(ref, loader, window.location.href);
+		loads.set(key, load);
+		return load;
+	} };
+};
+const PluginSourceContext = createContext(null);
+/** The app's plugin source, loading with `loader`: the page's `fetch` and `import()` by default. */
+const PluginSourceProvider = ({ loader = browserLoader, children }) => {
+	const source = useMemo(() => createPluginSource(loader), [loader]);
+	return /* @__PURE__ */ jsx(PluginSourceContext.Provider, {
+		value: source,
+		children
+	});
+};
+const usePluginSource = () => {
+	const source = useContext(PluginSourceContext);
+	if (!source) throw new Error("usePluginSource must be used inside PluginSourceProvider");
+	return source;
+};
+//#endregion
+export { PluginSourceProvider, createPluginSource, usePluginSource };

package/dist/plugins/plugin-ui.js

@@ -19,8 +19,8 @@ const fieldWithin = (plugin, name, widget) => ({
 });
 /**
 * A plugin's UI config from its module, read as a `protobase.ui.tsx` module and merged with the configs it extends,
-* named after the plugin: its components, field types and shell slots draw inside the plugin. Throws `UiConflictError`
-* when the configs it merges define a name twice.
+* named after the plugin: its components, field types, shell slots and `beforeSignIn` draw inside the plugin. Throws
+* `UiConflictError` when the configs it merges define a name twice.
 */
 const pluginUi = (plugin, module) => {
 	const ui = mergeUi({
@@ -33,12 +33,14 @@ const pluginUi = (plugin, module) => {
 		...ui.shell.actions && { actions: within(plugin, ui.shell.actions, "shell.actions") },
 		...ui.shell.rightPanel && { rightPanel: within(plugin, ui.shell.rightPanel, "shell.rightPanel") }
 	};
+	const beforeSignIn = ui.beforeSignIn && within(plugin, ui.beforeSignIn, "beforeSignIn");
 	return {
 		name: plugin.name,
 		components,
 		...ui.actions && { actions: ui.actions },
 		...fields && { fields },
-		...shell && { shell }
+		...shell && { shell },
+		...beforeSignIn && { beforeSignIn }
 	};
 };
 //#endregion

package/dist/plugins/use-plugin-loads.js

@@ -1,4 +1,3 @@
-import { loadPlugin } from "./load-plugin.js";
 import { useEffect, useState } from "react";
 //#region src/plugins/use-plugin-loads.ts
 /** How long the app waits for its plugins before it draws without the ones still loading, which arrive later. */
@@ -8,7 +7,7 @@ const none = [];
 * The plugins `refs` names, in their order, as they load. `settled` once every one has loaded or failed, or after
 * `pluginWaitMs`, so a slow plugin delays the app only that long. Without plugins it is settled at once.
 */
-const usePluginLoads = (refs, loader) => {
+const usePluginLoads = (refs, source) => {
 	const key = JSON.stringify(refs);
 	const [state, setState] = useState({
 		key: "[]",
@@ -34,7 +33,7 @@ const usePluginLoads = (refs, loader) => {
 			publish();
 		}, pluginWaitMs);
 		refs.forEach((ref, index) => {
-			loadPlugin(ref, loader, window.location.href).then((load) => {
+			source.load(ref).then((load) => {
 				results[index] = load;
 				publish();
 			});
@@ -43,7 +42,7 @@ const usePluginLoads = (refs, loader) => {
 			active = false;
 			clearTimeout(timer);
 		};
-	}, [key, loader]);
+	}, [key, source]);
 	if (refs.length === 0) return {
 		loads: none,
 		settled: true