@protobase/ui 0.44.2 → 0.44.4

package/dist/app/gallery/lightbox.js

@@ -71,12 +71,12 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 		"aria-modal": "true",
 		"aria-label": title,
 		onKeyDown: key,
-		className: "fixed inset-0 z-[90] flex flex-col overflow-y-auto overscroll-contain bg-backdrop outline-none md:flex-row",
+		className: "fixed inset-0 z-[90] flex flex-col overflow-y-auto overscroll-contain bg-backdrop pl-[var(--pb-safe-left)] pr-[var(--pb-safe-right)] outline-none md:flex-row",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex h-dvh shrink-0 flex-col md:sticky md:top-0 md:min-w-0 md:flex-1",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center justify-between gap-2 p-3",
+					className: "flex shrink-0 items-center justify-between gap-2 p-3 pt-[calc(0.75rem+var(--pb-safe-top))]",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "rounded-full bg-background/85 px-3 py-1 font-medium tabular-nums text-foreground",
 						"aria-live": "polite",
@@ -107,7 +107,7 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 						})]
 					})]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "relative flex min-h-0 flex-1 touch-pan-y items-center justify-center px-3 pb-3 md:px-16",
+					className: "relative flex min-h-0 flex-1 touch-pan-y items-center justify-center px-3 pb-[calc(0.75rem+var(--pb-safe-bottom))] md:px-16",
 					onPointerDown: down,
 					onPointerUp: up,
 					onPointerCancel: () => start.current = void 0,
@@ -140,7 +140,7 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 			hasDetails && detailsOpen && desktop && /* @__PURE__ */ jsxs("aside", {
 				id: sidebarId,
 				"aria-label": detailsTitle,
-				className: "min-h-dvh w-[360px] shrink-0 border-l border-border bg-background p-5 text-foreground",
+				className: "min-h-dvh w-[360px] shrink-0 border-l border-border bg-background p-5 pt-[calc(1.25rem+var(--pb-safe-top))] text-foreground",
 				children: [/* @__PURE__ */ jsx("h2", {
 					className: "mb-3 text-[16px] font-semibold",
 					children: detailsTitle

package/dist/app/index.html

@@ -18,8 +18,8 @@
     </script>
   </head>
   <body>
-    <!-- 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>
+    <!-- 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 status bar and the home indicator, which the shell's bars keep clear of; the sides keep clear of the notch. -->
+    <div id="root" class="h-dvh" style="padding-left: var(--pb-safe-left); padding-right: var(--pb-safe-right)"></div>
     <script type="module" src="./main"></script>
   </body>
 </html>

package/dist/app/main.js

@@ -2,6 +2,7 @@ import { browserLocale } from "../locale/active-locale.js";
 import { nativeBridgeOf } from "./native-auth-fetch.js";
 import { uiFromModule } from "./pages/ui-from-module.js";
 import { App } from "./app.js";
+import { applyNativeViewport } from "./native-viewport.js";
 import { pageApiOrigin } from "./page-api-origin.js";
 import { StrictMode } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,10 +12,12 @@ import "../styles.css";
 //#region src/app/main.tsx
 const root = document.getElementById("root");
 if (!root) throw new Error("index.html needs an element with id \"root\"");
+const nativeBridge = nativeBridgeOf(window);
+if (nativeBridge) applyNativeViewport(document);
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
 	baseUrl: `${pageApiOrigin() ?? ""}/api/v1`,
 	ui: uiFromModule(projectUi),
 	locale: browserLocale(),
-	nativeBridge: nativeBridgeOf(window)
+	nativeBridge
 }) }));
 //#endregion

package/dist/app/native-viewport.js

