@protobase/ui 0.18.0 → 0.19.1

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/app/record-lines.js

@@ -14,7 +14,7 @@ const toLine = (record) => ({
 	unitPriceCents: Math.round(Number(record.unitPrice) * 100)
 });
 /** The lines of a record. Reordering only changes `draft`; the record's Save writes it, in one batch. */
-const RecordLines = ({ lines, draft, vatRate, saving }) => {
+const RecordLines = ({ lines, draft, vatRate, saving, locked = false }) => {
 	const canReorder = can(usePermissions(lines.name), "update");
 	return /* @__PURE__ */ jsx(Section, {
 		title: "Lines",
@@ -29,7 +29,7 @@ const RecordLines = ({ lines, draft, vatRate, saving }) => {
 					onReorder: (next) => draft.setOrder(next.map((line) => line.id)),
 					vatRate,
 					readOnly: true,
-					reorderable: canReorder && !saving
+					reorderable: canReorder && !saving && !locked
 				})
 			})
 		})

package/dist/app/record-mode/record-mode.js

@@ -0,0 +1,31 @@
+//#region src/app/record-mode/record-mode.ts
+/**
+* What the record page shows a user, by the view's `mode`, whether they may change the record and whether its address
+* asks for the form (`edit`). Always editable (`edit`, the default) shows the form, locked to a user who may not change
+* it, and ignores `edit`; `read` and `locked` show the read view or the locked form until the address asks for the
+* form, which only a user who may change the record gets. `offersEdit` is whether the page links to the form;
+* `editing` whether the record is being edited, which decides the help shown only while editing.
+*/
+const recordShown = (mode, canUpdate, edit) => {
+	if (mode === void 0 || mode === "edit") return {
+		shown: canUpdate ? "form" : "locked",
+		offersEdit: false,
+		editing: canUpdate
+	};
+	if (canUpdate && edit) return {
+		shown: "form",
+		offersEdit: false,
+		editing: true
+	};
+	return {
+		shown: mode,
+		offersEdit: canUpdate,
+		editing: false
+	};
+};
+/** Whether a help line shows: always, unless it, or else the view, says only while editing and the record is not. */
+const helpShown = (own, view, editing) => (own ?? view?.helpWhen ?? "always") === "always" || editing;
+/** A field's help line on the record page, when it shows. */
+const fieldHelp = (hints, view, editing) => hints?.help !== void 0 && helpShown(hints.helpWhen, view, editing) ? hints.help : void 0;
+//#endregion
+export { fieldHelp, helpShown, recordShown };

package/dist/app/record-page.js

@@ -1,6 +1,8 @@
+import { cn } from "../lib/cn.js";
+import { inApp } from "../app-shell/breadcrumb.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { formatRelativeTime } from "../format/date.js";
-import { Button } from "../primitives/button.js";
+import { Button, buttonClass } from "../primitives/button.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useNavigationGuard, useRouter } from "./router.js";
@@ -10,7 +12,7 @@ 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 { useAppAddress } from "./use-app-address.js";
+import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
@@ -20,10 +22,12 @@ import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
 import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
+import { SpecTable } from "../record-view/spec-table.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
 import { ValueBadge } from "./value-badge.js";
+import { FieldValue } from "./pages/field-value.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { MapSection } from "./map/map-section.js";
@@ -32,11 +36,13 @@ import { RecordLines, findLinesResource } from "./record-lines.js";
 import { draftStorageKey } from "./draft-storage.js";
 import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
+import { GallerySection } from "./gallery/gallery-section.js";
+import { fieldHelp, helpShown, recordShown } from "./record-mode/record-mode.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
 import { Fragment, useMemo } from "react";
-import { Check } from "lucide-react";
+import { Check, Pencil } from "lucide-react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
@@ -45,16 +51,17 @@ import { enumLabel } from "@protobase/schema";
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
 * The view's layout, or one section with the editable fields when the view has none. A user who may only read the
-* resource has every field read-only, so they get every field, locked, rather than an empty section.
+* resource has every field read-only, so they get every field, locked, rather than an empty section; so does the read
+* view, which shows the record rather than what can be changed.
 */
