react-aiops 0.1.2 → 0.1.3

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 Xe, useContext as ve, useState as A, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
+import J, { createContext as Xe, useContext as ve, useState as L, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
 const Tt = {
   info: { color: "#00ff88", bg: "rgba(0, 255, 136, 0.1)", border: "#00ff88", icon: "✅" },
   warning: { color: "#ff8c00", bg: "rgba(255, 140, 0, 0.1)", border: "#ff8c00", icon: "⚠️" },
@@ -146,7 +146,7 @@ function At({
                 }
               ),
               c.map((p, h) => {
-                const b = Tt[p.level];
+                const y = Tt[p.level];
                 return /* @__PURE__ */ d(
                   "div",
                   {
@@ -154,15 +154,15 @@ function At({
                       display: "flex",
                       gap: 8,
                       alignItems: "flex-start",
-                      color: b.color,
+                      color: y.color,
                       fontSize: 12,
-                      background: b.bg,
+                      background: y.bg,
                       padding: "6px 10px",
                       borderRadius: 4,
-                      borderLeft: `2px solid ${b.border}`
+                      borderLeft: `2px solid ${y.border}`
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { children: b.icon }),
+                      /* @__PURE__ */ e("span", { children: y.icon }),
                       " ",
                       /* @__PURE__ */ e("span", { children: p.message })
                     ]
@@ -177,7 +177,7 @@ function At({
     }
   );
 }
-const S = {
+const w = {
   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)" },
@@ -235,12 +235,12 @@ function qe(t, n, o) {
 }
 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;
+  return w[t]?.color ?? w.online.color;
 }
 function Lt(t, n, o) {
   return t >= o ? "#ff2255" : t >= n ? "#ff8c00" : "#00e5ff";
 }
-function Fe(t, n, o, i) {
+function Le(t, n, o, i) {
   return t === "offline" ? "offline" : t === "critical" && n >= i ? "critical" : (t === "critical" || t === "warning") && n >= o ? "warning" : "online";
 }
 function It({
@@ -250,42 +250,64 @@ function It({
   sceneWidth: i = 660,
   sceneHeight: r = 600
 }) {
-  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 = {
+  const { type: a, name: s, status: l, ex: f, ey: c, context: p = {} } = t, h = st(l), y = f >= i / 2, b = c >= r / 2, g = {
     position: "fixed",
-    ...b ? { right: 28 } : { left: 28 },
-    ...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: w,
-      unit: "%",
-      status: D,
-      icon: "cpu",
-      delay: 0
-    },
-    {
-      id: "mem",
-      label: "MEMORY",
-      sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
-      value: P,
-      unit: "%",
-      status: B,
-      icon: "mem",
-      delay: 1
-    },
-    {
-      id: "storage",
-      label: "STORAGE",
-      sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
-      value: y,
-      unit: "%",
-      status: k,
-      icon: "disk",
-      delay: 2
-    }
-  ];
+    ...y ? { right: 28 } : { left: 28 },
+    ...b ? { bottom: 110 } : { top: 72 }
+  }, m = y ? 40 : -40, x = b ? 30 : -30, v = p.dialogMetrics;
+  let k;
+  if (v && v.length > 0)
+    k = v.map((u, R) => {
+      const A = u.warnAt ?? 70, $ = u.critAt ?? 85;
+      return {
+        id: u.id,
+        label: u.label,
+        sublabel: u.sublabel,
+        value: u.value,
+        unit: u.unit ?? "%",
+        status: Le(l, u.value, A, $),
+        icon: u.icon ?? "cpu",
+        delay: R,
+        colorOverride: u.color,
+        warnAt: A,
+        critAt: $
+      };
+    });
+  else {
+    const u = p.cpuLoad ?? p.traffic ?? 50, R = p.memLoad ?? p.queueDepth ?? 60, A = p.capacity ?? 72, $ = Le(l, u, 70, 85), V = Le(l, R, 75, 88), W = Le(l, A, 75, 90);
+    k = [
+      {
+        id: "cpu",
+        label: a === "dispatcher" ? "TRAFFIC" : a === "messageServer" ? "QUEUE" : "CPU",
+        sublabel: a === "dispatcher" ? "PORT LOAD" : a === "messageServer" ? "QUEUE DEPTH" : "PROCESSOR",
+        value: u,
+        unit: "%",
+        status: $,
+        icon: "cpu",
+        delay: 0
+      },
+      {
+        id: "mem",
+        label: "MEMORY",
+        sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
+        value: R,
+        unit: "%",
+        status: V,
+        icon: "mem",
+        delay: 1
+      },
+      {
+        id: "storage",
+        label: "STORAGE",
+        sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
+        value: A,
+        unit: "%",
+        status: W,
+        icon: "disk",
+        delay: 2
+      }
+    ];
+  }
   return /* @__PURE__ */ d(
     "div",
     {
@@ -307,7 +329,7 @@ function It({
         animation: o ? "comp-dialog-border-glow 3s ease-in-out infinite" : "none",
         "--dialog-color": h
       },
-      onClick: (v) => v.stopPropagation(),
+      onClick: (u) => u.stopPropagation(),
       children: [
         /* @__PURE__ */ e(
           "div",
@@ -371,12 +393,12 @@ function It({
             borderRight: `2px solid ${h}66`,
             borderRadius: "0 0 14px 0"
           }
-        ].map((v, W) => /* @__PURE__ */ e(
+        ].map((u, R) => /* @__PURE__ */ e(
           "div",
           {
-            style: { position: "absolute", width: 18, height: 18, pointerEvents: "none", ...v }
+            style: { position: "absolute", width: 18, height: 18, pointerEvents: "none", ...u }
           },
-          W
+          R
         )),
         /* @__PURE__ */ d(
           "div",
@@ -455,8 +477,8 @@ function It({
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: (v) => {
-                    v.stopPropagation(), n();
+                  onClick: (u) => {
+                    u.stopPropagation(), n();
                   },
                   style: {
                     width: 34,
@@ -474,11 +496,11 @@ function It({
                     lineHeight: 1,
                     flexShrink: 0
                   },
-                  onMouseEnter: (v) => {
-                    v.currentTarget.style.background = `${h}22`, v.currentTarget.style.boxShadow = `0 0 12px ${h}44`;
+                  onMouseEnter: (u) => {
+                    u.currentTarget.style.background = `${h}22`, u.currentTarget.style.boxShadow = `0 0 12px ${h}44`;
                   },
-                  onMouseLeave: (v) => {
-                    v.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${h}08 100%)`, v.currentTarget.style.boxShadow = "none";
+                  onMouseLeave: (u) => {
+                    u.currentTarget.style.background = `linear-gradient(135deg, rgba(0,0,0,0.5) 0%, ${h}08 100%)`, u.currentTarget.style.boxShadow = "none";
                   },
                   children: "×"
                 }
@@ -497,7 +519,7 @@ function It({
               position: "relative",
               zIndex: 2
             },
-            children: V.map((v) => /* @__PURE__ */ e(Ot, { metric: v, visible: o, accentColor: h }, v.id))
+            children: k.map((u) => /* @__PURE__ */ e(Ot, { metric: u, visible: o, accentColor: h }, u.id))
           }
         ),
         /* @__PURE__ */ d(
@@ -551,7 +573,7 @@ function Ot({
   visible: n,
   accentColor: o
 }) {
-  const { label: i, sublabel: r, value: a, unit: s, status: l, icon: f, delay: c } = t, p = Lt(a, 70, 85), h = st(l);
+  const { label: i, sublabel: r, value: a, unit: s, status: l, icon: f, delay: c, colorOverride: p, warnAt: h = 70, critAt: y = 85 } = t, b = p ?? Lt(a, h, y), g = p ?? st(l);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -571,8 +593,8 @@ function Ot({
               width: 52,
               height: 52,
               borderRadius: 12,
-              border: `1px solid ${h}44`,
-              background: `linear-gradient(135deg, ${h}0c 0%, ${h}04 100%)`,
+              border: `1px solid ${g}44`,
+              background: `linear-gradient(135deg, ${g}0c 0%, ${g}04 100%)`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -582,7 +604,7 @@ function Ot({
               animation: n ? `comp-dialog-icon-pop 0.5s ${Ve} ${0.35 + c * 0.12}s both` : "none"
             },
             children: [
-              /* @__PURE__ */ e(Dt, { type: f, color: h }),
+              /* @__PURE__ */ e(Dt, { type: f, color: g }),
               (l === "warning" || l === "critical") && /* @__PURE__ */ e(
                 "div",
                 {
@@ -593,8 +615,8 @@ function Ot({
                     width: 5,
                     height: 5,
                     borderRadius: "50%",
-                    background: h,
-                    boxShadow: `0 0 6px ${h}`,
+                    background: g,
+                    boxShadow: `0 0 6px ${g}`,
                     animation: "holo-led-blink 1.2s infinite"
                   }
                 }
@@ -645,8 +667,8 @@ function Ot({
                     style: {
                       fontSize: 20,
                       fontWeight: 700,
-                      color: p,
-                      textShadow: `0 0 8px ${p}44`,
+                      color: b,
+                      textShadow: `0 0 8px ${b}44`,
                       fontFamily: "'Courier New', monospace"
                     },
                     children: [
@@ -678,8 +700,8 @@ function Ot({
                       width: `${a}%`,
                       height: "100%",
                       borderRadius: 3,
-                      background: `linear-gradient(90deg, ${p}66, ${p})`,
-                      boxShadow: `0 0 8px ${p}44`,
+                      background: `linear-gradient(90deg, ${b}66, ${b})`,
+                      boxShadow: `0 0 8px ${b}44`,
                       transformOrigin: "left center",
                       animation: n ? `comp-dialog-metric-fill 0.8s ${_e} ${0.4 + c * 0.12}s both` : "none"
                     }
@@ -690,7 +712,7 @@ function Ot({
                   {
                     style: {
                       position: "absolute",
-                      left: "70%",
+                      left: `${h}%`,
                       top: 0,
                       bottom: 0,
                       width: 1,
@@ -703,7 +725,7 @@ function Ot({
                   {
                     style: {
                       position: "absolute",
-                      left: "85%",
+                      left: `${y}%`,
                       top: 0,
                       bottom: 0,
                       width: 1,
@@ -714,16 +736,18 @@ function Ot({
               ]
             }
           ),
-          /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 2 }, children: [
-            /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "rgba(255,255,255,0.15)", letterSpacing: "0.1em" }, children: "0" }),
+          /* @__PURE__ */ d("div", { style: { position: "relative", height: 10, marginTop: 2 }, children: [
+            /* @__PURE__ */ e("span", { style: { position: "absolute", left: 0, fontSize: 6, color: "rgba(255,255,255,0.15)", letterSpacing: "0.1em" }, children: "0" }),
             /* @__PURE__ */ e(
               "span",
               {
                 style: {
+                  position: "absolute",
+                  left: `${h}%`,
+                  transform: "translateX(-50%)",
                   fontSize: 6,
                   color: "rgba(255,140,0,0.3)",
-                  letterSpacing: "0.1em",
-                  marginRight: "18%"
+                  letterSpacing: "0.1em"
                 },
                 children: "WARN"
               }
@@ -732,15 +756,17 @@ function Ot({
               "span",
               {
                 style: {
+                  position: "absolute",
+                  left: `${y}%`,
+                  transform: "translateX(-50%)",
                   fontSize: 6,
                   color: "rgba(255,34,85,0.3)",
-                  letterSpacing: "0.1em",
-                  marginRight: "6%"
+                  letterSpacing: "0.1em"
                 },
                 children: "CRIT"
               }
             ),
-            /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "rgba(255,255,255,0.15)", letterSpacing: "0.1em" }, children: "100" })
+            /* @__PURE__ */ e("span", { style: { position: "absolute", right: 0, fontSize: 6, color: "rgba(255,255,255,0.15)", letterSpacing: "0.1em" }, children: "100" })
           ] })
         ] })
       ]
@@ -852,30 +878,30 @@ function Wt({
   componentScale: c = 0.35,
   drillZoom: p = 3.3,
   autoRotateCarousel: h = !0,
-  carouselSpeed: b = 6e-3,
-  width: u = 950,
+  carouselSpeed: y = 6e-3,
+  width: b = 950,
   height: g = 790,
   onSelectSystem: m,
   onBackgroundClick: x,
-  onComponentClick: w,
-  onCloseDrill: P,
-  selectedSystemStatus: y = "online",
-  selectedSystemDbSync: D = !0,
-  selectedSystemMetrics: B,
-  selectedSystemAlerts: k
+  onComponentClick: v,
+  onCloseDrill: k,
+  selectedSystemStatus: u = "online",
+  selectedSystemDbSync: R = !0,
+  selectedSystemMetrics: A,
+  selectedSystemAlerts: $
 }) {
-  const [V, v] = A(0);
+  const [V, W] = L(0);
   Ee(() => {
-    let I;
+    let O;
     if ((o === "compact" || o === "collapsing") && h) {
       const F = () => {
-        v((ne) => ne + b), I = requestAnimationFrame(F);
+        W((ne) => ne + y), O = requestAnimationFrame(F);
       };
-      I = requestAnimationFrame(F);
+      O = requestAnimationFrame(F);
     }
-    return () => cancelAnimationFrame(I);
-  }, [o, h, b]);
-  const W = J.Children.toArray(t), X = W.length, z = Et(() => ({
+    return () => cancelAnimationFrame(O);
+  }, [o, h, y]);
+  const B = J.Children.toArray(t), X = B.length, z = Et(() => ({
     totalSystems: X,
     carouselRotation: V,
     viewState: o,
@@ -887,8 +913,8 @@ function Wt({
     componentScale: c,
     drillZoom: p,
     onSelectSystem: m,
-    onComponentClick: w,
-    containerWidth: u
+    onComponentClick: v,
+    containerWidth: b
   }), [
     X,
     V,
@@ -901,11 +927,11 @@ function Wt({
     c,
     p,
     m,
-    w,
-    u
-  ]), te = W.map((I, F) => /* @__PURE__ */ e(Ke.Provider, { value: { index: F }, children: I }, F)), ie = o === "expanded" || o === "expanding" && i >= 4;
+    v,
+    b
+  ]), te = B.map((O, F) => /* @__PURE__ */ e(Ke.Provider, { value: { index: F }, children: O }, 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: [
+    /* @__PURE__ */ d("div", { style: { position: "relative", width: b, height: g, margin: "0 auto", flexShrink: 0 }, children: [
       n && (o === "compact" || o === "collapsing") && /* @__PURE__ */ e(
         "img",
         {
@@ -928,24 +954,24 @@ function Wt({
       ),
       te
     ] }),
-    r && /* @__PURE__ */ e("div", { onClick: (I) => I.stopPropagation(), children: /* @__PURE__ */ e(
+    r && /* @__PURE__ */ e("div", { onClick: (O) => O.stopPropagation(), children: /* @__PURE__ */ e(
       At,
       {
         name: r,
-        status: y,
-        dbSync: D,
+        status: u,
+        dbSync: R,
         visible: ie && !a,
-        metrics: B,
-        alerts: k
+        metrics: A,
+        alerts: $
       }
     ) }),
-    a && /* @__PURE__ */ e("div", { onClick: (I) => I.stopPropagation(), children: /* @__PURE__ */ e(
+    a && /* @__PURE__ */ e("div", { onClick: (O) => O.stopPropagation(), children: /* @__PURE__ */ e(
       It,
       {
         component: a,
-        onClose: P,
+        onClose: k,
         visible: s >= 0.3,
-        sceneWidth: u,
+        sceneWidth: b,
         sceneHeight: g
       }
     ) })
@@ -1018,14 +1044,14 @@ function zt({
     ] })
   ] });
 }
-const Nt = [
+const Mt = [
   { scale: 1, op: 1, delay: "0.0s", bw: "2px", glow: 1 },
   { scale: 0.82, op: 0.88, delay: "0.5s", bw: "1.5px", glow: 0.7 },
   { scale: 0.64, op: 0.72, delay: "1.0s", bw: "1px", glow: 0.5 },
   { scale: 0.47, op: 0.58, delay: "1.5s", bw: "1px", glow: 0.35 },
   { scale: 0.3, op: 0.45, delay: "2.0s", bw: "1px", glow: 0.25 }
 ];
-function Mt({
+function Nt({
   children: t,
   size: n = 230,
   widthRatio: o = 1,
@@ -1191,7 +1217,7 @@ function Mt({
         background: `radial-gradient(ellipse, ${i}88 0%, ${i}33 40%, transparent 72%)`,
         filter: "blur(12px)"
       } }),
-      Nt.map((s, l) => /* @__PURE__ */ e("div", { style: {
+      Mt.map((s, l) => /* @__PURE__ */ e("div", { style: {
         position: "absolute",
         width: a * s.scale,
         height: n * s.scale,
@@ -1248,20 +1274,20 @@ function dt({
   _animPhase: c,
   _selectedSystem: p,
   _selectedComponent: h,
-  _rotateY: b,
-  _autoRotateComponents: u,
+  _rotateY: y,
+  _autoRotateComponents: b,
   _componentScale: g,
   _drillZoom: m,
   _onSelectSystem: x,
-  _onComponentClick: w,
-  _containerWidth: P
+  _onComponentClick: v,
+  _containerWidth: k
 }) {
-  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 = {
+  const u = ve(Ge), R = ve(Ke), A = a ?? R.index, $ = s ?? u?.totalSystems ?? 1, V = l ?? u?.carouselRotation ?? 0, W = f ?? u?.viewState ?? "compact", B = c ?? u?.animPhase ?? 0, X = p ?? u?.selectedSystem ?? null, z = h ?? u?.selectedComponent ?? null, te = y ?? u?.rotateY ?? 20, ie = b ?? u?.autoRotateComponents ?? !0, O = g ?? u?.componentScale ?? 0.35, F = m ?? u?.drillZoom ?? 3.3, ne = x ?? u?.onSelectSystem, Se = v ?? u?.onComponentClick, $e = k ?? u?.containerWidth ?? 950, Q = X === t, M = Q && (W === "expanded" || W === "expanding" && B >= 1), C = !M, ke = ($e - Ft) / 2, oe = it + ke, le = A / $ * Math.PI * 2 + V, Ne = 420, Te = 160, Re = oe + Math.cos(le) * Ne, se = 450 + Math.sin(le) * Te, mt = Math.round(se), Be = !Q && (W === "expanding" || W === "expanded"), xt = Be ? 0 : 1, Pe = C ? 0.3 + (Math.sin(le) + 1) * 0.1 : 1, vt = C ? Pe : O, Ae = W === "compact" || W === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", tt = Q && z, Fe = 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: Q,
-    isExpandedPos: N,
+    isExpandedPos: M,
     isCompact: C,
-    animPhase: W,
+    animPhase: B,
     compactCx: Re,
     compactCy: se,
     groupScale: Pe,
@@ -1286,12 +1312,12 @@ function dt({
         opacity: xt,
         transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Bt}`,
         filter: C && Math.sin(le) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
-        zIndex: Q ? 500 : Me ? 0 : mt,
+        zIndex: Q ? 500 : Be ? 0 : mt,
         transformOrigin: `${oe}px ${nt}px`,
-        transform: tt ? `translate(${-(wt - it) * Be}px, ${-(St - nt) * Be}px) scale(${Be})` : "none"
+        transform: tt ? `translate(${-(wt - it) * Fe}px, ${-(St - nt) * Fe}px) scale(${Fe})` : "none"
       },
       children: [
-        C && !Me && /* @__PURE__ */ e(
+        C && !Be && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -1363,9 +1389,9 @@ function dt({
           {
             style: {
               position: "absolute",
-              left: N ? oe : Re,
-              top: N ? 48 : se - 180,
-              transform: `translate(-50%, -50%) scale(${N ? 1.2 : Pe * 1.5})`,
+              left: M ? oe : Re,
+              top: M ? 48 : se - 180,
+              transform: `translate(-50%, -50%) scale(${M ? 1.2 : Pe * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
@@ -1389,7 +1415,7 @@ function dt({
             style: {
               position: "absolute",
               top: 0,
-              left: N ? ke : 0,
+              left: M ? ke : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
@@ -1403,7 +1429,7 @@ function dt({
                 y1: j.from[1],
                 x2: j.to[0],
                 y2: j.to[1],
-                show: Q && W >= (j.visibleAtPhase ?? 0),
+                show: Q && B >= (j.visibleAtPhase ?? 0),
                 color: j.color,
                 dur: j.duration
               },
@@ -1416,13 +1442,13 @@ function dt({
           {
             style: {
               position: "absolute",
-              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})`,
+              left: M ? oe : Re,
+              top: M ? 570 : se + 70,
+              transform: `translate(-50%, -50%) scaleX(${M ? 1 : 0.4}) scaleY(${M ? 1 : 0.6}) scale(${M ? 1 : Pe})`,
               transition: Ae,
               zIndex: 1
             },
-            children: /* @__PURE__ */ e(Mt, { size: $t, color: kt, widthRatio: Rt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
+            children: /* @__PURE__ */ e(Nt, { size: $t, color: kt, widthRatio: Rt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
           }
         ),
         r
@@ -1443,23 +1469,23 @@ function T({
   componentInfo: c,
   visibleAtPhase: p = 0,
   fixedScale: h,
-  bare: b = !1
+  bare: y = !1
 }) {
-  const u = ve(ae);
-  if (!u)
+  const b = ve(ae);
+  if (!b)
     throw new Error("ServiceNode must be used inside a <Service> component.");
   const {
     isExpandedPos: g,
     animPhase: m,
     compactCx: x,
-    compactCy: w,
-    groupScale: P,
-    effectiveScale: y,
-    transitionValue: D,
-    onComponentClick: B,
-    selectedComponentName: k,
+    compactCy: v,
+    groupScale: k,
+    effectiveScale: u,
+    transitionValue: R,
+    onComponentClick: A,
+    selectedComponentName: $,
     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({
+  } = b, B = p === 0 || b.isSelected && m >= p ? 1 : 0, X = x + o.x, z = v + o.y, te = g ? t + V : X, ie = g ? n : z, O = h !== void 0 ? h : b.isCompact ? k : u, F = !!c && !!$ && c.name === $, ne = c?.status ? w[c.status]?.color ?? a : a, Se = c?.status === "offline" ? "#4a6a8a" : ne, $e = c && g && A ? () => A({
     type: c.type,
     name: c.name,
     status: c.status,
@@ -1476,13 +1502,13 @@ function T({
         position: "absolute",
         left: te,
         top: ie,
-        transform: `translate(-50%, -50%) scale(${I})`,
-        opacity: W,
+        transform: `translate(-50%, -50%) scale(${O})`,
+        opacity: B,
         zIndex: i,
-        transition: D || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-        pointerEvents: g && W >= 0.5 ? "auto" : "none"
+        transition: R || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+        pointerEvents: g && B >= 0.5 ? "auto" : "none"
       },
-      children: b ? r : /* @__PURE__ */ e(
+      children: y ? r : /* @__PURE__ */ e(
         Ht,
         {
           statusColor: Se,
@@ -1490,7 +1516,7 @@ function T({
           subLabel: l,
           delay: f,
           showLabels: g,
-          isCompact: u.isCompact,
+          isCompact: b.isCompact,
           onClick: $e,
           isSelected: F,
           children: r
@@ -1510,13 +1536,13 @@ function Ht({
   onClick: l,
   isSelected: f = !1
 }) {
-  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)` : "";
+  const [c, p] = L(!1), h = f ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
   return /* @__PURE__ */ d(
     "div",
     {
       className: `float-node${l ? " float-node--interactive" : ""}`,
-      onClick: (b) => {
-        l && (b.stopPropagation(), l());
+      onClick: (y) => {
+        l && (y.stopPropagation(), l());
       },
       style: {
         cursor: l ? "pointer" : void 0,
@@ -1595,7 +1621,7 @@ function ct({ synced: t, latencyMs: n }) {
     ] })
   ] });
 }
-function O({
+function D({
   ex: t,
   ey: n,
   status: o,
@@ -1609,18 +1635,18 @@ function O({
 }) {
   const h = ve(ae)?.expandedOffsetX ?? 0;
   if (o === "online") return null;
-  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}`;
+  const y = w[o]?.color ?? w.warning.color, b = Math.abs(a) > Math.abs(s), g = t + h + (b ? Math.sign(a) * 45 : 0), m = n + (b ? 0 : Math.sign(s) * 40), x = t + h + a, v = n + s;
+  let k = "";
+  if (b) {
+    const $ = g + (x - g) / 2;
+    k = `M ${g} ${m} L ${$} ${m} L ${$} ${v} L ${x} ${v}`;
   } else {
-    const k = m + (w - m) / 2;
-    P = `M ${g} ${m} L ${g} ${k} L ${x} ${k} L ${x} ${w}`;
+    const $ = m + (v - m) / 2;
+    k = `M ${g} ${m} L ${g} ${$} L ${x} ${$} L ${x} ${v}`;
   }
-  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;
+  let u = "translate(0, -50%)";
+  f === "left" && (u = "translate(-100%, -50%)"), f === "top" && (u = "translate(-50%, -100%)"), f === "bottom" && (u = "translate(-50%, 0)");
+  const R = f === "left" ? -8 : f === "right" ? 8 : 0, A = f === "top" ? -8 : f === "bottom" ? 8 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1651,12 +1677,12 @@ function O({
             children: /* @__PURE__ */ e(
               "path",
               {
-                d: P,
+                d: k,
                 fill: "none",
-                stroke: b,
+                stroke: y,
                 strokeWidth: "1.5",
                 strokeDasharray: "5 4",
-                style: { filter: `drop-shadow(0 0 4px ${b})`, opacity: 0.55 }
+                style: { filter: `drop-shadow(0 0 4px ${y})`, opacity: 0.55 }
               }
             )
           }
@@ -1667,13 +1693,13 @@ function O({
             style: {
               position: "absolute",
               left: x,
-              top: w,
-              transform: y,
-              marginLeft: D,
-              marginTop: B,
+              top: v,
+              transform: u,
+              marginLeft: R,
+              marginTop: A,
               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}`,
+              border: `1px solid ${y}55`,
+              borderLeft: `2px solid ${y}`,
               backdropFilter: "blur(8px)",
               WebkitBackdropFilter: "blur(8px)",
               padding: "6px 10px",
@@ -1681,7 +1707,7 @@ function O({
               color: "#fff",
               fontFamily: "'Courier New', monospace",
               width: 140,
-              boxShadow: `0 4px 12px rgba(0,0,0,0.4), 0 0 8px ${b}22 inset`
+              boxShadow: `0 4px 12px rgba(0,0,0,0.4), 0 0 8px ${y}22 inset`
             },
             children: [
               /* @__PURE__ */ d(
@@ -1701,8 +1727,8 @@ function O({
                           width: 4,
                           height: 4,
                           borderRadius: "50%",
-                          background: b,
-                          boxShadow: `0 0 6px ${b}`,
+                          background: y,
+                          boxShadow: `0 0 6px ${y}`,
                           animation: "holo-led-blink 1.5s infinite"
                         }
                       }
@@ -1711,12 +1737,12 @@ function O({
                       "div",
                       {
                         style: {
-                          color: b,
+                          color: y,
                           fontWeight: "600",
                           fontSize: 10,
                           letterSpacing: "1px",
                           textTransform: "uppercase",
-                          textShadow: `0 0 4px ${b}88`
+                          textShadow: `0 0 4px ${y}88`
                         },
                         children: c ? `${i} · ${c}` : i
                       }
@@ -2453,20 +2479,20 @@ function ue({
   memLoad: f = 82,
   _compact: c
 }) {
-  const [p, h] = A(n), b = ee(0), u = ee(0);
+  const [p, h] = L(n), y = ee(0), b = ee(0);
   Ee(() => {
     if (!r) {
       h(n);
       return;
     }
     const m = (x) => {
-      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, b.current = requestAnimationFrame(m);
+      b.current && h((v) => v + (x - b.current) * 0.027), b.current = x, y.current = requestAnimationFrame(m);
     };
-    return b.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(b.current), u.current = 0;
+    return y.current = requestAnimationFrame(m), () => {
+      cancelAnimationFrame(y.current), b.current = 0;
     };
   }, [r, n]);
-  const g = S[a] ?? S.online;
+  const g = w[a] ?? w.online;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -2604,7 +2630,7 @@ function _t({
 }) {
   return /* @__PURE__ */ d(Ce, { children: [
     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");
+      const f = Ye(s), c = l === 0, p = Math.round(4 + f * 9), h = Math.round(12 + f * 22), y = Math.round(28 + f * 44), b = Math.round(f * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
         "div",
         {
@@ -2616,8 +2642,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},${h},${b})`,
-            borderLeft: `1px solid ${o.color}${u}`,
+            background: c ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${h},${y})`,
+            borderLeft: `1px solid ${o.color}${b}`,
             boxShadow: c ? `inset 0 0 18px ${o.color}28` : "none"
           },
           children: c && /* @__PURE__ */ d(Ce, { children: [
@@ -2803,7 +2829,7 @@ function _t({
     })
   ] });
 }
-function Ie({
+function Oe({
   rotateX: t = -22,
   rotateY: n = -15,
   rotateZ: o = 0,
@@ -2815,20 +2841,20 @@ function Ie({
   // connections = 284,
   _compact: l
 }) {
-  const [f, c] = A(n), p = ee(0), h = ee(0);
+  const [f, c] = L(n), p = ee(0), h = ee(0);
   Ee(() => {
     if (!r) {
       c(n);
       return;
     }
-    const u = (g) => {
-      h.current && c((m) => m + (g - h.current) * 0.027), h.current = g, p.current = requestAnimationFrame(u);
+    const b = (g) => {
+      h.current && c((m) => m + (g - h.current) * 0.027), h.current = g, p.current = requestAnimationFrame(b);
     };
-    return p.current = requestAnimationFrame(u), () => {
+    return p.current = requestAnimationFrame(b), () => {
       cancelAnimationFrame(p.current), h.current = 0;
     };
   }, [r, n]);
-  const b = S[a] ?? S.online;
+  const y = w[a] ?? w.online;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -2896,7 +2922,7 @@ function Ie({
               position: "absolute",
               width: _ * 2.8 * i,
               height: He * 0.85 * i,
-              background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
+              background: `radial-gradient(ellipse, ${y.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * i)}px)`,
               pointerEvents: "none",
               top: "45%",
@@ -2925,17 +2951,17 @@ function Ie({
                   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((u) => /* @__PURE__ */ e(
+                children: [0, 1, 2].map((b) => /* @__PURE__ */ e(
                   _t,
                   {
-                    diskY: u * (he + Ze),
-                    diskIdx: u,
-                    cfg: b,
-                    hasRingBelow: u < 2,
+                    diskY: b * (he + Ze),
+                    diskIdx: b,
+                    cfg: y,
+                    hasRingBelow: b < 2,
                     capacity: s,
                     compact: l
                   },
-                  u
+                  b
                 ))
               }
             )
@@ -3424,20 +3450,20 @@ function pt({
   activeRoutes: f = 12,
   _compact: c
 }) {
-  const [p, h] = A(n), b = ee(0), u = ee(0);
+  const [p, h] = L(n), y = ee(0), b = ee(0);
   Ee(() => {
     if (!r) {
       h(n);
       return;
     }
     const m = (x) => {
-      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, b.current = requestAnimationFrame(m);
+      b.current && h((v) => v + (x - b.current) * 0.027), b.current = x, y.current = requestAnimationFrame(m);
     };
-    return b.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(b.current), u.current = 0;
+    return y.current = requestAnimationFrame(m), () => {
+      cancelAnimationFrame(y.current), b.current = 0;
     };
   }, [r, n]);
-  const g = S[a] ?? S.online;
+  const g = w[a] ?? w.online;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4041,17 +4067,17 @@ function Zt({
   instances: c = 3,
   _compact: p
 }) {
-  const [h, b] = A(n), u = ee(0), g = ee(0);
+  const [h, y] = L(n), b = ee(0), g = ee(0);
   Ee(() => {
     if (!r) {
-      b(n);
+      y(n);
       return;
     }
-    const x = (w) => {
-      g.current && b((P) => P + (w - g.current) * 0.027), g.current = w, u.current = requestAnimationFrame(x);
+    const x = (v) => {
+      g.current && y((k) => k + (v - g.current) * 0.027), g.current = v, b.current = requestAnimationFrame(x);
     };
-    return u.current = requestAnimationFrame(x), () => {
-      cancelAnimationFrame(u.current), g.current = 0;
+    return b.current = requestAnimationFrame(x), () => {
+      cancelAnimationFrame(b.current), g.current = 0;
     };
   }, [r, n]);
   const m = at[a] ?? at.online;
@@ -4178,7 +4204,7 @@ function Zt({
   );
 }
 function ft({ status: t = "online", scale: n = 1 }) {
-  const i = (S[t] ?? S.online).color;
+  const i = (w[t] ?? w.online).color;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -4289,7 +4315,7 @@ function ft({ status: t = "online", scale: n = 1 }) {
     }
   );
 }
-function R(t, n, o = 24) {
+function P(t, n, o = 24) {
   return Array.from({ length: o }, (i, r) => {
     const a = r / o;
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
@@ -4389,34 +4415,34 @@ function ti(t, n) {
   if (t === "server") {
     const o = n.cpuLoad ?? 50, i = n.memLoad ?? 60;
     return [
-      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: R(o, 15) },
-      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: R(o * 0.7, 12) },
-      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: R(i, 18) },
-      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: R(i * 0.85, 14) },
-      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: R(40, 25) },
-      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: R(35, 20) },
-      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: R(30, 22) },
-      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: R(55, 20) }
+      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: P(o, 15) },
+      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: P(o * 0.7, 12) },
+      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: P(i, 18) },
+      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: P(i * 0.85, 14) },
+      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: P(40, 25) },
+      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: P(35, 20) },
+      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: P(30, 22) },
+      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: P(55, 20) }
     ];
   }
   if (t === "dispatcher" || t === "messageServer") {
     const o = n.traffic ?? n.queueDepth ?? 50;
     return [
-      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: R(o, 20) },
-      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: R(60, 25) },
-      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: R(45, 20) },
-      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: R(70, 30) },
-      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: R(o * 0.9, 15) }
+      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: P(o, 20) },
+      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: P(60, 25) },
+      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: P(45, 20) },
+      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: P(70, 30) },
+      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: P(o * 0.9, 15) }
     ];
   }
   if (t === "database") {
     const o = n.capacity ?? 70;
     return [
-      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: R(40, 20) },
-      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: R(55, 25) },
-      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: R(35, 18) },
-      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: R(o, 15) },
-      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: R(75, 12) }
+      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: P(40, 20) },
+      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: P(55, 25) },
+      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: P(35, 18) },
+      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: P(o, 15) },
+      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: P(75, 12) }
     ];
   }
   return [];
@@ -4430,7 +4456,7 @@ function ht({
   delay: a = "0s",
   children: s
 }) {
-  const l = r ? S[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
+  const l = r ? w[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4471,8 +4497,8 @@ function ht({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: S[r]?.color,
-              boxShadow: `0 0 6px ${S[r]?.color}`,
+              background: w[r]?.color,
+              boxShadow: `0 0 6px ${w[r]?.color}`,
               animation: "holo-led-blink 1.2s infinite"
             }
           }
@@ -4514,7 +4540,7 @@ function ht({
     }
   );
 }
-function Oe({
+function De({
   color: t = "#00e5ff",
   label: n = "CPU-0",
   status: o = "online",
@@ -4598,8 +4624,8 @@ function Oe({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: S[o]?.color,
-                boxShadow: `0 0 6px ${S[o]?.color}`,
+                background: w[o]?.color,
+                boxShadow: `0 0 6px ${w[o]?.color}`,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4625,7 +4651,7 @@ function Oe({
     )
   ] });
 }
-function De({
+function We({
   color: t = "#00e5ff",
   label: n = "HEAP-0",
   status: o = "online",
@@ -4696,7 +4722,7 @@ function De({
                 width: 3,
                 height: 3,
                 borderRadius: "50%",
-                background: S[o]?.color,
+                background: w[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4825,14 +4851,14 @@ function ut({
     }
   );
 }
-function L({
+function I({
   color: t = "#00e5ff",
   label: n = "THREAD",
   status: o = "online"
 }) {
   return /* @__PURE__ */ e(ht, { w: 44, h: 28, color: t, label: n, status: o });
 }
-function Le({
+function Ie({
   color: t = "#ff8c00",
   label: n = "PLATTER-0",
   status: o = "online",
@@ -4890,7 +4916,7 @@ function Le({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: S[o]?.color,
+                background: w[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4916,7 +4942,7 @@ function Le({
     )
   ] });
 }
-function M({
+function N({
   color: t = "#00e5ff",
   label: n = "PORT-1",
   status: o = "online"
@@ -4945,7 +4971,7 @@ function M({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: o && o !== "online" ? S[o]?.color ?? t : t,
+              background: o && o !== "online" ? w[o]?.color ?? t : t,
               boxShadow: `0 0 4px ${t}`,
               animation: o && o !== "online" && o !== "offline" ? "holo-led-blink 1s infinite" : "none"
             }
@@ -5125,14 +5151,14 @@ function ri({
   internal: i,
   revealPhase: r
 }) {
-  const a = S[n]?.color ?? S.online.color, s = "#ff8c00";
+  const a = w[n]?.color ?? w.online.color, s = "#ff8c00";
   if (t === "server") {
     const l = o.cpuLoad ?? 50, f = o.memLoad ?? 60, c = [
       {
         key: "cpu0",
         delay: 0,
         el: /* @__PURE__ */ e(
-          Oe,
+          De,
           {
             color: a,
             label: "CPU-0",
@@ -5146,7 +5172,7 @@ function ri({
         key: "cpu1",
         delay: 1,
         el: /* @__PURE__ */ e(
-          Oe,
+          De,
           {
             color: a,
             label: "CPU-1",
@@ -5160,7 +5186,7 @@ function ri({
         key: "heap0",
         delay: 2,
         el: /* @__PURE__ */ e(
-          De,
+          We,
           {
             color: "#8855ee",
             label: "HEAP-0",
@@ -5174,7 +5200,7 @@ function ri({
         key: "heap1",
         delay: 3,
         el: /* @__PURE__ */ e(
-          De,
+          We,
           {
             color: "#8855ee",
             label: "HEAP-1",
@@ -5218,7 +5244,7 @@ function ri({
       {
         key: "thread",
         delay: 7,
-        el: /* @__PURE__ */ e(L, { color: a, label: "THREAD-POOL", status: i[7]?.status })
+        el: /* @__PURE__ */ e(I, { color: a, label: "THREAD-POOL", status: i[7]?.status })
       },
       {
         key: "net",
@@ -5237,7 +5263,7 @@ function ri({
           alignItems: "center",
           padding: 24
         },
-        children: c.map(({ key: p, delay: h, el: b }) => /* @__PURE__ */ e(
+        children: c.map(({ key: p, delay: h, el: y }) => /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -5245,7 +5271,7 @@ function ri({
               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
+            children: y
           },
           p
         ))
@@ -5263,7 +5289,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(M, { color: a, label: `PORT-${c + 1}`, status: p?.status })
+          children: /* @__PURE__ */ e(N, { color: a, label: `PORT-${c + 1}`, status: p?.status })
         },
         `p${c}`
       );
@@ -5289,7 +5315,7 @@ function ri({
                   transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
                   transition: `all 0.4s ${E} 0.3s`
                 },
-                children: /* @__PURE__ */ e(L, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
+                children: /* @__PURE__ */ e(I, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
               }
             ),
             /* @__PURE__ */ e(
@@ -5300,7 +5326,7 @@ function ri({
                   transform: `scale(${r >= 0.8 ? 1 : 0.6})`,
                   transition: `all 0.4s ${E} 0.4s`
                 },
-                children: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
+                children: /* @__PURE__ */ e(I, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
               }
             )
           ] })
@@ -5329,7 +5355,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(M, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
+              children: /* @__PURE__ */ e(N, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
             },
             l
           )),
@@ -5341,7 +5367,7 @@ function ri({
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
                 transition: `all 0.4s ${E} 0.25s`
               },
-              children: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
+              children: /* @__PURE__ */ e(I, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
             }
           ),
           [4, 5, 6].map((l) => /* @__PURE__ */ e(
@@ -5353,7 +5379,7 @@ function ri({
                 transition: `all 0.4s ${E} ${0.35 + (l - 4) * 0.05}s`
               },
               children: /* @__PURE__ */ e(
-                L,
+                I,
                 {
                   color: "#bb55ff",
                   label: `WORKER-${l - 3}`,
@@ -5389,7 +5415,7 @@ function ri({
                 transition: `all 0.45s ${E} ${f * 0.1}s`
               },
               children: /* @__PURE__ */ e(
-                Le,
+                Ie,
                 {
                   color: s,
                   label: `PLATTER-${f}`,
@@ -5408,7 +5434,7 @@ function ri({
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
                 transition: `all 0.4s ${E} 0.3s`
               },
-              children: /* @__PURE__ */ e(L, { color: s, label: "CONN-POOL", status: i[3]?.status })
+              children: /* @__PURE__ */ e(I, { color: s, label: "CONN-POOL", status: i[3]?.status })
             }
           ),
           /* @__PURE__ */ e(
@@ -5419,7 +5445,7 @@ function ri({
                 transform: `scale(${r >= 0.75 ? 1 : 0.6})`,
                 transition: `all 0.4s ${E} 0.4s`
               },
-              children: /* @__PURE__ */ e(L, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
+              children: /* @__PURE__ */ e(I, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
             }
           )
         ]
@@ -5438,7 +5464,7 @@ function wi({
   subComponents: s,
   graphSeries: l
 }) {
-  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;
+  const f = ii(t, n, o, a), c = w[o]?.color ?? w.online.color, p = r >= 0.1 ? 1 : r * 10, h = r >= 0.2 ? "-50%" : "0%", y = r >= 0.2 ? "50%" : "0%", b = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -5526,7 +5552,7 @@ function wi({
                           background: "linear-gradient(90deg, rgba(2, 12, 28, 0.95) 0%, rgba(2, 8, 20, 0.98) 100%)",
                           borderLeft: `2px solid ${c}44`,
                           boxShadow: "-4px 0 32px rgba(0,0,0,0.6)",
-                          transform: `translateX(${b})`,
+                          transform: `translateX(${y})`,
                           transition: `transform 0.7s ${E}`
                         }
                       }
@@ -5549,7 +5575,7 @@ function wi({
                     boxShadow: `0 0 40px ${c}18, inset 0 0 60px rgba(0,0,0,0.4)`,
                     display: "flex",
                     flexDirection: "column",
-                    opacity: u >= 0.1 ? 1 : 0,
+                    opacity: b >= 0.1 ? 1 : 0,
                     transition: `opacity 0.5s ${E} 0.2s`
                   },
                   children: [
@@ -5638,7 +5664,7 @@ function wi({
                         }
                       }
                     ),
-                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(oi, { items: s, revealPhase: u }) : /* @__PURE__ */ e(
+                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(oi, { items: s, revealPhase: b }) : /* @__PURE__ */ e(
                       ri,
                       {
                         type: t,
@@ -5646,7 +5672,7 @@ function wi({
                         status: o,
                         context: a,
                         internal: f,
-                        revealPhase: u
+                        revealPhase: b
                       }
                     ) })
                   ]
@@ -5669,28 +5695,28 @@ function Si({
   fontFamily: s,
   children: l
 }) {
-  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(() => {
+  const [f] = L(20), [c] = L(!1), [p] = L(!0), [h] = L(0.45), [y] = L(3.3), [b, g] = L("compact"), [m, x] = L(0), [v, k] = L(null), [u, R] = L(null), [A, $] = L(0), V = (C) => {
+    b === "compact" && (k(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));
-  }, v = () => {
-    y ? (D(null), k(0)) : u === "expanded" && (g("collapsing"), x(0), P(null), setTimeout(() => {
+  }, W = () => {
+    u ? (R(null), $(0)) : b === "expanded" && (g("collapsing"), x(0), k(null), setTimeout(() => {
       g((C) => C === "collapsing" ? "compact" : C);
     }, 1e3));
-  }, W = (C) => {
-    D(C), k(0);
+  }, B = (C) => {
+    R(C), $(0);
   };
   J.useEffect(() => {
-    if (!y) return;
+    if (!u) return;
     const C = performance.now(), ke = 1200, oe = () => {
       const Ne = performance.now() - C, Te = Math.min(1, Ne / ke);
-      k(Te), Te < 1 && requestAnimationFrame(oe);
+      $(Te), Te < 1 && requestAnimationFrame(oe);
     }, le = requestAnimationFrame(oe);
     return () => cancelAnimationFrame(le);
-  }, [y]);
+  }, [u]);
   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;
+    R(null), $(0);
+  }, z = o.find((C) => C.name === v), te = z?.status ?? "online", ie = z?.dbSync ?? !0, O = z?.metrics, F = z?.alerts, ne = 330, Se = 340, $e = u ? 1.15 : 1, Q = u ? -(u.ex - ne) * 0.06 : 0, M = u ? -(u.ey - Se) * 0.06 : 0;
   return /* @__PURE__ */ d("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
@@ -5705,7 +5731,7 @@ function Si({
           backgroundPosition: "center center",
           backgroundRepeat: "no-repeat",
           transition: "transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
-          transform: `translate(${Q}px, ${N}px) scale(${$e})`,
+          transform: `translate(${Q}px, ${M}px) scale(${$e})`,
           willChange: "transform"
         }
       }
@@ -5722,31 +5748,31 @@ function Si({
       {
         className: "scene",
         style: {
-          cursor: u === "expanded" ? "zoom-out" : "default"
+          cursor: b === "expanded" ? "zoom-out" : "default"
         },
-        onClick: v,
+        onClick: W,
         children: /* @__PURE__ */ e(
           Wt,
           {
-            viewState: u,
+            viewState: b,
             animPhase: m,
-            selectedSystem: w,
-            selectedComponent: y,
-            drillAnimPhase: B,
+            selectedSystem: v,
+            selectedComponent: u,
+            drillAnimPhase: A,
             rotateY: f,
             autoRotateComponents: c,
             componentScale: h,
-            drillZoom: b,
+            drillZoom: y,
             autoRotateCarousel: p,
             carouselSpeed: a,
             logoUrl: r,
             onSelectSystem: V,
-            onBackgroundClick: v,
-            onComponentClick: W,
+            onBackgroundClick: W,
+            onComponentClick: B,
             onCloseDrill: X,
             selectedSystemStatus: te,
             selectedSystemDbSync: ie,
-            selectedSystemMetrics: I,
+            selectedSystemMetrics: O,
             selectedSystemAlerts: F,
             children: l
           }
@@ -5755,7 +5781,7 @@ function Si({
     )
   ] });
 }
-function $(t, n, o = 24) {
+function S(t, n, o = 24) {
   return Array.from({ length: o }, (i, r) => {
     const a = r / o;
     return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
@@ -5767,95 +5793,95 @@ function bt(t) {
 function me(t, n, o) {
   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(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: "cpu-0", label: "CPU-0", status: l, detail: i === "critical" ? "Core overload" : i === "warning" ? "Load spike" : void 0, element: /* @__PURE__ */ e(De, { color: r, label: "CPU-0", status: l, load: a }) },
+    { id: "cpu-1", label: "CPU-1", status: "online", element: /* @__PURE__ */ e(De, { color: r, label: "CPU-1", status: "online", load: a * 0.7 }) },
+    { id: "heap-0", label: "HEAP-0", status: f, detail: f === "warning" ? "Memory heap usage" : f === "critical" ? "OOM risk" : void 0, element: /* @__PURE__ */ e(We, { color: "#8855ee", label: "HEAP-0", status: f, usedPercent: s }) },
+    { id: "heap-1", label: "HEAP-1", status: "online", element: /* @__PURE__ */ e(We, { color: "#8855ee", label: "HEAP-1", status: "online", usedPercent: s * 0.85 }) },
     { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
     { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
     { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(ye, { color: r, label: "DRIVE-3", status: "online", activity: a > 50 }) },
-    { id: "thread-pool", label: "THREAD-POOL", status: c, detail: c === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(L, { color: r, label: "THREAD-POOL", status: c }) },
+    { 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(ut, { color: r, label: "NET", status: p }) }
   ];
 }
 function xe(t) {
   const n = t?.cpuLoad ?? 50, o = t?.memLoad ?? 60;
   return [
-    { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: $(n, 15) },
-    { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: $(n * 0.7, 12) },
-    { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: $(o, 18) },
-    { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: $(o * 0.85, 14) },
-    { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: $(40, 25) },
-    { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: $(35, 20) },
-    { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: $(30, 22) },
-    { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: $(55, 20) }
+    { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: S(n, 15) },
+    { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: S(n * 0.7, 12) },
+    { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: S(o, 18) },
+    { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: S(o * 0.85, 14) },
+    { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: S(40, 25) },
+    { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: S(35, 20) },
+    { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: S(30, 22) },
+    { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: S(55, 20) }
   ];
 }
 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(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" }) }
+    { 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" }) }
   ];
 }
 function yt(t) {
   const n = t?.traffic ?? 50;
   return [
-    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: $(n, 20) },
-    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: $(60, 25) },
-    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: $(45, 20) },
-    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: $(70, 30) },
-    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: $(n * 0.9, 15) }
+    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: S(n, 20) },
+    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: S(60, 25) },
+    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: S(45, 20) },
+    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: S(70, 30) },
+    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: S(n * 0.9, 15) }
   ];
 }
 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(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 }) }
+    { 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 }) }
   ];
 }
 function li(t) {
   const n = t?.queueDepth ?? 50;
   return [
-    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: $(n, 20) },
-    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: $(60, 25) },
-    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: $(45, 20) },
-    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: $(70, 30) },
-    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: $(n * 0.9, 15) }
+    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: S(n, 20) },
+    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: S(60, 25) },
+    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: S(45, 20) },
+    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: S(70, 30) },
+    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: S(n * 0.9, 15) }
   ];
 }
-function We(t, n, o) {
+function ze(t, n, o) {
   const i = t === "online" ? "online" : t, r = "#ff8c00", a = o?.capacity ?? 72, s = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", l = i === "warning" && n === "DB-STB" ? "warning" : "online", f = i === "critical" ? "critical" : "online", c = i === "warning" ? "warning" : "online";
   return [
-    { 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 }) }
+    { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Ie, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
+    { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Ie, { color: r, label: "PLATTER-1", status: s, capacityPercent: a }) },
+    { id: "platter-2", label: "PLATTER-2", status: l, detail: l === "warning" ? "Replication lag" : void 0, element: /* @__PURE__ */ e(Ie, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
+    { id: "conn-pool", label: "CONN-POOL", status: f, detail: f === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(I, { 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(I, { color: "#00ff88", label: "QUERY-CACHE", status: c }) }
   ];
 }
-function ze(t) {
+function Me(t) {
   const n = t?.capacity ?? 70;
   return [
-    { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: $(40, 20) },
-    { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: $(55, 25) },
-    { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: $(35, 18) },
-    { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: $(n, 15) },
-    { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: $(75, 12) }
+    { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: S(40, 20) },
+    { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: S(55, 25) },
+    { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: S(35, 18) },
+    { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: S(n, 15) },
+    { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: S(75, 12) }
   ];
 }
 function Je(t) {
@@ -6111,11 +6137,11 @@ function di({ config: t }) {
           name: "DB-PRI",
           status: c,
           context: { capacity: 72 },
-          subComponents: We(c, "DB-PRI", { capacity: 72 }),
-          graphSeries: ze({ capacity: 72 })
+          subComponents: ze(c, "DB-PRI", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ie,
+          Oe,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6144,11 +6170,11 @@ function di({ config: t }) {
           name: "DB-STB",
           status: p,
           context: { capacity: 72 },
-          subComponents: We(p, "DB-STB", { capacity: 72 }),
-          graphSeries: ze({ capacity: 72 })
+          subComponents: ze(p, "DB-STB", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ie,
+          Oe,
           {
             rotateY: o,
             autoRotate: i,
@@ -6181,7 +6207,7 @@ function ci({ config: t }) {
   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(
-      O,
+      D,
       {
         ex: 220,
         ey: 260,
@@ -6196,7 +6222,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 440,
         ey: 260,
@@ -6211,7 +6237,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 165,
         ey: 390,
@@ -6226,7 +6252,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 330,
         ey: 390,
@@ -6241,7 +6267,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 495,
         ey: 390,
@@ -6256,7 +6282,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 200,
         ey: 520,
@@ -6271,7 +6297,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 460,
         ey: 520,
@@ -6286,7 +6312,7 @@ function ci({ config: t }) {
       }
     ),
     !c && /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 330,
         ey: 520,
@@ -6528,11 +6554,11 @@ function fi({ config: t }) {
           name: "DB-PRI",
           status: f,
           context: { capacity: 72 },
-          subComponents: We(f, "DB-PRI", { capacity: 72 }),
-          graphSeries: ze({ capacity: 72 })
+          subComponents: ze(f, "DB-PRI", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ie,
+          Oe,
           {
             rotateY: -o,
             autoRotate: i,
@@ -6561,11 +6587,11 @@ function fi({ config: t }) {
           name: "DB-STB",
           status: c,
           context: { capacity: 72 },
-          subComponents: We(c, "DB-STB", { capacity: 72 }),
-          graphSeries: ze({ capacity: 72 })
+          subComponents: ze(c, "DB-STB", { capacity: 72 }),
+          graphSeries: Me({ capacity: 72 })
         },
         children: /* @__PURE__ */ e(
-          Ie,
+          Oe,
           {
             rotateY: o,
             autoRotate: i,
@@ -6598,7 +6624,7 @@ function hi({ config: t }) {
   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(
-      O,
+      D,
       {
         ex: 330,
         ey: 260,
@@ -6613,7 +6639,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 165,
         ey: 390,
@@ -6628,7 +6654,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 330,
         ey: 390,
@@ -6643,7 +6669,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 495,
         ey: 390,
@@ -6658,7 +6684,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 200,
         ey: 520,
@@ -6673,7 +6699,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 460,
         ey: 520,
@@ -6688,7 +6714,7 @@ function hi({ config: t }) {
       }
     ),
     !f && /* @__PURE__ */ e(
-      O,
+      D,
       {
         ex: 330,
         ey: 520,
@@ -6718,13 +6744,13 @@ function Ei({ config: t, ...n }) {
 }
 export {
   Si as AIOPsDashboard,
-  Oe as CPU3D,
+  De as CPU3D,
   Wt as Carousel,
   Ge as CarouselContext,
   Ke as CarouselItemContext,
   It as ComponentDialog,
   wi as ComponentDrillView,
-  Ie as Database3D,
+  Oe as Database3D,
   ye as DriveBay3D,
   pi as EXCHANGE_CONNECTIONS,
   Ei as ExchangeService,
@@ -6733,17 +6759,17 @@ export {
   Qe as HOLO_GLASS,
   we as HOLO_SURFACE,
   ei as HistoricalGraphPanel,
-  Mt as HoloBase,
+  Nt as HoloBase,
   ft as Human3D,
-  De as Memory3D,
+  We as Memory3D,
   Zt as MessageServer3D,
   ut as NetworkBlock3D,
-  O as NodeCallout,
-  Le as Platter3D,
-  M as Port3D,
+  D as NodeCallout,
+  Ie as Platter3D,
+  N as Port3D,
   Ri as SAPService,
   si as SAP_CONNECTIONS,
-  S as STATUS_CFG,
+  w as STATUS_CFG,
   ue as Server3D,
   dt as Service,
   ae as ServiceContext,
@@ -6751,7 +6777,7 @@ export {
   T as ServiceNode,
   zt as SvgConnection,
   ct as SyncBridge,
-  L as ThreadPool3D,
+  I as ThreadPool3D,
   pt as WebDispatcher3D,
   Ci as computeExchangeDialogAlerts,
   Pi as computeExchangeDialogMetrics,
@@ -6759,8 +6785,8 @@ export {
   ki as computeSAPDialogAlerts,
   $i as computeSAPDialogMetrics,
   Je as computeSAPServiceStatus,
-  ze as getDatabaseGraphSeries,
-  We as getDatabaseSubComponents,
+  Me as getDatabaseGraphSeries,
+  ze as getDatabaseSubComponents,
   yt as getDispatcherGraphSeries,
   gt as getDispatcherSubComponents,
   li as getMessageServerGraphSeries,