@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/util/lazy_chunk.es.js

@@ -0,0 +1,96 @@
+import React from "react";
+//#region src/util/lazy_chunk.ts
+/**
+* Dynamic imports that survive a redeploy.
+*
+* A built SPA names its chunks by content hash and a deploy replaces the whole
+* `assets/` directory, so a tab opened before the deploy still holds the *old*
+* entry chunk. The first lazy route that tab opens asks for a hash that no
+* longer exists on the server, the import rejects, and the view is dead until
+* the user thinks to reload — which nothing on screen tells them to do. The
+* browser's own wording ("Failed to fetch dynamically imported module: …") reads
+* like a build bug, so this is usually reported as one.
+*
+* `loadChunk` retries once — that covers a transient network failure — and then
+* gives up with an error tagged as a chunk load failure, so `ErrorBoundary` can
+* offer a reload instead of printing the browser's message.
+*/
+/**
+* Marker property set on the error thrown after a failed retry. Read by
+* `isChunkLoadError`, which is what the UI matches on.
+*/
+var CHUNK_LOAD_ERROR_FLAG = "rebaseChunkLoadError";
+/**
+* Each engine words this differently, and the message is the only signal — none
+* of them use a distinguishable error type. The MIME variants matter as much as
+* the fetch ones: a server whose SPA fallback answers a missing `/assets/x.js`
+* with `index.html` returns 200 HTML, and the browser rejects it as a module.
+*/
+var CHUNK_ERROR_PATTERNS = [
+	"failed to fetch dynamically imported module",
+	"error loading dynamically imported module",
+	"importing a module script failed",
+	"failed to load module script",
+	"expected a javascript",
+	"unable to preload css"
+];
+/**
+* Does this error mean a chunk could not be loaded — rather than the chunk's
+* own code throwing once it did load?
+*
+* Errors raised anywhere are matched, not just ones `loadChunk` produced: React
+* `lazy()` calls that still import directly, and Vite's own CSS preloads, fail
+* the same way and deserve the same recovery.
+*/
+function isChunkLoadError(error) {
+	if (!error || typeof error !== "object") return false;
+	if (error[CHUNK_LOAD_ERROR_FLAG] === true) return true;
+	const message = error.message;
+	if (typeof message !== "string") return false;
+	const lower = message.toLowerCase();
+	return CHUNK_ERROR_PATTERNS.some((pattern) => lower.includes(pattern));
+}
+function chunkLoadError(cause) {
+	const error = /* @__PURE__ */ new Error("This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.");
+	Object.assign(error, {
+		[CHUNK_LOAD_ERROR_FLAG]: true,
+		cause
+	});
+	return error;
+}
+/**
+* Run a dynamic import, retrying once before declaring the chunk unreachable.
+*
+* Errors that are not chunk load failures — the imported module throwing while
+* it evaluates, say — are re-thrown untouched and never retried: running a
+* module's side effects twice is worse than the original failure.
+*/
+async function loadChunk(loader) {
+	try {
+		return await loader();
+	} catch (error) {
+		if (!isChunkLoadError(error)) throw error;
+		await new Promise((resolve) => setTimeout(resolve, 250));
+		try {
+			return await loader();
+		} catch (retryError) {
+			throw chunkLoadError(retryError);
+		}
+	}
+}
+/**
+* `React.lazy` with the retry above. A drop-in replacement — use it for every
+* lazy route or dialog, since any one of them can be the first chunk a stale
+* tab reaches for.
+*
+* Note that React caches the rejection: once a lazy component has failed, later
+* renders re-throw without calling the loader again. Resetting an error boundary
+* therefore cannot recover it, which is why the boundary offers a reload.
+*/
+function lazyChunk(loader) {
+	return React.lazy(() => loadChunk(loader));
+}
+//#endregion
+export { isChunkLoadError, lazyChunk, loadChunk };
+
+//# sourceMappingURL=lazy_chunk.es.js.map

