@protobase/ui 0.25.2 → 0.25.4

package/dist/invitations/link-notice.js

@@ -1,12 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { slotted } from "../locale/slotted.js";
+import { text } from "./messages.js";
+import { jsx } 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", {
+const LinkNotice = ({ link }) => link ? /* @__PURE__ */ jsx("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", {
+	children: slotted(text("passLinkOn"), /* @__PURE__ */ jsx("span", {
 		className: "font-mono",
 		children: link
-	})]
+	}))
 }) : null;
 //#endregion
 export { LinkNotice };

package/dist/invitations/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/invitations/messages.ts
+const text = defineMessages({
+	en: {
+		email: "Email",
+		invite: "Invite",
+		expired: "Expired",
+		until: (date) => `Until ${date}`,
+		sendAgain: "Send again",
+		revoke: "Revoke",
+		passLinkOn: "This app cannot send email, so pass this link on yourself. It works once, until the invitation expires: {}"
+	},
+	nl: {
+		email: "E-mailadres",
+		invite: "Uitnodigen",
+		expired: "Verlopen",
+		until: (date) => `Tot ${date}`,
+		sendAgain: "Opnieuw sturen",
+		revoke: "Intrekken",
+		passLinkOn: "Deze app kan geen e-mail sturen, dus geef deze link zelf door. Die werkt één keer, tot de uitnodiging verloopt: {}"
+	}
+});
+//#endregion
+export { text };

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

@@ -2,6 +2,7 @@ import { formatTag } from "../locale/active-locale.js";
 import { Button } from "../primitives/button.js";
 import { SectionError } from "../account/account-section.js";
 import { useAction } from "../organizations/use-action.js";
+import { text } from "./messages.js";
 import { LinkNotice } from "./link-notice.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) =
 							children: [
 								gives,
 								" · ",
-								expired ? "Expired" : `Until ${new Date(expiresAt).toLocaleDateString(formatTag())}`
+								expired ? text("expired") : text("until", new Date(expiresAt).toLocaleDateString(formatTag()))
 							]
 						})]
 					}),
@@ -35,14 +36,14 @@ const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) =
 						size: "sm",
 						loading: busy,
 						onClick: () => void run(async () => setLink((await onResend()).link)),
-						children: "Send again"
+						children: text("sendAgain")
 					}),
 					/* @__PURE__ */ jsx(Button, {
 						size: "sm",
 						variant: "danger",
 						loading: busy,
 						onClick: () => void run(onRevoke),
-						children: "Revoke"
+						children: text("revoke")
 					})
 				]
 			}),

package/dist/lists/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/lists/messages.ts
+const text = defineMessages({
+	en: { showMore: "Show more" },
+	nl: { showMore: "Meer tonen" }
+});
+//#endregion
+export { text };

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

@@ -1,6 +1,7 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AccountSection, SectionError } from "../account/account-section.js";
+import { text } from "./messages.js";
 import { Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lists/paged-search-list.tsx
@@ -34,7 +35,7 @@ const PagedSearchList = ({ title, description, searchLabel, placeholder, query,
 			className: "mt-3",
 			loading: list.loading,
 			onClick: () => void list.more(),
-			children: "Show more"
+			children: text("showMore")
 		})
 	]
 });

package/dist/locale/slotted.js

@@ -0,0 +1,14 @@
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/locale/slotted.tsx
+/**
+* A built-in text with a `{}` for each element that goes in it, such as a highlighted address, rendered with the
+* elements in their places in order: each language puts them where its sentence needs them.
+*/
+const slotted = (message, ...slots) => {
+	const parts = message.split("{}");
+	if (parts.length !== slots.length + 1) throw new Error(`The text "${message}" has ${parts.length - 1} places for ${slots.length} elements`);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: parts.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [part, index < slots.length && slots[index]] }, index)) });
+};
+//#endregion
+export { slotted };

package/dist/markdown/markdown-editor.js

