@protobase/ui 0.23.3 → 0.23.5

package/dist/format/date.js

@@ -1,77 +1,69 @@
+import { cachedFormat } from "./intl-cache.js";
+import { text } from "./messages.js";
 import { viewerZone } from "./zone.js";
 //#region src/format/date.ts
-const day = new Intl.DateTimeFormat("en-GB", {
+const dateFormat = (name, options) => () => cachedFormat(`date:${name}`, (tag) => new Intl.DateTimeFormat(tag, {
+	...options,
+	timeZone: "UTC"
+}));
+const day = dateFormat("day", {
 	day: "numeric",
 	month: "short",
-	year: "numeric",
-	timeZone: "UTC"
+	year: "numeric"
 });
-const dayShort = new Intl.DateTimeFormat("en-GB", {
+const dayShort = dateFormat("dayShort", {
 	day: "numeric",
-	month: "short",
-	timeZone: "UTC"
+	month: "short"
 });
-const month = new Intl.DateTimeFormat("en-GB", {
+const month = dateFormat("month", {
 	month: "long",
-	year: "numeric",
-	timeZone: "UTC"
+	year: "numeric"
 });
-const weekday = new Intl.DateTimeFormat("en-GB", {
-	weekday: "short",
-	timeZone: "UTC"
-});
-const weekdayDate = new Intl.DateTimeFormat("en-GB", {
+const weekday = dateFormat("weekday", { weekday: "short" });
+const weekdayDate = dateFormat("weekdayDate", {
 	weekday: "long",
 	day: "numeric",
 	month: "short",
-	year: "numeric",
-	timeZone: "UTC"
+	year: "numeric"
 });
-const formatDate = (ms) => day.format(ms);
-const formatDayShort = (ms) => dayShort.format(ms);
-const zoned = /* @__PURE__ */ new Map();
-const zonedFormats = (zone) => {
-	const known = zoned.get(zone);
-	if (known) return known;
-	const formats = {
-		day: new Intl.DateTimeFormat("en-GB", {
-			day: "numeric",
-			month: "short",
-			year: "numeric",
-			timeZone: zone
-		}),
-		time: new Intl.DateTimeFormat("en-GB", {
-			hour: "2-digit",
-			minute: "2-digit",
-			hour12: false,
-			timeZone: zone
-		})
-	};
-	zoned.set(zone, formats);
-	return formats;
-};
+const formatDate = (ms) => day().format(ms);
+const formatDayShort = (ms) => dayShort().format(ms);
+const zonedFormats = (zone) => cachedFormat(`zoned:${zone}`, (tag) => ({
+	day: new Intl.DateTimeFormat(tag, {
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		timeZone: zone
+	}),
+	time: new Intl.DateTimeFormat(tag, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false,
+		timeZone: zone
+	})
+}));
 /** "6 Oct 2026, 16:32": an instant on the clock of `zone`, the viewer's unless given. */
 const formatDateTime = (ms, zone = viewerZone()) => {
 	const formats = zonedFormats(zone);
 	return `${formats.day.format(ms)}, ${formats.time.format(ms)}`;
 };
 /** "October 2026". */
-const formatMonth = (ms) => month.format(ms);
+const formatMonth = (ms) => month().format(ms);
 /** "Mon". */
-const formatWeekday = (ms) => weekday.format(ms);
+const formatWeekday = (ms) => weekday().format(ms);
 /** "Monday, 12 Oct 2026". */
-const formatWeekdayDate = (ms) => weekdayDate.format(ms);
+const formatWeekdayDate = (ms) => weekdayDate().format(ms);
 /** "12–18 Oct 2026", "28 Dec 2026 – 3 Jan 2027": the days from `from` to `to`, both included. */
-const formatDayRange = (from, to) => day.formatRange(from, to);
+const formatDayRange = (from, to) => day().formatRange(from, to);
 /** "09:30": an instant's time on the clock of `zone`, the viewer's unless given. */
 const formatTime = (ms, zone = viewerZone()) => zonedFormats(zone).time.format(ms);
 const formatAgo = (seconds) => {
-	if (seconds < 60) return `${seconds} s ago`;
-	if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;
-	if (seconds < 86400) return `${Math.floor(seconds / 3600)} h ago`;
-	return `${Math.floor(seconds / 86400)} d ago`;
+	if (seconds < 60) return text("secondsAgo", seconds);
+	if (seconds < 3600) return text("minutesAgo", Math.floor(seconds / 60));
+	if (seconds < 86400) return text("hoursAgo", Math.floor(seconds / 3600));
+	return text("daysAgo", Math.floor(seconds / 86400));
 };
-const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const relative = () => cachedFormat("relative", (tag) => new Intl.RelativeTimeFormat(tag, { numeric: "auto" }));
 const units = [
 	["year", 31536e3],
 	["month", 2592e3],
@@ -83,8 +75,8 @@ const units = [
 const formatRelativeTime = (seconds) => {
 	const away = Math.abs(seconds);
 	const [unit, size] = units.find(([, size]) => away >= size) ?? ["second", 1];
-	if (unit === "second" && away < 45) return "just now";
-	return relative.format(-Math.sign(seconds) * Math.floor(away / size), unit);
+	if (unit === "second" && away < 45) return text("justNow");
+	return relative().format(-Math.sign(seconds) * Math.floor(away / size), unit);
 };
 //#endregion
 export { formatAgo, formatDate, formatDateTime, formatDayRange, formatDayShort, formatMonth, formatRelativeTime, formatTime, formatWeekday, formatWeekdayDate };

package/dist/format/intl-cache.js

@@ -0,0 +1,12 @@
+import { formatTag } from "../locale/active-locale.js";
+//#region src/format/intl-cache.ts
+const cache = /* @__PURE__ */ new Map();
+/** One `Intl` formatter per language tag and `key`, made with `make` for the active locale's tag the first time. */
+const cachedFormat = (key, make) => {
+	const tag = formatTag();
+	const id = `${tag}|${key}`;
+	if (!cache.has(id)) cache.set(id, make(tag));
+	return cache.get(id);
+};
+//#endregion
+export { cachedFormat };

package/dist/format/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/format/messages.ts
+const text = defineMessages({
+	en: {
+		rows: (count) => `${count} rows`,
+		aboutRows: (count) => `about ${count} rows`,
+		secondsAgo: (count) => `${count} s ago`,
+		minutesAgo: (count) => `${count} min ago`,
+		hoursAgo: (count) => `${count} h ago`,
+		daysAgo: (count) => `${count} d ago`,
+		justNow: "just now"
+	},
+	nl: {
+		rows: (count) => `${count} rijen`,
+		aboutRows: (count) => `ongeveer ${count} rijen`,
+		secondsAgo: (count) => `${count} s geleden`,
+		minutesAgo: (count) => `${count} min geleden`,
+		hoursAgo: (count) => `${count} u geleden`,
+		daysAgo: (count) => `${count} d geleden`,
+		justNow: "zojuist"
+	}
+});
+//#endregion
+export { text };

package/dist/format/money.js

@@ -1,20 +1,13 @@
+import { cachedFormat } from "./intl-cache.js";
 //#region src/format/money.ts
-const formatters = /* @__PURE__ */ new Map();
-const formatterFor = (currency, decimals) => {
-	const key = `${currency}:${decimals ?? ""}`;
-	const cached = formatters.get(key);
-	if (cached) return cached;
-	const created = new Intl.NumberFormat("en-IE", {
-		style: "currency",
-		currency,
-		...decimals !== void 0 && {
-			minimumFractionDigits: decimals,
-			maximumFractionDigits: decimals
-		}
-	});
-	formatters.set(key, created);
-	return created;
-};
+const formatterFor = (currency, decimals) => cachedFormat(`money:${currency}:${decimals ?? ""}`, (tag) => new Intl.NumberFormat(tag, {
+	style: "currency",
+	currency,
+	...decimals !== void 0 && {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	}
+}));
 /** An amount in cents in the currency, with its usual decimals or `decimals` of them. */
 const formatMoney = (cents, currency = "EUR", decimals) => formatterFor(currency, decimals).format(cents / 100);
 //#endregion

package/dist/format/number-text.js

@@ -1,6 +1,7 @@
+import { formatTag } from "../locale/active-locale.js";
 //#region src/format/number-text.ts
-/** The decimal separator `locale` writes, the browser's language unless given: `,` for nl-NL and de-DE, `.` for en-GB. */
-const localeDecimal = (locale) => new Intl.NumberFormat(locale).formatToParts(1.5).find((part) => part.type === "decimal")?.value === "," ? "," : ".";
+/** The decimal separator `locale` writes, the screens' unless given: `,` for nl-NL and de-DE, `.` for en-GB. */
+const localeDecimal = (locale = formatTag()) => new Intl.NumberFormat(locale).formatToParts(1.5).find((part) => part.type === "decimal")?.value === "," ? "," : ".";
 const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 /**
 * A number written as text, as a plain decimal (`-1234.5`): digits grouped by thousands with the other separator or

package/dist/format/number.js

@@ -1,12 +1,14 @@
+import { cachedFormat } from "./intl-cache.js";
+import { text } from "./messages.js";
 //#region src/format/number.ts
-const grouped = new Intl.NumberFormat("en-IE");
-const formatInt = (value) => grouped.format(value);
-const formatSigned = (value) => value > 0 ? `+${grouped.format(value)}` : grouped.format(value).replace("-", "−");
+const grouped = () => cachedFormat("grouped", (tag) => new Intl.NumberFormat(tag));
+const formatInt = (value) => grouped().format(value);
+const formatSigned = (value) => value > 0 ? `+${grouped().format(value)}` : grouped().format(value).replace("-", "−");
 const formatPercent = (value) => `${value}%`;
 const formatApproxRows = (count) => {
-	if (count < 1e4) return `${formatInt(count)} rows`;
+	if (count < 1e4) return text("rows", formatInt(count));
 	const magnitude = 10 ** (Math.floor(Math.log10(count)) - 3);
-	return `about ${formatInt(Math.round(count / magnitude) * magnitude)} rows`;
+	return text("aboutRows", formatInt(Math.round(count / magnitude) * magnitude));
 };
 //#endregion
 export { formatApproxRows, formatInt, formatPercent, formatSigned };

package/dist/format/zone.js

@@ -1,3 +1,4 @@
+import { cachedFormat } from "./intl-cache.js";
 //#region src/format/zone.ts
 /** The viewer's IANA time zone, such as `Europe/Amsterdam`. */
 const viewerZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -47,15 +48,12 @@ const instantAt = (wall, zone) => {
 };
 /** The instant `day` (`YYYY-MM-DD`) starts in `zone`: its local midnight. */
 const startOfDayIn = (day, zone) => instantAt(Date.parse(`${day}T00:00:00Z`), zone);
-const zoneNames = /* @__PURE__ */ new Map();
 /** The zone a time is shown in, as its hover label says: "Europe/Amsterdam (GMT+2)", or "UTC". */
 const zoneLabel = (ms, zone) => {
-	const known = zoneNames.get(zone) ?? new Intl.DateTimeFormat("en-GB", {
+	const name = cachedFormat(`zoneName:${zone}`, (tag) => new Intl.DateTimeFormat(tag, {
 		timeZone: zone,
 		timeZoneName: "shortOffset"
-	});
-	zoneNames.set(zone, known);
-	const name = known.formatToParts(ms).find((part) => part.type === "timeZoneName")?.value ?? zone;
+	})).formatToParts(ms).find((part) => part.type === "timeZoneName")?.value ?? zone;
 	return zone === "UTC" || zone === "Etc/UTC" ? "UTC" : `${zone} (${name})`;
 };
 //#endregion

package/dist/invitations/pending-invitation-row.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../locale/active-locale.js";
 import { Button } from "../primitives/button.js";
 import { SectionError } from "../account/account-section.js";
 import { useAction } from "../organizations/use-action.js";
@@ -26,7 +27,7 @@ const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) =
 							children: [
 								gives,
 								" · ",
-								expired ? "Expired" : `Until ${new Date(expiresAt).toLocaleDateString()}`
+								expired ? "Expired" : `Until ${new Date(expiresAt).toLocaleDateString(formatTag())}`
 							]
 						})]
 					}),

package/dist/live/display-value.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../locale/active-locale.js";
 import { viewerZone, zoneLabel } from "../format/zone.js";
 import { formatDate, formatDateTime, formatRelativeTime } from "../format/date.js";
 import { fileShown } from "./file-values.js";
@@ -22,7 +23,7 @@ const displayValue = (field, value, hints = {}, zone = viewerZone(), now = Date.
 		case "decimal": {
 			const text = hints.decimals === void 0 ? String(value) : Number(value).toFixed(hints.decimals);
 			if (hints.format === "percent") return `${Number(value)}%`;
-			return affixed(Number(text).toLocaleString("en-IE", {
+			return affixed(Number(text).toLocaleString(formatTag(), {
 				minimumFractionDigits: hints.decimals ?? 0,
 				maximumFractionDigits: hints.decimals ?? 20
 			}), hints);

package/dist/locale/active-locale.js

@@ -0,0 +1,24 @@
+import { pickLocale } from "@protobase/schema/internal";
+//#region src/locale/active-locale.ts
+let fallback = "en";
+let app;
+/** The language the screens are in now. */
+const activeLocale = () => app ?? fallback;
+/** The language the screens are in when the app sets none: the browser's, or the one the app was given. */
+const setFallbackLocale = (locale) => {
+	fallback = locale;
+};
+/** The language the app sets for everyone, from its `/meta`; undefined when it sets none. */
+const setAppLocale = (locale) => {
+	app = locale;
+};
+/** The browser's language when the screens come in it, else English. */
+const browserLocale = (languages = globalThis.navigator?.languages ?? []) => pickLocale(languages);
+const formatTags = {
+	en: "en-GB",
+	nl: "nl-NL"
+};
+/** The language tag `Intl` formats numbers and dates with, for the active locale. */
+const formatTag = () => formatTags[activeLocale()];
+//#endregion
+export { activeLocale, browserLocale, formatTag, setAppLocale, setFallbackLocale };

package/dist/locale/app-locale.js

@@ -0,0 +1,18 @@
+import { activeLocale, setAppLocale } from "./active-locale.js";
+import { Fragment, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/locale/app-locale.tsx
+/**
+* Puts the screens below in the language the app sets for everyone, from its `/meta`, or in the fallback when it sets
+* none; draws them anew when that changes, and tells the page which language it is in.
+*/
+const AppLocale = ({ locale, children }) => {
+	setAppLocale(locale);
+	const active = activeLocale();
+	useEffect(() => {
+		document.documentElement.lang = active;
+	}, [active]);
+	return /* @__PURE__ */ jsx(Fragment, { children }, active);
+};
+//#endregion
+export { AppLocale };

package/dist/locale/messages.js

@@ -0,0 +1,12 @@
+import { activeLocale } from "./active-locale.js";
+//#region src/locale/messages.ts
+/**
+* An area's built-in texts in every language the screens come in, keyed by id: the lookup returns the one for the
+* active locale, `text('search')` or `text('rows', 3)`. Dutch must translate every English text, which the types check.
+*/
+const defineMessages = (catalogue) => (id, ...values) => {
+	const message = catalogue[activeLocale()][id];
+	return typeof message === "function" ? message(...values) : message;
+};
+//#endregion
+export { defineMessages };

package/dist/organizations/organizations-page.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../locale/active-locale.js";
 import { Input } from "../primitives/input.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
@@ -85,7 +86,7 @@ const YourInvitations = () => {
 					invitation.appRoles.map((name) => roleLabel(roles, name)).join(", ") || "no app roles",
 					/* @__PURE__ */ jsxs("span", {
 						className: "block text-xs text-muted-foreground",
-						children: ["Until ", new Date(invitation.expiresAt).toLocaleDateString()]
+						children: ["Until ", new Date(invitation.expiresAt).toLocaleDateString(formatTag())]
 					})
 				]
 			}, invitation.id))

package/dist/package.js

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