-const layoutFor = (model, view) => {
+const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
 	const shown = Object.values(model.fields).filter((field) => !hidden(model, field.name));
 	const editable = shown.filter((field) => !field.readOnly);
 	return [{
 		kind: "section",
 		title: "Details",
-		fields: (editable.length > 0 ? editable : shown).map((field) => field.name)
+		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
 	}];
 };
 const RecordPage = ({ resource, recordKey }) => {
@@ -92,7 +99,7 @@ const RecordPage = ({ resource, recordKey }) => {
 const LoadedRecord = ({ model, recordKey, stored }) => {
 	const meta = useAdminMeta();
 	const { basePath } = useRouter();
-	const { go, open } = useAppAddress();
+	const { address, go, open } = useAppAddress();
 	const view = meta.views[model.name];
 	const singular = view?.names?.singular ?? humanize(model.name);
 	const title = recordTitle(model, view, stored.record, recordKey);
@@ -109,12 +116,23 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		draftKey: auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
 		lines: linesDraft
 	});
-	useNavigationGuard(editor.dirty);
 	const queryClient = useQueryClient();
 	const client = useClient();
 	const permissions = usePermissions(model.name);
 	const restore = useRestore(model);
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
+	const { shown, offersEdit, editing } = recordShown(view?.recordMode, canUpdate, address?.kind === "record" && address.edit === true);
+	useNavigationGuard(editor.dirty && shown === "form");
+	const readAddress = {
+		kind: "record",
+		resource: model.name,
+		key: recordKey
+	};
+	const editAddress = {
+		...readAddress,
+		edit: true
+	};
+	const leavesForm = shown === "form" && view?.recordMode !== void 0 && view.recordMode !== "edit";
 	const canDelete = can(permissions, "delete") && stored.permissions?.delete !== false;
 	const remove = useDeleteFlow({
 		model,
@@ -128,7 +146,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	});
 	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
 	const { fields: fieldTypes } = useProjectUi();
-	const layout = layoutFor(model, view);
+	const layout = layoutFor(model, view, shown === "read");
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const status = model.fields.status?.type === "enum" ? String(stored.record.status) : void 0;
 	const updatedAt = auditField(model, "updated");
@@ -142,7 +160,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		const conflict = editor.conflicts[name];
 		return /* @__PURE__ */ jsx(Field, {
 			label: hint(name)?.label ?? humanize(name),
-			help: hint(name)?.help,
+			help: fieldHelp(hint(name), view, editing),
 			error: editor.errors[name],
 			wide: Boolean(hint(name)?.multiline),
 			conflict: conflict === void 0 ? void 0 : {
@@ -163,7 +181,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				stored: stored.record[name],
 				relationLabel: related.labels[name],
 				relationTo: related.addresses[name],
-				locked: !canUpdate || access === "read",
+				locked: shown !== "form" || access === "read",
 				invalid: Boolean(editor.errors[name]),
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
 				resource: model.name,
@@ -171,6 +189,30 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			})
 		}, field.sensitive ? `${name}:${stored.etag}` : name);
 	};
