@burdenoff/fe-libs 2026.930.4 → 2026.930.5

package/dist/connections/ConnectionDetailsTab.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Translator } from '../credentials/translate';
+import { ConnectionProvider } from './types';
+export declare const ConnectionDetailsTab: FC<{
+    provider: ConnectionProvider;
+    translate: Translator;
+}>;
+export declare const ConnectionSharingTab: FC<{
+    translate: Translator;
+}>;
+//# sourceMappingURL=ConnectionDetailsTab.d.ts.map

package/dist/connections/ConnectionDetailsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionDetailsTab.d.ts","sourceRoot":"","sources":["../../src/connections/ConnectionDetailsTab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAG3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IACpC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,SAAS,EAAE,UAAU,CAAC;CACvB,CAiDA,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IAAE,SAAS,EAAE,UAAU,CAAA;CAAE,CAe9D,CAAC"}

package/dist/connections/ConnectionDetailsTab.js

@@ -0,0 +1,71 @@
+import { authTypeLabel as e, categoryLabel as t } from "./labels.js";
+import { ProviderIcon as n } from "./ProviderIcon.js";
+import { Share2 as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/connections/ConnectionDetailsTab.tsx
+var o = ({ provider: r, translate: o }) => /* @__PURE__ */ a("div", {
+	className: "space-y-4",
+	children: [
+		/* @__PURE__ */ i("h3", {
+			className: "text-sm font-semibold text-text-primary",
+			children: o("integrations.addConnection.tabs.details", "Details")
+		}),
+		/* @__PURE__ */ a("div", {
+			className: "flex items-center gap-3 rounded-md border border-border-subtle p-3",
+			children: [/* @__PURE__ */ i(n, {
+				provider: r,
+				size: 40
+			}), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+				className: "text-sm font-medium text-text-primary",
+				children: r.name
+			}), /* @__PURE__ */ a("p", {
+				className: "text-xs text-text-secondary",
+				children: [
+					e(r.authType, o),
+					" · ",
+					t(r.category, o)
+				]
+			})] })]
+		}),
+		r.description && /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+			className: "text-xs font-medium uppercase tracking-wider text-text-secondary",
+			children: o("integrations.addConnection.fields.description", "Description")
+		}), /* @__PURE__ */ i("p", {
+			className: "mt-1 text-sm text-text-primary",
+			children: r.description
+		})] }),
+		[{
+			url: r.website,
+			label: o("integrations.providerDetail.sections.website", "Website")
+		}, {
+			url: r.docsUrl,
+			label: o("integrations.providerDetail.sections.documentation", "Documentation")
+		}].filter((e) => /^https?:\/\//i.test(e.url)).map((e) => /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+			className: "text-xs font-medium uppercase tracking-wider text-text-secondary",
+			children: e.label
+		}), /* @__PURE__ */ i("a", {
+			href: e.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "mt-1 block break-all text-sm text-primary hover:underline",
+			children: e.url
+		})] }, e.label))
+	]
+}), s = ({ translate: e }) => /* @__PURE__ */ a("div", {
+	className: "space-y-4",
+	children: [/* @__PURE__ */ i("h3", {
+		className: "text-sm font-semibold text-text-primary",
+		children: e("integrations.addConnection.tabs.sharing", "Sharing")
+	}), /* @__PURE__ */ a("div", {
+		className: "rounded-md border border-border-subtle bg-accent/30 p-4 text-center",
+		children: [/* @__PURE__ */ i(r, {
+			size: 32,
+			className: "mx-auto mb-2 text-text-secondary"
+		}), /* @__PURE__ */ i("p", {
+			className: "text-sm text-text-secondary",
+			children: e("integrations.addConnection.sharing.placeholder", "Connection sharing settings will be available in a future update.")
+		})]
+	})]
+});
+//#endregion
+export { o as ConnectionDetailsTab, s as ConnectionSharingTab };

package/dist/connections/ConnectionDialog.d.ts

