@protobase/ui 0.23.3 → 0.23.5

package/dist/app/app.d.ts

@@ -3,6 +3,7 @@ import "../app-shell/index.js";
 import { ProjectUi } from "./pages/project-ui.js";
 import { PluginLoader } from "../plugins/load-plugin.js";
 import { AssistantClient, AuthSession, Client, RuntimeClient } from "@protobase/client";
+import { Locale } from "@protobase/schema/internal";
 //#region src/app/app.d.ts
 export type AppProps = {
   /** Where `/api/v1` lives. Defaults to the current origin. */
@@ -27,11 +28,13 @@ export type AppProps = {
   runtime?: RuntimeClient;
   /** How the plugins are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
   pluginLoader?: PluginLoader;
+  /** The language the screens are in when the app's `/meta` sets none, such as the browser's (`browserLocale()`); English by default. */
+  locale?: Locale;
 };
 /**
  * The admin: a public form at `/-/forms/<name>` for anyone, the sign-in route first, `/-/sign-in`, or browsing as a
  * visitor when the project's anonymous role reads, then a sidebar from `/meta`, `/:page` composed pages, `/:resource`
  * lists and `/:resource/:key` records. Fills its parent, in the theme this browser chose, light, dark or the system's.
  */
-export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }: AppProps) => import("react").JSX.Element;
+export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -1,4 +1,5 @@
 import { accountMenuItems } from "../account/account-pages.js";
+import { setFallbackLocale } from "../locale/active-locale.js";
 import { AppShell } from "../app-shell/app-shell.js";
 import { AuthProvider, useAuth } from "../auth/auth-provider.js";
 import { AccountSecurityPage } from "../account/account-security-page.js";
@@ -12,11 +13,12 @@ import { CustomBoundary } from "./pages/custom-boundary.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
+import { sourceStatusOf } from "../data/with-sources.js";
+import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
 import { recordTitle } from "../live/model-helpers.js";
-import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
 import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
@@ -49,8 +51,8 @@ import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
 import { StaffBanner } from "./staff-banner.js";
 import { useNavRecent } from "./use-nav-recent.js";
 import { useCallback, useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { viewOfList } from "@protobase/schema/internal";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/app.tsx
 const placeOf = (address) => {
 	if (address?.kind === "page") return address.page;
@@ -75,6 +77,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		resource: shown?.resource,
 		key: shown?.key
 	});
+	useLiveUpdates(meta);
 	const groups = navFromMeta(meta, basePath, recent);
 	const firstPage = Object.keys(meta.pages)[0];
 	const firstResource = Object.keys(meta.resources)[0];
@@ -303,27 +306,30 @@ const PublicFormGate = ({ baseUrl, client, ui, children }) => {
 * visitor when the project's anonymous role reads, then a sidebar from `/meta`, `/:page` composed pages, `/:resource`
 * lists and `/:resource/:key` records. Fills its parent, in the theme this browser chose, light, dark or the system's.
 */
-const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
-	session: auth,
-	children: /* @__PURE__ */ jsx(Router, {
-		basePath,
-		initialUrl,
-		children: /* @__PURE__ */ jsx(PluginSourceProvider, {
-			...pluginLoader && { loader: pluginLoader },
-			children: /* @__PURE__ */ jsx(PublicFormGate, {
-				baseUrl: rest.baseUrl,
-				client: rest.client,
-				ui: rest.ui,
-				children: /* @__PURE__ */ jsx(AuthGate, {
-					workspace,
-					children: /* @__PURE__ */ jsx(Authenticated, {
+const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...rest }) => {
+	setFallbackLocale(locale ?? "en");
+	return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
+		session: auth,
+		children: /* @__PURE__ */ jsx(Router, {
+			basePath,
+			initialUrl,
+			children: /* @__PURE__ */ jsx(PluginSourceProvider, {
+				...pluginLoader && { loader: pluginLoader },
+				children: /* @__PURE__ */ jsx(PublicFormGate, {
+					baseUrl: rest.baseUrl,
+					client: rest.client,
+					ui: rest.ui,
+					children: /* @__PURE__ */ jsx(AuthGate, {
 						workspace,
-						...rest
+						children: /* @__PURE__ */ jsx(Authenticated, {
+							workspace,
+							...rest
+						})
 					})
 				})
 			})
 		})
-	})
-}) });
+	}) });
+};
 //#endregion
 export { App };

