@panneau/forms 4.1.1 → 5.0.0-alpha.0

package/README.md

@@ -0,0 +1,71 @@
+# @panneau/forms
+
+Forms of Panneau: fields of [`@panneau/fields`](../fields) in a layout, driven by the form state of [`@panneau/core`](../core). They show errors, guard unsaved changes and resolve version conflicts. They don't save anything themselves: the caller passes `onSubmit`.
+
+```bash
+npm install @panneau/forms@^5.0.0-alpha.0 @panneau/ui@^5.0.0-alpha.0 react-aria-components react-intl
+```
+
+## Without a definition
+
+A product with its own API passes fields and an `onSubmit`:
+
+```tsx
+import { Form } from '@panneau/forms';
+import { PanneauRoot } from '@panneau/ui';
+
+<PanneauRoot>
+    <Form
+        fields={[
+            { name: 'name', type: 'text', label: 'Name', rules: [{ rule: 'required' }] },
+            { name: 'email', type: 'email', label: 'Email', rules: [{ rule: 'email' }] },
+        ]}
+        values={member}
+        onSubmit={(values) => api.updateMember(member.id, values)}
+    />
+</PanneauRoot>;
+```
+
+- **Validation:** the portable rules of each field are checked on blur and on submit, with messages translated by react-intl.
+- **Server errors:** when `onSubmit` throws an error that carries problem details (`error.problem`, as the errors of `@panneau/data` do), a `422` shows its errors by path, next to their fields. A `412` opens the conflict dialog.
+- When `onSubmit` returns an item (`id`, `version`, `abilities`), the form continues from it.
+
+## From a definition
+
+```tsx
+const { fields, layout } = resolveForm(resource, { mode: 'update' });
+
+<Form
+    fields={fields}
+    layout={layout}
+    values={getItemValues(item)}
+    version={item.version}
+    mode="update"
+    onSubmit={(values, { version, changes }) =>
+        adapter.update('pages', item.id, changes, { version })
+    }
+/>;
+```
+
+Under a `PanneauProvider`, forms use the field components of the plugins and the locales of the definition.
+
+## What a form does
+
+| Feature           | How                                                                                                                     |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| Layout            | `row` (12-column widths), `column`, `section` (collapsible), `tabs`, `sidebar`, `text`, `component`, and `visibleWhen`  |
+| Phones            | Rows stack and the sidebar goes under the form when the form is narrow (container queries)                              |
+| Errors            | Next to each field, nested fields included (`blocks.2.body`), in a summary with links, and counted on tabs and sections |
+| First error       | After a failed submit, its tab or section opens, and the field scrolls into view and gets focus                         |
+| Server errors     | An alert with a retry in the form, and a toast                                                                          |
+| Unsaved changes   | The page asks before closing (`guardUnsavedChanges`); `useLeaveConfirmation()` guards in-app navigation with a dialog   |
+| Broken fields     | Each field has an error boundary: a field that throws shows a message, the rest of the form keeps working               |
+| Version conflicts | A dialog shows the values that differ, then loads the current version or saves the local one over it                    |
+
+`Form` creates its state with `useForm()`. To keep the state outside, use `useForm()` and `FormView`.
+
+## Messages
+
+Strings go through react-intl, with English defaults. Add the messages of every Panneau package to the app's with `withPanneauMessages()` from [`@panneau/intl`](../intl), or use `fieldsPlugin`, which carries them. `@panneau/forms/locales` is deprecated.
+
+The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md). Why forms depend on `@panneau/core`: [decision 0021](../../docs/decisions/0021-forms-render-core-state.md).

package/dist/ConflictDialog.css

