@protobase/ui 0.33.4 → 0.34.1

package/dist/app/pages/field-value.js

@@ -1,11 +1,11 @@
 import { cn } from "../../lib/cn.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
 import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { contactFormat } from "../../live/contact-links.js";
 import { displayValue, valueTitle } from "../../live/display-value.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";

package/dist/app/pages/use-run-action.js

@@ -1,7 +1,7 @@
 import { useClient, useResourceClient } from "../../data/api-provider.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { text } from "./messages.js";
 import { useToast } from "../../toasts/toast-provider.js";
-import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { useProjectUi } from "./project-ui.js";
 import { can } from "../permissions.js";

package/dist/app/record-chart/record-chart-section.js

@@ -1,9 +1,9 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { Segmented } from "../../primitives/segmented.js";
 import { viewerZone } from "../../format/zone.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { humanize } from "../../live/naming.js";
 import { Section } from "../../record-view/section.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { useAggregates } from "../../data/use-aggregates.js";
 import { PeriodChart } from "../charts/period-chart.js";
 import { chartPoints, rangeBuckets } from "./chart-points.js";

package/dist/app/record-lines.js

@@ -1,6 +1,6 @@
+import { usePermissions } from "./meta-gate.js";
 import { InlineChildTable } from "../inline-child-table/inline-child-table.js";
 import { Section } from "../record-view/section.js";
-import { usePermissions } from "./meta-gate.js";
 import { can } from "./permissions.js";
 import { text } from "./record-messages.js";
 import { jsx } from "react/jsx-runtime";

package/dist/app/record-page.js

@@ -3,11 +3,13 @@ import { Skeleton } from "../primitives/skeleton.js";
 import { inApp } from "../app-shell/breadcrumb.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
+import { namedIcon } from "./named-icon.js";
+import { text } from "./messages.js";
+import { useNavigationGuard } from "./router.js";
 import { usePauseFocusRefresh } from "../data/focus-refresh.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { text } from "./messages.js";
-import { useNavigationGuard } from "./router.js";
+import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { humanize } from "../live/naming.js";
 import { Field } from "../record-view/field.js";
@@ -21,7 +23,6 @@ import { contactFormat } from "../live/contact-links.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { displayValue, valueTitle } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
-import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { GroupSection } from "../record-view/group-section.js";
 import { RecordTabs } from "../record-view/record-tabs.js";
@@ -41,7 +42,6 @@ import { useFocusFirstInvalid } from "./use-focus-first-invalid.js";
 import { can, fieldAccess } from "./permissions.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
-import { namedIcon } from "./named-icon.js";
 import { text as text$1 } from "./record-messages.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
@@ -69,8 +69,8 @@ import { Fragment, useEffect, useMemo } from "react";
 import { Check } from "lucide-react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
+import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/record-page.tsx
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**

package/dist/app/record-row/record-row-body.js

@@ -1,10 +1,10 @@
 import { formatTag } from "../../locale/active-locale.js";
 import { useIsXs } from "../../lib/use-media-query.js";
 import { Skeleton } from "../../primitives/skeleton.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { humanize } from "../../live/naming.js";
 import { displaysOf, loadedFields } from "../displays/list-displays.js";
 import { defaultOrderBy } from "../list-order.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { viewAllAddress } from "../embedded-list/embedded-display.js";

package/dist/app/record-row/saved-record-row.js

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../primitives/skeleton.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { humanize } from "../../live/naming.js";
 import { listedResource } from "../current-address.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
 import { savedScope } from "../saved/saved-records.js";
 import { useSavedRecords } from "../saved/use-saved-records.js";

package/dist/app/related-cards/related-card.js

@@ -1,6 +1,6 @@
 import { Skeleton } from "../../primitives/skeleton.js";
-import { recordKey, recordTitle } from "../../live/model-helpers.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { recordKey, recordTitle } from "../../live/model-helpers.js";
 import { AppLink } from "../use-app-address.js";
 import { RecordScope } from "../pages/record-scope.js";
 import { ActionButton } from "../pages/blocks/action.js";

