@protobase/ui 0.19.15 → 0.20.0

package/dist/app/app.js

@@ -12,7 +12,7 @@ import { CustomBoundary } from "./pages/custom-boundary.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
-import { useRecord } from "../data/use-record.js";
+import { useOpenedRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
@@ -92,7 +92,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const view = resource ? meta.views[resource] : void 0;
 	const group = groups.find((entry) => entry.items.some((item) => item.id === place));
 	const model = resource ? meta.resources[resource] : void 0;
-	const record = useRecord(shown?.resource ?? "", shown?.key ?? "", Boolean(model && shown));
+	const record = useOpenedRecord(shown?.resource ?? "", shown?.key ?? "", Boolean(model && shown));
 	const title = model && shown && record.data ? recordTitle(model, view, record.data.record, shown.key) : void 0;
 	const titleLoading = Boolean(shown) && (record.isLoading || drawnFrom?.state === "loading");
 	const { shell } = useProjectUi();

package/dist/app/charts/chart-groups.js

@@ -0,0 +1,52 @@
+import { createWhere, enumLabel, printFilter } from "@protobase/schema";
+//#region src/app/charts/chart-groups.ts
+const where$1 = createWhere();
+const slot = (index) => index >= 0 && index < 8 ? `var(--chart-${index + 1})` : "var(--faint-foreground)";
+const colorOf = (field, hints, value, index) => {
+	const key = String(value);
+	if (value === null) return "var(--faint-foreground)";
+	if (hints?.valueColors && Object.hasOwn(hints.valueColors, key)) return hints.valueColors[key];
+	if (field.type === "enum") return slot(field.enumValues?.indexOf(key) ?? -1);
+	if (field.type === "boolean") return slot(value ? 0 : 1);
+	return slot(index);
+};
+const labelOf = (field, hints, group) => {
+	if (group.value === null) return "Not set";
+	if (field.type === "enum") return enumLabel(String(group.value), hints?.valueLabels);
+	if (field.type === "boolean") return group.value ? "Yes" : "No";
+	return group.label ?? String(group.value);
+};
+/** The records of one group: the chart's own filter and the group's value. */
+const groupFilter = (field, value, filter = "") => {
+	const own = printFilter(value === null ? where$1.isNull(field.name) : where$1.eq(field.name, value));
+	return filter.trim() ? `(${filter}) AND ${own}` : own;
+};
+const measured = (group, measure) => measure.kind === "count" ? group.count : group[measure.kind] ?? null;
+/** The groups of a field of values as slices, in the order the API ranks them. */
+const valueSlices = (groups, field, hints, measure, filter = "") => groups.map((group, index) => ({
+	key: String(group.value),
+	label: labelOf(field, hints, group),
+	value: measured(group, measure),
+	count: group.count,
+	color: colorOf(field, hints, group.value, index),
+	filter: groupFilter(field, group.value, filter)
+}));
+/** A date field's buckets as points in time, the bucket's start read as UTC as the list's chart reads it. */
+const periodPoints = (groups, measure) => groups.map((group) => ({
+	at: Date.parse(`${String(group.value)}Z`),
+	value: measured(group, measure),
+	count: group.count
+}));
+/** A measured number as text: a count whole, a sum or average with the field's decimals, prefix and suffix. */
+const measureText = (value, measure) => {
+	if (value === null) return "—";
+	if (measure.kind === "count") return value.toLocaleString("en-IE");
+	const decimals = measure.hints?.decimals ?? (Number.isInteger(value) ? 0 : 2);
+	const text = value.toLocaleString("en-IE", {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	});
+	return `${measure.hints?.prefix ?? ""}${text}${measure.hints?.suffix ?? ""}`;
+};
+//#endregion
+export { groupFilter, measureText, periodPoints, valueSlices };

package/dist/app/charts/chart-view.js

@@ -0,0 +1,75 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { labelFieldOf } from "../../live/model-helpers.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useAggregate } from "../../data/use-aggregates.js";
+import { periodPoints, valueSlices } from "./chart-groups.js";
+import { GroupBars } from "./group-bars.js";
+import { GroupDonut } from "./group-donut.js";
+import { PeriodChart } from "./period-chart.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/charts/chart-view.tsx
+const measureOf = (model, view, sum, average) => {
+	const name = sum ?? average;
+	const field = name === void 0 ? void 0 : model.fields[name];
+	if (!field || name === void 0) return { kind: "count" };
+	return {
+		kind: sum !== void 0 ? "sum" : "average",
+		field,
+		hints: view?.fields[name]
+	};
+};
+/**
+* Loads a chart's groups through `:aggregate` and draws them: a date field's buckets as bars or a line, a field's
+* values as ranked bars or a donut, each value linking to its records. The server checked the chart at startup.
+*/
+const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter = "", granularity = "day", range = "30d", limit = 10, empty = "Nothing to chart yet." }) => {
+	const { resources, views } = useAdminMeta();
+	const field = model.fields[groupBy];
+	const dated = field?.type === "date" || field?.type === "timestamp";
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	const label = target && target.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
+	const params = dated ? {
+		granularity,
+		range
+	} : {
+		limit,
+		...label && { label }
+	};
+	const result = useAggregate(model.name, {
+		groupBy,
+		filter,
+		...sum && { sum },
+		...average && { average },
+		...params
+	}, Boolean(field));
+	const measure = measureOf(model, view, sum, average);
+	if (!field) return null;
+	if (result.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-36 w-full" });
+	if (result.error) return /* @__PURE__ */ jsx("p", {
+		className: "text-danger-text",
+		children: "Could not load the chart."
+	});
+	const { groups } = result.data;
+	if (groups.every((group) => group.count === 0)) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children: empty
+	});
+	if (dated) return /* @__PURE__ */ jsx(PeriodChart, {
+		points: periodPoints(groups, measure),
+		measure,
+		bucket: granularity,
+		type: type === "line" ? "line" : "bar"
+	});
+	const slices = valueSlices(groups, field, view?.fields[groupBy], measure, filter);
+	return type === "donut" ? /* @__PURE__ */ jsx(GroupDonut, {
+		resource: model.name,
+		slices,
+		measure
+	}) : /* @__PURE__ */ jsx(GroupBars, {
+		resource: model.name,
+		slices,
+		measure
+	});
+};
+//#endregion
+export { ChartView };

