@panneau/lists 5.0.0-alpha.2 → 5.0.0-alpha.21

package/README.md

@@ -77,21 +77,23 @@ 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     | A spinner, an error with a retry, an empty message, and "no results" with a button that clears the filters                                                                   |
-
-An action shows the Lucide icon it names (`"icon": "send"`, through `getNamedIcon()` of `@panneau/ui`), 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 }}`.
-
-Lists confirm an action when it has `confirm` (its title and message are ICU messages with `{count}`), or when some selected items don't allow it, then call `onAction` with the action, its scope, the item or the `Selection` of the protocol, the count and the skipped items. A promise shows the action as pending; when it rejects, a toast says that it failed. After a selection action, the selection is cleared.
+| 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. With `itemImage`, the table starts each title with a thumbnail ([0061](../../docs/decisions/0061-item-images-in-lists.md)). 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 }}`.
+
+Lists confirm an action when it has `confirm` (its title and message are ICU messages with `{count}`), or when some selected items don't allow it. An `undoable` action runs without a confirmation, unless it sets one, up to `UNDO_LIMIT` items (100), counted from the selection or the dry run: its toast offers "Undo" instead (`asksConfirmation()` of `@panneau/core`, [decision 0063](../../docs/decisions/0063-undo-instead-of-a-confirmation.md)). A value changed in place says so in a toast whose "Undo" saves the previous value the same way, with the version the save got. For every item matching a query, they only know the current page: with `previewAction` (`useActionPreview()` of `@panneau/actions`), an action that declares `dryRun` asks the backend first, and the confirmation gives its count of skipped items. Then they call `onAction` with the action, its scope, the item or the `Selection` of the protocol, the count and the skipped items. A promise shows the action as pending; when it rejects, a toast says that it failed. After a selection action, the selection is cleared.
 
 A `relation` filter keeps ids in the query (`filter[author]=7`). Its chip and picker show the labels of the items it picked, and those of ids from the URL once the relation source's `resolve()` gives them.
 

package/dist/ItemDetails.css

@@ -0,0 +1,50 @@
+.panneau-item-details-details {
+    container: panneau-item-details / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+    margin: 0;
+}
+
+.panneau-item-details-entry {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    min-width: 0;
+}
+
+.panneau-item-details-label {
+    color: var(--panneau-color-text-muted);
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-item-details-value {
+    min-width: 0;
+    margin: 0;
+    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 {
+        display: grid;
+        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

@@ -0,0 +1,27 @@
+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 ItemDetailsColumn[];
+    /** Displays by name, over the built-in ones and those of the plugins. */
+    displays?: Readonly<Record<string, DisplayEntry>>;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * 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. 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

@@ -0,0 +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;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

@@ -0,0 +1,134 @@
+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";
+import { c } from "react/compiler-runtime";
+import { LoadingRegion, Skeleton, usePanneauIntl } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ItemDetails.tsx
+/** Widths of the values of a skeleton, varied so they read as text. */
+var WIDTHS = [
+	"70%",
+	"40%",
+	"55%",
+	"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. 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(22);
+	const { item, columns, displays, "aria-label": ariaLabel, className } = t0;
+	const intl = usePanneauIntl();
+	const renderValue = useRenderValue(displays);
+	let t1;
+	let t2;
+	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: [label, /* @__PURE__ */ jsx("dd", {
+					className: ItemDetails_module_default.value,
+					children: entryItem !== void 0 ? renderValue(entryItem, column) : /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[index % WIDTHS.length] })
+				})]
+			}, column.id);
+		});
+		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] = 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
+		});
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	const details = t4;
+	if (item === void 0) {
+		let t5;
+		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
+			});
+			$[17] = details;
+			$[18] = t6;
+		} else t6 = $[18];
+		let t7;
+		if ($[19] !== t5 || $[20] !== t6) {
+			t7 = /* @__PURE__ */ jsx(LoadingRegion, {
+				label: t5,
+				children: t6
+			});
+			$[19] = t5;
+			$[20] = t6;
+			$[21] = t7;
+		} else t7 = $[21];
+		return t7;
+	}
+	return details;
+}
+//#endregion
+export { ItemDetails };
+
+//# sourceMappingURL=ItemDetails.js.map

package/dist/ItemDetails.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,20 @@
+import "./ItemDetails.css";
+//#region src/ItemDetails.module.css
+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,
+	group,
+	nested
+};
+//#endregion
+export { ItemDetails_module_default as default, details, entry, group, label, nested, value };
+
+//# sourceMappingURL=ItemDetails.module.js.map

package/dist/ItemDetails.module.js.map

