@protobase/ui 0.12.1 → 0.12.3

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/current-address.js

@@ -1,9 +1,10 @@
+import { defaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
-import { encodeKey, tableDisplay } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema";
 //#region src/app/current-address.ts
-/** What a list shows when its address names nothing: the view's default display, the list's sort, the filters in a bar. */
-const listDefaults = (model, view) => ({
-	display: view?.list?.default ?? tableDisplay,
+/** What a list shows when its address names nothing: its default display for the screen, the list's sort, the filters in a bar. */
+const listDefaults = (model, view, xs = false) => ({
+	display: defaultDisplay(view, xs),
 	orderBy: model ? defaultOrderBy(model, view) : "",
 	filterLayout: "bar"
 });

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

@@ -1,6 +1,7 @@
 import { Badge } from "../../primitives/badge.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
+import { cardFields } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { displayValue } from "../../live/display-value.js";
 import { shownWidget } from "../field-types/shown-widget.js";
@@ -9,7 +10,6 @@ import { WidgetPart } from "../field-types/widget-part.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
-import { cardFields } from "./list-displays.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
 const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";

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

@@ -1,6 +1,6 @@
 import { humanize } from "../../live/naming.js";
-import { parseSort } from "../list-order.js";
 import { displayChoices, sortFields } from "./list-displays.js";
+import { parseSort } from "../list-order.js";
 import { Segmented } from "../../primitives/segmented.js";
 import { Calendar, Columns3, LayoutGrid, List, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/app/displays/list-displays.js

@@ -3,6 +3,16 @@ import { humanize } from "../../live/naming.js";
 import { encodeKey, tableDisplay } from "@protobase/schema";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
+/**
+* The display a list opens in when its address names none. Below the `sm` breakpoint a list with a cards display opens
+* in one: the view's default when that is a cards display, else the first. Otherwise the view's default, or the table.
+*/
+const defaultDisplay = (view, xs) => {
+	const fallback = view?.list?.default ?? tableDisplay;
+	if (!xs) return fallback;
+	const cards = displaysOf(view).filter((display) => display.kind === "cards");
+	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;
+};
 /** The display a list shows for the address's `name`: `undefined` for the table, and the view's default for a name it does not have. */
 const shownDisplay = (view, name) => {
 	if (name === tableDisplay) return void 0;
@@ -59,4 +69,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { cardFields, displayChoices, displayRow, displaysOf, loadedFields, shownDisplay, shownFields, sortFields };
+export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, loadedFields, shownDisplay, shownFields, sortFields };

package/dist/app/list-page.js

@@ -5,6 +5,7 @@ import { Button } from "../primitives/button.js";
 import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
@@ -23,7 +24,6 @@ import { useLiveRows } from "../live/use-live-rows.js";
 import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
-import { loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { CardsDisplay } from "./displays/cards-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";

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/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/use-app-address.js

@@ -1,3 +1,4 @@
+import { useIsXs } from "../lib/use-media-query.js";
 import { changedList, currentAddress, listDefaults } from "./current-address.js";
 import { useAdminMeta } from "./meta-gate.js";
 import { Link, useRouter } from "./router.js";
@@ -13,6 +14,7 @@ import { appPath, readAppPath } from "@protobase/schema";
 const useAppAddress = () => {
 	const { path, params, basePath, navigate } = useRouter();
 	const { pages, resources, views } = useAdminMeta();
+	const xs = useIsXs();
 	const pageNames = useMemo(() => new Set(Object.keys(pages)), [pages]);
 	const query = params.toString();
 	const read = useMemo(() => readAppPath(query ? `${path}?${query}` : path, pageNames), [
@@ -20,7 +22,11 @@ const useAppAddress = () => {
 		query,
 		pageNames
 	]);
-	const defaults = useCallback((resource) => listDefaults(resources[resource], views[resource]), [resources, views]);
+	const defaults = useCallback((resource) => listDefaults(resources[resource], views[resource], xs), [
+		resources,
+		views,
+		xs
+	]);
 	const address = useMemo(() => currentAddress(read, defaults), [read, defaults]);
 	const go = useCallback((to, options) => navigate(appPath(to), options), [navigate]);
 	return {

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

package/dist/data/api-provider.js

@@ -5,17 +5,42 @@ import { jsx } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 //#region src/data/api-provider.tsx
 const ApiContext = createContext(null);
+const SourceClientsContext = createContext(null);
+const ResourceClientContext = createContext(null);
+/** The API client: the app's own, or below `MetaGate` one that sends each resource's calls to the API that serves it. */
 const useClient = () => {
 	const client = useContext(ApiContext);
 	if (!client) throw new Error("useClient must be used inside ApiProvider");
 	return client;
 };
 /**
+* 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.
+*/
+const useResourceClient = (resource) => {
+	const own = useClient();
+	return useContext(ResourceClientContext)?.(resource) ?? own;
+};
+/** The client of a source's API, one per URL, with the signed-in user's token; for `MetaGate`. */
+const useSourceClients = () => {
+	const clientOf = useContext(SourceClientsContext);
+	if (!clientOf) throw new Error("useSourceClients must be used inside ApiProvider");
+	return clientOf;
+};
+/** Gives what is below it `client` from `useClient()`, and the client of a resource's API from `useResourceClient()`. */
+const ClientProvider = ({ client, resourceClient, children }) => /* @__PURE__ */ jsx(ApiContext.Provider, {
+	value: client,
+	children: /* @__PURE__ */ jsx(ResourceClientContext.Provider, {
+		value: resourceClient,
+		children
+	})
+});
+/**
 * Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
 * 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.
 */
-const ApiProvider = ({ baseUrl, client: given, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }) => {
+const ApiProvider = ({ baseUrl, client: given, sources, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }) => {
 	const [queryClient] = useState(() => givenQueryClient ?? new QueryClient({ defaultOptions: { queries: {
 		staleTime: 3e4,
 		retry: false,
@@ -41,13 +66,42 @@ const ApiProvider = ({ baseUrl, client: given, fetch, queryClient: givenQueryCli
 		token,
 		onUnauthenticated
 	]);
+	const sourceClient = useMemo(() => {
+		const made = /* @__PURE__ */ new Map();
+		return (source) => {
+			const ready = sources?.[source.url] ?? made.get(source.url);
+			if (ready) return ready;
+			let seen;
+			const client = createClient({
+				baseUrl: source.url,
+				fetch,
+				token,
+				onMetaVersion: (version) => {
+					const previous = seen;
+					seen = version;
+					if (previous === void 0 || previous === version) return;
+					queryClient.invalidateQueries({ queryKey: keys.sourceMetas(source.url) }, { cancelRefetch: false });
+				}
+			});
+			made.set(source.url, client);
+			return client;
+		};
+	}, [
+		sources,
+		fetch,
+		token,
+		queryClient
+	]);
 	return /* @__PURE__ */ jsx(QueryClientProvider, {
 		client: queryClient,
 		children: /* @__PURE__ */ jsx(ApiContext.Provider, {
 			value: client,
-			children
+			children: /* @__PURE__ */ jsx(SourceClientsContext.Provider, {
+				value: sourceClient,
+				children
+			})
 		})
 	});
 };
 //#endregion
-export { ApiProvider, useClient };
+export { ApiProvider, ClientProvider, useClient, useResourceClient, useSourceClients };

package/dist/data/meta-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+//#region src/data/meta-context.ts
+/** The app's `/meta` with the resources of its sources, as `MetaGate` gives it to everything below it. */
+const MetaContext = createContext(null);
+//#endregion
+export { MetaContext };

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

@@ -1,4 +1,4 @@
-import { PluginRef, ResourcePermissions } from "@protobase/client";
+import { PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { BottomBarModel, ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
@@ -22,5 +22,19 @@ export type MetaData = {
   };
   /** The plugins the app loads for the user (see `PluginGate`). */
   plugins?: PluginRef[];
+  /** The other APIs the app draws resources from for the user, and how far their `/meta` has loaded (see `withSources`). */
+  sources?: SourceStatus[];
+};
+/**
+ * A source of resources and its `/meta`: `ready` once its resources are among the app's, `error` when it could not be
+ * read, the reason in `error`.
+ */
+export type SourceStatus = {
+  source: SourceRef;
+  state: 'loading' | 'ready';
+} | {
+  source: SourceRef;
+  state: 'error';
+  error: Error;
 };
 //#endregion

package/dist/data/query-keys.js

@@ -1,6 +1,14 @@
 //#region src/data/query-keys.ts
 const keys = {
 	meta: ["meta"],
+	/** A source's `/meta`, as far as the app draws it: its URL, and the resources the app lists for it. */
+	sourceMeta: (url, resources) => [
+		"source-meta",
+		url,
+		resources.join(",")
+	],
+	/** Every `/meta` query of the source at `url`. */
+	sourceMetas: (url) => ["source-meta", url],
 	list: (resource, filter, orderBy, pageSize, startToken) => [
 		"list",
 		resource,

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

@@ -1,8 +1,10 @@
 import { MetaData } from "./meta-data.js";
+import { UseQueryResult } from "@tanstack/react-query";
 //#region src/data/use-meta.d.ts
 /**
  * The resource and view models. Refetches on window focus with `If-None-Match`, so an unchanged
- * `/meta` costs a 304, and the cached object keeps its identity.
+ * `/meta` costs a 304, and the cached object keeps its identity. Below the app's `MetaGate`, `data` holds the resources
+ * of its sources too, as every page of the app reads them.
  */
-export declare const useMeta: () => import("@tanstack/react-query").UseQueryResult<MetaData, Error>;
+export declare const useMeta: () => UseQueryResult<MetaData>;
 //#endregion