@protobase/ui 0.45.9 → 0.45.11

package/dist/app/app.js

@@ -82,7 +82,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const user = state.kind === "signed-in" ? state.user : void 0;
 	const staff = state.kind === "signed-in" ? state.staff : void 0;
 	const { path, params, basePath } = useRouter();
-	const { address, go, open } = useAppAddress();
+	const { address, go, open, back } = useAppAddress();
 	const place = placeOf(address);
 	const shown = recordOf(address);
 	const search = useGlobalSearch();
@@ -248,6 +248,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			onSwitch: role.switchTo
 		} : void 0,
 		onNavigate: open,
+		onBack: back,
 		sidebarNotice: /* @__PURE__ */ jsx(NewVersionBanner, {}),
 		banner: (staff || pluginNotice) && /* @__PURE__ */ jsxs(Fragment$1, { children: [staff && /* @__PURE__ */ jsx(StaffBanner, {
 			signIn: staff,

package/dist/app/page-places.js

@@ -0,0 +1,34 @@
+import { guarded } from "../lib/guarded.js";
+//#region src/app/page-places.ts
+const storageKey = "protobase:page-places";
+/** The places kept, the most recent ones, so the storage stays small however long the tab is used. */
+const kept = 50;
+const isPlace = (value) => Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "number" && Number.isFinite(value[1]) && value[1] >= 0;
+const read = (storage) => guarded(() => {
+	const raw = storage.getItem(storageKey);
+	if (raw === null) return [];
+	const parsed = JSON.parse(raw);
+	return Array.isArray(parsed) ? parsed.filter(isPlace) : [];
+}, []);
+/**
+* How far down the document was scrolled in each history entry of a tab, by the entry's id, kept in `storage` (the
+* tab's session storage) when `persist` is called, so they outlast a reload of the page. An entry never left yet, as
+* one a link just made, starts at the top.
+*/
+const createPagePlaces = (storage) => {
+	const places = new Map(read(storage));
+	const placeOf = (entry) => places.get(entry) ?? 0;
+	const save = (entry, top) => {
+		places.delete(entry);
+		places.set(entry, Math.max(0, Math.round(top)));
+		for (const oldest of [...places.keys()].slice(0, Math.max(0, places.size - kept))) places.delete(oldest);
+	};
+	const persist = () => guarded(() => storage.setItem(storageKey, JSON.stringify([...places])), void 0);
+	return {
+		placeOf,
+		save,
+		persist
+	};
+};
+//#endregion
+export { createPagePlaces };

package/dist/app/restore-scroll.js

@@ -0,0 +1,33 @@
+//#region src/app/restore-scroll.ts
+/** How long a page may take to grow tall enough, as while its data loads, before it is left where it is. */
+const patience = 3e3;
+/**
+* Scrolls the document to `top`. A page still too short for it, as one whose data is loading, is scrolled again each
+* time it grows, until it is there, a few seconds pass, or anything else scrolls it: the person, or a list that brings
+* itself back to its place. Returns how to stop early.
+*/
+const restoreScroll = (top) => {
+	let placed = 0;
+	const place = () => {
+		window.scrollTo({
+			top,
+			behavior: "instant"
+		});
+		placed = window.scrollY;
+		return placed >= top - 1;
+	};
+	if (place()) return () => {};
+	const observer = new ResizeObserver(() => place() && stop());
+	const moved = () => Math.abs(window.scrollY - placed) > 1 && stop();
+	const stop = () => {
+		observer.disconnect();
+		clearTimeout(timer);
+		window.removeEventListener("scroll", moved);
+	};
+	const timer = setTimeout(stop, patience);
+	observer.observe(document.body);
+	window.addEventListener("scroll", moved, { passive: true });
+	return stop;
+};
+//#endregion
+export { restoreScroll };

package/dist/app/router.js

@@ -1,8 +1,11 @@
 import { RouteLink } from "../primitives/route-link.js";
+import { guarded } from "../lib/guarded.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { text } from "./messages.js";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createPagePlaces } from "./page-places.js";
+import { restoreScroll } from "./restore-scroll.js";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/router.tsx
 const RouterContext = createContext(null);
@@ -28,12 +31,17 @@ const historyEntry = () => {
 	}, "");
 	return entry;
 };
+const noStorage = {
+	getItem: () => null,
+	setItem: () => {}
+};
 const Router = ({ basePath = "", initialUrl, children }) => {
 	const memory = initialUrl !== void 0;
 	const [page, setPage] = useState(() => ({
 		url: initialUrl ?? browserUrl(),
 		entry: memory ? newEntry() : historyEntry()
 	}));
+	const [places] = useState(() => createPagePlaces(memory ? noStorage : guarded(() => window.sessionStorage, void 0) ?? noStorage));
 	const guards = useRef(/* @__PURE__ */ new Map());
 	const losesInput = () => [...guards.current.values()].includes("input-lost");
 	const current = useRef(page);
@@ -44,12 +52,23 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 	const leaveAfterUndo = useRef(void 0);
 	const reloading = useRef(false);
 	const [pending, setPending] = useState();
+	const rememberScroll = useCallback(() => places.save(current.current.entry, window.scrollY), [places]);
+	useLayoutEffect(() => restoreScroll(places.placeOf(page.entry)), [places, page.entry]);
 	useEffect(() => {
 		if (memory) return;
+		window.history.scrollRestoration = "manual";
 		window.history.replaceState({
+			...historyState(),
 			protobaseIndex: position.current,
 			protobaseEntry: current.current.entry
 		}, "");
+		const persist = () => {
+			rememberScroll();
+			places.persist();
+		};
+		const hidden = () => document.visibilityState === "hidden" && persist();
+		window.addEventListener("pagehide", persist);
+		document.addEventListener("visibilitychange", hidden);
 		const onPop = () => {
 			const next = historyIndex();
 			if (undoing.current) {
@@ -73,28 +92,40 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 			}
 			proceeding.current = false;
 			position.current = next;
+			rememberScroll();
 			setPage({
 				url: browserUrl(),
 				entry: historyEntry()
 			});
 		};
 		window.addEventListener("popstate", onPop);
-		return () => window.removeEventListener("popstate", onPop);
-	}, [memory]);
+		return () => {
+			window.removeEventListener("popstate", onPop);
+			window.removeEventListener("pagehide", persist);
+			document.removeEventListener("visibilitychange", hidden);
+		};
+	}, [
+		memory,
+		rememberScroll,
+		places
+	]);
 	const go = useCallback((full, replace) => {
 		const entry = replace ? current.current.entry : newEntry();
 		if (!memory) {
 			position.current += replace ? 0 : 1;
+			const previous = replace ? historyState().protobasePrevious : current.current.url;
 			window.history[replace ? "replaceState" : "pushState"]({
 				protobaseIndex: position.current,
-				protobaseEntry: entry
+				protobaseEntry: entry,
+				protobasePrevious: previous
 			}, "", full);
 		}
+		rememberScroll();
 		setPage({
 			url: full,
 			entry
 		});
-	}, [memory]);
+	}, [memory, rememberScroll]);
 	const navigate = useCallback((to, { replace = false } = {}) => {
 		const full = `${basePath}${to}`;
 		if (pathOf(full) !== pathOf(current.current.url) && guards.current.size > 0) return setPending({
@@ -105,6 +136,15 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		});
 		go(full, replace);
 	}, [basePath, go]);