@@ -0,0 +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/* 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

@@ -1,6 +1,6 @@
 import { type ListOptions } from '@panneau/core';
-import { type ListViewProps } from './ListView';
-import type { ListItem } from './types';
+import { type ListViewProps } from './ListView.js';
+import type { ListItem } from './types.js';
 export interface ListProps extends Omit<ListViewProps, 'list' | 'total' | 'items'> {
     /** Every item: the list searches, filters, sorts and paginates them in memory. */
     items: readonly ListItem[] | undefined;
@@ -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,7 @@
 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";
 //#region src/List.tsx
@@ -10,14 +11,23 @@ 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({ items, perPage = 20, defaultSort = [], router, ...props }) {
+function List(t0) {
+	const $ = c(5);
+	const { items, perPage: t1, defaultSort: t2, router, ...props } = t0;
+	const perPage = t1 === void 0 ? 20 : t1;
+	const defaultSort = t2 === void 0 ? [] : t2;
 	const intl = usePanneauIntl();
 	const { query, list } = useList({
 		defaults: {
 			perPage,
-			sort: defaultSort
+			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 } : {}
 	});
@@ -25,12 +35,23 @@ function List({ items, perPage = 20, defaultSort = [], router, ...props }) {
 		columns: props.columns,
 		locale: intl.locale
 	}) : void 0;
-	return /* @__PURE__ */ jsx(ListView, {
-		...props,
-		list,
-		items: result?.items,
-		total: result?.total
-	});
+	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: t3,
+			total: t4
+		});
+		$[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":[],"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,SAAgB,KAAK,EAAE,OAAO,UAAU,IAAI,cAAc,CAAA,GAAI,QAAQ,GAAG,SAAoB;CACzF,MAAM,OAAO,eAAe;CAC5B,MAAM,EAAE,OAAO,SAAS,QAAQ;EAC5B,UAAU;GAAE;GAAS,MAAM;EAAY;EACvC,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;CAC7C,CAAC;CACD,MAAM,SACF,UAAU,KAAA,IACJ,eAAe,OAAO,OAAO;EAAE,SAAS,MAAM;EAAS,QAAQ,KAAK;CAAO,CAAC,IAC5E,KAAA;CACV,OAAO,oBAAC,UAAD;EAAU,GAAI;EAAa;EAAM,OAAO,QAAQ;EAAO,OAAO,QAAQ;CAAM,CAAA;AACvF"}
+{"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/ListSkeleton.d.ts

@@ -0,0 +1,19 @@
+import type { ListColumn, ListLayoutEntry } from './types.js';
+export interface ListSkeletonProps {
+    Layout: ListLayoutEntry;
+    columns: readonly ListColumn[];
+    /** The page size: as many rows, up to what fits. */
+    perPage: number | undefined;
+    sort: readonly string[];
+    label: string;
+    /** Whether items have an image: the table draws the placeholder of their thumbnails. */
+    withImages?: boolean;
+}
+/**
+ * The first page of a list that loads (decision 0034): the list's own layout, with its columns
+ * and a skeleton for each value, as many rows as the page size, up to what fits. The layout is
+ * inert and hidden: its headers can't be used before the items are there, and the status message
+ * of the region says that the list loads.
+ */
+export declare function ListSkeleton({ Layout, columns, perPage, sort, label, withImages, }: ListSkeletonProps): import("react").JSX.Element;
+//# sourceMappingURL=ListSkeleton.d.ts.map

package/dist/ListSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSkeleton.d.ts","sourceRoot":"","sources":["../src/ListSkeleton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAY,eAAe,EAAE,MAAM,SAAS,CAAC;AAUrE,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,oDAAoD;IACpD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EACzB,MAAM,EACN,OAAO,EACP,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAkB,GACrB,EAAE,iBAAiB,+BAiCnB"}

package/dist/ListSkeleton.js

@@ -0,0 +1,115 @@
+import { messages } from "./messages.js";
+import { c } from "react/compiler-runtime";
+import { LoadingRegion, Skeleton, usePanneauIntl } from "@panneau/ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/ListSkeleton.tsx
+/** The most rows a skeleton draws: about what fits in a window. */
+var MAX_ROWS = 10;
+/** Widths of the values, varied so the rows read as text. */
+var WIDTHS = [
+	"72%",
+	"48%",
+	"64%",
+	"40%",
+	"56%",
+	"80%"
+];
+var none = () => null;
+var nothing = () => void 0;
+/**
+* The first page of a list that loads (decision 0034): the list's own layout, with its columns
+* and a skeleton for each value, as many rows as the page size, up to what fits. The layout is
+* inert and hidden: its headers can't be used before the items are there, and the status message
+* of the region says that the list loads.
+*/
+function ListSkeleton(t0) {
+	const $ = c(18);
+	const { Layout, columns, perPage, sort, label, withImages: t1 } = t0;
+	const withImages = t1 === void 0 ? false : t1;
+	const intl = usePanneauIntl();
+	const rows = Math.max(1, Math.min(perPage ?? MAX_ROWS, MAX_ROWS));
+	let t2;
+	if ($[0] !== rows) {
+		t2 = Array.from({ length: rows }, _temp);
+		$[0] = rows;
+		$[1] = t2;
+	} else t2 = $[1];
+	const items = t2;
+	let t3;
+	if ($[2] !== columns || $[3] !== items) {
+		t3 = (item, column) => {
+			const offset = items.indexOf(item) + columns.indexOf(column);
+			return /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[offset % WIDTHS.length] });
+		};
+		$[2] = columns;
+		$[3] = items;
+		$[4] = t3;
+	} else t3 = $[4];
+	const renderValue = t3;
+	let t4;
+	if ($[5] !== intl) {
+		t4 = intl.formatMessage(messages.loading);
+		$[5] = intl;
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = withImages ? none : void 0;
+	let t6;
+	if ($[7] !== Layout || $[8] !== columns || $[9] !== items || $[10] !== label || $[11] !== renderValue || $[12] !== sort || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			inert: true,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Layout, {
+				items,
+				columns,
+				renderValue,
+				getItemLabel: _temp2,
+				getItemHref: none,
+				getItemImage: t5,
+				isCurrent: _temp3,
+				selectable: false,
+				isSelected: _temp4,
+				onToggle: nothing,
+				renderActions: none,
+				sort,
+				onSort: nothing,
+				label,
+				pageSelection: null
+			})
+		});
+		$[7] = Layout;
+		$[8] = columns;
+		$[9] = items;
+		$[10] = label;
+		$[11] = renderValue;
+		$[12] = sort;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t4 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(LoadingRegion, {
+			label: t4,
+			children: t6
+		});
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+}
+function _temp4() {
+	return false;
+}
+function _temp3() {
+	return false;
+}
+function _temp2(item_0) {
+	return item_0.id;
+}
+function _temp(_, index) {
+	return { id: `skeleton-${String(index)}` };
+}
+//#endregion
+export { ListSkeleton };
+
+//# sourceMappingURL=ListSkeleton.js.map