@@ -0,0 +1,57 @@
+import { FC, ReactNode } from 'react';
+import { ApolloClient } from '@apollo/client';
+import { Translator } from '../credentials/translate';
+import { ConnectionsApi } from './api';
+import { ConnectionDialogPresentation } from './frame';
+import { ConnectionDialogEvent, CreatedConnection } from './types';
+export interface ConnectionDialogProps {
+    open: boolean;
+    onClose: () => void;
+    /** The host's Apollo client, pointed at the workspace gateway. */
+    client: ApolloClient;
+    /**
+     * The absolute OAuth callback URL. Providers compare it exactly with what a
+     * bring-your-own app registered, so it is shown to the user as well as sent.
+     */
+    callbackUrl: string;
+    /** Host translator; English when omitted. */
+    translate?: Translator;
+    /** Open on this provider instead of the picker. */
+    providerId?: string | null;
+    /** Open on this provider, by key — what a workflow node knows. */
+    providerKey?: string | null;
+    /** What the picker lists: the workspace's installed providers, or the catalog. */
+    providerSource?: 'installed' | 'catalog';
+    /**
+     * Whether a vault must be chosen. Without one, the integrations service
+     * stores the credential itself.
+     */
+    requireVault?: boolean;
+    /** False shows an access-denied notice instead of the form. */
+    canCreate?: boolean;
+    /** Offer creating a vault from inside the dialog. */
+    canCreateVault?: boolean;
+    /** Initial connection name; defaults to "<Provider> Connection". */
+    defaultName?: string;
+    /** Settings stored on the connection, e.g. a Botlit return path. */
+    extraConfig?: Record<string, unknown>;
+    /** Show the Sharing tab. */
+    showSharingTab?: boolean;
+    /** Named queries to refetch after a create, e.g. `GetConnections`. */
+    refetchQueriesOnCreate?: string[];
+    /** Called once the connection is usable. */
+    onConnectionCreated?: (connection: CreatedConnection) => void;
+    onError?: (error: Error) => void;
+    /** Lifecycle events, for a host that mirrors them onto its own bus. */
+    onEvent?: (event: ConnectionDialogEvent) => void;
+    /** Replaces the success panel's button — e.g. "Link to bot channel". */
+    renderSuccessAction?: (connection: CreatedConnection) => ReactNode;
+    /** `dialog` (default) or `sheet` — see {@link ConnectionDialogPresentation}. */
+    presentation?: ConnectionDialogPresentation;
+    /** Heading while the provider picker shows. Defaults to "Add new credential". */
+    pickerTitle?: string;
+    /** Test seam: supply the service directly instead of via `client`. */
+    api?: ConnectionsApi;
+}
+export declare const ConnectionDialog: FC<ConnectionDialogProps>;
+//# sourceMappingURL=ConnectionDialog.d.ts.map

package/dist/connections/ConnectionDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionDialog.d.ts","sourceRoot":"","sources":["../../src/connections/ConnectionDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAmB,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE9E,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGlE,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAExE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kEAAkE;IAClE,MAAM,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sEAAsE;IACtE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;IAClC,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uEAAuE;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,wEAAwE;IACxE,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACnE,gFAAgF;IAChF,YAAY,CAAC,EAAE,4BAA4B,CAAC;IAC5C,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AA2BD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAuGtD,CAAC"}

package/dist/connections/ConnectionDialog.js

