@protobase/ui 0.40.6 → 0.40.8

package/dist/app-shell/sidebar.js

@@ -11,7 +11,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo, notice }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -51,6 +51,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						}, item.id))]
 					}, group.label))
 				}),
+				notice,
 				/* @__PURE__ */ jsx("div", {
 					className: cn("shrink-0 border-t p-2", mode !== "text-large" && mode !== "text-small" && !expanding && "flex justify-center"),
 					children: user ? /* @__PURE__ */ jsx(ProfileMenu, {

package/dist/data/api-provider.js

@@ -66,6 +66,7 @@ const ApiProvider = ({ baseUrl, client: given, sources, fetch, queryClient: give
 			const previous = metaVersion.current;
 			metaVersion.current = version;
 			if (previous === void 0 || previous === version) return;
+			if (queryClient.getQueryData(keys.meta)?.versionChange) return;
 			queryClient.invalidateQueries({ queryKey: keys.meta }, { cancelRefetch: false });
 		}
 	}), [

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

@@ -7,6 +7,15 @@ export type MetaData = {
   etag: string;
   /** The app's name, which ends the tab titles. */
   appName: string;
+  /** The Protobase version the server ran when this `/meta` was read. */
+  protobaseVersion?: string;
+  /**
+   * Set once the server runs another Protobase version than the page started with: `to` is that version, when the server
+   * names one. The page keeps this `/meta` and stops reading it until it is reloaded (see `keepOnVersionChange`).
+   */
+  versionChange?: {
+    to?: string;
+  };
   /** The path of the app's own icon, when the project has one, which the sidebar's logo draws. */
   appIcon?: string;
   resources: Record<string, ResourceModel>;

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

@@ -3,8 +3,9 @@ import { UseQueryResult } from "@tanstack/react-query";
 //#region src/data/use-meta.d.ts
 /**
  * The resource and view models. Refetches on window focus with `If-None-Match`, so an unchanged
- * `/meta` costs a 304, and the cached object keeps its identity. Below the app's `MetaGate`, `data` holds the resources
- * of its sources too, as every page of the app reads them.
+ * `/meta` costs a 304, and the cached object keeps its identity. Once the server runs another Protobase version than
+ * the page started with, it keeps the `/meta` it has and stops reading it (see `keepOnVersionChange`). Below the app's
+ * `MetaGate`, `data` holds the resources of its sources too, as every page of the app reads them.
  */
 export declare const useMeta: () => UseQueryResult<MetaData>;
 //#endregion

package/dist/data/use-meta.js

@@ -1,13 +1,15 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
 import { MetaContext } from "./meta-context.js";
+import { keepOnVersionChange } from "./version-freeze.js";
 import { useContext, useMemo } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-meta.ts
 /**
 * The resource and view models. Refetches on window focus with `If-None-Match`, so an unchanged
-* `/meta` costs a 304, and the cached object keeps its identity. Below the app's `MetaGate`, `data` holds the resources
-* of its sources too, as every page of the app reads them.
+* `/meta` costs a 304, and the cached object keeps its identity. Once the server runs another Protobase version than
+* the page started with, it keeps the `/meta` it has and stops reading it (see `keepOnVersionChange`). Below the app's
+* `MetaGate`, `data` holds the resources of its sources too, as every page of the app reads them.
 */
 const useMeta = () => {
 	const client = useClient();
@@ -17,6 +19,7 @@ const useMeta = () => {
 		queryKey: keys.meta,
 		staleTime: 0,
 		refetchOnWindowFocus: "always",
+		enabled: (current) => !current.state.data?.versionChange,
 		queryFn: async () => {
 			const previous = queryClient.getQueryData(keys.meta);
 			const result = await client.meta(previous?.etag);
@@ -24,9 +27,10 @@ const useMeta = () => {
 				if (!previous) throw new Error("The server answered 304 to a request without If-None-Match");
 				return previous;
 			}
-			return {
+			return keepOnVersionChange(previous, {
 				etag: result.etag,
 				appName: result.meta.appName,
+				...result.meta.protobaseVersion && { protobaseVersion: result.meta.protobaseVersion },
 				...result.meta.appIcon && { appIcon: result.meta.appIcon },
 				resources: Object.fromEntries(result.meta.resources.map((model) => [model.name, model])),
 				views: Object.fromEntries(result.meta.views.map((model) => [model.resource, model])),
@@ -46,7 +50,7 @@ const useMeta = () => {
 					source,
 					state: "loading"
 				})) }
-			};
+			});
 		}
 	});
 	return useMemo(() => merged && query.data ? {

package/dist/data/version-freeze.js

@@ -0,0 +1,17 @@
+//#region src/data/version-freeze.ts
+/**
+* The `/meta` the page keeps after reading it again: `next`, unless the server now runs another Protobase version than
+* the page started with. The page then keeps the `/meta` it has, marked with the version the server moved to, and
+* `useMeta` stops reading it, so nothing on the page changes until it is reloaded.
+*/
+const keepOnVersionChange = (previous, next) => {
+	if (!previous) return next;
+	if (previous.versionChange) return previous;
+	if (next.protobaseVersion === previous.protobaseVersion) return next;
+	return {
+		...previous,
+		versionChange: { ...next.protobaseVersion && { to: next.protobaseVersion } }
+	};
+};
+//#endregion
+export { keepOnVersionChange };

package/dist/package.js

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

package/dist/primitives/snap-row-width.js

@@ -0,0 +1,13 @@
+//#region src/primitives/snap-row-width.ts
+/** The space between the items of a `SnapRow`, Tailwind's `gap-3`. */
+const snapRowGap = "0.75rem";
+/**
+* How wide an item of a row is at `share` of the row's width, the gaps taken off so that `1 / share` items fill it
+* exactly: a third leaves room for three items and the two gaps between them.
+*/
+const snapItemWidth = (share) => {
+	if (!(share > 0 && share <= 1)) throw new Error(`An item's share of a row is above 0 and at most 1, not ${share}`);
+	return `calc((100% + ${snapRowGap}) * ${share} - ${snapRowGap})`;
+};
+//#endregion
+export { snapItemWidth, snapRowGap };

package/dist/primitives/snap-row.js

@@ -0,0 +1,21 @@
+import { snapItemWidth, snapRowGap } from "./snap-row-width.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/snap-row.tsx
+/**
+* A list laid out as one row that scrolls sideways, by touch, trackpad, wheel or its scrollbar, and snaps each item to
+* its left edge. Each item is `share` of the row wide, but never narrower than 12rem or the row, so narrow shares stay
+* readable on a phone; the items are top aligned. The row scrolls on its own because the page cannot scroll sideways,
+* and only sideways: it is as tall as its tallest item. A swipe past its last item stops there.
+*/
+const SnapRow = ({ share, label, children }) => /* @__PURE__ */ jsx("ul", {
+	"aria-label": label,
+	className: "flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden overscroll-x-contain pb-1 *:w-(--snap-item-width) *:min-w-[min(100%,12rem)] *:shrink-0 *:snap-start",
+	style: {
+		gap: snapRowGap,
+		scrollbarWidth: "thin",
+		"--snap-item-width": snapItemWidth(share)
+	},
+	children
+});
+//#endregion
+export { SnapRow };