@protobase/ui 0.21.8 → 0.21.10

package/dist/account/account-security-page.js

@@ -17,7 +17,8 @@ const takeLinkError = () => {
 };
 /** The signed-in person's passkeys, two-factor authentication and connected accounts, within what the sign-in policy allows. */
 const AccountSecurityPage = ({ email }) => {
-	const { session, signInProviders, linkProvider } = useAuth();
+	const { session, signInProviders, socialProviders, linkProvider } = useAuth();
+	const linkable = signInProviders.filter((provider) => socialProviders.includes(provider.id));
 	const { account } = session;
 	const [loaded, setLoaded] = useState();
 	const [error, setError] = useState();
@@ -61,11 +62,11 @@ const AccountSecurityPage = ({ email }) => {
 				onNewBackupCodes: (password) => account.newBackupCodes(password),
 				onChanged: reload
 			}),
-			signInProviders.length > 0 && /* @__PURE__ */ jsx(SignInProvidersSection, {
-				providers: signInProviders,
+			linkable.length > 0 && /* @__PURE__ */ jsx(SignInProvidersSection, {
+				providers: linkable,
 				linked: loaded.linked,
 				onConnect: linkProvider,
-				error: linkError && providerMessage(linkError, signInProviders.length === 1 ? signInProviders[0].name : "the provider")
+				error: linkError && providerMessage(linkError, linkable.length === 1 ? linkable[0].name : "the provider")
 			})
 		] }) : error ? /* @__PURE__ */ jsx("p", {
 			role: "alert",

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