@protobase/ui 0.18.0 → 0.19.1

package/dist/app/app.d.ts

@@ -25,7 +25,7 @@ export type AppProps = {
   assistant?: AssistantClient;
   /** A ready-made client of the runtime endpoint, for stories and tests; used only when `/meta` names one. */
   runtime?: RuntimeClient;
-  /** How the plugins `/meta` names are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
+  /** How the plugins are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
   pluginLoader?: PluginLoader;
 };
 /**
@@ -33,5 +33,5 @@ export type AppProps = {
  * then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its
  * parent, in the theme this browser chose, light, dark or the system's.
  */
-export declare const App: ({ auth, workspace, basePath, initialUrl, ...rest }: AppProps) => import("react").JSX.Element;
+export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -7,6 +7,9 @@ import { ApiProvider } from "../data/api-provider.js";
 import { Router, useRouter } from "./router.js";
 import { useSignInAddress } from "../auth/use-sign-in-address.js";
 import { managesOrganization, organizationMenuItems, organizationPageTitles } from "../organizations/organization-paths.js";
+import { startErrorReporting } from "./error-reporting.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { useRecord } from "../data/use-record.js";
@@ -14,7 +17,6 @@ import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
-import { startErrorReporting } from "./error-reporting.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
@@ -22,7 +24,6 @@ import { breadcrumbFor } from "./breadcrumb-for.js";
 import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
-import { CustomBoundary } from "./pages/custom-boundary.js";
 import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { MembersPage } from "../organizations/members-page.js";
@@ -244,7 +245,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		]
 	});
 };
