@protobase/ui 0.24.0 → 0.25.0

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

@@ -1,11 +1,14 @@
+import { Problem } from "../pages/problem.js";
 import { boardCard, boardColumns, boardRank } from "./board-columns.js";
 import { usePermissions } from "../meta-gate.js";
+import { useProjectUi } from "../pages/project-ui.js";
 import { can } from "../permissions.js";
 import { RecordCard } from "./record-card.js";
 import { listHandOrder } from "../hand-order/hand-order.js";
 import { cardCoordinates, collision, columnId } from "./board-dnd.js";
 import { BoardColumnView } from "./board-column.js";
 import { columnsAllowed } from "./board-allowed.js";
+import { dropWrite } from "./board-drop.js";
 import { placedRows } from "./board-place.js";
 import { useBoardMove } from "./use-board-move.js";
 import { useRef, useState } from "react";
@@ -30,20 +33,33 @@ 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.
 * 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,
+* with that column's value; when it names a board drop of the UI config, only between the columns it names, each
+* running its own write. 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 every = boardColumns(model, view, display);
+	const columns = columnsAllowed(filter, display.by, every);
 	const card = boardCard(model, view, display);
 	const permissions = usePermissions(model.name);
+	const { boardDrops } = useProjectUi();
 	const drag = view?.list?.drag;
-	const movable = drag?.board === true && can(permissions, "update") && !model.fields[display.by]?.readOnly;
+	const dropName = typeof drag?.board === "string" ? drag.board : void 0;
+	const drop = dropName === void 0 ? void 0 : boardDrops?.[dropName];
+	const takes = (value) => can(permissions, "update") && (drag?.board === true ? !model.fields[display.by]?.readOnly : drop !== void 0 && dropWrite(drop, value) !== void 0);
+	const movable = columns.some((column) => takes(column.value));
 	const rank = boardRank(model);
 	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 labelOf = (value) => every.find((column) => column.value === value)?.label ?? String(value);
+	const { moves, move } = useBoardMove({
+		model,
+		by: display.by,
+		rank,
+		drop,
+		labelOf
+	});
 	const [active, setActive] = useState();
 	const dragged = useRef(false);
 	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
@@ -57,9 +73,15 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		},
 		coordinateGetter: cardCoordinates
 	}));
+	if (dropName !== void 0 && !drop) return /* @__PURE__ */ jsxs(Problem, { children: [
+		"No board drop is registered as ",
+		dropName,
+		". Give it in boardDrops in protobase.ui.tsx, or load the plugin that provides it."
+	] });
 	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 crosses = (row, to) => takes(valueOf(row)) && takes(to.value);
 	const announced = (row, over) => {
 		if (!over) return { over: "no column" };
 		const place = placeable ? placeOver(over, row) : void 0;
@@ -70,12 +92,16 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 			place: `${place.column.label}, place ${place.index + 1}`
 		};
 	};