package/dist/app/charts/group-bars.js

@@ -0,0 +1,49 @@
+import { AppLink } from "../use-app-address.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/charts/group-bars.tsx
+/**
+* A ranked list of a field's values, each a bar as long as its number and a link to its records. Bars in rows read on
+* a phone as well as on a desk, and carry their label and value as text, so no colour has to say what a bar is.
+*/
+const GroupBars = ({ resource, slices, measure }) => {
+	const largest = Math.max(0, ...slices.map((slice) => slice.value ?? 0));
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1",
+		children: slices.map((slice) => {
+			const share = largest > 0 && slice.value !== null ? Math.max(0, slice.value) / largest : 0;
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: {
+					kind: "list",
+					resource,
+					filter: slice.filter
+				},
+				className: "group grid grid-cols-[minmax(6rem,35%)_1fr_auto] items-center gap-3 rounded-md px-1 py-1 hover:bg-muted",
+				title: measure.kind === "count" ? void 0 : `${measureText(slice.count, { kind: "count" })} records`,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate group-hover:text-primary-text",
+						children: slice.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-3 rounded-r bg-muted",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "block h-full rounded-r",
+							style: {
+								width: `${share * 100}%`,
+								background: "var(--chart-1)"
+							}
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-right font-medium tabular-nums",
+						children: measureText(slice.value, measure)
+					})
+				]
+			}) }, slice.key);
+		})
+	});
+};
+//#endregion
+export { GroupBars };

package/dist/app/charts/group-donut.js

@@ -0,0 +1,84 @@
+import { AppLink } from "../use-app-address.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
+//#region src/app/charts/group-donut.tsx
+const percent = (part, whole) => whole > 0 ? `${Math.round(part / whole * 100)}%` : "";
+const SliceTooltip = ({ active, payload, measure }) => {
+	const slice = payload?.[0]?.payload;
+	if (!active || !slice) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border bg-background px-2.5 py-1.5 text-xs shadow-pop",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: slice.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "font-semibold tabular-nums",
+			children: measureText(slice.value, measure)
+		})]
+	});
+};
+/**
+* A donut of how a total shares out over a field's values, with a legend that names each, gives its number and share,
+* and links to its records: the legend, not the colour, says which slice is which.
+*/
+const GroupDonut = ({ resource, slices, measure }) => {
+	const drawn = slices.filter((slice) => slice.value !== null && slice.value > 0);
+	const whole = drawn.reduce((sum, slice) => sum + slice.value, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-4 sm:flex-row sm:items-center",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "size-36 shrink-0",
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+					data: drawn,
+					dataKey: "value",
+					nameKey: "label",
+					innerRadius: "62%",
+					outerRadius: "100%",
+					paddingAngle: drawn.length > 1 ? 1 : 0,
+					stroke: "var(--background)",
+					strokeWidth: 2,
+					isAnimationActive: false,
+					children: drawn.map((slice) => /* @__PURE__ */ jsx(Cell, { fill: slice.color }, slice.key))
+				}), /* @__PURE__ */ jsx(Tooltip, {
+					content: /* @__PURE__ */ jsx(SliceTooltip, { measure }),
+					isAnimationActive: false
+				})] })
+			})
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex w-full min-w-0 flex-col gap-0.5",
+			children: slices.map((slice) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: {
+					kind: "list",
+					resource,
+					filter: slice.filter
+				},
+				className: "group flex items-center gap-2 rounded-md px-1 py-0.5 hover:bg-muted",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "size-2.5 shrink-0 rounded-full",
+						style: { background: slice.color },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate group-hover:text-primary-text",
+						children: slice.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium tabular-nums",
+						children: measureText(slice.value, measure)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "w-9 text-right text-xs text-muted-foreground tabular-nums",
+						children: percent(slice.value ?? 0, whole)
+					})
+				]
+			}) }, slice.key))
+		})]
+	});
+};
+//#endregion
+export { GroupDonut };

