@protobase/ui 0.19.2 → 0.19.4

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

@@ -25,7 +25,8 @@ const arrow = "flex size-8 items-center justify-center rounded-full border borde
 * elsewhere clears it. A marker and a card whose record's position is approximate say so.
 */
 const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true, flush = false }) => {
-	const style = useAdminMeta().maps?.style;
+	const maps = useAdminMeta().maps;
+	const style = maps?.style;
 	const [chosen, setChosen] = useState();
 	const [area, setArea] = useState();
 	const settled = useDebounced(area, settleMs);
@@ -70,6 +71,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 					fallback: null,
 					children: /* @__PURE__ */ jsx(RecordsMap, {
 						style,
+						layers: maps?.layers,
 						initial: at,
 						points,
 						buckets,

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/map/map-layer-choice.js

@@ -0,0 +1,11 @@
+import { guarded } from "../../lib/guarded.js";
+//#region src/app/map/map-layer-choice.ts
+const mapLayerStorageKey = "protobase:map-layer";
+/** The layer the browser last chose, if the app still offers it: else the style's own map, which is the default. */
+const chosenMapLayer = (layers, id) => layers.find((layer) => layer.id === id);
+/** The id of the layer chosen in this browser, if any; unavailable storage reads as the default map. */
+const readMapLayer = (storage) => guarded(() => storage.getItem(mapLayerStorageKey), null);
+/** Remembers a layer by its id, and the default map by forgetting the choice, so the default costs no storage. */
+const writeMapLayer = (storage, id) => guarded(() => id === void 0 ? storage.removeItem(mapLayerStorageKey) : storage.setItem(mapLayerStorageKey, id), void 0);
+//#endregion
+export { chosenMapLayer, mapLayerStorageKey, readMapLayer, writeMapLayer };

package/dist/app/map/map-layer-switch.js

@@ -0,0 +1,55 @@
+import { Segmented } from "../../primitives/segmented.js";
+import { chosenMapLayer, readMapLayer, writeMapLayer } from "./map-layer-choice.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Layer, Source, useMap } from "react-map-gl/maplibre";
+//#region src/app/map/map-layer-switch.tsx
+const styleValue = "";
+/**
+* Inside a map, a switch in its top left corner between the style's map and each of `layers`, and the chosen layer's
+* tiles drawn over the style's, under `below` when the map has that layer, such as the areas around records. The
+* layer's credit joins the map's attribution while it shows. Outside its bounds the style's map shows through. The
+* choice is remembered in this browser, for every map. Nothing without layers.
+*/
+const MapLayerSwitch = ({ layers, below }) => {
+	const [chosenId, setChosenId] = useState(() => readMapLayer(localStorage));
+	const { current: map } = useMap();
+	if (!layers || layers.length === 0) return null;
+	const chosen = chosenMapLayer(layers, chosenId);
+	const choose = (value) => {
+		const id = value === styleValue ? void 0 : value;
+		writeMapLayer(localStorage, id);
+		setChosenId(id ?? null);
+	};
+	const beforeId = below && map?.getLayer(below) ? below : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [chosen && /* @__PURE__ */ jsx(Source, {
+		id: `map-layer-${chosen.id}`,
+		type: "raster",
+		tiles: [chosen.tiles],
+		tileSize: 256,
+		attribution: chosen.attribution,
+		maxzoom: chosen.maxzoom ?? 22,
+		...chosen.bounds && { bounds: chosen.bounds },
+		children: /* @__PURE__ */ jsx(Layer, {
+			id: `map-layer-${chosen.id}`,
+			type: "raster",
+			...beforeId && { beforeId }
+		})
+	}, chosen.id), /* @__PURE__ */ jsx("div", {
+		className: "absolute left-2.5 top-2.5 z-10 rounded-md shadow",
+		children: /* @__PURE__ */ jsx(Segmented, {
+			label: "Map layer",
+			value: chosen?.id ?? styleValue,
+			onChange: choose,
+			options: [{
+				value: styleValue,
+				label: "Map"
+			}, ...layers.map((layer) => ({
+				value: layer.id,
+				label: layer.label
+			}))]
+		})
+	})] });
+};
+//#endregion
+export { MapLayerSwitch };

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

@@ -12,7 +12,8 @@ const defaultZoom = 15;
 * `/meta` names. Without a style, or for a record without a position, there is nothing to draw and no section.
 */
 const MapSection = ({ item, record }) => {
-	const style = useAdminMeta().maps?.style;
+	const maps = useAdminMeta().maps;
+	const style = maps?.style;
 	const position = recordPosition(record, item);
 	if (!style || !position) return null;
 	const map = /* @__PURE__ */ jsx("div", {
@@ -21,6 +22,7 @@ const MapSection = ({ item, record }) => {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(RecordMap, {
 				style,
+				layers: maps?.layers,
 				position,
 				zoom: item.zoom ?? defaultZoom
 			}, `${position.latitude},${position.longitude}`)

package/dist/app/map/position-areas.js

@@ -2,6 +2,8 @@ import { areaFeatures, fadeIn } from "./area-features.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Layer, Source } from "react-map-gl/maplibre";
 //#region src/app/map/position-areas.tsx
+/** The areas' lowest layer, which a layer of tiles goes under. */
+const areaLayerId = "position-area-fills";
 const polygons = [
 	"==",
 	["get", "kind"],
@@ -38,7 +40,7 @@ const PositionAreas = ({ points, selected, colors }) => {
 		data,
 		children: [
 			/* @__PURE__ */ jsx(Layer, {
-				id: "position-area-fills",
+				id: areaLayerId,
 				type: "fill",
 				filter: polygons,
 				paint: {
@@ -75,4 +77,4 @@ const PositionAreas = ({ points, selected, colors }) => {
 	});
 };
 //#endregion
-export { PositionAreas };
+export { PositionAreas, areaLayerId };

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

@@ -1,3 +1,4 @@
+import { MapLayerSwitch } from "./map-layer-switch.js";
 import { mapLib } from "./maplibre.js";
 import { MapPin } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -5,9 +6,9 @@ import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
 //#region src/app/map/record-map.tsx
 /**
 * A map of `style` centred on `position` at `zoom`, with a pin on it. It pans and zooms with two fingers on a phone and
-* with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it.
+* with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it. With `layers`, it switches to them.
 */
-const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
+const RecordMap = ({ style, layers, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 	mapLib,
 	mapStyle: style,
 	initialViewState: {
@@ -19,16 +20,20 @@ const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 		width: "100%",
 		height: "100%"
 	},
-	children: [/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }), /* @__PURE__ */ jsx(Marker, {
-		latitude: position.latitude,
-		longitude: position.longitude,
-		anchor: "bottom",
-		children: /* @__PURE__ */ jsx(MapPin, {
-			"aria-hidden": true,
-			className: "size-8 fill-primary text-primary-foreground drop-shadow",
-			strokeWidth: 1.5
+	children: [
+		/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+		/* @__PURE__ */ jsx(MapLayerSwitch, { layers }),
+		/* @__PURE__ */ jsx(Marker, {
+			latitude: position.latitude,
+			longitude: position.longitude,
+			anchor: "bottom",
+			children: /* @__PURE__ */ jsx(MapPin, {
+				"aria-hidden": true,
+				className: "size-8 fill-primary text-primary-foreground drop-shadow",
+				strokeWidth: 1.5
+			})
 		})
-	})]
+	]
 });
 //#endregion
 export { RecordMap };

package/dist/app/map/records-map.js

@@ -1,7 +1,8 @@
 import { cn } from "../../lib/cn.js";
 import { groupPoints } from "../displays/map-groups.js";
+import { MapLayerSwitch } from "./map-layer-switch.js";
 import { mapLib } from "./maplibre.js";
-import { PositionAreas } from "./position-areas.js";
+import { PositionAreas, areaLayerId } from "./position-areas.js";
 import { themeColor } from "./theme-color.js";
 import { useEffect, useRef, useState } from "react";
 import { MapPin } from "lucide-react";
@@ -32,7 +33,7 @@ const corners = (bounds) => [[bounds.west, bounds.south], [bounds.east, bounds.n
 * marker selects its records; choosing the map elsewhere clears the selection. A chosen marker the covered bottom would
 * hide moves up into the open part of the map.
 */
-const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
+const RecordsMap = ({ style, layers, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
 	const ref = useRef(null);
 	const [groups, setGroups] = useState([]);
 	const [colors, setColors] = useState();
@@ -117,6 +118,10 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 		onClick: onClear,
 		children: [
 			/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+			/* @__PURE__ */ jsx(MapLayerSwitch, {
+				layers,
+				below: areaLayerId
+			}),
 			colors && /* @__PURE__ */ jsx(PositionAreas, {
 				points,
 				selected,

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