@protobase/ui 0.7.0 → 0.8.1

package/dist/live/field-values.js

@@ -1,3 +1,4 @@
+import { fileDiffers, filePatchValue } from "./file-values.js";
 //#region src/live/field-values.ts
 /** What the editor's text input holds for a stored value. */
 const toDraft = (value) => value === null || value === void 0 ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
@@ -10,10 +11,11 @@ const textEdited = /* @__PURE__ */ new Set([
 	"currency",
 	"country"
 ]);
-const isEditable = (field) => !field.readOnly && field.type !== "json" && field.type !== "uuid" && field.type !== "file" && field.type !== "timestamp" && field.type !== "relation";
+const isEditable = (field) => !field.readOnly && field.type !== "json" && field.type !== "uuid" && field.type !== "timestamp" && field.type !== "relation";
 /** The JSON value to send for an edited field: integers become numbers, empty optional fields become null. */
 const toPatchValue = (field, draft) => {
 	if (field.type === "boolean") return Boolean(draft);
+	if (field.type === "file") return filePatchValue(draft);
 	const text = String(draft).trim();
 	if (text === "") return field.nullable ? null : "";
 	if (field.type === "integer") return Number(text);
@@ -23,6 +25,7 @@ const toPatchValue = (field, draft) => {
 /** Whether the draft differs from what the server holds, comparing numbers by value. */
 const differs = (field, draft, stored) => {
 	if (field.type === "boolean") return Boolean(draft) !== Boolean(stored);
+	if (field.type === "file") return fileDiffers(draft, stored);
 	const a = String(draft ?? "").trim();
 	const b = toDraft(stored);
 	if (field.type === "decimal" || field.type === "integer") return a === "" || b === "" ? a !== b : Number(a) !== Number(b);

package/dist/live/file-values.js

@@ -0,0 +1,55 @@
+//#region src/live/file-values.ts
+const isStoredFile = (value) => typeof value === "object" && value !== null && typeof value.uri === "string";
+const isFileDraft = (value) => typeof value === "object" && value !== null && typeof value.uploaded?.value === "string";
+/** What a file field shows: its name, type and size, whether stored or just uploaded; `undefined` when empty. */
+const fileShown = (value) => {
+	if (isFileDraft(value)) return {
+		...value.uploaded.file,
+		...value.preview && { url: value.preview },
+		corrected: value.uploaded.corrected
+	};
+	if (!isStoredFile(value)) return void 0;
+	if ("missing" in value) return {
+		name: "File missing",
+		type: "",
+		missing: true
+	};
+	return value;
+};
+const units = [
+	"bytes",
+	"kB",
+	"MB",
+	"GB"
+];
+/** `48 kB`, `1.2 MB`: decimal units, like the field's `maxSize`. */
+const formatSize = (bytes) => {
+	let size = bytes;
+	let unit = 0;
+	while (size >= 1e3 && unit < units.length - 1) {
+		size /= 1e3;
+		unit += 1;
+	}
+	return unit === 0 ? `${bytes} ${bytes === 1 ? "byte" : "bytes"}` : `${size < 10 ? size.toFixed(1) : Math.round(size)} ${units[unit]}`;
+};
+/** Raster images the browser shows; SVG is never shown, since it can carry scripts. */
+const isPreviewable = (type) => type.startsWith("image/") && type !== "image/svg+xml";
+/** The file input's `accept`: the field's allowed types, or nothing when it takes any. */
+const acceptOf = (field) => {
+	const accept = field.file?.accept ?? [];
+	return accept.length === 0 || accept.includes("*/*") ? void 0 : accept.join(",");
+};
+/** What a save sends for a file field: the ticket of a new upload, `null` to clear it, the stored URI to keep it. */
+const filePatchValue = (draft) => {
+	if (isFileDraft(draft)) return draft.uploaded.value;
+	if (isStoredFile(draft)) return draft.uri;
+	return null;
+};
+/** Whether a file field's draft changes what is stored. */
+const fileDiffers = (draft, stored) => {
+	if (isFileDraft(draft)) return true;
+	const uri = (value) => isStoredFile(value) ? value.uri : null;
+	return uri(draft) !== uri(stored);
+};
+//#endregion
+export { acceptOf, fileDiffers, filePatchValue, fileShown, formatSize, isFileDraft, isPreviewable, isStoredFile };

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

@@ -0,0 +1,24 @@
+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. */
+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) => {
+		const held = selected.includes(role.name);
+		const locked = disabled || !grantable.has(role.name);
+		return /* @__PURE__ */ jsxs("label", {
+			title: locked && !disabled ? "You cannot give or take away this role" : void 0,
+			className: cn("inline-flex items-center gap-1.5 text-[13px]", locked && "text-muted-foreground"),
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				checked: held,
+				label: role.label,
+				onChange: locked ? void 0 : (checked) => onChange(checked ? [...selected, role.name] : selected.filter((name) => name !== role.name)),
+				className: cn(locked && "cursor-default opacity-60")
+			}), role.label]
+		}, role.name);
+	})
+});
+//#endregion
+export { AppRolesPicker };