package/dist/app/charts/chart-groups.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 import { createWhere, enumLabel, printFilter } from "@protobase/schema";
 //#region src/app/charts/chart-groups.ts
 const where$1 = createWhere();
@@ -40,9 +41,9 @@ const periodPoints = (groups, measure) => groups.map((group) => ({
 /** A measured number as text: a count whole, a sum or average with the field's decimals, prefix and suffix. */
 const measureText = (value, measure) => {
 	if (value === null) return "—";
-	if (measure.kind === "count") return value.toLocaleString("en-IE");
+	if (measure.kind === "count") return value.toLocaleString(formatTag());
 	const decimals = measure.hints?.decimals ?? (Number.isInteger(value) ? 0 : 2);
-	const text = value.toLocaleString("en-IE", {
+	const text = value.toLocaleString(formatTag(), {
 		minimumFractionDigits: decimals,
 		maximumFractionDigits: decimals
 	});

package/dist/app/charts/period-chart.js

@@ -1,4 +1,5 @@
 import { useMediaQuery } from "../../lib/use-media-query.js";
+import { formatTag } from "../../locale/active-locale.js";
 import { measureText } from "./chart-groups.js";
 import { LegendItem } from "./legend-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -49,7 +50,7 @@ const tooltipFormats = {
 	year: { year: "numeric" }
 };
 const formatterOf = (options) => {
-	const format = new Intl.DateTimeFormat("en-GB", {
+	const format = new Intl.DateTimeFormat(formatTag(), {
 		...options,
 		timeZone: "UTC"
 	});
@@ -121,7 +122,7 @@ const PeriodChart = ({ points, measure, bucket, type, series, resource, view })
 		axisLine: false,
 		tickLine: false,
 		tickCount: 3,
-		tickFormatter: (value) => value.toLocaleString("en-IE", { notation: "compact" })
+		tickFormatter: (value) => value.toLocaleString(formatTag(), { notation: "compact" })
 	});
 	const tooltip = /* @__PURE__ */ jsx(Tooltip, {
 		cursor: type === "bar" ? { fill: "var(--muted)" } : { stroke: "var(--border-strong)" },

package/dist/app/create/create-values.js

@@ -1,7 +1,7 @@
 import { isEditable, toPatchValue } from "../../live/field-values.js";
 import { whenShown } from "../record-mode/record-mode.js";
-import { isRecordCondition } from "@protobase/schema";
 import { layoutItems } from "@protobase/schema/internal";
+import { isRecordCondition } from "@protobase/schema";
 //#region src/app/create/create-values.ts
 const isChosen = (value) => typeof value === "object" && value !== null && "key" in value;
 /** Fields the user can set on a new record: not read-only, not the tenant, and not structured data. */

package/dist/app/custom-section.js

@@ -4,8 +4,8 @@ import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { RecordScope } from "./pages/record-scope.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/custom-section.tsx
 /**
 * A component of the record layout (`l.custom`), drawn with the record around it, so `useLayoutRecord()` gives it, in a

package/dist/app/displays/board-column.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { formatTag } from "../../locale/active-locale.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
@@ -70,7 +71,7 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 					})
 				}), !list.loading && /* @__PURE__ */ jsx("span", {
 					className: "text-xs tabular-nums text-muted-foreground",
-					children: count.toLocaleString("en-IE")
+					children: count.toLocaleString(formatTag())
 				})]
 			}),
 			list.loading ? Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-20" }, index)) : list.error ? /* @__PURE__ */ jsx(ErrorBanner, {

package/dist/app/displays/custom-display.js

@@ -2,8 +2,8 @@ import { Problem } from "../pages/problem.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { ListDisplayProvider } from "./display-context.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/custom-display.tsx
 /**
 * A display the project draws: the component registered under its name gets the display's props, field references

package/dist/app/displays/display-frame.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 import { Button } from "../../primitives/button.js";
 import { ErrorBanner } from "../error-banner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,9 +18,9 @@ const DisplayState = ({ list, empty, loading, children }) => /* @__PURE__ */ jsx
 const DisplayFooter = ({ list }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center justify-between gap-3 py-3 text-xs text-muted-foreground",
 	children: [/* @__PURE__ */ jsxs("span", { children: [
-		list.rows.length.toLocaleString("en-IE"),
+		list.rows.length.toLocaleString(formatTag()),
 		" of ",
-		list.total.toLocaleString("en-IE")
+		list.total.toLocaleString(formatTag())
 	] }), list.more && /* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		onClick: list.loadMore,

package/dist/app/displays/map-display.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { formatTag } from "../../locale/active-locale.js";
 import { Button } from "../../primitives/button.js";
 import { Problem } from "../pages/problem.js";
 import { humanize } from "../../live/naming.js";
@@ -57,7 +58,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 		if (near === 0) return `Show ${keys.length} ${plural}`;
 		return near === keys.length ? `Show ${keys.length} ${plural}, at approximate positions` : `Show ${keys.length} ${plural}, ${near} at approximate positions`;
 	};
-	const bucketLabel = (count) => `Zoom in on ${count.toLocaleString("en-IE")} ${count === 1 ? singular : plural}`;
+	const bucketLabel = (count) => `Zoom in on ${count.toLocaleString(formatTag())} ${count === 1 ? singular : plural}`;
 	const overlay = useRef(null);
 	const [covered, setCovered] = useState(0);
 	useLayoutEffect(() => setCovered(overlay.current?.offsetHeight ?? 0), [row?.key]);
@@ -192,8 +193,8 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 /** How many of the matching records are in view, and how many the map shows when it cannot show them all. */
 const inView = (data, plural) => {
 	if (!data) return "\xA0";
-	const total = data.total.toLocaleString("en-IE");
-	if (data.buckets.length === 0 && data.rows.length < data.total) return `${data.rows.length.toLocaleString("en-IE")} of ${total} ${plural} in view`;
+	const total = data.total.toLocaleString(formatTag());
+	if (data.buckets.length === 0 && data.rows.length < data.total) return `${data.rows.length.toLocaleString(formatTag())} of ${total} ${plural} in view`;
 	return `${total} ${plural} in view`;
 };
 //#endregion

package/dist/app/embedded-list/cut-off-note.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 //#region src/app/embedded-list/cut-off-note.ts
 /**
 * What a list that shows only its first `shown` of `total` records says about the rest, as "The first 10 of 37.";
@@ -5,7 +6,7 @@
 */
 const cutOffNote = (shown, total, estimated) => {
 	if (shown >= total) return void 0;
-	return `The first ${shown} of ${estimated ? "about " : ""}${total.toLocaleString("en-GB")}.`;
+	return `The first ${shown} of ${estimated ? "about " : ""}${total.toLocaleString(formatTag())}.`;
 };
 //#endregion
 export { cutOffNote };

package/dist/app/hand-order/hand-sorted-list.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { recordKey, recordTitle } from "../../live/model-helpers.js";
@@ -65,7 +66,7 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		className: "text-muted-foreground",
 		children: [
 			"There are more than ",
-			500 .toLocaleString("en-IE"),
+			500 .toLocaleString(formatTag()),
 			" ",
 			plural,
 			", too many to sort by hand."

package/dist/app/hand-order/use-hand-order.js

@@ -7,8 +7,8 @@ import { useAdminMeta } from "../meta-gate.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
 import { useRef, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
+import { useQuery } from "@tanstack/react-query";
 import { arrayMove } from "@dnd-kit/sortable";
 //#region src/app/hand-order/use-hand-order.ts
 /**

package/dist/app/import/import-check-step.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 import { Spinner } from "../../primitives/spinner.js";
 import { Button } from "../../primitives/button.js";
 import { saveFile } from "../../lib/save-file.js";
@@ -31,7 +32,7 @@ const ProblemList = ({ rows }) => /* @__PURE__ */ jsxs("ul", {
 		className: "text-muted-foreground",
 		children: [
 			"And ",
-			(rows.length - listedProblems).toLocaleString("en-IE"),
+			(rows.length - listedProblems).toLocaleString(formatTag()),
 			" more rows, all in the file."
 		]
 	})]
@@ -42,7 +43,7 @@ const ImportChecking = ({ rows }) => /* @__PURE__ */ jsxs("p", {
 	children: [
 		/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }),
 		"Checking rows… ",
-		rows.toLocaleString("en-IE"),
+		rows.toLocaleString(formatTag()),
 		" read"
 	]
 });

package/dist/app/import/import-counts.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/import/import-counts.tsx
 /** Counts side by side, each under its label, such as the rows an import created and updated. */
@@ -11,7 +12,7 @@ const ImportCounts = ({ label, counts }) => /* @__PURE__ */ jsx("dl", {
 			children: name
 		}), /* @__PURE__ */ jsx("dd", {
 			className: "text-lg font-semibold tabular-nums",
-			children: value.toLocaleString("en-IE")
+			children: value.toLocaleString(formatTag())
 		})]
 	}, name))
 });

