@protobase/ui 0.19.15 → 0.20.0

package/dist/app/displays/board-display.js

@@ -0,0 +1,96 @@
+import { usePermissions } from "../meta-gate.js";
+import { boardCard, boardColumns } from "./board-columns.js";
+import { can } from "../permissions.js";
+import { RecordCard } from "./record-card.js";
+import { collision, columnCoordinates, columnId } from "./board-dnd.js";
+import { BoardColumnView } from "./board-column.js";
+import { useBoardMove } from "./use-board-move.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+//#region src/app/displays/board-display.tsx
+/**
+* A column per value of the board's enum field, each loading its own records through the list API, with their count;
+* a card dragged, or moved with the keyboard, to another column saves the record with that column's value.
+*/
+const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit }) => {
+	const columns = boardColumns(model, view, display);
+	const card = boardCard(model, view, display);
+	const permissions = usePermissions(model.name);
+	const movable = can(permissions, "update") && !model.fields[display.by]?.readOnly;
+	const { moves, move } = useBoardMove(model, display.by);
+	const [active, setActive] = useState();
+	const dragged = useRef(false);
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, {
+		keyboardCodes: {
+			start: ["Space"],
+			cancel: ["Escape"],
+			end: ["Space", "Enter"]
+		},
+		coordinateGetter: columnCoordinates
+	}));
+	const title = (row) => String(row.labels[card.title] ?? row.record[card.title] ?? row.key);
+	const columnOf = (id) => columns.find((column) => columnId(column.value) === id);
+	const valueOf = (row) => row.record[display.by] ?? null;
+	const announcements = {
+		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current.row)}.`,
+		onDragOver: ({ active: picked, over }) => `${title(picked.data.current.row)} is over ${over ? columnOf(over.id)?.label : "no column"}.`,
+		onDragEnd: ({ active: picked, over }) => over ? `${title(picked.data.current.row)} was moved to ${columnOf(over.id)?.label}.` : `${title(picked.data.current.row)} was put back.`,
+		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current.row)} was cancelled.`
+	};
+	const start = ({ active: picked }) => {
+		dragged.current = true;
+		setActive(picked.data.current.row);
+	};
+	const end = ({ active: picked, over }) => {
+		setActive(void 0);
+		setTimeout(() => dragged.current = false);
+		const row = picked.data.current.row;
+		const target = over ? columnOf(over.id) : void 0;
+		if (target && target.value !== valueOf(row)) move(row, target);
+	};
+	return /* @__PURE__ */ jsxs(DndContext, {
+		sensors,
+		collisionDetection: collision,
+		onDragStart: start,
+		onDragEnd: end,
+		onDragCancel: () => {
+			setActive(void 0);
+			setTimeout(() => dragged.current = false);
+		},
+		accessibility: {
+			announcements,
+			screenReaderInstructions: { draggable: "To move a card to another column, press Space, move it with the left and right arrow keys, and press Space again to drop it there. Escape puts it back." }
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 overflow-x-auto",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex snap-x items-start gap-3 pb-2",
+				children: columns.map((column) => /* @__PURE__ */ jsx(BoardColumnView, {
+					model,
+					view,
+					display,
+					column,
+					fields,
+					filter,
+					orderBy,
+					limit,
+					moves,
+					movable,
+					dragged: () => dragged.current
+				}, columnId(column.value)))
+			})
+		}), /* @__PURE__ */ jsx(DragOverlay, { children: active && /* @__PURE__ */ jsx(RecordCard, {
+			model,
+			view,
+			display: card,
+			row: active,
+			swipe: false
+		}) })]
+	});
+};
+//#endregion
+export { BoardDisplay };

package/dist/app/displays/board-dnd.js

@@ -0,0 +1,32 @@
+import { pointerWithin, rectIntersection } from "@dnd-kit/core";
+//#region src/app/displays/board-dnd.ts
+/** The id a board's column is dropped on by. */
+const columnId = (value) => value === null ? "none" : `value:${value}`;
+/** A pointer drops a card on the column under it; the keyboard, which has no pointer, on the column the card overlaps. */
+const collision = (args) => {
+	const under = pointerWithin(args);
+	return under.length > 0 ? under : rectIntersection(args);
+};
+/** The arrow keys move a picked-up card to the top of the next column to the left or right. */
+const columnCoordinates = (event, { context: { collisionRect, droppableRects, droppableContainers, over } }) => {
+	const step = event.code === "ArrowRight" ? 1 : event.code === "ArrowLeft" ? -1 : 0;
+	if (step === 0 || !collisionRect) return void 0;
+	event.preventDefault();
+	const columns = droppableContainers.getEnabled().flatMap((container) => {
+		const rect = droppableRects.get(container.id);
+		return rect ? [{
+			id: container.id,
+			rect
+		}] : [];
+	}).sort((a, b) => a.rect.left - b.rect.left);
+	const center = collisionRect.left + collisionRect.width / 2;
+	const at = over ? columns.findIndex((column) => column.id === over.id) : columns.findIndex((column) => column.rect.left <= center && center <= column.rect.right);
+	const target = columns[at + step];
+	if (at === -1 || !target) return void 0;
+	return {
+		x: target.rect.left + (target.rect.width - collisionRect.width) / 2,
+		y: target.rect.top
+	};
+};
+//#endregion
+export { collision, columnCoordinates, columnId };

