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

package/dist/layouts/TableLayout.css

@@ -27,6 +27,12 @@
     background-color: var(--panneau-color-surface-sunken);
 }
 
+/* The title stays readable in a narrow list, such as next to an item's details: the table
+ * scrolls instead. */
+.panneau-table-layout-table td.panneau-table-layout-title {
+    min-width: 12rem;
+}
+
 .panneau-table-layout-table tbody tr:last-child td {
     border-bottom: 0;
 }
@@ -35,6 +41,46 @@
     background-color: var(--panneau-color-accent-subtle);
 }
 
+/* The item shown next to the list: a bar on its first cell. */
+.panneau-table-layout-table tbody tr[data-current] td:first-child {
+    box-shadow: inset 3px 0 0 var(--panneau-color-accent);
+}
+
+.panneau-table-layout-table tbody tr[data-current] {
+    background-color: var(--panneau-color-hover);
+}
+
+/* The thumbnail of an item, before its title (decision 0061). */
+.panneau-table-layout-with-thumbnail {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-3);
+}
+
+.panneau-table-layout-with-thumbnail > :last-child {
+    min-width: 0;
+}
+
+.panneau-table-layout-thumbnail {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    overflow: hidden;
+    color: var(--panneau-color-text-muted);
+    background-color: var(--panneau-color-surface-sunken);
+    border-radius: var(--panneau-radius-sm);
+}
+
+.panneau-table-layout-thumbnail img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 .panneau-table-layout-center {
     text-align: center !important;
 }
@@ -53,6 +99,11 @@
     white-space: nowrap;
 }
 
+/* As narrow as the actions of the row on one line: they only wrap in a narrow list. */
+.panneau-table-layout-table .panneau-table-layout-actions-cell > * {
+    flex-wrap: nowrap;
+}
+
 .panneau-table-layout-sort {
     display: inline-flex;
     align-items: center;
@@ -146,6 +197,10 @@
         width: auto;
     }
 
