@opengeni/react 5.0.4 → 5.0.5-canary.1

package/dist/connect.js

@@ -1,14 +1,125 @@
 import "./chunk-IWIDV7SB.js";
+import {
+  Markdown
+} from "./chunk-M2HNWZYR.js";
 import {
   copyTextToClipboard
 } from "./chunk-JVYQRRC4.js";
+import "./chunk-HQV2I5HV.js";
+import "./chunk-VZTQ73XT.js";
+import "./chunk-22KP6LR5.js";
 
 // src/connect.ts
 import { useMemo, useSyncExternalStore } from "react";
 
-// src/connect-setup.tsx
-import { useState } from "react";
+// src/skill-discovery.tsx
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SkillDiscovery(props) {
+  const query = props.query.trim();
+  return /* @__PURE__ */ jsxs("section", { className: "og-skill-discovery", "aria-label": "Discover skills", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx("h3", { children: "Discover skills" }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://skills.sh/",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "og-skill-discovery-browse",
+          children: "Browse skills.sh \u2197"
+        }
+      )
+    ] }),
+    !query && props.onSearch ? /* @__PURE__ */ jsx("button", { type: "button", className: "og-skill-discovery-search", onClick: props.onSearch, children: "Search skills" }) : null,
+    /* @__PURE__ */ jsx(DiscoveryResults, { ...props, query }, `${props.workspaceId}:${query}`)
+  ] });
+}
+var EMPTY_INSTALLED_SKILLS = [];
+function DiscoveryResults({
+  client,
+  workspaceId,
+  query,
+  canManage,
+  onImport,
+  installedSkills = EMPTY_INSTALLED_SKILLS
+}) {
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(query.length >= 2);
+  const [error, setError] = useState(false);
+  const [retry, setRetry] = useState(0);
+  useEffect(() => {
+    let active = true;
+    setError(false);
+    if (query.length < 2) return;
+    setLoading(true);
+    let timer;
+    const search = async (attempt) => {
+      try {
+        const data = await client.searchPublicSkills(workspaceId, query);
+        if (!active) return;
+        setResult(data);
+        setLoading(false);
+      } catch (cause) {
+        if (!active) return;
+        const status = typeof cause === "object" && cause !== null && "status" in cause ? cause.status : void 0;
+        const transient = cause instanceof TypeError || typeof status === "number" && status >= 500 && status <= 599;
+        if (attempt === 0 && transient) {
+          timer = setTimeout(() => void search(1), 750);
+          return;
+        }
+        setError(true);
+        setLoading(false);
+      }
+    };
+    timer = setTimeout(() => void search(0), 300);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [client, workspaceId, query, retry]);
+  return /* @__PURE__ */ jsxs("div", { "aria-busy": loading, children: [
+    /* @__PURE__ */ jsx("div", { className: "og-skill-discovery-grid", children: result?.items.map((skill) => {
+      const installed = installedSkills.some(
+        (entry) => entry.sourceUrl.replace(/\/$/, "").toLowerCase() === skill.url.toLowerCase() || entry.repositoryUrl.replace(/\/$/, "").toLowerCase() === `https://github.com/${skill.source}`.toLowerCase() && entry.name.toLowerCase() === skill.name.toLowerCase()
+      );
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "og-skill-discovery-item",
+          disabled: !canManage,
+          onClick: () => onImport(skill.url),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "og-skill-discovery-copy", children: [
+              /* @__PURE__ */ jsx("strong", { children: skill.name }),
+              /* @__PURE__ */ jsx("span", { children: skill.source }),
+              /* @__PURE__ */ jsxs("small", { children: [
+                skill.installs.toLocaleString(),
+                " installs"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "og-skill-discovery-action", children: installed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713 " }),
+              "Installed"
+            ] }) : !canManage ? "Admin required" : "Preview \u2192" })
+          ]
+        },
+        skill.id
+      );
+    }) }),
+    loading ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading skills\u2026" }) : null,
+    error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "og-skill-discovery-error", children: [
+      "Could not load skills.",
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setRetry((value) => value + 1), children: "Retry" })
+    ] }) : null,
+    result && !result.items.length && !loading && !error ? /* @__PURE__ */ jsx("p", { role: "status", children: "No skills found. Try a different search." }) : null
+  ] });
+}
+
+// src/connect-setup.tsx
+import { useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var setupStatus = {
   ready: "Ready to connect",
   requires_user_action: "Authorize your account",
@@ -35,17 +146,17 @@ function deviceVerificationUrl(action) {
   }
 }
 function ConnectSetup(props) {
-  const [scope, setScope] = useState(props.controller);
-  const [generation, setGeneration] = useState(0);
+  const [scope, setScope] = useState2(props.controller);
+  const [generation, setGeneration] = useState2(0);
   if (scope !== props.controller) {
     setScope(props.controller);
     setGeneration(generation + 1);
   }
-  return /* @__PURE__ */ jsx(ScopedSetup, { ...props }, generation);
+  return /* @__PURE__ */ jsx2(ScopedSetup, { ...props }, generation);
 }
 function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }) {
   const view = useConnect(controller);
-  const [localError, setLocalError] = useState(false);
+  const [localError, setLocalError] = useState2(false);
   const invoke = (operation) => {
     setLocalError(false);
     try {
@@ -56,7 +167,7 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
   };
   const attempt = view.attempt;
   if (!attempt)
-    return /* @__PURE__ */ jsx("section", { className, "aria-label": "Connection setup", children: /* @__PURE__ */ jsx("p", { role: "status", children: "Choose a connection to begin." }) });
+    return /* @__PURE__ */ jsx2("section", { className, "aria-label": "Connection setup", children: /* @__PURE__ */ jsx2("p", { role: "status", children: "Choose a connection to begin." }) });
   const action = attempt.nextAction;
   const verificationUrl = deviceVerificationUrl(action);
   const terminal = ["complete", "cancelled", "expired"].includes(attempt.state);
@@ -95,20 +206,20 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
       );
     }
   };