-const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
+const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {
 	const { state, session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
@@ -254,7 +255,6 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 		onUnauthenticated: markSignedOut,
 		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(PluginGate, {
 			ui,
-			...pluginLoader && { loader: pluginLoader },
 			children: /* @__PURE__ */ jsx(Routes, {
 				workspace,
 				sidebarMode,
@@ -269,16 +269,19 @@ const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, a
 * then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its
 * parent, in the theme this browser chose, light, dark or the system's.
 */
-const App = ({ auth, workspace, basePath, initialUrl, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
+const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 	session: auth,
 	children: /* @__PURE__ */ jsx(Router, {
 		basePath,
 		initialUrl,
-		children: /* @__PURE__ */ jsx(AuthGate, {
-			workspace,
-			children: /* @__PURE__ */ jsx(Authenticated, {
+		children: /* @__PURE__ */ jsx(PluginSourceProvider, {
+			...pluginLoader && { loader: pluginLoader },
+			children: /* @__PURE__ */ jsx(AuthGate, {
 				workspace,
-				...rest
+				children: /* @__PURE__ */ jsx(Authenticated, {
+					workspace,
+					...rest
+				})
 			})
 		})
 	})

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

@@ -19,6 +19,7 @@ export type CurrentAddress = ListAddress | {
   kind: 'record';
   resource: string;
   key: string;
+  edit?: true;
 } | {
   kind: 'create';
   resource: string;

package/dist/app/current-address.js

@@ -31,7 +31,8 @@ const currentAddress = (read, defaults) => {
 	if (read?.kind === "record") return {
 		kind: "record",
 		resource: read.resource,
-		key: encodeKey(read.key)
+		key: encodeKey(read.key),
+		...read.edit && { edit: true }
 	};
 	if (read?.kind !== "list") return read;
 	return {

package/dist/app/custom-section.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "./pages/project-ui.js";
 import { Problem } from "./pages/problem.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { Section } from "../record-view/section.js";
 import { SidebarCard } from "../record-view/record-sidebar.js";
 import { RecordScope } from "./pages/record-scope.js";

package/dist/app/displays/custom-display.js

@@ -1,6 +1,6 @@
-import { useProjectUi } from "../pages/project-ui.js";
 import { Problem } from "../pages/problem.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
+import { useProjectUi } from "../pages/project-ui.js";
 import { ListDisplayProvider } from "./display-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unmarkFieldRefs } from "@protobase/schema/internal";

package/dist/app/displays/map-display.js

@@ -1,10 +1,10 @@
 import { cn } from "../../lib/cn.js";
 import { Button } from "../../primitives/button.js";
+import { Problem } from "../pages/problem.js";
 import { humanize } from "../../live/naming.js";
 import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
-import { Problem } from "../pages/problem.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { RecordCard } from "./record-card.js";
 import { boundsAround, worldArea } from "../map/map-area.js";

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

@@ -1,4 +1,5 @@
 import { Badge } from "../../primitives/badge.js";
+import { CustomBoundary } from "../pages/custom-boundary.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
@@ -6,7 +7,6 @@ import { displayValue } from "../../live/display-value.js";
 import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
-import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";

package/dist/app/gallery/gallery-items.js

@@ -0,0 +1,37 @@
+import { isStoredFile, shownImage } from "../../live/file-values.js";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/gallery/gallery-items.ts
+const isPicture = (value) => shownImage(value, {
+	width: 0,
+	height: 0
+}) !== void 0;
+const keyOf = (holder, row) => {
+	const parts = holder.primaryKey.map((name) => row[name]);
+	if (parts.some((part) => part === null || part === void 0)) return void 0;
+	return encodeKey(parts);
+};
+/**
+* The photos a gallery steps through: the record's own `cover` first, then the `image` of each of the photo records
+* `rows`, less the one the cover already shows, whose record the cover takes; empty values, missing files and files
+* that are no image are left out.
+*/
+const galleryItems = (cover, rows, image, holder) => {
+	const photos = image === void 0 ? [] : rows.flatMap((row) => {
+		const file = row[image];
+		if (!isStoredFile(file) || !isPicture(file)) return [];
+		const key = holder && keyOf(holder, row);
+		return [{
+			file,
+			...key !== void 0 && { key }
+		}];
+	});
+	if (!isStoredFile(cover) || !isPicture(cover)) return photos;
+	const same = (item) => isStoredFile(item.file) && item.file.uri === cover.uri;
+	const key = photos.find(same)?.key;
+	return [{
+		file: cover,
+		...key !== void 0 && { key }
+	}, ...photos.filter((item) => !same(item))];
+};
+//#endregion
+export { galleryItems };

package/dist/app/gallery/gallery-layout.js

@@ -0,0 +1,17 @@
+/**
+* How many of `count` photos a gallery draws as tiles, and how many more its last tile counts ("+N"): five at most,
+* three of four so the large tile keeps its two rows beside two wide ones, every photo when there are fewer.
+*/
+const galleryTiles = (count) => {
+	const shown = count >= 5 ? 5 : count === 4 ? 3 : count;
+	return {
+		shown,
+		more: count - shown
+	};
+};
+/** A swipe's step: a mostly sideways drag of 40 pixels or more moves to the next photo leftwards, the previous rightwards. */
+const swipeStep = (dx, dy) => Math.abs(dx) < 40 || Math.abs(dx) <= Math.abs(dy) ? 0 : dx < 0 ? 1 : -1;
+/** A key's step: the right arrow moves to the next photo, the left arrow to the previous one. */
+const keyStep = (key) => key === "ArrowRight" ? 1 : key === "ArrowLeft" ? -1 : 0;
+//#endregion
+export { galleryTiles, keyStep, swipeStep };

package/dist/app/gallery/gallery-section.js

@@ -0,0 +1,124 @@
+import { cn } from "../../lib/cn.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { shownImage } from "../../live/file-values.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
+import { FileImage } from "../../live/file-image.js";
+import { Section } from "../../record-view/section.js";
+import { galleryTiles } from "./gallery-layout.js";
+import { Lightbox } from "./lightbox.js";
+import { PhotoDetails } from "./photo-details.js";
+import { useGalleryPhotos } from "./use-gallery-photos.js";
+import { useState } from "react";
+import { Images } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/gallery/gallery-section.tsx
+const spans = {
+	1: ["md:col-span-4 md:row-span-2"],
+	2: ["md:col-span-2 md:row-span-2", "md:col-span-2 md:row-span-2"],
+	3: [
+		"md:col-span-2 md:row-span-2",
+		"md:col-span-2",
+		"md:col-span-2"
+	],
+	5: [
+		"md:col-span-2 md:row-span-2",
+		"",
+		"",
+		"",
+		""
+	]
+};
+const Tile = ({ photo, large }) => {
+	const image = shownImage(photo, large ? {
+		width: 960,
+		height: 720
+	} : {
+		width: 480,
+		height: 360
+	});
+	return image ? /* @__PURE__ */ jsx(FileImage, {
+		image,
+		loading: "lazy",
+		className: "size-full object-cover transition-transform duration-300 group-hover/tile:scale-[1.02]"
+	}) : null;
+};
+/**
+* A record's photos as tiles, one large and the next ones smaller, the last counting those not drawn ("+N"); a mobile
+* screen draws the large one with the number of photos. Each tile opens the lightbox at its photo. A photo held by a
+* record of a resource the user may read gets a details button there, whose details the record API answers. A record
+* without photos has no gallery.
+*/
+const GallerySection = ({ item, record, recordKey }) => {
+	const { views } = useAdminMeta();
+	const photos = useGalleryPhotos(item, record, recordKey);
+	const photoPermissions = usePermissions(photos.holder?.name ?? "");
+	const [open, setOpen] = useState();
+	if (photos.isPending) return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-lg md:aspect-[2/1]" })
+	});
+	if (photos.error) return /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load the photos",
+			error: photos.error
+		})
+	});
+	const count = photos.items.length;
+	if (count === 0) return null;
+	const { shown, more } = galleryTiles(count);
+	const holder = photos.holder;
+	const holderView = holder && views[holder.name];
+	const readable = holder !== void 0 && photoPermissions.read !== false;
+	const details = (index) => {
+		const key = photos.items[index]?.key;
+		return readable && key !== void 0 ? /* @__PURE__ */ jsx(PhotoDetails, {
+			model: holder,
+			view: holderView,
+			photoKey: key
+		}, key) : void 0;
+	};
+	return /* @__PURE__ */ jsxs(Section, {
+		title: item.title,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grid aspect-[4/3] grid-cols-4 grid-rows-2 gap-1.5 overflow-hidden rounded-lg md:aspect-[2/1]",
+			children: photos.items.slice(0, shown).map((photo, index) => {
+				const last = index === shown - 1 && more > 0;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": last ? `Show all ${count} photos` : `Show photo ${index + 1} of ${count}`,
+					onClick: () => setOpen(index),
+					className: cn("group/tile relative overflow-hidden bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", index === 0 ? "col-span-4 row-span-2" : "max-md:hidden", spans[shown][index]),
+					children: [
+						/* @__PURE__ */ jsx(Tile, {
+							photo: photo.file,
+							large: index === 0
+						}),
+						last && /* @__PURE__ */ jsx("span", {
+							className: "absolute inset-0 flex items-center justify-center bg-backdrop/55 text-lg font-semibold text-white",
+							"aria-hidden": true,
+							children: `+${more}`
+						}),
+						index === 0 && count > 1 && /* @__PURE__ */ jsxs("span", {
+							className: "absolute bottom-2 right-2 flex items-center gap-1.5 rounded-full bg-background/85 px-2.5 py-1 text-xs font-medium tabular-nums text-foreground md:hidden",
+							"aria-hidden": true,
+							children: [/* @__PURE__ */ jsx(Images, { className: "size-3.5" }), count]
+						})
+					]
+				}, index);
+			})
+		}), open !== void 0 && /* @__PURE__ */ jsx(Lightbox, {
+			title: item.title,
+			photos: photos.items.map((photo) => photo.file),
+			index: open,
+			onIndex: setOpen,
+			onClose: () => setOpen(void 0),
+			details,
+			detailsLabel: holder && `${holderView?.names?.singular ?? humanize(holder.name)} details`
+		})]
+	});
+};
+//#endregion
+export { GallerySection };

package/dist/app/gallery/lightbox.js

@@ -0,0 +1,121 @@
+import { cn } from "../../lib/cn.js";
+import { useFocusTrap } from "../../lib/use-focus-trap.js";
+import { shownImage } from "../../live/file-values.js";
+import { FileImage } from "../../live/file-image.js";
+import { shownPhoto } from "../displays/card-photos.js";
+import { keyStep, swipeStep } from "./gallery-layout.js";
+import { useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, Info, X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/gallery/lightbox.tsx
+const control = "flex size-10 shrink-0 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+/**
+* Photos one at a time at full size over the page: a modal dialog with a counter, arrows and keys (left, right, Escape)
+* that step through them and wrap around, a sideways swipe on a touch screen, and, for a photo with details the user may
+* read, a button that shows them under the photo. The page does not scroll behind it, and focus returns to what opened it.
+*/
+const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsLabel = "Details" }) => {
+	const panel = useRef(null);
+	const start = useRef(void 0);
+	const [showDetails, setShowDetails] = useState(false);
+	useFocusTrap(panel, true, onClose);
+	const count = photos.length;
+	const step = (by) => by !== 0 && onIndex(shownPhoto(index + by, count));
+	const image = shownImage(photos[index], {
+		width: 1600,
+		height: 1200
+	});
+	const shownDetails = details?.(index);
+	const key = (event) => {
+		const by = keyStep(event.key);
+		if (by === 0) return;
+		event.preventDefault();
+		step(by);
+	};
+	const down = (event) => {
+		if (event.pointerType === "touch") start.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	};
+	const up = (event) => {
+		if (!start.current) return;
+		step(swipeStep(event.clientX - start.current.x, event.clientY - start.current.y));
+		start.current = void 0;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: panel,
+		tabIndex: -1,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": title,
+		onKeyDown: key,
+		className: "fixed inset-0 z-[90] flex flex-col bg-backdrop outline-none",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-between gap-2 p-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "rounded-full bg-background/85 px-3 py-1 text-[13px] font-medium tabular-nums text-foreground",
+					"aria-live": "polite",
+					children: `${index + 1} / ${count}`
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [shownDetails !== void 0 && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cn(control, showDetails && "bg-background ring-2 ring-primary/40"),
+						"aria-label": detailsLabel,
+						"aria-pressed": showDetails,
+						onClick: () => setShowDetails(!showDetails),
+						children: /* @__PURE__ */ jsx(Info, {
+							className: "size-4",
+							"aria-hidden": true
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: control,
+						"aria-label": "Close",
+						onClick: onClose,
+						children: /* @__PURE__ */ jsx(X, {
+							className: "size-4",
+							"aria-hidden": true
+						})
+					})]
+				})]
+			}),
+			/* @__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",
+				onPointerDown: down,
+				onPointerUp: up,
+				onPointerCancel: () => start.current = void 0,
+				children: [image && /* @__PURE__ */ jsx(FileImage, {
+					image,
+					className: "max-h-full max-w-full select-none object-contain"
+				}, image.url), count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2"),
+					"aria-label": "Previous photo",
+					onClick: () => step(-1),
+					children: /* @__PURE__ */ jsx(ChevronLeft, {
+						className: "size-5",
+						"aria-hidden": true
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2"),
+					"aria-label": "Next photo",
+					onClick: () => step(1),
+					children: /* @__PURE__ */ jsx(ChevronRight, {
+						className: "size-5",
+						"aria-hidden": true
+					})
+				})] })]
+			}),
+			showDetails && shownDetails !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 border-t border-border bg-background p-4 text-foreground",
+				children: shownDetails
+			})
+		]
+	});
+};
+//#endregion
+export { Lightbox };

