@protobase/ui 0.13.4 → 0.14.1

package/dist/app/current-address.js

@@ -1,6 +1,6 @@
 import { defaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
-import { encodeKey } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/current-address.ts
 /** What a list shows when its address names nothing: its default display for the screen, the list's sort, the filters in a bar. */
 const listDefaults = (model, view, xs = false) => ({

package/dist/app/custom-section.js

@@ -5,7 +5,7 @@ import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordScope } from "./pages/record-scope.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { unmarkFieldRefs } from "@protobase/schema";
+import { unmarkFieldRefs } from "@protobase/schema/internal";
 //#region src/app/custom-section.tsx
 /**
 * A component of the record layout (`l.custom`), drawn with the record around it, so `useLayoutRecord()` gives it, in a

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

@@ -3,7 +3,7 @@ import { Problem } from "../pages/problem.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
 import { ListDisplayProvider } from "./display-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { unmarkFieldRefs } from "@protobase/schema";
+import { unmarkFieldRefs } from "@protobase/schema/internal";
 //#region src/app/displays/custom-display.tsx
 /**
 * A display the project draws: the component registered under its name gets the display's props, field references

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/list-displays.js

@@ -1,7 +1,7 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { displayValue } from "../../live/display-value.js";
-import { encodeKey, tableDisplay } from "@protobase/schema";
+import { encodeKey, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
 /**

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/error-reporting.js

@@ -1,4 +1,4 @@
-import { redactSecrets } from "@protobase/schema";
+import { redactSecrets } from "@protobase/schema/internal";
 //#region src/app/error-reporting.ts
 let loading;
 let capture;

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";
@@ -38,7 +39,8 @@ import { withFieldTypeCells } from "./field-types/field-type-cells.js";
 import { useMemo, useState } from "react";
 import { Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createWhere, tableDisplay } from "@protobase/schema";
+import { tableDisplay } from "@protobase/schema/internal";
+import { createWhere } from "@protobase/schema";
 //#region src/app/list-page.tsx
 const where = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
@@ -99,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);
@@ -254,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,
@@ -313,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/nav-recent.js

@@ -1,6 +1,7 @@
 import { recordKey, recordTitle, recordTitleField } from "../live/model-helpers.js";
 import { defaultOrderBy } from "./list-order.js";
-import { appPath, defaultRecentLimit, encodeKey, enumLabel } from "@protobase/schema";
+import { defaultRecentLimit, encodeKey } from "@protobase/schema/internal";
+import { appPath, enumLabel } from "@protobase/schema";
 //#region src/app/nav-recent.ts
 /** The list request behind a sidebar group: its filter, order (the list's sort when unset), size, and only the fields it shows. */
 const recentRequest = (model, view, recent) => ({

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

@@ -2,7 +2,8 @@ import { AppLink } from "../../use-app-address.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { jsx } from "react/jsx-runtime";
-import { appPath, fillAddress } from "@protobase/schema";
+import { fillAddress } from "@protobase/schema/internal";
+import { appPath } from "@protobase/schema";
 //#region src/app/pages/blocks/link.tsx
 const style = "font-medium text-primary-text hover:underline";
 /**

package/dist/app/pages/render-node.js

@@ -16,7 +16,7 @@ import { StatBlock } from "./blocks/stat.js";
 import { TableBlock } from "./blocks/table.js";
 import { Fragment } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { unmarkFieldRefs } from "@protobase/schema";
+import { unmarkFieldRefs } from "@protobase/schema/internal";
 import { isLayoutNode } from "@protobase/layout";
 //#region src/app/pages/render-node.tsx
 const blocks = {

package/dist/app/pages/use-layout-data.js

@@ -3,7 +3,7 @@ import { useClient } from "../../data/api-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { useCallback } from "react";
 import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
-import { encodeKey } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/pages/use-layout-data.ts
 /** A list item as a record scope: the key as the URL carries it, and the etag and permissions the item carries. */
 const scopeOf = (model, row) => ({

package/dist/app/pages/use-run-action.js

@@ -7,7 +7,7 @@ import { can } from "../permissions.js";
 import { fillHref } from "./action-href.js";
 import { useRefreshResource } from "./use-layout-data.js";
 import { useState } from "react";
-import { fillAddress } from "@protobase/schema";
+import { fillAddress } from "@protobase/schema/internal";
 //#region src/app/pages/use-run-action.ts
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**

package/dist/app/search/search-model.js

@@ -1,6 +1,7 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { appPath, createWhere, encodeKey, enumLabel, matchedSearchField, printFilter } from "@protobase/schema";
+import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
+import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
 //#region src/app/search/search-model.ts
 const where = createWhere();
 const searchTargets = (meta) => Object.values(meta.resources).flatMap((model) => {

package/dist/app/use-lines-draft.js

@@ -1,6 +1,6 @@
 import { recordKey } from "../live/model-helpers.js";
 import { useCallback, useMemo, useState } from "react";
-import { encodeKey } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/use-lines-draft.ts
 /**
 * The order the person has given the lines of a record, kept in the form until Save writes it, together with the

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/assistant-dock/use-assistant.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { applyAssistantEvent, emptyAssistantState } from "@protobase/schema";
+import { applyAssistantEvent, emptyAssistantState } from "@protobase/schema/internal";
 //#region src/assistant-dock/use-assistant.ts
 const messageOf = (error) => error instanceof Error ? error.message : "The assistant did not answer";
 /** Follows an assistant backend's event stream into state, with its two requests; `undefined` client means not yet. */

package/dist/data/use-record.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
 import { useQuery } from "@tanstack/react-query";
-import { encodeKey } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/data/use-record.ts
 const useRecord = (resource, key, enabled = true) => {
 	const client = useClient();

package/dist/data/use-update-record.js

@@ -2,7 +2,7 @@ import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
 import { PreconditionFailedError } from "@protobase/client";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { encodeKey } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/data/use-update-record.ts
 /**
 * PATCH with `If-Match`. On success the cached record gets the new ETag and lists refetch;