@protobase/ui 0.23.4 → 0.23.6

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.4";
+var version = "0.23.6";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };