@protobase/ui 0.25.2 → 0.25.4

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))

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

@@ -1,9 +1,11 @@
+import { slotted } from "../../locale/slotted.js";
 import { Problem } from "../pages/problem.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
+import { text } from "./messages.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { ListDisplayProvider } from "./display-context.js";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/displays/custom-display.tsx
 /**
 * A display the project draws: the component registered under its name gets the display's props, field references
@@ -12,11 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const CustomDisplay = ({ display, list }) => {
 	const { components } = useProjectUi();
 	const Component = components?.[display.component];
-	if (!Component) return /* @__PURE__ */ jsxs(Problem, { children: [
-		"No component is registered as ",
-		display.component,
-		". Export it from protobase.ui.tsx, or load the plugin that provides it."
-	] });
+	if (!Component) return /* @__PURE__ */ jsx(Problem, { children: slotted(text("noComponent"), display.component) });
 	return /* @__PURE__ */ jsx(ListDisplayProvider, {
 		value: list,
 		children: /* @__PURE__ */ jsx("div", {

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

@@ -1,5 +1,6 @@
 import { formatTag } from "../../locale/active-locale.js";
 import { Button } from "../../primitives/button.js";
+import { text } from "./messages.js";
 import { ErrorBanner } from "../error-banner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/display-frame.tsx
@@ -7,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const DisplayState = ({ list, empty, loading, children }) => /* @__PURE__ */ jsx("div", {
 	className: "min-h-0 flex-1 overflow-y-auto",
 	children: list.loading ? loading : list.error ? /* @__PURE__ */ jsx(ErrorBanner, {
-		title: "Could not load rows",
+		title: text("couldNotLoadRows"),
 		error: list.error
 	}) : list.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
 		className: "py-8 text-center text-muted-foreground",
@@ -24,7 +25,7 @@ const DisplayFooter = ({ list }) => /* @__PURE__ */ jsxs("div", {
 	] }), list.more && /* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		onClick: list.loadMore,
-		children: "Show more"
+		children: text("showMore")
 	})]
 });
 //#endregion

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

@@ -1,10 +1,11 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
+import { text } from "./messages.js";
 import { displayRow } from "./list-displays.js";
 import { ErrorBanner } from "../error-banner.js";
 import { RecordCard } from "./record-card.js";
 import { VirtualCards } from "./virtual-cards.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/displays/list-cards.tsx
 const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
 const pictureHeight = (width) => width * .75;
@@ -21,16 +22,12 @@ const ListCards = ({ model, view, display, list, empty }) => {
 		children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
 	});
 	if (list.error) return /* @__PURE__ */ jsx(ErrorBanner, {
-		title: "Could not load rows",
+		title: text("couldNotLoadRows"),
 		error: list.error
 	});
-	if (!list.source || list.source.total === 0) return empty ?? /* @__PURE__ */ jsxs("p", {
+	if (!list.source || list.source.total === 0) return empty ?? /* @__PURE__ */ jsx("p", {
 		className: "py-8 text-center text-muted-foreground",
-		children: [
-			"No ",
-			plural.toLowerCase(),
-			" match."
-		]
+		children: text("noneMatch", plural.toLowerCase())
 	});
 	return /* @__PURE__ */ jsx(VirtualCards, {
 		source: list.source,

package/dist/app/displays/list-displays.js

@@ -4,8 +4,8 @@ import { listColumnNames } from "../../live/columns-from-model.js";
 import { displayValue } from "../../live/display-value.js";
 import { photosKey } from "../../live/row-photos.js";
 import { filledFields } from "../filled-fields.js";
-import { boardCard } from "./board-columns.js";
 import { text } from "./messages.js";
+import { boardCard } from "./board-columns.js";
 import { encodeKey, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
@@ -36,7 +36,7 @@ const phoneRows = (model, view) => {
 	return {
 		kind: "cards",
 		name: rowsDisplay,
-		label: "List",
+		label: text("list"),
 		icon: "list",
 		title,
 		...badge !== void 0 && { badge },
@@ -81,7 +81,7 @@ const listDisplayChoices = (model, view, xs) => {
 	const choices = displayChoices(view);
 	return xs && phoneRows(model, view) ? [...choices, {
 		name: rowsDisplay,
-		label: "List",
+		label: text("list"),
 		icon: "list"
 	}] : choices;
 };

package/dist/app/displays/map-display.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 { Button } from "../../primitives/button.js";
 import { Problem } from "../pages/problem.js";
 import { humanize } from "../../live/naming.js";
+import { text } from "./messages.js";
 import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
@@ -54,15 +55,15 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 	const approximate = new Set(points.filter((point) => point.approximate).map((point) => point.key));
 	const markerLabel = (keys) => {
 		const near = keys.filter((key) => approximate.has(key)).length;
-		if (keys.length === 1) return near === 1 ? `Show the ${singular}, at an approximate position` : `Show the ${singular}`;
-		if (near === 0) return `Show ${keys.length} ${plural}`;
-		return near === keys.length ? `Show ${keys.length} ${plural}, at approximate positions` : `Show ${keys.length} ${plural}, ${near} at approximate positions`;
+		if (keys.length === 1) return near === 1 ? text("showOneApproximate", singular) : text("showOne", singular);
+		if (near === 0) return text("showMany", keys.length, plural);
+		return near === keys.length ? text("showManyApproximate", keys.length, plural) : text("showManySomeApproximate", keys.length, plural, near);
 	};
-	const bucketLabel = (count) => `Zoom in on ${count.toLocaleString(formatTag())} ${count === 1 ? singular : plural}`;
+	const bucketLabel = (count) => text("zoomIn", count.toLocaleString(formatTag()), count === 1 ? singular : plural);
 	const overlay = useRef(null);
 	const [covered, setCovered] = useState(0);
 	useLayoutEffect(() => setCovered(overlay.current?.offsetHeight ?? 0), [row?.key]);
-	if (!style) return /* @__PURE__ */ jsx(Problem, { children: "The map display needs a map style: set PROTOBASE_MAP_STYLE_URL." });
+	if (!style) return /* @__PURE__ */ jsx(Problem, { children: text("needsStyle") });
 	const empty = loaded?.total === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex h-full min-h-[36rem] flex-1 flex-col sm:min-h-[28rem]", flush && "max-md:-mx-5 max-md:-mb-4 max-md:min-h-0"),
@@ -97,7 +98,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 				records.error && /* @__PURE__ */ jsx("div", {
 					className: "absolute inset-x-3 top-3 z-10",
 					children: /* @__PURE__ */ jsx(ErrorBanner, {
-						title: "Could not load rows",
+						title: text("couldNotLoadRows"),
 						error: records.error
 					})
 				}),
@@ -106,10 +107,10 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 					children: /* @__PURE__ */ jsxs("p", {
 						className: "pointer-events-auto flex items-center gap-3 rounded-full border border-border bg-background px-4 py-1.5 text-muted-foreground shadow",
 						role: "status",
-						children: [fitting ? `No ${plural} match.` : `No ${plural} in this part of the map.`, !fitting && /* @__PURE__ */ jsx(Button, {
+						children: [fitting ? text("noneMatch", plural) : text("noneHere", plural), !fitting && /* @__PURE__ */ jsx(Button, {
 							size: "sm",
 							onClick: () => setFitting(true),
-							children: "Show all"
+							children: text("showAll")
 						})]
 					})
 				}),
@@ -119,7 +120,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "pointer-events-auto flex w-full max-w-[16rem] flex-col gap-2 sm:max-w-xs",
 						role: "group",
-						"aria-label": `Chosen ${singular}`,
+						"aria-label": text("chosen", singular),
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-end gap-1.5",
 							children: [
@@ -128,12 +129,12 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 									children: [/* @__PURE__ */ jsx(CircleDashed, {
 										className: "size-3.5",
 										"aria-hidden": true
-									}), "Approximate position"]
+									}), text("approximatePosition")]
 								}),
 								selection.keys.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 									/* @__PURE__ */ jsx("button", {
 										type: "button",
-										"aria-label": "Previous",
+										"aria-label": text("previous"),
 										className: arrow,
 										onClick: () => setChosen(stepSelection(selection, -1)),
 										children: /* @__PURE__ */ jsx(ChevronLeft, {
@@ -152,7 +153,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 									}),
 									/* @__PURE__ */ jsx("button", {
 										type: "button",
-										"aria-label": "Next",
+										"aria-label": text("next"),
 										className: arrow,
 										onClick: () => setChosen(stepSelection(selection, 1)),
 										children: /* @__PURE__ */ jsx(ChevronRight, {
@@ -163,7 +164,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 								] }),
 								/* @__PURE__ */ jsx("button", {
 									type: "button",
-									"aria-label": "Close",
+									"aria-label": text("close"),
 									className: arrow,
 									onClick: () => setChosen(void 0),
 									children: /* @__PURE__ */ jsx(X, {

package/dist/app/displays/messages.js

@@ -11,7 +11,62 @@ const text = defineMessages({
 		orderChanged: "Order changed",
 		stayedIn: (column) => `Saved, still in ${column}`,
 		undo: "Undo",
-		couldNotUndo: "Could not undo"
+		couldNotUndo: "Could not undo",
+		couldNotLoadRows: "Could not load rows",
+		noPlural: (plural) => `No ${plural}`,
+		noValue: (label) => `No ${label.toLowerCase()}`,
+		somethingWrong: "Something went wrong",
+		showMore: "Show more",
+		noDrop: "No board drop is registered as {}. Give it in boardDrops in protobase.ui.tsx, or load the plugin that provides it.",
+		noComponent: "No component is registered as {}. Export it from protobase.ui.tsx, or load the plugin that provides it.",
+		pickedUp: (title) => `Picked up ${title}.`,
+		isOver: (title, over) => `${title} is over ${over}.`,
+		putBack: (title) => `${title} was put back.`,
+		wasMovedTo: (title, to) => `${title} was moved to ${to}.`,
+		cancelled: (title) => `Moving ${title} was cancelled.`,
+		startsOn: (title, day) => `${title} starts on ${day}.`,
+		noColumn: "no column",
+		noDay: "no day",
+		placeOf: (column, place, count) => `${column}, place ${place} of ${count}`,
+		place: (column, place) => `${column}, place ${place}`,
+		boardAcross: "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.",
+		boardAnywhere: "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.",
+		boardWithin: "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.",
+		calendarInstructions: "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.",
+		timelineInstructions: "To move a bar to other days, press Space, move it a day with the left and right arrow keys, and press Space again to drop it there. Escape puts it back.",
+		week: "Week",
+		month: "Month",
+		quarter: "Quarter",
+		calendarScale: "Calendar scale",
+		timelineScale: "Timeline scale",
+		previousPeriod: (unit) => `Previous ${unit}`,
+		nextPeriod: (unit) => `Next ${unit}`,
+		today: "Today",
+		capped: (limit, unit) => `Showing the first ${limit} records of this ${unit}. Narrow the filter to see the rest.`,
+		nothingIn: (unit) => `Nothing in this ${unit}.`,
+		photoOf: (index, count) => `Photo ${index} of ${count}`,
+		noneMatch: (plural) => `No ${plural} match.`,
+		list: "List",
+		showOneApproximate: (singular) => `Show the ${singular}, at an approximate position`,
+		showOne: (singular) => `Show the ${singular}`,
+		showMany: (count, plural) => `Show ${count} ${plural}`,
+		showManyApproximate: (count, plural) => `Show ${count} ${plural}, at approximate positions`,
+		showManySomeApproximate: (count, plural, near) => `Show ${count} ${plural}, ${near} at approximate positions`,
+		zoomIn: (count, noun) => `Zoom in on ${count} ${noun}`,
+		needsStyle: "The map display needs a map style: set PROTOBASE_MAP_STYLE_URL.",
+		noneHere: (plural) => `No ${plural} in this part of the map.`,
+		showAll: "Show all",
+		chosen: (singular) => `Chosen ${singular}`,
+		approximatePosition: "Approximate position",
+		previous: "Previous",
+		next: "Next",
+		close: "Close",
+		features: "Features",
+		couldNotReorder: "Could not change the order",
+		couldNotMoveTo: (to) => `Could not move it to ${to}`,
+		moreHidden: (count) => `+${count} more`,
+		previousPhoto: "Previous photo",
+		nextPhoto: "Next photo"
 	},
 	nl: {
 		table: "Tabel",
@@ -23,7 +78,78 @@ const text = defineMessages({
 		orderChanged: "Volgorde gewijzigd",
 		stayedIn: (column) => `Opgeslagen, nog in ${column}`,
 		undo: "Ongedaan maken",
-		couldNotUndo: "Kon niet ongedaan maken"
+		couldNotUndo: "Kon niet ongedaan maken",
+		couldNotLoadRows: "Kon de rijen niet laden",
+		noPlural: (plural) => `Geen ${plural}`,
+		noValue: (label) => `Geen ${label.toLowerCase()}`,
+		somethingWrong: "Er ging iets mis",
+		showMore: "Meer tonen",
+		noDrop: "Er is geen bordactie geregistreerd als {}. Geef die in boardDrops in protobase.ui.tsx, of laad de plug-in die haar levert.",
+		noComponent: "Er is geen component geregistreerd als {}. Exporteer die uit protobase.ui.tsx, of laad de plug-in die haar levert.",
+		pickedUp: (title) => `${title} opgepakt.`,
+		isOver: (title, over) => `${title} is boven ${over}.`,
+		putBack: (title) => `${title} is teruggezet.`,
+		wasMovedTo: (title, to) => `${title} is verplaatst naar ${to}.`,
+		cancelled: (title) => `Verplaatsen van ${title} is geannuleerd.`,
+		startsOn: (title, day) => `${title} begint op ${day}.`,
+		noColumn: "geen kolom",
+		noDay: "geen dag",
+		placeOf: (column, place, count) => `${column}, plaats ${place} van ${count}`,
+		place: (column, place) => `${column}, plaats ${place}`,
+		boardAcross: "Druk op Spatie om een kaart naar een andere kolom te verplaatsen, verplaats haar met de pijltjestoetsen links en rechts, en druk nogmaals op Spatie om haar daar neer te zetten. Escape zet haar terug.",
+		boardAnywhere: "Druk op Spatie om een kaart te verplaatsen, verplaats haar met de pijltjestoetsen omhoog en omlaag binnen haar kolom en met links en rechts naar een andere kolom, en druk nogmaals op Spatie om haar daar neer te zetten. Escape zet haar terug.",
+		boardWithin: "Druk op Spatie om een kaart te verplaatsen, verplaats haar met de pijltjestoetsen omhoog en omlaag binnen haar kolom, en druk nogmaals op Spatie om haar daar neer te zetten. Escape zet haar terug.",
+		calendarInstructions: "Druk op Spatie om een gebeurtenis naar een andere dag te verplaatsen, verplaats haar een dag met de pijltjestoetsen links en rechts of een week met omhoog en omlaag, en druk nogmaals op Spatie om haar daar neer te zetten. Escape zet haar terug.",
+		timelineInstructions: "Druk op Spatie om een balk naar andere dagen te verplaatsen, verplaats hem een dag met de pijltjestoetsen links en rechts, en druk nogmaals op Spatie om hem daar neer te zetten. Escape zet hem terug.",
+		week: "Week",
+		month: "Maand",
+		quarter: "Kwartaal",
+		calendarScale: "Schaal van de kalender",
+		timelineScale: "Schaal van de tijdlijn",
+		previousPeriod: (unit) => ({
+			week: "Vorige week",
+			month: "Vorige maand",
+			quarter: "Vorig kwartaal"
+		})[unit],
+		nextPeriod: (unit) => ({
+			week: "Volgende week",
+			month: "Volgende maand",
+			quarter: "Volgend kwartaal"
+		})[unit],
+		today: "Vandaag",
+		capped: (limit, unit) => `De eerste ${limit} records van ${{
+			week: "deze week",
+			month: "deze maand",
+			quarter: "dit kwartaal"
+		}[unit]} worden getoond. Verfijn het filter om de rest te zien.`,
+		nothingIn: (unit) => `Niets in ${{
+			week: "deze week",
+			month: "deze maand",
+			quarter: "dit kwartaal"
+		}[unit]}.`,
+		photoOf: (index, count) => `Foto ${index} van ${count}`,
+		noneMatch: (plural) => `Geen ${plural} gevonden.`,
+		list: "Lijst",
+		showOneApproximate: (singular) => `${singular} tonen, op een geschatte plek`,
+		showOne: (singular) => `${singular} tonen`,
+		showMany: (count, plural) => `${count} ${plural} tonen`,
+		showManyApproximate: (count, plural) => `${count} ${plural} tonen, op geschatte plekken`,
+		showManySomeApproximate: (count, plural, near) => `${count} ${plural} tonen, ${near} op geschatte plekken`,
+		zoomIn: (count, noun) => `Inzoomen op ${count} ${noun}`,
+		needsStyle: "De kaartweergave heeft een kaartstijl nodig: stel PROTOBASE_MAP_STYLE_URL in.",
+		noneHere: (plural) => `Geen ${plural} in dit deel van de kaart.`,
+		showAll: "Alles tonen",
+		chosen: (singular) => `Gekozen ${singular}`,
+		approximatePosition: "Geschatte plek",
+		previous: "Vorige",
+		next: "Volgende",
+		close: "Sluiten",
+		features: "Kenmerken",
+		couldNotReorder: "Kon de volgorde niet wijzigen",
+		couldNotMoveTo: (to) => `Kon het niet naar ${to} verplaatsen`,
+		moreHidden: (count) => `+${count} meer`,
+		previousPhoto: "Vorige foto",
+		nextPhoto: "Volgende foto"
 	}
 });
 //#endregion

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

@@ -1,5 +1,6 @@
 import { segmentedClass } from "../../primitives/segmented.js";
 import { buttonClass } from "../../primitives/button.js";
+import { text } from "./messages.js";
 import { AppLink } from "../use-app-address.js";
 import { Fragment } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -38,9 +39,9 @@ const PeriodControls = ({ heading, unit, previous, today, next, scales, scalesLa
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1",
 				children: [
-					control(previous, square, `Previous ${unit}`, /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })),
-					control(today, square, "Today", "Today"),
-					control(next, square, `Next ${unit}`, /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }))
+					control(previous, square, text("previousPeriod", unit), /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })),
+					control(today, square, text("today"), text("today")),
+					control(next, square, text("nextPeriod", unit), /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }))
 				]
 			}), /* @__PURE__ */ jsx("span", {
 				role: "group",

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

@@ -5,6 +5,7 @@ import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { displayValue } from "../../live/display-value.js";
+import { text } from "./messages.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { useProjectUi } from "../pages/project-ui.js";
@@ -41,7 +42,7 @@ const MetaValue = ({ icon, children }) => {
 const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
-	const text = (name) => {
+	const text$1 = (name) => {
 		const field = model.fields[name];
 		if (!field) return "";
 		const value = row.record[name];
@@ -59,8 +60,8 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			part: "display",
 			field,
 			value: row.record[name],
-			fallback: text(name)
-		}) : text(name);
+			fallback: text$1(name)
+		}) : text$1(name);
 	};
 	const subtitleValue = (name) => {
 		const field = model.fields[name];
@@ -79,7 +80,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 		return /* @__PURE__ */ jsx(ValueBadge, {
 			value,
 			hints,
-			children: text(name)
+			children: text$1(name)
 		});
 	};
 	const amountValue = (name) => {
@@ -114,7 +115,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(ValueBadge, {
 				value: status,
 				hints: view?.fields[badge],
-				children: text(badge)
+				children: text$1(badge)
 			})]
 		}),
 		subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -140,7 +141,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 		}),
 		raised.length > 0 && /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-wrap gap-1",
-			"aria-label": "Features",
+			"aria-label": text("features"),
 			children: raised.map((name) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
 				dot: false,
 				children: label(name)