@protobase/ui 0.3.5 → 0.5.0

package/dist/account/totp-qr.js

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { encode } from "uqr";
+//#region src/account/totp-qr.tsx
+/** The `otpauth://` URI as a QR code for an authenticator app to scan: one square per dark module, with a quiet border. */
+const TotpQr = ({ uri, className }) => {
+	const { size, path } = useMemo(() => {
+		const qr = encode(uri, {
+			ecc: "M",
+			border: 2
+		});
+		const squares = qr.data.flatMap((row, y) => row.flatMap((dark, x) => dark ? [`M${x} ${y}h1v1h-1z`] : []));
+		return {
+			size: qr.size,
+			path: squares.join("")
+		};
+	}, [uri]);
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${size} ${size}`,
+		role: "img",
+		"aria-label": "QR code for your authenticator app",
+		shapeRendering: "crispEdges",
+		className,
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: size,
+			height: size,
+			fill: "#fff"
+		}), /* @__PURE__ */ jsx("path", {
+			d: path,
+			fill: "#000"
+		})]
+	});
+};
+/** The secret in an `otpauth://` URI, in groups of four, for typing into an app that cannot scan. */
+const totpKey = (uri) => (new URL(uri).searchParams.get("secret") ?? "").replace(/(.{4})(?=.)/g, "$1 ");
+//#endregion
+export { TotpQr, totpKey };

package/dist/account/two-factor-section.js

@@ -0,0 +1,123 @@
+import { Badge } from "../primitives/badge.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { AccountSection } from "./account-section.js";
+import { BackupCodes } from "./backup-codes.js";
+import { PasswordDialog } from "./password-dialog.js";
+import { TwoFactorSetup } from "./two-factor-setup.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/two-factor-section.tsx
+const offDescriptions = {
+	allowed: "Ask for a second step after your password or an emailed sign-in code: a code from an authenticator app, or one emailed to you. A passkey needs no second step.",
+	required: "This app requires two-factor authentication for every account. Turn it on to keep using the app.",
+	forbidden: "Your admin turned two-factor authentication off for this app."
+};
+const TwoFactorSection = (props) => {
+	const { rule, enabled, authenticatorApp, mail, needsPassword, onTurnOff, onNewBackupCodes, onChanged } = props;
+	const [open, setOpen] = useState();
+	const close = () => setOpen(void 0);
+	const status = enabled ? /* @__PURE__ */ jsx(Badge, {
+		tone: "green",
+		children: "On"
+	}) : rule === "required" ? /* @__PURE__ */ jsx(Badge, {
+		tone: "amber",
+		children: "Required"
+	}) : /* @__PURE__ */ jsx(Badge, { children: "Off" });
+	const description = !enabled ? offDescriptions[rule] : authenticatorApp ? `Signing in with a password or an emailed sign-in code also asks for a code from your authenticator app${mail ? ", or one emailed to you" : ""}. Backup codes work when you do not have the app.` : "Signing in with a password or an emailed sign-in code also asks for a code emailed to you.";
+	if (open?.kind === "setup") return /* @__PURE__ */ jsx(AccountSection, {
+		title: "Two-factor authentication",
+		status,
+		description,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-w-sm",
+			children: /* @__PURE__ */ jsx(TwoFactorSetup, {
+				offerEmailedCodes: mail && !open.appOnly,
+				needsPassword,
+				onStartApp: props.onStartApp,
+				onConfirmApp: props.onConfirmApp,
+				onEmailedCodes: props.onEmailedCodes,
+				onCancel: close,
+				onDone: () => {
+					close();
+					onChanged();
+				}
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Two-factor authentication",
+		status,
+		description,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					!enabled && rule !== "forbidden" && /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						onClick: () => setOpen({
+							kind: "setup",
+							appOnly: false
+						}),
+						children: "Turn on"
+					}),
+					enabled && !authenticatorApp && rule !== "forbidden" && /* @__PURE__ */ jsx(Button, {
+						onClick: () => setOpen({
+							kind: "setup",
+							appOnly: true
+						}),
+						children: "Add an authenticator app"
+					}),
+					enabled && authenticatorApp && /* @__PURE__ */ jsx(Button, {
+						onClick: () => setOpen({ kind: "new-codes" }),
+						children: "New backup codes"
+					}),
+					enabled && /* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						disabled: rule === "required",
+						title: rule === "required" ? "This app requires two-factor authentication." : void 0,
+						onClick: () => setOpen({ kind: "turn-off" }),
+						children: "Turn off"
+					})
+				]
+			}),
+			open?.kind === "turn-off" && /* @__PURE__ */ jsx(PasswordDialog, {
+				title: "Turn off two-factor authentication?",
+				description: "Signing in then needs only your password or an emailed code. Your backup codes stop working.",
+				confirmLabel: "Turn off",
+				danger: true,
+				needsPassword,
+				onClose: close,
+				onConfirm: async (password) => {
+					await onTurnOff(password);
+					close();
+					onChanged();
+				}
+			}),
+			open?.kind === "new-codes" && /* @__PURE__ */ jsx(PasswordDialog, {
+				title: "Make new backup codes?",
+				description: "Your current backup codes stop working, and you get ten new ones.",
+				confirmLabel: "Make new codes",
+				needsPassword,
+				onClose: close,
+				onConfirm: async (password) => setOpen({
+					kind: "codes",
+					codes: await onNewBackupCodes(password)
+				})
+			}),
+			open?.kind === "codes" && /* @__PURE__ */ jsx(Dialog, {
+				title: "Your new backup codes",
+				description: "Keep them somewhere safe: each one signs you in once if you lose your phone. They are not shown again.",
+				onClose: close,
+				actions: /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: close,
+					children: "I saved my backup codes"
+				}),
+				children: /* @__PURE__ */ jsx(BackupCodes, { codes: open.codes })
+			})
+		]
+	});
+};
+//#endregion
+export { TwoFactorSection };

