@protobase/ui 0.11.0 → 0.12.0

package/dist/app/app.d.ts

@@ -1,6 +1,7 @@
 import { SidebarMode } from "../app-shell/sidebar-mode.js";
 import "../app-shell/index.js";
 import { ProjectUi } from "./pages/project-ui.js";
+import { PluginLoader } from "../plugins/load-plugin.js";
 import { AssistantClient, AuthSession, Client, RuntimeClient } from "@protobase/client";
 //#region src/app/app.d.ts
 export type AppProps = {
@@ -22,6 +23,8 @@ export type AppProps = {
   assistant?: AssistantClient;
   /** A ready-made client of the runtime endpoint, for stories and tests; used only when `/meta` names one. */
   runtime?: RuntimeClient;
+  /** How the plugins `/meta` names are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
+  pluginLoader?: PluginLoader;
 };
 /** The admin: sign-in first, then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent. */
 export declare const App: ({ auth, workspace, ...rest }: AppProps) => import("react").JSX.Element;

package/dist/app/app.js

@@ -18,6 +18,7 @@ import { breadcrumbFor } from "./breadcrumb-for.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
 import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { MembersPage } from "../organizations/members-page.js";
@@ -30,7 +31,8 @@ import { useActiveRole } from "../roles/use-active-role.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
 import { ComposedPage } from "./pages/composed-page.js";
-import { ProjectUiProvider } from "./pages/project-ui-provider.js";
+import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
+import { PluginNotice } from "../plugins/plugin-notice.js";
 import { RecordPage } from "./record-page.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
@@ -104,6 +106,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const role = useActiveRole(useCallback(() => reopenIn(basePath), [basePath]));
 	const acting = actingUser(user, role.current);
 	const admin = isAdmin(acting);
+	const pluginsOff = usePluginsOff();
 	const organizations = useOrganizations(Boolean(organizationSettings));
 	const current = organizations.current;
 	const outsideOrganizations = Boolean(organizationSettings) && current !== void 0 && !current.organization;
@@ -185,26 +188,39 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			onSelect: open
 		} : void 0,
 		actions: (Actions || runtimeButton || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			Actions && /* @__PURE__ */ jsx(Actions, {}),
+			Actions && /* @__PURE__ */ jsx(CustomBoundary, {
+				name: "shell.actions",
+				fallback: null,
+				children: /* @__PURE__ */ jsx(Actions, {})
+			}),
 			runtimeButton,
 			assistantButton
 		] }),
-		rightPanel: (RightPanel || assistantPanel) && /* @__PURE__ */ jsxs(Fragment$1, { children: [RightPanel && /* @__PURE__ */ jsx(RightPanel, {}), assistantPanel] }),
+		rightPanel: (RightPanel || assistantPanel) && /* @__PURE__ */ jsxs(Fragment$1, { children: [RightPanel && /* @__PURE__ */ jsx(CustomBoundary, {
+			name: "shell.rightPanel",
+			fallback: null,
+			children: /* @__PURE__ */ jsx(RightPanel, {})
+		}), assistantPanel] }),
 		children: content
 	});
-	if (!staff) return appShell;
+	const pluginNotice = admin && pluginsOff.length > 0;
+	if (!staff && !pluginNotice) return appShell;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-0 flex-col",
-		children: [/* @__PURE__ */ jsx(StaffBanner, {
-			signIn: staff,
-			onStop: stopStaffSession
-		}), /* @__PURE__ */ jsx("div", {
-			className: "min-h-0 flex-1",
-			children: appShell
-		})]
+		children: [
+			staff && /* @__PURE__ */ jsx(StaffBanner, {
+				signIn: staff,
+				onStop: stopStaffSession
+			}),
+			pluginNotice && /* @__PURE__ */ jsx(PluginNotice, { off: pluginsOff }),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1",
+				children: appShell
+			})
+		]
 	});
 };
