@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-server-rack/index.es.js

@@ -0,0 +1,579 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-server-rack/index.tsx
+var a = {
+	online: {
+		led: "hsl(var(--success))",
+		glow: "hsl(var(--success) / 0.6)",
+		bg: "hsl(var(--success) / 0.1)"
+	},
+	warning: {
+		led: "hsl(var(--warning))",
+		glow: "hsl(var(--warning) / 0.6)",
+		bg: "hsl(var(--warning) / 0.1)"
+	},
+	offline: {
+		led: "hsl(var(--destructive))",
+		glow: "hsl(var(--destructive) / 0.6)",
+		bg: "hsl(var(--destructive) / 0.1)"
+	},
+	maintenance: {
+		led: "hsl(var(--info))",
+		glow: "hsl(var(--info) / 0.6)",
+		bg: "hsl(var(--info) / 0.1)"
+	}
+}, o = 24;
+function s({ value: t, label: n, color: a, animated: o }) {
+	let s = () => t >= 90 ? "hsl(var(--destructive))" : t >= 70 ? "hsl(var(--warning))" : a;
+	return /* @__PURE__ */ i("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ r("span", {
+				className: "text-[8px] font-medium text-zinc-400 w-6",
+				children: n
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "relative h-1.5 flex-1 rounded-full bg-zinc-800/80 overflow-hidden",
+				children: /* @__PURE__ */ r("div", {
+					className: e("absolute inset-y-0 left-0 rounded-full", o && "transition-all duration-500 ease-out"),
+					style: {
+						width: `${t}%`,
+						backgroundColor: s(),
+						boxShadow: `0 0 6px ${s()}40`
+					}
+				})
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "text-[8px] font-mono text-zinc-500 w-7 text-right",
+				children: [t, "%"]
+			})
+		]
+	});
+}
+function c({ status: t, animated: n }) {
+	let o = a[t];
+	return /* @__PURE__ */ i("div", {
+		className: "relative flex items-center justify-center",
+		children: [/* @__PURE__ */ r("div", {
+			className: e("absolute w-4 h-4 rounded-full blur-sm", n && t !== "offline" && "animate-pulse"),
+			style: { backgroundColor: o.glow }
+		}), /* @__PURE__ */ r("div", {
+			className: "relative w-2.5 h-2.5 rounded-full border border-zinc-600",
+			style: {
+				backgroundColor: o.led,
+				boxShadow: `0 0 8px ${o.glow}, inset 0 -1px 2px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2)`
+			}
+		})]
+	});
+}
+function l({ server: l, isSelected: u, showMetrics: d, animated: f, onClick: p }) {
+	let [m, h] = t.useState(!1), g = a[l.status], _ = l.height * o;
+	return /* @__PURE__ */ i("div", {
+		className: e("group relative cursor-pointer select-none", f && "transition-all duration-200"),
+		style: { height: _ },
+		onClick: p,
+		onMouseEnter: () => h(!0),
+		onMouseLeave: () => h(!1),
+		children: [/* @__PURE__ */ i("div", {
+			className: e("absolute inset-0 rounded-sm", f && "transition-all duration-200"),
+			style: {
+				background: u ? "linear-gradient(180deg, #3f3f46 0%, #27272a 50%, #18181b 100%)" : "linear-gradient(180deg, #2a2a2e 0%, #1f1f23 50%, #18181b 100%)",
+				boxShadow: u ? `inset 0 1px 0 rgba(255,255,255,0.1),
+               inset 0 -1px 0 rgba(0,0,0,0.5),
+               0 0 20px ${g.glow},
+               0 4px 12px rgba(0,0,0,0.4)` : "inset 0 1px 0 rgba(255,255,255,0.05),\n               inset 0 -1px 0 rgba(0,0,0,0.5),\n               0 2px 4px rgba(0,0,0,0.2)",
+				transform: m ? "translateZ(4px) scale(1.01)" : "translateZ(0)",
+				border: u ? `1px solid ${g.led}40` : "1px solid rgba(63,63,70,0.5)"
+			},
+			children: [
+				/* @__PURE__ */ r("div", {
+					className: "absolute top-0 left-1 right-1 h-px",
+					style: { background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent)" }
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "absolute inset-1 flex items-center gap-2 px-2",
+					children: [
+						/* @__PURE__ */ r("div", {
+							className: "flex flex-col justify-center gap-0.5 w-8 h-full py-1",
+							children: Array.from({ length: Math.min(l.height * 3, 6) }).map((e, t) => /* @__PURE__ */ r("div", {
+								className: "h-0.5 rounded-full",
+								style: { background: "linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%)" }
+							}, t))
+						}),
+						/* @__PURE__ */ r(c, {
+							status: l.status,
+							animated: f
+						}),
+						/* @__PURE__ */ i("div", {
+							className: "flex-1 min-w-0 flex flex-col justify-center gap-0.5",
+							children: [
+								/* @__PURE__ */ i("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ r("span", {
+										className: "text-[10px] font-semibold text-zinc-200 truncate",
+										children: l.name
+									}), /* @__PURE__ */ r("span", {
+										className: "text-[8px] font-mono text-zinc-500 uppercase",
+										children: l.status
+									})]
+								}),
+								d && l.height >= 2 && /* @__PURE__ */ i("div", {
+									className: "flex flex-col gap-0.5 mt-0.5",
+									children: [
+										/* @__PURE__ */ r(s, {
+											value: l.cpu,
+											label: "CPU",
+											color: "hsl(var(--chart-1))",
+											animated: f
+										}),
+										/* @__PURE__ */ r(s, {
+											value: l.ram,
+											label: "RAM",
+											color: "hsl(var(--chart-3))",
+											animated: f
+										}),
+										l.height >= 3 && /* @__PURE__ */ r(s, {
+											value: l.disk,
+											label: "DSK",
+											color: "hsl(var(--info))",
+											animated: f
+										})
+									]
+								}),
+								d && l.height === 1 && /* @__PURE__ */ i("div", {
+									className: "flex items-center gap-2 text-[7px] font-mono text-zinc-500",
+									children: [
+										/* @__PURE__ */ i("span", { children: [
+											"CPU:",
+											l.cpu,
+											"%"
+										] }),
+										/* @__PURE__ */ i("span", { children: [
+											"RAM:",
+											l.ram,
+											"%"
+										] }),
+										/* @__PURE__ */ i("span", { children: [
+											"DSK:",
+											l.disk,
+											"%"
+										] })
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ i("div", {
+							className: "flex items-center gap-0.5",
+							children: [l.network && /* @__PURE__ */ i("div", {
+								className: "flex flex-col items-end mr-2 text-[7px] font-mono text-zinc-500",
+								children: [/* @__PURE__ */ i("span", {
+									className: "text-success",
+									children: [
+										"▲",
+										" ",
+										l.network.out
+									]
+								}), /* @__PURE__ */ i("span", {
+									className: "text-info",
+									children: [
+										"▼",
+										" ",
+										l.network.in
+									]
+								})]
+							}), Array.from({ length: Math.min(l.height * 2, 4) }).map((t, n) => /* @__PURE__ */ r("div", {
+								className: e("w-2 h-3 rounded-sm", f && "transition-colors duration-300"),
+								style: {
+									background: "linear-gradient(180deg, #1a1a1a, #0a0a0a)",
+									border: "1px solid #2a2a2a",
+									boxShadow: "inset 0 1px 2px rgba(0,0,0,0.5)"
+								}
+							}, n))]
+						})
+					]
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "absolute bottom-0 left-0 right-0 h-px",
+					style: { background: "rgba(0,0,0,0.8)" }
+				})
+			]
+		}), m && /* @__PURE__ */ i("div", {
+			className: e("absolute left-full top-0 ml-4 z-50 p-3 rounded-lg shadow-2xl", "bg-zinc-900/95 backdrop-blur-sm border border-zinc-700", f && "animate-in fade-in-0 slide-in-from-left-2 duration-200"),
+			style: { minWidth: 200 },
+			children: [/* @__PURE__ */ i("div", {
+				className: "flex items-center gap-2 mb-2",
+				children: [/* @__PURE__ */ r(c, {
+					status: l.status,
+					animated: !1
+				}), /* @__PURE__ */ r("span", {
+					className: "font-semibold text-zinc-100",
+					children: l.name
+				})]
+			}), /* @__PURE__ */ i("div", {
+				className: "space-y-1.5 text-xs",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "flex justify-between text-zinc-400",
+						children: [/* @__PURE__ */ r("span", { children: "Status" }), /* @__PURE__ */ r("span", {
+							className: "font-medium capitalize",
+							style: { color: g.led },
+							children: l.status
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex justify-between text-zinc-400",
+						children: [/* @__PURE__ */ r("span", { children: "Unit" }), /* @__PURE__ */ i("span", {
+							className: "font-mono",
+							children: [
+								"U",
+								l.unit,
+								l.height > 1 ? `-U${l.unit + l.height - 1}` : ""
+							]
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "flex justify-between text-zinc-400",
+						children: [/* @__PURE__ */ r("span", { children: "Size" }), /* @__PURE__ */ i("span", {
+							className: "font-mono",
+							children: [l.height, "U"]
+						})]
+					}),
+					/* @__PURE__ */ r("div", { className: "border-t border-zinc-700 my-2" }),
+					/* @__PURE__ */ r(s, {
+						value: l.cpu,
+						label: "CPU",
+						color: "hsl(var(--chart-1))"
+					}),
+					/* @__PURE__ */ r(s, {
+						value: l.ram,
+						label: "RAM",
+						color: "hsl(var(--chart-3))"
+					}),
+					/* @__PURE__ */ r(s, {
+						value: l.disk,
+						label: "DSK",
+						color: "hsl(var(--info))"
+					}),
+					l.network && /* @__PURE__ */ i(n, { children: [
+						/* @__PURE__ */ r("div", { className: "border-t border-zinc-700 my-2" }),
+						/* @__PURE__ */ i("div", {
+							className: "flex justify-between text-zinc-400",
+							children: [/* @__PURE__ */ r("span", { children: "Network In" }), /* @__PURE__ */ i("span", {
+								className: "font-mono text-info",
+								children: [l.network.in, " Mbps"]
+							})]
+						}),
+						/* @__PURE__ */ i("div", {
+							className: "flex justify-between text-zinc-400",
+							children: [/* @__PURE__ */ r("span", { children: "Network Out" }), /* @__PURE__ */ i("span", {
+								className: "font-mono text-success",
+								children: [l.network.out, " Mbps"]
+							})]
+						})
+					] })
+				]
+			})]
+		})]
+	});
+}
+function u({ unitNumber: e }) {
+	return /* @__PURE__ */ r("div", {
+		className: "relative",
+		style: { height: o },
+		children: /* @__PURE__ */ r("div", {
+			className: "absolute inset-0 rounded-sm",
+			style: {
+				background: "linear-gradient(180deg, rgba(24,24,27,0.5) 0%, rgba(9,9,11,0.5) 100%)",
+				border: "1px dashed rgba(63,63,70,0.3)"
+			},
+			children: /* @__PURE__ */ r("div", {
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ i("span", {
+					className: "text-[8px] font-mono text-zinc-700",
+					children: [
+						"U",
+						e,
+						" - EMPTY"
+					]
+				})
+			})
+		})
+	});
+}
+function d({ servers: n, totalUnits: a = 42, onServerClick: s, selectedServer: c, showMetrics: d = !0, animated: f = !0, className: p }) {
+	let m = t.useMemo(() => {
+		let e = /* @__PURE__ */ new Map();
+		return n.forEach((t) => {
+			for (let n = 0; n < t.height; n++) e.set(t.unit + n, t);
+		}), e;
+	}, [n]), h = t.useMemo(() => {
+		let e = [], t = /* @__PURE__ */ new Set();
+		for (let n = a; n >= 1; n--) {
+			let r = m.get(n);
+			r && !t.has(r.id) ? n === r.unit + r.height - 1 && (e.push({
+				type: "server",
+				server: r,
+				unit: r.unit
+			}), t.add(r.id)) : r || e.push({
+				type: "empty",
+				unit: n
+			});
+		}
+		return e;
+	}, [m, a]), g = a * o;
+	return /* @__PURE__ */ i("div", {
+		className: e("relative select-none", p),
+		style: {
+			perspective: "1200px",
+			perspectiveOrigin: "center center"
+		},
+		children: [/* @__PURE__ */ i("div", {
+			className: "relative",
+			style: {
+				transform: "rotateX(2deg) rotateY(-2deg)",
+				transformStyle: "preserve-3d"
+			},
+			children: [
+				/* @__PURE__ */ r("div", {
+					className: "absolute -left-6 top-0 w-5 rounded-l-md",
+					style: {
+						height: g + 40,
+						background: "linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 40%, #1f1f1f 100%)",
+						boxShadow: "inset -2px 0 4px rgba(0,0,0,0.5), -4px 0 8px rgba(0,0,0,0.3)",
+						transform: "translateZ(-10px)"
+					},
+					children: Array.from({ length: Math.ceil(a / 3) }).map((e, t) => /* @__PURE__ */ r("div", {
+						className: "absolute left-1/2 -translate-x-1/2 w-2 h-2 rounded-full",
+						style: {
+							top: 20 + o * 3 * t,
+							background: "radial-gradient(circle, #0a0a0a 0%, #1a1a1a 100%)",
+							boxShadow: "inset 0 1px 2px rgba(0,0,0,0.8)"
+						}
+					}, t))
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "absolute -right-6 top-0 w-5 rounded-r-md",
+					style: {
+						height: g + 40,
+						background: "linear-gradient(90deg, #1f1f1f 0%, #2a2a2a 60%, #1a1a1a 100%)",
+						boxShadow: "inset 2px 0 4px rgba(0,0,0,0.5), 4px 0 8px rgba(0,0,0,0.3)",
+						transform: "translateZ(-10px)"
+					},
+					children: Array.from({ length: Math.ceil(a / 3) }).map((e, t) => /* @__PURE__ */ r("div", {
+						className: "absolute left-1/2 -translate-x-1/2 w-2 h-2 rounded-full",
+						style: {
+							top: 20 + o * 3 * t,
+							background: "radial-gradient(circle, #0a0a0a 0%, #1a1a1a 100%)",
+							boxShadow: "inset 0 1px 2px rgba(0,0,0,0.8)"
+						}
+					}, t))
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "absolute -left-14 top-5 flex flex-col-reverse",
+					style: { height: g },
+					children: Array.from({ length: a }).map((t, n) => {
+						let a = n + 1, s = m.has(a);
+						return /* @__PURE__ */ r("div", {
+							className: "flex items-center justify-end pr-1",
+							style: { height: o },
+							children: /* @__PURE__ */ i("span", {
+								className: e("text-[9px] font-mono", s ? "text-zinc-400" : "text-zinc-600"),
+								children: ["U", a.toString().padStart(2, "0")]
+							})
+						}, a);
+					})
+				}),
+				/* @__PURE__ */ i("div", {
+					className: "relative rounded-md overflow-hidden",
+					style: {
+						padding: "20px 4px",
+						background: "linear-gradient(180deg, #141417 0%, #0c0c0e 50%, #0a0a0c 100%)",
+						boxShadow: "\n              inset 0 2px 4px rgba(255,255,255,0.02),\n              inset 0 -2px 4px rgba(0,0,0,0.5),\n              0 8px 32px rgba(0,0,0,0.5),\n              0 2px 8px rgba(0,0,0,0.3)\n            ",
+						border: "1px solid #2a2a2e"
+					},
+					children: [
+						/* @__PURE__ */ r("div", {
+							className: "absolute top-0 left-0 right-0 h-4",
+							style: {
+								background: "linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%)",
+								borderBottom: "1px solid #0a0a0a"
+							},
+							children: /* @__PURE__ */ r("div", { className: "absolute inset-x-4 top-1.5 h-1 rounded-full bg-zinc-800" })
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "absolute bottom-0 left-0 right-0 h-4",
+							style: {
+								background: "linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%)",
+								borderTop: "1px solid #3a3a3a"
+							},
+							children: /* @__PURE__ */ r("div", { className: "absolute inset-x-4 bottom-1.5 h-1 rounded-full bg-zinc-800" })
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "relative flex flex-col gap-0.5",
+							style: { minWidth: 300 },
+							children: h.map((e, t) => e.type === "server" && e.server ? /* @__PURE__ */ r(l, {
+								server: e.server,
+								isSelected: c === e.server.id,
+								showMetrics: d,
+								animated: f,
+								onClick: () => s?.(e.server.id)
+							}, e.server.id) : /* @__PURE__ */ r(u, { unitNumber: e.unit }, `empty-${e.unit}`))
+						})
+					]
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "absolute -bottom-2 left-4 right-4 h-4 rounded-b-xl",
+					style: {
+						background: "linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%)",
+						filter: "blur(4px)",
+						transform: "translateZ(-20px) rotateX(60deg)"
+					}
+				})
+			]
+		}), /* @__PURE__ */ r("div", {
+			className: "absolute inset-0 pointer-events-none rounded-lg",
+			style: {
+				background: `radial-gradient(ellipse at center, ${n.some((e) => e.status === "offline") ? "hsl(var(--destructive) / 0.05)" : n.some((e) => e.status === "warning") ? "hsl(var(--warning) / 0.05)" : "hsl(var(--success) / 0.03)"} 0%, transparent 70%)`,
+				filter: "blur(20px)"
+			}
+		})]
+	});
+}
+function f({ className: n }) {
+	let [a, o] = t.useState(null), s = [
+		{
+			id: "srv-001",
+			name: "Web Server 01",
+			unit: 40,
+			height: 2,
+			status: "online",
+			cpu: 45,
+			ram: 62,
+			disk: 34,
+			network: {
+				in: 850,
+				out: 420
+			}
+		},
+		{
+			id: "srv-002",
+			name: "Database Primary",
+			unit: 37,
+			height: 3,
+			status: "online",
+			cpu: 78,
+			ram: 85,
+			disk: 67,
+			network: {
+				in: 1200,
+				out: 980
+			}
+		},
+		{
+			id: "srv-003",
+			name: "Cache Server",
+			unit: 35,
+			height: 2,
+			status: "warning",
+			cpu: 92,
+			ram: 88,
+			disk: 45,
+			network: {
+				in: 2100,
+				out: 1850
+			}
+		},
+		{
+			id: "srv-004",
+			name: "API Gateway",
+			unit: 33,
+			height: 1,
+			status: "online",
+			cpu: 34,
+			ram: 41,
+			disk: 22,
+			network: {
+				in: 3500,
+				out: 3200
+			}
+		},
+		{
+			id: "srv-005",
+			name: "Worker Node 01",
+			unit: 31,
+			height: 2,
+			status: "online",
+			cpu: 56,
+			ram: 67,
+			disk: 41
+		},
+		{
+			id: "srv-006",
+			name: "Worker Node 02",
+			unit: 29,
+			height: 2,
+			status: "offline",
+			cpu: 0,
+			ram: 0,
+			disk: 41
+		},
+		{
+			id: "srv-007",
+			name: "Storage Array",
+			unit: 25,
+			height: 4,
+			status: "online",
+			cpu: 12,
+			ram: 24,
+			disk: 89,
+			network: {
+				in: 500,
+				out: 4500
+			}
+		},
+		{
+			id: "srv-008",
+			name: "Backup Server",
+			unit: 22,
+			height: 3,
+			status: "maintenance",
+			cpu: 5,
+			ram: 15,
+			disk: 72
+		}
+	];
+	return /* @__PURE__ */ i("div", {
+		className: e("p-8 bg-zinc-950 rounded-2xl", n),
+		children: [/* @__PURE__ */ i("div", {
+			className: "mb-6",
+			children: [/* @__PURE__ */ r("h3", {
+				className: "text-lg font-semibold text-zinc-100",
+				children: "Data Center Rack A-01"
+			}), /* @__PURE__ */ i("p", {
+				className: "text-sm text-zinc-500",
+				children: [
+					s.filter((e) => e.status === "online").length,
+					" online,",
+					" ",
+					s.filter((e) => e.status === "warning").length,
+					" warning,",
+					" ",
+					s.filter((e) => e.status === "offline").length,
+					" offline"
+				]
+			})]
+		}), /* @__PURE__ */ r(d, {
+			servers: s,
+			totalUnits: 42,
+			selectedServer: a || void 0,
+			onServerClick: (e) => o((t) => t === e ? null : e),
+			showMetrics: !0,
+			animated: !0
+		})]
+	});
+}
+//#endregion
+export { d as WakaServerRack, f as WakaServerRackDemo };

package/dist/components/waka-service-graph/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../badge/index.cjs.js`),r=require(`../button/index.cjs.js`),i=require(`../tooltip/index.cjs.js`);let a=require(`react`);a=e.__toESM(a);let o=require(`lucide-react`),s=require(`react/jsx-runtime`);var c={api:{icon:o.Server,color:`bg-blue-500`},database:{icon:o.Database,color:`bg-purple-500`},cache:{icon:o.Zap,color:`bg-yellow-500`},queue:{icon:o.MessageSquare,color:`bg-orange-500`},gateway:{icon:o.Globe,color:`bg-green-500`},external:{icon:o.Network,color:`bg-gray-500`}},l={healthy:{color:`text-green-500`,borderColor:`border-green-500`,icon:o.CheckCircle2},degraded:{color:`text-yellow-500`,borderColor:`border-yellow-500`,icon:o.AlertTriangle},unhealthy:{color:`text-red-500`,borderColor:`border-red-500`,icon:o.XCircle},unknown:{color:`text-gray-500`,borderColor:`border-gray-500`,icon:o.AlertTriangle}};function u({service:e,isSelected:n,onClick:r,showMetrics:a,position:o}){let u=c[e.type],d=l[e.health],f=u.icon,p=d.icon;return(0,s.jsx)(i.TooltipProvider,{children:(0,s.jsxs)(i.Tooltip,{children:[(0,s.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,s.jsx)(`div`,{className:t.cn(`absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer`,`transition-all duration-200 hover:scale-110`),style:{left:o.x,top:o.y},onClick:r,children:(0,s.jsxs)(`div`,{className:t.cn(`relative bg-background border-2 rounded-xl p-3 shadow-lg`,d.borderColor,n&&`ring-2 ring-primary ring-offset-2`),children:[(0,s.jsx)(`div`,{className:t.cn(`absolute -top-2 -right-2`,d.color),children:(0,s.jsx)(p,{className:`h-4 w-4`})}),(0,s.jsx)(`div`,{className:t.cn(`w-10 h-10 rounded-lg flex items-center justify-center text-white`,u.color),children:(0,s.jsx)(f,{className:`h-5 w-5`})}),(0,s.jsxs)(`div`,{className:`mt-2 text-center`,children:[(0,s.jsx)(`div`,{className:`font-medium text-sm truncate max-w-[100px]`,children:e.name}),e.namespace&&(0,s.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.namespace})]}),a&&(0,s.jsxs)(`div`,{className:`mt-2 text-xs text-center space-y-0.5`,children:[e.requestsPerSec!==void 0&&(0,s.jsxs)(`div`,{className:`text-muted-foreground`,children:[e.requestsPerSec,` req/s`]}),e.errorRate!==void 0&&e.errorRate>0&&(0,s.jsxs)(`div`,{className:`text-red-500`,children:[(e.errorRate*100).toFixed(1),`% errors`]})]})]})})}),(0,s.jsx)(i.TooltipContent,{side:`right`,className:`max-w-xs`,children:(0,s.jsxs)(`div`,{className:`space-y-2`,children:[(0,s.jsx)(`div`,{className:`font-semibold`,children:e.name}),(0,s.jsxs)(`div`,{className:`grid grid-cols-2 gap-x-4 gap-y-1 text-xs`,children:[(0,s.jsx)(`span`,{className:`text-muted-foreground`,children:`Type:`}),(0,s.jsx)(`span`,{className:`capitalize`,children:e.type}),(0,s.jsx)(`span`,{className:`text-muted-foreground`,children:`Health:`}),(0,s.jsx)(`span`,{className:d.color,children:e.health}),e.version&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`span`,{className:`text-muted-foreground`,children:`Version:`}),(0,s.jsx)(`span`,{children:e.version})]}),e.replicas!==void 0&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`span`,{className:`text-muted-foreground`,children:`Replicas:`}),(0,s.jsx)(`span`,{children:e.replicas})]}),e.latencyP50!==void 0&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`span`,{className:`text-muted-foreground`,children:`Latency P50:`}),(0,s.jsxs)(`span`,{children:[e.latencyP50,`ms`]})]}),e.latencyP99!==void 0&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`span`,{className:`text-muted-foreground`,children:`Latency P99:`}),(0,s.jsxs)(`span`,{children:[e.latencyP99,`ms`]})]})]})]})})]})})}function d({start:e,end:t,connection:n,onClick:r}){let i=(e.x+t.x)/2,a=(e.y+t.y)/2,o=t.x-e.x,c=t.y-e.y,l=Math.sqrt(o*o+c*c),u=.2,d=-c/l*u*l,f=o/l*u*l,p=i+d,m=a+f,h=`M ${e.x} ${e.y} Q ${p} ${m} ${t.x} ${t.y}`,g=n.errorRate||0;return(0,s.jsxs)(`g`,{className:`cursor-pointer hover:opacity-70`,onClick:r,children:[(0,s.jsx)(`path`,{d:h,fill:`none`,stroke:g>.05?`#ef4444`:g>.01?`#eab308`:`#6b7280`,strokeWidth:Math.min(Math.max((n.requestsPerSec||1)/100,1),4),strokeOpacity:.6,markerEnd:`url(#arrowhead)`}),n.requestsPerSec!==void 0&&(0,s.jsxs)(`text`,{x:p,y:m,textAnchor:`middle`,dy:-8,className:`fill-muted-foreground text-xs`,children:[n.requestsPerSec,` req/s`]})]})}function f({services:e,connections:i,selectedService:l,onServiceClick:f,onConnectionClick:p,onRefresh:m,showMetrics:h=!0,className:g}){let[_,v]=a.useState(1),y=a.useRef(null),b=a.useMemo(()=>{let t={},n=2*Math.PI/e.length;return e.forEach((e,r)=>{let i=r*n-Math.PI/2;t[e.id]={x:300+140*Math.cos(i),y:200+140*Math.sin(i)}}),t},[e]),x=a.useMemo(()=>e.reduce((e,t)=>(e[t.health]=(e[t.health]||0)+1,e),{}),[e]);return(0,s.jsxs)(`div`,{className:t.cn(`flex flex-col border rounded-lg bg-background`,g),children:[(0,s.jsxs)(`div`,{className:`flex items-center justify-between gap-4 p-3 border-b`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,s.jsx)(o.Network,{className:`h-5 w-5`}),(0,s.jsx)(`h3`,{className:`font-semibold`,children:`Service Mesh`}),(0,s.jsxs)(n.Badge,{variant:`secondary`,children:[e.length,` services`]}),(0,s.jsxs)(`div`,{className:`hidden md:flex items-center gap-1`,children:[x.healthy>0&&(0,s.jsxs)(n.Badge,{className:`bg-green-500 text-xs`,children:[x.healthy,` healthy`]}),x.degraded>0&&(0,s.jsxs)(n.Badge,{className:`bg-yellow-500 text-xs`,children:[x.degraded,` degraded`]}),x.unhealthy>0&&(0,s.jsxs)(n.Badge,{className:`bg-red-500 text-xs`,children:[x.unhealthy,` unhealthy`]})]})]}),(0,s.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,s.jsx)(r.Button,{variant:`ghost`,size:`sm`,onClick:()=>v(e=>Math.max(.5,e-.1)),children:(0,s.jsx)(o.ZoomOut,{className:`h-4 w-4`})}),(0,s.jsxs)(`span`,{className:`text-xs text-muted-foreground w-12 text-center`,children:[(_*100).toFixed(0),`%`]}),(0,s.jsx)(r.Button,{variant:`ghost`,size:`sm`,onClick:()=>v(e=>Math.min(2,e+.1)),children:(0,s.jsx)(o.ZoomIn,{className:`h-4 w-4`})}),(0,s.jsx)(r.Button,{variant:`ghost`,size:`sm`,onClick:()=>v(1),children:(0,s.jsx)(o.Maximize2,{className:`h-4 w-4`})}),m&&(0,s.jsx)(r.Button,{variant:`ghost`,size:`sm`,onClick:m,children:(0,s.jsx)(o.RefreshCw,{className:`h-4 w-4`})})]})]}),(0,s.jsx)(`div`,{className:`flex items-center gap-4 px-3 py-2 border-b bg-muted/30 text-xs flex-wrap`,children:Object.entries(c).map(([e,n])=>(n.icon,(0,s.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,s.jsx)(`div`,{className:t.cn(`w-3 h-3 rounded`,n.color)}),(0,s.jsx)(`span`,{className:`capitalize`,children:e})]},e)))}),(0,s.jsx)(`div`,{ref:y,className:`flex-1 relative overflow-hidden min-h-[400px]`,style:{cursor:`grab`},children:(0,s.jsxs)(`div`,{className:`absolute inset-0 transition-transform duration-200`,style:{transform:`scale(${_})`,transformOrigin:`center center`},children:[(0,s.jsxs)(`svg`,{className:`absolute inset-0 w-full h-full pointer-events-none`,"aria-hidden":`true`,focusable:`false`,children:[(0,s.jsx)(`defs`,{children:(0,s.jsx)(`marker`,{id:`arrowhead`,markerWidth:`10`,markerHeight:`7`,refX:`9`,refY:`3.5`,orient:`auto`,children:(0,s.jsx)(`polygon`,{points:`0 0, 10 3.5, 0 7`,fill:`#6b7280`})})}),i.map((e,t)=>{let n=b[e.source],r=b[e.target];return!n||!r?null:(0,s.jsx)(d,{start:n,end:r,connection:e,onClick:()=>p?.(e)},t)})]}),e.map(e=>(0,s.jsx)(u,{service:e,isSelected:l===e.id,onClick:()=>f?.(e),showMetrics:h,position:b[e.id]},e.id))]})})]})}var p=[{id:`gateway`,name:`API Gateway`,type:`gateway`,health:`healthy`,namespace:`ingress`,version:`v2.1.0`,replicas:3,requestsPerSec:1250,errorRate:.001},{id:`auth`,name:`Auth Service`,type:`api`,health:`healthy`,namespace:`auth`,version:`v1.5.2`,replicas:2,requestsPerSec:450,errorRate:.002},{id:`users`,name:`User Service`,type:`api`,health:`healthy`,namespace:`users`,version:`v3.0.1`,replicas:3,requestsPerSec:320,errorRate:.001},{id:`orders`,name:`Order Service`,type:`api`,health:`degraded`,namespace:`commerce`,version:`v2.8.0`,replicas:4,requestsPerSec:180,errorRate:.05},{id:`postgres`,name:`PostgreSQL`,type:`database`,health:`healthy`,version:`15.2`,replicas:1},{id:`redis`,name:`Redis Cache`,type:`cache`,health:`healthy`,version:`7.0`,replicas:3},{id:`rabbitmq`,name:`RabbitMQ`,type:`queue`,health:`healthy`,version:`3.12`,replicas:3},{id:`stripe`,name:`Stripe API`,type:`external`,health:`healthy`}],m=[{source:`gateway`,target:`auth`,protocol:`gRPC`,requestsPerSec:450,errorRate:.001},{source:`gateway`,target:`users`,protocol:`gRPC`,requestsPerSec:320,errorRate:.001},{source:`gateway`,target:`orders`,protocol:`gRPC`,requestsPerSec:180,errorRate:.03},{source:`auth`,target:`postgres`,protocol:`PostgreSQL`,requestsPerSec:200},{source:`auth`,target:`redis`,protocol:`Redis`,requestsPerSec:800},{source:`users`,target:`postgres`,protocol:`PostgreSQL`,requestsPerSec:150},{source:`orders`,target:`postgres`,protocol:`PostgreSQL`,requestsPerSec:100},{source:`orders`,target:`rabbitmq`,protocol:`AMQP`,requestsPerSec:50},{source:`orders`,target:`stripe`,protocol:`HTTPS`,requestsPerSec:30}];exports.WakaServiceGraph=f,exports.defaultConnections=m,exports.defaultServices=p;