react-aiops 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs as d, jsx as e, Fragment as Ce } from "react/jsx-runtime";
-import J, { createContext as _e, useContext as ve, useState as T, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
+import J, { createContext as Xe, useContext as ve, useState as A, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
 const Tt = {
   info: { color: "#00ff88", bg: "rgba(0, 255, 136, 0.1)", border: "#00ff88", icon: "✅" },
   warning: { color: "#ff8c00", bg: "rgba(255, 140, 0, 0.1)", border: "#ff8c00", icon: "⚠️" },
@@ -13,7 +13,7 @@ function At({
   metrics: r,
   alerts: a
 }) {
-  const s = n === "critical" || n === "offline", l = n === "warning", h = r ?? [
+  const s = n === "critical" || n === "offline", l = n === "warning", f = r ?? [
     {
       label: "Uptime",
       value: s ? "92.14%" : "99.98%",
@@ -115,10 +115,10 @@ function At({
               fontSize: 13,
               color: "#a0b0c0"
             },
-            children: h.map((p, f) => /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            children: f.map((p, h) => /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
               /* @__PURE__ */ e("span", { children: p.label }),
               /* @__PURE__ */ e("span", { style: { color: p.color }, children: p.value })
-            ] }, f))
+            ] }, h))
           }
         ),
         /* @__PURE__ */ d(
@@ -145,7 +145,7 @@ function At({
                   children: "SYSTEM ALERTS"
                 }
               ),
-              c.map((p, f) => {
+              c.map((p, h) => {
                 const b = Tt[p.level];
                 return /* @__PURE__ */ d(
                   "div",
@@ -167,7 +167,7 @@ function At({
                       /* @__PURE__ */ e("span", { children: p.message })
                     ]
                   },
-                  f
+                  h
                 );
               })
             ]
@@ -177,13 +177,13 @@ function At({
     }
   );
 }
-const w = {
+const S = {
   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)" }
-}, yi = "#00e5ff", mi = "#0055cc", we = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", je = "linear-gradient(180deg, rgba(10,25,50,0.35) 0%, rgba(5,15,35,0.25) 60%, rgba(3,10,20,0.15) 100%)";
-function Xe(t, n, o) {
+}, yi = "#00e5ff", mi = "#0055cc", we = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", Qe = "linear-gradient(180deg, rgba(10,25,50,0.35) 0%, rgba(5,15,35,0.25) 60%, rgba(3,10,20,0.15) 100%)";
+function qe(t, n, o) {
   const i = {
     position: "absolute",
     overflow: "hidden",
@@ -233,14 +233,14 @@ function Xe(t, n, o) {
     }
   };
 }
-const Ue = "cubic-bezier(0.34, 1.56, 0.64, 1)", Ye = "cubic-bezier(0.16, 1, 0.3, 1)";
-function at(t) {
-  return w[t]?.color ?? w.online.color;
+const Ve = "cubic-bezier(0.34, 1.56, 0.64, 1)", _e = "cubic-bezier(0.16, 1, 0.3, 1)";
+function st(t) {
+  return S[t]?.color ?? S.online.color;
 }
 function Lt(t, n, o) {
   return t >= o ? "#ff2255" : t >= n ? "#ff8c00" : "#00e5ff";
 }
-function Me(t, n, o, i) {
+function Fe(t, n, o, i) {
   return t === "offline" ? "offline" : t === "critical" && n >= i ? "critical" : (t === "critical" || t === "warning") && n >= o ? "warning" : "online";
 }
 function It({
@@ -250,18 +250,18 @@ function It({
   sceneWidth: i = 660,
   sceneHeight: r = 600
 }) {
-  const { type: a, name: s, status: l, ex: h, ey: c, context: p = {} } = t, f = at(l), b = h >= i / 2, g = c >= r / 2, u = {
+  const { type: a, name: s, status: l, ex: f, ey: c, context: p = {} } = t, h = st(l), b = f >= i / 2, u = c >= r / 2, g = {
     position: "fixed",
     ...b ? { right: 28 } : { left: 28 },
-    ...g ? { bottom: 110 } : { top: 72 }
-  }, m = b ? 40 : -40, S = g ? 30 : -30, y = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, x = p.capacity ?? 72, W = Me(l, y, 70, 85), M = Me(l, k, 75, 88), P = Me(l, x, 75, 90), Y = [
+    ...u ? { bottom: 110 } : { top: 72 }
+  }, m = b ? 40 : -40, x = u ? 30 : -30, w = p.cpuLoad ?? p.traffic ?? 50, P = p.memLoad ?? p.queueDepth ?? 60, y = p.capacity ?? 72, D = Fe(l, w, 70, 85), B = Fe(l, P, 75, 88), k = Fe(l, y, 75, 90), V = [
     {
       id: "cpu",
       label: a === "dispatcher" ? "TRAFFIC" : a === "messageServer" ? "QUEUE" : "CPU",
       sublabel: a === "dispatcher" ? "PORT LOAD" : a === "messageServer" ? "QUEUE DEPTH" : "PROCESSOR",
-      value: y,
+      value: w,
       unit: "%",
-      status: W,
+      status: D,
       icon: "cpu",
       delay: 0
     },
@@ -269,9 +269,9 @@ function It({
       id: "mem",
       label: "MEMORY",
       sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
-      value: k,
+      value: P,
       unit: "%",
-      status: M,
+      status: B,
       icon: "mem",
       delay: 1
     },
@@ -279,9 +279,9 @@ function It({
       id: "storage",
       label: "STORAGE",
       sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
-      value: x,
+      value: y,
       unit: "%",
-      status: P,
+      status: k,
       icon: "disk",
       delay: 2
     }
@@ -290,22 +290,22 @@ function It({
     "div",
     {
       style: {
-        ...u,
+        ...g,
         width: 420,
         background: "linear-gradient(170deg, rgba(2, 10, 22, 0.96) 0%, rgba(2, 6, 14, 0.98) 100%)",
         backdropFilter: "blur(20px)",
         WebkitBackdropFilter: "blur(20px)",
-        border: `1.5px solid ${f}44`,
+        border: `1.5px solid ${h}44`,
         borderRadius: 14,
         fontFamily: "'Courier New', monospace",
         overflow: "hidden",
         opacity: o ? 1 : 0,
-        transform: o ? "scale(1) translate(0, 0)" : `scale(0.7) translate(${m}px, ${S}px)`,
-        transition: `opacity 0.45s ${Ye}, transform 0.55s ${Ue}`,
+        transform: o ? "scale(1) translate(0, 0)" : `scale(0.7) translate(${m}px, ${x}px)`,
+        transition: `opacity 0.45s ${_e}, transform 0.55s ${Ve}`,
         pointerEvents: o ? "auto" : "none",
         zIndex: 9999,
         animation: o ? "comp-dialog-border-glow 3s ease-in-out infinite" : "none",
-        "--dialog-color": f
+        "--dialog-color": h
       },
       onClick: (v) => v.stopPropagation(),
       children: [
@@ -318,8 +318,8 @@ function It({
               left: 0,
               right: 0,
               height: 2,
-              background: `linear-gradient(90deg, transparent 2%, ${f}aa 30%, #fff 50%, ${f}aa 70%, transparent 98%)`,
-              boxShadow: `0 0 12px ${f}, 0 0 24px ${f}44`,
+              background: `linear-gradient(90deg, transparent 2%, ${h}aa 30%, #fff 50%, ${h}aa 70%, transparent 98%)`,
+              boxShadow: `0 0 12px ${h}, 0 0 24px ${h}44`,
               animation: o ? "holo-scan 3.5s linear infinite" : "none",
               pointerEvents: "none",
               zIndex: 10
@@ -333,8 +333,8 @@ function It({
               position: "absolute",
               inset: 0,
               backgroundImage: `
-            linear-gradient(${f}06 1px, transparent 1px),
-            linear-gradient(90deg, ${f}06 1px, transparent 1px)
+            linear-gradient(${h}06 1px, transparent 1px),
+            linear-gradient(90deg, ${h}06 1px, transparent 1px)
           `,
               backgroundSize: "20px 20px",
               pointerEvents: "none",
@@ -346,37 +346,37 @@ function It({
           {
             top: 0,
             left: 0,
-            borderTop: `2px solid ${f}66`,
-            borderLeft: `2px solid ${f}66`,
+            borderTop: `2px solid ${h}66`,
+            borderLeft: `2px solid ${h}66`,
             borderRadius: "14px 0 0 0"
           },
           {
             top: 0,
             right: 0,
-            borderTop: `2px solid ${f}66`,
-            borderRight: `2px solid ${f}66`,
+            borderTop: `2px solid ${h}66`,
+            borderRight: `2px solid ${h}66`,
             borderRadius: "0 14px 0 0"
           },
           {
             bottom: 0,
             left: 0,
-            borderBottom: `2px solid ${f}66`,
-            borderLeft: `2px solid ${f}66`,
+            borderBottom: `2px solid ${h}66`,
+            borderLeft: `2px solid ${h}66`,
             borderRadius: "0 0 0 14px"
           },
           {
             bottom: 0,
             right: 0,
-            borderBottom: `2px solid ${f}66`,
-            borderRight: `2px solid ${f}66`,
+            borderBottom: `2px solid ${h}66`,
+            borderRight: `2px solid ${h}66`,
             borderRadius: "0 0 14px 0"
           }
-        ].map((v, L) => /* @__PURE__ */ e(
+        ].map((v, W) => /* @__PURE__ */ e(
           "div",
           {
             style: { position: "absolute", width: 18, height: 18, pointerEvents: "none", ...v }
           },
-          L
+          W
         )),
         /* @__PURE__ */ d(
           "div",
@@ -386,8 +386,8 @@ function It({
               alignItems: "center",
               justifyContent: "space-between",
               padding: "18px 22px",
-              borderBottom: `1px solid ${f}22`,
-              background: `linear-gradient(180deg, ${f}12 0%, transparent 100%)`,
+              borderBottom: `1px solid ${h}22`,
+              background: `linear-gradient(180deg, ${h}12 0%, transparent 100%)`,
               position: "relative",
               zIndex: 2
             },
@@ -401,8 +401,8 @@ function It({
                         width: 10,
                         height: 10,
                         borderRadius: "50%",
-                        background: f,
-                        boxShadow: `0 0 12px ${f}, 0 0 24px ${f}66`,
+                        background: h,
+                        boxShadow: `0 0 12px ${h}, 0 0 24px ${h}66`,
                         animation: l === "warning" || l === "critical" ? "holo-led-blink 1.5s infinite" : "none"
                       }
                     }
@@ -414,7 +414,7 @@ function It({
                         position: "absolute",
                         inset: -4,
                         borderRadius: "50%",
-                        border: `1px solid ${f}44`,
+                        border: `1px solid ${h}44`,
                         animation: l === "warning" || l === "critical" ? "holo-ring-pulse 2s ease-in-out infinite" : "none"
                       }
                     }
@@ -427,13 +427,13 @@ function It({
                       style: {
                         fontSize: 16,
                         fontWeight: 700,
-                        color: f,
+                        color: h,
                         letterSpacing: "0.12em",
                         textTransform: "uppercase",
                         whiteSpace: "nowrap",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
-                        textShadow: `0 0 10px ${f}88, 0 0 20px ${f}44`
+                        textShadow: `0 0 10px ${h}88, 0 0 20px ${h}44`
                       },
                       children: s
                     }
@@ -443,7 +443,7 @@ function It({
                     {
                       style: {
                         fontSize: 9,
-                        color: `${f}88`,
+                        color: `${h}88`,
                         letterSpacing: "0.2em",
                         textTransform: "uppercase"
                       },
@@ -462,9 +462,9 @@ function It({
                     width: 34,
                     height: 34,
                     borderRadius: 8,
-                    border: `1px solid ${f}44`,
-                    background: `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${f}08 100%)`,
-                    color: f,
+                    border: `1px solid ${h}44`,
+                    background: `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${h}08 100%)`,
+                    color: h,
                     fontSize: 18,
                     cursor: "pointer",
                     display: "flex",
@@ -475,10 +475,10 @@ function It({
                     flexShrink: 0
                   },
                   onMouseEnter: (v) => {
-                    v.currentTarget.style.background = `${f}22`, v.currentTarget.style.boxShadow = `0 0 12px ${f}44`;
+                    v.currentTarget.style.background = `${h}22`, v.currentTarget.style.boxShadow = `0 0 12px ${h}44`;
                   },
                   onMouseLeave: (v) => {
-                    v.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${f}08 100%)`, v.currentTarget.style.boxShadow = "none";
+                    v.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${h}08 100%)`, v.currentTarget.style.boxShadow = "none";
                   },
                   children: "×"
                 }
@@ -497,7 +497,7 @@ function It({
               position: "relative",
               zIndex: 2
             },
-            children: Y.map((v) => /* @__PURE__ */ e(Ot, { metric: v, visible: o, accentColor: f }, v.id))
+            children: V.map((v) => /* @__PURE__ */ e(Ot, { metric: v, visible: o, accentColor: h }, v.id))
           }
         ),
         /* @__PURE__ */ d(
@@ -505,14 +505,14 @@ function It({
           {
             style: {
               padding: "12px 22px",
-              borderTop: `1px solid ${f}18`,
-              background: `${f}06`,
+              borderTop: `1px solid ${h}18`,
+              background: `${h}06`,
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
               fontSize: 9,
               letterSpacing: "0.18em",
-              color: `${f}66`,
+              color: `${h}66`,
               textTransform: "uppercase",
               position: "relative",
               zIndex: 2
@@ -531,8 +531,8 @@ function It({
                       width: 5,
                       height: 5,
                       borderRadius: "50%",
-                      background: l === "online" ? "#00ff88" : f,
-                      boxShadow: `0 0 6px ${l === "online" ? "#00ff88" : f}`,
+                      background: l === "online" ? "#00ff88" : h,
+                      boxShadow: `0 0 6px ${l === "online" ? "#00ff88" : h}`,
                       animation: l === "warning" || l === "critical" ? "holo-led-blink 1.5s infinite" : "none"
                     }
                   }
@@ -551,7 +551,7 @@ function Ot({
   visible: n,
   accentColor: o
 }) {
-  const { label: i, sublabel: r, value: a, unit: s, status: l, icon: h, delay: c } = t, p = Lt(a, 70, 85), f = at(l);
+  const { label: i, sublabel: r, value: a, unit: s, status: l, icon: f, delay: c } = t, p = Lt(a, 70, 85), h = st(l);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -561,7 +561,7 @@ function Ot({
         gap: 16,
         opacity: n ? 1 : 0,
         transform: n ? "translateY(0)" : "translateY(12px)",
-        transition: `opacity 0.4s ${Ye} ${0.3 + c * 0.12}s, transform 0.5s ${Ue} ${0.3 + c * 0.12}s`
+        transition: `opacity 0.4s ${_e} ${0.3 + c * 0.12}s, transform 0.5s ${Ve} ${0.3 + c * 0.12}s`
       },
       children: [
         /* @__PURE__ */ d(
@@ -571,18 +571,18 @@ function Ot({
               width: 52,
               height: 52,
               borderRadius: 12,
-              border: `1px solid ${f}44`,
-              background: `linear-gradient(135deg, ${f}0c 0%, ${f}04 100%)`,
+              border: `1px solid ${h}44`,
+              background: `linear-gradient(135deg, ${h}0c 0%, ${h}04 100%)`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               flexShrink: 0,
               position: "relative",
               overflow: "hidden",
-              animation: n ? `comp-dialog-icon-pop 0.5s ${Ue} ${0.35 + c * 0.12}s both` : "none"
+              animation: n ? `comp-dialog-icon-pop 0.5s ${Ve} ${0.35 + c * 0.12}s both` : "none"
             },
             children: [
-              /* @__PURE__ */ e(Dt, { type: h, color: f }),
+              /* @__PURE__ */ e(Dt, { type: f, color: h }),
               (l === "warning" || l === "critical") && /* @__PURE__ */ e(
                 "div",
                 {
@@ -593,8 +593,8 @@ function Ot({
                     width: 5,
                     height: 5,
                     borderRadius: "50%",
-                    background: f,
-                    boxShadow: `0 0 6px ${f}`,
+                    background: h,
+                    boxShadow: `0 0 6px ${h}`,
                     animation: "holo-led-blink 1.2s infinite"
                   }
                 }
@@ -681,7 +681,7 @@ function Ot({
                       background: `linear-gradient(90deg, ${p}66, ${p})`,
                       boxShadow: `0 0 8px ${p}44`,
                       transformOrigin: "left center",
-                      animation: n ? `comp-dialog-metric-fill 0.8s ${Ye} ${0.4 + c * 0.12}s both` : "none"
+                      animation: n ? `comp-dialog-metric-fill 0.8s ${_e} ${0.4 + c * 0.12}s both` : "none"
                     }
                   }
                 ),
@@ -832,12 +832,12 @@ function Dt({ type: t, color: n }) {
     /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: n, strokeWidth: "0.8" })
   ] });
 }
-const Qe = _e(null), qe = _e({ index: 0 });
+const Ge = Xe(null), Ke = Xe({ index: 0 });
 function xi() {
-  return ve(Qe);
+  return ve(Ge);
 }
 function vi() {
-  return ve(qe);
+  return ve(Ke);
 }
 function Wt({
   children: t,
@@ -848,64 +848,64 @@ function Wt({
   selectedComponent: a,
   drillAnimPhase: s,
   rotateY: l = 20,
-  autoRotateComponents: h = !0,
+  autoRotateComponents: f = !0,
   componentScale: c = 0.35,
   drillZoom: p = 3.3,
-  autoRotateCarousel: f = !0,
+  autoRotateCarousel: h = !0,
   carouselSpeed: b = 6e-3,
-  width: g = 950,
-  height: u = 790,
+  width: u = 950,
+  height: g = 790,
   onSelectSystem: m,
-  onBackgroundClick: S,
-  onComponentClick: y,
-  onCloseDrill: k,
-  selectedSystemStatus: x = "online",
-  selectedSystemDbSync: W = !0,
-  selectedSystemMetrics: M,
-  selectedSystemAlerts: P
+  onBackgroundClick: x,
+  onComponentClick: w,
+  onCloseDrill: P,
+  selectedSystemStatus: y = "online",
+  selectedSystemDbSync: D = !0,
+  selectedSystemMetrics: B,
+  selectedSystemAlerts: k
 }) {
-  const [Y, v] = T(0);
+  const [V, v] = A(0);
   Ee(() => {
-    let O;
-    if ((o === "compact" || o === "collapsing") && f) {
-      const B = () => {
-        v((ne) => ne + b), O = requestAnimationFrame(B);
+    let I;
+    if ((o === "compact" || o === "collapsing") && h) {
+      const F = () => {
+        v((ne) => ne + b), I = requestAnimationFrame(F);
       };
-      O = requestAnimationFrame(B);
+      I = requestAnimationFrame(F);
     }
-    return () => cancelAnimationFrame(O);
-  }, [o, f, b]);
-  const L = J.Children.toArray(t), Q = L.length, V = Et(() => ({
-    totalSystems: Q,
-    carouselRotation: Y,
+    return () => cancelAnimationFrame(I);
+  }, [o, h, b]);
+  const W = J.Children.toArray(t), X = W.length, z = Et(() => ({
+    totalSystems: X,
+    carouselRotation: V,
     viewState: o,
     animPhase: i,
     selectedSystem: r,
     selectedComponent: a,
     rotateY: l,
-    autoRotateComponents: h,
+    autoRotateComponents: f,
     componentScale: c,
     drillZoom: p,
     onSelectSystem: m,
-    onComponentClick: y,
-    containerWidth: g
+    onComponentClick: w,
+    containerWidth: u
   }), [
-    Q,
-    Y,
+    X,
+    V,
     o,
     i,
     r,
     a,
     l,
-    h,
+    f,
     c,
     p,
     m,
-    y,
-    g
-  ]), te = L.map((O, B) => /* @__PURE__ */ e(qe.Provider, { value: { index: B }, children: O }, B)), ie = o === "expanded" || o === "expanding" && i >= 4;
-  return /* @__PURE__ */ d(Qe.Provider, { value: V, children: [
-    /* @__PURE__ */ d("div", { style: { position: "relative", width: g, height: u, margin: "0 auto", flexShrink: 0 }, children: [
+    w,
+    u
+  ]), te = W.map((I, F) => /* @__PURE__ */ e(Ke.Provider, { value: { index: F }, children: I }, F)), ie = o === "expanded" || o === "expanding" && i >= 4;
+  return /* @__PURE__ */ d(Ge.Provider, { value: z, children: [
+    /* @__PURE__ */ d("div", { style: { position: "relative", width: u, height: g, margin: "0 auto", flexShrink: 0 }, children: [
       n && (o === "compact" || o === "collapsing") && /* @__PURE__ */ e(
         "img",
         {
@@ -928,25 +928,25 @@ function Wt({
       ),
       te
     ] }),
-    r && /* @__PURE__ */ e("div", { onClick: (O) => O.stopPropagation(), children: /* @__PURE__ */ e(
+    r && /* @__PURE__ */ e("div", { onClick: (I) => I.stopPropagation(), children: /* @__PURE__ */ e(
       At,
       {
         name: r,
-        status: x,
-        dbSync: W,
+        status: y,
+        dbSync: D,
         visible: ie && !a,
-        metrics: M,
-        alerts: P
+        metrics: B,
+        alerts: k
       }
     ) }),
-    a && /* @__PURE__ */ e("div", { onClick: (O) => O.stopPropagation(), children: /* @__PURE__ */ e(
+    a && /* @__PURE__ */ e("div", { onClick: (I) => I.stopPropagation(), children: /* @__PURE__ */ e(
       It,
       {
         component: a,
-        onClose: k,
+        onClose: P,
         visible: s >= 0.3,
-        sceneWidth: g,
-        sceneHeight: u
+        sceneWidth: u,
+        sceneHeight: g
       }
     ) })
   ] });
@@ -1234,8 +1234,8 @@ function Mt({
     }, children: r })
   ] });
 }
-const ae = _e(null), Bt = "cubic-bezier(0.34, 1.56, 0.64, 1)", et = 330, tt = 340, Ft = 660;
-function lt({
+const ae = Xe(null), Bt = "cubic-bezier(0.34, 1.56, 0.64, 1)", it = 330, nt = 340, Ft = 660;
+function dt({
   name: t,
   status: n = "online",
   connections: o = [],
@@ -1244,33 +1244,33 @@ function lt({
   _index: a,
   _totalSystems: s,
   _carouselRotation: l,
-  _viewState: h,
+  _viewState: f,
   _animPhase: c,
   _selectedSystem: p,
-  _selectedComponent: f,
+  _selectedComponent: h,
   _rotateY: b,
-  _autoRotateComponents: g,
-  _componentScale: u,
+  _autoRotateComponents: u,
+  _componentScale: g,
   _drillZoom: m,
-  _onSelectSystem: S,
-  _onComponentClick: y,
-  _containerWidth: k
+  _onSelectSystem: x,
+  _onComponentClick: w,
+  _containerWidth: P
 }) {
-  const x = ve(Qe), W = ve(qe), M = a ?? W.index, P = s ?? x?.totalSystems ?? 1, Y = l ?? x?.carouselRotation ?? 0, v = h ?? x?.viewState ?? "compact", L = c ?? x?.animPhase ?? 0, Q = p ?? x?.selectedSystem ?? null, V = f ?? x?.selectedComponent ?? null, te = b ?? x?.rotateY ?? 20, ie = g ?? x?.autoRotateComponents ?? !0, O = u ?? x?.componentScale ?? 0.35, B = m ?? x?.drillZoom ?? 3.3, ne = S ?? x?.onSelectSystem, Se = y ?? x?.onComponentClick, $e = k ?? x?.containerWidth ?? 950, C = Q === t, z = C && (v === "expanded" || v === "expanding" && L >= 1), j = !z, ke = ($e - Ft) / 2, le = et + ke, oe = M / P * Math.PI * 2 + Y, gt = 420, yt = 160, Re = le + Math.cos(oe) * gt, se = 450 + Math.sin(oe) * yt, mt = Math.round(se), ze = !C && (v === "expanding" || v === "expanded"), xt = ze ? 0 : 1, Pe = j ? 0.3 + (Math.sin(oe) + 1) * 0.1 : 1, vt = j ? Pe : O, Te = v === "compact" || v === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", Je = C && V, Ne = Je ? B : 1, wt = V?.ex ?? 330, St = V?.ey ?? 300, { size: $t = 90, color: kt = "#00e5ff", widthRatio: Rt = 3 } = i ?? {}, Pt = {
+  const y = ve(Ge), D = ve(Ke), B = a ?? D.index, k = s ?? y?.totalSystems ?? 1, V = l ?? y?.carouselRotation ?? 0, v = f ?? y?.viewState ?? "compact", W = c ?? y?.animPhase ?? 0, X = p ?? y?.selectedSystem ?? null, z = h ?? y?.selectedComponent ?? null, te = b ?? y?.rotateY ?? 20, ie = u ?? y?.autoRotateComponents ?? !0, I = g ?? y?.componentScale ?? 0.35, F = m ?? y?.drillZoom ?? 3.3, ne = x ?? y?.onSelectSystem, Se = w ?? y?.onComponentClick, $e = P ?? y?.containerWidth ?? 950, Q = X === t, N = Q && (v === "expanded" || v === "expanding" && W >= 1), C = !N, ke = ($e - Ft) / 2, oe = it + ke, le = B / k * Math.PI * 2 + V, Ne = 420, Te = 160, Re = oe + Math.cos(le) * Ne, se = 450 + Math.sin(le) * Te, mt = Math.round(se), Me = !Q && (v === "expanding" || v === "expanded"), xt = Me ? 0 : 1, Pe = C ? 0.3 + (Math.sin(le) + 1) * 0.1 : 1, vt = C ? Pe : I, Ae = v === "compact" || v === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", tt = Q && z, Be = tt ? F : 1, wt = z?.ex ?? 330, St = z?.ey ?? 300, { size: $t = 90, color: kt = "#00e5ff", widthRatio: Rt = 3 } = i ?? {}, Pt = {
     name: t,
-    isSelected: C,
-    isExpandedPos: z,
-    isCompact: j,
-    animPhase: L,
+    isSelected: Q,
+    isExpandedPos: N,
+    isCompact: C,
+    animPhase: W,
     compactCx: Re,
     compactCy: se,
     groupScale: Pe,
     effectiveScale: vt,
-    transitionValue: Te,
+    transitionValue: Ae,
     rotateY: te,
     autoRotateComponents: ie,
     onComponentClick: Se,
-    selectedComponentName: V?.name ?? null,
+    selectedComponentName: z?.name ?? null,
     expandedOffsetX: ke
   };
   return /* @__PURE__ */ e(ae.Provider, { value: Pt, children: /* @__PURE__ */ d(
@@ -1285,13 +1285,13 @@ function lt({
         pointerEvents: "none",
         opacity: xt,
         transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Bt}`,
-        filter: j && Math.sin(oe) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
-        zIndex: C ? 500 : ze ? 0 : mt,
-        transformOrigin: `${le}px ${tt}px`,
-        transform: Je ? `translate(${-(wt - et) * Ne}px, ${-(St - tt) * Ne}px) scale(${Ne})` : "none"
+        filter: C && Math.sin(le) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
+        zIndex: Q ? 500 : Me ? 0 : mt,
+        transformOrigin: `${oe}px ${nt}px`,
+        transform: tt ? `translate(${-(wt - it) * Be}px, ${-(St - nt) * Be}px) scale(${Be})` : "none"
       },
       children: [
-        j && !ze && /* @__PURE__ */ e(
+        C && !Me && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -1305,12 +1305,12 @@ function lt({
               cursor: "pointer",
               zIndex: 101
             },
-            onClick: (X) => {
-              X.stopPropagation(), ne?.(t);
+            onClick: (j) => {
+              j.stopPropagation(), ne?.(t);
             }
           }
         ),
-        j && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
+        C && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -1363,13 +1363,13 @@ function lt({
           {
             style: {
               position: "absolute",
-              left: z ? le : Re,
-              top: z ? 48 : se - 180,
-              transform: `translate(-50%, -50%) scale(${z ? 1.2 : Pe * 1.5})`,
+              left: N ? oe : Re,
+              top: N ? 48 : se - 180,
+              transform: `translate(-50%, -50%) scale(${N ? 1.2 : Pe * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
-              transition: Te,
+              transition: Ae,
               fontSize: 36,
               fontWeight: 700,
               letterSpacing: "0.18em",
@@ -1389,23 +1389,23 @@ function lt({
             style: {
               position: "absolute",
               top: 0,
-              left: z ? ke : 0,
+              left: N ? ke : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
-              transition: Te
+              transition: Ae
             },
-            children: o.map((X, Ct) => /* @__PURE__ */ e(
+            children: o.map((j, Ct) => /* @__PURE__ */ e(
               zt,
               {
-                x1: X.from[0],
-                y1: X.from[1],
-                x2: X.to[0],
-                y2: X.to[1],
-                show: C && L >= (X.visibleAtPhase ?? 0),
-                color: X.color,
-                dur: X.duration
+                x1: j.from[0],
+                y1: j.from[1],
+                x2: j.to[0],
+                y2: j.to[1],
+                show: Q && W >= (j.visibleAtPhase ?? 0),
+                color: j.color,
+                dur: j.duration
               },
               Ct
             ))
@@ -1416,10 +1416,10 @@ function lt({
           {
             style: {
               position: "absolute",
-              left: z ? le : Re,
-              top: z ? 570 : se + 70,
-              transform: `translate(-50%, -50%) scaleX(${z ? 1 : 0.4}) scaleY(${z ? 1 : 0.6}) scale(${z ? 1 : Pe})`,
-              transition: Te,
+              left: N ? oe : Re,
+              top: N ? 570 : se + 70,
+              transform: `translate(-50%, -50%) scaleX(${N ? 1 : 0.4}) scaleY(${N ? 1 : 0.6}) scale(${N ? 1 : Pe})`,
+              transition: Ae,
               zIndex: 1
             },
             children: /* @__PURE__ */ e(Mt, { size: $t, color: kt, widthRatio: Rt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
@@ -1430,7 +1430,7 @@ function lt({
     }
   ) });
 }
-function A({
+function T({
   ex: t,
   ey: n,
   compactOffset: o,
@@ -1439,27 +1439,27 @@ function A({
   color: a = "#00e5ff",
   label: s,
   subLabel: l,
-  delay: h = "0s",
+  delay: f = "0s",
   componentInfo: c,
   visibleAtPhase: p = 0,
-  fixedScale: f,
+  fixedScale: h,
   bare: b = !1
 }) {
-  const g = ve(ae);
-  if (!g)
+  const u = ve(ae);
+  if (!u)
     throw new Error("ServiceNode must be used inside a <Service> component.");
   const {
-    isExpandedPos: u,
+    isExpandedPos: g,
     animPhase: m,
-    compactCx: S,
-    compactCy: y,
-    groupScale: k,
-    effectiveScale: x,
-    transitionValue: W,
-    onComponentClick: M,
-    selectedComponentName: P,
-    expandedOffsetX: Y
-  } = g, L = p === 0 || g.isSelected && m >= p ? 1 : 0, Q = S + o.x, V = y + o.y, te = u ? t + Y : Q, ie = u ? n : V, O = f !== void 0 ? f : g.isCompact ? k : x, B = !!c && !!P && c.name === P, ne = c?.status ? w[c.status]?.color ?? a : a, Se = c?.status === "offline" ? "#4a6a8a" : ne, $e = c && u && M ? () => M({
+    compactCx: x,
+    compactCy: w,
+    groupScale: P,
+    effectiveScale: y,
+    transitionValue: D,
+    onComponentClick: B,
+    selectedComponentName: k,
+    expandedOffsetX: V
+  } = u, W = p === 0 || u.isSelected && m >= p ? 1 : 0, X = x + o.x, z = w + o.y, te = g ? t + V : X, ie = g ? n : z, I = h !== void 0 ? h : u.isCompact ? P : y, F = !!c && !!k && c.name === k, ne = c?.status ? S[c.status]?.color ?? a : a, Se = c?.status === "offline" ? "#4a6a8a" : ne, $e = c && g && B ? () => B({
     type: c.type,
     name: c.name,
     status: c.status,
@@ -1476,11 +1476,11 @@ function A({
         position: "absolute",
         left: te,
         top: ie,
-        transform: `translate(-50%, -50%) scale(${O})`,
-        opacity: L,
+        transform: `translate(-50%, -50%) scale(${I})`,
+        opacity: W,
         zIndex: i,
-        transition: W || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-        pointerEvents: u && L >= 0.5 ? "auto" : "none"
+        transition: D || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        pointerEvents: g && W >= 0.5 ? "auto" : "none"
       },
       children: b ? r : /* @__PURE__ */ e(
         Ht,
@@ -1488,11 +1488,11 @@ function A({
           statusColor: Se,
           label: s,
           subLabel: l,
-          delay: h,
-          showLabels: u,
-          isCompact: g.isCompact,
+          delay: f,
+          showLabels: g,
+          isCompact: u.isCompact,
           onClick: $e,
-          isSelected: B,
+          isSelected: F,
           children: r
         }
       )
@@ -1508,9 +1508,9 @@ function Ht({
   showLabels: a = !0,
   isCompact: s = !1,
   onClick: l,
-  isSelected: h = !1
+  isSelected: f = !1
 }) {
-  const [c, p] = T(!1), f = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
+  const [c, p] = A(!1), h = f ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1521,7 +1521,7 @@ function Ht({
       style: {
         cursor: l ? "pointer" : void 0,
         transition: "filter 0.3s ease",
-        filter: f
+        filter: h
       },
       onMouseEnter: () => p(!0),
       onMouseLeave: () => p(!1),
@@ -1560,7 +1560,7 @@ function Ht({
     }
   );
 }
-function st({ synced: t, latencyMs: n }) {
+function ct({ synced: t, latencyMs: n }) {
   const o = t ? "#00ff88" : "#ff8c00";
   return /* @__PURE__ */ d("div", { className: "sync-bridge", children: [
     /* @__PURE__ */ d("div", { className: "sync-arrows", children: [
@@ -1595,7 +1595,7 @@ function st({ synced: t, latencyMs: n }) {
     ] })
   ] });
 }
-function D({
+function O({
   ex: t,
   ey: n,
   status: o,
@@ -1604,23 +1604,23 @@ function D({
   offsetX: a,
   offsetY: s,
   isVisible: l,
-  align: h = "right",
+  align: f = "right",
   internalRef: c
 }) {
-  const f = ve(ae)?.expandedOffsetX ?? 0;
+  const h = ve(ae)?.expandedOffsetX ?? 0;
   if (o === "online") return null;
-  const b = w[o]?.color ?? w.warning.color, g = Math.abs(a) > Math.abs(s), u = t + f + (g ? Math.sign(a) * 45 : 0), m = n + (g ? 0 : Math.sign(s) * 40), S = t + f + a, y = n + s;
-  let k = "";
-  if (g) {
-    const P = u + (S - u) / 2;
-    k = `M ${u} ${m} L ${P} ${m} L ${P} ${y} L ${S} ${y}`;
+  const b = S[o]?.color ?? S.warning.color, u = Math.abs(a) > Math.abs(s), g = t + h + (u ? Math.sign(a) * 45 : 0), m = n + (u ? 0 : Math.sign(s) * 40), x = t + h + a, w = n + s;
+  let P = "";
+  if (u) {
+    const k = g + (x - g) / 2;
+    P = `M ${g} ${m} L ${k} ${m} L ${k} ${w} L ${x} ${w}`;
   } else {
-    const P = m + (y - m) / 2;
-    k = `M ${u} ${m} L ${u} ${P} L ${S} ${P} L ${S} ${y}`;
+    const k = m + (w - m) / 2;
+    P = `M ${g} ${m} L ${g} ${k} L ${x} ${k} L ${x} ${w}`;
   }
-  let x = "translate(0, -50%)";
-  h === "left" && (x = "translate(-100%, -50%)"), h === "top" && (x = "translate(-50%, -100%)"), h === "bottom" && (x = "translate(-50%, 0)");
-  const W = h === "left" ? -8 : h === "right" ? 8 : 0, M = h === "top" ? -8 : h === "bottom" ? 8 : 0;
+  let y = "translate(0, -50%)";
+  f === "left" && (y = "translate(-100%, -50%)"), f === "top" && (y = "translate(-50%, -100%)"), f === "bottom" && (y = "translate(-50%, 0)");
+  const D = f === "left" ? -8 : f === "right" ? 8 : 0, B = f === "top" ? -8 : f === "bottom" ? 8 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1651,7 +1651,7 @@ function D({
             children: /* @__PURE__ */ e(
               "path",
               {
-                d: k,
+                d: P,
                 fill: "none",
                 stroke: b,
                 strokeWidth: "1.5",
@@ -1666,11 +1666,11 @@ function D({
           {
             style: {
               position: "absolute",
-              left: S,
-              top: y,
-              transform: x,
-              marginLeft: W,
-              marginTop: M,
+              left: x,
+              top: w,
+              transform: y,
+              marginLeft: D,
+              marginTop: B,
               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 ${b}55`,
               borderLeft: `2px solid ${b}`,
@@ -1742,7 +1742,7 @@ function D({
     }
   );
 }
-const q = 140, F = 240, Z = 160, de = Xe(q, F, Z);
+const q = 140, H = 240, Z = 160, de = qe(q, H, Z);
 function Ut({
   cfg: t,
   name: n,
@@ -1751,7 +1751,7 @@ function Ut({
   status: r,
   compact: a
 }) {
-  const s = Math.ceil(o / 100 * 3), l = r === "offline" ? "#4a6a8a" : t.color, h = [
+  const s = Math.ceil(o / 100 * 3), l = r === "offline" ? "#4a6a8a" : t.color, f = [
     { 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" },
@@ -1762,8 +1762,8 @@ function Ut({
     {
       style: {
         width: q,
-        height: F,
-        background: a ? we : je,
+        height: H,
+        background: a ? we : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -1844,7 +1844,7 @@ function Ut({
                     children: n
                   }
                 ),
-                /* @__PURE__ */ e("div", { style: { display: "flex", gap: 5 }, children: h.map((c, p) => /* @__PURE__ */ e(
+                /* @__PURE__ */ e("div", { style: { display: "flex", gap: 5 }, children: f.map((c, p) => /* @__PURE__ */ e(
                   "div",
                   {
                     style: {
@@ -1924,7 +1924,7 @@ function Ut({
           }
         ),
         Array.from({ length: 3 }, (c, p) => {
-          const f = p < s;
+          const h = p < s;
           return /* @__PURE__ */ d(
             "div",
             {
@@ -1951,8 +1951,8 @@ function Ut({
                       height: 5,
                       borderRadius: "50%",
                       flexShrink: 0,
-                      background: f ? t.color : "#08142a",
-                      boxShadow: f ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
+                      background: h ? t.color : "#08142a",
+                      boxShadow: h ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
                     }
                   }
                 ),
@@ -1968,7 +1968,7 @@ function Ut({
                       position: "relative",
                       overflow: "hidden"
                     },
-                    children: f && /* @__PURE__ */ e(
+                    children: h && /* @__PURE__ */ e(
                       "div",
                       {
                         style: {
@@ -2160,7 +2160,7 @@ function Yt() {
     {
       style: {
         width: q,
-        height: F,
+        height: H,
         background: "linear-gradient(180deg, #040c1a 0%, #030810 100%)",
         position: "relative",
         overflow: "hidden",
@@ -2268,14 +2268,14 @@ function Yt() {
     }
   );
 }
-function it({ side: t, color: n }) {
+function ot({ side: t, color: n }) {
   const o = t === "right";
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: Z,
-        height: F,
+        height: H,
         background: o ? "linear-gradient(90deg, #040c1c 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #040c1c 100%)",
         position: "relative",
         overflow: "hidden"
@@ -2294,7 +2294,7 @@ function it({ side: t, color: n }) {
             }
           }
         ),
-        [8, F - 20].map((i) => /* @__PURE__ */ e(
+        [8, H - 20].map((i) => /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -2316,8 +2316,8 @@ function it({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: F * 0.35,
-              bottom: F * 0.15,
+              top: H * 0.35,
+              bottom: H * 0.15,
               left: o ? 22 : 18,
               right: o ? 18 : 22,
               display: "flex",
@@ -2345,7 +2345,7 @@ function it({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: F * 0.18,
+              top: H * 0.18,
               left: o ? 12 : Z - 78,
               fontSize: 7,
               color: "#1a3050",
@@ -2450,29 +2450,29 @@ function ue({
   status: a = "online",
   name: s = "SRV-001",
   cpuLoad: l = 67,
-  memLoad: h = 82,
+  memLoad: f = 82,
   _compact: c
 }) {
-  const [p, f] = T(n), b = ee(0), g = ee(0);
+  const [p, h] = A(n), b = ee(0), u = ee(0);
   Ee(() => {
     if (!r) {
-      f(n);
+      h(n);
       return;
     }
-    const m = (S) => {
-      g.current && f((y) => y + (S - g.current) * 0.027), g.current = S, b.current = requestAnimationFrame(m);
+    const m = (x) => {
+      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, b.current = requestAnimationFrame(m);
     };
     return b.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(b.current), g.current = 0;
+      cancelAnimationFrame(b.current), u.current = 0;
     };
   }, [r, n]);
-  const u = w[a] ?? w.online;
+  const g = S[a] ?? S.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: q * i,
-        height: F * i,
+        height: H * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2490,17 +2490,17 @@ function ue({
               zIndex: 110,
               pointerEvents: "none",
               animation: "holo-led-blink 1.5s infinite",
-              filter: `drop-shadow(0 0 10px ${u.color})`
+              filter: `drop-shadow(0 0 10px ${g.color})`
             },
             children: /* @__PURE__ */ d("svg", { width: "44", height: "44", viewBox: "0 0 28 28", fill: "none", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
                   d: "M14 3L1.5 25.5h25L14 3z",
-                  stroke: u.color,
+                  stroke: g.color,
                   strokeWidth: "2",
                   strokeLinejoin: "round",
-                  fill: u.color + "22"
+                  fill: g.color + "22"
                 }
               ),
               /* @__PURE__ */ e(
@@ -2510,12 +2510,12 @@ function ue({
                   y1: "11",
                   x2: "14",
                   y2: "18",
-                  stroke: u.color,
+                  stroke: g.color,
                   strokeWidth: "2.5",
                   strokeLinecap: "round"
                 }
               ),
-              /* @__PURE__ */ e("circle", { cx: "14", cy: "21.5", r: "1.5", fill: u.color })
+              /* @__PURE__ */ e("circle", { cx: "14", cy: "21.5", r: "1.5", fill: g.color })
             ] })
           }
         ),
@@ -2525,8 +2525,8 @@ function ue({
             style: {
               position: "absolute",
               width: q * 1.4 * i,
-              height: F * 0.8 * i,
-              background: `radial-gradient(ellipse, ${u.glow} 0%, transparent 65%)`,
+              height: H * 0.8 * i,
+              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(45 * i)}px)`,
               pointerEvents: "none",
               top: "40%",
@@ -2549,7 +2549,7 @@ function ue({
               {
                 style: {
                   width: q,
-                  height: F,
+                  height: H,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${o}deg)`,
@@ -2559,17 +2559,17 @@ function ue({
                   /* @__PURE__ */ e("div", { style: de.front, children: /* @__PURE__ */ e(
                     Ut,
                     {
-                      cfg: u,
+                      cfg: g,
                       name: s,
                       cpuLoad: l,
-                      memLoad: h,
+                      memLoad: f,
                       status: a,
                       compact: c
                     }
                   ) }),
                   /* @__PURE__ */ e("div", { style: de.back, children: /* @__PURE__ */ e(Yt, {}) }),
-                  /* @__PURE__ */ e("div", { style: de.left, children: /* @__PURE__ */ e(it, { side: "left", color: u.color }) }),
-                  /* @__PURE__ */ e("div", { style: de.right, children: /* @__PURE__ */ e(it, { side: "right", color: u.color }) }),
+                  /* @__PURE__ */ e("div", { style: de.left, children: /* @__PURE__ */ e(ot, { side: "left", color: g.color }) }),
+                  /* @__PURE__ */ e("div", { style: de.right, children: /* @__PURE__ */ e(ot, { side: "right", color: g.color }) }),
                   /* @__PURE__ */ e("div", { style: de.top, children: /* @__PURE__ */ e(Vt, { cpuLoad: l }) }),
                   /* @__PURE__ */ e("div", { style: de.bottom, children: /* @__PURE__ */ e(
                     "div",
@@ -2590,8 +2590,8 @@ function ue({
     }
   );
 }
-const Ve = 12, re = 55, _ = re * 2, he = 52, Ge = 10, Be = 3 * he + 2 * Ge, ce = 2 * Math.PI * re / Ve, Fe = Array.from({ length: Ve }, (t, n) => n / Ve * 360);
-function He(t) {
+const je = 12, re = 55, _ = re * 2, he = 52, Ze = 10, He = 3 * he + 2 * Ze, ce = 2 * Math.PI * re / je, Ue = Array.from({ length: je }, (t, n) => n / je * 360);
+function Ye(t) {
   return Math.cos(t * Math.PI / 180) * 0.42 + 0.58;
 }
 function _t({
@@ -2603,8 +2603,8 @@ function _t({
   compact: a
 }) {
   return /* @__PURE__ */ d(Ce, { children: [
-    Fe.map((s, l) => {
-      const h = He(s), c = l === 0, p = Math.round(4 + h * 9), f = Math.round(12 + h * 22), b = Math.round(28 + h * 44), g = Math.round(h * 0.55 * 255).toString(16).padStart(2, "0");
+    Ue.map((s, l) => {
+      const f = Ye(s), c = l === 0, p = Math.round(4 + f * 9), h = Math.round(12 + f * 22), b = Math.round(28 + f * 44), u = Math.round(f * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
         "div",
         {
@@ -2616,8 +2616,8 @@ function _t({
             top: t,
             transform: `rotateY(${s}deg) translateZ(${re}px)`,
             backfaceVisibility: "hidden",
-            background: c ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${f},${b})`,
-            borderLeft: `1px solid ${o.color}${g}`,
+            background: c ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${h},${b})`,
+            borderLeft: `1px solid ${o.color}${u}`,
             boxShadow: c ? `inset 0 0 18px ${o.color}28` : "none"
           },
           children: c && /* @__PURE__ */ d(Ce, { children: [
@@ -2761,8 +2761,8 @@ function _t({
         )
       }
     ),
-    i && Fe.map((s, l) => {
-      const h = He(s);
+    i && Ue.map((s, l) => {
+      const f = Ye(s);
       return /* @__PURE__ */ e(
         "div",
         {
@@ -2776,26 +2776,26 @@ function _t({
             backfaceVisibility: "hidden",
             background: o.color,
             boxShadow: `0 0 8px ${o.color}, 0 0 18px ${o.color}aa, 0 0 30px ${o.glow}`,
-            opacity: h * 0.9
+            opacity: f * 0.9
           }
         },
         `rng${n}${l}`
       );
     }),
-    i && Fe.map((s, l) => {
-      const h = He(s), c = Math.round(2 + h * 4), p = Math.round(5 + h * 10), f = Math.round(12 + h * 20);
+    i && Ue.map((s, l) => {
+      const f = Ye(s), c = Math.round(2 + f * 4), p = Math.round(5 + f * 10), h = Math.round(12 + f * 20);
       return /* @__PURE__ */ e(
         "div",
         {
           style: {
             position: "absolute",
             width: ce,
-            height: Ge,
+            height: Ze,
             left: (_ - ce) / 2,
             top: t + he,
             transform: `rotateY(${s}deg) translateZ(${re}px)`,
             backfaceVisibility: "hidden",
-            background: `rgb(${c},${p},${f})`
+            background: `rgb(${c},${p},${h})`
           }
         },
         `gap${n}${l}`
@@ -2803,7 +2803,7 @@ function _t({
     })
   ] });
 }
-function Le({
+function Ie({
   rotateX: t = -22,
   rotateY: n = -15,
   rotateZ: o = 0,
@@ -2815,26 +2815,26 @@ function Le({
   // connections = 284,
   _compact: l
 }) {
-  const [h, c] = T(n), p = ee(0), f = ee(0);
+  const [f, c] = A(n), p = ee(0), h = ee(0);
   Ee(() => {
     if (!r) {
       c(n);
       return;
     }
-    const g = (u) => {
-      f.current && c((m) => m + (u - f.current) * 0.027), f.current = u, p.current = requestAnimationFrame(g);
+    const u = (g) => {
+      h.current && c((m) => m + (g - h.current) * 0.027), h.current = g, p.current = requestAnimationFrame(u);
     };
-    return p.current = requestAnimationFrame(g), () => {
-      cancelAnimationFrame(p.current), f.current = 0;
+    return p.current = requestAnimationFrame(u), () => {
+      cancelAnimationFrame(p.current), h.current = 0;
     };
   }, [r, n]);
-  const b = w[a] ?? w.online;
+  const b = S[a] ?? S.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: _ * i,
-        height: Be * i,
+        height: He * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2895,7 +2895,7 @@ function Le({
             style: {
               position: "absolute",
               width: _ * 2.8 * i,
-              height: Be * 0.85 * i,
+              height: He * 0.85 * i,
               background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * i)}px)`,
               pointerEvents: "none",
@@ -2919,23 +2919,23 @@ function Le({
               {
                 style: {
                   width: _,
-                  height: Be,
+                  height: He,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${h}deg) rotateZ(${o}deg)`,
+                  transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
-                children: [0, 1, 2].map((g) => /* @__PURE__ */ e(
+                children: [0, 1, 2].map((u) => /* @__PURE__ */ e(
                   _t,
                   {
-                    diskY: g * (he + Ge),
-                    diskIdx: g,
+                    diskY: u * (he + Ze),
+                    diskIdx: u,
                     cfg: b,
-                    hasRingBelow: g < 2,
+                    hasRingBelow: u < 2,
                     capacity: s,
                     compact: l
                   },
-                  g
+                  u
                 ))
               }
             )
@@ -2945,7 +2945,7 @@ function Le({
     }
   );
 }
-const G = 190, H = 72, be = 120, pe = Xe(G, H, be);
+const G = 190, U = 72, be = 120, pe = qe(G, U, be);
 function jt({
   cfg: t,
   name: n,
@@ -2959,8 +2959,8 @@ function jt({
     {
       style: {
         width: G,
-        height: H,
-        background: r ? we : je,
+        height: U,
+        background: r ? we : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3045,8 +3045,8 @@ function jt({
               gap: 10
             },
             children: [
-              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 8 }, (l, h) => {
-                const c = h < a, p = s[h];
+              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 8 }, (l, f) => {
+                const c = f < a, p = s[f];
                 return /* @__PURE__ */ d(
                   "div",
                   {
@@ -3098,13 +3098,13 @@ function jt({
                             background: c ? t.color : "#0a1830",
                             boxShadow: c ? `0 0 5px ${t.color}` : "none",
                             animation: c ? "holo-led-blink 1.8s linear infinite" : "none",
-                            animationDelay: `${h * 0.2}s`
+                            animationDelay: `${f * 0.2}s`
                           }
                         }
                       )
                     ]
                   },
-                  h
+                  f
                 );
               }) }),
               /* @__PURE__ */ e(
@@ -3214,7 +3214,7 @@ function Xt() {
     {
       style: {
         width: G,
-        height: H,
+        height: U,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3229,7 +3229,7 @@ function Xt() {
           {
             style: {
               width: 40,
-              height: H - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3285,7 +3285,7 @@ function Xt() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: H - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3296,13 +3296,13 @@ function Xt() {
     }
   );
 }
-function nt({ side: t, color: n }) {
+function rt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: be,
-        height: H,
+        height: U,
         background: t === "right" ? "linear-gradient(90deg, #04091a 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #04091a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -3326,8 +3326,8 @@ function nt({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: H * 0.25,
-              bottom: H * 0.25,
+              top: U * 0.25,
+              bottom: U * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -3412,7 +3412,7 @@ function Qt({ traffic: t }) {
     }
   );
 }
-function dt({
+function pt({
   rotateX: t = -20,
   rotateY: n = 20,
   rotateZ: o = 0,
@@ -3421,29 +3421,29 @@ function dt({
   status: a = "online",
   name: s = "WEB-DISP-01",
   traffic: l = 78,
-  activeRoutes: h = 12,
+  activeRoutes: f = 12,
   _compact: c
 }) {
-  const [p, f] = T(n), b = ee(0), g = ee(0);
+  const [p, h] = A(n), b = ee(0), u = ee(0);
   Ee(() => {
     if (!r) {
-      f(n);
+      h(n);
       return;
     }
-    const m = (S) => {
-      g.current && f((y) => y + (S - g.current) * 0.027), g.current = S, b.current = requestAnimationFrame(m);
+    const m = (x) => {
+      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, b.current = requestAnimationFrame(m);
     };
     return b.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(b.current), g.current = 0;
+      cancelAnimationFrame(b.current), u.current = 0;
     };
   }, [r, n]);
-  const u = w[a] ?? w.online;
+  const g = S[a] ?? S.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: G * i,
-        height: H * i,
+        height: U * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3504,8 +3504,8 @@ function dt({
             style: {
               position: "absolute",
               width: G * 1.3 * i,
-              height: H * 2 * i,
-              background: `radial-gradient(ellipse, ${u.glow} 0%, transparent 65%)`,
+              height: U * 2 * i,
+              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
               top: "40%",
@@ -3528,7 +3528,7 @@ function dt({
               {
                 style: {
                   width: G,
-                  height: H,
+                  height: U,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${o}deg)`,
@@ -3538,16 +3538,16 @@ function dt({
                   /* @__PURE__ */ e("div", { style: pe.front, children: /* @__PURE__ */ e(
                     jt,
                     {
-                      cfg: u,
+                      cfg: g,
                       name: s,
                       traffic: l,
-                      activeRoutes: h,
+                      activeRoutes: f,
                       compact: c
                     }
                   ) }),
                   /* @__PURE__ */ e("div", { style: pe.back, children: /* @__PURE__ */ e(Xt, {}) }),
-                  /* @__PURE__ */ e("div", { style: pe.left, children: /* @__PURE__ */ e(nt, { side: "left", color: u.color }) }),
-                  /* @__PURE__ */ e("div", { style: pe.right, children: /* @__PURE__ */ e(nt, { side: "right", color: u.color }) }),
+                  /* @__PURE__ */ e("div", { style: pe.left, children: /* @__PURE__ */ e(rt, { side: "left", color: g.color }) }),
+                  /* @__PURE__ */ e("div", { style: pe.right, children: /* @__PURE__ */ e(rt, { side: "right", color: g.color }) }),
                   /* @__PURE__ */ e("div", { style: pe.top, children: /* @__PURE__ */ e(Qt, { traffic: l }) }),
                   /* @__PURE__ */ e("div", { style: pe.bottom, children: /* @__PURE__ */ e("div", { style: { width: G, height: be, background: "#020508" } }) })
                 ]
@@ -3559,7 +3559,7 @@ function dt({
     }
   );
 }
-const K = 190, U = 72, ge = 120, fe = Xe(K, U, ge), ot = {
+const K = 190, Y = 72, ge = 120, fe = qe(K, Y, ge), at = {
   online: { color: "#bb55ff", glow: "rgba(187,85,255,0.50)" },
   warning: { color: "#ff8c00", glow: "rgba(255,140,0,0.50)" },
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.50)" },
@@ -3579,8 +3579,8 @@ function qt({
     {
       style: {
         width: K,
-        height: U,
-        background: a ? we : je,
+        height: Y,
+        background: a ? we : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3665,7 +3665,7 @@ function qt({
               gap: 10
             },
             children: [
-              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 5 }, (h, c) => {
+              /* @__PURE__ */ e("div", { style: { display: "flex", gap: 3, alignItems: "center" }, children: Array.from({ length: 5 }, (f, c) => {
                 const p = c < r;
                 return /* @__PURE__ */ d(
                   "div",
@@ -3797,14 +3797,14 @@ function qt({
               { label: "INST", val: r, unit: "conn" },
               { label: "ENQUEUE", val: Math.round(o * 2.4), unit: "msgs" },
               { label: "DISP", val: Math.round(i * 0.1), unit: "/s" }
-            ].map((h) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
-              /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: h.label }),
+            ].map((f) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
+              /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: f.label }),
               /* @__PURE__ */ d("span", { style: { fontSize: 6, color: s + "88" }, children: [
-                h.val,
+                f.val,
                 " ",
-                h.unit
+                f.unit
               ] })
-            ] }, h.label))
+            ] }, f.label))
           }
         ),
         /* @__PURE__ */ e(
@@ -3830,7 +3830,7 @@ function Gt() {
     {
       style: {
         width: K,
-        height: U,
+        height: Y,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3845,7 +3845,7 @@ function Gt() {
           {
             style: {
               width: 40,
-              height: U - 16,
+              height: Y - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3901,7 +3901,7 @@ function Gt() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: U - 16,
+              height: Y - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3912,13 +3912,13 @@ function Gt() {
     }
   );
 }
-function rt({ side: t, color: n }) {
+function lt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: ge,
-        height: U,
+        height: Y,
         background: t === "right" ? "linear-gradient(90deg, #04091a 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #04091a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -3942,8 +3942,8 @@ function rt({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: U * 0.25,
-              bottom: U * 0.25,
+              top: Y * 0.25,
+              bottom: Y * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -4037,30 +4037,30 @@ function Zt({
   status: a = "online",
   name: s = "MSG-SRV-01",
   queueDepth: l = 45,
-  msgsPerSec: h = 230,
+  msgsPerSec: f = 230,
   instances: c = 3,
   _compact: p
 }) {
-  const [f, b] = T(n), g = ee(0), u = ee(0);
+  const [h, b] = A(n), u = ee(0), g = ee(0);
   Ee(() => {
     if (!r) {
       b(n);
       return;
     }
-    const S = (y) => {
-      u.current && b((k) => k + (y - u.current) * 0.027), u.current = y, g.current = requestAnimationFrame(S);
+    const x = (w) => {
+      g.current && b((P) => P + (w - g.current) * 0.027), g.current = w, u.current = requestAnimationFrame(x);
     };
-    return g.current = requestAnimationFrame(S), () => {
-      cancelAnimationFrame(g.current), u.current = 0;
+    return u.current = requestAnimationFrame(x), () => {
+      cancelAnimationFrame(u.current), g.current = 0;
     };
   }, [r, n]);
-  const m = ot[a] ?? ot.online;
+  const m = at[a] ?? at.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: K * i,
-        height: U * i,
+        height: Y * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -4121,7 +4121,7 @@ function Zt({
             style: {
               position: "absolute",
               width: K * 1.3 * i,
-              height: U * 2 * i,
+              height: Y * 2 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
@@ -4145,10 +4145,10 @@ function Zt({
               {
                 style: {
                   width: K,
-                  height: U,
+                  height: Y,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
+                  transform: `rotateX(${t}deg) rotateY(${h}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
@@ -4158,14 +4158,14 @@ function Zt({
                       cfg: m,
                       name: s,
                       queueDepth: l,
-                      msgsPerSec: h,
+                      msgsPerSec: f,
                       instances: c,
                       compact: p
                     }
                   ) }),
                   /* @__PURE__ */ e("div", { style: fe.back, children: /* @__PURE__ */ e(Gt, {}) }),
-                  /* @__PURE__ */ e("div", { style: fe.left, children: /* @__PURE__ */ e(rt, { side: "left", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.right, children: /* @__PURE__ */ e(rt, { side: "right", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: fe.left, children: /* @__PURE__ */ e(lt, { side: "left", color: m.color }) }),
+                  /* @__PURE__ */ e("div", { style: fe.right, children: /* @__PURE__ */ e(lt, { side: "right", color: m.color }) }),
                   /* @__PURE__ */ e("div", { style: fe.top, children: /* @__PURE__ */ e(Kt, { queueDepth: l, color: m.color }) }),
                   /* @__PURE__ */ e("div", { style: fe.bottom, children: /* @__PURE__ */ e("div", { style: { width: K, height: ge, background: "#020508" } }) })
                 ]
@@ -4177,8 +4177,8 @@ function Zt({
     }
   );
 }
-function ct({ status: t = "online", scale: n = 1 }) {
-  const i = (w[t] ?? w.online).color;
+function ft({ status: t = "online", scale: n = 1 }) {
+  const i = (S[t] ?? S.online).color;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -4296,8 +4296,8 @@ function R(t, n, o = 24) {
   });
 }
 function Jt({ data: t, color: n, height: o = 28 }) {
-  const r = o, a = Math.max(...t, 1), s = t.map((l, h) => {
-    const c = h / (t.length - 1) * 120, p = r - l / a * (r - 4) - 2;
+  const r = o, a = Math.max(...t, 1), s = t.map((l, f) => {
+    const c = f / (t.length - 1) * 120, p = r - l / a * (r - 4) - 2;
     return `${c},${p}`;
   }).join(" ");
   return /* @__PURE__ */ e("svg", { width: 120, height: r, style: { display: "block", overflow: "visible" }, children: /* @__PURE__ */ e(
@@ -4321,7 +4321,7 @@ function ei({
   animPhase: r,
   series: a
 }) {
-  const s = i === "critical" || i === "offline" ? "#ff2255" : i === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : ti(t, o), h = r >= 0.3 ? 0 : -280, c = r >= 0.2 ? 1 : 0;
+  const s = i === "critical" || i === "offline" ? "#ff2255" : i === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : ti(t, o), f = r >= 0.3 ? 0 : -280, c = r >= 0.2 ? 1 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4335,7 +4335,7 @@ function ei({
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
-        transform: `translateX(${h}px)`,
+        transform: `translateX(${f}px)`,
         opacity: c,
         transition: "transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease"
       },
@@ -4357,7 +4357,7 @@ function ei({
             ]
           }
         ),
-        /* @__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, h) => /* @__PURE__ */ d(
           "div",
           {
             style: {
@@ -4365,7 +4365,7 @@ function ei({
               background: "rgba(0, 20, 40, 0.35)",
               border: `1px solid ${p.color}22`,
               borderRadius: 6,
-              transition: `opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) ${f * 0.04}s`,
+              transition: `opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) ${h * 0.04}s`,
               opacity: r >= 0.5 ? 1 : 0
             },
             children: [
@@ -4421,7 +4421,7 @@ function ti(t, n) {
   }
   return [];
 }
-function pt({
+function ht({
   w: t,
   h: n,
   color: o,
@@ -4430,7 +4430,7 @@ function pt({
   delay: a = "0s",
   children: s
 }) {
-  const l = r ? w[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
+  const l = r ? S[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4471,8 +4471,8 @@ function pt({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: w[r]?.color,
-              boxShadow: `0 0 6px ${w[r]?.color}`,
+              background: S[r]?.color,
+              boxShadow: `0 0 6px ${S[r]?.color}`,
               animation: "holo-led-blink 1.2s infinite"
             }
           }
@@ -4514,7 +4514,7 @@ function pt({
     }
   );
 }
-function Ie({
+function Oe({
   color: t = "#00e5ff",
   label: n = "CPU-0",
   status: o = "online",
@@ -4598,8 +4598,8 @@ function Ie({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: w[o]?.color,
-                boxShadow: `0 0 6px ${w[o]?.color}`,
+                background: S[o]?.color,
+                boxShadow: `0 0 6px ${S[o]?.color}`,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4625,7 +4625,7 @@ function Ie({
     )
   ] });
 }
-function Oe({
+function De({
   color: t = "#00e5ff",
   label: n = "HEAP-0",
   status: o = "online",
@@ -4696,7 +4696,7 @@ function Oe({
                 width: 3,
                 height: 3,
                 borderRadius: "50%",
-                background: w[o]?.color,
+                background: S[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4728,7 +4728,7 @@ function ye({
   status: o = "online",
   activity: i = !1
 }) {
-  return /* @__PURE__ */ d(pt, { w: 56, h: 22, color: t, label: n, status: o, children: [
+  return /* @__PURE__ */ d(ht, { w: 56, h: 22, color: t, label: n, status: o, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -4761,7 +4761,7 @@ function ye({
     )
   ] });
 }
-function ft({
+function ut({
   color: t = "#00e5ff",
   label: n = "NET",
   status: o = "online"
@@ -4825,14 +4825,14 @@ function ft({
     }
   );
 }
-function I({
+function L({
   color: t = "#00e5ff",
   label: n = "THREAD",
   status: o = "online"
 }) {
-  return /* @__PURE__ */ e(pt, { w: 44, h: 28, color: t, label: n, status: o });
+  return /* @__PURE__ */ e(ht, { w: 44, h: 28, color: t, label: n, status: o });
 }
-function Ae({
+function Le({
   color: t = "#ff8c00",
   label: n = "PLATTER-0",
   status: o = "online",
@@ -4890,7 +4890,7 @@ function Ae({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: w[o]?.color,
+                background: S[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4916,7 +4916,7 @@ function Ae({
     )
   ] });
 }
-function N({
+function M({
   color: t = "#00e5ff",
   label: n = "PORT-1",
   status: o = "online"
@@ -4945,7 +4945,7 @@ function N({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: o && o !== "online" ? w[o]?.color ?? t : t,
+              background: o && o !== "online" ? S[o]?.color ?? t : t,
               boxShadow: `0 0 4px ${t}`,
               animation: o && o !== "online" && o !== "offline" ? "holo-led-blink 1s infinite" : "none"
             }
@@ -5125,14 +5125,14 @@ function ri({
   internal: i,
   revealPhase: r
 }) {
-  const a = w[n]?.color ?? w.online.color, s = "#ff8c00";
+  const a = S[n]?.color ?? S.online.color, s = "#ff8c00";
   if (t === "server") {
-    const l = o.cpuLoad ?? 50, h = o.memLoad ?? 60, c = [
+    const l = o.cpuLoad ?? 50, f = o.memLoad ?? 60, c = [
       {
         key: "cpu0",
         delay: 0,
         el: /* @__PURE__ */ e(
-          Ie,
+          Oe,
           {
             color: a,
             label: "CPU-0",
@@ -5146,7 +5146,7 @@ function ri({
         key: "cpu1",
         delay: 1,
         el: /* @__PURE__ */ e(
-          Ie,
+          Oe,
           {
             color: a,
             label: "CPU-1",
@@ -5160,12 +5160,12 @@ function ri({
         key: "heap0",
         delay: 2,
         el: /* @__PURE__ */ e(
-          Oe,
+          De,
           {
             color: "#8855ee",
             label: "HEAP-0",
             status: i[2]?.status,
-            usedPercent: h,
+            usedPercent: f,
             delay: "0.1s"
           }
         )
@@ -5174,12 +5174,12 @@ function ri({
         key: "heap1",
         delay: 3,
         el: /* @__PURE__ */ e(
-          Oe,
+          De,
           {
             color: "#8855ee",
             label: "HEAP-1",
             status: i[3]?.status,
-            usedPercent: h * 0.85,
+            usedPercent: f * 0.85,
             delay: "0.3s"
           }
         )
@@ -5218,12 +5218,12 @@ function ri({
       {
         key: "thread",
         delay: 7,
-        el: /* @__PURE__ */ e(I, { color: a, label: "THREAD-POOL", status: i[7]?.status })
+        el: /* @__PURE__ */ e(L, { color: a, label: "THREAD-POOL", status: i[7]?.status })
       },
       {
         key: "net",
         delay: 8,
-        el: /* @__PURE__ */ e(ft, { color: a, label: "NET", status: i[8]?.status })
+        el: /* @__PURE__ */ e(ut, { color: a, label: "NET", status: i[8]?.status })
       }
     ];
     return /* @__PURE__ */ e(
@@ -5237,13 +5237,13 @@ function ri({
           alignItems: "center",
           padding: 24
         },
-        children: c.map(({ key: p, delay: f, el: b }) => /* @__PURE__ */ e(
+        children: c.map(({ key: p, delay: h, el: b }) => /* @__PURE__ */ e(
           "div",
           {
             style: {
-              opacity: r >= 0.2 + f * 0.08 ? 1 : 0,
-              transform: `scale(${r >= 0.2 + f * 0.08 ? 1 : 0.6})`,
-              transition: `opacity 0.4s ${E} ${f * 0.06}s, transform 0.45s ${E} ${f * 0.06}s`
+              opacity: r >= 0.2 + h * 0.08 ? 1 : 0,
+              transform: `scale(${r >= 0.2 + h * 0.08 ? 1 : 0.6})`,
+              transition: `opacity 0.4s ${E} ${h * 0.06}s, transform 0.45s ${E} ${h * 0.06}s`
             },
             children: b
           },
@@ -5253,7 +5253,7 @@ function ri({
     );
   }
   if (t === "dispatcher") {
-    const l = Array.from({ length: 8 }, (h, c) => {
+    const l = Array.from({ length: 8 }, (f, c) => {
       const p = i[c];
       return /* @__PURE__ */ e(
         "div",
@@ -5263,7 +5263,7 @@ function ri({
             transform: `scale(${r >= 0.25 + c * 0.04 ? 1 : 0.5})`,
             transition: `opacity 0.35s ${E} ${c * 0.04}s, transform 0.4s ${E} ${c * 0.04}s`
           },
-          children: /* @__PURE__ */ e(N, { color: a, label: `PORT-${c + 1}`, status: p?.status })
+          children: /* @__PURE__ */ e(M, { color: a, label: `PORT-${c + 1}`, status: p?.status })
         },
         `p${c}`
       );
@@ -5289,7 +5289,7 @@ function ri({
                   transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
                   transition: `all 0.4s ${E} 0.3s`
                 },
-                children: /* @__PURE__ */ e(I, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
+                children: /* @__PURE__ */ e(L, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
               }
             ),
             /* @__PURE__ */ e(
@@ -5300,7 +5300,7 @@ function ri({
                   transform: `scale(${r >= 0.8 ? 1 : 0.6})`,
                   transition: `all 0.4s ${E} 0.4s`
                 },
-                children: /* @__PURE__ */ e(I, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
+                children: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
               }
             )
           ] })
@@ -5329,7 +5329,7 @@ function ri({
                 transform: `scale(${r >= 0.25 + l * 0.1 ? 1 : 0.6})`,
                 transition: `all 0.4s ${E} ${l * 0.08}s`
               },
-              children: /* @__PURE__ */ e(N, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
+              children: /* @__PURE__ */ e(M, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
             },
             l
           )),
@@ -5341,7 +5341,7 @@ function ri({
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
                 transition: `all 0.4s ${E} 0.25s`
               },
-              children: /* @__PURE__ */ e(I, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
+              children: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
             }
           ),
           [4, 5, 6].map((l) => /* @__PURE__ */ e(
@@ -5353,7 +5353,7 @@ function ri({
                 transition: `all 0.4s ${E} ${0.35 + (l - 4) * 0.05}s`
               },
               children: /* @__PURE__ */ e(
-                I,
+                L,
                 {
                   color: "#bb55ff",
                   label: `WORKER-${l - 3}`,
@@ -5380,25 +5380,25 @@ function ri({
           padding: 24
         },
         children: [
-          [0, 1, 2].map((h) => /* @__PURE__ */ e(
+          [0, 1, 2].map((f) => /* @__PURE__ */ e(
             "div",
             {
               style: {
-                opacity: r >= 0.2 + h * 0.12 ? 1 : 0,
-                transform: `scale(${r >= 0.2 + h * 0.12 ? 1 : 0.5})`,
-                transition: `all 0.45s ${E} ${h * 0.1}s`
+                opacity: r >= 0.2 + f * 0.12 ? 1 : 0,
+                transform: `scale(${r >= 0.2 + f * 0.12 ? 1 : 0.5})`,
+                transition: `all 0.45s ${E} ${f * 0.1}s`
               },
               children: /* @__PURE__ */ e(
-                Ae,
+                Le,
                 {
                   color: s,
-                  label: `PLATTER-${h}`,
-                  status: i[h]?.status,
+                  label: `PLATTER-${f}`,
+                  status: i[f]?.status,
                   capacityPercent: l
                 }
               )
             },
-            h
+            f
           )),
           /* @__PURE__ */ e(
             "div",
@@ -5408,7 +5408,7 @@ function ri({
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
                 transition: `all 0.4s ${E} 0.3s`
               },
-              children: /* @__PURE__ */ e(I, { color: s, label: "CONN-POOL", status: i[3]?.status })
+              children: /* @__PURE__ */ e(L, { color: s, label: "CONN-POOL", status: i[3]?.status })
             }
           ),
           /* @__PURE__ */ e(
@@ -5419,7 +5419,7 @@ function ri({
                 transform: `scale(${r >= 0.75 ? 1 : 0.6})`,
                 transition: `all 0.4s ${E} 0.4s`
               },
-              children: /* @__PURE__ */ e(I, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
+              children: /* @__PURE__ */ e(L, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
             }
           )
         ]
@@ -5438,7 +5438,7 @@ function wi({
   subComponents: s,
   graphSeries: l
 }) {
-  const h = ii(t, n, o, a), c = w[o]?.color ?? w.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", b = r >= 0.2 ? "50%" : "0%", g = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
+  const f = ii(t, n, o, a), c = S[o]?.color ?? S.online.color, p = r >= 0.1 ? 1 : r * 10, h = r >= 0.2 ? "-50%" : "0%", b = r >= 0.2 ? "50%" : "0%", u = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -5450,7 +5450,7 @@ function wi({
         flexDirection: "row",
         pointerEvents: "auto"
       },
-      onClick: (u) => u.stopPropagation(),
+      onClick: (g) => g.stopPropagation(),
       children: [
         /* @__PURE__ */ e(
           "div",
@@ -5511,7 +5511,7 @@ function wi({
                           background: "linear-gradient(90deg, rgba(2, 8, 20, 0.98) 0%, rgba(2, 12, 28, 0.95) 100%)",
                           borderRight: `2px solid ${c}44`,
                           boxShadow: "4px 0 32px rgba(0,0,0,0.6)",
-                          transform: `translateX(${f})`,
+                          transform: `translateX(${h})`,
                           transition: `transform 0.7s ${E}`
                         }
                       }
@@ -5549,7 +5549,7 @@ function wi({
                     boxShadow: `0 0 40px ${c}18, inset 0 0 60px rgba(0,0,0,0.4)`,
                     display: "flex",
                     flexDirection: "column",
-                    opacity: g >= 0.1 ? 1 : 0,
+                    opacity: u >= 0.1 ? 1 : 0,
                     transition: `opacity 0.5s ${E} 0.2s`
                   },
                   children: [
@@ -5638,15 +5638,15 @@ function wi({
                         }
                       }
                     ),
-                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(oi, { items: s, revealPhase: g }) : /* @__PURE__ */ e(
+                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(oi, { items: s, revealPhase: u }) : /* @__PURE__ */ e(
                       ri,
                       {
                         type: t,
                         name: n,
                         status: o,
                         context: a,
-                        internal: h,
-                        revealPhase: g
+                        internal: f,
+                        revealPhase: u
                       }
                     ) })
                   ]
@@ -5664,31 +5664,34 @@ function Si({
   brandTag: n = "3D MONITOR",
   services: o = [],
   backgroundImage: i,
-  children: r
+  logoUrl: r,
+  carouselSpeed: a = 6e-3,
+  fontFamily: s,
+  children: l
 }) {
-  const [a] = T(20), [s] = T(!1), [l] = T(!0), [h] = T(6e-3), [c] = T(0.45), [p] = T(3.3), [f, b] = T("compact"), [g, u] = T(0), [m, S] = T(null), [y, k] = T(null), [x, W] = T(0), M = (C) => {
-    f === "compact" && (S(C), b("expanding"), u(0), setTimeout(() => u(1), 50), setTimeout(() => u(2), 800), setTimeout(() => u(3), 1200), setTimeout(() => u(4), 1600), setTimeout(() => u(5), 2e3), setTimeout(() => {
-      u(6), b("expanded");
+  const [f] = A(20), [c] = A(!1), [p] = A(!0), [h] = A(0.45), [b] = A(3.3), [u, g] = A("compact"), [m, x] = A(0), [w, P] = A(null), [y, D] = A(null), [B, k] = A(0), V = (C) => {
+    u === "compact" && (P(C), g("expanding"), x(0), setTimeout(() => x(1), 50), setTimeout(() => x(2), 800), setTimeout(() => x(3), 1200), setTimeout(() => x(4), 1600), setTimeout(() => x(5), 2e3), setTimeout(() => {
+      x(6), g("expanded");
     }, 2400));
-  }, P = () => {
-    y ? (k(null), W(0)) : f === "expanded" && (b("collapsing"), u(0), S(null), setTimeout(() => {
-      b((C) => C === "collapsing" ? "compact" : C);
+  }, v = () => {
+    y ? (D(null), k(0)) : u === "expanded" && (g("collapsing"), x(0), P(null), setTimeout(() => {
+      g((C) => C === "collapsing" ? "compact" : C);
     }, 1e3));
-  }, Y = (C) => {
-    k(C), W(0);
+  }, W = (C) => {
+    D(C), k(0);
   };
   J.useEffect(() => {
     if (!y) return;
-    const C = performance.now(), z = 1200, j = () => {
-      const le = performance.now() - C, oe = Math.min(1, le / z);
-      W(oe), oe < 1 && requestAnimationFrame(j);
-    }, ke = requestAnimationFrame(j);
-    return () => cancelAnimationFrame(ke);
+    const C = performance.now(), ke = 1200, oe = () => {
+      const Ne = performance.now() - C, Te = Math.min(1, Ne / ke);
+      k(Te), Te < 1 && requestAnimationFrame(oe);
+    }, le = requestAnimationFrame(oe);
+    return () => cancelAnimationFrame(le);
   }, [y]);
-  const v = () => {
-    k(null), W(0);
-  }, L = o.find((C) => C.name === m), Q = L?.status ?? "online", V = L?.dbSync ?? !0, te = L?.metrics, ie = L?.alerts, O = 330, B = 340, ne = y ? 1.15 : 1, Se = y ? -(y.ex - O) * 0.06 : 0, $e = y ? -(y.ey - B) * 0.06 : 0;
-  return /* @__PURE__ */ d("div", { className: "app", children: [
+  const X = () => {
+    D(null), k(0);
+  }, z = o.find((C) => C.name === w), te = z?.status ?? "online", ie = z?.dbSync ?? !0, I = z?.metrics, F = z?.alerts, ne = 330, Se = 340, $e = y ? 1.15 : 1, Q = y ? -(y.ex - ne) * 0.06 : 0, N = y ? -(y.ey - Se) * 0.06 : 0;
+  return /* @__PURE__ */ d("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -5697,12 +5700,12 @@ function Si({
           inset: 0,
           zIndex: 0,
           background: "#020810",
-          backgroundImage: i ? `url(${i})` : void 0,
+          backgroundImage: `url(${i})`,
           backgroundSize: "cover",
           backgroundPosition: "center center",
           backgroundRepeat: "no-repeat",
           transition: "transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
-          transform: `translate(${Se}px, ${$e}px) scale(${ne})`,
+          transform: `translate(${Q}px, ${N}px) scale(${$e})`,
           willChange: "transform"
         }
       }
@@ -5719,32 +5722,33 @@ function Si({
       {
         className: "scene",
         style: {
-          cursor: f === "expanded" ? "zoom-out" : "default"
+          cursor: u === "expanded" ? "zoom-out" : "default"
         },
-        onClick: P,
+        onClick: v,
         children: /* @__PURE__ */ e(
           Wt,
           {
-            viewState: f,
-            animPhase: g,
-            selectedSystem: m,
+            viewState: u,
+            animPhase: m,
+            selectedSystem: w,
             selectedComponent: y,
-            drillAnimPhase: x,
-            rotateY: a,
-            autoRotateComponents: s,
-            componentScale: c,
-            drillZoom: p,
-            autoRotateCarousel: l,
-            carouselSpeed: h,
-            onSelectSystem: M,
-            onBackgroundClick: P,
-            onComponentClick: Y,
-            onCloseDrill: v,
-            selectedSystemStatus: Q,
-            selectedSystemDbSync: V,
-            selectedSystemMetrics: te,
-            selectedSystemAlerts: ie,
-            children: r
+            drillAnimPhase: B,
+            rotateY: f,
+            autoRotateComponents: c,
+            componentScale: h,
+            drillZoom: b,
+            autoRotateCarousel: p,
+            carouselSpeed: a,
+            logoUrl: r,
+            onSelectSystem: V,
+            onBackgroundClick: v,
+            onComponentClick: W,
+            onCloseDrill: X,
+            selectedSystemStatus: te,
+            selectedSystemDbSync: ie,
+            selectedSystemMetrics: I,
+            selectedSystemAlerts: F,
+            children: l
           }
         )
       }
@@ -5757,21 +5761,21 @@ function $(t, n, o = 24) {
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
   });
 }
-function ht(t) {
+function bt(t) {
   return t === "critical" || t === "offline" ? "#ff2255" : t === "warning" ? "#ff8c00" : "#00e5ff";
 }
 function me(t, n, o) {
-  const i = t === "online" ? "online" : t, r = ht(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", h = i === "warning" && s > 85 ? "warning" : i === "critical" ? "critical" : "online", c = i === "critical" && n === "APP-03" ? "critical" : "online", p = i === "offline" ? "offline" : "online";
+  const i = t === "online" ? "online" : t, r = bt(t), a = o?.cpuLoad ?? 50, s = o?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", f = i === "warning" && s > 85 ? "warning" : i === "critical" ? "critical" : "online", c = i === "critical" && n === "APP-03" ? "critical" : "online", p = i === "offline" ? "offline" : "online";
   return [
-    { id: "cpu-0", label: "CPU-0", status: l, detail: i === "critical" ? "Core overload" : i === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(Ie, { color: r, label: "CPU-0", status: l, load: a }) },
-    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(Ie, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
-    { id: "heap-0", label: "HEAP-0", status: h, detail: h === "warning" ? "Memory heap usage" : h === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(Oe, { color: "#8855ee", label: "HEAP-0", status: h, usedPercent: s }) },
-    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(Oe, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
+    { id: "cpu-0", label: "CPU-0", status: l, detail: i === "critical" ? "Core overload" : i === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(Oe, { color: r, label: "CPU-0", status: l, load: a }) },
+    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(Oe, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
+    { id: "heap-0", label: "HEAP-0", status: f, detail: f === "warning" ? "Memory heap usage" : f === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(De, { color: "#8855ee", label: "HEAP-0", status: f, usedPercent: s }) },
+    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(De, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
     { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
     { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
     { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-3", status: "online", activity: a > 50 }) },
-    { id: "thread-pool", label: "THREAD-POOL", status: c, detail: c === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(I, { color: r, label: "THREAD-POOL", status: c }) },
-    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(ft, { color: r, label: "NET", status: p }) }
+    { id: "thread-pool", label: "THREAD-POOL", status: c, detail: c === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(L, { color: r, label: "THREAD-POOL", status: c }) },
+    { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(ut, { color: r, label: "NET", status: p }) }
   ];
 }
 function xe(t) {
@@ -5787,22 +5791,22 @@ function xe(t) {
     { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: $(55, 20) }
   ];
 }
-function ut(t, n, o) {
-  const i = t === "online" ? "online" : t, r = ht(t), a = i === "critical" || i === "offline" ? i : "online", s = i === "warning" ? "warning" : "online", l = i === "critical" ? "critical" : "online";
+function gt(t, n, o) {
+  const i = t === "online" ? "online" : t, r = bt(t), a = i === "critical" || i === "offline" ? i : "online", s = i === "warning" ? "warning" : "online", l = i === "critical" ? "critical" : "online";
   return [
-    { id: "port-1", label: "PORT-1", status: "online", element: /* @__PURE__ */ e(N, { color: r, label: "PORT-1", status: "online" }) },
-    { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(N, { color: r, label: "PORT-2", status: "online" }) },
-    { id: "port-3", label: "PORT-3", status: a, detail: i === "critical" ? "Gateway timeout" : i === "offline" ? "Unreachable" : void 0, element: /* @__PURE__ */ e(N, { color: r, label: "PORT-3", status: a }) },
-    { id: "port-4", label: "PORT-4", status: "online", element: /* @__PURE__ */ e(N, { 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(N, { color: r, label: "PORT-5", status: s }) },
-    { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(N, { color: r, label: "PORT-6", status: "online" }) },
-    { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(N, { color: r, label: "PORT-7", status: "online" }) },
-    { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(N, { 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(I, { color: r, label: "HTTP-WORKER", status: l }) },
-    { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(I, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
+    { id: "port-1", label: "PORT-1", status: "online", element: /* @__PURE__ */ e(M, { color: r, label: "PORT-1", status: "online" }) },
+    { id: "port-2", label: "PORT-2", status: "online", element: /* @__PURE__ */ e(M, { color: r, label: "PORT-2", status: "online" }) },
+    { id: "port-3", label: "PORT-3", status: a, detail: i === "critical" ? "Gateway timeout" : i === "offline" ? "Unreachable" : void 0, element: /* @__PURE__ */ e(M, { color: r, label: "PORT-3", status: a }) },
+    { id: "port-4", label: "PORT-4", status: "online", element: /* @__PURE__ */ e(M, { 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(M, { color: r, label: "PORT-5", status: s }) },
+    { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(M, { color: r, label: "PORT-6", status: "online" }) },
+    { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(M, { color: r, label: "PORT-7", status: "online" }) },
+    { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(M, { 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(L, { color: r, label: "HTTP-WORKER", status: l }) },
+    { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
   ];
 }
-function bt(t) {
+function yt(t) {
   const n = t?.traffic ?? 50;
   return [
     { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: $(n, 20) },
@@ -5815,13 +5819,13 @@ function bt(t) {
 function ai(t, n, o) {
   const i = t === "online" ? "online" : t, r = i === "critical" ? "critical" : "online", a = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", s = i === "critical" ? "critical" : "online";
   return [
-    { id: "inst-0", label: "INST-0", status: "online", element: /* @__PURE__ */ e(N, { color: "#bb55ff", label: "INST-0", status: "online" }) },
-    { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(N, { 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(N, { color: "#bb55ff", label: "INST-2", status: r }) },
-    { id: "queue-0", label: "QUEUE-0", status: a, detail: i === "critical" ? "Queue full" : i === "offline" ? "Unreachable" : i === "warning" ? "Queue depth warning" : void 0, element: /* @__PURE__ */ e(I, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
-    { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(I, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
-    { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(I, { 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(I, { color: "#bb55ff", label: "WORKER-3", status: s }) }
+    { id: "inst-0", label: "INST-0", status: "online", element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "INST-0", status: "online" }) },
+    { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(M, { 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(M, { color: "#bb55ff", label: "INST-2", status: r }) },
+    { id: "queue-0", label: "QUEUE-0", status: a, detail: i === "critical" ? "Queue full" : i === "offline" ? "Unreachable" : i === "warning" ? "Queue depth warning" : void 0, element: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
+    { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
+    { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(L, { 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(L, { color: "#bb55ff", label: "WORKER-3", status: s }) }
   ];
 }
 function li(t) {
@@ -5834,17 +5838,17 @@ function li(t) {
     { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: $(n * 0.9, 15) }
   ];
 }
-function De(t, n, o) {
-  const i = t === "online" ? "online" : t, r = "#ff8c00", a = o?.capacity ?? 72, s = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", l = i === "warning" && n === "DB-STB" ? "warning" : "online", h = i === "critical" ? "critical" : "online", c = i === "warning" ? "warning" : "online";
+function We(t, n, o) {
+  const i = t === "online" ? "online" : t, r = "#ff8c00", a = o?.capacity ?? 72, s = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", l = i === "warning" && n === "DB-STB" ? "warning" : "online", f = i === "critical" ? "critical" : "online", c = i === "warning" ? "warning" : "online";
   return [
-    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Ae, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
-    { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Ae, { 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(Ae, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
-    { id: "conn-pool", label: "CONN-POOL", status: h, detail: h === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(I, { color: r, label: "CONN-POOL", status: h }) },
-    { id: "query-cache", label: "QUERY-CACHE", status: c, detail: c === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(I, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
+    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Le, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
+    { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Le, { 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(Le, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
+    { id: "conn-pool", label: "CONN-POOL", status: f, detail: f === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(L, { color: r, label: "CONN-POOL", status: f }) },
+    { id: "query-cache", label: "QUERY-CACHE", status: c, detail: c === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(L, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
   ];
 }
-function We(t) {
+function ze(t) {
   const n = t?.capacity ?? 70;
   return [
     { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: $(40, 20) },
@@ -5854,7 +5858,7 @@ function We(t) {
     { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: $(75, 12) }
   ];
 }
-function Ke(t) {
+function Je(t) {
   const n = [
     t.wdStatus,
     t.msStatus,
@@ -5867,7 +5871,7 @@ function Ke(t) {
   return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
 function $i(t) {
-  const n = Ke(t), o = n === "critical" || n === "offline", i = n === "warning";
+  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
@@ -5889,7 +5893,7 @@ function $i(t) {
   ];
 }
 function ki(t) {
-  const n = Ke(t), o = n === "critical" || n === "offline", i = n === "warning";
+  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -5911,10 +5915,10 @@ const si = [
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
 function di({ config: t }) {
-  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: h, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
+  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: f, pdbStatus: c, sdbStatus: p, dbSync: h } = t;
   return /* @__PURE__ */ d(Ce, { children: [
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 120,
@@ -5922,11 +5926,11 @@ function di({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(ct, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(ft, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 220,
         ey: 260,
@@ -5941,11 +5945,11 @@ function di({ config: t }) {
           name: "WEB-DISP",
           status: r,
           context: { traffic: 78 },
-          subComponents: ut(r),
-          graphSeries: bt({ traffic: 78 })
+          subComponents: gt(r),
+          graphSeries: yt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          dt,
+          pt,
           {
             rotateY: o,
             autoRotate: i,
@@ -5959,7 +5963,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 440,
         ey: 260,
@@ -5993,7 +5997,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 165,
         ey: 390,
@@ -6026,7 +6030,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 390,
@@ -6059,7 +6063,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 495,
         ey: 390,
@@ -6072,9 +6076,9 @@ function di({ config: t }) {
         componentInfo: {
           type: "server",
           name: "APP-03",
-          status: h,
+          status: f,
           context: { cpuLoad: 45, memLoad: 63 },
-          subComponents: me(h, "APP-03", { cpuLoad: 45, memLoad: 63 }),
+          subComponents: me(f, "APP-03", { cpuLoad: 45, memLoad: 63 }),
           graphSeries: xe({ cpuLoad: 45, memLoad: 63 })
         },
         children: /* @__PURE__ */ e(
@@ -6082,7 +6086,7 @@ function di({ config: t }) {
           {
             rotateY: o,
             autoRotate: i,
-            status: h,
+            status: f,
             name: "APP-03",
             cpuLoad: 45,
             memLoad: 63,
@@ -6092,7 +6096,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 200,
         ey: 520,
@@ -6107,11 +6111,11 @@ function di({ config: t }) {
           name: "DB-PRI",
           status: c,
           context: { capacity: 72 },
-          subComponents: De(c, "DB-PRI", { capacity: 72 }),
-          graphSeries: We({ capacity: 72 })
+          subComponents: We(c, "DB-PRI", { capacity: 72 }),
+          graphSeries: ze({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Le,
+          Ie,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6125,7 +6129,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 460,
         ey: 520,
@@ -6140,11 +6144,11 @@ function di({ config: t }) {
           name: "DB-STB",
           status: p,
           context: { capacity: 72 },
-          subComponents: De(p, "DB-STB", { capacity: 72 }),
-          graphSeries: We({ capacity: 72 })
+          subComponents: We(p, "DB-STB", { capacity: 72 }),
+          graphSeries: ze({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Le,
+          Ie,
           {
             rotateY: o,
             autoRotate: i,
@@ -6158,7 +6162,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 520,
@@ -6167,17 +6171,17 @@ function di({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(st, { synced: f, latencyMs: f ? 8 : 342 })
+        children: /* @__PURE__ */ e(ct, { synced: h, latencyMs: h ? 8 : 342 })
       }
     ),
     /* @__PURE__ */ e(ci, { config: t })
   ] });
 }
 function ci({ config: t }) {
-  const n = J.useContext(ae), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: h, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
+  const n = J.useContext(ae), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: f, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 220,
         ey: 260,
@@ -6192,7 +6196,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 440,
         ey: 260,
@@ -6207,7 +6211,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 165,
         ey: 390,
@@ -6222,7 +6226,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 330,
         ey: 390,
@@ -6237,7 +6241,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 495,
         ey: 390,
@@ -6252,7 +6256,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 200,
         ey: 520,
@@ -6267,22 +6271,22 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 460,
         ey: 520,
-        status: h,
+        status: f,
         title: "DB-STB",
-        msg: h === "critical" || h === "offline" ? "Sync failure." : "Replication lag.",
+        msg: f === "critical" || f === "offline" ? "Sync failure." : "Replication lag.",
         offsetX: 110,
         offsetY: 30,
         align: "right",
         isVisible: !!p,
-        internalRef: h !== "online" ? "PLATTER-2" : void 0
+        internalRef: f !== "online" ? "PLATTER-2" : void 0
       }
     ),
     !c && /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 330,
         ey: 520,
@@ -6300,17 +6304,17 @@ function ci({ config: t }) {
 }
 function Ri({ config: t, ...n }) {
   return /* @__PURE__ */ e(
-    lt,
+    dt,
     {
       name: t.name,
-      status: Ke(t),
+      status: Je(t),
       connections: si,
       ...n,
       children: /* @__PURE__ */ e(di, { config: t })
     }
   );
 }
-function Ze(t) {
+function et(t) {
   const n = [
     t.dispStatus,
     t.srv1Status,
@@ -6322,7 +6326,7 @@ function Ze(t) {
   return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
 function Pi(t) {
-  const n = Ze(t), o = n === "critical" || n === "offline", i = n === "warning";
+  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
@@ -6344,7 +6348,7 @@ function Pi(t) {
   ];
 }
 function Ci(t) {
-  const n = Ze(t), o = n === "critical" || n === "offline", i = n === "warning";
+  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
@@ -6362,10 +6366,10 @@ const pi = [
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
 function fi({ config: t }) {
-  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: h, sdbStatus: c, dbSync: p } = t;
+  const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: f, sdbStatus: c, dbSync: p } = t;
   return /* @__PURE__ */ d(Ce, { children: [
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 120,
@@ -6373,11 +6377,11 @@ function fi({ config: t }) {
         zIndex: 10,
         visibleAtPhase: 2,
         color: "#00e5ff",
-        children: /* @__PURE__ */ e(ct, { status: "online", scale: 1.5 })
+        children: /* @__PURE__ */ e(ft, { status: "online", scale: 1.5 })
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 260,
@@ -6392,11 +6396,11 @@ function fi({ config: t }) {
           name: "DISP-01",
           status: r,
           context: { traffic: 78 },
-          subComponents: ut(r),
-          graphSeries: bt({ traffic: 78 })
+          subComponents: gt(r),
+          graphSeries: yt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
-          dt,
+          pt,
           {
             rotateY: o,
             autoRotate: i,
@@ -6410,7 +6414,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 165,
         ey: 390,
@@ -6443,7 +6447,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 390,
@@ -6476,7 +6480,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 495,
         ey: 390,
@@ -6509,7 +6513,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 200,
         ey: 520,
@@ -6522,17 +6526,17 @@ function fi({ config: t }) {
         componentInfo: {
           type: "database",
           name: "DB-PRI",
-          status: h,
+          status: f,
           context: { capacity: 72 },
-          subComponents: De(h, "DB-PRI", { capacity: 72 }),
-          graphSeries: We({ capacity: 72 })
+          subComponents: We(f, "DB-PRI", { capacity: 72 }),
+          graphSeries: ze({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Le,
+          Ie,
           {
             rotateY: -o,
             autoRotate: i,
-            status: h,
+            status: f,
             name: "DB-PRI",
             capacity: 72,
             connections: 284,
@@ -6542,7 +6546,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 460,
         ey: 520,
@@ -6557,11 +6561,11 @@ function fi({ config: t }) {
           name: "DB-STB",
           status: c,
           context: { capacity: 72 },
-          subComponents: De(c, "DB-STB", { capacity: 72 }),
-          graphSeries: We({ capacity: 72 })
+          subComponents: We(c, "DB-STB", { capacity: 72 }),
+          graphSeries: ze({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Le,
+          Ie,
           {
             rotateY: o,
             autoRotate: i,
@@ -6575,7 +6579,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         ex: 330,
         ey: 520,
@@ -6584,17 +6588,17 @@ function fi({ config: t }) {
         visibleAtPhase: 6,
         fixedScale: 1,
         bare: !0,
-        children: /* @__PURE__ */ e(st, { synced: p, latencyMs: p ? 8 : 342 })
+        children: /* @__PURE__ */ e(ct, { synced: p, latencyMs: p ? 8 : 342 })
       }
     ),
     /* @__PURE__ */ e(hi, { config: t })
   ] });
 }
 function hi({ config: t }) {
-  const n = J.useContext(ae), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: h } = t, c = n?.isSelected && n?.isExpandedPos;
+  const n = J.useContext(ae), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: f } = t, c = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 330,
         ey: 260,
@@ -6609,7 +6613,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 165,
         ey: 390,
@@ -6624,7 +6628,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 330,
         ey: 390,
@@ -6639,7 +6643,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 495,
         ey: 390,
@@ -6654,7 +6658,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 200,
         ey: 520,
@@ -6669,7 +6673,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         ex: 460,
         ey: 520,
@@ -6683,8 +6687,8 @@ function hi({ config: t }) {
         internalRef: l !== "online" ? "PLATTER-2" : void 0
       }
     ),
-    !h && /* @__PURE__ */ e(
-      D,
+    !f && /* @__PURE__ */ e(
+      O,
       {
         ex: 330,
         ey: 520,
@@ -6702,10 +6706,10 @@ function hi({ config: t }) {
 }
 function Ei({ config: t, ...n }) {
   return /* @__PURE__ */ e(
-    lt,
+    dt,
     {
       name: t.name,
-      status: Ze(t),
+      status: et(t),
       connections: pi,
       ...n,
       children: /* @__PURE__ */ e(fi, { config: t })
@@ -6714,56 +6718,56 @@ function Ei({ config: t, ...n }) {
 }
 export {
   Si as AIOPsDashboard,
-  Ie as CPU3D,
+  Oe as CPU3D,
   Wt as Carousel,
-  Qe as CarouselContext,
-  qe as CarouselItemContext,
+  Ge as CarouselContext,
+  Ke as CarouselItemContext,
   It as ComponentDialog,
   wi as ComponentDrillView,
-  Le as Database3D,
+  Ie as Database3D,
   ye as DriveBay3D,
   pi as EXCHANGE_CONNECTIONS,
   Ei as ExchangeService,
   mi as HOLO_BLUE,
   yi as HOLO_CYAN,
-  je as HOLO_GLASS,
+  Qe as HOLO_GLASS,
   we as HOLO_SURFACE,
   ei as HistoricalGraphPanel,
   Mt as HoloBase,
-  ct as Human3D,
-  Oe as Memory3D,
+  ft as Human3D,
+  De as Memory3D,
   Zt as MessageServer3D,
-  ft as NetworkBlock3D,
-  D as NodeCallout,
-  Ae as Platter3D,
-  N as Port3D,
+  ut as NetworkBlock3D,
+  O as NodeCallout,
+  Le as Platter3D,
+  M as Port3D,
   Ri as SAPService,
   si as SAP_CONNECTIONS,
-  w as STATUS_CFG,
+  S as STATUS_CFG,
   ue as Server3D,
-  lt as Service,
+  dt as Service,
   ae as ServiceContext,
   At as ServiceDialog,
-  A as ServiceNode,
+  T as ServiceNode,
   zt as SvgConnection,
-  st as SyncBridge,
-  I as ThreadPool3D,
-  dt as WebDispatcher3D,
+  ct as SyncBridge,
+  L as ThreadPool3D,
+  pt as WebDispatcher3D,
   Ci as computeExchangeDialogAlerts,
   Pi as computeExchangeDialogMetrics,
-  Ze as computeExchangeServiceStatus,
+  et as computeExchangeServiceStatus,
   ki as computeSAPDialogAlerts,
   $i as computeSAPDialogMetrics,
-  Ke as computeSAPServiceStatus,
-  We as getDatabaseGraphSeries,
-  De as getDatabaseSubComponents,
-  bt as getDispatcherGraphSeries,
-  ut as getDispatcherSubComponents,
+  Je as computeSAPServiceStatus,
+  ze as getDatabaseGraphSeries,
+  We as getDatabaseSubComponents,
+  yt as getDispatcherGraphSeries,
+  gt as getDispatcherSubComponents,
   li as getMessageServerGraphSeries,
   ai as getMessageServerSubComponents,
   xe as getServerGraphSeries,
   me as getServerSubComponents,
-  Xe as makeFaceStyles,
+  qe as makeFaceStyles,
   xi as useCarouselContext,
   vi as useCarouselItemContext
 };