@tangle-network/sandbox-ui 0.20.1 → 0.20.2

package/dist/globals.css

@@ -601,6 +601,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }

package/dist/integrations.js

@@ -20,6 +20,86 @@ function statusVariant(status) {
 function defaultConnectorOf(provider) {
   return provider.connectors?.[0]?.connectorId ?? provider.providerId;
 }
+var PROVIDER_LOGO_SLUGS = {
+  gmail: "gmail",
+  googlemail: "gmail",
+  google: "google",
+  "google-drive": "googledrive",
+  googledrive: "googledrive",
+  drive: "googledrive",
+  "google-calendar": "googlecalendar",
+  googlecalendar: "googlecalendar",
+  calendar: "googlecalendar",
+  "google-sheets": "googlesheets",
+  instagram: "instagram",
+  facebook: "facebook",
+  meta: "meta",
+  linkedin: "linkedin",
+  twitter: "x",
+  x: "x",
+  tiktok: "tiktok",
+  youtube: "youtube",
+  slack: "slack",
+  discord: "discord",
+  notion: "notion",
+  hubspot: "hubspot",
+  salesforce: "salesforce",
+  stripe: "stripe",
+  github: "github",
+  gitlab: "gitlab",
+  linear: "linear",
+  jira: "jira",
+  asana: "asana",
+  trello: "trello",
+  dropbox: "dropbox",
+  box: "box",
+  outlook: "microsoftoutlook",
+  "microsoft-outlook": "microsoftoutlook",
+  "microsoft-teams": "microsoftteams",
+  zoom: "zoom",
+  shopify: "shopify",
+  mailchimp: "mailchimp",
+  airtable: "airtable",
+  zendesk: "zendesk",
+  intercom: "intercom"
+};
+function normalizeProviderId(id) {
+  return id.toLowerCase().replace(/[_\s]+/g, "-").replace(/-(business|oauth|api|app|v\d+)$/g, "");
+}
+function providerLogoUrl(provider) {
+  if (provider.iconUrl) return provider.iconUrl;
+  const id = provider.providerId.toLowerCase();
+  const slug = PROVIDER_LOGO_SLUGS[id] ?? PROVIDER_LOGO_SLUGS[normalizeProviderId(id)];
+  return slug ? `https://cdn.simpleicons.org/${slug}` : void 0;
+}
+function ProviderLogo({ provider }) {
+  const [failed, setFailed] = React.useState(false);
+  const url = providerLogoUrl(provider);
+  const label = (provider.displayName ?? provider.providerId).trim();
+  const initial = label.charAt(0).toUpperCase() || "?";
+  if (!url || failed) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex size-6 shrink-0 items-center justify-center rounded bg-muted text-[11px] font-semibold text-muted-foreground",
+        "aria-hidden": true,
+        children: initial
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: url,
+      alt: "",
+      width: 24,
+      height: 24,
+      loading: "lazy",
+      className: "size-6 shrink-0 rounded object-contain",
+      onError: () => setFailed(true)
+    }
+  );
+}
 function buildConnectionIndex(connections) {
   const index = /* @__PURE__ */ new Map();
   for (const conn of connections) {
@@ -78,6 +158,7 @@ function IntegrationsPanel({
           /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2 space-y-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(ProviderLogo, { provider }),
                 /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold capitalize text-foreground", children: headline }),
                 live ? /* @__PURE__ */ jsx(Badge, { variant: statusVariant(live.status), className: "text-xs", children: live.status }) : null
               ] }),

package/dist/styles.css

@@ -601,6 +601,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }

package/package.json

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