@tangle-network/sandbox-ui 0.91.3 → 0.91.5

package/dist/globals.css

@@ -1945,6 +1945,12 @@
       border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
     }
   }
+  .border-destructive\/40 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+    }
+  }
   .border-destructive\/50 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/dist/integrations.d.ts

@@ -93,9 +93,15 @@ interface IntegrationsPanelProps {
     featuredIds?: string[];
     /** Initial sort mode. Defaults to "featured". */
     defaultSort?: IntegrationSort;
+    /**
+     * Tiles the loading skeleton draws. A skeleton exists to reserve the space
+     * the real content will take, so pass the catalog size you expect when the
+     * consumer knows it; the default fills two rows at the widest breakpoint.
+     */
+    skeletonCount?: number;
     className?: string;
 }
-declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel, featuredIds, defaultSort, className, }: IntegrationsPanelProps): React.JSX.Element;
+declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel, featuredIds, defaultSort, skeletonCount, className, }: IntegrationsPanelProps): React.JSX.Element;
 
 /**
  * Endpoint contract expected on the consumer app's server (which

package/dist/integrations.js

@@ -64,6 +64,60 @@ var DEFAULT_FEATURED_IDS = [
 function defaultConnectorOf(provider) {
   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 border-border bg-card px-3 py-2", 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),
+          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: "tablist",
+        "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",
+            role: "tab",
+            "aria-selected": sort === value,
+            onClick: () => onSortChange(value),
+            "data-testid": `sort-${value}`,
+            className: cn(
+              "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+              sort === value ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: label
+          },
+          value
+        ))
+      }
+    )
+  ] });
+}
 var LOGO_SIZE = 48;
 function buildConnectionIndex(connections) {
   const index = /* @__PURE__ */ new Map();
@@ -109,6 +163,7 @@ function IntegrationsPanel({
   emptyCatalogLabel = "No integrations available yet.",
   featuredIds = DEFAULT_FEATURED_IDS,
   defaultSort = "featured",
+  skeletonCount = DEFAULT_SKELETON_COUNT,
   className
 }) {
   const [query, setQuery] = React.useState("");
@@ -147,6 +202,39 @@ function IntegrationsPanel({
     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;
@@ -172,22 +260,38 @@ function IntegrationsPanel({
     ] }) }) });
   }
   if (isLoading && catalog.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6",
-          className
-        ),
-        children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "aspect-square animate-pulse rounded-xl border border-border bg-muted/40"
-          },
-          i
-        ))
-      }
-    );
+    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(
@@ -200,58 +304,32 @@ function IntegrationsPanel({
     );
   }
   const disconnectAccountLabel = disconnectTarget?.accountDisplay;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
-    /* @__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 border-border bg-card px-3 py-2", children: [
-        /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: query,
-            onChange: (e) => setQuery(e.target.value),
-            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: "tablist",
-          "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",
-              role: "tab",
-              "aria-selected": sort === value,
-              onClick: () => setSort(value),
-              "data-testid": `sort-${value}`,
-              className: cn(
-                "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-                sort === value ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"
-              ),
-              children: label
-            },
-            value
-          ))
-        }
-      )
-    ] }),
+  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: "grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6", children: visible.map((provider) => {
+    ) : /* @__PURE__ */ jsx("div", { className: TILE_GRID_CLASS, children: visible.map((provider) => {
       const connectorId = defaultConnectorOf(provider);
       const live = connectionIndex.get(
         `${provider.providerId}:${connectorId}`
@@ -268,7 +346,8 @@ function IntegrationsPanel({
             "data-connected": "true",
             title: live.accountDisplay ? `${name} \u2014 ${live.accountDisplay}` : name,
             className: cn(
-              "group relative flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
+              TILE_BOX_CLASS,
+              "group relative",
               "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"
             ),
             children: [
@@ -393,10 +472,19 @@ function IntegrationsPanel({
           type: "button",
           "data-testid": `integration-${provider.providerId}`,
           "data-connected": "false",
-          onClick: () => onConnect({ providerId: provider.providerId, connectorId }),
+          "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(
-            "group flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card p-3 text-center transition-all",
+            TILE_BOX_CLASS,
+            "group border-border bg-card transition-all",
             "hover:border-primary/40 hover:bg-accent/40 hover:shadow-sm focus:outline-none focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20"
           ),
           children: [

package/dist/styles.css

@@ -1945,6 +1945,12 @@
       border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
     }
   }
+  .border-destructive\/40 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+    }
+  }
   .border-destructive\/50 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.91.3",
+  "version": "0.91.5",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",