@zerops/web-components 0.1.0 → 0.2.0

package/network-diagram.js

@@ -1,18 +1,18 @@
-var me = (t) => {
+var Ce = (t) => {
   throw TypeError(t);
 };
-var Xn = (t, e, n) => e.has(t) || me("Cannot " + n);
-var _ = (t, e, n) => (Xn(t, e, "read from private field"), n ? n.call(t) : e.get(t)), T = (t, e, n) => e.has(t) ? me("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), g = (t, e, n, o) => (Xn(t, e, "write to private field"), o ? o.call(t, n) : e.set(t, n), n), w = (t, e, n) => (Xn(t, e, "access private method"), n);
-var ve = (t, e, n, o) => ({
+var ee = (t, e, n) => e.has(t) || Ce("Cannot " + n);
+var d = (t, e, n) => (ee(t, e, "read from private field"), n ? n.call(t) : e.get(t)), $ = (t, e, n) => e.has(t) ? Ce("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), f = (t, e, n, o) => (ee(t, e, "write to private field"), o ? o.call(t, n) : e.set(t, n), n), C = (t, e, n) => (ee(t, e, "access private method"), n);
+var ye = (t, e, n, o) => ({
   set _(i) {
-    g(t, e, i, n);
+    f(t, e, i, n);
   },
   get _() {
-    return _(t, e, o);
+    return d(t, e, o);
   }
 });
-import { aa as R, at as G, r as Yn, bl as ke, au as Ee, av as Re, ax as V, aA as Z, ba as Le, bb as Dn, aw as m, aC as z, ay as d, aB as I, az as s, aD as pn, bh as L, bN as X, bi as A, aF as Ce, a3 as p, ao as M, B as xn, l as kn, b0 as we, bA as Un, n as ye, F as Me, b7 as Ae, b9 as Be, bL as Fn, bm as oe, ak as tn, bt as Fe, bs as je, bZ as Ie, b_ as qe, j as We, bT as Ge, J as Ve, bW as Ze, bU as He, bV as Ue, bX as Je, bY as Ye } from "./chunks/recipe-fetch-BEQGCaPU.js";
-const Pe = {
+import { aa as k, at as j, r as Xn, bl as Be, au as Fe, av as je, ax as W, aA as V, ba as qe, bb as kn, aw as m, aC as N, ay as h, aB as P, az as c, aD as pn, bh as R, bN as Q, bi as L, aF as Pe, a3 as u, ao as T, B as xn, l as Ln, b0 as Oe, bA as Yn, n as Te, F as $e, b7 as Ge, b9 as We, bL as qn, bm as re, ak as en, bt as Ve, bs as Ze, bZ as Se, b_ as He, bq as Ue, j as Je, bT as Ye, J as Qe, bW as Xe, bU as Ke, bV as nt, bX as et, bY as tt } from "./chunks/recipe-fetch-D2IpKMVr.js";
+const ze = {
   endpoint: "https://my-app.com",
   infrastructure: {
     ctrl: { active: 1, standby: 1 },
@@ -68,152 +68,152 @@ const Pe = {
     sublabel: "storage:6379"
   }
 };
-function Qe(t, e) {
-  if (t & 1 && (m(0, "div", 0)(1, "span", 7), z(2), d()()), t & 2) {
-    const n = I();
-    s(2), pn(n.label());
-  }
-}
-function Xe(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !0);
-  }
-}
-function Ke(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !1);
-  }
-}
-function nt(t, e) {
-  if (t & 1 && p(0, "mat-icon", 12), t & 2) {
-    const n = e.$implicit;
-    M("svgIcon", n);
-  }
-}
-function et(t, e) {
-  if (t & 1 && L(0, nt, 1, 1, "mat-icon", 12, X), t & 2) {
-    const n = I(2);
-    A(n.techIcons());
-  }
-}
-function tt(t, e) {
-  if (t & 1 && p(0, "mat-icon", 12), t & 2) {
-    const n = I(2);
-    M("svgIcon", n.techIcon());
-  }
-}
 function ot(t, e) {
-  if (t & 1 && (m(0, "div", 1)(1, "div", 8), L(2, Xe, 1, 2, "zui-bar-icon", 9, X), L(4, Ke, 1, 2, "zui-bar-icon", 9, X), d(), m(6, "span", 10), z(7), d(), m(8, "div", 11), V(9, et, 2, 0)(10, tt, 1, 1, "mat-icon", 12), d()()), t & 2) {
-    let n;
-    const o = I();
-    s(2), A(o.activeRange()), s(2), A(o.inactiveRange()), s(3), pn(o.label()), s(2), Z((n = o.techIcons()) != null && n.length ? 9 : o.techIcon() ? 10 : -1);
+  if (t & 1 && (m(0, "div", 0)(1, "span", 7), N(2), h()()), t & 2) {
+    const n = P();
+    c(2), pn(n.label());
   }
 }
 function it(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !0);
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = P(2);
+    T("color", n.barColor())("active", !0);
   }
 }
 function at(t, e) {
-  if (t & 1 && p(0, "mat-icon", 16), t & 2) {
-    const n = I(2);
-    M("svgIcon", n.techIcon());
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = P(2);
+    T("color", n.barColor())("active", !1);
   }
 }
 function rt(t, e) {
-  if (t & 1 && (m(0, "div", 2)(1, "div", 13), L(2, it, 1, 2, "zui-bar-icon", 9, X), d(), m(4, "div", 14)(5, "span", 15), z(6), d(), V(7, at, 1, 1, "mat-icon", 16), d()()), t & 2) {
-    const n = I();
-    s(2), A(n.activeRange()), s(4), pn(n.formatLabel(n.label())), s(), Z(n.techIcon() ? 7 : -1);
+  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
+    const n = e.$implicit;
+    T("svgIcon", n);
   }
 }
 function st(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !0);
+  if (t & 1 && R(0, rt, 1, 1, "mat-icon", 12, Q), t & 2) {
+    const n = P(2);
+    L(n.techIcons());
   }
 }
 function ct(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !1);
+  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
+    const n = P(2);
+    T("svgIcon", n.techIcon());
   }
 }
 function lt(t, e) {
-  if (t & 1 && p(0, "mat-icon", 20), t & 2) {
-    const n = I(2);
-    M("svgIcon", n.techIcon());
+  if (t & 1 && (m(0, "div", 1)(1, "div", 8), R(2, it, 1, 2, "zui-bar-icon", 9, Q), R(4, at, 1, 2, "zui-bar-icon", 9, Q), h(), m(6, "span", 10), N(7), h(), m(8, "div", 11), W(9, st, 2, 0)(10, ct, 1, 1, "mat-icon", 12), h()()), t & 2) {
+    let n;
+    const o = P();
+    c(2), L(o.activeRange()), c(2), L(o.inactiveRange()), c(3), pn(o.label()), c(2), V((n = o.techIcons()) != null && n.length ? 9 : o.techIcon() ? 10 : -1);
   }
 }
 function dt(t, e) {
-  if (t & 1 && (m(0, "div", 3)(1, "div", 17), L(2, st, 1, 2, "zui-bar-icon", 9, X), L(4, ct, 1, 2, "zui-bar-icon", 9, X), d(), m(6, "div", 18)(7, "span", 19), z(8), d(), V(9, lt, 1, 1, "mat-icon", 20), d()()), t & 2) {
-    const n = I();
-    s(2), A(n.activeRange()), s(2), A(n.inactiveRange()), s(4), pn(n.label()), s(), Z(n.techIcon() ? 9 : -1);
-  }
-}
-function _t(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !0);
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = P(2);
+    T("color", n.barColor())("active", !0);
   }
 }
 function ht(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !1);
+  if (t & 1 && u(0, "mat-icon", 16), t & 2) {
+    const n = P(2);
+    T("svgIcon", n.techIcon());
   }
 }
 function gt(t, e) {
-  if (t & 1 && p(0, "mat-icon", 12), t & 2) {
-    const n = I(2);
-    M("svgIcon", n.techIcon());
+  if (t & 1 && (m(0, "div", 2)(1, "div", 13), R(2, dt, 1, 2, "zui-bar-icon", 9, Q), h(), m(4, "div", 14)(5, "span", 15), N(6), h(), W(7, ht, 1, 1, "mat-icon", 16), h()()), t & 2) {
+    const n = P();
+    c(2), L(n.activeRange()), c(4), pn(n.formatLabel(n.label())), c(), V(n.techIcon() ? 7 : -1);
+  }
+}
+function _t(t, e) {
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = P(2);
+    T("color", n.barColor())("active", !0);
   }
 }
 function pt(t, e) {
-  if (t & 1 && (m(0, "div", 4)(1, "div", 21), L(2, _t, 1, 2, "zui-bar-icon", 9, X), L(4, ht, 1, 2, "zui-bar-icon", 9, X), d(), m(6, "div", 22)(7, "span", 23), z(8), d(), V(9, gt, 1, 1, "mat-icon", 12), d()()), t & 2) {
-    const n = I();
-    s(2), A(n.activeRange()), s(2), A(n.inactiveRange()), s(4), pn(n.formatLabel(n.label())), s(), Z(n.techIcon() ? 9 : -1);
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = P(2);
+    T("color", n.barColor())("active", !1);
   }
 }
 function ft(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !0);