package/dist/util/lazy_chunk.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy_chunk.es.js","names":[],"sources":["../../src/util/lazy_chunk.ts"],"sourcesContent":["import React from \"react\";\n\n/**\n * Dynamic imports that survive a redeploy.\n *\n * A built SPA names its chunks by content hash and a deploy replaces the whole\n * `assets/` directory, so a tab opened before the deploy still holds the *old*\n * entry chunk. The first lazy route that tab opens asks for a hash that no\n * longer exists on the server, the import rejects, and the view is dead until\n * the user thinks to reload — which nothing on screen tells them to do. The\n * browser's own wording (\"Failed to fetch dynamically imported module: …\") reads\n * like a build bug, so this is usually reported as one.\n *\n * `loadChunk` retries once — that covers a transient network failure — and then\n * gives up with an error tagged as a chunk load failure, so `ErrorBoundary` can\n * offer a reload instead of printing the browser's message.\n */\n\n/**\n * Marker property set on the error thrown after a failed retry. Read by\n * `isChunkLoadError`, which is what the UI matches on.\n */\nconst CHUNK_LOAD_ERROR_FLAG = \"rebaseChunkLoadError\";\n\n/**\n * Each engine words this differently, and the message is the only signal — none\n * of them use a distinguishable error type. The MIME variants matter as much as\n * the fetch ones: a server whose SPA fallback answers a missing `/assets/x.js`\n * with `index.html` returns 200 HTML, and the browser rejects it as a module.\n */\nconst CHUNK_ERROR_PATTERNS = [\n    \"failed to fetch dynamically imported module\",\n    \"error loading dynamically imported module\",\n    \"importing a module script failed\",\n    \"failed to load module script\",\n    \"expected a javascript\",\n    \"unable to preload css\"\n];\n\n/**\n * Does this error mean a chunk could not be loaded — rather than the chunk's\n * own code throwing once it did load?\n *\n * Errors raised anywhere are matched, not just ones `loadChunk` produced: React\n * `lazy()` calls that still import directly, and Vite's own CSS preloads, fail\n * the same way and deserve the same recovery.\n */\nexport function isChunkLoadError(error: unknown): boolean {\n    if (!error || typeof error !== \"object\") return false;\n    if ((error as Record<string, unknown>)[CHUNK_LOAD_ERROR_FLAG] === true) return true;\n    const message = (error as { message?: unknown }).message;\n    if (typeof message !== \"string\") return false;\n    const lower = message.toLowerCase();\n    return CHUNK_ERROR_PATTERNS.some(pattern => lower.includes(pattern));\n}\n\nfunction chunkLoadError(cause: unknown): Error {\n    const error = new Error(\n        \"This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.\"\n    );\n    Object.assign(error, { [CHUNK_LOAD_ERROR_FLAG]: true,\ncause });\n    return error;\n}\n\n/**\n * Run a dynamic import, retrying once before declaring the chunk unreachable.\n *\n * Errors that are not chunk load failures — the imported module throwing while\n * it evaluates, say — are re-thrown untouched and never retried: running a\n * module's side effects twice is worse than the original failure.\n */\nexport async function loadChunk<T>(loader: () => Promise<T>): Promise<T> {\n    try {\n        return await loader();\n    } catch (error) {\n        if (!isChunkLoadError(error)) throw error;\n        // A blip resolves inside a few hundred ms; a stale hash never will.\n        await new Promise(resolve => setTimeout(resolve, 250));\n        try {\n            return await loader();\n        } catch (retryError) {\n            throw chunkLoadError(retryError);\n        }\n    }\n}\n\n/**\n * `React.lazy` with the retry above. A drop-in replacement — use it for every\n * lazy route or dialog, since any one of them can be the first chunk a stale\n * tab reaches for.\n *\n * Note that React caches the rejection: once a lazy component has failed, later\n * renders re-throw without calling the loader again. Resetting an error boundary\n * therefore cannot recover it, which is why the boundary offers a reload.\n */\nexport function lazyChunk<T extends React.ComponentType<any>>(\n    loader: () => Promise<{ default: T }>\n): React.LazyExoticComponent<T> {\n    return React.lazy(() => loadChunk(loader));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,IAAM,wBAAwB;;;;;;;AAQ9B,IAAM,uBAAuB;CACzB;CACA;CACA;CACA;CACA;CACA;AACJ;;;;;;;;;AAUA,SAAgB,iBAAiB,OAAyB;CACtD,IAAI,CAAC,SAAS,OAAO,UAAU,UAAU,OAAO;CAChD,IAAK,MAAkC,2BAA2B,MAAM,OAAO;CAC/E,MAAM,UAAW,MAAgC;CACjD,IAAI,OAAO,YAAY,UAAU,OAAO;CACxC,MAAM,QAAQ,QAAQ,YAAY;CAClC,OAAO,qBAAqB,MAAK,YAAW,MAAM,SAAS,OAAO,CAAC;AACvE;AAEA,SAAS,eAAe,OAAuB;CAC3C,MAAM,wBAAQ,IAAI,MACd,qGACJ;CACA,OAAO,OAAO,OAAO;GAAG,wBAAwB;EACpD;CAAM,CAAC;CACH,OAAO;AACX;;;;;;;;AASA,eAAsB,UAAa,QAAsC;CACrE,IAAI;EACA,OAAO,MAAM,OAAO;CACxB,SAAS,OAAO;EACZ,IAAI,CAAC,iBAAiB,KAAK,GAAG,MAAM;EAEpC,MAAM,IAAI,SAAQ,YAAW,WAAW,SAAS,GAAG,CAAC;EACrD,IAAI;GACA,OAAO,MAAM,OAAO;EACxB,SAAS,YAAY;GACjB,MAAM,eAAe,UAAU;EACnC;CACJ;AACJ;;;;;;;;;;AAWA,SAAgB,UACZ,QAC4B;CAC5B,OAAO,MAAM,WAAW,UAAU,MAAM,CAAC;AAC7C"}

package/dist/views/CardView.d.ts

@@ -2,7 +2,12 @@ import React from "react";
 import { CollectionSize } from "./ListView.js";
 import { type ViewScrollEvent } from "./useScrollParentRestoration.js";
 export type CardViewProps<T> = {
-    data: T[];
+    /**
+     * The items, in order. A position holding `undefined` is an item that
+     * exists but has not been read yet: a placeholder card is drawn in its
+     * place, and `renderCard` is not called for it.
+     */
+    data: (T | undefined)[];
     dataLoading?: boolean;
     noMoreToLoad?: boolean;
     dataLoadingError?: Error;
@@ -17,6 +22,16 @@ export type CardViewProps<T> = {
     onSelectionChange?: (item: T, selected: boolean) => void;
     onScroll?: (props: ViewScrollEvent) => void;
     initialScroll?: number;
+    /**
+     * Called with the positions in `data` of the cards on screen — the rows
+     * of cards on screen, not the ones drawn ahead of them — end exclusive,
+     * each time they change. While the grid is still scrolling to
+     * `initialScroll`, the cards there.
+     */
+    onRowsRendered?: (range: {
+        start: number;
+        end: number;
+    }) => void;
     size?: CollectionSize;
     renderCard: (item: T, extra: {
         selected: boolean;
@@ -31,4 +46,13 @@ export type CardViewProps<T> = {
     }) => React.ReactNode;
     emptyComponent?: React.ReactNode;
 };
-export declare function CardView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, onScroll, initialScroll, size, renderCard, emptyComponent }: CardViewProps<T>): React.JSX.Element;
+/**
+ * A card grid that draws the rows of cards on screen and a couple either side.
+ *
+ * Every loaded card used to stay mounted — about 22 DOM nodes each, 44,000 at
+ * 2,000 cards. The grid looks as it did: each row is a grid with the same
+ * column classes and gap, and a row is as tall as its tallest card, measured
+ * as it is drawn rather than assumed. Rows not drawn yet count at the average
+ * height measured so far.
+ */
+export declare function CardView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, onScroll, initialScroll, onRowsRendered, size, renderCard, emptyComponent }: CardViewProps<T>): React.JSX.Element;

