@protobase/ui 0.23.3 → 0.23.5

package/dist/app/search/search-model.js

@@ -1,7 +1,8 @@
 import { humanize } from "../../live/naming.js";
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
-import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
+import { text } from "./messages.js";
 import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
+import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
 //#region src/app/search/search-model.ts
 const where$1 = createWhere();
 const searchTargets = (meta) => Object.values(meta.resources).flatMap((model) => {
@@ -16,10 +17,10 @@ const searchTargets = (meta) => Object.values(meta.resources).flatMap((model) =>
 /** "Search organizations and services", or "Search organizations, services and more" when it looks in more. */
 const searchPlaceholder = (targets) => {
 	const names = targets.map((target) => target.label.toLowerCase());
-	if (names.length === 0) return "Search";
-	if (names.length === 1) return `Search ${names[0]}`;
-	if (names.length === 2) return `Search ${names[0]} and ${names[1]}`;
-	return `Search ${names[0]}, ${names[1]} and more`;
+	if (names.length === 0) return text("search");
+	if (names.length === 1) return text("searchOne", names[0]);
+	if (names.length === 2) return text("searchTwo", names[0], names[1]);
+	return text("searchMore", names[0], names[1]);
 };
 /** The list filter for the text: the server's partial-word `search(...)` over the resource's search fields. */
 const searchFilter = (text) => printFilter(where$1.search(text.trim()));

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/api-provider.d.ts

@@ -56,6 +56,7 @@ export declare const useClient: () => {
   form: (name: string) => Promise<import("@protobase/client").PublicForm>;
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
+  live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -114,6 +115,7 @@ export declare const useResourceClient: (resource: string) => {
   form: (name: string) => Promise<import("@protobase/client").PublicForm>;
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
+  live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/data/focus-refresh.js

@@ -9,6 +9,8 @@ const createFocusRefresh = () => {
 	let paused = 0;
 	return {
 		refetchOnWindowFocus: () => paused > 0 ? false : "always",
+		/** Whether a form on screen holds unsaved changes, so its record must not be read again under it. */
+		paused: () => paused > 0,
 		/** Holds the refetches until the returned function is called. */
 		pause: () => {
 			paused += 1;

package/dist/data/live-refresh.js

@@ -0,0 +1,29 @@
+/**
+* Reads again what the page shows of the resources whose records changed: every query keyed by the resource, as after
+* a write of the page's own. While a form holds unsaved changes (`paused`), the records stay as they are, only marked
+* stale, so the form's Save still finds a conflict.
+*/
+const liveRefresh = (queryClient, paused) => {
+	const pending = /* @__PURE__ */ new Set();
+	let timer;
+	const flush = () => {
+		timer = void 0;
+		const resources = new Set(pending);
+		pending.clear();
+		const shown = (key) => resources.has(key[1]);
+		queryClient.invalidateQueries({ predicate: (query) => shown(query.queryKey) && query.queryKey[0] !== "record" });
+		queryClient.invalidateQueries({
+			predicate: (query) => shown(query.queryKey) && query.queryKey[0] === "record",
+			refetchType: paused() ? "none" : "active"
+		});
+	};
+	return {
+		changed: (resources) => {
+			for (const resource of resources) pending.add(resource);
+			if (pending.size > 0 && !timer) timer = setTimeout(flush, 300);
+		},
+		stop: () => clearTimeout(timer)
+	};
+};
+//#endregion
+export { liveRefresh };

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-live-updates.js

@@ -0,0 +1,36 @@
+import { FocusRefreshContext } from "./focus-refresh.js";
+import { useClient } from "./api-provider.js";
+import { liveRefresh } from "./live-refresh.js";
+import { sourceStatusOf } from "./with-sources.js";
+import { useContext, useEffect, useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+//#region src/data/use-live-updates.ts
+/**
+* Keeps what the page shows of the app's `.live()` resources current: hears which records change (`client.live`) and
+* reads again the lists, records and counts of their resources. Connects only when the caller reads a live resource.
+*/
+const useLiveUpdates = (meta) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const focusRefresh = useContext(FocusRefreshContext);
+	const live = useMemo(() => Object.values(meta.resources).filter((model) => model.live && !sourceStatusOf(meta, model.name)).map((model) => model.name).sort().join(","), [meta]);
+	useEffect(() => {
+		if (!live) return;
+		const refresh = liveRefresh(queryClient, () => focusRefresh?.paused() ?? false);
+		const stop = client.live({
+			onChanges: (changes) => refresh.changed(changes.map((change) => change.resource)),
+			onResync: () => refresh.changed(live.split(","))
+		});
+		return () => {
+			stop();
+			refresh.stop();
+		};
+	}, [
+		client,
+		queryClient,
+		focusRefresh,
+		live
+	]);
+};
+//#endregion
+export { useLiveUpdates };

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;