@protobase/ui 0.19.13 → 0.19.15

package/dist/app/create/create-page.js

@@ -2,11 +2,11 @@ import { useClient } from "../../data/api-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
-import { can } from "../permissions.js";
-import { useAppAddress } from "../use-app-address.js";
-import { fetchLabels } from "../../live/relation-labels.js";
 import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
+import { useAppAddress } from "../use-app-address.js";
 import { FieldEditor } from "../field-editor.js";
+import { can } from "../permissions.js";
+import { fetchLabels } from "../../live/relation-labels.js";
 import { useLiveSave } from "../use-live-save.js";
 import { CreateRecordForm } from "./create-record-form.js";
 import { useEffect, useState } from "react";

package/dist/app/create/create-values.js

@@ -1,15 +1,20 @@
 import { isEditable, toPatchValue } from "../../live/field-values.js";
+import { whenShown } from "../record-mode/record-mode.js";
 //#region src/app/create/create-values.ts
 const isChosen = (value) => typeof value === "object" && value !== null && "key" in value;
 /** Fields the user can set on a new record: not read-only, not the tenant, and not structured data. */
 const isCreatable = (model, field) => field.name !== model.tenant && !field.readOnly && (field.type === "relation" || isEditable(field));
-/** The view's sections limited to creatable fields, plus a section for any creatable field the layout leaves out. */
+/**
+* The view's sections limited to creatable fields, plus a section for any creatable field the layout leaves out. The
+* create form is a form, so sections and fields meant only for reading the record stay out of their sections, and a
+* creatable field among them lands in that last section.
+*/
 const createSections = (model, view) => {
 	const creatable = Object.values(model.fields).filter((field) => isCreatable(model, field)).map((field) => field.name);
 	const placed = /* @__PURE__ */ new Set();
 	const sections = (view?.layout ?? []).flatMap((item) => {
-		if (item.kind !== "section") return [];
-		const fields = item.fields.filter((name) => creatable.includes(name) && !placed.has(name));
+		if (item.kind !== "section" || !whenShown(item.when, true)) return [];
+		const fields = item.fields.filter((name) => creatable.includes(name) && !placed.has(name) && whenShown(view?.fields[name]?.when, true));
 		fields.forEach((name) => placed.add(name));
 		return fields.length > 0 ? [{
 			title: item.title,

package/dist/app/custom-section.js

@@ -1,9 +1,9 @@
 import { Problem } from "./pages/problem.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
 import { useProjectUi } from "./pages/project-ui.js";
-import { RecordScope } from "./pages/record-scope.js";
 import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
+import { RecordScope } from "./pages/record-scope.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";
 //#region src/app/custom-section.tsx

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

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { displayRow } from "./list-displays.js";
 import { ErrorBanner } from "../error-banner.js";
+import { displayRow } from "./list-displays.js";
 import { RecordCard } from "./record-card.js";
 import { VirtualCards } from "./virtual-cards.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -3,8 +3,8 @@ import { Button } from "../../primitives/button.js";
 import { Problem } from "../pages/problem.js";
 import { humanize } from "../../live/naming.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { mapCards } from "./list-displays.js";
 import { ErrorBanner } from "../error-banner.js";
+import { mapCards } from "./list-displays.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { RecordCard } from "./record-card.js";
 import { boundsAround, worldArea } from "../map/map-area.js";

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

@@ -8,10 +8,10 @@ import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displa
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
-import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
+import { Markdown } from "../../markdown/markdown.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
+import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { ValueBadge } from "../value-badge.js";
-import { Markdown } from "../../markdown/markdown.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";
 import { CardImage } from "./card-image.js";

package/dist/app/displays/record-link.js

@@ -1,5 +1,5 @@
-import { useLayoutRecord } from "../pages/record-scope.js";
 import { AppLink } from "../use-app-address.js";
+import { useLayoutRecord } from "../pages/record-scope.js";
 import { useOptionalListDisplay } from "./display-context.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/displays/record-link.tsx

package/dist/app/embedded-list/embedded-list.js

@@ -4,10 +4,10 @@ import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
 import { displayRow, loadedFields, shownDisplay } from "../displays/list-displays.js";
 import { defaultOrderBy, parseSort, sortToOrderBy } from "../list-order.js";
 import { AppLink, useAppAddress } from "../use-app-address.js";
-import { ErrorBanner } from "../error-banner.js";
 import { listColumnNames } from "../../live/columns-from-model.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";

package/dist/app/field-editor.js

@@ -1,19 +1,19 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { humanize } from "../live/naming.js";
-import { displayValue } from "../live/display-value.js";
-import { AppLink } from "./use-app-address.js";
-import { useShownWidget } from "./field-types/shown-widget.js";
-import { WidgetPart } from "./field-types/widget-part.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
-import { Markdown } from "../markdown/markdown.js";
 import { fromDraft, isEditable, toFieldDraft } from "../live/field-values.js";
 import { Switch } from "../primitives/switch.js";
 import { Textarea } from "../primitives/textarea.js";
+import { displayValue } from "../live/display-value.js";
+import { AppLink } from "./use-app-address.js";
 import { RelationPicker } from "./relation-picker.js";
 import { SensitiveField } from "./sensitive-field.js";
 import { FileField } from "./file-field.js";
+import { useShownWidget } from "./field-types/shown-widget.js";
+import { WidgetPart } from "./field-types/widget-part.js";
+import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx

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

@@ -1,12 +1,13 @@
+import { whenShown } from "../record-mode/record-mode.js";
 //#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
+* key and tenant, less sensitive ones, those meant only for its form 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));
+	const sections = (view?.layout ?? []).flatMap((item) => item.kind === "section" && whenShown(item.when, false) ? 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) && whenShown(view?.fields[name]?.when, false));
 };
 //#endregion
 export { detailFields };

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

@@ -2,10 +2,10 @@ import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
+import { Section } from "../../record-view/section.js";
 import { shownImage } from "../../live/file-values.js";
 import { ErrorBanner } from "../error-banner.js";
 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";

package/dist/app/gallery/lightbox.js

@@ -1,9 +1,9 @@
 import { cn } from "../../lib/cn.js";
 import { useIsDesktop } from "../../lib/use-media-query.js";
 import { useFocusTrap } from "../../lib/use-focus-trap.js";
+import { Sheet } from "../../primitives/sheet.js";
 import { shownImage } from "../../live/file-values.js";
 import { FileImage } from "../../live/file-image.js";
-import { Sheet } from "../../primitives/sheet.js";
 import { keyStep, steppedPhoto, swipeStep, togglesDetails } from "./gallery-layout.js";
 import { readDetailsOpen, writeDetailsOpen } from "./details-open-storage.js";
 import { useEffect, useId, useRef, useState } from "react";

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

@@ -1,11 +1,11 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { useRecord } from "../../data/use-record.js";
 import { humanize } from "../../live/naming.js";
-import { fieldAccess } from "../permissions.js";
-import { AppLink } from "../use-app-address.js";
+import { SpecTable } from "../../record-view/spec-table.js";
 import { ErrorBanner } from "../error-banner.js";
+import { AppLink } from "../use-app-address.js";
+import { fieldAccess } from "../permissions.js";
 import { FieldValue } from "../pages/field-value.js";
-import { SpecTable } from "../../record-view/spec-table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/photo-details.tsx
 /**

package/dist/app/import/import-dialog.js

@@ -1,7 +1,7 @@
 import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
-import { ErrorBanner } from "../error-banner.js";
 import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { ErrorBanner } from "../error-banner.js";
 import { unmappedRequired } from "./mapping.js";
 import { ImportCheckStep, ImportChecking } from "./import-check-step.js";
 import { ImportFileStep } from "./import-file-step.js";

package/dist/app/list-page.js

@@ -7,12 +7,13 @@ import { recordKey, recordTitleField } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
-import { can, rowAllows } from "./permissions.js";
+import { Sheet } from "../primitives/sheet.js";
+import { ErrorBanner } from "./error-banner.js";
 import { loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
 import { listedResource } from "./current-address.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
-import { ErrorBanner } from "./error-banner.js";
+import { can, rowAllows } from "./permissions.js";
 import { columnsFromModel } from "../live/columns-from-model.js";
 import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
@@ -25,7 +26,6 @@ import { FilterPanel } from "../filter-panel/filter-panel.js";
 import { stateToText, textToState } from "../live/filter-string.js";
 import { widgetFields } from "../live/view-fields.js";
 import { facetNames, filterChips } from "./searches/saved-search.js";
-import { Sheet } from "../primitives/sheet.js";
 import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";

package/dist/app/pages/action-inputs/action-inputs-dialog.d.ts

@@ -0,0 +1,13 @@
+import { ActionInputModel, JsonValue } from "@protobase/schema";
+//#region src/app/pages/action-inputs/action-inputs-dialog.d.ts
+/** What a custom input's component gets, as a field type's editor does: the answer, a way to set it, whether it is refused, and `props`. */
+export type ActionInputProps<V = unknown, P = Record<string, JsonValue>> = {
+  /** The input, as the action declares it. */
+  input: ActionInputModel;
+  value: V | null;
+  onChange: (value: V | null) => void;
+  invalid: boolean;
+  /** What the input gives in `props`; `{}` without. */
+  props: P;
+};
+//#endregion

package/dist/app/pages/action-inputs/action-inputs-dialog.js

@@ -0,0 +1,111 @@
+import { Button } from "../../../primitives/button.js";
+import { useProjectUi } from "../project-ui.js";
+import { useAdminMeta } from "../../meta-gate.js";
+import { ResponsiveDialog } from "../../../primitives/responsive-dialog.js";
+import { Field } from "../../../record-view/field.js";
+import { isChosen } from "../../create/create-values.js";
+import { ErrorBanner } from "../../error-banner.js";
+import { FieldEditor } from "../../field-editor.js";
+import { answeredValues, inputField, inputHints, refusedAnswers, startingAnswers } from "./input-answers.js";
+import { inputErrors } from "./input-errors.js";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/pages/action-inputs/action-inputs-dialog.tsx
+const InputEditor = ({ input, held, invalid, onChange }) => {
+	const { resources, views } = useAdminMeta();
+	const { components } = useProjectUi();
+	if (input.kind === "custom") {
+		const Custom = components?.[input.component ?? ""];
+		if (!Custom) throw new Error(`Input "${input.name}": the app has no component "${input.component}"`);
+		return /* @__PURE__ */ jsx(Custom, {
+			input,
+			value: held ?? null,
+			onChange,
+			invalid,
+			props: input.props ?? {}
+		});
+	}
+	const target = input.resource === void 0 ? void 0 : resources[input.resource];
+	return /* @__PURE__ */ jsx(FieldEditor, {
+		field: inputField(input),
+		hints: inputHints(input),
+		value: isChosen(held) ? held.key : held,
+		stored: void 0,
+		relationLabel: isChosen(held) ? held.label : void 0,
+		relationPicker: target ? {
+			target,
+			view: views[target.name]
+		} : void 0,
+		invalid,
+		onChange
+	});
+};
+/** The dialog an action with inputs opens: the inputs that show, edited as on the create form, and the action's button. */
+const ActionInputsDialog = ({ action, label, danger, onCancel, onSubmit }) => {
+	const [draft, setDraft] = useState(() => startingAnswers(action.inputs));
+	const [errors, setErrors] = useState({});
+	const [failure, setFailure] = useState();
+	const [running, setRunning] = useState(false);
+	const formId = useId();
+	const { shown, values } = answeredValues(action.inputs, draft);
+	const submit = async () => {
+		const refused = refusedAnswers(action.inputs, values);
+		setErrors(refused);
+		setFailure(void 0);
+		if (Object.keys(refused).length > 0) return;
+		setRunning(true);
+		await onSubmit(values).catch((error) => {
+			setErrors(inputErrors(error, action.inputs));
+			setFailure(error);
+		});
+		setRunning(false);
+	};
+	const change = (name, value) => {
+		setErrors(({ [name]: _, ...rest }) => rest);
+		setDraft((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: label,
+		description: action.confirm,
+		open: true,
+		onClose: onCancel,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onCancel,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: danger ? "danger" : "primary",
+			type: "submit",
+			form: formId,
+			loading: running,
+			children: label
+		})] }),
+		children: /* @__PURE__ */ jsxs("form", {
+			id: formId,
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children: [failure !== void 0 && Object.keys(errors).length === 0 && /* @__PURE__ */ jsx(ErrorBanner, {
+				title: `${label} failed`,
+				error: failure
+			}), action.inputs.filter((input) => shown.has(input.name)).map((input) => /* @__PURE__ */ jsx(Field, {
+				label: input.label,
+				required: input.required,
+				help: input.help,
+				error: errors[input.name],
+				children: /* @__PURE__ */ jsx(InputEditor, {
+					input,
+					held: draft[input.name],
+					invalid: Boolean(errors[input.name]),
+					onChange: (next) => change(input.name, next)
+				})
+			}, input.name))]
+		})
+	});
+};
+//#endregion
+export { ActionInputsDialog };

