@protobase/ui 0.21.8 → 0.21.9

package/dist/app/app.js

@@ -193,6 +193,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		onSignOut: user && (() => void signOut()),
 		signIn: user ? void 0 : signIn.link(),
 		workspace: current?.organization?.name ?? workspace,
+		appName: meta.appName,
 		logo: ProjectLogo,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),

package/dist/app/charts/chart-view.js

@@ -1,4 +1,5 @@
 import { Skeleton } from "../../primitives/skeleton.js";
+import { viewerZone } from "../../format/zone.js";
 import { labelFieldOf } from "../../live/model-helpers.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useAggregate } from "../../data/use-aggregates.js";
@@ -30,7 +31,8 @@ const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter =
 	const label = target && target.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
 	const params = dated ? {
 		granularity,
-		range
+		range,
+		timeZone: viewerZone()
 	} : {
 		limit,
 		...label && { label }

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

@@ -1,4 +1,5 @@
 import { segmentedClass } from "../../primitives/segmented.js";
+import { dayIn, viewerZone } from "../../format/zone.js";
 import { formatDayRange, formatMonth } from "../../format/date.js";
 import { buttonClass } from "../../primitives/button.js";
 import { AppLink } from "../use-app-address.js";
@@ -31,7 +32,7 @@ const CalendarControls = ({ view, now, linkTo, onView }) => {
 		onClick: () => onView?.(to),
 		children
 	});
-	const holdsToday = view.scale === "month" && new Date(now).toISOString().startsWith(view.day.slice(0, 7));
+	const holdsToday = view.scale === "month" && dayIn(now, viewerZone()).startsWith(view.day.slice(0, 7));
 	const scaled = (to) => to === "week" && holdsToday ? todayView("week", now) : calendarView({
 		scale: to,
 		day: view.day

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

@@ -1,5 +1,6 @@
 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";
@@ -51,7 +52,7 @@ const CalendarDisplay = ({ model, view, display, fields, filter, at, linkTo, now
 		},
 		coordinateGetter: dayCoordinates
 	}));
-	const today = new Date(now).toISOString().slice(0, 10);
+	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);

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

@@ -1,4 +1,5 @@
 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";
