@protobase/ui 0.25.4 → 0.25.6

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/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/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/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/action.js

@@ -6,9 +6,11 @@ import { propsOf } from "./block-props.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/action.tsx
-/** A button for a named action of the resource's view, asking first when the action has `confirm` or `inputs`. */
-const ActionBlock = ({ node }) => {
-	const { name, resource, label, variant } = propsOf(node);
+/**
+* A button for a named action of `resource`'s view, by default of the record around it, on that record, asking first
+* when the action has `confirm` or `inputs`; nothing when the view has no such action for the user.
+*/
+const ActionButton = ({ name, resource, label, variant }) => {
 	const scope = useLayoutRecord();
 	const action = useRunAction(resource ?? scope?.model.name ?? "", name, resource === void 0 || resource === scope?.model.name ? scope : void 0);
 	const [asking, setAsking] = useState(false);
@@ -38,5 +40,7 @@ const ActionBlock = ({ node }) => {
 		}
 	})] });
 };
+/** An Action block: its button. */
+const ActionBlock = ({ node }) => /* @__PURE__ */ jsx(ActionButton, { ...propsOf(node) });
 //#endregion
-export { ActionBlock };
+export { ActionBlock, ActionButton };

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/related-cards/clamped.js

@@ -0,0 +1,43 @@
+import { cn } from "../../lib/cn.js";
+import { Button } from "../../primitives/button.js";
+import { text } from "./messages.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/related-cards/clamped.tsx
+/**
+* Its content cut off at a few lines' height with "Show more" under it when it is taller, which shows it all; the cut
+* hides the rest rather than scrolling it, so the page keeps its one scrollbar.
+*/
+const Clamped = ({ children }) => {
+	const content = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [taller, setTaller] = useState(false);
+	useLayoutEffect(() => {
+		const box = content.current;
+		if (!box) return;
+		const measure = () => setTaller(box.scrollHeight > box.parentElement.clientHeight + 1);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(box);
+		return () => observer.disconnect();
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-start gap-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("w-full min-w-0", !open && "max-h-40 overflow-hidden"),
+			children: /* @__PURE__ */ jsx("div", {
+				ref: content,
+				children
+			})
+		}), (taller || open) && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			className: "-ml-2",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			children: open ? text("showLess") : text("showMore")
+		})]
+	});
+};
+//#endregion
+export { Clamped };

package/dist/app/related-cards/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/related-cards/messages.ts
+const text = defineMessages({
+	en: {
+		showMore: "Show more",
+		showLess: "Show less",
+		couldNotLoad: "Could not load",
+		nothingYet: "Nothing here yet."
+	},
+	nl: {
+		showMore: "Meer tonen",
+		showLess: "Minder tonen",
+		couldNotLoad: "Kon niet laden",
+		nothingYet: "Hier staat nog niets."
+	}
+});
+//#endregion
+export { text };

package/dist/app/related-cards/related-card.js

@@ -0,0 +1,66 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { recordKey, recordTitle } from "../../live/model-helpers.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
+import { RecordScope } from "../pages/record-scope.js";
+import { ActionButton } from "../pages/blocks/action.js";
+import { FieldValue } from "../pages/field-value.js";
+import { usePathValue } from "../pages/use-path-value.js";
+import { fieldLabel } from "../pages/blocks/field.js";
+import { Clamped } from "./clamped.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/related-cards/related-card.tsx
+const CardField = ({ scope, path }) => {
+	const { views } = useAdminMeta();
+	const value = usePathValue(scope, path);
+	if (value.state === "missing") return null;
+	const label = fieldLabel(path, value.state === "ready" ? views[value.model.name]?.fields[value.field.name]?.label : void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-body text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "mt-0.5",
+			children: value.state === "loading" ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) : /* @__PURE__ */ jsx(Clamped, { children: /* @__PURE__ */ jsx(FieldValue, {
+				model: value.model,
+				field: value.field,
+				value: value.value
+			}) })
+		})]
+	});
+};
+/**
+* A related record as a card: its title linking to its page, its `fields` under their labels and the buttons of its
+* view's `actions`, run on it as everywhere else.
+*/
+const RelatedCard = ({ scope, view, fields, actions }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-surface p-4",
+	children: [
+		/* @__PURE__ */ jsx(AppLink, {
+			to: {
+				kind: "record",
+				resource: scope.model.name,
+				key: recordKey(scope.model, scope.record)
+			},
+			className: "self-start font-medium text-primary-text hover:underline",
+			children: recordTitle(scope.model, view, scope.record, scope.key)
+		}),
+		fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+			className: "flex flex-col gap-3",
+			children: fields.map((path) => /* @__PURE__ */ jsx(CardField, {
+				scope,
+				path
+			}, path))
+		}),
+		actions.length > 0 && /* @__PURE__ */ jsx(RecordScope, {
+			value: scope,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: actions.map((name) => /* @__PURE__ */ jsx(ActionButton, { name }, name))
+			})
+		})
+	]
+});
+//#endregion
+export { RelatedCard };