package/dist/ListSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSkeleton.js","names":["ReactNode","LoadingRegion","Skeleton","usePanneauIntl","messages","ListColumn","ListItem","ListLayoutEntry","MAX_ROWS","WIDTHS","none","nothing","undefined","ListSkeletonProps","Layout","columns","perPage","sort","label","withImages","ListSkeleton","t0","$","_c","t1","intl","rows","Math","max","min","t2","Array","from","length","_temp","items","t3","item","column","offset","indexOf","renderValue","t4","formatMessage","loading","t5","t6","_temp2","_temp3","_temp4","t7","item_0","id","_","index","String","_c"],"sources":["../src/ListSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from './messages';\nimport type { ListColumn, ListItem, ListLayoutEntry } from './types';\n\n/** The most rows a skeleton draws: about what fits in a window. */\nconst MAX_ROWS = 10;\n/** Widths of the values, varied so the rows read as text. */\nconst WIDTHS = ['72%', '48%', '64%', '40%', '56%', '80%'];\n\nconst none = () => null;\nconst nothing = () => undefined;\n\nexport interface ListSkeletonProps {\n    Layout: ListLayoutEntry;\n    columns: readonly ListColumn[];\n    /** The page size: as many rows, up to what fits. */\n    perPage: number | undefined;\n    sort: readonly string[];\n    label: string;\n    /** Whether items have an image: the table draws the placeholder of their thumbnails. */\n    withImages?: boolean;\n}\n\n/**\n * The first page of a list that loads (decision 0034): the list's own layout, with its columns\n * and a skeleton for each value, as many rows as the page size, up to what fits. The layout is\n * inert and hidden: its headers can't be used before the items are there, and the status message\n * of the region says that the list loads.\n */\nexport function ListSkeleton({\n    Layout,\n    columns,\n    perPage,\n    sort,\n    label,\n    withImages = false,\n}: ListSkeletonProps) {\n    const intl = usePanneauIntl();\n    const rows = Math.max(1, Math.min(perPage ?? MAX_ROWS, MAX_ROWS));\n    const items: ListItem[] = Array.from({ length: rows }, (_, index) => ({\n        id: `skeleton-${String(index)}`,\n    }));\n    const renderValue = (item: ListItem, column: ListColumn): ReactNode => {\n        const offset = items.indexOf(item) + columns.indexOf(column);\n        return <Skeleton width={WIDTHS[offset % WIDTHS.length]} />;\n    };\n    return (\n        <LoadingRegion label={intl.formatMessage(messages.loading)}>\n            <div inert aria-hidden=\"true\">\n                <Layout\n                    items={items}\n                    columns={columns}\n                    renderValue={renderValue}\n                    getItemLabel={(item) => item.id}\n                    getItemHref={none}\n                    getItemImage={withImages ? none : undefined}\n                    isCurrent={() => false}\n                    selectable={false}\n                    isSelected={() => false}\n                    onToggle={nothing}\n                    renderActions={none}\n                    sort={sort}\n                    onSort={nothing}\n                    label={label}\n                    pageSelection={null}\n                />\n            </div>\n        </LoadingRegion>\n    );\n}\n"],"mappings":";;;;;;AAQA,IAAMQ,WAAW;;AAEjB,IAAMC,SAAS;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK;AAExD,IAAMC,aAAa;AACnB,IAAMC,gBAAgBC,KAAAA;;;;;;;AAmBtB,SAAOQ,aAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAsB,MAAA,EAAAT,QAAAC,SAAAC,SAAAC,MAAAC,OAAAC,YAAAK,OAAAH;CAMzB,MAAAF,aAAAK,OAAAZ,KAAAA,IAAA,QAAAY;CAEA,MAAAC,OAAatB,eAAe;CAC5B,MAAAuB,OAAaC,KAAIC,IAAK,GAAGD,KAAIE,IAAKb,WAAAR,UAAqBA,QAAQ,CAAC;CAAE,IAAAsB;CAAA,IAAAR,EAAA,OAAAI,MAAA;EACxCI,KAAAC,MAAKC,KAAM,EAAAC,QAAUP,KAAK,GAAGQ,KAErD;EAACZ,EAAA,KAAAI;EAAAJ,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAFH,MAAAa,QAA0BL;CAEtB,IAAAM;CAAA,IAAAd,EAAA,OAAAP,WAAAO,EAAA,OAAAa,OAAA;EACgBC,MAAAC,MAAAC,WAAA;GAChB,MAAAC,SAAeJ,MAAKK,QAASH,IAAI,IAAItB,QAAOyB,QAASF,MAAM;GAAE,OACtD,oBAAC,UAAD,EAAiB,OAAA7B,OAAO8B,SAAS9B,OAAMwB,QAAQ,CAAA;EAAI;EAC7DX,EAAA,KAAAP;EAAAO,EAAA,KAAAa;EAAAb,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAHD,MAAAmB,cAAoBL;CAGlB,IAAAM;CAAA,IAAApB,EAAA,OAAAG,MAAA;EAEwBiB,KAAAjB,KAAIkB,cAAevC,SAAQwC,OAAQ;EAACtB,EAAA,KAAAG;EAAAH,EAAA,KAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAQhC,MAAAuB,KAAA1B,aAAAT,OAAAE,KAAAA;CAA6B,IAAAkC;CAAA,IAAAxB,EAAA,OAAAR,UAAAQ,EAAA,OAAAP,WAAAO,EAAA,OAAAa,SAAAb,EAAA,QAAAJ,SAAAI,EAAA,QAAAmB,eAAAnB,EAAA,QAAAL,QAAAK,EAAA,QAAAuB,IAAA;EAPnDC,KAAA,oBAAA,OAAA;GAAK,OAAA;GAAkB,eAAA;GACnB,UAAA,oBAAC,QAAD;IACWX;IACEpB;IACI0B;IACC,cAAAM;IACDrC,aAAAA;IACC,cAAAmC;IACH,WAAAG;IACC,YAAA;IACA,YAAAC;IACFtC,UAAAA;IACKD,eAAAA;IACTO;IACEN,QAAAA;IACDO;IACQ,eAAA;GAAI,CAAA;EAErB,CAAA;EAAAI,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,KAAAa;EAAAb,EAAA,MAAAJ;EAAAI,EAAA,MAAAmB;EAAAnB,EAAA,MAAAL;EAAAK,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAA4B;CAAA,IAAA5B,EAAA,QAAAoB,MAAApB,EAAA,QAAAwB,IAAA;EAnBVI,KAAA,oBAAC,eAAD;GAAsB,OAAAR;GAClBI,UAAAA;EADU,CAAA;EAoBExB,EAAA,MAAAoB;EAAApB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA4B;CAAA,OAAAA,KAAA5B,EAAA;CAAA,OApBhB4B;AAoBgB;AAtCjB,SAAAD,SAAA;CAAA,OA6B+B;AAAK;AA7BpC,SAAAD,SAAA;CAAA,OA2B8B;AAAK;AA3BnC,SAAAD,OAAAI,QAAA;CAAA,OAwBqCd,OAAIe;AAAG;AAxB5C,SAAAlB,MAAAmB,GAAAC,OAAA;CAAA,OAUmE,EAAAF,IAC9D,YAAYG,OAAOD,KAAK,IAChC;AAAC"}