@@ -19,7 +20,7 @@ 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;
+	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 }) => {

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

@@ -1,3 +1,4 @@
+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;
@@ -15,14 +16,14 @@ const normalised = ({ scale, day }) => ({
 	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 ?? {
+const calendarView = (at, now, zone = viewerZone()) => normalised(at ?? {
 	scale: "month",
-	day: dayOf(now)
+	day: dayIn(now, zone)
 });
 /** The month or week of `scale` that holds `now`. */
-const todayView = (scale, now) => normalised({
+const todayView = (scale, now, zone = viewerZone()) => normalised({
 	scale,
-	day: dayOf(now)
+	day: dayIn(now, zone)
 });
 /** The month or week before (-1) or after (1) `view`. */
 const stepView = (view, step) => view.scale === "month" ? {
@@ -53,11 +54,12 @@ const isTimestamp = (display, model) => model.fields[display.start]?.type === "t
 * 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 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: `${day}T00:00:00Z`,
+		value: instant(day),
 		span: {
 			start: 0,
 			end: 0
@@ -86,33 +88,35 @@ const instantOf = (value) => {
 * 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 eventDays = (record, display, model, days, zone = viewerZone()) => {
 	const start = instantOf(record[display.start]);
 	if (start === void 0) return [];
-	const first = dayOf(start);
+	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 : dayOf(isTimestamp(display, model) ? end - 1 : 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) => {
+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)) placed.get(day).push(row);
+	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.
+* number of days, a timestamp keeping its time of day on the clock of `zone`.
 */
-const movedPatch = (record, display, model, from, to) => {
+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(ms + days * dayMs).toISOString() : addDays(dayOf(ms), days);
+		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]);

package/dist/app/export/cells.js

@@ -1,3 +1,4 @@
+import { viewerZone, zoneOffset } from "../../format/zone.js";
 import { fileShown, isStoredFile } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 //#region src/app/export/cells.ts
@@ -57,17 +58,18 @@ const numberCell = (column, value, mode) => {
 		value: number
 	};
 };
-const dateCell = (type, value, mode) => {
+const dateCell = (type, value, mode, zone) => {
 	const ms = Date.parse(String(value));
 	if (Number.isNaN(ms)) return text(String(value));
+	const clock = type === "timestamp" && mode === "shown" ? ms + zoneOffset(ms, zone) : ms;
 	return {
 		kind: "number",
-		value: excelSerial(ms),
+		value: excelSerial(clock),
 		format: dateFormats[mode][type]
 	};
 };
 /** A value as one typed Excel cell: numbers, dates and booleans as such, labels or stored values as text. */
-const xlsxCell = (column, value, labels, mode) => {
+const xlsxCell = (column, value, labels, mode, zone = viewerZone()) => {
 	if (isEmpty(value)) return empty;
 	const { field } = column;
 	switch (field.type) {
@@ -79,7 +81,7 @@ const xlsxCell = (column, value, labels, mode) => {
 		case "bigint":
 		case "decimal": return numberCell(column, value, mode);
 		case "date":
-		case "timestamp": return dateCell(field.type, value, mode);
+		case "timestamp": return dateCell(field.type, value, mode, zone);
 		case "relation":
 			if (mode === "shown") return text(relationLabel(column, value, labels));
 			return typeof value === "number" ? {

package/dist/app/field-editor.js

@@ -7,7 +7,8 @@ import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
 import { Textarea } from "../primitives/textarea.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
-import { displayValue } from "../live/display-value.js";
+import { contactFormat, contactInputProps } from "../live/contact-links.js";
+import { displayValue, valueTitle } from "../live/display-value.js";
 import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
 import { SensitiveField } from "./sensitive-field.js";
@@ -17,6 +18,7 @@ import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { numeric, numericInputProps } from "./numeric-input.js";
+import { ContactLink } from "../live/contact-link.js";
 import { ArrowUpRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
@@ -95,7 +97,16 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		source: stored,
 		className: "py-1.5"
 	});
+	const contact = field.type === "text" ? contactFormat(hints) : void 0;
+	if ((!isEditable(field) || locked) && contact && typeof stored === "string" && stored !== "") return /* @__PURE__ */ jsx("div", {
+		className: "min-w-0 break-words py-1.5",
+		children: /* @__PURE__ */ jsx(ContactLink, {
+			format: contact,
+			value: stored
+		})
+	});
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
+		title: valueTitle(field, stored),
 		className: cn("py-1.5 tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
 	});
@@ -133,6 +144,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		placeholder,
 		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
 		...numericInputProps(field.type),
+		...contactInputProps(contact),
 		value: String(value),
 		onChange: (event) => onChange(event.target.value)
 	});

package/dist/app/import/convert.js

@@ -1,3 +1,4 @@
+import { parseNumberText } from "../../format/number-text.js";
 import { cellText, isEmptyCell, isSheetDate } from "./sheet-cell.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/import/convert.ts
@@ -10,17 +11,6 @@ const problem = (text) => ({
 	problem: text
 });
 const quoted = (cell) => `“${cellText(cell)}”`;
-const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-/**
-* A number written as text, as a plain decimal (`-1234.5`): digits grouped by thousands with the other separator or
-* spaces, and the `decimal` separator before the fraction. Undefined when the text is no such number.
-*/
-const parseNumberText = (text, decimal) => {
-	const group = `[${escapeRegExp(decimal === "." ? "," : ".")}\\s\\u00a0\\u202f']`;
-	const match = new RegExp(`^([-+]?)(\\d{1,3}(?:${group}\\d{3})+|\\d+)(?:${escapeRegExp(decimal)}(\\d+))?$`).exec(text.trim());
-	if (match) return `${match[1] === "-" ? "-" : ""}${match[2].replace(/\D/g, "")}${match[3] ? `.${match[3]}` : ""}`;
-	if (decimal === "." && /^[-+]?\d+(\.\d+)?e[-+]?\d+$/i.test(text.trim())) return String(Number(text.trim()));
-};
 const toNumberText = (cell, options) => {
 	if (typeof cell === "number") return String(cell);
 	if (typeof cell === "string") return parseNumberText(cell, options.decimal);
@@ -148,4 +138,4 @@ const convertCell = (field, hints, cell, options) => {
 	}
 };
 //#endregion
-export { convertCell, parseNumberText };
+export { convertCell };

package/dist/app/import/locale-formats.js

@@ -1,10 +1,11 @@
+import { localeDecimal } from "../../format/number-text.js";
 //#region src/app/import/locale-formats.ts
 /**
 * How the browser's locale writes numbers and dates, as the import's starting choice: its decimal separator, and whether
 * its dates put the day or the month first. The user sees both and can change them.
 */
 const localeFormats = (locale) => {
-	const decimal = new Intl.NumberFormat(locale).formatToParts(1.5).find((part) => part.type === "decimal")?.value === "," ? "," : ".";
+	const decimal = localeDecimal(locale);
 	const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(2026, 3, 3)).map((part) => part.type);
 	return {
 		decimal,

package/dist/app/incoming-card.js

@@ -0,0 +1,35 @@
+import { Skeleton } from "../primitives/skeleton.js";
+import { formatInt } from "../format/number.js";
+import { SidebarCard } from "../record-view/record-sidebar.js";
+import { useAdminMeta } from "./meta-gate.js";
+import { AppLink } from "./use-app-address.js";
+import { incomingAddress, incomingRelations } from "./incoming-relations.js";
+import { useIncomingCounts } from "./use-incoming-counts.js";
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/incoming-card.tsx
+/** The rail's card of the records pointing at this one: per resource and field, how many, linking to them in their list. */
+const IncomingCard = ({ model, recordKey, layout, lines }) => {
+	const { resources, views } = useAdminMeta();
+	const counts = useIncomingCounts(incomingRelations(model, resources, views, layout, lines), resources, recordKey);
+	if (counts.length === 0) return null;
+	return /* @__PURE__ */ jsx(SidebarCard, {
+		title: "Related records",
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "-mx-2",
+			children: counts.map(({ relation, count }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(AppLink, {
+				to: incomingAddress(relation, recordKey),
+				className: "group flex items-center justify-between gap-3 rounded-md px-2 py-2 hover:bg-muted",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate font-medium text-primary-text",
+					children: relation.label
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "flex shrink-0 items-center gap-1 tabular-nums text-muted-foreground",
+					children: [count === void 0 ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-6" }) : `${formatInt(count.count)}${count.exact ? "" : "+"}`, /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-faint-foreground group-hover:text-foreground" })]
+				})]
+			}) }, `${relation.resource}.${relation.field}`))
+		})
+	});
+};
+//#endregion
+export { IncomingCard };

package/dist/app/incoming-relations.js

@@ -0,0 +1,36 @@
+import { humanize } from "../live/naming.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/incoming-relations.ts
+const where$1 = createWhere();
+/**
+* The relations that point at records of `model`, as the rail lists them by default: each filterable relation of
+* another resource the user can see (a hidden resource or field is not in the meta), to a record of one key column.
+* Left out are a resource's tenant, which every record holds, the lines drawn on the page, and what an `l.related`
+* section of the page already lists. Two fields of one resource are told apart by their labels.
+*/
+const incomingRelations = (model, resources, views, layout, lines) => {
+	if (model.primaryKey.length !== 1) return [];
+	const listed = new Set(layout.flatMap((item) => item.kind === "related" && !item.through ? [`${item.resource}.${item.field}`] : []));
+	const found = Object.values(resources).flatMap((source) => Object.values(source.fields).filter((field) => field.type === "relation" && field.relation?.resource === model.name && field.relation.columns.length === 1 && field.filterable).filter((field) => field.name !== source.tenant && source.name !== lines?.name && !listed.has(`${source.name}.${field.name}`)).map((field) => ({
+		source,
+		field: field.name
+	})));
+	return found.map(({ source, field }) => {
+		const view = views[source.name];
+		const plural = view?.names?.plural ?? humanize(source.name);
+		const several = found.filter((other) => other.source.name === source.name).length > 1;
+		return {
+			resource: source.name,
+			field,
+			label: several ? `${plural} (${view?.fields[field]?.label ?? humanize(field)})` : plural
+		};
+	});
+};
+/** The list of the records that point at `key` through `relation`, filtered as its list's address reads. */
+const incomingAddress = (relation, key) => ({
+	kind: "list",
+	resource: relation.resource,
+	filter: printFilter(where$1.eq(relation.field, key))
+});
+//#endregion
+export { incomingAddress, incomingRelations };

package/dist/app/list-chart.js

@@ -1,3 +1,4 @@
+import { viewerZone } from "../format/zone.js";
 import { useSeries } from "../data/use-aggregates.js";
 import { ActivityChart } from "../activity-chart/activity-chart.js";
 import { useState } from "react";
@@ -18,7 +19,8 @@ const ListChart = ({ resource, chart, title, noun, filter }) => {
 		field: chart.field,
 		range,
 		granularity,
-		filter
+		filter,
+		timeZone: viewerZone()
 	}).data?.points.map((point) => ({
 		at: Date.parse(`${point.bucket}Z`),
 		count: point.count

package/dist/app/pages/field-value.js

@@ -3,13 +3,15 @@ import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
-import { displayValue } from "../../live/display-value.js";
+import { contactFormat } from "../../live/contact-links.js";
+import { displayValue, valueTitle } from "../../live/display-value.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
+import { ContactLink } from "../../live/contact-link.js";
 import { fetchLabels } from "../../live/relation-labels.js";
 import { ValueBadge } from "../value-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -74,12 +76,18 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 	}
 	if (isMarkdown(field, hints)) return /* @__PURE__ */ jsx(Markdown, { source: String(value) });
 	const text = displayValue(field, value, hints);
+	const contact = field.type === "text" ? contactFormat(hints) : void 0;
+	if (contact) return /* @__PURE__ */ jsx(ContactLink, {
+		format: contact,
+		value: text
+	});
 	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
 		value,
 		hints,
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
+		title: valueTitle(field, value),
 		className: cn(hints.format === "code" && "font-mono text-xs", (field.type === "decimal" || field.type === "integer") && "tabular-nums", hints.multiline && "whitespace-pre-line break-words"),
 		children: text
 	});

package/dist/app/pages/record-actions.js

@@ -1,4 +1,7 @@
+import { useTopBarSlot } from "../../app-shell/top-bar-slot.js";
+import "../../app-shell/top-bar.js";
 import { ActionRail } from "../../record-view/action-rail.js";
+import { ActionMenu } from "../../record-view/action-menu.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ActionPrompt, asksFirst } from "./action-prompt.js";
 import { useActionRunner } from "./use-run-action.js";
@@ -6,14 +9,17 @@ import { actionIcon } from "../action-icon.js";
 import { useState } from "react";
 import { Pencil, Trash2 } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 //#region src/app/pages/record-actions.tsx
 /**
 * The record page's actions in one rail: Edit, a link to the form at `edit`, when the page offers it; the view's named
 * actions, run like the Action block runs them, a delete among them returning to the list; and the record's own Delete,
-* `onDelete`, unless a named action deletes already.
+* `onDelete`, unless a named action deletes already. On a mobile screen they sit in the top bar's menu instead, at hand
+* however long the record is, when the shell has a top bar.
 */
 const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 	const { go } = useAppAddress();
+	const slot = useTopBarSlot();
 	const scope = {
 		model,
 		record: stored.record,
@@ -39,8 +45,9 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		...edit ? [{
 			name: "Edit",
 			icon: Pencil,
-			render: ({ className, children }) => /* @__PURE__ */ jsx(AppLink, {
+			render: ({ className, children, role }) => /* @__PURE__ */ jsx(AppLink, {
 				to: edit,
+				role,
 				className,
 				children
 			})
@@ -54,20 +61,31 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		}] : []
 	];
 	if (actions.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions }), asking && /* @__PURE__ */ jsx(ActionPrompt, {
-		action: asking,
-		label: asking.label,
-		danger: asking.run?.kind === "delete",
-		onCancel: () => setAsking(void 0),
-		onConfirm: () => {
-			setAsking(void 0);
-			runner.run(asking);
-		},
-		onSubmit: async (values) => {
-			await runner.submit(asking, values);
-			setAsking(void 0);
-		}
-	})] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: slot ? "max-md:hidden" : void 0,
+			children: /* @__PURE__ */ jsx(ActionRail, { actions })
+		}),
+		slot && createPortal(/* @__PURE__ */ jsx(ActionMenu, {
+			actions,
+			label: "Record actions",
+			className: "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden"
+		}), slot),
+		asking && /* @__PURE__ */ jsx(ActionPrompt, {
+			action: asking,
+			label: asking.label,
+			danger: asking.run?.kind === "delete",
+			onCancel: () => setAsking(void 0),
+			onConfirm: () => {
+				setAsking(void 0);
+				runner.run(asking);
+			},
+			onSubmit: async (values) => {
+				await runner.submit(asking, values);
+				setAsking(void 0);
+			}
+		})
+	] });
 };
 //#endregion
 export { RecordActions };