package/dist/app/gallery/photo-details.js

@@ -0,0 +1,49 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { useRecord } from "../../data/use-record.js";
+import { humanize } from "../../live/naming.js";
+import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { fieldAccess } from "../permissions.js";
+import { SpecTable } from "../../record-view/spec-table.js";
+import { FieldValue } from "../pages/field-value.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/gallery/photo-details.tsx
+const detailFields = (model, view) => {
+	const sections = (view?.layout ?? []).flatMap((item) => item.kind === "section" ? item.fields : []);
+	return (sections.length > 0 ? [...new Set(sections)] : Object.keys(model.fields).filter((name) => name !== model.tenant && !model.primaryKey.includes(name))).filter((name) => model.fields[name] && !model.fields[name].sensitive);
+};
+/**
+* A photo's record, as the record API answers the user, so the server decides what they may read: the fields its
+* record page shows, as label/value rows, and a link to that page.
+*/
+const PhotoDetails = ({ model, view, photoKey }) => {
+	const record = useRecord(model.name, photoKey);
+	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+	if (record.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" });
+	if (record.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: `Could not load the ${singular}`,
+		error: record.error
+	});
+	const shown = detailFields(model, view).filter((name) => fieldAccess(record.data.permissions, name) !== "hidden");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto max-w-2xl",
+		children: [/* @__PURE__ */ jsx(SpecTable, { rows: shown.map((name) => ({
+			label: view?.fields[name]?.label ?? humanize(name),
+			value: /* @__PURE__ */ jsx(FieldValue, {
+				model,
+				field: model.fields[name],
+				value: record.data.record[name]
+			})
+		})) }), /* @__PURE__ */ jsx(AppLink, {
+			to: {
+				kind: "record",
+				resource: model.name,
+				key: photoKey
+			},
+			className: "mt-3 inline-block text-[13px] font-medium text-primary-text hover:underline",
+			children: `Open ${singular}`
+		})]
+	});
+};
+//#endregion
+export { PhotoDetails };

