@tangle-network/sandbox-ui 0.20.1 → 0.20.3

package/dist/{chunk-N5RYCDLD.js → chunk-QNVVKMEW.js}

@@ -127,8 +127,8 @@ function resolveModelBrandIdentity(model) {
   const labKey = normalizeBrandKey(model.logos?.lab ?? model.modelLab ?? inferModelLab(model, canonical, hostKey));
   const hostBase = brandInfo(hostKey);
   const labBase = brandInfo(labKey);
-  const host = { ...hostBase, logoUrl: model.logos?.hostUrl ?? hostBase.logoUrl };
-  const lab = { ...labBase, logoUrl: model.logos?.labUrl ?? labBase.logoUrl };
+  const host = model.logos?.hostUrl ? { ...hostBase, logoUrl: model.logos.hostUrl, monochrome: false } : hostBase;
+  const lab = model.logos?.labUrl ? { ...labBase, logoUrl: model.logos.labUrl, monochrome: false } : labBase;
   return {
     host,
     lab,
@@ -468,13 +468,33 @@ function BrandLogo({ brand, size, className }) {
         size === "md" && "h-7 w-7",
         className
       ),
-      children: brand.logo === "tangle" ? /* @__PURE__ */ jsx(TangleKnot, { size: pixelSize, className: "h-full w-full" }) : brand.logoUrl ? /* @__PURE__ */ jsx("img", { src: brand.logoUrl, alt: "", className: "h-[72%] w-[72%] object-contain" }) : null
+      children: brand.logo === "tangle" ? /* @__PURE__ */ jsx(TangleKnot, { size: pixelSize, className: "h-full w-full" }) : brand.logoUrl && brand.monochrome ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "h-[72%] w-[72%]",
+          style: {
+            backgroundColor: "hsl(var(--foreground))",
+            maskImage: cssUrl(brand.logoUrl),
+            maskSize: "contain",
+            maskRepeat: "no-repeat",
+            maskPosition: "center",
+            WebkitMaskImage: cssUrl(brand.logoUrl),
+            WebkitMaskSize: "contain",
+            WebkitMaskRepeat: "no-repeat",
+            WebkitMaskPosition: "center"
+          }
+        }
+      ) : brand.logoUrl ? /* @__PURE__ */ jsx("img", { src: brand.logoUrl, alt: "", className: "h-[72%] w-[72%] object-contain" }) : null
     }
   );
 }
 function hasRealLogo(brand) {
   return Boolean(brand.logoUrl || brand.logo);
 }
+function cssUrl(url) {
+  return `url("${url.replace(/[\\"'#\n]/g, (char) => encodeURIComponent(char))}")`;
+}
 function modelLogo(path) {
   return path;
 }
@@ -548,7 +568,7 @@ function brandLogo(key) {
 function brandMark(key) {
   if (key === "tangle" || key === "tcloud") return { logo: "tangle" };
   const logoUrl = brandLogo(key);
-  return logoUrl ? { logoUrl } : {};
+  return logoUrl ? { logoUrl, monochrome: true } : {};
 }
 function inferModelLab(model, canonical, hostKey) {
   const name = model.name ?? "";

package/dist/dashboard.js

@@ -58,7 +58,7 @@ import {
   formatContext,
   formatPrice,
   formatPricing
-} from "./chunk-N5RYCDLD.js";
+} from "./chunk-QNVVKMEW.js";
 import "./chunk-7ZA5SEK3.js";
 import "./chunk-EI44GEQ5.js";
 export {

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/index.js

@@ -194,7 +194,7 @@ import {
   formatContext,
   formatPrice,
   formatPricing
-} from "./chunk-N5RYCDLD.js";
+} from "./chunk-QNVVKMEW.js";
 import {
   Avatar,
   AvatarFallback,

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/pages.js

@@ -6,7 +6,7 @@ import {
   TemplateCard,
   UsageChart,
   canonicalModelId
-} from "./chunk-N5RYCDLD.js";
+} from "./chunk-QNVVKMEW.js";
 import {
   Badge,
   Button,

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.3",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",