@protobase/ui 0.23.10 → 0.23.11

package/dist/app/field-errors.js

@@ -1,42 +1,42 @@
 import { formatInt } from "../format/number.js";
+import { text } from "./field-messages.js";
 import { isApiError } from "@protobase/client";
 //#region src/app/field-errors.ts
 const numberIn = (params, key) => typeof params?.[key] === "number" ? params[key] : void 0;
-const characters = (count) => `${formatInt(count)} character${count === 1 ? "" : "s"}`;
 const textMessage = (label, params) => {
 	const min = numberIn(params, "min");
 	const max = numberIn(params, "max");
-	if (min !== void 0) return `${label} needs at least ${characters(min)}`;
-	if (max !== void 0) return `${label} can have at most ${characters(max)}`;
+	if (min !== void 0) return text("atLeastCharacters", label, formatInt(min), min);
+	if (max !== void 0) return text("atMostCharacters", label, formatInt(max), max);
 };
 const wholeNumber = (params) => {
 	const min = numberIn(params, "min");
 	const max = numberIn(params, "max");
-	if (min !== void 0) return `Enter a whole number of at least ${formatInt(min)}`;
-	if (max !== void 0) return `Enter a whole number of at most ${formatInt(max)}`;
-	return "Enter a whole number";
+	if (min !== void 0) return text("wholeNumberAtLeast", formatInt(min));
+	if (max !== void 0) return text("wholeNumberAtMost", formatInt(max));
+	return text("wholeNumber");
 };
 const decimalMessage = (params) => {
 	const precision = numberIn(params, "precision");
 	const scale = numberIn(params, "scale");
-	if (precision === void 0 || scale === void 0) return "Enter a number";
+	if (precision === void 0 || scale === void 0) return text("number");
 	const below = formatInt(10 ** (precision - scale));
-	return scale === 0 ? `Enter a whole number below ${below}` : `Enter a number with at most ${scale} decimal${scale === 1 ? "" : "s"}, below ${below}`;
+	return scale === 0 ? text("wholeNumberBelow", below) : text("decimalsBelow", scale, below);
 };
 /** What to say about a value of each field type the server turned down; without an entry, the server's message shows. */
 const invalidValue = {
 	text: textMessage,
 	integer: (_, params) => wholeNumber(params),
-	bigint: () => "Enter a whole number",
+	bigint: () => text("wholeNumber"),
 	decimal: (_, params) => decimalMessage(params),
-	date: () => "Enter a date",
-	timestamp: () => "Enter a date and time",
-	country: () => "Enter a two-letter country code, such as NL",
-	currency: () => "Enter a three-letter currency code, such as EUR",
-	uuid: () => "Enter a valid ID",
-	enum: () => "Choose one of the options",
-	relation: () => "Choose a record",
-	json: () => "Enter valid JSON"
+	date: () => text("date"),
+	timestamp: () => text("timestamp"),
+	country: () => text("country"),
+	currency: () => text("currency"),
+	uuid: () => text("uuid"),
+	enum: () => text("enum"),
+	relation: () => text("relation"),
+	json: () => text("json")
 };
 /**
 * The message a form shows under a field the server turned down, in the words of the field's label: "Country is
@@ -44,7 +44,7 @@ const invalidValue = {
 * server words them.
 */
 const fieldMessage = (field, label, error) => {
-	if (error.code === "required") return `${label} is required`;
+	if (error.code === "required") return text("required", label);
 	if (error.code !== "invalid-value" || !field) return error.message;
 	return invalidValue[field.type]?.(label, error.params) ?? error.message;
 };
