react-aiops 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsxs as d, jsx as e, Fragment as Ce } from "react/jsx-runtime";
-import J, { createContext as Xe, useContext as ve, useState as I, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
+import { jsxs as d, jsx as e, Fragment as ve } from "react/jsx-runtime";
+import J, { createContext as je, useContext as we, useState as L, useEffect as Ee, useMemo as Et, useRef as ee } from "react";
 const Tt = {
   info: { color: "#00ff88", bg: "rgba(0, 255, 136, 0.1)", border: "#00ff88", icon: "✅" },
   warning: { color: "#ff8c00", bg: "rgba(255, 140, 0, 0.1)", border: "#ff8c00", icon: "⚠️" },
@@ -182,7 +182,7 @@ const w = {
   warning: { color: "#ff8c00", glow: "rgba(255,140,0,0.55)" },
   critical: { color: "#ff2255", glow: "rgba(255,34,85,0.55)" },
   offline: { color: "#1e3a5a", glow: "rgba(30,58,90,0.25)" }
-}, yi = "#00e5ff", mi = "#0055cc", we = "linear-gradient(180deg, #071428 0%, #040c1c 60%, #030810 100%)", 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%)";
+}, yi = "#00e5ff", mi = "#0055cc", Se = "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",
@@ -258,23 +258,23 @@ function It({
   let $;
   if (v && v.length > 0)
     $ = v.map((b, k) => {
-      const A = b.warnAt ?? 70, R = b.critAt ?? 85;
+      const D = b.warnAt ?? 70, P = b.critAt ?? 85;
       return {
         id: b.id,
         label: b.label,
         sublabel: b.sublabel,
         value: b.value,
         unit: b.unit ?? "%",
-        status: Le(l, b.value, A, R),
+        status: Le(l, b.value, D, P),
         icon: b.icon ?? "cpu",
         delay: k,
         colorOverride: b.color,
-        warnAt: A,
-        critAt: R
+        warnAt: D,
+        critAt: P
       };
     });
   else {
-    const b = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, A = p.capacity ?? 72, R = Le(l, b, 70, 85), L = Le(l, k, 75, 88), z = Le(l, A, 75, 90);
+    const b = p.cpuLoad ?? p.traffic ?? 50, k = p.memLoad ?? p.queueDepth ?? 60, D = p.capacity ?? 72, P = Le(l, b, 70, 85), E = Le(l, k, 75, 88), W = Le(l, D, 75, 90);
     $ = [
       {
         id: "cpu",
@@ -282,7 +282,7 @@ function It({
         sublabel: a === "dispatcher" ? "PORT LOAD" : a === "messageServer" ? "QUEUE DEPTH" : "PROCESSOR",
         value: b,
         unit: "%",
-        status: R,
+        status: P,
         icon: "cpu",
         delay: 0
       },
@@ -292,7 +292,7 @@ function It({
         sublabel: a === "database" ? "BUFFER POOL" : "HEAP USAGE",
         value: k,
         unit: "%",
-        status: L,
+        status: E,
         icon: "mem",
         delay: 1
       },
@@ -300,9 +300,9 @@ function It({
         id: "storage",
         label: "STORAGE",
         sublabel: a === "database" ? "TABLESPACE" : "DISK I/O",
-        value: A,
+        value: D,
         unit: "%",
-        status: z,
+        status: W,
         icon: "disk",
         delay: 2
       }
@@ -893,12 +893,12 @@ function Dt({ type: t, color: n }) {
     /* @__PURE__ */ e("line", { x1: "18", y1: "12", x2: "21", y2: "12", stroke: n, strokeWidth: "0.8" })
   ] });
 }
-const Ge = Xe(null), Ke = Xe({ index: 0 });
+const Ge = je(null), Ke = je({ index: 0 });
 function xi() {
-  return ve(Ge);
+  return we(Ge);
 }
 function vi() {
-  return ve(Ke);
+  return we(Ke);
 }
 function Wt({
   children: t,
@@ -922,23 +922,23 @@ function Wt({
   onCloseDrill: $,
   selectedSystemStatus: b = "online",
   selectedSystemDbSync: k = !0,
-  selectedSystemMetrics: A,
-  selectedSystemAlerts: R
+  selectedSystemMetrics: D,
+  selectedSystemAlerts: P
 }) {
-  const [L, z] = I(0);
+  const [E, W] = L(0);
   Ee(() => {
-    let D;
+    let z;
     if ((o === "compact" || o === "collapsing") && f) {
-      const H = () => {
-        z((ne) => ne + y), D = requestAnimationFrame(H);
+      const F = () => {
+        W((ne) => ne + y), z = requestAnimationFrame(F);
       };
-      D = requestAnimationFrame(H);
+      z = requestAnimationFrame(F);
     }
-    return () => cancelAnimationFrame(D);
+    return () => cancelAnimationFrame(z);
   }, [o, f, y]);
-  const F = J.Children.toArray(t), X = F.length, M = Et(() => ({
-    totalSystems: X,
-    carouselRotation: L,
+  const X = J.Children.toArray(t), j = X.length, N = Et(() => ({
+    totalSystems: j,
+    carouselRotation: E,
     viewState: o,
     animPhase: i,
     selectedSystem: r,
@@ -951,8 +951,8 @@ function Wt({
     onComponentClick: v,
     containerWidth: u
   }), [
-    X,
-    L,
+    j,
+    E,
     o,
     i,
     r,
@@ -964,8 +964,8 @@ function Wt({
     m,
     v,
     u
-  ]), te = F.map((D, H) => /* @__PURE__ */ e(Ke.Provider, { value: { index: H }, children: D }, H)), ie = o === "expanded" || o === "expanding" && i >= 4;
-  return /* @__PURE__ */ d(Ge.Provider, { value: M, children: [
+  ]), te = X.map((z, F) => /* @__PURE__ */ e(Ke.Provider, { value: { index: F }, children: z }, F)), ie = o === "expanded" || o === "expanding" && i >= 4;
+  return /* @__PURE__ */ d(Ge.Provider, { value: N, 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",
@@ -989,18 +989,18 @@ function Wt({
       ),
       te
     ] }),
-    r && /* @__PURE__ */ e("div", { onClick: (D) => D.stopPropagation(), children: /* @__PURE__ */ e(
+    r && /* @__PURE__ */ e("div", { onClick: (z) => z.stopPropagation(), children: /* @__PURE__ */ e(
       At,
       {
         name: r,
         status: b,
         dbSync: k,
         visible: ie && !a,
-        metrics: A,
-        alerts: R
+        metrics: D,
+        alerts: P
       }
     ) }),
-    a && /* @__PURE__ */ e("div", { onClick: (D) => D.stopPropagation(), children: /* @__PURE__ */ e(
+    a && /* @__PURE__ */ e("div", { onClick: (z) => z.stopPropagation(), children: /* @__PURE__ */ e(
       It,
       {
         component: a,
@@ -1059,7 +1059,7 @@ function zt({
         )
       }
     ),
-    r && /* @__PURE__ */ d(Ce, { children: [
+    r && /* @__PURE__ */ d(ve, { children: [
       /* @__PURE__ */ e("circle", { r: "3", fill: a, opacity: 0.85, children: /* @__PURE__ */ e(
         "animateMotion",
         {
@@ -1295,7 +1295,7 @@ function Nt({
     }, children: r })
   ] });
 }
-const ae = Xe(null), Bt = "cubic-bezier(0.34, 1.56, 0.64, 1)", it = 330, nt = 340, Ft = 660;
+const ae = je(null), Bt = "cubic-bezier(0.34, 1.56, 0.64, 1)", it = 330, nt = 340, Ft = 660;
 function dt({
   name: t,
   status: n = "online",
@@ -1317,22 +1317,22 @@ function dt({
   _onComponentClick: v,
   _containerWidth: $
 }) {
-  const b = ve(Ge), k = ve(Ke), A = a ?? k.index, R = s ?? b?.totalSystems ?? 1, L = l ?? b?.carouselRotation ?? 0, z = h ?? b?.viewState ?? "compact", F = c ?? b?.animPhase ?? 0, X = p ?? b?.selectedSystem ?? null, M = f ?? b?.selectedComponent ?? null, te = y ?? b?.rotateY ?? 20, ie = u ?? b?.autoRotateComponents ?? !0, D = g ?? b?.componentScale ?? 0.35, H = m ?? b?.drillZoom ?? 3.3, ne = x ?? b?.onSelectSystem, Se = v ?? b?.onComponentClick, $e = $ ?? b?.containerWidth ?? 950, Q = X === t, N = Q && (z === "expanded" || z === "expanding" && F >= 1), C = !N, ke = ($e - Ft) / 2, oe = it + ke, le = A / R * Math.PI * 2 + L, Ne = 420, Te = 160, Re = oe + Math.cos(le) * Ne, se = 450 + Math.sin(le) * Te, mt = Math.round(se), Be = !Q && (z === "expanding" || z === "expanded"), xt = Be ? 0 : 1, Pe = C ? 0.3 + (Math.sin(le) + 1) * 0.1 : 1, vt = C ? Pe : D, Ae = z === "compact" || z === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", tt = Q && M, Fe = tt ? H : 1, wt = M?.ex ?? 330, St = M?.ey ?? 300, { size: $t = 90, color: kt = "#00e5ff", widthRatio: Rt = 3 } = i ?? {}, Pt = {
+  const b = we(Ge), k = we(Ke), D = a ?? k.index, P = s ?? b?.totalSystems ?? 1, E = l ?? b?.carouselRotation ?? 0, W = h ?? b?.viewState ?? "compact", X = c ?? b?.animPhase ?? 0, j = p ?? b?.selectedSystem ?? null, N = f ?? b?.selectedComponent ?? null, te = y ?? b?.rotateY ?? 20, ie = u ?? b?.autoRotateComponents ?? !0, z = g ?? b?.componentScale ?? 0.35, F = m ?? b?.drillZoom ?? 3.3, ne = x ?? b?.onSelectSystem, $e = v ?? b?.onComponentClick, ke = $ ?? b?.containerWidth ?? 950, V = j === t, M = V && (W === "expanded" || W === "expanding" && X >= 1), R = !M, Re = (ke - Ft) / 2, oe = it + Re, le = D / P * Math.PI * 2 + E, Ne = 420, Te = 160, Pe = oe + Math.cos(le) * Ne, se = 450 + Math.sin(le) * Te, mt = Math.round(se), Be = !V && (W === "expanding" || W === "expanded"), xt = Be ? 0 : 1, Ce = R ? 0.3 + (Math.sin(le) + 1) * 0.1 : 1, vt = R ? Ce : z, Ae = W === "compact" || W === "collapsing" ? "none" : "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)", tt = V && N, Fe = tt ? F : 1, wt = N?.ex ?? 330, St = N?.ey ?? 300, { size: $t = 90, color: kt = "#00e5ff", widthRatio: Rt = 3 } = i ?? {}, Pt = {
     name: t,
-    isSelected: Q,
-    isExpandedPos: N,
-    isCompact: C,
-    animPhase: F,
-    compactCx: Re,
+    isSelected: V,
+    isExpandedPos: M,
+    isCompact: R,
+    animPhase: X,
+    compactCx: Pe,
     compactCy: se,
-    groupScale: Pe,
+    groupScale: Ce,
     effectiveScale: vt,
     transitionValue: Ae,
     rotateY: te,
     autoRotateComponents: ie,
-    onComponentClick: Se,
-    selectedComponentName: M?.name ?? null,
-    expandedOffsetX: ke
+    onComponentClick: $e,
+    selectedComponentName: N?.name ?? null,
+    expandedOffsetX: Re
   };
   return /* @__PURE__ */ e(ae.Provider, { value: Pt, children: /* @__PURE__ */ d(
     "div",
@@ -1346,18 +1346,18 @@ function dt({
         pointerEvents: "none",
         opacity: xt,
         transition: `opacity 0.8s ease, filter 0.5s ease, transform 0.6s ${Bt}`,
-        filter: C && Math.sin(le) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
-        zIndex: Q ? 500 : Be ? 0 : mt,
+        filter: R && Math.sin(le) < -0.5 ? "brightness(0.5) blur(2px)" : "none",
+        zIndex: V ? 500 : Be ? 0 : mt,
         transformOrigin: `${oe}px ${nt}px`,
         transform: tt ? `translate(${-(wt - it) * Fe}px, ${-(St - nt) * Fe}px) scale(${Fe})` : "none"
       },
       children: [
-        C && !Be && /* @__PURE__ */ e(
+        R && !Be && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: Re,
+              left: Pe,
               top: se,
               width: 160,
               height: 180,
@@ -1366,19 +1366,19 @@ function dt({
               cursor: "pointer",
               zIndex: 101
             },
-            onClick: (j) => {
-              j.stopPropagation(), ne?.(t);
+            onClick: (Q) => {
+              Q.stopPropagation(), ne?.(t);
             }
           }
         ),
-        C && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
+        R && (n === "warning" || n === "critical") && /* @__PURE__ */ e(
           "div",
           {
             style: {
               position: "absolute",
-              left: Re,
+              left: Pe,
               top: se - 200,
-              transform: `translate(-50%, -50%) scale(${Pe})`,
+              transform: `translate(-50%, -50%) scale(${Ce})`,
               zIndex: 110,
               pointerEvents: "none",
               animation: "holo-led-blink 1.5s infinite",
@@ -1424,9 +1424,9 @@ function dt({
           {
             style: {
               position: "absolute",
-              left: N ? oe : Re,
-              top: N ? 48 : se - 180,
-              transform: `translate(-50%, -50%) scale(${N ? 1.2 : Pe * 1.5})`,
+              left: M ? oe : Pe,
+              top: M ? 48 : se - 180,
+              transform: `translate(-50%, -50%) scale(${M ? 1.2 : Ce * 1.5})`,
               opacity: 1,
               pointerEvents: "none",
               zIndex: 100,
@@ -1450,23 +1450,23 @@ function dt({
             style: {
               position: "absolute",
               top: 0,
-              left: N ? ke : 0,
+              left: M ? Re : 0,
               width: 660,
               height: 640,
               pointerEvents: "none",
               zIndex: 0,
               transition: Ae
             },
-            children: o.map((j, Ct) => /* @__PURE__ */ e(
+            children: o.map((Q, Ct) => /* @__PURE__ */ e(
               zt,
               {
-                x1: j.from[0],
-                y1: j.from[1],
-                x2: j.to[0],
-                y2: j.to[1],
-                show: Q && F >= (j.visibleAtPhase ?? 0),
-                color: j.color,
-                dur: j.duration
+                x1: Q.from[0],
+                y1: Q.from[1],
+                x2: Q.to[0],
+                y2: Q.to[1],
+                show: V && X >= (Q.visibleAtPhase ?? 0),
+                color: Q.color,
+                dur: Q.duration
               },
               Ct
             ))
@@ -1477,9 +1477,9 @@ function dt({
           {
             style: {
               position: "absolute",
-              left: N ? oe : Re,
-              top: N ? 570 : se + 70,
-              transform: `translate(-50%, -50%) scaleX(${N ? 1 : 0.4}) scaleY(${N ? 1 : 0.6}) scale(${N ? 1 : Pe})`,
+              left: M ? oe : Pe,
+              top: M ? 570 : se + 70,
+              transform: `translate(-50%, -50%) scaleX(${M ? 1 : 0.4}) scaleY(${M ? 1 : 0.6}) scale(${M ? 1 : Ce})`,
               transition: Ae,
               zIndex: 1
             },
@@ -1491,173 +1491,7 @@ function dt({
     }
   ) });
 }
-function T({
-  ex: t,
-  ey: n,
-  compactOffset: o,
-  zIndex: i,
-  children: r,
-  color: a = "#00e5ff",
-  label: s,
-  subLabel: l,
-  delay: h = "0s",
-  componentInfo: c,
-  visibleAtPhase: p = 0,
-  fixedScale: f,
-  bare: y = !1
-}) {
-  const u = ve(ae);
-  if (!u)
-    throw new Error("ServiceNode must be used inside a <Service> component.");
-  const {
-    isExpandedPos: g,
-    animPhase: m,
-    compactCx: x,
-    compactCy: v,
-    groupScale: $,
-    effectiveScale: b,
-    transitionValue: k,
-    onComponentClick: A,
-    selectedComponentName: R,
-    expandedOffsetX: L
-  } = u, F = p === 0 || u.isSelected && m >= p ? 1 : 0, X = x + o.x, M = v + o.y, te = g ? t + L : X, ie = g ? n : M, D = f !== void 0 ? f : u.isCompact ? $ : b, H = !!c && !!R && c.name === R, ne = c?.status ? w[c.status]?.color ?? a : a, Se = c?.status === "offline" ? "#4a6a8a" : ne, $e = c && g && A ? () => A({
-    type: c.type,
-    name: c.name,
-    status: c.status,
-    ex: c.ex ?? t,
-    ey: c.ey ?? n,
-    context: c.context,
-    dialogMetrics: c.dialogMetrics,
-    subComponents: c.subComponents,
-    graphSeries: c.graphSeries
-  }) : void 0;
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        left: te,
-        top: ie,
-        transform: `translate(-50%, -50%) scale(${D})`,
-        opacity: F,
-        zIndex: i,
-        transition: k || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-        pointerEvents: g && F >= 0.5 ? "auto" : "none"
-      },
-      children: y ? r : /* @__PURE__ */ e(
-        Ht,
-        {
-          statusColor: Se,
-          label: s,
-          subLabel: l,
-          delay: h,
-          showLabels: g,
-          isCompact: u.isCompact,
-          onClick: $e,
-          isSelected: H,
-          children: r
-        }
-      )
-    }
-  );
-}
-function Ht({
-  children: t,
-  statusColor: n,
-  label: o,
-  subLabel: i,
-  delay: r = "0s",
-  showLabels: a = !0,
-  isCompact: s = !1,
-  onClick: l,
-  isSelected: h = !1
-}) {
-  const [c, p] = I(!1), f = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: `float-node${l ? " float-node--interactive" : ""}`,
-      onClick: (y) => {
-        l && (y.stopPropagation(), l());
-      },
-      style: {
-        cursor: l ? "pointer" : void 0,
-        transition: "filter 0.3s ease",
-        filter: f
-      },
-      onMouseEnter: () => p(!0),
-      onMouseLeave: () => p(!1),
-      role: l ? "button" : void 0,
-      title: l ? "Click to inspect internal components" : void 0,
-      children: [
-        /* @__PURE__ */ d("div", { className: "float-body", style: { animationDelay: r }, children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: "scan-line",
-              style: {
-                background: `linear-gradient(90deg, transparent 5%, ${n}cc 40%, #fff 50%, ${n}cc 60%, transparent 95%)`,
-                boxShadow: `0 0 8px ${n}`
-              }
-            }
-          ),
-          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && J.isValidElement(t) ? J.cloneElement(t, {
-            _compact: !0
-          }) : t })
-        ] }),
-        /* @__PURE__ */ d(
-          "div",
-          {
-            style: {
-              opacity: a ? 1 : 0,
-              transition: "opacity 0.5s ease"
-            },
-            children: [
-              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 })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-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: o, fontSize: 10, lineHeight: 1 }, children: "◄" }),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: "sync-line",
-          style: {
-            background: `linear-gradient(90deg, ${o}44, ${o}, ${o}44)`,
-            boxShadow: `0 0 8px ${o}55`
-          }
-        }
-      ),
-      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "►" })
-    ] }),
-    /* @__PURE__ */ e(
-      "div",
-      {
-        className: "sync-status",
-        style: {
-          color: o,
-          animation: t ? "none" : "holo-led-blink 1s linear infinite"
-        },
-        children: t ? "SYNCED" : "LAG"
-      }
-    ),
-    /* @__PURE__ */ d("div", { className: "sync-latency", style: { color: o + "88" }, children: [
-      n,
-      "ms ",
-      t ? "replication" : "behind"
-    ] })
-  ] });
-}
-function W({
+function I({
   ex: t,
   ey: n,
   status: o,
@@ -1669,20 +1503,20 @@ function W({
   align: h = "right",
   internalRef: c
 }) {
-  const p = ve(ae), f = p?.expandedOffsetX ?? 0;
+  const p = we(ae), f = p?.expandedOffsetX ?? 0;
   if (o === "online") return null;
   const y = l && !!p?.isExpandedPos, u = w[o]?.color ?? w.warning.color, g = Math.abs(a) > Math.abs(s), m = t + f + (g ? Math.sign(a) * 45 : 0), x = n + (g ? 0 : Math.sign(s) * 40), v = t + f + a, $ = n + s;
   let b = "";
   if (g) {
-    const L = m + (v - m) / 2;
-    b = `M ${m} ${x} L ${L} ${x} L ${L} ${$} L ${v} ${$}`;
+    const E = m + (v - m) / 2;
+    b = `M ${m} ${x} L ${E} ${x} L ${E} ${$} L ${v} ${$}`;
   } else {
-    const L = x + ($ - x) / 2;
-    b = `M ${m} ${x} L ${m} ${L} L ${v} ${L} L ${v} ${$}`;
+    const E = x + ($ - x) / 2;
+    b = `M ${m} ${x} L ${m} ${E} L ${v} ${E} L ${v} ${$}`;
   }
   let k = "translate(0, -50%)";
   h === "left" && (k = "translate(-100%, -50%)"), h === "top" && (k = "translate(-50%, -100%)"), h === "bottom" && (k = "translate(-50%, 0)");
-  const A = h === "left" ? -8 : h === "right" ? 8 : 0, R = h === "top" ? -8 : h === "bottom" ? 8 : 0;
+  const D = h === "left" ? -8 : h === "right" ? 8 : 0, P = h === "top" ? -8 : h === "bottom" ? 8 : 0;
   return /* @__PURE__ */ d(
     "div",
     {
@@ -1731,8 +1565,8 @@ function W({
               left: v,
               top: $,
               transform: k,
-              marginLeft: A,
-              marginTop: R,
+              marginLeft: D,
+              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}`,
@@ -1804,7 +1638,191 @@ function W({
     }
   );
 }
-const q = 140, U = 240, Z = 160, de = qe(q, U, Z);
+function A({
+  ex: t,
+  ey: n,
+  compactOffset: o,
+  zIndex: i,
+  children: r,
+  color: a = "#00e5ff",
+  label: s,
+  subLabel: l,
+  delay: h = "0s",
+  componentInfo: c,
+  visibleAtPhase: p = 0,
+  fixedScale: f,
+  bare: y = !1,
+  alert: u
+}) {
+  const g = we(ae);
+  if (!g)
+    throw new Error("ServiceNode must be used inside a <Service> component.");
+  const {
+    isExpandedPos: m,
+    animPhase: x,
+    compactCx: v,
+    compactCy: $,
+    groupScale: b,
+    effectiveScale: k,
+    transitionValue: D,
+    onComponentClick: P,
+    selectedComponentName: E,
+    expandedOffsetX: W
+  } = g, j = p === 0 || g.isSelected && x >= p ? 1 : 0, N = v + o.x, te = $ + o.y, ie = m ? t + W : N, z = m ? n : te, F = f !== void 0 ? f : g.isCompact ? b : k, ne = !!c && !!E && c.name === E, $e = c?.status ? w[c.status]?.color ?? a : a, ke = c?.status === "offline" ? "#4a6a8a" : $e, V = c && m && P ? () => P({
+    type: c.type,
+    name: c.name,
+    status: c.status,
+    ex: c.ex ?? t,
+    ey: c.ey ?? n,
+    context: c.context,
+    dialogMetrics: c.dialogMetrics,
+    subComponents: c.subComponents,
+    graphSeries: c.graphSeries
+  }) : void 0, M = c?.status ?? "online", R = c?.name ?? s ?? "";
+  return /* @__PURE__ */ d(ve, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: ie,
+          top: z,
+          transform: `translate(-50%, -50%) scale(${F})`,
+          opacity: j,
+          zIndex: i,
+          transition: D || "all 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+          pointerEvents: m && j >= 0.5 ? "auto" : "none"
+        },
+        children: y ? r : /* @__PURE__ */ e(
+          Ht,
+          {
+            statusColor: ke,
+            label: s,
+            subLabel: l,
+            delay: h,
+            showLabels: m,
+            isCompact: g.isCompact,
+            onClick: V,
+            isSelected: ne,
+            children: r
+          }
+        )
+      }
+    ),
+    u && /* @__PURE__ */ e(
+      I,
+      {
+        ex: t,
+        ey: n,
+        status: M,
+        title: R,
+        msg: u.msg,
+        offsetX: u.offsetX ?? 110,
+        offsetY: u.offsetY ?? -30,
+        align: u.align ?? "right",
+        internalRef: u.internalRef,
+        isVisible: !0
+      }
+    )
+  ] });
+}
+function Ht({
+  children: t,
+  statusColor: n,
+  label: o,
+  subLabel: i,
+  delay: r = "0s",
+  showLabels: a = !0,
+  isCompact: s = !1,
+  onClick: l,
+  isSelected: h = !1
+}) {
+  const [c, p] = L(!1), f = h ? `brightness(1.5) drop-shadow(0 0 24px ${n}cc) drop-shadow(0 0 8px ${n}88)` : c && l ? `brightness(1.2) drop-shadow(0 0 12px ${n}77)` : "";
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: `float-node${l ? " float-node--interactive" : ""}`,
+      onClick: (y) => {
+        l && (y.stopPropagation(), l());
+      },
+      style: {
+        cursor: l ? "pointer" : void 0,
+        transition: "filter 0.3s ease",
+        filter: f
+      },
+      onMouseEnter: () => p(!0),
+      onMouseLeave: () => p(!1),
+      role: l ? "button" : void 0,
+      title: l ? "Click to inspect internal components" : void 0,
+      children: [
+        /* @__PURE__ */ d("div", { className: "float-body", style: { animationDelay: r }, children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "scan-line",
+              style: {
+                background: `linear-gradient(90deg, transparent 5%, ${n}cc 40%, #fff 50%, ${n}cc 60%, transparent 95%)`,
+                boxShadow: `0 0 8px ${n}`
+              }
+            }
+          ),
+          /* @__PURE__ */ e("div", { style: s ? { background: "#040c1a", borderRadius: 2 } : void 0, children: s && J.isValidElement(t) ? J.cloneElement(t, {
+            _compact: !0
+          }) : t })
+        ] }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            style: {
+              opacity: a ? 1 : 0,
+              transition: "opacity 0.5s ease"
+            },
+            children: [
+              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 })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+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: o, fontSize: 10, lineHeight: 1 }, children: "◄" }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "sync-line",
+          style: {
+            background: `linear-gradient(90deg, ${o}44, ${o}, ${o}44)`,
+            boxShadow: `0 0 8px ${o}55`
+          }
+        }
+      ),
+      /* @__PURE__ */ e("span", { style: { color: o, fontSize: 10, lineHeight: 1 }, children: "►" })
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "sync-status",
+        style: {
+          color: o,
+          animation: t ? "none" : "holo-led-blink 1s linear infinite"
+        },
+        children: t ? "SYNCED" : "LAG"
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "sync-latency", style: { color: o + "88" }, children: [
+      n,
+      "ms ",
+      t ? "replication" : "behind"
+    ] })
+  ] });
+}
+const q = 140, H = 240, Z = 160, de = qe(q, H, Z);
 function Ut({
   cfg: t,
   name: n,
@@ -1825,8 +1843,8 @@ function Ut({
     {
       style: {
         width: q,
-        height: U,
-        background: a ? we : Qe,
+        height: H,
+        background: a ? Se : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -2223,7 +2241,7 @@ function Yt() {
     {
       style: {
         width: q,
-        height: U,
+        height: H,
         background: "linear-gradient(180deg, #040c1a 0%, #030810 100%)",
         position: "relative",
         overflow: "hidden",
@@ -2331,14 +2349,18 @@ function Yt() {
     }
   );
 }
-function ot({ side: t, color: n, brandLabel: o }) {
+function ot({
+  side: t,
+  color: n,
+  brandLabel: o
+}) {
   const i = t === "right";
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: Z,
-        height: U,
+        height: H,
         background: i ? "linear-gradient(90deg, #040c1c 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #040c1c 100%)",
         position: "relative",
         overflow: "hidden"
@@ -2357,7 +2379,7 @@ function ot({ side: t, color: n, brandLabel: o }) {
             }
           }
         ),
-        [8, U - 20].map((r) => /* @__PURE__ */ e(
+        [8, H - 20].map((r) => /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -2379,8 +2401,8 @@ function ot({ side: t, color: n, brandLabel: o }) {
           {
             style: {
               position: "absolute",
-              top: U * 0.35,
-              bottom: U * 0.15,
+              top: H * 0.35,
+              bottom: H * 0.15,
               left: i ? 22 : 18,
               right: i ? 18 : 22,
               display: "flex",
@@ -2408,7 +2430,7 @@ function ot({ side: t, color: n, brandLabel: o }) {
           {
             style: {
               position: "absolute",
-              top: U * 0.18,
+              top: H * 0.18,
               left: i ? 12 : Z - 78,
               fontSize: 7,
               color: "#1a3050",
@@ -2520,7 +2542,7 @@ function ue({
   brandLabel: c = "BUSAUD",
   _compact: p
 }) {
-  const [f, y] = I(n), u = ee(0), g = ee(0);
+  const [f, y] = L(n), u = ee(0), g = ee(0);
   Ee(() => {
     if (!r) {
       y(n);
@@ -2539,7 +2561,7 @@ function ue({
     {
       style: {
         width: q * i,
-        height: U * i,
+        height: H * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -2592,7 +2614,7 @@ function ue({
             style: {
               position: "absolute",
               width: q * 1.4 * i,
-              height: U * 0.8 * i,
+              height: H * 0.8 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(45 * i)}px)`,
               pointerEvents: "none",
@@ -2616,7 +2638,7 @@ function ue({
               {
                 style: {
                   width: q,
-                  height: U,
+                  height: H,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
@@ -2658,7 +2680,7 @@ function ue({
     }
   );
 }
-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);
+const Xe = 12, re = 55, _ = re * 2, he = 52, Ze = 10, He = 3 * he + 2 * Ze, ce = 2 * Math.PI * re / Xe, Ue = Array.from({ length: Xe }, (t, n) => n / Xe * 360);
 function Ye(t) {
   return Math.cos(t * Math.PI / 180) * 0.42 + 0.58;
 }
@@ -2670,7 +2692,7 @@ function _t({
   capacity: r,
   compact: a
 }) {
-  return /* @__PURE__ */ d(Ce, { children: [
+  return /* @__PURE__ */ d(ve, { children: [
     Ue.map((s, l) => {
       const h = Ye(s), c = l === 0, p = Math.round(4 + h * 9), f = Math.round(12 + h * 22), y = Math.round(28 + h * 44), u = Math.round(h * 0.55 * 255).toString(16).padStart(2, "0");
       return /* @__PURE__ */ e(
@@ -2688,7 +2710,7 @@ function _t({
             borderLeft: `1px solid ${o.color}${u}`,
             boxShadow: c ? `inset 0 0 18px ${o.color}28` : "none"
           },
-          children: c && /* @__PURE__ */ d(Ce, { children: [
+          children: c && /* @__PURE__ */ d(ve, { children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -2883,7 +2905,7 @@ function Oe({
   // connections = 284,
   _compact: l
 }) {
-  const [h, c] = I(n), p = ee(0), f = ee(0);
+  const [h, c] = L(n), p = ee(0), f = ee(0);
   Ee(() => {
     if (!r) {
       c(n);
@@ -3013,8 +3035,8 @@ function Oe({
     }
   );
 }
-const G = 190, Y = 72, be = 120, pe = qe(G, Y, be);
-function jt({
+const G = 190, U = 72, be = 120, pe = qe(G, U, be);
+function Xt({
   cfg: t,
   name: n,
   traffic: o,
@@ -3027,8 +3049,8 @@ function jt({
     {
       style: {
         width: G,
-        height: Y,
-        background: r ? we : Qe,
+        height: U,
+        background: r ? Se : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3276,13 +3298,13 @@ function jt({
     }
   );
 }
-function Xt() {
+function jt() {
   return /* @__PURE__ */ d(
     "div",
     {
       style: {
         width: G,
-        height: Y,
+        height: U,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3297,7 +3319,7 @@ function Xt() {
           {
             style: {
               width: 40,
-              height: Y - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3353,7 +3375,7 @@ function Xt() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: Y - 16,
+              height: U - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3370,7 +3392,7 @@ function rt({ side: t, color: n }) {
     {
       style: {
         width: be,
-        height: Y,
+        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"
@@ -3394,8 +3416,8 @@ function rt({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: Y * 0.25,
-              bottom: Y * 0.25,
+              top: U * 0.25,
+              bottom: U * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -3492,7 +3514,7 @@ function pt({
   activeRoutes: h = 12,
   _compact: c
 }) {
-  const [p, f] = I(n), y = ee(0), u = ee(0);
+  const [p, f] = L(n), y = ee(0), u = ee(0);
   Ee(() => {
     if (!r) {
       f(n);
@@ -3511,7 +3533,7 @@ function pt({
     {
       style: {
         width: G * i,
-        height: Y * i,
+        height: U * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -3572,7 +3594,7 @@ function pt({
             style: {
               position: "absolute",
               width: G * 1.3 * i,
-              height: Y * 2 * i,
+              height: U * 2 * i,
               background: `radial-gradient(ellipse, ${g.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
@@ -3596,7 +3618,7 @@ function pt({
               {
                 style: {
                   width: G,
-                  height: Y,
+                  height: U,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${p}deg) rotateZ(${o}deg)`,
@@ -3604,7 +3626,7 @@ function pt({
                 },
                 children: [
                   /* @__PURE__ */ e("div", { style: pe.front, children: /* @__PURE__ */ e(
-                    jt,
+                    Xt,
                     {
                       cfg: g,
                       name: s,
@@ -3613,7 +3635,7 @@ function pt({
                       compact: c
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { style: pe.back, children: /* @__PURE__ */ e(Xt, {}) }),
+                  /* @__PURE__ */ e("div", { style: pe.back, children: /* @__PURE__ */ e(jt, {}) }),
                   /* @__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 }) }),
@@ -3627,7 +3649,7 @@ function pt({
     }
   );
 }
-const K = 190, V = 72, ge = 120, fe = qe(K, V, ge), 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)" },
@@ -3647,8 +3669,8 @@ function qt({
     {
       style: {
         width: K,
-        height: V,
-        background: a ? we : Qe,
+        height: Y,
+        background: a ? Se : Qe,
         position: "relative",
         overflow: "hidden",
         fontFamily: "'Courier New', monospace",
@@ -3898,7 +3920,7 @@ function Gt() {
     {
       style: {
         width: K,
-        height: V,
+        height: Y,
         background: "linear-gradient(180deg, #040c1a, #030810)",
         position: "relative",
         overflow: "hidden",
@@ -3913,7 +3935,7 @@ function Gt() {
           {
             style: {
               width: 40,
-              height: V - 16,
+              height: Y - 16,
               background: "#020710",
               border: "1px solid #1a2d40",
               borderRadius: 2,
@@ -3969,7 +3991,7 @@ function Gt() {
             style: {
               marginLeft: "auto",
               width: 12,
-              height: V - 16,
+              height: Y - 16,
               background: "#020710",
               border: "1px solid #1a3050",
               borderRadius: 1
@@ -3986,7 +4008,7 @@ function lt({ side: t, color: n }) {
     {
       style: {
         width: ge,
-        height: V,
+        height: Y,
         background: t === "right" ? "linear-gradient(90deg, #04091a 0%, #071428 60%, #040c1c 100%)" : "linear-gradient(90deg, #040c1c 0%, #071428 40%, #04091a 100%)",
         position: "relative",
         overflow: "hidden"
@@ -4010,8 +4032,8 @@ function lt({ side: t, color: n }) {
           {
             style: {
               position: "absolute",
-              top: V * 0.25,
-              bottom: V * 0.25,
+              top: Y * 0.25,
+              bottom: Y * 0.25,
               left: 14,
               right: 14,
               display: "flex",
@@ -4109,7 +4131,7 @@ function Zt({
   instances: c = 3,
   _compact: p
 }) {
-  const [f, y] = I(n), u = ee(0), g = ee(0);
+  const [f, y] = L(n), u = ee(0), g = ee(0);
   Ee(() => {
     if (!r) {
       y(n);
@@ -4128,7 +4150,7 @@ function Zt({
     {
       style: {
         width: K * i,
-        height: V * i,
+        height: Y * i,
         position: "relative",
         display: "flex",
         alignItems: "center",
@@ -4189,7 +4211,7 @@ function Zt({
             style: {
               position: "absolute",
               width: K * 1.3 * i,
-              height: V * 2 * i,
+              height: Y * 2 * i,
               background: `radial-gradient(ellipse, ${m.glow} 0%, transparent 65%)`,
               filter: `blur(${Math.round(40 * i)}px)`,
               pointerEvents: "none",
@@ -4213,7 +4235,7 @@ function Zt({
               {
                 style: {
                   width: K,
-                  height: V,
+                  height: Y,
                   position: "relative",
                   transformStyle: "preserve-3d",
                   transform: `rotateX(${t}deg) rotateY(${f}deg) rotateZ(${o}deg)`,
@@ -4357,7 +4379,7 @@ function ft({ status: t = "online", scale: n = 1 }) {
     }
   );
 }
-function P(t, n, o = 24) {
+function C(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));
@@ -4457,34 +4479,34 @@ function ti(t, n) {
   if (t === "server") {
     const o = n.cpuLoad ?? 50, i = n.memLoad ?? 60;
     return [
-      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: P(o, 15) },
-      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: P(o * 0.7, 12) },
-      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: P(i, 18) },
-      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: P(i * 0.85, 14) },
-      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: P(40, 25) },
-      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: P(35, 20) },
-      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: P(30, 22) },
-      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: P(55, 20) }
+      { id: "cpu", label: "CPU-0", unit: "%", color: "#00e5ff", data: C(o, 15) },
+      { id: "cpu1", label: "CPU-1", unit: "%", color: "#00e5ff", data: C(o * 0.7, 12) },
+      { id: "heap0", label: "HEAP-0", unit: "%", color: "#8855ee", data: C(i, 18) },
+      { id: "heap1", label: "HEAP-1", unit: "%", color: "#8855ee", data: C(i * 0.85, 14) },
+      { id: "drive1", label: "DRIVE-1 I/O", unit: "%", color: "#ff8c00", data: C(40, 25) },
+      { id: "drive2", label: "DRIVE-2 I/O", unit: "%", color: "#ff8c00", data: C(35, 20) },
+      { id: "drive3", label: "DRIVE-3 I/O", unit: "%", color: "#ff8c00", data: C(30, 22) },
+      { id: "thread", label: "THREAD-POOL", unit: "%", color: "#22aaff", data: C(55, 20) }
     ];
   }
   if (t === "dispatcher" || t === "messageServer") {
     const o = n.traffic ?? n.queueDepth ?? 50;
     return [
-      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: P(o, 20) },
-      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: P(60, 25) },
-      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: P(45, 20) },
-      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: P(70, 30) },
-      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: P(o * 0.9, 15) }
+      { id: "traffic", label: "TRAFFIC", unit: "%", color: "#00e5ff", data: C(o, 20) },
+      { id: "port1", label: "PORT-1", unit: "kbps", color: "#22aaff", data: C(60, 25) },
+      { id: "port2", label: "PORT-2", unit: "kbps", color: "#22aaff", data: C(45, 20) },
+      { id: "port3", label: "PORT-3", unit: "kbps", color: "#22aaff", data: C(70, 30) },
+      { id: "worker", label: "WORKER", unit: "%", color: "#bb55ff", data: C(o * 0.9, 15) }
     ];
   }
   if (t === "database") {
     const o = n.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(o, 15) },
-      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: P(75, 12) }
+      { id: "platter0", label: "PLATTER-0 I/O", unit: "%", color: "#ff8c00", data: C(40, 20) },
+      { id: "platter1", label: "PLATTER-1 I/O", unit: "%", color: "#ff8c00", data: C(55, 25) },
+      { id: "platter2", label: "PLATTER-2 I/O", unit: "%", color: "#ff8c00", data: C(35, 18) },
+      { id: "connpool", label: "CONN-POOL", unit: "%", color: "#00e5ff", data: C(o, 15) },
+      { id: "cache", label: "QUERY-CACHE", unit: "%", color: "#00ff88", data: C(75, 12) }
     ];
   }
   return [];
@@ -4505,7 +4527,7 @@ function ht({
       style: {
         width: t,
         height: n,
-        background: we,
+        background: Se,
         position: "relative",
         overflow: "hidden",
         borderRadius: 2,
@@ -4595,7 +4617,7 @@ function De({
         style: {
           width: 52,
           height: 36,
-          background: we,
+          background: Se,
           position: "relative",
           borderRadius: 2,
           border: `1px solid ${t}55`,
@@ -4840,7 +4862,7 @@ function ut({
       style: {
         width: 48,
         height: 28,
-        background: we,
+        background: Se,
         position: "relative",
         borderRadius: 2,
         border: `1px solid ${t}44`,
@@ -5158,7 +5180,7 @@ function ii(t, n, o, i) {
     }
   ] : [];
 }
-const E = "cubic-bezier(0.34, 1.56, 0.64, 1)", ni = "cubic-bezier(0.16, 1, 0.3, 1)";
+const T = "cubic-bezier(0.34, 1.56, 0.64, 1)", ni = "cubic-bezier(0.16, 1, 0.3, 1)";
 function oi({ items: t, revealPhase: n }) {
   return /* @__PURE__ */ e(
     "div",
@@ -5177,7 +5199,7 @@ function oi({ 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 ${E} ${i * 0.06}s, transform 0.45s ${E} ${i * 0.06}s`
+            transition: `opacity 0.4s ${T} ${i * 0.06}s, transform 0.45s ${T} ${i * 0.06}s`
           },
           children: o.element
         },
@@ -5311,7 +5333,7 @@ function ri({
             style: {
               opacity: r >= 0.2 + f * 0.08 ? 1 : 0,
               transform: `scale(${r >= 0.2 + f * 0.08 ? 1 : 0.6})`,
-              transition: `opacity 0.4s ${E} ${f * 0.06}s, transform 0.45s ${E} ${f * 0.06}s`
+              transition: `opacity 0.4s ${T} ${f * 0.06}s, transform 0.45s ${T} ${f * 0.06}s`
             },
             children: y
           },
@@ -5329,7 +5351,7 @@ function ri({
           style: {
             opacity: r >= 0.25 + c * 0.04 ? 1 : 0,
             transform: `scale(${r >= 0.25 + c * 0.04 ? 1 : 0.5})`,
-            transition: `opacity 0.35s ${E} ${c * 0.04}s, transform 0.4s ${E} ${c * 0.04}s`
+            transition: `opacity 0.35s ${T} ${c * 0.04}s, transform 0.4s ${T} ${c * 0.04}s`
           },
           children: /* @__PURE__ */ e(B, { color: a, label: `PORT-${c + 1}`, status: p?.status })
         },
@@ -5355,7 +5377,7 @@ function ri({
                 style: {
                   opacity: r >= 0.7 ? 1 : 0,
                   transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${E} 0.3s`
+                  transition: `all 0.4s ${T} 0.3s`
                 },
                 children: /* @__PURE__ */ e(O, { color: a, label: "HTTP-WORKER", status: i[8]?.status })
               }
@@ -5366,7 +5388,7 @@ function ri({
                 style: {
                   opacity: r >= 0.8 ? 1 : 0,
                   transform: `scale(${r >= 0.8 ? 1 : 0.6})`,
-                  transition: `all 0.4s ${E} 0.4s`
+                  transition: `all 0.4s ${T} 0.4s`
                 },
                 children: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "HTTPS-WORKER", status: i[9]?.status })
               }
@@ -5395,7 +5417,7 @@ function ri({
               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 ${E} ${l * 0.08}s`
+                transition: `all 0.4s ${T} ${l * 0.08}s`
               },
               children: /* @__PURE__ */ e(B, { color: "#bb55ff", label: `INST-${l}`, status: i[l]?.status })
             },
@@ -5407,7 +5429,7 @@ function ri({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${E} 0.25s`
+                transition: `all 0.4s ${T} 0.25s`
               },
               children: /* @__PURE__ */ e(O, { color: "#bb55ff", label: "QUEUE-0", status: i[3]?.status })
             }
@@ -5418,7 +5440,7 @@ function ri({
               style: {
                 opacity: r >= 0.7 + (l - 4) * 0.08 ? 1 : 0,
                 transform: `scale(${r >= 0.7 ? 1 : 0.6})`,
-                transition: `all 0.4s ${E} ${0.35 + (l - 4) * 0.05}s`
+                transition: `all 0.4s ${T} ${0.35 + (l - 4) * 0.05}s`
               },
               children: /* @__PURE__ */ e(
                 O,
@@ -5454,7 +5476,7 @@ function ri({
               style: {
                 opacity: r >= 0.2 + h * 0.12 ? 1 : 0,
                 transform: `scale(${r >= 0.2 + h * 0.12 ? 1 : 0.5})`,
-                transition: `all 0.45s ${E} ${h * 0.1}s`
+                transition: `all 0.45s ${T} ${h * 0.1}s`
               },
               children: /* @__PURE__ */ e(
                 Ie,
@@ -5474,7 +5496,7 @@ function ri({
               style: {
                 opacity: r >= 0.6 ? 1 : 0,
                 transform: `scale(${r >= 0.6 ? 1 : 0.6})`,
-                transition: `all 0.4s ${E} 0.3s`
+                transition: `all 0.4s ${T} 0.3s`
               },
               children: /* @__PURE__ */ e(O, { color: s, label: "CONN-POOL", status: i[3]?.status })
             }
@@ -5485,7 +5507,7 @@ function ri({
               style: {
                 opacity: r >= 0.75 ? 1 : 0,
                 transform: `scale(${r >= 0.75 ? 1 : 0.6})`,
-                transition: `all 0.4s ${E} 0.4s`
+                transition: `all 0.4s ${T} 0.4s`
               },
               children: /* @__PURE__ */ e(O, { color: "#00ff88", label: "QUERY-CACHE", status: i[4]?.status })
             }
@@ -5580,7 +5602,7 @@ function wi({
                           borderRight: `2px solid ${c}44`,
                           boxShadow: "4px 0 32px rgba(0,0,0,0.6)",
                           transform: `translateX(${f})`,
-                          transition: `transform 0.7s ${E}`
+                          transition: `transform 0.7s ${T}`
                         }
                       }
                     ),
@@ -5595,7 +5617,7 @@ function wi({
                           borderLeft: `2px solid ${c}44`,
                           boxShadow: "-4px 0 32px rgba(0,0,0,0.6)",
                           transform: `translateX(${y})`,
-                          transition: `transform 0.7s ${E}`
+                          transition: `transform 0.7s ${T}`
                         }
                       }
                     )
@@ -5618,7 +5640,7 @@ function wi({
                     display: "flex",
                     flexDirection: "column",
                     opacity: u >= 0.1 ? 1 : 0,
-                    transition: `opacity 0.5s ${E} 0.2s`
+                    transition: `opacity 0.5s ${T} 0.2s`
                   },
                   children: [
                     /* @__PURE__ */ d(
@@ -5737,28 +5759,28 @@ function Si({
   fontFamily: s,
   children: l
 }) {
-  const [h] = I(20), [c] = I(!1), [p] = I(!0), [f] = I(0.45), [y] = I(3.3), [u, g] = I("compact"), [m, x] = I(0), [v, $] = I(null), [b, k] = I(null), [A, R] = I(0), L = (C) => {
-    u === "compact" && ($(C), g("expanding"), x(0), setTimeout(() => x(1), 50), setTimeout(() => x(2), 800), setTimeout(() => x(3), 1200), setTimeout(() => x(4), 1600), setTimeout(() => x(5), 2e3), setTimeout(() => {
+  const [h] = L(20), [c] = L(!1), [p] = L(!0), [f] = L(0.45), [y] = L(3.3), [u, g] = L("compact"), [m, x] = L(0), [v, $] = L(null), [b, k] = L(null), [D, P] = L(0), E = (R) => {
+    u === "compact" && ($(R), 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));
-  }, z = () => {
-    b ? (k(null), R(0)) : u === "expanded" && (g("collapsing"), x(0), $(null), setTimeout(() => {
-      g((C) => C === "collapsing" ? "compact" : C);
+  }, W = () => {
+    b ? (k(null), P(0)) : u === "expanded" && (g("collapsing"), x(0), $(null), setTimeout(() => {
+      g((R) => R === "collapsing" ? "compact" : R);
     }, 1e3));
-  }, F = (C) => {
-    k(C), R(0);
+  }, X = (R) => {
+    k(R), P(0);
   };
   J.useEffect(() => {
     if (!b) return;
-    const C = performance.now(), ke = 1200, oe = () => {
-      const Ne = performance.now() - C, Te = Math.min(1, Ne / ke);
-      R(Te), Te < 1 && requestAnimationFrame(oe);
+    const R = performance.now(), Re = 1200, oe = () => {
+      const Ne = performance.now() - R, Te = Math.min(1, Ne / Re);
+      P(Te), Te < 1 && requestAnimationFrame(oe);
     }, le = requestAnimationFrame(oe);
     return () => cancelAnimationFrame(le);
   }, [b]);
-  const X = () => {
-    k(null), R(0);
-  }, M = o.find((C) => C.name === v), te = M?.status ?? "online", ie = M?.dbSync ?? !0, D = M?.metrics, H = M?.alerts, ne = 330, Se = 340, $e = b ? 1.15 : 1, Q = b ? -(b.ex - ne) * 0.06 : 0, N = b ? -(b.ey - Se) * 0.06 : 0;
+  const j = () => {
+    k(null), P(0);
+  }, N = o.find((R) => R.name === v), te = N?.status ?? "online", ie = N?.dbSync ?? !0, z = N?.metrics, F = N?.alerts, ne = 330, $e = 340, ke = b ? 1.15 : 1, V = b ? -(b.ex - ne) * 0.06 : 0, M = b ? -(b.ey - $e) * 0.06 : 0;
   return /* @__PURE__ */ d("div", { className: "app", style: s ? { fontFamily: s } : void 0, children: [
     /* @__PURE__ */ e(
       "div",
@@ -5773,7 +5795,7 @@ function Si({
           backgroundPosition: "center center",
           backgroundRepeat: "no-repeat",
           transition: "transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
-          transform: `translate(${Q}px, ${N}px) scale(${$e})`,
+          transform: `translate(${V}px, ${M}px) scale(${ke})`,
           willChange: "transform"
         }
       }
@@ -5792,7 +5814,7 @@ function Si({
         style: {
           cursor: u === "expanded" ? "zoom-out" : "default"
         },
-        onClick: z,
+        onClick: W,
         children: /* @__PURE__ */ e(
           Wt,
           {
@@ -5800,7 +5822,7 @@ function Si({
             animPhase: m,
             selectedSystem: v,
             selectedComponent: b,
-            drillAnimPhase: A,
+            drillAnimPhase: D,
             rotateY: h,
             autoRotateComponents: c,
             componentScale: f,
@@ -5808,14 +5830,14 @@ function Si({
             autoRotateCarousel: p,
             carouselSpeed: a,
             logoUrl: r,
-            onSelectSystem: L,
-            onBackgroundClick: z,
-            onComponentClick: F,
-            onCloseDrill: X,
+            onSelectSystem: E,
+            onBackgroundClick: W,
+            onComponentClick: X,
+            onCloseDrill: j,
             selectedSystemStatus: te,
             selectedSystemDbSync: ie,
-            selectedSystemMetrics: D,
-            selectedSystemAlerts: H,
+            selectedSystemMetrics: z,
+            selectedSystemAlerts: F,
             children: l
           }
         )
@@ -5984,9 +6006,9 @@ const si = [
 ];
 function di({ config: t }) {
   const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { wdStatus: r, msStatus: a, srv1Status: s, srv2Status: l, srv3Status: h, pdbStatus: c, sdbStatus: p, dbSync: f } = t;
-  return /* @__PURE__ */ d(Ce, { children: [
+  return /* @__PURE__ */ d(ve, { children: [
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 330,
         ey: 120,
@@ -5998,7 +6020,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 220,
         ey: 260,
@@ -6031,7 +6053,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 440,
         ey: 260,
@@ -6065,7 +6087,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 165,
         ey: 390,
@@ -6098,7 +6120,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 330,
         ey: 390,
@@ -6131,7 +6153,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 495,
         ey: 390,
@@ -6164,7 +6186,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 200,
         ey: 520,
@@ -6197,7 +6219,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 460,
         ey: 520,
@@ -6230,7 +6252,7 @@ function di({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 330,
         ey: 520,
@@ -6249,7 +6271,7 @@ function ci({ config: t }) {
   const n = J.useContext(ae), { wdStatus: o, msStatus: i, srv1Status: r, srv2Status: a, srv3Status: s, pdbStatus: l, sdbStatus: h, dbSync: c } = t, p = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 220,
         ey: 260,
@@ -6264,7 +6286,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 440,
         ey: 260,
@@ -6279,7 +6301,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 165,
         ey: 390,
@@ -6294,7 +6316,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 330,
         ey: 390,
@@ -6309,7 +6331,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 495,
         ey: 390,
@@ -6324,7 +6346,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 200,
         ey: 520,
@@ -6339,7 +6361,7 @@ function ci({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 460,
         ey: 520,
@@ -6354,7 +6376,7 @@ function ci({ config: t }) {
       }
     ),
     !c && /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 330,
         ey: 520,
@@ -6435,9 +6457,9 @@ const pi = [
 ];
 function fi({ config: t }) {
   const n = J.useContext(ae), o = n?.rotateY ?? 20, i = n?.autoRotateComponents ?? !0, { dispStatus: r, srv1Status: a, srv2Status: s, srv3Status: l, pdbStatus: h, sdbStatus: c, dbSync: p } = t;
-  return /* @__PURE__ */ d(Ce, { children: [
+  return /* @__PURE__ */ d(ve, { children: [
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 330,
         ey: 120,
@@ -6449,7 +6471,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 330,
         ey: 260,
@@ -6482,7 +6504,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 165,
         ey: 390,
@@ -6515,7 +6537,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 330,
         ey: 390,
@@ -6548,7 +6570,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 495,
         ey: 390,
@@ -6581,7 +6603,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 200,
         ey: 520,
@@ -6614,7 +6636,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 460,
         ey: 520,
@@ -6647,7 +6669,7 @@ function fi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      T,
+      A,
       {
         ex: 330,
         ey: 520,
@@ -6666,7 +6688,7 @@ function hi({ config: t }) {
   const n = J.useContext(ae), { dispStatus: o, srv1Status: i, srv2Status: r, srv3Status: a, pdbStatus: s, sdbStatus: l, dbSync: h } = t, c = n?.isSelected && n?.isExpandedPos;
   return n?.isSelected ? /* @__PURE__ */ d("div", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 330,
         ey: 260,
@@ -6681,7 +6703,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 165,
         ey: 390,
@@ -6696,7 +6718,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 330,
         ey: 390,
@@ -6711,7 +6733,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 495,
         ey: 390,
@@ -6726,7 +6748,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 200,
         ey: 520,
@@ -6741,7 +6763,7 @@ function hi({ config: t }) {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 460,
         ey: 520,
@@ -6756,7 +6778,7 @@ function hi({ config: t }) {
       }
     ),
     !h && /* @__PURE__ */ e(
-      W,
+      I,
       {
         ex: 330,
         ey: 520,
@@ -6799,14 +6821,14 @@ export {
   mi as HOLO_BLUE,
   yi as HOLO_CYAN,
   Qe as HOLO_GLASS,
-  we as HOLO_SURFACE,
+  Se as HOLO_SURFACE,
   ei as HistoricalGraphPanel,
   Nt as HoloBase,
   ft as Human3D,
   We as Memory3D,
   Zt as MessageServer3D,
   ut as NetworkBlock3D,
-  W as NodeCallout,
+  I as NodeCallout,
   Ie as Platter3D,
   B as Port3D,
   Ri as SAPService,
@@ -6816,7 +6838,7 @@ export {
   dt as Service,
   ae as ServiceContext,
   At as ServiceDialog,
-  T as ServiceNode,
+  A as ServiceNode,
   zt as SvgConnection,
   ct as SyncBridge,
   O as ThreadPool3D,