@protobase/ui 0.23.4 → 0.23.6

package/dist/app/searches/saved-search-rows.js

@@ -8,8 +8,8 @@ import { InlineFilterChips } from "./filter-chip-list.js";
 import { RecordRowBody } from "../record-row/record-row-body.js";
 import { useSavedSearches } from "./use-saved-searches.js";
 import { useSearchRow } from "./use-search-row.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { encodeKey } from "@protobase/schema/internal";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/searches/saved-search-rows.tsx
 const SearchRowItem = ({ model, view, target, targetView, row }) => {
 	const key = encodeKey(recordKey(model, row));

package/dist/app/searches/saved-searches.js

@@ -9,8 +9,8 @@ import { can } from "../permissions.js";
 import { useSavedSearches } from "./use-saved-searches.js";
 import { useDeleteFlow } from "../delete/use-delete-flow.js";
 import { SavedSearchSection } from "./saved-search-section.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { encodeKey } from "@protobase/schema/internal";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/searches/saved-searches.tsx
 /**
 * The list page of a view with `searchesOf`: each of the user's saved searches, with what it finds (`SavedSearchSection`),

package/dist/app/searches/update-search-dialog.js

@@ -9,9 +9,9 @@ import { useFilterChips } from "./use-filter-chips.js";
 import { EmbeddedList } from "../embedded-list/embedded-list.js";
 import { addedFilter, filterChanges, netChange, removedFilter } from "./search-diff.js";
 import { useMemo } from "react";
+import { tableDisplay } from "@protobase/schema/internal";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { tableDisplay } from "@protobase/schema/internal";
 //#region src/app/searches/update-search-dialog.tsx
 /** How many records each side of the diff shows; its count says how many there are in all. */
 const shownLimit = 12;

package/dist/app/searches/use-save-search.js

@@ -8,8 +8,8 @@ import { can } from "../permissions.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { useSavedSearches } from "./use-saved-searches.js";
 import { useOpenedSearch } from "./use-opened-search.js";
-import { useMutation } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
+import { useMutation } from "@tanstack/react-query";
 //#region src/app/searches/use-save-search.ts
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**

package/dist/app-shell/bottom-bar.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { Ellipsis } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/bottom-bar.tsx
@@ -13,7 +14,7 @@ const BottomBar = ({ tabs, onNavigate, onMore, moreOpen, moreControls, sticky, r
 	const moreCurrent = !tabs.some((item) => item.active);
 	return /* @__PURE__ */ jsxs("nav", {
 		ref,
-		"aria-label": "Tabs",
+		"aria-label": text("tabs"),
 		className: cn("flex shrink-0 border-t bg-background pb-[env(safe-area-inset-bottom)] md:hidden", sticky && "sticky bottom-0 z-30"),
 		children: [tabs.map((item) => {
 			const Icon = item.icon;
@@ -50,7 +51,7 @@ const BottomBar = ({ tabs, onNavigate, onMore, moreOpen, moreControls, sticky, r
 				className: "size-6",
 				strokeWidth: moreCurrent ? 2.2 : 1.9,
 				"aria-hidden": true
-			}), "More"]
+			}), text("more")]
 		})]
 	});
 };

