@protobase/ui 0.12.2 → 0.12.4

package/dist/app/app.d.ts

@@ -9,6 +9,8 @@ export type AppProps = {
   baseUrl?: string;
   /** A ready-made client, for tests. */
   client?: Client;
+  /** Ready-made clients of the sources `/meta` names, by their URL, for stories and tests. */
+  sources?: Record<string, Client>;
   /** Sign-in state for the app; made from the page's origin when omitted. */
   auth?: AuthSession;
   /** Path prefix the app is mounted under, for example `/admin`. */

package/dist/app/app.js

@@ -15,6 +15,7 @@ import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
+import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
@@ -34,6 +35,7 @@ import { ComposedPage } from "./pages/composed-page.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
 import { RecordPage } from "./record-page.js";
+import { SourceNotice } from "./source-notice.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
 import { StaffBanner } from "./staff-banner.js";
@@ -78,6 +80,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		go
 	]);
 	const resource = address?.kind === "page" ? void 0 : address?.resource;
+	const drawnFrom = resource ? sourceStatusOf(meta, resource) : void 0;
 	const view = resource ? meta.views[resource] : void 0;
 	const group = groups.find((entry) => entry.items.some((item) => item.id === place));
 	const model = resource ? meta.resources[resource] : void 0;
@@ -146,7 +149,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			address.page,
 			"."
 		]
-	}) : address.kind === "create" ? /* @__PURE__ */ jsx(CreatePage, { resource: address.resource }, `${address.resource}/new`) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
+	}) : drawnFrom && drawnFrom.state !== "ready" ? /* @__PURE__ */ jsx(SourceNotice, { status: drawnFrom }) : address.kind === "create" ? /* @__PURE__ */ jsx(CreatePage, { resource: address.resource }, `${address.resource}/new`) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
 		resource: address.resource,
 		recordKey: address.key
 	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, address.resource);
@@ -220,11 +223,12 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		]
 	});
 };
