@protobase/ui 0.19.16 → 0.21.0

package/dist/app/list-group-chart.js

@@ -0,0 +1,37 @@
+import { humanize } from "../live/naming.js";
+import { ChartView } from "./charts/chart-view.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/list-group-chart.tsx
+const measureTitle = (chart, view, plural) => {
+	const name = chart.sum ?? chart.average;
+	if (name === void 0) return plural;
+	const label = view?.fields[name]?.label ?? humanize(name);
+	return chart.sum !== void 0 ? `${label}` : `Average ${label.toLowerCase()}`;
+};
+/** The view's chart per value of a field, above the list and following its filter. */
+const ListGroupChart = ({ model, view, chart, plural, filter }) => {
+	const by = view?.fields[chart.groupBy]?.label ?? humanize(chart.groupBy);
+	return /* @__PURE__ */ jsxs("section", {
+		className: "rounded-lg border bg-background px-4 pb-3 pt-3",
+		"aria-label": `${measureTitle(chart, view, plural)} by ${by.toLowerCase()}`,
+		children: [/* @__PURE__ */ jsxs("h2", {
+			className: "mb-2 font-semibold",
+			children: [
+				measureTitle(chart, view, plural),
+				" by ",
+				by.toLowerCase()
+			]
+		}), /* @__PURE__ */ jsx(ChartView, {
+			model,
+			view,
+			groupBy: chart.groupBy,
+			type: chart.type,
+			sum: chart.sum,
+			average: chart.average,
+			limit: chart.limit,
+			filter
+		})]
+	});
+};
+//#endregion
+export { ListGroupChart };

package/dist/app/list-page.js

@@ -45,6 +45,7 @@ import { useExportFlow } from "./export/use-export-flow.js";
 import { ListCards } from "./displays/list-cards.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
+import { ListGroupChart } from "./list-group-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withRelatedDotsColumns } from "./related-dots/related-dots-columns.js";
 import { SavedList } from "./saved/saved-list.js";
@@ -55,7 +56,7 @@ import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
-import { tableDisplay } from "@protobase/schema/internal";
+import { isGroupChart, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
 const where$1 = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
@@ -422,13 +423,19 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				title: "Could not load rows",
 				error: rows.error
 			}),
-			view?.chart && /* @__PURE__ */ jsx(ListChart, {
+			view?.chart && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
+				model,
+				view,
+				chart: view.chart,
+				plural,
+				filter: loadFilter
+			}) : /* @__PURE__ */ jsx(ListChart, {
 				resource,
 				chart: view.chart,
 				title: `${plural} created`,
 				noun: plural.toLowerCase(),
 				filter: loadFilter
-			}),
+			})),
 			desktop ? desktopToolbar : phoneFilters,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",

package/dist/app/pages/blocks/chart.js

@@ -0,0 +1,26 @@
+import { useAdminMeta } from "../../meta-gate.js";
+import { propsOf } from "./block-props.js";
+import { CardFrame } from "./card-frame.js";
+import { ChartView } from "../../charts/chart-view.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/chart.tsx
+/** Counts, sums or averages of the records that match, per value or date bucket of a field, in a card. */
+const ChartBlock = ({ node, slots }) => {
+	const { resource, title, description, actions: _actions, span: _span, ...chart } = propsOf(node);
+	const { resources, views } = useAdminMeta();
+	const model = resources[resource];
+	if (!model) return null;
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions: slots.actions,
+		className: "h-full",
+		children: /* @__PURE__ */ jsx(ChartView, {
+			model,
+			view: views[resource],
+			...chart
+		})
+	});
+};
+//#endregion
+export { ChartBlock };

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

@@ -4,6 +4,7 @@ import { useProjectUi } from "./project-ui.js";
 import { ActionBlock } from "./blocks/action.js";
 import { CardBlock } from "./blocks/card.js";
 import { CardRowBlock } from "./blocks/card-row.js";
+import { ChartBlock } from "./blocks/chart.js";
 import { FieldBlock } from "./blocks/field.js";
 import { GridBlock } from "./blocks/grid.js";
 import { LinkBlock } from "./blocks/link.js";
