@protobase/ui 0.10.0 → 0.11.1

package/dist/app/use-app-address.js

@@ -0,0 +1,47 @@
+import { changedList, currentAddress, listDefaults } from "./current-address.js";
+import { useAdminMeta } from "./meta-gate.js";
+import { Link, useRouter } from "./router.js";
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { appPath, readAppPath } from "@protobase/schema";
+//#region src/app/use-app-address.tsx
+/**
+* The app's address as logical values, and the ways to change it: `set` changes the list in place, `go` moves to
+* another address, `href` is an address for an `<a href>` and `open` follows such an href. Every component reads and
+* writes the address through this hook, never the query string or a path of its own.
+*/
+const useAppAddress = () => {
+	const { path, params, basePath, navigate } = useRouter();
+	const { pages, resources, views } = useAdminMeta();
+	const pageNames = useMemo(() => new Set(Object.keys(pages)), [pages]);
+	const query = params.toString();
+	const read = useMemo(() => readAppPath(query ? `${path}?${query}` : path, pageNames), [
+		path,
+		query,
+		pageNames
+	]);
+	const defaults = useCallback((resource) => listDefaults(resources[resource], views[resource]), [resources, views]);
+	const address = useMemo(() => currentAddress(read, defaults), [read, defaults]);
+	const go = useCallback((to, options) => navigate(appPath(to), options), [navigate]);
+	return {
+		address,
+		set: useCallback((change) => {
+			if (read?.kind !== "list") throw new Error("set changes the list the app shows; use go to move to another address");
+			go(changedList(read, change, defaults(read.resource)), { replace: true });
+		}, [
+			read,
+			defaults,
+			go
+		]),
+		go,
+		href: useCallback((to) => appPath(to, basePath), [basePath]),
+		open: useCallback((target) => navigate(target.startsWith(`${basePath}/`) ? target.slice(basePath.length) : target), [basePath, navigate])
+	};
+};
+/** A link to an address in the app: an ordinary anchor that the router follows without reloading the page. */
+const AppLink = ({ to, ...rest }) => /* @__PURE__ */ jsx(Link, {
+	to: appPath(to),
+	...rest
+});
+//#endregion
+export { AppLink, useAppAddress };

package/dist/app/use-related-records.js

@@ -3,6 +3,7 @@ import { useClient } from "../data/api-provider.js";
 import { humanize } from "../live/naming.js";
 import { fetchLabels } from "../live/relation-labels.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
+import { appPath } from "@protobase/schema";
 //#region src/app/use-related-records.ts
 /** One entry per relation the record holds, named by the record it points at. The tenant is left out. */
 const useRelatedRecords = (model, view, resources, views, record, basePath) => {
@@ -17,13 +18,18 @@ const useRelatedRecords = (model, view, resources, views, record, basePath) => {
 			queryFn: async () => (await fetchLabels(queryClient, client, target, [id], views[target.name])).get(id) ?? id
 		};
 	}) });
+	const addresses = relations.map((field) => ({
+		kind: "record",
+		resource: field.relation.resource,
+		key: String(record[field.name])
+	}));
 	return {
-		hrefs: Object.fromEntries(relations.map((field) => [field.name, `/${field.relation.resource}/${encodeURIComponent(String(record[field.name]))}`])),
+		addresses: Object.fromEntries(relations.map((field, index) => [field.name, addresses[index]])),
 		labels: Object.fromEntries(relations.map((field, index) => [field.name, labels[index]?.data])),
 		records: relations.map((field, index) => ({
 			kind: view?.fields[field.name]?.label ?? humanize(field.name),
 			label: labels[index]?.data ?? String(record[field.name]),
-			href: `${basePath}/${field.relation.resource}/${encodeURIComponent(String(record[field.name]))}`
+			href: appPath(addresses[index], basePath)
 		}))
 	};
 };

package/dist/app/user-menu-from-meta.js

@@ -2,6 +2,7 @@ import { humanize } from "../live/naming.js";
 import { iconFor } from "./icons.js";
 import { menuIcon } from "./menu-icons.js";
 import { ExternalLink, LayoutDashboard } from "lucide-react";