-const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
+const Authenticated = ({ baseUrl, client, sources, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
 	const { session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
 		client,
+		sources,
 		token: session.token,
 		onUnauthenticated: markSignedOut,
 		children: /* @__PURE__ */ jsx(Router, {

package/dist/app/meta-gate.js

@@ -1,11 +1,14 @@
 import { Spinner } from "../primitives/spinner.js";
+import { ClientProvider, useClient, useSourceClients } from "../data/api-provider.js";
+import { MetaContext } from "../data/meta-context.js";
 import { allowEverything } from "../data/meta-data.js";
 import { useMeta } from "../data/use-meta.js";
-import { createContext, useContext } from "react";
-import { isApiError } from "@protobase/client";
+import { useSourceMetas } from "../data/use-source-metas.js";
+import { withSources } from "../data/with-sources.js";
+import { useContext, useMemo } from "react";
+import { isApiError, routedClient } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/meta-gate.tsx
-const MetaContext = createContext(null);
 const useAdminMeta = () => {
 	const meta = useContext(MetaContext);
 	if (!meta) throw new Error("useAdminMeta must be used inside MetaGate");
@@ -24,7 +27,45 @@ const Notice = ({ title, children }) => /* @__PURE__ */ jsx("div", {
 		})]
 	})
 });
-/** Renders its children once `/meta` has loaded. */
+/**
+* Draws the resources of the app's sources as its own: reads each source's `/meta`, merges what is ready into the app's,
+* and gives what is below a client that sends each resource's calls to the API that serves it. The app does not wait
+* for a source; its resources join when it has loaded.
+*/
+const WithSources = ({ meta, children }) => {
+	const own = useClient();
+	const clientOf = useSourceClients();
+	const declared = useMemo(() => (meta.sources ?? []).map((status) => status.source), [meta.sources]);
+	const results = useSourceMetas(declared, clientOf);
+	const merged = useMemo(() => withSources(meta, results), [meta, results]);
+	const routing = useMemo(() => {
+		const byResource = new Map(declared.flatMap((source) => source.resources.map((resource) => [resource, source])));
+		const resourceClient = (resource) => {
+			const source = byResource.get(resource);
+			return source && clientOf(source);
+		};
+		return {
+			client: routedClient(own, resourceClient),
+			resourceClient
+		};
+	}, [
+		declared,
+		own,
+		clientOf
+	]);
+	return /* @__PURE__ */ jsx(ClientProvider, {
+		client: routing.client,
+		resourceClient: routing.resourceClient,
+		children: /* @__PURE__ */ jsx(MetaContext.Provider, {
+			value: merged,
+			children
+		})
+	});
+};
+/**
+* Renders its children once `/meta` has loaded, with the resources of the app's sources as they load. The sources'
+* layer is always there, also without sources, so `/meta` gaining or losing them never draws the app anew.
+*/
 const MetaGate = ({ children }) => {
 	const meta = useMeta();
 	if (meta.isPending) return /* @__PURE__ */ jsxs("div", {
@@ -35,8 +76,8 @@ const MetaGate = ({ children }) => {
 		title: "Cannot reach the API",
 		children: isApiError(meta.error) ? meta.error.message : "The server did not answer. Is it running?"
 	});
-	return /* @__PURE__ */ jsx(MetaContext.Provider, {
-		value: meta.data,
+	return /* @__PURE__ */ jsx(WithSources, {
+		meta: meta.data,
 		children
 	});
 };

package/dist/app/nav-from-meta.js

@@ -16,7 +16,8 @@ const groupLabels = {
 /**
 * One sidebar group per `nav.group` (default: the database schema, and "Pages" for pages); `nav.hidden` and a place in
 * the user menu leave an entry out, `nav.order` sorts within a group, and `recent` (from `useNavRecent`) makes an entry
-* collapsible. Groups with pages come first, so a dashboard leads the sidebar.
+* collapsible. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
+* read are listed under its label, each with the problem.
 */
 const navFromMeta = (meta, basePath = "", recent = {}) => {
 	const groups = /* @__PURE__ */ new Map();
@@ -63,6 +64,24 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 		groups.set(groupName, group);
 		orders.set(model.name, view.nav?.order ?? Number.MAX_SAFE_INTEGER);
 	}
+	for (const status of meta.sources ?? []) {
+		if (status.state !== "error") continue;
+		const group = groups.get(status.source.label) ?? {
+			label: status.source.label,
+			items: []
+		};
+		for (const resource of status.source.resources) group.items.push({
+			id: resource,
+			label: humanize(resource),
+			icon: iconFor(resource),
+			href: appPath({
+				kind: "list",
+				resource
+			}, basePath),
+			problem: `Cannot reach ${status.source.label}`
+		});
+		groups.set(status.source.label, group);
+	}
 	return [...groups.values()].map((group) => ({
 		...group,
 		items: [...group.items].sort((a, b) => (orders.get(a.id) ?? 0) - (orders.get(b.id) ?? 0))

package/dist/app/pages/project-ui.d.ts

@@ -3,7 +3,11 @@ import { ComponentType } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
 //#region src/app/pages/project-ui.d.ts
-/** What a named action's handler gets: the record it runs on (inside a RecordCard or CardRow), the API, and a way to move. */
+/**
+ * What a named action's handler gets: the record it runs on (inside a RecordCard or CardRow), the API, and a way to move.
+ * `client` is the client of the API that serves the resource: the app's own, or the source's for a resource drawn from
+ * another API, whose functions `invoke` then calls.
+ */
 export type ActionContext = {
   resource: string;
   record?: Record<string, unknown>;

package/dist/app/pages/use-run-action.js

@@ -1,4 +1,4 @@
-import { useClient } from "../../data/api-provider.js";
+import { useClient, useResourceClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { useProjectUi } from "./project-ui.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
@@ -20,6 +20,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 	const { actions: handlers } = useProjectUi();
 	const permissions = usePermissions(resource);
 	const client = useClient();
+	const handlerClient = useResourceClient(resource);
 	const toast = useToast();
 	const refresh = useRefreshResource();
 	const { go } = useAppAddress();
@@ -46,7 +47,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 			record: scope?.record,
 			recordKey: scope?.key,
 			etag: scope?.etag,
-			client,
+			client: handlerClient,
 			navigate: go
 		});
 		await refresh(resource);

package/dist/app/record-page.js

@@ -114,6 +114,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const permissions = usePermissions(model.name);
 	const restore = useRestore(model);
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
+	const canDelete = can(permissions, "delete") && stored.permissions?.delete !== false;
 	const remove = useDeleteFlow({
 		model,
 		view,
@@ -210,7 +211,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			onClick: editor.discard,
 			children: "Discard"
 		}),
-		can(permissions, "delete") && stored.permissions?.delete !== false && /* @__PURE__ */ jsx(Button, {
+		canDelete && /* @__PURE__ */ jsx(Button, {
 			variant: "danger",
 			className: "max-md:min-h-11",
 			onClick: () => void remove.start({
@@ -231,122 +232,125 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
-		className: "min-h-0 flex-1 overflow-y-auto",
+		className: "flex min-h-0 flex-1 flex-col",
 		children: [
 			remove.dialogs,
-			/* @__PURE__ */ jsxs("div", {
-				className: "mx-auto max-w-[1100px] px-4 pb-28 pt-6 md:px-10 md:py-8",
-				children: [
-					/* @__PURE__ */ jsx(RecordHeader, {
-						collection: view?.names?.plural ?? humanize(model.name),
-						title,
-						status: {
-							label: status ? enumLabel(status, hint("status")?.valueLabels) : singular,
-							tone: status ? toneFor(status) : "neutral"
-						},
-						lastEditedBy: { ago: updated === void 0 ? "recently" : formatRelativeTime(updated) },
-						actions: /* @__PURE__ */ jsx("div", {
-							className: "hidden items-center gap-4 md:flex",
-							children: saveControls
-						})
-					}),
-					editor.message && /* @__PURE__ */ jsx("div", {
-						className: "mt-4",
-						children: /* @__PURE__ */ jsx(ErrorBanner, {
-							title: "Not saved",
-							error: new Error(editor.message)
-						})
-					}),
-					editor.linesConflict && /* @__PURE__ */ jsx("div", {
-						className: "mt-4",
-						children: /* @__PURE__ */ jsx(ErrorBanner, {
-							title: "The lines were changed by someone else",
-							error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
-						})
-					}),
-					editor.restored && /* @__PURE__ */ jsxs("div", {
-						className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
-						role: "status",
-						children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
-							className: "flex gap-2",
-							children: [/* @__PURE__ */ jsx(Button, {
-								size: "sm",
-								onClick: editor.dismissRestored,
-								children: "Keep"
-							}), /* @__PURE__ */ jsx(Button, {
-								size: "sm",
-								onClick: editor.discard,
-								children: "Discard"
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-[1100px] px-4 pb-8 pt-6 md:px-10 md:py-8",
+					children: [
+						/* @__PURE__ */ jsx(RecordHeader, {
+							collection: view?.names?.plural ?? humanize(model.name),
+							title,
+							status: {
+								label: status ? enumLabel(status, hint("status")?.valueLabels) : singular,
+								tone: status ? toneFor(status) : "neutral"
+							},
+							lastEditedBy: { ago: updated === void 0 ? "recently" : formatRelativeTime(updated) },
+							actions: /* @__PURE__ */ jsx("div", {
+								className: "hidden items-center gap-4 md:flex",
+								children: saveControls
+							})
+						}),
+						editor.message && /* @__PURE__ */ jsx("div", {
+							className: "mt-4",
+							children: /* @__PURE__ */ jsx(ErrorBanner, {
+								title: "Not saved",
+								error: new Error(editor.message)
+							})
+						}),
+						editor.linesConflict && /* @__PURE__ */ jsx("div", {
+							className: "mt-4",
+							children: /* @__PURE__ */ jsx(ErrorBanner, {
+								title: "The lines were changed by someone else",
+								error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
+							})
+						}),
+						editor.restored && /* @__PURE__ */ jsxs("div", {
+							className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
+							role: "status",
+							children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									onClick: editor.dismissRestored,
+									children: "Keep"
+								}), /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									onClick: editor.discard,
+									children: "Discard"
+								})]
 							})]
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
-						children: [/* @__PURE__ */ jsxs("main", {
-							className: "divide-y divide-border",
-							children: [layout.flatMap((item, index) => {
-								if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
-									item,
-									recordKey
-								}, `related:${item.title}`)];
-								if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
-									item,
-									scope
-								}, `custom:${index}`)];
-								if (item.kind !== "section") return [];
-								const fields = item.fields.filter((name) => model.fields[name] && visible(name));
-								if (fields.length === 0) return [];
-								return [/* @__PURE__ */ jsx(Section, {
-									title: item.title,
-									help: item.help,
-									children: /* @__PURE__ */ jsx("div", {
-										className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
-										children: fields.map(fieldView)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
+							children: [/* @__PURE__ */ jsxs("main", {
+								className: "divide-y divide-border",
+								children: [layout.flatMap((item, index) => {
+									if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
+										item,
+										recordKey
+									}, `related:${item.title}`)];
+									if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
+										item,
+										scope
+									}, `custom:${index}`)];
+									if (item.kind !== "section") return [];
+									const fields = item.fields.filter((name) => model.fields[name] && visible(name));
+									if (fields.length === 0) return [];
+									return [/* @__PURE__ */ jsx(Section, {
+										title: item.title,
+										help: item.help,
+										children: /* @__PURE__ */ jsx("div", {
+											className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
+											children: fields.map(fieldView)
+										})
+									}, item.title)];
+								}), linesModel && /* @__PURE__ */ jsx(RecordLines, {
+									lines: linesModel,
+									draft: linesDraft,
+									vatRate: Number(stored.record.vatRate ?? 21) / 100,
+									saving: editor.saving
+								})]
+							}), /* @__PURE__ */ jsxs("aside", {
+								className: "space-y-4 md:pt-8",
+								children: [
+									/* @__PURE__ */ jsx(RecordActions, {
+										model,
+										stored,
+										recordKey
+									}),
+									firstSidebar === -1 && summary,
+									layout.map((item, index) => item.kind === "custom" && item.sidebar ? /* @__PURE__ */ jsx(CustomSection, {
+										item,
+										scope
+									}, `custom:${index}`) : index === firstSidebar ? /* @__PURE__ */ jsx(Fragment, { children: summary }, "summary") : null),
+									/* @__PURE__ */ jsx(MetadataCard, {
+										title: "Details",
+										rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
+											const field = name ? model.fields[name] : void 0;
+											return name && field && visible(name) ? [{
+												label: hint(name)?.label ?? humanize(name),
+												value: displayValue(field, stored.record[name], hint(name))
+											}] : [];
+										})
+									}),
+									related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {
+										title: "Related records",
+										children: /* @__PURE__ */ jsx(RelatedRecords, {
+											records: related.records,
+											onNavigate: open
+										})
 									})
-								}, item.title)];
-							}), linesModel && /* @__PURE__ */ jsx(RecordLines, {
-								lines: linesModel,
-								draft: linesDraft,
-								vatRate: Number(stored.record.vatRate ?? 21) / 100,
-								saving: editor.saving
+								]
 							})]
-						}), /* @__PURE__ */ jsxs("aside", {
-							className: "space-y-4 md:pt-8",
-							children: [
-								/* @__PURE__ */ jsx(RecordActions, {
-									model,
-									stored,
-									recordKey
-								}),
-								firstSidebar === -1 && summary,
-								layout.map((item, index) => item.kind === "custom" && item.sidebar ? /* @__PURE__ */ jsx(CustomSection, {
-									item,
-									scope
-								}, `custom:${index}`) : index === firstSidebar ? /* @__PURE__ */ jsx(Fragment, { children: summary }, "summary") : null),
-								/* @__PURE__ */ jsx(MetadataCard, {
-									title: "Details",
-									rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
-										const field = name ? model.fields[name] : void 0;
-										return name && field && visible(name) ? [{
-											label: hint(name)?.label ?? humanize(name),
-											value: displayValue(field, stored.record[name], hint(name))
-										}] : [];
-									})
-								}),
-								related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {
-									title: "Related records",
-									children: /* @__PURE__ */ jsx(RelatedRecords, {
-										records: related.records,
-										onNavigate: open
-									})
-								})
-							]
-						})]
-					})
-				]
+						})
+					]
+				})
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "fixed inset-x-0 bottom-0 z-30 flex items-center gap-2 border-t bg-background p-3 md:hidden",
+			(editor.dirty || canDelete || canUpdate) && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
 				children: saveControls
 			})
 		]