package/dist/app/pages/action-inputs/input-answers.js

@@ -0,0 +1,88 @@
+import { toDraft, toPatchValue } from "../../../live/field-values.js";
+import { isChosen } from "../../create/create-values.js";
+import { shownInputs } from "@protobase/schema/internal";
+//#region src/app/pages/action-inputs/input-answers.ts
+const fieldTypes = {
+	text: "text",
+	integer: "integer",
+	decimal: "decimal",
+	boolean: "boolean",
+	date: "date"
+};
+/** The field an input is edited as, so the create form's editors edit it: a choice of options is an enum, of records a relation. */
+const inputField = (input) => {
+	const base = {
+		name: input.name,
+		column: input.name,
+		nullable: true,
+		readOnly: false,
+		filterable: false,
+		sortable: false,
+		aliases: []
+	};
+	if (input.kind === "custom") return {
+		...base,
+		type: "json"
+	};
+	if (input.kind !== "choice") return {
+		...base,
+		type: fieldTypes[input.kind]
+	};
+	if (input.resource !== void 0) return {
+		...base,
+		type: "relation",
+		relation: {
+			resource: input.resource,
+			columns: [input.name]
+		}
+	};
+	return {
+		...base,
+		type: "enum",
+		enumValues: (input.options ?? []).map((option) => option.value)
+	};
+};
+/** The view hints an input's editor reads: its label, a box that grows for a multiline text, a choice's labels. */
+const inputHints = (input) => ({
+	label: input.label,
+	...input.multiline && { multiline: true },
+	...input.options && { valueLabels: Object.fromEntries(input.options.map((option) => [option.value, option.label])) }
+});
+/** What each input holds when the dialog opens: its default, as its editor holds it. */
+const startingAnswers = (inputs) => Object.fromEntries(inputs.map((input) => {
+	if (input.kind === "custom") return [input.name, input.default ?? null];
+	if (input.kind === "boolean") return [input.name, Boolean(input.default)];
+	return [input.name, toDraft(input.default)];
+}));
+const answerOf = (input, held) => {
+	if (input.kind === "custom") return held ?? null;
+	if (isChosen(held)) return held.key;
+	if (input.resource !== void 0) return String(held ?? "") === "" ? null : String(held);
+	return toPatchValue(inputField(input), held);
+};
+/** The answers of the inputs that show, as the handler gets them in `values`, and the names of those that show. */
+const answeredValues = (inputs, draft) => {
+	const all = Object.fromEntries(inputs.map((input) => [input.name, answerOf(input, draft[input.name])]));
+	const shown = shownInputs(inputs, all);
+	return {
+		shown,
+		values: Object.fromEntries(Object.entries(all).filter(([name]) => shown.has(name)))
+	};
+};
+const decimal = /^-?\d+(\.\d+)?$/;
+const date = /^\d{4}-\d{2}-\d{2}$/;
+const refusal = (input, value) => {
+	if (value === null || value === "") return input.required ? "Required" : void 0;
+	if (input.kind === "integer" && !Number.isInteger(value)) return "A whole number";
+	if (input.kind === "decimal" && !decimal.test(String(value))) return "A number";
+	if (input.kind === "date" && !date.test(String(value))) return "A date as YYYY-MM-DD";
+	if (input.max !== void 0 && String(value).length > input.max) return `At most ${input.max} characters`;
+};
+/** What is wrong with the answers that show, by input name: one left empty that is required, a number that is none, a text too long. */
+const refusedAnswers = (inputs, values) => Object.fromEntries(inputs.flatMap((input) => {
+	if (!Object.hasOwn(values, input.name)) return [];
+	const reason = refusal(input, values[input.name]);
+	return reason ? [[input.name, reason]] : [];
+}));
+//#endregion
+export { answeredValues, inputField, inputHints, refusedAnswers, startingAnswers };