package/dist/app-shell/breadcrumb.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { Skeleton } from "../primitives/skeleton.js";
 import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const inApp = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 /** The trail of where you are; the last crumb, the current page, shows on phones too. */
 const Breadcrumb = ({ parts, onNavigate }) => /* @__PURE__ */ jsx("nav", {
-	"aria-label": "Breadcrumb",
+	"aria-label": text("breadcrumb"),
 	className: "flex min-w-0 items-center gap-1.5",
 	children: parts.map((part, index) => {
 		const last = index === parts.length - 1;

package/dist/app-shell/drawer.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { useFocusTrap } from "../lib/use-focus-trap.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,7 +19,7 @@ const Drawer = ({ id, open, onClose, children }) => {
 			id,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-label": "Navigation",
+			"aria-label": text("navigation"),
 			tabIndex: -1,
 			className: "absolute inset-y-0 left-0 flex w-60 max-w-[85vw] bg-sidebar shadow-pop outline-none",
 			onClick: (event) => event.target.closest("a") && onClose(),

package/dist/app-shell/global-search.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { Input } from "../primitives/input.js";
 import { Kbd } from "../primitives/kbd.js";
 import { Spinner } from "../primitives/spinner.js";
@@ -65,7 +66,7 @@ const GlobalSearch = ({ search, className = "w-96", autoFocus, showShortcut = tr
 			leading: search.loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx(Search, { className: "size-4" }),
 			trailing: search.text ? /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": "Clear search",
+				"aria-label": text("clearSearch"),
 				className: "-mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
 				onMouseDown: (event) => event.preventDefault(),
 				onClick: clear,
@@ -75,7 +76,7 @@ const GlobalSearch = ({ search, className = "w-96", autoFocus, showShortcut = tr
 				children: /* @__PURE__ */ jsx(Kbd, { children: "⌘K" })
 			}) : void 0,
 			placeholder: search.placeholder,
-			"aria-label": "Global search",
+			"aria-label": text("globalSearch"),
 			role: "combobox",
 			"aria-autocomplete": "list",
 			"aria-expanded": open,
@@ -93,11 +94,11 @@ const GlobalSearch = ({ search, className = "w-96", autoFocus, showShortcut = tr
 		}), open && /* @__PURE__ */ jsxs("div", {
 			id: listId,
 			role: "listbox",
-			"aria-label": "Search results",
+			"aria-label": text("searchResults"),
 			className: "absolute right-0 top-full z-40 mt-1 max-h-96 w-full min-w-72 overflow-y-auto rounded-lg border bg-background py-1 shadow-pop",
 			children: [search.groups.length === 0 && /* @__PURE__ */ jsx("p", {
 				className: "px-3 py-2 text-muted-foreground",
-				children: search.loading ? "Searching" : `No matches for “${search.query}”`
+				children: search.loading ? text("searching") : text("noMatches", search.query)
 			}), search.groups.map((group) => /* @__PURE__ */ jsxs("div", {
 				role: "group",
 				"aria-label": group.label,

package/dist/app-shell/messages.js

@@ -0,0 +1,64 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app-shell/messages.ts
+const text = defineMessages({
+	en: {
+		navigation: "Navigation",
+		resources: "Resources",
+		breadcrumb: "Breadcrumb",
+		tabs: "Tabs",
+		more: "More",
+		openNavigation: "Open navigation",
+		backTo: (label) => `Back to ${label}`,
+		search: "Search",
+		closeSearch: "Close search",
+		clearSearch: "Clear search",
+		globalSearch: "Global search",
+		searchResults: "Search results",
+		searching: "Searching",
+		noMatches: (query) => `No matches for “${query}”`,
+		profileMenu: "Profile menu",
+		organizations: "Organizations",
+		roles: "Roles",
+		signIn: "Sign in",
+		signOut: "Sign out",
+		theme: "Theme",
+		light: "Light",
+		dark: "Dark",
+		system: "System",
+		recent: (plural) => `Recent ${plural}`,
+		loading: "Loading...",
+		couldNotLoad: "Could not load",
+		viewAll: "View all"
+	},
+	nl: {
+		navigation: "Navigatie",
+		resources: "Onderdelen",
+		breadcrumb: "Kruimelpad",
+		tabs: "Tabbladen",
+		more: "Meer",
+		openNavigation: "Navigatie openen",
+		backTo: (label) => `Terug naar ${label}`,
+		search: "Zoeken",
+		closeSearch: "Zoeken sluiten",
+		clearSearch: "Zoekopdracht wissen",
+		globalSearch: "Overal zoeken",
+		searchResults: "Zoekresultaten",
+		searching: "Zoeken",
+		noMatches: (query) => `Niets gevonden voor “${query}”`,
+		profileMenu: "Profielmenu",
+		organizations: "Organisaties",
+		roles: "Rollen",
+		signIn: "Inloggen",
+		signOut: "Uitloggen",
+		theme: "Thema",
+		light: "Licht",
+		dark: "Donker",
+		system: "Systeem",
+		recent: (plural) => `Recente ${plural}`,
+		loading: "Laden...",
+		couldNotLoad: "Kon niet laden",
+		viewAll: "Alles bekijken"
+	}
+});
+//#endregion
+export { text };

package/dist/app-shell/profile-menu.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { SwitchGroup } from "./switch-group.js";
@@ -41,7 +42,7 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "flex min-h-11 w-full items-center gap-2.5 rounded-md p-1 text-left hover:bg-muted md:min-h-0",
-			"aria-label": "Profile menu",
+			"aria-label": text("profileMenu"),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			onClick: toggle,
@@ -81,7 +82,7 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 					})]
 				}),
 				organizations && (organizations.current || organizations.others.length > 0) && /* @__PURE__ */ jsx(SwitchGroup, {
-					label: "Organizations",
+					label: text("organizations"),
 					...organizations.current && { current: {
 						id: organizations.current.id,
 						label: organizations.current.name
@@ -97,7 +98,7 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 					}
 				}),
 				roles && roles.roles.length > 1 && /* @__PURE__ */ jsx(SwitchGroup, {
-					label: "Roles",
+					label: text("roles"),
 					...activeRole && { current: {
 						id: activeRole.name,
 						label: activeRole.label
@@ -147,7 +148,7 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 					role: "menuitem",
 					onClick: onSignOut,
 					className: menuRow,
-					children: [/* @__PURE__ */ jsx(LogOut, { className: "size-4" }), "Sign out"]
+					children: [/* @__PURE__ */ jsx(LogOut, { className: "size-4" }), text("signOut")]
 				})
 			]
 		})]

package/dist/app-shell/sidebar-group.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { StatusDot } from "./status-dot.js";
@@ -49,23 +50,23 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 				type: "button",
 				"aria-expanded": open,
 				"aria-controls": listId,
-				"aria-label": `Recent ${item.label.toLowerCase()}`,
+				"aria-label": text("recent", item.label.toLowerCase()),
 				onClick: toggle,
 				className: "absolute right-1 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground",
 				children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") })
 			})]
 		}), open && /* @__PURE__ */ jsxs("ul", {
 			id: listId,
-			"aria-label": `Recent ${item.label.toLowerCase()}`,
+			"aria-label": text("recent", item.label.toLowerCase()),
 			className: cn("flex flex-col gap-0.5 border-l pl-1.5", indent[mode]),
 			children: [
 				recent.state === "loading" && /* @__PURE__ */ jsx("li", {
 					className: cn("flex items-center text-faint-foreground", row[mode]),
-					children: "Loading..."
+					children: text("loading")
 				}),
 				recent.state === "error" && /* @__PURE__ */ jsx("li", {
 					className: cn("flex items-center text-faint-foreground", row[mode]),
-					children: "Could not load"
+					children: text("couldNotLoad")
 				}),
 				recent.state === "ready" && recent.records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
 					...link(record.href),
@@ -84,7 +85,7 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 					...link(href),
 					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", row[mode]),
-					children: "View all"
+					children: text("viewAll")
 				}) })
 			]
 		})]