@@ -0,0 +1,55 @@
+.panneau-body-3sXEkj {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-4);
+}
+
+.panneau-muted-5NUiTO {
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-heading-wxjJ-n {
+    margin-bottom: var(--panneau-space-2);
+    font-size: var(--panneau-font-size-md);
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-changes-mbdzwf {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+    margin: 0;
+}
+
+.panneau-change-nV4kto {
+    display: grid;
+    grid-template-columns: minmax(8rem, 1fr) 2fr 2fr;
+    gap: var(--panneau-space-1) var(--panneau-space-3);
+    padding-bottom: var(--panneau-space-3);
+    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-label-eyId-i {
+    font-weight: var(--panneau-font-weight-medium);
+}
+
+.panneau-version-OvsDcD {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.panneau-which-NYhZHZ {
+    font-size: var(--panneau-font-size-xs);
+    color: var(--panneau-color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+@media (max-width: 40rem) {
+    .panneau-change-nV4kto {
+        grid-template-columns: 1fr;
+    }
+}

package/dist/ConflictDialog.d.ts

@@ -0,0 +1,23 @@
+import type { Field, Item } from '@panneau/protocol';
+export interface ConflictDialogProps {
+    isOpen: boolean;
+    /** The fields of the form, for their labels. */
+    fields: readonly Field[];
+    /** The values in the form. */
+    values: Record<string, unknown>;
+    /** The current item, as the backend sent it with the `412`. */
+    current: Item | null;
+    /** Drops the local changes and continues from the current item. */
+    onReload: () => void;
+    /** Saves the local values over the current version. */
+    onOverwrite: () => void;
+    isPending?: boolean;
+    className?: string;
+}
+/**
+ * The dialog of a version conflict (decision 0008): someone else saved the item since the form
+ * loaded it. It shows the values that differ, and lets the user load the current version or save
+ * theirs over it.
+ */
+export declare function ConflictDialog({ isOpen, fields, values, current, onReload, onOverwrite, isPending, className, }: ConflictDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ConflictDialog.d.ts.map

package/dist/ConflictDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConflictDialog.d.ts","sourceRoot":"","sources":["../src/ConflictDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAMrD,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;IACzB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,+DAA+D;IAC/D,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAmDD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAiB,EACjB,SAAS,GACZ,EAAE,mBAAmB,+BAqErB"}

package/dist/ConflictDialog.js

@@ -0,0 +1,122 @@
+import ConflictDialog_module_default from "./ConflictDialog.module.js";
+import { messages } from "./messages.js";
+import { c } from "react/compiler-runtime";
+import { getItemValues, isEqual } from "@panneau/core";
+import { Button, Dialog, usePanneauIntl } from "@panneau/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ConflictDialog.tsx
+function useFormatValue() {
+	const $ = c(2);
+	const intl = usePanneauIntl();
+	let format;
+	if ($[0] !== intl) {
+		format = (value, field) => {
+			const options = field?.options;
+			if (options !== void 0) {
+				const labels = (Array.isArray(value) ? value : [value]).map((entry) => options.find((option) => option.value === entry)?.label ?? entry);
+				if (value !== null && value !== void 0) return labels.map((label) => format(label)).join(", ");
+			}
+			if (value === null || value === void 0 || value === "") return intl.formatMessage(messages.empty);
+			if (typeof value === "boolean") return intl.formatMessage(value ? messages.yes : messages.no);
+			if (typeof value === "string" || typeof value === "number") {
+				const text = String(value);
+				return text.length > 120 ? `${text.slice(0, 117)}…` : text;
+			}
+			if (Array.isArray(value)) {
+				const labels_0 = value.map(_temp);
+				return labels_0.every(_temp2) ? labels_0.join(", ") : intl.formatMessage(messages.itemCount, { count: value.length });
+			}
+			if (typeof value === "object") {
+				const record = value;
+				if (typeof record.label === "string") return record.label;
+				return Object.entries(record).map((t0) => {
+					const [key, entry_1] = t0;
+					return `${key}: ${format(entry_1)}`;
+				}).join(" · ");
+			}
+			return String(value);
+		};
+		$[0] = intl;
+		$[1] = format;
+	} else format = $[1];
+	return format;
+}
+/**
+* The dialog of a version conflict (decision 0008): someone else saved the item since the form
+* loaded it. It shows the values that differ, and lets the user load the current version or save
+* theirs over it.
+*/
+function _temp2(label_0) {
+	return label_0 !== null;
+}
+function _temp(entry_0) {
+	return entry_0 !== null && typeof entry_0 === "object" && "label" in entry_0 ? String(entry_0.label) : null;
+}
+function ConflictDialog({ isOpen, fields, values, current, onReload, onOverwrite, isPending = false, className }) {
+	const intl = usePanneauIntl();
+	const format = useFormatValue();
+	const theirs = current !== null ? getItemValues(current, fields.map((field) => field.name)) : null;
+	const changed = theirs !== null ? fields.filter((field_0) => !isEqual(values[field_0.name] ?? null, theirs[field_0.name] ?? null)) : [];
+	return /* @__PURE__ */ jsx(Dialog, {
+		isOpen,
+		role: "alertdialog",
+		isDismissable: false,
+		isKeyboardDismissDisabled: true,
+		title: intl.formatMessage(messages.conflictTitle),
+		size: "lg",
+		className,
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			onPress: onReload,
+			isDisabled: isPending,
+			children: intl.formatMessage(messages.loadCurrent)
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "danger",
+			onPress: onOverwrite,
+			isPending,
+			children: intl.formatMessage(messages.overwrite)
+		})] }),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: ConflictDialog_module_default.body,
+			children: [/* @__PURE__ */ jsx("p", { children: intl.formatMessage(messages.conflictMessage) }), theirs === null ? /* @__PURE__ */ jsx("p", {
+				className: ConflictDialog_module_default.muted,
+				children: intl.formatMessage(messages.conflictUnknown)
+			}) : changed.length > 0 ? /* @__PURE__ */ jsxs("section", {
+				"aria-labelledby": "panneau-conflict-changes",
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: "panneau-conflict-changes",
+					className: ConflictDialog_module_default.heading,
+					children: intl.formatMessage(messages.conflictChanges)
+				}), /* @__PURE__ */ jsx("dl", {
+					className: ConflictDialog_module_default.changes,
+					children: changed.map((field_1) => /* @__PURE__ */ jsxs("div", {
+						className: ConflictDialog_module_default.change,
+						children: [
+							/* @__PURE__ */ jsx("dt", {
+								className: ConflictDialog_module_default.label,
+								children: field_1.label ?? field_1.name
+							}),
+							/* @__PURE__ */ jsxs("dd", {
+								className: ConflictDialog_module_default.version,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: ConflictDialog_module_default.which,
+									children: intl.formatMessage(messages.yours)
+								}), format(values[field_1.name], field_1)]
+							}),
+							/* @__PURE__ */ jsxs("dd", {
+								className: ConflictDialog_module_default.version,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: ConflictDialog_module_default.which,
+									children: intl.formatMessage(messages.current)
+								}), format(theirs[field_1.name], field_1)]
+							})
+						]
+					}, field_1.name))
+				})]
+			}) : null]
+		})
+	});
+}
+//#endregion
+export { ConflictDialog };
+
+//# sourceMappingURL=ConflictDialog.js.map