package/dist/app/pages/action-inputs/input-errors.d.ts

@@ -0,0 +1,11 @@
+import { ActionInputModel } from "@protobase/schema";
+//#region src/app/pages/action-inputs/input-errors.d.ts
+/**
+ * What a handler throws to refuse answers, each message under the input it is about, such as
+ * `throw new ActionInputError({ email: 'No user has this address' })`: the dialog stays open and shows each under its input.
+ */
+export declare class ActionInputError extends Error {
+  readonly errors: Readonly<Record<string, string>>;
+  constructor(errors: Readonly<Record<string, string>>);
+}
+//#endregion

package/dist/app/pages/action-inputs/input-errors.js

@@ -0,0 +1,25 @@
+import { isApiError } from "@protobase/client";
+//#region src/app/pages/action-inputs/input-errors.ts
+/**
+* What a handler throws to refuse answers, each message under the input it is about, such as
+* `throw new ActionInputError({ email: 'No user has this address' })`: the dialog stays open and shows each under its input.
+*/
+var ActionInputError = class extends Error {
+	errors;
+	constructor(errors) {
+		super(Object.values(errors).join("; "));
+		this.errors = errors;
+		this.name = "ActionInputError";
+	}
+};
+/**
+* The messages of a failed action about its inputs, by input name: an `ActionInputError`'s, or those of an API error
+* whose field is an input's name, as a function the handler invokes reports them. Empty when none is about an input.
+*/
+const inputErrors = (error, inputs) => {
+	const names = new Set(inputs.map((input) => input.name));
+	const entries = error instanceof ActionInputError ? Object.entries(error.errors) : isApiError(error) ? error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : []) : [];
+	return Object.fromEntries(entries.filter(([name]) => names.has(name)));
+};
+//#endregion
+export { ActionInputError, inputErrors };

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