package/dist/app/import/import-dialog.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
 import { ErrorBanner } from "../error-banner.js";
@@ -73,7 +74,7 @@ const ImportDialog = ({ model, resources, views, canUpdate, onClose, sourceFor }
 					onClick: () => flow.start(rows),
 					children: [
 						"Import ",
-						rows.toLocaleString("en-IE"),
+						rows.toLocaleString(formatTag()),
 						" ",
 						rows === 1 ? "row" : "rows"
 					]

package/dist/app/import/import-result-step.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../locale/active-locale.js";
 import { Button } from "../../primitives/button.js";
 import { ErrorBanner } from "../error-banner.js";
 import { ImportCounts } from "./import-counts.js";
@@ -5,7 +6,7 @@ import { ProblemList, downloadRows } from "./import-check-step.js";
 import { Download } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/import/import-result-step.tsx
-const count = (value) => value.toLocaleString("en-IE");
+const count = (value) => value.toLocaleString(formatTag());
 /** The rows written so far out of those to write, as a bar. */
 const ImportProgressStep = ({ progress, total, cancelling }) => {
 	const done = progress.created + progress.updated + progress.failed;

package/dist/app/incoming-relations.js

@@ -1,6 +1,6 @@
 import { humanize } from "../live/naming.js";
-import { createWhere, printFilter } from "@protobase/schema";
 import { layoutItems } from "@protobase/schema/internal";
+import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/incoming-relations.ts
 const where$1 = createWhere();
 /**

package/dist/app/list-edit/use-list-edits.js

@@ -4,8 +4,8 @@ import { useToast } from "../../toasts/toast-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { useRef, useState } from "react";
 import { isApiError } from "@protobase/client";
-import { useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
+import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/list-edit/use-list-edits.ts
 /**
 * The list's edits in place: `patches` holds, by row id, the values saving or saved since the rows loaded, with the

package/dist/app/list-page.js

@@ -62,9 +62,9 @@ import { HandSortedList } from "./hand-order/hand-sorted-list.js";
 import { SortButton } from "./hand-order/sort-button.js";
 import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
+import { isGroupChart, tableDisplay, viewOfList } from "@protobase/schema/internal";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
-import { isGroupChart, tableDisplay, viewOfList } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
 const where$1 = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");

package/dist/app/main.js

@@ -1,3 +1,4 @@
+import { browserLocale } from "../locale/active-locale.js";
 import { uiFromModule } from "./pages/ui-from-module.js";
 import { App } from "./app.js";
 import { StrictMode } from "react";
@@ -10,6 +11,7 @@ const root = document.getElementById("root");
 if (!root) throw new Error("index.html needs an element with id \"root\"");
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
 	baseUrl: "/api/v1",
-	ui: uiFromModule(projectUi)
+	ui: uiFromModule(projectUi),
+	locale: browserLocale()
 }) }));
 //#endregion

package/dist/app/map/records-map.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { cachedFormat } from "../../format/intl-cache.js";
 import { groupPoints } from "../displays/map-groups.js";
 import { MapLayerSwitch } from "./map-layer-switch.js";
 import { mapLib } from "./maplibre.js";
@@ -21,10 +22,10 @@ const bucketOptions = {
 	duration: 300
 };
 const markerHeight = 32;
-const compact = new Intl.NumberFormat("en-IE", {
+const compact = () => cachedFormat("compact", (tag) => new Intl.NumberFormat(tag, {
 	notation: "compact",
 	maximumFractionDigits: 1
-});
+}));
 const corners = (bounds) => [[bounds.west, bounds.south], [bounds.east, bounds.north]];
 /**
 * A map of `style` with a marker for each group of records that lie close together at the zoom, showing how many it
@@ -139,7 +140,7 @@ const RecordsMap = ({ style, layers, initial, points, buckets, fit, onFitted, on
 						event.stopPropagation();
 						ref.current?.getMap().fitBounds(corners(bucket.bounds), bucketOptions);
 					},
-					children: compact.format(bucket.count)
+					children: compact().format(bucket.count)
 				})
 			}, `${bucket.latitude},${bucket.longitude}`)),
 			groups.map((group) => {

package/dist/app/meta-gate-messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app/meta-gate-messages.ts
+const text = defineMessages({
+	en: {
+		loading: "Loading",
+		cannotReach: "Cannot reach the API",
+		noAnswer: "The server did not answer. Is it running?"
+	},
+	nl: {
+		loading: "Laden",
+		cannotReach: "De API is niet bereikbaar",
+		noAnswer: "De server gaf geen antwoord. Draait hij?"
+	}
+});
+//#endregion
+export { text };

package/dist/app/meta-gate.js

@@ -1,10 +1,12 @@
 import { Spinner } from "../primitives/spinner.js";
 import { ClientProvider, useClient, useSourceClients } from "../data/api-provider.js";
+import { withSources } from "../data/with-sources.js";
 import { MetaContext } from "../data/meta-context.js";
 import { allowEverything } from "../data/meta-data.js";
 import { useMeta } from "../data/use-meta.js";
 import { useSourceMetas } from "../data/use-source-metas.js";
-import { withSources } from "../data/with-sources.js";
+import { AppLocale } from "../locale/app-locale.js";
+import { text } from "./meta-gate-messages.js";
 import { useContext, useMemo } from "react";
 import { isApiError, routedClient } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -58,7 +60,10 @@ const WithSources = ({ meta, children }) => {
 		resourceClient: routing.resourceClient,
 		children: /* @__PURE__ */ jsx(MetaContext.Provider, {
 			value: merged,
-			children
+			children: /* @__PURE__ */ jsx(AppLocale, {
+				locale: meta.locale,
+				children
+			})
 		})
 	});
 };