+  if (t & 1 && u(0, "mat-icon", 20), t & 2) {
+    const n = P(2);
+    T("svgIcon", n.techIcon());
   }
 }
 function ut(t, e) {
-  if (t & 1 && p(0, "zui-bar-icon", 9), t & 2) {
-    const n = I(2);
-    M("color", n.barColor())("active", !1);
+  if (t & 1 && (m(0, "div", 3)(1, "div", 17), R(2, _t, 1, 2, "zui-bar-icon", 9, Q), R(4, pt, 1, 2, "zui-bar-icon", 9, Q), h(), m(6, "div", 18)(7, "span", 19), N(8), h(), W(9, ft, 1, 1, "mat-icon", 20), h()()), t & 2) {
+    const n = P();
+    c(2), L(n.activeRange()), c(2), L(n.inactiveRange()), c(4), pn(n.label()), c(), V(n.techIcon() ? 9 : -1);
   }
 }
 function mt(t, e) {
-  if (t & 1 && (m(0, "div", 5)(1, "div", 21), L(2, ft, 1, 2, "zui-bar-icon", 9, X), L(4, ut, 1, 2, "zui-bar-icon", 9, X), d(), m(6, "span", 19), z(7), d()()), t & 2) {
-    const n = I();
-    s(2), A(n.activeRange()), s(2), A(n.inactiveRange()), s(3), pn(n.label());
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = P(2);
+    T("color", n.barColor())("active", !0);
   }
 }
 function vt(t, e) {
-  if (t & 1 && (m(0, "div", 26)(1, "span", 27), z(2), d()()), t & 2) {
-    const n = I(2);
-    s(2), pn(n.sublabel());
+  if (t & 1 && u(0, "zui-bar-icon", 9), t & 2) {
+    const n = P(2);
+    T("color", n.barColor())("active", !1);
   }
 }
 function bt(t, e) {
-  if (t & 1 && (m(0, "div", 6)(1, "div", 24)(2, "span", 25), z(3), d()(), V(4, vt, 3, 1, "div", 26), d()), t & 2) {
-    const n = I();
-    s(3), Ce("", n.label(), `
-External`), s(), Z(n.sublabel() ? 4 : -1);
+  if (t & 1 && u(0, "mat-icon", 12), t & 2) {
+    const n = P(2);
+    T("svgIcon", n.techIcon());
+  }
+}
+function xt(t, e) {
+  if (t & 1 && (m(0, "div", 4)(1, "div", 21), R(2, mt, 1, 2, "zui-bar-icon", 9, Q), R(4, vt, 1, 2, "zui-bar-icon", 9, Q), h(), m(6, "div", 22)(7, "span", 23), N(8), h(), W(9, bt, 1, 1, "mat-icon", 12), h()()), t & 2) {
+    const n = P();
+    c(2), L(n.activeRange()), c(2), L(n.inactiveRange()), c(4), pn(n.formatLabel(n.label())), c(), V(n.techIcon() ? 9 : -1);
+  }
+}
+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);
+  }
+}
+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);
+  }
+}
+function yt(t, e) {
+  if (t & 1 && (m(0, "div", 5)(1, "div", 21), R(2, wt, 1, 2, "zui-bar-icon", 9, Q), R(4, Ct, 1, 2, "zui-bar-icon", 9, Q), h(), m(6, "span", 19), N(7), h()()), t & 2) {
+    const n = P();
+    c(2), L(n.activeRange()), c(2), L(n.inactiveRange()), c(3), pn(n.label());
+  }
+}
+function Mt(t, e) {
+  if (t & 1 && (m(0, "div", 26)(1, "span", 27), N(2), h()()), t & 2) {
+    const n = P(2);
+    c(2), pn(n.sublabel());
+  }
+}
+function It(t, e) {
+  if (t & 1 && (m(0, "div", 6)(1, "div", 24)(2, "span", 25), N(3), h()(), W(4, Mt, 3, 1, "div", 26), h()), t & 2) {
+    const n = P();
+    c(3), Pe("", n.label(), `
+External`), c(), V(n.sublabel() ? 4 : -1);
   }
 }
 const un = class un {
   constructor() {
-    this.variant = R.required(), this.label = R.required(), this.sublabel = R(), this.containers = R(), this.barColor = R("orange"), this.techIcon = R(), this.techIcons = R(), this.highlighted = R(!1), this.activeRange = G(() => {
+    this.variant = k.required(), this.label = k.required(), this.sublabel = k(), this.containers = k(), this.barColor = k("orange"), this.techIcon = k(), this.techIcons = k(), this.highlighted = k(!1), this.activeRange = j(() => {
       const e = this.containers();
       return e ? Array.from({ length: e.active }, (n, o) => o) : [];
-    }), this.inactiveRange = G(() => {
+    }), this.inactiveRange = j(() => {
       const e = this.containers();
       return e ? Array.from({ length: e.standby }, (n, o) => o) : [];
     });
@@ -224,14 +224,14 @@ const un = class un {
 };
 un.ɵfac = function(n) {
   return new (n || un)();
-}, un.ɵcmp = /* @__PURE__ */ Yn({ type: un, selectors: [["zw-diagram-node"]], hostVars: 4, hostBindings: function(n, o) {
-  n & 2 && (Le("__node __node--" + o.variant()), Dn("__node--highlighted", o.highlighted()));
+}, un.ɵcmp = /* @__PURE__ */ Xn({ type: un, selectors: [["zw-diagram-node"]], hostVars: 4, hostBindings: function(n, o) {
+  n & 2 && (qe("__node __node--" + o.variant()), kn("__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 && V(0, Qe, 3, 1, "div", 0)(1, ot, 11, 2, "div", 1)(2, rt, 8, 2, "div", 2)(3, dt, 10, 2, "div", 3)(4, pt, 10, 2, "div", 4)(5, mt, 8, 1, "div", 5)(6, bt, 5, 2, "div", 6), n & 2) {
+  if (n & 1 && W(0, ot, 3, 1, "div", 0)(1, lt, 11, 2, "div", 1)(2, gt, 8, 2, "div", 2)(3, ut, 10, 2, "div", 3)(4, xt, 10, 2, "div", 4)(5, yt, 8, 1, "div", 5)(6, It, 5, 2, "div", 6), n & 2) {
     let i;
-    Z((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);
+    V((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: [ke, Ee, Re], styles: [`[_nghost-%COMP%] {
+}, dependencies: [Be, Fe, je], styles: [`[_nghost-%COMP%] {
   display: block;
   position: relative;
   contain: layout style;
@@ -493,52 +493,52 @@ un.ɵfac = function(n) {
   background: #E8E7E7;
   border-radius: 3px;
 }`], changeDetection: 0 });
-let Jn = un;
-const xt = ["*"];
-function Ct(t, e) {
-  if (t & 1 && (Fn(), p(0, "path", 27)), t & 2) {
+let Qn = un;
+const Pt = ["*"];
+function Ot(t, e) {
+  if (t & 1 && (qn(), u(0, "path", 28)), t & 2) {
     const n = e.$implicit;
-    tn("d", n);
+    en("d", n);
   }
 }
-const Kn = {
+const te = {
   ctrl: { active: 1, standby: 1 },
   stats: { active: 1, standby: 0 },
   logger: { active: 1, standby: 0 }
-}, wt = {
+}, Tt = {
   containers: { active: 2, standby: 0 }
 };
-var Cn, En, wn, yn, ln, dn, Nn;
+var wn, An, Cn, yn, ln, dn, En;
 const mn = class mn {
   // ─── Lifecycle ──────────────────────────────────────────
   constructor() {
-    T(this, dn);
-    T(this, Cn);
-    T(this, En);
-    T(this, wn);
-    T(this, yn);
-    T(this, ln);
-    this.config = R({}), this.lightweight = R(!1), this.showPaths = R(!0), this.internalPaths = xn([]), this.pathsVisible = xn(!0), g(this, Cn, kn(ye)), g(this, En, kn(Me)), g(this, yn, !1), this.resolvedInfra = {
+    $(this, dn);
+    $(this, wn);
+    $(this, An);
+    $(this, Cn);
+    $(this, yn);
+    $(this, ln);
+    this.config = k({}), this.lightweight = k(!1), this.showPaths = k(!0), this.internalPaths = xn([]), this.pathsVisible = xn(!0), f(this, wn, Ln(Te)), f(this, An, Ln($e)), f(this, yn, !1), this.resolvedInfra = {
       ctrl: {
         id: "ctrl",
         label: `Project ctrl
 & L3 balancer
 + firewall`,
-        containers: Kn.ctrl,
+        containers: te.ctrl,
         techIcons: ["go"],
         highlighted: !0
       },
       stats: {
         id: "stats",
         label: "Stats",
-        containers: Kn.stats,
+        containers: te.stats,
         techIcon: "sqlite",
         highlighted: !1
       },
       logger: {
         id: "logger",
         label: "Logger",
-        containers: Kn.logger,
+        containers: te.logger,
         techIcon: "victorialogs",
         highlighted: !1
       }
@@ -555,107 +555,107 @@ const mn = class mn {
       id: "l7",
       label: `L7 HTTP
 balancer`,
-      containers: wt.containers,
+      containers: Tt.containers,
       techIcon: "nginx",
       highlighted: !0
-    }, we(() => {
-      g(this, yn, !0), g(this, ln, this.lightweight()), g(this, wn, new ResizeObserver(() => w(this, dn, Nn).call(this))), _(this, wn).observe(_(this, Cn).nativeElement), _(this, En).onDestroy(() => _(this, wn)?.disconnect()), requestAnimationFrame(() => {
-        requestAnimationFrame(() => w(this, dn, Nn).call(this));
+    }, Oe(() => {
+      f(this, yn, !0), f(this, ln, this.lightweight()), f(this, Cn, new ResizeObserver(() => C(this, dn, En).call(this))), d(this, Cn).observe(d(this, wn).nativeElement), d(this, An).onDestroy(() => d(this, Cn)?.disconnect()), requestAnimationFrame(() => {
+        requestAnimationFrame(() => C(this, dn, En).call(this));
       });
-    }), Un(() => {
+    }), Yn(() => {
       this.config();
       const e = this.lightweight();
-      if (!_(this, yn))
+      if (!d(this, yn))
         return;
-      const n = _(this, ln) !== void 0 && _(this, ln) !== e;
-      g(this, ln, e), n ? (this.pathsVisible.set(!1), setTimeout(() => {
+      const n = d(this, ln) !== void 0 && d(this, ln) !== e;
+      f(this, ln, e), n ? (this.pathsVisible.set(!1), setTimeout(() => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            w(this, dn, Nn).call(this), this.pathsVisible.set(!0);
+            C(this, dn, En).call(this), this.pathsVisible.set(!0);
           });
         });
       }, 200)) : requestAnimationFrame(() => {
-        requestAnimationFrame(() => w(this, dn, Nn).call(this));
+        requestAnimationFrame(() => C(this, dn, En).call(this));
       });
     });
   }
 };
-Cn = new WeakMap(), En = new WeakMap(), wn = new WeakMap(), yn = new WeakMap(), ln = new WeakMap(), dn = new WeakSet(), // ─── Internal path computation ──────────────────────────
-Nn = function() {
+wn = new WeakMap(), An = new WeakMap(), Cn = new WeakMap(), yn = new WeakMap(), ln = new WeakMap(), dn = new WeakSet(), // ─── Internal path computation ──────────────────────────
+En = function() {
   if (!this.showPaths()) {
     this.internalPaths.set([]);
     return;
   }
-  const n = _(this, Cn).nativeElement.querySelector(".__project");
+  const n = d(this, wn).nativeElement.querySelector(".__project");
   if (!n)
     return;
   const o = n.getBoundingClientRect();
   if (o.width === 0)
     return;
-  const i = (C) => Math.round(C * 10) / 10, P = (C) => {
-    const b = C.getBoundingClientRect();
+  const i = (x) => Math.round(x * 10) / 10, O = (x) => {
+    const b = x.getBoundingClientRect();
     return [
       i(b.left - o.left + b.width / 2),
       i(b.top - o.top + b.height)
     ];
-  }, v = (C) => {
-    const b = C.getBoundingClientRect();
+  }, v = (x) => {
+    const b = x.getBoundingClientRect();
     return [
       i(b.left - o.left + b.width / 2),
       i(b.top - o.top)
     ];
-  }, c = [], D = 16, j = 27, q = (C, b, O) => {
-    const [N, S] = C, [E, K] = b, U = E - N;
-    if (Math.abs(U) < 3) {
-      const W = i((N + E) / 2);
-      return `M${W},${i(S)}L${W},${i(K)}`;
+  }, s = [], D = 16, q = 27, G = (x, b, w) => {
+    const [z, S] = x, [A, X] = b, tn = A - z;
+    if (Math.abs(tn) < 3) {
+      const K = i((z + A) / 2);
+      return `M${K},${i(S)}L${K},${i(X)}`;
     }
-    const nn = Math.min(D, Math.abs(U) / 2, Math.abs(O - S) / 2, Math.abs(K - O) / 2), F = Math.sign(U), J = Math.sign(K - O) || 1;
+    const H = 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;
     return [
-      `M${i(N)},${i(S)}`,
-      `L${i(N)},${i(O - nn)}`,
-      `Q${i(N)},${i(O)},${i(N + nn * F)},${i(O)}`,
-      `L${i(E - nn * F)},${i(O)}`,
-      `Q${i(E)},${i(O)},${i(E)},${i(O + nn * J)}`,
-      `L${i(E)},${i(K)}`
+      `M${i(z)},${i(S)}`,
+      `L${i(z)},${i(w - H)}`,
+      `Q${i(z)},${i(w)},${i(z + H * B)},${i(w)}`,
+      `L${i(A - H * B)},${i(w)}`,
+      `Q${i(A)},${i(w)},${i(A)},${i(w + H * U)}`,
+      `L${i(A)},${i(X)}`
     ].join("");
-  }, k = n.querySelector(".__zone--services");
+  }, E = n.querySelector(".__zone--services");
   if (this.lightweight()) {
-    const C = n.querySelector('[data-mode="lw"]');
-    if (C && k) {
-      const b = C.querySelector(".__infra-group");
+    const x = n.querySelector('[data-mode="lw"]');
+    if (x && E) {
+      const b = x.querySelector(".__infra-group");
       if (b) {
-        const [O, N] = P(b), S = v(k)[1];
-        c.push(`M${i(O)},${i(N)}L${i(O)},${i(S)}`);
+        const [w, z] = O(b), S = v(E)[1];
+        s.push(`M${i(w)},${i(z)}L${i(w)},${i(S)}`);
       }
     }
   } else {
-    const C = n.querySelector('[data-mode="hw"]');
-    if (!C) {
-      this.internalPaths.set(c);
+    const x = n.querySelector('[data-mode="hw"]');
+    if (!x) {
+      this.internalPaths.set(s);
       return;
     }
-    const b = C.querySelector(".__infra-group"), O = C.querySelector('[data-node-id="ctrl"]'), N = C.querySelector('[data-node-id="l7"]');
-    if (b && O && N) {
-      const S = P(O)[0], E = P(b)[1], K = [S, E], U = Array.from(N.querySelectorAll("zui-bar-icon")), nn = this.resolvedRoutingDisplay.containers.active;
-      for (let F = 0; F < U.length; F++) {
-        if (F >= nn)
+    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")), H = this.resolvedRoutingDisplay.containers.active;
+      for (let B = 0; B < tn.length; B++) {
+        if (B >= H)
           continue;
-        const J = v(U[F]), W = J[1] - j;
-        c.push(q(K, J, W));
+        const U = v(tn[B]), K = U[1] - q;
+        s.push(G(X, U, K));
       }
-      if (k) {
-        const [F, J] = P(N), W = v(k)[1];
-        c.push(`M${i(F)},${i(J)}L${i(F)},${i(W)}`);
+      if (E) {
+        const [B, U] = O(z), K = v(E)[1];
+        s.push(`M${i(B)},${i(U)}L${i(B)},${i(K)}`);
       }
     }
   }
-  this.internalPaths.set(c);
+  this.internalPaths.set(s);
 }, mn.ɵfac = function(n) {
   return new (n || mn)();
-}, mn.ɵcmp = /* @__PURE__ */ Yn({ type: mn, selectors: [["zw-project-shell"]], inputs: { config: [1, "config"], lightweight: [1, "lightweight"], showPaths: [1, "showPaths"] }, ngContentSelectors: xt, 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"], ["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 && (Ae(), m(0, "div", 0)(1, "div", 1)(2, "span", 2), z(3, "Project"), d(), m(4, "span", 3), z(5, "Private VXLAN network"), d()(), m(6, "div", 4)(7, "div", 5)(8, "div", 6)(9, "div", 7)(10, "span", 8), z(11, "Dedicated"), p(12, "br"), z(13, "infrastructure"), p(14, "br"), z(15, "core with routing"), p(16, "br"), z(17, "and balancing"), d(), m(18, "div", 9)(19, "div", 10)(20, "div"), p(21, "zw-diagram-node", 11), d()()()()()(), m(22, "div", 12)(23, "div", 6)(24, "div", 13)(25, "span", 8), z(26, "Dedicated infrastructure core"), d(), m(27, "div", 14)(28, "div", 10)(29, "div", 15), p(30, "zw-diagram-node", 11), d(), m(31, "div", 16)(32, "div", 17), p(33, "zw-diagram-node", 18), d(), m(34, "div", 19), p(35, "zw-diagram-node", 18), d()()()()(), p(36, "div", 20), m(37, "div", 21)(38, "span", 8), z(39, "Dedicated routing and balancing"), d(), m(40, "div", 22)(41, "div", 23), p(42, "zw-diagram-node", 24), d()()()()()(), p(43, "div", 25), Be(44), Fn(), m(45, "svg", 26), L(46, Ct, 1, 1, ":svg:path", 27, oe), d()()), n & 2 && (Dn("__project--lightweight", o.lightweight()), s(7), Dn("__infra-mode--active", o.lightweight()), s(14), M("label", o.resolvedLightweightNode.label)("containers", o.resolvedLightweightNode.containers)("techIcons", o.resolvedLightweightNode.techIcons)("highlighted", o.resolvedLightweightNode.highlighted), s(), Dn("__infra-mode--active", !o.lightweight()), s(8), M("label", o.resolvedInfra.ctrl.label)("containers", o.resolvedInfra.ctrl.containers)("techIcons", o.resolvedInfra.ctrl.techIcons)("highlighted", o.resolvedInfra.ctrl.highlighted), s(3), M("label", o.resolvedInfra.stats.label)("containers", o.resolvedInfra.stats.containers)("techIcon", o.resolvedInfra.stats.techIcon)("highlighted", o.resolvedInfra.stats.highlighted), s(2), M("label", o.resolvedInfra.logger.label)("containers", o.resolvedInfra.logger.containers)("techIcon", o.resolvedInfra.logger.techIcon)("highlighted", o.resolvedInfra.logger.highlighted), s(7), M("label", o.resolvedRoutingDisplay.label)("containers", o.resolvedRoutingDisplay.containers)("techIcon", o.resolvedRoutingDisplay.techIcon)("highlighted", o.resolvedRoutingDisplay.highlighted), s(3), Dn("__svg-layer--visible", o.pathsVisible()), s(), A(o.internalPaths()));
-}, dependencies: [Jn], styles: [`[_nghost-%COMP%] {
+}, mn.ɵcmp = /* @__PURE__ */ Xn({ type: mn, selectors: [["zw-project-shell"]], inputs: { config: [1, "config"], lightweight: [1, "lightweight"], showPaths: [1, "showPaths"] }, ngContentSelectors: Pt, 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 && (Ge(), m(0, "div", 0)(1, "div", 1)(2, "span", 2), N(3, "Project"), h(), m(4, "span", 3), N(5, "Private VXLAN network"), h()(), 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"), h(), m(18, "div", 9)(19, "div", 10)(20, "div", 11), u(21, "zw-diagram-node", 12), h()()()()()(), m(22, "div", 13)(23, "div", 6)(24, "div", 14)(25, "span", 8), N(26, "Dedicated infrastructure core"), h(), m(27, "div", 15)(28, "div", 10)(29, "div", 16), u(30, "zw-diagram-node", 12), h(), m(31, "div", 17)(32, "div", 18), u(33, "zw-diagram-node", 19), h(), m(34, "div", 20), u(35, "zw-diagram-node", 19), h()()()()(), u(36, "div", 21), m(37, "div", 22)(38, "span", 8), N(39, "Dedicated routing and balancing"), h(), m(40, "div", 23)(41, "div", 24), u(42, "zw-diagram-node", 25), h()()()()()(), u(43, "div", 26), We(44), qn(), m(45, "svg", 27), R(46, Ot, 1, 1, ":svg:path", 28, re), h()()), n & 2 && (kn("__project--lightweight", o.lightweight()), c(7), kn("__infra-mode--active", o.lightweight()), c(14), T("label", o.resolvedLightweightNode.label)("containers", o.resolvedLightweightNode.containers)("techIcons", o.resolvedLightweightNode.techIcons)("highlighted", o.resolvedLightweightNode.highlighted), c(), kn("__infra-mode--active", !o.lightweight()), c(8), T("label", o.resolvedInfra.ctrl.label)("containers", o.resolvedInfra.ctrl.containers)("techIcons", o.resolvedInfra.ctrl.techIcons)("highlighted", o.resolvedInfra.ctrl.highlighted), c(3), T("label", o.resolvedInfra.stats.label)("containers", o.resolvedInfra.stats.containers)("techIcon", o.resolvedInfra.stats.techIcon)("highlighted", o.resolvedInfra.stats.highlighted), c(2), T("label", o.resolvedInfra.logger.label)("containers", o.resolvedInfra.logger.containers)("techIcon", o.resolvedInfra.logger.techIcon)("highlighted", o.resolvedInfra.logger.highlighted), c(7), T("label", o.resolvedRoutingDisplay.label)("containers", o.resolvedRoutingDisplay.containers)("techIcon", o.resolvedRoutingDisplay.techIcon)("highlighted", o.resolvedRoutingDisplay.highlighted), c(3), kn("__svg-layer--visible", o.pathsVisible()), c(), L(o.internalPaths()));
+}, dependencies: [Qn], styles: [`[_nghost-%COMP%] {
   display: block;
   position: relative;
 }
@@ -827,109 +827,109 @@ Nn = function() {
   stroke-linecap: round;
   stroke-linejoin: round;
 }`], changeDetection: 0 });
-let ie = mn;
-const ae = (t, e) => e.service.id;
-function yt(t, e) {
-  if (t & 1 && (m(0, "div"), p(1, "zw-diagram-node", 13), d()), t & 2) {
+let se = mn;
+const ce = (t, e) => e.service.id;
+function $t(t, e) {
+  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), h()), t & 2) {
     const n = e.$implicit;
-    tn("data-node-id", n.service.id), s(), M("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
+    en("data-node-id", n.service.id), c(), T("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
   }
 }
-function Mt(t, e) {
-  if (t & 1 && (m(0, "div"), p(1, "zw-diagram-node", 13), d()), t & 2) {
+function St(t, e) {
+  if (t & 1 && (m(0, "div"), u(1, "zw-diagram-node", 13), h()), t & 2) {
     const n = e.$implicit;
-    tn("data-node-id", n.service.id), s(), M("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
+    en("data-node-id", n.service.id), c(), T("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
   }
 }
-function It(t, e) {
-  if (t & 1 && (m(0, "div", 8), L(1, Mt, 2, 5, "div", null, ae), d()), t & 2) {
-    const n = I();
-    s(), A(n.row1SideServices());
+function zt(t, e) {
+  if (t & 1 && (m(0, "div", 8), R(1, St, 2, 5, "div", null, ce), h()), t & 2) {
+    const n = P();
+    c(), L(n.row1SideServices());
   }
 }
-function Pt(t, e) {
-  t & 1 && p(0, "div");
+function Dt(t, e) {
+  t & 1 && u(0, "div");
 }
-function Ot(t, e) {
-  if (t & 1 && (m(0, "div", 14)(1, "div", 15), p(2, "zw-diagram-node", 16), d(), m(3, "div", 17), p(4, "zw-diagram-node", 13), d()()), t & 2) {
-    const n = e, o = I().$implicit;
-    tn("data-node-id", o.service.id + "-compound"), s(), tn("data-node-id", n.id), s(), M("label", n.label)("containers", n.containers)("barColor", n.barColor)("highlighted", !0), s(), tn("data-node-id", o.service.id), s(), M("label", o.service.label)("containers", o.service.containers)("barColor", o.barColor)("techIcon", o.service.techIcon);
+function Nt(t, e) {
+  if (t & 1 && (m(0, "div", 14)(1, "div", 15), u(2, "zw-diagram-node", 16), h(), m(3, "div", 17), u(4, "zw-diagram-node", 13), h()()), t & 2) {
+    const n = e, o = P().$implicit;
+    en("data-node-id", o.service.id + "-compound"), c(), en("data-node-id", n.id), c(), T("label", n.label)("containers", n.containers)("barColor", n.barColor)("highlighted", !0), c(), en("data-node-id", o.service.id), c(), T("label", o.service.label)("containers", o.service.containers)("barColor", o.barColor)("techIcon", o.service.techIcon);
   }
 }
-function Tt(t, e) {
-  if (t & 1 && (m(0, "div"), p(1, "zw-diagram-node", 13), d()), t & 2) {
-    const n = I().$implicit;
-    tn("data-node-id", n.service.id), s(), M("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"), u(1, "zw-diagram-node", 13), h()), t & 2) {
+    const n = P().$implicit;
+    en("data-node-id", n.service.id), c(), T("label", n.service.label)("containers", n.service.containers)("barColor", n.barColor)("techIcon", n.service.techIcon);
   }
 }
-function $t(t, e) {
-  if (t & 1 && V(0, Ot, 5, 11, "div", 14)(1, Tt, 2, 5, "div"), t & 2) {
+function Et(t, e) {
+  if (t & 1 && W(0, Nt, 5, 11, "div", 14)(1, kt, 2, 5, "div"), t & 2) {
     let n;
     const o = e.$implicit;
-    Z((n = o.loadBalancer) ? 0 : 1, n);
+    V((n = o.loadBalancer) ? 0 : 1, n);
   }
 }
-function St(t, e) {
-  if (t & 1 && (m(0, "div", 11), p(1, "zw-diagram-node", 18), d()), t & 2) {
+function Rt(t, e) {
+  if (t & 1 && (m(0, "div", 11), u(1, "zw-diagram-node", 18), h()), t & 2) {
     const n = e;
-    s(), M("label", n.label)("sublabel", n.sublabel);
+    c(), T("label", n.label)("sublabel", n.sublabel);
   }
 }
-function zt(t, e) {
-  if (t & 1 && (Fn(), p(0, "path", 19)), t & 2) {
-    const n = I().$implicit;
-    tn("d", n.d);
+function Lt(t, e) {
+  if (t & 1 && (qn(), u(0, "path", 19)), t & 2) {
+    const n = P().$implicit;
+    en("d", n.d);
   }
 }
-function Dt(t, e) {
-  if (t & 1 && V(0, zt, 1, 1, ":svg:path", 19), t & 2) {
+function At(t, e) {
+  if (t & 1 && W(0, Lt, 1, 1, ":svg:path", 19), t & 2) {
     const n = e.$implicit;
-    Z(n.renderMode !== "glow-only" ? 0 : -1);
+    V(n.renderMode !== "glow-only" ? 0 : -1);
   }
 }
-function Nt(t, e) {
-  if (t & 1 && (Fn(), p(0, "path", 20)), t & 2) {
-    const n = I(), o = n.$implicit, i = n.$index;
-    tn("d", o.d)("data-path-idx", i);
+function Bt(t, e) {
+  if (t & 1 && (qn(), u(0, "path", 20)), t & 2) {
+    const n = P(), o = n.$implicit, i = n.$index;
+    en("d", o.d)("data-path-idx", i);
   }
 }
-function kt(t, e) {
-  if (t & 1 && V(0, Nt, 1, 2, ":svg:path", 20), t & 2) {
+function Ft(t, e) {
+  if (t & 1 && W(0, Bt, 1, 2, ":svg:path", 20), t & 2) {
     const n = e.$implicit;
-    Z(n.renderMode !== "base-only" ? 0 : -1);
+    V(n.renderMode !== "base-only" ? 0 : -1);
   }
 }
-const Et = 660, ne = {
+const jt = 660, oe = {
   ctrl: { active: 1, standby: 1 },
   stats: { active: 1, standby: 0 },
   logger: { active: 1, standby: 0 }
-}, Rt = {
+}, qt = {
   containers: { active: 2, standby: 0 }
-}, Sn = 600, zn = 1050, ee = 525, te = 900, Lt = 3300, At = 900, be = 2250, Bt = 2e3, Ft = 400;
-var en, Mn, In, Pn, On, H, Rn, _n, hn, gn, on, an, rn, h, Gn, Oe, Te, Vn, $e, se, ce, Se, ze, De, Ne, Zn, Hn, le;
+}, Dn = 600, Nn = 1050, ie = 525, ae = 900, Gt = 3300, Wt = 900, Me = 2250, Vt = 2e3, Zt = 400;
+var nn, Mn, In, Pn, On, Z, Bn, hn, gn, _n, on, an, rn, g, Rn, De, Ne, Hn, ke, de, he, Ee, Re, Le, Ae, Un, Jn, ge;
 const vn = class vn {
   // ─── Lifecycle ──────────────────────────────────────────
   constructor() {
-    T(this, h);
-    T(this, en);
-    T(this, Mn);
-    T(this, In);
-    T(this, Pn);
-    T(this, On);
-    T(this, H);
+    $(this, g);
+    $(this, nn);
+    $(this, Mn);
+    $(this, In);
+    $(this, Pn);
+    $(this, On);
+    $(this, Z);
     // rAF id for coalesced recomputation
     // ─── Trace orchestrator state ──────────────────────────
-    T(this, Rn);
-    T(this, _n);
-    T(this, hn);
-    T(this, gn);
-    T(this, on);
-    T(this, an);
-    T(this, rn);
-    this.config = R(Pe), this.annotatedPaths = xn([]), g(this, en, kn(ye)), g(this, Mn, kn(Me)), g(this, Pn, 1), g(this, On, !1), g(this, H, 0), g(this, Rn, 0), g(this, _n, 0), g(this, hn, 0), g(this, gn, !1), g(this, on, !1), g(this, an, /* @__PURE__ */ new Map()), g(this, rn, /* @__PURE__ */ new Map()), this.shellConfig = G(() => ({
+    $(this, Bn);
+    $(this, hn);
+    $(this, gn);
+    $(this, _n);
+    $(this, on);
+    $(this, an);
+    $(this, rn);
+    this.config = k(ze), this.lightweight = k(!1), this.annotatedPaths = xn([]), f(this, nn, Ln(Te)), f(this, Mn, Ln($e)), f(this, Pn, 1), f(this, On, !1), f(this, Z, 0), f(this, Bn, 0), f(this, hn, 0), f(this, gn, 0), f(this, _n, !1), f(this, on, !1), f(this, an, /* @__PURE__ */ new Map()), f(this, rn, /* @__PURE__ */ new Map()), this.shellConfig = j(() => ({
       infrastructure: this.config().infrastructure,
       routing: this.config().routing
-    })), this.resolvedInfra = G(() => {
+    })), this.resolvedInfra = j(() => {
       const e = this.config().infrastructure ?? {};
       return {
         ctrl: {
@@ -937,81 +937,81 @@ const vn = class vn {
           label: `Project ctrl
 & L3 balancer
 + firewall`,
-          containers: e.ctrl ?? ne.ctrl,
+          containers: e.ctrl ?? oe.ctrl,
           techIcons: ["go"],
           highlighted: !0
         },
         stats: {
           id: "stats",
           label: "Stats",
-          containers: e.stats ?? ne.stats,
+          containers: e.stats ?? oe.stats,
           techIcon: "sqlite",
           highlighted: !1
         },
         logger: {
           id: "logger",
           label: "Logger",
-          containers: e.logger ?? ne.logger,
+          containers: e.logger ?? oe.logger,
           techIcon: "victorialogs",
           highlighted: !1
         }
       };
-    }), this.resolvedRouting = G(() => {
+    }), this.resolvedRouting = j(() => {
       const e = this.config().routing;
       return e ? {
         id: "l7",
         label: `L7 HTTP
 balancer`,
-        containers: e.containers ?? Rt.containers,
+        containers: e.containers ?? qt.containers,
         techIcon: "nginx",
         highlighted: !0
       } : null;
-    }), this.row1MainServices = G(() => this.config().services.filter((e) => e.category === "http-runtime").map((e) => w(this, h, Vn).call(this, e))), this.row1SideServices = G(() => this.config().services.filter((e) => e.category === "side-runtime").map((e) => w(this, h, Vn).call(this, e))), this.row1Services = G(() => [...this.row1MainServices()]), this.row2Services = G(() => this.config().services.filter((e) => e.category !== "http-runtime" && e.category !== "side-runtime").map((e) => w(this, h, Vn).call(this, e))), this.resolvedStorage = G(() => {
+    }), this.row1MainServices = j(() => this.config().services.filter((e) => e.category === "http-runtime").map((e) => C(this, g, Hn).call(this, e))), this.row1SideServices = j(() => this.config().services.filter((e) => e.category === "side-runtime").map((e) => C(this, g, Hn).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, g, Hn).call(this, e))), this.resolvedStorage = j(() => {
       const e = this.config().storage;
       return e ? {
         label: e.label ?? "Object storage",
         sublabel: e.sublabel ?? "storage:6379"
       } : null;
-    }), we(() => {
-      g(this, On, !0), g(this, In, new ResizeObserver(() => {
-        w(this, h, Gn).call(this);
-      })), _(this, In).observe(_(this, en).nativeElement), _(this, Mn).onDestroy(() => {
-        _(this, In)?.disconnect(), w(this, h, se).call(this), _(this, H) && cancelAnimationFrame(_(this, H));
-      }), w(this, h, Gn).call(this);
+    }), Oe(() => {
+      f(this, On, !0), f(this, In, new ResizeObserver(() => {
+        C(this, g, Rn).call(this);
+      })), d(this, In).observe(d(this, nn).nativeElement), d(this, Mn).onDestroy(() => {
+        d(this, In)?.disconnect(), C(this, g, de).call(this), d(this, Z) && cancelAnimationFrame(d(this, Z));
+      }), C(this, g, Rn).call(this);
       const e = new IntersectionObserver(([n]) => {
-        n.isIntersecting ? w(this, h, $e).call(this) : w(this, h, se).call(this);
+        n.isIntersecting ? C(this, g, ke).call(this) : C(this, g, de).call(this);
       }, { rootMargin: "200px 0px" });
-      e.observe(_(this, en).nativeElement), _(this, Mn).onDestroy(() => e.disconnect());
-    }), Un(() => {
-      this.config(), _(this, On) && w(this, h, Gn).call(this);
+      e.observe(d(this, nn).nativeElement), d(this, Mn).onDestroy(() => e.disconnect());
+    }), Yn(() => {
+      this.config(), this.lightweight(), d(this, On) && (C(this, g, Rn).call(this), setTimeout(() => C(this, g, Rn).call(this), 350));
     });
   }
 };
-en = new WeakMap(), Mn = new WeakMap(), In = new WeakMap(), Pn = new WeakMap(), On = new WeakMap(), H = new WeakMap(), Rn = new WeakMap(), _n = new WeakMap(), hn = new WeakMap(), gn = new WeakMap(), on = new WeakMap(), an = new WeakMap(), rn = new WeakMap(), h = new WeakSet(), // ─── Private ────────────────────────────────────────────
+nn = new WeakMap(), Mn = new WeakMap(), In = new WeakMap(), Pn = new WeakMap(), On = new WeakMap(), Z = new WeakMap(), Bn = new WeakMap(), hn = new WeakMap(), gn = new WeakMap(), _n = new WeakMap(), on = new WeakMap(), an = new WeakMap(), rn = new WeakMap(), g = 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.
  */
-Gn = function() {
-  _(this, H) && cancelAnimationFrame(_(this, H)), g(this, H, requestAnimationFrame(() => {
-    g(this, H, requestAnimationFrame(() => {
-      g(this, H, 0), w(this, h, ce).call(this), w(this, h, Oe).call(this), w(this, h, Te).call(this);
+Rn = function() {
+  d(this, Z) && cancelAnimationFrame(d(this, Z)), f(this, Z, requestAnimationFrame(() => {
+    f(this, Z, requestAnimationFrame(() => {
+      f(this, Z, 0), C(this, g, he).call(this), C(this, g, De).call(this), C(this, g, Ne).call(this);
     }));
   }));
-}, Oe = function() {
-  const e = _(this, en).nativeElement, o = e.clientWidth / Et;
-  g(this, Pn, o), e.style.setProperty("--diagram-scale", String(o));
+}, De = function() {
+  const e = d(this, nn).nativeElement, o = e.clientWidth / jt;
+  f(this, Pn, o), e.style.setProperty("--diagram-scale", String(o));
   const i = e.querySelector(".__canvas");
   i && (e.style.height = `${i.scrollHeight * o}px`);
-}, Te = function() {
-  const e = _(this, en).nativeElement, n = e.querySelector(".__canvas");
+}, Ne = function() {
+  const e = d(this, nn).nativeElement, n = e.querySelector(".__canvas");
   if (!n)
     return;
   const o = n.getBoundingClientRect();
   if (o.width === 0)
     return;
-  const i = _(this, Pn), P = (r) => {
+  const i = d(this, Pn), O = (r) => {
     const l = r.getBoundingClientRect();
     return {
       x: (l.left - o.left) / i,
@@ -1020,204 +1020,211 @@ Gn = function() {
       h: l.height / i
     };
   }, v = (r) => {
-    const l = P(r);
+    const l = O(r);
     return [l.x + l.w / 2, l.y];
-  }, c = (r) => {
-    const l = P(r);
+  }, s = (r) => {
+    const l = O(r);
     return [l.x + l.w / 2, l.y + l.h];
-  }, D = (r) => n.querySelector(`[data-node-id="${r}"]`), j = (r, l) => {
-    const f = D(r);
-    return f ? Array.from(f.querySelectorAll("zui-bar-icon")).map((u, y) => ({
-      point: v(u),
-      barIndex: y,
-      active: l !== void 0 ? y < l : !0
+  }, D = (r) => n.querySelector(`[data-node-id="${r}"]`), q = (r, l) => {
+    const _ = D(r);
+    return _ ? Array.from(_.querySelectorAll("zui-bar-icon")).map((p, M) => ({
+      point: v(p),
+      barIndex: M,
+      active: l !== void 0 ? M < l : !0
     })) : [];
-  }, q = 16, k = 27, a = (r) => Math.round(r * 10) / 10, C = (r, l, f) => {
-    const [u, y] = r, [x, $] = l, sn = x - u;
+  }, G = 16, E = 27, a = (r) => Math.round(r * 10) / 10, x = (r, l, _) => {
+    const [p, M] = r, [y, I] = l, sn = y - p;
     if (Math.abs(sn) < 3) {
-      const cn = a((u + x) / 2);
-      return `M${cn},${a(y)}L${cn},${a($)}`;
+      const cn = a((p + y) / 2);
+      return `M${cn},${a(M)}L${cn},${a(I)}`;
     }
-    const B = Math.min(q, Math.abs(sn) / 2, Math.abs(f - y) / 2, Math.abs($ - f) / 2), Y = Math.sign(sn), qn = Math.sign($ - f) || 1;
+    const F = Math.min(G, Math.abs(sn) / 2, Math.abs(_ - M) / 2, Math.abs(I - _) / 2), J = Math.sign(sn), Vn = Math.sign(I - _) || 1;
     return [
-      `M${a(u)},${a(y)}`,
-      `L${a(u)},${a(f - B)}`,
-      `Q${a(u)},${a(f)},${a(u + B * Y)},${a(f)}`,
-      `L${a(x - B * Y)},${a(f)}`,
-      `Q${a(x)},${a(f)},${a(x)},${a(f + B * qn)}`,
-      `L${a(x)},${a($)}`
+      `M${a(p)},${a(M)}`,
+      `L${a(p)},${a(_ - F)}`,
+      `Q${a(p)},${a(_)},${a(p + F * J)},${a(_)}`,
+      `L${a(y - F * J)},${a(_)}`,
+      `Q${a(y)},${a(_)},${a(y)},${a(_ + F * Vn)}`,
+      `L${a(y)},${a(I)}`
     ].join("");
-  }, b = [], O = D("endpoint"), N = this.resolvedInfra(), S = j("ctrl", N.ctrl.containers.active);
-  if (O && S.length) {
-    const r = c(O), f = Math.min(...S.map((u) => u.point[1])) - k;
-    for (const u of S)
+  }, b = [], w = this.lightweight(), z = w ? "core-lw" : "ctrl", S = w ? 2 : 3, A = w ? 3 : 4, X = D("endpoint"), tn = this.resolvedInfra(), H = q(z, w ? void 0 : tn.ctrl.containers.active);
+  if (X && H.length) {
+    const r = s(X), _ = Math.min(...H.map((p) => p.point[1])) - E;
+    for (const p of H)
       b.push({
-        d: C(r, u.point, f),
+        d: x(r, p.point, _),
         depth: 0,
         sourceNodeId: "endpoint",
-        targetNodeId: "ctrl",
-        targetBarIndex: u.barIndex,
-        active: u.active
+        targetNodeId: z,
+        targetBarIndex: p.barIndex,
+        active: p.active
       });
   }
-  const E = D("ctrl"), K = n.querySelector(".__infra-mode--active .__infra-group"), U = D("l7"), nn = this.resolvedRouting();
-  if (E && U && K && nn) {
-    const r = j("l7", nn.containers.active);
+  const B = n.querySelector(".__infra-mode--active .__infra-group"), U = D("l7"), K = D("ctrl"), pe = this.resolvedRouting();
+  if (!w && K && U && B && pe) {
+    const r = q("l7", pe.containers.active);
     if (r.length) {
-      const l = c(E)[0], f = c(K)[1], u = [l, f], x = Math.min(...r.map(($) => $.point[1])) - k;
-      for (const $ of r)
+      const l = s(K)[0], _ = s(B)[1], p = [l, _], y = Math.min(...r.map((I) => I.point[1])) - E;
+      for (const I of r)
         b.push({
-          d: C(u, $.point, x),
+          d: x(p, I.point, y),
           depth: 1,
           sourceNodeId: "ctrl",
           targetNodeId: "l7",
-          targetBarIndex: $.barIndex,
-          active: $.active
+          targetBarIndex: I.barIndex,
+          active: I.active
         });
     }
   }
-  if (U)
-    for (const r of this.row1Services()) {
-      const l = j(r.service.id, r.service.containers.active);
-      if (l.length) {
-        const f = c(U), u = Math.min(...l.map((x) => x.point[1])), y = (f[1] + u) / 2;
-        for (const x of l)
+  let Gn = null;
+  if (w) {
+    const r = D(z);
+    r && B && (Gn = [s(r)[0], s(B)[1]]);
+  } else U && (Gn = s(U));
+  if (Gn) {
+    const r = w ? z : "l7";
+    for (const l of this.row1Services()) {
+      const _ = q(l.service.id, l.service.containers.active);
+      if (_.length) {
+        const p = Gn, M = Math.min(..._.map((I) => I.point[1])), y = (p[1] + M) / 2;
+        for (const I of _)
           b.push({
-            d: C(f, x.point, y),
-            depth: 2,
-            sourceNodeId: "l7",
-            targetNodeId: r.service.id,
-            targetBarIndex: x.barIndex,
-            active: x.active
+            d: x(p, I.point, y),
+            depth: w ? 1 : 2,
+            sourceNodeId: r,
+            targetNodeId: l.service.id,
+            targetBarIndex: I.barIndex,
+            active: I.active
           });
       }
     }
-  const F = 19, J = 11, W = [], $n = [];
+  }
+  const fe = 19, Kn = 11, Sn = [], zn = [];
   for (const r of this.row2Services())
     if (r.loadBalancer)
-      for (const l of j(r.loadBalancer.id, r.loadBalancer.containers.active))
-        $n.push({ ...l, nodeId: r.loadBalancer.id });
+      for (const l of q(r.loadBalancer.id, r.loadBalancer.containers.active))
+        zn.push({ ...l, nodeId: r.loadBalancer.id });
     else
-      for (const l of j(r.service.id, r.service.containers.active))
-        W.push({ ...l, nodeId: r.service.id });
-  const _e = D("storage"), jn = _e ? v(_e) : null;
-  let fn = 0, he = 0;
+      for (const l of q(r.service.id, r.service.containers.active))
+        Sn.push({ ...l, nodeId: r.service.id });
+  const ue = D("storage"), Wn = ue ? v(ue) : null;
+  let fn = 0, me = 0;
   for (const r of this.row1Services()) {
     const l = D(r.service.id);
     if (!l)
       continue;
-    const f = c(l);
-    he = f[0];
-    const u = W.length ? Math.min(...W.map((x) => x.point[1])) : $n.length ? Math.min(...$n.map((x) => x.point[1])) : 0, y = Math.max(f[1] + q, u - k);
-    fn = y, jn && b.push({
-      d: C(f, jn, y - F),
-      depth: 3,
+    const _ = s(l);
+    me = _[0];
+    const p = Sn.length ? Math.min(...Sn.map((y) => y.point[1])) : zn.length ? Math.min(...zn.map((y) => y.point[1])) : 0, M = Math.max(_[1] + G, p - E);
+    fn = M, Wn && b.push({
+      d: x(_, Wn, M - fe),
+      depth: S,
       sourceNodeId: r.service.id,
       targetNodeId: "storage",
       targetBarIndex: -1,
       active: !0
     });
-    for (const x of W)
+    for (const y of Sn)
       b.push({
-        d: C(f, x.point, y),
-        depth: 3,
+        d: x(_, y.point, M),
+        depth: S,
         sourceNodeId: r.service.id,
-        targetNodeId: x.nodeId,
-        targetBarIndex: x.barIndex,
-        active: x.active
+        targetNodeId: y.nodeId,
+        targetBarIndex: y.barIndex,
+        active: y.active
       });
-    for (const x of $n)
+    for (const y of zn)
       b.push({
-        d: C(f, x.point, y + J),
-        depth: 3,
+        d: x(_, y.point, M + Kn),
+        depth: S,
         sourceNodeId: r.service.id,
-        targetNodeId: x.nodeId,
-        targetBarIndex: x.barIndex,
-        active: x.active
+        targetNodeId: y.nodeId,
+        targetBarIndex: y.barIndex,
+        active: y.active
       });
   }
   for (const r of this.row1SideServices()) {
     const l = D(r.service.id);
     if (!l || !fn)
       continue;
-    const f = c(l);
+    const _ = s(l);
     b.push({
-      d: `M${a(f[0])},${a(f[1])}L${a(f[0])},${a(fn)}`,
-      depth: 3,
+      d: `M${a(_[0])},${a(_[1])}L${a(_[0])},${a(fn)}`,
+      depth: S,
       sourceNodeId: r.service.id,
       targetNodeId: "bus-rail",
       targetBarIndex: -1,
       active: !0,
       renderMode: "base-only"
-    }), jn && b.push({
-      d: C(f, jn, fn - F),
-      depth: 3,
+    }), Wn && b.push({
+      d: x(_, Wn, fn - fe),
+      depth: S,
       sourceNodeId: r.service.id,
       targetNodeId: "storage",
       targetBarIndex: -1,
       active: !0,
       renderMode: "glow-only"
     });
-    for (const u of W)
+    for (const p of Sn)
       b.push({
-        d: C(f, u.point, fn),
-        depth: 3,
+        d: x(_, p.point, fn),
+        depth: S,
         sourceNodeId: r.service.id,
-        targetNodeId: u.nodeId,
-        targetBarIndex: u.barIndex,
-        active: u.active,
+        targetNodeId: p.nodeId,
+        targetBarIndex: p.barIndex,
+        active: p.active,
         renderMode: "glow-only"
       });
-    for (const u of $n) {
-      const [y, x] = f, [$, sn] = u.point, B = fn, Y = he, qn = Y - y, cn = Math.min(q, Math.abs(qn) / 2, Math.abs(B - x) / 2), ge = Math.sign(qn), Wn = $ - Y;
-      let Qn;
-      if (Math.abs(Wn) < 3) {
-        const Q = a((Y + $) / 2);
-        Qn = [
-          `M${a(y)},${a(x)}`,
-          `L${a(y)},${a(B - cn)}`,
-          `Q${a(y)},${a(B)},${a(y + cn * ge)},${a(B)}`,
-          `L${a(Q)},${a(B)}`,
-          `L${a(Q)},${a(sn)}`
+    for (const p of zn) {
+      const [M, y] = _, [I, sn] = p.point, F = fn, J = me, Vn = J - M, cn = Math.min(G, Math.abs(Vn) / 2, Math.abs(F - y) / 2), ve = Math.sign(Vn), Zn = I - J;
+      let ne;
+      if (Math.abs(Zn) < 3) {
+        const Y = a((J + I) / 2);
+        ne = [
+          `M${a(M)},${a(y)}`,
+          `L${a(M)},${a(F - cn)}`,
+          `Q${a(M)},${a(F)},${a(M + cn * ve)},${a(F)}`,
+          `L${a(Y)},${a(F)}`,
+          `L${a(Y)},${a(sn)}`
         ].join("");
       } else {
-        const Q = B + J, pe = Math.sign(Wn), fe = Math.min(q, J / 2, Math.abs(Wn) / 2), ue = Math.min(q, Math.abs(Wn) / 2, Math.abs(sn - Q) / 2);
-        Qn = [
-          `M${a(y)},${a(x)}`,
-          `L${a(y)},${a(B - cn)}`,
-          `Q${a(y)},${a(B)},${a(y + cn * ge)},${a(B)}`,
-          `L${a(Y)},${a(B)}`,
-          `L${a(Y)},${a(Q - fe)}`,
-          `Q${a(Y)},${a(Q)},${a(Y + fe * pe)},${a(Q)}`,
-          `L${a($ - ue * pe)},${a(Q)}`,
-          `Q${a($)},${a(Q)},${a($)},${a(Q + ue)}`,
-          `L${a($)},${a(sn)}`
+        const Y = F + Kn, be = Math.sign(Zn), xe = Math.min(G, Kn / 2, Math.abs(Zn) / 2), we = Math.min(G, Math.abs(Zn) / 2, Math.abs(sn - Y) / 2);
+        ne = [
+          `M${a(M)},${a(y)}`,
+          `L${a(M)},${a(F - cn)}`,
+          `Q${a(M)},${a(F)},${a(M + cn * ve)},${a(F)}`,
+          `L${a(J)},${a(F)}`,
+          `L${a(J)},${a(Y - xe)}`,
+          `Q${a(J)},${a(Y)},${a(J + xe * be)},${a(Y)}`,
+          `L${a(I - we * be)},${a(Y)}`,
+          `Q${a(I)},${a(Y)},${a(I)},${a(Y + we)}`,
+          `L${a(I)},${a(sn)}`
         ].join("");
       }
       b.push({
-        d: Qn,
-        depth: 3,
+        d: ne,
+        depth: S,
         sourceNodeId: r.service.id,
-        targetNodeId: u.nodeId,
-        targetBarIndex: u.barIndex,
-        active: u.active,
+        targetNodeId: p.nodeId,
+        targetBarIndex: p.barIndex,
+        active: p.active,
         renderMode: "glow-only"
       });
     }
   }
   for (const r of this.row2Services())
     if (r.loadBalancer) {
-      const l = D(r.loadBalancer.id), f = j(r.service.id, r.service.containers.active);
-      if (l && f.length) {
-        const u = c(l), y = Math.min(...f.map(($) => $.point[1])), x = (u[1] + y) / 2;
-        for (const $ of f)
+      const l = D(r.loadBalancer.id), _ = q(r.service.id, r.service.containers.active);
+      if (l && _.length) {
+        const p = s(l), M = Math.min(..._.map((I) => I.point[1])), y = (p[1] + M) / 2;
+        for (const I of _)
           b.push({
-            d: C(u, $.point, x),
-            depth: 4,
+            d: x(p, I.point, y),
+            depth: A,
             sourceNodeId: r.loadBalancer.id,
             targetNodeId: r.service.id,
-            targetBarIndex: $.barIndex,
-            active: $.active
+            targetBarIndex: I.barIndex,
+            active: I.active
           });
       }
     }
@@ -1226,16 +1233,16 @@ Gn = function() {
     if (!r)
       return;
     const l = this.annotatedPaths();
-    let f = !1;
-    for (let u = 0; u < l.length; u++) {
-      if (l[u].cachedLength != null)
+    let _ = !1;
+    for (let p = 0; p < l.length; p++) {
+      if (l[p].cachedLength != null)
         continue;
-      const y = r.querySelector(`[data-path-idx="${u}"]`);
-      y && (l[u].cachedLength = Math.ceil(y.getTotalLength()), f = !0);
+      const M = r.querySelector(`[data-path-idx="${p}"]`);
+      M && (l[p].cachedLength = Math.ceil(M.getTotalLength()), _ = !0);
     }
-    f && this.annotatedPaths.set([...l]);
+    _ && this.annotatedPaths.set([...l]);
   });
-}, Vn = function(e) {
+}, Hn = function(e) {
   const n = e.category === "managed" ? "orange" : "cyan";
   let o;
   if (e.hasLoadBalancer) {
@@ -1251,30 +1258,30 @@ balancers`,
   }
   return { service: e, barColor: n, loadBalancer: o };
 }, // ─── Trace orchestrator ────────────────────────────────
-$e = function() {
-  if (_(this, gn) || typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+ke = function() {
+  if (d(this, _n) || typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches)
     return;
-  g(this, gn, !0);
+  f(this, _n, !0);
   const e = () => {
-    w(this, h, Se).call(this), g(this, _n, window.setTimeout(e, Lt + Math.random() * At));
+    C(this, g, Ee).call(this), f(this, hn, window.setTimeout(e, Gt + Math.random() * Wt));
   };
-  g(this, _n, window.setTimeout(e, be));
+  f(this, hn, window.setTimeout(e, Me));
   const n = () => {
-    w(this, h, ze).call(this), g(this, hn, window.setTimeout(n, Bt + Math.random() * Ft));
+    C(this, g, Re).call(this), f(this, gn, window.setTimeout(n, Vt + Math.random() * Zt));
   };
-  this.row1SideServices().length && g(this, hn, window.setTimeout(n, be + 600));
-}, se = function() {
-  g(this, gn, !1), clearTimeout(_(this, _n)), clearTimeout(_(this, hn)), w(this, h, ce).call(this);
-}, ce = function() {
-  _(this, an).forEach((e) => e()), _(this, an).clear(), _(this, rn).clear(), g(this, on, !1);
-}, Se = function() {
+  this.row1SideServices().length && f(this, gn, window.setTimeout(n, Me + 600));
+}, de = function() {
+  f(this, _n, !1), clearTimeout(d(this, hn)), clearTimeout(d(this, gn)), C(this, g, he).call(this);
+}, he = function() {
+  d(this, an).forEach((e) => e()), d(this, an).clear(), d(this, rn).clear(), f(this, on, !1);
+}, Ee = function() {
   const e = this.annotatedPaths();
   if (!e.length)
     return;
-  const n = w(this, h, Ne).call(this, e);
-  n.length && w(this, h, le).call(this, n);
-}, ze = function() {
-  if (_(this, on))
+  const n = C(this, g, Ae).call(this, e);
+  n.length && C(this, g, ge).call(this, n);
+}, Re = function() {
+  if (d(this, on))
     return;
   const e = this.annotatedPaths();
   if (!e.length)
@@ -1282,106 +1289,106 @@ $e = function() {
   const n = this.row1SideServices();
   if (!n.length)
     return;
-  const o = n[Math.floor(Math.random() * n.length)], i = w(this, h, De).call(this, e, o.service.id);
+  const o = n[Math.floor(Math.random() * n.length)], i = C(this, g, Le).call(this, e, o.service.id);
   if (i.length) {
-    g(this, on, !0), w(this, h, le).call(this, i);
-    const P = i.length * ee + Sn + zn + te + 100;
+    f(this, on, !0), C(this, g, ge).call(this, i);
+    const O = i.length * ie + Dn + Nn + ae + 100;
     setTimeout(() => {
-      g(this, on, !1);
-    }, P);
+      f(this, on, !1);
+    }, O);
   }
 }, /**
  * 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).
  */
-De = function(e, n) {
-  const o = [], i = e.filter((c) => c.depth === 3 && c.sourceNodeId === n && c.renderMode === "glow-only" && c.active);
+Le = function(e, n) {
+  const o = [], i = e.filter((s) => s.sourceNodeId === n && s.renderMode === "glow-only" && s.active);
   if (!i.length)
     return o;
-  const P = w(this, h, Zn).call(this, i);
-  o.push(e.indexOf(P));
-  const v = e.filter((c) => c.depth === 4 && c.sourceNodeId === P.targetNodeId && c.active);
+  const O = C(this, g, Un).call(this, i);
+  o.push(e.indexOf(O));
+  const v = e.filter((s) => s.depth === O.depth + 1 && s.sourceNodeId === O.targetNodeId && s.active);
   if (v.length) {
-    const c = w(this, h, Zn).call(this, v);
-    o.push(e.indexOf(c));
+    const s = C(this, g, Un).call(this, v);
+    o.push(e.indexOf(s));
   }
   return o;
-}, Ne = function(e) {
+}, Ae = function(e) {
   const n = [];
   let o = "endpoint";
   for (let i = 0; i <= 4; i++) {
-    const P = e.filter((c) => c.depth === i && c.sourceNodeId === o && c.active);
-    if (!P.length)
+    const O = e.filter((s) => s.depth === i && s.sourceNodeId === o && s.active);
+    if (!O.length)
       break;
-    const v = w(this, h, Zn).call(this, P);
+    const v = C(this, g, Un).call(this, O);
     n.push(e.indexOf(v)), o = v.targetNodeId;
   }
   return n;
-}, Zn = function(e) {
+}, Un = function(e) {
   if (e.length === 1)
-    return w(this, h, Hn).call(this, e[0]), e[0];
+    return C(this, g, Jn).call(this, e[0]), e[0];
   const n = e.map((v) => {
-    const c = `${v.targetNodeId}:${v.targetBarIndex}`;
-    return 1 / ((_(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 w(this, h, Hn).call(this, e[v]), e[v];
-  const P = e.at(-1);
-  return w(this, h, Hn).call(this, P), P;
-}, Hn = function(e) {
+      return C(this, g, Jn).call(this, e[v]), e[v];
+  const O = e.at(-1);
+  return C(this, g, Jn).call(this, O), O;
+}, Jn = function(e) {
   const n = `${e.targetNodeId}:${e.targetBarIndex}`;
-  _(this, rn).set(n, (_(this, rn).get(n) ?? 0) + 1);
-}, le = function(e) {
-  const n = this.annotatedPaths(), i = _(this, en).nativeElement.querySelector(".__canvas"), P = i?.querySelector(":scope > .__svg-layer");
-  if (!i || !P)
+  d(this, rn).set(n, (d(this, rn).get(n) ?? 0) + 1);
+}, ge = function(e) {
+  const n = this.annotatedPaths(), i = d(this, nn).nativeElement.querySelector(".__canvas"), O = i?.querySelector(":scope > .__svg-layer");
+  if (!i || !O)
     return;
-  const v = [], c = ++ve(this, Rn)._, D = [];
-  e.forEach((k, a) => {
-    const C = n[k], b = a * ee, O = P.querySelector(`[data-path-idx="${k}"]`);
-    if (O) {
-      const S = C.cachedLength ?? Math.ceil(O.getTotalLength());
-      O.style.setProperty("--path-len", String(S)), D.push({
-        el: O,
+  const v = [], s = ++ye(this, Bn)._, D = [];
+  e.forEach((E, a) => {
+    const x = n[E], b = a * ie, w = O.querySelector(`[data-path-idx="${E}"]`);
+    if (w) {
+      const S = x.cachedLength ?? Math.ceil(w.getTotalLength());
+      w.style.setProperty("--path-len", String(S)), D.push({
+        el: w,
         classes: ["__path-glow--active", "__path-glow--decay"]
       }), v.push(setTimeout(() => {
-        O.classList.add("__path-glow--active");
+        w.classList.add("__path-glow--active");
       }, b)), v.push(setTimeout(() => {
-        O.classList.remove("__path-glow--active"), O.classList.add("__path-glow--decay");
-      }, b + Sn + zn)), v.push(setTimeout(() => {
-        O.classList.remove("__path-glow--decay");
-      }, b + Sn + zn + te));
+        w.classList.remove("__path-glow--active"), w.classList.add("__path-glow--decay");
+      }, b + Dn + Nn)), v.push(setTimeout(() => {
+        w.classList.remove("__path-glow--decay");
+      }, b + Dn + Nn + ae));
     }
-    const N = b + Sn * 0.85;
-    if (C.targetBarIndex >= 0) {
-      const E = i.querySelector(`[data-node-id="${C.targetNodeId}"]`)?.querySelectorAll("zui-bar-icon")[C.targetBarIndex];
-      E && v.push(setTimeout(() => E.dispatchEvent(new CustomEvent("trace-pulse")), N));
-    } else if (C.targetNodeId === "storage") {
+    const z = b + Dn * 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 E = N + zn;
-        D.push({ el: S, classes: ["--pulse"] }), v.push(setTimeout(() => S.classList.add("--pulse"), N)), v.push(setTimeout(() => S.classList.remove("--pulse"), E));
+        const A = z + Nn;
+        D.push({ el: S, classes: ["--pulse"] }), v.push(setTimeout(() => S.classList.add("--pulse"), z)), v.push(setTimeout(() => S.classList.remove("--pulse"), A));
       }
     }
   });
-  const j = () => {
-    v.forEach((k) => clearTimeout(k)), D.forEach(({ el: k, classes: a }) => k.classList.remove(...a));
+  const q = () => {
+    v.forEach((E) => clearTimeout(E)), D.forEach(({ el: E, classes: a }) => E.classList.remove(...a));
   };
-  _(this, an).set(c, j);
-  const q = e.length * ee + Sn + zn + te + 100;
+  d(this, an).set(s, q);
+  const G = e.length * ie + Dn + Nn + ae + 100;
   v.push(setTimeout(() => {
-    _(this, an).delete(c);
-  }, q));
+    d(this, an).delete(s);
+  }, G));
 }, vn.ɵfac = function(n) {
   return new (n || vn)();
-}, vn.ɵcmp = /* @__PURE__ */ Yn({ type: vn, selectors: [["zw-network-diagram"]], inputs: { config: [1, "config"] }, decls: 26, vars: 5, consts: [[1, "__canvas"], ["data-node-id", "endpoint", 1, "__endpoint-row"], ["variant", "endpoint", 3, "label"], [3, "config", "showPaths"], [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), p(2, "zw-diagram-node", 2), d(), m(3, "zw-project-shell", 3)(4, "div", 4)(5, "span", 5), z(6, "Your services"), p(7, "br"), z(8, "with system containers"), d(), m(9, "div", 6)(10, "div", 7), p(11, "div"), L(12, yt, 2, 5, "div", null, ae), V(14, It, 3, 0, "div", 8)(15, Pt, 1, 0, "div"), d(), p(16, "div", 9), m(17, "div", 10), L(18, $t, 2, 1, null, null, ae), d()()()(), V(20, St, 2, 2, "div", 11), Fn(), m(21, "svg", 12), L(22, Dt, 1, 1, null, null, oe), L(24, kt, 1, 1, null, null, oe), d()()), n & 2) {
+}, vn.ɵcmp = /* @__PURE__ */ Xn({ type: vn, selectors: [["zw-network-diagram"]], inputs: { config: [1, "config"], lightweight: [1, "lightweight"] }, decls: 26, vars: 6, 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), h(), m(3, "zw-project-shell", 3)(4, "div", 4)(5, "span", 5), N(6, "Your services"), u(7, "br"), N(8, "with system containers"), h(), m(9, "div", 6)(10, "div", 7), u(11, "div"), R(12, $t, 2, 5, "div", null, ce), W(14, zt, 3, 0, "div", 8)(15, Dt, 1, 0, "div"), h(), u(16, "div", 9), m(17, "div", 10), R(18, Et, 2, 1, null, null, ce), h()()()(), W(20, Rt, 2, 2, "div", 11), qn(), m(21, "svg", 12), R(22, At, 1, 1, null, null, re), R(24, Ft, 1, 1, null, null, re), h()()), n & 2) {
     let i;
-    s(2), M("label", o.config().endpoint), s(), M("config", o.shellConfig())("showPaths", !1), s(9), A(o.row1MainServices()), s(2), Z(o.row1SideServices().length ? 14 : 15), s(4), A(o.row2Services()), s(2), Z((i = o.resolvedStorage()) ? 20 : -1, i), s(2), A(o.annotatedPaths()), s(2), A(o.annotatedPaths());
+    c(2), T("label", o.config().endpoint), c(), T("config", o.shellConfig())("showPaths", !1)("lightweight", o.lightweight()), c(9), L(o.row1MainServices()), c(2), V(o.row1SideServices().length ? 14 : 15), c(4), L(o.row2Services()), c(2), V((i = o.resolvedStorage()) ? 20 : -1, i), c(2), L(o.annotatedPaths()), c(2), L(o.annotatedPaths());
   }
-}, dependencies: [Jn, ie], styles: [`[_nghost-%COMP%] {
+}, dependencies: [Qn, se], styles: [`[_nghost-%COMP%] {
   display: block;
   position: relative;
   width: 100%;
@@ -1587,17 +1594,17 @@ zw-project-shell[_ngcontent-%COMP%] {
     display: none;
   }
 }`], changeDetection: 0 });
-let re = vn;
-function xe(t) {
+let le = vn;
+function Ie(t) {
   const e = t.hostname || t.name, n = t.ports?.[0]?.port;
   return n ? `${e}:${n}` : e;
 }
-function jt(t) {
-  return t ? Ie[t]?.horizontal === !0 : !1;
+function Ht(t) {
+  return t ? Se[t]?.horizontal === !0 : !1;
 }
-const qt = /* @__PURE__ */ new Set(["postgresql", "mariadb", "mongodb", "clickhouse"]);
-function Wt(t) {
-  const e = t.findIndex((P) => P.techIcon && qt.has(P.techIcon));
+const Ut = /* @__PURE__ */ new Set(["postgresql", "mariadb", "mongodb", "clickhouse"]);
+function Jt(t) {
+  const e = t.findIndex((O) => O.techIcon && Ut.has(O.techIcon));
   if (e < 0)
     return t;
   const n = Math.floor(t.length / 2);
@@ -1606,67 +1613,70 @@ function Wt(t) {
   const o = [...t], [i] = o.splice(e, 1);
   return o.splice(n, 0, i), o;
 }
-function Gt(t) {
+function Yt(t) {
   const e = t._servicesExtended ?? t.services ?? [];
   let n = !1;
   const o = [], i = [];
-  let P = !1, v;
-  for (const c of e) {
-    if (c.category === "CORE")
+  let O = !1, v;
+  for (const s of e) {
+    if (s.category === "CORE")
       continue;
-    if (c.category === "OBJECT_STORAGE") {
-      P = !0, v = c;
+    if (s.category === "OBJECT_STORAGE") {
+      O = !0, v = s;
       continue;
     }
-    const D = Fe(c), j = je(c.typeId, D, c.autoscaling?.horizontalAutoscaling?.minContainerCount || 1), q = c.typeId ? Ie[c.typeId]?.HAContainers : void 0, k = D === "HA" && (q?.freeContainers ?? 0) > 0, a = {
-      id: c.hostname || c.name,
-      label: xe(c),
-      containers: { active: j, standby: 0 },
-      techIcon: c.typeId,
-      ...k ? {
+    const D = Ve(s), q = Ze(s.typeId, D, s.autoscaling?.horizontalAutoscaling?.minContainerCount || 1), G = s.typeId ? Se[s.typeId]?.HAContainers : void 0, E = D === "HA" && (G?.freeContainers ?? 0) > 0, a = {
+      id: s.hostname || s.name,
+      label: Ie(s),
+      containers: { active: q, standby: 0 },
+      techIcon: s.typeId,
+      ...E ? {
         hasLoadBalancer: !0,
         loadBalancer: {
-          containers: { active: q.freeContainers, standby: 0 }
+          containers: { active: G.freeContainers, standby: 0 }
         }
       } : {}
     };
-    if (jt(c.typeId)) {
-      const C = n ? "side-runtime" : "http-runtime";
-      n || (n = !0), o.push({ ...a, category: C });
+    if (Ht(s.typeId)) {
+      const x = n ? "side-runtime" : "http-runtime";
+      n || (n = !0), o.push({ ...a, category: x });
     } else
       i.push({ ...a, category: "managed" });
   }
   return {
-    ...Pe,
-    services: [...o, ...Wt(i)],
-    ...P && v ? {
+    ...ze,
+    services: [...o, ...Jt(i)],
+    ...O && v ? {
       storage: {
         label: "Object storage",
-        sublabel: xe(v)
+        sublabel: Ie(v)
       }
     } : {}
   };
 }
-function Vt(t, e) {
-  t & 1 && p(0, "div", 1);
+function Qt(t, e) {
+  t & 1 && u(0, "div", 1);
 }
-function Zt(t, e) {
-  if (t & 1 && (m(0, "div", 2), z(1), d()), t & 2) {
-    const n = I();
-    s(), Ce("Could not load recipe “", n.slug() || "unknown", "”.");
+function Xt(t, e) {
+  if (t & 1 && (m(0, "div", 2), N(1), h()), t & 2) {
+    const n = P();
+    c(), Pe("Could not load recipe “", n.slug() || "unknown", "”.");
   }
 }
-function Ht(t, e) {
-  t & 1 && p(0, "zw-network-diagram", 3), t & 2 && M("config", e);
+function Kt(t, e) {
+  if (t & 1 && u(0, "zw-network-diagram", 3), t & 2) {
+    const n = P();
+    T("config", e)("lightweight", n.lightweight());
+  }
 }
-var Ln, An, Tn, Bn;
+var Fn, Tn, $n, jn;
 const bn = class bn {
   constructor() {
-    T(this, Ln);
-    T(this, An);
-    T(this, Tn);
-    T(this, Bn);
-    this.slug = R(), this.recipeData = R(void 0, { transform: (e) => {
+    $(this, Fn);
+    $(this, Tn);
+    $(this, $n);
+    $(this, jn);
+    this.slug = k(), this.recipeData = k(void 0, { transform: (e) => {
       if (typeof e != "string")
         return e ?? void 0;
       if (e.trim())
@@ -1675,35 +1685,43 @@ const bn = class bn {
         } catch {
           return;
         }
-    } }), this.environment = R("highly-available-production"), this.apiBase = R("https://api.zerops.io"), g(this, Ln, kn(He)), this.recipe = xn(null), this.loading = xn(!0), this.error = xn(!1), g(this, An, G(() => {
+    } }), this.environment = k("highly-available-production"), this.mode = k("auto"), this.apiBase = k("https://api.zerops.io"), f(this, Fn, Ln(Ke)), this.recipe = xn(null), this.loading = xn(!0), this.error = xn(!1), f(this, Tn, j(() => {
       const e = this.recipe();
       if (!e)
         return;
       const n = e._environmentsExtended || [];
-      return n.find((o) => o._key === this.environment()) ?? qe(n) ?? void 0;
-    })), this.diagramConfig = G(() => {
-      const e = _(this, An).call(this);
-      return e ? Gt(e) : void 0;
-    }), g(this, Tn, new We()), g(this, Bn, Ge(_(this, Tn).pipe(Ve((e) => Ue(_(this, Ln), this.apiBase(), e))))), Un(() => {
+      return n.find((o) => o._key === this.environment()) ?? He(n) ?? void 0;
+    })), this.diagramConfig = j(() => {
+      const e = d(this, Tn).call(this);
+      return e ? Yt(e) : void 0;
+    }), this.lightweight = j(() => {
+      const e = this.mode();
+      if (e === "lightweight")
+        return !0;
+      if (e === "serious")
+        return !1;
+      const n = d(this, Tn).call(this);
+      return n ? Ue(n._servicesExtended) === "LIGHT" : !1;
+    }), f(this, $n, new Je()), f(this, jn, Ye(d(this, $n).pipe(Qe((e) => nt(d(this, Fn), this.apiBase(), e))))), Yn(() => {
       const e = this.recipeData(), n = this.slug();
       if (e) {
-        const o = Ze(e);
+        const o = Xe(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), _(this, Tn).next(n));
-    }), Un(() => {
-      const e = _(this, Bn).call(this);
+      } else n && (this.loading.set(!0), this.error.set(!1), this.recipe.set(null), d(this, $n).next(n));
+    }), Yn(() => {
+      const e = d(this, jn).call(this);
       e && (this.loading.set(!1), this.error.set(e.error), this.recipe.set(e.recipe));
     });
   }
 };
-Ln = new WeakMap(), An = new WeakMap(), Tn = new WeakMap(), Bn = new WeakMap(), bn.ɵfac = function(n) {
+Fn = new WeakMap(), Tn = new WeakMap(), $n = new WeakMap(), jn = new WeakMap(), bn.ɵfac = function(n) {
   return new (n || bn)();
-}, bn.ɵcmp = /* @__PURE__ */ Yn({ type: bn, selectors: [["zwe-network-diagram-element"]], inputs: { slug: [1, "slug"], recipeData: [1, "recipeData"], environment: [1, "environment"], apiBase: [1, "apiBase"] }, decls: 4, vars: 1, consts: [[1, "zerops"], ["aria-hidden", "true", 1, "__skeleton"], [1, "__error"], [3, "config"]], template: function(n, o) {
-  if (n & 1 && (m(0, "div", 0), V(1, Vt, 1, 0, "div", 1)(2, Zt, 2, 1, "div", 2)(3, Ht, 1, 1, "zw-network-diagram", 3), d()), n & 2) {
+}, bn.ɵcmp = /* @__PURE__ */ Xn({ type: bn, 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, Qt, 1, 0, "div", 1)(2, Xt, 2, 1, "div", 2)(3, Kt, 1, 2, "zw-network-diagram", 3), h()), n & 2) {
     let i;
-    s(), Z(o.loading() ? 1 : o.error() ? 2 : (i = o.diagramConfig()) ? 3 : -1, i);
+    c(), V(o.loading() ? 1 : o.error() ? 2 : (i = o.diagramConfig()) ? 3 : -1, i);
   }
-}, dependencies: [re], styles: [`[_nghost-%COMP%] { display: block; }
+}, dependencies: [le], styles: [`[_nghost-%COMP%] { display: block; }
 
     .__skeleton[_ngcontent-%COMP%] {
       height: 420px;
@@ -1720,7 +1738,7 @@ Ln = new WeakMap(), An = new WeakMap(), Tn = new WeakMap(), Bn = new WeakMap(),
       color: var(--mat-sys-on-error-container);
       font-size: 14px;
     }`], changeDetection: 0 });
-let de = bn;
-Je().then((t) => {
-  customElements.get("zerops-network-diagram") || customElements.define("zerops-network-diagram", Ye(de, { injector: t.injector }));
+let _e = bn;
+et().then((t) => {
+  customElements.get("zerops-network-diagram") || customElements.define("zerops-network-diagram", tt(_e, { injector: t.injector }));
 });