@protobase/ui 0.19.2 → 0.19.3

package/dist/app/gallery/detail-fields.js

@@ -0,0 +1,12 @@
+//#region src/app/gallery/detail-fields.ts
+/**
+* The fields of a photo's details: those its record page shows in its sections, or without a layout every field but its
+* key and tenant, less sensitive ones and those the gallery already shows: `omit`, such as the photo's file and the
+* field pointing at the gallery's record.
+*/
+const detailFields = (model, view, omit) => {
+	const sections = (view?.layout ?? []).flatMap((item) => item.kind === "section" ? item.fields : []);
+	return (sections.length > 0 ? [...new Set(sections)] : Object.keys(model.fields).filter((name) => name !== model.tenant && !model.primaryKey.includes(name))).filter((name) => model.fields[name] && !model.fields[name].sensitive && !omit.includes(name));
+};
+//#endregion
+export { detailFields };

package/dist/app/gallery/gallery-layout.js

@@ -13,5 +13,7 @@ const galleryTiles = (count) => {
 const swipeStep = (dx, dy) => Math.abs(dx) < 40 || Math.abs(dx) <= Math.abs(dy) ? 0 : dx < 0 ? 1 : -1;
 /** A key's step: the right arrow moves to the next photo, the left arrow to the previous one. */
 const keyStep = (key) => key === "ArrowRight" ? 1 : key === "ArrowLeft" ? -1 : 0;
+/** The photo a step from `index` lands on among `count`: it stops at the first and the last rather than wrapping around. */
+const steppedPhoto = (index, by, count) => Math.min(Math.max(index + by, 0), Math.max(count - 1, 0));
 //#endregion
-export { galleryTiles, keyStep, swipeStep };
+export { galleryTiles, keyStep, steppedPhoto, swipeStep };

package/dist/app/gallery/gallery-section.js

@@ -8,6 +8,7 @@ import { FileImage } from "../../live/file-image.js";
 import { Section } from "../../record-view/section.js";
 import { galleryTiles } from "./gallery-layout.js";
 import { Lightbox } from "./lightbox.js";
+import { detailFields } from "./detail-fields.js";
 import { PhotoDetails } from "./photo-details.js";
 import { useGalleryPhotos } from "./use-gallery-photos.js";
 import { useState } from "react";
@@ -47,7 +48,7 @@ const Tile = ({ photo, large }) => {
 /**
 * A record's photos as tiles, one large and the next ones smaller, the last counting those not drawn ("+N"); a mobile
 * screen draws the large one with the number of photos. Each tile opens the lightbox at its photo. A photo held by a
-* record of a resource the user may read gets a details button there, whose details the record API answers. A record
+* record of a resource the user may read has its details beside it there, as the record API answers them. A record
 * without photos has no gallery.
 */
 const GallerySection = ({ item, record, recordKey }) => {
@@ -71,13 +72,15 @@ const GallerySection = ({ item, record, recordKey }) => {
 	const { shown, more } = galleryTiles(count);
 	const holder = photos.holder;
 	const holderView = holder && views[holder.name];
-	const readable = holder !== void 0 && photoPermissions.read !== false;
+	const fields = holder ? detailFields(holder, holderView, [item.photos?.image, item.photos?.field].filter((name) => name !== void 0)) : [];
+	const readable = holder !== void 0 && photoPermissions.read !== false && fields.length > 0;
 	const details = (index) => {
 		const key = photos.items[index]?.key;
 		return readable && key !== void 0 ? /* @__PURE__ */ jsx(PhotoDetails, {
 			model: holder,
 			view: holderView,
-			photoKey: key
+			photoKey: key,
+			fields
 		}, key) : void 0;
 	};
 	return /* @__PURE__ */ jsxs(Section, {
@@ -116,7 +119,7 @@ const GallerySection = ({ item, record, recordKey }) => {
 			onIndex: setOpen,
 			onClose: () => setOpen(void 0),
 			details,
-			detailsLabel: holder && `${holderView?.names?.singular ?? humanize(holder.name)} details`
+			detailsTitle: holder && `${holderView?.names?.singular ?? humanize(holder.name)} details`
 		})]
 	});
 };

package/dist/app/gallery/lightbox.js

@@ -2,25 +2,27 @@ import { cn } from "../../lib/cn.js";
 import { useFocusTrap } from "../../lib/use-focus-trap.js";
 import { shownImage } from "../../live/file-values.js";
 import { FileImage } from "../../live/file-image.js";
-import { shownPhoto } from "../displays/card-photos.js";
-import { keyStep, swipeStep } from "./gallery-layout.js";
-import { useRef, useState } from "react";
-import { ChevronLeft, ChevronRight, Info, X } from "lucide-react";
+import { keyStep, steppedPhoto, swipeStep } from "./gallery-layout.js";
+import { useRef } from "react";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/lightbox.tsx
 const control = "flex size-10 shrink-0 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
 /**
 * Photos one at a time at full size over the page: a modal dialog with a counter, arrows and keys (left, right, Escape)
-* that step through them and wrap around, a sideways swipe on a touch screen, and, for a photo with details the user may
-* read, a button that shows them under the photo. The page does not scroll behind it, and focus returns to what opened it.
+* that step through them, stopping at the first and the last, a sideways swipe on a touch screen, and, for a photo with details the user may
+* read, those details in a sidebar beside it, or below it on a mobile screen, where the dialog scrolls down to them. The
+* page does not scroll behind it, and focus returns to what opened it.
 */
-const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabel = "Details" }) => {
+const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitle = "Details" }) => {
 	const panel = useRef(null);
 	const start = useRef(void 0);
-	const [showDetails, setShowDetails] = useState(false);
 	useFocusTrap(panel, true, onClose);
 	const count = photos.length;
-	const step = (by) => by !== 0 && onIndex(shownPhoto(index + by, count));
+	const step = (by) => {
+		const next = steppedPhoto(index, by, count);
+		if (next !== index) onIndex(next);
+	};
 	const image = shownImage(photos[index], {
 		width: 1600,
 		height: 1200
@@ -50,39 +52,26 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabe
 		"aria-modal": "true",
 		"aria-label": title,
 		onKeyDown: key,
-		className: "fixed inset-0 z-[90] flex flex-col bg-backdrop outline-none",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-[90] flex flex-col overflow-y-auto overscroll-contain bg-backdrop outline-none md:flex-row",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex shrink-0 flex-col md:sticky md:top-0 md:h-dvh md:min-w-0 md:flex-1", shownDetails === void 0 ? "h-dvh" : "h-[85svh]"),
+			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center justify-between gap-2 p-3",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "rounded-full bg-background/85 px-3 py-1 text-[13px] font-medium tabular-nums text-foreground",
 					"aria-live": "polite",
 					children: `${index + 1} / ${count}`
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "flex items-center gap-2",
-					children: [shownDetails !== void 0 && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: cn(control, showDetails && "bg-background ring-2 ring-primary/40"),
-						"aria-label": detailsLabel,
-						"aria-pressed": showDetails,
-						onClick: () => setShowDetails(!showDetails),
-						children: /* @__PURE__ */ jsx(Info, {
-							className: "size-4",
-							"aria-hidden": true
-						})
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: control,
-						"aria-label": "Close",
-						onClick: onClose,
-						children: /* @__PURE__ */ jsx(X, {
-							className: "size-4",
-							"aria-hidden": true
-						})
-					})]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: control,
+					"aria-label": "Close",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(X, {
+						className: "size-4",
+						"aria-hidden": true
+					})
 				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
