@protobase/ui 0.3.4 → 0.3.5

package/dist/app/app.d.ts

@@ -1,7 +1,7 @@
 import { SidebarMode } from "../app-shell/sidebar-mode.js";
 import "../app-shell/index.js";
 import { ProjectUi } from "./pages/project-ui.js";
-import { AssistantClient, AuthSession, Client } from "@protobase/client";
+import { AssistantClient, AuthSession, Client, RuntimeClient } from "@protobase/client";
 //#region src/app/app.d.ts
 export type AppProps = {
   /** Where `/api/v1` lives. Defaults to the current origin. */
@@ -20,6 +20,8 @@ export type AppProps = {
   ui?: ProjectUi;
   /** A ready-made client of the assistant backend, for stories and tests; used only when `/meta` names an assistant. */
   assistant?: AssistantClient;
+  /** A ready-made client of the runtime endpoint, for stories and tests; used only when `/meta` names one. */
+  runtime?: RuntimeClient;
 };
 /** The admin: sign-in first, then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent. */
 export declare const App: ({ auth, workspace, ...rest }: AppProps) => import("react").JSX.Element;

package/dist/app/app.js

@@ -19,11 +19,12 @@ import { ProjectUiProvider, useProjectUi } from "./pages/project-ui.js";
 import { ComposedPage } from "./pages/composed-page.js";
 import { RecordPage } from "./record-page.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
+import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
 import { useNavRecent } from "./use-nav-recent.js";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/app.tsx
-const Routes = ({ workspace, sidebarMode, assistant }) => {
+const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const meta = useAdminMeta();
 	const { state, signOut } = useAuth();
 	if (state.kind !== "signed-in") throw new Error("The shell is only rendered for a signed-in user");
@@ -63,6 +64,11 @@ const Routes = ({ workspace, sidebarMode, assistant }) => {
 		page: params.size > 0 ? `${path}?${params}` : path,
 		onClose: () => setAssistantOpen(false)
 	});
+	const runtimeUrl = meta.runtime?.url;
+	const runtimeButton = runtimeUrl && /* @__PURE__ */ jsx(RuntimeUpdateButton, {
+		url: runtimeUrl,
+		client: runtime
+	});
 	const breadcrumb = breadcrumbFor({
 		basePath,
 		route,
@@ -90,7 +96,11 @@ const Routes = ({ workspace, sidebarMode, assistant }) => {
 			groups: search.groups,
 			onSelect: open
 		} : void 0,
-		actions: (Actions || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [Actions && /* @__PURE__ */ jsx(Actions, {}), assistantButton] }),
+		actions: (Actions || runtimeButton || assistantButton) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			Actions && /* @__PURE__ */ jsx(Actions, {}),
+			runtimeButton,
+			assistantButton
+		] }),
 		rightPanel: (RightPanel || assistantPanel) && /* @__PURE__ */ jsxs(Fragment$1, { children: [RightPanel && /* @__PURE__ */ jsx(RightPanel, {}), assistantPanel] }),
 		children: !route.resource ? /* @__PURE__ */ jsx(Notice, {
 			title: "Choose a resource",
@@ -101,7 +111,7 @@ const Routes = ({ workspace, sidebarMode, assistant }) => {
 		}, `${route.resource}/${route.key}`) : /* @__PURE__ */ jsx(ListPage, { resource: route.resource }, route.resource)
 	});
 };
-const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui, assistant }) => {
+const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime }) => {
 	const { session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
@@ -116,7 +126,8 @@ const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sideb
 				children: /* @__PURE__ */ jsx(Routes, {
 					workspace,
 					sidebarMode,
-					assistant
+					assistant,
+					runtime
 				})
 			}) }) })
 		})

package/dist/app/runtime/runtime-status.js

