@protobase/ui 0.63.4 → 0.64.0

package/dist/auth/sign-up-details-form.js

@@ -1,7 +1,6 @@
 import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { Input } from "../primitives/input.js";
-import { slotted } from "../locale/slotted.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,10 +17,10 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 		description: text("detailsDescription"),
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "mb-4 text-muted-foreground",
-			children: slotted(text("codeWasRight"), /* @__PURE__ */ jsx("span", {
+			children: text.rich("codeWasRight", { email: /* @__PURE__ */ jsx("span", {
 				className: "font-medium text-foreground",
 				children: email
-			}))
+			}) })
 		}), /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
 			onSubmit: (event) => {
@@ -64,7 +63,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 					}), /* @__PURE__ */ jsxs("p", {
 						id: passwordHint,
 						className: "text-xs text-muted-foreground",
-						children: [text("atLeast", 12), passwordOptional && text("withoutPassword")]
+						children: [text("atLeast", { length: 12 }), passwordOptional && text("withoutPassword")]
 					})]
 				}),
 				error && /* @__PURE__ */ jsx("p", {

package/dist/auth/staff-sign-in-form.js

@@ -27,7 +27,7 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 	});
 	return /* @__PURE__ */ jsx(AuthLayout, {
 		title: text("signInAsPerson"),
-		description: text("forStaffOf", operator),
+		description: text("forStaffOf", { operator }),
 		children: /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
 			onSubmit: (event) => {
@@ -62,7 +62,7 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 				}),
 				/* @__PURE__ */ jsx("p", {
 					className: "text-xs text-muted-foreground",
-					children: text("staffExplanation", operator)
+					children: text("staffExplanation", { operator })
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",
@@ -74,7 +74,7 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: text("continueWith", operator)
+					children: text("continueWith", { name: operator })
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",

package/dist/calls/call-guests-panel.js

@@ -1,7 +1,7 @@
 import { Button } from "../primitives/button.js";
 import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
-import { Input } from "../primitives/input.js";
 import { Segmented } from "../primitives/segmented.js";
+import { Input } from "../primitives/input.js";
 import { text } from "./messages.js";
 import { useGuestRequest } from "./use-guest-request.js";
 import { useState } from "react";
@@ -136,7 +136,7 @@ const CallGuestsPanel = ({ lobby, inCall, guests, linkOf, open, onClose }) => {
 								})
 							}), /* @__PURE__ */ jsxs("span", {
 								className: "flex items-center justify-between gap-2 text-xs text-muted-foreground",
-								children: [link.expires_at ? text("linkUntil", new Date(link.expires_at).toLocaleString()) : text("linkUntilEnd"), /* @__PURE__ */ jsx(Button, {
+								children: [link.expires_at ? text("linkUntil", { until: new Date(link.expires_at).toLocaleString() }) : text("linkUntilEnd"), /* @__PURE__ */ jsx(Button, {
 									size: "sm",
 									onClick: () => run(() => guests.revoke(link.id)),
 									children: text("revoke")

package/dist/calls/call-lobby-notice.js

@@ -14,7 +14,7 @@ const CallLobbyNotice = ({ waiting, guests }) => {
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "min-w-0 flex-1 truncate",
-				children: refused ? text("guestRefused") : text("waitingGuest", first.name)
+				children: refused ? text("guestRefused") : text("waitingGuest", { name: first.name })
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				size: "sm",

package/dist/calls/call-mark.js

@@ -36,7 +36,7 @@ const CallMark = ({ resource, recordKey, className }) => {
 				children: "·"
 			}),
 			/* @__PURE__ */ jsx("span", {
-				"aria-label": text("people", count),
+				"aria-label": text("people", { count }),
 				children: count
 			}),
 			!joining && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {

package/dist/calls/call-people.js

@@ -10,7 +10,7 @@ const callPeople = ({ members, self, tracks, own, nameOf, speaker, connections,
 	}, ...members]).map(({ member, name }) => {
 		const shared = {
 			member,
-			name: member.startsWith("guest:") ? text("guestName", name ?? "") : name ?? nameOf(member),
+			name: member.startsWith("guest:") ? text("guestName", { name: name ?? "" }) : name ?? nameOf(member),
 			...speaker === member && { speaking: true }
 		};
 		if (member === self) return {

package/dist/calls/call-rings.js

@@ -1,5 +1,5 @@
-import { useToast } from "../toasts/toast-provider.js";
 import { useAppAddress } from "../app/use-app-address.js";
+import { useToast } from "../toasts/toast-provider.js";
 import { text } from "./messages.js";
 import { useRingTone } from "./ring-tone.js";
 import { useRings } from "./use-rings.js";

package/dist/calls/call-tile.js

@@ -13,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const CallTile = ({ person, screen = false, className }) => {
 	const track = screen ? person.screen : person.cameraOff ? void 0 : person.camera;
-	const label = screen ? person.self ? text("youAreSharing") : text("sharing", person.name) : person.self ? `${person.name} (${text("you")})` : person.name;
+	const label = screen ? person.self ? text("youAreSharing") : text("sharing", { name: person.name }) : person.self ? `${person.name} (${text("you")})` : person.name;
 	return /* @__PURE__ */ jsxs("figure", {
 		"data-member": person.member,
 		"data-speaking": person.speaking ? "true" : void 0,
@@ -32,7 +32,7 @@ const CallTile = ({ person, screen = false, className }) => {
 			person.connection === "failed" && !person.self && /* @__PURE__ */ jsx("p", {
 				role: "status",
 				className: "absolute inset-x-1 top-1 truncate rounded bg-black/70 px-2 py-1 text-center text-xs text-white",
-				children: text("cannotConnect", person.name)
+				children: text("cannotConnect", { name: person.name })
 			}),
 			/* @__PURE__ */ jsxs("figcaption", {
 				className: "absolute bottom-1.5 left-1.5 flex max-w-[calc(100%-0.75rem)] items-center gap-1 rounded bg-black/60 px-1.5 py-0.5 text-xs text-white",

package/dist/calls/messages.js

@@ -1,142 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/calls/messages.ts
-const text = defineMessages({
-	en: {
-		accept: "Accept",
-		decline: "Decline",
-		startCall: "Start call",
-		join: "Join",
-		inProgress: "Call in progress",
-		people: (count) => count === 1 ? "1 person" : `${count} people`,
-		joinCall: "Join call",
-		leave: "Leave",
-		microphone: "Microphone",
-		camera: "Camera",
-		shareScreen: "Share screen",
-		stopSharing: "Stop sharing",
-		muted: "Muted",
-		you: "You",
-		alone: "You are the only one here",
-		connecting: "Joining…",
-		reconnecting: "Reconnecting…",
-		full: "This call is full",
-		removed: "You were removed from this call",
-		ended: "The call ended",
-		refused: "You cannot join this call",
-		unavailable: "The call cannot be reached now. Try again in a moment.",
-		callAgain: "Join again",
-		noMicrophone: "Your microphone is blocked: allow it in the browser to be heard.",
-		noCamera: "Your camera is blocked: allow it in the browser to be seen.",
-		noDevices: "No camera or microphone was found.",
-		cannotConnect: (name) => `Cannot connect to ${name}`,
-		poorConnection: "Poor connection",
-		goodConnection: "Good connection",
-		sharing: (name) => `${name} is sharing their screen`,
-		youAreSharing: "You are sharing your screen",
-		speaking: "Speaking",
-		preview: "Your camera before you join",
-		guestName: (name) => `${name} (guest)`,
-		denied: "Nobody in the call let you in",
-		waiting: "Waiting for someone in the call to let you in…",
-		askToJoin: "Ask to join",
-		someone: "Someone in the call",
-		guests: "Guests",
-		waitingGuest: (name) => `${name} is waiting to join`,
-		admit: "Let in",
-		deny: "Turn away",
-		remove: "Remove",
-		revoke: "Revoke",
-		newLink: "Create guest link",
-		copyLink: "Copy link",
-		copied: "Copied",
-		guestLinks: "Guest links",
-		noLinks: "No guest link yet. Anyone with a link waits here until someone in the call lets them in.",
-		inLobby: "Waiting to join",
-		guestsInCall: "Guests in the call",
-		guestsMaySend: "Guests may send",
-		sendAll: "Everything",
-		sendCamera: "Camera and mic",
-		sendMicrophone: "Mic only",
-		linkUntil: (until) => `Until ${until}`,
-		linkUntilEnd: "Until the call ends",
-		linkLasts: "The link works",
-		forAnHour: "For an hour",
-		addressesVisible: "In a call between browsers, a guest and the people in the call can see each other’s network addresses.",
-		guestRefused: "This could not be done: the guest or link is gone, the call is full, or guest links are off.",
-		close: "Close",
-		yourName: "Your name",
-		guestIntro: "You are invited to a call. Give your name, check your microphone and camera, and someone in the call lets you in.",
-		continue: "Continue",
-		youLeft: "You left the call"
-	},
-	nl: {
-		accept: "Opnemen",
-		decline: "Weigeren",
-		startCall: "Gesprek starten",
-		join: "Deelnemen",
-		inProgress: "Gesprek bezig",
-		people: (count) => count === 1 ? "1 persoon" : `${count} personen`,
-		joinCall: "Deelnemen aan gesprek",
-		leave: "Verlaten",
-		microphone: "Microfoon",
-		camera: "Camera",
-		shareScreen: "Scherm delen",
-		stopSharing: "Stoppen met delen",
-		muted: "Gedempt",
-		you: "Jij",
-		alone: "Je bent de enige hier",
-		connecting: "Deelnemen…",
-		reconnecting: "Opnieuw verbinden…",
-		full: "Dit gesprek is vol",
-		removed: "Je bent uit dit gesprek gehaald",
-		ended: "Het gesprek is afgelopen",
-		refused: "Je kunt niet aan dit gesprek deelnemen",
-		unavailable: "Het gesprek is nu niet bereikbaar. Probeer het zo opnieuw.",
-		callAgain: "Opnieuw deelnemen",
-		noMicrophone: "Je microfoon is geblokkeerd: sta hem toe in de browser om gehoord te worden.",
-		noCamera: "Je camera is geblokkeerd: sta hem toe in de browser om gezien te worden.",
-		noDevices: "Er is geen camera of microfoon gevonden.",
-		cannotConnect: (name) => `Kan geen verbinding maken met ${name}`,
-		poorConnection: "Slechte verbinding",
-		goodConnection: "Goede verbinding",
-		sharing: (name) => `${name} deelt het scherm`,
-		youAreSharing: "Je deelt je scherm",
-		speaking: "Spreekt",
-		preview: "Je camera voordat je deelneemt",
-		guestName: (name) => `${name} (gast)`,
-		denied: "Niemand in het gesprek heeft je binnengelaten",
-		waiting: "Wachten tot iemand in het gesprek je binnenlaat…",
-		askToJoin: "Vragen om deel te nemen",
-		someone: "Iemand in het gesprek",
-		guests: "Gasten",
-		waitingGuest: (name) => `${name} wacht om deel te nemen`,
-		admit: "Binnenlaten",
-		deny: "Weigeren",
-		remove: "Verwijderen",
-		revoke: "Intrekken",
-		newLink: "Gastlink maken",
-		copyLink: "Link kopiëren",
-		copied: "Gekopieerd",
-		guestLinks: "Gastlinks",
-		noLinks: "Nog geen gastlink. Wie een link heeft, wacht hier tot iemand in het gesprek hem binnenlaat.",
-		inLobby: "Wacht om deel te nemen",
-		guestsInCall: "Gasten in het gesprek",
-		guestsMaySend: "Gasten mogen sturen",
-		sendAll: "Alles",
-		sendCamera: "Camera en microfoon",
-		sendMicrophone: "Alleen geluid",
-		linkUntil: (until) => `Tot ${until}`,
-		linkUntilEnd: "Tot het gesprek afloopt",
-		linkLasts: "De link werkt",
-		forAnHour: "Een uur lang",
-		addressesVisible: "In een gesprek tussen browsers zien een gast en de mensen in het gesprek elkaars netwerkadressen.",
-		guestRefused: "Dit lukte niet: de gast of link is weg, het gesprek is vol, of gastlinks staan uit.",
-		close: "Sluiten",
-		yourName: "Je naam",
-		guestIntro: "Je bent uitgenodigd voor een gesprek. Geef je naam, controleer je microfoon en camera, en iemand in het gesprek laat je binnen.",
-		continue: "Verder",
-		youLeft: "Je hebt het gesprek verlaten"
-	}
-});
+const text = messages("calls");
 //#endregion
 export { text };

package/dist/carousel/carousel-controls.js

@@ -40,7 +40,10 @@ const CarouselControls = ({ carousel, count, swipe, reveal, className }) => {
 				"aria-live": "polite",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sr-only",
-					children: text("photoOf", index + 1, count)
+					children: text("photoOf", {
+						index: index + 1,
+						count
+					})
 				}), /* @__PURE__ */ jsx("span", {
 					className: "flex items-center gap-1 rounded-full bg-background/70 px-1.5 py-1 leading-none",
 					"aria-hidden": true,

package/dist/carousel/messages.js

@@ -1,16 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/carousel/messages.ts
-const text = defineMessages({
-	en: {
-		photoOf: (index, count) => `Photo ${index} of ${count}`,
-		previousPhoto: "Previous photo",
-		nextPhoto: "Next photo"
-	},
-	nl: {
-		photoOf: (index, count) => `Foto ${index} van ${count}`,
-		previousPhoto: "Vorige foto",
-		nextPhoto: "Volgende foto"
-	}
-});
+const text = messages("carousel");
 //#endregion
 export { text };

package/dist/chat/chat-message.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { formatDateTime, formatTime } from "../format/date.js";
 import { Avatar } from "../primitives/avatar.js";
+import { formatDateTime, formatTime } from "../format/date.js";
 import { hueOf, initialsOf } from "../auth/user-to-shell.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-message.tsx

package/dist/chat/messages.js

@@ -1,22 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/chat/messages.ts
-const text = defineMessages({
-	en: {
-		message: "Message",
-		send: "Send",
-		today: "Today",
-		yesterday: "Yesterday",
-		newMessages: "New messages",
-		loadEarlier: "Load earlier messages"
-	},
-	nl: {
-		message: "Bericht",
-		send: "Versturen",
-		today: "Vandaag",
-		yesterday: "Gisteren",
-		newMessages: "Nieuwe berichten",
-		loadEarlier: "Eerdere berichten laden"
-	}
-});
+const text = messages("chat");
 //#endregion
 export { text };

package/dist/compact-table/compact-table.js

@@ -37,7 +37,7 @@ const CompactTable = ({ columns, rows, caption, truncated, className }) => /* @_
 		}),
 		/* @__PURE__ */ jsxs("footer", {
 			className: "border-t border-border px-3 py-1.5 text-[11px] text-muted-foreground",
-			children: [text("rows", rows.length), truncated && text("cutOff")]
+			children: [text("rows", { count: rows.length }), truncated && text("cutOff")]
 		})
 	]
 });

package/dist/compact-table/messages.js

@@ -1,18 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/compact-table/messages.ts
-const text = defineMessages({
-	en: {
-		table: "Table",
-		noRows: "No rows.",
-		rows: (count) => `${count} ${count === 1 ? "row" : "rows"}`,
-		cutOff: ", cut off at the limit"
-	},
-	nl: {
-		table: "Tabel",
-		noRows: "Geen rijen.",
-		rows: (count) => `${count} ${count === 1 ? "rij" : "rijen"}`,
-		cutOff: ", afgekapt bij de limiet"
-	}
-});
+const text = messages("compact-table");
 //#endregion
 export { text };

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

@@ -1,7 +1,6 @@
-import { formatMoney } from "../format/money.js";
-import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime, formatRelativeTime } from "../format/date.js";
-import { userById } from "../mocks/users.js";
+import { formatInt, formatPercent, formatSigned } from "../format/number.js";
+import { formatMoney } from "../format/money.js";
 import { fileShown } from "../live/file-values.js";
 import { text } from "./messages.js";
 import { enumLabel } from "@protobase/schema";
@@ -14,17 +13,19 @@ const cellText = (spec, value) => {
 	switch (spec.kind) {
 		case "text":
 		case "id": return String(value);
-		case "money": return `${formatMoney(Number(value), spec.currency, spec.decimals)}${spec.suffix ?? ""}`;
+		case "money":
+			if (spec.currency === void 0) throw new Error(`Money column "${spec.id}" has no currency`);
+			return `${formatMoney(Number(value), spec.currency, spec.decimals)}${spec.suffix ?? ""}`;
 		case "date": return formatDate(Number(value));
 		case "datetime": return spec.relative ? formatRelativeTime(Math.round((Date.now() - Number(value)) / 1e3)) : formatDateTime(Number(value));
-		case "number": return `${formatInt(Number(value))}${spec.suffix ?? ""}`;
-		case "signed": return `${formatSigned(Number(value))}${spec.suffix ?? ""}`;
+		case "number": return `${spec.prefix ?? ""}${formatInt(Number(value))}${spec.suffix ?? ""}`;
+		case "signed": return `${spec.prefix ?? ""}${formatSigned(Number(value))}${spec.suffix ?? ""}`;
 		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 : text("no");
 		case "file": return fileShown(value)?.name ?? "—";
-		case "user": return userById(String(value)).name;
+		case "user": return spec.users?.(String(value))?.name ?? String(value);
 	}
 };
 //#endregion

package/dist/data-grid/cells.js

@@ -1,15 +1,14 @@
 import { cn } from "../lib/cn.js";
+import { Badge } from "../primitives/badge.js";
+import { Avatar } from "../primitives/avatar.js";
 import { viewerZone, zoneLabel } from "../format/zone.js";
 import { formatDateTime } from "../format/date.js";
-import { userById } from "../mocks/users.js";
-import { Avatar } from "../primitives/avatar.js";
-import { Badge } from "../primitives/badge.js";
 import { fileShown, shownImage } from "../live/file-values.js";
 import { text } from "./messages.js";
 import { cellText } from "./cell-text.js";
+import { valueColor } from "../live/value-color.js";
 import { FileImage } from "../live/file-image.js";
 import { ContactLink } from "../live/contact-link.js";
-import { valueColor } from "../live/value-color.js";
 import { TruncatedText } from "./truncated-text.js";
 import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -41,7 +40,7 @@ const renderCell = (spec, value) => {
 		});
 		case "datetime": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
-			title: spec.relative ? formatDateTime(Number(value)) : text("shownIn", zoneLabel(Number(value), viewerZone())),
+			title: spec.relative ? formatDateTime(Number(value)) : text("shownIn", { zone: zoneLabel(Number(value), viewerZone()) }),
 			children: text$1
 		});
 		case "number": return /* @__PURE__ */ jsx("span", {
@@ -93,7 +92,11 @@ const renderCell = (spec, value) => {
 			});
 		}
 		case "user": {
-			const user = userById(String(value));
+			const user = spec.users?.(String(value));
+			if (!user) return /* @__PURE__ */ jsx(TruncatedText, {
+				text: text$1,
+				className: "text-muted-foreground"
+			});
 			return /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-2 truncate",
 				children: [/* @__PURE__ */ jsx(Avatar, {

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

@@ -12,7 +12,7 @@ const GridFooter = ({ total, selectedCount, bulkActions = [], className }) => /*
 			formatApproxRows(total),
 			selectedCount > 0 && /* @__PURE__ */ jsx("span", {
 				className: "ml-3 font-medium text-primary-text",
-				children: text("selected", formatInt(selectedCount))
+				children: text("selected", { count: formatInt(selectedCount) })
 			}),
 			selectedCount > 0 && bulkActions.map((action) => /* @__PURE__ */ jsx("button", {
 				type: "button",

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

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { formatInt } from "../format/number.js";
-import { Skeleton } from "../primitives/skeleton.js";
 import { text } from "./messages.js";
+import { Skeleton } from "../primitives/skeleton.js";
 import { gridTemplate } from "./grid-template.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { isRightAligned } from "./column-spec.js";
@@ -28,7 +28,7 @@ const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @_
 	style: { width },
 	children: [selectable && /* @__PURE__ */ jsx(Checkbox, {
 		checked: Boolean(selected),
-		label: text("selectRow", index + 1)
+		label: text("selectRow", { row: 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

@@ -18,7 +18,7 @@ const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 		children: [/* @__PURE__ */ jsx("button", {
 			ref: button,
 			type: "button",
-			"aria-label": text("columnMenu", header),
+			"aria-label": text("columnMenu", { header }),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			onClick: () => setOpen(!open),

package/dist/data-grid/messages.js

@@ -1,52 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } 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",
-		resizeColumn: (header) => `Resize ${header} column`,
-		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",
-		resizeColumn: (header) => `Breedte kolom ${header}`,
-		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}.`
-	}
-});
+const text = messages("data-grid");
 //#endregion
 export { text };

package/dist/data-grid/resize-handle.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 const ResizeHandle = ({ id, header, width, resize }) => /* @__PURE__ */ jsx("div", {
 	role: "separator",
 	"aria-orientation": "vertical",
-	"aria-label": text("resizeColumn", header),
+	"aria-label": text("resizeColumn", { header }),
 	"aria-valuemin": 64,
 	"aria-valuenow": width,
 	tabIndex: 0,

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

@@ -17,10 +17,25 @@ const ReorderRows = ({ ids, rowAt, reorder, children }) => {
 		return row ? reorder.label(row) : text("row");
 	};
 	const announcements = {
-		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)
+		onDragStart: ({ active }) => text("pickedUp", {
+			name: name(active.id),
+			row: place(active.id) + 1,
+			rows: ids.length
+		}),
+		onDragOver: ({ active, over }) => over ? text("isOver", {
+			name: name(active.id),
+			row: place(over.id) + 1,
+			rows: ids.length
+		}) : void 0,
+		onDragEnd: ({ active, over }) => over ? text("droppedAt", {
+			name: name(active.id),
+			row: place(over.id) + 1,
+			rows: ids.length
+		}) : text("putBack", { name: name(active.id) }),
+		onDragCancel: ({ active }) => text("cancelled", {
+			name: name(active.id),
+			row: place(active.id) + 1
+		})
 	};
 	const end = ({ active, over }) => {
 		if (!over || active.id === over.id) return;
@@ -47,7 +62,7 @@ const SortableRow = ({ row, label, ...props }) => {
 	const handle = /* @__PURE__ */ jsx("button", {
 		ref: setActivatorNodeRef,
 		type: "button",
-		"aria-label": text("move", label),
+		"aria-label": text("move", { label }),
 		...attributes,
 		...listeners,
 		onClick: (event) => event.stopPropagation(),

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

@@ -16,7 +16,7 @@ const ActiveFilterChips = ({ chips, lockedLabels = [], onRemove, onClear, scroll
 				className: chipClass,
 				children: [chip.label, /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-label": text("remove", chip.label),
+					"aria-label": text("remove", { label: chip.label }),
 					onClick: () => onRemove(chip.key),
 					className: "rounded-full p-0.5 hover:bg-primary-border/60",
 					children: /* @__PURE__ */ jsx(X, { className: "size-3" })

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

@@ -10,10 +10,10 @@ const DatePresets = ({ value, presets = defaultDatePresets, onChange }) => /* @_
 		return /* @__PURE__ */ jsx("button", {
 			type: "button",
 			disabled: !label,
-			title: label ? void 0 : text("unknownPreset", id),
+			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-body 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 ?? text("unsupported", id)
+			children: label ?? text("unsupported", { id })
 		}, id);
 	})
 });

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

@@ -65,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 ? "" : text("searchIn", config.label),
+					placeholder: selected.length > 0 ? "" : text("searchIn", { label: 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),

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

@@ -16,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: text("searchIn", config.label),
+				placeholder: text("searchIn", { label: config.label }),
 				value: query,
 				onChange: (event) => setQuery(event.target.value)
 			}),