package/dist/app-shell/sidebar.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { RouteLink } from "../primitives/route-link.js";
 import { Logo } from "./logo.js";
 import { navGroups } from "./nav.js";
@@ -15,7 +16,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, forceExpanded, pr
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
 	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "Resources",
+		"aria-label": text("resources"),
 		className: cn(sticky ? "sticky top-0 h-dvh self-start" : "relative", "z-30 shrink-0", sidebarWidth[mode]),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("group/side absolute inset-y-0 left-0 flex flex-col overflow-hidden border-r bg-sidebar", expanding ? "w-14 transition-[width,box-shadow] duration-150 hover:w-60 hover:shadow-pop focus-within:w-60 focus-within:shadow-pop" : "w-full", expanded && "w-60 shadow-pop"),
@@ -66,11 +67,11 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, forceExpanded, pr
 						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-muted-foreground md:min-h-0"
 					}), signIn && /* @__PURE__ */ jsxs(RouteLink, {
 						to: signIn,
-						"aria-label": "Sign in",
+						"aria-label": text("signIn"),
 						className: "flex min-h-11 w-full items-center gap-2.5 rounded-md p-1.5 text-left font-medium text-muted-foreground hover:bg-muted hover:text-foreground md:min-h-0",
 						children: [/* @__PURE__ */ jsx(LogIn, { className: "size-4 shrink-0" }), inline && /* @__PURE__ */ jsx("span", {
 							className: "whitespace-nowrap",
-							children: "Sign in"
+							children: text("signIn")
 						})]
 					})] })
 				})

