react-aiops 0.1.12 → 0.1.13

package/dist/index.js

@@ -146,7 +146,7 @@ function Ut({
                 }
               ),
               d.map((p, f) => {
-                const b = Ht[p.level];
+                const g = Ht[p.level];
                 return /* @__PURE__ */ c(
                   "div",
                   {
@@ -154,15 +154,15 @@ function Ut({
                       display: "flex",
                       gap: 8,
                       alignItems: "flex-start",
-                      color: b.color,
+                      color: g.color,
                       fontSize: 12,
-                      background: b.bg,
+                      background: g.bg,
                       padding: "6px 10px",
                       borderRadius: 4,
-                      borderLeft: `2px solid ${b.border}`
+                      borderLeft: `2px solid ${g.border}`
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { children: b.icon }),
+                      /* @__PURE__ */ e("span", { children: g.icon }),
                       " ",
                       /* @__PURE__ */ e("span", { children: p.message })
                     ]
@@ -177,7 +177,7 @@ function Ut({
     }
   );
 }
-const C = {
+const $ = {
   online: { color: "#00e5ff", glow: "rgba(0,229,255,0.55)" },
   warning: { color: "#ff8c00", glow: "rgba(255,140,0,0.55)" },
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.55)" },
@@ -235,7 +235,7 @@ function ht(t, n, o) {
 }
 const ct = "cubic-bezier(0.34, 1.56, 0.64, 1)", qe = "cubic-bezier(0.16, 1, 0.3, 1)";
 function Ot(t) {
-  return C[t]?.color ?? C.online.color;
+  return $[t]?.color ?? $.online.color;
 }
 function Yt(t, n, o) {
   return t >= o ? "#ff2255" : t >= n ? "#ff8c00" : "#00e5ff";
@@ -250,31 +250,31 @@ function Vt({
   sceneWidth: i = 660,
   sceneHeight: r = 600
 }) {
-  const { type: a, name: s, status: l, ex: h, ey: d, context: p = {} } = t, f = Ot(l), b = h >= i / 2, u = d >= r / 2, g = {
+  const { type: a, name: s, status: l, ex: h, ey: d, context: p = {} } = t, f = Ot(l), g = h >= i / 2, u = d >= r / 2, b = {
     position: "fixed",
-    ...b ? { right: 28 } : { left: 28 },
+    ...g ? { right: 28 } : { left: 28 },
     ...u ? { bottom: 110 } : { top: 72 }
-  }, m = b ? 40 : -40, w = u ? 30 : -30, v = t.dialogMetrics ?? p.dialogMetrics;
+  }, m = g ? 40 : -40, w = u ? 30 : -30, v = t.dialogMetrics ?? p.dialogMetrics;
   let S;
   if (v && v.length > 0)
     S = v.map((y, x) => {
-      const A = y.warnAt ?? 70, k = y.critAt ?? 85;
+      const C = y.warnAt ?? 70, k = y.critAt ?? 85;
       return {
         id: y.id,
         label: y.label,
         sublabel: y.sublabel,
         value: y.value,
         unit: y.unit ?? "%",
-        status: Xe(l, y.value, A, k),
+        status: Xe(l, y.value, C, k),
         icon: y.icon ?? "cpu",
         delay: x,
         colorOverride: y.color,
-        warnAt: A,
+        warnAt: C,
         critAt: k
       };
     });
   else {
-    const y = p.cpuLoad ?? p.traffic ?? 50, x = p.memLoad ?? p.queueDepth ?? 60, A = p.capacity ?? 72, k = Xe(l, y, 70, 85), $ = Xe(l, x, 75, 88), H = Xe(l, A, 75, 90);
+    const y = p.cpuLoad ?? p.traffic ?? 50, x = p.memLoad ?? p.queueDepth ?? 60, C = p.capacity ?? 72, k = Xe(l, y, 70, 85), P = Xe(l, x, 75, 88), O = Xe(l, C, 75, 90);
     S = [
       {
         id: "cpu",
@@ -292,7 +292,7 @@ function Vt({
         sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
         value: x,
         unit: "%",
-        status: $,
+        status: P,
         icon: "mem",
         delay: 1
       },
@@ -300,9 +300,9 @@ function Vt({
         id: "storage",
         label: "STORAGE",
         sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
-        value: A,
+        value: C,
         unit: "%",
-        status: H,
+        status: O,
         icon: "disk",
         delay: 2
       }
@@ -312,7 +312,7 @@ function Vt({
     "div",
     {
       style: {
-        ...g,
+        ...b,
         width: 420,
         background: "linear-gradient(170deg, rgba(2, 10, 22, 0.96) 0%, rgba(2, 6, 14, 0.98) 100%)",
         backdropFilter: "blur(20px)",
@@ -583,8 +583,8 @@ function _t({
     delay: d,
     colorOverride: p,
     warnAt: f = 70,
-    critAt: b = 85
-  } = t, u = p ?? Yt(a, f, b), g = p ?? Ot(l);
+    critAt: g = 85
+  } = t, u = p ?? Yt(a, f, g), b = p ?? Ot(l);
   return /* @__PURE__ */ c(
     "div",
     {
@@ -604,8 +604,8 @@ function _t({
               width: 52,
               height: 52,
               borderRadius: 12,
-              border: `1px solid ${g}44`,
-              background: `linear-gradient(135deg, ${g}0c 0%, ${g}04 100%)`,
+              border: `1px solid ${b}44`,
+              background: `linear-gradient(135deg, ${b}0c 0%, ${b}04 100%)`,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -615,7 +615,7 @@ function _t({
               animation: n ? `comp-dialog-icon-pop 0.5s ${ct} ${0.35 + d * 0.12}s both` : "none"
             },
             children: [
-              /* @__PURE__ */ e(jt, { type: h, color: g }),
+              /* @__PURE__ */ e(jt, { type: h, color: b }),
               (l === "warning" || l === "critical") && /* @__PURE__ */ e(
                 "div",
                 {
@@ -626,8 +626,8 @@ function _t({
                     width: 5,
                     height: 5,
                     borderRadius: "50%",
-                    background: g,
-                    boxShadow: `0 0 6px ${g}`,
+                    background: b,
+                    boxShadow: `0 0 6px ${b}`,
                     animation: "holo-led-blink 1.2s infinite"
                   }
                 }
@@ -737,7 +737,7 @@ function _t({
                   {
                     style: {
                       position: "absolute",
-                      left: `${b}%`,
+                      left: `${g}%`,
                       top: 0,
                       bottom: 0,
                       width: 1,
@@ -781,7 +781,7 @@ function _t({
               {
                 style: {
                   position: "absolute",
-                  left: `${b}%`,
+                  left: `${g}%`,
                   transform: "translateX(-50%)",
                   fontSize: 6,
                   color: "rgba(255,34,85,0.3)",
@@ -914,63 +914,66 @@ function Xt({
   componentScale: d = 0.35,
   drillZoom: p = 3.3,
   autoRotateCarousel: f = !0,
-  carouselSpeed: b = 6e-3,
+  carouselSpeed: g = 6e-3,
   width: u = 950,
-  height: g = 790,
+  height: b = 790,
   onSelectSystem: m,
   onBackgroundClick: w,
   onComponentClick: v,
   onCloseDrill: S,
   onComponentUpdate: y,
   selectedSystemStatus: x = "online",
-  selectedSystemDbSync: A = !0,
+  selectedSystemDbSync: C = !0,
   selectedSystemMetrics: k,
-  selectedSystemAlerts: $
+  selectedSystemAlerts: P
 }) {
-  const [H, L] = R(0);
+  const [O, I] = R(0);
   ke(() => {
-    let D;
+    let N;
     if ((o === "compact" || o === "collapsing") && f) {
       const U = () => {
-        L((ne) => ne + b), D = requestAnimationFrame(U);
+        I((ne) => ne + g), N = requestAnimationFrame(U);
       };
-      D = requestAnimationFrame(U);
+      N = requestAnimationFrame(U);
     }
-    return () => cancelAnimationFrame(D);
-  }, [o, f, b]);
-  const M = q.Children.toArray(t), K = M.length, Z = Tt(() => ({
-    totalSystems: K,
-    carouselRotation: H,
-    viewState: o,
-    animPhase: i,
-    selectedSystem: r,
-    selectedComponent: a,
-    rotateY: l,
-    autoRotateComponents: h,
-    componentScale: d,
-    drillZoom: p,
-    onSelectSystem: m,
-    onComponentClick: v,
-    onComponentUpdate: y,
-    containerWidth: u
-  }), [
-    K,
-    H,
-    o,
-    i,
-    r,
-    a,
-    l,
-    h,
-    d,
-    p,
-    m,
-    v,
-    y,
-    u
-  ]), ye = M.map((D, U) => /* @__PURE__ */ e(bt.Provider, { value: { index: U }, children: D }, U)), me = o === "expanded" || o === "expanding" && i >= 4;
+    return () => cancelAnimationFrame(N);
+  }, [o, f, g]);
+  const z = q.Children.toArray(t), K = z.length, Z = Tt(
+    () => ({
+      totalSystems: K,
+      carouselRotation: O,
+      viewState: o,
+      animPhase: i,
+      selectedSystem: r,
+      selectedComponent: a,
+      rotateY: l,
+      autoRotateComponents: h,
+      componentScale: d,
+      drillZoom: p,
+      onSelectSystem: m,
+      onComponentClick: v,
+      onComponentUpdate: y,
+      containerWidth: u
+    }),
+    [
+      K,
+      O,
+      o,
+      i,
+      r,
+      a,
+      l,
+      h,
+      d,
+      p,
+      m,
+      v,
+      y,
+      u
+    ]
+  ), ye = z.map((N, U) => /* @__PURE__ */ e(bt.Provider, { value: { index: U }, children: N }, U)), me = o === "expanded" || o === "expanding" && i >= 4;
   return /* @__PURE__ */ c(ut.Provider, { value: Z, children: [
-    /* @__PURE__ */ c("div", { style: { position: "relative", width: u, height: g, margin: "0 auto", flexShrink: 0 }, children: [
+    /* @__PURE__ */ c("div", { style: { position: "relative", width: u, height: b, margin: "0 auto", flexShrink: 0 }, children: [
       n && (o === "compact" || o === "collapsing") && /* @__PURE__ */ e(
         "img",
         {
@@ -993,25 +996,25 @@ function Xt({
       ),
       ye
     ] }),
-    r && /* @__PURE__ */ e("div", { onClick: (D) => D.stopPropagation(), children: /* @__PURE__ */ e(
+    r && /* @__PURE__ */ e("div", { onClick: (N) => N.stopPropagation(), children: /* @__PURE__ */ e(
       Ut,
       {
         name: r,
         status: x,
-        dbSync: A,
+        dbSync: C,
         visible: me && !a,
         metrics: k,
-        alerts: $
+        alerts: P
       }
     ) }),
-    a && /* @__PURE__ */ e("div", { onClick: (D) => D.stopPropagation(), children: /* @__PURE__ */ e(
+    a && /* @__PURE__ */ e("div", { onClick: (N) => N.stopPropagation(), children: /* @__PURE__ */ e(
       Vt,
       {
         component: a,
         onClose: S,
         visible: s >= 0.3,
         sceneWidth: u,
-        sceneHeight: g
+        sceneHeight: b
       }
     ) })
   ] });
@@ -1313,30 +1316,30 @@ function Lt({
   _animPhase: d,
   _selectedSystem: p,
   _selectedComponent: f,
-  _rotateY: b,
+  _rotateY: g,
   _autoRotateComponents: u,
-  _componentScale: g,
+  _componentScale: b,
   _drillZoom: m,
   _onSelectSystem: w,
   _onComponentClick: v,
   _onComponentUpdate: S,
   _containerWidth: y
 }) {
-  const x = ge(ut), A = ge(bt), k = a ?? A.index, $ = s ?? x?.totalSystems ?? 1, H = l ?? x?.carouselRotation ?? 0, L = h ?? x?.viewState ?? "compact", M = d ?? x?.animPhase ?? 0, K = p ?? x?.selectedSystem ?? null, Z = f ?? x?.selectedComponent ?? null, ye = b ?? x?.rotateY ?? 20, me = u ?? x?.autoRotateComponents ?? !0, D = g ?? x?.componentScale ?? 0.35, U = m ?? x?.drillZoom ?? 3.3, ne = w ?? x?.onSelectSystem, Be = v ?? x?.onComponentClick, le = S ?? x?.onComponentUpdate, Fe = y ?? x?.containerWidth ?? 950, J = K === t, z = J && (L === "expanded" || L === "expanding" && M >= 1), _ = !z, se = (Fe - Zt) / 2, de = $t + se, Ce = k / $ * Math.PI * 2 + H, it = 420, nt = 160, xe = de + Math.cos(Ce) * it, ce = 450 + Math.sin(Ce) * nt, ot = Math.round(ce), T = !J && (L === "expanding" || L === "expanded"), j = T ? 0 : 1, oe = _ ? 0.3 + (Math.sin(Ce) + 1) * 0.1 : 1, ee = _ ? oe : D, re = L === "compact" || L === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", ve = J && Z, ae = ve ? U : 1, pe = Z?.ex ?? 330, B = Z?.ey ?? 300, { size: rt = 90, color: at = "#00e5ff", widthRatio: Ye = 3 } = i ?? {}, we = {
+  const x = ge(ut), C = ge(bt), k = a ?? C.index, P = s ?? x?.totalSystems ?? 1, O = l ?? x?.carouselRotation ?? 0, I = h ?? x?.viewState ?? "compact", z = d ?? x?.animPhase ?? 0, K = p ?? x?.selectedSystem ?? null, Z = f ?? x?.selectedComponent ?? null, ye = g ?? x?.rotateY ?? 20, me = u ?? x?.autoRotateComponents ?? !0, N = b ?? x?.componentScale ?? 0.35, U = m ?? x?.drillZoom ?? 3.3, ne = w ?? x?.onSelectSystem, Be = v ?? x?.onComponentClick, oe = S ?? x?.onComponentUpdate, Fe = y ?? x?.containerWidth ?? 950, J = K === t, B = J && (I === "expanded" || I === "expanding" && z >= 1), _ = !B, se = (Fe - Zt) / 2, de = $t + se, Ce = k / P * Math.PI * 2 + O, it = 420, nt = 160, xe = de + Math.cos(Ce) * it, ce = 450 + Math.sin(Ce) * nt, ot = Math.round(ce), T = !J && (I === "expanding" || I === "expanded"), j = T ? 0 : 1, re = _ ? 0.3 + (Math.sin(Ce) + 1) * 0.1 : 1, ee = _ ? re : N, ae = I === "compact" || I === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", ve = J && Z, le = ve ? U : 1, pe = Z?.ex ?? 330, F = Z?.ey ?? 300, { size: rt = 90, color: at = "#00e5ff", widthRatio: Ye = 3 } = i ?? {}, we = {
     name: t,
     isSelected: J,
-    isExpandedPos: z,
+    isExpandedPos: B,
     isCompact: _,
-    animPhase: M,
+    animPhase: z,
     compactCx: xe,
     compactCy: ce,
-    groupScale: oe,
+    groupScale: re,
     effectiveScale: ee,
-    transitionValue: re,
+    transitionValue: ae,
     rotateY: ye,
     autoRotateComponents: me,
     onComponentClick: Be,
-    onComponentUpdate: le,
+    onComponentUpdate: oe,
     selectedComponentName: Z?.name ?? null,
     expandedOffsetX: se
   };
@@ -1355,7 +1358,7 @@ function Lt({
         filter: _ && Math.sin(Ce) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
         zIndex: J ? 500 : T ? 0 : ot,
         transformOrigin: `${de}px ${kt}px`,
-        transform: ve ? `translate(${-(pe - $t) * ae}px, ${-(B - kt) * ae}px) scale(${ae})` : "none"
+        transform: ve ? `translate(${-(pe - $t) * le}px, ${-(F - kt) * le}px) scale(${le})` : "none"
       },
       children: [
         _ && !T && /* @__PURE__ */ e(
@@ -1372,8 +1375,8 @@ function Lt({
               cursor: "pointer",
               zIndex: 101
             },
-            onClick: (F) => {
-              F.stopPropagation(), ne?.(t);
+            onClick: (H) => {
+              H.stopPropagation(), ne?.(t);
             }
           }
         ),
@@ -1384,7 +1387,7 @@ function Lt({
               position: "absolute",
               left: xe,
               top: ce - 200,
-              transform: `translate(-50%, -50%) scale(${oe})`,
+              transform: `translate(-50%, -50%) scale(${re})`,
               zIndex: 110,
               pointerEvents: "none",
               animation: "holo-led-blink 1.5s infinite",
@@ -1430,13 +1433,13 @@ function Lt({
           {
             style: {
               position: "absolute",
-              left: z ? de : xe,
-              top: z ? 48 : ce - 180,
-              transform: `translate(-50%, -50%) scale(${z ? 1.2 : oe * 1.5})`,
+              left: B ? de : xe,
+              top: B ? 48 : ce - 180,
+              transform: `translate(-50%, -50%) scale(${B ? 1.2 : re * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
-              transition: re,
+              transition: ae,
               fontSize: 36,
               fontWeight: 700,
               letterSpacing: "0.18em",
@@ -1456,23 +1459,23 @@ function Lt({
             style: {
               position: "absolute",
               top: 0,
-              left: z ? se : 0,
+              left: B ? se : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
-              transition: re
+              transition: ae
             },
-            children: o.map((F, Ve) => /* @__PURE__ */ e(
+            children: o.map((H, Ve) => /* @__PURE__ */ e(
               qt,
               {
-                x1: F.from[0],
-                y1: F.from[1],
-                x2: F.to[0],
-                y2: F.to[1],
-                show: J && M >= (F.visibleAtPhase ?? 0),
-                color: F.color,
-                dur: F.duration
+                x1: H.from[0],
+                y1: H.from[1],
+                x2: H.to[0],
+                y2: H.to[1],
+                show: J && z >= (H.visibleAtPhase ?? 0),
+                color: H.color,
+                dur: H.duration
               },
               Ve
             ))
@@ -1483,10 +1486,10 @@ function Lt({
           {
             style: {
               position: "absolute",
-              left: z ? de : xe,
-              top: z ? 570 : ce + 70,
-              transform: `translate(-50%, -50%) scaleX(${z ? 1 : 0.4}) scaleY(${z ? 1 : 0.6}) scale(${z ? 1 : oe})`,
-              transition: re,
+              left: B ? de : xe,
+              top: B ? 570 : ce + 70,
+              transform: `translate(-50%, -50%) scaleX(${B ? 1 : 0.4}) scaleY(${B ? 1 : 0.6}) scale(${B ? 1 : re})`,
+              transition: ae,
               zIndex: 1
             },
             children: /* @__PURE__ */ e(Gt, { size: rt, color: at, widthRatio: Ye, children: /* @__PURE__ */ e("div", { className: "base-hotspot" }) })
@@ -1497,7 +1500,7 @@ function Lt({
     }
   ) });
 }
-function N({
+function W({
   ex: t,
   ey: n,
   status: o,
@@ -1507,22 +1510,23 @@ function N({
   offsetY: s,
   isVisible: l,
   align: h = "right",
-  internalRef: d
+  internalRef: d,
+  forceShow: p = !1
 }) {
-  const p = ge(Re), f = p?.expandedOffsetX ?? 0;
-  if (o === "online") return null;
-  const b = l && !!p?.isExpandedPos, u = C[o]?.color ?? C.warning.color, g = Math.abs(a) > Math.abs(s), m = t + f + (g ? Math.sign(a) * 45 : 0), w = n + (g ? 0 : Math.sign(s) * 40), v = t + f + a, S = n + s;
-  let y = "";
-  if (g) {
-    const $ = m + (v - m) / 2;
-    y = `M ${m} ${w} L ${$} ${w} L ${$} ${S} L ${v} ${S}`;
+  const f = ge(Re), g = f?.expandedOffsetX ?? 0;
+  if (o === "online" && !p) return null;
+  const u = l && !!f?.isExpandedPos, b = o === "online" ? $.warning.color : $[o]?.color ?? $.warning.color, m = Math.abs(a) > Math.abs(s), w = t + g + (m ? Math.sign(a) * 45 : 0), v = n + (m ? 0 : Math.sign(s) * 40), S = t + g + a, y = n + s;
+  let x = "";
+  if (m) {
+    const O = w + (S - w) / 2;
+    x = `M ${w} ${v} L ${O} ${v} L ${O} ${y} L ${S} ${y}`;
   } else {
-    const $ = w + (S - w) / 2;
-    y = `M ${m} ${w} L ${m} ${$} L ${v} ${$} L ${v} ${S}`;
+    const O = v + (y - v) / 2;
+    x = `M ${w} ${v} L ${w} ${O} L ${S} ${O} L ${S} ${y}`;
   }
-  let x = "translate(0, -50%)";
-  h === "left" && (x = "translate(-100%, -50%)"), h === "top" && (x = "translate(-50%, -100%)"), h === "bottom" && (x = "translate(-50%, 0)");
-  const A = h === "left" ? -8 : h === "right" ? 8 : 0, k = h === "top" ? -8 : h === "bottom" ? 8 : 0;
+  let C = "translate(0, -50%)";
+  h === "left" && (C = "translate(-100%, -50%)"), h === "top" && (C = "translate(-50%, -100%)"), h === "bottom" && (C = "translate(-50%, 0)");
+  const k = h === "left" ? -8 : h === "right" ? 8 : 0, P = h === "top" ? -8 : h === "bottom" ? 8 : 0;
   return /* @__PURE__ */ c(
     "div",
     {
@@ -1533,7 +1537,7 @@ function N({
         width: "100%",
         height: "100%",
         pointerEvents: "none",
-        opacity: b ? 1 : 0,
+        opacity: u ? 1 : 0,
         transition: "opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s",
         zIndex: 150
       },
@@ -1553,12 +1557,12 @@ function N({
             children: /* @__PURE__ */ e(
               "path",
               {
-                d: y,
+                d: x,
                 fill: "none",
-                stroke: u,
+                stroke: b,
                 strokeWidth: "1.5",
                 strokeDasharray: "5 4",
-                style: { filter: `drop-shadow(0 0 4px ${u})`, opacity: 0.55 }
+                style: { filter: `drop-shadow(0 0 4px ${b})`, opacity: 0.55 }
               }
             )
           }
@@ -1568,14 +1572,14 @@ function N({
           {
             style: {
               position: "absolute",
-              left: v,
-              top: S,
-              transform: x,
-              marginLeft: A,
-              marginTop: k,
+              left: S,
+              top: y,
+              transform: C,
+              marginLeft: k,
+              marginTop: P,
               background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px), rgba(2, 8, 16, 0.82)",
-              border: `1px solid ${u}55`,
-              borderLeft: `2px solid ${u}`,
+              border: `1px solid ${b}55`,
+              borderLeft: `2px solid ${b}`,
               backdropFilter: "blur(8px)",
               WebkitBackdropFilter: "blur(8px)",
               padding: "6px 10px",
@@ -1583,7 +1587,7 @@ function N({
               color: "#fff",
               fontFamily: "'Courier New', monospace",
               width: 140,
-              boxShadow: `0 4px 12px rgba(0,0,0,0.4), 0 0 8px ${u}22 inset`
+              boxShadow: `0 4px 12px rgba(0,0,0,0.4), 0 0 8px ${b}22 inset`
             },
             children: [
               /* @__PURE__ */ c(
@@ -1603,8 +1607,8 @@ function N({
                           width: 4,
                           height: 4,
                           borderRadius: "50%",
-                          background: u,
-                          boxShadow: `0 0 6px ${u}`,
+                          background: b,
+                          boxShadow: `0 0 6px ${b}`,
                           animation: "holo-led-blink 1.5s infinite"
                         }
                       }
@@ -1613,12 +1617,12 @@ function N({
                       "div",
                       {
                         style: {
-                          color: u,
+                          color: b,
                           fontWeight: "600",
                           fontSize: 10,
                           letterSpacing: "1px",
                           textTransform: "uppercase",
-                          textShadow: `0 0 4px ${u}88`
+                          textShadow: `0 0 4px ${b}88`
                         },
                         children: d ? `${i} · ${d}` : i
                       }
@@ -1644,7 +1648,7 @@ function N({
     }
   );
 }
-function E({
+function A({
   ex: t,
   ey: n,
   compactOffset: o,
@@ -1657,11 +1661,11 @@ function E({
   componentInfo: d,
   visibleAtPhase: p = 0,
   fixedScale: f,
-  bare: b = !1,
+  bare: g = !1,
   alert: u
 }) {
-  const g = ge(Re);
-  if (!g)
+  const b = ge(Re);
+  if (!b)
     throw new Error("ServiceNode must be used inside a <Service> component.");
   const {
     isExpandedPos: m,
@@ -1670,12 +1674,12 @@ function E({
     compactCy: S,
     groupScale: y,
     effectiveScale: x,
-    transitionValue: A,
+    transitionValue: C,
     onComponentClick: k,
-    onComponentUpdate: $,
-    selectedComponentName: H,
-    expandedOffsetX: L
-  } = g, K = p === 0 || g.isSelected && w >= p ? 1 : 0, Z = v + o.x, ye = S + o.y, me = m ? t + L : Z, D = m ? n : ye, U = f !== void 0 ? f : g.isCompact ? y : x, ne = !!d && !!H && d.name === H, Be = d?.status ? C[d.status]?.color ?? a : a, le = d?.status === "offline" ? "#4a6a8a" : Be, Fe = d && m && k ? () => k({
+    onComponentUpdate: P,
+    selectedComponentName: O,
+    expandedOffsetX: I
+  } = b, K = p === 0 || b.isSelected && w >= p ? 1 : 0, Z = v + o.x, ye = S + o.y, me = m ? t + I : Z, N = m ? n : ye, U = f !== void 0 ? f : b.isCompact ? y : x, ne = !!d && !!O && d.name === O, Be = d?.status ? $[d.status]?.color ?? a : a, oe = d?.status === "offline" ? "#4a6a8a" : Be, Fe = d && m && k ? () => k({
     type: d.type,
     name: d.name,
     status: d.status,
@@ -1685,9 +1689,9 @@ function E({
     dialogMetrics: d.dialogMetrics,
     subComponents: d.subComponents,
     graphSeries: d.graphSeries
-  }) : void 0, J = JSON.stringify(d?.context ?? {}), z = JSON.stringify(d?.dialogMetrics ?? []);
+  }) : void 0, J = JSON.stringify(d?.context ?? {}), B = JSON.stringify(d?.dialogMetrics ?? []);
   ke(() => {
-    !ne || !d || !$ || $({
+    !ne || !d || !P || P({
       type: d.type,
       name: d.name,
       status: d.status,
@@ -1698,8 +1702,10 @@ function E({
       subComponents: d.subComponents,
       graphSeries: d.graphSeries
     });
-  }, [ne, d?.status, J, z]);
-  const _ = d?.status === "warning" || d?.status === "critical", se = d?.status ?? "online", de = d?.name ?? s ?? "";
+  }, [ne, d?.status, J, B]);
+  const _ = d?.status === "warning" || d?.status === "critical" || !!u;
+  u && d?.status === "online" && $.warning.color;
+  const se = d?.status ?? "online", de = d?.name ?? s ?? "";
   return /* @__PURE__ */ c(Me, { children: [
     /* @__PURE__ */ e(
       "div",
@@ -1707,22 +1713,22 @@ function E({
         style: {
           position: "absolute",
           left: me,
-          top: D,
+          top: N,
           transform: `translate(-50%, -50%) scale(${U})`,
           opacity: K,
           zIndex: i,
-          transition: A || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          transition: C || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
           pointerEvents: m && K >= 0.5 ? "auto" : "none"
         },
-        children: b ? r : /* @__PURE__ */ e(
+        children: g ? r : /* @__PURE__ */ e(
           Jt,
           {
-            statusColor: le,
+            statusColor: oe,
             label: s,
             subLabel: l,
             delay: h,
             showLabels: m,
-            isCompact: g.isCompact,
+            isCompact: b.isCompact,
             onClick: Fe,
             isSelected: ne,
             isAlerting: _,
@@ -1732,7 +1738,7 @@ function E({
       }
     ),
     u && /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: t,
         ey: n,
@@ -1743,7 +1749,8 @@ function E({
         offsetY: u.offsetY ?? -30,
         align: u.align ?? "right",
         internalRef: u.internalRef,
-        isVisible: !0
+        isVisible: !0,
+        forceShow: !0
       }
     )
   ] });
@@ -1760,7 +1767,7 @@ function Jt({
   isSelected: h = !1,
   isAlerting: d = !1
 }) {
-  const [p, f] = R(!1), b = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : p && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
+  const [p, f] = R(!1), g = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : p && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
   return /* @__PURE__ */ c(
     "div",
     {
@@ -1771,7 +1778,7 @@ function Jt({
       style: {
         cursor: l ? "pointer" : void 0,
         transition: "filter 0.3s ease",
-        filter: b
+        filter: g
       },
       onMouseEnter: () => f(!0),
       onMouseLeave: () => f(!1),
@@ -1783,8 +1790,8 @@ function Jt({
           {
             className: "node-alert-glow",
             style: {
-              "--pulse-color": n,
-              boxShadow: `0 0 20px ${n}, 0 0 40px ${n}66`
+              "--pulse-color": alertGlowColor,
+              boxShadow: `0 0 20px ${alertGlowColor}, 0 0 40px ${alertGlowColor}66`
             }
           }
         ),
@@ -2038,7 +2045,7 @@ function ei({
           }
         ),
         Array.from({ length: 3 }, (p, f) => {
-          const b = f < l;
+          const g = f < l;
           return /* @__PURE__ */ c(
             "div",
             {
@@ -2065,8 +2072,8 @@ function ei({
                       height: 5,
                       borderRadius: "50%",
                       flexShrink: 0,
-                      background: b ? t.color : "#08142a",
-                      boxShadow: b ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
+                      background: g ? t.color : "#08142a",
+                      boxShadow: g ? `0 0 6px ${t.color}, 0 0 12px ${t.color}66` : "none"
                     }
                   }
                 ),
@@ -2082,7 +2089,7 @@ function ei({
                       position: "relative",
                       overflow: "hidden"
                     },
-                    children: b && /* @__PURE__ */ e(
+                    children: g && /* @__PURE__ */ e(
                       "div",
                       {
                         style: {
@@ -2575,20 +2582,20 @@ function $e({
   brandLabel: d = "BUSAUD",
   _compact: p
 }) {
-  const [f, b] = R(n), u = ie(0), g = ie(0);
+  const [f, g] = R(n), u = ie(0), b = ie(0);
   ke(() => {
     if (!r) {
-      b(n);
+      g(n);
       return;
     }
     const w = (v) => {
-      g.current && b((S) => S + (v - g.current) * 0.027), g.current = v, u.current = requestAnimationFrame(w);
+      b.current && g((S) => S + (v - b.current) * 0.027), b.current = v, u.current = requestAnimationFrame(w);
     };
     return u.current = requestAnimationFrame(w), () => {
-      cancelAnimationFrame(u.current), g.current = 0;
+      cancelAnimationFrame(u.current), b.current = 0;
     };
   }, [r, n]);
-  const m = C[a] ?? C.online;
+  const m = $[a] ?? $.online;
   return /* @__PURE__ */ c(
     "div",
     {
@@ -2726,14 +2733,14 @@ function Mi({
   visibleAtPhase: d,
   cpuLoad: p,
   memLoad: f,
-  brandLabel: b,
+  brandLabel: g,
   dialogMetrics: u,
-  subComponents: g,
+  subComponents: b,
   graphSeries: m,
   alert: w
 }) {
   return /* @__PURE__ */ e(
-    E,
+    A,
     {
       ex: t,
       ey: n,
@@ -2750,11 +2757,11 @@ function Mi({
         status: a,
         context: { cpuLoad: p, memLoad: f },
         dialogMetrics: u,
-        subComponents: g,
+        subComponents: b,
         graphSeries: m
       },
       alert: w,
-      children: /* @__PURE__ */ e($e, { status: a, cpuLoad: p, memLoad: f, brandLabel: b })
+      children: /* @__PURE__ */ e($e, { status: a, cpuLoad: p, memLoad: f, brandLabel: g })
     }
   );
 }
@@ -2772,7 +2779,7 @@ function ni({
 }) {
   return /* @__PURE__ */ c(Me, { children: [
     st.map((s, l) => {
-      const h = dt(s), d = l === 0, p = Math.round(4 + h * 9), f = Math.round(12 + h * 22), b = Math.round(28 + h * 44), u = Math.round(h * 0.55 * 255).toString(16).padStart(2, "0");
+      const h = dt(s), d = l === 0, p = Math.round(4 + h * 9), f = Math.round(12 + h * 22), g = Math.round(28 + h * 44), u = Math.round(h * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
         "div",
         {
@@ -2784,7 +2791,7 @@ function ni({
             top: t,
             transform: `rotateY(${s}deg) translateZ(${Se}px)`,
             backfaceVisibility: "hidden",
-            background: d ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${f},${b})`,
+            background: d ? a ? "linear-gradient(180deg, rgb(0,28,62), rgb(0,18,44))" : "linear-gradient(180deg, rgba(0,28,62,0.70), rgba(0,18,44,0.76))" : `rgb(${p},${f},${g})`,
             borderLeft: `1px solid ${o.color}${u}`,
             boxShadow: d ? `inset 0 0 18px ${o.color}28` : "none"
           },
@@ -2989,14 +2996,14 @@ function Ue({
       d(n);
       return;
     }
-    const u = (g) => {
-      f.current && d((m) => m + (g - f.current) * 0.027), f.current = g, p.current = requestAnimationFrame(u);
+    const u = (b) => {
+      f.current && d((m) => m + (b - f.current) * 0.027), f.current = b, p.current = requestAnimationFrame(u);
     };
     return p.current = requestAnimationFrame(u), () => {
       cancelAnimationFrame(p.current), f.current = 0;
     };
   }, [r, n]);
-  const b = C[a] ?? C.online;
+  const g = $[a] ?? $.online;
   return /* @__PURE__ */ c(
     "div",
     {
@@ -3064,7 +3071,7 @@ function Ue({
               position: "absolute",
               width: te * 2.8 * i,
               height: lt * 0.85 * i,
-              background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
+              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(50 * i)}px)`,
               pointerEvents: "none",
               top: "45%",
@@ -3098,7 +3105,7 @@ function Ue({
                   {
                     diskY: u * (Oe + gt),
                     diskIdx: u,
-                    cfg: b,
+                    cfg: g,
                     hasRingBelow: u < 2,
                     capacity: s,
                     compact: l
@@ -3126,12 +3133,12 @@ function zi({
   visibleAtPhase: d,
   capacity: p,
   dialogMetrics: f,
-  subComponents: b,
+  subComponents: g,
   graphSeries: u,
-  alert: g
+  alert: b
 }) {
   return /* @__PURE__ */ e(
-    E,
+    A,
     {
       ex: t,
       ey: n,
@@ -3148,16 +3155,16 @@ function zi({
         status: a,
         context: { capacity: p },
         dialogMetrics: f,
-        subComponents: b,
+        subComponents: g,
         graphSeries: u
       },
-      alert: g,
+      alert: b,
       children: /* @__PURE__ */ e(Ue, { status: a, capacity: p })
     }
   );
 }
 function yt({ status: t = "online", scale: n = 1 }) {
-  const i = (C[t] ?? C.online).color;
+  const i = ($[t] ?? $.online).color;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -3279,7 +3286,7 @@ function Bi({
   visibleAtPhase: l
 }) {
   return /* @__PURE__ */ e(
-    E,
+    A,
     {
       ex: t,
       ey: n,
@@ -3770,20 +3777,20 @@ function mt({
   activeRoutes: h = 12,
   _compact: d
 }) {
-  const [p, f] = R(n), b = ie(0), u = ie(0);
+  const [p, f] = R(n), g = ie(0), u = ie(0);
   ke(() => {
     if (!r) {
       f(n);
       return;
     }
     const m = (w) => {
-      u.current && f((v) => v + (w - u.current) * 0.027), u.current = w, b.current = requestAnimationFrame(m);
+      u.current && f((v) => v + (w - u.current) * 0.027), u.current = w, g.current = requestAnimationFrame(m);
     };
-    return b.current = requestAnimationFrame(m), () => {
-      cancelAnimationFrame(b.current), u.current = 0;
+    return g.current = requestAnimationFrame(m), () => {
+      cancelAnimationFrame(g.current), u.current = 0;
     };
   }, [r, n]);
-  const g = C[a] ?? C.online;
+  const b = $[a] ?? $.online;
   return /* @__PURE__ */ c(
     "div",
     {
@@ -3851,7 +3858,7 @@ function mt({
               position: "absolute",
               width: he * 1.3 * i,
               height: Q * 2 * i,
-              background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
+              background: `radial-gradient(ellipse, ${b.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
               top: "40%",
@@ -3884,7 +3891,7 @@ function mt({
                   /* @__PURE__ */ e("div", { style: Ae.front, children: /* @__PURE__ */ e(
                     oi,
                     {
-                      cfg: g,
+                      cfg: b,
                       name: s,
                       traffic: l,
                       activeRoutes: h,
@@ -3892,8 +3899,8 @@ function mt({
                     }
                   ) }),
                   /* @__PURE__ */ e("div", { style: Ae.back, children: /* @__PURE__ */ e(ri, {}) }),
-                  /* @__PURE__ */ e("div", { style: Ae.left, children: /* @__PURE__ */ e(Ct, { side: "left", color: g.color }) }),
-                  /* @__PURE__ */ e("div", { style: Ae.right, children: /* @__PURE__ */ e(Ct, { side: "right", color: g.color }) }),
+                  /* @__PURE__ */ e("div", { style: Ae.left, children: /* @__PURE__ */ e(Ct, { side: "left", color: b.color }) }),
+                  /* @__PURE__ */ e("div", { style: Ae.right, children: /* @__PURE__ */ e(Ct, { side: "right", color: b.color }) }),
                   /* @__PURE__ */ e("div", { style: Ae.top, children: /* @__PURE__ */ e(ai, { traffic: l }) }),
                   /* @__PURE__ */ e("div", { style: Ae.bottom, children: /* @__PURE__ */ e("div", { style: { width: he, height: Le, background: "#020508" } }) })
                 ]
@@ -3918,13 +3925,13 @@ function Fi({
   visibleAtPhase: d,
   traffic: p,
   activeRoutes: f,
-  dialogMetrics: b,
+  dialogMetrics: g,
   subComponents: u,
-  graphSeries: g,
+  graphSeries: b,
   alert: m
 }) {
   return /* @__PURE__ */ e(
-    E,
+    A,
     {
       ex: t,
       ey: n,
@@ -3940,9 +3947,9 @@ function Fi({
         name: r,
         status: a,
         context: { traffic: p, activeRoutes: f },
-        dialogMetrics: b,
+        dialogMetrics: g,
         subComponents: u,
-        graphSeries: g
+        graphSeries: b
       },
       alert: m,
       children: /* @__PURE__ */ e(mt, { status: a, traffic: p, activeRoutes: f })
@@ -4431,17 +4438,17 @@ function Dt({
   instances: d = 3,
   _compact: p
 }) {
-  const [f, b] = R(n), u = ie(0), g = ie(0);
+  const [f, g] = R(n), u = ie(0), b = ie(0);
   ke(() => {
     if (!r) {
-      b(n);
+      g(n);
       return;
     }
     const w = (v) => {
-      g.current && b((S) => S + (v - g.current) * 0.027), g.current = v, u.current = requestAnimationFrame(w);
+      b.current && g((S) => S + (v - b.current) * 0.027), b.current = v, u.current = requestAnimationFrame(w);
     };
     return u.current = requestAnimationFrame(w), () => {
-      cancelAnimationFrame(u.current), g.current = 0;
+      cancelAnimationFrame(u.current), b.current = 0;
     };
   }, [r, n]);
   const m = Pt[a] ?? Pt.online;
@@ -4580,14 +4587,14 @@ function Hi({
   visibleAtPhase: d,
   queueDepth: p,
   msgsPerSec: f,
-  instances: b,
+  instances: g,
   dialogMetrics: u,
-  subComponents: g,
+  subComponents: b,
   graphSeries: m,
   alert: w
 }) {
   return /* @__PURE__ */ e(
-    E,
+    A,
     {
       ex: t,
       ey: n,
@@ -4602,9 +4609,9 @@ function Hi({
         type: "messageServer",
         name: r,
         status: a,
-        context: { queueDepth: p, msgsPerSec: f, instances: b },
+        context: { queueDepth: p, msgsPerSec: f, instances: g },
         dialogMetrics: u,
-        subComponents: g,
+        subComponents: b,
         graphSeries: m
       },
       alert: w,
@@ -4614,13 +4621,13 @@ function Hi({
           status: a,
           queueDepth: p,
           msgsPerSec: f,
-          instances: b
+          instances: g
         }
       )
     }
   );
 }
-function O(t, n, o = 24) {
+function L(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));
@@ -4720,34 +4727,34 @@ function fi(t, n) {
   if (t === "server") {
     const o = n.cpuLoad ?? 50, i = n.memLoad ?? 60;
     return [
-      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: O(o, 15) },
-      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: O(o * 0.7, 12) },
-      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: O(i, 18) },
-      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: O(i * 0.85, 14) },
-      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: O(40, 25) },
-      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: O(35, 20) },
-      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: O(30, 22) },
-      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: O(55, 20) }
+      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: L(o, 15) },
+      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: L(o * 0.7, 12) },
+      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: L(i, 18) },
+      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: L(i * 0.85, 14) },
+      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: L(40, 25) },
+      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: L(35, 20) },
+      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: L(30, 22) },
+      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: L(55, 20) }
     ];
   }
   if (t === "dispatcher" || t === "messageServer") {
     const o = n.traffic ?? n.queueDepth ?? 50;
     return [
-      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: O(o, 20) },
-      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: O(60, 25) },
-      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: O(45, 20) },
-      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: O(70, 30) },
-      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: O(o * 0.9, 15) }
+      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: L(o, 20) },
+      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: L(60, 25) },
+      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: L(45, 20) },
+      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: L(70, 30) },
+      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: L(o * 0.9, 15) }
     ];
   }
   if (t === "database") {
     const o = n.capacity ?? 70;
     return [
-      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: O(40, 20) },
-      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: O(55, 25) },
-      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: O(35, 18) },
-      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: O(o, 15) },
-      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: O(75, 12) }
+      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: L(40, 20) },
+      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: L(55, 25) },
+      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: L(35, 18) },
+      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: L(o, 15) },
+      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: L(75, 12) }
     ];
   }
   return [];
@@ -4761,7 +4768,7 @@ function Nt({
   delay: a = "0s",
   children: s
 }) {
-  const l = r ? C[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
+  const l = r ? $[r]?.glow ?? "rgba(0,229,255,0.4)" : "rgba(0,229,255,0.4)";
   return /* @__PURE__ */ c(
     "div",
     {
@@ -4802,8 +4809,8 @@ function Nt({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: C[r]?.color,
-              boxShadow: `0 0 6px ${C[r]?.color}`,
+              background: $[r]?.color,
+              boxShadow: `0 0 6px ${$[r]?.color}`,
               animation: "holo-led-blink 1.2s infinite"
             }
           }
@@ -4929,8 +4936,8 @@ function Ke({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: C[o]?.color,
-                boxShadow: `0 0 6px ${C[o]?.color}`,
+                background: $[o]?.color,
+                boxShadow: `0 0 6px ${$[o]?.color}`,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -5027,7 +5034,7 @@ function Ze({
                 width: 3,
                 height: 3,
                 borderRadius: "50%",
-                background: C[o]?.color,
+                background: $[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -5156,7 +5163,7 @@ function Wt({
     }
   );
 }
-function W({
+function M({
   color: t = "#00e5ff",
   label: n = "THREAD",
   status: o = "online"
@@ -5221,7 +5228,7 @@ function Qe({
                 width: 4,
                 height: 4,
                 borderRadius: "50%",
-                background: C[o]?.color,
+                background: $[o]?.color,
                 animation: "holo-led-blink 1.2s infinite"
               }
             }
@@ -5276,7 +5283,7 @@ function Y({
               width: 4,
               height: 4,
               borderRadius: "50%",
-              background: o && o !== "online" ? C[o]?.color ?? t : t,
+              background: o && o !== "online" ? $[o]?.color ?? t : t,
               boxShadow: `0 0 4px ${t}`,
               animation: o && o !== "online" && o !== "offline" ? "holo-led-blink 1s infinite" : "none"
             }
@@ -5421,7 +5428,7 @@ function hi(t, n, o, i) {
     }
   ] : [];
 }
-const I = "cubic-bezier(0.34, 1.56, 0.64, 1)", ui = "cubic-bezier(0.16, 1, 0.3, 1)";
+const D = "cubic-bezier(0.34, 1.56, 0.64, 1)", ui = "cubic-bezier(0.16, 1, 0.3, 1)";
 function bi({ items: t, revealPhase: n }) {
   return /* @__PURE__ */ e(
     "div",
@@ -5440,7 +5447,7 @@ function bi({ items: t, revealPhase: n }) {
           style: {
             opacity: n >= 0.2 + i * 0.06 ? 1 : 0,
             transform: `scale(${n >= 0.2 + i * 0.06 ? 1 : 0.6})`,
-            transition: `opacity 0.4s ${I} ${i * 0.06}s, transform 0.45s ${I} ${i * 0.06}s`
+            transition: `opacity 0.4s ${D} ${i * 0.06}s, transform 0.45s ${D} ${i * 0.06}s`
           },
           children: o.element
         },
@@ -5456,7 +5463,7 @@ function gi({
   internal: i,
   revealPhase: r
 }) {
-  const a = C[n]?.color ?? C.online.color, s = "#ff8c00";
+  const a = $[n]?.color ?? $.online.color, s = "#ff8c00";
   if (t === "server") {
     const l = o.cpuLoad ?? 50, h = o.memLoad ?? 60, d = [
       {
@@ -5549,7 +5556,7 @@ function gi({
       {
         key: "thread",
         delay: 7,
-        el: /* @__PURE__ */ e(W, { color: a, label: "THREAD-POOL", status: i[7]?.status })
+        el: /* @__PURE__ */ e(M, { color: a, label: "THREAD-POOL", status: i[7]?.status })
       },
       {
         key: "net",
@@ -5568,15 +5575,15 @@ function gi({
           alignItems: "center",
           padding: 24
         },
-        children: d.map(({ key: p, delay: f, el: b }) => /* @__PURE__ */ e(
+        children: d.map(({ key: p, delay: f, el: g }) => /* @__PURE__ */ e(
           "div",
           {
             style: {
               opacity: r >= 0.2 + f * 0.08 ? 1 : 0,
               transform: `scale(${r >= 0.2 + f * 0.08 ? 1 : 0.6})`,
-              transition: `opacity 0.4s ${I} ${f * 0.06}s, transform 0.45s ${I} ${f * 0.06}s`
+              transition: `opacity 0.4s ${D} ${f * 0.06}s, transform 0.45s ${D} ${f * 0.06}s`
             },
-            children: b
+            children: g
           },
           p
         ))
@@ -5592,7 +5599,7 @@ function gi({
           style: {
             opacity: r >= 0.25 + d * 0.04 ? 1 : 0,
             transform: `scale(${r >= 0.25 + d * 0.04 ? 1 : 0.5})`,
-            transition: `opacity 0.35s ${I} ${d * 0.04}s, transform 0.4s ${I} ${d * 0.04}s`
+            transition: `opacity 0.35s ${D} ${d * 0.04}s, transform 0.4s ${D} ${d * 0.04}s`
           },
           children: /* @__PURE__ */ e(Y, { color: a, label: `PORT-${d + 1}`, status: p?.status })
         },
@@ -5618,9 +5625,9 @@ function gi({
                 style: {
                   opacity: r >= 0.7 ? 1 : 0,
                   transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${I} 0.3s`
+                  transition: `all 0.4s ${D} 0.3s`
                 },
-                children: /* @__PURE__ */ e(W, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
+                children: /* @__PURE__ */ e(M, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
               }
             ),
             /* @__PURE__ */ e(
@@ -5629,9 +5636,9 @@ function gi({
                 style: {
                   opacity: r >= 0.8 ? 1 : 0,
                   transform: `scale(${r >= 0.8 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${I} 0.4s`
+                  transition: `all 0.4s ${D} 0.4s`
                 },
-                children: /* @__PURE__ */ e(W, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
+                children: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
               }
             )
           ] })
@@ -5658,7 +5665,7 @@ function gi({
               style: {
                 opacity: r >= 0.25 + l * 0.1 ? 1 : 0,
                 transform: `scale(${r >= 0.25 + l * 0.1 ? 1 : 0.6})`,
-                transition: `all 0.4s ${I} ${l * 0.08}s`
+                transition: `all 0.4s ${D} ${l * 0.08}s`
               },
               children: /* @__PURE__ */ e(Y, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
             },
@@ -5670,9 +5677,9 @@ function gi({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${I} 0.25s`
+                transition: `all 0.4s ${D} 0.25s`
               },
-              children: /* @__PURE__ */ e(W, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
+              children: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
             }
           ),
           [4, 5, 6].map((l) => /* @__PURE__ */ e(
@@ -5681,10 +5688,10 @@ function gi({
               style: {
                 opacity: r >= 0.7 + (l - 4) * 0.08 ? 1 : 0,
                 transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                transition: `all 0.4s ${I} ${0.35 + (l - 4) * 0.05}s`
+                transition: `all 0.4s ${D} ${0.35 + (l - 4) * 0.05}s`
               },
               children: /* @__PURE__ */ e(
-                W,
+                M,
                 {
                   color: "#bb55ff",
                   label: `WORKER-${l - 3}`,
@@ -5717,7 +5724,7 @@ function gi({
               style: {
                 opacity: r >= 0.2 + h * 0.12 ? 1 : 0,
                 transform: `scale(${r >= 0.2 + h * 0.12 ? 1 : 0.5})`,
-                transition: `all 0.45s ${I} ${h * 0.1}s`
+                transition: `all 0.45s ${D} ${h * 0.1}s`
               },
               children: /* @__PURE__ */ e(
                 Qe,
@@ -5737,9 +5744,9 @@ function gi({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${I} 0.3s`
+                transition: `all 0.4s ${D} 0.3s`
               },
-              children: /* @__PURE__ */ e(W, { color: s, label: "CONN-POOL", status: i[3]?.status })
+              children: /* @__PURE__ */ e(M, { color: s, label: "CONN-POOL", status: i[3]?.status })
             }
           ),
           /* @__PURE__ */ e(
@@ -5748,9 +5755,9 @@ function gi({
               style: {
                 opacity: r >= 0.75 ? 1 : 0,
                 transform: `scale(${r >= 0.75 ? 1 : 0.6})`,
-                transition: `all 0.4s ${I} 0.4s`
+                transition: `all 0.4s ${D} 0.4s`
               },
-              children: /* @__PURE__ */ e(W, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
+              children: /* @__PURE__ */ e(M, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
             }
           )
         ]
@@ -5769,7 +5776,7 @@ function Ui({
   subComponents: s,
   graphSeries: l
 }) {
-  const h = hi(t, n, o, a), d = C[o]?.color ?? C.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", b = r >= 0.2 ? "50%" : "0%", u = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
+  const h = hi(t, n, o, a), d = $[o]?.color ?? $.online.color, p = r >= 0.1 ? 1 : r * 10, f = r >= 0.2 ? "-50%" : "0%", g = r >= 0.2 ? "50%" : "0%", u = r >= 0.25 ? Math.min(1, (r - 0.25) * 1.5) : 0;
   return /* @__PURE__ */ c(
     "div",
     {
@@ -5781,7 +5788,7 @@ function Ui({
         flexDirection: "row",
         pointerEvents: "auto"
       },
-      onClick: (g) => g.stopPropagation(),
+      onClick: (b) => b.stopPropagation(),
       children: [
         /* @__PURE__ */ e(
           "div",
@@ -5843,7 +5850,7 @@ function Ui({
                           borderRight: `2px solid ${d}44`,
                           boxShadow: "4px 0 32px rgba(0,0,0,0.6)",
                           transform: `translateX(${f})`,
-                          transition: `transform 0.7s ${I}`
+                          transition: `transform 0.7s ${D}`
                         }
                       }
                     ),
@@ -5857,8 +5864,8 @@ function Ui({
                           background: "linear-gradient(90deg, rgba(2, 12, 28, 0.95) 0%, rgba(2, 8, 20, 0.98) 100%)",
                           borderLeft: `2px solid ${d}44`,
                           boxShadow: "-4px 0 32px rgba(0,0,0,0.6)",
-                          transform: `translateX(${b})`,
-                          transition: `transform 0.7s ${I}`
+                          transform: `translateX(${g})`,
+                          transition: `transform 0.7s ${D}`
                         }
                       }
                     )
@@ -5881,7 +5888,7 @@ function Ui({
                     display: "flex",
                     flexDirection: "column",
                     opacity: u >= 0.1 ? 1 : 0,
-                    transition: `opacity 0.5s ${I} 0.2s`
+                    transition: `opacity 0.5s ${D} 0.2s`
                   },
                   children: [
                     /* @__PURE__ */ c(
@@ -6111,38 +6118,38 @@ function wi(t) {
   return t;
 }
 function Si({ config: t, children: n }) {
-  const [o, i] = R({}), [r, a] = R(null), [s, l] = R(!1), [h, d] = R(null), [p, f] = R(null), b = ie(t);
-  b.current = t;
+  const [o, i] = R({}), [r, a] = R(null), [s, l] = R(!1), [h, d] = R(null), [p, f] = R(null), g = ie(t);
+  g.current = t;
   const u = ie(r);
   u.current = r;
-  const g = Ge(async () => {
-    const v = u.current, S = b.current;
+  const b = Ge(async () => {
+    const v = u.current, S = g.current;
     if (v) {
       l(!0);
       try {
         const y = await Promise.allSettled(
-          S.queries.map(($) => {
-            const H = S.endpoint.includes("?") ? "&" : "?", L = `${S.endpoint}${H}query=${encodeURIComponent($)}`;
-            return fetch(L, {
+          S.queries.map((P) => {
+            const O = S.endpoint.includes("?") ? "&" : "?", I = `${S.endpoint}${O}query=${encodeURIComponent(P)}`;
+            return fetch(I, {
               method: "GET",
               headers: {
                 "access-key": v.accessKey,
                 "access-secret-key": v.secretKey
               }
-            }).then((M) => {
-              if (!M.ok) throw new Error(`HTTP ${M.status}`);
-              return M.text();
-            }).then((M) => ({ query: $, data: M.trim() }));
+            }).then((z) => {
+              if (!z.ok) throw new Error(`HTTP ${z.status}`);
+              return z.text();
+            }).then((z) => ({ query: P, data: z.trim() }));
           })
         ), x = {};
-        let A = 0;
-        for (const $ of y)
-          $.status === "fulfilled" ? x[$.value.query] = $.value.data : A++;
-        i(($) => ({ ...$, ...x }));
+        let C = 0;
+        for (const P of y)
+          P.status === "fulfilled" ? x[P.value.query] = P.value.data : C++;
+        i((P) => ({ ...P, ...x }));
         const k = S.queries.length;
         d(
-          A > 0 ? `${A} of ${k} queries failed to refresh` : null
-        ), A < k && f(/* @__PURE__ */ new Date());
+          C > 0 ? `${C} of ${k} queries failed to refresh` : null
+        ), C < k && f(/* @__PURE__ */ new Date());
       } catch (y) {
         const x = y instanceof Error ? y.message : "Refresh failed";
         d(x);
@@ -6153,10 +6160,10 @@ function Si({ config: t, children: n }) {
   }, []);
   ke(() => {
     if (!r) return;
-    g();
-    const v = b.current.refreshInterval ?? 6e4, S = window.setInterval(g, v);
+    b();
+    const v = g.current.refreshInterval ?? 6e4, S = window.setInterval(b, v);
     return () => clearInterval(S);
-  }, [r, g]);
+  }, [r, b]);
   const m = Ge((v) => {
     a(v);
   }, []), w = {
@@ -6202,30 +6209,30 @@ function At({
   dataTransform: h,
   children: d
 }) {
-  const p = xi(), [f] = R(20), [b] = R(!1), [u] = R(!0), [g] = R(0.45), [m] = R(3.3), [w, v] = R("compact"), [S, y] = R(0), [x, A] = R(null), [k, $] = R(null), [H, L] = R(0), M = (T) => {
-    w === "compact" && (A(T), v("expanding"), y(0), setTimeout(() => y(1), 50), setTimeout(() => y(2), 800), setTimeout(() => y(3), 1200), setTimeout(() => y(4), 1600), setTimeout(() => y(5), 2e3), setTimeout(() => {
+  const p = xi(), [f] = R(20), [g] = R(!1), [u] = R(!0), [b] = R(0.45), [m] = R(3.3), [w, v] = R("compact"), [S, y] = R(0), [x, C] = R(null), [k, P] = R(null), [O, I] = R(0), z = (T) => {
+    w === "compact" && (C(T), v("expanding"), y(0), setTimeout(() => y(1), 50), setTimeout(() => y(2), 800), setTimeout(() => y(3), 1200), setTimeout(() => y(4), 1600), setTimeout(() => y(5), 2e3), setTimeout(() => {
       y(6), v("expanded");
     }, 2400));
   }, K = () => {
-    k ? ($(null), L(0)) : w === "expanded" && (v("collapsing"), y(0), A(null), setTimeout(() => {
+    k ? (P(null), I(0)) : w === "expanded" && (v("collapsing"), y(0), C(null), setTimeout(() => {
       v((T) => T === "collapsing" ? "compact" : T);
     }, 1e3));
   }, Z = Ge((T) => {
-    $(T), L(0);
+    P(T), I(0);
   }, []), ye = Ge((T) => {
-    $(T);
+    P(T);
   }, []);
   q.useEffect(() => {
     if (!k) return;
-    const T = performance.now(), j = 1200, oe = () => {
-      const V = performance.now() - T, re = Math.min(1, V / j);
-      L(re), re < 1 && requestAnimationFrame(oe);
-    }, ee = requestAnimationFrame(oe);
+    const T = performance.now(), j = 1200, re = () => {
+      const V = performance.now() - T, ae = Math.min(1, V / j);
+      I(ae), ae < 1 && requestAnimationFrame(re);
+    }, ee = requestAnimationFrame(re);
     return () => cancelAnimationFrame(ee);
   }, [k]);
   const me = () => {
-    $(null), L(0);
-  }, D = h ?? wi, U = p?.data, { enhancedChildren: ne, liveAlerts: Be } = Tt(() => {
+    P(null), I(0);
+  }, N = h ?? wi, U = p?.data, { enhancedChildren: ne, liveAlerts: Be } = Tt(() => {
     const T = {};
     if (!U || !l) return { enhancedChildren: d, liveAlerts: T };
     const j = {};
@@ -6233,16 +6240,16 @@ function At({
       if (!q.isValidElement(ee)) return ee;
       const V = ee.props.name;
       if (!V || !l[V]) return ee;
-      const re = l[V], ve = {}, ae = {};
-      for (const [pe, B] of Object.entries(re)) {
-        const rt = typeof B == "string" ? B : B.query, at = typeof B == "object" && B.transform ? B.transform : D, Ye = U[rt];
+      const ae = l[V], ve = {}, le = {};
+      for (const [pe, F] of Object.entries(ae)) {
+        const rt = typeof F == "string" ? F : F.query, at = typeof F == "object" && F.transform ? F.transform : N, Ye = U[rt];
         if (Ye === void 0) continue;
         const we = at(Ye);
-        if (ve[pe] = we, typeof B == "object" && B.alert && typeof we == "number") {
-          const { prop: F, warnAt: Ve = 70, critAt: St = 85, label: Ft } = B.alert, _e = Ft ?? pe, je = Math.round(we);
+        if (ve[pe] = we, typeof F == "object" && F.alert && typeof we == "number") {
+          const { prop: H, warnAt: Ve = 70, critAt: St = 85, label: Ft } = F.alert, _e = Ft ?? pe, je = Math.round(we);
           if (we >= St) {
-            const He = ae[F];
-            (!He || He.severity < 2) && (ae[F] = {
+            const He = le[H];
+            (!He || He.severity < 2) && (le[H] = {
               msg: `${_e} critical — ${je}%`,
               internalRef: pe,
               severity: 2
@@ -6251,8 +6258,8 @@ function At({
               message: `${_e} at ${je}% — exceeds critical threshold (${St}%)`
             });
           } else if (we >= Ve) {
-            const He = ae[F];
-            (!He || He.severity < 1) && (ae[F] = {
+            const He = le[H];
+            (!He || He.severity < 1) && (le[H] = {
               msg: `${_e} elevated — ${je}%`,
               internalRef: pe,
               severity: 1
@@ -6263,11 +6270,11 @@ function At({
           }
         }
       }
-      for (const [pe, B] of Object.entries(ae))
-        ve[pe] = { msg: B.msg, internalRef: B.internalRef };
+      for (const [pe, F] of Object.entries(le))
+        ve[pe] = { msg: F.msg, internalRef: F.internalRef };
       return Object.keys(ve).length > 0 ? q.cloneElement(ee, ve) : ee;
     }), liveAlerts: j };
-  }, [d, U, l, D]), le = o.find((T) => T.name === x), Fe = le?.status ?? "online", J = le?.dbSync ?? !0, z = le?.metrics, _ = Be[x ?? ""] ?? [], se = le?.alerts ?? [], de = _.length > 0 ? [..._, ...se.filter((T) => T.level !== "info")] : se, Ce = p?.lastRefreshError ?? null, it = 330, nt = 340, xe = k ? 1.15 : 1, ce = k ? -(k.ex - it) * 0.06 : 0, ot = k ? -(k.ey - nt) * 0.06 : 0;
+  }, [d, U, l, N]), oe = o.find((T) => T.name === x), Fe = oe?.status ?? "online", J = oe?.dbSync ?? !0, B = oe?.metrics, _ = Be[x ?? ""] ?? [], se = oe?.alerts ?? [], de = _.length > 0 ? [..._, ...se.filter((T) => T.level !== "info")] : se, Ce = p?.lastRefreshError ?? null, it = 330, nt = 340, xe = k ? 1.15 : 1, ce = k ? -(k.ex - it) * 0.06 : 0, ot = k ? -(k.ey - nt) * 0.06 : 0;
   return /* @__PURE__ */ c("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
@@ -6315,22 +6322,22 @@ function At({
             animPhase: S,
             selectedSystem: x,
             selectedComponent: k,
-            drillAnimPhase: H,
+            drillAnimPhase: O,
             rotateY: f,
-            autoRotateComponents: b,
-            componentScale: g,
+            autoRotateComponents: g,
+            componentScale: b,
             drillZoom: m,
             autoRotateCarousel: u,
             carouselSpeed: a,
             logoUrl: r,
-            onSelectSystem: M,
+            onSelectSystem: z,
             onBackgroundClick: K,
             onComponentClick: Z,
             onComponentUpdate: ye,
             onCloseDrill: me,
             selectedSystemStatus: Fe,
             selectedSystemDbSync: J,
-            selectedSystemMetrics: z,
+            selectedSystemMetrics: B,
             selectedSystemAlerts: de,
             children: ne
           }
@@ -6339,7 +6346,7 @@ function At({
     )
   ] });
 }
-function P(t, n, o = 24) {
+function E(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));
@@ -6358,21 +6365,21 @@ function Ne(t, n, o) {
     { id: "drive-1", label: "DRIVE-1", status: "online", element: /* @__PURE__ */ e(De, { color: r, label: "DRIVE-1", status: "online", activity: !0 }) },
     { id: "drive-2", label: "DRIVE-2", status: "online", element: /* @__PURE__ */ e(De, { color: r, label: "DRIVE-2", status: "online", activity: a > 30 }) },
     { id: "drive-3", label: "DRIVE-3", status: "online", element: /* @__PURE__ */ e(De, { color: r, label: "DRIVE-3", status: "online", activity: a > 50 }) },
-    { id: "thread-pool", label: "THREAD-POOL", status: d, detail: d === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(W, { color: r, label: "THREAD-POOL", status: d }) },
+    { id: "thread-pool", label: "THREAD-POOL", status: d, detail: d === "critical" ? "Thread exhaustion" : void 0, element: /* @__PURE__ */ e(M, { color: r, label: "THREAD-POOL", status: d }) },
     { id: "network", label: "NET", status: p, element: /* @__PURE__ */ e(Wt, { color: r, label: "NET", status: p }) }
   ];
 }
 function We(t) {
   const n = t?.cpuLoad ?? 50, o = t?.memLoad ?? 60;
   return [
-    { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: P(n, 15) },
-    { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: P(n * 0.7, 12) },
-    { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: P(o, 18) },
-    { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: P(o * 0.85, 14) },
-    { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: P(40, 25) },
-    { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: P(35, 20) },
-    { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: P(30, 22) },
-    { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: P(55, 20) }
+    { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: E(n, 15) },
+    { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: E(n * 0.7, 12) },
+    { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: E(o, 18) },
+    { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: E(o * 0.85, 14) },
+    { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: E(40, 25) },
+    { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: E(35, 20) },
+    { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: E(30, 22) },
+    { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: E(55, 20) }
   ];
 }
 function zt(t, n, o) {
@@ -6386,18 +6393,18 @@ function zt(t, n, o) {
     { id: "port-6", label: "PORT-6", status: "online", element: /* @__PURE__ */ e(Y, { color: r, label: "PORT-6", status: "online" }) },
     { id: "port-7", label: "PORT-7", status: "online", element: /* @__PURE__ */ e(Y, { color: r, label: "PORT-7", status: "online" }) },
     { id: "port-8", label: "PORT-8", status: "online", element: /* @__PURE__ */ e(Y, { color: r, label: "PORT-8", status: "online" }) },
-    { id: "http-worker", label: "HTTP-WORKER", status: l, detail: l === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(W, { color: r, label: "HTTP-WORKER", status: l }) },
-    { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(W, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
+    { id: "http-worker", label: "HTTP-WORKER", status: l, detail: l === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(M, { color: r, label: "HTTP-WORKER", status: l }) },
+    { id: "https-worker", label: "HTTPS-WORKER", status: "online", element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "HTTPS-WORKER", status: "online" }) }
   ];
 }
 function Bt(t) {
   const n = t?.traffic ?? 50;
   return [
-    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: P(n, 20) },
-    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: P(60, 25) },
-    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: P(45, 20) },
-    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: P(70, 30) },
-    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: P(n * 0.9, 15) }
+    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: E(n, 20) },
+    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: E(60, 25) },
+    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: E(45, 20) },
+    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: E(70, 30) },
+    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: E(n * 0.9, 15) }
   ];
 }
 function $i(t, n, o) {
@@ -6406,20 +6413,20 @@ function $i(t, n, o) {
     { id: "inst-0", label: "INST-0", status: "online", element: /* @__PURE__ */ e(Y, { color: "#bb55ff", label: "INST-0", status: "online" }) },
     { id: "inst-1", label: "INST-1", status: "online", element: /* @__PURE__ */ e(Y, { color: "#bb55ff", label: "INST-1", status: "online" }) },
     { id: "inst-2", label: "INST-2", status: r, detail: r === "critical" ? "Instance unreachable" : void 0, element: /* @__PURE__ */ e(Y, { color: "#bb55ff", label: "INST-2", status: r }) },
-    { id: "queue-0", label: "QUEUE-0", status: a, detail: i === "critical" ? "Queue full" : i === "offline" ? "Unreachable" : i === "warning" ? "Queue depth warning" : void 0, element: /* @__PURE__ */ e(W, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
-    { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(W, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
-    { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(W, { color: "#bb55ff", label: "WORKER-2", status: "online" }) },
-    { id: "worker-3", label: "WORKER-3", status: s, detail: s === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(W, { color: "#bb55ff", label: "WORKER-3", status: s }) }
+    { id: "queue-0", label: "QUEUE-0", status: a, detail: i === "critical" ? "Queue full" : i === "offline" ? "Unreachable" : i === "warning" ? "Queue depth warning" : void 0, element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "QUEUE-0", status: a }) },
+    { id: "worker-1", label: "WORKER-1", status: "online", element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "WORKER-1", status: "online" }) },
+    { id: "worker-2", label: "WORKER-2", status: "online", element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "WORKER-2", status: "online" }) },
+    { id: "worker-3", label: "WORKER-3", status: s, detail: s === "critical" ? "Worker timeout" : void 0, element: /* @__PURE__ */ e(M, { color: "#bb55ff", label: "WORKER-3", status: s }) }
   ];
 }
 function ki(t) {
   const n = t?.queueDepth ?? 50;
   return [
-    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: P(n, 20) },
-    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: P(60, 25) },
-    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: P(45, 20) },
-    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: P(70, 30) },
-    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: P(n * 0.9, 15) }
+    { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: E(n, 20) },
+    { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: E(60, 25) },
+    { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: E(45, 20) },
+    { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: E(70, 30) },
+    { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: E(n * 0.9, 15) }
   ];
 }
 function Je(t, n, o) {
@@ -6428,18 +6435,18 @@ function Je(t, n, o) {
     { id: "platter-0", label: "PLATTER-0", status: "online", element: /* @__PURE__ */ e(Qe, { color: r, label: "PLATTER-0", status: "online", capacityPercent: a }) },
     { id: "platter-1", label: "PLATTER-1", status: s, detail: i === "critical" ? "I/O failure" : i === "offline" ? "Connection lost" : i === "warning" ? "Slow queries" : void 0, element: /* @__PURE__ */ e(Qe, { color: r, label: "PLATTER-1", status: s, capacityPercent: a }) },
     { id: "platter-2", label: "PLATTER-2", status: l, detail: l === "warning" ? "Replication lag" : void 0, element: /* @__PURE__ */ e(Qe, { color: r, label: "PLATTER-2", status: l, capacityPercent: a }) },
-    { id: "conn-pool", label: "CONN-POOL", status: h, detail: h === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(W, { color: r, label: "CONN-POOL", status: h }) },
-    { id: "query-cache", label: "QUERY-CACHE", status: d, detail: d === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(W, { color: "#00ff88", label: "QUERY-CACHE", status: d }) }
+    { id: "conn-pool", label: "CONN-POOL", status: h, detail: h === "critical" ? "Pool exhausted" : void 0, element: /* @__PURE__ */ e(M, { color: r, label: "CONN-POOL", status: h }) },
+    { id: "query-cache", label: "QUERY-CACHE", status: d, detail: d === "warning" ? "Cache miss rate" : void 0, element: /* @__PURE__ */ e(M, { color: "#00ff88", label: "QUERY-CACHE", status: d }) }
   ];
 }
 function et(t) {
   const n = t?.capacity ?? 70;
   return [
-    { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: P(40, 20) },
-    { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: P(55, 25) },
-    { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: P(35, 18) },
-    { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: P(n, 15) },
-    { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: P(75, 12) }
+    { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: E(40, 20) },
+    { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: E(55, 25) },
+    { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: E(35, 18) },
+    { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: E(n, 15) },
+    { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: E(75, 12) }
   ];
 }
 function vt(t) {
@@ -6502,7 +6509,7 @@ function Ci({ config: t }) {
   const n = q.useContext(Re), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: h, pdbStatus: d, sdbStatus: p, dbSync: f } = t;
   return /* @__PURE__ */ c(Me, { children: [
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 330,
         ey: 120,
@@ -6514,7 +6521,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 220,
         ey: 260,
@@ -6547,7 +6554,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 440,
         ey: 260,
@@ -6581,7 +6588,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 165,
         ey: 390,
@@ -6614,7 +6621,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 330,
         ey: 390,
@@ -6647,7 +6654,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 495,
         ey: 390,
@@ -6680,7 +6687,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 200,
         ey: 520,
@@ -6713,7 +6720,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 460,
         ey: 520,
@@ -6746,7 +6753,7 @@ function Ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 330,
         ey: 520,
@@ -6765,7 +6772,7 @@ function Pi({ config: t }) {
   const n = q.useContext(Re), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: h, dbSync: d } = t, p = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ c("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 220,
         ey: 260,
@@ -6780,7 +6787,7 @@ function Pi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 440,
         ey: 260,
@@ -6795,7 +6802,7 @@ function Pi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 165,
         ey: 390,
@@ -6810,7 +6817,7 @@ function Pi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 330,
         ey: 390,
@@ -6825,7 +6832,7 @@ function Pi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 495,
         ey: 390,
@@ -6840,7 +6847,7 @@ function Pi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 200,
         ey: 520,
@@ -6855,7 +6862,7 @@ function Pi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 460,
         ey: 520,
@@ -6870,7 +6877,7 @@ function Pi({ config: t }) {
       }
     ),
     !d && /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 330,
         ey: 520,
@@ -6953,7 +6960,7 @@ function Ai({ config: t }) {
   const n = q.useContext(Re), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: h, sdbStatus: d, dbSync: p } = t;
   return /* @__PURE__ */ c(Me, { children: [
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 330,
         ey: 120,
@@ -6965,7 +6972,7 @@ function Ai({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 330,
         ey: 260,
@@ -6998,7 +7005,7 @@ function Ai({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 165,
         ey: 390,
@@ -7031,7 +7038,7 @@ function Ai({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 330,
         ey: 390,
@@ -7064,7 +7071,7 @@ function Ai({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 495,
         ey: 390,
@@ -7097,7 +7104,7 @@ function Ai({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 200,
         ey: 520,
@@ -7130,7 +7137,7 @@ function Ai({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 460,
         ey: 520,
@@ -7163,7 +7170,7 @@ function Ai({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      E,
+      A,
       {
         ex: 330,
         ey: 520,
@@ -7182,7 +7189,7 @@ function Ti({ config: t }) {
   const n = q.useContext(Re), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: h } = t, d = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ c("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 330,
         ey: 260,
@@ -7197,7 +7204,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 165,
         ey: 390,
@@ -7212,7 +7219,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 330,
         ey: 390,
@@ -7227,7 +7234,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 495,
         ey: 390,
@@ -7242,7 +7249,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 200,
         ey: 520,
@@ -7257,7 +7264,7 @@ function Ti({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 460,
         ey: 520,
@@ -7272,7 +7279,7 @@ function Ti({ config: t }) {
       }
     ),
     !h && /* @__PURE__ */ e(
-      N,
+      W,
       {
         ex: 330,
         ey: 520,
@@ -7326,21 +7333,21 @@ export {
   Dt as MessageServer3D,
   Hi as MessageServerNode,
   Wt as NetworkBlock3D,
-  N as NodeCallout,
+  W as NodeCallout,
   Qe as Platter3D,
   Y as Port3D,
   Xi as SAPService,
   Ri as SAP_CONNECTIONS,
-  C as STATUS_CFG,
+  $ as STATUS_CFG,
   $e as Server3D,
   Mi as ServerNode,
   Lt as Service,
   Re as ServiceContext,
   Ut as ServiceDialog,
-  E as ServiceNode,
+  A as ServiceNode,
   qt as SvgConnection,
   It as SyncBridge,
-  W as ThreadPool3D,
+  M as ThreadPool3D,
   mt as WebDispatcher3D,
   Fi as WebDispatcherNode,
   Qi as computeExchangeDialogAlerts,