+import { appPath } from "@protobase/schema";
 //#region src/app/user-menu-from-meta.ts
 /** The resources and pages the user menu holds; the sidebar leaves them out. */
 const userMenuResources = (meta) => new Set((meta.userMenu?.items ?? []).flatMap((item) => item.kind === "resource" ? [item.resource] : item.kind === "page" ? [item.page] : []));
@@ -20,7 +21,10 @@ const userMenuFromMeta = (meta, basePath, activeResource) => (meta.userMenu?.ite
 			id: item.page,
 			label: item.label ?? page?.title ?? humanize(item.page),
 			icon: menuIcon(item.icon ?? page?.icon, LayoutDashboard),
-			href: `${basePath}/${item.page}`,
+			href: appPath({
+				kind: "page",
+				page: item.page
+			}, basePath),
 			active: item.page === activeResource
 		};
 	}
@@ -28,7 +32,10 @@ const userMenuFromMeta = (meta, basePath, activeResource) => (meta.userMenu?.ite
 		id: item.resource,
 		label: item.label ?? meta.views[item.resource]?.names?.plural ?? humanize(item.resource),
 		icon: menuIcon(item.icon, iconFor(item.resource)),
-		href: `${basePath}/${item.resource}`,
+		href: appPath({
+			kind: "list",
+			resource: item.resource
+		}, basePath),
 		active: item.resource === activeResource
 	};
 });

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

@@ -1,4 +1,4 @@
-import { ResourcePermissions } from "@protobase/client";
+import { PluginRef, ResourcePermissions } from "@protobase/client";
 import { BottomBarModel, ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
@@ -20,5 +20,7 @@ export type MetaData = {
   runtime?: {
     url: string;
   };
+  /** The plugins the app loads for the user (see `PluginGate`). */
+  plugins?: PluginRef[];
 };
 //#endregion

package/dist/data/use-meta.js

@@ -29,7 +29,8 @@ const useMeta = () => {
 				...result.meta.userMenu && { userMenu: result.meta.userMenu },
 				...result.meta.bottomBar && { bottomBar: result.meta.bottomBar },
 				...result.meta.assistant && { assistant: result.meta.assistant },
-				...result.meta.runtime && { runtime: result.meta.runtime }
+				...result.meta.runtime && { runtime: result.meta.runtime },
+				...result.meta.plugins && { plugins: result.meta.plugins }
 			};
 		}
 	});

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { ActionContext, ActionHandler, ProjectUi, defineUi } from "./app/pages/project-ui.js";
+import { ActionContext, ActionHandler, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
+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";
@@ -8,8 +9,15 @@ import { useList } from "./data/use-list.js";
 import { useRecord } from "./data/use-record.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
+import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { mergeUi } from "./app/pages/merge-ui.js";
+import { uiFromModule } from "./app/pages/ui-from-module.js";
 import { LayoutRecord, useLayoutRecord } from "./app/pages/record-scope.js";
+import { CurrentAddress, ListAddress, ListChange } from "./app/current-address.js";
+import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { ListDisplayRow } from "./app/displays/list-displays.js";
+import { ListDisplay, useListDisplay } from "./app/displays/display-context.js";
+import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { AssistantDock, AssistantDockProps } from "./assistant-dock/assistant-dock.js";
 import { PartView } from "./assistant-dock/part-view.js";
@@ -30,4 +38,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, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type DiffLine, DiffView, type DiffViewProps, FieldList, type LayoutRecord, type MetaData, PartView, type ProjectUi, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, 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 LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, 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 };

package/dist/index.js

@@ -11,17 +11,23 @@ import { CompactTable } from "./compact-table/compact-table.js";
 import { diffStats, parseDiff } from "./diff-view/diff.js";
 import { DiffView } from "./diff-view/diff-view.js";
 import { StepList } from "./step-list/step-list.js";
-import { defineUi } from "./app/pages/project-ui.js";
+import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PartView } from "./assistant-dock/part-view.js";
 import { useBackendData } from "./assistant-dock/use-backend-data.js";
 import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { useMeta } from "./data/use-meta.js";
+import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
+import { useListDisplay } from "./app/displays/display-context.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
+import { uiFromModule } from "./app/pages/ui-from-module.js";
 import { mergeUi } from "./app/pages/merge-ui.js";
