@protobase/ui 0.23.10 → 0.23.11

package/dist/data-grid/row-reorder.js

@@ -1,10 +1,10 @@
+import { text } from "./messages.js";
 import { DataRow } from "./grid-row.js";
 import { GripVertical } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 //#region src/data-grid/row-reorder.tsx
-const instructions = "To move a row, press Space on its handle, move it with the up and down arrow keys, and press Space again to drop it there. Escape puts it back.";
 /** The rows of a grid that are moved by hand, `ids` in their order, each loaded or not, so the drop's index is the row's place in the whole list. */
 const ReorderRows = ({ ids, rowAt, reorder, children }) => {
 	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
@@ -14,13 +14,13 @@ const ReorderRows = ({ ids, rowAt, reorder, children }) => {
 	const place = (id) => ids.indexOf(String(id));
 	const name = (id) => {
 		const row = rowAt(place(id));
-		return row ? reorder.label(row) : "row";
+		return row ? reorder.label(row) : text("row");
 	};
 	const announcements = {
-		onDragStart: ({ active }) => `Picked up ${name(active.id)}, row ${place(active.id) + 1} of ${ids.length}.`,
-		onDragOver: ({ active, over }) => over ? `${name(active.id)} is over row ${place(over.id) + 1} of ${ids.length}.` : void 0,
-		onDragEnd: ({ active, over }) => over ? `${name(active.id)} was dropped at row ${place(over.id) + 1} of ${ids.length}.` : `${name(active.id)} was put back.`,
-		onDragCancel: ({ active }) => `Moving ${name(active.id)} was cancelled. It is back at row ${place(active.id) + 1}.`
+		onDragStart: ({ active }) => text("pickedUp", name(active.id), place(active.id) + 1, ids.length),
+		onDragOver: ({ active, over }) => over ? text("isOver", name(active.id), place(over.id) + 1, ids.length) : void 0,
+		onDragEnd: ({ active, over }) => over ? text("droppedAt", name(active.id), place(over.id) + 1, ids.length) : text("putBack", name(active.id)),
+		onDragCancel: ({ active }) => text("cancelled", name(active.id), place(active.id) + 1)
 	};
 	const end = ({ active, over }) => {
 		if (!over || active.id === over.id) return;
@@ -32,7 +32,7 @@ const ReorderRows = ({ ids, rowAt, reorder, children }) => {
 		onDragEnd: end,
 		accessibility: {
 			announcements,
-			screenReaderInstructions: { draggable: instructions }
+			screenReaderInstructions: { draggable: text("reorderInstructions") }
 		},
 		children: /* @__PURE__ */ jsx(SortableContext, {
 			items: ids,
@@ -47,7 +47,7 @@ const SortableRow = ({ row, label, ...props }) => {
 	const handle = /* @__PURE__ */ jsx("button", {
 		ref: setActivatorNodeRef,
 		type: "button",
-		"aria-label": `Move ${label}`,
+		"aria-label": text("move", label),
 		...attributes,
 		...listeners,
 		onClick: (event) => event.stopPropagation(),

package/dist/filter-panel/active-filter-chips.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { Lock, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/active-filter-chips.tsx
@@ -15,7 +16,7 @@ const ActiveFilterChips = ({ chips, lockedLabels = [], onRemove, onClear, scroll
 				className: chipClass,
 				children: [chip.label, /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-label": `Remove ${chip.label}`,
+					"aria-label": text("remove", chip.label),
 					onClick: () => onRemove(chip.key),
 					className: "rounded-full p-0.5 hover:bg-primary-border/60",
 					children: /* @__PURE__ */ jsx(X, { className: "size-3" })
@@ -25,7 +26,7 @@ const ActiveFilterChips = ({ chips, lockedLabels = [], onRemove, onClear, scroll
 				type: "button",
 				onClick: onClear,
 				className: "ml-1 text-xs font-medium text-muted-foreground hover:text-foreground",
-				children: "Clear all"
+				children: text("clearAll")
 			})
 		]
 	});

package/dist/filter-panel/date-presets.js

@@ -1,18 +1,19 @@
 import { cn } from "../lib/cn.js";
-import { datePresetLabels, defaultDatePresets } from "./filter-config.js";
+import { text } from "./messages.js";
+import { datePresetLabel, defaultDatePresets } from "./filter-config.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/filter-panel/date-presets.tsx
 const DatePresets = ({ value, presets = defaultDatePresets, onChange }) => /* @__PURE__ */ jsx("div", {
 	className: "flex flex-wrap gap-1.5",
 	children: presets.map((id) => {
-		const label = datePresetLabels[id];
+		const label = datePresetLabel(id);
 		return /* @__PURE__ */ jsx("button", {
 			type: "button",
 			disabled: !label,
-			title: label ? void 0 : `The server offers the preset "${id}", which this UI does not know`,
+			title: label ? void 0 : text("unknownPreset", id),
 			onClick: () => onChange(value === id ? void 0 : id),
 			className: cn("h-7 rounded-md border px-2.5 text-xs font-medium transition-colors", !label && "border-dashed text-danger-text", value === id ? "border-primary-border bg-primary-soft text-primary-text" : "border-border-strong bg-background text-muted-foreground hover:bg-muted"),
-			children: label ?? `${id} (unsupported)`
+			children: label ?? text("unsupported", id)
 		}, id);
 	})
 });

package/dist/filter-panel/facet-combobox.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { formatInt } from "../format/number.js";
+import { text } from "./messages.js";
 import { Token } from "../primitives/token.js";
 import { facetLabel } from "./filter-state.js";
 import { comboboxOptions, moveActive } from "./combobox-options.js";
@@ -64,7 +65,7 @@ const FacetCombobox = ({ config, selected, onToggle, inline = false }) => {
 					"aria-controls": `${id}-options`,
 					"aria-autocomplete": "list",
 					"aria-activedescendant": options[active] ? `${id}-${active}` : void 0,
-					placeholder: selected.length > 0 ? "" : `Search ${config.label.toLowerCase()}`,
+					placeholder: selected.length > 0 ? "" : text("searchIn", config.label),
 					className: "h-6 min-w-16 flex-1 bg-transparent text-foreground outline-none placeholder:text-faint-foreground",
 					value: query,
 					onChange: (event) => search(event.target.value),
@@ -113,7 +114,7 @@ const FacetCombobox = ({ config, selected, onToggle, inline = false }) => {
 				}, option.value);
 			}), options.length === 0 && /* @__PURE__ */ jsx("li", {
 				className: "px-1.5 py-1 text-xs text-faint-foreground",
-				children: "No matches"
+				children: text("noMatches")
 			})]
 		})]
 	});

package/dist/filter-panel/facet-group.js

@@ -1,6 +1,7 @@
 import { Input } from "../primitives/input.js";
 import { formatInt } from "../format/number.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { text } from "./messages.js";
 import { matchesSearch } from "./filter-state.js";
 import { useState } from "react";
 import { Search } from "lucide-react";
@@ -15,7 +16,7 @@ const FacetGroup = ({ config, selected, onToggle }) => {
 			config.searchable && /* @__PURE__ */ jsx(Input, {
 				wrapperClassName: "mb-1 h-7",
 				leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
-				placeholder: `Search ${config.label.toLowerCase()}`,
+				placeholder: text("searchIn", config.label),
 				value: query,
 				onChange: (event) => setQuery(event.target.value)
 			}),
@@ -39,7 +40,7 @@ const FacetGroup = ({ config, selected, onToggle }) => {
 			}, option.value)),
 			options.length === 0 && /* @__PURE__ */ jsx("span", {
 				className: "px-1 py-1 text-xs text-faint-foreground",
-				children: "No matches"
+				children: text("noMatches")
 			})
 		]
 	});