@@ -70,11 +75,15 @@ const MetaGate = ({ children }) => {
 	const meta = useMeta();
 	if (meta.isPending) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-48 items-center justify-center gap-2 text-muted-foreground",
-		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" ",
+			text("loading")
+		]
 	});
 	if (meta.error) return /* @__PURE__ */ jsx(Notice, {
-		title: "Cannot reach the API",
-		children: isApiError(meta.error) ? meta.error.message : "The server did not answer. Is it running?"
+		title: text("cannotReach"),
+		children: isApiError(meta.error) ? meta.error.message : text("noAnswer")
 	});
 	return /* @__PURE__ */ jsx(WithSources, {
 		meta: meta.data,

package/dist/app/nav-recent.js

@@ -1,7 +1,7 @@
 import { recordKey, recordTitle, recordTitleField } from "../live/model-helpers.js";
 import { defaultOrderBy } from "./list-order.js";
-import { appPath, enumLabel } from "@protobase/schema";
 import { defaultRecentLimit, encodeKey } from "@protobase/schema/internal";
+import { appPath, enumLabel } from "@protobase/schema";
 //#region src/app/nav-recent.ts
 /** The list request behind a sidebar group: its filter, order (the list's sort when unset), size, and only the fields it shows. */
 const recentRequest = (model, view, recent) => ({

package/dist/app/pages/blocks/link.js

@@ -1,9 +1,9 @@
 import { AppLink } from "../../use-app-address.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
+import { fillAddress } from "@protobase/schema/internal";
 import { jsx } from "react/jsx-runtime";
 import { appPath } from "@protobase/schema";
-import { fillAddress } from "@protobase/schema/internal";
 //#region src/app/pages/blocks/link.tsx
 const style = "font-medium text-primary-text hover:underline";
 /**

package/dist/app/pages/blocks/progress.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../../locale/active-locale.js";
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
@@ -31,9 +32,9 @@ const ProgressBlock = ({ node }) => {
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "tabular-nums",
 				children: [
-					current.toLocaleString("en-IE"),
+					current.toLocaleString(formatTag()),
 					" / ",
-					total.toLocaleString("en-IE")
+					total.toLocaleString(formatTag())
 				]
 			})]
 		}), /* @__PURE__ */ jsx("div", {

package/dist/app/pages/blocks/stat.js

@@ -1,3 +1,4 @@
+import { formatTag } from "../../../locale/active-locale.js";
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { AppLink } from "../../use-app-address.js";
@@ -22,7 +23,7 @@ const Count = ({ model, filter }) => {
 	return /* @__PURE__ */ jsx(AppLink, {
 		to: filteredListAddress(views[model.name], model.name, filter),
 		className: `${big} hover:text-primary-text after:absolute after:inset-0 after:content-['']`,
-		children: count.data.toLocaleString("en-IE")
+		children: count.data.toLocaleString(formatTag())
 	});
 };
 const RecordValue = ({ field, format }) => {

package/dist/app/pages/render-node.js

@@ -18,8 +18,8 @@ import { StatBlock } from "./blocks/stat.js";
 import { TableBlock } from "./blocks/table.js";
 import { UsersBlock } from "../../users/users-block.js";
 import { Fragment } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { isLayoutNode } from "@protobase/layout";
 //#region src/app/pages/render-node.tsx
 const blocks = {

package/dist/app/pages/use-layout-data.js

@@ -2,8 +2,8 @@ import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { useCallback } from "react";
-import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/use-layout-data.ts
 /** A list item as a record scope: the key as the URL carries it, and the etag and permissions the item carries. */
 const scopeOf = (model, row) => ({

package/dist/app/record-preview.js

@@ -1,8 +1,8 @@
 import { keys } from "../data/query-keys.js";
 import { recordKey } from "../live/model-helpers.js";
 import { useCallback } from "react";
-import { useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema/internal";
+import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/record-preview.ts
 /**
 * A record as far as a list row knows it: the fields the row loaded, its ETag and permissions as the list gives them.

package/dist/app/record-row/record-row-body.js

@@ -1,4 +1,5 @@
 import { useIsXs } from "../../lib/use-media-query.js";
+import { formatTag } from "../../locale/active-locale.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { displaysOf, loadedFields } from "../displays/list-displays.js";
@@ -71,7 +72,7 @@ const RecordRowBody = ({ model, view, filter, sort = "", display: named, limit,
 					className: "flex flex-wrap gap-x-3 text-muted-foreground",
 					children: [note && /* @__PURE__ */ jsx("span", { children: note }), total !== void 0 && /* @__PURE__ */ jsx("span", {
 						className: "tabular-nums",
-						children: `${total.toLocaleString("en-GB")} ${total === 1 ? singular : plural.toLowerCase()}`
+						children: `${total.toLocaleString(formatTag())} ${total === 1 ? singular : plural.toLowerCase()}`
 					})]
 				})]
 			}) : null,

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

@@ -1,6 +1,6 @@
 import { recordKey } from "../../live/model-helpers.js";
-import { createWhere } from "@protobase/schema";
 import { encodeKey } from "@protobase/schema/internal";
+import { createWhere } from "@protobase/schema";
 //#region src/app/saved/saved-records.ts
 const where$1 = createWhere();
 const relationValue = (value) => {

package/dist/app/search/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/search/messages.ts
+const text = defineMessages({
+	en: {
+		search: "Search",
+		searchOne: (name) => `Search ${name}`,
+		searchTwo: (first, second) => `Search ${first} and ${second}`,
+		searchMore: (first, second) => `Search ${first}, ${second} and more`
+	},
+	nl: {
+		search: "Zoeken",
+		searchOne: (name) => `Zoek in ${name}`,
+		searchTwo: (first, second) => `Zoek in ${first} en ${second}`,
+		searchMore: (first, second) => `Zoek in ${first}, ${second} en meer`
+	}
+});
+//#endregion
+export { text };