package/dist/app-shell/theme-switch.js

@@ -1,21 +1,22 @@
+import { text } from "./messages.js";
 import { Segmented } from "../primitives/segmented.js";
 import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/theme-switch.tsx
-const options = [
+const options = () => [
 	{
 		value: "light",
-		label: "Light",
+		label: text("light"),
 		icon: Sun
 	},
 	{
 		value: "dark",
-		label: "Dark",
+		label: text("dark"),
 		icon: Moon
 	},
 	{
 		value: "system",
-		label: "System",
+		label: text("system"),
 		icon: Monitor
 	}
 ];
@@ -26,13 +27,13 @@ const ThemeSwitch = ({ theme, className }) => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx(SunMoon, { className: "size-4" }),
 		/* @__PURE__ */ jsx("span", {
 			className: "flex-1",
-			children: "Theme"
+			children: text("theme")
 		}),
 		/* @__PURE__ */ jsx(Segmented, {
-			label: "Theme",
+			label: text("theme"),
 			iconOnly: true,
 			value: theme.preference,
-			options,
+			options: options(),
 			onChange: theme.onChange
 		})
 	]

package/dist/app-shell/top-bar.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
 import { Breadcrumb, inApp } from "./breadcrumb.js";
 import { backTarget } from "./back-target.js";
 import { GlobalSearch } from "./global-search.js";
@@ -30,7 +31,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 		children: [
 			onMenu && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": "Open navigation",
+				"aria-label": text("openNavigation"),
 				"aria-expanded": Boolean(menuOpen),
 				"aria-controls": menuControls,
 				onClick: onMenu,
@@ -39,7 +40,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 			}),
 			back && /* @__PURE__ */ jsx("a", {
 				href: back.href,
-				"aria-label": `Back to ${back.label}`,
+				"aria-label": text("backTo", back.label),
 				onClick: (event) => {
 					if (!onNavigate || !inApp(event)) return;
 					event.preventDefault();
@@ -63,7 +64,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 						})
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": "Search",
+						"aria-label": text("search"),
 						"aria-expanded": searchOpen,
 						onClick: () => setSearchOpen(true),
 						className: "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden",
@@ -91,7 +92,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 					}
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-label": "Close search",
+					"aria-label": text("closeSearch"),
 					onClick: () => setSearchOpen(false),
 					className: "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden",
 					children: /* @__PURE__ */ jsx(X, { className: "size-5" })

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

@@ -1,4 +1,5 @@
 import { MapLayerModel, PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
+import { Locale } from "@protobase/schema/internal";
 import { BottomBarModel, ResourceModel, SignInViewModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
@@ -34,6 +35,8 @@ export type MetaData = {
     style: string;
     layers?: MapLayerModel[];
   };
+  /** The language the app's screens are in for everyone, when it sets one (see `AppLocale`). */
+  locale?: Locale;
   /** The hosts besides the app's own whose images are drawn with the page's referrer (see `FileImage`). */
   files?: {
     trustedHosts: string[];

package/dist/data/use-meta.js

@@ -38,6 +38,7 @@ const useMeta = () => {
 				...result.meta.runtime && { runtime: result.meta.runtime },
 				...result.meta.errorReporting && { errorReporting: result.meta.errorReporting },
 				...result.meta.maps && { maps: result.meta.maps },
+				...result.meta.locale && { locale: result.meta.locale },
 				...result.meta.files && { files: result.meta.files },
 				...result.meta.plugins && { plugins: result.meta.plugins },
 				...result.meta.sources && { sources: result.meta.sources.map((source) => ({

package/dist/data/use-record.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-record.ts
 const useRecord = (resource, key, enabled = true) => {
 	const client = useClient();

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

@@ -1,8 +1,8 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
 import { PreconditionFailedError } from "@protobase/client";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-update-record.ts
 /**
 * PATCH with `If-Match`. On success the cached record gets the new ETag and lists refetch;

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