@protobase/ui 0.14.0 → 0.14.2

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",

package/dist/auth/sign-in-prompt.d.ts

@@ -0,0 +1,22 @@
+import { SignInPromptModel } from "@protobase/schema";
+//#region src/auth/sign-in-prompt.d.ts
+export type SignInPromptProps = {
+  prompt: SignInPromptModel;
+} & (
+/** A page section, in place of what the visitor cannot use yet. */
+{
+  as: 'page';
+} |
+/** A modal on a desktop and a sheet on a phone (`ResponsiveDialog`), after the visitor tried what needs an account. */
+{
+  as: 'dialog';
+  open: boolean;
+  onClose: () => void;
+});
+/**
+ * What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what
+ * signing in gives and its benefits, with "Sign in" and, when the prompt names one, a page to make an account. As a page
+ * it stands in for a list the visitor cannot see; as a dialog it answers a press on a button that needs an account.
+ */
+export declare const SignInPrompt: (props: SignInPromptProps) => import("react").JSX.Element;
+//#endregion

package/dist/auth/sign-in-prompt.js

@@ -0,0 +1,84 @@
+import { useAuth } from "./auth-provider.js";
+import { Button, buttonClass } from "../primitives/button.js";
+import { namedIcon } from "../app/named-icon.js";
+import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
+import { useId } from "react";
+import { Check, LogIn } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/sign-in-prompt.tsx
+const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE__ */ jsx("ul", {
+	className: "flex flex-col gap-2 text-left text-[13px]",
+	children: benefits.map((benefit) => /* @__PURE__ */ jsxs("li", {
+		className: "flex items-start gap-2",
+		children: [/* @__PURE__ */ jsx(Check, {
+			className: "mt-0.5 size-4 shrink-0 text-primary",
+			"aria-hidden": true
+		}), benefit]
+	}, benefit))
+}) : null;
+const Actions = ({ prompt }) => {
+	const { showSignIn } = useAuth();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [prompt.signUp && /* @__PURE__ */ jsx("a", {
+		href: prompt.signUp.href,
+		target: "_blank",
+		rel: "noreferrer",
+		className: buttonClass(),
+		children: prompt.signUp.label
+	}), /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		onClick: showSignIn,
+		children: "Sign in"
+	})] });
+};
+/**
+* What a visitor who is not signed in is told about something they could use once signed in: the prompt's title, what
+* signing in gives and its benefits, with "Sign in" and, when the prompt names one, a page to make an account. As a page
+* it stands in for a list the visitor cannot see; as a dialog it answers a press on a button that needs an account.
+*/
+const SignInPrompt = (props) => {
+	const { prompt } = props;
+	const heading = useId();
+	if (props.as === "dialog") return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: prompt.title,
+		description: prompt.description,
+		open: props.open,
+		onClose: props.onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: props.onClose,
+			children: "Not now"
+		}), /* @__PURE__ */ jsx(Actions, { prompt })] }),
+		children: /* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits })
+	});
+	const Icon = namedIcon(prompt.icon) ?? LogIn;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": heading,
+		className: "mx-auto flex w-full max-w-md flex-col items-center gap-4 px-5 py-10 text-center sm:py-16",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary",
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: "size-6",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("h1", {
+					id: heading,
+					className: "text-lg font-semibold",
+					children: prompt.title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: prompt.description
+				})]
+			}),
+			/* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits }),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-2 flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row sm:justify-center [&>*]:min-h-11 sm:[&>*]:min-h-0",
+				children: /* @__PURE__ */ jsx(Actions, { prompt })
+			})
+		]
+	});
+};
+//#endregion
+export { SignInPrompt };

package/dist/data/api-provider.d.ts