+	const back = useCallback((to) => {
+		const previous = memory ? void 0 : historyState().protobasePrevious;
+		if (previous !== void 0 && pathOf(previous) === pathOf(`${basePath}${to}`)) return window.history.back();
+		navigate(to);
+	}, [
+		memory,
+		basePath,
+		navigate
+	]);
 	const registerGuard = useCallback((kind = "draft-kept") => {
 		const token = Symbol("guard");
 		guards.current.set(token, kind);
@@ -138,6 +178,7 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 			basePath,
 			entry: page.entry,
 			navigate,
+			back,
 			registerGuard,
 			reload,
 			reloadConfirmed
@@ -146,6 +187,7 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		page,
 		basePath,
 		navigate,
+		back,
 		registerGuard,
 		reload,
 		reloadConfirmed

package/dist/app/use-app-address.d.ts

@@ -5,8 +5,8 @@ import { AppAddress } from "@protobase/schema";
 /**
  * The app's address as logical values, and the ways to change it: `set` changes the list in place, `listTo` is the
  * list after a change for a link to it, `go` moves to
- * another address, `href` is an address for an `<a href>` and `open` follows such an href. Every component reads and
- * writes the address through this hook, never the query string or a path of its own.
+ * another address, `href` is an address for an `<a href>`, `open` follows such an href and `back` goes back to one.
+ * Every component reads and writes the address through this hook, never the query string or a path of its own.
  */
 export declare const useAppAddress: () => {
   address: CurrentAddress | undefined;
@@ -17,6 +17,7 @@ export declare const useAppAddress: () => {
   }) => void;
   href: (to: AppAddress) => string;
   open: (target: string) => void;
+  back: (target: string) => void;
 };
 /** A link to an address in the app: an ordinary anchor that the router follows without reloading the page. */
 export declare const AppLink: ({ to, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & {

package/dist/app/use-app-address.js

@@ -9,11 +9,11 @@ import { appPath, readAppPath } from "@protobase/schema";
 /**
 * The app's address as logical values, and the ways to change it: `set` changes the list in place, `listTo` is the
 * list after a change for a link to it, `go` moves to
-* another address, `href` is an address for an `<a href>` and `open` follows such an href. Every component reads and
-* writes the address through this hook, never the query string or a path of its own.
+* another address, `href` is an address for an `<a href>`, `open` follows such an href and `back` goes back to one.
+* Every component reads and writes the address through this hook, never the query string or a path of its own.
 */
 const useAppAddress = () => {
-	const { path, params, basePath, navigate } = useRouter();
+	const { path, params, basePath, navigate, back: backTo } = useRouter();
 	const { pages, resources, views } = useAdminMeta();
 	const xs = useIsXs();
 	const pageNames = useMemo(() => new Set(Object.keys(pages)), [pages]);
@@ -37,13 +37,17 @@ const useAppAddress = () => {
 		if (read?.kind !== "list") throw new Error("listTo and set change the list the app shows; use go to move to another address");
 		return changedList(read, change, defaults(read.resource, read.list));
 	}, [read, defaults]);
+	const set = useCallback((change) => go(listTo(change), { replace: true }), [listTo, go]);
+	const href = useCallback((to) => appPath(to, basePath), [basePath]);
+	const below = useCallback((target) => target.startsWith(`${basePath}/`) ? target.slice(basePath.length) : target, [basePath]);
 	return {
 		address,
-		set: useCallback((change) => go(listTo(change), { replace: true }), [listTo, go]),
+		set,
 		listTo,
 		go,
-		href: useCallback((to) => appPath(to, basePath), [basePath]),
-		open: useCallback((target) => navigate(target.startsWith(`${basePath}/`) ? target.slice(basePath.length) : target), [basePath, navigate])
+		href,
+		open: useCallback((target) => navigate(below(target)), [below, navigate]),
+		back: useCallback((target) => backTo(below(target)), [below, backTo])
 	};
 };
 /** A link to an address in the app: an ordinary anchor that the router follows without reloading the page. */

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

@@ -11,7 +11,7 @@ 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, appName, appIcon, logo, actions, rightPanel, sidebarNotice, banner, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appName, appIcon, logo, actions, rightPanel, sidebarNotice, banner, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onBack, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const noticeShown = useSidebarNoticeShown(sidebarMode);
 	const [drawerOpen, setDrawerOpen] = useState(false);
@@ -67,6 +67,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 							sticky: pageScroll,
 							breadcrumb,
 							onNavigate,
+							onBack,
 							actions,
 							onMenu: desktop || tabs ? void 0 : () => setDrawerOpen(true),
 							menuOpen: drawerOpen,

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

@@ -9,7 +9,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/top-bar.tsx
 /** An icon button of the top bar on a mobile screen, as the menu, back and search buttons are. */
 const topBarButton = "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, sticky, slotRef, ref }) => {
+const TopBar = ({ breadcrumb, onNavigate, onBack, actions, onMenu, menuOpen, menuControls, search, sticky, slotRef, ref }) => {
 	const [searchOpen, setSearchOpen] = useState(false);
 	const back = backTarget(breadcrumb);
 	const desktopSearch = useRef(null);
@@ -42,9 +42,10 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 				href: back.href,
 				"aria-label": text("backTo", back.label),
 				onClick: (event) => {
-					if (!onNavigate || !inApp(event)) return;
+					const follow = onBack ?? onNavigate;
+					if (!follow || !inApp(event)) return;
 					event.preventDefault();
-					onNavigate(back.href);
+					follow(back.href);
 				},
 				className: cn("inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden", !onMenu && "-ml-3"),
 				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" })

package/dist/auth/code-form.js

@@ -3,7 +3,7 @@ import { Button } from "../primitives/button.js";
 import { OtpInput } from "../primitives/otp-input.js";
 import { AuthLayout } from "./auth-layout.js";
 import { ResendCodeButton } from "./resend-code-button.js";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/code-form.tsx
 /**
@@ -12,6 +12,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const CodeForm = ({ title, description, explanation, submitLabel, onSubmit, onResend, onChangeAddress, changeAddressLabel, busy, error, notice, resendCooldown }) => {
 	const [code, setCode] = useState("");
+	const field = useRef(null);
+	useEffect(() => {
+		if (!notice) return;
+		setCode("");
+		field.current?.focus();
+	}, [notice]);
 	return /* @__PURE__ */ jsxs(AuthLayout, {
 		title,
 		description,
@@ -35,6 +41,7 @@ const CodeForm = ({ title, description, explanation, submitLabel, onSubmit, onRe
 					/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 font-medium",
 						children: [text("code"), /* @__PURE__ */ jsx(OtpInput, {
+							ref: field,
 							name: "code",
 							required: true,
 							autoFocus: true,

package/dist/package.js

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