@protobase/ui 0.11.1 → 0.12.0

package/dist/app/app.js

@@ -18,8 +18,8 @@ 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 { CreatePage } from "./create/create-page.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";
 import { InvitationsPage } from "../organizations/invitations-page.js";

package/dist/app/custom-section.js

@@ -1,8 +1,8 @@
 import { useProjectUi } from "./pages/project-ui.js";
-import { Section } from "../record-view/section.js";
-import { SidebarCard } from "../record-view/record-sidebar.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 { RecordScope } from "./pages/record-scope.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema";

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/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/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

@@ -26,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;
@@ -41,6 +42,7 @@ const mergeUi = (...uis) => {
 		...name && { name },
 		components,
 		actions,
+		...Object.keys(fields).length > 0 && { fields },
 		...(actionSlot || rightPanel) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel }

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;
@@ -39,9 +43,9 @@ 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, shell })` in a plugin's
- * `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime instead of building it in, its components
- * exported by name as in a project's.
+ * 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

@@ -3,9 +3,9 @@ import { createContext, useContext } from "react";
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 const defineUi = (ui) => ui;
 /**
-* Typed identity, for `export default definePlugin({ name, components, actions, shell })` in a plugin's
-* `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime instead of building it in, its components
-* exported by name as in a project's.
+* 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. */

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-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,3 +1,4 @@
+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";
@@ -15,7 +16,7 @@ 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";
@@ -38,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 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 };
+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/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

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

package/dist/plugins/plugin-ui.js

@@ -11,10 +11,16 @@ const within = (plugin, Component, name) => {
 	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 and shell slots draw inside the plugin. Throws `UiConflictError` when the
-* configs it merges define a name twice.
+* 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({
@@ -22,6 +28,7 @@ const pluginUi = (plugin, 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") }
@@ -30,6 +37,7 @@ const pluginUi = (plugin, module) => {
 		name: plugin.name,
 		components,
 		...ui.actions && { actions: ui.actions },
+		...fields && { fields },
 		...shell && { shell }
 	};
 };

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}