-  return /* @__PURE__ */ jsxs("section", { className, "aria-label": "Connection setup", "aria-busy": view.busy, children: [
-    /* @__PURE__ */ jsxs("p", { children: [
+  return /* @__PURE__ */ jsxs2("section", { className, "aria-label": "Connection setup", "aria-busy": view.busy, children: [
+    /* @__PURE__ */ jsxs2("p", { children: [
       "Ownership: ",
       attempt.ownership === "personal" ? "Personal" : "Workspace"
     ] }),
-    /* @__PURE__ */ jsx("p", { role: "status", children: setupStatus[attempt.state] }),
-    attempt.account && /* @__PURE__ */ jsxs("p", { children: [
+    /* @__PURE__ */ jsx2("p", { role: "status", children: setupStatus[attempt.state] }),
+    attempt.account && /* @__PURE__ */ jsxs2("p", { children: [
       "Account: ",
       attempt.account.label
     ] }),
-    (localError || view.error || attempt.error) && /* @__PURE__ */ jsx("p", { role: "alert", children: attempt.error?.code === "source_changed" ? "The integration source changed. Review the new operations before installing." : "Connection setup could not continue. Refresh its status before trying again." }),
-    !terminal && /* @__PURE__ */ jsx("form", { onSubmit: submit, autoComplete: "off", children: /* @__PURE__ */ jsxs("fieldset", { disabled: view.busy, children: [
-      /* @__PURE__ */ jsx("legend", { children: "Connection details" }),
-      attempt.state === "connected_but_incomplete" && action.type === "none" && /* @__PURE__ */ jsx(
+    (localError || view.error || attempt.error) && /* @__PURE__ */ jsx2("p", { role: "alert", children: attempt.error?.code === "source_changed" ? "The integration source changed. Review the new operations before installing." : "Connection setup could not continue. Refresh its status before trying again." }),
+    !terminal && /* @__PURE__ */ jsx2("form", { onSubmit: submit, autoComplete: "off", children: /* @__PURE__ */ jsxs2("fieldset", { disabled: view.busy, children: [
+      /* @__PURE__ */ jsx2("legend", { children: "Connection details" }),
+      attempt.state === "connected_but_incomplete" && action.type === "none" && /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
@@ -116,12 +227,12 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
           children: "Review integration operations"
         }
       ),
-      action.type === "credentials" && action.fields.map((field, i) => /* @__PURE__ */ jsxs("label", { children: [
+      action.type === "credentials" && action.fields.map((field, i) => /* @__PURE__ */ jsxs2("label", { children: [
         field.label,
-        field.options ? /* @__PURE__ */ jsxs("select", { name: `field-${i}`, required: field.required, defaultValue: "", children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: field.required ? "Choose an option" : "No account (public service)" }),
-          field.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
-        ] }) : /* @__PURE__ */ jsx(
+        field.options ? /* @__PURE__ */ jsxs2("select", { name: `field-${i}`, required: field.required, defaultValue: "", children: [
+          /* @__PURE__ */ jsx2("option", { value: "", children: field.required ? "Choose an option" : "No account (public service)" }),
+          field.options.map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, children: option.label }, option.value))
+        ] }) : /* @__PURE__ */ jsx2(
           "input",
           {
             name: `field-${i}`,
@@ -131,11 +242,11 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
           }
         )
       ] }, field.name)),
-      action.type === "select_account" && /* @__PURE__ */ jsxs("label", { children: [
+      action.type === "select_account" && /* @__PURE__ */ jsxs2("label", { children: [
         "Account",
-        /* @__PURE__ */ jsxs("select", { name: "account", required: true, defaultValue: "", children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Choose an account" }),
-          action.accounts.map((account) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2("select", { name: "account", required: true, defaultValue: "", children: [
+          /* @__PURE__ */ jsx2("option", { value: "", disabled: true, children: "Choose an account" }),
+          action.accounts.map((account) => /* @__PURE__ */ jsxs2(
             "option",
             {
               value: account.id,
@@ -153,16 +264,16 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
           ))
         ] })
       ] }),
-      action.type === "select_resources" && action.resources.map((resource) => /* @__PURE__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx("input", { type: "checkbox", name: "resource", value: resource.id }),
+      action.type === "select_resources" && action.resources.map((resource) => /* @__PURE__ */ jsxs2("label", { children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", name: "resource", value: resource.id }),
         resource.label,
         " (",
         resource.kind,
         ")"
       ] }, resource.id)),
-      action.type === "select_resources" && action.cursor && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { children: "More resources are available. Review all pages before submitting a selection." }),
-        onBrowseResources && /* @__PURE__ */ jsx(
+      action.type === "select_resources" && action.cursor && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("p", { children: "More resources are available. Review all pages before submitting a selection." }),
+        onBrowseResources && /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -171,10 +282,10 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
           }
         )
       ] }),
-      action.type === "preview" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { children: "Select the operations to install." }),
-        action.operations.map((operation) => /* @__PURE__ */ jsxs("label", { children: [
-          /* @__PURE__ */ jsx("input", { type: "checkbox", name: "operation", value: operation.id }),
+      action.type === "preview" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("p", { children: "Select the operations to install." }),
+        action.operations.map((operation) => /* @__PURE__ */ jsxs2("label", { children: [
+          /* @__PURE__ */ jsx2("input", { type: "checkbox", name: "operation", value: operation.id }),
           operation.label,
           " (",
           operation.kind,
@@ -183,7 +294,7 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
       ] }),
       ["credentials", "select_account", "select_resources", "preview"].includes(
         action.type
-      ) && /* @__PURE__ */ jsx(
+      ) && /* @__PURE__ */ jsx2(
         "button",
         {
           type: "submit",
@@ -191,7 +302,7 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
           children: action.type === "preview" ? "Install selected operations" : "Continue"
         }
       ),
-      action.type === "authorize" && /* @__PURE__ */ jsx(
+      action.type === "authorize" && /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
@@ -199,40 +310,128 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className })
           children: "Authorize connection"
         }
       ),
-      action.type === "wait" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        action.userCode && /* @__PURE__ */ jsxs("p", { children: [
+      action.type === "wait" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        action.userCode && /* @__PURE__ */ jsxs2("p", { children: [
           "Verification code: ",
-          /* @__PURE__ */ jsx("code", { children: action.userCode })
+          /* @__PURE__ */ jsx2("code", { children: action.userCode })
         ] }),
-        /* @__PURE__ */ jsx("p", { children: "Complete provider authorization, then check the connection status." }),
-        verificationUrl && /* @__PURE__ */ jsx("a", { href: verificationUrl, target: "_blank", rel: "noopener noreferrer", children: "Open provider verification page (new tab)" })
+        /* @__PURE__ */ jsx2("p", { children: "Complete provider authorization, then check the connection status." }),
+        verificationUrl && /* @__PURE__ */ jsx2("a", { href: verificationUrl, target: "_blank", rel: "noopener noreferrer", children: "Open provider verification page (new tab)" })
       ] }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => invoke(() => view.refresh()), children: "Check status" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => invoke(() => view.cancel(crypto.randomUUID())), children: "Cancel setup" })
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => invoke(() => view.refresh()), children: "Check status" }),
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => invoke(() => view.cancel(crypto.randomUUID())), children: "Cancel setup" })
     ] }) }, `${attempt.id}:${attempt.revision}`)
   ] });
 }
 
+// src/connection-catalog.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ConnectionDetailsAction({
+  option,
+  name = option.name
+}) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      className: "og-connection-details-action",
+      "aria-label": `View ${name} details`,
+      onClick: option.onOpen,
+      children: /* @__PURE__ */ jsx3("span", { "aria-hidden": true, children: option.connected ? "\u203A" : "+" })
+    }
+  );
+}
+function ConnectionOptionRow({ option }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "og-connection-catalog-action-row og-connection-option", children: [
+    /* @__PURE__ */ jsxs3("button", { type: "button", className: "og-connection-catalog-row", onClick: option.onOpen, children: [
+      /* @__PURE__ */ jsxs3("span", { className: "og-connection-catalog-copy", children: [
+        /* @__PURE__ */ jsx3("strong", { children: option.name }),
+        /* @__PURE__ */ jsx3("span", { children: option.description })
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: "og-connection-catalog-status", children: option.status })
+    ] }),
+    /* @__PURE__ */ jsx3("span", { className: "og-connection-option-action", children: option.action ?? /* @__PURE__ */ jsx3(ConnectionDetailsAction, { option }) })
+  ] });
+}
+function ConnectionServiceRow({ service }) {
+  if (!service.options.length) return null;
+  const connected = service.options.filter((option) => option.connected).length;
+  const identity = /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3("span", { className: "og-connection-catalog-logo", children: service.logo }),
+    /* @__PURE__ */ jsxs3("span", { className: "og-connection-catalog-copy", children: [
+      /* @__PURE__ */ jsx3("strong", { children: service.name }),
+      /* @__PURE__ */ jsx3("span", { children: service.options.length === 1 ? service.options[0]?.description : service.options.map((option) => option.name).join(" \xB7 ") })
+    ] }),
+    /* @__PURE__ */ jsx3("span", { className: "og-connection-catalog-status", children: service.options.length === 1 ? service.options[0]?.status : `${connected} of ${service.options.length} connected` })
+  ] });
+  return service.options.length === 1 ? /* @__PURE__ */ jsxs3("div", { className: "og-connection-catalog-action-row", children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "og-connection-catalog-row",
+        onClick: service.options[0].onOpen,
+        children: identity
+      }
+    ),
+    service.options[0]?.action ?? /* @__PURE__ */ jsx3(ConnectionDetailsAction, { option: service.options[0], name: service.name })
+  ] }) : /* @__PURE__ */ jsxs3("details", { className: "og-connection-catalog-service", children: [
+    /* @__PURE__ */ jsxs3("summary", { className: "og-connection-catalog-row", children: [
+      identity,
+      /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "og-connection-group-chevron", children: "\u2304" })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "og-connection-catalog-options", children: service.options.map((option) => /* @__PURE__ */ jsx3(ConnectionOptionRow, { option }, option.id)) })
+  ] });
+}
+function ConnectionCatalog({
+  services,
+  query = "",
+  columns = 1,
+  grouped = true,
+  className = "",
+  emptyMessage = "No connections match your search."
+}) {
+  const search = query.trim().toLowerCase();
+  const entries = grouped ? services : services.flatMap(
+    (service) => service.options.map((option) => ({
+      ...service,
+      id: `${service.id}/${option.id}`,
+      name: service.options.length > 1 && option.name !== service.name ? `${service.name} \xB7 ${option.name}` : service.name,
+      options: [option]
+    }))
+  );
+  const visible = entries.filter(
+    (service) => [service.name, ...service.options.flatMap((option) => [option.name, option.description ?? ""])].join(" ").toLowerCase().includes(search)
+  );
+  return /* @__PURE__ */ jsx3("div", { className: `og-connection-catalog ${className}`, "data-columns": columns, children: visible.length ? visible.map((service) => /* @__PURE__ */ jsx3(ConnectionServiceRow, { service }, service.id)) : /* @__PURE__ */ jsx3("p", { role: "status", children: emptyMessage }) });
+}
+
 // src/connect-chooser.tsx