+import { usePlugin } from "./plugins/plugin-context.js";
+import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
-export { ActionCard, ApiProvider, App, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, SidePanel, StepList, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+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 };

package/dist/live/use-live-rows.js

@@ -4,7 +4,10 @@ import { createGridLoader } from "./grid-loader.js";
 import { useMemo } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/live/use-live-rows.ts
-/** A grid row source backed by the API; `total` is the server's estimate from the first page. */
+/**
+* A grid row source backed by the API; `total` is the server's estimate from the first page. `page` loads one page of
+* the same rows by number, and `key` names them in the query cache, for list displays that page through them.
+*/
 const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
@@ -38,7 +41,9 @@ const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
 			loadRows: loader.loadRows
 		} : void 0, [first.data, loader]),
 		error: first.error,
-		isLoading: first.isLoading
+		isLoading: first.isLoading,
+		page: loader.page,
+		key: [...keys.first(model.name, filter, orderBy), columnKey]
 	};
 };
 //#endregion

package/dist/package.js

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

package/dist/plugins/load-plugin.d.ts

@@ -0,0 +1,16 @@
+import "../app/pages/project-ui.js";
+import { PluginRef } from "@protobase/client";
+import "@protobase/schema";
+//#region src/plugins/load-plugin.d.ts
+/** What loading a plugin needs from the page: reading its plugin.json, adding its stylesheet and importing its module. */
+export type PluginLoader = {
+  /** The JSON at `url`, or the HTTP status it answered with. */
+  readJson: (url: string) => Promise<{
+    json: unknown;
+  } | {
+    status: number;
+  }>;
+  addStylesheet: (url: string) => void;
+  importModule: (url: string) => Promise<Record<string, unknown>>;
+};
+//#endregion

package/dist/plugins/load-plugin.js

@@ -0,0 +1,73 @@
+import { parseManifest } from "./plugin-manifest.js";
+import { pluginUi } from "./plugin-ui.js";
+import { pluginApi, protobaseVersion } from "./plugin-api.js";
+import { pluginProblem } from "@protobase/schema";
+//#region src/plugins/load-plugin.ts
+/** The page's own: `fetch` without a cached copy, a `<link>` per stylesheet, and `import()`. */
+const browserLoader = {
+	readJson: async (url) => {
+		const response = await fetch(url, {
+			cache: "no-cache",
+			credentials: "same-origin"
+		});
+		return response.ok ? { json: await response.json() } : { status: response.status };
+	},
+	addStylesheet: (url) => {
+		if ([...document.querySelectorAll("link[rel=\"stylesheet\"]")].some((link) => link.href === url)) return;
+		const link = document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = url;
+		document.head.append(link);
+	},
+	importModule: (url) => import(
+		/* @vite-ignore */
+		url
+)
+};
+/** This app, as a plugin's plugin.json is checked against. */
+const thisApp = {
+	api: pluginApi,
+	version: protobaseVersion
+};
+const describe = (error) => error instanceof Error ? error.message : String(error);
+/**
+* Loads the plugin `ref` names: its plugin.json, then, when this app may load it (see `pluginProblem`), its stylesheet
+* and module. Every way a plugin can fail ends in `off` with the reason, never in a broken app.
+*/
+const loadPlugin = async (ref, loader, base, host = thisApp) => {
+	const url = new URL(ref.url, base).href;
+	const off = (reason, name) => ({
+		kind: "off",
+		url,
+		...name && { name },
+		reason
+	});
+	let name;
+	try {
+		const read = await loader.readJson(url);
+		if ("status" in read) return off(`its plugin.json answered ${read.status}`);
+		const parsed = parseManifest(read.json);
+		if ("problem" in parsed) return off(parsed.problem);
+		const { manifest } = parsed;
+		name = manifest.name;
+		const problem = pluginProblem(manifest, host);
+		if (problem) return off(problem, name);
+		if (manifest.css) loader.addStylesheet(new URL(manifest.css, url).href);
+		const module = await loader.importModule(new URL(manifest.entry, url).href);
+		const plugin = {
+			name,
+			...manifest.version && { version: manifest.version },
+			url,
+			settings: ref.settings ?? {}
+		};
+		return {
+			kind: "loaded",
+			plugin,
+			ui: pluginUi(plugin, module)
+		};
+	} catch (error) {
+		return off(`it could not be loaded: ${describe(error)}`, name);
+	}
+};
+//#endregion
+export { browserLoader, loadPlugin };

