@protobase/ui 0.23.14 → 0.24.1

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

@@ -28,18 +28,20 @@ const placeOver = (over, row) => {
 	};
 };
 /**
-* 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. When the
-* resource has a position, its records ordered as one, the columns are in its order and a card is dropped at a place:
-* the up and down arrow keys move it within its column, and the drop renumbers the cards before it.
+* A column per value of the board's enum field, each loading its own records through the list API, with their count.
+* When the list's `drag.board` is on, a card dragged, or moved with the keyboard, to another column saves the record
+* with that column's value. When the resource has a position, its records ordered as one, the columns are in its order,
+* and when `drag.rank` is on a card is dropped at a place: the up and down arrow keys move it within its column, and
+* the drop renumbers the cards before it. Each change says so with **Undo**.
 */
 const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit }) => {
 	const columns = columnsAllowed(filter, display.by, 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 drag = view?.list?.drag;
+	const movable = drag?.board === true && can(permissions, "update") && !model.fields[display.by]?.readOnly;
 	const rank = boardRank(model);
-	const placeable = rank !== void 0 && listHandOrder(model, permissions) !== void 0;
+	const placeable = drag?.rank === true && rank !== void 0 && listHandOrder(model, permissions) !== void 0;
 	const columnOrder = rank ? `${rank} asc` : orderBy;
 	const { moves, move } = useBoardMove(model, display.by, rank);
 	const [active, setActive] = useState();
@@ -115,7 +117,7 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		},
 		accessibility: {
 			announcements,
-			screenReaderInstructions: { draggable: placeable ? "To move a card, press Space, move it with the up and down arrow keys within its column and the left and right arrow keys to another column, and press Space again to drop it there. Escape puts it back." : "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." }
+			screenReaderInstructions: { draggable: !placeable ? "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." : movable ? "To move a card, press Space, move it with the up and down arrow keys within its column and the left and right arrow keys to another column, and press Space again to drop it there. Escape puts it back." : "To move a card, press Space, move it with the up and down arrow keys within its column, and press Space again to drop it there. Escape puts it back." }
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative min-w-0 flex-1 overflow-x-auto",

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

@@ -44,5 +44,27 @@ const placeOps = (model, by, rank, row, column, order, first, last) => {
 		etag: etagOf(row)
 	}, reorder];
 };
+/**
+* What the batch of a drop saved: each record it wrote, as it stored it last, with its values in `rows`, the column's
+* cards as listed before the drop, so the drop can be undone.
+*/
+const boardWrites = (model, rows, result) => {
+	const before = new Map(rows.map((row) => [encodeKey(recordKey(model, row.record)), row.record]));
+	const stored = /* @__PURE__ */ new Map();
+	for (const entry of result.results) {
+		const written = entry.op === "reorder" ? entry.records : entry.op === "update" ? [entry] : [];
+		for (const { record, etag } of written) stored.set(encodeKey(recordKey(model, record)), {
+			record,
+			etag
+		});
+	}
+	return [...stored].flatMap(([key, written]) => {
+		const was = before.get(key);
+		return was ? [{
+			before: was,
+			...written
+		}] : [];
+	});
+};
 //#endregion
-export { placeOps, placedRows };
+export { boardWrites, placeOps, placedRows };

package/dist/app/displays/messages.js

@@ -6,14 +6,22 @@ const text = defineMessages({
 		display: "Display",
 		sort: "Sort",
 		ascending: "ascending",
-		descending: "descending"
+		descending: "descending",
+		movedTo: (column) => `Moved to ${column}`,
+		orderChanged: "Order changed",
+		undo: "Undo",
+		couldNotUndo: "Could not undo"
 	},
 	nl: {
 		table: "Tabel",
 		display: "Weergave",
 		sort: "Sorteren",
 		ascending: "oplopend",
-		descending: "aflopend"
+		descending: "aflopend",
+		movedTo: (column) => `Verplaatst naar ${column}`,
+		orderChanged: "Volgorde gewijzigd",
+		undo: "Ongedaan maken",
+		couldNotUndo: "Kon niet ongedaan maken"
 	}
 });
 //#endregion

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