package/dist/app/source-notice.js

@@ -0,0 +1,47 @@
+import { Spinner } from "../primitives/spinner.js";
+import { Button } from "../primitives/button.js";
+import { keys } from "../data/query-keys.js";
+import { isApiError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+//#region src/app/source-notice.tsx
+const reason = (error) => {
+	if (!isApiError(error)) return "It did not answer.";
+	if (error.status === 401 || error.status === 403) return `It did not accept your sign-in: ${error.message}`;
+	return error.message;
+};
+/** Where a resource drawn from another API would be while that API's `/meta` loads, or when it cannot be read. */
+const SourceNotice = ({ status }) => {
+	const queryClient = useQueryClient();
+	if (status.state !== "error") return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" Loading from ",
+			status.source.label
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full min-h-48 items-center justify-center p-8",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-md text-center",
+			children: [
+				/* @__PURE__ */ jsxs("h1", {
+					className: "text-[15px] font-semibold",
+					children: ["Cannot reach ", status.source.label]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "mt-1 text-[13px] text-muted-foreground",
+					children: [reason(status.error), " The rest of the app works as before."]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					className: "mt-3",
+					onClick: () => void queryClient.refetchQueries({ queryKey: keys.sourceMetas(status.source.url) }),
+					children: "Try again"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { SourceNotice };

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

@@ -1,6 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { Tooltip } from "../primitives/tooltip.js";
 import { isTextMode, showsLabelInline } from "./sidebar-mode.js";
+import { TriangleAlert } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-item.tsx
 const layout = {
@@ -19,8 +20,9 @@ const SidebarItem = ({ item, mode, active, onNavigate, className }) => {
 			onNavigate(item.href ?? `#${item.id}`);
 		}),
 		href: item.href ?? `#${item.id}`,
-		"aria-label": item.label,
+		"aria-label": item.problem ? `${item.label}: ${item.problem}` : item.label,
 		"aria-current": active ? "page" : void 0,
+		title: item.problem,
 		className: cn("flex shrink-0 items-center rounded-md font-medium transition-colors", layout[mode], active ? "bg-primary-soft text-primary-text" : "text-muted-foreground hover:bg-muted hover:text-foreground", className),
 		children: [
 			/* @__PURE__ */ jsx(Icon, {
@@ -34,6 +36,10 @@ const SidebarItem = ({ item, mode, active, onNavigate, className }) => {
 			isTextMode(mode) && item.count && /* @__PURE__ */ jsx("span", {
 				className: "ml-auto rounded bg-muted px-1.5 text-[11px] tabular-nums text-muted-foreground",
 				children: item.count
+			}),
+			isTextMode(mode) && item.problem && /* @__PURE__ */ jsx(TriangleAlert, {
+				"aria-hidden": true,
+				className: "ml-auto size-3.5 shrink-0 text-warning-text"
 			})
 		]
 	});

package/dist/data/api-provider.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from "react";
-import { Client, ClientOptions } from "@protobase/client";
+import { Client, ClientOptions, SourceRef } from "@protobase/client";
 import { QueryClient } from "@tanstack/react-query";
 //#region src/data/api-provider.d.ts
+/** The API client: the app's own, or below `MetaGate` one that sends each resource's calls to the API that serves it. */
 export declare const useClient: () => {
   list: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
   search: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
@@ -30,7 +31,47 @@ export declare const useClient: () => {
   seek: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").ListParams & {
     position: number;
   }) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
-  meta: (etag?: string) => Promise<import("@protobase/client").MetaResult>;
+  meta: (etag?: string, { signal }?: {
+    signal?: AbortSignal;
+  }) => Promise<import("@protobase/client").MetaResult>;
+  invoke: <T = unknown>(name: string, { method, body, path, query, headers }?: import("@protobase/client").InvokeOptions) => Promise<T>;
+  upload: (resource: import("@protobase/client").ResourceRef, field: string, file: Blob, { onProgress, signal }?: import("@protobase/client").UploadOptions) => Promise<import("@protobase/client").UploadResult>;
+};
+/**
+ * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
+ * otherwise. A source's client calls that API's functions with `invoke`, where `useClient()` calls the app's own.
+ */
+export declare const useResourceClient: (resource: string) => {
+  list: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  search: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  get: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  create: <R extends import("@protobase/client").ResourceRef>(resource: R, body: Partial<import("@protobase/client").RecordOf<R>>) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>> & {
+    location: string;
+  }>;
+  update: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], patch: Partial<import("@protobase/client").RecordOf<R>>, etag: string) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  remove: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { etag }?: {
+    etag?: string;
+  }) => Promise<void>;
+  undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
+  facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
+    filter?: import("@protobase/client").FilterInput;
+    limit?: number;
+  }) => Promise<import("@protobase/client").Facet[]>;
+  series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
+    filter?: import("@protobase/client").FilterInput;
+  }) => Promise<import("@protobase/client").Series>;
+  histogram: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
+    filter?: import("@protobase/client").FilterInput;
+    buckets?: number;
+  }) => Promise<import("@protobase/client").Histogram>;
+  seek: <R extends import("@protobase/client").ResourceRef>(resource: R, params: import("@protobase/client").ListParams & {
+    position: number;
+  }) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
+  meta: (etag?: string, { signal }?: {
+    signal?: AbortSignal;
+  }) => Promise<import("@protobase/client").MetaResult>;
   invoke: <T = unknown>(name: string, { method, body, path, query, headers }?: import("@protobase/client").InvokeOptions) => Promise<T>;
   upload: (resource: import("@protobase/client").ResourceRef, field: string, file: Blob, { onProgress, signal }?: import("@protobase/client").UploadOptions) => Promise<import("@protobase/client").UploadResult>;
 };
@@ -39,6 +80,8 @@ export type ApiProviderProps = {
   baseUrl?: string;
   /** A ready-made client, for tests; skips the meta-version watcher. */
   client?: Client;
+  /** Ready-made clients of the sources `/meta` names, by their URL, for stories and tests. */
+  sources?: Record<string, Client>;
   /** The `fetch` the built client uses, for tests that keep the meta-version watcher. */
   fetch?: ClientOptions['fetch'];
   queryClient?: QueryClient;
@@ -52,5 +95,5 @@ export type ApiProviderProps = {
  * compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
  * per-caller body, so the two never match.
  */
-export declare const ApiProvider: ({ baseUrl, client: given, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }: ApiProviderProps) => import("react").JSX.Element;
+export declare const ApiProvider: ({ baseUrl, client: given, sources, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }: ApiProviderProps) => import("react").JSX.Element;
 //#endregion