@@ -1,15 +1,16 @@
 import { Segmented } from "../primitives/segmented.js";
 import { Textarea } from "../primitives/textarea.js";
 import { Markdown } from "./markdown.js";
+import { text } from "./messages.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/markdown/markdown-editor.tsx
-const modes = [{
+const modes = () => [{
 	value: "write",
-	label: "Write"
+	label: text("write")
 }, {
 	value: "preview",
-	label: "Preview"
+	label: text("preview")
 }];
 /**
 * Markdown source in a box that grows with it, as GitHub edits a comment, and a switch to its rendered preview: the
@@ -23,7 +24,7 @@ const MarkdownEditor = ({ value, onChange, label, invalid, placeholder }) => {
 			className: "self-start",
 			children: /* @__PURE__ */ jsx(Segmented, {
 				value: mode,
-				options: modes,
+				options: modes(),
 				onChange: setMode,
 				label
 			})
@@ -37,7 +38,7 @@ const MarkdownEditor = ({ value, onChange, label, invalid, placeholder }) => {
 			className: "min-h-[7.5rem] rounded-md border border-border px-2.5 py-1.5",
 			children: value.trim() === "" ? /* @__PURE__ */ jsx("span", {
 				className: "text-faint-foreground",
-				children: "Nothing to preview"
+				children: text("nothingToPreview")
 			}) : /* @__PURE__ */ jsx(Markdown, { source: value })
 		})]
 	});

package/dist/markdown/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/markdown/messages.ts
+const text = defineMessages({
+	en: {
+		write: "Write",
+		preview: "Preview",
+		nothingToPreview: "Nothing to preview"
+	},
+	nl: {
+		write: "Schrijven",
+		preview: "Voorbeeld",
+		nothingToPreview: "Niets om te tonen"
+	}
+});
+//#endregion
+export { text };

package/dist/organizations/all-organizations.js

@@ -1,4 +1,5 @@
 import { useAuth } from "../auth/auth-provider.js";
+import { text } from "./messages.js";
 import { useAction } from "./use-action.js";
 import { PagedSearchList } from "../lists/paged-search-list.js";
 import { usePagedSearch } from "../lists/use-paged-search.js";