package/dist/ConflictDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConflictDialog.js","names":["labels","entry","label","field","_c","_Fragment","styles"],"sources":["../src/ConflictDialog.tsx"],"sourcesContent":["import { getItemValues, isEqual } from '@panneau/core';\nimport type { Field, Item } from '@panneau/protocol';\nimport { Button, Dialog, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ConflictDialog.module.css';\nimport { messages } from './messages';\n\nexport interface ConflictDialogProps {\n    isOpen: boolean;\n    /** The fields of the form, for their labels. */\n    fields: readonly Field[];\n    /** The values in the form. */\n    values: Record<string, unknown>;\n    /** The current item, as the backend sent it with the `412`. */\n    current: Item | null;\n    /** Drops the local changes and continues from the current item. */\n    onReload: () => void;\n    /** Saves the local values over the current version. */\n    onOverwrite: () => void;\n    isPending?: boolean;\n    className?: string;\n}\n\ntype Formatter = (value: unknown, field?: Field) => string;\n\nfunction useFormatValue(): Formatter {\n    const intl = usePanneauIntl();\n    const format: Formatter = (value, field) => {\n        const options = field?.options;\n        if (options !== undefined) {\n            const labels = (Array.isArray(value) ? value : [value]).map(\n                (entry: unknown) =>\n                    options.find((option) => option.value === entry)?.label ?? entry,\n            );\n            if (value !== null && value !== undefined) {\n                return labels.map((label) => format(label)).join(', ');\n            }\n        }\n        if (value === null || value === undefined || value === '') {\n            return intl.formatMessage(messages.empty);\n        }\n        if (typeof value === 'boolean') {\n            return intl.formatMessage(value ? messages.yes : messages.no);\n        }\n        if (typeof value === 'string' || typeof value === 'number') {\n            const text = String(value);\n            return text.length > 120 ? `${text.slice(0, 117)}…` : text;\n        }\n        if (Array.isArray(value)) {\n            const labels = value.map((entry: unknown) =>\n                entry !== null && typeof entry === 'object' && 'label' in entry\n                    ? String((entry as { label: unknown }).label)\n                    : null,\n            );\n            return labels.every((label) => label !== null)\n                ? labels.join(', ')\n                : intl.formatMessage(messages.itemCount, { count: value.length });\n        }\n        if (typeof value === 'object') {\n            const record = value as Record<string, unknown>;\n            if (typeof record.label === 'string') {\n                return record.label;\n            }\n            return Object.entries(record)\n                .map(([key, entry]) => `${key}: ${format(entry)}`)\n                .join(' · ');\n        }\n        return String(value);\n    };\n    return format;\n}\n\n/**\n * The dialog of a version conflict (decision 0008): someone else saved the item since the form\n * loaded it. It shows the values that differ, and lets the user load the current version or save\n * theirs over it.\n */\nexport function ConflictDialog({\n    isOpen,\n    fields,\n    values,\n    current,\n    onReload,\n    onOverwrite,\n    isPending = false,\n    className,\n}: ConflictDialogProps) {\n    const intl = usePanneauIntl();\n    const format = useFormatValue();\n    const theirs =\n        current !== null\n            ? getItemValues(\n                  current,\n                  fields.map((field) => field.name),\n              )\n            : null;\n    const changed =\n        theirs !== null\n            ? fields.filter(\n                  (field) => !isEqual(values[field.name] ?? null, theirs[field.name] ?? null),\n              )\n            : [];\n    return (\n        <Dialog\n            isOpen={isOpen}\n            role=\"alertdialog\"\n            isDismissable={false}\n            isKeyboardDismissDisabled\n            title={intl.formatMessage(messages.conflictTitle)}\n            size=\"lg\"\n            className={className}\n            footer={\n                <>\n                    <Button onPress={onReload} isDisabled={isPending}>\n                        {intl.formatMessage(messages.loadCurrent)}\n                    </Button>\n                    <Button variant=\"danger\" onPress={onOverwrite} isPending={isPending}>\n                        {intl.formatMessage(messages.overwrite)}\n                    </Button>\n                </>\n            }\n        >\n            <div className={styles.body}>\n                <p>{intl.formatMessage(messages.conflictMessage)}</p>\n                {theirs === null ? (\n                    <p className={styles.muted}>{intl.formatMessage(messages.conflictUnknown)}</p>\n                ) : changed.length > 0 ? (\n                    <section aria-labelledby=\"panneau-conflict-changes\">\n                        <h3 id=\"panneau-conflict-changes\" className={styles.heading}>\n                            {intl.formatMessage(messages.conflictChanges)}\n                        </h3>\n                        <dl className={styles.changes}>\n                            {changed.map((field) => (\n                                <div key={field.name} className={styles.change}>\n                                    <dt className={styles.label}>{field.label ?? field.name}</dt>\n                                    <dd className={styles.version}>\n                                        <span className={styles.which}>\n                                            {intl.formatMessage(messages.yours)}\n                                        </span>\n                                        {format(values[field.name], field)}\n                                    </dd>\n                                    <dd className={styles.version}>\n                                        <span className={styles.which}>\n                                            {intl.formatMessage(messages.current)}\n                                        </span>\n                                        {format(theirs[field.name], field)}\n                                    </dd>\n                                </div>\n                            ))}\n                        </dl>\n                    </section>\n                ) : null}\n            </div>\n        </Dialog>\n    );\n}\n"],"mappings":"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"}

package/dist/ConflictDialog.module.js

@@ -0,0 +1,24 @@
+import "./ConflictDialog.css";
+//#region src/ConflictDialog.module.css
+var body = "panneau-body-3sXEkj";
+var muted = "panneau-muted-5NUiTO";
+var heading = "panneau-heading-wxjJ-n";
+var changes = "panneau-changes-mbdzwf";
+var change = "panneau-change-nV4kto";
+var label = "panneau-label-eyId-i";
+var version = "panneau-version-OvsDcD";
+var which = "panneau-which-NYhZHZ";
+var ConflictDialog_module_default = {
+	body,
+	muted,
+	heading,
+	changes,
+	change,
+	label,
+	version,
+	which
+};
+//#endregion
+export { body, change, changes, ConflictDialog_module_default as default, heading, label, muted, version, which };
+
+//# sourceMappingURL=ConflictDialog.module.js.map

package/dist/ConflictDialog.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConflictDialog.module.js","names":[],"sources":["../src/ConflictDialog.module.css"],"sourcesContent":[".body {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n}\n\n.muted {\n    color: var(--panneau-color-text-muted);\n}\n\n.heading {\n    margin-bottom: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.changes {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    margin: 0;\n}\n\n.change {\n    display: grid;\n    grid-template-columns: minmax(8rem, 1fr) 2fr 2fr;\n    gap: var(--panneau-space-1) var(--panneau-space-3);\n    padding-bottom: var(--panneau-space-3);\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.label {\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n.version {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n.which {\n    font-size: var(--panneau-font-size-xs);\n    color: var(--panneau-color-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n}\n\n@media (max-width: 40rem) {\n    .change {\n        grid-template-columns: 1fr;\n    }\n}\n"],"mappings":""}

package/dist/ErrorSummary.d.ts

@@ -0,0 +1,18 @@
+import type { Ref } from 'react';
+import type { Field } from '@panneau/protocol';
+export interface ErrorSummaryProps {
+    /** Errors by dot path, in the order to list them. */
+    errors: Record<string, string[]>;
+    /** The fields of the form, for the names of the paths. */
+    fields: readonly Field[];
+    /** Called with a path when its link is pressed. */
+    onSelect: (path: string) => void;
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+}
+/**
+ * The errors of a form, listed at the top after a failed submit: each one links to its field.
+ * Assistive technologies announce it when it appears.
+ */
+export declare function ErrorSummary({ errors, fields, onSelect, ref, className }: ErrorSummaryProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ErrorSummary.d.ts.map

package/dist/ErrorSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.d.ts","sourceRoot":"","sources":["../src/ErrorSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAO/C,MAAM,WAAW,iBAAiB;IAC9B,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACjC,0DAA0D;IAC1D,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;IACzB,mDAAmD;IACnD,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,iBAAiB,sCAkC3F"}

package/dist/ErrorSummary.js

@@ -0,0 +1,122 @@
+import { messages } from "./messages.js";
+import { describePath } from "./describe.js";
+import Form_module_default from "./Form.module.js";
+import { c } from "react/compiler-runtime";
+import { Alert, usePanneauIntl } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ErrorSummary.tsx
+/**
+* The errors of a form, listed at the top after a failed submit: each one links to its field.
+* Assistive technologies announce it when it appears.
+*/
+function ErrorSummary(t0) {
+	const $ = c(28);
+	const { errors, fields, onSelect, ref, className } = t0;
+	const intl = usePanneauIntl();
+	let T0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[0] !== className || $[1] !== errors || $[2] !== fields || $[3] !== intl || $[4] !== onSelect || $[5] !== ref) {
+		t9 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const entries = Object.entries(errors).filter(_temp);
+			if (entries.length === 0) {
+				t9 = null;
+				break bb0;
+			}
+			T0 = Alert;
+			t3 = ref;
+			t4 = "danger";
+			t5 = "alert";
+			t6 = -1;
+			t7 = className ?? Form_module_default.summary;
+			t8 = intl.formatMessage(messages.summaryTitle, { count: entries.length });
+			t1 = Form_module_default.summaryList;
+			t2 = entries.map((t10) => {
+				const [path, list_0] = t10;
+				const name = describePath(fields, path);
+				return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: Form_module_default.summaryLink,
+					onClick: () => onSelect(path),
+					children: name
+				}), `: ${list_0.join(" ")}`] }, path);
+			});
+		}
+		$[0] = className;
+		$[1] = errors;
+		$[2] = fields;
+		$[3] = intl;
+		$[4] = onSelect;
+		$[5] = ref;
+		$[6] = T0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+		$[15] = t9;
+	} else {
+		T0 = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		t4 = $[10];
+		t5 = $[11];
+		t6 = $[12];
+		t7 = $[13];
+		t8 = $[14];
+		t9 = $[15];
+	}
+	if (t9 !== Symbol.for("react.early_return_sentinel")) return t9;
+	let t10;
+	if ($[16] !== t1 || $[17] !== t2) {
+		t10 = /* @__PURE__ */ jsx("ul", {
+			className: t1,
+			children: t2
+		});
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== T0 || $[20] !== t10 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			ref: t3,
+			tone: t4,
+			role: t5,
+			tabIndex: t6,
+			className: t7,
+			title: t8,
+			children: t10
+		});
+		$[19] = T0;
+		$[20] = t10;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t11;
+	} else t11 = $[27];
+	return t11;
+}
+function _temp(t0) {
+	const [, list] = t0;
+	return list.length > 0;
+}
+//#endregion
+export { ErrorSummary };
+
+//# sourceMappingURL=ErrorSummary.js.map

