@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-config-comparator/index.es.js

@@ -0,0 +1,336 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Select as r, SelectContent as i, SelectItem as a, SelectTrigger as o, SelectValue as s } from "../select/index.es.js";
+import { ScrollArea as c } from "../scroll-area/index.es.js";
+import * as l from "react";
+import { ArrowLeftRight as u, CheckCircle2 as d, Copy as f, Equal as p, Minus as m, Plus as h, Settings as g } from "lucide-react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/waka-config-comparator/index.tsx
+var b = {
+	added: {
+		icon: h,
+		color: "text-green-500",
+		bgColor: "bg-green-500/10",
+		label: "Added"
+	},
+	removed: {
+		icon: m,
+		color: "text-red-500",
+		bgColor: "bg-red-500/10",
+		label: "Removed"
+	},
+	modified: {
+		icon: u,
+		color: "text-yellow-500",
+		bgColor: "bg-yellow-500/10",
+		label: "Modified"
+	},
+	unchanged: {
+		icon: p,
+		color: "text-muted-foreground",
+		bgColor: "",
+		label: "Unchanged"
+	}
+};
+function x(e) {
+	return e === null ? "null" : e === void 0 ? "undefined" : typeof e == "boolean" ? e ? "true" : "false" : typeof e == "string" ? `"${e}"` : String(e);
+}
+function S({ diff: t, leftEnvName: r, rightEnvName: i, onCopyLeft: a, onCopyRight: o }) {
+	let [s, c] = l.useState(!1), [u, p] = l.useState(!1), m = b[t.diffType], h = m.icon;
+	return /* @__PURE__ */ y("div", {
+		className: e("grid grid-cols-[minmax(150px,1fr)_minmax(200px,2fr)_minmax(200px,2fr)] gap-2 p-2 border-b items-center", m.bgColor),
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ v(h, { className: e("h-4 w-4 shrink-0", m.color) }), /* @__PURE__ */ v("span", {
+					className: "font-mono text-sm truncate",
+					children: t.key
+				})]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex items-center gap-2",
+				children: t.leftValue === void 0 ? /* @__PURE__ */ v("span", {
+					className: "text-xs text-muted-foreground italic",
+					children: "Not set"
+				}) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("code", {
+					className: e("flex-1 text-xs bg-muted px-2 py-1 rounded truncate", t.diffType === "removed" && "line-through opacity-50"),
+					children: x(t.leftValue)
+				}), t.diffType !== "unchanged" && o && /* @__PURE__ */ v(n, {
+					variant: "ghost",
+					size: "sm",
+					className: "h-6 w-6 p-0 shrink-0",
+					onClick: () => {
+						o?.(), p(!0), setTimeout(() => p(!1), 2e3);
+					},
+					title: `Copy to ${i}`,
+					children: u ? /* @__PURE__ */ v(d, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ v(f, { className: "h-3 w-3" })
+				})] })
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex items-center gap-2",
+				children: t.rightValue === void 0 ? /* @__PURE__ */ v("span", {
+					className: "text-xs text-muted-foreground italic",
+					children: "Not set"
+				}) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("code", {
+					className: e("flex-1 text-xs bg-muted px-2 py-1 rounded truncate", t.diffType === "added" && "bg-green-500/20"),
+					children: x(t.rightValue)
+				}), t.diffType !== "unchanged" && a && /* @__PURE__ */ v(n, {
+					variant: "ghost",
+					size: "sm",
+					className: "h-6 w-6 p-0 shrink-0",
+					onClick: () => {
+						a?.(), c(!0), setTimeout(() => c(!1), 2e3);
+					},
+					title: `Copy to ${r}`,
+					children: s ? /* @__PURE__ */ v(d, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ v(f, { className: "h-3 w-3" })
+				})] })
+			})
+		]
+	});
+}
+function C({ environments: f, leftEnvId: p, rightEnvId: m, onEnvironmentChange: h, onCopyValue: _, showDiffsOnly: b = !1, title: x = "Configuration Comparison", className: C }) {
+	let [w, T] = l.useState(p || f[0]?.id), [E, D] = l.useState(m || f[1]?.id), [O, k] = l.useState(b), A = f.find((e) => e.id === w), j = f.find((e) => e.id === E), M = l.useMemo(() => {
+		if (!A || !j) return [];
+		let e = new Map(A.values.map((e) => [e.key, e.value])), t = new Map(j.values.map((e) => [e.key, e.value])), n = new Set([...e.keys(), ...t.keys()]);
+		return Array.from(n).map((n) => {
+			let r = e.get(n), i = t.get(n), a;
+			return a = r === void 0 ? "added" : i === void 0 ? "removed" : r === i ? "unchanged" : "modified", {
+				key: n,
+				leftValue: r,
+				rightValue: i,
+				diffType: a
+			};
+		}).sort((e, t) => {
+			let n = {
+				removed: 0,
+				added: 1,
+				modified: 2,
+				unchanged: 3
+			}, r = n[e.diffType] - n[t.diffType];
+			return r === 0 ? e.key.localeCompare(t.key) : r;
+		});
+	}, [A, j]), N = O ? M.filter((e) => e.diffType !== "unchanged") : M, P = l.useMemo(() => M.reduce((e, t) => (e[t.diffType] = (e[t.diffType] || 0) + 1, e), {}), [M]);
+	return /* @__PURE__ */ y("div", {
+		className: e("flex flex-col border rounded-lg bg-background", C),
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "flex items-center justify-between gap-4 p-3 border-b",
+				children: [/* @__PURE__ */ y("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ v(g, { className: "h-5 w-5" }), /* @__PURE__ */ v("h3", {
+						className: "font-semibold",
+						children: x
+					})]
+				}), /* @__PURE__ */ y("div", {
+					className: "flex items-center gap-2",
+					children: [
+						P.modified > 0 && /* @__PURE__ */ y(t, {
+							className: "bg-yellow-500",
+							children: [P.modified, " modified"]
+						}),
+						P.added > 0 && /* @__PURE__ */ y(t, {
+							className: "bg-green-500",
+							children: [P.added, " added"]
+						}),
+						P.removed > 0 && /* @__PURE__ */ y(t, {
+							className: "bg-red-500",
+							children: [P.removed, " removed"]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex items-center gap-4 p-3 border-b bg-muted/30",
+				children: [
+					/* @__PURE__ */ y("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ v("div", {
+							className: "text-xs text-muted-foreground mb-1",
+							children: "Left Environment"
+						}), /* @__PURE__ */ y(r, {
+							value: w,
+							onValueChange: (e) => {
+								T(e), h?.(e, E);
+							},
+							children: [/* @__PURE__ */ v(o, { children: /* @__PURE__ */ v(s, {}) }), /* @__PURE__ */ v(i, { children: f.map((e) => /* @__PURE__ */ v(a, {
+								value: e.id,
+								disabled: e.id === E,
+								children: e.name
+							}, e.id)) })]
+						})]
+					}),
+					/* @__PURE__ */ v(n, {
+						variant: "outline",
+						size: "sm",
+						className: "shrink-0",
+						onClick: () => {
+							let e = w;
+							T(E), D(e), h?.(E, e);
+						},
+						children: /* @__PURE__ */ v(u, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ y("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ v("div", {
+							className: "text-xs text-muted-foreground mb-1",
+							children: "Right Environment"
+						}), /* @__PURE__ */ y(r, {
+							value: E,
+							onValueChange: (e) => {
+								D(e), h?.(w, e);
+							},
+							children: [/* @__PURE__ */ v(o, { children: /* @__PURE__ */ v(s, {}) }), /* @__PURE__ */ v(i, { children: f.map((e) => /* @__PURE__ */ v(a, {
+								value: e.id,
+								disabled: e.id === w,
+								children: e.name
+							}, e.id)) })]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex items-center gap-2 px-3 py-2 border-b",
+				children: [/* @__PURE__ */ v(n, {
+					variant: O ? "default" : "outline",
+					size: "sm",
+					onClick: () => k(!O),
+					children: "Show differences only"
+				}), /* @__PURE__ */ y("span", {
+					className: "text-xs text-muted-foreground ml-auto",
+					children: [
+						N.length,
+						" of ",
+						M.length,
+						" entries"
+					]
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "grid grid-cols-[minmax(150px,1fr)_minmax(200px,2fr)_minmax(200px,2fr)] gap-2 px-2 py-2 border-b bg-muted/50 text-xs font-medium text-muted-foreground",
+				children: [
+					/* @__PURE__ */ v("div", { children: "Key" }),
+					/* @__PURE__ */ v("div", { children: A?.name || "Left" }),
+					/* @__PURE__ */ v("div", { children: j?.name || "Right" })
+				]
+			}),
+			/* @__PURE__ */ v(c, {
+				className: "flex-1 max-h-[400px]",
+				children: N.length === 0 ? /* @__PURE__ */ y("div", {
+					className: "flex flex-col items-center justify-center h-32 text-muted-foreground",
+					children: [/* @__PURE__ */ v(d, { className: "h-8 w-8 mb-2 text-green-500" }), /* @__PURE__ */ v("span", { children: "No differences found" })]
+				}) : N.map((e) => /* @__PURE__ */ v(S, {
+					diff: e,
+					leftEnvName: A?.name || "Left",
+					rightEnvName: j?.name || "Right",
+					onCopyLeft: () => _?.(e.key, e.rightValue, E, w),
+					onCopyRight: () => _?.(e.key, e.leftValue, w, E)
+				}, e.key))
+			})
+		]
+	});
+}
+var w = [
+	{
+		id: "production",
+		name: "Production",
+		values: [
+			{
+				key: "API_URL",
+				value: "https://api.example.com"
+			},
+			{
+				key: "DEBUG",
+				value: !1
+			},
+			{
+				key: "LOG_LEVEL",
+				value: "error"
+			},
+			{
+				key: "MAX_CONNECTIONS",
+				value: 100
+			},
+			{
+				key: "CACHE_TTL",
+				value: 3600
+			},
+			{
+				key: "FEATURE_NEW_UI",
+				value: !1
+			}
+		]
+	},
+	{
+		id: "staging",
+		name: "Staging",
+		values: [
+			{
+				key: "API_URL",
+				value: "https://staging-api.example.com"
+			},
+			{
+				key: "DEBUG",
+				value: !0
+			},
+			{
+				key: "LOG_LEVEL",
+				value: "debug"
+			},
+			{
+				key: "MAX_CONNECTIONS",
+				value: 50
+			},
+			{
+				key: "CACHE_TTL",
+				value: 300
+			},
+			{
+				key: "FEATURE_NEW_UI",
+				value: !0
+			},
+			{
+				key: "TEST_MODE",
+				value: !0
+			}
+		]
+	},
+	{
+		id: "development",
+		name: "Development",
+		values: [
+			{
+				key: "API_URL",
+				value: "http://localhost:3000"
+			},
+			{
+				key: "DEBUG",
+				value: !0
+			},
+			{
+				key: "LOG_LEVEL",
+				value: "trace"
+			},
+			{
+				key: "MAX_CONNECTIONS",
+				value: 10
+			},
+			{
+				key: "FEATURE_NEW_UI",
+				value: !0
+			},
+			{
+				key: "TEST_MODE",
+				value: !0
+			},
+			{
+				key: "HOT_RELOAD",
+				value: !0
+			}
+		]
+	}
+];
+//#endregion
+export { C as WakaConfigComparator, w as defaultConfigEnvironments };

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

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);var a={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`}},o={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`]},s={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 c(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 l(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 u({services:e,connections:t,initialFilterTypes:r,initialSortOrder:i=`name`}){let[o,s]=n.useState(e),[c,u]=n.useState(t),[d,f]=n.useState(new Set(r||Object.keys(a))),[p,m]=n.useState(i),[h,g]=n.useState(null),[_,v]=n.useState(null),y=n.useMemo(()=>{let e=new Map;return c.forEach(t=>{e.set(`${t.source}-${t.target}`,t)}),e},[c]),b=n.useMemo(()=>c.filter(e=>d.has(e.type)),[c,d]);return{services:n.useMemo(()=>{let e=[...o];switch(p){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},[o,p,b]),connections:b,connectionMap:y,statistics:n.useMemo(()=>l(b,o.length),[b,o.length]),filterTypes:d,sortOrder:p,highlightedService:h,selectedCell:_,getConnection:n.useCallback((e,t)=>{let n=y.get(`${e}-${t}`);if(n&&d.has(n.type))return n},[y,d]),getService:n.useCallback(e=>o.find(t=>t.id===e),[o]),toggleFilterType:n.useCallback(e=>{f(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),setAllFilterTypes:n.useCallback(e=>{f(new Set(e))},[]),setSortOrder:m,setHighlightedService:g,setSelectedCell:v,updateConnections:n.useCallback(e=>{u(e)},[]),updateServices:n.useCallback(e=>{s(e)},[]),addConnection:n.useCallback(e=>{u(t=>[...t,e])},[]),removeConnection:n.useCallback((e,t)=>{u(n=>n.filter(n=>!(n.source===e&&n.target===t)))},[]),getRelatedConnections:n.useCallback(e=>b.filter(t=>t.source===e||t.target===e),[b])}}function d({sourceId:e,targetId:n,connection:r,maxWeight:a,colorScheme:l,cellSize:u,showCount:d,isHighlighted:f,isDimmed:p,isSelected:m,isSameService:h,onClick:g,onMouseEnter:_,onMouseLeave:v}){let y=s[u],b=o[l],x=r?c(r.weight,a):0;return h?(0,i.jsx)(`div`,{className:t.cn(y.cell,`flex items-center justify-center`,`bg-gray-100 dark:bg-gray-800/50`),children:(0,i.jsx)(`div`,{className:`w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600`})}):(0,i.jsx)(`div`,{className:t.cn(y.cell,`flex items-center justify-center cursor-pointer transition-all duration-200`,`border border-transparent`,b[x],f&&`ring-2 ring-primary ring-offset-1`,m&&`ring-2 ring-blue-500 ring-offset-2`,p&&`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 ${e} to ${n}: weight ${r.weight}`:`No connection from ${e} to ${n}`,children:d&&r&&r.count!==void 0&&r.count>0&&(0,i.jsx)(`span`,{className:t.cn(y.text,`font-medium text-gray-700 dark:text-gray-200`),children:r.count>999?`1k+`:r.count})})}function f({details:e,position:n}){let{source:o,target:s,connection:c}=e,l=a[c.type];return(0,i.jsxs)(`div`,{className:t.cn(`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:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-2`,children:[(0,i.jsx)(r.Link2,{className:`h-4 w-4 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`font-medium`,children:o.name}),(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`->`}),(0,i.jsx)(`span`,{className:`font-medium`,children:s.name})]}),(0,i.jsxs)(`div`,{className:`space-y-1.5 text-sm`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Type`}),(0,i.jsx)(`span`,{className:`px-2 py-0.5 rounded text-xs font-medium`,style:{backgroundColor:`${l.color}20`,color:l.color},children:l.label})]}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Weight`}),(0,i.jsxs)(`span`,{className:`font-medium`,children:[c.weight,`%`]})]}),c.count!==void 0&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Requests`}),(0,i.jsx)(`span`,{className:`font-medium`,children:c.count.toLocaleString()})]}),c.latency!==void 0&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Latency`}),(0,i.jsxs)(`span`,{className:`font-medium`,children:[c.latency,`ms`]})]}),c.errorRate!==void 0&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Error Rate`}),(0,i.jsxs)(`span`,{className:t.cn(`font-medium`,c.errorRate>5?`text-red-500`:c.errorRate>1?`text-yellow-500`:`text-green-500`),children:[c.errorRate,`%`]})]})]}),(0,i.jsx)(`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 p({statistics:e}){return(0,i.jsxs)(`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:[(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsx)(`div`,{className:`text-2xl font-bold text-primary`,children:e.totalConnections}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Total Connections`})]}),(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsx)(`div`,{className:`text-2xl font-bold`,children:e.averageWeight.toFixed(1)}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Avg Weight`})]}),(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsx)(`div`,{className:`text-2xl font-bold text-green-600`,children:e.maxWeight}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Max Weight`})]}),(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsx)(`div`,{className:`text-2xl font-bold`,children:e.totalCount.toLocaleString()}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Total Requests`})]}),(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsxs)(`div`,{className:`text-2xl font-bold`,children:[e.averageLatency.toFixed(1),`ms`]}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Avg Latency`})]}),(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsxs)(`div`,{className:`text-2xl font-bold`,children:[(e.density*100).toFixed(1),`%`]}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Density`})]})]})}function m({filterTypes:e,onToggleType:o,sortOrder:s,onSortChange:c}){let[l,u]=n.useState(!1);return(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3`,children:[(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsxs)(`button`,{onClick:()=>u(!l),className:t.cn(`flex items-center gap-2 px-3 py-1.5 rounded-md border text-sm transition-colors`,`hover:bg-accent`),children:[(0,i.jsx)(r.Filter,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{children:`Filter Types`}),(0,i.jsx)(r.ChevronDown,{className:t.cn(`h-4 w-4 transition-transform`,l&&`rotate-180`)})]}),l&&(0,i.jsx)(`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(a).map(n=>{let s=a[n],c=e.has(n);return(0,i.jsxs)(`button`,{onClick:()=>o(n),className:t.cn(`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-colors`,`hover:bg-accent`,!c&&`opacity-50`),children:[(0,i.jsx)(`div`,{className:`w-3 h-3 rounded-sm`,style:{backgroundColor:s.color}}),(0,i.jsx)(`span`,{className:`flex-1 text-left`,children:s.label}),c&&(0,i.jsx)(`div`,{className:`w-4 h-4 rounded-full bg-primary flex items-center justify-center`,children:(0,i.jsx)(r.X,{className:`h-3 w-3 text-primary-foreground`})})]},n)})})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.ArrowUpDown,{className:`h-4 w-4 text-muted-foreground`}),(0,i.jsxs)(`select`,{value:s,onChange:e=>c(e.target.value),className:`px-2 py-1.5 rounded-md border text-sm bg-background`,children:[(0,i.jsx)(`option`,{value:`name`,children:`Sort by Name`}),(0,i.jsx)(`option`,{value:`connections`,children:`Sort by Connections`}),(0,i.jsx)(`option`,{value:`weight`,children:`Sort by Weight`})]})]})]})}function h({details:e,onClose:n}){let{source:o,target:s,connection:c}=e,l=a[c.type];return(0,i.jsxs)(`div`,{className:`rounded-lg border bg-card p-4 shadow-sm`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between mb-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.Info,{className:`h-5 w-5 text-primary`}),(0,i.jsx)(`h4`,{className:`font-semibold`,children:`Connection Details`})]}),(0,i.jsx)(`button`,{onClick:n,className:`p-1 rounded hover:bg-accent transition-colors`,children:(0,i.jsx)(r.X,{className:`h-4 w-4`})})]}),(0,i.jsxs)(`div`,{className:`grid grid-cols-2 gap-4`,children:[(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground mb-1`,children:`Source`}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[o.color&&(0,i.jsx)(`div`,{className:`w-3 h-3 rounded-full`,style:{backgroundColor:o.color}}),(0,i.jsx)(`span`,{className:`font-medium`,children:o.name}),o.category&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[`(`,o.category,`)`]})]})]}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground mb-1`,children:`Target`}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[s.color&&(0,i.jsx)(`div`,{className:`w-3 h-3 rounded-full`,style:{backgroundColor:s.color}}),(0,i.jsx)(`span`,{className:`font-medium`,children:s.name}),s.category&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[`(`,s.category,`)`]})]})]})]}),(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground mb-1`,children:`Connection Type`}),(0,i.jsx)(`span`,{className:`inline-flex px-2 py-0.5 rounded text-xs font-medium`,style:{backgroundColor:`${l.color}20`,color:l.color},children:l.label})]}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground mb-1`,children:`Weight`}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`div`,{className:`flex-1 h-2 bg-muted rounded-full overflow-hidden`,children:(0,i.jsx)(`div`,{className:`h-full bg-primary rounded-full transition-all`,style:{width:`${c.weight}%`}})}),(0,i.jsxs)(`span`,{className:`text-sm font-medium`,children:[c.weight,`%`]})]})]})]})]}),(0,i.jsxs)(`div`,{className:`grid grid-cols-3 gap-4 mt-4 pt-4 border-t`,children:[c.count!==void 0&&(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsx)(`div`,{className:`text-lg font-bold`,children:c.count.toLocaleString()}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Requests`})]}),c.latency!==void 0&&(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsxs)(`div`,{className:`text-lg font-bold`,children:[c.latency,`ms`]}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Latency`})]}),c.errorRate!==void 0&&(0,i.jsxs)(`div`,{className:`text-center`,children:[(0,i.jsxs)(`div`,{className:t.cn(`text-lg font-bold`,c.errorRate>5?`text-red-500`:c.errorRate>1?`text-yellow-500`:`text-green-500`),children:[c.errorRate,`%`]}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Error Rate`})]})]}),c.metadata&&Object.keys(c.metadata).length>0&&(0,i.jsxs)(`div`,{className:`mt-4 pt-4 border-t`,children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground mb-2`,children:`Additional Info`}),(0,i.jsx)(`div`,{className:`grid grid-cols-2 gap-2`,children:Object.entries(c.metadata).map(([e,t])=>(0,i.jsxs)(`div`,{className:`text-sm`,children:[(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[e,`:`]}),` `,(0,i.jsx)(`span`,{className:`font-medium`,children:t})]},e))})]})]})}function g({colorScheme:e,cellSize:n}){let r=o[e],a=s[n];return(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,a.header),children:`Low`}),(0,i.jsx)(`div`,{className:`flex items-center gap-0.5`,children:r.map((e,n)=>(0,i.jsx)(`div`,{className:t.cn(`w-5 h-5 rounded-sm transition-all`,e)},n))}),(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,a.header),children:`High`})]})}function _({services:e,connections:o,title:c,showStatistics:l=!0,showFilters:_=!0,colorScheme:v=`blue`,cellSize:y=`md`,onCellClick:b,onCellHover:x,showCounts:S=!1,sortable:C=!0,className:w}){let T=u({services:e,connections:o}),[E,D]=n.useState(null),[O,k]=n.useState(null),A=n.useMemo(()=>Math.max(...T.connections.map(e=>e.weight),1),[T.connections]),j=s[y],M=(e,t)=>{let n=T.getConnection(e,t),r=T.getService(e),i=T.getService(t);if(n&&r&&i){let a={source:r,target:i,connection:n};k(a),T.setSelectedCell({source:e,target:t}),b?.(a)}else k(null),T.setSelectedCell(null),b?.(null)},N=(e,t,n)=>{let r=T.getConnection(e,t),i=T.getService(e),a=T.getService(t);if(r&&i&&a){let t={source:i,target:a,connection:r},o=n.currentTarget.getBoundingClientRect();D({details:t,position:{x:o.left+o.width/2,y:o.top}}),T.setHighlightedService(e),x?.(t)}},P=()=>{D(null),T.setHighlightedService(null),x?.(null)};return(0,i.jsxs)(`div`,{className:t.cn(`space-y-4`,w),children:[(c||_)&&(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center justify-between gap-4`,children:[c&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(r.Layers,{className:`h-5 w-5 text-primary`}),(0,i.jsx)(`h3`,{className:`text-lg font-semibold`,children:c})]}),_&&C&&(0,i.jsx)(m,{filterTypes:T.filterTypes,onToggleType:T.toggleFilterType,sortOrder:T.sortOrder,onSortChange:T.setSortOrder})]}),l&&(0,i.jsx)(p,{statistics:T.statistics}),(0,i.jsx)(`div`,{className:`overflow-auto`,children:(0,i.jsxs)(`div`,{className:`inline-block min-w-full`,children:[(0,i.jsxs)(`div`,{className:`flex`,children:[(0,i.jsx)(`div`,{className:t.cn(j.cell,`flex-shrink-0`)}),T.services.map(e=>(0,i.jsx)(`div`,{className:t.cn(j.cell,`flex items-end justify-center pb-1 flex-shrink-0`),children:(0,i.jsx)(`span`,{className:t.cn(j.header,`font-medium text-muted-foreground truncate transform -rotate-45 origin-bottom-left whitespace-nowrap`),style:{maxWidth:`60px`},title:e.name,children:e.name})},`col-${e.id}`))]}),T.services.map(e=>(0,i.jsxs)(`div`,{className:`flex`,children:[(0,i.jsx)(`div`,{className:t.cn(j.cell,`flex items-center justify-end pr-2 flex-shrink-0`),children:(0,i.jsx)(`span`,{className:t.cn(j.header,`font-medium text-muted-foreground truncate`),style:{maxWidth:`80px`},title:e.name,children:e.name})}),T.services.map(t=>{let n=T.getConnection(e.id,t.id),r=T.highlightedService===e.id||T.highlightedService===t.id,a=T.highlightedService!==null&&T.highlightedService!==e.id&&T.highlightedService!==t.id,o=T.selectedCell?.source===e.id&&T.selectedCell?.target===t.id;return(0,i.jsx)(d,{sourceId:e.id,targetId:t.id,connection:n,maxWeight:A,colorScheme:v,cellSize:y,showCount:S,isHighlighted:r,isDimmed:a,isSelected:o,isSameService:e.id===t.id,onClick:()=>M(e.id,t.id),onMouseEnter:n=>N(e.id,t.id,n),onMouseLeave:P},`cell-${e.id}-${t.id}`)})]},`row-${e.id}`))]})}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(g,{colorScheme:v,cellSize:y}),(0,i.jsx)(`div`,{className:`flex items-center gap-3`,children:Object.keys(a).map(e=>{let t=a[e];return T.filterTypes.has(e)?(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(`div`,{className:`w-3 h-3 rounded-sm`,style:{backgroundColor:t.color}}),(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:t.label})]},e):null})})]}),O&&(0,i.jsx)(h,{details:O,onClose:()=>{k(null),T.setSelectedCell(null)}}),E&&(0,i.jsx)(f,{details:E.details,position:E.position})]})}exports.default=_,exports.useConnectionMatrix=u;

package/dist/components/waka-connection-matrix/index.d.ts

@@ -92,21 +92,21 @@ export declare function useConnectionMatrix({ services: initialServices, connect
     statistics: ConnectionStatistics;
     filterTypes: Set<ConnectionType>;
     sortOrder: "name" | "weight" | "connections";
-    highlightedService: string;
+    highlightedService: string | null;
     selectedCell: {
         source: string;
         target: string;
-    };
+    } | null;
     getConnection: (sourceId: string, targetId: string) => Connection | undefined;
     getService: (id: string) => Service | undefined;
     toggleFilterType: (type: ConnectionType) => void;
     setAllFilterTypes: (types: ConnectionType[]) => void;
     setSortOrder: React.Dispatch<React.SetStateAction<"name" | "weight" | "connections">>;
-    setHighlightedService: React.Dispatch<React.SetStateAction<string>>;
+    setHighlightedService: React.Dispatch<React.SetStateAction<string | null>>;
     setSelectedCell: React.Dispatch<React.SetStateAction<{
         source: string;
         target: string;
-    }>>;
+    } | null>>;
     updateConnections: (newConnections: Connection[]) => void;
     updateServices: (newServices: Service[]) => void;
     addConnection: (connection: Connection) => void;