@protobase/ui 0.26.7 → 0.26.9

package/dist/app/displays/card-layout.js

@@ -15,5 +15,15 @@ const anchoredTop = (top, before, after) => {
 	if (before.columns === after.columns) return row * after.rowHeight;
 	return Math.floor(Math.floor(row) * before.columns / after.columns) * after.rowHeight;
 };
+/**
+* Where the cards are at the offset `top`, as a list remembers it: the first record of the row at the top, plus how far
+* into that row as a fraction of its height, so it comes back to the same records whatever the columns then.
+*/
+const cardPlace = (top, layout) => {
+	const row = top / layout.rowHeight;
+	return Math.floor(row) * layout.columns + row % 1;
+};
+/** The row, with how far into it, that a place `cardPlace` gave falls in with `columns` cards a row. */
+const placeRow = (place, columns) => Math.floor(Math.floor(place) / columns) + place % 1;
 //#endregion
-export { anchoredTop, cardColumns, cardWidth, recordRange };
+export { anchoredTop, cardColumns, cardPlace, cardWidth, placeRow, recordRange };

package/dist/app/displays/virtual-cards.js

@@ -2,7 +2,7 @@ import { Skeleton } from "../../primitives/skeleton.js";
 import { usePagedRows } from "../../data-grid/use-paged-rows.js";
 import { useVirtualRows } from "../../data-grid/use-virtual-rows.js";
 import { createFlipGuard } from "../../lib/flip-guard.js";
-import { anchoredTop, cardColumns, cardWidth, recordRange } from "./card-layout.js";
+import { anchoredTop, cardColumns, cardPlace, cardWidth, placeRow, recordRange } from "./card-layout.js";
 import { withMeasuredHeight } from "./measured-heights.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -33,12 +33,14 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 	const changed = anchor.current.top > 0 && (anchor.current.layout.columns !== columns || anchor.current.layout.rowHeight !== rowHeight);
 	const settle = (top) => changed ? anchoredTop(anchor.current.top, anchor.current.layout, layout) : top;
 	const ready = itemWidth > 0 && measured.has(itemWidth);
