@protobase/ui 0.22.0 → 0.22.1

package/dist/app/pages/action-href.js

@@ -32,7 +32,7 @@ const holdsAll = (record, values) => Object.entries(values).every(([name, value]
 */
 const actionFor = (action, record) => {
 	const run = action.run;
-	if (run?.kind === "update") return record && holdsAll(record, run.values) ? void 0 : action;
+	if (run?.kind === "update") return record && !action.inputs?.length && holdsAll(record, run.values) ? void 0 : action;
 	if (run?.kind !== "link" || !("href" in run)) return action;
 	const target = linkTarget(run.href, record);
 	if (target === void 0) return void 0;

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

@@ -16,6 +16,7 @@ import { RecordRowBlock } from "./blocks/record-row.js";
 import { ShowBlock } from "./blocks/show.js";
 import { StatBlock } from "./blocks/stat.js";
 import { TableBlock } from "./blocks/table.js";
+import { UsersBlock } from "../../users/users-block.js";
 import { Fragment } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
@@ -36,7 +37,8 @@ const blocks = {
 	ModalForm: ModalFormBlock,
 	Action: ActionBlock,
 	Show: ShowBlock,
-	Link: LinkBlock
+	Link: LinkBlock,
+	Users: UsersBlock
 };
 const isInline = (child) => typeof child === "string" || !child.custom && child.type === "Link";
 /** Text and links run together as one paragraph, like a sentence with a link in it; other elements stand alone. */

package/dist/app/pages/use-run-action.js

@@ -7,7 +7,7 @@ import { can } from "../permissions.js";
 import { actionFor, linkTarget, openLink } from "./action-href.js";
 import { useRefreshResource } from "./use-layout-data.js";
 import { useState } from "react";
-import { fillAddress } from "@protobase/schema/internal";
+import { fillAddress, updateValues } from "@protobase/schema/internal";
 //#region src/app/pages/use-run-action.ts
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
@@ -15,7 +15,7 @@ const message = (error) => error instanceof Error ? error.message : "Something w
 * (`update`, `delete`, `link`, and `ai`, which the server runs), else the handler the project registered under the
 * action's name. An update whose values the record holds already is left out, and so is a link to a URL the record
 * holds while it holds none. `blocked` says why one cannot run; `afterRun` hears about every action that succeeded.
-* `submit` runs one with the answers to its inputs and throws its failure, for the dialog to show.
+* `submit` runs one with the answers to its inputs (a handler gets them, an update writes them) and throws its failure, for the dialog to show.
 */
 const useActionRunner = (resource, scope, afterRun) => {
 	const { views } = useAdminMeta();
@@ -45,7 +45,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 			else openLink(linkTarget(run.href, scope?.record));
 			return;
 		}
-		if (run?.kind === "update") await client.update(resource, scope.key, run.values, scope.etag ?? "*");
+		if (run?.kind === "update") await client.update(resource, scope.key, updateValues(run.values, values ?? {}), scope.etag ?? "*");
 		else if (run?.kind === "delete") await client.remove(resource, scope.key, { etag: scope.etag });
 		else if (run?.kind === "ai") await client.generate(resource, scope.key, action.name);
 		else await handlers[action.name]({

package/dist/invitations/invite-form.js

@@ -0,0 +1,56 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "../account/account-section.js";
+import { useAction } from "../organizations/use-action.js";
+import { LinkNotice } from "./link-notice.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/invitations/invite-form.tsx
+/** Inviting an address: the address, the controls for what the invitation gives, Invite, and the link without mail. */
+const InviteForm = ({ title, description, onInvite, beside, children, incomplete = false }) => {
+	const [email, setEmail] = useState("");
+	const [link, setLink] = useState();
+	const { busy, error, run } = useAction();
+	const invite = () => run(async () => {
+		setLink((await onInvite(email.trim())).link);
+		setEmail("");
+	});
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title,
+		description,
+		children: [
+			/* @__PURE__ */ jsx(SectionError, { message: error }),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-3",
+				onSubmit: (event) => {
+					event.preventDefault();
+					invite();
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2 sm:flex-row",
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							"aria-label": "Email",
+							type: "email",
+							placeholder: "name@example.com",
+							value: email,
+							onChange: (event) => setEmail(event.target.value),
+							wrapperClassName: "flex-1"
+						}),
+						beside,
+						/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							variant: "primary",
+							loading: busy,
+							disabled: !email.trim() || incomplete,
+							children: "Invite"
+						})
+					]
+				}), children]
+			}),
+			/* @__PURE__ */ jsx(LinkNotice, { link })
+		]
+	});
+};
+//#endregion
+export { InviteForm };

