@protobase/ui 0.12.21 → 0.13.0

package/dist/app/list-page.js

@@ -26,10 +26,12 @@ import { useLiveRows } from "../live/use-live-rows.js";
 import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
-import { CardsDisplay } from "./displays/cards-display.js";
+import { ListCards } from "./displays/list-cards.js";
+import { MapDisplay } from "./displays/map-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
+import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
@@ -97,7 +99,8 @@ const LoadedList = ({ model, address }) => {
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
-	const displayRows = useDisplayRows(model, rows.page, rows.key, display !== void 0);
+	const displayRows = useDisplayRows(model, rows.page, rows.key, display !== void 0 && display.kind !== "cards");
+	const scroll = useListScroll();
 	const titleField = recordTitleField(model, view);
 	const target = (row) => ({
 		key: row.id,
@@ -233,6 +236,8 @@ const LoadedList = ({ model, address }) => {
 		sort: parseSort(orderBy),
 		onSortChange: (sort) => set({ orderBy: sortToOrderBy(sort) }),
 		onOpenRow: openRecord,
+		initialScrollIndex: scroll.initialIndex,
+		onScrollIndex: scroll.remember,
 		rowActions: [{
 			label: `Open ${singular.toLowerCase()}`,
 			onSelect: openRecord
@@ -251,15 +256,31 @@ const LoadedList = ({ model, address }) => {
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
 		className: "min-h-0 flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });
-	const shown = !display ? table : display.kind === "cards" ? /* @__PURE__ */ jsx(CardsDisplay, {
-		model,
-		view,
-		display,
-		list: displayRows
-	}) : /* @__PURE__ */ jsx(CustomDisplay, {
-		display,
-		list: displayRows
-	});
+	const cardsList = {
+		...rows,
+		initialIndex: scroll.initialIndex,
+		onScrollIndex: scroll.remember
+	};
+	const drawDisplay = () => {
+		if (!display) return table;
+		if (display.kind === "cards") return /* @__PURE__ */ jsx(ListCards, {
+			model,
+			view,
+			display,
+			list: cardsList
+		}, rows.key.join(" "));
+		if (display.kind === "map") return /* @__PURE__ */ jsx(MapDisplay, {
+			model,
+			view,
+			display,
+			list: displayRows
+		});
+		return /* @__PURE__ */ jsx(CustomDisplay, {
+			display,
+			list: displayRows
+		});
+	};
+	const shown = drawDisplay();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
 		children: [

package/dist/app/list-scroll.js

@@ -0,0 +1,25 @@
+import { useRouter } from "./router.js";
+import { useCallback } from "react";
+//#region src/app/list-scroll.ts
+/** The first record in view of the list each history entry last showed, for this tab; a page load starts empty. */
+const remembered = /* @__PURE__ */ new Map();
+/**
+* Where a list starts and how it remembers where it is, so going back to it shows the same records. Only the list the
+* history entry showed last comes back: after a change of sort or filter, which replaces the entry, the list starts at
+* the top again.
+*/
+const useListScroll = () => {
+	const { entry, path, params } = useRouter();
+	const url = `${path}?${params.toString()}`;
+	const last = remembered.get(entry);
+	const remember = useCallback((index) => void remembered.set(entry, {
+		url,
+		index
+	}), [entry, url]);
+	return {
+		initialIndex: last?.url === url ? last.index : 0,
+		remember
+	};
+};
+//#endregion
+export { useListScroll };

package/dist/app/map/record-map.js

@@ -4,7 +4,7 @@ import * as maplibre from "maplibre-gl";
 import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { Protocol } from "pmtiles";
-import { Map, Marker, NavigationControl } from "react-map-gl/maplibre";
+import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
 //#region src/app/map/record-map.tsx
 maplibre.setWorkerUrl(workerUrl);
 maplibre.addProtocol("pmtiles", new Protocol().tile);
@@ -12,7 +12,7 @@ maplibre.addProtocol("pmtiles", new Protocol().tile);
 * A map of `style` centred on `position` at `zoom`, with a pin on it. It pans and zooms with two fingers on a phone and
 * with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it.
 */
-const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map, {
+const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map$1, {
 	mapLib: maplibre,
 	mapStyle: style,
 	initialViewState: {

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

@@ -0,0 +1,106 @@
+import { cn } from "../../lib/cn.js";
+import { groupPoints, pointBounds } from "../displays/map-groups.js";
+import { useEffect, useRef, useState } from "react";
+import { MapPin } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as maplibre from "maplibre-gl";
+import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
+//#region src/app/map/records-map.tsx
+const groupRadius = 28;
+const fitOptions = {
+	padding: 48,
+	maxZoom: 15,
+	duration: 0
+};
+const markerHeight = 32;
+/**
+* A map of `style` with a marker for each group of records that lie close together at the zoom, showing how many it
+* stands for. It fits the records when they change. Choosing a marker selects its records; choosing the map elsewhere
+* clears the selection. A chosen marker the covered bottom would hide moves up into the open part of the map.
+*/
+const RecordsMap = ({ style, points, selected, covered, onSelect, onClear, markerLabel }) => {
+	const ref = useRef(null);
+	const [groups, setGroups] = useState([]);
+	const byKey = new globalThis.Map(points.map((point) => [point.key, point]));
+	const pointKeys = points.map((point) => point.key).join(",");
+	const bounds = pointBounds(points);
+	const regroup = () => {
+		const map = ref.current?.getMap();
+		if (!map) return;
+		setGroups(groupPoints(points.map((point) => ({
+			key: point.key,
+			...map.project([point.longitude, point.latitude])
+		})), groupRadius));
+	};
+	useEffect(() => {
+		const map = ref.current?.getMap();
+		if (!map) return;
+		if (bounds) map.fitBounds(bounds, fitOptions);
+		regroup();
+	}, [pointKeys]);
+	const chosenAt = groups.find((group) => selected !== void 0 && group.keys.some((key) => selected.includes(key)))?.at;
+	useEffect(() => {
+		const map = ref.current?.getMap();
+		const at = chosenAt === void 0 ? void 0 : byKey.get(chosenAt);
+		if (!map || !at || covered === 0) return;
+		const { y } = map.project([at.longitude, at.latitude]);
+		const open = map.getContainer().clientHeight - covered;
+		if (y > markerHeight && y < open) return;
+		map.easeTo({
+			center: [at.longitude, at.latitude],
+			offset: [0, (markerHeight - covered) / 2],
+			duration: 300
+		});
+	}, [chosenAt, covered]);
+	return /* @__PURE__ */ jsxs(Map$1, {
+		ref,
+		mapLib: maplibre,
+		mapStyle: style,
+		initialViewState: bounds ? {
+			bounds,
+			fitBoundsOptions: fitOptions
+		} : {
+			latitude: 0,
+			longitude: 0,
+			zoom: 1
+		},
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		onLoad: regroup,
+		onZoomEnd: regroup,
+		onClick: onClear,
+		children: [/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }), groups.map((group) => {
+			const at = byKey.get(group.at);
+			if (!at) return null;
+			const chosen = selected !== void 0 && group.keys.some((key) => selected.includes(key));
+			return /* @__PURE__ */ jsx(Marker, {
+				latitude: at.latitude,
+				longitude: at.longitude,
+				anchor: "bottom",
+				style: { zIndex: chosen ? 1 : 0 },
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": markerLabel(group.keys),
+					"aria-pressed": chosen,
+					className: "relative block cursor-pointer",
+					onClick: (event) => {
+						event.stopPropagation();
+						onSelect(group.keys);
+					},
+					children: [/* @__PURE__ */ jsx(MapPin, {
+						"aria-hidden": true,
+						className: cn("size-8 drop-shadow", chosen ? "fill-foreground text-background" : "fill-primary text-primary-foreground"),
+						strokeWidth: 1.5
+					}), group.keys.length > 1 && /* @__PURE__ */ jsx("span", {
+						className: "absolute -right-2 -top-1 min-w-5 rounded-full border border-background bg-foreground px-1 text-center text-[11px] font-medium leading-4 text-background tabular-nums",
+						children: group.keys.length
+					})]
+				})
+			}, group.at);
+		})]
+	});
+};
+//#endregion
+export { RecordsMap };

package/dist/app/named-icon.js

@@ -1,11 +1,12 @@
-import { FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
+import { Bed, FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
 //#region src/app/named-icon.ts
 /** The icons an action's or a field's `icon` may name. */
 const byName = {
 	wallet: Wallet,
 	"file-text": FileText,
 	send: Send,
-	ruler: RulerDimensionLine
+	ruler: RulerDimensionLine,
+	bed: Bed
 };
 /** The icon a name stands for, or nothing for a name the app does not know. */
 const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;

package/dist/app/pages/blocks/table.js

@@ -1,54 +1,34 @@
-import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { ErrorBanner } from "../../error-banner.js";
-import { useListPage } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
-import { CardFrame, Quiet } from "./card-frame.js";
-import { RecordTable } from "../record-table.js";
-import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { CardFrame } from "./card-frame.js";
+import { EmbeddedDisplaySwitch, EmbeddedList } from "../../embedded-list/embedded-list.js";
+import { useEmbeddedDisplay } from "../../embedded-list/use-embedded-display.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/table.tsx
-/** The view's list columns, else the first five fields that are not keys or the tenant. */
-const defaultColumns = (model, view) => view?.list?.columns ?? Object.keys(model.fields).filter((name) => !model.primaryKey.includes(name) && name !== model.tenant).slice(0, 5);
-const LoadedTable = ({ model, view, filter, sort, columns, pageSize = 10, title, description, empty, actions }) => {
-	const shown = (columns ?? defaultColumns(model, view)).filter((name) => Object.hasOwn(model.fields, name));
-	const [tokens, setTokens] = useState([""]);
-	const page = useListPage(model, {
-		filter,
-		sort,
-		pageSize,
-		pageToken: tokens.at(-1)
-	});
-	const rows = page.data?.items ?? [];
-	const next = page.data?.nextPageToken;
+const LoadedTable = ({ model, view, filter = "", sort = "", columns, limit = 10, display: preferred, title, description, empty, actions }) => {
+	const [display, pick] = useEmbeddedDisplay(view, `page:${model.name}:${title ?? ""}:${filter}`, preferred);
 	return /* @__PURE__ */ jsx(CardFrame, {
 		title,
 		description,
-		actions,
+		actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
+			view,
+			value: display,
+			onChange: pick
+		}), actions] }),
 		className: "h-full",
-		children: page.isPending ? /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col gap-2",
-			children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
-		}) : page.error ? /* @__PURE__ */ jsx(ErrorBanner, {
-			title: "Could not load",
-			error: page.error
-		}) : rows.length === 0 && tokens.length === 1 ? /* @__PURE__ */ jsx(Quiet, { children: empty ?? "Nothing here yet." }) : /* @__PURE__ */ jsx(RecordTable, {
+		children: /* @__PURE__ */ jsx(EmbeddedList, {
 			model,
-			columns: shown,
-			rows,
-			label: title ?? model.name,
-			pager: {
-				page: tokens.length,
-				hasPrevious: tokens.length > 1,
-				hasNext: Boolean(next),
-				busy: page.isFetching,
-				previous: () => setTokens((stack) => stack.slice(0, -1)),
-				next: () => next && setTokens((stack) => [...stack, next])
-			}
+			view,
+			filter,
+			sort,
+			columns,
+			limit,
+			display,
+			empty
 		})
 	});
 };
-/** A page of records at a time, in `sort` order; the first column opens the record. */
+/** The first `limit` records in `sort` order, in the list page's table or display, with a link to the whole list. */
 const TableBlock = ({ node, slots }) => {
 	const props = propsOf(node);
 	const { resources, views } = useAdminMeta();
@@ -62,4 +42,4 @@ const TableBlock = ({ node, slots }) => {
 	});
 };
 //#endregion
-export { TableBlock, defaultColumns };
+export { TableBlock };

package/dist/app/pages/field-value.js

@@ -2,10 +2,10 @@ import { cn } from "../../lib/cn.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { fetchLabels } from "../../live/relation-labels.js";
-import { useAdminMeta } from "../meta-gate.js";
-import { AppLink } from "../use-app-address.js";
 import { fileShown } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { ValueBadge } from "../value-badge.js";

package/dist/app/record-page.js

@@ -7,10 +7,10 @@ import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { displayValue } from "../live/display-value.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useNavigationGuard, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
-import { displayValue } from "../live/display-value.js";
 import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
@@ -292,7 +292,8 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 								children: [layout.flatMap((item, index) => {
 									if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
 										item,
-										recordKey
+										recordKey,
+										owner: model.name
 									}, `related:${item.title}`)];
 									if (item.kind === "custom") return item.sidebar ? [] : [/* @__PURE__ */ jsx(CustomSection, {
 										item,

package/dist/app/related-section.js

@@ -4,17 +4,20 @@ import { useClient } from "../data/api-provider.js";
 import { useAdminMeta } from "./meta-gate.js";
 import { ErrorBanner } from "./error-banner.js";
 import { Section } from "../record-view/section.js";
-import { RecordTable } from "./pages/record-table.js";
-import { defaultColumns } from "./pages/blocks/table.js";
-import { useState } from "react";
+import { listColumnNames } from "../live/columns-from-model.js";
+import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
+import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 import { jsx } from "react/jsx-runtime";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/app/related-section.tsx
 const where = createWhere();
 /** The most join records a section reads to find its records; the list API's largest page. */
 const maxThrough = 500;
-const and = (...parts) => parts.filter((part) => Boolean(part)).map((part) => `(${part})`).join(" AND ");
+const and = (...parts) => {
+	const given = parts.filter((part) => Boolean(part));
+	return given.length === 1 ? given[0] : given.map((part) => `(${part})`).join(" AND ");
+};
 /**
 * The filter on the section's resource: its `field` is this record's key, or, through a join resource, one of the keys
 * the join records that point at this record hold. `null` when no join record does, so nothing can match.
@@ -54,47 +57,6 @@ const useMatch = (item, recordKey) => {
 		error: null
 	};
 };
-const RelatedRows = ({ item, model, filter }) => {
-	const client = useClient();
-	const { views } = useAdminMeta();
-	const [tokens, setTokens] = useState([""]);
-	const pageSize = item.pageSize ?? 10;
-	const sort = item.sort ?? "";
-	const token = tokens.at(-1) ?? "";
-	const page = useQuery({
-		queryKey: keys.list(model.name, filter, sort, pageSize, token),
-		placeholderData: keepPreviousData,
-		queryFn: () => client.search(model.name, {
-			filter,
-			orderBy: sort || void 0,
-			pageSize,
-			pageToken: token || void 0
-		})
-	});
-	if (page.isPending) return /* @__PURE__ */ jsx(Loading, {});
-	if (page.error) return /* @__PURE__ */ jsx(ErrorBanner, {
-		title: "Could not load",
-		error: page.error
-	});
-	const rows = page.data.items;
-	if (rows.length === 0 && tokens.length === 1) return /* @__PURE__ */ jsx(Empty, { text: item.empty });
-	const columns = (item.columns ?? defaultColumns(model, views[model.name]).filter((name) => name !== item.field)).filter((name) => name.includes(".") || Object.hasOwn(model.fields, name));
-	const next = page.data.nextPageToken;
-	return /* @__PURE__ */ jsx(RecordTable, {
-		model,
-		columns,
-		rows,
-		label: item.title,
-		pager: {
-			page: tokens.length,
-			hasPrevious: tokens.length > 1,
-			hasNext: Boolean(next),
-			busy: page.isFetching,
-			previous: () => setTokens((stack) => stack.slice(0, -1)),
-			next: () => next && setTokens((stack) => [...stack, next])
-		}
-	});
-};
 const Loading = () => /* @__PURE__ */ jsx("div", {
 	className: "flex flex-col gap-2",
 	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
@@ -103,22 +65,38 @@ const Empty = ({ text }) => /* @__PURE__ */ jsx("p", {
 	className: "text-[13px] text-muted-foreground",
 	children: text ?? "Nothing here yet."
 });
-/** A record page section listing the records of another resource that point at this record, directly or through a join resource. */
-const RelatedSection = ({ item, recordKey }) => {
-	const { resources } = useAdminMeta();
+/**
+* A record page section listing the first records of another resource that point at this record, directly or through
+* a join resource, in the list page's table or display, with a link to them all in the list.
+*/
+const RelatedSection = ({ item, recordKey, owner }) => {
+	const { resources, views } = useAdminMeta();
 	const model = resources[item.resource];
+	const view = model && views[model.name];
 	const match = useMatch(item, recordKey);
+	const [display, pick] = useEmbeddedDisplay(view, `related:${owner}:${item.title}`, item.display);
 	if (!model) return null;
+	const columns = item.columns ?? listColumnNames(model, view).filter((name) => name !== item.field);
 	return /* @__PURE__ */ jsx(Section, {
 		title: item.title,
 		help: item.help,
+		actions: /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
+			view,
+			value: display,
+			onChange: pick
+		}),
 		children: match.isPending ? /* @__PURE__ */ jsx(Loading, {}) : match.error ? /* @__PURE__ */ jsx(ErrorBanner, {
 			title: "Could not load",
 			error: match.error
-		}) : match.filter === null || match.filter === void 0 ? /* @__PURE__ */ jsx(Empty, { text: item.empty }) : /* @__PURE__ */ jsx(RelatedRows, {
-			item,
+		}) : match.filter === null || match.filter === void 0 ? /* @__PURE__ */ jsx(Empty, { text: item.empty }) : /* @__PURE__ */ jsx(EmbeddedList, {
 			model,
-			filter: match.filter
+			view,
+			filter: match.filter,
+			sort: item.sort ?? "",
+			columns,
+			limit: item.limit ?? 10,
+			display,
+			empty: item.empty
 		}, match.filter)
 	});
 };

package/dist/app/router.js

@@ -85,6 +85,7 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 			path: parsed.pathname.slice(basePath.length) || "/",
 			params: parsed.searchParams,
 			basePath,
+			entry: position.current,
 			navigate,
 			registerGuard
 		};

package/dist/data-grid/data-grid.js

@@ -8,16 +8,14 @@ import { useHorizontalScroll } from "./use-horizontal-scroll.js";
 import { usePinnedColumns } from "./use-pinned-columns.js";
 import { GridHeader } from "./grid-header.js";
 import { DataRow, SkeletonRow } from "./grid-row.js";
-import { windowFor } from "./geometry.js";
-import { useGridScroll } from "./use-grid-scroll.js";
 import { usePagedRows } from "./use-paged-rows.js";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useVirtualRows } from "./use-virtual-rows.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, className }) => {
 	const rowHeight = compact ? 28 : 36;
 	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
 	const columns = useMemo(() => {
@@ -52,45 +50,27 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		reverse,
 		total
 	]);
-	const { ref, onScroll, viewport, top, geometry } = useGridScroll(total, rowHeight, initialScrollIndex);
+	const { ref, onScroll, viewport, top, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
+		total,
+		rowHeight,
+		initialIndex: initialScrollIndex,
+		inset: headerHeight
+	});
 	const narrow = !useIsDesktop();
 	const gutter = narrow || !rowNumbers ? 40 : gutterWidthFor(total);
 	const bodyHeight = Math.max(0, viewport - headerHeight);
-	const bodyRef = useRef(null);
-	const offsetListener = useRef(null);
-	const { base, count } = windowFor(total, top, rowHeight);
-	const localOffset = top - base * rowHeight;
-	const virtualizer = useVirtualizer({
-		count,
-		getScrollElement: () => bodyRef.current,
-		estimateSize: () => rowHeight,
-		overscan: 6,
-		initialRect: {
-			width: 0,
-			height: bodyHeight
-		},
-		observeElementOffset: (_, callback) => {
-			offsetListener.current = callback;
-			callback(localOffset, false);
-			return () => {
-				offsetListener.current = null;
-			};
-		}
-	});
-	useLayoutEffect(() => offsetListener.current?.(localOffset, false), [localOffset, base]);
-	const items = virtualizer.getVirtualItems();
-	const firstIndex = base + (items[0]?.index ?? 0);
-	const lastIndex = base + (items[items.length - 1]?.index ?? 0);
+	const topIndex = Math.floor(top / rowHeight);
+	useEffect(() => onScrollIndex?.(topIndex), [topIndex, onScrollIndex]);
 	const getRow = usePagedRows({
 		total,
 		rowAt: sourceRowAt ? rowAt : void 0,
 		loadRows: source.loadRows,
 		latencyMs
 	}, firstIndex, lastIndex);
-	const loaded = items.map((item) => ({
-		item,
-		index: base + item.index,
-		row: getRow(base + item.index)
+	const loaded = virtualRows.map(({ index, offset }) => ({
+		index,
+		offset,
+		row: getRow(index)
 	}));
 	const data = useMemo(() => loaded.flatMap(({ row }) => row ? [row] : []), [
 		getRow,
@@ -143,6 +123,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 	const last = Math.min(total, first + visibleRows - 1);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex min-h-0 flex-col overflow-hidden rounded-lg border bg-background", className),
+		style: fit ? { height: headerHeight + total * rowHeight + 2 } : void 0,
 		children: [/* @__PURE__ */ jsx("div", {
 			ref,
 			onScroll,
@@ -175,14 +156,13 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 								selectedCount,
 								onClearSelection: () => setRowSelection({})
 							}), /* @__PURE__ */ jsx("div", {
-								ref: bodyRef,
 								className: "relative min-h-0 flex-1 overflow-clip",
-								children: loaded.map(({ item, index, row }) => {
+								children: loaded.map(({ index, offset, row }) => {
 									const frame = {
 										specs: columns,
 										gutter,
 										index,
-										offset: item.start - localOffset,
+										offset,
 										height: rowHeight,
 										selectable,
 										trailing,
@@ -217,7 +197,7 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 					})] })
 				})
 			})
-		}), /* @__PURE__ */ jsx(GridFooter, {
+		}), !fit && /* @__PURE__ */ jsx(GridFooter, {
 			total,
 			first,
 			last,

package/dist/data-grid/geometry.js

@@ -1,8 +1,6 @@
 //#region src/data-grid/geometry.ts
 /** Browsers cap element height (about 17M px in the strictest); stay well below it. */
 const maxContentHeight = 1e7;
-const chunk = 2e3;
-const windowSize = 5e3;
 const gridGeometry = (total, rowHeight, viewportHeight) => {
 	const trueHeight = total * rowHeight;
 	const contentHeight = Math.min(trueHeight, maxContentHeight);
@@ -19,14 +17,14 @@ const gridGeometry = (total, rowHeight, viewportHeight) => {
 const topFromScroll = (geometry, scrollTop) => geometry.maxScroll === 0 ? 0 : scrollTop / geometry.maxScroll * geometry.maxTop;
 const scrollFromTop = (geometry, top) => geometry.maxTop === 0 ? 0 : top / geometry.maxTop * geometry.maxScroll;
 const clampTop = (geometry, top) => Math.min(Math.max(0, top), geometry.maxTop);
-/** The slice of rows handed to the virtualizer; it moves in whole chunks so row measurements stay small. */
-const windowFor = (total, top, rowHeight) => {
-	const topRow = Math.floor(top / rowHeight);
-	const base = Math.min(Math.max(0, Math.floor(topRow / chunk) * chunk - chunk), Math.max(0, total - windowSize));
+/** The rows drawn for a scroll offset: those in a viewport of `height`, and `overscan` more on each side. */
+const rowsInView = (total, top, rowHeight, height, overscan) => {
+	const first = Math.max(0, Math.floor(top / rowHeight) - overscan);
+	const last = Math.min(total - 1, Math.floor((top + height) / rowHeight) + overscan);
 	return {
-		base,
-		count: Math.min(windowSize, total - base)
+		first,
+		last: Math.max(first - 1, last)
 	};
 };
 //#endregion
-export { clampTop, gridGeometry, maxContentHeight, scrollFromTop, topFromScroll, windowFor };
+export { clampTop, gridGeometry, maxContentHeight, rowsInView, scrollFromTop, topFromScroll };

package/dist/data-grid/use-grid-scroll.js

@@ -64,6 +64,12 @@ const useGridScroll = (total, rowHeight, initialIndex) => {
 		element.addEventListener("wheel", onWheel, { passive: false });
 		return () => element.removeEventListener("wheel", onWheel);
 	}, [syncNative]);
+	/** Moves to a virtual offset, for a layout change that keeps a row in view. */
+	const scrollTo = useCallback((nextTop) => {
+		const next = clampTop(latest.current.geometry, nextTop);
+		setTop(next);
+		syncNative(next);
+	}, [syncNative]);
 	return {
 		ref,
 		onScroll: useCallback(() => {
@@ -73,7 +79,8 @@ const useGridScroll = (total, rowHeight, initialIndex) => {
 		}, []),
 		viewport,
 		top,
-		geometry
+		geometry,
+		scrollTo
 	};
 };
 //#endregion