package/dist/account/two-factor-setup.js

@@ -0,0 +1,188 @@
+import { cn } from "../lib/cn.js";
+import { Input } from "../primitives/input.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { Button } from "../primitives/button.js";
+import { BackupCodes } from "./backup-codes.js";
+import { CodeInput } from "../auth/code-input.js";
+import { TotpQr, totpKey } from "./totp-qr.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/two-factor-setup.tsx
+const choices = [{
+	value: "app",
+	label: "Authenticator app",
+	description: "A code from an app such as Google Authenticator, Microsoft Authenticator or 1Password. Comes with backup codes."
+}, {
+	value: "email",
+	label: "Emailed code",
+	description: "A code mailed to your address each time you sign in with a password or an emailed sign-in code."
+}];
+/** Turns on two-factor authentication: choose the app or emailed codes, confirm the password, scan, and keep the backup codes. */
+const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfirmApp, onEmailedCodes, onDone, onCancel }) => {
+	const [step, setStep] = useState({ kind: "choose" });
+	const [choice, setChoice] = useState("app");
+	const [password, setPassword] = useState("");
+	const [code, setCode] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const offered = offerEmailedCodes ? choices : choices.filter((option) => option.value === "app");
+	const attempt = async (action) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await action();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	const start = () => attempt(async () => {
+		const given = needsPassword ? password : void 0;
+		if (choice === "email") {
+			await onEmailedCodes(given);
+			return onDone();
+		}
+		setStep({
+			kind: "scan",
+			setup: await onStartApp(given)
+		});
+	});
+	const confirm = (setup) => attempt(async () => {
+		await onConfirmApp(code.trim());
+		setStep({
+			kind: "backup-codes",
+			codes: setup.backupCodes
+		});
+	});
+	const errorLine = error && /* @__PURE__ */ jsx("p", {
+		role: "alert",
+		className: "text-xs font-medium text-danger-text",
+		children: error
+	});
+	if (step.kind === "backup-codes") return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: "Two-factor authentication is on. Keep these backup codes somewhere safe: each one signs you in once if you lose your phone. They are not shown again."
+			}),
+			/* @__PURE__ */ jsx(BackupCodes, { codes: step.codes }),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				onClick: onDone,
+				className: "min-h-10",
+				children: "I saved my backup codes"
+			})
+		]
+	});
+	if (step.kind === "scan") return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col gap-4",
+		onSubmit: (event) => {
+			event.preventDefault();
+			confirm(step.setup);
+		},
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: "Scan this code with your authenticator app, then enter the 6-digit code it shows."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-2",
+				children: [/* @__PURE__ */ jsx(TotpQr, {
+					uri: step.setup.totpURI,
+					className: "size-44 rounded-md border"
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-center text-xs text-muted-foreground",
+					children: ["Can't scan it? Enter this key in the app:", /* @__PURE__ */ jsx("span", {
+						className: "mt-1 block break-all font-mono text-[13px] text-foreground",
+						children: totpKey(step.setup.totpURI)
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex flex-col gap-1.5 text-[13px] font-medium",
+				children: ["Code from the app", /* @__PURE__ */ jsx(CodeInput, {
+					name: "code",
+					required: true,
+					autoFocus: true,
+					value: code,
+					invalid: Boolean(error),
+					onChange: (event) => setCode(event.target.value)
+				})]
+			}),
+			errorLine,
+			/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				loading: busy,
+				className: "min-h-10",
+				children: "Turn on"
+			}),
+			onCancel && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				onClick: onCancel,
+				className: "min-h-10",
+				children: "Cancel"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col gap-4",
+		onSubmit: (event) => {
+			event.preventDefault();
+			start();
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "radiogroup",
+				"aria-label": "Second step",
+				className: "flex flex-col gap-2",
+				children: offered.map((option) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": choice === option.value,
+					onClick: () => setChoice(option.value),
+					className: cn("rounded-md border p-3 text-left transition-colors", choice === option.value ? "border-primary bg-primary-soft" : "border-border-strong hover:bg-muted"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "block text-[13px] font-medium",
+						children: option.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "mt-0.5 block text-xs text-muted-foreground",
+						children: option.description
+					})]
+				}, option.value))
+			}),
+			needsPassword && /* @__PURE__ */ jsxs("label", {
+				className: "flex flex-col gap-1.5 text-[13px] font-medium",
+				children: ["Your password", /* @__PURE__ */ jsx(Input, {
+					type: "password",
+					name: "password",
+					autoComplete: "current-password",
+					required: true,
+					value: password,
+					invalid: Boolean(error),
+					onChange: (event) => setPassword(event.target.value),
+					className: "min-h-6"
+				})]
+			}),
+			errorLine,
+			/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				loading: busy,
+				className: "min-h-10",
+				children: "Continue"
+			}),
+			onCancel && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				onClick: onCancel,
+				className: "min-h-10",
+				children: "Cancel"
+			})
+		]
+	});
+};
+//#endregion
+export { TwoFactorSetup };