+    .panneau-table-layout-table td.panneau-table-layout-actions-cell > * {
+        flex-wrap: wrap;
+    }
+
     .panneau-table-layout-table td.panneau-table-layout-check {
         position: absolute;
         top: var(--panneau-space-2);
@@ -161,6 +216,7 @@
 
     .panneau-table-layout-table td.panneau-table-layout-title {
         display: block;
+        min-width: 0;
         padding-inline-end: var(--panneau-space-10);
         font-weight: var(--panneau-font-weight-medium);
     }

package/dist/layouts/TableLayout.d.ts

@@ -1,9 +1,10 @@
-import type { ListColumn, ListLayoutProps } from '../types';
+import type { ListColumn, ListLayoutProps } from '../types.js';
 /** The sort direction of a column, from the first `sort` value. */
 export declare function getSortDirection(sort: readonly string[], column: ListColumn): 'ascending' | 'descending' | null;
 /**
- * Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a
- * block that shows the label of each value.
+ * Items as a table, with sortable column headers. With the image of items (`getItemImage`), each
+ * title starts with a thumbnail. On narrow lists (phones), each row turns into a block that shows
+ * the label of each value.
  */
-export declare function TableLayout({ items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
+export declare function TableLayout({ items, columns, renderValue, getItemLabel, getItemHref, getItemImage, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, renderCell, }: ListLayoutProps): import("react").JSX.Element;
 //# sourceMappingURL=TableLayout.d.ts.map

package/dist/layouts/TableLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TableLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI5D,mEAAmE;AACnE,wBAAgB,gBAAgB,CAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,EAAE,UAAU,GACnB,WAAW,GAAG,YAAY,GAAG,IAAI,CAMnC;AASD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAiHjB"}
+{"version":3,"file":"TableLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TableLayout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI5D,mEAAmE;AACnE,wBAAgB,gBAAgB,CAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,EAAE,UAAU,GACnB,WAAW,GAAG,YAAY,GAAG,IAAI,CAMnC;AAyBD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,UAAU,GACb,EAAE,eAAe,+BA8IjB"}

package/dist/layouts/TableLayout.js

@@ -1,11 +1,12 @@
 import { messages } from "../messages.js";
 import { ItemTitle } from "./ItemTitle.js";
+import { RowActionsFit, fitContent, useRowActionsFit } from "../actions/fit.js";
 import { cx } from "../cx.js";
 import TableLayout_module_default from "./TableLayout.module.js";
 import { c } from "react/compiler-runtime";
 import { Checkbox, Icon, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ImageOff } from "lucide-react";
 //#region src/layouts/TableLayout.tsx
 /** The sort direction of a column, from the first `sort` value. */
 function getSortDirection(sort, column) {
@@ -18,12 +19,39 @@ function alignClass(column) {
 	return column.align === "end" ? TableLayout_module_default.end : void 0;
 }
 /**
-* Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a
-* block that shows the label of each value.
+* The thumbnail of an item, before its title (decision 0061): a square of its image, loaded when it
+* comes into view, or a placeholder. It has no text: the title is next to it.
+*/
+function Thumbnail(t0) {
+	const $ = c(2);
+	const { url } = t0;
+	let t1;
+	if ($[0] !== url) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			className: TableLayout_module_default.thumbnail,
+			children: url !== null ? /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: "",
+				loading: "lazy",
+				decoding: "async"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				icon: ImageOff,
+				size: "sm"
+			})
+		});
+		$[0] = url;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Items as a table, with sortable column headers. With the image of items (`getItemImage`), each
+* title starts with a thumbnail. On narrow lists (phones), each row turns into a block that shows
+* the label of each value.
 */
 function TableLayout(t0) {
-	const $ = c(52);
-	const { items, columns, renderValue, getItemLabel, getItemHref, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection } = t0;
+	const $ = c(67);
+	const { items, columns, renderValue, getItemLabel, getItemHref, getItemImage, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, renderCell } = t0;
 	const intl = usePanneauIntl();
 	let actions;
 	let t1;
@@ -46,20 +74,28 @@ function TableLayout(t0) {
 	}
 	const hasActions = t1;
 	let t2;
-	if ($[6] !== pageSelection || $[7] !== selectable) {
-		t2 = selectable ? /* @__PURE__ */ jsx("th", {
-			className: TableLayout_module_default.check,
-			children: pageSelection
-		}) : null;
-		$[6] = pageSelection;
-		$[7] = selectable;
+	if ($[6] !== columns || $[7] !== items) {
+		t2 = fitContent(items, columns);
+		$[6] = columns;
+		$[7] = items;
 		$[8] = t2;
 	} else t2 = $[8];
+	const [fitLevel, measureList] = useRowActionsFit(t2);
 	let t3;
-	if ($[9] !== columns || $[10] !== onSort || $[11] !== sort) {
-		let t4;
-		if ($[13] !== onSort || $[14] !== sort) {
-			t4 = (column) => {
+	if ($[9] !== pageSelection || $[10] !== selectable) {
+		t3 = selectable ? /* @__PURE__ */ jsx("th", {
+			className: TableLayout_module_default.check,
+			children: pageSelection
+		}) : null;
+		$[9] = pageSelection;
+		$[10] = selectable;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== columns || $[13] !== onSort || $[14] !== sort) {
+		let t5;
+		if ($[16] !== onSort || $[17] !== sort) {
+			t5 = (column) => {
 				const direction = getSortDirection(sort, column);
 				return /* @__PURE__ */ jsx("th", {
 					scope: "col",
@@ -80,50 +116,52 @@ function TableLayout(t0) {
 					}) : column.label ?? column.id
 				}, column.id);
 			};
-			$[13] = onSort;
-			$[14] = sort;
-			$[15] = t4;
-		} else t4 = $[15];
-		t3 = columns.map(t4);
-		$[9] = columns;
-		$[10] = onSort;
-		$[11] = sort;
-		$[12] = t3;
-	} else t3 = $[12];
-	let t4;
-	if ($[16] !== hasActions || $[17] !== intl) {
-		t4 = hasActions ? /* @__PURE__ */ jsx("th", {
+			$[16] = onSort;
+			$[17] = sort;
+			$[18] = t5;
+		} else t5 = $[18];
+		t4 = columns.map(t5);
+		$[12] = columns;
+		$[13] = onSort;
+		$[14] = sort;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[19] !== hasActions || $[20] !== intl) {
+		t5 = hasActions ? /* @__PURE__ */ jsx("th", {
 			className: TableLayout_module_default.actionsCell,
 			children: /* @__PURE__ */ jsx("span", {
 				className: TableLayout_module_default.visuallyHidden,
 				children: intl.formatMessage(messages.actions)
 			})
 		}) : null;
-		$[16] = hasActions;
-		$[17] = intl;
-		$[18] = t4;
-	} else t4 = $[18];
-	let t5;
-	if ($[19] !== t2 || $[20] !== t3 || $[21] !== t4) {
-		t5 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-			t2,
+		$[19] = hasActions;
+		$[20] = intl;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== t3 || $[23] !== t4 || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
 			t3,
-			t4
+			t4,
+			t5
 		] }) });
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t5;
-	} else t5 = $[22];
-	let t6;
-	if ($[23] !== actions || $[24] !== columns || $[25] !== getItemHref || $[26] !== getItemLabel || $[27] !== hasActions || $[28] !== intl || $[29] !== isSelected || $[30] !== items || $[31] !== onToggle || $[32] !== renderValue || $[33] !== selectable) {
-		let t7;
-		if ($[35] !== actions || $[36] !== columns || $[37] !== getItemHref || $[38] !== getItemLabel || $[39] !== hasActions || $[40] !== intl || $[41] !== isSelected || $[42] !== onToggle || $[43] !== renderValue || $[44] !== selectable) {
-			t7 = (item_0, row) => {
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	let t7;
+	if ($[26] !== actions || $[27] !== columns || $[28] !== getItemHref || $[29] !== getItemImage || $[30] !== getItemLabel || $[31] !== hasActions || $[32] !== intl || $[33] !== isCurrent || $[34] !== isSelected || $[35] !== items || $[36] !== onToggle || $[37] !== renderCell || $[38] !== renderValue || $[39] !== selectable) {
+		let t8;
+		if ($[41] !== actions || $[42] !== columns || $[43] !== getItemHref || $[44] !== getItemImage || $[45] !== getItemLabel || $[46] !== hasActions || $[47] !== intl || $[48] !== isCurrent || $[49] !== isSelected || $[50] !== onToggle || $[51] !== renderCell || $[52] !== renderValue || $[53] !== selectable) {
+			t8 = (item_0, row) => {
 				const selected = selectable && isSelected(item_0);
 				const href = getItemHref?.(item_0) ?? null;
+				const current = isCurrent?.(item_0) ?? false;
 				return /* @__PURE__ */ jsxs("tr", {
 					"data-selected": selected || void 0,
+					"data-current": current || void 0,
 					children: [
 						selectable ? /* @__PURE__ */ jsx("td", {
 							className: TableLayout_module_default.check,
@@ -133,16 +171,24 @@ function TableLayout(t0) {
 								onChange: () => onToggle(item_0)
 							})
 						}) : null,
-						columns.map((column_0, index) => /* @__PURE__ */ jsxs("td", {
-							className: cx(alignClass(column_0), index === 0 && TableLayout_module_default.title),
-							children: [/* @__PURE__ */ jsx("span", {
-								className: TableLayout_module_default.cellLabel,
-								children: column_0.label ?? column_0.id
-							}), /* @__PURE__ */ jsx("span", { children: index === 0 ? /* @__PURE__ */ jsx(ItemTitle, {
+						columns.map((column_0, index) => {
+							const content = index === 0 ? /* @__PURE__ */ jsx(ItemTitle, {
 								href,
+								current,
 								children: renderValue(item_0, column_0)
-							}) : renderValue(item_0, column_0) })]
-						}, column_0.id)),
+							}) : renderValue(item_0, column_0);
+							const cell = /* @__PURE__ */ jsx("span", { children: renderCell !== void 0 ? renderCell(item_0, column_0, content) : content });
+							return /* @__PURE__ */ jsxs("td", {
+								className: cx(alignClass(column_0), index === 0 && TableLayout_module_default.title),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: TableLayout_module_default.cellLabel,
+									children: column_0.label ?? column_0.id
+								}), index === 0 && getItemImage !== void 0 ? /* @__PURE__ */ jsxs("span", {
+									className: TableLayout_module_default.withThumbnail,
+									children: [/* @__PURE__ */ jsx(Thumbnail, { url: getItemImage(item_0) }), cell]
+								}) : cell]
+							}, column_0.id);
+						}),
 						hasActions ? /* @__PURE__ */ jsx("td", {
 							className: TableLayout_module_default.actionsCell,
 							children: actions[row]
@@ -150,54 +196,78 @@ function TableLayout(t0) {
 					]
 				}, item_0.id);
 			};
-			$[35] = actions;
-			$[36] = columns;
-			$[37] = getItemHref;
-			$[38] = getItemLabel;
-			$[39] = hasActions;
-			$[40] = intl;
-			$[41] = isSelected;
-			$[42] = onToggle;
-			$[43] = renderValue;
-			$[44] = selectable;
-			$[45] = t7;
-		} else t7 = $[45];
-		t6 = items.map(t7);
-		$[23] = actions;
-		$[24] = columns;
-		$[25] = getItemHref;
-		$[26] = getItemLabel;
-		$[27] = hasActions;
-		$[28] = intl;
-		$[29] = isSelected;
-		$[30] = items;
-		$[31] = onToggle;
-		$[32] = renderValue;
-		$[33] = selectable;
-		$[34] = t6;
-	} else t6 = $[34];
-	let t7;
-	if ($[46] !== t6) {
-		t7 = /* @__PURE__ */ jsx("tbody", { children: t6 });
-		$[46] = t6;
-		$[47] = t7;
-	} else t7 = $[47];
+			$[41] = actions;
+			$[42] = columns;
+			$[43] = getItemHref;
+			$[44] = getItemImage;
+			$[45] = getItemLabel;
+			$[46] = hasActions;
+			$[47] = intl;
+			$[48] = isCurrent;
+			$[49] = isSelected;
+			$[50] = onToggle;
+			$[51] = renderCell;
+			$[52] = renderValue;
+			$[53] = selectable;
+			$[54] = t8;
+		} else t8 = $[54];
+		t7 = items.map(t8);
+		$[26] = actions;
+		$[27] = columns;
+		$[28] = getItemHref;
+		$[29] = getItemImage;
+		$[30] = getItemLabel;
+		$[31] = hasActions;
+		$[32] = intl;
+		$[33] = isCurrent;
+		$[34] = isSelected;
+		$[35] = items;
+		$[36] = onToggle;
+		$[37] = renderCell;
+		$[38] = renderValue;
+		$[39] = selectable;
+		$[40] = t7;
+	} else t7 = $[40];
 	let t8;
-	if ($[48] !== label || $[49] !== t5 || $[50] !== t7) {
-		t8 = /* @__PURE__ */ jsx("div", {
+	if ($[55] !== t7) {
+		t8 = /* @__PURE__ */ jsx("tbody", { children: t7 });
+		$[55] = t7;
+		$[56] = t8;
+	} else t8 = $[56];
+	let t9;
+	if ($[57] !== label || $[58] !== t6 || $[59] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("table", {
+			className: TableLayout_module_default.table,
+			"aria-label": label,
+			children: [t6, t8]
+		});
+		$[57] = label;
+		$[58] = t6;
+		$[59] = t8;
+		$[60] = t9;
+	} else t9 = $[60];
+	let t10;
+	if ($[61] !== measureList || $[62] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
 			className: TableLayout_module_default.scroller,
-			children: /* @__PURE__ */ jsxs("table", {
-				className: TableLayout_module_default.table,
-				"aria-label": label,
-				children: [t5, t7]
-			})
+			ref: measureList,
+			children: t9
+		});
+		$[61] = measureList;
+		$[62] = t9;
+		$[63] = t10;
+	} else t10 = $[63];
+	let t11;
+	if ($[64] !== fitLevel || $[65] !== t10) {
+		t11 = /* @__PURE__ */ jsx(RowActionsFit, {
+			value: fitLevel,
+			children: t10
 		});
-		$[48] = label;
-		$[49] = t5;
-		$[50] = t7;
-		$[51] = t8;
-	} else t8 = $[51];
-	return t8;
+		$[64] = fitLevel;
+		$[65] = t10;
+		$[66] = t11;
+	} else t11 = $[66];
+	return t11;
 }
 function _temp(node) {
 	return node !== null;

package/dist/layouts/TableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.js","names":["pageSelection","item","selected","column","href","label","styles","_c"],"sources":["../../src/layouts/TableLayout.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport { messages } from '../messages';\nimport type { ListColumn, ListLayoutProps } from '../types';\nimport { ItemTitle } from './ItemTitle';\nimport styles from './TableLayout.module.css';\n\n/** The sort direction of a column, from the first `sort` value. */\nexport function getSortDirection(\n    sort: readonly string[],\n    column: ListColumn,\n): 'ascending' | 'descending' | null {\n    const first = sort[0];\n    if (first === column.id) {\n        return 'ascending';\n    }\n    return first === `-${column.id}` ? 'descending' : null;\n}\n\nfunction alignClass(column: ListColumn): string | undefined {\n    if (column.align === 'center') {\n        return styles.center;\n    }\n    return column.align === 'end' ? styles.end : undefined;\n}\n\n/**\n * Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a\n * block that shows the label of each value.\n */\nexport function TableLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    sort,\n    onSort,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const actions = items.map((item) => renderActions(item));\n    const hasActions = actions.some((node) => node !== null);\n    return (\n        <div className={styles.scroller}>\n            <table className={styles.table} aria-label={label}>\n                <thead>\n                    <tr>\n                        {selectable ? <th className={styles.check}>{pageSelection}</th> : null}\n                        {columns.map((column) => {\n                            const direction = getSortDirection(sort, column);\n                            return (\n                                <th\n                                    key={column.id}\n                                    scope=\"col\"\n                                    className={alignClass(column)}\n                                    style={\n                                        column.width !== undefined\n                                            ? { width: column.width }\n                                            : undefined\n                                    }\n                                    aria-sort={\n                                        column.sortable === true ? (direction ?? 'none') : undefined\n                                    }\n                                >\n                                    {column.sortable === true ? (\n                                        <button\n                                            type=\"button\"\n                                            className={cx(\n                                                styles.sort,\n                                                direction !== null && styles.sorted,\n                                            )}\n                                            onClick={() => onSort(column)}\n                                        >\n                                            {column.label ?? column.id}\n                                            <span className={styles.sortIcon}>\n                                                <Icon\n                                                    icon={\n                                                        direction === 'ascending'\n                                                            ? ArrowUp\n                                                            : direction === 'descending'\n                                                              ? ArrowDown\n                                                              : ArrowUpDown\n                                                    }\n                                                    size=\"sm\"\n                                                />\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        (column.label ?? column.id)\n                                    )}\n                                </th>\n                            );\n                        })}\n                        {hasActions ? (\n                            <th className={styles.actionsCell}>\n                                <span className={styles.visuallyHidden}>\n                                    {intl.formatMessage(messages.actions)}\n                                </span>\n                            </th>\n                        ) : null}\n                    </tr>\n                </thead>\n                <tbody>\n                    {items.map((item, row) => {\n                        const selected = selectable && isSelected(item);\n                        const href = getItemHref?.(item) ?? null;\n                        return (\n                            <tr key={item.id} data-selected={selected || undefined}>\n                                {selectable ? (\n                                    <td className={styles.check}>\n                                        <Checkbox\n                                            aria-label={intl.formatMessage(messages.selectItem, {\n                                                item: getItemLabel(item),\n                                            })}\n                                            isSelected={selected}\n                                            onChange={() => onToggle(item)}\n                                        />\n                                    </td>\n                                ) : null}\n                                {columns.map((column, index) => (\n                                    <td\n                                        key={column.id}\n                                        className={cx(\n                                            alignClass(column),\n                                            index === 0 && styles.title,\n                                        )}\n                                    >\n                                        <span className={styles.cellLabel}>\n                                            {column.label ?? column.id}\n                                        </span>\n                                        <span>\n                                            {index === 0 ? (\n                                                <ItemTitle href={href}>\n                                                    {renderValue(item, column)}\n                                                </ItemTitle>\n                                            ) : (\n                                                renderValue(item, column)\n                                            )}\n                                        </span>\n                                    </td>\n                                ))}\n                                {hasActions ? (\n                                    <td className={styles.actionsCell}>{actions[row]}</td>\n                                ) : null}\n                            </tr>\n                        );\n                    })}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,iBACZ,MACA,QACiC;CACjC,MAAM,QAAQ,KAAK;CACnB,IAAI,UAAU,OAAO,IACjB,OAAO;CAEX,OAAO,UAAU,IAAI,OAAO,OAAO,eAAe;AACtD;AAEA,SAAS,WAAW,QAAwC;CACxD,IAAI,OAAO,UAAU,UACjB,OAAOM,2BAAO;CAElB,OAAO,OAAO,UAAU,QAAQA,2BAAO,MAAM,KAAA;AACjD;;;;;AAMA,SAAO,YAAA,IAAA;CAAA,MAAA,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAA,OAAA,SAAA,aAAA,cAAA,aAAA,YAAA,YAAA,UAAA,eAAA,MAAA,QAAA,OAAA,kBAAA;CAexB,MAAA,OAAa,eAAe;CAAE,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,eAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,eAAA;GACJ,MAAA,SAAU,cAAc,IAAI;GAAC,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAAvD,UAAgB,MAAK,IAAK,EAA6B;EACpC,KAAA,QAAO,KAAM,KAAuB;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,UAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAxD,MAAA,aAAmB;CAAsC,IAAA;CAAA,IAAA,EAAA,OAAA,iBAAA,EAAA,OAAA,YAAA;EAMpC,KAAA,aAAa,oBAAA,MAAA;GAAe,WAAAD,2BAAM;GAAS,UAAA;EAAmB,CAAA,IAA9D;EAAqE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,QAAA,UAAA,EAAA,QAAA,MAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,MAAA;GACzD,MAAA,WAAA;IACT,MAAA,YAAkB,iBAAiB,MAAM,MAAM;IAAE,OAE7C,oBAAA,MAAA;KAEU,OAAA;KACK,WAAA,WAAW,MAAM;KAExB,OAAA,OAAM,UAAW,KAAA,IAAjB,EAAA,OACe,OAAM,MACP,IAFd,KAAA;KAKA,aAAA,OAAM,aAAc,OAAQ,aAAA,SAA5B,KAAA;KAGH,UAAA,OAAM,aAAc,OACjB,qBAAA,UAAA;MACS,MAAA;MACM,WAAA,GACPA,2BAAM,MACN,cAAc,QAAQA,2BAAM,MAChC;MACS,eAAM,OAAO,MAAM;MANhC,UAAA,CAQK,OAAM,SAAU,OAAM,IACvB,oBAAA,QAAA;OAAiB,WAAAA,2BAAM;OACnB,UAAA,oBAAC,MAAD;QAEQ,MAAA,cAAc,cAAd,UAEM,cAAc,eAAd,YAAA;QAIL,MAAA;OAAI,CAAA;MAEV,CAAA,CACF;KAER,CAAA,IAAA,OAAM,SAAU,OAAM;IAE1B,GAtCI,OAAM,EAsCV;GAAA;GAEZ,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EA5CA,KAAA,QAAO,IAAK,EA4CZ;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,cAAA,EAAA,QAAA,MAAA;EACD,KAAA,aACG,oBAAA,MAAA;GAAe,WAAAA,2BAAM;GACjB,UAAA,oBAAA,QAAA;IAAiB,WAAAA,2BAAM;IAClB,UAAA,KAAI,cAAe,SAAQ,OAAQ;GACjC,CAAA;EACN,CAAA,IALR;EAMO,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAtDhB,KAAA,oBAAA,SAAA,EAAA,UACI,qBAAA,MAAA,EAAA,UAAA;GACK;GACA;GA6CA;EAOA,EAAA,CAAA,EACD,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,WAAA,EAAA,QAAA,WAAA,EAAA,QAAA,eAAA,EAAA,QAAA,gBAAA,EAAA,QAAA,cAAA,EAAA,QAAA,QAAA,EAAA,QAAA,cAAA,EAAA,QAAA,SAAA,EAAA,QAAA,YAAA,EAAA,QAAA,eAAA,EAAA,QAAA,YAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,WAAA,EAAA,QAAA,WAAA,EAAA,QAAA,eAAA,EAAA,QAAA,gBAAA,EAAA,QAAA,cAAA,EAAA,QAAA,QAAA,EAAA,QAAA,cAAA,EAAA,QAAA,YAAA,EAAA,QAAA,eAAA,EAAA,QAAA,YAAA;GAEO,MAAA,QAAA,QAAA;IACP,MAAA,WAAiB,cAAc,WAAWL,MAAI;IAC9C,MAAA,OAAa,cAAcA,MAAY,KAA1B;IAA4B,OAErC,qBAAA,MAAA;KAAiC,iBAAA,YAAA,KAAA;KAAjC,UAAA;MACK,aACG,oBAAA,MAAA;OAAe,WAAAK,2BAAM;OACjB,UAAA,oBAAC,UAAD;QACgB,cAAA,KAAI,cAAe,SAAQ,YAAa,EAAA,MAC1C,aAAaL,MAAI,EAC3B,CAAC;QACWC,YAAA;QACF,gBAAM,SAASD,MAAI;OAAC,CAAA;MAEjC,CAAA,IATR;MAWA,QAAO,KAAK,UAAA,UACT,qBAAA,MAAA;OAEe,WAAA,GACP,WAAWE,QAAM,GACjB,UAAU,KAAKG,2BAAM,KACzB;OALJ,UAAA,CAOI,oBAAA,QAAA;QAAiB,WAAAA,2BAAM;QAClBH,UAAAA,SAAM,SAAUA,SAAM;OACpB,CAAA,GACP,oBAAA,QAAA,EAAA,UACK,UAAU,IACP,oBAAC,WAAD;QAAiB;QACZ,UAAA,YAAYF,QAAME,QAAM;OADnB,CAAA,IAIV,YAAYF,QAAME,QACtB,EACG,CAAA,CACN;MAlBIA,GAAAA,SAAM,EAkBV,CACR;MACA,aACG,oBAAA,MAAA;OAAe,WAAAG,2BAAM;OAAe,UAAA,QAAQ;MAAU,CAAA,IADzD;KAGA;IArCIL,GAAAA,OAAI,EAqCR;GAAA;GAEZ,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EA3CA,KAAA,MAAK,IAAK,EA2CV;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,IAAA;EA5CN,KAAA,oBAAA,SAAA,EAAA,UACK,GA4CG,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,SAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAxGhB,KAAA,oBAAA,OAAA;GAAgB,WAAAK,2BAAM;GAClB,UAAA,qBAAA,SAAA;IAAkB,WAAAA,2BAAM;IAAoBD,cAAA;IAA5C,UAAA,CACI,IAyDA,EA8CI;;EACN,CAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OA1GN;AA0GM;AA7HP,SAAA,MAAA,MAAA;CAAA,OAiBuC,SAAS;AAAI"}
+{"version":3,"file":"TableLayout.js","names":["ArrowDown","ArrowUp","ArrowUpDown","ImageOff","Checkbox","Icon","usePanneauIntl","RowActionsFit","fitContent","useRowActionsFit","cx","messages","ListColumn","ListLayoutProps","ItemTitle","styles","getSortDirection","sort","column","first","id","alignClass","align","center","end","undefined","Thumbnail","t0","$","_c","url","t1","thumbnail","TableLayout","items","columns","renderValue","getItemLabel","getItemHref","getItemImage","isCurrent","selectable","isSelected","onToggle","renderActions","onSort","label","pageSelection","renderCell","intl","actions","t2","item","map","some","_temp","hasActions","fitLevel","measureList","t3","check","t4","t5","direction","width","sortable","sorted","sortIcon","actionsCell","visuallyHidden","formatMessage","t6","t7","t8","item_0","row","selected","href","current","selectItem","column_0","index","content","cell","title","cellLabel","withThumbnail","t9","table","t10","scroller","t11","node","styles","_c"],"sources":["../../src/layouts/TableLayout.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown, ImageOff } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { RowActionsFit, fitContent, useRowActionsFit } from '../actions/fit';\nimport { cx } from '../cx';\nimport { messages } from '../messages';\nimport type { ListColumn, ListLayoutProps } from '../types';\nimport { ItemTitle } from './ItemTitle';\nimport styles from './TableLayout.module.css';\n\n/** The sort direction of a column, from the first `sort` value. */\nexport function getSortDirection(\n    sort: readonly string[],\n    column: ListColumn,\n): 'ascending' | 'descending' | null {\n    const first = sort[0];\n    if (first === column.id) {\n        return 'ascending';\n    }\n    return first === `-${column.id}` ? 'descending' : null;\n}\n\nfunction alignClass(column: ListColumn): string | undefined {\n    if (column.align === 'center') {\n        return styles.center;\n    }\n    return column.align === 'end' ? styles.end : undefined;\n}\n\n/**\n * The thumbnail of an item, before its title (decision 0061): a square of its image, loaded when it\n * comes into view, or a placeholder. It has no text: the title is next to it.\n */\nfunction Thumbnail({ url }: { url: string | null }) {\n    return (\n        <span className={styles.thumbnail}>\n            {url !== null ? (\n                <img src={url} alt=\"\" loading=\"lazy\" decoding=\"async\" />\n            ) : (\n                <Icon icon={ImageOff} size=\"sm\" />\n            )}\n        </span>\n    );\n}\n\n/**\n * Items as a table, with sortable column headers. With the image of items (`getItemImage`), each\n * title starts with a thumbnail. On narrow lists (phones), each row turns into a block that shows\n * the label of each value.\n */\nexport function TableLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    getItemImage,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    sort,\n    onSort,\n    label,\n    pageSelection,\n    renderCell,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const actions = items.map((item) => renderActions(item));\n    const hasActions = actions.some((node) => node !== null);\n    const [fitLevel, measureList] = useRowActionsFit(fitContent(items, columns));\n    return (\n        <RowActionsFit value={fitLevel}>\n            <div className={styles.scroller} ref={measureList}>\n                <table className={styles.table} aria-label={label}>\n                    <thead>\n                        <tr>\n                            {selectable ? <th className={styles.check}>{pageSelection}</th> : null}\n                            {columns.map((column) => {\n                                const direction = getSortDirection(sort, column);\n                                return (\n                                    <th\n                                        key={column.id}\n                                        scope=\"col\"\n                                        className={alignClass(column)}\n                                        style={\n                                            column.width !== undefined\n                                                ? { width: column.width }\n                                                : undefined\n                                        }\n                                        aria-sort={\n                                            column.sortable === true\n                                                ? (direction ?? 'none')\n                                                : undefined\n                                        }\n                                    >\n                                        {column.sortable === true ? (\n                                            <button\n                                                type=\"button\"\n                                                className={cx(\n                                                    styles.sort,\n                                                    direction !== null && styles.sorted,\n                                                )}\n                                                onClick={() => onSort(column)}\n                                            >\n                                                {column.label ?? column.id}\n                                                <span className={styles.sortIcon}>\n                                                    <Icon\n                                                        icon={\n                                                            direction === 'ascending'\n                                                                ? ArrowUp\n                                                                : direction === 'descending'\n                                                                  ? ArrowDown\n                                                                  : ArrowUpDown\n                                                        }\n                                                        size=\"sm\"\n                                                    />\n                                                </span>\n                                            </button>\n                                        ) : (\n                                            (column.label ?? column.id)\n                                        )}\n                                    </th>\n                                );\n                            })}\n                            {hasActions ? (\n                                <th className={styles.actionsCell}>\n                                    <span className={styles.visuallyHidden}>\n                                        {intl.formatMessage(messages.actions)}\n                                    </span>\n                                </th>\n                            ) : null}\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {items.map((item, row) => {\n                            const selected = selectable && isSelected(item);\n                            const href = getItemHref?.(item) ?? null;\n                            const current = isCurrent?.(item) ?? false;\n                            return (\n                                <tr\n                                    key={item.id}\n                                    data-selected={selected || undefined}\n                                    data-current={current || undefined}\n                                >\n                                    {selectable ? (\n                                        <td className={styles.check}>\n                                            <Checkbox\n                                                aria-label={intl.formatMessage(\n                                                    messages.selectItem,\n                                                    {\n                                                        item: getItemLabel(item),\n                                                    },\n                                                )}\n                                                isSelected={selected}\n                                                onChange={() => onToggle(item)}\n                                            />\n                                        </td>\n                                    ) : null}\n                                    {columns.map((column, index) => {\n                                        const content =\n                                            index === 0 ? (\n                                                <ItemTitle href={href} current={current}>\n                                                    {renderValue(item, column)}\n                                                </ItemTitle>\n                                            ) : (\n                                                renderValue(item, column)\n                                            );\n                                        const cell = (\n                                            <span>\n                                                {renderCell !== undefined\n                                                    ? renderCell(item, column, content)\n                                                    : content}\n                                            </span>\n                                        );\n                                        return (\n                                            <td\n                                                key={column.id}\n                                                className={cx(\n                                                    alignClass(column),\n                                                    index === 0 && styles.title,\n                                                )}\n                                            >\n                                                <span className={styles.cellLabel}>\n                                                    {column.label ?? column.id}\n                                                </span>\n                                                {index === 0 && getItemImage !== undefined ? (\n                                                    <span className={styles.withThumbnail}>\n                                                        <Thumbnail url={getItemImage(item)} />\n                                                        {cell}\n                                                    </span>\n                                                ) : (\n                                                    cell\n                                                )}\n                                            </td>\n                                        );\n                                    })}\n                                    {hasActions ? (\n                                        <td className={styles.actionsCell}>{actions[row]}</td>\n                                    ) : null}\n                                </tr>\n                            );\n                        })}\n                    </tbody>\n                </table>\n            </div>\n        </RowActionsFit>\n    );\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgBgB,iBACZC,MACAC,QACiC;CACjC,MAAMC,QAAQF,KAAK;CACnB,IAAIE,UAAUD,OAAOE,IACjB,OAAO;CAEX,OAAOD,UAAU,IAAID,OAAOE,OAAO,eAAe;AACtD;AAEA,SAASC,WAAWH,QAAwC;CACxD,IAAIA,OAAOI,UAAU,UACjB,OAAOP,2BAAOQ;CAElB,OAAOL,OAAOI,UAAU,QAAQP,2BAAOS,MAAMC,KAAAA;AACjD;;;;;AAMA,SAAAC,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAmB,MAAA,EAAAC,QAAAH;CAA+B,IAAAI;CAAA,IAAAH,EAAA,OAAAE,KAAA;EAE1CC,KAAA,oBAAA,QAAA;GAAiB,WAAAhB,2BAAMiB;GAClBF,UAAAA,QAAQ,OACL,oBAAA,OAAA;IAAUA,KAAAA;IAAS,KAAA;IAAW,SAAA;IAAgB,UAAA;GAAO,CAAA,IAErD,oBAAC,MAAD;IAAY3B,MAAAA;IAAe,MAAA;GAAI,CAAA;EAEhC,CAAA;EAAAyB,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OANPG;AAMO;;;;;;AASf,SAAOE,YAAAN,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAK,OAAAC,SAAAC,aAAAC,cAAAC,aAAAC,cAAAC,WAAAC,YAAAC,YAAAC,UAAAC,eAAA3B,MAAA4B,QAAAC,OAAAC,eAAAC,eAAArB;CAkBxB,MAAAsB,OAAa3C,eAAe;CAAE,IAAA4C;CAAA,IAAAnB;CAAA,IAAAH,EAAA,OAAAM,SAAAN,EAAA,OAAAgB,eAAA;EAAA,IAAAO;EAAA,IAAAvB,EAAA,OAAAgB,eAAA;GACJO,MAAAC,SAAUR,cAAcQ,IAAI;GAACxB,EAAA,KAAAgB;GAAAhB,EAAA,KAAAuB;EAAA,OAAAA,KAAAvB,EAAA;EAAvDsB,UAAgBhB,MAAKmB,IAAKF,EAA6B;EACpCpB,KAAAmB,QAAOI,KAAMC,KAAuB;EAAC3B,EAAA,KAAAM;EAAAN,EAAA,KAAAgB;EAAAhB,EAAA,KAAAsB;EAAAtB,EAAA,KAAAG;CAAA,OAAA;EAAAmB,UAAAtB,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAAxD,MAAA4B,aAAmBzB;CAAsC,IAAAoB;CAAA,IAAAvB,EAAA,OAAAO,WAAAP,EAAA,OAAAM,OAAA;EACRiB,KAAA3C,WAAW0B,OAAOC,OAAO;EAACP,EAAA,KAAAO;EAAAP,EAAA,KAAAM;EAAAN,EAAA,KAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAA3E,MAAA,CAAA6B,UAAAC,eAAgCjD,iBAAiB0C,EAA0B;CAAE,IAAAQ;CAAA,IAAA/B,EAAA,OAAAmB,iBAAAnB,EAAA,QAAAa,YAAA;EAOpDkB,KAAAlB,aAAa,oBAAA,MAAA;GAAe,WAAA1B,2BAAM6C;GAASb,UAAAA;EAAmB,CAAA,IAA9D;EAAqEnB,EAAA,KAAAmB;EAAAnB,EAAA,MAAAa;EAAAb,EAAA,MAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAO,WAAAP,EAAA,QAAAiB,UAAAjB,EAAA,QAAAX,MAAA;EAAA,IAAA6C;EAAA,IAAAlC,EAAA,QAAAiB,UAAAjB,EAAA,QAAAX,MAAA;GACzD6C,MAAA5C,WAAA;IACT,MAAA6C,YAAkB/C,iBAAiBC,MAAMC,MAAM;IAAE,OAE7C,oBAAA,MAAA;KAEU,OAAA;KACK,WAAAG,WAAWH,MAAM;KAExB,OAAAA,OAAM8C,UAAWvC,KAAAA,IAAjB,EAAAuC,OACe9C,OAAM8C,MACP,IAFdvC,KAAAA;KAKA,aAAAP,OAAM+C,aAAc,OACbF,aAAA,SADPtC,KAAAA;KAKHP,UAAAA,OAAM+C,aAAc,OACjB,qBAAA,UAAA;MACS,MAAA;MACM,WAAAvD,GACPK,2BAAME,MACN8C,cAAc,QAAQhD,2BAAMmD,MAChC;MACS,eAAMrB,OAAO3B,MAAM;MANhC,UAAA,CAQKA,OAAM4B,SAAU5B,OAAME,IACvB,oBAAA,QAAA;OAAiB,WAAAL,2BAAMoD;OACnB,UAAA,oBAAC,MAAD;QAEQ,MAAAJ,cAAc,cAAd9D,UAEM8D,cAAc,eAAd/D,YAAAE;QAIL,MAAA;OAAI,CAAA;MAEV,CAAA,CACF;KAERgB,CAAAA,IAAAA,OAAM4B,SAAU5B,OAAME;IAE1B,GAxCIF,OAAME,EAwCV;GAAA;GAEZQ,EAAA,MAAAiB;GAAAjB,EAAA,MAAAX;GAAAW,EAAA,MAAAkC;EAAA,OAAAA,KAAAlC,EAAA;EA9CAiC,KAAA1B,QAAOkB,IAAKS,EA8CZ;EAAClC,EAAA,MAAAO;EAAAP,EAAA,MAAAiB;EAAAjB,EAAA,MAAAX;EAAAW,EAAA,MAAAiC;CAAA,OAAAA,KAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAA4B,cAAA5B,EAAA,QAAAqB,MAAA;EACDa,KAAAN,aACG,oBAAA,MAAA;GAAe,WAAAzC,2BAAMqD;GACjB,UAAA,oBAAA,QAAA;IAAiB,WAAArD,2BAAMsD;IAClBpB,UAAAA,KAAIqB,cAAe3D,SAAQuC,OAAQ;GACjC,CAAA;EACN,CAAA,IALR;EAMOtB,EAAA,MAAA4B;EAAA5B,EAAA,MAAAqB;EAAArB,EAAA,MAAAkC;CAAA,OAAAA,KAAAlC,EAAA;CAAA,IAAA2C;CAAA,IAAA3C,EAAA,QAAA+B,MAAA/B,EAAA,QAAAiC,MAAAjC,EAAA,QAAAkC,IAAA;EAxDhBS,KAAA,oBAAA,SAAA,EAAA,UACI,qBAAA,MAAA,EAAA,UAAA;GACKZ;GACAE;GA+CAC;EAOA,EAAA,CAAA,EACD,CAAA;EAAAlC,EAAA,MAAA+B;EAAA/B,EAAA,MAAAiC;EAAAjC,EAAA,MAAAkC;EAAAlC,EAAA,MAAA2C;CAAA,OAAAA,KAAA3C,EAAA;CAAA,IAAA4C;CAAA,IAAA5C,EAAA,QAAAsB,WAAAtB,EAAA,QAAAO,WAAAP,EAAA,QAAAU,eAAAV,EAAA,QAAAW,gBAAAX,EAAA,QAAAS,gBAAAT,EAAA,QAAA4B,cAAA5B,EAAA,QAAAqB,QAAArB,EAAA,QAAAY,aAAAZ,EAAA,QAAAc,cAAAd,EAAA,QAAAM,SAAAN,EAAA,QAAAe,YAAAf,EAAA,QAAAoB,cAAApB,EAAA,QAAAQ,eAAAR,EAAA,QAAAa,YAAA;EAAA,IAAAgC;EAAA,IAAA7C,EAAA,QAAAsB,WAAAtB,EAAA,QAAAO,WAAAP,EAAA,QAAAU,eAAAV,EAAA,QAAAW,gBAAAX,EAAA,QAAAS,gBAAAT,EAAA,QAAA4B,cAAA5B,EAAA,QAAAqB,QAAArB,EAAA,QAAAY,aAAAZ,EAAA,QAAAc,cAAAd,EAAA,QAAAe,YAAAf,EAAA,QAAAoB,cAAApB,EAAA,QAAAQ,eAAAR,EAAA,QAAAa,YAAA;GAEOgC,MAAAC,QAAAC,QAAA;IACP,MAAAC,WAAiBnC,cAAcC,WAAWU,MAAI;IAC9C,MAAAyB,OAAavC,cAAcc,MAAY,KAA1B;IACb,MAAA0B,UAAgBtC,YAAYY,MAAa,KAAzB;IAA2B,OAEvC,qBAAA,MAAA;KAEmB,iBAAAwB,YAAAnD,KAAAA;KACD,gBAAAqD,WAAArD,KAAAA;KAHlB,UAAA;MAKKgB,aACG,oBAAA,MAAA;OAAe,WAAA1B,2BAAM6C;OACjB,UAAA,oBAAC,UAAD;QACgB,cAAAX,KAAIqB,cACZ3D,SAAQoE,YACR,EAAA3B,MACUf,aAAae,MAAI,EAC3B,CACJ;QACYwB,YAAAA;QACF,gBAAMjC,SAASS,MAAI;OAAC,CAAA;MAEjC,CAAA,IAZR;MAcAjB,QAAOkB,KAAK2B,UAAAC,UAAA;OACT,MAAAC,UACID,UAAU,IACN,oBAAC,WAAD;QAAiBJ;QAAeC;QAC3B1C,UAAAA,YAAYgB,QAAMlC,QAAM;OADnB,CAAA,IAIVkB,YAAYgB,QAAMlC,QACtB;OACJ,MAAAiE,OACI,oBAAA,QAAA,EAAA,UACKnC,eAAevB,KAAAA,IACVuB,WAAWI,QAAMlC,UAAQgE,OACnB,IAFXA,QAGE,CAAA;OACT,OAEE,qBAAA,MAAA;QAEe,WAAAxE,GACPW,WAAWH,QAAM,GACjB+D,UAAU,KAAKlE,2BAAMqE,KACzB;QALJ,UAAA,CAOI,oBAAA,QAAA;SAAiB,WAAArE,2BAAMsE;SAClBnE,UAAAA,SAAM4B,SAAU5B,SAAME;QACpB,CAAA,GACN6D,UAAU,KAAK1C,iBAAiBd,KAAAA,IAC7B,qBAAA,QAAA;SAAiB,WAAAV,2BAAMuE;SAAvB,UAAA,CACI,oBAAC,WAAD,EAAgB,KAAA/C,aAAaa,MAAI,EAAC,CAAA,GACjC+B,IACE;QAJVA,CAAAA,IAAAA,IAQA;OAjBIjE,GAAAA,SAAME,EAiBV;MAAA,CAEZ;MACAoC,aACG,oBAAA,MAAA;OAAe,WAAAzC,2BAAMqD;OAAelB,UAAAA,QAAQyB;MAAU,CAAA,IADzD;KAGA;IA3DIvB,GAAAA,OAAIhC,EA2DR;GAAA;GAEZQ,EAAA,MAAAsB;GAAAtB,EAAA,MAAAO;GAAAP,EAAA,MAAAU;GAAAV,EAAA,MAAAW;GAAAX,EAAA,MAAAS;GAAAT,EAAA,MAAA4B;GAAA5B,EAAA,MAAAqB;GAAArB,EAAA,MAAAY;GAAAZ,EAAA,MAAAc;GAAAd,EAAA,MAAAe;GAAAf,EAAA,MAAAoB;GAAApB,EAAA,MAAAQ;GAAAR,EAAA,MAAAa;GAAAb,EAAA,MAAA6C;EAAA,OAAAA,KAAA7C,EAAA;EAnEA4C,KAAAtC,MAAKmB,IAAKoB,EAmEV;EAAC7C,EAAA,MAAAsB;EAAAtB,EAAA,MAAAO;EAAAP,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAS;EAAAT,EAAA,MAAA4B;EAAA5B,EAAA,MAAAqB;EAAArB,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;EAAAd,EAAA,MAAAM;EAAAN,EAAA,MAAAe;EAAAf,EAAA,MAAAoB;EAAApB,EAAA,MAAAQ;EAAAR,EAAA,MAAAa;EAAAb,EAAA,MAAA4C;CAAA,OAAAA,KAAA5C,EAAA;CAAA,IAAA6C;CAAA,IAAA7C,EAAA,QAAA4C,IAAA;EApENC,KAAA,oBAAA,SAAA,EAAA,UACKD,GAoEG,CAAA;EAAA5C,EAAA,MAAA4C;EAAA5C,EAAA,MAAA6C;CAAA,OAAAA,KAAA7C,EAAA;CAAA,IAAA2D;CAAA,IAAA3D,EAAA,QAAAkB,SAAAlB,EAAA,QAAA2C,MAAA3C,EAAA,QAAA6C,IAAA;EAjIZc,KAAA,qBAAA,SAAA;GAAkB,WAAAxE,2BAAMyE;GAAoB1C,cAAAA;GAA5C,UAAA,CACIyB,IA2DAE,EAsEI;;EAAA7C,EAAA,MAAAkB;EAAAlB,EAAA,MAAA2C;EAAA3C,EAAA,MAAA6C;EAAA7C,EAAA,MAAA2D;CAAA,OAAAA,KAAA3D,EAAA;CAAA,IAAA6D;CAAA,IAAA7D,EAAA,QAAA8B,eAAA9B,EAAA,QAAA2D,IAAA;EAnIZE,MAAA,oBAAA,OAAA;GAAgB,WAAA1E,2BAAM2E;GAAgBhC,KAAAA;GAClC6B,UAAAA;EAmIE,CAAA;EAAA3D,EAAA,MAAA8B;EAAA9B,EAAA,MAAA2D;EAAA3D,EAAA,MAAA6D;CAAA,OAAAA,MAAA7D,EAAA;CAAA,IAAA+D;CAAA,IAAA/D,EAAA,QAAA6B,YAAA7B,EAAA,QAAA6D,KAAA;EArIVE,MAAA,oBAAC,eAAD;GAAsBlC,OAAAA;GAClBgC,UAAAA;EADU,CAAA;EAsIE7D,EAAA,MAAA6B;EAAA7B,EAAA,MAAA6D;EAAA7D,EAAA,MAAA+D;CAAA,OAAAA,MAAA/D,EAAA;CAAA,OAtIhB+D;AAsIgB;AA7JjB,SAAApC,MAAAqC,MAAA;CAAA,OAoBuCA,SAAS;AAAI"}

package/dist/layouts/TableLayout.module.js

@@ -2,6 +2,9 @@ import "./TableLayout.css";
 //#region src/layouts/TableLayout.module.css
 var scroller = "panneau-table-layout-scroller";
 var table = "panneau-table-layout-table";
+var title = "panneau-table-layout-title";
+var withThumbnail = "panneau-table-layout-with-thumbnail";
+var thumbnail = "panneau-table-layout-thumbnail";
 var center = "panneau-table-layout-center";
 var end = "panneau-table-layout-end";
 var check = "panneau-table-layout-check";
@@ -11,10 +14,12 @@ var sortIcon = "panneau-table-layout-sort-icon";
 var sorted = "panneau-table-layout-sorted";
 var cellLabel = "panneau-table-layout-cell-label";
 var visuallyHidden = "panneau-table-layout-visually-hidden";
-var title = "panneau-table-layout-title";
 var TableLayout_module_default = {
 	scroller,
 	table,
+	title,
+	withThumbnail,
+	thumbnail,
 	center,
 	end,
 	check,
@@ -23,10 +28,9 @@ var TableLayout_module_default = {
 	sortIcon,
 	sorted,
 	cellLabel,
-	visuallyHidden,
-	title
+	visuallyHidden
 };
 //#endregion
-export { actionsCell, cellLabel, center, check, TableLayout_module_default as default, end, scroller, sort, sortIcon, sorted, table, title, visuallyHidden };
+export { actionsCell, cellLabel, center, check, TableLayout_module_default as default, end, scroller, sort, sortIcon, sorted, table, thumbnail, title, visuallyHidden, withThumbnail };
 
 //# sourceMappingURL=TableLayout.module.js.map

package/dist/layouts/TableLayout.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.module.js","names":[],"sources":["../../src/layouts/TableLayout.module.css"],"sourcesContent":[".scroller {\n    overflow-x: auto;\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    background-color: var(--panneau-color-surface);\n}\n\n.table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--panneau-font-size-md);\n}\n\n.table th,\n.table td {\n    padding: var(--panneau-row-padding-y) var(--panneau-space-3);\n    text-align: start;\n    vertical-align: middle;\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.table th {\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.table tbody tr:last-child td {\n    border-bottom: 0;\n}\n\n.table tbody tr[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n}\n\n.center {\n    text-align: center !important;\n}\n\n.end {\n    text-align: end !important;\n}\n\n.check {\n    width: 1px;\n}\n\n.actionsCell {\n    width: 1px;\n    text-align: end !important;\n    white-space: nowrap;\n}\n\n.sort {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2));\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font: inherit;\n    color: inherit;\n    background: none;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n    cursor: pointer;\n}\n\n.sort:hover {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.sort:focus-visible {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.sortIcon {\n    opacity: 0.5;\n}\n\n.sorted .sortIcon {\n    opacity: 1;\n}\n\n.cellLabel {\n    display: none;\n}\n\n.visuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n/* Narrow lists (phones): each row is a block, with the label of each value next to it. */\n@container panneau-list (max-width: 40rem) {\n    .scroller {\n        overflow: visible;\n        background: none;\n        border: 0;\n    }\n\n    /* The labels of the cells replace the headers, and the list's sort select their buttons. */\n    .table thead {\n        display: none;\n    }\n\n    .table,\n    .table tbody,\n    .table tr,\n    .table td {\n        display: block;\n    }\n\n    .table tbody {\n        display: grid;\n        gap: var(--panneau-space-2);\n    }\n\n    .table tr {\n        position: relative;\n        padding: var(--panneau-space-2) 0;\n        background-color: var(--panneau-color-surface);\n        border: var(--panneau-border-width) solid var(--panneau-color-border);\n        border-radius: var(--panneau-radius-lg);\n    }\n\n    .table td {\n        display: grid;\n        grid-template-columns: minmax(5rem, 35%) 1fr;\n        gap: var(--panneau-space-2);\n        padding: var(--panneau-space-1) var(--panneau-space-3);\n        text-align: start !important;\n        border: 0;\n    }\n\n    .table td.check,\n    .table td.actionsCell {\n        display: flex;\n        width: auto;\n    }\n\n    .table td.check {\n        position: absolute;\n        top: var(--panneau-space-2);\n        inset-inline-end: var(--panneau-space-2);\n        padding: 0;\n    }\n\n    .table td.actionsCell {\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        padding-top: var(--panneau-space-2);\n    }\n\n    .table td.title {\n        display: block;\n        padding-inline-end: var(--panneau-space-10);\n        font-weight: var(--panneau-font-weight-medium);\n    }\n\n    .table td.title .cellLabel {\n        display: none;\n    }\n\n    .cellLabel {\n        display: block;\n        font-size: var(--panneau-font-size-sm);\n        color: var(--panneau-color-text-muted);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"TableLayout.module.js","names":[],"sources":["../../src/layouts/TableLayout.module.css"],"sourcesContent":[".scroller {\n    overflow-x: auto;\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    background-color: var(--panneau-color-surface);\n}\n\n.table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: var(--panneau-font-size-md);\n}\n\n.table th,\n.table td {\n    padding: var(--panneau-row-padding-y) var(--panneau-space-3);\n    text-align: start;\n    vertical-align: middle;\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.table th {\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n/* The title stays readable in a narrow list, such as next to an item's details: the table\n * scrolls instead. */\n.table td.title {\n    min-width: 12rem;\n}\n\n.table tbody tr:last-child td {\n    border-bottom: 0;\n}\n\n.table tbody tr[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n}\n\n/* The item shown next to the list: a bar on its first cell. */\n.table tbody tr[data-current] td:first-child {\n    box-shadow: inset 3px 0 0 var(--panneau-color-accent);\n}\n\n.table tbody tr[data-current] {\n    background-color: var(--panneau-color-hover);\n}\n\n/* The thumbnail of an item, before its title (decision 0061). */\n.withThumbnail {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-3);\n}\n\n.withThumbnail > :last-child {\n    min-width: 0;\n}\n\n.thumbnail {\n    display: flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    width: 2.5rem;\n    height: 2.5rem;\n    overflow: hidden;\n    color: var(--panneau-color-text-muted);\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.thumbnail img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.center {\n    text-align: center !important;\n}\n\n.end {\n    text-align: end !important;\n}\n\n.check {\n    width: 1px;\n}\n\n.actionsCell {\n    width: 1px;\n    text-align: end !important;\n    white-space: nowrap;\n}\n\n/* As narrow as the actions of the row on one line: they only wrap in a narrow list. */\n.table .actionsCell > * {\n    flex-wrap: nowrap;\n}\n\n.sort {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2));\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font: inherit;\n    color: inherit;\n    background: none;\n    border: 0;\n    border-radius: var(--panneau-radius-sm);\n    cursor: pointer;\n}\n\n.sort:hover {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.sort:focus-visible {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.sortIcon {\n    opacity: 0.5;\n}\n\n.sorted .sortIcon {\n    opacity: 1;\n}\n\n.cellLabel {\n    display: none;\n}\n\n.visuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n/* Narrow lists (phones): each row is a block, with the label of each value next to it. */\n@container panneau-list (max-width: 40rem) {\n    .scroller {\n        overflow: visible;\n        background: none;\n        border: 0;\n    }\n\n    /* The labels of the cells replace the headers, and the list's sort select their buttons. */\n    .table thead {\n        display: none;\n    }\n\n    .table,\n    .table tbody,\n    .table tr,\n    .table td {\n        display: block;\n    }\n\n    .table tbody {\n        display: grid;\n        gap: var(--panneau-space-2);\n    }\n\n    .table tr {\n        position: relative;\n        padding: var(--panneau-space-2) 0;\n        background-color: var(--panneau-color-surface);\n        border: var(--panneau-border-width) solid var(--panneau-color-border);\n        border-radius: var(--panneau-radius-lg);\n    }\n\n    .table td {\n        display: grid;\n        grid-template-columns: minmax(5rem, 35%) 1fr;\n        gap: var(--panneau-space-2);\n        padding: var(--panneau-space-1) var(--panneau-space-3);\n        text-align: start !important;\n        border: 0;\n    }\n\n    .table td.check,\n    .table td.actionsCell {\n        display: flex;\n        width: auto;\n    }\n\n    .table td.actionsCell > * {\n        flex-wrap: wrap;\n    }\n\n    .table td.check {\n        position: absolute;\n        top: var(--panneau-space-2);\n        inset-inline-end: var(--panneau-space-2);\n        padding: 0;\n    }\n\n    .table td.actionsCell {\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        padding-top: var(--panneau-space-2);\n    }\n\n    .table td.title {\n        display: block;\n        min-width: 0;\n        padding-inline-end: var(--panneau-space-10);\n        font-weight: var(--panneau-font-weight-medium);\n    }\n\n    .table td.title .cellLabel {\n        display: none;\n    }\n\n    .cellLabel {\n        display: block;\n        font-size: var(--panneau-font-size-sm);\n        color: var(--panneau-color-text-muted);\n    }\n}\n"],"mappings":""}

package/dist/layouts/builtIn.d.ts

@@ -1,5 +1,5 @@
-import type { ListLayoutEntry } from '../types';
-/** The built-in list layouts, by id. `gallery` and `calendar` come later. */
+import type { ListLayoutEntry } from '../types.js';
+/** The built-in list layouts, by id (decision 0044). */
 export declare const builtInLayouts: Readonly<Record<string, ListLayoutEntry>> & {
     table: ListLayoutEntry;
 };

package/dist/layouts/builtIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builtIn.d.ts","sourceRoot":"","sources":["../../src/layouts/builtIn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,6EAA6E;AAC7E,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,GAAG;IACrE,KAAK,EAAE,eAAe,CAAC;CAI1B,CAAC"}
+{"version":3,"file":"builtIn.d.ts","sourceRoot":"","sources":["../../src/layouts/builtIn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAMhD,wDAAwD;AACxD,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,GAAG;IACrE,KAAK,EAAE,eAAe,CAAC;CAM1B,CAAC"}

package/dist/layouts/builtIn.js

@@ -1,10 +1,14 @@
+import { CalendarLayout } from "./CalendarLayout.js";
 import { CardsLayout } from "./CardsLayout.js";
+import { GalleryLayout } from "./GalleryLayout.js";
 import { TableLayout } from "./TableLayout.js";
 //#region src/layouts/builtIn.ts
-/** The built-in list layouts, by id. `gallery` and `calendar` come later. */
+/** The built-in list layouts, by id (decision 0044). */
 var builtInLayouts = {
 	table: TableLayout,
-	cards: CardsLayout
+	cards: CardsLayout,
+	gallery: GalleryLayout,
+	calendar: CalendarLayout
 };
 //#endregion
 export { builtInLayouts };

package/dist/layouts/builtIn.js.map

@@ -1 +1 @@
-{"version":3,"file":"builtIn.js","names":[],"sources":["../../src/layouts/builtIn.ts"],"sourcesContent":["import type { ListLayoutEntry } from '../types';\nimport { CardsLayout } from './CardsLayout';\nimport { TableLayout } from './TableLayout';\n\n/** The built-in list layouts, by id. `gallery` and `calendar` come later. */\nexport const builtInLayouts: Readonly<Record<string, ListLayoutEntry>> & {\n    table: ListLayoutEntry;\n} = {\n    table: TableLayout,\n    cards: CardsLayout,\n};\n"],"mappings":";;;;AAKA,IAAa,iBAET;CACA,OAAO;CACP,OAAO;AACX"}
+{"version":3,"file":"builtIn.js","names":["ListLayoutEntry","CalendarLayout","CardsLayout","GalleryLayout","TableLayout","builtInLayouts","Readonly","Record","table","cards","gallery","calendar"],"sources":["../../src/layouts/builtIn.ts"],"sourcesContent":["import type { ListLayoutEntry } from '../types';\nimport { CalendarLayout } from './CalendarLayout';\nimport { CardsLayout } from './CardsLayout';\nimport { GalleryLayout } from './GalleryLayout';\nimport { TableLayout } from './TableLayout';\n\n/** The built-in list layouts, by id (decision 0044). */\nexport const builtInLayouts: Readonly<Record<string, ListLayoutEntry>> & {\n    table: ListLayoutEntry;\n} = {\n    table: TableLayout,\n    cards: CardsLayout,\n    gallery: GalleryLayout,\n    calendar: CalendarLayout,\n};\n"],"mappings":";;;;;;AAOA,IAAaK,iBAET;CACAG,OAAOJ;CACPK,OAAOP;CACPQ,SAASP;CACTQ,UAAUV;AACd"}

package/dist/layouts/calendarDays.d.ts

@@ -0,0 +1,14 @@
+import type { Field } from '@panneau/protocol';
+/** The time zone of a calendar's field: its `settings.timeZone`, or `null`. */
+export declare function getCalendarTimeZone(field: Field | null | undefined): string | null;
+/**
+ * The days an item shows on, within the days shown (`2026-10-26` to `2026-12-06`): the day of a
+ * `date` or a `datetime`, in the time zone (the browser's without one), or each day a `daterange`
+ * covers (decision 0053). A range open at its end shows on its first day; one open at its start, on
+ * its last.
+ */
+export declare function getItemDays(value: unknown, shown: {
+    first: string;
+    last: string;
+}, timeZone?: string | null): string[];
+//# sourceMappingURL=calendarDays.d.ts.map