-const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime }) => {
+const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
 	const { session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
@@ -214,8 +230,9 @@ const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sideb
 		children: /* @__PURE__ */ jsx(Router, {
 			basePath,
 			initialUrl,
-			children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ProjectUiProvider, {
+			children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(PluginGate, {
 				ui,
+				...pluginLoader && { loader: pluginLoader },
 				children: /* @__PURE__ */ jsx(Routes, {
 					workspace,
 					sidebarMode,

package/dist/app/custom-section.js

@@ -1,7 +1,8 @@
 import { useProjectUi } from "./pages/project-ui.js";
+import { Problem } from "./pages/problem.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
 import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
-import { Problem } from "./pages/problem.js";
 import { RecordScope } from "./pages/record-scope.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema";
@@ -15,11 +16,14 @@ const CustomSection = ({ item, scope }) => {
 	const Component = components?.[item.component];
 	const body = Component ? /* @__PURE__ */ jsx(RecordScope, {
 		value: scope,
-		children: /* @__PURE__ */ jsx(Component, { ...unmarkFieldRefs(item.props ?? {}) })
+		children: /* @__PURE__ */ jsx(CustomBoundary, {
+			name: item.component,
+			children: /* @__PURE__ */ jsx(Component, { ...unmarkFieldRefs(item.props ?? {}) })
+		})
 	}) : /* @__PURE__ */ jsxs(Problem, { children: [
 		"No component is registered as ",
 		item.component,
-		". Export it from protobase.ui.tsx."
+		". Export it from protobase.ui.tsx, or load the plugin that provides it."
 	] });
 	if (item.sidebar) return item.title ? /* @__PURE__ */ jsx(SidebarCard, {
 		title: item.title,

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

@@ -1,15 +1,22 @@
 import { Badge } from "../../primitives/badge.js";
 import { humanize } from "../../live/naming.js";
+import { useProjectUi } from "../pages/project-ui.js";
 import { AppLink } from "../use-app-address.js";
 import { displayValue } from "../../live/display-value.js";
+import { shownWidget } from "../field-types/shown-widget.js";
+import { CustomBoundary } from "../pages/custom-boundary.js";
+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 { jsx, jsxs } from "react/jsx-runtime";
+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";
-/** A card per record, opening its page: the title over the subtitle, the badge beside it and small meta fields below. */
+/**
+* A card per record, opening its page: the title over the subtitle, the badge beside it and small meta fields below;
+* or, with a `card` component, what it draws of the row, the built-in content again when it is missing or throws.
+*/
 const CardsDisplay = ({ model, view, display, list }) => {
 	const { title, subtitle, badge, meta } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
@@ -18,6 +25,19 @@ const CardsDisplay = ({ model, view, display, list }) => {
 		if (!field) return "";
 		return row.labels[name] ?? displayValue(field, row.record[name], view?.fields[name]);
 	};
+	const { fields: fieldTypes, components } = useProjectUi();
+	const Card = display.card === void 0 ? void 0 : components?.[display.card];
+	const shownValue = (row, name) => {
+		const field = model.fields[name];
+		const shown = field && shownWidget(fieldTypes, field, view?.fields[name]);
+		return shown ? /* @__PURE__ */ jsx(WidgetPart, {
+			shown,
+			part: "display",
+			field,
+			value: row.record[name],
+			fallback: text(row, name)
+		}) : text(row, name);
+	};
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
@@ -31,42 +51,47 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			"aria-label": view?.names?.plural ?? humanize(model.name),
 			children: list.rows.map((row) => {
 				const status = badge === void 0 ? void 0 : row.record[badge];
-				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				const builtIn = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-start justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate font-medium",
+							children: shownValue(row, title)
+						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(Badge, {
+							tone: toneFor(String(status)),
+							children: text(row, badge)
+						})]
+					}),
+					subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "truncate text-muted-foreground",
+						children: shownValue(row, subtitle)
+					}),
+					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
+						className: "mt-auto flex flex-wrap gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
+						children: meta.map((name) => /* @__PURE__ */ jsxs("div", {
+							className: "flex gap-1",
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: "sr-only",
+								children: label(name)
+							}), /* @__PURE__ */ jsx("dd", {
+								className: "tabular-nums",
+								children: shownValue(row, name)
+							})]
+						}, name))
+					})
+				] });
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppLink, {
 					to: {
 						kind: "record",
 						resource: model.name,
 						key: row.key
 					},
 					className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 text-[13px] hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
-					children: [
-						/* @__PURE__ */ jsxs("span", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "min-w-0 truncate font-medium",
-								children: text(row, title)
-							}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(Badge, {
-								tone: toneFor(String(status)),
-								children: text(row, badge)
-							})]
-						}),
-						subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
-							className: "truncate text-muted-foreground",
-							children: text(row, subtitle)
-						}),
-						meta.length > 0 && /* @__PURE__ */ jsx("dl", {
-							className: "mt-auto flex flex-wrap gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
-							children: meta.map((name) => /* @__PURE__ */ jsxs("div", {
-								className: "flex gap-1",
-								children: [/* @__PURE__ */ jsx("dt", {
-									className: "sr-only",
-									children: label(name)
-								}), /* @__PURE__ */ jsx("dd", {
-									className: "tabular-nums",
-									children: text(row, name)
-								})]
-							}, name))
-						})
-					]
+					children: Card ? /* @__PURE__ */ jsx(CustomBoundary, {
+						name: display.card,
+						fallback: builtIn,
+						children: /* @__PURE__ */ jsx(Card, { row })
+					}) : builtIn
 				}) }, row.key);
 			})
 		}), /* @__PURE__ */ jsx(DisplayFooter, { list })]

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

