@protobase/ui 0.22.8 → 0.22.10

package/dist/app/current-address.d.ts

@@ -23,6 +23,7 @@ export type CurrentAddress = ListAddress | {
   key: string;
   edit?: true;
   open?: readonly string[];
+  tab?: string;
 } | {
   kind: 'create';
   resource: string;

package/dist/app/current-address.js

@@ -35,7 +35,8 @@ const currentAddress = (read, defaults) => {
 		resource: read.resource,
 		key: encodeKey(read.key),
 		...read.edit && { edit: true },
-		...read.open && { open: read.open }
+		...read.open && { open: read.open },
+		...read.tab && { tab: read.tab }
 	};
 	if (read?.kind !== "list") return read;
 	return {

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

@@ -10,10 +10,20 @@ import { RecordCard } from "./record-card.js";
 import { columnId } from "./board-dnd.js";
 import { useBoardColumn } from "./use-board-column.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 //#region src/app/displays/board-column.tsx
-/** One column of a board: its loaded records, those on their way out shown in their new column, and those on their way in at its top. */
-const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy, limit, moves, movable, dragged }) => {
+const inOrder = (rows, order) => {
+	if (!order) return rows;
+	const byKey = new Map(rows.map((row) => [row.key, row]));
+	const named = new Set(order);
+	return [...order.flatMap((key) => byKey.get(key) ?? []), ...rows.filter((row) => !named.has(row.key))];
+};
+/**
+* One column of a board: its loaded records, those on their way out shown in their new column, and those on their way
+* in at its top, or on a ranked board at the place they were dropped.
+*/
+const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy, limit, moves, movable, placeable, dragged }) => {
 	const list = useBoardColumn({
 		model,
 		by: display.by,
@@ -22,14 +32,21 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 		filter,
 		orderBy
 	});
-	const { setNodeRef, isOver } = useDroppable({ id: columnId(column.value) });
 	const card = boardCard(model, view, display);
 	const loaded = new Set(list.rows.map((row) => row.key));
 	const moving = new Map(moves.map((entry) => [entry.row.key, entry]));
 	const leaving = list.rows.filter((row) => moving.has(row.key) && moving.get(row.key).to !== column.value);
 	const arriving = moves.filter((entry) => entry.to === column.value && !loaded.has(entry.row.key)).map((entry) => entry.row);
 	const staying = list.rows.filter((row) => !leaving.includes(row)).map((row) => moving.has(row.key) ? moving.get(row.key).row : row);
-	const rows = [...arriving, ...staying].slice(0, limit);
+	const placing = moves.findLast((entry) => entry.to === column.value && entry.order);
+	const rows = inOrder([...arriving, ...staying], placing?.order).slice(0, limit);
+	const { setNodeRef, isOver } = useDroppable({
+		id: columnId(column.value),
+		data: {
+			column,
+			rows
+		}
+	});
 	const count = list.total - leaving.length + arriving.length;
 	if (column.value === null && !list.loading && count === 0 && !isOver) return null;
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
@@ -62,16 +79,24 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 			}) : rows.length === 0 ? /* @__PURE__ */ jsxs("p", {
 				className: "px-1 py-4 text-center text-xs text-muted-foreground",
 				children: ["No ", plural]
-			}) : /* @__PURE__ */ jsx("ul", {
-				className: "flex flex-col gap-2",
-				children: rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(BoardCard, {
-					model,
-					view,
-					card,
-					row,
-					movable: movable && rowAllows(row.record, "update"),
-					dragged
-				}) }, row.key))
+			}) : /* @__PURE__ */ jsx(SortableContext, {
+				id: columnId(column.value),
+				items: rows.map((row) => row.key),
+				strategy: verticalListSortingStrategy,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "-mb-2 flex flex-col",
+					children: rows.map((row) => /* @__PURE__ */ jsx(BoardCard, {
+						model,
+						view,
+						card,
+						row,
+						column,
+						rows,
+						draggable: (movable || placeable) && rowAllows(row.record, "update"),
+						placeable,
+						dragged
+					}, row.key))
+				})
 			}),
 			limit === void 0 && list.more && /* @__PURE__ */ jsx(Button, {
 				size: "sm",
@@ -82,13 +107,26 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 		]
 	});
 };