@@ -30,6 +31,7 @@ const blocks = {
 	Table: TableBlock,
 	CardRow: CardRowBlock,
 	RecordRow: RecordRowBlock,
+	Chart: ChartBlock,
 	Progress: ProgressBlock,
 	ModalForm: ModalFormBlock,
 	Action: ActionBlock,

package/dist/app/record-page.js

@@ -18,8 +18,9 @@ import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record
 import { RecordHeader } from "../record-view/record-header.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
-import { isRequiredOnEdit } from "../live/field-values.js";
+import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
 import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
+import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { displayValue } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
@@ -45,6 +46,7 @@ import { draftStorageKey } from "./draft-storage.js";
 import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
 import { GallerySection } from "./gallery/gallery-section.js";
+import { HistorySection } from "./history/history-section.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
@@ -57,8 +59,9 @@ 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. The read view, which is all a
-* user who may only read the resource gets, shows every field: the record rather than what can be changed.
+* The view's layout, or one section with the editable fields when the view has none, then History when the resource
+* keeps it. The read view, which is all a user who may only read the resource gets, shows every field: the record rather
+* than what can be changed.
 */
 const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
@@ -68,7 +71,10 @@ const layoutFor = (model, view, read) => {
 		kind: "section",
 		title: "Details",
 		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
-	}];
+	}, ...model.history ? [{
+		kind: "history",
+		title: "History"
+	}] : []];
 };
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
@@ -152,6 +158,24 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		onReview: () => void queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) })
 	});
 	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
+	const pickTarget = (name) => {
+		const field = model.fields[name];
+		const target = field?.relation ? meta.resources[field.relation.resource] : void 0;
+		if (!target || target.primaryKey.length !== 1 || name === model.tenant || model.primaryKey.includes(name)) return void 0;
+		return target;
+	};
+	const picked = Object.values(model.fields).filter((field) => pickTarget(field.name));
+	const drafted = {
+		...stored.record,
+		...Object.fromEntries(picked.map((field) => [field.name, fromDraft(field, editor.value(field.name))]))
+	};
+	const chosen = useRelatedRecords(model, view, meta.resources, meta.views, drafted, basePath);
+	const pick = (name, next) => {
+		const target = pickTarget(name);
+		if (!target || !isChosen(next)) return editor.change(name, next);
+		queryClient.setQueryData(keys.relatedLabel(target.name, next.key), next.label);
+		editor.change(name, keyValue(target, next.key));
+	};
 	const { fields: fieldTypes } = useProjectUi();
 	const layout = layoutFor(model, view, shown === "read").filter((item) => whenShown(item.when, editing));
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
@@ -167,6 +191,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		const access = fieldAccess(stored.permissions, name);
 		if (!field || access === "hidden") return null;
 		const conflict = editor.conflicts[name];
+		const target = pickTarget(name);
 		return /* @__PURE__ */ jsx(Field, {
 			label: hint(name)?.label ?? humanize(name),
 			required: shown === "form" && access !== "read" && isRequiredOnEdit(field),
@@ -189,13 +214,17 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 				hints: hint(name),
 				value: editor.value(name),
 				stored: stored.record[name],
-				relationLabel: related.labels[name],
-				relationTo: related.addresses[name],
+				relationLabel: chosen.labels[name],
+				relationTo: chosen.addresses[name],
+				relationPicker: target && {
+					target,
+					view: meta.views[target.name]
+				},
 				locked: shown !== "form" || access === "read",
 				invalid: Boolean(editor.errors[name]),
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
 				resource: model.name,
-				onChange: (next) => editor.change(name, next)
+				onChange: (next) => pick(name, next)
 			}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-9" })
 		}, field.sensitive ? `${name}:${stored.etag}` : name);
 	};
@@ -381,6 +410,13 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										record: stored.record,
 										recordKey
 									}, `gallery:${index}`)];
+									if (item.kind === "history") return [/* @__PURE__ */ jsx(HistorySection, {
+										item,
+										model,
+										view,
+										recordKey,
+										etag: stored.etag
+									}, `history:${index}`)];
 									if (item.kind !== "section") return [];
 									const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
 									const facts = shown === "read" && item.presentation === "facts";

package/dist/app/relation-options.js

@@ -0,0 +1,44 @@
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/relation-options.ts
+const where$1 = createWhere();
+/** The words of typed text, as the list search splits it. */
+const wordsOf = (text) => text.split(/\s+/).filter(Boolean);
+/**
+* How a relation picker finds the records that match typed text. A target with search fields uses the list's search;
+* else, when its title field is a filterable text field, every word must appear in it, ignoring case, as the search
+* matches one field. Otherwise, or once the server `refused` such a filter (the scan guard finds no index for it), the
+* picker loads the records page by page and keeps the rows whose title matches (`local`).
+*/
+const relationOptionsQuery = (target, titleField, text, refused = false) => {
+	const words = wordsOf(text);
+	if (words.length === 0) return {
+		filter: void 0,
+		local: false
+	};
+	if (refused) return {
+		filter: void 0,
+		local: true
+	};
+	if (target.search?.length) return {
+		filter: printFilter(where$1.search(text)),
+		local: false
+	};
+	const field = target.fields[titleField];
+	if (field?.type !== "text" || !field.filterable) return {
+		filter: void 0,
+		local: true
+	};
+	const contains = words.map((word) => where$1.eq(titleField, `*${word.replaceAll("*", "")}*`));
+	return {
+		filter: printFilter(where$1.and(...contains)),
+		local: false
+	};
+};
+/** Whether a title holds every word of the text, ignoring case: the picker's match on rows it filters itself. */
+const titleMatches = (title, text) => {
+	if (title === null || title === void 0) return false;
+	const value = String(title).toLowerCase();
+	return wordsOf(text).every((word) => value.includes(word.toLowerCase()));
+};
+//#endregion
+export { relationOptionsQuery, titleMatches };

