@protobase/ui 0.25.2 → 0.25.4

package/dist/app/app.js

@@ -1,18 +1,21 @@
-import { accountMenuItems } from "../account/account-pages.js";
 import { setFallbackLocale } from "../locale/active-locale.js";
+import { accountMenuItems } from "../account/account-pages.js";
 import { AppShell } from "../app-shell/app-shell.js";
 import { AuthProvider, useAuth } from "../auth/auth-provider.js";
 import { AccountSecurityPage } from "../account/account-security-page.js";
 import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
 import { ApiProvider } from "../data/api-provider.js";
+import { text } from "./messages.js";
 import { Router, useRouter } from "./router.js";
+import { slotted } from "../locale/slotted.js";
 import { useSignInAddress } from "../auth/use-sign-in-address.js";
-import { managesOrganization, organizationMenuItems, organizationPageTitles } from "../organizations/organization-paths.js";
+import { managesOrganization, organizationMenuItems, organizationPageTitle } from "../organizations/organization-paths.js";
 import { startErrorReporting } from "./error-reporting.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
+import { AuthLocale } from "../auth/auth-locale.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";
@@ -137,8 +140,8 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const organizations = useOrganizations(Boolean(organizationSettings && user));
 	const current = organizations.current;
 	const outsideOrganizations = Boolean(organizationSettings) && current !== void 0 && !current.organization;
-	const organizationPage = organizationSettings && user ? organizationPageTitles[path] : void 0;
-	const accountPage = !user ? void 0 : path === "/-/account" ? "Sign-in & security" : path === "/-/sign-in-policy" ? "Sign-in policy" : organizationPage;
+	const organizationPage = organizationSettings && user ? organizationPageTitle(path) : void 0;
+	const accountPage = !user ? void 0 : path === "/-/account" ? text("signInSecurity") : path === "/-/sign-in-policy" ? text("signInPolicy") : organizationPage;
 	const resourceLabel = view?.names?.plural ?? (resource && humanize(resource));
 	const breadcrumb = accountPage ? [accountPage] : breadcrumbFor({
 		basePath,
@@ -160,31 +163,27 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		recordLoading: titleLoading
 	}), meta.appName));
 	const content = user && path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : user && path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
-		title: "Admins only",
-		children: "Only an admin can change how people sign in."
+		title: text("adminsOnly"),
+		children: text("onlyAdminPolicy")
 	}) : organizationPage && path === "/-/organization" ? /* @__PURE__ */ jsx(OrganizationPage, {
 		current,
 		basePath,
 		onChanged: organizations.reload
 	}) : organizationPage && (path === "/-/organization/members" || path === "/-/organization/invitations") ? !managesOrganization(current) ? /* @__PURE__ */ jsx(Notice, {
-		title: "Owners and admins only",
-		children: "Only the organization's owners and admins manage its members."
+		title: text("ownersOnly"),
+		children: text("onlyOwners")
 	}) : path === "/-/organization/members" ? /* @__PURE__ */ jsx(MembersPage, { current }) : /* @__PURE__ */ jsx(InvitationsPage, { current }) : organizationPage && path === "/-/organizations" || outsideOrganizations ? /* @__PURE__ */ jsx(OrganizationsPage, {
 		state: organizations,
 		basePath
 	}) : !address ? path === "/" ? /* @__PURE__ */ jsx(Notice, {
-		title: "Choose a resource",
-		children: "Pick one from the sidebar."
+		title: text("chooseResource"),
+		children: text("pickFromSidebar")
 	}) : /* @__PURE__ */ jsx(Notice, {
-		title: "Not found",
-		children: "There is nothing at this address."
-	}) : address.kind === "page" ? page ? /* @__PURE__ */ jsx(ComposedPage, { name: page.name }, page.name) : /* @__PURE__ */ jsxs(Notice, {
-		title: "Not found",
-		children: [
-			"There is no page called ",
-			address.page,
-			"."
-		]
+		title: text("notFound"),
+		children: text("nothingHere")
+	}) : address.kind === "page" ? page ? /* @__PURE__ */ jsx(ComposedPage, { name: page.name }, page.name) : /* @__PURE__ */ jsx(Notice, {
+		title: text("notFound"),
+		children: slotted(text("noPage"), address.page)
 	}) : drawnFrom && drawnFrom.state !== "ready" ? /* @__PURE__ */ jsx(SourceNotice, { status: drawnFrom }) : address.kind === "create" ? /* @__PURE__ */ jsx(CreateRoute, {
 		resource: address.resource,
 		values: address.values
@@ -315,7 +314,7 @@ const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...r
 			initialUrl,
 			children: /* @__PURE__ */ jsx(PluginSourceProvider, {
 				...pluginLoader && { loader: pluginLoader },
-				children: /* @__PURE__ */ jsx(PublicFormGate, {
+				children: /* @__PURE__ */ jsx(AuthLocale, { children: /* @__PURE__ */ jsx(PublicFormGate, {
 					baseUrl: rest.baseUrl,
 					client: rest.client,
 					ui: rest.ui,
@@ -326,7 +325,7 @@ const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...r
 							...rest
 						})
 					})
-				})
+				}) })
 			})
 		})
 	}) });