package/dist/app/gallery/use-gallery-photos.js

@@ -0,0 +1,38 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { galleryItems } from "./gallery-items.js";
+import { useQuery } from "@tanstack/react-query";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/gallery/use-gallery-photos.ts
+const where = createWhere();
+/**
+* A gallery's photos: the record's own image, then the photo records that point at it, read with the list API under
+* the user's own access, so its row filters and readable fields apply. Without the photos' resource in `/meta`, the
+* user cannot list them, and the record's image is all there is.
+*/
+const useGalleryPhotos = (item, record, recordKey) => {
+	const client = useClient();
+	const { resources } = useAdminMeta();
+	const holder = item.photos ? resources[item.photos.resource] : void 0;
+	const filter = item.photos ? printFilter(where.eq(item.photos.field, recordKey)) : "";
+	const sort = item.photos?.sort ?? "";
+	const rows = useQuery({
+		queryKey: keys.list(holder?.name ?? "", filter, sort, 500, "gallery"),
+		enabled: holder !== void 0,
+		queryFn: async () => (await client.list(holder.name, {
+			filter,
+			...sort && { orderBy: sort },
+			pageSize: 500
+		})).items
+	});
+	const cover = item.image === void 0 ? void 0 : record[item.image];
+	return {
+		holder,
+		items: galleryItems(cover, rows.data ?? [], item.photos?.image, holder),
+		isPending: holder !== void 0 && rows.isPending,
+		error: rows.error
+	};
+};
+//#endregion
+export { useGalleryPhotos };

