@protobase/ui 0.25.2 → 0.25.4

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

@@ -2,6 +2,7 @@ import { Skeleton } from "../../primitives/skeleton.js";
 import { dayIn, viewerZone } from "../../format/zone.js";
 import { formatDate } from "../../format/date.js";
 import { humanize } from "../../live/naming.js";
+import { text } from "./messages.js";
 import { usePermissions } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
 import { can, rowAllows } from "../permissions.js";
@@ -17,18 +18,18 @@ import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
 //#region src/app/displays/timeline-display.tsx
-const scales = [
+const scales = () => [
 	{
 		scale: "week",
-		label: "Week"
+		label: text("week")
 	},
 	{
 		scale: "month",
-		label: "Month"
+		label: text("month")
 	},
 	{
 		scale: "quarter",
-		label: "Quarter"
+		label: text("quarter")
 	}
 ];
 /**
@@ -90,11 +91,11 @@ const TimelineDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 	const title = (picked) => eventTitle(model, view, display, picked.row);
 	const startText = (picked) => formatDate(Date.parse(`${addDays(picked.day, shift.current)}T00:00:00Z`));
 	const announcements = {
-		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current)}.`,
-		onDragMove: ({ active: picked }) => `${title(picked.data.current)} starts on ${startText(picked.data.current)}.`,
+		onDragStart: ({ active: picked }) => text("pickedUp", title(picked.data.current)),
+		onDragMove: ({ active: picked }) => text("startsOn", title(picked.data.current), startText(picked.data.current)),
 		onDragOver: () => void 0,
-		onDragEnd: ({ active: picked }) => shift.current === 0 ? `${title(picked.data.current)} was put back.` : `${title(picked.data.current)} was moved to ${startText(picked.data.current)}.`,
-		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current)} was cancelled.`
+		onDragEnd: ({ active: picked }) => shift.current === 0 ? text("putBack", title(picked.data.current)) : text("wasMovedTo", title(picked.data.current), startText(picked.data.current)),
+		onDragCancel: ({ active: picked }) => text("cancelled", title(picked.data.current))
 	};
 	const release = () => {
 		setActive(void 0);
@@ -127,28 +128,22 @@ const TimelineDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 					day: today
 				}, now),
 				next: stepTimeline(shown, 1),
-				scales: scales.map(({ scale, label }) => ({
+				scales: scales().map(({ scale, label }) => ({
 					view: scaledTimeline(shown, scale, now),
 					label,
 					current: shown.scale === scale
 				})),
-				scalesLabel: "Timeline scale",
+				scalesLabel: text("timelineScale"),
 				linkTo,
 				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,
@@ -159,7 +154,7 @@ const TimelineDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 				onDragCancel: release,
 				accessibility: {
 					announcements,
-					screenReaderInstructions: { draggable: "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." }
+					screenReaderInstructions: { draggable: text("timelineInstructions") }
 				},
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "overflow-hidden rounded-lg border border-border",
@@ -181,13 +176,9 @@ const TimelineDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 								className: "relative flex flex-col gap-2 p-2",
 								children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4" })]
 							}),
-							empty && /* @__PURE__ */ jsxs("p", {
+							empty && /* @__PURE__ */ jsx("p", {
 								className: "relative px-2 py-3 text-xs text-muted-foreground",
-								children: [
-									"Nothing in this ",
-									shown.scale,
-									"."
-								]
+								children: text("nothingIn", shown.scale)
 							}),
 							!list.loading && lanes.map((lane) => /* @__PURE__ */ jsxs("section", {
 								"aria-label": lane.label,

package/dist/app/displays/timeline-range.js

@@ -2,6 +2,7 @@ import { dayIn, viewerZone } from "../../format/zone.js";
 import { formatDayRange, formatMonth, formatMonthName, formatMonthRange, formatWeekday } from "../../format/date.js";
 import { humanize } from "../../live/naming.js";
 import { displayValue } from "../../live/display-value.js";
+import { text } from "./messages.js";
 import { addDays, monday, monthOf, recordDays } from "./calendar-range.js";
 //#region src/app/displays/timeline-range.ts
 const dayMs = 864e5;
@@ -114,7 +115,7 @@ const timelineLanes = (rows, model, view, display) => {
 		const value = row.record[group];
 		const empty = value === null || value === void 0 || value === "";
 		const key = empty ? noValue : `value:${String(value)}`;
-		const label = empty ? `No ${(hints?.label ?? humanize(group)).toLowerCase()}` : row.labels[group] ?? displayValue(field, value, hints);
+		const label = empty ? text("noValue", hints?.label ?? humanize(group)) : row.labels[group] ?? displayValue(field, value, hints);
 		const known = lanes.get(key) ?? {
 			value: empty ? void 0 : value,
 			lane: {

package/dist/app/displays/timeline-row.js

@@ -14,7 +14,7 @@ const TimelineRow = ({ model, view, display, row, days, movable, dragged }) => {
 		className: cn(timelineGrid, "relative border-b border-border last:border-b-0"),
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: "truncate px-2 pt-1 text-xs sm:py-1.5",
+			className: "truncate px-2 pt-1 text-body sm:py-1.5",
 			children: eventTitle(model, view, display, row)
 		}), /* @__PURE__ */ jsx("div", {
 			className: "relative h-7",

package/dist/app/displays/use-board-move.js

@@ -1,8 +1,8 @@
 import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
-import { refusalReason } from "./board-columns.js";
 import { text } from "./messages.js";
+import { refusalReason } from "./board-columns.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { dropWrite } from "./board-drop.js";
 import { boardWrites, placeOps } from "./board-place.js";
@@ -115,7 +115,7 @@ const useBoardMove = ({ model, by, rank, drop, labelOf }) => {
 		},
 		onError: (error, { row, to }) => {
 			settle(row.key);
-			const title = (row.record[by] ?? null) === to.value ? "Could not change the order" : `Could not move it to ${to.label}`;
+			const title = (row.record[by] ?? null) === to.value ? text("couldNotReorder") : text("couldNotMoveTo", to.label);
 			toast.show({
 				state: "error",
 				title,

package/dist/app/displays/use-calendar-move.js

@@ -2,6 +2,7 @@ import { formatDate } from "../../format/date.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 { refusalReason } from "./board-columns.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { movedPatch } from "./calendar-range.js";
@@ -44,7 +45,7 @@ const useCalendarMove = (model, display) => {
 			settle(row.key);
 			toast.show({
 				state: "error",
-				title: `Could not move it to ${formatDate(Date.parse(`${to}T00:00:00Z`))}`,
+				title: text("couldNotMoveTo", formatDate(Date.parse(`${to}T00:00:00Z`))),
 				description: refusalReason(error)
 			});
 		},

package/dist/app/document-title.js

@@ -1,3 +1,4 @@
+import { text } from "./create/messages.js";
 import { useEffect } from "react";
 //#region src/app/document-title.ts
 /** What a tab names, most specific first: the record and its list, the new record and its list, the list, or the page. */
@@ -7,7 +8,7 @@ const titleParts = ({ address, page, accountPage, resourceLabel, singular, recor
 	if (!address || address.kind === "page") return [];
 	const list = resourceLabel ? [resourceLabel] : [];
 	if (address.kind === "list") return list;
-	if (address.kind === "create") return [...singular ? [`New ${singular.toLowerCase()}`] : [], ...list];
+	if (address.kind === "create") return [...singular ? [text("title", singular)] : [], ...list];
 	const record = recordTitle ?? (recordLoading ? void 0 : address.key);
 	return [...record ? [record] : [], ...list];
 };

package/dist/app/error-banner.js

@@ -18,7 +18,7 @@ const ErrorBanner = ({ error, title }) => /* @__PURE__ */ jsxs("div", {
 		className: "font-medium",
 		children: title
 	}), describe(error).map((detail) => /* @__PURE__ */ jsxs("p", {
-		className: "text-xs",
+		className: "text-body",
 		children: [detail.message, detail.hint && /* @__PURE__ */ jsxs("span", {
 			className: "text-muted-foreground",
 			children: [" ", detail.hint]

package/dist/app/export/builder-port.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { createExportBuilder } from "./builder.js";
 //#region src/app/export/builder-port.ts
 const joined = (chunks) => {
@@ -36,7 +37,7 @@ const createWorkerPort = () => {
 	worker.onmessage = (event) => waiting.shift()?.resolve(event.data.bytes);
 	worker.onerror = (event) => {
 		event.preventDefault();
-		const error = /* @__PURE__ */ new Error(`The export could not be built: ${event.message}`);
+		const error = new Error(text("couldNotBuild", event.message));
 		for (const entry of waiting.splice(0)) entry.reject(error);
 	};
 	return {

package/dist/app/export/export-dialog.js

@@ -3,33 +3,34 @@ import { formatApproxRows, formatInt } from "../../format/number.js";
 import { Button } from "../../primitives/button.js";
 import { Checkbox } from "../../primitives/checkbox.js";
 import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { text } from "./messages.js";
 import { exportLimit } from "./export-options.js";
 import { useState } from "react";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/export/export-dialog.tsx
-const formatOptions = [{
+const formatOptions = () => [{
 	value: "xlsx",
-	label: "Excel (.xlsx)"
+	label: text("excel")
 }, {
 	value: "csv",
-	label: "CSV"
+	label: text("csv")
 }];
-const modeOptions = [{
+const modeOptions = () => [{
 	value: "shown",
-	label: "As shown"
+	label: text("asShown")
 }, {
 	value: "raw",
-	label: "Raw values"
+	label: text("rawValues")
 }];
 const modeHelp = {
-	shown: "Labels, dates and numbers as the list shows them.",
-	raw: "Values as they are stored, such as keys and codes."
+	shown: "shownHint",
+	raw: "rawHint"
 };
 const countText = (count) => {
-	if (count.kind === "counting") return "Counting rows…";
+	if (count.kind === "counting") return text("counting");
 	if (count.kind === "exact") return formatApproxRows(count.rows);
-	return count.rows > 1e4 ? formatApproxRows(count.rows) : "more than 10,000 rows";
+	return count.rows > 1e4 ? formatApproxRows(count.rows) : text("moreThan");
 };
 /** The fewest rows the list finds, as far as the count tells: an estimate stands only above 10,000. */
 const countedRows = (count) => {
@@ -40,7 +41,7 @@ const Setting = ({ label, help, children }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex flex-col items-start gap-1.5",
 	children: [
 		/* @__PURE__ */ jsx("span", {
-			className: "text-[13px] font-medium",
+			className: "text-body font-medium",
 			children: label
 		}),
 		children,
@@ -66,7 +67,7 @@ const ColumnPicker = ({ fields, columns, onChange }) => {
 	const ordered = [...columns, ...fields.map((field) => field.name).filter((name) => !columns.includes(name))];
 	return /* @__PURE__ */ jsx("ul", {
 		className: "divide-y self-stretch rounded-md border",
-		"aria-label": "Columns",
+		"aria-label": text("columns"),
 		children: ordered.map((name) => {
 			const chosen = columns.includes(name);
 			const index = columns.indexOf(name);
@@ -88,7 +89,7 @@ const ColumnPicker = ({ fields, columns, onChange }) => {
 						size: "sm",
 						variant: "ghost",
 						className: "min-h-8 px-2",
-						"aria-label": `Move ${labels[name]} up`,
+						"aria-label": text("moveUp", labels[name]),
 						disabled: index === 0,
 						onClick: () => onChange(move(columns, name, -1)),
 						children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" })
@@ -96,7 +97,7 @@ const ColumnPicker = ({ fields, columns, onChange }) => {
 						size: "sm",
 						variant: "ghost",
 						className: "min-h-8 px-2",
-						"aria-label": `Move ${labels[name]} down`,
+						"aria-label": text("moveDown", labels[name]),
 						disabled: index === columns.length - 1,
 						onClick: () => onChange(move(columns, name, 1)),
 						children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" })
@@ -116,22 +117,22 @@ const ExportDialog = ({ plural, view, fields, initialColumns, count, selected, o
 	const [columns, setColumns] = useState(initialColumns);
 	const [mode, setMode] = useState("shown");
 	const limit = exportLimit(view, format);
-	const rows = scope === "selected" ? `${formatInt(selected ?? 0)} selected ${selected === 1 ? "row" : "rows"}` : countText(count);
+	const rows = scope === "selected" ? text("selectedRows", formatInt(selected ?? 0), selected ?? 0) : countText(count);
 	const overLimit = (scope === "selected" ? selected ?? 0 : countedRows(count) ?? 0) > limit;
 	const scopeOptions = [{
 		value: "list",
-		label: "Rows in the list"
+		label: text("rowsInList")
 	}, {
 		value: "selected",
-		label: `Selected (${formatInt(selected ?? 0)})`
+		label: text("selected", formatInt(selected ?? 0))
 	}];
 	return /* @__PURE__ */ jsx(ResponsiveDialog, {
-		title: `Export ${plural.toLowerCase()}`,
+		title: text("exportPlural", plural),
 		open,
 		onClose,
 		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 			onClick: onClose,
-			children: "Cancel"
+			children: text("cancel")
 		}), /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			disabled: columns.length === 0,
@@ -141,45 +142,45 @@ const ExportDialog = ({ plural, view, fields, initialColumns, count, selected, o
 				columns,
 				mode
 			}),
-			children: "Export"
+			children: text("export")
 		})] }),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4 text-[13px]",
+			className: "flex flex-col gap-4 text-body",
 			children: [
 				/* @__PURE__ */ jsx(Setting, {
-					label: "Format",
+					label: text("format"),
 					children: /* @__PURE__ */ jsx(Segmented, {
 						size: "md",
-						label: "Format",
+						label: text("format"),
 						value: format,
-						options: formatOptions,
+						options: formatOptions(),
 						onChange: setFormat
 					})
 				}),
 				selected !== void 0 && selected > 0 && /* @__PURE__ */ jsx(Setting, {
-					label: "Rows",
-					help: scope === "list" ? "With the list’s filters, search and sort." : void 0,
+					label: text("rows"),
+					help: scope === "list" ? text("listHint") : void 0,
 					children: /* @__PURE__ */ jsx(Segmented, {
 						size: "md",
-						label: "Rows",
+						label: text("rows"),
 						value: scope,
 						options: scopeOptions,
 						onChange: setScope
 					})
 				}),
 				/* @__PURE__ */ jsx(Setting, {
-					label: "Values",
-					help: modeHelp[mode],
+					label: text("values"),
+					help: text(modeHelp[mode]),
 					children: /* @__PURE__ */ jsx(Segmented, {
 						size: "md",
-						label: "Values",
+						label: text("values"),
 						value: mode,
-						options: modeOptions,
+						options: modeOptions(),
 						onChange: setMode
 					})
 				}),
 				/* @__PURE__ */ jsx(Setting, {
-					label: "Columns",
+					label: text("columns"),
 					children: /* @__PURE__ */ jsx(ColumnPicker, {
 						fields,
 						columns,
@@ -189,12 +190,7 @@ const ExportDialog = ({ plural, view, fields, initialColumns, count, selected, o
 				/* @__PURE__ */ jsxs("p", {
 					role: "status",
 					className: "text-muted-foreground",
-					children: [
-						"Exports ",
-						rows,
-						".",
-						overLimit && ` A file holds at most ${formatInt(limit)} rows; the rest are left out.`
-					]
+					children: [text("exports", rows), overLimit && text("overLimit", formatInt(limit))]
 				})
 			]
 		})
@@ -204,18 +200,18 @@ const ExportDialog = ({ plural, view, fields, initialColumns, count, selected, o
 const ExportProgressDialog = ({ plural, done, total, onCancel }) => {
 	const share = total ? Math.min(1, done / total) : void 0;
 	return /* @__PURE__ */ jsx(ResponsiveDialog, {
-		title: `Exporting ${plural.toLowerCase()}`,
+		title: text("exporting", plural),
 		open: true,
 		onClose: onCancel,
 		actions: /* @__PURE__ */ jsx(Button, {
 			onClick: onCancel,
-			children: "Cancel"
+			children: text("cancel")
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2 text-[13px]",
+			className: "flex flex-col gap-2 text-body",
 			children: [/* @__PURE__ */ jsx("div", {
 				role: "progressbar",
-				"aria-label": "Rows exported",
+				"aria-label": text("rowsExported"),
 				"aria-valuemin": 0,
 				"aria-valuemax": total,
 				"aria-valuenow": done,
@@ -226,7 +222,7 @@ const ExportProgressDialog = ({ plural, done, total, onCancel }) => {
 				})
 			}), /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: total ? `${formatInt(done)} of ${formatInt(total)} rows` : `${formatInt(done)} rows`
+				children: total ? text("doneOf", formatInt(done), formatInt(total)) : text("done", formatInt(done))
 			})]
 		})
 	});

package/dist/app/export/export-worker.js

@@ -1,8 +1,10 @@
+import { setFallbackLocale } from "../../locale/active-locale.js";
 import { createBuilderHandler } from "./builder-port.js";
 //#region src/app/export/export-worker.ts
 const handle = createBuilderHandler();
 const scope = self;
 scope.onmessage = (event) => {
+	if (event.data.kind === "start") setFallbackLocale(event.data.locale);
 	const bytes = handle(event.data);
 	scope.postMessage({ bytes }, [bytes.buffer]);
 };

package/dist/app/export/messages.js

@@ -0,0 +1,78 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/export/messages.ts
+const text = defineMessages({
+	en: {
+		excel: "Excel (.xlsx)",
+		csv: "CSV",
+		asShown: "As shown",
+		rawValues: "Raw values",
+		shownHint: "Labels, dates and numbers as the list shows them.",
+		rawHint: "Values as they are stored, such as keys and codes.",
+		counting: "Counting rows…",
+		moreThan: "more than 10,000 rows",
+		columns: "Columns",
+		moveUp: (label) => `Move ${label} up`,
+		moveDown: (label) => `Move ${label} down`,
+		selectedRows: (count, rows) => `${count} selected ${rows === 1 ? "row" : "rows"}`,
+		rowsInList: "Rows in the list",
+		selected: (count) => `Selected (${count})`,
+		exportPlural: (plural) => `Export ${plural.toLowerCase()}`,
+		cancel: "Cancel",
+		export: "Export",
+		format: "Format",
+		rows: "Rows",
+		listHint: "With the list’s filters, search and sort.",
+		values: "Values",
+		exports: (rows) => `Exports ${rows}.`,
+		overLimit: (limit) => ` A file holds at most ${limit} rows; the rest are left out.`,
+		exporting: (plural) => `Exporting ${plural.toLowerCase()}`,
+		rowsExported: "Rows exported",
+		doneOf: (done, total) => `${done} of ${total} rows`,
+		done: (done) => `${done} rows`,
+		exported: (count, plural) => `Exported ${count} ${plural.toLowerCase()}`,
+		truncated: (name, count) => `${name}: the first ${count} rows, as many as a file holds.`,
+		couldNotExport: (plural) => `Could not export ${plural.toLowerCase()}`,
+		cancelled: "The export was cancelled",
+		couldNotBuild: (message) => `The export could not be built: ${message}`,
+		workbook: "Excel workbook",
+		csvFile: "CSV file"
+	},
+	nl: {
+		excel: "Excel (.xlsx)",
+		csv: "CSV",
+		asShown: "Zoals getoond",
+		rawValues: "Ruwe waarden",
+		shownHint: "Labels, datums en getallen zoals de lijst ze toont.",
+		rawHint: "Waarden zoals ze zijn opgeslagen, zoals sleutels en codes.",
+		counting: "Rijen tellen…",
+		moreThan: "meer dan 10.000 rijen",
+		columns: "Kolommen",
+		moveUp: (label) => `${label} omhoog`,
+		moveDown: (label) => `${label} omlaag`,
+		selectedRows: (count, rows) => `${count} geselecteerde ${rows === 1 ? "rij" : "rijen"}`,
+		rowsInList: "Rijen in de lijst",
+		selected: (count) => `Geselecteerd (${count})`,
+		exportPlural: (plural) => `${plural} exporteren`,
+		cancel: "Annuleren",
+		export: "Exporteren",
+		format: "Formaat",
+		rows: "Rijen",
+		listHint: "Met de filters, zoekopdracht en sortering van de lijst.",
+		values: "Waarden",
+		exports: (rows) => `Exporteert ${rows}.`,
+		overLimit: (limit) => ` Een bestand bevat hoogstens ${limit} rijen; de rest blijft weg.`,
+		exporting: (plural) => `${plural} exporteren`,
+		rowsExported: "Geëxporteerde rijen",
+		doneOf: (done, total) => `${done} van ${total} rijen`,
+		done: (done) => `${done} rijen`,
+		exported: (count, plural) => `${count} ${plural.toLowerCase()} geëxporteerd`,
+		truncated: (name, count) => `${name}: de eerste ${count} rijen, zoveel als een bestand bevat.`,
+		couldNotExport: (plural) => `Kon ${plural.toLowerCase()} niet exporteren`,
+		cancelled: "De export is geannuleerd",
+		couldNotBuild: (message) => `De export kon niet worden gemaakt: ${message}`,
+		workbook: "Excel-werkmap",
+		csvFile: "CSV-bestand"
+	}
+});
+//#endregion
+export { text };

package/dist/app/export/run-export.js

@@ -1,4 +1,6 @@
-const aborted = () => new DOMException("The export was cancelled", "AbortError");
+import { activeLocale } from "../../locale/active-locale.js";
+import { text } from "./messages.js";
+const aborted = () => new DOMException(text("cancelled"), "AbortError");
 /**
 * Reads the rows through the list API, page by page with its page tokens, and has the port build the file from each;
 * each piece is written to the sink as it is built, so only a page is held at a time. A cancel stops at the next page
@@ -10,7 +12,8 @@ const runExport = async ({ client, resource, filters, orderBy, plan, labels, lim
 	try {
 		await sink.write(await port.send({
 			kind: "start",
-			plan
+			plan,
+			locale: activeLocale()
 		}));
 		for (const [index, filter] of filters.entries()) {
 			let pageToken = "";

package/dist/app/export/sink.js

@@ -1,14 +1,15 @@
+import { text } from "./messages.js";
 //#region src/app/export/sink.ts
 const types = {
 	xlsx: {
 		mime: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
 		extension: ".xlsx",
-		description: "Excel workbook"
+		description: "workbook"
 	},
 	csv: {
 		mime: "text/csv",
 		extension: ".csv",
-		description: "CSV file"
+		description: "csvFile"
 	}
 };
 const unsafeName = /[\\/:*?"<>|\u0000-\u001f]/g;
@@ -70,7 +71,7 @@ const pickFileSink = async (name, format) => {
 		handle = await pick({
 			suggestedName: name,
 			types: [{
-				description: type.description,
+				description: text(type.description),
 				accept: { [type.mime]: [type.extension] }
 			}]
 		});

package/dist/app/export/use-export-flow.js

@@ -3,6 +3,7 @@ import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { listLabels } from "../../live/relation-labels.js";
+import { text } from "./messages.js";
 import { runExport } from "./run-export.js";
 import { defaultExportColumns, exportColumns, exportHeaders, exportLimit, exportableFields, exportsSelection, selectionFilters } from "./export-options.js";
 import { createWorkerPort } from "./builder-port.js";
@@ -90,15 +91,15 @@ const useExportFlow = ({ model, view, resources, views, plural, filter, orderBy,
 			});
 			toast.show({
 				state: "success",
-				title: `Exported ${formatInt(result.rows)} ${plural.toLowerCase()}`,
-				description: result.truncated ? `${name}: the first ${formatInt(result.rows)} rows, as many as a file holds.` : name
+				title: text("exported", formatInt(result.rows), plural),
+				description: result.truncated ? text("truncated", name, formatInt(result.rows)) : name
 			});
 		} catch (error) {
 			if (error instanceof DOMException && error.name === "AbortError") return;
 			if (!isApiError(error)) throw error;
 			toast.show({
 				state: "error",
-				title: `Could not export ${plural.toLowerCase()}`,
+				title: text("couldNotExport", plural),
 				description: error.message
 			});
 		} finally {

package/dist/app/field-editor.js

@@ -2,6 +2,7 @@ import { cn } from "../lib/cn.js";
 import { useFieldControl } from "../primitives/field-control.js";
 import { Input } from "../primitives/input.js";
 import { buttonClass } from "../primitives/button.js";
+import { text } from "./messages.js";
 import { humanize } from "../live/naming.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { contactFormat, contactInputProps } from "../live/contact-links.js";
@@ -64,8 +65,8 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 				children: picker
 			}), /* @__PURE__ */ jsx(AppLink, {
 				to: relationTo,
-				"aria-label": `Open ${relationLabel ?? String(value)}`,
-				title: "Open",
+				"aria-label": text("openLabel", relationLabel ?? String(value)),
+				title: text("open"),
 				className: cn(buttonClass({ variant: "ghost" }), "w-8 px-0"),
 				children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
 			})]
@@ -118,7 +119,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		className: "h-8 w-full rounded-md border border-border-strong bg-background px-2 shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
 		children: [value === "" && /* @__PURE__ */ jsx("option", {
 			value: "",
-			children: "Choose..."
+			children: text("choose")
 		}), (field.enumValues ?? []).map((option) => /* @__PURE__ */ jsx("option", {
 			value: option,
 			children: enumLabel(option, hints?.valueLabels)

package/dist/app/field-types/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/field-types/messages.ts
+const text = defineMessages({
+	en: { fieldType: (name) => `The field type ${name}` },
+	nl: { fieldType: (name) => `Het veldtype ${name}` }
+});
+//#endregion
+export { text };

package/dist/app/field-types/widget-part.js

@@ -1,4 +1,5 @@
 import { CustomBoundary } from "../pages/custom-boundary.js";
+import { text } from "./messages.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/field-types/widget-part.tsx
 const partOf = ({ shown, part, field, value, onChange, invalid = false }) => {
@@ -24,7 +25,7 @@ const WidgetPart = ({ fallback, ...rest }) => {
 	const element = partOf(rest);
 	if (!element) return fallback;
 	return /* @__PURE__ */ jsx(CustomBoundary, {
-		name: `The field type ${rest.shown.name}`,
+		name: text("fieldType", rest.shown.name),
 		fallback,
 		children: element
 	});