@protobase/ui 0.12.22 → 0.13.3

package/dist/live/grid-loader.js

@@ -4,11 +4,12 @@ import { withLabels } from "./relation-labels.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**
-* Loads fixed-size pages by number. Sequential scrolling follows `next_page_token`; a jump asks `:seek` for the
-* page at that row position. Every page is cached by TanStack Query.
+* Loads fixed-size pages by number. The page after a cached or loading one follows that page's `next_page_token`; a
+* jump to a page whose predecessor is neither asks `:seek` for the page at that row position, so the pages of one jump
+* are read on from a single seek. Every page is cached by TanStack Query.
 */
 const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy }) => {
-	const tokens = /* @__PURE__ */ new Map();
+	const pageKey = (number) => keys.page(model.name, filter, orderBy, 40, number);
 	/** The server's total is a planner estimate, off by a lot for small results; settle those exactly. */
 	const firstPageTotal = async (result) => {
 		if (result.nextPageToken === "") return result.items.length;
@@ -20,36 +21,51 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 			count: "exact"
 		})).totalSize ?? result.totalSizeEstimate;
 	};
+	/** The token that continues after the page before `number`, or undefined when that page is neither cached nor loading. */
+	const tokenBefore = async (number) => {
+		if (number === 0) return "";
+		const key = pageKey(number - 1);
+		const cached = queryClient.getQueryData(key);
+		if (cached) return cached.nextPageToken;
+		if (queryClient.getQueryState(key)?.fetchStatus !== "fetching") return void 0;
+		return (await page(number - 1)).nextPageToken;
+	};
 	const fetchPage = async (page) => {
-		const token = tokens.get(page);
+		const token = await tokenBefore(page);
+		if (page > 0 && token === "") return {
+			rows: [],
+			total: 0,
+			nextPageToken: ""
+		};
 		const params = {
 			filter,
 			orderBy,
 			pageSize: 40
 		};
-		const result = page === 0 || token !== void 0 ? await client.list(model.name, {
+		const result = token !== void 0 ? await client.list(model.name, {
 			...params,
-			pageToken: token ?? ""
+			pageToken: token
 		}) : await client.seek(model.name, {
 			...params,
 			position: page * 40
 		});
 		if (result.items.length === 0 && page > 0) return {
 			rows: [],
-			total: 0
+			total: 0,
+			nextPageToken: ""
 		};
-		tokens.set(page + 1, result.nextPageToken);
 		const ids = result.items.map((record) => recordId(model, record));
 		return {
 			rows: (await withLabels(queryClient, client, resources, views, model, columns, result.items)).map((record, index) => ({
 				...record,
 				id: ids[index]
 			})),
-			total: page === 0 ? await firstPageTotal(result) : result.totalSizeEstimate
+			total: page === 0 ? await firstPageTotal(result) : result.totalSizeEstimate,
+			nextPageToken: result.nextPageToken
 		};
 	};
 	const page = (number) => queryClient.fetchQuery({
-		queryKey: keys.page(model.name, filter, orderBy, 40, number),
+		queryKey: pageKey(number),
 		staleTime: 6e4,
 		queryFn: () => fetchPage(number)
 	});

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.12.22";
+var version = "0.13.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/record-view/section.js

@@ -1,21 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/section.tsx
-const Section = ({ title, help, children }) => /* @__PURE__ */ jsxs("section", {
-	className: "py-8 first:pt-8",
-	children: [
-		/* @__PURE__ */ jsx("h2", {
-			className: "text-[15px] font-semibold text-foreground",
-			children: title
-		}),
-		help && /* @__PURE__ */ jsx("p", {
-			className: "mt-1 max-w-xl text-[13px] leading-relaxed text-muted-foreground",
-			children: help
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "mt-5",
-			children
-		})
-	]
-});
+/** A titled part of the record page; `actions` sit at the end of the title's line. */
+const Section = ({ title, help, actions, children }) => {
+	const heading = /* @__PURE__ */ jsx("h2", {
+		className: "text-[15px] font-semibold text-foreground",
+		children: title
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: "py-8 first:pt-8",
+		children: [
+			actions ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
+				children: [heading, actions]
+			}) : heading,
+			help && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 max-w-xl text-[13px] leading-relaxed text-muted-foreground",
+				children: help
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-5",
+				children
+			})
+		]
+	});
+};
 //#endregion
 export { Section };