+	const refused = (row, over) => {
+		const target = (placeable ? placeOver(over, row)?.column : void 0) ?? columnOf(over.id);
+		return target !== void 0 && target.value !== valueOf(row) && !crosses(row, target);
+	};
 	const announcements = {
 		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current.row)}.`,
 		onDragOver: ({ active: picked, over }) => `${title(picked.data.current.row)} is over ${announced(picked.data.current.row, over).over}.`,
 		onDragEnd: ({ active: picked, over }) => {
 			const row = picked.data.current.row;
-			if (!over) return `${title(row)} was put back.`;
+			if (!over || refused(row, over)) return `${title(row)} was put back.`;
 			const said = announced(row, over);
 			return `${title(row)} was moved to ${said.place ?? said.over}.`;
 		},
@@ -93,11 +119,12 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		const place = placeable ? placeOver(over, row) : void 0;
 		if (!place) {
 			const target = columnOf(over.id);
-			if (target && target.value !== valueOf(row) && movable) move(row, target);
+			if (target && target.value !== valueOf(row) && crosses(row, target)) move(row, target);
 			return;
 		}
 		const from = place.rows.findIndex((entry) => entry.key === row.key);
-		if (from === -1 && !movable) return;
+		if (from === -1 && !crosses(row, place.column)) return;
+		if (from === -1 && drop) return move(row, place.column);
 		if (from === place.index) return;
 		const order = placedRows(place.rows, row, place.index);
 		move(row, place.column, {
@@ -133,7 +160,7 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 					orderBy: columnOrder,
 					limit,
 					moves,
-					movable,
+					movable: takes(column.value),
 					placeable,
 					dragged: () => dragged.current
 				}, columnId(column.value)))

package/dist/app/displays/board-drop.d.ts

@@ -0,0 +1,26 @@
+import { Client } from "@protobase/client";
+import { KeyValue } from "@protobase/schema";
+//#region src/app/displays/board-drop.d.ts
+/** What a board drop's write gets: the card's record as listed, its key and ETag, the column it was dropped on, and the API. */
+export type BoardDropContext = {
+  resource: string;
+  record: Record<string, unknown>;
+  /** The record's key as the API takes it. */
+  recordKey: KeyValue | readonly KeyValue[];
+  etag: string;
+  /** The value of the column the card was dropped on. */
+  to: string;
+  client: Client;
+};
+/** What undoes a board drop's write, such as deleting the record it created. */
+export type BoardDropUndo = () => Promise<void>;
+/** A board drop's write for one column: what it saves in place of the record's `by`, and what undoes it, when it can be undone. */
+export type BoardDropWrite = (context: BoardDropContext) => Promise<BoardDropUndo | void>;
+/**
+ * How cards move between a board's columns, a view's `drag.board` naming it: by the value of each column that takes a
+ * card, what a drop there writes, such as creating a record of a related resource when `by` is computed from them. A
+ * card in or dropped on any other column stays in its column, as does one dropped on the column of records without a
+ * value.
+ */
+export type BoardDrop = Record<string, BoardDropWrite>;
+//#endregion

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

@@ -0,0 +1,5 @@
+//#region src/app/displays/board-drop.ts
+/** The write a drop on the column of `value` performs, if that column takes cards. */
+const dropWrite = (drop, value) => value !== null && Object.hasOwn(drop, value) ? drop[value] : void 0;
+//#endregion
+export { dropWrite };

package/dist/app/displays/messages.js

@@ -9,6 +9,7 @@ const text = defineMessages({
 		descending: "descending",
 		movedTo: (column) => `Moved to ${column}`,
 		orderChanged: "Order changed",
+		stayedIn: (column) => `Saved, still in ${column}`,
 		undo: "Undo",
 		couldNotUndo: "Could not undo"
 	},
@@ -20,6 +21,7 @@ const text = defineMessages({
 		descending: "aflopend",
 		movedTo: (column) => `Verplaatst naar ${column}`,
 		orderChanged: "Volgorde gewijzigd",
+		stayedIn: (column) => `Opgeslagen, nog in ${column}`,
 		undo: "Ongedaan maken",
 		couldNotUndo: "Kon niet ongedaan maken"
 	}

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

@@ -4,6 +4,7 @@ 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 { dropWrite } from "./board-drop.js";
 import { boardWrites, placeOps } from "./board-place.js";
 import { undoOps } from "../hand-order/undo-ops.js";
 import { useRef, useState } from "react";
@@ -13,10 +14,12 @@ import { useMutation } from "@tanstack/react-query";
 * 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 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.
+* With the board's `drop`, a card dropped on another column runs that column's write instead, and then reads the record
+* again to say which column it is in now. The card shows in its new place at once; a saved move says so with **Undo**,
+* which puts back the values it changed or runs the undo the drop's write gave, and a refusal puts it back and says why.
+* Either way every list of the resource reloads, which puts the card where its record now is.
 */
-const useBoardMove = (model, by, rank) => {
+const useBoardMove = ({ model, by, rank, drop, labelOf }) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
@@ -25,7 +28,7 @@ const useBoardMove = (model, by, rank) => {
 	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)),
+		mutationFn: (undoing) => undoing(),
 		onError: (error) => toast.show({
 			state: "error",
 			title: text("couldNotUndo"),
@@ -33,17 +36,41 @@ const useBoardMove = (model, by, rank) => {
 		}),
 		onSettled: () => refresh(model.name)
 	});
+	const dropped = async (row, to) => {
+		const write = drop && dropWrite(drop, to.value);
+		if (!write) throw new Error(`The column ${to.label} takes no cards`);
+		const key = recordKey(model, row.record);
+		const etag = typeof row.record.etag === "string" ? row.record.etag : "*";
+		const undoing = await write({
+			resource: model.name,
+			record: row.record,
+			recordKey: key,
+			etag,
+			to: to.value,
+			client
+		});
+		return {
+			landed: (await client.get(model.name, key)).record[by] ?? null,
+			...undoing && { undo: undoing }
+		};
+	};
+	const saved = (writes, to) => ({
+		landed: to.value,
+		undo: () => client.batchWrite(undoOps(model, writes, fields))
+	});
 	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 boardWrites(model, place.order, await client.batchWrite(placeOps(model, by, rank, row, to, place.order, place.first, place.last)));
+			const from = row.record[by] ?? null;
+			if (drop && to.value !== from) return dropped(row, to);
+			if (place) return saved(boardWrites(model, place.order, await client.batchWrite(placeOps(model, by, rank, row, to, place.order, place.first, place.last))), to);
 			const etag = typeof row.record.etag === "string" ? row.record.etag : "*";
 			const stored = await client.update(model.name, recordKey(model, row.record), { [by]: to.value }, etag);
-			return [{
+			return saved([{
 				before: row.record,
 				record: stored.record,
 				etag: stored.etag
-			}];
+			}], to);
 		},
 		onMutate: ({ row, to, place }) => {
 			const moved = {
@@ -60,9 +87,18 @@ const useBoardMove = (model, by, rank) => {
 				...order && { order }
 			}]);
 		},
-		onSuccess: (writes, { row, to }) => {
+		onSuccess: ({ landed, undo: undoing }, { 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);
+			undoToast.current = void 0;
+			const from = row.record[by] ?? null;
+			const title = landed !== from ? text("movedTo", labelOf(landed)) : from === to.value ? text("orderChanged") : text("stayedIn", labelOf(landed));
+			if (!undoing) {
+				toast.show({
+					state: "success",
+					title
+				});
+				return;
+			}
 			const id = toast.show({
 				state: "success",
 				title,
@@ -71,7 +107,7 @@ const useBoardMove = (model, by, rank) => {
 					onClick: () => {
 						toast.dismiss(id);
 						undoToast.current = void 0;
-						undo.mutate(writes);
+						undo.mutate(undoing);
 					}
 				}
 			});

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-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,16 +11,16 @@ 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, 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, {
@@ -43,17 +44,25 @@ const HandSortedList = ({ model, view, field, filter, columns, sort }) => {
 		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))

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

@@ -9,7 +9,9 @@ const text = defineMessages({
 		couldNotChange: "Could not change the order",
 		orderChanged: "Order changed",
 		undo: "Undo",
-		couldNotUndo: "Could not undo"
+		couldNotUndo: "Could not undo",
+		movedToPlace: (place) => `Moved to place ${place}`,
+		notMoved: "Left in its place"
 	},
 	nl: {
 		done: "Klaar",
@@ -19,7 +21,9 @@ const text = defineMessages({
 		couldNotChange: "Kon de volgorde niet wijzigen",
 		orderChanged: "Volgorde gewijzigd",
 		undo: "Ongedaan maken",
-		couldNotUndo: "Kon niet ongedaan maken"
+		couldNotUndo: "Kon niet ongedaan maken",
+		movedToPlace: (place) => `Verplaatst naar plaats ${place}`,
+		notMoved: "Op zijn plaats gelaten"
 	}
 });
 //#endregion

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

@@ -3,11 +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";
@@ -19,9 +21,10 @@ import { arrayMove } from "@dnd-kit/sortable";
 * 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.
 * 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.
+* 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();
@@ -116,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);
@@ -133,6 +138,15 @@ const useHandOrder = ({ model, field, filter, fields }) => {
 		waiting.current += 1;
 		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;

package/dist/app/list-page.js

@@ -480,15 +480,8 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: heading?.title ?? plural,
 				subtitle: heading ? heading.subtitle : view?.help,
-				aside: !desktop && displaySwitch(true),
-				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					displaySwitch(false),
-					sortButton,
-					saveSearch,
-					importButton,
-					exportButton,
-					createButton
-				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					displaySwitch(!desktop),
 					sortButton,
 					saveSearch,
 					importButton,

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, drop rules and board drops 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, drop rules and board drops 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,8 @@ 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 boardDrops = union("The board drop", named, (ui) => ui.boardDrops);
 	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 +55,8 @@ const mergeUi = (...uis) => {
 		components,
 		actions,
 		...Object.keys(fields).length > 0 && { fields },
+		...Object.keys(dropRules).length > 0 && { dropRules },
+		...Object.keys(boardDrops).length > 0 && { boardDrops },
 		...(actionSlot || rightPanel || logo) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel },

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

@@ -1,5 +1,7 @@
 import { ShellLogoProps } from "../../app-shell/logo.js";
 import { FieldWidget } from "../field-types/field-widget.js";
+import { BoardDrop } from "../displays/board-drop.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 +45,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, board
+ * drops by the name a list's `drag.board` 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 +56,10 @@ 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>;
+  /** Which columns of a board take a card and what a drop there writes, by the name a view's `drag.board` gives (see `BoardDrop`). */
+  boardDrops?: Record<string, BoardDrop>;
   /**
    * 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/app-shell/page-header.js

@@ -1,23 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/page-header.tsx
-const PageHeader = ({ title, subtitle, aside, actions }) => {
-	const heading = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
-		className: "text-xl font-semibold tracking-tight",
-		children: title
-	}), subtitle && /* @__PURE__ */ jsx("p", {
-		className: "text-muted-foreground",
-		children: subtitle
-	})] });
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
-		children: [aside ? /* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 items-center justify-between gap-3",
-			children: [heading, aside]
-		}) : heading, actions && /* @__PURE__ */ jsx("div", {
-			className: "flex w-full flex-wrap items-center gap-2 sm:w-auto",
-			children: actions
+const PageHeader = ({ title, subtitle, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-x-4 gap-y-2 md:flex-row md:items-end md:justify-between",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 break-words md:flex-1",
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-xl font-semibold tracking-tight",
+			children: title
+		}), subtitle && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: subtitle
 		})]
-	});
-};
+	}), actions && /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center gap-2 md:justify-end",
+		children: actions
+	})]
+});
 //#endregion
 export { PageHeader };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
+import { BoardDrop, BoardDropContext, BoardDropUndo, BoardDropWrite } from "./app/displays/board-drop.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 +63,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, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, 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.24.0";
+var version = "0.25.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };