@protobase/ui 0.25.3 → 0.25.5

package/dist/account/account-section.js

@@ -24,7 +24,7 @@ const AccountSection = ({ title, status, description, children }) => /* @__PURE_
 });
 const SectionError = ({ message }) => message ? /* @__PURE__ */ jsx("p", {
 	role: "alert",
-	className: "mb-3 text-xs font-medium text-danger-text",
+	className: "mb-3 text-body font-medium text-danger-text",
 	children: message
 }) : null;
 //#endregion

package/dist/account/password-dialog.js

@@ -50,7 +50,7 @@ const PasswordDialog = ({ title, description, confirmLabel, danger, needsPasswor
 			})]
 		}), error && /* @__PURE__ */ jsx("p", {
 			role: "alert",
-			className: "mt-2 text-xs font-medium text-danger-text",
+			className: "mt-2 text-body font-medium text-danger-text",
 			children: error
 		})]
 	});

package/dist/account/sign-in-policy-form.js

@@ -15,7 +15,7 @@ const RuleChoice = ({ row, value, onChange }) => /* @__PURE__ */ jsx("span", {
 		role: "radio",
 		"aria-checked": option.value === value,
 		onClick: () => onChange(option.value),
-		className: cn("rounded px-3 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		className: cn("rounded px-3 text-body font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
 		children: option.label
 	}, option.value))
 });
@@ -85,12 +85,12 @@ const SignInPolicyForm = ({ state, onSave, busy, error, notice }) => {
 			}),
 			error && /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "rounded-md bg-danger-soft px-3 py-2 text-xs font-medium text-danger-text",
