@protobase/ui 0.19.15 → 0.19.16

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/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 };

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

@@ -0,0 +1,96 @@
+import { usePermissions } from "../meta-gate.js";
+import { boardCard, boardColumns } from "./board-columns.js";
+import { can } from "../permissions.js";
+import { RecordCard } from "./record-card.js";
+import { collision, columnCoordinates, columnId } from "./board-dnd.js";
+import { BoardColumnView } from "./board-column.js";
+import { useBoardMove } from "./use-board-move.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+//#region src/app/displays/board-display.tsx
+/**
+* A column per value of the board's enum field, each loading its own records through the list API, with their count;
+* a card dragged, or moved with the keyboard, to another column saves the record with that column's value.
+*/
+const BoardDisplay = ({ model, view, display, fields, filter, orderBy, limit }) => {
+	const columns = boardColumns(model, view, display);
+	const card = boardCard(model, view, display);
+	const permissions = usePermissions(model.name);
+	const movable = can(permissions, "update") && !model.fields[display.by]?.readOnly;
+	const { moves, move } = useBoardMove(model, display.by);
+	const [active, setActive] = useState();
+	const dragged = useRef(false);
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, {
+		keyboardCodes: {
+			start: ["Space"],
+			cancel: ["Escape"],
+			end: ["Space", "Enter"]
+		},
+		coordinateGetter: columnCoordinates
+	}));
+	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 announcements = {
+		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current.row)}.`,
+		onDragOver: ({ active: picked, over }) => `${title(picked.data.current.row)} is over ${over ? columnOf(over.id)?.label : "no column"}.`,
+		onDragEnd: ({ active: picked, over }) => over ? `${title(picked.data.current.row)} was moved to ${columnOf(over.id)?.label}.` : `${title(picked.data.current.row)} was put back.`,
+		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current.row)} was cancelled.`
+	};
+	const start = ({ active: picked }) => {
+		dragged.current = true;
+		setActive(picked.data.current.row);
+	};
+	const end = ({ active: picked, over }) => {
+		setActive(void 0);
+		setTimeout(() => dragged.current = false);
+		const row = picked.data.current.row;
+		const target = over ? columnOf(over.id) : void 0;
+		if (target && target.value !== valueOf(row)) move(row, target);
+	};
+	return /* @__PURE__ */ jsxs(DndContext, {
+		sensors,
+		collisionDetection: collision,
+		onDragStart: start,
+		onDragEnd: end,
+		onDragCancel: () => {
+			setActive(void 0);
+			setTimeout(() => dragged.current = false);
+		},
+		accessibility: {
+			announcements,
+			screenReaderInstructions: { draggable: "To move a card to another column, press Space, move it with the left and right arrow keys, and press Space again to drop it there. Escape puts it back." }
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 overflow-x-auto",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex snap-x items-start gap-3 pb-2",
+				children: columns.map((column) => /* @__PURE__ */ jsx(BoardColumnView, {
+					model,
+					view,
+					display,
+					column,
+					fields,
+					filter,
+					orderBy,
+					limit,
+					moves,
+					movable,
+					dragged: () => dragged.current
+				}, columnId(column.value)))
+			})
+		}), /* @__PURE__ */ jsx(DragOverlay, { children: active && /* @__PURE__ */ jsx(RecordCard, {
+			model,
+			view,
+			display: card,
+			row: active,
+			swipe: false
+		}) })]
+	});
+};
+//#endregion
+export { BoardDisplay };

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

@@ -0,0 +1,32 @@
+import { pointerWithin, rectIntersection } from "@dnd-kit/core";
+//#region src/app/displays/board-dnd.ts
+/** The id a board's column is dropped on by. */
+const columnId = (value) => value === null ? "none" : `value:${value}`;
+/** A pointer drops a card on the column under it; the keyboard, which has no pointer, on the column the card overlaps. */
+const collision = (args) => {
+	const under = pointerWithin(args);
+	return under.length > 0 ? under : rectIntersection(args);
+};
+/** The arrow keys move a picked-up card to the top of the next column to the left or right. */
+const columnCoordinates = (event, { context: { collisionRect, droppableRects, droppableContainers, over } }) => {
+	const step = event.code === "ArrowRight" ? 1 : event.code === "ArrowLeft" ? -1 : 0;
+	if (step === 0 || !collisionRect) return void 0;
+	event.preventDefault();
+	const columns = droppableContainers.getEnabled().flatMap((container) => {
+		const rect = droppableRects.get(container.id);
+		return rect ? [{
+			id: container.id,
+			rect
+		}] : [];
+	}).sort((a, b) => a.rect.left - b.rect.left);
+	const center = collisionRect.left + collisionRect.width / 2;
+	const at = over ? columns.findIndex((column) => column.id === over.id) : columns.findIndex((column) => column.rect.left <= center && center <= column.rect.right);
+	const target = columns[at + step];
+	if (at === -1 || !target) return void 0;
+	return {
+		x: target.rect.left + (target.rect.width - collisionRect.width) / 2,
+		y: target.rect.top
+	};
+};
+//#endregion
+export { collision, columnCoordinates, columnId };

