@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-region-map/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(`react/jsx-runtime`);var i=(e,t,n,r)=>{let i=(t+180)/360*n,a=e*Math.PI/180,o=Math.log(Math.tan(Math.PI/4+a/2)),s=r/2-o*r/(2*Math.PI);return{x:i,y:Math.max(0,Math.min(r,s))}},a=e=>e===void 0?`#6b7280`:e<50?`#22c55e`:e<100?`#eab308`:`#ef4444`,o={active:`#22c55e`,degraded:`#eab308`,offline:`#6b7280`},s={aws:`#ff9900`,gcp:`#4285f4`,azure:`#0078d4`,custom:`#8b5cf6`},c=({region:e,x:n,y:i,isSelected:c,isHovered:l,showLatency:u,animated:d,onClick:f,onMouseEnter:p,onMouseLeave:m})=>{let h=o[e.status],g=e.provider?s[e.provider]:`#6b7280`,_=a(e.latency),v=c?12:l?10:8;return(0,r.jsxs)(`g`,{transform:`translate(${n}, ${i})`,onClick:f,onMouseEnter:p,onMouseLeave:m,style:{cursor:`pointer`},role:`button`,"aria-label":`${e.name} - ${e.status}${e.latency?`, ${e.latency}ms`:``}`,tabIndex:0,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&f()},children:[d&&e.status===`active`&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`circle`,{r:v+8,fill:`none`,stroke:h,strokeWidth:2,opacity:0,children:[(0,r.jsx)(`animate`,{attributeName:`r`,values:`${v};${v+20}`,dur:`2s`,repeatCount:`indefinite`}),(0,r.jsx)(`animate`,{attributeName:`opacity`,values:`0.6;0`,dur:`2s`,repeatCount:`indefinite`})]}),(0,r.jsxs)(`circle`,{r:v+4,fill:`none`,stroke:h,strokeWidth:1.5,opacity:0,children:[(0,r.jsx)(`animate`,{attributeName:`r`,values:`${v};${v+15}`,dur:`2s`,begin:`0.5s`,repeatCount:`indefinite`}),(0,r.jsx)(`animate`,{attributeName:`opacity`,values:`0.4;0`,dur:`2s`,begin:`0.5s`,repeatCount:`indefinite`})]})]}),c&&(0,r.jsx)(`circle`,{r:v+6,fill:`none`,stroke:`#3b82f6`,strokeWidth:2,strokeDasharray:`4 2`,className:`animate-spin`,style:{animationDuration:`8s`}}),(0,r.jsx)(`circle`,{r:v,fill:g,stroke:`white`,strokeWidth:2,opacity:.9,className:t.cn(`transition-all duration-200`,l&&`drop-shadow-lg`)}),(0,r.jsx)(`circle`,{r:v*.5,fill:h,stroke:`white`,strokeWidth:1}),u&&e.latency!==void 0&&(0,r.jsxs)(`g`,{transform:`translate(${v+4}, ${-v})`,children:[(0,r.jsx)(`rect`,{x:-2,y:-8,width:e.latency>=100?32:28,height:16,rx:4,fill:_,stroke:`white`,strokeWidth:1}),(0,r.jsxs)(`text`,{x:e.latency>=100?14:12,y:1,textAnchor:`middle`,dominantBaseline:`middle`,fill:`white`,fontSize:9,fontWeight:`bold`,children:[e.latency,`ms`]})]}),l&&(0,r.jsxs)(`g`,{transform:`translate(0, -30)`,children:[(0,r.jsx)(`rect`,{x:-60,y:-40,width:120,height:e.latency===void 0?38:52,rx:6,fill:`rgba(0,0,0,0.85)`,stroke:`rgba(255,255,255,0.2)`,strokeWidth:1}),(0,r.jsx)(`polygon`,{points:`-6,12 6,12 0,20`,fill:`rgba(0,0,0,0.85)`,transform:`translate(0, -40)`}),(0,r.jsx)(`text`,{y:-62,textAnchor:`middle`,fill:`white`,fontSize:11,fontWeight:`600`,children:e.name}),(0,r.jsx)(`text`,{y:-48,textAnchor:`middle`,fill:h,fontSize:10,children:e.status.charAt(0).toUpperCase()+e.status.slice(1)}),e.latency!==void 0&&(0,r.jsxs)(`text`,{y:-34,textAnchor:`middle`,fill:_,fontSize:10,fontWeight:`500`,children:[`Latency: `,e.latency,`ms`]}),e.provider&&(0,r.jsx)(`text`,{y:e.latency===void 0?-34:-20,textAnchor:`middle`,fill:`#9ca3af`,fontSize:9,children:e.provider.toUpperCase()})]})]})},l=({userX:e,userY:t,regionX:n,regionY:i,latency:o,animated:s})=>{let c=a(o),l=`M ${e} ${t} Q ${(e+n)/2} ${(t+i)/2-20} ${n} ${i}`;return(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`path`,{d:l,fill:`none`,stroke:c,strokeWidth:1.5,strokeOpacity:.6,strokeDasharray:s?`6 4`:void 0,children:s&&(0,r.jsx)(`animate`,{attributeName:`stroke-dashoffset`,from:`0`,to:`-20`,dur:`1s`,repeatCount:`indefinite`})}),s&&(0,r.jsx)(`circle`,{r:3,fill:c,children:(0,r.jsx)(`animateMotion`,{dur:`2s`,repeatCount:`indefinite`,path:l})})]})},u=({x:e,y:t,animated:n})=>(0,r.jsxs)(`g`,{transform:`translate(${e}, ${t})`,children:[n&&(0,r.jsxs)(`circle`,{r:8,fill:`none`,stroke:`#3b82f6`,strokeWidth:2,opacity:0,children:[(0,r.jsx)(`animate`,{attributeName:`r`,values:`8;25`,dur:`1.5s`,repeatCount:`indefinite`}),(0,r.jsx)(`animate`,{attributeName:`opacity`,values:`0.8;0`,dur:`1.5s`,repeatCount:`indefinite`})]}),(0,r.jsx)(`circle`,{r:10,fill:`#3b82f6`,stroke:`white`,strokeWidth:3}),(0,r.jsx)(`circle`,{r:4,fill:`white`}),(0,r.jsx)(`text`,{y:22,textAnchor:`middle`,fill:`#3b82f6`,fontSize:10,fontWeight:`600`,children:`You`})]}),d=({regions:e,userLocation:d,selectedRegion:f,onRegionSelect:p,showLatency:m=!0,showConnections:h=!1,animated:g=!0,className:_})=>{let v=n.useRef(null),[y,b]=n.useState(null),[x,S]=n.useState({width:800,height:400});n.useEffect(()=>{let e=()=>{if(v.current){let{width:e,height:t}=v.current.getBoundingClientRect();S({width:e||800,height:t||400})}};return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let C=n.useMemo(()=>e.map(e=>({...e,...i(e.location.lat,e.location.lng,100,100)})),[e]),w=n.useMemo(()=>d?i(d.lat,d.lng,100,100):null,[d]);return(0,r.jsxs)(`div`,{ref:v,className:t.cn(`relative h-full w-full min-h-[300px] overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-b from-slate-50 to-slate-100`,_),children:[(0,r.jsxs)(`svg`,{viewBox:`0 0 100 100`,preserveAspectRatio:`xMidYMid meet`,className:`h-full w-full`,"aria-label":`Cloud region map`,role:`img`,children:[(0,r.jsxs)(`defs`,{children:[(0,r.jsxs)(`linearGradient`,{id:`oceanGradient`,x1:`0%`,y1:`0%`,x2:`0%`,y2:`100%`,children:[(0,r.jsx)(`stop`,{offset:`0%`,stopColor:`#e0f2fe`}),(0,r.jsx)(`stop`,{offset:`100%`,stopColor:`#bae6fd`})]}),(0,r.jsxs)(`linearGradient`,{id:`landGradient`,x1:`0%`,y1:`0%`,x2:`0%`,y2:`100%`,children:[(0,r.jsx)(`stop`,{offset:`0%`,stopColor:`#f1f5f9`}),(0,r.jsx)(`stop`,{offset:`100%`,stopColor:`#e2e8f0`})]}),(0,r.jsx)(`filter`,{id:`dropShadow`,x:`-20%`,y:`-20%`,width:`140%`,height:`140%`,children:(0,r.jsx)(`feDropShadow`,{dx:`0`,dy:`1`,stdDeviation:`1`,floodOpacity:`0.2`})}),(0,r.jsxs)(`filter`,{id:`glow`,x:`-50%`,y:`-50%`,width:`200%`,height:`200%`,children:[(0,r.jsx)(`feGaussianBlur`,{stdDeviation:`2`,result:`coloredBlur`}),(0,r.jsxs)(`feMerge`,{children:[(0,r.jsx)(`feMergeNode`,{in:`coloredBlur`}),(0,r.jsx)(`feMergeNode`,{in:`SourceGraphic`})]})]})]}),(0,r.jsx)(`rect`,{x:`0`,y:`0`,width:`100`,height:`100`,fill:`url(#oceanGradient)`}),(0,r.jsxs)(`g`,{stroke:`#cbd5e1`,strokeWidth:`0.1`,opacity:`0.5`,children:[[10,20,30,40,50,60,70,80,90].map(e=>(0,r.jsx)(`line`,{x1:e,y1:`0`,x2:e,y2:`100`},`v-${e}`)),[10,20,30,40,50,60,70,80,90].map(e=>(0,r.jsx)(`line`,{x1:`0`,y1:e,x2:`100`,y2:e},`h-${e}`))]}),(0,r.jsxs)(`g`,{filter:`url(#dropShadow)`,children:[(0,r.jsx)(`path`,{d:`M 5,22 L 8,18 L 12,16 L 18,15 L 24,17 L 28,20 L 30,25 L 30,32 L 27,38 L 22,42 L 16,44 L 12,42 L 10,38 L 8,32 L 6,26 Z`,fill:`url(#landGradient)`,stroke:`#94a3b8`,strokeWidth:`0.3`}),(0,r.jsx)(`path`,{d:`M 22,48 L 26,46 L 30,48 L 32,54 L 30,62 L 26,70 L 22,72 L 20,68 L 20,58 L 21,52 Z`,fill:`url(#landGradient)`,stroke:`#94a3b8`,strokeWidth:`0.3`}),(0,r.jsx)(`path`,{d:`M 45,20 L 48,18 L 52,18 L 56,20 L 58,24 L 56,28 L 52,30 L 48,30 L 45,28 L 44,24 Z`,fill:`url(#landGradient)`,stroke:`#94a3b8`,strokeWidth:`0.3`}),(0,r.jsx)(`path`,{d:`M 45,32 L 50,30 L 56,32 L 58,38 L 56,48 L 52,56 L 46,58 L 42,54 L 42,44 L 44,36 Z`,fill:`url(#landGradient)`,stroke:`#94a3b8`,strokeWidth:`0.3`}),(0,r.jsx)(`path`,{d:`M 58,18 L 65,16 L 75,15 L 85,18 L 90,24 L 88,32 L 82,38 L 74,40 L 66,38 L 60,32 L 58,24 Z`,fill:`url(#landGradient)`,stroke:`#94a3b8`,strokeWidth:`0.3`}),(0,r.jsx)(`path`,{d:`M 78,52 L 84,50 L 90,52 L 92,58 L 88,64 L 82,66 L 76,62 L 76,56 Z`,fill:`url(#landGradient)`,stroke:`#94a3b8`,strokeWidth:`0.3`})]}),h&&w&&(0,r.jsx)(`g`,{children:C.map(e=>(0,r.jsx)(l,{userX:w.x,userY:w.y,regionX:e.x,regionY:e.y,latency:e.latency,animated:g},`connection-${e.id}`))}),(0,r.jsx)(`g`,{children:C.map(e=>(0,r.jsx)(c,{region:e,x:e.x,y:e.y,isSelected:f===e.id,isHovered:y===e.id,showLatency:m,animated:g,onClick:()=>p?.(e.id),onMouseEnter:()=>b(e.id),onMouseLeave:()=>b(null)},e.id))}),w&&(0,r.jsx)(u,{x:w.x,y:w.y,animated:g})]}),(0,r.jsxs)(`div`,{className:`absolute bottom-3 left-3 rounded-lg border border-gray-200 bg-white/90 p-2.5 shadow-sm backdrop-blur-sm`,children:[(0,r.jsx)(`div`,{className:`mb-1.5 text-[10px] font-semibold text-gray-700`,children:`Status`}),(0,r.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:Object.entries(o).map(([e,t])=>(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,r.jsx)(`div`,{className:`h-2.5 w-2.5 rounded-full`,style:{backgroundColor:t}}),(0,r.jsx)(`span`,{className:`text-[10px] capitalize text-gray-600`,children:e})]},e))}),m&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`mb-1.5 mt-2 text-[10px] font-semibold text-gray-700`,children:`Latency`}),(0,r.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,r.jsx)(`div`,{className:`h-2.5 w-2.5 rounded-full bg-green-500`}),(0,r.jsx)(`span`,{className:`text-[10px] text-gray-600`,children:`<50ms`})]}),(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,r.jsx)(`div`,{className:`h-2.5 w-2.5 rounded-full bg-yellow-500`}),(0,r.jsx)(`span`,{className:`text-[10px] text-gray-600`,children:`<100ms`})]}),(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,r.jsx)(`div`,{className:`h-2.5 w-2.5 rounded-full bg-red-500`}),(0,r.jsx)(`span`,{className:`text-[10px] text-gray-600`,children:`>100ms`})]})]})]})]}),(0,r.jsxs)(`div`,{className:`absolute bottom-3 right-3 rounded-lg border border-gray-200 bg-white/90 p-2.5 shadow-sm backdrop-blur-sm`,children:[(0,r.jsx)(`div`,{className:`mb-1.5 text-[10px] font-semibold text-gray-700`,children:`Providers`}),(0,r.jsx)(`div`,{className:`flex flex-col gap-1`,children:Object.entries(s).map(([e,t])=>(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,r.jsx)(`div`,{className:`h-2.5 w-2.5 rounded-full`,style:{backgroundColor:t}}),(0,r.jsx)(`span`,{className:`text-[10px] uppercase text-gray-600`,children:e})]},e))})]}),f&&(0,r.jsx)(`div`,{className:`absolute right-3 top-3 rounded-lg border border-blue-200 bg-white/95 p-3 shadow-md backdrop-blur-sm`,children:(()=>{let t=e.find(e=>e.id===f);return t?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`mb-1 text-sm font-semibold text-gray-800`,children:t.name}),(0,r.jsxs)(`div`,{className:`space-y-0.5 text-xs text-gray-600`,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-gray-400`,children:`Status:`}),(0,r.jsx)(`span`,{className:`font-medium capitalize`,style:{color:o[t.status]},children:t.status})]}),t.latency!==void 0&&(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-gray-400`,children:`Latency:`}),(0,r.jsxs)(`span`,{className:`font-medium`,style:{color:a(t.latency)},children:[t.latency,`ms`]})]}),t.provider&&(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-gray-400`,children:`Provider:`}),(0,r.jsx)(`span`,{className:`font-medium uppercase`,style:{color:s[t.provider]},children:t.provider})]}),(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-gray-400`,children:`Coords:`}),(0,r.jsxs)(`span`,{className:`font-mono text-[10px]`,children:[t.location.lat.toFixed(2),`, `,t.location.lng.toFixed(2)]})]})]})]}):null})()})]})};exports.default=d;

