react-aiops 0.1.19 → 0.1.21

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsxs as d, jsx as e, Fragment as Ie } from "react/jsx-runtime";
-import X, { createContext as He, useContext as ae, useState as R, useEffect as Oe, useMemo as Ze, useRef as Z, useCallback as ct } from "react";
+import { jsxs as d, jsx as e, Fragment as Le } from "react/jsx-runtime";
+import F, { createContext as _e, useContext as de, useState as R, useEffect as De, useMemo as Fe, useRef as J, useCallback as ct } from "react";
 const Mt = {
   info: { color: "#00ff88", bg: "rgba(0, 255, 136, 0.1)", border: "#00ff88", icon: "✅" },
   warning: { color: "#ff8c00", bg: "rgba(255, 140, 0, 0.1)", border: "#ff8c00", icon: "⚠️" },
@@ -182,7 +182,7 @@ const E = {
   warning: { color: "#ff8c00", glow: "rgba(255,140,0,0.55)" },
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.55)" },
   offline: { color: "#1e3a5a", glow: "rgba(30,58,90,0.25)" }
-}, Di = "#00e5ff", Ni = "#0055cc", Le = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", Je = "linear-gradient(180deg, rgba(10,25,50,0.35) 0%, rgba(5,15,35,0.25) 60%, rgba(3,10,20,0.15) 100%)";
+}, Di = "#00e5ff", Ni = "#0055cc", Ne = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", Je = "linear-gradient(180deg, rgba(10,25,50,0.35) 0%, rgba(5,15,35,0.25) 60%, rgba(3,10,20,0.15) 100%)";
 function et(t, n, o) {
   const i = {
     position: "absolute",
@@ -233,14 +233,14 @@ function et(t, n, o) {
     }
   };
 }
-const Qe = "cubic-bezier(0.34, 1.56, 0.64, 1)", Ke = "cubic-bezier(0.16, 1, 0.3, 1)";
+const Ke = "cubic-bezier(0.34, 1.56, 0.64, 1)", Ge = "cubic-bezier(0.16, 1, 0.3, 1)";
 function xt(t) {
   return E[t]?.color ?? E.online.color;
 }
 function Bt(t, n, o) {
   return t >= o ? "#ff2255" : t >= n ? "#ff8c00" : "#00e5ff";
 }
