@protobase/ui 0.21.7 → 0.21.8

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

@@ -0,0 +1,27 @@
+import { addDays } from "./calendar-range.js";
+//#region src/app/displays/calendar-dnd.ts
+const dayPrefix = "day:";
+/** The id a calendar's day is dropped on by. */
+const dayId = (day) => `${dayPrefix}${day}`;
+/** The id of an event on one of its days: a record over several days shows on each. */
+const eventId = (key, day) => `${key}@${day}`;
+/** The arrow keys move a picked-up event a day back or on (left and right) or a week (up and down), to that day's top. */
+const dayCoordinates = (event, { context: { active, collisionRect, droppableRects, over } }) => {
+	const step = {
+		ArrowLeft: -1,
+		ArrowRight: 1,
+		ArrowUp: -7,
+		ArrowDown: 7
+	}[event.code];
+	const day = over ? String(over.id).slice(4) : active?.data.current?.day;
+	if (step === void 0 || !collisionRect || day === void 0) return void 0;
+	event.preventDefault();
+	const target = droppableRects.get(dayId(addDays(day, step)));
+	if (!target) return void 0;
+	return {
+		x: target.left + (target.width - collisionRect.width) / 2,
+		y: target.top + 4
+	};
+};
+//#endregion
+export { dayCoordinates, dayId, eventId };

package/dist/app/displays/calendar-event.js

@@ -0,0 +1,72 @@
+import { cn } from "../../lib/cn.js";
+import { formatTime } from "../../format/date.js";
+import { recordTitleField } from "../../live/model-helpers.js";
+import { displayValue } from "../../live/display-value.js";
+import { AppLink } from "../use-app-address.js";
+import { useSeedRecord } from "../record-preview.js";
+import { eventId } from "./calendar-dnd.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDraggable } from "@dnd-kit/core";
+//#region src/app/displays/calendar-event.tsx
+/** The text an event shows: its `title` field, or the view's title, with the names of the records relations point at. */
+const eventTitle = (model, view, display, row) => {
+	const name = display.title ?? recordTitleField(model, view);
+	const field = model.fields[name];
+	const text = row.labels[name] ?? (field ? displayValue(field, row.record[name], view?.fields[name]) : "");
+	return text === "" ? row.key : text;
+};
+const startTime = (model, display, row, day) => {
+	const value = row.record[display.start];
+	if (model.fields[display.start]?.type !== "timestamp" || typeof value !== "string") return void 0;
+	const ms = Date.parse(value);
+	return new Date(ms).toISOString().startsWith(day) ? formatTime(ms) : void 0;
+};
+/** An event as a one-line link to its record, its time first for a timestamp, styled as a small record card. */
+const EventChip = ({ model, view, display, row, day }) => {
+	const seedRecord = useSeedRecord(model);
+	const time = startTime(model, display, row, day);
+	return /* @__PURE__ */ jsxs(AppLink, {
+		to: {
+			kind: "record",
+			resource: model.name,
+			key: row.key
+		},
+		onClick: () => seedRecord(row.record),
+		className: "flex min-w-0 items-baseline gap-1 rounded-md border border-border bg-background px-1.5 py-0.5 text-xs hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+		children: [time && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0 tabular-nums text-muted-foreground",
+			children: time
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: eventTitle(model, view, display, row)
+		})]
+	});
+};
+/** An event on one of its days, picked up by dragging it or by Space on its link; one the user may not update stays put. */
+const CalendarEvent = ({ movable, dragged, ...props }) => {
+	const { setNodeRef, setActivatorNodeRef, listeners, isDragging } = useDraggable({
+		id: eventId(props.row.key, props.day),
+		data: {
+			row: props.row,
+			day: props.day
+		},
+		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("min-w-0", movable && "cursor-grab touch-manipulation", isDragging && "opacity-40"),
+		children: /* @__PURE__ */ jsx(EventChip, { ...props })
+	});
+};
+//#endregion
+export { CalendarEvent, EventChip, eventTitle };