package/dist/plugins/merge-plugins.js

@@ -0,0 +1,36 @@
+import { UiConflictError, mergeUi } from "../app/pages/merge-ui.js";
+//#region src/plugins/merge-plugins.ts
+/**
+* The app's UI config with the loaded plugins' merged before it, in their order, and the plugins that are off: those
+* that did not load, and those that define a component or action handler the app or an earlier plugin defines, which
+* the app's or the earlier one keeps. A conflict within the app's own configs throws, as it does without plugins.
+*/
+const mergePlugins = (project, loads) => {
+	const own = mergeUi(project ?? {});
+	const kept = [];
+	const off = [];
+	for (const load of loads) {
+		if (load.kind === "off") {
+			off.push(load);
+			continue;
+		}
+		try {
+			mergeUi(...kept, load.ui, own);
+			kept.push(load.ui);
+		} catch (error) {
+			if (!(error instanceof UiConflictError)) throw error;
+			off.push({
+				kind: "off",
+				url: load.plugin.url,
+				name: load.plugin.name,
+				reason: error.message
+			});
+		}
+	}
+	return {
+		ui: kept.length === 0 ? own : mergeUi(...kept, own),
+		off
+	};
+};
+//#endregion
+export { mergePlugins };

package/dist/plugins/plugin-api.d.ts

@@ -0,0 +1,10 @@
+//#region src/plugins/plugin-api.d.ts
+/**
+ * The plugin API this @protobase/ui provides. A plugin built for another one is not loaded. It changes only when a
+ * plugin built for the previous one could break: an export of @protobase/ui removed or changed, a module shared with
+ * plugins added or removed, or a new major version of React. Its exports are pinned by plugin-api.test.ts.
+ */
+export declare const pluginApi: number;
+/** The Protobase version this @protobase/ui is: the app's, since plugins share the app's copy. */
+export declare const protobaseVersion: string;
+//#endregion

package/dist/plugins/plugin-api.js

@@ -0,0 +1,12 @@
+import { protobase, version } from "../package.js";
+//#region src/plugins/plugin-api.ts
+/**
+* The plugin API this @protobase/ui provides. A plugin built for another one is not loaded. It changes only when a
+* plugin built for the previous one could break: an export of @protobase/ui removed or changed, a module shared with
+* plugins added or removed, or a new major version of React. Its exports are pinned by plugin-api.test.ts.
+*/
+const pluginApi = protobase.pluginApi;
+/** The Protobase version this @protobase/ui is: the app's, since plugins share the app's copy. */
+const protobaseVersion = version;
+//#endregion
+export { pluginApi, protobaseVersion };

package/dist/plugins/plugin-context.d.ts

@@ -0,0 +1,14 @@
+//#region src/plugins/plugin-context.d.ts
+/** A loaded plugin, as its components see it with `usePlugin()`. */
+export type PluginInfo = {
+  name: string;
+  /** Its own version, from its package.json, when it has one. */
+  version?: string;
+  /** Its plugin.json, from which its own files are found: `new URL('./data.json', url)`. */
+  url: string;
+  /** What the app gives it in `options.plugins`. */
+  settings: Record<string, unknown>;
+};
+/** The plugin the calling component belongs to: its name, version, URL and settings. Only a plugin's components may call it. */
+export declare const usePlugin: () => PluginInfo;
+//#endregion

package/dist/plugins/plugin-context.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+//#region src/plugins/plugin-context.tsx
+const PluginContext = createContext(null);
+const PluginProvider = PluginContext.Provider;
+/** The plugin the calling component belongs to: its name, version, URL and settings. Only a plugin's components may call it. */
+const usePlugin = () => {
+	const plugin = useContext(PluginContext);
+	if (!plugin) throw new Error("usePlugin is for the components of a plugin the app loaded");
+	return plugin;
+};
+//#endregion
+export { PluginProvider, usePlugin };