package/dist/app/record-page.js

@@ -6,12 +6,12 @@ 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 { useNavigationGuard } from "./router.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { humanize } from "../live/naming.js";
 import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
-import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
+import { MetadataCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
@@ -21,8 +21,9 @@ import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitle } from "../live/model-helpers.js";
+import { contactFormat } from "../live/contact-links.js";
 import { toneFor } from "../live/columns-from-model.js";
-import { displayValue } from "../live/display-value.js";
+import { displayValue, valueTitle } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
@@ -30,6 +31,7 @@ import { useProjectUi } from "./pages/project-ui.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { Markdown } from "../markdown/markdown.js";
+import { ContactLink } from "../live/contact-link.js";
 import { FieldEditor } from "./field-editor.js";
 import { fieldMessage } from "./field-errors.js";
 import { useFocusFirstInvalid } from "./use-focus-first-invalid.js";
@@ -52,6 +54,7 @@ import { HistorySection } from "./history/history-section.js";
 import { CommentsSection } from "./comments/comments-section.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
+import { IncomingCard } from "./incoming-card.js";
 import { RelatedSection } from "./related-section.js";
 import { Fragment, useMemo } from "react";
 import { Check } from "lucide-react";
@@ -121,8 +124,7 @@ const RecordPage = ({ resource, recordKey }) => {
 };
 const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const meta = useAdminMeta();
