react-aiops 0.1.22 → 0.1.23

package/dist/index.js

@@ -1,11 +1,11 @@
-import { jsxs as d, jsx as e, Fragment as De } from "react/jsx-runtime";
-import U, { createContext as Qe, useContext as be, useState as E, useCallback as Ve, useEffect as ge, useMemo as ze, useRef as _ } from "react";
-const _t = {
+import { jsxs as c, jsx as e, Fragment as ze } from "react/jsx-runtime";
+import X, { createContext as et, useContext as xe, useState as C, useCallback as _e, useEffect as de, useMemo as Be, useRef as q } from "react";
+const Xt = {
   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 jt({
+function qt({
   name: t,
   status: i,
   dbSync: o = !0,
@@ -31,13 +31,13 @@ function jt({
       value: s ? "5.42%" : l ? "1.20%" : "0.01%",
       color: s ? "#ff2255" : l ? "#ff8c00" : "#00ff88"
     }
-  ], c = a ?? [
+  ], d = a ?? [
     ...o ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...s ? [{ level: "critical", message: "Critical Component Failure" }] : [],
     ...l && !s ? [{ level: "warning", message: "Component Warning State" }] : [],
     ...!s && !l && o ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -64,7 +64,7 @@ function jt({
         gap: 16
       },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -115,13 +115,13 @@ function jt({
               fontSize: 13,
               color: "#a0b0c0"
             },
-            children: u.map((p, f) => /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            children: u.map((p, f) => /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
               /* @__PURE__ */ e("span", { children: p.label }),
               /* @__PURE__ */ e("span", { style: { color: p.color }, children: p.value })
             ] }, f))
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -145,24 +145,24 @@ function jt({
                   children: "SYSTEM ALERTS"
                 }
               ),
-              c.map((p, f) => {
-                const g = _t[p.level];
-                return /* @__PURE__ */ d(
+              d.map((p, f) => {
+                const b = Xt[p.level];
+                return /* @__PURE__ */ c(
                   "div",
                   {
                     style: {
                       display: "flex",
                       gap: 8,
                       alignItems: "flex-start",
-                      color: g.color,
+                      color: b.color,
                       fontSize: 12,
-                      background: g.bg,
+                      background: b.bg,
                       padding: "6px 10px",
                       borderRadius: 4,
-                      borderLeft: `2px solid ${g.border}`
+                      borderLeft: `2px solid ${b.border}`
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { children: g.icon }),
+                      /* @__PURE__ */ e("span", { children: b.icon }),
                       " ",
                       /* @__PURE__ */ e("span", { children: p.message })
                     ]
@@ -177,13 +177,13 @@ function jt({
     }
   );
 }
-const R = {
+const E = {
   online: { color: "#00e5ff", glow: "rgba(0,229,255,0.55)" },
   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)" }
-}, Vi = "#00e5ff", _i = "#0055cc", Ne = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", rt = "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 at(t, i, o) {
+}, _i = "#00e5ff", ji = "#0055cc", Ue = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", dt = "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 ct(t, i, o) {
   const n = {
     position: "absolute",
     overflow: "hidden",
@@ -233,56 +233,56 @@ function at(t, i, o) {
     }
   };
 }
-const nt = "cubic-bezier(0.34, 1.56, 0.64, 1)", He = "cubic-bezier(0.16, 1, 0.3, 1)";
-function Rt(t) {
-  return R[t]?.color ?? R.online.color;
+const lt = "cubic-bezier(0.34, 1.56, 0.64, 1)", qe = "cubic-bezier(0.16, 1, 0.3, 1)";
+function Pt(t) {
+  return E[t]?.color ?? E.online.color;
 }
-function Xt(t, i, o) {
+function Qt(t, i, o) {
   return t >= o ? "#ff2255" : t >= i ? "#ff8c00" : "#00e5ff";
 }
-function Ue(t, i, o, n) {
+function Xe(t, i, o, n) {
   return t === "offline" ? "offline" : t === "critical" && i >= n ? "critical" : (t === "critical" || t === "warning") && i >= o ? "warning" : "online";
 }
-function qt({
+function Kt({
   component: t,
   onClose: i,
   visible: o,
   sceneWidth: n = 660,
   sceneHeight: r = 600
 }) {
-  const { type: a, name: s, status: l, ex: u, ey: c, context: p = {} } = t, f = Rt(l), g = u >= n / 2, h = c >= r / 2, y = {
+  const { type: a, name: s, status: l, ex: u, ey: d, context: p = {} } = t, f = Pt(l), b = u >= n / 2, h = d >= r / 2, y = {
     position: "fixed",
-    ...g ? { right: 28 } : { left: 28 },
+    ...b ? { right: 28 } : { left: 28 },
     ...h ? { bottom: 110 } : { top: 72 }
-  }, m = g ? 40 : -40, v = h ? 30 : -30, x = t.dialogMetrics ?? p.dialogMetrics;
-  let S;
-  if (x && x.length > 0)
-    S = x.map((b, P) => {
-      const O = b.warnAt ?? 70, $ = b.critAt ?? 85;
+  }, m = b ? 40 : -40, k = h ? 30 : -30, v = t.dialogMetrics ?? p.dialogMetrics;
+  let $;
+  if (v && v.length > 0)
+    $ = v.map((g, R) => {
+      const A = g.warnAt ?? 70, L = g.critAt ?? 85;
       return {
-        id: b.id,
-        label: b.label,
-        sublabel: b.sublabel,
-        value: b.value,
-        unit: b.unit ?? "%",
-        status: Ue(l, b.value, O, $),
-        icon: b.icon ?? "cpu",
-        delay: P,
-        colorOverride: b.color,
-        warnAt: O,
-        critAt: $
+        id: g.id,
+        label: g.label,
+        sublabel: g.sublabel,
+        value: g.value,
+        unit: g.unit ?? "%",
+        status: Xe(l, g.value, A, L),
+        icon: g.icon ?? "cpu",
+        delay: R,
+        colorOverride: g.color,
+        warnAt: A,
+        critAt: L
       };
     });
   else {
-    const b = p.cpuLoad ?? p.traffic ?? 50, P = p.memLoad ?? p.queueDepth ?? 60, O = p.capacity ?? 72, $ = Ue(l, b, 70, 85), k = Ue(l, P, 75, 88), M = Ue(l, O, 75, 90);
-    S = [
+    const g = p.cpuLoad ?? p.traffic ?? 50, R = p.memLoad ?? p.queueDepth ?? 60, A = p.capacity ?? 72, L = Xe(l, g, 70, 85), w = Xe(l, R, 75, 88), I = Xe(l, A, 75, 90);
+    $ = [
       {
         id: "cpu",
         label: a === "dispatcher" ? "TRAFFIC" : a === "messageServer" ? "QUEUE" : "CPU",
         sublabel: a === "dispatcher" ? "PORT LOAD" : a === "messageServer" ? "QUEUE DEPTH" : "PROCESSOR",
-        value: b,
+        value: g,
         unit: "%",
-        status: $,
+        status: L,
         icon: "cpu",
         delay: 0
       },
@@ -290,9 +290,9 @@ function qt({
         id: "mem",
         label: "MEMORY",
         sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
-        value: P,
+        value: R,
         unit: "%",
-        status: k,
+        status: w,
         icon: "mem",
         delay: 1
       },
@@ -300,15 +300,15 @@ function qt({
         id: "storage",
         label: "STORAGE",
         sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
-        value: O,
+        value: A,
         unit: "%",
-        status: M,
+        status: I,
         icon: "disk",
         delay: 2
       }
     ];
   }
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -322,14 +322,14 @@ function qt({
         fontFamily: "'Courier New', monospace",
         overflow: "hidden",
         opacity: o ? 1 : 0,
-        transform: o ? "scale(1) translate(0, 0)" : `scale(0.7) translate(${m}px, ${v}px)`,
-        transition: `opacity 0.45s ${He}, transform 0.55s ${nt}`,
+        transform: o ? "scale(1) translate(0, 0)" : `scale(0.7) translate(${m}px, ${k}px)`,
+        transition: `opacity 0.45s ${qe}, transform 0.55s ${lt}`,
         pointerEvents: o ? "auto" : "none",
         zIndex: 9999,
         animation: o ? "comp-dialog-border-glow 3s ease-in-out infinite" : "none",
         "--dialog-color": f
       },
-      onClick: (b) => b.stopPropagation(),
+      onClick: (g) => g.stopPropagation(),
       children: [
         /* @__PURE__ */ e(
           "div",
@@ -393,14 +393,14 @@ function qt({
             borderRight: `2px solid ${f}66`,
             borderRadius: "0 0 14px 0"
           }
-        ].map((b, P) => /* @__PURE__ */ e(
+        ].map((g, R) => /* @__PURE__ */ e(
           "div",
           {
-            style: { position: "absolute", width: 18, height: 18, pointerEvents: "none", ...b }
+            style: { position: "absolute", width: 18, height: 18, pointerEvents: "none", ...g }
           },
-          P
+          R
         )),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -414,8 +414,8 @@ function qt({
               zIndex: 2
             },
             children: [
-              /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
-                /* @__PURE__ */ d("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
+                /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
                   /* @__PURE__ */ e(
                     "div",
                     {
@@ -443,7 +443,7 @@ function qt({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ d("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
+                /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
                   /* @__PURE__ */ e(
                     "span",
                     {
@@ -479,8 +479,8 @@ function qt({
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: (b) => {
-                    b.stopPropagation(), i();
+                  onClick: (g) => {
+                    g.stopPropagation(), i();
                   },
                   style: {
                     width: 34,
@@ -498,11 +498,11 @@ function qt({
                     lineHeight: 1,
                     flexShrink: 0
                   },
-                  onMouseEnter: (b) => {
-                    b.currentTarget.style.background = `${f}22`, b.currentTarget.style.boxShadow = `0 0 12px ${f}44`;
+                  onMouseEnter: (g) => {
+                    g.currentTarget.style.background = `${f}22`, g.currentTarget.style.boxShadow = `0 0 12px ${f}44`;
                   },
-                  onMouseLeave: (b) => {
-                    b.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${f}08 100%)`, b.currentTarget.style.boxShadow = "none";
+                  onMouseLeave: (g) => {
+                    g.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${f}08 100%)`, g.currentTarget.style.boxShadow = "none";
                   },
                   children: "×"
                 }
@@ -521,10 +521,10 @@ function qt({
               position: "relative",
               zIndex: 2
             },
-            children: S.map((b) => /* @__PURE__ */ e(Qt, { metric: b, visible: o, accentColor: f }, b.id))
+            children: $.map((g) => /* @__PURE__ */ e(Gt, { metric: g, visible: o, accentColor: f }, g.id))
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -542,12 +542,12 @@ function qt({
               zIndex: 2
             },
             children: [
-              /* @__PURE__ */ d("span", { children: [
+              /* @__PURE__ */ c("span", { children: [
                 a.toUpperCase(),
                 " · ",
                 l.toUpperCase()
               ] }),
-              /* @__PURE__ */ d("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+              /* @__PURE__ */ c("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
                 /* @__PURE__ */ e(
                   "span",
                   {
@@ -570,7 +570,7 @@ function qt({
     }
   );
 }
-function Qt({
+function Gt({
   metric: t,
   visible: i,
   accentColor: o
@@ -582,12 +582,12 @@ function Qt({
     unit: s,
     status: l,
     icon: u,
-    delay: c,
+    delay: d,
     colorOverride: p,
     warnAt: f = 70,
-    critAt: g = 85
-  } = t, h = p ?? Xt(a, f, g), y = p ?? Rt(l);
-  return /* @__PURE__ */ d(
+    critAt: b = 85
+  } = t, h = p ?? Qt(a, f, b), y = p ?? Pt(l);
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -596,10 +596,10 @@ function Qt({
         gap: 16,
         opacity: i ? 1 : 0,
         transform: i ? "translateY(0)" : "translateY(12px)",
-        transition: `opacity 0.4s ${He} ${0.3 + c * 0.12}s, transform 0.5s ${nt} ${0.3 + c * 0.12}s`
+        transition: `opacity 0.4s ${qe} ${0.3 + d * 0.12}s, transform 0.5s ${lt} ${0.3 + d * 0.12}s`
       },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -615,10 +615,10 @@ function Qt({
               position: "relative",
               overflow: "hidden",
               transition: "border-color 0.6s ease, background 0.6s ease",
-              animation: i ? `comp-dialog-icon-pop 0.5s ${nt} ${0.35 + c * 0.12}s both` : "none"
+              animation: i ? `comp-dialog-icon-pop 0.5s ${lt} ${0.35 + d * 0.12}s both` : "none"
             },
             children: [
-              /* @__PURE__ */ e(Kt, { type: u, color: y }),
+              /* @__PURE__ */ e(Zt, { type: u, color: y }),
               (l === "warning" || l === "critical") && /* @__PURE__ */ e(
                 "div",
                 {
@@ -638,8 +638,8 @@ function Qt({
             ]
           }
         ),
-        /* @__PURE__ */ d("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ d(
+        /* @__PURE__ */ c("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ c(
             "div",
             {
               style: {
@@ -649,7 +649,7 @@ function Qt({
                 marginBottom: 6
               },
               children: [
-                /* @__PURE__ */ d("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
                   /* @__PURE__ */ e(
                     "span",
                     {
@@ -675,7 +675,7 @@ function Qt({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ d(
+                /* @__PURE__ */ c(
                   "span",
                   {
                     style: {
@@ -695,7 +695,7 @@ function Qt({
               ]
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ c(
             "div",
             {
               style: {
@@ -718,8 +718,8 @@ function Qt({
                       background: `linear-gradient(90deg, ${h}66, ${h})`,
                       boxShadow: `0 0 8px ${h}44`,
                       transformOrigin: "left center",
-                      transition: `width 0.8s ${He}, background 0.8s ease, box-shadow 0.8s ease`,
-                      animation: i ? `comp-dialog-metric-fill 0.8s ${He} ${0.4 + c * 0.12}s both` : "none"
+                      transition: `width 0.8s ${qe}, background 0.8s ease, box-shadow 0.8s ease`,
+                      animation: i ? `comp-dialog-metric-fill 0.8s ${qe} ${0.4 + d * 0.12}s both` : "none"
                     }
                   }
                 ),
@@ -741,7 +741,7 @@ function Qt({
                   {
                     style: {
                       position: "absolute",
-                      left: `${g}%`,
+                      left: `${b}%`,
                       top: 0,
                       bottom: 0,
                       width: 1,
@@ -752,7 +752,7 @@ function Qt({
               ]
             }
           ),
-          /* @__PURE__ */ d("div", { style: { position: "relative", height: 10, marginTop: 2 }, children: [
+          /* @__PURE__ */ c("div", { style: { position: "relative", height: 10, marginTop: 2 }, children: [
             /* @__PURE__ */ e(
               "span",
               {
@@ -785,7 +785,7 @@ function Qt({
               {
                 style: {
                   position: "absolute",
-                  left: `${g}%`,
+                  left: `${b}%`,
                   transform: "translateX(-50%)",
                   fontSize: 6,
                   color: "rgba(255,34,85,0.3)",
@@ -813,8 +813,8 @@ function Qt({
     }
   );
 }
-function Kt({ type: t, color: i }) {
-  return t === "cpu" ? /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
+function Zt({ type: t, color: i }) {
+  return t === "cpu" ? /* @__PURE__ */ c("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: i, strokeWidth: "1.5" }),
     /* @__PURE__ */ e(
       "rect",
@@ -841,7 +841,7 @@ function Kt({ type: t, color: i }) {
     /* @__PURE__ */ e("line", { x1: "9", y1: "18", x2: "9", y2: "20", stroke: i, strokeWidth: "1" }),
     /* @__PURE__ */ e("line", { x1: "12", y1: "18", x2: "12", y2: "20", stroke: i, strokeWidth: "1" }),
     /* @__PURE__ */ e("line", { x1: "15", y1: "18", x2: "15", y2: "20", stroke: i, strokeWidth: "1" })
-  ] }) : t === "mem" ? /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
+  ] }) : t === "mem" ? /* @__PURE__ */ c("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ e("rect", { x: "7", y: "3", width: "10", height: "18", rx: "1.5", stroke: i, strokeWidth: "1.5" }),
     /* @__PURE__ */ e(
       "rect",
@@ -888,7 +888,7 @@ function Kt({ type: t, color: i }) {
     /* @__PURE__ */ e("line", { x1: "17", y1: "7", x2: "19", y2: "7", stroke: i, strokeWidth: "0.8" }),
     /* @__PURE__ */ e("line", { x1: "17", y1: "11", x2: "19", y2: "11", stroke: i, strokeWidth: "0.8" }),
     /* @__PURE__ */ e("line", { x1: "17", y1: "15", x2: "19", y2: "15", stroke: i, strokeWidth: "0.8" })
-  ] }) : /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
+  ] }) : /* @__PURE__ */ c("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "8.5", stroke: i, strokeWidth: "1.5" }),
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "5.5", stroke: i, strokeWidth: "0.5", strokeDasharray: "2 2" }),
     /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2", fill: `${i}55` }),
@@ -898,14 +898,14 @@ function Kt({ type: t, color: i }) {
     /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: i, strokeWidth: "0.8" })
   ] });
 }
-const lt = Qe(null), st = Qe({ index: 0 });
-function ji() {
-  return be(lt);
-}
+const pt = et(null), ft = et({ index: 0 });
 function Xi() {
-  return be(st);
+  return xe(pt);
 }
-function Gt({
+function qi() {
+  return xe(ft);
+}
+function Jt({
   children: t,
   logoUrl: i,
   viewState: o,
@@ -915,82 +915,80 @@ function Gt({
   drillAnimPhase: s,
   rotateY: l = 20,
   autoRotateComponents: u = !0,
-  componentScale: c = 0.35,
+  componentScale: d = 0.35,
   drillZoom: p = 3.3,
   autoRotateCarousel: f = !0,
-  carouselSpeed: g = 6e-3,
+  carouselSpeed: b = 6e-3,
   width: h = 950,
   height: y = 790,
   onSelectSystem: m,
-  onBackgroundClick: v,
-  onComponentClick: x,
-  onCloseDrill: S,
-  selectedSystemStatus: b = "online",
-  selectedSystemDbSync: P = !0,
-  selectedSystemMetrics: O,
-  selectedSystemAlerts: $
+  onBackgroundClick: k,
+  onComponentClick: v,
+  onComponentDataUpdate: $,
+  onCloseDrill: g,
+  selectedSystemStatus: R = "online",
+  selectedSystemDbSync: A = !0,
+  selectedSystemMetrics: L,
+  selectedSystemAlerts: w
 }) {
-  const [k, M] = E({}), L = Ve(
-    (w, C) => {
-      M((D) => {
-        const te = D[w];
-        return te && te.length === C.length && te.every(
-          (ae, Y) => ae.level === C[Y].level && ae.message === C[Y].message
-        ) ? D : { ...D, [w]: C };
-      });
-    },
-    []
-  ), [H, j] = E(0);
-  ge(() => {
-    let w;
+  const [I, H] = C({}), D = _e((S, P) => {
+    H((M) => {
+      const Y = M[S];
+      return Y && Y.length === P.length && Y.every((Z, Q) => Z.level === P[Q].level && Z.message === P[Q].message) ? M : { ...M, [S]: P };
+    });
+  }, []), [ee, ce] = C(0);
+  de(() => {
+    let S;
     if ((o === "compact" || o === "collapsing") && f) {
-      const C = () => {
-        j((D) => D + g), w = requestAnimationFrame(C);
+      const P = () => {
+        ce((M) => M + b), S = requestAnimationFrame(P);
       };
-      w = requestAnimationFrame(C);
+      S = requestAnimationFrame(P);
     }
-    return () => cancelAnimationFrame(w);
-  }, [o, f, g]);
-  const le = U.Children.toArray(t), se = le.length, ee = ze(
+    return () => cancelAnimationFrame(S);
+  }, [o, f, b]);
+  const pe = X.Children.toArray(t), se = pe.length, ve = Be(
     () => ({
       totalSystems: se,
-      carouselRotation: H,
+      carouselRotation: ee,
       viewState: o,
       animPhase: n,
       selectedSystem: r,
       selectedComponent: a,
       rotateY: l,
       autoRotateComponents: u,
-      componentScale: c,
+      componentScale: d,
       drillZoom: p,
       onSelectSystem: m,
-      onComponentClick: x,
+      onComponentClick: v,
+      onComponentDataUpdate: $,
       containerWidth: h,
-      onNodeAlertsChange: L
+      onNodeAlertsChange: D
     }),
     [
       se,
-      H,
+      ee,
       o,
       n,
       r,
       a,
       l,
       u,
-      c,
+      d,
       p,
       m,
-      x,
+      v,
+      $,
       h,
-      L
+      D
     ]
-  ), ye = le.map((w, C) => /* @__PURE__ */ e(st.Provider, { value: { index: C }, children: w }, C)), me = o === "expanded" || o === "expanding" && n >= 4, xe = ze(() => {
-    if (!r) return $;
-    const w = $ ?? [], D = [...k[r] ?? [], ...w];
-    return D.length > 0 ? D : void 0;
-  }, [$, k, r]);
-  return /* @__PURE__ */ d(lt.Provider, { value: ee, children: [
-    /* @__PURE__ */ d("div", { style: { position: "relative", width: h, height: y, margin: "0 auto", flexShrink: 0 }, children: [
+  ), we = pe.map((S, P) => /* @__PURE__ */ e(ft.Provider, { value: { index: P }, children: S }, P)), Se = o === "expanded" || o === "expanding" && n >= 4, G = Be(() => {
+    if (!r) return w;
+    const S = w ?? [], M = [...I[r] ?? [], ...S];
+    return M.length > 0 ? M : void 0;
+  }, [w, I, r]);
+  return /* @__PURE__ */ c(pt.Provider, { value: ve, children: [
+    /* @__PURE__ */ c("div", { style: { position: "relative", width: h, height: y, margin: "0 auto", flexShrink: 0 }, children: [
       i && (o === "compact" || o === "collapsing") && /* @__PURE__ */ e(
         "img",
         {
@@ -1011,24 +1009,24 @@ function Gt({
           }
         }
       ),
-      ye
+      we
     ] }),
-    r && /* @__PURE__ */ e("div", { onClick: (w) => w.stopPropagation(), children: /* @__PURE__ */ e(
-      jt,
+    r && /* @__PURE__ */ e("div", { onClick: (S) => S.stopPropagation(), children: /* @__PURE__ */ e(
+      qt,
       {
         name: r,
-        status: b,
-        dbSync: P,
-        visible: me && !a,
-        metrics: O,
-        alerts: xe
+        status: R,
+        dbSync: A,
+        visible: Se && !a,
+        metrics: L,
+        alerts: G
       }
     ) }),
-    a && /* @__PURE__ */ e("div", { onClick: (w) => w.stopPropagation(), children: /* @__PURE__ */ e(
-      qt,
+    a && /* @__PURE__ */ e("div", { onClick: (S) => S.stopPropagation(), children: /* @__PURE__ */ e(
+      Kt,
       {
         component: a,
-        onClose: S,
+        onClose: g,
         visible: s >= 0.3,
         sceneWidth: h,
         sceneHeight: y
@@ -1036,7 +1034,7 @@ function Gt({
     ) })
   ] });
 }
-function Zt({
+function ei({
   x1: t,
   y1: i,
   x2: o,
@@ -1045,7 +1043,7 @@ function Zt({
   color: a = "#00e5ff",
   dur: s = "3s"
 }) {
-  return /* @__PURE__ */ d("g", { opacity: r ? 1 : 0, style: { transition: "opacity 0.6s ease" }, children: [
+  return /* @__PURE__ */ c("g", { opacity: r ? 1 : 0, style: { transition: "opacity 0.6s ease" }, children: [
     /* @__PURE__ */ e(
       "line",
       {
@@ -1083,7 +1081,7 @@ function Zt({
         )
       }
     ),
-    r && /* @__PURE__ */ d(De, { children: [
+    r && /* @__PURE__ */ c(ze, { children: [
       /* @__PURE__ */ e("circle", { r: "3", fill: a, opacity: 0.85, children: /* @__PURE__ */ e(
         "animateMotion",
         {
@@ -1103,14 +1101,14 @@ function Zt({
     ] })
   ] });
 }
-const Jt = [
+const ti = [
   { 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 ei({
+function ii({
   children: t,
   size: i = 230,
   widthRatio: o = 1,
@@ -1118,13 +1116,13 @@ function ei({
   label: r
 }) {
   const a = i * o;
-  return /* @__PURE__ */ d("div", { style: {
+  return /* @__PURE__ */ c("div", { style: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     position: "relative"
   }, children: [
-    /* @__PURE__ */ d("div", { style: {
+    /* @__PURE__ */ c("div", { style: {
       position: "relative",
       animation: "holo-float 4s ease-in-out infinite"
     }, children: [
@@ -1147,7 +1145,7 @@ function ei({
       } }),
       t
     ] }),
-    /* @__PURE__ */ d("div", { style: {
+    /* @__PURE__ */ c("div", { style: {
       position: "relative",
       width: a,
       height: 88,
@@ -1219,7 +1217,7 @@ function ei({
         animationDelay: "0.06s"
       } })
     ] }),
-    /* @__PURE__ */ d("div", { style: {
+    /* @__PURE__ */ c("div", { style: {
       position: "relative",
       width: a,
       height: i * 0.34,
@@ -1276,7 +1274,7 @@ function ei({
         background: `radial-gradient(ellipse, ${n}88 0%, ${n}33 40%, transparent 72%)`,
         filter: "blur(12px)"
       } }),
-      Jt.map((s, l) => /* @__PURE__ */ e("div", { style: {
+      ti.map((s, l) => /* @__PURE__ */ e("div", { style: {
         position: "absolute",
         width: a * s.scale,
         height: i * s.scale,
@@ -1319,8 +1317,8 @@ function ei({
     }, children: r })
   ] });
 }
-const $e = Qe(null), ti = "cubic-bezier(0.34, 1.56, 0.64, 1)", yt = 330, mt = 340, ii = 660;
-function Ct({
+const Re = et(null), ni = "cubic-bezier(0.34, 1.56, 0.64, 1)", vt = 330, wt = 340, oi = 660;
+function At({
   name: t,
   status: i = "online",
   connections: o = [],
@@ -1330,51 +1328,52 @@ function Ct({
   _totalSystems: s,
   _carouselRotation: l,
   _viewState: u,
-  _animPhase: c,
+  _animPhase: d,
   _selectedSystem: p,
   _selectedComponent: f,
-  _rotateY: g,
+  _rotateY: b,
   _autoRotateComponents: h,
   _componentScale: y,
   _drillZoom: m,
-  _onSelectSystem: v,
-  _onComponentClick: x,
-  _containerWidth: S
+  _onSelectSystem: k,
+  _onComponentClick: v,
+  _containerWidth: $
 }) {
-  const b = be(lt), P = be(st), O = a ?? P.index, $ = s ?? b?.totalSystems ?? 1, k = l ?? b?.carouselRotation ?? 0, M = u ?? b?.viewState ?? "compact", L = c ?? b?.animPhase ?? 0, H = p ?? b?.selectedSystem ?? null, j = f ?? b?.selectedComponent ?? null, le = g ?? b?.rotateY ?? 20, se = h ?? b?.autoRotateComponents ?? !0, ee = y ?? b?.componentScale ?? 0.35, ye = m ?? b?.drillZoom ?? 3.3, me = v ?? b?.onSelectSystem, xe = x ?? b?.onComponentClick, w = S ?? b?.containerWidth ?? 950, C = b?.onNodeAlertsChange, D = _(C);
-  D.current = C;
-  const te = _(/* @__PURE__ */ new Map()), ae = Ve(
-    (q, Me, Yt) => {
-      const Ze = te.current;
-      Me && Me !== "online" ? Ze.set(q, { severity: Me, msg: Yt }) : Ze.delete(q);
-      const gt = [];
-      for (const [Vt, Je] of Ze)
-        gt.push({
-          level: Je.severity === "critical" || Je.severity === "offline" ? "critical" : "warning",
-          message: `${Vt}: ${Je.msg}`
+  const g = xe(pt), R = xe(ft), A = a ?? R.index, L = s ?? g?.totalSystems ?? 1, w = l ?? g?.carouselRotation ?? 0, I = u ?? g?.viewState ?? "compact", H = d ?? g?.animPhase ?? 0, D = p ?? g?.selectedSystem ?? null, ee = f ?? g?.selectedComponent ?? null, ce = b ?? g?.rotateY ?? 20, pe = h ?? g?.autoRotateComponents ?? !0, se = y ?? g?.componentScale ?? 0.35, ve = m ?? g?.drillZoom ?? 3.3, we = k ?? g?.onSelectSystem, Se = v ?? g?.onComponentClick, G = g?.onComponentDataUpdate, S = $ ?? g?.containerWidth ?? 950, P = g?.onNodeAlertsChange, M = q(P);
+  M.current = P;
+  const Y = q(/* @__PURE__ */ new Map()), Z = _e(
+    (J, Ve, _t) => {
+      const it = Y.current;
+      Ve && Ve !== "online" ? it.set(J, { severity: Ve, msg: _t }) : it.delete(J);
+      const xt = [];
+      for (const [jt, nt] of it)
+        xt.push({
+          level: nt.severity === "critical" || nt.severity === "offline" ? "critical" : "warning",
+          message: `${jt}: ${nt.msg}`
         });
-      D.current?.(t, gt);
+      M.current?.(t, xt);
     },
     [t]
-  ), Y = H === t, z = Y && (M === "expanded" || M === "expanding" && L >= 1), ie = !z, ve = (w - ii) / 2, de = yt + ve, A = O / $ * Math.PI * 2 + k, ne = 420, X = 160, Q = de + Math.cos(A) * ne, oe = 450 + Math.sin(A) * X, K = Math.round(oe), We = !Y && (M === "expanding" || M === "expanded"), Ke = We ? 0 : 1, ce = ie ? 0.3 + (Math.sin(A) + 1) * 0.1 : 1, Wt = ie ? ce : ee, Fe = M === "compact" || M === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", bt = Y && j, Ge = bt ? ye : 1, Mt = j?.ex ?? 330, zt = j?.ey ?? 300, { size: Bt = 90, color: Ft = "#00e5ff", widthRatio: Ut = 3 } = n ?? {}, Ht = {
+  ), Q = D === t, z = Q && (I === "expanded" || I === "expanding" && H >= 1), oe = !z, fe = (S - oi) / 2, ue = vt + fe, he = A / L * Math.PI * 2 + w, Fe = 420, Ce = 160, re = ue + Math.cos(he) * Fe, x = 450 + Math.sin(he) * Ce, V = Math.round(x), ae = !Q && (I === "expanding" || I === "expanded"), _ = ae ? 0 : 1, j = oe ? 0.3 + (Math.sin(he) + 1) * 0.1 : 1, B = oe ? j : se, Ee = I === "compact" || I === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", Ye = Q && ee, tt = Ye ? ve : 1, Bt = ee?.ex ?? 330, Ut = ee?.ey ?? 300, { size: Ft = 90, color: Ht = "#00e5ff", widthRatio: Yt = 3 } = n ?? {}, Vt = {
     name: t,
-    isSelected: Y,
+    isSelected: Q,
     isExpandedPos: z,
-    isCompact: ie,
-    animPhase: L,
-    compactCx: Q,
-    compactCy: oe,
-    groupScale: ce,
-    effectiveScale: Wt,
-    transitionValue: Fe,
-    rotateY: le,
-    autoRotateComponents: se,
-    onComponentClick: xe,
-    selectedComponentName: j?.name ?? null,
-    expandedOffsetX: ve,
-    registerNodeAlert: ae
+    isCompact: oe,
+    animPhase: H,
+    compactCx: re,
+    compactCy: x,
+    groupScale: j,
+    effectiveScale: B,
+    transitionValue: Ee,
+    rotateY: ce,
+    autoRotateComponents: pe,
+    onComponentClick: Se,
+    onComponentDataUpdate: G,
+    selectedComponentName: ee?.name ?? null,
+    expandedOffsetX: fe,
+    registerNodeAlert: Z
   };
-  return /* @__PURE__ */ e($e.Provider, { value: Ht, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(Re.Provider, { value: Vt, children: /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -1384,21 +1383,21 @@ function Ct({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: Ke,
-        transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${ti}`,
-        filter: ie && Math.sin(A) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
-        zIndex: Y ? 500 : We ? 0 : K,
-        transformOrigin: `${de}px ${mt}px`,
-        transform: bt ? `translate(${-(Mt - yt) * Ge}px, ${-(zt - mt) * Ge}px) scale(${Ge})` : "none"
+        opacity: _,
+        transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${ni}`,
+        filter: oe && Math.sin(he) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
+        zIndex: Q ? 500 : ae ? 0 : V,
+        transformOrigin: `${ue}px ${wt}px`,
+        transform: Ye ? `translate(${-(Bt - vt) * tt}px, ${-(Ut - wt) * tt}px) scale(${tt})` : "none"
       },
       children: [
-        ie && !We && /* @__PURE__ */ e(
+        oe && !ae && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: Q,
-              top: oe,
+              left: re,
+              top: x,
               width: 160,
               height: 180,
               transform: "translate(-50%, -80%)",
@@ -1406,25 +1405,25 @@ function Ct({
               cursor: "pointer",
               zIndex: 101
             },
-            onClick: (q) => {
-              q.stopPropagation(), me?.(t);
+            onClick: (J) => {
+              J.stopPropagation(), we?.(t);
             }
           }
         ),
-        ie && (i === "warning" || i === "critical") && /* @__PURE__ */ e(
+        oe && (i === "warning" || i === "critical") && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: Q,
-              top: oe - 200,
-              transform: `translate(-50%, -50%) scale(${ce})`,
+              left: re,
+              top: x - 200,
+              transform: `translate(-50%, -50%) scale(${j})`,
               zIndex: 110,
               pointerEvents: "none",
               animation: "holo-led-blink 1.5s infinite",
               filter: `drop-shadow(0 0 10px ${i === "critical" ? "#ff2255" : "#ff8c00"})`
             },
-            children: /* @__PURE__ */ d("svg", { width: "48", height: "48", viewBox: "0 0 28 28", fill: "none", children: [
+            children: /* @__PURE__ */ c("svg", { width: "48", height: "48", viewBox: "0 0 28 28", fill: "none", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -1464,13 +1463,13 @@ function Ct({
           {
             style: {
               position: "absolute",
-              left: z ? de : Q,
-              top: z ? 48 : oe - 180,
-              transform: `translate(-50%, -50%) scale(${z ? 1.2 : ce * 1.5})`,
+              left: z ? ue : re,
+              top: z ? 48 : x - 180,
+              transform: `translate(-50%, -50%) scale(${z ? 1.2 : j * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
-              transition: Fe,
+              transition: Ee,
               fontSize: 36,
               fontWeight: 700,
               letterSpacing: "0.18em",
@@ -1490,25 +1489,25 @@ function Ct({
             style: {
               position: "absolute",
               top: 0,
-              left: z ? ve : 0,
+              left: z ? fe : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
-              transition: Fe
+              transition: Ee
             },
-            children: o.map((q, Me) => /* @__PURE__ */ e(
-              Zt,
+            children: o.map((J, Ve) => /* @__PURE__ */ e(
+              ei,
               {
-                x1: q.from[0],
-                y1: q.from[1],
-                x2: q.to[0],
-                y2: q.to[1],
-                show: Y && L >= (q.visibleAtPhase ?? 0),
-                color: q.color,
-                dur: q.duration
+                x1: J.from[0],
+                y1: J.from[1],
+                x2: J.to[0],
+                y2: J.to[1],
+                show: Q && H >= (J.visibleAtPhase ?? 0),
+                color: J.color,
+                dur: J.duration
               },
-              Me
+              Ve
             ))
           }
         ),
@@ -1517,13 +1516,13 @@ function Ct({
           {
             style: {
               position: "absolute",
-              left: z ? de : Q,
-              top: z ? 570 : oe + 70,
-              transform: `translate(-50%, -50%) scaleX(${z ? 1 : 0.4}) scaleY(${z ? 1 : 0.6}) scale(${z ? 1 : ce})`,
-              transition: Fe,
+              left: z ? ue : re,
+              top: z ? 570 : x + 70,
+              transform: `translate(-50%, -50%) scaleX(${z ? 1 : 0.4}) scaleY(${z ? 1 : 0.6}) scale(${z ? 1 : j})`,
+              transition: Ee,
               zIndex: 1
             },
-            children: /* @__PURE__ */ e(ei, { size: Bt, color: Ft, widthRatio: Ut, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
+            children: /* @__PURE__ */ e(ii, { size: Ft, color: Ht, widthRatio: Yt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
           }
         ),
         r
@@ -1531,7 +1530,7 @@ function Ct({
     }
   ) });
 }
-function B({
+function U({
   ex: t,
   ey: i,
   status: o,
@@ -1541,23 +1540,23 @@ function B({
   offsetY: s,
   isVisible: l,
   align: u = "right",
-  internalRef: c
+  internalRef: d
 }) {
-  const p = be($e), f = p?.expandedOffsetX ?? 0;
+  const p = xe(Re), f = p?.expandedOffsetX ?? 0;
   if (o === "online") return null;
-  const g = l && !!p?.isExpandedPos, h = R[o]?.color ?? R.warning.color, y = Math.abs(a) > Math.abs(s), m = t + f + (y ? Math.sign(a) * 45 : 0), v = i + (y ? 0 : Math.sign(s) * 40), x = t + f + a, S = i + s;
-  let b = "";
+  const b = l && !!p?.isExpandedPos, h = E[o]?.color ?? E.warning.color, y = Math.abs(a) > Math.abs(s), m = t + f + (y ? Math.sign(a) * 45 : 0), k = i + (y ? 0 : Math.sign(s) * 40), v = t + f + a, $ = i + s;
+  let g = "";
   if (y) {
-    const k = m + (x - m) / 2;
-    b = `M ${m} ${v} L ${k} ${v} L ${k} ${S} L ${x} ${S}`;
+    const w = m + (v - m) / 2;
+    g = `M ${m} ${k} L ${w} ${k} L ${w} ${$} L ${v} ${$}`;
   } else {
-    const k = v + (S - v) / 2;
-    b = `M ${m} ${v} L ${m} ${k} L ${x} ${k} L ${x} ${S}`;
+    const w = k + ($ - k) / 2;
+    g = `M ${m} ${k} L ${m} ${w} L ${v} ${w} L ${v} ${$}`;
   }
-  let P = "translate(0, -50%)";
-  u === "left" && (P = "translate(-100%, -50%)"), u === "top" && (P = "translate(-50%, -100%)"), u === "bottom" && (P = "translate(-50%, 0)");
-  const O = u === "left" ? -8 : u === "right" ? 8 : 0, $ = u === "top" ? -8 : u === "bottom" ? 8 : 0;
-  return /* @__PURE__ */ d(
+  let R = "translate(0, -50%)";
+  u === "left" && (R = "translate(-100%, -50%)"), u === "top" && (R = "translate(-50%, -100%)"), u === "bottom" && (R = "translate(-50%, 0)");
+  const A = u === "left" ? -8 : u === "right" ? 8 : 0, L = u === "top" ? -8 : u === "bottom" ? 8 : 0;
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -1567,7 +1566,7 @@ function B({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: g ? 1 : 0,
+        opacity: b ? 1 : 0,
         transition: "opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s",
         zIndex: 150
       },
@@ -1587,7 +1586,7 @@ function B({
             children: /* @__PURE__ */ e(
               "path",
               {
-                d: b,
+                d: g,
                 fill: "none",
                 stroke: h,
                 strokeWidth: "1.5",
@@ -1597,16 +1596,16 @@ function B({
             )
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
               position: "absolute",
-              left: x,
-              top: S,
-              transform: P,
-              marginLeft: O,
-              marginTop: $,
+              left: v,
+              top: $,
+              transform: R,
+              marginLeft: A,
+              marginTop: L,
               background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px), rgba(2, 8, 16, 0.82)",
               border: `1px solid ${h}55`,
               borderLeft: `2px solid ${h}`,
@@ -1620,7 +1619,7 @@ function B({
               boxShadow: `0 4px 12px rgba(0,0,0,0.4), 0 0 8px ${h}22 inset`
             },
             children: [
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ c(
                 "div",
                 {
                   style: {
@@ -1654,7 +1653,7 @@ function B({
                           textTransform: "uppercase",
                           textShadow: `0 0 4px ${h}88`
                         },
-                        children: c ? `${n} · ${c}` : n
+                        children: d ? `${n} · ${d}` : n
                       }
                     )
                   ]
@@ -1678,25 +1677,25 @@ function B({
     }
   );
 }
-const Et = 70, Pt = 85, ni = {
+const Tt = 70, Ot = 85, ri = {
   online: 0,
   warning: 1,
   offline: 2,
   critical: 3
 };
-function xt(t) {
-  return ni[t] ?? 0;
+function St(t) {
+  return ri[t] ?? 0;
 }
-function oi(t) {
+function ai(t) {
   if (!t) return null;
   const i = t.dialogMetrics ?? t.context?.dialogMetrics;
-  return i && i.length > 0 ? ri(i) : ai(t.context);
+  return i && i.length > 0 ? li(i) : si(t.context);
 }
-function ri(t) {
+function li(t) {
   let i = null;
   for (const r of t) {
     if (r.color) continue;
-    const a = r.critAt ?? Pt, s = r.warnAt ?? Et;
+    const a = r.critAt ?? Ot, s = r.warnAt ?? Tt;
     r.value >= a ? (!i || i.severity !== "critical" || r.value > i.metric.value) && (i = { metric: r, severity: "critical" }) : r.value >= s && (!i || i.severity !== "critical" && r.value > i.metric.value) && (i = { metric: r, severity: "warning" });
   }
   if (!i) return null;
@@ -1707,13 +1706,13 @@ function ri(t) {
     internalRef: o.id.toUpperCase()
   };
 }
-function ai(t) {
+function si(t) {
   if (!t) return null;
   const i = [];
   t.cpuLoad !== void 0 && i.push({ label: "CPU", value: t.cpuLoad, id: "CPU" }), t.memLoad !== void 0 && i.push({ label: "MEM", value: t.memLoad, id: "HEAP" }), t.traffic !== void 0 && i.push({ label: "TRAFFIC", value: t.traffic, id: "NET" }), t.queueDepth !== void 0 && i.push({ label: "QUEUE", value: t.queueDepth, id: "QUEUE" }), t.capacity !== void 0 && i.push({ label: "CAPACITY", value: t.capacity, id: "DISK" });
   let o = null;
   for (const a of i)
-    a.value >= Pt ? (!o || o.severity !== "critical" || a.value > o.entry.value) && (o = { entry: a, severity: "critical" }) : a.value >= Et && (!o || o.severity !== "critical" && a.value > o.entry.value) && (o = { entry: a, severity: "warning" });
+    a.value >= Ot ? (!o || o.severity !== "critical" || a.value > o.entry.value) && (o = { entry: a, severity: "critical" }) : a.value >= Tt && (!o || o.severity !== "critical" && a.value > o.entry.value) && (o = { entry: a, severity: "warning" });
   if (!o) return null;
   const { entry: n, severity: r } = o;
   return {
@@ -1722,8 +1721,8 @@ function ai(t) {
     internalRef: n.id
   };
 }
-function li(t, i) {
-  const o = t?.status ?? "online", n = xt(o), r = oi(t), a = r ? xt(r.severity) : 0, s = n >= a ? o : r.severity;
+function di(t, i) {
+  const o = t?.status ?? "online", n = St(o), r = ai(t), a = r ? St(r.severity) : 0, s = n >= a ? o : r.severity;
   if (n === 0 && a === 0)
     return { effectiveSeverity: "online", callout: null };
   let l;
@@ -1733,7 +1732,7 @@ function li(t, i) {
     internalRef: i?.internalRef
   } : l = { ...r }, i?.offsetX !== void 0 && (l.offsetX = i.offsetX), i?.offsetY !== void 0 && (l.offsetY = i.offsetY), i?.align !== void 0 && (l.align = i.align), { effectiveSeverity: s, callout: l };
 }
-function I({
+function O({
   ex: t,
   ey: i,
   compactOffset: o,
@@ -1743,127 +1742,143 @@ function I({
   label: s,
   subLabel: l,
   delay: u = "0s",
-  componentInfo: c,
+  componentInfo: d,
   visibleAtPhase: p = 0,
   fixedScale: f,
-  bare: g = !1,
+  bare: b = !1,
   alert: h
 }) {
-  const y = be($e);
+  const y = xe(Re);
   if (!y)
     throw new Error("ServiceNode must be used inside a <Service> component.");
   const {
     isExpandedPos: m,
-    animPhase: v,
-    compactCx: x,
-    compactCy: S,
-    groupScale: b,
-    effectiveScale: P,
-    transitionValue: O,
-    onComponentClick: $,
-    selectedComponentName: k,
-    expandedOffsetX: M,
-    registerNodeAlert: L
-  } = y, j = p === 0 || y.isSelected && v >= p ? 1 : 0, le = x + o.x, se = S + o.y, ee = m ? t + M : le, ye = m ? i : se, me = f !== void 0 ? f : y.isCompact ? b : P, xe = !!c && !!k && c.name === k, { effectiveSeverity: w, callout: C } = ze(
-    () => li(c, h),
-    [c, h]
+    animPhase: k,
+    compactCx: v,
+    compactCy: $,
+    groupScale: g,
+    effectiveScale: R,
+    transitionValue: A,
+    onComponentClick: L,
+    selectedComponentName: w,
+    expandedOffsetX: I,
+    registerNodeAlert: H,
+    onComponentDataUpdate: D
+  } = y, ce = p === 0 || y.isSelected && k >= p ? 1 : 0, pe = v + o.x, se = $ + o.y, ve = m ? t + I : pe, we = m ? i : se, Se = f !== void 0 ? f : y.isCompact ? g : R, G = !!d && !!w && d.name === w, { effectiveSeverity: S, callout: P } = Be(
+    () => di(d, h),
+    [d, h]
   );
-  ge(() => (c?.name && L && L(
-    c.name,
-    w !== "online" ? w : null,
-    C?.msg ?? ""
+  de(() => (d?.name && H && H(
+    d.name,
+    S !== "online" ? S : null,
+    P?.msg ?? ""
   ), () => {
-    c?.name && L && L(c.name, null, "");
-  }), [c?.name, w, C?.msg, L]);
-  const D = _(w), [te, ae] = E(!1);
-  ge(() => {
-    if (D.current !== w) {
-      D.current = w, ae(!0);
-      const X = setTimeout(() => ae(!1), 1200);
-      return () => clearTimeout(X);
+    d?.name && H && H(d.name, null, "");
+  }), [d?.name, S, P?.msg, H]);
+  const M = q(S), [Y, Z] = C(!1);
+  de(() => {
+    if (M.current !== S) {
+      M.current = S, Z(!0);
+      const x = setTimeout(() => Z(!1), 1200);
+      return () => clearTimeout(x);
     }
-  }, [w]);
-  const Y = w !== "online" ? R[w]?.color ?? a : a, z = w === "offline" ? "#4a6a8a" : Y, ie = c && m && $ ? () => $({
-    type: c.type,
-    name: c.name,
-    status: c.status,
-    ex: c.ex ?? t,
-    ey: c.ey ?? i,
-    context: c.context,
-    dialogMetrics: c.dialogMetrics,
-    subComponents: c.subComponents,
-    graphSeries: c.graphSeries
-  }) : void 0, ve = c?.name ?? s ?? "", de = c?.status ?? "online", A = w !== "online" && w !== de, ne = ze(() => A ? U.Children.map(
+  }, [S]);
+  const Q = d ? `${d.status}|${JSON.stringify(d.context)}|${JSON.stringify(d.dialogMetrics)}` : "", z = q(d);
+  z.current = d, de(() => {
+    const x = z.current;
+    !G || !x || !D || D({
+      type: x.type,
+      name: x.name,
+      status: x.status,
+      ex: x.ex ?? t,
+      ey: x.ey ?? i,
+      context: x.context,
+      dialogMetrics: x.dialogMetrics,
+      subComponents: x.subComponents,
+      graphSeries: x.graphSeries
+    });
+  }, [Q, G]);
+  const oe = S !== "online" ? E[S]?.color ?? a : a, fe = S === "offline" ? "#4a6a8a" : oe, ue = d && m && L ? () => L({
+    type: d.type,
+    name: d.name,
+    status: d.status,
+    ex: d.ex ?? t,
+    ey: d.ey ?? i,
+    context: d.context,
+    dialogMetrics: d.dialogMetrics,
+    subComponents: d.subComponents,
+    graphSeries: d.graphSeries
+  }) : void 0, he = d?.name ?? s ?? "", Fe = d?.status ?? "online", Ce = S !== "online" && S !== Fe, re = Be(() => Ce ? X.Children.map(
     r,
-    (X) => U.isValidElement(X) ? U.cloneElement(X, {
-      status: w
-    }) : X
-  ) : r, [r, A, w]);
-  return /* @__PURE__ */ d(De, { children: [
-    /* @__PURE__ */ d(
+    (x) => X.isValidElement(x) ? X.cloneElement(x, {
+      status: S
+    }) : x
+  ) : r, [r, Ce, S]);
+  return /* @__PURE__ */ c(ze, { children: [
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
           position: "absolute",
-          left: ee,
-          top: ye,
-          transform: `translate(-50%, -50%) scale(${me})`,
-          opacity: j,
+          left: ve,
+          top: we,
+          transform: `translate(-50%, -50%) scale(${Se})`,
+          opacity: ce,
           zIndex: n,
-          transition: O || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-          pointerEvents: m && j >= 0.5 ? "auto" : "none"
+          transition: A || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          pointerEvents: m && ce >= 0.5 ? "auto" : "none"
         },
         children: [
-          te && !g && /* @__PURE__ */ e(
+          Y && !b && /* @__PURE__ */ e(
             "div",
             {
               style: {
                 position: "absolute",
                 inset: -24,
                 borderRadius: "50%",
-                background: `radial-gradient(circle, ${z}55, transparent 70%)`,
+                background: `radial-gradient(circle, ${fe}55, transparent 70%)`,
                 animation: "status-change-pulse 1.2s ease-out forwards",
                 pointerEvents: "none",
                 zIndex: -1
               }
             }
           ),
-          g ? ne : /* @__PURE__ */ e(
-            si,
+          b ? re : /* @__PURE__ */ e(
+            ci,
             {
-              statusColor: z,
+              statusColor: fe,
               label: s,
               subLabel: l,
               delay: u,
               showLabels: m,
               isCompact: y.isCompact,
-              onClick: ie,
-              isSelected: xe,
-              isPulsing: te,
-              children: ne
+              onClick: ue,
+              isSelected: G,
+              isPulsing: Y,
+              children: re
             }
           )
         ]
       }
     ),
-    C && /* @__PURE__ */ e(
-      B,
+    P && /* @__PURE__ */ e(
+      U,
       {
         ex: t,
         ey: i,
-        status: C.severity,
-        title: ve,
-        msg: C.msg,
-        offsetX: C.offsetX ?? 110,
-        offsetY: C.offsetY ?? -30,
-        align: C.align ?? "right",
-        internalRef: C.internalRef,
+        status: P.severity,
+        title: he,
+        msg: P.msg,
+        offsetX: P.offsetX ?? 110,
+        offsetY: P.offsetY ?? -30,
+        align: P.align ?? "right",
+        internalRef: P.internalRef,
         isVisible: !0
       }
     )
   ] });
 }
-function si({
+function ci({
   children: t,
   statusColor: i,
   label: o,
@@ -1873,10 +1888,10 @@ function si({
   isCompact: s = !1,
   onClick: l,
   isSelected: u = !1,
-  isPulsing: c = !1
+  isPulsing: d = !1
 }) {
-  const [p, f] = E(!1), g = u ? `brightness(1.5) drop-shadow(0 0 24px ${i}cc) drop-shadow(0 0 8px ${i}88)` : c ? `brightness(1.6) drop-shadow(0 0 18px ${i}aa)` : p && l ? `brightness(1.2) drop-shadow(0 0 12px ${i}77)` : "";
-  return /* @__PURE__ */ d(
+  const [p, f] = C(!1), b = u ? `brightness(1.5) drop-shadow(0 0 24px ${i}cc) drop-shadow(0 0 8px ${i}88)` : d ? `brightness(1.6) drop-shadow(0 0 18px ${i}aa)` : p && l ? `brightness(1.2) drop-shadow(0 0 12px ${i}77)` : "";
+  return /* @__PURE__ */ c(
     "div",
     {
       className: `float-node${l ? " float-node--interactive" : ""}`,
@@ -1886,14 +1901,14 @@ function si({
       style: {
         cursor: l ? "pointer" : void 0,
         transition: "filter 0.6s ease",
-        filter: g
+        filter: b
       },
       onMouseEnter: () => f(!0),
       onMouseLeave: () => f(!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__ */ c("div", { className: "float-body", style: { animationDelay: r }, children: [
           /* @__PURE__ */ e(
             "div",
             {
@@ -1905,11 +1920,11 @@ function si({
               }
             }
           ),
-          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && U.isValidElement(t) ? U.cloneElement(t, {
+          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && X.isValidElement(t) ? X.cloneElement(t, {
             _compact: !0
           }) : t })
         ] }),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -1946,10 +1961,10 @@ function si({
     }
   );
 }
-function At({ synced: t, latencyMs: i }) {
+function It({ synced: t, latencyMs: i }) {
   const o = t ? "#00ff88" : "#ff8c00";
-  return /* @__PURE__ */ d("div", { className: "sync-bridge", children: [
-    /* @__PURE__ */ d("div", { className: "sync-arrows", children: [
+  return /* @__PURE__ */ c("div", { className: "sync-bridge", children: [
+    /* @__PURE__ */ c("div", { className: "sync-arrows", children: [
       /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "◄" }),
       /* @__PURE__ */ e(
         "div",
@@ -1974,15 +1989,15 @@ function At({ synced: t, latencyMs: i }) {
         children: t ? "SYNCED" : "LAG"
       }
     ),
-    /* @__PURE__ */ d("div", { className: "sync-latency", style: { color: o + "88" }, children: [
+    /* @__PURE__ */ c("div", { className: "sync-latency", style: { color: o + "88" }, children: [
       i,
       "ms ",
       t ? "replication" : "behind"
     ] })
   ] });
 }
-const pe = 140, G = 240, he = 160, ke = at(pe, G, he);
-function di({
+const be = 140, te = 240, me = 160, Pe = ct(be, te, me);
+function pi({
   cfg: t,
   name: i,
   cpuLoad: o,
@@ -1991,19 +2006,19 @@ function di({
   compact: a,
   brandLabel: s
 }) {
-  const l = Math.ceil(o / 100 * 3), u = r === "offline" ? "#4a6a8a" : t.color, c = [
+  const l = Math.ceil(o / 100 * 3), u = r === "offline" ? "#4a6a8a" : t.color, d = [
     { 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" },
     { color: r === "critical" ? "#ff2255" : t.color, on: r === "critical", label: "FLT" }
   ];
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: pe,
-        height: G,
-        background: a ? Ne : rt,
+        width: be,
+        height: te,
+        background: a ? Ue : dt,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -2025,7 +2040,7 @@ function di({
             }
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -2040,7 +2055,7 @@ function di({
               gap: 7
             },
             children: [
-              /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+              /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
                 /* @__PURE__ */ e("span", { style: { fontSize: 7, color: t.color + "55", letterSpacing: "0.22em" }, children: s }),
                 /* @__PURE__ */ e(
                   "div",
@@ -2056,7 +2071,7 @@ function di({
                       alignItems: "center",
                       justifyContent: "center"
                     },
-                    children: /* @__PURE__ */ d("svg", { width: "9", height: "9", viewBox: "0 0 10 10", fill: "none", children: [
+                    children: /* @__PURE__ */ c("svg", { width: "9", height: "9", viewBox: "0 0 10 10", fill: "none", children: [
                       /* @__PURE__ */ e("path", { d: "M5 1.5v3", stroke: t.color, strokeWidth: "1.4", strokeLinecap: "round" }),
                       /* @__PURE__ */ e(
                         "path",
@@ -2071,7 +2086,7 @@ function di({
                   }
                 )
               ] }),
-              /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+              /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
                 /* @__PURE__ */ e(
                   "span",
                   {
@@ -2084,7 +2099,7 @@ function di({
                     children: i
                   }
                 ),
-                /* @__PURE__ */ e("div", { style: { display: "flex", gap: 5 }, children: c.map((p, f) => /* @__PURE__ */ e(
+                /* @__PURE__ */ e("div", { style: { display: "flex", gap: 5 }, children: d.map((p, f) => /* @__PURE__ */ e(
                   "div",
                   {
                     style: {
@@ -2115,7 +2130,7 @@ function di({
             }
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -2164,8 +2179,8 @@ function di({
           }
         ),
         Array.from({ length: 3 }, (p, f) => {
-          const g = f < l;
-          return /* @__PURE__ */ d(
+          const b = f < l;
+          return /* @__PURE__ */ c(
             "div",
             {
               style: {
@@ -2191,8 +2206,8 @@ function di({
                       height: 5,
                       borderRadius: "50%",
                       flexShrink: 0,
-                      background: g ? t.color : "#08142a",
-                      boxShadow: g ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
+                      background: b ? t.color : "#08142a",
+                      boxShadow: b ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
                     }
                   }
                 ),
@@ -2208,7 +2223,7 @@ function di({
                       position: "relative",
                       overflow: "hidden"
                     },
-                    children: g && /* @__PURE__ */ e(
+                    children: b && /* @__PURE__ */ e(
                       "div",
                       {
                         style: {
@@ -2255,7 +2270,7 @@ function di({
             }
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -2394,13 +2409,13 @@ function di({
     }
   );
 }
-function ci() {
-  return /* @__PURE__ */ d(
+function fi() {
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: pe,
-        height: G,
+        width: be,
+        height: te,
         background: "linear-gradient(180deg, #040c1a 0%, #030810 100%)",
         position: "relative",
         overflow: "hidden",
@@ -2508,18 +2523,18 @@ function ci() {
     }
   );
 }
-function vt({
+function $t({
   side: t,
   color: i,
   brandLabel: o
 }) {
   const n = t === "right";
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: he,
-        height: G,
+        width: me,
+        height: te,
         background: n ? "linear-gradient(90deg, #040c1c 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #040c1c 100%)",
         position: "relative",
         overflow: "hidden"
@@ -2538,13 +2553,13 @@ function vt({
             }
           }
         ),
-        [8, G - 20].map((r) => /* @__PURE__ */ e(
+        [8, te - 20].map((r) => /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
               top: r,
-              left: n ? 10 : he - 18,
+              left: n ? 10 : me - 18,
               width: 8,
               height: 8,
               borderRadius: 1,
@@ -2560,8 +2575,8 @@ function vt({
           {
             style: {
               position: "absolute",
-              top: G * 0.35,
-              bottom: G * 0.15,
+              top: te * 0.35,
+              bottom: te * 0.15,
               left: n ? 22 : 18,
               right: n ? 18 : 22,
               display: "flex",
@@ -2584,13 +2599,13 @@ function vt({
             ))
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
               position: "absolute",
-              top: G * 0.18,
-              left: n ? 12 : he - 78,
+              top: te * 0.18,
+              left: n ? 12 : me - 78,
               fontSize: 7,
               color: "#1a3050",
               letterSpacing: "0.2em",
@@ -2608,14 +2623,14 @@ function vt({
     }
   );
 }
-function pi({ cpuLoad: t }) {
-  const i = t / 100, o = i > 0.75 ? "rgba(255,34,85,0.16)" : i > 0.45 ? "rgba(255,140,0,0.12)" : "rgba(0,229,255,0.08)", n = Math.floor((he - 18) / 7);
-  return /* @__PURE__ */ d(
+function ui({ cpuLoad: t }) {
+  const i = t / 100, o = i > 0.75 ? "rgba(255,34,85,0.16)" : i > 0.45 ? "rgba(255,140,0,0.12)" : "rgba(0,229,255,0.08)", n = Math.floor((me - 18) / 7);
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: pe,
-        height: he,
+        width: be,
+        height: me,
         background: "linear-gradient(180deg, #0c1c30 0%, #070f1e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -2629,7 +2644,7 @@ function pi({ cpuLoad: t }) {
               top: 0,
               left: 0,
               right: 0,
-              height: he * 0.4,
+              height: me * 0.4,
               background: `radial-gradient(ellipse at 50% 0%, ${o} 0%, transparent 70%)`
             }
           }
@@ -2688,7 +2703,7 @@ function pi({ cpuLoad: t }) {
     }
   );
 }
-function Se({
+function ke({
   rotateX: t = -22,
   rotateY: i = 20,
   rotateZ: o = 0,
@@ -2698,29 +2713,29 @@ function Se({
   name: s = "SRV-001",
   cpuLoad: l = 67,
   memLoad: u = 82,
-  brandLabel: c = "BUSAUD",
+  brandLabel: d = "BUSAUD",
   _compact: p
 }) {
-  const [f, g] = E(i), h = _(0), y = _(0);
-  ge(() => {
+  const [f, b] = C(i), h = q(0), y = q(0);
+  de(() => {
     if (!r) {
-      g(i);
+      b(i);
       return;
     }
-    const v = (x) => {
-      y.current && g((S) => S + (x - y.current) * 0.027), y.current = x, h.current = requestAnimationFrame(v);
+    const k = (v) => {
+      y.current && b(($) => $ + (v - y.current) * 0.027), y.current = v, h.current = requestAnimationFrame(k);
     };
-    return h.current = requestAnimationFrame(v), () => {
+    return h.current = requestAnimationFrame(k), () => {
       cancelAnimationFrame(h.current), y.current = 0;
     };
   }, [r, i]);
-  const m = R[a] ?? R.online;
-  return /* @__PURE__ */ d(
+  const m = E[a] ?? E.online;
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: pe * n,
-        height: G * n,
+        width: be * n,
+        height: te * n,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2740,7 +2755,7 @@ function Se({
               animation: "holo-led-blink 1.5s infinite",
               filter: `drop-shadow(0 0 10px ${m.color})`
             },
-            children: /* @__PURE__ */ d("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
+            children: /* @__PURE__ */ c("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -2772,8 +2787,8 @@ function Se({
           {
             style: {
               position: "absolute",
-              width: pe * 1.4 * n,
-              height: G * 0.8 * n,
+              width: be * 1.4 * n,
+              height: te * 0.8 * n,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(45 * n)}px)`,
               pointerEvents: "none",
@@ -2792,20 +2807,20 @@ function Se({
               transform: `scale(${n})`,
               transformOrigin: "center center"
             },
-            children: /* @__PURE__ */ d(
+            children: /* @__PURE__ */ c(
               "div",
               {
                 style: {
-                  width: pe,
-                  height: G,
+                  width: be,
+                  height: te,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: ke.front, children: /* @__PURE__ */ e(
-                    di,
+                  /* @__PURE__ */ e("div", { style: Pe.front, children: /* @__PURE__ */ e(
+                    pi,
                     {
                       cfg: m,
                       name: s,
@@ -2813,19 +2828,19 @@ function Se({
                       memLoad: u,
                       status: a,
                       compact: p,
-                      brandLabel: c
+                      brandLabel: d
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: ke.back, children: /* @__PURE__ */ e(ci, {}) }),
-                  /* @__PURE__ */ e("div", { style: ke.left, children: /* @__PURE__ */ e(vt, { side: "left", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: ke.right, children: /* @__PURE__ */ e(vt, { side: "right", color: m.color, brandLabel: c }) }),
-                  /* @__PURE__ */ e("div", { style: ke.top, children: /* @__PURE__ */ e(pi, { cpuLoad: l }) }),
-                  /* @__PURE__ */ e("div", { style: ke.bottom, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { style: Pe.back, children: /* @__PURE__ */ e(fi, {}) }),
+                  /* @__PURE__ */ e("div", { style: Pe.left, children: /* @__PURE__ */ e($t, { side: "left", color: m.color, brandLabel: d }) }),
+                  /* @__PURE__ */ e("div", { style: Pe.right, children: /* @__PURE__ */ e($t, { side: "right", color: m.color, brandLabel: d }) }),
+                  /* @__PURE__ */ e("div", { style: Pe.top, children: /* @__PURE__ */ e(ui, { cpuLoad: l }) }),
+                  /* @__PURE__ */ e("div", { style: Pe.bottom, children: /* @__PURE__ */ e(
                     "div",
                     {
                       style: {
-                        width: pe,
-                        height: he,
+                        width: be,
+                        height: me,
                         background: "linear-gradient(180deg, #030710, #020508)"
                       }
                     }
@@ -2839,7 +2854,7 @@ function Se({
     }
   );
 }
-function qi({
+function Qi({
   ex: t,
   ey: i,
   compactOffset: o,
@@ -2849,18 +2864,18 @@ function qi({
   subLabel: s,
   color: l,
   delay: u,
-  visibleAtPhase: c,
+  visibleAtPhase: d,
   cpuLoad: p,
   memLoad: f,
-  brandLabel: g,
+  brandLabel: b,
   dialogMetrics: h,
   subComponents: y,
   graphSeries: m,
-  alert: v
+  alert: k
 }) {
-  const x = R[a]?.color ?? l;
+  const v = E[a]?.color ?? l;
   return /* @__PURE__ */ e(
-    I,
+    O,
     {
       ex: t,
       ey: i,
@@ -2868,9 +2883,9 @@ function qi({
       zIndex: n,
       label: r,
       subLabel: s,
-      color: x,
+      color: v,
       delay: u,
-      visibleAtPhase: c,
+      visibleAtPhase: d,
       componentInfo: {
         type: "server",
         name: r,
@@ -2880,16 +2895,16 @@ function qi({
         subComponents: y,
         graphSeries: m
       },
-      alert: v,
-      children: /* @__PURE__ */ e(Se, { status: a, cpuLoad: p, memLoad: f, brandLabel: g })
+      alert: k,
+      children: /* @__PURE__ */ e(ke, { status: a, cpuLoad: p, memLoad: f, brandLabel: b })
     }
   );
 }
-const ot = 12, we = 55, re = we * 2, Pe = 52, dt = 10, et = 3 * Pe + 2 * dt, Re = 2 * Math.PI * we / ot, tt = Array.from({ length: ot }, (t, i) => i / ot * 360);
-function it(t) {
+const st = 12, $e = 55, le = $e * 2, Ie = 52, ut = 10, ot = 3 * Ie + 2 * ut, Ae = 2 * Math.PI * $e / st, rt = Array.from({ length: st }, (t, i) => i / st * 360);
+function at(t) {
   return Math.cos(t * Math.PI / 180) * 0.42 + 0.58;
 }
-function fi({
+function hi({
   diskY: t,
   diskIdx: i,
   cfg: o,
@@ -2897,25 +2912,25 @@ function fi({
   capacity: r,
   compact: a
 }) {
-  return /* @__PURE__ */ d(De, { children: [
-    tt.map((s, l) => {
-      const u = it(s), c = l === 0, p = Math.round(4 + u * 9), f = Math.round(12 + u * 22), g = Math.round(28 + u * 44), h = Math.round(u * 0.55 * 255).toString(16).padStart(2, "0");
+  return /* @__PURE__ */ c(ze, { children: [
+    rt.map((s, l) => {
+      const u = at(s), d = l === 0, p = Math.round(4 + u * 9), f = Math.round(12 + u * 22), b = Math.round(28 + u * 44), h = Math.round(u * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: Re,
-            height: Pe,
-            left: (re - Re) / 2,
+            width: Ae,
+            height: Ie,
+            left: (le - Ae) / 2,
             top: t,
-            transform: `rotateY(${s}deg) translateZ(${we}px)`,
+            transform: `rotateY(${s}deg) translateZ(${$e}px)`,
             backfaceVisibility: "hidden",
-            background: c ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${f},${g})`,
+            background: d ? 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},${b})`,
             borderLeft: `1px solid ${o.color}${h}`,
-            boxShadow: c ? `inset 0 0 18px ${o.color}28` : "none"
+            boxShadow: d ? `inset 0 0 18px ${o.color}28` : "none"
           },
-          children: c && /* @__PURE__ */ d(De, { children: [
+          children: d && /* @__PURE__ */ c(ze, { children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -2963,15 +2978,15 @@ function fi({
         `p${i}${l}`
       );
     }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
           position: "absolute",
-          width: re + 4,
-          height: re + 4,
+          width: le + 4,
+          height: le + 4,
           left: -2,
-          top: t - we,
+          top: t - $e,
           borderRadius: "50%",
           transform: "rotateX(90deg)",
           backfaceVisibility: "hidden",
@@ -3029,10 +3044,10 @@ function fi({
       {
         style: {
           position: "absolute",
-          width: re + 4,
-          height: re + 4,
+          width: le + 4,
+          height: le + 4,
           left: -2,
-          top: t + Pe - we,
+          top: t + Ie - $e,
           borderRadius: "50%",
           transform: "rotateX(-90deg)",
           backfaceVisibility: "hidden",
@@ -3056,18 +3071,18 @@ function fi({
         )
       }
     ),
-    n && tt.map((s, l) => {
-      const u = it(s);
+    n && rt.map((s, l) => {
+      const u = at(s);
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: Re + 1.5,
+            width: Ae + 1.5,
             height: 6,
-            left: (re - Re - 1.5) / 2,
-            top: t + Pe - 3,
-            transform: `rotateY(${s}deg) translateZ(${we + 1.5}px)`,
+            left: (le - Ae - 1.5) / 2,
+            top: t + Ie - 3,
+            transform: `rotateY(${s}deg) translateZ(${$e + 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}`,
@@ -3077,20 +3092,20 @@ function fi({
         `rng${i}${l}`
       );
     }),
-    n && tt.map((s, l) => {
-      const u = it(s), c = Math.round(2 + u * 4), p = Math.round(5 + u * 10), f = Math.round(12 + u * 20);
+    n && rt.map((s, l) => {
+      const u = at(s), d = Math.round(2 + u * 4), p = Math.round(5 + u * 10), f = Math.round(12 + u * 20);
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
-            width: Re,
-            height: dt,
-            left: (re - Re) / 2,
-            top: t + Pe,
-            transform: `rotateY(${s}deg) translateZ(${we}px)`,
+            width: Ae,
+            height: ut,
+            left: (le - Ae) / 2,
+            top: t + Ie,
+            transform: `rotateY(${s}deg) translateZ(${$e}px)`,
             backfaceVisibility: "hidden",
-            background: `rgb(${c},${p},${f})`
+            background: `rgb(${d},${p},${f})`
           }
         },
         `gap${i}${l}`
@@ -3098,7 +3113,7 @@ function fi({
     })
   ] });
 }
-function Be({
+function je({
   rotateX: t = -22,
   rotateY: i = -15,
   rotateZ: o = 0,
@@ -3110,26 +3125,26 @@ function Be({
   // connections = 284,
   _compact: l
 }) {
-  const [u, c] = E(i), p = _(0), f = _(0);
-  ge(() => {
+  const [u, d] = C(i), p = q(0), f = q(0);
+  de(() => {
     if (!r) {
-      c(i);
+      d(i);
       return;
     }
     const h = (y) => {
-      f.current && c((m) => m + (y - f.current) * 0.027), f.current = y, p.current = requestAnimationFrame(h);
+      f.current && d((m) => m + (y - f.current) * 0.027), f.current = y, p.current = requestAnimationFrame(h);
     };
     return p.current = requestAnimationFrame(h), () => {
       cancelAnimationFrame(p.current), f.current = 0;
     };
   }, [r, i]);
-  const g = R[a] ?? R.online;
-  return /* @__PURE__ */ d(
+  const b = E[a] ?? E.online;
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: re * n,
-        height: et * n,
+        width: le * n,
+        height: ot * n,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3149,7 +3164,7 @@ function Be({
               animation: "holo-led-blink 1.5s infinite",
               filter: `drop-shadow(0 0 10px ${a === "critical" ? "#ff2255" : "#ff8c00"})`
             },
-            children: /* @__PURE__ */ d("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
+            children: /* @__PURE__ */ c("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -3189,9 +3204,9 @@ function Be({
           {
             style: {
               position: "absolute",
-              width: re * 2.8 * n,
-              height: et * 0.85 * n,
-              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
+              width: le * 2.8 * n,
+              height: ot * 0.85 * n,
+              background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * n)}px)`,
               pointerEvents: "none",
               top: "45%",
@@ -3213,19 +3228,19 @@ function Be({
               "div",
               {
                 style: {
-                  width: re,
-                  height: et,
+                  width: le,
+                  height: ot,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${u}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((h) => /* @__PURE__ */ e(
-                  fi,
+                  hi,
                   {
-                    diskY: h * (Pe + dt),
+                    diskY: h * (Ie + ut),
                     diskIdx: h,
-                    cfg: g,
+                    cfg: b,
                     hasRingBelow: h < 2,
                     capacity: s,
                     compact: l
@@ -3240,7 +3255,7 @@ function Be({
     }
   );
 }
-function Qi({
+function Ki({
   ex: t,
   ey: i,
   compactOffset: o,
@@ -3250,16 +3265,16 @@ function Qi({
   subLabel: s,
   color: l,
   delay: u,
-  visibleAtPhase: c,
+  visibleAtPhase: d,
   capacity: p,
   dialogMetrics: f,
-  subComponents: g,
+  subComponents: b,
   graphSeries: h,
   alert: y
 }) {
-  const m = R[a]?.color ?? l;
+  const m = E[a]?.color ?? l;
   return /* @__PURE__ */ e(
-    I,
+    O,
     {
       ex: t,
       ey: i,
@@ -3269,23 +3284,23 @@ function Qi({
       subLabel: s,
       color: m,
       delay: u,
-      visibleAtPhase: c,
+      visibleAtPhase: d,
       componentInfo: {
         type: "database",
         name: r,
         status: a,
         context: { capacity: p },
         dialogMetrics: f,
-        subComponents: g,
+        subComponents: b,
         graphSeries: h
       },
       alert: y,
-      children: /* @__PURE__ */ e(Be, { status: a, capacity: p })
+      children: /* @__PURE__ */ e(je, { status: a, capacity: p })
     }
   );
 }
-function ct({ status: t = "online", scale: i = 1 }) {
-  const n = (R[t] ?? R.online).color;
+function ht({ status: t = "online", scale: i = 1 }) {
+  const n = (E[t] ?? E.online).color;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -3296,7 +3311,7 @@ function ct({ status: t = "online", scale: i = 1 }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ c(
         "div",
         {
           style: {
@@ -3309,7 +3324,7 @@ function ct({ status: t = "online", scale: i = 1 }) {
             transformOrigin: "center center"
           },
           children: [
-            /* @__PURE__ */ d("div", { style: { position: "relative", animation: "holo-float 4s ease-in-out infinite" }, children: [
+            /* @__PURE__ */ c("div", { style: { position: "relative", animation: "holo-float 4s ease-in-out infinite" }, children: [
               /* @__PURE__ */ e(
                 "div",
                 {
@@ -3327,7 +3342,7 @@ function ct({ status: t = "online", scale: i = 1 }) {
                   }
                 }
               ),
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ c(
                 "svg",
                 {
                   width: "70",
@@ -3335,7 +3350,7 @@ function ct({ status: t = "online", scale: i = 1 }) {
                   viewBox: "0 0 70 75",
                   style: { display: "block", overflow: "visible" },
                   children: [
-                    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("radialGradient", { id: `usr-glow-${t}`, cx: "50%", cy: "45%", r: "55%", children: [
+                    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ c("radialGradient", { id: `usr-glow-${t}`, cx: "50%", cy: "45%", r: "55%", children: [
                       /* @__PURE__ */ e("stop", { offset: "0%", stopColor: n, stopOpacity: "0.12" }),
                       /* @__PURE__ */ e("stop", { offset: "100%", stopColor: n, stopOpacity: "0" })
                     ] }) }),
@@ -3396,7 +3411,7 @@ function ct({ status: t = "online", scale: i = 1 }) {
     }
   );
 }
-function Ki({
+function Gi({
   ex: t,
   ey: i,
   compactOffset: o,
@@ -3407,7 +3422,7 @@ function Ki({
   visibleAtPhase: l
 }) {
   return /* @__PURE__ */ e(
-    I,
+    O,
     {
       ex: t,
       ey: i,
@@ -3415,12 +3430,12 @@ function Ki({
       zIndex: n,
       color: s,
       visibleAtPhase: l,
-      children: /* @__PURE__ */ e(ct, { status: r, scale: a })
+      children: /* @__PURE__ */ e(ht, { status: r, scale: a })
     }
   );
 }
-const fe = 190, Z = 72, Ae = 120, Ce = at(fe, Z, Ae);
-function ui({
+const ge = 190, ie = 72, Le = 120, Te = ct(ge, ie, Le);
+function bi({
   cfg: t,
   name: i,
   traffic: o,
@@ -3428,13 +3443,13 @@ function ui({
   compact: r
 }) {
   const a = Math.ceil(o / 100 * 8), s = Array(8).fill(t.color);
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: fe,
-        height: Z,
-        background: r ? Ne : rt,
+        width: ge,
+        height: ie,
+        background: r ? Ue : dt,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3456,7 +3471,7 @@ function ui({
             }
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -3505,7 +3520,7 @@ function ui({
             ]
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -3520,15 +3535,15 @@ function ui({
             },
             children: [
               /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 8 }, (l, u) => {
-                const c = u < a, p = s[u];
-                return /* @__PURE__ */ d(
+                const d = u < a, p = s[u];
+                return /* @__PURE__ */ c(
                   "div",
                   {
                     style: {
                       width: 14,
                       height: 24,
                       background: "#03070f",
-                      border: `1px solid ${c ? p + "66" : "#1a2d40"}`,
+                      border: `1px solid ${d ? p + "66" : "#1a2d40"}`,
                       borderRadius: 1.5,
                       display: "flex",
                       flexDirection: "column",
@@ -3545,8 +3560,8 @@ function ui({
                             width: 4,
                             height: 4,
                             borderRadius: "50%",
-                            background: c ? p : "#0a1830",
-                            boxShadow: c ? `0 0 5px ${p}, 0 0 10px ${p}88` : "none"
+                            background: d ? p : "#0a1830",
+                            boxShadow: d ? `0 0 5px ${p}, 0 0 10px ${p}88` : "none"
                           }
                         }
                       ),
@@ -3569,9 +3584,9 @@ function ui({
                             width: 4,
                             height: 4,
                             borderRadius: "50%",
-                            background: c ? t.color : "#0a1830",
-                            boxShadow: c ? `0 0 5px ${t.color}` : "none",
-                            animation: c ? "holo-led-blink 1.8s linear infinite" : "none",
+                            background: d ? t.color : "#0a1830",
+                            boxShadow: d ? `0 0 5px ${t.color}` : "none",
+                            animation: d ? "holo-led-blink 1.8s linear infinite" : "none",
                             animationDelay: `${u * 0.2}s`
                           }
                         }
@@ -3591,11 +3606,11 @@ function ui({
                   }
                 }
               ),
-              /* @__PURE__ */ d("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 5 }, children: [
-                /* @__PURE__ */ d("div", { children: [
-                  /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 2 }, children: [
+              /* @__PURE__ */ c("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 5 }, children: [
+                /* @__PURE__ */ c("div", { children: [
+                  /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 2 }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#2a5070", letterSpacing: "0.1em" }, children: "TRAFFIC" }),
-                    /* @__PURE__ */ d("span", { style: { fontSize: 6, color: t.color }, children: [
+                    /* @__PURE__ */ c("span", { style: { fontSize: 6, color: t.color }, children: [
                       o,
                       "%"
                     ] })
@@ -3625,9 +3640,9 @@ function ui({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
                   /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#2a5070", letterSpacing: "0.1em" }, children: "ROUTES" }),
-                  /* @__PURE__ */ d("span", { style: { fontSize: 6, color: t.color }, children: [
+                  /* @__PURE__ */ c("span", { style: { fontSize: 6, color: t.color }, children: [
                     n,
                     " active"
                   ] })
@@ -3655,9 +3670,9 @@ function ui({
               { label: "HTTP", val: Math.round(o * 12.4), unit: "req/s" },
               { label: "HTTPS", val: Math.round(o * 8.6), unit: "req/s" },
               { label: "WS", val: Math.round(n * 3), unit: "conn" }
-            ].map((l) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
+            ].map((l) => /* @__PURE__ */ c("div", { style: { display: "flex", gap: 3 }, children: [
               /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: l.label }),
-              /* @__PURE__ */ d("span", { style: { fontSize: 6, color: t.color + "88" }, children: [
+              /* @__PURE__ */ c("span", { style: { fontSize: 6, color: t.color + "88" }, children: [
                 l.val,
                 " ",
                 l.unit
@@ -3682,13 +3697,13 @@ function ui({
     }
   );
 }
-function hi() {
-  return /* @__PURE__ */ d(
+function gi() {
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: fe,
-        height: Z,
+        width: ge,
+        height: ie,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3703,7 +3718,7 @@ function hi() {
           {
             style: {
               width: 40,
-              height: Z - 16,
+              height: ie - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3759,7 +3774,7 @@ function hi() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: Z - 16,
+              height: ie - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3770,13 +3785,13 @@ function hi() {
     }
   );
 }
-function wt({ side: t, color: i }) {
-  return /* @__PURE__ */ d(
+function kt({ side: t, color: i }) {
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: Ae,
-        height: Z,
+        width: Le,
+        height: ie,
         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"
@@ -3800,8 +3815,8 @@ function wt({ side: t, color: i }) {
           {
             style: {
               position: "absolute",
-              top: Z * 0.25,
-              bottom: Z * 0.25,
+              top: ie * 0.25,
+              bottom: ie * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -3827,14 +3842,14 @@ function wt({ side: t, color: i }) {
     }
   );
 }
-function bi({ traffic: t }) {
-  const i = Math.floor((Ae - 14) / 7);
-  return /* @__PURE__ */ d(
+function yi({ traffic: t }) {
+  const i = Math.floor((Le - 14) / 7);
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: fe,
-        height: Ae,
+        width: ge,
+        height: Le,
         background: "linear-gradient(180deg, #0c1c30 0%, #07101e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -3848,7 +3863,7 @@ function bi({ traffic: t }) {
               top: 0,
               left: 0,
               right: 0,
-              height: Ae * 0.35,
+              height: Le * 0.35,
               background: `radial-gradient(ellipse at 50% 0%,
           ${t > 70 ? "rgba(255,34,85,0.14)" : "rgba(0,229,255,0.08)"} 0%,
           transparent 70%)`
@@ -3886,7 +3901,7 @@ function bi({ traffic: t }) {
     }
   );
 }
-function pt({
+function bt({
   rotateX: t = -20,
   rotateY: i = 20,
   rotateZ: o = 0,
@@ -3896,28 +3911,28 @@ function pt({
   name: s = "WEB-DISP-01",
   traffic: l = 78,
   activeRoutes: u = 12,
-  _compact: c
+  _compact: d
 }) {
-  const [p, f] = E(i), g = _(0), h = _(0);
-  ge(() => {
+  const [p, f] = C(i), b = q(0), h = q(0);
+  de(() => {
     if (!r) {
       f(i);
       return;
     }
-    const m = (v) => {
-      h.current && f((x) => x + (v - h.current) * 0.027), h.current = v, g.current = requestAnimationFrame(m);
+    const m = (k) => {
+      h.current && f((v) => v + (k - h.current) * 0.027), h.current = k, b.current = requestAnimationFrame(m);
     };
-    return g.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(g.current), h.current = 0;
+    return b.current = requestAnimationFrame(m), () => {
+      cancelAnimationFrame(b.current), h.current = 0;
     };
   }, [r, i]);
-  const y = R[a] ?? R.online;
-  return /* @__PURE__ */ d(
+  const y = E[a] ?? E.online;
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: fe * n,
-        height: Z * n,
+        width: ge * n,
+        height: ie * n,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3937,7 +3952,7 @@ function pt({
               animation: "holo-led-blink 1.5s infinite",
               filter: `drop-shadow(0 0 10px ${a === "critical" ? "#ff2255" : "#ff8c00"})`
             },
-            children: /* @__PURE__ */ d("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
+            children: /* @__PURE__ */ c("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -3977,8 +3992,8 @@ function pt({
           {
             style: {
               position: "absolute",
-              width: fe * 1.3 * n,
-              height: Z * 2 * n,
+              width: ge * 1.3 * n,
+              height: ie * 2 * n,
               background: `radial-gradient(ellipse, ${y.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * n)}px)`,
               pointerEvents: "none",
@@ -3997,33 +4012,33 @@ function pt({
               transform: `scale(${n})`,
               transformOrigin: "center center"
             },
-            children: /* @__PURE__ */ d(
+            children: /* @__PURE__ */ c(
               "div",
               {
                 style: {
-                  width: fe,
-                  height: Z,
+                  width: ge,
+                  height: ie,
                   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: Ce.front, children: /* @__PURE__ */ e(
-                    ui,
+                  /* @__PURE__ */ e("div", { style: Te.front, children: /* @__PURE__ */ e(
+                    bi,
                     {
                       cfg: y,
                       name: s,
                       traffic: l,
                       activeRoutes: u,
-                      compact: c
+                      compact: d
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: Ce.back, children: /* @__PURE__ */ e(hi, {}) }),
-                  /* @__PURE__ */ e("div", { style: Ce.left, children: /* @__PURE__ */ e(wt, { side: "left", color: y.color }) }),
-                  /* @__PURE__ */ e("div", { style: Ce.right, children: /* @__PURE__ */ e(wt, { side: "right", color: y.color }) }),
-                  /* @__PURE__ */ e("div", { style: Ce.top, children: /* @__PURE__ */ e(bi, { traffic: l }) }),
-                  /* @__PURE__ */ e("div", { style: Ce.bottom, children: /* @__PURE__ */ e("div", { style: { width: fe, height: Ae, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: Te.back, children: /* @__PURE__ */ e(gi, {}) }),
+                  /* @__PURE__ */ e("div", { style: Te.left, children: /* @__PURE__ */ e(kt, { side: "left", color: y.color }) }),
+                  /* @__PURE__ */ e("div", { style: Te.right, children: /* @__PURE__ */ e(kt, { side: "right", color: y.color }) }),
+                  /* @__PURE__ */ e("div", { style: Te.top, children: /* @__PURE__ */ e(yi, { traffic: l }) }),
+                  /* @__PURE__ */ e("div", { style: Te.bottom, children: /* @__PURE__ */ e("div", { style: { width: ge, height: Le, background: "#020508" } }) })
                 ]
               }
             )
@@ -4033,7 +4048,7 @@ function pt({
     }
   );
 }
-function Gi({
+function Zi({
   ex: t,
   ey: i,
   compactOffset: o,
@@ -4043,17 +4058,17 @@ function Gi({
   subLabel: s,
   color: l,
   delay: u,
-  visibleAtPhase: c,
+  visibleAtPhase: d,
   traffic: p,
   activeRoutes: f,
-  dialogMetrics: g,
+  dialogMetrics: b,
   subComponents: h,
   graphSeries: y,
   alert: m
 }) {
-  const v = R[a]?.color ?? l;
+  const k = E[a]?.color ?? l;
   return /* @__PURE__ */ e(
-    I,
+    O,
     {
       ex: t,
       ey: i,
@@ -4061,30 +4076,30 @@ function Gi({
       zIndex: n,
       label: r,
       subLabel: s,
-      color: v,
+      color: k,
       delay: u,
-      visibleAtPhase: c,
+      visibleAtPhase: d,
       componentInfo: {
         type: "dispatcher",
         name: r,
         status: a,
         context: { traffic: p, activeRoutes: f },
-        dialogMetrics: g,
+        dialogMetrics: b,
         subComponents: h,
         graphSeries: y
       },
       alert: m,
-      children: /* @__PURE__ */ e(pt, { status: a, traffic: p, activeRoutes: f })
+      children: /* @__PURE__ */ e(bt, { status: a, traffic: p, activeRoutes: f })
     }
   );
 }
-const ue = 190, J = 72, Te = 120, Ee = at(ue, J, Te), St = {
+const ye = 190, ne = 72, De = 120, Oe = ct(ye, ne, De), Rt = {
   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 gi({
+function mi({
   cfg: t,
   name: i,
   queueDepth: o,
@@ -4093,13 +4108,13 @@ function gi({
   compact: a
 }) {
   const { color: s, glow: l } = t;
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: ue,
-        height: J,
-        background: a ? Ne : rt,
+        width: ye,
+        height: ne,
+        background: a ? Ue : dt,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -4121,7 +4136,7 @@ function gi({
             }
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -4170,7 +4185,7 @@ function gi({
             ]
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -4184,9 +4199,9 @@ function gi({
               gap: 10
             },
             children: [
-              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 5 }, (u, c) => {
-                const p = c < r;
-                return /* @__PURE__ */ d(
+              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 5 }, (u, d) => {
+                const p = d < r;
+                return /* @__PURE__ */ c(
                   "div",
                   {
                     style: {
@@ -4236,13 +4251,13 @@ function gi({
                             background: p ? s : "#0a1830",
                             boxShadow: p ? `0 0 5px ${s}` : "none",
                             animation: p ? "holo-led-blink 2.2s linear infinite" : "none",
-                            animationDelay: `${c * 0.28}s`
+                            animationDelay: `${d * 0.28}s`
                           }
                         }
                       )
                     ]
                   },
-                  c
+                  d
                 );
               }) }),
               /* @__PURE__ */ e(
@@ -4255,11 +4270,11 @@ function gi({
                   }
                 }
               ),
-              /* @__PURE__ */ d("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 5 }, children: [
-                /* @__PURE__ */ d("div", { children: [
-                  /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 2 }, children: [
+              /* @__PURE__ */ c("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 5 }, children: [
+                /* @__PURE__ */ c("div", { children: [
+                  /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 2 }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#2a5070", letterSpacing: "0.1em" }, children: "QUEUE" }),
-                    /* @__PURE__ */ d("span", { style: { fontSize: 6, color: s }, children: [
+                    /* @__PURE__ */ c("span", { style: { fontSize: 6, color: s }, children: [
                       o,
                       "%"
                     ] })
@@ -4289,7 +4304,7 @@ function gi({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
                   /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#2a5070", letterSpacing: "0.1em" }, children: "MSG/S" }),
                   /* @__PURE__ */ e("span", { style: { fontSize: 6, color: s }, children: n })
                 ] })
@@ -4316,9 +4331,9 @@ function gi({
               { label: "INST", val: r, unit: "conn" },
               { label: "ENQUEUE", val: Math.round(o * 2.4), unit: "msgs" },
               { label: "DISP", val: Math.round(n * 0.1), unit: "/s" }
-            ].map((u) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
+            ].map((u) => /* @__PURE__ */ c("div", { style: { display: "flex", gap: 3 }, children: [
               /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: u.label }),
-              /* @__PURE__ */ d("span", { style: { fontSize: 6, color: s + "88" }, children: [
+              /* @__PURE__ */ c("span", { style: { fontSize: 6, color: s + "88" }, children: [
                 u.val,
                 " ",
                 u.unit
@@ -4343,13 +4358,13 @@ function gi({
     }
   );
 }
-function yi() {
-  return /* @__PURE__ */ d(
+function xi() {
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: ue,
-        height: J,
+        width: ye,
+        height: ne,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -4364,7 +4379,7 @@ function yi() {
           {
             style: {
               width: 40,
-              height: J - 16,
+              height: ne - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -4420,7 +4435,7 @@ function yi() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: J - 16,
+              height: ne - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -4431,13 +4446,13 @@ function yi() {
     }
   );
 }
-function $t({ side: t, color: i }) {
-  return /* @__PURE__ */ d(
+function Ct({ side: t, color: i }) {
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: Te,
-        height: J,
+        width: De,
+        height: ne,
         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"
@@ -4461,8 +4476,8 @@ function $t({ side: t, color: i }) {
           {
             style: {
               position: "absolute",
-              top: J * 0.25,
-              bottom: J * 0.25,
+              top: ne * 0.25,
+              bottom: ne * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -4488,14 +4503,14 @@ function $t({ side: t, color: i }) {
     }
   );
 }
-function mi({ queueDepth: t, color: i }) {
-  const o = Math.floor((Te - 14) / 7);
-  return /* @__PURE__ */ d(
+function vi({ queueDepth: t, color: i }) {
+  const o = Math.floor((De - 14) / 7);
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: ue,
-        height: Te,
+        width: ye,
+        height: De,
         background: "linear-gradient(180deg, #0c1c30 0%, #07101e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -4509,7 +4524,7 @@ function mi({ queueDepth: t, color: i }) {
               top: 0,
               left: 0,
               right: 0,
-              height: Te * 0.35,
+              height: De * 0.35,
               background: `radial-gradient(ellipse at 50% 0%,
           ${t > 70 ? "rgba(255,34,85,0.14)" : `${i}15`} 0%,
           transparent 70%)`
@@ -4547,7 +4562,7 @@ function mi({ queueDepth: t, color: i }) {
     }
   );
 }
-function Tt({
+function Lt({
   rotateX: t = -20,
   rotateY: i = 20,
   rotateZ: o = 0,
@@ -4557,29 +4572,29 @@ function Tt({
   name: s = "MSG-SRV-01",
   queueDepth: l = 45,
   msgsPerSec: u = 230,
-  instances: c = 3,
+  instances: d = 3,
   _compact: p
 }) {
-  const [f, g] = E(i), h = _(0), y = _(0);
-  ge(() => {
+  const [f, b] = C(i), h = q(0), y = q(0);
+  de(() => {
     if (!r) {
-      g(i);
+      b(i);
       return;
     }
-    const v = (x) => {
-      y.current && g((S) => S + (x - y.current) * 0.027), y.current = x, h.current = requestAnimationFrame(v);
+    const k = (v) => {
+      y.current && b(($) => $ + (v - y.current) * 0.027), y.current = v, h.current = requestAnimationFrame(k);
     };
-    return h.current = requestAnimationFrame(v), () => {
+    return h.current = requestAnimationFrame(k), () => {
       cancelAnimationFrame(h.current), y.current = 0;
     };
   }, [r, i]);
-  const m = St[a] ?? St.online;
-  return /* @__PURE__ */ d(
+  const m = Rt[a] ?? Rt.online;
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
-        width: ue * n,
-        height: J * n,
+        width: ye * n,
+        height: ne * n,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -4599,7 +4614,7 @@ function Tt({
               animation: "holo-led-blink 1.5s infinite",
               filter: `drop-shadow(0 0 10px ${a === "critical" ? "#ff2255" : "#ff8c00"})`
             },
-            children: /* @__PURE__ */ d("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
+            children: /* @__PURE__ */ c("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -4639,8 +4654,8 @@ function Tt({
           {
             style: {
               position: "absolute",
-              width: ue * 1.3 * n,
-              height: J * 2 * n,
+              width: ye * 1.3 * n,
+              height: ne * 2 * n,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * n)}px)`,
               pointerEvents: "none",
@@ -4659,34 +4674,34 @@ function Tt({
               transform: `scale(${n})`,
               transformOrigin: "center center"
             },
-            children: /* @__PURE__ */ d(
+            children: /* @__PURE__ */ c(
               "div",
               {
                 style: {
-                  width: ue,
-                  height: J,
+                  width: ye,
+                  height: ne,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
-                  /* @__PURE__ */ e("div", { style: Ee.front, children: /* @__PURE__ */ e(
-                    gi,
+                  /* @__PURE__ */ e("div", { style: Oe.front, children: /* @__PURE__ */ e(
+                    mi,
                     {
                       cfg: m,
                       name: s,
                       queueDepth: l,
                       msgsPerSec: u,
-                      instances: c,
+                      instances: d,
                       compact: p
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: Ee.back, children: /* @__PURE__ */ e(yi, {}) }),
-                  /* @__PURE__ */ e("div", { style: Ee.left, children: /* @__PURE__ */ e($t, { side: "left", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: Ee.right, children: /* @__PURE__ */ e($t, { side: "right", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: Ee.top, children: /* @__PURE__ */ e(mi, { queueDepth: l, color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: Ee.bottom, children: /* @__PURE__ */ e("div", { style: { width: ue, height: Te, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: Oe.back, children: /* @__PURE__ */ e(xi, {}) }),
+                  /* @__PURE__ */ e("div", { style: Oe.left, children: /* @__PURE__ */ e(Ct, { side: "left", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: Oe.right, children: /* @__PURE__ */ e(Ct, { side: "right", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: Oe.top, children: /* @__PURE__ */ e(vi, { queueDepth: l, color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: Oe.bottom, children: /* @__PURE__ */ e("div", { style: { width: ye, height: De, background: "#020508" } }) })
                 ]
               }
             )
@@ -4696,13 +4711,13 @@ function Tt({
     }
   );
 }
-const xi = {
+const wi = {
   online: "#bb55ff",
   warning: "#ff8c00",
   critical: "#ff2255",
   offline: "#1e3a5a"
 };
-function Zi({
+function Ji({
   ex: t,
   ey: i,
   compactOffset: o,
@@ -4712,18 +4727,18 @@ function Zi({
   subLabel: s,
   color: l,
   delay: u,
-  visibleAtPhase: c,
+  visibleAtPhase: d,
   queueDepth: p,
   msgsPerSec: f,
-  instances: g,
+  instances: b,
   dialogMetrics: h,
   subComponents: y,
   graphSeries: m,
-  alert: v
+  alert: k
 }) {
-  const x = xi[a] ?? l ?? "#bb55ff";
+  const v = wi[a] ?? l ?? "#bb55ff";
   return /* @__PURE__ */ e(
-    I,
+    O,
     {
       ex: t,
       ey: i,
@@ -4731,26 +4746,26 @@ function Zi({
       zIndex: n,
       label: r,
       subLabel: s,
-      color: x,
+      color: v,
       delay: u,
-      visibleAtPhase: c,
+      visibleAtPhase: d,
       componentInfo: {
         type: "messageServer",
         name: r,
         status: a,
-        context: { queueDepth: p, msgsPerSec: f, instances: g },
+        context: { queueDepth: p, msgsPerSec: f, instances: b },
         dialogMetrics: h,
         subComponents: y,
         graphSeries: m
       },
-      alert: v,
+      alert: k,
       children: /* @__PURE__ */ e(
-        Tt,
+        Lt,
         {
           status: a,
           queueDepth: p,
           msgsPerSec: f,
-          instances: g
+          instances: b
         }
       )
     }
@@ -4762,10 +4777,10 @@ function N(t, i, o = 24) {
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * i + (Math.random() - 0.5) * 10));
   });
 }
-function vi({ data: t, color: i, height: o = 28 }) {
+function Si({ data: t, color: i, height: o = 28 }) {
   const r = o, a = Math.max(...t, 1), s = t.map((l, u) => {
-    const c = u / (t.length - 1) * 120, p = r - l / a * (r - 4) - 2;
-    return `${c},${p}`;
+    const d = u / (t.length - 1) * 120, p = r - l / a * (r - 4) - 2;
+    return `${d},${p}`;
   }).join(" ");
   return /* @__PURE__ */ e("svg", { width: 120, height: r, style: { display: "block", overflow: "visible" }, children: /* @__PURE__ */ e(
     "polyline",
@@ -4780,7 +4795,7 @@ function vi({ data: t, color: i, height: o = 28 }) {
     }
   ) });
 }
-function wi({
+function $i({
   type: t,
   name: i,
   context: o = {},
@@ -4788,8 +4803,8 @@ function wi({
   animPhase: r,
   series: a
 }) {
-  const s = n === "critical" || n === "offline" ? "#ff2255" : n === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : Si(t, o), u = r >= 0.3 ? 0 : -280, c = r >= 0.2 ? 1 : 0;
-  return /* @__PURE__ */ d(
+  const s = n === "critical" || n === "offline" ? "#ff2255" : n === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : ki(t, o), u = r >= 0.3 ? 0 : -280, d = r >= 0.2 ? 1 : 0;
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -4803,11 +4818,11 @@ function wi({
         flexDirection: "column",
         overflow: "hidden",
         transform: `translateX(${u}px)`,
-        opacity: c,
+        opacity: d,
         transition: "transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease"
       },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -4817,14 +4832,14 @@ function wi({
             },
             children: [
               /* @__PURE__ */ e("div", { style: { fontSize: 10, color: s + "cc", letterSpacing: "0.12em", fontFamily: "'Courier New', monospace" }, children: "HISTORICAL" }),
-              /* @__PURE__ */ d("div", { style: { fontSize: 12, fontWeight: 700, color: "#fff", letterSpacing: "0.06em", marginTop: 2, fontFamily: "'Courier New', monospace" }, children: [
+              /* @__PURE__ */ c("div", { style: { fontSize: 12, fontWeight: 700, color: "#fff", letterSpacing: "0.06em", marginTop: 2, fontFamily: "'Courier New', monospace" }, children: [
                 i,
                 " · Sub-components"
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { style: { flex: 1, overflowY: "auto", padding: "12px 10px", display: "flex", flexDirection: "column", gap: 16 }, children: l.map((p, f) => /* @__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__ */ c(
           "div",
           {
             style: {
@@ -4836,14 +4851,14 @@ function wi({
               opacity: r >= 0.5 ? 1 : 0
             },
             children: [
-              /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [
+              /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [
                 /* @__PURE__ */ e("span", { style: { fontSize: 9, fontWeight: 600, color: p.color, letterSpacing: "0.08em", fontFamily: "'Courier New', monospace" }, children: p.label }),
-                /* @__PURE__ */ d("span", { style: { fontSize: 8, color: p.color + "99", fontFamily: "'Courier New', monospace" }, children: [
+                /* @__PURE__ */ c("span", { style: { fontSize: 8, color: p.color + "99", fontFamily: "'Courier New', monospace" }, children: [
                   Math.round(p.data[p.data.length - 1] ?? 0),
                   p.unit
                 ] })
               ] }),
-              /* @__PURE__ */ e(vi, { data: p.data, color: p.color, height: 26 })
+              /* @__PURE__ */ e(Si, { data: p.data, color: p.color, height: 26 })
             ]
           },
           p.id
@@ -4852,7 +4867,7 @@ function wi({
     }
   );
 }
-function Si(t, i) {
+function ki(t, i) {
   if (t === "server") {
     const o = i.cpuLoad ?? 50, n = i.memLoad ?? 60;
     return [
@@ -4888,7 +4903,7 @@ function Si(t, i) {
   }
   return [];
 }
-function It({
+function Dt({
   w: t,
   h: i,
   color: o,
@@ -4897,14 +4912,14 @@ function It({
   delay: a = "0s",
   children: s
 }) {
-  const l = r ? R[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
-  return /* @__PURE__ */ d(
+  const l = r ? E[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
         width: t,
         height: i,
-        background: Ne,
+        background: Ue,
         position: "relative",
         overflow: "hidden",
         borderRadius: 2,
@@ -4938,8 +4953,8 @@ function It({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: R[r]?.color,
-              boxShadow: `0 0 6px ${R[r]?.color}`,
+              background: E[r]?.color,
+              boxShadow: `0 0 6px ${E[r]?.color}`,
               animation: "holo-led-blink 1.2s infinite"
             }
           }
@@ -4981,20 +4996,20 @@ function It({
     }
   );
 }
-function _e({
+function Ke({
   color: t = "#00e5ff",
   label: i = "CPU-0",
   status: o = "online",
   load: n = 0
 }) {
-  return /* @__PURE__ */ d("div", { style: { position: "relative", width: 52, height: 36 }, children: [
-    /* @__PURE__ */ d(
+  return /* @__PURE__ */ c("div", { style: { position: "relative", width: 52, height: 36 }, children: [
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
           width: 52,
           height: 36,
-          background: Ne,
+          background: Ue,
           position: "relative",
           borderRadius: 2,
           border: `1px solid ${t}55`,
@@ -5065,8 +5080,8 @@ function _e({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: R[o]?.color,
-                boxShadow: `0 0 6px ${R[o]?.color}`,
+                background: E[o]?.color,
+                boxShadow: `0 0 6px ${E[o]?.color}`,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -5092,14 +5107,14 @@ function _e({
     )
   ] });
 }
-function je({
+function Ge({
   color: t = "#00e5ff",
   label: i = "HEAP-0",
   status: o = "online",
   usedPercent: n = 0
 }) {
-  return /* @__PURE__ */ d("div", { style: { position: "relative", width: 28, height: 48 }, children: [
-    /* @__PURE__ */ d(
+  return /* @__PURE__ */ c("div", { style: { position: "relative", width: 28, height: 48 }, children: [
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
@@ -5163,7 +5178,7 @@ function je({
                 width: 3,
                 height: 3,
                 borderRadius: "50%",
-                background: R[o]?.color,
+                background: E[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -5189,13 +5204,13 @@ function je({
     )
   ] });
 }
-function Ie({
+function Ne({
   color: t = "#00e5ff",
   label: i = "DRIVE-1",
   status: o = "online",
   activity: n = !1
 }) {
-  return /* @__PURE__ */ d(It, { w: 56, h: 22, color: t, label: i, status: o, children: [
+  return /* @__PURE__ */ c(Dt, { w: 56, h: 22, color: t, label: i, status: o, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -5228,18 +5243,18 @@ function Ie({
     )
   ] });
 }
-function Ot({
+function Nt({
   color: t = "#00e5ff",
   label: i = "NET",
   status: o = "online"
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
         width: 48,
         height: 28,
-        background: Ne,
+        background: Ue,
         position: "relative",
         borderRadius: 2,
         border: `1px solid ${t}44`,
@@ -5297,16 +5312,16 @@ function F({
   label: i = "THREAD",
   status: o = "online"
 }) {
-  return /* @__PURE__ */ e(It, { w: 44, h: 28, color: t, label: i, status: o });
+  return /* @__PURE__ */ e(Dt, { w: 44, h: 28, color: t, label: i, status: o });
 }
-function Ye({
+function Qe({
   color: t = "#ff8c00",
   label: i = "PLATTER-0",
   status: o = "online",
   capacityPercent: n = 0
 }) {
-  return /* @__PURE__ */ d("div", { style: { position: "relative", width: 48, height: 62 }, children: [
-    /* @__PURE__ */ d(
+  return /* @__PURE__ */ c("div", { style: { position: "relative", width: 48, height: 62 }, children: [
+    /* @__PURE__ */ c(
       "div",
       {
         style: {
@@ -5357,7 +5372,7 @@ function Ye({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: R[o]?.color,
+                background: E[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -5383,12 +5398,12 @@ function Ye({
     )
   ] });
 }
-function V({
+function K({
   color: t = "#00e5ff",
   label: i = "PORT-1",
   status: o = "online"
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -5412,7 +5427,7 @@ function V({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: o && o !== "online" ? R[o]?.color ?? t : t,
+              background: o && o !== "online" ? E[o]?.color ?? t : t,
               boxShadow: `0 0 4px ${t}`,
               animation: o && o !== "online" && o !== "offline" ? "holo-led-blink 1s infinite" : "none"
             }
@@ -5453,7 +5468,7 @@ function V({
     }
   );
 }
-function $i(t, i, o, n) {
+function Ri(t, i, o, n) {
   const r = o === "online" ? "online" : o;
   return t === "server" ? [
     {
@@ -5557,8 +5572,8 @@ function $i(t, i, o, n) {
     }
   ] : [];
 }
-const W = "cubic-bezier(0.34, 1.56, 0.64, 1)", ki = "cubic-bezier(0.16, 1, 0.3, 1)";
-function Ri({ items: t, revealPhase: i }) {
+const W = "cubic-bezier(0.34, 1.56, 0.64, 1)", Ci = "cubic-bezier(0.16, 1, 0.3, 1)";
+function Ei({ items: t, revealPhase: i }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -5585,21 +5600,21 @@ function Ri({ items: t, revealPhase: i }) {
     }
   );
 }
-function Ci({
+function Pi({
   type: t,
   status: i,
   context: o,
   internal: n,
   revealPhase: r
 }) {
-  const a = R[i]?.color ?? R.online.color, s = "#ff8c00";
+  const a = E[i]?.color ?? E.online.color, s = "#ff8c00";
   if (t === "server") {
-    const l = o.cpuLoad ?? 50, u = o.memLoad ?? 60, c = [
+    const l = o.cpuLoad ?? 50, u = o.memLoad ?? 60, d = [
       {
         key: "cpu0",
         delay: 0,
         el: /* @__PURE__ */ e(
-          _e,
+          Ke,
           {
             color: a,
             label: "CPU-0",
@@ -5613,7 +5628,7 @@ function Ci({
         key: "cpu1",
         delay: 1,
         el: /* @__PURE__ */ e(
-          _e,
+          Ke,
           {
             color: a,
             label: "CPU-1",
@@ -5627,7 +5642,7 @@ function Ci({
         key: "heap0",
         delay: 2,
         el: /* @__PURE__ */ e(
-          je,
+          Ge,
           {
             color: "#8855ee",
             label: "HEAP-0",
@@ -5641,7 +5656,7 @@ function Ci({
         key: "heap1",
         delay: 3,
         el: /* @__PURE__ */ e(
-          je,
+          Ge,
           {
             color: "#8855ee",
             label: "HEAP-1",
@@ -5654,13 +5669,13 @@ function Ci({
       {
         key: "d1",
         delay: 4,
-        el: /* @__PURE__ */ e(Ie, { color: a, label: "DRIVE-1", status: n[4]?.status, activity: !0 })
+        el: /* @__PURE__ */ e(Ne, { color: a, label: "DRIVE-1", status: n[4]?.status, activity: !0 })
       },
       {
         key: "d2",
         delay: 5,
         el: /* @__PURE__ */ e(
-          Ie,
+          Ne,
           {
             color: a,
             label: "DRIVE-2",
@@ -5673,7 +5688,7 @@ function Ci({
         key: "d3",
         delay: 6,
         el: /* @__PURE__ */ e(
-          Ie,
+          Ne,
           {
             color: a,
             label: "DRIVE-3",
@@ -5690,7 +5705,7 @@ function Ci({
       {
         key: "net",
         delay: 8,
-        el: /* @__PURE__ */ e(Ot, { color: a, label: "NET", status: n[8]?.status })
+        el: /* @__PURE__ */ e(Nt, { color: a, label: "NET", status: n[8]?.status })
       }
     ];
     return /* @__PURE__ */ e(
@@ -5704,7 +5719,7 @@ function Ci({
           alignItems: "center",
           padding: 24
         },
-        children: c.map(({ key: p, delay: f, el: g }) => /* @__PURE__ */ e(
+        children: d.map(({ key: p, delay: f, el: b }) => /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -5712,7 +5727,7 @@ function Ci({
               transform: `scale(${r >= 0.2 + f * 0.08 ? 1 : 0.6})`,
               transition: `opacity 0.4s ${W} ${f * 0.06}s, transform 0.45s ${W} ${f * 0.06}s`
             },
-            children: g
+            children: b
           },
           p
         ))
@@ -5720,22 +5735,22 @@ function Ci({
     );
   }
   if (t === "dispatcher") {
-    const l = Array.from({ length: 8 }, (u, c) => {
-      const p = n[c];
+    const l = Array.from({ length: 8 }, (u, d) => {
+      const p = n[d];
       return /* @__PURE__ */ e(
         "div",
         {
           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 ${W} ${c * 0.04}s, transform 0.4s ${W} ${c * 0.04}s`
+            opacity: r >= 0.25 + d * 0.04 ? 1 : 0,
+            transform: `scale(${r >= 0.25 + d * 0.04 ? 1 : 0.5})`,
+            transition: `opacity 0.35s ${W} ${d * 0.04}s, transform 0.4s ${W} ${d * 0.04}s`
           },
-          children: /* @__PURE__ */ e(V, { color: a, label: `PORT-${c + 1}`, status: p?.status })
+          children: /* @__PURE__ */ e(K, { color: a, label: `PORT-${d + 1}`, status: p?.status })
         },
-        `p${c}`
+        `p${d}`
       );
     });
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ c(
       "div",
       {
         style: {
@@ -5747,7 +5762,7 @@ function Ci({
         },
         children: [
           /* @__PURE__ */ e("div", { style: { display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }, children: l }),
-          /* @__PURE__ */ d("div", { style: { display: "flex", gap: 16 }, children: [
+          /* @__PURE__ */ c("div", { style: { display: "flex", gap: 16 }, children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -5776,7 +5791,7 @@ function Ci({
     );
   }
   if (t === "messageServer")
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ c(
       "div",
       {
         style: {
@@ -5796,7 +5811,7 @@ function Ci({
                 transform: `scale(${r >= 0.25 + l * 0.1 ? 1 : 0.6})`,
                 transition: `all 0.4s ${W} ${l * 0.08}s`
               },
-              children: /* @__PURE__ */ e(V, { color: "#bb55ff", label: `INST-${l}`, status: n[l]?.status })
+              children: /* @__PURE__ */ e(K, { color: "#bb55ff", label: `INST-${l}`, status: n[l]?.status })
             },
             l
           )),
@@ -5835,7 +5850,7 @@ function Ci({
     );
   if (t === "database") {
     const l = o.capacity ?? 72;
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ c(
       "div",
       {
         style: {
@@ -5856,7 +5871,7 @@ function Ci({
                 transition: `all 0.45s ${W} ${u * 0.1}s`
               },
               children: /* @__PURE__ */ e(
-                Ye,
+                Qe,
                 {
                   color: s,
                   label: `PLATTER-${u}`,
@@ -5895,7 +5910,7 @@ function Ci({
   }
   return null;
 }
-function Ji({
+function en({
   type: t,
   name: i,
   status: o,
@@ -5905,8 +5920,8 @@ function Ji({
   subComponents: s,
   graphSeries: l
 }) {
-  const u = $i(t, i, o, a), c = R[o]?.color ?? R.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", g = r >= 0.2 ? "50%" : "0%", h = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
-  return /* @__PURE__ */ d(
+  const u = Ri(t, i, o, a), d = E[o]?.color ?? E.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", b = r >= 0.2 ? "50%" : "0%", h = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -5929,13 +5944,13 @@ function Ji({
               backdropFilter: "blur(10px)",
               WebkitBackdropFilter: "blur(10px)",
               opacity: p,
-              transition: `opacity 0.4s ${ki}`
+              transition: `opacity 0.4s ${Ci}`
             },
             onClick: n
           }
         ),
         /* @__PURE__ */ e(
-          wi,
+          $i,
           {
             type: t,
             name: i,
@@ -5945,7 +5960,7 @@ function Ji({
             series: l
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -5958,7 +5973,7 @@ function Ji({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ c(
                 "div",
                 {
                   style: {
@@ -5976,7 +5991,7 @@ function Ji({
                           width: "50%",
                           height: "100%",
                           background: "linear-gradient(90deg, rgba(2, 8, 20, 0.98) 0%, rgba(2, 12, 28, 0.95) 100%)",
-                          borderRight: `2px solid ${c}44`,
+                          borderRight: `2px solid ${d}44`,
                           boxShadow: "4px 0 32px rgba(0,0,0,0.6)",
                           transform: `translateX(${f})`,
                           transition: `transform 0.7s ${W}`
@@ -5991,9 +6006,9 @@ function Ji({
                           height: "100%",
                           marginLeft: "auto",
                           background: "linear-gradient(90deg, rgba(2, 12, 28, 0.95) 0%, rgba(2, 8, 20, 0.98) 100%)",
-                          borderLeft: `2px solid ${c}44`,
+                          borderLeft: `2px solid ${d}44`,
                           boxShadow: "-4px 0 32px rgba(0,0,0,0.6)",
-                          transform: `translateX(${g})`,
+                          transform: `translateX(${b})`,
                           transition: `transform 0.7s ${W}`
                         }
                       }
@@ -6001,7 +6016,7 @@ function Ji({
                   ]
                 }
               ),
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ c(
                 "div",
                 {
                   style: {
@@ -6011,29 +6026,29 @@ function Ji({
                     maxWidth: 520,
                     minHeight: 320,
                     background: "linear-gradient(180deg, rgba(4, 14, 28, 0.6) 0%, rgba(2, 8, 18, 0.85) 100%)",
-                    border: `1px solid ${c}33`,
+                    border: `1px solid ${d}33`,
                     borderRadius: 12,
-                    boxShadow: `0 0 40px ${c}18, inset 0 0 60px rgba(0,0,0,0.4)`,
+                    boxShadow: `0 0 40px ${d}18, inset 0 0 60px rgba(0,0,0,0.4)`,
                     display: "flex",
                     flexDirection: "column",
                     opacity: h >= 0.1 ? 1 : 0,
                     transition: `opacity 0.5s ${W} 0.2s`
                   },
                   children: [
-                    /* @__PURE__ */ d(
+                    /* @__PURE__ */ c(
                       "div",
                       {
                         style: {
                           padding: "12px 20px",
-                          borderBottom: `1px solid ${c}22`,
+                          borderBottom: `1px solid ${d}22`,
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "space-between",
-                          background: `linear-gradient(180deg, ${c}11 0%, transparent 100%)`,
+                          background: `linear-gradient(180deg, ${d}11 0%, transparent 100%)`,
                           borderRadius: "12px 12px 0 0"
                         },
                         children: [
-                          /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                          /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
                             /* @__PURE__ */ e(
                               "div",
                               {
@@ -6041,13 +6056,13 @@ function Ji({
                                   width: 8,
                                   height: 8,
                                   borderRadius: "50%",
-                                  background: c,
-                                  boxShadow: `0 0 10px ${c}`,
+                                  background: d,
+                                  boxShadow: `0 0 10px ${d}`,
                                   animation: o === "warning" || o === "critical" ? "holo-led-blink 1.5s infinite" : "none"
                                 }
                               }
                             ),
-                            /* @__PURE__ */ d(
+                            /* @__PURE__ */ c(
                               "span",
                               {
                                 style: {
@@ -6072,9 +6087,9 @@ function Ji({
                                 width: 32,
                                 height: 32,
                                 borderRadius: 6,
-                                border: `1px solid ${c}44`,
+                                border: `1px solid ${d}44`,
                                 background: "rgba(0,0,0,0.4)",
-                                color: c,
+                                color: d,
                                 fontSize: 18,
                                 cursor: "pointer",
                                 display: "flex",
@@ -6098,15 +6113,15 @@ function Ji({
                           left: 0,
                           right: 0,
                           height: 1,
-                          background: `linear-gradient(90deg, transparent 5%, ${c}88 50%, transparent 95%)`,
-                          boxShadow: `0 0 8px ${c}`,
+                          background: `linear-gradient(90deg, transparent 5%, ${d}88 50%, transparent 95%)`,
+                          boxShadow: `0 0 8px ${d}`,
                           animation: "holo-scan 3s linear infinite",
                           pointerEvents: "none"
                         }
                       }
                     ),
-                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(Ri, { items: s, revealPhase: h }) : /* @__PURE__ */ e(
-                      Ci,
+                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(Ei, { items: s, revealPhase: h }) : /* @__PURE__ */ e(
+                      Pi,
                       {
                         type: t,
                         name: i,
@@ -6126,17 +6141,17 @@ function Ji({
     }
   );
 }
-function Ei({ onSubmit: t }) {
-  const [i, o] = E(""), [n, r] = E(""), [a, s] = E(null), [l, u] = E(!1), c = i.trim().length > 0 && n.trim().length > 0;
-  return /* @__PURE__ */ e("div", { className: "cred-overlay", children: /* @__PURE__ */ d("form", { className: "cred-panel", onSubmit: (f) => {
-    f.preventDefault(), c && t({ accessKey: i.trim(), secretKey: n.trim() });
+function Ai({ onSubmit: t }) {
+  const [i, o] = C(""), [n, r] = C(""), [a, s] = C(null), [l, u] = C(!1), d = i.trim().length > 0 && n.trim().length > 0;
+  return /* @__PURE__ */ e("div", { className: "cred-overlay", children: /* @__PURE__ */ c("form", { className: "cred-panel", onSubmit: (f) => {
+    f.preventDefault(), d && t({ accessKey: i.trim(), secretKey: n.trim() });
   }, onClick: (f) => f.stopPropagation(), children: [
     /* @__PURE__ */ e("div", { className: "cred-scanline" }),
     /* @__PURE__ */ e("span", { className: "cred-corner cred-corner--tl" }),
     /* @__PURE__ */ e("span", { className: "cred-corner cred-corner--tr" }),
     /* @__PURE__ */ e("span", { className: "cred-corner cred-corner--bl" }),
     /* @__PURE__ */ e("span", { className: "cred-corner cred-corner--br" }),
-    /* @__PURE__ */ e("div", { className: "cred-icon", children: /* @__PURE__ */ d(
+    /* @__PURE__ */ e("div", { className: "cred-icon", children: /* @__PURE__ */ c(
       "svg",
       {
         width: "32",
@@ -6153,7 +6168,7 @@ function Ei({ onSubmit: t }) {
     ) }),
     /* @__PURE__ */ e("div", { className: "cred-title", children: "DATA SOURCE ACCESS" }),
     /* @__PURE__ */ e("div", { className: "cred-subtitle", children: "AUTHENTICATION REQUIRED" }),
-    /* @__PURE__ */ d("div", { className: "cred-field", children: [
+    /* @__PURE__ */ c("div", { className: "cred-field", children: [
       /* @__PURE__ */ e("label", { className: "cred-label", children: "ACCESS KEY" }),
       /* @__PURE__ */ e(
         "input",
@@ -6173,7 +6188,7 @@ function Ei({ onSubmit: t }) {
         }
       )
     ] }),
-    /* @__PURE__ */ d("div", { className: "cred-field", children: [
+    /* @__PURE__ */ c("div", { className: "cred-field", children: [
       /* @__PURE__ */ e("label", { className: "cred-label", children: "SECRET KEY" }),
       /* @__PURE__ */ e(
         "input",
@@ -6192,18 +6207,18 @@ function Ei({ onSubmit: t }) {
         }
       )
     ] }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "button",
       {
         className: "cred-btn",
         type: "submit",
-        disabled: !c,
+        disabled: !d,
         onMouseEnter: () => u(!0),
         onMouseLeave: () => u(!1),
         style: {
-          opacity: c ? 1 : 0.35,
-          cursor: c ? "pointer" : "not-allowed",
-          ...l && c ? {
+          opacity: d ? 1 : 0.35,
+          cursor: d ? "pointer" : "not-allowed",
+          ...l && d ? {
             background: "rgba(0,229,255,0.12)",
             boxShadow: "0 0 20px rgba(0,229,255,0.3), inset 0 0 12px rgba(0,229,255,0.08)"
           } : {}
@@ -6217,28 +6232,28 @@ function Ei({ onSubmit: t }) {
     /* @__PURE__ */ e("div", { className: "cred-footer", children: "CREDENTIALS ARE STORED IN MEMORY ONLY" })
   ] }) });
 }
-const ft = Qe(null);
-function Pi() {
-  const t = be(ft);
+const gt = et(null);
+function Ti() {
+  const t = xe(gt);
   if (!t)
     throw new Error("useAIOpsData must be used within an AIOPsDashboard with dataEndpoint configured");
   return t;
 }
-function Ai() {
-  return be(ft);
+function Oi() {
+  return xe(gt);
 }
-function en(t) {
-  const { data: i } = Pi();
+function tn(t) {
+  const { data: i } = Ti();
   return i[t] ?? null;
 }
-function Ti(t) {
+function Ii(t) {
   const i = /* @__PURE__ */ new Set();
   for (const o of Object.values(t))
     for (const n of Object.values(o))
       i.add(typeof n == "string" ? n : n.query);
   return Array.from(i);
 }
-function Ii(t) {
+function Li(t) {
   if (typeof t == "number") return t;
   if (typeof t == "string") {
     const i = Number(t);
@@ -6246,56 +6261,56 @@ function Ii(t) {
   }
   return t;
 }
-function Oi({ config: t, children: i }) {
-  const [o, n] = E({}), [r, a] = E(null), [s, l] = E(!1), [u, c] = E(null), [p, f] = E(null), g = _(t);
-  g.current = t;
-  const h = _(r);
+function Di({ config: t, children: i }) {
+  const [o, n] = C({}), [r, a] = C(null), [s, l] = C(!1), [u, d] = C(null), [p, f] = C(null), b = q(t);
+  b.current = t;
+  const h = q(r);
   h.current = r;
-  const y = Ve(async () => {
-    const x = h.current, S = g.current;
-    if (x) {
+  const y = _e(async () => {
+    const v = h.current, $ = b.current;
+    if (v) {
       l(!0);
       try {
-        const b = await Promise.allSettled(
-          S.queries.map((k) => {
-            const M = S.endpoint.includes("?") ? "&" : "?", L = `${S.endpoint}${M}query=${encodeURIComponent(k)}`;
-            return fetch(L, {
+        const g = await Promise.allSettled(
+          $.queries.map((w) => {
+            const I = $.endpoint.includes("?") ? "&" : "?", H = `${$.endpoint}${I}query=${encodeURIComponent(w)}`;
+            return fetch(H, {
               method: "GET",
               headers: {
-                "access-key": x.accessKey,
-                "access-secret-key": x.secretKey
+                "access-key": v.accessKey,
+                "access-secret-key": v.secretKey
               }
-            }).then((H) => {
-              if (!H.ok) throw new Error(`HTTP ${H.status}`);
-              return H.text();
-            }).then((H) => ({ query: k, data: H.trim() }));
+            }).then((D) => {
+              if (!D.ok) throw new Error(`HTTP ${D.status}`);
+              return D.text();
+            }).then((D) => ({ query: w, data: D.trim() }));
           })
-        ), P = {};
-        let O = 0;
-        for (const k of b)
-          k.status === "fulfilled" ? P[k.value.query] = k.value.data : O++;
-        n((k) => ({ ...k, ...P }));
-        const $ = S.queries.length;
-        c(
-          O > 0 ? `${O} of ${$} queries failed to refresh` : null
-        ), O < $ && f(/* @__PURE__ */ new Date());
-      } catch (b) {
-        const P = b instanceof Error ? b.message : "Refresh failed";
-        c(P);
+        ), R = {};
+        let A = 0;
+        for (const w of g)
+          w.status === "fulfilled" ? R[w.value.query] = w.value.data : A++;
+        n((w) => ({ ...w, ...R }));
+        const L = $.queries.length;
+        d(
+          A > 0 ? `${A} of ${L} queries failed to refresh` : null
+        ), A < L && f(/* @__PURE__ */ new Date());
+      } catch (g) {
+        const R = g instanceof Error ? g.message : "Refresh failed";
+        d(R);
       } finally {
         l(!1);
       }
     }
   }, []);
-  ge(() => {
+  de(() => {
     if (!r) return;
     y();
-    const x = g.current.refreshInterval ?? 6e4, S = window.setInterval(y, x);
-    return () => clearInterval(S);
+    const v = b.current.refreshInterval ?? 6e4, $ = window.setInterval(y, v);
+    return () => clearInterval($);
   }, [r, y]);
-  const m = Ve((x) => {
-    a(x);
-  }, []), v = {
+  const m = _e((v) => {
+    a(v);
+  }, []), k = {
     data: o,
     isRefreshing: s,
     lastRefreshError: u,
@@ -6303,30 +6318,35 @@ function Oi({ config: t, children: i }) {
     credentialsSet: !!r,
     setCredentials: m
   };
-  return /* @__PURE__ */ d(ft.Provider, { value: v, children: [
+  return /* @__PURE__ */ c(gt.Provider, { value: k, children: [
     i,
-    !r && /* @__PURE__ */ e(Ei, { onSubmit: m })
+    !r && /* @__PURE__ */ e(Ai, { onSubmit: m })
   ] });
 }
-function tn(t) {
-  const { dataEndpoint: i, dataBindings: o, dataRefreshInterval: n } = t;
+function nn(t) {
+  const { dataEndpoint: i, dataBindings: o, dataRefreshInterval: n, serviceDataBindings: r } = t;
   if (i && o) {
-    const r = Ti(o);
+    const a = Ii(o), s = [];
+    if (r)
+      for (const u of Object.values(r))
+        for (const d of u)
+          a.includes(d.query) || s.push(d.query);
+    const l = [...a, ...s];
     return /* @__PURE__ */ e(
-      Oi,
+      Di,
       {
         config: {
           endpoint: i,
-          queries: r,
+          queries: l,
           refreshInterval: n
         },
-        children: /* @__PURE__ */ e(kt, { ...t })
+        children: /* @__PURE__ */ e(Et, { ...t })
       }
     );
   }
-  return /* @__PURE__ */ e(kt, { ...t });
+  return /* @__PURE__ */ e(Et, { ...t });
 }
-function kt({
+function Et({
   brandName: t = "BUSAUD AIOps",
   brandTag: i = "3D MONITOR",
   services: o = [],
@@ -6336,41 +6356,60 @@ function kt({
   fontFamily: s,
   dataBindings: l,
   dataTransform: u,
-  children: c
+  serviceDataBindings: d,
+  children: p
 }) {
-  const p = Ai(), [f] = E(20), [g] = E(!1), [h] = E(!0), [y] = E(0.45), [m] = E(3.3), [v, x] = E("compact"), [S, b] = E(0), [P, O] = E(null), [$, k] = E(null), [M, L] = E(0), H = (A) => {
-    v === "compact" && (O(A), x("expanding"), b(0), setTimeout(() => b(1), 50), setTimeout(() => b(2), 800), setTimeout(() => b(3), 1200), setTimeout(() => b(4), 1600), setTimeout(() => b(5), 2e3), setTimeout(() => {
-      b(6), x("expanded");
+  const f = Oi(), [b] = C(20), [h] = C(!1), [y] = C(!0), [m] = C(0.45), [k] = C(3.3), [v, $] = C("compact"), [g, R] = C(0), [A, L] = C(null), [w, I] = C(null), [H, D] = C(0), [ee, ce] = C(0), pe = (x) => {
+    v === "compact" && (L(x), $("expanding"), R(0), setTimeout(() => R(1), 50), setTimeout(() => R(2), 800), setTimeout(() => R(3), 1200), setTimeout(() => R(4), 1600), setTimeout(() => R(5), 2e3), setTimeout(() => {
+      R(6), $("expanded");
     }, 2400));
-  }, j = () => {
-    $ ? (k(null), L(0)) : v === "expanded" && (x("collapsing"), b(0), O(null), setTimeout(() => {
-      x((A) => A === "collapsing" ? "compact" : A);
+  }, se = () => {
+    w ? (I(null), D(0)) : v === "expanded" && ($("collapsing"), R(0), L(null), setTimeout(() => {
+      $((x) => x === "collapsing" ? "compact" : x);
     }, 1e3));
-  }, le = (A) => {
-    k(A), L(0);
-  };
-  U.useEffect(() => {
-    if (!$) return;
-    const A = performance.now(), ne = 1200, X = () => {
-      const oe = performance.now() - A, K = Math.min(1, oe / ne);
-      L(K), K < 1 && requestAnimationFrame(X);
-    }, Q = requestAnimationFrame(X);
-    return () => cancelAnimationFrame(Q);
-  }, [$]);
-  const se = () => {
-    k(null), L(0);
-  }, ee = o.find((A) => A.name === P), ye = ee?.status ?? "online", me = ee?.dbSync ?? !0, xe = ee?.metrics, w = ee?.alerts, C = u ?? Ii, D = p?.data, te = ze(() => !D || !l ? c : U.Children.map(c, (A) => {
-    if (!U.isValidElement(A)) return A;
-    const ne = A.props.name;
-    if (!ne || !l[ne]) return A;
-    const X = l[ne], Q = {};
-    for (const [oe, K] of Object.entries(X)) {
-      const We = typeof K == "string" ? K : K.query, Ke = typeof K == "object" && K.transform ? K.transform : C, ce = D[We];
-      ce !== void 0 && (Q[oe] = Ke(ce));
+  }, ve = (x) => {
+    I(x), D(0), ce((V) => V + 1);
+  }, we = _e((x) => {
+    I((V) => !V || V.name !== x.name ? V : x);
+  }, []);
+  X.useEffect(() => {
+    if (!w || ee === 0) return;
+    const x = performance.now(), V = 1200, ae = () => {
+      const j = performance.now() - x, B = Math.min(1, j / V);
+      D(B), B < 1 && requestAnimationFrame(ae);
+    }, _ = requestAnimationFrame(ae);
+    return () => cancelAnimationFrame(_);
+  }, [ee]);
+  const Se = () => {
+    I(null), D(0);
+  }, G = o.find((x) => x.name === A), S = G?.status ?? "online", P = G?.dbSync ?? !0, M = G?.alerts, Y = f?.data, Z = u ?? Li, Q = Be(() => {
+    if (!Y || !d) return null;
+    const x = {};
+    for (const [V, ae] of Object.entries(d))
+      x[V] = ae.map((_) => {
+        const j = Y[_.query];
+        let B;
+        if (_.transform)
+          B = j !== void 0 ? _.transform(j) : "—";
+        else {
+          const He = j !== void 0 ? Z(j) : void 0;
+          B = He !== void 0 ? String(He) : "—";
+        }
+        return { label: _.label, value: _.unit ? `${B}${_.unit}` : B, color: _.color ?? "#00e5ff" };
+      });
+    return x;
+  }, [Y, d, Z]), z = A && Q?.[A] || G?.metrics, oe = Be(() => !Y || !l ? p : X.Children.map(p, (x) => {
+    if (!X.isValidElement(x)) return x;
+    const V = x.props.name;
+    if (!V || !l[V]) return x;
+    const ae = l[V], _ = {};
+    for (const [j, B] of Object.entries(ae)) {
+      const He = typeof B == "string" ? B : B.query, Ee = typeof B == "object" && B.transform ? B.transform : Z, Ye = Y[He];
+      Ye !== void 0 && (_[j] = Ee(Ye));
     }
-    return Object.keys(Q).length > 0 ? U.cloneElement(A, Q) : A;
-  }), [c, D, l, C]), ae = p?.lastRefreshError ?? null, Y = 330, z = 340, ie = $ ? 1.15 : 1, ve = $ ? -($.ex - Y) * 0.06 : 0, de = $ ? -($.ey - z) * 0.06 : 0;
-  return /* @__PURE__ */ d("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
+    return Object.keys(_).length > 0 ? X.cloneElement(x, _) : x;
+  }), [p, Y, l, Z]), fe = f?.lastRefreshError ?? null, ue = 330, he = 340, Fe = w ? 1.15 : 1, Ce = w ? -(w.ex - ue) * 0.06 : 0, re = w ? -(w.ey - he) * 0.06 : 0;
+  return /* @__PURE__ */ c("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -6384,18 +6423,18 @@ function kt({
           backgroundPosition: "center center",
           backgroundRepeat: "no-repeat",
           transition: "transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
-          transform: `translate(${ve}px, ${de}px) scale(${ie})`,
+          transform: `translate(${Ce}px, ${re}px) scale(${Fe})`,
           willChange: "transform"
         }
       }
     ),
-    /* @__PURE__ */ d("header", { className: "app-header", children: [
-      /* @__PURE__ */ d("div", { className: "hdr-brand", children: [
+    /* @__PURE__ */ c("header", { className: "app-header", children: [
+      /* @__PURE__ */ c("div", { className: "hdr-brand", children: [
         /* @__PURE__ */ e("span", { className: "brand-pulse" }),
         /* @__PURE__ */ e("span", { className: "brand-text", children: t })
       ] }),
-      /* @__PURE__ */ d("div", { className: "hdr-right", children: [
-        ae && /* @__PURE__ */ d("div", { className: "hdr-refresh-error", children: [
+      /* @__PURE__ */ c("div", { className: "hdr-right", children: [
+        fe && /* @__PURE__ */ c("div", { className: "hdr-refresh-error", children: [
           /* @__PURE__ */ e("span", { className: "refresh-error-dot" }),
           /* @__PURE__ */ e("span", { className: "refresh-error-text", children: "DATA REFRESH FAILED" })
         ] }),
@@ -6409,31 +6448,32 @@ function kt({
         style: {
           cursor: v === "expanded" ? "zoom-out" : "default"
         },
-        onClick: j,
+        onClick: se,
         children: /* @__PURE__ */ e(
-          Gt,
+          Jt,
           {
             viewState: v,
-            animPhase: S,
-            selectedSystem: P,
-            selectedComponent: $,
-            drillAnimPhase: M,
-            rotateY: f,
-            autoRotateComponents: g,
-            componentScale: y,
-            drillZoom: m,
-            autoRotateCarousel: h,
+            animPhase: g,
+            selectedSystem: A,
+            selectedComponent: w,
+            drillAnimPhase: H,
+            rotateY: b,
+            autoRotateComponents: h,
+            componentScale: m,
+            drillZoom: k,
+            autoRotateCarousel: y,
             carouselSpeed: a,
             logoUrl: r,
-            onSelectSystem: H,
-            onBackgroundClick: j,
-            onComponentClick: le,
-            onCloseDrill: se,
-            selectedSystemStatus: ye,
-            selectedSystemDbSync: me,
-            selectedSystemMetrics: xe,
-            selectedSystemAlerts: w,
-            children: te
+            onSelectSystem: pe,
+            onBackgroundClick: se,
+            onComponentClick: ve,
+            onComponentDataUpdate: we,
+            onCloseDrill: Se,
+            selectedSystemStatus: S,
+            selectedSystemDbSync: P,
+            selectedSystemMetrics: z,
+            selectedSystemAlerts: M,
+            children: oe
           }
         )
       }
@@ -6446,24 +6486,24 @@ function T(t, i, o = 24) {
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * i + (Math.random() - 0.5) * 10));
   });
 }
-function Lt(t) {
+function Wt(t) {
   return t === "critical" || t === "offline" ? "#ff2255" : t === "warning" ? "#ff8c00" : "#00e5ff";
 }
-function Oe(t, i, o) {
-  const n = t === "online" ? "online" : t, r = Lt(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = n === "critical" || n === "warning" && a > 80 ? n : "online", u = n === "warning" && s > 85 ? "warning" : n === "critical" ? "critical" : "online", c = n === "critical" && i === "APP-03" ? "critical" : "online", p = n === "offline" ? "offline" : "online";
+function We(t, i, o) {
+  const n = t === "online" ? "online" : t, r = Wt(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = n === "critical" || n === "warning" && a > 80 ? n : "online", u = n === "warning" && s > 85 ? "warning" : n === "critical" ? "critical" : "online", d = n === "critical" && i === "APP-03" ? "critical" : "online", p = n === "offline" ? "offline" : "online";
   return [
-    { id: "cpu-0", label: "CPU-0", status: l, detail: n === "critical" ? "Core overload" : n === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(_e, { color: r, label: "CPU-0", status: l, load: a }) },
-    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(_e, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
-    { id: "heap-0", label: "HEAP-0", status: u, detail: u === "warning" ? "Memory heap usage" : u === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(je, { color: "#8855ee", label: "HEAP-0", status: u, usedPercent: s }) },
-    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(je, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
-    { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(Ie, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
-    { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(Ie, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
-    { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(Ie, { 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(F, { color: r, label: "THREAD-POOL", status: c }) },
-    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(Ot, { color: r, label: "NET", status: p }) }
+    { id: "cpu-0", label: "CPU-0", status: l, detail: n === "critical" ? "Core overload" : n === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(Ke, { color: r, label: "CPU-0", status: l, load: a }) },
+    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(Ke, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
+    { id: "heap-0", label: "HEAP-0", status: u, detail: u === "warning" ? "Memory heap usage" : u === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(Ge, { color: "#8855ee", label: "HEAP-0", status: u, usedPercent: s }) },
+    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(Ge, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
+    { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(Ne, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
+    { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(Ne, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
+    { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(Ne, { color: r, label: "DRIVE-3", status: "online", activity: a > 50 }) },
+    { id: "thread-pool", label: "THREAD-POOL", status: d, detail: d === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(F, { color: r, label: "THREAD-POOL", status: d }) },
+    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(Nt, { color: r, label: "NET", status: p }) }
   ];
 }
-function Le(t) {
+function Me(t) {
   const i = t?.cpuLoad ?? 50, o = t?.memLoad ?? 60;
   return [
     { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: T(i, 15) },
@@ -6476,22 +6516,22 @@ function Le(t) {
     { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: T(55, 20) }
   ];
 }
-function Dt(t, i, o) {
-  const n = t === "online" ? "online" : t, r = Lt(t), a = n === "critical" || n === "offline" ? n : "online", s = n === "warning" ? "warning" : "online", l = n === "critical" ? "critical" : "online";
+function Mt(t, i, o) {
+  const n = t === "online" ? "online" : t, r = Wt(t), a = n === "critical" || n === "offline" ? n : "online", s = n === "warning" ? "warning" : "online", l = n === "critical" ? "critical" : "online";
   return [
-    { id: "port-1", label: "PORT-1", status: "online", element: /* @__PURE__ */ e(V, { color: r, label: "PORT-1", status: "online" }) },
-    { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(V, { color: r, label: "PORT-2", status: "online" }) },
-    { id: "port-3", label: "PORT-3", status: a, detail: n === "critical" ? "Gateway timeout" : n === "offline" ? "Unreachable" : void 0, element: /* @__PURE__ */ e(V, { color: r, label: "PORT-3", status: a }) },
-    { id: "port-4", label: "PORT-4", status: "online", element: /* @__PURE__ */ e(V, { color: r, label: "PORT-4", status: "online" }) },
-    { id: "port-5", label: "PORT-5", status: s, detail: s === "warning" ? "Latency spike" : void 0, element: /* @__PURE__ */ e(V, { color: r, label: "PORT-5", status: s }) },
-    { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(V, { color: r, label: "PORT-6", status: "online" }) },
-    { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(V, { color: r, label: "PORT-7", status: "online" }) },
-    { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(V, { color: r, label: "PORT-8", status: "online" }) },
+    { id: "port-1", label: "PORT-1", status: "online", element: /* @__PURE__ */ e(K, { color: r, label: "PORT-1", status: "online" }) },
+    { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(K, { color: r, label: "PORT-2", status: "online" }) },
+    { id: "port-3", label: "PORT-3", status: a, detail: n === "critical" ? "Gateway timeout" : n === "offline" ? "Unreachable" : void 0, element: /* @__PURE__ */ e(K, { color: r, label: "PORT-3", status: a }) },
+    { id: "port-4", label: "PORT-4", status: "online", element: /* @__PURE__ */ e(K, { color: r, label: "PORT-4", status: "online" }) },
+    { id: "port-5", label: "PORT-5", status: s, detail: s === "warning" ? "Latency spike" : void 0, element: /* @__PURE__ */ e(K, { color: r, label: "PORT-5", status: s }) },
+    { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(K, { color: r, label: "PORT-6", status: "online" }) },
+    { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(K, { color: r, label: "PORT-7", status: "online" }) },
+    { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(K, { 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(F, { color: r, label: "HTTP-WORKER", status: l }) },
     { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(F, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
   ];
 }
-function Nt(t) {
+function zt(t) {
   const i = t?.traffic ?? 50;
   return [
     { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: T(i, 20) },
@@ -6501,19 +6541,19 @@ function Nt(t) {
     { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: T(i * 0.9, 15) }
   ];
 }
-function Li(t, i, o) {
+function Ni(t, i, o) {
   const n = t === "online" ? "online" : t, r = n === "critical" ? "critical" : "online", a = n === "critical" || n === "offline" ? n : n === "warning" ? "warning" : "online", s = n === "critical" ? "critical" : "online";
   return [
-    { id: "inst-0", label: "INST-0", status: "online", element: /* @__PURE__ */ e(V, { color: "#bb55ff", label: "INST-0", status: "online" }) },
-    { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(V, { 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(V, { color: "#bb55ff", label: "INST-2", status: r }) },
+    { id: "inst-0", label: "INST-0", status: "online", element: /* @__PURE__ */ e(K, { color: "#bb55ff", label: "INST-0", status: "online" }) },
+    { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(K, { 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(K, { color: "#bb55ff", label: "INST-2", status: r }) },
     { id: "queue-0", label: "QUEUE-0", status: a, detail: n === "critical" ? "Queue full" : n === "offline" ? "Unreachable" : n === "warning" ? "Queue depth warning" : void 0, element: /* @__PURE__ */ e(F, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
     { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(F, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
     { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(F, { 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(F, { color: "#bb55ff", label: "WORKER-3", status: s }) }
   ];
 }
-function Di(t) {
+function Wi(t) {
   const i = t?.queueDepth ?? 50;
   return [
     { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: T(i, 20) },
@@ -6523,17 +6563,17 @@ function Di(t) {
     { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: T(i * 0.9, 15) }
   ];
 }
-function Xe(t, i, o) {
-  const n = t === "online" ? "online" : t, r = "#ff8c00", a = o?.capacity ?? 72, s = n === "critical" || n === "offline" ? n : n === "warning" ? "warning" : "online", l = n === "warning" && i === "DB-STB" ? "warning" : "online", u = n === "critical" ? "critical" : "online", c = n === "warning" ? "warning" : "online";
+function Ze(t, i, o) {
+  const n = t === "online" ? "online" : t, r = "#ff8c00", a = o?.capacity ?? 72, s = n === "critical" || n === "offline" ? n : n === "warning" ? "warning" : "online", l = n === "warning" && i === "DB-STB" ? "warning" : "online", u = n === "critical" ? "critical" : "online", d = n === "warning" ? "warning" : "online";
   return [
-    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Ye, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
-    { id: "platter-1", label: "PLATTER-1", status: s, detail: n === "critical" ? "I/O failure" : n === "offline" ? "Connection lost" : n === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Ye, { 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(Ye, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
+    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Qe, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
+    { id: "platter-1", label: "PLATTER-1", status: s, detail: n === "critical" ? "I/O failure" : n === "offline" ? "Connection lost" : n === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Qe, { 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(Qe, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
     { id: "conn-pool", label: "CONN-POOL", status: u, detail: u === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(F, { color: r, label: "CONN-POOL", status: u }) },
-    { id: "query-cache", label: "QUERY-CACHE", status: c, detail: c === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(F, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
+    { id: "query-cache", label: "QUERY-CACHE", status: d, detail: d === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(F, { color: "#00ff88", label: "QUERY-CACHE", status: d }) }
   ];
 }
-function qe(t) {
+function Je(t) {
   const i = t?.capacity ?? 70;
   return [
     { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: T(40, 20) },
@@ -6543,7 +6583,7 @@ function qe(t) {
     { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: T(75, 12) }
   ];
 }
-function ut(t) {
+function yt(t) {
   const i = [
     t.wdStatus,
     t.msStatus,
@@ -6555,8 +6595,8 @@ function ut(t) {
   ];
   return i.includes("critical") ? "critical" : i.includes("warning") ? "warning" : i.includes("offline") ? "offline" : "online";
 }
-function nn(t) {
-  const i = ut(t), o = i === "critical" || i === "offline", n = i === "warning";
+function on(t) {
+  const i = yt(t), o = i === "critical" || i === "offline", n = i === "warning";
   return [
     {
       label: "Uptime",
@@ -6577,8 +6617,8 @@ function nn(t) {
     }
   ];
 }
-function on(t) {
-  const i = ut(t), o = i === "critical" || i === "offline", n = i === "warning";
+function rn(t) {
+  const i = yt(t), o = i === "critical" || i === "offline", n = i === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -6586,7 +6626,7 @@ function on(t) {
     ...!o && !n && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
 }
-const Ni = [
+const Mi = [
   { from: [330, 120], to: [220, 260], visibleAtPhase: 3 },
   { from: [330, 120], to: [440, 260], visibleAtPhase: 3 },
   { from: [220, 260], to: [165, 390], visibleAtPhase: 4 },
@@ -6599,11 +6639,11 @@ const Ni = [
   { from: [330, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" },
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
-function Wi({ config: t }) {
-  const i = U.useContext($e), o = i?.rotateY ?? 20, n = i?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: u, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
-  return /* @__PURE__ */ d(De, { children: [
+function zi({ config: t }) {
+  const i = X.useContext(Re), o = i?.rotateY ?? 20, n = i?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: u, pdbStatus: d, sdbStatus: p, dbSync: f } = t;
+  return /* @__PURE__ */ c(ze, { children: [
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 330,
         ey: 120,
@@ -6611,11 +6651,11 @@ function Wi({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(ct, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(ht, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 220,
         ey: 260,
@@ -6630,11 +6670,11 @@ function Wi({ config: t }) {
           name: "WEB-DISP",
           status: r,
           context: { traffic: 78 },
-          subComponents: Dt(r),
-          graphSeries: Nt({ traffic: 78 })
+          subComponents: Mt(r),
+          graphSeries: zt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          pt,
+          bt,
           {
             rotateY: o,
             autoRotate: n,
@@ -6648,7 +6688,7 @@ function Wi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 440,
         ey: 260,
@@ -6663,11 +6703,11 @@ function Wi({ config: t }) {
           name: "MSG-SRV",
           status: a,
           context: { queueDepth: 45 },
-          subComponents: Li(a),
-          graphSeries: Di({ queueDepth: 45 })
+          subComponents: Ni(a),
+          graphSeries: Wi({ queueDepth: 45 })
         },
         children: /* @__PURE__ */ e(
-          Tt,
+          Lt,
           {
             rotateY: -o,
             autoRotate: n,
@@ -6682,7 +6722,7 @@ function Wi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 165,
         ey: 390,
@@ -6697,11 +6737,11 @@ function Wi({ config: t }) {
           name: "APP-01",
           status: s,
           context: { cpuLoad: 67, memLoad: 72 },
-          subComponents: Oe(s, "APP-01", { cpuLoad: 67, memLoad: 72 }),
-          graphSeries: Le({ cpuLoad: 67, memLoad: 72 })
+          subComponents: We(s, "APP-01", { cpuLoad: 67, memLoad: 72 }),
+          graphSeries: Me({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          Se,
+          ke,
           {
             rotateY: o,
             autoRotate: n,
@@ -6715,7 +6755,7 @@ function Wi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 330,
         ey: 390,
@@ -6730,11 +6770,11 @@ function Wi({ config: t }) {
           name: "APP-02",
           status: l,
           context: { cpuLoad: 89, memLoad: 91 },
-          subComponents: Oe(l, "APP-02", { cpuLoad: 89, memLoad: 91 }),
-          graphSeries: Le({ cpuLoad: 89, memLoad: 91 })
+          subComponents: We(l, "APP-02", { cpuLoad: 89, memLoad: 91 }),
+          graphSeries: Me({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          Se,
+          ke,
           {
             rotateY: o,
             autoRotate: n,
@@ -6748,7 +6788,7 @@ function Wi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 495,
         ey: 390,
@@ -6763,11 +6803,11 @@ function Wi({ config: t }) {
           name: "APP-03",
           status: u,
           context: { cpuLoad: 45, memLoad: 63 },
-          subComponents: Oe(u, "APP-03", { cpuLoad: 45, memLoad: 63 }),
-          graphSeries: Le({ cpuLoad: 45, memLoad: 63 })
+          subComponents: We(u, "APP-03", { cpuLoad: 45, memLoad: 63 }),
+          graphSeries: Me({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          Se,
+          ke,
           {
             rotateY: o,
             autoRotate: n,
@@ -6781,7 +6821,7 @@ function Wi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 200,
         ey: 520,
@@ -6794,17 +6834,17 @@ function Wi({ config: t }) {
         componentInfo: {
           type: "database",
           name: "DB-PRI",
-          status: c,
+          status: d,
           context: { capacity: 72 },
-          subComponents: Xe(c, "DB-PRI", { capacity: 72 }),
-          graphSeries: qe({ capacity: 72 })
+          subComponents: Ze(d, "DB-PRI", { capacity: 72 }),
+          graphSeries: Je({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Be,
+          je,
           {
             rotateY: -o,
             autoRotate: n,
-            status: c,
+            status: d,
             name: "DB-PRI",
             capacity: 72,
             connections: 284,
@@ -6814,7 +6854,7 @@ function Wi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 460,
         ey: 520,
@@ -6829,11 +6869,11 @@ function Wi({ config: t }) {
           name: "DB-STB",
           status: p,
           context: { capacity: 72 },
-          subComponents: Xe(p, "DB-STB", { capacity: 72 }),
-          graphSeries: qe({ capacity: 72 })
+          subComponents: Ze(p, "DB-STB", { capacity: 72 }),
+          graphSeries: Je({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Be,
+          je,
           {
             rotateY: o,
             autoRotate: n,
@@ -6847,7 +6887,7 @@ function Wi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 330,
         ey: 520,
@@ -6856,17 +6896,17 @@ function Wi({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(At, { synced: f, latencyMs: f ? 8 : 342 })
+        children: /* @__PURE__ */ e(It, { synced: f, latencyMs: f ? 8 : 342 })
       }
     ),
-    /* @__PURE__ */ e(Mi, { config: t })
+    /* @__PURE__ */ e(Bi, { config: t })
   ] });
 }
-function Mi({ config: t }) {
-  const i = U.useContext($e), { wdStatus: o, msStatus: n, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: u, dbSync: c } = t, p = i?.isSelected && i?.isExpandedPos;
-  return i?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
+function Bi({ config: t }) {
+  const i = X.useContext(Re), { wdStatus: o, msStatus: n, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: u, dbSync: d } = t, p = i?.isSelected && i?.isExpandedPos;
+  return i?.isSelected ? /* @__PURE__ */ c("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 220,
         ey: 260,
@@ -6881,7 +6921,7 @@ function Mi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 440,
         ey: 260,
@@ -6896,7 +6936,7 @@ function Mi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 165,
         ey: 390,
@@ -6911,7 +6951,7 @@ function Mi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 330,
         ey: 390,
@@ -6926,7 +6966,7 @@ function Mi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 495,
         ey: 390,
@@ -6941,7 +6981,7 @@ function Mi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 200,
         ey: 520,
@@ -6956,7 +6996,7 @@ function Mi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 460,
         ey: 520,
@@ -6970,8 +7010,8 @@ function Mi({ config: t }) {
         internalRef: u !== "online" ? "PLATTER-2" : void 0
       }
     ),
-    !c && /* @__PURE__ */ e(
-      B,
+    !d && /* @__PURE__ */ e(
+      U,
       {
         ex: 330,
         ey: 520,
@@ -6987,19 +7027,19 @@ function Mi({ config: t }) {
     )
   ] }) : null;
 }
-function rn({ config: t, ...i }) {
+function an({ config: t, ...i }) {
   return /* @__PURE__ */ e(
-    Ct,
+    At,
     {
       name: t.name,
-      status: ut(t),
-      connections: Ni,
+      status: yt(t),
+      connections: Mi,
       ...i,
-      children: /* @__PURE__ */ e(Wi, { config: t })
+      children: /* @__PURE__ */ e(zi, { config: t })
     }
   );
 }
-function ht(t) {
+function mt(t) {
   const i = [
     t.dispStatus,
     t.srv1Status,
@@ -7010,8 +7050,8 @@ function ht(t) {
   ];
   return i.includes("critical") ? "critical" : i.includes("warning") ? "warning" : i.includes("offline") ? "offline" : "online";
 }
-function an(t) {
-  const i = ht(t), o = i === "critical" || i === "offline", n = i === "warning";
+function ln(t) {
+  const i = mt(t), o = i === "critical" || i === "offline", n = i === "warning";
   return [
     {
       label: "Uptime",
@@ -7032,8 +7072,8 @@ function an(t) {
     }
   ];
 }
-function ln(t) {
-  const i = ht(t), o = i === "critical" || i === "offline", n = i === "warning";
+function sn(t) {
+  const i = mt(t), o = i === "critical" || i === "offline", n = i === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -7041,7 +7081,7 @@ function ln(t) {
     ...!o && !n && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
 }
-const zi = [
+const Ui = [
   { from: [330, 120], to: [330, 260], visibleAtPhase: 3 },
   { from: [330, 260], to: [165, 390], visibleAtPhase: 4 },
   { from: [330, 260], to: [330, 390], visibleAtPhase: 4 },
@@ -7050,11 +7090,11 @@ const zi = [
   { from: [330, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" },
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
-function Bi({ config: t }) {
-  const i = U.useContext($e), o = i?.rotateY ?? 20, n = i?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: u, sdbStatus: c, dbSync: p } = t;
-  return /* @__PURE__ */ d(De, { children: [
+function Fi({ config: t }) {
+  const i = X.useContext(Re), o = i?.rotateY ?? 20, n = i?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: u, sdbStatus: d, dbSync: p } = t;
+  return /* @__PURE__ */ c(ze, { children: [
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 330,
         ey: 120,
@@ -7062,11 +7102,11 @@ function Bi({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(ct, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(ht, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 330,
         ey: 260,
@@ -7081,11 +7121,11 @@ function Bi({ config: t }) {
           name: "DISP-01",
           status: r,
           context: { traffic: 78 },
-          subComponents: Dt(r),
-          graphSeries: Nt({ traffic: 78 })
+          subComponents: Mt(r),
+          graphSeries: zt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          pt,
+          bt,
           {
             rotateY: o,
             autoRotate: n,
@@ -7099,7 +7139,7 @@ function Bi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 165,
         ey: 390,
@@ -7114,11 +7154,11 @@ function Bi({ config: t }) {
           name: "APP-01",
           status: a,
           context: { cpuLoad: 67, memLoad: 72 },
-          subComponents: Oe(a, "APP-01", { cpuLoad: 67, memLoad: 72 }),
-          graphSeries: Le({ cpuLoad: 67, memLoad: 72 })
+          subComponents: We(a, "APP-01", { cpuLoad: 67, memLoad: 72 }),
+          graphSeries: Me({ cpuLoad: 67, memLoad: 72 })
         },
         children: /* @__PURE__ */ e(
-          Se,
+          ke,
           {
             rotateY: o,
             autoRotate: n,
@@ -7132,7 +7172,7 @@ function Bi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 330,
         ey: 390,
@@ -7147,11 +7187,11 @@ function Bi({ config: t }) {
           name: "APP-02",
           status: s,
           context: { cpuLoad: 89, memLoad: 91 },
-          subComponents: Oe(s, "APP-02", { cpuLoad: 89, memLoad: 91 }),
-          graphSeries: Le({ cpuLoad: 89, memLoad: 91 })
+          subComponents: We(s, "APP-02", { cpuLoad: 89, memLoad: 91 }),
+          graphSeries: Me({ cpuLoad: 89, memLoad: 91 })
         },
         children: /* @__PURE__ */ e(
-          Se,
+          ke,
           {
             rotateY: o,
             autoRotate: n,
@@ -7165,7 +7205,7 @@ function Bi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 495,
         ey: 390,
@@ -7180,11 +7220,11 @@ function Bi({ config: t }) {
           name: "APP-03",
           status: l,
           context: { cpuLoad: 45, memLoad: 63 },
-          subComponents: Oe(l, "APP-03", { cpuLoad: 45, memLoad: 63 }),
-          graphSeries: Le({ cpuLoad: 45, memLoad: 63 })
+          subComponents: We(l, "APP-03", { cpuLoad: 45, memLoad: 63 }),
+          graphSeries: Me({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
-          Se,
+          ke,
           {
             rotateY: o,
             autoRotate: n,
@@ -7198,7 +7238,7 @@ function Bi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 200,
         ey: 520,
@@ -7213,11 +7253,11 @@ function Bi({ config: t }) {
           name: "DB-PRI",
           status: u,
           context: { capacity: 72 },
-          subComponents: Xe(u, "DB-PRI", { capacity: 72 }),
-          graphSeries: qe({ capacity: 72 })
+          subComponents: Ze(u, "DB-PRI", { capacity: 72 }),
+          graphSeries: Je({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Be,
+          je,
           {
             rotateY: -o,
             autoRotate: n,
@@ -7231,7 +7271,7 @@ function Bi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 460,
         ey: 520,
@@ -7244,17 +7284,17 @@ function Bi({ config: t }) {
         componentInfo: {
           type: "database",
           name: "DB-STB",
-          status: c,
+          status: d,
           context: { capacity: 72 },
-          subComponents: Xe(c, "DB-STB", { capacity: 72 }),
-          graphSeries: qe({ capacity: 72 })
+          subComponents: Ze(d, "DB-STB", { capacity: 72 }),
+          graphSeries: Je({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Be,
+          je,
           {
             rotateY: o,
             autoRotate: n,
-            status: c,
+            status: d,
             name: "DB-STB",
             capacity: 72,
             connections: 0,
@@ -7264,7 +7304,7 @@ function Bi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      I,
+      O,
       {
         ex: 330,
         ey: 520,
@@ -7273,17 +7313,17 @@ function Bi({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(At, { synced: p, latencyMs: p ? 8 : 342 })
+        children: /* @__PURE__ */ e(It, { synced: p, latencyMs: p ? 8 : 342 })
       }
     ),
-    /* @__PURE__ */ e(Fi, { config: t })
+    /* @__PURE__ */ e(Hi, { config: t })
   ] });
 }
-function Fi({ config: t }) {
-  const i = U.useContext($e), { dispStatus: o, srv1Status: n, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: u } = t, c = i?.isSelected && i?.isExpandedPos;
-  return i?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
+function Hi({ config: t }) {
+  const i = X.useContext(Re), { dispStatus: o, srv1Status: n, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: u } = t, d = i?.isSelected && i?.isExpandedPos;
+  return i?.isSelected ? /* @__PURE__ */ c("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 330,
         ey: 260,
@@ -7293,12 +7333,12 @@ function Fi({ config: t }) {
         offsetX: -90,
         offsetY: -40,
         align: "left",
-        isVisible: !!c,
+        isVisible: !!d,
         internalRef: o !== "online" ? "PORT-3" : void 0
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 165,
         ey: 390,
@@ -7308,12 +7348,12 @@ function Fi({ config: t }) {
         offsetX: -110,
         offsetY: -30,
         align: "left",
-        isVisible: !!c,
+        isVisible: !!d,
         internalRef: n !== "online" ? "CPU-0" : void 0
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 330,
         ey: 390,
@@ -7323,12 +7363,12 @@ function Fi({ config: t }) {
         offsetX: 100,
         offsetY: -80,
         align: "right",
-        isVisible: !!c,
+        isVisible: !!d,
         internalRef: r !== "online" ? "HEAP-0" : void 0
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 495,
         ey: 390,
@@ -7338,12 +7378,12 @@ function Fi({ config: t }) {
         offsetX: 110,
         offsetY: -30,
         align: "right",
-        isVisible: !!c,
+        isVisible: !!d,
         internalRef: a !== "online" ? "THREAD-POOL" : void 0
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 200,
         ey: 520,
@@ -7353,12 +7393,12 @@ function Fi({ config: t }) {
         offsetX: -110,
         offsetY: 30,
         align: "left",
-        isVisible: !!c,
+        isVisible: !!d,
         internalRef: s !== "online" ? s === "critical" ? "CONN-POOL" : "QUERY-CACHE" : void 0
       }
     ),
     /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 460,
         ey: 520,
@@ -7368,12 +7408,12 @@ function Fi({ config: t }) {
         offsetX: 110,
         offsetY: 30,
         align: "right",
-        isVisible: !!c,
+        isVisible: !!d,
         internalRef: l !== "online" ? "PLATTER-2" : void 0
       }
     ),
     !u && /* @__PURE__ */ e(
-      B,
+      U,
       {
         ex: 330,
         ey: 520,
@@ -7383,86 +7423,86 @@ function Fi({ config: t }) {
         offsetX: 0,
         offsetY: 60,
         align: "bottom",
-        isVisible: !!c,
+        isVisible: !!d,
         internalRef: "PLATTER-2"
       }
     )
   ] }) : null;
 }
-function sn({ config: t, ...i }) {
+function dn({ config: t, ...i }) {
   return /* @__PURE__ */ e(
-    Ct,
+    At,
     {
       name: t.name,
-      status: ht(t),
-      connections: zi,
+      status: mt(t),
+      connections: Ui,
       ...i,
-      children: /* @__PURE__ */ e(Bi, { config: t })
+      children: /* @__PURE__ */ e(Fi, { config: t })
     }
   );
 }
 export {
-  tn as AIOPsDashboard,
-  _e as CPU3D,
-  Gt as Carousel,
-  lt as CarouselContext,
-  st as CarouselItemContext,
-  qt as ComponentDialog,
-  Ji as ComponentDrillView,
-  Oi as DataProvider,
-  Be as Database3D,
-  Qi as DatabaseNode,
-  Ie as DriveBay3D,
-  zi as EXCHANGE_CONNECTIONS,
-  sn as ExchangeService,
-  _i as HOLO_BLUE,
-  Vi as HOLO_CYAN,
-  rt as HOLO_GLASS,
-  Ne as HOLO_SURFACE,
-  wi as HistoricalGraphPanel,
-  ei as HoloBase,
-  ct as Human3D,
-  Ki as HumanNode,
-  je as Memory3D,
-  Tt as MessageServer3D,
-  Zi as MessageServerNode,
-  Ot as NetworkBlock3D,
-  B as NodeCallout,
-  Ye as Platter3D,
-  V as Port3D,
-  rn as SAPService,
-  Ni as SAP_CONNECTIONS,
-  R as STATUS_CFG,
-  Se as Server3D,
-  qi as ServerNode,
-  Ct as Service,
-  $e as ServiceContext,
-  jt as ServiceDialog,
-  I as ServiceNode,
-  Zt as SvgConnection,
-  At as SyncBridge,
+  nn as AIOPsDashboard,
+  Ke as CPU3D,
+  Jt as Carousel,
+  pt as CarouselContext,
+  ft as CarouselItemContext,
+  Kt as ComponentDialog,
+  en as ComponentDrillView,
+  Di as DataProvider,
+  je as Database3D,
+  Ki as DatabaseNode,
+  Ne as DriveBay3D,
+  Ui as EXCHANGE_CONNECTIONS,
+  dn as ExchangeService,
+  ji as HOLO_BLUE,
+  _i as HOLO_CYAN,
+  dt as HOLO_GLASS,
+  Ue as HOLO_SURFACE,
+  $i as HistoricalGraphPanel,
+  ii as HoloBase,
+  ht as Human3D,
+  Gi as HumanNode,
+  Ge as Memory3D,
+  Lt as MessageServer3D,
+  Ji as MessageServerNode,
+  Nt as NetworkBlock3D,
+  U as NodeCallout,
+  Qe as Platter3D,
+  K as Port3D,
+  an as SAPService,
+  Mi as SAP_CONNECTIONS,
+  E as STATUS_CFG,
+  ke as Server3D,
+  Qi as ServerNode,
+  At as Service,
+  Re as ServiceContext,
+  qt as ServiceDialog,
+  O as ServiceNode,
+  ei as SvgConnection,
+  It as SyncBridge,
   F as ThreadPool3D,
-  pt as WebDispatcher3D,
-  Gi as WebDispatcherNode,
-  ln as computeExchangeDialogAlerts,
-  an as computeExchangeDialogMetrics,
-  ht as computeExchangeServiceStatus,
-  on as computeSAPDialogAlerts,
-  nn as computeSAPDialogMetrics,
-  ut as computeSAPServiceStatus,
-  Ii as defaultDataTransform,
-  qe as getDatabaseGraphSeries,
-  Xe as getDatabaseSubComponents,
-  Nt as getDispatcherGraphSeries,
-  Dt as getDispatcherSubComponents,
-  Di as getMessageServerGraphSeries,
-  Li as getMessageServerSubComponents,
-  Le as getServerGraphSeries,
-  Oe as getServerSubComponents,
-  at as makeFaceStyles,
-  Pi as useAIOpsData,
-  Ai as useAIOpsDataOptional,
-  ji as useCarouselContext,
-  Xi as useCarouselItemContext,
-  en as useQueryResult
+  bt as WebDispatcher3D,
+  Zi as WebDispatcherNode,
+  sn as computeExchangeDialogAlerts,
+  ln as computeExchangeDialogMetrics,
+  mt as computeExchangeServiceStatus,
+  rn as computeSAPDialogAlerts,
+  on as computeSAPDialogMetrics,
+  yt as computeSAPServiceStatus,
+  Li as defaultDataTransform,
+  Je as getDatabaseGraphSeries,
+  Ze as getDatabaseSubComponents,
+  zt as getDispatcherGraphSeries,
+  Mt as getDispatcherSubComponents,
+  Wi as getMessageServerGraphSeries,
+  Ni as getMessageServerSubComponents,
+  Me as getServerGraphSeries,
+  We as getServerSubComponents,
+  ct as makeFaceStyles,
+  Ti as useAIOpsData,
+  Oi as useAIOpsDataOptional,
+  Xi as useCarouselContext,
+  qi as useCarouselItemContext,
+  tn as useQueryResult
 };