-function We(t, n, o, i) {
+function ze(t, n, o, i) {
   return t === "offline" ? "offline" : t === "critical" && n >= i ? "critical" : (t === "critical" || t === "warning") && n >= o ? "warning" : "online";
 }
 function Ft({
@@ -258,23 +258,23 @@ function Ft({
   let w;
   if (x && x.length > 0)
     w = x.map((b, k) => {
-      const T = b.warnAt ?? 70, $ = b.critAt ?? 85;
+      const A = b.warnAt ?? 70, $ = b.critAt ?? 85;
       return {
         id: b.id,
         label: b.label,
         sublabel: b.sublabel,
         value: b.value,
         unit: b.unit ?? "%",
-        status: We(l, b.value, T, $),
+        status: ze(l, b.value, A, $),
         icon: b.icon ?? "cpu",
         delay: k,
         colorOverride: b.color,
-        warnAt: T,
+        warnAt: A,
         critAt: $
       };
     });
   else {
-    const b = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, T = p.capacity ?? 72, $ = We(l, b, 70, 85), S = We(l, k, 75, 88), N = We(l, T, 75, 90);
+    const b = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, A = p.capacity ?? 72, $ = ze(l, b, 70, 85), S = ze(l, k, 75, 88), N = ze(l, A, 75, 90);
     w = [
       {
         id: "cpu",
@@ -300,7 +300,7 @@ function Ft({
         id: "storage",
         label: "STORAGE",
         sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
-        value: T,
+        value: A,
         unit: "%",
         status: N,
         icon: "disk",
@@ -323,7 +323,7 @@ function Ft({
         overflow: "hidden",
         opacity: o ? 1 : 0,
         transform: o ? "scale(1) translate(0, 0)" : `scale(0.7) translate(${m}px, ${v}px)`,
-        transition: `opacity 0.45s ${Ke}, transform 0.55s ${Qe}`,
+        transition: `opacity 0.45s ${Ge}, transform 0.55s ${Ke}`,
         pointerEvents: o ? "auto" : "none",
         zIndex: 9999,
         animation: o ? "comp-dialog-border-glow 3s ease-in-out infinite" : "none",
@@ -594,7 +594,7 @@ function Ut({
         gap: 16,
         opacity: n ? 1 : 0,
         transform: n ? "translateY(0)" : "translateY(12px)",
-        transition: `opacity 0.4s ${Ke} ${0.3 + c * 0.12}s, transform 0.5s ${Qe} ${0.3 + c * 0.12}s`
+        transition: `opacity 0.4s ${Ge} ${0.3 + c * 0.12}s, transform 0.5s ${Ke} ${0.3 + c * 0.12}s`
       },
       children: [
         /* @__PURE__ */ d(
@@ -612,7 +612,7 @@ function Ut({
               flexShrink: 0,
               position: "relative",
               overflow: "hidden",
-              animation: n ? `comp-dialog-icon-pop 0.5s ${Qe} ${0.35 + c * 0.12}s both` : "none"
+              animation: n ? `comp-dialog-icon-pop 0.5s ${Ke} ${0.35 + c * 0.12}s both` : "none"
             },
             children: [
               /* @__PURE__ */ e(Ht, { type: u, color: y }),
@@ -714,7 +714,7 @@ function Ut({
                       background: `linear-gradient(90deg, ${h}66, ${h})`,
                       boxShadow: `0 0 8px ${h}44`,
                       transformOrigin: "left center",
-                      animation: n ? `comp-dialog-metric-fill 0.8s ${Ke} ${0.4 + c * 0.12}s both` : "none"
+                      animation: n ? `comp-dialog-metric-fill 0.8s ${Ge} ${0.4 + c * 0.12}s both` : "none"
                     }
                   }
                 ),
@@ -893,12 +893,12 @@ function Ht({ type: t, color: n }) {
     /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: n, strokeWidth: "0.8" })
   ] });
 }
-const tt = He(null), it = He({ index: 0 });
+const tt = _e(null), it = _e({ index: 0 });
 function Wi() {
-  return ae(tt);
+  return de(tt);
 }
 function Mi() {
-  return ae(it);
+  return de(it);
 }
 function Yt({
   children: t,
@@ -922,21 +922,21 @@ function Yt({
   onCloseDrill: w,
   selectedSystemStatus: b = "online",
   selectedSystemDbSync: k = !0,
-  selectedSystemMetrics: T,
+  selectedSystemMetrics: A,
   selectedSystemAlerts: $
 }) {
   const [S, N] = R(0);
-  Oe(() => {
+  De(() => {
     let I;
     if ((o === "compact" || o === "collapsing") && f) {
-      const H = () => {
-        N((de) => de + g), I = requestAnimationFrame(H);
+      const Y = () => {
+        N((fe) => fe + g), I = requestAnimationFrame(Y);
       };
-      I = requestAnimationFrame(H);
+      I = requestAnimationFrame(Y);
     }
     return () => cancelAnimationFrame(I);
   }, [o, f, g]);
-  const B = X.Children.toArray(t), z = B.length, U = Ze(
+  const B = F.Children.toArray(t), z = B.length, H = Fe(
     () => ({
       totalSystems: z,
       carouselRotation: S,
@@ -967,8 +967,8 @@ function Yt({
       x,
       h
     ]
-  ), le = B.map((I, H) => /* @__PURE__ */ e(it.Provider, { value: { index: H }, children: I }, H)), se = o === "expanded" || o === "expanding" && i >= 4;
-  return /* @__PURE__ */ d(tt.Provider, { value: U, children: [
+  ), ce = B.map((I, Y) => /* @__PURE__ */ e(it.Provider, { value: { index: Y }, children: I }, Y)), pe = o === "expanded" || o === "expanding" && i >= 4;
+  return /* @__PURE__ */ d(tt.Provider, { value: H, children: [
     /* @__PURE__ */ d("div", { style: { position: "relative", width: h, height: y, margin: "0 auto", flexShrink: 0 }, children: [
       n && (o === "compact" || o === "collapsing") && /* @__PURE__ */ e(
         "img",
@@ -990,7 +990,7 @@ function Yt({
           }
         }
       ),
-      le
+      ce
     ] }),
     r && /* @__PURE__ */ e("div", { onClick: (I) => I.stopPropagation(), children: /* @__PURE__ */ e(
       zt,
@@ -998,8 +998,8 @@ function Yt({
         name: r,
         status: b,
         dbSync: k,
-        visible: se && !a,
-        metrics: T,
+        visible: pe && !a,
+        metrics: A,
         alerts: $
       }
     ) }),
@@ -1062,7 +1062,7 @@ function Vt({
         )
       }
     ),
-    r && /* @__PURE__ */ d(Ie, { children: [
+    r && /* @__PURE__ */ d(Le, { children: [
       /* @__PURE__ */ e("circle", { r: "3", fill: a, opacity: 0.85, children: /* @__PURE__ */ e(
         "animateMotion",
         {
@@ -1298,7 +1298,7 @@ function jt({
     }, children: r })
   ] });
 }
-const ye = He(null), Xt = "cubic-bezier(0.34, 1.56, 0.64, 1)", pt = 330, ft = 340, qt = 660;
+const ve = _e(null), Xt = "cubic-bezier(0.34, 1.56, 0.64, 1)", pt = 330, ft = 340, qt = 660;
 function vt({
   name: t,
   status: n = "online",
@@ -1320,24 +1320,24 @@ function vt({
   _onComponentClick: x,
   _containerWidth: w
 }) {
-  const b = ae(tt), k = ae(it), T = a ?? k.index, $ = s ?? b?.totalSystems ?? 1, S = l ?? b?.carouselRotation ?? 0, N = u ?? b?.viewState ?? "compact", B = c ?? b?.animPhase ?? 0, z = p ?? b?.selectedSystem ?? null, U = f ?? b?.selectedComponent ?? null, le = g ?? b?.rotateY ?? 20, se = h ?? b?.autoRotateComponents ?? !0, I = y ?? b?.componentScale ?? 0.35, H = m ?? b?.drillZoom ?? 3.3, de = v ?? b?.onSelectSystem, ce = x ?? b?.onComponentClick, Y = w ?? b?.containerWidth ?? 950, V = z === t, L = V && (N === "expanded" || N === "expanding" && B >= 1), K = !L, pe = (Y - qt) / 2, me = pt + pe, xe = T / $ * Math.PI * 2 + S, Ye = 420, Ve = 160, fe = me + Math.cos(xe) * Ye, C = 450 + Math.sin(xe) * Ve, ue = Math.round(C), te = !V && (N === "expanding" || N === "expanded"), he = te ? 0 : 1, J = K ? 0.3 + (Math.sin(xe) + 1) * 0.1 : 1, _ = K ? J : I, ve = N === "compact" || N === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", De = V && U, _e = De ? H : 1, Tt = U?.ex ?? 330, It = U?.ey ?? 300, { size: Ot = 90, color: Lt = "#00e5ff", widthRatio: Dt = 3 } = i ?? {}, Nt = {
+  const b = de(tt), k = de(it), A = a ?? k.index, $ = s ?? b?.totalSystems ?? 1, S = l ?? b?.carouselRotation ?? 0, N = u ?? b?.viewState ?? "compact", B = c ?? b?.animPhase ?? 0, z = p ?? b?.selectedSystem ?? null, H = f ?? b?.selectedComponent ?? null, ce = g ?? b?.rotateY ?? 20, pe = h ?? b?.autoRotateComponents ?? !0, I = y ?? b?.componentScale ?? 0.35, Y = m ?? b?.drillZoom ?? 3.3, fe = v ?? b?.onSelectSystem, V = x ?? b?.onComponentClick, _ = w ?? b?.containerWidth ?? 950, j = z === t, L = j && (N === "expanded" || N === "expanding" && B >= 1), G = !L, ue = (_ - qt) / 2, ne = pt + ue, ee = A / $ * Math.PI * 2 + S, we = 420, he = 160, be = ne + Math.cos(ee) * we, C = 450 + Math.sin(ee) * he, ge = Math.round(C), oe = !j && (N === "expanding" || N === "expanded"), ye = oe ? 0 : 1, te = G ? 0.3 + (Math.sin(ee) + 1) * 0.1 : 1, X = G ? te : I, Se = N === "compact" || N === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", We = j && H, je = We ? Y : 1, At = H?.ex ?? 330, It = H?.ey ?? 300, { size: Ot = 90, color: Lt = "#00e5ff", widthRatio: Dt = 3 } = i ?? {}, Nt = {
     name: t,
-    isSelected: V,
+    isSelected: j,
     isExpandedPos: L,
-    isCompact: K,
+    isCompact: G,
     animPhase: B,
-    compactCx: fe,
+    compactCx: be,
     compactCy: C,
-    groupScale: J,
-    effectiveScale: _,
-    transitionValue: ve,
-    rotateY: le,
-    autoRotateComponents: se,
-    onComponentClick: ce,
-    selectedComponentName: U?.name ?? null,
-    expandedOffsetX: pe
+    groupScale: te,
+    effectiveScale: X,
+    transitionValue: Se,
+    rotateY: ce,
+    autoRotateComponents: pe,
+    onComponentClick: V,
+    selectedComponentName: H?.name ?? null,
+    expandedOffsetX: ue
   };
-  return /* @__PURE__ */ e(ye.Provider, { value: Nt, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(ve.Provider, { value: Nt, children: /* @__PURE__ */ d(
     "div",
     {
       style: {
@@ -1347,20 +1347,20 @@ function vt({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: he,
+        opacity: ye,
         transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Xt}`,
-        filter: K && Math.sin(xe) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
-        zIndex: V ? 500 : te ? 0 : ue,
-        transformOrigin: `${me}px ${ft}px`,
-        transform: De ? `translate(${-(Tt - pt) * _e}px, ${-(It - ft) * _e}px) scale(${_e})` : "none"
+        filter: G && Math.sin(ee) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
+        zIndex: j ? 500 : oe ? 0 : ge,
+        transformOrigin: `${ne}px ${ft}px`,
+        transform: We ? `translate(${-(At - pt) * je}px, ${-(It - ft) * je}px) scale(${je})` : "none"
       },
       children: [
-        K && !te && /* @__PURE__ */ e(
+        G && !oe && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: fe,
+              left: be,
               top: C,
               width: 160,
               height: 180,
@@ -1369,19 +1369,19 @@ function vt({
               cursor: "pointer",
               zIndex: 101
             },
-            onClick: (ee) => {
-              ee.stopPropagation(), de?.(t);
+            onClick: (ie) => {
+              ie.stopPropagation(), fe?.(t);
             }
           }
         ),
-        K && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
+        G && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: fe,
+              left: be,
               top: C - 200,
-              transform: `translate(-50%, -50%) scale(${J})`,
+              transform: `translate(-50%, -50%) scale(${te})`,
               zIndex: 110,
               pointerEvents: "none",
               animation: "holo-led-blink 1.5s infinite",
@@ -1427,13 +1427,13 @@ function vt({
           {
             style: {
               position: "absolute",
-              left: L ? me : fe,
+              left: L ? ne : be,
               top: L ? 48 : C - 180,
-              transform: `translate(-50%, -50%) scale(${L ? 1.2 : J * 1.5})`,
+              transform: `translate(-50%, -50%) scale(${L ? 1.2 : te * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
-              transition: ve,
+              transition: Se,
               fontSize: 36,
               fontWeight: 700,
               letterSpacing: "0.18em",
@@ -1453,23 +1453,23 @@ function vt({
             style: {
               position: "absolute",
               top: 0,
-              left: L ? pe : 0,
+              left: L ? ue : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
-              transition: ve
+              transition: Se
             },
-            children: o.map((ee, Wt) => /* @__PURE__ */ e(
+            children: o.map((ie, Wt) => /* @__PURE__ */ e(
               Vt,
               {
-                x1: ee.from[0],
-                y1: ee.from[1],
-                x2: ee.to[0],
-                y2: ee.to[1],
-                show: V && B >= (ee.visibleAtPhase ?? 0),
-                color: ee.color,
-                dur: ee.duration
+                x1: ie.from[0],
+                y1: ie.from[1],
+                x2: ie.to[0],
+                y2: ie.to[1],
+                show: j && B >= (ie.visibleAtPhase ?? 0),
+                color: ie.color,
+                dur: ie.duration
               },
               Wt
             ))
@@ -1480,10 +1480,10 @@ function vt({
           {
             style: {
               position: "absolute",
-              left: L ? me : fe,
+              left: L ? ne : be,
               top: L ? 570 : C + 70,
-              transform: `translate(-50%, -50%) scaleX(${L ? 1 : 0.4}) scaleY(${L ? 1 : 0.6}) scale(${L ? 1 : J})`,
-              transition: ve,
+              transform: `translate(-50%, -50%) scaleX(${L ? 1 : 0.4}) scaleY(${L ? 1 : 0.6}) scale(${L ? 1 : te})`,
+              transition: Se,
               zIndex: 1
             },
             children: /* @__PURE__ */ e(jt, { size: Ot, color: Lt, widthRatio: Dt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
@@ -1506,7 +1506,7 @@ function W({
   align: u = "right",
   internalRef: c
 }) {
-  const p = ae(ye), f = p?.expandedOffsetX ?? 0;
+  const p = de(ve), f = p?.expandedOffsetX ?? 0;
   if (o === "online") return null;
   const g = l && !!p?.isExpandedPos, h = E[o]?.color ?? E.warning.color, y = Math.abs(a) > Math.abs(s), m = t + f + (y ? Math.sign(a) * 45 : 0), v = n + (y ? 0 : Math.sign(s) * 40), x = t + f + a, w = n + s;
   let b = "";
@@ -1519,7 +1519,7 @@ function W({
   }
   let k = "translate(0, -50%)";
   u === "left" && (k = "translate(-100%, -50%)"), u === "top" && (k = "translate(-50%, -100%)"), u === "bottom" && (k = "translate(-50%, 0)");
-  const T = u === "left" ? -8 : u === "right" ? 8 : 0, $ = u === "top" ? -8 : u === "bottom" ? 8 : 0;
+  const A = u === "left" ? -8 : u === "right" ? 8 : 0, $ = u === "top" ? -8 : u === "bottom" ? 8 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1568,7 +1568,7 @@ function W({
               left: x,
               top: w,
               transform: k,
-              marginLeft: T,
+              marginLeft: A,
               marginTop: $,
               background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px), rgba(2, 8, 16, 0.82)",
               border: `1px solid ${h}55`,
@@ -1693,13 +1693,10 @@ function Jt(t, n) {
   return i >= a && i > 0 ? l = {
     severity: o,
     msg: n?.msg ?? `Status: ${o.toUpperCase()}`,
-    internalRef: n?.internalRef,
-    offsetX: n?.offsetX,
-    offsetY: n?.offsetY,
-    align: n?.align
-  } : l = r, { effectiveSeverity: s, callout: l };
+    internalRef: n?.internalRef
+  } : l = { ...r }, n?.offsetX !== void 0 && (l.offsetX = n.offsetX), n?.offsetY !== void 0 && (l.offsetY = n.offsetY), n?.align !== void 0 && (l.align = n.align), { effectiveSeverity: s, callout: l };
 }
-function A({
+function T({
   ex: t,
   ey: n,
   compactOffset: o,
@@ -1715,7 +1712,7 @@ function A({
   bare: g = !1,
   alert: h
 }) {
-  const y = ae(ye);
+  const y = de(ve);
   if (!y)
     throw new Error("ServiceNode must be used inside a <Service> component.");
   const {
@@ -1725,14 +1722,14 @@ function A({
     compactCy: w,
     groupScale: b,
     effectiveScale: k,
-    transitionValue: T,
+    transitionValue: A,
     onComponentClick: $,
     selectedComponentName: S,
     expandedOffsetX: N
-  } = y, z = p === 0 || y.isSelected && v >= p ? 1 : 0, U = x + o.x, le = w + o.y, se = m ? t + N : U, I = m ? n : le, H = f !== void 0 ? f : y.isCompact ? b : k, de = !!c && !!S && c.name === S, { effectiveSeverity: ce, callout: Y } = Ze(
+  } = y, z = p === 0 || y.isSelected && v >= p ? 1 : 0, H = x + o.x, ce = w + o.y, pe = m ? t + N : H, I = m ? n : ce, Y = f !== void 0 ? f : y.isCompact ? b : k, fe = !!c && !!S && c.name === S, { effectiveSeverity: V, callout: _ } = Fe(
     () => Jt(c, h),
     [c, h]
-  ), V = ce !== "online" ? E[ce]?.color ?? a : a, L = ce === "offline" ? "#4a6a8a" : V, K = c && m && $ ? () => $({
+  ), j = V !== "online" ? E[V]?.color ?? a : a, L = V === "offline" ? "#4a6a8a" : j, G = c && m && $ ? () => $({
     type: c.type,
     name: c.name,
     status: c.status,
@@ -1742,22 +1739,27 @@ function A({
     dialogMetrics: c.dialogMetrics,
     subComponents: c.subComponents,
     graphSeries: c.graphSeries
-  }) : void 0, pe = c?.name ?? s ?? "";
-  return /* @__PURE__ */ d(Ie, { children: [
+  }) : void 0, ue = c?.name ?? s ?? "", ne = c?.status ?? "online", ee = V !== "online" && V !== ne, we = Fe(() => ee ? F.Children.map(
+    r,
+    (he) => F.isValidElement(he) ? F.cloneElement(he, {
+      status: V
+    }) : he
+  ) : r, [r, ee, V]);
+  return /* @__PURE__ */ d(Le, { children: [
     /* @__PURE__ */ e(
       "div",
       {
         style: {
           position: "absolute",
-          left: se,
+          left: pe,
           top: I,
-          transform: `translate(-50%, -50%) scale(${H})`,
+          transform: `translate(-50%, -50%) scale(${Y})`,
           opacity: z,
           zIndex: i,
-          transition: T || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          transition: A || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
           pointerEvents: m && z >= 0.5 ? "auto" : "none"
         },
-        children: g ? r : /* @__PURE__ */ e(
+        children: g ? we : /* @__PURE__ */ e(
           ei,
           {
             statusColor: L,
@@ -1766,25 +1768,25 @@ function A({
             delay: u,
             showLabels: m,
             isCompact: y.isCompact,
-            onClick: K,
-            isSelected: de,
-            children: r
+            onClick: G,
+            isSelected: fe,
+            children: we
           }
         )
       }
     ),
-    Y && /* @__PURE__ */ e(
+    _ && /* @__PURE__ */ e(
       W,
       {
         ex: t,
         ey: n,
-        status: Y.severity,
-        title: pe,
-        msg: Y.msg,
-        offsetX: Y.offsetX ?? 110,
-        offsetY: Y.offsetY ?? -30,
-        align: Y.align ?? "right",
-        internalRef: Y.internalRef,
+        status: _.severity,
+        title: ue,
+        msg: _.msg,
+        offsetX: _.offsetX ?? 110,
+        offsetY: _.offsetY ?? -30,
+        align: _.align ?? "right",
+        internalRef: _.internalRef,
         isVisible: !0
       }
     )
@@ -1830,7 +1832,7 @@ function ei({
               }
             }
           ),
-          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && X.isValidElement(t) ? X.cloneElement(t, {
+          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && F.isValidElement(t) ? F.cloneElement(t, {
             _compact: !0
           }) : t })
         ] }),
@@ -1886,7 +1888,7 @@ function $t({ synced: t, latencyMs: n }) {
     ] })
   ] });
 }
-const ie = 140, j = 240, re = 160, we = et(ie, j, re);
+const re = 140, q = 240, se = 160, $e = et(re, q, se);
 function ti({
   cfg: t,
   name: n,
@@ -1906,9 +1908,9 @@ function ti({
     "div",
     {
       style: {
-        width: ie,
-        height: j,
-        background: a ? Le : Je,
+        width: re,
+        height: q,
+        background: a ? Ne : Je,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -2304,8 +2306,8 @@ function ii() {
     "div",
     {
       style: {
-        width: ie,
-        height: j,
+        width: re,
+        height: q,
         background: "linear-gradient(180deg, #040c1a 0%, #030810 100%)",
         position: "relative",
         overflow: "hidden",
@@ -2423,8 +2425,8 @@ function ht({
     "div",
     {
       style: {
-        width: re,
-        height: j,
+        width: se,
+        height: q,
         background: i ? "linear-gradient(90deg, #040c1c 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #040c1c 100%)",
         position: "relative",
         overflow: "hidden"
@@ -2443,13 +2445,13 @@ function ht({
             }
           }
         ),
-        [8, j - 20].map((r) => /* @__PURE__ */ e(
+        [8, q - 20].map((r) => /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
               top: r,
-              left: i ? 10 : re - 18,
+              left: i ? 10 : se - 18,
               width: 8,
               height: 8,
               borderRadius: 1,
@@ -2465,8 +2467,8 @@ function ht({
           {
             style: {
               position: "absolute",
-              top: j * 0.35,
-              bottom: j * 0.15,
+              top: q * 0.35,
+              bottom: q * 0.15,
               left: i ? 22 : 18,
               right: i ? 18 : 22,
               display: "flex",
@@ -2494,8 +2496,8 @@ function ht({
           {
             style: {
               position: "absolute",
-              top: j * 0.18,
-              left: i ? 12 : re - 78,
+              top: q * 0.18,
+              left: i ? 12 : se - 78,
               fontSize: 7,
               color: "#1a3050",
               letterSpacing: "0.2em",
@@ -2514,13 +2516,13 @@ function ht({
   );
 }
 function ni({ cpuLoad: t }) {
-  const n = t / 100, o = n > 0.75 ? "rgba(255,34,85,0.16)" : n > 0.45 ? "rgba(255,140,0,0.12)" : "rgba(0,229,255,0.08)", i = Math.floor((re - 18) / 7);
+  const n = t / 100, o = n > 0.75 ? "rgba(255,34,85,0.16)" : n > 0.45 ? "rgba(255,140,0,0.12)" : "rgba(0,229,255,0.08)", i = Math.floor((se - 18) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: ie,
-        height: re,
+        width: re,
+        height: se,
         background: "linear-gradient(180deg, #0c1c30 0%, #070f1e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -2534,7 +2536,7 @@ function ni({ cpuLoad: t }) {
               top: 0,
               left: 0,
               right: 0,
-              height: re * 0.4,
+              height: se * 0.4,
               background: `radial-gradient(ellipse at 50% 0%, ${o} 0%, transparent 70%)`
             }
           }
@@ -2593,7 +2595,7 @@ function ni({ cpuLoad: t }) {
     }
   );
 }
-function ge({
+function xe({
   rotateX: t = -22,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -2606,8 +2608,8 @@ function ge({
   brandLabel: c = "BUSAUD",
   _compact: p
 }) {
-  const [f, g] = R(n), h = Z(0), y = Z(0);
-  Oe(() => {
+  const [f, g] = R(n), h = J(0), y = J(0);
+  De(() => {
     if (!r) {
       g(n);
       return;
@@ -2624,8 +2626,8 @@ function ge({
     "div",
     {
       style: {
-        width: ie * i,
-        height: j * i,
+        width: re * i,
+        height: q * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2677,8 +2679,8 @@ function ge({
           {
             style: {
               position: "absolute",
-              width: ie * 1.4 * i,
-              height: j * 0.8 * i,
+              width: re * 1.4 * i,
+              height: q * 0.8 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(45 * i)}px)`,
               pointerEvents: "none",
@@ -2701,15 +2703,15 @@ function ge({
               "div",
               {
                 style: {
-                  width: ie,
-                  height: j,
+                  width: re,
+                  height: q,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: we.front, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: $e.front, children: /* @__PURE__ */ e(
                     ti,
                     {
                       cfg: m,
@@ -2721,16 +2723,16 @@ function ge({
                       brandLabel: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: we.back, children: /* @__PURE__ */ e(ii, {}) }),
-                  /* @__PURE__ */ e("div", { style: we.left, children: /* @__PURE__ */ e(ht, { side: "left", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: we.right, children: /* @__PURE__ */ e(ht, { side: "right", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: we.top, children: /* @__PURE__ */ e(ni, { cpuLoad: l }) }),
-                  /* @__PURE__ */ e("div", { style: we.bottom, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: $e.back, children: /* @__PURE__ */ e(ii, {}) }),
+                  /* @__PURE__ */ e("div", { style: $e.left, children: /* @__PURE__ */ e(ht, { side: "left", color: m.color, brandLabel: c }) }),
+                  /* @__PURE__ */ e("div", { style: $e.right, children: /* @__PURE__ */ e(ht, { side: "right", color: m.color, brandLabel: c }) }),
+                  /* @__PURE__ */ e("div", { style: $e.top, children: /* @__PURE__ */ e(ni, { cpuLoad: l }) }),
+                  /* @__PURE__ */ e("div", { style: $e.bottom, children: /* @__PURE__ */ e(
                     "div",
                     {
                       style: {
-                        width: ie,
-                        height: re,
+                        width: re,
+                        height: se,
                         background: "linear-gradient(180deg, #030710, #020508)"
                       }
                     }
@@ -2764,7 +2766,7 @@ function zi({
   alert: v
 }) {
   return /* @__PURE__ */ e(
-    A,
+    T,
     {
       ex: t,
       ey: n,
@@ -2785,12 +2787,12 @@ function zi({
         graphSeries: m
       },
       alert: v,
-      children: /* @__PURE__ */ e(ge, { status: a, cpuLoad: p, memLoad: f, brandLabel: g })
+      children: /* @__PURE__ */ e(xe, { status: a, cpuLoad: p, memLoad: f, brandLabel: g })
     }
   );
 }
-const Ge = 12, be = 55, G = be * 2, Re = 52, nt = 10, je = 3 * Re + 2 * nt, Se = 2 * Math.PI * be / Ge, Xe = Array.from({ length: Ge }, (t, n) => n / Ge * 360);
-function qe(t) {
+const Ze = 12, me = 55, Z = me * 2, Ce = 52, nt = 10, Xe = 3 * Ce + 2 * nt, ke = 2 * Math.PI * me / Ze, qe = Array.from({ length: Ze }, (t, n) => n / Ze * 360);
+function Qe(t) {
   return Math.cos(t * Math.PI / 180) * 0.42 + 0.58;
 }
 function oi({
@@ -2801,25 +2803,25 @@ function oi({
   capacity: r,
   compact: a
 }) {
-  return /* @__PURE__ */ d(Ie, { children: [
-    Xe.map((s, l) => {
-      const u = qe(s), c = l === 0, p = Math.round(4 + u * 9), f = Math.round(12 + u * 22), g = Math.round(28 + u * 44), h = Math.round(u * 0.55 * 255).toString(16).padStart(2, "0");
+  return /* @__PURE__ */ d(Le, { children: [
+    qe.map((s, l) => {
+      const u = Qe(s), c = l === 0, p = Math.round(4 + u * 9), f = Math.round(12 + u * 22), g = Math.round(28 + u * 44), h = Math.round(u * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: Se,
-            height: Re,
-            left: (G - Se) / 2,
+            width: ke,
+            height: Ce,
+            left: (Z - ke) / 2,
             top: t,
-            transform: `rotateY(${s}deg) translateZ(${be}px)`,
+            transform: `rotateY(${s}deg) translateZ(${me}px)`,
             backfaceVisibility: "hidden",
             background: c ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${f},${g})`,
             borderLeft: `1px solid ${o.color}${h}`,
             boxShadow: c ? `inset 0 0 18px ${o.color}28` : "none"
           },
-          children: c && /* @__PURE__ */ d(Ie, { children: [
+          children: c && /* @__PURE__ */ d(Le, { children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -2872,10 +2874,10 @@ function oi({
       {
         style: {
           position: "absolute",
-          width: G + 4,
-          height: G + 4,
+          width: Z + 4,
+          height: Z + 4,
           left: -2,
-          top: t - be,
+          top: t - me,
           borderRadius: "50%",
           transform: "rotateX(90deg)",
           backfaceVisibility: "hidden",
@@ -2933,10 +2935,10 @@ function oi({
       {
         style: {
           position: "absolute",
-          width: G + 4,
-          height: G + 4,
+          width: Z + 4,
+          height: Z + 4,
           left: -2,
-          top: t + Re - be,
+          top: t + Ce - me,
           borderRadius: "50%",
           transform: "rotateX(-90deg)",
           backfaceVisibility: "hidden",
@@ -2960,18 +2962,18 @@ function oi({
         )
       }
     ),
-    i && Xe.map((s, l) => {
-      const u = qe(s);
+    i && qe.map((s, l) => {
+      const u = Qe(s);
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: Se + 1.5,
+            width: ke + 1.5,
             height: 6,
-            left: (G - Se - 1.5) / 2,
-            top: t + Re - 3,
-            transform: `rotateY(${s}deg) translateZ(${be + 1.5}px)`,
+            left: (Z - ke - 1.5) / 2,
+            top: t + Ce - 3,
+            transform: `rotateY(${s}deg) translateZ(${me + 1.5}px)`,
             backfaceVisibility: "hidden",
             background: o.color,
             boxShadow: `0 0 8px ${o.color}, 0 0 18px ${o.color}aa, 0 0 30px ${o.glow}`,
@@ -2981,18 +2983,18 @@ function oi({
         `rng${n}${l}`
       );
     }),
-    i && Xe.map((s, l) => {
-      const u = qe(s), c = Math.round(2 + u * 4), p = Math.round(5 + u * 10), f = Math.round(12 + u * 20);
+    i && qe.map((s, l) => {
+      const u = Qe(s), c = Math.round(2 + u * 4), p = Math.round(5 + u * 10), f = Math.round(12 + u * 20);
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: Se,
+            width: ke,
             height: nt,
-            left: (G - Se) / 2,
-            top: t + Re,
-            transform: `rotateY(${s}deg) translateZ(${be}px)`,
+            left: (Z - ke) / 2,
+            top: t + Ce,
+            transform: `rotateY(${s}deg) translateZ(${me}px)`,
             backfaceVisibility: "hidden",
             background: `rgb(${c},${p},${f})`
           }
@@ -3002,7 +3004,7 @@ function oi({
     })
   ] });
 }
-function Ne({
+function Me({
   rotateX: t = -22,
   rotateY: n = -15,
   rotateZ: o = 0,
@@ -3014,8 +3016,8 @@ function Ne({
   // connections = 284,
   _compact: l
 }) {
-  const [u, c] = R(n), p = Z(0), f = Z(0);
-  Oe(() => {
+  const [u, c] = R(n), p = J(0), f = J(0);
+  De(() => {
     if (!r) {
       c(n);
       return;
@@ -3032,8 +3034,8 @@ function Ne({
     "div",
     {
       style: {
-        width: G * i,
-        height: je * i,
+        width: Z * i,
+        height: Xe * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3093,8 +3095,8 @@ function Ne({
           {
             style: {
               position: "absolute",
-              width: G * 2.8 * i,
-              height: je * 0.85 * i,
+              width: Z * 2.8 * i,
+              height: Xe * 0.85 * i,
               background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * i)}px)`,
               pointerEvents: "none",
@@ -3117,8 +3119,8 @@ function Ne({
               "div",
               {
                 style: {
-                  width: G,
-                  height: je,
+                  width: Z,
+                  height: Xe,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${u}deg) rotateZ(${o}deg)`,
@@ -3127,7 +3129,7 @@ function Ne({
                 children: [0, 1, 2].map((h) => /* @__PURE__ */ e(
                   oi,
                   {
-                    diskY: h * (Re + nt),
+                    diskY: h * (Ce + nt),
                     diskIdx: h,
                     cfg: g,
                     hasRingBelow: h < 2,
@@ -3162,7 +3164,7 @@ function Bi({
   alert: y
 }) {
   return /* @__PURE__ */ e(
-    A,
+    T,
     {
       ex: t,
       ey: n,
@@ -3183,7 +3185,7 @@ function Bi({
         graphSeries: h
       },
       alert: y,
-      children: /* @__PURE__ */ e(Ne, { status: a, capacity: p })
+      children: /* @__PURE__ */ e(Me, { status: a, capacity: p })
     }
   );
 }
@@ -3310,7 +3312,7 @@ function Fi({
   visibleAtPhase: l
 }) {
   return /* @__PURE__ */ e(
-    A,
+    T,
     {
       ex: t,
       ey: n,
@@ -3322,7 +3324,7 @@ function Fi({
     }
   );
 }
-const ne = 190, q = 72, Ee = 120, $e = et(ne, q, Ee);
+const ae = 190, Q = 72, Pe = 120, Re = et(ae, Q, Pe);
 function ri({
   cfg: t,
   name: n,
@@ -3335,9 +3337,9 @@ function ri({
     "div",
     {
       style: {
-        width: ne,
-        height: q,
-        background: r ? Le : Je,
+        width: ae,
+        height: Q,
+        background: r ? Ne : Je,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3590,8 +3592,8 @@ function ai() {
     "div",
     {
       style: {
-        width: ne,
-        height: q,
+        width: ae,
+        height: Q,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3606,7 +3608,7 @@ function ai() {
           {
             style: {
               width: 40,
-              height: q - 16,
+              height: Q - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3662,7 +3664,7 @@ function ai() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: q - 16,
+              height: Q - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3678,8 +3680,8 @@ function bt({ side: t, color: n }) {
     "div",
     {
       style: {
-        width: Ee,
-        height: q,
+        width: Pe,
+        height: Q,
         background: t === "right" ? "linear-gradient(90deg, #04091a 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #04091a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -3703,8 +3705,8 @@ function bt({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: q * 0.25,
-              bottom: q * 0.25,
+              top: Q * 0.25,
+              bottom: Q * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -3731,13 +3733,13 @@ function bt({ side: t, color: n }) {
   );
 }
 function li({ traffic: t }) {
-  const n = Math.floor((Ee - 14) / 7);
+  const n = Math.floor((Pe - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: ne,
-        height: Ee,
+        width: ae,
+        height: Pe,
         background: "linear-gradient(180deg, #0c1c30 0%, #07101e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -3751,7 +3753,7 @@ function li({ traffic: t }) {
               top: 0,
               left: 0,
               right: 0,
-              height: Ee * 0.35,
+              height: Pe * 0.35,
               background: `radial-gradient(ellipse at 50% 0%,
           ${t > 70 ? "rgba(255,34,85,0.14)" : "rgba(0,229,255,0.08)"} 0%,
           transparent 70%)`
@@ -3801,8 +3803,8 @@ function rt({
   activeRoutes: u = 12,
   _compact: c
 }) {
-  const [p, f] = R(n), g = Z(0), h = Z(0);
-  Oe(() => {
+  const [p, f] = R(n), g = J(0), h = J(0);
+  De(() => {
     if (!r) {
       f(n);
       return;
@@ -3819,8 +3821,8 @@ function rt({
     "div",
     {
       style: {
-        width: ne * i,
-        height: q * i,
+        width: ae * i,
+        height: Q * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3880,8 +3882,8 @@ function rt({
           {
             style: {
               position: "absolute",
-              width: ne * 1.3 * i,
-              height: q * 2 * i,
+              width: ae * 1.3 * i,
+              height: Q * 2 * i,
               background: `radial-gradient(ellipse, ${y.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
@@ -3904,15 +3906,15 @@ function rt({
               "div",
               {
                 style: {
-                  width: ne,
-                  height: q,
+                  width: ae,
+                  height: Q,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: $e.front, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: Re.front, children: /* @__PURE__ */ e(
                     ri,
                     {
                       cfg: y,
@@ -3922,11 +3924,11 @@ function rt({
                       compact: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: $e.back, children: /* @__PURE__ */ e(ai, {}) }),
-                  /* @__PURE__ */ e("div", { style: $e.left, children: /* @__PURE__ */ e(bt, { side: "left", color: y.color }) }),
-                  /* @__PURE__ */ e("div", { style: $e.right, children: /* @__PURE__ */ e(bt, { side: "right", color: y.color }) }),
-                  /* @__PURE__ */ e("div", { style: $e.top, children: /* @__PURE__ */ e(li, { traffic: l }) }),
-                  /* @__PURE__ */ e("div", { style: $e.bottom, children: /* @__PURE__ */ e("div", { style: { width: ne, height: Ee, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: Re.back, children: /* @__PURE__ */ e(ai, {}) }),
+                  /* @__PURE__ */ e("div", { style: Re.left, children: /* @__PURE__ */ e(bt, { side: "left", color: y.color }) }),
+                  /* @__PURE__ */ e("div", { style: Re.right, children: /* @__PURE__ */ e(bt, { side: "right", color: y.color }) }),
+                  /* @__PURE__ */ e("div", { style: Re.top, children: /* @__PURE__ */ e(li, { traffic: l }) }),
+                  /* @__PURE__ */ e("div", { style: Re.bottom, children: /* @__PURE__ */ e("div", { style: { width: ae, height: Pe, background: "#020508" } }) })
                 ]
               }
             )
@@ -3955,7 +3957,7 @@ function Ui({
   alert: m
 }) {
   return /* @__PURE__ */ e(
-    A,
+    T,
     {
       ex: t,
       ey: n,
@@ -3980,7 +3982,7 @@ function Ui({
     }
   );
 }
-const oe = 190, Q = 72, Ce = 120, ke = et(oe, Q, Ce), gt = {
+const le = 190, K = 72, Te = 120, Ee = et(le, K, Te), gt = {
   online: { color: "#bb55ff", glow: "rgba(187,85,255,0.50)" },
   warning: { color: "#ff8c00", glow: "rgba(255,140,0,0.50)" },
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.50)" },
@@ -3999,9 +4001,9 @@ function si({
     "div",
     {
       style: {
-        width: oe,
-        height: Q,
-        background: a ? Le : Je,
+        width: le,
+        height: K,
+        background: a ? Ne : Je,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -4250,8 +4252,8 @@ function di() {
     "div",
     {
       style: {
-        width: oe,
-        height: Q,
+        width: le,
+        height: K,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -4266,7 +4268,7 @@ function di() {
           {
             style: {
               width: 40,
-              height: Q - 16,
+              height: K - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -4322,7 +4324,7 @@ function di() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: Q - 16,
+              height: K - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -4338,8 +4340,8 @@ function yt({ side: t, color: n }) {
     "div",
     {
       style: {
-        width: Ce,
-        height: Q,
+        width: Te,
+        height: K,
         background: t === "right" ? "linear-gradient(90deg, #04091a 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #04091a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -4363,8 +4365,8 @@ function yt({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: Q * 0.25,
-              bottom: Q * 0.25,
+              top: K * 0.25,
+              bottom: K * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -4391,13 +4393,13 @@ function yt({ side: t, color: n }) {
   );
 }
 function ci({ queueDepth: t, color: n }) {
-  const o = Math.floor((Ce - 14) / 7);
+  const o = Math.floor((Te - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: oe,
-        height: Ce,
+        width: le,
+        height: Te,
         background: "linear-gradient(180deg, #0c1c30 0%, #07101e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -4411,7 +4413,7 @@ function ci({ queueDepth: t, color: n }) {
               top: 0,
               left: 0,
               right: 0,
-              height: Ce * 0.35,
+              height: Te * 0.35,
               background: `radial-gradient(ellipse at 50% 0%,
           ${t > 70 ? "rgba(255,34,85,0.14)" : `${n}15`} 0%,
           transparent 70%)`
@@ -4462,8 +4464,8 @@ function kt({
   instances: c = 3,
   _compact: p
 }) {
-  const [f, g] = R(n), h = Z(0), y = Z(0);
-  Oe(() => {
+  const [f, g] = R(n), h = J(0), y = J(0);
+  De(() => {
     if (!r) {
       g(n);
       return;
@@ -4480,8 +4482,8 @@ function kt({
     "div",
     {
       style: {
-        width: oe * i,
-        height: Q * i,
+        width: le * i,
+        height: K * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -4541,8 +4543,8 @@ function kt({
           {
             style: {
               position: "absolute",
-              width: oe * 1.3 * i,
-              height: Q * 2 * i,
+              width: le * 1.3 * i,
+              height: K * 2 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
@@ -4565,15 +4567,15 @@ function kt({
               "div",
               {
                 style: {
-                  width: oe,
-                  height: Q,
+                  width: le,
+                  height: K,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: ke.front, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: Ee.front, children: /* @__PURE__ */ e(
                     si,
                     {
                       cfg: m,
@@ -4584,11 +4586,11 @@ function kt({
                       compact: p
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: ke.back, children: /* @__PURE__ */ e(di, {}) }),
-                  /* @__PURE__ */ e("div", { style: ke.left, children: /* @__PURE__ */ e(yt, { side: "left", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: ke.right, children: /* @__PURE__ */ e(yt, { side: "right", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: ke.top, children: /* @__PURE__ */ e(ci, { queueDepth: l, color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: ke.bottom, children: /* @__PURE__ */ e("div", { style: { width: oe, height: Ce, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: Ee.back, children: /* @__PURE__ */ e(di, {}) }),
+                  /* @__PURE__ */ e("div", { style: Ee.left, children: /* @__PURE__ */ e(yt, { side: "left", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: Ee.right, children: /* @__PURE__ */ e(yt, { side: "right", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: Ee.top, children: /* @__PURE__ */ e(ci, { queueDepth: l, color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: Ee.bottom, children: /* @__PURE__ */ e("div", { style: { width: le, height: Te, background: "#020508" } }) })
                 ]
               }
             )
@@ -4618,7 +4620,7 @@ function Hi({
   alert: v
 }) {
   return /* @__PURE__ */ e(
-    A,
+    T,
     {
       ex: t,
       ey: n,
@@ -4799,7 +4801,7 @@ function Rt({
       style: {
         width: t,
         height: n,
-        background: Le,
+        background: Ne,
         position: "relative",
         overflow: "hidden",
         borderRadius: 2,
@@ -4876,7 +4878,7 @@ function Rt({
     }
   );
 }
-function ze({
+function Ue({
   color: t = "#00e5ff",
   label: n = "CPU-0",
   status: o = "online",
@@ -4889,7 +4891,7 @@ function ze({
         style: {
           width: 52,
           height: 36,
-          background: Le,
+          background: Ne,
           position: "relative",
           borderRadius: 2,
           border: `1px solid ${t}55`,
@@ -4987,7 +4989,7 @@ function ze({
     )
   ] });
 }
-function Be({
+function He({
   color: t = "#00e5ff",
   label: n = "HEAP-0",
   status: o = "online",
@@ -5084,7 +5086,7 @@ function Be({
     )
   ] });
 }
-function Pe({
+function Ae({
   color: t = "#00e5ff",
   label: n = "DRIVE-1",
   status: o = "online",
@@ -5134,7 +5136,7 @@ function Et({
       style: {
         width: 48,
         height: 28,
-        background: Le,
+        background: Ne,
         position: "relative",
         borderRadius: 2,
         border: `1px solid ${t}44`,
@@ -5194,7 +5196,7 @@ function M({
 }) {
   return /* @__PURE__ */ e(Rt, { w: 44, h: 28, color: t, label: n, status: o });
 }
-function Me({
+function Be({
   color: t = "#ff8c00",
   label: n = "PLATTER-0",
   status: o = "online",
@@ -5278,7 +5280,7 @@ function Me({
     )
   ] });
 }
-function F({
+function U({
   color: t = "#00e5ff",
   label: n = "PORT-1",
   status: o = "online"
@@ -5494,7 +5496,7 @@ function yi({
         key: "cpu0",
         delay: 0,
         el: /* @__PURE__ */ e(
-          ze,
+          Ue,
           {
             color: a,
             label: "CPU-0",
@@ -5508,7 +5510,7 @@ function yi({
         key: "cpu1",
         delay: 1,
         el: /* @__PURE__ */ e(
-          ze,
+          Ue,
           {
             color: a,
             label: "CPU-1",
@@ -5522,7 +5524,7 @@ function yi({
         key: "heap0",
         delay: 2,
         el: /* @__PURE__ */ e(
-          Be,
+          He,
           {
             color: "#8855ee",
             label: "HEAP-0",
@@ -5536,7 +5538,7 @@ function yi({
         key: "heap1",
         delay: 3,
         el: /* @__PURE__ */ e(
-          Be,
+          He,
           {
             color: "#8855ee",
             label: "HEAP-1",
@@ -5549,13 +5551,13 @@ function yi({
       {
         key: "d1",
         delay: 4,
-        el: /* @__PURE__ */ e(Pe, { color: a, label: "DRIVE-1", status: i[4]?.status, activity: !0 })
+        el: /* @__PURE__ */ e(Ae, { color: a, label: "DRIVE-1", status: i[4]?.status, activity: !0 })
       },
       {
         key: "d2",
         delay: 5,
         el: /* @__PURE__ */ e(
-          Pe,
+          Ae,
           {
             color: a,
             label: "DRIVE-2",
@@ -5568,7 +5570,7 @@ function yi({
         key: "d3",
         delay: 6,
         el: /* @__PURE__ */ e(
-          Pe,
+          Ae,
           {
             color: a,
             label: "DRIVE-3",
@@ -5625,7 +5627,7 @@ function yi({
             transform: `scale(${r >= 0.25 + c * 0.04 ? 1 : 0.5})`,
             transition: `opacity 0.35s ${D} ${c * 0.04}s, transform 0.4s ${D} ${c * 0.04}s`
           },
-          children: /* @__PURE__ */ e(F, { color: a, label: `PORT-${c + 1}`, status: p?.status })
+          children: /* @__PURE__ */ e(U, { color: a, label: `PORT-${c + 1}`, status: p?.status })
         },
         `p${c}`
       );
@@ -5691,7 +5693,7 @@ function yi({
                 transform: `scale(${r >= 0.25 + l * 0.1 ? 1 : 0.6})`,
                 transition: `all 0.4s ${D} ${l * 0.08}s`
               },
-              children: /* @__PURE__ */ e(F, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
+              children: /* @__PURE__ */ e(U, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
             },
             l
           )),
@@ -5751,7 +5753,7 @@ function yi({
                 transition: `all 0.45s ${D} ${u * 0.1}s`
               },
               children: /* @__PURE__ */ e(
-                Me,
+                Be,
                 {
                   color: s,
                   label: `PLATTER-${u}`,
@@ -6112,15 +6114,15 @@ function mi({ onSubmit: t }) {
     /* @__PURE__ */ e("div", { className: "cred-footer", children: "CREDENTIALS ARE STORED IN MEMORY ONLY" })
   ] }) });
 }
-const at = He(null);
+const at = _e(null);
 function xi() {
-  const t = ae(at);
+  const t = de(at);
   if (!t)
     throw new Error("useAIOpsData must be used within an AIOPsDashboard with dataEndpoint configured");
   return t;
 }
 function vi() {
-  return ae(at);
+  return de(at);
 }
 function Vi(t) {
   const { data: n } = xi();
@@ -6142,9 +6144,9 @@ function Si(t) {
   return t;
 }
 function $i({ config: t, children: n }) {
-  const [o, i] = R({}), [r, a] = R(null), [s, l] = R(!1), [u, c] = R(null), [p, f] = R(null), g = Z(t);
+  const [o, i] = R({}), [r, a] = R(null), [s, l] = R(!1), [u, c] = R(null), [p, f] = R(null), g = J(t);
   g.current = t;
-  const h = Z(r);
+  const h = J(r);
   h.current = r;
   const y = ct(async () => {
     const x = h.current, w = g.current;
@@ -6166,14 +6168,14 @@ function $i({ config: t, children: n }) {
             }).then((z) => ({ query: S, data: z.trim() }));
           })
         ), k = {};
-        let T = 0;
+        let A = 0;
         for (const S of b)
-          S.status === "fulfilled" ? k[S.value.query] = S.value.data : T++;
+          S.status === "fulfilled" ? k[S.value.query] = S.value.data : A++;
         i((S) => ({ ...S, ...k }));
         const $ = w.queries.length;
         c(
-          T > 0 ? `${T} of ${$} queries failed to refresh` : null
-        ), T < $ && f(/* @__PURE__ */ new Date());
+          A > 0 ? `${A} of ${$} queries failed to refresh` : null
+        ), A < $ && f(/* @__PURE__ */ new Date());
       } catch (b) {
         const k = b instanceof Error ? b.message : "Refresh failed";
         c(k);
@@ -6182,7 +6184,7 @@ function $i({ config: t, children: n }) {
       }
     }
   }, []);
-  Oe(() => {
+  De(() => {
     if (!r) return;
     y();
     const x = g.current.refreshInterval ?? 6e4, w = window.setInterval(y, x);
@@ -6233,38 +6235,38 @@ function mt({
   dataTransform: u,
   children: c
 }) {
-  const p = vi(), [f] = R(20), [g] = R(!1), [h] = R(!0), [y] = R(0.45), [m] = R(3.3), [v, x] = R("compact"), [w, b] = R(0), [k, T] = R(null), [$, S] = R(null), [N, B] = R(0), z = (C) => {
-    v === "compact" && (T(C), x("expanding"), b(0), setTimeout(() => b(1), 50), setTimeout(() => b(2), 800), setTimeout(() => b(3), 1200), setTimeout(() => b(4), 1600), setTimeout(() => b(5), 2e3), setTimeout(() => {
+  const p = vi(), [f] = R(20), [g] = R(!1), [h] = R(!0), [y] = R(0.45), [m] = R(3.3), [v, x] = R("compact"), [w, b] = R(0), [k, A] = R(null), [$, S] = R(null), [N, B] = R(0), z = (C) => {
+    v === "compact" && (A(C), x("expanding"), b(0), setTimeout(() => b(1), 50), setTimeout(() => b(2), 800), setTimeout(() => b(3), 1200), setTimeout(() => b(4), 1600), setTimeout(() => b(5), 2e3), setTimeout(() => {
       b(6), x("expanded");
     }, 2400));
-  }, U = () => {
-    $ ? (S(null), B(0)) : v === "expanded" && (x("collapsing"), b(0), T(null), setTimeout(() => {
+  }, H = () => {
+    $ ? (S(null), B(0)) : v === "expanded" && (x("collapsing"), b(0), A(null), setTimeout(() => {
       x((C) => C === "collapsing" ? "compact" : C);
     }, 1e3));
-  }, le = (C) => {
+  }, ce = (C) => {
     S(C), B(0);
   };
-  X.useEffect(() => {
+  F.useEffect(() => {
     if (!$) return;
-    const C = performance.now(), ue = 1200, te = () => {
-      const J = performance.now() - C, _ = Math.min(1, J / ue);
-      B(_), _ < 1 && requestAnimationFrame(te);
-    }, he = requestAnimationFrame(te);
-    return () => cancelAnimationFrame(he);
+    const C = performance.now(), ge = 1200, oe = () => {
+      const te = performance.now() - C, X = Math.min(1, te / ge);
+      B(X), X < 1 && requestAnimationFrame(oe);
+    }, ye = requestAnimationFrame(oe);
+    return () => cancelAnimationFrame(ye);
   }, [$]);
-  const se = () => {
+  const pe = () => {
     S(null), B(0);
-  }, I = o.find((C) => C.name === k), H = I?.status ?? "online", de = I?.dbSync ?? !0, ce = I?.metrics, Y = I?.alerts, V = u ?? Si, L = p?.data, K = Ze(() => !L || !l ? c : X.Children.map(c, (C) => {
-    if (!X.isValidElement(C)) return C;
-    const ue = C.props.name;
-    if (!ue || !l[ue]) return C;
-    const te = l[ue], he = {};
-    for (const [J, _] of Object.entries(te)) {
-      const dt = typeof _ == "string" ? _ : _.query, ve = typeof _ == "object" && _.transform ? _.transform : V, De = L[dt];
-      De !== void 0 && (he[J] = ve(De));
+  }, I = o.find((C) => C.name === k), Y = I?.status ?? "online", fe = I?.dbSync ?? !0, V = I?.metrics, _ = I?.alerts, j = u ?? Si, L = p?.data, G = Fe(() => !L || !l ? c : F.Children.map(c, (C) => {
+    if (!F.isValidElement(C)) return C;
+    const ge = C.props.name;
+    if (!ge || !l[ge]) return C;
+    const oe = l[ge], ye = {};
+    for (const [te, X] of Object.entries(oe)) {
+      const dt = typeof X == "string" ? X : X.query, Se = typeof X == "object" && X.transform ? X.transform : j, We = L[dt];
+      We !== void 0 && (ye[te] = Se(We));
     }
-    return Object.keys(he).length > 0 ? X.cloneElement(C, he) : C;
-  }), [c, L, l, V]), pe = p?.lastRefreshError ?? null, me = 330, xe = 340, Ye = $ ? 1.15 : 1, Ve = $ ? -($.ex - me) * 0.06 : 0, fe = $ ? -($.ey - xe) * 0.06 : 0;
+    return Object.keys(ye).length > 0 ? F.cloneElement(C, ye) : C;
+  }), [c, L, l, j]), ue = p?.lastRefreshError ?? null, ne = 330, ee = 340, we = $ ? 1.15 : 1, he = $ ? -($.ex - ne) * 0.06 : 0, be = $ ? -($.ey - ee) * 0.06 : 0;
   return /* @__PURE__ */ d("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
@@ -6279,7 +6281,7 @@ function mt({
           backgroundPosition: "center center",
           backgroundRepeat: "no-repeat",
           transition: "transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
-          transform: `translate(${Ve}px, ${fe}px) scale(${Ye})`,
+          transform: `translate(${he}px, ${be}px) scale(${we})`,
           willChange: "transform"
         }
       }
@@ -6290,7 +6292,7 @@ function mt({
         /* @__PURE__ */ e("span", { className: "brand-text", children: t })
       ] }),
       /* @__PURE__ */ d("div", { className: "hdr-right", children: [
-        pe && /* @__PURE__ */ d("div", { className: "hdr-refresh-error", children: [
+        ue && /* @__PURE__ */ d("div", { className: "hdr-refresh-error", children: [
           /* @__PURE__ */ e("span", { className: "refresh-error-dot" }),
           /* @__PURE__ */ e("span", { className: "refresh-error-text", children: "DATA REFRESH FAILED" })
         ] }),
@@ -6304,7 +6306,7 @@ function mt({
         style: {
           cursor: v === "expanded" ? "zoom-out" : "default"
         },
-        onClick: U,
+        onClick: H,
         children: /* @__PURE__ */ e(
           Yt,
           {
@@ -6321,14 +6323,14 @@ function mt({
             carouselSpeed: a,
             logoUrl: r,
             onSelectSystem: z,
-            onBackgroundClick: U,
-            onComponentClick: le,
-            onCloseDrill: se,
-            selectedSystemStatus: H,
-            selectedSystemDbSync: de,
-            selectedSystemMetrics: ce,
-            selectedSystemAlerts: Y,
-            children: K
+            onBackgroundClick: H,
+            onComponentClick: ce,
+            onCloseDrill: pe,
+            selectedSystemStatus: Y,
+            selectedSystemDbSync: fe,
+            selectedSystemMetrics: V,
+            selectedSystemAlerts: _,
+            children: G
           }
         )
       }
@@ -6344,21 +6346,21 @@ function P(t, n, o = 24) {
 function Ct(t) {
   return t === "critical" || t === "offline" ? "#ff2255" : t === "warning" ? "#ff8c00" : "#00e5ff";
 }
-function Ae(t, n, o) {
+function Ie(t, n, o) {
   const i = t === "online" ? "online" : t, r = Ct(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", u = i === "warning" && s > 85 ? "warning" : i === "critical" ? "critical" : "online", c = i === "critical" && n === "APP-03" ? "critical" : "online", p = i === "offline" ? "offline" : "online";
   return [
-    { id: "cpu-0", label: "CPU-0", status: l, detail: i === "critical" ? "Core overload" : i === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(ze, { color: r, label: "CPU-0", status: l, load: a }) },
-    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(ze, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
-    { id: "heap-0", label: "HEAP-0", status: u, detail: u === "warning" ? "Memory heap usage" : u === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(Be, { color: "#8855ee", label: "HEAP-0", status: u, usedPercent: s }) },
-    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(Be, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
-    { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(Pe, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
-    { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(Pe, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
-    { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(Pe, { color: r, label: "DRIVE-3", status: "online", activity: a > 50 }) },
+    { id: "cpu-0", label: "CPU-0", status: l, detail: i === "critical" ? "Core overload" : i === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(Ue, { color: r, label: "CPU-0", status: l, load: a }) },
+    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(Ue, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
+    { id: "heap-0", label: "HEAP-0", status: u, detail: u === "warning" ? "Memory heap usage" : u === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(He, { color: "#8855ee", label: "HEAP-0", status: u, usedPercent: s }) },
+    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(He, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
+    { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(Ae, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
+    { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(Ae, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
+    { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(Ae, { color: r, label: "DRIVE-3", status: "online", activity: a > 50 }) },
     { id: "thread-pool", label: "THREAD-POOL", status: c, detail: c === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(M, { color: r, label: "THREAD-POOL", status: c }) },
     { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(Et, { color: r, label: "NET", status: p }) }
   ];
 }
-function Te(t) {
+function Oe(t) {
   const n = t?.cpuLoad ?? 50, o = t?.memLoad ?? 60;
   return [
     { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: P(n, 15) },
@@ -6374,19 +6376,19 @@ function Te(t) {
 function Pt(t, n, o) {
   const i = t === "online" ? "online" : t, r = Ct(t), a = i === "critical" || i === "offline" ? i : "online", s = i === "warning" ? "warning" : "online", l = i === "critical" ? "critical" : "online";
   return [
-    { id: "port-1", label: "PORT-1", status: "online", element: /* @__PURE__ */ e(F, { color: r, label: "PORT-1", status: "online" }) },
-    { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(F, { color: r, label: "PORT-2", status: "online" }) },
-    { id: "port-3", label: "PORT-3", status: a, detail: i === "critical" ? "Gateway timeout" : i === "offline" ? "Unreachable" : void 0, element: /* @__PURE__ */ e(F, { color: r, label: "PORT-3", status: a }) },
-    { id: "port-4", label: "PORT-4", status: "online", element: /* @__PURE__ */ e(F, { color: r, label: "PORT-4", status: "online" }) },
-    { id: "port-5", label: "PORT-5", status: s, detail: s === "warning" ? "Latency spike" : void 0, element: /* @__PURE__ */ e(F, { color: r, label: "PORT-5", status: s }) },
-    { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(F, { color: r, label: "PORT-6", status: "online" }) },
-    { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(F, { color: r, label: "PORT-7", status: "online" }) },
-    { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(F, { color: r, label: "PORT-8", status: "online" }) },
+    { id: "port-1", label: "PORT-1", status: "online", element: /* @__PURE__ */ e(U, { color: r, label: "PORT-1", status: "online" }) },
+    { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(U, { color: r, label: "PORT-2", status: "online" }) },
+    { id: "port-3", label: "PORT-3", status: a, detail: i === "critical" ? "Gateway timeout" : i === "offline" ? "Unreachable" : void 0, element: /* @__PURE__ */ e(U, { color: r, label: "PORT-3", status: a }) },
+    { id: "port-4", label: "PORT-4", status: "online", element: /* @__PURE__ */ e(U, { color: r, label: "PORT-4", status: "online" }) },
+    { id: "port-5", label: "PORT-5", status: s, detail: s === "warning" ? "Latency spike" : void 0, element: /* @__PURE__ */ e(U, { color: r, label: "PORT-5", status: s }) },
+    { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(U, { color: r, label: "PORT-6", status: "online" }) },
+    { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(U, { color: r, label: "PORT-7", status: "online" }) },
+    { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(U, { color: r, label: "PORT-8", status: "online" }) },
     { id: "http-worker", label: "HTTP-WORKER", status: l, detail: l === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(M, { color: r, label: "HTTP-WORKER", status: l }) },
     { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
   ];
 }
-function At(t) {
+function Tt(t) {
   const n = t?.traffic ?? 50;
   return [
     { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: P(n, 20) },
@@ -6399,9 +6401,9 @@ function At(t) {
 function ki(t, n, o) {
   const i = t === "online" ? "online" : t, r = i === "critical" ? "critical" : "online", a = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", s = i === "critical" ? "critical" : "online";
   return [
-    { id: "inst-0", label: "INST-0", status: "online", element: /* @__PURE__ */ e(F, { color: "#bb55ff", label: "INST-0", status: "online" }) },
-    { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(F, { color: "#bb55ff", label: "INST-1", status: "online" }) },
-    { id: "inst-2", label: "INST-2", status: r, detail: r === "critical" ? "Instance unreachable" : void 0, element: /* @__PURE__ */ e(F, { color: "#bb55ff", label: "INST-2", status: r }) },
+    { id: "inst-0", label: "INST-0", status: "online", element: /* @__PURE__ */ e(U, { color: "#bb55ff", label: "INST-0", status: "online" }) },
+    { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(U, { color: "#bb55ff", label: "INST-1", status: "online" }) },
+    { id: "inst-2", label: "INST-2", status: r, detail: r === "critical" ? "Instance unreachable" : void 0, element: /* @__PURE__ */ e(U, { color: "#bb55ff", label: "INST-2", status: r }) },
     { id: "queue-0", label: "QUEUE-0", status: a, detail: i === "critical" ? "Queue full" : i === "offline" ? "Unreachable" : i === "warning" ? "Queue depth warning" : void 0, element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
     { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
     { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "WORKER-2", status: "online" }) },
@@ -6418,17 +6420,17 @@ function Ri(t) {
     { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: P(n * 0.9, 15) }
   ];
 }
-function Fe(t, n, o) {
+function Ye(t, n, o) {
   const i = t === "online" ? "online" : t, r = "#ff8c00", a = o?.capacity ?? 72, s = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", l = i === "warning" && n === "DB-STB" ? "warning" : "online", u = i === "critical" ? "critical" : "online", c = i === "warning" ? "warning" : "online";
   return [
-    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Me, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
-    { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Me, { color: r, label: "PLATTER-1", status: s, capacityPercent: a }) },
-    { id: "platter-2", label: "PLATTER-2", status: l, detail: l === "warning" ? "Replication lag" : void 0, element: /* @__PURE__ */ e(Me, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
+    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Be, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
+    { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Be, { color: r, label: "PLATTER-1", status: s, capacityPercent: a }) },
+    { id: "platter-2", label: "PLATTER-2", status: l, detail: l === "warning" ? "Replication lag" : void 0, element: /* @__PURE__ */ e(Be, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
     { id: "conn-pool", label: "CONN-POOL", status: u, detail: u === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(M, { color: r, label: "CONN-POOL", status: u }) },
     { id: "query-cache", label: "QUERY-CACHE", status: c, detail: c === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(M, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
   ];
 }
-function Ue(t) {
+function Ve(t) {
   const n = t?.capacity ?? 70;
   return [
     { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: P(40, 20) },
@@ -6495,10 +6497,10 @@ const Ei = [
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
 function Ci({ config: t }) {
-  const n = X.useContext(ye), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: u, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
-  return /* @__PURE__ */ d(Ie, { children: [
+  const n = F.useContext(ve), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: u, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
+  return /* @__PURE__ */ d(Le, { children: [
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 120,
@@ -6510,7 +6512,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 220,
         ey: 260,
@@ -6526,7 +6528,7 @@ function Ci({ config: t }) {
           status: r,
           context: { traffic: 78 },
           subComponents: Pt(r),
-          graphSeries: At({ traffic: 78 })
+          graphSeries: Tt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
           rt,
@@ -6543,7 +6545,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 440,
         ey: 260,
@@ -6577,7 +6579,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 165,
         ey: 390,
@@ -6592,11 +6594,11 @@ function Ci({ config: t }) {
           name: "APP-01",
           status: s,
           context: { cpuLoad: 67, memLoad: 72 },
-          subComponents: Ae(s, "APP-01", { cpuLoad: 67, memLoad: 72 }),
-          graphSeries: Te({ cpuLoad: 67, memLoad: 72 })
+          subComponents: Ie(s, "APP-01", { cpuLoad: 67, memLoad: 72 }),
+          graphSeries: Oe({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          ge,
+          xe,
           {
             rotateY: o,
             autoRotate: i,
@@ -6610,7 +6612,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 390,
@@ -6625,11 +6627,11 @@ function Ci({ config: t }) {
           name: "APP-02",
           status: l,
           context: { cpuLoad: 89, memLoad: 91 },
-          subComponents: Ae(l, "APP-02", { cpuLoad: 89, memLoad: 91 }),
-          graphSeries: Te({ cpuLoad: 89, memLoad: 91 })
+          subComponents: Ie(l, "APP-02", { cpuLoad: 89, memLoad: 91 }),
+          graphSeries: Oe({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          ge,
+          xe,
           {
             rotateY: o,
             autoRotate: i,
@@ -6643,7 +6645,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 495,
         ey: 390,
@@ -6658,11 +6660,11 @@ function Ci({ config: t }) {
           name: "APP-03",
           status: u,
           context: { cpuLoad: 45, memLoad: 63 },
-          subComponents: Ae(u, "APP-03", { cpuLoad: 45, memLoad: 63 }),
-          graphSeries: Te({ cpuLoad: 45, memLoad: 63 })
+          subComponents: Ie(u, "APP-03", { cpuLoad: 45, memLoad: 63 }),
+          graphSeries: Oe({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          ge,
+          xe,
           {
             rotateY: o,
             autoRotate: i,
@@ -6676,7 +6678,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 200,
         ey: 520,
@@ -6691,11 +6693,11 @@ function Ci({ config: t }) {
           name: "DB-PRI",
           status: c,
           context: { capacity: 72 },
-          subComponents: Fe(c, "DB-PRI", { capacity: 72 }),
-          graphSeries: Ue({ capacity: 72 })
+          subComponents: Ye(c, "DB-PRI", { capacity: 72 }),
+          graphSeries: Ve({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ne,
+          Me,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6709,7 +6711,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 460,
         ey: 520,
@@ -6724,11 +6726,11 @@ function Ci({ config: t }) {
           name: "DB-STB",
           status: p,
           context: { capacity: 72 },
-          subComponents: Fe(p, "DB-STB", { capacity: 72 }),
-          graphSeries: Ue({ capacity: 72 })
+          subComponents: Ye(p, "DB-STB", { capacity: 72 }),
+          graphSeries: Ve({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ne,
+          Me,
           {
             rotateY: o,
             autoRotate: i,
@@ -6742,7 +6744,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 520,
@@ -6758,7 +6760,7 @@ function Ci({ config: t }) {
   ] });
 }
 function Pi({ config: t }) {
-  const n = X.useContext(ye), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: u, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
+  const n = F.useContext(ve), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: u, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
       W,
@@ -6936,7 +6938,7 @@ function Ki(t) {
     ...!o && !i && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
 }
-const Ai = [
+const Ti = [
   { from: [330, 120], to: [330, 260], visibleAtPhase: 3 },
   { from: [330, 260], to: [165, 390], visibleAtPhase: 4 },
   { from: [330, 260], to: [330, 390], visibleAtPhase: 4 },
@@ -6945,11 +6947,11 @@ const Ai = [
   { from: [330, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" },
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
-function Ti({ config: t }) {
-  const n = X.useContext(ye), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: u, sdbStatus: c, dbSync: p } = t;
-  return /* @__PURE__ */ d(Ie, { children: [
+function Ai({ config: t }) {
+  const n = F.useContext(ve), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: u, sdbStatus: c, dbSync: p } = t;
+  return /* @__PURE__ */ d(Le, { children: [
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 120,
@@ -6961,7 +6963,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 260,
@@ -6977,7 +6979,7 @@ function Ti({ config: t }) {
           status: r,
           context: { traffic: 78 },
           subComponents: Pt(r),
-          graphSeries: At({ traffic: 78 })
+          graphSeries: Tt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
           rt,
@@ -6994,7 +6996,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 165,
         ey: 390,
@@ -7009,11 +7011,11 @@ function Ti({ config: t }) {
           name: "APP-01",
           status: a,
           context: { cpuLoad: 67, memLoad: 72 },
-          subComponents: Ae(a, "APP-01", { cpuLoad: 67, memLoad: 72 }),
-          graphSeries: Te({ cpuLoad: 67, memLoad: 72 })
+          subComponents: Ie(a, "APP-01", { cpuLoad: 67, memLoad: 72 }),
+          graphSeries: Oe({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          ge,
+          xe,
           {
             rotateY: o,
             autoRotate: i,
@@ -7027,7 +7029,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 390,
@@ -7042,11 +7044,11 @@ function Ti({ config: t }) {
           name: "APP-02",
           status: s,
           context: { cpuLoad: 89, memLoad: 91 },
-          subComponents: Ae(s, "APP-02", { cpuLoad: 89, memLoad: 91 }),
-          graphSeries: Te({ cpuLoad: 89, memLoad: 91 })
+          subComponents: Ie(s, "APP-02", { cpuLoad: 89, memLoad: 91 }),
+          graphSeries: Oe({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          ge,
+          xe,
           {
             rotateY: o,
             autoRotate: i,
@@ -7060,7 +7062,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 495,
         ey: 390,
@@ -7075,11 +7077,11 @@ function Ti({ config: t }) {
           name: "APP-03",
           status: l,
           context: { cpuLoad: 45, memLoad: 63 },
-          subComponents: Ae(l, "APP-03", { cpuLoad: 45, memLoad: 63 }),
-          graphSeries: Te({ cpuLoad: 45, memLoad: 63 })
+          subComponents: Ie(l, "APP-03", { cpuLoad: 45, memLoad: 63 }),
+          graphSeries: Oe({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          ge,
+          xe,
           {
             rotateY: o,
             autoRotate: i,
@@ -7093,7 +7095,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 200,
         ey: 520,
@@ -7108,11 +7110,11 @@ function Ti({ config: t }) {
           name: "DB-PRI",
           status: u,
           context: { capacity: 72 },
-          subComponents: Fe(u, "DB-PRI", { capacity: 72 }),
-          graphSeries: Ue({ capacity: 72 })
+          subComponents: Ye(u, "DB-PRI", { capacity: 72 }),
+          graphSeries: Ve({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ne,
+          Me,
           {
             rotateY: -o,
             autoRotate: i,
@@ -7126,7 +7128,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 460,
         ey: 520,
@@ -7141,11 +7143,11 @@ function Ti({ config: t }) {
           name: "DB-STB",
           status: c,
           context: { capacity: 72 },
-          subComponents: Fe(c, "DB-STB", { capacity: 72 }),
-          graphSeries: Ue({ capacity: 72 })
+          subComponents: Ye(c, "DB-STB", { capacity: 72 }),
+          graphSeries: Ve({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ne,
+          Me,
           {
             rotateY: o,
             autoRotate: i,
@@ -7159,7 +7161,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 520,
@@ -7175,7 +7177,7 @@ function Ti({ config: t }) {
   ] });
 }
 function Ii({ config: t }) {
-  const n = X.useContext(ye), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: u } = t, c = n?.isSelected && n?.isExpandedPos;
+  const n = F.useContext(ve), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: u } = t, c = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
       W,
@@ -7290,50 +7292,50 @@ function Gi({ config: t, ...n }) {
     {
       name: t.name,
       status: st(t),
-      connections: Ai,
+      connections: Ti,
       ...n,
-      children: /* @__PURE__ */ e(Ti, { config: t })
+      children: /* @__PURE__ */ e(Ai, { config: t })
     }
   );
 }
 export {
   _i as AIOPsDashboard,
-  ze as CPU3D,
+  Ue as CPU3D,
   Yt as Carousel,
   tt as CarouselContext,
   it as CarouselItemContext,
   Ft as ComponentDialog,
   Yi as ComponentDrillView,
   $i as DataProvider,
-  Ne as Database3D,
+  Me as Database3D,
   Bi as DatabaseNode,
-  Pe as DriveBay3D,
-  Ai as EXCHANGE_CONNECTIONS,
+  Ae as DriveBay3D,
+  Ti as EXCHANGE_CONNECTIONS,
   Gi as ExchangeService,
   Ni as HOLO_BLUE,
   Di as HOLO_CYAN,
   Je as HOLO_GLASS,
-  Le as HOLO_SURFACE,
+  Ne as HOLO_SURFACE,
   fi as HistoricalGraphPanel,
   jt as HoloBase,
   ot as Human3D,
   Fi as HumanNode,
-  Be as Memory3D,
+  He as Memory3D,
   kt as MessageServer3D,
   Hi as MessageServerNode,
   Et as NetworkBlock3D,
   W as NodeCallout,
-  Me as Platter3D,
-  F as Port3D,
+  Be as Platter3D,
+  U as Port3D,
   qi as SAPService,
   Ei as SAP_CONNECTIONS,
   E as STATUS_CFG,
-  ge as Server3D,
+  xe as Server3D,
   zi as ServerNode,
   vt as Service,
-  ye as ServiceContext,
+  ve as ServiceContext,
   zt as ServiceDialog,
-  A as ServiceNode,
+  T as ServiceNode,
   Vt as SvgConnection,
   $t as SyncBridge,
   M as ThreadPool3D,
@@ -7346,14 +7348,14 @@ export {
   ji as computeSAPDialogMetrics,
   lt as computeSAPServiceStatus,
   Si as defaultDataTransform,
-  Ue as getDatabaseGraphSeries,
-  Fe as getDatabaseSubComponents,
-  At as getDispatcherGraphSeries,
+  Ve as getDatabaseGraphSeries,
+  Ye as getDatabaseSubComponents,
+  Tt as getDispatcherGraphSeries,
   Pt as getDispatcherSubComponents,
   Ri as getMessageServerGraphSeries,
   ki as getMessageServerSubComponents,
-  Te as getServerGraphSeries,
-  Ae as getServerSubComponents,
+  Oe as getServerGraphSeries,
+  Ie as getServerSubComponents,
   et as makeFaceStyles,
   xi as useAIOpsData,
   vi as useAIOpsDataOptional,