package/dist/app/related-section.js

@@ -1,9 +1,9 @@
 import { Skeleton } from "../primitives/skeleton.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Section } from "../record-view/section.js";
 import { listColumnNames } from "../live/columns-from-model.js";
-import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { ErrorBanner } from "./error-banner.js";
 import { countQuery } from "./pages/use-layout-data.js";
 import { RelatedCards } from "./related-cards/related-cards.js";
@@ -17,8 +17,8 @@ import { HandSortedList } from "./hand-order/hand-sorted-list.js";
 import { ReorderButton } from "./hand-order/reorder-button.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useQuery } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
+import { useQuery } from "@tanstack/react-query";
 //#region src/app/related-section.tsx
 const where$1 = createWhere();
 const and = (...parts) => {

package/dist/app/saved/use-favorite.js

@@ -1,6 +1,6 @@
 import { useClient } from "../../data/api-provider.js";
-import { useToast } from "../../toasts/toast-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { useToast } from "../../toasts/toast-provider.js";
 import { can } from "../permissions.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";
 import { savedFor, withSaved, withoutSaved } from "./saved-records.js";

package/dist/app/search/navigation-hits.js

@@ -1,5 +1,5 @@
-import { humanize } from "../../live/naming.js";
 import { allowEverything } from "../../data/meta-data.js";
+import { humanize } from "../../live/naming.js";
 import { text } from "../create/messages.js";
 import { createOffered } from "../create/create-offered.js";
 import { navFromMeta } from "../nav-from-meta.js";

package/dist/app/search/use-global-search.js

@@ -1,5 +1,5 @@
-import { useClient } from "../../data/api-provider.js";
 import { useRouter } from "../router.js";
+import { useClient } from "../../data/api-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { navigationHits } from "./navigation-hits.js";

package/dist/app/searches/save-search-button.js

@@ -1,6 +1,6 @@
 import { Button } from "../../primitives/button.js";
-import { text } from "./messages.js";
 import { SignInPrompt } from "../../auth/sign-in-prompt.js";
+import { text } from "./messages.js";
 import { SearchNameDialog } from "./search-name-dialog.js";
 import { UpdateSearchDialog } from "./update-search-dialog.js";
 import { useSaveSearch } from "./use-save-search.js";

package/dist/app/searches/saved-search-rows.js

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../primitives/skeleton.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { humanize } from "../../live/naming.js";
 import { recordKey } from "../../live/model-helpers.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { text } from "./messages.js";

package/dist/app/searches/saved-searches.js

@@ -1,9 +1,9 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { PageHeader } from "../../app-shell/page-header.js";
+import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { slotted } from "../../locale/slotted.js";
 import { humanize } from "../../live/naming.js";
 import { recordKey } from "../../live/model-helpers.js";
-import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { can } from "../permissions.js";

package/dist/app/searches/search-controls.js

@@ -6,8 +6,8 @@ import { useRefreshResource } from "../pages/use-layout-data.js";
 import { text } from "./messages.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMutation } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
+import { useMutation } from "@tanstack/react-query";
 //#region src/app/searches/search-controls.tsx
 const message = (error) => error instanceof Error ? error.message : text("somethingWrong");
 const Control = ({ model, view, name, value, onChange }) => {

package/dist/app/searches/update-search-dialog.js

@@ -1,9 +1,9 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { Button } from "../../primitives/button.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
 import { defaultOrderBy } from "../list-order.js";
-import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { countQuery } from "../pages/use-layout-data.js";
 import { text } from "./messages.js";
 import { useFilterChips } from "./use-filter-chips.js";

package/dist/app/searches/use-save-search.js

@@ -1,8 +1,8 @@
 import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { can } from "../permissions.js";
 import { useRefreshResource } from "../pages/use-layout-data.js";

package/dist/app/searches/use-saved-searches.js

@@ -1,7 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { defaultOrderBy } from "../list-order.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { defaultOrderBy } from "../list-order.js";
 import { useQuery } from "@tanstack/react-query";
 //#region src/app/searches/use-saved-searches.ts
 /** Where the user's saved searches of `resource` are cached; a list key, so a write to the resource refreshes it. */

package/dist/app/source-notice.js

@@ -1,7 +1,7 @@
 import { Spinner } from "../primitives/spinner.js";
 import { Button } from "../primitives/button.js";
-import { keys } from "../data/query-keys.js";
 import { text } from "./messages.js";
+import { keys } from "../data/query-keys.js";
 import { isApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";

package/dist/app/use-app-address.js

@@ -1,7 +1,7 @@
 import { useIsXs } from "../lib/use-media-query.js";
 import { Link, useRouter } from "./router.js";
-import { changedList, currentAddress, listDefaults, listedResource } from "./current-address.js";
 import { useAdminMeta } from "./meta-gate.js";
+import { changedList, currentAddress, listDefaults, listedResource } from "./current-address.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { appPath, readAppPath } from "@protobase/schema";

package/dist/app/use-incoming-counts.js

@@ -1,7 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { useQueries } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
+import { useQueries } from "@tanstack/react-query";
 //#region src/app/use-incoming-counts.ts
 const where$1 = createWhere();
 /** How many records point at `key` through each relation: `undefined` while loading, left out when the list is refused. */

package/dist/auth/auth-gate.js

@@ -5,6 +5,7 @@ import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { Button } from "../primitives/button.js";
 import { useRouter } from "../app/router.js";
+import { useSignInAddress } from "./use-sign-in-address.js";
 import { EmailCodePage } from "./email-code-page.js";
 import { FirstRunPage } from "./first-run-page.js";
 import { readResetLink, withoutResetLink } from "./reset-link.js";
@@ -17,7 +18,6 @@ import { SignUpPage } from "./sign-up-page.js";
 import { readStaffLink, withoutStaffLink } from "./staff-link.js";
 import { StaffSignInPage } from "./staff-sign-in-page.js";
 import { TwoFactorPage } from "./two-factor-page.js";
-import { useSignInAddress } from "./use-sign-in-address.js";
 import { readInvitationLink, withoutInvitationLink } from "../organizations/invitation-link.js";
 import { InvitationPage } from "../organizations/invitation-page.js";
 import { BeforeSignIn } from "../plugins/before-sign-in.js";

package/dist/auth/auth-provider.js

@@ -18,6 +18,7 @@ const AuthProvider = ({ session: given, origin, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
+	const [mcp, setMcp] = useState(false);
 	const [canSignUp, setCanSignUp] = useState(false);
 	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
@@ -57,6 +58,7 @@ const AuthProvider = ({ session: given, origin, children }) => {
 		session.status().then(async (status) => {
 			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
+			setMcp(Boolean(status.mcp));
 			setCanSignUp(Boolean(status.signUp));
 			setPasskeyDomains(status.passkeyDomains ?? []);
 			setSocialProviders(status.socialProviders);
@@ -81,6 +83,7 @@ const AuthProvider = ({ session: given, origin, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		mcp,
 		canSignUp,
 		passkeyDomains,
 		socialProviders,
@@ -132,6 +135,7 @@ const AuthProvider = ({ session: given, origin, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		mcp,
 		canSignUp,
 		passkeyDomains,
 		socialProviders,

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

@@ -2,9 +2,9 @@ import { RouteLink } from "../primitives/route-link.js";
 import { text } from "./messages.js";
 import { useAuth } from "./auth-provider.js";
 import { Button, buttonClass } from "../primitives/button.js";
-import { useSignInAddress } from "./use-sign-in-address.js";
-import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
 import { namedIcon } from "../app/named-icon.js";
+import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
+import { useSignInAddress } from "./use-sign-in-address.js";
 import { useId } from "react";
 import { Check, LogIn } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/connect/client-name.js

@@ -0,0 +1,9 @@
+const hidden = /[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u115f\u1160\u180e\u200b-\u200f\u2028-\u202e\u2060-\u206f\u3164\ufe00-\ufe0f\ufeff]/g;
+/** A client's own name as one line of plain text, without characters that hide or turn text, cut to `clientNameLength`. */
+const clientName = (name) => {
+	const plain = (name ?? "").replace(hidden, " ").replace(/\s+/g, " ").trim();
+	if (!plain) return void 0;
+	return plain.length > 60 ? `${plain.slice(0, 59)}…` : plain;
+};
+//#endregion
+export { clientName };

package/dist/connect/client-publisher.js

@@ -0,0 +1,13 @@
+//#region src/connect/client-publisher.ts
+/**
+* Who published a client: the host of its id when the id is an https URL, a client metadata document the server
+* fetched from there, the one identity of a client the server checked. `undefined` for a client that registered
+* itself, whose id the server chose, and whose name says nothing about who made it.
+*/
+const clientPublisher = (clientId) => {
+	if (!URL.canParse(clientId)) return void 0;
+	const url = new URL(clientId);
+	return url.protocol === "https:" ? url.host : void 0;
+};
+//#endregion
+export { clientPublisher };

package/dist/connect/connect-page.js

@@ -0,0 +1,236 @@
+import { Spinner } from "../primitives/spinner.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { clientName } from "./client-name.js";
+import { clientPublisher } from "./client-publisher.js";
+import { Button } from "../primitives/button.js";
+import { useRouter } from "../app/router.js";
+import { Notice } from "../app/meta-gate.js";
+import { isFramed, useArmedAfterFocus, useGuardedPress } from "./interaction-guard.js";
+import { isSafeTarget, redirectTarget } from "./redirect-target.js";
+import { signedRequestFor } from "./signed-request.js";
+import { useConnectAddress } from "./use-connect-address.js";
+import { useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/connect/connect-page.tsx
+const refusals = {
+	invalid_signature: "This request has expired: connect again from your app.",
+	STAFF_CANNOT_CONNECT: "Staff signed in as someone cannot allow apps to act for them.",
+	SIGN_IN_SETUP_REQUIRED: "Set up what this app requires for signing in first, then connect again from your app.",
+	ADDRESS_NOT_VERIFIED: "Confirm your address first: sign out, then sign in with a code emailed to you, and connect again from your app."
+};
+const refusalOf = (failure) => {
+	if (!(failure instanceof AuthError)) throw failure;
+	return (failure.code && refusals[failure.code]) ?? authMessage(failure);
+};
+const goWith = (assign) => (url) => {
+	if (!isSafeTarget(url)) throw new AuthError("The app asked to be sent somewhere this page will not go.", 400);
+	assign(url);
+};
+const TargetText = ({ target }) => target.kind === "site" ? /* @__PURE__ */ jsxs(Fragment$1, { children: ["the website ", /* @__PURE__ */ jsx("strong", {
+	className: "font-medium text-foreground",
+	children: target.host
+})] }) : target.kind === "this-computer" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	"an app on this computer (port ",
+	target.port,
+	")"
+] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: ["an app on this device that opens ", /* @__PURE__ */ jsx("code", {
+	className: "break-all text-foreground",
+	children: target.uri
+})] });
+const Request = ({ asking, appName, email, onAnswer, onSignOut }) => {
+	const [busy, setBusy] = useState(false);
+	const armed = useArmedAfterFocus(500);
+	const answer = (accept) => {
+		setBusy(true);
+		onAnswer(accept).finally(() => setBusy(false));
+	};
+	const allow = useGuardedPress(armed && !busy, () => answer(true));
+	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",
+		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."
+					]
+				}),
+				publisher && /* @__PURE__ */ jsxs("p", {
+					className: "mt-1 text-muted-foreground",
+					children: [
+						"Published by ",
+						publisher,
+						"."
+					]
+				}),
+				target ? /* @__PURE__ */ jsxs("p", {
+					className: "mt-3 text-muted-foreground",
+					children: [
+						"Allowing sends you on to ",
+						/* @__PURE__ */ jsx(TargetText, { target }),
+						"."
+					]
+				}) : /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "mt-3 text-danger-text",
+					children: "This app asked to be sent somewhere this page will not go, so it cannot be allowed."
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-3 text-muted-foreground",
+					children: "It can then read and change what you can, with your current role and organization, until you disconnect it from your account page."
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+					children: [/* @__PURE__ */ jsx(Button, {
+						disabled: busy,
+						onClick: () => answer(false),
+						children: "Deny"
+					}), target && /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						loading: busy,
+						disabled: !armed || busy,
+						...allow,
+						children: "Allow"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "mt-4 border-t pt-3 text-xs text-muted-foreground",
+					children: [
+						"Signed in as ",
+						email,
+						".",
+						" ",
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "underline underline-offset-2 hover:text-foreground",
+							onClick: onSignOut,
+							children: "Not you? Sign out"
+						})
+					]
+				})
+			]
+		})
+	});
+};
+const Connecting = ({ oauthQuery, appName, email, assign }) => {
+	const { session, signOut } = useAuth();
+	const { path, basePath } = useRouter();
+	const go = goWith(assign);
+	const signedRequest = (url) => signedRequestFor(url, {
+		origin: window.location.origin,
+		pathname: `${basePath}${path}`
+	});
+	const [state, setState] = useState({ kind: "loading" });
+	const fail = (failure) => setState({
+		kind: "failed",
+		message: refusalOf(failure)
+	});
+	useEffect(() => {
+		let current = true;
+		const ask = async () => {
+			const { url } = await session.connect.resume(oauthQuery);
+			const query = signedRequest(url);
+			if (query === void 0) return go(url);
+			const params = new URLSearchParams(query);
+			const client = await session.connect.client(params.get("client_id") ?? "");
+			if (current) setState({
+				kind: "asking",
+				asking: {
+					oauthQuery: query,
+					client,
+					target: redirectTarget(params.get("redirect_uri") ?? "")
+				}
+			});
+		};
+		ask().catch((failure) => current && fail(failure));
+		return () => {
+			current = false;
+		};
+	}, [session, oauthQuery]);
+	const answer = async (accept, asking) => {
+		try {
+			const { url } = await session.connect.answer(accept, asking.oauthQuery);
+			if (signedRequest(url) !== void 0) await signOut();
+			go(url);
+		} catch (failure) {
+			fail(failure);
+		}
+	};
+	if (state.kind === "failed") return /* @__PURE__ */ jsx(Notice, {
+		title: "This app cannot be connected",
+		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",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	return /* @__PURE__ */ jsx(Request, {
+		asking: state.asking,
+		appName,
+		email,
+		onAnswer: (accept) => answer(accept, state.asking),
+		onSignOut: () => void signOut()
+	});
+};
+/**
+* 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
+* 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 [framed] = useState(isFramed$1);
+	const { oauthQuery } = useConnectAddress();
+	if (framed) return /* @__PURE__ */ jsxs(Notice, {
+		title: "This page cannot be used inside another site",
+		children: [
+			/* @__PURE__ */ jsx("a", {
+				href: window.location.href,
+				target: "_blank",
+				rel: "noopener",
+				className: "underline underline-offset-2",
+				children: "Open it on its own"
+			}),
+			" ",
+			"to go on."
+		]
+	});
+	if (!oauthQuery) return /* @__PURE__ */ jsx(Notice, {
+		title: "Nothing to connect",
+		children: "Connect again from your app."
+	});
+	return /* @__PURE__ */ jsx(Connecting, {
+		oauthQuery,
+		appName,
+		email,
+		assign
+	}, oauthQuery);
+};
+//#endregion
+export { ConnectPage };