-import { useEffect, useState as useState2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function ConnectChooser(props) {
-  const [scope, setScope] = useState2(props.controller);
-  const [generation, setGeneration] = useState2(0);
+  const [scope, setScope] = useState3(props.controller);
+  const [generation, setGeneration] = useState3(0);
   if (scope !== props.controller) {
     setScope(props.controller);
     setGeneration(generation + 1);
   }
-  return /* @__PURE__ */ jsx2(ScopedChooser, { ...props }, generation);
+  return /* @__PURE__ */ jsx4(ScopedChooser, { ...props }, generation);
 }
-function ScopedChooser({ controller, returnUrl, className }) {
+function ScopedChooser({
+  controller,
+  returnUrl,
+  className,
+  presentation = "select"
+}) {
   const view = useConnect(controller);
-  const [catalog, setCatalog] = useState2(null);
-  const [failed, setFailed] = useState2(false);
-  const [load, setLoad] = useState2(0);
-  const [providerId, setProviderId] = useState2("");
-  const [ownership, setOwnership] = useState2("");
-  useEffect(() => {
+  const [catalog, setCatalog] = useState3(null);
+  const [failed, setFailed] = useState3(false);
+  const [load, setLoad] = useState3(0);
+  const [query, setQuery] = useState3("");
+  const [providerId, setProviderId] = useState3("");
+  const [ownership, setOwnership] = useState3("");
+  useEffect2(() => {
     const abort = new AbortController();
     setCatalog(null);
     setFailed(false);
@@ -260,21 +459,70 @@ function ScopedChooser({ controller, returnUrl, className }) {
       setFailed(true);
     }
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "section",
     {
       className,
       "aria-label": "Choose a connection",
       "aria-busy": view.busy || !catalog && !failed,
       children: [
-        failed && /* @__PURE__ */ jsx2("p", { role: "alert", children: "Connections could not be loaded or started. Check setup status before retrying." }),
-        !catalog && !failed && /* @__PURE__ */ jsx2("p", { role: "status", children: "Loading connections\u2026" }),
-        catalog?.length === 0 && /* @__PURE__ */ jsx2("p", { role: "status", children: "No connections are available." }),
-        Boolean(catalog?.length) && /* @__PURE__ */ jsx2("form", { onSubmit: submit, children: /* @__PURE__ */ jsxs2("fieldset", { disabled: view.busy, children: [
-          /* @__PURE__ */ jsx2("legend", { children: "Provider and ownership" }),
-          /* @__PURE__ */ jsxs2("label", { children: [
+        failed && /* @__PURE__ */ jsx4("p", { role: "alert", children: "Connections could not be loaded or started. Check setup status before retrying." }),
+        !catalog && !failed && /* @__PURE__ */ jsx4("p", { role: "status", children: "Loading connections\u2026" }),
+        catalog?.length === 0 && /* @__PURE__ */ jsx4("p", { role: "status", children: "No connections are available." }),
+        Boolean(catalog?.length) && /* @__PURE__ */ jsx4("form", { onSubmit: submit, children: /* @__PURE__ */ jsxs4("fieldset", { disabled: view.busy, children: [
+          /* @__PURE__ */ jsx4("legend", { children: "Provider and ownership" }),
+          presentation === "catalog" && !provider ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+            /* @__PURE__ */ jsxs4("label", { children: [
+              "Search connections",
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  type: "search",
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx4(
+              ConnectionCatalog,
+              {
+                query,
+                services: catalog.map((entry) => ({
+                  id: entry.id,
+                  name: entry.label,
+                  options: [
+                    {
+                      id: entry.id,
+                      name: entry.label,
+                      description: entry.reason,
+                      status: entry.readiness.replaceAll("_", " "),
+                      connected: false,
+                      onOpen: () => {
+                        if (!view.busy) {
+                          setProviderId(entry.id);
+                          setOwnership(entry.ownership.length === 1 ? entry.ownership[0] : "");
+                        }
+                      }
+                    }
+                  ]
+                }))
+              }
+            )
+          ] }) : null,
+          presentation === "catalog" && provider ? /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setProviderId("");
+                setOwnership("");
+              },
+              children: "Back to connections"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs4("label", { hidden: presentation === "catalog", children: [
             "Provider",
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs4(
               "select",
               {
                 required: true,
@@ -284,8 +532,8 @@ function ScopedChooser({ controller, returnUrl, className }) {
                   setOwnership("");
                 },
                 children: [
-                  /* @__PURE__ */ jsx2("option", { value: "", disabled: true, children: "Choose a provider" }),
-                  catalog.map((entry) => /* @__PURE__ */ jsxs2(
+                  /* @__PURE__ */ jsx4("option", { value: "", disabled: true, children: "Choose a provider" }),
+                  catalog.map((entry) => /* @__PURE__ */ jsxs4(
                     "option",
                     {
                       value: entry.id,
@@ -305,51 +553,62 @@ function ScopedChooser({ controller, returnUrl, className }) {
               }
             )
           ] }),
-          provider && /* @__PURE__ */ jsxs2("label", { children: [
-            "Ownership",
-            /* @__PURE__ */ jsxs2(
-              "select",
-              {
-                required: true,
-                value: ownership,
-                onChange: (event) => setOwnership(event.target.value),
-                children: [
-                  /* @__PURE__ */ jsx2("option", { value: "", disabled: true, children: "Choose ownership" }),
-                  provider.ownership.map((choice) => /* @__PURE__ */ jsx2("option", { value: choice, children: choice === "personal" ? "Personal \u2014 owned by you" : "Workspace \u2014 shared connection" }, choice))
-                ]
-              }
-            )
+          provider && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+            /* @__PURE__ */ jsx4("strong", { children: presentation === "catalog" ? provider.label : null }),
+            /* @__PURE__ */ jsxs4("label", { children: [
+              "Ownership",
+              /* @__PURE__ */ jsxs4(
+                "select",
+                {
+                  required: true,
+                  value: ownership,
+                  onChange: (event) => setOwnership(event.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx4("option", { value: "", disabled: true, children: "Choose ownership" }),
+                    provider.ownership.map((choice) => /* @__PURE__ */ jsx4("option", { value: choice, children: choice === "personal" ? "Personal \u2014 owned by you" : "Workspace \u2014 shared connection" }, choice))
+                  ]
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ jsx2("button", { type: "submit", disabled: !canBegin, children: "Start setup" })
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              hidden: presentation === "catalog" && !provider,
+              type: "submit",
+              disabled: !canBegin,
+              children: "Start setup"
+            }
+          )
         ] }) }),
-        /* @__PURE__ */ jsx2("button", { type: "button", disabled: view.busy, onClick: () => setLoad(load + 1), children: "Reload providers" })
+        /* @__PURE__ */ jsx4("button", { type: "button", disabled: view.busy, onClick: () => setLoad(load + 1), children: "Reload providers" })
       ]
     }
   );
 }
 
 // src/connect-accounts.tsx
-import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ConnectAccounts(props) {
-  const [scope, setScope] = useState3(props.controller);
-  const [generation, setGeneration] = useState3(0);
+  const [scope, setScope] = useState4(props.controller);
+  const [generation, setGeneration] = useState4(0);
   if (scope !== props.controller) {
     setScope(props.controller);
     setGeneration(generation + 1);
   }
-  return /* @__PURE__ */ jsx3(ScopedAccounts, { ...props }, generation);
+  return /* @__PURE__ */ jsx5(ScopedAccounts, { ...props }, generation);
 }
 function ScopedAccounts({ controller, className, returnUrl }) {
   const view = useConnect(controller);
-  const [accounts, setAccounts] = useState3(null);
-  const [selected, setSelected] = useState3(null);
-  const [busy, setBusy] = useState3(false);
-  const [error, setError] = useState3(false);
-  const [reload, setReload] = useState3(0);
+  const [accounts, setAccounts] = useState4(null);
+  const [selected, setSelected] = useState4(null);
+  const [busy, setBusy] = useState4(false);
+  const [error, setError] = useState4(false);
+  const [reload, setReload] = useState4(0);
   const mutation = useRef(null);
-  useEffect2(() => () => mutation.current?.abort(), []);
-  useEffect2(() => {
+  useEffect3(() => () => mutation.current?.abort(), []);
+  useEffect3(() => {
     const abort = new AbortController();
     setAccounts(null);
     setSelected(null);
@@ -406,18 +665,18 @@ function ScopedAccounts({ controller, className, returnUrl }) {
       setError(true);
     }
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "section",
     {
       className,
       "aria-label": "Connected accounts",
       "aria-busy": busy || view.busy || !accounts && !error,
       children: [
-        error && /* @__PURE__ */ jsx3("p", { role: "alert", children: "Account state could not be confirmed. Reload before trying again." }),
-        !accounts && !error && /* @__PURE__ */ jsx3("p", { role: "status", children: "Loading accounts\u2026" }),
-        accounts?.length === 0 && /* @__PURE__ */ jsx3("p", { role: "status", children: "No connected accounts." }),
-        accounts && accounts.length > 0 && /* @__PURE__ */ jsx3("ul", { children: accounts.map((account) => /* @__PURE__ */ jsxs3("li", { children: [
-          /* @__PURE__ */ jsxs3("span", { children: [
+        error && /* @__PURE__ */ jsx5("p", { role: "alert", children: "Account state could not be confirmed. Reload before trying again." }),
+        !accounts && !error && /* @__PURE__ */ jsx5("p", { role: "status", children: "Loading accounts\u2026" }),
+        accounts?.length === 0 && /* @__PURE__ */ jsx5("p", { role: "status", children: "No connected accounts." }),
+        accounts && accounts.length > 0 && /* @__PURE__ */ jsx5("ul", { children: accounts.map((account) => /* @__PURE__ */ jsxs5("li", { children: [
+          /* @__PURE__ */ jsxs5("span", { children: [
             account.label,
             " \u2014 ",
             account.providerId,
@@ -427,7 +686,7 @@ function ScopedAccounts({ controller, className, returnUrl }) {
             " ",
             account.status.replaceAll("_", " ")
           ] }),
-          returnUrl && /* @__PURE__ */ jsxs3(
+          returnUrl && /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -439,9 +698,9 @@ function ScopedAccounts({ controller, className, returnUrl }) {
               ]
             }
           ),
-          selected === `${account.providerId}:${account.id}` ? /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": `Disconnect ${account.label}`, children: [
-            /* @__PURE__ */ jsx3("p", { children: "This removes local OpenGeni access. It does not revoke consent at the provider." }),
-            /* @__PURE__ */ jsx3(
+          selected === `${account.providerId}:${account.id}` ? /* @__PURE__ */ jsxs5("div", { role: "group", "aria-label": `Disconnect ${account.label}`, children: [
+            /* @__PURE__ */ jsx5("p", { children: "This removes local OpenGeni access. It does not revoke consent at the provider." }),
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
@@ -450,8 +709,8 @@ function ScopedAccounts({ controller, className, returnUrl }) {
                 children: "Confirm disconnect"
               }
             ),
-            /* @__PURE__ */ jsx3("button", { type: "button", disabled: busy, onClick: () => setSelected(null), children: "Keep account" })
-          ] }) : /* @__PURE__ */ jsxs3(
+            /* @__PURE__ */ jsx5("button", { type: "button", disabled: busy, onClick: () => setSelected(null), children: "Keep account" })
+          ] }) : /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -464,38 +723,46 @@ function ScopedAccounts({ controller, className, returnUrl }) {
             }
           )
         ] }, `${account.providerId}:${account.id}`)) }),
-        /* @__PURE__ */ jsx3("button", { type: "button", disabled: busy, onClick: () => setReload((value) => value + 1), children: "Reload accounts" })
+        /* @__PURE__ */ jsx5("button", { type: "button", disabled: busy, onClick: () => setReload((value) => value + 1), children: "Reload accounts" })
       ]
     }
   );
 }
 
 // src/connect-panel.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ConnectPanel({
   returnUrl,
   title = "Connections",
   showAccounts = true,
+  presentation = "select",
   className,
   ...setup
 }) {
-  return /* @__PURE__ */ jsxs4("div", { className: ["og-connect", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx4("h2", { children: title }),
-    /* @__PURE__ */ jsx4(ConnectChooser, { controller: setup.controller, returnUrl }),
-    /* @__PURE__ */ jsx4(ConnectSetup, { ...setup }),
-    showAccounts && /* @__PURE__ */ jsx4(ConnectAccounts, { controller: setup.controller, returnUrl })
+  return /* @__PURE__ */ jsxs6("div", { className: ["og-connect", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx6("h2", { children: title }),
+    /* @__PURE__ */ jsx6(
+      ConnectChooser,
+      {
+        presentation,
+        controller: setup.controller,
+        returnUrl
+      }
+    ),
+    /* @__PURE__ */ jsx6(ConnectSetup, { ...setup }),
+    showAccounts && /* @__PURE__ */ jsx6(ConnectAccounts, { controller: setup.controller, returnUrl })
   ] });
 }
 
 // src/device-authorization.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function DeviceAuthorization(props) {
-  const [copied, setCopied] = useState4(false);
-  const [copyError, setCopyError] = useState4(false);
+  const [copied, setCopied] = useState5(false);
+  const [copyError, setCopyError] = useState5(false);
   const generation = useRef2(0);
   const timer = useRef2(null);
-  useEffect3(() => {
+  useEffect4(() => {
     generation.current++;
     setCopied(false);
     setCopyError(false);
@@ -534,11 +801,12 @@ function DeviceAuthorization(props) {
       href = props.verificationUri;
   } catch {
   }
-  return /* @__PURE__ */ jsxs5("section", { className: `og-connect ${props.className ?? ""}`, "aria-label": "Device authorization", children: [
-    /* @__PURE__ */ jsx5("p", { children: props.description ?? `Enter this code at ${props.providerLabel ?? "the provider"}.` }),
-    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx5("code", { ...props.codeAttributes, style: { overflowWrap: "anywhere" }, children: props.userCode }),
-      /* @__PURE__ */ jsx5(
+  if (props.render) return props.render({ copied, copyError, copy, verificationHref: href });
+  return /* @__PURE__ */ jsxs7("section", { className: `og-connect ${props.className ?? ""}`, "aria-label": "Device authorization", children: [
+    /* @__PURE__ */ jsx7("p", { children: props.description ?? `Enter this code at ${props.providerLabel ?? "the provider"}.` }),
+    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx7("code", { ...props.codeAttributes, style: { overflowWrap: "anywhere" }, children: props.userCode }),
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -547,19 +815,19 @@ function DeviceAuthorization(props) {
           children: copied ? "Copied" : "Copy code"
         }
       ),
-      href ? /* @__PURE__ */ jsxs5("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
+      href ? /* @__PURE__ */ jsxs7("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
         "Open ",
         props.providerLabel ?? "auth page"
-      ] }) : /* @__PURE__ */ jsx5("span", { role: "alert", children: "Authorization address unavailable." })
+      ] }) : /* @__PURE__ */ jsx7("span", { role: "alert", children: "Authorization address unavailable." })
     ] }),
-    copyError ? /* @__PURE__ */ jsx5("p", { role: "alert", children: "Couldn't copy the code. Copy it manually instead." }) : null,
-    /* @__PURE__ */ jsx5("p", { role: "status", children: "Waiting for authorization\u2026" })
+    copyError ? /* @__PURE__ */ jsx7("p", { role: "alert", children: "Couldn't copy the code. Copy it manually instead." }) : null,
+    /* @__PURE__ */ jsx7("p", { role: "status", children: "Waiting for authorization\u2026" })
   ] });
 }
 
 // src/identity-link-consent.tsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function IdentityLinkConsent({
   client,
   workspaceId,
@@ -568,14 +836,14 @@ function IdentityLinkConsent({
   className,
   onComplete
 }) {
-  const [link, setLink] = useState5(null);
-  const [preview, setPreview] = useState5(null);
-  const [selected, setSelected] = useState5([]);
-  const [busy, setBusy] = useState5(false);
-  const [error, setError] = useState5(false);
-  const [retry, setRetry] = useState5(0);
+  const [link, setLink] = useState6(null);
+  const [preview, setPreview] = useState6(null);
+  const [selected, setSelected] = useState6([]);
+  const [busy, setBusy] = useState6(false);
+  const [error, setError] = useState6(false);
+  const [retry, setRetry] = useState6(0);
   const generation = useRef3(0);
-  useEffect4(() => {
+  useEffect5(() => {
     const current = ++generation.current;
     setLink(null);
     setPreview(null);
@@ -619,43 +887,43 @@ function IdentityLinkConsent({
       if (generation.current === current) setBusy(false);
     }
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "section",
     {
       className: ["og-connect og-identity-link", className].filter(Boolean).join(" "),
       "aria-label": "Link your account",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx6("h2", { children: "Link your OpenGeni account" }),
-        /* @__PURE__ */ jsx6("p", { children: "Only continue if you started this request in a product you trust. Linking lets that product act as your account with the permissions you select. It does not merge accounts or move existing work." }),
-        preview && /* @__PURE__ */ jsxs6("dl", { children: [
-          /* @__PURE__ */ jsx6("dt", { children: "Organization" }),
-          /* @__PURE__ */ jsx6("dd", { children: preview.organizationId }),
-          /* @__PURE__ */ jsx6("dt", { children: "Product user" }),
-          /* @__PURE__ */ jsxs6("dd", { children: [
+        /* @__PURE__ */ jsx8("h2", { children: "Link your OpenGeni account" }),
+        /* @__PURE__ */ jsx8("p", { children: "Only continue if you started this request in a product you trust. Linking lets that product act as your account with the permissions you select. It does not merge accounts or move existing work." }),
+        preview && /* @__PURE__ */ jsxs8("dl", { children: [
+          /* @__PURE__ */ jsx8("dt", { children: "Organization" }),
+          /* @__PURE__ */ jsx8("dd", { children: preview.organizationId }),
+          /* @__PURE__ */ jsx8("dt", { children: "Product user" }),
+          /* @__PURE__ */ jsxs8("dd", { children: [
             preview.externalIdentity.externalId,
             " (",
             preview.externalIdentity.source,
             ")"
           ] }),
-          /* @__PURE__ */ jsx6("dt", { children: "Your OpenGeni identity" }),
-          /* @__PURE__ */ jsx6("dd", { children: preview.nativeSubjectId })
+          /* @__PURE__ */ jsx8("dt", { children: "Your OpenGeni identity" }),
+          /* @__PURE__ */ jsx8("dd", { children: preview.nativeSubjectId })
         ] }),
-        error && /* @__PURE__ */ jsxs6("div", { role: "alert", children: [
+        error && /* @__PURE__ */ jsxs8("div", { role: "alert", children: [
           "This request could not be completed. It may have expired, changed, or require you to sign in to the right organization.",
-          !link && /* @__PURE__ */ jsx6("button", { type: "button", disabled: busy, onClick: () => setRetry((value) => value + 1), children: "Try again" })
+          !link && /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy, onClick: () => setRetry((value) => value + 1), children: "Try again" })
         ] }),
-        !link && busy && /* @__PURE__ */ jsx6("p", { role: "status", children: "Loading the account-link request\u2026" }),
-        link?.status === "pending" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          /* @__PURE__ */ jsxs6("p", { children: [
+        !link && busy && /* @__PURE__ */ jsx8("p", { role: "status", children: "Loading the account-link request\u2026" }),
+        link?.status === "pending" && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+          /* @__PURE__ */ jsxs8("p", { children: [
             link.expiresAt ? `Access ends ${new Date(link.expiresAt).toLocaleString()}.` : "Access lasts until you or the product revoke this link.",
             " ",
             "Your current permissions still apply."
           ] }),
-          /* @__PURE__ */ jsxs6("fieldset", { disabled: busy, children: [
-            /* @__PURE__ */ jsx6("legend", { children: "Allow these permissions" }),
-            link.permissions.map((permission) => /* @__PURE__ */ jsxs6("label", { children: [
-              /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsxs8("fieldset", { disabled: busy, children: [
+            /* @__PURE__ */ jsx8("legend", { children: "Allow these permissions" }),
+            link.permissions.map((permission) => /* @__PURE__ */ jsxs8("label", { children: [
+              /* @__PURE__ */ jsx8(
                 "input",
                 {
                   type: "checkbox",
@@ -665,10 +933,10 @@ function IdentityLinkConsent({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx6("span", { children: permission.replaceAll(":", " \xB7 ") })
+              /* @__PURE__ */ jsx8("span", { children: permission.replaceAll(":", " \xB7 ") })
             ] }, permission))
           ] }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -677,34 +945,34 @@ function IdentityLinkConsent({
               children: busy ? "Saving\u2026" : "Allow selected access"
             }
           ),
-          /* @__PURE__ */ jsx6("p", { children: "You can close this page without granting access." })
+          /* @__PURE__ */ jsx8("p", { children: "You can close this page without granting access." })
         ] }),
-        link?.status === "active" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-          /* @__PURE__ */ jsx6("p", { role: "status", children: "Account linked. Return to your product to continue." }),
-          /* @__PURE__ */ jsx6("button", { type: "button", disabled: busy, onClick: () => void mutate(true), children: "Revoke this link" })
+        link?.status === "active" && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+          /* @__PURE__ */ jsx8("p", { role: "status", children: "Account linked. Return to your product to continue." }),
+          /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy, onClick: () => void mutate(true), children: "Revoke this link" })
         ] }),
-        link?.status === "revoked" && /* @__PURE__ */ jsx6("p", { role: "status", children: "Link revoked. Your OpenGeni account and existing work are unchanged." }),
-        link?.status === "expired" && /* @__PURE__ */ jsx6("p", { role: "status", children: "This request has expired. Start a new request from your product." })
+        link?.status === "revoked" && /* @__PURE__ */ jsx8("p", { role: "status", children: "Link revoked. Your OpenGeni account and existing work are unchanged." }),
+        link?.status === "expired" && /* @__PURE__ */ jsx8("p", { role: "status", children: "This request has expired. Start a new request from your product." })
       ]
     }
   );
 }
 
 // src/identity-link-accounts.tsx
-import { useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function IdentityLinkAccounts({
   client,
   workspaceId
 }) {
-  const [links, setLinks] = useState6([]);
-  const [cursor, setCursor] = useState6(null);
-  const [busy, setBusy] = useState6(true);
-  const [error, setError] = useState6(false);
-  const [revision, setRevision] = useState6(0);
+  const [links, setLinks] = useState7([]);
+  const [cursor, setCursor] = useState7(null);
+  const [busy, setBusy] = useState7(true);
+  const [error, setError] = useState7(false);
+  const [revision, setRevision] = useState7(0);
   const generation = useRef4(0);
   const inFlight = useRef4(false);
-  useEffect5(() => {
+  useEffect6(() => {
     const current = ++generation.current;
     inFlight.current = true;
     setLinks([]);
@@ -761,43 +1029,375 @@ function IdentityLinkAccounts({
       }
     }
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     "section",
     {
       className: "og-connect og-identity-link",
       "aria-label": "Linked product access",
       "aria-busy": busy,
       children: [
-        /* @__PURE__ */ jsx7("h2", { children: "Linked product access" }),
-        /* @__PURE__ */ jsx7("p", { children: "Manage products allowed to act as your account in this organization. Revoking a link stops future linked access; it does not delete your work or undo an operation already started." }),
-        error && /* @__PURE__ */ jsxs7("div", { role: "alert", children: [
+        /* @__PURE__ */ jsx9("h2", { children: "Linked product access" }),
+        /* @__PURE__ */ jsx9("p", { children: "Manage products allowed to act as your account in this organization. Revoking a link stops future linked access; it does not delete your work or undo an operation already started." }),
+        error && /* @__PURE__ */ jsxs9("div", { role: "alert", children: [
           "Could not update account links. Reload to see current access.",
-          /* @__PURE__ */ jsx7("button", { type: "button", disabled: busy, onClick: () => setRevision((value) => value + 1), children: "Reload links" })
+          /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => setRevision((value) => value + 1), children: "Reload links" })
         ] }),
-        busy && /* @__PURE__ */ jsx7("p", { role: "status", children: "Loading account links\u2026" }),
-        !busy && !error && links.length === 0 && /* @__PURE__ */ jsx7("p", { children: "No products have linked access to this account." }),
-        /* @__PURE__ */ jsx7("ul", { children: links.map((link) => /* @__PURE__ */ jsxs7("li", { children: [
-          /* @__PURE__ */ jsxs7("p", { children: [
+        busy && /* @__PURE__ */ jsx9("p", { role: "status", children: "Loading account links\u2026" }),
+        !busy && !error && links.length === 0 && /* @__PURE__ */ jsx9("p", { children: "No products have linked access to this account." }),
+        /* @__PURE__ */ jsx9("ul", { children: links.map((link) => /* @__PURE__ */ jsxs9("li", { children: [
+          /* @__PURE__ */ jsxs9("p", { children: [
             link.externalIdentity?.source || "Product identity",
             " ",
-            /* @__PURE__ */ jsx7("code", { children: link.externalIdentity?.externalId ?? link.externalIdentityId })
+            /* @__PURE__ */ jsx9("code", { children: link.externalIdentity?.externalId ?? link.externalIdentityId })
           ] }),
-          /* @__PURE__ */ jsxs7("p", { children: [
+          /* @__PURE__ */ jsxs9("p", { children: [
             "Status: ",
             link.status,
             ".",
             " ",
             link.expiresAt ? `Expires ${new Date(link.expiresAt).toLocaleString()}.` : "No automatic expiry."
           ] }),
-          /* @__PURE__ */ jsx7("p", { children: link.permissions.join(", ") }),
-          (link.status === "active" || link.status === "pending") && /* @__PURE__ */ jsx7("button", { type: "button", disabled: busy, onClick: () => void act(link), children: "Revoke access" })
+          /* @__PURE__ */ jsx9("p", { children: link.permissions.join(", ") }),
+          (link.status === "active" || link.status === "pending") && /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => void act(link), children: "Revoke access" })
         ] }, link.id)) }),
-        cursor && /* @__PURE__ */ jsx7("button", { type: "button", disabled: busy, onClick: () => void act(), children: "Load more links" })
+        cursor && /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => void act(), children: "Load more links" })
       ]
     }
   );
 }
 
+// src/connection-installed.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function ConnectionInstalled({
+  items,
+  title = "Connected",
+  className = ""
+}) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs10("section", { "aria-label": title, className: `og-connection-installed ${className}`, children: [
+    /* @__PURE__ */ jsxs10("h2", { children: [
+      title,
+      " ",
+      /* @__PURE__ */ jsx10("span", { children: items.length })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { children: items.map((item) => /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        type: "button",
+        onClick: item.onOpen,
+        title: item.status,
+        "aria-label": `${item.name} \xB7 ${item.status}`,
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsx10("span", { children: item.name }),
+          item.needsAttention ? /* @__PURE__ */ jsx10("span", { "aria-label": "Needs attention", children: "!" }) : null
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
+
+// src/connection-type-picker.tsx
+import { useId } from "react";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function ConnectionTypePicker({
+  value,
+  onChange,
+  disabled = false
+}) {
+  const name = useId();
+  return /* @__PURE__ */ jsxs11("fieldset", { className: "og-connection-type-picker", disabled, children: [
+    /* @__PURE__ */ jsx11("legend", { children: "Connection type" }),
+    [
+      ["mcp", "MCP server"],
+      ["openapi", "OpenAPI"],
+      ["graphql", "GraphQL"]
+    ].map(([type, label]) => /* @__PURE__ */ jsxs11("label", { "data-selected": value === type, children: [
+      /* @__PURE__ */ jsx11(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: type,
+          checked: value === type,
+          onChange: () => onChange(type)
+        }
+      ),
+      label
+    ] }, type))
+  ] });
+}
+
+// src/connection-logo.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function ConnectionLogo({
+  src,
+  name,
+  size = 40
+}) {
+  const [failedSrc, setFailedSrc] = useState8(null);
+  return /* @__PURE__ */ jsx12("span", { className: "og-connection-logo", "aria-hidden": "true", style: { width: size, height: size }, children: src && src !== failedSrc ? /* @__PURE__ */ jsx12("img", { src, alt: "", loading: "lazy", decoding: "async", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx12("span", { children: name.split(/\s+/).map((part) => part[0]).join("").slice(0, 2).toUpperCase() }) });
+}
+
+// src/plugin-discovery.tsx
+import { useEffect as useEffect7, useRef as useRef5, useState as useState9 } from "react";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function PluginDiscovery(props) {
+  const [provider, setProvider] = useState9("");
+  return /* @__PURE__ */ jsxs12("section", { className: "og-plugin-discovery", "aria-label": "Discover plugins", children: [
+    /* @__PURE__ */ jsxs12("header", { children: [
+      /* @__PURE__ */ jsx13("h3", { children: "Browse plugins" }),
+      /* @__PURE__ */ jsx13("div", { className: "og-plugin-filters", role: "group", "aria-label": "Plugin registry", children: [
+        { value: "", label: "All" },
+        { value: "openai", label: "OpenAI plugin registry" },
+        { value: "anthropic", label: "Anthropic plugin registry" }
+      ].map((option) => /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": provider === option.value,
+          onClick: () => setProvider(option.value),
+          children: option.label
+        },
+        option.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx13(
+      Results,
+      {
+        ...props,
+        provider
+      },
+      `${props.workspaceId}:${props.query}:${provider}`
+    )
+  ] });
+}
+function Results({
+  client,
+  workspaceId,
+  query,
+  provider,
+  onOpen
+}) {
+  const [items, setItems] = useState9([]);
+  const [offset, setOffset] = useState9(0);
+  const [next, setNext] = useState9(null);
+  const [total, setTotal] = useState9(0);
+  const [loading, setLoading] = useState9(true);
+  const [error, setError] = useState9(false);
+  const [retry, setRetry] = useState9(0);
+  const sentinel = useRef5(null);
+  useEffect7(() => {
+    let active = true;
+    setLoading(true);
+    setError(false);
+    const timer = setTimeout(
+      () => {
+        void client.discoverPlugins(workspaceId, { query, provider, offset }).then(
+          (page) => {
+            if (!active) return;
+            setItems((previous) => offset ? [...previous, ...page.items] : page.items);
+            setTotal(page.total);
+            setNext(page.nextOffset);
+            setLoading(false);
+          },
+          () => {
+            if (active) {
+              setError(true);
+              setLoading(false);
+            }
+          }
+        );
+      },
+      offset ? 0 : 200
+    );
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [client, workspaceId, query, provider, offset, retry]);
+  useEffect7(() => {
+    if (loading || error || next === null || !sentinel.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) setOffset(next);
+      },
+      { rootMargin: "200px" }
+    );
+    observer.observe(sentinel.current);
+    return () => observer.disconnect();
+  }, [loading, error, next]);
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    !loading && !error ? /* @__PURE__ */ jsx13("p", { role: "status", children: total ? `${total} plugins` : "No matching plugins. Try another search or registry." }) : null,
+    /* @__PURE__ */ jsx13("div", { className: "og-plugin-discovery-grid", children: items.map((item) => /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        className: "og-plugin-discovery-row",
+        type: "button",
+        onClick: () => onOpen(item),
+        children: [
+          item.logoUrl ? /* @__PURE__ */ jsx13(
+            "img",
+            {
+              src: item.logoUrl,
+              alt: "",
+              loading: "lazy",
+              onError: (event) => {
+                event.currentTarget.style.display = "none";
+              }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs12("span", { className: "og-plugin-copy", children: [
+            /* @__PURE__ */ jsxs12("span", { className: "og-plugin-title", children: [
+              /* @__PURE__ */ jsx13("strong", { children: item.displayName.replace(/-/g, " ") }),
+              /* @__PURE__ */ jsx13("small", { children: item.provider === "openai" ? "OpenAI plugin registry" : "Anthropic plugin registry" })
+            ] }),
+            /* @__PURE__ */ jsx13("span", { className: "og-plugin-description", children: item.description }),
+            item.category ? /* @__PURE__ */ jsx13("span", { className: "og-plugin-category", children: item.category }) : null
+          ] }),
+          /* @__PURE__ */ jsx13("span", { className: "og-plugin-open", "aria-hidden": "true", children: "\u203A" })
+        ]
+      },
+      item.id
+    )) }),
+    loading ? /* @__PURE__ */ jsx13("p", { role: "status", children: "Loading plugins\u2026" }) : null,
+    error ? /* @__PURE__ */ jsxs12("p", { role: "alert", children: [
+      "Couldn\u2019t load plugins.",
+      " ",
+      /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => setRetry((value) => value + 1), children: "Retry" })
+    ] }) : null,
+    /* @__PURE__ */ jsx13("div", { ref: sentinel, children: next !== null && !loading && !error ? /* @__PURE__ */ jsx13("button", { className: "og-plugin-more", type: "button", onClick: () => setOffset(next), children: "Show more plugins" }) : null })
+  ] });
+}
+
+// src/plugin-details.tsx
+import { useState as useState10 } from "react";
+import { pluginMcpUnavailableReason } from "@opengeni/sdk";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var componentLabels = {
+  skills: "Skills",
+  mcp: "MCP connections",
+  apps: "Hosted apps",
+  hooks: "Hooks",
+  agents: "Agents",
+  commands: "Commands",
+  lsp: "Language servers"
+};
+var EMPTY_CONNECTIONS = {};
+function PluginDetails({
+  item,
+  onInstall,
+  busy = false,
+  installed = false,
+  error,
+  connections = EMPTY_CONNECTIONS,
+  onConnect
+}) {
+  const supported = (server) => pluginMcpUnavailableReason(server) === null;
+  const contentsUnknown = item.skills == null || item.mcpServers == null;
+  const installableCount = (item.skills?.length ?? 0) + (item.mcpServers?.filter(supported).length ?? 0);
+  const exceedsInstallLimit = installableCount > 64;
+  const installable = installableCount > 0 && !exceedsInstallLimit;
+  const [expanded, setExpanded] = useState10(false);
+  const [logoFailed, setLogoFailed] = useState10(false);
+  const description = item.longDescription || item.description;
+  const lengthy = description.length > 700;
+  const registryLabel = item.provider === "openai" ? "OpenAI plugin registry" : item.provider === "anthropic" ? "Anthropic plugin registry" : "Custom source";
+  return /* @__PURE__ */ jsxs13("article", { className: "og-plugin-details", children: [
+    /* @__PURE__ */ jsxs13("header", { className: "og-plugin-details-header", children: [
+      item.logoUrl && !logoFailed ? /* @__PURE__ */ jsx14("img", { src: item.logoUrl, alt: "", onError: () => setLogoFailed(true) }) : null,
+      /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx14("h2", { children: item.displayName.replace(/-/g, " ") }),
+        item.author?.name ? /* @__PURE__ */ jsxs13("p", { children: [
+          "By ",
+          item.author.name
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "og-plugin-details-meta", children: [
+      /* @__PURE__ */ jsx14("span", { children: registryLabel }),
+      item.category ? /* @__PURE__ */ jsx14("span", { children: item.category }) : null,
+      item.version ? /* @__PURE__ */ jsxs13("span", { children: [
+        "v",
+        item.version
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs13("section", { className: "og-plugin-details-members", children: [
+      /* @__PURE__ */ jsxs13("h3", { children: [
+        "Skills ",
+        /* @__PURE__ */ jsx14("span", { children: item.skills?.length ?? "\u2014" })
+      ] }),
+      item.skills?.length ? /* @__PURE__ */ jsx14("ul", { children: item.skills.map((skill) => /* @__PURE__ */ jsx14("li", { children: /* @__PURE__ */ jsxs13("a", { href: skill.sourceUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        /* @__PURE__ */ jsx14("strong", { children: skill.name }),
+        /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "\u2197" })
+      ] }) }, skill.sourceUrl)) }) : /* @__PURE__ */ jsx14("p", { children: item.skills ? "No bundled skills." : "Contents haven\u2019t been indexed for this repository." }),
+      /* @__PURE__ */ jsxs13("h3", { children: [
+        "MCP servers ",
+        /* @__PURE__ */ jsx14("span", { children: item.mcpServers?.length ?? "\u2014" })
+      ] }),
+      item.mcpServers?.length ? /* @__PURE__ */ jsx14("ul", { children: item.mcpServers.map((server) => {
+        const connected = Boolean(server.endpoint && connections[server.endpoint]);
+        const unavailableReason = connected ? null : pluginMcpUnavailableReason(server);
+        return /* @__PURE__ */ jsxs13(
+          "li",
+          {
+            className: unavailableReason ? "og-plugin-member-disabled" : void 0,
+            children: [
+              /* @__PURE__ */ jsxs13("div", { className: "og-plugin-server-heading", children: [
+                /* @__PURE__ */ jsx14("strong", { children: server.name }),
+                !unavailableReason && onConnect ? /* @__PURE__ */ jsx14("button", { type: "button", disabled: busy, onClick: () => onConnect(server), children: connected ? "Manage" : "Connect" }) : null
+              ] }),
+              /* @__PURE__ */ jsxs13("small", { children: [
+                connected ? "Connected \xB7 " : "",
+                unavailableReason ?? server.endpoint
+              ] })
+            ]
+          },
+          server.name
+        );
+      }) }) : /* @__PURE__ */ jsx14("p", { children: item.mcpServers ? "No bundled MCP servers." : "Server details haven\u2019t been indexed." }),
+      item.components?.some((component) => !["skills", "mcp"].includes(component)) ? /* @__PURE__ */ jsxs13("div", { className: "og-plugin-details-other", children: [
+        "Not installed here:",
+        " ",
+        item.components.filter((component) => !["skills", "mcp"].includes(component)).map((component) => componentLabels[component] ?? component).join(", ")
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs13("section", { className: "og-plugin-details-overview", "aria-label": "Overview", children: [
+      /* @__PURE__ */ jsx14("div", { className: lengthy && !expanded ? "og-plugin-details-excerpt" : void 0, children: /* @__PURE__ */ jsx14(Markdown, { children: description }) }),
+      lengthy ? /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          className: "og-plugin-details-more",
+          "aria-expanded": expanded,
+          onClick: () => setExpanded((value) => !value),
+          children: expanded ? "Show less" : "Read more"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs13("footer", { children: [
+      item.sourceUrl ? /* @__PURE__ */ jsxs13("a", { href: item.sourceUrl, target: "_blank", rel: "noopener noreferrer", children: [
+        "View repository ",
+        /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "\u2197" })
+      ] }) : null,
+      onInstall ? /* @__PURE__ */ jsx14(
+        "button",
+        {
+          className: "og-plugin-install",
+          type: "button",
+          disabled: !installable || busy || installed,
+          onClick: onInstall,
+          children: installed ? "Installed" : busy ? "Installing\u2026" : "Install plugin"
+        }
+      ) : null,
+      error ? /* @__PURE__ */ jsx14("p", { role: "alert", children: error }) : null,
+      exceedsInstallLimit ? /* @__PURE__ */ jsx14("p", { children: "This plugin exceeds the current 64-component installation limit." }) : contentsUnknown ? /* @__PURE__ */ jsx14("p", { children: "Plugin contents are unavailable. Installation is disabled until the repository can be inspected." }) : !installable ? /* @__PURE__ */ jsx14("p", { children: "No installable skills or remote MCP servers." }) : /* @__PURE__ */ jsx14("p", { children: "Installs skills and adds connection references. Connect each server separately." })
+    ] })
+  ] });
+}
+
 // src/connect.ts
 function useConnect(controller) {
   const snapshot = useSyncExternalStore(
@@ -823,9 +1423,18 @@ export {
   ConnectChooser,
   ConnectPanel,
   ConnectSetup,
+  ConnectionCatalog,
+  ConnectionInstalled,
+  ConnectionLogo,
+  ConnectionOptionRow,
+  ConnectionServiceRow,
+  ConnectionTypePicker,
   DeviceAuthorization,
   IdentityLinkAccounts,
   IdentityLinkConsent,
+  PluginDetails,
+  PluginDiscovery,
+  SkillDiscovery,
   useConnect
 };
 //# sourceMappingURL=connect.js.map