@protobase/ui 0.25.2 → 0.25.3

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

@@ -1,5 +1,6 @@
 import { RouteLink } from "../primitives/route-link.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 { ProviderIcon } from "./provider-icon.js";
@@ -11,7 +12,7 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 	className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
 	children: [
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
-		"or",
+		text("or"),
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
@@ -28,7 +29,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 		onSendCode?.(email.trim());
 	};
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Sign in to Protobase",
+		title: text("signInTitle"),
 		description: workspace,
 		children: [
 			notice && /* @__PURE__ */ jsx("p", {
@@ -43,25 +44,21 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						onClick: () => onContinueWith?.(provider.id),
 						disabled: busy,
 						className: "min-h-10 w-full",
-						children: [
-							/* @__PURE__ */ jsx(ProviderIcon, { id: provider.id }),
-							"Continue with ",
-							provider.name
-						]
+						children: [/* @__PURE__ */ jsx(ProviderIcon, { id: provider.id }), text("continueWith", provider.name)]
 					}, provider.id)),
 					withPasskey && /* @__PURE__ */ jsxs(Button, {
 						onClick: () => onPasskey?.(),
 						disabled: busy,
 						className: "min-h-10 w-full",
-						children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Sign in with a passkey"]
+						children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), text("signInWithPasskey")]
 					}),
-					withPasskey && passkeyDomains.slice(1).map((domain) => /* @__PURE__ */ jsxs(Button, {
+					withPasskey && passkeyDomains.slice(1).map((domain) => /* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						size: "sm",
 						onClick: () => onPasskey?.(domain),
 						disabled: busy,
 						className: "w-full",
-						children: ["Use a passkey made for ", domain]
+						children: text("passkeyFor", domain)
 					}, domain))
 				]
 			}), withPassword || withCode ? /* @__PURE__ */ jsx(Divider, {}) : error && /* @__PURE__ */ jsx("p", {
@@ -79,7 +76,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 				children: [
 					/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 font-medium",
-						children: ["Email", /* @__PURE__ */ jsx(Input, {
+						children: [text("email"), /* @__PURE__ */ jsx(Input, {
 							ref: emailInput,
 							type: "email",
 							name: "email",
@@ -94,7 +91,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 					}),
 					withPassword && /* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 font-medium",
-						children: ["Password", /* @__PURE__ */ jsx(Input, {
+						children: [text("password"), /* @__PURE__ */ jsx(Input, {
 							type: "password",
 							name: "password",
 							autoComplete: "current-password",
@@ -115,7 +112,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						type: "submit",
 						loading: busy,
 						className: "min-h-10",
-						children: "Sign in"
+						children: text("signIn")
 					}),
 					withCode && /* @__PURE__ */ jsxs(Button, {
 						variant: withPassword ? "secondary" : "primary",
@@ -124,24 +121,24 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						loading: busy && !withPassword,
 						disabled: busy,
 						className: "min-h-10",
-						children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a sign-in code"]
+						children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), text("emailSignInCode")]
 					}),
 					withPassword && forgotPassword && /* @__PURE__ */ jsx(RouteLink, {
 						to: forgotPassword,
 						className: "self-center font-medium text-primary-text hover:underline",
-						children: "Forgot password?"
+						children: text("forgotPassword")
 					})
 				]
 			}),
 			signUp && /* @__PURE__ */ jsxs("p", {
 				className: "mt-4 text-center text-muted-foreground",
 				children: [
-					"New here?",
+					text("newHere"),
 					" ",
 					/* @__PURE__ */ jsx(RouteLink, {
 						to: signUp,
 						className: "font-medium text-primary-text hover:underline",
-						children: "Create an account"
+						children: text("createAnAccount")
 					})
 				]
 			}),
@@ -149,7 +146,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 				type: "button",
 				onClick: onBrowse,
 				className: "mt-4 w-full text-center font-medium text-muted-foreground hover:text-foreground hover:underline",
-				children: "Continue without signing in"
+				children: text("browse")
 			})
 		]
 	});

package/dist/auth/sign-in-prompt.js

@@ -1,4 +1,5 @@
 import { RouteLink } from "../primitives/route-link.js";
+import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { useSignInAddress } from "./use-sign-in-address.js";
@@ -31,12 +32,12 @@ const Actions = ({ prompt }) => {
 	}) : canSignUp && /* @__PURE__ */ jsx(RouteLink, {
 		to: link("sign-up"),
 		className: primary,
-		children: "Create an account"
+		children: text("createAnAccount")
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RouteLink, {
 		to: link(),
 		className: signUp ? buttonClass() : primary,
-		children: "Sign in"
+		children: text("signIn")
 	}), signUp] });
 };
 /**
@@ -55,7 +56,7 @@ const SignInPrompt = (props) => {
 		onClose: props.onClose,
 		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 			onClick: props.onClose,
-			children: "Not now"
+			children: text("notNow")
 		}), /* @__PURE__ */ jsx(Actions, { prompt })] }),
 		children: /* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits })
 	});

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

@@ -1,21 +1,19 @@
+import { text } from "./messages.js";
 import { CodeForm } from "./code-form.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { slotted } from "../locale/slotted.js";
+import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/auth/sign-up-code-form.tsx
 /** The second step of making an account: the emailed code on its own, before the name and password. */
 const SignUpCodeForm = ({ email, onBack, ...rest }) => /* @__PURE__ */ jsx(CodeForm, {
-	title: "Check your email",
-	description: "Enter the code we sent to create your account.",
-	explanation: /* @__PURE__ */ jsxs(Fragment, { children: [
-		"A 6-digit code is on its way to ",
-		/* @__PURE__ */ jsx("span", {
-			className: "font-medium text-foreground",
-			children: email
-		}),
-		". It works for 5 minutes, once. If the address has an account already, the email says so instead."
-	] }),
-	submitLabel: "Continue",
+	title: text("checkEmail"),
+	description: text("signUpCodeDescription"),
+	explanation: /* @__PURE__ */ jsx(Fragment, { children: slotted(text("signUpCodeSent"), /* @__PURE__ */ jsx("span", {
+		className: "font-medium text-foreground",
+		children: email
+	})) }),
+	submitLabel: text("continue"),
 	onChangeAddress: onBack,
-	changeAddressLabel: "Use another address",
+	changeAddressLabel: text("useAnotherAddress"),
 	...rest
 });
 //#endregion

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

