@protobase/ui 0.0.0-stage → 0.1.0

package/dist/app/pages/use-run-action.js

@@ -0,0 +1,88 @@
+import { useClient } from "../../data/api-provider.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useRouter } from "../router.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
+import { can } from "../permissions.js";
+import { fillHref, isAppPath } from "./action-href.js";
+import { useProjectUi } from "./project-ui.js";
+import { useRefreshResource } from "./use-layout-data.js";
+import { useState } from "react";
+//#region src/app/pages/use-run-action.ts
+const message = (error) => error instanceof Error ? error.message : "Something went wrong";
+/**
+* The named actions of `resource`'s view, ready to run on `scope` (the record they act on): built-in behaviour first
+* (`update`, `delete`, `link`), else the handler the project registered under the action's name. `blocked` says why one
+* cannot run; `afterRun` hears about every action that succeeded.
+*/
+const useActionRunner = (resource, scope, afterRun) => {
+	const { views } = useAdminMeta();
+	const { actions: handlers } = useProjectUi();
+	const permissions = usePermissions(resource);
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const { navigate } = useRouter();
+	const [running, setRunning] = useState();
+	const actions = views[resource]?.actions ?? [];
+	const blocked = (action) => {
+		const kind = action.run?.kind;
+		if ((kind === "update" || kind === "delete") && !scope) return "Needs a record";
+		if (kind === "update" && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
+		if (kind === "delete" && (!can(permissions, "delete") || scope?.permissions?.delete === false)) return "You cannot delete this record";
+		if (!action.run && !handlers?.[action.name]) return `The app has no handler for "${action.name}"`;
+	};
+	const perform = async (action) => {
+		const { run } = action;
+		if (run?.kind === "link") {
+			const href = fillHref(run.href, scope?.record);
+			if (isAppPath(href)) navigate(href);
+			else window.location.assign(href);
+			return;
+		}
+		if (run?.kind === "update") await client.update(resource, scope.key, run.values, scope.etag ?? "*");
+		else if (run?.kind === "delete") await client.remove(resource, scope.key, { etag: scope.etag });
+		else await handlers[action.name]({
+			resource,
+			record: scope?.record,
+			recordKey: scope?.key,
+			etag: scope?.etag,
+			client,
+			navigate
+		});
+		await refresh(resource);
+		toast.show({
+			state: "success",
+			title: `${action.label}: done`
+		});
+		afterRun?.(action);
+	};
+	const run = async (action) => {
+		if (blocked(action)) return;
+		setRunning(action.name);
+		await perform(action).catch((error) => toast.show({
+			state: "error",
+			title: `${action.label} failed`,
+			description: message(error)
+		}));
+		setRunning(void 0);
+	};
+	return {
+		actions,
+		blocked,
+		running,
+		run
+	};
+};
+/** One named action of `resource`'s view, for a button. */
+const useRunAction = (resource, name, scope) => {
+	const runner = useActionRunner(resource, scope);
+	const action = runner.actions.find((entry) => entry.name === name);
+	return {
+		action,
+		blocked: action ? runner.blocked(action) : `No action "${name}"`,
+		running: runner.running === name,
+		run: () => action ? runner.run(action) : Promise.resolve()
+	};
+};
+//#endregion
+export { useActionRunner, useRunAction };

package/dist/app/permissions.js

@@ -0,0 +1,15 @@
+//#region src/app/permissions.ts
+/**
+* Whether to offer an operation: yes when allowed outright, and also when only some records qualify
+* (`conditional`), because then the server decides per record and a 403 is reported when it says no.
+*/
+const can = (permissions, operation) => permissions[operation] || permissions.conditional.includes(operation);
+/** List rows carry `permissions: { update, delete }`; a row without them (the server was not asked) is allowed, and every write is checked again. */
+const rowAllows = (row, operation) => row.permissions?.[operation] ?? true;
+/** One field on one record: `edit`, `read`, or `hidden` (absent from a get response's `permissions.fields`). Without that map the model decides. */
+const fieldAccess = (permissions, name) => {
+	if (!permissions?.fields) return "edit";
+	return permissions.fields[name] ?? "hidden";
+};
+//#endregion
+export { can, fieldAccess, rowAllows };

package/dist/app/record-lines.js

@@ -0,0 +1,39 @@
+import { usePermissions } from "./meta-gate.js";
+import { can } from "./permissions.js";
+import { InlineChildTable } from "../inline-child-table/inline-child-table.js";
+import { Section } from "../record-view/section.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/record-lines.tsx
+/** A resource that holds numbered lines of this one: it points at the parent and has `position` and `quantity`. */
+const findLinesResource = (resources, parent) => Object.values(resources).find((candidate) => candidate.name !== parent.name && candidate.fields.position && candidate.fields.quantity && Object.values(candidate.fields).some((field) => field.type === "relation" && field.relation?.resource === parent.name));
+const toLine = (record) => ({
+	id: String(record.id),
+	productId: String(record.productId ?? ""),
+	description: String(record.description ?? ""),
+	quantity: Number(record.quantity),
+	unitPriceCents: Math.round(Number(record.unitPrice) * 100)
+});
+/** The lines of a record. Reordering only changes `draft`; the record's Save writes it, in one batch. */
+const RecordLines = ({ lines, draft, vatRate, saving }) => {
+	const canReorder = can(usePermissions(lines.name), "update");
+	return /* @__PURE__ */ jsx(Section, {
+		title: "Lines",
+		help: "What the document bills for. Drag the handle, or use the menu, to change the order; Save applies it.",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "-mx-4 overflow-x-auto px-4 [-webkit-overflow-scrolling:touch] md:mx-0 md:px-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "min-w-[560px]",
+				children: /* @__PURE__ */ jsx(InlineChildTable, {
+					lines: draft.shown.map(toLine),
+					onChange: () => void 0,
+					onReorder: (next) => draft.setOrder(next.map((line) => line.id)),
+					vatRate,
+					readOnly: true,
+					reorderable: canReorder && !saving
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { RecordLines, findLinesResource };

package/dist/app/record-page.js

@@ -0,0 +1,318 @@
+import { Badge } from "../primitives/badge.js";
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { useRecord } from "../data/use-record.js";
+import { recordTitle } from "../live/model-helpers.js";
+import { humanize } from "../live/naming.js";
+import { useNavigationGuard, useRouter } from "./router.js";
+import { formatRelativeTime } from "../format/date.js";
+import { displayValue } from "../live/display-value.js";
+import { ErrorBanner } from "./error-banner.js";
+import { FieldEditor } from "./field-editor.js";
+import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
+import { can, fieldAccess } from "./permissions.js";
+import { Field } from "../record-view/field.js";
+import { Section } from "../record-view/section.js";
+import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
+import { RecordHeader } from "../record-view/record-header.js";
+import { toneFor } from "../live/columns-from-model.js";
+import { useDeleteFlow } from "./delete/use-delete-flow.js";
+import { useRestore } from "./delete/use-restore.js";
+import { RecordActions } from "./pages/record-actions.js";
+import { RecordLines, findLinesResource } from "./record-lines.js";
+import { draftStorageKey } from "./draft-storage.js";
+import { useLines } from "./use-lines.js";
+import { useLinesDraft } from "./use-lines-draft.js";
+import { useRecordEditor } from "./use-record-editor.js";
+import { useRelatedRecords } from "./use-related-records.js";
+import { RelatedSection } from "./related-section.js";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { isApiError } from "@protobase/client";
+import { enumLabel } from "@protobase/schema";
+//#region src/app/record-page.tsx
+const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
+/**
+* The view's layout, or one section with the editable fields when the view has none. A user who may only read the
+* resource has every field read-only, so they get every field, locked, rather than an empty section.
+*/
+const layoutFor = (model, view) => {
+	if (view && view.layout.length > 0) return view.layout;
+	const shown = Object.values(model.fields).filter((field) => !hidden(model, field.name));
+	const editable = shown.filter((field) => !field.readOnly);
+	return [{
+		kind: "section",
+		title: "Details",
+		fields: (editable.length > 0 ? editable : shown).map((field) => field.name)
+	}];
+};
+const RecordPage = ({ resource, recordKey }) => {
+	const { resources } = useAdminMeta();
+	const model = resources[resource];
+	const record = useRecord(resource, recordKey);
+	if (!model) return /* @__PURE__ */ jsxs(Notice, {
+		title: "Not found",
+		children: [
+			"There is no resource called ",
+			resource,
+			"."
+		]
+	});
+	if (record.isPending) return /* @__PURE__ */ jsx(Notice, {
+		title: "Loading",
+		children: "Fetching the record."
+	});
+	if (record.error) return /* @__PURE__ */ jsx("div", {
+		className: "p-8",
+		children: isApiError(record.error) && record.error.status === 404 ? /* @__PURE__ */ jsx(Notice, {
+			title: "Not found",
+			children: "This record does not exist, or you cannot see it."
+		}) : /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load the record",
+			error: record.error
+		})
+	});
+	return /* @__PURE__ */ jsx(LoadedRecord, {
+		model,
+		recordKey,
+		stored: record.data
+	});
+};
+const LoadedRecord = ({ model, recordKey, stored }) => {
+	const meta = useAdminMeta();
+	const { basePath, navigate } = useRouter();
+	const view = meta.views[model.name];
+	const singular = view?.names?.singular ?? humanize(model.name);
+	const title = recordTitle(model, view, stored.record, recordKey);
+	const { state: auth } = useAuth();
+	const linesModel = useMemo(() => findLinesResource(meta.resources, model), [meta.resources, model]);
+	const linesData = useLines(linesModel, model, recordKey);
+	const linesDraft = useLinesDraft(linesModel, linesData.items);
+	const editor = useRecordEditor({
+		model,
+		stored,
+		recordKey,
+		mode: view?.saveFeedback ?? "toast",
+		subject: title,
+		draftKey: auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
+		lines: linesDraft
+	});
+	useNavigationGuard(editor.dirty);
+	const queryClient = useQueryClient();
+	const client = useClient();
+	const permissions = usePermissions(model.name);
+	const restore = useRestore(model);
+	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
+	const remove = useDeleteFlow({
+		model,
+		view,
+		restore,
+		onDeleted: () => navigate(`/${model.name}`, { replace: true }),
+		onReview: () => void queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) })
+	});
+	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
+	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;
+	const updated = stored.record.updatedAt ? Math.max(0, Math.round((Date.now() - Date.parse(String(stored.record.updatedAt))) / 1e3)) : void 0;
+	const hint = (name) => view?.fields[name];
+	const visible = (name) => fieldAccess(stored.permissions, name) !== "hidden";
+	const fieldView = (name) => {
+		const field = model.fields[name];
+		const access = fieldAccess(stored.permissions, name);
+		if (!field || access === "hidden") return null;
+		const conflict = editor.conflicts[name];
+		return /* @__PURE__ */ jsx(Field, {
+			label: hint(name)?.label ?? humanize(name),
+			help: hint(name)?.help,
+			error: editor.errors[name],
+			conflict: conflict === void 0 ? void 0 : {
+				user: {
+					name: "Someone else",
+					initials: "?",
+					hue: 40
+				},
+				ago: "just now",
+				theirValue: conflict || "—",
+				onKeepMine: () => editor.keepMine(name),
+				onUseTheirs: () => editor.useTheirs(name)
+			},
+			children: /* @__PURE__ */ jsx(FieldEditor, {
+				field,
+				hints: hint(name),
+				value: editor.value(name),
+				stored: stored.record[name],
+				relationLabel: related.labels[name],
+				relationHref: related.hrefs[name],
+				locked: !canUpdate || access === "read",
+				invalid: Boolean(editor.errors[name]),
+				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
+				onChange: (next) => editor.change(name, next)
+			})
+		}, field.sensitive ? `${name}:${stored.etag}` : name);
+	};
+	const saveControls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		editor.dirty && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-muted-foreground",
+			children: "Unsaved changes"
+		}),
+		editor.dirty && canUpdate && /* @__PURE__ */ jsx(Button, {
+			className: "max-md:min-h-11",
+			disabled: editor.saving,
+			onClick: editor.discard,
+			children: "Discard"
+		}),
+		can(permissions, "delete") && stored.permissions?.delete !== false && /* @__PURE__ */ jsx(Button, {
+			variant: "danger",
+			className: "max-md:min-h-11",
+			onClick: () => void remove.start({
+				key: recordKey,
+				title,
+				etag: stored.etag,
+				snapshot: stored.record
+			}),
+			children: "Delete"
+		}),
+		canUpdate && /* @__PURE__ */ jsxs(Button, {
+			variant: "primary",
+			className: "max-md:min-h-11 max-md:flex-1",
+			loading: editor.saving,
+			disabled: !editor.dirty && editor.phase !== "saved",
+			onClick: () => void editor.save(),
+			children: [editor.phase === "saved" && /* @__PURE__ */ jsx(Check, { className: "size-4" }), editor.phase === "saved" ? "Saved" : "Save"]
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-h-0 flex-1 overflow-y-auto",
+		children: [
+			remove.dialogs,
+			/* @__PURE__ */ jsxs("div", {
+				className: "mx-auto max-w-[1100px] px-4 pb-28 pt-6 md:px-10 md:py-8",
+				children: [
+					/* @__PURE__ */ jsx(RecordHeader, {
+						collection: view?.names?.plural ?? humanize(model.name),
+						title,
+						status: {
+							label: status ? enumLabel(status, hint("status")?.valueLabels) : singular,
+							tone: status ? toneFor(status) : "neutral"
+						},
+						lastEditedBy: { ago: updated === void 0 ? "recently" : formatRelativeTime(updated) },
+						actions: /* @__PURE__ */ jsx("div", {
+							className: "hidden items-center gap-4 md:flex",
+							children: saveControls
+						})
+					}),
+					editor.message && /* @__PURE__ */ jsx("div", {
+						className: "mt-4",
+						children: /* @__PURE__ */ jsx(ErrorBanner, {
+							title: "Not saved",
+							error: new Error(editor.message)
+						})
+					}),
+					editor.linesConflict && /* @__PURE__ */ jsx("div", {
+						className: "mt-4",
+						children: /* @__PURE__ */ jsx(ErrorBanner, {
+							title: "The lines were changed by someone else",
+							error: /* @__PURE__ */ new Error("The lines were reloaded. Your new order is kept: Save again to apply it, or Discard to drop it.")
+						})
+					}),
+					editor.restored && /* @__PURE__ */ jsxs("div", {
+						className: "mt-4 flex items-center justify-between gap-3 rounded-lg border bg-surface px-3 py-2 text-[13px]",
+						role: "status",
+						children: [/* @__PURE__ */ jsx("span", { children: "Your unsaved changes were restored." }), /* @__PURE__ */ jsxs("span", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onClick: editor.dismissRestored,
+								children: "Keep"
+							}), /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onClick: editor.discard,
+								children: "Discard"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
+						children: [/* @__PURE__ */ jsxs("main", {
+							className: "divide-y divide-border",
+							children: [layout.flatMap((item) => {
+								if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
+									item,
+									recordKey
+								}, `related:${item.title}`)];
+								if (item.kind !== "section") return [];
+								const fields = item.fields.filter((name) => model.fields[name] && visible(name));
+								if (fields.length === 0) return [];
+								return [/* @__PURE__ */ jsx(Section, {
+									title: item.title,
+									help: item.help,
+									children: /* @__PURE__ */ jsx("div", {
+										className: "grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2",
+										children: fields.map(fieldView)
+									})
+								}, item.title)];
+							}), linesModel && /* @__PURE__ */ jsx(RecordLines, {
+								lines: linesModel,
+								draft: linesDraft,
+								vatRate: Number(stored.record.vatRate ?? 21) / 100,
+								saving: editor.saving
+							})]
+						}), /* @__PURE__ */ jsxs("aside", {
+							className: "space-y-4 md:pt-8",
+							children: [
+								/* @__PURE__ */ jsx(RecordActions, {
+									model,
+									stored,
+									recordKey
+								}),
+								/* @__PURE__ */ jsx(MetadataCard, {
+									title: "Summary",
+									rows: sidebarFields.flatMap((name) => {
+										const field = model.fields[name];
+										if (!field || !visible(name)) return [];
+										const text = displayValue(field, stored.record[name], 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 })
+										}];
+									})
+								}),
+								/* @__PURE__ */ jsx(MetadataCard, {
+									title: "Details",
+									rows: ["createdAt", "updatedAt"].flatMap((name) => {
+										const field = model.fields[name];
+										return field && visible(name) ? [{
+											label: hint(name)?.label ?? humanize(name),
+											value: displayValue(field, stored.record[name], hint(name))
+										}] : [];
+									})
+								}),
+								related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {
+									title: "Related records",
+									children: /* @__PURE__ */ jsx(RelatedRecords, {
+										records: related.records,
+										onNavigate: (href) => navigate(href)
+									})
+								})
+							]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "fixed inset-x-0 bottom-0 z-30 flex items-center gap-2 border-t bg-background p-3 md:hidden",
+				children: saveControls
+			})
+		]
+	});
+};
+//#endregion
+export { RecordPage };