@@ -64,7 +64,7 @@ const saveFailureDescription = (error) => {
 	const fields = new Set(error.errors.flatMap((entry) => entry.field && entry.field !== "_record" ? [entry.field] : []));
 	const record = error.errors.flatMap((entry) => entry.field === "_record" ? [entry.message] : []);
 	if (fields.size === 0 && record.length === 0) return error.message;
-	return [...fields.size === 0 ? [] : [`Check ${fields.size === 1 ? "the marked field" : `${fields.size} fields`}.`], ...record].join(" ");
+	return [...fields.size === 0 ? [] : [fields.size === 1 ? text("checkField") : text("checkFields", fields.size)], ...record].join(" ");
 };
 //#endregion
 export { fieldErrors, fieldMessage, saveFailureDescription };

package/dist/app/field-messages.js

@@ -0,0 +1,48 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app/field-messages.ts
+const text = defineMessages({
+	en: {
+		atLeastCharacters: (label, count, n) => `${label} needs at least ${count} character${n === 1 ? "" : "s"}`,
+		atMostCharacters: (label, count, n) => `${label} can have at most ${count} character${n === 1 ? "" : "s"}`,
+		wholeNumberAtLeast: (min) => `Enter a whole number of at least ${min}`,
+		wholeNumberAtMost: (max) => `Enter a whole number of at most ${max}`,
+		wholeNumber: "Enter a whole number",
+		number: "Enter a number",
+		wholeNumberBelow: (below) => `Enter a whole number below ${below}`,
+		decimalsBelow: (scale, below) => `Enter a number with at most ${scale} decimal${scale === 1 ? "" : "s"}, below ${below}`,
+		date: "Enter a date",
+		timestamp: "Enter a date and time",
+		country: "Enter a two-letter country code, such as NL",
+		currency: "Enter a three-letter currency code, such as EUR",
+		uuid: "Enter a valid ID",
+		enum: "Choose one of the options",
+		relation: "Choose a record",
+		json: "Enter valid JSON",
+		required: (label) => `${label} is required`,
+		checkField: "Check the marked field.",
+		checkFields: (count) => `Check ${count} fields.`
+	},
+	nl: {
+		atLeastCharacters: (label, count, n) => `${label} moet minstens ${count} ${n === 1 ? "teken" : "tekens"} hebben`,
+		atMostCharacters: (label, count, n) => `${label} mag hoogstens ${count} ${n === 1 ? "teken" : "tekens"} hebben`,
+		wholeNumberAtLeast: (min) => `Vul een geheel getal in van minstens ${min}`,
+		wholeNumberAtMost: (max) => `Vul een geheel getal in van hoogstens ${max}`,
+		wholeNumber: "Vul een geheel getal in",
+		number: "Vul een getal in",
+		wholeNumberBelow: (below) => `Vul een geheel getal in onder ${below}`,
+		decimalsBelow: (scale, below) => `Vul een getal in met hoogstens ${scale} ${scale === 1 ? "decimaal" : "decimalen"}, onder ${below}`,
+		date: "Vul een datum in",
+		timestamp: "Vul een datum en tijd in",
+		country: "Vul een landcode van twee letters in, zoals NL",
+		currency: "Vul een valutacode van drie letters in, zoals EUR",
+		uuid: "Vul een geldig ID in",
+		enum: "Kies een van de opties",
+		relation: "Kies een record",
+		json: "Vul geldige JSON in",
+		required: (label) => `${label} is verplicht`,
+		checkField: "Controleer het gemarkeerde veld.",
+		checkFields: (count) => `Controleer ${count} velden.`
+	}
+});
+//#endregion
+export { text };

package/dist/app/hand-order/hand-sorted-list.js

@@ -9,9 +9,10 @@ import { ErrorBanner } from "../error-banner.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { embeddedColumns } from "../embedded-list/embedded-columns.js";
+import { text } from "./messages.js";
 import { useHandOrder } from "./use-hand-order.js";
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/hand-order/hand-sorted-list.tsx
 /**
 * The records in their order by hand, in the list's table with a drag handle in each row's checkbox place: dragging a
@@ -59,22 +60,16 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
 	});
 	if (order.error) return /* @__PURE__ */ jsx(ErrorBanner, {
-		title: "Could not load",
+		title: text("couldNotLoad"),
 		error: order.error
 	});
