@panneau/lists 5.0.0-alpha.16 → 5.0.0-alpha.18

package/dist/layouts/CardsLayout.js

@@ -1,5 +1,6 @@
 import { messages } from "../messages.js";
 import { ItemTitle } from "./ItemTitle.js";
+import { RowActionsFit, fitContent, useRowActionsFit } from "../actions/fit.js";
 import CardsLayout_module_default from "./CardsLayout.module.js";
 import { c } from "react/compiler-runtime";
 import { Checkbox, usePanneauIntl } from "@panneau/ui";
@@ -7,107 +8,103 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layouts/CardsLayout.tsx
 /** Items as cards: the first column is the title, the others are listed under it. */
 function CardsLayout(t0) {
-	const $ = c(27);
+	const $ = c(18);
 	const { items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, label, pageSelection } = t0;
 	const intl = usePanneauIntl();
+	const [title, ...others] = columns;
 	let t1;
-	let t2;
-	let t3;
-	let t4;
-	if ($[0] !== columns || $[1] !== getItemHref || $[2] !== getItemLabel || $[3] !== intl || $[4] !== isCurrent || $[5] !== isSelected || $[6] !== items || $[7] !== label || $[8] !== onToggle || $[9] !== pageSelection || $[10] !== renderActions || $[11] !== renderValue || $[12] !== selectable) {
-		const [title, ...others] = columns;
-		if ($[17] !== pageSelection || $[18] !== selectable) {
-			t4 = selectable ? /* @__PURE__ */ jsx("div", {
-				className: CardsLayout_module_default.pageSelection,
-				children: pageSelection
-			}) : null;
-			$[17] = pageSelection;
-			$[18] = selectable;
-			$[19] = t4;
-		} else t4 = $[19];
-		t1 = CardsLayout_module_default.cards;
-		t2 = label;
-		t3 = items.map((item) => {
-			const selected = selectable && isSelected(item);
-			const actions = renderActions(item);
-			const current = isCurrent?.(item) ?? false;
-			return /* @__PURE__ */ jsxs("li", {
-				className: CardsLayout_module_default.card,
-				"data-selected": selected || void 0,
-				"data-current": current || void 0,
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: CardsLayout_module_default.header,
-						children: [/* @__PURE__ */ jsx("div", {
-							className: CardsLayout_module_default.title,
-							children: /* @__PURE__ */ jsx(ItemTitle, {
-								href: getItemHref?.(item) ?? null,
-								current,
-								children: title !== void 0 ? renderValue(item, title) : getItemLabel(item)
-							})
-						}), selectable ? /* @__PURE__ */ jsx(Checkbox, {
-							"aria-label": intl.formatMessage(messages.selectItem, { item: getItemLabel(item) }),
-							isSelected: selected,
-							onChange: () => onToggle(item)
-						}) : null]
-					}),
-					others.length > 0 ? /* @__PURE__ */ jsx("dl", {
-						className: CardsLayout_module_default.values,
-						children: others.map((column) => /* @__PURE__ */ jsxs("div", {
-							className: CardsLayout_module_default.value,
-							children: [/* @__PURE__ */ jsx("dt", { children: column.label ?? column.id }), /* @__PURE__ */ jsx("dd", { children: renderValue(item, column) })]
-						}, column.id))
-					}) : null,
-					actions !== null ? /* @__PURE__ */ jsx("div", {
-						className: CardsLayout_module_default.actions,
-						children: actions
-					}) : null
-				]
-			}, item.id);
-		});
+	if ($[0] !== columns || $[1] !== items) {
+		t1 = fitContent(items, columns);
 		$[0] = columns;
-		$[1] = getItemHref;
-		$[2] = getItemLabel;
-		$[3] = intl;
-		$[4] = isCurrent;
-		$[5] = isSelected;
-		$[6] = items;
-		$[7] = label;
-		$[8] = onToggle;
-		$[9] = pageSelection;
-		$[10] = renderActions;
-		$[11] = renderValue;
-		$[12] = selectable;
-		$[13] = t1;
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t4;
-	} else {
-		t1 = $[13];
-		t2 = $[14];
-		t3 = $[15];
-		t4 = $[16];
-	}
+		$[1] = items;
+		$[2] = t1;
+	} else t1 = $[2];
+	const [fitLevel, measureList] = useRowActionsFit(t1);
+	const T0 = RowActionsFit;
+	let t2;
+	if ($[3] !== pageSelection || $[4] !== selectable) {
+		t2 = selectable ? /* @__PURE__ */ jsx("div", {
+			className: CardsLayout_module_default.pageSelection,
+			children: pageSelection
+		}) : null;
+		$[3] = pageSelection;
+		$[4] = selectable;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = CardsLayout_module_default;
+	const t4 = items.map((item) => {
+		const selected = selectable && isSelected(item);
+		const actions = renderActions(item);
+		const current = isCurrent?.(item) ?? false;
+		return /* @__PURE__ */ jsxs("li", {
+			className: CardsLayout_module_default.card,
+			"data-selected": selected || void 0,
+			"data-current": current || void 0,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: CardsLayout_module_default.header,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: CardsLayout_module_default.title,
+						children: /* @__PURE__ */ jsx(ItemTitle, {
+							href: getItemHref?.(item) ?? null,
+							current,
+							children: title !== void 0 ? renderValue(item, title) : getItemLabel(item)
+						})
+					}), selectable ? /* @__PURE__ */ jsx(Checkbox, {
+						"aria-label": intl.formatMessage(messages.selectItem, { item: getItemLabel(item) }),
+						isSelected: selected,
+						onChange: () => onToggle(item)
+					}) : null]
+				}),
+				others.length > 0 ? /* @__PURE__ */ jsx("dl", {
+					className: CardsLayout_module_default.values,
+					children: others.map((column) => /* @__PURE__ */ jsxs("div", {
+						className: CardsLayout_module_default.value,
+						children: [/* @__PURE__ */ jsx("dt", { children: column.label ?? column.id }), /* @__PURE__ */ jsx("dd", { children: renderValue(item, column) })]
+					}, column.id))
+				}) : null,
+				actions !== null ? /* @__PURE__ */ jsx("div", {
+					className: CardsLayout_module_default.actions,
+					children: actions
+				}) : null
+			]
+		}, item.id);
+	});
 	let t5;