@@ -0,0 +1,25 @@
+import { formatDateTime } from "../../format/date.js";
+import { isApiError } from "@protobase/client";
+//#region src/app/runtime/runtime-status.ts
+/** The top bar shows the update button only when there is an update and the endpoint wants it shown. */
+const showsUpdateButton = (status) => Boolean(status?.updateAvailable && status.indicator);
+const policyLabels = {
+	immediate: "Updates as soon as a release is out",
+	weekly: "Updates at a set time every week",
+	scheduled: "Updates at the time set for this release",
+	manual: "Updates only when asked to"
+};
+/** When the latest version will be applied on its own, in words. */
+const nextUpdateText = (status) => {
+	if (status.updating) return "Updating now";
+	if (status.nextUpdateAt) return `${policyLabels[status.policy]}: next on ${formatDateTime(Date.parse(status.nextUpdateAt))} UTC`;
+	return policyLabels[status.policy];
+};
+/** Why "Update now" failed, in words. */
+const updateErrorText = (error) => {
+	if (isApiError(error) && error.status === 409) return "Already on the latest version, or an update is running.";
+	if (isApiError(error) && error.status === 403) return "Only an admin can update the runtime.";
+	return "The update could not be started. Try again later.";
+};
+//#endregion
+export { nextUpdateText, showsUpdateButton, updateErrorText };

package/dist/app/runtime/runtime-update.js

@@ -0,0 +1,77 @@
+import { Button } from "../../primitives/button.js";
+import { Dialog } from "../../primitives/dialog.js";
+import { nextUpdateText, showsUpdateButton, updateErrorText } from "./runtime-status.js";
+import { useRuntimeClient, useRuntimeStatus } from "./use-runtime-status.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpCircle } from "lucide-react";
+//#region src/app/runtime/runtime-update.tsx
+const Row = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex justify-between gap-4 py-1 text-[13px]",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: label
+	}), /* @__PURE__ */ jsx("span", {
+		className: "font-medium tabular-nums",
+		children: value
+	})]
+});
+/**
+* The top bar's runtime update button, shown while the endpoint reports an update and wants it shown, and the dialog
+* it opens: the versions, when the update policy applies the latest one, and "Update now". Below `md` only the icon shows.
+*/
+const RuntimeUpdate = ({ client }) => {
+	const { status, update, requesting, error, checkError } = useRuntimeStatus(client);
+	const [open, setOpen] = useState(false);
+	if (!status || !open && !showsUpdateButton(status)) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+		size: "sm",
+		variant: "ghost",
+		"aria-label": "Update available",
+		title: "Update available",
+		onClick: () => setOpen(true),
+		className: "max-md:size-9 max-md:p-0",
+		children: [/* @__PURE__ */ jsx(ArrowUpCircle, { className: "size-3.5 text-primary" }), /* @__PURE__ */ jsx("span", {
+			className: "max-md:sr-only",
+			children: "Update"
+		})]
+	}), open && /* @__PURE__ */ jsxs(Dialog, {
+		title: "Runtime update",
+		description: nextUpdateText(status),
+		onClose: () => setOpen(false),
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: () => setOpen(false),
+			children: "Close"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			loading: requesting,
+			disabled: status.updating || !status.updateAvailable,
+			onClick: () => void update(),
+			children: status.updating ? "Updating…" : "Update now"
+		})] }),
+		children: [
+			/* @__PURE__ */ jsx(Row, {
+				label: "Current version",
+				value: status.version
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "Latest version",
+				value: status.latest
+			}),
+			error !== void 0 && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-3 text-[13px] text-danger-text",
+				children: updateErrorText(error)
+			}),
+			checkError !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "mt-3 text-[13px] text-muted-foreground",
+				children: "The status could not be checked again; this is the last one read."
+			})
+		]
+	})] });
+};
+const OwnRuntimeUpdate = ({ url }) => /* @__PURE__ */ jsx(RuntimeUpdate, { client: useRuntimeClient(url) });
+/** The update button for the endpoint `/meta` names, signed in as the user; `client` replaces it in stories and tests. */
+const RuntimeUpdateButton = ({ url, client }) => client ? /* @__PURE__ */ jsx(RuntimeUpdate, { client }) : /* @__PURE__ */ jsx(OwnRuntimeUpdate, { url });
+//#endregion
+export { RuntimeUpdateButton };

package/dist/app/runtime/use-runtime-status.js

