@protobase/ui 0.26.8 → 0.27.0

package/dist/app/app.d.ts

@@ -12,7 +12,7 @@ export type AppProps = {
   client?: Client;
   /** Ready-made clients of the sources `/meta` names, by their URL, for stories and tests. */
   sources?: Record<string, Client>;
-  /** Sign-in state for the app; made from the page's origin when omitted. */
+  /** Sign-in state for the app; made from `baseUrl`'s origin when omitted. */
   auth?: AuthSession;
   /** Path prefix the app is mounted under, for example `/admin`. */
   basePath?: string;

package/dist/app/app.js

@@ -309,6 +309,7 @@ const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...r
 	setFallbackLocale(locale ?? "en");
 	return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 		session: auth,
+		...rest.baseUrl && { origin: new URL(rest.baseUrl, window.location.href).origin },
 		children: /* @__PURE__ */ jsx(Router, {
 			basePath,
 			initialUrl,

package/dist/app/displays/card-layout.js

@@ -15,5 +15,15 @@ const anchoredTop = (top, before, after) => {
 	if (before.columns === after.columns) return row * after.rowHeight;
 	return Math.floor(Math.floor(row) * before.columns / after.columns) * after.rowHeight;
 };
+/**
+* Where the cards are at the offset `top`, as a list remembers it: the first record of the row at the top, plus how far
+* into that row as a fraction of its height, so it comes back to the same records whatever the columns then.
+*/
+const cardPlace = (top, layout) => {
+	const row = top / layout.rowHeight;
+	return Math.floor(row) * layout.columns + row % 1;
+};
+/** The row, with how far into it, that a place `cardPlace` gave falls in with `columns` cards a row. */
+const placeRow = (place, columns) => Math.floor(Math.floor(place) / columns) + place % 1;
 //#endregion
-export { anchoredTop, cardColumns, cardWidth, recordRange };
+export { anchoredTop, cardColumns, cardPlace, cardWidth, placeRow, recordRange };

package/dist/app/displays/virtual-cards.js

@@ -2,7 +2,7 @@ import { Skeleton } from "../../primitives/skeleton.js";
 import { usePagedRows } from "../../data-grid/use-paged-rows.js";
 import { useVirtualRows } from "../../data-grid/use-virtual-rows.js";
 import { createFlipGuard } from "../../lib/flip-guard.js";
-import { anchoredTop, cardColumns, cardWidth, recordRange } from "./card-layout.js";
+import { anchoredTop, cardColumns, cardPlace, cardWidth, placeRow, recordRange } from "./card-layout.js";
 import { withMeasuredHeight } from "./measured-heights.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -33,12 +33,14 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 	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.has(itemWidth);
+	const onScroll = (top) => onScrollIndex(cardPlace(top, layout));
 	const scroll = useVirtualRows({
 		total: Math.ceil(total / columns),
 		rowHeight,
-		initialIndex: Math.floor(startIndex / columns),
+		initialIndex: placeRow(startIndex, columns),
 		settle,
-		ready
+		ready,
+		onScroll
 	});
 	useLayoutEffect(() => {
 		if (changed) scroll.scrollTo(scroll.top);
@@ -46,7 +48,6 @@ const VirtualCards = ({ source, label, initialIndex, onScrollIndex, minHeight, c
 			layout,
 			top: scroll.top
 		};
-		if (!changed) onScrollIndex(Math.floor(Math.max(0, scroll.top) / rowHeight) * columns);
 	});
 	const range = recordRange(scroll.first, scroll.last, columns, total);
 	const getRow = usePagedRows({

package/dist/app/list-places.js

@@ -0,0 +1,48 @@
+import { guarded } from "../lib/guarded.js";
+//#region src/app/list-places.ts
+const storageKey = "protobase:list-places";
+/** The places kept, the most recent ones, so the storage stays small however long the tab is used. */
+const kept = 50;
+const keyOf = (entry, url) => `${entry} ${url}`;
+const isSaved = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	const { entry, url, place } = value;
+	return typeof entry === "string" && typeof url === "string" && typeof place === "number" && Number.isFinite(place) && place >= 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(isSaved) : [];
+}, []);
+/**
+* The places of the lists of a tab, by history entry and list URL, kept in `storage` (the tab's session storage) when
+* `persist` is called, so they outlast a reload of the page. A list starts where it was in its history entry, as on
+* Back; in an entry it has no place in yet, as after a link to the same list, where it last was in any entry.
+*/
+const createListPlaces = (storage) => {
+	const places = new Map(read(storage).map((saved) => [keyOf(saved.entry, saved.url), saved]));
+	const placeOf = (entry, url) => {
+		const own = places.get(keyOf(entry, url));
+		if (own) return own.place;
+		return [...places.values()].findLast((saved) => saved.url === url)?.place ?? 0;
+	};
+	const save = (entry, url, place) => {
+		const key = keyOf(entry, url);
+		places.delete(key);
+		places.set(key, {
+			entry,
+			url,
+			place
+		});
+		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.values()])), void 0);
+	return {
+		placeOf,
+		save,
+		persist
+	};
+};
+//#endregion
+export { createListPlaces };

package/dist/app/list-scroll.js

@@ -1,23 +1,42 @@
+import { guarded } from "../lib/guarded.js";
 import { useRouter } from "./router.js";
-import { useCallback } from "react";
+import { createListPlaces } from "./list-places.js";
+import { useCallback, useEffect } from "react";
 //#region src/app/list-scroll.ts
-/** The first record in view of the list each history entry last showed, for this tab; a page load starts empty. */
-const remembered = /* @__PURE__ */ new Map();
+const noStorage = {
+	getItem: () => null,
+	setItem: () => {}
+};
+/** The places of this tab's lists, read from its session storage on first use. */
+let places;
+const tabPlaces = () => places ??= createListPlaces(guarded(() => window.sessionStorage, void 0) ?? noStorage);
 /**
-* Where a list starts and how it remembers where it is, so going back to it shows the same records. Only the list the
-* history entry showed last comes back: after a change of sort or filter, which replaces the entry, the list starts at
-* the top again.
+* Where a list starts and how it remembers where it is, so going back to it, or following a link to it, shows the same
+* records at the same height. After a change of sort or filter, a list of another URL, it starts at the top. The places
+* are stored when the list goes and when the page is hidden or left, so a reload or a discarded tab keeps them.
 */
 const useListScroll = () => {
 	const { entry, path, params } = useRouter();
 	const url = `${path}?${params.toString()}`;
-	const last = remembered.get(entry);
-	const remember = useCallback((index) => void remembered.set(entry, {
-		url,
-		index
-	}), [entry, url]);
+	const tab = tabPlaces();
+	useEffect(() => {
+		const persist = () => tab.persist();
+		const hidden = () => document.visibilityState === "hidden" && tab.persist();
+		window.addEventListener("pagehide", persist);
+		document.addEventListener("visibilitychange", hidden);
+		return () => {
+			window.removeEventListener("pagehide", persist);
+			document.removeEventListener("visibilitychange", hidden);
+			tab.persist();
+		};
+	}, [tab]);
+	const remember = useCallback((place) => tab.save(entry, url, place), [
+		tab,
+		entry,
+		url
+	]);
 	return {
-		initialIndex: last?.url === url ? last.index : 0,
+		initialIndex: tab.placeOf(entry, url),
 		remember
 	};
 };

package/dist/app/main.js

@@ -1,6 +1,7 @@
 import { browserLocale } from "../locale/active-locale.js";
 import { uiFromModule } from "./pages/ui-from-module.js";
 import { App } from "./app.js";
+import { pageApiOrigin } from "./page-api-origin.js";
 import { StrictMode } from "react";
 import { jsx } from "react/jsx-runtime";
 import { createRoot } from "react-dom/client";
@@ -10,7 +11,7 @@ import "../styles.css";
 const root = document.getElementById("root");
 if (!root) throw new Error("index.html needs an element with id \"root\"");
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
-	baseUrl: "/api/v1",
+	baseUrl: `${pageApiOrigin() ?? ""}/api/v1`,
 	ui: uiFromModule(projectUi),
 	locale: browserLocale()
 }) }));

