@tangle-network/sandbox-ui 0.133.4 → 0.133.5

package/dist/integrations.d.ts

@@ -148,6 +148,12 @@ interface IntegrationsCatalogProps {
   /** Compact facade reserves its context line before any account has loaded. */
   reserveConnectionContext?: boolean;
   skeletonCount?: number;
+  /**
+   * Rows shown before "Show all": a Hub catalog lists hundreds of providers, and drawing every tile made a
+   * page tens of thousands of pixels tall that shifted everything below it once the catalog loaded.
+   * Connected rows always show. Defaults to 12 cards or 24 tiles; the loading skeleton uses the same count.
+   */
+  pageSize?: number;
   emptyCatalogLabel?: string;
   title?: string;
   description?: string;
@@ -260,7 +266,7 @@ export declare function integrationTileStatus(row: IntegrationsCatalogRow, { con
 };
 export declare function catalogRowActive(row: IntegrationsCatalogRow): boolean;
 /** Platform's catalog presentation, with app-owned state, destinations and effects. */
-export declare function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter, onCategoryFilterChange, sort, onSortChange, onSelectConnection, onConnect, onManage, onDisconnect, onRequestIntegration, onRetry, loading, error, actionError, connectError, busyProviderId, reserveConnectionContext, skeletonCount, emptyCatalogLabel, title, description, layout, className }: IntegrationsCatalogProps): import("react").JSX.Element;
+export declare function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter, onCategoryFilterChange, sort, onSortChange, onSelectConnection, onConnect, onManage, onDisconnect, onRequestIntegration, onRetry, loading, error, actionError, connectError, busyProviderId, reserveConnectionContext, skeletonCount, pageSize, emptyCatalogLabel, title, description, layout, className }: IntegrationsCatalogProps): import("react").JSX.Element;
 //#endregion
 //#region src/integrations/connection-detail.d.ts
 /** Platform's permission layout, without its fetching, defaults or persistence. */

package/dist/integrations.js

@@ -2,6 +2,7 @@ import { n as normalizeProviderId, r as providerLogoCandidates, t as ProviderIco
 import { Button, Card, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StatusPill } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
+import { useState } from "react";
 import { ExternalLink, MoreVertical, Search, Unplug } from "lucide-react";
 import { cn, focusFieldWithin, focusRing } from "@tangle-network/ui/utils";
 //#region src/integrations/integrations-catalog.tsx
@@ -132,12 +133,15 @@ function ConnectionMenu({ row, connection, onManage, onDisconnect, compact }) {
 	})] });
 }
 /** Platform's catalog presentation, with app-owned state, destinations and effects. */
-function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter = "", onCategoryFilterChange, sort, onSortChange, onSelectConnection, onConnect, onManage, onDisconnect, onRequestIntegration, onRetry, loading = false, error, actionError, connectError, busyProviderId, reserveConnectionContext = false, skeletonCount, emptyCatalogLabel = "No integrations are available to connect yet.", title, description, layout = "cards", className }) {
+function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter = "", onCategoryFilterChange, sort, onSortChange, onSelectConnection, onConnect, onManage, onDisconnect, onRequestIntegration, onRetry, loading = false, error, actionError, connectError, busyProviderId, reserveConnectionContext = false, skeletonCount, pageSize, emptyCatalogLabel = "No integrations are available to connect yet.", title, description, layout = "cards", className }) {
 	const compact = layout === "tiles";
 	const categories = [...new Set(rows.flatMap((row) => row.category ? [row.category] : []))].sort();
 	const q = query.trim().toLowerCase();
 	const filtered = rows.filter((row) => (!categoryFilter || row.category === categoryFilter) && (!q || `${row.title} ${row.providerId} ${row.description ?? ""}`.toLowerCase().includes(q)));
 	const hiddenActive = rows.filter((row) => catalogRowActive(row) && !filtered.includes(row)).length;
+	const limit = pageSize ?? (compact ? 24 : 12);
+	const [showAll, setShowAll] = useState(false);
+	const visible = showAll ? filtered : filtered.filter((row, index) => index < limit || catalogRowActive(row));
 	const state = error ? "error" : loading && rows.length === 0 ? "loading" : rows.length === 0 ? "empty" : "loaded";
 	const gridClass = compact ? "grid grid-cols-2 gap-3 @md:grid-cols-3 @xl:grid-cols-4 @3xl:grid-cols-5 @4xl:grid-cols-6" : "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3";
 	const boxClass = cn(compact ? "flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center" : "flex min-w-0 min-h-[200px] flex-col gap-3 rounded-xl border p-4 text-left", compact && reserveConnectionContext && "w-full min-h-[136px]");
@@ -244,7 +248,7 @@ function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter = "",
 			/* @__PURE__ */ jsx("div", {
 				className: gridClass,
 				"data-testid": "integrations-catalog-grid",
-				children: state === "loading" ? Array.from({ length: skeletonCount ?? (compact ? 12 : 6) }, (_, i) => /* @__PURE__ */ jsxs(Card, {
+				children: state === "loading" ? Array.from({ length: skeletonCount ?? limit }, (_, i) => /* @__PURE__ */ jsxs(Card, {
 					"aria-hidden": "true",
 					className: cn(boxClass, "animate-pulse"),
 					children: [
@@ -294,7 +298,7 @@ function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter = "",
 							children: "Clear filters"
 						})]
 					}) : null]
-				}) : filtered.map((row) => {
+				}) : visible.map((row) => {
 					const provider = row.kind === "provider" ? row : void 0;
 					const connection = provider?.connections.find((item) => item.id === provider.selectedConnectionId);
 					const active = catalogRowActive(row);
@@ -433,7 +437,20 @@ function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter = "",
 						]
 					}, `${row.kind}:${row.providerId}`);
 				})
-			})
+			}),
+			state === "loaded" && visible.length < filtered.length ? /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center",
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					onClick: () => setShowAll(true),
+					"data-testid": "integrations-show-all",
+					children: [
+						"Show all ",
+						filtered.length,
+						" integrations"
+					]
+				})
+			}) : null
 		]
 	});
 }

package/package.json

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