@protobase/ui 0.25.1 → 0.25.3

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) => {
@@ -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]",
 			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]",
 			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
 	});

package/dist/app/file-field.js

@@ -1,6 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
 import { useClient } from "../data/api-provider.js";
+import { text } from "./messages.js";
 import { humanize } from "../live/naming.js";
 import { acceptOf, fileShown, formatSize, isPreviewable, shownImage } from "../live/file-values.js";
 import { ErrorBanner } from "./error-banner.js";
@@ -32,7 +33,7 @@ const FileSummary = ({ value }) => {
 	});
 	if ("missing" in shown) return /* @__PURE__ */ jsx("div", {
 		className: "py-1.5 text-danger-text",
-		children: "The file is missing from storage"
+		children: text("fileMissing")
 	});
 	const url = "url" in shown ? shown.url : void 0;
 	const corrected = "corrected" in shown ? shown.corrected : void 0;
@@ -97,33 +98,29 @@ const FileField = ({ field, hints, resource, value, locked, invalid, onChange })
 		type: "file",
 		hidden: true,
 		accept: acceptOf(field),
-		"aria-label": `Choose a file for ${label}`,
+		"aria-label": text("chooseFileFor", label),
 		onChange: (event) => choose(event.target.files)
 	});
 	const error = upload.error && /* @__PURE__ */ jsx("div", {
 		className: "mt-2",
 		children: /* @__PURE__ */ jsx(ErrorBanner, {
-			title: "Not uploaded",
+			title: text("notUploaded"),
 			error: upload.error
 		})
 	});
 	if (upload.isPending) return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
 		role: "status",
-		"aria-label": `Uploading ${label}`,
+		"aria-label": text("uploadingLabel", label),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "h-1.5 overflow-hidden rounded-full bg-muted",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "h-full rounded-full bg-primary transition-[width]",
 				style: { width: `${Math.round((progress ?? 0) * 100)}%` }
 			})
-		}), /* @__PURE__ */ jsxs("span", {
+		}), /* @__PURE__ */ jsx("span", {
 			className: "text-xs text-muted-foreground",
-			children: [
-				"Uploading… ",
-				Math.round((progress ?? 0) * 100),
-				"%"
-			]
+			children: text("uploading", Math.round((progress ?? 0) * 100))
 		})]
 	});
 	if (fileShown(value)) return /* @__PURE__ */ jsxs("div", { children: [
@@ -137,13 +134,13 @@ const FileField = ({ field, hints, resource, value, locked, invalid, onChange })
 				/* @__PURE__ */ jsx(Button, {
 					size: "sm",
 					onClick: () => input.current?.click(),
-					children: "Replace"
+					children: text("replace")
 				}),
 				field.nullable && /* @__PURE__ */ jsx(Button, {
 					size: "sm",
 					variant: "ghost",
 					onClick: () => onChange(null),
-					children: "Remove"
+					children: text("remove")
 				})
 			]
 		}),
@@ -163,12 +160,12 @@ const FileField = ({ field, hints, resource, value, locked, invalid, onChange })
 				/* @__PURE__ */ jsx(Upload, { className: "size-4 shrink-0" }),
 				/* @__PURE__ */ jsx("span", {
 					className: "flex-1",
-					children: "Drop a file here or"
+					children: text("dropFile")
 				}),
 				/* @__PURE__ */ jsxs(Button, {
 					size: "sm",
 					onClick: () => input.current?.click(),
-					children: [/* @__PURE__ */ jsx(Paperclip, { className: "size-3.5" }), "Choose a file"]
+					children: [/* @__PURE__ */ jsx(Paperclip, { className: "size-3.5" }), text("chooseFile")]
 				})
 			]
 		}),

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

@@ -7,6 +7,7 @@ import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
 import { FileImage } from "../../live/file-image.js";
 import { galleryTiles } from "./gallery-layout.js";
+import { text } from "./messages.js";
 import { Lightbox } from "./lightbox.js";
 import { detailFields } from "./detail-fields.js";
 import { PhotoDetails } from "./photo-details.js";
@@ -63,7 +64,7 @@ const GallerySection = ({ item, record, recordKey }) => {
 	if (photos.error) return /* @__PURE__ */ jsx(Section, {
 		title: item.title,
 		children: /* @__PURE__ */ jsx(ErrorBanner, {
-			title: "Could not load the photos",
+			title: text("couldNotLoad"),
 			error: photos.error
 		})
 	});
@@ -91,7 +92,7 @@ const GallerySection = ({ item, record, recordKey }) => {
 				const last = index === shown - 1 && more > 0;
 				return /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					"aria-label": last ? `Show all ${count} photos` : `Show photo ${index + 1} of ${count}`,
+					"aria-label": last ? text("showAll", count) : text("showPhoto", index + 1, count),
 					onClick: () => setOpen(index),
 					className: cn("group/tile relative overflow-hidden bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", index === 0 ? "col-span-4 row-span-2" : "max-md:hidden", spans[shown][index]),
 					children: [
@@ -119,7 +120,7 @@ const GallerySection = ({ item, record, recordKey }) => {
 			onIndex: setOpen,
 			onClose: () => setOpen(void 0),
 			details,
-			detailsTitle: holder && `${holderView?.names?.singular ?? humanize(holder.name)} details`
+			detailsTitle: holder && text("holderDetails", holderView?.names?.singular ?? humanize(holder.name))
 		})]
 	});
 };