-	if ($[20] !== t1 || $[21] !== t2 || $[22] !== t3) {
+	if ($[6] !== label || $[7] !== t3.cards || $[8] !== t4) {
 		t5 = /* @__PURE__ */ jsx("ul", {
-			className: t1,
-			"aria-label": t2,
-			children: t3
+			className: t3.cards,
+			"aria-label": label,
+			children: t4
 		});
-		$[20] = t1;
-		$[21] = t2;
-		$[22] = t3;
-		$[23] = t5;
-	} else t5 = $[23];
+		$[6] = label;
+		$[7] = t3.cards;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
 	let t6;
-	if ($[24] !== t4 || $[25] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", { children: [t4, t5] });
-		$[24] = t4;
-		$[25] = t5;
-		$[26] = t6;
-	} else t6 = $[26];
-	return t6;
+	if ($[10] !== measureList || $[11] !== t2 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			ref: measureList,
+			children: [t2, t5]
+		});
+		$[10] = measureList;
+		$[11] = t2;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== T0 || $[15] !== fitLevel || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			value: fitLevel,
+			children: t6
+		});
+		$[14] = T0;
+		$[15] = fitLevel;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
 }
 //#endregion
 export { CardsLayout };

package/dist/layouts/CardsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardsLayout.js","names":["Checkbox","usePanneauIntl","messages","ListLayoutProps","styles","ItemTitle","CardsLayout","t0","$","_c","items","columns","renderValue","getItemLabel","getItemHref","isCurrent","selectable","isSelected","onToggle","renderActions","label","pageSelection","intl","t1","t2","t3","t4","title","others","cards","map","item","selected","actions","current","id","card","undefined","header","formatMessage","selectItem","length","values","column","value","t5","t6","_c","styles"],"sources":["../../src/layouts/CardsLayout.tsx"],"sourcesContent":["import { Checkbox, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListLayoutProps } from '../types';\nimport styles from './CardsLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\n/** Items as cards: the first column is the title, the others are listed under it. */\nexport function CardsLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const [title, ...others] = columns;\n    return (\n        <div>\n            {selectable ? <div className={styles.pageSelection}>{pageSelection}</div> : null}\n            <ul className={styles.cards} aria-label={label}>\n                {items.map((item) => {\n                    const selected = selectable && isSelected(item);\n                    const actions = renderActions(item);\n                    const current = isCurrent?.(item) ?? false;\n                    return (\n                        <li\n                            key={item.id}\n                            className={styles.card}\n                            data-selected={selected || undefined}\n                            data-current={current || undefined}\n                        >\n                            <div className={styles.header}>\n                                <div className={styles.title}>\n                                    <ItemTitle href={getItemHref?.(item) ?? null} current={current}>\n                                        {title !== undefined\n                                            ? renderValue(item, title)\n                                            : getItemLabel(item)}\n                                    </ItemTitle>\n                                </div>\n                                {selectable ? (\n                                    <Checkbox\n                                        aria-label={intl.formatMessage(messages.selectItem, {\n                                            item: getItemLabel(item),\n                                        })}\n                                        isSelected={selected}\n                                        onChange={() => onToggle(item)}\n                                    />\n                                ) : null}\n                            </div>\n                            {others.length > 0 ? (\n                                <dl className={styles.values}>\n                                    {others.map((column) => (\n                                        <div key={column.id} className={styles.value}>\n                                            <dt>{column.label ?? column.id}</dt>\n                                            <dd>{renderValue(item, column)}</dd>\n                                        </div>\n                                    ))}\n                                </dl>\n                            ) : null}\n                            {actions !== null ? (\n                                <div className={styles.actions}>{actions}</div>\n                            ) : null}\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CardsLayout.js","names":["Checkbox","usePanneauIntl","RowActionsFit","fitContent","useRowActionsFit","messages","ListLayoutProps","styles","ItemTitle","CardsLayout","t0","$","_c","items","columns","renderValue","getItemLabel","getItemHref","isCurrent","selectable","isSelected","onToggle","renderActions","label","pageSelection","intl","title","others","t1","fitLevel","measureList","T0","t2","t4","map","item","selected","actions","current","id","card","undefined","header","formatMessage","selectItem","length","values","column","value","t5","t3","cards","t6","t7","_c","styles"],"sources":["../../src/layouts/CardsLayout.tsx"],"sourcesContent":["import { Checkbox, usePanneauIntl } from '@panneau/ui';\n\nimport { RowActionsFit, fitContent, useRowActionsFit } from '../actions/fit';\nimport { messages } from '../messages';\nimport type { ListLayoutProps } from '../types';\nimport styles from './CardsLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\n/** Items as cards: the first column is the title, the others are listed under it. */\nexport function CardsLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const [title, ...others] = columns;\n    const [fitLevel, measureList] = useRowActionsFit(fitContent(items, columns));\n    return (\n        <RowActionsFit value={fitLevel}>\n            <div ref={measureList}>\n                {selectable ? <div className={styles.pageSelection}>{pageSelection}</div> : null}\n                <ul className={styles.cards} aria-label={label}>\n                    {items.map((item) => {\n                        const selected = selectable && isSelected(item);\n                        const actions = renderActions(item);\n                        const current = isCurrent?.(item) ?? false;\n                        return (\n                            <li\n                                key={item.id}\n                                className={styles.card}\n                                data-selected={selected || undefined}\n                                data-current={current || undefined}\n                            >\n                                <div className={styles.header}>\n                                    <div className={styles.title}>\n                                        <ItemTitle\n                                            href={getItemHref?.(item) ?? null}\n                                            current={current}\n                                        >\n                                            {title !== undefined\n                                                ? renderValue(item, title)\n                                                : getItemLabel(item)}\n                                        </ItemTitle>\n                                    </div>\n                                    {selectable ? (\n                                        <Checkbox\n                                            aria-label={intl.formatMessage(messages.selectItem, {\n                                                item: getItemLabel(item),\n                                            })}\n                                            isSelected={selected}\n                                            onChange={() => onToggle(item)}\n                                        />\n                                    ) : null}\n                                </div>\n                                {others.length > 0 ? (\n                                    <dl className={styles.values}>\n                                        {others.map((column) => (\n                                            <div key={column.id} className={styles.value}>\n                                                <dt>{column.label ?? column.id}</dt>\n                                                <dd>{renderValue(item, column)}</dd>\n                                            </div>\n                                        ))}\n                                    </dl>\n                                ) : null}\n                                {actions !== null ? (\n                                    <div className={styles.actions}>{actions}</div>\n                                ) : null}\n                            </li>\n                        );\n                    })}\n                </ul>\n            </div>\n        </RowActionsFit>\n    );\n}\n"],"mappings":";;;;;;;;;AASA,SAAOS,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAC,OAAAC,SAAAC,aAAAC,cAAAC,aAAAC,WAAAC,YAAAC,YAAAC,UAAAC,eAAAC,OAAAC,kBAAAd;CAcxB,MAAAe,OAAaxB,eAAe;CAC5B,MAAA,CAAAyB,OAAA,GAAAC,UAA2Bb;CAAQ,IAAAc;CAAA,IAAAjB,EAAA,OAAAG,WAAAH,EAAA,OAAAE,OAAA;EACce,KAAAzB,WAAWU,OAAOC,OAAO;EAACH,EAAA,KAAAG;EAAAH,EAAA,KAAAE;EAAAF,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAA3E,MAAA,CAAAkB,UAAAC,eAAgC1B,iBAAiBwB,EAA0B;CAEtE,MAAAG,KAAA7B;CAAa,IAAA8B;CAAA,IAAArB,EAAA,OAAAa,iBAAAb,EAAA,OAAAQ,YAAA;EAELa,KAAAb,aAAa,oBAAA,OAAA;GAAgB,WAAAZ,2BAAMiB;GAAiBA,UAAAA;EAAoB,CAAA,IAAxE;EAA+Eb,EAAA,KAAAa;EAAAb,EAAA,KAAAQ;EAAAR,EAAA,KAAAqB;CAAA,OAAAA,KAAArB,EAAA;CACjEJ,MAAAA,KAAAA;CACV,MAAA0B,KAAApB,MAAKqB,KAAKC,SAAA;EACP,MAAAC,WAAiBjB,cAAcC,WAAWe,IAAI;EAC9C,MAAAE,UAAgBf,cAAca,IAAI;EAClC,MAAAG,UAAgBpB,YAAYiB,IAAa,KAAzB;EAA2B,OAEvC,qBAAA,MAAA;GAEe,WAAA5B,2BAAMiC;GACF,iBAAAJ,YAAAK,KAAAA;GACD,gBAAAH,WAAAG,KAAAA;GAJlB,UAAA;IAMI,qBAAA,OAAA;KAAgB,WAAAlC,2BAAMmC;KAAtB,UAAA,CACI,oBAAA,OAAA;MAAgB,WAAAnC,2BAAMmB;MAClB,UAAA,oBAAC,WAAD;OACU,MAAAT,cAAckB,IAAY,KAA1B;OACGG;OAERZ,UAAAA,UAAUe,KAAAA,IACL1B,YAAYoB,MAAMT,KACD,IAAjBV,aAAamB,IAAI;MANjB,CAAA;KAQR,CAAA,GACLhB,aACG,oBAAC,UAAD;MACgB,cAAAM,KAAIkB,cAAetC,SAAQuC,YAAa,EAAAT,MAC1CnB,aAAamB,IAAI,EAC3B,CAAC;MACWC,YAAAA;MACF,gBAAMf,SAASc,IAAI;KAAC,CAAA,IANrC,IASC;;IACLR,OAAMkB,SAAU,IACb,oBAAA,MAAA;KAAe,WAAAtC,2BAAMuC;KAChBnB,UAAAA,OAAMO,KAAKa,WACR,qBAAA,OAAA;MAAgC,WAAAxC,2BAAMyC;MAAtC,UAAA,CACI,oBAAA,MAAA,EAAA,UAAKD,OAAMxB,SAAUwB,OAAMR,GAAS,CAAA,GACpC,oBAAA,MAAA,EAAA,UAAKxB,YAAYoB,MAAMY,MAAM,EAAO,CAAA,CAClC;KAHIA,GAAAA,OAAMR,EAGV,CACT;IACA,CAAA,IARR;IAUAF,YAAY,OACT,oBAAA,OAAA;KAAgB,WAAA9B,2BAAM8B;KAAWA,UAAAA;IAAc,CAAA,IADlD;GAGA;EAvCIF,GAAAA,KAAII,EAuCR;CAAA,CAEZ;CAAC,IAAAU;CAAA,IAAAtC,EAAA,OAAAY,SAAAZ,EAAA,OAAAuC,GAAAC,SAAAxC,EAAA,OAAAsB,IAAA;EAhDNgB,KAAA,oBAAA,MAAA;GAAe,WAAA1C,GAAM4C;GAAoB5B,cAAAA;GACpCU,UAAAA;EAgDA,CAAA;EAAAtB,EAAA,KAAAY;EAAAZ,EAAA,KAAAuC,GAAAC;EAAAxC,EAAA,KAAAsB;EAAAtB,EAAA,KAAAsC;CAAA,OAAAA,KAAAtC,EAAA;CAAA,IAAAyC;CAAA,IAAAzC,EAAA,QAAAmB,eAAAnB,EAAA,QAAAqB,MAAArB,EAAA,QAAAsC,IAAA;EAnDTG,KAAA,qBAAA,OAAA;GAAUtB,KAAAA;GAAV,UAAA,CACKE,IACDiB,EAkDE;;EAAAtC,EAAA,MAAAmB;EAAAnB,EAAA,MAAAqB;EAAArB,EAAA,MAAAsC;EAAAtC,EAAA,MAAAyC;CAAA,OAAAA,KAAAzC,EAAA;CAAA,IAAA0C;CAAA,IAAA1C,EAAA,QAAAoB,MAAApB,EAAA,QAAAkB,YAAAlB,EAAA,QAAAyC,IAAA;EArDVC,KAAA,oBAAC,IAAD;GAAsBxB,OAAAA;GAClBuB,UAAAA;EADU,CAAA;EAsDEzC,EAAA,MAAAoB;EAAApB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAyC;EAAAzC,EAAA,MAAA0C;CAAA,OAAAA,KAAA1C,EAAA;CAAA,OAtDhB0C;AAsDgB"}