package/dist/app/page-api-origin.js

@@ -0,0 +1,18 @@
+import { apiOriginMeta } from "@protobase/schema/internal";
+//#region src/app/page-api-origin.ts
+/**
+* The API origin the page's `<meta name="protobase-api-origin">` tags name: `undefined` without one. Anything but one
+* tag holding exactly an http or https origin, such as `https://shop.example.com`, is an error.
+*/
+const apiOriginOf = (contents) => {
+	if (contents.length === 0) return void 0;
+	if (contents.length > 1) throw new Error(`The page has ${contents.length} ${apiOriginMeta} meta tags; it may have one`);
+	const value = contents[0];
+	const url = URL.canParse(value) ? new URL(value) : void 0;
+	if (!url || url.protocol !== "http:" && url.protocol !== "https:" || url.origin !== value) throw new Error(`The page's ${apiOriginMeta} meta tag holds "${value}", which is not an http or https origin such as https://shop.example.com`);
+	return value;
+};
+/** The API origin this page names in its `<meta name="protobase-api-origin">` (see `apiOriginOf`). */
+const pageApiOrigin = () => apiOriginOf([...document.querySelectorAll(`meta[name="${apiOriginMeta}"]`)].map((meta) => meta.content));
+//#endregion
+export { apiOriginOf, pageApiOrigin };