package/dist/app/gallery/lightbox.js

@@ -6,6 +6,7 @@ import { FileImage } from "../../live/file-image.js";
 import { Sheet } from "../../primitives/sheet.js";
 import { keyStep, steppedPhoto, swipeStep, togglesDetails } from "./gallery-layout.js";
 import { readDetailsOpen, writeDetailsOpen } from "./details-open-storage.js";
+import { text } from "./messages.js";
 import { useEffect, useId, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight, Info, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -18,7 +19,7 @@ const control = "flex size-10 shrink-0 items-center justify-center rounded-full
 * lower part of a mobile screen; this browser remembers whether they were left shown. The page does not scroll behind
 * it, and focus returns to what opened it.
 */
-const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitle = "Details" }) => {
+const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitle = text("details") }) => {
 	const panel = useRef(null);
 	const start = useRef(void 0);
 	const sidebarId = useId();
@@ -97,7 +98,7 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 						}), /* @__PURE__ */ jsx("button", {
 							type: "button",
 							className: control,
-							"aria-label": "Close",
+							"aria-label": text("close"),
 							onClick: onClose,
 							children: /* @__PURE__ */ jsx(X, {
 								className: "size-4",
@@ -116,7 +117,7 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 					}, image.url), count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
-						"aria-label": "Previous photo",
+						"aria-label": text("previousPhoto"),
 						"aria-disabled": index === 0,
 						onClick: () => step(-1),
 						children: /* @__PURE__ */ jsx(ChevronLeft, {
@@ -126,7 +127,7 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
-						"aria-label": "Next photo",
+						"aria-label": text("nextPhoto"),
 						"aria-disabled": index === count - 1,
 						onClick: () => step(1),
 						children: /* @__PURE__ */ jsx(ChevronRight, {

package/dist/app/gallery/messages.js

@@ -0,0 +1,30 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/gallery/messages.ts
+const text = defineMessages({
+	en: {
+		couldNotLoad: "Could not load the photos",
+		showAll: (count) => `Show all ${count} photos`,
+		showPhoto: (index, count) => `Show photo ${index} of ${count}`,
+		details: "Details",
+		holderDetails: (singular) => `${singular} details`,
+		close: "Close",
+		previousPhoto: "Previous photo",
+		nextPhoto: "Next photo",
+		couldNotLoadOne: (singular) => `Could not load the ${singular}`,
+		open: (singular) => `Open ${singular}`
+	},
+	nl: {
+		couldNotLoad: "Kon de foto’s niet laden",
+		showAll: (count) => `Alle ${count} foto’s tonen`,
+		showPhoto: (index, count) => `Foto ${index} van ${count} tonen`,
+		details: "Gegevens",
+		holderDetails: (singular) => `Gegevens van ${singular.toLowerCase()}`,
+		close: "Sluiten",
+		previousPhoto: "Vorige foto",
+		nextPhoto: "Volgende foto",
+		couldNotLoadOne: (singular) => `Kon ${singular} niet laden`,
+		open: (singular) => `${singular} openen`
+	}
+});
+//#endregion
+export { text };

package/dist/app/gallery/photo-details.js

@@ -6,6 +6,7 @@ import { SpecTable } from "../../record-view/spec-table.js";
 import { ErrorBanner } from "../error-banner.js";
 import { fieldAccess } from "../permissions.js";
 import { FieldValue } from "../pages/field-value.js";
+import { text } from "./messages.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/photo-details.tsx
 /**
@@ -17,7 +18,7 @@ const PhotoDetails = ({ model, view, photoKey, fields }) => {
 	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
 	if (record.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" });
 	if (record.error) return /* @__PURE__ */ jsx(ErrorBanner, {
-		title: `Could not load the ${singular}`,
+		title: text("couldNotLoadOne", singular),
 		error: record.error
 	});
 	const shown = fields.filter((name) => fieldAccess(record.data.permissions, name) !== "hidden");
@@ -35,7 +36,7 @@ const PhotoDetails = ({ model, view, photoKey, fields }) => {
 			key: photoKey
 		},
 		className: "mt-3 inline-block font-medium text-primary-text hover:underline",
-		children: `Open ${singular}`
+		children: text("open", singular)
 	})] });
 };
 //#endregion