package/dist/plugins/plugin-gate.js

@@ -0,0 +1,35 @@
+import { Spinner } from "../primitives/spinner.js";
+import { ProjectUiContext } from "../app/pages/project-ui.js";
+import { useAdminMeta } from "../app/meta-gate.js";
+import { browserLoader } from "./load-plugin.js";
+import { mergePlugins } from "./merge-plugins.js";
+import { usePluginLoads } from "./use-plugin-loads.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/plugin-gate.tsx
+const PluginsOffContext = createContext([]);
+/** The plugins `/meta` names that the app did not load, and why. */
+const usePluginsOff = () => useContext(PluginsOffContext);
+/**
+* Loads the plugins `/meta` names and provides the project's UI config with theirs merged in. It draws its children
+* once they have loaded, or failed, or after a wait (see `usePluginLoads`); a plugin that fails is left out, and its
+* components draw what any missing component draws.
+*/
+const PluginGate = ({ ui, loader = browserLoader, children }) => {
+	const { plugins = [] } = useAdminMeta();
+	const { loads, settled } = usePluginLoads(plugins, loader);
+	const merged = useMemo(() => mergePlugins(ui, loads), [ui, loads]);
+	if (!settled) 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"]
+	});
+	return /* @__PURE__ */ jsx(ProjectUiContext.Provider, {
+		value: merged.ui,
+		children: /* @__PURE__ */ jsx(PluginsOffContext.Provider, {
+			value: merged.off,
+			children
+		})
+	});
+};
+//#endregion
+export { PluginGate, usePluginsOff };

package/dist/plugins/plugin-manifest.js

@@ -0,0 +1,23 @@
+//#region src/plugins/plugin-manifest.ts
+const isText = (value) => typeof value === "string" && value.trim() !== "";
+/** The manifest in `value`, or what is wrong with it. */
+const parseManifest = (value) => {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return { problem: "its plugin.json is not an object" };
+	const { name, version, api, protobase, entry, css } = value;
+	if (!isText(name)) return { problem: "its plugin.json names no plugin" };
+	if (!Number.isInteger(api)) return { problem: "its plugin.json names no plugin API" };
+	if (!isText(protobase)) return { problem: "its plugin.json names no Protobase versions" };
+	if (!isText(entry)) return { problem: "its plugin.json names no module" };
+	if (css !== void 0 && !isText(css)) return { problem: "its plugin.json names a stylesheet that is no URL" };
+	if (version !== void 0 && !isText(version)) return { problem: "its plugin.json has a version that is no text" };
+	return { manifest: {
+		name,
+		api,
+		protobase,
+		entry,
+		...version !== void 0 && { version },
+		...css !== void 0 && { css }
+	} };
+};
+//#endregion
+export { parseManifest };

