@protobase/schema 0.9.0 → 0.11.0

package/dist/model.d.ts

@@ -71,6 +71,10 @@ export type EventModel = {
   match?: true;
 };
 export type SortSpec = Array<[field: string, direction: 'asc' | 'desc']>;
+/** A value that survives `JSON.stringify` unchanged, as a custom component's props in a view must be. */
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+  [key: string]: JsonValue;
+};
 export type KeyValue = string | number;
 export type ListQuery = {
   filter?: CheckedFilter;
@@ -80,6 +84,29 @@ export type ListQuery = {
   direction?: 'after' | 'before';
   limit: number;
 };
+export type FilterLayout = 'bar' | 'panel';
+/**
+ * A place in the app: a resource's list, one of its records, its create form, or a composed page. A record's `key` is
+ * its one value or its parts, as the record API takes them; `readAppPath` gives it back as the API's text form.
+ */
+export type AppAddress = {
+  kind: 'list';
+  resource: string;
+  filter?: string;
+  orderBy?: string;
+  display?: string;
+  filterLayout?: FilterLayout;
+} | {
+  kind: 'record';
+  resource: string;
+  key: KeyValue | readonly KeyValue[];
+} | {
+  kind: 'create';
+  resource: string;
+} | {
+  kind: 'page';
+  page: string;
+};
 export type FieldFormat = 'relative' | 'absolute' | 'compact' | 'percent' | 'badge' | 'code';
 export type FieldViewModel = {
   label?: string;
@@ -90,11 +117,37 @@ export type FieldViewModel = {
   /** What an enum value reads as wherever it is shown; a value without one reads as itself in words (`enumLabel`). */
   valueLabels?: Record<string, string>;
 };
+/**
+ * A way to show a list besides its table: a card per record, or a project component (`custom`) drawing the rows the
+ * list page loads. `name` is what the address names (`?display=cards`); `label` and `icon` are its switch's.
+ */
+export type ListDisplayModel = {
+  kind: 'cards';
+  name: string;
+  label?: string;
+  icon?: string;
+  title?: string;
+  subtitle?: string;
+  badge?: string;
+  meta?: string[];
+} | {
+  kind: 'custom';
+  name: string;
+  label: string;
+  icon?: string;
+  component: string;
+  fields: string[];
+  props?: Record<string, JsonValue>;
+};
 export type ListModel = {
   columns: string[];
   sort?: SortSpec;
   /** Defaults for the UI's search box. `ResourceModel.search` is authoritative for what `search(...)` matches on the server. */
   search?: string[];
+  /** Other ways to show the list besides its table, in the order the switch shows them after it. */
+  displays?: ListDisplayModel[];
+  /** The display the list opens in when the address names none; the table when omitted. */
+  default?: string;
 };
 export type DatePreset = 'today' | 'yesterday' | '7d' | '30d' | '90d' | 'month' | 'quarter' | 'year';
 export type FilterWidgetModel = {
@@ -136,6 +189,17 @@ export type RelatedModel = {
   pageSize?: number;
   empty?: string;
 };
+/**
+ * A project component drawn on the record page where it is listed, in the main column or with `sidebar` in the
+ * sidebar, under `title` when it has one. It gets `props` and reads the record with `useLayoutRecord()`.
+ */
+export type CustomSectionModel = {
+  kind: 'custom';
+  component: string;
+  title?: string;
+  props?: Record<string, JsonValue>;
+  sidebar?: true;
+};
 export type LayoutItemModel = {
   kind: 'section';
   title: string;
@@ -144,7 +208,7 @@ export type LayoutItemModel = {
 } | {
   kind: 'sidebar';
   fields: string[];
-} | RelatedModel;
+} | RelatedModel | CustomSectionModel;
 export type ChartRange = '7d' | '30d' | '90d' | '1y' | 'all';
 export type ChartGranularity = 'hour' | 'day' | 'week' | 'month';
 export type ChartModel = {
@@ -154,14 +218,18 @@ export type ChartModel = {
 };
 export type SaveFeedback = 'toast' | 'button';
 /**
- * What a named action does in the app: set fields of the record (`update`), delete it (`delete`) or open a link
- * (`link`, with `{field}` replaced by the record's values). Without it the app runs a handler it registered by name.
+ * What a named action does in the app: set fields of the record (`update`), delete it (`delete`), go to an address in
+ * the app (`link` with `to`) or open a link that leaves it (`link` with `href`), `{field}` replaced by the record's
+ * values. Without it the app runs a handler it registered by name.
  */
 export type ActionRun = {
   kind: 'update';
   values: Record<string, unknown>;
 } | {
   kind: 'delete';
+} | {
+  kind: 'link';
+  to: AppAddress;
 } | {
   kind: 'link';
   href: string;
@@ -218,6 +286,29 @@ export type UserMenuItemModel = {
 export type UserMenuModel = {
   items: UserMenuItemModel[];
 };
+/** A tab of a bottom bar on phones: icon above an explicit label. */
+export type BottomBarItemModel = {
+  kind: 'resource';
+  resource: string;
+  label: string;
+  icon?: string;
+} | {
+  kind: 'page';
+  page: string;
+  label: string;
+  icon?: string;
+} | {
+  kind: 'link';
+  label: string;
+  href: string;
+  icon?: string;
+};
+/** A bottom bar for the users holding one of `roles`; `label` names it in the role view switcher. */
+export type BottomBarModel = {
+  label: string;
+  roles: string[];
+  items: BottomBarItemModel[];
+};
 /**
  * The title replaces `title` in search results; `subtitle` is the second line unless the search matched another search
  * field, which then shows instead. Without a subtitle, the first search field not in the title is the default.

package/dist/ref-shape.d.ts

@@ -0,0 +1,80 @@
+//#region src/ref-shape.d.ts
+/**
+ * Where a part of a model names fields, and what a field the caller cannot read does to it. A shape declares every part
+ * of the model it walks: a part it does not declare is left out, so a new part cannot reach a caller unchecked.
+ */
+export type RefShape =
+/** Plain data that names no field: kept as it is. */
+{
+  kind: 'data';
+} |
+/** A field's name: left out when hidden. */
+{
+  kind: 'field';
+} |
+/** Free-form data, such as a custom component's props, with field references (`{ $field }`) anywhere: left out when one is hidden. */
+{
+  kind: 'refs';
+} |
+/** An object keyed by field names, such as field hints: hidden keys are left out, or with `all` the whole object. */
+{
+  kind: 'keys';
+  all: boolean;
+} |
+/** A list: entries left out are dropped, and with `nonEmpty` a list left empty is left out too. */
+{
+  kind: 'list';
+  of: RefShape;
+  nonEmpty: boolean;
+} |
+/** A fixed list, such as `[field, direction]`: left out when any entry is. */
+{
+  kind: 'tuple';
+  items: RefShape[];
+} |
+/** An object: a part left out is dropped, a `requires` part left out leaves out the object; `after` tidies the result. */
+{
+  kind: 'object';
+  props: Record<string, RefShape>;
+  requires: string[];
+  after?: (value: never) => unknown;
+} |
+/** One shape per value of `kind`, as layout items and displays are told apart; an unknown kind is left out. */
+{
+  kind: 'oneOf';
+  cases: Record<string, RefShape>;
+} |
+/** A part pruned by code, such as one naming another resource's fields: `prune` returns it narrowed, or `undefined`. */
+{
+  kind: 'map';
+  prune: (value: never) => unknown;
+};
+/** One shape per property of `T`, so the compiler names a property the shape forgets. */
+export type PropShapes<T> = { [K in keyof T]-?: RefShape; };
+/** The shapes, typed against the model they describe. */
+export declare const shapes: {
+  data: RefShape;
+  field: RefShape;
+  refs: RefShape;
+  keys: (o?: {
+    all?: boolean;
+  }) => RefShape;
+  list: (of: RefShape, o?: {
+    nonEmpty?: boolean;
+  }) => RefShape;
+  tuple: (...items: RefShape[]) => RefShape;
+  object: <T extends object>(props: PropShapes<T>, o?: {
+    requires?: Array<keyof T & string>;
+    after?: (value: T) => T;
+  }) => RefShape;
+  oneOf: <T extends {
+    kind: string;
+  }>(cases: { [K in T["kind"]]: RefShape; }) => RefShape;
+  map: <T>(prune: (value: T) => T | undefined) => RefShape;
+};
+/**
+ * `value` with every part naming a field `visible` refuses left out, as `shape` says, or `undefined` when the whole
+ * value goes. One walker for every model the app sends: views, custom component props and composed pages' custom nodes.
+ */
+export declare const pruneByShape: <T>(value: T, shape: RefShape, visible: (name: string) => boolean) => T | undefined;
+//#endregion

package/dist/ref-shape.js

@@ -0,0 +1,88 @@
+import { fieldRefsIn } from "./field-ref.js";
+//#region src/ref-shape.ts
+/** The shapes, typed against the model they describe. */
+const shapes = {
+	data: { kind: "data" },
+	field: { kind: "field" },
+	refs: { kind: "refs" },
+	keys: (o = {}) => ({
+		kind: "keys",
+		all: o.all ?? false
+	}),
+	list: (of, o = {}) => ({
+		kind: "list",
+		of,
+		nonEmpty: o.nonEmpty ?? false
+	}),
+	tuple: (...items) => ({
+		kind: "tuple",
+		items
+	}),
+	object: (props, o = {}) => ({
+		kind: "object",
+		props,
+		requires: o.requires ?? [],
+		...o.after && { after: o.after }
+	}),
+	oneOf: (cases) => ({
+		kind: "oneOf",
+		cases
+	}),
+	map: (prune) => ({
+		kind: "map",
+		prune
+	})
+};
+const gone = Symbol("gone");
+const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const walk = (value, shape, visible) => {
+	switch (shape.kind) {
+		case "data": return value;
+		case "field": return typeof value === "string" && visible(value) ? value : gone;
+		case "refs": return fieldRefsIn(value).every(visible) ? value : gone;
+		case "keys": {
+			if (!isObject(value)) return gone;
+			const entries = Object.entries(value);
+			const kept = entries.filter(([name]) => visible(name));
+			return shape.all && kept.length < entries.length ? gone : Object.fromEntries(kept);
+		}
+		case "list": {
+			if (!Array.isArray(value)) return gone;
+			const kept = value.map((entry) => walk(entry, shape.of, visible)).filter((entry) => entry !== gone);
+			return shape.nonEmpty && kept.length === 0 ? gone : kept;
+		}
+		case "tuple": {
+			if (!Array.isArray(value) || value.length !== shape.items.length) return gone;
+			const items = value.map((entry, index) => walk(entry, shape.items[index], visible));
+			return items.includes(gone) ? gone : items;
+		}
+		case "object": {
+			if (!isObject(value)) return gone;
+			const kept = {};
+			for (const [name, entry] of Object.entries(value)) {
+				const part = Object.hasOwn(shape.props, name) ? shape.props[name] : void 0;
+				if (!part || entry === void 0) continue;
+				const pruned = walk(entry, part, visible);
+				if (pruned === gone && shape.requires.includes(name)) return gone;
+				if (pruned !== gone) kept[name] = pruned;
+			}
+			return shape.after ? shape.after(kept) : kept;
+		}
+		case "oneOf": {
+			const kind = isObject(value) && typeof value.kind === "string" ? value.kind : void 0;
+			const shaped = kind !== void 0 && Object.hasOwn(shape.cases, kind) ? shape.cases[kind] : void 0;
+			return shaped ? walk(value, shaped, visible) : gone;
+		}
+		case "map": return shape.prune(value) ?? gone;
+	}
+};
+/**
+* `value` with every part naming a field `visible` refuses left out, as `shape` says, or `undefined` when the whole
+* value goes. One walker for every model the app sends: views, custom component props and composed pages' custom nodes.
+*/
+const pruneByShape = (value, shape, visible) => {
+	const pruned = walk(value, shape, visible);
+	return pruned === gone ? void 0 : pruned;
+};
+//#endregion
+export { pruneByShape, shapes };

package/dist/refs.js

@@ -1,8 +1,12 @@
 //#region src/refs.ts
+const refMark = Symbol("protobase.ref");
+/** A field reference as a view builder hands it out (`r.status`), recognisable wherever it is passed, props included. */
+const ref = (name) => Object.defineProperty({ name }, refMark, { value: true });
+const isRef = (value) => typeof value === "object" && value !== null && value[refMark] === true;
 const createRefs = (make, known) => new Proxy({}, { get: (_, name) => {
 	if (typeof name === "symbol") return void 0;
 	if (known && !known.includes(name)) throw new Error(`Unknown field "${name}"`);
 	return make(name);
 } });
 //#endregion
-export { createRefs };
+export { createRefs, isRef, ref };

package/dist/user-menu.js

@@ -1,3 +1,4 @@
+import { isMenuHref } from "./menu-href.js";
 //#region src/user-menu.ts
 const items = {
 	/** Opens the resource's list. A resource in the user menu is left out of the sidebar. */
@@ -14,7 +15,7 @@ const items = {
 	}),
 	/** An address outside the admin, opened in a new tab: `https:`, `http:` or `mailto:`. */
 	link: (label, href, options = {}) => {
-		if (!/^(https?:\/\/|mailto:)/i.test(href)) throw new Error(`User menu link "${label}": href must start with https://, http:// or mailto:`);
+		if (!isMenuHref(href)) throw new Error(`User menu link "${label}": href must start with https://, http:// or mailto:`);
 		return {
 			kind: "link",
 			label,

package/dist/view-actions.d.ts

@@ -1,4 +1,4 @@
-import { ActionModel } from "./model.js";
+import { ActionModel, AppAddress } from "./model.js";
 //#region src/view-actions.d.ts
 type ActionOptions = {
   label: string;
@@ -16,9 +16,15 @@ export declare const actions: {
   }) => ActionModel;
   /** Deletes the record (soft delete when the resource has one). */
   remove: (name: string, o: ActionOptions) => ActionModel;
-  /** Opens `href`: a path in the app or a URL; `{field}` is replaced by the record's value, such as `/orders/{orderId}`. */
-  link: (name: string, o: Omit<ActionOptions, "confirm"> & {
+  /**
+   * Goes `to` an address in the app, such as `{ kind: 'record', resource: 'orders', key: '{order_id}' }`, or opens an
+   * `href` that leaves it (`https:`, `mailto:`); `{field}` is replaced by the record's value. A path in the app is
+   * refused as an `href`, so every address in the app is written one way.
+   */
+  link: (name: string, o: Omit<ActionOptions, "confirm"> & ({
+    to: AppAddress;
+  } | {
     href: string;
-  }) => ActionModel;
+  })) => ActionModel;
 };
 //#endregion

package/dist/view-actions.js

@@ -1,3 +1,4 @@
+import { appHrefError } from "./address-template.js";
 //#region src/view-actions.ts
 const named = (name, o) => ({
 	name,
@@ -22,14 +23,29 @@ const actions = {
 		...named(name, o),
 		run: { kind: "delete" }
 	}),
-	/** Opens `href`: a path in the app or a URL; `{field}` is replaced by the record's value, such as `/orders/{orderId}`. */
-	link: (name, o) => ({
-		...named(name, o),
-		run: {
-			kind: "link",
-			href: o.href
-		}
-	})
+	/**
+	* Goes `to` an address in the app, such as `{ kind: 'record', resource: 'orders', key: '{order_id}' }`, or opens an
+	* `href` that leaves it (`https:`, `mailto:`); `{field}` is replaced by the record's value. A path in the app is
+	* refused as an `href`, so every address in the app is written one way.
+	*/
+	link: (name, o) => {
+		if ("to" in o) return {
+			...named(name, o),
+			run: {
+				kind: "link",
+				to: structuredClone(o.to)
+			}
+		};
+		const error = appHrefError(o.href);
+		if (error) throw new Error(`Action "${name}": ${error}`);
+		return {
+			...named(name, o),
+			run: {
+				kind: "link",
+				href: o.href
+			}
+		};
+	}
 };
 //#endregion
 export { actions };

package/dist/view-displays.d.ts

@@ -0,0 +1,42 @@
+import { ListDisplayModel } from "./model.js";
+import { Ref } from "./refs.js";
+//#region src/view-displays.d.ts
+/** A custom component as `component(name)` from `@protobase/layout` declares it. */
+export type ComponentRef<P> = ((props: P) => unknown) & {
+  readonly blockName: string;
+  readonly custom: boolean;
+};
+/** A custom component's props as a view gives them: plain data, or `r.field` where it takes a field's name. */
+export type ViewProps<P> = { [K in keyof Omit<P, 'children'>]: P[K] extends string ? P[K] | Ref : P[K]; };
+type Naming = {
+  name?: string;
+  label?: string;
+  icon?: string;
+};
+/** The name of the list's own display, which every list has. */
+export declare const tableDisplay = "table";
+export declare const displays: {
+  /**
+   * A card per record: `title` (default: the view's title) over `subtitle`, `badge` drawn as a badge with its value
+   * labels, and a few small `meta` fields such as dates. Named `cards` unless `name` says otherwise.
+   */
+  cards: (fields: {
+    title?: Ref;
+    subtitle?: Ref;
+    badge?: Ref;
+    meta?: Ref[];
+  }, o?: Naming) => ListDisplayModel;
+  /**
+   * The list drawn by a component of the project, registered in `protobase.ui.tsx` under its name. It gets `props` and
+   * reads the rows with `useListDisplay()`; `fields` are the fields it shows, fetched with relation names.
+   */
+  custom: <P extends object>(component: ComponentRef<P>, o: Naming & {
+    name: string;
+    label: string;
+    fields: Ref[];
+    props?: ViewProps<P>;
+  }) => ListDisplayModel;
+};
+/** Every field a display names: what it shows, and the field references in a custom display's props. */
+export declare const displayFields: (display: ListDisplayModel) => string[];
+//#endregion

package/dist/view-displays.js

@@ -0,0 +1,61 @@
+import { fieldRefsIn, markFieldRefs } from "./field-ref.js";
+//#region src/view-displays.ts
+const naming = ({ label, icon }) => ({
+	...label !== void 0 && { label },
+	...icon !== void 0 && { icon }
+});
+/** The name of the list's own display, which every list has. */
+const tableDisplay = "table";
+/** The component of a custom display or section, which must be a project's, not a built-in block. */
+const customComponent = (component, where) => {
+	if (!component.custom) throw new Error(`${where} takes a component declared with component(...), not the built-in block ${component.blockName}`);
+	return component.blockName;
+};
+const displays = {
+	/**
+	* A card per record: `title` (default: the view's title) over `subtitle`, `badge` drawn as a badge with its value
+	* labels, and a few small `meta` fields such as dates. Named `cards` unless `name` says otherwise.
+	*/
+	cards: (fields, o = {}) => ({
+		kind: "cards",
+		name: o.name ?? "cards",
+		...naming(o),
+		...fields.title && { title: fields.title.name },
+		...fields.subtitle && { subtitle: fields.subtitle.name },
+		...fields.badge && { badge: fields.badge.name },
+		...fields.meta && { meta: fields.meta.map((ref) => ref.name) }
+	}),
+	/**
+	* The list drawn by a component of the project, registered in `protobase.ui.tsx` under its name. It gets `props` and
+	* reads the rows with `useListDisplay()`; `fields` are the fields it shows, fetched with relation names.
+	*/
+	custom: (component, o) => ({
+		kind: "custom",
+		name: o.name,
+		label: o.label,
+		...naming({ icon: o.icon }),
+		component: customComponent(component, "d.custom"),
+		fields: o.fields.map((ref) => ref.name),
+		...o.props && { props: markFieldRefs(o.props) }
+	})
+};
+const displayName = /^[a-z][a-zA-Z0-9-]*$/;
+/** What is wrong with a list's displays and default, by their names alone. */
+const displayErrors = (list) => {
+	const names = (list.displays ?? []).map((display) => display.name);
+	return [
+		...names.filter((name) => !displayName.test(name)).map((name) => `display name "${name}" must start with a lowercase letter and hold only letters, digits and dashes`),
+		...names.filter((name) => name === tableDisplay).map(() => `"${tableDisplay}" is the list's own display; give the display another name`),
+		...names.filter((name, index) => names.indexOf(name) !== index).map((name) => `display "${name}" is defined twice`),
+		...list.default === void 0 || list.default === "table" || names.includes(list.default) ? [] : [`default "${list.default}" is not one of the displays (${[tableDisplay, ...names].join(", ")})`]
+	];
+};
+/** Every field a display names: what it shows, and the field references in a custom display's props. */
+const displayFields = (display) => display.kind === "cards" ? [
+	display.title,
+	display.subtitle,
+	display.badge,
+	...display.meta ?? []
+].filter((name) => name !== void 0) : [...display.fields, ...fieldRefsIn(display.props)];
+//#endregion
+export { customComponent, displayErrors, displayFields, displays, tableDisplay };

package/dist/view.d.ts

@@ -1,6 +1,7 @@
-import { ActionModel, ChartGranularity, ChartRange, FilterWidgetModel, LayoutItemModel, NavModel, NavRecentModel, ResourceModel, SaveFeedback, ViewModel } from "./model.js";
+import { ActionModel, ChartGranularity, ChartRange, FilterWidgetModel, LayoutItemModel, ListDisplayModel, NavModel, NavRecentModel, ResourceModel, SaveFeedback, ViewModel } from "./model.js";
 import { FieldRefs, Ref } from "./refs.js";
 import { actions } from "./view-actions.js";
+import { displays } from "./view-displays.js";
 import { FieldView } from "./view-field.js";
 import { widgets } from "./view-widgets.js";
 //#region src/view.d.ts
@@ -44,10 +45,16 @@ export declare class ViewBuilder<R extends {
   nav(nav: NavInput<R>): ViewBuilder<R>;
   help(help: string): ViewBuilder<R>;
   fields(build: (r: FieldViews<R>) => Record<string, FieldView>): ViewBuilder<R>;
-  list(build: (r: FieldRefs<FieldsOf<R>>) => {
+  /**
+   * The list: its table's `columns`, `sort` and `search`, and other `displays` to switch to (`d.cards`, `d.custom`), one
+   * of which may be the `default` the list opens in. Throws when display names collide or `default` names none.
+   */
+  list(build: (r: FieldRefs<FieldsOf<R>>, d: typeof displays) => {
     columns: Ref[];
     sort?: Array<[Ref, 'asc' | 'desc']>;
     search?: Ref[];
+    displays?: ListDisplayModel[];
+    default?: string;
   }): ViewBuilder<R>;
   filters(build: (r: FieldRefs<FieldsOf<R>>, w: typeof widgets) => FilterWidgetModel[]): ViewBuilder<R>;
   layout(build: (r: FieldRefs<FieldsOf<R>>) => LayoutItemModel[]): ViewBuilder<R>;
@@ -58,7 +65,7 @@ export declare class ViewBuilder<R extends {
   }): ViewBuilder<R>;
   saveFeedback(saveFeedback: SaveFeedback): ViewBuilder<R>;
   actions(build: (a: typeof actions) => ActionModel[]): ViewBuilder<R>;
-  /** With the resource's model, also verifies the title and search result fields and the sidebar's `recent` group. */
+  /** With the resource's model, also verifies the title, search result and list display fields and the sidebar's `recent` group. */
   toModel(resource?: ResourceModel): ViewModel;
   private refs;
   private next;

package/dist/view.js

@@ -1,4 +1,5 @@
-import { createRefs } from "./refs.js";
+import { createRefs, ref } from "./refs.js";
+import { displayErrors, displayFields, displays } from "./view-displays.js";
 import { navRecentErrors } from "./nav-recent.js";
 import { actions } from "./view-actions.js";
 import { FieldView } from "./view-field.js";
@@ -50,13 +51,22 @@ var ViewBuilder = class ViewBuilder {
 			...fields
 		} });
 	}
+	/**
+	* The list: its table's `columns`, `sort` and `search`, and other `displays` to switch to (`d.cards`, `d.custom`), one
+	* of which may be the `default` the list opens in. Throws when display names collide or `default` names none.
+	*/
 	list(build) {
-		const { columns, sort, search } = build(this.refs());
-		return this.next({ list: {
+		const { columns, sort, search, displays: shown = [], default: opens } = build(this.refs(), displays);
+		const list = {
 			columns: columns.map((ref) => ref.name),
 			...sort && { sort: sort.map(([ref, dir]) => [ref.name, dir]) },
-			...search && { search: search.map((ref) => ref.name) }
-		} });
+			...search && { search: search.map((ref) => ref.name) },
+			...shown.length > 0 && { displays: shown },
+			...opens !== void 0 && { default: opens }
+		};
+		const errors = displayErrors(list);
+		if (errors.length > 0) throw new Error(`View "${this.state.resource}": ${errors.join("; ")}`);
+		return this.next({ list });
 	}
 	filters(build) {
 		return this.next({ filters: build(this.refs(), widgets) });
@@ -78,18 +88,22 @@ var ViewBuilder = class ViewBuilder {
 	actions(build) {
 		return this.next({ actions: build(actions) });
 	}
-	/** With the resource's model, also verifies the title and search result fields and the sidebar's `recent` group. */
+	/** With the resource's model, also verifies the title, search result and list display fields and the sidebar's `recent` group. */
 	toModel(resource) {
-		const { title, nav, searchResult } = this.state;
+		const { title, nav, searchResult, list } = this.state;
 		if (resource && title !== void 0 && !Object.hasOwn(resource.fields, title)) throw new Error(`View "${this.state.resource}": title field "${title}" does not exist on the resource`);
 		const missing = resource ? [...searchResult?.title ?? [], ...searchResult?.subtitle ? [searchResult.subtitle] : []].filter((name) => !Object.hasOwn(resource.fields, name)) : [];
 		if (missing.length > 0) throw new Error(`View "${this.state.resource}": search result field "${missing[0]}" does not exist on the resource`);
+		for (const display of resource ? list?.displays ?? [] : []) {
+			const unknown = displayFields(display).find((name) => !Object.hasOwn(resource.fields, name));
+			if (unknown !== void 0) throw new Error(`View "${this.state.resource}": display "${display.name}" names field "${unknown}", which the resource does not have`);
+		}
 		const recentErrors = resource && nav?.recent ? navRecentErrors(nav.recent, resource) : [];
 		if (recentErrors.length > 0) throw new Error(`View "${this.state.resource}": nav.recent ${recentErrors.join("; ")}`);
 		return structuredClone(this.state);
 	}
 	refs() {
-		return createRefs((name) => ({ name }));
+		return createRefs(ref);
 	}
 	next(patch) {
 		return new ViewBuilder({