@@ -0,0 +1,88 @@
+import { cn as e } from "../lib/utils.js";
+import { englishTranslator as t } from "../credentials/translate.js";
+import { createConnectionsApi as n } from "./api.js";
+import { CONNECTION_DIALOG_FRAME_CLASSES as r, DENIED_TITLE_ID as i, DIALOG_Z as a, OVERLAY_Z as o, SURFACE_CLASS as s, TITLE_ID as c } from "./frame.js";
+import { DialogHeading as l } from "./DialogHeading.js";
+import { ConnectionDialogPanel as u } from "./ConnectionDialogPanel.js";
+import { useMemo as d, useRef as f } from "react";
+import { Shield as p } from "lucide-react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import * as _ from "@radix-ui/react-dialog";
+//#region src/connections/ConnectionDialog.tsx
+var v = ({ onClose: e, translate: t }) => /* @__PURE__ */ g(m, { children: [
+	/* @__PURE__ */ h(p, {
+		size: 40,
+		className: "text-text-secondary"
+	}),
+	/* @__PURE__ */ h(l, {
+		id: i,
+		className: "text-lg font-semibold text-text-primary",
+		children: t("integrations.addConnection.denied.title", "Access Denied")
+	}),
+	/* @__PURE__ */ h(_.Description, {
+		className: "text-sm text-text-secondary",
+		children: t("integrations.addConnection.denied.description", "You don't have permission to create connections.")
+	}),
+	/* @__PURE__ */ h("button", {
+		type: "button",
+		onClick: e,
+		className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium transition-colors hover:bg-accent",
+		children: t("integrations.common.close", "Close")
+	})
+] }), y = ({ open: l, onClose: p, client: m, callbackUrl: y, translate: b = t, providerId: x, providerKey: S, providerSource: C = "installed", requireVault: w = !0, canCreate: T = !0, canCreateVault: E = !1, defaultName: D, extraConfig: O, showSharingTab: k = !1, refetchQueriesOnCreate: A, onConnectionCreated: j, onError: M, onEvent: N, renderSuccessAction: P, presentation: F = "dialog", pickerTitle: I, api: L }) => {
+	let R = A?.join("|") ?? "", z = d(() => L ?? n(m, { refetchQueriesOnCreate: R ? R.split("|") : void 0 }), [
+		L,
+		m,
+		R
+	]), B = f(null), V = f(null), H = f(null);
+	return /* @__PURE__ */ h(_.Root, {
+		open: l,
+		onOpenChange: (e) => !e && p(),
+		children: /* @__PURE__ */ g(_.Portal, { children: [/* @__PURE__ */ h(_.Overlay, {
+			"data-testid": "add-connection-dialog-backdrop",
+			style: { zIndex: o },
+			className: "fixed inset-0 bg-bg-overlay animate-in fade-in-0 duration-200"
+		}), /* @__PURE__ */ h(_.Content, {
+			ref: V,
+			"aria-modal": "true",
+			"aria-labelledby": T ? c : i,
+			"data-testid": "add-connection-dialog",
+			"data-presentation": F,
+			style: { zIndex: a },
+			className: e(s, r[F][T ? "form" : "notice"]),
+			onOpenAutoFocus: (e) => {
+				B.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.preventDefault(), (H.current ?? V.current)?.focus({ preventScroll: !0 });
+			},
+			onCloseAutoFocus: (e) => {
+				e.preventDefault();
+				let t = B.current;
+				t && t.isConnected && t !== document.body && t.focus({ preventScroll: !0 });
+			},
+			children: T ? /* @__PURE__ */ h(u, {
+				api: z,
+				onClose: p,
+				callbackUrl: y,
+				translate: b,
+				providerId: x,
+				providerKey: S,
+				providerSource: C,
+				requireVault: w,
+				canCreateVault: E,
+				defaultName: D,
+				extraConfig: O,
+				showSharingTab: k,
+				pickerTitle: I,
+				searchInputRef: H,
+				onConnectionCreated: j,
+				onError: M,
+				onEvent: N,
+				renderSuccessAction: P
+			}) : /* @__PURE__ */ h(v, {
+				onClose: p,
+				translate: b
+			})
+		})] })
+	});
+};
+//#endregion
+export { y as ConnectionDialog };

