@protobase/ui 0.14.0 → 0.14.1

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

@@ -10,8 +10,8 @@ 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`.
+* The list page's cards display: a card per record (see `RecordCard`), scrolled like the table. 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);

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

@@ -3,15 +3,17 @@ 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";
+import { jsx } 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.
+* Cards in rows as wide as the list, scrolled like the table by the page or the nearest scrolling ancestor: the list is
+* as tall as all its rows, only the rows in view are drawn, 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 [startIndex] = useState(initialIndex);
 	const [width, setWidth] = useState(0);
 	const columns = cardColumns(width);
 	const itemWidth = cardWidth(width, columns);
@@ -29,13 +31,15 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		layout,
 		top: 0
 	});
-	const changed = anchor.current.layout.columns !== columns || anchor.current.layout.rowHeight !== rowHeight;
+	const changed = anchor.current.top > 0 && (anchor.current.layout.columns !== columns || anchor.current.layout.rowHeight !== rowHeight);
 	const settle = (top) => changed ? anchoredTop(anchor.current.top, anchor.current.layout, layout) : top;
+	const ready = itemWidth > 0 && measured.width === itemWidth;
 	const scroll = useVirtualRows({
 		total: Math.ceil(total / columns),
 		rowHeight,
-		initialIndex: Math.floor(initialIndex / columns),
-		settle
+		initialIndex: Math.floor(startIndex / columns),
+		settle,
+		ready
 	});
 	useLayoutEffect(() => {
 		if (changed) scroll.scrollTo(scroll.top);
@@ -43,7 +47,7 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 			layout,
 			top: scroll.top
 		};
-		if (!changed) onScrollIndex(Math.floor(scroll.top / rowHeight) * columns);
+		if (!changed) onScrollIndex(Math.floor(Math.max(0, scroll.top) / rowHeight) * columns);
 	});
 	const range = recordRange(scroll.first, scroll.last, columns, total);
 	const getRow = usePagedRows({
@@ -52,9 +56,8 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		loadRows: source.loadRows,
 		latencyMs: 0
 	}, range.start, range.end);
-	const bodyRef = useRef(null);
 	useLayoutEffect(() => {
-		const body = bodyRef.current;
+		const body = scroll.ref.current;
 		if (!body) return;
 		const observer = new ResizeObserver(() => setWidth(body.clientWidth));
 		observer.observe(body);
@@ -77,61 +80,36 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 		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")
-			]
-		})]
+	return /* @__PURE__ */ jsx("ul", {
+		ref: scroll.ref,
+		className: "relative min-w-0 flex-auto",
+		"aria-label": label,
+		style: { height: scroll.geometry.contentHeight },
+		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);
+		}))
 	});
 };
 //#endregion

package/dist/app/list-page.js

@@ -1,4 +1,5 @@
 import { useIsDesktop } from "../lib/use-media-query.js";
+import { usePageScroll } from "../app-shell/page-scroll.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button } from "../primitives/button.js";
@@ -100,6 +101,8 @@ const LoadedList = ({ model, address }) => {
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
+	const pageScroll = !display || display.kind === "cards";
+	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
 	const scroll = useListScroll();
 	const titleField = recordTitleField(model, view);
@@ -255,7 +258,8 @@ const LoadedList = ({ model, address }) => {
 		}] : [],
 		rowNumbers: false,
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
-		className: "min-h-0 flex-1"
+		scroll: "parent",
+		className: "flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });
 	const cardsList = {
 		...rows,
@@ -314,7 +318,10 @@ const LoadedList = ({ model, address }) => {
 			desktop ? desktopToolbar : phoneFilters,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",
-				children: [panel, shown]
+				children: [/* @__PURE__ */ jsx("div", {
+					className: pageScroll ? "sticky top-[calc(var(--pb-sticky-top,0px)+1rem)] flex max-h-[calc(100dvh-var(--pb-sticky-top,0px)-var(--pb-sticky-bottom,0px)-2rem)] shrink-0 self-start" : "flex shrink-0",
+					children: panel
+				}), shown]
 			}) : shown
 		]
 	});

package/dist/app-shell/app-shell.js

@@ -2,9 +2,10 @@ import { cn } from "../lib/cn.js";
 import { useIsDesktop } from "../lib/use-media-query.js";
 import { BottomBar } from "./bottom-bar.js";
 import { Drawer } from "./drawer.js";
+import { PageScrollContext, usePageInsets } from "./page-scroll.js";
 import { Sidebar } from "./sidebar.js";
 import { TopBar } from "./top-bar.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
@@ -15,8 +16,13 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		if (desktop) setDrawerOpen(false);
 	}, [desktop]);
 	const tabs = !desktop && bottomBar && bottomBar.length > 0 ? bottomBar : void 0;
-	const sidebar = (mode) => /* @__PURE__ */ jsx(Sidebar, {
+	const [pageScroll, setPageScroll] = useState(false);
+	const topBarRef = useRef(null);
+	const bottomBarRef = useRef(null);
+	usePageInsets(pageScroll, topBarRef, bottomBarRef, Boolean(tabs));
+	const sidebar = (mode, sticky = false) => /* @__PURE__ */ jsx(Sidebar, {
 		mode,
+		sticky,
 		activeItem,
 		user,
 		workspace,
@@ -30,42 +36,52 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		organizations,
 		roles
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className),
-		children: [
-			desktop ? sidebar(sidebarMode) : /* @__PURE__ */ jsx(Drawer, {
-				id: drawerId,
-				open: drawerOpen,
-				onClose: () => setDrawerOpen(false),
-				children: sidebar("text-large")
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 flex-col",
-				children: [
-					/* @__PURE__ */ jsx(TopBar, {
-						breadcrumb,
-						onNavigate,
-						actions,
-						onMenu: desktop || tabs ? void 0 : () => setDrawerOpen(true),
-						menuOpen: drawerOpen,
-						menuControls: drawerId,
-						search
-					}),
-					/* @__PURE__ */ jsx("main", {
-						className: "flex min-h-0 flex-1 flex-col",
-						children
-					}),
-					tabs && /* @__PURE__ */ jsx(BottomBar, {
-						tabs,
-						onNavigate,
-						onMore: () => setDrawerOpen(true),
-						moreOpen: drawerOpen,
-						moreControls: drawerId
-					})
-				]
-			}),
-			rightPanel
-		]
+	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {
+		value: setPageScroll,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(pageScroll ? "flex min-h-full w-full overflow-x-clip bg-background" : "flex h-full min-h-0 w-full overflow-hidden bg-background", className),
+			children: [
+				desktop ? sidebar(sidebarMode, pageScroll) : /* @__PURE__ */ jsx(Drawer, {
+					id: drawerId,
+					open: drawerOpen,
+					onClose: () => setDrawerOpen(false),
+					children: sidebar("text-large")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [
+						/* @__PURE__ */ jsx(TopBar, {
+							ref: topBarRef,
+							sticky: pageScroll,
+							breadcrumb,
+							onNavigate,
+							actions,
+							onMenu: desktop || tabs ? void 0 : () => setDrawerOpen(true),
+							menuOpen: drawerOpen,
+							menuControls: drawerId,
+							search
+						}),
+						/* @__PURE__ */ jsx("main", {
+							className: pageScroll ? "flex flex-1 flex-col" : "flex min-h-0 flex-1 flex-col",
+							children
+						}),
+						tabs && /* @__PURE__ */ jsx(BottomBar, {
+							ref: bottomBarRef,
+							sticky: pageScroll,
+							tabs,
+							onNavigate,
+							onMore: () => setDrawerOpen(true),
+							moreOpen: drawerOpen,
+							moreControls: drawerId
+						})
+					]
+				}),
+				rightPanel && /* @__PURE__ */ jsx("div", {
+					className: pageScroll ? "sticky top-0 flex h-dvh shrink-0 self-start" : "flex shrink-0",
+					children: rightPanel
+				})
+			]
+		})
 	});
 };
 //#endregion

package/dist/app-shell/bottom-bar.d.ts

@@ -1 +1,2 @@
+import { Ref } from "react";
 import "lucide-react";

package/dist/app-shell/bottom-bar.js

@@ -9,11 +9,12 @@ const tab = "flex min-h-[49px] min-w-0 flex-1 flex-col items-center justify-cent
 * last, which opens the navigation drawer and is the current tab on screens the others do not hold. The padding below
 * keeps the tabs clear of the iPhone home indicator.
 */
-const BottomBar = ({ tabs, onNavigate, onMore, moreOpen, moreControls }) => {
+const BottomBar = ({ tabs, onNavigate, onMore, moreOpen, moreControls, sticky, ref }) => {
 	const moreCurrent = !tabs.some((item) => item.active);
 	return /* @__PURE__ */ jsxs("nav", {
+		ref,
 		"aria-label": "Tabs",
-		className: "flex shrink-0 border-t bg-background pb-[env(safe-area-inset-bottom)] md:hidden",
+		className: cn("flex shrink-0 border-t bg-background pb-[env(safe-area-inset-bottom)] md:hidden", sticky && "sticky bottom-0 z-30"),
 		children: [tabs.map((item) => {
 			const Icon = item.icon;
 			return /* @__PURE__ */ jsxs("a", {

package/dist/app-shell/index.d.ts

@@ -6,6 +6,7 @@ import "./global-search.js";
 import "./breadcrumb.js";
 import "./app-shell.js";
 import "./page-header.js";
+import "./page-scroll.js";
 import "./sidebar.js";
 import "./status-dot.js";
 export type { SidebarMode };

package/dist/app-shell/page-scroll.d.ts

@@ -0,0 +1 @@
+import "react";

package/dist/app-shell/page-scroll.js

@@ -0,0 +1,56 @@
+import { createContext, useContext, useLayoutEffect } from "react";
+//#region src/app-shell/page-scroll.ts
+/** Turns the shell's page scrolling on or off; pages use `usePageScroll`. */
+const PageScrollContext = createContext(() => {});
+/**
+* While the calling page is shown and `on`, the document scrolls instead of a box of the screen's height: the top and
+* bottom bars and the sidebar stick, and the page grows with its content, so the browser's own scrolling applies
+* throughout, scrolling to the top included, as tapping the status bar on an iPhone does. Sticky content in the page
+* stays clear of the bars with `--pb-sticky-top` and `--pb-sticky-bottom`.
+*/
+const usePageScroll = (on) => {
+	const set = useContext(PageScrollContext);
+	useLayoutEffect(() => {
+		set(on);
+		return () => set(false);
+	}, [set, on]);
+};
+const properties = [
+	"--pb-sticky-top",
+	"--pb-sticky-bottom",
+	"scroll-padding-top",
+	"scroll-padding-bottom"
+];
+/**
+* While the page scrolls, says how tall its sticky bars are, on the root element: as `--pb-sticky-top` and
+* `--pb-sticky-bottom` for content that sticks inside them, and as the page's scroll padding, which the browser keeps
+* focused and scrolled-to content clear of, and which a virtual list reads as the part of the page it shows in.
+*/
+const usePageInsets = (on, top, bottom, bottomShown) => {
+	useLayoutEffect(() => {
+		if (!on) return;
+		const root = document.documentElement;
+		const update = () => {
+			const above = `${top.current?.offsetHeight ?? 0}px`;
+			const below = `${bottom.current?.offsetHeight ?? 0}px`;
+			root.style.setProperty("--pb-sticky-top", above);
+			root.style.setProperty("--pb-sticky-bottom", below);
+			root.style.setProperty("scroll-padding-top", above);
+			root.style.setProperty("scroll-padding-bottom", below);
+		};
+		const observer = new ResizeObserver(update);
+		for (const bar of [top.current, bottom.current]) if (bar) observer.observe(bar);
+		update();
+		return () => {
+			observer.disconnect();
+			for (const property of properties) root.style.removeProperty(property);
+		};
+	}, [
+		on,
+		top,
+		bottom,
+		bottomShown
+	]);
+};
+//#endregion
+export { PageScrollContext, usePageInsets, usePageScroll };

package/dist/app-shell/sidebar.js

@@ -8,13 +8,13 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, onSignIn, organizations, roles }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, onSignIn, organizations, roles, sticky }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": "Resources",
-		className: cn("relative z-30 shrink-0", sidebarWidth[mode]),
+		className: cn(sticky ? "sticky top-0 h-dvh self-start" : "relative", "z-30 shrink-0", sidebarWidth[mode]),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("group/side absolute inset-y-0 left-0 flex flex-col overflow-hidden border-r bg-sidebar", expanding ? "w-14 transition-[width,box-shadow] duration-150 hover:w-60 hover:shadow-pop focus-within:w-60 focus-within:shadow-pop" : "w-full", expanded && "w-60 shadow-pop"),
 			children: [

package/dist/app-shell/top-bar.js

@@ -7,7 +7,7 @@ import { ChevronLeft, Menu, Search, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/top-bar.tsx
 const iconButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
-const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search }) => {
+const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search, sticky, ref }) => {
 	const [searchOpen, setSearchOpen] = useState(false);
 	const back = backTarget(breadcrumb);
 	const desktopSearch = useRef(null);
@@ -24,7 +24,8 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 		return () => window.removeEventListener("keydown", onKey);
 	}, [search]);
 	return /* @__PURE__ */ jsxs("header", {
-		className: "relative flex h-12 shrink-0 items-center gap-1 border-b bg-background px-2 md:gap-4 md:px-5",
+		ref,
+		className: cn(sticky ? "sticky top-0 z-30" : "relative", "flex h-12 shrink-0 items-center gap-1 border-b bg-background px-2 md:gap-4 md:px-5"),
 		children: [
 			onMenu && /* @__PURE__ */ jsx("button", {
 				type: "button",