@@ -2,30 +2,48 @@ import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { refusalReason } from "./board-columns.js";
+import { text } from "./messages.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
-import { placeOps } from "./board-place.js";
-import { useState } from "react";
+import { boardWrites, placeOps } from "./board-place.js";
+import { undoOps } from "../hand-order/undo-ops.js";
+import { useRef, 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. On a ranked board a drop
 * at a place is one batch instead, that update when the column changes and a `reorder` by `rank` of the column's cards.
-* The card shows in its new place at once; a refusal puts it back and says why, and either way every list of the
-* resource reloads.
+* The card shows in its new place at once; a saved move says so with **Undo**, which puts back the values it changed,
+* and a refusal puts it back and says why. Either way every list of the resource reloads.
 */
 const useBoardMove = (model, by, rank) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
 	const [moves, setMoves] = useState([]);
+	const undoToast = useRef(void 0);
 	const settle = (key) => setMoves((current) => current.filter((move) => move.row.key !== key));
+	const fields = rank ? [by, rank] : [by];
+	const undo = useMutation({
+		mutationFn: (writes) => client.batchWrite(undoOps(model, writes, fields)),
+		onError: (error) => toast.show({
+			state: "error",
+			title: text("couldNotUndo"),
+			description: refusalReason(error)
+		}),
+		onSettled: () => refresh(model.name)
+	});
 	const mutation = useMutation({
 		mutationFn: async ({ row, to, place }) => {
 			if (place && !rank) throw new Error("A board places a card only by its rank");
-			if (place) return client.batchWrite(placeOps(model, by, rank, row, to, place.order, place.first, place.last));
+			if (place) return boardWrites(model, place.order, await client.batchWrite(placeOps(model, by, rank, row, to, place.order, place.first, place.last)));
 			const etag = typeof row.record.etag === "string" ? row.record.etag : "*";
-			return client.update(model.name, recordKey(model, row.record), { [by]: to.value }, etag);
+			const stored = await client.update(model.name, recordKey(model, row.record), { [by]: to.value }, etag);
+			return [{
+				before: row.record,
+				record: stored.record,
+				etag: stored.etag
+			}];
 		},
 		onMutate: ({ row, to, place }) => {
 			const moved = {
@@ -42,6 +60,23 @@ const useBoardMove = (model, by, rank) => {
 				...order && { order }
 			}]);
 		},
+		onSuccess: (writes, { row, to }) => {
+			if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
+			const title = (row.record[by] ?? null) === to.value ? text("orderChanged") : text("movedTo", to.label);
+			const id = toast.show({
+				state: "success",
+				title,
+				action: {
+					label: text("undo"),
+					onClick: () => {
+						toast.dismiss(id);
+						undoToast.current = void 0;
+						undo.mutate(writes);
+					}
+				}
+			});
+			undoToast.current = id;
+		},
 		onError: (error, { row, to }) => {
 			settle(row.key);
 			const title = (row.record[by] ?? null) === to.value ? "Could not change the order" : `Could not move it to ${to.label}`;

package/dist/app/hand-order/drop-rule.d.ts

@@ -0,0 +1,13 @@
+//#region src/app/hand-order/drop-rule.d.ts
+/** A record dropped while re-ranking: the records as the API gives them, in the order the drop leaves them, and its place among them, 0 the first. */
+export type Drop = {
+  record: Record<string, unknown>;
+  order: Record<string, unknown>[];
+  index: number;
+};
+/**
+ * Where a re-ranked record may land, a view's `drag.rule`: why `drop.record` may not be at `drop.index`, in the app's own
+ * words, or nothing when it may.
+ */
+export type DropRule = (drop: Drop) => string | undefined;
+//#endregion

package/dist/app/hand-order/drop-rule.js

@@ -0,0 +1,28 @@
+import { arrayMove } from "@dnd-kit/sortable";
+//#region src/app/hand-order/drop-rule.ts
+/**
+* Where the record at `from` of `records` lands when dropped at `to`: there when `rule` allows it, else at the first
+* place below that it allows, with the reason it refused `to`. With none below, it stays at `from`, with that reason.
+*/
+const allowedDrop = (records, from, to, rule) => {
+	const record = records[from];
+	let reason;
+	for (let index = to; index < records.length; index++) {
+		const refused = rule({
+			record,
+			order: arrayMove(records, from, index),
+			index
+		});
+		if (refused === void 0) return {
+			to: index,
+			...reason !== void 0 && { reason }
+		};
+		reason ??= refused;
+	}
+	return {
+		to: from,
+		reason
+	};
+};
+//#endregion
+export { allowedDrop };

package/dist/app/hand-order/hand-order.js

@@ -1,3 +1,4 @@
+import { parseSort } from "../list-order.js";
 import { can } from "../permissions.js";
 //#region src/app/hand-order/hand-order.ts
 /** The field a user may sort `model`'s records by hand in: its `position`, when they may update it. */
@@ -17,5 +18,14 @@ const listHandOrder = (model, permissions) => model.position?.within === void 0
 * whose `within` relation points at the page's record, no filter or join resource leaving some out.
 */
 const relatedHandOrder = (item, model, permissions) => model.position?.within !== void 0 && item.field === model.position.within && !item.through && !item.from && !item.filter ? writablePosition(model, permissions) : void 0;
+/**
+* Whether the list page's table moves its rows by dragging at any time, without **Reorder**: its list turns
+* `drag.rank` on, and it shows every record in the order of `field`, from `listHandOrder`, without a filter or search.
+*/
+const dragsRank = (view, field, orderBy, filter) => {
+	if (field === void 0 || view?.list?.drag?.rank !== true || filter !== "") return false;
+	const sort = parseSort(orderBy);
+	return sort.columnId === field && sort.direction === "asc";
+};
 //#endregion
-export { listHandOrder, relatedHandOrder };
+export { dragsRank, listHandOrder, relatedHandOrder };

package/dist/app/hand-order/hand-sorted-list.js

@@ -1,4 +1,5 @@
 import { Skeleton } from "../../primitives/skeleton.js";
+import { Problem } from "../pages/problem.js";
 import { recordKey, recordTitle } from "../../live/model-helpers.js";
 import { loadedFields } from "../displays/list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
@@ -10,48 +11,58 @@ import { embeddedColumns } from "../embedded-list/embedded-columns.js";
 import { text } from "./messages.js";
 import { useHandOrder } from "./use-hand-order.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/hand-order/hand-sorted-list.tsx
 /**
 * The records in their order by hand, in the list's table with a drag handle in each row's checkbox place: dragging a
-* row, or moving it with the keyboard from its handle, renumbers them all. The page scrolls them, and a row still opens
-* its record.
+* row, or moving it with the keyboard from its handle, renumbers them all, landing where the list's `drag.rule` allows.
+* The page scrolls them, and a row still opens its record.
 */
-const HandSortedList = ({ model, view, field, filter, columns }) => {
+const HandSortedList = ({ model, view, field, filter, columns, sort }) => {
 	const { resources, views } = useAdminMeta();
-	const { fields: fieldTypes } = useProjectUi();
+	const { fields: fieldTypes, dropRules } = useProjectUi();
 	const { go, href } = useAppAddress();
+	const sorts = sort !== void 0;
 	const specs = useMemo(() => embeddedColumns(model, view, columns, {
 		resources,
 		views,
 		fieldTypes
-	}).map((spec) => ({
+	}).map((spec) => sorts ? spec : {
 		...spec,
 		sortable: false
-	})), [
+	}), [
 		model,
 		view,
 		columns.join(","),
 		resources,
 		views,
-		fieldTypes
+		fieldTypes,
+		sorts
 	]);
 	const fields = useMemo(() => loadedFields(model, view, specs.map((spec) => spec.id)), [
 		model,
 		view,
 		specs
 	]);
+	const ruleName = view?.list?.drag?.rule;
+	const rule = ruleName === void 0 ? void 0 : dropRules?.[ruleName];
 	const order = useHandOrder({
 		model,
 		field,
 		filter,
-		fields
+		fields,
+		...rule && { rule }
 	});
 	const rows = order.rows;
 	const source = useMemo(() => rows && {
 		total: rows.length,
 		rowAt: (index) => rows[index]
 	}, [rows]);
+	if (ruleName !== void 0 && !rule) return /* @__PURE__ */ jsxs(Problem, { children: [
+		"No drop rule is registered as ",
+		ruleName,
+		". Give it in dropRules in protobase.ui.tsx, or load the plugin that provides it."
+	] });
 	if (order.loading) return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-2",
 		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
@@ -85,6 +96,10 @@ const HandSortedList = ({ model, view, field, filter, columns }) => {
 		latencyMs: 0,
 		onOpenRow: openRecord,
 		rowLink: recordLink,
+		...sort && {
+			sort: sort.value,
+			onSortChange: sort.onChange
+		},
 		rowNumbers: false,
 		reorder: {
 			label: (row) => recordTitle(model, view, row, row.id),

package/dist/app/hand-order/messages.js

@@ -6,14 +6,24 @@ const text = defineMessages({
 		reorder: "Reorder",
 		couldNotLoad: "Could not load",
 		nothingYet: "Nothing here yet.",
-		couldNotChange: "Could not change the order"
+		couldNotChange: "Could not change the order",
+		orderChanged: "Order changed",
+		undo: "Undo",
+		couldNotUndo: "Could not undo",
+		movedToPlace: (place) => `Moved to place ${place}`,
+		notMoved: "Left in its place"
 	},
 	nl: {
 		done: "Klaar",
 		reorder: "Volgorde wijzigen",
 		couldNotLoad: "Kon niet laden",
 		nothingYet: "Hier staat nog niets.",
-		couldNotChange: "Kon de volgorde niet wijzigen"
+		couldNotChange: "Kon de volgorde niet wijzigen",
+		orderChanged: "Volgorde gewijzigd",
+		undo: "Ongedaan maken",
+		couldNotUndo: "Kon niet ongedaan maken",
+		movedToPlace: (place) => `Verplaatst naar plaats ${place}`,
+		notMoved: "Op zijn plaats gelaten"
 	}
 });
 //#endregion

package/dist/app/hand-order/undo-ops.js

@@ -0,0 +1,19 @@
+import { recordKey } from "../../live/model-helpers.js";
+//#region src/app/hand-order/undo-ops.ts
+/**
+* The batch that undoes a drag: an update of each record it saved putting back those of `fields` it changed, with the
+* ETag the save gave it, so a record changed again since is refused rather than overwritten.
+*/
+const undoOps = (model, writes, fields) => writes.flatMap(({ before, record, etag }) => {
+	const changed = fields.filter((field) => Object.hasOwn(before, field) && before[field] !== record[field]);
+	if (changed.length === 0) return [];
+	return [{
+		op: "update",
+		resource: model.name,
+		key: recordKey(model, record),
+		data: Object.fromEntries(changed.map((field) => [field, before[field]])),
+		etag
+	}];
+});
+//#endregion
+export { undoOps };

package/dist/app/hand-order/use-hand-order.js

@@ -3,10 +3,13 @@ import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { recordId, recordKey } from "../../live/model-helpers.js";
 import { refusalReason } from "../displays/board-columns.js";
+import { displayRow } from "../displays/list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
 import { reorderSpan } from "./reorder-span.js";
+import { undoOps } from "./undo-ops.js";
+import { allowedDrop } from "./drop-rule.js";
 import { text } from "./messages.js";
 import { useRef, useState } from "react";
 import { encodeKey } from "@protobase/schema/internal";
@@ -17,9 +20,11 @@ import { arrayMove } from "@dnd-kit/sortable";
 * The records of `filter` in the order of `field`, all of them, a page of `handOrderPage` at a time, and `move` to put
 * one elsewhere. A move shows at once and saves only the records whose place changed (see `reorderSpan`) in one batch
 * `reorder` with their ETags; moves made while one saves are saved after it, with the values and ETags it gave back.
-* A refusal puts them back as the server has them and says why; either way every list of the resource reloads.
+* Each save says so with **Undo**, which puts back the values it changed. A refusal puts them back as the server has
+* them and says why; either way every list of the resource reloads. A drop `rule` refuses moves to the first place below
+* that it allows, with a warning giving its reason.
 */
-const useHandOrder = ({ model, field, filter, fields }) => {
+const useHandOrder = ({ model, field, filter, fields, rule }) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
@@ -53,6 +58,7 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 	const pending = useRef(void 0);
 	const saving = useRef(Promise.resolve());
 	const waiting = useRef(0);
+	const undoToast = useRef(void 0);
 	const save = async () => {
 		const rows = latest.current;
 		const changed = pending.current;
@@ -69,7 +75,22 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 			start: span.start,
 			etags
 		}])).results[0];
-		if (written?.op !== "reorder" || !latest.current) return;
+		if (written?.op !== "reorder") return;
+		const before = new Map(sent.map((row) => [row.id, { [field]: row[field] }]));
+		const undo = undoOps(model, written.records.map((entry) => ({
+			...entry,
+			before: before.get(recordId(model, entry.record)) ?? {}
+		})), [field]);
+		if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
+		undoToast.current = toast.show({
+			state: "success",
+			title: text("orderChanged"),
+			action: {
+				label: text("undo"),
+				onClick: () => undoSave(undo)
+			}
+		});
+		if (!latest.current) return;
 		const stored = new Map(written.records.map((entry) => [recordId(model, entry.record), entry]));
 		latest.current = latest.current.map((row) => {
 			const entry = stored.get(row.id);
@@ -80,13 +101,13 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 			} : row;
 		});
 	};
-	const refused = (error) => {
+	const refused = (title) => (error) => {
 		latest.current = void 0;
 		pending.current = void 0;
 		setMoved(void 0);
 		toast.show({
 			state: "error",
-			title: text("couldNotChange"),
+			title,
 			description: refusalReason(error)
 		});
 	};
@@ -98,9 +119,11 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		latest.current = void 0;
 		setMoved(void 0);
 	};
-	const move = (from, to) => {
+	const move = (from, dropped) => {
 		const rows = latest.current ?? loaded.data;
-		if (!rows || from === to) return;
+		if (!rows || from === dropped) return;
+		const to = rule ? placeAllowed(rows, from, dropped, rule) : dropped;
+		if (from === to) return;
 		latest.current = arrayMove(rows, from, to);
 		const first = Math.min(from, to);
 		const last = Math.max(from, to);
@@ -113,7 +136,27 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		};
 		setMoved(latest.current);
 		waiting.current += 1;
-		saving.current = saving.current.then(save).catch(refused).then(settle);
+		saving.current = saving.current.then(save).catch(refused(text("couldNotChange"))).then(settle);
+	};
+	const placeAllowed = (rows, from, dropped, rule) => {
+		const allowed = allowedDrop(rows.map((row) => displayRow(model, row).record), from, dropped, rule);
+		if (allowed.reason !== void 0) toast.show({
+			state: "warning",
+			title: allowed.to === from ? text("notMoved") : text("movedToPlace", allowed.to + 1),
+			description: allowed.reason
+		});
+		return allowed.to;
+	};
+	const undoSave = (ops) => {
+		if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
+		undoToast.current = void 0;
+		waiting.current += 1;
+		saving.current = saving.current.then(async () => {
+			await client.batchWrite(ops);
+			latest.current = void 0;
+			pending.current = void 0;
+			setMoved(void 0);
+		}).catch(refused(text("couldNotUndo"))).then(settle);
 	};
 	return {
 		rows: moved ?? loaded.data,

package/dist/app/list-page.js

@@ -31,7 +31,7 @@ import { facetNames, filterChips } from "./searches/saved-search.js";
 import { useSeedRecord } from "./record-preview.js";
 import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { relatedColumnLoads } from "./related-dots/dot-card.js";
-import { listHandOrder } from "./hand-order/hand-order.js";
+import { dragsRank, listHandOrder } from "./hand-order/hand-order.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
 import { BoardDisplay } from "./displays/board-display.js";
 import { CalendarDisplay } from "./displays/calendar-display.js";
@@ -176,6 +176,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const handOrder = scope ? void 0 : listHandOrder(model, permissions);
 	const [sorting, setSorting] = useState(false);
 	const handSorting = sorting && handOrder !== void 0;
+	const dragging = !display && !handSorting && dragsRank(view, handOrder, orderBy, loadFilter);
 	const pageScroll = handSorting || display?.kind !== "map";
 	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
@@ -316,7 +317,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		},
 		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && text$1("export")]
 	});