package/dist/app/relation-picker.js

@@ -1,63 +1,142 @@
+import { cn } from "../lib/cn.js";
 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 { humanize } from "../live/naming.js";
+import { useList } from "../data/use-list.js";
+import { relationOptionsQuery, titleMatches } from "./relation-options.js";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ApiError } from "@protobase/client";
 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$1 = createWhere();
-/** Picks a record of another resource: type to search (when the target has search fields), choose from the first matches. */
+/** Loads the next page while `sentinel` is in view of the list; it re-arms after each page, in case it still is. */
+const useLoadMoreInView = (list, sentinel, loaded, loadMore) => {
+	useEffect(() => {
+		if (!list || !sentinel) return;
+		const observer = new IntersectionObserver((entries) => entries.some((entry) => entry.isIntersecting) && loadMore(), { root: list });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [
+		list,
+		sentinel,
+		loaded,
+		loadMore
+	]);
+};
+/**
+* Picks a record of another resource: type to narrow the records by their search fields or title, scroll for more, and
+* choose with the mouse or with the arrow keys and Enter; Escape closes the list.
+*/
 const RelationPicker = ({ target, view, value, label, invalid, onChange }) => {
-	const client = useClient();
 	const [text, setText] = useState("");
 	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(-1);
+	const [list, setList] = useState(null);
+	const [sentinel, setSentinel] = useState(null);
+	const listId = useId();
 	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$1.search(text)) : void 0,
-			fields: [keyField, labelField],
-			pageSize: 8
-		})
+	const [refused, setRefused] = useState(false);
+	const query = relationOptionsQuery(target, labelField, text, refused);
+	const rows = useList(target.name, {
+		filter: query.filter,
+		fields: [keyField, labelField],
+		enabled: open
+	});
+	const expensive = query.filter !== void 0 && rows.error instanceof ApiError && rows.error.slug === "expensive-query";
+	useEffect(() => {
+		if (expensive) setRefused(true);
+	}, [expensive]);
+	const items = query.local ? rows.items.filter((item) => titleMatches(item[labelField], text)) : rows.items;
+	const more = Boolean(rows.hasNextPage);
+	const loading = rows.isPending || rows.isFetchingNextPage;
+	const { fetchNextPage } = rows;
+	useLoadMoreInView(list, sentinel, rows.items.length, useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]));
+	const optionId = (index) => `${listId}-${index}`;
+	const input = useRef(null);
+	useEffect(() => {
+		if (!open && document.activeElement === input.current) input.current?.select();
+	}, [open]);
+	useEffect(() => {
+		if (open && active >= 0) document.getElementById(optionId(active))?.scrollIntoView({ block: "nearest" });
 	});
+	const close = () => {
+		setText("");
+		setActive(-1);
+		setOpen(false);
+	};
+	const choose = (item) => {
+		onChange(String(item[keyField]), String(item[labelField]));
+		close();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!open) return setOpen(true);
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			setActive((current) => Math.min(Math.max(current + step, 0), items.length - 1));
+			return;
+		}
+		if (event.key === "Enter" && open && items[active]) {
+			event.preventDefault();
+			choose(items[active]);
+			return;
+		}
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			close();
+		}
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		children: [/* @__PURE__ */ jsx(Input, {
+			ref: input,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": open,
+			"aria-controls": listId,
+			"aria-activedescendant": open && items[active] ? optionId(active) : void 0,
 			invalid,
-			placeholder: `Search ${target.name}`,
+			placeholder: `Search ${(view?.names?.plural ?? humanize(target.name)).toLowerCase()}`,
 			value: open ? text : label ?? value,
 			onFocus: () => setOpen(true),
-			onBlur: () => setTimeout(() => setOpen(false), 120),
-			onChange: (event) => setText(event.target.value)
+			onBlur: close,
+			onKeyDown,
+			onChange: (event) => {
+				setText(event.target.value);
+				setActive(event.target.value.trim() ? 0 : -1);
+				setOpen(true);
+			}
 		}), open && /* @__PURE__ */ jsxs("ul", {
+			ref: setList,
+			id: listId,
 			role: "listbox",
 			className: "absolute z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-md border bg-background py-1 shadow-pop",
+			onMouseDown: (event) => event.preventDefault(),
 			children: [
-				options.data?.items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
+				items.map((item, index) => /* @__PURE__ */ jsx("li", {
+					id: optionId(index),
 					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);
-					},
+					"aria-selected": index === active,
+					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", String(item[keyField]) === value && "font-medium"),
+					onMouseMove: () => index !== active && setActive(index),
+					onClick: () => choose(item),
 					children: String(item[labelField])
-				}) }, String(item[keyField]))),
-				options.data && options.data.items.length === 0 && /* @__PURE__ */ jsx("li", {
+				}, String(item[keyField]))),
+				more && /* @__PURE__ */ jsx("li", {
+					ref: setSentinel,
+					"aria-hidden": true,
+					className: "h-px"
+				}),
+				rows.error && !expensive && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: "Could not load the options"
+				}),
+				!more && !loading && !rows.error && items.length === 0 && /* @__PURE__ */ jsx("li", {
 					className: "px-3 py-1.5 text-muted-foreground",
 					children: "No matches"
 				}),
