@protobase/ui 0.19.16 → 0.21.0

package/dist/app/charts/chart-groups.js

@@ -0,0 +1,52 @@
+import { createWhere, enumLabel, printFilter } from "@protobase/schema";
+//#region src/app/charts/chart-groups.ts
+const where$1 = createWhere();
+const slot = (index) => index >= 0 && index < 8 ? `var(--chart-${index + 1})` : "var(--faint-foreground)";
+const colorOf = (field, hints, value, index) => {
+	const key = String(value);
+	if (value === null) return "var(--faint-foreground)";
+	if (hints?.valueColors && Object.hasOwn(hints.valueColors, key)) return hints.valueColors[key];
+	if (field.type === "enum") return slot(field.enumValues?.indexOf(key) ?? -1);
+	if (field.type === "boolean") return slot(value ? 0 : 1);
+	return slot(index);
+};
+const labelOf = (field, hints, group) => {
+	if (group.value === null) return "Not set";
+	if (field.type === "enum") return enumLabel(String(group.value), hints?.valueLabels);
+	if (field.type === "boolean") return group.value ? "Yes" : "No";
+	return group.label ?? String(group.value);
+};
+/** The records of one group: the chart's own filter and the group's value. */
+const groupFilter = (field, value, filter = "") => {
+	const own = printFilter(value === null ? where$1.isNull(field.name) : where$1.eq(field.name, value));
+	return filter.trim() ? `(${filter}) AND ${own}` : own;
+};
+const measured = (group, measure) => measure.kind === "count" ? group.count : group[measure.kind] ?? null;
+/** The groups of a field of values as slices, in the order the API ranks them. */
+const valueSlices = (groups, field, hints, measure, filter = "") => groups.map((group, index) => ({
+	key: String(group.value),
+	label: labelOf(field, hints, group),
+	value: measured(group, measure),
+	count: group.count,
+	color: colorOf(field, hints, group.value, index),
+	filter: groupFilter(field, group.value, filter)
+}));
+/** A date field's buckets as points in time, the bucket's start read as UTC as the list's chart reads it. */
+const periodPoints = (groups, measure) => groups.map((group) => ({
+	at: Date.parse(`${String(group.value)}Z`),
+	value: measured(group, measure),
+	count: group.count
+}));
+/** A measured number as text: a count whole, a sum or average with the field's decimals, prefix and suffix. */
+const measureText = (value, measure) => {
+	if (value === null) return "—";
+	if (measure.kind === "count") return value.toLocaleString("en-IE");
+	const decimals = measure.hints?.decimals ?? (Number.isInteger(value) ? 0 : 2);
+	const text = value.toLocaleString("en-IE", {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	});
+	return `${measure.hints?.prefix ?? ""}${text}${measure.hints?.suffix ?? ""}`;
+};
+//#endregion
+export { groupFilter, measureText, periodPoints, valueSlices };

package/dist/app/charts/chart-view.js

