@protobase/ui 0.19.15 → 0.20.0

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,22 @@ 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 { ListGroupChart } from "./list-group-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";
+import { isGroupChart, 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 +173,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 +190,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 +314,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 +379,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
@@ -404,13 +423,19 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				title: "Could not load rows",
 				error: rows.error
 			}),
-			view?.chart && /* @__PURE__ */ jsx(ListChart, {
+			view?.chart && (isGroupChart(view.chart) ? /* @__PURE__ */ jsx(ListGroupChart, {
+				model,
+				view,
+				chart: view.chart,
+				plural,
+				filter: loadFilter
+			}) : /* @__PURE__ */ jsx(ListChart, {
 				resource,
 				chart: view.chart,
 				title: `${plural} created`,
 				noun: plural.toLowerCase(),
 				filter: loadFilter
-			}),
+			})),
 			desktop ? desktopToolbar : phoneFilters,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",

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/blocks/chart.js

@@ -0,0 +1,26 @@
+import { useAdminMeta } from "../../meta-gate.js";
+import { propsOf } from "./block-props.js";
+import { CardFrame } from "./card-frame.js";
+import { ChartView } from "../../charts/chart-view.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/chart.tsx
+/** Counts, sums or averages of the records that match, per value or date bucket of a field, in a card. */
+const ChartBlock = ({ node, slots }) => {
+	const { resource, title, description, actions: _actions, span: _span, ...chart } = propsOf(node);
+	const { resources, views } = useAdminMeta();
+	const model = resources[resource];
+	if (!model) return null;
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions: slots.actions,
+		className: "h-full",
+		children: /* @__PURE__ */ jsx(ChartView, {
+			model,
+			view: views[resource],
+			...chart
+		})
+	});
+};
+//#endregion
+export { ChartBlock };

package/dist/app/pages/render-node.js

@@ -4,6 +4,7 @@ import { useProjectUi } from "./project-ui.js";
 import { ActionBlock } from "./blocks/action.js";
 import { CardBlock } from "./blocks/card.js";
 import { CardRowBlock } from "./blocks/card-row.js";
+import { ChartBlock } from "./blocks/chart.js";
 import { FieldBlock } from "./blocks/field.js";
 import { GridBlock } from "./blocks/grid.js";
 import { LinkBlock } from "./blocks/link.js";
@@ -30,6 +31,7 @@ const blocks = {
 	Table: TableBlock,
 	CardRow: CardRowBlock,
 	RecordRow: RecordRowBlock,
+	Chart: ChartBlock,
 	Progress: ProgressBlock,
 	ModalForm: ModalFormBlock,
 	Action: ActionBlock,

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
 			})
 		}];
 	});

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

@@ -7,21 +7,24 @@ import { displayRow } from "../displays/list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { toneFor } from "../../live/columns-from-model.js";
 import { valueColor } from "../../live/value-color.js";
-import { RecordCard } from "../displays/record-card.js";
-import { dotCard } from "./dot-card.js";
 import { placeCard } from "./card-place.js";
+import { dotCard } from "./dot-card.js";
 import { dotsSummary } from "./dots-summary.js";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/app/related-dots/related-dots.tsx
+/** A dot's box and its mark, which a card's room for its dots (`DotsRoom`) takes the size of. */
+const dotBox = "flex shrink-0 items-center justify-center rounded-full p-0.5 pointer-coarse:p-1.5";
+const dotMark = "size-2.5 rounded-full";
+const dotsLine = "flex min-w-0 items-center gap-0.5";
 const hideMs = 150;
 const cardWidth = 288;
 /**
 * The card of the dot that is hovered, focused or tapped, portalled to the body: every grid row is its own stacking
 * context and the grid body clips, so a card inside the row would sit under the rows below it.
 */
-const DotCardPopover = ({ shown, row, target, view, column, onEnter, onLeave }) => {
+const DotCardPopover = ({ shown, row, target, view, column, Card, onEnter, onLeave }) => {
 	const card = useRef(null);
 	const [place, setPlace] = useState();
 	useLayoutEffect(() => {
@@ -48,7 +51,7 @@ const DotCardPopover = ({ shown, row, target, view, column, onEnter, onLeave })
 			}
 		},
 		className: "fixed z-50 rounded-lg shadow-pop",
-		children: /* @__PURE__ */ jsx(RecordCard, {
+		children: /* @__PURE__ */ jsx(Card, {
 			model: target,
 			view,
 			display: dotCard(view, column.status),
@@ -61,7 +64,7 @@ const DotCardPopover = ({ shown, row, target, view, column, onEnter, onLeave })
 * or focusing a dot shows the record's card; on a touch screen the first tap shows it, and the card opens the record.
 * The dots say how many records have each status to a screen reader.
 */
-const RelatedDots = ({ column, records, target, view }) => {
+const RelatedDots = ({ column, records, target, view, wrap = false, Card }) => {
 	const rows = useMemo(() => records.map((record) => displayRow(target, record)), [records, target]);
 	const [shown, setShown] = useState();
 	const hideTimer = useRef(void 0);
@@ -123,7 +126,7 @@ const RelatedDots = ({ column, records, target, view }) => {
 	const shownRow = shown && rows.find((row) => row.key === shown.key);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: box,
-		className: "flex min-w-0 items-center gap-0.5",
+		className: cn(dotsLine, wrap && "pointer-events-none flex-wrap"),
 		onClick: (event) => event.stopPropagation(),
 		onPointerDown: (event) => pointer.current = event.pointerType,
 		children: [
@@ -146,11 +149,11 @@ const RelatedDots = ({ column, records, target, view }) => {
 					onFocus: (event) => event.currentTarget.matches(":focus-visible") && show(row.key, event.currentTarget),
 					onBlur: blur,
 					onClick: tap(row.key),
-					className: "flex shrink-0 items-center justify-center rounded-full p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 pointer-coarse:p-1.5",
+					className: cn(dotBox, "pointer-events-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"),
 					children: /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
 						style: color === void 0 ? void 0 : { backgroundColor: color },
-						className: cn("size-2.5 rounded-full", color === void 0 && toneDots[toneFor(String(value))], shown?.key === row.key && "ring-2 ring-foreground/30")
+						className: cn(dotMark, color === void 0 && toneDots[toneFor(String(value))], shown?.key === row.key && "ring-2 ring-foreground/30")
 					})
 				}, row.key);
 			}),
@@ -160,11 +163,21 @@ const RelatedDots = ({ column, records, target, view }) => {
 				target,
 				view,
 				column,
+				Card,
 				onEnter: cancelHide,
 				onLeave: hideSoon
 			})
 		]
 	});
 };
+/** Room for `count` dots that wrap as `RelatedDots` with `wrap` does, for a card to hold the dots drawn over it. */
+const DotsRoom = ({ count }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: cn(dotsLine, "invisible flex-wrap"),
+	children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx("span", {
+		className: dotBox,
+		children: /* @__PURE__ */ jsx("span", { className: dotMark })
+	}, index))
+});
 //#endregion
-export { RelatedDots };
+export { DotsRoom, RelatedDots };