package/dist/views/CardView.es.js

@@ -0,0 +1,435 @@
+import { cls } from "../util/cls.es.js";
+import { Card } from "../components/Card.es.js";
+import { CircularProgress } from "../components/CircularProgress.es.js";
+import { Typography } from "../components/Typography.es.js";
+import { useUiLabels } from "../hooks/UiLabelsContext.es.js";
+import { Skeleton } from "../components/Skeleton.es.js";
+import { getScrollParent, useScrollParentRestoration } from "./useScrollParentRestoration.es.js";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/CardView.tsx
+function getGridColumnsClass(size) {
+	switch (size) {
+		case "xs": return "grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10";
+		case "s": return "grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8";
+		case "m": return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+		case "l": return "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4";
+		case "xl": return "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3";
+		default: return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+	}
+}
+/**
+* The column count `getGridColumnsClass` gives at this viewport width — the
+* Tailwind breakpoints are viewport widths. Only a fallback: the count is read
+* off the grid as laid out whenever there is a layout to read it from.
+*/
+function columnsAtWidth(size, width) {
+	const steps = {
+		xs: [
+			4,
+			5,
+			6,
+			8,
+			10
+		],
+		s: [
+			3,
+			4,
+			5,
+			6,
+			8
+		],
+		m: [
+			2,
+			3,
+			4,
+			5,
+			6
+		],
+		l: [
+			2,
+			2,
+			3,
+			4,
+			4
+		],
+		xl: [
+			1,
+			2,
+			2,
+			3,
+			3
+		]
+	};
+	const [base, sm, md, lg, xl] = steps[size] ?? steps.m;
+	if (width >= 1280) return xl;
+	if (width >= 1024) return lg;
+	if (width >= 768) return md;
+	if (width >= 640) return sm;
+	return base;
+}
+/** The tracks of a laid-out grid, or `undefined` where nothing is laid out. */
+function columnsOf(grid) {
+	if (!grid) return void 0;
+	const tracks = window.getComputedStyle(grid).gridTemplateColumns;
+	if (!tracks || tracks === "none") return void 0;
+	const count = tracks.trim().split(/\s+/).filter((track) => !track.startsWith("[")).length;
+	return count > 0 ? count : void 0;
+}
+/** A first guess at a row of cards' height, gap included, before one is measured. */
+function defaultRowHeight(size) {
+	switch (size) {
+		case "xs": return 170;
+		case "s": return 220;
+		case "l": return 370;
+		case "xl": return 440;
+		default: return 290;
+	}
+}
+/**
+* The average row height measured last, per size and column count, so a grid
+* that mounts again (coming back from a record) places its rows — and the
+* scroll position it restores — with the heights the cards actually had.
+*/
+var lastRowHeights = /* @__PURE__ */ new Map();
+/** Rows of cards drawn above and below the screen. */
+var OVERSCAN_ROWS = 2;
+/** The grid's `gap-4`, which a row carries below it as padding. */
+var ROW_GAP = 16;
+/**
+* A card grid that draws the rows of cards on screen and a couple either side.
+*
+* Every loaded card used to stay mounted — about 22 DOM nodes each, 44,000 at
+* 2,000 cards. The grid looks as it did: each row is a grid with the same
+* column classes and gap, and a row is as tall as its tallest card, measured
+* as it is drawn rather than assumed. Rows not drawn yet count at the average
+* height measured so far.
+*/
+function CardView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, onScroll, initialScroll, onRowsRendered, size = "m", renderCard, emptyComponent }) {
+	const labels = useUiLabels();
+	const containerRef = useRef(null);
+	const rowsRef = useRef(null);
+	const probeRef = useRef(null);
+	const isLoadingMore = useRef(false);
+	const gridColumnsClass = getGridColumnsClass(size);
+	const [columns, setColumns] = useState(() => columnsAtWidth(size, typeof window === "undefined" ? 1024 : window.innerWidth));
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(800);
+	const [reported, setReported] = useState({
+		top: 0,
+		height: 800
+	});
+	const paginationStateRef = useRef({
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	});
+	useEffect(() => {
+		paginationStateRef.current = {
+			paginationEnabled,
+			noMoreToLoad,
+			itemCount,
+			pageSize
+		};
+	}, [
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	]);
+	useEffect(() => {
+		if (!dataLoading) isLoadingMore.current = false;
+	}, [dataLoading]);
+	const { pendingScroll } = useScrollParentRestoration({
+		containerRef,
+		initialScroll,
+		onScroll,
+		dataLength: data.length
+	});
+	const readColumns = useCallback(() => {
+		const next = columnsOf(probeRef.current) ?? columnsAtWidth(size, window.innerWidth);
+		setColumns((current) => current === next ? current : next);
+	}, [size]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const scrollEl = getScrollParent(el);
+		if (!scrollEl) return;
+		let rafId = null;
+		const update = () => {
+			rafId = null;
+			const scrollRect = scrollEl.getBoundingClientRect();
+			const rowsTopRelative = (rowsRef.current ?? el).getBoundingClientRect().top - scrollRect.top;
+			setScrollTop(Math.max(0, -rowsTopRelative));
+			setViewportHeight(scrollRect.height);
+			const restoring = pendingScroll.current;
+			const top = restoring ? restoring - (scrollEl.scrollTop + rowsTopRelative) : -rowsTopRelative;
+			const height = Math.max(0, scrollRect.height + Math.min(0, top));
+			setReported((current) => current.top === Math.max(0, top) && current.height === height ? current : {
+				top: Math.max(0, top),
+				height
+			});
+			const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+			if (pe && !nm && !isLoadingMore.current && scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 400) {
+				isLoadingMore.current = true;
+				setItemCount?.((ic ?? ps) + ps);
+			}
+		};
+		const onScrollEvent = () => {
+			if (rafId === null) rafId = requestAnimationFrame(update);
+		};
+		scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
+		const ro = new ResizeObserver(() => {
+			readColumns();
+			update();
+		});
+		ro.observe(scrollEl);
+		ro.observe(el);
+		readColumns();
+		update();
+		return () => {
+			scrollEl.removeEventListener("scroll", onScrollEvent);
+			ro.disconnect();
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [
+		setItemCount,
+		readColumns,
+		pendingScroll
+	]);
+	useLayoutEffect(() => readColumns(), [readColumns, gridColumnsClass]);
+	const heightsRef = useRef({
+		columns,
+		heights: /* @__PURE__ */ new Map()
+	});
+	if (heightsRef.current.columns !== columns) heightsRef.current = {
+		columns,
+		heights: /* @__PURE__ */ new Map()
+	};
+	const [measured, setMeasured] = useState(0);
+	const memoryKey = `${size}:${columns}`;
+	const observerRef = useRef(null);
+	useEffect(() => {
+		const observer = new ResizeObserver((entries) => {
+			let changed = false;
+			const { heights } = heightsRef.current;
+			for (const entry of entries) {
+				const target = entry.target;
+				const row = Number(target.dataset.row);
+				if (!Number.isFinite(row) || Number(target.dataset.columns) !== heightsRef.current.columns) continue;
+				const height = target.getBoundingClientRect().height;
+				if (height > 0 && heights.get(row) !== height) {
+					heights.set(row, height);
+					changed = true;
+				}
+			}
+			if (changed) setMeasured((n) => n + 1);
+		});
+		observerRef.current = observer;
+		return () => {
+			observer.disconnect();
+			observerRef.current = null;
+		};
+	}, []);
+	const observeRow = useCallback((element) => {
+		const observer = observerRef.current;
+		if (!element || !observer) return;
+		observer.observe(element);
+		return () => observer.unobserve(element);
+	}, []);
+	const rowCount = Math.ceil(data.length / columns);
+	const layout = useMemo(() => {
+		const { heights } = heightsRef.current;
+		let total = 0;
+		heights.forEach((height) => {
+			total += height;
+		});
+		const estimate = heights.size > 0 ? total / heights.size : lastRowHeights.get(memoryKey) ?? defaultRowHeight(size);
+		const tops = new Float64Array(rowCount + 1);
+		for (let r = 0; r < rowCount; r++) tops[r + 1] = tops[r] + (heights.get(r) ?? estimate);
+		return {
+			tops,
+			estimate
+		};
+	}, [
+		rowCount,
+		columns,
+		measured,
+		memoryKey,
+		size
+	]);
+	useEffect(() => {
+		if (heightsRef.current.heights.size > 0) lastRowHeights.set(memoryKey, layout.estimate);
+	}, [layout, memoryKey]);
+	/** The row at this offset from the top of the rows. */
+	const rowAt = useCallback((offset) => {
+		const { tops } = layout;
+		let low = 0;
+		let high = rowCount;
+		while (low < high) {
+			const mid = low + high >> 1;
+			if (tops[mid + 1] <= offset) low = mid + 1;
+			else high = mid;
+		}
+		return Math.min(low, Math.max(0, rowCount - 1));
+	}, [layout, rowCount]);
+	const firstRow = rowCount === 0 ? 0 : Math.max(0, rowAt(scrollTop) - OVERSCAN_ROWS);
+	const lastRow = rowCount === 0 ? -1 : Math.min(rowCount - 1, rowAt(scrollTop + viewportHeight) + OVERSCAN_ROWS);
+	const visibleStart = rowCount === 0 ? 0 : Math.min(data.length, rowAt(reported.top) * columns);
+	const visibleEnd = rowCount === 0 || reported.height === 0 ? visibleStart : Math.min(data.length, (rowAt(reported.top + reported.height - 1) + 1) * columns);
+	useEffect(() => {
+		if (onRowsRendered && data.length > 0) onRowsRendered({
+			start: visibleStart,
+			end: visibleEnd
+		});
+	}, [
+		visibleStart,
+		visibleEnd,
+		onRowsRendered
+	]);
+	useLayoutEffect(() => {
+		const { heights } = heightsRef.current;
+		let changed = false;
+		rowsRef.current?.querySelectorAll("[data-row]").forEach((element) => {
+			const row = Number(element.dataset.row);
+			if (heights.has(row)) return;
+			const height = element.getBoundingClientRect().height;
+			if (height > 0) {
+				heights.set(row, height);
+				changed = true;
+			}
+		});
+		if (changed) setMeasured((n) => n + 1);
+	}, [
+		firstRow,
+		lastRow,
+		columns,
+		data
+	]);
+	const getItemId = useCallback((item) => {
+		if (item && typeof item === "object" && "id" in item) {
+			const id = item.id;
+			return typeof id === "number" ? id : String(id);
+		}
+		return String(item);
+	}, []);
+	const isInitialLoading = dataLoading && data.length === 0 && !dataLoadingError;
+	const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
+	const drawnRows = [];
+	for (let r = firstRow; r <= lastRow; r++) {
+		const cards = [];
+		for (let index = r * columns; index < Math.min(data.length, (r + 1) * columns); index++) {
+			const item = data[index];
+			if (item === void 0) {
+				cards.push(/* @__PURE__ */ jsx(UnreadCard, { height: Math.max(0, layout.estimate - ROW_GAP) }, `__unread_${index}`));
+				continue;
+			}
+			const id = getItemId(item);
+			const selected = selectedIds?.has(id) ?? false;
+			const highlighted = highlightedIds?.has(id) ?? false;
+			const handleClick = (e) => {
+				if (e && (e.metaKey || e.ctrlKey) && selectionEnabled) {
+					e.preventDefault();
+					onSelectionChange?.(item, !selected);
+					return;
+				}
+				onItemClick?.(item);
+			};
+			const handleSelectionChange = (val) => {
+				onSelectionChange?.(item, val);
+			};
+			cards.push(/* @__PURE__ */ jsx(React.Fragment, { children: renderCard(item, {
+				selected,
+				highlighted,
+				onSelectionChange: handleSelectionChange,
+				onClick: handleClick
+			}) }, id || index));
+		}
+		drawnRows.push(/* @__PURE__ */ jsx("div", {
+			ref: observeRow,
+			"data-row": r,
+			"data-columns": columns,
+			className: cls("grid gap-4", gridColumnsClass),
+			style: r < rowCount - 1 ? { paddingBottom: ROW_GAP } : void 0,
+			children: cards
+		}, r));
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "w-full p-4",
+		children: dataLoadingError && data.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "h-full flex items-center justify-center p-8",
+			children: /* @__PURE__ */ jsx(Typography, {
+				className: "text-red-500",
+				children: labels.errorLoadingData(dataLoadingError.message)
+			})
+		}) : isInitialLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center py-12 px-8",
+			children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+		}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "w-full flex items-center justify-center py-12 px-8",
+			children: emptyComponent ?? /* @__PURE__ */ jsx(Typography, {
+				variant: "label",
+				color: "secondary",
+				children: labels.noEntriesFound
+			})
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "max-w-7xl mx-auto",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					ref: probeRef,
+					"aria-hidden": true,
+					className: cls("grid gap-4 h-0 overflow-hidden", gridColumnsClass)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: rowsRef,
+					style: {
+						position: "relative",
+						height: layout.tops[rowCount]
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							top: layout.tops[firstRow] ?? 0,
+							left: 0,
+							right: 0
+						},
+						children: drawnRows
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center py-8",
+					children: [dataLoading && /* @__PURE__ */ jsx(CircularProgress, { size: "small" }), !dataLoading && noMoreToLoad && data.length > 0 && /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						color: "secondary",
+						children: labels.allEntriesLoaded(data.length)
+					})]
+				})
+			]
+		})
+	});
+}
+/** A card that exists but has not been read yet. */
+function UnreadCard({ height }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "p-3 flex flex-col gap-2",
+		style: { height },
+		"aria-busy": true,
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "grow" }),
+			/* @__PURE__ */ jsx(Skeleton, {
+				width: 120,
+				height: 12
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				width: 80,
+				height: 10
+			})
+		]
+	});
+}
+//#endregion
+export { CardView };
+
+//# sourceMappingURL=CardView.es.js.map