package/dist/ErrorSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.js","names":["ref","path","name","list","_c","styles"],"sources":["../src/ErrorSummary.tsx"],"sourcesContent":["import type { Ref } from 'react';\n\nimport type { Field } from '@panneau/protocol';\nimport { Alert, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './Form.module.css';\nimport { describePath } from './describe';\nimport { messages } from './messages';\n\nexport interface ErrorSummaryProps {\n    /** Errors by dot path, in the order to list them. */\n    errors: Record<string, string[]>;\n    /** The fields of the form, for the names of the paths. */\n    fields: readonly Field[];\n    /** Called with a path when its link is pressed. */\n    onSelect: (path: string) => void;\n    ref?: Ref<HTMLDivElement>;\n    className?: string;\n}\n\n/**\n * The errors of a form, listed at the top after a failed submit: each one links to its field.\n * Assistive technologies announce it when it appears.\n */\nexport function ErrorSummary({ errors, fields, onSelect, ref, className }: ErrorSummaryProps) {\n    const intl = usePanneauIntl();\n    const entries = Object.entries(errors).filter(([, list]) => list.length > 0);\n    if (entries.length === 0) {\n        return null;\n    }\n    return (\n        <Alert\n            ref={ref}\n            tone=\"danger\"\n            role=\"alert\"\n            tabIndex={-1}\n            className={className ?? styles.summary}\n            title={intl.formatMessage(messages.summaryTitle, { count: entries.length })}\n        >\n            <ul className={styles.summaryList}>\n                {entries.map(([path, list]) => {\n                    const name = describePath(fields, path);\n                    return (\n                        <li key={path}>\n                            <button\n                                type=\"button\"\n                                className={styles.summaryLink}\n                                onClick={() => onSelect(path)}\n                            >\n                                {name}\n                            </button>\n                            {`: ${list.join(' ')}`}\n                        </li>\n                    );\n                })}\n            </ul>\n        </Alert>\n    );\n}\n"],"mappings":";;;;;;;;;;;AAwBA,SAAO,aAAA,IAAA;CAAA,MAAA,IAAAI,EAAA,EAAA;CAAsB,MAAA,EAAA,QAAA,QAAA,UAAA,KAAA,cAAA;CACzB,MAAA,OAAa,eAAe;CAAE,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,aAAA,EAAA,OAAA,UAAA,EAAA,OAAA,UAAA,EAAA,OAAA,QAAA,EAAA,OAAA,YAAA,EAAA,OAAA,KAAA;EAGnB,KAAA,OAAI,IAAJ,6BAAG;EAAC,KAAA;GAFf,MAAA,UAAgB,OAAM,QAAS,MAAM,CAAC,CAAA,OAAQ,KAA6B;GAC3E,IAAI,QAAO,WAAY,GAAC;IACb,KAAA;IAAA,MAAA;GAAI;GAGV,KAAA;GACQJ,KAAA;GACA,KAAA;GACA,KAAA;GACK,KAAA;GACC,KAAA,aAAaK,oBAAM;GACvB,KAAA,KAAI,cAAe,SAAQ,cAAe,EAAA,OAAS,QAAO,OAAQ,CAAC;GAE3D,KAAAA,oBAAM;GAChB,KAAA,QAAO,KAAK,QAAA;IAAC,MAAA,CAAA,MAAA,UAAA;IACV,MAAA,OAAa,aAAa,QAAQ,IAAI;IAAE,OAEpC,qBAAA,MAAA,EAAA,UAAA,CACI,oBAAA,UAAA;KACS,MAAA;KACM,WAAAA,oBAAM;KACR,eAAM,SAAS,IAAI;KAE3B,UAAA;IACI,CAAA,GACR,KAAKF,OAAI,KAAM,GAAG,GAClB,EAAA,GATI,IASJ;GAAA,CAEZ;EAAC;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA,OAAA,OAAA,IAAA,6BAAA,GAAA,OAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAfN,MAAA,oBAAA,MAAA;GAAe,WAAA;GACV,UAAA;EAeA,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,MAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,OAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAxBT,MAAA,oBAAC,IAAD;GACS,KAAAH;GACA,MAAA;GACA,MAAA;GACK,UAAA;GACC,WAAA;GACJ,OAAA;GAEP,UAAA;EARE,CAAA;EAyBE,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,MAAA,EAAA;CAAA,OAzBR;AAyBQ;AAhCT,SAAA,MAAA,IAAA;CAE4C,MAAA,GAAA,QAAA;CAAQ,OAAK,KAAI,SAAU;AAAC"}

package/dist/FieldErrorBoundary.d.ts

@@ -0,0 +1,19 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+interface FieldErrorBoundaryProps {
+    /** What to show instead of the field, with a function that renders it again. */
+    fallback: (retry: () => void) => ReactNode;
+    onError?: (error: unknown, info: ErrorInfo) => void;
+    children?: ReactNode;
+}
+interface FieldErrorBoundaryState {
+    failed: boolean;
+}
+/** Keeps a field that throws from taking the whole form down (decision 0006). */
+export declare class FieldErrorBoundary extends Component<FieldErrorBoundaryProps, FieldErrorBoundaryState> {
+    state: FieldErrorBoundaryState;
+    static getDerivedStateFromError(): FieldErrorBoundaryState;
+    componentDidCatch(error: unknown, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};
+//# sourceMappingURL=FieldErrorBoundary.d.ts.map

package/dist/FieldErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrorBoundary.d.ts","sourceRoot":"","sources":["../src/FieldErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,UAAU,uBAAuB;IAC7B,gFAAgF;IAChF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,UAAU,uBAAuB;IAC7B,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,iFAAiF;AACjF,qBAAa,kBAAmB,SAAQ,SAAS,CAC7C,uBAAuB,EACvB,uBAAuB,CAC1B;IACY,KAAK,EAAE,uBAAuB,CAAqB;IAE5D,MAAM,CAAC,wBAAwB,IAAI,uBAAuB;IAIjD,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS;IAIjD,MAAM;CAMlB"}

package/dist/FieldErrorBoundary.js

@@ -0,0 +1,20 @@
+import { Component } from "react";
+//#region src/FieldErrorBoundary.tsx
+/** Keeps a field that throws from taking the whole form down (decision 0006). */
+var FieldErrorBoundary = class extends Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error, info) {
+		this.props.onError?.(error, info);
+	}
+	render() {
+		if (this.state.failed) return this.props.fallback(() => this.setState({ failed: false }));
+		return this.props.children;
+	}
+};
+//#endregion
+export { FieldErrorBoundary };
+
+//# sourceMappingURL=FieldErrorBoundary.js.map