package/dist/invitations/link-notice.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/invitations/link-notice.tsx
+/** The invitation link to pass on, when the app cannot email it. */
+const LinkNotice = ({ link }) => link ? /* @__PURE__ */ jsxs("p", {
+	className: "mt-3 break-all rounded-md border bg-muted px-3 py-2 text-xs",
+	children: ["This app cannot send email, so pass this link on yourself. It works once, until the invitation expires: ", /* @__PURE__ */ jsx("span", {
+		className: "font-mono",
+		children: link
+	})]
+}) : null;
+//#endregion
+export { LinkNotice };

package/dist/invitations/pending-invitation-row.js

@@ -0,0 +1,54 @@
+import { Button } from "../primitives/button.js";
+import { SectionError } from "../account/account-section.js";
+import { useAction } from "../organizations/use-action.js";
+import { LinkNotice } from "./link-notice.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/invitations/pending-invitation-row.tsx
+/** An invitation not accepted yet: to whom, what it gives and until when, with Send again and Revoke. */
+const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) => {
+	const [link, setLink] = useState();
+	const { busy, error, run } = useAction();
+	const expired = new Date(expiresAt).getTime() < Date.now();
+	return /* @__PURE__ */ jsxs("li", {
+		className: "px-3 py-2.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "block truncate font-medium",
+							children: email
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "block text-xs text-muted-foreground",
+							children: [
+								gives,
+								" · ",
+								expired ? "Expired" : `Until ${new Date(expiresAt).toLocaleDateString()}`
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						loading: busy,
+						onClick: () => void run(async () => setLink((await onResend()).link)),
+						children: "Send again"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "danger",
+						loading: busy,
+						onClick: () => void run(onRevoke),
+						children: "Revoke"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(SectionError, { message: error }),
+			/* @__PURE__ */ jsx(LinkNotice, { link })
+		]
+	});
+};
+//#endregion
+export { PendingInvitationRow };

package/dist/lists/paged-search-list.js

@@ -0,0 +1,42 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "../account/account-section.js";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lists/paged-search-list.tsx
+/** A section with a search box, how many of how many show, the rows found so far and "Show more" for the next page. */
+const PagedSearchList = ({ title, description, searchLabel, placeholder, query, onQuery, list, error, renderRow }) => /* @__PURE__ */ jsxs(AccountSection, {
+	title,
+	description,
+	children: [
+		/* @__PURE__ */ jsx(SectionError, { message: error }),
+		/* @__PURE__ */ jsx(Input, {
+			"aria-label": searchLabel,
+			placeholder,
+			value: query,
+			onChange: (event) => onQuery(event.target.value),
+			leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
+			wrapperClassName: "mb-2"
+		}),
+		/* @__PURE__ */ jsxs("p", {
+			className: "mb-3 text-xs text-muted-foreground",
+			children: [
+				list.found.length,
+				" of ",
+				list.total
+			]
+		}),
+		list.found.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "divide-y rounded-md border",
+			children: list.found.map(renderRow)
+		}),
+		list.found.length < list.total && /* @__PURE__ */ jsx(Button, {
+			className: "mt-3",
+			loading: list.loading,
+			onClick: () => void list.more(),
+			children: "Show more"
+		})
+	]
+});
+//#endregion
+export { PagedSearchList };

package/dist/{organizations/use-all-organizations.js → lists/use-paged-search.js}

@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-//#region src/organizations/use-all-organizations.ts
+//#region src/lists/use-paged-search.ts
 /**
-* Every organization, 20 at a time, narrowed by `query` (searched 200 ms after the text stops changing). `more` adds the
-* next page. A page that arrives after the text changed is dropped, so it never adds rows of the old filter.
+* What `search` finds for `query`, a page at a time (searched 200 ms after the text stops changing). `more` adds the
+* next page. A page that arrives after the text changed is dropped, so it never adds rows of the old filter. `search`
+* must keep its identity between renders, or each render searches again.
 */