@@ -0,0 +1,75 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { labelFieldOf } from "../../live/model-helpers.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useAggregate } from "../../data/use-aggregates.js";
+import { periodPoints, valueSlices } from "./chart-groups.js";
+import { GroupBars } from "./group-bars.js";
+import { GroupDonut } from "./group-donut.js";
+import { PeriodChart } from "./period-chart.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/charts/chart-view.tsx
+const measureOf = (model, view, sum, average) => {
+	const name = sum ?? average;
+	const field = name === void 0 ? void 0 : model.fields[name];
+	if (!field || name === void 0) return { kind: "count" };
+	return {
+		kind: sum !== void 0 ? "sum" : "average",
+		field,
+		hints: view?.fields[name]
+	};
+};
+/**
+* Loads a chart's groups through `:aggregate` and draws them: a date field's buckets as bars or a line, a field's
+* values as ranked bars or a donut, each value linking to its records. The server checked the chart at startup.
+*/
+const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter = "", granularity = "day", range = "30d", limit = 10, empty = "Nothing to chart yet." }) => {
+	const { resources, views } = useAdminMeta();
+	const field = model.fields[groupBy];
+	const dated = field?.type === "date" || field?.type === "timestamp";
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	const label = target && target.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
+	const params = dated ? {
+		granularity,
+		range
+	} : {
+		limit,
+		...label && { label }
+	};
+	const result = useAggregate(model.name, {
+		groupBy,
+		filter,
+		...sum && { sum },
+		...average && { average },
+		...params
+	}, Boolean(field));
+	const measure = measureOf(model, view, sum, average);
+	if (!field) return null;
+	if (result.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-36 w-full" });
+	if (result.error) return /* @__PURE__ */ jsx("p", {
+		className: "text-danger-text",
+		children: "Could not load the chart."
+	});
+	const { groups } = result.data;
+	if (groups.every((group) => group.count === 0)) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children: empty
+	});
+	if (dated) return /* @__PURE__ */ jsx(PeriodChart, {
+		points: periodPoints(groups, measure),
+		measure,
+		bucket: granularity,
+		type: type === "line" ? "line" : "bar"
+	});
+	const slices = valueSlices(groups, field, view?.fields[groupBy], measure, filter);
+	return type === "donut" ? /* @__PURE__ */ jsx(GroupDonut, {
+		resource: model.name,
+		slices,
+		measure
+	}) : /* @__PURE__ */ jsx(GroupBars, {
+		resource: model.name,
+		slices,
+		measure
+	});
+};
+//#endregion
+export { ChartView };

package/dist/app/charts/group-bars.js

@@ -0,0 +1,49 @@
+import { AppLink } from "../use-app-address.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/charts/group-bars.tsx
+/**
+* A ranked list of a field's values, each a bar as long as its number and a link to its records. Bars in rows read on
+* a phone as well as on a desk, and carry their label and value as text, so no colour has to say what a bar is.
+*/
+const GroupBars = ({ resource, slices, measure }) => {
+	const largest = Math.max(0, ...slices.map((slice) => slice.value ?? 0));
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1",
+		children: slices.map((slice) => {
+			const share = largest > 0 && slice.value !== null ? Math.max(0, slice.value) / largest : 0;
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: {
+					kind: "list",
+					resource,
+					filter: slice.filter
+				},
+				className: "group grid grid-cols-[minmax(6rem,35%)_1fr_auto] items-center gap-3 rounded-md px-1 py-1 hover:bg-muted",
+				title: measure.kind === "count" ? void 0 : `${measureText(slice.count, { kind: "count" })} records`,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate group-hover:text-primary-text",
+						children: slice.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-3 rounded-r bg-muted",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "block h-full rounded-r",
+							style: {
+								width: `${share * 100}%`,
+								background: "var(--chart-1)"
+							}
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-right font-medium tabular-nums",
+						children: measureText(slice.value, measure)
+					})
+				]
+			}) }, slice.key);
+		})
+	});
+};
+//#endregion
+export { GroupBars };

package/dist/app/charts/group-donut.js

@@ -0,0 +1,84 @@
+import { AppLink } from "../use-app-address.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
+//#region src/app/charts/group-donut.tsx
+const percent = (part, whole) => whole > 0 ? `${Math.round(part / whole * 100)}%` : "";
+const SliceTooltip = ({ active, payload, measure }) => {
+	const slice = payload?.[0]?.payload;
+	if (!active || !slice) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border bg-background px-2.5 py-1.5 text-xs shadow-pop",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: slice.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "font-semibold tabular-nums",
+			children: measureText(slice.value, measure)
+		})]
+	});
+};
+/**
+* A donut of how a total shares out over a field's values, with a legend that names each, gives its number and share,
+* and links to its records: the legend, not the colour, says which slice is which.
+*/
+const GroupDonut = ({ resource, slices, measure }) => {
+	const drawn = slices.filter((slice) => slice.value !== null && slice.value > 0);
+	const whole = drawn.reduce((sum, slice) => sum + slice.value, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-4 sm:flex-row sm:items-center",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "size-36 shrink-0",
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+					data: drawn,
+					dataKey: "value",
+					nameKey: "label",
+					innerRadius: "62%",
+					outerRadius: "100%",
+					paddingAngle: drawn.length > 1 ? 1 : 0,
+					stroke: "var(--background)",
+					strokeWidth: 2,
+					isAnimationActive: false,
+					children: drawn.map((slice) => /* @__PURE__ */ jsx(Cell, { fill: slice.color }, slice.key))
+				}), /* @__PURE__ */ jsx(Tooltip, {
+					content: /* @__PURE__ */ jsx(SliceTooltip, { measure }),
+					isAnimationActive: false
+				})] })
+			})
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex w-full min-w-0 flex-col gap-0.5",
+			children: slices.map((slice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: {
+					kind: "list",
+					resource,
+					filter: slice.filter
+				},
+				className: "group flex items-center gap-2 rounded-md px-1 py-0.5 hover:bg-muted",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "size-2.5 shrink-0 rounded-full",
+						style: { background: slice.color },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate group-hover:text-primary-text",
+						children: slice.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium tabular-nums",
+						children: measureText(slice.value, measure)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "w-9 text-right text-xs text-muted-foreground tabular-nums",
+						children: percent(slice.value ?? 0, whole)
+					})
+				]
+			}) }, slice.key))
+		})]
+	});
+};
+//#endregion
+export { GroupDonut };