@@ -11,17 +12,17 @@ import { jsx } from "react/jsx-runtime";
 const AllOrganizations = ({ basePath, currentId }) => {
 	const { session } = useAuth();
 	const [query, setQuery] = useState("");
-	const search = useCallback((text, offset) => session.organizations.search(text, offset).then((page) => ({
+	const search = useCallback((term, offset) => session.organizations.search(term, offset).then((page) => ({
 		items: page.organizations,
 		total: page.total
 	})), [session]);
 	const list = usePagedSearch(search, query);
 	const { busy, error, run } = useAction();
 	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.",
-		searchLabel: "Find an organization",
-		placeholder: "Name or slug",
+		title: text("allOrganizations"),
+		description: text("allOrganizationsDescription"),
+		searchLabel: text("findOrganization"),
+		placeholder: text("nameOrSlug"),
 		query,
 		onQuery: setQuery,
 		list,

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

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/app-roles-picker.tsx
 /**
@@ -12,7 +13,7 @@ const AppRolesPicker = ({ roles, selected, grantable, disabled, onChange }) => /
 		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,
+			title: locked && !disabled ? text("cannotChangeRole") : void 0,
 			className: cn("inline-flex items-center gap-1.5", locked && "text-muted-foreground"),
 			children: [/* @__PURE__ */ jsx(Checkbox, {
 				checked: held,

package/dist/organizations/invitation-page.js

@@ -6,7 +6,8 @@ import { authMessage } from "../auth/auth-messages.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { AuthLayout } from "../auth/auth-layout.js";
-import { organizationRoleLabels, roleLabel } from "./organization-paths.js";
+import { text } from "./messages.js";
+import { organizationRoleLabel, roleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
@@ -36,25 +37,25 @@ const SignUp = ({ token, preview, joins, onDone }) => {
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: joins ? `Make your account for ${preview.email} to join.` : `Make your account for ${preview.email}.`
+				children: joins ? text("makeAccountToJoin", preview.email) : text("makeAccount", preview.email)
 			}),
 			error && /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "text-xs font-medium text-danger-text",
+				className: "text-body font-medium text-danger-text",
 				children: error
 			}),
 			/* @__PURE__ */ jsx(Input, {
-				"aria-label": "Your name",
-				placeholder: "Your name",
+				"aria-label": text("yourName"),
+				placeholder: text("yourName"),
 				autoComplete: "name",
 				value: name,
 				onChange: (event) => setName(event.target.value)
 			}),
 			withPassword && /* @__PURE__ */ jsx(Input, {
-				"aria-label": "Password",
+				"aria-label": text("password"),
 				type: "password",
 				autoComplete: "new-password",
-				placeholder: passwordOptional ? `Password (optional, 12+ characters)` : `Password (12+ characters)`,
+				placeholder: passwordOptional ? text("passwordOptional", 12) : text("passwordRequired", 12),
 				value: password,
 				onChange: (event) => setPassword(event.target.value)
 			}),
@@ -63,7 +64,7 @@ const SignUp = ({ token, preview, joins, onDone }) => {
 				variant: "primary",
 				loading: busy,
 				disabled: !name.trim() || withPassword && !passwordOptional && password.length < 12,
-				children: joins ? "Create account and join" : "Create your account"
+				children: joins ? text("createAndJoin") : text("createYourAccount")
 			})
 		]
 	});
@@ -79,61 +80,59 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 	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.organizations.invitation(token).then(setPreview, (failure) => setInvalid(failure instanceof AuthError ? authMessage(failure) : text("invalidLink")));
 	}, [session, token]);
 	if (invalid) return /* @__PURE__ */ jsx(AuthLayout, {
-		title: "Invitation",
+		title: text("invitation"),
 		description: invalid,
 		children: /* @__PURE__ */ jsx(Button, {
 			className: "w-full",
 			onClick: onDone,
-			children: "Go to the app"
+			children: text("goToApp")
 		})
 	});
 	if (!preview) return /* @__PURE__ */ jsx(AuthLayout, {
-		title: "Invitation",
+		title: text("invitation"),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-center gap-2 text-muted-foreground",
-			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+			children: [
+				/* @__PURE__ */ jsx(Spinner, {}),
+				" ",
+				text("loading")
+			]
 		})
 	});
 	const user = state.kind === "signed-in" ? state.user : void 0;
 	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}.`;
+		const description = text("invitesToApp", preview.inviter.name, app);
 		return /* @__PURE__ */ jsx(AuthLayout, {
-			title: `Join ${app}`,
+			title: text("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", {
+				children: text("goToApp")
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 				className: "mb-3 text-muted-foreground",
-				children: [preview.email, " has an account already: sign in with it."]
+				children: text("hasAccount", preview.email)
 			}), user ? /* @__PURE__ */ jsx(Button, {
 				className: "w-full",
 				onClick: () => void signOut(),
-				children: "Sign out"
-			}) : /* @__PURE__ */ jsxs(RouteLink, {
+				children: text("signOut")
+			}) : /* @__PURE__ */ jsx(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", {
+				children: text("signInAs", preview.email)
+			})] }) : user ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 				className: "mb-3 text-muted-foreground",
-				children: [
-					"This invitation is for ",
-					preview.email,
-					", and you are signed in as ",
-					user.email,
-					"."
-				]
+				children: text("otherAddress", preview.email, user.email)
 			}), /* @__PURE__ */ jsx(Button, {
 				className: "w-full",
 				onClick: () => void signOut(),
-				children: "Sign out to accept it"
+				children: text("signOutToAccept")
 			})] }) : /* @__PURE__ */ jsx(SignUp, {
 				token,
 				preview,
@@ -144,35 +143,30 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 	}
 	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(", ")}` : ""}.`;
+	const role = organizationRoleLabel(preview.role).toLowerCase();
+	const description = roles.length > 0 ? text("invitesToWith", preview.inviter.name, organization.name, role, roles.join(", ")) : text("invitesTo", preview.inviter.name, organization.name, role);
 	if (user && !sameAddress) return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: `Join ${organization.name}`,
+		title: text("join", organization.name),
 		description,
-		children: [/* @__PURE__ */ jsxs("p", {
+		children: [/* @__PURE__ */ jsx("p", {
 			className: "mb-3 text-muted-foreground",
-			children: [
-				"This invitation is for ",
-				preview.email,
-				", and you are signed in as ",
-				user.email,
-				"."
-			]
+			children: text("otherAddress", preview.email, user.email)
 		}), /* @__PURE__ */ jsx(Button, {
 			className: "w-full",
 			onClick: () => void signOut(),
-			children: "Sign out to accept it"
+			children: text("signOutToAccept")
 		})]
 	});
 	return /* @__PURE__ */ jsx(AuthLayout, {
-		title: `Join ${organization.name}`,
+		title: text("join", 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",
+				className: "text-body font-medium text-danger-text",
 				children: error
-			}), /* @__PURE__ */ jsxs(Button, {
+			}), /* @__PURE__ */ jsx(Button, {
 				variant: "primary",
 				className: "w-full",
 				loading: busy,
@@ -180,16 +174,12 @@ const InvitationPage = ({ token, onDone, signIn }) => {
 					await session.organizations.accept(token);
 					onDone();
 				}),
-				children: ["Join ", organization.name]
+				children: text("join", organization.name)
 			})]
-		}) : preview.hasAccount ? /* @__PURE__ */ jsxs(RouteLink, {
+		}) : preview.hasAccount ? /* @__PURE__ */ jsx(RouteLink, {
 			to: signIn,
 			className: cn(buttonClass({ variant: "primary" }), "w-full"),
-			children: [
-				"Sign in as ",
-				preview.email,
-				" to join"
-			]
+			children: text("signInAsToJoin", preview.email)
 		}) : /* @__PURE__ */ jsx(SignUp, {
 			token,
 			preview,

package/dist/organizations/invitations-page.js

@@ -1,7 +1,8 @@
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { AccountSection } from "../account/account-section.js";
-import { grantableRoles, organizationRoleLabels, roleLabel } from "./organization-paths.js";
+import { text } from "./messages.js";
+import { grantableRoles, organizationRoleLabel, roleLabel } from "./organization-paths.js";
 import { InviteForm } from "../invitations/invite-form.js";
 import { PendingInvitationRow } from "../invitations/pending-invitation-row.js";
 import { AppRolesPicker } from "./app-roles-picker.js";
@@ -25,17 +26,17 @@ const InviteToOrganization = ({ current, onSent }) => {
 		return sent;
 	};
 	return /* @__PURE__ */ jsx(InviteForm, {
-		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.",
+		title: text("inviteSomeone"),
+		description: text("inviteDescription"),
 		onInvite: invite,
 		beside: /* @__PURE__ */ jsx("select", {
-			"aria-label": "Organization role",
+			"aria-label": text("organizationRole"),
 			value: role,
 			onChange: (event) => setRole(event.target.value),
 			className: "h-8 rounded-md border border-border-strong bg-background px-2",
 			children: assignableOrganizationRoles(current).map((option) => /* @__PURE__ */ jsx("option", {
 				value: option,
-				children: organizationRoleLabels[option]
+				children: organizationRoleLabel(option)
 			}, option))
 		}),
 		children: /* @__PURE__ */ jsx(AppRolesPicker, {
@@ -51,7 +52,7 @@ const PendingRow = ({ invitation, organizationId, onChanged }) => {
 	const appRoles = invitation.appRoles.map((name) => roleLabel(organizations?.roles ?? [], name));
 	return /* @__PURE__ */ jsx(PendingInvitationRow, {
 		email: invitation.email,
-		gives: `${organizationRoleLabels[invitation.role]}${appRoles.length > 0 ? ` · ${appRoles.join(", ")}` : ""}`,
+		gives: `${organizationRoleLabel(invitation.role)}${appRoles.length > 0 ? ` · ${appRoles.join(", ")}` : ""}`,
 		expiresAt: invitation.expiresAt,
 		onResend: async () => {
 			const sent = await session.organizations.resend(organizationId, invitation);
@@ -78,16 +79,16 @@ const InvitationsPage = ({ current }) => {
 		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}.`