+				className: "rounded-md bg-danger-soft px-3 py-2 text-body font-medium text-danger-text",
 				children: error
 			}),
 			notice && !changed && /* @__PURE__ */ jsx("p", {
 				role: "status",
-				className: "rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				className: "rounded-md bg-success-soft px-3 py-2 text-body font-medium text-success-text",
 				children: notice
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/dist/account/two-factor-setup.js

@@ -59,7 +59,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 	});
 	const errorLine = error && /* @__PURE__ */ jsx("p", {
 		role: "alert",
-		className: "text-xs font-medium text-danger-text",
+		className: "text-body font-medium text-danger-text",
 		children: error
 	});
 	if (step.kind === "backup-codes") return /* @__PURE__ */ jsxs("div", {

package/dist/action-card/field-list.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/action-card/field-list.tsx
 /** Labelled values, one per row, inside a card. */
 const FieldList = ({ fields }) => /* @__PURE__ */ jsx("dl", {
-	className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs",
+	className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-body",
 	children: fields.map((field, index) => /* @__PURE__ */ jsxs("div", {
 		className: "contents",
 		children: [/* @__PURE__ */ jsx("dt", {

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

@@ -61,7 +61,7 @@ const BoardColumnView = ({ model, view, display, column, fields, filter, orderBy
 			/* @__PURE__ */ jsxs("header", {
 				className: "flex items-center justify-between gap-2 px-1 pt-0.5",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "min-w-0 truncate text-xs font-medium",
+					className: "min-w-0 truncate text-body font-medium",
 					children: column.value === null ? /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground",
 						children: column.label

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

@@ -11,7 +11,6 @@ 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";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -55,12 +54,15 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 	const placeable = drag?.rank === true && rank !== void 0 && listHandOrder(model, permissions) !== void 0;
 	const columnOrder = rank ? `${rank} asc` : orderBy;
 	const labelOf = (value) => every.find((column) => column.value === value)?.label ?? String(value);
+	const title = (row) => String(row.labels[card.title] ?? row.record[card.title] ?? row.key);
 	const { moves, move } = useBoardMove({
 		model,
+		view,
 		by: display.by,
 		rank,
 		drop,
-		labelOf
+		labelOf,
+		titleOf: title
 	});
 	const [active, setActive] = useState();
 	const dragged = useRef(false);
@@ -76,7 +78,6 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		coordinateGetter: cardCoordinates
 	}));
 	if (dropName !== void 0 && !drop) return /* @__PURE__ */ jsx(Problem, { children: slotted(text("noDrop"), dropName) });
-	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);
@@ -124,11 +125,9 @@ const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit })
 		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, {
-			order,
-			first: from === -1 ? place.index : Math.min(from, place.index),
-			last: from === -1 ? place.index : Math.max(from, place.index)
+			rows: place.rows,
+			index: place.index
 		});
 	};
 	return /* @__PURE__ */ jsxs(DndContext, {

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

@@ -16,33 +16,46 @@ const placedRows = (rows, row, index) => {
 		...rows.slice(index)
 	];
 };
+/** The column's cards once `row` is dropped at `index`, with the first and last place that changed. */
+const placing = (rows, row, index) => {
+	const from = rows.findIndex((entry) => entry.key === row.key);
+	return {
+		order: placedRows(rows, row, index),
+		first: from === -1 ? index : Math.min(from, index),
+		last: from === -1 ? index : Math.max(from, 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` of the column's cards whose place changed, `first` to `last`, reaching only as far as their ranks need
-* (see `reorderSpan`). The cards after it already rank higher, so they keep their place unwritten, loaded or not.
+* (see `reorderSpan`). The cards after it already rank higher, so they keep their place unwritten, loaded or not. With
+* `bump`, the card, last in the column, takes that rank in a `reorder` of its own before the others are numbered, so
+* it ranks above a record it depends on (see `rankedPlace`).
 */
-const placeOps = (model, by, rank, row, column, order, first, last) => {
+const placeOps = (model, by, rank, row, column, order, first, last, bump) => {
 	const moving = (row.record[by] ?? null) !== column.value;
 	const span = reorderSpan(order.map((entry) => entry.record[rank]), first, last);
 	const sent = order.slice(span.first, span.last + 1);
-	const etags = Object.fromEntries(sent.map((entry) => [encodeKey(recordKey(model, entry.record)), moving && entry.key === row.key ? "*" : etagOf(entry)]));
-	const reorder = {
+	const etagFor = (entry) => moving && entry.key === row.key ? "*" : etagOf(entry);
+	const reorder = (entries, start) => ({
 		op: "reorder",
 		resource: model.name,
 		field: rank,
-		keys: sent.map((entry) => recordKey(model, entry.record)),
-		start: span.start,
-		etags
-	};
-	if (!moving) return [reorder];
+		keys: entries.map((entry) => recordKey(model, entry.record)),
+		start,
+		etags: Object.fromEntries(entries.map((entry) => [encodeKey(recordKey(model, entry.record)), etagFor(entry)]))
+	});
+	const others = sent.filter((entry) => entry.key !== row.key);
+	const reorders = bump === void 0 ? [reorder(sent, span.start)] : [reorder([row], bump), ...others.length > 0 ? [reorder(others, span.start)] : []];
+	if (!moving) return reorders;
 	return [{
 		op: "update",
 		resource: model.name,
 		key: recordKey(model, row.record),
 		data: { [by]: column.value },
 		etag: etagOf(row)
-	}, reorder];
+	}, ...reorders];
 };
 /**
 * What the batch of a drop saved: each record it wrote, as it stored it last, with its values in `rows`, the column's
@@ -67,4 +80,4 @@ const boardWrites = (model, rows, result) => {
 	});
 };
 //#endregion
-export { boardWrites, placeOps, placedRows };
+export { boardWrites, placeOps, placedRows, placing };

package/dist/app/displays/timeline-row.js

@@ -14,7 +14,7 @@ const TimelineRow = ({ model, view, display, row, days, movable, dragged }) => {
 		className: cn(timelineGrid, "relative border-b border-border last:border-b-0"),
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: "truncate px-2 pt-1 text-xs sm:py-1.5",
+			className: "truncate px-2 pt-1 text-body sm:py-1.5",
 			children: eventTitle(model, view, display, row)
 		}), /* @__PURE__ */ jsx("div", {
 			className: "relative h-7",

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

@@ -5,8 +5,11 @@ import { text } from "./messages.js";
 import { refusalReason } from "./board-columns.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { dropWrite } from "./board-drop.js";
-import { boardWrites, placeOps } from "./board-place.js";
+import { text as text$1 } from "../hand-order/messages.js";
 import { undoOps } from "../hand-order/undo-ops.js";
+import { rankBounds } from "../rank-after/rank-bounds.js";
+import { boardWrites, placeOps, placing } from "./board-place.js";
+import { rankedPlace } from "../rank-after/ranked-place.js";
 import { useRef, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 //#region src/app/displays/use-board-move.ts
@@ -17,9 +20,11 @@ import { useMutation } from "@tanstack/react-query";
 * 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.
+* With the position's `after`, a card dropped above a record it depends on lands at the first place below that keeps
+* the order, or stays where it was, with a warning saying why (see `rankedPlace`).
 * Either way every list of the resource reloads, which puts the card where its record now is.
 */
-const useBoardMove = ({ model, by, rank, drop, labelOf }) => {
+const useBoardMove = ({ model, view, by, rank, drop, labelOf, titleOf }) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
@@ -58,12 +63,55 @@ const useBoardMove = ({ model, by, rank, drop, labelOf }) => {
 		landed: to.value,
 		undo: () => client.batchWrite(undoOps(model, writes, fields))
 	});
+	const show = (row, to, order) => {
+		const moved = {
+			...row,
+			record: {
+				...row.record,
+				[by]: to.value
+			}
+		};
+		const keys = order?.map((entry) => entry.key);
+		setMoves((current) => [...current.filter((move) => move.row.key !== row.key), {
+			row: moved,
+			to: to.value,
+			...keys && { order: keys }
+		}]);
+	};
+	const allowed = async (row, to, place) => {
+		if (!model.position?.after) return { index: place.index };
+		const bounds = await rankBounds(client, model, view, row.record);
+		const ranked = rankedPlace({
+			model,
+			rank,
+			rows: place.rows,
+			row,
+			index: place.index,
+			bounds,
+			title: titleOf(row)
+		});
+		const stays = !ranked.place || ranked.place.bump === void 0 && ranked.place.index === place.rows.findIndex((entry) => entry.key === row.key);
+		if (ranked.reason !== void 0) toast.show({
+			state: "warning",
+			title: stays ? text$1("notMoved") : text$1("movedToPlace", ranked.place.index + 1),
+			description: ranked.reason
+		});
+		if (stays) return void 0;
+		if (ranked.place.index !== place.index) show(row, to, placing(place.rows, row, ranked.place.index).order);
+		return ranked.place;
+	};
+	const placed = async (row, to, place) => {
+		const landing = await allowed(row, to, place);
+		if (!landing) return void 0;
+		const { order, first, last } = placing(place.rows, row, landing.index);
+		return saved(boardWrites(model, order, await client.batchWrite(placeOps(model, by, rank, row, to, order, first, last, landing.bump))), to);
+	};
 	const mutation = useMutation({
 		mutationFn: async ({ row, to, place }) => {
 			if (place && !rank) throw new Error("A board places a card only by its rank");
 			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);
+			if (place) return placed(row, to, place);
 			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 saved([{
@@ -72,22 +120,10 @@ const useBoardMove = ({ model, by, rank, drop, labelOf }) => {
 				etag: stored.etag
 			}], to);
 		},
-		onMutate: ({ row, to, place }) => {
-			const moved = {
-				...row,
-				record: {
-					...row.record,
-					[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,
-				...order && { order }
-			}]);
-		},
-		onSuccess: ({ landed, undo: undoing }, { row, to }) => {
+		onMutate: ({ row, to, place }) => show(row, to, place && placing(place.rows, row, place.index).order),
+		onSuccess: (result, { row, to }) => {
+			if (!result) return;
+			const { landed, undo: undoing } = result;
 			if (undoToast.current !== void 0) toast.dismiss(undoToast.current);
 			undoToast.current = void 0;
 			const from = row.record[by] ?? null;

package/dist/app/error-banner.js

@@ -18,7 +18,7 @@ const ErrorBanner = ({ error, title }) => /* @__PURE__ */ jsxs("div", {
 		className: "font-medium",
 		children: title
 	}), describe(error).map((detail) => /* @__PURE__ */ jsxs("p", {
-		className: "text-xs",
+		className: "text-body",
 		children: [detail.message, detail.hint && /* @__PURE__ */ jsxs("span", {
 			className: "text-muted-foreground",
 			children: [" ", detail.hint]

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

@@ -41,7 +41,7 @@ const Setting = ({ label, help, children }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex flex-col items-start gap-1.5",
 	children: [
 		/* @__PURE__ */ jsx("span", {
-			className: "text-[13px] font-medium",
+			className: "text-body font-medium",
 			children: label
 		}),
 		children,
@@ -145,7 +145,7 @@ const ExportDialog = ({ plural, view, fields, initialColumns, count, selected, o
 			children: text("export")
 		})] }),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4 text-[13px]",
+			className: "flex flex-col gap-4 text-body",
 			children: [
 				/* @__PURE__ */ jsx(Setting, {
 					label: text("format"),
@@ -208,7 +208,7 @@ const ExportProgressDialog = ({ plural, done, total, onCancel }) => {
 			children: text("cancel")
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2 text-[13px]",
+			className: "flex flex-col gap-2 text-body",
 			children: [/* @__PURE__ */ jsx("div", {
 				role: "progressbar",
 				"aria-label": text("rowsExported"),

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

@@ -8,8 +8,8 @@ import { useAppAddress } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
-import { embeddedColumns } from "../embedded-list/embedded-columns.js";
 import { text } from "./messages.js";
+import { embeddedColumns } from "../embedded-list/embedded-columns.js";
 import { useHandOrder } from "./use-hand-order.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -49,6 +49,7 @@ const HandSortedList = ({ model, view, field, filter, columns, sort }) => {
 	const rule = ruleName === void 0 ? void 0 : dropRules?.[ruleName];
 	const order = useHandOrder({
 		model,
+		view,
 		field,
 		filter,
 		fields,

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

@@ -1,16 +1,18 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { useToast } from "../../toasts/toast-provider.js";
-import { recordId, recordKey } from "../../live/model-helpers.js";
+import { recordId, recordKey, recordTitle } 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 { text } from "./messages.js";
 import { undoOps } from "./undo-ops.js";
+import { rankBounds } from "../rank-after/rank-bounds.js";
+import { reorderSpan } from "./reorder-span.js";
+import { dependencyRule } from "../rank-after/dependency-rule.js";
 import { allowedDrop } from "./drop-rule.js";
-import { text } from "./messages.js";
 import { useRef, useState } from "react";
 import { encodeKey } from "@protobase/schema/internal";
 import { useQuery } from "@tanstack/react-query";
@@ -22,9 +24,10 @@ import { arrayMove } from "@dnd-kit/sortable";
 * `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. A drop `rule` refuses moves to the first place below
-* that it allows, with a warning giving its reason.
+* that it allows, with a warning giving its reason; with the position's `after`, so do the records the moved one
+* depends on, read first (see `rankBounds`).
 */
-const useHandOrder = ({ model, field, filter, fields, rule }) => {
+const useHandOrder = ({ model, view, field, filter, fields, rule }) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
@@ -122,6 +125,17 @@ const useHandOrder = ({ model, field, filter, fields, rule }) => {
 	const move = (from, dropped) => {
 		const rows = latest.current ?? loaded.data;
 		if (!rows || from === dropped) return;
+		if (!model.position?.after) return place(rows, from, dropped, rule);
+		const record = displayRow(model, rows[from]).record;
+		const id = rows[from].id;
+		rankBounds(client, model, view, record).then((bounds) => {
+			const now = latest.current ?? loaded.data;
+			const dependencies = dependencyRule(model, bounds, recordTitle(model, view, record, id));
+			place(now, now.findIndex((row) => row.id === id), dropped, (drop) => dependencies(drop) ?? rule?.(drop));
+		}, refused(text("couldNotChange")));
+	};
+	const place = (rows, from, dropped, rule) => {
+		if (from === -1 || from === dropped) return;
 		const to = rule ? placeAllowed(rows, from, dropped, rule) : dropped;
 		if (from === to) return;
 		latest.current = arrayMove(rows, from, to);

package/dist/app/import/import-check-step.js

@@ -17,7 +17,7 @@ const downloadRows = (fileName, headers, rows) => saveFile(failedRowsCsv(headers
 /** The rows with what keeps each from being imported, at most `listedProblems` of them. */
 const ProblemList = ({ rows }) => /* @__PURE__ */ jsxs("ul", {
 	"aria-label": text("rowsNotImported"),
-	className: "flex flex-col gap-1 text-xs",
+	className: "flex flex-col gap-1 text-body",
 	children: [rows.slice(0, listedProblems).map((row) => /* @__PURE__ */ jsxs("li", { children: [
 		/* @__PURE__ */ jsx("span", {
 			className: "font-medium",
@@ -58,7 +58,7 @@ const ImportCheckStep = ({ check, model, resources, views, columns, headers, fil
 				className: "overflow-x-auto rounded-lg border",
 				children: /* @__PURE__ */ jsxs("table", {
 					"aria-label": text("firstRows"),
-					className: "w-full text-left text-xs",
+					className: "w-full text-left text-body",
 					children: [/* @__PURE__ */ jsx("thead", {
 						className: "bg-muted text-muted-foreground",
 						children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {

package/dist/app/named-icon.js

@@ -1,4 +1,4 @@
-import { Bath, Bed, Bell, Bookmark, Calendar, DoorOpen, ExternalLink, FileText, Heart, House, KeyRound, LandPlot, Leaf, RulerDimensionLine, Send, Tag, Wallet } from "lucide-react";
+import { Ban, Bath, Bed, Bell, Bookmark, Calendar, DoorOpen, ExternalLink, FileText, Heart, House, KeyRound, LandPlot, Leaf, RulerDimensionLine, Send, Tag, Wallet } from "lucide-react";
 //#region src/app/named-icon.ts
 /** The icons an action's, a field's or a sign-in prompt's `icon` may name. */
 const byName = {
@@ -18,7 +18,8 @@ const byName = {
 	heart: Heart,
 	bell: Bell,
 	bookmark: Bookmark,
-	"external-link": ExternalLink
+	"external-link": ExternalLink,
+	ban: Ban
 };
 /** The icon a name stands for, or nothing for a name the app does not know. */
 const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;

package/dist/app/pages/blocks/field.js

@@ -30,7 +30,7 @@ const FieldBlock = ({ node }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-xs text-muted-foreground",
+			className: "text-body text-muted-foreground",
 			children: text
 		}), /* @__PURE__ */ jsx("div", {
 			className: "mt-0.5 truncate",

package/dist/app/pages/blocks/progress.js

@@ -25,7 +25,7 @@ const ProgressBlock = ({ node }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-baseline justify-between gap-2 text-xs",
+			className: "flex items-baseline justify-between gap-2 text-body",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground",
 				children: label

package/dist/app/rank-after/dependency-rule.js

@@ -0,0 +1,17 @@
+import { recordKey } from "../../live/model-helpers.js";
+import { text } from "./messages.js";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/rank-after/dependency-rule.ts
+/**
+* The drop rule of a list that holds every record in rank order: the record titled `title` lands below each record it
+* depends on and above each that depends on it, by `bounds`; records the list does not hold do not count.
+*/
+const dependencyRule = (model, bounds, title) => ({ order, index }) => {
+	const at = (key) => order.findIndex((entry) => encodeKey(recordKey(model, entry)) === key);
+	const above = bounds.after.find((bound) => at(bound.key) > index);
+	if (above) return text("dependsOn", title, above.title);
+	const below = bounds.before.find((bound) => at(bound.key) !== -1 && at(bound.key) < index);
+	return below ? text("dependsOn", below.title, title) : void 0;
+};
+//#endregion
+export { dependencyRule };

package/dist/app/rank-after/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/rank-after/messages.ts
+const text = defineMessages({
+	en: { dependsOn: (record, other) => `${record} depends on ${other}.` },
+	nl: { dependsOn: (record, other) => `${record} hangt af van ${other}.` }
+});
+//#endregion
+export { text };

package/dist/app/rank-after/rank-bounds.js

@@ -0,0 +1,54 @@
+import { recordKey, recordTitle } from "../../live/model-helpers.js";
+import { encodeKey } from "@protobase/schema/internal";
+import { printFilter, where } from "@protobase/schema";
+//#region src/app/rank-after/rank-bounds.ts
+const everyRecord = async (client, resource, filter) => {
+	const records = [];
+	let pageToken = "";
+	do {
+		const page = await client.search(resource, {
+			filter,
+			pageSize: 100,
+			...pageToken && { pageToken }
+		});
+		records.push(...page.items);
+		pageToken = page.nextPageToken;
+	} while (pageToken);
+	return records;
+};
+const narrowed = (filter, extra) => extra === void 0 ? filter : `(${filter}) AND (${extra})`;
+/**
+* The records `record` must rank between, through the list API: the join records that hold its key on either side,
+* then the records they name, those it depends on narrowed to the pending ones. Without `after` on the resource's
+* position there are none.
+*/
+const rankBounds = async (client, model, view, record) => {
+	const after = model.position?.after;
+	if (!after) return {
+		after: [],
+		before: []
+	};
+	const id = model.primaryKey[0];
+	const self = recordKey(model, record);
+	const encoded = (value) => encodeKey([value]);
+	const links = await everyRecord(client, after.resource, narrowed(printFilter(where.or(where.eq(after.field, self), where.eq(after.key, self))), after.filter));
+	const other = (from, to) => links.flatMap((link) => encoded(link[from]) === encoded(self) && encoded(link[to]) !== encoded(self) ? [link[to]] : []);
+	const dependsOn = other(after.field, after.key);
+	const dependents = other(after.key, after.field);
+	const [pending, waiting] = await Promise.all([everyRecord(client, model.name, narrowed(printFilter(where.in(id, [self, ...dependsOn])), after.while)), dependents.length === 0 ? [] : everyRecord(client, model.name, printFilter(where.in(id, dependents)))]);
+	const bound = (found) => {
+		const key = encodeKey(recordKey(model, found));
+		return {
+			key,
+			rank: found[model.position.field],
+			title: recordTitle(model, view, found, key)
+		};
+	};
+	const selfPending = pending.some((found) => encoded(found[id]) === encoded(self));
+	return {
+		after: pending.filter((found) => encoded(found[id]) !== encoded(self)).map(bound),
+		before: selfPending ? waiting.map(bound) : []
+	};
+};
+//#endregion
+export { rankBounds };

package/dist/app/rank-after/ranked-place.js

@@ -0,0 +1,45 @@
+import { recordKey } from "../../live/model-helpers.js";
+import { reorderSpan } from "../hand-order/reorder-span.js";
+import { placing } from "../displays/board-place.js";
+import { text } from "./messages.js";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/rank-after/ranked-place.ts
+const isRank = (value) => value !== null && value !== void 0 && value !== "";
+/**
+* Where a card of a ranked board dropped at `index` of a column, its cards `rows`, may land by `bounds`: at the first
+* place from there down where the ranks its `reorder` gives keep it below each record it depends on and above each that
+* depends on it, wherever those are. In the last place it may take a rank just above what it depends on, for a record
+* of another column that ranks above the whole column. With the reason it refused `index`; with no place, none.
+*/
+const rankedPlace = ({ model, rank, rows, row, index, bounds, title }) => {
+	const end = rows.some((entry) => entry.key === row.key) ? rows.length - 1 : rows.length;
+	let reason;
+	for (let at = index; at <= end; at++) {
+		const { order, first, last } = placing(rows, row, at);
+		const ranks = order.map((entry) => entry.record[rank]);
+		const span = reorderSpan(ranks, first, last);
+		const ranked = new Map(order.map((entry, i) => [encodeKey(recordKey(model, entry.record)), i >= span.first && i <= span.last ? span.start + i - span.first : ranks[i]]));
+		const rankOf = (bound) => ranked.has(bound.key) ? ranked.get(bound.key) : bound.rank;
+		const mine = Number(ranked.get(encodeKey(recordKey(model, row.record))));
+		const above = bounds.after.filter((bound) => isRank(rankOf(bound)) && Number(rankOf(bound)) >= mine);
+		const below = bounds.before.find((bound) => isRank(rankOf(bound)) && Number(rankOf(bound)) <= mine);
+		const refusal = below ? text("dependsOn", below.title, title) : above[0] && text("dependsOn", title, above[0].title);
+		if (!refusal) return {
+			place: { index: at },
+			...reason !== void 0 && { reason }
+		};
+		reason ??= refusal;
+		if (at !== end || below) continue;
+		const bump = Math.max(...above.map((bound) => Number(rankOf(bound)))) + 1;
+		if (bounds.before.every((bound) => !isRank(rankOf(bound)) || Number(rankOf(bound)) > bump)) return {
+			place: {
+				index: at,
+				bump
+			},
+			reason
+		};
+	}
+	return { reason };
+};
+//#endregion
+export { rankedPlace };

package/dist/app/staff-banner.js

@@ -44,7 +44,7 @@ const StaffBanner = ({ signIn, onStop }) => {
 			}),
 			error && /* @__PURE__ */ jsx("p", {
 				role: "alert",
-				className: "text-xs font-medium text-danger-text",
+				className: "text-body font-medium text-danger-text",
 				children: error
 			}),
 			/* @__PURE__ */ jsx(Button, {

package/dist/app-shell/sidebar-group.js

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-group.tsx
 const row = {
 	"text-large": "h-8 gap-2.5 px-2.5",
-	"text-small": "h-7 gap-2 px-2 text-xs"
+	"text-small": "h-7 gap-2 px-2 text-body"
 };
 /** Lines the records up under the entry's icon. */
 const indent = {

package/dist/app-shell/sidebar-item.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-item.tsx
 const layout = {
 	"text-large": "h-9 gap-3 px-3 text-sm",
-	"text-small": "h-7 gap-2.5 px-2.5 text-xs",
+	"text-small": "h-7 gap-2.5 px-2.5 text-body",
 	icon: "size-9 justify-center",
 	"icon-label": "w-full flex-col gap-0.5 py-1.5 text-[10px]",
 	"icon-tooltip": "size-9 justify-center",

package/dist/app-shell/sidebar.js

@@ -34,7 +34,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, forceExpanded, pr
 					children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", {
 						className: cn("flex flex-col gap-0.5", index > 0 && "mt-3"),
 						children: [inline ? /* @__PURE__ */ jsx("div", {
-							className: cn("px-3 pb-1 pt-1 text-[11px] font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
+							className: cn("px-3 pb-1 pt-1 text-xs font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
 							children: group.label
 						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
 							item,