app-devtools 0.30.0 → 0.30.1

package/dist/main.js

@@ -16,7 +16,7 @@ const q = 1, we = 2, Ct = {
   owner: null
 };
 var P = null;
-let J = null, N = null, E = null, X = null, Ke = 0;
+let J = null, N = null, E = null, X = null, Je = 0;
 function re(e, t) {
   const n = N, r = P, l = e.length === 0, o = l ? Ct : {
     owned: null,
@@ -71,7 +71,7 @@ function St() {
   return N;
 }
 function tn(e) {
-  const t = m(e), n = m(() => De(t()));
+  const t = m(e), n = m(() => ze(t()));
   return n.toArray = () => {
     const r = n();
     return Array.isArray(r) ? r : r != null ? [r] : [];
@@ -107,7 +107,7 @@ function Ae(e) {
   if (!e.fn)
     return;
   Te(e);
-  const t = P, n = N, r = Ke;
+  const t = P, n = N, r = Je;
   N = P = e, nn(e, e.value, r), N = n, P = t;
 }
 function nn(e, t, n) {
@@ -144,7 +144,7 @@ function Tt(e) {
   if (e.suspense && W(e.suspense.inFallback))
     return e.suspense.effects.push(e);
   const n = [e];
-  for (; (e = e.owner) && (!e.updatedAt || e.updatedAt < Ke); )
+  for (; (e = e.owner) && (!e.updatedAt || e.updatedAt < Je); )
     (e.state || t) && n.push(e);
   for (let r = n.length - 1; r >= 0; r--)
     if (e = n[r], e.state === q || t)
@@ -158,7 +158,7 @@ function ue(e, t) {
   if (E)
     return e();
   let n = !1;
-  t || (E = []), X ? n = !0 : X = [], Ke++;
+  t || (E = []), X ? n = !0 : X = [], Je++;
   try {
     const r = e();
     return rn(n), r;
@@ -219,20 +219,20 @@ function ln(e) {
 function Ot(e) {
   throw e = ln(e), e;
 }
-function De(e) {
+function ze(e) {
   if (typeof e == "function" && !e.length)
-    return De(e());
+    return ze(e());
   if (Array.isArray(e)) {
     const t = [];
     for (let n = 0; n < e.length; n++) {
-      const r = De(e[n]);
+      const r = ze(e[n]);
       Array.isArray(r) ? t.push.apply(t, r) : t.push(r);
     }
     return t;
   }
   return e;
 }
-const ze = Symbol("fallback");
+const Re = Symbol("fallback");
 function Ce(e) {
   for (let t = 0; t < e.length; t++)
     e[t]();
@@ -244,7 +244,7 @@ function on(e, t, n = {}) {
     return a[ve], W(() => {
       let d = a.length, g, v, b, w, k, x, A, T, L;
       if (d === 0)
-        s !== 0 && (Ce(o), o = [], r = [], l = [], s = 0, i && (i = [])), n.fallback && (r = [ze], l[0] = re((H) => (o[0] = H, n.fallback())), s = 1);
+        s !== 0 && (Ce(o), o = [], r = [], l = [], s = 0, i && (i = [])), n.fallback && (r = [Re], l[0] = re((H) => (o[0] = H, n.fallback())), s = 1);
       else if (s === 0) {
         for (l = new Array(d), u = 0; u < d; u++)
           r[u] = a[u], l[u] = re(p);
@@ -279,8 +279,8 @@ function sn(e, t, n = {}) {
     const c = e() || [];
     return c[ve], W(() => {
       if (c.length === 0)
-        return i !== 0 && (Ce(o), o = [], r = [], l = [], i = 0, s = []), n.fallback && (r = [ze], l[0] = re((p) => (o[0] = p, n.fallback())), i = 1), l;
-      for (r[0] === ze && (o[0](), o = [], r = [], l = [], i = 0), a = 0; a < c.length; a++)
+        return i !== 0 && (Ce(o), o = [], r = [], l = [], i = 0, s = []), n.fallback && (r = [Re], l[0] = re((p) => (o[0] = p, n.fallback())), i = 1), l;
+      for (r[0] === Re && (o[0](), o = [], r = [], l = [], i = 0), a = 0; a < c.length; a++)
         a < r.length && r[a] !== c[a] ? s[a](() => c[a]) : a >= r.length && (l[a] = re(u));
       for (; a < r.length; a++)
         o[a]();
@@ -426,7 +426,7 @@ function de(e) {
 const fn = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"], pn = /* @__PURE__ */ new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...fn]), hn = /* @__PURE__ */ new Set(["innerHTML", "textContent", "innerText", "children"]), gn = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   className: "class",
   htmlFor: "for"
-}), Ye = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
+}), Ge = /* @__PURE__ */ Object.assign(/* @__PURE__ */ Object.create(null), {
   class: "className",
   formnovalidate: "formNoValidate",
   ismap: "isMap",
@@ -482,7 +482,7 @@ function $n(e, t, n) {
     }
   }
 }
-const Ge = "_$DX_DELEGATE";
+const Qe = "_$DX_DELEGATE";
 function vn(e, t, n, r = {}) {
   let l;
   return re((o) => {
@@ -498,7 +498,7 @@ function $(e, t, n) {
   return n && (l = l.firstChild), l;
 }
 function Pe(e, t = window.document) {
-  const n = t[Ge] || (t[Ge] = /* @__PURE__ */ new Set());
+  const n = t[Qe] || (t[Qe] = /* @__PURE__ */ new Set());
   for (let r = 0, l = e.length; r < l; r++) {
     const o = e[r];
     n.has(o) || (n.add(o), t.addEventListener(o, Sn));
@@ -527,11 +527,11 @@ function wn(e, t, n = {}) {
   let o, s;
   for (o = 0, s = l.length; o < s; o++) {
     const i = l[o];
-    !i || i === "undefined" || t[i] || (Qe(e, i, !1), delete n[i]);
+    !i || i === "undefined" || t[i] || (qe(e, i, !1), delete n[i]);
   }
   for (o = 0, s = r.length; o < s; o++) {
     const i = r[o], a = !!t[i];
-    !i || i === "undefined" || n[i] === a || !a || (Qe(e, i, !0), n[i] = a);
+    !i || i === "undefined" || n[i] === a || !a || (qe(e, i, !0), n[i] = a);
   }
   return n;
 }
@@ -564,7 +564,7 @@ function Cn(e, t, n, r, l = {}, o = !1) {
     if (!(s in t)) {
       if (s === "children")
         continue;
-      l[s] = qe(e, s, null, l[s], n, o);
+      l[s] = et(e, s, null, l[s], n, o);
     }
   for (const s in t) {
     if (s === "children") {
@@ -572,18 +572,18 @@ function Cn(e, t, n, r, l = {}, o = !1) {
       continue;
     }
     const i = t[s];
-    l[s] = qe(e, s, i, l[s], n, o);
+    l[s] = et(e, s, i, l[s], n, o);
   }
 }
 function _n(e) {
   return e.toLowerCase().replace(/-([a-z])/g, (t, n) => n.toUpperCase());
 }
-function Qe(e, t, n) {
+function qe(e, t, n) {
   const r = t.trim().split(/\s+/);
   for (let l = 0, o = r.length; l < o; l++)
     e.classList.toggle(r[l], n);
 }
-function qe(e, t, n, r, l, o) {
+function et(e, t, n, r, l, o) {
   let s, i, a;
   if (t === "style")
     return Lt(e, n, r);
@@ -606,8 +606,8 @@ function qe(e, t, n, r, l, o) {
       e.removeEventListener(c, p);
     }
     (u || n) && (_e(e, c, n, u), u && Pe([c]));
-  } else if ((a = hn.has(t)) || !l && (Ye[t] || (i = pn.has(t))) || (s = e.nodeName.includes("-")))
-    t === "class" || t === "className" ? C(e, n) : s && !i && !a ? e[_n(t)] = n : e[Ye[t] || t] = n;
+  } else if ((a = hn.has(t)) || !l && (Ge[t] || (i = pn.has(t))) || (s = e.nodeName.includes("-")))
+    t === "class" || t === "className" ? C(e, n) : s && !i && !a ? e[_n(t)] = n : e[Ge[t] || t] = n;
   else {
     const c = l && t.indexOf(":") > -1 && yn[t.split(":")[0]];
     c ? bn(e, c, t, n) : j(e, gn[t] || t, n);
@@ -669,7 +669,7 @@ function ie(e, t, n, r, l) {
       }), () => n;
     if (Array.isArray(t)) {
       const i = [], a = n && Array.isArray(n);
-      if (Re(i, t, n, l))
+      if (Fe(i, t, n, l))
         return _(() => n = ie(e, i, n, r, !0)), () => n;
       if (U.context) {
         if (!i.length)
@@ -682,7 +682,7 @@ function ie(e, t, n, r, l) {
         if (n = ee(e, n, r), s)
           return n;
       } else
-        a ? n.length === 0 ? et(e, i, r) : $n(e, n, i) : (n && ee(e), et(e, i));
+        a ? n.length === 0 ? tt(e, i, r) : $n(e, n, i) : (n && ee(e), tt(e, i));
       n = i;
     } else if (t instanceof Node) {
       if (U.context && t.parentNode)
@@ -698,7 +698,7 @@ function ie(e, t, n, r, l) {
   }
   return n;
 }
-function Re(e, t, n, r) {
+function Fe(e, t, n, r) {
   let l = !1;
   for (let o = 0, s = t.length; o < s; o++) {
     let i = t[o], a = n && n[o];
@@ -706,12 +706,12 @@ function Re(e, t, n, r) {
       e.push(i);
     else if (!(i == null || i === !0 || i === !1))
       if (Array.isArray(i))
-        l = Re(e, i, a) || l;
+        l = Fe(e, i, a) || l;
       else if (typeof i == "function")
         if (r) {
           for (; typeof i == "function"; )
             i = i();
-          l = Re(e, Array.isArray(i) ? i : [i], Array.isArray(a) ? a : [a]) || l;
+          l = Fe(e, Array.isArray(i) ? i : [i], Array.isArray(a) ? a : [a]) || l;
         } else
           e.push(i), l = !0;
       else {
@@ -721,7 +721,7 @@ function Re(e, t, n, r) {
   }
   return l;
 }
-function et(e, t, n = null) {
+function tt(e, t, n = null) {
   for (let r = 0, l = t.length; r < l; r++)
     e.insertBefore(t[r], n);
 }
@@ -743,12 +743,12 @@ function ee(e, t, n, r) {
     e.insertBefore(l, n);
   return [l];
 }
-var kn = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, Fe = {}, Nn = {
+var kn = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, Be = {}, Nn = {
   get exports() {
-    return Fe;
+    return Be;
   },
   set exports(e) {
-    Fe = e;
+    Be = e;
   }
 };
 (function(e, t) {
@@ -793,7 +793,7 @@ var kn = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : t
     };
   });
 })(Nn);
-const An = Fe, Tn = /* @__PURE__ */ $("<button></button>"), F = (e) => (() => {
+const An = Be, Tn = /* @__PURE__ */ $("<button></button>"), F = (e) => (() => {
   const t = Tn.cloneNode(!0);
   return xn(t, cn(e, {
     onMouseDown: Pn
@@ -838,7 +838,7 @@ const En = `<svg
 function Dn(e) {
   return Mn[`/src/assets/icons/${e}.svg`];
 }
-const Je = `
+const Xe = `
   position: absolute;
   width: 100%;
   height: 100%;
@@ -848,7 +848,7 @@ const Je = `
 function zn(e, t = "px") {
   return typeof e == "string" ? String(e) : Array.isArray(e) ? e.map((n) => `${n}${t}`).join(" ") : `${e}${t}`;
 }
-let Rn = { data: "" }, Fn = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || Rn, Bn = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, Hn = /\/\*[^]*?\*\/|  +/g, tt = /\n+/g, K = (e, t) => {
+let Rn = { data: "" }, Fn = (e) => typeof window == "object" ? ((e ? e.querySelector("#_goober") : window._goober) || Object.assign((e || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : e || Rn, Bn = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, Hn = /\/\*[^]*?\*\/|  +/g, nt = /\n+/g, K = (e, t) => {
   let n = "", r = "", l = "";
   for (let o in e) {
     let s = e[o];
@@ -874,7 +874,7 @@ let Rn = { data: "" }, Fn = (e) => typeof window == "object" ? ((e ? e.querySele
     let a = o !== e ? e : ((c) => {
       let u, p, d = [{}];
       for (; u = Bn.exec(c.replace(Hn, "")); )
-        u[4] ? d.shift() : u[3] ? (p = u[3].replace(tt, " ").trim(), d.unshift(d[0][p] = d[0][p] || {})) : d[0][u[1]] = u[2].replace(tt, " ").trim();
+        u[4] ? d.shift() : u[3] ? (p = u[3].replace(nt, " ").trim(), d.unshift(d[0][p] = d[0][p] || {})) : d[0][u[1]] = u[2].replace(nt, " ").trim();
       return d[0];
     })(e);
     R[s] = K(l ? { ["@keyframes " + s]: a } : a, n ? "" : "." + s);
@@ -906,7 +906,7 @@ const Wn = /* @__PURE__ */ $("<div></div>"), Zn = S`
 
     svg {
       display: block;
-      ${Je};
+      ${Xe};
     }
   }
 `, Ee = (e) => {
@@ -963,13 +963,13 @@ function ae(e, t = /* @__PURE__ */ new Set()) {
   }
   return e;
 }
-function Xe(e) {
+function Ye(e) {
   let t = e[pe];
   return t || Object.defineProperty(e, pe, {
     value: t = {}
   }), t;
 }
-function Be(e, t, n) {
+function He(e, t, n) {
   return e[t] || (e[t] = Dt(n));
 }
 function Jn(e, t) {
@@ -978,7 +978,7 @@ function Jn(e, t) {
 }
 function Mt(e) {
   if (St()) {
-    const t = Xe(e);
+    const t = Ye(e);
     (t._ || (t._ = Dt()))();
   }
 }
@@ -1000,13 +1000,13 @@ const Yn = {
       return n;
     if (t === ve)
       return Mt(e), n;
-    const r = Xe(e), l = r.hasOwnProperty(t);
+    const r = Ye(e), l = r.hasOwnProperty(t);
     let o = l ? r[t]() : e[t];
     if (t === pe || t === "__proto__")
       return o;
     if (!l) {
       const s = Object.getOwnPropertyDescriptor(e, t);
-      St() && (typeof o != "function" || e.hasOwnProperty(t)) && !(s && s.get) && (o = Be(r, t, o)());
+      St() && (typeof o != "function" || e.hasOwnProperty(t)) && !(s && s.get) && (o = He(r, t, o)());
     }
     return se(o) ? It(o) : o;
   },
@@ -1027,8 +1027,8 @@ function ce(e, t, n, r = !1) {
     return;
   const l = e[t], o = e.length;
   n === void 0 ? delete e[t] : e[t] = n;
-  let s = Xe(e), i;
-  (i = Be(s, t, l)) && i.$(() => n), Array.isArray(e) && e.length !== o && (i = Be(s, "length", o)) && i.$(e.length), (i = s._) && i.$();
+  let s = Ye(e), i;
+  (i = He(s, t, l)) && i.$(() => n), Array.isArray(e) && e.length !== o && (i = He(s, "length", o)) && i.$(e.length), (i = s._) && i.$();
 }
 function zt(e, t) {
   const n = Object.keys(t);
@@ -1183,12 +1183,12 @@ function lr(e) {
   return Object.entries(e);
 }
 const ye = document.documentElement.style;
-let nt = 1;
+let rt = 1;
 function or(e) {
   const t = {};
   for (const [n, r] of lr(e)) {
-    const [l, o, s] = rr(r), i = `c${nt}`;
-    nt++, ye.setProperty(`--${i}-r`, String(l)), ye.setProperty(`--${i}-g`, String(o)), ye.setProperty(`--${i}-b`, String(s)), ye.setProperty(`--${i}`, r), t[n] = {
+    const [l, o, s] = rr(r), i = `c${rt}`;
+    rt++, ye.setProperty(`--${i}-r`, String(l)), ye.setProperty(`--${i}-g`, String(o)), ye.setProperty(`--${i}-b`, String(s)), ye.setProperty(`--${i}`, r), t[n] = {
       red: l,
       green: o,
       blue: s,
@@ -1265,7 +1265,7 @@ function ge(e) {
     }
   };
 }
-function He(e) {
+function Ve(e) {
   const t = m(e);
   return {
     get value() {
@@ -1273,7 +1273,7 @@ function He(e) {
     }
   };
 }
-const sr = /* @__PURE__ */ $('<div class="tag"></div>'), rt = /* @__PURE__ */ $("<span></span>"), ar = /* @__PURE__ */ $('<div><div class="call"></div></div>'), cr = S`
+const sr = /* @__PURE__ */ $('<div class="tag"></div>'), lt = /* @__PURE__ */ $("<span></span>"), ar = /* @__PURE__ */ $('<div><div class="call"></div></div>'), cr = S`
   &&& {
     font-size: 14px;
     ${O()};
@@ -1373,7 +1373,7 @@ const sr = /* @__PURE__ */ $('<div class="tag"></div>'), rt = /* @__PURE__ */ $(
             _v$2: void 0
           }), i;
         })(), (() => {
-          const i = rt.cloneNode(!0);
+          const i = lt.cloneNode(!0);
           return f(i, () => t().name), _(() => j(i, "title", t().name)), i;
         })()];
       }
@@ -1418,7 +1418,7 @@ const sr = /* @__PURE__ */ $('<div class="tag"></div>'), rt = /* @__PURE__ */ $(
               });
             },
             get children() {
-              const a = rt.cloneNode(!0);
+              const a = lt.cloneNode(!0);
               return f(a, i), a;
             }
           })
@@ -1460,11 +1460,11 @@ function pr(e) {
 function hr(e) {
   return e.filter((t) => t !== !1);
 }
-function lt(e) {
+function ot(e) {
   if (e == null)
     throw new Error("Value is null or undefined");
 }
-function ot(e, t) {
+function it(e, t) {
   try {
     return e();
   } catch (n) {
@@ -1507,12 +1507,12 @@ function le(e) {
 const [Q, yr] = Rt({
   calls: {}
 }), Oe = ge("");
-let Ve = {
+let Ue = {
   callsProcessor: []
 };
 function $r(e) {
-  Ve = {
-    ...Ve,
+  Ue = {
+    ...Ue,
     ...e
   };
 }
@@ -1547,13 +1547,13 @@ function vr(e) {
     const i = e.duration || Date.now() - t;
     yr(
       Qn((a) => {
-        const c = ot(
+        const c = it(
           () => new URL(e.path, "http://localhost")
         );
-        lt(c);
+        ot(c);
         const u = c.searchParams.toString() !== "" ? Object.fromEntries(c.searchParams.entries()) : null;
         let p = null;
-        const d = Ve.callsProcessor.find((A) => {
+        const d = Ue.callsProcessor.find((A) => {
           if (typeof A.match == "string") {
             if (A.matchType && A.matchType !== e.type || A.matchSubType && e.subType && A.matchSubType.includes(e.subType))
               return !1;
@@ -1581,7 +1581,7 @@ function vr(e) {
           subType: e.subType
         }, Oe.value = v);
         const w = a.calls[v];
-        lt(w), w.requests.length > 100 && w.requests.shift();
+        ot(w), w.requests.length > 100 && w.requests.shift();
         const k = {
           id: Xt(),
           duration: i,
@@ -1600,7 +1600,7 @@ function vr(e) {
           tags: pr(
             fr(e.tags, s)
           )
-        }, x = ot(
+        }, x = it(
           () => d?.payloadAlias?.(k.payload, k)
         );
         x && (k.alias = x), w.requests.push(k);
@@ -1617,22 +1617,22 @@ const br = {
   out: "cubic-bezier(0.0, 0.0, 0.2, 1)",
   in: "cubic-bezier(0.4, 0.0, 1, 1)",
   linear: "linear"
-}, it = (e) => e !== void 0 ? `${e}ms` : "";
+}, st = (e) => e !== void 0 ? `${e}ms` : "";
 function xr(e = {}) {
   const { properties: t, duration: n, ease: r, delay: l } = e;
   return `
-    transition: ${it(
+    transition: ${st(
     typeof n == "number" ? n : br[n || "medium"]
-  )} ${wr[r || "inOut"]} ${it(l)};
+  )} ${wr[r || "inOut"]} ${st(l)};
     ${t ? `
     transition-property: ${t.join(", ") || ""};
     ` : ""}
   `;
 }
-const st = (e) => e.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
+const at = (e) => e.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
 function Cr(e, t) {
-  const n = st(String(t)).indexOf(
-    st(String(e))
+  const n = at(String(t)).indexOf(
+    at(String(e))
   );
   return {
     matched: n !== -1,
@@ -1645,7 +1645,7 @@ function _r(e, t, { lowerFirst: n } = {}) {
     return o < s ? n ? -1 : 1 : o > s ? n ? 1 : -1 : 0;
   });
 }
-function at({
+function ct({
   items: e,
   searchQuery: t,
   getStringToMatch: n
@@ -1743,7 +1743,7 @@ const Sr = /* @__PURE__ */ $('<div><h1>API EXPLORER</h1><div><button>API</button
           p.alias && u.add(p.alias);
         s.push({
           id: a,
-          subitemsWithAlias: at({
+          subitemsWithAlias: ct({
             items: [...u],
             searchQuery: l.trim(),
             getStringToMatch(p) {
@@ -1754,7 +1754,7 @@ const Sr = /* @__PURE__ */ $('<div><h1>API EXPLORER</h1><div><button>API</button
         });
       }
     }
-    return at({
+    return ct({
       items: s,
       searchQuery: r.trim(),
       getStringToMatch(a) {
@@ -1904,15 +1904,15 @@ function Rr(e) {
     -webkit-box-orient: vertical;
   `;
 }
-const ct = /* @__PURE__ */ new Map();
-function Ue(e, t) {
+const ut = /* @__PURE__ */ new Map();
+function We(e, t) {
   const n = JSON.stringify(t);
-  return (ct.get(n) ?? ct.set(n, new Intl.NumberFormat("en-US", t)).get(n)).format(e);
+  return (ut.get(n) ?? ut.set(n, new Intl.NumberFormat("en-US", t)).get(n)).format(e);
 }
 function Fr(e) {
   return e !== null && typeof e == "object";
 }
-const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @__PURE__ */ $('<div class="collapsed"></div>'), Vr = /* @__PURE__ */ $('<div class="delimiter">[]</div>'), Ur = /* @__PURE__ */ $('<div class="delimiter">{}</div>'), ut = /* @__PURE__ */ $('<div class="delimiter"></div>'), dt = /* @__PURE__ */ $('<div class="childs"></div>'), Wr = /* @__PURE__ */ $('<div class="delimiter end">]</div>'), ft = /* @__PURE__ */ $('<div class="child"></div>'), Zr = /* @__PURE__ */ $('<div class="delimiter end">}</div>'), Kr = /* @__PURE__ */ $('<div class="value" title="Shift + Click to copy value"></div>'), pt = /* @__PURE__ */ $('<span class="string-quotes">"</span>'), Jr = /* @__PURE__ */ $("<div></div>"), ht = /* @__PURE__ */ $("<span> · id: </span>"), Xr = S`
+const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @__PURE__ */ $('<div class="collapsed"></div>'), Vr = /* @__PURE__ */ $('<div class="delimiter">[]</div>'), Ur = /* @__PURE__ */ $('<div class="delimiter">{}</div>'), dt = /* @__PURE__ */ $('<div class="delimiter"></div>'), ft = /* @__PURE__ */ $('<div class="childs"></div>'), Wr = /* @__PURE__ */ $('<div class="delimiter end">]</div>'), pt = /* @__PURE__ */ $('<div class="child"></div>'), Zr = /* @__PURE__ */ $('<div class="delimiter end">}</div>'), Kr = /* @__PURE__ */ $('<div class="value" title="Shift + Click to copy value"></div>'), ht = /* @__PURE__ */ $('<span class="string-quotes">"</span>'), Jr = /* @__PURE__ */ $("<div></div>"), Me = /* @__PURE__ */ $("<span> · id: </span>"), Xr = S`
   &&& {
     font-family: ${z.decorative};
     font-size: 13px;
@@ -2028,7 +2028,7 @@ const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @_
       }
     }
   }
-`, te = 14, We = (e) => {
+`, te = 14, Ze = (e) => {
   let [t, n] = oe(!(e.indent > 0 && e.compact)), [r, l] = oe(!e.compact);
   return m(() => {
     const o = e.value, s = Array.isArray(o), i = !s && Fr(o), a = e.key !== void 0 || e.index !== void 0, c = s && o.length > 0 || i && Object.keys(o).length > 0, u = c && h(F, {
@@ -2066,20 +2066,20 @@ const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @_
         const d = Hr.cloneNode(!0);
         return f(d, () => s ? `[…] ${o.length} items` : [m(() => `{…} ${Object.keys(o).length} props`), m(() => Yr(o))]), d;
       })() : (() => s && o.length === 0 ? Vr.cloneNode(!0) : i && Object.keys(o).length === 0 ? Ur.cloneNode(!0) : s ? [(() => {
-        const d = ut.cloneNode(!0);
+        const d = dt.cloneNode(!0);
         return _e(d, "click", a ? void 0 : (g) => {
           g.shiftKey && $e(o);
         }, !0), j(d, "title", a ? void 0 : "Shift + Click to copy value"), f(d, !a && u, null), f(d, () => t() ? "[" : `[…] ${o.length} items`, null), d;
       })(), m((() => {
         const d = m(() => !!t());
         return () => d() && [(() => {
-          const g = dt.cloneNode(!0);
+          const g = ft.cloneNode(!0);
           return f(g, () => {
             let v = o;
             const b = v.length;
             return r() || (v = v.slice(0, te)), [m(() => v.map((w, k) => (() => {
-              const x = ft.cloneNode(!0);
-              return f(x, h(We, {
+              const x = pt.cloneNode(!0);
+              return f(x, h(Ze, {
                 value: w,
                 get indent() {
                   return e.indent + 1;
@@ -2104,7 +2104,7 @@ const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @_
           }), g;
         })(), Wr.cloneNode(!0)];
       })())] : i ? [(() => {
-        const d = ut.cloneNode(!0);
+        const d = dt.cloneNode(!0);
         return _e(d, "click", a ? void 0 : (g) => {
           g.shiftKey && $e(o);
         }, !0), j(d, "title", a ? void 0 : "Shift + Click to copy value"), f(d, !a && u, null), f(d, (() => {
@@ -2114,13 +2114,13 @@ const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @_
       })(), m((() => {
         const d = m(() => !!t());
         return () => d() && [(() => {
-          const g = dt.cloneNode(!0);
+          const g = ft.cloneNode(!0);
           return f(g, () => {
             let v = Object.entries(o);
             const b = v.length;
             return r() || (v = v.slice(0, te)), [m(() => v.map(([w, k]) => (() => {
-              const x = ft.cloneNode(!0);
-              return f(x, h(We, {
+              const x = pt.cloneNode(!0);
+              return f(x, h(Ze, {
                 value: k,
                 key: w,
                 get indent() {
@@ -2148,13 +2148,13 @@ const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @_
         const d = Kr.cloneNode(!0);
         return d.$$click = (g) => {
           g.shiftKey && $e(String(o));
-        }, j(d, "data-type", typeof o), f(d, typeof o == "string" && pt.cloneNode(!0), null), f(d, () => typeof o == "number" ? Ue(o) : String(o), null), f(d, typeof o == "string" && pt.cloneNode(!0), null), d;
+        }, j(d, "data-type", typeof o), f(d, typeof o == "string" && ht.cloneNode(!0), null), f(d, () => typeof o == "number" ? We(o) : String(o), null), f(d, typeof o == "string" && ht.cloneNode(!0), null), d;
       })())();
     })())];
   });
 }, Z = (e) => (() => {
   const t = Jr.cloneNode(!0);
-  return C(t, Xr), f(t, h(We, {
+  return C(t, Xr), f(t, h(Ze, {
     get value() {
       return e.value;
     },
@@ -2167,7 +2167,7 @@ const Br = /* @__PURE__ */ $('<div class="key"><span></span></div>'), Hr = /* @_
 function Yr(e) {
   if ("id" in e)
     return (() => {
-      const n = ht.cloneNode(!0);
+      const n = Me.cloneNode(!0);
       return n.firstChild, f(n, () => String(e.id), null), n;
     })();
   const t = Object.keys(e);
@@ -2176,11 +2176,14 @@ function Yr(e) {
       const r = e[n];
       if (typeof r == "string" || typeof r == "number")
         return (() => {
-          const l = ht.cloneNode(!0);
+          const l = Me.cloneNode(!0);
           return l.firstChild, f(l, r, null), l;
         })();
     }
-  return "";
+  return "key" in e ? (() => {
+    const n = Me.cloneNode(!0);
+    return n.firstChild, f(n, () => String(e.id), null), n;
+  })() : "";
 }
 async function $e(e) {
   await navigator.clipboard.writeText(typeof e == "object" ? JSON.stringify(e, null, 2) : String(e)), alert("Copied to clipboard");
@@ -2286,7 +2289,7 @@ function gt(e, t) {
 function ol(e, t) {
   return e.length > t ? `${e.slice(0, t)}...` : e;
 }
-const il = /* @__PURE__ */ $('<div class="changes-count"><span class="additions">+ <b></b> lines</span> | <span class="removals">- <b></b> lines</span></div>'), Me = /* @__PURE__ */ $("<div></div>"), mt = /* @__PURE__ */ $("<div>No changes</div>"), yt = /* @__PURE__ */ $('<div class="line"></div>'), sl = S`
+const il = /* @__PURE__ */ $('<div class="changes-count"><span class="additions">+ <b></b> lines</span> | <span class="removals">- <b></b> lines</span></div>'), De = /* @__PURE__ */ $("<div></div>"), mt = /* @__PURE__ */ $("<div>No changes</div>"), yt = /* @__PURE__ */ $('<div class="line"></div>'), sl = S`
   &&& {
     ${O({
   gap: 14
@@ -2350,7 +2353,7 @@ const il = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
       selectedCall: a
     } = I;
     return a ? Q.calls[a] : Q.calls[Oe.value];
-  }), t = He(() => I.selectedRequest ? e()?.requests.find((a) => a.id === I.selectedRequest) : e()?.requests.at(-1) || null), n = m(() => t.value?.id), r = Bt(() => {
+  }), t = Ve(() => I.selectedRequest ? e()?.requests.find((a) => a.id === I.selectedRequest) : e()?.requests.at(-1) || null), n = m(() => t.value?.id), r = Bt(() => {
     const a = e();
     return a ? Ht(a.requests).map((c) => ({
       value: c.id,
@@ -2368,7 +2371,7 @@ const il = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
     return u === "no changes" ? [] : u;
   });
   return (() => {
-    const a = Me.cloneNode(!0);
+    const a = De.cloneNode(!0);
     return C(a, sl), f(a, h(ll, {
       get value() {
         return l.value;
@@ -2398,7 +2401,7 @@ const il = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
                 return t.value?.payload ? "Payload Diff" : t.value?.searchParams ? "Search Params Diff" : t.value?.pathParams ? "Path Params Diff" : "Payload";
               },
               get children() {
-                const c = Me.cloneNode(!0);
+                const c = De.cloneNode(!0);
                 return C(c, $t), f(c, h(G, {
                   get each() {
                     return i();
@@ -2428,7 +2431,7 @@ const il = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
             return h(M, {
               title: "Response Diff",
               get children() {
-                const c = Me.cloneNode(!0);
+                const c = De.cloneNode(!0);
                 return C(c, $t), f(c, h(G, {
                   get each() {
                     return s();
@@ -2458,7 +2461,7 @@ const il = /* @__PURE__ */ $('<div class="changes-count"><span class="additions"
 function vt(e) {
   return e ? e.payload || e.searchParams || e.pathParams : null;
 }
-const bt = /* @__PURE__ */ $("<div></div>"), cl = /* @__PURE__ */ $('<h1><span class="type"></span><span>|</span></h1>'), ul = /* @__PURE__ */ $('<div class="tags"></div>'), dl = /* @__PURE__ */ $('<div class="details"></div>'), fl = /* @__PURE__ */ $('<span class="separator">|</span>'), pl = /* @__PURE__ */ $("<h2></h2>"), hl = /* @__PURE__ */ $('<div class="method"></div>'), gl = /* @__PURE__ */ $('<div class="code"></div>'), ml = /* @__PURE__ */ $('<div class="tag error">Has Error</div>'), yl = /* @__PURE__ */ $('<div class="tag"></div>'), $l = /* @__PURE__ */ $("<span> ms</span>"), vl = /* @__PURE__ */ $("<span></span>"), bl = S`
+const bt = /* @__PURE__ */ $("<div></div>"), cl = /* @__PURE__ */ $('<h1><span class="type"></span><span class="separator">|</span></h1>'), ul = /* @__PURE__ */ $('<div class="tags"></div>'), dl = /* @__PURE__ */ $('<div class="details"></div>'), fl = /* @__PURE__ */ $('<span class="separator">|</span>'), pl = /* @__PURE__ */ $("<h2></h2>"), hl = /* @__PURE__ */ $('<div class="method"></div>'), gl = /* @__PURE__ */ $('<div class="code"></div>'), ml = /* @__PURE__ */ $('<div class="tag error">Has Error</div>'), yl = /* @__PURE__ */ $('<div class="tag"></div>'), $l = /* @__PURE__ */ $("<span> ms</span>"), vl = /* @__PURE__ */ $("<span></span>"), bl = S`
   &&& {
     ${O()};
     padding-left: 10px;
@@ -2555,7 +2558,7 @@ const bt = /* @__PURE__ */ $("<div></div>"), cl = /* @__PURE__ */ $('<h1><span c
     }
   }
 `, xl = () => {
-  const e = m(() => I.selectedCall), t = m(() => I.selectedRequest), n = m(() => I.selectedTab || "summary"), r = He(() => {
+  const e = m(() => I.selectedCall), t = m(() => I.selectedRequest), n = m(() => I.selectedTab || "summary"), r = Ve(() => {
     let s;
     e() ? s = Q.calls[e()] : s = Q.calls[Oe.value];
     const i = t() && s?.requests.find((a) => a.id === t()) || s?.requests.at(-1);
@@ -2578,11 +2581,11 @@ const bt = /* @__PURE__ */ $("<div></div>"), cl = /* @__PURE__ */ $('<h1><span c
       children: i
     });
   }
-  const o = He(() => {
+  const o = Ve(() => {
     if (!r.value?.response)
       return !1;
     const s = JSON.stringify(r.value.response).length;
-    return Ue(s, {
+    return We(s, {
       unit: "byte",
       style: "unit",
       notation: "compact",
@@ -2691,7 +2694,7 @@ const bt = /* @__PURE__ */ $("<div></div>"), cl = /* @__PURE__ */ $('<h1><span c
                           name: "Duration",
                           value: (() => {
                             const c = $l.cloneNode(!0), u = c.firstChild;
-                            return f(c, () => Ue(i.duration, {
+                            return f(c, () => We(i.duration, {
                               maximumFractionDigits: 0
                             }), u), _(() => c.style.setProperty("color", i.duration < 500 ? y.success.var : i.duration > 1e3 ? y.error.var : void 0)), c;
                           })()
@@ -3067,10 +3070,10 @@ button {
   }
 
   > main > * {
-    ${Je};
+    ${Xe};
   }
 `, Vl = S`
-  ${Je};
+  ${Xe};
   position: fixed;
   inset: 0;
   backdrop-filter: blur(5px);
@@ -3114,18 +3117,18 @@ function Kl() {
   n.type = "text/css", n.rel = "stylesheet", n.href = e, t?.appendChild(n);
 }
 let Wt = () => {
-}, Ze = !1;
+}, Ke = !1;
 function Jl() {
-  if (ne.extend(An), Ze) {
+  if (ne.extend(An), Ke) {
     Zt();
     return;
   }
-  Ze = !0, Kl(), navigator.platform.indexOf("Win") > -1 && document.body.classList.add("windows");
+  Ke = !0, Kl(), navigator.platform.indexOf("Win") > -1 && document.body.classList.add("windows");
   const e = document.getElementById("dev-tools-root") || document.createElement("div");
   e.id = "dev-tools-root", document.body.appendChild(e), Wt = vn(() => h(Wl, {}), e);
 }
 function Zt() {
-  Ze = !1, Wt();
+  Ke = !1, Wt();
 }
 function no({
   callsProcessor: e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-devtools",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "description": "",
   "packageManager": "pnpm@6.29.1",
   "license": "MIT",