@protobase/ui 0.25.1 → 0.25.3

package/dist/organizations/organization-page.js

@@ -4,7 +4,8 @@ import { useAuth } from "../auth/auth-provider.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { AccountSection, SectionError } from "../account/account-section.js";
-import { managesOrganization, organizationRoleLabels } from "./organization-paths.js";
+import { text } from "./messages.js";
+import { managesOrganization, organizationRoleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { reopenIn } from "./use-organizations.js";
 import { useEffect, useState } from "react";
@@ -17,8 +18,8 @@ const Details = ({ organization, editable, onSaved }) => {
 	const { busy, error, run } = useAction();
 	const changed = name.trim() !== organization.name || slug !== organization.slug;
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Details",
-		description: editable ? "The name people see, and the slug that names it in links." : "Owners and admins can change these.",
+		title: text("details"),
+		description: editable ? text("detailsEditable") : text("detailsReadOnly"),
 		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-2 sm:flex-row",
 			onSubmit: (event) => {
@@ -33,14 +34,14 @@ const Details = ({ organization, editable, onSaved }) => {
 			},
 			children: [
 				/* @__PURE__ */ jsx(Input, {
-					"aria-label": "Name",
+					"aria-label": text("name"),
 					value: name,
 					disabled: !editable,
 					onChange: (event) => setName(event.target.value),
 					wrapperClassName: "flex-1"
 				}),
 				/* @__PURE__ */ jsx(Input, {
-					"aria-label": "Slug",
+					"aria-label": text("slug"),
 					value: slug,
 					disabled: !editable,
 					onChange: (event) => setSlug(event.target.value),
@@ -51,7 +52,7 @@ const Details = ({ organization, editable, onSaved }) => {
 					variant: "primary",
 					loading: busy,
 					disabled: !changed || !name.trim(),
-					children: "Save"
+					children: text("save")
 				})
 			]
 		})]
@@ -70,18 +71,18 @@ const HandOver = ({ organization, memberId }) => {
 		memberId
 	]);
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Hand over",
-		description: "Make another member the owner. You stay as an admin.",
+		title: text("handOver"),
+		description: text("handOverDescription"),
 		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-2 sm:flex-row",
 			children: [/* @__PURE__ */ jsxs("select", {
-				"aria-label": "New owner",
+				"aria-label": text("newOwner"),
 				value: target,
 				onChange: (event) => setTarget(event.target.value),
 				className: "h-8 flex-1 rounded-md border border-border-strong bg-background px-2",
 				children: [/* @__PURE__ */ jsx("option", {
 					value: "",
-					children: "Choose a member"
+					children: text("chooseMember")
 				}), members.map((member) => /* @__PURE__ */ jsxs("option", {
 					value: member.id,
 					children: [
@@ -98,7 +99,7 @@ const HandOver = ({ organization, memberId }) => {
 					await session.organizations.transferOwnership(target);
 					window.location.reload();
 				}),
-				children: "Hand over"
+				children: text("handOver")
 			})]
 		})]
 	});
@@ -113,31 +114,31 @@ const Delete = ({ organization, basePath }) => {
 		reopenIn(basePath);
 	});
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Delete organization",
-		description: "Takes the organization and its members and invitations away. Its records must be deleted first.",
+		title: text("deleteOrganization"),
+		description: text("deleteDescription"),
 		children: [
 			/* @__PURE__ */ jsx(SectionError, { message: confirming ? void 0 : error }),
 			/* @__PURE__ */ jsx(Button, {
 				variant: "danger",
 				onClick: () => setConfirming(true),
-				children: "Delete organization"
+				children: text("deleteOrganization")
 			}),
 			confirming && /* @__PURE__ */ jsxs(Dialog, {
-				title: `Delete ${organization.name}?`,
-				description: "Type its name to confirm. This cannot be undone.",
+				title: text("deleteTitle", organization.name),
+				description: text("deleteConfirm"),
 				onClose: () => setConfirming(false),
 				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 					onClick: () => setConfirming(false),
-					children: "Cancel"
+					children: text("cancel")
 				}), /* @__PURE__ */ jsx(Button, {
 					variant: "danger",
 					loading: busy,
 					disabled: typed !== organization.name,
 					onClick: () => void remove(),
-					children: "Delete"
+					children: text("delete")
 				})] }),
 				children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsx(Input, {
-					"aria-label": "Organization name",
+					"aria-label": text("organizationName"),
 					value: typed,
 					onChange: (event) => setTyped(event.target.value)
 				})]
