@protobase/ui 0.25.2 → 0.25.3

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";
@@ -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;
 };

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

@@ -1,4 +1,6 @@
+import { slotted } from "../../locale/slotted.js";
 import { Problem } from "../pages/problem.js";
+import { text } from "./messages.js";
 import { boardCard, boardColumns, boardRank } from "./board-columns.js";
 import { usePermissions } from "../meta-gate.js";
 import { useProjectUi } from "../pages/project-ui.js";
@@ -73,23 +75,19 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		},
 		coordinateGetter: cardCoordinates
 	}));
-	if (dropName !== void 0 && !drop) return /* @__PURE__ */ jsxs(Problem, { children: [
-		"No board drop is registered as ",
-		dropName,
-		". Give it in boardDrops in protobase.ui.tsx, or load the plugin that provides it."
-	] });
+	if (dropName !== void 0 && !drop) return /* @__PURE__ */ jsx(Problem, { children: slotted(text("noDrop"), dropName) });
 	const title = (row) => String(row.labels[card.title] ?? row.record[card.title] ?? row.key);
 	const columnOf = (id) => columns.find((column) => columnId(column.value) === id);
 	const valueOf = (row) => row.record[display.by] ?? null;
 	const crosses = (row, to) => takes(valueOf(row)) && takes(to.value);
 	const announced = (row, over) => {
-		if (!over) return { over: "no column" };
+		if (!over) return { over: text("noColumn") };
 		const place = placeable ? placeOver(over, row) : void 0;
-		if (!place) return { over: columnOf(over.id)?.label ?? "no column" };
+		if (!place) return { over: columnOf(over.id)?.label ?? text("noColumn") };
 		const count = place.rows.some((entry) => entry.key === row.key) ? place.rows.length : place.rows.length + 1;
 		return {
-			over: `${place.column.label}, place ${place.index + 1} of ${count}`,
-			place: `${place.column.label}, place ${place.index + 1}`
+			over: text("placeOf", place.column.label, place.index + 1, count),
+			place: text("place", place.column.label, place.index + 1)
 		};
 	};
 	const refused = (row, over) => {
@@ -97,15 +95,15 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		return target !== void 0 && target.value !== valueOf(row) && !crosses(row, target);
 	};
 	const announcements = {
-		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current.row)}.`,
-		onDragOver: ({ active: picked, over }) => `${title(picked.data.current.row)} is over ${announced(picked.data.current.row, over).over}.`,
+		onDragStart: ({ active: picked }) => text("pickedUp", title(picked.data.current.row)),
+		onDragOver: ({ active: picked, over }) => text("isOver", title(picked.data.current.row), announced(picked.data.current.row, over).over),
 		onDragEnd: ({ active: picked, over }) => {
 			const row = picked.data.current.row;
-			if (!over || refused(row, over)) return `${title(row)} was put back.`;
+			if (!over || refused(row, over)) return text("putBack", title(row));
 			const said = announced(row, over);
-			return `${title(row)} was moved to ${said.place ?? said.over}.`;
+			return text("wasMovedTo", title(row), said.place ?? said.over);
 		},
-		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current.row)} was cancelled.`
+		onDragCancel: ({ active: picked }) => text("cancelled", title(picked.data.current.row))
 	};
 	const start = ({ active: picked }) => {
 		dragged.current = true;
@@ -144,7 +142,7 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		},
 		accessibility: {
 			announcements,
-			screenReaderInstructions: { draggable: !placeable ? "To move a card to another column, press Space, move it with the left and right arrow keys, and press Space again to drop it there. Escape puts it back." : movable ? "To move a card, press Space, move it with the up and down arrow keys within its column and the left and right arrow keys to another column, and press Space again to drop it there. Escape puts it back." : "To move a card, press Space, move it with the up and down arrow keys within its column, and press Space again to drop it there. Escape puts it back." }
+			screenReaderInstructions: { draggable: !placeable ? text("boardAcross") : movable ? text("boardAnywhere") : text("boardWithin") }
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative min-w-0 flex-1 overflow-x-auto",

package/dist/app/displays/calendar-controls.js

@@ -1,5 +1,6 @@
 import { dayIn, viewerZone } from "../../format/zone.js";
 import { formatDayRange, formatMonth } from "../../format/date.js";
+import { text } from "./messages.js";
 import { calendarView, gridDays, stepView, todayView } from "./calendar-range.js";
 import { PeriodControls } from "./period-controls.js";
 import { jsx } from "react/jsx-runtime";
@@ -28,8 +29,8 @@ const CalendarControls = ({ view, now, linkTo, onView }) => {
 		previous: stepView(view, -1),
 		today: todayView(view.scale, now),
 		next: stepView(view, 1),
-		scales: [scale("month", "Month"), scale("week", "Week")],
-		scalesLabel: "Calendar scale",
+		scales: [scale("month", text("month")), scale("week", text("week"))],
+		scalesLabel: text("calendarScale"),
 		linkTo,
 		onView
 	});

package/dist/app/displays/calendar-display.js

