@protobase/ui 0.19.15 → 0.19.16

package/dist/app/list-edit/use-list-cell-editor.js

@@ -0,0 +1,30 @@
+import { isEditable } from "../../live/field-values.js";
+import { can, rowAllows } from "../permissions.js";
+import { CellFieldEditor } from "./cell-field-editor.js";
+import { useListEdits } from "./use-list-edits.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-edit/use-list-cell-editor.tsx
+/**
+* The list's cells edited in place: the view's `editable` columns, which `/meta` keeps to the fields the caller may
+* write, of the rows the caller may change. `patches` are the values saved since the rows loaded, for the grid to show.
+*/
+const useListCellEditor = (model, view, permissions) => {
+	const edits = useListEdits(model);
+	const columns = view?.list?.editable ?? [];
+	return {
+		editor: columns.length > 0 && can(permissions, "update") ? {
+			editable: (row, column) => columns.includes(column) && model.fields[column] !== void 0 && isEditable(model.fields[column]) && rowAllows(row, "update"),
+			render: (row, column, close) => /* @__PURE__ */ jsx(CellFieldEditor, {
+				field: model.fields[column],
+				hints: view?.fields[column],
+				resource: model.name,
+				stored: row[column],
+				onSave: (value) => void edits.save(row, column, value),
+				close
+			})
+		} : void 0,
+		patches: edits.patches
+	};
+};
+//#endregion
+export { useListCellEditor };

package/dist/app/list-edit/use-list-edits.js

@@ -0,0 +1,75 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useRef, useState } from "react";
+import { isApiError } from "@protobase/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/list-edit/use-list-edits.ts
+/**
+* The list's edits in place: `patches` holds, by row id, the values saving or saved since the rows loaded, with the
+* ETag each saved row has now. `save` sends one field as a PATCH with the row's ETag, after any save of the same row
+* still under way. A refusal puts the old value back, or the record's current one when someone else changed it, and
+* says why in a toast.
+*/
+const useListEdits = (model) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const toast = useToast();
+	const [patches, setPatches] = useState(/* @__PURE__ */ new Map());
+	const current = useRef(patches);
+	const queues = useRef(/* @__PURE__ */ new Map());
+	const patch = (id, values) => {
+		current.current = new Map(current.current).set(id, {
+			...current.current.get(id),
+			...values
+		});
+		setPatches(current.current);
+	};
+	const send = async (row, name, value) => {
+		const key = recordKey(model, row);
+		const etag = String(current.current.get(row.id)?.etag ?? row.etag);
+		try {
+			const stored = await client.update(model.name, key, { [name]: value }, etag);
+			patch(row.id, {
+				[name]: stored.record[name],
+				etag: stored.etag
+			});
+			queryClient.setQueryData(keys.record(model.name, encodeKey(key)), stored);
+			queryClient.invalidateQueries({ queryKey: ["page", model.name] });
+			queryClient.invalidateQueries({ queryKey: ["list", model.name] });
+			queryClient.invalidateQueries({ queryKey: ["map", model.name] });
+		} catch (error) {
+			if (!isApiError(error)) {
+				patch(row.id, { [name]: row[name] });
+				throw error;
+			}
+			const changed = error.status === 412;
+			const latest = changed ? await client.get(model.name, key) : void 0;
+			patch(row.id, latest ? {
+				[name]: latest.record[name],
+				etag: latest.etag
+			} : { [name]: row[name] });
+			const reason = error.errors.find((entry) => entry.field === name)?.message ?? error.message;
+			toast.show({
+				state: "error",
+				title: changed ? "Changed by someone else" : "Could not save",
+				description: reason
+			});
+		}
+	};
+	/** Saves `value` as the field `name` of `row`, as the grid shows it before the edit. */
+	const save = (row, name, value) => {
+		patch(row.id, { [name]: value });
+		const queued = (queues.current.get(row.id) ?? Promise.resolve()).then(() => send(row, name, value));
+		queues.current.set(row.id, queued.catch(() => void 0));
+		return queued;
+	};
+	return {
+		patches,
+		save
+	};
+};
+//#endregion
+export { useListEdits };

package/dist/app/list-page.js