@@ -0,0 +1,17 @@
+//#region src/app/native-viewport.ts
+/**
+* The viewport of the iOS and Android app: as the page's, at a scale of one. Safari on iOS zooms into an input whose
+* text is smaller than 16px when it is focused, and in the app the page then stays zoomed with its right side cut off;
+* an app does not zoom, so its viewport stays at that scale, under a pinch too. The page in a browser keeps its zoom.
+*/
+const nativeViewport = (content) => {
+	return [...content.split(",").map((part) => part.trim()).filter((part) => part && !/^maximum-scale\s*=/.test(part)), "maximum-scale=1"].join(", ");
+};
+/** Gives the document's viewport the app's scale; a document without a viewport tag needs none. */
+const applyNativeViewport = (doc) => {
+	const meta = doc.querySelector("meta[name=\"viewport\"]");
+	if (!meta) return;
+	meta.setAttribute("content", nativeViewport(meta.getAttribute("content") ?? ""));
+};
+//#endregion
+export { applyNativeViewport, nativeViewport };

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

@@ -59,7 +59,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 					children: sidebar("text-large")
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex min-w-0 flex-1 flex-col",
+					className: cn("flex min-w-0 flex-1 flex-col", !tabs && "pb-[var(--pb-safe-bottom)]"),
 					children: [
 						/* @__PURE__ */ jsx(TopBar, {
 							ref: topBarRef,
@@ -92,7 +92,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 					]
 				}),
 				rightPanel && /* @__PURE__ */ jsx("div", {
-					className: pageScroll ? "sticky top-0 flex h-dvh shrink-0 self-start" : "flex shrink-0",
+					className: pageScroll ? "sticky top-0 flex h-dvh shrink-0 self-start pt-[var(--pb-safe-top)]" : "flex shrink-0",
 					children: rightPanel
 				})
 			]

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