@@ -1,6 +1,8 @@
 import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
+import { slotted } from "../locale/slotted.js";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-up-details-form.tsx
@@ -12,18 +14,14 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 	const withPassword = methods.includes("password");
 	const passwordOptional = methods.includes("emailCode");
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Your details",
-		description: "One last step to create your account.",
-		children: [/* @__PURE__ */ jsxs("p", {
+		title: text("detailsTitle"),
+		description: text("detailsDescription"),
+		children: [/* @__PURE__ */ jsx("p", {
 			className: "mb-4 text-muted-foreground",
-			children: [
-				"The code was right: the account is for ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium text-foreground",
-					children: email
-				}),
-				"."
-			]
+			children: slotted(text("codeWasRight"), /* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: email
+			}))
 		}), /* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
 			onSubmit: (event) => {
@@ -36,7 +34,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 			children: [
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["Your name", /* @__PURE__ */ jsx(Input, {
+					children: [text("yourName"), /* @__PURE__ */ jsx(Input, {
 						name: "name",
 						autoComplete: "name",
 						required: true,
@@ -51,7 +49,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 					className: "flex flex-col gap-1.5",
 					children: [/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 font-medium",
-						children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
+						children: [passwordOptional ? text("passwordOptional") : text("password"), /* @__PURE__ */ jsx(Input, {
 							type: "password",
 							name: "password",
 							autoComplete: "new-password",
@@ -66,12 +64,7 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 					}), /* @__PURE__ */ jsxs("p", {
 						id: passwordHint,
 						className: "text-xs text-muted-foreground",
-						children: [
-							"At least ",
-							12,
-							" characters.",
-							passwordOptional && " Without one, you sign in with a code we email you."
-						]
+						children: [text("atLeast", 12), passwordOptional && text("withoutPassword")]
 					})]
 				}),
 				error && /* @__PURE__ */ jsx("p", {
@@ -84,13 +77,13 @@ const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) =>
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: "Create account"
+					children: text("createAccount")
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					onClick: onBack,
 					className: "min-h-10",
-					children: "Use another address"
+					children: text("useAnotherAddress")
 				})
 			]
 		})]

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

@@ -1,4 +1,5 @@
 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";
@@ -9,7 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace }) => {
 	const [email, setEmail] = useState("");
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Create an account",
+		title: text("createAnAccount"),
 		description: workspace,
 		children: [/* @__PURE__ */ jsxs("form", {
 			className: "flex flex-col gap-4",
@@ -20,7 +21,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 			children: [
 				/* @__PURE__ */ jsxs("label", {
 					className: "flex flex-col gap-1.5 font-medium",
-					children: ["Email", /* @__PURE__ */ jsx(Input, {
+					children: [text("email"), /* @__PURE__ */ jsx(Input, {
 						type: "email",
 						name: "email",
 						autoComplete: "email",
@@ -34,7 +35,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 				}),
 				/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
-					children: "We email you a code to make sure the address is yours."
+					children: text("codeToConfirm")
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					role: "alert",
@@ -46,18 +47,18 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 					type: "submit",
 					loading: busy,
 					className: "min-h-10",
-					children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a code"]
+					children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), text("emailCode")]
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					className: "text-center text-muted-foreground",
 					children: [
-						"Have an account?",
+						text("haveAccount"),
 						" ",
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: onSignIn,
 							className: "font-medium text-primary-text hover:underline",
-							children: "Sign in"
+							children: text("signIn")
 						})
 					]
 				})
@@ -66,7 +67,7 @@ const SignUpEmailForm = ({ onSubmit, onSignIn, onBrowse, busy, error, workspace
 			type: "button",
 			onClick: onBrowse,
 			className: "mt-4 w-full text-center font-medium text-muted-foreground hover:text-foreground hover:underline",
-			children: "Continue without an account"
+			children: text("browseWithoutAccount")
 		})]
 	});
 };

package/dist/auth/sign-up-page.js

@@ -1,4 +1,5 @@
 import { authMessage } from "./auth-messages.js";
+import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { SignUpCodeForm } from "./sign-up-code-form.js";
 import { SignUpDetailsForm } from "./sign-up-details-form.js";
@@ -49,7 +50,7 @@ const SignUpPage = ({ workspace, email, ticket, onCodeSent, onVerified, onBack,
 		onSubmit: (code) => void attempt(async () => onVerified(await verifySignUpCode(email, code))),
 		onResend: () => void attempt(async () => {
 			await sendSignUpCode(email);
-			setNotice("A new code is on its way. Only the newest one works.");
+			setNotice(text("newCodeSent"));
 		})
 	});
 	return /* @__PURE__ */ jsx(SignUpDetailsForm, {

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,8 +12,8 @@ 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",
@@ -21,12 +22,12 @@ const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason
 			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",
 					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,14 +24,14 @@ 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",
@@ -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,8 +87,8 @@ 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",
@@ -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")]
 		})
 	]
 });