+	const onScroll = (top) => onScrollIndex(cardPlace(top, layout));
 	const scroll = useVirtualRows({
 		total: Math.ceil(total / columns),
 		rowHeight,
-		initialIndex: Math.floor(startIndex / columns),
+		initialIndex: placeRow(startIndex, columns),
 		settle,
-		ready
+		ready,
+		onScroll
 	});
 	useLayoutEffect(() => {
 		if (changed) scroll.scrollTo(scroll.top);
@@ -46,7 +48,6 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 			layout,
 			top: scroll.top
 		};
-		if (!changed) onScrollIndex(Math.floor(Math.max(0, scroll.top) / rowHeight) * columns);
 	});
 	const range = recordRange(scroll.first, scroll.last, columns, total);
 	const getRow = usePagedRows({

package/dist/app/list-actions/row-record.js

@@ -0,0 +1,15 @@
+import { displayRow } from "../displays/list-displays.js";
+//#region src/app/list-actions/row-record.ts
+/**
+* A list's row as the record a named action acts on: its fields as the API gives them, without what the list loads
+* beside them, with its key, ETag and permissions.
+*/
+const rowRecord = (model, row) => ({
+	model,
+	record: Object.fromEntries(Object.entries(displayRow(model, row).record).filter(([name]) => Object.hasOwn(model.fields, name))),
+	key: row.id,
+	...typeof row.etag === "string" && { etag: row.etag },
+	...typeof row.permissions === "object" && row.permissions !== null && { permissions: row.permissions }
+});
+//#endregion
+export { rowRecord };

package/dist/app/list-actions/use-list-actions.js

@@ -0,0 +1,95 @@
+import { useAdminMeta } from "../meta-gate.js";
+import { useAppAddress } from "../use-app-address.js";
+import { ConfirmAction } from "../pages/confirm-action.js";
+import { isDanger } from "../pages/action-prompt.js";
+import { actionApplies } from "../pages/action-when.js";
+import { actionFor, linkTarget, openLink } from "../pages/action-href.js";
+import { useActionRunner } from "../pages/use-run-action.js";
+import { text } from "../list-messages.js";
+import { rowRecord } from "./row-record.js";
+import { useState } from "react";
+import { fillAddress } from "@protobase/schema/internal";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/list-actions/use-list-actions.tsx
+/**
+* The named actions of `model`'s view for its list, those without inputs (which ask in a dialog of their own): each
+* in the row menu of the rows it shows for, disabled with its reason where `when` disables it, and in red when it is a
+* delete or a danger action; a link is a link there. Updates and handlers marked `bulk` are offered for a selection
+* while one selected row applies, and run on those that do. `prompt` is the question one asks before it runs.
+*/
+const useListActions = (model) => {
+	const { views } = useAdminMeta();
+	const runner = useActionRunner(model.name, void 0);
+	const { go, href } = useAppAddress();
+	const [asking, setAsking] = useState();
+	const listed = (views[model.name]?.actions ?? []).filter((action) => !action.inputs?.length);
+	const perform = (run) => "row" in run ? runner.run(run.action, run.row) : runner.runEach(run.action, run.selection, run.skipped);
+	const start = (run) => {
+		if (run.action.confirm) setAsking(run);
+		else perform(run);
+	};
+	return {
+		rowActions: listed.map((action) => {
+			const shown = (row) => actionFor(action, rowRecord(model, row).record);
+			const base = {
+				label: (row) => shown(row)?.label ?? action.label,
+				destructive: isDanger(action)
+			};
+			const run = action.run;
+			if (run?.kind === "link") {
+				const available = (row) => shown(row) !== void 0 && actionApplies(action, rowRecord(model, row).record);
+				if ("to" in run) {
+					const address = (row) => fillAddress(run.to, rowRecord(model, row).record);
+					return {
+						...base,
+						available,
+						link: (row) => ({
+							href: href(address(row)),
+							onFollow: () => go(address(row))
+						})
+					};
+				}
+				const target = (row) => linkTarget(run.href, rowRecord(model, row).record) ?? "";
+				return {
+					...base,
+					available,
+					link: (row) => ({
+						href: target(row),
+						onFollow: () => openLink(target(row))
+					})
+				};
+			}
+			return {
+				...base,
+				available: (row) => shown(row) !== void 0,
+				blocked: (row) => runner.blockedOn(action, rowRecord(model, row)),
+				onSelect: (row) => start({
+					action,
+					row: rowRecord(model, row)
+				})
+			};
+		}),
+		bulkActions: listed.filter((action) => action.bulk && action.run?.kind !== "link").map((action) => ({
+			label: (count) => text("actionCount", action.label, count),
+			destructive: isDanger(action),
+			available: (row) => runner.appliesOn(action, rowRecord(model, row)),
+			onRun: (rows, skipped) => start({
+				action,
+				selection: rows.map((row) => rowRecord(model, row)),
+				skipped
+			})
+		})),
+		prompt: asking && /* @__PURE__ */ jsx(ConfirmAction, {
+			action: asking.action,
+			label: asking.action.label,
+			danger: isDanger(asking.action),
+			onCancel: () => setAsking(void 0),
+			onConfirm: () => {
+				setAsking(void 0);
+				perform(asking);
+			}
+		})
+	};
+};
+//#endregion
+export { useListActions };

package/dist/app/list-messages.js

@@ -14,6 +14,7 @@ const text = defineMessages({
 		delete: "Delete",
 		exportCount: (count) => `Export ${count}`,
 		deleteCount: (count) => `Delete ${count}`,
+		actionCount: (label, count) => `${label} (${count})`,
 		dragToSort: "Drag a row by its handle to move it. Every move is saved as you drop it.",
 		unreadableFilter: "The filter in the address could not be read",
 		couldNotLoadRows: "Could not load rows",
@@ -38,6 +39,7 @@ const text = defineMessages({
 		delete: "Verwijderen",
 		exportCount: (count) => `${count} exporteren`,
 		deleteCount: (count) => `${count} verwijderen`,
+		actionCount: (label, count) => `${label} (${count})`,
 		dragToSort: "Sleep een rij aan de greep om hem te verplaatsen. Elke verplaatsing wordt bewaard zodra je loslaat.",
 		unreadableFilter: "Het filter in het adres kon niet worden gelezen",
 		couldNotLoadRows: "Kon de rijen niet laden",

package/dist/app/list-page.js

@@ -61,6 +61,7 @@ import { SavedList } from "./saved/saved-list.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useListCellEditor } from "./list-edit/use-list-cell-editor.js";
+import { useListActions } from "./list-actions/use-list-actions.js";
 import { HandSortedList } from "./hand-order/hand-sorted-list.js";
 import { ReorderButton } from "./hand-order/reorder-button.js";
 import { useMemo, useState } from "react";
@@ -202,6 +203,8 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			key: deleted.key
 		})
 	});
+	const named = useListActions(model);
+	const namedDelete = view?.actions.some((action) => action.run?.kind === "delete") ?? false;
 	const setFilter = (next, nextExtras = extras) => set({ filter: stateToText(fields, next, nextExtras) });
 	const search = searchText(extras);
 	const commitSearch = (text) => {
@@ -357,23 +360,31 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		rowPatches: cellEditing.patches,
 		initialScrollIndex: scroll.initialIndex,
 		onScrollIndex: scroll.remember,
-		rowActions: [{
-			label: text$1("openRecord", singular),
-			onSelect: openRecord
-		}, ...can(permissions, "delete") ? [{
-			label: text$1("delete"),
-			destructive: true,
-			available: (row) => rowAllows(row, "delete"),
-			onSelect: (row) => void remove.start(target(row))
-		}] : []],
-		bulkActions: [...exportOffered(view) && exportsSelection(model) ? [{
-			label: (count) => text$1("exportCount", count),
-			onRun: (rows) => exportFlow.open(rows)
-		}] : [], ...can(permissions, "delete") ? [{
-			label: (count) => text$1("deleteCount", count),
-			destructive: true,
-			onRun: (rows) => remove.startBulk(rows.map(target))
-		}] : []],
+		rowActions: [
+			{
+				label: text$1("openRecord", singular),
+				onSelect: openRecord
+			},
+			...named.rowActions,
+			...can(permissions, "delete") && !namedDelete ? [{
+				label: text$1("delete"),
+				destructive: true,
+				available: (row) => rowAllows(row, "delete"),
+				onSelect: (row) => void remove.start(target(row))
+			}] : []
+		],
+		bulkActions: [
+			...exportOffered(view) && exportsSelection(model) ? [{
+				label: (count) => text$1("exportCount", count),
+				onRun: (rows) => exportFlow.open(rows)
+			}] : [],
+			...named.bulkActions,
+			...can(permissions, "delete") ? [{
+				label: (count) => text$1("deleteCount", count),
+				destructive: true,
+				onRun: (rows) => remove.startBulk(rows.map(target))
+			}] : []
+		],
 		rowNumbers: false,
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, navItemId(resource, address.list)) : void 0,
 		scroll: "parent",
@@ -477,6 +488,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		children: [
 			remove.dialogs,
 			exportFlow.dialogs,
+			named.prompt,
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: heading?.title ?? plural,
 				subtitle: heading ? heading.subtitle : view?.help,

package/dist/app/list-places.js

@@ -0,0 +1,48 @@
+import { guarded } from "../lib/guarded.js";
+//#region src/app/list-places.ts
+const storageKey = "protobase:list-places";
+/** The places kept, the most recent ones, so the storage stays small however long the tab is used. */
+const kept = 50;
+const keyOf = (entry, url) => `${entry} ${url}`;
+const isSaved = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	const { entry, url, place } = value;
+	return typeof entry === "string" && typeof url === "string" && typeof place === "number" && Number.isFinite(place) && place >= 0;
+};
+const read = (storage) => guarded(() => {
+	const raw = storage.getItem(storageKey);
+	if (raw === null) return [];
+	const parsed = JSON.parse(raw);
+	return Array.isArray(parsed) ? parsed.filter(isSaved) : [];
+}, []);
+/**
+* The places of the lists of a tab, by history entry and list URL, kept in `storage` (the tab's session storage) when
+* `persist` is called, so they outlast a reload of the page. A list starts where it was in its history entry, as on
+* Back; in an entry it has no place in yet, as after a link to the same list, where it last was in any entry.
+*/
+const createListPlaces = (storage) => {
+	const places = new Map(read(storage).map((saved) => [keyOf(saved.entry, saved.url), saved]));
+	const placeOf = (entry, url) => {
+		const own = places.get(keyOf(entry, url));
+		if (own) return own.place;
+		return [...places.values()].findLast((saved) => saved.url === url)?.place ?? 0;
+	};
+	const save = (entry, url, place) => {
+		const key = keyOf(entry, url);
+		places.delete(key);
+		places.set(key, {
+			entry,
+			url,
+			place
+		});
+		for (const oldest of [...places.keys()].slice(0, Math.max(0, places.size - kept))) places.delete(oldest);
+	};
+	const persist = () => guarded(() => storage.setItem(storageKey, JSON.stringify([...places.values()])), void 0);
+	return {
+		placeOf,
+		save,
+		persist
+	};
+};
+//#endregion
+export { createListPlaces };

package/dist/app/list-scroll.js

@@ -1,23 +1,42 @@
+import { guarded } from "../lib/guarded.js";
 import { useRouter } from "./router.js";
-import { useCallback } from "react";
+import { createListPlaces } from "./list-places.js";
+import { useCallback, useEffect } from "react";
 //#region src/app/list-scroll.ts
-/** The first record in view of the list each history entry last showed, for this tab; a page load starts empty. */
-const remembered = /* @__PURE__ */ new Map();
+const noStorage = {
+	getItem: () => null,
+	setItem: () => {}
+};
+/** The places of this tab's lists, read from its session storage on first use. */
+let places;
+const tabPlaces = () => places ??= createListPlaces(guarded(() => window.sessionStorage, void 0) ?? noStorage);
 /**
-* Where a list starts and how it remembers where it is, so going back to it shows the same records. Only the list the
-* history entry showed last comes back: after a change of sort or filter, which replaces the entry, the list starts at
-* the top again.
+* Where a list starts and how it remembers where it is, so going back to it, or following a link to it, shows the same
+* records at the same height. After a change of sort or filter, a list of another URL, it starts at the top. The places
+* are stored when the list goes and when the page is hidden or left, so a reload or a discarded tab keeps them.
 */
 const useListScroll = () => {
 	const { entry, path, params } = useRouter();
 	const url = `${path}?${params.toString()}`;
-	const last = remembered.get(entry);
-	const remember = useCallback((index) => void remembered.set(entry, {
-		url,
-		index
-	}), [entry, url]);
+	const tab = tabPlaces();
+	useEffect(() => {
+		const persist = () => tab.persist();
+		const hidden = () => document.visibilityState === "hidden" && tab.persist();
+		window.addEventListener("pagehide", persist);
+		document.addEventListener("visibilitychange", hidden);
+		return () => {
+			window.removeEventListener("pagehide", persist);
+			document.removeEventListener("visibilitychange", hidden);
+			tab.persist();
+		};
+	}, [tab]);
+	const remember = useCallback((place) => tab.save(entry, url, place), [
+		tab,
+		entry,
+		url
+	]);
 	return {
-		initialIndex: last?.url === url ? last.index : 0,
+		initialIndex: tab.placeOf(entry, url),
 		remember
 	};
 };

package/dist/app/named-icon.js

@@ -1,4 +1,4 @@
-import { Ban, Bath, Bed, Bell, Bookmark, Calendar, DoorOpen, ExternalLink, FileText, Heart, House, KeyRound, LandPlot, Leaf, RulerDimensionLine, Send, Tag, Wallet } from "lucide-react";
+import { Archive, ArrowRightLeft, Ban, Bath, Bed, Bell, Bookmark, Calendar, Camera, Copy, Cpu, DoorOpen, Download, ExternalLink, FileText, HardDrive, Heart, House, KeyRound, LandPlot, Leaf, MemoryStick, Network, Play, Plug, Power, RotateCw, RulerDimensionLine, Send, Server, Square, Tag, Terminal, Upload, Wallet, Wrench } from "lucide-react";
 //#region src/app/named-icon.ts
 /** The icons an action's, a field's or a sign-in prompt's `icon` may name. */
 const byName = {
@@ -19,7 +19,25 @@ const byName = {
 	bell: Bell,
 	bookmark: Bookmark,
 	"external-link": ExternalLink,
-	ban: Ban
+	ban: Ban,
+	play: Play,
+	stop: Square,
+	power: Power,
+	restart: RotateCw,
+	terminal: Terminal,
+	camera: Camera,
+	"hard-drive": HardDrive,
+	server: Server,
+	network: Network,
+	archive: Archive,
+	copy: Copy,
+	"arrow-right-left": ArrowRightLeft,
+	download: Download,
+	upload: Upload,
+	cpu: Cpu,
+	memory: MemoryStick,
+	plug: Plug,
+	wrench: Wrench
 };
 /** The icon a name stands for, or nothing for a name the app does not know. */
 const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;

package/dist/app/pages/action-href.js

@@ -1,3 +1,4 @@
+import { actionApplies } from "./action-when.js";
 import { hrefField } from "@protobase/schema/internal";
 //#region src/app/pages/action-href.ts
 /** `href` with every `{field}` replaced by the record's value, percent-encoded; a missing value becomes empty. */
@@ -27,10 +28,12 @@ const openLink = (target) => {
 const hostOf = (target) => URL.canParse(target) ? new URL(target).hostname.replace(/^www\./, "") : "";
 const holdsAll = (record, values) => Object.entries(values).every(([name, value]) => Object.is(record[name], value));
 /**
-* `action` as it shows for `record`: an update that would change nothing there, and a link whose `href` has no target
-* there, are left out, and `{host}` in a link's label becomes the host its target opens, without `www.`.
+* `action` as it shows for `record`: one whose `when` does not hold there is left out, or shown as it is when it
+* disables instead; an update that would change nothing there, and a link whose `href` has no target there, are left
+* out, and `{host}` in a link's label becomes the host its target opens, without `www.`.
 */
 const actionFor = (action, record) => {
+	if (!actionApplies(action, record)) return action.otherwise === "disable" ? action : void 0;
 	const run = action.run;
 	if (run?.kind === "update") return record && !action.inputs?.length && holdsAll(record, run.values) ? void 0 : action;
 	if (run?.kind !== "link" || !("href" in run)) return action;

package/dist/app/pages/action-prompt.js

@@ -2,6 +2,8 @@ import { ActionInputsDialog } from "./action-inputs/action-inputs-dialog.js";
 import { ConfirmAction } from "./confirm-action.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/action-prompt.tsx
+/** Whether the action is drawn in red, as one that destroys or interrupts something: a delete, or one with `variant: 'danger'`. */
+const isDanger = (action) => action.variant === "danger" || action.run?.kind === "delete";
 /** Whether pressing the action's button opens a dialog first: to ask its question, or for its inputs. */
 const asksFirst = (action) => Boolean(action.confirm || action.inputs?.length);
 /** The dialog an action that asks first opens: its inputs, or else its question. */
@@ -26,4 +28,4 @@ const ActionPrompt = ({ action, label, danger, onCancel, onConfirm, onSubmit })
 	});
 };
 //#endregion
-export { ActionPrompt, asksFirst };
+export { ActionPrompt, asksFirst, isDanger };

package/dist/app/pages/action-when.js

@@ -0,0 +1,14 @@
+import { evaluateCondition, parseCondition } from "@protobase/layout";
+//#region src/app/pages/action-when.ts
+/**
+* Whether `action` applies to `record`: always without a `when`, else when its condition holds for the record's own
+* fields. With a `when` there is nothing to apply to without a record, and a condition that does not parse never holds.
+*/
+const actionApplies = (action, record) => {
+	if (action.when === void 0) return true;
+	if (!record) return false;
+	const condition = parseCondition(action.when);
+	return condition.ok && evaluateCondition(condition, record);
+};
+//#endregion
+export { actionApplies };

package/dist/app/pages/blocks/action.js

@@ -8,7 +8,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/action.tsx
 /**
 * A button for a named action of `resource`'s view, by default of the record around it, on that record, asking first
-* when the action has `confirm` or `inputs`; nothing when the view has no such action for the user.
+* when the action has `confirm` or `inputs`; nothing when the view has no such action for the user, or none for the
+* record. It is drawn as the action's `variant` unless the block names its own.
 */
 const ActionButton = ({ name, resource, label, variant }) => {
 	const scope = useLayoutRecord();
@@ -16,10 +17,11 @@ const ActionButton = ({ name, resource, label, variant }) => {
 	const [asking, setAsking] = useState(false);
 	if (!action.action) return null;
 	const text = label ?? action.action.label;
+	const shown = variant ?? action.action.variant ?? "secondary";
 	const start = () => asksFirst(action.action) ? setAsking(true) : void action.run();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 		size: "sm",
-		variant: variant ?? "secondary",
+		variant: shown,
 		loading: action.running,
 		disabled: Boolean(action.blocked),
 		title: action.blocked,
@@ -28,7 +30,7 @@ const ActionButton = ({ name, resource, label, variant }) => {
 	}), asking && /* @__PURE__ */ jsx(ActionPrompt, {
 		action: action.action,
 		label: text,
-		danger: variant === "danger",
+		danger: shown === "danger",
 		onCancel: () => setAsking(false),
 		onConfirm: () => {
 			setAsking(false);

package/dist/app/pages/messages.js

@@ -12,9 +12,15 @@ const text = defineMessages({
 		needsRecord: "Needs a record",
 		cannotChange: "You cannot change this record",
 		cannotDelete: "You cannot delete this record",
+		doesNotApply: "Does not apply to this record",
 		noHandler: (name) => `The app has no handler for "${name}"`,
 		noInputComponent: (component, input) => `The app has no component "${component}" for input "${input}"`,
 		done: (label) => `${label}: done`,
+		doneOn: (label, done, skipped, failed) => [
+			`${label}: done on ${done}`,
+			...skipped > 0 ? [`skipped ${skipped} it does not apply to`] : [],
+			...failed > 0 ? [`failed on ${failed}`] : []
+		].join(", "),
 		failed: (label) => `${label} failed`,
 		noAction: (name) => `No action "${name}"`,
 		couldNotLoad: "Could not load",
@@ -41,9 +47,15 @@ const text = defineMessages({
 		needsRecord: "Vraagt een record",
 		cannotChange: "Je kunt dit record niet wijzigen",
 		cannotDelete: "Je kunt dit record niet verwijderen",
+		doesNotApply: "Geldt niet voor dit record",
 		noHandler: (name) => `De app heeft geen handler voor "${name}"`,
 		noInputComponent: (component, input) => `De app heeft geen component "${component}" voor invoer "${input}"`,
 		done: (label) => `${label}: klaar`,
+		doneOn: (label, done, skipped, failed) => [
+			`${label}: klaar voor ${done}`,
+			...skipped > 0 ? [`${skipped} overgeslagen waarvoor het niet geldt`] : [],
+			...failed > 0 ? [`mislukt voor ${failed}`] : []
+		].join(", "),
 		failed: (label) => `${label} mislukt`,
 		noAction: (name) => `Geen actie "${name}"`,
 		couldNotLoad: "Kon niet laden",

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

@@ -3,7 +3,7 @@ import "../../app-shell/top-bar.js";
 import { ActionRail } from "../../record-view/action-rail.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
 import { ActionMenu } from "../../record-view/action-menu.js";
-import { ActionPrompt, asksFirst } from "./action-prompt.js";
+import { ActionPrompt, asksFirst, isDanger } from "./action-prompt.js";
 import { useActionRunner } from "./use-run-action.js";
 import { text } from "../record-messages.js";
 import { actionIcon } from "../action-icon.js";
@@ -14,7 +14,7 @@ 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,
+* actions, run like the Action block runs them, a delete among them returning to the list, a delete and a danger one in red; and the record's own Delete,
 * `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.
 */
@@ -38,7 +38,7 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		icon: actionIcon(action.icon),
 		blocked: runner.blocked(action),
 		running: runner.running === action.name,
-		...action.run?.kind === "delete" && { tone: "danger" },
+		...isDanger(action) && { tone: "danger" },
 		onRun: () => asksFirst(action) ? setAsking(action) : void runner.run(action)
 	}));
 	const deletes = runner.actions.some((action) => action.run?.kind === "delete");
@@ -75,7 +75,7 @@ const RecordActions = ({ model, stored, recordKey, edit, onDelete }) => {
 		asking && /* @__PURE__ */ jsx(ActionPrompt, {
 			action: asking,
 			label: asking.label,
-			danger: asking.run?.kind === "delete",
+			danger: isDanger(asking),
 			onCancel: () => setAsking(void 0),
 			onConfirm: () => {
 				setAsking(void 0);

package/dist/app/pages/run-each.js

@@ -0,0 +1,24 @@
+//#region src/app/pages/run-each.ts
+/**
+* Runs `run` on each of `records` that `applies` to, one after another, so a failure on one leaves the others to run:
+* it is counted, and the first is kept for the caller to show.
+*/
+const runEach = async (records, applies, run) => {
+	const applying = records.filter(applies);
+	const outcome = {
+		done: 0,
+		skipped: records.length - applying.length,
+		failed: 0
+	};
+	for (const record of applying) {
+		const failure = await run(record).then(() => void 0, (error) => ({ error }));
+		if (!failure) outcome.done += 1;
+		else {
+			outcome.failed += 1;
+			if (outcome.failed === 1) outcome.error = failure.error;
+		}
+	}
+	return outcome;
+};
+//#endregion
+export { runEach };