@protobase/ui 0.51.3 → 0.52.0

package/dist/app/app.js

@@ -18,10 +18,10 @@ import { CustomBoundary } from "./pages/custom-boundary.js";
 import { useSidebarNoticeShown } from "../app-shell/sidebar-notice.js";
 import { AppShell } from "../app-shell/app-shell.js";
 import { useSignInAddress } from "../auth/use-sign-in-address.js";
-import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { managesOrganization, organizationMenuItems, organizationPageTitle } from "../organizations/organization-paths.js";
 import { AccountPage, useAccountPage } from "../account/account-page.js";
-import { ConnectPage } from "../connect/connect-page.js";
+import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
+import { ConnectRoute } from "../connect/connect-route.js";
 import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
@@ -29,7 +29,6 @@ import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { AuthLocale } from "../auth/auth-locale.js";
 import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";
-import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
 import { PublicFormPage } from "../forms/public-form-page.js";
 import { useFormAddress } from "../forms/use-form-address.js";
 import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
@@ -73,10 +72,6 @@ const placeOf = (address) => {
 	return address?.resource;
 };
 const recordOf = (address) => address?.kind === "record" ? address : void 0;
-const connectPrompt = {
-	title: "Sign in to connect an app",
-	description: "An app asks to act as you here. Sign in, then choose whether to allow it."
-};
 const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const meta = useAdminMeta();
 	const { state, session, signOut, stopStaffSession, organizations: organizationSettings } = useAuth();
@@ -151,7 +146,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const account = useAccountPage();
 	const accountAddress = user ? readAccountPath(path) : void 0;
 	const accountTab = accountAddress && account ? shownPageTab(pageTabs(account.tree), accountAddress.tab) : void 0;
-	const accountPage = path === connectRoute ? "Connect an app" : !user ? void 0 : accountAddress ? account?.title ?? text("account") : path === "/-/sign-in-policy" ? text("signInPolicy") : organizationPage;
+	const accountPage = !user ? void 0 : accountAddress ? account?.title ?? text("account") : path === "/-/sign-in-policy" ? text("signInPolicy") : organizationPage;
 	const resourceLabel = view?.names?.plural ?? (resource && humanize(resource));
 	const breadcrumb = accountPage ? [accountPage] : breadcrumbFor({
 		basePath,
@@ -180,13 +175,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		recordTitle: title,
 		recordLoading: titleLoading
 	}), meta.appName));
