@protobase/ui 0.25.2 → 0.25.4

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

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useState } from "react";
@@ -11,22 +12,22 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 	const [email, setEmail] = useState(givenEmail);
 	const [reason, setReason] = useState(givenReason);
 	if (!operator) return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Staff sign-in",
-		description: "Staff of the team that runs this app cannot sign in as people here.",
+		title: text("staffTitle"),
+		description: text("staffUnavailable"),
 		children: [error && /* @__PURE__ */ jsx("p", {
 			role: "alert",
-			className: "mb-4 text-xs font-medium text-danger-text",
+			className: "mb-4 text-body font-medium text-danger-text",
 			children: error
 		}), /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			className: "min-h-10 w-full",
 			onClick: onBack,
-			children: "Back to sign in"
+			children: text("backToSignIn")
 		})]
 	});
 	return /* @__PURE__ */ jsx(AuthLayout, {
-		title: "Sign in as a person",
-		description: `For staff of ${operator}, to help someone with this app.`,
+		title: text("signInAsPerson"),
+		description: text("forStaffOf", operator),
 		children: /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
 			onSubmit: (event) => {
@@ -36,7 +37,7 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 			children: [
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["Their email", /* @__PURE__ */ jsx(Input, {
+					children: [text("theirEmail"), /* @__PURE__ */ jsx(Input, {
 						type: "email",
 						name: "email",
 						required: true,
@@ -48,42 +49,38 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 				}),
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["Reason", /* @__PURE__ */ jsx("textarea", {
+					children: [text("reason"), /* @__PURE__ */ jsx("textarea", {
 						name: "reason",
 						required: true,
 						minLength: minimumReason,
 						rows: 3,
 						value: reason,
-						placeholder: "Ticket 4211: the invoice totals look wrong",
+						placeholder: text("reasonExample"),
 						onChange: (event) => setReason(event.target.value),
 						className: cn("resize-y rounded-md border bg-background px-2.5 py-1.5 font-normal shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", error ? "border-danger" : "border-border-strong")
 					})]
 				}),
-				/* @__PURE__ */ jsxs("p", {
+				/* @__PURE__ */ jsx("p", {
 					className: "text-xs text-muted-foreground",
-					children: [
-						"You sign in at ",
-						operator,
-						" with a passkey or a second step. The session is short, shows a banner, and cannot change their sign-in. The app's admins see who signed in as whom, and why."
-					]
+					children: text("staffExplanation", operator)
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",
-					className: "text-xs font-medium text-danger-text",
+					className: "text-body font-medium text-danger-text",
 					children: error
 				}),
-				/* @__PURE__ */ jsxs(Button, {
+				/* @__PURE__ */ jsx(Button, {
 					variant: "primary",
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: ["Continue with ", operator]
+					children: text("continueWith", operator)
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					onClick: onBack,
 					className: "min-h-10",
-					children: "Back to sign in"
+					children: text("backToSignIn")
 				})
 			]
 		})

package/dist/auth/two-factor-form.js

@@ -1,4 +1,5 @@
 import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { OtpInput } from "../primitives/otp-input.js";
 import { AuthLayout } from "./auth-layout.js";
@@ -7,9 +8,9 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/two-factor-form.tsx
 const instructions = {
-	totp: "Enter the 6-digit code from your authenticator app.",
-	otp: "Enter the 6-digit code we emailed you. It works for 5 minutes.",
-	backup: "Enter one of the backup codes you saved when you set up the authenticator app. Each works once."
+	totp: "totpInstruction",
+	otp: "otpInstruction",
+	backup: "backupInstruction"
 };
 /** The second step of a sign-in, for an account with two-factor authentication. */
 const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, codeSent, initialStep }) => {
@@ -23,18 +24,18 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 		if (next === "otp" && !codeSent) onSendCode();
 	};
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Two-factor authentication",
-		description: "One more step to sign in.",
+		title: text("twoFactorTitle"),
+		description: text("twoFactorDescription"),
 		children: [waitingForEmail ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-4",
 			children: [
 				/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
-					children: "We email you a code to finish signing in."
+					children: text("codeToFinish")
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",
-					className: "text-xs font-medium text-danger-text",
+					className: "text-body font-medium text-danger-text",
 					children: error
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -42,7 +43,7 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 					loading: busy,
 					onClick: onSendCode,
 					className: "min-h-10",
-					children: "Email me a code"
+					children: text("emailCode")
 				})
 			]
 		}) : /* @__PURE__ */ jsxs("form", {
@@ -58,11 +59,11 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 			children: [
 				/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
-					children: instructions[step]
+					children: text(instructions[step])
 				}),
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: [step === "backup" ? "Backup code" : "Code", step === "backup" ? /* @__PURE__ */ jsx(Input, {
+					children: [step === "backup" ? text("backupCode") : text("code"), step === "backup" ? /* @__PURE__ */ jsx(Input, {
 						name: "code",
 						autoComplete: "off",
 						spellCheck: false,
@@ -86,12 +87,12 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 					children: [/* @__PURE__ */ jsx(Checkbox, {
 						checked: trustDevice,
 						onChange: setTrustDevice,
-						label: "Trust this browser"
-					}), "Don't ask again in this browser for 30 days"]
+						label: text("trustBrowser")
+					}), text("trustBrowserFor")]
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",
-					className: "text-xs font-medium text-danger-text",
+					className: "text-body font-medium text-danger-text",
 					children: error
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -99,7 +100,7 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: "Verify"
+					children: text("verify")
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
@@ -109,25 +110,25 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 					type: "button",
 					onClick: () => switchTo("totp"),
 					className: "font-medium text-primary-text hover:underline",
-					children: "Use the authenticator app"
+					children: text("useAuthenticator")
 				}),
 				step !== "otp" && methods.includes("otp") && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => switchTo("otp"),
 					className: "font-medium text-primary-text hover:underline",
-					children: "Email me a code instead"
+					children: text("emailCodeInstead")
 				}),
 				step !== "backup" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => switchTo("backup"),
 					className: "font-medium text-primary-text hover:underline",
-					children: "Use a backup code"
+					children: text("useBackupCode")
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onBack,
 					className: "font-medium text-muted-foreground hover:underline",
-					children: "Back to sign in"
+					children: text("backToSignIn")
 				})
 			]
 		})]