package/dist/components/waka-region-map/index.es.js

@@ -0,0 +1,572 @@
+"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-region-map/index.tsx
+var a = (e, t, n, r) => {
+	let i = (t + 180) / 360 * n, a = e * Math.PI / 180, o = Math.log(Math.tan(Math.PI / 4 + a / 2)), s = r / 2 - o * r / (2 * Math.PI);
+	return {
+		x: i,
+		y: Math.max(0, Math.min(r, s))
+	};
+}, o = (e) => e === void 0 ? "#6b7280" : e < 50 ? "#22c55e" : e < 100 ? "#eab308" : "#ef4444", s = {
+	active: "#22c55e",
+	degraded: "#eab308",
+	offline: "#6b7280"
+}, c = {
+	aws: "#ff9900",
+	gcp: "#4285f4",
+	azure: "#0078d4",
+	custom: "#8b5cf6"
+}, l = ({ region: t, x: a, y: l, isSelected: u, isHovered: d, showLatency: f, animated: p, onClick: m, onMouseEnter: h, onMouseLeave: g }) => {
+	let _ = s[t.status], v = t.provider ? c[t.provider] : "#6b7280", y = o(t.latency), b = u ? 12 : d ? 10 : 8;
+	return /* @__PURE__ */ i("g", {
+		transform: `translate(${a}, ${l})`,
+		onClick: m,
+		onMouseEnter: h,
+		onMouseLeave: g,
+		style: { cursor: "pointer" },
+		role: "button",
+		"aria-label": `${t.name} - ${t.status}${t.latency ? `, ${t.latency}ms` : ""}`,
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && m();
+		},
+		children: [
+			p && t.status === "active" && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("circle", {
+				r: b + 8,
+				fill: "none",
+				stroke: _,
+				strokeWidth: 2,
+				opacity: 0,
+				children: [/* @__PURE__ */ r("animate", {
+					attributeName: "r",
+					values: `${b};${b + 20}`,
+					dur: "2s",
+					repeatCount: "indefinite"
+				}), /* @__PURE__ */ r("animate", {
+					attributeName: "opacity",
+					values: "0.6;0",
+					dur: "2s",
+					repeatCount: "indefinite"
+				})]
+			}), /* @__PURE__ */ i("circle", {
+				r: b + 4,
+				fill: "none",
+				stroke: _,
+				strokeWidth: 1.5,
+				opacity: 0,
+				children: [/* @__PURE__ */ r("animate", {
+					attributeName: "r",
+					values: `${b};${b + 15}`,
+					dur: "2s",
+					begin: "0.5s",
+					repeatCount: "indefinite"
+				}), /* @__PURE__ */ r("animate", {
+					attributeName: "opacity",
+					values: "0.4;0",
+					dur: "2s",
+					begin: "0.5s",
+					repeatCount: "indefinite"
+				})]
+			})] }),
+			u && /* @__PURE__ */ r("circle", {
+				r: b + 6,
+				fill: "none",
+				stroke: "#3b82f6",
+				strokeWidth: 2,
+				strokeDasharray: "4 2",
+				className: "animate-spin",
+				style: { animationDuration: "8s" }
+			}),
+			/* @__PURE__ */ r("circle", {
+				r: b,
+				fill: v,
+				stroke: "white",
+				strokeWidth: 2,
+				opacity: .9,
+				className: e("transition-all duration-200", d && "drop-shadow-lg")
+			}),
+			/* @__PURE__ */ r("circle", {
+				r: b * .5,
+				fill: _,
+				stroke: "white",
+				strokeWidth: 1
+			}),
+			f && t.latency !== void 0 && /* @__PURE__ */ i("g", {
+				transform: `translate(${b + 4}, ${-b})`,
+				children: [/* @__PURE__ */ r("rect", {
+					x: -2,
+					y: -8,
+					width: t.latency >= 100 ? 32 : 28,
+					height: 16,
+					rx: 4,
+					fill: y,
+					stroke: "white",
+					strokeWidth: 1
+				}), /* @__PURE__ */ i("text", {
+					x: t.latency >= 100 ? 14 : 12,
+					y: 1,
+					textAnchor: "middle",
+					dominantBaseline: "middle",
+					fill: "white",
+					fontSize: 9,
+					fontWeight: "bold",
+					children: [t.latency, "ms"]
+				})]
+			}),
+			d && /* @__PURE__ */ i("g", {
+				transform: "translate(0, -30)",
+				children: [
+					/* @__PURE__ */ r("rect", {
+						x: -60,
+						y: -40,
+						width: 120,
+						height: t.latency === void 0 ? 38 : 52,
+						rx: 6,
+						fill: "rgba(0,0,0,0.85)",
+						stroke: "rgba(255,255,255,0.2)",
+						strokeWidth: 1
+					}),
+					/* @__PURE__ */ r("polygon", {
+						points: "-6,12 6,12 0,20",
+						fill: "rgba(0,0,0,0.85)",
+						transform: "translate(0, -40)"
+					}),
+					/* @__PURE__ */ r("text", {
+						y: -62,
+						textAnchor: "middle",
+						fill: "white",
+						fontSize: 11,
+						fontWeight: "600",
+						children: t.name
+					}),
+					/* @__PURE__ */ r("text", {
+						y: -48,
+						textAnchor: "middle",
+						fill: _,
+						fontSize: 10,
+						children: t.status.charAt(0).toUpperCase() + t.status.slice(1)
+					}),
+					t.latency !== void 0 && /* @__PURE__ */ i("text", {
+						y: -34,
+						textAnchor: "middle",
+						fill: y,
+						fontSize: 10,
+						fontWeight: "500",
+						children: [
+							"Latency: ",
+							t.latency,
+							"ms"
+						]
+					}),
+					t.provider && /* @__PURE__ */ r("text", {
+						y: t.latency === void 0 ? -34 : -20,
+						textAnchor: "middle",
+						fill: "#9ca3af",
+						fontSize: 9,
+						children: t.provider.toUpperCase()
+					})
+				]
+			})
+		]
+	});
+}, u = ({ userX: e, userY: t, regionX: n, regionY: a, latency: s, animated: c }) => {
+	let l = o(s), u = `M ${e} ${t} Q ${(e + n) / 2} ${(t + a) / 2 - 20} ${n} ${a}`;
+	return /* @__PURE__ */ i("g", { children: [/* @__PURE__ */ r("path", {
+		d: u,
+		fill: "none",
+		stroke: l,
+		strokeWidth: 1.5,
+		strokeOpacity: .6,
+		strokeDasharray: c ? "6 4" : void 0,
+		children: c && /* @__PURE__ */ r("animate", {
+			attributeName: "stroke-dashoffset",
+			from: "0",
+			to: "-20",
+			dur: "1s",
+			repeatCount: "indefinite"
+		})
+	}), c && /* @__PURE__ */ r("circle", {
+		r: 3,
+		fill: l,
+		children: /* @__PURE__ */ r("animateMotion", {
+			dur: "2s",
+			repeatCount: "indefinite",
+			path: u
+		})
+	})] });
+}, d = ({ x: e, y: t, animated: n }) => /* @__PURE__ */ i("g", {
+	transform: `translate(${e}, ${t})`,
+	children: [
+		n && /* @__PURE__ */ i("circle", {
+			r: 8,
+			fill: "none",
+			stroke: "#3b82f6",
+			strokeWidth: 2,
+			opacity: 0,
+			children: [/* @__PURE__ */ r("animate", {
+				attributeName: "r",
+				values: "8;25",
+				dur: "1.5s",
+				repeatCount: "indefinite"
+			}), /* @__PURE__ */ r("animate", {
+				attributeName: "opacity",
+				values: "0.8;0",
+				dur: "1.5s",
+				repeatCount: "indefinite"
+			})]
+		}),
+		/* @__PURE__ */ r("circle", {
+			r: 10,
+			fill: "#3b82f6",
+			stroke: "white",
+			strokeWidth: 3
+		}),
+		/* @__PURE__ */ r("circle", {
+			r: 4,
+			fill: "white"
+		}),
+		/* @__PURE__ */ r("text", {
+			y: 22,
+			textAnchor: "middle",
+			fill: "#3b82f6",
+			fontSize: 10,
+			fontWeight: "600",
+			children: "You"
+		})
+	]
+}), f = ({ regions: f, userLocation: p, selectedRegion: m, onRegionSelect: h, showLatency: g = !0, showConnections: _ = !1, animated: v = !0, className: y }) => {
+	let b = t.useRef(null), [x, S] = t.useState(null), [C, w] = t.useState({
+		width: 800,
+		height: 400
+	});
+	t.useEffect(() => {
+		let e = () => {
+			if (b.current) {
+				let { width: e, height: t } = b.current.getBoundingClientRect();
+				w({
+					width: e || 800,
+					height: t || 400
+				});
+			}
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []);
+	let T = t.useMemo(() => f.map((e) => ({
+		...e,
+		...a(e.location.lat, e.location.lng, 100, 100)
+	})), [f]), E = t.useMemo(() => p ? a(p.lat, p.lng, 100, 100) : null, [p]);
+	return /* @__PURE__ */ i("div", {
+		ref: b,
+		className: e("relative h-full w-full min-h-[300px] overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-b from-slate-50 to-slate-100", y),
+		children: [
+			/* @__PURE__ */ i("svg", {
+				viewBox: "0 0 100 100",
+				preserveAspectRatio: "xMidYMid meet",
+				className: "h-full w-full",
+				"aria-label": "Cloud region map",
+				role: "img",
+				children: [
+					/* @__PURE__ */ i("defs", { children: [
+						/* @__PURE__ */ i("linearGradient", {
+							id: "oceanGradient",
+							x1: "0%",
+							y1: "0%",
+							x2: "0%",
+							y2: "100%",
+							children: [/* @__PURE__ */ r("stop", {
+								offset: "0%",
+								stopColor: "#e0f2fe"
+							}), /* @__PURE__ */ r("stop", {
+								offset: "100%",
+								stopColor: "#bae6fd"
+							})]
+						}),
+						/* @__PURE__ */ i("linearGradient", {
+							id: "landGradient",
+							x1: "0%",
+							y1: "0%",
+							x2: "0%",
+							y2: "100%",
+							children: [/* @__PURE__ */ r("stop", {
+								offset: "0%",
+								stopColor: "#f1f5f9"
+							}), /* @__PURE__ */ r("stop", {
+								offset: "100%",
+								stopColor: "#e2e8f0"
+							})]
+						}),
+						/* @__PURE__ */ r("filter", {
+							id: "dropShadow",
+							x: "-20%",
+							y: "-20%",
+							width: "140%",
+							height: "140%",
+							children: /* @__PURE__ */ r("feDropShadow", {
+								dx: "0",
+								dy: "1",
+								stdDeviation: "1",
+								floodOpacity: "0.2"
+							})
+						}),
+						/* @__PURE__ */ i("filter", {
+							id: "glow",
+							x: "-50%",
+							y: "-50%",
+							width: "200%",
+							height: "200%",
+							children: [/* @__PURE__ */ r("feGaussianBlur", {
+								stdDeviation: "2",
+								result: "coloredBlur"
+							}), /* @__PURE__ */ i("feMerge", { children: [/* @__PURE__ */ r("feMergeNode", { in: "coloredBlur" }), /* @__PURE__ */ r("feMergeNode", { in: "SourceGraphic" })] })]
+						})
+					] }),
+					/* @__PURE__ */ r("rect", {
+						x: "0",
+						y: "0",
+						width: "100",
+						height: "100",
+						fill: "url(#oceanGradient)"
+					}),
+					/* @__PURE__ */ i("g", {
+						stroke: "#cbd5e1",
+						strokeWidth: "0.1",
+						opacity: "0.5",
+						children: [[
+							10,
+							20,
+							30,
+							40,
+							50,
+							60,
+							70,
+							80,
+							90
+						].map((e) => /* @__PURE__ */ r("line", {
+							x1: e,
+							y1: "0",
+							x2: e,
+							y2: "100"
+						}, `v-${e}`)), [
+							10,
+							20,
+							30,
+							40,
+							50,
+							60,
+							70,
+							80,
+							90
+						].map((e) => /* @__PURE__ */ r("line", {
+							x1: "0",
+							y1: e,
+							x2: "100",
+							y2: e
+						}, `h-${e}`))]
+					}),
+					/* @__PURE__ */ i("g", {
+						filter: "url(#dropShadow)",
+						children: [
+							/* @__PURE__ */ r("path", {
+								d: "M 5,22 L 8,18 L 12,16 L 18,15 L 24,17 L 28,20 L 30,25 L 30,32 L 27,38 L 22,42 L 16,44 L 12,42 L 10,38 L 8,32 L 6,26 Z",
+								fill: "url(#landGradient)",
+								stroke: "#94a3b8",
+								strokeWidth: "0.3"
+							}),
+							/* @__PURE__ */ r("path", {
+								d: "M 22,48 L 26,46 L 30,48 L 32,54 L 30,62 L 26,70 L 22,72 L 20,68 L 20,58 L 21,52 Z",
+								fill: "url(#landGradient)",
+								stroke: "#94a3b8",
+								strokeWidth: "0.3"
+							}),
+							/* @__PURE__ */ r("path", {
+								d: "M 45,20 L 48,18 L 52,18 L 56,20 L 58,24 L 56,28 L 52,30 L 48,30 L 45,28 L 44,24 Z",
+								fill: "url(#landGradient)",
+								stroke: "#94a3b8",
+								strokeWidth: "0.3"
+							}),
+							/* @__PURE__ */ r("path", {
+								d: "M 45,32 L 50,30 L 56,32 L 58,38 L 56,48 L 52,56 L 46,58 L 42,54 L 42,44 L 44,36 Z",
+								fill: "url(#landGradient)",
+								stroke: "#94a3b8",
+								strokeWidth: "0.3"
+							}),
+							/* @__PURE__ */ r("path", {
+								d: "M 58,18 L 65,16 L 75,15 L 85,18 L 90,24 L 88,32 L 82,38 L 74,40 L 66,38 L 60,32 L 58,24 Z",
+								fill: "url(#landGradient)",
+								stroke: "#94a3b8",
+								strokeWidth: "0.3"
+							}),
+							/* @__PURE__ */ r("path", {
+								d: "M 78,52 L 84,50 L 90,52 L 92,58 L 88,64 L 82,66 L 76,62 L 76,56 Z",
+								fill: "url(#landGradient)",
+								stroke: "#94a3b8",
+								strokeWidth: "0.3"
+							})
+						]
+					}),
+					_ && E && /* @__PURE__ */ r("g", { children: T.map((e) => /* @__PURE__ */ r(u, {
+						userX: E.x,
+						userY: E.y,
+						regionX: e.x,
+						regionY: e.y,
+						latency: e.latency,
+						animated: v
+					}, `connection-${e.id}`)) }),
+					/* @__PURE__ */ r("g", { children: T.map((e) => /* @__PURE__ */ r(l, {
+						region: e,
+						x: e.x,
+						y: e.y,
+						isSelected: m === e.id,
+						isHovered: x === e.id,
+						showLatency: g,
+						animated: v,
+						onClick: () => h?.(e.id),
+						onMouseEnter: () => S(e.id),
+						onMouseLeave: () => S(null)
+					}, e.id)) }),
+					E && /* @__PURE__ */ r(d, {
+						x: E.x,
+						y: E.y,
+						animated: v
+					})
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "absolute bottom-3 left-3 rounded-lg border border-gray-200 bg-white/90 p-2.5 shadow-sm backdrop-blur-sm",
+				children: [
+					/* @__PURE__ */ r("div", {
+						className: "mb-1.5 text-[10px] font-semibold text-gray-700",
+						children: "Status"
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "flex flex-wrap gap-2",
+						children: Object.entries(s).map(([e, t]) => /* @__PURE__ */ i("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ r("div", {
+								className: "h-2.5 w-2.5 rounded-full",
+								style: { backgroundColor: t }
+							}), /* @__PURE__ */ r("span", {
+								className: "text-[10px] capitalize text-gray-600",
+								children: e
+							})]
+						}, e))
+					}),
+					g && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("div", {
+						className: "mb-1.5 mt-2 text-[10px] font-semibold text-gray-700",
+						children: "Latency"
+					}), /* @__PURE__ */ i("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ i("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ r("div", { className: "h-2.5 w-2.5 rounded-full bg-green-500" }), /* @__PURE__ */ r("span", {
+									className: "text-[10px] text-gray-600",
+									children: "<50ms"
+								})]
+							}),
+							/* @__PURE__ */ i("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ r("div", { className: "h-2.5 w-2.5 rounded-full bg-yellow-500" }), /* @__PURE__ */ r("span", {
+									className: "text-[10px] text-gray-600",
+									children: "<100ms"
+								})]
+							}),
+							/* @__PURE__ */ i("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ r("div", { className: "h-2.5 w-2.5 rounded-full bg-red-500" }), /* @__PURE__ */ r("span", {
+									className: "text-[10px] text-gray-600",
+									children: ">100ms"
+								})]
+							})
+						]
+					})] })
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "absolute bottom-3 right-3 rounded-lg border border-gray-200 bg-white/90 p-2.5 shadow-sm backdrop-blur-sm",
+				children: [/* @__PURE__ */ r("div", {
+					className: "mb-1.5 text-[10px] font-semibold text-gray-700",
+					children: "Providers"
+				}), /* @__PURE__ */ r("div", {
+					className: "flex flex-col gap-1",
+					children: Object.entries(c).map(([e, t]) => /* @__PURE__ */ i("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ r("div", {
+							className: "h-2.5 w-2.5 rounded-full",
+							style: { backgroundColor: t }
+						}), /* @__PURE__ */ r("span", {
+							className: "text-[10px] uppercase text-gray-600",
+							children: e
+						})]
+					}, e))
+				})]
+			}),
+			m && /* @__PURE__ */ r("div", {
+				className: "absolute right-3 top-3 rounded-lg border border-blue-200 bg-white/95 p-3 shadow-md backdrop-blur-sm",
+				children: (() => {
+					let e = f.find((e) => e.id === m);
+					return e ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("div", {
+						className: "mb-1 text-sm font-semibold text-gray-800",
+						children: e.name
+					}), /* @__PURE__ */ i("div", {
+						className: "space-y-0.5 text-xs text-gray-600",
+						children: [
+							/* @__PURE__ */ i("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ r("span", {
+									className: "text-gray-400",
+									children: "Status:"
+								}), /* @__PURE__ */ r("span", {
+									className: "font-medium capitalize",
+									style: { color: s[e.status] },
+									children: e.status
+								})]
+							}),
+							e.latency !== void 0 && /* @__PURE__ */ i("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ r("span", {
+									className: "text-gray-400",
+									children: "Latency:"
+								}), /* @__PURE__ */ i("span", {
+									className: "font-medium",
+									style: { color: o(e.latency) },
+									children: [e.latency, "ms"]
+								})]
+							}),
+							e.provider && /* @__PURE__ */ i("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ r("span", {
+									className: "text-gray-400",
+									children: "Provider:"
+								}), /* @__PURE__ */ r("span", {
+									className: "font-medium uppercase",
+									style: { color: c[e.provider] },
+									children: e.provider
+								})]
+							}),
+							/* @__PURE__ */ i("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ r("span", {
+									className: "text-gray-400",
+									children: "Coords:"
+								}), /* @__PURE__ */ i("span", {
+									className: "font-mono text-[10px]",
+									children: [
+										e.location.lat.toFixed(2),
+										", ",
+										e.location.lng.toFixed(2)
+									]
+								})]
+							})
+						]
+					})] }) : null;
+				})()
+			})
+		]
+	});
+};
+//#endregion
+export { f as default };