-	const { basePath } = useRouter();
-	const { address, go, open } = useAppAddress();
+	const { address, go } = useAppAddress();
 	const view = meta.views[model.name];
 	const title = recordTitle(model, view, stored.record, recordKey);
 	const { state: auth } = useAuth();
@@ -168,7 +170,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		}, { replace: true }),
 		onReview: () => void queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) })
 	});
-	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
+	const related = useRelatedRecords(model, meta.resources, meta.views, stored.record);
 	const pickTarget = (name) => {
 		const field = model.fields[name];
 		const target = field?.relation ? meta.resources[field.relation.resource] : void 0;
@@ -180,7 +182,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		...stored.record,
 		...Object.fromEntries(picked.map((field) => [field.name, fromDraft(field, editor.value(field.name))]))
 	};
-	const chosen = useRelatedRecords(model, view, meta.resources, meta.views, drafted, basePath);
+	const chosen = useRelatedRecords(model, meta.resources, meta.views, drafted);
 	const pick = (name, next) => {
 		const target = pickTarget(name);
 		if (!target || !isChosen(next)) return editor.change(name, next);
@@ -279,11 +281,16 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 			const text = displayValue(field, stored.record[name], hint(name));
 			const value = stored.record[name];
 			const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
+			const contact = field.type === "text" && typeof value === "string" && value !== "" ? contactFormat(hint(name)) : void 0;
 			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
 				value,
 				hints: hint(name),
 				children: text
-			}) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : /* @__PURE__ */ jsx("strong", {
+			}) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : contact ? /* @__PURE__ */ jsx(ContactLink, {
+				format: contact,
+				value: text
+			}) : /* @__PURE__ */ jsx("strong", {
+				title: valueTitle(field, value),
 				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
 				children: text
 			});
