@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-connection-matrix/index.es.js

@@ -0,0 +1,739 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ArrowUpDown as n, ChevronDown as r, Filter as i, Info as a, Layers as o, Link2 as s, X as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/waka-connection-matrix/index.tsx
+var d = {
+	http: {
+		label: "HTTP",
+		color: "#3b82f6"
+	},
+	grpc: {
+		label: "gRPC",
+		color: "#8b5cf6"
+	},
+	websocket: {
+		label: "WebSocket",
+		color: "#22c55e"
+	},
+	database: {
+		label: "Database",
+		color: "#f59e0b"
+	},
+	queue: {
+		label: "Queue",
+		color: "#ec4899"
+	},
+	custom: {
+		label: "Custom",
+		color: "#6b7280"
+	}
+}, f = {
+	blue: [
+		"bg-blue-50 dark:bg-blue-950/30",
+		"bg-blue-100 dark:bg-blue-900/50",
+		"bg-blue-200 dark:bg-blue-800/60",
+		"bg-blue-300 dark:bg-blue-700/70",
+		"bg-blue-400 dark:bg-blue-600/80",
+		"bg-blue-500 dark:bg-blue-500"
+	],
+	green: [
+		"bg-green-50 dark:bg-green-950/30",
+		"bg-green-100 dark:bg-green-900/50",
+		"bg-green-200 dark:bg-green-800/60",
+		"bg-green-300 dark:bg-green-700/70",
+		"bg-green-400 dark:bg-green-600/80",
+		"bg-green-500 dark:bg-green-500"
+	],
+	purple: [
+		"bg-purple-50 dark:bg-purple-950/30",
+		"bg-purple-100 dark:bg-purple-900/50",
+		"bg-purple-200 dark:bg-purple-800/60",
+		"bg-purple-300 dark:bg-purple-700/70",
+		"bg-purple-400 dark:bg-purple-600/80",
+		"bg-purple-500 dark:bg-purple-500"
+	],
+	orange: [
+		"bg-orange-50 dark:bg-orange-950/30",
+		"bg-orange-100 dark:bg-orange-900/50",
+		"bg-orange-200 dark:bg-orange-800/60",
+		"bg-orange-300 dark:bg-orange-700/70",
+		"bg-orange-400 dark:bg-orange-600/80",
+		"bg-orange-500 dark:bg-orange-500"
+	],
+	red: [
+		"bg-red-50 dark:bg-red-950/30",
+		"bg-red-100 dark:bg-red-900/50",
+		"bg-red-200 dark:bg-red-800/60",
+		"bg-red-300 dark:bg-red-700/70",
+		"bg-red-400 dark:bg-red-600/80",
+		"bg-red-500 dark:bg-red-500"
+	]
+}, p = {
+	sm: {
+		cell: "w-8 h-8",
+		text: "text-[9px]",
+		header: "text-xs"
+	},
+	md: {
+		cell: "w-10 h-10",
+		text: "text-[10px]",
+		header: "text-xs"
+	},
+	lg: {
+		cell: "w-12 h-12",
+		text: "text-xs",
+		header: "text-sm"
+	}
+};
+function m(e, t) {
+	if (e === 0) return 0;
+	let n = e / t;
+	return n <= .2 ? 1 : n <= .4 ? 2 : n <= .6 ? 3 : n <= .8 ? 4 : 5;
+}
+function h(e, t) {
+	let n = e.filter((e) => e.weight > 0), r = n.map((e) => e.weight), i = n.map((e) => e.count || 0), a = n.filter((e) => e.latency !== void 0).map((e) => e.latency), o = t * (t - 1);
+	return {
+		totalConnections: n.length,
+		averageWeight: r.length > 0 ? r.reduce((e, t) => e + t, 0) / r.length : 0,
+		maxWeight: r.length > 0 ? Math.max(...r) : 0,
+		minWeight: r.length > 0 ? Math.min(...r) : 0,
+		totalCount: i.reduce((e, t) => e + t, 0),
+		averageLatency: a.length > 0 ? a.reduce((e, t) => e + t, 0) / a.length : 0,
+		density: o > 0 ? n.length / o : 0
+	};
+}
+function g({ services: e, connections: n, initialFilterTypes: r, initialSortOrder: i = "name" }) {
+	let [a, o] = t.useState(e), [s, c] = t.useState(n), [l, u] = t.useState(new Set(r || Object.keys(d))), [f, p] = t.useState(i), [m, g] = t.useState(null), [_, v] = t.useState(null), y = t.useMemo(() => {
+		let e = /* @__PURE__ */ new Map();
+		return s.forEach((t) => {
+			e.set(`${t.source}-${t.target}`, t);
+		}), e;
+	}, [s]), b = t.useMemo(() => s.filter((e) => l.has(e.type)), [s, l]);
+	return {
+		services: t.useMemo(() => {
+			let e = [...a];
+			switch (f) {
+				case "connections":
+					e.sort((e, t) => {
+						let n = b.filter((t) => t.source === e.id || t.target === e.id).length;
+						return b.filter((e) => e.source === t.id || e.target === t.id).length - n;
+					});
+					break;
+				case "weight":
+					e.sort((e, t) => {
+						let n = b.filter((t) => t.source === e.id || t.target === e.id).reduce((e, t) => e + t.weight, 0);
+						return b.filter((e) => e.source === t.id || e.target === t.id).reduce((e, t) => e + t.weight, 0) - n;
+					});
+					break;
+				default: e.sort((e, t) => e.name.localeCompare(t.name));
+			}
+			return e;
+		}, [
+			a,
+			f,
+			b
+		]),
+		connections: b,
+		connectionMap: y,
+		statistics: t.useMemo(() => h(b, a.length), [b, a.length]),
+		filterTypes: l,
+		sortOrder: f,
+		highlightedService: m,
+		selectedCell: _,
+		getConnection: t.useCallback((e, t) => {
+			let n = y.get(`${e}-${t}`);
+			if (n && l.has(n.type)) return n;
+		}, [y, l]),
+		getService: t.useCallback((e) => a.find((t) => t.id === e), [a]),
+		toggleFilterType: t.useCallback((e) => {
+			u((t) => {
+				let n = new Set(t);
+				return n.has(e) ? n.delete(e) : n.add(e), n;
+			});
+		}, []),
+		setAllFilterTypes: t.useCallback((e) => {
+			u(new Set(e));
+		}, []),
+		setSortOrder: p,
+		setHighlightedService: g,
+		setSelectedCell: v,
+		updateConnections: t.useCallback((e) => {
+			c(e);
+		}, []),
+		updateServices: t.useCallback((e) => {
+			o(e);
+		}, []),
+		addConnection: t.useCallback((e) => {
+			c((t) => [...t, e]);
+		}, []),
+		removeConnection: t.useCallback((e, t) => {
+			c((n) => n.filter((n) => !(n.source === e && n.target === t)));
+		}, []),
+		getRelatedConnections: t.useCallback((e) => b.filter((t) => t.source === e || t.target === e), [b])
+	};
+}
+function _({ sourceId: t, targetId: n, connection: r, maxWeight: i, colorScheme: a, cellSize: o, showCount: s, isHighlighted: c, isDimmed: u, isSelected: d, isSameService: h, onClick: g, onMouseEnter: _, onMouseLeave: v }) {
+	let y = p[o], b = f[a], x = r ? m(r.weight, i) : 0;
+	return h ? /* @__PURE__ */ l("div", {
+		className: e(y.cell, "flex items-center justify-center", "bg-gray-100 dark:bg-gray-800/50"),
+		children: /* @__PURE__ */ l("div", { className: "w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600" })
+	}) : /* @__PURE__ */ l("div", {
+		className: e(y.cell, "flex items-center justify-center cursor-pointer transition-all duration-200", "border border-transparent", b[x], c && "ring-2 ring-primary ring-offset-1", d && "ring-2 ring-blue-500 ring-offset-2", u && "opacity-30", r && r.weight > 0 && "hover:scale-110 hover:z-10", !r && "hover:bg-gray-100 dark:hover:bg-gray-800"),
+		onClick: g,
+		onMouseEnter: _,
+		onMouseLeave: v,
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && g();
+		},
+		"aria-label": r ? `Connection from ${t} to ${n}: weight ${r.weight}` : `No connection from ${t} to ${n}`,
+		children: s && r && r.count !== void 0 && r.count > 0 && /* @__PURE__ */ l("span", {
+			className: e(y.text, "font-medium text-gray-700 dark:text-gray-200"),
+			children: r.count > 999 ? "1k+" : r.count
+		})
+	});
+}
+function v({ details: t, position: n }) {
+	let { source: r, target: i, connection: a } = t, o = d[a.type];
+	return /* @__PURE__ */ u("div", {
+		className: e("fixed z-50 min-w-[200px] rounded-lg border bg-popover p-3 shadow-lg", "animate-in fade-in-0 zoom-in-95 duration-200"),
+		style: {
+			left: n.x,
+			top: n.y,
+			transform: "translate(-50%, -100%) translateY(-12px)"
+		},
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center gap-2 mb-2",
+				children: [
+					/* @__PURE__ */ l(s, { className: "h-4 w-4 text-muted-foreground" }),
+					/* @__PURE__ */ l("span", {
+						className: "font-medium",
+						children: r.name
+					}),
+					/* @__PURE__ */ l("span", {
+						className: "text-muted-foreground",
+						children: "->"
+					}),
+					/* @__PURE__ */ l("span", {
+						className: "font-medium",
+						children: i.name
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "space-y-1.5 text-sm",
+				children: [
+					/* @__PURE__ */ u("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ l("span", {
+							className: "text-muted-foreground",
+							children: "Type"
+						}), /* @__PURE__ */ l("span", {
+							className: "px-2 py-0.5 rounded text-xs font-medium",
+							style: {
+								backgroundColor: `${o.color}20`,
+								color: o.color
+							},
+							children: o.label
+						})]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ l("span", {
+							className: "text-muted-foreground",
+							children: "Weight"
+						}), /* @__PURE__ */ u("span", {
+							className: "font-medium",
+							children: [a.weight, "%"]
+						})]
+					}),
+					a.count !== void 0 && /* @__PURE__ */ u("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ l("span", {
+							className: "text-muted-foreground",
+							children: "Requests"
+						}), /* @__PURE__ */ l("span", {
+							className: "font-medium",
+							children: a.count.toLocaleString()
+						})]
+					}),
+					a.latency !== void 0 && /* @__PURE__ */ u("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ l("span", {
+							className: "text-muted-foreground",
+							children: "Latency"
+						}), /* @__PURE__ */ u("span", {
+							className: "font-medium",
+							children: [a.latency, "ms"]
+						})]
+					}),
+					a.errorRate !== void 0 && /* @__PURE__ */ u("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ l("span", {
+							className: "text-muted-foreground",
+							children: "Error Rate"
+						}), /* @__PURE__ */ u("span", {
+							className: e("font-medium", a.errorRate > 5 ? "text-red-500" : a.errorRate > 1 ? "text-yellow-500" : "text-green-500"),
+							children: [a.errorRate, "%"]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ l("div", { className: "absolute left-1/2 bottom-0 w-2.5 h-2.5 bg-popover border-r border-b transform -translate-x-1/2 translate-y-1/2 rotate-45" })
+		]
+	});
+}
+function y({ statistics: e }) {
+	return /* @__PURE__ */ u("div", {
+		className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 p-4 rounded-lg border bg-muted/30",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ l("div", {
+					className: "text-2xl font-bold text-primary",
+					children: e.totalConnections
+				}), /* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Total Connections"
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ l("div", {
+					className: "text-2xl font-bold",
+					children: e.averageWeight.toFixed(1)
+				}), /* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Avg Weight"
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ l("div", {
+					className: "text-2xl font-bold text-green-600",
+					children: e.maxWeight
+				}), /* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Max Weight"
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ l("div", {
+					className: "text-2xl font-bold",
+					children: e.totalCount.toLocaleString()
+				}), /* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Total Requests"
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ u("div", {
+					className: "text-2xl font-bold",
+					children: [e.averageLatency.toFixed(1), "ms"]
+				}), /* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Avg Latency"
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ u("div", {
+					className: "text-2xl font-bold",
+					children: [(e.density * 100).toFixed(1), "%"]
+				}), /* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Density"
+				})]
+			})
+		]
+	});
+}
+function b({ filterTypes: a, onToggleType: o, sortOrder: s, onSortChange: f }) {
+	let [p, m] = t.useState(!1);
+	return /* @__PURE__ */ u("div", {
+		className: "flex flex-wrap items-center gap-3",
+		children: [/* @__PURE__ */ u("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ u("button", {
+				onClick: () => m(!p),
+				className: e("flex items-center gap-2 px-3 py-1.5 rounded-md border text-sm transition-colors", "hover:bg-accent"),
+				children: [
+					/* @__PURE__ */ l(i, { className: "h-4 w-4" }),
+					/* @__PURE__ */ l("span", { children: "Filter Types" }),
+					/* @__PURE__ */ l(r, { className: e("h-4 w-4 transition-transform", p && "rotate-180") })
+				]
+			}), p && /* @__PURE__ */ l("div", {
+				className: "absolute top-full left-0 mt-1 z-20 min-w-[180px] rounded-md border bg-popover shadow-lg p-2",
+				children: Object.keys(d).map((t) => {
+					let n = d[t], r = a.has(t);
+					return /* @__PURE__ */ u("button", {
+						onClick: () => o(t),
+						className: e("w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-colors", "hover:bg-accent", !r && "opacity-50"),
+						children: [
+							/* @__PURE__ */ l("div", {
+								className: "w-3 h-3 rounded-sm",
+								style: { backgroundColor: n.color }
+							}),
+							/* @__PURE__ */ l("span", {
+								className: "flex-1 text-left",
+								children: n.label
+							}),
+							r && /* @__PURE__ */ l("div", {
+								className: "w-4 h-4 rounded-full bg-primary flex items-center justify-center",
+								children: /* @__PURE__ */ l(c, { className: "h-3 w-3 text-primary-foreground" })
+							})
+						]
+					}, t);
+				})
+			})]
+		}), /* @__PURE__ */ u("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ l(n, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ u("select", {
+				value: s,
+				onChange: (e) => f(e.target.value),
+				className: "px-2 py-1.5 rounded-md border text-sm bg-background",
+				children: [
+					/* @__PURE__ */ l("option", {
+						value: "name",
+						children: "Sort by Name"
+					}),
+					/* @__PURE__ */ l("option", {
+						value: "connections",
+						children: "Sort by Connections"
+					}),
+					/* @__PURE__ */ l("option", {
+						value: "weight",
+						children: "Sort by Weight"
+					})
+				]
+			})]
+		})]
+	});
+}
+function x({ details: t, onClose: n }) {
+	let { source: r, target: i, connection: o } = t, s = d[o.type];
+	return /* @__PURE__ */ u("div", {
+		className: "rounded-lg border bg-card p-4 shadow-sm",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "flex items-start justify-between mb-4",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ l(a, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ l("h4", {
+						className: "font-semibold",
+						children: "Connection Details"
+					})]
+				}), /* @__PURE__ */ l("button", {
+					onClick: n,
+					className: "p-1 rounded hover:bg-accent transition-colors",
+					children: /* @__PURE__ */ l(c, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "grid grid-cols-2 gap-4",
+				children: [/* @__PURE__ */ u("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+						className: "text-xs text-muted-foreground mb-1",
+						children: "Source"
+					}), /* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2",
+						children: [
+							r.color && /* @__PURE__ */ l("div", {
+								className: "w-3 h-3 rounded-full",
+								style: { backgroundColor: r.color }
+							}),
+							/* @__PURE__ */ l("span", {
+								className: "font-medium",
+								children: r.name
+							}),
+							r.category && /* @__PURE__ */ u("span", {
+								className: "text-xs text-muted-foreground",
+								children: [
+									"(",
+									r.category,
+									")"
+								]
+							})
+						]
+					})] }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+						className: "text-xs text-muted-foreground mb-1",
+						children: "Target"
+					}), /* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2",
+						children: [
+							i.color && /* @__PURE__ */ l("div", {
+								className: "w-3 h-3 rounded-full",
+								style: { backgroundColor: i.color }
+							}),
+							/* @__PURE__ */ l("span", {
+								className: "font-medium",
+								children: i.name
+							}),
+							i.category && /* @__PURE__ */ u("span", {
+								className: "text-xs text-muted-foreground",
+								children: [
+									"(",
+									i.category,
+									")"
+								]
+							})
+						]
+					})] })]
+				}), /* @__PURE__ */ u("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+						className: "text-xs text-muted-foreground mb-1",
+						children: "Connection Type"
+					}), /* @__PURE__ */ l("span", {
+						className: "inline-flex px-2 py-0.5 rounded text-xs font-medium",
+						style: {
+							backgroundColor: `${s.color}20`,
+							color: s.color
+						},
+						children: s.label
+					})] }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+						className: "text-xs text-muted-foreground mb-1",
+						children: "Weight"
+					}), /* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ l("div", {
+							className: "flex-1 h-2 bg-muted rounded-full overflow-hidden",
+							children: /* @__PURE__ */ l("div", {
+								className: "h-full bg-primary rounded-full transition-all",
+								style: { width: `${o.weight}%` }
+							})
+						}), /* @__PURE__ */ u("span", {
+							className: "text-sm font-medium",
+							children: [o.weight, "%"]
+						})]
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "grid grid-cols-3 gap-4 mt-4 pt-4 border-t",
+				children: [
+					o.count !== void 0 && /* @__PURE__ */ u("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ l("div", {
+							className: "text-lg font-bold",
+							children: o.count.toLocaleString()
+						}), /* @__PURE__ */ l("div", {
+							className: "text-xs text-muted-foreground",
+							children: "Requests"
+						})]
+					}),
+					o.latency !== void 0 && /* @__PURE__ */ u("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ u("div", {
+							className: "text-lg font-bold",
+							children: [o.latency, "ms"]
+						}), /* @__PURE__ */ l("div", {
+							className: "text-xs text-muted-foreground",
+							children: "Latency"
+						})]
+					}),
+					o.errorRate !== void 0 && /* @__PURE__ */ u("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ u("div", {
+							className: e("text-lg font-bold", o.errorRate > 5 ? "text-red-500" : o.errorRate > 1 ? "text-yellow-500" : "text-green-500"),
+							children: [o.errorRate, "%"]
+						}), /* @__PURE__ */ l("div", {
+							className: "text-xs text-muted-foreground",
+							children: "Error Rate"
+						})]
+					})
+				]
+			}),
+			o.metadata && Object.keys(o.metadata).length > 0 && /* @__PURE__ */ u("div", {
+				className: "mt-4 pt-4 border-t",
+				children: [/* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground mb-2",
+					children: "Additional Info"
+				}), /* @__PURE__ */ l("div", {
+					className: "grid grid-cols-2 gap-2",
+					children: Object.entries(o.metadata).map(([e, t]) => /* @__PURE__ */ u("div", {
+						className: "text-sm",
+						children: [
+							/* @__PURE__ */ u("span", {
+								className: "text-muted-foreground",
+								children: [e, ":"]
+							}),
+							" ",
+							/* @__PURE__ */ l("span", {
+								className: "font-medium",
+								children: t
+							})
+						]
+					}, e))
+				})]
+			})
+		]
+	});
+}
+function S({ colorScheme: t, cellSize: n }) {
+	let r = f[t], i = p[n];
+	return /* @__PURE__ */ u("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ l("span", {
+				className: e("text-muted-foreground", i.header),
+				children: "Low"
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex items-center gap-0.5",
+				children: r.map((t, n) => /* @__PURE__ */ l("div", { className: e("w-5 h-5 rounded-sm transition-all", t) }, n))
+			}),
+			/* @__PURE__ */ l("span", {
+				className: e("text-muted-foreground", i.header),
+				children: "High"
+			})
+		]
+	});
+}
+function C({ services: n, connections: r, title: i, showStatistics: a = !0, showFilters: s = !0, colorScheme: c = "blue", cellSize: f = "md", onCellClick: m, onCellHover: h, showCounts: C = !1, sortable: w = !0, className: T }) {
+	let E = g({
+		services: n,
+		connections: r
+	}), [D, O] = t.useState(null), [k, A] = t.useState(null), j = t.useMemo(() => Math.max(...E.connections.map((e) => e.weight), 1), [E.connections]), M = p[f], N = (e, t) => {
+		let n = E.getConnection(e, t), r = E.getService(e), i = E.getService(t);
+		if (n && r && i) {
+			let a = {
+				source: r,
+				target: i,
+				connection: n
+			};
+			A(a), E.setSelectedCell({
+				source: e,
+				target: t
+			}), m?.(a);
+		} else A(null), E.setSelectedCell(null), m?.(null);
+	}, P = (e, t, n) => {
+		let r = E.getConnection(e, t), i = E.getService(e), a = E.getService(t);
+		if (r && i && a) {
+			let t = {
+				source: i,
+				target: a,
+				connection: r
+			}, o = n.currentTarget.getBoundingClientRect();
+			O({
+				details: t,
+				position: {
+					x: o.left + o.width / 2,
+					y: o.top
+				}
+			}), E.setHighlightedService(e), h?.(t);
+		}
+	}, F = () => {
+		O(null), E.setHighlightedService(null), h?.(null);
+	};
+	return /* @__PURE__ */ u("div", {
+		className: e("space-y-4", T),
+		children: [
+			(i || s) && /* @__PURE__ */ u("div", {
+				className: "flex flex-wrap items-center justify-between gap-4",
+				children: [i && /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ l(o, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ l("h3", {
+						className: "text-lg font-semibold",
+						children: i
+					})]
+				}), s && w && /* @__PURE__ */ l(b, {
+					filterTypes: E.filterTypes,
+					onToggleType: E.toggleFilterType,
+					sortOrder: E.sortOrder,
+					onSortChange: E.setSortOrder
+				})]
+			}),
+			a && /* @__PURE__ */ l(y, { statistics: E.statistics }),
+			/* @__PURE__ */ l("div", {
+				className: "overflow-auto",
+				children: /* @__PURE__ */ u("div", {
+					className: "inline-block min-w-full",
+					children: [/* @__PURE__ */ u("div", {
+						className: "flex",
+						children: [/* @__PURE__ */ l("div", { className: e(M.cell, "flex-shrink-0") }), E.services.map((t) => /* @__PURE__ */ l("div", {
+							className: e(M.cell, "flex items-end justify-center pb-1 flex-shrink-0"),
+							children: /* @__PURE__ */ l("span", {
+								className: e(M.header, "font-medium text-muted-foreground truncate transform -rotate-45 origin-bottom-left whitespace-nowrap"),
+								style: { maxWidth: "60px" },
+								title: t.name,
+								children: t.name
+							})
+						}, `col-${t.id}`))]
+					}), E.services.map((t) => /* @__PURE__ */ u("div", {
+						className: "flex",
+						children: [/* @__PURE__ */ l("div", {
+							className: e(M.cell, "flex items-center justify-end pr-2 flex-shrink-0"),
+							children: /* @__PURE__ */ l("span", {
+								className: e(M.header, "font-medium text-muted-foreground truncate"),
+								style: { maxWidth: "80px" },
+								title: t.name,
+								children: t.name
+							})
+						}), E.services.map((e) => {
+							let n = E.getConnection(t.id, e.id), r = E.highlightedService === t.id || E.highlightedService === e.id, i = E.highlightedService !== null && E.highlightedService !== t.id && E.highlightedService !== e.id, a = E.selectedCell?.source === t.id && E.selectedCell?.target === e.id;
+							return /* @__PURE__ */ l(_, {
+								sourceId: t.id,
+								targetId: e.id,
+								connection: n,
+								maxWeight: j,
+								colorScheme: c,
+								cellSize: f,
+								showCount: C,
+								isHighlighted: r,
+								isDimmed: i,
+								isSelected: a,
+								isSameService: t.id === e.id,
+								onClick: () => N(t.id, e.id),
+								onMouseEnter: (n) => P(t.id, e.id, n),
+								onMouseLeave: F
+							}, `cell-${t.id}-${e.id}`);
+						})]
+					}, `row-${t.id}`))]
+				})
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ l(S, {
+					colorScheme: c,
+					cellSize: f
+				}), /* @__PURE__ */ l("div", {
+					className: "flex items-center gap-3",
+					children: Object.keys(d).map((e) => {
+						let t = d[e];
+						return E.filterTypes.has(e) ? /* @__PURE__ */ u("div", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ l("div", {
+								className: "w-3 h-3 rounded-sm",
+								style: { backgroundColor: t.color }
+							}), /* @__PURE__ */ l("span", {
+								className: "text-xs text-muted-foreground",
+								children: t.label
+							})]
+						}, e) : null;
+					})
+				})]
+			}),
+			k && /* @__PURE__ */ l(x, {
+				details: k,
+				onClose: () => {
+					A(null), E.setSelectedCell(null);
+				}
+			}),
+			D && /* @__PURE__ */ l(v, {
+				details: D.details,
+				position: D.position
+			})
+		]
+	});
+}
+//#endregion
+export { C as default, g as useConnectionMatrix };