@tangle-network/sandbox-ui 0.113.7 → 0.114.0

package/dist/integrations.js

@@ -1,692 +1,510 @@
-import {
-  ProviderIcon,
-  normalizeProviderId,
-  providerLogoCandidates
-} from "./chunk-3LIXVEEE.js";
-import "./chunk-CZ7CSFO4.js";
-
-// src/integrations/integrations-panel.tsx
-import * as React from "react";
-import {
-  Button,
-  Card,
-  CardContent,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  EmptyState
-} from "@tangle-network/ui/primitives";
-import { cn } from "@tangle-network/ui/utils";
-import { Check, ExternalLink, MoreVertical, Search, Unplug } from "lucide-react";
-import { focusFieldWithin, focusRing } from "@tangle-network/ui/utils";
+import { n as normalizeProviderId, r as providerLogoCandidates, t as ProviderIcon } from "./provider-logo-DjqmConF.js";
+import { Button, Card, CardContent, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState } from "@tangle-network/ui/primitives";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_FEATURED_IDS = [
-  "gmail",
-  "google-sheets",
-  "google-drive",
-  "google-docs",
-  "google-calendar",
-  "outlook",
-  "outlook-mail",
-  "microsoft-calendar",
-  "microsoft-excel",
-  "microsoft-teams",
-  "slack",
-  "discord",
-  "hubspot",
-  "salesforce",
-  "notion",
-  "airtable",
-  "github",
-  "gitlab",
-  "linear",
-  "jira",
-  "asana",
-  "stripe",
-  "stripe-pack",
-  "twilio",
-  "twilio-sms",
-  "linkedin",
-  "zoom",
-  "shopify",
-  "mailchimp",
-  "zendesk",
-  "intercom",
-  "dropbox",
-  "webhook"
+import * as React$1 from "react";
+import { cn, focusFieldWithin, focusRing } from "@tangle-network/ui/utils";
+import { Check, ExternalLink, MoreVertical, Search, Unplug } from "lucide-react";
+//#region src/integrations/integrations-panel.tsx
+const DEFAULT_FEATURED_IDS = [
+	"gmail",
+	"google-sheets",
+	"google-drive",
+	"google-docs",
+	"google-calendar",
+	"outlook",
+	"outlook-mail",
+	"microsoft-calendar",
+	"microsoft-excel",
+	"microsoft-teams",
+	"slack",
+	"discord",
+	"hubspot",
+	"salesforce",
+	"notion",
+	"airtable",
+	"github",
+	"gitlab",
+	"linear",
+	"jira",
+	"asana",
+	"stripe",
+	"stripe-pack",
+	"twilio",
+	"twilio-sms",
+	"linkedin",
+	"zoom",
+	"shopify",
+	"mailchimp",
+	"zendesk",
+	"intercom",
+	"dropbox",
+	"webhook"
 ];
 function defaultConnectorOf(provider) {
-  return provider.connectors?.[0]?.connectorId ?? provider.providerId;
+	return provider.connectors?.[0]?.connectorId ?? provider.providerId;
 }
-var TILE_GRID_CLASS = "grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6";
-var DEFAULT_SKELETON_COUNT = 12;
-var TILE_BOX_CLASS = "flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center";
-function IntegrationsToolbar({
-  query,
-  onQueryChange,
-  sort,
-  onSortChange
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex flex-1 items-center gap-2 rounded-lg border bg-card px-3 py-2 ${focusFieldWithin}`, children: [
-      /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: query,
-          onChange: (e) => onQueryChange(e.target.value),
-          "aria-label": "Search integrations",
-          placeholder: "Search integrations...",
-          autoFocus: true,
-          "data-testid": "integration-search",
-          className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "group",
-        "aria-label": "Sort integrations",
-        className: "flex shrink-0 items-center gap-1 rounded-lg border border-border bg-card p-1",
-        children: [
-          ["featured", "Featured"],
-          ["alpha", "A\u2013Z"]
-        ].map(([value, label]) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-pressed": sort === value,
-            onClick: () => onSortChange(value),
-            "data-testid": `sort-${value}`,
-            className: cn(
-              "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-              focusRing,
-              sort === value ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"
-            ),
-            children: label
-          },
-          value
-        ))
-      }
-    )
-  ] });
+const TILE_GRID_CLASS = "grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6";
+const DEFAULT_SKELETON_COUNT = 12;
+const TILE_BOX_CLASS = "flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center";
+/**
+* Search + sort row. Rendered by the skeleton AND the loaded panel from this
+* one component, which is the whole point: the row is ~74px tall with a 16px
+* gap under it, and a skeleton that omitted it under-reserved the page by that
+* much on every single load — the panel visibly dropped when data arrived.
+* Height parity here is structural, not a matched pair of magic numbers.
+*
+* The controls stay live while loading. They drive local state only (`query`,
+* `sort`), so typing during the fetch is applied the moment the catalog lands
+* instead of being thrown away — and keeping the same input element mounted
+* across the transition is what preserves its autofocus.
+*/
+function IntegrationsToolbar({ query, onQueryChange, sort, onSortChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `flex flex-1 items-center gap-2 rounded-lg border bg-card px-3 py-2 ${focusFieldWithin}`,
+			children: [/* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				value: query,
+				onChange: (e) => onQueryChange(e.target.value),
+				"aria-label": "Search integrations",
+				placeholder: "Search integrations...",
+				autoFocus: true,
+				"data-testid": "integration-search",
+				className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": "Sort integrations",
+			className: "flex shrink-0 items-center gap-1 rounded-lg border border-border bg-card p-1",
+			children: [["featured", "Featured"], ["alpha", "A–Z"]].map(([value, label]) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-pressed": sort === value,
+				onClick: () => onSortChange(value),
+				"data-testid": `sort-${value}`,
+				className: cn("rounded-md px-2.5 py-1 text-xs font-medium transition-colors", focusRing, sort === value ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"),
+				children: label
+			}, value))
+		})]
+	});
 }
-var LOGO_SIZE = 48;
+const LOGO_SIZE = 48;
 function buildConnectionIndex(connections) {
-  const index = /* @__PURE__ */ new Map();
-  for (const conn of connections) {
-    if (conn.status === "revoked") continue;
-    index.set(`${conn.providerId}:${conn.connectorId ?? conn.providerId}`, conn);
-  }
-  return index;
+	const index = /* @__PURE__ */ new Map();
+	for (const conn of connections) {
+		if (conn.status === "revoked") continue;
+		index.set(`${conn.providerId}:${conn.connectorId ?? conn.providerId}`, conn);
+	}
+	return index;
 }
 function makeFeaturedRank(featuredIds) {
-  const rank = /* @__PURE__ */ new Map();
-  featuredIds.forEach((id, i) => {
-    const norm = normalizeProviderId(id);
-    if (!rank.has(id)) rank.set(id, i);
-    if (!rank.has(norm)) rank.set(norm, i);
-  });
-  return rank;
+	const rank = /* @__PURE__ */ new Map();
+	featuredIds.forEach((id, i) => {
+		const norm = normalizeProviderId(id);
+		if (!rank.has(id)) rank.set(id, i);
+		if (!rank.has(norm)) rank.set(norm, i);
+	});
+	return rank;
 }
 function rankOf(provider, rank) {
-  const raw = provider.providerId.toLowerCase();
-  const direct = rank.get(raw);
-  if (direct !== void 0) return direct;
-  const norm = rank.get(normalizeProviderId(raw));
-  return norm ?? Number.MAX_SAFE_INTEGER;
+	const raw = provider.providerId.toLowerCase();
+	const direct = rank.get(raw);
+	if (direct !== void 0) return direct;
+	return rank.get(normalizeProviderId(raw)) ?? Number.MAX_SAFE_INTEGER;
 }
 function displayNameOf(provider) {
-  return provider.displayName ?? provider.title ?? provider.providerId.replace(/[-_]/g, " ");
+	return provider.displayName ?? provider.title ?? provider.providerId.replace(/[-_]/g, " ");
 }
 function matchesQuery(provider, q) {
-  const hay = `${displayNameOf(provider)} ${provider.providerId} ${provider.description ?? ""}`.toLowerCase();
-  return hay.includes(q);
+	return `${displayNameOf(provider)} ${provider.providerId} ${provider.description ?? ""}`.toLowerCase().includes(q);
 }
-function IntegrationsPanel({
-  catalog,
-  connections,
-  healthByConnectionId,
-  isLoading,
-  error,
-  onConnect,
-  onDisconnect,
-  getManageHref,
-  onManage,
-  emptyCatalogLabel = "No integrations available yet.",
-  featuredIds = DEFAULT_FEATURED_IDS,
-  defaultSort = "featured",
-  skeletonCount = DEFAULT_SKELETON_COUNT,
-  className
-}) {
-  const [query, setQuery] = React.useState("");
-  const [sort, setSort] = React.useState(defaultSort);
-  const [disconnectTarget, setDisconnectTarget] = React.useState(null);
-  const [isDisconnecting, setIsDisconnecting] = React.useState(false);
-  const [disconnectError, setDisconnectError] = React.useState(
-    null
-  );
-  const activeDisconnect = React.useRef(0);
-  const connectionIndex = React.useMemo(
-    () => buildConnectionIndex(connections),
-    [connections]
-  );
-  const featuredRank = React.useMemo(
-    () => makeFeaturedRank(featuredIds),
-    [featuredIds]
-  );
-  const visible = React.useMemo(() => {
-    const q = query.trim().toLowerCase();
-    const filtered = q ? catalog.filter((p) => matchesQuery(p, q)) : catalog;
-    const sorted = [...filtered];
-    sorted.sort((a, b) => {
-      if (sort === "featured") {
-        const ra = rankOf(a, featuredRank);
-        const rb = rankOf(b, featuredRank);
-        if (ra !== rb) return ra - rb;
-      }
-      return displayNameOf(a).localeCompare(displayNameOf(b));
-    });
-    return sorted;
-  }, [catalog, query, sort, featuredRank]);
-  const closeDisconnect = React.useCallback(() => {
-    activeDisconnect.current += 1;
-    setIsDisconnecting(false);
-    setDisconnectTarget(null);
-    setDisconnectError(null);
-  }, []);
-  const [connectingId, setConnectingId] = React.useState(null);
-  const [connectError, setConnectError] = React.useState(null);
-  const activeConnect = React.useRef(0);
-  const startConnect = React.useCallback(
-    async (input) => {
-      const reqId = activeConnect.current += 1;
-      setConnectError(null);
-      let pending;
-      try {
-        pending = onConnect(input);
-      } catch (e) {
-        setConnectError(
-          e instanceof Error ? e.message : "Failed to start the connection."
-        );
-        return;
-      }
-      if (typeof pending?.then !== "function") {
-        return;
-      }
-      setConnectingId(input.providerId);
-      try {
-        await pending;
-      } catch (e) {
-        if (activeConnect.current !== reqId) return;
-        setConnectError(
-          e instanceof Error ? e.message : "Failed to start the connection."
-        );
-      } finally {
-        if (activeConnect.current === reqId) setConnectingId(null);
-      }
-    },
-    [onConnect]
-  );
-  const confirmDisconnect = React.useCallback(async () => {
-    if (!disconnectTarget) return;
-    const reqId = activeDisconnect.current += 1;
-    setIsDisconnecting(true);
-    setDisconnectError(null);
-    try {
-      await Promise.resolve(onDisconnect(disconnectTarget.connectionId));
-      if (activeDisconnect.current !== reqId) return;
-      setDisconnectTarget(null);
-    } catch (e) {
-      if (activeDisconnect.current !== reqId) return;
-      setDisconnectError(
-        e instanceof Error ? e.message : "Failed to disconnect."
-      );
-    } finally {
-      if (activeDisconnect.current === reqId) setIsDisconnecting(false);
-    }
-  }, [disconnectTarget, onDisconnect]);
-  if (error) {
-    return /* @__PURE__ */ jsx(Card, { className: cn("border-destructive/50", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive", children: [
-      "Failed to load integrations: ",
-      error.message
-    ] }) }) });
-  }
-  if (isLoading && catalog.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), "data-testid": "integrations-skeleton", children: [
-      /* @__PURE__ */ jsx(
-        IntegrationsToolbar,
-        {
-          query,
-          onQueryChange: setQuery,
-          sort,
-          onSortChange: setSort
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: TILE_GRID_CLASS, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "aria-hidden": true,
-          className: cn(
-            TILE_BOX_CLASS,
-            "animate-pulse border-border bg-muted/40"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "shrink-0 rounded-2xl bg-muted",
-                style: { width: LOGO_SIZE, height: LOGO_SIZE }
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-3/4 rounded bg-muted" }) })
-          ]
-        },
-        i
-      )) })
-    ] });
-  }
-  if (catalog.length === 0) {
-    return /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: "No integrations",
-        description: emptyCatalogLabel,
-        className
-      }
-    );
-  }
-  const disconnectAccountLabel = disconnectTarget?.accountDisplay;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), "data-testid": "integrations-panel", children: [
-    /* @__PURE__ */ jsx(
-      IntegrationsToolbar,
-      {
-        query,
-        onQueryChange: setQuery,
-        sort,
-        onSortChange: setSort
-      }
-    ),
-    connectError ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "alert",
-        "data-testid": "integration-connect-error",
-        className: "mb-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive",
-        children: connectError
-      }
-    ) : null,
-    visible.length === 0 ? /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: "No matches",
-        description: `No integrations match "${query.trim()}".`
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: TILE_GRID_CLASS, children: visible.map((provider) => {
-      const connectorId = defaultConnectorOf(provider);
-      const live = connectionIndex.get(
-        `${provider.providerId}:${connectorId}`
-      );
-      const name = displayNameOf(provider);
-      const connected = Boolean(live);
-      if (connected && live) {
-        const manageHref = getManageHref?.(live);
-        const canManage = Boolean(manageHref) || Boolean(onManage);
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-testid": `integration-${provider.providerId}`,
-            "data-connected": "true",
-            title: live.accountDisplay ? `${name} \u2014 ${live.accountDisplay}` : name,
-            className: cn(
-              TILE_BOX_CLASS,
-              "group relative",
-              "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"
-            ),
-            children: [
-              manageHref ? /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: manageHref,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  "aria-label": `Manage ${name} (opens in new window)`,
-                  "data-testid": `manage-${provider.providerId}`,
-                  className: `absolute inset-0 z-10 rounded-xl ${focusRing}`
-                }
-              ) : null,
-              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }),
-              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none flex w-full min-w-0 flex-col items-center gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  ProviderIcon,
-                  {
-                    id: provider.providerId,
-                    iconUrl: provider.iconUrl,
-                    displayName: displayNameOf(provider),
-                    size: LOGO_SIZE,
-                    className: "rounded-2xl"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full flex-col justify-center leading-4", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "w-full text-xs font-medium text-foreground",
-                        live.accountDisplay ? "truncate" : "line-clamp-2"
-                      ),
-                      children: name
-                    }
-                  ),
-                  live.accountDisplay ? /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
-                      "data-testid": `account-${provider.providerId}`,
-                      children: live.accountDisplay
-                    }
-                  ) : null
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-testid": `menu-${provider.providerId}`,
-                    "aria-label": `More actions for ${name}`,
-                    title: "More actions",
-                    className: `absolute right-1.5 top-1.5 z-20 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground ${focusRing}`,
-                    children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs(
-                  DropdownMenuContent,
-                  {
-                    side: "right",
-                    align: "start",
-                    className: "min-w-[160px] rounded-md",
-                    children: [
-                      manageHref ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(
-                        "a",
-                        {
-                          href: manageHref,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          "data-testid": `manage-item-${provider.providerId}`,
-                          children: [
-                            /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
-                            " Manage"
-                          ]
-                        }
-                      ) }) : onManage ? /* @__PURE__ */ jsxs(
-                        DropdownMenuItem,
-                        {
-                          "data-testid": `manage-item-${provider.providerId}`,
-                          onClick: () => onManage({
-                            connectionId: live.id,
-                            providerId: provider.providerId
-                          }),
-                          children: [
-                            /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
-                            " Manage"
-                          ]
-                        }
-                      ) : null,
-                      canManage ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
-                      /* @__PURE__ */ jsxs(
-                        DropdownMenuItem,
-                        {
-                          "data-testid": `disconnect-${provider.providerId}`,
-                          className: "text-destructive focus:text-destructive",
-                          onClick: () => setDisconnectTarget({
-                            connectionId: live.id,
-                            name,
-                            accountDisplay: live.accountDisplay
-                          }),
-                          children: [
-                            /* @__PURE__ */ jsx(Unplug, { className: "mr-2 h-4 w-4" }),
-                            " Disconnect"
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
-            ]
-          },
-          `${provider.providerId}:${connectorId}`
-        );
-      }
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          "data-testid": `integration-${provider.providerId}`,
-          "data-connected": "false",
-          "data-connecting": connectingId === provider.providerId ? "true" : void 0,
-          disabled: connectingId === provider.providerId,
-          "aria-busy": connectingId === provider.providerId,
-          onClick: () => {
-            void startConnect({
-              providerId: provider.providerId,
-              connectorId
-            });
-          },
-          title: provider.description ? provider.description : `Connect ${name}`,
-          className: cn(
-            TILE_BOX_CLASS,
-            "group border-border bg-card transition-all",
-            "hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm",
-            focusRing
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              ProviderIcon,
-              {
-                id: provider.providerId,
-                iconUrl: provider.iconUrl,
-                displayName: displayNameOf(provider),
-                size: LOGO_SIZE,
-                className: "rounded-2xl"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "line-clamp-2 h-8 w-full text-xs font-medium leading-4 text-foreground", children: name })
-          ]
-        },
-        `${provider.providerId}:${connectorId}`
-      );
-    }) }),
-    /* @__PURE__ */ jsx(
-      Dialog,
-      {
-        open: !!disconnectTarget,
-        onOpenChange: (open) => {
-          if (!open) closeDisconnect();
-        },
-        children: /* @__PURE__ */ jsxs(
-          DialogContent,
-          {
-            className: "max-w-sm",
-            onCloseAutoFocus: (e) => e.preventDefault(),
-            children: [
-              /* @__PURE__ */ jsxs(DialogHeader, { children: [
-                /* @__PURE__ */ jsxs(DialogTitle, { children: [
-                  "Disconnect ",
-                  disconnectTarget?.name ?? "integration",
-                  "?"
-                ] }),
-                /* @__PURE__ */ jsxs(DialogDescription, { children: [
-                  "This removes Sandbox's access to your",
-                  " ",
-                  disconnectTarget?.name ?? "this",
-                  " account",
-                  disconnectAccountLabel ? ` (${disconnectAccountLabel})` : "",
-                  ". You can reconnect anytime."
-                ] })
-              ] }),
-              disconnectError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: disconnectError }) : null,
-              /* @__PURE__ */ jsxs(DialogFooter, { children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    onClick: closeDisconnect,
-                    "data-testid": "cancel-disconnect",
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "destructive",
-                    loading: isDisconnecting,
-                    onClick: confirmDisconnect,
-                    "data-testid": "confirm-disconnect",
-                    children: "Disconnect"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    )
-  ] });
+function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel = "No integrations available yet.", featuredIds = DEFAULT_FEATURED_IDS, defaultSort = "featured", skeletonCount = DEFAULT_SKELETON_COUNT, className }) {
+	const [query, setQuery] = React$1.useState("");
+	const [sort, setSort] = React$1.useState(defaultSort);
+	const [disconnectTarget, setDisconnectTarget] = React$1.useState(null);
+	const [isDisconnecting, setIsDisconnecting] = React$1.useState(false);
+	const [disconnectError, setDisconnectError] = React$1.useState(null);
+	const activeDisconnect = React$1.useRef(0);
+	const connectionIndex = React$1.useMemo(() => buildConnectionIndex(connections), [connections]);
+	const featuredRank = React$1.useMemo(() => makeFeaturedRank(featuredIds), [featuredIds]);
+	const visible = React$1.useMemo(() => {
+		const q = query.trim().toLowerCase();
+		const sorted = [...q ? catalog.filter((p) => matchesQuery(p, q)) : catalog];
+		sorted.sort((a, b) => {
+			if (sort === "featured") {
+				const ra = rankOf(a, featuredRank);
+				const rb = rankOf(b, featuredRank);
+				if (ra !== rb) return ra - rb;
+			}
+			return displayNameOf(a).localeCompare(displayNameOf(b));
+		});
+		return sorted;
+	}, [
+		catalog,
+		query,
+		sort,
+		featuredRank
+	]);
+	const closeDisconnect = React$1.useCallback(() => {
+		activeDisconnect.current += 1;
+		setIsDisconnecting(false);
+		setDisconnectTarget(null);
+		setDisconnectError(null);
+	}, []);
+	const [connectingId, setConnectingId] = React$1.useState(null);
+	const [connectError, setConnectError] = React$1.useState(null);
+	const activeConnect = React$1.useRef(0);
+	const startConnect = React$1.useCallback(async (input) => {
+		const reqId = activeConnect.current += 1;
+		setConnectError(null);
+		let pending;
+		try {
+			pending = onConnect(input);
+		} catch (e) {
+			setConnectError(e instanceof Error ? e.message : "Failed to start the connection.");
+			return;
+		}
+		if (typeof pending?.then !== "function") return;
+		setConnectingId(input.providerId);
+		try {
+			await pending;
+		} catch (e) {
+			if (activeConnect.current !== reqId) return;
+			setConnectError(e instanceof Error ? e.message : "Failed to start the connection.");
+		} finally {
+			if (activeConnect.current === reqId) setConnectingId(null);
+		}
+	}, [onConnect]);
+	const confirmDisconnect = React$1.useCallback(async () => {
+		if (!disconnectTarget) return;
+		const reqId = activeDisconnect.current += 1;
+		setIsDisconnecting(true);
+		setDisconnectError(null);
+		try {
+			await Promise.resolve(onDisconnect(disconnectTarget.connectionId));
+			if (activeDisconnect.current !== reqId) return;
+			setDisconnectTarget(null);
+		} catch (e) {
+			if (activeDisconnect.current !== reqId) return;
+			setDisconnectError(e instanceof Error ? e.message : "Failed to disconnect.");
+		} finally {
+			if (activeDisconnect.current === reqId) setIsDisconnecting(false);
+		}
+	}, [disconnectTarget, onDisconnect]);
+	if (error) return /* @__PURE__ */ jsx(Card, {
+		className: cn("border-destructive/50", className),
+		children: /* @__PURE__ */ jsx(CardContent, {
+			className: "py-6",
+			children: /* @__PURE__ */ jsxs("p", {
+				className: "text-sm text-destructive",
+				children: ["Failed to load integrations: ", error.message]
+			})
+		})
+	});
+	if (isLoading && catalog.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		"data-testid": "integrations-skeleton",
+		children: [/* @__PURE__ */ jsx(IntegrationsToolbar, {
+			query,
+			onQueryChange: setQuery,
+			sort,
+			onSortChange: setSort
+		}), /* @__PURE__ */ jsx("div", {
+			className: TILE_GRID_CLASS,
+			children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: cn(TILE_BOX_CLASS, "animate-pulse border-border bg-muted/40"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "shrink-0 rounded-2xl bg-muted",
+					style: {
+						width: LOGO_SIZE,
+						height: LOGO_SIZE
+					}
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex h-8 w-full items-center justify-center",
+					children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-3/4 rounded bg-muted" })
+				})]
+			}, i))
+		})]
+	});
+	if (catalog.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No integrations",
+		description: emptyCatalogLabel,
+		className
+	});
+	const disconnectAccountLabel = disconnectTarget?.accountDisplay;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		"data-testid": "integrations-panel",
+		children: [
+			/* @__PURE__ */ jsx(IntegrationsToolbar, {
+				query,
+				onQueryChange: setQuery,
+				sort,
+				onSortChange: setSort
+			}),
+			connectError ? /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				"data-testid": "integration-connect-error",
+				className: "mb-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+				children: connectError
+			}) : null,
+			visible.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+				title: "No matches",
+				description: `No integrations match "${query.trim()}".`
+			}) : /* @__PURE__ */ jsx("div", {
+				className: TILE_GRID_CLASS,
+				children: visible.map((provider) => {
+					const connectorId = defaultConnectorOf(provider);
+					const live = connectionIndex.get(`${provider.providerId}:${connectorId}`);
+					const name = displayNameOf(provider);
+					if (Boolean(live) && live) {
+						const manageHref = getManageHref?.(live);
+						const canManage = Boolean(manageHref) || Boolean(onManage);
+						return /* @__PURE__ */ jsxs("div", {
+							"data-testid": `integration-${provider.providerId}`,
+							"data-connected": "true",
+							title: live.accountDisplay ? `${name} — ${live.accountDisplay}` : name,
+							className: cn(TILE_BOX_CLASS, "group relative", "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"),
+							children: [
+								manageHref ? /* @__PURE__ */ jsx("a", {
+									href: manageHref,
+									target: "_blank",
+									rel: "noopener noreferrer",
+									"aria-label": `Manage ${name} (opens in new window)`,
+									"data-testid": `manage-${provider.providerId}`,
+									className: `absolute inset-0 z-10 rounded-xl ${focusRing}`
+								}) : null,
+								/* @__PURE__ */ jsx("span", {
+									className: "pointer-events-none absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white",
+									children: /* @__PURE__ */ jsx(Check, {
+										className: "h-3 w-3",
+										strokeWidth: 3
+									})
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "pointer-events-none flex w-full min-w-0 flex-col items-center gap-2",
+									children: [/* @__PURE__ */ jsx(ProviderIcon, {
+										id: provider.providerId,
+										iconUrl: provider.iconUrl,
+										displayName: displayNameOf(provider),
+										size: LOGO_SIZE,
+										className: "rounded-2xl"
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex h-8 w-full flex-col justify-center leading-4",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: cn("w-full text-xs font-medium text-foreground", live.accountDisplay ? "truncate" : "line-clamp-2"),
+											children: name
+										}), live.accountDisplay ? /* @__PURE__ */ jsx("span", {
+											className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
+											"data-testid": `account-${provider.providerId}`,
+											children: live.accountDisplay
+										}) : null]
+									})]
+								}),
+								/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"data-testid": `menu-${provider.providerId}`,
+										"aria-label": `More actions for ${name}`,
+										title: "More actions",
+										className: `absolute right-1.5 top-1.5 z-20 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground ${focusRing}`,
+										children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
+									})
+								}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+									side: "right",
+									align: "start",
+									className: "min-w-[160px] rounded-md",
+									children: [
+										manageHref ? /* @__PURE__ */ jsx(DropdownMenuItem, {
+											asChild: true,
+											children: /* @__PURE__ */ jsxs("a", {
+												href: manageHref,
+												target: "_blank",
+												rel: "noopener noreferrer",
+												"data-testid": `manage-item-${provider.providerId}`,
+												children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
+											})
+										}) : onManage ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+											"data-testid": `manage-item-${provider.providerId}`,
+											onClick: () => onManage({
+												connectionId: live.id,
+												providerId: provider.providerId
+											}),
+											children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
+										}) : null,
+										canManage ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+										/* @__PURE__ */ jsxs(DropdownMenuItem, {
+											"data-testid": `disconnect-${provider.providerId}`,
+											className: "text-destructive focus:text-destructive",
+											onClick: () => setDisconnectTarget({
+												connectionId: live.id,
+												name,
+												accountDisplay: live.accountDisplay
+											}),
+											children: [/* @__PURE__ */ jsx(Unplug, { className: "mr-2 h-4 w-4" }), " Disconnect"]
+										})
+									]
+								})] })
+							]
+						}, `${provider.providerId}:${connectorId}`);
+					}
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-testid": `integration-${provider.providerId}`,
+						"data-connected": "false",
+						"data-connecting": connectingId === provider.providerId ? "true" : void 0,
+						disabled: connectingId === provider.providerId,
+						"aria-busy": connectingId === provider.providerId,
+						onClick: () => {
+							startConnect({
+								providerId: provider.providerId,
+								connectorId
+							});
+						},
+						title: provider.description ? provider.description : `Connect ${name}`,
+						className: cn(TILE_BOX_CLASS, "group border-border bg-card transition-all", "hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm", focusRing),
+						children: [/* @__PURE__ */ jsx(ProviderIcon, {
+							id: provider.providerId,
+							iconUrl: provider.iconUrl,
+							displayName: displayNameOf(provider),
+							size: LOGO_SIZE,
+							className: "rounded-2xl"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "line-clamp-2 h-8 w-full text-xs font-medium leading-4 text-foreground",
+							children: name
+						})]
+					}, `${provider.providerId}:${connectorId}`);
+				})
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: !!disconnectTarget,
+				onOpenChange: (open) => {
+					if (!open) closeDisconnect();
+				},
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					className: "max-w-sm",
+					onCloseAutoFocus: (e) => e.preventDefault(),
+					children: [
+						/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: [
+							"Disconnect ",
+							disconnectTarget?.name ?? "integration",
+							"?"
+						] }), /* @__PURE__ */ jsxs(DialogDescription, { children: [
+							"This removes Sandbox's access to your",
+							" ",
+							disconnectTarget?.name ?? "this",
+							" account",
+							disconnectAccountLabel ? ` (${disconnectAccountLabel})` : "",
+							". You can reconnect anytime."
+						] })] }),
+						disconnectError ? /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-destructive",
+							role: "alert",
+							children: disconnectError
+						}) : null,
+						/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: closeDisconnect,
+							"data-testid": "cancel-disconnect",
+							children: "Cancel"
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "destructive",
+							loading: isDisconnecting,
+							onClick: confirmDisconnect,
+							"data-testid": "confirm-disconnect",
+							children: "Disconnect"
+						})] })
+					]
+				})
+			})
+		]
+	});
 }
-
-// src/integrations/use-integrations.ts
-import * as React2 from "react";
+//#endregion
+//#region src/integrations/use-integrations.ts
 function unwrap(json) {
-  if (json && typeof json === "object" && "data" in json && json.data !== void 0) {
-    return json.data;
-  }
-  return json;
+	if (json && typeof json === "object" && "data" in json && json.data !== void 0) return json.data;
+	return json;
 }
-function useIntegrations({
-  apiBaseUrl,
-  fetchImpl,
-  autoLoad = true
-}) {
-  const fetcher = fetchImpl ?? (typeof fetch === "function" ? fetch : null);
-  if (!fetcher) {
-    throw new Error("useIntegrations: fetch is not available in this environment");
-  }
-  const base = apiBaseUrl.replace(/\/+$/, "");
-  const [catalog, setCatalog] = React2.useState([]);
-  const [connections, setConnections] = React2.useState([]);
-  const [healthByConnectionId, setHealthByConnectionId] = React2.useState({});
-  const [isLoading, setIsLoading] = React2.useState(autoLoad);
-  const [error, setError] = React2.useState(null);
-  const refresh = React2.useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const [catalogRes, connectionsRes] = await Promise.all([
-        fetcher(`${base}/catalog`, { credentials: "include" }),
-        fetcher(`${base}/connections`, { credentials: "include" })
-      ]);
-      if (!catalogRes.ok) {
-        throw new Error(`Failed to load integration catalog (${catalogRes.status})`);
-      }
-      if (!connectionsRes.ok) {
-        throw new Error(
-          `Failed to load integration connections (${connectionsRes.status})`
-        );
-      }
-      const catalogJson = unwrap(await catalogRes.json());
-      const providers = catalogJson?.catalog?.providers ?? catalogJson?.providers ?? [];
-      setCatalog(providers);
-      const connectionsJson = unwrap(
-        await connectionsRes.json()
-      );
-      setConnections(connectionsJson?.connections ?? []);
-      try {
-        const healthRes = await fetcher(`${base}/healthchecks`, {
-          credentials: "include"
-        });
-        if (healthRes.ok) {
-          const healthJson = unwrap(
-            await healthRes.json()
-          );
-          const map = {};
-          for (const h of healthJson?.healthchecks ?? []) {
-            map[h.connectionId] = h;
-          }
-          setHealthByConnectionId(map);
-        }
-      } catch {
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [base, fetcher]);
-  React2.useEffect(() => {
-    if (autoLoad) {
-      void refresh();
-    }
-  }, [autoLoad, refresh]);
-  const connect = React2.useCallback(
-    async (input) => {
-      const res = await fetcher(`${base}/auth/start`, {
-        method: "POST",
-        credentials: "include",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify(input)
-      });
-      if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        throw new Error(`Failed to start OAuth (${res.status}): ${text}`);
-      }
-      const json = unwrap(await res.json());
-      if (!json?.authorizationUrl) {
-        throw new Error("Platform did not return an authorizationUrl");
-      }
-      window.location.href = json.authorizationUrl;
-    },
-    [base, fetcher]
-  );
-  const disconnect = React2.useCallback(
-    async (connectionId) => {
-      const res = await fetcher(
-        `${base}/connections/${encodeURIComponent(connectionId)}`,
-        { method: "DELETE", credentials: "include" }
-      );
-      if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        throw new Error(`Failed to revoke connection (${res.status}): ${text}`);
-      }
-      await refresh();
-    },
-    [base, fetcher, refresh]
-  );
-  return {
-    catalog,
-    connections,
-    healthByConnectionId,
-    isLoading,
-    error,
-    refresh,
-    connect,
-    disconnect
-  };
+function useIntegrations({ apiBaseUrl, fetchImpl, autoLoad = true }) {
+	const fetcher = fetchImpl ?? (typeof fetch === "function" ? fetch : null);
+	if (!fetcher) throw new Error("useIntegrations: fetch is not available in this environment");
+	const base = apiBaseUrl.replace(/\/+$/, "");
+	const [catalog, setCatalog] = React$1.useState([]);
+	const [connections, setConnections] = React$1.useState([]);
+	const [healthByConnectionId, setHealthByConnectionId] = React$1.useState({});
+	const [isLoading, setIsLoading] = React$1.useState(autoLoad);
+	const [error, setError] = React$1.useState(null);
+	const refresh = React$1.useCallback(async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			const [catalogRes, connectionsRes] = await Promise.all([fetcher(`${base}/catalog`, { credentials: "include" }), fetcher(`${base}/connections`, { credentials: "include" })]);
+			if (!catalogRes.ok) throw new Error(`Failed to load integration catalog (${catalogRes.status})`);
+			if (!connectionsRes.ok) throw new Error(`Failed to load integration connections (${connectionsRes.status})`);
+			const catalogJson = unwrap(await catalogRes.json());
+			const providers = catalogJson?.catalog?.providers ?? catalogJson?.providers ?? [];
+			setCatalog(providers);
+			const connectionsJson = unwrap(await connectionsRes.json());
+			setConnections(connectionsJson?.connections ?? []);
+			try {
+				const healthRes = await fetcher(`${base}/healthchecks`, { credentials: "include" });
+				if (healthRes.ok) {
+					const healthJson = unwrap(await healthRes.json());
+					const map = {};
+					for (const h of healthJson?.healthchecks ?? []) map[h.connectionId] = h;
+					setHealthByConnectionId(map);
+				}
+			} catch {}
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error(String(err)));
+		} finally {
+			setIsLoading(false);
+		}
+	}, [base, fetcher]);
+	React$1.useEffect(() => {
+		if (autoLoad) refresh();
+	}, [autoLoad, refresh]);
+	return {
+		catalog,
+		connections,
+		healthByConnectionId,
+		isLoading,
+		error,
+		refresh,
+		connect: React$1.useCallback(async (input) => {
+			const res = await fetcher(`${base}/auth/start`, {
+				method: "POST",
+				credentials: "include",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(input)
+			});
+			if (!res.ok) {
+				const text = await res.text().catch(() => "");
+				throw new Error(`Failed to start OAuth (${res.status}): ${text}`);
+			}
+			const json = unwrap(await res.json());
+			if (!json?.authorizationUrl) throw new Error("Platform did not return an authorizationUrl");
+			window.location.href = json.authorizationUrl;
+		}, [base, fetcher]),
+		disconnect: React$1.useCallback(async (connectionId) => {
+			const res = await fetcher(`${base}/connections/${encodeURIComponent(connectionId)}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!res.ok) {
+				const text = await res.text().catch(() => "");
+				throw new Error(`Failed to revoke connection (${res.status}): ${text}`);
+			}
+			await refresh();
+		}, [
+			base,
+			fetcher,
+			refresh
+		])
+	};
 }
-export {
-  IntegrationsPanel,
-  ProviderIcon,
-  providerLogoCandidates,
-  useIntegrations
-};
+//#endregion
+export { IntegrationsPanel, ProviderIcon, providerLogoCandidates, useIntegrations };