@protobase/ui 0.12.22 → 0.13.3

package/dist/app/create/create-page.js

@@ -94,6 +94,7 @@ const LoadedCreate = ({ resource, values }) => {
 			"page",
 			"list",
 			"first-page",
+			"map",
 			"facets",
 			"series"
 		]) queryClient.invalidateQueries({ queryKey: [prefix, resource] });

package/dist/app/current-address.d.ts

@@ -1,6 +1,6 @@
-import { AppAddress, FilterLayout, ResourceModel, ViewModel } from "@protobase/schema";
+import { AppAddress, FilterLayout, MapView, ResourceModel, ViewModel } from "@protobase/schema";
 //#region src/app/current-address.d.ts
-/** A list as the app shows it: every value there, the view's default where the address names none. */
+/** A list as the app shows it: every value there, the view's default where the address names none; `map` has none. */
 export type ListAddress = {
   kind: 'list';
   resource: string;
@@ -8,6 +8,7 @@ export type ListAddress = {
   filter: string;
   orderBy: string;
   filterLayout: FilterLayout;
+  map?: MapView;
 };
 /** The address the app shows, as logical values. A record's key is in the text form the record API takes. */
 export type CurrentAddress = ListAddress | {

package/dist/app/current-address.js

@@ -35,7 +35,8 @@ const changedList = (read, change, defaults) => {
 		...next.filter && { filter: next.filter },
 		...differs("display") && { display: next.display },
 		...differs("orderBy") && { orderBy: next.orderBy },
-		...differs("filterLayout") && { filterLayout: next.filterLayout }
+		...differs("filterLayout") && { filterLayout: next.filterLayout },
+		...next.map && { map: next.map }
 	};
 };
 //#endregion

package/dist/app/delete/use-delete-flow.js

@@ -25,7 +25,8 @@ const useDeleteFlow = ({ model, view, onDeleted, onReview, restore }) => {
 		for (const prefix of [
 			"page",
 			"list",
-			"first-page"
+			"first-page",
+			"map"
 		]) queryClient.invalidateQueries({ queryKey: [prefix, model.name] });
 		for (const prefix of [
 			"facets",

package/dist/app/displays/card-carousel.js

@@ -1,6 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { cardPhotoList, cardPhotosRequest, shownPhoto } from "./card-photos.js";
 import { useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -17,7 +18,9 @@ const CardCarousel = ({ photos, recordKey, cover, children }) => {
 	const client = useClient();
 	const [opened, setOpened] = useState(false);
 	const [step, setStep] = useState(0);
-	const request = cardPhotosRequest(photos, recordKey);
+	const target = useAdminMeta().resources[photos.resource];
+	const placeholder = target?.fields[photos.image]?.file?.placeholder;
+	const request = cardPhotosRequest(photos, recordKey, placeholder !== void 0 && target?.fields[placeholder] ? placeholder : void 0);
 	const loaded = useQuery({
 		queryKey: keys.list(photos.resource, request.filter, request.orderBy ?? "", request.pageSize, `card-photos:${photos.image}`),
 		enabled: opened,

package/dist/app/displays/card-layout.js

@@ -0,0 +1,19 @@
+/** How many cards fit across `width`, as a grid of `repeat(auto-fill, minmax(15rem, 1fr))` would place them. */
+const cardColumns = (width) => Math.max(1, Math.floor((width + 12) / 252));
+const cardWidth = (width, columns) => Math.max(0, (width - (columns - 1) * 12) / columns);
+/** The records the card rows `first` to `last` hold, as a first and last record index. */
+const recordRange = (first, last, columns, total) => ({
+	start: first * columns,
+	end: Math.max(0, Math.min(total, (last + 1) * columns) - 1)
+});
+/**
+* The scroll offset after a layout change that keeps the same records in view: the same place in the same row when
+* only the row height changed, else the row now holding the first record of the row that was at the top.
+*/
+const anchoredTop = (top, before, after) => {
+	const row = top / before.rowHeight;
+	if (before.columns === after.columns) return row * after.rowHeight;
+	return Math.floor(Math.floor(row) * before.columns / after.columns) * after.rowHeight;
+};
+//#endregion
+export { anchoredTop, cardColumns, cardWidth, recordRange };

package/dist/app/displays/card-photos.js

@@ -2,11 +2,14 @@ import { isStoredFile } from "../../live/file-values.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/displays/card-photos.ts
 const where = createWhere();
-/** The list request for a card's photos: the records pointing at the card's, in the display's order, with only their image. */
-const cardPhotosRequest = (photos, recordKey) => ({
+/**
+* The list request for a card's photos: the records pointing at the card's, in the display's order, with only their
+* image and its placeholder field, when it has one.
+*/
+const cardPhotosRequest = (photos, recordKey, placeholder) => ({
 	filter: printFilter(where.eq(photos.field, recordKey)),
 	...photos.sort !== void 0 && { orderBy: photos.sort },
-	fields: [photos.image],
+	fields: placeholder === void 0 ? [photos.image] : [photos.image, placeholder],
 	pageSize: 100
 });
 /** The files a card steps through: its own image first, then the loaded photos less that same file; empty values are left out. */

package/dist/app/displays/cards-display.js

@@ -1,12 +1,14 @@
+import { cn } from "../../lib/cn.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
-import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { RecordCard } from "./record-card.js";
+import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
 const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
-/** A card per record (see `RecordCard`), in a grid, with how many match and a button for more below. */
-const CardsDisplay = ({ model, view, display, list }) => {
+const scroller = "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-1";
+/** A card per record (see `RecordCard`), in a grid or a row, with how many match and a button for more below. */
+const CardsDisplay = ({ model, view, display, list, row = false, footer = true }) => {
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
@@ -16,15 +18,18 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
 		}),
 		children: [/* @__PURE__ */ jsx("ul", {
-			className: grid,
+			className: row ? scroller : grid,
 			"aria-label": view?.names?.plural ?? humanize(model.name),
-			children: list.rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(RecordCard, {
-				model,
-				view,
-				display,
-				row
-			}) }, row.key))
-		}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
+			children: list.rows.map((record) => /* @__PURE__ */ jsx("li", {
+				className: cn(row && "w-64 shrink-0 snap-start"),
+				children: /* @__PURE__ */ jsx(RecordCard, {
+					model,
+					view,
+					display,
+					row: record
+				})
+			}, record.key))
+		}), footer && /* @__PURE__ */ jsx(DisplayFooter, { list })]
 	});
 };
 //#endregion

package/dist/app/displays/list-cards.js

@@ -0,0 +1,50 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { displayRow } from "./list-displays.js";
+import { ErrorBanner } from "../error-banner.js";
+import { RecordCard } from "./record-card.js";
+import { VirtualCards } from "./virtual-cards.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/list-cards.tsx
+const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
+const pictureHeight = (width) => width * .75;
+const plainHeight = 44;
+/**
+* The list page's cards display: a card per record (see `RecordCard`), scrolled like the table, with which of the
+* matching records are in view below. An embedded list, which shows a few cards whole, draws them with `CardsDisplay`.
+*/
+const ListCards = ({ model, view, display, list }) => {
+	const plural = view?.names?.plural ?? humanize(model.name);
+	const pictured = display.card === void 0 && (display.image !== void 0 || display.photos !== void 0);
+	if (list.isLoading) return /* @__PURE__ */ jsx("div", {
+		className: `min-h-0 flex-1 overflow-hidden ${grid}`,
+		children: Array.from({ length: 6 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
+	});
+	if (list.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: "Could not load rows",
+		error: list.error
+	});
+	if (!list.source || list.source.total === 0) return /* @__PURE__ */ jsxs("p", {
+		className: "py-8 text-center text-[13px] text-muted-foreground",
+		children: [
+			"No ",
+			plural.toLowerCase(),
+			" match."
+		]
+	});
+	return /* @__PURE__ */ jsx(VirtualCards, {
+		source: list.source,
+		label: plural,
+		initialIndex: list.initialIndex,
+		onScrollIndex: list.onScrollIndex,
+		minHeight: (width) => (pictured ? pictureHeight(width) : 0) + plainHeight,
+		children: (row) => /* @__PURE__ */ jsx(RecordCard, {
+			model,
+			view,
+			display,
+			row: displayRow(model, row)
+		})
+	});
+};
+//#endregion
+export { ListCards };

package/dist/app/displays/list-displays.js

@@ -6,10 +6,11 @@ import { encodeKey, tableDisplay } from "@protobase/schema";
 const displaysOf = (view) => view?.list?.displays ?? [];
 /**
 * The display a list opens in when its address names none. Below the `sm` breakpoint a list with a cards display opens
-* in one: the view's default when that is a cards display, else the first. Otherwise the view's default, or the table.
+* in one: `preferred` or the view's default when that is a cards display, else the first. Otherwise `preferred`, the
+* view's default, or the table.
 */
-const defaultDisplay = (view, xs) => {
-	const fallback = view?.list?.default ?? tableDisplay;
+const defaultDisplay = (view, xs, preferred) => {
+	const fallback = preferred ?? view?.list?.default ?? tableDisplay;
 	if (!xs) return fallback;
 	const cards = displaysOf(view).filter((display) => display.kind === "cards");
 	return cards.find((display) => display.name === fallback)?.name ?? cards[0]?.name ?? fallback;

package/dist/app/displays/map-display.js

@@ -1,48 +1,77 @@
-import { Skeleton } from "../../primitives/skeleton.js";
+import { Button } from "../../primitives/button.js";
 import { humanize } from "../../live/naming.js";
 import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
 import { Problem } from "../pages/problem.js";
-import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { RecordCard } from "./record-card.js";
+import { useDebounced } from "../../lib/use-debounced.js";
+import { boundsAround, worldArea } from "../map/map-area.js";
 import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
+import { useMapRecords } from "./use-map-records.js";
 import { Suspense, lazy, useLayoutEffect, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/map-display.tsx
 const RecordsMap = lazy(() => import("../map/records-map.js").then((module) => ({ default: module.RecordsMap })));
+const settleMs = 250;
 const arrow = "flex size-8 items-center justify-center rounded-full border border-border bg-background hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30";
 /**
-* The list's loaded records on a map, drawn with the map style `/meta` names. Choosing a marker shows the card of its
-* record at the map's bottom, with arrows through the records the marker stands for; closing it or choosing the map
-* elsewhere clears it. Below the map, how many of the matching records are on it and a button for more.
+* The matching records in the map's view, drawn with the map style `/meta` names: the records themselves when few are
+* in view or the map is close, else a count for each part of it, which zooms in when chosen. The map asks again as it
+* pans and zooms. Without a view of its own it first fits every matching record. Choosing a marker shows the card of
+* its record at the map's bottom, with arrows through the records the marker stands for; closing it or choosing the map
+* elsewhere clears it.
 */
-const MapDisplay = ({ model, view, display, list }) => {
+const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true }) => {
 	const style = useAdminMeta().maps?.style;
 	const [chosen, setChosen] = useState();
+	const [area, setArea] = useState();
+	const settled = useDebounced(area, settleMs);
+	const [fitting, setFitting] = useState(at === void 0);
+	const records = useMapRecords({
+		model,
+		display,
+		fields,
+		filter,
+		orderBy,
+		area: fitting ? worldArea : settled
+	});
+	const loaded = records.isPlaceholderData ? void 0 : records.data;
+	const rows = records.data?.rows ?? [];
+	const buckets = records.data?.buckets ?? [];
+	const points = mapPoints(rows, display);
+	const fit = fitting && loaded ? boundsAround(mapPoints(loaded.rows, display), loaded.buckets) : void 0;
 	const cards = mapCards(view, display);
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
-	const selection = keptSelection(chosen, list.rows);
-	const row = selection && list.rows.find((candidate) => candidate.key === selection.keys[selection.index]);
 	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+	const selection = keptSelection(chosen, rows);
+	const row = selection && rows.find((candidate) => candidate.key === selection.keys[selection.index]);
 	const markerLabel = (keys) => keys.length === 1 ? `Show the ${singular}` : `Show ${keys.length} ${plural}`;
+	const bucketLabel = (count) => `Zoom in on ${count.toLocaleString("en-IE")} ${count === 1 ? singular : plural}`;
 	const overlay = useRef(null);
 	const [covered, setCovered] = useState(0);
 	useLayoutEffect(() => setCovered(overlay.current?.offsetHeight ?? 0), [row?.key]);
 	if (!style) return /* @__PURE__ */ jsx(Problem, { children: "The map display needs a map style: set PROTOBASE_MAP_STYLE_URL." });
-	return /* @__PURE__ */ jsx(DisplayState, {
-		list,
-		empty: `No ${plural} match.`,
-		loading: /* @__PURE__ */ jsx(Skeleton, { className: "h-96" }),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full min-h-[36rem] flex-col sm:min-h-[28rem]",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative min-h-0 flex-1 overflow-hidden rounded-lg border border-border bg-muted",
-				children: [/* @__PURE__ */ jsx(Suspense, {
+	const empty = loaded?.total === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-[36rem] flex-1 flex-col sm:min-h-[28rem]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative min-h-0 flex-1 overflow-hidden rounded-lg border border-border bg-muted",
+			children: [
+				/* @__PURE__ */ jsx(Suspense, {
 					fallback: null,
 					children: /* @__PURE__ */ jsx(RecordsMap, {
 						style,
-						points: mapPoints(list.rows, display),
+						initial: at,
+						points,
+						buckets,
+						fit,
+						onFitted: () => setFitting(false),
+						onMove: (next, center) => {
+							setArea(next);
+							onMove?.(center);
+						},
 						selected: selection?.keys,
 						covered: selection ? covered : 0,
 						onSelect: (keys) => setChosen({
@@ -50,9 +79,30 @@ const MapDisplay = ({ model, view, display, list }) => {
 							index: 0
 						}),
 						onClear: () => setChosen(void 0),
-						markerLabel
+						markerLabel,
+						bucketLabel
+					})
+				}),
+				records.error && /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-x-3 top-3 z-10",
+					children: /* @__PURE__ */ jsx(ErrorBanner, {
+						title: "Could not load rows",
+						error: records.error
 					})
-				}), selection && row && /* @__PURE__ */ jsx("div", {
+				}),
+				empty && /* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute inset-x-3 top-3 z-10 flex justify-center",
+					children: /* @__PURE__ */ jsxs("p", {
+						className: "pointer-events-auto flex items-center gap-3 rounded-full border border-border bg-background px-4 py-1.5 text-[13px] text-muted-foreground shadow",
+						role: "status",
+						children: [fitting ? `No ${plural} match.` : `No ${plural} in this part of the map.`, !fitting && /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: () => setFitting(true),
+							children: "Show all"
+						})]
+					})
+				}),
+				selection && row && /* @__PURE__ */ jsx("div", {
 					ref: overlay,
 					className: "pointer-events-none absolute inset-x-3 bottom-3 z-10 flex justify-center",
 					children: /* @__PURE__ */ jsxs("div", {
@@ -111,10 +161,20 @@ const MapDisplay = ({ model, view, display, list }) => {
 							})
 						})]
 					})
-				})]
-			}), /* @__PURE__ */ jsx(DisplayFooter, { list })]
-		})
+				})
+			]
+		}), footer && /* @__PURE__ */ jsx("p", {
+			className: "py-3 text-xs text-muted-foreground",
+			children: inView(records.data, plural)
+		})]
 	});
 };