@@ -0,0 +1,29 @@
+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 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. */
+const ActionPrompt = ({ action, label, danger, onCancel, onConfirm, onSubmit }) => {
+	const { inputs } = action;
+	if (inputs?.length) return /* @__PURE__ */ jsx(ActionInputsDialog, {
+		action: {
+			...action,
+			inputs
+		},
+		label,
+		danger,
+		onCancel,
+		onSubmit
+	});
+	return /* @__PURE__ */ jsx(ConfirmAction, {
+		action,
+		label,
+		danger,
+		onCancel,
+		onConfirm
+	});
+};
+//#endregion
+export { ActionPrompt, asksFirst };

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

@@ -1,12 +1,12 @@
 import { Button } from "../../../primitives/button.js";
-import { ConfirmAction } from "../confirm-action.js";
+import { ActionPrompt, asksFirst } from "../action-prompt.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { useRunAction } from "../use-run-action.js";
 import { propsOf } from "./block-props.js";
 import { useState } from "react";
 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 the resource's view, asking first when the action has `confirm`. */
+/** A button for a named action of the resource's view, asking first when the action has `confirm` or `inputs`. */
 const ActionBlock = ({ node }) => {
 	const { name, resource, label, variant } = propsOf(node);
 	const scope = useLayoutRecord();
@@ -14,7 +14,7 @@ const ActionBlock = ({ node }) => {
 	const [asking, setAsking] = useState(false);
 	if (!action.action) return null;
 	const text = label ?? action.action.label;
-	const start = () => action.action.confirm ? setAsking(true) : void action.run();
+	const start = () => asksFirst(action.action) ? setAsking(true) : void action.run();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		variant: variant ?? "secondary",
@@ -23,7 +23,7 @@ const ActionBlock = ({ node }) => {
 		title: action.blocked,
 		onClick: start,
 		children: text
-	}), asking && /* @__PURE__ */ jsx(ConfirmAction, {
+	}), asking && /* @__PURE__ */ jsx(ActionPrompt, {
 		action: action.action,
 		label: text,
 		danger: variant === "danger",
@@ -31,6 +31,10 @@ const ActionBlock = ({ node }) => {
 		onConfirm: () => {
 			setAsking(false);
 			action.run();
+		},
+		onSubmit: async (values) => {
+			await action.submit(values);
+			setAsking(false);
 		}
 	})] });
 };