@@ -1,5 +1,6 @@
 import { useProjectUi } from "../pages/project-ui.js";
 import { Problem } from "../pages/problem.js";
+import { CustomBoundary } from "../pages/custom-boundary.js";
 import { ListDisplayProvider } from "./display-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema";
@@ -14,13 +15,16 @@ const CustomDisplay = ({ display, list }) => {
 	if (!Component) return /* @__PURE__ */ jsxs(Problem, { children: [
 		"No component is registered as ",
 		display.component,
-		". Export it from protobase.ui.tsx."
+		". Export it from protobase.ui.tsx, or load the plugin that provides it."
 	] });
 	return /* @__PURE__ */ jsx(ListDisplayProvider, {
 		value: list,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "min-h-0 flex-1 overflow-y-auto",
-			children: /* @__PURE__ */ jsx(Component, { ...unmarkFieldRefs(display.props ?? {}) })
+			children: /* @__PURE__ */ jsx(CustomBoundary, {
+				name: display.component,
+				children: /* @__PURE__ */ jsx(Component, { ...unmarkFieldRefs(display.props ?? {}) })
+			})
 		})
 	});
 };

package/dist/app/displays/list-displays.d.ts

@@ -8,4 +8,8 @@ export type ListDisplayRow = {
   /** The name of the record a relation field points at, for the relations the list shows. */
   labels: Record<string, string>;
 };
+/** What a card component of a cards display (`d.cards(..., { card })`) gets: the record it draws, of the display's fields. */
+export type RecordCardProps = {
+  row: ListDisplayRow;
+};
 //#endregion

package/dist/app/field-editor.js

@@ -4,9 +4,11 @@ import { Switch } from "../primitives/switch.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
 import { displayValue } from "../live/display-value.js";
-import { isEditable } from "../live/field-values.js";
+import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { SensitiveField } from "./sensitive-field.js";
 import { FileField } from "./file-field.js";
+import { useShownWidget } from "./field-types/shown-widget.js";
+import { WidgetPart } from "./field-types/widget-part.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
@@ -15,7 +17,7 @@ const numeric = /* @__PURE__ */ new Set([
 	"bigint",
 	"decimal"
 ]);