package/dist/views/CardView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardView.es.js","names":[],"sources":["../../src/views/CardView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport {\n    Card,\n    CircularProgress,\n    Skeleton,\n    Typography\n} from \"../components\";\nimport { cls } from \"../util\";\nimport { useUiLabels } from \"../hooks/UiLabelsContext\";\n\nimport { CollectionSize } from \"./ListView\";\nimport { getScrollParent, useScrollParentRestoration, type ViewScrollEvent } from \"./useScrollParentRestoration\";\n\nexport type CardViewProps<T> = {\n    /**\n     * The items, in order. A position holding `undefined` is an item that\n     * exists but has not been read yet: a placeholder card is drawn in its\n     * place, and `renderCard` is not called for it.\n     */\n    data: (T | undefined)[];\n    dataLoading?: boolean;\n    noMoreToLoad?: boolean;\n    dataLoadingError?: Error;\n    itemCount?: number;\n    setItemCount?: (itemCount: number) => void;\n    pageSize?: number;\n    paginationEnabled?: boolean;\n\n    onItemClick?: (item: T) => void;\n    selectedIds?: Set<string | number>;\n    highlightedIds?: Set<string | number>;\n    selectionEnabled?: boolean;\n    onSelectionChange?: (item: T, selected: boolean) => void;\n\n    onScroll?: (props: ViewScrollEvent) => void;\n    initialScroll?: number;\n\n    /**\n     * Called with the positions in `data` of the cards on screen — the rows\n     * of cards on screen, not the ones drawn ahead of them — end exclusive,\n     * each time they change. While the grid is still scrolling to\n     * `initialScroll`, the cards there.\n     */\n    onRowsRendered?: (range: { start: number; end: number }) => void;\n\n    size?: CollectionSize;\n    renderCard: (\n        item: T,\n        extra: {\n            selected: boolean;\n            highlighted: boolean;\n            onSelectionChange: (selected: boolean) => void;\n            /**\n             * Absent on a keyboard activation — a card is a `role=\"button\"` and\n             * Enter/Space reach this with no event. Only the modifier branch\n             * needs one; the click itself does not.\n             */\n            onClick: (e?: React.MouseEvent) => void;\n        }\n    ) => React.ReactNode;\n    emptyComponent?: React.ReactNode;\n};\n\nfunction getGridColumnsClass(size: CollectionSize): string {\n    switch (size) {\n        case \"xs\":\n            return \"grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10\";\n        case \"s\":\n            return \"grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8\";\n        case \"m\":\n            return \"grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\";\n        case \"l\":\n            return \"grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4\";\n        case \"xl\":\n            return \"grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3\";\n        default:\n            return \"grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\";\n    }\n}\n\n/**\n * The column count `getGridColumnsClass` gives at this viewport width — the\n * Tailwind breakpoints are viewport widths. Only a fallback: the count is read\n * off the grid as laid out whenever there is a layout to read it from.\n */\nfunction columnsAtWidth(size: CollectionSize, width: number): number {\n    const steps: Record<CollectionSize, [number, number, number, number, number]> = {\n        xs: [4, 5, 6, 8, 10],\n        s: [3, 4, 5, 6, 8],\n        m: [2, 3, 4, 5, 6],\n        l: [2, 2, 3, 4, 4],\n        xl: [1, 2, 2, 3, 3]\n    };\n    const [base, sm, md, lg, xl] = steps[size] ?? steps.m;\n    if (width >= 1280) return xl;\n    if (width >= 1024) return lg;\n    if (width >= 768) return md;\n    if (width >= 640) return sm;\n    return base;\n}\n\n/** The tracks of a laid-out grid, or `undefined` where nothing is laid out. */\nfunction columnsOf(grid: HTMLElement | null): number | undefined {\n    if (!grid) return undefined;\n    const tracks = window.getComputedStyle(grid).gridTemplateColumns;\n    if (!tracks || tracks === \"none\") return undefined;\n    const count = tracks.trim().split(/\\s+/).filter(track => !track.startsWith(\"[\")).length;\n    return count > 0 ? count : undefined;\n}\n\n/** A first guess at a row of cards' height, gap included, before one is measured. */\nfunction defaultRowHeight(size: CollectionSize): number {\n    switch (size) {\n        case \"xs\": return 170;\n        case \"s\": return 220;\n        case \"l\": return 370;\n        case \"xl\": return 440;\n        default: return 290;\n    }\n}\n\n/**\n * The average row height measured last, per size and column count, so a grid\n * that mounts again (coming back from a record) places its rows — and the\n * scroll position it restores — with the heights the cards actually had.\n */\nconst lastRowHeights = new Map<string, number>();\n\n/** Rows of cards drawn above and below the screen. */\nconst OVERSCAN_ROWS = 2;\n/** The grid's `gap-4`, which a row carries below it as padding. */\nconst ROW_GAP = 16;\n\n/**\n * A card grid that draws the rows of cards on screen and a couple either side.\n *\n * Every loaded card used to stay mounted — about 22 DOM nodes each, 44,000 at\n * 2,000 cards. The grid looks as it did: each row is a grid with the same\n * column classes and gap, and a row is as tall as its tallest card, measured\n * as it is drawn rather than assumed. Rows not drawn yet count at the average\n * height measured so far.\n */\nexport function CardView<T>({\n    data,\n    dataLoading = false,\n    noMoreToLoad = false,\n    dataLoadingError,\n    itemCount,\n    setItemCount,\n    pageSize = 50,\n    paginationEnabled = true,\n\n    onItemClick,\n    selectedIds,\n    highlightedIds,\n    selectionEnabled = true,\n    onSelectionChange,\n\n    onScroll,\n    initialScroll,\n    onRowsRendered,\n    size = \"m\",\n    renderCard,\n    emptyComponent\n}: CardViewProps<T>) {\n    const labels = useUiLabels();\n    const containerRef = useRef<HTMLDivElement>(null);\n    // The rows' own box: the window of drawn rows is measured against it.\n    const rowsRef = useRef<HTMLDivElement>(null);\n    // An empty grid with the cards' column classes, to read the column count\n    // the breakpoints give right now.\n    const probeRef = useRef<HTMLDivElement>(null);\n    const isLoadingMore = useRef(false);\n\n    const gridColumnsClass = getGridColumnsClass(size);\n    const [columns, setColumns] = useState(() =>\n        columnsAtWidth(size, typeof window === \"undefined\" ? 1024 : window.innerWidth));\n    const [scrollTop, setScrollTop] = useState(0);\n    const [viewportHeight, setViewportHeight] = useState(800);\n    // Where the cards on screen start, for `onRowsRendered`: the scroll\n    // position the grid is being restored to, until it gets there.\n    const [reported, setReported] = useState({ top: 0, height: 800 });\n\n    // Sync mutable ref with pagination settings to avoid resetting listeners\n    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, itemCount, pageSize });\n    useEffect(() => {\n        paginationStateRef.current = { paginationEnabled, noMoreToLoad, itemCount, pageSize };\n    }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);\n\n    useEffect(() => {\n        if (!dataLoading) isLoadingMore.current = false;\n    }, [dataLoading]);\n\n    const { pendingScroll } = useScrollParentRestoration({ containerRef, initialScroll, onScroll, dataLength: data.length });\n\n    const readColumns = useCallback(() => {\n        const next = columnsOf(probeRef.current) ?? columnsAtWidth(size, window.innerWidth);\n        setColumns(current => current === next ? current : next);\n    }, [size]);\n\n    // Infinite scroll, the window of drawn rows, and resizes\n    useEffect(() => {\n        const el = containerRef.current;\n        if (!el) return;\n        const scrollEl = getScrollParent(el);\n        if (!scrollEl) return;\n\n        let rafId: number | null = null;\n\n        const update = () => {\n            rafId = null;\n            const scrollRect = scrollEl.getBoundingClientRect();\n            const rowsRect = (rowsRef.current ?? el).getBoundingClientRect();\n            const rowsTopRelative = rowsRect.top - scrollRect.top;\n            setScrollTop(Math.max(0, -rowsTopRelative));\n            setViewportHeight(scrollRect.height);\n            const restoring = pendingScroll.current;\n            const top = restoring\n                ? restoring - (scrollEl.scrollTop + rowsTopRelative)\n                : -rowsTopRelative;\n            // Only the part of the screen the rows are in: not what is above them.\n            const height = Math.max(0, scrollRect.height + Math.min(0, top));\n            setReported(current => current.top === Math.max(0, top) && current.height === height\n                ? current\n                : { top: Math.max(0, top), height });\n\n            const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;\n            if (\n                pe &&\n                !nm &&\n                !isLoadingMore.current &&\n                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 400\n            ) {\n                isLoadingMore.current = true;\n                setItemCount?.((ic ?? ps) + ps);\n            }\n        };\n\n        const onScrollEvent = () => {\n            if (rafId === null) rafId = requestAnimationFrame(update);\n        };\n\n        scrollEl.addEventListener(\"scroll\", onScrollEvent, { passive: true });\n        const ro = new ResizeObserver(() => {\n            readColumns();\n            update();\n        });\n        ro.observe(scrollEl);\n        ro.observe(el);\n        readColumns();\n        update();\n\n        return () => {\n            scrollEl.removeEventListener(\"scroll\", onScrollEvent);\n            ro.disconnect();\n            if (rafId !== null) cancelAnimationFrame(rafId);\n        };\n    }, [setItemCount, readColumns, pendingScroll]);\n\n    // The size changes the column classes: read the count again.\n    useLayoutEffect(() => readColumns(), [readColumns, gridColumnsClass]);\n\n    // Row heights as measured, by row. A different column count regroups the\n    // cards into different rows, so the heights start over.\n    const heightsRef = useRef<{ columns: number; heights: Map<number, number> }>({ columns, heights: new Map() });\n    if (heightsRef.current.columns !== columns) heightsRef.current = { columns, heights: new Map() };\n    const [measured, setMeasured] = useState(0);\n    const memoryKey = `${size}:${columns}`;\n\n    const observerRef = useRef<ResizeObserver | null>(null);\n    useEffect(() => {\n        const observer = new ResizeObserver((entries) => {\n            let changed = false;\n            const { heights } = heightsRef.current;\n            for (const entry of entries) {\n                const target = entry.target as HTMLElement;\n                const row = Number(target.dataset.row);\n                if (!Number.isFinite(row) || Number(target.dataset.columns) !== heightsRef.current.columns) continue;\n                const height = target.getBoundingClientRect().height;\n                if (height > 0 && heights.get(row) !== height) {\n                    heights.set(row, height);\n                    changed = true;\n                }\n            }\n            if (changed) setMeasured(n => n + 1);\n        });\n        observerRef.current = observer;\n        return () => {\n            observer.disconnect();\n            observerRef.current = null;\n        };\n    }, []);\n\n    const observeRow = useCallback((element: HTMLDivElement | null) => {\n        const observer = observerRef.current;\n        if (!element || !observer) return;\n        observer.observe(element);\n        return () => observer.unobserve(element);\n    }, []);\n\n    const rowCount = Math.ceil(data.length / columns);\n\n    // Each row's top, and the height of all of them: measured rows as they\n    // are, the others at the average of the measured ones.\n    const layout = useMemo(() => {\n        const { heights } = heightsRef.current;\n        let total = 0;\n        heights.forEach((height) => {\n            total += height;\n        });\n        const estimate = heights.size > 0\n            ? total / heights.size\n            : lastRowHeights.get(memoryKey) ?? defaultRowHeight(size);\n        const tops = new Float64Array(rowCount + 1);\n        for (let r = 0; r < rowCount; r++) {\n            tops[r + 1] = tops[r] + (heights.get(r) ?? estimate);\n        }\n        return { tops, estimate };\n    // `measured` is how a new measurement reaches this memo.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [rowCount, columns, measured, memoryKey, size]);\n\n    useEffect(() => {\n        if (heightsRef.current.heights.size > 0) lastRowHeights.set(memoryKey, layout.estimate);\n    }, [layout, memoryKey]);\n\n    /** The row at this offset from the top of the rows. */\n    const rowAt = useCallback((offset: number) => {\n        const { tops } = layout;\n        let low = 0;\n        let high = rowCount;\n        while (low < high) {\n            const mid = (low + high) >> 1;\n            if (tops[mid + 1] <= offset) low = mid + 1;\n            else high = mid;\n        }\n        return Math.min(low, Math.max(0, rowCount - 1));\n    }, [layout, rowCount]);\n\n    const firstRow = rowCount === 0 ? 0 : Math.max(0, rowAt(scrollTop) - OVERSCAN_ROWS);\n    const lastRow = rowCount === 0 ? -1 : Math.min(rowCount - 1, rowAt(scrollTop + viewportHeight) + OVERSCAN_ROWS);\n\n    // The cards of the rows on screen, by position in `data`.\n    const visibleStart = rowCount === 0 ? 0 : Math.min(data.length, rowAt(reported.top) * columns);\n    const visibleEnd = rowCount === 0 || reported.height === 0\n        ? visibleStart\n        : Math.min(data.length, (rowAt(reported.top + reported.height - 1) + 1) * columns);\n    useEffect(() => {\n        if (onRowsRendered && data.length > 0) onRowsRendered({ start: visibleStart, end: visibleEnd });\n        // Not on `data`: a page appended below the screen moves nothing on it.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [visibleStart, visibleEnd, onRowsRendered]);\n\n    // A drawn row the observer has not measured — one whose cards changed\n    // with the column count, keeping its size — is measured here, before\n    // paint. The observer reports every change after that.\n    useLayoutEffect(() => {\n        const { heights } = heightsRef.current;\n        let changed = false;\n        rowsRef.current?.querySelectorAll<HTMLElement>(\"[data-row]\").forEach((element) => {\n            const row = Number(element.dataset.row);\n            if (heights.has(row)) return;\n            const height = element.getBoundingClientRect().height;\n            if (height > 0) {\n                heights.set(row, height);\n                changed = true;\n            }\n        });\n        if (changed) setMeasured(n => n + 1);\n    }, [firstRow, lastRow, columns, data]);\n\n    const getItemId = useCallback((item: T | undefined): string | number => {\n        if (item && typeof item === \"object\" && \"id\" in item) {\n            const id = (item as Record<\"id\", unknown>).id;\n            return typeof id === \"number\" ? id : String(id);\n        }\n        return String(item);\n    }, []);\n\n    const isInitialLoading = dataLoading && data.length === 0 && !dataLoadingError;\n    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;\n\n    const drawnRows: React.ReactNode[] = [];\n    for (let r = firstRow; r <= lastRow; r++) {\n        const cards: React.ReactNode[] = [];\n        for (let index = r * columns; index < Math.min(data.length, (r + 1) * columns); index++) {\n            const item = data[index];\n            if (item === undefined) {\n                cards.push(<UnreadCard key={`__unread_${index}`} height={Math.max(0, layout.estimate - ROW_GAP)}/>);\n                continue;\n            }\n            const id = getItemId(item);\n            const selected = selectedIds?.has(id) ?? false;\n            const highlighted = highlightedIds?.has(id) ?? false;\n\n            const handleClick = (e?: React.MouseEvent) => {\n                if (e && (e.metaKey || e.ctrlKey) && selectionEnabled) {\n                    e.preventDefault();\n                    onSelectionChange?.(item, !selected);\n                    return;\n                }\n                onItemClick?.(item);\n            };\n\n            const handleSelectionChange = (val: boolean) => {\n                onSelectionChange?.(item, val);\n            };\n\n            cards.push(\n                <React.Fragment key={id || index}>\n                    {renderCard(item, {\n                        selected,\n                        highlighted,\n                        onSelectionChange: handleSelectionChange,\n                        onClick: handleClick\n                    })}\n                </React.Fragment>\n            );\n        }\n        drawnRows.push(\n            <div key={r}\n                ref={observeRow}\n                data-row={r}\n                data-columns={columns}\n                className={cls(\"grid gap-4\", gridColumnsClass)}\n                // The gap between rows, carried by the row above it.\n                style={r < rowCount - 1 ? { paddingBottom: ROW_GAP } : undefined}>\n                {cards}\n            </div>\n        );\n    }\n\n    return (\n        <div\n            ref={containerRef}\n            className=\"w-full p-4\"\n        >\n            {dataLoadingError && data.length === 0 ? (\n                <div className=\"h-full flex items-center justify-center p-8\">\n                    <Typography className=\"text-red-500\">\n                        {labels.errorLoadingData(dataLoadingError.message)}\n                    </Typography>\n                </div>\n            ) : isInitialLoading ? (\n                <div className=\"flex items-center justify-center py-12 px-8\">\n                    <CircularProgress size=\"small\"/>\n                </div>\n            ) : isEmpty ? (\n                <div className=\"w-full flex items-center justify-center py-12 px-8\">\n                    {emptyComponent ?? (\n                        <Typography variant=\"label\" color=\"secondary\">\n                            {labels.noEntriesFound}\n                        </Typography>\n                    )}\n                </div>\n            ) : (\n                <div className=\"max-w-7xl mx-auto\">\n                    <div ref={probeRef} aria-hidden={true} className={cls(\"grid gap-4 h-0 overflow-hidden\", gridColumnsClass)}/>\n                    <div ref={rowsRef} style={{ position: \"relative\", height: layout.tops[rowCount] }}>\n                        <div style={{ position: \"absolute\", top: layout.tops[firstRow] ?? 0, left: 0, right: 0 }}>\n                            {drawnRows}\n                        </div>\n                    </div>\n\n                    <div className=\"flex items-center justify-center py-8\">\n                        {dataLoading && (\n                            <CircularProgress size=\"small\"/>\n                        )}\n                        {!dataLoading && noMoreToLoad && data.length > 0 && (\n                            <Typography variant=\"caption\" color=\"secondary\">\n                                {labels.allEntriesLoaded(data.length)}\n                            </Typography>\n                        )}\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n}\n\n/** A card that exists but has not been read yet. */\nfunction UnreadCard({ height }: { height: number }) {\n    return (\n        <Card className=\"p-3 flex flex-col gap-2\" style={{ height }} aria-busy={true}>\n            <Skeleton className=\"grow\"/>\n            <Skeleton width={120} height={12}/>\n            <Skeleton width={80} height={10}/>\n        </Card>\n    );\n}\n"],"mappings":"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"}