+/** How many of the matching records are in view, and how many the map shows when it cannot show them all. */
+const inView = (data, plural) => {
+	if (!data) return "\xA0";
+	const total = data.total.toLocaleString("en-IE");
+	if (data.buckets.length === 0 && data.rows.length < data.total) return `${data.rows.length.toLocaleString("en-IE")} of ${total} ${plural} in view`;
+	return `${total} ${plural} in view`;
+};
 //#endregion
 export { MapDisplay };

package/dist/app/displays/map-groups.js

@@ -8,13 +8,6 @@ const mapPoints = (rows, fields) => rows.flatMap((row) => {
 		...position
 	}] : [];
 });
-/** The south-west and north-east corners around the points, as `[longitude, latitude]`, or none without points. */
-const pointBounds = (points) => {
-	if (points.length === 0) return void 0;
-	const longitudes = points.map((point) => point.longitude);
-	const latitudes = points.map((point) => point.latitude);
-	return [[Math.min(...longitudes), Math.min(...latitudes)], [Math.max(...longitudes), Math.max(...latitudes)]];
-};
 /**
 * The markers for the points as the map draws them: in order, each point joins the first marker within `radius` pixels
 * of it, else starts its own. A marker is at its first point, so markers do not move as others join them.
@@ -52,4 +45,4 @@ const stepSelection = (selection, step) => ({
 	index: ((selection.index + step) % selection.keys.length + selection.keys.length) % selection.keys.length
 });
 //#endregion
-export { groupPoints, keptSelection, mapPoints, pointBounds, stepSelection };
+export { groupPoints, keptSelection, mapPoints, stepSelection };

package/dist/app/displays/record-card.js

@@ -1,10 +1,11 @@
 import { Badge } from "../../primitives/badge.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
-import { fileShown, isPreviewable } from "../../live/file-values.js";
+import { shownImage } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
+import { FileImage } from "../../live/file-image.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
@@ -14,13 +15,14 @@ import { CardCarousel } from "./card-carousel.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/record-card.tsx
 const CardImage = ({ value }) => {
-	const file = fileShown(value);
-	const url = file && "url" in file && typeof file.url === "string" && isPreviewable(file.type) ? file.url : void 0;
+	const image = shownImage(value, {
+		width: 320,
+		height: 240
+	});
 	return /* @__PURE__ */ jsx("span", {
 		className: "-mx-3 -mt-3 mb-1.5 block aspect-[4/3] overflow-hidden rounded-t-lg border-b border-border bg-muted",
-		children: url && /* @__PURE__ */ jsx("img", {
-			src: url,
-			alt: "",
+		children: image && /* @__PURE__ */ jsx(FileImage, {
+			image,
 			loading: "lazy",
 			className: "size-full object-cover"
 		})

package/dist/app/displays/use-map-records.js

@@ -0,0 +1,44 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { withLabels } from "../../live/relation-labels.js";
+import { displayRow } from "./list-displays.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { areaFilter, requestZoom } from "../map/map-area.js";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/app/displays/use-map-records.ts
+/**
+* The records in the map's area through the list API's `:map`, labelled for the card, or buckets of them when it holds
+* many. A new area or filter keeps the previous answer until its own arrives, and an answer for an area the map has
+* left is never shown.
+*/
+const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const { resources, views } = useAdminMeta();
+	const position = {
+		latitude: display.latitude,
+		longitude: display.longitude
+	};
+	const inside = area ? areaFilter(filter, position, area.bounds) : "";
+	const zoom = area ? requestZoom(area.zoom) : 0;
+	return useQuery({
+		queryKey: keys.map(model.name, `${position.latitude},${position.longitude}`, zoom, inside, orderBy),
+		enabled: area !== void 0,
+		placeholderData: keepPreviousData,
+		queryFn: async () => {
+			const result = await client.map(model.name, {
+				...position,
+				zoom,
+				filter: inside,
+				orderBy
+			});
+			return {
+				rows: (await withLabels(queryClient, client, resources, views, model, fields, result.items)).map((record) => displayRow(model, record)),
+				buckets: result.buckets,
+				total: result.totalSize
+			};
+		}
+	});
+};
+//#endregion
+export { useMapRecords };

package/dist/app/displays/virtual-cards.js

@@ -0,0 +1,138 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { usePagedRows } from "../../data-grid/use-paged-rows.js";
+import { useVirtualRows } from "../../data-grid/use-virtual-rows.js";
+import { anchoredTop, cardColumns, cardWidth, recordRange } from "./card-layout.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/virtual-cards.tsx
+/**
+* Cards in rows as wide as the list, scrolled like the table: only the rows in view are drawn, over a scroller that
+* holds any number of records, and the records are loaded in the table's pages, so a change of width keeps the loaded
+* pages and the first record in view. Every card in a width is as tall as the tallest drawn so far.
+*/
+const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, children }) => {
+	const { total } = source;
+	const [width, setWidth] = useState(0);
+	const columns = cardColumns(width);
+	const itemWidth = cardWidth(width, columns);
+	const [measured, setMeasured] = useState({
+		width: 0,
+		height: 0
+	});
+	const itemHeight = Math.ceil(Math.max(minHeight(itemWidth), measured.width === itemWidth ? measured.height : 0));
+	const rowHeight = itemHeight + 12;
+	const layout = {
+		columns,
+		rowHeight
+	};
+	const anchor = useRef({
+		layout,
+		top: 0
+	});
+	const changed = anchor.current.layout.columns !== columns || anchor.current.layout.rowHeight !== rowHeight;
+	const settle = (top) => changed ? anchoredTop(anchor.current.top, anchor.current.layout, layout) : top;
+	const scroll = useVirtualRows({
+		total: Math.ceil(total / columns),
+		rowHeight,
+		initialIndex: Math.floor(initialIndex / columns),
+		settle
+	});
+	useLayoutEffect(() => {
+		if (changed) scroll.scrollTo(scroll.top);
+		anchor.current = {
+			layout,
+			top: scroll.top
+		};
+		if (!changed) onScrollIndex(Math.floor(scroll.top / rowHeight) * columns);
+	});
+	const range = recordRange(scroll.first, scroll.last, columns, total);
+	const getRow = usePagedRows({
+		total,
+		rowAt: source.rowAt,
+		loadRows: source.loadRows,
+		latencyMs: 0
+	}, range.start, range.end);
+	const bodyRef = useRef(null);
+	useLayoutEffect(() => {
+		const body = bodyRef.current;
+		if (!body) return;
+		const observer = new ResizeObserver(() => setWidth(body.clientWidth));
+		observer.observe(body);
+		setWidth(body.clientWidth);
+		return () => observer.disconnect();
+	}, []);
+	const widthRef = useRef(itemWidth);
+	widthRef.current = itemWidth;
+	const [observer] = useState(() => new ResizeObserver((entries) => {
+		const tallest = Math.max(...entries.map((entry) => entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height));
+		const at = widthRef.current;
+		setMeasured((current) => current.width === at && current.height >= tallest ? current : {
+			width: at,
+			height: Math.max(tallest, current.width === at ? current.height : 0)
+		});
+	}));
+	useLayoutEffect(() => () => observer.disconnect(), [observer]);
+	const observe = useCallback((item) => {
+		if (!item) return;
+		observer.observe(item);
+		return () => observer.unobserve(item);
+	}, [observer]);
+	const firstShown = Math.min(total, Math.floor(scroll.top / rowHeight) * columns + 1);
+	const lastShown = Math.min(total, (Math.floor((scroll.top + Math.max(0, scroll.viewport - 1)) / rowHeight) + 1) * columns);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scroll.ref,
+			onScroll: scroll.onScroll,
+			className: "relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+			children: /* @__PURE__ */ jsx("div", {
+				style: { height: scroll.geometry.contentHeight || void 0 },
+				children: /* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					className: "sticky top-0 overflow-clip",
+					style: { height: scroll.viewport },
+					children: /* @__PURE__ */ jsx("ul", {
+						className: "relative",
+						"aria-label": label,
+						children: scroll.rows.flatMap(({ index: rowIndex, offset }) => Array.from({ length: columns }, (_, column) => {
+							const index = rowIndex * columns + column;
+							if (index >= total) return [];
+							const row = getRow(index);
+							const place = {
+								top: offset,
+								left: column * (itemWidth + 12),
+								width: itemWidth,
+								minHeight: itemHeight
+							};
+							if (!row) return /* @__PURE__ */ jsx("li", {
+								"aria-hidden": true,
+								className: "absolute grid grid-cols-[minmax(0,1fr)]",
+								style: place,
+								children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full rounded-lg" })
+							}, `skeleton-${index}`);
+							return /* @__PURE__ */ jsx("li", {
+								ref: observe,
+								"aria-posinset": index + 1,
+								"aria-setsize": total,
+								className: "absolute grid grid-cols-[minmax(0,1fr)]",
+								style: place,
+								children: children(row)
+							}, row.id);
+						}))
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "py-3 text-xs tabular-nums text-muted-foreground",
+			children: [
+				firstShown.toLocaleString("en-IE"),
+				"–",
+				lastShown.toLocaleString("en-IE"),
+				" of ",
+				total.toLocaleString("en-IE")
+			]
+		})]
+	});
+};
+//#endregion
+export { VirtualCards };