+			}), /* @__PURE__ */ jsxs("div", {
 				className: "relative flex min-h-0 flex-1 touch-pan-y items-center justify-center px-3 pb-3 md:px-16",
 				onPointerDown: down,
 				onPointerUp: up,
@@ -92,8 +81,9 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabe
 					className: "max-h-full max-w-full select-none object-contain"
 				}, image.url), count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2"),
+					className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
 					"aria-label": "Previous photo",
+					"aria-disabled": index === 0,
 					onClick: () => step(-1),
 					children: /* @__PURE__ */ jsx(ChevronLeft, {
 						className: "size-5",
@@ -101,20 +91,24 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabe
 					})
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2"),
+					className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
 					"aria-label": "Next photo",
+					"aria-disabled": index === count - 1,
 					onClick: () => step(1),
 					children: /* @__PURE__ */ jsx(ChevronRight, {
 						className: "size-5",
 						"aria-hidden": true
 					})
 				})] })]
-			}),
-			showDetails && shownDetails !== void 0 && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 border-t border-border bg-background p-4 text-foreground",
-				children: shownDetails
-			})
-		]
+			})]
+		}), shownDetails !== void 0 && /* @__PURE__ */ jsxs("aside", {
+			"aria-label": detailsTitle,
+			className: "shrink-0 border-t border-border bg-background p-5 text-foreground md:min-h-dvh md:w-[360px] md:border-l md:border-t-0",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "mb-3 text-[15px] font-semibold",
+				children: detailsTitle
+			}), shownDetails]
+		})]
 	});
 };
 //#endregion