package/dist/activity-chart/activity-chart.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/cn.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
+import { formatInt } from "../format/number.js";
 import { formatDayShort } from "../format/date.js";
 import { activitySeries } from "../mocks/activity.js";
-import { formatInt } from "../format/number.js";
 import { Segmented } from "../primitives/segmented.js";
 import { halfOverHalfDelta, totalCount } from "./activity-math.js";
 import { ActivityTooltip } from "./activity-tooltip.js";

package/dist/activity-chart/activity-tooltip.js

@@ -1,5 +1,5 @@
-import { formatDate } from "../format/date.js";
 import { formatInt } from "../format/number.js";
+import { formatDate } from "../format/date.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/activity-chart/activity-tooltip.tsx
 const ActivityTooltip = ({ active, payload, noun }) => {

package/dist/app/app.js

@@ -1,12 +1,16 @@
+import { accountMenuItems } from "../account/account-pages.js";
 import { AppShell } from "../app-shell/app-shell.js";
-import { ApiProvider } from "../data/api-provider.js";
 import { AuthProvider, useAuth } from "../auth/auth-provider.js";
+import { AccountSecurityPage } from "../account/account-security-page.js";
+import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
+import { ApiProvider } from "../data/api-provider.js";
 import { AuthGate } from "../auth/auth-gate.js";
-import { userToShell } from "../auth/user-to-shell.js";
+import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { Router, matchRoute, useRouter } from "./router.js";
@@ -15,20 +19,21 @@ import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
-import { ProjectUiProvider, useProjectUi } from "./pages/project-ui.js";
 import { ComposedPage } from "./pages/composed-page.js";
+import { ProjectUiProvider } from "./pages/project-ui-provider.js";
 import { RecordPage } from "./record-page.js";
 import { useGlobalSearch } from "./search/use-global-search.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
+import { StaffBanner } from "./staff-banner.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, runtime }) => {
 	const meta = useAdminMeta();
-	const { state, signOut } = useAuth();
+	const { state, signOut, stopStaffSession } = useAuth();
 	if (state.kind !== "signed-in") throw new Error("The shell is only rendered for a signed-in user");
-	const { user } = state;
+	const { user, staff } = state;
 	const { path, params, basePath, navigate } = useRouter();
 	const route = matchRoute(path);
 	const search = useGlobalSearch();
@@ -69,7 +74,9 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		url: runtimeUrl,
 		client: runtime
 	});