package/dist/app/displays/list-displays.js

@@ -3,6 +3,7 @@ import { humanize } from "../../live/naming.js";
 import { displayValue } from "../../live/display-value.js";
 import { photosKey } from "../../live/row-photos.js";
 import { filledFields } from "../filled-fields.js";
+import { boardCard } from "./board-columns.js";
 import { encodeKey, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
@@ -25,7 +26,8 @@ const shownDisplay = (view, name) => {
 };
 const defaultIcons = {
 	cards: "cards",
-	map: "map"
+	map: "map",
+	board: "kanban"
 };
 const displayChoices = (view) => [{
 	name: tableDisplay,
@@ -76,6 +78,16 @@ const shownFields = (model, view, display) => {
 		display.longitude,
 		...shownFields(model, view, mapCards(view, display))
 	];
+	if (display.kind === "board") {
+		const card = boardCard(model, view, display);
+		return [
+			display.by,
+			card.title,
+			card.subtitle,
+			card.badge,
+			...card.meta ?? []
+		].filter((name) => name !== void 0);
+	}
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	return [
 		image,

package/dist/app/displays/record-card.js

@@ -12,8 +12,11 @@ import { Markdown } from "../../markdown/markdown.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { ValueBadge } from "../value-badge.js";
+import { useSeedRecord } from "../record-preview.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";
+import { CardDots, CardDotsRoom } from "../related-dots/card-dots.js";
+import { cardDotsLines } from "../related-dots/card-dots-lines.js";
 import { CardImage } from "./card-image.js";
 import { CardCarousel } from "./card-carousel.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -31,9 +34,9 @@ const MetaValue = ({ icon, children }) => {
 /**
 * A record's card of a cards display, opening its page: its image across the top, swiped or stepped through its photos
 * when the display names them, the title over the subtitle, the badge beside it, the first amount with a value in bold,
-* small meta fields below, those with a value, the labels of its flags that are true and the footer's fields with a
-* value, joined by bullets; or, with a `card` component, what it draws of the row, the built-in content again when it
-* is missing or throws. With a favorite button, a heart in the top right corner saves the record.
+* small meta fields below, those with a value, the labels of its flags that are true, the footer's fields with a
+* value, joined by bullets, and a line of dots for each related column of the list it names; or, with a `card`
+* component, what it draws of the row, the built-in content again when it is missing or throws. With a favorite button, a heart in the top right corner saves the record.
 */
 const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
@@ -46,6 +49,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 		return row.labels[name] ?? displayValue(field, value, view?.fields[name]);
 	};
 	const { fields: fieldTypes, components } = useProjectUi();
+	const seedRecord = useSeedRecord(model);
 	const Card = display.card === void 0 ? void 0 : components?.[display.card];
 	const shownValue = (name) => {
 		const field = model.fields[name];
@@ -99,6 +103,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const footing = filledMeta(row, footer);
 	const pictured = image !== void 0 || photos !== void 0;
 	const favorite = display.favorite;
+	const dots = Card ? [] : cardDotsLines(view, display, row);
 	const builtIn = (picture) => /* @__PURE__ */ jsxs(Fragment, { children: [
 		pictured && picture,
 		/* @__PURE__ */ jsxs("span", {
@@ -147,7 +152,8 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 				"aria-hidden": true,
 				children: " • "
 			}), shownValue(name)] }, name))
-		})
+		}),
+		dots.length > 0 && /* @__PURE__ */ jsx(CardDotsRoom, { dots })
 	] });
 	const card = (picture) => /* @__PURE__ */ jsxs(AppLink, {
 		to: {
@@ -155,6 +161,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			resource: model.name,
 			key: row.key
 		},
+		onClick: () => seedRecord(row.record),
 		className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
 		children: [mark && !pictured && /* @__PURE__ */ jsx(Badge, {
 			tone: "blue",
@@ -167,7 +174,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 		}) : builtIn(picture)]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: photos ? "group/card relative h-full" : favorite || mark ? "relative h-full" : "h-full",
+		className: photos ? "group/card relative h-full" : favorite || mark || dots.length > 0 ? "relative h-full" : "h-full",
 		children: [
 			photos ? /* @__PURE__ */ jsx(CardCarousel, {
 				photos: row.photos ?? [],
@@ -180,6 +187,10 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 				className: "pointer-events-none absolute top-2 left-2 shadow-sm",
 				children: mark
 			}),
+			dots.length > 0 && /* @__PURE__ */ jsx(CardDots, {
+				dots,
+				Card: RecordCard
+			}),
 			favorite && /* @__PURE__ */ jsx(FavoriteButton, {
 				favorite,
 				recordKey: row.key,

package/dist/app/displays/use-board-column.js

@@ -0,0 +1,23 @@
+import { useAdminMeta } from "../meta-gate.js";
+import { columnFilter } from "./board-columns.js";
+import { useLiveRows } from "../../live/use-live-rows.js";
+import { useDisplayRows } from "./use-display-rows.js";
+//#region src/app/displays/use-board-column.ts
+/**
+* The records of one column of a board, page by page through the list API: the list's filter with the column's value
+* added, in the list's order, with how many there are. A change to the resource reloads them, as it does the table.
+*/
+const useBoardColumn = ({ model, by, value, fields, filter, orderBy }) => {
+	const { resources, views } = useAdminMeta();
+	const rows = useLiveRows({
+		resources,
+		views,
+		model,
+		columns: fields,
+		filter: columnFilter(filter, by, value),
+		orderBy
+	});
+	return useDisplayRows(model, rows.page, rows.key, true);
+};
+//#endregion
+export { useBoardColumn };

package/dist/app/displays/use-board-move.js

@@ -0,0 +1,60 @@
+import { useClient } from "../../data/api-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { refusalReason } from "./board-columns.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+//#region src/app/displays/use-board-move.ts
+/**
+* Moving a board's card to another column: one update of the record with the column's value and the ETag it was listed
+* with, as a named update action sends, so the resource's access rules and `validate` decide. The card shows in its new
+* column at once; a refusal puts it back and says why, and either way every list of the resource reloads.
+*/
+const useBoardMove = (model, by) => {
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const [moves, setMoves] = useState([]);
+	const settle = (key) => setMoves((current) => current.filter((move) => move.row.key !== key));
+	const mutation = useMutation({
+		mutationFn: ({ row, to }) => {
+			const etag = typeof row.record.etag === "string" ? row.record.etag : "*";
+			return client.update(model.name, recordKey(model, row.record), { [by]: to.value }, etag);
+		},
+		onMutate: ({ row, to }) => {
+			const moved = {
+				...row,
+				record: {
+					...row.record,
+					[by]: to.value
+				}
+			};
+			setMoves((current) => [...current.filter((move) => move.row.key !== row.key), {
+				row: moved,
+				to: to.value
+			}]);
+		},
+		onError: (error, { row, to }) => {
+			settle(row.key);
+			toast.show({
+				state: "error",
+				title: `Could not move it to ${to.label}`,
+				description: refusalReason(error)
+			});
+		},
+		onSettled: async (_result, _error, { row }) => {
+			await refresh(model.name);
+			settle(row.key);
+		}
+	});
+	return {
+		moves,
+		move: (row, to) => mutation.mutate({
+			row,
+			to
+		})
+	};
+};
+//#endregion
+export { useBoardMove };

package/dist/app/displays/virtual-cards.js

@@ -53,6 +53,7 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		total,
 		rowAt: source.rowAt,
 		loadRows: source.loadRows,
+		revision: source.revision,
 		latencyMs: 0
 	}, range.start, range.end);
 	const [guard] = useState(() => createFlipGuard());

package/dist/app/embedded-list/embedded-list.js

@@ -11,6 +11,7 @@ import { AppLink, useAppAddress } from "../use-app-address.js";
 import { listColumnNames } from "../../live/columns-from-model.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";
+import { BoardDisplay } from "../displays/board-display.js";
 import { CardsDisplay } from "../displays/cards-display.js";
 import { CustomDisplay } from "../displays/custom-display.js";
 import { MapDisplay } from "../displays/map-display.js";
@@ -156,6 +157,14 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			orderBy,
 			fields,
 			footer: false
+		}) : shown.kind === "board" ? /* @__PURE__ */ jsx(BoardDisplay, {
+			model,
+			view,
+			display: shown,
+			fields,
+			filter,
+			orderBy,
+			limit
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,
 			list

package/dist/app/export/export-options.js

@@ -2,7 +2,7 @@ import { columnsFromModel, listColumnNames } from "../../live/columns-from-model
 import { xlsxMaxRows } from "./xlsx.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/export/export-options.ts
-const where = createWhere();
+const where$1 = createWhere();
 /** Whether the view's list offers Export: unless the view takes it away. */
 const exportOffered = (view) => view?.export !== false;
 /**
@@ -42,7 +42,7 @@ const selectionFilters = (model, keys) => {
 	const [keyField] = model.primaryKey;
 	if (!keyField || model.primaryKey.length !== 1) throw new Error("Not implemented: selected rows are exported by a single-field key");
 	const filters = [];
-	for (let start = 0; start < keys.length; start += 500) filters.push(printFilter(where.in(keyField, keys.slice(start, start + 500))));
+	for (let start = 0; start < keys.length; start += 500) filters.push(printFilter(where$1.in(keyField, keys.slice(start, start + 500))));
 	return filters;
 };
 //#endregion

package/dist/app/gallery/use-gallery-photos.js

@@ -5,7 +5,7 @@ import { galleryItems } from "./gallery-items.js";
 import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/gallery/use-gallery-photos.ts
-const where = createWhere();
+const where$1 = createWhere();
 /**
 * A gallery's photos: the record's own image, then the photo records that point at it, read with the list API under
 * the user's own access, so its row filters and readable fields apply. Without the photos' resource in `/meta`, the
@@ -15,7 +15,7 @@ const useGalleryPhotos = (item, record, recordKey) => {
 	const client = useClient();
 	const { resources } = useAdminMeta();
 	const holder = item.photos ? resources[item.photos.resource] : void 0;
-	const filter = item.photos ? printFilter(where.eq(item.photos.field, recordKey)) : "";
+	const filter = item.photos ? printFilter(where$1.eq(item.photos.field, recordKey)) : "";
 	const sort = item.photos?.sort ?? "";
 	const rows = useQuery({
 		queryKey: keys.list(holder?.name ?? "", filter, sort, 500, "gallery"),

package/dist/app/import/lookups.js

@@ -1,6 +1,6 @@
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/import/lookups.ts
-const where = createWhere();
+const where$1 = createWhere();
 const valuesPerRequest = 100;
 /** A value as the lookups compare it: the API answers numbers as numbers and the rest as text. */
 const lookupKey = (value) => String(value);
@@ -23,7 +23,7 @@ const createLookups = (clientFor) => {
 		for (let at = 0; at < missing.length; at += valuesPerRequest) {
 			const asked = missing.slice(at, at + valuesPerRequest);
 			for (const value of asked) found.set(lookupKey(value), []);
-			const filter = printFilter(where.in(field, asked));
+			const filter = printFilter(where$1.in(field, asked));
 			let pageToken;
 			do {
 				const page = await clientFor(model.name).list(model.name, {

package/dist/app/list-edit/cell-field-editor.js

@@ -0,0 +1,61 @@
+import { differs, toFieldDraft, toPatchValue } from "../../live/field-values.js";
+import { FieldEditor } from "../field-editor.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-edit/cell-field-editor.tsx
+/**
+* A field's editor in a list cell, the one the record page uses: Enter, Tab and leaving the cell save a change, and Tab
+* and Shift+Tab go on to the next or previous editable cell; Escape leaves it as it was. A built-in switch or choice
+* saves as soon as it changes.
+*/
+const CellFieldEditor = ({ field, hints, resource, stored, onSave, close }) => {
+	const [draft, setDraft] = useState(() => toFieldDraft(field, stored));
+	const ref = useRef(null);
+	const finished = useRef(false);
+	const instant = !hints?.widget && (field.type === "boolean" || field.type === "enum");
+	useEffect(() => {
+		ref.current?.querySelector("input, select, textarea, button, [tabindex]")?.focus();
+	}, []);
+	const finish = (save, move, value = draft) => {
+		if (finished.current) return;
+		finished.current = true;
+		if (save && differs(field, value, stored)) onSave(toPatchValue(field, value));
+		close(move);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			finish(true);
+		} else if (event.key === "Tab") {
+			event.preventDefault();
+			finish(true, event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			finish(false);
+		}
+	};
+	const onBlur = (event) => {
+		if (!ref.current?.contains(event.relatedTarget)) finish(true);
+	};
+	const onChange = (next) => {
+		setDraft(next);
+		if (instant) finish(true, void 0, next);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "w-full min-w-0",
+		onKeyDown,
+		onBlur,
+		children: /* @__PURE__ */ jsx(FieldEditor, {
+			field,
+			hints,
+			value: draft,
+			stored,
+			resource,
+			onChange
+		})
+	});
+};
+//#endregion
+export { CellFieldEditor };

package/dist/app/list-edit/use-list-cell-editor.js

@@ -0,0 +1,30 @@
+import { isEditable } from "../../live/field-values.js";
+import { can, rowAllows } from "../permissions.js";
+import { CellFieldEditor } from "./cell-field-editor.js";
+import { useListEdits } from "./use-list-edits.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-edit/use-list-cell-editor.tsx
+/**
+* The list's cells edited in place: the view's `editable` columns, which `/meta` keeps to the fields the caller may
+* write, of the rows the caller may change. `patches` are the values saved since the rows loaded, for the grid to show.
+*/
+const useListCellEditor = (model, view, permissions) => {
+	const edits = useListEdits(model);
+	const columns = view?.list?.editable ?? [];
+	return {
+		editor: columns.length > 0 && can(permissions, "update") ? {
+			editable: (row, column) => columns.includes(column) && model.fields[column] !== void 0 && isEditable(model.fields[column]) && rowAllows(row, "update"),
+			render: (row, column, close) => /* @__PURE__ */ jsx(CellFieldEditor, {
+				field: model.fields[column],
+				hints: view?.fields[column],
+				resource: model.name,
+				stored: row[column],
+				onSave: (value) => void edits.save(row, column, value),
+				close
+			})
+		} : void 0,
+		patches: edits.patches
+	};
+};
+//#endregion
+export { useListCellEditor };

package/dist/app/list-edit/use-list-edits.js

@@ -0,0 +1,75 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useRef, useState } from "react";
+import { isApiError } from "@protobase/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/list-edit/use-list-edits.ts
+/**
+* The list's edits in place: `patches` holds, by row id, the values saving or saved since the rows loaded, with the
+* ETag each saved row has now. `save` sends one field as a PATCH with the row's ETag, after any save of the same row
+* still under way. A refusal puts the old value back, or the record's current one when someone else changed it, and
+* says why in a toast.
+*/
+const useListEdits = (model) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const toast = useToast();
+	const [patches, setPatches] = useState(/* @__PURE__ */ new Map());
+	const current = useRef(patches);
+	const queues = useRef(/* @__PURE__ */ new Map());
+	const patch = (id, values) => {
+		current.current = new Map(current.current).set(id, {
+			...current.current.get(id),
+			...values
+		});
+		setPatches(current.current);
+	};
+	const send = async (row, name, value) => {
+		const key = recordKey(model, row);
+		const etag = String(current.current.get(row.id)?.etag ?? row.etag);
+		try {
+			const stored = await client.update(model.name, key, { [name]: value }, etag);
+			patch(row.id, {
+				[name]: stored.record[name],
+				etag: stored.etag
+			});
+			queryClient.setQueryData(keys.record(model.name, encodeKey(key)), stored);
+			queryClient.invalidateQueries({ queryKey: ["page", model.name] });
+			queryClient.invalidateQueries({ queryKey: ["list", model.name] });
+			queryClient.invalidateQueries({ queryKey: ["map", model.name] });
+		} catch (error) {
+			if (!isApiError(error)) {
+				patch(row.id, { [name]: row[name] });
+				throw error;
+			}
+			const changed = error.status === 412;
+			const latest = changed ? await client.get(model.name, key) : void 0;
+			patch(row.id, latest ? {
+				[name]: latest.record[name],
+				etag: latest.etag
+			} : { [name]: row[name] });
+			const reason = error.errors.find((entry) => entry.field === name)?.message ?? error.message;
+			toast.show({
+				state: "error",
+				title: changed ? "Changed by someone else" : "Could not save",
+				description: reason
+			});
+		}
+	};
+	/** Saves `value` as the field `name` of `row`, as the grid shows it before the edit. */
+	const save = (row, name, value) => {
+		patch(row.id, { [name]: value });
+		const queued = (queues.current.get(row.id) ?? Promise.resolve()).then(() => send(row, name, value));
+		queues.current.set(row.id, queued.catch(() => void 0));
+		return queued;
+	};
+	return {
+		patches,
+		save
+	};
+};
+//#endregion
+export { useListEdits };

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 };