package/dist/app/charts/period-chart.js

@@ -0,0 +1,174 @@
+import { useMediaQuery } from "../../lib/use-media-query.js";
+import { measureText } from "./chart-groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region src/app/charts/period-chart.tsx
+const formats = {
+	hour: {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	},
+	day: {
+		day: "numeric",
+		month: "short"
+	},
+	week: {
+		day: "numeric",
+		month: "short"
+	},
+	month: {
+		month: "short",
+		year: "2-digit"
+	},
+	year: { year: "numeric" }
+};
+const tooltipFormats = {
+	hour: {
+		day: "numeric",
+		month: "short",
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	},
+	day: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	week: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	month: {
+		month: "long",
+		year: "numeric"
+	},
+	year: { year: "numeric" }
+};
+const formatterOf = (options) => {
+	const format = new Intl.DateTimeFormat("en-GB", {
+		...options,
+		timeZone: "UTC"
+	});
+	return (ms) => format.format(ms);
+};
+const axisTick = {
+	fontSize: 11,
+	fill: "var(--muted-foreground)"
+};
+const PointTooltip = ({ active, payload, measure, bucket }) => {
+	const point = payload?.[0]?.payload;
+	if (!active || !point) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border bg-background px-2.5 py-1.5 text-xs shadow-pop",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: (bucket === "week" ? "Week of " : "") + formatterOf(tooltipFormats[bucket])(point.at)
+		}), /* @__PURE__ */ jsx("div", {
+			className: "font-semibold tabular-nums",
+			children: measureText(point.value, measure)
+		})]
+	});
+};
+/** A date field's buckets over time, as bars or a line; a bucket without a value to add up is a gap. */
+const PeriodChart = ({ points, measure, bucket, type }) => {
+	const wide = useMediaQuery("(min-width: 640px)");
+	const tick = formatterOf(formats[bucket]);
+	const grid = /* @__PURE__ */ jsx(CartesianGrid, {
+		vertical: false,
+		stroke: "var(--border)"
+	});
+	const x = /* @__PURE__ */ jsx(XAxis, {
+		dataKey: "at",
+		tickFormatter: tick,
+		tick: axisTick,
+		axisLine: false,
+		tickLine: false,
+		minTickGap: wide ? 24 : 40,
+		height: 18
+	});
+	const y = /* @__PURE__ */ jsx(YAxis, {
+		width: wide ? 48 : 36,
+		tick: axisTick,
+		axisLine: false,
+		tickLine: false,
+		tickCount: 3,
+		tickFormatter: (value) => value.toLocaleString("en-IE", { notation: "compact" })
+	});
+	const tooltip = /* @__PURE__ */ jsx(Tooltip, {
+		cursor: type === "bar" ? { fill: "var(--muted)" } : { stroke: "var(--border-strong)" },
+		content: /* @__PURE__ */ jsx(PointTooltip, {
+			measure,
+			bucket
+		}),
+		isAnimationActive: false
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "h-40",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: type === "line" ? /* @__PURE__ */ jsxs(LineChart, {
+				data: points,
+				margin: {
+					top: 6,
+					right: 6,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					grid,
+					x,
+					y,
+					tooltip,
+					/* @__PURE__ */ jsx(Line, {
+						dataKey: "value",
+						stroke: "var(--chart-1)",
+						strokeWidth: 2,
+						dot: points.length <= 31 ? {
+							r: 3,
+							fill: "var(--chart-1)",
+							strokeWidth: 0
+						} : false,
+						activeDot: {
+							r: 4,
+							stroke: "var(--background)",
+							strokeWidth: 2
+						},
+						isAnimationActive: false
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(BarChart, {
+				data: points,
+				margin: {
+					top: 6,
+					right: 0,
+					bottom: 0,
+					left: 0
+				},
+				barCategoryGap: "22%",
+				children: [
+					grid,
+					x,
+					y,
+					tooltip,
+					/* @__PURE__ */ jsx(Bar, {
+						dataKey: "value",
+						fill: "var(--chart-1)",
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						isAnimationActive: false
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+export { PeriodChart };

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

@@ -0,0 +1,114 @@
+import { cn } from "../../lib/cn.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { Button } from "../../primitives/button.js";
+import { humanize } from "../../live/naming.js";
+import { ErrorBanner } from "../error-banner.js";
+import { boardCard } from "./board-columns.js";
+import { rowAllows } from "../permissions.js";
+import { ValueBadge } from "../value-badge.js";
+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";
+//#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 list = useBoardColumn({
+		model,
+		by: display.by,
+		value: column.value,
+		fields,
+		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 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();
+	const hints = view?.fields[display.by];
+	return /* @__PURE__ */ jsxs("section", {
+		ref: setNodeRef,
+		"aria-label": `${column.label}, ${count}`,
+		className: cn("flex w-72 shrink-0 snap-start flex-col gap-2 rounded-lg bg-surface p-2", isOver && "ring-2 ring-primary/30"),
+		children: [
+			/* @__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",
+					children: column.value === null ? /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: column.label
+					}) : /* @__PURE__ */ jsx(ValueBadge, {
+						value: column.value,
+						hints,
+						children: column.label
+					})
+				}), !list.loading && /* @__PURE__ */ jsx("span", {
+					className: "text-xs tabular-nums text-muted-foreground",
+					children: count.toLocaleString("en-IE")
+				})]
+			}),
+			list.loading ? Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-20" }, index)) : list.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+				title: "Could not load rows",
+				error: list.error
+			}) : 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))
+			}),
+			limit === void 0 && list.more && /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				onClick: list.loadMore,
+				children: "Show more"
+			})
+		]
+	});
+};
+const BoardCard = ({ model, view, card, row, movable, dragged }) => {
+	const { setNodeRef, setActivatorNodeRef, listeners, isDragging } = useDraggable({
+		id: row.key,
+		data: { row },
+		disabled: !movable
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: (element) => {
+			setNodeRef(element);
+			setActivatorNodeRef(element?.querySelector("a") ?? element);
+		},
+		...listeners,
+		onDragStart: (event) => event.preventDefault(),
+		onClickCapture: (event) => {
+			if (!dragged()) return;
+			event.preventDefault();
+			event.stopPropagation();
+		},
+		className: cn(movable && "cursor-grab touch-manipulation", isDragging && "opacity-40"),
+		children: /* @__PURE__ */ jsx(RecordCard, {
+			model,
+			view,
+			display: card,
+			row,
+			swipe: false
+		})
+	});
+};
+//#endregion
+export { BoardColumnView };

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