-	const breadcrumb = breadcrumbFor({
+	const admin = isAdmin(user);
+	const accountPage = path === "/-/account" ? "Sign-in & security" : path === "/-/sign-in-policy" ? "Sign-in policy" : void 0;
+	const breadcrumb = accountPage ? [accountPage] : breadcrumbFor({
 		basePath,
 		route,
 		group: group?.label,
@@ -77,7 +84,17 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		resourceLabel: view?.names?.plural ?? (route.resource && humanize(route.resource)),
 		recordTitle: title
 	});
-	return /* @__PURE__ */ jsx(AppShell, {
+	const content = path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
+		title: "Admins only",
+		children: "Only an admin can change how people sign in."
+	}) : !route.resource ? /* @__PURE__ */ jsx(Notice, {
+		title: "Choose a resource",
+		children: "Pick one from the sidebar."
+	}) : page ? /* @__PURE__ */ jsx(ComposedPage, { name: page.name }, page.name) : route.key === "new" ? /* @__PURE__ */ jsx(CreatePage, { resource: route.resource }, `${route.resource}/new`) : route.key ? /* @__PURE__ */ jsx(RecordPage, {
+		resource: route.resource,
+		recordKey: route.key
+	}, `${route.resource}/${route.key}`) : /* @__PURE__ */ jsx(ListPage, { resource: route.resource }, route.resource);
+	const appShell = /* @__PURE__ */ jsx(AppShell, {
 		sidebarMode: sidebarMode ?? "text-small",
 		activeItem: route.resource ?? "",
 		breadcrumb,
@@ -85,7 +102,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		onSignOut: () => void signOut(),
 		workspace,
 		navGroups: groups,
-		userMenu: userMenuFromMeta(meta, basePath, route.resource),
+		userMenu: [...userMenuFromMeta(meta, basePath, route.resource), ...accountMenuItems(basePath, path, admin)],
 		onNavigate: open,
 		search: search.available ? {
 			placeholder: search.placeholder,
@@ -102,13 +119,18 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			assistantButton
 		] }),
 		rightPanel: (RightPanel || assistantPanel) && /* @__PURE__ */ jsxs(Fragment$1, { children: [RightPanel && /* @__PURE__ */ jsx(RightPanel, {}), assistantPanel] }),
-		children: !route.resource ? /* @__PURE__ */ jsx(Notice, {
-			title: "Choose a resource",
-			children: "Pick one from the sidebar."
-		}) : page ? /* @__PURE__ */ jsx(ComposedPage, { name: page.name }, page.name) : route.key === "new" ? /* @__PURE__ */ jsx(CreatePage, { resource: route.resource }, `${route.resource}/new`) : route.key ? /* @__PURE__ */ jsx(RecordPage, {
-			resource: route.resource,
-			recordKey: route.key
-		}, `${route.resource}/${route.key}`) : /* @__PURE__ */ jsx(ListPage, { resource: route.resource }, route.resource)
+		children: content
+	});
+	if (!staff) return appShell;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 flex-col",
+		children: [/* @__PURE__ */ jsx(StaffBanner, {
+			signIn: staff,
+			onStop: stopStaffSession
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1",
+			children: appShell
+		})]
 	});
 };
 const Authenticated = ({ baseUrl, client, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime }) => {

package/dist/app/assistant-shell.js

@@ -2,8 +2,8 @@ import { Button } from "../primitives/button.js";
 import { AssistantDock } from "../assistant-dock/assistant-dock.js";
 import { useAssistant } from "../assistant-dock/use-assistant.js";
 import { useAssistantClient } from "../assistant-dock/use-assistant-client.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Sparkles } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/assistant-shell.tsx
 /** Below `md`, where search is a button too, only the icon shows; the hidden text still names it. */
 const AssistantButton = ({ open, onToggle }) => /* @__PURE__ */ jsxs(Button, {
@@ -25,7 +25,8 @@ const ConnectedDock = ({ client, page, onClose }) => {
 		error,
 		onSend: (text) => send(text, page),
 		onAction: act,
-		onClose
+		onClose,
+		client
 	});
 };
 const OwnDock = ({ url, ...props }) => /* @__PURE__ */ jsx(ConnectedDock, {

package/dist/app/create/create-page.js

@@ -9,9 +9,9 @@ import { useLiveSave } from "../use-live-save.js";
 import { CreateRecordForm } from "./create-record-form.js";
 import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
 import { useState } from "react";
+import { isApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
-import { isApiError } from "@protobase/client";
 import { encodeKey } from "@protobase/schema";
 //#region src/app/create/create-page.tsx
 const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));

package/dist/app/delete/use-delete-flow.js

@@ -4,9 +4,9 @@ import { useToast } from "../../toasts/toast-provider.js";
 import { BulkDeleteDialog, ConfirmDeleteDialog, ConflictDialog } from "./dialogs.js";
 import { diffRecords } from "./record-diff.js";
 import { useState } from "react";
+import { PreconditionFailedError, isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
-import { PreconditionFailedError, isApiError } from "@protobase/client";
 //#region src/app/delete/use-delete-flow.tsx
 const concurrency = 4;
 /**

package/dist/app/error-banner.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { TriangleAlert } from "lucide-react";
 import { isApiError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/error-banner.tsx
 const describe = (error) => {
 	if (!isApiError(error)) return [{ message: error instanceof Error ? error.message : "Something went wrong" }];

package/dist/app/list-page.js

@@ -25,8 +25,8 @@ import { ListChart } from "./list-chart.js";
 import { defaultOrderBy, parseSort, sortToOrderBy } from "./list-order.js";
 import { ListSearch } from "./list-search.js";
 import { useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Plus, SlidersHorizontal } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere, encodeKey } from "@protobase/schema";
 //#region src/app/list-page.tsx
 const where = createWhere();

package/dist/app/list-search.js

@@ -1,7 +1,7 @@
 import { Input } from "../primitives/input.js";
 import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { Search } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/list-search.tsx
 /** A search box that commits after a short pause or on Enter. */
 const ListSearch = ({ value, onCommit, placeholder }) => {

package/dist/app/meta-gate.js

@@ -2,8 +2,8 @@ import { Spinner } from "../primitives/spinner.js";
 import { allowEverything } from "../data/meta-data.js";
 import { useMeta } from "../data/use-meta.js";
 import { createContext, useContext } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { isApiError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/meta-gate.tsx
 const MetaContext = createContext(null);
 const useAdminMeta = () => {

package/dist/app/pages/blocks/modal-form.js

@@ -1,8 +1,8 @@
-import { useClient } from "../../../data/api-provider.js";
 import { Button } from "../../../primitives/button.js";
+import { Dialog } from "../../../primitives/dialog.js";
+import { useClient } from "../../../data/api-provider.js";
 import { humanize } from "../../../live/naming.js";
 import { useToast } from "../../../toasts/toast-provider.js";
-import { Dialog } from "../../../primitives/dialog.js";
 import { differs, toDraft, toPatchValue } from "../../../live/field-values.js";
 import { ErrorBanner } from "../../error-banner.js";
 import { FieldEditor } from "../../field-editor.js";
@@ -14,8 +14,8 @@ import { useLayoutRecord } from "../record-scope.js";
 import { useFirstRecord, useRefreshResource } from "../use-layout-data.js";
 import { propsOf } from "./block-props.js";
 import { useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { isApiError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/modal-form.tsx
 /** The literal defaults of new records, or the record's values when editing; relations as `{ key, label }` once chosen. */
 const startingDraft = (model, fields, record) => Object.fromEntries(fields.map((name) => {

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

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

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

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/merge-ui.tsx
+const flatten = (ui, label) => [...(ui.extends ?? []).flatMap((parent, index) => flatten(parent, parent.name ?? `${label} extends[${index}]`)), {
+	ui,
+	label
+}];
+const union = (kind, named, pick) => {
+	const merged = {};
+	const owners = /* @__PURE__ */ new Map();
+	for (const { ui, label } of named) for (const [name, value] of Object.entries(pick(ui) ?? {})) {
+		if (Object.hasOwn(merged, name) && merged[name] !== value) throw new Error(`${kind} "${name}" is defined twice, by ${owners.get(name)} and by ${label}; rename one of them`);
+		merged[name] = value;
+		owners.set(name, owners.get(name) ?? label);
+	}
+	return merged;
+};
+const slot = (slots) => {
+	if (slots.length <= 1) return slots[0];
+	const All = () => slots.map((Slot, index) => /* @__PURE__ */ jsx(Slot, {}, index));
+	return All;
+};
+/**
+* One UI config from several, each after the ones it `extends`, the last being the app's own: components and action
+* handlers are all kept, and one name defined by two configs is an error naming both; every shell slot is drawn,
+* the extended configs' first.
+*/
+const mergeUi = (...uis) => {
+	const named = uis.flatMap((ui, index) => flatten(ui, ui.name ?? `UI config ${index + 1}`));
+	const components = union("The component", named, (ui) => ui.components);
+	const actions = union("The action handler", named, (ui) => ui.actions);
+	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 name = uis.at(-1)?.name;
+	return {
+		...name && { name },
+		components,
+		actions,
+		...(actionSlot || rightPanel) && { shell: {
+			...actionSlot && { actions: actionSlot },
+			...rightPanel && { rightPanel }
+		} }
+	};
+};
+//#endregion
+export { mergeUi };

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

@@ -0,0 +1,15 @@
+import { ProjectUiContext } from "./project-ui.js";
+import { mergeUi } from "./merge-ui.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/project-ui-provider.tsx
+/** Provides `ui` merged with the UI configs it extends. */
+const ProjectUiProvider = ({ ui, children }) => {
+	const merged = useMemo(() => ui ? mergeUi(ui) : {}, [ui]);
+	return /* @__PURE__ */ jsx(ProjectUiContext.Provider, {
+		value: merged,
+		children
+	});
+};
+//#endregion
+export { ProjectUiProvider };