package/dist/plugins/plugin-notice.js

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Puzzle, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/plugin-notice.tsx
+/** Across the top of the app for its admins while plugins it should load are off: which, and why. */
+const PluginNotice = ({ off }) => {
+	const [dismissed, setDismissed] = useState(false);
+	if (dismissed || off.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		"aria-label": "Plugins off",
+		className: "flex items-start gap-3 border-b border-warning/40 bg-warning-soft px-4 py-2 text-[13px] text-warning-text",
+		children: [
+			/* @__PURE__ */ jsx(Puzzle, {
+				"aria-hidden": true,
+				className: "mt-0.5 size-4 shrink-0"
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "min-w-0 flex-1 space-y-0.5 break-words",
+				children: off.map((plugin) => /* @__PURE__ */ jsxs("li", { children: [
+					"The plugin ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: plugin.name ?? plugin.url
+					}),
+					" is off: ",
+					plugin.reason,
+					"."
+				] }, plugin.url))
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Dismiss",
+				className: "rounded p-0.5 hover:bg-warning/10",
+				onClick: () => setDismissed(true),
+				children: /* @__PURE__ */ jsx(X, {
+					"aria-hidden": true,
+					className: "size-4"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { PluginNotice };

package/dist/plugins/plugin-ui.js

@@ -0,0 +1,37 @@
+import { uiFromModule } from "../app/pages/ui-from-module.js";
+import { mergeUi } from "../app/pages/merge-ui.js";
+import { PluginProvider } from "./plugin-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/plugins/plugin-ui.tsx
+const within = (plugin, Component, name) => {
+	const Within = (props) => /* @__PURE__ */ jsx(PluginProvider, {
+		value: plugin,
+		children: /* @__PURE__ */ jsx(Component, { ...props })
+	});
+	Within.displayName = `${plugin.name}:${name}`;
+	return Within;
+};
+/**
+* A plugin's UI config from its module, read as a `protobase.ui.tsx` module and merged with the configs it extends,
+* named after the plugin: its components and shell slots draw inside the plugin. Throws `UiConflictError` when the
+* configs it merges define a name twice.
+*/
+const pluginUi = (plugin, module) => {
+	const ui = mergeUi({
+		...uiFromModule(module),
+		name: plugin.name
+	});
+	const components = Object.fromEntries(Object.entries(ui.components ?? {}).map(([name, Component]) => [name, within(plugin, Component, name)]));
+	const shell = ui.shell && {
+		...ui.shell.actions && { actions: within(plugin, ui.shell.actions, "shell.actions") },
+		...ui.shell.rightPanel && { rightPanel: within(plugin, ui.shell.rightPanel, "shell.rightPanel") }
+	};
+	return {
+		name: plugin.name,
+		components,
+		...ui.actions && { actions: ui.actions },
+		...shell && { shell }
+	};
+};
+//#endregion
+export { pluginUi };

package/dist/plugins/use-plugin-loads.js

@@ -0,0 +1,57 @@
+import { loadPlugin } from "./load-plugin.js";
+import { useEffect, useState } from "react";
+//#region src/plugins/use-plugin-loads.ts
+/** How long the app waits for its plugins before it draws without the ones still loading, which arrive later. */
+const pluginWaitMs = 1e4;
+const none = [];
+/**
+* The plugins `refs` names, in their order, as they load. `settled` once every one has loaded or failed, or after
+* `pluginWaitMs`, so a slow plugin delays the app only that long. Without plugins it is settled at once.
+*/
+const usePluginLoads = (refs, loader) => {
+	const key = JSON.stringify(refs);
+	const [state, setState] = useState({
+		key: "[]",
+		loads: none,
+		settled: true
+	});
+	useEffect(() => {
+		if (refs.length === 0) return;
+		let active = true;
+		let waited = false;
+		const results = refs.map(() => void 0);
+		const publish = () => {
+			if (!active) return;
+			const loads = results.filter((load) => load !== void 0);
+			setState({
+				key,
+				loads,
+				settled: waited || loads.length === refs.length
+			});
+		};
+		const timer = setTimeout(() => {
+			waited = true;
+			publish();
+		}, pluginWaitMs);
+		refs.forEach((ref, index) => {
+			loadPlugin(ref, loader, window.location.href).then((load) => {
+				results[index] = load;
+				publish();
+			});
+		});
+		return () => {
+			active = false;
+			clearTimeout(timer);
+		};
+	}, [key, loader]);
+	if (refs.length === 0) return {
+		loads: none,
+		settled: true
+	};
+	return state.key === key ? state : {
+		loads: none,
+		settled: false
+	};
+};
+//#endregion
+export { pluginWaitMs, usePluginLoads };

package/dist/primitives/segmented.js

@@ -1,13 +1,16 @@
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/segmented.tsx
-const Segmented = ({ value, options, onChange }) => /* @__PURE__ */ jsx("span", {
+const Segmented = ({ value, options, onChange, label }) => /* @__PURE__ */ jsx("span", {
+	role: "group",
+	"aria-label": label,
 	className: "inline-flex h-7 rounded-md bg-muted p-0.5",
-	children: options.map((option) => /* @__PURE__ */ jsx("button", {
+	children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
+		"aria-pressed": option.value === value,
 		onClick: () => onChange(option.value),
-		className: cn("rounded px-2.5 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
-		children: option.label
+		className: cn("inline-flex items-center gap-1.5 rounded px-2.5 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), option.label]
 	}, option.value))
 });
 //#endregion