@protobase/ui 0.12.1 → 0.12.3

package/dist/data/use-meta.js

@@ -1,15 +1,19 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
+import { MetaContext } from "./meta-context.js";
+import { useContext, useMemo } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-meta.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.
 */
 const useMeta = () => {
 	const client = useClient();
 	const queryClient = useQueryClient();
-	return useQuery({
+	const merged = useContext(MetaContext);
+	const query = useQuery({
 		queryKey: keys.meta,
 		staleTime: 0,
 		refetchOnWindowFocus: "always",
@@ -30,10 +34,18 @@ const useMeta = () => {
 				...result.meta.bottomBar && { bottomBar: result.meta.bottomBar },
 				...result.meta.assistant && { assistant: result.meta.assistant },
 				...result.meta.runtime && { runtime: result.meta.runtime },
-				...result.meta.plugins && { plugins: result.meta.plugins }
+				...result.meta.plugins && { plugins: result.meta.plugins },
+				...result.meta.sources && { sources: result.meta.sources.map((source) => ({
+					source,
+					state: "loading"
+				})) }
 			};
 		}
 	});
+	return useMemo(() => merged && query.data ? {
+		...query,
+		data: merged
+	} : query, [merged, query]);
 };
 //#endregion
 export { useMeta };

package/dist/data/use-source-metas.js

@@ -0,0 +1,61 @@
+import { keys } from "./query-keys.js";
+import { useMemo } from "react";
+import { sourceMeta } from "@protobase/client";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
+//#region src/data/use-source-metas.ts
+/** How long the app waits for a source's `/meta` before it shows the source's resources as unavailable. */
+const sourceTimeoutMs = 1e4;
+const combine = (results) => results.map((result) => ({
+	data: result.data?.meta,
+	error: result.error
+}));
+/**
+* Each source's `/meta`, read with the user's token from that API and scoped to the resources the app draws from it
+* (`sourceMeta`). Like the app's own, it is read again on window focus with `If-None-Match`, and a source that cannot be
+* read is an `error` without holding up the others or the app.
+*/
+const useSourceMetas = (sources, clientOf) => {
+	const queryClient = useQueryClient();
+	const results = useQueries({
+		queries: sources.map((source) => {
+			const queryKey = keys.sourceMeta(source.url, source.resources);
+			return {
+				queryKey,
+				staleTime: 0,
+				refetchOnWindowFocus: "always",
+				queryFn: async () => {
+					const previous = queryClient.getQueryData(queryKey);
+					const result = await clientOf(source).meta(previous?.etag, { signal: AbortSignal.timeout(sourceTimeoutMs) });
+					if (result.status === "unchanged") {
+						if (!previous) throw new Error(`${source.label} answered 304 to a request without If-None-Match`);
+						return previous;
+					}
+					return {
+						etag: result.etag,
+						meta: sourceMeta(result.meta, source)
+					};
+				}
+			};
+		}),
+		combine
+	});
+	return useMemo(() => sources.map((source, index) => {
+		const { data, error } = results[index];
+		if (data) return {
+			source,
+			state: "ready",
+			meta: data
+		};
+		if (error) return {
+			source,
+			state: "error",
+			error
+		};
+		return {
+			source,
+			state: "loading"
+		};
+	}), [sources, results]);
+};
+//#endregion
+export { sourceTimeoutMs, useSourceMetas };

package/dist/data/with-sources.js

@@ -0,0 +1,38 @@
+//#region src/data/with-sources.ts
+/**
+* The app's `/meta` with the resources it draws from its sources: those of every source that is ready, with their views
+* and permissions, as if they were the app's own, and how far each source has loaded in `sources`. A source that is
+* loading or cannot be read adds no resources; the app shows its resources as unavailable (see `sourceStatusOf`).
+*/
+const withSources = (meta, results) => {
+	if (results.length === 0) return meta;
+	const ready = results.flatMap((result) => result.state === "ready" ? [result.meta] : []);
+	const sources = results.map((result) => result.state === "error" ? {
+		source: result.source,
+		state: "error",
+		error: result.error
+	} : {
+		source: result.source,
+		state: result.state
+	});
+	return {
+		...meta,
+		resources: {
+			...meta.resources,
+			...Object.fromEntries(ready.flatMap((part) => part.resources.map((model) => [model.name, model])))
+		},
+		views: {
+			...meta.views,
+			...Object.fromEntries(ready.flatMap((part) => part.views.map((view) => [view.resource, view])))
+		},
+		permissions: {
+			...meta.permissions,
+			...Object.assign({}, ...ready.map((part) => part.permissions))
+		},
+		sources
+	};
+};
+/** The source the app draws `resource` from, with how far it has loaded; `undefined` for a resource of the app's own. */
+const sourceStatusOf = (meta, resource) => meta.sources?.find((status) => status.source.resources.includes(resource));
+//#endregion
+export { sourceStatusOf, withSources };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { ActionContext, ActionHandler, ProjectUi, definePlugin, defineUi } from
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
 import "./app/index.js";
-import { ApiProvider, ApiProviderProps, useClient } from "./data/api-provider.js";
+import { ApiProvider, ApiProviderProps, useClient, useResourceClient } from "./data/api-provider.js";
 import { MetaData } from "./data/meta-data.js";
 import { useMeta } from "./data/use-meta.js";
 import { useList } from "./data/use-list.js";
@@ -39,4 +39,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ApiProvider, useClient } from "./data/api-provider.js";
+import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
 import { ChatMessage } from "./chat/chat-message.js";
@@ -30,4 +30,4 @@ import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/lib/use-media-query.js

@@ -8,5 +8,7 @@ const useMediaQuery = (query) => useSyncExternalStore((onChange) => {
 }, () => window.matchMedia(query).matches, () => false);
 /** The `md` breakpoint: where the sidebar stops being a drawer and tables stop squeezing. */
 const useIsDesktop = () => useMediaQuery("(min-width: 768px)");
+/** Below the `sm` breakpoint: a phone, where a list opens in its cards display. */
+const useIsXs = () => useMediaQuery("not all and (min-width: 640px)");
 //#endregion
-export { useIsDesktop, useMediaQuery };
+export { useIsDesktop, useIsXs, useMediaQuery };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.12.1";
+var version = "0.12.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };