@protobase/ui 0.11.0 → 0.12.0

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

@@ -1,3 +1,4 @@
+import { FieldWidget } from "../field-types/field-widget.js";
 import { ComponentType } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
@@ -16,15 +17,18 @@ export type ActionContext = {
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
- * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour, and
- * the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
- * (`import * as tasksUi from '...'`), their exported components included; `name` names it in their errors.
+ * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
+ * field types by the name a view's `.widget(name)` chooses, and the shell's slots. `extends` lists UI configs merged in
+ * before it (see `mergeUi`), or whole `protobase.ui.tsx` modules (`import * as tasksUi from '...'`), their exported
+ * components included; `name` names it in their errors.
  */
 export type ProjectUi = {
   name?: string;
   extends?: Array<ProjectUi | UiModule>;
   components?: Record<string, ComponentType<any>>;
   actions?: Record<string, ActionHandler>;
+  /** Field types by name, each with the storage types it shows and its components (see `FieldWidget`). */
+  fields?: Record<string, FieldWidget>;
   /** Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page. */
   shell?: {
     actions?: ComponentType;
@@ -38,4 +42,10 @@ export type UiModule = {
 };
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 export declare const defineUi: (ui: ProjectUi) => ProjectUi;
+/**
+ * Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
+ * `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
+ * project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+ */
+export declare const definePlugin: (plugin: ProjectUi) => ProjectUi;
 //#endregion

package/dist/app/pages/project-ui.js

@@ -2,8 +2,14 @@ import { createContext, useContext } from "react";
 //#region src/app/pages/project-ui.tsx
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 const defineUi = (ui) => ui;
-/** The project's UI, merged with the UI configs it extends; `ProjectUiProvider` provides it. */
+/**
+* Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
+* `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
+* project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+*/
+const definePlugin = (plugin) => plugin;
+/** The project's UI, merged with the UI configs it extends and the plugins loaded; `PluginGate` or `ProjectUiProvider` provides it. */
 const ProjectUiContext = createContext({});
 const useProjectUi = () => useContext(ProjectUiContext);
 //#endregion
-export { ProjectUiContext, defineUi, useProjectUi };
+export { ProjectUiContext, definePlugin, defineUi, useProjectUi };

package/dist/app/pages/render-node.js

@@ -1,5 +1,6 @@
 import { useProjectUi } from "./project-ui.js";
 import { Problem } from "./problem.js";
+import { CustomBoundary } from "./custom-boundary.js";
 import { ActionBlock } from "./blocks/action.js";
 import { CardBlock } from "./blocks/card.js";
 import { CardRowBlock } from "./blocks/card-row.js";
@@ -62,11 +63,14 @@ const RenderNode = ({ node }) => {
 		if (!Custom) return /* @__PURE__ */ jsxs(Problem, { children: [
 			"No component is registered as ",
 			node.type,
-			". Add it to the components in protobase.ui.tsx."
+			". Export it from protobase.ui.tsx, or load the plugin that provides it."
 		] });
-		return /* @__PURE__ */ jsx(Custom, {
-			...unmarkFieldRefs(node.props),
-			children: node.children.length > 0 ? renderChildren(node.children) : void 0
+		return /* @__PURE__ */ jsx(CustomBoundary, {
+			name: node.type,
+			children: /* @__PURE__ */ jsx(Custom, {
+				...unmarkFieldRefs(node.props),
+				children: node.children.length > 0 ? renderChildren(node.children) : void 0
+			})
 		});
 	}
 	const Block = blocks[node.type];

package/dist/app/record-page.js

@@ -7,11 +7,14 @@ import { useClient } from "../data/api-provider.js";
 import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useNavigationGuard, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
 import { displayValue } from "../live/display-value.js";
 import { ErrorBanner } from "./error-banner.js";
+import { shownWidget } from "./field-types/shown-widget.js";
+import { WidgetPart } from "./field-types/widget-part.js";
 import { FieldEditor } from "./field-editor.js";
 import { can, fieldAccess } from "./permissions.js";
 import { Field } from "../record-view/field.js";
@@ -122,6 +125,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		onReview: () => void queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) })
 	});
 	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
+	const { fields: fieldTypes } = useProjectUi();
 	const layout = layoutFor(model, view);
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const status = model.fields.status?.type === "enum" ? String(stored.record.status) : void 0;
@@ -171,12 +175,20 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
 			const text = displayValue(field, stored.record[name], hint(name));