+	const readRow = (name) => {
+		const field = model.fields[name];
+		const value = field.sensitive ? /* @__PURE__ */ jsx(FieldEditor, {
+			field,
+			hints: hint(name),
+			value: "",
+			stored: stored.record[name],
+			locked: true,
+			reveal: () => client.reveal(model.name, recordKey, name),
+			resource: model.name,
+			onChange: (next) => editor.change(name, next)
+		}) : /* @__PURE__ */ jsx(FieldValue, {
+			model,
+			field,
+			value: stored.record[name],
+			relationLabel: related.labels[name]
+		});
+		return {
+			label: hint(name)?.label ?? humanize(name),
+			help: fieldHelp(hint(name), view, editing),
+			wide: Boolean(hint(name)?.multiline),
+			value
+		};
+	};
 	const firstSidebar = layout.findIndex((item) => item.kind === "sidebar");
 	const summary = /* @__PURE__ */ jsx(MetadataCard, {
 		title: "Summary",
@@ -206,34 +248,51 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		etag: stored.etag,
 		permissions: stored.permissions
 	};
-	const saveControls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const save = async () => {
+		if (await editor.save() && leavesForm) go(readAddress, { replace: true });
+	};
+	const deleteButton = canDelete && /* @__PURE__ */ jsx(Button, {
+		variant: "danger",
+		className: "max-md:min-h-11",
+		onClick: () => void remove.start({
+			key: recordKey,
+			title,
+			etag: stored.etag,
+			snapshot: stored.record
+		}),
+		children: "Delete"
+	});
+	const saveControls = offersEdit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [deleteButton, /* @__PURE__ */ jsxs(AppLink, {
+		to: editAddress,
+		className: cn(buttonClass({ variant: "primary" }), "max-md:min-h-11 max-md:flex-1"),
+		children: [/* @__PURE__ */ jsx(Pencil, {
+			className: "size-3.5",
+			"aria-hidden": true
+		}), "Edit"]
+	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		editor.dirty && /* @__PURE__ */ jsx("span", {
 			className: "text-xs text-muted-foreground",
 			children: "Unsaved changes"
 		}),
-		editor.dirty && canUpdate && /* @__PURE__ */ jsx(Button, {
+		editor.dirty && canUpdate && !leavesForm && /* @__PURE__ */ jsx(Button, {
 			className: "max-md:min-h-11",
 			disabled: editor.saving,
 			onClick: editor.discard,
 			children: "Discard"
 		}),
-		canDelete && /* @__PURE__ */ jsx(Button, {
-			variant: "danger",
-			className: "max-md:min-h-11",
-			onClick: () => void remove.start({
-				key: recordKey,
-				title,
-				etag: stored.etag,
-				snapshot: stored.record
-			}),
-			children: "Delete"
+		leavesForm && /* @__PURE__ */ jsx(AppLink, {
+			to: readAddress,
+			className: cn(buttonClass(), "max-md:min-h-11"),
+			onClick: (event) => inApp(event) && editor.discard(),
+			children: "Cancel"
 		}),
+		deleteButton,
 		canUpdate && /* @__PURE__ */ jsxs(Button, {
 			variant: "primary",
 			className: "max-md:min-h-11 max-md:flex-1",
 			loading: editor.saving,
 			disabled: !editor.dirty && editor.phase !== "saved",
-			onClick: () => void editor.save(),
+			onClick: () => void save(),
 			children: [editor.phase === "saved" && /* @__PURE__ */ jsx(Check, { className: "size-4" }), editor.phase === "saved" ? "Saved" : "Save"]
 		})
 	] });
@@ -273,7 +332,23 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 								error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
 							})
 						}),
-						editor.restored && /* @__PURE__ */ jsxs("div", {
+						shown !== "form" && offersEdit && editor.dirty && /* @__PURE__ */ jsxs("div", {
+							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
+							role: "status",
+							children: [/* @__PURE__ */ jsx("span", { children: "You have unsaved changes to this record." }), /* @__PURE__ */ jsxs("span", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(AppLink, {
+									to: editAddress,
+									className: buttonClass({ size: "sm" }),
+									children: "Continue editing"
+								}), /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									onClick: editor.discard,
+									children: "Discard"
+								})]
+							})]
+						}),
+						shown === "form" && editor.restored && /* @__PURE__ */ jsxs("div", {
 							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
 							role: "status",
 							children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
@@ -307,13 +382,18 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										item,
 										record: stored.record
 									}, `map:${index}`)];
+									if (item.kind === "gallery") return [/* @__PURE__ */ jsx(GallerySection, {
+										item,
+										record: stored.record,
+										recordKey
+									}, `gallery:${index}`)];
 									if (item.kind !== "section") return [];
 									const fields = item.fields.filter((name) => model.fields[name] && visible(name));
 									if (fields.length === 0) return [];
 									return [/* @__PURE__ */ jsx(Section, {
 										title: item.title,
-										help: item.help,
-										children: /* @__PURE__ */ jsx("div", {
+										help: helpShown(item.helpWhen, view, editing) ? item.help : void 0,
+										children: shown === "read" ? /* @__PURE__ */ jsx(SpecTable, { rows: fields.map(readRow) }) : /* @__PURE__ */ jsx("div", {
 											className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
 											children: fields.map(fieldView)
 										})
@@ -322,7 +402,8 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 									lines: linesModel,
 									draft: linesDraft,
 									vatRate: Number(stored.record.vatRate ?? 21) / 100,
-									saving: editor.saving
+									saving: editor.saving,
+									locked: shown !== "form"
 								})]
 							}), /* @__PURE__ */ jsxs("aside", {
 								className: "space-y-4 md:pt-8",

package/dist/app/use-live-save.js

@@ -5,7 +5,8 @@ import { isApiError } from "@protobase/client";
 const savedForMs = 2e3;
 /**
 * Shows the outcome of a save the way the view asks: a toast (spinner, then check) or the state of
-* the Save button. API errors are reported and not rethrown; anything else propagates.
+* the Save button. API errors are reported and not rethrown; anything else propagates. `run` resolves to whether the
+* save went through.
 */
 const useLiveSave = (mode, subject) => {
 	const toast = useToast();
@@ -30,6 +31,7 @@ const useLiveSave = (mode, subject) => {
 				setPhase("saved");
 				timer.current = setTimeout(() => setPhase("idle"), savedForMs);
 			}
+			return true;
 		} catch (error) {
 			if (!isApiError(error)) throw error;
 			const title = error.status === 412 ? "Changed by someone else" : "Could not save";
@@ -42,6 +44,7 @@ const useLiveSave = (mode, subject) => {
 				setPhase("idle");
 				setMessage(`${title}: ${error.message}`);
 			}
+			return false;
 		}
 	};
 	return {

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.18.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