@protobase/ui 0.23.10 → 0.23.12

package/dist/app/record-lines.js

@@ -2,6 +2,7 @@ import { InlineChildTable } from "../inline-child-table/inline-child-table.js";
 import { Section } from "../record-view/section.js";
 import { usePermissions } from "./meta-gate.js";
 import { can } from "./permissions.js";
+import { text } from "./record-messages.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/record-lines.tsx
 /** A resource that holds numbered lines of this one: it points at the parent and has `position` and `quantity`. */
@@ -17,8 +18,8 @@ const toLine = (record) => ({
 const RecordLines = ({ lines, draft, vatRate, saving, locked = false }) => {
 	const canReorder = can(usePermissions(lines.name), "update");
 	return /* @__PURE__ */ jsx(Section, {
-		title: "Lines",
-		help: "What the document bills for. Drag the handle, or use the menu, to change the order; Save applies it.",
+		title: text("lines"),
+		help: text("linesHelp"),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "-mx-4 overflow-x-auto px-4 [-webkit-overflow-scrolling:touch] md:mx-0 md:px-0",
 			children: /* @__PURE__ */ jsx("div", {

package/dist/app/record-messages.js

@@ -0,0 +1,78 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app/record-messages.ts
+const text = defineMessages({
+	en: {
+		details: "Details",
+		history: "History",
+		comments: "Comments",
+		summary: "Summary",
+		loading: "Loading",
+		fetching: "Fetching the record.",
+		noRecord: "This record does not exist, or you cannot see it.",
+		couldNotLoad: "Could not load the record",
+		someoneElse: "Someone else",
+		justNow: "just now",
+		saved: "Saved",
+		save: "Save",
+		cancel: "Cancel",
+		unsavedChanges: "Unsaved changes",
+		notSaved: "Not saved",
+		linesChanged: "The lines were changed by someone else",
+		linesReloaded: "The lines were reloaded. Your new order is kept: Save again to apply it.",
+		unsavedKept: "You have unsaved changes to this record.",
+		continueEditing: "Continue editing",
+		discard: "Discard",
+		unsavedRestored: "Your unsaved changes were restored.",
+		keep: "Keep",
+		savingSubject: (subject) => `Saving ${subject}...`,
+		subjectSaved: (subject) => `${subject} saved`,
+		changedBySomeoneElse: "Changed by someone else",
+		couldNotSave: "Could not save",
+		recordActions: "Record actions",
+		edit: "Edit",
+		delete: "Delete",
+		nothingYet: "Nothing here yet.",
+		couldNotLoadRelated: "Could not load",
+		relatedRecords: "Related records",
+		lines: "Lines",
+		linesHelp: "What the document bills for. Drag the handle, or use the menu, to change the order; Save applies it."
+	},
+	nl: {
+		details: "Details",
+		history: "Geschiedenis",
+		comments: "Opmerkingen",
+		summary: "Overzicht",
+		loading: "Laden",
+		fetching: "Het record wordt opgehaald.",
+		noRecord: "Dit record bestaat niet, of je mag het niet zien.",
+		couldNotLoad: "Kon het record niet laden",
+		someoneElse: "Iemand anders",
+		justNow: "zojuist",
+		saved: "Bewaard",
+		save: "Bewaren",
+		cancel: "Annuleren",
+		unsavedChanges: "Niet bewaarde wijzigingen",
+		notSaved: "Niet bewaard",
+		linesChanged: "De regels zijn door iemand anders gewijzigd",
+		linesReloaded: "De regels zijn opnieuw geladen. Je nieuwe volgorde is behouden: bewaar opnieuw om hem toe te passen.",
+		unsavedKept: "Je hebt niet bewaarde wijzigingen in dit record.",
+		continueEditing: "Verder bewerken",
+		discard: "Weggooien",
+		unsavedRestored: "Je niet bewaarde wijzigingen zijn teruggezet.",
+		keep: "Houden",
+		savingSubject: (subject) => `${subject} bewaren...`,
+		subjectSaved: (subject) => `${subject} bewaard`,
+		changedBySomeoneElse: "Gewijzigd door iemand anders",
+		couldNotSave: "Kon niet bewaren",
+		recordActions: "Recordacties",
+		edit: "Bewerken",
+		delete: "Verwijderen",
+		nothingYet: "Hier staat nog niets.",
+		couldNotLoadRelated: "Kon niet laden",
+		relatedRecords: "Gerelateerde records",
+		lines: "Regels",
+		linesHelp: "Waar het document voor factureert. Sleep de greep, of gebruik het menu, om de volgorde te wijzigen; Bewaren past hem toe."
+	}
+});
+//#endregion
+export { text };

package/dist/app/record-page.js

@@ -29,6 +29,7 @@ import { KeyFacts } from "../record-view/key-facts.js";
 import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
 import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
 import { isChosen, keyValue } from "./create/create-values.js";
+import { text } from "./messages.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { shownWidget } from "./field-types/shown-widget.js";
@@ -41,6 +42,7 @@ import { can, fieldAccess } from "./permissions.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
 import { namedIcon } from "./named-icon.js";
+import { text as text$1 } from "./record-messages.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
 import { auditField } from "../live/audit-fields.js";
@@ -79,19 +81,20 @@ const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
 	const shown = Object.values(model.fields).filter((field) => !hidden(model, field.name));
 	const editable = shown.filter((field) => !field.readOnly);
+	const fields = (editable.length > 0 && !read ? editable : shown).map((field) => field.name);
 	return [
 		{
 			kind: "section",
-			title: "Details",
-			fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
+			title: text$1("details"),
+			fields
 		},
 		...model.history ? [{
 			kind: "history",
-			title: "History"
+			title: text$1("history")
 		}] : [],
 		...model.comments ? [{
 			kind: "comments",
-			title: "Comments"
+			title: text$1("comments")
 		}] : []
 	];
 };
@@ -99,25 +102,21 @@ const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
 	const model = resources[resource];
 	const record = useOpenedRecord(resource, recordKey);
-	if (!model) return /* @__PURE__ */ jsxs(Notice, {
-		title: "Not found",
-		children: [
-			"There is no resource called ",
-			resource,
-			"."
-		]
+	if (!model) return /* @__PURE__ */ jsx(Notice, {
+		title: text("notFound"),
+		children: text("noResource", resource)
 	});
 	if (record.isPending) return /* @__PURE__ */ jsx(Notice, {
-		title: "Loading",
-		children: "Fetching the record."
+		title: text$1("loading"),
+		children: text$1("fetching")
 	});
 	if (record.error) return /* @__PURE__ */ jsx("div", {
 		className: "p-8",
 		children: isApiError(record.error) && record.error.status === 404 ? /* @__PURE__ */ jsx(Notice, {
-			title: "Not found",
-			children: "This record does not exist, or you cannot see it."
+			title: text("notFound"),
+			children: text$1("noRecord")
 		}) : /* @__PURE__ */ jsx(ErrorBanner, {
-			title: "Could not load the record",
+			title: text$1("couldNotLoad"),
 			error: record.error
 		})
 	});
@@ -241,11 +240,11 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
 			conflict: conflict === void 0 ? void 0 : {
 				user: {
-					name: "Someone else",
+					name: text$1("someoneElse"),
 					initials: "?",
 					hue: 40
 				},
-				ago: "just now",
+				ago: text$1("justNow"),
 				theirValue: conflict || "—",
 				onKeepMine: () => editor.keepMine(name),
 				onUseTheirs: () => editor.useTheirs(name)
@@ -295,7 +294,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	};
 	const firstSidebar = layout.findIndex((item) => item.kind === "sidebar");
 	const summary = /* @__PURE__ */ jsx(MetadataCard, {
-		title: "Summary",
+		title: text$1("summary"),
 		rows: sidebarFields.flatMap((name) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
@@ -347,17 +346,17 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 			loading: editor.saving,
 			disabled: !editor.dirty && editor.phase !== "saved",
 			onClick: () => void save(),
-			children: [editor.phase === "saved" && /* @__PURE__ */ jsx(Check, { className: "size-4" }), editor.phase === "saved" ? "Saved" : "Save"]
+			children: [editor.phase === "saved" && /* @__PURE__ */ jsx(Check, { className: "size-4" }), editor.phase === "saved" ? text$1("saved") : text$1("save")]
 		}),
 		leavesForm && /* @__PURE__ */ jsx(AppLink, {
 			to: readAddress,
 			className: cn(buttonClass(), "max-md:min-h-11 md:w-full"),
 			onClick: (event) => inApp(event) && editor.discard(),
-			children: "Cancel"
+			children: text$1("cancel")
 		}),
 		editor.dirty && /* @__PURE__ */ jsx("span", {
 			className: "text-xs text-muted-foreground max-md:order-first",
-			children: "Unsaved changes"
+			children: text$1("unsavedChanges")
 		})
 	] });
 	const mainItem = (item, index) => {
@@ -447,46 +446,46 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 						editor.message && /* @__PURE__ */ jsx("div", {
 							className: "mt-4",
 							children: /* @__PURE__ */ jsx(ErrorBanner, {
-								title: "Not saved",
+								title: text$1("notSaved"),
 								error: new Error(editor.message)
 							})
 						}),
 						editor.linesConflict && /* @__PURE__ */ jsx("div", {
 							className: "mt-4",
 							children: /* @__PURE__ */ jsx(ErrorBanner, {
-								title: "The lines were changed by someone else",
-								error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it.")
+								title: text$1("linesChanged"),
+								error: new Error(text$1("linesReloaded"))
 							})
 						}),
 						shown !== "form" && offersEdit && editor.dirty && /* @__PURE__ */ jsxs("div", {
 							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2",
 							role: "status",
-							children: [/* @__PURE__ */ jsx("span", { children: "You have unsaved changes to this record." }), /* @__PURE__ */ jsxs("span", {
+							children: [/* @__PURE__ */ jsx("span", { children: text$1("unsavedKept") }), /* @__PURE__ */ jsxs("span", {
 								className: "flex gap-2",
 								children: [/* @__PURE__ */ jsx(AppLink, {
 									to: editAddress,
 									className: buttonClass({ size: "sm" }),
-									children: "Continue editing"
+									children: text$1("continueEditing")
 								}), /* @__PURE__ */ jsx(Button, {
 									size: "sm",
 									onClick: editor.discard,
-									children: "Discard"
+									children: text$1("discard")
 								})]
 							})]
 						}),
 						shown === "form" && editor.restored && /* @__PURE__ */ jsxs("div", {
 							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2",
 							role: "status",
-							children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
+							children: [/* @__PURE__ */ jsx("span", { children: text$1("unsavedRestored") }), /* @__PURE__ */ jsxs("span", {
 								className: "flex gap-2",
 								children: [/* @__PURE__ */ jsx(Button, {
 									size: "sm",
 									onClick: editor.dismissRestored,
-									children: "Keep"
+									children: text$1("keep")
 								}), /* @__PURE__ */ jsx(Button, {
 									size: "sm",
 									onClick: editor.discard,
-									children: "Discard"
+									children: text$1("discard")
 								})]
 							})]
 						}),
@@ -541,7 +540,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										return index === firstSidebar ? /* @__PURE__ */ jsx(Fragment, { children: summary }, "summary") : null;
 									}),
 									/* @__PURE__ */ jsx(MetadataCard, {
-										title: "Details",
+										title: text$1("details"),
 										rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
 											const field = name ? model.fields[name] : void 0;
 											if (!name || !field || !visible(name)) return [];

package/dist/app/related-section.js

@@ -11,6 +11,7 @@ import { relatedHandOrder } from "./hand-order/hand-order.js";
 import { relatedOpens } from "./related-opens.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
+import { text } from "./record-messages.js";
 import { HandSortedList } from "./hand-order/hand-sorted-list.js";
 import { SortButton } from "./hand-order/sort-button.js";
 import { useState } from "react";
@@ -71,9 +72,9 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 	className: "flex flex-col gap-2",
 	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
 });
-const Empty = ({ text }) => /* @__PURE__ */ jsx("p", {
+const Empty = ({ empty }) => /* @__PURE__ */ jsx("p", {
 	className: "text-muted-foreground",
-	children: text ?? "Nothing here yet."
+	children: empty ?? text("nothingYet")
 });
 /**
 * A record page section listing the first records of another resource that point at this record, directly or through
@@ -130,9 +131,9 @@ const RelatedSection = ({ item, value, owner }) => {
 		help: item.help,
 		actions,
 		children: match.isPending ? /* @__PURE__ */ jsx(Loading, {}) : match.error ? /* @__PURE__ */ jsx(ErrorBanner, {
-			title: "Could not load",
+			title: text("couldNotLoadRelated"),
 			error: match.error
-		}) : match.filter === null || match.filter === void 0 ? /* @__PURE__ */ jsx(Empty, { text: item.empty }) : /* @__PURE__ */ jsx(EmbeddedList, {
+		}) : match.filter === null || match.filter === void 0 ? /* @__PURE__ */ jsx(Empty, { empty: item.empty }) : /* @__PURE__ */ jsx(EmbeddedList, {
 			model,
 			view,
 			filter: match.filter,

package/dist/app/use-live-save.js

@@ -1,5 +1,6 @@
 import { useToast } from "../toasts/toast-provider.js";
 import { saveFailureDescription } from "./field-errors.js";
+import { text } from "./record-messages.js";
 import { useEffect, useRef, useState } from "react";
 import { isApiError } from "@protobase/client";
 //#region src/app/use-live-save.ts
@@ -18,7 +19,7 @@ const useLiveSave = (mode, subject) => {
 	const run = async (action) => {
 		const id = mode === "toast" ? toast.show({
 			state: "loading",
-			title: `Saving ${subject}...`
+			title: text("savingSubject", subject)
 		}) : void 0;
 		setMessage(void 0);
 		if (mode === "button") setPhase("saving");
@@ -26,7 +27,7 @@ const useLiveSave = (mode, subject) => {
 			await action();
 			if (id !== void 0) toast.update(id, {
 				state: "success",
-				title: `${subject} saved`
+				title: text("subjectSaved", subject)
 			});
 			if (mode === "button") {
 				setPhase("saved");
@@ -35,7 +36,7 @@ const useLiveSave = (mode, subject) => {
 			return true;
 		} catch (error) {
 			if (!isApiError(error)) throw error;
-			const title = error.status === 412 ? "Changed by someone else" : "Could not save";
+			const title = error.status === 412 ? text("changedBySomeoneElse") : text("couldNotSave");
 			const description = saveFailureDescription(error);
 			if (id !== void 0) toast.update(id, {
 				state: "error",

package/dist/data-grid/cell-text.js

@@ -3,6 +3,7 @@ import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime, formatRelativeTime } from "../format/date.js";
 import { userById } from "../mocks/users.js";
 import { fileShown } from "../live/file-values.js";
+import { text } from "./messages.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/data-grid/cell-text.ts
 /** A relation cell's text: the related record's name when the row carries it, else its key. */
@@ -21,7 +22,7 @@ const cellText = (spec, value) => {
 		case "percent": return Number(value) === 0 ? "—" : formatPercent(Number(value));
 		case "status": return enumLabel(String(value), spec.labels);
 		case "relation": return relationLabel(value);
-		case "boolean": return value ? void 0 : "No";
+		case "boolean": return value ? void 0 : text("no");
 		case "file": return fileShown(value)?.name ?? "—";
 		case "user": return userById(String(value)).name;
 	}

package/dist/data-grid/cells.js

@@ -5,6 +5,7 @@ import { viewerZone, zoneLabel } from "../format/zone.js";
 import { formatDateTime } from "../format/date.js";
 import { userById } from "../mocks/users.js";
 import { fileShown, shownImage } from "../live/file-values.js";
+import { text } from "./messages.js";
 import { cellText } from "./cell-text.js";
 import { FileImage } from "../live/file-image.js";
 import { ContactLink } from "../live/contact-link.js";
@@ -19,50 +20,50 @@ const muted = (text) => /* @__PURE__ */ jsx("span", {
 });
 const renderCell = (spec, value) => {
 	if (value === null || value === void 0) return muted("—");
-	const text = cellText(spec, value) ?? "";
+	const text$1 = cellText(spec, value) ?? "";
 	switch (spec.kind) {
 		case "text": return spec.link ? /* @__PURE__ */ jsx(ContactLink, {
 			format: spec.link,
-			value: text,
+			value: text$1,
 			className: "block min-w-0 truncate"
-		}) : /* @__PURE__ */ jsx(TruncatedText, { text });
+		}) : /* @__PURE__ */ jsx(TruncatedText, { text: text$1 });
 		case "id": return /* @__PURE__ */ jsx(TruncatedText, {
-			text,
+			text: text$1,
 			className: "font-mono text-xs text-muted-foreground"
 		});
 		case "money": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: text
+			children: text$1
 		});
 		case "date": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			children: text
+			children: text$1
 		});
 		case "datetime": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			title: spec.relative ? formatDateTime(Number(value)) : `Shown in ${zoneLabel(Number(value), viewerZone())}`,
-			children: text
+			title: spec.relative ? formatDateTime(Number(value)) : text("shownIn", zoneLabel(Number(value), viewerZone())),
+			children: text$1
 		});
 		case "number": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: text
+			children: text$1
 		});
 		case "signed": return /* @__PURE__ */ jsx("span", {
 			className: cn("tabular-nums", Number(value) < 0 ? "text-danger-text" : "text-success-text"),
-			children: text
+			children: text$1
 		});
 		case "percent": return Number(value) === 0 ? muted("—") : /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: text
+			children: text$1
 		});
 		case "status": return /* @__PURE__ */ jsx(Badge, {
 			tone: spec.tones?.[String(value)] ?? "neutral",
 			color: valueColor(spec.colors, value),
 			shape: spec.shape,
-			children: text
+			children: text$1
 		});
 		case "relation": return /* @__PURE__ */ jsx(TruncatedText, {
-			text,
+			text: text$1,
 			className: "font-medium text-primary-text hover:underline"
 		});
 		case "boolean": return value ? /* @__PURE__ */ jsx("span", {
@@ -71,7 +72,7 @@ const renderCell = (spec, value) => {
 				className: "size-3",
 				strokeWidth: 3
 			})
-		}) : muted("No");
+		}) : muted(text("no"));
 		case "file": {
 			const file = fileShown(value);
 			if (!file) return muted("—");

package/dist/data-grid/grid-footer.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { formatApproxRows, formatInt } from "../format/number.js";
+import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-footer.tsx
 /** How many rows match and, with rows selected, how many and what can be done with them. */
@@ -9,9 +10,9 @@ const GridFooter = ({ total, selectedCount, bulkActions = [], className }) => /*
 		className: "flex items-center tabular-nums",
 		children: [
 			formatApproxRows(total),
-			selectedCount > 0 && /* @__PURE__ */ jsxs("span", {
+			selectedCount > 0 && /* @__PURE__ */ jsx("span", {
 				className: "ml-3 font-medium text-primary-text",
-				children: [formatInt(selectedCount), " selected"]
+				children: text("selected", formatInt(selectedCount))
 			}),
 			selectedCount > 0 && bulkActions.map((action) => /* @__PURE__ */ jsx("button", {
 				type: "button",

package/dist/data-grid/grid-header.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { text } from "./messages.js";
 import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
 import { HeaderMenu, unsortableText } from "./header-menu.js";
@@ -16,7 +17,7 @@ const HeaderLabel = ({ spec }) => /* @__PURE__ */ jsxs(Fragment, { children: [/*
 	children: spec.header
 }), spec.highlight && /* @__PURE__ */ jsx("span", {
 	className: "rounded bg-primary px-1 text-[10px] font-semibold uppercase leading-4 text-primary-foreground",
-	children: "New"
+	children: text("new")
 })] });
 const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing, minScale, pins = {}, lastPinned, scrolled, onTogglePin, onClearSelection }) => /* @__PURE__ */ jsxs("div", {
 	className: "grid h-8 shrink-0 items-center border-b bg-surface text-xs font-medium text-muted-foreground",
@@ -29,7 +30,7 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 			children: [selectable && /* @__PURE__ */ jsx(Checkbox, {
 				checked: false,
 				indeterminate: selectedCount > 0,
-				label: selectedCount > 0 ? "Clear selection" : "No rows selected",
+				label: selectedCount > 0 ? text("clearSelection") : text("noRowsSelected"),
 				disabled: selectedCount === 0,
 				onChange: onClearSelection,
 				className: cn(selectedCount === 0 && "opacity-60")
@@ -50,7 +51,7 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 					className: cn("group/head flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end", "hover:text-foreground", sorted && "text-foreground"),
 					children: [/* @__PURE__ */ jsx(HeaderLabel, { spec }), /* @__PURE__ */ jsx(SortIcon, { sorted })]
 				}) : /* @__PURE__ */ jsx("div", {
-					title: unsortableText,
+					title: unsortableText(),
 					className: cn("flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end"),
 					children: /* @__PURE__ */ jsx(HeaderLabel, { spec })
 				}), /* @__PURE__ */ jsx("div", {

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

@@ -2,6 +2,7 @@ import { cn } from "../lib/cn.js";
 import { Skeleton } from "../primitives/skeleton.js";
 import { formatInt } from "../format/number.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { text } from "./messages.js";
 import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @_
 	style: { width },
 	children: [selectable && /* @__PURE__ */ jsx(Checkbox, {
 		checked: Boolean(selected),
-		label: `Select row ${index + 1}`
+		label: text("selectRow", index + 1)
 	}), width > 40 && /* @__PURE__ */ jsx("span", {
 		className: "min-w-6 text-right text-[11px] tabular-nums text-faint-foreground",
 		children: formatInt(index + 1)

package/dist/data-grid/header-menu.js

@@ -1,9 +1,10 @@
+import { text } from "./messages.js";
 import { useEffect, useRef, useState } from "react";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/header-menu.tsx
 /** Why a column header does nothing when pressed: a list sorts only on the columns its view makes sortable. */
-const unsortableText = "This column can't be sorted";
+const unsortableText = () => text("unsortable");
 /** The "..." in a column header: pinning the column to the left edge, and saying so when the list can't sort by it. */
 const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 	const [open, setOpen] = useState(false);
@@ -25,7 +26,7 @@ const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 		className: "relative ml-auto shrink-0",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
-			"aria-label": `${header} column menu`,
+			"aria-label": text("columnMenu", header),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			onClick: () => setOpen(!open),
@@ -40,7 +41,7 @@ const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 					role: "menuitem",
 					"aria-disabled": "true",
 					className: "block min-h-9 whitespace-nowrap px-3 py-1.5 text-muted-foreground",
-					children: "This column can't be sorted"
+					children: unsortableText()
 				})
 			}), /* @__PURE__ */ jsx("li", {
 				role: "none",
@@ -52,7 +53,7 @@ const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 						setOpen(false);
 						onTogglePin();
 					},
-					children: pinned ? "Unpin" : "Pin to left"
+					children: pinned ? text("unpin") : text("pinToLeft")
 				})
 			})]
 		})]

package/dist/data-grid/messages.js

@@ -0,0 +1,50 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/data-grid/messages.ts
+const text = defineMessages({
+	en: {
+		unsortable: "This column can't be sorted",
+		columnMenu: (header) => `${header} column menu`,
+		unpin: "Unpin",
+		pinToLeft: "Pin to left",
+		selected: (count) => `${count} selected`,
+		no: "No",
+		shownIn: (zone) => `Shown in ${zone}`,
+		new: "New",
+		clearSelection: "Clear selection",
+		noRowsSelected: "No rows selected",
+		selectRow: (row) => `Select row ${row}`,
+		rowActions: "Row actions",
+		row: "row",
+		move: (label) => `Move ${label}`,
+		reorderInstructions: "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.",
+		pickedUp: (name, row, rows) => `Picked up ${name}, row ${row} of ${rows}.`,
+		isOver: (name, row, rows) => `${name} is over row ${row} of ${rows}.`,
+		droppedAt: (name, row, rows) => `${name} was dropped at row ${row} of ${rows}.`,
+		putBack: (name) => `${name} was put back.`,
+		cancelled: (name, row) => `Moving ${name} was cancelled. It is back at row ${row}.`
+	},
+	nl: {
+		unsortable: "Op deze kolom kan niet worden gesorteerd",
+		columnMenu: (header) => `Kolommenu ${header}`,
+		unpin: "Losmaken",
+		pinToLeft: "Links vastzetten",
+		selected: (count) => `${count} geselecteerd`,
+		no: "Nee",
+		shownIn: (zone) => `Getoond in ${zone}`,
+		new: "Nieuw",
+		clearSelection: "Selectie wissen",
+		noRowsSelected: "Geen rijen geselecteerd",
+		selectRow: (row) => `Rij ${row} selecteren`,
+		rowActions: "Rijacties",
+		row: "rij",
+		move: (label) => `${label} verplaatsen`,
+		reorderInstructions: "Om een rij te verplaatsen, druk op Spatie op de greep, verplaats hem met de pijltjestoetsen omhoog en omlaag, en druk nogmaals op Spatie om hem daar neer te zetten. Escape zet hem terug.",
+		pickedUp: (name, row, rows) => `${name} opgepakt, rij ${row} van ${rows}.`,
+		isOver: (name, row, rows) => `${name} is boven rij ${row} van ${rows}.`,
+		droppedAt: (name, row, rows) => `${name} is neergezet op rij ${row} van ${rows}.`,
+		putBack: (name) => `${name} is teruggezet.`,
+		cancelled: (name, row) => `Verplaatsen van ${name} is geannuleerd. Hij staat weer op rij ${row}.`
+	}
+});
+//#endregion
+export { text };

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

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { RouteLink } from "../primitives/route-link.js";
+import { text } from "./messages.js";
 import { usePopoverMenu } from "../primitives/popover-menu.js";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +21,7 @@ const RowMenu = ({ row, actions }) => {
 		children: [/* @__PURE__ */ jsx("button", {
 			ref: button,
 			type: "button",
-			"aria-label": "Row actions",
+			"aria-label": text("rowActions"),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			onClick: () => setOpen(!open),