package/dist/filter-panel/filter-config.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 //#region src/filter-panel/filter-config.ts
 const defaultDatePresets = [
 	"today",
@@ -5,16 +6,18 @@ const defaultDatePresets = [
 	"30d",
 	"year"
 ];
-const datePresetLabels = {
-	today: "Today",
-	yesterday: "Yesterday",
-	"24h": "Last 24 hours",
-	"7d": "Last 7 days",
-	"30d": "Last 30 days",
-	"90d": "Last 90 days",
-	month: "This month",
-	quarter: "This quarter",
-	year: "This year"
-};
+const knownPresets = /* @__PURE__ */ new Set([
+	"today",
+	"yesterday",
+	"24h",
+	"7d",
+	"30d",
+	"90d",
+	"month",
+	"quarter",
+	"year"
+]);
+/** A date preset's label in the screens' language; undefined for one the server offers that this UI does not know. */
+const datePresetLabel = (id) => knownPresets.has(id) ? text(id) : void 0;
 //#endregion
-export { datePresetLabels, defaultDatePresets };
+export { datePresetLabel, defaultDatePresets };

package/dist/filter-panel/filter-panel.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { ActiveFilterChips } from "./active-filter-chips.js";
 import { DatePresets } from "./date-presets.js";
 import { activeChips, emptyFilterState, removeChip, setRange, toggleFacetValue, toggleFlag } from "./filter-state.js";
@@ -67,7 +68,7 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 				className: "flex items-center justify-between pb-1",
 				children: /* @__PURE__ */ jsx("h2", {
 					className: "font-semibold",
-					children: "Filters"
+					children: text("filters")
 				})
 			}),
 			(chips.length > 0 || (lockedLabels?.length ?? 0) > 0) && /* @__PURE__ */ jsx("div", {
@@ -84,11 +85,11 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 				children: rangeView(range)
 			}, range.id)),
 			dateView && /* @__PURE__ */ jsx(FilterSection, {
-				title: "Date",
+				title: text("date"),
 				children: dateView
 			}),
 			toggleViews.length > 0 && /* @__PURE__ */ jsx(FilterSection, {
-				title: "Show only",
+				title: text("showOnly"),
 				children: toggleViews
 			})
 		]