package/dist/app/pages/merge-ui.d.ts

@@ -3,7 +3,7 @@ import { ProjectUi } from "./project-ui.js";
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
  * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
- * is drawn, the extended configs' first.
+ * and `beforeSignIn` component is drawn, the extended configs' first.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;
 //#endregion

package/dist/app/pages/merge-ui.js

@@ -25,10 +25,18 @@ const slot = (slots) => {
 	const All = () => slots.map((Slot, index) => /* @__PURE__ */ jsx(Slot, {}, index));
 	return All;
 };
+const around = (wrappers) => {
+	if (wrappers.length <= 1) return wrappers[0];
+	const All = ({ children, ...given }) => wrappers.reduceRight((inner, Wrapper) => /* @__PURE__ */ jsx(Wrapper, {
+		...given,
+		children: inner
+	}), children);
+	return All;
+};
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
 * handlers and field types are all kept, and one name defined by two configs is an error naming both; every shell slot
-* is drawn, the extended configs' first.
+* and `beforeSignIn` component is drawn, the extended configs' first.
 */
 const mergeUi = (...uis) => {
 	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
@@ -37,6 +45,7 @@ const mergeUi = (...uis) => {
 	const fields = union("The field type", named, (ui) => ui.fields);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
+	const beforeSignIn = around(named.flatMap(({ ui }) => ui.beforeSignIn ? [ui.beforeSignIn] : []));
 	const name = uis.at(-1)?.name;
 	return {
 		...name && { name },
@@ -46,7 +55,8 @@ const mergeUi = (...uis) => {
 		...(actionSlot || rightPanel) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel }
-		} }
+		} },
+		...beforeSignIn && { beforeSignIn }
 	};
 };
 //#endregion

