@protobase/ui 0.21.7 → 0.21.9

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

@@ -0,0 +1,175 @@
+import { cn } from "../../lib/cn.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { dayIn, viewerZone } from "../../format/zone.js";
+import { formatDate, formatWeekday } from "../../format/date.js";
+import { ErrorBanner } from "../error-banner.js";
+import { usePermissions } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
+import { can, rowAllows } from "../permissions.js";
+import { collision } from "./board-dnd.js";
+import { byDay, calendarView, gridDays, rangeOf } from "./calendar-range.js";
+import { CalendarControls } from "./calendar-controls.js";
+import { dayCoordinates, dayId } from "./calendar-dnd.js";
+import { CalendarDay } from "./calendar-day.js";
+import { CalendarEvent, EventChip, eventTitle } from "./calendar-event.js";
+import { useCalendarRows } from "./use-calendar-rows.js";
+import { movedRows, useCalendarMove } from "./use-calendar-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/calendar-display.tsx
+/** The events a month's day shows before a link to its week, which shows them all. */
+const monthDayLimit = 3;
+/**
+* The list's records on the days of a month or a week, loaded for those days alone through the list API; an event
+* dragged, or moved with the keyboard, to another day saves the record with its dates moved by the same days.
+*/
+const CalendarDisplay = ({ model, view, display, fields, filter, at, linkTo, now = Date.now() }) => {
+	const [local, setLocal] = useState();
+	const shown = calendarView(linkTo ? at : local, now);
+	const days = gridDays(shown);
+	const list = useCalendarRows({
+		model,
+		display,
+		range: rangeOf(shown),
+		fields,
+		filter
+	});
+	const { moves, move } = useCalendarMove(model, display);
+	const placed = byDay(movedRows(list.rows, moves), display, model, days);
+	const permissions = usePermissions(model.name);
+	const movable = can(permissions, "update") && [display.start, display.end].every((name) => name === void 0 || !model.fields[name]?.readOnly);
+	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: dayCoordinates
+	}));
+	const today = dayIn(now, viewerZone());
+	const week = shown.scale === "week";
+	const dayText = (id) => formatDate(Date.parse(`${String(id).slice(dayId("").length)}T00:00:00Z`));
+	const title = (picked) => eventTitle(model, view, display, picked.row);
+	const announcements = {
+		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current)}.`,
+		onDragOver: ({ active: picked, over }) => `${title(picked.data.current)} is over ${over ? dayText(over.id) : "no day"}.`,
+		onDragEnd: ({ active: picked, over }) => over ? `${title(picked.data.current)} was moved to ${dayText(over.id)}.` : `${title(picked.data.current)} was put back.`,
+		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current)} was cancelled.`
+	};
+	const release = () => {
+		setActive(void 0);
+		setTimeout(() => dragged.current = false);
+	};
+	const start = ({ active: picked }) => {
+		dragged.current = true;
+		setActive(picked.data.current);
+	};
+	const end = ({ active: picked, over }) => {
+		release();
+		const { row, day } = picked.data.current;
+		const target = over ? String(over.id).slice(dayId("").length) : void 0;
+		if (target && target !== day) move(row, day, target);
+	};
+	const more = (day, hidden) => {
+		const to = calendarView({
+			scale: "week",
+			day
+		}, now);
+		const text = `+${hidden} more`;
+		const className = "self-start rounded px-1 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary";
+		return linkTo ? /* @__PURE__ */ jsx(AppLink, {
+			to: linkTo(to),
+			className,
+			children: text
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className,
+			onClick: () => setLocal(to),
+			children: text
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsx(CalendarControls, {
+				view: shown,
+				now,
+				linkTo,
+				onView: setLocal
+			}),
+			list.error && /* @__PURE__ */ jsx(ErrorBanner, {
+				title: "Could not load rows",
+				error: list.error
+			}),
+			list.capped && /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"Showing the first ",
+					500,
+					" records of this ",
+					shown.scale,
+					". Narrow the filter to see the rest."
+				]
+			}),
+			/* @__PURE__ */ jsxs(DndContext, {
+				sensors,
+				collisionDetection: collision,
+				onDragStart: start,
+				onDragEnd: end,
+				onDragCancel: release,
+				accessibility: {
+					announcements,
+					screenReaderInstructions: { draggable: "To move an event to another day, press Space, move it a day with the left and right arrow keys or a week with the up and down arrow keys, and press Space again to drop it there. Escape puts it back." }
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "overflow-hidden rounded-lg border border-border",
+					children: [!week && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: "grid grid-cols-7 gap-px border-b border-border bg-border",
+						children: days.slice(0, 7).map((day) => /* @__PURE__ */ jsx("span", {
+							className: "bg-surface px-1.5 py-1 text-xs font-medium text-muted-foreground",
+							children: formatWeekday(Date.parse(`${day}T00:00:00Z`))
+						}, day))
+					}), /* @__PURE__ */ jsx("div", {
+						className: cn("grid gap-px bg-border", week ? "grid-cols-1 sm:grid-cols-7" : "grid-cols-7"),
+						children: days.map((day) => {
+							const events = placed.get(day);
+							const visible = week ? events : events.slice(0, monthDayLimit);
+							return /* @__PURE__ */ jsx(CalendarDay, {
+								day,
+								count: events.length,
+								inMonth: week || day.startsWith(shown.day.slice(0, 7)),
+								today: day === today,
+								week,
+								more: visible.length < events.length && more(day, events.length - visible.length),
+								children: list.loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4" }) : visible.map((row) => /* @__PURE__ */ jsx(CalendarEvent, {
+									model,
+									view,
+									display,
+									row,
+									day,
+									movable: movable && rowAllows(row.record, "update"),
+									dragged: () => dragged.current
+								}, row.key))
+							}, day);
+						})
+					})]
+				}), /* @__PURE__ */ jsx(DragOverlay, { children: active && /* @__PURE__ */ jsx(EventChip, {
+					model,
+					view,
+					display,
+					row: active.row,
+					day: active.day
+				}) })]
+			})
+		]
+	});
+};
+//#endregion
+export { CalendarDisplay };

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,73 @@
+import { cn } from "../../lib/cn.js";
+import { dayIn, viewerZone } from "../../format/zone.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 dayIn(ms, viewerZone()) === 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,129 @@
+import { dayIn, instantAt, startOfDayIn, viewerZone, zoneOffset } from "../../format/zone.js";
+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, zone = viewerZone()) => normalised(at ?? {
+	scale: "month",
+	day: dayIn(now, zone)
+});
+/** The month or week of `scale` that holds `now`. */
+const todayView = (scale, now, zone = viewerZone()) => normalised({
+	scale,
+	day: dayIn(now, zone)
+});
+/** 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, zone = viewerZone()) => {
+	const timestamp = isTimestamp(display, model);
+	const instant = (day) => new Date(startOfDayIn(day, zone)).toISOString().replace(".000Z", "Z");
+	const bound = (day) => timestamp ? {
+		kind: "timestamp",
+		value: instant(day),
+		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, zone = viewerZone()) => {
+	const start = instantOf(record[display.start]);
+	if (start === void 0) return [];
+	const timestamp = isTimestamp(display, model);
+	const day = (ms) => timestamp ? dayIn(ms, zone) : dayOf(ms);
+	const first = day(start);
+	const end = display.end === void 0 ? void 0 : instantOf(record[display.end]);
+	const ending = end === void 0 ? first : day(timestamp ? 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, zone = viewerZone()) => {
+	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, zone)) 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 on the clock of `zone`.
+*/
+const movedPatch = (record, display, model, from, to, zone = viewerZone()) => {
+	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(instantAt(ms + zoneOffset(ms, zone) + days * dayMs, zone)).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