-const useAllOrganizations = (client, query) => {
+const usePagedSearch = (search, query) => {
 	const [found, setFound] = useState([]);
 	const [total, setTotal] = useState(0);
 	const [loading, setLoading] = useState(false);
@@ -13,9 +14,9 @@ const useAllOrganizations = (client, query) => {
 	useEffect(() => {
 		const timer = setTimeout(() => {
 			setLoading(true);
-			client.search(query).then((page) => {
+			search(query, 0).then((page) => {
 				if (latest.current !== query) return;
-				setFound(page.organizations);
+				setFound(page.items);
 				setTotal(page.total);
 				setLoading(false);
 			}, () => {
@@ -26,14 +27,14 @@ const useAllOrganizations = (client, query) => {
 			});
 		}, 200);
 		return () => clearTimeout(timer);
-	}, [client, query]);
+	}, [search, query]);
 	const more = async () => {
 		const asked = query;
 		setLoading(true);
-		const page = await client.search(asked, found.length).catch(() => void 0);
+		const page = await search(asked, found.length).catch(() => void 0);
 		if (latest.current !== asked) return;
 		if (page) {
-			setFound((shown) => [...shown, ...page.organizations]);
+			setFound((shown) => [...shown, ...page.items]);
 			setTotal(page.total);
 		}
 		setLoading(false);
@@ -46,4 +47,4 @@ const useAllOrganizations = (client, query) => {
 	};
 };
 //#endregion
-export { useAllOrganizations };
+export { usePagedSearch };

package/dist/organizations/all-organizations.js

@@ -1,61 +1,40 @@
-import { Input } from "../primitives/input.js";
 import { useAuth } from "../auth/auth-provider.js";
-import { Button } from "../primitives/button.js";
-import { AccountSection, SectionError } from "../account/account-section.js";
 import { useAction } from "./use-action.js";
+import { PagedSearchList } from "../lists/paged-search-list.js";
+import { usePagedSearch } from "../lists/use-paged-search.js";
 import { reopenIn } from "./use-organizations.js";
 import { OrganizationRow } from "./organization-row.js";
-import { useAllOrganizations } from "./use-all-organizations.js";
-import { useState } from "react";
-import { Search } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/organizations/all-organizations.tsx
 /** Every organization in the app for people with a global role, who may work in any of them. */
 const AllOrganizations = ({ basePath, currentId }) => {
 	const { session } = useAuth();
 	const [query, setQuery] = useState("");
-	const { found, total, more, loading } = useAllOrganizations(session.organizations, query);
+	const search = useCallback((text, offset) => session.organizations.search(text, offset).then((page) => ({
+		items: page.organizations,
+		total: page.total
+	})), [session]);
+	const list = usePagedSearch(search, query);
 	const { busy, error, run } = useAction();
-	return /* @__PURE__ */ jsxs(AccountSection, {
+	return /* @__PURE__ */ jsx(PagedSearchList, {
 		title: "All organizations",
 		description: "Every organization in the app. Your global roles let you work in any of them, with what those roles allow there. Opening one you are not a member of is written to the audit log.",
-		children: [
-			/* @__PURE__ */ jsx(SectionError, { message: error }),
-			/* @__PURE__ */ jsx(Input, {
-				"aria-label": "Find an organization",
-				placeholder: "Name or slug",
-				value: query,
-				onChange: (event) => setQuery(event.target.value),
-				leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
-				wrapperClassName: "mb-2"
-			}),
-			/* @__PURE__ */ jsxs("p", {
-				className: "mb-3 text-xs text-muted-foreground",
-				children: [
-					found.length,
-					" of ",
-					total
-				]
-			}),
-			found.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "divide-y rounded-md border",
-				children: found.map((organization) => /* @__PURE__ */ jsx(OrganizationRow, {
-					organization,
-					current: organization.id === currentId,
-					busy,
-					onOpen: () => void run(async () => {
-						await session.organizations.switchTo(organization.id);
-						reopenIn(basePath);
-					})
-				}, organization.id))
-			}),
-			found.length < total && /* @__PURE__ */ jsx(Button, {
-				className: "mt-3",
-				loading,
-				onClick: () => void more(),
-				children: "Show more"
+		searchLabel: "Find an organization",
+		placeholder: "Name or slug",
+		query,
+		onQuery: setQuery,
+		list,
+		error,
+		renderRow: (organization) => /* @__PURE__ */ jsx(OrganizationRow, {
+			organization,
+			current: organization.id === currentId,
+			busy,
+			onOpen: () => void run(async () => {
+				await session.organizations.switchTo(organization.id);
+				reopenIn(basePath);
 			})
-		]
+		}, organization.id)
 	});
 };
 //#endregion

package/dist/organizations/app-roles-picker.js

@@ -2,10 +2,13 @@ import { cn } from "../lib/cn.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/app-roles-picker.tsx
-/** The app roles a member can hold, ticked when held; only those the person may give or take away can change. */
+/**
+* The roles given, ticked when held; only those the person may give or take away can change. Organization pages pass
+* the roles a member can hold (`membership`), the Users page every role.
+*/
 const AppRolesPicker = ({ roles, selected, grantable, disabled, onChange }) => /* @__PURE__ */ jsx("div", {
 	className: "flex flex-wrap gap-x-4 gap-y-2",
-	children: roles.filter((role) => role.membership).map((role) => {
+	children: roles.map((role) => {
 		const held = selected.includes(role.name);
 		const locked = disabled || !grantable.has(role.name);
 		return /* @__PURE__ */ jsxs("label", {

package/dist/organizations/invitation-page.js

@@ -10,9 +10,9 @@ import { organizationRoleLabels, roleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/invitation-page.tsx
-const SignUp = ({ token, preview, onDone }) => {
+const SignUp = ({ token, preview, joins, onDone }) => {
 	const { session, signInMethods, recheck } = useAuth();
 	const [name, setName] = useState("");
 	const [password, setPassword] = useState("");
@@ -34,13 +34,9 @@ const SignUp = ({ token, preview, onDone }) => {
 			submit();
 		},
 		children: [
-			/* @__PURE__ */ jsxs("p", {
+			/* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: [
-					"Make your account for ",
-					preview.email,
-					" to join."
-				]
+				children: joins ? `Make your account for ${preview.email} to join.` : `Make your account for ${preview.email}.`
 			}),
 			error && /* @__PURE__ */ jsx("p", {
 				role: "alert",
@@ -67,14 +63,15 @@ const SignUp = ({ token, preview, onDone }) => {
 				variant: "primary",
 				loading: busy,
 				disabled: !name.trim() || withPassword && !passwordOptional && password.length < 12,
-				children: "Create account and join"
+				children: joins ? "Create account and join" : "Create your account"
 			})
 		]
 	});
 };
 /**
 * Where an emailed invitation link leads: what it is for, then accepting it signed in as the invited address, signing
-* in first, or making an account for an address without one.
+* in first, or making an account for an address without one. An invitation to the app itself, rather than to an
+* organization, only makes the account: someone with one just signs in.
 */
 const InvitationPage = ({ token, onDone, signIn }) => {
 	const { session, state, signOut, organizations } = useAuth();
@@ -100,11 +97,56 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 		})
 	});
-	const roles = preview.appRoles.map((name) => roleLabel(organizations?.roles ?? [], name));
-	const description = `${preview.inviter.name} invites you to ${preview.organization.name} as ${organizationRoleLabels[preview.role].toLowerCase()}${roles.length > 0 ? `, with ${roles.join(", ")}` : ""}.`;
 	const user = state.kind === "signed-in" ? state.user : void 0;
-	if (user && user.email.toLowerCase() !== preview.email.toLowerCase()) return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: `Join ${preview.organization.name}`,
+	const sameAddress = user?.email.toLowerCase() === preview.email.toLowerCase();
+	if (!preview.organization) {
+		const app = preview.app?.name ?? "";
+		const description = `${preview.inviter.name} invites you to join ${app}.`;
+		return /* @__PURE__ */ jsx(AuthLayout, {
+			title: `Join ${app}`,
+			description,
+			children: preview.hasAccount ? user && sameAddress ? /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				className: "w-full",
+				onClick: onDone,
+				children: "Go to the app"
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", {
+				className: "mb-3 text-muted-foreground",
+				children: [preview.email, " has an account already: sign in with it."]
+			}), user ? /* @__PURE__ */ jsx(Button, {
+				className: "w-full",
+				onClick: () => void signOut(),
+				children: "Sign out"
+			}) : /* @__PURE__ */ jsxs(RouteLink, {
+				to: signIn,
+				className: cn(buttonClass({ variant: "primary" }), "w-full"),
+				children: ["Sign in as ", preview.email]
+			})] }) : user ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", {
+				className: "mb-3 text-muted-foreground",
+				children: [
+					"This invitation is for ",
+					preview.email,
+					", and you are signed in as ",
+					user.email,
+					"."
+				]
+			}), /* @__PURE__ */ jsx(Button, {
+				className: "w-full",
+				onClick: () => void signOut(),
+				children: "Sign out to accept it"
+			})] }) : /* @__PURE__ */ jsx(SignUp, {
+				token,
+				preview,
+				joins: false,
+				onDone
+			})
+		});
+	}
+	const organization = preview.organization;
+	const roles = preview.appRoles.map((name) => roleLabel(organizations?.roles ?? [], name));
+	const description = `${preview.inviter.name} invites you to ${organization.name} as ${organizationRoleLabels[preview.role].toLowerCase()}${roles.length > 0 ? `, with ${roles.join(", ")}` : ""}.`;
+	if (user && !sameAddress) return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: `Join ${organization.name}`,
 		description,
 		children: [/* @__PURE__ */ jsxs("p", {
 			className: "mb-3 text-muted-foreground",
@@ -122,7 +164,7 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 		})]
 	});
 	return /* @__PURE__ */ jsx(AuthLayout, {
-		title: `Join ${preview.organization.name}`,
+		title: `Join ${organization.name}`,
 		description,
 		children: user ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3",
@@ -138,7 +180,7 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 					await session.organizations.accept(token);
 					onDone();
 				}),
-				children: ["Join ", preview.organization.name]
+				children: ["Join ", organization.name]
 			})]
 		}) : preview.hasAccount ? /* @__PURE__ */ jsxs(RouteLink, {
 			to: signIn,
@@ -151,6 +193,7 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 		}) : /* @__PURE__ */ jsx(SignUp, {
 			token,
 			preview,
+			joins: true,
 			onDone
 		})
 	});