package/dist/app/router.js

@@ -13,14 +13,30 @@ const useRouter = () => {
 };
 const browserUrl = () => `${window.location.pathname}${window.location.search}`;
 const pathOf = (url) => new URL(url, "http://local").pathname;
+const historyState = () => window.history.state ?? {};
 /** Our place in the browser history, so a back or forward press can be told apart and, if needed, undone. */
-const historyIndex = () => window.history.state?.protobaseIndex ?? 0;
+const historyIndex = () => historyState().protobaseIndex ?? 0;
+const newEntry = () => Math.random().toString(36).slice(2);
+/** The id of the current history entry, given one if it has none yet, as an entry pushed before the app started. */
+const historyEntry = () => {
+	const state = historyState();
+	if (state.protobaseEntry) return state.protobaseEntry;
+	const entry = newEntry();
+	window.history.replaceState({
+		...state,
+		protobaseEntry: entry
+	}, "");
+	return entry;
+};
 const Router = ({ basePath = "", initialUrl, children }) => {
 	const memory = initialUrl !== void 0;
-	const [url, setUrl] = useState(initialUrl ?? browserUrl());
+	const [page, setPage] = useState(() => ({
+		url: initialUrl ?? browserUrl(),
+		entry: memory ? newEntry() : historyEntry()
+	}));
 	const guards = useRef(/* @__PURE__ */ new Set());
-	const urlRef = useRef(url);
-	urlRef.current = url;
+	const current = useRef(page);
+	current.current = page;
 	const position = useRef(memory ? 0 : historyIndex());
 	const undoing = useRef(false);
 	const proceeding = useRef(false);
@@ -28,7 +44,10 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 	const [pending, setPending] = useState();
 	useEffect(() => {
 		if (memory) return;
-		window.history.replaceState({ protobaseIndex: position.current }, "");
+		window.history.replaceState({
+			protobaseIndex: position.current,
+			protobaseEntry: current.current.entry
+		}, "");
 		const onPop = () => {
 			const next = historyIndex();
 			if (undoing.current) {
@@ -39,7 +58,7 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 				return;
 			}
 			const delta = next - position.current;
-			const leaving = pathOf(browserUrl()) !== pathOf(urlRef.current);
+			const leaving = pathOf(browserUrl()) !== pathOf(current.current.url);
 			if (!proceeding.current && guards.current.size > 0 && leaving) {
 				undoing.current = true;
 				window.history.go(-delta);
@@ -51,21 +70,31 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 			}
 			proceeding.current = false;
 			position.current = next;
-			setUrl(browserUrl());
+			setPage({
+				url: browserUrl(),
+				entry: historyEntry()
+			});
 		};
 		window.addEventListener("popstate", onPop);
 		return () => window.removeEventListener("popstate", onPop);
 	}, [memory]);
 	const go = useCallback((full, replace) => {
+		const entry = replace ? current.current.entry : newEntry();
 		if (!memory) {
 			position.current += replace ? 0 : 1;
-			window.history[replace ? "replaceState" : "pushState"]({ protobaseIndex: position.current }, "", full);
+			window.history[replace ? "replaceState" : "pushState"]({
+				protobaseIndex: position.current,
+				protobaseEntry: entry
+			}, "", full);
 		}
-		setUrl(full);
+		setPage({
+			url: full,
+			entry
+		});
 	}, [memory]);
 	const navigate = useCallback((to, { replace = false } = {}) => {
 		const full = `${basePath}${to}`;
-		if (pathOf(full) !== pathOf(urlRef.current) && guards.current.size > 0) return setPending({
+		if (pathOf(full) !== pathOf(current.current.url) && guards.current.size > 0) return setPending({
 			kind: "link",
 			full,
 			replace
@@ -86,17 +115,17 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		else window.history.go(pending.delta);
 	};
 	const value = useMemo(() => {
-		const parsed = new URL(url, "http://local");
+		const parsed = new URL(page.url, "http://local");
 		return {
 			path: parsed.pathname.slice(basePath.length) || "/",
 			params: parsed.searchParams,
 			basePath,
-			entry: position.current,
+			entry: page.entry,
 			navigate,
 			registerGuard
 		};
 	}, [
-		url,
+		page,
 		basePath,
 		navigate,
 		registerGuard

package/dist/auth/auth-provider.js

@@ -10,8 +10,11 @@ const useAuth = () => {
 	if (!api) throw new Error("useAuth must be used inside AuthProvider");
 	return api;
 };
-/** Finds out whether the server has a login and who is signed in, and keeps that state for the app. */
-const AuthProvider = ({ session: given, children }) => {
+/**
+* Finds out whether the server has a login and who is signed in, and keeps that state for the app. Without a `session`,
+* it makes one on `origin`, the page's own by default.
+*/
+const AuthProvider = ({ session: given, origin, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
@@ -29,7 +32,10 @@ const AuthProvider = ({ session: given, children }) => {
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
-	const session = useMemo(() => given ?? createAuthSession({ onSignedOut: () => signedOut.current() }), [given]);
+	const session = useMemo(() => given ?? createAuthSession({
+		...origin && { origin },
+		onSignedOut: () => signedOut.current()
+	}), [given, origin]);
 	const enter = useCallback(async (user) => {
 		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
 		setState(missing.length > 0 ? {

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

@@ -16,7 +16,7 @@ import { usePagedRows } from "./use-paged-rows.js";
 import { useVirtualRows } from "./use-virtual-rows.js";
 import { useCellEditing } from "./use-cell-editing.js";
 import { ReorderRows, SortableRow } from "./row-reorder.js";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
@@ -61,15 +61,14 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		total
 	]);
 	const [startIndex] = useState(initialScrollIndex);
-	const { ref, top, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
+	const { ref, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
 		total,
 		rowHeight,
 		initialIndex: startIndex,
-		inset: headerHeight
+		inset: headerHeight,
+		onScroll: onScrollIndex && ((offset) => onScrollIndex(offset / rowHeight))
 	});
 	const gutter = narrow || !rowNumbers ? 40 : gutterWidthFor(total);
-	const topIndex = Math.floor(Math.max(0, top) / rowHeight);
-	useEffect(() => onScrollIndex?.(topIndex), [topIndex, onScrollIndex]);
 	const getRow = usePagedRows({
 		total,
 		rowAt: sourceRowAt ? rowAt : void 0,

package/dist/data-grid/use-virtual-rows.js

@@ -20,7 +20,7 @@ const viewRows = (view, total, rowHeight) => {
 * wheel or touch: the list follows the scroll position, and draws again only when other rows come into view.
 * `first` and `last` are the indexes of the drawn rows, overscan included.
 */
-const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, ready = true }) => {
+const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, ready = true, onScroll }) => {
 	const ref = useRef(null);
 	const scroller = useRef(null);
 	const [view, setView] = useState({
@@ -32,14 +32,16 @@ const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, rea
 		rowHeight,
 		initialIndex,
 		inset,
-		ready
+		ready,
+		onScroll
 	});
 	options.current = {
 		total,
 		rowHeight,
 		initialIndex,
 		inset,
-		ready
+		ready,
+		onScroll
 	};
 	const read = useCallback(() => {
 		const content = ref.current;
@@ -51,24 +53,25 @@ const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, rea
 			height: Math.max(0, area.height - hidden)
 		};
 	}, []);
+	const start = useRef({
+		pending: true,
+		laidOut: false
+	});
 	const shown = useRef(view);
 	shown.current = view;
 	const measure = useCallback(() => {
 		const next = read();
 		if (!next) return;
 		const current = shown.current;
-		const { total, rowHeight } = options.current;
+		const { total, rowHeight, onScroll } = options.current;
 		const before = viewRows(current, total, rowHeight);
 		const after = viewRows(next, total, rowHeight);
+		if (!start.current.pending) onScroll?.(Math.max(0, after.top));
 		const sameRows = !after.geometry.scaled && before.first === after.first && before.last === after.last && before.topIndex === after.topIndex;
 		if (current.height === next.height && (current.position === next.position || sameRows)) return;
 		shown.current = next;
 		setView(next);
 	}, [read]);
-	const start = useRef({
-		pending: true,
-		laidOut: false
-	});
 	const begin = useCallback(() => {
 		if (!start.current.pending || !start.current.laidOut || !options.current.ready) return;
 		const view = read();

package/dist/package.js

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