@@ -0,0 +1,45 @@
+import { recordTitleField } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { isApiError } from "@protobase/client";
+import { enumLabel, printFilter, where } from "@protobase/schema";
+//#region src/app/displays/board-columns.ts
+/**
+* A board's columns: one per value of its enum field, in the order the field lists them, headed by the view's value
+* label; then, when the field may be empty, one for the records without a value.
+*/
+const boardColumns = (model, view, display) => {
+	const field = model.fields[display.by];
+	if (!field) return [];
+	const hints = view?.fields[display.by];
+	const values = (field.enumValues ?? []).map((value) => ({
+		value,
+		label: enumLabel(value, hints?.valueLabels)
+	}));
+	if (!field.nullable) return values;
+	return [...values, {
+		value: null,
+		label: `No ${(hints?.label ?? humanize(display.by)).toLowerCase()}`
+	}];
+};
+/** 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));
+	return filter === "" ? column : `(${filter}) AND ${column}`;
+};
+/** The built-in card a board draws for each record: that of a cards display of the board's fields. */
+const boardCard = (model, view, display) => ({
+	kind: "cards",
+	name: display.name,
+	title: display.title ?? recordTitleField(model, view),
+	...display.subtitle !== void 0 && { subtitle: display.subtitle },
+	...display.badge !== void 0 && { badge: display.badge },
+	...display.meta && { meta: display.meta }
+});
+/** Why the server refused a move: the reasons it gives per field, such as a `validate` message, else its detail. */
+const refusalReason = (error) => {
+	if (!isApiError(error)) return error instanceof Error ? error.message : "Something went wrong";
+	const reasons = error.errors.map((entry) => entry.message);
+	return reasons.length > 0 ? reasons.join("; ") : error.message;
+};
+//#endregion
+export { boardCard, boardColumns, columnFilter, refusalReason };