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

package/dist/layouts/CalendarLayout.css

@@ -0,0 +1,153 @@
+.panneau-calendar-layout-calendar {
+    container-type: inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-calendar-layout-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-calendar-layout-month {
+    margin: 0;
+    font-size: var(--panneau-font-size-lg);
+    font-weight: var(--panneau-font-weight-medium);
+}
+
+.panneau-calendar-layout-month::first-letter {
+    text-transform: uppercase;
+}
+
+.panneau-calendar-layout-navigation {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-calendar-layout-more {
+    margin: 0;
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-calendar-layout-grid {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    background-color: var(--panneau-color-surface);
+}
+
+.panneau-calendar-layout-grid th {
+    padding: var(--panneau-space-1);
+    font-size: var(--panneau-font-size-sm);
+    font-weight: var(--panneau-font-weight-medium);
+    color: var(--panneau-color-text-muted);
+    text-align: start;
+}
+
+.panneau-calendar-layout-grid abbr {
+    text-decoration: none;
+}
+
+.panneau-calendar-layout-grid td {
+    height: 6rem;
+    padding: var(--panneau-space-1);
+    vertical-align: top;
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-calendar-layout-grid td[data-outside] {
+    background-color: var(--panneau-color-surface-sunken);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-calendar-layout-day {
+    display: block;
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-calendar-layout-grid td[aria-current='date'] .panneau-calendar-layout-day-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    color: var(--panneau-color-accent-text);
+    background-color: var(--panneau-color-accent);
+    border-radius: 999px;
+}
+
+/* The full date, for assistive technologies; shown on narrow lists. */
+.panneau-calendar-layout-day-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+.panneau-calendar-layout-items {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: var(--panneau-space-1) 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-calendar-layout-items li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-calendar-layout-items li[data-current] {
+    font-weight: var(--panneau-font-weight-medium);
+}
+
+/* On narrow lists: the days that have items, one under the other. */
+@container (max-width: 40rem) {
+    .panneau-calendar-layout-grid,
+    .panneau-calendar-layout-grid tbody,
+    .panneau-calendar-layout-grid tr,
+    .panneau-calendar-layout-grid td {
+        display: block;
+        width: auto;
+        height: auto;
+    }
+
+    .panneau-calendar-layout-grid thead,
+    .panneau-calendar-layout-grid td[data-empty],
+    .panneau-calendar-layout-day-number {
+        display: none;
+    }
+
+    .panneau-calendar-layout-grid td {
+        border-width: 0 0 var(--panneau-border-width);
+        padding: var(--panneau-space-2) 0;
+    }
+
+    .panneau-calendar-layout-grid td[data-outside] {
+        background: none;
+    }
+
+    .panneau-calendar-layout-day-label {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        clip-path: none;
+        font-weight: var(--panneau-font-weight-medium);
+    }
+
+    .panneau-calendar-layout-items li {
+        white-space: normal;
+    }
+}

package/dist/layouts/CalendarLayout.d.ts

@@ -0,0 +1,9 @@
+import type { ListLayoutProps } from '../types.js';
+/**
+ * Items on the days of a month (decision 0044): the weeks of the month, from the first day of the
+ * week of the locale, with the title of each item as its link, in the order of their dates, and
+ * buttons to the previous, the next and the current month. On narrow lists, the days that have
+ * items, one under the other.
+ */
+export declare function CalendarLayout({ items, columns, renderValue, getItemLabel, getItemHref, isCurrent, label, calendar, }: ListLayoutProps): import("react").JSX.Element;
+//# sourceMappingURL=CalendarLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/CalendarLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAY,eAAe,EAAE,MAAM,UAAU,CAAC;AAyD1D;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,KAAK,EACL,QAAQ,GACX,EAAE,eAAe,+BA4IjB"}

package/dist/layouts/CalendarLayout.js

@@ -0,0 +1,298 @@
+import { messages } from "../messages.js";
+import CalendarLayout_module_default from "./CalendarLayout.module.js";
+import { ItemTitle } from "./ItemTitle.js";
+import { currentMonth, isMonth, shiftMonth } from "@panneau/core";
+import { c } from "react/compiler-runtime";
+import { Button, IconButton, usePanneauIntl } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/layouts/CalendarLayout.tsx
+var DAY = /^\d{4}-\d{2}-\d{2}$/;
+function pad(value, length = 2) {
+	return String(value).padStart(length, "0");
+}
+function dayOf(date) {
+	return `${pad(date.getUTCFullYear(), 4)}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
+}
+/** The day of a `date` (as it is) or a `datetime` (in the time zone of the browser). */
+function getItemDay(value) {
+	if (typeof value !== "string" || value === "") return null;
+	if (DAY.test(value)) return value;
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return null;
+	return `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+/** The first day of the week in a locale: 1 for Monday to 7 for Sunday. */
+function getFirstDay(locale) {
+	try {
+		const info = new Intl.Locale(locale);
+		return info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay ?? 1;
+	} catch {
+		return 1;
+	}
+}
+/** The weeks that show a month, as days (`2026-11-02`), from the first day of the week. */
+function getWeeks(month, firstDay) {
+	const [year = 1970, index = 1] = month.split("-").map(Number);
+	const first = new Date(Date.UTC(year, index - 1, 1));
+	const last = new Date(Date.UTC(year, index, 0));
+	const offset = (first.getUTCDay() - firstDay % 7 + 7) % 7;
+	const start = Date.UTC(year, index - 1, 1 - offset);
+	const days = [];
+	for (let time = start; days.length % 7 !== 0 || time <= last.getTime(); time += 864e5) days.push(dayOf(new Date(time)));
+	return Array.from({ length: days.length / 7 }, (_, week) => days.slice(week * 7, week * 7 + 7));
+}
+/**
+* Items on the days of a month (decision 0044): the weeks of the month, from the first day of the
+* week of the locale, with the title of each item as its link, in the order of their dates, and
+* buttons to the previous, the next and the current month. On narrow lists, the days that have
+* items, one under the other.
+*/
+function CalendarLayout(t0) {
+	const $ = c(45);
+	const { items, columns, renderValue, getItemLabel, getItemHref, isCurrent, label, calendar } = t0;
+	const intl = usePanneauIntl();
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	if ($[0] !== calendar || $[1] !== columns || $[2] !== getItemHref || $[3] !== getItemLabel || $[4] !== intl || $[5] !== isCurrent || $[6] !== items || $[7] !== label || $[8] !== renderValue) {
+		const today = currentMonth();
+		const month = calendar !== void 0 && isMonth(calendar.month) ? calendar.month : today;
+		const [t8, t9] = month.split("-").map(Number);
+		const year = t8 === void 0 ? 1970 : t8;
+		const index = t9 === void 0 ? 1 : t9;
+		const [title] = columns;
+		const weeks = getWeeks(month, getFirstDay(intl.locale));
+		const monthLabel = new Intl.DateTimeFormat(intl.locale, {
+			month: "long",
+			year: "numeric",
+			timeZone: "UTC"
+		}).format(new Date(Date.UTC(year, index - 1, 1)));
+		const dayLabel = new Intl.DateTimeFormat(intl.locale, {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			timeZone: "UTC"
+		});
+		let t10;
+		if ($[16] !== intl.locale) {
+			t10 = (format) => new Intl.DateTimeFormat(intl.locale, {
+				weekday: format,
+				timeZone: "UTC"
+			});
+			$[16] = intl.locale;
+			$[17] = t10;
+		} else t10 = $[17];
+		const weekday = t10;
+		let t11;
+		let t12;
+		let t13;
+		if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+			const now = /* @__PURE__ */ new Date();
+			t11 = pad(now.getFullYear(), 4);
+			t12 = pad(now.getMonth() + 1);
+			t13 = pad(now.getDate());
+			$[18] = t11;
+			$[19] = t12;
+			$[20] = t13;
+		} else {
+			t11 = $[18];
+			t12 = $[19];
+			t13 = $[20];
+		}
+		const todayDay = `${t11}-${t12}-${t13}`;
+		const byDay = /* @__PURE__ */ new Map();
+		if (calendar !== void 0) items.forEach((item) => {
+			const value = item[calendar.field];
+			const day = getItemDay(value);
+			if (day !== null) byDay.set(day, [...byDay.get(day) ?? [], {
+				item,
+				value: String(value)
+			}]);
+		});
+		const more = calendar?.more ?? null;
+		t5 = CalendarLayout_module_default.calendar;
+		let t14;
+		if ($[21] !== intl) {
+			t14 = intl.formatMessage(messages.previousMonth);
+			$[21] = intl;
+			$[22] = t14;
+		} else t14 = $[22];
+		let t15;
+		if ($[23] !== intl) {
+			t15 = intl.formatMessage(messages.thisMonth);
+			$[23] = intl;
+			$[24] = t15;
+		} else t15 = $[24];
+		let t16;
+		if ($[25] !== intl) {
+			t16 = intl.formatMessage(messages.nextMonth);
+			$[25] = intl;
+			$[26] = t16;
+		} else t16 = $[26];
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: CalendarLayout_module_default.header,
+			children: [/* @__PURE__ */ jsx("p", {
+				className: CalendarLayout_module_default.month,
+				"aria-live": "polite",
+				children: monthLabel
+			}), /* @__PURE__ */ jsxs("div", {
+				className: CalendarLayout_module_default.navigation,
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: ChevronLeft,
+						label: t14,
+						onPress: () => calendar?.onMonthChange(shiftMonth(month, -1))
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						isDisabled: month === today,
+						onPress: () => calendar?.onMonthChange(today),
+						children: t15
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: ChevronRight,
+						label: t16,
+						onPress: () => calendar?.onMonthChange(shiftMonth(month, 1))
+					})
+				]
+			})]
+		});
+		if ($[27] !== intl || $[28] !== items || $[29] !== more) {
+			t7 = more !== null ? /* @__PURE__ */ jsx("p", {
+				className: CalendarLayout_module_default.more,
+				role: "status",
+				children: more.total !== null ? intl.formatMessage(messages.calendarMore, {
+					shown: items.length,
+					total: more.total
+				}) : intl.formatMessage(messages.calendarMoreUnknown, { shown: items.length })
+			}) : null;
+			$[27] = intl;
+			$[28] = items;
+			$[29] = more;
+			$[30] = t7;
+		} else t7 = $[30];
+		t2 = CalendarLayout_module_default.grid;
+		t3 = `${label}, ${monthLabel}`;
+		let t17;
+		if ($[31] !== weekday) {
+			t17 = (day_0) => {
+				const date = /* @__PURE__ */ new Date(`${day_0}T00:00:00Z`);
+				return /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: /* @__PURE__ */ jsx("abbr", {
+						title: weekday("long").format(date),
+						children: weekday("short").format(date)
+					})
+				}, day_0);
+			};
+			$[31] = weekday;
+			$[32] = t17;
+		} else t17 = $[32];
+		t4 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: (weeks[0] ?? []).map(t17) }) });
+		t1 = weeks.map((week) => /* @__PURE__ */ jsx("tr", { children: week.map((day_1) => {
+			const entries = [...byDay.get(day_1) ?? []].sort(_temp);
+			return /* @__PURE__ */ jsxs("td", {
+				"data-outside": !day_1.startsWith(month) || void 0,
+				"data-empty": entries.length === 0 || void 0,
+				"aria-current": day_1 === todayDay ? "date" : void 0,
+				children: [/* @__PURE__ */ jsxs("time", {
+					dateTime: day_1,
+					className: CalendarLayout_module_default.day,
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: CalendarLayout_module_default.dayNumber,
+						children: Number(day_1.slice(8))
+					}), /* @__PURE__ */ jsx("span", {
+						className: CalendarLayout_module_default.dayLabel,
+						children: dayLabel.format(/* @__PURE__ */ new Date(`${day_1}T00:00:00Z`))
+					})]
+				}), entries.length > 0 ? /* @__PURE__ */ jsx("ul", {
+					className: CalendarLayout_module_default.items,
+					children: entries.map((t18) => {
+						const { item: item_0 } = t18;
+						return /* @__PURE__ */ jsx("li", {
+							"data-current": isCurrent?.(item_0) === true || void 0,
+							children: /* @__PURE__ */ jsx(ItemTitle, {
+								href: getItemHref?.(item_0) ?? null,
+								current: isCurrent?.(item_0) ?? false,
+								children: title !== void 0 ? renderValue(item_0, title) : getItemLabel(item_0)
+							})
+						}, item_0.id);
+					})
+				}) : null]
+			}, day_1);
+		}) }, week[0]));
+		$[0] = calendar;
+		$[1] = columns;
+		$[2] = getItemHref;
+		$[3] = getItemLabel;
+		$[4] = intl;
+		$[5] = isCurrent;
+		$[6] = items;
+		$[7] = label;
+		$[8] = renderValue;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		t1 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+		t5 = $[13];
+		t6 = $[14];
+		t7 = $[15];
+	}
+	let t8;
+	if ($[33] !== t1) {
+		t8 = /* @__PURE__ */ jsx("tbody", { children: t1 });
+		$[33] = t1;
+		$[34] = t8;
+	} else t8 = $[34];
+	let t9;
+	if ($[35] !== t2 || $[36] !== t3 || $[37] !== t4 || $[38] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("table", {
+			className: t2,
+			"aria-label": t3,
+			children: [t4, t8]
+		});
+		$[35] = t2;
+		$[36] = t3;
+		$[37] = t4;
+		$[38] = t8;
+		$[39] = t9;
+	} else t9 = $[39];
+	let t10;
+	if ($[40] !== t5 || $[41] !== t6 || $[42] !== t7 || $[43] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: t5,
+			children: [
+				t6,
+				t7,
+				t9
+			]
+		});
+		$[40] = t5;
+		$[41] = t6;
+		$[42] = t7;
+		$[43] = t9;
+		$[44] = t10;
+	} else t10 = $[44];
+	return t10;
+}
+function _temp(a, b) {
+	return a.value.localeCompare(b.value);
+}
+//#endregion
+export { CalendarLayout };
+
+//# sourceMappingURL=CalendarLayout.js.map