+				title: text("invitations"),
+				subtitle: text("peopleInvited", current.organization.name)
 			}),
 			/* @__PURE__ */ jsx(InviteToOrganization, {
 				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.",
+				title: text("notAcceptedYet"),
+				description: invitations.length > 0 ? text("sendingAgain") : text("nobodyWaiting"),
 				children: invitations.length > 0 && /* @__PURE__ */ jsx("ul", {
 					className: "divide-y rounded-md border",
 					children: invitations.map((invitation) => /* @__PURE__ */ jsx(PendingRow, {

package/dist/organizations/members-page.js

@@ -4,7 +4,8 @@ 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 { text } from "./messages.js";
+import { grantableRoles, organizationRoleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { AppRolesPicker } from "./app-roles-picker.js";
 import { PersonRow } from "../people/person-row.js";
@@ -33,17 +34,17 @@ const MemberRow = ({ member, current, onChanged }) => {
 		self,
 		error,
 		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("select", {
-			"aria-label": `Organization role of ${member.name}`,
+			"aria-label": text("roleOf", 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",
+			className: "h-7 rounded-md border border-border-strong bg-background px-2 text-body",
 			children: (roleLocked ? [member.role] : organizationRoles).map((role) => /* @__PURE__ */ jsx("option", {
 				value: role,
-				children: organizationRoleLabels[role]
+				children: organizationRoleLabel(role)
 			}, role))
 		}), !self && /* @__PURE__ */ jsx(Button, {
 			size: "sm",
@@ -54,7 +55,7 @@ const MemberRow = ({ member, current, onChanged }) => {
 				await session.organizations.removeMember(organizationId, member.id);
 				onChanged();
 			}),
-			children: "Remove"
+			children: text("remove")
 		})] }),
 		children: /* @__PURE__ */ jsx(AppRolesPicker, {
 			roles: membershipRoles,
@@ -78,18 +79,18 @@ const MembersPage = ({ current }) => {
 	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"));
+		if (organizationId) session.organizations.members(organizationId).then(setMembers, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : text("couldNotReadMembers")));
 	}, [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.`
+			title: text("members"),
+			subtitle: text("whoWorks", current.organization.name)
 		}), /* @__PURE__ */ jsxs(AccountSection, {
-			title: "Members",
-			description: "Owners and admins manage the organization; app roles decide what each member sees and does in the app.",
+			title: text("members"),
+			description: text("membersDescription"),
 			children: [/* @__PURE__ */ jsx(SectionError, { message: error }), members ? /* @__PURE__ */ jsx("ul", {
 				className: "divide-y rounded-md border",
 				children: members.map((member) => /* @__PURE__ */ jsx(MemberRow, {
@@ -99,7 +100,11 @@ const MembersPage = ({ current }) => {
 				}, `${member.id}/${member.role}/${member.appRoles.join()}`))
 			}) : !error && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 text-muted-foreground",
-				children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+				children: [
+					/* @__PURE__ */ jsx(Spinner, {}),
+					" ",
+					text("loading")
+				]
 			})]
 		})]
 	});