package/dist/app/assistant-shell.js

@@ -1,4 +1,5 @@
 import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
 import { AssistantDock } from "../assistant-dock/assistant-dock.js";
 import { useAssistant } from "../assistant-dock/use-assistant.js";
 import { useAssistantClient } from "../assistant-dock/use-assistant-client.js";
@@ -14,7 +15,7 @@ const AssistantButton = ({ open, onToggle }) => /* @__PURE__ */ jsxs(Button, {
 	className: "max-md:size-9 max-md:p-0",
 	children: [/* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", {
 		className: "max-md:sr-only",
-		children: "Assistant"
+		children: text("assistant")
 	})]
 });
 const ConnectedDock = ({ client, page, onClose }) => {

package/dist/app/batch-failure.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import "@protobase/client";
 //#region src/app/batch-failure.ts
 const label = (op) => {
@@ -8,7 +9,7 @@ const label = (op) => {
 const describeBatchFailure = (error, ops) => {
 	const index = error.operation;
 	const op = index === void 0 ? void 0 : ops[index];
-	return op ? `Operation ${index + 1} (${label(op)}) failed: ${error.message} Nothing was saved.` : `${error.message} Nothing was saved.`;
+	return op ? text("operationFailed", index + 1, label(op), error.message) : text("nothingSaved", error.message);
 };
 /** The same error with the failing operation named in its message, keeping its class so a 412 stays a 412. */
 const nameFailingOperation = (error, ops) => {

package/dist/app/breadcrumb-for.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { appPath } from "@protobase/schema";
 //#region src/app/breadcrumb-for.ts
 /** Group, then the page or resource list, then the record (or "New"): each with a page of its own links to it. */
@@ -10,7 +11,7 @@ const breadcrumbFor = ({ basePath, address, group, page, resourceLabel, recordTi
 			page: page.name
 		}, basePath)
 	}];
-	if (!address || address.kind === "page") return ["Admin"];
+	if (!address || address.kind === "page") return [text("admin")];
 	const resource = resourceLabel ? [{
 		label: resourceLabel,
 		href: appPath({
@@ -22,10 +23,10 @@ const breadcrumbFor = ({ basePath, address, group, page, resourceLabel, recordTi
 	if (address.kind === "list") return [...groupCrumb, ...resource];
 	const href = appPath(address, basePath);
 	const record = address.kind === "create" ? {
-		label: "New",
+		label: text("new"),
 		href
 	} : recordTitle === void 0 && recordLoading ? {
-		label: "Loading record",
+		label: text("loadingRecord"),
 		href,
 		loading: true
 	} : {

package/dist/app/charts/chart-groups.js

@@ -1,4 +1,5 @@
 import { formatTag } from "../../locale/active-locale.js";
+import { text } from "./messages.js";
 import { createWhere, enumLabel, printFilter } from "@protobase/schema";
 //#region src/app/charts/chart-groups.ts
 const where$1 = createWhere();
@@ -12,9 +13,9 @@ const colorOf = (field, hints, value, index) => {
 	return slot(index);
 };
 const labelOf = (field, hints, group) => {
-	if (group.value === null) return "Not set";
+	if (group.value === null) return text("notSet");
 	if (field.type === "enum") return enumLabel(String(group.value), hints?.valueLabels);
-	if (field.type === "boolean") return group.value ? "Yes" : "No";
+	if (field.type === "boolean") return group.value ? text("yes") : text("no");
 	return group.label ?? String(group.value);
 };
 /** The records of one group: the chart's own filter and the group's value. */

package/dist/app/charts/chart-view.js

@@ -3,6 +3,7 @@ import { viewerZone } from "../../format/zone.js";
 import { labelFieldOf } from "../../live/model-helpers.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useAggregate } from "../../data/use-aggregates.js";
+import { text } from "./messages.js";
 import { periodPoints, valueSlices } from "./chart-groups.js";
 import { GroupBars } from "./group-bars.js";
 import { GroupDonut } from "./group-donut.js";
@@ -28,7 +29,7 @@ const labelOf = (field, resources, views) => {
 * Loads a chart's groups through `:aggregate` and draws them: a date field's buckets as bars or a line, a field's
 * values as ranked bars or a donut, each value linking to its records. The server checked the chart at startup.
 */
-const ChartView = ({ model, view, groupBy, splitBy, type = "bar", sum, average, filter = "", granularity = "day", range = "30d", limit = 10, empty = "Nothing to chart yet." }) => {
+const ChartView = ({ model, view, groupBy, splitBy, type = "bar", sum, average, filter = "", granularity = "day", range = "30d", limit = 10, empty = text("nothingYet") }) => {
 	const { resources, views } = useAdminMeta();
 	const field = model.fields[groupBy];
 	const dated = field?.type === "date" || field?.type === "timestamp";
@@ -61,7 +62,7 @@ const ChartView = ({ model, view, groupBy, splitBy, type = "bar", sum, average,
 	if (result.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-36 w-full" });
 	if (result.error) return /* @__PURE__ */ jsx("p", {
 		className: "text-danger-text",
-		children: "Could not load the chart."
+		children: text("couldNotLoad")
 	});
 	const { groups } = result.data;
 	if (groups.every((group) => group.count === 0)) return /* @__PURE__ */ jsx("p", {

package/dist/app/charts/group-bars.js

@@ -1,4 +1,5 @@
 import { AppLink } from "../use-app-address.js";
+import { text } from "./messages.js";
 import { measureText } from "./chart-groups.js";
 import { filteredListAddress } from "../list-link.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,7 +17,7 @@ const GroupBars = ({ resource, view, slices, measure }) => {
 			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
 				to: filteredListAddress(view, resource, slice.filter),
 				className: "group grid grid-cols-[minmax(6rem,35%)_1fr_auto] items-center gap-3 rounded-md px-1 py-1 hover:bg-muted",
-				title: measure.kind === "count" ? void 0 : `${measureText(slice.count, { kind: "count" })} records`,
+				title: measure.kind === "count" ? void 0 : text("records", measureText(slice.count, { kind: "count" })),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "truncate group-hover:text-primary-text",

package/dist/app/charts/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/charts/messages.ts
+const text = defineMessages({
+	en: {
+		notSet: "Not set",
+		yes: "Yes",
+		no: "No",
+		nothingYet: "Nothing to chart yet.",
+		couldNotLoad: "Could not load the chart.",
+		weekOf: (day) => `Week of ${day}`,
+		other: "Other",
+		records: (count) => `${count} records`
+	},
+	nl: {
+		notSet: "Niet ingevuld",
+		yes: "Ja",
+		no: "Nee",
+		nothingYet: "Nog niets om in een grafiek te zetten.",
+		couldNotLoad: "Kon de grafiek niet laden.",
+		weekOf: (day) => `Week van ${day}`,
+		other: "Overig",
+		records: (count) => `${count} records`
+	}
+});
+//#endregion
+export { text };

package/dist/app/charts/period-chart.js

@@ -1,5 +1,6 @@
-import { useMediaQuery } from "../../lib/use-media-query.js";
 import { formatTag } from "../../locale/active-locale.js";
+import { useMediaQuery } from "../../lib/use-media-query.js";
+import { text } from "./messages.js";
 import { measureText } from "./chart-groups.js";
 import { LegendItem } from "./legend-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -68,7 +69,7 @@ const PointTooltip = ({ active, payload, measure, bucket, series }) => {
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "text-muted-foreground",
-				children: (bucket === "week" ? "Week of " : "") + formatterOf(tooltipFormats[bucket])(point.at)
+				children: bucket === "week" ? text("weekOf", formatterOf(tooltipFormats[bucket])(point.at)) : formatterOf(tooltipFormats[bucket])(point.at)
 			}),
 			series?.map((part) => /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",

package/dist/app/charts/split-points.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { colorOf, groupFilter, labelOf, periodPoints } from "./chart-groups.js";
 //#region src/app/charts/split-points.ts
 const noise = 1e-6;
@@ -42,7 +43,7 @@ const splitPoints = (groups, splits, field, hints, measure, filter = "") => {
 	return {
 		series: [...series, {
 			key: "other",
-			label: "Other",
+			label: text("other"),
 			color: "var(--border-strong)"
 		}],
 		points

package/dist/app/comments/comment-composer.js

@@ -7,6 +7,7 @@ import { menuKeyTarget } from "../../primitives/menu-keys.js";
 import { activeMention, insertMention, mentionedIds } from "./mention-text.js";
 import { useMentionable } from "./use-mentionable.js";
 import { usePostComment } from "./use-post-comment.js";
+import { text } from "./messages.js";
 import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/comments/comment-composer.tsx
@@ -17,7 +18,7 @@ const shownPeople = 8;
 * the arrows move, Enter or Tab picks, Escape closes. ⌘/Ctrl+Enter or the button posts.
 */
 const CommentComposer = ({ resource, recordKey }) => {
-	const [text, setText] = useState("");
+	const [draft, setDraft] = useState("");
 	const [caret, setCaret] = useState(0);
 	const [focused, setFocused] = useState(false);
 	const [picked, setPicked] = useState([]);
@@ -28,7 +29,7 @@ const CommentComposer = ({ resource, recordKey }) => {
 	const listId = useId();
 	const toast = useToast();
 	const post = usePostComment(resource, recordKey);
-	const mention = activeMention(text, caret);
+	const mention = activeMention(draft, caret);
 	const open = focused && mention !== void 0 && mention.start !== closed;
 	const people = useMentionable(resource, recordKey, open ? mention.query : void 0);
 	const options = open ? (people.data ?? []).slice(0, shownPeople) : [];
@@ -44,27 +45,27 @@ const CommentComposer = ({ resource, recordKey }) => {
 		box.current.setSelectionRange(nextCaret.current, nextCaret.current);
 		setCaret(nextCaret.current);
 		nextCaret.current = void 0;
-	}, [text]);
+	}, [draft]);
 	const pick = (user) => {
 		if (!mention) return;
-		const next = insertMention(text, mention, user.name);
+		const next = insertMention(draft, mention, user.name);
 		nextCaret.current = next.caret;
-		setText(next.text);
+		setDraft(next.text);
 		setPicked((current) => [...current, user]);
 	};
 	const submit = () => {
-		if (text.trim() === "" || post.isPending) return;
+		if (draft.trim() === "" || post.isPending) return;
 		post.mutate({
-			body: text,
-			mentions: mentionedIds(text, picked)
+			body: draft,
+			mentions: mentionedIds(draft, picked)
 		}, {
 			onSuccess: () => {
-				setText("");
+				setDraft("");
 				setPicked([]);
 			},
 			onError: (error) => toast.show({
 				state: "error",
-				title: "Could not post the comment",
+				title: text("couldNotPost"),
 				description: refusalReason(error)
 			})
 		});
@@ -100,16 +101,16 @@ const CommentComposer = ({ resource, recordKey }) => {
 			children: [/* @__PURE__ */ jsx(Textarea, {
 				ref: box,
 				role: "combobox",
-				"aria-label": "Comment",
+				"aria-label": text("comment"),
 				"aria-multiline": true,
 				"aria-autocomplete": "list",
 				"aria-expanded": listed,
 				"aria-controls": listId,
 				"aria-activedescendant": listed && options[active] ? optionId(active) : void 0,
-				placeholder: "Write a comment, @ to mention someone",
-				value: text,
+				placeholder: text("placeholder"),
+				value: draft,
 				onChange: (event) => {
-					setText(event.target.value);
+					setDraft(event.target.value);
 					setCaret(event.target.selectionStart);
 				},
 				onSelect: (event) => setCaret(event.currentTarget.selectionStart),
@@ -119,7 +120,7 @@ const CommentComposer = ({ resource, recordKey }) => {
 			}), listed && /* @__PURE__ */ jsxs("ul", {
 				id: listId,
 				role: "listbox",
-				"aria-label": "People to mention",
+				"aria-label": text("peopleToMention"),
 				className: "absolute z-30 mt-1 w-full max-w-sm rounded-md border bg-background py-1 shadow-pop",
 				onMouseDown: (event) => event.preventDefault(),
 				children: [options.map((user, index) => /* @__PURE__ */ jsx("li", {
@@ -132,16 +133,16 @@ const CommentComposer = ({ resource, recordKey }) => {
 					children: user.name
 				}, user.id)), options.length === 0 && /* @__PURE__ */ jsx("li", {
 					className: "px-3 py-1.5 text-muted-foreground",
-					children: "No one found"
+					children: text("noOneFound")
 				})]
 			})]
 		}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			size: "sm",
-			disabled: text.trim() === "",
+			disabled: draft.trim() === "",
 			loading: post.isPending,
 			onClick: submit,
-			children: "Comment"
+			children: text("comment")
 		}) })]
 	});
 };

package/dist/app/comments/comments-section.js

@@ -6,6 +6,7 @@ import { hueOf, initialsOf } from "../../auth/user-to-shell.js";
 import { Section } from "../../record-view/section.js";
 import { ErrorBanner } from "../error-banner.js";
 import { CommentBody } from "./comment-body.js";
+import { text } from "./messages.js";
 import { CommentComposer } from "./comment-composer.js";
 import { useRecordComments } from "./use-record-comments.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -51,17 +52,17 @@ const CommentsSection = ({ item, resource, recordKey, canWrite }) => {
 	return /* @__PURE__ */ jsxs(Section, {
 		title: item.title,
 		children: [comments.isPending ? /* @__PURE__ */ jsx(Loading, {}) : comments.error ? /* @__PURE__ */ jsx(ErrorBanner, {
-			title: "Could not load the comments",
+			title: text("couldNotLoad"),
 			error: comments.error
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [comments.hasNextPage && /* @__PURE__ */ jsx(Button, {
 			size: "sm",
 			className: "mb-4",
 			disabled: comments.isFetchingNextPage,
 			onClick: () => void comments.fetchNextPage(),
-			children: "Show earlier comments"
+			children: text("showEarlier")
 		}), comments.items.length === 0 ? /* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground",
-			children: "No comments yet."
+			children: text("noComments")
 		}) : /* @__PURE__ */ jsx("ol", {
 			className: "divide-y divide-border",
 			children: comments.items.map((comment) => /* @__PURE__ */ jsx(Comment, { comment }, comment.id))

package/dist/app/comments/messages.js

@@ -0,0 +1,26 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/comments/messages.ts
+const text = defineMessages({
+	en: {
+		couldNotPost: "Could not post the comment",
+		comment: "Comment",
+		placeholder: "Write a comment, @ to mention someone",
+		peopleToMention: "People to mention",
+		noOneFound: "No one found",
+		couldNotLoad: "Could not load the comments",
+		showEarlier: "Show earlier comments",
+		noComments: "No comments yet."
+	},
+	nl: {
+		couldNotPost: "Kon de opmerking niet plaatsen",
+		comment: "Opmerking",
+		placeholder: "Schrijf een opmerking, @ om iemand te noemen",
+		peopleToMention: "Mensen om te noemen",
+		noOneFound: "Niemand gevonden",
+		couldNotLoad: "Kon de opmerkingen niet laden",
+		showEarlier: "Eerdere opmerkingen tonen",
+		noComments: "Nog geen opmerkingen."
+	}
+});
+//#endregion
+export { text };

package/dist/app/create/create-page.js

@@ -1,9 +1,10 @@
 import { useClient } from "../../data/api-provider.js";
+import { text } from "../messages.js";
 import { humanize } from "../../live/naming.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
-import { text } from "./messages.js";
+import { text as text$1 } from "./messages.js";
 import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
 import { FieldEditor } from "../field-editor.js";
 import { fieldErrors, fieldMessage } from "../field-errors.js";
@@ -13,7 +14,7 @@ import { fetchLabels } from "../../live/relation-labels.js";
 import { useLiveSave } from "../use-live-save.js";
 import { CreateRecordForm } from "./create-record-form.js";
 import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/create/create-page.tsx
 const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));
@@ -22,21 +23,13 @@ const CreatePage = ({ resource, values }) => {
 	const meta = useAdminMeta();
 	const model = meta.resources[resource];
 	const permissions = usePermissions(resource);
-	if (!model) return /* @__PURE__ */ jsxs(Notice, {
-		title: "Not found",
-		children: [
-			"There is no resource called ",
-			resource,
-			"."
-		]
+	if (!model) return /* @__PURE__ */ jsx(Notice, {
+		title: text("notFound"),
+		children: text("noResource", resource)
 	});
-	if (!can(permissions, "create")) return /* @__PURE__ */ jsxs(Notice, {
-		title: "Not allowed",
-		children: [
-			"You cannot create ",
-			meta.views[resource]?.names?.plural.toLowerCase() ?? resource,
-			"."
-		]
+	if (!can(permissions, "create")) return /* @__PURE__ */ jsx(Notice, {
+		title: text$1("notAllowed"),
+		children: text$1("cannotCreate", meta.views[resource]?.names?.plural.toLowerCase() ?? resource)
 	});
 	return /* @__PURE__ */ jsx(LoadedCreate, {
 		resource,
@@ -51,7 +44,7 @@ const LoadedCreate = ({ resource, values }) => {
 	const queryClient = useQueryClient();
 	const { go } = useAppAddress();
 	const noun = view?.names?.singular ?? humanize(resource);
-	const feedback = useLiveSave(view?.saveFeedback ?? "toast", text("subject", noun));
+	const feedback = useLiveSave(view?.saveFeedback ?? "toast", text$1("subject", noun));
 	const sections = createSections(model, view);
 	const [draft, setDraft] = useState(() => initialDraft(model, sections, values));
 	const [errors, setErrors] = useState({});
@@ -132,7 +125,7 @@ const LoadedCreate = ({ resource, values }) => {
 					value: isChosen(value) ? value.key : value ?? (field.type === "boolean" ? false : ""),
 					stored: void 0,
 					relationLabel: isChosen(value) ? value.label : void 0,
-					placeholder: hasDatabaseDefault(field) ? text("setByDatabase") : void 0,
+					placeholder: hasDatabaseDefault(field) ? text$1("setByDatabase") : void 0,
 					relationPicker: target ? {
 						target,
 						view: meta.views[target.name]

package/dist/app/custom-section.js

@@ -1,3 +1,5 @@
+import { text } from "./messages.js";
+import { slotted } from "../locale/slotted.js";
 import { Problem } from "./pages/problem.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
 import { Section } from "../record-view/section.js";
@@ -5,7 +7,7 @@ import { SidebarCard } from "../record-view/record-sidebar.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { RecordScope } from "./pages/record-scope.js";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/custom-section.tsx
 /**
 * A component of the record layout (`l.custom`), drawn with the record around it, so `useLayoutRecord()` gives it, in a
@@ -20,11 +22,7 @@ const CustomSection = ({ item, scope }) => {
 			name: item.component,
 			children: /* @__PURE__ */ jsx(Component, { ...unmarkFieldRefs(item.props ?? {}) })
 		})
-	}) : /* @__PURE__ */ jsxs(Problem, { children: [
-		"No component is registered as ",
-		item.component,
-		". Export it from protobase.ui.tsx, or load the plugin that provides it."
-	] });
+	}) : /* @__PURE__ */ jsx(Problem, { children: slotted(text("noComponent"), item.component) });
 	if (item.sidebar) return item.title ? /* @__PURE__ */ jsx(SidebarCard, {
 		title: item.title,
 		children: body

package/dist/app/displays/board-column.js

@@ -1,8 +1,9 @@
-import { cn } from "../../lib/cn.js";
 import { formatTag } from "../../locale/active-locale.js";
+import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
+import { text } from "./messages.js";
 import { boardCard } from "./board-columns.js";
 import { ErrorBanner } from "../error-banner.js";
 import { rowAllows } from "../permissions.js";
@@ -60,7 +61,7 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 			/* @__PURE__ */ jsxs("header", {
 				className: "flex items-center justify-between gap-2 px-1 pt-0.5",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "min-w-0 truncate text-xs font-medium",
+					className: "min-w-0 truncate text-body font-medium",
 					children: column.value === null ? /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground",
 						children: column.label
@@ -75,11 +76,11 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 				})]
 			}),
 			list.loading ? Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-20" }, index)) : list.error ? /* @__PURE__ */ jsx(ErrorBanner, {
-				title: "Could not load rows",
+				title: text("couldNotLoadRows"),
 				error: list.error
-			}) : rows.length === 0 ? /* @__PURE__ */ jsxs("p", {
+			}) : rows.length === 0 ? /* @__PURE__ */ jsx("p", {
 				className: "px-1 py-4 text-center text-xs text-muted-foreground",
-				children: ["No ", plural]
+				children: text("noPlural", plural)
 			}) : /* @__PURE__ */ jsx(SortableContext, {
 				id: columnId(column.value),
 				items: rows.map((row) => row.key),
@@ -103,7 +104,7 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 				size: "sm",
 				variant: "ghost",
 				onClick: list.loadMore,
-				children: "Show more"
+				children: text("showMore")
 			})
 		]
 	});

package/dist/app/displays/board-columns.js

@@ -1,5 +1,6 @@
 import { humanize } from "../../live/naming.js";
 import { recordTitleField } from "../../live/model-helpers.js";
+import { text } from "./messages.js";
 import { isApiError } from "@protobase/client";
 import { enumLabel, printFilter, where } from "@protobase/schema";
 //#region src/app/displays/board-columns.ts
@@ -18,7 +19,7 @@ const boardColumns = (model, view, display) => {
 	if (!field.nullable) return values;
 	return [...values, {
 		value: null,
-		label: `No ${(hints?.label ?? humanize(display.by)).toLowerCase()}`
+		label: text("noValue", hints?.label ?? humanize(display.by))
 	}];
 };
 /** The field a board orders each column by: the resource's `.position()`, when its records are ordered as one rather than within a parent. */
@@ -39,7 +40,7 @@ const boardCard = (model, view, display) => ({
 });
 /** Why the server refused a move: the reasons it gives per field, such as a `validate` message, else its detail. */
 const refusalReason = (error) => {
-	if (!isApiError(error)) return error instanceof Error ? error.message : "Something went wrong";
+	if (!isApiError(error)) return error instanceof Error ? error.message : text("somethingWrong");
 	const reasons = error.errors.map((entry) => entry.message);
 	return reasons.length > 0 ? reasons.join("; ") : error.message;
 };