-const FieldEditor = ({ field, hints, value, stored, relationLabel, relationTo, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
+const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
 	if (field.type === "file") return /* @__PURE__ */ jsx(FileField, {
 		field,
 		hints,
@@ -94,5 +96,32 @@ const FieldEditor = ({ field, hints, value, stored, relationLabel, relationTo, r
 		onChange: (event) => onChange(event.target.value)
 	});
 };
+/**
+* A field on a form: its field type's editor when the view chooses one that has an editor and the field may change,
+* its display when it may not, and the built-in input or value otherwise, and when the field type throws.
+*/
+const FieldEditor = (props) => {
+	const { field, hints, value, stored, invalid, locked, onChange } = props;
+	const shown = useShownWidget(field, hints);
+	const builtIn = /* @__PURE__ */ jsx(BuiltInEditor, { ...props });
+	if (!shown) return builtIn;
+	if (locked || !isEditable(field)) return /* @__PURE__ */ jsx(WidgetPart, {
+		shown,
+		part: "display",
+		field,
+		value: stored,
+		fallback: builtIn
+	});
+	if (field.type === "file" || field.type === "relation") return builtIn;
+	return /* @__PURE__ */ jsx(WidgetPart, {
+		shown,
+		part: "editor",
+		field,
+		value: fromDraft(field, value),
+		invalid: Boolean(invalid),
+		onChange: (next) => onChange(toFieldDraft(field, next)),
+		fallback: builtIn
+	});
+};
 //#endregion
 export { FieldEditor };

package/dist/app/field-types/field-type-cells.js

@@ -0,0 +1,26 @@
+import { shownWidget } from "./shown-widget.js";
+import { WidgetPart } from "./widget-part.js";
+import { renderCell } from "../../data-grid/cells.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/field-types/field-type-cells.tsx
+/**
+* The list's columns, where the view shows a field with a field type drawn by the field type's cell (else its
+* display), with the built-in cell as its fallback.
+*/
+const withFieldTypeCells = (columns, model, view, fieldTypes) => columns.map((spec) => {
+	const field = model.fields[spec.id];
+	const shown = field && shownWidget(fieldTypes, field, view?.fields[spec.id]);
+	if (!shown) return spec;
+	return {
+		...spec,
+		render: (row) => /* @__PURE__ */ jsx(WidgetPart, {
+			shown,
+			part: "cell",
+			field,
+			value: row[spec.id],
+			fallback: renderCell(spec, spec.value ? spec.value(row) : row[spec.id])
+		})
+	};
+});
+//#endregion
+export { withFieldTypeCells };

package/dist/app/field-types/field-widget.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType } from "react";
+import { FieldModel, FieldType, JsonValue } from "@protobase/schema";
+//#region src/app/field-types/field-widget.d.ts
+/** What a field type's display and cell get: the field, its value as the API gives it (null when empty) and the view's props. */
+export type FieldWidgetProps<V = unknown, P = Record<string, JsonValue>> = {
+  field: FieldModel;
+  value: V | null;
+  /** What the view gives in `.widget(name, props)`; `{}` without props. */
+  props: P;
+};
+/** What a field type's editor gets besides: a way to set the value, and whether the value it holds is refused. */
+export type FieldWidgetEditorProps<V = unknown, P = Record<string, JsonValue>> = FieldWidgetProps<V, P> & {
+  onChange: (value: V | null) => void;
+  invalid: boolean;
+};
+/**
+ * A field type a plugin registers in `definePlugin({ fields: { rating: ... } })`, which a view chooses for a field with
+ * `r.score.widget('rating', props)`: the storage types it shows (`of`), how it shows a value on record pages, cards and
+ * page blocks (`display`), how it edits one on forms (`editor`; else the built-in input) and in a table (`cell`; else
+ * `display`). On a field of another storage type, and when it throws, the field shows as it would without it.
+ */
+export type FieldWidget = {
+  of: FieldType[];
+  display: ComponentType<FieldWidgetProps<any, any>>;
+  editor?: ComponentType<FieldWidgetEditorProps<any, any>>;
+  cell?: ComponentType<FieldWidgetProps<any, any>>;
+};
+//#endregion

package/dist/app/field-types/shown-widget.js

@@ -0,0 +1,21 @@
+import { useProjectUi } from "../pages/project-ui.js";
+//#region src/app/field-types/shown-widget.ts
+/**
+* The field type the view's `hints` choose for `field`, when one of `fields` has that name and shows the field's
+* storage type; otherwise undefined, and the field shows as it would without one. A sensitive field never comes with
+* its value, so it keeps its own.
+*/
+const shownWidget = (fields, field, hints) => {
+	const chosen = hints?.widget;
+	if (!chosen || field.sensitive || !fields || !Object.hasOwn(fields, chosen.name)) return void 0;
+	const widget = fields[chosen.name];
+	return widget.of.includes(field.type) ? {
+		name: chosen.name,
+		widget,
+		props: chosen.props ?? {}
+	} : void 0;
+};
+/** `shownWidget` with the field types of the project's UI and its plugins. */
+const useShownWidget = (field, hints) => shownWidget(useProjectUi().fields, field, hints);
+//#endregion
+export { shownWidget, useShownWidget };

package/dist/app/field-types/widget-part.js

@@ -0,0 +1,33 @@
+import { CustomBoundary } from "../pages/custom-boundary.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/field-types/widget-part.tsx
+const partOf = ({ shown, part, field, value, onChange, invalid = false }) => {
+	const { widget, props } = shown;
+	const shared = {
+		field,
+		value: value ?? null,
+		props
+	};
+	if (part !== "editor") {
+		const Show = part === "cell" ? widget.cell ?? widget.display : widget.display;
+		return /* @__PURE__ */ jsx(Show, { ...shared });
+	}
+	const Editor = widget.editor;
+	return Editor && onChange ? /* @__PURE__ */ jsx(Editor, {
+		...shared,
+		onChange,
+		invalid
+	}) : void 0;
+};
+/** One part of a field type for a field, inside a boundary that draws the built-in rendering instead when it throws. */
+const WidgetPart = ({ fallback, ...rest }) => {
+	const element = partOf(rest);
+	if (!element) return fallback;
+	return /* @__PURE__ */ jsx(CustomBoundary, {
+		name: `The field type ${rest.shown.name}`,
+		fallback,
+		children: element
+	});
+};
+//#endregion
+export { WidgetPart };

package/dist/app/list-page.js

@@ -4,6 +4,7 @@ import { useAuth } from "../auth/auth-provider.js";
 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 { parseSort, sortToOrderBy } from "./list-order.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
@@ -29,6 +30,7 @@ import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
+import { withFieldTypeCells } from "./field-types/field-type-cells.js";
 import { useMemo, useState } from "react";
 import { Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -58,7 +60,12 @@ const LoadedList = ({ model, address }) => {
 	const resource = model.name;
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
-	const columns = useMemo(() => columnsFromModel(model, view), [model, view]);
+	const { fields: fieldTypes } = useProjectUi();
+	const columns = useMemo(() => withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), [
+		model,
+		view,
+		fieldTypes
+	]);
 	const filterText = address.filter;
 	const parsed = useMemo(() => textToState(fields, filterText), [fields, filterText]);
 	const state = parsed.ok ? parsed.state : emptyFilterState;

package/dist/app/pages/custom-boundary.js

@@ -0,0 +1,17 @@
+import { Problem } from "./problem.js";
+import { Component } from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/app/pages/custom-boundary.tsx
+/** Draws a warning in place of a project's or plugin's component that throws, so one component cannot blank the app. */
+var CustomBoundary = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	render() {
+		if (!this.state.failed) return this.props.children;
+		return this.props.fallback === void 0 ? /* @__PURE__ */ jsxs(Problem, { children: [this.props.name, " could not be drawn."] }) : this.props.fallback;
+	}
+};
+//#endregion
+export { CustomBoundary };

package/dist/app/pages/field-value.js

@@ -6,6 +6,8 @@ import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { fileShown } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
+import { useShownWidget } from "../field-types/shown-widget.js";
+import { WidgetPart } from "../field-types/widget-part.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { fetchLabels } from "../../live/relation-labels.js";
 import { jsx } from "react/jsx-runtime";
@@ -33,8 +35,7 @@ const RelationValue = ({ field, value, known }) => {
 		children: known ?? label.data ?? id
 	});
 };
