react-aiops 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,11 +1,11 @@
-import { jsxs as d, jsx as e, Fragment as Ce } from "react/jsx-runtime";
-import ee, { createContext as Ge, useContext as ve, useState as I, useEffect as Ae, useMemo as Xe, useRef as te } from "react";
-const It = {
+import { jsxs as d, jsx as e, Fragment as ve } from "react/jsx-runtime";
+import J, { createContext as je, useContext as we, useState as L, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
+const Tt = {
   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: "⚠️" },
   critical: { color: "#ff2255", bg: "rgba(255, 34, 85, 0.1)", border: "#ff2255", icon: "🛑" }
 };
-function Ot({
+function At({
   name: t,
   status: n,
   dbSync: o = !0,
@@ -13,7 +13,7 @@ function Ot({
   metrics: r,
   alerts: a
 }) {
-  const s = n === "critical" || n === "offline", l = n === "warning", f = r ?? [
+  const s = n === "critical" || n === "offline", l = n === "warning", h = r ?? [
     {
       label: "Uptime",
       value: s ? "92.14%" : "99.98%",
@@ -115,10 +115,10 @@ function Ot({
               fontSize: 13,
               color: "#a0b0c0"
             },
-            children: f.map((p, h) => /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            children: h.map((p, f) => /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
               /* @__PURE__ */ e("span", { children: p.label }),
               /* @__PURE__ */ e("span", { style: { color: p.color }, children: p.value })
-            ] }, h))
+            ] }, f))
           }
         ),
         /* @__PURE__ */ d(
@@ -145,8 +145,8 @@ function Ot({
                   children: "SYSTEM ALERTS"
                 }
               ),
-              c.map((p, h) => {
-                const y = It[p.level];
+              c.map((p, f) => {
+                const y = Tt[p.level];
                 return /* @__PURE__ */ d(
                   "div",
                   {
@@ -167,7 +167,7 @@ function Ot({
                       /* @__PURE__ */ e("span", { children: p.message })
                     ]
                   },
-                  h
+                  f
                 );
               })
             ]
@@ -182,8 +182,8 @@ const w = {
   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)" }
-}, ki = "#00e5ff", Ri = "#0055cc", we = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", Ke = "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 Ze(t, n, o) {
+}, yi = "#00e5ff", mi = "#0055cc", Se = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", Qe = "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 qe(t, n, o) {
   const i = {
     position: "absolute",
     overflow: "hidden",
@@ -233,24 +233,24 @@ function Ze(t, n, o) {
     }
   };
 }
-const je = "cubic-bezier(0.34, 1.56, 0.64, 1)", Qe = "cubic-bezier(0.16, 1, 0.3, 1)";
-function ht(t) {
+const Ve = "cubic-bezier(0.34, 1.56, 0.64, 1)", _e = "cubic-bezier(0.16, 1, 0.3, 1)";
+function st(t) {
   return w[t]?.color ?? w.online.color;
 }
-function Dt(t, n, o) {
+function Lt(t, n, o) {
   return t >= o ? "#ff2255" : t >= n ? "#ff8c00" : "#00e5ff";
 }
-function Ie(t, n, o, i) {
+function Le(t, n, o, i) {
   return t === "offline" ? "offline" : t === "critical" && n >= i ? "critical" : (t === "critical" || t === "warning") && n >= o ? "warning" : "online";
 }
-function Wt({
+function It({
   component: t,
   onClose: n,
   visible: o,
   sceneWidth: i = 660,
   sceneHeight: r = 600
 }) {
-  const { type: a, name: s, status: l, ex: f, ey: c, context: p = {} } = t, h = ht(l), y = f >= i / 2, u = c >= r / 2, g = {
+  const { type: a, name: s, status: l, ex: h, ey: c, context: p = {} } = t, f = st(l), y = h >= i / 2, u = c >= r / 2, g = {
     position: "fixed",
     ...y ? { right: 28 } : { left: 28 },
     ...u ? { bottom: 110 } : { top: 72 }
@@ -258,23 +258,23 @@ function Wt({
   let $;
   if (v && v.length > 0)
     $ = v.map((b, k) => {
-      const T = b.warnAt ?? 70, R = b.critAt ?? 85;
+      const D = b.warnAt ?? 70, P = b.critAt ?? 85;
       return {
         id: b.id,
         label: b.label,
         sublabel: b.sublabel,
         value: b.value,
         unit: b.unit ?? "%",
-        status: Ie(l, b.value, T, R),
+        status: Le(l, b.value, D, P),
         icon: b.icon ?? "cpu",
         delay: k,
         colorOverride: b.color,
-        warnAt: T,
-        critAt: R
+        warnAt: D,
+        critAt: P
       };
     });
   else {
-    const b = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, T = p.capacity ?? 72, R = Ie(l, b, 70, 85), L = Ie(l, k, 75, 88), z = Ie(l, T, 75, 90);
+    const b = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, D = p.capacity ?? 72, P = Le(l, b, 70, 85), E = Le(l, k, 75, 88), W = Le(l, D, 75, 90);
     $ = [
       {
         id: "cpu",
@@ -282,7 +282,7 @@ function Wt({
         sublabel: a === "dispatcher" ? "PORT LOAD" : a === "messageServer" ? "QUEUE DEPTH" : "PROCESSOR",
         value: b,
         unit: "%",
-        status: R,
+        status: P,
         icon: "cpu",
         delay: 0
       },
@@ -292,7 +292,7 @@ function Wt({
         sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
         value: k,
         unit: "%",
-        status: L,
+        status: E,
         icon: "mem",
         delay: 1
       },
@@ -300,9 +300,9 @@ function Wt({
         id: "storage",
         label: "STORAGE",
         sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
-        value: T,
+        value: D,
         unit: "%",
-        status: z,
+        status: W,
         icon: "disk",
         delay: 2
       }
@@ -317,17 +317,17 @@ function Wt({
         background: "linear-gradient(170deg, rgba(2, 10, 22, 0.96) 0%, rgba(2, 6, 14, 0.98) 100%)",
         backdropFilter: "blur(20px)",
         WebkitBackdropFilter: "blur(20px)",
-        border: `1.5px solid ${h}44`,
+        border: `1.5px solid ${f}44`,
         borderRadius: 14,
         fontFamily: "'Courier New', monospace",
         overflow: "hidden",
         opacity: o ? 1 : 0,
         transform: o ? "scale(1) translate(0, 0)" : `scale(0.7) translate(${m}px, ${x}px)`,
-        transition: `opacity 0.45s ${Qe}, transform 0.55s ${je}`,
+        transition: `opacity 0.45s ${_e}, transform 0.55s ${Ve}`,
         pointerEvents: o ? "auto" : "none",
         zIndex: 9999,
         animation: o ? "comp-dialog-border-glow 3s ease-in-out infinite" : "none",
-        "--dialog-color": h
+        "--dialog-color": f
       },
       onClick: (b) => b.stopPropagation(),
       children: [
@@ -340,8 +340,8 @@ function Wt({
               left: 0,
               right: 0,
               height: 2,
-              background: `linear-gradient(90deg, transparent 2%, ${h}aa 30%, #fff 50%, ${h}aa 70%, transparent 98%)`,
-              boxShadow: `0 0 12px ${h}, 0 0 24px ${h}44`,
+              background: `linear-gradient(90deg, transparent 2%, ${f}aa 30%, #fff 50%, ${f}aa 70%, transparent 98%)`,
+              boxShadow: `0 0 12px ${f}, 0 0 24px ${f}44`,
               animation: o ? "holo-scan 3.5s linear infinite" : "none",
               pointerEvents: "none",
               zIndex: 10
@@ -355,8 +355,8 @@ function Wt({
               position: "absolute",
               inset: 0,
               backgroundImage: `
-            linear-gradient(${h}06 1px, transparent 1px),
-            linear-gradient(90deg, ${h}06 1px, transparent 1px)
+            linear-gradient(${f}06 1px, transparent 1px),
+            linear-gradient(90deg, ${f}06 1px, transparent 1px)
           `,
               backgroundSize: "20px 20px",
               pointerEvents: "none",
@@ -368,29 +368,29 @@ function Wt({
           {
             top: 0,
             left: 0,
-            borderTop: `2px solid ${h}66`,
-            borderLeft: `2px solid ${h}66`,
+            borderTop: `2px solid ${f}66`,
+            borderLeft: `2px solid ${f}66`,
             borderRadius: "14px 0 0 0"
           },
           {
             top: 0,
             right: 0,
-            borderTop: `2px solid ${h}66`,
-            borderRight: `2px solid ${h}66`,
+            borderTop: `2px solid ${f}66`,
+            borderRight: `2px solid ${f}66`,
             borderRadius: "0 14px 0 0"
           },
           {
             bottom: 0,
             left: 0,
-            borderBottom: `2px solid ${h}66`,
-            borderLeft: `2px solid ${h}66`,
+            borderBottom: `2px solid ${f}66`,
+            borderLeft: `2px solid ${f}66`,
             borderRadius: "0 0 0 14px"
           },
           {
             bottom: 0,
             right: 0,
-            borderBottom: `2px solid ${h}66`,
-            borderRight: `2px solid ${h}66`,
+            borderBottom: `2px solid ${f}66`,
+            borderRight: `2px solid ${f}66`,
             borderRadius: "0 0 14px 0"
           }
         ].map((b, k) => /* @__PURE__ */ e(
@@ -408,8 +408,8 @@ function Wt({
               alignItems: "center",
               justifyContent: "space-between",
               padding: "18px 22px",
-              borderBottom: `1px solid ${h}22`,
-              background: `linear-gradient(180deg, ${h}12 0%, transparent 100%)`,
+              borderBottom: `1px solid ${f}22`,
+              background: `linear-gradient(180deg, ${f}12 0%, transparent 100%)`,
               position: "relative",
               zIndex: 2
             },
@@ -423,8 +423,8 @@ function Wt({
                         width: 10,
                         height: 10,
                         borderRadius: "50%",
-                        background: h,
-                        boxShadow: `0 0 12px ${h}, 0 0 24px ${h}66`,
+                        background: f,
+                        boxShadow: `0 0 12px ${f}, 0 0 24px ${f}66`,
                         animation: l === "warning" || l === "critical" ? "holo-led-blink 1.5s infinite" : "none"
                       }
                     }
@@ -436,7 +436,7 @@ function Wt({
                         position: "absolute",
                         inset: -4,
                         borderRadius: "50%",
-                        border: `1px solid ${h}44`,
+                        border: `1px solid ${f}44`,
                         animation: l === "warning" || l === "critical" ? "holo-ring-pulse 2s ease-in-out infinite" : "none"
                       }
                     }
@@ -449,13 +449,13 @@ function Wt({
                       style: {
                         fontSize: 16,
                         fontWeight: 700,
-                        color: h,
+                        color: f,
                         letterSpacing: "0.12em",
                         textTransform: "uppercase",
                         whiteSpace: "nowrap",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
-                        textShadow: `0 0 10px ${h}88, 0 0 20px ${h}44`
+                        textShadow: `0 0 10px ${f}88, 0 0 20px ${f}44`
                       },
                       children: s
                     }
@@ -465,7 +465,7 @@ function Wt({
                     {
                       style: {
                         fontSize: 9,
-                        color: `${h}88`,
+                        color: `${f}88`,
                         letterSpacing: "0.2em",
                         textTransform: "uppercase"
                       },
@@ -484,9 +484,9 @@ function Wt({
                     width: 34,
                     height: 34,
                     borderRadius: 8,
-                    border: `1px solid ${h}44`,
-                    background: `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${h}08 100%)`,
-                    color: h,
+                    border: `1px solid ${f}44`,
+                    background: `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${f}08 100%)`,
+                    color: f,
                     fontSize: 18,
                     cursor: "pointer",
                     display: "flex",
@@ -497,10 +497,10 @@ function Wt({
                     flexShrink: 0
                   },
                   onMouseEnter: (b) => {
-                    b.currentTarget.style.background = `${h}22`, b.currentTarget.style.boxShadow = `0 0 12px ${h}44`;
+                    b.currentTarget.style.background = `${f}22`, b.currentTarget.style.boxShadow = `0 0 12px ${f}44`;
                   },
                   onMouseLeave: (b) => {
-                    b.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${h}08 100%)`, b.currentTarget.style.boxShadow = "none";
+                    b.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${f}08 100%)`, b.currentTarget.style.boxShadow = "none";
                   },
                   children: "×"
                 }
@@ -519,7 +519,7 @@ function Wt({
               position: "relative",
               zIndex: 2
             },
-            children: $.map((b) => /* @__PURE__ */ e(zt, { metric: b, visible: o, accentColor: h }, b.id))
+            children: $.map((b) => /* @__PURE__ */ e(Ot, { metric: b, visible: o, accentColor: f }, b.id))
           }
         ),
         /* @__PURE__ */ d(
@@ -527,14 +527,14 @@ function Wt({
           {
             style: {
               padding: "12px 22px",
-              borderTop: `1px solid ${h}18`,
-              background: `${h}06`,
+              borderTop: `1px solid ${f}18`,
+              background: `${f}06`,
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
               fontSize: 9,
               letterSpacing: "0.18em",
-              color: `${h}66`,
+              color: `${f}66`,
               textTransform: "uppercase",
               position: "relative",
               zIndex: 2
@@ -553,8 +553,8 @@ function Wt({
                       width: 5,
                       height: 5,
                       borderRadius: "50%",
-                      background: l === "online" ? "#00ff88" : h,
-                      boxShadow: `0 0 6px ${l === "online" ? "#00ff88" : h}`,
+                      background: l === "online" ? "#00ff88" : f,
+                      boxShadow: `0 0 6px ${l === "online" ? "#00ff88" : f}`,
                       animation: l === "warning" || l === "critical" ? "holo-led-blink 1.5s infinite" : "none"
                     }
                   }
@@ -568,7 +568,7 @@ function Wt({
     }
   );
 }
-function zt({
+function Ot({
   metric: t,
   visible: n,
   accentColor: o
@@ -579,12 +579,12 @@ function zt({
     value: a,
     unit: s,
     status: l,
-    icon: f,
+    icon: h,
     delay: c,
     colorOverride: p,
-    warnAt: h = 70,
+    warnAt: f = 70,
     critAt: y = 85
-  } = t, u = p ?? Dt(a, h, y), g = p ?? ht(l);
+  } = t, u = p ?? Lt(a, f, y), g = p ?? st(l);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -594,7 +594,7 @@ function zt({
         gap: 16,
         opacity: n ? 1 : 0,
         transform: n ? "translateY(0)" : "translateY(12px)",
-        transition: `opacity 0.4s ${Qe} ${0.3 + c * 0.12}s, transform 0.5s ${je} ${0.3 + c * 0.12}s`
+        transition: `opacity 0.4s ${_e} ${0.3 + c * 0.12}s, transform 0.5s ${Ve} ${0.3 + c * 0.12}s`
       },
       children: [
         /* @__PURE__ */ d(
@@ -612,10 +612,10 @@ function zt({
               flexShrink: 0,
               position: "relative",
               overflow: "hidden",
-              animation: n ? `comp-dialog-icon-pop 0.5s ${je} ${0.35 + c * 0.12}s both` : "none"
+              animation: n ? `comp-dialog-icon-pop 0.5s ${Ve} ${0.35 + c * 0.12}s both` : "none"
             },
             children: [
-              /* @__PURE__ */ e(Mt, { type: f, color: g }),
+              /* @__PURE__ */ e(Dt, { type: h, color: g }),
               (l === "warning" || l === "critical") && /* @__PURE__ */ e(
                 "div",
                 {
@@ -714,7 +714,7 @@ function zt({
                       background: `linear-gradient(90deg, ${u}66, ${u})`,
                       boxShadow: `0 0 8px ${u}44`,
                       transformOrigin: "left center",
-                      animation: n ? `comp-dialog-metric-fill 0.8s ${Qe} ${0.4 + c * 0.12}s both` : "none"
+                      animation: n ? `comp-dialog-metric-fill 0.8s ${_e} ${0.4 + c * 0.12}s both` : "none"
                     }
                   }
                 ),
@@ -723,7 +723,7 @@ function zt({
                   {
                     style: {
                       position: "absolute",
-                      left: `${h}%`,
+                      left: `${f}%`,
                       top: 0,
                       bottom: 0,
                       width: 1,
@@ -766,7 +766,7 @@ function zt({
               {
                 style: {
                   position: "absolute",
-                  left: `${h}%`,
+                  left: `${f}%`,
                   transform: "translateX(-50%)",
                   fontSize: 6,
                   color: "rgba(255,140,0,0.3)",
@@ -808,7 +808,7 @@ function zt({
     }
   );
 }
-function Mt({ type: t, color: n }) {
+function Dt({ type: t, color: n }) {
   return t === "cpu" ? /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ e("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", stroke: n, strokeWidth: "1.5" }),
     /* @__PURE__ */ e(
@@ -893,14 +893,14 @@ function Mt({ type: t, color: n }) {
     /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: n, strokeWidth: "0.8" })
   ] });
 }
-const Je = Ge(null), et = Ge({ index: 0 });
-function Pi() {
-  return ve(Je);
+const Ge = je(null), Ke = je({ index: 0 });
+function xi() {
+  return we(Ge);
 }
-function Ci() {
-  return ve(et);
+function vi() {
+  return we(Ke);
 }
-function Nt({
+function Wt({
   children: t,
   logoUrl: n,
   viewState: o,
@@ -909,10 +909,10 @@ function Nt({
   selectedComponent: a,
   drillAnimPhase: s,
   rotateY: l = 20,
-  autoRotateComponents: f = !0,
+  autoRotateComponents: h = !0,
   componentScale: c = 0.35,
   drillZoom: p = 3.3,
-  autoRotateCarousel: h = !0,
+  autoRotateCarousel: f = !0,
   carouselSpeed: y = 6e-3,
   width: u = 950,
   height: g = 790,
@@ -922,29 +922,29 @@ function Nt({
   onCloseDrill: $,
   selectedSystemStatus: b = "online",
   selectedSystemDbSync: k = !0,
-  selectedSystemMetrics: T,
-  selectedSystemAlerts: R
+  selectedSystemMetrics: D,
+  selectedSystemAlerts: P
 }) {
-  const [L, z] = I(0);
-  Ae(() => {
-    let W;
-    if ((o === "compact" || o === "collapsing") && h) {
-      const H = () => {
-        z((oe) => oe + y), W = requestAnimationFrame(H);
+  const [E, W] = L(0);
+  Ee(() => {
+    let z;
+    if ((o === "compact" || o === "collapsing") && f) {
+      const F = () => {
+        W((ne) => ne + y), z = requestAnimationFrame(F);
       };
-      W = requestAnimationFrame(H);
+      z = requestAnimationFrame(F);
     }
-    return () => cancelAnimationFrame(W);
-  }, [o, h, y]);
-  const F = ee.Children.toArray(t), j = F.length, M = Xe(() => ({
+    return () => cancelAnimationFrame(z);
+  }, [o, f, y]);
+  const X = J.Children.toArray(t), j = X.length, N = Et(() => ({
     totalSystems: j,
-    carouselRotation: L,
+    carouselRotation: E,
     viewState: o,
     animPhase: i,
     selectedSystem: r,
     selectedComponent: a,
     rotateY: l,
-    autoRotateComponents: f,
+    autoRotateComponents: h,
     componentScale: c,
     drillZoom: p,
     onSelectSystem: m,
@@ -952,20 +952,20 @@ function Nt({
     containerWidth: u
   }), [
     j,
-    L,
+    E,
     o,
     i,
     r,
     a,
     l,
-    f,
+    h,
     c,
     p,
     m,
     v,
     u
-  ]), ie = F.map((W, H) => /* @__PURE__ */ e(et.Provider, { value: { index: H }, children: W }, H)), ne = o === "expanded" || o === "expanding" && i >= 4;
-  return /* @__PURE__ */ d(Je.Provider, { value: M, children: [
+  ]), te = X.map((z, F) => /* @__PURE__ */ e(Ke.Provider, { value: { index: F }, children: z }, F)), ie = o === "expanded" || o === "expanding" && i >= 4;
+  return /* @__PURE__ */ d(Ge.Provider, { value: N, children: [
     /* @__PURE__ */ d("div", { style: { position: "relative", width: u, height: g, margin: "0 auto", flexShrink: 0 }, children: [
       n && (o === "compact" || o === "collapsing") && /* @__PURE__ */ e(
         "img",
@@ -987,21 +987,21 @@ function Nt({
           }
         }
       ),
-      ie
+      te
     ] }),
-    r && /* @__PURE__ */ e("div", { onClick: (W) => W.stopPropagation(), children: /* @__PURE__ */ e(
-      Ot,
+    r && /* @__PURE__ */ e("div", { onClick: (z) => z.stopPropagation(), children: /* @__PURE__ */ e(
+      At,
       {
         name: r,
         status: b,
         dbSync: k,
-        visible: ne && !a,
-        metrics: T,
-        alerts: R
+        visible: ie && !a,
+        metrics: D,
+        alerts: P
       }
     ) }),
-    a && /* @__PURE__ */ e("div", { onClick: (W) => W.stopPropagation(), children: /* @__PURE__ */ e(
-      Wt,
+    a && /* @__PURE__ */ e("div", { onClick: (z) => z.stopPropagation(), children: /* @__PURE__ */ e(
+      It,
       {
         component: a,
         onClose: $,
@@ -1012,7 +1012,7 @@ function Nt({
     ) })
   ] });
 }
-function Bt({
+function zt({
   x1: t,
   y1: n,
   x2: o,
@@ -1059,7 +1059,7 @@ function Bt({
         )
       }
     ),
-    r && /* @__PURE__ */ d(Ce, { children: [
+    r && /* @__PURE__ */ d(ve, { children: [
       /* @__PURE__ */ e("circle", { r: "3", fill: a, opacity: 0.85, children: /* @__PURE__ */ e(
         "animateMotion",
         {
@@ -1079,14 +1079,14 @@ function Bt({
     ] })
   ] });
 }
-const Ft = [
+const Mt = [
   { scale: 1, op: 1, delay: "0.0s", bw: "2px", glow: 1 },
   { scale: 0.82, op: 0.88, delay: "0.5s", bw: "1.5px", glow: 0.7 },
   { scale: 0.64, op: 0.72, delay: "1.0s", bw: "1px", glow: 0.5 },
   { scale: 0.47, op: 0.58, delay: "1.5s", bw: "1px", glow: 0.35 },
   { scale: 0.3, op: 0.45, delay: "2.0s", bw: "1px", glow: 0.25 }
 ];
-function Ht({
+function Nt({
   children: t,
   size: n = 230,
   widthRatio: o = 1,
@@ -1252,7 +1252,7 @@ function Ht({
         background: `radial-gradient(ellipse, ${i}88 0%, ${i}33 40%, transparent 72%)`,
         filter: "blur(12px)"
       } }),
-      Ft.map((s, l) => /* @__PURE__ */ e("div", { style: {
+      Mt.map((s, l) => /* @__PURE__ */ e("div", { style: {
         position: "absolute",
         width: a * s.scale,
         height: n * s.scale,
@@ -1295,8 +1295,8 @@ function Ht({
     }, children: r })
   ] });
 }
-const le = Ge(null), Ut = "cubic-bezier(0.34, 1.56, 0.64, 1)", lt = 330, st = 340, Yt = 660;
-function tt({
+const ae = je(null), Bt = "cubic-bezier(0.34, 1.56, 0.64, 1)", it = 330, nt = 340, Ft = 660;
+function dt({
   name: t,
   status: n = "online",
   connections: o = [],
@@ -1305,10 +1305,10 @@ function tt({
   _index: a,
   _totalSystems: s,
   _carouselRotation: l,
-  _viewState: f,
+  _viewState: h,
   _animPhase: c,
   _selectedSystem: p,
-  _selectedComponent: h,
+  _selectedComponent: f,
   _rotateY: y,
   _autoRotateComponents: u,
   _componentScale: g,
@@ -1317,24 +1317,24 @@ function tt({
   _onComponentClick: v,
   _containerWidth: $
 }) {
-  const b = ve(Je), k = ve(et), T = a ?? k.index, R = s ?? b?.totalSystems ?? 1, L = l ?? b?.carouselRotation ?? 0, z = f ?? b?.viewState ?? "compact", F = c ?? b?.animPhase ?? 0, j = p ?? b?.selectedSystem ?? null, M = h ?? b?.selectedComponent ?? null, ie = y ?? b?.rotateY ?? 20, ne = u ?? b?.autoRotateComponents ?? !0, W = g ?? b?.componentScale ?? 0.35, H = m ?? b?.drillZoom ?? 3.3, oe = x ?? b?.onSelectSystem, Se = v ?? b?.onComponentClick, $e = $ ?? b?.containerWidth ?? 950, Q = j === t, N = Q && (z === "expanded" || z === "expanding" && F >= 1), E = !N, ke = ($e - Yt) / 2, re = lt + ke, se = T / R * Math.PI * 2 + L, Be = 420, Te = 160, Re = re + Math.cos(se) * Be, de = 450 + Math.sin(se) * Te, St = Math.round(de), Fe = !Q && (z === "expanding" || z === "expanded"), $t = Fe ? 0 : 1, Pe = E ? 0.3 + (Math.sin(se) + 1) * 0.1 : 1, kt = E ? Pe : W, Le = z === "compact" || z === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", at = Q && M, He = at ? H : 1, Rt = M?.ex ?? 330, Pt = M?.ey ?? 300, { size: Ct = 90, color: Et = "#00e5ff", widthRatio: At = 3 } = i ?? {}, Tt = {
+  const b = we(Ge), k = we(Ke), D = a ?? k.index, P = s ?? b?.totalSystems ?? 1, E = l ?? b?.carouselRotation ?? 0, W = h ?? b?.viewState ?? "compact", X = c ?? b?.animPhase ?? 0, j = p ?? b?.selectedSystem ?? null, N = f ?? b?.selectedComponent ?? null, te = y ?? b?.rotateY ?? 20, ie = u ?? b?.autoRotateComponents ?? !0, z = g ?? b?.componentScale ?? 0.35, F = m ?? b?.drillZoom ?? 3.3, ne = x ?? b?.onSelectSystem, $e = v ?? b?.onComponentClick, ke = $ ?? b?.containerWidth ?? 950, V = j === t, M = V && (W === "expanded" || W === "expanding" && X >= 1), R = !M, Re = (ke - Ft) / 2, oe = it + Re, le = D / P * Math.PI * 2 + E, Ne = 420, Te = 160, Pe = oe + Math.cos(le) * Ne, se = 450 + Math.sin(le) * Te, mt = Math.round(se), Be = !V && (W === "expanding" || W === "expanded"), xt = Be ? 0 : 1, Ce = R ? 0.3 + (Math.sin(le) + 1) * 0.1 : 1, vt = R ? Ce : z, Ae = W === "compact" || W === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", tt = V && N, Fe = tt ? F : 1, wt = N?.ex ?? 330, St = N?.ey ?? 300, { size: $t = 90, color: kt = "#00e5ff", widthRatio: Rt = 3 } = i ?? {}, Pt = {
     name: t,
-    isSelected: Q,
-    isExpandedPos: N,
-    isCompact: E,
-    animPhase: F,
-    compactCx: Re,
-    compactCy: de,
-    groupScale: Pe,
-    effectiveScale: kt,
-    transitionValue: Le,
-    rotateY: ie,
-    autoRotateComponents: ne,
-    onComponentClick: Se,
-    selectedComponentName: M?.name ?? null,
-    expandedOffsetX: ke
+    isSelected: V,
+    isExpandedPos: M,
+    isCompact: R,
+    animPhase: X,
+    compactCx: Pe,
+    compactCy: se,
+    groupScale: Ce,
+    effectiveScale: vt,
+    transitionValue: Ae,
+    rotateY: te,
+    autoRotateComponents: ie,
+    onComponentClick: $e,
+    selectedComponentName: N?.name ?? null,
+    expandedOffsetX: Re
   };
-  return /* @__PURE__ */ e(le.Provider, { value: Tt, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(ae.Provider, { value: Pt, children: /* @__PURE__ */ d(
     "div",
     {
       style: {
@@ -1344,21 +1344,21 @@ function tt({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: $t,
-        transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Ut}`,
-        filter: E && Math.sin(se) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
-        zIndex: Q ? 500 : Fe ? 0 : St,
-        transformOrigin: `${re}px ${st}px`,
-        transform: at ? `translate(${-(Rt - lt) * He}px, ${-(Pt - st) * He}px) scale(${He})` : "none"
+        opacity: xt,
+        transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Bt}`,
+        filter: R && Math.sin(le) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
+        zIndex: V ? 500 : Be ? 0 : mt,
+        transformOrigin: `${oe}px ${nt}px`,
+        transform: tt ? `translate(${-(wt - it) * Fe}px, ${-(St - nt) * Fe}px) scale(${Fe})` : "none"
       },
       children: [
-        E && !Fe && /* @__PURE__ */ e(
+        R && !Be && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: Re,
-              top: de,
+              left: Pe,
+              top: se,
               width: 160,
               height: 180,
               transform: "translate(-50%, -80%)",
@@ -1366,19 +1366,19 @@ function tt({
               cursor: "pointer",
               zIndex: 101
             },
-            onClick: (X) => {
-              X.stopPropagation(), oe?.(t);
+            onClick: (Q) => {
+              Q.stopPropagation(), ne?.(t);
             }
           }
         ),
-        E && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
+        R && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: Re,
-              top: de - 200,
-              transform: `translate(-50%, -50%) scale(${Pe})`,
+              left: Pe,
+              top: se - 200,
+              transform: `translate(-50%, -50%) scale(${Ce})`,
               zIndex: 110,
               pointerEvents: "none",
               animation: "holo-led-blink 1.5s infinite",
@@ -1424,13 +1424,13 @@ function tt({
           {
             style: {
               position: "absolute",
-              left: N ? re : Re,
-              top: N ? 48 : de - 180,
-              transform: `translate(-50%, -50%) scale(${N ? 1.2 : Pe * 1.5})`,
+              left: M ? oe : Pe,
+              top: M ? 48 : se - 180,
+              transform: `translate(-50%, -50%) scale(${M ? 1.2 : Ce * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
-              transition: Le,
+              transition: Ae,
               fontSize: 36,
               fontWeight: 700,
               letterSpacing: "0.18em",
@@ -1450,25 +1450,25 @@ function tt({
             style: {
               position: "absolute",
               top: 0,
-              left: N ? ke : 0,
+              left: M ? Re : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
-              transition: Le
+              transition: Ae
             },
-            children: o.map((X, Lt) => /* @__PURE__ */ e(
-              Bt,
+            children: o.map((Q, Ct) => /* @__PURE__ */ e(
+              zt,
               {
-                x1: X.from[0],
-                y1: X.from[1],
-                x2: X.to[0],
-                y2: X.to[1],
-                show: Q && F >= (X.visibleAtPhase ?? 0),
-                color: X.color,
-                dur: X.duration
+                x1: Q.from[0],
+                y1: Q.from[1],
+                x2: Q.to[0],
+                y2: Q.to[1],
+                show: V && X >= (Q.visibleAtPhase ?? 0),
+                color: Q.color,
+                dur: Q.duration
               },
-              Lt
+              Ct
             ))
           }
         ),
@@ -1477,13 +1477,13 @@ function tt({
           {
             style: {
               position: "absolute",
-              left: N ? re : Re,
-              top: N ? 570 : de + 70,
-              transform: `translate(-50%, -50%) scaleX(${N ? 1 : 0.4}) scaleY(${N ? 1 : 0.6}) scale(${N ? 1 : Pe})`,
-              transition: Le,
+              left: M ? oe : Pe,
+              top: M ? 570 : se + 70,
+              transform: `translate(-50%, -50%) scaleX(${M ? 1 : 0.4}) scaleY(${M ? 1 : 0.6}) scale(${M ? 1 : Ce})`,
+              transition: Ae,
               zIndex: 1
             },
-            children: /* @__PURE__ */ e(Ht, { size: Ct, color: Et, widthRatio: At, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
+            children: /* @__PURE__ */ e(Nt, { size: $t, color: kt, widthRatio: Rt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
           }
         ),
         r
@@ -1491,173 +1491,7 @@ function tt({
     }
   ) });
 }
-function C({
-  ex: t,
-  ey: n,
-  compactOffset: o,
-  zIndex: i,
-  children: r,
-  color: a = "#00e5ff",
-  label: s,
-  subLabel: l,
-  delay: f = "0s",
-  componentInfo: c,
-  visibleAtPhase: p = 0,
-  fixedScale: h,
-  bare: y = !1
-}) {
-  const u = ve(le);
-  if (!u)
-    throw new Error("ServiceNode must be used inside a <Service> component.");
-  const {
-    isExpandedPos: g,
-    animPhase: m,
-    compactCx: x,
-    compactCy: v,
-    groupScale: $,
-    effectiveScale: b,
-    transitionValue: k,
-    onComponentClick: T,
-    selectedComponentName: R,
-    expandedOffsetX: L
-  } = u, F = p === 0 || u.isSelected && m >= p ? 1 : 0, j = x + o.x, M = v + o.y, ie = g ? t + L : j, ne = g ? n : M, W = h !== void 0 ? h : u.isCompact ? $ : b, H = !!c && !!R && c.name === R, oe = c?.status ? w[c.status]?.color ?? a : a, Se = c?.status === "offline" ? "#4a6a8a" : oe, $e = c && g && T ? () => T({
-    type: c.type,
-    name: c.name,
-    status: c.status,
-    ex: c.ex ?? t,
-    ey: c.ey ?? n,
-    context: c.context,
-    dialogMetrics: c.dialogMetrics,
-    subComponents: c.subComponents,
-    graphSeries: c.graphSeries
-  }) : void 0;
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        left: ie,
-        top: ne,
-        transform: `translate(-50%, -50%) scale(${W})`,
-        opacity: F,
-        zIndex: i,
-        transition: k || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-        pointerEvents: g && F >= 0.5 ? "auto" : "none"
-      },
-      children: y ? r : /* @__PURE__ */ e(
-        Vt,
-        {
-          statusColor: Se,
-          label: s,
-          subLabel: l,
-          delay: f,
-          showLabels: g,
-          isCompact: u.isCompact,
-          onClick: $e,
-          isSelected: H,
-          children: r
-        }
-      )
-    }
-  );
-}
-function Vt({
-  children: t,
-  statusColor: n,
-  label: o,
-  subLabel: i,
-  delay: r = "0s",
-  showLabels: a = !0,
-  isCompact: s = !1,
-  onClick: l,
-  isSelected: f = !1
-}) {
-  const [c, p] = I(!1), h = f ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: `float-node${l ? " float-node--interactive" : ""}`,
-      onClick: (y) => {
-        l && (y.stopPropagation(), l());
-      },
-      style: {
-        cursor: l ? "pointer" : void 0,
-        transition: "filter 0.3s ease",
-        filter: h
-      },
-      onMouseEnter: () => p(!0),
-      onMouseLeave: () => p(!1),
-      role: l ? "button" : void 0,
-      title: l ? "Click to inspect internal components" : void 0,
-      children: [
-        /* @__PURE__ */ d("div", { className: "float-body", style: { animationDelay: r }, children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: "scan-line",
-              style: {
-                background: `linear-gradient(90deg, transparent 5%, ${n}cc 40%, #fff 50%, ${n}cc 60%, transparent 95%)`,
-                boxShadow: `0 0 8px ${n}`
-              }
-            }
-          ),
-          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && ee.isValidElement(t) ? ee.cloneElement(t, {
-            _compact: !0
-          }) : t })
-        ] }),
-        /* @__PURE__ */ d(
-          "div",
-          {
-            style: {
-              opacity: a ? 1 : 0,
-              transition: "opacity 0.5s ease"
-            },
-            children: [
-              o && /* @__PURE__ */ e("div", { className: "node-tag", style: { color: n + "cc" }, children: o }),
-              i && /* @__PURE__ */ e("div", { className: "node-subtag", style: { color: n + "77" }, children: i })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function ut({ synced: t, latencyMs: n }) {
-  const o = t ? "#00ff88" : "#ff8c00";
-  return /* @__PURE__ */ d("div", { className: "sync-bridge", children: [
-    /* @__PURE__ */ d("div", { className: "sync-arrows", children: [
-      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "◄" }),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: "sync-line",
-          style: {
-            background: `linear-gradient(90deg, ${o}44, ${o}, ${o}44)`,
-            boxShadow: `0 0 8px ${o}55`
-          }
-        }
-      ),
-      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "►" })
-    ] }),
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: "sync-status",
-        style: {
-          color: o,
-          animation: t ? "none" : "holo-led-blink 1s linear infinite"
-        },
-        children: t ? "SYNCED" : "LAG"
-      }
-    ),
-    /* @__PURE__ */ d("div", { className: "sync-latency", style: { color: o + "88" }, children: [
-      n,
-      "ms ",
-      t ? "replication" : "behind"
-    ] })
-  ] });
-}
-function O({
+function I({
   ex: t,
   ey: n,
   status: o,
@@ -1666,23 +1500,23 @@ function O({
   offsetX: a,
   offsetY: s,
   isVisible: l,
-  align: f = "right",
+  align: h = "right",
   internalRef: c
 }) {
-  const p = ve(le), h = p?.expandedOffsetX ?? 0;
+  const p = we(ae), f = p?.expandedOffsetX ?? 0;
   if (o === "online") return null;
-  const y = l && !!p?.isExpandedPos, u = w[o]?.color ?? w.warning.color, g = Math.abs(a) > Math.abs(s), m = t + h + (g ? Math.sign(a) * 45 : 0), x = n + (g ? 0 : Math.sign(s) * 40), v = t + h + a, $ = n + s;
+  const y = l && !!p?.isExpandedPos, u = w[o]?.color ?? w.warning.color, g = Math.abs(a) > Math.abs(s), m = t + f + (g ? Math.sign(a) * 45 : 0), x = n + (g ? 0 : Math.sign(s) * 40), v = t + f + a, $ = n + s;
   let b = "";
   if (g) {
-    const L = m + (v - m) / 2;
-    b = `M ${m} ${x} L ${L} ${x} L ${L} ${$} L ${v} ${$}`;
+    const E = m + (v - m) / 2;
+    b = `M ${m} ${x} L ${E} ${x} L ${E} ${$} L ${v} ${$}`;
   } else {
-    const L = x + ($ - x) / 2;
-    b = `M ${m} ${x} L ${m} ${L} L ${v} ${L} L ${v} ${$}`;
+    const E = x + ($ - x) / 2;
+    b = `M ${m} ${x} L ${m} ${E} L ${v} ${E} L ${v} ${$}`;
   }
   let k = "translate(0, -50%)";
-  f === "left" && (k = "translate(-100%, -50%)"), f === "top" && (k = "translate(-50%, -100%)"), f === "bottom" && (k = "translate(-50%, 0)");
-  const T = f === "left" ? -8 : f === "right" ? 8 : 0, R = f === "top" ? -8 : f === "bottom" ? 8 : 0;
+  h === "left" && (k = "translate(-100%, -50%)"), h === "top" && (k = "translate(-50%, -100%)"), h === "bottom" && (k = "translate(-50%, 0)");
+  const D = h === "left" ? -8 : h === "right" ? 8 : 0, P = h === "top" ? -8 : h === "bottom" ? 8 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1731,8 +1565,8 @@ function O({
               left: v,
               top: $,
               transform: k,
-              marginLeft: T,
-              marginTop: R,
+              marginLeft: D,
+              marginTop: P,
               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 ${u}55`,
               borderLeft: `2px solid ${u}`,
@@ -1804,8 +1638,192 @@ function O({
     }
   );
 }
-const q = 140, U = 240, Z = 160, ce = Ze(q, U, Z);
-function _t({
+function A({
+  ex: t,
+  ey: n,
+  compactOffset: o,
+  zIndex: i,
+  children: r,
+  color: a = "#00e5ff",
+  label: s,
+  subLabel: l,
+  delay: h = "0s",
+  componentInfo: c,
+  visibleAtPhase: p = 0,
+  fixedScale: f,
+  bare: y = !1,
+  alert: u
+}) {
+  const g = we(ae);
+  if (!g)
+    throw new Error("ServiceNode must be used inside a <Service> component.");
+  const {
+    isExpandedPos: m,
+    animPhase: x,
+    compactCx: v,
+    compactCy: $,
+    groupScale: b,
+    effectiveScale: k,
+    transitionValue: D,
+    onComponentClick: P,
+    selectedComponentName: E,
+    expandedOffsetX: W
+  } = g, j = p === 0 || g.isSelected && x >= p ? 1 : 0, N = v + o.x, te = $ + o.y, ie = m ? t + W : N, z = m ? n : te, F = f !== void 0 ? f : g.isCompact ? b : k, ne = !!c && !!E && c.name === E, $e = c?.status ? w[c.status]?.color ?? a : a, ke = c?.status === "offline" ? "#4a6a8a" : $e, V = c && m && P ? () => P({
+    type: c.type,
+    name: c.name,
+    status: c.status,
+    ex: c.ex ?? t,
+    ey: c.ey ?? n,
+    context: c.context,
+    dialogMetrics: c.dialogMetrics,
+    subComponents: c.subComponents,
+    graphSeries: c.graphSeries
+  }) : void 0, M = c?.status ?? "online", R = c?.name ?? s ?? "";
+  return /* @__PURE__ */ d(ve, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: ie,
+          top: z,
+          transform: `translate(-50%, -50%) scale(${F})`,
+          opacity: j,
+          zIndex: i,
+          transition: D || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          pointerEvents: m && j >= 0.5 ? "auto" : "none"
+        },
+        children: y ? r : /* @__PURE__ */ e(
+          Ht,
+          {
+            statusColor: ke,
+            label: s,
+            subLabel: l,
+            delay: h,
+            showLabels: m,
+            isCompact: g.isCompact,
+            onClick: V,
+            isSelected: ne,
+            children: r
+          }
+        )
+      }
+    ),
+    u && /* @__PURE__ */ e(
+      I,
+      {
+        ex: t,
+        ey: n,
+        status: M,
+        title: R,
+        msg: u.msg,
+        offsetX: u.offsetX ?? 110,
+        offsetY: u.offsetY ?? -30,
+        align: u.align ?? "right",
+        internalRef: u.internalRef,
+        isVisible: !0
+      }
+    )
+  ] });
+}
+function Ht({
+  children: t,
+  statusColor: n,
+  label: o,
+  subLabel: i,
+  delay: r = "0s",
+  showLabels: a = !0,
+  isCompact: s = !1,
+  onClick: l,
+  isSelected: h = !1
+}) {
+  const [c, p] = L(!1), f = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: `float-node${l ? " float-node--interactive" : ""}`,
+      onClick: (y) => {
+        l && (y.stopPropagation(), l());
+      },
+      style: {
+        cursor: l ? "pointer" : void 0,
+        transition: "filter 0.3s ease",
+        filter: f
+      },
+      onMouseEnter: () => p(!0),
+      onMouseLeave: () => p(!1),
+      role: l ? "button" : void 0,
+      title: l ? "Click to inspect internal components" : void 0,
+      children: [
+        /* @__PURE__ */ d("div", { className: "float-body", style: { animationDelay: r }, children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "scan-line",
+              style: {
+                background: `linear-gradient(90deg, transparent 5%, ${n}cc 40%, #fff 50%, ${n}cc 60%, transparent 95%)`,
+                boxShadow: `0 0 8px ${n}`
+              }
+            }
+          ),
+          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && J.isValidElement(t) ? J.cloneElement(t, {
+            _compact: !0
+          }) : t })
+        ] }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            style: {
+              opacity: a ? 1 : 0,
+              transition: "opacity 0.5s ease"
+            },
+            children: [
+              o && /* @__PURE__ */ e("div", { className: "node-tag", style: { color: n + "cc" }, children: o }),
+              i && /* @__PURE__ */ e("div", { className: "node-subtag", style: { color: n + "77" }, children: i })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ct({ synced: t, latencyMs: n }) {
+  const o = t ? "#00ff88" : "#ff8c00";
+  return /* @__PURE__ */ d("div", { className: "sync-bridge", children: [
+    /* @__PURE__ */ d("div", { className: "sync-arrows", children: [
+      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "◄" }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "sync-line",
+          style: {
+            background: `linear-gradient(90deg, ${o}44, ${o}, ${o}44)`,
+            boxShadow: `0 0 8px ${o}55`
+          }
+        }
+      ),
+      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "►" })
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "sync-status",
+        style: {
+          color: o,
+          animation: t ? "none" : "holo-led-blink 1s linear infinite"
+        },
+        children: t ? "SYNCED" : "LAG"
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "sync-latency", style: { color: o + "88" }, children: [
+      n,
+      "ms ",
+      t ? "replication" : "behind"
+    ] })
+  ] });
+}
+const q = 140, H = 240, Z = 160, de = qe(q, H, Z);
+function Ut({
   cfg: t,
   name: n,
   cpuLoad: o,
@@ -1814,7 +1832,7 @@ function _t({
   compact: a,
   brandLabel: s
 }) {
-  const l = Math.ceil(o / 100 * 3), f = r === "offline" ? "#4a6a8a" : t.color, c = [
+  const l = Math.ceil(o / 100 * 3), h = r === "offline" ? "#4a6a8a" : t.color, c = [
     { color: t.color, on: r !== "offline", label: "PWR" },
     { color: t.color, on: r === "online" || r === "warning", label: "NET" },
     { color: t.color, on: o > 15, label: "DSK" },
@@ -1825,8 +1843,8 @@ function _t({
     {
       style: {
         width: q,
-        height: U,
-        background: a ? we : Ke,
+        height: H,
+        background: a ? Se : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -1900,14 +1918,14 @@ function _t({
                   {
                     style: {
                       fontSize: 7,
-                      color: f,
+                      color: h,
                       letterSpacing: "0.08em",
-                      textShadow: `0 0 4px ${f}66`
+                      textShadow: `0 0 4px ${h}66`
                     },
                     children: n
                   }
                 ),
-                /* @__PURE__ */ e("div", { style: { display: "flex", gap: 5 }, children: c.map((p, h) => /* @__PURE__ */ e(
+                /* @__PURE__ */ e("div", { style: { display: "flex", gap: 5 }, children: c.map((p, f) => /* @__PURE__ */ e(
                   "div",
                   {
                     style: {
@@ -1916,10 +1934,10 @@ function _t({
                       borderRadius: "50%",
                       background: p.on ? p.color : "#0a1830",
                       boxShadow: p.on ? `0 0 6px ${p.color}, 0 0 12px ${p.color}88` : "none",
-                      animation: p.on && h === 1 ? "holo-led-blink 2.5s linear infinite" : "none"
+                      animation: p.on && f === 1 ? "holo-led-blink 2.5s linear infinite" : "none"
                     }
                   },
-                  h
+                  f
                 )) })
               ] })
             ]
@@ -1986,8 +2004,8 @@ function _t({
             }
           }
         ),
-        Array.from({ length: 3 }, (p, h) => {
-          const y = h < l;
+        Array.from({ length: 3 }, (p, f) => {
+          const y = f < l;
           return /* @__PURE__ */ d(
             "div",
             {
@@ -1995,7 +2013,7 @@ function _t({
                 position: "absolute",
                 left: 8,
                 right: 8,
-                top: 75 + h * 31,
+                top: 75 + f * 31,
                 height: 27,
                 background: "linear-gradient(90deg, #040a16, #030710, #040a16)",
                 border: "1px solid #1a2d40",
@@ -2039,7 +2057,7 @@ function _t({
                           top: 0,
                           left: 0,
                           bottom: 0,
-                          width: `${30 + o / 100 * 45 + h * 8}%`,
+                          width: `${30 + o / 100 * 45 + f * 8}%`,
                           background: `linear-gradient(90deg, ${t.color}22, transparent)`
                         }
                       }
@@ -2062,7 +2080,7 @@ function _t({
                 )
               ]
             },
-            h
+            f
           );
         }),
         /* @__PURE__ */ e(
@@ -2132,7 +2150,7 @@ function _t({
               /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [
                 { val: o, color: t.color },
                 { val: i, color: t.color + "bb" }
-              ].map((p, h) => /* @__PURE__ */ e(
+              ].map((p, f) => /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
@@ -2153,7 +2171,7 @@ function _t({
                     }
                   )
                 },
-                h
+                f
               )) })
             ]
           }
@@ -2186,7 +2204,7 @@ function _t({
               overflow: "hidden",
               opacity: 0.22
             },
-            children: Array.from({ length: 100 }).map((p, h) => /* @__PURE__ */ e(
+            children: Array.from({ length: 100 }).map((p, f) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -2196,7 +2214,7 @@ function _t({
                   background: "#2a6090"
                 }
               },
-              h
+              f
             ))
           }
         ),
@@ -2217,13 +2235,13 @@ function _t({
     }
   );
 }
-function Xt() {
+function Yt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: q,
-        height: U,
+        height: H,
         background: "linear-gradient(180deg, #040c1a 0%, #030810 100%)",
         position: "relative",
         overflow: "hidden",
@@ -2331,7 +2349,7 @@ function Xt() {
     }
   );
 }
-function dt({
+function ot({
   side: t,
   color: n,
   brandLabel: o
@@ -2342,7 +2360,7 @@ function dt({
     {
       style: {
         width: Z,
-        height: U,
+        height: H,
         background: i ? "linear-gradient(90deg, #040c1c 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #040c1c 100%)",
         position: "relative",
         overflow: "hidden"
@@ -2361,7 +2379,7 @@ function dt({
             }
           }
         ),
-        [8, U - 20].map((r) => /* @__PURE__ */ e(
+        [8, H - 20].map((r) => /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -2383,8 +2401,8 @@ function dt({
           {
             style: {
               position: "absolute",
-              top: U * 0.35,
-              bottom: U * 0.15,
+              top: H * 0.35,
+              bottom: H * 0.15,
               left: i ? 22 : 18,
               right: i ? 18 : 22,
               display: "flex",
@@ -2412,7 +2430,7 @@ function dt({
           {
             style: {
               position: "absolute",
-              top: U * 0.18,
+              top: H * 0.18,
               left: i ? 12 : Z - 78,
               fontSize: 7,
               color: "#1a3050",
@@ -2431,7 +2449,7 @@ function dt({
     }
   );
 }
-function jt({ cpuLoad: t }) {
+function Vt({ 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((Z - 18) / 7);
   return /* @__PURE__ */ d(
     "div",
@@ -2511,7 +2529,7 @@ function jt({ cpuLoad: t }) {
     }
   );
 }
-function J({
+function ue({
   rotateX: t = -22,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -2520,12 +2538,12 @@ function J({
   status: a = "online",
   name: s = "SRV-001",
   cpuLoad: l = 67,
-  memLoad: f = 82,
+  memLoad: h = 82,
   brandLabel: c = "BUSAUD",
   _compact: p
 }) {
-  const [h, y] = I(n), u = te(0), g = te(0);
-  Ae(() => {
+  const [f, y] = L(n), u = ee(0), g = ee(0);
+  Ee(() => {
     if (!r) {
       y(n);
       return;
@@ -2543,7 +2561,7 @@ function J({
     {
       style: {
         width: q * i,
-        height: U * i,
+        height: H * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2596,7 +2614,7 @@ function J({
             style: {
               position: "absolute",
               width: q * 1.4 * i,
-              height: U * 0.8 * i,
+              height: H * 0.8 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(45 * i)}px)`,
               pointerEvents: "none",
@@ -2620,30 +2638,30 @@ function J({
               {
                 style: {
                   width: q,
-                  height: U,
+                  height: H,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${h}deg) rotateZ(${o}deg)`,
+                  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: ce.front, children: /* @__PURE__ */ e(
-                    _t,
+                  /* @__PURE__ */ e("div", { style: de.front, children: /* @__PURE__ */ e(
+                    Ut,
                     {
                       cfg: m,
                       name: s,
                       cpuLoad: l,
-                      memLoad: f,
+                      memLoad: h,
                       status: a,
                       compact: p,
                       brandLabel: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: ce.back, children: /* @__PURE__ */ e(Xt, {}) }),
-                  /* @__PURE__ */ e("div", { style: ce.left, children: /* @__PURE__ */ e(dt, { side: "left", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: ce.right, children: /* @__PURE__ */ e(dt, { side: "right", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: ce.top, children: /* @__PURE__ */ e(jt, { cpuLoad: l }) }),
-                  /* @__PURE__ */ e("div", { style: ce.bottom, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: de.back, children: /* @__PURE__ */ e(Yt, {}) }),
+                  /* @__PURE__ */ e("div", { style: de.left, children: /* @__PURE__ */ e(ot, { side: "left", color: m.color, brandLabel: c }) }),
+                  /* @__PURE__ */ e("div", { style: de.right, children: /* @__PURE__ */ e(ot, { side: "right", color: m.color, brandLabel: c }) }),
+                  /* @__PURE__ */ e("div", { style: de.top, children: /* @__PURE__ */ e(Vt, { cpuLoad: l }) }),
+                  /* @__PURE__ */ e("div", { style: de.bottom, children: /* @__PURE__ */ e(
                     "div",
                     {
                       style: {
@@ -2662,11 +2680,11 @@ function J({
     }
   );
 }
-const qe = 12, ae = 55, _ = ae * 2, ue = 52, it = 10, Ue = 3 * ue + 2 * it, pe = 2 * Math.PI * ae / qe, Ye = Array.from({ length: qe }, (t, n) => n / qe * 360);
-function Ve(t) {
+const Xe = 12, re = 55, _ = re * 2, he = 52, Ze = 10, He = 3 * he + 2 * Ze, ce = 2 * Math.PI * re / Xe, Ue = Array.from({ length: Xe }, (t, n) => n / Xe * 360);
+function Ye(t) {
   return Math.cos(t * Math.PI / 180) * 0.42 + 0.58;
 }
-function Qt({
+function _t({
   diskY: t,
   diskIdx: n,
   cfg: o,
@@ -2674,25 +2692,25 @@ function Qt({
   capacity: r,
   compact: a
 }) {
-  return /* @__PURE__ */ d(Ce, { children: [
-    Ye.map((s, l) => {
-      const f = Ve(s), c = l === 0, p = Math.round(4 + f * 9), h = Math.round(12 + f * 22), y = Math.round(28 + f * 44), u = Math.round(f * 0.55 * 255).toString(16).padStart(2, "0");
+  return /* @__PURE__ */ d(ve, { children: [
+    Ue.map((s, l) => {
+      const h = Ye(s), c = l === 0, p = Math.round(4 + h * 9), f = Math.round(12 + h * 22), y = Math.round(28 + h * 44), u = Math.round(h * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: pe,
-            height: ue,
-            left: (_ - pe) / 2,
+            width: ce,
+            height: he,
+            left: (_ - ce) / 2,
             top: t,
-            transform: `rotateY(${s}deg) translateZ(${ae}px)`,
+            transform: `rotateY(${s}deg) translateZ(${re}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},${h},${y})`,
+            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},${y})`,
             borderLeft: `1px solid ${o.color}${u}`,
             boxShadow: c ? `inset 0 0 18px ${o.color}28` : "none"
           },
-          children: c && /* @__PURE__ */ d(Ce, { children: [
+          children: c && /* @__PURE__ */ d(ve, { children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -2748,7 +2766,7 @@ function Qt({
           width: _ + 4,
           height: _ + 4,
           left: -2,
-          top: t - ae,
+          top: t - re,
           borderRadius: "50%",
           transform: "rotateX(90deg)",
           backfaceVisibility: "hidden",
@@ -2809,7 +2827,7 @@ function Qt({
           width: _ + 4,
           height: _ + 4,
           left: -2,
-          top: t + ue - ae,
+          top: t + he - re,
           borderRadius: "50%",
           transform: "rotateX(-90deg)",
           backfaceVisibility: "hidden",
@@ -2833,41 +2851,41 @@ function Qt({
         )
       }
     ),
-    i && Ye.map((s, l) => {
-      const f = Ve(s);
+    i && Ue.map((s, l) => {
+      const h = Ye(s);
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: pe + 1.5,
+            width: ce + 1.5,
             height: 6,
-            left: (_ - pe - 1.5) / 2,
-            top: t + ue - 3,
-            transform: `rotateY(${s}deg) translateZ(${ae + 1.5}px)`,
+            left: (_ - ce - 1.5) / 2,
+            top: t + he - 3,
+            transform: `rotateY(${s}deg) translateZ(${re + 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}`,
-            opacity: f * 0.9
+            opacity: h * 0.9
           }
         },
         `rng${n}${l}`
       );
     }),
-    i && Ye.map((s, l) => {
-      const f = Ve(s), c = Math.round(2 + f * 4), p = Math.round(5 + f * 10), h = Math.round(12 + f * 20);
+    i && Ue.map((s, l) => {
+      const h = Ye(s), c = Math.round(2 + h * 4), p = Math.round(5 + h * 10), f = Math.round(12 + h * 20);
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: pe,
-            height: it,
-            left: (_ - pe) / 2,
-            top: t + ue,
-            transform: `rotateY(${s}deg) translateZ(${ae}px)`,
+            width: ce,
+            height: Ze,
+            left: (_ - ce) / 2,
+            top: t + he,
+            transform: `rotateY(${s}deg) translateZ(${re}px)`,
             backfaceVisibility: "hidden",
-            background: `rgb(${c},${p},${h})`
+            background: `rgb(${c},${p},${f})`
           }
         },
         `gap${n}${l}`
@@ -2875,7 +2893,7 @@ function Qt({
     })
   ] });
 }
-function Ee({
+function Oe({
   rotateX: t = -22,
   rotateY: n = -15,
   rotateZ: o = 0,
@@ -2887,17 +2905,17 @@ function Ee({
   // connections = 284,
   _compact: l
 }) {
-  const [f, c] = I(n), p = te(0), h = te(0);
-  Ae(() => {
+  const [h, c] = L(n), p = ee(0), f = ee(0);
+  Ee(() => {
     if (!r) {
       c(n);
       return;
     }
     const u = (g) => {
-      h.current && c((m) => m + (g - h.current) * 0.027), h.current = g, p.current = requestAnimationFrame(u);
+      f.current && c((m) => m + (g - f.current) * 0.027), f.current = g, p.current = requestAnimationFrame(u);
     };
     return p.current = requestAnimationFrame(u), () => {
-      cancelAnimationFrame(p.current), h.current = 0;
+      cancelAnimationFrame(p.current), f.current = 0;
     };
   }, [r, n]);
   const y = w[a] ?? w.online;
@@ -2906,7 +2924,7 @@ function Ee({
     {
       style: {
         width: _ * i,
-        height: Ue * i,
+        height: He * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2967,7 +2985,7 @@ function Ee({
             style: {
               position: "absolute",
               width: _ * 2.8 * i,
-              height: Ue * 0.85 * i,
+              height: He * 0.85 * i,
               background: `radial-gradient(ellipse, ${y.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * i)}px)`,
               pointerEvents: "none",
@@ -2991,16 +3009,16 @@ function Ee({
               {
                 style: {
                   width: _,
-                  height: Ue,
+                  height: He,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
+                  transform: `rotateX(${t}deg) rotateY(${h}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [0, 1, 2].map((u) => /* @__PURE__ */ e(
-                  Qt,
+                  _t,
                   {
-                    diskY: u * (ue + it),
+                    diskY: u * (he + Ze),
                     diskIdx: u,
                     cfg: y,
                     hasRingBelow: u < 2,
@@ -3017,8 +3035,8 @@ function Ee({
     }
   );
 }
-const G = 190, Y = 72, be = 120, fe = Ze(G, Y, be);
-function qt({
+const G = 190, U = 72, be = 120, pe = qe(G, U, be);
+function Xt({
   cfg: t,
   name: n,
   traffic: o,
@@ -3031,8 +3049,8 @@ function qt({
     {
       style: {
         width: G,
-        height: Y,
-        background: r ? we : Ke,
+        height: U,
+        background: r ? Se : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3117,8 +3135,8 @@ function qt({
               gap: 10
             },
             children: [
-              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 8 }, (l, f) => {
-                const c = f < a, p = s[f];
+              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 8 }, (l, h) => {
+                const c = h < a, p = s[h];
                 return /* @__PURE__ */ d(
                   "div",
                   {
@@ -3170,13 +3188,13 @@ function qt({
                             background: c ? t.color : "#0a1830",
                             boxShadow: c ? `0 0 5px ${t.color}` : "none",
                             animation: c ? "holo-led-blink 1.8s linear infinite" : "none",
-                            animationDelay: `${f * 0.2}s`
+                            animationDelay: `${h * 0.2}s`
                           }
                         }
                       )
                     ]
                   },
-                  f
+                  h
                 );
               }) }),
               /* @__PURE__ */ e(
@@ -3280,13 +3298,13 @@ function qt({
     }
   );
 }
-function Gt() {
+function jt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: G,
-        height: Y,
+        height: U,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3301,7 +3319,7 @@ function Gt() {
           {
             style: {
               width: 40,
-              height: Y - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3357,7 +3375,7 @@ function Gt() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: Y - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3368,13 +3386,13 @@ function Gt() {
     }
   );
 }
-function ct({ side: t, color: n }) {
+function rt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: be,
-        height: Y,
+        height: U,
         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"
@@ -3398,8 +3416,8 @@ function ct({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: Y * 0.25,
-              bottom: Y * 0.25,
+              top: U * 0.25,
+              bottom: U * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -3425,7 +3443,7 @@ function ct({ side: t, color: n }) {
     }
   );
 }
-function Kt({ traffic: t }) {
+function Qt({ traffic: t }) {
   const n = Math.floor((be - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
@@ -3484,7 +3502,7 @@ function Kt({ traffic: t }) {
     }
   );
 }
-function nt({
+function pt({
   rotateX: t = -20,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -3493,17 +3511,17 @@ function nt({
   status: a = "online",
   name: s = "WEB-DISP-01",
   traffic: l = 78,
-  activeRoutes: f = 12,
+  activeRoutes: h = 12,
   _compact: c
 }) {
-  const [p, h] = I(n), y = te(0), u = te(0);
-  Ae(() => {
+  const [p, f] = L(n), y = ee(0), u = ee(0);
+  Ee(() => {
     if (!r) {
-      h(n);
+      f(n);
       return;
     }
     const m = (x) => {
-      u.current && h((v) => v + (x - u.current) * 0.027), u.current = x, y.current = requestAnimationFrame(m);
+      u.current && f((v) => v + (x - u.current) * 0.027), u.current = x, y.current = requestAnimationFrame(m);
     };
     return y.current = requestAnimationFrame(m), () => {
       cancelAnimationFrame(y.current), u.current = 0;
@@ -3515,7 +3533,7 @@ function nt({
     {
       style: {
         width: G * i,
-        height: Y * i,
+        height: U * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3576,7 +3594,7 @@ function nt({
             style: {
               position: "absolute",
               width: G * 1.3 * i,
-              height: Y * 2 * i,
+              height: U * 2 * i,
               background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
@@ -3600,28 +3618,28 @@ function nt({
               {
                 style: {
                   width: G,
-                  height: Y,
+                  height: U,
                   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: fe.front, children: /* @__PURE__ */ e(
-                    qt,
+                  /* @__PURE__ */ e("div", { style: pe.front, children: /* @__PURE__ */ e(
+                    Xt,
                     {
                       cfg: g,
                       name: s,
                       traffic: l,
-                      activeRoutes: f,
+                      activeRoutes: h,
                       compact: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: fe.back, children: /* @__PURE__ */ e(Gt, {}) }),
-                  /* @__PURE__ */ e("div", { style: fe.left, children: /* @__PURE__ */ e(ct, { side: "left", color: g.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.right, children: /* @__PURE__ */ e(ct, { side: "right", color: g.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.top, children: /* @__PURE__ */ e(Kt, { traffic: l }) }),
-                  /* @__PURE__ */ e("div", { style: fe.bottom, children: /* @__PURE__ */ e("div", { style: { width: G, height: be, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: pe.back, children: /* @__PURE__ */ e(jt, {}) }),
+                  /* @__PURE__ */ e("div", { style: pe.left, children: /* @__PURE__ */ e(rt, { side: "left", color: g.color }) }),
+                  /* @__PURE__ */ e("div", { style: pe.right, children: /* @__PURE__ */ e(rt, { side: "right", color: g.color }) }),
+                  /* @__PURE__ */ e("div", { style: pe.top, children: /* @__PURE__ */ e(Qt, { traffic: l }) }),
+                  /* @__PURE__ */ e("div", { style: pe.bottom, children: /* @__PURE__ */ e("div", { style: { width: G, height: be, background: "#020508" } }) })
                 ]
               }
             )
@@ -3631,13 +3649,13 @@ function nt({
     }
   );
 }
-const K = 190, V = 72, ge = 120, he = Ze(K, V, ge), pt = {
+const K = 190, Y = 72, ge = 120, fe = qe(K, Y, ge), at = {
   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)" },
   offline: { color: "#1e3a5a", glow: "rgba(30,58,90,0.25)" }
 };
-function Zt({
+function qt({
   cfg: t,
   name: n,
   queueDepth: o,
@@ -3651,8 +3669,8 @@ function Zt({
     {
       style: {
         width: K,
-        height: V,
-        background: a ? we : Ke,
+        height: Y,
+        background: a ? Se : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3737,7 +3755,7 @@ function Zt({
               gap: 10
             },
             children: [
-              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 5 }, (f, c) => {
+              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 5 }, (h, c) => {
                 const p = c < r;
                 return /* @__PURE__ */ d(
                   "div",
@@ -3869,14 +3887,14 @@ function Zt({
               { label: "INST", val: r, unit: "conn" },
               { label: "ENQUEUE", val: Math.round(o * 2.4), unit: "msgs" },
               { label: "DISP", val: Math.round(i * 0.1), unit: "/s" }
-            ].map((f) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
-              /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: f.label }),
+            ].map((h) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
+              /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: h.label }),
               /* @__PURE__ */ d("span", { style: { fontSize: 6, color: s + "88" }, children: [
-                f.val,
+                h.val,
                 " ",
-                f.unit
+                h.unit
               ] })
-            ] }, f.label))
+            ] }, h.label))
           }
         ),
         /* @__PURE__ */ e(
@@ -3896,13 +3914,13 @@ function Zt({
     }
   );
 }
-function Jt() {
+function Gt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: K,
-        height: V,
+        height: Y,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3917,7 +3935,7 @@ function Jt() {
           {
             style: {
               width: 40,
-              height: V - 16,
+              height: Y - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3973,7 +3991,7 @@ function Jt() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: V - 16,
+              height: Y - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3984,13 +4002,13 @@ function Jt() {
     }
   );
 }
-function ft({ side: t, color: n }) {
+function lt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: ge,
-        height: V,
+        height: Y,
         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"
@@ -4014,8 +4032,8 @@ function ft({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: V * 0.25,
-              bottom: V * 0.25,
+              top: Y * 0.25,
+              bottom: Y * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -4041,7 +4059,7 @@ function ft({ side: t, color: n }) {
     }
   );
 }
-function ei({ queueDepth: t, color: n }) {
+function Kt({ queueDepth: t, color: n }) {
   const o = Math.floor((ge - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
@@ -4100,7 +4118,7 @@ function ei({ queueDepth: t, color: n }) {
     }
   );
 }
-function bt({
+function Zt({
   rotateX: t = -20,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -4109,12 +4127,12 @@ function bt({
   status: a = "online",
   name: s = "MSG-SRV-01",
   queueDepth: l = 45,
-  msgsPerSec: f = 230,
+  msgsPerSec: h = 230,
   instances: c = 3,
   _compact: p
 }) {
-  const [h, y] = I(n), u = te(0), g = te(0);
-  Ae(() => {
+  const [f, y] = L(n), u = ee(0), g = ee(0);
+  Ee(() => {
     if (!r) {
       y(n);
       return;
@@ -4126,13 +4144,13 @@ function bt({
       cancelAnimationFrame(u.current), g.current = 0;
     };
   }, [r, n]);
-  const m = pt[a] ?? pt.online;
+  const m = at[a] ?? at.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: K * i,
-        height: V * i,
+        height: Y * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -4193,7 +4211,7 @@ function bt({
             style: {
               position: "absolute",
               width: K * 1.3 * i,
-              height: V * 2 * i,
+              height: Y * 2 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
@@ -4217,29 +4235,29 @@ function bt({
               {
                 style: {
                   width: K,
-                  height: V,
+                  height: Y,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${h}deg) rotateZ(${o}deg)`,
+                  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: he.front, children: /* @__PURE__ */ e(
-                    Zt,
+                  /* @__PURE__ */ e("div", { style: fe.front, children: /* @__PURE__ */ e(
+                    qt,
                     {
                       cfg: m,
                       name: s,
                       queueDepth: l,
-                      msgsPerSec: f,
+                      msgsPerSec: h,
                       instances: c,
                       compact: p
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: he.back, children: /* @__PURE__ */ e(Jt, {}) }),
-                  /* @__PURE__ */ e("div", { style: he.left, children: /* @__PURE__ */ e(ft, { side: "left", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: he.right, children: /* @__PURE__ */ e(ft, { side: "right", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: he.top, children: /* @__PURE__ */ e(ei, { queueDepth: l, color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: he.bottom, children: /* @__PURE__ */ e("div", { style: { width: K, height: ge, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: fe.back, children: /* @__PURE__ */ e(Gt, {}) }),
+                  /* @__PURE__ */ e("div", { style: fe.left, children: /* @__PURE__ */ e(lt, { side: "left", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: fe.right, children: /* @__PURE__ */ e(lt, { side: "right", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: fe.top, children: /* @__PURE__ */ e(Kt, { queueDepth: l, color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: fe.bottom, children: /* @__PURE__ */ e("div", { style: { width: K, height: ge, background: "#020508" } }) })
                 ]
               }
             )
@@ -4249,7 +4267,7 @@ function bt({
     }
   );
 }
-function gt({ status: t = "online", scale: n = 1 }) {
+function ft({ status: t = "online", scale: n = 1 }) {
   const i = (w[t] ?? w.online).color;
   return /* @__PURE__ */ e(
     "div",
@@ -4361,15 +4379,15 @@ function gt({ status: t = "online", scale: n = 1 }) {
     }
   );
 }
-function P(t, n, o = 24) {
+function C(t, n, o = 24) {
   return Array.from({ length: o }, (i, r) => {
     const a = r / o;
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
   });
 }
-function ti({ data: t, color: n, height: o = 28 }) {
-  const r = o, a = Math.max(...t, 1), s = t.map((l, f) => {
-    const c = f / (t.length - 1) * 120, p = r - l / a * (r - 4) - 2;
+function Jt({ data: t, color: n, height: o = 28 }) {
+  const r = o, a = Math.max(...t, 1), s = t.map((l, h) => {
+    const c = h / (t.length - 1) * 120, p = r - l / a * (r - 4) - 2;
     return `${c},${p}`;
   }).join(" ");
   return /* @__PURE__ */ e("svg", { width: 120, height: r, style: { display: "block", overflow: "visible" }, children: /* @__PURE__ */ e(
@@ -4385,7 +4403,7 @@ function ti({ data: t, color: n, height: o = 28 }) {
     }
   ) });
 }
-function ii({
+function ei({
   type: t,
   name: n,
   context: o = {},
@@ -4393,7 +4411,7 @@ function ii({
   animPhase: r,
   series: a
 }) {
-  const s = i === "critical" || i === "offline" ? "#ff2255" : i === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : ni(t, o), f = r >= 0.3 ? 0 : -280, c = r >= 0.2 ? 1 : 0;
+  const s = i === "critical" || i === "offline" ? "#ff2255" : i === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : ti(t, o), h = r >= 0.3 ? 0 : -280, c = r >= 0.2 ? 1 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4407,7 +4425,7 @@ function ii({
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        transform: `translateX(${f}px)`,
+        transform: `translateX(${h}px)`,
         opacity: c,
         transition: "transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease"
       },
@@ -4429,7 +4447,7 @@ function ii({
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { style: { flex: 1, overflowY: "auto", padding: "12px 10px", display: "flex", flexDirection: "column", gap: 16 }, children: l.map((p, h) => /* @__PURE__ */ d(
+        /* @__PURE__ */ e("div", { style: { flex: 1, overflowY: "auto", padding: "12px 10px", display: "flex", flexDirection: "column", gap: 16 }, children: l.map((p, f) => /* @__PURE__ */ d(
           "div",
           {
             style: {
@@ -4437,7 +4455,7 @@ function ii({
               background: "rgba(0, 20, 40, 0.35)",
               border: `1px solid ${p.color}22`,
               borderRadius: 6,
-              transition: `opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) ${h * 0.04}s`,
+              transition: `opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) ${f * 0.04}s`,
               opacity: r >= 0.5 ? 1 : 0
             },
             children: [
@@ -4448,7 +4466,7 @@ function ii({
                   p.unit
                 ] })
               ] }),
-              /* @__PURE__ */ e(ti, { data: p.data, color: p.color, height: 26 })
+              /* @__PURE__ */ e(Jt, { data: p.data, color: p.color, height: 26 })
             ]
           },
           p.id
@@ -4457,43 +4475,43 @@ function ii({
     }
   );
 }
-function ni(t, n) {
+function ti(t, n) {
   if (t === "server") {
     const o = n.cpuLoad ?? 50, i = n.memLoad ?? 60;
     return [
-      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: P(o, 15) },
-      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: P(o * 0.7, 12) },
-      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: P(i, 18) },
-      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: P(i * 0.85, 14) },
-      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: P(40, 25) },
-      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: P(35, 20) },
-      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: P(30, 22) },
-      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: P(55, 20) }
+      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: C(o, 15) },
+      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: C(o * 0.7, 12) },
+      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: C(i, 18) },
+      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: C(i * 0.85, 14) },
+      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: C(40, 25) },
+      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: C(35, 20) },
+      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: C(30, 22) },
+      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: C(55, 20) }
     ];
   }
   if (t === "dispatcher" || t === "messageServer") {
     const o = n.traffic ?? n.queueDepth ?? 50;
     return [
-      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: P(o, 20) },
-      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: P(60, 25) },
-      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: P(45, 20) },
-      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: P(70, 30) },
-      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: P(o * 0.9, 15) }
+      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: C(o, 20) },
+      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: C(60, 25) },
+      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: C(45, 20) },
+      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: C(70, 30) },
+      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: C(o * 0.9, 15) }
     ];
   }
   if (t === "database") {
     const o = n.capacity ?? 70;
     return [
-      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: P(40, 20) },
-      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: P(55, 25) },
-      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: P(35, 18) },
-      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: P(o, 15) },
-      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: P(75, 12) }
+      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: C(40, 20) },
+      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: C(55, 25) },
+      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: C(35, 18) },
+      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: C(o, 15) },
+      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: C(75, 12) }
     ];
   }
   return [];
 }
-function yt({
+function ht({
   w: t,
   h: n,
   color: o,
@@ -4509,7 +4527,7 @@ function yt({
       style: {
         width: t,
         height: n,
-        background: we,
+        background: Se,
         position: "relative",
         overflow: "hidden",
         borderRadius: 2,
@@ -4586,7 +4604,7 @@ function yt({
     }
   );
 }
-function We({
+function De({
   color: t = "#00e5ff",
   label: n = "CPU-0",
   status: o = "online",
@@ -4599,7 +4617,7 @@ function We({
         style: {
           width: 52,
           height: 36,
-          background: we,
+          background: Se,
           position: "relative",
           borderRadius: 2,
           border: `1px solid ${t}55`,
@@ -4697,7 +4715,7 @@ function We({
     )
   ] });
 }
-function ze({
+function We({
   color: t = "#00e5ff",
   label: n = "HEAP-0",
   status: o = "online",
@@ -4800,7 +4818,7 @@ function ye({
   status: o = "online",
   activity: i = !1
 }) {
-  return /* @__PURE__ */ d(yt, { w: 56, h: 22, color: t, label: n, status: o, children: [
+  return /* @__PURE__ */ d(ht, { w: 56, h: 22, color: t, label: n, status: o, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -4833,7 +4851,7 @@ function ye({
     )
   ] });
 }
-function mt({
+function ut({
   color: t = "#00e5ff",
   label: n = "NET",
   status: o = "online"
@@ -4844,7 +4862,7 @@ function mt({
       style: {
         width: 48,
         height: 28,
-        background: we,
+        background: Se,
         position: "relative",
         borderRadius: 2,
         border: `1px solid ${t}44`,
@@ -4897,14 +4915,14 @@ function mt({
     }
   );
 }
-function D({
+function O({
   color: t = "#00e5ff",
   label: n = "THREAD",
   status: o = "online"
 }) {
-  return /* @__PURE__ */ e(yt, { w: 44, h: 28, color: t, label: n, status: o });
+  return /* @__PURE__ */ e(ht, { w: 44, h: 28, color: t, label: n, status: o });
 }
-function Oe({
+function Ie({
   color: t = "#ff8c00",
   label: n = "PLATTER-0",
   status: o = "online",
@@ -5058,7 +5076,7 @@ function B({
     }
   );
 }
-function oi(t, n, o, i) {
+function ii(t, n, o, i) {
   const r = o === "online" ? "online" : o;
   return t === "server" ? [
     {
@@ -5162,8 +5180,8 @@ function oi(t, n, o, i) {
     }
   ] : [];
 }
-const A = "cubic-bezier(0.34, 1.56, 0.64, 1)", ri = "cubic-bezier(0.16, 1, 0.3, 1)";
-function ai({ items: t, revealPhase: n }) {
+const T = "cubic-bezier(0.34, 1.56, 0.64, 1)", ni = "cubic-bezier(0.16, 1, 0.3, 1)";
+function oi({ items: t, revealPhase: n }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -5181,7 +5199,7 @@ function ai({ items: t, revealPhase: n }) {
           style: {
             opacity: n >= 0.2 + i * 0.06 ? 1 : 0,
             transform: `scale(${n >= 0.2 + i * 0.06 ? 1 : 0.6})`,
-            transition: `opacity 0.4s ${A} ${i * 0.06}s, transform 0.45s ${A} ${i * 0.06}s`
+            transition: `opacity 0.4s ${T} ${i * 0.06}s, transform 0.45s ${T} ${i * 0.06}s`
           },
           children: o.element
         },
@@ -5190,7 +5208,7 @@ function ai({ items: t, revealPhase: n }) {
     }
   );
 }
-function li({
+function ri({
   type: t,
   status: n,
   context: o,
@@ -5199,12 +5217,12 @@ function li({
 }) {
   const a = w[n]?.color ?? w.online.color, s = "#ff8c00";
   if (t === "server") {
-    const l = o.cpuLoad ?? 50, f = o.memLoad ?? 60, c = [
+    const l = o.cpuLoad ?? 50, h = o.memLoad ?? 60, c = [
       {
         key: "cpu0",
         delay: 0,
         el: /* @__PURE__ */ e(
-          We,
+          De,
           {
             color: a,
             label: "CPU-0",
@@ -5218,7 +5236,7 @@ function li({
         key: "cpu1",
         delay: 1,
         el: /* @__PURE__ */ e(
-          We,
+          De,
           {
             color: a,
             label: "CPU-1",
@@ -5232,12 +5250,12 @@ function li({
         key: "heap0",
         delay: 2,
         el: /* @__PURE__ */ e(
-          ze,
+          We,
           {
             color: "#8855ee",
             label: "HEAP-0",
             status: i[2]?.status,
-            usedPercent: f,
+            usedPercent: h,
             delay: "0.1s"
           }
         )
@@ -5246,12 +5264,12 @@ function li({
         key: "heap1",
         delay: 3,
         el: /* @__PURE__ */ e(
-          ze,
+          We,
           {
             color: "#8855ee",
             label: "HEAP-1",
             status: i[3]?.status,
-            usedPercent: f * 0.85,
+            usedPercent: h * 0.85,
             delay: "0.3s"
           }
         )
@@ -5290,12 +5308,12 @@ function li({
       {
         key: "thread",
         delay: 7,
-        el: /* @__PURE__ */ e(D, { color: a, label: "THREAD-POOL", status: i[7]?.status })
+        el: /* @__PURE__ */ e(O, { color: a, label: "THREAD-POOL", status: i[7]?.status })
       },
       {
         key: "net",
         delay: 8,
-        el: /* @__PURE__ */ e(mt, { color: a, label: "NET", status: i[8]?.status })
+        el: /* @__PURE__ */ e(ut, { color: a, label: "NET", status: i[8]?.status })
       }
     ];
     return /* @__PURE__ */ e(
@@ -5309,13 +5327,13 @@ function li({
           alignItems: "center",
           padding: 24
         },
-        children: c.map(({ key: p, delay: h, el: y }) => /* @__PURE__ */ e(
+        children: c.map(({ key: p, delay: f, el: y }) => /* @__PURE__ */ e(
           "div",
           {
             style: {
-              opacity: r >= 0.2 + h * 0.08 ? 1 : 0,
-              transform: `scale(${r >= 0.2 + h * 0.08 ? 1 : 0.6})`,
-              transition: `opacity 0.4s ${A} ${h * 0.06}s, transform 0.45s ${A} ${h * 0.06}s`
+              opacity: r >= 0.2 + f * 0.08 ? 1 : 0,
+              transform: `scale(${r >= 0.2 + f * 0.08 ? 1 : 0.6})`,
+              transition: `opacity 0.4s ${T} ${f * 0.06}s, transform 0.45s ${T} ${f * 0.06}s`
             },
             children: y
           },
@@ -5325,7 +5343,7 @@ function li({
     );
   }
   if (t === "dispatcher") {
-    const l = Array.from({ length: 8 }, (f, c) => {
+    const l = Array.from({ length: 8 }, (h, c) => {
       const p = i[c];
       return /* @__PURE__ */ e(
         "div",
@@ -5333,7 +5351,7 @@ function li({
           style: {
             opacity: r >= 0.25 + c * 0.04 ? 1 : 0,
             transform: `scale(${r >= 0.25 + c * 0.04 ? 1 : 0.5})`,
-            transition: `opacity 0.35s ${A} ${c * 0.04}s, transform 0.4s ${A} ${c * 0.04}s`
+            transition: `opacity 0.35s ${T} ${c * 0.04}s, transform 0.4s ${T} ${c * 0.04}s`
           },
           children: /* @__PURE__ */ e(B, { color: a, label: `PORT-${c + 1}`, status: p?.status })
         },
@@ -5359,9 +5377,9 @@ function li({
                 style: {
                   opacity: r >= 0.7 ? 1 : 0,
                   transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${A} 0.3s`
+                  transition: `all 0.4s ${T} 0.3s`
                 },
-                children: /* @__PURE__ */ e(D, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
+                children: /* @__PURE__ */ e(O, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
               }
             ),
             /* @__PURE__ */ e(
@@ -5370,9 +5388,9 @@ function li({
                 style: {
                   opacity: r >= 0.8 ? 1 : 0,
                   transform: `scale(${r >= 0.8 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${A} 0.4s`
+                  transition: `all 0.4s ${T} 0.4s`
                 },
-                children: /* @__PURE__ */ e(D, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
+                children: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
               }
             )
           ] })
@@ -5399,7 +5417,7 @@ function li({
               style: {
                 opacity: r >= 0.25 + l * 0.1 ? 1 : 0,
                 transform: `scale(${r >= 0.25 + l * 0.1 ? 1 : 0.6})`,
-                transition: `all 0.4s ${A} ${l * 0.08}s`
+                transition: `all 0.4s ${T} ${l * 0.08}s`
               },
               children: /* @__PURE__ */ e(B, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
             },
@@ -5411,9 +5429,9 @@ function li({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${A} 0.25s`
+                transition: `all 0.4s ${T} 0.25s`
               },
-              children: /* @__PURE__ */ e(D, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
+              children: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
             }
           ),
           [4, 5, 6].map((l) => /* @__PURE__ */ e(
@@ -5422,10 +5440,10 @@ function li({
               style: {
                 opacity: r >= 0.7 + (l - 4) * 0.08 ? 1 : 0,
                 transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                transition: `all 0.4s ${A} ${0.35 + (l - 4) * 0.05}s`
+                transition: `all 0.4s ${T} ${0.35 + (l - 4) * 0.05}s`
               },
               children: /* @__PURE__ */ e(
-                D,
+                O,
                 {
                   color: "#bb55ff",
                   label: `WORKER-${l - 3}`,
@@ -5452,25 +5470,25 @@ function li({
           padding: 24
         },
         children: [
-          [0, 1, 2].map((f) => /* @__PURE__ */ e(
+          [0, 1, 2].map((h) => /* @__PURE__ */ e(
             "div",
             {
               style: {
-                opacity: r >= 0.2 + f * 0.12 ? 1 : 0,
-                transform: `scale(${r >= 0.2 + f * 0.12 ? 1 : 0.5})`,
-                transition: `all 0.45s ${A} ${f * 0.1}s`
+                opacity: r >= 0.2 + h * 0.12 ? 1 : 0,
+                transform: `scale(${r >= 0.2 + h * 0.12 ? 1 : 0.5})`,
+                transition: `all 0.45s ${T} ${h * 0.1}s`
               },
               children: /* @__PURE__ */ e(
-                Oe,
+                Ie,
                 {
                   color: s,
-                  label: `PLATTER-${f}`,
-                  status: i[f]?.status,
+                  label: `PLATTER-${h}`,
+                  status: i[h]?.status,
                   capacityPercent: l
                 }
               )
             },
-            f
+            h
           )),
           /* @__PURE__ */ e(
             "div",
@@ -5478,9 +5496,9 @@ function li({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${A} 0.3s`
+                transition: `all 0.4s ${T} 0.3s`
               },
-              children: /* @__PURE__ */ e(D, { color: s, label: "CONN-POOL", status: i[3]?.status })
+              children: /* @__PURE__ */ e(O, { color: s, label: "CONN-POOL", status: i[3]?.status })
             }
           ),
           /* @__PURE__ */ e(
@@ -5489,9 +5507,9 @@ function li({
               style: {
                 opacity: r >= 0.75 ? 1 : 0,
                 transform: `scale(${r >= 0.75 ? 1 : 0.6})`,
-                transition: `all 0.4s ${A} 0.4s`
+                transition: `all 0.4s ${T} 0.4s`
               },
-              children: /* @__PURE__ */ e(D, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
+              children: /* @__PURE__ */ e(O, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
             }
           )
         ]
@@ -5500,7 +5518,7 @@ function li({
   }
   return null;
 }
-function Ei({
+function wi({
   type: t,
   name: n,
   status: o,
@@ -5510,7 +5528,7 @@ function Ei({
   subComponents: s,
   graphSeries: l
 }) {
-  const f = oi(t, n, o, a), c = w[o]?.color ?? w.online.color, p = r >= 0.1 ? 1 : r * 10, h = r >= 0.2 ? "-50%" : "0%", y = r >= 0.2 ? "50%" : "0%", u = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
+  const h = ii(t, n, o, a), c = w[o]?.color ?? w.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", y = r >= 0.2 ? "50%" : "0%", u = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -5534,13 +5552,13 @@ function Ei({
               backdropFilter: "blur(10px)",
               WebkitBackdropFilter: "blur(10px)",
               opacity: p,
-              transition: `opacity 0.4s ${ri}`
+              transition: `opacity 0.4s ${ni}`
             },
             onClick: i
           }
         ),
         /* @__PURE__ */ e(
-          ii,
+          ei,
           {
             type: t,
             name: n,
@@ -5583,8 +5601,8 @@ function Ei({
                           background: "linear-gradient(90deg, rgba(2, 8, 20, 0.98) 0%, rgba(2, 12, 28, 0.95) 100%)",
                           borderRight: `2px solid ${c}44`,
                           boxShadow: "4px 0 32px rgba(0,0,0,0.6)",
-                          transform: `translateX(${h})`,
-                          transition: `transform 0.7s ${A}`
+                          transform: `translateX(${f})`,
+                          transition: `transform 0.7s ${T}`
                         }
                       }
                     ),
@@ -5599,7 +5617,7 @@ function Ei({
                           borderLeft: `2px solid ${c}44`,
                           boxShadow: "-4px 0 32px rgba(0,0,0,0.6)",
                           transform: `translateX(${y})`,
-                          transition: `transform 0.7s ${A}`
+                          transition: `transform 0.7s ${T}`
                         }
                       }
                     )
@@ -5622,7 +5640,7 @@ function Ei({
                     display: "flex",
                     flexDirection: "column",
                     opacity: u >= 0.1 ? 1 : 0,
-                    transition: `opacity 0.5s ${A} 0.2s`
+                    transition: `opacity 0.5s ${T} 0.2s`
                   },
                   children: [
                     /* @__PURE__ */ d(
@@ -5710,14 +5728,14 @@ function Ei({
                         }
                       }
                     ),
-                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(ai, { items: s, revealPhase: u }) : /* @__PURE__ */ e(
-                      li,
+                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(oi, { items: s, revealPhase: u }) : /* @__PURE__ */ e(
+                      ri,
                       {
                         type: t,
                         name: n,
                         status: o,
                         context: a,
-                        internal: f,
+                        internal: h,
                         revealPhase: u
                       }
                     ) })
@@ -5731,102 +5749,7 @@ function Ei({
     }
   );
 }
-const De = 330, _e = 350, si = 30;
-function di(t) {
-  if (t === 1) return [{ ex: De, compactX: 0 }];
-  const n = Math.min(260, 520 / t), o = n * (t - 1), i = De - o / 2;
-  return Array.from({ length: t }, (r, a) => {
-    const s = i + a * n, l = (s - De) / o * si * 2;
-    return { ex: s, compactX: l };
-  });
-}
-function ci(t, n) {
-  switch (t.type) {
-    case "server":
-      return /* @__PURE__ */ e(
-        J,
-        {
-          status: n,
-          cpuLoad: t.context?.cpuLoad,
-          memLoad: t.context?.memLoad,
-          brandLabel: t.brandLabel
-        }
-      );
-    case "database":
-      return /* @__PURE__ */ e(Ee, { status: n, capacity: t.context?.capacity });
-    case "dispatcher":
-      return /* @__PURE__ */ e(nt, { status: n, traffic: t.context?.traffic });
-    case "messageServer":
-      return /* @__PURE__ */ e(bt, { status: n, queueDepth: t.context?.queueDepth });
-    default:
-      return /* @__PURE__ */ e(J, { status: n, brandLabel: t.brandLabel });
-  }
-}
-const pi = {
-  server: "APP SERVER",
-  database: "DATABASE",
-  dispatcher: "WEB DISPATCHER",
-  messageServer: "MSG SERVER"
-};
-function fi(t, n) {
-  return t < n / 2 ? { offsetX: -160, align: "left" } : { offsetX: 160, align: "right" };
-}
-function Ai({ name: t, status: n = "online", components: o }) {
-  const i = Xe(() => di(o.length), [o.length]), r = Xe(
-    () => i.map(({ ex: a }) => ({
-      from: [De, 200],
-      to: [a, _e],
-      visibleAtPhase: 3
-    })),
-    [i]
-  );
-  return /* @__PURE__ */ d(tt, { name: t, status: n, connections: r, children: [
-    o.map((a, s) => {
-      const { ex: l, compactX: f } = i[s], c = a.status ?? "online";
-      return /* @__PURE__ */ e(
-        C,
-        {
-          ex: l,
-          ey: _e,
-          compactOffset: { x: f, y: -20 },
-          zIndex: 8 - s,
-          label: a.name,
-          subLabel: a.subLabel ?? pi[a.type] ?? a.type.toUpperCase(),
-          componentInfo: {
-            type: a.type,
-            name: a.name,
-            status: c,
-            context: a.context,
-            dialogMetrics: a.dialogMetrics
-          },
-          children: ci(a, c)
-        },
-        a.name
-      );
-    }),
-    o.map((a, s) => {
-      if (!a.alert) return null;
-      const { ex: l } = i[s], f = a.status ?? "online", { offsetX: c, align: p } = fi(s, o.length);
-      return /* @__PURE__ */ e(
-        O,
-        {
-          ex: l,
-          ey: _e,
-          status: f,
-          title: a.name,
-          msg: a.alert.msg,
-          internalRef: a.alert.internalRef,
-          offsetX: c,
-          offsetY: -60,
-          align: p,
-          isVisible: !0
-        },
-        `alert-${a.name}`
-      );
-    })
-  ] });
-}
-function Ti({
+function Si({
   brandName: t = "BUSAUD AIOps",
   brandTag: n = "3D MONITOR",
   services: o = [],
@@ -5836,28 +5759,28 @@ function Ti({
   fontFamily: s,
   children: l
 }) {
-  const [f] = I(20), [c] = I(!1), [p] = I(!0), [h] = I(0.45), [y] = I(3.3), [u, g] = I("compact"), [m, x] = I(0), [v, $] = I(null), [b, k] = I(null), [T, R] = I(0), L = (E) => {
-    u === "compact" && ($(E), g("expanding"), x(0), setTimeout(() => x(1), 50), setTimeout(() => x(2), 800), setTimeout(() => x(3), 1200), setTimeout(() => x(4), 1600), setTimeout(() => x(5), 2e3), setTimeout(() => {
+  const [h] = L(20), [c] = L(!1), [p] = L(!0), [f] = L(0.45), [y] = L(3.3), [u, g] = L("compact"), [m, x] = L(0), [v, $] = L(null), [b, k] = L(null), [D, P] = L(0), E = (R) => {
+    u === "compact" && ($(R), g("expanding"), x(0), setTimeout(() => x(1), 50), setTimeout(() => x(2), 800), setTimeout(() => x(3), 1200), setTimeout(() => x(4), 1600), setTimeout(() => x(5), 2e3), setTimeout(() => {
       x(6), g("expanded");
     }, 2400));
-  }, z = () => {
-    b ? (k(null), R(0)) : u === "expanded" && (g("collapsing"), x(0), $(null), setTimeout(() => {
-      g((E) => E === "collapsing" ? "compact" : E);
+  }, W = () => {
+    b ? (k(null), P(0)) : u === "expanded" && (g("collapsing"), x(0), $(null), setTimeout(() => {
+      g((R) => R === "collapsing" ? "compact" : R);
     }, 1e3));
-  }, F = (E) => {
-    k(E), R(0);
+  }, X = (R) => {
+    k(R), P(0);
   };
-  ee.useEffect(() => {
+  J.useEffect(() => {
     if (!b) return;
-    const E = performance.now(), ke = 1200, re = () => {
-      const Be = performance.now() - E, Te = Math.min(1, Be / ke);
-      R(Te), Te < 1 && requestAnimationFrame(re);
-    }, se = requestAnimationFrame(re);
-    return () => cancelAnimationFrame(se);
+    const R = performance.now(), Re = 1200, oe = () => {
+      const Ne = performance.now() - R, Te = Math.min(1, Ne / Re);
+      P(Te), Te < 1 && requestAnimationFrame(oe);
+    }, le = requestAnimationFrame(oe);
+    return () => cancelAnimationFrame(le);
   }, [b]);
   const j = () => {
-    k(null), R(0);
-  }, M = o.find((E) => E.name === v), ie = M?.status ?? "online", ne = M?.dbSync ?? !0, W = M?.metrics, H = M?.alerts, oe = 330, Se = 340, $e = b ? 1.15 : 1, Q = b ? -(b.ex - oe) * 0.06 : 0, N = b ? -(b.ey - Se) * 0.06 : 0;
+    k(null), P(0);
+  }, N = o.find((R) => R.name === v), te = N?.status ?? "online", ie = N?.dbSync ?? !0, z = N?.metrics, F = N?.alerts, ne = 330, $e = 340, ke = b ? 1.15 : 1, V = b ? -(b.ex - ne) * 0.06 : 0, M = b ? -(b.ey - $e) * 0.06 : 0;
   return /* @__PURE__ */ d("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
@@ -5872,7 +5795,7 @@ function Ti({
           backgroundPosition: "center center",
           backgroundRepeat: "no-repeat",
           transition: "transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
-          transform: `translate(${Q}px, ${N}px) scale(${$e})`,
+          transform: `translate(${V}px, ${M}px) scale(${ke})`,
           willChange: "transform"
         }
       }
@@ -5891,30 +5814,30 @@ function Ti({
         style: {
           cursor: u === "expanded" ? "zoom-out" : "default"
         },
-        onClick: z,
+        onClick: W,
         children: /* @__PURE__ */ e(
-          Nt,
+          Wt,
           {
             viewState: u,
             animPhase: m,
             selectedSystem: v,
             selectedComponent: b,
-            drillAnimPhase: T,
-            rotateY: f,
+            drillAnimPhase: D,
+            rotateY: h,
             autoRotateComponents: c,
-            componentScale: h,
+            componentScale: f,
             drillZoom: y,
             autoRotateCarousel: p,
             carouselSpeed: a,
             logoUrl: r,
-            onSelectSystem: L,
-            onBackgroundClick: z,
-            onComponentClick: F,
+            onSelectSystem: E,
+            onBackgroundClick: W,
+            onComponentClick: X,
             onCloseDrill: j,
-            selectedSystemStatus: ie,
-            selectedSystemDbSync: ne,
-            selectedSystemMetrics: W,
-            selectedSystemAlerts: H,
+            selectedSystemStatus: te,
+            selectedSystemDbSync: ie,
+            selectedSystemMetrics: z,
+            selectedSystemAlerts: F,
             children: l
           }
         )
@@ -5928,21 +5851,21 @@ function S(t, n, o = 24) {
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
   });
 }
-function xt(t) {
+function bt(t) {
   return t === "critical" || t === "offline" ? "#ff2255" : t === "warning" ? "#ff8c00" : "#00e5ff";
 }
 function me(t, n, o) {
-  const i = t === "online" ? "online" : t, r = xt(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", f = i === "warning" && s > 85 ? "warning" : i === "critical" ? "critical" : "online", c = i === "critical" && n === "APP-03" ? "critical" : "online", p = i === "offline" ? "offline" : "online";
+  const i = t === "online" ? "online" : t, r = bt(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", h = 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(We, { color: r, label: "CPU-0", status: l, load: a }) },
-    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(We, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
-    { id: "heap-0", label: "HEAP-0", status: f, detail: f === "warning" ? "Memory heap usage" : f === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(ze, { color: "#8855ee", label: "HEAP-0", status: f, usedPercent: s }) },
-    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(ze, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
+    { id: "cpu-0", label: "CPU-0", status: l, detail: i === "critical" ? "Core overload" : i === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(De, { color: r, label: "CPU-0", status: l, load: a }) },
+    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(De, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
+    { id: "heap-0", label: "HEAP-0", status: h, detail: h === "warning" ? "Memory heap usage" : h === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(We, { color: "#8855ee", label: "HEAP-0", status: h, usedPercent: s }) },
+    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(We, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
     { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
     { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
     { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(ye, { 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(D, { color: r, label: "THREAD-POOL", status: c }) },
-    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(mt, { color: r, label: "NET", status: p }) }
+    { id: "thread-pool", label: "THREAD-POOL", status: c, detail: c === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(O, { color: r, label: "THREAD-POOL", status: c }) },
+    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(ut, { color: r, label: "NET", status: p }) }
   ];
 }
 function xe(t) {
@@ -5958,8 +5881,8 @@ function xe(t) {
     { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: S(55, 20) }
   ];
 }
-function vt(t, n, o) {
-  const i = t === "online" ? "online" : t, r = xt(t), a = i === "critical" || i === "offline" ? i : "online", s = i === "warning" ? "warning" : "online", l = i === "critical" ? "critical" : "online";
+function gt(t, n, o) {
+  const i = t === "online" ? "online" : t, r = bt(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(B, { color: r, label: "PORT-1", status: "online" }) },
     { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(B, { color: r, label: "PORT-2", status: "online" }) },
@@ -5969,11 +5892,11 @@ function vt(t, n, o) {
     { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(B, { color: r, label: "PORT-6", status: "online" }) },
     { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(B, { color: r, label: "PORT-7", status: "online" }) },
     { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(B, { 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(D, { color: r, label: "HTTP-WORKER", status: l }) },
-    { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(D, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
+    { id: "http-worker", label: "HTTP-WORKER", status: l, detail: l === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(O, { color: r, label: "HTTP-WORKER", status: l }) },
+    { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
   ];
 }
-function wt(t) {
+function yt(t) {
   const n = t?.traffic ?? 50;
   return [
     { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: S(n, 20) },
@@ -5983,19 +5906,19 @@ function wt(t) {
     { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: S(n * 0.9, 15) }
   ];
 }
-function hi(t, n, o) {
+function ai(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(B, { color: "#bb55ff", label: "INST-0", status: "online" }) },
     { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(B, { 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(B, { 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(D, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
-    { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(D, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
-    { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(D, { color: "#bb55ff", label: "WORKER-2", status: "online" }) },
-    { id: "worker-3", label: "WORKER-3", status: s, detail: s === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(D, { color: "#bb55ff", label: "WORKER-3", status: s }) }
+    { 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(O, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
+    { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
+    { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "WORKER-2", status: "online" }) },
+    { id: "worker-3", label: "WORKER-3", status: s, detail: s === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "WORKER-3", status: s }) }
   ];
 }
-function ui(t) {
+function li(t) {
   const n = t?.queueDepth ?? 50;
   return [
     { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: S(n, 20) },
@@ -6005,17 +5928,17 @@ function ui(t) {
     { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: S(n * 0.9, 15) }
   ];
 }
-function Me(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", f = i === "critical" ? "critical" : "online", c = i === "warning" ? "warning" : "online";
+function ze(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", h = i === "critical" ? "critical" : "online", c = i === "warning" ? "warning" : "online";
   return [
-    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Oe, { 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(Oe, { 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(Oe, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
-    { id: "conn-pool", label: "CONN-POOL", status: f, detail: f === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(D, { color: r, label: "CONN-POOL", status: f }) },
-    { id: "query-cache", label: "QUERY-CACHE", status: c, detail: c === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(D, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
+    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Ie, { 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(Ie, { 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(Ie, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
+    { id: "conn-pool", label: "CONN-POOL", status: h, detail: h === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(O, { color: r, label: "CONN-POOL", status: h }) },
+    { id: "query-cache", label: "QUERY-CACHE", status: c, detail: c === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(O, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
   ];
 }
-function Ne(t) {
+function Me(t) {
   const n = t?.capacity ?? 70;
   return [
     { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: S(40, 20) },
@@ -6025,7 +5948,7 @@ function Ne(t) {
     { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: S(75, 12) }
   ];
 }
-function ot(t) {
+function Je(t) {
   const n = [
     t.wdStatus,
     t.msStatus,
@@ -6037,8 +5960,8 @@ function ot(t) {
   ];
   return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
-function Li(t) {
-  const n = ot(t), o = n === "critical" || n === "offline", i = n === "warning";
+function $i(t) {
+  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
@@ -6059,8 +5982,8 @@ function Li(t) {
     }
   ];
 }
-function Ii(t) {
-  const n = ot(t), o = n === "critical" || n === "offline", i = n === "warning";
+function ki(t) {
+  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -6068,7 +5991,7 @@ function Ii(t) {
     ...!o && !i && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
 }
-const bi = [
+const si = [
   { from: [330, 120], to: [220, 260], visibleAtPhase: 3 },
   { from: [330, 120], to: [440, 260], visibleAtPhase: 3 },
   { from: [220, 260], to: [165, 390], visibleAtPhase: 4 },
@@ -6081,11 +6004,11 @@ const bi = [
   { from: [330, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" },
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
-function gi({ config: t }) {
-  const n = ee.useContext(le), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: f, pdbStatus: c, sdbStatus: p, dbSync: h } = t;
-  return /* @__PURE__ */ d(Ce, { children: [
+function di({ config: t }) {
+  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: h, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
+  return /* @__PURE__ */ d(ve, { children: [
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 330,
         ey: 120,
@@ -6093,11 +6016,11 @@ function gi({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(gt, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(ft, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 220,
         ey: 260,
@@ -6112,11 +6035,11 @@ function gi({ config: t }) {
           name: "WEB-DISP",
           status: r,
           context: { traffic: 78 },
-          subComponents: vt(r),
-          graphSeries: wt({ traffic: 78 })
+          subComponents: gt(r),
+          graphSeries: yt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          nt,
+          pt,
           {
             rotateY: o,
             autoRotate: i,
@@ -6130,7 +6053,7 @@ function gi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 440,
         ey: 260,
@@ -6145,11 +6068,11 @@ function gi({ config: t }) {
           name: "MSG-SRV",
           status: a,
           context: { queueDepth: 45 },
-          subComponents: hi(a),
-          graphSeries: ui({ queueDepth: 45 })
+          subComponents: ai(a),
+          graphSeries: li({ queueDepth: 45 })
         },
         children: /* @__PURE__ */ e(
-          bt,
+          Zt,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6164,7 +6087,7 @@ function gi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 165,
         ey: 390,
@@ -6183,7 +6106,7 @@ function gi({ config: t }) {
           graphSeries: xe({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          J,
+          ue,
           {
             rotateY: o,
             autoRotate: i,
@@ -6197,7 +6120,7 @@ function gi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 330,
         ey: 390,
@@ -6216,7 +6139,7 @@ function gi({ config: t }) {
           graphSeries: xe({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          J,
+          ue,
           {
             rotateY: o,
             autoRotate: i,
@@ -6230,7 +6153,7 @@ function gi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 495,
         ey: 390,
@@ -6243,17 +6166,17 @@ function gi({ config: t }) {
         componentInfo: {
           type: "server",
           name: "APP-03",
-          status: f,
+          status: h,
           context: { cpuLoad: 45, memLoad: 63 },
-          subComponents: me(f, "APP-03", { cpuLoad: 45, memLoad: 63 }),
+          subComponents: me(h, "APP-03", { cpuLoad: 45, memLoad: 63 }),
           graphSeries: xe({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          J,
+          ue,
           {
             rotateY: o,
             autoRotate: i,
-            status: f,
+            status: h,
             name: "APP-03",
             cpuLoad: 45,
             memLoad: 63,
@@ -6263,7 +6186,7 @@ function gi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 200,
         ey: 520,
@@ -6278,11 +6201,11 @@ function gi({ config: t }) {
           name: "DB-PRI",
           status: c,
           context: { capacity: 72 },
-          subComponents: Me(c, "DB-PRI", { capacity: 72 }),
-          graphSeries: Ne({ capacity: 72 })
+          subComponents: ze(c, "DB-PRI", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ee,
+          Oe,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6296,7 +6219,7 @@ function gi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 460,
         ey: 520,
@@ -6311,11 +6234,11 @@ function gi({ config: t }) {
           name: "DB-STB",
           status: p,
           context: { capacity: 72 },
-          subComponents: Me(p, "DB-STB", { capacity: 72 }),
-          graphSeries: Ne({ capacity: 72 })
+          subComponents: ze(p, "DB-STB", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ee,
+          Oe,
           {
             rotateY: o,
             autoRotate: i,
@@ -6329,7 +6252,7 @@ function gi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 330,
         ey: 520,
@@ -6338,17 +6261,17 @@ function gi({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(ut, { synced: h, latencyMs: h ? 8 : 342 })
+        children: /* @__PURE__ */ e(ct, { synced: f, latencyMs: f ? 8 : 342 })
       }
     ),
-    /* @__PURE__ */ e(yi, { config: t })
+    /* @__PURE__ */ e(ci, { config: t })
   ] });
 }
-function yi({ config: t }) {
-  const n = ee.useContext(le), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: f, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
+function ci({ config: t }) {
+  const n = J.useContext(ae), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: h, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 220,
         ey: 260,
@@ -6363,7 +6286,7 @@ function yi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 440,
         ey: 260,
@@ -6378,7 +6301,7 @@ function yi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 165,
         ey: 390,
@@ -6393,7 +6316,7 @@ function yi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 330,
         ey: 390,
@@ -6408,7 +6331,7 @@ function yi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 495,
         ey: 390,
@@ -6423,7 +6346,7 @@ function yi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 200,
         ey: 520,
@@ -6438,22 +6361,22 @@ function yi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 460,
         ey: 520,
-        status: f,
+        status: h,
         title: "DB-STB",
-        msg: f === "critical" || f === "offline" ? "Sync failure." : "Replication lag.",
+        msg: h === "critical" || h === "offline" ? "Sync failure." : "Replication lag.",
         offsetX: 110,
         offsetY: 30,
         align: "right",
         isVisible: !!p,
-        internalRef: f !== "online" ? "PLATTER-2" : void 0
+        internalRef: h !== "online" ? "PLATTER-2" : void 0
       }
     ),
     !c && /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 330,
         ey: 520,
@@ -6469,19 +6392,19 @@ function yi({ config: t }) {
     )
   ] }) : null;
 }
-function Oi({ config: t, ...n }) {
+function Ri({ config: t, ...n }) {
   return /* @__PURE__ */ e(
-    tt,
+    dt,
     {
       name: t.name,
-      status: ot(t),
-      connections: bi,
+      status: Je(t),
+      connections: si,
       ...n,
-      children: /* @__PURE__ */ e(gi, { config: t })
+      children: /* @__PURE__ */ e(di, { config: t })
     }
   );
 }
-function rt(t) {
+function et(t) {
   const n = [
     t.dispStatus,
     t.srv1Status,
@@ -6492,8 +6415,8 @@ function rt(t) {
   ];
   return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
-function Di(t) {
-  const n = rt(t), o = n === "critical" || n === "offline", i = n === "warning";
+function Pi(t) {
+  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
@@ -6514,8 +6437,8 @@ function Di(t) {
     }
   ];
 }
-function Wi(t) {
-  const n = rt(t), o = n === "critical" || n === "offline", i = n === "warning";
+function Ci(t) {
+  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -6523,7 +6446,7 @@ function Wi(t) {
     ...!o && !i && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
 }
-const mi = [
+const pi = [
   { from: [330, 120], to: [330, 260], visibleAtPhase: 3 },
   { from: [330, 260], to: [165, 390], visibleAtPhase: 4 },
   { from: [330, 260], to: [330, 390], visibleAtPhase: 4 },
@@ -6532,11 +6455,11 @@ const mi = [
   { from: [330, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" },
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
-function xi({ config: t }) {
-  const n = ee.useContext(le), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: f, sdbStatus: c, dbSync: p } = t;
-  return /* @__PURE__ */ d(Ce, { children: [
+function fi({ config: t }) {
+  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: h, sdbStatus: c, dbSync: p } = t;
+  return /* @__PURE__ */ d(ve, { children: [
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 330,
         ey: 120,
@@ -6544,11 +6467,11 @@ function xi({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(gt, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(ft, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 330,
         ey: 260,
@@ -6563,11 +6486,11 @@ function xi({ config: t }) {
           name: "DISP-01",
           status: r,
           context: { traffic: 78 },
-          subComponents: vt(r),
-          graphSeries: wt({ traffic: 78 })
+          subComponents: gt(r),
+          graphSeries: yt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          nt,
+          pt,
           {
             rotateY: o,
             autoRotate: i,
@@ -6581,7 +6504,7 @@ function xi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 165,
         ey: 390,
@@ -6600,7 +6523,7 @@ function xi({ config: t }) {
           graphSeries: xe({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          J,
+          ue,
           {
             rotateY: o,
             autoRotate: i,
@@ -6614,7 +6537,7 @@ function xi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 330,
         ey: 390,
@@ -6633,7 +6556,7 @@ function xi({ config: t }) {
           graphSeries: xe({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          J,
+          ue,
           {
             rotateY: o,
             autoRotate: i,
@@ -6647,7 +6570,7 @@ function xi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 495,
         ey: 390,
@@ -6666,7 +6589,7 @@ function xi({ config: t }) {
           graphSeries: xe({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          J,
+          ue,
           {
             rotateY: o,
             autoRotate: i,
@@ -6680,7 +6603,7 @@ function xi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 200,
         ey: 520,
@@ -6693,17 +6616,17 @@ function xi({ config: t }) {
         componentInfo: {
           type: "database",
           name: "DB-PRI",
-          status: f,
+          status: h,
           context: { capacity: 72 },
-          subComponents: Me(f, "DB-PRI", { capacity: 72 }),
-          graphSeries: Ne({ capacity: 72 })
+          subComponents: ze(h, "DB-PRI", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ee,
+          Oe,
           {
             rotateY: -o,
             autoRotate: i,
-            status: f,
+            status: h,
             name: "DB-PRI",
             capacity: 72,
             connections: 284,
@@ -6713,7 +6636,7 @@ function xi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 460,
         ey: 520,
@@ -6728,11 +6651,11 @@ function xi({ config: t }) {
           name: "DB-STB",
           status: c,
           context: { capacity: 72 },
-          subComponents: Me(c, "DB-STB", { capacity: 72 }),
-          graphSeries: Ne({ capacity: 72 })
+          subComponents: ze(c, "DB-STB", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ee,
+          Oe,
           {
             rotateY: o,
             autoRotate: i,
@@ -6746,7 +6669,7 @@ function xi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      C,
+      A,
       {
         ex: 330,
         ey: 520,
@@ -6755,17 +6678,17 @@ function xi({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(ut, { synced: p, latencyMs: p ? 8 : 342 })
+        children: /* @__PURE__ */ e(ct, { synced: p, latencyMs: p ? 8 : 342 })
       }
     ),
-    /* @__PURE__ */ e(vi, { config: t })
+    /* @__PURE__ */ e(hi, { config: t })
   ] });
 }
-function vi({ config: t }) {
-  const n = ee.useContext(le), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: f } = t, c = n?.isSelected && n?.isExpandedPos;
+function hi({ config: t }) {
+  const n = J.useContext(ae), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: h } = t, c = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 330,
         ey: 260,
@@ -6780,7 +6703,7 @@ function vi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 165,
         ey: 390,
@@ -6795,7 +6718,7 @@ function vi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 330,
         ey: 390,
@@ -6810,7 +6733,7 @@ function vi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 495,
         ey: 390,
@@ -6825,7 +6748,7 @@ function vi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 200,
         ey: 520,
@@ -6840,7 +6763,7 @@ function vi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      I,
       {
         ex: 460,
         ey: 520,
@@ -6854,8 +6777,8 @@ function vi({ config: t }) {
         internalRef: l !== "online" ? "PLATTER-2" : void 0
       }
     ),
-    !f && /* @__PURE__ */ e(
-      O,
+    !h && /* @__PURE__ */ e(
+      I,
       {
         ex: 330,
         ey: 520,
@@ -6871,71 +6794,70 @@ function vi({ config: t }) {
     )
   ] }) : null;
 }
-function zi({ config: t, ...n }) {
+function Ei({ config: t, ...n }) {
   return /* @__PURE__ */ e(
-    tt,
+    dt,
     {
       name: t.name,
-      status: rt(t),
-      connections: mi,
+      status: et(t),
+      connections: pi,
       ...n,
-      children: /* @__PURE__ */ e(xi, { config: t })
+      children: /* @__PURE__ */ e(fi, { config: t })
     }
   );
 }
 export {
-  Ti as AIOPsDashboard,
-  We as CPU3D,
-  Nt as Carousel,
-  Je as CarouselContext,
-  et as CarouselItemContext,
-  Wt as ComponentDialog,
-  Ei as ComponentDrillView,
-  Ee as Database3D,
+  Si as AIOPsDashboard,
+  De as CPU3D,
+  Wt as Carousel,
+  Ge as CarouselContext,
+  Ke as CarouselItemContext,
+  It as ComponentDialog,
+  wi as ComponentDrillView,
+  Oe as Database3D,
   ye as DriveBay3D,
-  mi as EXCHANGE_CONNECTIONS,
-  zi as ExchangeService,
-  Ri as HOLO_BLUE,
-  ki as HOLO_CYAN,
-  Ke as HOLO_GLASS,
-  we as HOLO_SURFACE,
-  ii as HistoricalGraphPanel,
-  Ht as HoloBase,
-  gt as Human3D,
-  ze as Memory3D,
-  bt as MessageServer3D,
-  mt as NetworkBlock3D,
-  O as NodeCallout,
-  Oe as Platter3D,
+  pi as EXCHANGE_CONNECTIONS,
+  Ei as ExchangeService,
+  mi as HOLO_BLUE,
+  yi as HOLO_CYAN,
+  Qe as HOLO_GLASS,
+  Se as HOLO_SURFACE,
+  ei as HistoricalGraphPanel,
+  Nt as HoloBase,
+  ft as Human3D,
+  We as Memory3D,
+  Zt as MessageServer3D,
+  ut as NetworkBlock3D,
+  I as NodeCallout,
+  Ie as Platter3D,
   B as Port3D,
-  Oi as SAPService,
-  bi as SAP_CONNECTIONS,
+  Ri as SAPService,
+  si as SAP_CONNECTIONS,
   w as STATUS_CFG,
-  J as Server3D,
-  tt as Service,
-  le as ServiceContext,
-  Ot as ServiceDialog,
-  C as ServiceNode,
-  Ai as SimpleService,
-  Bt as SvgConnection,
-  ut as SyncBridge,
-  D as ThreadPool3D,
-  nt as WebDispatcher3D,
-  Wi as computeExchangeDialogAlerts,
-  Di as computeExchangeDialogMetrics,
-  rt as computeExchangeServiceStatus,
-  Ii as computeSAPDialogAlerts,
-  Li as computeSAPDialogMetrics,
-  ot as computeSAPServiceStatus,
-  Ne as getDatabaseGraphSeries,
-  Me as getDatabaseSubComponents,
-  wt as getDispatcherGraphSeries,
-  vt as getDispatcherSubComponents,
-  ui as getMessageServerGraphSeries,
-  hi as getMessageServerSubComponents,
+  ue as Server3D,
+  dt as Service,
+  ae as ServiceContext,
+  At as ServiceDialog,
+  A as ServiceNode,
+  zt as SvgConnection,
+  ct as SyncBridge,
+  O as ThreadPool3D,
+  pt as WebDispatcher3D,
+  Ci as computeExchangeDialogAlerts,
+  Pi as computeExchangeDialogMetrics,
+  et as computeExchangeServiceStatus,
+  ki as computeSAPDialogAlerts,
+  $i as computeSAPDialogMetrics,
+  Je as computeSAPServiceStatus,
+  Me as getDatabaseGraphSeries,
+  ze as getDatabaseSubComponents,
+  yt as getDispatcherGraphSeries,
+  gt as getDispatcherSubComponents,
+  li as getMessageServerGraphSeries,
+  ai as getMessageServerSubComponents,
   xe as getServerGraphSeries,
   me as getServerSubComponents,
-  Ze as makeFaceStyles,
-  Pi as useCarouselContext,
-  Ci as useCarouselItemContext
+  qe as makeFaceStyles,
+  xi as useCarouselContext,
+  vi as useCarouselItemContext
 };