package/dist/app/gallery/photo-details.js

@@ -6,17 +6,13 @@ import { ErrorBanner } from "../error-banner.js";
 import { fieldAccess } from "../permissions.js";
 import { SpecTable } from "../../record-view/spec-table.js";
 import { FieldValue } from "../pages/field-value.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/photo-details.tsx
-const detailFields = (model, view) => {
-	const sections = (view?.layout ?? []).flatMap((item) => item.kind === "section" ? item.fields : []);
-	return (sections.length > 0 ? [...new Set(sections)] : Object.keys(model.fields).filter((name) => name !== model.tenant && !model.primaryKey.includes(name))).filter((name) => model.fields[name] && !model.fields[name].sensitive);
-};
 /**
-* A photo's record, as the record API answers the user, so the server decides what they may read: the fields its
-* record page shows, as label/value rows, and a link to that page.
+* A photo's record, as the record API answers the user, so the server decides what they may read: its `fields` (see
+* `detailFields`), as label/value rows, and a link to its page.
 */
-const PhotoDetails = ({ model, view, photoKey }) => {
+const PhotoDetails = ({ model, view, photoKey, fields }) => {
 	const record = useRecord(model.name, photoKey);
 	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
 	if (record.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" });
@@ -24,26 +20,23 @@ const PhotoDetails = ({ model, view, photoKey }) => {
 		title: `Could not load the ${singular}`,
 		error: record.error
 	});
-	const shown = detailFields(model, view).filter((name) => fieldAccess(record.data.permissions, name) !== "hidden");
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-2xl",
-		children: [/* @__PURE__ */ jsx(SpecTable, { rows: shown.map((name) => ({
-			label: view?.fields[name]?.label ?? humanize(name),
-			value: /* @__PURE__ */ jsx(FieldValue, {
-				model,
-				field: model.fields[name],
-				value: record.data.record[name]
-			})
-		})) }), /* @__PURE__ */ jsx(AppLink, {
-			to: {
-				kind: "record",
-				resource: model.name,
-				key: photoKey
-			},
-			className: "mt-3 inline-block text-[13px] font-medium text-primary-text hover:underline",
-			children: `Open ${singular}`
-		})]
-	});
+	const shown = fields.filter((name) => fieldAccess(record.data.permissions, name) !== "hidden");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpecTable, { rows: shown.map((name) => ({
+		label: view?.fields[name]?.label ?? humanize(name),
+		value: /* @__PURE__ */ jsx(FieldValue, {
+			model,
+			field: model.fields[name],
+			value: record.data.record[name]
+		})
+	})) }), /* @__PURE__ */ jsx(AppLink, {
+		to: {
+			kind: "record",
+			resource: model.name,
+			key: photoKey
+		},
+		className: "mt-3 inline-block text-[13px] font-medium text-primary-text hover:underline",
+		children: `Open ${singular}`
+	})] });
 };
 //#endregion
 export { PhotoDetails };

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

@@ -1,13 +1,18 @@
-import { useAppAddress } from "../use-app-address.js";
+import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ActionRail } from "../../record-view/action-rail.js";
 import { ConfirmAction } from "./confirm-action.js";
 import { useActionRunner } from "./use-run-action.js";
 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";
 //#region src/app/pages/record-actions.tsx
-/** The record page's named actions, run like the Action block runs them; deleting the record returns to the list. */
-const RecordActions = ({ model, stored, recordKey }) => {
+/**
+* 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.
+*/
+const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 	const { go } = useAppAddress();
 	const scope = {
 		model,
@@ -21,14 +26,35 @@ const RecordActions = ({ model, stored, recordKey }) => {
 		resource: model.name
 	}, { replace: true }));
 	const [asking, setAsking] = useState();