@@ -9,7 +9,7 @@ import { useProjectUi } from "./pages/project-ui.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Sheet } from "../primitives/sheet.js";
 import { ErrorBanner } from "./error-banner.js";
-import { loadedFields, shownDisplay } from "./displays/list-displays.js";
+import { displayRow, loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
@@ -26,7 +26,11 @@ import { FilterPanel } from "../filter-panel/filter-panel.js";
 import { stateToText, textToState } from "../live/filter-string.js";
 import { widgetFields } from "../live/view-fields.js";
 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 { useDisplayRows } from "./displays/use-display-rows.js";
+import { BoardDisplay } from "./displays/board-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
@@ -39,22 +43,21 @@ import { ImportButton } from "./import/import-button.js";
 import { exportOffered, exportsSelection } from "./export/export-options.js";
 import { useExportFlow } from "./export/use-export-flow.js";
 import { ListCards } from "./displays/list-cards.js";
-import { useDisplayRows } from "./displays/use-display-rows.js";
 import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
-import { relatedColumnLoads } from "./related-dots/dot-card.js";
 import { withRelatedDotsColumns } from "./related-dots/related-dots-columns.js";
 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 { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
 import { tableDisplay } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
-const where = createWhere();
+const where$1 = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
 /**
 * A resource's list: its rows, with `listOf` the records its relation points at (`SavedList`), or with `searchesOf` the
@@ -169,6 +172,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	});
 	const singular = view?.names?.singular ?? humanize(resource);
 	const permissions = usePermissions(resource);
+	const cellEditing = useListCellEditor(model, view, permissions);
 	const { state: auth } = useAuth();
 	const restore = useRestore(model);
 	const remove = useDeleteFlow({
@@ -185,7 +189,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const search = searchText(extras);
 	const commitSearch = (text) => {
 		const others = extras.filter((clause) => clause.kind !== "search");
-		setFilter(state, text ? [...others, where.search(text)] : others);
+		setFilter(state, text ? [...others, where$1.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
 	const sortMenu = display && /* @__PURE__ */ jsx(SortMenu, {
@@ -309,17 +313,23 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		onChange: (name) => set({ display: name }),
 		menu
 	});
-	const openRecord = (row) => go({
-		kind: "record",
-		resource,
-		key: recordKey(model, row)
-	});
+	const seedRecord = useSeedRecord(model);
+	const openRecord = (row) => {
+		seedRecord(displayRow(model, row).record);
+		go({
+			kind: "record",
+			resource,
+			key: recordKey(model, row)
+		});
+	};
 	const table = rows.source ? /* @__PURE__ */ jsx(DataGrid, {
 		columns,
 		source: rows.source,
 		sort: parseSort(orderBy),
 		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
 		onOpenRow: openRecord,
+		cellEditor: cellEditing.editor,
+		rowPatches: cellEditing.patches,
 		initialScrollIndex: scroll.initialIndex,
 		onScrollIndex: scroll.remember,
 		rowActions: [{
@@ -368,6 +378,14 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			onMove: (map) => set({ map }),
 			flush: true
 		});
+		if (display.kind === "board") return /* @__PURE__ */ jsx(BoardDisplay, {
+			model,
+			view,
+			display,
+			fields: loaded,
+			filter: loadFilter,
+			orderBy
+		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,
 			list: displayRows

package/dist/app/map/map-area.js

@@ -1,6 +1,6 @@
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/map/map-area.ts
-const where = createWhere();
+const where$1 = createWhere();
 /** The whole world from as far out as a map goes: what a map asks for before it knows where its records are. */
 const worldArea = {
 	bounds: {
@@ -20,11 +20,11 @@ const wrapped = (longitude) => ((longitude + 180) % 360 + 360) % 360 - 180;
 * A view across the antimeridian takes the longitudes on both sides of it, and one around the whole world takes them all.
 */
 const boundsFilter = (fields, bounds) => {
-	const latitude = [where.gte(fields.latitude, down(Math.max(bounds.south, -90))), where.lte(fields.latitude, up(Math.min(bounds.north, 90)))];
-	if (bounds.east - bounds.west >= 360) return where.and(...latitude);
-	const west = where.gte(fields.longitude, down(wrapped(bounds.west)));
-	const east = where.lte(fields.longitude, up(wrapped(bounds.east)));
-	return wrapped(bounds.west) <= wrapped(bounds.east) ? where.and(...latitude, west, east) : where.and(...latitude, where.or(west, east));
+	const latitude = [where$1.gte(fields.latitude, down(Math.max(bounds.south, -90))), where$1.lte(fields.latitude, up(Math.min(bounds.north, 90)))];
+	if (bounds.east - bounds.west >= 360) return where$1.and(...latitude);
+	const west = where$1.gte(fields.longitude, down(wrapped(bounds.west)));
+	const east = where$1.lte(fields.longitude, up(wrapped(bounds.east)));
+	return wrapped(bounds.west) <= wrapped(bounds.east) ? where$1.and(...latitude, west, east) : where$1.and(...latitude, where$1.or(west, east));
 };
 /** The list's filter, its search included, narrowed to the records inside the map's bounds. */
 const areaFilter = (listFilter, fields, bounds) => {

package/dist/app/pages/action-href.js

@@ -25,12 +25,14 @@ const openLink = (target) => {
 	else window.location.assign(target);
 };
 const hostOf = (target) => URL.canParse(target) ? new URL(target).hostname.replace(/^www\./, "") : "";
+const holdsAll = (record, values) => Object.entries(values).every(([name, value]) => Object.is(record[name], value));
 /**
-* `action` as it shows for `record`: a link whose `href` has no target there is left out, and `{host}` in a link's label
-* becomes the host its target opens, without `www.`.
+* `action` as it shows for `record`: an update that would change nothing there, and a link whose `href` has no target
+* there, are left out, and `{host}` in a link's label becomes the host its target opens, without `www.`.
 */
 const actionFor = (action, record) => {
 	const run = action.run;
+	if (run?.kind === "update") return record && holdsAll(record, run.values) ? void 0 : action;
 	if (run?.kind !== "link" || !("href" in run)) return action;
 	const target = linkTarget(run.href, record);
 	if (target === void 0) return void 0;

package/dist/app/pages/use-run-action.js

@@ -12,9 +12,10 @@ import { fillAddress } from "@protobase/schema/internal";
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
 * The named actions of `resource`'s view, ready to run on `scope` (the record they act on): built-in behaviour first
-* (`update`, `delete`, `link`), else the handler the project registered under the action's name. A link to a URL the
-* record holds is left out while it holds none. `blocked` says why one cannot run; `afterRun` hears about every action
-* that succeeded. `submit` runs one with the answers to its inputs and throws its failure, for the dialog to show.
+* (`update`, `delete`, `link`), else the handler the project registered under the action's name. An update whose values
+* the record holds already is left out, and so is a link to a URL the record holds while it holds none. `blocked` says
+* why one cannot run; `afterRun` hears about every action that succeeded. `submit` runs one with the answers to its
+* inputs and throws its failure, for the dialog to show.
 */
 const useActionRunner = (resource, scope, afterRun) => {
 	const { views } = useAdminMeta();

package/dist/app/record-page.js

@@ -1,11 +1,13 @@
 import { cn } from "../lib/cn.js";
+import { Skeleton } from "../primitives/skeleton.js";
 import { inApp } from "../app-shell/breadcrumb.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
+import { usePauseFocusRefresh } from "../data/focus-refresh.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { useNavigationGuard, useRouter } from "./router.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 { useProjectUi } from "./pages/project-ui.js";
@@ -16,6 +18,7 @@ import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record
 import { RecordHeader } from "../record-view/record-header.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
+import { isRequiredOnEdit } from "../live/field-values.js";
 import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/record-mode.js";
 import { ErrorBanner } from "./error-banner.js";
 import { displayValue } from "../live/display-value.js";
@@ -70,7 +73,7 @@ const layoutFor = (model, view, read) => {
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
 	const model = resources[resource];
-	const record = useRecord(resource, recordKey);
+	const record = useOpenedRecord(resource, recordKey);
 	if (!model) return /* @__PURE__ */ jsxs(Notice, {
 		title: "Not found",
 		children: [
@@ -96,10 +99,11 @@ const RecordPage = ({ resource, recordKey }) => {
 	return /* @__PURE__ */ jsx(LoadedRecord, {
 		model,
 		recordKey,
-		stored: record.data
-	});
+		stored: record.data,
+		preview: record.isPlaceholderData
+	}, record.isPlaceholderData ? "preview" : "loaded");
 };
-const LoadedRecord = ({ model, recordKey, stored }) => {
+const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const meta = useAdminMeta();
 	const { basePath } = useRouter();
 	const { address, go, open } = useAppAddress();
@@ -115,7 +119,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		recordKey,
 		mode: view?.saveFeedback ?? "toast",
 		subject: title,
-		draftKey: auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
+		draftKey: !preview && auth.kind === "signed-in" ? draftStorageKey(auth.user.id, model.name, recordKey) : void 0,
 		lines: linesDraft
 	});
 	const queryClient = useQueryClient();
@@ -125,6 +129,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const canUpdate = can(permissions, "update") && stored.permissions?.update !== false;
 	const { shown, offersEdit, editing } = recordShown(view?.recordMode, canUpdate, address?.kind === "record" && address.edit === true);
 	useNavigationGuard(editor.dirty && shown === "form");
+	usePauseFocusRefresh(editor.dirty);
 	const readAddress = {
 		kind: "record",
 		resource: model.name,
@@ -156,6 +161,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const updatedAt = auditField(model, "updated");
 	const hint = (name) => view?.fields[name];
 	const visible = (name) => fieldAccess(stored.permissions, name) !== "hidden" && whenShown(hint(name)?.when, editing);
+	const known = (name) => !preview || Object.hasOwn(stored.record, name);
 	const fieldView = (name) => {
 		const field = model.fields[name];
 		const access = fieldAccess(stored.permissions, name);
@@ -163,6 +169,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		const conflict = editor.conflicts[name];
 		return /* @__PURE__ */ jsx(Field, {
 			label: hint(name)?.label ?? humanize(name),
+			required: shown === "form" && access !== "read" && isRequiredOnEdit(field),
 			help: fieldHelp(hint(name), view, editing),
 			error: editor.errors[name],
 			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
@@ -177,7 +184,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				onKeepMine: () => editor.keepMine(name),
 				onUseTheirs: () => editor.useTheirs(name)
 			},
-			children: /* @__PURE__ */ jsx(FieldEditor, {
+			children: known(name) ? /* @__PURE__ */ jsx(FieldEditor, {
 				field,
 				hints: hint(name),
 				value: editor.value(name),
@@ -189,12 +196,12 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
 				resource: model.name,
 				onChange: (next) => editor.change(name, next)
-			})
+			}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-9" })
 		}, field.sensitive ? `${name}:${stored.etag}` : name);
 	};
 	const readRow = (name) => {
 		const field = model.fields[name];
-		const value = field.sensitive ? /* @__PURE__ */ jsx(FieldEditor, {
+		const value = !known(name) ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }) : field.sensitive ? /* @__PURE__ */ jsx(FieldEditor, {
 			field,
 			hints: hint(name),
 			value: "",
@@ -222,6 +229,10 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		rows: sidebarFields.flatMap((name) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
+			if (!known(name)) return [{
+				label: hint(name)?.label ?? humanize(name),
+				value: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+			}];
 			const text = displayValue(field, stored.record[name], hint(name));
 			const value = stored.record[name];
 			const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
@@ -284,6 +295,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	] });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-1 flex-col",
+		inert: preview,
 		children: [
 			remove.dialogs,
 			/* @__PURE__ */ jsx("div", {
@@ -355,6 +367,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										recordKey,
 										owner: model.name
 									}, `related:${item.title}`)];
+									if (preview && (item.kind === "custom" || item.kind === "map" || item.kind === "gallery")) return [];
 									if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
 										item,
 										scope
@@ -385,7 +398,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 											children: fields.map(fieldView)
 										})
 									}, item.title)];
-								}), linesModel && /* @__PURE__ */ jsx(RecordLines, {
+								}), linesModel && !preview && /* @__PURE__ */ jsx(RecordLines, {
 									lines: linesModel,
 									draft: linesDraft,
 									vatRate: Number(stored.record.vatRate ?? 21) / 100,
@@ -399,7 +412,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										className: "hidden flex-col items-center gap-2 md:flex",
 										children: formControls
 									}),
-									/* @__PURE__ */ jsx(RecordActions, {
+									!preview && /* @__PURE__ */ jsx(RecordActions, {
 										model,
 										stored,
 										recordKey,
@@ -408,11 +421,11 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 									}),
 									firstSidebar === -1 && summary,
 									layout.map((item, index) => {
-										if (item.kind === "custom" && item.sidebar) return /* @__PURE__ */ jsx(CustomSection, {
+										if (item.kind === "custom" && item.sidebar && !preview) return /* @__PURE__ */ jsx(CustomSection, {
 											item,
 											scope
 										}, `custom:${index}`);
-										if (item.kind === "map" && item.sidebar) return /* @__PURE__ */ jsx(MapSection, {
+										if (item.kind === "map" && item.sidebar && !preview) return /* @__PURE__ */ jsx(MapSection, {
 											item,
 											record: stored.record
 										}, `map:${index}`);
@@ -422,10 +435,11 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										title: "Details",
 										rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
 											const field = name ? model.fields[name] : void 0;
-											return name && field && visible(name) ? [{
+											if (!name || !field || !visible(name)) return [];
+											return [{
 												label: hint(name)?.label ?? humanize(name),
-												value: displayValue(field, stored.record[name], hint(name))
-											}] : [];
+												value: known(name) ? displayValue(field, stored.record[name], hint(name)) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+											}];
 										})
 									}),
 									related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {

package/dist/app/record-preview.js

@@ -0,0 +1,25 @@
+import { keys } from "../data/query-keys.js";
+import { recordKey } from "../live/model-helpers.js";
+import { useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/record-preview.ts
+/**
+* A record as far as a list row knows it: the fields the row loaded, its ETag and permissions as the list gives them.
+* `row` holds relations as their keys, as `displayRow` splits a loaded row.
+*/
+const recordPreview = (model, row) => ({
+	record: Object.fromEntries(Object.entries(row).filter(([name]) => Object.hasOwn(model.fields, name))),
+	etag: typeof row.etag === "string" ? row.etag : "",
+	...typeof row.permissions === "object" && row.permissions !== null && { permissions: row.permissions }
+});
+/**
+* Keeps what a list row knows of its record for the record's page, which shows it until the record has loaded
+* (`useRecord`), so a record opened from a list shows its fields at once.
+*/
+const useSeedRecord = (model) => {
+	const queryClient = useQueryClient();
+	return useCallback((row) => queryClient.setQueryData(keys.recordPreview(model.name, encodeKey(recordKey(model, row))), recordPreview(model, row)), [queryClient, model]);
+};
+//#endregion
+export { recordPreview, useSeedRecord };

package/dist/app/record-row/record-row-body.js

@@ -16,12 +16,12 @@ import { ArrowRight } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere, parseFilter, printFilter } from "@protobase/schema";
 //#region src/app/record-row/record-row-body.tsx
-const where = createWhere();
+const where$1 = createWhere();
 const scoped = (filter, scope) => {
 	if (!scope) return filter;
 	const parsed = parseFilter(filter);
 	if (!parsed.ok) throw new Error(`The filter cannot be read: ${parsed.errors.map((error) => error.message).join("; ")}`);
-	return printFilter(parsed.ast ? where.and(parsed.ast, scope) : scope);
+	return printFilter(parsed.ast ? where$1.and(parsed.ast, scope) : scope);
 };
 /** The display a row draws its cards with: the one named, else the view's first cards display, else a card of the title. */
 const rowDisplay = (view, name) => {

package/dist/app/record-row/record-row.js

@@ -26,6 +26,7 @@ const RecordRow = ({ model, view, display, source, label, isNew }) => {
 		total,
 		rowAt: source.rowAt,
 		loadRows: source.loadRows,
+		revision: source.revision,
 		latencyMs: 0
 	}, scroll.start, Math.max(scroll.start, scroll.end - 1));
 	const indexes = Array.from({ length: scroll.end - scroll.start }, (_, offset) => scroll.start + offset);

package/dist/app/related-dots/card-dots-lines.js

@@ -0,0 +1,16 @@
+//#region src/app/related-dots/card-dots-lines.ts
+/**
+* The lines of dots a card of `display` shows for a row, in the order it names their columns: those of the list's
+* related columns that were loaded with the row and hold a record. A row loaded without them, as a map's or a saved
+* search's, shows none.
+*/
+const cardDotsLines = (view, display, row) => (display.dots ?? []).flatMap((name) => {
+	const column = view?.list?.relatedColumns?.find((candidate) => candidate.name === name);
+	const records = row.record[name];
+	return column && Array.isArray(records) && records.length > 0 ? [{
+		column,
+		records
+	}] : [];
+});
+//#endregion
+export { cardDotsLines };

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

@@ -0,0 +1,34 @@
+import { useAdminMeta } from "../meta-gate.js";
+import { DotsRoom, RelatedDots } from "./related-dots.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/related-dots/card-dots.tsx
+const lines = "flex flex-col gap-1.5";
+/** The room a card's lines of dots take at its bottom, inside its link, which the dots are drawn over. */
+const CardDotsRoom = ({ dots }) => /* @__PURE__ */ jsx("span", {
+	className: lines,
+	children: dots.map(({ column, records }) => /* @__PURE__ */ jsx(DotsRoom, { count: records.length }, column.name))
+});
+/**
+* A card's lines of dots, over the room its link holds for them at its bottom, inside its border and padding: beside
+* the link in the document, so a dot is a link of its own and the pointer between the dots reaches the card's.
+* The card's list item must be `relative`.
+*/
+const CardDots = ({ dots, Card }) => {
+	const { resources, views } = useAdminMeta();
+	return /* @__PURE__ */ jsx("div", {
+		className: `pointer-events-none absolute inset-x-[calc(0.75rem+1px)] bottom-[calc(0.75rem+1px)] ${lines}`,
+		children: dots.map(({ column, records }) => {
+			const target = resources[column.resource];
+			return target && /* @__PURE__ */ jsx(RelatedDots, {
+				column,
+				records,
+				target,
+				view: views[target.name],
+				Card,
+				wrap: true
+			}, column.name);
+		})
+	});
+};
+//#endregion
+export { CardDots, CardDotsRoom };

package/dist/app/related-dots/dot-card.js

@@ -1,8 +1,8 @@
 import { displaysOf, shownFields } from "../displays/list-displays.js";
 //#region src/app/related-dots/dot-card.ts
 /**
-* The card a dot shows of its record: the first cards display of the record's view, without the photos and favorite
-* button a small card has no room for, else the record's title with its status as the badge.
+* The card a dot shows of its record: the first cards display of the record's view, without the photos, favorite
+* button and dots a small card has no room for, else the record's title with its status as the badge.
 */
 const dotCard = (view, status) => {
 	const cards = displaysOf(view).find((display) => display.kind === "cards");
@@ -11,7 +11,7 @@ const dotCard = (view, status) => {
 		name: "dot",
 		badge: status
 	};
-	const { photos: _, favorite: __, ...card } = cards;
+	const { photos: _, favorite: __, dots: ___, ...card } = cards;
 	return card;
 };
 /** What the list loads for the related columns of its view among `columns`: each with the fields its dots' cards show. */

package/dist/app/related-dots/related-dots-columns.js

@@ -1,6 +1,7 @@
 import { humanize } from "../../live/naming.js";
 import { headerWidth, listColumnNames } from "../../live/columns-from-model.js";
 import { RelatedDots } from "./related-dots.js";
+import { RecordCard } from "../displays/record-card.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/related-dots/related-dots-columns.tsx
 /**
@@ -29,7 +30,8 @@ const withRelatedDotsColumns = (columns, model, view, resources, views) => {
 				column,
 				records: row[column.name] ?? [],
 				target,
-				view: views[target.name]
+				view: views[target.name],
+				Card: RecordCard
 			})
 		}];
 	});