-	if (order.more) return /* @__PURE__ */ jsxs("p", {
+	if (order.more) return /* @__PURE__ */ jsx("p", {
 		className: "text-muted-foreground",
-		children: [
-			"There are more than ",
-			500 .toLocaleString(formatTag()),
-			" ",
-			plural,
-			", too many to sort by hand."
-		]
+		children: text("tooMany", 500 .toLocaleString(formatTag()), plural)
 	});
 	if (!source || source.total === 0) return /* @__PURE__ */ jsx("p", {
 		className: "text-muted-foreground",
-		children: "Nothing here yet."
+		children: text("nothingYet")
 	});
 	const openRecord = (row) => go({
 		kind: "record",

package/dist/app/hand-order/messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/hand-order/messages.ts
+const text = defineMessages({
+	en: {
+		done: "Done",
+		sort: "Sort",
+		couldNotLoad: "Could not load",
+		tooMany: (limit, plural) => `There are more than ${limit} ${plural}, too many to sort by hand.`,
+		nothingYet: "Nothing here yet.",
+		couldNotChange: "Could not change the order"
+	},
+	nl: {
+		done: "Klaar",
+		sort: "Sorteren",
+		couldNotLoad: "Kon niet laden",
+		tooMany: (limit, plural) => `Er zijn meer dan ${limit} ${plural}, te veel om met de hand te sorteren.`,
+		nothingYet: "Hier staat nog niets.",
+		couldNotChange: "Kon de volgorde niet wijzigen"
+	}
+});
+//#endregion
+export { text };

package/dist/app/hand-order/sort-button.js

@@ -1,10 +1,11 @@
 import { Button } from "../../primitives/button.js";
+import { text } from "./messages.js";
 import { ArrowUpDown, Check } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/hand-order/sort-button.tsx
 /** The button that turns sorting by hand on, as **Sort**, and off again, as **Done**; with `iconOnly` its icon alone. */
 const SortButton = ({ sorting, onChange, size, iconOnly = false }) => {
-	const label = sorting ? "Done" : "Sort";
+	const label = sorting ? text("done") : text("sort");
 	return /* @__PURE__ */ jsxs(Button, {
 		size,
 		variant: sorting ? "primary" : "secondary",

package/dist/app/hand-order/use-hand-order.js

@@ -6,6 +6,7 @@ import { refusalReason } from "../displays/board-columns.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
+import { text } from "./messages.js";
 import { useRef, useState } from "react";
 import { encodeKey } from "@protobase/schema/internal";
 import { useQuery } from "@tanstack/react-query";
@@ -73,7 +74,7 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		setMoved(void 0);
 		toast.show({
 			state: "error",
-			title: "Could not change the order",
+			title: text("couldNotChange"),
 			description: refusalReason(error)
 		});
 	};

package/dist/app/incoming-card.js

@@ -3,6 +3,7 @@ import { formatInt } from "../format/number.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
 import { useAdminMeta } from "./meta-gate.js";
 import { AppLink } from "./use-app-address.js";
+import { text } from "./record-messages.js";
 import { incomingAddress, incomingRelations } from "./incoming-relations.js";
 import { useIncomingCounts } from "./use-incoming-counts.js";
 import { ChevronRight } from "lucide-react";
@@ -14,7 +15,7 @@ const IncomingCard = ({ model, recordKey, layout, lines }) => {
 	const counts = useIncomingCounts(incomingRelations(model, resources, views, layout, lines), resources, recordKey);
 	if (counts.length === 0) return null;
 	return /* @__PURE__ */ jsx(SidebarCard, {
-		title: "Related records",
+		title: text("relatedRecords"),
 		children: /* @__PURE__ */ jsx("ul", {
 			className: "-mx-2",
 			children: counts.map(({ relation, count }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {

package/dist/app/list-edit/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/list-edit/messages.ts
+const text = defineMessages({
+	en: {
+		changedBySomeoneElse: "Changed by someone else",
+		couldNotSave: "Could not save"
+	},
+	nl: {
+		changedBySomeoneElse: "Gewijzigd door iemand anders",
+		couldNotSave: "Kon niet bewaren"
+	}
+});
+//#endregion
+export { text };

package/dist/app/list-edit/use-list-edits.js

@@ -2,6 +2,7 @@ import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
+import { text } from "./messages.js";
 import { useRef, useState } from "react";
 import { isApiError } from "@protobase/client";
 import { encodeKey } from "@protobase/schema/internal";
@@ -54,7 +55,7 @@ const useListEdits = (model) => {
 			const reason = error.errors.find((entry) => entry.field === name)?.message ?? error.message;
 			toast.show({
 				state: "error",
-				title: changed ? "Changed by someone else" : "Could not save",
+				title: changed ? text("changedBySomeoneElse") : text("couldNotSave"),
 				description: reason
 			});
 		}

package/dist/app/list-empty-state.js

@@ -1,27 +1,27 @@
+import { text } from "./list-messages.js";
 //#region src/app/list-empty-state.ts
 /** Why a list has no rows, and the buttons that help: clear the search, clear the filters, or create the first record. */
 const listEmptyState = ({ plural, search, filtered, scoped, canCreate }) => {
-	const noun = plural.toLowerCase();
 	if (search) return {
-		message: `No ${noun} match “${search}”.`,
+		message: text("noMatchSearch", plural, search),
 		clearSearch: true,
 		clearFilters: filtered,
 		create: false
 	};
 	if (filtered) return {
-		message: `No ${noun} match these filters.`,
+		message: text("noMatchFilters", plural),
 		clearSearch: false,
 		clearFilters: true,
 		create: false
 	};
 	if (scoped) return {
-		message: `No ${noun} match.`,
+		message: text("noMatch", plural),
 		clearSearch: false,
 		clearFilters: false,
 		create: false
 	};
 	return {
-		message: `No ${noun} yet.`,
+		message: text("noneYet", plural),
 		clearSearch: false,
 		clearFilters: false,
 		create: canCreate

package/dist/app/list-empty.js

@@ -1,4 +1,5 @@
 import { Button } from "../primitives/button.js";
+import { text } from "./list-messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/list-empty.tsx
 /** A list without rows: why (see `listEmptyState`), with buttons to clear its search or filters, or its New button. */
@@ -9,11 +10,11 @@ const ListEmpty = ({ state, onClearSearch, onClearFilters, create }) => /* @__PU
 		children: [
 			state.clearSearch && /* @__PURE__ */ jsx(Button, {
 				onClick: onClearSearch,
-				children: "Clear search"
+				children: text("clearSearch")
 			}),
 			state.clearFilters && /* @__PURE__ */ jsx(Button, {
 				onClick: onClearFilters,
-				children: "Clear filters"
+				children: text("clearFilters")
 			}),
 			state.create && create
 		]

package/dist/app/list-messages.js

@@ -0,0 +1,54 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app/list-messages.ts
+const text = defineMessages({
+	en: {
+		noList: (name) => `There is no list called ${name}.`,
+		searchPlural: (plural) => `Search ${plural.toLowerCase()}`,
+		search: "Search",
+		sort: "Sort",
+		filters: "Filters",
+		filtersCount: (count) => `Filters (${count})`,
+		newRecord: (singular) => `New ${singular.toLowerCase()}`,
+		export: "Export",
+		openRecord: (singular) => `Open ${singular.toLowerCase()}`,
+		delete: "Delete",
+		exportCount: (count) => `Export ${count}`,
+		deleteCount: (count) => `Delete ${count}`,
+		dragToSort: "Drag a row by its handle to move it. Every move is saved as you drop it.",
+		unreadableFilter: "The filter in the address could not be read",
+		couldNotLoadRows: "Could not load rows",
+		created: (plural) => `${plural} created`,
+		noMatchSearch: (plural, search) => `No ${plural.toLowerCase()} match “${search}”.`,
+		noMatchFilters: (plural) => `No ${plural.toLowerCase()} match these filters.`,
+		noMatch: (plural) => `No ${plural.toLowerCase()} match.`,
+		noneYet: (plural) => `No ${plural.toLowerCase()} yet.`,
+		clearSearch: "Clear search",
+		clearFilters: "Clear filters"
+	},
+	nl: {
+		noList: (name) => `Er is geen lijst met de naam ${name}.`,
+		searchPlural: (plural) => `Zoeken in ${plural.toLowerCase()}`,
+		search: "Zoeken",
+		sort: "Sorteren",
+		filters: "Filters",
+		filtersCount: (count) => `Filters (${count})`,
+		newRecord: (singular) => `${singular} toevoegen`,
+		export: "Exporteren",
+		openRecord: (singular) => `${singular} openen`,
+		delete: "Verwijderen",
+		exportCount: (count) => `${count} exporteren`,
+		deleteCount: (count) => `${count} verwijderen`,
+		dragToSort: "Sleep een rij aan de greep om hem te verplaatsen. Elke verplaatsing wordt bewaard zodra je loslaat.",
+		unreadableFilter: "Het filter in het adres kon niet worden gelezen",
+		couldNotLoadRows: "Kon de rijen niet laden",
+		created: (plural) => `${plural} aangemaakt`,
+		noMatchSearch: (plural, search) => `Geen ${plural.toLowerCase()} gevonden voor “${search}”.`,
+		noMatchFilters: (plural) => `Geen ${plural.toLowerCase()} gevonden met deze filters.`,
+		noMatch: (plural) => `Geen ${plural.toLowerCase()} gevonden.`,
+		noneYet: (plural) => `Nog geen ${plural.toLowerCase()}.`,
+		clearSearch: "Zoekopdracht wissen",
+		clearFilters: "Filters wissen"
+	}
+});
+//#endregion
+export { text };

package/dist/app/list-page.js

@@ -12,6 +12,7 @@ import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
+import { text } from "./messages.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { Sheet } from "../primitives/sheet.js";
@@ -46,6 +47,7 @@ import { createOffered } from "./create/create-offered.js";
 import { ImportButton } from "./import/import-button.js";
 import { exportOffered, exportsSelection } from "./export/export-options.js";
 import { useExportFlow } from "./export/use-export-flow.js";
+import { text as text$1 } from "./list-messages.js";
 import { ListEmpty } from "./list-empty.js";
 import { listEmptyState } from "./list-empty-state.js";
 import { ListCards } from "./displays/list-cards.js";
@@ -81,22 +83,14 @@ const ListPage = ({ address }) => {
 	if (!model) return prompt ? /* @__PURE__ */ jsx(SignInPrompt, {
 		as: "page",
 		prompt: prompt.signIn
-	}) : /* @__PURE__ */ jsxs(Notice, {
-		title: "Not found",
-		children: [
-			"There is no resource called ",
-			address.resource,
-			"."
-		]
+	}) : /* @__PURE__ */ jsx(Notice, {
+		title: text("notFound"),
+		children: text("noResource", address.resource)
 	});
 	const view = viewOfList(views[address.resource], address.list);
-	if (address.list !== void 0 && !view) return /* @__PURE__ */ jsxs(Notice, {
-		title: "Not found",
-		children: [
-			"There is no list called ",
-			address.list,
-			"."
-		]
+	if (address.list !== void 0 && !view) return /* @__PURE__ */ jsx(Notice, {
+		title: text("notFound"),
+		children: text$1("noList", address.list)
 	});
 	if (view?.searchesOf) return /* @__PURE__ */ jsx(SavedSearches, {
 		model,
@@ -225,7 +219,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const searchBox = model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
 		value: search?.kind === "search" ? search.text : "",
 		onCommit: commitSearch,
-		placeholder: `Search ${plural.toLowerCase()}`,
+		placeholder: text$1("searchPlural", plural),
 		className: desktop ? void 0 : "min-h-11"
 	}) : null;
 	const panel = /* @__PURE__ */ jsx(FilterPanel, {
@@ -248,7 +242,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		onClear: () => setFilter(emptyFilterState)
 	});
 	const phoneSort = sorted && /* @__PURE__ */ jsx(FilterSection, {
-		title: "Sort",
+		title: text$1("sort"),
 		children: /* @__PURE__ */ jsx(SortMenu, {
 			model,
 			view,
@@ -267,11 +261,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 					className: "min-h-11",
 					onClick: () => setSheetOpen(true),
 					"aria-haspopup": "dialog",
-					children: [
-						/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }),
-						"Filters",
-						chips.length > 0 && ` (${chips.length})`
-					]
+					children: [/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }), chips.length > 0 ? text$1("filtersCount", chips.length) : text$1("filters")]
 				}), searchBox ?? /* @__PURE__ */ jsx("div", {
 					className: "min-w-0 flex-1",
 					children: chipsRow
@@ -279,7 +269,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			}),
 			searchBox && chipsRow,
 			/* @__PURE__ */ jsx(Sheet, {
-				title: "Filters",
+				title: text$1("filters"),
 				open: sheetOpen,
 				onClose: () => setSheetOpen(false),
 				children: /* @__PURE__ */ jsx(FilterPanel, {
@@ -299,11 +289,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			resource
 		},
 		className: buttonClass({ variant: "primary" }),
-		children: [
-			/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-			"New ",
-			singular.toLowerCase()
-		]
+		children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), text$1("newRecord", singular)]
 	});
 	const saveSearch = view?.saveSearch && !scope && parsed.ok && filterText && /* @__PURE__ */ jsx(SaveSearchButton, {
 		model,
@@ -325,10 +311,10 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const exportButton = exportOffered(view) && /* @__PURE__ */ jsxs(Button, {
 		onClick: () => exportFlow.open(),
 		...!desktop && {
-			"aria-label": "Export",
-			title: "Export"
+			"aria-label": text$1("export"),
+			title: text$1("export")
 		},
-		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && "Export"]
+		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && text$1("export")]
 	});
 	const sortButton = handOrder && /* @__PURE__ */ jsx(SortButton, {
 		sorting: handSorting,
@@ -371,19 +357,19 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		initialScrollIndex: scroll.initialIndex,
 		onScrollIndex: scroll.remember,
 		rowActions: [{
-			label: `Open ${singular.toLowerCase()}`,
+			label: text$1("openRecord", singular),
 			onSelect: openRecord
 		}, ...can(permissions, "delete") ? [{
-			label: "Delete",
+			label: text$1("delete"),
 			destructive: true,
 			available: (row) => rowAllows(row, "delete"),
 			onSelect: (row) => void remove.start(target(row))
 		}] : []],
 		bulkActions: [...exportOffered(view) && exportsSelection(model) ? [{
-			label: (count) => `Export ${count}`,
+			label: (count) => text$1("exportCount", count),
 			onRun: (rows) => exportFlow.open(rows)
 		}] : [], ...can(permissions, "delete") ? [{
-			label: (count) => `Delete ${count}`,
+			label: (count) => text$1("deleteCount", count),
 			destructive: true,
 			onRun: (rows) => remove.startBulk(rows.map(target))
 		}] : []],
@@ -465,7 +451,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		className: "flex flex-col gap-3",
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground",
-			children: "Drag a row by its handle to move it. Every move is saved as you drop it."
+			children: text$1("dragToSort")
 		}), /* @__PURE__ */ jsx(HandSortedList, {
 			model,
 			view,
@@ -499,11 +485,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				] })
 			}),
 			!parsed.ok && /* @__PURE__ */ jsx(ErrorBanner, {
-				title: "The filter in the address could not be read",
+				title: text$1("unreadableFilter"),
 				error: new Error(parsed.errors.map((error) => error.message).join("; "))
 			}),
 			rows.error && !display && !handSorting && /* @__PURE__ */ jsx(ErrorBanner, {
-				title: "Could not load rows",
+				title: text$1("couldNotLoadRows"),
 				error: rows.error
 			}),
 			view?.chart && !handSorting && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
@@ -515,7 +501,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			}) : /* @__PURE__ */ jsx(ListChart, {
 				resource,
 				chart: view.chart,
-				title: `${plural} created`,
+				title: text$1("created", plural),
 				noun: plural.toLowerCase(),
 				filter: loadFilter
 			})),

package/dist/app/list-search.js

@@ -1,19 +1,20 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
+import { text } from "./list-messages.js";
 import { useEffect, useState } from "react";
 import { Search } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/list-search.tsx
 /** A search box that commits after a short pause or on Enter; `className` goes on its frame. */
 const ListSearch = ({ value, onCommit, placeholder, className }) => {
-	const [text, setText] = useState(value);
+	const [text$1, setText] = useState(value);
 	useEffect(() => setText(value), [value]);
 	useEffect(() => {
-		if (text === value) return;
-		const timer = setTimeout(() => onCommit(text), 350);
+		if (text$1 === value) return;
+		const timer = setTimeout(() => onCommit(text$1), 350);
 		return () => clearTimeout(timer);
 	}, [
-		text,
+		text$1,
 		value,
 		onCommit
 	]);
@@ -21,10 +22,10 @@ const ListSearch = ({ value, onCommit, placeholder, className }) => {
 		wrapperClassName: cn("min-w-0 flex-1 sm:w-72 sm:flex-initial", className),
 		leading: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
 		placeholder,
-		"aria-label": "Search",
-		value: text,
+		"aria-label": text("search"),
+		value: text$1,
 		onChange: (event) => setText(event.target.value),
-		onKeyDown: (event) => event.key === "Enter" && onCommit(text)
+		onKeyDown: (event) => event.key === "Enter" && onCommit(text$1)
 	});
 };
 //#endregion

package/dist/app/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app/messages.ts
+const text = defineMessages({
+	en: {
+		notFound: "Not found",
+		noResource: (name) => `There is no resource called ${name}.`,
+		somethingWentWrong: "Something went wrong"
+	},
+	nl: {
+		notFound: "Niet gevonden",
+		noResource: (name) => `Er is geen onderdeel met de naam ${name}.`,
+		somethingWentWrong: "Er ging iets mis"
+	}
+});
+//#endregion
+export { text };

package/dist/app/pages/record-actions.js

@@ -5,6 +5,7 @@ import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ActionMenu } from "../../record-view/action-menu.js";
 import { ActionPrompt, asksFirst } from "./action-prompt.js";
 import { useActionRunner } from "./use-run-action.js";
+import { text } from "../record-messages.js";
 import { actionIcon } from "../action-icon.js";
 import { useState } from "react";
 import { Pencil, Trash2 } from "lucide-react";
@@ -43,7 +44,7 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 	const deletes = runner.actions.some((action) => action.run?.kind === "delete");
 	const actions = [
 		...edit ? [{
-			name: "Edit",
+			name: text("edit"),
 			icon: Pencil,
 			render: ({ className, children, role }) => /* @__PURE__ */ jsx(AppLink, {
 				to: edit,
@@ -54,7 +55,7 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		}] : [],
 		...named,
 		...onDelete && !deletes ? [{
-			name: "Delete",
+			name: text("delete"),
 			icon: Trash2,
 			tone: "danger",
 			onRun: onDelete
@@ -68,7 +69,7 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		}),
 		slot && createPortal(/* @__PURE__ */ jsx(ActionMenu, {
 			actions,
-			label: "Record actions",
+			label: text("recordActions"),
 			className: "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden"
 		}), slot),
 		asking && /* @__PURE__ */ jsx(ActionPrompt, {