@@ -149,15 +150,15 @@ const Leave = ({ organization, basePath, owner }) => {
 	const { session } = useAuth();
 	const { busy, error, run } = useAction();
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Leave",
-		description: owner ? "An organization keeps an owner: hand it over before you leave, unless it has another owner." : "You stop being a member, and lose your roles here.",
-		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs(Button, {
+		title: text("leave"),
+		description: owner ? text("leaveOwner") : text("leaveMember"),
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsx(Button, {
 			loading: busy,
 			onClick: () => void run(async () => {
 				await session.organizations.leave(organization.id);
 				reopenIn(basePath);
 			}),
-			children: ["Leave ", organization.name]
+			children: text("leaveName", organization.name)
 		})]
 	});
 };
@@ -167,8 +168,8 @@ const OrganizationPage = ({ current, basePath, onChanged }) => {
 	if (!organization) return /* @__PURE__ */ jsx("div", {
 		className: "mx-auto w-full max-w-3xl px-4 py-6 md:px-6",
 		children: /* @__PURE__ */ jsx(PageHeader, {
-			title: "Organization",
-			subtitle: "You do not work in an organization now. Choose one under Organizations."
+			title: text("organization"),
+			subtitle: text("noOrganization")
 		})
 	});
 	const owner = current.role === "owner";
@@ -177,7 +178,7 @@ const OrganizationPage = ({ current, basePath, onChanged }) => {
 		children: [
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: organization.name,
-				subtitle: current.role ? `You are ${organizationRoleLabels[current.role].toLowerCase()} here.` : "You work here through your global roles, without being a member."
+				subtitle: current.role ? text("youAre", organizationRoleLabel(current.role).toLowerCase()) : text("throughGlobalRoles")
 			}),
 			/* @__PURE__ */ jsx(Details, {
 				organization,

package/dist/organizations/organization-paths.js

@@ -1,20 +1,23 @@
+import { text } from "./messages.js";
 import { Building2, Mail, Network, Users } from "lucide-react";
 //#region src/organizations/organization-paths.ts
 const organizationsPath = "/-/organizations";
 const organizationPath = "/-/organization";
 const membersPath = "/-/organization/members";
 const invitationsPath = "/-/organization/invitations";
-const organizationPageTitles = {
-	[organizationsPath]: "Organizations",
-	[organizationPath]: "Organization",
-	[membersPath]: "Members",
-	[invitationsPath]: "Invitations"
+const pageTitles = {
+	[organizationsPath]: "organizations",
+	[organizationPath]: "organization",
+	[membersPath]: "members",
+	[invitationsPath]: "invitations"
 };
-const organizationRoleLabels = {
-	owner: "Owner",
-	admin: "Admin",
-	member: "Member"
+/** The title of the organization page at `path`; undefined for any other path. */
+const organizationPageTitle = (path) => {
+	const id = pageTitles[path];
+	return id && text(id);
 };
+/** The word for an organization role. */
+const organizationRoleLabel = (role) => text(role);
 /** The label of an app role, as the server names it. */
 const roleLabel = (roles, name) => roles.find((role) => role.name === name)?.label ?? name;
 /** Whether the person manages the current organization: its owners and admins. */
@@ -32,9 +35,9 @@ const organizationMenuItems = (basePath, path, current) => {
 		active: path === target
 	});
 	return [
-		item("organizations", "Organizations", Network, organizationsPath),
-		...current?.organization ? [item("organization", "Organization", Building2, organizationPath)] : [],
-		...managesOrganization(current) ? [item("members", "Members", Users, membersPath), item("invitations", "Invitations", Mail, invitationsPath)] : []
+		item("organizations", text("organizations"), Network, organizationsPath),
+		...current?.organization ? [item("organization", text("organization"), Building2, organizationPath)] : [],
+		...managesOrganization(current) ? [item("members", text("members"), Users, membersPath), item("invitations", text("invitations"), Mail, invitationsPath)] : []
 	];
 };
 /** The app roles someone may give or take away: those they hold, those their roles grant, and every one for a superuser. */
@@ -46,4 +49,4 @@ const grantableRoles = (roles, current) => {
 	return new Set([...held, ...granted].filter((name) => membership.includes(name)));
 };
 //#endregion
-export { grantableRoles, invitationsPath, managesOrganization, membersPath, organizationMenuItems, organizationPageTitles, organizationPath, organizationRoleLabels, organizationsPath, roleLabel };
+export { grantableRoles, invitationsPath, managesOrganization, membersPath, organizationMenuItems, organizationPageTitle, organizationPath, organizationRoleLabel, organizationsPath, roleLabel };

package/dist/organizations/organization-row.js

@@ -1,5 +1,6 @@
 import { Badge } from "../primitives/badge.js";
 import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/organization-row.tsx
 /** An organization with Open, or a Current badge when the person works in it. */
@@ -16,12 +17,12 @@ const OrganizationRow = ({ organization, current, busy, onOpen }) => /* @__PURE_
 		})]
 	}), current ? /* @__PURE__ */ jsx(Badge, {
 		tone: "green",
-		children: "Current"
+		children: text("current")
 	}) : /* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		loading: busy,
 		onClick: onOpen,
-		children: "Open"
+		children: text("open")
 	})]
 });
 //#endregion

package/dist/organizations/organizations-page.js

@@ -4,6 +4,7 @@ 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 { text } from "./messages.js";
 import { roleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { isAdmin } from "../auth/user-to-shell.js";
@@ -28,8 +29,8 @@ const NewOrganization = ({ basePath }) => {
 		reopenIn(basePath);
 	});
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "New organization",
-		description: "You become its owner, with every role, and work in it once it is made.",
+		title: text("newOrganization"),
+		description: text("newOrganizationDescription"),
 		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-2 sm:flex-row",
 			onSubmit: (event) => {
@@ -38,14 +39,14 @@ const NewOrganization = ({ basePath }) => {
 			},
 			children: [
 				/* @__PURE__ */ jsx(Input, {
-					"aria-label": "Name",
-					placeholder: "Name",
+					"aria-label": text("name"),
+					placeholder: text("name"),
 					value: name,
 					onChange: (event) => setName(event.target.value),
 					wrapperClassName: "flex-1"
 				}),
 				/* @__PURE__ */ jsx(Input, {
-					"aria-label": "Slug",
+					"aria-label": text("slug"),
 					placeholder: "slug",
 					value: slug ?? slugOf(name),
 					onChange: (event) => setSlug(event.target.value),
@@ -56,7 +57,7 @@ const NewOrganization = ({ basePath }) => {
 					variant: "primary",
 					loading: busy,
 					disabled: !name.trim(),
-					children: "Create"
+					children: text("create")
 				})
 			]
 		})]