@@ -0,0 +1,59 @@
+import { useApiToken } from "../../auth/use-api-token.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createRuntimeClient } from "@protobase/client";
+//#region src/app/runtime/use-runtime-status.ts
+/** How often the status is read again: rarely, and more often while an update runs so the button goes away when it is done. */
+const refreshMs = 18e5;
+const updatingRefreshMs = 3e4;
+/** A client of the runtime endpoint at `url`, authenticated as the signed-in user; `undefined` until their token is there. */
+const useRuntimeClient = (url) => {
+	const token = useApiToken();
+	const latest = useRef(token);
+	latest.current = token;
+	const ready = token !== void 0;
+	return useMemo(() => ready ? createRuntimeClient({
+		url,
+		token: () => latest.current
+	}) : void 0, [url, ready]);
+};
+/**
+* The runtime's status, read on load and every half hour after, and `update` to apply the latest version now.
+* `status` keeps the last answer when a later read fails, which `checkError` then holds; `error` is why "Update now" failed.
+*/
+const useRuntimeStatus = (client) => {
+	const [status, setStatus] = useState();
+	const [requesting, setRequesting] = useState(false);
+	const [error, setError] = useState();
+	const [checkError, setCheckError] = useState();
+	const updating = status?.updating ?? false;
+	useEffect(() => {
+		if (!client) return;
+		let active = true;
+		const read = () => client.status().then((next) => {
+			if (!active) return;
+			setStatus(next);
+			setCheckError(void 0);
+		}, (reason) => active && setCheckError(reason));
+		read();
+		const timer = setInterval(() => void read(), updating ? updatingRefreshMs : refreshMs);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, [client, updating]);
+	return {
+		status,
+		update: useCallback(async () => {
+			if (!client) return;
+			setRequesting(true);
+			setError(void 0);
+			await client.update().then(setStatus, setError);
+			setRequesting(false);
+		}, [client]),
+		requesting,
+		error,
+		checkError
+	};
+};
+//#endregion
+export { useRuntimeClient, useRuntimeStatus };

package/dist/data/meta-data.d.ts

@@ -14,5 +14,9 @@ export type MetaData = {
   assistant?: {
     url: string;
   };
+  /** The runtime updates endpoint, when the app has one and the user has the admin role. */
+  runtime?: {
+    url: string;
+  };
 };
 //#endregion

package/dist/data/use-meta.js

@@ -27,7 +27,8 @@ const useMeta = () => {
 				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),
 				permissions: result.meta.permissions ?? {},
 				...result.meta.userMenu && { userMenu: result.meta.userMenu },
-				...result.meta.assistant && { assistant: result.meta.assistant }
+				...result.meta.assistant && { assistant: result.meta.assistant },
+				...result.meta.runtime && { runtime: result.meta.runtime }
 			};
 		}
 	});

package/dist/lib/use-visual-viewport.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+//#region src/lib/use-visual-viewport.ts
+/**
+* While `active`: the part of the page that is on screen, which shrinks when a phone's on-screen keyboard opens;
+* undefined otherwise, or where the browser has no `visualViewport`.
+*/
+const useVisualViewport = (active) => {
+	const [box, setBox] = useState();
+	useEffect(() => {
+		const viewport = window.visualViewport;
+		if (!active || !viewport) return setBox(void 0);
+		const update = () => setBox({
+			top: viewport.offsetTop,
+			height: viewport.height
+		});
+		update();
+		viewport.addEventListener("resize", update);
+		viewport.addEventListener("scroll", update);
+		return () => {
+			viewport.removeEventListener("resize", update);
+			viewport.removeEventListener("scroll", update);
+		};
+	}, [active]);
+	return active ? box : void 0;
+};
+//#endregion
+export { useVisualViewport };

package/dist/side-panel/side-panel.d.ts

@@ -12,6 +12,10 @@ export type SidePanelProps = {
   /** The content; it scrolls on its own, so give it `min-h-0 flex-1`. */
   children: ReactNode;
 };