-	const sortButton = handOrder && /* @__PURE__ */ jsx(ReorderButton, {
+	const sortButton = handOrder && !dragging && /* @__PURE__ */ jsx(ReorderButton, {
 		sorting: handSorting,
 		onChange: setSorting,
 		iconOnly: !desktop
@@ -397,6 +398,17 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		create: createButton
 	});
 	const drawDisplay = () => {
+		if (dragging) return /* @__PURE__ */ jsx(HandSortedList, {
+			model,
+			view,
+			field: handOrder,
+			filter: "",
+			columns: listColumnNames(model, view),
+			sort: {
+				value: parseSort(orderBy),
+				onChange: (sort) => set({ orderBy: sortToOrderBy(sort) })
+			}
+		});
 		if (!display) return rows.source?.total === 0 && !rows.error ? empty : table;
 		if (display.kind === "cards") return /* @__PURE__ */ jsx(ListCards, {
 			model,

package/dist/app/pages/merge-ui.d.ts

@@ -2,7 +2,7 @@ import { ProjectUi } from "./project-ui.js";
 //#region src/app/pages/merge-ui.d.ts
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
- * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
+ * handlers, field types and drop rules are all kept, and one name defined by two configs is an error naming both; every shell slot
  * and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;

package/dist/app/pages/merge-ui.js

@@ -35,7 +35,7 @@ const around = (wrappers) => {
 };
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
-* handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
+* handlers, field types and drop rules are all kept, and one name defined by two configs is an error naming both; every shell slot
 * and `beforeSignIn` component is drawn, the extended configs' first, except the logo, the last config's to set one.
 */
 const mergeUi = (...uis) => {
@@ -43,6 +43,7 @@ const mergeUi = (...uis) => {
 	const components = union("The component", named, (ui) => ui.components);
 	const actions = union("The action handler", named, (ui) => ui.actions);
 	const fields = union("The field type", named, (ui) => ui.fields);
+	const dropRules = union("The drop rule", named, (ui) => ui.dropRules);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
 	const logo = named.findLast(({ ui }) => ui.shell?.logo)?.ui.shell?.logo;
@@ -53,6 +54,7 @@ const mergeUi = (...uis) => {
 		components,
 		actions,
 		...Object.keys(fields).length > 0 && { fields },
+		...Object.keys(dropRules).length > 0 && { dropRules },
 		...(actionSlot || rightPanel || logo) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel },

package/dist/app/pages/project-ui.d.ts

@@ -1,5 +1,6 @@
 import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
+import { DropRule } from "../hand-order/drop-rule.js";
 import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
@@ -43,9 +44,9 @@ export type BeforeSignInProps = {
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
- * field types by the name a view's `.widget(name)` chooses, and the shell's slots. `extends` lists UI configs merged in
- * before it (see `mergeUi`), or whole `protobase.ui.tsx` modules (`import * as tasksUi from '...'`), their exported
- * components included; `name` names it in their errors.
+ * field types by the name a view's `.widget(name)` chooses, drop rules by the name a list's `drag.rule` gives, and the
+ * shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
+ * (`import * as tasksUi from '...'`), their exported components included; `name` names it in their errors.
  */
 export type ProjectUi = {
   name?: string;
@@ -54,6 +55,8 @@ export type ProjectUi = {
   actions?: Record<string, ActionHandler>;
   /** Field types by name, each with the storage types it shows and its components (see `FieldWidget`). */
   fields?: Record<string, FieldWidget>;
+  /** Where re-ranked records may land, by the name a view's `drag.rule` gives (see `DropRule`). */
+  dropRules?: Record<string, DropRule>;
   /**
    * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, and `logo`
    * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`).

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
+import { Drop, DropRule } from "./app/hand-order/drop-rule.js";
 import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
@@ -61,4 +62,4 @@ import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { RecordPicker, RecordPickerProps } from "./app/record-picker.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, Button, type ButtonProps, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/package.js

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