@panneau/lists 5.0.0-alpha.11 → 5.0.0-alpha.13

package/README.md

@@ -77,17 +77,19 @@ const { data, isFetching, error } = useResourceList('pages', query); // @panneau
 
 ## What a list does
 
-| Feature    | How                                                                                                                                                                          |
-| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Columns    | `item[id]` shown with a display: the column's `display`, else text. Localized values in the UI's locale. `render` for a cell of its own                                      |
-| Displays   | `text`, `textarea`, `slug`, `richtext`, `number`, `boolean`, `date`, `datetime`, `time`, `select`, `relation`, `url`, `email`, `color`, `media`                              |
-| Layouts    | `table` and `cards` (`layouts`, the first is the default). On narrow lists, table rows stack and show the label of each value                                                |
-| Sorting    | Sortable column headers (`aria-sort`), and a select for cards and phones                                                                                                     |
-| Filters    | `text`, `select`, `toggle`, `date`, `date-range` (sent as bounds: `filter[id][from]`, `filter[id][to]`), `relation`, with chips for the active filters and the search        |
-| Pagination | With `total`: the range, previous and next pages, and the page size (`perPageOptions`)                                                                                       |
-| Selection  | Checkboxes, the page, then "select all N items", which selects every item matching the query, with exceptions                                                                |
-| Actions    | `row` (buttons), `menu` (the row's menu), `toolbar` (selection and resource actions), with `confirm`, hidden by abilities ([0011](../../docs/decisions/0011-permissions.md)) |
-| States     | Skeleton rows of the columns while `items` is `undefined`, an error with a retry, an empty message, and "no results" with a button that clears the filters                   |
+| Feature    | How                                                                                                                                                                                                                                                                                                                                |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Columns    | `item[id]` shown with a display: the column's `display`, else text. Localized values in the UI's locale. `render` for a cell of its own                                                                                                                                                                                            |
+| Displays   | `text`, `textarea`, `slug`, `richtext`, `number`, `boolean`, `date`, `datetime`, `time`, `select`, `relation`, `url`, `email`, `color`, `media`                                                                                                                                                                                    |
+| Columns    | A "Columns" menu shows, hides and orders them: `hidden` columns are shown when the user picks them, and `hideable: false` ones always are. In the view of the list state                                                                                                                                                           |
+| Layouts    | `table`, `cards`, `gallery` (on `itemImage`) and `calendar` (with `calendar`), the first of `layouts` being the default, in the view of the list state. On narrow lists, table rows stack and show the label of each value, and the calendar lists its days with items ([0044](../../docs/decisions/0044-gallery-and-calendar.md)) |
+| Sorting    | Sortable column headers (`aria-sort`), and a select for cards and phones                                                                                                                                                                                                                                                           |
+| Filters    | `text`, `select`, `toggle`, `date`, `date-range` (sent as bounds: `filter[id][from]`, `filter[id][to]`), `relation`, with chips for the active filters and the search                                                                                                                                                              |
+| Pagination | With `total`: the range, previous and next pages, and the page size (`perPageOptions`)                                                                                                                                                                                                                                             |
+| Selection  | Checkboxes, the page, then "select all N items", which selects every item matching the query, with exceptions                                                                                                                                                                                                                      |
+| Actions    | `row` (buttons), `menu` (the row's menu), `toolbar` (selection and resource actions), with `confirm`, hidden by abilities ([0011](../../docs/decisions/0011-permissions.md))                                                                                                                                                       |
+| Editing    | Columns of `inlineEdit` edit their field in place in the table (`text`, `number`, `select`, `boolean`, `date`), on items that can be updated: `onInlineEdit` saves the one field ([0043](../../docs/decisions/0043-inline-editing.md))                                                                                             |
+| States     | Skeleton rows of the columns while `items` is `undefined`, an error with a retry, an empty message, and "no results" with a button that clears the filters                                                                                                                                                                         |
 
 An action shows the icon it names (`"icon": "send"`, through `getNamedIcon()` of `@panneau/ui`, which needs an `iconLoader` on `PanneauRoot`, such as `lucideIconLoader` of `@panneau/ui/named-icons`), or the icon of a built-in action (`edit`, `delete`…). Actions written in code can get icon components by id instead, which win over names: `actionIcons={{ archive: Archive }}`.
 

package/dist/ItemDetails.css

@@ -24,6 +24,17 @@
     overflow-wrap: anywhere;
 }
 
+/* A group: its label over its values, which are indented. */
+.panneau-item-details-group > .panneau-item-details-label {
+    color: var(--panneau-color-text);
+    font-weight: var(--panneau-font-weight-medium);
+}
+
+.panneau-item-details-nested {
+    padding-inline-start: var(--panneau-space-3);
+    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
 /* Wide enough: the label and its value side by side. */
 @container panneau-item-details (min-width: 30rem) {
     .panneau-item-details-entry {
@@ -31,4 +42,9 @@
         grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
         gap: var(--panneau-space-3);
     }
+
+    .panneau-item-details-group {
+        display: flex;
+        gap: var(--panneau-space-2);
+    }
 }

package/dist/ItemDetails.d.ts

@@ -1,9 +1,17 @@
 import type { DisplayEntry, ListColumn, ListItem } from './types.js';
+/** A value of the details, or a group of values under its label. */
+export interface ItemDetailsColumn extends ListColumn {
+    /**
+     * The values of a group (a `group` field): read in the value of the column, an object, and
+     * listed under its label.
+     */
+    columns?: readonly ItemDetailsColumn[];
+}
 export interface ItemDetailsProps {
     /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */
     item: ListItem | undefined;
     /** The values to show, with their label and display, in order. */
-    columns: readonly ListColumn[];
+    columns: readonly ItemDetailsColumn[];
     /** Displays by name, over the built-in ones and those of the plugins. */
     displays?: Readonly<Record<string, DisplayEntry>>;
     'aria-label'?: string;
@@ -11,8 +19,9 @@ export interface ItemDetailsProps {
 }
 /**
  * The values of one item, each with its label, shown with the displays of the lists: for the
- * details of an item next to its list, or anywhere a read-only view of it is needed. While the
- * item loads, it draws the labels with a skeleton of each value (decision 0034).
+ * details of an item next to its list, or anywhere a read-only view of it is needed. A column with
+ * `columns` is a group, whose values are listed under its label. While the item loads, it draws
+ * the labels with a skeleton of each value (decision 0034).
  */
 export declare function ItemDetails({ item, columns, displays, 'aria-label': ariaLabel, className, }: ItemDetailsProps): import("react").JSX.Element;
 //# sourceMappingURL=ItemDetails.d.ts.map

package/dist/ItemDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemDetails.d.ts","sourceRoot":"","sources":["../src/ItemDetails.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMlE,MAAM,WAAW,gBAAgB;IAC7B,uFAAuF;IACvF,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,kEAAkE;IAClE,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,GACZ,EAAE,gBAAgB,+BA6BlB"}
+{"version":3,"file":"ItemDetails.d.ts","sourceRoot":"","sources":["../src/ItemDetails.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAOlE,oEAAoE;AACpE,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;CAC1C;AAED,MAAM,WAAW,gBAAgB;IAC7B,uFAAuF;IACvF,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,kEAAkE;IAClE,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,GACZ,EAAE,gBAAgB,+BA0DlB"}

package/dist/ItemDetails.js

@@ -1,4 +1,5 @@
 import { messages } from "./messages.js";
+import { getColumnValue } from "./values.js";
 import { cx } from "./cx.js";
 import ItemDetails_module_default from "./ItemDetails.module.js";
 import { useRenderValue } from "./useRenderValue.js";
@@ -14,87 +15,116 @@ var WIDTHS = [
 	"30%",
 	"65%"
 ];
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
 /**
 * The values of one item, each with its label, shown with the displays of the lists: for the
-* details of an item next to its list, or anywhere a read-only view of it is needed. While the
-* item loads, it draws the labels with a skeleton of each value (decision 0034).
+* details of an item next to its list, or anywhere a read-only view of it is needed. A column with
+* `columns` is a group, whose values are listed under its label. While the item loads, it draws
+* the labels with a skeleton of each value (decision 0034).
 */
 function ItemDetails(t0) {
-	const $ = c(20);
+	const $ = c(22);
 	const { item, columns, displays, "aria-label": ariaLabel, className } = t0;
 	const intl = usePanneauIntl();
 	const renderValue = useRenderValue(displays);
 	let t1;
-	if ($[0] !== className) {
-		t1 = cx(ItemDetails_module_default.details, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
 	let t2;
-	if ($[2] !== columns || $[3] !== item || $[4] !== renderValue) {
-		let t3;
-		if ($[6] !== item || $[7] !== renderValue) {
-			t3 = (column, index) => /* @__PURE__ */ jsxs("div", {
+	let t3;
+	if ($[0] !== ariaLabel || $[1] !== className || $[2] !== columns || $[3] !== intl || $[4] !== item || $[5] !== renderValue) {
+		const renderEntries = (entryItem, entryColumns) => entryColumns.map((column, index) => {
+			const label = /* @__PURE__ */ jsx("dt", {
+				className: ItemDetails_module_default.label,
+				children: column.label ?? column.id
+			});
+			if (column.columns !== void 0) {
+				const value = entryItem !== void 0 ? getColumnValue(entryItem, column, intl.locale) : void 0;
+				const groupItem = entryItem !== void 0 ? {
+					...isRecord(value) ? value : {},
+					id: entryItem.id
+				} : void 0;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cx(ItemDetails_module_default.entry, ItemDetails_module_default.group),
+					children: [label, /* @__PURE__ */ jsx("dd", {
+						className: ItemDetails_module_default.value,
+						children: /* @__PURE__ */ jsx("dl", {
+							className: cx(ItemDetails_module_default.details, ItemDetails_module_default.nested),
+							children: renderEntries(groupItem, column.columns)
+						})
+					})]
+				}, column.id);
+			}
+			return /* @__PURE__ */ jsxs("div", {
 				className: ItemDetails_module_default.entry,
-				children: [/* @__PURE__ */ jsx("dt", {
-					className: ItemDetails_module_default.label,
-					children: column.label ?? column.id
-				}), /* @__PURE__ */ jsx("dd", {
+				children: [label, /* @__PURE__ */ jsx("dd", {
 					className: ItemDetails_module_default.value,
-					children: item !== void 0 ? renderValue(item, column) : /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[index % WIDTHS.length] })
+					children: entryItem !== void 0 ? renderValue(entryItem, column) : /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[index % WIDTHS.length] })
 				})]
 			}, column.id);
-			$[6] = item;
-			$[7] = renderValue;
-			$[8] = t3;
-		} else t3 = $[8];
-		t2 = columns.map(t3);
+		});
+		t1 = ariaLabel;
+		if ($[9] !== className) {
+			t2 = cx(ItemDetails_module_default.details, className);
+			$[9] = className;
+			$[10] = t2;
+		} else t2 = $[10];
+		t3 = renderEntries(item, columns);
+		$[0] = ariaLabel;
+		$[1] = className;
 		$[2] = columns;
-		$[3] = item;
-		$[4] = renderValue;
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[9] !== ariaLabel || $[10] !== t1 || $[11] !== t2) {
-		t3 = /* @__PURE__ */ jsx("dl", {
-			"aria-label": ariaLabel,
-			className: t1,
-			children: t2
+		$[3] = intl;
+		$[4] = item;
+		$[5] = renderValue;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+	}
+	let t4;
+	if ($[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx("dl", {
+			"aria-label": t1,
+			className: t2,
+			children: t3
 		});
-		$[9] = ariaLabel;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-	} else t3 = $[12];
-	const details = t3;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	const details = t4;
 	if (item === void 0) {
-		let t4;
-		if ($[13] !== intl) {
-			t4 = intl.formatMessage(messages.loadingItem);
-			$[13] = intl;
-			$[14] = t4;
-		} else t4 = $[14];
 		let t5;
-		if ($[15] !== details) {
-			t5 = /* @__PURE__ */ jsx("div", {
+		if ($[15] !== intl) {
+			t5 = intl.formatMessage(messages.loadingItem);
+			$[15] = intl;
+			$[16] = t5;
+		} else t5 = $[16];
+		let t6;
+		if ($[17] !== details) {
+			t6 = /* @__PURE__ */ jsx("div", {
 				inert: true,
 				"aria-hidden": "true",
 				children: details
 			});
-			$[15] = details;
-			$[16] = t5;
-		} else t5 = $[16];
-		let t6;
-		if ($[17] !== t4 || $[18] !== t5) {
-			t6 = /* @__PURE__ */ jsx(LoadingRegion, {
-				label: t4,
-				children: t5
+			$[17] = details;
+			$[18] = t6;
+		} else t6 = $[18];
+		let t7;
+		if ($[19] !== t5 || $[20] !== t6) {
+			t7 = /* @__PURE__ */ jsx(LoadingRegion, {
+				label: t5,
+				children: t6
 			});
-			$[17] = t4;
-			$[18] = t5;
-			$[19] = t6;
-		} else t6 = $[19];
-		return t6;
+			$[19] = t5;
+			$[20] = t6;
+			$[21] = t7;
+		} else t7 = $[21];
+		return t7;
 	}
 	return details;
 }

package/dist/ItemDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemDetails.js","names":["LoadingRegion","Skeleton","usePanneauIntl","styles","cx","messages","DisplayEntry","ListColumn","ListItem","useRenderValue","WIDTHS","ItemDetailsProps","item","columns","displays","Readonly","Record","className","ItemDetails","t0","$","_c","ariaLabel","intl","renderValue","t1","details","t2","t3","column","index","id","entry","label","value","undefined","length","map","t4","formatMessage","loadingItem","t5","t6","_c","styles"],"sources":["../src/ItemDetails.tsx"],"sourcesContent":["import { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ItemDetails.module.css';\nimport { cx } from './cx';\nimport { messages } from './messages';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { useRenderValue } from './useRenderValue';\n\n/** Widths of the values of a skeleton, varied so they read as text. */\nconst WIDTHS = ['70%', '40%', '55%', '30%', '65%'];\n\nexport interface ItemDetailsProps {\n    /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */\n    item: ListItem | undefined;\n    /** The values to show, with their label and display, in order. */\n    columns: readonly ListColumn[];\n    /** Displays by name, over the built-in ones and those of the plugins. */\n    displays?: Readonly<Record<string, DisplayEntry>>;\n    'aria-label'?: string;\n    className?: string;\n}\n\n/**\n * The values of one item, each with its label, shown with the displays of the lists: for the\n * details of an item next to its list, or anywhere a read-only view of it is needed. While the\n * item loads, it draws the labels with a skeleton of each value (decision 0034).\n */\nexport function ItemDetails({\n    item,\n    columns,\n    displays,\n    'aria-label': ariaLabel,\n    className,\n}: ItemDetailsProps) {\n    const intl = usePanneauIntl();\n    const renderValue = useRenderValue(displays);\n    const details = (\n        <dl aria-label={ariaLabel} className={cx(styles.details, className)}>\n            {columns.map((column, index) => (\n                <div key={column.id} className={styles.entry}>\n                    <dt className={styles.label}>{column.label ?? column.id}</dt>\n                    <dd className={styles.value}>\n                        {item !== undefined ? (\n                            renderValue(item, column)\n                        ) : (\n                            <Skeleton width={WIDTHS[index % WIDTHS.length]} />\n                        )}\n                    </dd>\n                </div>\n            ))}\n        </dl>\n    );\n    if (item === undefined) {\n        return (\n            <LoadingRegion label={intl.formatMessage(messages.loadingItem)}>\n                <div inert aria-hidden=\"true\">\n                    {details}\n                </div>\n            </LoadingRegion>\n        );\n    }\n    return details;\n}\n"],"mappings":";;;;;;;;;AASA,IAAMU,SAAS;CAAC;CAAO;CAAO;CAAO;CAAO;AAAK;;;;;;AAkBjD,SAAOQ,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAT,MAAAC,SAAAC,UAAA,cAAAQ,WAAAL,cAAAE;CAOxB,MAAAI,OAAarB,eAAe;CAC5B,MAAAsB,cAAoBf,eAAeK,QAAQ;CAAE,IAAAW;CAAA,IAAAL,EAAA,OAAAH,WAAA;EAEHQ,KAAArB,GAAGD,2BAAMuB,SAAUT,SAAS;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAP,WAAAO,EAAA,OAAAR,QAAAQ,EAAA,OAAAI,aAAA;EAAA,IAAAI;EAAA,IAAAR,EAAA,OAAAR,QAAAQ,EAAA,OAAAI,aAAA;GAClDI,MAAAC,QAAAC,UACT,qBAAA,OAAA;IAAgC,WAAA3B,2BAAM6B;IAAtC,UAAA,CACI,oBAAA,MAAA;KAAe,WAAA7B,2BAAM8B;KAASJ,UAAAA,OAAMI,SAAUJ,OAAME;IAAS,CAAA,GAC7D,oBAAA,MAAA;KAAe,WAAA5B,2BAAM+B;KAChBtB,UAAAA,SAASuB,KAAAA,IACNX,YAAYZ,MAAMiB,MAGtB,IADI,oBAAC,UAAD,EAAiB,OAAAnB,OAAOoB,QAAQpB,OAAM0B,QAAQ,CAAA;IAEjD,CAAA,CACH;GATIP,GAAAA,OAAME,EASV;GACTX,EAAA,KAAAR;GAAAQ,EAAA,KAAAI;GAAAJ,EAAA,KAAAQ;EAAA,OAAAA,KAAAR,EAAA;EAXAO,KAAAd,QAAOwB,IAAKT,EAWZ;EAACR,EAAA,KAAAP;EAAAO,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,aAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EAZNC,KAAA,oBAAA,MAAA;GAAgBN,cAAAA;GAAsB,WAAAG;GACjCE,UAAAA;EAYA,CAAA;EAAAP,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAdT,MAAAM,UACIE;CAeJ,IAAIhB,SAASuB,KAAAA,GAAS;EAAA,IAAAG;EAAA,IAAAlB,EAAA,QAAAG,MAAA;GAEQe,KAAAf,KAAIgB,cAAelC,SAAQmC,WAAY;GAACpB,EAAA,MAAAG;GAAAH,EAAA,MAAAkB;EAAA,OAAAA,KAAAlB,EAAA;EAAA,IAAAqB;EAAA,IAAArB,EAAA,QAAAM,SAAA;GAC1De,KAAA,oBAAA,OAAA;IAAK,OAAA;IAAkB,eAAA;IAClBf,UAAAA;GACC,CAAA;GAAAN,EAAA,MAAAM;GAAAN,EAAA,MAAAqB;EAAA,OAAAA,KAAArB,EAAA;EAAA,IAAAsB;EAAA,IAAAtB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAqB,IAAA;GAHVC,KAAA,oBAAC,eAAD;IAAsB,OAAAJ;IAClBG,UAAAA;GADU,CAAA;GAIErB,EAAA,MAAAkB;GAAAlB,EAAA,MAAAqB;GAAArB,EAAA,MAAAsB;EAAA,OAAAA,KAAAtB,EAAA;EAAA,OAJhBsB;CAIgB;CAEvB,OACMhB;AAAO"}
+{"version":3,"file":"ItemDetails.js","names":["LoadingRegion","Skeleton","usePanneauIntl","styles","cx","messages","DisplayEntry","ListColumn","ListItem","useRenderValue","getColumnValue","WIDTHS","ItemDetailsColumn","columns","ItemDetailsProps","item","displays","Readonly","Record","className","isRecord","value","Array","isArray","ItemDetails","t0","$","_c","ariaLabel","intl","renderValue","t1","t2","t3","renderEntries","entryItem","entryColumns","map","column","index","label","id","undefined","locale","groupItem","entry","group","details","nested","length","t4","t5","formatMessage","loadingItem","t6","t7","_c","styles"],"sources":["../src/ItemDetails.tsx"],"sourcesContent":["import { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ItemDetails.module.css';\nimport { cx } from './cx';\nimport { messages } from './messages';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { useRenderValue } from './useRenderValue';\nimport { getColumnValue } from './values';\n\n/** Widths of the values of a skeleton, varied so they read as text. */\nconst WIDTHS = ['70%', '40%', '55%', '30%', '65%'];\n\n/** A value of the details, or a group of values under its label. */\nexport interface ItemDetailsColumn extends ListColumn {\n    /**\n     * The values of a group (a `group` field): read in the value of the column, an object, and\n     * listed under its label.\n     */\n    columns?: readonly ItemDetailsColumn[];\n}\n\nexport interface ItemDetailsProps {\n    /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */\n    item: ListItem | undefined;\n    /** The values to show, with their label and display, in order. */\n    columns: readonly ItemDetailsColumn[];\n    /** Displays by name, over the built-in ones and those of the plugins. */\n    displays?: Readonly<Record<string, DisplayEntry>>;\n    'aria-label'?: string;\n    className?: string;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n    return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\n/**\n * The values of one item, each with its label, shown with the displays of the lists: for the\n * details of an item next to its list, or anywhere a read-only view of it is needed. A column with\n * `columns` is a group, whose values are listed under its label. While the item loads, it draws\n * the labels with a skeleton of each value (decision 0034).\n */\nexport function ItemDetails({\n    item,\n    columns,\n    displays,\n    'aria-label': ariaLabel,\n    className,\n}: ItemDetailsProps) {\n    const intl = usePanneauIntl();\n    const renderValue = useRenderValue(displays);\n    const renderEntries = (\n        entryItem: ListItem | undefined,\n        entryColumns: readonly ItemDetailsColumn[],\n    ) =>\n        entryColumns.map((column, index) => {\n            const label = <dt className={styles.label}>{column.label ?? column.id}</dt>;\n            if (column.columns !== undefined) {\n                // The values of a group are those of an item made of the value of the column.\n                const value =\n                    entryItem !== undefined\n                        ? getColumnValue(entryItem, column, intl.locale)\n                        : undefined;\n                const groupItem =\n                    entryItem !== undefined\n                        ? { ...(isRecord(value) ? value : {}), id: entryItem.id }\n                        : undefined;\n                return (\n                    <div key={column.id} className={cx(styles.entry, styles.group)}>\n                        {label}\n                        <dd className={styles.value}>\n                            <dl className={cx(styles.details, styles.nested)}>\n                                {renderEntries(groupItem, column.columns)}\n                            </dl>\n                        </dd>\n                    </div>\n                );\n            }\n            return (\n                <div key={column.id} className={styles.entry}>\n                    {label}\n                    <dd className={styles.value}>\n                        {entryItem !== undefined ? (\n                            renderValue(entryItem, column)\n                        ) : (\n                            <Skeleton width={WIDTHS[index % WIDTHS.length]} />\n                        )}\n                    </dd>\n                </div>\n            );\n        });\n    const details = (\n        <dl aria-label={ariaLabel} className={cx(styles.details, className)}>\n            {renderEntries(item, columns)}\n        </dl>\n    );\n    if (item === undefined) {\n        return (\n            <LoadingRegion label={intl.formatMessage(messages.loadingItem)}>\n                <div inert aria-hidden=\"true\">\n                    {details}\n                </div>\n            </LoadingRegion>\n        );\n    }\n    return details;\n}\n"],"mappings":"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"}

package/dist/ItemDetails.module.js

@@ -4,13 +4,17 @@ var details = "panneau-item-details-details";
 var entry = "panneau-item-details-entry";
 var label = "panneau-item-details-label";
 var value = "panneau-item-details-value";
+var group = "panneau-item-details-group";
+var nested = "panneau-item-details-nested";
 var ItemDetails_module_default = {
 	details,
 	entry,
 	label,
-	value
+	value,
+	group,
+	nested
 };
 //#endregion
-export { ItemDetails_module_default as default, details, entry, label, value };
+export { ItemDetails_module_default as default, details, entry, group, label, nested, value };
 
 //# sourceMappingURL=ItemDetails.module.js.map

package/dist/ItemDetails.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemDetails.module.js","names":[],"sources":["../src/ItemDetails.module.css"],"sourcesContent":[".details {\n    container: panneau-item-details / inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    margin: 0;\n}\n\n.entry {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.label {\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.value {\n    min-width: 0;\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n/* Wide enough: the label and its value side by side. */\n@container panneau-item-details (min-width: 30rem) {\n    .entry {\n        display: grid;\n        grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);\n        gap: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"ItemDetails.module.js","names":[],"sources":["../src/ItemDetails.module.css"],"sourcesContent":[".details {\n    container: panneau-item-details / inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    margin: 0;\n}\n\n.entry {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.label {\n    color: var(--panneau-color-text-muted);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.value {\n    min-width: 0;\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n/* A group: its label over its values, which are indented. */\n.group > .label {\n    color: var(--panneau-color-text);\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n.nested {\n    padding-inline-start: var(--panneau-space-3);\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n/* Wide enough: the label and its value side by side. */\n@container panneau-item-details (min-width: 30rem) {\n    .entry {\n        display: grid;\n        grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);\n        gap: var(--panneau-space-3);\n    }\n\n    .group {\n        display: flex;\n        gap: var(--panneau-space-2);\n    }\n}\n"],"mappings":""}

package/dist/List.d.ts

@@ -20,7 +20,7 @@ export interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items
  * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render
  * `ListView`.
  *
- * The page size and the default sort are read once.
+ * The page size, the default sort, the first layout and the calendar are read once.
  */
 export declare function List({ items, perPage, defaultSort, router, ...props }: ListProps): import("react").JSX.Element;
 //# sourceMappingURL=List.d.ts.map

package/dist/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../src/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAW,MAAM,eAAe,CAAC;AAG1D,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC9E,kFAAkF;IAClF,KAAK,EAAE,SAAS,QAAQ,EAAE,GAAG,SAAS,CAAC;IACvC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,OAAY,EAAE,WAAgB,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAW1F"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../src/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,WAAW,EAAW,MAAM,eAAe,CAAC;AAGrF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC9E,kFAAkF;IAClF,KAAK,EAAE,SAAS,QAAQ,EAAE,GAAG,SAAS,CAAC;IACvC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,OAAY,EAAE,WAAgB,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAkB1F"}

package/dist/List.js

@@ -1,6 +1,6 @@
 import { ListView } from "./ListView.js";
 import { applyListQuery } from "./query.js";
-import { useList } from "@panneau/core";
+import { DEFAULT_CALENDAR_PER_PAGE, useList } from "@panneau/core";
 import { c } from "react/compiler-runtime";
 import { usePanneauIntl } from "@panneau/ui";
 import { jsx } from "react/jsx-runtime";
@@ -11,68 +11,47 @@ import { jsx } from "react/jsx-runtime";
 * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render
 * `ListView`.
 *
-* The page size and the default sort are read once.
+* The page size, the default sort, the first layout and the calendar are read once.
 */
 function List(t0) {
-	const $ = c(15);
+	const $ = c(5);
 	const { items, perPage: t1, defaultSort: t2, router, ...props } = t0;
 	const perPage = t1 === void 0 ? 20 : t1;
-	let t3;
-	if ($[0] !== t2) {
-		t3 = t2 === void 0 ? [] : t2;
-		$[0] = t2;
-		$[1] = t3;
-	} else t3 = $[1];
-	const defaultSort = t3;
+	const defaultSort = t2 === void 0 ? [] : t2;
 	const intl = usePanneauIntl();
-	let t4;
-	if ($[2] !== defaultSort || $[3] !== perPage) {
-		t4 = {
+	const { query, list } = useList({
+		defaults: {
 			perPage,
-			sort: defaultSort
-		};
-		$[2] = defaultSort;
-		$[3] = perPage;
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] !== router) {
-		t5 = router !== void 0 ? { router } : {};
-		$[5] = router;
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== t4 || $[8] !== t5) {
-		t6 = {
-			defaults: t4,
-			...t5
-		};
-		$[7] = t4;
-		$[8] = t5;
-		$[9] = t6;
-	} else t6 = $[9];
-	const { query, list } = useList(t6);
+			sort: defaultSort,
+			...props.layouts?.[0] !== void 0 ? { layout: props.layouts[0] } : {},
+			...props.calendar !== null && props.calendar !== void 0 ? { calendar: {
+				...props.calendar,
+				perPage: DEFAULT_CALENDAR_PER_PAGE
+			} } : {}
+		},
+		...router !== void 0 ? { router } : {}
+	});
 	const result = items !== void 0 ? applyListQuery(items, query, {
 		columns: props.columns,
 		locale: intl.locale
 	}) : void 0;
-	const t7 = result?.items;
-	const t8 = result?.total;
-	let t9;
-	if ($[10] !== list || $[11] !== props || $[12] !== t7 || $[13] !== t8) {
-		t9 = /* @__PURE__ */ jsx(ListView, {
+	const t3 = result?.items;
+	const t4 = result?.total;
+	let t5;
+	if ($[0] !== list || $[1] !== props || $[2] !== t3 || $[3] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ListView, {
 			...props,
 			list,
-			items: t7,
-			total: t8
+			items: t3,
+			total: t4
 		});
-		$[10] = list;
-		$[11] = props;
-		$[12] = t7;
-		$[13] = t8;
-		$[14] = t9;
-	} else t9 = $[14];
-	return t9;
+		$[0] = list;
+		$[1] = props;
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+	} else t5 = $[4];
+	return t5;
 }
 //#endregion
 export { List };

package/dist/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["ListOptions","useList","usePanneauIntl","ListView","ListViewProps","applyListQuery","ListItem","ListProps","Omit","items","perPage","defaultSort","router","List","t0","$","_c","t1","t2","props","undefined","t3","intl","t4","sort","t5","t6","defaults","query","list","result","columns","locale","t7","t8","total","t9","_c"],"sources":["../src/List.tsx"],"sourcesContent":["import { type ListOptions, useList } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { ListView, type ListViewProps } from './ListView';\nimport { applyListQuery } from './query';\nimport type { ListItem } from './types';\n\nexport interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {\n    /** Every item: the list searches, filters, sorts and paginates them in memory. */\n    items: readonly ListItem[] | undefined;\n    /** Items per page. Defaults to 20. */\n    perPage?: number;\n    /** Default sort, as `sort` query values (`['-published_at']`). */\n    defaultSort?: string[];\n    /**\n     * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest\n     * `PanneauProvider`; `null` keeps it in memory.\n     */\n    router?: ListOptions['router'];\n}\n\n/**\n * A list of items held in memory, from columns and items, with or without a definition. It\n * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.\n * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render\n * `ListView`.\n *\n * The page size and the default sort are read once.\n */\nexport function List({ items, perPage = 20, defaultSort = [], router, ...props }: ListProps) {\n    const intl = usePanneauIntl();\n    const { query, list } = useList({\n        defaults: { perPage, sort: defaultSort },\n        ...(router !== undefined ? { router } : {}),\n    });\n    const result =\n        items !== undefined\n            ? applyListQuery(items, query, { columns: props.columns, locale: intl.locale })\n            : undefined;\n    return <ListView {...props} list={list} items={result?.items} total={result?.total} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,SAAOa,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAP,OAAAC,SAAAO,IAAAN,aAAAO,IAAAN,QAAA,GAAAO,UAAAL;CAAS,MAAAJ,UAAAO,OAAAG,KAAAA,IAAA,KAAAH;CAAY,IAAAI;CAAA,IAAAN,EAAA,OAAAG,IAAA;EAAEG,KAAAH,OAAAE,KAAAA,IAAA,CAAA,IAAAF;EAAgBH,EAAA,KAAAG;EAAAH,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhB,MAAAJ,cAAAU;CACxC,MAAAC,OAAapB,eAAe;CAAE,IAAAqB;CAAA,IAAAR,EAAA,OAAAJ,eAAAI,EAAA,OAAAL,SAAA;EAEhBa,KAAA;GAAAb;GAAAc,MAAiBb;EAAY;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAL;EAAAK,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAH,QAAA;EACpCa,KAAAb,WAAWQ,KAAAA,IAAX,EAAAR,OAAqC,IAArC,CAAqC;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAQ,MAAAR,EAAA,OAAAU,IAAA;EAFdC,KAAA;GAAAC,UAClBJ;GAA8B,GACpCE;EACR;EAACV,EAAA,KAAAQ;EAAAR,EAAA,KAAAU;EAAAV,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAHD,MAAA,EAAAa,OAAAC,SAAwB5B,QAAQyB,EAG/B;CACD,MAAAI,SACIrB,UAAUW,KAAAA,IACJf,eAAeI,OAAOmB,OAAO;EAAAG,SAAWZ,MAAKY;EAAQC,QAAUV,KAAIU;CAAQ,CACnE,IAFdZ,KAAAA;CAG2C,MAAAa,KAAAH,QAAMrB;CAAgB,MAAAyB,KAAAJ,QAAMK;CAAO,IAAAC;CAAA,IAAArB,EAAA,QAAAc,QAAAd,EAAA,QAAAI,SAAAJ,EAAA,QAAAkB,MAAAlB,EAAA,QAAAmB,IAAA;EAA3EE,KAAA,oBAAC,UAAD;GAAS,GAAKjB;GAAaU;GAAa,OAAAI;GAAsB,OAAAC;EAAa,CAAA;EAAInB,EAAA,MAAAc;EAAAd,EAAA,MAAAI;EAAAJ,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,OAA/EqB;AAA+E"}
+{"version":3,"file":"List.js","names":["DEFAULT_CALENDAR_PER_PAGE","ListOptions","useList","usePanneauIntl","ListView","ListViewProps","applyListQuery","ListItem","ListProps","Omit","items","perPage","defaultSort","router","List","t0","$","_c","t1","t2","props","undefined","intl","query","list","defaults","sort","layouts","layout","calendar","result","columns","locale","t3","t4","total","t5","_c"],"sources":["../src/List.tsx"],"sourcesContent":["import { DEFAULT_CALENDAR_PER_PAGE, type ListOptions, useList } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { ListView, type ListViewProps } from './ListView';\nimport { applyListQuery } from './query';\nimport type { ListItem } from './types';\n\nexport interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {\n    /** Every item: the list searches, filters, sorts and paginates them in memory. */\n    items: readonly ListItem[] | undefined;\n    /** Items per page. Defaults to 20. */\n    perPage?: number;\n    /** Default sort, as `sort` query values (`['-published_at']`). */\n    defaultSort?: string[];\n    /**\n     * Keeps the query in a router (`createHistoryRouter()`). Defaults to the router of the closest\n     * `PanneauProvider`; `null` keeps it in memory.\n     */\n    router?: ListOptions['router'];\n}\n\n/**\n * A list of items held in memory, from columns and items, with or without a definition. It\n * creates its state with `useList()` of `@panneau/core`, and applies the query to `items` itself.\n * For items fetched page by page, create the state with `useList()`, fetch its `query`, and render\n * `ListView`.\n *\n * The page size, the default sort, the first layout and the calendar are read once.\n */\nexport function List({ items, perPage = 20, defaultSort = [], router, ...props }: ListProps) {\n    const intl = usePanneauIntl();\n    const { query, list } = useList({\n        defaults: {\n            perPage,\n            sort: defaultSort,\n            ...(props.layouts?.[0] !== undefined ? { layout: props.layouts[0] } : {}),\n            ...(props.calendar !== null && props.calendar !== undefined\n                ? { calendar: { ...props.calendar, perPage: DEFAULT_CALENDAR_PER_PAGE } }\n                : {}),\n        },\n        ...(router !== undefined ? { router } : {}),\n    });\n    const result =\n        items !== undefined\n            ? applyListQuery(items, query, { columns: props.columns, locale: intl.locale })\n            : undefined;\n    return <ListView {...props} list={list} items={result?.items} total={result?.total} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,SAAOc,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAc,MAAA,EAAAP,OAAAC,SAAAO,IAAAN,aAAAO,IAAAN,QAAA,GAAAO,UAAAL;CAAS,MAAAJ,UAAAO,OAAAG,KAAAA,IAAA,KAAAH;CAAc,MAAAN,cAAAO,OAAAE,KAAAA,IAAA,CAAA,IAAAF;CACxC,MAAAG,OAAanB,eAAe;CAC5B,MAAA,EAAAoB,OAAAC,SAAwBtB,QAAQ;EAAAuB,UAClB;GAAAd;GAAAe,MAEAd;GAAW,GACbQ,MAAKO,UAAa,OAAKN,KAAAA,IAAvB,EAAAO,QAA6CR,MAAKO,QAAQ,GAAS,IAAnE,CAAmE;GAAC,GACpEP,MAAKS,aAAc,QAAQT,MAAKS,aAAcR,KAAAA,IAA9C,EAAAQ,UACc;IAAA,GAAKT,MAAKS;IAASlB,SAAWX;GAA0B,EACnE,IAFH,CAEG;EACX;EAAC,GACGa,WAAWQ,KAAAA,IAAX,EAAAR,OAAqC,IAArC,CAAqC;CAC7C,CAAC;CACD,MAAAiB,SACIpB,UAAUW,KAAAA,IACJf,eAAeI,OAAOa,OAAO;EAAAQ,SAAWX,MAAKW;EAAQC,QAAUV,KAAIU;CAAQ,CACnE,IAFdX,KAAAA;CAG2C,MAAAY,KAAAH,QAAMpB;CAAgB,MAAAwB,KAAAJ,QAAMK;CAAO,IAAAC;CAAA,IAAApB,EAAA,OAAAQ,QAAAR,EAAA,OAAAI,SAAAJ,EAAA,OAAAiB,MAAAjB,EAAA,OAAAkB,IAAA;EAA3EE,KAAA,oBAAC,UAAD;GAAS,GAAKhB;GAAaI;GAAa,OAAAS;GAAsB,OAAAC;EAAa,CAAA;EAAIlB,EAAA,KAAAQ;EAAAR,EAAA,KAAAI;EAAAJ,EAAA,KAAAiB;EAAAjB,EAAA,KAAAkB;EAAAlB,EAAA,KAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,OAA/EoB;AAA+E"}

package/dist/ListView.d.ts

@@ -1,9 +1,9 @@
 import { type ReactNode } from 'react';
-import type { List } from '@panneau/core';
-import type { Action, Field, Filter } from '@panneau/protocol';
+import type { List, ResolvedCalendar } from '@panneau/core';
+import type { Action, Field, Filter, RuleFailure } from '@panneau/protocol';
 import { type ListActions } from './actions/actions.js';
 import type { ActionIcons } from './actions/icons.js';
-import type { DisplayEntry, FilterEntry, ListActionHandler, ListActionPreviewer, ListColumn, ListItem, ListLayoutEntry } from './types.js';
+import type { DisplayEntry, FilterEntry, ListActionHandler, ListActionPreviewer, ListColumn, ListInlineEditHandler, ListItem, ListLayoutEntry } from './types.js';
 export interface ListViewProps {
     /** The list state of `@panneau/core` (`useList()`): query and selection. */
     list: List;
@@ -12,7 +12,13 @@ export interface ListViewProps {
      * draws a skeleton of its rows, from its columns and its page size.
      */
     items: readonly ListItem[] | undefined;
+    /**
+     * Every column of the list. Those with `hidden` are shown when the user chooses them, from
+     * the "Columns" menu, and the view of the list state says which ones are shown (decision 0042).
+     */
     columns: readonly ListColumn[];
+    /** Offers the user to show, hide and order the columns. Defaults to `true`. */
+    columnChoice?: boolean;
     /**
      * How many items match the query, on every page (`meta.total`). With it, the list shows
      * pagination and offers to select every matching item. Without it, `items` is the whole list.
@@ -40,7 +46,7 @@ export interface ListViewProps {
     search?: boolean;
     /** Layouts to choose from, the first one being the default. Defaults to `['table']`. */
     layouts?: readonly string[];
-    /** The layout, controlled. */
+    /** The layout, controlled. Without it, the layout is the view of the list state. */
     layout?: string;
     onLayoutChange?: (layout: string) => void;
     /** Page sizes to choose from. */
@@ -67,6 +73,16 @@ export interface ListViewProps {
     actionIcons?: ActionIcons;
     /** The field that titles items, for their label (`itemTitle` of the resource). */
     itemTitle?: string;
+    /**
+     * The field shown as the image of items (`itemImage` of the resource): a media reference, a
+     * file or a URL. The `gallery` layout needs it (decision 0044).
+     */
+    itemImage?: string | undefined;
+    /**
+     * The calendar of the list (`calendar` of `resolveList()`), for its `calendar` layout. The list
+     * state asks for its month when it is given the same calendar.
+     */
+    calendar?: Pick<ResolvedCalendar, 'field' | 'filter'> | null | undefined;
     /** The label of an item, for checkboxes and actions. Defaults to its title, then its id. */
     getItemLabel?: (item: ListItem) => string;
     /** A link to an item, on its title. */
@@ -88,6 +104,19 @@ export interface ListViewProps {
     layoutComponents?: Readonly<Record<string, ListLayoutEntry>>;
     /** Filter controls by filter type, over the built-in ones. */
     filterControls?: Readonly<Record<string, FilterEntry>>;
+    /**
+     * The fields that columns edit in place (`inlineEdit` of the list), on the items that can be
+     * updated, in the table (decision 0043). Needs `onInlineEdit`.
+     */
+    inlineEdit?: readonly string[];
+    /** Saves a field edited in place, and resolves with the updated item. */
+    onInlineEdit?: ListInlineEditHandler;
+    /**
+     * The message of a portable rule that a value edited in place fails. Defaults to
+     * `formatRuleFailure()` of `@panneau/core`, in English; `useFormatRuleFailure()` of
+     * `@panneau/forms` translates them.
+     */
+    formatError?: (failure: RuleFailure, path: string) => string;
     /** Content at the end of the toolbar, such as a button to create an item. */
     toolbar?: ReactNode;
     /** Shown when the list has no items, without filters or search. */
@@ -101,5 +130,5 @@ export interface ListViewProps {
  * cards), with sorting, search, filters and their chips, pagination, selection and actions. It
  * fetches nothing: the caller gives the items of the list's query and their total.
  */
-export declare function ListView({ list, items, columns, total, cursors, isLoading, error, onRetry, filters, fields, search, layouts: layoutsProp, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, previewAction, actionIcons, itemTitle, getItemLabel: getItemLabelProp, getItemHref, getLinkHref, currentItemId, displays, layoutComponents, filterControls, toolbar, emptyMessage, 'aria-label': ariaLabel, className, }: ListViewProps): import("react").JSX.Element;
+export declare function ListView({ list, items, columns: allColumns, columnChoice, total, cursors, isLoading, error, onRetry, filters: filtersProp, fields, search, layouts: layoutsProp, layout: controlledLayout, onLayoutChange, perPageOptions, selectable: selectableProp, actions: actionsProp, onAction, previewAction, actionIcons, itemTitle, itemImage, calendar, getItemLabel: getItemLabelProp, getItemHref, getLinkHref, currentItemId, displays, layoutComponents, filterControls, inlineEdit, onInlineEdit, formatError, toolbar, emptyMessage, 'aria-label': ariaLabel, className, }: ListViewProps): import("react").JSX.Element;
 //# sourceMappingURL=ListView.d.ts.map

package/dist/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../src/ListView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../src/ListView.tsx"],"names":[],"mappings":"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"}