package/dist/app/displays/calendar-range.js

@@ -0,0 +1,125 @@
+import { printFilter, where } from "@protobase/schema";
+//#region src/app/displays/calendar-range.ts
+const dayMs = 864e5;
+const dayOf = (ms) => new Date(ms).toISOString().slice(0, 10);
+const startOf = (day) => Date.parse(`${day}T00:00:00Z`);
+/** The day `count` days after `day`, or before it for a negative count. */
+const addDays = (day, count) => dayOf(startOf(day) + count * dayMs);
+const monday = (day) => addDays(day, -((new Date(startOf(day)).getUTCDay() + 6) % 7));
+const monthOf = (day, step = 0) => {
+	const date = new Date(startOf(day));
+	return dayOf(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + step, 1));
+};
+const normalised = ({ scale, day }) => ({
+	scale,
+	day: scale === "month" ? monthOf(day) : monday(day)
+});
+/** The month or week a calendar shows: the address's, starting on the month's 1st or the week's Monday, else the month of `now`. */
+const calendarView = (at, now) => normalised(at ?? {
+	scale: "month",
+	day: dayOf(now)
+});
+/** The month or week of `scale` that holds `now`. */
+const todayView = (scale, now) => normalised({
+	scale,
+	day: dayOf(now)
+});
+/** The month or week before (-1) or after (1) `view`. */
+const stepView = (view, step) => view.scale === "month" ? {
+	scale: "month",
+	day: monthOf(view.day, step)
+} : {
+	scale: "week",
+	day: addDays(monday(view.day), 7 * step)
+};
+/** The days a calendar shows: whole weeks from the Monday on or before a month's 1st to the Sunday on or after its last day, or a week's seven. */
+const gridDays = (view) => {
+	const first = monday(view.scale === "month" ? monthOf(view.day) : view.day);
+	const last = view.scale === "month" ? addDays(monday(addDays(monthOf(view.day, 1), -1)), 6) : addDays(first, 6);
+	const count = (startOf(last) - startOf(first)) / dayMs + 1;
+	return Array.from({ length: count }, (_, index) => addDays(first, index));
+};
+/** The days `view` shows, as a range from its first day to the day after its last. */
+const rangeOf = (view) => {
+	const days = gridDays(view);
+	return {
+		from: days[0],
+		to: addDays(days.at(-1), 1)
+	};
+};
+const isTimestamp = (display, model) => model.fields[display.start]?.type === "timestamp";
+/**
+* The records on the days of `range`, as a list filter: those starting in it, and with an `end` those starting before
+* it and ending in or after its first day. A timestamp's `end` is the instant it is over, so one ending at midnight is
+* not on the day it starts. Each branch reads one indexed field.
+*/
+const rangeFilter = (display, model, range) => {
+	const timestamp = isTimestamp(display, model);
+	const bound = (day) => timestamp ? {
+		kind: "timestamp",
+		value: `${day}T00:00:00Z`,
+		span: {
+			start: 0,
+			end: 0
+		}
+	} : {
+		kind: "string",
+		value: day,
+		span: {
+			start: 0,
+			end: 0
+		}
+	};
+	const within = where.and(where.gte(display.start, bound(range.from)), where.lt(display.start, bound(range.to)));
+	if (display.end === void 0) return printFilter(within);
+	const ending = timestamp ? where.gt(display.end, bound(range.from)) : where.gte(display.end, bound(range.from));
+	return printFilter(where.or(within, where.and(where.lt(display.start, bound(range.from)), ending)));
+};
+/** The list's filter, its search included, narrowed to the calendar's days. */
+const withRange = (filter, range) => filter === "" ? range : `(${filter}) AND (${range})`;
+const instantOf = (value) => {
+	if (typeof value !== "string") return void 0;
+	const ms = Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00Z` : value);
+	return Number.isNaN(ms) ? void 0 : ms;
+};
+/**
+* The days of `days` a record is on: from its start's day through its end's, both included, where a timestamp `end`
+* at midnight is over before that day starts; its start day alone without an end or with one before its start.
+*/
+const eventDays = (record, display, model, days) => {
+	const start = instantOf(record[display.start]);
+	if (start === void 0) return [];
+	const first = dayOf(start);
+	const end = display.end === void 0 ? void 0 : instantOf(record[display.end]);
+	const ending = end === void 0 ? first : dayOf(isTimestamp(display, model) ? end - 1 : end);
+	const last = ending < first ? first : ending;
+	return days.filter((day) => day >= first && day <= last);
+};
+/** The rows on each day of `days`, each day's in start order. */
+const byDay = (rows, display, model, days) => {
+	const placed = new Map(days.map((day) => [day, []]));
+	const ordered = rows.toSorted((a, b) => (instantOf(a.record[display.start]) ?? 0) - (instantOf(b.record[display.start]) ?? 0));
+	for (const row of ordered) for (const day of eventDays(row.record, display, model, days)) placed.get(day).push(row);
+	return placed;
+};
+/**
+* The update that moves a record shown on `from` to `to`: its `start`, and its `end` when it has one, moved by the same
+* number of days, a timestamp keeping its time of day.
+*/
+const movedPatch = (record, display, model, from, to) => {
+	const days = (startOf(to) - startOf(from)) / dayMs;
+	const timestamp = isTimestamp(display, model);
+	const moved = (value) => {
+		const ms = instantOf(value);
+		if (ms === void 0) return void 0;
+		return timestamp ? new Date(ms + days * dayMs).toISOString() : addDays(dayOf(ms), days);
+	};
+	const start = moved(record[display.start]);
+	const end = display.end === void 0 ? void 0 : moved(record[display.end]);
+	return {
+		...start !== void 0 && { [display.start]: start },
+		...end !== void 0 && { [display.end]: end }
+	};
+};
+//#endregion
+export { addDays, byDay, calendarView, eventDays, gridDays, movedPatch, rangeFilter, rangeOf, stepView, todayView, withRange };

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

@@ -62,7 +62,8 @@ const shownDisplay = (view, name) => {
 const defaultIcons = {
 	cards: "cards",
 	map: "map",
-	board: "kanban"
+	board: "kanban",
+	calendar: "calendar"
 };
 const displayChoices = (view) => [{
 	name: tableDisplay,
@@ -132,6 +133,11 @@ const shownFields = (model, view, display) => {
 			...card.meta ?? []
 		].filter((name) => name !== void 0);
 	}
+	if (display.kind === "calendar") return [
+		display.start,
+		display.end,
+		display.title ?? recordTitleField(model, view)
+	].filter((name) => name !== void 0);
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	return [
 		image,

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

@@ -0,0 +1,68 @@
+import { formatDate } from "../../format/date.js";
+import { useClient } from "../../data/api-provider.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { refusalReason } from "./board-columns.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { movedPatch } from "./calendar-range.js";
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+//#region src/app/displays/use-calendar-move.ts
+/** The rows with each moving record's new dates, so an event shows on its new day at once. */
+const movedRows = (rows, moves) => {
+	const patches = new Map(moves.map((move) => [move.key, move.patch]));
+	return rows.map((row) => patches.has(row.key) ? {
+		...row,
+		record: {
+			...row.record,
+			...patches.get(row.key)
+		}
+	} : row);
+};
+/**
+* Moving a calendar's event to another day: one update of the record with its `start` and `end` moved by the same days
+* and the ETag it was listed with, as a named update action sends, so the resource's access rules and `validate`
+* decide. The event shows on its new day at once; a refusal puts it back and says why, and either way every list of
+* the resource reloads.
+*/
+const useCalendarMove = (model, display) => {
+	const client = useClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const [moves, setMoves] = useState([]);
+	const settle = (key) => setMoves((current) => current.filter((move) => move.key !== key));
+	const mutation = useMutation({
+		mutationFn: ({ row, patch }) => {
+			const etag = typeof row.record.etag === "string" ? row.record.etag : "*";
+			return client.update(model.name, recordKey(model, row.record), patch, etag);
+		},
+		onMutate: ({ row, patch }) => setMoves((current) => [...current.filter((move) => move.key !== row.key), {
+			key: row.key,
+			patch
+		}]),
+		onError: (error, { row, to }) => {
+			settle(row.key);
+			toast.show({
+				state: "error",
+				title: `Could not move it to ${formatDate(Date.parse(`${to}T00:00:00Z`))}`,
+				description: refusalReason(error)
+			});
+		},
+		onSettled: async (_result, _error, { row }) => {
+			await refresh(model.name);
+			settle(row.key);
+		}
+	});
+	/** Moves the record of `row`, shown on the day `from`, to the day `to`. */
+	const move = (row, from, to) => mutation.mutate({
+		row,
+		patch: movedPatch(row.record, display, model, from, to),
+		to
+	});
+	return {
+		moves,
+		move
+	};
+};
+//#endregion
+export { movedRows, useCalendarMove };

package/dist/app/displays/use-calendar-rows.js

@@ -0,0 +1,35 @@
+import { useAdminMeta } from "../meta-gate.js";
+import { useLiveRows } from "../../live/use-live-rows.js";
+import { useDisplayRows } from "./use-display-rows.js";
+import { rangeFilter, withRange } from "./calendar-range.js";
+import { useEffect } from "react";
+/**
+* The records on the days a calendar shows, through the list API: the list's filter with the days added, in start
+* order, page after page up to `calendarLimit`; `capped` when more remain. A change to the resource reloads them, as it
+* does the table.
+*/
+const useCalendarRows = ({ model, display, range, fields, filter }) => {
+	const { resources, views } = useAdminMeta();
+	const rows = useLiveRows({
+		resources,
+		views,
+		model,
+		columns: fields,
+		filter: withRange(filter, rangeFilter(display, model, range)),
+		orderBy: `${display.start} asc`
+	});
+	const list = useDisplayRows(model, rows.page, rows.key, true);
+	const wanted = list.more && !list.loading && list.rows.length < 500;
+	useEffect(() => {
+		if (wanted) list.loadMore();
+	}, [wanted, list.rows.length]);
+	const capped = list.rows.length > 500 || list.rows.length === 500 && list.more;
+	return {
+		rows: list.rows.slice(0, 500),
+		capped,
+		loading: list.loading,
+		error: list.error
+	};
+};
+//#endregion
+export { useCalendarRows };

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

@@ -2,22 +2,24 @@ import { useIsDesktop, useIsXs } from "../../lib/use-media-query.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { ErrorBanner } from "../error-banner.js";
-import { recordKey } from "../../live/model-helpers.js";
 import { listColumnNames } from "../../live/columns-from-model.js";
 import { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
 import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
-import { useAdminMeta } from "../meta-gate.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
 import { useProjectUi } from "../pages/project-ui.js";
+import { can } from "../permissions.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";
 import { BoardDisplay } from "../displays/board-display.js";
+import { CalendarDisplay } from "../displays/calendar-display.js";
 import { CardsDisplay } from "../displays/cards-display.js";
 import { CustomDisplay } from "../displays/custom-display.js";
 import { MapDisplay } from "../displays/map-display.js";
 import { DisplaySwitch } from "../displays/display-controls.js";
 import { embeddedColumns } from "./embedded-columns.js";
 import { cutOffNote } from "./cut-off-note.js";
+import { embeddedRowTargets } from "./embedded-row-targets.js";
 import { useEmbeddedRows } from "./use-embedded-rows.js";
 import { useMemo, useState } from "react";
 import { ArrowRight } from "lucide-react";
@@ -39,8 +41,9 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 * to the whole list with the same filter, order and display, beside a note such as "The first 10 of 37." when there are
 * more. On a phone a cards display is one row that scrolls sideways.
 */
-const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true }) => {
+const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true, opens }) => {
 	const { resources, views } = useAdminMeta();
+	const canUpdate = can(usePermissions(model.name), "update");
 	const { fields: fieldTypes } = useProjectUi();
 	const { go, href } = useAppAddress();
 	const xs = useIsXs();
@@ -122,20 +125,18 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		more: false,
 		loadMore: () => void 0
 	};
-	const openRecord = (row) => go({
-		kind: "record",
-		resource: model.name,
-		key: recordKey(model, row)
+	const targets = embeddedRowTargets({
+		model,
+		view,
+		opens,
+		resources,
+		views,
+		canUpdate
 	});
-	const recordLink = (row) => ({
-		href: href({
-			kind: "record",
-			resource: model.name,
-			key: recordKey(model, row)
-		}),
-		onFollow: () => openRecord(row)
+	const linkTo = (to) => ({
+		href: href(to),
+		onFollow: () => go(to)
 	});
-	const singular = view?.names?.singular ?? humanize(model.name);
 	const note = cutOffNote(source.total, rows.data.total, rows.data.estimated);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-3",
@@ -146,12 +147,9 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			latencyMs: 0,
 			sort: parseSort(orderBy),
 			onSortChange: (next) => setOrderBy(sortToOrderBy(next)),
-			onOpenRow: openRecord,
-			rowLink: recordLink,
-			rowActions: [{
-				label: `Open ${singular.toLowerCase()}`,
-				onSelect: openRecord
-			}],
+			onOpenRow: (row) => go(targets.address(row)),
+			rowLink: (row) => linkTo(targets.address(row)),
+			rowActions: targets.actions(linkTo),
 			rowNumbers: false,
 			selectable: false
 		}) : shown.kind === "cards" ? /* @__PURE__ */ jsx(CardsDisplay, {
@@ -177,6 +175,12 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			filter,
 			orderBy,
 			limit
+		}) : shown.kind === "calendar" ? /* @__PURE__ */ jsx(CalendarDisplay, {
+			model,
+			view,
+			display: shown,
+			fields,
+			filter
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,
 			list

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

@@ -0,0 +1,65 @@
+import { humanize } from "../../live/naming.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { rowAllows } from "../permissions.js";
+import { relationTarget } from "../related-opens.js";
+//#region src/app/embedded-list/embedded-row-targets.ts
+const singularOf = (model, view) => (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+/**
+* Where a table row of an embedded list leads, and its menu's items. A row opens its own record, or with `opens` the
+* record that relation points at when it holds one; its menu then opens that record and edits, or for a user who may
+* not, opens the row's own.
+*/
+const embeddedRowTargets = ({ model, view, opens, resources, views, canUpdate }) => {
+	const own = (row) => ({
+		kind: "record",
+		resource: model.name,
+		key: recordKey(model, row)
+	});
+	const farName = opens && model.fields[opens]?.relation?.resource;
+	const far = farName ? resources[farName] : void 0;
+	const other = (row) => {
+		const key = opens && far ? relationTarget(row, opens) : void 0;
+		return far && key !== void 0 ? {
+			kind: "record",
+			resource: far.name,
+			key
+		} : void 0;
+	};
+	const address = (row) => other(row) ?? own(row);
+	const singular = singularOf(model, view);
+	const actions = (linkTo) => {
+		const openOwn = {
+			label: `Open ${singular}`,
+			link: (row) => linkTo(own(row))
+		};
+		if (!far) return [openOwn];
+		const editable = (row) => canUpdate && rowAllows(row, "update");
+		return [
+			{
+				label: `Open ${singularOf(far, views[far.name])}`,
+				available: (row) => other(row) !== void 0,
+				link: (row) => linkTo(other(row))
+			},
+			{
+				label: `Edit ${singular}`,
+				available: editable,
+				link: (row) => linkTo({
+					kind: "record",
+					resource: model.name,
+					key: recordKey(model, row),
+					edit: true
+				})
+			},
+			{
+				...openOwn,
+				available: (row) => !editable(row)
+			}
+		];
+	};
+	return {
+		address,
+		actions
+	};
+};
+//#endregion
+export { embeddedRowTargets };

package/dist/app/list-page.js

@@ -31,6 +31,7 @@ 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 { CalendarDisplay } from "./displays/calendar-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
@@ -115,7 +116,7 @@ const ListPage = ({ address }) => {
 };
 const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
-	const { set, go, href } = useAppAddress();
+	const { set, listTo, go, href } = useAppAddress();
 	const resource = model.name;
 	const view = meta.views[resource];
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
@@ -202,10 +203,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		setFilter(state, text ? [...others, where$1.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
-	const sortMenu = display && /* @__PURE__ */ jsx(SortMenu, {
+	const sorted = display?.kind === "calendar" ? void 0 : display;
+	const sortMenu = sorted && /* @__PURE__ */ jsx(SortMenu, {
 		model,
 		view,
-		display,
+		display: sorted,
 		orderBy,
 		onChange: (next) => set({ orderBy: next })
 	});
@@ -234,12 +236,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		onRemove: (key) => setFilter(removeChip(state, key)),
 		onClear: () => setFilter(emptyFilterState)
 	});
-	const phoneSort = display && /* @__PURE__ */ jsx(FilterSection, {
+	const phoneSort = sorted && /* @__PURE__ */ jsx(FilterSection, {
 		title: "Sort",
 		children: /* @__PURE__ */ jsx(SortMenu, {
 			model,
 			view,
-			display,
+			display: sorted,
 			orderBy,
 			onChange: (next) => set({ orderBy: next }),
 			className: "min-h-11 w-full"
@@ -425,6 +427,15 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			filter: loadFilter,
 			orderBy
 		});
+		if (display.kind === "calendar") return /* @__PURE__ */ jsx(CalendarDisplay, {
+			model,
+			view,
+			display,
+			fields: loaded,
+			filter: loadFilter,
+			at: address.calendar,
+			linkTo: (calendar) => listTo({ calendar })
+		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,
 			list: displayRows

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

@@ -12,10 +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. 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.
+* (`update`, `delete`, `link`, and `ai`, which the server runs), 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();
@@ -30,8 +30,9 @@ const useActionRunner = (resource, scope, afterRun) => {
 	const actions = (views[resource]?.actions ?? []).flatMap((action) => actionFor(action, scope?.record) ?? []);
 	const blocked = (action) => {
 		const kind = action.run?.kind;
-		if ((kind === "update" || kind === "delete") && !scope) return "Needs a record";
-		if (kind === "update" && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
+		if ((kind === "update" || kind === "delete" || kind === "ai") && !scope) return "Needs a record";
+		if ((kind === "update" || kind === "ai") && (!can(permissions, "update") || scope?.permissions?.update === false)) return "You cannot change this record";
+		if (action.run?.kind === "ai" && scope?.permissions?.fields?.[action.run.writes] === "read") return "You cannot change this record";
 		if (kind === "delete" && (!can(permissions, "delete") || scope?.permissions?.delete === false)) return "You cannot delete this record";
 		if (!action.run && !handlers?.[action.name]) return `The app has no handler for "${action.name}"`;
 		const custom = action.inputs?.find((input) => input.kind === "custom" && !components?.[input.component ?? ""]);
@@ -46,6 +47,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 		}
 		if (run?.kind === "update") await client.update(resource, scope.key, run.values, scope.etag ?? "*");
 		else if (run?.kind === "delete") await client.remove(resource, scope.key, { etag: scope.etag });
+		else if (run?.kind === "ai") await client.generate(resource, scope.key, action.name);
 		else await handlers[action.name]({
 			resource,
 			record: scope?.record,