@zerops/web-components 0.2.2 → 0.3.0

package/network-diagram.js

@@ -1,9 +1,9 @@
-var Pe = (t) => {
+var Oe = (t) => {
   throw TypeError(t);
 };
-var ae = (t, e, n) => e.has(t) || Pe("Cannot " + n);
-var d = (t, e, n) => (ae(t, e, "read from private field"), n ? n.call(t) : e.get(t)), $ = (t, e, n) => e.has(t) ? Pe("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), h = (t, e, n, o) => (ae(t, e, "write to private field"), o ? o.call(t, n) : e.set(t, n), n), C = (t, e, n) => (ae(t, e, "access private method"), n);
-var Oe = (t, e, n, o) => ({
+var ae = (t, e, n) => e.has(t) || Oe("Cannot " + n);
+var d = (t, e, n) => (ae(t, e, "read from private field"), n ? n.call(t) : e.get(t)), T = (t, e, n) => e.has(t) ? Oe("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), h = (t, e, n, o) => (ae(t, e, "write to private field"), o ? o.call(t, n) : e.set(t, n), n), b = (t, e, n) => (ae(t, e, "access private method"), n);
+var re = (t, e, n, o) => ({
   set _(i) {
     h(t, e, i, n);
   },
@@ -11,8 +11,9 @@ var Oe = (t, e, n, o) => ({
     return d(t, e, o);
   }
 });
-import { aa as E, at as j, r as ee, bl as Ve, au as We, av as Ge, ax as W, aA as G, ba as He, bb as bn, aw as m, aC as N, ay as g, aB as P, az as s, aD as mn, bh as R, bN as Q, bi as L, aF as Se, a3 as u, ao as T, B as un, l as An, b0 as ze, bA as Kn, n as De, F as Ne, b7 as Ze, b9 as Ue, bL as Wn, bm as de, ak as en, bt as Je, bs as Ye, bZ as Ee, b_ as Qe, bq as Xe, j as Ke, bT as nt, J as et, bW as tt, bU as ot, bV as it, bX as at, bY as rt } from "./chunks/recipe-fetch-D2IpKMVr.js";
-const ke = {
+import { a7 as N, aq as j, r as te, ar as We, as as Ge, au as W, ax as G, aS as Ze, aT as bn, at as m, az as D, av as _, ay as O, aw as c, aA as mn, aY as R, bj as X, aZ as A, aC as $e, a2 as u, al as S, B as un, l as Bn, aM as ze, b8 as ne, n as ke, F as De, aP as He, aR as Ue, bh as Gn, a_ as he, ah as en, j as Je, bo as Ye, J as Qe, bp as Xe, bq as Ke, br as nt } from "./chunks/app-CrO8M3t-.js";
+import { Z as et, v as tt, u as ot, S as Ne, C as it, r as at, A as rt, z as st } from "./chunks/recipe-fetch-9bf8nynf.js";
+const Ee = {
   endpoint: "https://my-app.com",
   infrastructure: {
     ctrl: { active: 1, standby: 1 },
@@ -68,149 +69,149 @@ const ke = {
     sublabel: "storage:6379"
   }
 };
-function st(t, e) {
-  if (t & 1 && (m(0, "div", 0)(1, "span", 7), N(2), g()()), t & 2) {
-    const n = P();
-    s(2), mn(n.label());
-  }
-}
 function ct(t, e) {
-  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !0);
+  if (t & 1 && (m(0, "div", 0)(1, "span", 7), D(2), _()()), t & 2) {
+    const n = O();
+    c(2), mn(n.label());
   }
 }
 function lt(t, e) {
   if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !1);
+    const n = O(2);
+    S("color", n.barColor())("active", !0);
   }
 }
 function dt(t, e) {
-  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
-    const n = e.$implicit;
-    T("svgIcon", n);
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = O(2);
+    S("color", n.barColor())("active", !1);
   }
 }
 function ht(t, e) {
-  if (t & 1 && R(0, dt, 1, 1, "mat-icon", 12, Q), t & 2) {
-    const n = P(2);
-    L(n.techIcons());
+  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
+    const n = e.$implicit;
+    S("svgIcon", n);
   }
 }
 function gt(t, e) {
-  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
-    const n = P(2);
-    T("svgIcon", n.techIcon());
+  if (t & 1 && R(0, ht, 1, 1, "mat-icon", 12, X), t & 2) {
+    const n = O(2);
+    A(n.techIcons());
   }
 }
 function _t(t, e) {
-  if (t & 1 && (m(0, "div", 1)(1, "div", 8), R(2, ct, 1, 2, "zui-bar-icon", 9, Q), R(4, lt, 1, 2, "zui-bar-icon", 9, Q), g(), m(6, "span", 10), N(7), g(), m(8, "div", 11), W(9, ht, 2, 0)(10, gt, 1, 1, "mat-icon", 12), g()()), t & 2) {
-    let n;
-    const o = P();
-    s(2), L(o.activeRange()), s(2), L(o.inactiveRange()), s(3), mn(o.label()), s(2), G((n = o.techIcons()) != null && n.length ? 9 : o.techIcon() ? 10 : -1);
+  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
+    const n = O(2);
+    S("svgIcon", n.techIcon());
   }
 }
 function pt(t, e) {
-  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !0);
+  if (t & 1 && (m(0, "div", 1)(1, "div", 8), R(2, lt, 1, 2, "zui-bar-icon", 9, X), R(4, dt, 1, 2, "zui-bar-icon", 9, X), _(), m(6, "span", 10), D(7), _(), m(8, "div", 11), W(9, gt, 2, 0)(10, _t, 1, 1, "mat-icon", 12), _()()), t & 2) {
+    let n;
+    const o = O();
+    c(2), A(o.activeRange()), c(2), A(o.inactiveRange()), c(3), mn(o.label()), c(2), G((n = o.techIcons()) != null && n.length ? 9 : o.techIcon() ? 10 : -1);
   }
 }
 function ft(t, e) {
-  if (t & 1 && u(0, "mat-icon", 16), t & 2) {
-    const n = P(2);
-    T("svgIcon", n.techIcon());
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = O(2);
+    S("color", n.barColor())("active", !0);
   }
 }
 function ut(t, e) {
-  if (t & 1 && (m(0, "div", 2)(1, "div", 13), R(2, pt, 1, 2, "zui-bar-icon", 9, Q), g(), m(4, "div", 14)(5, "span", 15), N(6), g(), W(7, ft, 1, 1, "mat-icon", 16), g()()), t & 2) {
-    const n = P();
-    s(2), L(n.activeRange()), s(4), mn(n.formatLabel(n.label())), s(), G(n.techIcon() ? 7 : -1);
+  if (t & 1 && u(0, "mat-icon", 16), t & 2) {
+    const n = O(2);
+    S("svgIcon", n.techIcon());
   }
 }
 function mt(t, e) {
-  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !0);
+  if (t & 1 && (m(0, "div", 2)(1, "div", 13), R(2, ft, 1, 2, "zui-bar-icon", 9, X), _(), m(4, "div", 14)(5, "span", 15), D(6), _(), W(7, ut, 1, 1, "mat-icon", 16), _()()), t & 2) {
+    const n = O();
+    c(2), A(n.activeRange()), c(4), mn(n.formatLabel(n.label())), c(), G(n.techIcon() ? 7 : -1);
   }
 }
 function vt(t, e) {
   if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !1);
+    const n = O(2);
+    S("color", n.barColor())("active", !0);
   }
 }
 function bt(t, e) {
-  if (t & 1 && u(0, "mat-icon", 20), t & 2) {
-    const n = P(2);
-    T("svgIcon", n.techIcon());
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = O(2);
+    S("color", n.barColor())("active", !1);
   }
 }
 function xt(t, e) {
-  if (t & 1 && (m(0, "div", 3)(1, "div", 17), R(2, mt, 1, 2, "zui-bar-icon", 9, Q), R(4, vt, 1, 2, "zui-bar-icon", 9, Q), g(), m(6, "div", 18)(7, "span", 19), N(8), g(), W(9, bt, 1, 1, "mat-icon", 20), g()()), t & 2) {
-    const n = P();
-    s(2), L(n.activeRange()), s(2), L(n.inactiveRange()), s(4), mn(n.label()), s(), G(n.techIcon() ? 9 : -1);
+  if (t & 1 && u(0, "mat-icon", 20), t & 2) {
+    const n = O(2);
+    S("svgIcon", n.techIcon());
   }
 }
 function wt(t, e) {
-  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !0);
+  if (t & 1 && (m(0, "div", 3)(1, "div", 17), R(2, vt, 1, 2, "zui-bar-icon", 9, X), R(4, bt, 1, 2, "zui-bar-icon", 9, X), _(), m(6, "div", 18)(7, "span", 19), D(8), _(), W(9, xt, 1, 1, "mat-icon", 20), _()()), t & 2) {
+    const n = O();
+    c(2), A(n.activeRange()), c(2), A(n.inactiveRange()), c(4), mn(n.label()), c(), G(n.techIcon() ? 9 : -1);
   }
 }
 function Ct(t, e) {
   if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !1);
+    const n = O(2);
+    S("color", n.barColor())("active", !0);
   }
 }
 function yt(t, e) {
-  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
-    const n = P(2);
-    T("svgIcon", n.techIcon());
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = O(2);
+    S("color", n.barColor())("active", !1);
   }
 }
 function Mt(t, e) {
-  if (t & 1 && (m(0, "div", 4)(1, "div", 21), R(2, wt, 1, 2, "zui-bar-icon", 9, Q), R(4, Ct, 1, 2, "zui-bar-icon", 9, Q), g(), m(6, "div", 22)(7, "span", 23), N(8), g(), W(9, yt, 1, 1, "mat-icon", 12), g()()), t & 2) {
-    const n = P();
-    s(2), L(n.activeRange()), s(2), L(n.inactiveRange()), s(4), mn(n.formatLabel(n.label())), s(), G(n.techIcon() ? 9 : -1);
+  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
+    const n = O(2);
+    S("svgIcon", n.techIcon());
   }
 }
 function It(t, e) {
-  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !0);
+  if (t & 1 && (m(0, "div", 4)(1, "div", 21), R(2, Ct, 1, 2, "zui-bar-icon", 9, X), R(4, yt, 1, 2, "zui-bar-icon", 9, X), _(), m(6, "div", 22)(7, "span", 23), D(8), _(), W(9, Mt, 1, 1, "mat-icon", 12), _()()), t & 2) {
+    const n = O();
+    c(2), A(n.activeRange()), c(2), A(n.inactiveRange()), c(4), mn(n.formatLabel(n.label())), c(), G(n.techIcon() ? 9 : -1);
   }
 }
 function Pt(t, e) {
   if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
-    const n = P(2);
-    T("color", n.barColor())("active", !1);
+    const n = O(2);
+    S("color", n.barColor())("active", !0);
   }
 }
 function Ot(t, e) {
-  if (t & 1 && (m(0, "div", 5)(1, "div", 21), R(2, It, 1, 2, "zui-bar-icon", 9, Q), R(4, Pt, 1, 2, "zui-bar-icon", 9, Q), g(), m(6, "span", 19), N(7), g()()), t & 2) {
-    const n = P();
-    s(2), L(n.activeRange()), s(2), L(n.inactiveRange()), s(3), mn(n.label());
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = O(2);
+    S("color", n.barColor())("active", !1);
   }
 }
 function Tt(t, e) {
-  if (t & 1 && (m(0, "div", 26)(1, "span", 27), N(2), g()()), t & 2) {
-    const n = P(2);
-    s(2), mn(n.sublabel());
+  if (t & 1 && (m(0, "div", 5)(1, "div", 21), R(2, Pt, 1, 2, "zui-bar-icon", 9, X), R(4, Ot, 1, 2, "zui-bar-icon", 9, X), _(), m(6, "span", 19), D(7), _()()), t & 2) {
+    const n = O();
+    c(2), A(n.activeRange()), c(2), A(n.inactiveRange()), c(3), mn(n.label());
+  }
+}
+function St(t, e) {
+  if (t & 1 && (m(0, "div", 26)(1, "span", 27), D(2), _()()), t & 2) {
+    const n = O(2);
+    c(2), mn(n.sublabel());
   }
 }
 function $t(t, e) {
-  if (t & 1 && (m(0, "div", 6)(1, "div", 24)(2, "span", 25), N(3), g()(), W(4, Tt, 3, 1, "div", 26), g()), t & 2) {
-    const n = P();
-    s(3), Se("", n.label(), `
-External`), s(), G(n.sublabel() ? 4 : -1);
+  if (t & 1 && (m(0, "div", 6)(1, "div", 24)(2, "span", 25), D(3), _()(), W(4, St, 3, 1, "div", 26), _()), t & 2) {
+    const n = O();
+    c(3), $e("", n.label(), `
+External`), c(), G(n.sublabel() ? 4 : -1);
   }
 }
 const xn = class xn {
   constructor() {
-    this.variant = E.required(), this.label = E.required(), this.sublabel = E(), this.containers = E(), this.barColor = E("orange"), this.techIcon = E(), this.techIcons = E(), this.highlighted = E(!1), this.activeRange = j(() => {
+    this.variant = N.required(), this.label = N.required(), this.sublabel = N(), this.containers = N(), this.barColor = N("orange"), this.techIcon = N(), this.techIcons = N(), this.highlighted = N(!1), this.activeRange = j(() => {
       const e = this.containers();
       return e ? Array.from({ length: e.active }, (n, o) => o) : [];
     }), this.inactiveRange = j(() => {
@@ -224,14 +225,14 @@ const xn = class xn {
 };
 xn.ɵfac = function(n) {
   return new (n || xn)();
-}, xn.ɵcmp = /* @__PURE__ */ ee({ type: xn, selectors: [["zw-diagram-node"]], hostVars: 4, hostBindings: function(n, o) {
-  n & 2 && (He("__node __node--" + o.variant()), bn("__node--highlighted", o.highlighted()));
+}, xn.ɵcmp = /* @__PURE__ */ te({ type: xn, selectors: [["zw-diagram-node"]], hostVars: 4, hostBindings: function(n, o) {
+  n & 2 && (Ze("__node __node--" + o.variant()), bn("__node--highlighted", o.highlighted()));
 }, inputs: { variant: [1, "variant"], label: [1, "label"], sublabel: [1, "sublabel"], containers: [1, "containers"], barColor: [1, "barColor"], techIcon: [1, "techIcon"], techIcons: [1, "techIcons"], highlighted: [1, "highlighted"] }, decls: 7, vars: 1, consts: [[1, "__endpoint-pill"], [1, "__infra-core-box"], [1, "__infra-side-box"], [1, "__balancer-box"], [1, "__service-box"], [1, "__service-highlighted-box"], [1, "__external-box"], [1, "__endpoint-label"], [1, "__bar-row", "__bar-row--infra"], [3, "color", "active"], [1, "__node-label", "__node-label--mono-core", "__node-label--multiline"], [1, "__tech-icons-row"], [1, "__tech-icon", 3, "svgIcon"], [1, "__bar-col"], [1, "__side-bottom"], [1, "__node-label", "__node-label--mono", "__node-label--side"], [1, "__tech-icon", "__tech-icon--side", 3, "svgIcon"], [1, "__bar-row", "__bar-row--balancer"], [1, "__balancer-label-area"], [1, "__node-label", "__node-label--mono", "__node-label--multiline"], [1, "__tech-icon", "__tech-icon--sm", 3, "svgIcon"], [1, "__bar-row"], [1, "__label-block"], [1, "__node-label", "__node-label--mono"], [1, "__ext-inner-card"], [1, "__node-label", "__node-label--mono", "__node-label--ext-text"], [1, "__ext-sublabel-frame"], [1, "__node-label", "__node-label--mono", "__node-label--sub"]], template: function(n, o) {
-  if (n & 1 && W(0, st, 3, 1, "div", 0)(1, _t, 11, 2, "div", 1)(2, ut, 8, 2, "div", 2)(3, xt, 10, 2, "div", 3)(4, Mt, 10, 2, "div", 4)(5, Ot, 8, 1, "div", 5)(6, $t, 5, 2, "div", 6), n & 2) {
+  if (n & 1 && W(0, ct, 3, 1, "div", 0)(1, pt, 11, 2, "div", 1)(2, mt, 8, 2, "div", 2)(3, wt, 10, 2, "div", 3)(4, It, 10, 2, "div", 4)(5, Tt, 8, 1, "div", 5)(6, $t, 5, 2, "div", 6), n & 2) {
     let i;
     G((i = o.variant()) === "endpoint" ? 0 : i === "infra-core" ? 1 : i === "infra-side" ? 2 : i === "balancer" ? 3 : i === "service" ? 4 : i === "service-highlighted" ? 5 : i === "external" ? 6 : -1);
   }
-}, dependencies: [Ve, We, Ge], styles: [`[_nghost-%COMP%] {
+}, dependencies: [et, We, Ge], styles: [`[_nghost-%COMP%] {
   display: block;
   position: relative;
   contain: layout style;
@@ -493,52 +494,52 @@ xn.ɵfac = function(n) {
   background: #E8E7E7;
   border-radius: 3px;
 }`], changeDetection: 0 });
-let ne = xn;
-const St = ["*"];
-function zt(t, e) {
-  if (t & 1 && (Wn(), u(0, "path", 28)), t & 2) {
+let ee = xn;
+const zt = ["*"];
+function kt(t, e) {
+  if (t & 1 && (Gn(), u(0, "path", 28)), t & 2) {
     const n = e.$implicit;
     en("d", n);
   }
 }
-const re = {
+const se = {
   ctrl: { active: 1, standby: 1 },
   stats: { active: 1, standby: 0 },
   logger: { active: 1, standby: 0 }
 }, Dt = {
   containers: { active: 2, standby: 0 }
 };
-var Mn, Bn, In, Pn, ln, dn, Rn;
+var Mn, Fn, In, Pn, ln, dn, An;
 const wn = class wn {
   // ─── Lifecycle ──────────────────────────────────────────
   constructor() {
-    $(this, dn);
-    $(this, Mn);
-    $(this, Bn);
-    $(this, In);
-    $(this, Pn);
-    $(this, ln);
-    this.config = E({}), this.lightweight = E(!1), this.showPaths = E(!0), this.internalPaths = un([]), this.pathsVisible = un(!0), h(this, Mn, An(De)), h(this, Bn, An(Ne)), h(this, Pn, !1), this.resolvedInfra = {
+    T(this, dn);
+    T(this, Mn);
+    T(this, Fn);
+    T(this, In);
+    T(this, Pn);
+    T(this, ln);
+    this.config = N({}), this.lightweight = N(!1), this.showPaths = N(!0), this.internalPaths = un([]), this.pathsVisible = un(!0), h(this, Mn, Bn(ke)), h(this, Fn, Bn(De)), h(this, Pn, !1), this.resolvedInfra = {
       ctrl: {
         id: "ctrl",
         label: `Project ctrl
 & L3 balancer
 + firewall`,
-        containers: re.ctrl,
+        containers: se.ctrl,
         techIcons: ["go"],
         highlighted: !0
       },
       stats: {
         id: "stats",
         label: "Stats",
-        containers: re.stats,
+        containers: se.stats,
         techIcon: "sqlite",
         highlighted: !1
       },
       logger: {
         id: "logger",
         label: "Logger",
-        containers: re.logger,
+        containers: se.logger,
         techIcon: "victorialogs",
         highlighted: !1
       }
@@ -559,10 +560,10 @@ balancer`,
       techIcon: "nginx",
       highlighted: !0
     }, ze(() => {
-      h(this, Pn, !0), h(this, ln, this.lightweight()), h(this, In, new ResizeObserver(() => C(this, dn, Rn).call(this))), d(this, In).observe(d(this, Mn).nativeElement), d(this, Bn).onDestroy(() => d(this, In)?.disconnect()), requestAnimationFrame(() => {
-        requestAnimationFrame(() => C(this, dn, Rn).call(this));
+      h(this, Pn, !0), h(this, ln, this.lightweight()), h(this, In, new ResizeObserver(() => b(this, dn, An).call(this))), d(this, In).observe(d(this, Mn).nativeElement), d(this, Fn).onDestroy(() => d(this, In)?.disconnect()), requestAnimationFrame(() => {
+        requestAnimationFrame(() => b(this, dn, An).call(this));
       });
-    }), Kn(() => {
+    }), ne(() => {
       this.config();
       const e = this.lightweight();
       if (!d(this, Pn))
@@ -571,17 +572,17 @@ balancer`,
       h(this, ln, e), n ? (this.pathsVisible.set(!1), setTimeout(() => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            C(this, dn, Rn).call(this), this.pathsVisible.set(!0);
+            b(this, dn, An).call(this), this.pathsVisible.set(!0);
           });
         });
       }, 200)) : requestAnimationFrame(() => {
-        requestAnimationFrame(() => C(this, dn, Rn).call(this));
+        requestAnimationFrame(() => b(this, dn, An).call(this));
       });
     });
   }
 };
-Mn = new WeakMap(), Bn = new WeakMap(), In = new WeakMap(), Pn = new WeakMap(), ln = new WeakMap(), dn = new WeakSet(), // ─── Internal path computation ──────────────────────────
-Rn = function() {
+Mn = new WeakMap(), Fn = new WeakMap(), In = new WeakMap(), Pn = new WeakMap(), ln = new WeakMap(), dn = new WeakSet(), // ─── Internal path computation ──────────────────────────
+An = function() {
   if (!this.showPaths()) {
     this.internalPaths.set([]);
     return;
@@ -592,70 +593,70 @@ Rn = function() {
   const o = n.getBoundingClientRect();
   if (o.width === 0)
     return;
-  const i = (x) => Math.round(x * 10) / 10, O = (x) => {
-    const b = x.getBoundingClientRect();
+  const i = (w) => Math.round(w * 10) / 10, y = (w) => {
+    const x = w.getBoundingClientRect();
     return [
-      i(b.left - o.left + b.width / 2),
-      i(b.top - o.top + b.height)
+      i(x.left - o.left + x.width / 2),
+      i(x.top - o.top + x.height)
     ];
-  }, v = (x) => {
-    const b = x.getBoundingClientRect();
+  }, v = (w) => {
+    const x = w.getBoundingClientRect();
     return [
-      i(b.left - o.left + b.width / 2),
-      i(b.top - o.top)
+      i(x.left - o.left + x.width / 2),
+      i(x.top - o.top)
     ];
-  }, c = [], D = 16, q = 27, V = (x, b, w) => {
-    const [z, S] = x, [A, X] = b, tn = A - z;
+  }, s = [], k = 16, q = 27, V = (w, x, C) => {
+    const [z, $] = w, [L, K] = x, tn = L - z;
     if (Math.abs(tn) < 3) {
-      const K = i((z + A) / 2);
-      return `M${K},${i(S)}L${K},${i(X)}`;
+      const nn = i((z + L) / 2);
+      return `M${nn},${i($)}L${nn},${i(K)}`;
     }
-    const Z = Math.min(D, Math.abs(tn) / 2, Math.abs(w - S) / 2, Math.abs(X - w) / 2), B = Math.sign(tn), U = Math.sign(X - w) || 1;
+    const H = Math.min(k, Math.abs(tn) / 2, Math.abs(C - $) / 2, Math.abs(K - C) / 2), B = Math.sign(tn), U = Math.sign(K - C) || 1;
     return [
-      `M${i(z)},${i(S)}`,
-      `L${i(z)},${i(w - Z)}`,
-      `Q${i(z)},${i(w)},${i(z + Z * B)},${i(w)}`,
-      `L${i(A - Z * B)},${i(w)}`,
-      `Q${i(A)},${i(w)},${i(A)},${i(w + Z * U)}`,
-      `L${i(A)},${i(X)}`
+      `M${i(z)},${i($)}`,
+      `L${i(z)},${i(C - H)}`,
+      `Q${i(z)},${i(C)},${i(z + H * B)},${i(C)}`,
+      `L${i(L - H * B)},${i(C)}`,
+      `Q${i(L)},${i(C)},${i(L)},${i(C + H * U)}`,
+      `L${i(L)},${i(K)}`
     ].join("");
-  }, k = n.querySelector(".__zone--services");
+  }, E = n.querySelector(".__zone--services");
   if (this.lightweight()) {
-    const x = n.querySelector('[data-mode="lw"]');
-    if (x && k) {
-      const b = x.querySelector(".__infra-group");
-      if (b) {
-        const [w, z] = O(b), S = v(k)[1];
-        c.push(`M${i(w)},${i(z)}L${i(w)},${i(S)}`);
+    const w = n.querySelector('[data-mode="lw"]');
+    if (w && E) {
+      const x = w.querySelector(".__infra-group");
+      if (x) {
+        const [C, z] = y(x), $ = v(E)[1];
+        s.push(`M${i(C)},${i(z)}L${i(C)},${i($)}`);
       }
     }
   } else {
-    const x = n.querySelector('[data-mode="hw"]');
-    if (!x) {
-      this.internalPaths.set(c);
+    const w = n.querySelector('[data-mode="hw"]');
+    if (!w) {
+      this.internalPaths.set(s);
       return;
     }
-    const b = x.querySelector(".__infra-group"), w = x.querySelector('[data-node-id="ctrl"]'), z = x.querySelector('[data-node-id="l7"]');
-    if (b && w && z) {
-      const S = O(w)[0], A = O(b)[1], X = [S, A], tn = Array.from(z.querySelectorAll("zui-bar-icon")), Z = this.resolvedRoutingDisplay.containers.active;
+    const x = w.querySelector(".__infra-group"), C = w.querySelector('[data-node-id="ctrl"]'), z = w.querySelector('[data-node-id="l7"]');
+    if (x && C && z) {
+      const $ = y(C)[0], L = y(x)[1], K = [$, L], tn = Array.from(z.querySelectorAll("zui-bar-icon")), H = this.resolvedRoutingDisplay.containers.active;
       for (let B = 0; B < tn.length; B++) {
-        if (B >= Z)
+        if (B >= H)
           continue;
-        const U = v(tn[B]), K = U[1] - q;
-        c.push(V(X, U, K));
+        const U = v(tn[B]), nn = U[1] - q;
+        s.push(V(K, U, nn));
       }
-      if (k) {
-        const [B, U] = O(z), K = v(k)[1];
-        c.push(`M${i(B)},${i(U)}L${i(B)},${i(K)}`);
+      if (E) {
+        const [B, U] = y(z), nn = v(E)[1];
+        s.push(`M${i(B)},${i(U)}L${i(B)},${i(nn)}`);
       }
     }
   }
-  this.internalPaths.set(c);
+  this.internalPaths.set(s);
 }, wn.ɵfac = function(n) {
   return new (n || wn)();
-}, wn.ɵcmp = /* @__PURE__ */ ee({ type: wn, selectors: [["zw-project-shell"]], inputs: { config: [1, "config"], lightweight: [1, "lightweight"], showPaths: [1, "showPaths"] }, ngContentSelectors: St, decls: 48, vars: 28, consts: [[1, "__project"], [1, "__project-header"], [1, "__project-title"], [1, "__vxlan-label"], [1, "__infra-stack"], ["data-mode", "lw", 1, "__infra-mode"], [1, "__infra-mode-inner"], [1, "__zone", "__zone--infra", "__zone--infra-lightweight"], [1, "__zone-label"], [1, "__infra-content", "__infra-content--lightweight"], [1, "__infra-group"], ["data-node-id", "core-lw"], ["variant", "infra-core", "barColor", "orange", 3, "label", "containers", "techIcons", "highlighted"], ["data-mode", "hw", 1, "__infra-mode"], [1, "__zone", "__zone--infra"], [1, "__infra-content"], ["data-node-id", "ctrl"], [1, "__infra-side-nodes"], ["data-node-id", "stats"], ["variant", "infra-side", "barColor", "orange", 3, "label", "containers", "techIcon", "highlighted"], ["data-node-id", "logger"], [1, "__zone-spacer", "__zone-spacer--infra-to-routing"], [1, "__zone", "__zone--routing"], [1, "__routing-content"], ["data-node-id", "l7"], ["variant", "balancer", "barColor", "orange", 3, "label", "containers", "techIcon", "highlighted"], ["data-spacer", "routing-services", 1, "__zone-spacer", "__zone-spacer--routing-to-services"], [1, "__svg-layer"], [1, "__path-base"]], template: function(n, o) {
-  n & 1 && (Ze(), m(0, "div", 0)(1, "div", 1)(2, "span", 2), N(3, "Project"), g(), m(4, "span", 3), N(5, "Private VXLAN network"), g()(), m(6, "div", 4)(7, "div", 5)(8, "div", 6)(9, "div", 7)(10, "span", 8), N(11, "Dedicated"), u(12, "br"), N(13, "infrastructure"), u(14, "br"), N(15, "core with routing"), u(16, "br"), N(17, "and balancing"), g(), m(18, "div", 9)(19, "div", 10)(20, "div", 11), u(21, "zw-diagram-node", 12), g()()()()()(), m(22, "div", 13)(23, "div", 6)(24, "div", 14)(25, "span", 8), N(26, "Dedicated infrastructure core"), g(), m(27, "div", 15)(28, "div", 10)(29, "div", 16), u(30, "zw-diagram-node", 12), g(), m(31, "div", 17)(32, "div", 18), u(33, "zw-diagram-node", 19), g(), m(34, "div", 20), u(35, "zw-diagram-node", 19), g()()()()(), u(36, "div", 21), m(37, "div", 22)(38, "span", 8), N(39, "Dedicated routing and balancing"), g(), m(40, "div", 23)(41, "div", 24), u(42, "zw-diagram-node", 25), g()()()()()(), u(43, "div", 26), Ue(44), Wn(), m(45, "svg", 27), R(46, zt, 1, 1, ":svg:path", 28, de), g()()), n & 2 && (bn("__project--lightweight", o.lightweight()), s(7), bn("__infra-mode--active", o.lightweight()), s(14), T("label", o.resolvedLightweightNode.label)("containers", o.resolvedLightweightNode.containers)("techIcons", o.resolvedLightweightNode.techIcons)("highlighted", o.resolvedLightweightNode.highlighted), s(), bn("__infra-mode--active", !o.lightweight()), s(8), T("label", o.resolvedInfra.ctrl.label)("containers", o.resolvedInfra.ctrl.containers)("techIcons", o.resolvedInfra.ctrl.techIcons)("highlighted", o.resolvedInfra.ctrl.highlighted), s(3), T("label", o.resolvedInfra.stats.label)("containers", o.resolvedInfra.stats.containers)("techIcon", o.resolvedInfra.stats.techIcon)("highlighted", o.resolvedInfra.stats.highlighted), s(2), T("label", o.resolvedInfra.logger.label)("containers", o.resolvedInfra.logger.containers)("techIcon", o.resolvedInfra.logger.techIcon)("highlighted", o.resolvedInfra.logger.highlighted), s(7), T("label", o.resolvedRoutingDisplay.label)("containers", o.resolvedRoutingDisplay.containers)("techIcon", o.resolvedRoutingDisplay.techIcon)("highlighted", o.resolvedRoutingDisplay.highlighted), s(3), bn("__svg-layer--visible", o.pathsVisible()), s(), L(o.internalPaths()));
-}, dependencies: [ne], styles: [`[_nghost-%COMP%] {
+}, wn.ɵcmp = /* @__PURE__ */ te({ type: wn, selectors: [["zw-project-shell"]], inputs: { config: [1, "config"], lightweight: [1, "lightweight"], showPaths: [1, "showPaths"] }, ngContentSelectors: zt, decls: 48, vars: 28, consts: [[1, "__project"], [1, "__project-header"], [1, "__project-title"], [1, "__vxlan-label"], [1, "__infra-stack"], ["data-mode", "lw", 1, "__infra-mode"], [1, "__infra-mode-inner"], [1, "__zone", "__zone--infra", "__zone--infra-lightweight"], [1, "__zone-label"], [1, "__infra-content", "__infra-content--lightweight"], [1, "__infra-group"], ["data-node-id", "core-lw"], ["variant", "infra-core", "barColor", "orange", 3, "label", "containers", "techIcons", "highlighted"], ["data-mode", "hw", 1, "__infra-mode"], [1, "__zone", "__zone--infra"], [1, "__infra-content"], ["data-node-id", "ctrl"], [1, "__infra-side-nodes"], ["data-node-id", "stats"], ["variant", "infra-side", "barColor", "orange", 3, "label", "containers", "techIcon", "highlighted"], ["data-node-id", "logger"], [1, "__zone-spacer", "__zone-spacer--infra-to-routing"], [1, "__zone", "__zone--routing"], [1, "__routing-content"], ["data-node-id", "l7"], ["variant", "balancer", "barColor", "orange", 3, "label", "containers", "techIcon", "highlighted"], ["data-spacer", "routing-services", 1, "__zone-spacer", "__zone-spacer--routing-to-services"], [1, "__svg-layer"], [1, "__path-base"]], template: function(n, o) {
+  n & 1 && (He(), m(0, "div", 0)(1, "div", 1)(2, "span", 2), D(3, "Project"), _(), m(4, "span", 3), D(5, "Private VXLAN network"), _()(), m(6, "div", 4)(7, "div", 5)(8, "div", 6)(9, "div", 7)(10, "span", 8), D(11, "Dedicated"), u(12, "br"), D(13, "infrastructure"), u(14, "br"), D(15, "core with routing"), u(16, "br"), D(17, "and balancing"), _(), m(18, "div", 9)(19, "div", 10)(20, "div", 11), u(21, "zw-diagram-node", 12), _()()()()()(), m(22, "div", 13)(23, "div", 6)(24, "div", 14)(25, "span", 8), D(26, "Dedicated infrastructure core"), _(), m(27, "div", 15)(28, "div", 10)(29, "div", 16), u(30, "zw-diagram-node", 12), _(), m(31, "div", 17)(32, "div", 18), u(33, "zw-diagram-node", 19), _(), m(34, "div", 20), u(35, "zw-diagram-node", 19), _()()()()(), u(36, "div", 21), m(37, "div", 22)(38, "span", 8), D(39, "Dedicated routing and balancing"), _(), m(40, "div", 23)(41, "div", 24), u(42, "zw-diagram-node", 25), _()()()()()(), u(43, "div", 26), Ue(44), Gn(), m(45, "svg", 27), R(46, kt, 1, 1, ":svg:path", 28, he), _()()), n & 2 && (bn("__project--lightweight", o.lightweight()), c(7), bn("__infra-mode--active", o.lightweight()), c(14), S("label", o.resolvedLightweightNode.label)("containers", o.resolvedLightweightNode.containers)("techIcons", o.resolvedLightweightNode.techIcons)("highlighted", o.resolvedLightweightNode.highlighted), c(), bn("__infra-mode--active", !o.lightweight()), c(8), S("label", o.resolvedInfra.ctrl.label)("containers", o.resolvedInfra.ctrl.containers)("techIcons", o.resolvedInfra.ctrl.techIcons)("highlighted", o.resolvedInfra.ctrl.highlighted), c(3), S("label", o.resolvedInfra.stats.label)("containers", o.resolvedInfra.stats.containers)("techIcon", o.resolvedInfra.stats.techIcon)("highlighted", o.resolvedInfra.stats.highlighted), c(2), S("label", o.resolvedInfra.logger.label)("containers", o.resolvedInfra.logger.containers)("techIcon", o.resolvedInfra.logger.techIcon)("highlighted", o.resolvedInfra.logger.highlighted), c(7), S("label", o.resolvedRoutingDisplay.label)("containers", o.resolvedRoutingDisplay.containers)("techIcon", o.resolvedRoutingDisplay.techIcon)("highlighted", o.resolvedRoutingDisplay.highlighted), c(3), bn("__svg-layer--visible", o.pathsVisible()), c(), A(o.internalPaths()));
+}, dependencies: [ee], styles: [`[_nghost-%COMP%] {
   display: block;
   position: relative;
 }
@@ -827,108 +828,109 @@ Rn = function() {
   stroke-linecap: round;
   stroke-linejoin: round;
 }`], changeDetection: 0 });
-let he = wn;
-const ge = (t, e) => e.service.id;
+let ge = wn;
+const _e = (t, e) => e.service.id;
 function Nt(t, e) {
-  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), g()), t & 2) {
+  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), _()), t & 2) {
     const n = e.$implicit;
-    en("data-node-id", n.service.id), s(), T("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
+    en("data-node-id", n.service.id), c(), S("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
   }
 }
 function Et(t, e) {
-  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), g()), t & 2) {
+  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), _()), t & 2) {
     const n = e.$implicit;
-    en("data-node-id", n.service.id), s(), T("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
+    en("data-node-id", n.service.id), c(), S("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
   }
 }
-function kt(t, e) {
-  if (t & 1 && (m(0, "div", 8), R(1, Et, 2, 5, "div", null, ge), g()), t & 2) {
-    const n = P();
-    s(), L(n.row1SideServices());
+function Rt(t, e) {
+  if (t & 1 && (m(0, "div", 8), R(1, Et, 2, 5, "div", null, _e), _()), t & 2) {
+    const n = O();
+    c(), A(n.row1SideServices());
   }
 }
-function Rt(t, e) {
+function At(t, e) {
   t & 1 && u(0, "div");
 }
 function Lt(t, e) {
-  if (t & 1 && (m(0, "div", 14)(1, "div", 15), u(2, "zw-diagram-node", 16), g(), m(3, "div", 17), u(4, "zw-diagram-node", 13), g()()), t & 2) {
-    const n = e, o = P().$implicit;
-    en("data-node-id", o.service.id + "-compound"), s(), en("data-node-id", n.id), s(), T("label", n.label)("containers", n.containers)("barColor", n.barColor)("highlighted", !0), s(), en("data-node-id", o.service.id), s(), T("label", o.service.label)("containers", o.service.containers)("barColor", o.barColor)("techIcon", o.service.techIcon);
+  if (t & 1 && (m(0, "div", 14)(1, "div", 15), u(2, "zw-diagram-node", 16), _(), m(3, "div", 17), u(4, "zw-diagram-node", 13), _()()), t & 2) {
+    const n = e, o = O().$implicit;
+    en("data-node-id", o.service.id + "-compound"), c(), en("data-node-id", n.id), c(), S("label", n.label)("containers", n.containers)("barColor", n.barColor)("highlighted", !0), c(), en("data-node-id", o.service.id), c(), S("label", o.service.label)("containers", o.service.containers)("barColor", o.barColor)("techIcon", o.service.techIcon);
   }
 }
-function At(t, e) {
-  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), g()), t & 2) {
-    const n = P().$implicit;
-    en("data-node-id", n.service.id), s(), T("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
+function Bt(t, e) {
+  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), _()), t & 2) {
+    const n = O().$implicit;
+    en("data-node-id", n.service.id), c(), S("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
   }
 }
-function Bt(t, e) {
-  if (t & 1 && W(0, Lt, 5, 11, "div", 14)(1, At, 2, 5, "div"), t & 2) {
+function Ft(t, e) {
+  if (t & 1 && W(0, Lt, 5, 11, "div", 14)(1, Bt, 2, 5, "div"), t & 2) {
     let n;
     const o = e.$implicit;
     G((n = o.loadBalancer) ? 0 : 1, n);
   }
 }
-function Ft(t, e) {
-  if (t & 1 && (m(0, "div", 11), u(1, "zw-diagram-node", 18), g()), t & 2) {
+function jt(t, e) {
+  if (t & 1 && (m(0, "div", 11), u(1, "zw-diagram-node", 18), _()), t & 2) {
     const n = e;
-    s(), T("label", n.label)("sublabel", n.sublabel);
+    c(), S("label", n.label)("sublabel", n.sublabel);
   }
 }
-function jt(t, e) {
-  if (t & 1 && (Wn(), u(0, "path", 19)), t & 2) {
-    const n = P().$implicit;
+function qt(t, e) {
+  if (t & 1 && (Gn(), u(0, "path", 19)), t & 2) {
+    const n = O().$implicit;
     en("d", n.d);
   }
 }
-function qt(t, e) {
-  if (t & 1 && W(0, jt, 1, 1, ":svg:path", 19), t & 2) {
+function Vt(t, e) {
+  if (t & 1 && W(0, qt, 1, 1, ":svg:path", 19), t & 2) {
     const n = e.$implicit;
     G(n.renderMode !== "glow-only" ? 0 : -1);
   }
 }
-function Vt(t, e) {
-  if (t & 1 && (Wn(), u(0, "path", 20)), t & 2) {
-    const n = P(), o = n.$implicit, i = n.$index;
+function Wt(t, e) {
+  if (t & 1 && (Gn(), u(0, "path", 20)), t & 2) {
+    const n = O(), o = n.$implicit, i = n.$index;
     en("d", o.d)("data-path-idx", i);
   }
 }
-function Wt(t, e) {
-  if (t & 1 && W(0, Vt, 1, 2, ":svg:path", 20), t & 2) {
+function Gt(t, e) {
+  if (t & 1 && W(0, Wt, 1, 2, ":svg:path", 20), t & 2) {
     const n = e.$implicit;
     G(n.renderMode !== "base-only" ? 0 : -1);
   }
 }
-const Gt = 660, se = {
+const Zt = 660, ce = {
   ctrl: { active: 1, standby: 1 },
   stats: { active: 1, standby: 0 },
   logger: { active: 1, standby: 0 }
 }, Ht = {
   containers: { active: 2, standby: 0 }
-}, En = 600, kn = 1050, ce = 525, le = 900, Zt = 3300, Ut = 900, Te = 2250, Jt = 2e3, Yt = 400;
-var nn, On, Tn, Fn, $n, H, hn, gn, jn, _n, pn, fn, on, an, rn, _, Ln, Re, Le, Jn, Ae, pe, Yn, Be, Fe, je, qe, Qn, Xn, fe;
+}, En = 600, Rn = 1050, le = 525, de = 900, Ut = 3300, Jt = 900, Te = 2250, Yt = 2e3, Qt = 400;
+var Q, On, Tn, jn, Sn, Z, hn, gn, $n, qn, _n, pn, fn, on, an, rn, l, Ln, Re, Ae, fe, Le, Yn, Be, ue, Qn, Fe, je, qe, Ve, Xn, Kn, me;
 const Cn = class Cn {
   // ─── Lifecycle ──────────────────────────────────────────
   constructor() {
-    $(this, _);
-    $(this, nn);
-    $(this, On);
-    $(this, Tn);
-    $(this, Fn);
-    $(this, $n);
-    $(this, H);
+    T(this, l);
+    T(this, Q);
+    T(this, On);
+    T(this, Tn);
+    T(this, jn);
+    T(this, Sn);
+    T(this, Z);
     // rAF id for coalesced recomputation
-    $(this, hn);
-    $(this, gn);
+    T(this, hn);
+    T(this, gn);
+    T(this, $n);
     // ─── Trace orchestrator state ──────────────────────────
-    $(this, jn);
-    $(this, _n);
-    $(this, pn);
-    $(this, fn);
-    $(this, on);
-    $(this, an);
-    $(this, rn);
-    this.config = E(ke), this.lightweight = E(!1), this.annotatedPaths = un([]), this.pathsVisible = un(!0), h(this, nn, An(De)), h(this, On, An(Ne)), h(this, Fn, 1), h(this, $n, !1), h(this, H, 0), h(this, gn, !1), h(this, jn, 0), h(this, _n, 0), h(this, pn, 0), h(this, fn, !1), h(this, on, !1), h(this, an, /* @__PURE__ */ new Map()), h(this, rn, /* @__PURE__ */ new Map()), this.shellConfig = j(() => ({
+    T(this, qn);
+    T(this, _n);
+    T(this, pn);
+    T(this, fn);
+    T(this, on);
+    T(this, an);
+    T(this, rn);
+    this.config = N(Ee), this.lightweight = N(!1), this.annotatedPaths = un([]), this.pathsVisible = un(!0), h(this, Q, Bn(ke)), h(this, On, Bn(De)), h(this, jn, 1), h(this, Sn, !1), h(this, Z, 0), h(this, gn, !1), h(this, $n, 0), h(this, qn, 0), h(this, _n, 0), h(this, pn, 0), h(this, fn, !1), h(this, on, !1), h(this, an, /* @__PURE__ */ new Map()), h(this, rn, /* @__PURE__ */ new Map()), this.shellConfig = j(() => ({
       infrastructure: this.config().infrastructure,
       routing: this.config().routing
     })), this.resolvedInfra = j(() => {
@@ -939,21 +941,21 @@ const Cn = class Cn {
           label: `Project ctrl
 & L3 balancer
 + firewall`,
-          containers: e.ctrl ?? se.ctrl,
+          containers: e.ctrl ?? ce.ctrl,
           techIcons: ["go"],
           highlighted: !0
         },
         stats: {
           id: "stats",
           label: "Stats",
-          containers: e.stats ?? se.stats,
+          containers: e.stats ?? ce.stats,
           techIcon: "sqlite",
           highlighted: !1
         },
         logger: {
           id: "logger",
           label: "Logger",
-          containers: e.logger ?? se.logger,
+          containers: e.logger ?? ce.logger,
           techIcon: "victorialogs",
           highlighted: !1
         }
@@ -968,100 +970,100 @@ balancer`,
         techIcon: "nginx",
         highlighted: !0
       } : null;
-    }), this.row1MainServices = j(() => this.config().services.filter((e) => e.category === "http-runtime").map((e) => C(this, _, Jn).call(this, e))), this.row1SideServices = j(() => this.config().services.filter((e) => e.category === "side-runtime").map((e) => C(this, _, Jn).call(this, e))), this.row1Services = j(() => [...this.row1MainServices()]), this.row2Services = j(() => this.config().services.filter((e) => e.category !== "http-runtime" && e.category !== "side-runtime").map((e) => C(this, _, Jn).call(this, e))), this.resolvedStorage = j(() => {
+    }), this.row1MainServices = j(() => this.config().services.filter((e) => e.category === "http-runtime").map((e) => b(this, l, Yn).call(this, e))), this.row1SideServices = j(() => this.config().services.filter((e) => e.category === "side-runtime").map((e) => b(this, l, Yn).call(this, e))), this.row1Services = j(() => [...this.row1MainServices()]), this.row2Services = j(() => this.config().services.filter((e) => e.category !== "http-runtime" && e.category !== "side-runtime").map((e) => b(this, l, Yn).call(this, e))), this.resolvedStorage = j(() => {
       const e = this.config().storage;
       return e ? {
         label: e.label ?? "Object storage",
         sublabel: e.sublabel ?? "storage:6379"
       } : null;
     }), ze(() => {
-      h(this, $n, !0), h(this, hn, this.lightweight()), h(this, Tn, new ResizeObserver(() => {
-        C(this, _, Ln).call(this);
-      })), d(this, Tn).observe(d(this, nn).nativeElement), d(this, On).onDestroy(() => {
-        d(this, Tn)?.disconnect(), C(this, _, pe).call(this), d(this, H) && cancelAnimationFrame(d(this, H));
-      }), C(this, _, Ln).call(this);
+      h(this, Sn, !0), h(this, hn, this.lightweight()), h(this, Tn, new ResizeObserver(() => {
+        b(this, l, Ln).call(this);
+      })), d(this, Tn).observe(d(this, Q).nativeElement), d(this, On).onDestroy(() => {
+        d(this, Tn)?.disconnect(), b(this, l, ue).call(this), d(this, Z) && cancelAnimationFrame(d(this, Z));
+      }), b(this, l, Ln).call(this);
       const e = new IntersectionObserver(([n]) => {
-        n.isIntersecting ? C(this, _, Ae).call(this) : C(this, _, pe).call(this);
+        n.isIntersecting ? b(this, l, Be).call(this) : b(this, l, ue).call(this);
       }, { rootMargin: "200px 0px" });
-      e.observe(d(this, nn).nativeElement), d(this, On).onDestroy(() => e.disconnect());
-    }), Kn(() => {
+      e.observe(d(this, Q).nativeElement), d(this, On).onDestroy(() => e.disconnect());
+    }), ne(() => {
       this.config();
       const e = this.lightweight();
-      if (!d(this, $n))
+      if (!d(this, Sn))
         return;
       const n = d(this, hn) !== void 0 && d(this, hn) !== e;
-      h(this, hn, e), n ? (this.pathsVisible.set(!1), C(this, _, Yn).call(this), setTimeout(() => {
-        h(this, gn, !0), C(this, _, Ln).call(this);
-      }, 400)) : C(this, _, Ln).call(this);
+      h(this, hn, e), n ? (this.pathsVisible.set(!1), b(this, l, Qn).call(this), b(this, l, Le).call(this), setTimeout(() => {
+        h(this, gn, !0), b(this, l, Ln).call(this);
+      }, 400)) : b(this, l, Ln).call(this);
     });
   }
 };
-nn = new WeakMap(), On = new WeakMap(), Tn = new WeakMap(), Fn = new WeakMap(), $n = new WeakMap(), H = new WeakMap(), hn = new WeakMap(), gn = new WeakMap(), jn = new WeakMap(), _n = new WeakMap(), pn = new WeakMap(), fn = new WeakMap(), on = new WeakMap(), an = new WeakMap(), rn = new WeakMap(), _ = new WeakSet(), // ─── Private ────────────────────────────────────────────
+Q = new WeakMap(), On = new WeakMap(), Tn = new WeakMap(), jn = new WeakMap(), Sn = new WeakMap(), Z = new WeakMap(), hn = new WeakMap(), gn = new WeakMap(), $n = new WeakMap(), qn = new WeakMap(), _n = new WeakMap(), pn = new WeakMap(), fn = new WeakMap(), on = new WeakMap(), an = new WeakMap(), rn = new WeakMap(), l = new WeakSet(), // ─── Private ────────────────────────────────────────────
 /**
  * Coalesces all path recomputation requests through a single double-rAF.
  * Prevents stale DOM measurements when ResizeObserver fires before Angular
  * has flushed template changes from a config update.
  */
 Ln = function() {
-  d(this, H) && cancelAnimationFrame(d(this, H)), h(this, H, requestAnimationFrame(() => {
-    h(this, H, requestAnimationFrame(() => {
-      h(this, H, 0), C(this, _, Yn).call(this), C(this, _, Re).call(this), C(this, _, Le).call(this);
+  d(this, Z) && cancelAnimationFrame(d(this, Z)), h(this, Z, requestAnimationFrame(() => {
+    h(this, Z, requestAnimationFrame(() => {
+      h(this, Z, 0), b(this, l, Qn).call(this), b(this, l, Re).call(this), b(this, l, Ae).call(this);
     }));
   }));
 }, Re = function() {
-  const e = d(this, nn).nativeElement, o = e.clientWidth / Gt;
-  h(this, Fn, o), e.style.setProperty("--diagram-scale", String(o));
+  const e = d(this, Q).nativeElement, o = e.clientWidth / Zt;
+  h(this, jn, o), e.style.setProperty("--diagram-scale", String(o));
   const i = e.querySelector(".__canvas");
   i && (e.style.height = `${i.scrollHeight * o}px`);
-}, Le = function() {
-  const e = d(this, nn).nativeElement, n = e.querySelector(".__canvas");
+}, Ae = function() {
+  const e = d(this, Q).nativeElement, n = e.querySelector(".__canvas");
   if (!n)
     return;
   const o = n.getBoundingClientRect();
   if (o.width === 0)
     return;
-  const i = o.width / n.offsetWidth, O = (r) => {
-    const l = r.getBoundingClientRect();
+  const i = o.width / n.offsetWidth, y = (r) => {
+    const g = r.getBoundingClientRect();
     return {
-      x: (l.left - o.left) / i,
-      y: (l.top - o.top) / i,
-      w: l.width / i,
-      h: l.height / i
+      x: (g.left - o.left) / i,
+      y: (g.top - o.top) / i,
+      w: g.width / i,
+      h: g.height / i
     };
   }, v = (r) => {
-    const l = O(r);
-    return [l.x + l.w / 2, l.y];
-  }, c = (r) => {
-    const l = O(r);
-    return [l.x + l.w / 2, l.y + l.h];
-  }, D = (r) => n.querySelector(`[data-node-id="${r}"]`), q = (r, l) => {
-    const p = D(r);
-    return p ? Array.from(p.querySelectorAll("zui-bar-icon")).map((f, M) => ({
+    const g = y(r);
+    return [g.x + g.w / 2, g.y];
+  }, s = (r) => {
+    const g = y(r);
+    return [g.x + g.w / 2, g.y + g.h];
+  }, k = (r) => n.querySelector(`[data-node-id="${r}"]`), q = (r, g) => {
+    const p = k(r);
+    return p ? Array.from(p.querySelectorAll("zui-bar-icon")).map((f, I) => ({
       point: v(f),
-      barIndex: M,
-      active: l !== void 0 ? M < l : !0
+      barIndex: I,
+      active: g !== void 0 ? I < g : !0
     })) : [];
-  }, V = 16, k = 27, a = (r) => Math.round(r * 10) / 10, x = (r, l, p) => {
-    const [f, M] = r, [y, I] = l, sn = y - f;
+  }, V = 16, E = 27, a = (r) => Math.round(r * 10) / 10, w = (r, g, p) => {
+    const [f, I] = r, [M, P] = g, sn = M - f;
     if (Math.abs(sn) < 3) {
-      const cn = a((f + y) / 2);
-      return `M${cn},${a(M)}L${cn},${a(I)}`;
+      const cn = a((f + M) / 2);
+      return `M${cn},${a(I)}L${cn},${a(P)}`;
     }
-    const F = Math.min(V, Math.abs(sn) / 2, Math.abs(p - M) / 2, Math.abs(I - p) / 2), J = Math.sign(sn), Zn = Math.sign(I - p) || 1;
+    const F = Math.min(V, Math.abs(sn) / 2, Math.abs(p - I) / 2, Math.abs(P - p) / 2), J = Math.sign(sn), Un = Math.sign(P - p) || 1;
     return [
-      `M${a(f)},${a(M)}`,
+      `M${a(f)},${a(I)}`,
       `L${a(f)},${a(p - F)}`,
       `Q${a(f)},${a(p)},${a(f + F * J)},${a(p)}`,
-      `L${a(y - F * J)},${a(p)}`,
-      `Q${a(y)},${a(p)},${a(y)},${a(p + F * Zn)}`,
-      `L${a(y)},${a(I)}`
+      `L${a(M - F * J)},${a(p)}`,
+      `Q${a(M)},${a(p)},${a(M)},${a(p + F * Un)}`,
+      `L${a(M)},${a(P)}`
     ].join("");
-  }, b = [], w = this.lightweight(), z = w ? "core-lw" : "ctrl", S = w ? 2 : 3, A = w ? 3 : 4, X = D("endpoint"), tn = this.resolvedInfra(), Z = q(z, w ? void 0 : tn.ctrl.containers.active);
-  if (X && Z.length) {
-    const r = c(X), p = Math.min(...Z.map((f) => f.point[1])) - k;
-    for (const f of Z)
-      b.push({
-        d: x(r, f.point, p),
+  }, x = [], C = this.lightweight(), z = C ? "core-lw" : "ctrl", $ = C ? 2 : 3, L = C ? 3 : 4, K = k("endpoint"), tn = this.resolvedInfra(), H = q(z, C ? void 0 : tn.ctrl.containers.active);
+  if (K && H.length) {
+    const r = s(K), p = Math.min(...H.map((f) => f.point[1])) - E;
+    for (const f of H)
+      x.push({
+        d: w(r, f.point, p),
         depth: 0,
         sourceNodeId: "endpoint",
         targetNodeId: z,
@@ -1069,110 +1071,106 @@ Ln = function() {
         active: f.active
       });
   }
-  const B = n.querySelector(".__infra-mode--active .__infra-group"), U = D("l7"), K = D("ctrl"), me = this.resolvedRouting();
-  if (!w && K && U && B && me) {
-    const r = q("l7", me.containers.active);
+  const B = n.querySelector(".__infra-mode--active .__infra-group"), U = k("l7"), nn = k("ctrl"), be = this.resolvedRouting();
+  if (!C && nn && U && B && be) {
+    const r = q("l7", be.containers.active);
     if (r.length) {
-      const l = c(K)[0], p = c(B)[1], f = [l, p], y = Math.min(...r.map((I) => I.point[1])) - k;
-      for (const I of r)
-        b.push({
-          d: x(f, I.point, y),
+      const g = s(nn)[0], p = s(B)[1], f = [g, p], M = Math.min(...r.map((P) => P.point[1])) - E;
+      for (const P of r)
+        x.push({
+          d: w(f, P.point, M),
           depth: 1,
           sourceNodeId: "ctrl",
           targetNodeId: "l7",
-          targetBarIndex: I.barIndex,
-          active: I.active
+          targetBarIndex: P.barIndex,
+          active: P.active
         });
     }
   }
-  let Gn = null;
-  if (w) {
-    const r = D(z);
-    r && B && (Gn = [c(r)[0], c(B)[1]]);
-  } else U && (Gn = c(U));
-  if (Gn) {
-    const r = w ? z : "l7";
-    for (const l of this.row1Services()) {
-      const p = q(l.service.id, l.service.containers.active);
+  let Zn = null;
+  if (C) {
+    const r = k(z);
+    r && B && (Zn = [s(r)[0], s(B)[1]]);
+  } else U && (Zn = s(U));
+  if (Zn) {
+    const r = C ? z : "l7";
+    for (const g of this.row1Services()) {
+      const p = q(g.service.id, g.service.containers.active);
       if (p.length) {
-        const f = Gn, M = Math.min(...p.map((I) => I.point[1])), y = (f[1] + M) / 2;
-        for (const I of p)
-          b.push({
-            d: x(f, I.point, y),
-            depth: w ? 1 : 2,
+        const f = Zn, I = Math.min(...p.map((P) => P.point[1])), M = (f[1] + I) / 2;
+        for (const P of p)
+          x.push({
+            d: w(f, P.point, M),
+            depth: C ? 1 : 2,
             sourceNodeId: r,
-            targetNodeId: l.service.id,
-            targetBarIndex: I.barIndex,
-            active: I.active
+            targetNodeId: g.service.id,
+            targetBarIndex: P.barIndex,
+            active: P.active
           });
       }
     }
   }
-  const ve = 19, te = 11, Dn = [], Nn = [];
+  const xe = 19, oe = 11, Dn = [], Nn = [];
   for (const r of this.row2Services())
     if (r.loadBalancer)
-      for (const l of q(r.loadBalancer.id, r.loadBalancer.containers.active))
-        Nn.push({ ...l, nodeId: r.loadBalancer.id });
+      for (const g of q(r.loadBalancer.id, r.loadBalancer.containers.active))
+        Nn.push({ ...g, nodeId: r.loadBalancer.id });
     else
-      for (const l of q(r.service.id, r.service.containers.active))
-        Dn.push({ ...l, nodeId: r.service.id });
-  const be = n.querySelector(".__external-node"), oe = n.querySelectorAll(".__services-row");
-  if (be && oe.length > 1) {
-    const l = (oe[oe.length - 1].getBoundingClientRect().top - o.top) / i;
-    be.style.top = `${Math.round(l + 11)}px`;
-  }
-  const xe = D("storage"), Hn = xe ? v(xe) : null;
-  let vn = 0, we = 0;
+      for (const g of q(r.service.id, r.service.containers.active))
+        Dn.push({ ...g, nodeId: r.service.id });
+  b(this, l, fe).call(this, n);
+  const we = k("storage"), Hn = we ? v(we) : null;
+  let vn = 0, Ce = 0;
   for (const r of this.row1Services()) {
-    const l = D(r.service.id);
-    if (!l)
+    const g = k(r.service.id);
+    if (!g)
       continue;
-    const p = c(l);
-    we = p[0];
-    const f = Dn.length ? Math.min(...Dn.map((y) => y.point[1])) : Nn.length ? Math.min(...Nn.map((y) => y.point[1])) : 0, M = Math.max(p[1] + V, f - k);
-    vn = M, Hn && b.push({
-      d: x(p, Hn, M - ve),
-      depth: S,
+    const p = s(g);
+    Ce = p[0];
+    const f = Dn.length ? Math.min(...Dn.map((M) => M.point[1])) : Nn.length ? Math.min(...Nn.map((M) => M.point[1])) : 0, I = Math.max(p[1] + V, f - E);
+    vn = I, Hn && x.push({
+      d: w(p, Hn, I - xe),
+      depth: $,
       sourceNodeId: r.service.id,
       targetNodeId: "storage",
       targetBarIndex: -1,
       active: !0
     });
-    for (const y of Dn)
-      b.push({
-        d: x(p, y.point, M),
-        depth: S,
+    for (const M of Dn)
+      x.push({
+        d: w(p, M.point, I),
+        depth: $,
         sourceNodeId: r.service.id,
-        targetNodeId: y.nodeId,
-        targetBarIndex: y.barIndex,
-        active: y.active
+        targetNodeId: M.nodeId,
+        targetBarIndex: M.barIndex,
+        active: M.active
       });
-    for (const y of Nn)
-      b.push({
-        d: x(p, y.point, M + te),
-        depth: S,
+    for (const M of Nn)
+      x.push({
+        d: w(p, M.point, I + oe),
+        depth: $,
         sourceNodeId: r.service.id,
-        targetNodeId: y.nodeId,
-        targetBarIndex: y.barIndex,
-        active: y.active
+        targetNodeId: M.nodeId,
+        targetBarIndex: M.barIndex,
+        active: M.active
       });
   }
   for (const r of this.row1SideServices()) {
-    const l = D(r.service.id);
-    if (!l || !vn)
+    const g = k(r.service.id);
+    if (!g || !vn)
       continue;
-    const p = c(l);
-    b.push({
+    const p = s(g);
+    x.push({
       d: `M${a(p[0])},${a(p[1])}L${a(p[0])},${a(vn)}`,
-      depth: S,
+      depth: $,
       sourceNodeId: r.service.id,
       targetNodeId: "bus-rail",
       targetBarIndex: -1,
       active: !0,
       renderMode: "base-only"
-    }), Hn && b.push({
-      d: x(p, Hn, vn - ve),
-      depth: S,
+    }), Hn && x.push({
+      d: w(p, Hn, vn - xe),
+      depth: $,
       sourceNodeId: r.service.id,
       targetNodeId: "storage",
       targetBarIndex: -1,
@@ -1180,9 +1178,9 @@ Ln = function() {
       renderMode: "glow-only"
     });
     for (const f of Dn)
-      b.push({
-        d: x(p, f.point, vn),
-        depth: S,
+      x.push({
+        d: w(p, f.point, vn),
+        depth: $,
         sourceNodeId: r.service.id,
         targetNodeId: f.nodeId,
         targetBarIndex: f.barIndex,
@@ -1190,34 +1188,34 @@ Ln = function() {
         renderMode: "glow-only"
       });
     for (const f of Nn) {
-      const [M, y] = p, [I, sn] = f.point, F = vn, J = we, Zn = J - M, cn = Math.min(V, Math.abs(Zn) / 2, Math.abs(F - y) / 2), Ce = Math.sign(Zn), Un = I - J;
+      const [I, M] = p, [P, sn] = f.point, F = vn, J = Ce, Un = J - I, cn = Math.min(V, Math.abs(Un) / 2, Math.abs(F - M) / 2), ye = Math.sign(Un), Jn = P - J;
       let ie;
-      if (Math.abs(Un) < 3) {
-        const Y = a((J + I) / 2);
+      if (Math.abs(Jn) < 3) {
+        const Y = a((J + P) / 2);
         ie = [
-          `M${a(M)},${a(y)}`,
-          `L${a(M)},${a(F - cn)}`,
-          `Q${a(M)},${a(F)},${a(M + cn * Ce)},${a(F)}`,
+          `M${a(I)},${a(M)}`,
+          `L${a(I)},${a(F - cn)}`,
+          `Q${a(I)},${a(F)},${a(I + cn * ye)},${a(F)}`,
           `L${a(Y)},${a(F)}`,
           `L${a(Y)},${a(sn)}`
         ].join("");
       } else {
-        const Y = F + te, ye = Math.sign(Un), Me = Math.min(V, te / 2, Math.abs(Un) / 2), Ie = Math.min(V, Math.abs(Un) / 2, Math.abs(sn - Y) / 2);
+        const Y = F + oe, Me = Math.sign(Jn), Ie = Math.min(V, oe / 2, Math.abs(Jn) / 2), Pe = Math.min(V, Math.abs(Jn) / 2, Math.abs(sn - Y) / 2);
         ie = [
-          `M${a(M)},${a(y)}`,
-          `L${a(M)},${a(F - cn)}`,
-          `Q${a(M)},${a(F)},${a(M + cn * Ce)},${a(F)}`,
+          `M${a(I)},${a(M)}`,
+          `L${a(I)},${a(F - cn)}`,
+          `Q${a(I)},${a(F)},${a(I + cn * ye)},${a(F)}`,
           `L${a(J)},${a(F)}`,
-          `L${a(J)},${a(Y - Me)}`,
-          `Q${a(J)},${a(Y)},${a(J + Me * ye)},${a(Y)}`,
-          `L${a(I - Ie * ye)},${a(Y)}`,
-          `Q${a(I)},${a(Y)},${a(I)},${a(Y + Ie)}`,
-          `L${a(I)},${a(sn)}`
+          `L${a(J)},${a(Y - Ie)}`,
+          `Q${a(J)},${a(Y)},${a(J + Ie * Me)},${a(Y)}`,
+          `L${a(P - Pe * Me)},${a(Y)}`,
+          `Q${a(P)},${a(Y)},${a(P)},${a(Y + Pe)}`,
+          `L${a(P)},${a(sn)}`
         ].join("");
       }
-      b.push({
+      x.push({
         d: ie,
-        depth: S,
+        depth: $,
         sourceNodeId: r.service.id,
         targetNodeId: f.nodeId,
         targetBarIndex: f.barIndex,
@@ -1228,35 +1226,62 @@ Ln = function() {
   }
   for (const r of this.row2Services())
     if (r.loadBalancer) {
-      const l = D(r.loadBalancer.id), p = q(r.service.id, r.service.containers.active);
-      if (l && p.length) {
-        const f = c(l), M = Math.min(...p.map((I) => I.point[1])), y = (f[1] + M) / 2;
-        for (const I of p)
-          b.push({
-            d: x(f, I.point, y),
-            depth: A,
+      const g = k(r.loadBalancer.id), p = q(r.service.id, r.service.containers.active);
+      if (g && p.length) {
+        const f = s(g), I = Math.min(...p.map((P) => P.point[1])), M = (f[1] + I) / 2;
+        for (const P of p)
+          x.push({
+            d: w(f, P.point, M),
+            depth: L,
             sourceNodeId: r.loadBalancer.id,
             targetNodeId: r.service.id,
-            targetBarIndex: I.barIndex,
-            active: I.active
+            targetBarIndex: P.barIndex,
+            active: P.active
           });
       }
     }
-  this.annotatedPaths.set(b), requestAnimationFrame(() => {
+  this.annotatedPaths.set(x), requestAnimationFrame(() => {
     const r = e.querySelector(".__canvas > .__svg-layer");
     if (!r)
       return;
-    const l = this.annotatedPaths();
+    const g = this.annotatedPaths();
     let p = !1;
-    for (let f = 0; f < l.length; f++) {
-      if (l[f].cachedLength != null)
+    for (let f = 0; f < g.length; f++) {
+      if (g[f].cachedLength != null)
         continue;
-      const M = r.querySelector(`[data-path-idx="${f}"]`);
-      M && (l[f].cachedLength = Math.ceil(M.getTotalLength()), p = !0);
+      const I = r.querySelector(`[data-path-idx="${f}"]`);
+      I && (g[f].cachedLength = Math.ceil(I.getTotalLength()), p = !0);
     }
-    p && this.annotatedPaths.set([...l]), d(this, gn) && (h(this, gn, !1), this.pathsVisible.set(!0));
+    p && this.annotatedPaths.set([...g]), d(this, gn) && (h(this, gn, !1), this.pathsVisible.set(!0));
   });
-}, Jn = function(e) {
+}, /**
+ * The CSS top pins storage for the serious layout; realign it to the
+ * actual row-2 position (keeping the design's +11px offset) so mode
+ * switches — where the lw infra stack is much shorter — keep it level.
+ */
+fe = function(e) {
+  const n = e.querySelector(".__external-node"), o = e.querySelectorAll(".__services-row");
+  if (!n || o.length < 2)
+    return;
+  const i = e.getBoundingClientRect();
+  if (i.width === 0)
+    return;
+  const y = i.width / e.offsetWidth, s = (o[o.length - 1].getBoundingClientRect().top - i.top) / y;
+  n.style.top = `${Math.round(s + 11)}px`;
+}, /**
+ * During the mode crossfade the services rows travel with the animating
+ * grid heights — re-pin storage to row 2 every frame so it visibly moves
+ * with the boxes instead of jumping once the layout settles.
+ */
+Le = function() {
+  const e = d(this, Q).nativeElement.querySelector(".__canvas");
+  if (!e)
+    return;
+  const n = ++re(this, $n)._, o = performance.now(), i = () => {
+    n === d(this, $n) && (b(this, l, fe).call(this, e), performance.now() - o < 450 && requestAnimationFrame(i));
+  };
+  requestAnimationFrame(i);
+}, Yn = function(e) {
   const n = e.category === "managed" ? "orange" : "cyan";
   let o;
   if (e.hasLoadBalancer) {
@@ -1272,29 +1297,29 @@ balancers`,
   }
   return { service: e, barColor: n, loadBalancer: o };
 }, // ─── Trace orchestrator ────────────────────────────────
-Ae = function() {
+Be = function() {
   if (d(this, fn) || typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches)
     return;
   h(this, fn, !0);
   const e = () => {
-    C(this, _, Be).call(this), h(this, _n, window.setTimeout(e, Zt + Math.random() * Ut));
+    b(this, l, Fe).call(this), h(this, _n, window.setTimeout(e, Ut + Math.random() * Jt));
   };
   h(this, _n, window.setTimeout(e, Te));
   const n = () => {
-    C(this, _, Fe).call(this), h(this, pn, window.setTimeout(n, Jt + Math.random() * Yt));
+    b(this, l, je).call(this), h(this, pn, window.setTimeout(n, Yt + Math.random() * Qt));
   };
   this.row1SideServices().length && h(this, pn, window.setTimeout(n, Te + 600));
-}, pe = function() {
-  h(this, fn, !1), clearTimeout(d(this, _n)), clearTimeout(d(this, pn)), C(this, _, Yn).call(this);
-}, Yn = function() {
+}, ue = function() {
+  h(this, fn, !1), clearTimeout(d(this, _n)), clearTimeout(d(this, pn)), b(this, l, Qn).call(this);
+}, Qn = function() {
   d(this, an).forEach((e) => e()), d(this, an).clear(), d(this, rn).clear(), h(this, on, !1);
-}, Be = function() {
+}, Fe = function() {
   const e = this.annotatedPaths();
   if (!e.length)
     return;
-  const n = C(this, _, qe).call(this, e);
-  n.length && C(this, _, fe).call(this, n);
-}, Fe = function() {
+  const n = b(this, l, Ve).call(this, e);
+  n.length && b(this, l, me).call(this, n);
+}, je = function() {
   if (d(this, on))
     return;
   const e = this.annotatedPaths();
@@ -1303,106 +1328,106 @@ Ae = function() {
   const n = this.row1SideServices();
   if (!n.length)
     return;
-  const o = n[Math.floor(Math.random() * n.length)], i = C(this, _, je).call(this, e, o.service.id);
+  const o = n[Math.floor(Math.random() * n.length)], i = b(this, l, qe).call(this, e, o.service.id);
   if (i.length) {
-    h(this, on, !0), C(this, _, fe).call(this, i);
-    const O = i.length * ce + En + kn + le + 100;
+    h(this, on, !0), b(this, l, me).call(this, i);
+    const y = i.length * le + En + Rn + de + 100;
     setTimeout(() => {
       h(this, on, !1);
-    }, O);
+    }, y);
   }
 }, /**
  * Pick a route starting from a side service (worker).
  * Uses worker's own glow-only depth-3 paths (invisible base, full path to target).
  * Optionally continues with depth-4 (LB → managed service).
  */
-je = function(e, n) {
-  const o = [], i = e.filter((c) => c.sourceNodeId === n && c.renderMode === "glow-only" && c.active);
+qe = function(e, n) {
+  const o = [], i = e.filter((s) => s.sourceNodeId === n && s.renderMode === "glow-only" && s.active);
   if (!i.length)
     return o;
-  const O = C(this, _, Qn).call(this, i);
-  o.push(e.indexOf(O));
-  const v = e.filter((c) => c.depth === O.depth + 1 && c.sourceNodeId === O.targetNodeId && c.active);
+  const y = b(this, l, Xn).call(this, i);
+  o.push(e.indexOf(y));
+  const v = e.filter((s) => s.depth === y.depth + 1 && s.sourceNodeId === y.targetNodeId && s.active);
   if (v.length) {
-    const c = C(this, _, Qn).call(this, v);
-    o.push(e.indexOf(c));
+    const s = b(this, l, Xn).call(this, v);
+    o.push(e.indexOf(s));
   }
   return o;
-}, qe = function(e) {
+}, Ve = function(e) {
   const n = [];
   let o = "endpoint";
   for (let i = 0; i <= 4; i++) {
-    const O = e.filter((c) => c.depth === i && c.sourceNodeId === o && c.active);
-    if (!O.length)
+    const y = e.filter((s) => s.depth === i && s.sourceNodeId === o && s.active);
+    if (!y.length)
       break;
-    const v = C(this, _, Qn).call(this, O);
+    const v = b(this, l, Xn).call(this, y);
     n.push(e.indexOf(v)), o = v.targetNodeId;
   }
   return n;
-}, Qn = function(e) {
+}, Xn = function(e) {
   if (e.length === 1)
-    return C(this, _, Xn).call(this, e[0]), e[0];
+    return b(this, l, Kn).call(this, e[0]), e[0];
   const n = e.map((v) => {
-    const c = `${v.targetNodeId}:${v.targetBarIndex}`;
-    return 1 / ((d(this, rn).get(c) ?? 0) + 1);
-  }), o = n.reduce((v, c) => v + c, 0);
+    const s = `${v.targetNodeId}:${v.targetBarIndex}`;
+    return 1 / ((d(this, rn).get(s) ?? 0) + 1);
+  }), o = n.reduce((v, s) => v + s, 0);
   let i = Math.random() * o;
   for (let v = 0; v < e.length; v++)
     if (i -= n[v], i <= 0)
-      return C(this, _, Xn).call(this, e[v]), e[v];
-  const O = e.at(-1);
-  return C(this, _, Xn).call(this, O), O;
-}, Xn = function(e) {
+      return b(this, l, Kn).call(this, e[v]), e[v];
+  const y = e.at(-1);
+  return b(this, l, Kn).call(this, y), y;
+}, Kn = function(e) {
   const n = `${e.targetNodeId}:${e.targetBarIndex}`;
   d(this, rn).set(n, (d(this, rn).get(n) ?? 0) + 1);
-}, fe = function(e) {
-  const n = this.annotatedPaths(), i = d(this, nn).nativeElement.querySelector(".__canvas"), O = i?.querySelector(":scope > .__svg-layer");
-  if (!i || !O)
+}, me = function(e) {
+  const n = this.annotatedPaths(), i = d(this, Q).nativeElement.querySelector(".__canvas"), y = i?.querySelector(":scope > .__svg-layer");
+  if (!i || !y)
     return;
-  const v = [], c = ++Oe(this, jn)._, D = [];
-  e.forEach((k, a) => {
-    const x = n[k], b = a * ce, w = O.querySelector(`[data-path-idx="${k}"]`);
-    if (w) {
-      const S = x.cachedLength ?? Math.ceil(w.getTotalLength());
-      w.style.setProperty("--path-len", String(S)), D.push({
-        el: w,
+  const v = [], s = ++re(this, qn)._, k = [];
+  e.forEach((E, a) => {
+    const w = n[E], x = a * le, C = y.querySelector(`[data-path-idx="${E}"]`);
+    if (C) {
+      const $ = w.cachedLength ?? Math.ceil(C.getTotalLength());
+      C.style.setProperty("--path-len", String($)), k.push({
+        el: C,
         classes: ["__path-glow--active", "__path-glow--decay"]
       }), v.push(setTimeout(() => {
-        w.classList.add("__path-glow--active");
-      }, b)), v.push(setTimeout(() => {
-        w.classList.remove("__path-glow--active"), w.classList.add("__path-glow--decay");
-      }, b + En + kn)), v.push(setTimeout(() => {
-        w.classList.remove("__path-glow--decay");
-      }, b + En + kn + le));
+        C.classList.add("__path-glow--active");
+      }, x)), v.push(setTimeout(() => {
+        C.classList.remove("__path-glow--active"), C.classList.add("__path-glow--decay");
+      }, x + En + Rn)), v.push(setTimeout(() => {
+        C.classList.remove("__path-glow--decay");
+      }, x + En + Rn + de));
     }
-    const z = b + En * 0.85;
-    if (x.targetBarIndex >= 0) {
-      const A = i.querySelector(`[data-node-id="${x.targetNodeId}"]`)?.querySelectorAll("zui-bar-icon")[x.targetBarIndex];
-      A && v.push(setTimeout(() => A.dispatchEvent(new CustomEvent("trace-pulse")), z));
-    } else if (x.targetNodeId === "storage") {
-      const S = i.querySelector('[data-node-id="storage"]');
-      if (S) {
-        const A = z + kn;
-        D.push({ el: S, classes: ["--pulse"] }), v.push(setTimeout(() => S.classList.add("--pulse"), z)), v.push(setTimeout(() => S.classList.remove("--pulse"), A));
+    const z = x + En * 0.85;
+    if (w.targetBarIndex >= 0) {
+      const L = i.querySelector(`[data-node-id="${w.targetNodeId}"]`)?.querySelectorAll("zui-bar-icon")[w.targetBarIndex];
+      L && v.push(setTimeout(() => L.dispatchEvent(new CustomEvent("trace-pulse")), z));
+    } else if (w.targetNodeId === "storage") {
+      const $ = i.querySelector('[data-node-id="storage"]');
+      if ($) {
+        const L = z + Rn;
+        k.push({ el: $, classes: ["--pulse"] }), v.push(setTimeout(() => $.classList.add("--pulse"), z)), v.push(setTimeout(() => $.classList.remove("--pulse"), L));
       }
     }
   });
   const q = () => {
-    v.forEach((k) => clearTimeout(k)), D.forEach(({ el: k, classes: a }) => k.classList.remove(...a));
+    v.forEach((E) => clearTimeout(E)), k.forEach(({ el: E, classes: a }) => E.classList.remove(...a));
   };
-  d(this, an).set(c, q);
-  const V = e.length * ce + En + kn + le + 100;
+  d(this, an).set(s, q);
+  const V = e.length * le + En + Rn + de + 100;
   v.push(setTimeout(() => {
-    d(this, an).delete(c);
+    d(this, an).delete(s);
   }, V));
 }, Cn.ɵfac = function(n) {
   return new (n || Cn)();
-}, Cn.ɵcmp = /* @__PURE__ */ ee({ type: Cn, selectors: [["zw-network-diagram"]], inputs: { config: [1, "config"], lightweight: [1, "lightweight"] }, decls: 26, vars: 8, consts: [[1, "__canvas"], ["data-node-id", "endpoint", 1, "__endpoint-row"], ["variant", "endpoint", 3, "label"], [3, "config", "showPaths", "lightweight"], [1, "__zone", "__zone--services"], [1, "__zone-label"], [1, "__services-content"], [1, "__services-row", "__services-row--top"], [1, "__services-side-nodes"], [1, "__services-spacer"], [1, "__services-row", "__services-row--bottom"], ["data-node-id", "storage", 1, "__external-node"], [1, "__svg-layer"], ["variant", "service", 3, "label", "containers", "barColor", "techIcon"], [1, "__compound"], [1, "__compound-lb"], ["variant", "service-highlighted", 3, "label", "containers", "barColor", "highlighted"], [1, "__compound-service"], ["variant", "external", 3, "label", "sublabel"], [1, "__path-base"], [1, "__path-glow"]], template: function(n, o) {
-  if (n & 1 && (m(0, "div", 0)(1, "div", 1), u(2, "zw-diagram-node", 2), g(), m(3, "zw-project-shell", 3)(4, "div", 4)(5, "span", 5), N(6, "Your services"), u(7, "br"), N(8, "with system containers"), g(), m(9, "div", 6)(10, "div", 7), u(11, "div"), R(12, Nt, 2, 5, "div", null, ge), W(14, kt, 3, 0, "div", 8)(15, Rt, 1, 0, "div"), g(), u(16, "div", 9), m(17, "div", 10), R(18, Bt, 2, 1, null, null, ge), g()()()(), W(20, Ft, 2, 2, "div", 11), Wn(), m(21, "svg", 12), R(22, qt, 1, 1, null, null, de), R(24, Wt, 1, 1, null, null, de), g()()), n & 2) {
+}, Cn.ɵcmp = /* @__PURE__ */ te({ type: Cn, selectors: [["zw-network-diagram"]], inputs: { config: [1, "config"], lightweight: [1, "lightweight"] }, decls: 26, vars: 8, consts: [[1, "__canvas"], ["data-node-id", "endpoint", 1, "__endpoint-row"], ["variant", "endpoint", 3, "label"], [3, "config", "showPaths", "lightweight"], [1, "__zone", "__zone--services"], [1, "__zone-label"], [1, "__services-content"], [1, "__services-row", "__services-row--top"], [1, "__services-side-nodes"], [1, "__services-spacer"], [1, "__services-row", "__services-row--bottom"], ["data-node-id", "storage", 1, "__external-node"], [1, "__svg-layer"], ["variant", "service", 3, "label", "containers", "barColor", "techIcon"], [1, "__compound"], [1, "__compound-lb"], ["variant", "service-highlighted", 3, "label", "containers", "barColor", "highlighted"], [1, "__compound-service"], ["variant", "external", 3, "label", "sublabel"], [1, "__path-base"], [1, "__path-glow"]], template: function(n, o) {
+  if (n & 1 && (m(0, "div", 0)(1, "div", 1), u(2, "zw-diagram-node", 2), _(), m(3, "zw-project-shell", 3)(4, "div", 4)(5, "span", 5), D(6, "Your services"), u(7, "br"), D(8, "with system containers"), _(), m(9, "div", 6)(10, "div", 7), u(11, "div"), R(12, Nt, 2, 5, "div", null, _e), W(14, Rt, 3, 0, "div", 8)(15, At, 1, 0, "div"), _(), u(16, "div", 9), m(17, "div", 10), R(18, Ft, 2, 1, null, null, _e), _()()()(), W(20, jt, 2, 2, "div", 11), Gn(), m(21, "svg", 12), R(22, Vt, 1, 1, null, null, he), R(24, Gt, 1, 1, null, null, he), _()()), n & 2) {
     let i;
-    s(2), T("label", o.config().endpoint), s(), T("config", o.shellConfig())("showPaths", !1)("lightweight", o.lightweight()), s(9), L(o.row1MainServices()), s(2), G(o.row1SideServices().length ? 14 : 15), s(4), L(o.row2Services()), s(2), G((i = o.resolvedStorage()) ? 20 : -1, i), s(), bn("__svg-layer--visible", o.pathsVisible()), s(), L(o.annotatedPaths()), s(2), L(o.annotatedPaths());
+    c(2), S("label", o.config().endpoint), c(), S("config", o.shellConfig())("showPaths", !1)("lightweight", o.lightweight()), c(9), A(o.row1MainServices()), c(2), G(o.row1SideServices().length ? 14 : 15), c(4), A(o.row2Services()), c(2), G((i = o.resolvedStorage()) ? 20 : -1, i), c(), bn("__svg-layer--visible", o.pathsVisible()), c(), A(o.annotatedPaths()), c(2), A(o.annotatedPaths());
   }
-}, dependencies: [ne, he], styles: [`[_nghost-%COMP%] {
+}, dependencies: [ee, ge], styles: [`[_nghost-%COMP%] {
   display: block;
   position: relative;
   width: 100%;
@@ -1613,17 +1638,17 @@ zw-project-shell[_ngcontent-%COMP%] {
     display: none;
   }
 }`], changeDetection: 0 });
-let _e = Cn;
-function $e(t) {
+let pe = Cn;
+function Se(t) {
   const e = t.hostname || t.name, n = t.ports?.[0]?.port;
   return n ? `${e}:${n}` : e;
 }
-function Qt(t) {
-  return t ? Ee[t]?.horizontal === !0 : !1;
+function Xt(t) {
+  return t ? Ne[t]?.horizontal === !0 : !1;
 }
-const Xt = /* @__PURE__ */ new Set(["postgresql", "mariadb", "mongodb", "clickhouse"]);
-function Kt(t) {
-  const e = t.findIndex((O) => O.techIcon && Xt.has(O.techIcon));
+const Kt = /* @__PURE__ */ new Set(["postgresql", "mariadb", "mongodb", "clickhouse"]);
+function no(t) {
+  const e = t.findIndex((y) => y.techIcon && Kt.has(y.techIcon));
   if (e < 0)
     return t;
   const n = Math.floor(t.length / 2);
@@ -1632,70 +1657,70 @@ function Kt(t) {
   const o = [...t], [i] = o.splice(e, 1);
   return o.splice(n, 0, i), o;
 }
-function no(t) {
+function eo(t) {
   const e = t._servicesExtended ?? t.services ?? [];
   let n = !1;
   const o = [], i = [];
-  let O = !1, v;
-  for (const c of e) {
-    if (c.category === "CORE")
+  let y = !1, v;
+  for (const s of e) {
+    if (s.category === "CORE")
       continue;
-    if (c.category === "OBJECT_STORAGE") {
-      O = !0, v = c;
+    if (s.category === "OBJECT_STORAGE") {
+      y = !0, v = s;
       continue;
     }
-    const D = Je(c), q = Ye(c.typeId, D, c.autoscaling?.horizontalAutoscaling?.minContainerCount || 1), V = c.typeId ? Ee[c.typeId]?.HAContainers : void 0, k = D === "HA" && (V?.freeContainers ?? 0) > 0, a = {
-      id: c.hostname || c.name,
-      label: $e(c),
+    const k = tt(s), q = ot(s.typeId, k, s.autoscaling?.horizontalAutoscaling?.minContainerCount || 1), V = s.typeId ? Ne[s.typeId]?.HAContainers : void 0, E = k === "HA" && (V?.freeContainers ?? 0) > 0, a = {
+      id: s.hostname || s.name,
+      label: Se(s),
       containers: { active: q, standby: 0 },
-      techIcon: c.typeId,
-      ...k ? {
+      techIcon: s.typeId,
+      ...E ? {
         hasLoadBalancer: !0,
         loadBalancer: {
           containers: { active: V.freeContainers, standby: 0 }
         }
       } : {}
     };
-    if (Qt(c.typeId)) {
-      const x = n ? "side-runtime" : "http-runtime";
-      n || (n = !0), o.push({ ...a, category: x });
+    if (Xt(s.typeId)) {
+      const w = n ? "side-runtime" : "http-runtime";
+      n || (n = !0), o.push({ ...a, category: w });
     } else
       i.push({ ...a, category: "managed" });
   }
   return {
-    ...ke,
-    services: [...o, ...Kt(i)],
-    ...O && v ? {
+    ...Ee,
+    services: [...o, ...no(i)],
+    ...y && v ? {
       storage: {
         label: "Object storage",
-        sublabel: $e(v)
+        sublabel: Se(v)
       }
     } : {}
   };
 }
-function eo(t, e) {
+function to(t, e) {
   t & 1 && u(0, "div", 1);
 }
-function to(t, e) {
-  if (t & 1 && (m(0, "div", 2), N(1), g()), t & 2) {
-    const n = P();
-    s(), Se("Could not load recipe “", n.slug() || "unknown", "”.");
+function oo(t, e) {
+  if (t & 1 && (m(0, "div", 2), D(1), _()), t & 2) {
+    const n = O();
+    c(), $e("Could not load recipe “", n.slug() || "unknown", "”.");
   }
 }
-function oo(t, e) {
+function io(t, e) {
   if (t & 1 && u(0, "zw-network-diagram", 3), t & 2) {
-    const n = P();
-    T("config", e)("lightweight", n.lightweight());
+    const n = O();
+    S("config", e)("lightweight", n.lightweight());
   }
 }
-var qn, Sn, zn, Vn;
+var Vn, zn, kn, Wn;
 const yn = class yn {
   constructor() {
-    $(this, qn);
-    $(this, Sn);
-    $(this, zn);
-    $(this, Vn);
-    this.slug = E(), this.recipeData = E(void 0, { transform: (e) => {
+    T(this, Vn);
+    T(this, zn);
+    T(this, kn);
+    T(this, Wn);
+    this.slug = N(), this.recipeData = N(void 0, { transform: (e) => {
       if (typeof e != "string")
         return e ?? void 0;
       if (e.trim())
@@ -1704,43 +1729,43 @@ const yn = class yn {
         } catch {
           return;
         }
-    } }), this.environment = E("highly-available-production"), this.mode = E("auto"), this.apiBase = E("https://api.zerops.io"), h(this, qn, An(ot)), this.recipe = un(null), this.loading = un(!0), this.error = un(!1), h(this, Sn, j(() => {
+    } }), this.environment = N("highly-available-production"), this.mode = N("auto"), this.apiBase = N("https://api.zerops.io"), h(this, Vn, Bn(Xe)), this.recipe = un(null), this.loading = un(!0), this.error = un(!1), h(this, zn, j(() => {
       const e = this.recipe();
       if (!e)
         return;
       const n = e._environmentsExtended || [];
-      return n.find((o) => o._key === this.environment()) ?? Qe(n) ?? void 0;
+      return n.find((o) => o._key === this.environment()) ?? it(n) ?? void 0;
     })), this.diagramConfig = j(() => {
-      const e = d(this, Sn).call(this);
-      return e ? no(e) : void 0;
+      const e = d(this, zn).call(this);
+      return e ? eo(e) : void 0;
     }), this.lightweight = j(() => {
       const e = this.mode();
       if (e === "lightweight")
         return !0;
       if (e === "serious")
         return !1;
-      const n = d(this, Sn).call(this);
-      return n ? Xe(n._servicesExtended) === "LIGHT" : !1;
-    }), h(this, zn, new Ke()), h(this, Vn, nt(d(this, zn).pipe(et((e) => it(d(this, qn), this.apiBase(), e))))), Kn(() => {
+      const n = d(this, zn).call(this);
+      return n ? at(n._servicesExtended) === "LIGHT" : !1;
+    }), h(this, kn, new Je()), h(this, Wn, Ye(d(this, kn).pipe(Qe((e) => st(d(this, Vn), this.apiBase(), e))))), ne(() => {
       const e = this.recipeData(), n = this.slug();
       if (e) {
-        const o = tt(e);
+        const o = rt(e);
         this.loading.set(!1), this.error.set(o.error), this.recipe.set(o.recipe);
-      } else n && (this.loading.set(!0), this.error.set(!1), this.recipe.set(null), d(this, zn).next(n));
-    }), Kn(() => {
-      const e = d(this, Vn).call(this);
+      } else n && (this.loading.set(!0), this.error.set(!1), this.recipe.set(null), d(this, kn).next(n));
+    }), ne(() => {
+      const e = d(this, Wn).call(this);
       e && (this.loading.set(!1), this.error.set(e.error), this.recipe.set(e.recipe));
     });
   }
 };
-qn = new WeakMap(), Sn = new WeakMap(), zn = new WeakMap(), Vn = new WeakMap(), yn.ɵfac = function(n) {
+Vn = new WeakMap(), zn = new WeakMap(), kn = new WeakMap(), Wn = new WeakMap(), yn.ɵfac = function(n) {
   return new (n || yn)();
-}, yn.ɵcmp = /* @__PURE__ */ ee({ type: yn, selectors: [["zwe-network-diagram-element"]], inputs: { slug: [1, "slug"], recipeData: [1, "recipeData"], environment: [1, "environment"], mode: [1, "mode"], apiBase: [1, "apiBase"] }, decls: 4, vars: 1, consts: [[1, "zerops"], ["aria-hidden", "true", 1, "__skeleton"], [1, "__error"], [3, "config", "lightweight"]], template: function(n, o) {
-  if (n & 1 && (m(0, "div", 0), W(1, eo, 1, 0, "div", 1)(2, to, 2, 1, "div", 2)(3, oo, 1, 2, "zw-network-diagram", 3), g()), n & 2) {
+}, yn.ɵcmp = /* @__PURE__ */ te({ type: yn, selectors: [["zwe-network-diagram-element"]], inputs: { slug: [1, "slug"], recipeData: [1, "recipeData"], environment: [1, "environment"], mode: [1, "mode"], apiBase: [1, "apiBase"] }, decls: 4, vars: 1, consts: [[1, "zerops"], ["aria-hidden", "true", 1, "__skeleton"], [1, "__error"], [3, "config", "lightweight"]], template: function(n, o) {
+  if (n & 1 && (m(0, "div", 0), W(1, to, 1, 0, "div", 1)(2, oo, 2, 1, "div", 2)(3, io, 1, 2, "zw-network-diagram", 3), _()), n & 2) {
     let i;
-    s(), G(o.loading() ? 1 : o.error() ? 2 : (i = o.diagramConfig()) ? 3 : -1, i);
+    c(), G(o.loading() ? 1 : o.error() ? 2 : (i = o.diagramConfig()) ? 3 : -1, i);
   }
-}, dependencies: [_e], styles: [`[_nghost-%COMP%] { display: block; }
+}, dependencies: [pe], styles: [`[_nghost-%COMP%] { display: block; }
 
     .__skeleton[_ngcontent-%COMP%] {
       height: 420px;
@@ -1757,7 +1782,7 @@ qn = new WeakMap(), Sn = new WeakMap(), zn = new WeakMap(), Vn = new WeakMap(),
       color: var(--mat-sys-on-error-container);
       font-size: 14px;
     }`], changeDetection: 0 });
-let ue = yn;
-at().then((t) => {
-  customElements.get("zerops-network-diagram") || customElements.define("zerops-network-diagram", rt(ue, { injector: t.injector }));
+let ve = yn;
+Ke().then((t) => {
+  customElements.get("zerops-network-diagram") || customElements.define("zerops-network-diagram", nt(ve, { injector: t.injector }));
 });