-	if (runner.actions.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions: runner.actions.map((action) => ({
+	const named = runner.actions.map((action) => ({
 		name: action.label,
 		icon: actionIcon(action.icon),
 		blocked: runner.blocked(action),
 		running: runner.running === action.name,
+		...action.run?.kind === "delete" && { tone: "danger" },
 		onRun: () => action.confirm ? setAsking(action) : void runner.run(action)
-	})) }), asking && /* @__PURE__ */ jsx(ConfirmAction, {
+	}));
+	const deletes = runner.actions.some((action) => action.run?.kind === "delete");
+	const actions = [
+		...edit ? [{
+			name: "Edit",
+			icon: Pencil,
+			render: ({ className, children }) => /* @__PURE__ */ jsx(AppLink, {
+				to: edit,
+				className,
+				children
+			})
+		}] : [],
+		...named,
+		...onDelete && !deletes ? [{
+			name: "Delete",
+			icon: Trash2,
+			tone: "danger",
+			onRun: onDelete
+		}] : []
+	];
+	if (actions.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionRail, { actions }), asking && /* @__PURE__ */ jsx(ConfirmAction, {
 		action: asking,
 		label: asking.label,
 		danger: asking.run?.kind === "delete",

package/dist/app/record-mode/record-mode.js

@@ -1,18 +1,23 @@
 //#region src/app/record-mode/record-mode.ts
 /**
 * What the record page shows a user, by the view's `mode`, whether they may change the record and whether its address
-* asks for the form (`edit`). Always editable (`edit`, the default) shows the form, locked to a user who may not change
-* it, and ignores `edit`; `read` and `locked` show the read view or the locked form until the address asks for the
-* form, which only a user who may change the record gets. `offersEdit` is whether the page links to the form;
-* `editing` whether the record is being edited, which decides the help shown only while editing.
+* asks for the form (`edit`). A user who may not change the record gets the read view in every mode, at any address.
+* To one who may, always editable (`edit`, the default) shows the form and ignores `edit`; `read` and `locked` show the
+* read view or the locked form until the address asks for the form. `offersEdit` is whether the page links to the
+* form; `editing` whether the record is being edited, which decides the help shown only while editing.
 */
 const recordShown = (mode, canUpdate, edit) => {
+	if (!canUpdate) return {
+		shown: "read",
+		offersEdit: false,
+		editing: false
+	};
 	if (mode === void 0 || mode === "edit") return {
-		shown: canUpdate ? "form" : "locked",
+		shown: "form",
 		offersEdit: false,
-		editing: canUpdate
+		editing: true
 	};
-	if (canUpdate && edit) return {
+	if (edit) return {
 		shown: "form",
 		offersEdit: false,
 		editing: true

package/dist/app/record-page.js

@@ -1,7 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { inApp } from "../app-shell/breadcrumb.js";
 import { useAuth } from "../auth/auth-provider.js";
-import { formatRelativeTime } from "../format/date.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
@@ -42,7 +41,7 @@ import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
 import { Fragment, useMemo } from "react";
-import { Check, Pencil } from "lucide-react";
+import { Check } from "lucide-react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
@@ -50,9 +49,8 @@ import { enumLabel } from "@protobase/schema";
 //#region src/app/record-page.tsx
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
-* The view's layout, or one section with the editable fields when the view has none. A user who may only read the
-* resource has every field read-only, so they get every field, locked, rather than an empty section; so does the read
-* view, which shows the record rather than what can be changed.
+* The view's layout, or one section with the editable fields when the view has none. The read view, which is all a
+* user who may only read the resource gets, shows every field: the record rather than what can be changed.
 */
 const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
@@ -148,9 +146,10 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const { fields: fieldTypes } = useProjectUi();
 	const layout = layoutFor(model, view, shown === "read");
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
-	const status = model.fields.status?.type === "enum" ? String(stored.record.status) : void 0;
+	const hasStatus = model.fields.status?.type === "enum";
+	const statusValue = stored.record.status;
+	const status = hasStatus && statusValue !== null && statusValue !== void 0 && statusValue !== "" ? String(statusValue) : void 0;
 	const updatedAt = auditField(model, "updated");
-	const updated = updatedAt && stored.record[updatedAt] ? Math.max(0, Math.round((Date.now() - Date.parse(String(stored.record[updatedAt]))) / 1e3)) : void 0;
 	const hint = (name) => view?.fields[name];
 	const visible = (name) => fieldAccess(stored.permissions, name) !== "hidden";
 	const fieldView = (name) => {
@@ -251,30 +250,18 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const save = async () => {
 		if (await editor.save() && leavesForm) go(readAddress, { replace: true });
 	};
-	const deleteButton = canDelete && /* @__PURE__ */ jsx(Button, {
-		variant: "danger",
-		className: "max-md:min-h-11",
-		onClick: () => void remove.start({
-			key: recordKey,
-			title,
-			etag: stored.etag,
-			snapshot: stored.record
-		}),
-		children: "Delete"
-	});
-	const saveControls = offersEdit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [deleteButton, /* @__PURE__ */ jsxs(AppLink, {
-		to: editAddress,
-		className: cn(buttonClass({ variant: "primary" }), "max-md:min-h-11 max-md:flex-1"),
-		children: [/* @__PURE__ */ jsx(Pencil, {
-			className: "size-3.5",
-			"aria-hidden": true
-		}), "Edit"]
-	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const startDelete = canDelete ? () => void remove.start({
+		key: recordKey,
+		title,
+		etag: stored.etag,
+		snapshot: stored.record
+	}) : void 0;
+	const formControls = shown === "form" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		editor.dirty && /* @__PURE__ */ jsx("span", {
 			className: "text-xs text-muted-foreground",
 			children: "Unsaved changes"
 		}),
-		editor.dirty && canUpdate && !leavesForm && /* @__PURE__ */ jsx(Button, {
+		editor.dirty && !leavesForm && /* @__PURE__ */ jsx(Button, {
 			className: "max-md:min-h-11",
 			disabled: editor.saving,
 			onClick: editor.discard,
@@ -286,8 +273,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			onClick: (event) => inApp(event) && editor.discard(),
 			children: "Cancel"
 		}),
-		deleteButton,
-		canUpdate && /* @__PURE__ */ jsxs(Button, {
+		/* @__PURE__ */ jsxs(Button, {
 			variant: "primary",
 			className: "max-md:min-h-11 max-md:flex-1",
 			loading: editor.saving,
@@ -306,16 +292,17 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 					className: "mx-auto max-w-[1100px] px-4 pb-8 pt-6 md:px-10 md:py-8",
 					children: [
 						/* @__PURE__ */ jsx(RecordHeader, {
-							collection: view?.names?.plural ?? humanize(model.name),
 							title,
-							status: {
-								label: status ? enumLabel(status, hint("status")?.valueLabels) : singular,
-								tone: status ? toneFor(status) : "neutral"
+							status: status ? {
+								label: enumLabel(status, hint("status")?.valueLabels),
+								tone: toneFor(status)
+							} : hasStatus ? void 0 : {
+								label: singular,
+								tone: "neutral"
 							},
-							lastEditedBy: { ago: updated === void 0 ? "recently" : formatRelativeTime(updated) },
 							actions: /* @__PURE__ */ jsx("div", {
 								className: "hidden items-center gap-4 md:flex",
-								children: saveControls
+								children: formControls
 							})
 						}),
 						editor.message && /* @__PURE__ */ jsx("div", {
@@ -411,7 +398,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 									/* @__PURE__ */ jsx(RecordActions, {
 										model,
 										stored,
-										recordKey
+										recordKey,
+										edit: offersEdit ? editAddress : void 0,
+										onDelete: startDelete
 									}),
 									firstSidebar === -1 && summary,
 									layout.map((item, index) => {
@@ -448,9 +437,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 					]
 				})
 			}),
-			(editor.dirty || canDelete || canUpdate) && /* @__PURE__ */ jsx("div", {
+			formControls && /* @__PURE__ */ jsx("div", {
 				className: "sticky bottom-[var(--pb-sticky-bottom,0px)] z-20 flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
-				children: saveControls
+				children: formControls
 			})
 		]
 	});

package/dist/format/date.js

@@ -19,19 +19,6 @@ const time = new Intl.DateTimeFormat("en-GB", {
 const formatDate = (ms) => day.format(ms);
 const formatDayShort = (ms) => dayShort.format(ms);
 const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
-const relative = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-const units = [
-	["year", 31536e3],
-	["month", 2592e3],
-	["day", 86400],
-	["hour", 3600],
-	["minute", 60]
-];
-/** "5 minutes ago", "yesterday", "3 years ago"; `seconds` is how long ago it was. */
-const formatRelativeTime = (seconds) => {
-	const [unit, size] = units.find(([, size]) => seconds >= size) ?? ["second", 1];
-	if (unit === "second" && seconds < 45) return "just now";
-	return relative.format(-Math.floor(seconds / size), unit);
-};
+new Intl.RelativeTimeFormat("en", { numeric: "auto" });
 //#endregion
-export { formatDate, formatDateTime, formatDayShort, formatRelativeTime };
+export { formatDate, formatDateTime, formatDayShort };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.2";
+var version = "0.19.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/record-view/action-rail.js

@@ -1,5 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/action-rail.tsx
+const itemClass = "flex min-h-11 items-center gap-2 rounded-md border border-border-strong px-3 text-left hover:bg-surface disabled:cursor-default disabled:opacity-60 md:min-h-0 md:w-full md:items-start md:gap-3 md:rounded-none md:border-0 md:px-4 md:py-3";
 /** Named actions with one-line descriptions; on phones a row of buttons, from `md` a list. */
 const ActionRail = ({ actions }) => /* @__PURE__ */ jsxs("div", {
 	className: "overflow-hidden rounded-lg border border-border bg-background",
@@ -8,20 +10,29 @@ const ActionRail = ({ actions }) => /* @__PURE__ */ jsxs("div", {
 		children: "Actions"
 	}), /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-wrap gap-2 p-2 md:block md:divide-y md:divide-border md:p-0",
-		children: actions.map(({ name, description, icon: Icon, onRun, blocked, running }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: onRun,
-			disabled: Boolean(blocked) || running,
-			title: blocked,
-			className: "flex min-h-11 items-center gap-2 rounded-md border border-border-strong px-3 text-left hover:bg-surface disabled:cursor-default disabled:opacity-60 md:min-h-0 md:w-full md:items-start md:gap-3 md:rounded-none md:border-0 md:px-4 md:py-3",
-			children: [/* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground md:mt-0.5" }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
-				className: "block text-[13px] font-medium text-foreground",
+		children: actions.map(({ name, description, icon: Icon, onRun, blocked, running, tone, render }) => {
+			const children = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				className: cn("size-4 shrink-0 md:mt-0.5", tone === "danger" ? "text-danger-text" : "text-muted-foreground"),
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+				className: cn("block text-[13px] font-medium", tone === "danger" ? "text-danger-text" : "text-foreground"),
 				children: name
 			}), description && /* @__PURE__ */ jsx("span", {
 				className: "mt-0.5 hidden text-xs leading-snug text-muted-foreground md:block",
 				children: description
-			})] })]
-		}) }, name))
+			})] })] });
+			return /* @__PURE__ */ jsx("li", { children: render ? render({
+				className: itemClass,
+				children
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRun,
+				disabled: Boolean(blocked) || running,
+				title: blocked,
+				className: itemClass,
+				children
+			}) }, name);
+		})
 	})]
 });
 //#endregion

package/dist/record-view/record-header.js

@@ -5,21 +5,21 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const RecordHeader = ({ collection, title, status, lastEditedBy, presence = [], actions }) => /* @__PURE__ */ jsxs("header", {
 	className: "flex flex-col gap-4 border-b border-border pb-6 md:flex-row md:items-end md:justify-between md:gap-6",
 	children: [/* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("p", {
-			className: "text-xs text-muted-foreground",
+		collection && /* @__PURE__ */ jsx("p", {
+			className: "mb-1 text-xs text-muted-foreground",
 			children: collection
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1",
+			className: "flex flex-wrap items-center gap-x-3 gap-y-1",
 			children: [/* @__PURE__ */ jsx("h1", {
 				className: "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
 				children: title
-			}), /* @__PURE__ */ jsx(Badge, {
+			}), status && /* @__PURE__ */ jsx(Badge, {
 				tone: status.tone,
 				children: status.label
 			})]
 		}),
-		/* @__PURE__ */ jsx("p", {
+		lastEditedBy && /* @__PURE__ */ jsx("p", {
 			className: "mt-1.5 text-xs text-muted-foreground",
 			children: lastEditedBy.name ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				"Last edited by ",