package/dist/app/related-section.js

@@ -0,0 +1,126 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { ErrorBanner } from "./error-banner.js";
+import { useAdminMeta } from "./meta-gate.js";
+import { Section } from "../record-view/section.js";
+import { Skeleton } from "../primitives/skeleton.js";
+import { RecordTable } from "./pages/record-table.js";
+import { defaultColumns } from "./pages/blocks/table.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/related-section.tsx
+const where = createWhere();
+/** The most join records a section reads to find its records; the list API's largest page. */
+const maxThrough = 500;
+const and = (...parts) => parts.filter((part) => Boolean(part)).map((part) => `(${part})`).join(" AND ");
+/**
+* The filter on the section's resource: its `field` is this record's key, or, through a join resource, one of the keys
+* the join records that point at this record hold. `null` when no join record does, so nothing can match.
+*/
+const useMatch = (item, recordKey) => {
+	const client = useClient();
+	const { resources } = useAdminMeta();
+	const through = item.through;
+	const via = through ? resources[through.resource] : void 0;
+	const key = through?.key ?? via?.primaryKey[0];
+	const viaFilter = through ? and(printFilter(where.eq(through.field, recordKey)), through.filter) : "";
+	const collected = useQuery({
+		queryKey: keys.list(via?.name ?? "", viaFilter, "", maxThrough, `related:${key}`),
+		enabled: Boolean(via && key),
+		queryFn: async () => {
+			const page = await client.search(via.name, {
+				filter: viaFilter,
+				fields: [key],
+				pageSize: maxThrough
+			});
+			return [...new Set(page.items.flatMap((row) => row[key] === null || row[key] === void 0 ? [] : [String(row[key])]))];
+		}
+	});
+	if (!through) return {
+		filter: and(printFilter(where.eq(item.field, recordKey)), item.filter),
+		isPending: false,
+		error: null
+	};
+	if (!collected.data) return {
+		filter: void 0,
+		isPending: collected.isPending,
+		error: collected.error
+	};
+	return {
+		filter: collected.data.length === 0 ? null : and(printFilter(where.in(item.field, collected.data)), item.filter),
+		isPending: false,
+		error: null
+	};
+};
+const RelatedRows = ({ item, model, filter }) => {
+	const client = useClient();
+	const { views } = useAdminMeta();
+	const [tokens, setTokens] = useState([""]);
+	const pageSize = item.pageSize ?? 10;
+	const sort = item.sort ?? "";
+	const token = tokens.at(-1) ?? "";
+	const page = useQuery({
+		queryKey: keys.list(model.name, filter, sort, pageSize, token),
+		placeholderData: keepPreviousData,
+		queryFn: () => client.search(model.name, {
+			filter,
+			orderBy: sort || void 0,
+			pageSize,
+			pageToken: token || void 0
+		})
+	});
+	if (page.isPending) return /* @__PURE__ */ jsx(Loading, {});
+	if (page.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load",
+		error: page.error
+	});
+	const rows = page.data.items;
+	if (rows.length === 0 && tokens.length === 1) return /* @__PURE__ */ jsx(Empty, { text: item.empty });
+	const columns = (item.columns ?? defaultColumns(model, views[model.name]).filter((name) => name !== item.field)).filter((name) => name.includes(".") || Object.hasOwn(model.fields, name));
+	const next = page.data.nextPageToken;
+	return /* @__PURE__ */ jsx(RecordTable, {
+		model,
+		columns,
+		rows,
+		label: item.title,
+		pager: {
+			page: tokens.length,
+			hasPrevious: tokens.length > 1,
+			hasNext: Boolean(next),
+			busy: page.isFetching,
+			previous: () => setTokens((stack) => stack.slice(0, -1)),
+			next: () => next && setTokens((stack) => [...stack, next])
+		}
+	});
+};
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-2",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+});
+const Empty = ({ text }) => /* @__PURE__ */ jsx("p", {
+	className: "text-[13px] text-muted-foreground",
+	children: text ?? "Nothing here yet."
+});
+/** A record page section listing the records of another resource that point at this record, directly or through a join resource. */
+const RelatedSection = ({ item, recordKey }) => {
+	const { resources } = useAdminMeta();
+	const model = resources[item.resource];
+	const match = useMatch(item, recordKey);
+	if (!model) return null;
+	return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		help: item.help,
+		children: match.isPending ? /* @__PURE__ */ jsx(Loading, {}) : match.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load",
+			error: match.error
+		}) : match.filter === null || match.filter === void 0 ? /* @__PURE__ */ jsx(Empty, { text: item.empty }) : /* @__PURE__ */ jsx(RelatedRows, {
+			item,
+			model,
+			filter: match.filter
+		}, match.filter)
+	});
+};
+//#endregion
+export { RelatedSection };