-/** A stored value as the record page shows it: the view's hints, badges for statuses, names for relations (`relationLabel` when already known). */
-const FieldValue = ({ model, field, value, format, relationLabel }) => {
+const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 	const { views } = useAdminMeta();
 	const hints = {
 		...views[model.name]?.fields[field.name],
@@ -67,5 +68,21 @@ const FieldValue = ({ model, field, value, format, relationLabel }) => {
 		children: text
 	});
 };
+/**
+* A stored value as the record page shows it: the display of the field type the view chooses, else the view's hints,
+* badges for statuses, names for relations (`relationLabel` when already known).
+*/
+const FieldValue = (props) => {
+	const { views } = useAdminMeta();
+	const shown = useShownWidget(props.field, views[props.model.name]?.fields[props.field.name]);
+	const builtIn = /* @__PURE__ */ jsx(BuiltInValue, { ...props });
+	return shown ? /* @__PURE__ */ jsx(WidgetPart, {
+		shown,
+		part: "display",
+		field: props.field,
+		value: props.value,
+		fallback: builtIn
+	}) : builtIn;
+};
 //#endregion
 export { FieldValue };

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

@@ -1,9 +1,9 @@
 import { ProjectUi } from "./project-ui.js";
 //#region src/app/pages/merge-ui.d.ts
 /**
- * One UI config from several, each after the ones it `extends`, the last being the app's own: components and action
- * handlers are all kept, and one name defined by two configs is an error naming both; every shell slot is drawn,
- * the extended configs' first.
+ * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
+ * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
+ * is drawn, the extended configs' first.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
 //#endregion

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

@@ -1,6 +1,10 @@
 import { uiFromModule } from "./ui-from-module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/merge-ui.tsx
+/** Two UI configs define one component or action handler differently. */
+var UiConflictError = class extends Error {
+	name = "UiConflictError";
+};
 const configOf = (parent) => Object.keys(parent).some((key) => key === "default" || /^[A-Z]/.test(key)) ? uiFromModule(parent) : parent;
 const flatten = (ui, label) => [...(ui.extends ?? []).map(configOf).flatMap((parent, index) => flatten(parent, parent.name ?? `${label} extends[${index}]`)), {
 	ui,
@@ -10,7 +14,7 @@ const union = (kind, named, pick) => {
 	const merged = {};
 	const owners = /* @__PURE__ */ new Map();
 	for (const { ui, label } of named) for (const [name, value] of Object.entries(pick(ui) ?? {})) {
-		if (Object.hasOwn(merged, name) && merged[name] !== value) throw new Error(`${kind} "${name}" is defined twice, by ${owners.get(name)} and by ${label}; rename one of them`);
+		if (Object.hasOwn(merged, name) && merged[name] !== value) throw new UiConflictError(`${kind} "${name}" is defined twice, by ${owners.get(name)} and by ${label}; rename one of them`);
 		merged[name] = value;
 		owners.set(name, owners.get(name) ?? label);
 	}
@@ -22,14 +26,15 @@ const slot = (slots) => {
 	return All;
 };
 /**
-* One UI config from several, each after the ones it `extends`, the last being the app's own: components and action
-* handlers are all kept, and one name defined by two configs is an error naming both; every shell slot is drawn,
-* the extended configs' first.
+* One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
+* handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
+* is drawn, the extended configs' first.
 */
 const mergeUi = (...uis) => {
 	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
 	const components = union("The component", named, (ui) => ui.components);
 	const actions = union("The action handler", named, (ui) => ui.actions);
+	const fields = union("The field type", named, (ui) => ui.fields);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
 	const name = uis.at(-1)?.name;
@@ -37,6 +42,7 @@ const mergeUi = (...uis) => {
 		...name && { name },
 		components,
 		actions,
+		...Object.keys(fields).length > 0 && { fields },
 		...(actionSlot || rightPanel) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel }
@@ -44,4 +50,4 @@ const mergeUi = (...uis) => {
 	};
 };
 //#endregion
-export { mergeUi };
+export { UiConflictError, mergeUi };