package/dist/connections/ConnectionDialogPanel.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode, RefObject } from 'react';
+import { Translator } from '../credentials/translate';
+import { ConnectionsApi } from './api';
+import { ConnectionDialogEvent, CreatedConnection } from './types';
+export interface ConnectionDialogPanelProps {
+    api: ConnectionsApi;
+    onClose: () => void;
+    callbackUrl: string;
+    translate: Translator;
+    providerId?: string | null;
+    providerKey?: string | null;
+    providerSource: 'installed' | 'catalog';
+    requireVault: boolean;
+    canCreateVault: boolean;
+    defaultName?: string;
+    extraConfig?: Record<string, unknown>;
+    showSharingTab: boolean;
+    pickerTitle?: string;
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    onConnectionCreated?: (connection: CreatedConnection) => void;
+    onError?: (error: Error) => void;
+    onEvent?: (event: ConnectionDialogEvent) => void;
+    renderSuccessAction?: (connection: CreatedConnection) => ReactNode;
+}
+export declare const ConnectionDialogPanel: FC<ConnectionDialogPanelProps>;
+//# sourceMappingURL=ConnectionDialogPanel.d.ts.map

package/dist/connections/ConnectionDialogPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionDialogPanel.d.ts","sourceRoot":"","sources":["../../src/connections/ConnectionDialogPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAML,KAAK,EAAE,EAEP,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EACV,qBAAqB,EAErB,iBAAiB,EAElB,MAAM,SAAS,CAAC;AAKjB,MAAM,WAAW,0BAA0B;IACzC,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,UAAU,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,SAAS,CAAC;CACpE;AAUD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA8WhE,CAAC"}

package/dist/connections/ConnectionDialogPanel.js