package/dist/FieldErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldErrorBoundary.js","names":[],"sources":["../src/FieldErrorBoundary.tsx"],"sourcesContent":["import { Component, type ErrorInfo, type ReactNode } from 'react';\n\ninterface FieldErrorBoundaryProps {\n    /** What to show instead of the field, with a function that renders it again. */\n    fallback: (retry: () => void) => ReactNode;\n    onError?: (error: unknown, info: ErrorInfo) => void;\n    children?: ReactNode;\n}\n\ninterface FieldErrorBoundaryState {\n    failed: boolean;\n}\n\n/** Keeps a field that throws from taking the whole form down (decision 0006). */\nexport class FieldErrorBoundary extends Component<\n    FieldErrorBoundaryProps,\n    FieldErrorBoundaryState\n> {\n    override state: FieldErrorBoundaryState = { failed: false };\n\n    static getDerivedStateFromError(): FieldErrorBoundaryState {\n        return { failed: true };\n    }\n\n    override componentDidCatch(error: unknown, info: ErrorInfo) {\n        this.props.onError?.(error, info);\n    }\n\n    override render() {\n        if (this.state.failed) {\n            return this.props.fallback(() => this.setState({ failed: false }));\n        }\n        return this.props.children;\n    }\n}\n"],"mappings":";;;AAcA,IAAa,qBAAb,cAAwC,UAGtC;CACE,QAA0C,EAAE,QAAQ,MAAM;CAE1D,OAAO,2BAAoD;EACvD,OAAO,EAAE,QAAQ,KAAK;CAC1B;CAEA,kBAA2B,OAAgB,MAAiB;EACxD,KAAK,MAAM,UAAU,OAAO,IAAI;CACpC;CAEA,SAAkB;EACd,IAAI,KAAK,MAAM,QACX,OAAO,KAAK,MAAM,eAAe,KAAK,SAAS,EAAE,QAAQ,MAAM,CAAC,CAAC;EAErE,OAAO,KAAK,MAAM;CACtB;AACJ"}