package/dist/app/charts/period-chart.js

@@ -0,0 +1,174 @@
+import { useMediaQuery } from "../../lib/use-media-query.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region src/app/charts/period-chart.tsx
+const formats = {
+	hour: {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	},
+	day: {
+		day: "numeric",
+		month: "short"
+	},
+	week: {
+		day: "numeric",
+		month: "short"
+	},
+	month: {
+		month: "short",
+		year: "2-digit"
+	},
+	year: { year: "numeric" }
+};
+const tooltipFormats = {
+	hour: {
+		day: "numeric",
+		month: "short",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	},
+	day: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	week: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	month: {
+		month: "long",
+		year: "numeric"
+	},
+	year: { year: "numeric" }
+};
+const formatterOf = (options) => {
+	const format = new Intl.DateTimeFormat("en-GB", {
+		...options,
+		timeZone: "UTC"
+	});
+	return (ms) => format.format(ms);
+};
+const axisTick = {
+	fontSize: 11,
+	fill: "var(--muted-foreground)"
+};
+const PointTooltip = ({ active, payload, measure, bucket }) => {
+	const point = payload?.[0]?.payload;
+	if (!active || !point) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border bg-background px-2.5 py-1.5 text-xs shadow-pop",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: (bucket === "week" ? "Week of " : "") + formatterOf(tooltipFormats[bucket])(point.at)
+		}), /* @__PURE__ */ jsx("div", {
+			className: "font-semibold tabular-nums",
+			children: measureText(point.value, measure)
+		})]
+	});
+};
+/** A date field's buckets over time, as bars or a line; a bucket without a value to add up is a gap. */
+const PeriodChart = ({ points, measure, bucket, type }) => {
+	const wide = useMediaQuery("(min-width: 640px)");
+	const tick = formatterOf(formats[bucket]);
+	const grid = /* @__PURE__ */ jsx(CartesianGrid, {
+		vertical: false,
+		stroke: "var(--border)"
+	});
+	const x = /* @__PURE__ */ jsx(XAxis, {
+		dataKey: "at",
+		tickFormatter: tick,
+		tick: axisTick,
+		axisLine: false,
+		tickLine: false,
+		minTickGap: wide ? 24 : 40,
+		height: 18
+	});
+	const y = /* @__PURE__ */ jsx(YAxis, {
+		width: wide ? 48 : 36,
+		tick: axisTick,
+		axisLine: false,
+		tickLine: false,
+		tickCount: 3,
+		tickFormatter: (value) => value.toLocaleString("en-IE", { notation: "compact" })
+	});
+	const tooltip = /* @__PURE__ */ jsx(Tooltip, {
+		cursor: type === "bar" ? { fill: "var(--muted)" } : { stroke: "var(--border-strong)" },
+		content: /* @__PURE__ */ jsx(PointTooltip, {
+			measure,
+			bucket
+		}),
+		isAnimationActive: false
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-40",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: type === "line" ? /* @__PURE__ */ jsxs(LineChart, {
+				data: points,
+				margin: {
+					top: 6,
+					right: 6,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					grid,
+					x,
+					y,
+					tooltip,
+					/* @__PURE__ */ jsx(Line, {
+						dataKey: "value",
+						stroke: "var(--chart-1)",
+						strokeWidth: 2,
+						dot: points.length <= 31 ? {
+							r: 3,
+							fill: "var(--chart-1)",
+							strokeWidth: 0
+						} : false,
+						activeDot: {
+							r: 4,
+							stroke: "var(--background)",
+							strokeWidth: 2
+						},
+						isAnimationActive: false
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(BarChart, {
+				data: points,
+				margin: {
+					top: 6,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				barCategoryGap: "22%",
+				children: [
+					grid,
+					x,
+					y,
+					tooltip,
+					/* @__PURE__ */ jsx(Bar, {
+						dataKey: "value",
+						fill: "var(--chart-1)",
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						isAnimationActive: false
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { PeriodChart };

package/dist/app/create/create-values.js

@@ -29,6 +29,7 @@ const createSections = (model, view) => {
 		fields: rest
 	}];
 };
+/** A chosen record's key as the API takes it: a number when the target's key is an integer. */
 const keyValue = (target, key) => {
 	return (target?.primaryKey.length === 1 ? target.fields[target.primaryKey[0]]?.type : void 0) === "integer" ? Number(key) : key;
 };
@@ -68,4 +69,4 @@ const initialDraft = (model, sections, given = {}) => Object.fromEntries(section
 })));
 const hasDatabaseDefault = (field) => Boolean(field.default && "db" in field.default);
 //#endregion
-export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired };
+export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired, keyValue };

package/dist/app/field-editor.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
+import { buttonClass } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
 import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
@@ -14,6 +15,7 @@ import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
+import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
@@ -42,17 +44,33 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		placeholder,
 		onChange
 	});
-	if (field.type === "relation" && relationPicker && !field.readOnly) return /* @__PURE__ */ jsx(RelationPicker, {
-		target: relationPicker.target,
-		view: relationPicker.view,
-		value: String(value),
-		label: relationLabel,
-		invalid,
-		onChange: (next, label) => onChange({
-			key: next,
-			label
-		})
-	});
+	if (field.type === "relation" && relationPicker && !field.readOnly && !locked) {
+		const picker = /* @__PURE__ */ jsx(RelationPicker, {
+			target: relationPicker.target,
+			view: relationPicker.view,
+			value: String(value),
+			label: relationLabel,
+			invalid,
+			onChange: (next, label) => onChange({
+				key: next,
+				label
+			})
+		});
+		if (!relationTo) return picker;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: picker
+			}), /* @__PURE__ */ jsx(AppLink, {
+				to: relationTo,
+				"aria-label": `Open ${relationLabel ?? String(value)}`,
+				title: "Open",
+				className: cn(buttonClass({ variant: "ghost" }), "w-8 px-0"),
+				children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" })
+			})]
+		});
+	}
 	if (field.type === "boolean" && locked) return /* @__PURE__ */ jsx("div", {
 		className: "py-1.5 text-muted-foreground",
 		children: displayValue(field, stored, hints)

package/dist/app/history/describe-change.js

@@ -0,0 +1,44 @@
+import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
+//#region src/app/history/describe-change.ts
+const verbs = {
+	create: "created this",
+	update: "changed",
+	delete: "deleted this",
+	undelete: "restored this"
+};
+/** Who made a change: their name, else their id; a write from outside the app names the database role. */
+const changedBy = (change) => {
+	if (change.actor) return change.actor.name ?? change.actor.id;
+	return change.databaseRole ? `Database (${change.databaseRole})` : "Database";
+};
+/**
+* A change as the record page tells it: who, what they did, and for an update each changed field the model still has,
+* before and after, as the view labels and formats it.
+*/
+const describeChange = (change, model, view) => {
+	const fields = (change.operation === "create" ? [] : change.changed).flatMap((name) => {
+		const field = model.fields[name];
+		if (!field || name === model.softDelete) return [];
+		const hints = view?.fields[name];
+		const label = hints?.label ?? humanize(name);
+		if (field.sensitive || !change.before || !change.after) return [{
+			name,
+			label
+		}];
+		return [{
+			name,
+			label,
+			before: displayValue(field, change.before[name], hints),
+			after: displayValue(field, change.after[name], hints)
+		}];
+	});
+	const verb = change.operation === "update" && fields.length === 0 ? "changed this" : verbs[change.operation];
+	return {
+		who: changedBy(change),
+		verb,
+		fields
+	};
+};
+//#endregion
+export { changedBy, describeChange };

package/dist/app/history/history-section.js

@@ -0,0 +1,92 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { formatDateTime, formatRelativeTime } from "../../format/date.js";
+import { Button } from "../../primitives/button.js";
+import { Section } from "../../record-view/section.js";
+import { ErrorBanner } from "../error-banner.js";
+import { describeChange } from "./describe-change.js";
+import { useRecordHistory } from "./use-record-history.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/history/history-section.tsx
+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 Change = ({ change, model, view }) => {
+	const { who, verb, fields } = describeChange(change, model, view);
+	const at = Date.parse(change.at);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex flex-col gap-1.5 py-3 first:pt-0 last:pb-0",
+		children: [/* @__PURE__ */ jsxs("p", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: who
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: verb
+			}),
+			" ",
+			/* @__PURE__ */ jsxs("time", {
+				dateTime: change.at,
+				title: formatDateTime(at),
+				className: "text-muted-foreground",
+				children: ["· ", formatRelativeTime(Math.max(0, Math.round((Date.now() - at) / 1e3)))]
+			})
+		] }), fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+			className: "grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1",
+			children: fields.map((field) => /* @__PURE__ */ jsxs("div", {
+				className: "contents",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "text-muted-foreground",
+					children: field.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "min-w-0 break-words",
+					children: field.before === void 0 ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "changed"
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("del", {
+							className: "text-muted-foreground",
+							children: field.before
+						}),
+						" → ",
+						/* @__PURE__ */ jsx("ins", {
+							className: "no-underline",
+							children: field.after
+						})
+					] })
+				})]
+			}, field.name))
+		})]
+	});
+};
+/** The record's changes, newest first, with who made each and the fields before and after; Show more pages further back. */
+const HistorySection = ({ item, model, view, recordKey, etag }) => {
+	const history = useRecordHistory(model.name, recordKey, item.limit ?? 10, etag);
+	return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: history.isPending ? /* @__PURE__ */ jsx(Loading, {}) : history.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load the history",
+			error: history.error
+		}) : history.items.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "No changes kept yet."
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ol", {
+			className: "divide-y divide-border",
+			children: history.items.map((change) => /* @__PURE__ */ jsx(Change, {
+				change,
+				model,
+				view
+			}, change.id))
+		}), history.hasNextPage && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			className: "mt-4",
+			disabled: history.isFetchingNextPage,
+			onClick: () => void history.fetchNextPage(),
+			children: "Show more"
+		})] })
+	});
+};
+//#endregion
+export { HistorySection };

package/dist/app/history/use-record-history.js

@@ -0,0 +1,34 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useEffect } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+//#region src/app/history/use-record-history.ts
+/** How long after a save the history looks again: the server keeps a change just after its write commits. */
+const afterSave = 1500;
+/**
+* A record's changes, newest first, `pageSize` at a time. Its key starts with the record's, so refreshing the record
+* refreshes it too; it looks again shortly after `etag` changes, once the server has kept the save.
+*/
+const useRecordHistory = (resource, recordKey, pageSize, etag) => {
+	const client = useClient();
+	const query = useInfiniteQuery({
+		queryKey: keys.history(resource, recordKey, pageSize),
+		initialPageParam: "",
+		queryFn: ({ pageParam }) => client.history(resource, recordKey, {
+			pageSize,
+			pageToken: pageParam
+		}),
+		getNextPageParam: (last) => last.nextPageToken || void 0
+	});
+	const { refetch } = query;
+	useEffect(() => {
+		const timer = setTimeout(() => void refetch(), afterSave);
+		return () => clearTimeout(timer);
+	}, [etag, refetch]);
+	return {
+		...query,
+		items: query.data?.pages.flatMap((page) => page.items) ?? []
+	};
+};
+//#endregion
+export { useRecordHistory };