-				options.isPending && /* @__PURE__ */ jsx("li", {
+				loading && /* @__PURE__ */ jsx("li", {
 					className: "px-3 py-1.5 text-muted-foreground",
 					children: "Loading"
 				})

package/dist/data/api-provider.d.ts

@@ -16,12 +16,17 @@ export declare const useClient: () => {
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").HistoryPage>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
     limit?: number;
     label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
+  aggregate: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").AggregateParams) => Promise<import("@protobase/client").Aggregate>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
   }) => Promise<import("@protobase/client").Series>;
@@ -56,12 +61,17 @@ export declare const useResourceClient: (resource: string) => {
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
+  history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").HistoryPage>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
     limit?: number;
     label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
+  aggregate: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").AggregateParams) => Promise<import("@protobase/client").Aggregate>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
   }) => Promise<import("@protobase/client").Series>;

package/dist/data/query-keys.js

@@ -58,6 +58,14 @@ const keys = {
 		resource,
 		key
 	],
+	/** A record's changes; starts with `record`, so refreshing the record refreshes them too. */
+	history: (resource, key, pageSize) => [
+		"record",
+		resource,
+		key,
+		"history",
+		pageSize
+	],
 	facets: (resource, field, filter) => [
 		"facets",
 		resource,
@@ -72,6 +80,11 @@ const keys = {
 		granularity,
 		filter
 	],
+	aggregate: (resource, params) => [
+		"aggregate",
+		resource,
+		params
+	],
 	histogram: (resource, field, buckets, filter) => [
 		"histogram",
 		resource,

package/dist/data/use-aggregates.js

@@ -39,5 +39,18 @@ const useHistogram = (resource, field, filter, buckets = 20, enabled = true) =>
 		})
 	});
 };
+/** Totals per value or date bucket of a field (`:aggregate`), refetched whenever the resource is written. */
+const useAggregate = (resource, params, enabled = true) => {
+	const client = useClient();
+	const wire = {
+		...params,
+		filter: filterText(params.filter) ?? ""
+	};
+	return useQuery({
+		queryKey: keys.aggregate(resource, JSON.stringify(wire)),
+		enabled,
+		queryFn: () => client.aggregate(resource, wire)
+	});
+};
 //#endregion
-export { useFacets, useHistogram, useSeries };
+export { useAggregate, useFacets, useHistogram, useSeries };

package/dist/format/date.js

@@ -25,6 +25,19 @@ const formatAgo = (seconds) => {
 	if (seconds < 86400) return `${Math.floor(seconds / 3600)} h ago`;
 	return `${Math.floor(seconds / 86400)} d ago`;
 };
-new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const units = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+/** "5 minutes ago", "yesterday", "3 years ago"; `seconds` is how long ago it was. */
+const formatRelativeTime = (seconds) => {
+	const [unit, size] = units.find(([, size]) => seconds >= size) ?? ["second", 1];
+	if (unit === "second" && seconds < 45) return "just now";
+	return relative.format(-Math.floor(seconds / size), unit);
+};
 //#endregion
-export { formatAgo, formatDate, formatDateTime, formatDayShort };
+export { formatAgo, formatDate, formatDateTime, formatDayShort, formatRelativeTime };

package/dist/index.js

@@ -37,14 +37,14 @@ import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
 import { Textarea } from "./primitives/textarea.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { useList } from "./data/use-list.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
+import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
 import { Form } from "./app/create/form.js";
-import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
-import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";

package/dist/live/field-values.js

@@ -21,6 +21,7 @@ const toPatchValue = (field, draft) => {
 	const text = String(draft).trim();
 	if (text === "") return field.nullable ? null : "";
 	if (field.type === "integer") return Number(text);
+	if (field.type === "relation") return typeof draft === "number" ? draft : text;
 	if (textEdited.has(field.type) || field.type === "enum") return text;
 	throw new Error(`Not implemented: editing ${field.type} fields`);
 };

package/dist/package.js

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