package/dist/app/relation-picker.js

@@ -0,0 +1,69 @@
+import { Input } from "../primitives/input.js";
+import { useClient } from "../data/api-provider.js";
+import { labelFieldOf } from "../live/model-helpers.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/relation-picker.tsx
+const where = createWhere();
+/** Picks a record of another resource: type to search (when the target has search fields), choose from the first matches. */
+const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
+	const client = useClient();
+	const [text, setText] = useState("");
+	const [open, setOpen] = useState(false);
+	const keyField = target.primaryKey[0];
+	const labelField = labelFieldOf(target, view);
+	const options = useQuery({
+		queryKey: [
+			"relation-options",
+			target.name,
+			text
+		],
+		enabled: open,
+		queryFn: () => client.list(target.name, {
+			filter: text && target.search?.length ? printFilter(where.search(text)) : void 0,
+			fields: [keyField, labelField],
+			pageSize: 8
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Input, {
+			invalid,
+			placeholder: `Search ${target.name}`,
+			value: open ? text : label ?? value,
+			onFocus: () => setOpen(true),
+			onBlur: () => setTimeout(() => setOpen(false), 120),
+			onChange: (event) => setText(event.target.value)
+		}), open && /* @__PURE__ */ jsxs("ul", {
+			role: "listbox",
+			className: "absolute z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-md border bg-background py-1 text-[13px] shadow-pop",
+			children: [
+				options.data?.items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": String(item[keyField]) === value,
+					className: "block w-full truncate px-3 py-1.5 text-left hover:bg-muted",
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => {
+						onChange(String(item[keyField]), String(item[labelField]));
+						setText("");
+						setOpen(false);
+					},
+					children: String(item[labelField])
+				}) }, String(item[keyField]))),
+				options.data && options.data.items.length === 0 && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: "No matches"
+				}),
+				options.isPending && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: "Loading"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { RelationPicker };