package/dist/layouts/GalleryLayout.css

@@ -73,6 +73,13 @@
     display: flex;
     flex-shrink: 0;
     gap: var(--panneau-space-1);
+    max-width: 100%;
+    overflow: hidden;
+}
+
+/* On one line: the list measures what doesn't fit, and moves it to the menu (decision 0060). */
+.panneau-gallery-layout-actions > * {
+    flex-wrap: nowrap;
 }
 
 .panneau-gallery-layout-page-selection {

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/GalleryLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAyDjB"}
+{"version":3,"file":"GalleryLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/GalleryLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,KAAK,EACL,aAAa,GAChB,EAAE,eAAe,+BAkEjB"}

package/dist/layouts/GalleryLayout.js

@@ -1,5 +1,6 @@
 import { messages } from "../messages.js";
 import { ItemTitle } from "./ItemTitle.js";
+import { RowActionsFit, fitContent, useRowActionsFit } from "../actions/fit.js";
 import GalleryLayout_module_default from "./GalleryLayout.module.js";
 import { c } from "react/compiler-runtime";
 import { Checkbox, Icon, usePanneauIntl } from "@panneau/ui";
@@ -12,25 +13,33 @@ import { ImageOff } from "lucide-react";
 * placeholder.
 */
 function GalleryLayout(t0) {
-	const $ = c(34);
+	const $ = c(41);
 	const { items, columns, renderValue, getItemLabel, getItemHref, getItemImage, isCurrent, selectable, isSelected, onToggle, renderActions, label, pageSelection } = t0;
 	const intl = usePanneauIntl();
 	const [title] = columns;
 	let t1;
-	if ($[0] !== pageSelection || $[1] !== selectable) {
-		t1 = selectable ? /* @__PURE__ */ jsx("div", {
-			className: GalleryLayout_module_default.pageSelection,
-			children: pageSelection
-		}) : null;
-		$[0] = pageSelection;
-		$[1] = selectable;
+	if ($[0] !== columns || $[1] !== items) {
+		t1 = fitContent(items, columns);
+		$[0] = columns;
+		$[1] = items;
 		$[2] = t1;
 	} else t1 = $[2];
+	const [fitLevel, measureList] = useRowActionsFit(t1);
 	let t2;
-	if ($[3] !== getItemHref || $[4] !== getItemImage || $[5] !== getItemLabel || $[6] !== intl || $[7] !== isCurrent || $[8] !== isSelected || $[9] !== items || $[10] !== onToggle || $[11] !== renderActions || $[12] !== renderValue || $[13] !== selectable || $[14] !== title) {
-		let t3;
-		if ($[16] !== getItemHref || $[17] !== getItemImage || $[18] !== getItemLabel || $[19] !== intl || $[20] !== isCurrent || $[21] !== isSelected || $[22] !== onToggle || $[23] !== renderActions || $[24] !== renderValue || $[25] !== selectable || $[26] !== title) {
-			t3 = (item) => {
+	if ($[3] !== pageSelection || $[4] !== selectable) {
+		t2 = selectable ? /* @__PURE__ */ jsx("div", {
+			className: GalleryLayout_module_default.pageSelection,
+			children: pageSelection
+		}) : null;
+		$[3] = pageSelection;
+		$[4] = selectable;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== getItemHref || $[7] !== getItemImage || $[8] !== getItemLabel || $[9] !== intl || $[10] !== isCurrent || $[11] !== isSelected || $[12] !== items || $[13] !== onToggle || $[14] !== renderActions || $[15] !== renderValue || $[16] !== selectable || $[17] !== title) {
+		let t4;
+		if ($[19] !== getItemHref || $[20] !== getItemImage || $[21] !== getItemLabel || $[22] !== intl || $[23] !== isCurrent || $[24] !== isSelected || $[25] !== onToggle || $[26] !== renderActions || $[27] !== renderValue || $[28] !== selectable || $[29] !== title) {
+			t4 = (item) => {
 				const selected = selectable && isSelected(item);
 				const actions = renderActions(item);
 				const current = isCurrent?.(item) ?? false;
@@ -75,53 +84,67 @@ function GalleryLayout(t0) {
 					})]
 				}, item.id);
 			};
-			$[16] = getItemHref;
-			$[17] = getItemImage;
-			$[18] = getItemLabel;
-			$[19] = intl;
-			$[20] = isCurrent;
-			$[21] = isSelected;
-			$[22] = onToggle;
-			$[23] = renderActions;
-			$[24] = renderValue;
-			$[25] = selectable;
-			$[26] = title;
-			$[27] = t3;
-		} else t3 = $[27];
-		t2 = items.map(t3);
-		$[3] = getItemHref;
-		$[4] = getItemImage;
-		$[5] = getItemLabel;
-		$[6] = intl;
-		$[7] = isCurrent;
-		$[8] = isSelected;
-		$[9] = items;
-		$[10] = onToggle;
-		$[11] = renderActions;
-		$[12] = renderValue;
-		$[13] = selectable;
-		$[14] = title;
-		$[15] = t2;
-	} else t2 = $[15];
-	let t3;
-	if ($[28] !== label || $[29] !== t2) {
-		t3 = /* @__PURE__ */ jsx("ul", {
+			$[19] = getItemHref;
+			$[20] = getItemImage;
+			$[21] = getItemLabel;
+			$[22] = intl;
+			$[23] = isCurrent;
+			$[24] = isSelected;
+			$[25] = onToggle;
+			$[26] = renderActions;
+			$[27] = renderValue;
+			$[28] = selectable;
+			$[29] = title;
+			$[30] = t4;
+		} else t4 = $[30];
+		t3 = items.map(t4);
+		$[6] = getItemHref;
+		$[7] = getItemImage;
+		$[8] = getItemLabel;
+		$[9] = intl;
+		$[10] = isCurrent;
+		$[11] = isSelected;
+		$[12] = items;
+		$[13] = onToggle;
+		$[14] = renderActions;
+		$[15] = renderValue;
+		$[16] = selectable;
+		$[17] = title;
+		$[18] = t3;
+	} else t3 = $[18];
+	let t4;
+	if ($[31] !== label || $[32] !== t3) {
+		t4 = /* @__PURE__ */ jsx("ul", {
 			className: GalleryLayout_module_default.gallery,
 			"aria-label": label,
-			children: t2
+			children: t3
 		});
-		$[28] = label;
-		$[29] = t2;
-		$[30] = t3;
-	} else t3 = $[30];
-	let t4;
-	if ($[31] !== t1 || $[32] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("div", { children: [t1, t3] });
-		$[31] = t1;
+		$[31] = label;
 		$[32] = t3;
 		$[33] = t4;
 	} else t4 = $[33];
-	return t4;
+	let t5;
+	if ($[34] !== measureList || $[35] !== t2 || $[36] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			ref: measureList,
+			children: [t2, t4]
+		});
+		$[34] = measureList;
+		$[35] = t2;
+		$[36] = t4;
+		$[37] = t5;
+	} else t5 = $[37];
+	let t6;
+	if ($[38] !== fitLevel || $[39] !== t5) {
+		t6 = /* @__PURE__ */ jsx(RowActionsFit, {
+			value: fitLevel,
+			children: t5
+		});
+		$[38] = fitLevel;
+		$[39] = t5;
+		$[40] = t6;
+	} else t6 = $[40];
+	return t6;
 }
 //#endregion
 export { GalleryLayout };