package/dist/app/pages/project-ui.d.ts

@@ -1,5 +1,5 @@
 import { FieldWidget } from "../field-types/field-widget.js";
-import { ComponentType } from "react";
+import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
 //#region src/app/pages/project-ui.d.ts
@@ -19,6 +19,21 @@ export type ActionContext = {
   navigate: (to: AppAddress) => void;
 };
 export type ActionHandler = (context: ActionContext) => void | Promise<void>;
+/** What a plugin's `beforeSignIn` component gets from the app, drawn around the pages someone signed out sees. */
+export type BeforeSignInProps = {
+  /** What the app shows someone signed out: the sign-in page, or the app a visitor browses. */
+  children: ReactNode;
+  /**
+   * Enters the app with a session something other than the sign-in page started, such as an endpoint that traded a
+   * one-time code for the session cookie: reads the session again and shows the app signed in. Resolves `false`, and
+   * changes nothing, when there is no session.
+   */
+  signedIn: () => Promise<boolean>;
+  /** The query parameters of the page's address, such as a one-time code a link carries. */
+  params: URLSearchParams;
+  /** Takes these query parameters, such as a used one-time code, out of the address, in place of it in the tab's history. */
+  removeParams: (names: string[]) => void;
+};
 /**
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
@@ -38,6 +53,11 @@ export type ProjectUi = {
     actions?: ComponentType;
     rightPanel?: ComponentType;
   };
+  /**
+   * Drawn around the pages someone signed out sees, only for a plugin the app loads before sign-in (`beforeSignIn` in
+   * `options.plugins`): its code runs for them, and it can sign them in (see `BeforeSignInProps`).
+   */
+  beforeSignIn?: ComponentType<BeforeSignInProps>;
 };
 /** A `protobase.ui.tsx` module as `import * as` gives it: components exported by name, the rest as the default export. */
 export type UiModule = {
@@ -47,9 +67,9 @@ export type UiModule = {
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 export declare const defineUi: (ui: ProjectUi) => ProjectUi;
 /**
- * Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
- * `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
- * project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+ * Typed identity, for `export default definePlugin({ name, components, actions, fields, shell, beforeSignIn })` in a
+ * plugin's `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in
+ * a project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
  */
 export declare const definePlugin: (plugin: ProjectUi) => ProjectUi;
 //#endregion

package/dist/app/pages/project-ui.js

@@ -3,9 +3,9 @@ import { createContext, useContext } from "react";
 /** Typed identity, for `export default defineUi({ extends, components, actions })` in `protobase.ui.tsx`. */
 const defineUi = (ui) => ui;
 /**
-* Typed identity, for `export default definePlugin({ name, components, actions, fields, shell })` in a plugin's
-* `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in a
-* project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
+* Typed identity, for `export default definePlugin({ name, components, actions, fields, shell, beforeSignIn })` in a
+* plugin's `protobase.ui.tsx`: a plugin is a UI config the app loads at runtime, its components exported by name as in
+* a project's. A project's own protobase.ui.tsx is one too, which `protobase build` builds as the plugin `app`.
 */
 const definePlugin = (plugin) => plugin;
 /** The project's UI, merged with the UI configs it extends and the plugins loaded; `PluginGate` or `ProjectUiProvider` provides it. */