@protobase/ui 0.15.4 → 0.15.5

package/dist/app/app.js

@@ -169,6 +169,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		recordKey: address.key
 	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, address.resource);
 	const appShell = /* @__PURE__ */ jsx(AppShell, {
+		pageScroll: true,
 		sidebarMode: sidebarMode ?? "text-small",
 		activeItem: place ?? "",
 		breadcrumb,

package/dist/app/create/create-record-form.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/create/create-record-form.tsx
 /** The presentation of "New <thing>": the view's sections, each field with its editor, and Create or Cancel. */
 const CreateRecordForm = ({ noun, collection, sections, saving, message, onSubmit, onCancel }) => /* @__PURE__ */ jsx("form", {
-	className: "min-h-0 flex-1 overflow-y-auto",
+	className: "flex-1",
 	onSubmit: (event) => {
 		event.preventDefault();
 		onSubmit();

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

@@ -20,7 +20,7 @@ const CustomDisplay = ({ display, list }) => {
 	return /* @__PURE__ */ jsx(ListDisplayProvider, {
 		value: list,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "min-h-0 flex-1 overflow-y-auto",
+			className: "min-w-0 flex-1 overflow-x-auto",
 			children: /* @__PURE__ */ jsx(CustomBoundary, {
 				name: display.component,
 				children: /* @__PURE__ */ jsx(Component, { ...unmarkFieldRefs(display.props ?? {}) })

package/dist/app/index.html

@@ -16,8 +16,8 @@
     </script>
   </head>
   <body>
-    <!-- The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->
-    <div id="root" class="h-screen" style="padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right)"></div>
+    <!-- As tall as the screen shows, browser toolbars aside, so a page that fills it, such as a map, keeps the bottom bar in view. The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->
+    <div id="root" class="h-dvh" style="padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right)"></div>
     <script type="module" src="./main"></script>
   </body>
 </html>

package/dist/app/list-page.js

@@ -141,7 +141,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
-	const pageScroll = !display || display.kind === "cards";
+	const pageScroll = display?.kind !== "map";
 	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
 	const scroll = useListScroll();

package/dist/app/meta-gate.js

@@ -15,7 +15,7 @@ const useAdminMeta = () => {
 	return meta;
 };
 const Notice = ({ title, children }) => /* @__PURE__ */ jsx("div", {
-	className: "flex h-full min-h-48 items-center justify-center p-8",
+	className: "flex h-full min-h-48 flex-1 items-center justify-center p-8",
 	children: /* @__PURE__ */ jsxs("div", {
 		className: "max-w-md text-center",
 		children: [/* @__PURE__ */ jsx("h1", {

package/dist/app/pages/blocks/page-block.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const PageBlock = ({ node, children, slots }) => {
 	const { title, description } = propsOf(node);
 	return /* @__PURE__ */ jsx("div", {
-		className: "min-h-0 flex-1 overflow-y-auto",
+		className: "flex-1",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto flex max-w-[1200px] flex-col gap-6 px-4 pb-16 pt-6 md:px-10 md:py-8",
 			children: [/* @__PURE__ */ jsx(PageHeader, {

package/dist/app/record-page.js

@@ -234,11 +234,11 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-0 flex-1 flex-col",
+		className: "flex flex-1 flex-col",
 		children: [
 			remove.dialogs,
 			/* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-y-auto",
+				className: "flex-1",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "mx-auto max-w-[1100px] px-4 pb-8 pt-6 md:px-10 md:py-8",
 					children: [
@@ -364,7 +364,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				})
 			}),
 			(editor.dirty || canDelete || canUpdate) && /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
+				className: "sticky bottom-[var(--pb-sticky-bottom,0px)] z-20 flex shrink-0 items-center gap-2 border-t bg-background p-3 md:hidden",
 				children: saveControls
 			})
 		]

package/dist/app/source-notice.js

@@ -14,7 +14,7 @@ const reason = (error) => {
 const SourceNotice = ({ status }) => {
 	const queryClient = useQueryClient();
 	if (status.state !== "error") return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		className: "flex h-full min-h-48 flex-1 items-center justify-center gap-2 text-[13px] text-muted-foreground",
 		children: [
 			/* @__PURE__ */ jsx(Spinner, {}),
 			" Loading from ",
@@ -22,7 +22,7 @@ const SourceNotice = ({ status }) => {
 		]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex h-full min-h-48 items-center justify-center p-8",
+		className: "flex h-full min-h-48 flex-1 items-center justify-center p-8",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "max-w-md text-center",
 			children: [

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

@@ -9,14 +9,15 @@ import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, onSignIn, organizations, roles, theme, search, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, onSignIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
 		if (desktop) setDrawerOpen(false);
 	}, [desktop]);
 	const tabs = !desktop && bottomBar && bottomBar.length > 0 ? bottomBar : void 0;
-	const [pageScroll, setPageScroll] = useState(false);
+	const [chosen, setPageScroll] = useState();
+	const pageScroll = chosen ?? scrollsByDefault;
 	const topBarRef = useRef(null);
 	const bottomBarRef = useRef(null);
 	usePageInsets(pageScroll, topBarRef, bottomBarRef, Boolean(tabs));

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

@@ -1,18 +1,19 @@
 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`. */
+/** Turns the shell's page scrolling on or off, or back to its `pageScroll` with `undefined`; 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`.
+* stays clear of the bars with `--pb-sticky-top` and `--pb-sticky-bottom`. Not `on`, the page fills the box instead,
+* as a map does. Once the page is gone the shell's `pageScroll` applies again.
 */
 const usePageScroll = (on) => {
 	const set = useContext(PageScrollContext);
 	useLayoutEffect(() => {
 		set(on);
-		return () => set(false);
+		return () => set(void 0);
 	}, [set, on]);
 };
 const properties = [

package/dist/package.js

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