react-aiops 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,19 +1,19 @@
 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 Tt, useRef as ee } from "react";
-const At = {
+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: "⚠️" },
   critical: { color: "#ff2255", bg: "rgba(255, 34, 85, 0.1)", border: "#ff2255", icon: "🛑" }
 };
-function Lt({
+function At({
   name: t,
-  status: o,
-  dbSync: n = !0,
+  status: n,
+  dbSync: o = !0,
   visible: i,
   metrics: r,
   alerts: a
 }) {
-  const s = o === "critical" || o === "offline", l = o === "warning", f = r ?? [
+  const s = n === "critical" || n === "offline", l = n === "warning", f = r ?? [
     {
       label: "Uptime",
       value: s ? "92.14%" : "99.98%",
@@ -32,10 +32,10 @@ function Lt({
       color: s ? "#ff2255" : l ? "#ff8c00" : "#00ff88"
     }
   ], c = a ?? [
-    ...n ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
+    ...o ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
     ...s ? [{ level: "critical", message: "Critical Component Failure" }] : [],
     ...l && !s ? [{ level: "warning", message: "Component Warning State" }] : [],
-    ...!s && !l && n ? [{ level: "info", message: "All Systems Nominal" }] : []
+    ...!s && !l && o ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
   return /* @__PURE__ */ d(
     "div",
@@ -146,7 +146,7 @@ function Lt({
                 }
               ),
               c.map((p, h) => {
-                const g = At[p.level];
+                const b = Tt[p.level];
                 return /* @__PURE__ */ d(
                   "div",
                   {
@@ -154,15 +154,15 @@ function Lt({
                       display: "flex",
                       gap: 8,
                       alignItems: "flex-start",
-                      color: g.color,
+                      color: b.color,
                       fontSize: 12,
-                      background: g.bg,
+                      background: b.bg,
                       padding: "6px 10px",
                       borderRadius: 4,
-                      borderLeft: `2px solid ${g.border}`
+                      borderLeft: `2px solid ${b.border}`
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { children: g.icon }),
+                      /* @__PURE__ */ e("span", { children: b.icon }),
                       " ",
                       /* @__PURE__ */ e("span", { children: p.message })
                     ]
@@ -182,54 +182,54 @@ const S = {
   warning: { color: "#ff8c00", glow: "rgba(255,140,0,0.55)" },
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.55)" },
   offline: { color: "#1e3a5a", glow: "rgba(30,58,90,0.25)" }
-}, vi = "#00e5ff", wi = "#0055cc", we = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", Ge = "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, o, n) {
+}, 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",
     backfaceVisibility: "hidden"
   };
   return {
-    front: { ...i, width: t, height: o, left: 0, top: 0, transform: `translateZ(${n / 2}px)` },
+    front: { ...i, width: t, height: n, left: 0, top: 0, transform: `translateZ(${o / 2}px)` },
     back: {
       ...i,
       width: t,
-      height: o,
+      height: n,
       left: 0,
       top: 0,
-      transform: `rotateY(180deg) translateZ(${n / 2}px)`
+      transform: `rotateY(180deg) translateZ(${o / 2}px)`
     },
     left: {
       ...i,
-      width: n,
-      height: o,
-      left: (t - n) / 2,
+      width: o,
+      height: n,
+      left: (t - o) / 2,
       top: 0,
       transform: `rotateY(-90deg) translateZ(${t / 2}px)`
     },
     right: {
       ...i,
-      width: n,
-      height: o,
-      left: (t - n) / 2,
+      width: o,
+      height: n,
+      left: (t - o) / 2,
       top: 0,
       transform: `rotateY(90deg) translateZ(${t / 2}px)`
     },
     top: {
       ...i,
       width: t,
-      height: n,
+      height: o,
       left: 0,
-      top: (o - n) / 2,
-      transform: `rotateX(90deg) translateZ(${o / 2}px)`
+      top: (n - o) / 2,
+      transform: `rotateX(90deg) translateZ(${n / 2}px)`
     },
     bottom: {
       ...i,
       width: t,
-      height: n,
+      height: o,
       left: 0,
-      top: (o - n) / 2,
-      transform: `rotateX(-90deg) translateZ(${o / 2}px)`
+      top: (n - o) / 2,
+      transform: `rotateX(-90deg) translateZ(${n / 2}px)`
     }
   };
 }
@@ -237,24 +237,24 @@ const Ve = "cubic-bezier(0.34, 1.56, 0.64, 1)", _e = "cubic-bezier(0.16, 1, 0.3,
 function st(t) {
   return S[t]?.color ?? S.online.color;
 }
-function It(t, o, n) {
-  return t >= n ? "#ff2255" : t >= o ? "#ff8c00" : "#00e5ff";
+function Lt(t, n, o) {
+  return t >= o ? "#ff2255" : t >= n ? "#ff8c00" : "#00e5ff";
 }
-function Ue(t, o, n, i) {
-  return t === "offline" ? "offline" : t === "critical" && o >= i ? "critical" : (t === "critical" || t === "warning") && o >= n ? "warning" : "online";
+function Fe(t, n, o, i) {
+  return t === "offline" ? "offline" : t === "critical" && n >= i ? "critical" : (t === "critical" || t === "warning") && n >= o ? "warning" : "online";
 }
-function Ot({
+function It({
   component: t,
-  onClose: o,
-  visible: n,
+  onClose: n,
+  visible: o,
   sceneWidth: i = 660,
   sceneHeight: r = 600
 }) {
-  const { type: a, name: s, status: l, ex: f, ey: c, context: p = {} } = t, h = st(l), g = f >= i / 2, u = c >= r / 2, b = {
+  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",
-    ...g ? { right: 28 } : { left: 28 },
+    ...b ? { right: 28 } : { left: 28 },
     ...u ? { bottom: 110 } : { top: 72 }
-  }, m = g ? 40 : -40, x = u ? 30 : -30, w = p.cpuLoad ?? p.traffic ?? 50, P = p.memLoad ?? p.queueDepth ?? 60, y = p.capacity ?? 72, D = Ue(l, w, 70, 85), B = Ue(l, P, 75, 88), $ = Ue(l, y, 75, 90), V = [
+  }, 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",
@@ -281,7 +281,7 @@ function Ot({
       sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
       value: y,
       unit: "%",
-      status: $,
+      status: k,
       icon: "disk",
       delay: 2
     }
@@ -290,7 +290,7 @@ function Ot({
     "div",
     {
       style: {
-        ...b,
+        ...g,
         width: 420,
         background: "linear-gradient(170deg, rgba(2, 10, 22, 0.96) 0%, rgba(2, 6, 14, 0.98) 100%)",
         backdropFilter: "blur(20px)",
@@ -299,12 +299,12 @@ function Ot({
         borderRadius: 14,
         fontFamily: "'Courier New', monospace",
         overflow: "hidden",
-        opacity: n ? 1 : 0,
-        transform: n ? "scale(1) translate(0, 0)" : `scale(0.7) translate(${m}px, ${x}px)`,
+        opacity: o ? 1 : 0,
+        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: n ? "auto" : "none",
+        pointerEvents: o ? "auto" : "none",
         zIndex: 9999,
-        animation: n ? "comp-dialog-border-glow 3s ease-in-out infinite" : "none",
+        animation: o ? "comp-dialog-border-glow 3s ease-in-out infinite" : "none",
         "--dialog-color": h
       },
       onClick: (v) => v.stopPropagation(),
@@ -320,7 +320,7 @@ function Ot({
               height: 2,
               background: `linear-gradient(90deg, transparent 2%, ${h}aa 30%, #fff 50%, ${h}aa 70%, transparent 98%)`,
               boxShadow: `0 0 12px ${h}, 0 0 24px ${h}44`,
-              animation: n ? "holo-scan 3.5s linear infinite" : "none",
+              animation: o ? "holo-scan 3.5s linear infinite" : "none",
               pointerEvents: "none",
               zIndex: 10
             }
@@ -456,7 +456,7 @@ function Ot({
                 "button",
                 {
                   onClick: (v) => {
-                    v.stopPropagation(), o();
+                    v.stopPropagation(), n();
                   },
                   style: {
                     width: 34,
@@ -497,7 +497,7 @@ function Ot({
               position: "relative",
               zIndex: 2
             },
-            children: V.map((v) => /* @__PURE__ */ e(Dt, { metric: v, visible: n, accentColor: h }, v.id))
+            children: V.map((v) => /* @__PURE__ */ e(Ot, { metric: v, visible: o, accentColor: h }, v.id))
           }
         ),
         /* @__PURE__ */ d(
@@ -546,12 +546,12 @@ function Ot({
     }
   );
 }
-function Dt({
+function Ot({
   metric: t,
-  visible: o,
-  accentColor: n
+  visible: n,
+  accentColor: o
 }) {
-  const { label: i, sublabel: r, value: a, unit: s, status: l, icon: f, delay: c } = t, p = It(a, 70, 85), h = st(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",
     {
@@ -559,8 +559,8 @@ function Dt({
         display: "flex",
         alignItems: "center",
         gap: 16,
-        opacity: o ? 1 : 0,
-        transform: o ? "translateY(0)" : "translateY(12px)",
+        opacity: n ? 1 : 0,
+        transform: n ? "translateY(0)" : "translateY(12px)",
         transition: `opacity 0.4s ${_e} ${0.3 + c * 0.12}s, transform 0.5s ${Ve} ${0.3 + c * 0.12}s`
       },
       children: [
@@ -579,10 +579,10 @@ function Dt({
               flexShrink: 0,
               position: "relative",
               overflow: "hidden",
-              animation: o ? `comp-dialog-icon-pop 0.5s ${Ve} ${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(Wt, { type: f, color: h }),
+              /* @__PURE__ */ e(Dt, { type: f, color: h }),
               (l === "warning" || l === "critical") && /* @__PURE__ */ e(
                 "div",
                 {
@@ -631,7 +631,7 @@ function Dt({
                     {
                       style: {
                         fontSize: 8,
-                        color: `${n}55`,
+                        color: `${o}55`,
                         letterSpacing: "0.15em",
                         textTransform: "uppercase"
                       },
@@ -681,7 +681,7 @@ function Dt({
                       background: `linear-gradient(90deg, ${p}66, ${p})`,
                       boxShadow: `0 0 8px ${p}44`,
                       transformOrigin: "left center",
-                      animation: o ? `comp-dialog-metric-fill 0.8s ${_e} ${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"
                     }
                   }
                 ),
@@ -747,9 +747,9 @@ function Dt({
     }
   );
 }
-function Wt({ type: t, color: o }) {
+function Dt({ type: t, color: n }) {
   return t === "cpu" ? /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ e("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", stroke: o, strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", stroke: n, strokeWidth: "1.5" }),
     /* @__PURE__ */ e(
       "rect",
       {
@@ -758,25 +758,25 @@ function Wt({ type: t, color: o }) {
         width: "6",
         height: "6",
         rx: "1",
-        fill: `${o}44`,
-        stroke: o,
+        fill: `${n}44`,
+        stroke: n,
         strokeWidth: "0.5"
       }
     ),
-    /* @__PURE__ */ e("line", { x1: "4", y1: "9", x2: "6", y2: "9", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "4", y1: "12", x2: "6", y2: "12", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "4", y1: "15", x2: "6", y2: "15", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "18", y1: "9", x2: "20", y2: "9", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "20", y2: "12", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "18", y1: "15", x2: "20", y2: "15", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "9", y1: "4", x2: "9", y2: "6", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "12", y1: "4", x2: "12", y2: "6", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "15", y1: "4", x2: "15", y2: "6", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "9", y1: "18", x2: "9", y2: "20", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "12", y1: "18", x2: "12", y2: "20", stroke: o, strokeWidth: "1" }),
-    /* @__PURE__ */ e("line", { x1: "15", y1: "18", x2: "15", y2: "20", stroke: o, strokeWidth: "1" })
+    /* @__PURE__ */ e("line", { x1: "4", y1: "9", x2: "6", y2: "9", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "4", y1: "12", x2: "6", y2: "12", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "4", y1: "15", x2: "6", y2: "15", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "18", y1: "9", x2: "20", y2: "9", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "20", y2: "12", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "18", y1: "15", x2: "20", y2: "15", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "9", y1: "4", x2: "9", y2: "6", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "4", x2: "12", y2: "6", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "15", y1: "4", x2: "15", y2: "6", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "9", y1: "18", x2: "9", y2: "20", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "18", x2: "12", y2: "20", stroke: n, strokeWidth: "1" }),
+    /* @__PURE__ */ e("line", { x1: "15", y1: "18", x2: "15", y2: "20", stroke: n, strokeWidth: "1" })
   ] }) : t === "mem" ? /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ e("rect", { x: "7", y: "3", width: "10", height: "18", rx: "1.5", stroke: o, strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("rect", { x: "7", y: "3", width: "10", height: "18", rx: "1.5", stroke: n, strokeWidth: "1.5" }),
     /* @__PURE__ */ e(
       "rect",
       {
@@ -785,8 +785,8 @@ function Wt({ type: t, color: o }) {
         width: "6",
         height: "3",
         rx: "0.5",
-        fill: `${o}33`,
-        stroke: o,
+        fill: `${n}33`,
+        stroke: n,
         strokeWidth: "0.5"
       }
     ),
@@ -798,8 +798,8 @@ function Wt({ type: t, color: o }) {
         width: "6",
         height: "3",
         rx: "0.5",
-        fill: `${o}33`,
-        stroke: o,
+        fill: `${n}33`,
+        stroke: n,
         strokeWidth: "0.5"
       }
     ),
@@ -811,38 +811,38 @@ function Wt({ type: t, color: o }) {
         width: "6",
         height: "3",
         rx: "0.5",
-        fill: `${o}33`,
-        stroke: o,
+        fill: `${n}33`,
+        stroke: n,
         strokeWidth: "0.5"
       }
     ),
-    /* @__PURE__ */ e("line", { x1: "5", y1: "7", x2: "7", y2: "7", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "5", y1: "11", x2: "7", y2: "11", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "5", y1: "15", x2: "7", y2: "15", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "17", y1: "7", x2: "19", y2: "7", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "17", y1: "11", x2: "19", y2: "11", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "17", y1: "15", x2: "19", y2: "15", stroke: o, strokeWidth: "0.8" })
+    /* @__PURE__ */ e("line", { x1: "5", y1: "7", x2: "7", y2: "7", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "5", y1: "11", x2: "7", y2: "11", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "5", y1: "15", x2: "7", y2: "15", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "17", y1: "7", x2: "19", y2: "7", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "17", y1: "11", x2: "19", y2: "11", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "17", y1: "15", x2: "19", y2: "15", stroke: n, strokeWidth: "0.8" })
   ] }) : /* @__PURE__ */ d("svg", { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "8.5", stroke: o, strokeWidth: "1.5" }),
-    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "5.5", stroke: o, strokeWidth: "0.5", strokeDasharray: "2 2" }),
-    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2", fill: `${o}55` }),
-    /* @__PURE__ */ e("line", { x1: "12", y1: "3", x2: "12", y2: "6", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "12", y1: "18", x2: "12", y2: "21", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "3", y1: "12", x2: "6", y2: "12", stroke: o, strokeWidth: "0.8" }),
-    /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: o, strokeWidth: "0.8" })
+    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "8.5", stroke: n, strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "5.5", stroke: n, strokeWidth: "0.5", strokeDasharray: "2 2" }),
+    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "2", fill: `${n}55` }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "3", x2: "12", y2: "6", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "18", x2: "12", y2: "21", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "3", y1: "12", x2: "6", y2: "12", stroke: n, strokeWidth: "0.8" }),
+    /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: n, strokeWidth: "0.8" })
   ] });
 }
-const qe = Xe(null), Ke = Xe({ index: 0 });
-function Si() {
-  return ve(qe);
+const Ge = Xe(null), Ke = Xe({ index: 0 });
+function xi() {
+  return ve(Ge);
 }
-function ki() {
+function vi() {
   return ve(Ke);
 }
-function zt({
+function Wt({
   children: t,
-  logoUrl: o,
-  viewState: n,
+  logoUrl: n,
+  viewState: o,
   animPhase: i,
   selectedSystem: r,
   selectedComponent: a,
@@ -852,9 +852,9 @@ function zt({
   componentScale: c = 0.35,
   drillZoom: p = 3.3,
   autoRotateCarousel: h = !0,
-  carouselSpeed: g = 6e-3,
+  carouselSpeed: b = 6e-3,
   width: u = 950,
-  height: b = 790,
+  height: g = 790,
   onSelectSystem: m,
   onBackgroundClick: x,
   onComponentClick: w,
@@ -862,23 +862,23 @@ function zt({
   selectedSystemStatus: y = "online",
   selectedSystemDbSync: D = !0,
   selectedSystemMetrics: B,
-  selectedSystemAlerts: $
+  selectedSystemAlerts: k
 }) {
   const [V, v] = A(0);
   Ee(() => {
     let I;
-    if ((n === "compact" || n === "collapsing") && h) {
-      const U = () => {
-        v((oe) => oe + g), I = requestAnimationFrame(U);
+    if ((o === "compact" || o === "collapsing") && h) {
+      const F = () => {
+        v((ne) => ne + b), I = requestAnimationFrame(F);
       };
-      I = requestAnimationFrame(U);
+      I = requestAnimationFrame(F);
     }
     return () => cancelAnimationFrame(I);
-  }, [n, h, g]);
-  const W = J.Children.toArray(t), X = W.length, z = Tt(() => ({
+  }, [o, h, b]);
+  const W = J.Children.toArray(t), X = W.length, z = Et(() => ({
     totalSystems: X,
     carouselRotation: V,
-    viewState: n,
+    viewState: o,
     animPhase: i,
     selectedSystem: r,
     selectedComponent: a,
@@ -892,7 +892,7 @@ function zt({
   }), [
     X,
     V,
-    n,
+    o,
     i,
     r,
     a,
@@ -903,13 +903,13 @@ function zt({
     m,
     w,
     u
-  ]), te = W.map((I, U) => /* @__PURE__ */ e(Ke.Provider, { value: { index: U }, children: I }, U)), ie = n === "expanded" || n === "expanding" && i >= 4;
-  return /* @__PURE__ */ d(qe.Provider, { value: z, children: [
-    /* @__PURE__ */ d("div", { style: { position: "relative", width: u, height: b, margin: "0 auto", flexShrink: 0 }, children: [
-      o && (n === "compact" || n === "collapsing") && /* @__PURE__ */ e(
+  ]), 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",
         {
-          src: o,
+          src: n,
           alt: "",
           style: {
             position: "absolute",
@@ -929,32 +929,32 @@ function zt({
       te
     ] }),
     r && /* @__PURE__ */ e("div", { onClick: (I) => I.stopPropagation(), children: /* @__PURE__ */ e(
-      Lt,
+      At,
       {
         name: r,
         status: y,
         dbSync: D,
         visible: ie && !a,
         metrics: B,
-        alerts: $
+        alerts: k
       }
     ) }),
     a && /* @__PURE__ */ e("div", { onClick: (I) => I.stopPropagation(), children: /* @__PURE__ */ e(
-      Ot,
+      It,
       {
         component: a,
         onClose: P,
         visible: s >= 0.3,
         sceneWidth: u,
-        sceneHeight: b
+        sceneHeight: g
       }
     ) })
   ] });
 }
-function Nt({
+function zt({
   x1: t,
-  y1: o,
-  x2: n,
+  y1: n,
+  x2: o,
   y2: i,
   show: r,
   color: a = "#00e5ff",
@@ -965,8 +965,8 @@ function Nt({
       "line",
       {
         x1: t,
-        y1: o,
-        x2: n,
+        y1: n,
+        x2: o,
         y2: i,
         stroke: a,
         strokeWidth: "8",
@@ -978,8 +978,8 @@ function Nt({
       "line",
       {
         x1: t,
-        y1: o,
-        x2: n,
+        y1: n,
+        x2: o,
         y2: i,
         stroke: a,
         strokeWidth: "2",
@@ -1004,7 +1004,7 @@ function Nt({
         {
           dur: s,
           repeatCount: "indefinite",
-          path: `M${t},${o} L${n},${i}`
+          path: `M${t},${n} L${o},${i}`
         }
       ) }),
       /* @__PURE__ */ e("circle", { r: "8", fill: a, opacity: 0.18, children: /* @__PURE__ */ e(
@@ -1012,27 +1012,27 @@ function Nt({
         {
           dur: s,
           repeatCount: "indefinite",
-          path: `M${t},${o} L${n},${i}`
+          path: `M${t},${n} L${o},${i}`
         }
       ) })
     ] })
   ] });
 }
-const Mt = [
+const Nt = [
   { 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 Bt({
+function Mt({
   children: t,
-  size: o = 230,
-  widthRatio: n = 1,
+  size: n = 230,
+  widthRatio: o = 1,
   color: i = "#00e5ff",
   label: r
 }) {
-  const a = o * n;
+  const a = n * o;
   return /* @__PURE__ */ d("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -1137,7 +1137,7 @@ function Bt({
     /* @__PURE__ */ d("div", { style: {
       position: "relative",
       width: a,
-      height: o * 0.34,
+      height: n * 0.34,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -1146,11 +1146,11 @@ function Bt({
     }, children: [
       /* @__PURE__ */ e("div", { style: {
         position: "absolute",
-        bottom: o * 0.03,
+        bottom: n * 0.03,
         left: "50%",
         transform: "translateX(-50%) scaleY(0.20)",
         width: a * 0.88,
-        height: o * 0.88,
+        height: n * 0.88,
         borderRadius: "50%",
         background: `radial-gradient(circle,
             rgba(255,255,255,0.08) 0%,
@@ -1167,11 +1167,11 @@ function Bt({
       } }),
       /* @__PURE__ */ e("div", { style: {
         position: "absolute",
-        bottom: o * 0.05,
+        bottom: n * 0.05,
         left: "50%",
         transform: "translateX(-50%) scaleY(0.20)",
         width: a * 0.42,
-        height: o * 0.42,
+        height: n * 0.42,
         borderRadius: "50%",
         background: `radial-gradient(circle,
             rgba(255,255,255,0.22) 0%,
@@ -1191,10 +1191,10 @@ function Bt({
         background: `radial-gradient(ellipse, ${i}88 0%, ${i}33 40%, transparent 72%)`,
         filter: "blur(12px)"
       } }),
-      Mt.map((s, l) => /* @__PURE__ */ e("div", { style: {
+      Nt.map((s, l) => /* @__PURE__ */ e("div", { style: {
         position: "absolute",
         width: a * s.scale,
-        height: o * s.scale,
+        height: n * s.scale,
         borderRadius: "50%",
         border: `${s.bw} solid ${i}`,
         opacity: s.op,
@@ -1206,7 +1206,7 @@ function Bt({
       /* @__PURE__ */ e("div", { style: {
         position: "absolute",
         width: a * 1.04,
-        height: o * 1.04,
+        height: n * 1.04,
         borderRadius: "50%",
         transform: "scaleY(0.22)",
         border: `1px dashed ${i}55`,
@@ -1215,7 +1215,7 @@ function Bt({
       /* @__PURE__ */ e("div", { style: {
         position: "absolute",
         width: a * 0.1,
-        height: o * 0.1,
+        height: n * 0.1,
         borderRadius: "50%",
         transform: "scaleY(0.22)",
         background: `radial-gradient(circle, #ffffff 0%, ${i} 35%, transparent 70%)`,
@@ -1234,11 +1234,11 @@ function Bt({
     }, children: r })
   ] });
 }
-const ae = Xe(null), Ut = "cubic-bezier(0.34, 1.56, 0.64, 1)", it = 330, ot = 340, Ft = 660;
+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: o = "online",
-  connections: n = [],
+  status: n = "online",
+  connections: o = [],
   baseConfig: i,
   children: r,
   _index: a,
@@ -1248,32 +1248,32 @@ function dt({
   _animPhase: c,
   _selectedSystem: p,
   _selectedComponent: h,
-  _rotateY: g,
+  _rotateY: b,
   _autoRotateComponents: u,
-  _componentScale: b,
+  _componentScale: g,
   _drillZoom: m,
   _onSelectSystem: x,
   _onComponentClick: w,
   _containerWidth: P
 }) {
-  const y = ve(qe), D = ve(Ke), B = a ?? D.index, $ = 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 = g ?? y?.rotateY ?? 20, ie = u ?? y?.autoRotateComponents ?? !0, I = b ?? y?.componentScale ?? 0.35, U = m ?? y?.drillZoom ?? 3.3, oe = x ?? y?.onSelectSystem, Se = w ?? y?.onComponentClick, ke = P ?? y?.containerWidth ?? 950, G = X === t, N = G && (v === "expanded" || v === "expanding" && W >= 1), C = !N, $e = (ke - Ft) / 2, ne = it + $e, le = B / $ * Math.PI * 2 + V, Ne = 420, Te = 160, Re = ne + Math.cos(le) * Ne, se = 450 + Math.sin(le) * Te, xt = Math.round(se), Me = !G && (v === "expanding" || v === "expanded"), vt = Me ? 0 : 1, Pe = C ? 0.3 + (Math.sin(le) + 1) * 0.1 : 1, wt = C ? Pe : I, Ae = v === "compact" || v === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", tt = G && z, Be = tt ? U : 1, St = z?.ex ?? 330, kt = z?.ey ?? 300, { size: $t = 90, color: Rt = "#00e5ff", widthRatio: Pt = 3 } = i ?? {}, Ct = {
+  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: G,
+    isSelected: Q,
     isExpandedPos: N,
     isCompact: C,
     animPhase: W,
     compactCx: Re,
     compactCy: se,
     groupScale: Pe,
-    effectiveScale: wt,
+    effectiveScale: vt,
     transitionValue: Ae,
     rotateY: te,
     autoRotateComponents: ie,
     onComponentClick: Se,
     selectedComponentName: z?.name ?? null,
-    expandedOffsetX: $e
+    expandedOffsetX: ke
   };
-  return /* @__PURE__ */ e(ae.Provider, { value: Ct, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(ae.Provider, { value: Pt, children: /* @__PURE__ */ d(
     "div",
     {
       style: {
@@ -1283,12 +1283,12 @@ function dt({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: vt,
-        transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Ut}`,
+        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: G ? 500 : Me ? 0 : xt,
-        transformOrigin: `${ne}px ${ot}px`,
-        transform: tt ? `translate(${-(St - it) * Be}px, ${-(kt - ot) * Be}px) scale(${Be})` : "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: [
         C && !Me && /* @__PURE__ */ e(
@@ -1306,11 +1306,11 @@ function dt({
               zIndex: 101
             },
             onClick: (j) => {
-              j.stopPropagation(), oe?.(t);
+              j.stopPropagation(), ne?.(t);
             }
           }
         ),
-        C && (o === "warning" || o === "critical") && /* @__PURE__ */ e(
+        C && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -1321,17 +1321,17 @@ function dt({
               zIndex: 110,
               pointerEvents: "none",
               animation: "holo-led-blink 1.5s infinite",
-              filter: `drop-shadow(0 0 10px ${o === "critical" ? "#ff2255" : "#ff8c00"})`
+              filter: `drop-shadow(0 0 10px ${n === "critical" ? "#ff2255" : "#ff8c00"})`
             },
             children: /* @__PURE__ */ d("svg", { width: "48", height: "48", viewBox: "0 0 28 28", fill: "none", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
                   d: "M14 3L1.5 25.5h25L14 3z",
-                  stroke: o === "critical" ? "#ff2255" : "#ff8c00",
+                  stroke: n === "critical" ? "#ff2255" : "#ff8c00",
                   strokeWidth: "2",
                   strokeLinejoin: "round",
-                  fill: (o === "critical" ? "#ff2255" : "#ff8c00") + "22"
+                  fill: (n === "critical" ? "#ff2255" : "#ff8c00") + "22"
                 }
               ),
               /* @__PURE__ */ e(
@@ -1341,7 +1341,7 @@ function dt({
                   y1: "11",
                   x2: "14",
                   y2: "18",
-                  stroke: o === "critical" ? "#ff2255" : "#ff8c00",
+                  stroke: n === "critical" ? "#ff2255" : "#ff8c00",
                   strokeWidth: "2.5",
                   strokeLinecap: "round"
                 }
@@ -1352,7 +1352,7 @@ function dt({
                   cx: "14",
                   cy: "21.5",
                   r: "1.5",
-                  fill: o === "critical" ? "#ff2255" : "#ff8c00"
+                  fill: n === "critical" ? "#ff2255" : "#ff8c00"
                 }
               )
             ] })
@@ -1363,7 +1363,7 @@ function dt({
           {
             style: {
               position: "absolute",
-              left: N ? ne : Re,
+              left: N ? oe : Re,
               top: N ? 48 : se - 180,
               transform: `translate(-50%, -50%) scale(${N ? 1.2 : Pe * 1.5})`,
               opacity: 1,
@@ -1389,25 +1389,25 @@ function dt({
             style: {
               position: "absolute",
               top: 0,
-              left: N ? $e : 0,
+              left: N ? ke : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
               transition: Ae
             },
-            children: n.map((j, Et) => /* @__PURE__ */ e(
-              Nt,
+            children: o.map((j, Ct) => /* @__PURE__ */ e(
+              zt,
               {
                 x1: j.from[0],
                 y1: j.from[1],
                 x2: j.to[0],
                 y2: j.to[1],
-                show: G && W >= (j.visibleAtPhase ?? 0),
+                show: Q && W >= (j.visibleAtPhase ?? 0),
                 color: j.color,
                 dur: j.duration
               },
-              Et
+              Ct
             ))
           }
         ),
@@ -1416,13 +1416,13 @@ function dt({
           {
             style: {
               position: "absolute",
-              left: N ? ne : Re,
+              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(Bt, { size: $t, color: Rt, widthRatio: Pt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
+            children: /* @__PURE__ */ e(Mt, { size: $t, color: kt, widthRatio: Rt, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
           }
         ),
         r
@@ -1432,8 +1432,8 @@ function dt({
 }
 function T({
   ex: t,
-  ey: o,
-  compactOffset: n,
+  ey: n,
+  compactOffset: o,
   zIndex: i,
   children: r,
   color: a = "#00e5ff",
@@ -1443,13 +1443,13 @@ function T({
   componentInfo: c,
   visibleAtPhase: p = 0,
   fixedScale: h,
-  bare: g = !1
+  bare: b = !1
 }) {
   const u = ve(ae);
   if (!u)
     throw new Error("ServiceNode must be used inside a <Service> component.");
   const {
-    isExpandedPos: b,
+    isExpandedPos: g,
     animPhase: m,
     compactCx: x,
     compactCy: w,
@@ -1457,14 +1457,14 @@ function T({
     effectiveScale: y,
     transitionValue: D,
     onComponentClick: B,
-    selectedComponentName: $,
+    selectedComponentName: k,
     expandedOffsetX: V
-  } = u, W = p === 0 || u.isSelected && m >= p ? 1 : 0, X = x + n.x, z = w + n.y, te = b ? t + V : X, ie = b ? o : z, I = h !== void 0 ? h : u.isCompact ? P : y, U = !!c && !!$ && c.name === $, oe = c?.status ? S[c.status]?.color ?? a : a, Se = c?.status === "offline" ? "#4a6a8a" : oe, ke = c && b && B ? () => B({
+  } = 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,
     ex: c.ex ?? t,
-    ey: c.ey ?? o,
+    ey: c.ey ?? n,
     context: c.context,
     subComponents: c.subComponents,
     graphSeries: c.graphSeries
@@ -1480,19 +1480,19 @@ function T({
         opacity: W,
         zIndex: i,
         transition: D || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-        pointerEvents: b && W >= 0.5 ? "auto" : "none"
+        pointerEvents: g && W >= 0.5 ? "auto" : "none"
       },
-      children: g ? r : /* @__PURE__ */ e(
+      children: b ? r : /* @__PURE__ */ e(
         Ht,
         {
           statusColor: Se,
           label: s,
           subLabel: l,
           delay: f,
-          showLabels: b,
+          showLabels: g,
           isCompact: u.isCompact,
-          onClick: ke,
-          isSelected: U,
+          onClick: $e,
+          isSelected: F,
           children: r
         }
       )
@@ -1501,8 +1501,8 @@ function T({
 }
 function Ht({
   children: t,
-  statusColor: o,
-  label: n,
+  statusColor: n,
+  label: o,
   subLabel: i,
   delay: r = "0s",
   showLabels: a = !0,
@@ -1510,13 +1510,13 @@ function Ht({
   onClick: l,
   isSelected: f = !1
 }) {
-  const [c, p] = A(!1), h = f ? `brightness(1.5) drop-shadow(0 0 24px ${o}cc) drop-shadow(0 0 8px ${o}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${o}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",
     {
       className: `float-node${l ? " float-node--interactive" : ""}`,
-      onClick: (g) => {
-        l && (g.stopPropagation(), l());
+      onClick: (b) => {
+        l && (b.stopPropagation(), l());
       },
       style: {
         cursor: l ? "pointer" : void 0,
@@ -1534,8 +1534,8 @@ function Ht({
             {
               className: "scan-line",
               style: {
-                background: `linear-gradient(90deg, transparent 5%, ${o}cc 40%, #fff 50%, ${o}cc 60%, transparent 95%)`,
-                boxShadow: `0 0 8px ${o}`
+                background: `linear-gradient(90deg, transparent 5%, ${n}cc 40%, #fff 50%, ${n}cc 60%, transparent 95%)`,
+                boxShadow: `0 0 8px ${n}`
               }
             }
           ),
@@ -1551,8 +1551,8 @@ function Ht({
               transition: "opacity 0.5s ease"
             },
             children: [
-              n && /* @__PURE__ */ e("div", { className: "node-tag", style: { color: o + "cc" }, children: n }),
-              i && /* @__PURE__ */ e("div", { className: "node-subtag", style: { color: o + "77" }, children: i })
+              o && /* @__PURE__ */ e("div", { className: "node-tag", style: { color: n + "cc" }, children: o }),
+              i && /* @__PURE__ */ e("div", { className: "node-subtag", style: { color: n + "77" }, children: i })
             ]
           }
         )
@@ -1560,36 +1560,36 @@ function Ht({
     }
   );
 }
-function ct({ synced: t, latencyMs: o }) {
-  const n = t ? "#00ff88" : "#ff8c00";
+function ct({ synced: t, latencyMs: n }) {
+  const o = t ? "#00ff88" : "#ff8c00";
   return /* @__PURE__ */ d("div", { className: "sync-bridge", children: [
     /* @__PURE__ */ d("div", { className: "sync-arrows", children: [
-      /* @__PURE__ */ e("span", { style: { color: n, fontSize: 10, lineHeight: 1 }, children: "◄" }),
+      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "◄" }),
       /* @__PURE__ */ e(
         "div",
         {
           className: "sync-line",
           style: {
-            background: `linear-gradient(90deg, ${n}44, ${n}, ${n}44)`,
-            boxShadow: `0 0 8px ${n}55`
+            background: `linear-gradient(90deg, ${o}44, ${o}, ${o}44)`,
+            boxShadow: `0 0 8px ${o}55`
           }
         }
       ),
-      /* @__PURE__ */ e("span", { style: { color: n, fontSize: 10, lineHeight: 1 }, children: "►" })
+      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "►" })
     ] }),
     /* @__PURE__ */ e(
       "div",
       {
         className: "sync-status",
         style: {
-          color: n,
+          color: o,
           animation: t ? "none" : "holo-led-blink 1s linear infinite"
         },
         children: t ? "SYNCED" : "LAG"
       }
     ),
-    /* @__PURE__ */ d("div", { className: "sync-latency", style: { color: n + "88" }, children: [
-      o,
+    /* @__PURE__ */ d("div", { className: "sync-latency", style: { color: o + "88" }, children: [
+      n,
       "ms ",
       t ? "replication" : "behind"
     ] })
@@ -1597,8 +1597,8 @@ function ct({ synced: t, latencyMs: o }) {
 }
 function O({
   ex: t,
-  ey: o,
-  status: n,
+  ey: n,
+  status: o,
   title: i,
   msg: r,
   offsetX: a,
@@ -1608,15 +1608,15 @@ function O({
   internalRef: c
 }) {
   const h = ve(ae)?.expandedOffsetX ?? 0;
-  if (n === "online") return null;
-  const g = S[n]?.color ?? S.warning.color, u = Math.abs(a) > Math.abs(s), b = t + h + (u ? Math.sign(a) * 45 : 0), m = o + (u ? 0 : Math.sign(s) * 40), x = t + h + a, w = o + s;
+  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 $ = b + (x - b) / 2;
-    P = `M ${b} ${m} L ${$} ${m} L ${$} ${w} L ${x} ${w}`;
+    const k = g + (x - g) / 2;
+    P = `M ${g} ${m} L ${k} ${m} L ${k} ${w} L ${x} ${w}`;
   } else {
-    const $ = m + (w - m) / 2;
-    P = `M ${b} ${m} L ${b} ${$} L ${x} ${$} L ${x} ${w}`;
+    const k = m + (w - m) / 2;
+    P = `M ${g} ${m} L ${g} ${k} L ${x} ${k} L ${x} ${w}`;
   }
   let y = "translate(0, -50%)";
   f === "left" && (y = "translate(-100%, -50%)"), f === "top" && (y = "translate(-50%, -100%)"), f === "bottom" && (y = "translate(-50%, 0)");
@@ -1653,10 +1653,10 @@ function O({
               {
                 d: P,
                 fill: "none",
-                stroke: g,
+                stroke: b,
                 strokeWidth: "1.5",
                 strokeDasharray: "5 4",
-                style: { filter: `drop-shadow(0 0 4px ${g})`, opacity: 0.55 }
+                style: { filter: `drop-shadow(0 0 4px ${b})`, opacity: 0.55 }
               }
             )
           }
@@ -1672,8 +1672,8 @@ function O({
               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 ${g}55`,
-              borderLeft: `2px solid ${g}`,
+              border: `1px solid ${b}55`,
+              borderLeft: `2px solid ${b}`,
               backdropFilter: "blur(8px)",
               WebkitBackdropFilter: "blur(8px)",
               padding: "6px 10px",
@@ -1681,7 +1681,7 @@ function O({
               color: "#fff",
               fontFamily: "'Courier New', monospace",
               width: 140,
-              boxShadow: `0 4px 12px rgba(0,0,0,0.4), 0 0 8px ${g}22 inset`
+              boxShadow: `0 4px 12px rgba(0,0,0,0.4), 0 0 8px ${b}22 inset`
             },
             children: [
               /* @__PURE__ */ d(
@@ -1701,8 +1701,8 @@ function O({
                           width: 4,
                           height: 4,
                           borderRadius: "50%",
-                          background: g,
-                          boxShadow: `0 0 6px ${g}`,
+                          background: b,
+                          boxShadow: `0 0 6px ${b}`,
                           animation: "holo-led-blink 1.5s infinite"
                         }
                       }
@@ -1711,12 +1711,12 @@ function O({
                       "div",
                       {
                         style: {
-                          color: g,
+                          color: b,
                           fontWeight: "600",
                           fontSize: 10,
                           letterSpacing: "1px",
                           textTransform: "uppercase",
-                          textShadow: `0 0 4px ${g}88`
+                          textShadow: `0 0 4px ${b}88`
                         },
                         children: c ? `${i} · ${c}` : i
                       }
@@ -1742,28 +1742,28 @@ function O({
     }
   );
 }
-const Q = 140, F = 240, Z = 160, de = Qe(Q, F, Z);
-function Yt({
+const q = 140, H = 240, Z = 160, de = qe(q, H, Z);
+function Ut({
   cfg: t,
-  name: o,
-  cpuLoad: n,
+  name: n,
+  cpuLoad: o,
   memLoad: i,
   status: r,
   compact: a
 }) {
-  const s = Math.ceil(n / 100 * 3), l = r === "offline" ? "#4a6a8a" : t.color, f = [
+  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: n > 15, label: "DSK" },
+    { color: t.color, on: o > 15, label: "DSK" },
     { color: r === "critical" ? "#ff2255" : t.color, on: r === "critical", label: "FLT" }
   ];
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: Q,
-        height: F,
-        background: a ? we : Ge,
+        width: q,
+        height: H,
+        background: a ? we : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -1841,7 +1841,7 @@ function Yt({
                       letterSpacing: "0.08em",
                       textShadow: `0 0 4px ${l}66`
                     },
-                    children: o
+                    children: n
                   }
                 ),
                 /* @__PURE__ */ e("div", { style: { display: "flex", gap: 5 }, children: f.map((c, p) => /* @__PURE__ */ e(
@@ -1976,7 +1976,7 @@ function Yt({
                           top: 0,
                           left: 0,
                           bottom: 0,
-                          width: `${30 + n / 100 * 45 + p * 8}%`,
+                          width: `${30 + o / 100 * 45 + p * 8}%`,
                           background: `linear-gradient(90deg, ${t.color}22, transparent)`
                         }
                       }
@@ -2067,7 +2067,7 @@ function Yt({
                 }
               ),
               /* @__PURE__ */ e("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [
-                { val: n, color: t.color },
+                { val: o, color: t.color },
                 { val: i, color: t.color + "bb" }
               ].map((c, p) => /* @__PURE__ */ e(
                 "div",
@@ -2154,13 +2154,13 @@ function Yt({
     }
   );
 }
-function Vt() {
+function Yt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: Q,
-        height: F,
+        width: q,
+        height: H,
         background: "linear-gradient(180deg, #040c1a 0%, #030810 100%)",
         position: "relative",
         overflow: "hidden",
@@ -2268,15 +2268,15 @@ function Vt() {
     }
   );
 }
-function nt({ side: t, color: o }) {
-  const n = t === "right";
+function ot({ side: t, color: n }) {
+  const o = t === "right";
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: Z,
-        height: F,
-        background: n ? "linear-gradient(90deg, #040c1c 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #040c1c 100%)",
+        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"
       },
@@ -2290,17 +2290,17 @@ function nt({ side: t, color: o }) {
               left: 0,
               right: 0,
               height: 1,
-              background: `linear-gradient(90deg, transparent, ${o}22 50%, transparent)`
+              background: `linear-gradient(90deg, transparent, ${n}22 50%, transparent)`
             }
           }
         ),
-        [8, F - 20].map((i) => /* @__PURE__ */ e(
+        [8, H - 20].map((i) => /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
               top: i,
-              left: n ? 10 : Z - 18,
+              left: o ? 10 : Z - 18,
               width: 8,
               height: 8,
               borderRadius: 1,
@@ -2316,10 +2316,10 @@ function nt({ side: t, color: o }) {
           {
             style: {
               position: "absolute",
-              top: F * 0.35,
-              bottom: F * 0.15,
-              left: n ? 22 : 18,
-              right: n ? 18 : 22,
+              top: H * 0.35,
+              bottom: H * 0.15,
+              left: o ? 22 : 18,
+              right: o ? 18 : 22,
               display: "flex",
               flexDirection: "column",
               gap: 5,
@@ -2345,8 +2345,8 @@ function nt({ side: t, color: o }) {
           {
             style: {
               position: "absolute",
-              top: F * 0.18,
-              left: n ? 12 : Z - 78,
+              top: H * 0.18,
+              left: o ? 12 : Z - 78,
               fontSize: 7,
               color: "#1a3050",
               letterSpacing: "0.2em",
@@ -2361,13 +2361,13 @@ function nt({ side: t, color: o }) {
     }
   );
 }
-function _t({ cpuLoad: t }) {
-  const o = t / 100, n = o > 0.75 ? "rgba(255,34,85,0.16)" : o > 0.45 ? "rgba(255,140,0,0.12)" : "rgba(0,229,255,0.08)", i = Math.floor((Z - 18) / 7);
+function Vt({ cpuLoad: t }) {
+  const n = t / 100, o = n > 0.75 ? "rgba(255,34,85,0.16)" : n > 0.45 ? "rgba(255,140,0,0.12)" : "rgba(0,229,255,0.08)", i = Math.floor((Z - 18) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: Q,
+        width: q,
         height: Z,
         background: "linear-gradient(180deg, #0c1c30 0%, #070f1e 40%, #040c1a 100%)",
         position: "relative",
@@ -2383,7 +2383,7 @@ function _t({ cpuLoad: t }) {
               left: 0,
               right: 0,
               height: Z * 0.4,
-              background: `radial-gradient(ellipse at 50% 0%, ${n} 0%, transparent 70%)`
+              background: `radial-gradient(ellipse at 50% 0%, ${o} 0%, transparent 70%)`
             }
           }
         ),
@@ -2443,8 +2443,8 @@ function _t({ cpuLoad: t }) {
 }
 function ue({
   rotateX: t = -22,
-  rotateY: o = 20,
-  rotateZ: n = 0,
+  rotateY: n = 20,
+  rotateZ: o = 0,
   scale: i = 1,
   autoRotate: r = !1,
   status: a = "online",
@@ -2453,26 +2453,26 @@ function ue({
   memLoad: f = 82,
   _compact: c
 }) {
-  const [p, h] = A(o), g = ee(0), u = ee(0);
+  const [p, h] = A(n), b = ee(0), u = ee(0);
   Ee(() => {
     if (!r) {
-      h(o);
+      h(n);
       return;
     }
     const m = (x) => {
-      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, g.current = requestAnimationFrame(m);
+      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, b.current = requestAnimationFrame(m);
     };
-    return g.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(g.current), u.current = 0;
+    return b.current = requestAnimationFrame(m), () => {
+      cancelAnimationFrame(b.current), u.current = 0;
     };
-  }, [r, o]);
-  const b = S[a] ?? S.online;
+  }, [r, n]);
+  const g = S[a] ?? S.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: Q * i,
-        height: F * i,
+        width: q * 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 ${b.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: b.color,
+                  stroke: g.color,
                   strokeWidth: "2",
                   strokeLinejoin: "round",
-                  fill: b.color + "22"
+                  fill: g.color + "22"
                 }
               ),
               /* @__PURE__ */ e(
@@ -2510,12 +2510,12 @@ function ue({
                   y1: "11",
                   x2: "14",
                   y2: "18",
-                  stroke: b.color,
+                  stroke: g.color,
                   strokeWidth: "2.5",
                   strokeLinecap: "round"
                 }
               ),
-              /* @__PURE__ */ e("circle", { cx: "14", cy: "21.5", r: "1.5", fill: b.color })
+              /* @__PURE__ */ e("circle", { cx: "14", cy: "21.5", r: "1.5", fill: g.color })
             ] })
           }
         ),
@@ -2524,9 +2524,9 @@ function ue({
           {
             style: {
               position: "absolute",
-              width: Q * 1.4 * i,
-              height: F * 0.8 * i,
-              background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
+              width: q * 1.4 * i,
+              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%",
@@ -2548,18 +2548,18 @@ function ue({
               "div",
               {
                 style: {
-                  width: Q,
-                  height: F,
+                  width: q,
+                  height: H,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${n}deg)`,
+                  transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
                   /* @__PURE__ */ e("div", { style: de.front, children: /* @__PURE__ */ e(
-                    Yt,
+                    Ut,
                     {
-                      cfg: b,
+                      cfg: g,
                       name: s,
                       cpuLoad: l,
                       memLoad: f,
@@ -2567,15 +2567,15 @@ function ue({
                       compact: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: de.back, children: /* @__PURE__ */ e(Vt, {}) }),
-                  /* @__PURE__ */ e("div", { style: de.left, children: /* @__PURE__ */ e(nt, { side: "left", color: b.color }) }),
-                  /* @__PURE__ */ e("div", { style: de.right, children: /* @__PURE__ */ e(nt, { side: "right", color: b.color }) }),
-                  /* @__PURE__ */ e("div", { style: de.top, children: /* @__PURE__ */ e(_t, { cpuLoad: l }) }),
+                  /* @__PURE__ */ e("div", { style: de.back, children: /* @__PURE__ */ e(Yt, {}) }),
+                  /* @__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",
                     {
                       style: {
-                        width: Q,
+                        width: q,
                         height: Z,
                         background: "linear-gradient(180deg, #030710, #020508)"
                       }
@@ -2590,21 +2590,21 @@ function ue({
     }
   );
 }
-const je = 12, re = 55, _ = re * 2, he = 52, Ze = 10, Fe = 3 * he + 2 * Ze, ce = 2 * Math.PI * re / je, He = Array.from({ length: je }, (t, o) => o / je * 360);
+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 jt({
+function _t({
   diskY: t,
-  diskIdx: o,
-  cfg: n,
+  diskIdx: n,
+  cfg: o,
   hasRingBelow: i,
   capacity: r,
   compact: a
 }) {
   return /* @__PURE__ */ d(Ce, { children: [
-    He.map((s, l) => {
-      const f = Ye(s), c = l === 0, p = Math.round(4 + f * 9), h = Math.round(12 + f * 22), g = Math.round(28 + f * 44), u = Math.round(f * 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,9 +2616,9 @@ function jt({
             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},${g})`,
-            borderLeft: `1px solid ${n.color}${u}`,
-            boxShadow: c ? `inset 0 0 18px ${n.color}28` : "none"
+            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: [
             /* @__PURE__ */ e(
@@ -2632,12 +2632,12 @@ function jt({
                   width: 5,
                   height: 5,
                   borderRadius: "50%",
-                  background: n.color,
-                  boxShadow: `0 0 8px ${n.color}, 0 0 16px ${n.glow}`
+                  background: o.color,
+                  boxShadow: `0 0 8px ${o.color}, 0 0 16px ${o.glow}`
                 }
               }
             ),
-            o === 1 && /* @__PURE__ */ e(
+            n === 1 && /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -2656,7 +2656,7 @@ function jt({
                     style: {
                       width: `${r}%`,
                       height: "100%",
-                      background: `linear-gradient(90deg, ${n.color}77, ${n.color})`,
+                      background: `linear-gradient(90deg, ${o.color}77, ${o.color})`,
                       borderRadius: 2
                     }
                   }
@@ -2665,7 +2665,7 @@ function jt({
             )
           ] })
         },
-        `p${o}${l}`
+        `p${n}${l}`
       );
     }),
     /* @__PURE__ */ d(
@@ -2680,17 +2680,17 @@ function jt({
           borderRadius: "50%",
           transform: "rotateX(90deg)",
           backfaceVisibility: "hidden",
-          background: o === 0 ? a ? `radial-gradient(circle,
-              ${n.color}28 0%,
-              ${n.color}10 40%,
+          background: n === 0 ? a ? `radial-gradient(circle,
+              ${o.color}28 0%,
+              ${o.color}10 40%,
               rgb(3,10,24) 75%,
               rgb(2,8,18) 100%)` : `radial-gradient(circle,
-              ${n.color}28 0%,
-              ${n.color}10 40%,
+              ${o.color}28 0%,
+              ${o.color}10 40%,
               rgba(3,10,24,0.96) 75%,
               transparent 100%)` : a ? "radial-gradient(circle, rgb(5,16,36), rgb(2,8,20))" : "radial-gradient(circle, rgba(5,16,36,0.96), rgba(2,8,20,0.99))",
-          border: `1px solid ${n.color}${o === 0 ? "55" : "2a"}`,
-          boxShadow: o === 0 ? `0 0 20px ${n.color}44` : "none"
+          border: `1px solid ${o.color}${n === 0 ? "55" : "2a"}`,
+          boxShadow: n === 0 ? `0 0 20px ${o.color}44` : "none"
         },
         children: [
           [0.62, 0.38, 0.18].map((s, l) => /* @__PURE__ */ e(
@@ -2704,8 +2704,8 @@ function jt({
                 width: `${s * 100}%`,
                 height: `${s * 100}%`,
                 borderRadius: "50%",
-                border: `1px solid ${n.color}${["33", "2a", "44"][l]}`,
-                boxShadow: l === 2 ? `0 0 6px ${n.color}66` : "none"
+                border: `1px solid ${o.color}${["33", "2a", "44"][l]}`,
+                boxShadow: l === 2 ? `0 0 6px ${o.color}66` : "none"
               }
             },
             l
@@ -2721,8 +2721,8 @@ function jt({
                 width: 8,
                 height: 8,
                 borderRadius: "50%",
-                background: n.color + "33",
-                boxShadow: `0 0 8px ${n.color}`
+                background: o.color + "33",
+                boxShadow: `0 0 8px ${o.color}`
               }
             }
           )
@@ -2742,7 +2742,7 @@ function jt({
           transform: "rotateX(-90deg)",
           backfaceVisibility: "hidden",
           background: a ? "radial-gradient(circle, rgb(4,14,30), rgb(2,7,16))" : "radial-gradient(circle, rgba(4,14,30,0.97), rgba(2,7,16,0.99))",
-          border: `1px solid ${n.color}22`
+          border: `1px solid ${o.color}22`
         },
         children: /* @__PURE__ */ e(
           "div",
@@ -2755,13 +2755,13 @@ function jt({
               width: "55%",
               height: "55%",
               borderRadius: "50%",
-              border: `1px solid ${n.color}18`
+              border: `1px solid ${o.color}18`
             }
           }
         )
       }
     ),
-    i && He.map((s, l) => {
+    i && Ue.map((s, l) => {
       const f = Ye(s);
       return /* @__PURE__ */ e(
         "div",
@@ -2774,15 +2774,15 @@ function jt({
             top: t + he - 3,
             transform: `rotateY(${s}deg) translateZ(${re + 1.5}px)`,
             backfaceVisibility: "hidden",
-            background: n.color,
-            boxShadow: `0 0 8px ${n.color}, 0 0 18px ${n.color}aa, 0 0 30px ${n.glow}`,
+            background: o.color,
+            boxShadow: `0 0 8px ${o.color}, 0 0 18px ${o.color}aa, 0 0 30px ${o.glow}`,
             opacity: f * 0.9
           }
         },
-        `rng${o}${l}`
+        `rng${n}${l}`
       );
     }),
-    i && He.map((s, l) => {
+    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",
@@ -2798,15 +2798,15 @@ function jt({
             background: `rgb(${c},${p},${h})`
           }
         },
-        `gap${o}${l}`
+        `gap${n}${l}`
       );
     })
   ] });
 }
 function Ie({
   rotateX: t = -22,
-  rotateY: o = -15,
-  rotateZ: n = 0,
+  rotateY: n = -15,
+  rotateZ: o = 0,
   scale: i = 1,
   autoRotate: r = !1,
   status: a = "online",
@@ -2815,26 +2815,26 @@ function Ie({
   // connections = 284,
   _compact: l
 }) {
-  const [f, c] = A(o), p = ee(0), h = ee(0);
+  const [f, c] = A(n), p = ee(0), h = ee(0);
   Ee(() => {
     if (!r) {
-      c(o);
+      c(n);
       return;
     }
-    const u = (b) => {
-      h.current && c((m) => m + (b - h.current) * 0.027), h.current = b, p.current = requestAnimationFrame(u);
+    const u = (g) => {
+      h.current && c((m) => m + (g - h.current) * 0.027), h.current = g, p.current = requestAnimationFrame(u);
     };
     return p.current = requestAnimationFrame(u), () => {
       cancelAnimationFrame(p.current), h.current = 0;
     };
-  }, [r, o]);
-  const g = S[a] ?? S.online;
+  }, [r, n]);
+  const b = S[a] ?? S.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: _ * i,
-        height: Fe * i,
+        height: He * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2895,8 +2895,8 @@ function Ie({
             style: {
               position: "absolute",
               width: _ * 2.8 * i,
-              height: Fe * 0.85 * i,
-              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
+              height: He * 0.85 * i,
+              background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * i)}px)`,
               pointerEvents: "none",
               top: "45%",
@@ -2919,18 +2919,18 @@ function Ie({
               {
                 style: {
                   width: _,
-                  height: Fe,
+                  height: He,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${n}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((u) => /* @__PURE__ */ e(
-                  jt,
+                  _t,
                   {
                     diskY: u * (he + Ze),
                     diskIdx: u,
-                    cfg: g,
+                    cfg: b,
                     hasRingBelow: u < 2,
                     capacity: s,
                     compact: l
@@ -2945,22 +2945,22 @@ function Ie({
     }
   );
 }
-const q = 190, H = 72, ge = 120, pe = Qe(q, H, ge);
-function Xt({
+const G = 190, U = 72, be = 120, pe = qe(G, U, be);
+function jt({
   cfg: t,
-  name: o,
-  traffic: n,
+  name: n,
+  traffic: o,
   activeRoutes: i,
   compact: r
 }) {
-  const a = Math.ceil(n / 100 * 8), s = Array(8).fill(t.color);
+  const a = Math.ceil(o / 100 * 8), s = Array(8).fill(t.color);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: q,
-        height: H,
-        background: r ? we : Ge,
+        width: G,
+        height: U,
+        background: r ? we : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3011,7 +3011,7 @@ function Xt({
                   }
                 }
               ),
-              /* @__PURE__ */ e("span", { style: { fontSize: 7.5, color: t.color + "cc", letterSpacing: "0.1em" }, children: o }),
+              /* @__PURE__ */ e("span", { style: { fontSize: 7.5, color: t.color + "cc", letterSpacing: "0.1em" }, children: n }),
               /* @__PURE__ */ e("div", { style: { flex: 1 } }),
               /* @__PURE__ */ e(
                 "div",
@@ -3122,7 +3122,7 @@ function Xt({
                   /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 2 }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#2a5070", letterSpacing: "0.1em" }, children: "TRAFFIC" }),
                     /* @__PURE__ */ d("span", { style: { fontSize: 6, color: t.color }, children: [
-                      n,
+                      o,
                       "%"
                     ] })
                   ] }),
@@ -3140,7 +3140,7 @@ function Xt({
                         "div",
                         {
                           style: {
-                            width: `${n}%`,
+                            width: `${o}%`,
                             height: "100%",
                             background: `linear-gradient(90deg, ${t.color}44, ${t.color})`,
                             borderRadius: 2,
@@ -3178,8 +3178,8 @@ function Xt({
               gap: 12
             },
             children: [
-              { label: "HTTP", val: Math.round(n * 12.4), unit: "req/s" },
-              { label: "HTTPS", val: Math.round(n * 8.6), unit: "req/s" },
+              { label: "HTTP", val: Math.round(o * 12.4), unit: "req/s" },
+              { label: "HTTPS", val: Math.round(o * 8.6), unit: "req/s" },
               { label: "WS", val: Math.round(i * 3), unit: "conn" }
             ].map((l) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
               /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: l.label }),
@@ -3208,13 +3208,13 @@ function Xt({
     }
   );
 }
-function Gt() {
+function Xt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: q,
-        height: H,
+        width: G,
+        height: U,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3229,7 +3229,7 @@ function Gt() {
           {
             style: {
               width: 40,
-              height: H - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3285,7 +3285,7 @@ function Gt() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: H - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3296,13 +3296,13 @@ function Gt() {
     }
   );
 }
-function rt({ side: t, color: o }) {
+function rt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: ge,
-        height: H,
+        width: be,
+        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"
@@ -3317,7 +3317,7 @@ function rt({ side: t, color: o }) {
               left: 0,
               right: 0,
               height: 1,
-              background: `linear-gradient(90deg, transparent, ${o}22 50%, transparent)`
+              background: `linear-gradient(90deg, transparent, ${n}22 50%, transparent)`
             }
           }
         ),
@@ -3326,8 +3326,8 @@ function rt({ side: t, color: o }) {
           {
             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",
@@ -3354,13 +3354,13 @@ function rt({ side: t, color: o }) {
   );
 }
 function Qt({ traffic: t }) {
-  const o = Math.floor((ge - 14) / 7);
+  const n = Math.floor((be - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: q,
-        height: ge,
+        width: G,
+        height: be,
         background: "linear-gradient(180deg, #0c1c30 0%, #07101e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -3374,7 +3374,7 @@ function Qt({ traffic: t }) {
               top: 0,
               left: 0,
               right: 0,
-              height: ge * 0.35,
+              height: be * 0.35,
               background: `radial-gradient(ellipse at 50% 0%,
           ${t > 70 ? "rgba(255,34,85,0.14)" : "rgba(0,229,255,0.08)"} 0%,
           transparent 70%)`
@@ -3394,7 +3394,7 @@ function Qt({ traffic: t }) {
               flexDirection: "column",
               gap: 4
             },
-            children: Array.from({ length: o }).map((n, i) => /* @__PURE__ */ e(
+            children: Array.from({ length: n }).map((o, i) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -3414,8 +3414,8 @@ function Qt({ traffic: t }) {
 }
 function pt({
   rotateX: t = -20,
-  rotateY: o = 20,
-  rotateZ: n = 0,
+  rotateY: n = 20,
+  rotateZ: o = 0,
   scale: i = 1,
   autoRotate: r = !1,
   status: a = "online",
@@ -3424,26 +3424,26 @@ function pt({
   activeRoutes: f = 12,
   _compact: c
 }) {
-  const [p, h] = A(o), g = ee(0), u = ee(0);
+  const [p, h] = A(n), b = ee(0), u = ee(0);
   Ee(() => {
     if (!r) {
-      h(o);
+      h(n);
       return;
     }
     const m = (x) => {
-      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, g.current = requestAnimationFrame(m);
+      u.current && h((w) => w + (x - u.current) * 0.027), u.current = x, b.current = requestAnimationFrame(m);
     };
-    return g.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(g.current), u.current = 0;
+    return b.current = requestAnimationFrame(m), () => {
+      cancelAnimationFrame(b.current), u.current = 0;
     };
-  }, [r, o]);
-  const b = S[a] ?? S.online;
+  }, [r, n]);
+  const g = S[a] ?? S.online;
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: q * i,
-        height: H * i,
+        width: G * i,
+        height: U * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3503,9 +3503,9 @@ function pt({
           {
             style: {
               position: "absolute",
-              width: q * 1.3 * i,
-              height: H * 2 * i,
-              background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
+              width: G * 1.3 * i,
+              height: U * 2 * i,
+              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
               top: "40%",
@@ -3527,29 +3527,29 @@ function pt({
               "div",
               {
                 style: {
-                  width: q,
-                  height: H,
+                  width: G,
+                  height: U,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${n}deg)`,
+                  transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${o}deg)`,
                   transition: r ? "none" : "transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94)"
                 },
                 children: [
                   /* @__PURE__ */ e("div", { style: pe.front, children: /* @__PURE__ */ e(
-                    Xt,
+                    jt,
                     {
-                      cfg: b,
+                      cfg: g,
                       name: s,
                       traffic: l,
                       activeRoutes: f,
                       compact: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: pe.back, children: /* @__PURE__ */ e(Gt, {}) }),
-                  /* @__PURE__ */ e("div", { style: pe.left, children: /* @__PURE__ */ e(rt, { side: "left", color: b.color }) }),
-                  /* @__PURE__ */ e("div", { style: pe.right, children: /* @__PURE__ */ e(rt, { side: "right", color: b.color }) }),
+                  /* @__PURE__ */ e("div", { style: pe.back, children: /* @__PURE__ */ e(Xt, {}) }),
+                  /* @__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: q, height: ge, background: "#020508" } }) })
+                  /* @__PURE__ */ e("div", { style: pe.bottom, children: /* @__PURE__ */ e("div", { style: { width: G, height: be, background: "#020508" } }) })
                 ]
               }
             )
@@ -3559,7 +3559,7 @@ function pt({
     }
   );
 }
-const K = 190, Y = 72, be = 120, fe = Qe(K, Y, be), at = {
+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)" },
@@ -3567,8 +3567,8 @@ const K = 190, Y = 72, be = 120, fe = Qe(K, Y, be), at = {
 };
 function qt({
   cfg: t,
-  name: o,
-  queueDepth: n,
+  name: n,
+  queueDepth: o,
   msgsPerSec: i,
   instances: r,
   compact: a
@@ -3580,7 +3580,7 @@ function qt({
       style: {
         width: K,
         height: Y,
-        background: a ? we : Ge,
+        background: a ? we : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3631,7 +3631,7 @@ function qt({
                   }
                 }
               ),
-              /* @__PURE__ */ e("span", { style: { fontSize: 7.5, color: s + "cc", letterSpacing: "0.1em" }, children: o }),
+              /* @__PURE__ */ e("span", { style: { fontSize: 7.5, color: s + "cc", letterSpacing: "0.1em" }, children: n }),
               /* @__PURE__ */ e("div", { style: { flex: 1 } }),
               /* @__PURE__ */ e(
                 "div",
@@ -3741,7 +3741,7 @@ function qt({
                   /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 2 }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#2a5070", letterSpacing: "0.1em" }, children: "QUEUE" }),
                     /* @__PURE__ */ d("span", { style: { fontSize: 6, color: s }, children: [
-                      n,
+                      o,
                       "%"
                     ] })
                   ] }),
@@ -3759,7 +3759,7 @@ function qt({
                         "div",
                         {
                           style: {
-                            width: `${n}%`,
+                            width: `${o}%`,
                             height: "100%",
                             background: `linear-gradient(90deg, ${s}44, ${s})`,
                             borderRadius: 2,
@@ -3795,7 +3795,7 @@ function qt({
             },
             children: [
               { label: "INST", val: r, unit: "conn" },
-              { label: "ENQUEUE", val: Math.round(n * 2.4), unit: "msgs" },
+              { label: "ENQUEUE", val: Math.round(o * 2.4), unit: "msgs" },
               { label: "DISP", val: Math.round(i * 0.1), unit: "/s" }
             ].map((f) => /* @__PURE__ */ d("div", { style: { display: "flex", gap: 3 }, children: [
               /* @__PURE__ */ e("span", { style: { fontSize: 6, color: "#1e3a5a", letterSpacing: "0.08em" }, children: f.label }),
@@ -3824,7 +3824,7 @@ function qt({
     }
   );
 }
-function Kt() {
+function Gt() {
   return /* @__PURE__ */ d(
     "div",
     {
@@ -3912,12 +3912,12 @@ function Kt() {
     }
   );
 }
-function lt({ side: t, color: o }) {
+function lt({ side: t, color: n }) {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
-        width: be,
+        width: ge,
         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",
@@ -3933,7 +3933,7 @@ function lt({ side: t, color: o }) {
               left: 0,
               right: 0,
               height: 1,
-              background: `linear-gradient(90deg, transparent, ${o}22 50%, transparent)`
+              background: `linear-gradient(90deg, transparent, ${n}22 50%, transparent)`
             }
           }
         ),
@@ -3969,14 +3969,14 @@ function lt({ side: t, color: o }) {
     }
   );
 }
-function Zt({ queueDepth: t, color: o }) {
-  const n = Math.floor((be - 14) / 7);
+function Kt({ queueDepth: t, color: n }) {
+  const o = Math.floor((ge - 14) / 7);
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: K,
-        height: be,
+        height: ge,
         background: "linear-gradient(180deg, #0c1c30 0%, #07101e 40%, #040c1a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -3990,9 +3990,9 @@ function Zt({ queueDepth: t, color: o }) {
               top: 0,
               left: 0,
               right: 0,
-              height: be * 0.35,
+              height: ge * 0.35,
               background: `radial-gradient(ellipse at 50% 0%,
-          ${t > 70 ? "rgba(255,34,85,0.14)" : `${o}15`} 0%,
+          ${t > 70 ? "rgba(255,34,85,0.14)" : `${n}15`} 0%,
           transparent 70%)`
             }
           }
@@ -4010,7 +4010,7 @@ function Zt({ queueDepth: t, color: o }) {
               flexDirection: "column",
               gap: 4
             },
-            children: Array.from({ length: n }).map((i, r) => /* @__PURE__ */ e(
+            children: Array.from({ length: o }).map((i, r) => /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -4028,10 +4028,10 @@ function Zt({ queueDepth: t, color: o }) {
     }
   );
 }
-function Jt({
+function Zt({
   rotateX: t = -20,
-  rotateY: o = 20,
-  rotateZ: n = 0,
+  rotateY: n = 20,
+  rotateZ: o = 0,
   scale: i = 1,
   autoRotate: r = !1,
   status: a = "online",
@@ -4041,19 +4041,19 @@ function Jt({
   instances: c = 3,
   _compact: p
 }) {
-  const [h, g] = A(o), u = ee(0), b = ee(0);
+  const [h, b] = A(n), u = ee(0), g = ee(0);
   Ee(() => {
     if (!r) {
-      g(o);
+      b(n);
       return;
     }
     const x = (w) => {
-      b.current && g((P) => P + (w - b.current) * 0.027), b.current = w, u.current = requestAnimationFrame(x);
+      g.current && b((P) => P + (w - g.current) * 0.027), g.current = w, u.current = requestAnimationFrame(x);
     };
     return u.current = requestAnimationFrame(x), () => {
-      cancelAnimationFrame(u.current), b.current = 0;
+      cancelAnimationFrame(u.current), g.current = 0;
     };
-  }, [r, o]);
+  }, [r, n]);
   const m = at[a] ?? at.online;
   return /* @__PURE__ */ d(
     "div",
@@ -4148,7 +4148,7 @@ function Jt({
                   height: Y,
                   position: "relative",
                   transformStyle: "preserve-3d",
-                  transform: `rotateX(${t}deg) rotateY(${h}deg) rotateZ(${n}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: [
@@ -4163,11 +4163,11 @@ function Jt({
                       compact: p
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: fe.back, children: /* @__PURE__ */ e(Kt, {}) }),
+                  /* @__PURE__ */ e("div", { style: fe.back, children: /* @__PURE__ */ e(Gt, {}) }),
                   /* @__PURE__ */ e("div", { style: fe.left, children: /* @__PURE__ */ e(lt, { side: "left", color: m.color }) }),
                   /* @__PURE__ */ e("div", { style: fe.right, children: /* @__PURE__ */ e(lt, { side: "right", color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.top, children: /* @__PURE__ */ e(Zt, { queueDepth: l, color: m.color }) }),
-                  /* @__PURE__ */ e("div", { style: fe.bottom, children: /* @__PURE__ */ e("div", { style: { width: K, height: be, background: "#020508" } }) })
+                  /* @__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,14 +4177,14 @@ function Jt({
     }
   );
 }
-function ft({ status: t = "online", scale: o = 1 }) {
+function ft({ status: t = "online", scale: n = 1 }) {
   const i = (S[t] ?? S.online).color;
   return /* @__PURE__ */ e(
     "div",
     {
       style: {
-        width: 80 * o,
-        height: 140 * o,
+        width: 80 * n,
+        height: 140 * n,
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
@@ -4198,7 +4198,7 @@ function ft({ status: t = "online", scale: o = 1 }) {
             alignItems: "center",
             fontFamily: "'Courier New', monospace",
             userSelect: "none",
-            transform: `scale(${o})`,
+            transform: `scale(${n})`,
             transformOrigin: "center center"
           },
           children: [
@@ -4289,14 +4289,14 @@ function ft({ status: t = "online", scale: o = 1 }) {
     }
   );
 }
-function R(t, o, n = 24) {
-  return Array.from({ length: n }, (i, r) => {
-    const a = r / n;
-    return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * o + (Math.random() - 0.5) * 10));
+function R(t, n, o = 24) {
+  return Array.from({ length: o }, (i, r) => {
+    const a = r / o;
+    return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
   });
 }
-function ei({ data: t, color: o, height: n = 28 }) {
-  const r = n, a = Math.max(...t, 1), s = t.map((l, f) => {
+function Jt({ data: t, color: n, height: o = 28 }) {
+  const r = o, a = Math.max(...t, 1), s = t.map((l, f) => {
     const c = f / (t.length - 1) * 120, p = r - l / a * (r - 4) - 2;
     return `${c},${p}`;
   }).join(" ");
@@ -4304,24 +4304,24 @@ function ei({ data: t, color: o, height: n = 28 }) {
     "polyline",
     {
       fill: "none",
-      stroke: o,
+      stroke: n,
       strokeWidth: "1.2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
       points: s,
-      style: { filter: `drop-shadow(0 0 2px ${o})`, opacity: 0.9 }
+      style: { filter: `drop-shadow(0 0 2px ${n})`, opacity: 0.9 }
     }
   ) });
 }
-function ti({
+function ei({
   type: t,
-  name: o,
-  context: n = {},
+  name: n,
+  context: o = {},
   status: i = "online",
   animPhase: r,
   series: a
 }) {
-  const s = i === "critical" || i === "offline" ? "#ff2255" : i === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : ii(t, n), f = r >= 0.3 ? 0 : -280, c = r >= 0.2 ? 1 : 0;
+  const s = i === "critical" || i === "offline" ? "#ff2255" : i === "warning" ? "#ff8c00" : "#00e5ff", l = a ? a.map((p) => ({ ...p })) : ti(t, o), f = r >= 0.3 ? 0 : -280, c = r >= 0.2 ? 1 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -4351,7 +4351,7 @@ function ti({
             children: [
               /* @__PURE__ */ e("div", { style: { fontSize: 10, color: s + "cc", letterSpacing: "0.12em", fontFamily: "'Courier New', monospace" }, children: "HISTORICAL" }),
               /* @__PURE__ */ d("div", { style: { fontSize: 12, fontWeight: 700, color: "#fff", letterSpacing: "0.06em", marginTop: 2, fontFamily: "'Courier New', monospace" }, children: [
-                o,
+                n,
                 " · Sub-components"
               ] })
             ]
@@ -4376,7 +4376,7 @@ function ti({
                   p.unit
                 ] })
               ] }),
-              /* @__PURE__ */ e(ei, { data: p.data, color: p.color, height: 26 })
+              /* @__PURE__ */ e(Jt, { data: p.data, color: p.color, height: 26 })
             ]
           },
           p.id
@@ -4385,12 +4385,12 @@ function ti({
     }
   );
 }
-function ii(t, o) {
+function ti(t, n) {
   if (t === "server") {
-    const n = o.cpuLoad ?? 50, i = o.memLoad ?? 60;
+    const o = n.cpuLoad ?? 50, i = n.memLoad ?? 60;
     return [
-      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: R(n, 15) },
-      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: R(n * 0.7, 12) },
+      { 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) },
@@ -4400,22 +4400,22 @@ function ii(t, o) {
     ];
   }
   if (t === "dispatcher" || t === "messageServer") {
-    const n = o.traffic ?? o.queueDepth ?? 50;
+    const o = n.traffic ?? n.queueDepth ?? 50;
     return [
-      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: R(n, 20) },
+      { 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(n * 0.9, 15) }
+      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: R(o * 0.9, 15) }
     ];
   }
   if (t === "database") {
-    const n = o.capacity ?? 70;
+    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(n, 15) },
+      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: R(o, 15) },
       { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: R(75, 12) }
     ];
   }
@@ -4423,8 +4423,8 @@ function ii(t, o) {
 }
 function ht({
   w: t,
-  h: o,
-  color: n,
+  h: n,
+  color: o,
   label: i,
   status: r,
   delay: a = "0s",
@@ -4436,13 +4436,13 @@ function ht({
     {
       style: {
         width: t,
-        height: o,
+        height: n,
         background: we,
         position: "relative",
         overflow: "hidden",
         borderRadius: 2,
-        border: `1px solid ${n}44`,
-        boxShadow: `0 0 8px ${n}22, inset 0 1px 0 ${n}22`,
+        border: `1px solid ${o}44`,
+        boxShadow: `0 0 8px ${o}22, inset 0 1px 0 ${o}22`,
         fontFamily: "'Courier New', monospace"
       },
       children: [
@@ -4456,7 +4456,7 @@ function ht({
               left: 0,
               right: 0,
               height: 1,
-              background: `linear-gradient(90deg, transparent, ${n}66, transparent)`,
+              background: `linear-gradient(90deg, transparent, ${o}66, transparent)`,
               boxShadow: `0 1px 4px ${l}`
             }
           }
@@ -4486,7 +4486,7 @@ function ht({
               left: 3,
               right: 3,
               fontSize: 6,
-              color: `${n}99`,
+              color: `${o}99`,
               letterSpacing: "0.08em",
               textAlign: "center"
             },
@@ -4502,8 +4502,8 @@ function ht({
               left: 0,
               right: 0,
               height: 1,
-              background: `linear-gradient(90deg, transparent 10%, ${n}aa 50%, transparent 90%)`,
-              boxShadow: `0 0 4px ${n}`,
+              background: `linear-gradient(90deg, transparent 10%, ${o}aa 50%, transparent 90%)`,
+              boxShadow: `0 0 4px ${o}`,
               animation: "holo-scan 2.5s linear infinite",
               animationDelay: a,
               pointerEvents: "none"
@@ -4516,8 +4516,8 @@ function ht({
 }
 function Oe({
   color: t = "#00e5ff",
-  label: o = "CPU-0",
-  status: n = "online",
+  label: n = "CPU-0",
+  status: o = "online",
   load: i = 0
 }) {
   return /* @__PURE__ */ d("div", { style: { position: "relative", width: 52, height: 36 }, children: [
@@ -4588,7 +4588,7 @@ function Oe({
               )
             }
           ),
-          n && n !== "online" && n !== "offline" && /* @__PURE__ */ e(
+          o && o !== "online" && o !== "offline" && /* @__PURE__ */ e(
             "div",
             {
               style: {
@@ -4598,8 +4598,8 @@ function Oe({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: S[n]?.color,
-                boxShadow: `0 0 6px ${S[n]?.color}`,
+                background: S[o]?.color,
+                boxShadow: `0 0 6px ${S[o]?.color}`,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4620,15 +4620,15 @@ function Oe({
           letterSpacing: "0.06em",
           textAlign: "center"
         },
-        children: o
+        children: n
       }
     )
   ] });
 }
 function De({
   color: t = "#00e5ff",
-  label: o = "HEAP-0",
-  status: n = "online",
+  label: n = "HEAP-0",
+  status: o = "online",
   usedPercent: i = 0
 }) {
   return /* @__PURE__ */ d("div", { style: { position: "relative", width: 28, height: 48 }, children: [
@@ -4686,7 +4686,7 @@ function De({
             },
             s
           )),
-          n && n !== "online" && n !== "offline" && /* @__PURE__ */ e(
+          o && o !== "online" && o !== "offline" && /* @__PURE__ */ e(
             "div",
             {
               style: {
@@ -4696,7 +4696,7 @@ function De({
                 width: 3,
                 height: 3,
                 borderRadius: "50%",
-                background: S[n]?.color,
+                background: S[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4717,18 +4717,18 @@ function De({
           letterSpacing: "0.05em",
           textAlign: "center"
         },
-        children: o
+        children: n
       }
     )
   ] });
 }
 function ye({
   color: t = "#00e5ff",
-  label: o = "DRIVE-1",
-  status: n = "online",
+  label: n = "DRIVE-1",
+  status: o = "online",
   activity: i = !1
 }) {
-  return /* @__PURE__ */ d(ht, { w: 56, h: 22, color: t, label: o, status: n, children: [
+  return /* @__PURE__ */ d(ht, { w: 56, h: 22, color: t, label: n, status: o, children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -4763,8 +4763,8 @@ function ye({
 }
 function ut({
   color: t = "#00e5ff",
-  label: o = "NET",
-  status: n = "online"
+  label: n = "NET",
+  status: o = "online"
 }) {
   return /* @__PURE__ */ d(
     "div",
@@ -4818,7 +4818,7 @@ function ut({
               textAlign: "center",
               letterSpacing: "0.08em"
             },
-            children: o
+            children: n
           }
         )
       ]
@@ -4827,15 +4827,15 @@ function ut({
 }
 function L({
   color: t = "#00e5ff",
-  label: o = "THREAD",
-  status: n = "online"
+  label: n = "THREAD",
+  status: o = "online"
 }) {
-  return /* @__PURE__ */ e(ht, { w: 44, h: 28, color: t, label: o, status: n });
+  return /* @__PURE__ */ e(ht, { w: 44, h: 28, color: t, label: n, status: o });
 }
 function Le({
   color: t = "#ff8c00",
-  label: o = "PLATTER-0",
-  status: n = "online",
+  label: n = "PLATTER-0",
+  status: o = "online",
   capacityPercent: i = 0
 }) {
   return /* @__PURE__ */ d("div", { style: { position: "relative", width: 48, height: 62 }, children: [
@@ -4880,7 +4880,7 @@ function Le({
               }
             }
           ),
-          n && n !== "online" && n !== "offline" && /* @__PURE__ */ e(
+          o && o !== "online" && o !== "offline" && /* @__PURE__ */ e(
             "div",
             {
               style: {
@@ -4890,7 +4890,7 @@ function Le({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: S[n]?.color,
+                background: S[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -4911,15 +4911,15 @@ function Le({
           textAlign: "center",
           letterSpacing: "0.06em"
         },
-        children: o
+        children: n
       }
     )
   ] });
 }
 function M({
   color: t = "#00e5ff",
-  label: o = "PORT-1",
-  status: n = "online"
+  label: n = "PORT-1",
+  status: o = "online"
 }) {
   return /* @__PURE__ */ d(
     "div",
@@ -4945,9 +4945,9 @@ function M({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: n && n !== "online" ? S[n]?.color ?? t : t,
+              background: o && o !== "online" ? S[o]?.color ?? t : t,
               boxShadow: `0 0 4px ${t}`,
-              animation: n && n !== "online" && n !== "offline" ? "holo-led-blink 1s infinite" : "none"
+              animation: o && o !== "online" && o !== "offline" ? "holo-led-blink 1s infinite" : "none"
             }
           }
         ),
@@ -4979,15 +4979,15 @@ function M({
               textAlign: "center",
               letterSpacing: "0.05em"
             },
-            children: o
+            children: n
           }
         )
       ]
     }
   );
 }
-function oi(t, o, n, i) {
-  const r = n === "online" ? "online" : n;
+function ii(t, n, o, i) {
+  const r = o === "online" ? "online" : o;
   return t === "server" ? [
     {
       id: "cpu-0",
@@ -5009,8 +5009,8 @@ function oi(t, o, n, i) {
     {
       id: "thread-pool",
       label: "THREAD-POOL",
-      status: r === "critical" && o === "APP-03" ? "critical" : "online",
-      detail: r === "critical" && o === "APP-03" ? "Thread exhaustion" : void 0
+      status: r === "critical" && n === "APP-03" ? "critical" : "online",
+      detail: r === "critical" && n === "APP-03" ? "Thread exhaustion" : void 0
     },
     { id: "network", label: "NET", status: r === "offline" ? "offline" : "online" }
   ] : t === "dispatcher" ? [
@@ -5073,8 +5073,8 @@ function oi(t, o, n, i) {
     {
       id: "platter-2",
       label: "PLATTER-2",
-      status: r === "warning" && o === "DB-STB" ? "warning" : "online",
-      detail: r === "warning" && o === "DB-STB" ? "Replication lag" : void 0
+      status: r === "warning" && n === "DB-STB" ? "warning" : "online",
+      detail: r === "warning" && n === "DB-STB" ? "Replication lag" : void 0
     },
     {
       id: "conn-pool",
@@ -5091,7 +5091,7 @@ function oi(t, o, n, i) {
   ] : [];
 }
 const E = "cubic-bezier(0.34, 1.56, 0.64, 1)", ni = "cubic-bezier(0.16, 1, 0.3, 1)";
-function ri({ items: t, revealPhase: o }) {
+function oi({ items: t, revealPhase: n }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -5103,31 +5103,31 @@ function ri({ items: t, revealPhase: o }) {
         alignItems: "center",
         padding: 24
       },
-      children: t.map((n, i) => /* @__PURE__ */ e(
+      children: t.map((o, i) => /* @__PURE__ */ e(
         "div",
         {
           style: {
-            opacity: o >= 0.2 + i * 0.06 ? 1 : 0,
-            transform: `scale(${o >= 0.2 + i * 0.06 ? 1 : 0.6})`,
+            opacity: n >= 0.2 + i * 0.06 ? 1 : 0,
+            transform: `scale(${n >= 0.2 + i * 0.06 ? 1 : 0.6})`,
             transition: `opacity 0.4s ${E} ${i * 0.06}s, transform 0.45s ${E} ${i * 0.06}s`
           },
-          children: n.element
+          children: o.element
         },
-        n.id
+        o.id
       ))
     }
   );
 }
-function ai({
+function ri({
   type: t,
-  status: o,
-  context: n,
+  status: n,
+  context: o,
   internal: i,
   revealPhase: r
 }) {
-  const a = S[o]?.color ?? S.online.color, s = "#ff8c00";
+  const a = S[n]?.color ?? S.online.color, s = "#ff8c00";
   if (t === "server") {
-    const l = n.cpuLoad ?? 50, f = n.memLoad ?? 60, c = [
+    const l = o.cpuLoad ?? 50, f = o.memLoad ?? 60, c = [
       {
         key: "cpu0",
         delay: 0,
@@ -5237,7 +5237,7 @@ function ai({
           alignItems: "center",
           padding: 24
         },
-        children: c.map(({ key: p, delay: h, el: g }) => /* @__PURE__ */ e(
+        children: c.map(({ key: p, delay: h, el: b }) => /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -5245,7 +5245,7 @@ function ai({
               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: g
+            children: b
           },
           p
         ))
@@ -5367,7 +5367,7 @@ function ai({
       }
     );
   if (t === "database") {
-    const l = n.capacity ?? 72;
+    const l = o.capacity ?? 72;
     return /* @__PURE__ */ d(
       "div",
       {
@@ -5428,17 +5428,17 @@ function ai({
   }
   return null;
 }
-function $i({
+function wi({
   type: t,
-  name: o,
-  status: n,
+  name: n,
+  status: o,
   onClose: i,
   animPhase: r,
   context: a = {},
   subComponents: s,
   graphSeries: l
 }) {
-  const f = oi(t, o, n, a), c = S[n]?.color ?? S.online.color, p = r >= 0.1 ? 1 : r * 10, h = r >= 0.2 ? "-50%" : "0%", g = 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 = 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 $i({
         flexDirection: "row",
         pointerEvents: "auto"
       },
-      onClick: (b) => b.stopPropagation(),
+      onClick: (g) => g.stopPropagation(),
       children: [
         /* @__PURE__ */ e(
           "div",
@@ -5468,12 +5468,12 @@ function $i({
           }
         ),
         /* @__PURE__ */ e(
-          ti,
+          ei,
           {
             type: t,
-            name: o,
+            name: n,
             context: a,
-            status: n,
+            status: o,
             animPhase: r,
             series: l
           }
@@ -5526,7 +5526,7 @@ function $i({
                           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(${g})`,
+                          transform: `translateX(${b})`,
                           transition: `transform 0.7s ${E}`
                         }
                       }
@@ -5576,7 +5576,7 @@ function $i({
                                   borderRadius: "50%",
                                   background: c,
                                   boxShadow: `0 0 10px ${c}`,
-                                  animation: n === "warning" || n === "critical" ? "holo-led-blink 1.5s infinite" : "none"
+                                  animation: o === "warning" || o === "critical" ? "holo-led-blink 1.5s infinite" : "none"
                                 }
                               }
                             ),
@@ -5591,7 +5591,7 @@ function $i({
                                   fontFamily: "'Courier New', monospace"
                                 },
                                 children: [
-                                  o,
+                                  n,
                                   " · INTERNAL VIEW"
                                 ]
                               }
@@ -5638,12 +5638,12 @@ function $i({
                         }
                       }
                     ),
-                    /* @__PURE__ */ e("div", { style: { flex: 1, padding: "8px 0 24px" }, children: s ? /* @__PURE__ */ e(ri, { items: s, revealPhase: u }) : /* @__PURE__ */ e(
-                      ai,
+                    /* @__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: o,
-                        status: n,
+                        name: n,
+                        status: o,
                         context: a,
                         internal: f,
                         revealPhase: u
@@ -5659,91 +5659,38 @@ function $i({
     }
   );
 }
-const gt = (t) => `data:image/svg+xml,${encodeURIComponent(t.replace(/\n\s*/g, ""))}`, li = gt(`
-<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080">
-  <defs>
-    <radialGradient id="c" cx="50%" cy="45%" r="70%">
-      <stop offset="0%" stop-color="#0a1628"/>
-      <stop offset="50%" stop-color="#050d18"/>
-      <stop offset="100%" stop-color="#020810"/>
-    </radialGradient>
-    <radialGradient id="g" cx="50%" cy="40%" r="55%">
-      <stop offset="0%" stop-color="#00e5ff" stop-opacity="0.04"/>
-      <stop offset="100%" stop-color="#00e5ff" stop-opacity="0"/>
-    </radialGradient>
-    <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
-      <path d="M60 0L0 0 0 60" fill="none" stroke="#00e5ff" stroke-opacity="0.04" stroke-width="0.5"/>
-    </pattern>
-    <linearGradient id="beam1" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#00e5ff" stop-opacity="0"/>
-      <stop offset="40%" stop-color="#00e5ff" stop-opacity="0.08"/>
-      <stop offset="60%" stop-color="#00e5ff" stop-opacity="0.12"/>
-      <stop offset="100%" stop-color="#00e5ff" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="beam2" x1="1" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#00e5ff" stop-opacity="0"/>
-      <stop offset="40%" stop-color="#00e5ff" stop-opacity="0.06"/>
-      <stop offset="60%" stop-color="#00e5ff" stop-opacity="0.10"/>
-      <stop offset="100%" stop-color="#00e5ff" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
-  <rect width="1920" height="1080" fill="url(#c)"/>
-  <rect width="1920" height="1080" fill="url(#grid)"/>
-  <rect width="1920" height="1080" fill="url(#g)"/>
-  <line x1="1920" y1="0" x2="960" y2="540" stroke="url(#beam1)" stroke-width="3" stroke-dasharray="8 12"/>
-  <line x1="0" y1="0" x2="960" y2="540" stroke="url(#beam2)" stroke-width="3" stroke-dasharray="8 12"/>
-  <ellipse cx="960" cy="600" rx="500" ry="120" fill="none" stroke="#00e5ff" stroke-opacity="0.06" stroke-width="1" stroke-dasharray="4 8"/>
-  <ellipse cx="960" cy="600" rx="350" ry="85" fill="none" stroke="#00e5ff" stroke-opacity="0.04" stroke-width="0.5" stroke-dasharray="3 6"/>
-</svg>
-`), si = gt(`
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
-  <defs>
-    <radialGradient id="lg" cx="50%" cy="50%" r="50%">
-      <stop offset="0%" stop-color="#00e5ff" stop-opacity="0.15"/>
-      <stop offset="70%" stop-color="#00e5ff" stop-opacity="0.03"/>
-      <stop offset="100%" stop-color="#00e5ff" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <circle cx="200" cy="200" r="180" fill="url(#lg)"/>
-  <circle cx="200" cy="200" r="120" fill="none" stroke="#00e5ff" stroke-opacity="0.12" stroke-width="1" stroke-dasharray="6 4"/>
-  <circle cx="200" cy="200" r="80" fill="none" stroke="#00e5ff" stroke-opacity="0.08" stroke-width="0.5" stroke-dasharray="3 5"/>
-  <circle cx="200" cy="200" r="6" fill="#00e5ff" fill-opacity="0.3"/>
-  <text x="200" y="195" text-anchor="middle" font-family="Courier New, monospace" font-size="28" font-weight="700" letter-spacing="8" fill="#00e5ff" fill-opacity="0.25">D_IT</text>
-  <text x="200" y="220" text-anchor="middle" font-family="Courier New, monospace" font-size="9" letter-spacing="4" fill="#00e5ff" fill-opacity="0.15">DIGITAL INFRASTRUCTURE</text>
-</svg>
-`);
-function Ri({
+function Si({
   brandName: t = "BUSAUD AIOps",
-  brandTag: o = "3D MONITOR",
-  services: n = [],
+  brandTag: n = "3D MONITOR",
+  services: o = [],
   backgroundImage: i,
   logoUrl: r,
   carouselSpeed: a = 6e-3,
   fontFamily: s,
   children: l
 }) {
-  const [f] = A(20), [c] = A(!1), [p] = A(!0), [h] = A(0.45), [g] = A(3.3), [u, b] = A("compact"), [m, x] = A(0), [w, P] = A(null), [y, D] = A(null), [B, $] = A(0), V = (C) => {
-    u === "compact" && (P(C), b("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), 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));
   }, v = () => {
-    y ? (D(null), $(0)) : u === "expanded" && (b("collapsing"), x(0), P(null), setTimeout(() => {
-      b((C) => C === "collapsing" ? "compact" : C);
+    y ? (D(null), k(0)) : u === "expanded" && (g("collapsing"), x(0), P(null), setTimeout(() => {
+      g((C) => C === "collapsing" ? "compact" : C);
     }, 1e3));
   }, W = (C) => {
-    D(C), $(0);
+    D(C), k(0);
   };
   J.useEffect(() => {
     if (!y) return;
-    const C = performance.now(), $e = 1200, ne = () => {
-      const Ne = performance.now() - C, Te = Math.min(1, Ne / $e);
-      $(Te), Te < 1 && requestAnimationFrame(ne);
-    }, le = requestAnimationFrame(ne);
+    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 X = () => {
-    D(null), $(0);
-  }, z = n.find((C) => C.name === w), te = z?.status ?? "online", ie = z?.dbSync ?? !0, I = z?.metrics, U = z?.alerts, oe = 330, Se = 340, ke = y ? 1.15 : 1, G = y ? -(y.ex - oe) * 0.06 : 0, N = y ? -(y.ey - Se) * 0.06 : 0;
+    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",
@@ -5753,12 +5700,12 @@ function Ri({
           inset: 0,
           zIndex: 0,
           background: "#020810",
-          backgroundImage: `url(${i || li})`,
+          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(${G}px, ${N}px) scale(${ke})`,
+          transform: `translate(${Q}px, ${N}px) scale(${$e})`,
           willChange: "transform"
         }
       }
@@ -5768,7 +5715,7 @@ function Ri({
         /* @__PURE__ */ e("span", { className: "brand-pulse" }),
         /* @__PURE__ */ e("span", { className: "brand-text", children: t })
       ] }),
-      /* @__PURE__ */ e("div", { className: "hdr-right", children: /* @__PURE__ */ e("span", { className: "hdr-tag", children: o }) })
+      /* @__PURE__ */ e("div", { className: "hdr-right", children: /* @__PURE__ */ e("span", { className: "hdr-tag", children: n }) })
     ] }),
     /* @__PURE__ */ e(
       "main",
@@ -5779,7 +5726,7 @@ function Ri({
         },
         onClick: v,
         children: /* @__PURE__ */ e(
-          zt,
+          Wt,
           {
             viewState: u,
             animPhase: m,
@@ -5789,10 +5736,10 @@ function Ri({
             rotateY: f,
             autoRotateComponents: c,
             componentScale: h,
-            drillZoom: g,
+            drillZoom: b,
             autoRotateCarousel: p,
             carouselSpeed: a,
-            logoUrl: r || si,
+            logoUrl: r,
             onSelectSystem: V,
             onBackgroundClick: v,
             onComponentClick: W,
@@ -5800,7 +5747,7 @@ function Ri({
             selectedSystemStatus: te,
             selectedSystemDbSync: ie,
             selectedSystemMetrics: I,
-            selectedSystemAlerts: U,
+            selectedSystemAlerts: F,
             children: l
           }
         )
@@ -5808,17 +5755,17 @@ function Ri({
     )
   ] });
 }
-function k(t, o, n = 24) {
-  return Array.from({ length: n }, (i, r) => {
-    const a = r / n;
-    return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * o + (Math.random() - 0.5) * 10));
+function $(t, n, o = 24) {
+  return Array.from({ length: o }, (i, r) => {
+    const a = r / o;
+    return Math.min(100, Math.max(0, t + Math.sin(a * Math.PI * 2) * n + (Math.random() - 0.5) * 10));
   });
 }
 function bt(t) {
   return t === "critical" || t === "offline" ? "#ff2255" : t === "warning" ? "#ff8c00" : "#00e5ff";
 }
-function me(t, o, n) {
-  const i = t === "online" ? "online" : t, r = bt(t), a = n?.cpuLoad ?? 50, s = n?.memLoad ?? 60, l = i === "critical" || i === "warning" && a > 80 ? i : "online", f = i === "warning" && s > 85 ? "warning" : i === "critical" ? "critical" : "online", c = i === "critical" && o === "APP-03" ? "critical" : "online", p = i === "offline" ? "offline" : "online";
+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 }) },
@@ -5832,19 +5779,19 @@ function me(t, o, n) {
   ];
 }
 function xe(t) {
-  const o = t?.cpuLoad ?? 50, n = t?.memLoad ?? 60;
+  const n = t?.cpuLoad ?? 50, o = t?.memLoad ?? 60;
   return [
-    { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: k(o, 15) },
-    { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: k(o * 0.7, 12) },
-    { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: k(n, 18) },
-    { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: k(n * 0.85, 14) },
-    { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: k(40, 25) },
-    { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: k(35, 20) },
-    { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: k(30, 22) },
-    { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: k(55, 20) }
+    { 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) }
   ];
 }
-function yt(t, o, n) {
+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" }) },
@@ -5859,17 +5806,17 @@ function yt(t, o, n) {
     { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(L, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
   ];
 }
-function mt(t) {
-  const o = t?.traffic ?? 50;
+function yt(t) {
+  const n = t?.traffic ?? 50;
   return [
-    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: k(o, 20) },
-    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: k(60, 25) },
-    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: k(45, 20) },
-    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: k(70, 30) },
-    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: k(o * 0.9, 15) }
+    { 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) }
   ];
 }
-function di(t, o, n) {
+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" }) },
@@ -5881,18 +5828,18 @@ function di(t, o, n) {
     { 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 ci(t) {
-  const o = t?.queueDepth ?? 50;
+function li(t) {
+  const n = t?.queueDepth ?? 50;
   return [
-    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: k(o, 20) },
-    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: k(60, 25) },
-    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: k(45, 20) },
-    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: k(70, 30) },
-    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: k(o * 0.9, 15) }
+    { 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) }
   ];
 }
-function We(t, o, n) {
-  const i = t === "online" ? "online" : t, r = "#ff8c00", a = n?.capacity ?? 72, s = i === "critical" || i === "offline" ? i : i === "warning" ? "warning" : "online", l = i === "warning" && o === "DB-STB" ? "warning" : "online", f = 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(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 }) },
@@ -5902,17 +5849,17 @@ function We(t, o, n) {
   ];
 }
 function ze(t) {
-  const o = t?.capacity ?? 70;
+  const n = t?.capacity ?? 70;
   return [
-    { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: k(40, 20) },
-    { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: k(55, 25) },
-    { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: k(35, 18) },
-    { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: k(o, 15) },
-    { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: k(75, 12) }
+    { 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) }
   ];
 }
 function Je(t) {
-  const o = [
+  const n = [
     t.wdStatus,
     t.msStatus,
     t.srv1Status,
@@ -5921,40 +5868,40 @@ function Je(t) {
     t.pdbStatus,
     t.sdbStatus
   ];
-  return o.includes("critical") ? "critical" : o.includes("warning") ? "warning" : o.includes("offline") ? "offline" : "online";
+  return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
-function Pi(t) {
-  const o = Je(t), n = o === "critical" || o === "offline", i = o === "warning";
+function $i(t) {
+  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
-      value: n ? "94.20%" : "99.97%",
-      color: n ? "#ff2255" : "#00ff88"
+      value: o ? "94.20%" : "99.97%",
+      color: o ? "#ff2255" : "#00ff88"
     },
     {
       label: "Avg Latency",
       value: i ? "98ms" : "18ms",
       color: i ? "#ff8c00" : "#00e5ff"
     },
-    { label: "Active Users", value: n ? "812" : "1,243", color: "#bb55ff" },
-    { label: "Throughput", value: `${n ? "1.8k" : "4.2k"} req/s`, color: "#fff" },
+    { label: "Active Users", value: o ? "812" : "1,243", color: "#bb55ff" },
+    { label: "Throughput", value: `${o ? "1.8k" : "4.2k"} req/s`, color: "#fff" },
     {
       label: "Error Rate",
-      value: n ? "3.85%" : i ? "0.72%" : "0.01%",
-      color: n ? "#ff2255" : i ? "#ff8c00" : "#00ff88"
+      value: o ? "3.85%" : i ? "0.72%" : "0.01%",
+      color: o ? "#ff2255" : i ? "#ff8c00" : "#00ff88"
     }
   ];
 }
-function Ci(t) {
-  const o = Je(t), n = o === "critical" || o === "offline", i = o === "warning";
+function ki(t) {
+  const n = Je(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
-    ...n ? [{ level: "critical", message: "Critical Component Failure" }] : [],
-    ...i && !n ? [{ level: "warning", message: "Component Warning State" }] : [],
-    ...!n && !i && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
+    ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
+    ...i && !o ? [{ level: "warning", message: "Component Warning State" }] : [],
+    ...!o && !i && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
 }
-const pi = [
+const si = [
   { from: [330, 120], to: [220, 260], visibleAtPhase: 3 },
   { from: [330, 120], to: [440, 260], visibleAtPhase: 3 },
   { from: [220, 260], to: [165, 390], visibleAtPhase: 4 },
@@ -5967,8 +5914,8 @@ const pi = [
   { from: [330, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" },
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
-function fi({ config: t }) {
-  const o = J.useContext(ae), n = o?.rotateY ?? 20, i = o?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: f, pdbStatus: c, sdbStatus: p, dbSync: h } = t;
+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: f, pdbStatus: c, sdbStatus: p, dbSync: h } = t;
   return /* @__PURE__ */ d(Ce, { children: [
     /* @__PURE__ */ e(
       T,
@@ -5998,13 +5945,13 @@ function fi({ config: t }) {
           name: "WEB-DISP",
           status: r,
           context: { traffic: 78 },
-          subComponents: yt(r),
-          graphSeries: mt({ traffic: 78 })
+          subComponents: gt(r),
+          graphSeries: yt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
           pt,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: r,
             name: "WEB-DISP",
@@ -6031,13 +5978,13 @@ function fi({ config: t }) {
           name: "MSG-SRV",
           status: a,
           context: { queueDepth: 45 },
-          subComponents: di(a),
-          graphSeries: ci({ queueDepth: 45 })
+          subComponents: ai(a),
+          graphSeries: li({ queueDepth: 45 })
         },
         children: /* @__PURE__ */ e(
-          Jt,
+          Zt,
           {
-            rotateY: -n,
+            rotateY: -o,
             autoRotate: i,
             status: a,
             name: "MSG-SRV",
@@ -6071,7 +6018,7 @@ function fi({ config: t }) {
         children: /* @__PURE__ */ e(
           ue,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: s,
             name: "APP-01",
@@ -6104,7 +6051,7 @@ function fi({ config: t }) {
         children: /* @__PURE__ */ e(
           ue,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: l,
             name: "APP-02",
@@ -6137,7 +6084,7 @@ function fi({ config: t }) {
         children: /* @__PURE__ */ e(
           ue,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: f,
             name: "APP-03",
@@ -6170,7 +6117,7 @@ function fi({ config: t }) {
         children: /* @__PURE__ */ e(
           Ie,
           {
-            rotateY: -n,
+            rotateY: -o,
             autoRotate: i,
             status: c,
             name: "DB-PRI",
@@ -6203,7 +6150,7 @@ function fi({ config: t }) {
         children: /* @__PURE__ */ e(
           Ie,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: p,
             name: "DB-STB",
@@ -6227,25 +6174,25 @@ function fi({ config: t }) {
         children: /* @__PURE__ */ e(ct, { synced: h, latencyMs: h ? 8 : 342 })
       }
     ),
-    /* @__PURE__ */ e(hi, { config: t })
+    /* @__PURE__ */ e(ci, { config: t })
   ] });
 }
-function hi({ config: t }) {
-  const o = J.useContext(ae), { wdStatus: n, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: f, dbSync: c } = t, p = o?.isSelected && o?.isExpandedPos;
-  return o?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
+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,
       {
         ex: 220,
         ey: 260,
-        status: n,
+        status: o,
         title: "WEB-DISP",
-        msg: n === "critical" || n === "offline" ? "Gateway timeout detected." : "High latency detected.",
+        msg: o === "critical" || o === "offline" ? "Gateway timeout detected." : "High latency detected.",
         offsetX: -90,
         offsetY: -40,
         align: "left",
         isVisible: !!p,
-        internalRef: n !== "online" ? "PORT-3" : void 0
+        internalRef: o !== "online" ? "PORT-3" : void 0
       }
     ),
     /* @__PURE__ */ e(
@@ -6355,20 +6302,20 @@ function hi({ config: t }) {
     )
   ] }) : null;
 }
-function Ei({ config: t, ...o }) {
+function Ri({ config: t, ...n }) {
   return /* @__PURE__ */ e(
     dt,
     {
       name: t.name,
       status: Je(t),
-      connections: pi,
-      ...o,
-      children: /* @__PURE__ */ e(fi, { config: t })
+      connections: si,
+      ...n,
+      children: /* @__PURE__ */ e(di, { config: t })
     }
   );
 }
 function et(t) {
-  const o = [
+  const n = [
     t.dispStatus,
     t.srv1Status,
     t.srv2Status,
@@ -6376,15 +6323,15 @@ function et(t) {
     t.pdbStatus,
     t.sdbStatus
   ];
-  return o.includes("critical") ? "critical" : o.includes("warning") ? "warning" : o.includes("offline") ? "offline" : "online";
+  return n.includes("critical") ? "critical" : n.includes("warning") ? "warning" : n.includes("offline") ? "offline" : "online";
 }
-function Ti(t) {
-  const o = et(t), n = o === "critical" || o === "offline", i = o === "warning";
+function Pi(t) {
+  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     {
       label: "Uptime",
-      value: n ? "92.14%" : "99.98%",
-      color: n ? "#ff2255" : "#00ff88"
+      value: o ? "92.14%" : "99.98%",
+      color: o ? "#ff2255" : "#00ff88"
     },
     {
       label: "Avg Latency",
@@ -6395,21 +6342,21 @@ function Ti(t) {
     { label: "Throughput", value: "12.4k req/s", color: "#fff" },
     {
       label: "Error Rate",
-      value: n ? "5.42%" : i ? "1.20%" : "0.01%",
-      color: n ? "#ff2255" : i ? "#ff8c00" : "#00ff88"
+      value: o ? "5.42%" : i ? "1.20%" : "0.01%",
+      color: o ? "#ff2255" : i ? "#ff8c00" : "#00ff88"
     }
   ];
 }
-function Ai(t) {
-  const o = et(t), n = o === "critical" || o === "offline", i = o === "warning";
+function Ci(t) {
+  const n = et(t), o = n === "critical" || n === "offline", i = n === "warning";
   return [
     ...t.dbSync ? [] : [{ level: "warning", message: "DB Replication Lag Detected" }],
-    ...n ? [{ level: "critical", message: "Critical Component Failure" }] : [],
-    ...i && !n ? [{ level: "warning", message: "Component Warning State" }] : [],
-    ...!n && !i && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
+    ...o ? [{ level: "critical", message: "Critical Component Failure" }] : [],
+    ...i && !o ? [{ level: "warning", message: "Component Warning State" }] : [],
+    ...!o && !i && t.dbSync ? [{ level: "info", message: "All Systems Nominal" }] : []
   ];
 }
-const ui = [
+const pi = [
   { from: [330, 120], to: [330, 260], visibleAtPhase: 3 },
   { from: [330, 260], to: [165, 390], visibleAtPhase: 4 },
   { from: [330, 260], to: [330, 390], visibleAtPhase: 4 },
@@ -6418,8 +6365,8 @@ const ui = [
   { from: [330, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" },
   { from: [495, 390], to: [200, 520], visibleAtPhase: 5, color: "#ff8c00" }
 ];
-function gi({ config: t }) {
-  const o = J.useContext(ae), n = o?.rotateY ?? 20, i = o?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: f, sdbStatus: c, dbSync: p } = t;
+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: f, sdbStatus: c, dbSync: p } = t;
   return /* @__PURE__ */ d(Ce, { children: [
     /* @__PURE__ */ e(
       T,
@@ -6449,13 +6396,13 @@ function gi({ config: t }) {
           name: "DISP-01",
           status: r,
           context: { traffic: 78 },
-          subComponents: yt(r),
-          graphSeries: mt({ traffic: 78 })
+          subComponents: gt(r),
+          graphSeries: yt({ traffic: 78 })
         },
         children: /* @__PURE__ */ e(
           pt,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: r,
             name: "DISP-01",
@@ -6488,7 +6435,7 @@ function gi({ config: t }) {
         children: /* @__PURE__ */ e(
           ue,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: a,
             name: "APP-01",
@@ -6521,7 +6468,7 @@ function gi({ config: t }) {
         children: /* @__PURE__ */ e(
           ue,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: s,
             name: "APP-02",
@@ -6554,7 +6501,7 @@ function gi({ config: t }) {
         children: /* @__PURE__ */ e(
           ue,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: l,
             name: "APP-03",
@@ -6587,7 +6534,7 @@ function gi({ config: t }) {
         children: /* @__PURE__ */ e(
           Ie,
           {
-            rotateY: -n,
+            rotateY: -o,
             autoRotate: i,
             status: f,
             name: "DB-PRI",
@@ -6620,7 +6567,7 @@ function gi({ config: t }) {
         children: /* @__PURE__ */ e(
           Ie,
           {
-            rotateY: n,
+            rotateY: o,
             autoRotate: i,
             status: c,
             name: "DB-STB",
@@ -6644,25 +6591,25 @@ function gi({ config: t }) {
         children: /* @__PURE__ */ e(ct, { synced: p, latencyMs: p ? 8 : 342 })
       }
     ),
-    /* @__PURE__ */ e(bi, { config: t })
+    /* @__PURE__ */ e(hi, { config: t })
   ] });
 }
-function bi({ config: t }) {
-  const o = J.useContext(ae), { dispStatus: n, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: f } = t, c = o?.isSelected && o?.isExpandedPos;
-  return o?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
+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,
       {
         ex: 330,
         ey: 260,
-        status: n,
+        status: o,
         title: "DISP-01",
-        msg: n === "critical" || n === "offline" ? "Gateway timeout detected." : "High latency detected.",
+        msg: o === "critical" || o === "offline" ? "Gateway timeout detected." : "High latency detected.",
         offsetX: -90,
         offsetY: -40,
         align: "left",
         isVisible: !!c,
-        internalRef: n !== "online" ? "PORT-3" : void 0
+        internalRef: o !== "online" ? "PORT-3" : void 0
       }
     ),
     /* @__PURE__ */ e(
@@ -6757,72 +6704,70 @@ function bi({ config: t }) {
     )
   ] }) : null;
 }
-function Li({ config: t, ...o }) {
+function Ei({ config: t, ...n }) {
   return /* @__PURE__ */ e(
     dt,
     {
       name: t.name,
       status: et(t),
-      connections: ui,
-      ...o,
-      children: /* @__PURE__ */ e(gi, { config: t })
+      connections: pi,
+      ...n,
+      children: /* @__PURE__ */ e(fi, { config: t })
     }
   );
 }
 export {
-  Ri as AIOPsDashboard,
+  Si as AIOPsDashboard,
   Oe as CPU3D,
-  zt as Carousel,
-  qe as CarouselContext,
+  Wt as Carousel,
+  Ge as CarouselContext,
   Ke as CarouselItemContext,
-  Ot as ComponentDialog,
-  $i as ComponentDrillView,
-  li as DEFAULT_BACKGROUND,
-  si as DEFAULT_LOGO,
+  It as ComponentDialog,
+  wi as ComponentDrillView,
   Ie as Database3D,
   ye as DriveBay3D,
-  ui as EXCHANGE_CONNECTIONS,
-  Li as ExchangeService,
-  wi as HOLO_BLUE,
-  vi as HOLO_CYAN,
-  Ge as HOLO_GLASS,
+  pi as EXCHANGE_CONNECTIONS,
+  Ei as ExchangeService,
+  mi as HOLO_BLUE,
+  yi as HOLO_CYAN,
+  Qe as HOLO_GLASS,
   we as HOLO_SURFACE,
-  ti as HistoricalGraphPanel,
-  Bt as HoloBase,
+  ei as HistoricalGraphPanel,
+  Mt as HoloBase,
   ft as Human3D,
   De as Memory3D,
-  Jt as MessageServer3D,
+  Zt as MessageServer3D,
   ut as NetworkBlock3D,
   O as NodeCallout,
   Le as Platter3D,
   M as Port3D,
-  Ei as SAPService,
-  pi as SAP_CONNECTIONS,
+  Ri as SAPService,
+  si as SAP_CONNECTIONS,
   S as STATUS_CFG,
   ue as Server3D,
   dt as Service,
   ae as ServiceContext,
-  Lt as ServiceDialog,
+  At as ServiceDialog,
   T as ServiceNode,
-  Nt as SvgConnection,
+  zt as SvgConnection,
   ct as SyncBridge,
   L as ThreadPool3D,
   pt as WebDispatcher3D,
-  Ai as computeExchangeDialogAlerts,
-  Ti as computeExchangeDialogMetrics,
+  Ci as computeExchangeDialogAlerts,
+  Pi as computeExchangeDialogMetrics,
   et as computeExchangeServiceStatus,
-  Ci as computeSAPDialogAlerts,
-  Pi as computeSAPDialogMetrics,
+  ki as computeSAPDialogAlerts,
+  $i as computeSAPDialogMetrics,
   Je as computeSAPServiceStatus,
   ze as getDatabaseGraphSeries,
   We as getDatabaseSubComponents,
-  mt as getDispatcherGraphSeries,
-  yt as getDispatcherSubComponents,
-  ci as getMessageServerGraphSeries,
-  di as getMessageServerSubComponents,
+  yt as getDispatcherGraphSeries,
+  gt as getDispatcherSubComponents,
+  li as getMessageServerGraphSeries,
+  ai as getMessageServerSubComponents,
   xe as getServerGraphSeries,
   me as getServerSubComponents,
-  Qe as makeFaceStyles,
-  Si as useCarouselContext,
-  ki as useCarouselItemContext
+  qe as makeFaceStyles,
+  xi as useCarouselContext,
+  vi as useCarouselItemContext
 };