@tangle-network/sandbox-ui 0.91.4 → 0.91.5

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("");
@@ -205,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(
@@ -233,51 +304,16 @@ 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",
       {
@@ -293,7 +329,7 @@ function IntegrationsPanel({
         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}`
@@ -310,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: [
@@ -446,7 +483,8 @@ function IntegrationsPanel({
           },
           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/package.json

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