-	const content = path === connectRoute ? user ? /* @__PURE__ */ jsx(ConnectPage, {
-		email: user.email,
-		appName: meta.appName ?? "this app"
-	}) : /* @__PURE__ */ jsx(SignInPrompt, {
-		as: "page",
-		prompt: connectPrompt
-	}) : accountAddress ? /* @__PURE__ */ jsx(AccountPage, { ...accountAddress }) : user && path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
+	const content = accountAddress ? /* @__PURE__ */ jsx(AccountPage, { ...accountAddress }) : user && path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
 		title: text("adminsOnly"),
 		children: text("onlyAdminPolicy")
 	}) : organizationPage && path === "/-/organization" ? /* @__PURE__ */ jsx(OrganizationPage, {
@@ -294,13 +283,14 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {
 	const { state, session, markSignedOut } = useAuth();
 	const sidebarBanner = useSidebarNoticeShown(sidebarMode ?? "text-small");
+	const { path } = useRouter();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
 		client,
 		sources,
 		token: state.kind === "visitor" ? void 0 : session.token,
 		onUnauthenticated: markSignedOut,
-		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsxs(ToastProvider, { children: [!sidebarBanner && /* @__PURE__ */ jsx(NewVersionToast, {}), /* @__PURE__ */ jsx(PluginGate, {
+		children: /* @__PURE__ */ jsx(MetaGate, { children: /* @__PURE__ */ jsxs(ToastProvider, { children: [!sidebarBanner && /* @__PURE__ */ jsx(NewVersionToast, {}), path === connectRoute ? /* @__PURE__ */ jsx(ConnectRoute, {}) : /* @__PURE__ */ jsx(PluginGate, {
 			ui,
 			children: /* @__PURE__ */ jsx(Routes, {
 				workspace,

package/dist/auth/auth-layout.d.ts

@@ -5,11 +5,13 @@ export type AuthLayoutProps = {
   description?: string;
   /** How wide the card is: `sm`, the default, for a few short inputs; `md` for a form with longer ones. */
   size?: 'sm' | 'md';
+  /** The path of the app's own icon, shown in place of Protobase's mark. */
+  icon?: string;
   children: ReactNode;
 };
 /**
- * The frame of the sign-in and first-run pages and of public forms: logo, title and a card. On a page as short as a
+ * The frame of the sign-in and first-run pages and of public forms: logo, or the app's own icon, title and a card. On a page as short as a
  * phone's above its keyboard the logo and most of the margins go, so the card still shows whole above the keyboard.
  */
-export declare const AuthLayout: ({ title, description, size, children }: AuthLayoutProps) => import("react").JSX.Element;
+export declare const AuthLayout: ({ title, description, size, icon, children }: AuthLayoutProps) => import("react").JSX.Element;
 //#endregion

package/dist/auth/auth-layout.js

@@ -3,17 +3,21 @@ import { LogoMark } from "../app-shell/logo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-layout.tsx
 /**
-* The frame of the sign-in and first-run pages and of public forms: logo, title and a card. On a page as short as a
+* The frame of the sign-in and first-run pages and of public forms: logo, or the app's own icon, title and a card. On a page as short as a
 * phone's above its keyboard the logo and most of the margins go, so the card still shows whole above the keyboard.
 */
-const AuthLayout = ({ title, description, size = "sm", children }) => /* @__PURE__ */ jsx("div", {
+const AuthLayout = ({ title, description, size = "sm", icon, children }) => /* @__PURE__ */ jsx("div", {
 	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 pb-[calc(2.5rem+var(--pb-safe-bottom))] pt-[calc(2.5rem+var(--pb-safe-top))] short:pb-[calc(1rem+var(--pb-safe-bottom))] short:pt-[calc(1rem+var(--pb-safe-top))]",
 	children: /* @__PURE__ */ jsxs("div", {
 		className: cn("w-full", size === "sm" ? "max-w-sm" : "max-w-lg"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mb-6 flex flex-col items-center text-center short:mb-4",
 			children: [
-				/* @__PURE__ */ jsx(LogoMark, { className: "size-10 short:hidden" }),
+				icon ? /* @__PURE__ */ jsx("img", {
+					src: icon,
+					alt: "",
+					className: "size-10 object-contain short:hidden"
+				}) : /* @__PURE__ */ jsx(LogoMark, { className: "size-10 short:hidden" }),
 				/* @__PURE__ */ jsx("h1", {
 					className: "mt-4 text-xl font-semibold tracking-tight short:mt-0",
 					children: title

package/dist/auth/sign-in-prompt.js

@@ -19,7 +19,7 @@ const Benefits = ({ benefits }) => benefits && benefits.length > 0 ? /* @__PURE_
 		}), benefit]
 	}, benefit))
 }) : null;
-const Actions = ({ prompt }) => {
+const SignInPromptActions = ({ prompt }) => {
 	const { canSignUp } = useAuth();
 	const { link } = useSignInAddress();
 	const primary = buttonClass({ variant: "primary" });
@@ -57,7 +57,7 @@ const SignInPrompt = (props) => {
 		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 			onClick: props.onClose,
 			children: text("notNow")
-		}), /* @__PURE__ */ jsx(Actions, { prompt })] }),
+		}), /* @__PURE__ */ jsx(SignInPromptActions, { prompt })] }),
 		children: /* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits })
 	});
 	const Icon = namedIcon(prompt.icon) ?? LogIn;
@@ -86,10 +86,10 @@ const SignInPrompt = (props) => {
 			/* @__PURE__ */ jsx(Benefits, { benefits: prompt.benefits }),
 			/* @__PURE__ */ jsx("div", {
 				className: "mt-2 flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row sm:justify-center [&>*]:min-h-11 sm:[&>*]:min-h-0",
-				children: /* @__PURE__ */ jsx(Actions, { prompt })
+				children: /* @__PURE__ */ jsx(SignInPromptActions, { prompt })
 			})
 		]
 	});
 };
 //#endregion
-export { SignInPrompt };
+export { SignInPrompt, SignInPromptActions };

package/dist/connect/connect-page.js

@@ -1,9 +1,9 @@
 import { useAuth } from "../auth/auth-provider.js";
 import { Spinner } from "../primitives/spinner.js";
-import { Notice } from "../app/meta-gate.js";
 import { Button } from "../primitives/button.js";
 import { useRouter } from "../app/router.js";
 import { authMessage } from "../auth/auth-messages.js";
+import { AuthLayout } from "../auth/auth-layout.js";
 import { clientName } from "./client-name.js";
 import { clientPublisher } from "./client-publisher.js";
 import { isFramed, useArmedAfterFocus, useGuardedPress } from "./interaction-guard.js";
@@ -39,7 +39,15 @@ const TargetText = ({ target }) => target.kind === "site" ? /* @__PURE__ */ jsxs
 	className: "break-all text-foreground",
 	children: target.uri
 })] });
-const Request = ({ asking, appName, email, onAnswer, onSignOut }) => {
+const Notice = ({ title, icon, children }) => /* @__PURE__ */ jsx(AuthLayout, {
+	title,
+	icon,
+	children: /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground",
+		children
+	})
+});
+const Request = ({ asking, appName, appIcon, email, onAnswer, onSignOut }) => {
 	const [busy, setBusy] = useState(false);
 	const armed = useArmedAfterFocus(500);
 	const answer = (accept) => {
@@ -50,38 +58,28 @@ const Request = ({ asking, appName, email, onAnswer, onSignOut }) => {
 	const name = clientName(asking.client.client_name);
 	const publisher = clientPublisher(asking.client.client_id);
 	const { target } = asking;
-	return /* @__PURE__ */ jsx("div", {
-		className: "mx-auto flex w-full max-w-lg flex-col gap-4 px-4 py-10",
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: `Allow an app to act as you in ${appName}?`,
+		icon: appIcon,
+		size: "md",
 		children: /* @__PURE__ */ jsxs("section", {
 			"aria-label": "Allow an app",
-			className: "rounded-lg border bg-background p-5",
 			children: [
-				/* @__PURE__ */ jsxs("h1", {
-					className: "text-[16px] font-semibold",
-					children: [
-						"Allow an app to act as you in ",
-						appName,
-						"?"
-					]
-				}),
-				/* @__PURE__ */ jsxs("p", {
-					className: "mt-3",
-					children: [
-						"An app that calls itself",
-						" ",
-						/* @__PURE__ */ jsxs("bdi", {
-							className: "inline-block max-w-full truncate align-bottom font-medium",
-							title: name,
-							children: [
-								"“",
-								name ?? "no name",
-								"”"
-							]
-						}),
-						" ",
-						"asks to act as you here."
-					]
-				}),
+				/* @__PURE__ */ jsxs("p", { children: [
+					"An app that calls itself",
+					" ",
+					/* @__PURE__ */ jsxs("bdi", {
+						className: "inline-block max-w-full truncate align-bottom font-medium",
+						title: name,
+						children: [
+							"“",
+							name ?? "no name",
+							"”"
+						]
+					}),
+					" ",
+					"asks to act as you here."
+				] }),
 				publisher && /* @__PURE__ */ jsxs("p", {
 					className: "mt-1 text-muted-foreground",
 					children: [
@@ -139,7 +137,7 @@ const Request = ({ asking, appName, email, onAnswer, onSignOut }) => {
 		})
 	});
 };
-const Connecting = ({ oauthQuery, appName, email, assign }) => {
+const Connecting = ({ oauthQuery, appName, appIcon, email, assign }) => {
 	const { session, signOut } = useAuth();
 	const { path, basePath } = useRouter();
 	const go = goWith(assign);
@@ -185,15 +183,17 @@ const Connecting = ({ oauthQuery, appName, email, assign }) => {
 	};
 	if (state.kind === "failed") return /* @__PURE__ */ jsx(Notice, {
 		title: "This app cannot be connected",
+		icon: appIcon,
 		children: state.message
 	});
 	if (state.kind === "loading") return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-48 items-center justify-center gap-2 text-muted-foreground",
+		className: "flex min-h-full w-full items-center justify-center gap-2 bg-surface text-muted-foreground",
 		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 	});
 	return /* @__PURE__ */ jsx(Request, {
 		asking: state.asking,
 		appName,
+		appIcon,
 		email,
 		onAnswer: (accept) => answer(accept, state.asking),
 		onSignOut: () => void signOut()
@@ -201,14 +201,15 @@ const Connecting = ({ oauthQuery, appName, email, assign }) => {
 };
 /**
 * The connect page: someone signed in allows an outside app, such as an MCP client, to act as them, from the request
-* the server signed and sent here. Inside another page's frame it shows only that it cannot be used there and calls
+* the server signed and sent here. It stands alone on the page, as the sign-in pages do, without the app's shell. Inside another page's frame it shows only that it cannot be used there and calls
 * nothing, whatever headers the host sent; Allow takes a click only once the page has been in front for a moment.
 */
-const ConnectPage = ({ email, appName, isFramed: isFramed$1 = isFramed, assign = (url) => window.location.assign(url) }) => {
+const ConnectPage = ({ email, appName, appIcon, isFramed: isFramed$1 = isFramed, assign = (url) => window.location.assign(url) }) => {
 	const [framed] = useState(isFramed$1);
 	const { oauthQuery } = useConnectAddress();
 	if (framed) return /* @__PURE__ */ jsxs(Notice, {
 		title: "This page cannot be used inside another site",
+		icon: appIcon,
 		children: [
 			/* @__PURE__ */ jsx("a", {
 				href: window.location.href,
@@ -223,11 +224,13 @@ const ConnectPage = ({ email, appName, isFramed: isFramed$1 = isFramed, assign =
 	});
 	if (!oauthQuery) return /* @__PURE__ */ jsx(Notice, {
 		title: "Nothing to connect",
+		icon: appIcon,
 		children: "Connect again from your app."
 	});
 	return /* @__PURE__ */ jsx(Connecting, {
 		oauthQuery,
 		appName,
+		appIcon,
 		email,
 		assign
 	}, oauthQuery);

package/dist/connect/connect-route.js

@@ -0,0 +1,37 @@
+import { useAuth } from "../auth/auth-provider.js";
+import { useAdminMeta } from "../app/meta-gate.js";
+import { SignInPromptActions } from "../auth/sign-in-prompt.js";
+import { AuthLayout } from "../auth/auth-layout.js";
+import { documentTitle, useDocumentTitle } from "../app/document-title.js";
+import { ConnectPage } from "./connect-page.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/connect/connect-route.tsx
+const connectPrompt = {
+	title: "Sign in to connect an app",
+	description: "An app asks to act as you here. Sign in, then choose whether to allow it."
+};
+/**
+* `/-/connect`, alone on the page without the app's shell, as the sign-in pages are: the connect page for someone
+* signed in, else the way to sign in first. Both carry the app's name and icon.
+*/
+const ConnectRoute = () => {
+	const meta = useAdminMeta();
+	const { state } = useAuth();
+	useDocumentTitle(documentTitle(["Connect an app"], meta.appName));
+	if (state.kind === "signed-in") return /* @__PURE__ */ jsx(ConnectPage, {
+		email: state.user.email,
+		appName: meta.appName ?? "this app",
+		appIcon: meta.appIcon
+	});
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: connectPrompt.title,
+		description: connectPrompt.description,
+		icon: meta.appIcon,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2 [&>*]:min-h-10 [&>*]:w-full",
+			children: /* @__PURE__ */ jsx(SignInPromptActions, { prompt: connectPrompt })
+		})
+	});
+};
+//#endregion
+export { ConnectRoute };

package/dist/notifications/bell/messages.js

@@ -11,7 +11,6 @@ const text = defineMessages({
 		loadFailed: "Your notifications could not be loaded.",
 		tryAgain: "Try again",
 		unread: "Unread",
-		opensNewTab: "(opens in a new tab)",
 		pushOff: "Get notifications on this device, even when the app is closed.",
 		turnOn: "Turn on",
 		pushOn: "Notifications are on for this device.",
@@ -28,7 +27,6 @@ const text = defineMessages({
 		loadFailed: "Je meldingen konden niet worden geladen.",
 		tryAgain: "Opnieuw proberen",
 		unread: "Ongelezen",
-		opensNewTab: "(opent in een nieuw tabblad)",
 		pushOff: "Ontvang meldingen op dit apparaat, ook als de app gesloten is.",
 		turnOn: "Inschakelen",
 		pushOn: "Meldingen staan op dit apparaat aan.",

package/dist/notifications/bell/notification-item.js

@@ -8,8 +8,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const row = "flex w-full gap-2.5 px-3 py-2.5 text-left";
 /**
 * One notification of the panel: unread ones in bold beside a dot, its text, and how long ago it came. A notification
-* with a url is a link to it, followed in the app for the app's own pages and opened in a new tab for another site;
-* one without is not a link.
+* with a url is a link to it, followed in the app for the app's own pages and loaded in this tab for any other; one
+* without is not a link. The history never answers a url on another site.
 */
 const NotificationItem = ({ item, target, onNavigate, onOpen, now }) => {
 	const unread = item.readAt === null;
@@ -34,10 +34,6 @@ const NotificationItem = ({ item, target, onNavigate, onOpen, now }) => {
 				dateTime: item.createdAt,
 				className: "mt-0.5 block text-xs text-faint-foreground",
 				children: formatRelativeTime((now - Date.parse(item.createdAt)) / 1e3)
-			}),
-			target?.kind === "external" && /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: text("opensNewTab")
 			})
 		]
 	})] });
@@ -64,10 +60,6 @@ const NotificationItem = ({ item, target, onNavigate, onOpen, now }) => {
 		onClick: opened,
 		onAuxClick: middle,
 		className: cn(row, "hover:bg-muted"),
-		...target.kind === "external" && {
-			target: "_blank",
-			rel: "noopener"
-		},
 		children: content
 	});
 };

package/dist/notifications/bell/notification-target.js

@@ -5,7 +5,7 @@ const notificationTarget = (url, { origin, basePath }) => {
 	const target = new URL(url, origin);
 	if (target.protocol !== "http:" && target.protocol !== "https:") return void 0;
 	if (target.origin !== origin) return {
-		kind: "external",
+		kind: "page",
 		href: target.href
 	};
 	const local = `${target.pathname}${target.search}${target.hash}`;

package/dist/package.js

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