package/dist/filter-panel/filter-state.js

@@ -1,4 +1,4 @@
-import { datePresetLabels } from "./filter-config.js";
+import { datePresetLabel } from "./filter-config.js";
 //#region src/filter-panel/filter-state.ts
 const emptyFilterState = {
 	facets: {},
@@ -46,7 +46,7 @@ const activeChips = (config, state) => {
 	});
 	const dateChips = state.date ? [{
 		key: "date",
-		label: datePresetLabels[state.date] ?? state.date
+		label: datePresetLabel(state.date) ?? state.date
 	}] : [];
 	const toggleChips = state.toggles.map((id) => ({
 		key: `toggle:${id}`,

package/dist/filter-panel/messages.js

@@ -0,0 +1,52 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/filter-panel/messages.ts
+const text = defineMessages({
+	en: {
+		today: "Today",
+		yesterday: "Yesterday",
+		"24h": "Last 24 hours",
+		"7d": "Last 7 days",
+		"30d": "Last 30 days",
+		"90d": "Last 90 days",
+		month: "This month",
+		quarter: "This quarter",
+		year: "This year",
+		unknownPreset: (id) => `The server offers the preset "${id}", which this UI does not know`,
+		unsupported: (id) => `${id} (unsupported)`,
+		remove: (label) => `Remove ${label}`,
+		clearAll: "Clear all",
+		searchIn: (label) => `Search ${label.toLowerCase()}`,
+		noMatches: "No matches",
+		moreFilters: "More filters",
+		filters: "Filters",
+		date: "Date",
+		showOnly: "Show only",
+		minimum: (label) => `${label} minimum`,
+		maximum: (label) => `${label} maximum`
+	},
+	nl: {
+		today: "Vandaag",
+		yesterday: "Gisteren",
+		"24h": "Afgelopen 24 uur",
+		"7d": "Afgelopen 7 dagen",
+		"30d": "Afgelopen 30 dagen",
+		"90d": "Afgelopen 90 dagen",
+		month: "Deze maand",
+		quarter: "Dit kwartaal",
+		year: "Dit jaar",
+		unknownPreset: (id) => `De server biedt de periode "${id}", die deze UI niet kent`,
+		unsupported: (id) => `${id} (niet ondersteund)`,
+		remove: (label) => `${label} verwijderen`,
+		clearAll: "Alles wissen",
+		searchIn: (label) => `Zoeken in ${label.toLowerCase()}`,
+		noMatches: "Niets gevonden",
+		moreFilters: "Meer filters",
+		filters: "Filters",
+		date: "Datum",
+		showOnly: "Alleen tonen",
+		minimum: (label) => `${label} minimum`,
+		maximum: (label) => `${label} maximum`
+	}
+});
+//#endregion
+export { text };

package/dist/filter-panel/more-filters-menu.js

@@ -1,4 +1,5 @@
 import { menuItemClass } from "../primitives/menu-item.js";
+import { text } from "./messages.js";
 import { FilterMenu } from "./filter-menu.js";
 import { menuKeyTarget } from "../primitives/menu-keys.js";
 import { useEffect, useRef } from "react";
@@ -16,7 +17,7 @@ const Items = ({ items, onPick, close }) => {
 	};
 	return /* @__PURE__ */ jsx("ul", {
 		role: "menu",
-		"aria-label": "More filters",
+		"aria-label": text("moreFilters"),
 		onKeyDown,
 		className: "-mx-3 -my-3",
 		children: items.map((item, index) => /* @__PURE__ */ jsx("li", {
@@ -41,7 +42,7 @@ const Items = ({ items, onPick, close }) => {
 const MoreFiltersMenu = ({ items, onPick }) => {
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsx(FilterMenu, {
-		label: "More filters",
+		label: text("moreFilters"),
 		activeCount: 0,
 		children: (close) => /* @__PURE__ */ jsx(Items, {
 			items,

package/dist/filter-panel/range-filter.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { useDebounced } from "../lib/use-debounced.js";
 import { barInRange, fraction, moveThumb } from "./range-math.js";
 import { useEffect, useState } from "react";
@@ -48,7 +49,7 @@ const RangeFilter = ({ config, value, onChange }) => {
 				children: [0, 1].map((thumb) => /* @__PURE__ */ jsx("input", {
 					type: "range",
 					className: "pb-range",
-					"aria-label": `${config.label} ${thumb === 0 ? "minimum" : "maximum"}`,
+					"aria-label": thumb === 0 ? text("minimum", config.label) : text("maximum", config.label),
 					min,
 					max,
 					step,

package/dist/filter-panel/secondary-filters.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 //#region src/filter-panel/secondary-filters.ts
 /** The filter a chip belongs to: `facet:<id>`, `range:<id>`, `toggle:<id>` or `date`. A filter is active exactly when it has a chip. */
 const activeFilterKeys = (chips) => [...new Set(chips.map((chip) => chip.key.split(":").slice(0, 2).join(":")))];
@@ -21,7 +22,7 @@ const barFilters = (config, revealed) => {
 		})),
 		...config.datePresets ? [{
 			key: "date",
-			label: "Date",
+			label: text("date"),
 			secondary: config.dateSecondary
 		}] : [],
 		...(config.toggles ?? []).map((toggle) => ({

package/dist/forms/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/forms/messages.ts
+const text = defineMessages({
+	en: {
+		loading: "Loading",
+		notFound: "Not found",
+		noForm: "There is no form at this address.",
+		setByDatabase: "Set by the database",
+		notSent: "Not sent",
+		send: "Send",
+		checkTooLong: "The check that you are not a bot took too long; send the form again"
+	},
+	nl: {
+		loading: "Laden",
+		notFound: "Niet gevonden",
+		noForm: "Er is geen formulier op dit adres.",
+		setByDatabase: "Ingevuld door de database",
+		notSent: "Niet verzonden",
+		send: "Verzenden",
+		checkTooLong: "De controle of je geen bot bent duurde te lang; verzend het formulier opnieuw"
+	}
+});
+//#endregion
+export { text };

package/dist/forms/prove-human.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { solveChallenge } from "altcha-lib";
 import { deriveKey } from "altcha-lib/algorithms/web/sha";
 //#region src/forms/prove-human.ts
@@ -11,7 +12,7 @@ const proveHuman = async (client, name) => {
 		challenge,
 		deriveKey
 	});
-	if (!solution) throw new Error("The check that you are not a bot took too long; send the form again");
+	if (!solution) throw new Error(text("checkTooLong"));
 	return {
 		challenge,
 		solution: {

package/dist/forms/public-form-page.js

@@ -5,6 +5,7 @@ import { useClient } from "../data/api-provider.js";
 import { AuthLayout } from "../auth/auth-layout.js";
 import { humanize } from "../live/naming.js";
 import { Field } from "../record-view/field.js";
+import { text } from "../app/meta-gate-messages.js";
 import { Notice } from "../app/meta-gate.js";
 import { createBody, hasDatabaseDefault, initialDraft, isRequired } from "../app/create/create-values.js";
 import { useDocumentTitle } from "../app/document-title.js";
@@ -12,6 +13,7 @@ import { ErrorBanner } from "../app/error-banner.js";
 import { FieldEditor } from "../app/field-editor.js";
 import { fieldErrors, fieldMessage } from "../app/field-errors.js";
 import { useFocusFirstInvalid } from "../app/use-focus-first-invalid.js";
+import { text as text$1 } from "./messages.js";
 import { proveHuman } from "./prove-human.js";
 import { useState } from "react";
 import { isApiError } from "@protobase/client";
@@ -30,16 +32,20 @@ const PublicFormPage = ({ name }) => {
 	});
 	if (form.isPending) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-48 items-center justify-center gap-2 text-muted-foreground",
-		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" ",
+			text$1("loading")
+		]
 	});
 	if (form.error) {
 		if (isApiError(form.error) && form.error.status === 404) return /* @__PURE__ */ jsx(Notice, {
-			title: "Not found",
-			children: "There is no form at this address."
+			title: text$1("notFound"),
+			children: text$1("noForm")
 		});
 		return /* @__PURE__ */ jsx(Notice, {
-			title: "Cannot reach the API",
-			children: isApiError(form.error) ? form.error.message : "The server did not answer. Is it running?"
+			title: text("cannotReach"),
+			children: isApiError(form.error) ? form.error.message : text("noAnswer")
 		});
 	}
 	return /* @__PURE__ */ jsx(LoadedForm, { form: form.data });
@@ -117,14 +123,14 @@ const LoadedForm = ({ form }) => {
 							hints,
 							value: draft[name] ?? (field.type === "boolean" ? false : ""),
 							stored: void 0,
-							placeholder: hasDatabaseDefault(field) ? "Set by the database" : void 0,
+							placeholder: hasDatabaseDefault(field) ? text$1("setByDatabase") : void 0,
 							invalid: Boolean(problem),
 							onChange: (next) => change(name, next)
 						})
 					}, name);
 				}),
 				failure !== void 0 && /* @__PURE__ */ jsx(ErrorBanner, {
-					title: "Not sent",
+					title: text$1("notSent"),
 					error: failure
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -132,7 +138,7 @@ const LoadedForm = ({ form }) => {
 					type: "submit",
 					loading: sending,
 					className: "min-h-10",
-					children: "Send"
+					children: text$1("send")
 				})
 			]
 		})

package/dist/live/display-value.js

@@ -1,6 +1,7 @@
 import { formatTag } from "../locale/active-locale.js";
 import { viewerZone, zoneLabel } from "../format/zone.js";
 import { formatDate, formatDateTime, formatRelativeTime } from "../format/date.js";
+import { text } from "./messages.js";
 import { fileShown } from "./file-values.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/display-value.ts
@@ -12,7 +13,7 @@ const affixed = (text, hints) => `${hints.prefix ?? ""}${text}${hints.suffix ??
 const displayValue = (field, value, hints = {}, zone = viewerZone(), now = Date.now()) => {
 	if (value === null || value === void 0 || value === "") return "—";
 	switch (field.type) {
-		case "boolean": return value ? "Yes" : "No";
+		case "boolean": return value ? text("yes") : text("no");
 		case "file": return fileShown(value)?.name ?? "—";
 		case "enum": return enumLabel(String(value), hints.valueLabels);
 		case "timestamp": {
@@ -39,7 +40,7 @@ const valueTitle = (field, value, zone = viewerZone(), hints = {}) => {
 	const ms = Date.parse(value);
 	if (Number.isNaN(ms)) return void 0;
 	if (hints.format === "relative") return formatDateTime(ms, zone);
-	return `Shown in ${zoneLabel(ms, zone)}`;
+	return text("shownIn", zoneLabel(ms, zone));
 };
 //#endregion
 export { displayValue, valueTitle };

package/dist/live/file-values.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 //#region src/live/file-values.ts
 const isStoredFile = (value) => typeof value === "object" && value !== null && typeof value.uri === "string";
 const isFileDraft = (value) => typeof value === "object" && value !== null && typeof value.uploaded?.value === "string";
@@ -10,7 +11,7 @@ const fileShown = (value) => {
 	};
 	if (!isStoredFile(value)) return void 0;
 	if ("missing" in value) return {
-		name: "File missing",
+		name: text("fileMissing"),
 		type: "",
 		missing: true
 	};

package/dist/live/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/live/messages.ts
+const text = defineMessages({
+	en: {
+		yes: "Yes",
+		no: "No",
+		shownIn: (zone) => `Shown in ${zone}`,
+		fileMissing: "File missing"
+	},
+	nl: {
+		yes: "Ja",
+		no: "Nee",
+		shownIn: (zone) => `Getoond in ${zone}`,
+		fileMissing: "Bestand ontbreekt"
+	}
+});
+//#endregion
+export { text };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.23.10";
+var version = "0.23.11";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/record-view/action-menu.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import "../primitives/menu-item.js";
 import { usePopoverMenu } from "../primitives/popover-menu.js";
 import { MoreVertical } from "lucide-react";
@@ -9,7 +10,7 @@ import { createPortal } from "react-dom";
 * The actions of an action rail as a menu behind a "..." button, as a mobile screen's top bar holds them: each item the
 * rail's, a link where the rail draws one, disabled with its reason when it cannot run. `className` styles the button.
 */
-const ActionMenu = ({ actions, label = "Actions", className }) => {
+const ActionMenu = ({ actions, label = text("actions"), className }) => {
 	const { open, setOpen, place, button, menu } = usePopoverMenu();
 	if (actions.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {

package/dist/record-view/action-rail.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/action-rail.tsx
 const itemClass = "flex min-h-11 items-center gap-2 rounded-md border border-border-strong px-3 text-left hover:bg-surface disabled:cursor-default disabled:opacity-60 md:min-h-0 md:w-full md:items-start md:gap-3 md:rounded-none md:border-0 md:px-4 md:py-3";
@@ -7,7 +8,7 @@ const ActionRail = ({ actions }) => /* @__PURE__ */ jsxs("div", {
 	className: "overflow-hidden rounded-lg border border-border bg-background",
 	children: [/* @__PURE__ */ jsx("h3", {
 		className: "hidden border-b border-border px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground md:block",
-		children: "Actions"
+		children: text("actions")
 	}), /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-wrap gap-2 p-2 md:block md:divide-y md:divide-border md:p-0",
 		children: actions.map(({ name, description, icon: Icon, onRun, blocked, running, tone, render }) => {

package/dist/record-view/field.js

@@ -1,6 +1,7 @@
 import { Avatar } from "../primitives/avatar.js";
 import { FieldControlContext } from "../primitives/field-control.js";
 import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
 import { useId } from "react";
 import { TriangleAlert } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ const Field = ({ name, label, required, help, example, error, conflict, wide, ch
 					})]
 				}), conflict && /* @__PURE__ */ jsxs("span", {
 					className: "inline-flex items-center gap-1.5 text-warning-text",
-					title: `${conflict.user.name} saved a different value`,
+					title: text("savedDifferent", conflict.user.name),
 					children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
 						initials: conflict.user.initials,
 						hue: conflict.user.hue,
@@ -57,7 +58,11 @@ const Field = ({ name, label, required, help, example, error, conflict, wide, ch
 			example && /* @__PURE__ */ jsxs("p", {
 				id: `${id}-example`,
 				className: "mt-0.5 text-xs text-faint-foreground",
-				children: ["Example: ", example]
+				children: [
+					text("example"),
+					" ",
+					example
+				]
 			}),
 			error && /* @__PURE__ */ jsx("p", {
 				id: `${id}-error`,
@@ -68,20 +73,20 @@ const Field = ({ name, label, required, help, example, error, conflict, wide, ch
 				className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
 				children: [/* @__PURE__ */ jsxs("span", { children: [
 					/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
-					" saved this ",
-					conflict.ago,
-					": ",
+					" ",
+					text("savedThis", conflict.ago),
+					" ",
 					/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
 				] }), /* @__PURE__ */ jsxs("span", {
 					className: "flex gap-1.5",
 					children: [/* @__PURE__ */ jsx(Button, {
 						size: "sm",
 						onClick: conflict.onKeepMine,
-						children: "Keep mine"
+						children: text("keepMine")
 					}), /* @__PURE__ */ jsx(Button, {
 						size: "sm",
 						onClick: conflict.onUseTheirs,
-						children: "Use theirs"
+						children: text("useTheirs")
 					})]
 				})]
 			})

package/dist/record-view/messages.js

@@ -0,0 +1,38 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/record-view/messages.ts
+const text = defineMessages({
+	en: {
+		savedDifferent: (name) => `${name} saved a different value`,
+		example: "Example:",
+		savedThis: (ago) => `saved this ${ago}:`,
+		keepMine: "Keep mine",
+		useTheirs: "Use theirs",
+		actions: "Actions",
+		saving: "Saving...",
+		savedAgo: (ago) => `Saved ${ago}`,
+		notSavedRetrying: "Not saved, retrying",
+		lastEditedBy: "Last edited by",
+		lastUpdated: (ago) => `Last updated ${ago}`,
+		viewing: (count) => `${count} viewing`,
+		savingSubject: (subject) => `Saving ${subject}...`,
+		subjectSaved: (subject) => `${subject} saved`
+	},
+	nl: {
+		savedDifferent: (name) => `${name} bewaarde een andere waarde`,
+		example: "Voorbeeld:",
+		savedThis: (ago) => `bewaarde dit ${ago}:`,
+		keepMine: "Mijn waarde houden",
+		useTheirs: "Hun waarde gebruiken",
+		actions: "Acties",
+		saving: "Bewaren...",
+		savedAgo: (ago) => `Bewaard ${ago}`,
+		notSavedRetrying: "Niet bewaard, opnieuw proberen",
+		lastEditedBy: "Laatst bewerkt door",
+		lastUpdated: (ago) => `Laatst bijgewerkt ${ago}`,
+		viewing: (count) => `${count} kijken mee`,
+		savingSubject: (subject) => `${subject} bewaren...`,
+		subjectSaved: (subject) => `${subject} bewaard`
+	}
+});
+//#endregion
+export { text };