package/dist/app/pages/blocks/card-row.js

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
+import { ErrorBanner } from "../../error-banner.js";
 import { RecordScope } from "../record-scope.js";
 import { scopeOf, useListPage } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
-import { ErrorBanner } from "../../error-banner.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/pages/blocks/card-row.tsx
 const LoadedCardRow = ({ model, filter, sort, limit = 12, title, description, empty, actions, children }) => {

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

@@ -1,5 +1,5 @@
-import { useLayoutRecord } from "../record-scope.js";
 import { AppLink } from "../../use-app-address.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { jsx } from "react/jsx-runtime";
 import { appPath } from "@protobase/schema";

package/dist/app/pages/blocks/modal-form.js

@@ -4,15 +4,15 @@ import { useClient } from "../../../data/api-provider.js";
 import { humanize } from "../../../live/naming.js";
 import { useToast } from "../../../toasts/toast-provider.js";
 import { useAdminMeta, usePermissions } from "../../meta-gate.js";
+import { Field } from "../../../record-view/field.js";
+import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
+import { createBody, isChosen } from "../../create/create-values.js";
+import { ErrorBanner } from "../../error-banner.js";
+import { FieldEditor } from "../../field-editor.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { can } from "../../permissions.js";
 import { useFirstRecord, useRefreshResource } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
-import { ErrorBanner } from "../../error-banner.js";
-import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
-import { Field } from "../../../record-view/field.js";
-import { createBody, isChosen } from "../../create/create-values.js";
-import { FieldEditor } from "../../field-editor.js";
 import { useState } from "react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/app/pages/blocks/record-card.js

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
+import { ErrorBanner } from "../../error-banner.js";
 import { RecordScope } from "../record-scope.js";
 import { useFirstRecord } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
-import { ErrorBanner } from "../../error-banner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/record-card.tsx
 const LoadedRecordCard = ({ model, filter, sort, recordKey, title, description, empty, actions, children }) => {

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

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { useLayoutRecord } from "../record-scope.js";
 import { AppLink } from "../../use-app-address.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { useCount } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";