@@ -20,6 +20,7 @@ export declare const useClient: () => {
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
     limit?: number;
+    label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;
@@ -59,6 +60,7 @@ export declare const useResourceClient: (resource: string) => {
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
     limit?: number;
+    label?: string;
   }) => Promise<import("@protobase/client").Facet[]>;
   series: (resource: import("@protobase/client").ResourceRef, params: import("@protobase/client").SeriesParams & {
     filter?: import("@protobase/client").FilterInput;

package/dist/data/meta-data.d.ts

@@ -1,5 +1,5 @@
 import { PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
-import { BottomBarModel, ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
+import { BottomBarModel, ResourceModel, SignInViewModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
 export type MetaData = {
@@ -10,6 +10,8 @@ export type MetaData = {
   pages: Record<string, PageModel>;
   permissions: Record<string, ResourcePermissions>;
   userMenu?: UserMenuModel;
+  /** For a visitor, the resources they could use once signed in, by name, with what to tell them (see `SignInPrompt`). */
+  signIn?: Record<string, SignInViewModel>;
   /** The tabs of the user's bottom bar on phones, when one names their active role. */
   bottomBar?: Omit<BottomBarModel, 'roles'>;
   /** The assistant backend, when the app has one and the user has the admin or ai role. */

package/dist/data/query-keys.js

@@ -101,11 +101,6 @@ const keys = {
 		resource,
 		key,
 		path
-	],
-	labelMap: (resource, ids) => [
-		"label-map",
-		resource,
-		ids
 	]
 };
 //#endregion

package/dist/data/use-meta.js

@@ -31,6 +31,7 @@ const useMeta = () => {
 				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),
 				permissions: result.meta.permissions ?? {},
 				...result.meta.userMenu && { userMenu: result.meta.userMenu },
+				...result.meta.signIn && { signIn: Object.fromEntries(result.meta.signIn.map((entry) => [entry.resource, entry])) },
 				...result.meta.bottomBar && { bottomBar: result.meta.bottomBar },
 				...result.meta.assistant && { assistant: result.meta.assistant },
 				...result.meta.runtime && { runtime: result.meta.runtime },

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

@@ -15,7 +15,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
 const headerHeight = 32;
-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 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, scroll = "own", className }) => {
 	const rowHeight = compact ? 28 : 36;
 	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
 	const columns = useMemo(() => {
@@ -50,16 +50,16 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		reverse,
 		total
 	]);
-	const { ref, onScroll, viewport, top, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
+	const [startIndex] = useState(initialScrollIndex);
+	const { ref, top, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
 		total,
 		rowHeight,
-		initialIndex: initialScrollIndex,
+		initialIndex: startIndex,
 		inset: headerHeight
 	});
 	const narrow = !useIsDesktop();
 	const gutter = narrow || !rowNumbers ? 40 : gutterWidthFor(total);
-	const bodyHeight = Math.max(0, viewport - headerHeight);
-	const topIndex = Math.floor(top / rowHeight);
+	const topIndex = Math.floor(Math.max(0, top) / rowHeight);
 	useEffect(() => onScrollIndex?.(topIndex), [topIndex, onScrollIndex]);
 	const getRow = usePagedRows({
 		total,
@@ -99,9 +99,14 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 	const trailing = rowActions && rowActions.length > 0 ? 40 : 0;
 	const minScale = narrow ? 1 : desktopMinScale;
 	const horizontal = useHorizontalScroll();
+	const headerRef = useRef(null);
+	const onBodyScroll = () => {
+		horizontal.onScroll();
+		if (headerRef.current && horizontal.ref.current) headerRef.current.scrollLeft = horizontal.ref.current.scrollLeft;
+	};
 	const [pins, setPins] = useState({});
 	useLayoutEffect(() => {
-		const header = horizontal.ref.current?.querySelector("[role=row]");
+		const header = headerRef.current?.querySelector("[role=row]");
 		if (!header) return;
 		let left = gutter;
 		const next = {};
@@ -118,89 +123,91 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		sorted: header.column.getIsSorted(),
 		onSort: (event) => header.column.getToggleSortingHandler()?.(event)
 	})));
-	const visibleRows = Math.max(1, Math.floor(bodyHeight / rowHeight));
-	const first = Math.min(total, Math.floor(top / rowHeight) + 1);
-	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", {
+	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
+	const own = scroll === "own";
+	const header = /* @__PURE__ */ jsx("div", {
+		ref: headerRef,
+		className: cn("sticky z-20 shrink-0 overflow-hidden", own ? "top-0" : "top-[var(--pb-sticky-top,0px)]"),
+		children: /* @__PURE__ */ jsx("div", {
+			style: { minWidth },
+			children: /* @__PURE__ */ jsx(GridHeader, {
+				cells: headerCells,
+				specs: columns,
+				gutter,
+				trailing,
+				minScale,
+				pins,
+				lastPinned,
+				scrolled: horizontal.scrolled,
+				onTogglePin: togglePin,
+				selectable,
+				selectedCount,
+				onClearSelection: () => setRowSelection({})
+			})
+		})
+	});
+	const body = /* @__PURE__ */ jsx("div", {
+		ref: horizontal.attach,
+		onScroll: onBodyScroll,
+		className: "overflow-x-auto overflow-y-hidden overscroll-x-contain [-webkit-overflow-scrolling:touch]",
+		children: /* @__PURE__ */ jsx("div", {
 			ref,
-			onScroll,
-			className: "relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
-			role: "grid",
-			"aria-rowcount": total,
-			children: /* @__PURE__ */ jsx("div", {
-				style: { height: geometry.contentHeight || void 0 },
-				children: /* @__PURE__ */ jsx("div", {
-					className: "sticky top-0",
-					style: { height: viewport },
-					children: viewport > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-						ref: horizontal.attach,
-						onScroll: horizontal.onScroll,
-						className: "h-full overflow-x-auto overflow-y-hidden overscroll-x-contain [-webkit-overflow-scrolling:touch]",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex h-full flex-col",
-							style: { minWidth: gridMinWidth(columns, gutter, trailing, minScale) },
-							children: [/* @__PURE__ */ jsx(GridHeader, {
-								cells: headerCells,
-								specs: columns,
-								gutter,
-								trailing,
-								minScale,
-								pins,
-								lastPinned,
-								scrolled: horizontal.scrolled,
-								onTogglePin: togglePin,
-								selectable,
-								selectedCount,
-								onClearSelection: () => setRowSelection({})
-							}), /* @__PURE__ */ jsx("div", {
-								className: "relative min-h-0 flex-1 overflow-clip",
-								children: loaded.map(({ index, offset, row }) => {
-									const frame = {
-										specs: columns,
-										gutter,
-										index,
-										offset,
-										height: rowHeight,
-										selectable,
-										trailing,
-										minScale,
-										scrolled: horizontal.scrolled,
-										pins,
-										lastPinned
-									};
-									const tableRow = row ? tableRows.get(row.id) : void 0;
-									if (!tableRow) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
-									const actions = trailing && row ? availableActions(rowActions, row) : [];
-									return /* @__PURE__ */ jsx(DataRow, {
-										...frame,
-										selected: tableRow.getIsSelected(),
-										onToggle: () => tableRow.toggleSelected(),
-										onOpen: onOpenRow && row ? () => onOpenRow(row) : void 0,
-										menu: row && actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
-											row,
-											actions
-										}) : void 0,
-										cells: tableRow.getAllCells().map((cell) => ({
-											spec: columns.find((spec) => spec.id === cell.column.id),
-											content: /* @__PURE__ */ jsx(table.FlexRender, { cell })
-										}))
-									}, row?.id);
-								})
-							})]
-						})
-					}), horizontal.more && /* @__PURE__ */ jsx("div", {
-						"aria-hidden": true,
-						className: "pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-foreground/15 to-transparent"
-					})] })
-				})
+			className: "relative",
+			style: {
+				minWidth,
+				height: geometry.contentHeight
+			},
+			children: loaded.map(({ index, offset, row }) => {
+				const frame = {
+					specs: columns,
+					gutter,
+					index,
+					offset,
+					height: rowHeight,
+					selectable,
+					trailing,
+					minScale,
+					scrolled: horizontal.scrolled,
+					pins,
+					lastPinned
+				};
+				const tableRow = row ? tableRows.get(row.id) : void 0;
+				if (!tableRow) return /* @__PURE__ */ jsx(SkeletonRow, { ...frame }, `skeleton-${index}`);
+				const actions = trailing && row ? availableActions(rowActions, row) : [];
+				return /* @__PURE__ */ jsx(DataRow, {
+					...frame,
+					selected: tableRow.getIsSelected(),
+					onToggle: () => tableRow.toggleSelected(),
+					onOpen: onOpenRow && row ? () => onOpenRow(row) : void 0,
+					menu: row && actions.length > 0 ? /* @__PURE__ */ jsx(RowMenu, {
+						row,
+						actions
+					}) : void 0,
+					cells: tableRow.getAllCells().map((cell) => ({
+						spec: columns.find((spec) => spec.id === cell.column.id),
+						content: /* @__PURE__ */ jsx(table.FlexRender, { cell })
+					}))
+				}, row?.id);
 			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		role: "grid",
+		"aria-rowcount": total,
+		className: cn("flex flex-col rounded-lg border bg-background", own ? "min-h-0 overflow-hidden" : "overflow-clip", className),
+		style: fit && own ? { height: headerHeight + total * rowHeight + 2 } : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative", own && "flex min-h-0 flex-1 flex-col"),
+			children: [own ? /* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden",
+				children: [header, body]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [header, body] }), horizontal.more && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-y-0 right-0 z-20 w-8 bg-gradient-to-l from-foreground/15 to-transparent"
+			})]
 		}), !fit && /* @__PURE__ */ jsx(GridFooter, {
 			total,
-			first,
-			last,
+			className: own ? void 0 : "sticky bottom-[var(--pb-sticky-bottom,0px)] z-20",
 			selectedCount,
 			bulkActions: bulkActions?.map((action) => ({
 				label: action.label(selectedCount),