package/dist/layouts/GalleryLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryLayout.js","names":["ImageOff","Checkbox","Icon","usePanneauIntl","messages","ListLayoutProps","styles","ItemTitle","GalleryLayout","t0","$","_c","items","columns","renderValue","getItemLabel","getItemHref","getItemImage","isCurrent","selectable","isSelected","onToggle","renderActions","label","pageSelection","intl","title","t1","t2","t3","item","selected","actions","current","image","id","tile","undefined","media","placeholder","check","formatMessage","selectItem","caption","map","gallery","t4","_c","styles"],"sources":["../../src/layouts/GalleryLayout.tsx"],"sourcesContent":["import { ImageOff } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListLayoutProps } from '../types';\nimport styles from './GalleryLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\n/**\n * Items as a grid of images (decision 0044): the image of each item (`itemImage` of the\n * resource), its title under it, its checkbox and its actions. An item without an image shows a\n * placeholder.\n */\nexport function GalleryLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    getItemImage,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const [title] = columns;\n    return (\n        <div>\n            {selectable ? <div className={styles.pageSelection}>{pageSelection}</div> : null}\n            <ul className={styles.gallery} aria-label={label}>\n                {items.map((item) => {\n                    const selected = selectable && isSelected(item);\n                    const actions = renderActions(item);\n                    const current = isCurrent?.(item) ?? false;\n                    const image = getItemImage?.(item) ?? null;\n                    return (\n                        <li\n                            key={item.id}\n                            className={styles.tile}\n                            data-selected={selected || undefined}\n                            data-current={current || undefined}\n                        >\n                            <div className={styles.media}>\n                                {image !== null ? (\n                                    <img src={image} alt=\"\" loading=\"lazy\" />\n                                ) : (\n                                    <span className={styles.placeholder}>\n                                        <Icon icon={ImageOff} size=\"lg\" />\n                                    </span>\n                                )}\n                                {selectable ? (\n                                    <span 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                                    </span>\n                                ) : null}\n                            </div>\n                            <div className={styles.caption}>\n                                <div className={styles.title}>\n                                    <ItemTitle href={getItemHref?.(item) ?? null} current={current}>\n                                        {title !== undefined\n                                            ? renderValue(item, title)\n                                            : getItemLabel(item)}\n                                    </ItemTitle>\n                                </div>\n                                {actions !== null ? (\n                                    <div className={styles.actions}>{actions}</div>\n                                ) : null}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAOQ,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAuB,MAAA,EAAAC,OAAAC,SAAAC,aAAAC,cAAAC,aAAAC,cAAAC,WAAAC,YAAAC,YAAAC,UAAAC,eAAAC,OAAAC,kBAAAf;CAe1B,MAAAgB,OAAatB,eAAe;CAC5B,MAAA,CAAAuB,SAAgBb;CAAQ,IAAAc;CAAA,IAAAjB,EAAA,OAAAc,iBAAAd,EAAA,OAAAS,YAAA;EAGfQ,KAAAR,aAAa,oBAAA,OAAA;GAAgB,WAAAb,6BAAMkB;GAAiBA,UAAAA;EAAoB,CAAA,IAAxE;EAA+Ed,EAAA,KAAAc;EAAAd,EAAA,KAAAS;EAAAT,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAM,eAAAN,EAAA,OAAAO,gBAAAP,EAAA,OAAAK,gBAAAL,EAAA,OAAAe,QAAAf,EAAA,OAAAQ,aAAAR,EAAA,OAAAU,cAAAV,EAAA,OAAAE,SAAAF,EAAA,QAAAW,YAAAX,EAAA,QAAAY,iBAAAZ,EAAA,QAAAI,eAAAJ,EAAA,QAAAS,cAAAT,EAAA,QAAAgB,OAAA;EAAA,IAAAG;EAAA,IAAAnB,EAAA,QAAAM,eAAAN,EAAA,QAAAO,gBAAAP,EAAA,QAAAK,gBAAAL,EAAA,QAAAe,QAAAf,EAAA,QAAAQ,aAAAR,EAAA,QAAAU,cAAAV,EAAA,QAAAW,YAAAX,EAAA,QAAAY,iBAAAZ,EAAA,QAAAI,eAAAJ,EAAA,QAAAS,cAAAT,EAAA,QAAAgB,OAAA;GAEjEG,MAAAC,SAAA;IACP,MAAAC,WAAiBZ,cAAcC,WAAWU,IAAI;IAC9C,MAAAE,UAAgBV,cAAcQ,IAAI;IAClC,MAAAG,UAAgBf,YAAYY,IAAa,KAAzB;IAChB,MAAAI,QAAcjB,eAAea,IAAY,KAA3B;IAA6B,OAEvC,qBAAA,MAAA;KAEe,WAAAxB,6BAAM8B;KACF,iBAAAL,YAAAM,KAAAA;KACD,gBAAAJ,WAAAI,KAAAA;KAJlB,UAAA,CAMI,qBAAA,OAAA;MAAgB,WAAA/B,6BAAMgC;MAAtB,UAAA,CACKJ,UAAU,OACP,oBAAA,OAAA;OAAUA,KAAAA;OAAW,KAAA;OAAW,SAAA;MAAM,CAAA,IAEtC,oBAAA,QAAA;OAAiB,WAAA5B,6BAAMiC;OACnB,UAAA,oBAAC,MAAD;QAAYvC,MAAAA;QAAe,MAAA;OAAI,CAAA;MAC5B,CAAA,GAEVmB,aACG,oBAAA,QAAA;OAAiB,WAAAb,6BAAMkC;OACnB,UAAA,oBAAC,UAAD;QACgB,cAAAf,KAAIgB,cAAerC,SAAQsC,YAAa,EAAAZ,MAC1Cf,aAAae,IAAI,EAC3B,CAAC;QACWC,YAAAA;QACF,gBAAMV,SAASS,IAAI;OAAC,CAAA;MAE/B,CAAA,IATV,IAWC;KACN,CAAA,GAAA,qBAAA,OAAA;MAAgB,WAAAxB,6BAAMqC;MAAtB,UAAA,CACI,oBAAA,OAAA;OAAgB,WAAArC,6BAAMoB;OAClB,UAAA,oBAAC,WAAD;QAAiB,MAAAV,cAAcc,IAAY,KAA1B;QAAsCG;QAClDP,UAAAA,UAAUW,KAAAA,IACLvB,YAAYgB,MAAMJ,KACD,IAAjBX,aAAae,IAAI;OAHjB,CAAA;MAKR,CAAA,GACLE,YAAY,OACT,oBAAA,OAAA;OAAgB,WAAA1B,6BAAM0B;OAAWA,UAAAA;MAAc,CAAA,IADlD,IAGC;KACL,CAAA,CAAA;IArCIF,GAAAA,KAAIK,EAqCR;GAAA;GAEZzB,EAAA,MAAAM;GAAAN,EAAA,MAAAO;GAAAP,EAAA,MAAAK;GAAAL,EAAA,MAAAe;GAAAf,EAAA,MAAAQ;GAAAR,EAAA,MAAAU;GAAAV,EAAA,MAAAW;GAAAX,EAAA,MAAAY;GAAAZ,EAAA,MAAAI;GAAAJ,EAAA,MAAAS;GAAAT,EAAA,MAAAgB;GAAAhB,EAAA,MAAAmB;EAAA,OAAAA,KAAAnB,EAAA;EA9CAkB,KAAAhB,MAAKgC,IAAKf,EA8CV;EAACnB,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAK;EAAAL,EAAA,KAAAe;EAAAf,EAAA,KAAAQ;EAAAR,EAAA,KAAAU;EAAAV,EAAA,KAAAE;EAAAF,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAI;EAAAJ,EAAA,MAAAS;EAAAT,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAa,SAAAb,EAAA,QAAAkB,IAAA;EA/CNC,KAAA,oBAAA,MAAA;GAAe,WAAAvB,6BAAMuC;GAAsBtB,cAAAA;GACtCK,UAAAA;EA+CA,CAAA;EAAAlB,EAAA,MAAAa;EAAAb,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAoC;CAAA,IAAApC,EAAA,QAAAiB,MAAAjB,EAAA,QAAAmB,IAAA;EAlDTiB,KAAA,qBAAA,OAAA,EAAA,UAAA,CACKnB,IACDE,EAiDE,EAAA,CAAA;EAAAnB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoC;CAAA,OAAAA,KAAApC,EAAA;CAAA,OAnDNoC;AAmDM"}
+{"version":3,"file":"GalleryLayout.js","names":["ImageOff","Checkbox","Icon","usePanneauIntl","RowActionsFit","fitContent","useRowActionsFit","messages","ListLayoutProps","styles","ItemTitle","GalleryLayout","t0","$","_c","items","columns","renderValue","getItemLabel","getItemHref","getItemImage","isCurrent","selectable","isSelected","onToggle","renderActions","label","pageSelection","intl","title","t1","fitLevel","measureList","t2","t3","t4","item","selected","actions","current","image","id","tile","undefined","media","placeholder","check","formatMessage","selectItem","caption","map","gallery","t5","t6","_c","styles"],"sources":["../../src/layouts/GalleryLayout.tsx"],"sourcesContent":["import { ImageOff } from 'lucide-react';\n\nimport { Checkbox, Icon, usePanneauIntl } from '@panneau/ui';\n\nimport { RowActionsFit, fitContent, useRowActionsFit } from '../actions/fit';\nimport { messages } from '../messages';\nimport type { ListLayoutProps } from '../types';\nimport styles from './GalleryLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\n/**\n * Items as a grid of images (decision 0044): the image of each item (`itemImage` of the\n * resource), its title under it, its checkbox and its actions. An item without an image shows a\n * placeholder.\n */\nexport function GalleryLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    getItemImage,\n    isCurrent,\n    selectable,\n    isSelected,\n    onToggle,\n    renderActions,\n    label,\n    pageSelection,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const [title] = columns;\n    const [fitLevel, measureList] = useRowActionsFit(fitContent(items, columns));\n    return (\n        <RowActionsFit value={fitLevel}>\n            <div ref={measureList}>\n                {selectable ? <div className={styles.pageSelection}>{pageSelection}</div> : null}\n                <ul className={styles.gallery} aria-label={label}>\n                    {items.map((item) => {\n                        const selected = selectable && isSelected(item);\n                        const actions = renderActions(item);\n                        const current = isCurrent?.(item) ?? false;\n                        const image = getItemImage?.(item) ?? null;\n                        return (\n                            <li\n                                key={item.id}\n                                className={styles.tile}\n                                data-selected={selected || undefined}\n                                data-current={current || undefined}\n                            >\n                                <div className={styles.media}>\n                                    {image !== null ? (\n                                        <img src={image} alt=\"\" loading=\"lazy\" />\n                                    ) : (\n                                        <span className={styles.placeholder}>\n                                            <Icon icon={ImageOff} size=\"lg\" />\n                                        </span>\n                                    )}\n                                    {selectable ? (\n                                        <span 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                                        </span>\n                                    ) : null}\n                                </div>\n                                <div className={styles.caption}>\n                                    <div className={styles.title}>\n                                        <ItemTitle\n                                            href={getItemHref?.(item) ?? null}\n                                            current={current}\n                                        >\n                                            {title !== undefined\n                                                ? renderValue(item, title)\n                                                : getItemLabel(item)}\n                                        </ItemTitle>\n                                    </div>\n                                    {actions !== null ? (\n                                        <div className={styles.actions}>{actions}</div>\n                                    ) : null}\n                                </div>\n                            </li>\n                        );\n                    })}\n                </ul>\n            </div>\n        </RowActionsFit>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAOW,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAuB,MAAA,EAAAC,OAAAC,SAAAC,aAAAC,cAAAC,aAAAC,cAAAC,WAAAC,YAAAC,YAAAC,UAAAC,eAAAC,OAAAC,kBAAAf;CAe1B,MAAAgB,OAAazB,eAAe;CAC5B,MAAA,CAAA0B,SAAgBb;CAAQ,IAAAc;CAAA,IAAAjB,EAAA,OAAAG,WAAAH,EAAA,OAAAE,OAAA;EACyBe,KAAAzB,WAAWU,OAAOC,OAAO;EAACH,EAAA,KAAAG;EAAAH,EAAA,KAAAE;EAAAF,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAA3E,MAAA,CAAAkB,UAAAC,eAAgC1B,iBAAiBwB,EAA0B;CAAE,IAAAG;CAAA,IAAApB,EAAA,OAAAc,iBAAAd,EAAA,OAAAS,YAAA;EAIhEW,KAAAX,aAAa,oBAAA,OAAA;GAAgB,WAAAb,6BAAMkB;GAAiBA,UAAAA;EAAoB,CAAA,IAAxE;EAA+Ed,EAAA,KAAAc;EAAAd,EAAA,KAAAS;EAAAT,EAAA,KAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,OAAAM,eAAAN,EAAA,OAAAO,gBAAAP,EAAA,OAAAK,gBAAAL,EAAA,OAAAe,QAAAf,EAAA,QAAAQ,aAAAR,EAAA,QAAAU,cAAAV,EAAA,QAAAE,SAAAF,EAAA,QAAAW,YAAAX,EAAA,QAAAY,iBAAAZ,EAAA,QAAAI,eAAAJ,EAAA,QAAAS,cAAAT,EAAA,QAAAgB,OAAA;EAAA,IAAAM;EAAA,IAAAtB,EAAA,QAAAM,eAAAN,EAAA,QAAAO,gBAAAP,EAAA,QAAAK,gBAAAL,EAAA,QAAAe,QAAAf,EAAA,QAAAQ,aAAAR,EAAA,QAAAU,cAAAV,EAAA,QAAAW,YAAAX,EAAA,QAAAY,iBAAAZ,EAAA,QAAAI,eAAAJ,EAAA,QAAAS,cAAAT,EAAA,QAAAgB,OAAA;GAEjEM,MAAAC,SAAA;IACP,MAAAC,WAAiBf,cAAcC,WAAWa,IAAI;IAC9C,MAAAE,UAAgBb,cAAcW,IAAI;IAClC,MAAAG,UAAgBlB,YAAYe,IAAa,KAAzB;IAChB,MAAAI,QAAcpB,eAAegB,IAAY,KAA3B;IAA6B,OAEvC,qBAAA,MAAA;KAEe,WAAA3B,6BAAMiC;KACF,iBAAAL,YAAAM,KAAAA;KACD,gBAAAJ,WAAAI,KAAAA;KAJlB,UAAA,CAMI,qBAAA,OAAA;MAAgB,WAAAlC,6BAAMmC;MAAtB,UAAA,CACKJ,UAAU,OACP,oBAAA,OAAA;OAAUA,KAAAA;OAAW,KAAA;OAAW,SAAA;MAAM,CAAA,IAEtC,oBAAA,QAAA;OAAiB,WAAA/B,6BAAMoC;OACnB,UAAA,oBAAC,MAAD;QAAY7C,MAAAA;QAAe,MAAA;OAAI,CAAA;MAC5B,CAAA,GAEVsB,aACG,oBAAA,QAAA;OAAiB,WAAAb,6BAAMqC;OACnB,UAAA,oBAAC,UAAD;QACgB,cAAAlB,KAAImB,cACZxC,SAAQyC,YACR,EAAAZ,MACUlB,aAAakB,IAAI,EAC3B,CACJ;QACYC,YAAAA;QACF,gBAAMb,SAASY,IAAI;OAAC,CAAA;MAE/B,CAAA,IAZV,IAcC;KACN,CAAA,GAAA,qBAAA,OAAA;MAAgB,WAAA3B,6BAAMwC;MAAtB,UAAA,CACI,oBAAA,OAAA;OAAgB,WAAAxC,6BAAMoB;OAClB,UAAA,oBAAC,WAAD;QACU,MAAAV,cAAciB,IAAY,KAA1B;QACGG;QAERV,UAAAA,UAAUc,KAAAA,IACL1B,YAAYmB,MAAMP,KACD,IAAjBX,aAAakB,IAAI;OANjB,CAAA;MAQR,CAAA,GACLE,YAAY,OACT,oBAAA,OAAA;OAAgB,WAAA7B,6BAAM6B;OAAWA,UAAAA;MAAc,CAAA,IADlD,IAGC;KACL,CAAA,CAAA;IA3CIF,GAAAA,KAAIK,EA2CR;GAAA;GAEZ5B,EAAA,MAAAM;GAAAN,EAAA,MAAAO;GAAAP,EAAA,MAAAK;GAAAL,EAAA,MAAAe;GAAAf,EAAA,MAAAQ;GAAAR,EAAA,MAAAU;GAAAV,EAAA,MAAAW;GAAAX,EAAA,MAAAY;GAAAZ,EAAA,MAAAI;GAAAJ,EAAA,MAAAS;GAAAT,EAAA,MAAAgB;GAAAhB,EAAA,MAAAsB;EAAA,OAAAA,KAAAtB,EAAA;EApDAqB,KAAAnB,MAAKmC,IAAKf,EAoDV;EAACtB,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAK;EAAAL,EAAA,KAAAe;EAAAf,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAE;EAAAF,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAI;EAAAJ,EAAA,MAAAS;EAAAT,EAAA,MAAAgB;EAAAhB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAa,SAAAb,EAAA,QAAAqB,IAAA;EArDNC,KAAA,oBAAA,MAAA;GAAe,WAAA1B,6BAAM0C;GAAsBzB,cAAAA;GACtCQ,UAAAA;EAqDA,CAAA;EAAArB,EAAA,MAAAa;EAAAb,EAAA,MAAAqB;EAAArB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAAuC;CAAA,IAAAvC,EAAA,QAAAmB,eAAAnB,EAAA,QAAAoB,MAAApB,EAAA,QAAAsB,IAAA;EAxDTiB,KAAA,qBAAA,OAAA;GAAUpB,KAAAA;GAAV,UAAA,CACKC,IACDE,EAuDE;;EAAAtB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;EAAApB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAuC;CAAA,OAAAA,KAAAvC,EAAA;CAAA,IAAAwC;CAAA,IAAAxC,EAAA,QAAAkB,YAAAlB,EAAA,QAAAuC,IAAA;EA1DVC,KAAA,oBAAC,eAAD;GAAsBtB,OAAAA;GAClBqB,UAAAA;EADU,CAAA;EA2DEvC,EAAA,MAAAkB;EAAAlB,EAAA,MAAAuC;EAAAvC,EAAA,MAAAwC;CAAA,OAAAA,KAAAxC,EAAA;CAAA,OA3DhBwC;AA2DgB"}

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryLayout.module.js","names":[],"sources":["../../src/layouts/GalleryLayout.module.css"],"sourcesContent":[".gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.tile {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\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.tile[data-current] {\n    border-color: var(--panneau-color-accent);\n    box-shadow: inset 0 0 0 1px var(--panneau-color-accent);\n}\n\n.tile[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n    border-color: var(--panneau-color-border-control);\n}\n\n.media {\n    position: relative;\n    aspect-ratio: 4 / 3;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.media img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.placeholder {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    position: absolute;\n    top: var(--panneau-space-2);\n    left: var(--panneau-space-2);\n    padding: 2px;\n    background-color: var(--panneau-color-surface);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.caption {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n}\n\n.title {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--panneau-space-1);\n}\n\n.pageSelection {\n    margin-bottom: var(--panneau-space-2);\n}\n"],"mappings":""}
+{"version":3,"file":"GalleryLayout.module.js","names":[],"sources":["../../src/layouts/GalleryLayout.module.css"],"sourcesContent":[".gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));\n    gap: var(--panneau-space-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.tile {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\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.tile[data-current] {\n    border-color: var(--panneau-color-accent);\n    box-shadow: inset 0 0 0 1px var(--panneau-color-accent);\n}\n\n.tile[data-selected] {\n    background-color: var(--panneau-color-accent-subtle);\n    border-color: var(--panneau-color-border-control);\n}\n\n.media {\n    position: relative;\n    aspect-ratio: 4 / 3;\n    background-color: var(--panneau-color-surface-sunken);\n}\n\n.media img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.placeholder {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    position: absolute;\n    top: var(--panneau-space-2);\n    left: var(--panneau-space-2);\n    padding: 2px;\n    background-color: var(--panneau-color-surface);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.caption {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n}\n\n.title {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--panneau-space-1);\n    max-width: 100%;\n    overflow: hidden;\n}\n\n/* On one line: the list measures what doesn't fit, and moves it to the menu (decision 0060). */\n.actions > * {\n    flex-wrap: nowrap;\n}\n\n.pageSelection {\n    margin-bottom: var(--panneau-space-2);\n}\n"],"mappings":""}

package/dist/layouts/TableLayout.css

@@ -50,6 +50,37 @@
     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;
 }

package/dist/layouts/TableLayout.d.ts

@@ -2,8 +2,9 @@ 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, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, renderCell, }: 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,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,UAAU,GACb,EAAE,eAAe,+BA4HjB"}
+{"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"}