@@ -0,0 +1,272 @@
+import { cn as e } from "../lib/utils.js";
+import { initialValuesFromSchema as t } from "../credentials/schema.js";
+import { resolveFlow as n, resolveMethod as r, resolveSchema as i, selectableMethods as ee } from "./connectionFlow.js";
+import { authTypeLabel as a } from "./labels.js";
+import { ProviderIcon as o } from "./ProviderIcon.js";
+import { ConnectionDetailsTab as te, ConnectionSharingTab as ne } from "./ConnectionDetailsTab.js";
+import { EMPTY_STORAGE as re } from "./storage.js";
+import { TITLE_ID as ie } from "./frame.js";
+import { parseScopeOptions as ae, requestedScopes as oe } from "./scopes.js";
+import { ConnectionFormTab as se } from "./ConnectionFormTab.js";
+import { DialogHeading as ce } from "./DialogHeading.js";
+import { ProviderPickerPanel as le } from "./ProviderPickerPanel.js";
+import { useConnectionSubmit as ue } from "./useConnectionSubmit.js";
+import { useCallback as s, useEffect as de, useId as fe, useMemo as c, useState as l } from "react";
+import { AlertCircle as u, Check as pe, CheckCircle2 as me, Info as he, Link2 as ge, Loader2 as d, Share2 as _e, X as ve } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import * as h from "@radix-ui/react-dialog";
+//#region src/connections/ConnectionDialogPanel.tsx
+function g(e, n) {
+	return t(i(e, r(e, n)));
+}
+var _ = ({ api: t, onClose: _, callbackUrl: v, translate: y, providerId: b, providerKey: x, providerSource: ye, requireVault: S, canCreateVault: be, defaultName: C, extraConfig: xe, showSharingTab: Se, pickerTitle: Ce, searchInputRef: we, onConnectionCreated: Te, onError: w, onEvent: T, renderSuccessAction: E }) => {
+	let D = !!(b || x), [O, Ee] = l(null), [k, De] = l(D), [A, j] = l("connection"), [M, N] = l(C ?? ""), [P, Oe] = l(""), [ke, F] = l(null), [I, L] = l({}), [R, z] = l(null), [B, Ae] = l(re), V = fe(), H = s((e) => `${V}-${e}`, [V]), { submit: je, busy: U, oauthWaiting: Me, errorMessage: Ne, setErrorMessage: W, created: G } = ue({
+		api: t,
+		callbackUrl: v,
+		translate: y,
+		onConnectionCreated: Te,
+		onError: w,
+		onEvent: T
+	}), K = s((e) => {
+		Ee(e), N(C ?? `${e.name} Connection`), F(null), L(g(e, null)), z(null), W("");
+	}, [C, W]), q = s((e) => {
+		O && (F(e), L(g(O, e)), z(null), W(""));
+	}, [O, W]);
+	de(() => {
+		if (!D) return;
+		let e = !1;
+		return t.getProvider({
+			id: b ?? void 0,
+			key: x ?? void 0
+		}).then((t) => {
+			!e && t && K(t);
+		}).catch(() => void 0).finally(() => {
+			e || De(!1);
+		}), () => {
+			e = !0;
+		};
+	}, [
+		D,
+		b,
+		x,
+		t,
+		K
+	]);
+	let J = O ? r(O, ke) : null, Pe = O ? n(O, J) : "fields", Fe = c(() => O ? i(O, J) : null, [O, J]), Y = c(() => ae(J?.availableScopes ?? O?.availableScopes), [J, O]), Ie = J && J.defaultScopes.length > 0 ? J.defaultScopes : O?.defaultScopes ?? [], Le = () => {
+		O && je({
+			provider: O,
+			method: J,
+			name: M,
+			description: P,
+			values: I,
+			storage: B,
+			requireVault: S,
+			extraConfig: xe
+		}, oe(R, Y));
+	}, X = [
+		{
+			key: "connection",
+			label: y("integrations.addConnection.tabs.connection", "Connection"),
+			icon: ge
+		},
+		...Se ? [{
+			key: "sharing",
+			label: y("integrations.addConnection.tabs.sharing", "Sharing"),
+			icon: _e
+		}] : [],
+		{
+			key: "details",
+			label: y("integrations.addConnection.tabs.details", "Details"),
+			icon: he
+		}
+	], Z = (e) => H(`tab-${e}`), Q = H("tabpanel"), Re = (e) => {
+		let t = X.map((e) => e.key), n = t.indexOf(A), r = {
+			ArrowRight: n + 1,
+			ArrowDown: n + 1,
+			ArrowLeft: n - 1,
+			ArrowUp: n - 1,
+			Home: 0,
+			End: t.length - 1
+		}[e.key];
+		if (r === void 0) return;
+		let i = t[(r + t.length) % t.length];
+		e.preventDefault(), j(i), document.getElementById(Z(i))?.focus();
+	}, $ = !!O && !G;
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ m("div", {
+			className: "flex flex-shrink-0 items-center justify-between border-b border-border-subtle px-5 py-4",
+			children: [/* @__PURE__ */ m("div", {
+				className: "flex min-w-0 items-center gap-3",
+				children: [O && /* @__PURE__ */ p(o, {
+					provider: O,
+					size: 32
+				}), /* @__PURE__ */ m("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ p(ce, {
+						id: ie,
+						className: e("text-base font-semibold text-text-primary", O && "truncate"),
+						children: O ? y("integrations.addConnection.dialog.accountTitle", "{{provider}} account", { provider: O.name }) : Ce ?? y("integrations.addConnection.dialog.title", "Add new credential")
+					}), /* @__PURE__ */ p(h.Description, {
+						className: "text-xs text-text-secondary",
+						children: O ? a(J?.authType ?? O.authType, y) : y("integrations.addConnection.dialog.subtitle", "Select an app or service to connect to")
+					})]
+				})]
+			}), /* @__PURE__ */ p(h.Close, {
+				asChild: !0,
+				children: /* @__PURE__ */ p("button", {
+					type: "button",
+					className: "flex-shrink-0 rounded-md p-1.5 text-text-secondary transition-colors hover:bg-accent hover:text-text-primary",
+					"aria-label": y("integrations.addConnection.actions.close", "Close dialog"),
+					children: /* @__PURE__ */ p(ve, { size: 20 })
+				})
+			})]
+		}),
+		/* @__PURE__ */ m("div", {
+			"data-testid": "add-connection-body",
+			className: "flex min-h-0 flex-1 flex-col overflow-hidden sm:flex-row",
+			children: [
+				!D && !O && /* @__PURE__ */ p(le, {
+					api: t,
+					source: ye,
+					translate: y,
+					searchInputRef: we,
+					onSelect: K
+				}),
+				D && !O && k && /* @__PURE__ */ p("div", {
+					className: "flex flex-1 items-center justify-center p-8",
+					children: /* @__PURE__ */ p(d, {
+						size: 32,
+						className: "animate-spin text-text-secondary"
+					})
+				}),
+				D && !O && !k && /* @__PURE__ */ m("div", {
+					className: "flex flex-1 flex-col items-center justify-center p-8 text-center",
+					children: [/* @__PURE__ */ p(u, {
+						size: 32,
+						className: "mb-3 text-text-secondary"
+					}), /* @__PURE__ */ p("p", {
+						className: "text-sm text-text-secondary",
+						children: y("integrations.addConnection.providerUnavailable", "This provider isn't available.")
+					})]
+				}),
+				O && G && /* @__PURE__ */ m("div", {
+					className: "flex flex-1 flex-col items-center justify-center p-8 text-center",
+					children: [
+						/* @__PURE__ */ p("div", {
+							className: "mb-4 rounded-full bg-status-success-bg-subtle p-3",
+							children: /* @__PURE__ */ p(me, {
+								size: 48,
+								className: "text-status-success-text"
+							})
+						}),
+						/* @__PURE__ */ p("h3", {
+							className: "mb-1 text-lg font-semibold text-text-primary",
+							children: y("integrations.addConnection.success.title", "Connection Created!")
+						}),
+						/* @__PURE__ */ p("p", {
+							className: "mb-6 text-sm text-text-secondary",
+							children: y("integrations.addConnection.success.description", "Your {{provider}} connection has been set up successfully.", { provider: O.name })
+						}),
+						E ? E(G) : /* @__PURE__ */ p("button", {
+							type: "button",
+							onClick: _,
+							className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
+							children: y("integrations.addConnection.actions.done", "Done")
+						})
+					]
+				}),
+				O && $ && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+					role: "tablist",
+					"aria-labelledby": "add-connection-dialog-title",
+					"data-testid": "add-connection-tabs",
+					className: "flex flex-shrink-0 overflow-x-auto border-b border-border-subtle sm:block sm:w-40 sm:overflow-x-visible sm:border-b-0 sm:border-r sm:py-3",
+					children: X.map((t) => {
+						let n = t.icon, r = A === t.key;
+						return /* @__PURE__ */ m("button", {
+							id: Z(t.key),
+							type: "button",
+							role: "tab",
+							"aria-selected": r,
+							"aria-controls": Q,
+							tabIndex: r ? 0 : -1,
+							onClick: () => j(t.key),
+							onKeyDown: Re,
+							className: e("flex min-w-max items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors sm:w-full sm:border-b-0 sm:border-l-2", r ? "border-primary bg-accent/50 text-text-primary" : "border-transparent text-text-secondary hover:bg-accent/30 hover:text-text-primary"),
+							children: [/* @__PURE__ */ p(n, {
+								size: 16,
+								"aria-hidden": "true"
+							}), t.label]
+						}, t.key);
+					})
+				}), /* @__PURE__ */ m("div", {
+					id: Q,
+					role: "tabpanel",
+					"aria-labelledby": Z(A),
+					"data-testid": "add-connection-pane",
+					className: "min-h-0 min-w-0 flex-1 overflow-y-auto p-5",
+					children: [
+						A === "connection" && /* @__PURE__ */ p(se, {
+							api: t,
+							provider: O,
+							methods: ee(O),
+							method: J,
+							flow: Pe,
+							schema: Fe,
+							name: M,
+							onNameChange: N,
+							description: P,
+							onDescriptionChange: Oe,
+							values: I,
+							setValues: L,
+							onMethodChange: q,
+							storage: B,
+							setStorage: Ae,
+							scopeOptions: Y,
+							defaultScopes: Ie,
+							scopeSelection: R,
+							setScopeSelection: z,
+							callbackUrl: v,
+							requireVault: S,
+							canCreateVault: be,
+							errorMessage: Ne,
+							busy: U,
+							translate: y,
+							fieldId: H
+						}),
+						A === "sharing" && /* @__PURE__ */ p(ne, { translate: y }),
+						A === "details" && /* @__PURE__ */ p(te, {
+							provider: O,
+							translate: y
+						})
+					]
+				})] })
+			]
+		}),
+		O && $ && /* @__PURE__ */ m("div", {
+			"data-testid": "add-connection-footer",
+			className: "flex flex-shrink-0 items-center justify-end gap-2 border-t border-border-subtle px-5 py-3",
+			children: [/* @__PURE__ */ p("button", {
+				type: "button",
+				onClick: _,
+				className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-accent",
+				children: y("integrations.addConnection.actions.cancel", "Cancel")
+			}), /* @__PURE__ */ m("button", {
+				type: "button",
+				"data-testid": "add-connection-submit",
+				onClick: Le,
+				disabled: U || !M.trim(),
+				className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
+				children: [U ? /* @__PURE__ */ p(d, {
+					size: 14,
+					className: "animate-spin",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ p(pe, {
+					size: 14,
+					"aria-hidden": "true"
+				}), Me ? y("integrations.addConnection.actions.waiting", "Waiting...") : y("integrations.addConnection.actions.connect", "Connect")]
+			})]
+		})
+	] });
+};
+//#endregion
+export { _ as ConnectionDialogPanel };