-/** A full-height panel beside the page, for the shell's `rightPanel`: a header with a close button, content and a footer. */
+/**
+ * A full-height panel beside the page, for the shell's `rightPanel`: a header with a close button, content and a footer.
+ * Below `md` there is no room beside the page, so it covers the screen instead, shrinking with the on-screen keyboard
+ * so the footer stays in view.
+ */
 export declare const SidePanel: ({ title, icon, status, onClose, footer, children }: SidePanelProps) => import("react").JSX.Element;
 //#endregion

package/dist/side-panel/side-panel.js

@@ -1,40 +1,54 @@
+import { useIsDesktop } from "../lib/use-media-query.js";
 import { Button } from "../primitives/button.js";
+import { useVisualViewport } from "../lib/use-visual-viewport.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 //#region src/side-panel/side-panel.tsx
-/** A full-height panel beside the page, for the shell's `rightPanel`: a header with a close button, content and a footer. */
-const SidePanel = ({ title, icon, status, onClose, footer, children }) => /* @__PURE__ */ jsxs("aside", {
-	"aria-label": title,
-	className: "flex h-full w-[380px] max-w-full shrink-0 flex-col border-l border-border bg-surface",
-	children: [
-		/* @__PURE__ */ jsxs("header", {
-			className: "flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-4",
-			children: [
-				icon,
-				/* @__PURE__ */ jsx("h2", {
-					className: "flex-1 text-[13px] font-semibold",
-					children: title
-				}),
-				status && /* @__PURE__ */ jsx("span", {
-					className: "truncate text-xs font-medium text-muted-foreground",
-					children: status
-				}),
-				onClose && /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "sm",
-					className: "w-7 px-0",
-					"aria-label": "Close",
-					onClick: onClose,
-					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-				})
-			]
-		}),
-		children,
-		footer && /* @__PURE__ */ jsx("footer", {
-			className: "shrink-0 space-y-2 border-t border-border bg-background p-3",
-			children: footer
-		})
-	]
-});
+/**
+* A full-height panel beside the page, for the shell's `rightPanel`: a header with a close button, content and a footer.
+* Below `md` there is no room beside the page, so it covers the screen instead, shrinking with the on-screen keyboard
+* so the footer stays in view.
+*/
+const SidePanel = ({ title, icon, status, onClose, footer, children }) => {
+	const screen = useVisualViewport(!useIsDesktop());
+	return /* @__PURE__ */ jsxs("aside", {
+		"aria-label": title,
+		className: "flex h-full w-[380px] max-w-full shrink-0 flex-col border-l border-border bg-surface max-md:fixed max-md:inset-0 max-md:z-40 max-md:w-full max-md:border-l-0",
+		style: screen && {
+			top: screen.top,
+			bottom: "auto",
+			height: screen.height
+		},
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-4",
+				children: [
+					icon,
+					/* @__PURE__ */ jsx("h2", {
+						className: "flex-1 text-[13px] font-semibold",
+						children: title
+					}),
+					status && /* @__PURE__ */ jsx("span", {
+						className: "truncate text-xs font-medium text-muted-foreground",
+						children: status
+					}),
+					onClose && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "w-7 px-0",
+						"aria-label": "Close",
+						onClick: onClose,
+						children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+					})
+				]
+			}),
+			children,
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "shrink-0 space-y-2 border-t border-border bg-background p-3",
+				children: footer
+			})
+		]
+	});
+};
 //#endregion
 export { SidePanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,12 +24,19 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsdown",
+    "prepack": "tsdown"
+  },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
+    "@protobase/client": "0.3.5",
+    "@protobase/layout": "0.3.5",
+    "@protobase/schema": "0.3.5",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",
     "@tanstack/react-virtual": "^3.14.13",
@@ -37,12 +44,6 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "recharts": "^3.10.1",
-    "tailwindcss": "^4.3.3",
-    "@protobase/client": "0.3.4",
-    "@protobase/layout": "0.3.4",
-    "@protobase/schema": "0.3.4"
-  },
-  "scripts": {
-    "build": "tsdown"
+    "tailwindcss": "^4.3.3"
   }
-}
+}