@pinia/colada-devtools 0.2.1 → 0.4.0

package/dist-panel/{_queryId_-deTdMujv.js → _queryId_-OYxjQ3wF.js}

@@ -1,14 +1,14 @@
-import { _ as F } from "./mouse-pointer-click-CR81e5yZ.js";
-import { I as U, _ as Q, a as W, b as J, c as G, d as P, e as X, f as K, g as Y } from "./circle-x-CRJfYoJo.js";
-import { _ as Z, a as ee } from "./loader-CiXOT2XE.js";
-import { m as q, c as i, o as n, a as t, d as te, C as se, b as z, s as oe, p as B, v as ne, F as b, i as a, w as d, g as o, x as D, q as _, t as c, y as le, f as $, z as ae, A as C, e as x, B as re, h as ie } from "./index-CEuAAFs8.js";
+import { _ as j } from "./mouse-pointer-click-tLOKuf9h.js";
+import { I as F, _ as U, a as Q, b as W, c as G, d as J, e as P, f as X, g as K } from "./circle-x-CKUVRuJV.js";
+import { _ as Y, a as Z } from "./loader-DUh7Y4gr.js";
+import { m as $, c as u, o as n, a as t, d as ee, C as te, b as se, s as oe, p as D, v as ne, F as C, i as l, w as r, g as o, n as z, x as R, q as p, t as m, y as le, f as b, z as ae, A as I, e as k, B as ie, h as re } from "./index-BDRe8hqi.js";
 const ue = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function de(v, l) {
-  return n(), i("svg", ue, [...l[0] || (l[0] = [
+function de(v, a) {
+  return n(), u("svg", ue, [...a[0] || (a[0] = [
     t("g", {
       fill: "none",
       stroke: "currentColor",
@@ -21,13 +21,13 @@ function de(v, l) {
     ], -1)
   ])]);
 }
-const ce = q({ name: "lucide-timer-reset", render: de }), pe = {
+const ce = $({ name: "lucide-timer-reset", render: de }), pe = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function me(v, l) {
-  return n(), i("svg", pe, [...l[0] || (l[0] = [
+function me(v, a) {
+  return n(), u("svg", pe, [...a[0] || (a[0] = [
     t("g", {
       fill: "none",
       stroke: "currentColor",
@@ -41,25 +41,25 @@ function me(v, l) {
     ], -1)
   ])]);
 }
-const _e = q({ name: "lucide-refresh-cw", render: me });
-function ve(v) {
+const ve = $({ name: "lucide-refresh-cw", render: me });
+function _e(v) {
   if (v < 1e3)
     return `${Math.round(v)} ms`;
-  const l = v / 1e3;
+  const a = v / 1e3;
   if (v < 1e4)
-    return `${l.toFixed(3)} seconds`;
+    return `${a.toFixed(3)} seconds`;
   if (v < 6e4)
-    return `${Math.floor(l)} seconds`;
-  const y = Math.floor(l / 60);
-  return v < 36e5 ? `${y} minute${y > 1 ? "s" : ""}` : `${Math.floor(y / 60)}h${y % 60}m${l % 60}s`;
+    return `${Math.floor(a)} seconds`;
+  const y = Math.floor(a / 60);
+  return v < 36e5 ? `${y} minute${y > 1 ? "s" : ""}` : `${Math.floor(y / 60)}h${y % 60}m${a % 60}s`;
 }
 const fe = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function he(v, l) {
-  return n(), i("svg", fe, [...l[0] || (l[0] = [
+function ge(v, a) {
+  return n(), u("svg", fe, [...a[0] || (a[0] = [
     t("g", {
       fill: "none",
       stroke: "currentColor",
@@ -72,13 +72,13 @@ function he(v, l) {
     ], -1)
   ])]);
 }
-const ge = q({ name: "lucide-history", render: he }), ye = {
+const he = $({ name: "lucide-history", render: ge }), ye = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
-function ke(v, l) {
-  return n(), i("svg", ye, [...l[0] || (l[0] = [
+function ke(v, a) {
+  return n(), u("svg", ye, [...a[0] || (a[0] = [
     t("g", {
       fill: "none",
       stroke: "currentColor",
@@ -97,234 +97,220 @@ function ke(v, l) {
     ], -1)
   ])]);
 }
-const xe = q({ name: "lucide-sigma-square", render: ke }), we = { class: "flex flex-col divide-y dark:divide-(--ui-border) divide-(--ui-border-accented)" }, $e = { class: "py-1 text-sm" }, qe = { class: "grid grid-cols-[auto_1fr] gap-1" }, be = { class: "rounded bg-neutral-500/20 p-0.5" }, Ce = {
+const xe = $({ name: "lucide-sigma-square", render: ke }), we = { class: "flex flex-col divide-y dark:divide-(--ui-border) divide-(--ui-border-accented)" }, be = { class: "py-1 text-sm" }, $e = { class: "grid grid-cols-[auto_1fr] gap-1" }, qe = { class: "rounded bg-neutral-500/20 p-0.5" }, Ce = {
   class: "grid grid-cols-[auto_1fr] gap-x-2",
   title: "When was the query entry last updated"
-}, Se = { class: "font-bold" }, Ie = {
+}, Ie = { class: "font-bold" }, Te = {
   key: 0,
   class: "grid grid-cols-[auto_1fr] gap-x-2",
   title: "When was the last time the query was fetched"
-}, Te = { class: "font-bold" }, ze = {
+}, Se = { class: "font-bold" }, Be = {
   key: 1,
   class: "grid grid-cols-[auto_1fr] gap-x-2",
   title: "How long did the last query take to fetch"
-}, Be = { class: "font-bold" }, De = {
+}, De = { class: "font-bold" }, ze = {
   class: "grid grid-cols-[auto_1fr] gap-x-2",
   title: "How many components and effects are using this query"
-}, Ee = { class: "font-bold" }, Ne = {
+}, Re = { class: "font-bold" }, Ae = {
   key: 2,
   class: "grid grid-cols-[auto_1fr] gap-x-2",
   title: "When is this query entry garbace collected"
-}, Re = { class: "font-bold" }, Ae = { class: "py-2 gap-2 flex flex-wrap items-center justify-items-start" }, He = { class: "py-1" }, Oe = {
+}, Ne = { class: "font-bold" }, Ee = { class: "py-2 gap-2 flex flex-wrap items-center justify-items-start" }, He = { class: "py-1" }, Le = {
   key: 0,
   class: "rounded p-1 overflow-auto max-h-[1200px]"
-}, Le = {
+}, Me = {
   key: 1,
-  class: "text-neutral-500/50"
-}, Me = { class: "py-1" }, Ve = { class: "grid grid-cols-[auto_1fr] gap-1" }, je = { class: "font-bold" }, Fe = { class: "font-bold" }, Ue = { class: "font-bold" }, Qe = { class: "font-bold" }, We = { class: "py-1" }, Je = { class: "rounded p-1 overflow-auto max-h-[1200px]" }, Ge = { class: "py-1" }, Pe = {
-  key: 0,
-  class: "rounded bg-neutral-500/20 p-1 overflow-auto max-h-[1200px]"
-}, Xe = { key: 1 }, Ke = {
+  class: "text-(--ui-text-muted)/50"
+}, Oe = { class: "py-1" }, Ve = { class: "grid grid-cols-[auto_1fr] gap-1" }, je = { class: "font-bold" }, Fe = { class: "font-bold" }, Ue = { class: "font-bold" }, Qe = { class: "font-bold" }, We = { class: "py-1" }, Ge = { key: 1 }, Je = {
   key: 1,
   class: "py-6 mx-auto"
-}, Ye = { class: "flex flex-col text-center items-center gap-2 text-lg px-2" }, Ze = { class: "text-center text-sm text-neutral-500 mt-4" }, nt = /* @__PURE__ */ te({
+}, Pe = { class: "flex flex-col text-center items-center gap-2 text-lg px-2" }, Xe = { class: "text-center text-sm text-neutral-500 mt-4" }, tt = /* @__PURE__ */ ee({
   __name: "[queryId]",
   setup(v) {
-    const l = le(), y = se(), s = z(() => y.value.find((r) => r.keyHash === l.params.queryId) ?? null), E = z(() => s.value?.devtools.history.map((r) => {
-      let e;
-      try {
-        e = JSON.stringify(r, null, 2);
-      } catch (p) {
-        e = `Error serializing entry: ${String(p)}`;
-      }
-      return {
-        ...r,
-        data: e
-      };
-    }) ?? []), w = {
+    const a = le(), y = te(), s = se(() => y.value.find((d) => d.keyHash === a.params.queryId) ?? null), w = {
       showSecond: !0,
       rounding: "floor",
       max: 1e3 * 60 * 60 * 24
       // 1 day
-    }, N = ae(() => s.value?.devtools.updatedAt ?? 0, {
+    }, A = ae(() => s.value?.devtools.updatedAt ?? 0, {
       ...w,
       updateInterval: 3e3
-    }), h = oe(), g = B("pc:query:details:data:open", !1, {});
-    let S = g.value, I = null;
-    const k = B("pc:query:details:error:open", !1, {});
+    }), g = oe(), h = D("pc:query:details:data:open", !1, {});
+    let T = h.value, S = null;
+    const x = D("pc:query:details:error:open", !1, {});
     ne(
       () => s.value?.state,
-      (r) => {
-        !r || I === r.status || (I = r.status, r.status === "error" ? (k.value = !0, S = g.value, g.value = !1) : r.status === "success" && (g.value = S, k.value = !1));
+      (d) => {
+        !d || S === d.status || (S = d.status, d.status === "error" ? (x.value = !0, T = h.value, h.value = !1) : d.status === "success" && (h.value = T, x.value = !1));
       }
     );
-    function R(r, e, p) {
+    function N(d, e, _) {
       if (e.length === 0)
         return console.error("Cannot set value with empty path"), !1;
-      let f = r;
-      for (let m = 0; m < e.length - 1; m++) {
+      let f = d;
+      for (let c = 0; c < e.length - 1; c++) {
         if (f == null || typeof f != "object")
-          return console.error("Invalid path:", e, "at index", m, "Current value:", f), !1;
-        f = f[e[m]];
+          return console.error("Invalid path:", e, "at index", c, "Current value:", f), !1;
+        f = f[e[c]];
       }
-      return f == null || typeof f != "object" ? (console.error("Invalid final parent in path:", e), !1) : (f[e.at(-1)] = p, !0);
+      return f == null || typeof f != "object" ? (console.error("Invalid final parent in path:", e), !1) : (f[e.at(-1)] = _, !0);
     }
-    const A = (r, e) => {
+    const E = (d, e) => {
       if (!s.value) return;
-      if (!R(s.value.state.data, r, e)) {
-        console.error("Failed to update value at path:", r);
+      if (!N(s.value.state.data, d, e)) {
+        console.error("Failed to update value at path:", d);
         return;
       }
-      h.emit("queries:set:state", s.value.key, s.value.state);
+      g.emit("queries:set:state", s.value.key, s.value.state);
     };
-    return (r, e) => {
-      const p = Q, f = _e, m = re, H = ce, T = Z, O = ee, L = X, M = K, V = Y, j = F;
-      return n(), i("div", we, [
-        s.value ? (n(), i(b, { key: 0 }, [
-          a(p, {
+    return (d, e) => {
+      const _ = U, f = ve, c = ie, H = ce, B = Y, L = Z, M = P, O = X, q = K, V = j;
+      return n(), u("div", we, [
+        s.value ? (n(), u(C, { key: 0 }, [
+          l(_, {
             title: "Details",
-            icon: o(U)
+            icon: o(F)
           }, {
-            default: d(() => [
-              t("div", $e, [
-                t("p", qe, [
+            default: r(() => [
+              t("div", be, [
+                t("p", $e, [
                   e[9] || (e[9] = t("span", null, "key:", -1)),
                   t("span", null, [
-                    t("code", be, c(s.value.key), 1)
+                    t("code", qe, m(s.value.key), 1)
                   ])
                 ]),
                 t("p", Ce, [
                   e[10] || (e[10] = t("span", null, "Last update:", -1)),
-                  t("span", Se, c(o(N)), 1)
+                  t("span", Ie, m(o(A)), 1)
                 ]),
-                s.value.devtools.history.at(0)?.fetchTime ? (n(), i("p", Ie, [
+                s.value.devtools.history.at(0)?.fetchTime ? (n(), u("p", Te, [
                   e[11] || (e[11] = t("span", null, "Last fetch:", -1)),
-                  t("span", Te, c(o(C)(new Date(s.value.devtools.history.at(0).fetchTime.start), {
+                  t("span", Se, m(o(I)(new Date(s.value.devtools.history.at(0).fetchTime.start), {
                     ...w,
                     max: void 0
                   })), 1)
-                ])) : $("", !0),
-                s.value.devtools.history.at(0)?.fetchTime?.end ? (n(), i("p", ze, [
+                ])) : b("", !0),
+                s.value.devtools.history.at(0)?.fetchTime?.end ? (n(), u("p", Be, [
                   e[12] || (e[12] = t("span", null, "Fetch duration:", -1)),
-                  t("span", Be, c(o(ve)(
+                  t("span", De, m(o(_e)(
                     s.value.devtools.history.at(0).fetchTime.end - s.value.devtools.history.at(0).fetchTime.start
                   )), 1)
-                ])) : $("", !0),
-                t("p", De, [
+                ])) : b("", !0),
+                t("p", ze, [
                   t("span", null, [
-                    e[13] || (e[13] = _("Observers: ", -1)),
-                    t("span", Ee, c(s.value.deps.length), 1)
+                    e[13] || (e[13] = p("Observers: ", -1)),
+                    t("span", Re, m(s.value.deps.length), 1)
                   ])
                 ]),
-                !s.value.active && s.value.options ? (n(), i("p", Ne, [
-                  typeof s.value.options.gcTime == "number" && Number.isFinite(s.value.options.gcTime) ? (n(), i(b, { key: 0 }, [
+                !s.value.active && s.value.options ? (n(), u("p", Ae, [
+                  typeof s.value.options.gcTime == "number" && Number.isFinite(s.value.options.gcTime) ? (n(), u(C, { key: 0 }, [
                     e[14] || (e[14] = t("span", null, [
-                      _("Will be "),
+                      p("Will be "),
                       t("i", null, "gced")
                     ], -1)),
-                    t("span", Re, c(o(C)(
+                    t("span", Ne, m(o(I)(
                       new Date(s.value.devtools.inactiveAt + s.value.options.gcTime),
                       {
                         ...w,
                         max: void 0
                       }
                     )), 1)
-                  ], 64)) : $("", !0)
-                ])) : $("", !0)
+                  ], 64)) : b("", !0)
+                ])) : b("", !0)
               ])
             ]),
             _: 1
           }, 8, ["icon"]),
-          a(p, {
+          l(_, {
             title: "Actions",
-            icon: o(W)
+            icon: o(Q)
           }, {
-            default: d(() => [
-              t("div", Ae, [
-                a(m, {
+            default: r(() => [
+              t("div", Ee, [
+                l(c, {
                   class: "theme-info",
                   size: "sm",
                   title: "Refetch this query",
                   disabled: s.value.options?.enabled === !1,
-                  onClick: e[0] || (e[0] = (u) => o(h).emit("queries:refetch", s.value.key))
+                  onClick: e[0] || (e[0] = (i) => o(g).emit("queries:refetch", s.value.key))
                 }, {
-                  default: d(() => [
-                    a(f, { class: "size-3.5" }),
-                    e[15] || (e[15] = _(" Refetch ", -1))
+                  default: r(() => [
+                    l(f, { class: "size-3.5" }),
+                    e[15] || (e[15] = p(" Refetch ", -1))
                   ]),
                   _: 1
                 }, 8, ["disabled"]),
-                a(m, {
+                l(c, {
                   class: "theme-neutral",
                   size: "sm",
                   title: "Invalidate this query",
-                  onClick: e[1] || (e[1] = (u) => o(h).emit("queries:invalidate", s.value.key))
+                  onClick: e[1] || (e[1] = (i) => o(g).emit("queries:invalidate", s.value.key))
                 }, {
-                  default: d(() => [
-                    a(H),
-                    e[16] || (e[16] = _(" Invalidate ", -1))
+                  default: r(() => [
+                    l(H),
+                    e[16] || (e[16] = p(" Invalidate ", -1))
                   ]),
                   _: 1
                 }),
-                s.value.devtools.simulate !== "loading" ? (n(), x(m, {
+                s.value.devtools.simulate !== "loading" ? (n(), k(c, {
                   key: 0,
                   class: "theme-purple",
                   size: "sm",
                   title: "Restore the previous state",
-                  onClick: e[2] || (e[2] = (u) => o(h).emit("queries:simulate:loading", s.value.key))
+                  onClick: e[2] || (e[2] = (i) => o(g).emit("queries:simulate:loading", s.value.key))
                 }, {
-                  default: d(() => [
-                    a(T),
-                    e[17] || (e[17] = _(" Simulate loading ", -1))
+                  default: r(() => [
+                    l(B),
+                    e[17] || (e[17] = p(" Simulate loading ", -1))
                   ]),
                   _: 1
-                })) : (n(), x(m, {
+                })) : (n(), k(c, {
                   key: 1,
                   class: "theme-purple",
                   size: "sm",
                   title: "Simulate a loading state",
-                  onClick: e[3] || (e[3] = (u) => o(h).emit("queries:simulate:loading:stop", s.value.key))
+                  onClick: e[3] || (e[3] = (i) => o(g).emit("queries:simulate:loading:stop", s.value.key))
                 }, {
-                  default: d(() => [
-                    a(T, { class: "animate-spin" }),
-                    e[18] || (e[18] = _(" Stop loading ", -1))
+                  default: r(() => [
+                    l(B, { class: "animate-spin" }),
+                    e[18] || (e[18] = p(" Stop loading ", -1))
                   ]),
                   _: 1
                 })),
-                s.value.devtools.simulate !== "error" ? (n(), x(m, {
+                s.value.devtools.simulate !== "error" ? (n(), k(c, {
                   key: 2,
                   class: "theme-error",
                   size: "sm",
                   title: "Simulate an Error state",
-                  onClick: e[4] || (e[4] = (u) => o(h).emit("queries:simulate:error", s.value.key))
+                  onClick: e[4] || (e[4] = (i) => o(g).emit("queries:simulate:error", s.value.key))
                 }, {
-                  default: d(() => [
-                    a(O),
-                    e[19] || (e[19] = _(" Simulate error ", -1))
+                  default: r(() => [
+                    l(L),
+                    e[19] || (e[19] = p(" Simulate error ", -1))
                   ]),
                   _: 1
-                })) : (n(), x(m, {
+                })) : (n(), k(c, {
                   key: 3,
                   class: "theme-error",
                   size: "sm",
                   title: "Restore the previous state",
-                  onClick: e[5] || (e[5] = (u) => o(h).emit("queries:simulate:error:stop", s.value.key))
+                  onClick: e[5] || (e[5] = (i) => o(g).emit("queries:simulate:error:stop", s.value.key))
                 }, {
-                  default: d(() => [
-                    a(L),
-                    e[20] || (e[20] = _(" Remove error ", -1))
+                  default: r(() => [
+                    l(M),
+                    e[20] || (e[20] = p(" Remove error ", -1))
                   ]),
                   _: 1
                 })),
-                a(m, {
+                l(c, {
                   class: "theme-warning",
                   size: "sm",
                   title: "Reset this query to its initial (pending) state",
-                  onClick: e[6] || (e[6] = (u) => o(h).emit("queries:reset", s.value.key))
+                  onClick: e[6] || (e[6] = (i) => o(g).emit("queries:reset", s.value.key))
                 }, {
-                  default: d(() => [
-                    a(M),
-                    e[21] || (e[21] = _(" Reset ", -1))
+                  default: r(() => [
+                    l(O),
+                    e[21] || (e[21] = p(" Reset ", -1))
                   ]),
                   _: 1
                 })
@@ -332,78 +318,84 @@ const xe = q({ name: "lucide-sigma-square", render: ke }), we = { class: "flex f
             ]),
             _: 1
           }, 8, ["icon"]),
-          a(p, {
-            open: o(g),
-            "onUpdate:open": e[7] || (e[7] = (u) => D(g) ? g.value = u : null),
-            title: "Data",
-            icon: o(J),
-            class: "font-mono",
+          l(_, {
+            open: o(h),
+            "onUpdate:open": e[7] || (e[7] = (i) => R(h) ? h.value = i : null),
+            title: `Data${s.value.state.data === void 0 ? " (empty)" : ""}`,
+            icon: o(W),
+            class: z([s.value.state.data === void 0 && "text-(--ui-text-muted)"]),
             "no-padding": ""
           }, {
-            default: d(() => [
-              a(V, {
+            default: r(() => [
+              l(q, {
                 data: s.value.state.data,
-                "onUpdate:value": A
+                "onUpdate:value": E
               }, null, 8, ["data"])
             ]),
             _: 1
-          }, 8, ["open", "icon"]),
-          a(p, {
-            open: o(k),
-            "onUpdate:open": e[8] || (e[8] = (u) => D(k) ? k.value = u : null),
-            title: `Error${s.value.state.status === "error" ? " (!)" : ""}`,
-            icon: o(G)
+          }, 8, ["open", "title", "icon", "class"]),
+          l(_, {
+            open: o(x),
+            "onUpdate:open": e[8] || (e[8] = (i) => R(x) ? x.value = i : null),
+            title: `Error${s.value.state.status === "error" ? " (!)" : "(empty)"}`,
+            icon: o(G),
+            class: z([s.value.state.status !== "error" && "text-(--ui-text-muted)"]),
+            disabled: ""
           }, {
-            default: d(() => [
+            default: r(() => [
               t("div", He, [
-                s.value.state.error ? (n(), i("pre", Oe, c(s.value.state.error), 1)) : (n(), i("p", Le, "No error"))
+                s.value.state.error ? (n(), u("pre", Le, m(s.value.state.error), 1)) : (n(), u("p", Me, "No error"))
               ])
             ]),
             _: 1
-          }, 8, ["open", "title", "icon"]),
-          a(p, {
+          }, 8, ["open", "title", "icon", "class"]),
+          l(_, {
             title: "Call count",
             icon: o(xe),
             open: !1
           }, {
-            default: d(() => [
-              t("div", Me, [
+            default: r(() => [
+              t("div", Oe, [
                 t("p", Ve, [
                   e[22] || (e[22] = t("span", null, "Calls:", -1)),
                   t("span", null, [
-                    t("code", je, c(s.value.devtools.count.total), 1)
+                    t("code", je, m(s.value.devtools.count.total), 1)
                   ]),
                   e[23] || (e[23] = t("span", null, "Success:", -1)),
                   t("span", null, [
-                    t("code", Fe, c(s.value.devtools.count.succeed), 1)
+                    t("code", Fe, m(s.value.devtools.count.succeed), 1)
                   ]),
                   e[24] || (e[24] = t("span", null, "Errors:", -1)),
                   t("span", null, [
-                    t("code", Ue, c(s.value.devtools.count.errored), 1)
+                    t("code", Ue, m(s.value.devtools.count.errored), 1)
                   ]),
                   e[25] || (e[25] = t("span", null, "Cancelled:", -1)),
                   t("span", null, [
-                    t("code", Qe, c(s.value.devtools.count.cancelled), 1)
+                    t("code", Qe, m(s.value.devtools.count.cancelled), 1)
                   ])
                 ])
               ])
             ]),
             _: 1
           }, 8, ["icon"]),
-          a(p, {
+          l(_, {
             title: `History (${s.value.devtools.history.length})`,
-            icon: o(ge),
+            icon: o(he),
             open: !1
           }, {
-            default: d(() => [
+            default: r(() => [
               t("div", We, [
-                (n(!0), i(b, null, ie(E.value, (u) => (n(), x(p, {
-                  key: u.updatedAt,
-                  title: `Entry nº${u.id} (${o(C)(new Date(u.updatedAt), w)})`,
-                  open: !1
+                (n(!0), u(C, null, re(s.value.devtools.history, (i) => (n(), k(_, {
+                  key: i.updatedAt,
+                  title: `Entry nº${i.id} (${o(I)(new Date(i.updatedAt), w)})`,
+                  open: !1,
+                  class: "border border-neutral-200 dark:border-neutral-800"
                 }, {
-                  default: d(() => [
-                    t("pre", Je, c(u.data), 1)
+                  default: r(() => [
+                    l(q, {
+                      data: i,
+                      readonly: ""
+                    }, null, 8, ["data"])
                   ]),
                   _: 2
                 }, 1032, ["title"]))), 128))
@@ -411,34 +403,37 @@ const xe = q({ name: "lucide-sigma-square", render: ke }), we = { class: "flex f
             ]),
             _: 1
           }, 8, ["title", "icon"]),
-          a(p, {
+          l(_, {
             title: "Options",
             open: !1,
-            icon: o(P)
+            icon: o(J),
+            "no-padding": ""
           }, {
-            default: d(() => [
-              t("div", Ge, [
-                s.value.options ? (n(), i("pre", Pe, c(s.value.options), 1)) : (n(), i("p", Xe, [...e[26] || (e[26] = [
-                  _(" This Query entry has no options. It might have been created from the server or manually set with ", -1),
-                  t("code", null, "queryCache.setQueryData()", -1),
-                  _(" for prefetching. ", -1)
-                ])]))
-              ])
+            default: r(() => [
+              s.value.options ? (n(), k(q, {
+                key: 0,
+                data: s.value.options,
+                readonly: ""
+              }, null, 8, ["data"])) : (n(), u("p", Ge, [...e[26] || (e[26] = [
+                p(" This Query entry has no options. It might have been created from the server or manually set with ", -1),
+                t("code", null, "queryCache.setQueryData()", -1),
+                p(" for prefetching. ", -1)
+              ])]))
             ]),
             _: 1
           }, 8, ["icon"])
-        ], 64)) : (n(), i("div", Ke, [
-          t("p", Ye, [
-            e[27] || (e[27] = _(" Select a Query to inspect ", -1)),
-            a(j)
+        ], 64)) : (n(), u("div", Je, [
+          t("p", Pe, [
+            e[27] || (e[27] = p(" Select a Query to inspect ", -1)),
+            l(V)
           ]),
-          t("p", Ze, " No query with key " + c(o(l).params.queryId) + " was found in the cache ", 1)
+          t("p", Xe, " No query with key " + m(o(a).params.queryId) + " was found in the cache ", 1)
         ]))
       ]);
     };
   }
 });
 export {
-  nt as default
+  tt as default
 };
-//# sourceMappingURL=_queryId_-deTdMujv.js.map
+//# sourceMappingURL=_queryId_-OYxjQ3wF.js.map