@@ -71,8 +72,8 @@ const YourInvitations = () => {
 	if (invitations.length === 0) return null;
 	const roles = organizations?.roles ?? [];
 	return /* @__PURE__ */ jsx(AccountSection, {
-		title: "Invitations for you",
-		description: "Open the link in the invitation email to accept one.",
+		title: text("invitationsForYou"),
+		description: text("invitationsForYouDescription"),
 		children: /* @__PURE__ */ jsx("ul", {
 			className: "divide-y rounded-md border",
 			children: invitations.map((invitation) => /* @__PURE__ */ jsxs("li", {
@@ -80,13 +81,13 @@ const YourInvitations = () => {
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "font-medium",
-						children: invitation.organizationName ?? "An organization"
+						children: invitation.organizationName ?? text("anOrganization")
 					}),
 					": ",
-					invitation.appRoles.map((name) => roleLabel(roles, name)).join(", ") || "no app roles",
-					/* @__PURE__ */ jsxs("span", {
+					invitation.appRoles.map((name) => roleLabel(roles, name)).join(", ") || text("noAppRoles"),
+					/* @__PURE__ */ jsx("span", {
 						className: "block text-xs text-muted-foreground",
-						children: ["Until ", new Date(invitation.expiresAt).toLocaleDateString(formatTag())]
+						children: text("until", new Date(invitation.expiresAt).toLocaleDateString(formatTag()))
 					})
 				]
 			}, invitation.id))
@@ -107,12 +108,12 @@ const OrganizationsPage = ({ state, basePath }) => {
 		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: "Organizations",
-				subtitle: "You work in one organization at a time; what you see follows from your roles there."
+				title: text("organizations"),
+				subtitle: text("organizationsSubtitle")
 			}),
 			/* @__PURE__ */ jsxs(AccountSection, {
-				title: "Your organizations",
-				description: state.organizations.length > 0 ? "The organizations you are a member of." : "You are not a member of an organization yet.",
+				title: text("yourOrganizations"),
+				description: state.organizations.length > 0 ? text("memberOf") : text("notMember"),
 				children: [/* @__PURE__ */ jsx(SectionError, { message: error ?? state.error }), state.organizations.length > 0 && /* @__PURE__ */ jsx("ul", {
 					className: "divide-y rounded-md border",
 					children: state.organizations.map((organization) => /* @__PURE__ */ jsx(OrganizationRow, {

package/dist/organizations/use-organizations.js

@@ -1,5 +1,6 @@
 import { authMessage } from "../auth/auth-messages.js";
 import { useAuth } from "../auth/auth-provider.js";
+import { text } from "./messages.js";
 import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
 //#region src/organizations/use-organizations.ts
@@ -16,7 +17,7 @@ const useOrganizations = (enabled) => {
 		Promise.all([session.organizations.current(), session.organizations.list()]).then(([currentOrganization, list]) => {
 			setCurrent(currentOrganization);
 			setOrganizations(list);
-		}, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your organizations"));
+		}, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : text("couldNotReadOrganizations")));
 	}, [
 		enabled,
 		session,

package/dist/package.js

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

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

@@ -3,6 +3,7 @@ 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 { text } from "./messages.js";
 import { usePluginSource } from "./plugin-source.js";
 import { usePluginLoads } from "./use-plugin-loads.js";
 import { useCallback, useMemo } from "react";
@@ -31,7 +32,11 @@ const BeforeSignIn = ({ children }) => {
 	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-muted-foreground",
-		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" ",
+			text("loading")
+		]
 	});
 	if (!Around) return children;
 	return /* @__PURE__ */ jsx(CustomBoundary, {

package/dist/plugins/load-plugin.d.ts

@@ -1,6 +1,6 @@
 import "../app/pages/project-ui.js";
-import { PluginRef } from "@protobase/client";
 import "@protobase/schema/internal";
+import { PluginRef } from "@protobase/client";
 //#region src/plugins/load-plugin.d.ts
 /** What loading a plugin needs from the page: reading its plugin.json, adding its stylesheet and importing its module. */
 export type PluginLoader = {

package/dist/plugins/load-plugin.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { parseManifest } from "./plugin-manifest.js";
 import { pluginUi } from "./plugin-ui.js";
 import { pluginApi, protobaseVersion } from "./plugin-api.js";
@@ -45,7 +46,7 @@ const loadPlugin = async (ref, loader, base, host = thisApp) => {
 	let name;
 	try {
 		const read = await loader.readJson(url);
-		if ("status" in read) return off(`its plugin.json answered ${read.status}`);
+		if ("status" in read) return off(text("answered", read.status));
 		const parsed = parseManifest(read.json);
 		if ("problem" in parsed) return off(parsed.problem);
 		const { manifest } = parsed;
@@ -66,7 +67,7 @@ const loadPlugin = async (ref, loader, base, host = thisApp) => {
 			ui: pluginUi(plugin, module)
 		};
 	} catch (error) {
-		return off(`it could not be loaded: ${describe(error)}`, name);
+		return off(text("couldNotLoad", describe(error)), name);
 	}
 };
 //#endregion

package/dist/plugins/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/plugins/messages.ts
+const text = defineMessages({
+	en: {
+		loading: "Loading",
+		pluginsOff: "Plugins off",
+		pluginOff: "The plugin {} is off: {}.",
+		dismiss: "Dismiss",
+		answered: (status) => `its plugin.json answered ${status}`,
+		couldNotLoad: (reason) => `it could not be loaded: ${reason}`,
+		notObject: "its plugin.json is not an object",
+		noName: "its plugin.json names no plugin",
+		noApi: "its plugin.json names no plugin API",
+		noVersions: "its plugin.json names no Protobase versions",
+		noModule: "its plugin.json names no module",
+		badStylesheet: "its plugin.json names a stylesheet that is no URL",
+		badVersion: "its plugin.json has a version that is no text"
+	},
+	nl: {
+		loading: "Laden",
+		pluginsOff: "Plug-ins uit",
+		pluginOff: "De plug-in {} staat uit: {}.",
+		dismiss: "Sluiten",
+		answered: (status) => `de plugin.json antwoordde ${status}`,
+		couldNotLoad: (reason) => `hij kon niet worden geladen: ${reason}`,
+		notObject: "de plugin.json is geen object",
+		noName: "de plugin.json noemt geen plug-in",
+		noApi: "de plugin.json noemt geen plug-in-API",
+		noVersions: "de plugin.json noemt geen Protobase-versies",
+		noModule: "de plugin.json noemt geen module",
+		badStylesheet: "de plugin.json noemt een stylesheet die geen URL is",
+		badVersion: "de plugin.json heeft een versie die geen tekst is"
+	}
+});
+//#endregion
+export { text };

package/dist/plugins/plugin-gate.js

@@ -1,5 +1,6 @@
 import { Spinner } from "../primitives/spinner.js";
 import { mergePlugins } from "./merge-plugins.js";
+import { text } from "./messages.js";
 import { usePluginSource } from "./plugin-source.js";
 import { usePluginLoads } from "./use-plugin-loads.js";
 import { useAdminMeta } from "../app/meta-gate.js";
@@ -21,7 +22,11 @@ const PluginGate = ({ ui, children }) => {
 	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-muted-foreground",
-		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" ",
+			text("loading")
+		]
 	});
 	return /* @__PURE__ */ jsx(ProjectUiContext.Provider, {
 		value: merged.ui,

package/dist/plugins/plugin-manifest.js

@@ -1,15 +1,16 @@
+import { text } from "./messages.js";
 //#region src/plugins/plugin-manifest.ts
 const isText = (value) => typeof value === "string" && value.trim() !== "";
 /** The manifest in `value`, or what is wrong with it. */
 const parseManifest = (value) => {
-	if (typeof value !== "object" || value === null || Array.isArray(value)) return { problem: "its plugin.json is not an object" };
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return { problem: text("notObject") };
 	const { name, version, api, protobase, entry, css } = value;
-	if (!isText(name)) return { problem: "its plugin.json names no plugin" };
-	if (!Number.isInteger(api)) return { problem: "its plugin.json names no plugin API" };
-	if (!isText(protobase)) return { problem: "its plugin.json names no Protobase versions" };
-	if (!isText(entry)) return { problem: "its plugin.json names no module" };
-	if (css !== void 0 && !isText(css)) return { problem: "its plugin.json names a stylesheet that is no URL" };
-	if (version !== void 0 && !isText(version)) return { problem: "its plugin.json has a version that is no text" };
+	if (!isText(name)) return { problem: text("noName") };
+	if (!Number.isInteger(api)) return { problem: text("noApi") };
+	if (!isText(protobase)) return { problem: text("noVersions") };
+	if (!isText(entry)) return { problem: text("noModule") };
+	if (css !== void 0 && !isText(css)) return { problem: text("badStylesheet") };
+	if (version !== void 0 && !isText(version)) return { problem: text("badVersion") };
 	return { manifest: {
 		name,
 		api,

package/dist/plugins/plugin-notice.js

@@ -1,3 +1,5 @@
+import { slotted } from "../locale/slotted.js";
+import { text } from "./messages.js";
 import { useState } from "react";
 import { Puzzle, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +10,7 @@ const PluginNotice = ({ off }) => {
 	if (dismissed || off.length === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "region",
-		"aria-label": "Plugins off",
+		"aria-label": text("pluginsOff"),
 		className: "flex items-start gap-3 border-b border-warning/40 bg-warning-soft px-4 py-2 text-warning-text",
 		children: [
 			/* @__PURE__ */ jsx(Puzzle, {
@@ -17,20 +19,14 @@ const PluginNotice = ({ off }) => {
 			}),
 			/* @__PURE__ */ jsx("ul", {
 				className: "min-w-0 flex-1 space-y-0.5 break-words",
-				children: off.map((plugin) => /* @__PURE__ */ jsxs("li", { children: [
-					"The plugin ",
-					/* @__PURE__ */ jsx("span", {
-						className: "font-semibold",
-						children: plugin.name ?? plugin.url
-					}),
-					" is off: ",
-					plugin.reason,
-					"."
-				] }, plugin.url))
+				children: off.map((plugin) => /* @__PURE__ */ jsx("li", { children: slotted(text("pluginOff"), /* @__PURE__ */ jsx("span", {
+					className: "font-semibold",
+					children: plugin.name ?? plugin.url
+				}), plugin.reason) }, plugin.url))
 			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": "Dismiss",
+				"aria-label": text("dismiss"),
 				className: "rounded p-0.5 hover:bg-warning/10",
 				onClick: () => setDismissed(true),
 				children: /* @__PURE__ */ jsx(X, {

package/dist/primitives/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/primitives/messages.ts
+const text = defineMessages({
+	en: {
+		close: "Close",
+		loading: "Loading",
+		remove: (label) => `Remove ${label}`
+	},
+	nl: {
+		close: "Sluiten",
+		loading: "Laden",
+		remove: (label) => `${label} verwijderen`
+	}
+});
+//#endregion
+export { text };

package/dist/primitives/sheet.js

@@ -1,4 +1,5 @@
 import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { text } from "./messages.js";
 import { closesSheet } from "./sheet-swipe.js";
 import { useRef } from "react";
 import { X } from "lucide-react";
@@ -55,7 +56,7 @@ const Sheet = ({ title, open, onClose, children }) => {
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": "Close",
+						"aria-label": text("close"),
 						onClick: onClose,
 						className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
 						children: /* @__PURE__ */ jsx(X, { className: "size-5" })

package/dist/primitives/spinner.js

@@ -1,9 +1,10 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { Loader2 } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/spinner.tsx
 const Spinner = ({ className }) => /* @__PURE__ */ jsx(Loader2, {
-	"aria-label": "Loading",
+	"aria-label": text("loading"),
 	className: cn("size-4 animate-spin", className)
 });
 //#endregion

package/dist/primitives/token.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/token.tsx
@@ -9,7 +10,7 @@ const Token = ({ label, onRemove }) => /* @__PURE__ */ jsxs("span", {
 		children: label
 	}), /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": `Remove ${label}`,
+		"aria-label": text("remove", label),
 		className: "rounded p-0.5 hover:bg-primary-border/60",
 		onMouseDown: (event) => event.preventDefault(),
 		onClick: onRemove,

package/dist/record-view/messages.js

@@ -15,7 +15,8 @@ const text = defineMessages({
 		lastUpdated: (ago) => `Last updated ${ago}`,
 		viewing: (count) => `${count} viewing`,
 		savingSubject: (subject) => `Saving ${subject}...`,
-		subjectSaved: (subject) => `${subject} saved`
+		subjectSaved: (subject) => `${subject} saved`,
+		tabs: "Tabs"
 	},
 	nl: {
 		savedDifferent: (name) => `${name} bewaarde een andere waarde`,
@@ -31,7 +32,8 @@ const text = defineMessages({
 		lastUpdated: (ago) => `Laatst bijgewerkt ${ago}`,
 		viewing: (count) => `${count} kijken mee`,
 		savingSubject: (subject) => `${subject} bewaren...`,
-		subjectSaved: (subject) => `${subject} bewaard`
+		subjectSaved: (subject) => `${subject} bewaard`,
+		tabs: "Tabbladen"
 	}
 });
 //#endregion

package/dist/record-view/record-tabs.js

@@ -1,11 +1,12 @@
 import { cn } from "../lib/cn.js";
 import { segmentedClass } from "../primitives/segmented.js";
+import { text } from "./messages.js";
 import { AppLink } from "../app/use-app-address.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/record-view/record-tabs.tsx
 /** The record page's tabs, links whose addresses show each; the shown one is the current page. */
 const RecordTabs = ({ tabs }) => /* @__PURE__ */ jsx("nav", {
-	"aria-label": "Tabs",
+	"aria-label": text("tabs"),
 	className: "overflow-x-auto py-6",
 	children: /* @__PURE__ */ jsx("span", {
 		className: segmentedClass.group("md"),

package/dist/roles/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/roles/messages.ts
+const text = defineMessages({
+	en: {
+		couldNotReadRoles: "Could not read your roles",
+		couldNotSwitch: "Could not switch the role"
+	},
+	nl: {
+		couldNotReadRoles: "Kon je rollen niet lezen",
+		couldNotSwitch: "Kon niet van rol wisselen"
+	}
+});
+//#endregion
+export { text };