package/dist/connections/ConnectionFormTab.d.ts

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { Translator } from '../credentials/translate';
+import { AuthMethodFlow, FormSchema } from '../credentials/types';
+import { ConnectionsApi } from './api';
+import { ScopeOption, ScopeSelection } from './scopes';
+import { ConnectionAuthMethod, ConnectionProvider, CredentialStorageState } from './types';
+export interface ConnectionFormTabProps {
+    api: ConnectionsApi;
+    provider: ConnectionProvider;
+    methods: ConnectionAuthMethod[];
+    method: ConnectionAuthMethod | null;
+    flow: AuthMethodFlow;
+    schema: FormSchema | null;
+    name: string;
+    onNameChange: (name: string) => void;
+    description: string;
+    onDescriptionChange: (description: string) => void;
+    values: Record<string, unknown>;
+    setValues: (values: Record<string, unknown>) => void;
+    onMethodChange: (key: string) => void;
+    storage: CredentialStorageState;
+    setStorage: (update: (current: CredentialStorageState) => CredentialStorageState) => void;
+    scopeOptions: ScopeOption[];
+    defaultScopes: string[];
+    scopeSelection: ScopeSelection;
+    setScopeSelection: (selection: string[]) => void;
+    callbackUrl: string;
+    requireVault: boolean;
+    canCreateVault: boolean;
+    errorMessage: string;
+    busy: boolean;
+    translate: Translator;
+    /** Namespaces this form's element ids. */
+    fieldId: (field: string) => string;
+}
+export declare const ConnectionFormTab: FC<ConnectionFormTabProps>;
+//# sourceMappingURL=ConnectionFormTab.d.ts.map

package/dist/connections/ConnectionFormTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionFormTab.d.ts","sourceRoot":"","sources":["../../src/connections/ConnectionFormTab.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEhG,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACrD,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,sBAAsB,CAAC;IAChC,UAAU,EAAE,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,sBAAsB,KAAK,IAAI,CAAC;IAC1F,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,EAAE,cAAc,CAAC;IAC/B,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,UAAU,CAAC;IACtB,0CAA0C;IAC1C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAiPxD,CAAC"}