package/dist/app/displays/list-displays.js

@@ -3,6 +3,7 @@ import { humanize } from "../../live/naming.js";
 import { displayValue } from "../../live/display-value.js";
 import { photosKey } from "../../live/row-photos.js";
 import { filledFields } from "../filled-fields.js";
+import { boardCard } from "./board-columns.js";
 import { encodeKey, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
@@ -25,7 +26,8 @@ const shownDisplay = (view, name) => {
 };
 const defaultIcons = {
 	cards: "cards",
-	map: "map"
+	map: "map",
+	board: "kanban"
 };
 const displayChoices = (view) => [{
 	name: tableDisplay,
@@ -76,6 +78,16 @@ const shownFields = (model, view, display) => {
 		display.longitude,
 		...shownFields(model, view, mapCards(view, display))
 	];
+	if (display.kind === "board") {
+		const card = boardCard(model, view, display);
+		return [
+			display.by,
+			card.title,
+			card.subtitle,
+			card.badge,
+			...card.meta ?? []
+		].filter((name) => name !== void 0);
+	}
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	return [
 		image,

package/dist/app/displays/record-card.js

@@ -12,8 +12,11 @@ import { Markdown } from "../../markdown/markdown.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { ValueBadge } from "../value-badge.js";
+import { useSeedRecord } from "../record-preview.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";
+import { CardDots, CardDotsRoom } from "../related-dots/card-dots.js";
+import { cardDotsLines } from "../related-dots/card-dots-lines.js";
 import { CardImage } from "./card-image.js";
 import { CardCarousel } from "./card-carousel.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -31,9 +34,9 @@ const MetaValue = ({ icon, children }) => {
 /**
 * A record's card of a cards display, opening its page: its image across the top, swiped or stepped through its photos
 * when the display names them, the title over the subtitle, the badge beside it, the first amount with a value in bold,
-* small meta fields below, those with a value, the labels of its flags that are true and the footer's fields with a
-* value, joined by bullets; or, with a `card` component, what it draws of the row, the built-in content again when it
-* is missing or throws. With a favorite button, a heart in the top right corner saves the record.
+* small meta fields below, those with a value, the labels of its flags that are true, the footer's fields with a
+* value, joined by bullets, and a line of dots for each related column of the list it names; or, with a `card`
+* component, what it draws of the row, the built-in content again when it is missing or throws. With a favorite button, a heart in the top right corner saves the record.
 */
 const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
@@ -46,6 +49,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 		return row.labels[name] ?? displayValue(field, value, view?.fields[name]);
 	};
 	const { fields: fieldTypes, components } = useProjectUi();
+	const seedRecord = useSeedRecord(model);
 	const Card = display.card === void 0 ? void 0 : components?.[display.card];
 	const shownValue = (name) => {
 		const field = model.fields[name];
@@ -99,6 +103,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const footing = filledMeta(row, footer);
 	const pictured = image !== void 0 || photos !== void 0;
 	const favorite = display.favorite;
+	const dots = Card ? [] : cardDotsLines(view, display, row);
 	const builtIn = (picture) => /* @__PURE__ */ jsxs(Fragment, { children: [
 		pictured && picture,
 		/* @__PURE__ */ jsxs("span", {
@@ -147,7 +152,8 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 				"aria-hidden": true,
 				children: " • "
 			}), shownValue(name)] }, name))
-		})
+		}),
+		dots.length > 0 && /* @__PURE__ */ jsx(CardDotsRoom, { dots })
 	] });
 	const card = (picture) => /* @__PURE__ */ jsxs(AppLink, {
 		to: {
@@ -155,6 +161,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			resource: model.name,
 			key: row.key
 		},
+		onClick: () => seedRecord(row.record),
 		className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
 		children: [mark && !pictured && /* @__PURE__ */ jsx(Badge, {
 			tone: "blue",
@@ -167,7 +174,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 		}) : builtIn(picture)]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: photos ? "group/card relative h-full" : favorite || mark ? "relative h-full" : "h-full",
+		className: photos ? "group/card relative h-full" : favorite || mark || dots.length > 0 ? "relative h-full" : "h-full",
 		children: [
 			photos ? /* @__PURE__ */ jsx(CardCarousel, {
 				photos: row.photos ?? [],
@@ -180,6 +187,10 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 				className: "pointer-events-none absolute top-2 left-2 shadow-sm",
 				children: mark
 			}),
+			dots.length > 0 && /* @__PURE__ */ jsx(CardDots, {
+				dots,
+				Card: RecordCard
+			}),
 			favorite && /* @__PURE__ */ jsx(FavoriteButton, {
 				favorite,
 				recordKey: row.key,

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

@@ -0,0 +1,23 @@
+import { useAdminMeta } from "../meta-gate.js";
+import { columnFilter } from "./board-columns.js";
+import { useLiveRows } from "../../live/use-live-rows.js";
+import { useDisplayRows } from "./use-display-rows.js";
+//#region src/app/displays/use-board-column.ts
+/**
+* The records of one column of a board, page by page through the list API: the list's filter with the column's value
+* added, in the list's order, with how many there are. A change to the resource reloads them, as it does the table.
+*/
+const useBoardColumn = ({ model, by, value, fields, filter, orderBy }) => {
+	const { resources, views } = useAdminMeta();
+	const rows = useLiveRows({
+		resources,
+		views,
+		model,
+		columns: fields,
+		filter: columnFilter(filter, by, value),
+		orderBy
+	});
+	return useDisplayRows(model, rows.page, rows.key, true);
+};
+//#endregion
+export { useBoardColumn };

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

@@ -0,0 +1,60 @@
+import { useClient } from "../../data/api-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { refusalReason } from "./board-columns.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+//#region src/app/displays/use-board-move.ts
+/**
+* Moving a board's card to another column: one update of the record with the column's value and the ETag it was listed
+* with, as a named update action sends, so the resource's access rules and `validate` decide. The card shows in its new
+* column at once; a refusal puts it back and says why, and either way every list of the resource reloads.
+*/
+const useBoardMove = (model, by) => {
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const [moves, setMoves] = useState([]);
+	const settle = (key) => setMoves((current) => current.filter((move) => move.row.key !== key));
+	const mutation = useMutation({
+		mutationFn: ({ row, to }) => {
+			const etag = typeof row.record.etag === "string" ? row.record.etag : "*";
+			return client.update(model.name, recordKey(model, row.record), { [by]: to.value }, etag);
+		},
+		onMutate: ({ row, to }) => {
+			const moved = {
+				...row,
+				record: {
+					...row.record,
+					[by]: to.value
+				}
+			};
+			setMoves((current) => [...current.filter((move) => move.row.key !== row.key), {
+				row: moved,
+				to: to.value
+			}]);
+		},
+		onError: (error, { row, to }) => {
+			settle(row.key);
+			toast.show({
+				state: "error",
+				title: `Could not move it to ${to.label}`,
+				description: refusalReason(error)
+			});
+		},
+		onSettled: async (_result, _error, { row }) => {
+			await refresh(model.name);
+			settle(row.key);
+		}
+	});
+	return {
+		moves,
+		move: (row, to) => mutation.mutate({
+			row,
+			to
+		})
+	};
+};
+//#endregion
+export { useBoardMove };

package/dist/app/displays/virtual-cards.js

@@ -53,6 +53,7 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		total,
 		rowAt: source.rowAt,
 		loadRows: source.loadRows,
+		revision: source.revision,
 		latencyMs: 0
 	}, range.start, range.end);
 	const [guard] = useState(() => createFlipGuard());

package/dist/app/embedded-list/embedded-list.js

@@ -11,6 +11,7 @@ import { AppLink, useAppAddress } from "../use-app-address.js";
 import { listColumnNames } from "../../live/columns-from-model.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";
+import { BoardDisplay } from "../displays/board-display.js";
 import { CardsDisplay } from "../displays/cards-display.js";
 import { CustomDisplay } from "../displays/custom-display.js";
 import { MapDisplay } from "../displays/map-display.js";
@@ -156,6 +157,14 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			orderBy,
 			fields,
 			footer: false
+		}) : shown.kind === "board" ? /* @__PURE__ */ jsx(BoardDisplay, {
+			model,
+			view,
+			display: shown,
+			fields,
+			filter,
+			orderBy,
+			limit
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,
 			list

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

@@ -2,7 +2,7 @@ import { columnsFromModel, listColumnNames } from "../../live/columns-from-model
 import { xlsxMaxRows } from "./xlsx.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/export/export-options.ts
-const where = createWhere();
+const where$1 = createWhere();
 /** Whether the view's list offers Export: unless the view takes it away. */
 const exportOffered = (view) => view?.export !== false;
 /**
@@ -42,7 +42,7 @@ const selectionFilters = (model, keys) => {
 	const [keyField] = model.primaryKey;
 	if (!keyField || model.primaryKey.length !== 1) throw new Error("Not implemented: selected rows are exported by a single-field key");
 	const filters = [];
-	for (let start = 0; start < keys.length; start += 500) filters.push(printFilter(where.in(keyField, keys.slice(start, start + 500))));
+	for (let start = 0; start < keys.length; start += 500) filters.push(printFilter(where$1.in(keyField, keys.slice(start, start + 500))));
 	return filters;
 };
 //#endregion

package/dist/app/gallery/use-gallery-photos.js

@@ -5,7 +5,7 @@ import { galleryItems } from "./gallery-items.js";
 import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/gallery/use-gallery-photos.ts
-const where = createWhere();
+const where$1 = createWhere();
 /**
 * A gallery's photos: the record's own image, then the photo records that point at it, read with the list API under
 * the user's own access, so its row filters and readable fields apply. Without the photos' resource in `/meta`, the
@@ -15,7 +15,7 @@ const useGalleryPhotos = (item, record, recordKey) => {
 	const client = useClient();
 	const { resources } = useAdminMeta();
 	const holder = item.photos ? resources[item.photos.resource] : void 0;
-	const filter = item.photos ? printFilter(where.eq(item.photos.field, recordKey)) : "";
+	const filter = item.photos ? printFilter(where$1.eq(item.photos.field, recordKey)) : "";
 	const sort = item.photos?.sort ?? "";
 	const rows = useQuery({
 		queryKey: keys.list(holder?.name ?? "", filter, sort, 500, "gallery"),

package/dist/app/import/lookups.js

@@ -1,6 +1,6 @@
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/import/lookups.ts
-const where = createWhere();
+const where$1 = createWhere();
 const valuesPerRequest = 100;
 /** A value as the lookups compare it: the API answers numbers as numbers and the rest as text. */
 const lookupKey = (value) => String(value);
@@ -23,7 +23,7 @@ const createLookups = (clientFor) => {
 		for (let at = 0; at < missing.length; at += valuesPerRequest) {
 			const asked = missing.slice(at, at + valuesPerRequest);
 			for (const value of asked) found.set(lookupKey(value), []);
-			const filter = printFilter(where.in(field, asked));
+			const filter = printFilter(where$1.in(field, asked));
 			let pageToken;
 			do {
 				const page = await clientFor(model.name).list(model.name, {

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

@@ -0,0 +1,61 @@
+import { differs, toFieldDraft, toPatchValue } from "../../live/field-values.js";
+import { FieldEditor } from "../field-editor.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-edit/cell-field-editor.tsx
+/**
+* A field's editor in a list cell, the one the record page uses: Enter, Tab and leaving the cell save a change, and Tab
+* and Shift+Tab go on to the next or previous editable cell; Escape leaves it as it was. A built-in switch or choice
+* saves as soon as it changes.
+*/
+const CellFieldEditor = ({ field, hints, resource, stored, onSave, close }) => {
+	const [draft, setDraft] = useState(() => toFieldDraft(field, stored));
+	const ref = useRef(null);
+	const finished = useRef(false);
+	const instant = !hints?.widget && (field.type === "boolean" || field.type === "enum");
+	useEffect(() => {
+		ref.current?.querySelector("input, select, textarea, button, [tabindex]")?.focus();
+	}, []);
+	const finish = (save, move, value = draft) => {
+		if (finished.current) return;
+		finished.current = true;
+		if (save && differs(field, value, stored)) onSave(toPatchValue(field, value));
+		close(move);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			finish(true);
+		} else if (event.key === "Tab") {
+			event.preventDefault();
+			finish(true, event.shiftKey ? -1 : 1);
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			finish(false);
+		}
+	};
+	const onBlur = (event) => {
+		if (!ref.current?.contains(event.relatedTarget)) finish(true);
+	};
+	const onChange = (next) => {
+		setDraft(next);
+		if (instant) finish(true, void 0, next);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "w-full min-w-0",
+		onKeyDown,
+		onBlur,
+		children: /* @__PURE__ */ jsx(FieldEditor, {
+			field,
+			hints,
+			value: draft,
+			stored,
+			resource,
+			onChange
+		})
+	});
+};
+//#endregion
+export { CellFieldEditor };