package/dist/components/waka-resource-gauge/index.cjs.js

@@ -0,0 +1,6 @@
+"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(`react/jsx-runtime`);var i={warning:70,danger:85},a={sm:{size:80,strokeWidth:6,fontSize:`text-sm`,labelSize:`text-xs`,unitSize:`text-[10px]`,sparklineHeight:16},md:{size:120,strokeWidth:8,fontSize:`text-xl`,labelSize:`text-sm`,unitSize:`text-xs`,sparklineHeight:24},lg:{size:180,strokeWidth:12,fontSize:`text-3xl`,labelSize:`text-base`,unitSize:`text-sm`,sparklineHeight:32}},o={full:{startAngle:0,endAngle:360,rotation:-90},semi:{startAngle:0,endAngle:180,rotation:-90},quarter:{startAngle:0,endAngle:90,rotation:-90}};function s(e,t,n,r){let i=(r-90)*Math.PI/180;return{x:e+n*Math.cos(i),y:t+n*Math.sin(i)}}function c(e,t,n,r,i){let a=s(e,t,n,i),o=s(e,t,n,r),c=i-r<=180?`0`:`1`;return[`M`,a.x,a.y,`A`,n,n,0,c,0,o.x,o.y].join(` `)}function l(e,t){return e>=t.danger?{color:`#ef4444`,glowColor:`rgba(239, 68, 68, 0.6)`,zone:`danger`}:e>=t.warning?{color:`#eab308`,glowColor:`rgba(234, 179, 8, 0.4)`,zone:`warning`}:{color:`#22c55e`,glowColor:`rgba(34, 197, 94, 0.3)`,zone:`safe`}}function u({data:e,width:n,height:i,color:a,className:o}){if(e.length<2)return null;let s=Math.max(...e,100),c=Math.min(...e,0),l=s-c||1,u=`M ${e.map((t,r)=>`${r/(e.length-1)*n},${i-(t-c)/l*i}`).join(` L `)}`,d=`${u} L ${n},${i} L 0,${i} Z`;return(0,r.jsxs)(`svg`,{width:n,height:i,className:t.cn(`overflow-visible`,o),viewBox:`0 0 ${n} ${i}`,"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsx)(`defs`,{children:(0,r.jsxs)(`linearGradient`,{id:`sparkline-gradient-${a}`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`0%`,stopColor:a,stopOpacity:`0.3`}),(0,r.jsx)(`stop`,{offset:`100%`,stopColor:a,stopOpacity:`0`})]})}),(0,r.jsx)(`path`,{d,fill:`url(#sparkline-gradient-${a})`}),(0,r.jsx)(`path`,{d:u,fill:`none`,stroke:a,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})]})}function d(e=0,t=100){let[r,i]=n.useState(e),[a,o]=n.useState([e]),s=n.useCallback(e=>{let n=Math.max(0,Math.min(t,e));i(n),o(e=>[...e,n].slice(-20))},[t]);return{value:r,percentage:r/t*100,history:a,updateValue:s,setValue:i,setHistory:o}}function f({value:e,max:d=100,label:f,unit:p=`%`,size:m=`md`,variant:h=`full`,thresholds:g=i,showValue:_=!0,showLabel:v=!0,animated:y=!0,glowOnDanger:b=!0,history:x,className:S,onChange:C}){let[w,T]=n.useState(0),[E,D]=n.useState(!1),O=n.useRef(void 0),k=a[m],A=o[h],j=d>0?Math.min(100,Math.max(0,e/d*100)):0,M=d>0?Math.min(100,Math.max(0,w/d*100)):0,{color:N,glowColor:P,zone:F}=l(j,g),I=k.size,L=I/2,R=(I-k.strokeWidth)/2,z=2*Math.PI*R,B=A.endAngle/360*z;M/100*B,n.useEffect(()=>{if(!y){T(e);return}let t=w,n=e-t,r=Date.now();D(!0);let i=()=>{let e=Date.now()-r,a=Math.min(e/800,1);T(t+n*(1-(1-a)**3)),a<1?O.current=requestAnimationFrame(i):D(!1)};return O.current=requestAnimationFrame(i),()=>{O.current&&cancelAnimationFrame(O.current)}},[e,y]);let V=c(L,L,R,0,A.endAngle-.01),H=c(L,L,R,0,M/100*A.endAngle||.01),U=b&&F===`danger`,W=Math.round(p===`%`?M:w),G=h===`full`?I:h===`semi`?I/2+k.strokeWidth:I;return(0,r.jsxs)(`div`,{className:t.cn(`inline-flex flex-col items-center gap-1`,S),children:[(0,r.jsxs)(`div`,{className:`relative`,style:{width:I,height:G,overflow:`visible`},children:[U&&(0,r.jsx)(`div`,{className:t.cn(`absolute inset-0 rounded-full blur-xl transition-opacity duration-500`,E?`opacity-50`:`animate-pulse`),style:{background:`radial-gradient(circle, ${P} 0%, transparent 70%)`}}),(0,r.jsxs)(`svg`,{width:I,height:I,viewBox:`0 0 ${I} ${I}`,className:`overflow-visible`,style:{transform:`rotate(${A.rotation}deg)`},"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsxs)(`defs`,{children:[(0,r.jsxs)(`linearGradient`,{id:`gauge-gradient-${m}-${h}`,x1:`0%`,y1:`0%`,x2:`100%`,y2:`0%`,children:[(0,r.jsx)(`stop`,{offset:`0%`,stopColor:N,stopOpacity:`0.8`}),(0,r.jsx)(`stop`,{offset:`100%`,stopColor:N,stopOpacity:`1`})]}),(0,r.jsx)(`filter`,{id:`gauge-shadow-${m}-${h}`,x:`-20%`,y:`-20%`,width:`140%`,height:`140%`,children:(0,r.jsx)(`feDropShadow`,{dx:`0`,dy:`0`,stdDeviation:`3`,floodColor:N,floodOpacity:`0.5`})})]}),(0,r.jsx)(`path`,{d:V,fill:`none`,stroke:`currentColor`,strokeWidth:k.strokeWidth,strokeLinecap:`round`,className:`text-muted opacity-20`}),h===`full`&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`path`,{d:c(L,L,R,g.warning/100*360,g.danger/100*360),fill:`none`,stroke:`#eab308`,strokeWidth:k.strokeWidth,strokeLinecap:`round`,className:`opacity-10`}),(0,r.jsx)(`path`,{d:c(L,L,R,g.danger/100*360,360),fill:`none`,stroke:`#ef4444`,strokeWidth:k.strokeWidth,strokeLinecap:`round`,className:`opacity-10`})]}),(0,r.jsx)(`path`,{d:H,fill:`none`,stroke:`url(#gauge-gradient-${m}-${h})`,strokeWidth:k.strokeWidth,strokeLinecap:`round`,filter:U?`url(#gauge-shadow-${m}-${h})`:void 0,className:t.cn(y&&`transition-all duration-300 ease-out`)}),M>0&&(0,r.jsx)(`circle`,{cx:s(L,L,R,M/100*A.endAngle).x,cy:s(L,L,R,M/100*A.endAngle).y,r:k.strokeWidth/3,fill:`white`,className:t.cn(`transition-all duration-300`,U&&`animate-pulse`)})]}),(_||v)&&(0,r.jsxs)(`div`,{className:t.cn(`absolute inset-0 flex flex-col items-center justify-center`,h===`semi`&&`top-auto bottom-0 pb-1`),style:{height:h===`semi`?I/2:void 0,top:h===`semi`?`auto`:void 0},children:[_&&(0,r.jsxs)(`div`,{className:`flex items-baseline gap-0.5`,children:[(0,r.jsx)(`span`,{className:t.cn(`font-bold tabular-nums transition-colors duration-300`,k.fontSize),style:{color:N},children:W}),p&&(0,r.jsx)(`span`,{className:t.cn(`font-medium text-muted-foreground`,k.unitSize),children:p})]}),v&&f&&h===`full`&&(0,r.jsx)(`span`,{className:t.cn(`text-muted-foreground mt-0.5`,k.labelSize),children:f})]})]}),v&&f&&h!==`full`&&(0,r.jsx)(`span`,{className:t.cn(`text-muted-foreground text-center`,k.labelSize),children:f}),x&&x.length>1&&(0,r.jsx)(`div`,{className:`mt-1`,children:(0,r.jsx)(u,{data:x,width:k.size*.8,height:k.sparklineHeight,color:N})}),(0,r.jsx)(`style`,{children:`
+        @keyframes gauge-pulse {
+          0%, 100% { opacity: 0.6; }
+          50% { opacity: 1; }
+        }
+      `})]})}function p({label:e=`CPU`,...t}){return(0,r.jsx)(f,{label:e,unit:`%`,...t})}function m({label:e=`RAM`,max:t=100,unit:n=`GB`,...i}){return(0,r.jsx)(f,{label:e,max:t,unit:n,...i})}function h({label:e=`Storage`,max:t=100,unit:n=`GB`,...i}){return(0,r.jsx)(f,{label:e,max:t,unit:n,...i})}function g({label:e=`Network`,max:t=100,unit:n=`Mbps`,...i}){return(0,r.jsx)(f,{label:e,max:t,unit:n,thresholds:{warning:60,danger:80},...i})}function _({gauges:e,direction:n=`horizontal`,gap:i=`md`,className:a}){return(0,r.jsx)(`div`,{className:t.cn(`flex flex-wrap items-center justify-center`,n===`vertical`&&`flex-col`,{sm:`gap-2`,md:`gap-4`,lg:`gap-8`}[i],a),children:e.map(e=>(0,r.jsx)(f,{...e},e.id))})}exports.WakaCpuGauge=p,exports.WakaNetworkGauge=g,exports.WakaRamGauge=m,exports.WakaResourceGaugeGroup=_,exports.WakaStorageGauge=h,exports.default=f,exports.useResourceGauge=d;