package/dist/layouts/CalendarLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarLayout.js","names":["ChevronLeft","ChevronRight","currentMonth","isMonth","shiftMonth","Button","IconButton","usePanneauIntl","messages","ListItem","ListLayoutProps","styles","ItemTitle","DAY","pad","value","length","String","padStart","dayOf","date","Date","getUTCFullYear","getUTCMonth","getUTCDate","getItemDay","test","Number","isNaN","getTime","getFullYear","getMonth","getDate","getFirstDay","locale","info","Intl","Locale","getWeekInfo","firstDay","weekInfo","getWeeks","month","year","index","split","map","first","UTC","last","offset","getUTCDay","start","days","time","push","Array","from","_","week","slice","CalendarLayout","t0","$","_c","items","columns","renderValue","getItemLabel","getItemHref","isCurrent","label","calendar","intl","t1","t2","t3","t4","t5","t6","t7","today","undefined","t8","t9","title","weeks","monthLabel","DateTimeFormat","timeZone","format","dayLabel","weekday","day","t10","t11","t12","t13","Symbol","for","now","todayDay","byDay","Map","forEach","item","field","set","get","more","t14","formatMessage","previousMonth","t15","thisMonth","t16","nextMonth","header","navigation","onMonthChange","total","calendarMore","shown","calendarMoreUnknown","grid","t17","day_0","day_1","entries","sort","_temp","startsWith","dayNumber","t18","item_0","id","a","b","localeCompare","_c","styles"],"sources":["../../src/layouts/CalendarLayout.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { currentMonth, isMonth, shiftMonth } from '@panneau/core';\nimport { Button, IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListItem, ListLayoutProps } from '../types';\nimport styles from './CalendarLayout.module.css';\nimport { ItemTitle } from './ItemTitle';\n\nconst DAY = /^\\d{4}-\\d{2}-\\d{2}$/;\n\nfunction pad(value: number, length = 2): string {\n    return String(value).padStart(length, '0');\n}\n\nfunction dayOf(date: Date): string {\n    return `${pad(date.getUTCFullYear(), 4)}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;\n}\n\n/** The day of a `date` (as it is) or a `datetime` (in the time zone of the browser). */\nfunction getItemDay(value: unknown): string | null {\n    if (typeof value !== 'string' || value === '') {\n        return null;\n    }\n    if (DAY.test(value)) {\n        return value;\n    }\n    const date = new Date(value);\n    if (Number.isNaN(date.getTime())) {\n        return null;\n    }\n    return `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n}\n\n/** The first day of the week in a locale: 1 for Monday to 7 for Sunday. */\nfunction getFirstDay(locale: string): number {\n    try {\n        const info = new Intl.Locale(locale) as Intl.Locale & {\n            getWeekInfo?: () => { firstDay: number };\n            weekInfo?: { firstDay: number };\n        };\n        return info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay ?? 1;\n    } catch {\n        return 1;\n    }\n}\n\n/** The weeks that show a month, as days (`2026-11-02`), from the first day of the week. */\nfunction getWeeks(month: string, firstDay: number): string[][] {\n    const [year = 1970, index = 1] = month.split('-').map(Number);\n    const first = new Date(Date.UTC(year, index - 1, 1));\n    const last = new Date(Date.UTC(year, index, 0));\n    // getUTCDay(): 0 for Sunday; firstDay: 7 for Sunday.\n    const offset = (first.getUTCDay() - (firstDay % 7) + 7) % 7;\n    const start = Date.UTC(year, index - 1, 1 - offset);\n    const days: string[] = [];\n    for (let time = start; days.length % 7 !== 0 || time <= last.getTime(); time += 86_400_000) {\n        days.push(dayOf(new Date(time)));\n    }\n    return Array.from({ length: days.length / 7 }, (_, week) => days.slice(week * 7, week * 7 + 7));\n}\n\n/**\n * Items on the days of a month (decision 0044): the weeks of the month, from the first day of the\n * week of the locale, with the title of each item as its link, in the order of their dates, and\n * buttons to the previous, the next and the current month. On narrow lists, the days that have\n * items, one under the other.\n */\nexport function CalendarLayout({\n    items,\n    columns,\n    renderValue,\n    getItemLabel,\n    getItemHref,\n    isCurrent,\n    label,\n    calendar,\n}: ListLayoutProps) {\n    const intl = usePanneauIntl();\n    const today = currentMonth();\n    const month = calendar !== undefined && isMonth(calendar.month) ? calendar.month : today;\n    const [year = 1970, index = 1] = month.split('-').map(Number);\n    const [title] = columns;\n    const weeks = getWeeks(month, getFirstDay(intl.locale));\n    const monthLabel = new Intl.DateTimeFormat(intl.locale, {\n        month: 'long',\n        year: 'numeric',\n        timeZone: 'UTC',\n    }).format(new Date(Date.UTC(year, index - 1, 1)));\n    const dayLabel = new Intl.DateTimeFormat(intl.locale, {\n        weekday: 'long',\n        day: 'numeric',\n        month: 'long',\n        timeZone: 'UTC',\n    });\n    const weekday = (format: 'short' | 'long') =>\n        new Intl.DateTimeFormat(intl.locale, { weekday: format, timeZone: 'UTC' });\n    const now = new Date();\n    const todayDay = `${pad(now.getFullYear(), 4)}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;\n\n    const byDay = new Map<string, { item: ListItem; value: string }[]>();\n    if (calendar !== undefined) {\n        items.forEach((item) => {\n            const value = item[calendar.field];\n            const day = getItemDay(value);\n            if (day !== null) {\n                byDay.set(day, [...(byDay.get(day) ?? []), { item, value: String(value) }]);\n            }\n        });\n    }\n    const more = calendar?.more ?? null;\n\n    return (\n        <div className={styles.calendar}>\n            <div className={styles.header}>\n                <p className={styles.month} aria-live=\"polite\">\n                    {monthLabel}\n                </p>\n                <div className={styles.navigation}>\n                    <IconButton\n                        icon={ChevronLeft}\n                        label={intl.formatMessage(messages.previousMonth)}\n                        onPress={() => calendar?.onMonthChange(shiftMonth(month, -1))}\n                    />\n                    <Button\n                        size=\"sm\"\n                        isDisabled={month === today}\n                        onPress={() => calendar?.onMonthChange(today)}\n                    >\n                        {intl.formatMessage(messages.thisMonth)}\n                    </Button>\n                    <IconButton\n                        icon={ChevronRight}\n                        label={intl.formatMessage(messages.nextMonth)}\n                        onPress={() => calendar?.onMonthChange(shiftMonth(month, 1))}\n                    />\n                </div>\n            </div>\n            {more !== null ? (\n                <p className={styles.more} role=\"status\">\n                    {more.total !== null\n                        ? intl.formatMessage(messages.calendarMore, {\n                              shown: items.length,\n                              total: more.total,\n                          })\n                        : intl.formatMessage(messages.calendarMoreUnknown, {\n                              shown: items.length,\n                          })}\n                </p>\n            ) : null}\n            <table className={styles.grid} aria-label={`${label}, ${monthLabel}`}>\n                <thead>\n                    <tr>\n                        {(weeks[0] ?? []).map((day) => {\n                            const date = new Date(`${day}T00:00:00Z`);\n                            return (\n                                <th key={day} scope=\"col\">\n                                    <abbr title={weekday('long').format(date)}>\n                                        {weekday('short').format(date)}\n                                    </abbr>\n                                </th>\n                            );\n                        })}\n                    </tr>\n                </thead>\n                <tbody>\n                    {weeks.map((week) => (\n                        <tr key={week[0]}>\n                            {week.map((day) => {\n                                const entries = [...(byDay.get(day) ?? [])].sort((a, b) =>\n                                    a.value.localeCompare(b.value),\n                                );\n                                return (\n                                    <td\n                                        key={day}\n                                        data-outside={!day.startsWith(month) || undefined}\n                                        data-empty={entries.length === 0 || undefined}\n                                        aria-current={day === todayDay ? 'date' : undefined}\n                                    >\n                                        <time dateTime={day} className={styles.day}>\n                                            <span aria-hidden=\"true\" className={styles.dayNumber}>\n                                                {Number(day.slice(8))}\n                                            </span>\n                                            <span className={styles.dayLabel}>\n                                                {dayLabel.format(new Date(`${day}T00:00:00Z`))}\n                                            </span>\n                                        </time>\n                                        {entries.length > 0 ? (\n                                            <ul className={styles.items}>\n                                                {entries.map(({ item }) => (\n                                                    <li\n                                                        key={item.id}\n                                                        data-current={\n                                                            isCurrent?.(item) === true || undefined\n                                                        }\n                                                    >\n                                                        <ItemTitle\n                                                            href={getItemHref?.(item) ?? null}\n                                                            current={isCurrent?.(item) ?? false}\n                                                        >\n                                                            {title !== undefined\n                                                                ? renderValue(item, title)\n                                                                : getItemLabel(item)}\n                                                        </ItemTitle>\n                                                    </li>\n                                                ))}\n                                            </ul>\n                                        ) : null}\n                                    </td>\n                                );\n                            })}\n                        </tr>\n                    ))}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/layouts/CalendarLayout.module.js

@@ -0,0 +1,28 @@
+import "./CalendarLayout.css";
+//#region src/layouts/CalendarLayout.module.css
+var calendar = "panneau-calendar-layout-calendar";
+var header = "panneau-calendar-layout-header";
+var month = "panneau-calendar-layout-month";
+var navigation = "panneau-calendar-layout-navigation";
+var more = "panneau-calendar-layout-more";
+var grid = "panneau-calendar-layout-grid";
+var day = "panneau-calendar-layout-day";
+var dayNumber = "panneau-calendar-layout-day-number";
+var dayLabel = "panneau-calendar-layout-day-label";
+var items = "panneau-calendar-layout-items";
+var CalendarLayout_module_default = {
+	calendar,
+	header,
+	month,
+	navigation,
+	more,
+	grid,
+	day,
+	dayNumber,
+	dayLabel,
+	items
+};
+//#endregion
+export { calendar, day, dayLabel, dayNumber, CalendarLayout_module_default as default, grid, header, items, month, more, navigation };
+
+//# sourceMappingURL=CalendarLayout.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarLayout.module.js","names":[],"sources":["../../src/layouts/CalendarLayout.module.css"],"sourcesContent":[".calendar {\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n}\n\n.header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n}\n\n.month {\n    margin: 0;\n    font-size: var(--panneau-font-size-lg);\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n.month::first-letter {\n    text-transform: uppercase;\n}\n\n.navigation {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n}\n\n.more {\n    margin: 0;\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.grid {\n    width: 100%;\n    table-layout: fixed;\n    border-collapse: collapse;\n    background-color: var(--panneau-color-surface);\n}\n\n.grid th {\n    padding: var(--panneau-space-1);\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n    text-align: start;\n}\n\n.grid abbr {\n    text-decoration: none;\n}\n\n.grid td {\n    height: 6rem;\n    padding: var(--panneau-space-1);\n    vertical-align: top;\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.grid td[data-outside] {\n    background-color: var(--panneau-color-surface-sunken);\n    color: var(--panneau-color-text-muted);\n}\n\n.day {\n    display: block;\n    font-size: var(--panneau-font-size-sm);\n}\n\n.grid td[aria-current='date'] .dayNumber {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 1.5rem;\n    height: 1.5rem;\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n    border-radius: 999px;\n}\n\n/* The full date, for assistive technologies; shown on narrow lists. */\n.dayLabel {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.items {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    margin: var(--panneau-space-1) 0 0;\n    padding: 0;\n    list-style: none;\n    font-size: var(--panneau-font-size-sm);\n}\n\n.items li {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.items li[data-current] {\n    font-weight: var(--panneau-font-weight-medium);\n}\n\n/* On narrow lists: the days that have items, one under the other. */\n@container (max-width: 40rem) {\n    .grid,\n    .grid tbody,\n    .grid tr,\n    .grid td {\n        display: block;\n        width: auto;\n        height: auto;\n    }\n\n    .grid thead,\n    .grid td[data-empty],\n    .dayNumber {\n        display: none;\n    }\n\n    .grid td {\n        border-width: 0 0 var(--panneau-border-width);\n        padding: var(--panneau-space-2) 0;\n    }\n\n    .grid td[data-outside] {\n        background: none;\n    }\n\n    .dayLabel {\n        position: static;\n        width: auto;\n        height: auto;\n        overflow: visible;\n        clip-path: none;\n        font-weight: var(--panneau-font-weight-medium);\n    }\n\n    .items li {\n        white-space: normal;\n    }\n}\n"],"mappings":""}

package/dist/layouts/CardsLayout.js

@@ -1,6 +1,6 @@
 import { messages } from "../messages.js";
-import CardsLayout_module_default from "./CardsLayout.module.js";
 import { ItemTitle } from "./ItemTitle.js";
+import CardsLayout_module_default from "./CardsLayout.module.js";
 import { c } from "react/compiler-runtime";
 import { Checkbox, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/layouts/GalleryLayout.css

@@ -0,0 +1,80 @@
+.panneau-gallery-layout-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
+    gap: var(--panneau-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.panneau-gallery-layout-tile {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: var(--panneau-color-surface);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-lg);
+}
+
+.panneau-gallery-layout-tile[data-current] {
+    border-color: var(--panneau-color-accent);
+    box-shadow: inset 0 0 0 1px var(--panneau-color-accent);
+}
+
+.panneau-gallery-layout-tile[data-selected] {
+    background-color: var(--panneau-color-accent-subtle);
+    border-color: var(--panneau-color-border-control);
+}
+
+.panneau-gallery-layout-media {
+    position: relative;
+    aspect-ratio: 4 / 3;
+    background-color: var(--panneau-color-surface-sunken);
+}
+
+.panneau-gallery-layout-media img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.panneau-gallery-layout-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-gallery-layout-check {
+    position: absolute;
+    top: var(--panneau-space-2);
+    left: var(--panneau-space-2);
+    padding: 2px;
+    background-color: var(--panneau-color-surface);
+    border-radius: var(--panneau-radius-sm);
+}
+
+.panneau-gallery-layout-caption {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--panneau-space-2);
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+}
+
+.panneau-gallery-layout-title {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.panneau-gallery-layout-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--panneau-space-1);
+}
+
+.panneau-gallery-layout-page-selection {
+    margin-bottom: var(--panneau-space-2);
+}

package/dist/layouts/GalleryLayout.d.ts

@@ -0,0 +1,8 @@
+import type { ListLayoutProps } from '../types.js';
+/**
+ * Items as a grid of images (decision 0044): the image of each item (`itemImage` of the
+ * resource), its title under it, its checkbox and its actions. An item without an image shows a
+ * placeholder.
+ */
+export declare function GalleryLayout({ items, columns, renderValue, getItemLabel, getItemHref, getItemImage, isCurrent, selectable, isSelected, onToggle, renderActions, label, pageSelection, }: ListLayoutProps): import("react").JSX.Element;
+//# sourceMappingURL=GalleryLayout.d.ts.map

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

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