@@ -2,6 +2,7 @@ import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { dayIn, viewerZone } from "../../format/zone.js";
 import { formatDate, formatWeekday } from "../../format/date.js";
+import { text } from "./messages.js";
 import { usePermissions } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
@@ -57,10 +58,10 @@ const CalendarDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 	const dayText = (id) => formatDate(Date.parse(`${String(id).slice(dayId("").length)}T00:00:00Z`));
 	const title = (picked) => eventTitle(model, view, display, picked.row);
 	const announcements = {
-		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current)}.`,
-		onDragOver: ({ active: picked, over }) => `${title(picked.data.current)} is over ${over ? dayText(over.id) : "no day"}.`,
-		onDragEnd: ({ active: picked, over }) => over ? `${title(picked.data.current)} was moved to ${dayText(over.id)}.` : `${title(picked.data.current)} was put back.`,
-		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current)} was cancelled.`
+		onDragStart: ({ active: picked }) => text("pickedUp", title(picked.data.current)),
+		onDragOver: ({ active: picked, over }) => text("isOver", title(picked.data.current), over ? dayText(over.id) : text("noDay")),
+		onDragEnd: ({ active: picked, over }) => over ? text("wasMovedTo", title(picked.data.current), dayText(over.id)) : text("putBack", title(picked.data.current)),
+		onDragCancel: ({ active: picked }) => text("cancelled", title(picked.data.current))
 	};
 	const release = () => {
 		setActive(void 0);
@@ -81,17 +82,17 @@ const CalendarDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 			scale: "week",
 			day
 		}, now);
-		const text = `+${hidden} more`;
+		const label = text("moreHidden", hidden);
 		const className = "self-start rounded px-1 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary";
 		return linkTo ? /* @__PURE__ */ jsx(AppLink, {
 			to: linkTo(to),
 			className,
-			children: text
+			children: label
 		}) : /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className,
 			onClick: () => setLocal(to),
-			children: text
+			children: label
 		});
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -104,18 +105,12 @@ const CalendarDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 				onView: setLocal
 			}),
 			list.error && /* @__PURE__ */ jsx(ErrorBanner, {
-				title: "Could not load rows",
+				title: text("couldNotLoadRows"),
 				error: list.error
 			}),
-			list.capped && /* @__PURE__ */ jsxs("p", {
+			list.capped && /* @__PURE__ */ jsx("p", {
 				className: "text-xs text-muted-foreground",
-				children: [
-					"Showing the first ",
-					500,
-					" records of this ",
-					shown.scale,
-					". Narrow the filter to see the rest."
-				]
+				children: text("capped", 500, shown.scale)
 			}),
 			/* @__PURE__ */ jsxs(DndContext, {
 				sensors,
@@ -125,7 +120,7 @@ const CalendarDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 				onDragCancel: release,
 				accessibility: {
 					announcements,
-					screenReaderInstructions: { draggable: "To move an event to another day, press Space, move it a day with the left and right arrow keys or a week with the up and down arrow keys, and press Space again to drop it there. Escape puts it back." }
+					screenReaderInstructions: { draggable: text("calendarInstructions") }
 				},
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "overflow-hidden rounded-lg border border-border",

package/dist/app/displays/card-carousel.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { text } from "./messages.js";
 import { CardImageFrame, CardPhoto } from "./card-image.js";
 import { cardPhotoList, scrolledPhoto, shownPhoto } from "./card-photos.js";
 import { useRef, useState } from "react";
@@ -51,7 +52,7 @@ const CardCarousel = ({ photos, cover, swipe = true, children }) => {
 		children: [
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": "Previous photo",
+				"aria-label": text("previousPhoto"),
 				className: cn(arrow, !swipe && touchArrow, "left-2"),
 				onClick: () => press(-1),
 				children: /* @__PURE__ */ jsx(ChevronLeft, {
@@ -61,7 +62,7 @@ const CardCarousel = ({ photos, cover, swipe = true, children }) => {
 			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": "Next photo",
+				"aria-label": text("nextPhoto"),
 				className: cn(arrow, !swipe && touchArrow, "right-2"),
 				onClick: () => press(1),
 				children: /* @__PURE__ */ jsx(ChevronRight, {
@@ -74,7 +75,7 @@ const CardCarousel = ({ photos, cover, swipe = true, children }) => {
 				"aria-live": "polite",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sr-only",
-					children: `Photo ${index + 1} of ${list.length}`
+					children: text("photoOf", index + 1, list.length)
 				}), /* @__PURE__ */ jsx("span", {
 					className: "flex items-center gap-1 rounded-full bg-background/70 px-1.5 py-1 leading-none",
 					"aria-hidden": true,

package/dist/app/displays/cards-display.js

@@ -1,6 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
+import { text } from "./messages.js";
 import { RecordCard } from "./record-card.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,7 +13,7 @@ const CardsDisplay = ({ model, view, display, list, row = false, footer = true }
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
-		empty: `No ${plural} match.`,
+		empty: text("noneMatch", plural),
 		loading: /* @__PURE__ */ jsx("div", {
 			className: grid,
 			children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))