@@ -15,7 +15,7 @@ const BottomBar = ({ tabs, onNavigate, onMore, moreOpen, moreControls, sticky, r
 	return /* @__PURE__ */ jsxs("nav", {
 		ref,
 		"aria-label": text("tabs"),
-		className: cn("flex shrink-0 border-t bg-background pb-[env(safe-area-inset-bottom)] md:hidden", sticky && "sticky bottom-0 z-30"),
+		className: cn("flex shrink-0 border-t bg-background pb-[var(--pb-safe-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/drawer.js

@@ -21,7 +21,7 @@ const Drawer = ({ id, open, onClose, children }) => {
 			"aria-modal": "true",
 			"aria-label": text("navigation"),
 			tabIndex: -1,
-			className: "absolute inset-y-0 left-0 flex w-60 max-w-[85vw] bg-sidebar shadow-pop outline-none",
+			className: "absolute inset-y-0 left-0 flex w-[calc(15rem+var(--pb-safe-left))] max-w-[85vw] bg-sidebar pl-[var(--pb-safe-left)] shadow-pop outline-none",
 			onClick: (event) => event.target.closest("a") && onClose(),
 			children
 		})]

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

@@ -49,7 +49,7 @@ const usePageInsets = (on, top, bottom, bottomShown) => {
 		const root = document.documentElement;
 		const update = () => {
 			const above = `${top.current?.offsetHeight ?? 0}px`;
-			const below = `${bottom.current?.offsetHeight ?? 0}px`;
+			const below = bottom.current ? `${bottom.current.offsetHeight}px` : "var(--pb-safe-bottom)";
 			root.style.setProperty("--pb-sticky-top", above);
 			root.style.setProperty("--pb-sticky-bottom", below);
 			root.style.setProperty("scroll-padding-top", above);

package/dist/app-shell/sidebar.js

@@ -19,7 +19,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 		"aria-label": text("resources"),
 		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"),
+			className: cn("group/side absolute inset-y-0 left-0 flex flex-col overflow-hidden border-r bg-sidebar pb-[var(--pb-safe-bottom)] pt-[var(--pb-safe-top)]", 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: [
 				/* @__PURE__ */ jsx("div", {
 					className: cn("flex h-12 shrink-0 items-center px-3.5", mode === "icon-label" && "justify-center px-0"),

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

@@ -27,7 +27,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 	}, [search]);
 	return /* @__PURE__ */ jsxs("header", {
 		ref,
-		className: cn(sticky ? "sticky top-0 z-30" : "relative", "flex h-12 shrink-0 items-center gap-1 border-b bg-background pl-4 pr-2 md:gap-4 md:px-5"),
+		className: cn(sticky ? "sticky top-0 z-30" : "relative", "flex h-[calc(3rem+var(--pb-safe-top))] shrink-0 items-center gap-1 border-b bg-background pl-4 pr-2 pt-[var(--pb-safe-top)] md:gap-4 md:px-5"),
 		children: [
 			onMenu && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -78,7 +78,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 				]
 			}),
 			search && searchOpen && /* @__PURE__ */ jsxs("div", {
-				className: "absolute inset-0 z-20 flex items-center gap-1 bg-background px-3 md:hidden",
+				className: "absolute inset-0 z-20 flex items-center gap-1 bg-background px-3 pt-[var(--pb-safe-top)] md:hidden",
 				children: [/* @__PURE__ */ jsx(GlobalSearch, {
 					className: "min-w-0 flex-1",
 					autoFocus: true,

package/dist/auth/auth-layout.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-layout.tsx
 /** The frame of the sign-in and first-run pages and of public forms: logo, title and a card. */
 const AuthLayout = ({ title, description, size = "sm", children }) => /* @__PURE__ */ jsx("div", {
-	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 py-10",
+	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 pb-[calc(2.5rem+var(--pb-safe-bottom))] pt-[calc(2.5rem+var(--pb-safe-top))]",
 	children: /* @__PURE__ */ jsxs("div", {
 		className: cn("w-full", size === "sm" ? "max-w-sm" : "max-w-lg"),
 		children: [/* @__PURE__ */ jsxs("div", {

package/dist/package.js

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

package/dist/primitives/dialog.js

@@ -8,7 +8,7 @@ const Dialog = ({ title, description, onClose, actions, children, wide = false }
 	const panel = useRef(null);
 	useFocusTrap(panel, true, onClose);
 	return /* @__PURE__ */ jsx("div", {
-		className: "fixed inset-0 z-[90] flex items-center justify-center bg-backdrop/30 p-4",
+		className: "fixed inset-0 z-[90] flex items-center justify-center bg-backdrop/30 p-4 pb-[calc(1rem+var(--pb-safe-bottom))] pl-[calc(1rem+var(--pb-safe-left))] pr-[calc(1rem+var(--pb-safe-right))] pt-[calc(1rem+var(--pb-safe-top))]",
 		onMouseDown: (event) => event.target === event.currentTarget && onClose(),
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: panel,
@@ -16,7 +16,7 @@ const Dialog = ({ title, description, onClose, actions, children, wide = false }
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": title,
-			className: cn("outline-none max-h-[90vh] w-full overflow-y-auto rounded-lg border bg-background p-4 shadow-pop sm:p-5", wide ? "max-w-3xl" : "max-w-md"),
+			className: cn("outline-none max-h-[min(90vh,100%)] w-full overflow-y-auto rounded-lg border bg-background p-4 shadow-pop sm:p-5", wide ? "max-w-3xl" : "max-w-md"),
 			children: [
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-[16px] font-semibold",

package/dist/primitives/sheet.js

@@ -39,7 +39,7 @@ const Sheet = ({ title, open, onClose, children }) => {
 			"aria-modal": "true",
 			"aria-label": title,
 			tabIndex: -1,
-			className: "absolute inset-x-0 bottom-0 flex max-h-[85vh] flex-col rounded-t-xl border-t bg-background shadow-pop outline-none",
+			className: "absolute inset-x-0 bottom-0 flex max-h-[85vh] flex-col rounded-t-xl border-t bg-background pl-[var(--pb-safe-left)] pr-[var(--pb-safe-right)] shadow-pop outline-none",
 			children: [/* @__PURE__ */ jsxs("header", {
 				className: "relative flex shrink-0 touch-none items-center justify-between border-b px-4",
 				onPointerDown: down,
@@ -63,7 +63,7 @@ const Sheet = ({ title, open, onClose, children }) => {
 					})
 				]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-[calc(1.5rem+var(--pb-safe-bottom))]",
 				children
 			})]
 		})]