-const BoardCard = ({ model, view, card, row, movable, dragged }) => {
-	const { setNodeRef, setActivatorNodeRef, listeners, isDragging } = useDraggable({
+/**
+* A record's card, picked up by dragging it or by Space on its link; one the user may not update stays put. Where the
+* user may change the order of a ranked board, a card is dropped on too: in its own column the cards make room as it
+* moves, in another a bar marks its place.
+*/
+const BoardCard = ({ model, view, card, row, column, rows, draggable, placeable, dragged }) => {
+	const { setNodeRef, setActivatorNodeRef, listeners, isDragging, isOver, active, transform, transition } = useSortable({
 		id: row.key,
-		data: { row },
-		disabled: !movable
+		data: {
+			row,
+			column,
+			rows
+		},
+		disabled: {
+			draggable: !draggable,
+			droppable: !placeable
+		}
 	});
-	return /* @__PURE__ */ jsx("div", {
+	const arriving = isOver && (active?.data.current?.column)?.value !== column.value;
+	return /* @__PURE__ */ jsx("li", {
 		ref: (element) => {
 			setNodeRef(element);
 			setActivatorNodeRef(element?.querySelector("a") ?? element);
@@ -100,7 +138,11 @@ const BoardCard = ({ model, view, card, row, movable, dragged }) => {
 			event.preventDefault();
 			event.stopPropagation();
 		},
-		className: cn(movable && "cursor-grab touch-manipulation", isDragging && "opacity-40"),
+		style: {
+			transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+			transition
+		},
+		className: cn("relative pb-2", draggable && "cursor-grab touch-manipulation", isDragging && "opacity-40", arriving && "before:absolute before:inset-x-0 before:-top-1 before:h-0.5 before:rounded-full before:bg-primary"),
 		children: /* @__PURE__ */ jsx(RecordCard, {
 			model,
 			view,

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

@@ -21,6 +21,8 @@ const boardColumns = (model, view, display) => {
 		label: `No ${(hints?.label ?? humanize(display.by)).toLowerCase()}`
 	}];
 };
+/** The field a board orders each column by: the resource's `.position()`, when its records are ordered as one rather than within a parent. */
+const boardRank = (model) => model.position && model.position.within === void 0 ? model.position.field : void 0;
 /** The list's filter, its search included, narrowed to the records of one column. */
 const columnFilter = (filter, by, value) => {
 	const column = printFilter(value === null ? where.isNull(by) : where.eq(by, value));
@@ -42,4 +44,4 @@ const refusalReason = (error) => {
 	return reasons.length > 0 ? reasons.join("; ") : error.message;
 };
 //#endregion
-export { boardCard, boardColumns, columnFilter, refusalReason };
+export { boardCard, boardColumns, boardRank, columnFilter, refusalReason };

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

@@ -1,25 +1,47 @@
-import { boardCard, boardColumns } from "./board-columns.js";
+import { boardCard, boardColumns, boardRank } from "./board-columns.js";
 import { usePermissions } from "../meta-gate.js";
 import { can } from "../permissions.js";
 import { RecordCard } from "./record-card.js";
-import { collision, columnCoordinates, columnId } from "./board-dnd.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 { placedRows } from "./board-place.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
+const placeOver = (over, row) => {
+	const data = over.data.current;
+	if (!data?.column || !data.rows) return void 0;
+	if (data.sortable) return {
+		column: data.column,
+		rows: data.rows,
+		index: data.sortable.index
+	};
+	const own = data.rows.some((entry) => entry.key === row.key);
+	return {
+		column: data.column,
+		rows: data.rows,
+		index: own ? data.rows.length - 1 : data.rows.length
+	};
+};
 /**
 * 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.
+* 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.
 */
 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 { moves, move } = useBoardMove(model, display.by);
+	const rank = boardRank(model);
+	const placeable = 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();
 	const dragged = useRef(false);
 	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
@@ -31,15 +53,30 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 			cancel: ["Escape"],
 			end: ["Space", "Enter"]
 		},
-		coordinateGetter: columnCoordinates
+		coordinateGetter: cardCoordinates
 	}));
 	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 announced = (row, over) => {
+		if (!over) return { over: "no column" };
+		const place = placeable ? placeOver(over, row) : void 0;
+		if (!place) return { over: columnOf(over.id)?.label ?? "no column" };
+		const count = place.rows.some((entry) => entry.key === row.key) ? place.rows.length : place.rows.length + 1;
+		return {
+			over: `${place.column.label}, place ${place.index + 1} of ${count}`,
+			place: `${place.column.label}, place ${place.index + 1}`
+		};
+	};
 	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.`,
+		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.`;
+			const said = announced(row, over);
+			return `${title(row)} was moved to ${said.place ?? said.over}.`;
+		},
 		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current.row)} was cancelled.`
 	};
 	const start = ({ active: picked }) => {
@@ -50,8 +87,21 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		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);
+		if (!over) return;
+		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);
+			return;
+		}
+		const from = place.rows.findIndex((entry) => entry.key === row.key);
+		if (from === -1 && !movable) return;
+		if (from === place.index) return;
+		const order = placedRows(place.rows, row, place.index);
+		move(row, place.column, {
+			order,
+			changed: from === -1 ? place.index : Math.max(from, place.index)
+		});
 	};
 	return /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
@@ -64,7 +114,7 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		},
 		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." }
+			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." }
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative min-w-0 flex-1 overflow-x-auto",
@@ -77,10 +127,11 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 					column,
 					fields,
 					filter,
-					orderBy,
+					orderBy: columnOrder,
 					limit,
 					moves,
 					movable,
+					placeable,
 					dragged: () => dragged.current
 				}, columnId(column.value)))
 			})

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

@@ -2,17 +2,24 @@ 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 isCard = (container) => container.data.current?.sortable !== void 0;
+/**
+* A pointer drops a card on the card under it, on a ranked board, else on the column under it; the keyboard, which has
+* no pointer, on what the card overlaps.
+*/
 const collision = (args) => {
 	const under = pointerWithin(args);
+	const card = under.find((entry) => entry.data?.droppableContainer && isCard(entry.data.droppableContainer));
+	if (card) return [card];
 	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. */
+/** The left and right arrow keys move a picked-up card to the top of the next column, onto its first card when it has one. */
 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 enabled = droppableContainers.getEnabled();
+	const columns = enabled.filter((container) => !isCard(container)).flatMap((container) => {
 		const rect = droppableRects.get(container.id);
 		return rect ? [{
 			id: container.id,
@@ -20,13 +27,42 @@ const columnCoordinates = (event, { context: { collisionRect, droppableRects, dr
 		}] : [];
 	}).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 current = over?.data.current?.sortable?.containerId ?? over?.id;
+	const at = current !== void 0 ? columns.findIndex((column) => column.id === current) : columns.findIndex((column) => column.rect.left <= center && center <= column.rect.right);
 	const target = columns[at + step];
 	if (at === -1 || !target) return void 0;
+	const first = cardRects(enabled, droppableRects, target.id)[0];
 	return {
 		x: target.rect.left + (target.rect.width - collisionRect.width) / 2,
+		y: first?.rect.top ?? target.rect.top
+	};
+};
+const cardRects = (enabled, rects, column) => enabled.filter((container) => container.data.current?.sortable?.containerId === column).flatMap((container) => {
+	const rect = rects.get(container.id);
+	return rect ? [{
+		id: container.id,
+		rect
+	}] : [];
+}).sort((a, b) => a.rect.top - b.rect.top);
+/**
+* On a ranked board the up and down arrow keys move a picked-up card to the place of the card above or below it in its
+* column; the left and right ones as `columnCoordinates` does. An unranked board has no cards to drop on, so up and down
+* do nothing there.
+*/
+const cardCoordinates = (event, args) => {
+	const step = event.code === "ArrowDown" ? 1 : event.code === "ArrowUp" ? -1 : 0;
+	if (step === 0) return columnCoordinates(event, args);
+	const { droppableRects, droppableContainers, over } = args.context;
+	const column = over?.data.current?.sortable?.containerId ?? over?.id;
+	if (column === void 0) return void 0;
+	const cards = cardRects(droppableContainers.getEnabled(), droppableRects, column);
+	const target = cards[(over?.id === column ? cards.length : cards.findIndex((card) => card.id === over?.id)) + step];
+	if (!target) return void 0;
+	event.preventDefault();
+	return {
+		x: target.rect.left,
 		y: target.rect.top
 	};
 };
 //#endregion
-export { collision, columnCoordinates, columnId };
+export { cardCoordinates, collision, columnCoordinates, columnId };

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

@@ -0,0 +1,45 @@
+import { recordKey } from "../../live/model-helpers.js";
+import { encodeKey } from "@protobase/schema/internal";
+import { arrayMove } from "@dnd-kit/sortable";
+//#region src/app/displays/board-place.ts
+/**
+* The column's cards once `row` is dropped at `index`. In its own column it moves there, as a sortable list moves an
+* item; in another it goes in before the card at `index`, or last.
+*/
+const placedRows = (rows, row, index) => {
+	const from = rows.findIndex((entry) => entry.key === row.key);
+	if (from !== -1) return arrayMove(rows, from, index);
+	return [
+		...rows.slice(0, index),
+		row,
+		...rows.slice(index)
+	];
+};
+const etagOf = (row) => typeof row.record.etag === "string" ? row.record.etag : "*";
+/**
+* The batch that saves a drop on a ranked board: in another column first the update of `by` with the card's ETag, then
+* a `reorder` numbering the column's cards 1, 2, 3, … up to and including the one at `changed`, the last whose place
+* changed. The cards after it already rank higher, so they keep their place unwritten, loaded or not.
+*/
+const placeOps = (model, by, rank, row, column, order, changed) => {
+	const moving = (row.record[by] ?? null) !== column.value;
+	const prefix = order.slice(0, changed + 1);
+	const etags = Object.fromEntries(prefix.map((entry) => [encodeKey(recordKey(model, entry.record)), moving && entry.key === row.key ? "*" : etagOf(entry)]));
+	const reorder = {
+		op: "reorder",
+		resource: model.name,
+		field: rank,
+		keys: prefix.map((entry) => recordKey(model, entry.record)),
+		etags
+	};
+	if (!moving) return [reorder];
+	return [{
+		op: "update",
+		resource: model.name,
+		key: recordKey(model, row.record),
+		data: { [by]: column.value },
+		etag: etagOf(row)
+	}, reorder];
+};
+//#endregion
+export { placeOps, placedRows };

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

@@ -3,26 +3,31 @@ import { useToast } from "../../toasts/toast-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { refusalReason } from "./board-columns.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
+import { placeOps } from "./board-place.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.
+* 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.
 */
-const useBoardMove = (model, by) => {
+const useBoardMove = (model, by, rank) => {
 	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 }) => {
+		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.changed));
 			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 }) => {
+		onMutate: ({ row, to, place }) => {
 			const moved = {
 				...row,
 				record: {
@@ -30,16 +35,19 @@ const useBoardMove = (model, by) => {
 					[by]: to.value
 				}
 			};
+			const order = place?.order.map((entry) => entry.key);
 			setMoves((current) => [...current.filter((move) => move.row.key !== row.key), {
 				row: moved,
-				to: to.value
+				to: to.value,
+				...order && { order }
 			}]);
 		},
 		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}`;
 			toast.show({
 				state: "error",
-				title: `Could not move it to ${to.label}`,
+				title,
 				description: refusalReason(error)
 			});
 		},
@@ -50,9 +58,10 @@ const useBoardMove = (model, by) => {
 	});
 	return {
 		moves,
-		move: (row, to) => mutation.mutate({
+		move: (row, to, place) => mutation.mutate({
 			row,
-			to
+			to,
+			...place && { place }
 		})
 	};
 };

package/dist/app/list-page.js

@@ -6,6 +6,7 @@ import { Button, buttonClass } from "../primitives/button.js";
 import { humanize } from "../live/naming.js";
 import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { columnsFromModel, listColumnNames } from "../live/columns-from-model.js";
+import { boardRank } from "./displays/board-columns.js";
 import { displayRow, listDisplayChoices, loadedFields, shownListDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
@@ -29,6 +30,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 { useDisplayRows } from "./displays/use-display-rows.js";
 import { BoardDisplay } from "./displays/board-display.js";
 import { CalendarDisplay } from "./displays/calendar-display.js";
@@ -56,7 +58,6 @@ import { SavedList } from "./saved/saved-list.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useListCellEditor } from "./list-edit/use-list-cell-editor.js";
-import { listHandOrder } from "./hand-order/hand-order.js";
 import { HandSortedList } from "./hand-order/hand-sorted-list.js";
 import { SortButton } from "./hand-order/sort-button.js";
 import { useMemo, useState } from "react";
@@ -212,7 +213,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		setFilter(state, text ? [...others, where$1.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
-	const sorted = display?.kind === "calendar" ? void 0 : display;
+	const sorted = display?.kind === "calendar" || display?.kind === "board" && boardRank(model) ? void 0 : display;
 	const sortMenu = sorted && /* @__PURE__ */ jsx(SortMenu, {
 		model,
 		view,

package/dist/app/record-mode/shown-layout.js

@@ -1,25 +1,31 @@
 import { whenShown } from "./record-mode.js";
 import { isRecordCondition } from "@protobase/schema";
 //#region src/app/record-mode/shown-layout.ts
-/** The items with a record condition in `when`, those inside groups too, whose conditions the page evaluates: a group before its items. */
-const conditionalItems = (items) => items.flatMap((item) => item.kind === "group" ? [item, ...item.items] : [item]).filter((item) => isRecordCondition(item.when));
+const innerItems = (item) => item.kind === "group" || item.kind === "tab" ? item.items : [];
+const whenOf = (item) => item.kind === "tab" ? void 0 : item.when;
+/** The items with a record condition in `when`, those inside tabs and groups too, whose conditions the page evaluates: a group before its items. */
+const conditionalItems = (items) => items.flatMap((item) => [item, ...conditionalItems(innerItems(item))]).filter((item) => isRecordCondition(whenOf(item)));
 /**
 * The items that show: those with a record condition only when it holds (`held`, one answer per conditional item in
 * the order `conditionalItems` lists them, `undefined` while loading) and the page is no preview; the others by the
-* form or read view. A group keeps the items inside it that show, and goes when it or all of them do not.
+* form or read view. A tab or group keeps the items inside it that show, and goes when it or all of them do not.
 */
 const shownLayout = (items, held, editing, preview) => {
 	let next = 0;
-	const shown = (item) => isRecordCondition(item.when) ? !preview && held[next++] === true : whenShown(item.when, editing);
-	return items.flatMap((item) => {
-		if (item.kind !== "group") return shown(item) ? [item] : [];
-		const groupShown = shown(item);
-		const inner = item.items.filter(shown);
-		return groupShown && inner.length > 0 ? [{
+	const shown = (item) => {
+		const when = whenOf(item);
+		return isRecordCondition(when) ? !preview && held[next++] === true : whenShown(when, editing);
+	};
+	const keep = (list) => list.flatMap((item) => {
+		const itself = shown(item);
+		if (item.kind !== "group" && item.kind !== "tab") return itself ? [item] : [];
+		const inner = keep(item.items);
+		return itself && inner.length > 0 ? [{
 			...item,
 			items: inner
 		}] : [];
 	});
+	return keep(items);
 };
 //#endregion
-export { conditionalItems, shownLayout };
+export { conditionalItems, shownLayout, whenOf };

package/dist/app/record-mode/use-shown-layout.js

@@ -1,12 +1,12 @@
 import { useConditions } from "../pages/use-conditions.js";
-import { conditionalItems, shownLayout } from "./shown-layout.js";
+import { conditionalItems, shownLayout, whenOf } from "./shown-layout.js";
 //#region src/app/record-mode/use-shown-layout.ts
 /**
 * The layout items to draw: those meant for the form or the read view as the page is, and those with a record
 * condition while it holds for the saved record. Conditional items stay out while their values load and on a preview.
 */
 const useShownLayout = (items, scope, editing, preview) => {
-	const conditions = preview ? [] : conditionalItems(items).map((item) => item.when);
+	const conditions = preview ? [] : conditionalItems(items).map((item) => whenOf(item));
 	const held = useConditions(conditions, scope);
 	return shownLayout(items, held, editing, preview);
 };