@@ -349,7 +356,6 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 					children: [
 						/* @__PURE__ */ jsx(RecordHeader, {
 							title,
-							titleHidden: true,
 							status: status ? {
 								label: enumLabel(status, hint("status")?.valueLabels),
 								tone: toneFor(status)
@@ -404,7 +410,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 						/* @__PURE__ */ jsxs("div", {
 							className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
 							children: [/* @__PURE__ */ jsxs("main", {
-								className: cn("divide-y divide-border", !status && "*:first:pt-0!"),
+								className: "divide-y divide-border",
 								children: [layout.flatMap((item, index) => {
 									if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
 										item,
@@ -463,7 +469,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 									locked: shown !== "form"
 								})]
 							}), /* @__PURE__ */ jsxs("aside", {
-								className: cn("space-y-4", status && "md:pt-8"),
+								className: "space-y-4 md:pt-8",
 								children: [
 									formControls && /* @__PURE__ */ jsx("div", {
 										className: "hidden flex-col items-center gap-2 md:flex",
@@ -495,16 +501,18 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 											if (!name || !field || !visible(name)) return [];
 											return [{
 												label: hint(name)?.label ?? humanize(name),
-												value: known(name) ? displayValue(field, stored.record[name], hint(name)) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+												value: known(name) ? /* @__PURE__ */ jsx("span", {
+													title: valueTitle(field, stored.record[name]),
+													children: displayValue(field, stored.record[name], hint(name))
+												}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
 											}];
 										})
 									}),
-									related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {
-										title: "Related records",
-										children: /* @__PURE__ */ jsx(RelatedRecords, {
-											records: related.records,
-											onNavigate: open
-										})
+									!preview && /* @__PURE__ */ jsx(IncomingCard, {
+										model,
+										recordKey,
+										layout,
+										lines: linesModel
 									})
 								]
 							})]