package/dist/auth/user-to-shell.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 //#region src/auth/user-to-shell.ts
 /** The hue of someone's avatar, the same for the same id. */
 const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
@@ -15,7 +16,7 @@ const userToShell = (user) => {
 		email: user.email,
 		initials: initialsOf(user.name || user.email) || "?",
 		hue: hueOf(user.id || user.email),
-		role: admin ? "Admin" : (roles[0] ?? "user").replace(/^./, (char) => char.toUpperCase()),
+		role: admin ? text("admin") : (roles[0] ?? "user").replace(/^./, (char) => char.toUpperCase()),
 		roleTone: admin ? "violet" : "blue"
 	};
 };

package/dist/chat/composer.js

@@ -1,17 +1,18 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
 import { useState } from "react";
 import { SendHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer.tsx
 /** The text box under a chat. Enter or the button sends the trimmed text and clears the box. */
 const Composer = ({ onSend, busy, placeholder, inputRef }) => {
-	const [text, setText] = useState("");
-	const message = text.trim();
+	const [draft, setDraft] = useState("");
+	const message = draft.trim();
 	const send = () => {
 		if (!message || busy) return;
 		onSend?.(message);
-		setText("");
+		setDraft("");
 	};
 	return /* @__PURE__ */ jsxs("form", {
 		className: "flex gap-2",
@@ -21,16 +22,16 @@ const Composer = ({ onSend, busy, placeholder, inputRef }) => {
 		},
 		children: [/* @__PURE__ */ jsx(Input, {
 			ref: inputRef,
-			"aria-label": "Message",
+			"aria-label": text("message"),
 			placeholder,
-			value: text,
-			onChange: (event) => setText(event.target.value),
+			value: draft,
+			onChange: (event) => setDraft(event.target.value),
 			wrapperClassName: "flex-1"
 		}), /* @__PURE__ */ jsx(Button, {
 			type: "submit",
 			variant: "primary",
 			className: "w-8 px-0",
-			"aria-label": "Send",
+			"aria-label": text("send"),
 			disabled: !message || busy,
 			children: /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
 		})]

package/dist/chat/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/chat/messages.ts
+const text = defineMessages({
+	en: {
+		message: "Message",
+		send: "Send"
+	},
+	nl: {
+		message: "Bericht",
+		send: "Versturen"
+	}
+});
+//#endregion
+export { text };

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

@@ -1,10 +1,11 @@
 import { cn } from "../lib/cn.js";
 import { formatCell } from "./format-cell.js";
+import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/compact-table/compact-table.tsx
 /** A small read-only table of raw values with a row count, for narrow places such as a side panel. */
 const CompactTable = ({ columns, rows, caption, truncated, className }) => /* @__PURE__ */ jsxs("section", {
-	"aria-label": caption ?? "Table",
+	"aria-label": caption ?? text("table"),
 	className: cn("shrink-0 overflow-hidden rounded-lg border border-border-strong bg-background shadow-sm", className),
 	children: [
 		caption && /* @__PURE__ */ jsx("code", {
@@ -13,7 +14,7 @@ const CompactTable = ({ columns, rows, caption, truncated, className }) => /* @_
 		}),
 		rows.length === 0 ? /* @__PURE__ */ jsx("p", {
 			className: "px-3 py-2 text-xs text-muted-foreground",
-			children: "No rows."
+			children: text("noRows")
 		}) : /* @__PURE__ */ jsx("div", {
 			className: "max-h-64 overflow-auto",
 			children: /* @__PURE__ */ jsxs("table", {
@@ -36,12 +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: [
-				rows.length,
-				" ",
-				rows.length === 1 ? "row" : "rows",
-				truncated && ", cut off at the limit"
-			]
+			children: [text("rows", rows.length), truncated && text("cutOff")]
 		})
 	]
 });

package/dist/compact-table/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } 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"
+	}
+});
+//#endregion
+export { text };

package/dist/data/meta-data.d.ts

@@ -1,5 +1,5 @@
-import { MapLayerModel, PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { Locale } from "@protobase/schema/internal";
+import { MapLayerModel, PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { BottomBarModel, ResourceModel, SignInViewModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts

package/dist/data/use-update-record.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { PreconditionFailedError } from "@protobase/client";
 import { encodeKey } from "@protobase/schema/internal";
+import { PreconditionFailedError } from "@protobase/client";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-update-record.ts
 /**

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

@@ -20,7 +20,7 @@ const HeaderLabel = ({ spec }) => /* @__PURE__ */ jsxs(Fragment, { children: [/*
 	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",
+	className: "grid h-8 shrink-0 items-center border-b bg-surface text-body font-medium text-muted-foreground",
 	style: { gridTemplateColumns: gridTemplate(specs, gutter, trailing, minScale) },
 	role: "row",
 	children: [

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

@@ -12,7 +12,7 @@ const DatePresets = ({ value, presets = defaultDatePresets, onChange }) => /* @_
 			disabled: !label,
 			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"),
+			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)
 		}, id);
 	})

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

@@ -70,7 +70,7 @@ const LoadedForm = ({ form }) => {
 		size: "md",
 		children: /* @__PURE__ */ jsx("p", {
 			role: "status",
-			className: "rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+			className: "rounded-md bg-success-soft px-3 py-2 text-body font-medium text-success-text",
 			children: form.thanks
 		})
 	});

package/dist/inline-child-table/inline-child-table.js

@@ -1,6 +1,7 @@
 import { Button } from "../primitives/button.js";
 import { productAt } from "../mocks/products.js";
 import { lineGrid } from "./columns.js";
+import { text } from "./messages.js";
 import { LineRow } from "./line-row.js";
 import { reorder } from "./reorder.js";
 import { TotalsFooter } from "./totals-footer.js";
@@ -10,15 +11,14 @@ import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, us
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 //#region src/inline-child-table/inline-child-table.tsx
 const headerCell = "px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground";
-const instructions = "To pick up a line, press space or enter on its drag handle. Use the up and down arrow keys to move it, space or enter to drop it, and escape to cancel. The row menu also has Move up and Move down.";
 const announcementsFor = (lines) => {
-	const name = (id) => lines.find((line) => line.id === id)?.description ?? "line";
+	const name = (id) => lines.find((line) => line.id === id)?.description ?? text("line");
 	const place = (id) => lines.findIndex((line) => line.id === id) + 1;
 	return {
-		onDragStart: ({ active }) => `Picked up ${name(active.id)}, line ${place(active.id)} of ${lines.length}.`,
-		onDragOver: ({ active, over }) => over ? `${name(active.id)} is over line ${place(over.id)} of ${lines.length}.` : void 0,
-		onDragEnd: ({ active, over }) => over ? `${name(active.id)} was dropped at line ${place(over.id)} of ${lines.length}.` : `${name(active.id)} was dropped where it started.`,
-		onDragCancel: ({ active }) => `Moving ${name(active.id)} was cancelled. It is back at line ${place(active.id)}.`
+		onDragStart: ({ active }) => text("pickedUp", name(active.id), place(active.id), lines.length),
+		onDragOver: ({ active, over }) => over ? text("over", name(active.id), place(over.id), lines.length) : void 0,
+		onDragEnd: ({ active, over }) => over ? text("dropped", name(active.id), place(over.id), lines.length) : text("droppedAtStart", name(active.id)),
+		onDragCancel: ({ active }) => text("cancelled", name(active.id), place(active.id))
 	};
 };
 const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly, reorderable = !readOnly }) => {
@@ -58,19 +58,19 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 					/* @__PURE__ */ jsx("span", {}),
 					/* @__PURE__ */ jsx("span", {
 						className: headerCell,
-						children: "Item"
+						children: text("item")
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: `${headerCell} text-right`,
-						children: "Qty"
+						children: text("qty")
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: `${headerCell} text-right`,
-						children: "Unit price"
+						children: text("unitPrice")
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: `${headerCell} text-right`,
-						children: "Line total"
+						children: text("lineTotal")
 					}),
 					/* @__PURE__ */ jsx("span", {})
 				]
@@ -81,7 +81,7 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 				onDragEnd,
 				accessibility: {
 					announcements: announcementsFor(lines),
-					screenReaderInstructions: { draggable: instructions }
+					screenReaderInstructions: { draggable: text("instructions") }
 				},
 				children: /* @__PURE__ */ jsx(SortableContext, {
 					items: lines.map((line) => line.id),
@@ -107,7 +107,7 @@ const InlineChildTable = ({ lines, onChange, onReorder, vatRate = .21, readOnly,
 					variant: "ghost",
 					size: "sm",
 					onClick: addLine,
-					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), "Add line"]
+					children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), text("addLine")]
 				})
 			})
 		]

package/dist/inline-child-table/line-row.js

@@ -4,26 +4,27 @@ import { lineTotalCents } from "../mocks/invoices.js";
 import { lineGrid } from "./columns.js";
 import { LineMenu } from "./line-menu.js";
 import { NumberCell } from "./number-cell.js";
+import { text } from "./messages.js";
 import { GripVertical } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 //#region src/inline-child-table/line-row.tsx
-const parseEuros = (text) => Math.round(Number(text.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
+const parseEuros = (typed) => Math.round(Number(typed.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
 const LineRow = ({ line, position, count, reorderable, editable, onChange, onRemove, onMove }) => {
 	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
 		id: line.id,
 		disabled: !reorderable
 	});
 	const menu = [...reorderable ? [{
-		label: "Move up",
+		label: text("moveUp"),
 		disabled: position === 0,
 		onSelect: () => onMove(position - 1)
 	}, {
-		label: "Move down",
+		label: text("moveDown"),
 		disabled: position === count - 1,
 		onSelect: () => onMove(position + 1)
 	}] : [], ...editable ? [{
-		label: "Remove line",
+		label: text("removeLine"),
 		destructive: true,
 		onSelect: onRemove
 	}] : []];
@@ -39,7 +40,7 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 			reorderable ? /* @__PURE__ */ jsx("button", {
 				ref: setActivatorNodeRef,
 				type: "button",
-				"aria-label": `Drag to reorder ${line.description}`,
+				"aria-label": text("dragToReorder", line.description),
 				...attributes,
 				...listeners,
 				style: { touchAction: "none" },
@@ -57,17 +58,17 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 				})]
 			}),
 			editable ? /* @__PURE__ */ jsx(NumberCell, {
-				label: "Quantity",
+				label: text("quantity"),
 				value: line.quantity,
 				format: String,
-				parse: (text) => Math.round(Number(text)),
+				parse: (typed) => Math.round(Number(typed)),
 				onCommit: (quantity) => onChange({ quantity })
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "px-2 text-right tabular-nums",
 				children: line.quantity
 			}),
 			editable ? /* @__PURE__ */ jsx(NumberCell, {
-				label: "Unit price",
+				label: text("unitPrice"),
 				value: line.unitPriceCents,
 				format: (cents) => (cents / 100).toFixed(2),
 				parse: parseEuros,
@@ -81,7 +82,7 @@ const LineRow = ({ line, position, count, reorderable, editable, onChange, onRem
 				children: formatMoney(lineTotalCents(line))
 			}),
 			menu.length > 0 ? /* @__PURE__ */ jsx(LineMenu, {
-				label: `Actions for ${line.description}`,
+				label: text("actionsFor", line.description),
 				items: menu
 			}) : /* @__PURE__ */ jsx("span", {})
 		]

package/dist/inline-child-table/messages.js

@@ -0,0 +1,52 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/inline-child-table/messages.ts
+const text = defineMessages({
+	en: {
+		instructions: "To pick up a line, press space or enter on its drag handle. Use the up and down arrow keys to move it, space or enter to drop it, and escape to cancel. The row menu also has Move up and Move down.",
+		line: "line",
+		pickedUp: (name, place, count) => `Picked up ${name}, line ${place} of ${count}.`,
+		over: (name, place, count) => `${name} is over line ${place} of ${count}.`,
+		dropped: (name, place, count) => `${name} was dropped at line ${place} of ${count}.`,
+		droppedAtStart: (name) => `${name} was dropped where it started.`,
+		cancelled: (name, place) => `Moving ${name} was cancelled. It is back at line ${place}.`,
+		item: "Item",
+		qty: "Qty",
+		quantity: "Quantity",
+		unitPrice: "Unit price",
+		lineTotal: "Line total",
+		addLine: "Add line",
+		moveUp: "Move up",
+		moveDown: "Move down",
+		removeLine: "Remove line",
+		dragToReorder: (name) => `Drag to reorder ${name}`,
+		actionsFor: (name) => `Actions for ${name}`,
+		subtotal: "Subtotal",
+		vat: (percent) => `VAT ${percent}%`,
+		total: "Total"
+	},
+	nl: {
+		instructions: "Druk op spatie of enter op de sleepgreep om een regel op te pakken. Verplaats hem met de pijltjestoetsen omhoog en omlaag, zet hem neer met spatie of enter, en annuleer met escape. Het regelmenu heeft ook Omhoog en Omlaag.",
+		line: "regel",
+		pickedUp: (name, place, count) => `${name} opgepakt, regel ${place} van ${count}.`,
+		over: (name, place, count) => `${name} is boven regel ${place} van ${count}.`,
+		dropped: (name, place, count) => `${name} is neergezet op regel ${place} van ${count}.`,
+		droppedAtStart: (name) => `${name} is neergezet waar hij begon.`,
+		cancelled: (name, place) => `Verplaatsen van ${name} is geannuleerd. Hij staat weer op regel ${place}.`,
+		item: "Artikel",
+		qty: "Aantal",
+		quantity: "Aantal",
+		unitPrice: "Stukprijs",
+		lineTotal: "Regeltotaal",
+		addLine: "Regel toevoegen",
+		moveUp: "Omhoog",
+		moveDown: "Omlaag",
+		removeLine: "Regel verwijderen",
+		dragToReorder: (name) => `Sleep om ${name} te verplaatsen`,
+		actionsFor: (name) => `Acties voor ${name}`,
+		subtotal: "Subtotaal",
+		vat: (percent) => `Btw ${percent}%`,
+		total: "Totaal"
+	}
+});
+//#endregion
+export { text };

package/dist/inline-child-table/totals-footer.js

@@ -1,5 +1,6 @@
 import { formatMoney } from "../format/money.js";
 import { invoiceTotals } from "../mocks/invoices.js";
+import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inline-child-table/totals-footer.tsx
 const TotalsFooter = ({ lines, vatRate }) => {
@@ -9,19 +10,15 @@ const TotalsFooter = ({ lines, vatRate }) => {
 		children: [
 			/* @__PURE__ */ jsx("dt", {
 				className: "text-muted-foreground",
-				children: "Subtotal"
+				children: text("subtotal")
 			}),
 			/* @__PURE__ */ jsx("dd", {
 				className: "text-right text-foreground",
 				children: formatMoney(totals.subtotalCents)
 			}),
-			/* @__PURE__ */ jsxs("dt", {
+			/* @__PURE__ */ jsx("dt", {
 				className: "text-muted-foreground",
-				children: [
-					"VAT ",
-					Math.round(vatRate * 100),
-					"%"
-				]
+				children: text("vat", Math.round(vatRate * 100))
 			}),
 			/* @__PURE__ */ jsx("dd", {
 				className: "text-right text-foreground",
@@ -29,7 +26,7 @@ const TotalsFooter = ({ lines, vatRate }) => {
 			}),
 			/* @__PURE__ */ jsx("dt", {
 				className: "mt-1 border-t border-border pt-2 font-semibold text-foreground",
-				children: "Total"
+				children: text("total")
 			}),
 			/* @__PURE__ */ jsx("dd", {
 				className: "mt-1 border-t border-border pt-2 text-right text-[16px] font-semibold text-foreground",

package/dist/invitations/invite-form.js

@@ -2,6 +2,7 @@ import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AccountSection, SectionError } from "../account/account-section.js";
 import { useAction } from "../organizations/use-action.js";
+import { text } from "./messages.js";
 import { LinkNotice } from "./link-notice.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -30,7 +31,7 @@ const InviteForm = ({ title, description, onInvite, beside, children, incomplete
 					className: "flex flex-col gap-2 sm:flex-row",
 					children: [
 						/* @__PURE__ */ jsx(Input, {
-							"aria-label": "Email",
+							"aria-label": text("email"),
 							type: "email",
 							placeholder: "name@example.com",
 							value: email,
@@ -43,7 +44,7 @@ const InviteForm = ({ title, description, onInvite, beside, children, incomplete
 							variant: "primary",
 							loading: busy,
 							disabled: !email.trim() || incomplete,
-							children: "Invite"
+							children: text("invite")
 						})
 					]
 				}), children]