+			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(Badge, {
+				tone: toneFor(String(stored.record[name])),
+				children: text
+			}) : /* @__PURE__ */ jsx("strong", { children: text });
+			const shown = shownWidget(fieldTypes, field, hint(name));
 			return [{
 				label: hint(name)?.label ?? humanize(name),
-				value: field.type === "enum" ? /* @__PURE__ */ jsx(Badge, {
-					tone: toneFor(String(stored.record[name])),
-					children: text
-				}) : /* @__PURE__ */ jsx("strong", { children: text })
+				value: shown ? /* @__PURE__ */ jsx(WidgetPart, {
+					shown,
+					part: "display",
+					field,
+					value: stored.record[name],
+					fallback: builtIn
+				}) : builtIn
 			}];
 		})
 	});

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/data-grid/columns.js

@@ -10,7 +10,7 @@ const buildColumns = (specs) => helper.columns(specs.map((spec) => helper.access
 	id: spec.id,
 	header: spec.header,
 	enableSorting: spec.sortable ?? false,
-	cell: (context) => renderCell(spec, context.getValue())
+	cell: (context) => spec.render ? spec.render(context.row.original) : renderCell(spec, context.getValue())
 })));
 //#endregion
 export { buildColumns, features };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { ActionContext, ActionHandler, ProjectUi, defineUi } from "./app/pages/project-ui.js";
+import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.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,12 +10,13 @@ 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 { ListDisplayRow, RecordCardProps } 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";
@@ -36,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 LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type ProjectUi, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, mergeUi, parseDiff, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, 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 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 };

package/dist/index.js

@@ -11,7 +11,7 @@ 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";
@@ -24,8 +24,10 @@ 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";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, defineUi, diffStats, isConflict, mergeUi, parseDiff, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, 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, useSeries, useUpdateRecord };

package/dist/live/field-values.js

@@ -22,6 +22,14 @@ const toPatchValue = (field, draft) => {
 	if (textEdited.has(field.type) || field.type === "enum") return text;
 	throw new Error(`Not implemented: editing ${field.type} fields`);
 };
+/** The value a draft stands for, as the API gives one: null when empty, a boolean or number where the field holds one. */
+const fromDraft = (field, draft) => {
+	if (field.type === "boolean") return Boolean(draft);
+	if (String(draft ?? "").trim() === "") return null;
+	return toPatchValue(field, draft);
+};
+/** The draft for a value, as the editor holds it: a boolean for a boolean field, else its text. */
+const toFieldDraft = (field, value) => field.type === "boolean" ? Boolean(value) : toDraft(value);
 /** Whether the draft differs from what the server holds, comparing numbers by value. */
 const differs = (field, draft, stored) => {
 	if (field.type === "boolean") return Boolean(draft) !== Boolean(stored);
@@ -32,4 +40,4 @@ const differs = (field, draft, stored) => {
 	return a !== b;
 };
 //#endregion
-export { differs, isEditable, toDraft, toPatchValue };
+export { differs, fromDraft, isEditable, toDraft, toFieldDraft, toPatchValue };

package/dist/package.js

@@ -0,0 +1,5 @@
+//#region package.json
+var version = "0.12.0";
+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,45 @@
+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;
+};
+const fieldWithin = (plugin, name, widget) => ({
+	of: widget.of,
+	display: within(plugin, widget.display, `fields.${name}.display`),
+	...widget.editor && { editor: within(plugin, widget.editor, `fields.${name}.editor`) },
+	...widget.cell && { cell: within(plugin, widget.cell, `fields.${name}.cell`) }
+});
+/**
+* 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, field types 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 fields = ui.fields && Object.fromEntries(Object.entries(ui.fields).map(([name, widget]) => [name, fieldWithin(plugin, name, widget)]));
+	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 },
+		...fields && { fields },
+		...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/shell/assets/app-GUjJKojE.css

@@ -0,0 +1 @@
+.pb-range{appearance:none;pointer-events:none;background:0 0;width:100%;height:100%;margin:0;position:absolute;inset:0}.pb-range::-webkit-slider-thumb{appearance:none;pointer-events:auto;background:var(--background);border:2px solid var(--primary);cursor:grab;border-radius:9999px;width:14px;height:14px;box-shadow:0 1px 2px #0003}.pb-range::-moz-range-thumb{pointer-events:auto;background:var(--background);border:2px solid var(--primary);cursor:grab;border-radius:9999px;width:10px;height:10px}.pb-range::-webkit-slider-runnable-track{appearance:none;background:0 0}.pb-range::-moz-range-track{background:0 0}