package/dist/organizations/invitation-link.js

@@ -0,0 +1,15 @@
+//#region src/organizations/invitation-link.ts
+/** The path an emailed invitation link opens, below the app's base path. */
+const invitationLinkPath = "/-/invitation";
+/** The invitation link this page was opened from: its token, or `undefined` for any other page. */
+const readInvitationLink = (href) => {
+	const url = new URL(href);
+	const token = url.searchParams.get("token");
+	return url.pathname.endsWith("/-/invitation") && token ? { token } : void 0;
+};
+/** The app's start page, for the address bar once the link is used: the link's path without the invitation part. */
+const withoutInvitationLink = (href) => {
+	return `${new URL(href).pathname.slice(0, -13)}/`;
+};
+//#endregion
+export { invitationLinkPath, readInvitationLink, withoutInvitationLink };

package/dist/organizations/invitation-page.js

@@ -0,0 +1,158 @@
+import { Input } from "../primitives/input.js";
+import { Spinner } from "../primitives/spinner.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "../auth/auth-layout.js";
+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";
+//#region src/organizations/invitation-page.tsx
+const SignUp = ({ token, preview, onDone }) => {
+	const { session, signInMethods, recheck } = useAuth();
+	const [name, setName] = useState("");
+	const [password, setPassword] = useState("");
+	const { busy, error, run } = useAction();
+	const withPassword = signInMethods.includes("password");
+	const passwordOptional = signInMethods.includes("emailCode");
+	const submit = () => run(async () => {
+		await session.organizations.signUpFromInvitation(token, {
+			name: name.trim(),
+			...withPassword && password && { password }
+		});
+		onDone();
+		recheck();
+	});
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col gap-3",
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit();
+		},
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: [
+					"Make your account for ",
+					preview.email,
+					" to join."
+				]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-xs font-medium text-danger-text",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				"aria-label": "Your name",
+				placeholder: "Your name",
+				autoComplete: "name",
+				value: name,
+				onChange: (event) => setName(event.target.value)
+			}),
+			withPassword && /* @__PURE__ */ jsx(Input, {
+				"aria-label": "Password",
+				type: "password",
+				autoComplete: "new-password",
+				placeholder: passwordOptional ? `Password (optional, 12+ characters)` : `Password (12+ characters)`,
+				value: password,
+				onChange: (event) => setPassword(event.target.value)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				variant: "primary",
+				loading: busy,
+				disabled: !name.trim() || withPassword && !passwordOptional && password.length < 12,
+				children: "Create account and join"
+			})
+		]
+	});
+};
+/**
+* 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.
+*/
+const InvitationPage = ({ token, onDone, onSignIn }) => {
+	const { session, state, signOut, organizations } = useAuth();
+	const [preview, setPreview] = useState();
+	const [invalid, setInvalid] = useState();
+	const { busy, error, run } = useAction();
+	useEffect(() => {
+		session.organizations.invitation(token).then(setPreview, (failure) => setInvalid(failure instanceof AuthError ? authMessage(failure) : "This invitation link is not valid"));
+	}, [session, token]);
+	if (invalid) return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Invitation",
+		description: invalid,
+		children: /* @__PURE__ */ jsx(Button, {
+			className: "w-full",
+			onClick: onDone,
+			children: "Go to the app"
+		})
+	});
+	if (!preview) return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Invitation",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center gap-2 text-[13px] text-muted-foreground",
+			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}`,
+		description,
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "mb-3 text-[13px] 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"
+		})]
+	});
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: `Join ${preview.organization.name}`,
+		description,
+		children: user ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-xs font-medium text-danger-text",
+				children: error
+			}), /* @__PURE__ */ jsxs(Button, {
+				variant: "primary",
+				className: "w-full",
+				loading: busy,
+				onClick: () => void run(async () => {
+					await session.organizations.accept(token);
+					onDone();
+				}),
+				children: ["Join ", preview.organization.name]
+			})]
+		}) : preview.hasAccount ? /* @__PURE__ */ jsxs(Button, {
+			variant: "primary",
+			className: "w-full",
+			onClick: onSignIn,
+			children: [
+				"Sign in as ",
+				preview.email,
+				" to join"
+			]
+		}) : /* @__PURE__ */ jsx(SignUp, {
+			token,
+			preview,
+			onDone
+		})
+	});
+};
+//#endregion
+export { InvitationPage };

package/dist/organizations/invitations-page.js

@@ -0,0 +1,179 @@
+import { Input } from "../primitives/input.js";
+import { PageHeader } from "../app-shell/page-header.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "../account/account-section.js";
+import { grantableRoles, organizationRoleLabels, roleLabel } from "./organization-paths.js";
+import { useAction } from "./use-action.js";
+import { AppRolesPicker } from "./app-roles-picker.js";
+import { assignableOrganizationRoles } from "./members-page.js";
+import { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organizations/invitations-page.tsx
+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;
+const InviteForm = ({ current, onSent }) => {
+	const { session, organizations } = useAuth();
+	const roles = organizations?.roles ?? [];
+	const [email, setEmail] = useState("");
+	const [role, setRole] = useState("member");
+	const [appRoles, setAppRoles] = useState([]);
+	const [link, setLink] = useState();
+	const { busy, error, run } = useAction();
+	const invite = () => run(async () => {
+		const sent = await session.organizations.invite(current.organization.id, {
+			email: email.trim(),
+			role,
+			appRoles
+		});
+		setLink(sent.link);
+		setEmail("");
+		setAppRoles([]);
+		onSent();
+	});
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Invite someone",
+		description: "They get an email with a link to join, or to make an account first. You can give the app roles you hold, and those your roles grant.",
+		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"
+						}),
+						/* @__PURE__ */ jsx("select", {
+							"aria-label": "Organization role",
+							value: role,
+							onChange: (event) => setRole(event.target.value),
+							className: "h-8 rounded-md border border-border-strong bg-background px-2 text-[13px]",
+							children: assignableOrganizationRoles(current).map((option) => /* @__PURE__ */ jsx("option", {
+								value: option,
+								children: organizationRoleLabels[option]
+							}, option))
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							variant: "primary",
+							loading: busy,
+							disabled: !email.trim(),
+							children: "Invite"
+						})
+					]
+				}), /* @__PURE__ */ jsx(AppRolesPicker, {
+					roles,
+					selected: appRoles,
+					grantable: grantableRoles(roles, current),
+					onChange: setAppRoles
+				})]
+			}),
+			/* @__PURE__ */ jsx(LinkNotice, { link })
+		]
+	});
+};
+const PendingRow = ({ invitation, organizationId, onChanged }) => {
+	const { session, organizations } = useAuth();
+	const [link, setLink] = useState();
+	const { busy, error, run } = useAction();
+	const expired = new Date(invitation.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 text-[13px] font-medium",
+							children: invitation.email
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "block text-xs text-muted-foreground",
+							children: [
+								organizationRoleLabels[invitation.role],
+								invitation.appRoles.length > 0 && ` · ${invitation.appRoles.map((name) => roleLabel(organizations?.roles ?? [], name)).join(", ")}`,
+								" · ",
+								expired ? "Expired" : `Until ${new Date(invitation.expiresAt).toLocaleDateString()}`
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						loading: busy,
+						onClick: () => void run(async () => {
+							setLink((await session.organizations.resend(organizationId, invitation)).link);
+							onChanged();
+						}),
+						children: "Send again"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "danger",
+						loading: busy,
+						onClick: () => void run(async () => {
+							await session.organizations.revoke(invitation.id);
+							onChanged();
+						}),
+						children: "Revoke"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(SectionError, { message: error }),
+			/* @__PURE__ */ jsx(LinkNotice, { link })
+		]
+	});
+};
+/** Inviting people to the organization one works in, and the invitations not yet accepted, for its owners and admins. */
+const InvitationsPage = ({ current }) => {
+	const { session } = useAuth();
+	const [invitations, setInvitations] = useState([]);
+	const organizationId = current?.organization?.id;
+	const load = useCallback(() => {
+		if (organizationId) session.organizations.invitations(organizationId).then((list) => setInvitations(list.filter((invitation) => invitation.status === "pending")), () => setInvitations([]));
+	}, [session, organizationId]);
+	useEffect(load, [load]);
+	if (!current?.organization || !organizationId) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6",
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				title: "Invitations",
+				subtitle: `People invited to ${current.organization.name}.`
+			}),
+			/* @__PURE__ */ jsx(InviteForm, {
+				current,
+				onSent: load
+			}),
+			/* @__PURE__ */ jsx(AccountSection, {
+				title: "Not accepted yet",
+				description: invitations.length > 0 ? "Sending again gives a new link, which replaces the earlier one." : "Nobody is waiting.",
+				children: invitations.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "divide-y rounded-md border",
+					children: invitations.map((invitation) => /* @__PURE__ */ jsx(PendingRow, {
+						invitation,
+						organizationId,
+						onChanged: load
+					}, invitation.id))
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { InvitationsPage };

package/dist/organizations/members-page.js

@@ -0,0 +1,122 @@
+import { Spinner } from "../primitives/spinner.js";
+import { PageHeader } from "../app-shell/page-header.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "../account/account-section.js";
+import { grantableRoles, organizationRoleLabels } from "./organization-paths.js";
+import { useAction } from "./use-action.js";
+import { AppRolesPicker } from "./app-roles-picker.js";
+import { useCallback, useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organizations/members-page.tsx
+/** The organization roles the person may set: owners every one, admins those below owner. */
+const assignableOrganizationRoles = (current) => current?.role === "owner" ? [
+	"owner",
+	"admin",
+	"member"
+] : ["admin", "member"];
+const MemberRow = ({ member, current, onChanged }) => {
+	const { session, organizations } = useAuth();
+	const organizationId = current.organization.id;
+	const { busy, error, run } = useAction();
+	const roles = organizations?.roles ?? [];
+	const self = member.id === current.memberId;
+	const organizationRoles = assignableOrganizationRoles(current);
+	const roleLocked = member.role === "owner" && current.role !== "owner";
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col gap-2 px-3 py-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "block truncate text-[13px] font-medium",
+							children: [member.name, self && " (you)"]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "block truncate text-xs text-muted-foreground",
+							children: member.email
+						})]
+					}),
+					/* @__PURE__ */ jsx("select", {
+						"aria-label": `Organization role of ${member.name}`,
+						value: member.role,
+						disabled: busy || roleLocked,
+						onChange: (event) => void run(async () => {
+							await session.organizations.setRole(organizationId, member.id, event.target.value);
+							onChanged();
+						}),
+						className: "h-7 rounded-md border border-border-strong bg-background px-2 text-xs",
+						children: (roleLocked ? [member.role] : organizationRoles).map((role) => /* @__PURE__ */ jsx("option", {
+							value: role,
+							children: organizationRoleLabels[role]
+						}, role))
+					}),
+					!self && /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						variant: "danger",
+						loading: busy,
+						disabled: roleLocked,
+						onClick: () => void run(async () => {
+							await session.organizations.removeMember(organizationId, member.id);
+							onChanged();
+						}),
+						children: "Remove"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AppRolesPicker, {
+				roles,
+				selected: member.appRoles,
+				grantable: grantableRoles(roles, current),
+				disabled: busy,
+				onChange: (selected) => void run(async () => {
+					await session.organizations.setAppRoles(member.id, selected);
+					onChanged();
+				})
+			}),
+			/* @__PURE__ */ jsx(SectionError, { message: error })
+		]
+	});
+};
+/**
+* The members of the organization one works in, for its owners and admins: organization roles, which decide who
+* manages it, and app roles, which decide what each sees and does; only roles the person may give can change.
+*/
+const MembersPage = ({ current }) => {
+	const { session } = useAuth();
+	const [members, setMembers] = useState();
+	const [error, setError] = useState();
+	const organizationId = current?.organization?.id;
+	const load = useCallback(() => {
+		if (organizationId) session.organizations.members(organizationId).then(setMembers, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read the members"));
+	}, [session, organizationId]);
+	useEffect(load, [load]);
+	if (!current?.organization) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: "Members",
+			subtitle: `Who works in ${current.organization.name}, and with which roles.`
+		}), /* @__PURE__ */ jsxs(AccountSection, {
+			title: "Members",
+			description: "Owners and admins manage the organization; app roles decide what each member sees and does in the app.",
+			children: [/* @__PURE__ */ jsx(SectionError, { message: error }), members ? /* @__PURE__ */ jsx("ul", {
+				className: "divide-y rounded-md border",
+				children: members.map((member) => /* @__PURE__ */ jsx(MemberRow, {
+					member,
+					current,
+					onChanged: load
+				}, `${member.id}/${member.role}/${member.appRoles.join()}`))
+			}) : !error && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+			})]
+		})]
+	});
+};
+//#endregion
+export { MembersPage, assignableOrganizationRoles };